@ropav/styles 0.5.0 → 0.6.0

package/dist/components/sidebar/sidebar.styles.d.ts

@@ -41,6 +41,18 @@ export declare const sidebarVariants: import("tailwind-variants").TVReturnType<{
             panel: string;
         };
     };
+    variant: {
+        floating: {
+            panel: string;
+            rail: string;
+        };
+        inset: {
+            inset: string;
+            panel: string;
+            rail: string;
+        };
+        sidebar: {};
+    };
 }, {
     base: string;
     content: string;
@@ -103,6 +115,18 @@ export declare const sidebarVariants: import("tailwind-variants").TVReturnType<{
             panel: string;
         };
     };
+    variant: {
+        floating: {
+            panel: string;
+            rail: string;
+        };
+        inset: {
+            inset: string;
+            panel: string;
+            rail: string;
+        };
+        sidebar: {};
+    };
 }, {
     base: string;
     content: string;
@@ -165,6 +189,18 @@ export declare const sidebarVariants: import("tailwind-variants").TVReturnType<{
             panel: string;
         };
     };
+    variant: {
+        floating: {
+            panel: string;
+            rail: string;
+        };
+        inset: {
+            inset: string;
+            panel: string;
+            rail: string;
+        };
+        sidebar: {};
+    };
 }, {
     base: string;
     content: string;

package/dist/components/sidebar/sidebar.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar.styles.d.ts","sourceRoot":"","sources":["../../../src/components/sidebar/sidebar.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AActD,eAAO,MAAM,eAAe;;QA4BtB,IAAI;YACF,KAAK;;QAEP,IAAI;YACF,KAAK;;QAEP,SAAS;YACP,KAAK;;;;QAMP,IAAI;YACF,KAAK;;;;QAMP,IAAI;YACF,OAAO;;;;QAMT,IAAI;YACF,IAAI;;;;QAMN,IAAI;YACF,IAAI;;;;QAIN,IAAI;YACF,IAAI;YACJ,KAAK;;QAEP,KAAK;YACH,IAAI;YACJ,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAIX,CAAC;AAEH,MAAM,MAAM,eAAe,GAAG,YAAY,CAAC,OAAO,eAAe,CAAC,CAAC"}
+{"version":3,"file":"sidebar.styles.d.ts","sourceRoot":"","sources":["../../../src/components/sidebar/sidebar.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AActD,eAAO,MAAM,eAAe;;QA6BtB,IAAI;YACF,KAAK;;QAEP,IAAI;YACF,KAAK;;QAEP,SAAS;YACP,KAAK;;;;QAMP,IAAI;YACF,KAAK;;;;QAMP,IAAI;YACF,OAAO;;;;QAMT,IAAI;YACF,IAAI;;;;QAMN,IAAI;YACF,IAAI;;;;QAIN,IAAI;YACF,IAAI;YACJ,KAAK;;QAEP,KAAK;YACH,IAAI;YACJ,KAAK;;;;QAcP,QAAQ;YACN,KAAK;YACL,IAAI;;QAEN,KAAK;YACH,KAAK;YACL,KAAK;YACL,IAAI;;QAEN,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAGX,CAAC;AAEH,MAAM,MAAM,eAAe,GAAG,YAAY,CAAC,OAAO,eAAe,CAAC,CAAC"}

package/dist/components/sidebar/sidebar.styles.js

@@ -3,7 +3,8 @@ import { tv } from "tailwind-variants";
 const sidebarVariants = tv({
 	defaultVariants: {
 		collapsible: "icon",
-		side: "left"
+		side: "left",
+		variant: "sidebar"
 	},
 	slots: {
 		base: "sidebar",
@@ -45,6 +46,18 @@ const sidebarVariants = tv({
 				base: "sidebar--right",
 				panel: "sidebar__panel--right"
 			}
+		},
+		variant: {
+			floating: {
+				panel: "sidebar__panel--floating",
+				rail: "sidebar__rail--quiet"
+			},
+			inset: {
+				inset: "sidebar__inset--card",
+				panel: "sidebar__panel--bare",
+				rail: "sidebar__rail--quiet"
+			},
+			sidebar: {}
 		}
 	}
 });

package/dist/components/sidebar.css

@@ -19,11 +19,25 @@
    * stylesheet reads. */
   --sidebar-width: calc(var(--spacing) * 64);
   --sidebar-width-icon: calc(var(--spacing) * 14);
+  /* The gap a card stands off by and the corner it wears, for the variants where something is
+   * a card: the panel under `--floating`, the inset under `--card`. One pair rather than two,
+   * because a variant makes exactly one of them a card and a second set would be the same two
+   * numbers under a name that is wrong half the time.
+   *
+   * The corner is the one every container in the library wears, so a sidebar's card and a Card
+   * dropped beside it round the same. */
+  --sidebar-card-gap: calc(var(--spacing) * 2);
+  --sidebar-card-radius: min(32px, var(--component-radius));
   /* The rail's line and the grab area around it, matching `splitter.css` — same hairline, same
    * reasoning about a target no one can hit, same wait before it flares. */
   --sidebar-rail-gutter: 1px;
   --sidebar-rail-target: 15px;
   --sidebar-highlight-delay: 500ms;
+  /* What the line is painted with, at rest and lit. Separate properties so a caller can retune one
+   * state without flattening the rest onto a single colour. */
+  --sidebar-rail-line: var(--separator);
+  --sidebar-rail-line-hover: var(--accent);
+  --sidebar-rail-line-dragging: var(--sidebar-rail-line-hover);
 
   @apply isolate flex h-full w-full;
 }
@@ -51,10 +65,6 @@
 
   inline-size: var(--sidebar-width);
 
-  /**
-   * Transitions
-   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
-   */
   transition: inline-size 200ms var(--ease-out);
   @apply motion-reduce:transition-none;
 }
