@ropav/styles 0.4.0 → 0.5.0

package/dist/components/splitter.css

@@ -0,0 +1,241 @@
+/* Splitter styles */
+
+/*
+ * Orientation is a modifier class rather than a `[data-orientation]` descendant selector, and
+ * that is not a style preference. A splitter nests — a vertical group inside a panel of a
+ * horizontal one is the ordinary case — so `.splitter[data-orientation="horizontal"]
+ * .splitter__handle` would reach the inner group's handle as well as its own and lay it out on
+ * the wrong axis. Every rule below therefore sits on the part it styles.
+ *
+ * The modifier also buys the Storybook forced-colors sweep, which collects `[class*='--']` and a
+ * fixed state list that does not include `data-dragging`. Without one the two parts that paint
+ * anything — the handle and its grip — would never be audited.
+ */
+
+.splitter {
+  @apply isolate flex h-full w-full;
+}
+
+.splitter--horizontal {
+  @apply flex-row;
+}
+
+.splitter--vertical {
+  @apply flex-col;
+}
+
+/* A flex item's automatic minimum is its content, so without `min-w-0`/`min-h-0` a panel holding
+ * a long word or a wide table cannot be dragged narrower than that content and the drag silently
+ * stops responding partway along the track.
+ *
+ * `flex-1` is the unmanaged fallback only. The component writes the whole `flex` shorthand inline;
+ * an inline `flex-basis` alone would leave this `flex-grow: 1` in place and the panel would grow
+ * straight back past the size it was given. */
+.splitter__panel {
+  @apply relative min-h-0 min-w-0 flex-1 overflow-hidden;
+}
+
+/* The flex item is the gutter and paints nothing itself. The line you see is `::after`, absolutely
+ * positioned, which is what lets it thicken on hover without the gutter changing width and
+ * reflowing both panels by a pixel. `.slider__thumb::after` carries its knob the same way. */
+.splitter__handle {
+  /* The gutter is the line, with nothing either side of it. Dead space inside the gutter shows up
+   * as a gap wherever a nested group's divider meets this one — the panel between them clips its own
+   * contents, so the inner line cannot reach across to close it. `1px` rather than a spacing step,
+   * the same hairline `separator.css` writes as `h-px`/`w-px`, and both the flex item and `::after`
+   * are measured from it so a retuned token cannot let the gap back in. */
+  --splitter-gutter: 1px;
+  /* The whole grab area, gutter included — a hairline is not a target anyone can hit, so the target
+   * part overhangs it and every hit test lands there. Held as the total rather than as the overhang
+   * because the total is the number that means something, and it is off the spacing grid for the
+   * same reason: what is being sized is a target, not a step.
+   *
+   * Under the 24px WCAG 2.5.8 asks for, resting on that rule's spacing exception instead — what
+   * flanks a divider is a panel, not another target, so no two targets' circles can meet here. The
+   * overhang is also panel edge that stops taking clicks, and a scrollbar sits exactly there, which
+   * is why this is kept tight rather than widened to the letter of the rule. */
+  --splitter-target: 15px;
+  /* The pill's short axis and its long one. It is positioned rather than laid out, so it straddles a
+   * gutter narrower than itself without the panels giving up a pixel. */
+  --splitter-grip-thickness: calc(var(--spacing) * 1);
+  --splitter-grip-length: calc(var(--spacing) * 6);
+  /* How long the pointer has to stay before the divider lights up. A grab area many times the width
+   * of the line is one a pointer crosses on its way somewhere else, and a divider that flares at
+   * every crossing reads as a twitch rather than an invitation. Waiting means only an approach that
+   * settles counts. */
+  --splitter-highlight-delay: 500ms;
+
+  @apply relative z-10 flex shrink-0 grow-0 items-center justify-center self-stretch;
+  @apply bg-transparent outline-none select-none no-highlight;
+
+  /* The gesture is ours; the browser must not also pan or scroll from a drag on this. */
+  @apply touch-none;
+
+  &::after {
+    @apply pointer-events-none absolute rounded-sm bg-separator content-[''];
+
+    /* 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. */
+    @media (forced-colors: active) {
+      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;
+  }
+
+  &: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;
+    }
+  }
+
+  /* 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 {
+    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"] > .splitter__handle-grip {
+    transition-delay: 0ms;
+  }
+
+  &:focus-visible,
+  &[data-focus-visible="true"] {
+    @apply status-focused;
+  }
+
+  &[data-disabled="true"] {
+    @apply status-disabled;
+
+    /* `status-disabled` reaches `color` and `border-color`, and neither the line nor the grip is
+     * either of those. */
+    &::after,
+    & > .splitter__handle-grip {
+      @media (forced-colors: active) {
+        background-color: GrayText;
+      }
+    }
+  }
+}
+
+/* The invisible hit area — named for the target size it exists to reach, and kept apart from the
+ * grip because that one is the part you can see. A negative `inset` rather than a transparent
+ * border: forced colors turns a transparent *border-color* opaque — the trap `slider.css` documents
+ * at both ends of its track — and a bordered target would render as two solid blocks flanking every
+ * divider. `inset` has no such behaviour, so this needs no forced-colors rule of its own. */
+.splitter__handle-target {
+  @apply absolute inset-0 bg-transparent;
+}
+
+/* The visible grab affordance, and only that — the gesture belongs to the handle, the hit area to
+ * the target. No insets: an absolutely positioned child of a flex container takes its static
+ * position from the container's own alignment, which is the same `items-center justify-center` that
+ * centres the line above. `drawer.css` carries its handle bar as a child element the same way.
+ *
+ * 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;
+
+  /* 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. */
+  @media (forced-colors: active) {
+    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;
+}
+
+.splitter__handle-grip--horizontal {
+  inline-size: var(--splitter-grip-thickness);
+  block-size: var(--splitter-grip-length);
+}
+
+.splitter__handle-grip--vertical {
+  inline-size: var(--splitter-grip-length);
+  block-size: var(--splitter-grip-thickness);
+}
+
+/* A horizontal group puts its panels side by side, so the divider is a vertical line. */
+.splitter__handle--horizontal {
+  @apply cursor-col-resize;
+
+  inline-size: var(--splitter-gutter);
+
+  &::after {
+    @apply inset-y-0;
+
+    inline-size: var(--splitter-gutter);
+  }
+
+  &:hover::after,
+  &[data-hovered="true"]::after,
+  &[data-dragging="true"]::after {
+    inline-size: calc(var(--splitter-gutter) * 2);
+  }
+
+  & > .splitter__handle-target {
+    inset-inline: calc((var(--splitter-target) - var(--splitter-gutter)) / -2);
+  }
+}
+
+/* A vertical group stacks its panels, so the divider is a horizontal line. */
+.splitter__handle--vertical {
+  @apply cursor-row-resize;
+
+  block-size: var(--splitter-gutter);
+
+  &::after {
+    @apply inset-x-0;
+
+    block-size: var(--splitter-gutter);
+  }
+
+  &:hover::after,
+  &[data-hovered="true"]::after,
+  &[data-dragging="true"]::after {
+    block-size: calc(var(--splitter-gutter) * 2);
+  }
+
+  & > .splitter__handle-target {
+    inset-block: calc((var(--splitter-target) - var(--splitter-gutter)) / -2);
+  }
+}

