Even more conflicts

examples/website/src/index.html

@@ -99,11 +99,7 @@
 
         <main>
           <section class="tokenizer-selector">
-            <div
+            <div class="radio-group" role="radiogroup" aria-label="Tokenization strategy">
-              class="radio-group"
-              role="radiogroup"
-              aria-label="Tokenization strategy"
-            >
               <label class="radio-option">
                 <input
                   type="radio"

examples/website/src/index.ts

@@ -13,20 +13,13 @@ const tokenizerRadios = document.querySelectorAll(
 
 const sampleText = `## Draft release
 ## Release plan
-
-Build steps:
 - Prototype
 - Publish
-
-Review checklist:
 - [ ] Draft
 - [ ] Review
-
-Announcement:
 > Internal
 > Ready
-
+Color-coded edits.`;
-Use color-coded changes to compare tokenisers.`;
 
 let pendingUpdate: number | null = null;
 function scheduleUpdate(): void {
@@ -74,7 +67,7 @@ function loadSample(): void {
     .replace('- Prototype\n', '')
     .replace('- [ ] Draft\n', '')
     .replace('> Internal\n', '')
-    .replace('color', 'colour');
+    .replace('Color', 'Colour');
   rightTextArea.value = sampleText
     .replace('## Release plan', '# Release plan')
     .replace('- Publish', '1. Publish')

examples/website/src/style.scss

@@ -68,7 +68,7 @@ header {
   padding: 32px 32px 0 32px;
 }
 
-header>h1 {
+header > h1 {
   font-size: 2.5rem;
   font-weight: 700;
   color: $primary-blue;
@@ -93,13 +93,13 @@ code {
   font-weight: 500;
 }
 
-header>p {
+header > p {
   color: $text-secondary;
   font-size: 1.1rem;
   margin-bottom: 0;
 }
 
-header>p:not(:first-of-type) {
+header > p:not(:first-of-type) {
   margin-top: 16px;
 }
 
@@ -299,13 +299,12 @@ textarea {
   width: 100%;
   user-select: text;
 
-  >* {
+  > * {
     position: relative;
     white-space: pre-wrap;
   }
 
   &:not(.show-deletions) {
-
     .RemovedFromLeft,
     .RemovedFromRight {
       display: none;
@@ -371,12 +370,12 @@ $DOT_RADIUS: 4;
     background: caret-colour($light-blue);
   }
 
-  >* {
+  > * {
     position: absolute;
     background-color: inherit;
   }
 
-  >.stick {
+  > .stick {
     left: 0;
     top: 0;
     transform: translateX(-50%);
@@ -387,7 +386,7 @@ $DOT_RADIUS: 4;
     animation: blink-stick 1s steps(1) infinite;
   }
 
-  >.dot {
+  > .dot {
     border-radius: 50%;
     width: #{$DOT_RADIUS * 2}px;
     height: #{$DOT_RADIUS * 2}px;
@@ -409,11 +408,11 @@ $DOT_RADIUS: 4;
     }
   }
 
-  &:hover>.dot {
+  &:hover > .dot {
     opacity: 0;
   }
 
-  >.info {
+  > .info {
     top: -1.3em;
     left: calc(-#{$CARET_WIDTH} / 2 * 1px);
     font-size: 0.9em;
@@ -426,13 +425,12 @@ $DOT_RADIUS: 4;
     border-radius: 3px 3px 3px 0;
   }
 
-  &:hover>.info {
+  &:hover > .info {
     opacity: 1;
   }
 }
 
 @keyframes blink-stick {
-
   0%,
   100% {
     opacity: 1;
@@ -448,11 +446,11 @@ $DOT_RADIUS: 4;
     padding: 32px 18px 0 18px;
   }
 
-  header>h1 {
+  header > h1 {
     margin-bottom: 18px;
   }
 
-  header>p {
+  header > p {
     font-size: 1rem;
   }
 
@@ -519,14 +517,14 @@ footer {
   gap: 16px;
 }
 
-.footer-links>a>svg {
+.footer-links > a > svg {
   color: $text-secondary;
   width: 28px;
   height: 28px;
   transition: transform 0.2s;
 }
 
-.footer-links>a>svg:hover {
+.footer-links > a > svg:hover {
   cursor: pointer;
   transform: scale(1.15);
-}
+}