@@ -76,6 +86,27 @@
   @apply border-s border-separator/50;
 }
 
+/* Neither fill nor line: the panel has stopped being a surface, and the inset beside it is the one
+ * that paints. After the side modifiers, whose border this has to beat at equal specificity, and
+ * before `--drawer`, which stays last for the reason given there. */
+.sidebar__panel--bare {
+  @apply border-0 bg-transparent;
+}
+
+/* The panel as a card of its own, standing off the page on every side. A whole border rather than
+ * the side modifiers' single edge, which at equal specificity is enough to overwrite it — no
+ * `border-0` first.
+ *
+ * The margin is what the rail then sits in, and that gap is already dividing the two, which is why
+ * this variant quiets the line: a hairline inside it would be a second answer to the same question.
+ */
+.sidebar__panel--floating {
+  @apply border border-separator/50 shadow-surface;
+
+  margin: var(--sidebar-card-gap);
+  border-radius: var(--sidebar-card-radius);
+}
+
 /* Collapsing to icons is the default, so the width it collapses to lives on the mode that has one
  * and `--none` is the empty rule. */
 .sidebar__panel--icon[data-collapsed="true"] {
@@ -93,18 +124,26 @@
   @apply border-0 bg-transparent;
 
   inline-size: 0;
+  /* And the standing-off a card variant asks for, which on a box no longer there is a gap held
+   * open around nothing — the same fault as the hairline, a little wider. */
+  margin: 0;
 }
 
 .sidebar__panel--none {
 }
 
 /* Inside a drawer the panel is no longer the surface — the dialog is, and it paints, sizes and
- * slides itself. The panel gives all three up and becomes the column that fills what it was handed.
- * Last of the panel's modifiers, so it beats the widths above at equal specificity. */
+ * slides itself. The panel gives all of that up and becomes the column that fills what it was
+ * handed, the standing-off and the corner of a card variant included: the dialog is already the
+ * shape, and a card inset within it would be a second one drawn inside the first.
+ * Last of the panel's modifiers, so it beats the widths and the card geometry above at equal
+ * specificity. */
 .sidebar__panel--drawer {
   @apply size-full border-0 bg-transparent;
 
   inline-size: auto;
+  margin: 0;
+  border-radius: 0;
   transition: none;
 }
 
