sherick-ui 2.5.0 → 2.7.0

package/dist/cjs/components/ui.common.cjs

@@ -123,10 +123,10 @@ const recessedTop = "shadow-sherick-recessed-top";
    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
+   capsule at their own height — `control` is a quarter 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).
+   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.
    - mark:        a compact square selection mark — a 20px checkbox box. `control` is a role
@@ -149,13 +149,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-[1rem]",
+    control: "rounded-[0.75rem]",
     mark: "rounded-[0.375rem]",
-    row: "rounded-[0.75rem]",
-    prominent: "rounded-[1.25rem]",
-    surface: "rounded-[1.5rem]",
-    sheet: "rounded-[1rem]",
-    expressive: "rounded-[1.75rem]",
+    row: "rounded-[0.5rem]",
+    prominent: "rounded-[1rem]",
+    surface: "rounded-[1.25rem]",
+    sheet: "rounded-[0.75rem]",
+    expressive: "rounded-[1.5rem]",
     pill: "rounded-full",
     circle: "rounded-full",
 };
@@ -181,19 +181,23 @@ const edgeTone = {
    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
+   `rim` tone, tuned to clear 3:1 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 text field's rim is its **baseline**: a line along the bottom edge only, which is the one part
+   of a field's boundary WCAG needs to see at 3:1 — the line the text is written on. The other three
+   sides are transparent, so the field reads as a quiet tray rather than a drawn box, and the
+   field's `control` corner bends the baseline up into a soft lip at each end. The rim is a real
+   border on all four sides: forced colors repaints even a transparent border in a system colour, so
+   a field there keeps its whole outline, 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",
+    field: "border-[1.5px] border-transparent border-b-sherick-rim",
+    fieldError: "border-[1.5px] border-transparent border-b-sherick-danger",
     dashed: /* @__PURE__ */ utils.cx("after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit] after:content-['']", "after:bg-sherick-rim", dashedRimMask, ui_motion.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",
@@ -253,26 +257,29 @@ 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. */
+    /* A field is a tray: the `matteHigh` tone a groove holds, so it reads as a quiet recess in light
+       and a quiet step up in dark, exactly as a segmented control's track does. Engaging it deepens
+       the tray and steps its baseline up to `ink-muted`. An invalid field is the danger tray — the
+       role's soft surface with a danger baseline — because a baseline alone is a thin signal to carry
+       an error on; the tray, the danger placeholder and the field's message carry it together. The
+       soft surface is laid at about half strength, so an error reads as a warm tray rather than a
+       red block, and it holds still under the pointer: its colour is already what it has to say. */
     field: {
-        hover: "hover:bg-sherick-canvas/[0.85] hover:border-sherick-ink-muted",
-        focus: "focus:bg-sherick-canvas focus:border-sherick-ink-muted",
+        hover: "hover:bg-sherick-surface-high/[0.82] hover:border-b-sherick-ink-muted",
+        focus: "focus:bg-sherick-surface-high focus:border-b-sherick-ink-muted",
         /* A composite's engaged tone outranks hover, independent of variant emission order. */
-        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",
+        focusWithin: "[&&]:focus-within:bg-sherick-surface-high [&&]:focus-within:border-b-sherick-ink-muted",
+        engaged: "bg-sherick-surface-high border-b-sherick-ink-muted",
+        errorHover: "hover:bg-sherick-danger-soft/[0.55]",
+        errorFocus: "focus:bg-sherick-danger-soft/[0.55]",
+        errorEngaged: "bg-sherick-danger-soft/[0.55]",
         /* 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]:border-sherick-danger",
-        invalidHover: "data-[invalid]:hover:border-sherick-danger",
-        invalidEngaged: "data-[invalid]:border-sherick-danger",
-        invalidFocusWithin: "[&&]:data-[invalid]:focus-within:border-sherick-danger",
+        invalid: "data-[invalid]:bg-sherick-danger-soft/[0.55] data-[invalid]:border-b-sherick-danger",
+        invalidHover: "data-[invalid]:hover:bg-sherick-danger-soft/[0.55] data-[invalid]:hover:border-b-sherick-danger",
+        invalidEngaged: "data-[invalid]:bg-sherick-danger-soft/[0.55] data-[invalid]:border-b-sherick-danger",
+        invalidFocusWithin: "[&&]:data-[invalid]:focus-within:bg-sherick-danger-soft/[0.55] [&&]:data-[invalid]:focus-within:border-b-sherick-danger",
     },
 };
 /* State layers.
@@ -356,6 +363,13 @@ const stateLayer = {
        keyboard so it can be discovered and announced as unavailable, and a reader still has to see
        which row the navigation is on when it lands there. */
     activeRow: "data-[highlighted]:before:opacity-[0.05]",
+    /* A control that is one part of a field — a combobox's clear and trigger, a number field's
+       steppers, a search field's submit, a date field's calendar glyph. Its target keeps the height
+       the field's row needs, but its surface does not: a hover layer that filled a 44px target painted
+       a column the full height of a 48px field. The layer is a 32px circle centred in whatever target
+       the part has, which leaves the field's own air above and below it and keeps every part in every
+       field the same size under the pointer. */
+    fieldPart: /* @__PURE__ */ utils.cx("relative", stateLayerBase, "before:m-auto before:size-8 before:rounded-full before:bg-current", hoverQuiet, pressQuiet),
 };
 /* Hit area — the interactive region of a control whose visible mark is smaller than a comfortable
    target, drawn outside the layout box so a column, a row gap and the space beside a label are all
@@ -373,10 +387,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. 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`).
+   - control:     the fill every text control shares, plus its placeholder tone. It is a tray in
+                  the `matteHigh` tone a groove holds, so a field and a track are one family. The
+                  tray says "something goes here"; its baseline, not its fill, is what carries the
+                  3:1 boundary (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
@@ -409,7 +423,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-canvas/[0.7] text-sherick-ink placeholder:text-sherick-ink-muted",
+    control: "bg-sherick-surface-high/[0.6] 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
@@ -417,7 +431,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-canvas/[0.7] text-sherick-ink placeholder:text-sherick-danger",
+    controlError: "bg-sherick-danger-soft/[0.55] 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)]",
@@ -445,7 +459,7 @@ const type = {
     },
     supporting: "text-[0.8125rem] leading-5",
     caption: "text-xs leading-4",
-    title: "text-[0.9375rem] leading-[1.375rem] font-semibold",
+    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",
 };
@@ -465,12 +479,13 @@ const density = {
     target: "min-h-11 min-w-11",
     /* A control that is one part of a composite field — the trailing controls a Combobox owns. It
        keeps the floor's height, because it has to sit in the field's row, and takes only the width
-       its glyph needs: the two of them are gripped as one cluster at the field's edge, and two full
-       squares there read as two controls beside a field rather than as parts of it.
+       of its 32px hover surface (`stateLayer.fieldPart`): two parts side by side are gripped as one
+       cluster at the field's edge, their glyphs 12px apart, and any wider step spread a clear control
+       and a chevron into two controls beside a field rather than parts of it.
        The narrower step still clears the 24px pointer-target minimum WCAG AA asks for. It is below
        this system's own 44px floor on purpose: that floor belongs to a control that is the whole
        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",
+    part: "min-h-11 min-w-8",
 };
 /* 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
@@ -509,7 +524,7 @@ const stacking = {
    alert dialog separate from the page identically. */
 const overlay = {
     /* The plane behind a surface that owns the viewport. */
-    scrim: /* @__PURE__ */ utils.cx("fixed inset-0", stacking.float, "bg-sherick-scrim/[0.38] backdrop-blur-[var(--sui-scrim-blur)]"),
+    scrim: /* @__PURE__ */ utils.cx("fixed inset-0", stacking.float, "bg-sherick-scrim/[0.30] backdrop-blur-[var(--sui-scrim-blur)]"),
     /* 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.
@@ -599,6 +614,13 @@ const list = {
        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__ */ utils.cx("flex w-full items-center justify-between gap-4 px-4 py-3 text-start outline-none", type.control.normal, shape.control, ui_motion.motionFeedback, focusRingInset, text.high, stateLayer.quiet, stateLayer.activeRow, ui_motion.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__ */ utils.cx("px-4 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
@@ -694,7 +716,28 @@ const currentDestination = "bg-sherick-primary-soft text-sherick-ink font-medium
 /* 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-selected has-[[data-checked]]:text-sherick-ink has-[[data-checked]]:shadow-sherick-control";
+/* The puck — a held choice that rides in a track: a selected segment, the tab indicator. A choice
+   held *in a groove* is a part lifted out of it, so it is the brightest surface in the view, raised
+   at `elevation.control`, and its label takes the role's text tone (`tone.text`): the lift says
+   "this one" and the label's colour says which family it belongs to. A held choice in a *sheet* —
+   an option, a tree row, a date — keeps `tone.selected`, because a list sheet is already the
+   brightest surface and a white row on it would vanish. */
+const puck = "bg-sherick-puck";
+/* A choice row that holds the selection — an opt-in `surface` row in a RadioGroup or CheckboxGroup —
+   takes the role's *soft* surface and stays flat. The row is a large surface and its mark already
+   carries the strong accent edge to edge, so the row only has to say "this one" quietly: 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 = "has-[[data-checked]]:bg-sherick-primary-soft has-[[data-checked]]:text-sherick-ink";
+/* 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
+   ink; the supporting type step keeps it subordinate to the label. Keyed on the same primitive
+   marker as the surface itself. */
+const selectableRowSupporting = "group-has-[[data-checked]]:text-sherick-ink";
+/* An empty mark's interior: a canvas-toned well. Named on its own so the contrast model can read it
+   without retaining the whole `selectable` table in bundles that never draw a mark. */
+const markWellFill = "bg-sherick-canvas/[0.7]";
 const selectable = {
     surface: /* @__PURE__ */ utils.cx("relative", elevation.recessed, ui_motion.motionFeedback),
     /* A selection mark — a checkbox box, a radio socket — rests in the same groove a Switch track
@@ -717,7 +760,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__ */ utils.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", ui_motion.motionRim),
+    mark: /* @__PURE__ */ utils.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", ui_motion.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. */
@@ -740,13 +783,16 @@ 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|$)/);
+/* A tone's step written with or without an alpha: without one, the step is the opaque tone. */
+const toneAlpha = (tone) => (recipe, label) => {
+    const match = recipe.match(new RegExp(`bg-sherick-${tone}(?:\\/\\[(0?\\.\\d+)\\])?(?:\\s|$)`));
     if (!match)
         throw new Error(`recipe alpha missing for ${label}`);
     return match[1] === undefined ? 1 : Number(match[1]);
 };
+/* A field tray's `surface-high` step, and the canvas step an empty mark's interior holds. */
+const trayAlpha = toneAlpha("surface-high");
+const markAlpha = toneAlpha("canvas");
 const recipeAlphas = {
     state: {
         quiet: { hover: stateAlpha(hoverQuiet, "state.quiet.hover"), press: stateAlpha(pressQuiet, "state.quiet.press") },
@@ -763,9 +809,11 @@ const recipeAlphas = {
         quiet: fillAlpha(material.matteQuiet, "field.quiet"),
         card: fillAlpha(material.matte, "field.card"),
         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"),
+        control: trayAlpha(material.control, "field.control"),
+        hover: trayAlpha(state.field.hover, "field.hover"),
+        engaged: trayAlpha(state.field.engaged, "field.engaged"),
+        mark: markAlpha(markWellFill, "field.mark"),
+        error: fillAlpha(material.controlError, "field.error"),
     },
 };
 /* A labelled field is a shrinkable column. Its explanatory copy wraps, including identifiers;
@@ -801,10 +849,12 @@ exports.matteInset = matteInset;
 exports.mediaCanvas = mediaCanvas;
 exports.overlay = overlay;
 exports.parentFocusRingInset = parentFocusRingInset;
+exports.puck = puck;
 exports.recessedTop = recessedTop;
 exports.recipeAlphas = recipeAlphas;
 exports.rim = rim;
 exports.selectable = selectable;
+exports.selectableRowSupporting = selectableRowSupporting;
 exports.selectableRowSurface = selectableRowSurface;
 exports.shape = shape;
 exports.stacking = stacking;