sherick-ui 2.2.0 → 2.4.0

package/dist/theme.css

@@ -11,9 +11,17 @@
   --sui-ink: 0.245 0.018 260;
   --sui-ink-muted: 0.480 0.018 260;
   --sui-detail: 0.600 0.016 258;
+  --sui-rim: 0.630 0.016 258;
   --sui-primary: 0.422 0.139 255;
   --sui-primary-strong: 0.402 0.143 257;
-  --sui-primary-soft: 0.91 0.035 255;
+  --sui-primary-soft: 0.920 0.035 255;
+  --sui-primary-selected: 0.860 0.055 255;
+  --sui-danger-soft: 0.930 0.030 18;
+  --sui-danger-selected: 0.870 0.050 18;
+  --sui-warning-soft: 0.940 0.045 85;
+  --sui-warning-selected: 0.885 0.070 82;
+  --sui-success-soft: 0.935 0.037 155;
+  --sui-success-selected: 0.875 0.055 155;
   --sui-accent: 0.62 0.10 215;
   --sui-danger: 0.439 0.170 25;
   --sui-warning: 0.388 0.082 75;
@@ -29,12 +37,12 @@
   --sui-light-top: 1 0 0;
   --sui-light-bottom: 0.32 0.02 256;
   --sui-elevation-flat: none;
-  --sui-elevation-raised: 0 1px 2px oklch(var(--sui-light-bottom) / 0.16), 0 4px 13px oklch(var(--sui-light-bottom) / 0.09);
+  --sui-elevation-raised: 0 1px 2px oklch(var(--sui-light-bottom) / 0.16), 0 2px 6px oklch(var(--sui-light-bottom) / 0.07);
   --sui-elevation-floating: 0 16px 40px oklch(var(--sui-light-bottom) / 0.20), inset 0 1px 0 oklch(var(--sui-light-top) / 0.70);
   --sui-elevation-control: 0 1px 2px oklch(var(--sui-light-bottom) / 0.19), inset 0 1px 0 oklch(var(--sui-light-top) / 0.55);
   --sui-elevation-recessed: inset 0 1px 3px oklch(var(--sui-light-bottom) / 0.22), inset 0 -1px 0 oklch(var(--sui-light-top) / 0.50);
   --sui-elevation-recessed-top: inset 0 5px 8px -5px oklch(var(--sui-light-bottom) / 0.21);
-  --sui-elevation-well: inset 0 3px 4px oklch(var(--sui-light-bottom) / 0.62), inset 0 -1px 0 oklch(var(--sui-light-top) / 0.50);
+  --sui-elevation-well: inset 0 2px 4px oklch(var(--sui-light-bottom) / 0.40), inset 0 -1px 0 oklch(var(--sui-light-top) / 0.50);
   --sui-glass-fill: 0.98;
   --sui-glass-blur: 28px;
   --sui-glass-saturation: 1.06;
@@ -71,9 +79,17 @@
   --sui-ink: 0.94 0.008 255;
   --sui-ink-muted: 0.76 0.014 255;
   --sui-detail: 0.600 0.014 256;
+  --sui-rim: 0.555 0.014 256;
   --sui-primary: 0.809 0.098 255;
   --sui-primary-strong: 0.734 0.139 257;
-  --sui-primary-soft: 0.42 0.055 257;
+  --sui-primary-soft: 0.325 0.050 257;
+  --sui-primary-selected: 0.400 0.075 257;
+  --sui-danger-soft: 0.315 0.050 22;
+  --sui-danger-selected: 0.395 0.070 22;
+  --sui-warning-soft: 0.320 0.045 78;
+  --sui-warning-selected: 0.400 0.065 78;
+  --sui-success-soft: 0.315 0.045 160;
+  --sui-success-selected: 0.395 0.065 160;
   --sui-accent: 0.80 0.08 215;
   --sui-danger: 0.799 0.115 25;
   --sui-warning: 0.82 0.12 80;
@@ -94,7 +110,7 @@
   --sui-elevation-control: 0 1px 2px oklch(var(--sui-light-bottom) / 0.30), inset 0 1px 0 oklch(var(--sui-light-top) / 0.08);
   --sui-elevation-recessed: inset 0 1px 3px oklch(var(--sui-light-bottom) / 0.38), inset 0 -1px 0 oklch(var(--sui-light-top) / 0.06);
   --sui-elevation-recessed-top: inset 0 5px 8px -5px oklch(var(--sui-light-bottom) / 0.36);
-  --sui-elevation-well: inset 0 1px 3px oklch(var(--sui-light-bottom) / 0.38), inset 0 -2px 3px oklch(var(--sui-light-top) / 0.40);
+  --sui-elevation-well: inset 0 2px 4px oklch(var(--sui-light-bottom) / 0.60), inset 0 -1px 0 oklch(var(--sui-light-top) / 0.06);
   --sui-glass-fill: 0.98;
   --sui-glass-blur: 32px;
   --sui-glass-saturation: 1.10;
@@ -132,9 +148,17 @@
   --sui-ink: 0.94 0.008 255;
   --sui-ink-muted: 0.76 0.014 255;
   --sui-detail: 0.600 0.014 256;
+  --sui-rim: 0.555 0.014 256;
   --sui-primary: 0.809 0.098 255;
   --sui-primary-strong: 0.734 0.139 257;
-  --sui-primary-soft: 0.42 0.055 257;
+  --sui-primary-soft: 0.325 0.050 257;
+  --sui-primary-selected: 0.400 0.075 257;
+  --sui-danger-soft: 0.315 0.050 22;
+  --sui-danger-selected: 0.395 0.070 22;
+  --sui-warning-soft: 0.320 0.045 78;
+  --sui-warning-selected: 0.400 0.065 78;
+  --sui-success-soft: 0.315 0.045 160;
+  --sui-success-selected: 0.395 0.065 160;
   --sui-accent: 0.80 0.08 215;
   --sui-danger: 0.799 0.115 25;
   --sui-warning: 0.82 0.12 80;
