sherick-ui 2.9.0 → 2.11.0

package/dist/theme.css

@@ -88,12 +88,12 @@
   --sui-primary-strong: 0.720 0.160 292;
   --sui-primary-soft: 0.300 0.075 292;
   --sui-primary-selected: 0.375 0.105 292;
-  --sui-danger-soft: 0.290 0.060 25;
-  --sui-danger-selected: 0.360 0.085 25;
-  --sui-warning-soft: 0.300 0.050 75;
-  --sui-warning-selected: 0.370 0.070 75;
-  --sui-success-soft: 0.290 0.050 160;
-  --sui-success-selected: 0.360 0.070 160;
+  --sui-danger-soft: 0.260 0.040 25;
+  --sui-danger-selected: 0.330 0.062 25;
+  --sui-warning-soft: 0.260 0.040 75;
+  --sui-warning-selected: 0.330 0.060 75;
+  --sui-success-soft: 0.260 0.040 160;
+  --sui-success-selected: 0.330 0.060 160;
   --sui-accent: 0.80 0.08 215;
   --sui-danger: 0.775 0.130 25;
   --sui-warning: 0.830 0.120 80;
@@ -159,12 +159,12 @@
   --sui-primary-strong: 0.720 0.160 292;
   --sui-primary-soft: 0.300 0.075 292;
   --sui-primary-selected: 0.375 0.105 292;
-  --sui-danger-soft: 0.290 0.060 25;
-  --sui-danger-selected: 0.360 0.085 25;
-  --sui-warning-soft: 0.300 0.050 75;
-  --sui-warning-selected: 0.370 0.070 75;
-  --sui-success-soft: 0.290 0.050 160;
-  --sui-success-selected: 0.360 0.070 160;
+  --sui-danger-soft: 0.260 0.040 25;
+  --sui-danger-selected: 0.330 0.062 25;
+  --sui-warning-soft: 0.260 0.040 75;
+  --sui-warning-selected: 0.330 0.060 75;
+  --sui-success-soft: 0.260 0.040 160;
+  --sui-success-selected: 0.330 0.060 160;
   --sui-accent: 0.80 0.08 215;
   --sui-danger: 0.775 0.130 25;
   --sui-warning: 0.830 0.120 80;
@@ -227,6 +227,9 @@
   --sui-duration-activity: 1400ms;
   --sui-duration-spin: 1000ms;
   --sui-duration-pulse: 2000ms;
+  --sui-duration-breathe: 2000ms;
+  --sui-duration-utility: 100ms;
+  --sui-duration-utility-exit: 80ms;
   --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);

package/dist/types/content.d.ts

@@ -1,17 +1,27 @@
 import React, { ReactNode } from 'react';
 
+interface InlineCodeProps {
+    className?: string;
+    children?: ReactNode;
+}
+declare const InlineCode: ({ className, children }: InlineCodeProps) => React.JSX.Element;
 interface CodeBlockProps {
+    /** @deprecated Render `InlineCode` for code inside a sentence. This is kept for one minor and maps to it. */
     inline?: boolean;
     className?: string;
     children?: ReactNode;
     language?: string;
+    /** The copy action's label. */
+    copyLabel?: string;
+    /** The copy action's label once the code is on the clipboard. */
+    copiedLabel?: string;
 }
-declare const CodeBlock: ({ inline, className, language, children }: CodeBlockProps) => React.JSX.Element;
+declare const CodeBlock: ({ inline, className, language, copyLabel, copiedLabel, children, }: CodeBlockProps) => React.JSX.Element;
 
 interface MarkdownProps {
     children: string;
 }
 declare const Markdown: ({ children }: MarkdownProps) => React.JSX.Element;
 
-export { CodeBlock, Markdown };
-export type { CodeBlockProps, MarkdownProps };
+export { CodeBlock, InlineCode, Markdown };
+export type { CodeBlockProps, InlineCodeProps, MarkdownProps };

package/dist/types/dev.d.cts

@@ -1,16 +1,17 @@
 import { ClassValue } from 'clsx';
 
