sherick-ui 2.8.0 → 2.10.1

package/dist/esm/components/ui.common.js

@@ -1,5 +1,5 @@
 import { cx } from '../libs/utils.js';
-import { motionRim, motionFeedback, motionStateLayer, motionRowLayer, motionDisclose } from './ui.motion.js';
+import { motionStateLayer, motionRim, motionFeedback, motionRowLayer, motionDisclose } from './ui.motion.js';
 
 /* Sherick UI design primitives
    ==========================================================================
@@ -9,16 +9,18 @@ import { motionRim, motionFeedback, motionStateLayer, motionRowLayer, motionDisc
 
      material   what a surface is made of          (canvas, matte, control, acrylic)
      elevation  how far it sits off the page       (flat, raised, floating, control, recessed)
-     shape      its corner role                    (control, prominent, surface, expressive, pill, circle)
+     shape      its corner role                    (mark, row, control, prominent, surface, sheet, expressive, pill, circle)
      edge       the hairline between stacked parts (row, header, rule)
      state      how it responds                    (rest, hover, pressed, selected, disabled, focus)
-     stateLayer the composited hover/press overlay (quiet, tonal, filled, track, activeRow)
+     stateLayer the composited hover/press overlay (quiet, tonal, filled, track, mark, activeRow, fieldPart)
      disclosure one expandable region and its row (trigger, panel)
      tone       its color role                     (text, soft, tonal, selected, strong)
      text       the readable emphasis ladder       (high, medium)
-     density    how tightly it is packed           (compact, normal, prominent, target)
+     type       the recurring kinds of copy        (control, label, body, supporting, caption, title, heading, numeric)
+     density    how tightly it is packed           (compact, normal, prominent, target, part)
+     iconStroke the one rendered stroke of a glyph (glyph, mark)
      overlay    floating shells                    (menu, tooltip, popup, toast, sheet, dialog)
-    focusRing  the one focus language             (focusRing, focusRingInset, focusRingHeld, focusRingWithin, groupFocusRing)
+     focusRing  the one focus language             (focusRing, focusRingInset, focusRingHeld, focusRingWithin, groupFocusRing)
 
    Temporal behavior is deliberately not here: `ui.motion.ts` owns every transition,
    duration, curve and reduced-motion rule, and a recipe below names one of its recipes
@@ -64,8 +66,10 @@ import { motionRim, motionFeedback, motionStateLayer, motionRowLayer, motionDisc
    trigger and an editable combobox field end up identical in every state: neither looks ringed at
    rest, both look ringed the moment either is used, and both lose it together. `groupFocusRing`
    draws it from the wrapping control instead of the track it contains. */
-const focusRing = "focus:outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-sherick-focus focus-visible:outline-offset-[3px]";
-const focusRingInset = "focus:outline-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-sherick-focus";
+const focusRing = "focus:[outline-style:none] focus-visible:outline focus-visible:outline-2 focus-visible:outline-sherick-focus focus-visible:outline-offset-[3px]";
+/* The inset ring is a box shadow, and forced colors removes every box shadow, so the same 2px ring
+   is drawn there as an inset outline instead, which the platform paints in a system colour. */
+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]";
 /* A focus owner that also contains a subtree paints the inset ring on its direct row only. */
 const parentFocusRingInset = "[:focus-visible>&]:ring-2 [:focus-visible>&]:ring-inset [:focus-visible>&]:ring-sherick-focus";
 /* The ring of a value control that is itself the focusable element: it wears it whenever it
@@ -73,7 +77,7 @@ const parentFocusRingInset = "[:focus-visible>&]:ring-2 [:focus-visible>&]:ring-
    hands the DOM focus to its list while that list is open, so the ring follows the control's
    engagement rather than the focus — which is exactly what a native `select` shows, and the only
    focus indication the field has left once the list has taken over. */
-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]";
+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]";
 /* The same ring for a value control whose focus lives in a borderless input inside it. It follows
    **visible** focus rather than any focus, which is what makes a field and a slider differ for
    the platform's reasons instead of by local say-so: a text field is `:focus-visible` whenever it
@@ -103,10 +107,16 @@ const groupFocusRing = "group-focus-visible:outline group-focus-visible:outline-
    A passive surface is flat unless its anatomy is sunk by design: a well, a groove and
    a code well are `recessed` while they sit there, and `flat` is the default for
    everything else passive. A flat control never gains depth by being pressed. */
