@ropav/styles 0.3.0 → 0.5.0

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,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/surface.css

@@ -12,12 +12,36 @@
 
 .surface--default {
   @apply bg-surface text-surface-foreground;
+
+  /* Forced Colors Mode flattens the fill onto the page and strips the shadow, so the container
+   * stops having any shape - its contents just sit loose on the page. An outline rather than a
+   * border so nothing shifts, and it follows the radius the component sets. */
+  @media (forced-colors: active) {
+    outline: 1px solid CanvasText;
+    outline-offset: -1px;
+  }
 }
 
 .surface--secondary {
   @apply bg-surface-secondary text-surface-secondary-foreground;
+
+  /* Forced Colors Mode flattens the fill onto the page and strips the shadow, so the container
+   * stops having any shape - its contents just sit loose on the page. An outline rather than a
+   * border so nothing shifts, and it follows the radius the component sets. */
+  @media (forced-colors: active) {
+    outline: 1px solid CanvasText;
+    outline-offset: -1px;
+  }
 }
 
 .surface--tertiary {
   @apply bg-surface-tertiary text-surface-tertiary-foreground;
+
+  /* Forced Colors Mode flattens the fill onto the page and strips the shadow, so the container
+   * stops having any shape - its contents just sit loose on the page. An outline rather than a
+   * border so nothing shifts, and it follows the radius the component sets. */
+  @media (forced-colors: active) {
+    outline: 1px solid CanvasText;
+    outline-offset: -1px;
+  }
 }

package/dist/components/switch.css

@@ -23,6 +23,10 @@
 
     .switch__thumb {
       @apply bg-default-foreground/20;
+
+      @media (forced-colors: active) {
+        background-color: GrayText;
+      }
     }
   }
 
@@ -95,6 +99,15 @@
     box-shadow 150ms var(--ease-out);
   @apply motion-reduce:transition-none;
 
+  /* Forced Colors Mode paints the track and the thumb the same `Canvas`, so the thumb vanishes
+   * inside the track and the switch stops showing its state - the position it moved to is not
+   * visible on a shape that has no visible edge. Give the track a border, then pair each track
+   * colour with the thumb colour the platform means to sit on it. */
+  @media (forced-colors: active) {
+    background-color: Canvas;
+    border: 1px solid ButtonBorder;
+  }
+
   /* Focus states */
   .switch:focus-visible &,
   .switch:has([data-slot="switch-content"][data-focus-visible="true"]) &,
@@ -121,6 +134,11 @@
   .switch[aria-checked="true"] &,
   .switch[data-selected="true"] & {
     background-color: var(--switch-control-bg-checked);
+
+    @media (forced-colors: active) {
+      background-color: Highlight;
+      border-color: Highlight;
+    }
   }
 
   /* Checked + Hover states */
@@ -170,6 +188,13 @@
   height: 1rem; /* ~14px on desktop, ~16px on mobile */
   width: 1.375rem; /* ~19px on desktop, ~22px on mobile */
 