@@ -183,15 +222,23 @@
    ========================================================================== */
 
 .sidebar__item {
-  @apply relative flex min-h-9 w-full min-w-0 items-center justify-start gap-2 rounded-component px-2 text-sm font-medium text-foreground no-underline outline-none no-highlight;
+  @apply relative flex min-h-9 w-full min-w-0 items-center justify-start gap-2 rounded-component px-2 text-sm font-medium no-underline outline-none no-highlight;
+
+  /* The row's fill and label, per state. A caller retuning the resting pair used to flatten the
+   * current page's along with it, since one declaration cannot tell the states apart. */
+  --sidebar-item-bg: transparent;
+  --sidebar-item-bg-hover: var(--state-layer);
+  --sidebar-item-bg-pressed: var(--sidebar-item-bg-hover);
+  --sidebar-item-bg-current: var(--accent-soft);
+  --sidebar-item-fg: var(--foreground);
+  --sidebar-item-fg-current: var(--accent-soft-foreground);
+
+  background-color: var(--sidebar-item-bg);
+  color: var(--sidebar-item-fg);
 
   /* Cursor */
   cursor: var(--cursor-interactive);
 
-  /**
-   * Transitions
-   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
-   */
   transition:
     background-color 150ms var(--ease-out),
     color 150ms var(--ease-out);
@@ -201,7 +248,7 @@
   @media (hover: hover) {
     &:hover,
     &[data-hovered="true"] {
-      @apply bg-default;
+      background-color: var(--sidebar-item-bg-hover);
     }
   }
 
@@ -214,14 +261,15 @@
   /* Pressed state */
   &:active,
   &[data-pressed="true"] {
-    @apply bg-default;
+    background-color: var(--sidebar-item-bg-pressed);
   }
 
   /* The current page. Its whole job is to be the one item that stands out, so the mode flattening
    * the fill onto the page would take exactly the distinction away — hence `forced-selected`,
    * which is what the rest of the library reaches for to say "this one". */
   &[data-current="true"] {
-    @apply bg-accent-soft text-accent-soft-foreground;
+    background-color: var(--sidebar-item-bg-current);
+    color: var(--sidebar-item-fg-current);
 
     @apply forced-selected;
   }
@@ -337,10 +385,6 @@
   height: var(--disclosure-panel-height);
   overflow: clip;
 
-  /**
-   * Transitions
-   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
-   */
   transition:
     height 200ms var(--ease-out-quad),
     opacity 200ms var(--ease-out);
@@ -368,6 +412,27 @@
   @apply relative flex min-w-0 flex-1 flex-col overflow-hidden bg-background;
 }
 
+/* The page beside a bare panel, and now the thing that paints. `--surface` rather than the base
+ * rule's `--background`: this stopped being the page's background the moment it became a plate
+ * lying on one, which is what `--surface` names.
+ *
+ * The first of this component's modifiers to *add* paint rather than drop it, which is what puts it
+ * in front of the forced-colors sweep as a box with something to lose. Under the mode the fill
+ * flattens onto the page behind it and the shadow goes, leaving the contents sitting loose — so it
+ * takes the same inset outline every container that paints takes, offset inwards so nothing moves
+ * and the radius above still holds it. */
+.sidebar__inset--card {
+  @apply bg-surface text-surface-foreground shadow-surface;
+
+  margin: var(--sidebar-card-gap);
+  border-radius: var(--sidebar-card-radius);
+
+  @media (forced-colors: active) {
+    outline: 1px solid CanvasText;
+    outline-offset: -1px;
+  }
+}
+
 /* ==========================================================================
    Rail — the edge strip
    ========================================================================== */
@@ -385,9 +450,14 @@
   inline-size: var(--sidebar-rail-gutter);
   cursor: var(--cursor-interactive);
 