+/* Forced colors removes shadows and tones, so a shell that separates from the page by depth alone
+   loses its boundary. Every shell that carries elevation draws its own system-coloured outline
+   there: `outline` is drawn in CanvasText by the platform and `outline-offset` pulls it onto the
+   border box, so it traces the object's own corner. The outline has no width in normal colors, so
+   it costs nothing on screen; `forced-colors:` is the only place it appears. */
+const forcedBoundary = "forced-colors:outline forced-colors:outline-1 forced-colors:outline-offset-[-1px]";
 const elevation = {
     flat: "shadow-sherick-flat",
-    raised: "shadow-sherick-raised",
-    floating: "shadow-sherick-floating",
+    raised: /* @__PURE__ */ cx("shadow-sherick-raised", forcedBoundary),
+    floating: /* @__PURE__ */ cx("shadow-sherick-floating", forcedBoundary),
     control: "shadow-sherick-control",
     recessed: "shadow-sherick-recessed",
     /* One rung further down: the depth a small selection mark sinks to while it is held. A mark
@@ -125,8 +135,8 @@ const recessedTop = "shadow-sherick-recessed-top";
    an almost-button beside a real one. Nested roles stay concentric: an inner corner is the outer
    corner minus the inset between them (a 16px track around a 12px indicator at 4px, a 20px list
    sheet around 12px options at 8px).
-   - control:     ordinary controls and dense data regions — fields, rows, options,
-                  chips, tables.
+   - control:     ordinary containers and dense data regions — fields, alerts, tables, segment
+                  tracks and full-width option rows. Chips and badges are capsules (`pill`).
    - mark:        a compact square selection mark — a 20px checkbox box. `control` is a role
                   for objects the size of a field; its radius exceeds the half-extent of a
                   20px square, so a mark needs a step of its own — a corner under a third of
@@ -210,7 +220,7 @@ const edge = {
        directional border class at the call site (`border-t`, `border-l`). */
     rule: edgeTone.rule,
 };
-const effectiveDisabled = "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-45 disabled:cursor-not-allowed disabled:opacity-45";
+const 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";
 /* Interaction states:
      rest       the material, at whatever elevation its anatomy calls for
      hover      one tonality step, never a change in depth or a new border
@@ -227,19 +237,26 @@ const state = {
        it belongs with the tactile intent in `ui.motion.ts`. */
     recess: "active:shadow-sherick-recessed",
     /* The disabled step for a control whose disabled state is a Sherick prop. */
-    disabled: "cursor-not-allowed opacity-45",
+    disabled: "cursor-not-allowed opacity-45 aria-disabled:cursor-not-allowed aria-disabled:opacity-45",
+    /* A control that is busy is still working for the reader, so it is not dimmed: it keeps its full
+       strength and its cursor says work is happening. It stays focusable, and it takes no hover layer
+       and no press (`motionTactile` and the state layers withhold both on `aria-busy`). A busy
+       control is marked with `aria-busy="true"`, which is what Button and IconButton already carry. */
+    busy: "aria-busy:cursor-progress aria-busy:opacity-100",
     /* The same step, keyed on the primitive's own markers rather than on a Sherick prop: Base marks
        an effectively disabled control — including one disabled by the field around it — with
-       `data-disabled`, and a part that disables itself at a bound carries `disabled` as well. */
+       `data-disabled`, and a part that disables itself at a bound carries `disabled` as well. A
+       control that stays focusable while disabled sets `aria-disabled="true"` instead, and it dims
+       exactly once, on the same step. */
     effectiveDisabled,
     /* A row whose control is disabled by any means — its own option, its group, or the field around
        it — dims from the control's own marker rather than from a Sherick prop. */
-    disabledRow: "has-[[data-disabled]]:cursor-not-allowed has-[[data-disabled]]:opacity-45",
+    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",
     /* A control nested inside a disabled composite. The composite already applied the opacity step,
        and a second one would dim the field unevenly; this carries only the disabled cursor. */
     disabledDescendant: "cursor-not-allowed",
     /* A part dims independently at a bound, but never a second time inside a disabled field. */
-    disabledPart: /* @__PURE__ */ cx(effectiveDisabled, "group-data-[disabled]/field:opacity-100"),
+    disabledPart: /* @__PURE__ */ cx(effectiveDisabled, "group-data-[disabled]/field:opacity-100 group-data-[disabled]/field:aria-disabled:opacity-100"),
     /* A part the pointer is engaging — the handle of a value control. It sits matte and settled at
        rest and takes its accent, a little larger, while the pointer is on it. Drag covers the case
        where the pointer has been captured and left the control. */
