sherick-ui 2.7.1 → 2.9.0

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

@@ -11,16 +11,18 @@ var ui_motion = require('./ui.motion.cjs');
 
      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
@@ -127,8 +129,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
@@ -177,27 +179,27 @@ 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
+/* Rim — the boundary of a *hollow* control: the file drop target, or an empty checkbox or radio.
+   Nothing inside such a control says what it is — an empty mark holds nothing, a drop target only
+   an invitation — 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 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.
-   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 text field is not hollow: its label names it, and its value or placeholder and its parts — a
+   chevron, a calendar glyph, a stepper — show what it is and where it is, which is how WCAG 1.4.11
+   lets a control be identified without a 3:1 edge. Its tray says "something goes here", and its
+   states ride on the tray and the focus ring (`state.field`). `rim.field` is therefore no visible
+   line: it is a transparent border on all four sides, because forced colors repaints even a
+   transparent border in a system colour, so a field there keeps its whole outline where the tray is
+   discarded; the scoped baseline sizes boxes by their border edge, so it never changes a field's
+   footprint. An invalid field takes the same transparent border.
    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-transparent border-b-sherick-rim",
-    fieldError: "border-[1.5px] border-transparent border-b-sherick-danger",
+    field: "border-[1.5px] border-transparent",
     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",
@@ -252,34 +254,35 @@ const state = {
     text: "cursor-text",
     /* 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. */
-    /* 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. */
+    /* 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.
+       The pointer sinks it to the deep tray, and so does engagement — focus or an open popup — where
+       the focus ring is what says "this one is engaged"; an engaged field never falls back under the
+       pointer, because both states share the step. An invalid field is the danger tray — the role's
+       soft surface, at full strength like the neutral tray — and it holds still under the pointer:
+       its colour is already what it has to say, and the danger placeholder and the field's message
+       carry the error in words. */
     field: {
-        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",
+        hover: "hover:bg-sherick-tray-deep",
+        focus: "focus:bg-sherick-tray-deep",
         /* A composite's engaged tone outranks hover, independent of variant emission order. */
-        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]",
+        focusWithin: "[&&]:focus-within:bg-sherick-tray-deep",
+        engaged: "bg-sherick-tray-deep",
+        errorHover: "hover:bg-sherick-danger-soft",
+        errorFocus: "focus:bg-sherick-danger-soft",
+        errorEngaged: "bg-sherick-danger-soft",
         /* 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-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",
+        invalid: "data-[invalid]:bg-sherick-danger-soft",
+        invalidHover: "data-[invalid]:hover:bg-sherick-danger-soft",
+        invalidEngaged: "data-[invalid]:bg-sherick-danger-soft",
+        invalidFocusWithin: "[&&]:data-[invalid]:focus-within:bg-sherick-danger-soft",
     },
 };
 /* State layers.
@@ -387,10 +390,9 @@ 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 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`).
+   - control:     the fill every text control shares, plus its placeholder tone: an opaque tray
+                  in the `surface-high` tone. The tray says "something goes here"; the field's
+                  label and content, not a drawn edge, are what identify 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
@@ -423,15 +425,15 @@ 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.6] text-sherick-ink placeholder:text-sherick-ink-muted",
+    control: "bg-sherick-surface-high 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
-       measured 2.8–3.0:1 light and 3.4–3.9:1 dark on this fill, while the token it was mixed from
+       measured 2.8–3.0:1 light and 3.4–3.9:1 dark on the half-strength danger tray, while the token it was mixed from
        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-soft/[0.55] text-sherick-ink placeholder:text-sherick-danger",
+    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)]",
@@ -445,9 +447,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. */
@@ -457,9 +467,11 @@ const type = {
         normal: "text-[0.9375rem] leading-[1.375rem]",
         prominent: "text-lg",
     },
+    label: "text-sm leading-5 font-medium",
+    body: "text-sm leading-6",
     supporting: "text-[0.8125rem] leading-5",
     caption: "text-xs leading-4",
-    title: "text-[0.9375rem] leading-[1.375rem] font-semibold tracking-[-0.011em]",
+    title: "text-base leading-6 font-semibold tracking-[-0.011em]",
     heading: "text-xl leading-7 font-semibold tracking-[-0.02em]",
     numeric: "tabular-nums",
 };