-declare const focusRing = "focus:outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-sherick-focus focus-visible:outline-offset-[3px]";
-declare const focusRingInset = "focus:outline-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-sherick-focus";
+declare const focusRing = "focus:[outline-style:none] focus-visible:outline focus-visible:outline-2 focus-visible:outline-sherick-focus focus-visible:outline-offset-[3px]";
+declare const focusRingInset = "focus:[outline-style:none] focus-visible:[outline-style:none] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-sherick-focus forced-colors:focus-visible:outline forced-colors:focus-visible:outline-2 forced-colors:focus-visible:outline-offset-[-2px]";
 declare const parentFocusRingInset = "[:focus-visible>&]:ring-2 [:focus-visible>&]:ring-inset [:focus-visible>&]:ring-sherick-focus";
-declare const focusRingHeld = "focus:outline-none focus:outline focus:outline-2 focus:outline-sherick-focus focus:outline-offset-[3px] data-[popup-open]:outline data-[popup-open]:outline-2 data-[popup-open]:outline-sherick-focus data-[popup-open]:outline-offset-[3px]";
+declare const focusRingHeld = "focus:outline focus:outline-2 focus:outline-sherick-focus focus:outline-offset-[3px] data-[popup-open]:outline data-[popup-open]:outline-2 data-[popup-open]:outline-sherick-focus data-[popup-open]:outline-offset-[3px]";
 declare const focusRingWithin = "has-[:focus-visible]:outline has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-sherick-focus has-[:focus-visible]:outline-offset-[3px]";
 declare const focusRingDrag = "data-[dragging]:outline data-[dragging]:outline-2 data-[dragging]:outline-sherick-focus data-[dragging]:outline-offset-[3px]";
 declare const groupFocusRing = "group-focus-visible:outline group-focus-visible:outline-2 group-focus-visible:outline-sherick-focus group-focus-visible:outline-offset-[3px]";