@@ -248,13 +265,17 @@ const state = {
     enabled: "cursor-pointer",
     /* A text field: the normal text cursor, never a pointer. */
     text: "cursor-text",
+    /* A muted label that is also a quiet target: it rests at `text.medium` and rises to `text.high` on
+       hover and on keyboard focus, with no state layer. A dismiss glyph or a secondary link takes it,
+       so the response is the ink itself rather than a tint behind it. Hover is a pointer response
+       (§11), so a touch screen only ever sees the focus step. */
+    quietInk: "text-sherick-ink-muted hover:text-sherick-ink focus-visible:text-sherick-ink",
     /* Quiet scan feedback for non-interactive data rows: tonality only. */
     rowHover: "hover:bg-sherick-ink/[0.05]",
-    /* The matte field family — one tonality ladder, four triggers, no rims. A field
-       steps its surface up once on hover and once more while it is engaged; a
-       composite field focuses its outer surface while the input inside stays
-       borderless; an expanded control holds the engaged step while its popup is
-       open. Tonality carries the state, so no border appears and disappears. */
+    /* The field family — one tray, one deeper step, no visible rims. Hover and engagement share the
+       deep step; a composite field engages its outer surface while the input inside stays borderless;
+       an expanded control holds the engaged step while its popup is open. Tonality and the focus ring
+       carry the state, so no border appears and disappears. */
     /* A field is a tray in the `surface-high` tone, so it reads as a quiet recess in light and a
        quiet step up in dark. It draws no line: its label and content identify it (see `rim`), so the
        tray is laid at full strength to say "something goes here" on a card and on the page alike.
@@ -312,29 +333,29 @@ const stateLayerBase = /* @__PURE__ */ cx("before:pointer-events-none before:abs
    a suffix, because the stylesheet compiler reads class names as literal text: a name that only
    exists once the recipe is evaluated compiles to no rule at all, and the step silently disappears.
    Interpolating one of these consts is safe — the name is still written here in full. */
-const hoverQuiet = "[&:not([data-disabled]):not(:disabled)]:hover:before:opacity-[0.05]";
-const hoverTonal = "[&:not([data-disabled]):not(:disabled)]:hover:before:opacity-[0.09]";
-const hoverFilled = "[&:not([data-disabled]):not(:disabled)]:hover:before:opacity-[0.18]";
-const hoverTrack = "group-[:not([data-disabled]):not(:disabled)]:hover:before:opacity-[0.18]";
-const pressQuiet = "[&:not([data-disabled]):not(:disabled)]:active:before:opacity-[0.09]";
-const pressTonal = "[&:not([data-disabled]):not(:disabled)]:active:before:opacity-[0.15]";
+const hoverQuiet = "[&:not([data-disabled]):not([aria-disabled=true]):not([aria-busy=true]):not(:disabled)]:hover:before:opacity-[0.05]";
+const hoverTonal = "[&:not([data-disabled]):not([aria-disabled=true]):not([aria-busy=true]):not(:disabled)]:hover:before:opacity-[0.09]";
+const hoverFilled = "[&:not([data-disabled]):not([aria-disabled=true]):not([aria-busy=true]):not(:disabled)]:hover:before:opacity-[0.18]";
+const hoverTrack = "group-[:not([data-disabled]):not([aria-disabled=true]):not([aria-busy=true]):not(:disabled)]:hover:before:opacity-[0.18]";
+const pressQuiet = "[&:not([data-disabled]):not([aria-disabled=true]):not([aria-busy=true]):not(:disabled)]:active:before:opacity-[0.09]";
+const pressTonal = "[&:not([data-disabled]):not([aria-disabled=true]):not([aria-busy=true]):not(:disabled)]:active:before:opacity-[0.15]";
 /* A neutral fill's label is ink, so a 15% ink veil turns the whole control a flat grey while it is
    held — and the recess and the compression already say "pressed". The neutral press is lighter;
    coloured fills keep the stronger step their labels were measured through. */
-const pressTonalNeutral = "[&:not([data-disabled]):not(:disabled)]:active:before:opacity-[0.12]";
-const pressFilled = "[&:not([data-disabled]):not(:disabled)]:active:before:opacity-[0.26]";
-const pressTrack = "group-[:not([data-disabled]):not(:disabled)]:active:before:opacity-[0.26]";
+const pressTonalNeutral = "[&:not([data-disabled]):not([aria-disabled=true]):not([aria-busy=true]):not(:disabled)]:active:before:opacity-[0.12]";
+const pressFilled = "[&:not([data-disabled]):not([aria-disabled=true]):not([aria-busy=true]):not(:disabled)]:active:before:opacity-[0.26]";
+const pressTrack = "group-[:not([data-disabled]):not([aria-disabled=true]):not([aria-busy=true]):not(:disabled)]:active:before:opacity-[0.26]";
 /* A selection mark answers hover with the light tonal step: it is a 20px glyph beside its own
    label, and the track's step would turn an empty well into a grey disc. Its press is depth, not
    a heavier veil — `selectable.markSurface` sinks the well — so the layer only holds its hover
    step while the pointer is down. A read-only mark accepts no change and advertises none.
    The pseudo-class sits *inside* the group selector: written after it, as `…]:hover:`, it would
    match the mark's own 20px box rather than the control and the row around it. */
-const hoverMark = "group-[:not([data-disabled]):not([data-readonly]):not(:disabled):hover]:before:opacity-[0.09]";
+const hoverMark = "[@media(hover:hover)_and_(pointer:fine)]:group-[:not([data-disabled]):not([data-readonly]):not([aria-disabled=true]):not(:disabled):hover]:before:opacity-[0.09]";
 /* A labelled control surface paints its state on a row that owns the pointer area while the
    actual disabled marker belongs to a descendant control. Gate the same quiet response on that
    descendant so a disabled or read-only choice does not advertise a press it cannot accept. */
-const stateLayerQuietComposite = /* @__PURE__ */ cx("relative", stateLayerBase, "before:rounded-[inherit] before:bg-current", "[&:not([data-disabled]):not([data-readonly]):not(:disabled):not(:has([data-disabled])):not(:has([data-readonly]))]:hover:before:opacity-[0.05]", "[&:not([data-disabled]):not([data-readonly]):not(:disabled):not(:has([data-disabled])):not(:has([data-readonly]))]:active:before:opacity-[0.09]");
+const stateLayerQuietComposite = /* @__PURE__ */ cx("relative", stateLayerBase, "before:rounded-[inherit] before:bg-current", "[&:not([data-disabled]):not([data-readonly]):not([aria-disabled=true]):not([aria-busy=true]):not(:disabled):not(:has([data-disabled])):not(:has([data-readonly]))]:hover:before:opacity-[0.05]", "[&:not([data-disabled]):not([data-readonly]):not([aria-disabled=true]):not([aria-busy=true]):not(:disabled):not(:has([data-disabled])):not(:has([data-readonly]))]:active:before:opacity-[0.09]");
 const stateLayer = {
     /* Quiet surfaces — ghost controls, navigation rows, menu options. */
     quiet: /* @__PURE__ */ cx("relative", stateLayerBase, "before:rounded-[inherit] before:bg-current", hoverQuiet, pressQuiet),
@@ -395,8 +416,8 @@ const hitArea = "relative after:pointer-events-auto after:absolute after:inset-[
                   takes the mid-emphasis tone, which inverts with the theme and separates in
                   both.
    - acrylic:     a translucent sheet lit from above, for surfaces that float above
-                  the application. The gradient, fill, blur and saturation are part of
-                  the material. A gradient arrives as a typed image arbitrary value
+                  the application. The gradient and fill are part of the material; it carries
+                  no backdrop filter (see `acrylic` below). A gradient arrives as a typed image arbitrary value
                   rather than through the colour scale, because `tailwind-merge`
                   collapses two background utilities into one and would silently drop
                   either the fill or the gradient. Each one is written out literally, so
@@ -410,13 +431,13 @@ const hitArea = "relative after:pointer-events-auto after:absolute after:inset-[
    - acrylicHero: the large-overlay sheet, for a surface that owns the viewport. It is
                   markedly more opaque and calmer than the smaller sheets: it has to
                   read first as a physical surface and only secondarily as glass, so the
-                  scrim behind it does the separating, the blur only defocuses, and the
+                  scrim behind it does the separating, and the
                   gradient is a restrained top-to-bottom light rather than a frosted
                   haze. Its tone is a subtle step above the canvas in every theme —
                   in dark mode a small step above the canvas rather than a light grey
                   sheet — which is how it separates without leaning on its shadow, and
                   `--sui-overlay-fill` tunes how much of the sheet is its own tone rather
-                  than the defocused page — a large overlay leans on that, not on blur. */
+                  than the page behind it — a large overlay leans on that, not on blur. */
 const material = {
     canvas: "bg-sherick-canvas text-sherick-ink",
     matteQuiet: "bg-sherick-surface/[0.42] text-sherick-ink",
@@ -432,9 +453,13 @@ const material = {
        already — so the error form is the same rule, in the tone the field is in. */
     controlError: "bg-sherick-danger-soft text-sherick-ink placeholder:text-sherick-danger",
     handle: "bg-sherick-ink-muted text-sherick-canvas",
-    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)]",
-    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)]",
-    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)]",
+    /* The glass carries no backdrop filter. Every presence recipe animates the popup node itself, and a
+       backdrop filter on an animated node re-blurs the page on each frame (DL §12). The fill is 0.98 to
+       0.99 opaque, so the blur showed only one or two percent of what lay behind; the plane's scrim keeps
+       the blur where it is static. */
+    acrylic: "bg-sherick-surface-float/[var(--sui-glass-fill)] bg-[image:var(--sui-glass-gradient)] text-sherick-ink",
+    acrylicDense: "bg-sherick-surface-float/[var(--sui-glass-dense-fill)] bg-[image:var(--sui-glass-gradient-dense)] text-sherick-ink",
+    acrylicHero: "bg-sherick-surface-overlay/[var(--sui-overlay-fill)] bg-[image:var(--sui-glass-hero-gradient)] text-sherick-ink",
 };
 /* Dark neutral behind native video, including poster loading and letterboxing. */
 const mediaCanvas = "bg-sherick-media";