@@ -498,6 +510,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
@@ -613,14 +638,17 @@ 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__ */ 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 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__ */ utils.cx("flex w-full items-center justify-between gap-4 px-3 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),
+    groupLabel: /* @__PURE__ */ utils.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
@@ -634,13 +662,15 @@ 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 row: a full-width row in a stacked group, activated like a selectable row. It is an option
+       row at the 16px inset of the surface it usually sits on directly — no sheet inset precedes it —
+       so its label 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__ */ utils.cx("group [overflow-wrap:anywhere]", list.option, state.enabled),
-    panel: /* @__PURE__ */ utils.cx("h-[var(--sui-disclose-height)] overflow-hidden text-sm leading-7 [overflow-wrap:anywhere]", text.medium, ui_motion.motionDisclose),
+    trigger: /* @__PURE__ */ utils.cx("group flex w-full items-center justify-between gap-4 px-4 py-3 text-start outline-none [overflow-wrap:anywhere]", type.control.normal, shape.control, ui_motion.motionFeedback, focusRingInset, text.high, stateLayer.quiet, stateLayer.activeRow, ui_motion.motionRowLayer, state.effectiveDisabled, state.enabled),
+    panel: /* @__PURE__ */ utils.cx("h-[var(--sui-disclose-height)] overflow-hidden [overflow-wrap:anywhere]", type.body, text.medium, ui_motion.motionDisclose),
 };
 /* Tone hierarchy — the color roles a surface can take, in rising strength:
      text      foreground only, for quiet rows and links.
@@ -703,11 +733,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
@@ -723,12 +759,18 @@ const currentDestination = "bg-sherick-primary-soft text-sherick-ink font-medium
    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";
+/* 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__ */ utils.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", ui_motion.motionRim);
 /* 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
@@ -790,8 +832,11 @@ const toneAlpha = (tone) => (recipe, label) => {
         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. */
+/* A field tray's `surface-high` step, its deep step, its danger step, and the canvas step an empty
+   mark's interior holds. */
 const trayAlpha = toneAlpha("surface-high");
+const deepTrayAlpha = toneAlpha("tray-deep");
+const dangerTrayAlpha = toneAlpha("danger-soft");
 const markAlpha = toneAlpha("canvas");
 const recipeAlphas = {
     state: {
@@ -810,10 +855,10 @@ const recipeAlphas = {
         card: fillAlpha(material.matte, "field.card"),
         groove: fillAlpha(material.matteHigh, "field.groove"),
         control: trayAlpha(material.control, "field.control"),
-        hover: trayAlpha(state.field.hover, "field.hover"),
-        engaged: trayAlpha(state.field.engaged, "field.engaged"),
+        hover: deepTrayAlpha(state.field.hover, "field.hover"),
+        engaged: deepTrayAlpha(state.field.engaged, "field.engaged"),
         mark: markAlpha(markWellFill, "field.mark"),
-        error: fillAlpha(material.controlError, "field.error"),
+        error: dangerTrayAlpha(material.controlError, "field.error"),
     },
 };
 /* A labelled field is a shrinkable column. Its explanatory copy wraps, including identifiers;
@@ -821,11 +866,24 @@ const recipeAlphas = {
 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. */
+/* 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__ */ utils.cx("mb-2", type.label, text.high);
 const fieldMessage = {
     description: /* @__PURE__ */ utils.cx("mt-2", type.supporting, text.medium),
     error: /* @__PURE__ */ utils.cx("mt-2", 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 = "bg-sherick-canvas/[0.28]";
+/* 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",
+};
 
+exports.codeWell = codeWell;
 exports.currentDestination = currentDestination;
 exports.density = density;
 exports.detail = detail;
@@ -833,6 +891,7 @@ exports.disclosure = disclosure;
 exports.edge = edge;
 exports.edgeTone = edgeTone;
 exports.elevation = elevation;
+exports.fieldLabel = fieldLabel;
 exports.fieldLayout = fieldLayout;
 exports.fieldMessage = fieldMessage;
 exports.focusRing = focusRing;
@@ -843,6 +902,7 @@ exports.focusRingWithin = focusRingWithin;
 exports.groupFocusRing = groupFocusRing;
 exports.hitArea = hitArea;
 exports.iconSlot = iconSlot;
+exports.iconStroke = iconStroke;
 exports.list = list;
 exports.material = material;
 exports.matteInset = matteInset;
@@ -852,6 +912,7 @@ exports.parentFocusRingInset = parentFocusRingInset;
 exports.puck = puck;
 exports.recessedTop = recessedTop;
 exports.recipeAlphas = recipeAlphas;
+exports.richText = richText;
 exports.rim = rim;
 exports.selectable = selectable;
 exports.selectableRowSupporting = selectableRowSupporting;