+declare const forcedBoundary = "forced-colors:outline forced-colors:outline-1 forced-colors:outline-offset-[-1px]";
 declare const elevation: {
     readonly flat: "shadow-sherick-flat";
-    readonly raised: "shadow-sherick-raised";
-    readonly floating: "shadow-sherick-floating";
+    readonly raised: string;
+    readonly floating: string;
     readonly control: "shadow-sherick-control";
     readonly recessed: "shadow-sherick-recessed";
     readonly well: "shadow-sherick-well";
@@ -45,14 +46,16 @@ declare const edge: {
 };
 declare const state: {
     readonly recess: "active:shadow-sherick-recessed";
-    readonly disabled: "cursor-not-allowed opacity-45";
-    readonly effectiveDisabled: "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-45 disabled:cursor-not-allowed disabled:opacity-45";
-    readonly disabledRow: "has-[[data-disabled]]:cursor-not-allowed has-[[data-disabled]]:opacity-45";
+    readonly disabled: "cursor-not-allowed opacity-45 aria-disabled:cursor-not-allowed aria-disabled:opacity-45";
+    readonly busy: "aria-busy:cursor-progress aria-busy:opacity-100";
+    readonly effectiveDisabled: "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-45 aria-disabled:cursor-not-allowed aria-disabled:opacity-45 disabled:cursor-not-allowed disabled:opacity-45";
+    readonly disabledRow: "has-[[data-disabled]]:cursor-not-allowed has-[[data-disabled]]:opacity-45 has-[[aria-disabled=true]]:cursor-not-allowed has-[[aria-disabled=true]]:opacity-45";
     readonly disabledDescendant: "cursor-not-allowed";
     readonly disabledPart: string;
     readonly engaged: "group-[:not([data-disabled])]:hover:scale-110 group-[:not([data-disabled])]:hover:bg-sherick-primary-strong group-[:not([data-disabled])]:hover:text-sherick-on-primary data-[dragging]:scale-110 data-[dragging]:bg-sherick-primary-strong data-[dragging]:text-sherick-on-primary";
     readonly enabled: "cursor-pointer";
     readonly text: "cursor-text";
+    readonly quietInk: "text-sherick-ink-muted hover:text-sherick-ink focus-visible:text-sherick-ink";
     readonly rowHover: "hover:bg-sherick-ink/[0.05]";
     readonly field: {
         readonly hover: "hover:bg-sherick-tray-deep";
@@ -88,9 +91,9 @@ declare const material: {
     readonly control: "bg-sherick-surface-high text-sherick-ink placeholder:text-sherick-ink-muted";
     readonly controlError: "bg-sherick-danger-soft 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)]";
-    readonly acrylicHero: "bg-sherick-surface-overlay/[var(--sui-overlay-fill)] bg-[image:var(--sui-glass-hero-gradient)] text-sherick-ink backdrop-blur-[var(--sui-glass-hero-blur)] backdrop-saturate-[var(--sui-glass-hero-saturation)] backdrop-brightness-[var(--sui-glass-hero-brightness)]";
+    readonly acrylic: "bg-sherick-surface-float/[var(--sui-glass-fill)] bg-[image:var(--sui-glass-gradient)] text-sherick-ink";
+    readonly acrylicDense: "bg-sherick-surface-float/[var(--sui-glass-dense-fill)] bg-[image:var(--sui-glass-gradient-dense)] text-sherick-ink";
+    readonly acrylicHero: "bg-sherick-surface-overlay/[var(--sui-overlay-fill)] bg-[image:var(--sui-glass-hero-gradient)] text-sherick-ink";
 };
 declare const mediaCanvas = "bg-sherick-media";
 declare const matteInset = "bg-sherick-surface-high/[0.35] text-sherick-ink";
@@ -101,12 +104,12 @@ declare const type: {
         readonly prominent: "text-lg";
     };
     readonly label: "text-sm leading-5 font-medium";
-    readonly body: "text-sm leading-6";
-    readonly supporting: "text-[0.8125rem] leading-5";
-    readonly caption: "text-xs leading-4";
-    readonly title: "text-base leading-6 font-semibold tracking-[-0.011em]";
-    readonly heading: "text-xl leading-7 font-semibold tracking-[-0.02em]";
-    readonly numeric: "tabular-nums";
+    readonly body: "text-sm leading-6 text-pretty";
+    readonly supporting: "text-[0.8125rem] leading-5 text-pretty";
+    readonly caption: "text-xs leading-4 text-pretty";
+    readonly title: "text-base leading-6 font-semibold tracking-[-0.011em] text-balance";
+    readonly heading: "text-xl leading-7 font-semibold tracking-[-0.02em] text-balance";
+    readonly numeric: "text-sm leading-5 tabular-nums";
 };
 declare const density: {
     readonly compact: string;
@@ -148,13 +151,19 @@ declare const detail: {
     /** The same tone as a block, for a gutter or a rail with thickness. */
     readonly fill: "bg-sherick-detail";
 };
+declare const headingRhythm: {
+    readonly title: "mt-1";
+    readonly heading: "mt-2";
+};
 declare const list: {
     readonly sheet: "max-w-[var(--available-width)] max-h-[var(--available-height)] overflow-y-auto";
+    readonly commandIcon: "inline-flex size-4 shrink-0 items-center justify-center [&>svg]:size-4";
     readonly option: string;
     readonly groupLabel: string;
     readonly command: string;
 };
 declare const disclosure: {
+    readonly chevron: "inline-flex size-5 shrink-0 items-center justify-center [&>svg]:size-5";
     readonly trigger: string;
     readonly panel: string;
 };
@@ -244,6 +253,9 @@ declare const recipeAlphas: {
         readonly neutralSoft: number;
         readonly neutralRest: number;
     };
+    readonly code: {
+        readonly well: number;
+    };
     readonly field: {
         readonly quiet: number;
         readonly card: number;
@@ -255,13 +267,13 @@ declare const recipeAlphas: {
         readonly error: number;
     };
 };
-declare const fieldLayout = "flex min-w-0 w-full flex-col [overflow-wrap:anywhere]";
+declare const fieldLayout = "flex min-w-0 w-full flex-col gap-2 [overflow-wrap:anywhere] [&>label+p]:-mt-1";
 declare const fieldLabel: string;
 declare const fieldMessage: {
     readonly description: string;
     readonly error: string;
 };
-declare const codeWell = "bg-sherick-canvas/[0.28]";
+declare const codeWell: "bg-sherick-surface-high/[0.72] text-sherick-ink";
 declare const richText: {
     readonly quoteRule: "border-sherick-primary/[0.45]";
     readonly linkUnderline: "decoration-sherick-primary/[0.35] hover:decoration-sherick-primary";
@@ -320,27 +332,50 @@ declare const motionDirect = "transition-[inset-inline-start,width,height,backgr
 declare const motionPresenceAnchored: string;
 /** A tooltip: the same side-aware model and the same grow as an anchored popup, deliberately
  *  lighter — it settles on the local timing rather than the overlay timing, and it never
- *  bounces. */
+ *  bounces. A tooltip that Base opens during its warm-up (`data-instant`, because another tooltip
+ *  was just closed) takes no timing at all: the next hint is already where the reader moved to. */
 declare const motionPresenceTooltip: string;
+/** The utility tier: a small surface a reader opened from the keyboard, or a menu they asked for.
+ *  It is opacity only — no travel, no scale and no scrim ramp — on the short utility timing, so the
+ *  surface is there as soon as the key that opened it has been answered. */
+declare const motionPresenceUtility: string;
 /** A modal surface: anchored to the viewport rather than to a trigger, so it has no side
  *  to grow from. A large surface never bounces; it fades, rises a little and settles, and its
  *  scale stays restrained because a plane this big grows visibly even from a few percent. */
 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-[starting-style]:opacity-0 data-[ending-style]:opacity-0 data-[ending-style]:duration-overlay-exit data-[ending-style]:ease-exit";
+/** The plane behind a surface that owns the viewport. Only its tint fades, and the tint is the
+ *  `::before` layer `overlay.scrim` paints: the element itself carries the backdrop blur, and a
+ *  presence recipe never animates a node that carries `backdrop-filter`, because every frame of
+ *  such an animation re-blurs the page behind it. The blur therefore arrives with the plane, and
+ *  the tint fades in front of it. */
+declare const motionPresenceScrim: string;
+/** The scrim of a utility surface. A surface the reader opened from the keyboard answers on the
+ *  utility timing, and its plane fades on that same timing, so the backdrop is not slower than the
+ *  surface it sits behind. */
+declare const motionPresenceScrimUtility: string;
 /** 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";
-declare const motionActivityPulse = "animate-pulse motion-reduce:animate-none";
+ *  reports work rather than answering an event, and it has no entrance of its own.
+ *
+ *  Reduced motion removes the *travel* of an activity loop — the rotation, the sweep — and keeps
+ *  the loop as an opacity change. A spinner that simply stopped reads as finished, and a user who
+ *  asked for less motion still needs to know the work is running. The reduced form is therefore
+ *  a slow breathe for the spinner and a softer pulse for a skeleton, both on the authored pace. */
+declare const motionActivitySpin = "animate-spin motion-reduce:animate-sherick-breathe";
+declare const motionActivityPulse = "animate-pulse motion-reduce:animate-sherick-soft-pulse";
+/** The reduced form of an indeterminate bar. The sweep is removed — its travel is the thing reduced
+ *  motion takes away — and the fill is held at the full width of its track, where its opacity
+ *  breathes on the same slow loop the spinner takes. A progress part that owns this class sets its
+ *  fill to the whole track under `motion-reduce`, so the reader still sees a bar that is busy.
+ *  Exported separately so `Progress` can pair it with its own width rule. */
+declare const motionActivityIndeterminateReduced = "motion-reduce:animate-sherick-breathe";
 /** The indeterminate half of a progress bar. A task with no known value cannot report a
  *  position, so it reports *work* instead: the fill sweeps across its own track on the one loop
  *  that is paced, because a loop that reports rather than answers cannot arrive. The travel is a
  *  composited transform rather than a laid-out edge, and an endless loop must never sit on the
  *  layout path; the direction is a value the recipe flips with the writing direction, because a
- *  transform is physical and the sweep follows the page. Under reduced motion the loop stops and
- *  the fill rests where it starts: a static status glyph, exactly as the spin and the pulse rest. */
-declare const motionActivityIndeterminate = "animate-sherick-indeterminate [[dir=rtl]_&]:[--sui-indeterminate-direction:-1] motion-reduce:animate-none";
+ *  transform is physical and the sweep follows the page. Under reduced motion the sweep gives way
+ *  to the opacity breathe above, so the bar keeps saying that work is running without moving. */
+declare const motionActivityIndeterminate: string;
 /** 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. */
 /** A row in a collection moves its highlight rather than fading it: a highlight is where the reader
@@ -363,5 +398,5 @@ declare const motionPresenceToast: string;
  */
 declare const cn: (...inputs: ClassValue[]) => string;
 
-export { cn, codeWell, currentDestination, density, detail, disclosure, edge, edgeTone, elevation, fieldLabel, fieldLayout, fieldMessage, focusRing, focusRingDrag, focusRingHeld, focusRingInset, focusRingWithin, groupFocusRing, hitArea, iconSlot, iconStroke, 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, puck, recessedTop, recipeAlphas, richText, rim, selectable, selectableRowSupporting, selectableRowSurface, shape, stacking, state, stateLayer, stateLayerQuietComposite, text, tone, type };
+export { cn, codeWell, currentDestination, density, detail, disclosure, edge, edgeTone, elevation, fieldLabel, fieldLayout, fieldMessage, focusRing, focusRingDrag, focusRingHeld, focusRingInset, focusRingWithin, forcedBoundary, groupFocusRing, headingRhythm, hitArea, iconSlot, iconStroke, list, material, matteInset, mediaCanvas, motionActivityIndeterminate, motionActivityIndeterminateReduced, motionActivityPulse, motionActivitySpin, motionArrive, motionDirect, motionDisclose, motionFeedback, motionInkPress, motionOrient, motionPresenceAnchored, motionPresenceModal, motionPresenceScrim, motionPresenceScrimUtility, motionPresenceSheet, motionPresenceToast, motionPresenceTooltip, motionPresenceUtility, motionRelocate, motionRelocateLong, motionRim, motionRowLayer, motionStateLayer, motionTactile, motionTactileField, motionTactileWide, overlay, parentFocusRingInset, puck, recessedTop, recipeAlphas, richText, rim, selectable, selectableRowSupporting, selectableRowSurface, shape, stacking, state, stateLayer, stateLayerQuietComposite, text, tone, type };
 export type { MotionIntent };

package/dist/types/dev.d.ts

@@ -1,16 +1,17 @@
 import { ClassValue } from 'clsx';
 
-declare const focusRing = "focus:outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-sherick-focus focus-visible:outline-offset-[3px]";
-declare const focusRingInset = "focus:outline-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-sherick-focus";
+declare const focusRing = "focus:[outline-style:none] focus-visible:outline focus-visible:outline-2 focus-visible:outline-sherick-focus focus-visible:outline-offset-[3px]";
+declare const focusRingInset = "focus:[outline-style:none] focus-visible:[outline-style:none] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-sherick-focus forced-colors:focus-visible:outline forced-colors:focus-visible:outline-2 forced-colors:focus-visible:outline-offset-[-2px]";
 declare const parentFocusRingInset = "[:focus-visible>&]:ring-2 [:focus-visible>&]:ring-inset [:focus-visible>&]:ring-sherick-focus";
-declare const focusRingHeld = "focus:outline-none focus:outline focus:outline-2 focus:outline-sherick-focus focus:outline-offset-[3px] data-[popup-open]:outline data-[popup-open]:outline-2 data-[popup-open]:outline-sherick-focus data-[popup-open]:outline-offset-[3px]";
+declare const focusRingHeld = "focus:outline focus:outline-2 focus:outline-sherick-focus focus:outline-offset-[3px] data-[popup-open]:outline data-[popup-open]:outline-2 data-[popup-open]:outline-sherick-focus data-[popup-open]:outline-offset-[3px]";
 declare const focusRingWithin = "has-[:focus-visible]:outline has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-sherick-focus has-[:focus-visible]:outline-offset-[3px]";
 declare const focusRingDrag = "data-[dragging]:outline data-[dragging]:outline-2 data-[dragging]:outline-sherick-focus data-[dragging]:outline-offset-[3px]";
 declare const groupFocusRing = "group-focus-visible:outline group-focus-visible:outline-2 group-focus-visible:outline-sherick-focus group-focus-visible:outline-offset-[3px]";
+declare const forcedBoundary = "forced-colors:outline forced-colors:outline-1 forced-colors:outline-offset-[-1px]";
 declare const elevation: {
     readonly flat: "shadow-sherick-flat";
-    readonly raised: "shadow-sherick-raised";
-    readonly floating: "shadow-sherick-floating";
+    readonly raised: string;
+    readonly floating: string;
     readonly control: "shadow-sherick-control";
     readonly recessed: "shadow-sherick-recessed";
     readonly well: "shadow-sherick-well";
@@ -45,14 +46,16 @@ declare const edge: {
 };
 declare const state: {
     readonly recess: "active:shadow-sherick-recessed";
-    readonly disabled: "cursor-not-allowed opacity-45";
-    readonly effectiveDisabled: "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-45 disabled:cursor-not-allowed disabled:opacity-45";
-    readonly disabledRow: "has-[[data-disabled]]:cursor-not-allowed has-[[data-disabled]]:opacity-45";
+    readonly disabled: "cursor-not-allowed opacity-45 aria-disabled:cursor-not-allowed aria-disabled:opacity-45";
+    readonly busy: "aria-busy:cursor-progress aria-busy:opacity-100";
+    readonly effectiveDisabled: "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-45 aria-disabled:cursor-not-allowed aria-disabled:opacity-45 disabled:cursor-not-allowed disabled:opacity-45";
+    readonly disabledRow: "has-[[data-disabled]]:cursor-not-allowed has-[[data-disabled]]:opacity-45 has-[[aria-disabled=true]]:cursor-not-allowed has-[[aria-disabled=true]]:opacity-45";
     readonly disabledDescendant: "cursor-not-allowed";
     readonly disabledPart: string;
     readonly engaged: "group-[:not([data-disabled])]:hover:scale-110 group-[:not([data-disabled])]:hover:bg-sherick-primary-strong group-[:not([data-disabled])]:hover:text-sherick-on-primary data-[dragging]:scale-110 data-[dragging]:bg-sherick-primary-strong data-[dragging]:text-sherick-on-primary";
     readonly enabled: "cursor-pointer";
     readonly text: "cursor-text";
+    readonly quietInk: "text-sherick-ink-muted hover:text-sherick-ink focus-visible:text-sherick-ink";
     readonly rowHover: "hover:bg-sherick-ink/[0.05]";
     readonly field: {
         readonly hover: "hover:bg-sherick-tray-deep";
@@ -88,9 +91,9 @@ declare const material: {
     readonly control: "bg-sherick-surface-high text-sherick-ink placeholder:text-sherick-ink-muted";
     readonly controlError: "bg-sherick-danger-soft 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)]";
-    readonly acrylicHero: "bg-sherick-surface-overlay/[var(--sui-overlay-fill)] bg-[image:var(--sui-glass-hero-gradient)] text-sherick-ink backdrop-blur-[var(--sui-glass-hero-blur)] backdrop-saturate-[var(--sui-glass-hero-saturation)] backdrop-brightness-[var(--sui-glass-hero-brightness)]";
+    readonly acrylic: "bg-sherick-surface-float/[var(--sui-glass-fill)] bg-[image:var(--sui-glass-gradient)] text-sherick-ink";
+    readonly acrylicDense: "bg-sherick-surface-float/[var(--sui-glass-dense-fill)] bg-[image:var(--sui-glass-gradient-dense)] text-sherick-ink";
+    readonly acrylicHero: "bg-sherick-surface-overlay/[var(--sui-overlay-fill)] bg-[image:var(--sui-glass-hero-gradient)] text-sherick-ink";
 };
 declare const mediaCanvas = "bg-sherick-media";
 declare const matteInset = "bg-sherick-surface-high/[0.35] text-sherick-ink";
@@ -101,12 +104,12 @@ declare const type: {
         readonly prominent: "text-lg";
     };
     readonly label: "text-sm leading-5 font-medium";
-    readonly body: "text-sm leading-6";
-    readonly supporting: "text-[0.8125rem] leading-5";
-    readonly caption: "text-xs leading-4";
-    readonly title: "text-base leading-6 font-semibold tracking-[-0.011em]";
-    readonly heading: "text-xl leading-7 font-semibold tracking-[-0.02em]";
-    readonly numeric: "tabular-nums";
+    readonly body: "text-sm leading-6 text-pretty";
+    readonly supporting: "text-[0.8125rem] leading-5 text-pretty";
+    readonly caption: "text-xs leading-4 text-pretty";
+    readonly title: "text-base leading-6 font-semibold tracking-[-0.011em] text-balance";
+    readonly heading: "text-xl leading-7 font-semibold tracking-[-0.02em] text-balance";
+    readonly numeric: "text-sm leading-5 tabular-nums";
 };
 declare const density: {
     readonly compact: string;
@@ -148,13 +151,19 @@ declare const detail: {
     /** The same tone as a block, for a gutter or a rail with thickness. */
     readonly fill: "bg-sherick-detail";
 };
+declare const headingRhythm: {
+    readonly title: "mt-1";
+    readonly heading: "mt-2";
+};
 declare const list: {
     readonly sheet: "max-w-[var(--available-width)] max-h-[var(--available-height)] overflow-y-auto";
+    readonly commandIcon: "inline-flex size-4 shrink-0 items-center justify-center [&>svg]:size-4";
     readonly option: string;
     readonly groupLabel: string;
     readonly command: string;
 };
 declare const disclosure: {
+    readonly chevron: "inline-flex size-5 shrink-0 items-center justify-center [&>svg]:size-5";
     readonly trigger: string;
     readonly panel: string;
 };
@@ -244,6 +253,9 @@ declare const recipeAlphas: {
         readonly neutralSoft: number;
         readonly neutralRest: number;
     };
+    readonly code: {
+        readonly well: number;
+    };
     readonly field: {
         readonly quiet: number;
         readonly card: number;
@@ -255,13 +267,13 @@ declare const recipeAlphas: {
         readonly error: number;
     };
 };
-declare const fieldLayout = "flex min-w-0 w-full flex-col [overflow-wrap:anywhere]";
+declare const fieldLayout = "flex min-w-0 w-full flex-col gap-2 [overflow-wrap:anywhere] [&>label+p]:-mt-1";
 declare const fieldLabel: string;
 declare const fieldMessage: {
     readonly description: string;
     readonly error: string;
 };
-declare const codeWell = "bg-sherick-canvas/[0.28]";
+declare const codeWell: "bg-sherick-surface-high/[0.72] text-sherick-ink";
 declare const richText: {
     readonly quoteRule: "border-sherick-primary/[0.45]";
     readonly linkUnderline: "decoration-sherick-primary/[0.35] hover:decoration-sherick-primary";
@@ -320,27 +332,50 @@ declare const motionDirect = "transition-[inset-inline-start,width,height,backgr
 declare const motionPresenceAnchored: string;
 /** A tooltip: the same side-aware model and the same grow as an anchored popup, deliberately
  *  lighter — it settles on the local timing rather than the overlay timing, and it never
- *  bounces. */
+ *  bounces. A tooltip that Base opens during its warm-up (`data-instant`, because another tooltip
+ *  was just closed) takes no timing at all: the next hint is already where the reader moved to. */
 declare const motionPresenceTooltip: string;
+/** The utility tier: a small surface a reader opened from the keyboard, or a menu they asked for.
+ *  It is opacity only — no travel, no scale and no scrim ramp — on the short utility timing, so the
+ *  surface is there as soon as the key that opened it has been answered. */
+declare const motionPresenceUtility: string;
 /** A modal surface: anchored to the viewport rather than to a trigger, so it has no side
  *  to grow from. A large surface never bounces; it fades, rises a little and settles, and its
  *  scale stays restrained because a plane this big grows visibly even from a few percent. */
 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-[starting-style]:opacity-0 data-[ending-style]:opacity-0 data-[ending-style]:duration-overlay-exit data-[ending-style]:ease-exit";
+/** The plane behind a surface that owns the viewport. Only its tint fades, and the tint is the
+ *  `::before` layer `overlay.scrim` paints: the element itself carries the backdrop blur, and a
+ *  presence recipe never animates a node that carries `backdrop-filter`, because every frame of
+ *  such an animation re-blurs the page behind it. The blur therefore arrives with the plane, and
+ *  the tint fades in front of it. */
+declare const motionPresenceScrim: string;
+/** The scrim of a utility surface. A surface the reader opened from the keyboard answers on the
+ *  utility timing, and its plane fades on that same timing, so the backdrop is not slower than the
+ *  surface it sits behind. */
+declare const motionPresenceScrimUtility: string;
 /** 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";
-declare const motionActivityPulse = "animate-pulse motion-reduce:animate-none";
+ *  reports work rather than answering an event, and it has no entrance of its own.
+ *
+ *  Reduced motion removes the *travel* of an activity loop — the rotation, the sweep — and keeps
+ *  the loop as an opacity change. A spinner that simply stopped reads as finished, and a user who
+ *  asked for less motion still needs to know the work is running. The reduced form is therefore
+ *  a slow breathe for the spinner and a softer pulse for a skeleton, both on the authored pace. */
+declare const motionActivitySpin = "animate-spin motion-reduce:animate-sherick-breathe";
+declare const motionActivityPulse = "animate-pulse motion-reduce:animate-sherick-soft-pulse";
+/** The reduced form of an indeterminate bar. The sweep is removed — its travel is the thing reduced
+ *  motion takes away — and the fill is held at the full width of its track, where its opacity
+ *  breathes on the same slow loop the spinner takes. A progress part that owns this class sets its
+ *  fill to the whole track under `motion-reduce`, so the reader still sees a bar that is busy.
+ *  Exported separately so `Progress` can pair it with its own width rule. */
+declare const motionActivityIndeterminateReduced = "motion-reduce:animate-sherick-breathe";
 /** The indeterminate half of a progress bar. A task with no known value cannot report a
  *  position, so it reports *work* instead: the fill sweeps across its own track on the one loop
  *  that is paced, because a loop that reports rather than answers cannot arrive. The travel is a
  *  composited transform rather than a laid-out edge, and an endless loop must never sit on the
  *  layout path; the direction is a value the recipe flips with the writing direction, because a
- *  transform is physical and the sweep follows the page. Under reduced motion the loop stops and
- *  the fill rests where it starts: a static status glyph, exactly as the spin and the pulse rest. */
-declare const motionActivityIndeterminate = "animate-sherick-indeterminate [[dir=rtl]_&]:[--sui-indeterminate-direction:-1] motion-reduce:animate-none";
+ *  transform is physical and the sweep follows the page. Under reduced motion the sweep gives way
+ *  to the opacity breathe above, so the bar keeps saying that work is running without moving. */
+declare const motionActivityIndeterminate: string;
 /** 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. */
 /** A row in a collection moves its highlight rather than fading it: a highlight is where the reader
@@ -363,5 +398,5 @@ declare const motionPresenceToast: string;
  */
 declare const cn: (...inputs: ClassValue[]) => string;
 
-export { cn, codeWell, currentDestination, density, detail, disclosure, edge, edgeTone, elevation, fieldLabel, fieldLayout, fieldMessage, focusRing, focusRingDrag, focusRingHeld, focusRingInset, focusRingWithin, groupFocusRing, hitArea, iconSlot, iconStroke, 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, puck, recessedTop, recipeAlphas, richText, rim, selectable, selectableRowSupporting, selectableRowSurface, shape, stacking, state, stateLayer, stateLayerQuietComposite, text, tone, type };
+export { cn, codeWell, currentDestination, density, detail, disclosure, edge, edgeTone, elevation, fieldLabel, fieldLayout, fieldMessage, focusRing, focusRingDrag, focusRingHeld, focusRingInset, focusRingWithin, forcedBoundary, groupFocusRing, headingRhythm, hitArea, iconSlot, iconStroke, list, material, matteInset, mediaCanvas, motionActivityIndeterminate, motionActivityIndeterminateReduced, motionActivityPulse, motionActivitySpin, motionArrive, motionDirect, motionDisclose, motionFeedback, motionInkPress, motionOrient, motionPresenceAnchored, motionPresenceModal, motionPresenceScrim, motionPresenceScrimUtility, motionPresenceSheet, motionPresenceToast, motionPresenceTooltip, motionPresenceUtility, motionRelocate, motionRelocateLong, motionRim, motionRowLayer, motionStateLayer, motionTactile, motionTactileField, motionTactileWide, overlay, parentFocusRingInset, puck, recessedTop, recipeAlphas, richText, rim, selectable, selectableRowSupporting, selectableRowSurface, shape, stacking, state, stateLayer, stateLayerQuietComposite, text, tone, type };
 export type { MotionIntent };