@@ -444,9 +469,17 @@ const matteInset = "bg-sherick-surface-high/[0.35] text-sherick-ink";
    where the role owns it, one weight. A component still owns copy that only it renders; these are
    the roles that recur across families and have to agree wherever they appear:
    - control:    the type step of a control, owned through `density` below.
+   - label:      the name above a control — a field's label, a progress label, a column header. It is
+                 the medium weight of the compact step, so a label leads the value beneath it without
+                 being as large as it.
+   - body:       a sentence or a paragraph set inside a component — an alert, a toast's description, a
+                 dialog's description and content, an open disclosure panel. Long-form Markdown keeps
+                 its own reading rhythm; this is the rhythm of copy *in* an interface.
    - supporting: a field's description, hint and error, and the secondary line under a row's label.
    - caption:    compact labels — a badge, a tooltip, a group label, a calendar weekday.
-   - title:      the heading of a compact surface — a popover, a toast, a command palette.
+   - title:      the heading of a compact surface — a card, a popover, a toast, a command palette. It
+                 is one step above the 15px control text it usually sits over, so a heading reads as a
+                 heading by size and not by weight alone.
    - heading:    the title of a surface that owns the viewport — a dialog, an alert dialog, a drawer.
    - numeric:    figures that are compared down a column or updated in place.
    Every size lands on a whole-pixel line box, so stacked rows keep one rhythm. */