+  /* Reads against the `Canvas` track the control falls back to; the `color` carries any icon
+   * slotted inside, which would otherwise be `CanvasText` on `CanvasText`. */
+  @media (forced-colors: active) {
+    background-color: CanvasText;
+    color: Canvas;
+  }
+
   /**
    * Transitions
    * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
@@ -187,6 +212,11 @@
       0px 0px 5px 0px rgb(0 0 0 / 0.02),
       0px 2px 10px 0px rgb(0 0 0 / 0.06),
       0px 0px 1px 0px rgb(0 0 0 / 0.3);
+
+    @media (forced-colors: active) {
+      background-color: HighlightText;
+      color: Highlight;
+    }
   }
 
   .switch:active &,

package/dist/components/table.css

@@ -25,6 +25,13 @@
 .table-root--primary {
   @apply bg-surface-secondary px-1 pb-1;
   border-radius: min(32px, calc(var(--radius) * 2.5));
+
+  /* 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. */
+  @media (forced-colors: active) {
+    outline: 1px solid CanvasText;
+    outline-offset: -1px;
+  }
 }
 
 .table-root--secondary {
@@ -198,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));
@@ -232,6 +239,7 @@
   /* Selected state */
   &[data-selected="true"] .table__cell {
     @apply bg-surface/10;
+    @apply forced-selected;
   }
 
   /* Disabled state */

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);
@@ -141,6 +141,14 @@
   &[data-selected="true"] {
     @apply text-segment-foreground;
 
+    /* Sits on top of the indicator, which forced colors paints `Highlight`. `forced-color-adjust`
+     * suppresses the `Canvas` backplate Chromium would otherwise paint behind this label - it
+     * covers the indicator, and black-on-black is exactly what it would leave. */
+    @media (forced-colors: active) {
+      forced-color-adjust: none;
+      color: HighlightText;
+    }
+
     /* Hide separator on the selected tab and the one following it */
     .tabs__separator,
     & + .tabs__tab .tabs__separator {
@@ -213,10 +221,17 @@
 
 /* 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;
 
+  /* The indicator is a background and nothing else, so Forced Colors Mode flattens it away
+   * and nothing marks the selected tab. `Highlight` behind `HighlightText` is the platform's
+   * own pairing for a selected segment. */
+  @media (forced-colors: active) {
+    background-color: Highlight;
+  }
+
   /**
    * Transitions
    * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
@@ -254,12 +269,25 @@
       /* Selected state - use text-foreground */
       &[data-selected="true"] {
         @apply text-foreground;
+
+        /* Here the indicator is a line under the tab rather than a pill behind it, so the
+         * label keeps the ordinary text colour instead of the base variant's
+         * `HighlightText`, which would be invisible against the page. */
+        @media (forced-colors: active) {
+          color: CanvasText;
+        }
       }
     }
 
     /* Tab indicator - line style */
     .tabs__indicator {
       @apply rounded-none bg-accent shadow-none;
+
+      /* `bg-accent` outranks the base rule's forced-colors fallback and is itself flattened
+       * to `Canvas`, so the underline has to be restated here or it disappears. */
+      @media (forced-colors: active) {
+        background-color: Highlight;
+      }
     }
   }
 

package/dist/components/tag.css

@@ -19,6 +19,15 @@
   /* Cursor */
   cursor: var(--cursor-interactive);
 
+  /* Forced Colors Mode flattens the fill onto the page and strips the shadow, leaving a control
+   * that reads as bare text. `ButtonBorder` is the keyword the platform uses for a control's
+   * edge; an outline rather than a border so nothing shifts, and the focus ring replaces it
+   * while focused, which is the right order of importance. */
+  @media (forced-colors: active) {
+    outline: 1px solid ButtonBorder;
+    outline-offset: -1px;
+  }
+
   /* SVG icon styling */
   & svg {
     @apply pointer-events-none size-3 shrink-0 self-center text-current;
@@ -42,6 +51,7 @@
 /* Selected state */
 .tag:is([data-selected="true"], [aria-selected="true"]) {
   @apply bg-accent-soft text-accent-soft-foreground;
+  @apply forced-selected;
 
   /* Selected + Hover state */
   @media (hover: hover) {

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,12 +1,22 @@
 /* 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;
 
   border-width: var(--border-width-field);
   border-color: var(--field-border);
 
+  /* Forced Colors Mode flattens the fill onto the page and strips the shadow, leaving a field that
+   * reads as bare text - `--border-width-field` is 0, so the declared border brings nothing
+   * back on its own. `ButtonBorder` is the keyword the platform uses for a control's
+   * edge; an outline rather than a border so nothing shifts, and the focus ring replaces it
+   * while focused, which is the right order of importance. */
+  @media (forced-colors: active) {
+    outline: 1px solid ButtonBorder;
+    outline-offset: -1px;
+  }
+
   /**
    * Transitions
    * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
@@ -92,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,