@@ -155,7 +179,7 @@
   --sui-elevation-control: 0 1px 2px oklch(var(--sui-light-bottom) / 0.30), inset 0 1px 0 oklch(var(--sui-light-top) / 0.08);
   --sui-elevation-recessed: inset 0 1px 3px oklch(var(--sui-light-bottom) / 0.38), inset 0 -1px 0 oklch(var(--sui-light-top) / 0.06);
   --sui-elevation-recessed-top: inset 0 5px 8px -5px oklch(var(--sui-light-bottom) / 0.36);
-  --sui-elevation-well: inset 0 1px 3px oklch(var(--sui-light-bottom) / 0.38), inset 0 -2px 3px oklch(var(--sui-light-top) / 0.40);
+  --sui-elevation-well: inset 0 2px 4px oklch(var(--sui-light-bottom) / 0.60), inset 0 -1px 0 oklch(var(--sui-light-top) / 0.06);
   --sui-glass-fill: 0.98;
   --sui-glass-blur: 32px;
   --sui-glass-saturation: 1.10;
@@ -184,11 +208,20 @@
   }
 
   :root {
+  --sui-font-mono: ui-monospace, "SF Mono", SFMono-Regular, "Cascadia Code", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace;
+  --sui-rim-dashed: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100%25' height='100%25' rx='16' fill='none' stroke='%23000' stroke-width='3' stroke-dasharray='7' stroke-linecap='round'/%3E%3C/svg%3E");
   --sui-duration-press: 150ms;
   --sui-duration-release: 200ms;
+  --sui-duration-tactile: 80ms;
   --sui-duration-overlay: 240ms;
   --sui-duration-overlay-exit: 160ms;
+  --sui-duration-travel: 300ms;
+  --sui-duration-sheet: 320ms;
+  --sui-duration-sheet-exit: 200ms;
   --sui-duration-activity: 1400ms;
+  --sui-duration-spin: 1000ms;
+  --sui-duration-pulse: 2000ms;
+  --sui-ease-pulse: cubic-bezier(0.4, 0, 0.6, 1);
   --sui-ease-press: cubic-bezier(0.4, 0, 0.2, 1);
   --sui-ease-release: cubic-bezier(0.16, 1, 0.3, 1);
   --sui-ease-exit: cubic-bezier(0.4, 0, 1, 1);

package/dist/types/dev.d.cts

@@ -17,13 +17,13 @@ declare const elevation: {
 };
 declare const recessedTop = "shadow-sherick-recessed-top";
 declare const shape: {
-    readonly control: "rounded-[1.25rem]";
-    readonly mark: "rounded-[0.625rem]";
-    readonly row: "rounded-[0.875rem]";
-    readonly prominent: "rounded-[1.5rem]";
-    readonly surface: "rounded-[1.75rem]";
-    readonly sheet: "rounded-[1.25rem]";
-    readonly expressive: "rounded-[2rem]";
+    readonly control: "rounded-[1rem]";
+    readonly mark: "rounded-[0.375rem]";
+    readonly row: "rounded-[0.75rem]";
+    readonly prominent: "rounded-[1.25rem]";
+    readonly surface: "rounded-[1.5rem]";
+    readonly sheet: "rounded-[1rem]";
+    readonly expressive: "rounded-[1.75rem]";
     readonly pill: "rounded-full";
     readonly circle: "rounded-full";
 };
@@ -32,6 +32,13 @@ declare const edgeTone: {
     readonly header: "border-sherick-edge/[0.10]";
     readonly rule: "border-sherick-edge/[0.075]";
 };
+declare const rim: {
+    readonly field: "border-[1.5px] border-sherick-rim";
+    readonly fieldError: "border-[1.5px] border-sherick-danger";
+    readonly dashed: string;
+    readonly dashedHover: "hover:after:bg-sherick-ink-muted";
+    readonly dashedDragging: "data-[dragging]:after:bg-sherick-primary";
+};
 declare const edge: {
     readonly row: string;
     readonly header: string;
@@ -49,25 +56,27 @@ declare const state: {
     readonly text: "cursor-text";
     readonly rowHover: "hover:bg-sherick-ink/[0.05]";
     readonly field: {
-        readonly hover: "hover:bg-sherick-surface-high/[0.82]";
-        readonly focus: "focus:bg-sherick-surface-high/[0.9]";
-        readonly focusWithin: "[&&]:focus-within:bg-sherick-surface-high/[0.9]";
-        readonly engaged: "bg-sherick-surface-high/[0.9]";
-        readonly errorHover: "hover:bg-sherick-danger/[0.10]";
-        readonly errorFocus: "focus:bg-sherick-danger/[0.13]";
-        readonly errorEngaged: "bg-sherick-danger/[0.13]";
-        readonly invalid: "data-[invalid]:bg-sherick-danger/[0.075]";
-        readonly invalidHover: "data-[invalid]:hover:bg-sherick-danger/[0.10]";
-        readonly invalidEngaged: "data-[invalid]:bg-sherick-danger/[0.13]";
-        readonly invalidFocusWithin: "[&&]:data-[invalid]:focus-within:bg-sherick-danger/[0.13]";
+        readonly hover: "hover:bg-sherick-canvas/[0.85] hover:border-sherick-ink-muted";
+        readonly focus: "focus:bg-sherick-canvas focus:border-sherick-ink-muted";
+        readonly focusWithin: "[&&]:focus-within:bg-sherick-canvas [&&]:focus-within:border-sherick-ink-muted";
+        readonly engaged: "bg-sherick-canvas border-sherick-ink-muted";
+        readonly errorHover: "hover:bg-sherick-canvas/[0.85]";
+        readonly errorFocus: "focus:bg-sherick-canvas";
+        readonly errorEngaged: "bg-sherick-canvas";
+        readonly invalid: "data-[invalid]:border-sherick-danger";
+        readonly invalidHover: "data-[invalid]:hover:border-sherick-danger";
+        readonly invalidEngaged: "data-[invalid]:border-sherick-danger";
+        readonly invalidFocusWithin: "[&&]:data-[invalid]:focus-within:border-sherick-danger";
     };
 };
 declare const stateLayerQuietComposite: string;
 declare const stateLayer: {
     readonly quiet: string;
     readonly tonal: string;
+    readonly tonalNeutral: string;
     readonly filled: string;
     readonly track: string;
+    readonly mark: string;
     readonly activeRow: "data-[highlighted]:before:opacity-[0.05]";
 };
 declare const hitArea = "relative after:pointer-events-auto after:absolute after:inset-[min(0px,calc((100%-2.75rem)/2))] after:content-['']";
@@ -76,8 +85,8 @@ declare const material: {
     readonly matteQuiet: "bg-sherick-surface/[0.42] text-sherick-ink";
     readonly matte: "bg-sherick-surface/[0.78] text-sherick-ink";
     readonly matteHigh: "bg-sherick-surface-high/[0.72] text-sherick-ink";
-    readonly control: "bg-sherick-surface-high/[0.66] text-sherick-ink placeholder:text-sherick-ink-muted";
-    readonly controlError: "bg-sherick-danger/[0.075] text-sherick-ink placeholder:text-sherick-danger";
+    readonly control: "bg-sherick-canvas/[0.7] text-sherick-ink placeholder:text-sherick-ink-muted";
+    readonly controlError: "bg-sherick-canvas/[0.7] text-sherick-ink placeholder:text-sherick-danger";
     readonly handle: "bg-sherick-ink-muted text-sherick-canvas";
     readonly acrylic: "bg-sherick-surface-float/[var(--sui-glass-fill)] bg-[image:var(--sui-glass-gradient)] text-sherick-ink backdrop-blur-[var(--sui-glass-blur)] backdrop-saturate-[var(--sui-glass-saturation)] backdrop-brightness-[var(--sui-glass-brightness)]";
     readonly acrylicDense: "bg-sherick-surface-float/[var(--sui-glass-dense-fill)] bg-[image:var(--sui-glass-gradient-dense)] text-sherick-ink backdrop-blur-[var(--sui-glass-dense-blur)] backdrop-saturate-[var(--sui-glass-dense-saturation)] backdrop-brightness-[var(--sui-glass-dense-brightness)]";
@@ -85,13 +94,31 @@ declare const material: {
 };
 declare const mediaCanvas = "bg-sherick-media";
 declare const matteInset = "bg-sherick-surface-high/[0.35] text-sherick-ink";
+declare const type: {
+    readonly control: {
+        readonly compact: "text-sm";
+        readonly normal: "text-[0.9375rem] leading-[1.375rem]";
+        readonly prominent: "text-lg";
+    };
+    readonly supporting: "text-[0.8125rem] leading-5";
+    readonly caption: "text-xs leading-4";
+    readonly title: "text-[0.9375rem] leading-[1.375rem] font-semibold";
+    readonly heading: "text-xl leading-7 font-semibold tracking-[-0.02em]";
+    readonly numeric: "tabular-nums";
+};
 declare const density: {
-    readonly compact: "min-h-10 text-sm";
-    readonly normal: "min-h-12 text-[0.95rem]";
-    readonly prominent: "min-h-14 text-lg";
+    readonly compact: string;
+    readonly normal: string;
+    readonly prominent: string;
     readonly target: "min-h-11 min-w-11";
     readonly part: "min-h-11 min-w-9";
 };
+declare const iconSlot: {
+    readonly caption: "inline-flex size-3.5 shrink-0 items-center justify-center [&>svg]:size-3.5";
+    readonly compact: "inline-flex size-4 shrink-0 items-center justify-center [&>svg]:size-4";
+    readonly normal: "inline-flex size-5 shrink-0 items-center justify-center [&>svg]:size-5";
+    readonly prominent: "inline-flex size-6 shrink-0 items-center justify-center [&>svg]:size-6";
+};
 declare const stacking: {
     readonly float: "z-50";
     readonly notification: "z-[60]";
@@ -168,14 +195,16 @@ declare const tone: {
         success: string;
     };
 };
-declare const selectableRowSurface = "has-[[data-checked]]:bg-sherick-primary/[0.22] has-[[data-checked]]:text-sherick-ink has-[[data-checked]]:shadow-sherick-control";
+declare const currentDestination = "bg-sherick-primary-soft text-sherick-ink font-medium";
+declare const selectableRowSurface = "has-[[data-checked]]:bg-sherick-primary-selected has-[[data-checked]]:text-sherick-ink has-[[data-checked]]:shadow-sherick-control";
 declare const selectable: {
     readonly surface: string;
     readonly markSurface: string;
     readonly rest: string;
     readonly mark: string;
-    readonly selected: "group-data-[checked]:bg-sherick-primary-strong group-data-[checked]:text-sherick-on-primary";
-    readonly indeterminate: "group-data-[indeterminate]:bg-sherick-primary-strong group-data-[indeterminate]:text-sherick-on-primary";
+    readonly selected: "group-data-[checked]:bg-sherick-primary-strong group-data-[checked]:text-sherick-on-primary group-data-[checked]:shadow-sherick-flat group-data-[checked]:after:opacity-0";
+    readonly indeterminate: "group-data-[indeterminate]:bg-sherick-primary-strong group-data-[indeterminate]:text-sherick-on-primary group-data-[indeterminate]:shadow-sherick-flat group-data-[indeterminate]:after:opacity-0";
+    readonly thumb: "bg-current";
 };
 declare const recipeAlphas: {
     readonly state: {
@@ -187,53 +216,45 @@ declare const recipeAlphas: {
             readonly hover: number;
             readonly press: number;
         };
+        readonly tonalNeutral: {
+            readonly hover: number;
+            readonly press: number;
+        };
         readonly filled: {
             readonly hover: number;
             readonly press: number;
         };
+        readonly mark: {
+            readonly hover: number;
+        };
     };
     readonly tint: {
-        readonly soft: {
-            readonly primary: number;
-            readonly danger: number;
-            readonly warning: number;
-            readonly success: number;
-        };
-        readonly selected: {
-            readonly primary: number;
-            readonly danger: number;
-            readonly warning: number;
-            readonly success: number;
-        };
+        readonly neutralSoft: number;
         readonly neutralRest: number;
     };
     readonly field: {
         readonly quiet: number;
         readonly card: number;
+        readonly groove: number;
         readonly control: number;
         readonly hover: number;
         readonly engaged: number;
-        readonly invalid: number;
-        readonly invalidHover: number;
-        readonly invalidFocus: number;
     };
 };
 declare const fieldLayout = "flex min-w-0 w-full flex-col [overflow-wrap:anywhere]";
+declare const fieldMessage: {
+    readonly description: string;
+    readonly error: string;
+};
 
 type MotionIntent = "feedback" | "tactile" | "arrive" | "orient" | "relocate" | "direct" | "disclose" | "presence" | "activity";
 /** Non-spatial feedback: hover, focus, field tone, a highlighted row, a filled surface.
  *  It never translates, scales or resizes; reduced motion simply drops the interpolation
  *  and the state still arrives. */
-declare const motionFeedback = "transition-[background-color,color,box-shadow,opacity] duration-press ease-press motion-reduce:transition-none";
-/** A control answers a press immediately and settles on its release.
- *
- *  The recipe owns the *amplitude* of that answer as well as its timing, because how far a
- *  press travels is the system's physical character rather than a component's anatomy: a
- *  control whose outline is what the user sees compresses 4%, which is about two pixels at the
- *  size of the ink it moves. A control whose visible ink is far smaller than the target it is
- *  aimed at takes `motionInkPress` on that ink instead, so the target itself never moves. The
- *  interpolation and the compression are neutralised together under reduced motion. */
-declare const motionTactile = "transition-[background-color,color,box-shadow,transform,opacity] duration-release ease-release active:duration-press active:ease-press motion-safe:[&:not([data-disabled],:disabled,:has(>[role=combobox][data-disabled]))]:active:scale-[0.96] motion-reduce:transition-none";
+declare const motionFeedback = "transition-[background-color,border-color,color,box-shadow,opacity] duration-press ease-press motion-reduce:transition-none";
+declare const motionTactile: string;
+declare const motionTactileWide: string;
+declare const motionTactileField: string;
 /** The spatial half of a compact press, applied to the *mark* rather than to the control.
  *
  *  A control whose visible ink is much smaller than the target it is aimed at — a dialog's close
@@ -243,7 +264,7 @@ declare const motionTactile = "transition-[background-color,color,box-shadow,tra
  *  release lands), so the mark takes the twelve percent and the target keeps its geometry. The
  *  target still owns the focus ring and the state layer, and still carries the tone and depth
  *  response, so the boundary a press happens inside never moves. */
-declare const motionInkPress = "transition-transform duration-release ease-release group-active:duration-press group-active:ease-press group-active:scale-[0.88] motion-reduce:transition-none motion-reduce:group-active:scale-100";
+declare const motionInkPress = "transition-transform duration-release ease-release group-active:duration-tactile group-active:ease-press group-active:scale-[0.88] motion-reduce:transition-none motion-reduce:group-active:scale-100";
 /** A meaningful subordinate part arrives. Spring is reserved for this intent: a mark is
  *  made by overshooting the position it lands in. It leaves without the overshoot, and
  *  reduced motion lands it in one step — which takes a *state-specific* override, because the
@@ -260,6 +281,9 @@ declare const motionOrient = "transition-transform duration-release ease-release
  *  settle together, and an interrupted move retargets from wherever it currently is
  *  because it is a transition and not a keyframe. */
 declare const motionRelocate = "transition-[left,inset-inline-start,top,width,height,transform,background-color,color,box-shadow,opacity] duration-release ease-glide motion-reduce:transition-none";
+/** The same travel across a whole track — a tab indicator — on the longer travel timing, so a
+ *  movement of hundreds of pixels is followed rather than skipped. */
+declare const motionRelocateLong = "transition-[left,inset-inline-start,top,width,height,transform,background-color,color,box-shadow,opacity] duration-travel ease-glide motion-reduce:transition-none";
 /** Direct manipulation: the pointer owns the geometry, so a positional transition would be
  *  lag. While the primitive reports a drag, position and size are removed from the
  *  transition list and only tone and engagement geometry remain; a keyboard or programmatic
@@ -284,7 +308,7 @@ declare const motionPresenceTooltip: string;
 declare const motionPresenceModal: string;
 /** The plane behind a surface that owns the viewport. Opacity only: a blur or a filter is
  *  never animated, so the plane can never animate the page behind it. */
-declare const motionPresenceScrim = "transition-opacity duration-overlay ease-release data-[ending-style]:duration-overlay-exit data-[ending-style]:ease-exit";
+declare const motionPresenceScrim = "transition-opacity duration-overlay ease-release data-[starting-style]:opacity-0 data-[ending-style]:opacity-0 data-[ending-style]:duration-overlay-exit data-[ending-style]:ease-exit";
 /** Continuous activity is a distinct intent, not an exception to interaction motion: it
  *  reports work rather than answering an event, and it has no entrance of its own. */
 declare const motionActivitySpin = "animate-spin motion-reduce:animate-none";
@@ -299,8 +323,16 @@ declare const motionActivityPulse = "animate-pulse motion-reduce:animate-none";
 declare const motionActivityIndeterminate = "animate-sherick-indeterminate [[dir=rtl]_&]:[--sui-indeterminate-direction:-1] motion-reduce:animate-none";
 /** The state layer is a composited overlay, so its own opacity is the only thing that
  *  moves. Shared here because four interaction states across the library ride it. */
-declare const motionStateLayer = "before:transition-opacity before:duration-release before:ease-release active:before:duration-press active:before:ease-press group-active:before:duration-press group-active:before:ease-press motion-reduce:before:transition-none";
-declare const motionDisclose = "transition-[height] duration-release ease-release data-[starting-style]:h-0 data-[ending-style]:h-0 motion-reduce:transition-none";
+/** A row in a collection moves its highlight rather than fading it: a highlight is where the reader
+ *  is, and arrowing through a list with a soft fade on every row leaves a smear of half-lit rows.
+ *  The row's layer therefore changes in one step, for the pointer and the keyboard alike. */
+declare const motionRowLayer = "before:transition-none";
+/** A rim drawn as an overlay of its own — an empty selection mark's lip, a drop target's dashes —
+ *  carries its own feedback timing: it steps up on hover and fades as a selection fill arrives,
+ *  on the same press curve as the surface beneath it. */
+declare const motionRim = "after:transition-[background-color,border-color,opacity] after:duration-press after:ease-press motion-reduce:after:transition-none";
+declare const motionStateLayer = "before:transition-opacity before:duration-release before:ease-release active:before:duration-tactile active:before:ease-press group-active:before:duration-tactile group-active:before:ease-press motion-reduce:before:transition-none";
+declare const motionDisclose = "transition-[height] duration-release ease-release data-[starting-style]:h-0 data-[ending-style]:h-0 data-[ending-style]:duration-overlay-exit data-[ending-style]:ease-exit motion-reduce:transition-none";
 declare const motionPresenceSheet: string;
 declare const motionPresenceToast: string;
 
@@ -311,5 +343,5 @@ declare const motionPresenceToast: string;
  */
 declare const cn: (...inputs: ClassValue[]) => string;
 
-export { cn, density, detail, disclosure, edge, edgeTone, elevation, fieldLayout, focusRing, focusRingDrag, focusRingHeld, focusRingInset, focusRingWithin, groupFocusRing, hitArea, list, material, matteInset, mediaCanvas, motionActivityIndeterminate, motionActivityPulse, motionActivitySpin, motionArrive, motionDirect, motionDisclose, motionFeedback, motionInkPress, motionOrient, motionPresenceAnchored, motionPresenceModal, motionPresenceScrim, motionPresenceSheet, motionPresenceToast, motionPresenceTooltip, motionRelocate, motionStateLayer, motionTactile, overlay, parentFocusRingInset, recessedTop, recipeAlphas, selectable, selectableRowSurface, shape, stacking, state, stateLayer, stateLayerQuietComposite, text, tone };
+export { cn, currentDestination, density, detail, disclosure, edge, edgeTone, elevation, fieldLayout, fieldMessage, focusRing, focusRingDrag, focusRingHeld, focusRingInset, focusRingWithin, groupFocusRing, hitArea, iconSlot, list, material, matteInset, mediaCanvas, motionActivityIndeterminate, motionActivityPulse, motionActivitySpin, motionArrive, motionDirect, motionDisclose, motionFeedback, motionInkPress, motionOrient, motionPresenceAnchored, motionPresenceModal, motionPresenceScrim, motionPresenceSheet, motionPresenceToast, motionPresenceTooltip, motionRelocate, motionRelocateLong, motionRim, motionRowLayer, motionStateLayer, motionTactile, motionTactileField, motionTactileWide, overlay, parentFocusRingInset, recessedTop, recipeAlphas, rim, selectable, selectableRowSurface, shape, stacking, state, stateLayer, stateLayerQuietComposite, text, tone, type };
 export type { MotionIntent };

package/dist/types/dev.d.ts

@@ -17,13 +17,13 @@ declare const elevation: {
 };
 declare const recessedTop = "shadow-sherick-recessed-top";
 declare const shape: {
-    readonly control: "rounded-[1.25rem]";
-    readonly mark: "rounded-[0.625rem]";
-    readonly row: "rounded-[0.875rem]";
-    readonly prominent: "rounded-[1.5rem]";
-    readonly surface: "rounded-[1.75rem]";
-    readonly sheet: "rounded-[1.25rem]";
-    readonly expressive: "rounded-[2rem]";
+    readonly control: "rounded-[1rem]";
+    readonly mark: "rounded-[0.375rem]";
+    readonly row: "rounded-[0.75rem]";
+    readonly prominent: "rounded-[1.25rem]";
+    readonly surface: "rounded-[1.5rem]";
+    readonly sheet: "rounded-[1rem]";
+    readonly expressive: "rounded-[1.75rem]";
     readonly pill: "rounded-full";
     readonly circle: "rounded-full";
 };
@@ -32,6 +32,13 @@ declare const edgeTone: {
     readonly header: "border-sherick-edge/[0.10]";
     readonly rule: "border-sherick-edge/[0.075]";
 };
+declare const rim: {
+    readonly field: "border-[1.5px] border-sherick-rim";
+    readonly fieldError: "border-[1.5px] border-sherick-danger";
+    readonly dashed: string;
+    readonly dashedHover: "hover:after:bg-sherick-ink-muted";
+    readonly dashedDragging: "data-[dragging]:after:bg-sherick-primary";
+};
 declare const edge: {
     readonly row: string;
     readonly header: string;
@@ -49,25 +56,27 @@ declare const state: {
     readonly text: "cursor-text";
     readonly rowHover: "hover:bg-sherick-ink/[0.05]";
     readonly field: {
-        readonly hover: "hover:bg-sherick-surface-high/[0.82]";
-        readonly focus: "focus:bg-sherick-surface-high/[0.9]";
-        readonly focusWithin: "[&&]:focus-within:bg-sherick-surface-high/[0.9]";
-        readonly engaged: "bg-sherick-surface-high/[0.9]";
-        readonly errorHover: "hover:bg-sherick-danger/[0.10]";
-        readonly errorFocus: "focus:bg-sherick-danger/[0.13]";
-        readonly errorEngaged: "bg-sherick-danger/[0.13]";
-        readonly invalid: "data-[invalid]:bg-sherick-danger/[0.075]";
-        readonly invalidHover: "data-[invalid]:hover:bg-sherick-danger/[0.10]";
-        readonly invalidEngaged: "data-[invalid]:bg-sherick-danger/[0.13]";
-        readonly invalidFocusWithin: "[&&]:data-[invalid]:focus-within:bg-sherick-danger/[0.13]";
+        readonly hover: "hover:bg-sherick-canvas/[0.85] hover:border-sherick-ink-muted";
+        readonly focus: "focus:bg-sherick-canvas focus:border-sherick-ink-muted";
+        readonly focusWithin: "[&&]:focus-within:bg-sherick-canvas [&&]:focus-within:border-sherick-ink-muted";
+        readonly engaged: "bg-sherick-canvas border-sherick-ink-muted";
+        readonly errorHover: "hover:bg-sherick-canvas/[0.85]";
+        readonly errorFocus: "focus:bg-sherick-canvas";
+        readonly errorEngaged: "bg-sherick-canvas";
+        readonly invalid: "data-[invalid]:border-sherick-danger";
+        readonly invalidHover: "data-[invalid]:hover:border-sherick-danger";
+        readonly invalidEngaged: "data-[invalid]:border-sherick-danger";
+        readonly invalidFocusWithin: "[&&]:data-[invalid]:focus-within:border-sherick-danger";
     };
 };
 declare const stateLayerQuietComposite: string;
 declare const stateLayer: {
     readonly quiet: string;
     readonly tonal: string;
+    readonly tonalNeutral: string;
     readonly filled: string;
     readonly track: string;
+    readonly mark: string;
     readonly activeRow: "data-[highlighted]:before:opacity-[0.05]";
 };
 declare const hitArea = "relative after:pointer-events-auto after:absolute after:inset-[min(0px,calc((100%-2.75rem)/2))] after:content-['']";
@@ -76,8 +85,8 @@ declare const material: {
     readonly matteQuiet: "bg-sherick-surface/[0.42] text-sherick-ink";
     readonly matte: "bg-sherick-surface/[0.78] text-sherick-ink";
     readonly matteHigh: "bg-sherick-surface-high/[0.72] text-sherick-ink";
-    readonly control: "bg-sherick-surface-high/[0.66] text-sherick-ink placeholder:text-sherick-ink-muted";
-    readonly controlError: "bg-sherick-danger/[0.075] text-sherick-ink placeholder:text-sherick-danger";
+    readonly control: "bg-sherick-canvas/[0.7] text-sherick-ink placeholder:text-sherick-ink-muted";
+    readonly controlError: "bg-sherick-canvas/[0.7] text-sherick-ink placeholder:text-sherick-danger";
     readonly handle: "bg-sherick-ink-muted text-sherick-canvas";
     readonly acrylic: "bg-sherick-surface-float/[var(--sui-glass-fill)] bg-[image:var(--sui-glass-gradient)] text-sherick-ink backdrop-blur-[var(--sui-glass-blur)] backdrop-saturate-[var(--sui-glass-saturation)] backdrop-brightness-[var(--sui-glass-brightness)]";
     readonly acrylicDense: "bg-sherick-surface-float/[var(--sui-glass-dense-fill)] bg-[image:var(--sui-glass-gradient-dense)] text-sherick-ink backdrop-blur-[var(--sui-glass-dense-blur)] backdrop-saturate-[var(--sui-glass-dense-saturation)] backdrop-brightness-[var(--sui-glass-dense-brightness)]";
@@ -85,13 +94,31 @@ declare const material: {
 };
 declare const mediaCanvas = "bg-sherick-media";
 declare const matteInset = "bg-sherick-surface-high/[0.35] text-sherick-ink";
+declare const type: {
+    readonly control: {
+        readonly compact: "text-sm";
+        readonly normal: "text-[0.9375rem] leading-[1.375rem]";
+        readonly prominent: "text-lg";
+    };
+    readonly supporting: "text-[0.8125rem] leading-5";
+    readonly caption: "text-xs leading-4";
+    readonly title: "text-[0.9375rem] leading-[1.375rem] font-semibold";
+    readonly heading: "text-xl leading-7 font-semibold tracking-[-0.02em]";
+    readonly numeric: "tabular-nums";
+};
 declare const density: {
-    readonly compact: "min-h-10 text-sm";
-    readonly normal: "min-h-12 text-[0.95rem]";
-    readonly prominent: "min-h-14 text-lg";
+    readonly compact: string;
+    readonly normal: string;
+    readonly prominent: string;
     readonly target: "min-h-11 min-w-11";
     readonly part: "min-h-11 min-w-9";
 };
+declare const iconSlot: {
+    readonly caption: "inline-flex size-3.5 shrink-0 items-center justify-center [&>svg]:size-3.5";
+    readonly compact: "inline-flex size-4 shrink-0 items-center justify-center [&>svg]:size-4";
+    readonly normal: "inline-flex size-5 shrink-0 items-center justify-center [&>svg]:size-5";
+    readonly prominent: "inline-flex size-6 shrink-0 items-center justify-center [&>svg]:size-6";
+};
 declare const stacking: {
     readonly float: "z-50";
     readonly notification: "z-[60]";
@@ -168,14 +195,16 @@ declare const tone: {
         success: string;
     };
 };
-declare const selectableRowSurface = "has-[[data-checked]]:bg-sherick-primary/[0.22] has-[[data-checked]]:text-sherick-ink has-[[data-checked]]:shadow-sherick-control";
+declare const currentDestination = "bg-sherick-primary-soft text-sherick-ink font-medium";
+declare const selectableRowSurface = "has-[[data-checked]]:bg-sherick-primary-selected has-[[data-checked]]:text-sherick-ink has-[[data-checked]]:shadow-sherick-control";
 declare const selectable: {
     readonly surface: string;
     readonly markSurface: string;
     readonly rest: string;
     readonly mark: string;
-    readonly selected: "group-data-[checked]:bg-sherick-primary-strong group-data-[checked]:text-sherick-on-primary";
-    readonly indeterminate: "group-data-[indeterminate]:bg-sherick-primary-strong group-data-[indeterminate]:text-sherick-on-primary";
+    readonly selected: "group-data-[checked]:bg-sherick-primary-strong group-data-[checked]:text-sherick-on-primary group-data-[checked]:shadow-sherick-flat group-data-[checked]:after:opacity-0";
+    readonly indeterminate: "group-data-[indeterminate]:bg-sherick-primary-strong group-data-[indeterminate]:text-sherick-on-primary group-data-[indeterminate]:shadow-sherick-flat group-data-[indeterminate]:after:opacity-0";
+    readonly thumb: "bg-current";
 };
 declare const recipeAlphas: {
     readonly state: {
@@ -187,53 +216,45 @@ declare const recipeAlphas: {
             readonly hover: number;
             readonly press: number;
         };
+        readonly tonalNeutral: {
+            readonly hover: number;
+            readonly press: number;
+        };
         readonly filled: {
             readonly hover: number;
             readonly press: number;
         };
+        readonly mark: {
+            readonly hover: number;
+        };
     };
     readonly tint: {
-        readonly soft: {
-            readonly primary: number;
-            readonly danger: number;
-            readonly warning: number;
-            readonly success: number;
-        };
-        readonly selected: {
-            readonly primary: number;
-            readonly danger: number;
-            readonly warning: number;
-            readonly success: number;
-        };
+        readonly neutralSoft: number;
         readonly neutralRest: number;
     };
     readonly field: {
         readonly quiet: number;
         readonly card: number;
+        readonly groove: number;
         readonly control: number;
         readonly hover: number;
         readonly engaged: number;
-        readonly invalid: number;
-        readonly invalidHover: number;
-        readonly invalidFocus: number;
     };
 };
 declare const fieldLayout = "flex min-w-0 w-full flex-col [overflow-wrap:anywhere]";
+declare const fieldMessage: {
+    readonly description: string;
+    readonly error: string;
+};
 
 type MotionIntent = "feedback" | "tactile" | "arrive" | "orient" | "relocate" | "direct" | "disclose" | "presence" | "activity";
 /** Non-spatial feedback: hover, focus, field tone, a highlighted row, a filled surface.
  *  It never translates, scales or resizes; reduced motion simply drops the interpolation
  *  and the state still arrives. */
-declare const motionFeedback = "transition-[background-color,color,box-shadow,opacity] duration-press ease-press motion-reduce:transition-none";
-/** A control answers a press immediately and settles on its release.
- *
- *  The recipe owns the *amplitude* of that answer as well as its timing, because how far a
- *  press travels is the system's physical character rather than a component's anatomy: a
- *  control whose outline is what the user sees compresses 4%, which is about two pixels at the
- *  size of the ink it moves. A control whose visible ink is far smaller than the target it is
- *  aimed at takes `motionInkPress` on that ink instead, so the target itself never moves. The
- *  interpolation and the compression are neutralised together under reduced motion. */
-declare const motionTactile = "transition-[background-color,color,box-shadow,transform,opacity] duration-release ease-release active:duration-press active:ease-press motion-safe:[&:not([data-disabled],:disabled,:has(>[role=combobox][data-disabled]))]:active:scale-[0.96] motion-reduce:transition-none";
+declare const motionFeedback = "transition-[background-color,border-color,color,box-shadow,opacity] duration-press ease-press motion-reduce:transition-none";
+declare const motionTactile: string;
+declare const motionTactileWide: string;
+declare const motionTactileField: string;
 /** The spatial half of a compact press, applied to the *mark* rather than to the control.
  *
  *  A control whose visible ink is much smaller than the target it is aimed at — a dialog's close
@@ -243,7 +264,7 @@ declare const motionTactile = "transition-[background-color,color,box-shadow,tra
  *  release lands), so the mark takes the twelve percent and the target keeps its geometry. The
  *  target still owns the focus ring and the state layer, and still carries the tone and depth
  *  response, so the boundary a press happens inside never moves. */
-declare const motionInkPress = "transition-transform duration-release ease-release group-active:duration-press group-active:ease-press group-active:scale-[0.88] motion-reduce:transition-none motion-reduce:group-active:scale-100";
+declare const motionInkPress = "transition-transform duration-release ease-release group-active:duration-tactile group-active:ease-press group-active:scale-[0.88] motion-reduce:transition-none motion-reduce:group-active:scale-100";
 /** A meaningful subordinate part arrives. Spring is reserved for this intent: a mark is
  *  made by overshooting the position it lands in. It leaves without the overshoot, and
  *  reduced motion lands it in one step — which takes a *state-specific* override, because the
@@ -260,6 +281,9 @@ declare const motionOrient = "transition-transform duration-release ease-release
  *  settle together, and an interrupted move retargets from wherever it currently is
  *  because it is a transition and not a keyframe. */
 declare const motionRelocate = "transition-[left,inset-inline-start,top,width,height,transform,background-color,color,box-shadow,opacity] duration-release ease-glide motion-reduce:transition-none";
+/** The same travel across a whole track — a tab indicator — on the longer travel timing, so a
+ *  movement of hundreds of pixels is followed rather than skipped. */
+declare const motionRelocateLong = "transition-[left,inset-inline-start,top,width,height,transform,background-color,color,box-shadow,opacity] duration-travel ease-glide motion-reduce:transition-none";
 /** Direct manipulation: the pointer owns the geometry, so a positional transition would be
  *  lag. While the primitive reports a drag, position and size are removed from the
  *  transition list and only tone and engagement geometry remain; a keyboard or programmatic
@@ -284,7 +308,7 @@ declare const motionPresenceTooltip: string;
 declare const motionPresenceModal: string;
 /** The plane behind a surface that owns the viewport. Opacity only: a blur or a filter is
  *  never animated, so the plane can never animate the page behind it. */
-declare const motionPresenceScrim = "transition-opacity duration-overlay ease-release data-[ending-style]:duration-overlay-exit data-[ending-style]:ease-exit";
+declare const motionPresenceScrim = "transition-opacity duration-overlay ease-release data-[starting-style]:opacity-0 data-[ending-style]:opacity-0 data-[ending-style]:duration-overlay-exit data-[ending-style]:ease-exit";
 /** Continuous activity is a distinct intent, not an exception to interaction motion: it
  *  reports work rather than answering an event, and it has no entrance of its own. */
 declare const motionActivitySpin = "animate-spin motion-reduce:animate-none";
@@ -299,8 +323,16 @@ declare const motionActivityPulse = "animate-pulse motion-reduce:animate-none";
 declare const motionActivityIndeterminate = "animate-sherick-indeterminate [[dir=rtl]_&]:[--sui-indeterminate-direction:-1] motion-reduce:animate-none";
 /** The state layer is a composited overlay, so its own opacity is the only thing that
  *  moves. Shared here because four interaction states across the library ride it. */
-declare const motionStateLayer = "before:transition-opacity before:duration-release before:ease-release active:before:duration-press active:before:ease-press group-active:before:duration-press group-active:before:ease-press motion-reduce:before:transition-none";
-declare const motionDisclose = "transition-[height] duration-release ease-release data-[starting-style]:h-0 data-[ending-style]:h-0 motion-reduce:transition-none";
+/** A row in a collection moves its highlight rather than fading it: a highlight is where the reader
+ *  is, and arrowing through a list with a soft fade on every row leaves a smear of half-lit rows.
+ *  The row's layer therefore changes in one step, for the pointer and the keyboard alike. */
+declare const motionRowLayer = "before:transition-none";
+/** A rim drawn as an overlay of its own — an empty selection mark's lip, a drop target's dashes —
+ *  carries its own feedback timing: it steps up on hover and fades as a selection fill arrives,
+ *  on the same press curve as the surface beneath it. */
+declare const motionRim = "after:transition-[background-color,border-color,opacity] after:duration-press after:ease-press motion-reduce:after:transition-none";
+declare const motionStateLayer = "before:transition-opacity before:duration-release before:ease-release active:before:duration-tactile active:before:ease-press group-active:before:duration-tactile group-active:before:ease-press motion-reduce:before:transition-none";
+declare const motionDisclose = "transition-[height] duration-release ease-release data-[starting-style]:h-0 data-[ending-style]:h-0 data-[ending-style]:duration-overlay-exit data-[ending-style]:ease-exit motion-reduce:transition-none";
 declare const motionPresenceSheet: string;
 declare const motionPresenceToast: string;
 
@@ -311,5 +343,5 @@ declare const motionPresenceToast: string;
  */
 declare const cn: (...inputs: ClassValue[]) => string;
 
-export { cn, density, detail, disclosure, edge, edgeTone, elevation, fieldLayout, focusRing, focusRingDrag, focusRingHeld, focusRingInset, focusRingWithin, groupFocusRing, hitArea, list, material, matteInset, mediaCanvas, motionActivityIndeterminate, motionActivityPulse, motionActivitySpin, motionArrive, motionDirect, motionDisclose, motionFeedback, motionInkPress, motionOrient, motionPresenceAnchored, motionPresenceModal, motionPresenceScrim, motionPresenceSheet, motionPresenceToast, motionPresenceTooltip, motionRelocate, motionStateLayer, motionTactile, overlay, parentFocusRingInset, recessedTop, recipeAlphas, selectable, selectableRowSurface, shape, stacking, state, stateLayer, stateLayerQuietComposite, text, tone };
+export { cn, currentDestination, density, detail, disclosure, edge, edgeTone, elevation, fieldLayout, fieldMessage, focusRing, focusRingDrag, focusRingHeld, focusRingInset, focusRingWithin, groupFocusRing, hitArea, iconSlot, list, material, matteInset, mediaCanvas, motionActivityIndeterminate, motionActivityPulse, motionActivitySpin, motionArrive, motionDirect, motionDisclose, motionFeedback, motionInkPress, motionOrient, motionPresenceAnchored, motionPresenceModal, motionPresenceScrim, motionPresenceSheet, motionPresenceToast, motionPresenceTooltip, motionRelocate, motionRelocateLong, motionRim, motionRowLayer, motionStateLayer, motionTactile, motionTactileField, motionTactileWide, overlay, parentFocusRingInset, recessedTop, recipeAlphas, rim, selectable, selectableRowSurface, shape, stacking, state, stateLayer, stateLayerQuietComposite, text, tone, type };
 export type { MotionIntent };