@@ -456,11 +489,18 @@ const type = {
         normal: "text-[0.9375rem] leading-[1.375rem]",
         prominent: "text-lg",
     },
-    supporting: "text-[0.8125rem] leading-5",
-    caption: "text-xs leading-4",
-    title: "text-[0.9375rem] leading-[1.375rem] font-semibold tracking-[-0.011em]",
-    heading: "text-xl leading-7 font-semibold tracking-[-0.02em]",
-    numeric: "tabular-nums",
+    label: "text-sm leading-5 font-medium",
+    /* Wrapping copy keeps its line breaks even: `text-pretty` stops a sentence ending on one word,
+       and a heading balances its own lines (`text-balance`). Both are CSS `text-wrap`, so no line is
+       forced and a short string is unchanged. */
+    body: "text-sm leading-6 text-pretty",
+    supporting: "text-[0.8125rem] leading-5 text-pretty",
+    caption: "text-xs leading-4 text-pretty",
+    title: "text-base leading-6 font-semibold tracking-[-0.011em] text-balance",
+    heading: "text-xl leading-7 font-semibold tracking-[-0.02em] text-balance",
+    /* Figures carry their own size: a table cell, a stepper value or a time reading is 14px tabular
+       copy wherever it sits, so a site composes this role and does not write its own `text-sm`. */
+    numeric: "text-sm leading-5 tabular-nums",
 };
 /* Density — three control steps plus the accessible hit target.
    Density owns height and the type step, so controls of one density share a
@@ -497,6 +537,19 @@ const iconSlot = {
     normal: "inline-flex size-5 shrink-0 items-center justify-center [&>svg]:size-5",
     prominent: "inline-flex size-6 shrink-0 items-center justify-center [&>svg]:size-6",
 };
+/* Icon stroke — the one rendered weight of a library glyph. The artwork is drawn on a 24-unit grid,
+   so a stroke written in the artwork's own units renders thinner at 16px and thicker at 24px: the
+   same set read 1.0px in a dismiss and 1.75px in a tick. A glyph the library draws holds its stroke
+   in screen pixels instead, so a 14px chevron and a 20px close mark have one weight, close to the
+   stem of the medium label beside them. A selection mark — the tick or minus inside a filled
+   checkbox — is the one deliberately heavier glyph: it sits on the strong accent and has to read as
+   the mark itself, not as a hairline drawn on it.
+   Apply it to the `svg` a component renders. It is not applied to artwork a consumer hands into a
+   slot: that artwork's weight is the consumer's choice. */
+const iconStroke = {
+    glyph: "[&_*]:[vector-effect:non-scaling-stroke] [&_*]:[stroke-width:1.5px]",
+    mark: "[&_*]:[vector-effect:non-scaling-stroke] [&_*]:[stroke-width:1.75px]",
+};
 /* Stacking level — where anything that floats sits relative to the application.
 
    One interaction level, deliberately. Base UI nests a popup's portal *inside* the portal of the surface it
@@ -523,7 +576,10 @@ const stacking = {
    alert dialog separate from the page identically. */
 const overlay = {
     /* The plane behind a surface that owns the viewport. */
-    scrim: /* @__PURE__ */ cx("fixed inset-0", stacking.float, "bg-sherick-scrim/[0.30] backdrop-blur-[var(--sui-scrim-blur)]"),
+    scrim: /* @__PURE__ */ cx("fixed inset-0", stacking.float, "backdrop-blur-[var(--sui-scrim-blur)] [@media(pointer:coarse)]:[backdrop-filter:none]", 
+    /* The tint is the plane's `::before`, so `motionPresenceScrim` can fade it without animating the
+       node that carries the blur. */
+    "before:absolute before:inset-0 before:content-[''] before:bg-sherick-scrim/[0.30]"),
     /* An anchored surface with room to breathe: a selection list (Select, Combobox) or
        structured content (Popover). It grows out of its trigger and carries the softer
        surface corner, because what it holds is read rather than scanned.
@@ -579,6 +635,14 @@ const detail = {
     /** The same tone as a block, for a gutter or a rail with thickness. */
     fill: "bg-sherick-detail",
 };