+  /* On the host, not in `::after` where the transition lives: the variant reaches a pseudo-element
+   * from its originating element, and appending its condition after `::after` matches nothing. */
+  @apply motion-reduce:transition-none;
+
   &::after {
-    @apply pointer-events-none absolute inset-y-0 rounded-sm bg-separator content-[''];
+    @apply pointer-events-none absolute inset-y-0 rounded-sm content-[''];
 
+    background-color: var(--sidebar-rail-line);
     inline-size: var(--sidebar-rail-gutter);
 
     /* Flattened to `Canvas` the line stops existing rather than weakening — the whole part *is*
@@ -396,28 +466,15 @@
       background-color: CanvasText;
     }
 
-    /**
-     * Transitions
-     * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
-     */
     transition:
       background-color 150ms var(--ease-out),
       inline-size 150ms var(--ease-out);
-    @apply motion-reduce:transition-none;
   }
 
   &:hover::after,
   &[data-hovered="true"]::after,
   &[data-dragging="true"]::after {
-    @apply bg-accent;
-
     inline-size: calc(var(--sidebar-rail-gutter) * 2);
-
-    /* `bg-separator` and `bg-accent` both flatten to `Canvas`, so without this the resting and
-     * active states are byte-identical under the mode. */
-    @media (forced-colors: active) {
-      background-color: Highlight;
-    }
   }
 
   /* Delayed on the way in and immediate on the way out. A grab area many times the width of the
@@ -425,15 +482,27 @@
    * reads as a twitch rather than an invitation. */
   &:hover::after,
   &[data-hovered="true"]::after {
+    background-color: var(--sidebar-rail-line-hover);
     transition-delay: var(--sidebar-highlight-delay);
   }
 
   /* A drag under way is not in question, so it skips the wait. Last, because a drag usually starts
    * from a hover and has to win. */
   &[data-dragging="true"]::after {
+    background-color: var(--sidebar-rail-line-dragging);
     transition-delay: 0ms;
   }
 
+  /* Every lit colour flattens to the same `Canvas` as the resting one, so without this the two are
+   * byte-identical under the mode. One block for all of them, after the colours it overrides. */
+  @media (forced-colors: active) {
+    &:hover::after,
+    &[data-hovered="true"]::after,
+    &[data-dragging="true"]::after {
+      background-color: Highlight;
+    }
+  }
+
   &:focus-visible,
   &[data-focus-visible="true"] {
     @apply status-focused;
@@ -457,6 +526,26 @@
   @apply cursor-col-resize;
 }
 
+/* Nothing left for the line to divide once something else is drawing that division — a card's own
+ * edge, or the gap it stands in — so it goes quiet in every state.
+ *
+ * Re-pointing the properties rather than restating the state rules, the shape `.input--secondary`
+ * takes: a `background-color` here would lose to `.sidebar__rail:hover::after` on specificity, and
+ * restating that set drifts the day a state is added to it.
+ *
+ * All three, and the third is not redundant. `--sidebar-rail-line-dragging` is declared on the
+ * shell as a `var()` of the hover one, so it is substituted there, against the shell's value; only
+ * the resolved colour reaches this far. Re-pointing hover here arrives too late for it, and a drag
+ * would still flare.
+ *
+ * The line comes back under Forced Colors Mode, on purpose: those blocks paint system keywords,
+ * which are not a component's to quiet. */
+.sidebar__rail--quiet {
+  --sidebar-rail-line: transparent;
+  --sidebar-rail-line-hover: transparent;
+  --sidebar-rail-line-dragging: transparent;
+}
+
 /* The invisible hit area, overhanging the hairline on both sides. A negative `inset` rather than a
  * transparent border, because Forced Colors Mode turns a transparent border-color opaque and every
  * rail would render as a solid block. */
