@ropav/styles 0.4.0 → 0.6.0

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/index.d.ts

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

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

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

package/dist/components/splitter/index.js

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

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

@@ -0,0 +1,61 @@
+import type { VariantProps } from "tailwind-variants";
+export declare const splitterVariants: import("tailwind-variants").TVReturnType<{
+    orientation: {
+        horizontal: {
+            base: string;
+            handle: string;
+            handleGrip: string;
+        };
+        vertical: {
+            base: string;
+            handle: string;
+            handleGrip: string;
+        };
+    };
+}, {
+    base: string;
+    handle: string;
+    handleGrip: string;
+    handleTarget: string;
+    panel: string;
+}, undefined, {
+    orientation: {
+        horizontal: {
+            base: string;
+            handle: string;
+            handleGrip: string;
+        };
+        vertical: {
+            base: string;
+            handle: string;
+            handleGrip: string;
+        };
+    };
+}, {
+    base: string;
+    handle: string;
+    handleGrip: string;
+    handleTarget: string;
+    panel: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    orientation: {
+        horizontal: {
+            base: string;
+            handle: string;
+            handleGrip: string;
+        };
+        vertical: {
+            base: string;
+            handle: string;
+            handleGrip: string;
+        };
+    };
+}, {
+    base: string;
+    handle: string;
+    handleGrip: string;
+    handleTarget: string;
+    panel: string;
+}>>;
+export type SplitterVariants = VariantProps<typeof splitterVariants>;
+//# sourceMappingURL=splitter.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"splitter.styles.d.ts","sourceRoot":"","sources":["../../../src/components/splitter/splitter.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAgBtD,eAAO,MAAM,gBAAgB;;QAavB,UAAU;YACR,IAAI;YACJ,MAAM;YACN,UAAU;;QAEZ,QAAQ;YACN,IAAI;YACJ,MAAM;YACN,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAIhB,CAAC;AAEH,MAAM,MAAM,gBAAgB,GAAG,YAAY,CAAC,OAAO,gBAAgB,CAAC,CAAC"}

package/dist/components/splitter/splitter.styles.js

@@ -0,0 +1,26 @@
+import { tv } from "tailwind-variants";
+//#region src/components/splitter/splitter.styles.ts
+const splitterVariants = tv({
+	defaultVariants: { orientation: "horizontal" },
+	slots: {
+		base: "splitter",
+		handle: "splitter__handle",
+		handleGrip: "splitter__handle-grip",
+		handleTarget: "splitter__handle-target",
+		panel: "splitter__panel"
+	},
+	variants: { orientation: {
+		horizontal: {
+			base: "splitter--horizontal",
+			handle: "splitter__handle--horizontal",
+			handleGrip: "splitter__handle-grip--horizontal"
+		},
+		vertical: {
+			base: "splitter--vertical",
+			handle: "splitter__handle--vertical",
+			handleGrip: "splitter__handle-grip--vertical"
+		}
+	} }
+});
+//#endregion
+export { splitterVariants };

package/dist/components/splitter.css

@@ -0,0 +1,249 @@
+/* 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;
+  /* 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;
+
+  /* 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 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. */
+    @media (forced-colors: active) {
+      background-color: CanvasText;
+    }
+
+    transition:
+      background-color 150ms var(--ease-out),
+      inline-size 150ms var(--ease-out),
+      block-size 150ms var(--ease-out);
+  }
+
+  /* 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 {
+    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 {
+    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 {
+    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;
+  }
+
+  &[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;
+
+  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. */
+  @media (forced-colors: active) {
+    background-color: CanvasText;
+  }
+
+  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/switch.css

@@ -22,7 +22,7 @@
     }
 
     .switch__thumb {
-      @apply bg-default-foreground/20;
+      background-color: var(--switch-thumb-bg-disabled);
 
       @media (forced-colors: active) {
         background-color: GrayText;
@@ -84,16 +84,14 @@
 /* Switch control (track) */
 .switch__control {
   /* Default size (medium) */
-  @apply relative flex shrink-0 items-center overflow-hidden rounded-xl;
+  @apply relative flex shrink-0 items-center overflow-hidden;
+
+  border-radius: min(32px, var(--component-radius));
   height: 1.25rem; /* 20px on desktop (14px base), 20px on mobile (16px base) - scales with font-size */
   width: 2.5rem; /* 35px on desktop, 40px on mobile - scales with font-size */
 
   background-color: var(--switch-control-bg);
 
-  /**
-   * Transitions
-   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
-   */
   transition:
     background-color 250ms var(--ease-smooth),
     box-shadow 150ms var(--ease-out);
@@ -167,7 +165,6 @@
 
 /* Size-specific control dimensions */
 .switch--sm .switch__control {
-  @apply rounded-lg;
   height: 1rem; /* ~14px on desktop, ~16px on mobile */
   width: 2rem; /* ~32px on desktop, ~36px on mobile */
 }
@@ -184,7 +181,15 @@
 /* Switch thumb */
 .switch__thumb {
   /* Default size (medium) with margin-based positioning */
-  @apply ms-0.5 flex origin-center rounded-lg bg-white text-black shadow-field;
+  @apply ms-0.5 flex origin-center text-black shadow-field;
+
+  border-radius: min(32px, var(--component-radius));
+
+  --switch-thumb-bg: var(--white);
+  --switch-thumb-bg-selected: var(--accent-foreground);
+  --switch-thumb-bg-disabled: color-mix(in oklab, var(--default-foreground) 20%, transparent);
+
+  background-color: var(--switch-thumb-bg);
   height: 1rem; /* ~14px on desktop, ~16px on mobile */
   width: 1.375rem; /* ~19px on desktop, ~22px on mobile */
 
@@ -195,10 +200,6 @@
     color: Canvas;
   }
 
-  /**
-   * Transitions
-   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
-   */
   transition:
     margin 300ms var(--ease-out-fluid),
     background-color 200ms var(--ease-out);
@@ -207,7 +208,9 @@
   /* Selected/checked state - use margin instead of translate */
   .switch[aria-checked="true"] &,
   .switch[data-selected="true"] & {
-    @apply ms-[calc(100%-1.5rem)] bg-accent-foreground text-accent;
+    @apply ms-[calc(100%-1.5rem)] text-accent;
+
+    background-color: var(--switch-thumb-bg-selected);
     box-shadow:
       0px 0px 5px 0px rgb(0 0 0 / 0.02),
       0px 2px 10px 0px rgb(0 0 0 / 0.06),
@@ -226,7 +229,6 @@
 
 /* Size-specific thumb dimensions */
 .switch--sm .switch__thumb {
-  @apply rounded-md;
   height: 0.75rem; /* ~10.5px on desktop, ~12px on mobile */
   width: 1.03125rem; /* ~14.4px on desktop, ~16.5px on mobile - maintains 1.375:1 ratio */
 
@@ -238,7 +240,6 @@
 }
 
 .switch--lg .switch__thumb {
-  @apply rounded-xl;
   height: 1.25rem; /* ~17.5px on desktop, ~20px on mobile */
   width: 1.71875rem; /* ~24px on desktop, ~27.5px on mobile - maintains 1.375:1 ratio */