+/* The gap between a heading and the supporting line beneath it. It is applied to the supporting
+   line, never to the heading, and it is the only such gap: a header takes no paired padding on its
+   own edges. A title-role surface (a card, a popover, a toast, a command palette) takes 4px; a
+   dialog or drawer heading, which is the larger `heading` role, takes 8px. */
+const headingRhythm = {
+    title: "mt-1",
+    heading: "mt-2",
+};
 /* A list surface — the sheet a collection of rows sits in, and the two row densities it can
    hold. Select, Combobox and Menu all compose these, so an option and a command are the same
    object at two densities instead of three independent designs.
@@ -601,6 +665,9 @@ const detail = {
    performed", never "cannot be found". */
 const list = {
     sheet: "max-w-[var(--available-width)] max-h-[var(--available-height)] overflow-y-auto",
+    /* The leading mark of a command row: the 14px command text takes the compact slot, so the mark is
+       16px and sits in the same box every command's icon does. */
+    commandIcon: iconSlot.compact,
     /* A row in a selection list: one line, read one at a time and chosen.
        The row carries two separate things that both have to be visible. Its *navigation highlight*
        is the state layer — one tone shared with the pointer, because a row under the pointer and a
@@ -612,19 +679,22 @@ const list = {
        both, a selected row keeps its selection tint under the ring, and a disabled-but-navigable
        row still shows where the navigation is while saying it cannot be used. The ring is inset
        because the row lives inside the sheet it belongs to, as a segment does in its track. */
-    option: /* @__PURE__ */ cx("flex w-full items-center justify-between gap-4 px-4 py-3 text-start outline-none", type.control.normal, shape.control, motionFeedback, focusRingInset, text.high, stateLayer.quiet, stateLayer.activeRow, motionRowLayer, state.effectiveDisabled),
+    /* The option's start inset is the field's: a sheet's 8px inset plus the row's 12px puts every
+       option label on the same 20px edge as the value in the trigger that opened it, so the list
+       reads as the field opening rather than a second surface beside it. */
+    option: /* @__PURE__ */ cx("flex w-full items-center justify-between gap-4 px-3 py-3 text-start [outline-style:none]", type.control.normal, shape.control, motionFeedback, focusRingInset, text.high, stateLayer.quiet, stateLayer.activeRow, motionRowLayer, state.effectiveDisabled),
     /* The heading of a group of options — a category above the channels filed under it. It is a
        caption, not a row: it takes no state layer, no highlight and no focus, because the reader never
        lands on it; the primitive names the group from it, so a screen reader hears the category as it
        enters the group. Its inline padding is the option's, so a heading and the labels beneath it
        share one start edge, and the space above it is what separates one group from the last: a
        group inside a sheet is grouped by spacing and a type role, never by a rule or a nested card. */
-    groupLabel: /* @__PURE__ */ cx("px-4 pb-1 pt-3 font-medium", type.caption, text.medium),
+    groupLabel: /* @__PURE__ */ cx("px-3 pb-1 pt-3 font-medium", type.caption, text.medium),
     /* The same object at the density a list of short actions wants, where the row is scanned
        rather than read and the list is a control rather than a page. `shape.row` keeps the
        command's corner proportional to its own height, so its highlight nests in the tighter
        sheet the menu is. */
-    command: /* @__PURE__ */ cx("flex w-full items-center gap-3 px-3 py-2 text-start outline-none", type.control.compact, shape.row, motionFeedback, focusRingInset, text.high, stateLayer.quiet, stateLayer.activeRow, motionRowLayer, state.effectiveDisabled),
+    command: /* @__PURE__ */ cx("flex w-full items-center gap-3 px-3 py-2 text-start [outline-style:none]", type.control.compact, shape.row, motionFeedback, focusRingInset, text.high, stateLayer.quiet, stateLayer.activeRow, motionRowLayer, state.effectiveDisabled),
 };
 /* A disclosure — one row that opens the region beneath it. An item in an `Accordion` and a
    standalone `Collapsible` are the same object: a stacked row, and the in-flow panel its
@@ -633,13 +703,22 @@ const list = {
    component maps its own primitive's panel variable onto, because the measured geometry is
    anatomy and only the interpolation is temporal. */
 const disclosure = {
-    /* The row: a full-width row in a stacked group, activated like a selectable row. Its own focus
+    /* The chevron of a disclosure row. The row's label is 15px, so the mark takes the normal slot
+       (20px); the row owns the affordance, so the chevron follows the whole row rather than the first
+       line of a wrapping label (§17). */
+    chevron: iconSlot.normal,
+    /* The row: a full-width row in a stacked group, activated like a selectable row. It hangs its 16px
+       inset past both edges of its column (§17), so its label and chevron share the edges of the content
+       beside it and only the fill reaches into the surface's padding. The panel hangs by the same amount,
+       so the label still shares an edge with the panel copy beneath it. Its own focus
        indicator is the shared inset ring, because an offset one drawn outside the row would land on
        the divider or the panel beside it rather than around the row it belongs to — which is the same
        reason a segment inside a track takes the inset form. The chevron the component puts in the
        row is the disclosure's own affordance and turns in place under `motionOrient`. */
-    trigger: /* @__PURE__ */ cx("group [overflow-wrap:anywhere]", list.option, state.enabled),
-    panel: /* @__PURE__ */ cx("h-[var(--sui-disclose-height)] overflow-hidden text-sm leading-7 [overflow-wrap:anywhere]", text.medium, motionDisclose),
+    trigger: /* @__PURE__ */ cx("group -mx-4 flex w-[calc(100%+2rem)] items-center justify-between gap-4 px-4 py-3 text-start [outline-style:none] [overflow-wrap:anywhere]", type.control.normal, shape.control, motionFeedback, focusRingInset, text.high, stateLayer.quiet, stateLayer.activeRow, motionRowLayer, state.effectiveDisabled, state.enabled),
+    /* The panel hangs with the row and pads its copy back in, so its clip leaves the 16px a field's
+       focus ring inside it needs. */
+    panel: /* @__PURE__ */ cx("-mx-4 h-[var(--sui-disclose-height)] overflow-hidden [overflow-wrap:anywhere]", type.body, text.medium, motionDisclose),
 };
 /* Tone hierarchy — the color roles a surface can take, in rising strength:
      text      foreground only, for quiet rows and links.
@@ -702,11 +781,17 @@ const tone = {
         success: "group-data-[checked]:bg-sherick-success group-data-[checked]:text-sherick-on-success",
     },
 };
-/* Current location — where the reader is, as opposed to a value they chose. A navigation row, the
-   current page of a pagination and any other `aria-current` destination hold the role's soft
-   container, full ink and a touch of weight, and stay flat: depth and the stronger selected step
-   belong to held values (`tone.selected` with `elevation.control`). */
-const currentDestination = "bg-sherick-primary-soft text-sherick-ink font-medium";
+/* Current location — where the reader is, as opposed to a value they chose. Both forms stay flat:
+   depth belongs to held values (`tone.selected` with `elevation.control`).
+   - row:     a navigation row on a sheet — the role's soft container, full ink and a touch of weight.
+   - inTrack: a destination inside a recessed track, or the mark of a track's current stage — a
+              pagination's current page, a Stepper's current step. The soft step is the groove's own
+              lightness (1.00:1 in light), so there the fill steps up to `selected` and the label
+              takes the accent: the label, not the fill, says "you are here". */
+const currentDestination = {
+    row: "bg-sherick-primary-soft text-sherick-ink font-medium",
+    inTrack: "bg-sherick-primary-selected text-sherick-primary font-semibold",
+};
 /* Selectable surface — the recessed surface of a control that fills once it is selected: a
    switch track, a checkbox box, a radio circle, a slider groove. Selection is keyed on the
    primitive's own `data-checked` / `data-indeterminate`, so an uncontrolled control is styled
@@ -725,15 +810,12 @@ const puck = "bg-sherick-puck";
 /* A choice row — an opt-in `surface` row in a RadioGroup or CheckboxGroup — rests on the
    `matteHigh` tray, so every choice in the group reads as a target before any is chosen; it stays
    light enough that the empty mark's rim still clears 3:1 against it. The row that holds the
-   selection takes the role's *soft* surface and the accent **selection rim**, and stays flat. The
-   soft surface is lighter than the resting tray, so the tint alone would make the chosen row the
-   quieter of the two; the rim is what says "this one". It is the row's selection mark, not an
-   outline drawn to separate a surface, and it belongs to the selected state only. Like an empty
-   mark's rim it is an overlay rather than a border, so the fill and the hover layer reach the row's
-   real edge, and it is transparent rather than absent at rest, so forced colors keeps every row's
-   outline. The selected step and a lift turned a whole card into an accent block, which outshouted
-   the priority action on the same view. */
-const selectableRowSurface = /* @__PURE__ */ cx("has-[[data-checked]]:bg-sherick-primary-soft has-[[data-checked]]:text-sherick-ink", "after:pointer-events-none after:absolute after:inset-0 after:box-border after:rounded-[inherit] after:border-[1.5px] after:border-transparent after:content-['']", "has-[[data-checked]]:after:border-sherick-primary", motionRim);
+   selection takes the role's *soft* surface and stays flat. The mark it houses is what says "this
+   one": an accent rim around the row repeated it and made the chosen row the loudest object on a
+   quiet form, and the selected step and a lift turned a whole card into an accent block. The
+   transparent overlay stays, so forced colors keeps every row's outline, and the fill and the hover
+   layer still reach the row's real edge. */
+const selectableRowSurface = /* @__PURE__ */ cx("has-[[data-checked]]:bg-sherick-primary-soft has-[[data-checked]]:text-sherick-ink", "after:pointer-events-none after:absolute after:inset-0 after:box-border after:rounded-[inherit] after:border-[1.5px] after:border-transparent after:content-['']");
 /* Supporting copy inside such a row — a choice's description. `text.medium` clears 4.5:1 on the
    soft step at rest (5.7:1 light, 6.2:1 dark), but the row's press layer composites toward the label
    and takes that margin away, so while the row holds the selection its supporting line takes full
@@ -749,7 +831,7 @@ const selectable = {
        does. While the wrapping control is held it sinks to the `well`: the floor darkens and the
        boundary stays exactly where it was, which is how a mark that must not move under the pointer
        answers a press. */
