sherick-ui 2.2.0 → 2.4.0

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

@@ -1,5 +1,5 @@
 import { cx } from '../libs/utils.js';
-import { motionFeedback, motionStateLayer, motionDisclose } from './ui.motion.js';
+import { motionRim, motionFeedback, motionRowLayer, motionStateLayer, motionDisclose } from './ui.motion.js';
 
 /* Sherick UI design primitives
    ==========================================================================
@@ -109,21 +109,28 @@ const elevation = {
     floating: "shadow-sherick-floating",
     control: "shadow-sherick-control",
     recessed: "shadow-sherick-recessed",
-    /* One rung further down: the well of a mark the size of a glyph, whose whole identity is its
-       depth. A wide groove reads from its fill; a 24px well has no fill step to spare, so one wall
-       of the well is deepened and that boundary is what says what it is. See `selectable.markSurface`. */
+    /* One rung further down: the depth a small selection mark sinks to while it is held. A mark
+       rests in the ordinary groove; this is its press, never its identity. See
+       `selectable.markSurface`. */
     well: "shadow-sherick-well",
 };
 /* An inset sheet's shaded upper wall, without a lower rim. Kept independent so
    unrelated components do not bundle this recipe. */
 const recessedTop = "shadow-sherick-recessed-top";
 /* Shape — semantic corner roles, never an arbitrary radius. Softness grows with
-   the size of the object and the emphasis it carries:
+   the size of the object and the emphasis it carries, and silhouette says what an object does:
+   a **capsule acts** (buttons, chips, badges, toggles are `pill`) and a **rounded rectangle
+   holds** (fields, alerts, tables, sheets). Container roles therefore stay clearly short of a
+   capsule at their own height — `control` is a third of a 48px field — so a field never reads as
+   an almost-button beside a real one. Nested roles stay concentric: an inner corner is the outer
+   corner minus the inset between them (a 20px track around a 16px indicator at 4px, a 24px list
+   sheet around 16px options at 8px).
    - control:     ordinary controls and dense data regions — fields, rows, options,
                   chips, tables.
-   - mark:        a compact square selection mark — a checkbox box. `control` is a role
+   - 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
-                  24px square, so a mark needs a step of its own.
+                  20px square, so a mark needs a step of its own — a corner under a third of
+                  its side, so the box stays a rounded square and never reads as a radio.
    - row:         a row at command density — a row in a list that is scanned rather than
                   read holds a corner proportional to its own height, because `control`
                   would reach a 36px row's half-extent and read as a capsule.
@@ -140,13 +147,13 @@ const recessedTop = "shadow-sherick-recessed-top";
    - pill:        fully rounded controls whose width follows their content.
    - circle:      fully rounded square targets. */
 const shape = {
-    control: "rounded-[1.25rem]",
-    mark: "rounded-[0.625rem]",
-    row: "rounded-[0.875rem]",
-    prominent: "rounded-[1.5rem]",
-    surface: "rounded-[1.75rem]",
-    sheet: "rounded-[1.25rem]",
-    expressive: "rounded-[2rem]",
+    control: "rounded-[1rem]",
+    mark: "rounded-[0.375rem]",
+    row: "rounded-[0.75rem]",
+    prominent: "rounded-[1.25rem]",
+    surface: "rounded-[1.5rem]",
+    sheet: "rounded-[1rem]",
+    expressive: "rounded-[1.75rem]",
     pill: "rounded-full",
     circle: "rounded-full",
 };
@@ -168,6 +175,28 @@ const edgeTone = {
     header: "border-sherick-edge/[0.10]",
     rule: "border-sherick-edge/[0.075]",
 };