package/dist/components/table.css

@@ -205,9 +205,9 @@
     border-end-end-radius: min(32px, var(--radius-2xl));
   }
 
-  /* Virtualized: elements are divs, not tr/td. VirtualizerItem wrappers
-     break :first-child/:last-child on rows and cells, so round the body
-     itself and clip overflow instead. */
+  /* Virtualized: elements are divs, not tr/td, and only a window of the rows
+     is in the DOM, so :first-child/:last-child name the window's edges rather
+     than the table's. Round the body itself and clip overflow instead. */
   &:not(tbody) {
     @apply relative h-full overflow-clip;
     border-radius: min(32px, var(--radius-2xl));

package/dist/components/tabs.css

@@ -121,7 +121,7 @@
 
 /* Individual tab */
 .tabs__tab {
-  @apply relative flex h-8 w-full items-center justify-center rounded-3xl px-4 text-center text-sm font-medium text-muted outline-none no-highlight;
+  @apply relative flex h-8 w-full items-center justify-center rounded-component px-4 text-center text-sm font-medium text-muted outline-none no-highlight;
 
   z-index: 1;
   cursor: var(--cursor-interactive);
@@ -221,7 +221,7 @@
 
 /* Tab indicator - React Aria's SelectionIndicator */
 .tabs__indicator {
-  @apply absolute start-0 top-0 size-full rounded-3xl bg-segment shadow-surface;
+  @apply absolute start-0 top-0 size-full rounded-component bg-segment shadow-surface;
 
   z-index: -1;
 

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

@@ -4,6 +4,11 @@ export declare const textAreaVariants: import("tailwind-variants").TVReturnType<
         false: "";
         true: "textarea--full-width";
     };
+    size: {
+        lg: "textarea--lg";
+        md: "";
+        sm: "textarea--sm";
+    };
     variant: {
         primary: "textarea--primary";
         secondary: "textarea--secondary";
@@ -13,6 +18,11 @@ export declare const textAreaVariants: import("tailwind-variants").TVReturnType<
         false: "";
         true: "textarea--full-width";
     };
+    size: {
+        lg: "textarea--lg";
+        md: "";
+        sm: "textarea--sm";
+    };
     variant: {
         primary: "textarea--primary";
         secondary: "textarea--secondary";
@@ -22,6 +32,11 @@ export declare const textAreaVariants: import("tailwind-variants").TVReturnType<
         false: "";
         true: "textarea--full-width";
     };
+    size: {
+        lg: "textarea--lg";
+        md: "";
+        sm: "textarea--sm";
+    };
     variant: {
         primary: "textarea--primary";
         secondary: "textarea--secondary";

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

@@ -1 +1 @@
-{"version":3,"file":"textarea.styles.d.ts","sourceRoot":"","sources":["../../../src/components/textarea/textarea.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAItD,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;cAgB3B,CAAC;AAEH,MAAM,MAAM,gBAAgB,GAAG,YAAY,CAAC,OAAO,gBAAgB,CAAC,CAAC"}
+{"version":3,"file":"textarea.styles.d.ts","sourceRoot":"","sources":["../../../src/components/textarea/textarea.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAItD,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAsB3B,CAAC;AAEH,MAAM,MAAM,gBAAgB,GAAG,YAAY,CAAC,OAAO,gBAAgB,CAAC,CAAC"}

package/dist/components/textarea/textarea.styles.js

@@ -4,6 +4,7 @@ const textAreaVariants = tv({
 	base: "textarea",
 	defaultVariants: {
 		fullWidth: false,
+		size: "md",
 		variant: "primary"
 	},
 	variants: {
@@ -11,6 +12,11 @@ const textAreaVariants = tv({
 			false: "",
 			true: "textarea--full-width"
 		},
+		size: {
+			lg: "textarea--lg",
+			md: "",
+			sm: "textarea--sm"
+		},
 		variant: {
 			primary: "textarea--primary",
 			secondary: "textarea--secondary"

package/dist/components/textarea.css

@@ -1,6 +1,6 @@
 /* use textarea instead of text-area to avoid conflict with Tailwind `text-` prefix */
 .textarea {
-  @apply rounded-field border bg-field px-3 py-2 text-base text-field-foreground shadow-field outline-none placeholder:text-field-placeholder sm:text-sm;
+  @apply rounded-field border bg-field px-3 field-line-md text-field-foreground shadow-field outline-none placeholder:text-field-placeholder;
 
   min-height: 38px;
 
@@ -102,3 +102,15 @@
 .textarea--full-width {
   @apply w-full;
 }
+
+/* ==========================================================================
+   Size variants
+   ========================================================================== */
+
+.textarea--sm {
+  @apply field-line-sm;
+}
+
+.textarea--lg {
+  @apply field-line-lg;
+}

package/dist/components/toast.css

@@ -47,7 +47,7 @@
   inset-inline-end: 0;
 
   @apply pointer-events-auto flex flex-row items-start justify-start gap-1.5 bg-surface px-4 py-3 shadow-overlay;
-  border-radius: min(32px, var(--radius-3xl));
+  border-radius: min(32px, var(--component-radius));
 }
 
 .toast--bottom,

package/dist/components/toggle-button-group.css

@@ -38,32 +38,32 @@
 
 /* Apply border radius to first button (start edge) */
 .toggle-button-group--horizontal .toggle-button:first-child {
-  @apply rounded-s-3xl;
+  @apply rounded-s-component;
 }
 
 /* Apply border radius to last button (end edge) */
 .toggle-button-group--horizontal .toggle-button:last-child {
-  @apply rounded-e-3xl;
+  @apply rounded-e-component;
 }
 
 /* If only one button, apply both rounded edges */
 .toggle-button-group--horizontal .toggle-button:first-child:last-child {
-  @apply rounded-3xl;
+  @apply rounded-component;
 }
 
 /* Apply border radius to first button (top edge) in vertical */
 .toggle-button-group--vertical .toggle-button:first-child {
-  @apply rounded-t-3xl;
+  @apply rounded-t-component;
 }
 
 /* Apply border radius to last button (bottom edge) in vertical */
 .toggle-button-group--vertical .toggle-button:last-child {
-  @apply rounded-b-3xl;
+  @apply rounded-b-component;
 }
 
 /* If only one button in vertical, apply all rounded edges */
 .toggle-button-group--vertical .toggle-button:first-child:last-child {
-  @apply rounded-3xl;
+  @apply rounded-component;
 }
 
 /* Remove scale transform on active/pressed state for buttons in group */
@@ -127,7 +127,7 @@
 
 /* Restore border radius in detached mode */
 .toggle-button-group--detached .toggle-button {
-  @apply rounded-3xl;
+  @apply rounded-component;
 }
 
 /* Hide separators in detached mode */

package/dist/components/toggle-button.css

@@ -4,7 +4,7 @@
 
 /* Base styles */
 .toggle-button {
-  @apply relative isolate inline-flex h-10 w-fit origin-center items-center justify-center gap-2 rounded-3xl px-4 text-sm font-medium whitespace-nowrap outline-none select-none no-highlight md:h-9;
+  @apply relative isolate inline-flex h-9 w-fit origin-center items-center justify-center gap-2 rounded-component px-4 text-sm font-medium whitespace-nowrap outline-none select-none no-highlight;
 
   /**
    * Transitions
@@ -91,7 +91,7 @@
 
   /* SVG icon styling */
   & svg {
-    @apply pointer-events-none -mx-0.5 my-0.5 size-5 shrink-0 self-center sm:my-1 sm:size-4;
+    @apply pointer-events-none -mx-0.5 my-1 size-4 shrink-0 self-center;
   }
 }
 
@@ -100,11 +100,7 @@
    ========================================================================== */
 
 .toggle-button--sm {
-  @apply h-9 px-3 md:h-8;
-
-  & svg {
-    @apply size-4;
-  }
+  @apply h-8 px-3;
 
   &:active,
   &[data-pressed="true"] {
@@ -117,7 +113,7 @@
 }
 
 .toggle-button--lg {
-  @apply h-11 text-base md:h-10;
+  @apply h-10 text-base;
 
   &:active,
   &[data-pressed="true"] {
@@ -147,13 +143,13 @@
    ========================================================================== */
 
 .toggle-button--icon-only {
-  @apply w-10 p-0 md:w-9;
+  @apply w-9 p-0;
 }
 
 .toggle-button--icon-only.toggle-button--sm {
-  @apply w-9 md:w-8;
+  @apply w-8;
 }
 
 .toggle-button--icon-only.toggle-button--lg {
-  @apply w-11 md:w-10;
+  @apply w-10;
 }

package/dist/components/toolbar.css

@@ -28,7 +28,7 @@
 
 /* Attached variant */
 .toolbar--attached {
-  @apply rounded-3xl bg-surface p-1 shadow-overlay;
+  @apply rounded-component bg-surface p-1 shadow-overlay;
 
   /* Forced Colors Mode flattens the fill onto the page and strips the shadow, so the container
    * stops having any shape and its contents sit loose on the page. */

package/dist/components/tooltip.css

@@ -3,7 +3,7 @@
 /* Base tooltip styles */
 .tooltip {
   @apply max-w-xs origin-(--trigger-anchor-point) bg-overlay p-2 text-xs break-all;
-  border-radius: min(32px, var(--radius-xl));
+  border-radius: min(32px, var(--component-radius));
   box-shadow: var(--shadow-overlay);
 
   /* Entering animations */
@@ -40,10 +40,23 @@
 
   /* Arrow styling */
   & [data-slot="overlay-arrow"] {
-    @apply stroke-border/40;
     fill: var(--overlay);
   }
 
+  /**
+   * With an arrow, the edge treatment moves off the body and onto the pair.
+   *
+   * The arrow is a second shape filled with the body's own colour, overlapping it so no seam can
+   * open between them — which leaves nothing for a per-shape edge to be right about: a shadow or
+   * hairline painted on the body alone stops at the join, and one painted on the arrow crosses
+   * it. `--overlay-edge` is a filter, and a filter sees the two shapes as one image, so whatever
+   * edge it draws follows their combined silhouette.
+   */
+  &:has([data-slot="tooltip-arrow"]) {
+    box-shadow: none;
+    filter: var(--overlay-edge, none);
+  }
+
   /* Arrow rotation based on placement */
   &[data-placement="bottom"] [data-slot="overlay-arrow"] {
     rotate: 180deg;

package/dist/components/virtualizer/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./virtualizer.styles";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/virtualizer/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/virtualizer/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC"}

package/dist/components/virtualizer/index.js

@@ -0,0 +1,2 @@
+import { virtualizerVariants } from "./virtualizer.styles.js";
+export { virtualizerVariants };

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

@@ -0,0 +1,44 @@
+/**
+ * The parts a windowed collection draws for itself, whichever collection it is.
+ *
+ * Only the scrollbar so far: a table and a listbox hide the native one and draw this in its place,
+ * so a dragged thumb moves the rows and the scroll offset together.
+ */
+export declare const virtualizerVariants: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: {
+            scrollbar?: import("tailwind-variants").ClassValue;
+            scrollbarThumb?: import("tailwind-variants").ClassValue;
+            scrollbarTrack?: import("tailwind-variants").ClassValue;
+        } | import("tailwind-variants").ClassValue;
+    };
+} | {
+    [x: string]: {
+        [x: string]: {
+            scrollbar?: import("tailwind-variants").ClassValue;
+            scrollbarThumb?: import("tailwind-variants").ClassValue;
+            scrollbarTrack?: import("tailwind-variants").ClassValue;
+        } | import("tailwind-variants").ClassValue;
+    };
+} | {}, {
+    scrollbar: string;
+    scrollbarThumb: string;
+    scrollbarTrack: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: {
+            scrollbar?: import("tailwind-variants").ClassValue;
+            scrollbarThumb?: import("tailwind-variants").ClassValue;
+            scrollbarTrack?: import("tailwind-variants").ClassValue;
+        } | import("tailwind-variants").ClassValue;
+    };
+} | {}, {
+    scrollbar: string;
+    scrollbarThumb: string;
+    scrollbarTrack: string;
+}, import("tailwind-variants").TVReturnTypeLike<unknown, {
+    scrollbar: string;
+    scrollbarThumb: string;
+    scrollbarTrack: string;
+}>>;
+//# sourceMappingURL=virtualizer.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"virtualizer.styles.d.ts","sourceRoot":"","sources":["../../../src/components/virtualizer/virtualizer.styles.ts"],"names":[],"mappings":"AAEA;;;;;GAKG;AACH,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAM9B,CAAC"}

package/dist/components/virtualizer/virtualizer.styles.js

@@ -0,0 +1,15 @@
+import { tv } from "tailwind-variants";
+//#region src/components/virtualizer/virtualizer.styles.ts
+/**
+* The parts a windowed collection draws for itself, whichever collection it is.
+*
+* Only the scrollbar so far: a table and a listbox hide the native one and draw this in its place,
+* so a dragged thumb moves the rows and the scroll offset together.
+*/
+const virtualizerVariants = tv({ slots: {
+	scrollbar: "virtualizer__scrollbar",
+	scrollbarThumb: "virtualizer__scrollbar-thumb",
+	scrollbarTrack: "virtualizer__scrollbar-track"
+} });
+//#endregion
+export { virtualizerVariants };

package/dist/components/virtualizer.css

@@ -0,0 +1,64 @@
+/* ==========================================================================
+   Virtualizer — the parts a windowed collection draws for itself.
+   ========================================================================== */
+
+/* --------------------------------------------------------------------------
+   Scrollbar — drawn by a windowed collection in place of the native one it
+   hides, so a dragged thumb moves the rows and the scroll offset together.
+   The component sizes and places each track; this only paints them and holds
+   the box they hang from.
+   -------------------------------------------------------------------------- */
+
+/* A box of no height stuck to the top and inline start of the viewport, so a track placed at its
+ * edges sits at the viewport's edges however far the content has been scrolled along either axis.
+ * The component gives it the viewport's width. */
+.virtualizer__scrollbar {
+  @apply sticky start-0 top-0 z-2 h-0;
+}
+
+.virtualizer__scrollbar-track {
+  @apply absolute touch-none select-none;
+  background-color: var(--scrollbar-track);
+
+  /* The content wrapper drops pointers mid-scroll so a fast scroll does not hover every row it
+   * passes. The track is what is being dragged, so it keeps taking them. */
+  pointer-events: auto;
+
+  &[data-orientation="vertical"] {
+    @apply end-0 top-0;
+  }
+
+  &[data-orientation="horizontal"] {
+    @apply start-0;
+  }
+}
+
+.virtualizer__scrollbar-thumb {
+  @apply absolute rounded-full;
+  background-color: var(--scrollbar-thumb);
+
+  &[data-orientation="vertical"] {
+    inset-inline: 2px;
+  }
+
+  &[data-orientation="horizontal"] {
+    inset-block: 2px;
+  }
+
+  @media (hover: hover) {
+    &:hover,
+    &[data-hovered="true"] {
+      background-color: color-mix(in oklch, var(--foreground) 25%, transparent);
+    }
+  }
+
+  &[data-pressed="true"] {
+    background-color: color-mix(in oklch, var(--foreground) 35%, transparent);
+  }
+
+  /* Forced Colors Mode replaces the translucent fill with the canvas, and the thumb vanishes. */
+  @media (forced-colors: active) {
+    forced-color-adjust: none;
+    background-color: ButtonText;
+  }
+}