-    markSurface: /* @__PURE__ */ cx("relative", elevation.recessed, "group-[:not([data-disabled]):not([data-readonly]):not(:disabled):active]:shadow-sherick-well", motionFeedback),
+    markSurface: /* @__PURE__ */ cx("relative", elevation.recessed, "group-[:not([data-disabled]):not([data-readonly]):not([aria-disabled=true]):not(:disabled):active]:shadow-sherick-well", motionFeedback),
     /* The resting fill a *groove* holds — a segmented control's track, a tab list — and nothing more.
        A groove that holds labelled segments is identified by those segments, exactly as a tab list is
        identified by its labels, so it takes no boundary of its own. */
@@ -765,7 +847,7 @@ const selectable = {
        recess all reach the mark's real edge: a border would leave a 1.5px frame of untinted fill
        around a hovered selected box. Hover steps the rim to the mid-emphasis tone — darker in light
        mode, lighter in dark — which is a visible answer on a 20px mark where a tint alone is not. */
-    mark: /* @__PURE__ */ cx(markWellFill, text.medium, "after:pointer-events-none after:absolute after:inset-0 after:box-border after:rounded-[inherit] after:border-[1.5px] after:content-['']", "after:border-sherick-rim", "group-[:not([data-disabled]):not([data-readonly]):not(:disabled):hover]:after:border-sherick-ink-muted", motionRim),
+    mark: /* @__PURE__ */ cx(markWellFill, text.medium, "after:pointer-events-none after:absolute after:inset-0 after:box-border after:rounded-[inherit] after:border-[1.5px] after:content-['']", "after:border-sherick-rim", "[@media(hover:hover)_and_(pointer:fine)]:group-[:not([data-disabled]):not([data-readonly]):not(:disabled):hover]:after:border-sherick-ink-muted", motionRim),
     /* A selected mark is the strong accent, edge to edge, and it settles flat: it is identified by
        its fill and its glyph, and the rim fades out as the fill arrives. The rim fades by opacity
        rather than by colour, so forced colors cannot repaint a transparent rim as a visible one. */
@@ -813,6 +895,11 @@ const recipeAlphas = {
         neutralSoft: fillAlpha(tone.soft.secondary, "tint.neutralSoft"),
         neutralRest: fillAlpha(tone.tonal.secondary, "tint.neutralRest"),
     },
+    /* The code well is the `matteHigh` step over the card that holds it, so the contract reads its
+       alpha from the same recipe the CodeBlock renders. */
+    code: {
+        well: fillAlpha(material.matteHigh, "code.well"),
+    },
     field: {
         quiet: fillAlpha(material.matteQuiet, "field.quiet"),
         card: fillAlpha(material.matte, "field.card"),
@@ -826,13 +913,28 @@ const recipeAlphas = {
 };
 /* A labelled field is a shrinkable column. Its explanatory copy wraps, including identifiers;
    the input itself keeps its native single-line scrolling behavior. */
-const fieldLayout = "flex min-w-0 w-full flex-col [overflow-wrap:anywhere]";
+const fieldLayout = "flex min-w-0 w-full flex-col gap-2 [overflow-wrap:anywhere] [&>label+p]:-mt-1";
 /* The messages under a field: its description or hint, and its error. One role for every field in
    the family, so a hint reads the same under a text field, a date range and a file chooser. */
+/* The label above a field: the `label` role at full ink, with the one gap every field family keeps
+   between its name and its control. */
+const fieldLabel = /* @__PURE__ */ cx(type.label, text.high);
+/* The field column owns the gap between its parts (`fieldLayout`), so a label, a control and a
+   message are each eight pixels from the next, and a label that is followed straight by its
+   description takes four through the layout's sibling rule. No part carries its own margin. */
 const fieldMessage = {
-    description: /* @__PURE__ */ cx("mt-2", type.supporting, text.medium),
-    error: /* @__PURE__ */ cx("mt-2", type.supporting, tone.text.danger),
+    description: /* @__PURE__ */ cx(type.supporting, text.medium),
+    error: /* @__PURE__ */ cx(type.supporting, tone.text.danger),
+};
+/* The code well — the quiet recess a code block's lines sit in. It is the canvas showing through the
+   block's own matte shell, so a well reads as sunk into the block on a card and on the page alike. */
+const codeWell = material.matteHigh;
+/* Rich-text accents — content-level emphasis in rendered prose, not structural edges: a quote's rule
+   on its start edge, and a link's underline at rest and under the pointer. */
+const richText = {
+    quoteRule: "border-sherick-primary/[0.45]",
+    linkUnderline: "decoration-sherick-primary/[0.35] hover:decoration-sherick-primary",
 };
 
-export { currentDestination, density, detail, disclosure, edge, edgeTone, elevation, fieldLayout, fieldMessage, focusRing, focusRingDrag, focusRingHeld, focusRingInset, focusRingWithin, groupFocusRing, hitArea, iconSlot, list, material, matteInset, mediaCanvas, overlay, parentFocusRingInset, puck, recessedTop, recipeAlphas, rim, selectable, selectableRowSupporting, selectableRowSurface, shape, stacking, state, stateLayer, stateLayerQuietComposite, text, tone, type };
+export { 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, overlay, parentFocusRingInset, puck, recessedTop, recipeAlphas, richText, rim, selectable, selectableRowSupporting, selectableRowSurface, shape, stacking, state, stateLayer, stateLayerQuietComposite, text, tone, type };
 //# sourceMappingURL=ui.common.js.map