+/* Rim — the boundary of a *hollow* control: a text field, or an empty checkbox or radio. Nothing
+   inside such a control says what it is — an empty field holds at most a placeholder, an empty mark
+   holds nothing — and it still has to be identifiable at 3:1, which no neutral fill step and no
+   depth the light model can draw achieves on its own. So a hollow control carries one rim in the
+   `rim` tone, tuned to clear 3:1 on every surface by a small margin and no more, and that rim is
+   the only border a control has. A filled control — a button, a chip, a selected mark — is identified by its fill and
+   never carries one.
+   The field rim is a real border: forced colors repaints a border in a system colour, where it
+   would remove an inset shadow, and the scoped baseline sizes boxes by their border edge, so the
+   rim never changes a field's footprint. Its states ride on the field ladder in `state.field`.
+   A drop target's rim is dashed, and the dashes are a mask over an overlay rather than the native
+   `dashed` style, whose dash length and corner joins the platform decides: the mask fixes the dash
+   rhythm and follows the `control` corner exactly. The mask is authored in `tokens.ts`. */
+const dashedRimMask = "after:[mask-image:var(--sui-rim-dashed)] after:[mask-size:100%_100%] after:[mask-repeat:no-repeat]";
+const rim = {
+    field: "border-[1.5px] border-sherick-rim",
+    fieldError: "border-[1.5px] border-sherick-danger",
+    dashed: /* @__PURE__ */ cx("after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit] after:content-['']", "after:bg-sherick-rim", dashedRimMask, motionRim),
+    /* The dashes step up under the pointer and take the primary tone while a file is held over them. */
+    dashedHover: "hover:after:bg-sherick-ink-muted",
+    dashedDragging: "data-[dragging]:after:bg-sherick-primary",
+};
 const edge = {
     /* Rows of a stacked list or table. */
     row: /* @__PURE__ */ cx("border-b", edgeTone.row, "last:border-b-0"),
@@ -222,22 +251,26 @@ const state = {
        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. */
+    /* A field is a well: its fill sits below the surface around it, and engaging it sinks it further
+       while its rim steps up. An invalid field is the same well with a danger rim: the rim, the
+       danger placeholder and the field's message carry the error, so the fill never trades its
+       depth for a tinted wash. The error steps keep the well's depth ladder and leave the rim alone. */
     field: {
-        hover: "hover:bg-sherick-surface-high/[0.82]",
-        focus: "focus:bg-sherick-surface-high/[0.9]",
+        hover: "hover:bg-sherick-canvas/[0.85] hover:border-sherick-ink-muted",
+        focus: "focus:bg-sherick-canvas focus:border-sherick-ink-muted",
         /* A composite's engaged tone outranks hover, independent of variant emission order. */
-        focusWithin: "[&&]:focus-within:bg-sherick-surface-high/[0.9]",
-        engaged: "bg-sherick-surface-high/[0.9]",
-        errorHover: "hover:bg-sherick-danger/[0.10]",
-        errorFocus: "focus:bg-sherick-danger/[0.13]",
-        errorEngaged: "bg-sherick-danger/[0.13]",
+        focusWithin: "[&&]:focus-within:bg-sherick-canvas [&&]:focus-within:border-sherick-ink-muted",
+        engaged: "bg-sherick-canvas border-sherick-ink-muted",
+        errorHover: "hover:bg-sherick-canvas/[0.85]",
+        errorFocus: "focus:bg-sherick-canvas",
+        errorEngaged: "bg-sherick-canvas",
         /* The error ladder again, keyed on Base UI's validity attribute for a part that learns its
            validity from the field it sits in. Two variants outrank the single-variant ladder above,
            so neither ladder has to be conditional. */
-        invalid: "data-[invalid]:bg-sherick-danger/[0.075]",
-        invalidHover: "data-[invalid]:hover:bg-sherick-danger/[0.10]",
-        invalidEngaged: "data-[invalid]:bg-sherick-danger/[0.13]",
-        invalidFocusWithin: "[&&]:data-[invalid]:focus-within:bg-sherick-danger/[0.13]",
+        invalid: "data-[invalid]:border-sherick-danger",
+        invalidHover: "data-[invalid]:hover:border-sherick-danger",
+        invalidEngaged: "data-[invalid]:border-sherick-danger",
+        invalidFocusWithin: "[&&]:data-[invalid]:focus-within:border-sherick-danger",
     },
 };
 /* State layers.
@@ -276,8 +309,19 @@ const hoverFilled = "[&:not([data-disabled]):not(:disabled)]:hover:before:opacit
 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]";
+/* 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]";
+/* 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]";
 /* 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. */
@@ -289,12 +333,17 @@ const stateLayer = {
        on-color (`current`) carries the state at a light step. Shared by every matte
        control with a fill — tonal buttons, icon buttons, acrylic buttons. */
     tonal: /* @__PURE__ */ cx("relative", stateLayerBase, "before:rounded-[inherit] before:bg-current", hoverTonal, pressTonal),
+    /* The same layer for a neutral (`secondary`) tonal fill, with the lighter press. */
+    tonalNeutral: /* @__PURE__ */ cx("relative", stateLayerBase, "before:rounded-[inherit] before:bg-current", hoverTonal, pressTonalNeutral),
     /* Opaque fills: `current` is the fill's own on-color — the color furthest from it in
        either theme — so one step reads on a saturated blue and a neutral gray alike. */
     filled: /* @__PURE__ */ cx("relative", stateLayerBase, "before:rounded-[inherit] before:bg-current", hoverFilled, pressFilled),
     /* A switch track or a selection well: the same layer, but hover and press arrive from the
        wrapping control rather than from the surface itself. */
     track: /* @__PURE__ */ cx(stateLayerBase, "before:rounded-[inherit] before:bg-current", hoverTrack, pressTrack),
+    /* A checkbox box or a radio socket: the hover arrives from the wrapping control, at the light
+       tonal step, and the press is carried by the well's own depth rather than by this layer. */
+    mark: /* @__PURE__ */ cx(stateLayerBase, "before:rounded-[inherit] before:bg-current", hoverMark),
     /* A row highlighted by keyboard or pointer navigation. Base UI collection primitives expose
        `data-highlighted`; this is the one canonical visual treatment for it, and it pairs with a
        row's own `quiet` layer — the row carries both, so a highlighted row and a hovered row are the
@@ -322,7 +371,10 @@ const hitArea = "relative after:pointer-events-auto after:absolute after:inset-[
    - matteHigh:   the second matte step, for nesting inside another matte surface.
    - matteInset:  a passive sheet tucked under a stronger control; subdued without
                   blending into the canvas or needing a drawn rim.
-   - control:     the fill every text control shares, plus its placeholder tone.
+   - control:     the fill every text control shares, plus its placeholder tone. It is a well:
+                  the canvas tone, which sits below a card in both themes, so a field reads as
+                  sunk into the surface rather than as a pad raised from it. Its rim, not its
+                  fill, is what separates it (see `rim`).
    - handle:      the fill of a small part the user has to find — a value control's handle.
                   Surface steps sit within a few percent of their neighbours, so this role
                   takes the mid-emphasis tone, which inverts with the theme and separates in
@@ -355,7 +407,7 @@ const material = {
     matteQuiet: "bg-sherick-surface/[0.42] text-sherick-ink",
     matte: "bg-sherick-surface/[0.78] text-sherick-ink",
     matteHigh: "bg-sherick-surface-high/[0.72] text-sherick-ink",
-    control: "bg-sherick-surface-high/[0.66] text-sherick-ink placeholder:text-sherick-ink-muted",
+    control: "bg-sherick-canvas/[0.7] text-sherick-ink placeholder:text-sherick-ink-muted",
     /* The invalid fill carries its placeholder at the *full* danger tone, not at a fraction of it. A
        placeholder is text, so it answers to the same 4.5:1 the copy beside it does, and a partial
        opacity of an accent is a different colour from the accent: the 72%-opacity placeholder
@@ -363,7 +415,7 @@ const material = {
        measures 4.1–4.7:1 light and 5.2–6.2:1 dark on it. There is no dimmer step of a semantic tone
        that is still readable, and a normal field's placeholder is `ink-muted` at full strength
        already — so the error form is the same rule, in the tone the field is in. */
-    controlError: "bg-sherick-danger/[0.075] text-sherick-ink placeholder:text-sherick-danger",
+    controlError: "bg-sherick-canvas/[0.7] 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)]",
@@ -373,17 +425,40 @@ const material = {
 const mediaCanvas = "bg-sherick-media";
 /* A passive sheet tucked below a stronger control; independently tree-shakeable. */
 const matteInset = "bg-sherick-surface-high/[0.35] text-sherick-ink";
+/* Type roles — the recurring kinds of text the library sets, each with one size, line height and,
+   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.
+   - 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.
+   - 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. */
+const type = {
+    control: {
+        compact: "text-sm",
+        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",
+    heading: "text-xl leading-7 font-semibold tracking-[-0.02em]",
+    numeric: "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
    rhythm. A component's anatomy owns its padding: a button's inline padding is
    set by how it is gripped, a field's by how much text it holds, and neither is
-   derived from the other. The library targets dense desktop and product UI, so
-   even the prominent step stays compact. Body copy, headings and labels are
-   content, not controls, and set their own type. */
+   derived from the other. The default step is comfortable rather than dense: a
+   48px control is Sherick's resting proportion, and `compact` is the step for
+   dense product regions. Body copy, headings and labels are content, not
+   controls, and take a type role above. */
 const density = {
-    compact: "min-h-10 text-sm",
-    normal: "min-h-12 text-[0.95rem]",
-    prominent: "min-h-14 text-lg",
+    compact: /* @__PURE__ */ cx("min-h-10", type.control.compact),
+    normal: /* @__PURE__ */ cx("min-h-12", type.control.normal),
+    prominent: /* @__PURE__ */ cx("min-h-14", type.control.prominent),
     /* Minimum interactive target for an icon-only control that stands on its own. */
     target: "min-h-11 min-w-11",
     /* A control that is one part of a composite field — the trailing controls a Combobox owns. It
@@ -395,6 +470,17 @@ const density = {
        target of its own action, and this one is a part of a field the pointer is already in. */
     part: "min-h-11 min-w-9",
 };
+/* Icon slot — the fixed box a leading or trailing mark occupies, sized by the type step it sits
+   beside so the icon-to-label ratio is the same at every size: a 14px label takes a 16px mark, a
+   15px label a 20px mark, an 18px label a 24px mark, and a 12px caption a 14px mark. The box, not
+   the artwork's own whitespace, is what aligns with the label, and a spinner that replaces the icon
+   lands in the same box. */
+const iconSlot = {
+    caption: "inline-flex size-3.5 shrink-0 items-center justify-center [&>svg]:size-3.5",
+    compact: "inline-flex size-4 shrink-0 items-center justify-center [&>svg]:size-4",
+    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",
+};
 /* 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
@@ -510,12 +596,12 @@ 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 text-sm outline-none", shape.control, motionFeedback, focusRingInset, text.high, stateLayer.quiet, stateLayer.activeRow, state.effectiveDisabled),
+    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 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 text-sm outline-none", shape.row, motionFeedback, focusRingInset, text.high, stateLayer.quiet, stateLayer.activeRow, state.effectiveDisabled),
+    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),
 };
 /* 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
@@ -536,11 +622,14 @@ const disclosure = {
      text      foreground only, for quiet rows and links.
      soft      a de-emphasised tinted surface: alerts, badges, quiet cards.
      tonal     a matte control fill at rest: tonal buttons, icon buttons.
-     selected  the fill a selected control holds: menu options, navigation, the
-               selected segment of a segmented control.
+     selected  the fill a selected control holds: options, segments, calendar days, tree rows.
      strong    the opaque accent fill that marks priority.
-   A fill step is composited over whatever sits beneath it, so one tone reads
-   correctly on the canvas, inside a card and on an acrylic sheet. */
+   The semantic soft and selected steps are the role's own authored surfaces (`--sui-<role>-soft`,
+   `--sui-<role>-selected`), not a fraction of its foreground: the foreground is tuned for text
+   contrast, and a fraction of it is a greyed version of the hue. They are opaque, so one tone reads
+   the same on the canvas, inside a card and on an acrylic sheet. The neutral soft step is a step
+   *within* whatever holds it rather than the card fill itself, so a neutral badge or tag stays
+   visible inside a card. */
 const tone = {
     text: {
         primary: "text-sherick-primary",
@@ -550,25 +639,25 @@ const tone = {
         success: "text-sherick-success",
     },
     soft: {
-        primary: "bg-sherick-primary/[0.12] text-sherick-primary",
-        secondary: "bg-sherick-surface/[0.78] text-sherick-ink",
-        danger: "bg-sherick-danger/[0.09] text-sherick-danger",
-        warning: "bg-sherick-warning/[0.09] text-sherick-warning",
-        success: "bg-sherick-success/[0.09] text-sherick-success",
+        primary: "bg-sherick-primary-soft text-sherick-primary",
+        secondary: "bg-sherick-surface-high/[0.72] text-sherick-ink",
+        danger: "bg-sherick-danger-soft text-sherick-danger",
+        warning: "bg-sherick-warning-soft text-sherick-warning",
+        success: "bg-sherick-success-soft text-sherick-success",
     },
     tonal: {
-        primary: "bg-sherick-primary/[0.12]",
+        primary: "bg-sherick-primary-soft",
         secondary: "bg-sherick-surface-high/[0.56]",
-        danger: "bg-sherick-danger/[0.09]",
-        warning: "bg-sherick-warning/[0.09]",
-        success: "bg-sherick-success/[0.09]",
+        danger: "bg-sherick-danger-soft",
+        warning: "bg-sherick-warning-soft",
+        success: "bg-sherick-success-soft",
     },
     selected: {
-        primary: "bg-sherick-primary/[0.22] text-sherick-ink",
+        primary: "bg-sherick-primary-selected text-sherick-ink",
         secondary: "bg-sherick-surface-high/[0.82] text-sherick-ink",
-        danger: "bg-sherick-danger/[0.16] text-sherick-ink",
-        warning: "bg-sherick-warning/[0.16] text-sherick-ink",
-        success: "bg-sherick-success/[0.16] text-sherick-ink",
+        danger: "bg-sherick-danger-selected text-sherick-ink",
+        warning: "bg-sherick-warning-selected text-sherick-ink",
+        success: "bg-sherick-success-selected text-sherick-ink",
     },
     strong: {
         primary: "bg-sherick-primary-strong text-sherick-on-primary",
@@ -590,6 +679,11 @@ 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";
 /* 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
@@ -598,30 +692,38 @@ const tone = {
 /* A radio's opt-in full row follows the Base control it labels. `:has` keeps uncontrolled
    selection authoritative at the primitive rather than mirroring it in component state.
    Keep this independent so unrelated consumers of the mark recipes can tree-shake it. */
-const selectableRowSurface = "has-[[data-checked]]:bg-sherick-primary/[0.22] has-[[data-checked]]:text-sherick-ink has-[[data-checked]]:shadow-sherick-control";
+const selectableRowSurface = "has-[[data-checked]]:bg-sherick-primary-selected has-[[data-checked]]:text-sherick-ink has-[[data-checked]]:shadow-sherick-control";
 const selectable = {
     surface: /* @__PURE__ */ cx("relative", elevation.recessed, motionFeedback),
-    /* The same object one rung deeper, for a mark whose identity is its depth. */
-    markSurface: /* @__PURE__ */ cx("relative", elevation.well, motionFeedback),
+    /* A selection mark — a checkbox box, a radio socket — rests in the same groove a Switch track
+       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),
     /* 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. */
     rest: /* @__PURE__ */ cx(material.matteHigh, text.medium),
-    /* An *empty mark* — an unchecked box, an unselected radio — is the one thing in the family with
-       no content at all: nothing inside it says what it is. It takes the fill a `Switch`'s track takes,
-       so the interior is a surface rather than a hole, but that *cannot* be what identifies it: the
-       tightest neutral step this palette has measures about 1.3:1 against the surface around it, where
-       WCAG asks 3:1.
-       So the mark is **sunk deeper** instead — `markSurface` — and its depth is what identifies it:
-       one wall deepened a rung further than `recessed` draws it (the shaded wall above in light mode,
-       the lit wall below in dark mode), which is the same light the whole system is built from. See
-       the elevation recipes in `tokens.ts`, and §5 of the design language. No rim: a stroke tracing
-       all four sides of a matte control is not part of this language, and the mark now reads as the
-       switch's own well does, only deeper. */
-    mark: /* @__PURE__ */ cx("bg-sherick-surface-high", text.medium),
-    /* A filled mark is identified by its own fill. */
-    selected: "group-data-[checked]:bg-sherick-primary-strong group-data-[checked]:text-sherick-on-primary",
-    indeterminate: "group-data-[indeterminate]:bg-sherick-primary-strong group-data-[indeterminate]:text-sherick-on-primary",
+    /* An *empty mark* — an unchecked box, an unselected radio — is a hollow control: nothing inside it
+       says what it is, and it still has to be identifiable at 3:1. Neither the neutral fill (about
+       1.3:1 against the surface around it) nor any depth the light model can draw gets it there
+       without turning the mark into a shaded orb. So an empty mark is the one control that carries
+       a **rim**: the `rim` tone, tuned to just clear 3:1 on every surface, drawn as the lip of the
+       recess it sits in rather than as an outline over a filled control. The rim belongs to the empty
+       state only — a selected mark is identified by its fill, and the rim dissolves into it.
+       The rim is an overlay rather than the mark's own border, so the fill, the hover layer and the
+       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("bg-sherick-canvas/[0.7]", 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),
+    /* 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. */
+    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",
+    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",
+    /* A selected radio's dot: the socket's on-colour, flat. A Switch thumb is lifted because it is a
+       24px part the user moves; an 8px dot under the same shadow reads as a bead with a halo. */
+    thumb: "bg-current",
 };
 /* The authored alphas the contrast contract measures. They are derived from the class names above
    rather than restated, so a change to a state step, a tint strength or the field ladder moves the
@@ -636,41 +738,43 @@ const recipeAlpha = (recipe, pattern, label) => {
 };
 const stateAlpha = (recipe, label) => recipeAlpha(recipe, /opacity-\[(0?\.\d+)\]/, label);
 const fillAlpha = (recipe, label) => recipeAlpha(recipe, /\/\[(0?\.\d+)\]/, label);
+/* A field well's canvas step: written without an alpha, the step is the opaque canvas. */
+const wellAlpha = (recipe, label) => {
+    const match = recipe.match(/bg-sherick-canvas(?:\/\[(0?\.\d+)\])?(?:\s|$)/);
+    if (!match)
+        throw new Error(`recipe alpha missing for ${label}`);
+    return match[1] === undefined ? 1 : Number(match[1]);
+};
 const recipeAlphas = {
     state: {
         quiet: { hover: stateAlpha(hoverQuiet, "state.quiet.hover"), press: stateAlpha(pressQuiet, "state.quiet.press") },
         tonal: { hover: stateAlpha(hoverTonal, "state.tonal.hover"), press: stateAlpha(pressTonal, "state.tonal.press") },
+        tonalNeutral: { hover: stateAlpha(hoverTonal, "state.tonalNeutral.hover"), press: stateAlpha(pressTonalNeutral, "state.tonalNeutral.press") },
         filled: { hover: stateAlpha(hoverFilled, "state.filled.hover"), press: stateAlpha(pressFilled, "state.filled.press") },
+        mark: { hover: stateAlpha(hoverMark, "state.mark.hover") },
     },
     tint: {
-        soft: {
-            primary: fillAlpha(tone.soft.primary, "tint.soft.primary"),
-            danger: fillAlpha(tone.soft.danger, "tint.soft.danger"),
-            warning: fillAlpha(tone.soft.warning, "tint.soft.warning"),
-            success: fillAlpha(tone.soft.success, "tint.soft.success"),
-        },
-        selected: {
-            primary: fillAlpha(tone.selected.primary, "tint.selected.primary"),
-            danger: fillAlpha(tone.selected.danger, "tint.selected.danger"),
-            warning: fillAlpha(tone.selected.warning, "tint.selected.warning"),
-            success: fillAlpha(tone.selected.success, "tint.selected.success"),
-        },
+        neutralSoft: fillAlpha(tone.soft.secondary, "tint.neutralSoft"),
         neutralRest: fillAlpha(tone.tonal.secondary, "tint.neutralRest"),
     },
     field: {
         quiet: fillAlpha(material.matteQuiet, "field.quiet"),
         card: fillAlpha(material.matte, "field.card"),
-        control: fillAlpha(material.control, "field.control"),
-        hover: fillAlpha(state.field.hover, "field.hover"),
-        engaged: fillAlpha(state.field.engaged, "field.engaged"),
-        invalid: fillAlpha(state.field.invalid, "field.invalid"),
-        invalidHover: fillAlpha(state.field.invalidHover, "field.invalidHover"),
-        invalidFocus: fillAlpha(state.field.invalidFocusWithin, "field.invalidFocus"),
+        groove: fillAlpha(material.matteHigh, "field.groove"),
+        control: wellAlpha(material.control, "field.control"),
+        hover: wellAlpha(state.field.hover, "field.hover"),
+        engaged: wellAlpha(state.field.engaged, "field.engaged"),
     },
 };
 /* 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]";
+/* 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. */
+const fieldMessage = {
+    description: /* @__PURE__ */ cx("mt-2", type.supporting, text.medium),
+    error: /* @__PURE__ */ cx("mt-2", type.supporting, tone.text.danger),
+};
 
-export { density, detail, disclosure, edge, edgeTone, elevation, fieldLayout, focusRing, focusRingDrag, focusRingHeld, focusRingInset, focusRingWithin, groupFocusRing, hitArea, list, material, matteInset, mediaCanvas, overlay, parentFocusRingInset, recessedTop, recipeAlphas, selectable, selectableRowSurface, shape, stacking, state, stateLayer, stateLayerQuietComposite, text, tone };
+export { currentDestination, density, detail, disclosure, edge, edgeTone, elevation, fieldLayout, fieldMessage, focusRing, focusRingDrag, focusRingHeld, focusRingInset, focusRingWithin, groupFocusRing, hitArea, iconSlot, list, material, matteInset, mediaCanvas, overlay, parentFocusRingInset, recessedTop, recipeAlphas, rim, selectable, selectableRowSurface, shape, stacking, state, stateLayer, stateLayerQuietComposite, text, tone, type };
 //# sourceMappingURL=ui.common.js.map