@@ -471,15 +560,19 @@
    ========================================================================== */
 
 .sidebar__trigger {
-  @apply inline-flex size-8 shrink-0 items-center justify-center rounded-component bg-transparent text-muted outline-none select-none no-highlight;
+  @apply inline-flex size-8 shrink-0 items-center justify-center rounded-component outline-none select-none no-highlight;
+
+  --sidebar-trigger-bg: transparent;
+  --sidebar-trigger-bg-hover: var(--state-layer);
+  --sidebar-trigger-fg: var(--muted);
+  --sidebar-trigger-fg-hover: var(--foreground);
+
+  background-color: var(--sidebar-trigger-bg);
+  color: var(--sidebar-trigger-fg);
 
   /* Cursor */
   cursor: var(--cursor-interactive);
 
-  /**
-   * Transitions
-   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
-   */
   transition:
     background-color 150ms var(--ease-out),
     color 150ms var(--ease-out);
@@ -493,7 +586,8 @@
   @media (hover: hover) {
     &:hover,
     &[data-hovered="true"] {
-      @apply bg-default text-foreground;
+      background-color: var(--sidebar-trigger-bg-hover);
+      color: var(--sidebar-trigger-fg-hover);
     }
   }
 

package/dist/components/slider.css

@@ -21,7 +21,9 @@
   }
 
   .slider__track {
-    @apply relative rounded-xl bg-default;
+    @apply relative bg-default;
+
+    border-radius: min(32px, var(--component-radius));
 
     grid-area: track;
 
@@ -46,7 +48,9 @@
 
   .slider__thumb {
     /* Flex container for centering pseudo-elements */
-    @apply absolute flex cursor-grab items-center justify-center rounded-xl bg-accent no-highlight;
+    @apply absolute flex cursor-grab items-center justify-center bg-accent no-highlight;
+
+    border-radius: min(32px, var(--component-radius));
 
     /* The wrapper is the fill colour in ordinary use, which hides it against the fill. Flattened
      * to `Canvas` it would punch a hole through the fill instead, so it steps back and lets
@@ -55,10 +59,6 @@
       background-color: transparent;
     }
 
-    /**
-   * Transitions
-   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
-   */
     transition:
       background-color 250ms var(--ease-smooth),
       transform 250ms var(--ease-out),
@@ -67,9 +67,11 @@
 
     /* after: Visible thumb element */
     &::after {
-      @apply relative z-10 rounded-lg bg-accent-foreground text-black shadow-field;
+      @apply relative z-10 bg-accent-foreground text-black shadow-field;
       content: "";
 
+      border-radius: min(32px, var(--component-radius));
+
       /* Both the knob's fill and the shadow that separates it from the track are gone under
        * forced colors. `Canvas` inside a `CanvasText` ring reads against the bare track on one
        * side and the `Highlight` fill on the other, which no single flat colour manages. */
@@ -79,10 +81,7 @@
         outline-offset: -2px;
       }
 
-      /**
-       * Transitions
-       */
-      @apply origin-center transition-all motion-reduce:transition-none;
+      @apply origin-center transition-all;
     }
 
     /* Dragging state - cursor changes and thumb scales down */

package/dist/components/splitter.css

@@ -64,6 +64,14 @@
    * every crossing reads as a twitch rather than an invitation. Waiting means only an approach that
    * settles counts. */
   --splitter-highlight-delay: 500ms;
+  /* What the line and the grip are painted with, at rest and lit. Separate properties so a caller
+   * can retune one state without flattening the rest onto a single colour. */
+  --splitter-line: var(--separator);
+  --splitter-line-hover: var(--accent);
+  --splitter-line-dragging: var(--splitter-line-hover);
+  --splitter-grip-bg: var(--separator);
+  --splitter-grip-bg-hover: var(--accent);
+  --splitter-grip-bg-dragging: var(--splitter-grip-bg-hover);
 
   @apply relative z-10 flex shrink-0 grow-0 items-center justify-center self-stretch;
   @apply bg-transparent outline-none select-none no-highlight;
@@ -71,8 +79,14 @@
   /* The gesture is ours; the browser must not also pan or scroll from a drag on this. */
   @apply touch-none;
 
+  /* On the host, not in `::after` where the transition lives: the variant reaches a pseudo-element
+   * from its originating element, and appending its condition after `::after` matches nothing. */
+  @apply motion-reduce:transition-none;
+
   &::after {
-    @apply pointer-events-none absolute rounded-sm bg-separator content-[''];
+    @apply pointer-events-none absolute rounded-sm content-[''];
+
+    background-color: var(--splitter-line);
 
     /* Flattened to `Canvas` the divider stops existing rather than weakening — the whole part
      * *is* its background, which is why `separator.css` restates its colour the same way. */
@@ -80,58 +94,54 @@
       background-color: CanvasText;
     }
 
-    /**
-     * Transitions
-     * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
-     */
     transition:
       background-color 150ms var(--ease-out),
       inline-size 150ms var(--ease-out),
       block-size 150ms var(--ease-out);
-    @apply motion-reduce:transition-none;
   }
 
+  /* Delayed on the way in and immediate on the way out: the delay lives here rather than in the
+   * base rule, so leaving drops the highlight at once and a pointer that only passes through never
+   * starts the transition at all. It covers the thickening too — both are the same flare. */
   &:hover::after,
-  &[data-hovered="true"]::after,
-  &[data-dragging="true"]::after {
-    @apply bg-accent;
-
-    /* `bg-separator` and `bg-accent` both flatten to `Canvas`, so without this the resting and
-     * active states are byte-identical under the mode and grabbing the handle shows nothing. */
-    @media (forced-colors: active) {
-      background-color: Highlight;
-    }
+  &[data-hovered="true"]::after {
+    background-color: var(--splitter-line-hover);
+    transition-delay: var(--splitter-highlight-delay);
   }
 
   /* The grip answers to the same states as the line, and is reached as a direct child so a nested
    * group's own grip is left alone. */
   &:hover > .splitter__handle-grip,
-  &[data-hovered="true"] > .splitter__handle-grip,
-  &[data-dragging="true"] > .splitter__handle-grip {
-    @apply bg-accent;
-
-    @media (forced-colors: active) {
-      background-color: Highlight;
-    }
-  }
-
-  /* Delayed on the way in and immediate on the way out: the delay lives here rather than in the
-   * base rule, so leaving drops the highlight at once and a pointer that only passes through never
-   * starts the transition at all. It covers the thickening too — both are the same flare. */
-  &:hover::after,
-  &[data-hovered="true"]::after,
-  &:hover > .splitter__handle-grip,
   &[data-hovered="true"] > .splitter__handle-grip {
+    background-color: var(--splitter-grip-bg-hover);
     transition-delay: var(--splitter-highlight-delay);
   }
 
   /* Once a drag is under way the intent is not in question, so it skips the wait. Last, because a
    * drag usually starts from a hover and has to win. */
-  &[data-dragging="true"]::after,
+  &[data-dragging="true"]::after {
+    background-color: var(--splitter-line-dragging);
+    transition-delay: 0ms;
+  }
+
   &[data-dragging="true"] > .splitter__handle-grip {
+    background-color: var(--splitter-grip-bg-dragging);
     transition-delay: 0ms;
   }
 
+  /* Every lit colour flattens to the same `Canvas` as the resting one, so without this grabbing
+   * the handle shows nothing. One block for both parts, after the colours it overrides. */
+  @media (forced-colors: active) {
+    &:hover::after,
+    &[data-hovered="true"]::after,
+    &[data-dragging="true"]::after,
+    &:hover > .splitter__handle-grip,
+    &[data-hovered="true"] > .splitter__handle-grip,
+    &[data-dragging="true"] > .splitter__handle-grip {
+      background-color: Highlight;
+    }
+  }
+
   &:focus-visible,
   &[data-focus-visible="true"] {
     @apply status-focused;
@@ -168,7 +178,9 @@
  * Sized from custom properties rather than utilities so a theme can retune the pill without
  * restating both axes in both orientations. */
 .splitter__handle-grip {
-  @apply pointer-events-none absolute rounded-full bg-separator;
+  @apply pointer-events-none absolute rounded-full;
+
+  background-color: var(--splitter-grip-bg);
 
   /* The whole part *is* its background, so the mode flattening it onto the page removes the grip
    * rather than weakening it — the same reason the line restates its colour. */
@@ -176,10 +188,6 @@
     background-color: CanvasText;
   }
 
-  /**
-   * Transitions
-   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
-   */
   transition: background-color 150ms var(--ease-out);
   @apply motion-reduce:transition-none;
 }