@cueplusplus/ui 0.16.0 → 0.18.0

package/dist/system/_style-chip.js

@@ -0,0 +1,143 @@
+//#region src/system/_style-chip.ts
+/**
+* The chip's voice and recipe: its case, tracking and radius, and the share of
+* each tone its fill and its rim take — the console's by default, the style
+* set's choice inside one.
+*
+* Spec 2026-09-26-looks-fidelity §3.6 (R2), F-15. A tinted chip was
+* `bg-<tone>/10 border-<tone>/35 text-<tone>`, mono, uppercase and caps-tracked
+* on the control radius, and under a sans Look it was the most visible console
+* voice left (K44). The four measured Looks each draw their tags differently —
+* kiln's are sentence-case pills at a 12% fill with no rim, porcelain's a 8%
+* fill with no rim on a tighter radius, zine's rimless and 0.1em-tracked — and
+* none of that follows the Look unless the chip reads it. So it reads:
+*
+* - `--cue-style-chip-case`, falling back through `--cue-style-label-case` to
+*   `uppercase`: a chip shouts when the set's captions do, unless the set says
+*   otherwise (kiln's tags are sentence case while its captions are caps);
+* - `--cue-style-chip-tracking`, falling back to each variant's own tracking —
+*   the caps rung for `tinted` and `outline`, `0.06em` for `tag`;
+* - `--cue-style-chip-size`, falling back to each variant's own rung — the
+*   label rung for `tinted` and `outline`, the micro rung for `tag` (`Kbd`
+*   reads it too, from `_style-kbd.ts`);
+* - `--cue-style-chip-radius`, falling back to what `rounded-control` compiles
+*   to — the control rung times the radius scale, resolved at the chip;
+* - `--cue-style-chip-fill` and `--cue-style-chip-edge`, the share of the tone
+*   in the fill and in the rim, falling back to `10%` and `35%`.
+*
+* Every name is optional (spec §3.0, F-3), emitted as `initial` on the shared
+* `[data-style]` reset, so under no set and every set that declines them each
+* reader resolves to exactly what the class it replaced resolved to.
+*
+* **The tone recipe mixes in `oklab`, not the spec's `oklch`.** `bg-accent/10`
+* compiles to `color-mix(in oklab, var(--cue-accent) 10%, transparent)`, and a
+* mix with `transparent` lands on the same colour in either space — but an
+* engine serialises the result in the space it mixed in, so an `oklch` recipe
+* reads `oklch(…)` where the chip read `oklab(…)`, and the fallback would not
+* be the site's value byte for byte. `oklab` is.
+*
+* `neutral` is not here: its fill (`surface-2`) and its rims (`border`,
+* `hair-strong`) are theme roles rather than a share of a tone, and keep their
+* own classes. The hover rims and fills (`/60`, `/20`) stay the tone's own too.
+*
+* **Every entry is a complete literal**, for the reason `_focus-ring.ts` gives
+* at length: Tailwind generates a class only when some source spells it out in
+* one contiguous string, so the per-tone recipe is written out six times and
+* never assembled from the tone's name at runtime.
+*
+* **One module for the chip's own names**, because `Chip` is their only
+* importer: `@repo/docgen` credits every importer with every token in a file,
+* which is why `Kbd`'s read of `--cue-style-chip-size` lives in `_style-kbd.ts`.
+*
+* **Where the size sits decides the line box.** `tailwind-merge` drops a
+* `leading-*` class that a later font-size class follows. The chip's base
+* string carries `leading-none` and its variants the size, so `Chip`'s own
+* `cn()` drops the `leading-none` — exactly as it did when the variants spelt
+* `text-(length:--cue-text-label)` — and a rendered chip's line box is the
+* inherited one. The sizes stay in the variants for that reason: moving them
+* ahead of the base would restore `leading-none` and move every chip.
+*
+* @internal Not part of the public API.
+*/
+const CHIP_CASE = "[text-transform:var(--cue-style-chip-case,var(--cue-style-label-case,uppercase))]";
+/** @see CHIP_CASE — the `tinted` and `outline` variants' size; the label rung by default. */
+const CHIP_SIZE = "text-[length:var(--cue-style-chip-size,var(--cue-text-label))]";
+/** @see CHIP_CASE — the `tag` variant's size; the micro rung by default. */
+const CHIP_SIZE_MICRO = "text-[length:var(--cue-style-chip-size,var(--cue-text-micro))]";
+/** @see CHIP_CASE — the `tinted` and `outline` variants' tracking; the caps rung by default. */
+const CHIP_TRACKING = "tracking-[var(--cue-style-chip-tracking,var(--cue-tracking-caps))]";
+/** @see CHIP_CASE — the `tag` variant's tracking; its own closed `0.06em` by default. */
+const CHIP_TRACKING_TAG = "tracking-[var(--cue-style-chip-tracking,0.06em)]";
+/** @see CHIP_CASE — the chip's radius; what `rounded-control` compiles to by default. */
+const CHIP_RADIUS = "rounded-[var(--cue-style-chip-radius,calc(var(--cue-radius-control)*var(--cue-radius-scale)))]";
+/** @see CHIP_CASE — each tone's fill: `var(--cue-style-chip-fill, 10%)` of the tone over transparent. */
+const CHIP_FILL = {
+	accent: "bg-[color:color-mix(in_oklab,var(--cue-accent)_var(--cue-style-chip-fill,10%),transparent)]",
+	ok: "bg-[color:color-mix(in_oklab,var(--cue-ok)_var(--cue-style-chip-fill,10%),transparent)]",
+	busy: "bg-[color:color-mix(in_oklab,var(--cue-busy)_var(--cue-style-chip-fill,10%),transparent)]",
+	warn: "bg-[color:color-mix(in_oklab,var(--cue-warn)_var(--cue-style-chip-fill,10%),transparent)]",
+	danger: "bg-[color:color-mix(in_oklab,var(--cue-danger)_var(--cue-style-chip-fill,10%),transparent)]",
+	info: "bg-[color:color-mix(in_oklab,var(--cue-info)_var(--cue-style-chip-fill,10%),transparent)]"
+};
+/** @see CHIP_CASE — each tone's rim: `var(--cue-style-chip-edge, 35%)` of the tone over transparent. */
+const CHIP_EDGE = {
+	accent: "border-[color:color-mix(in_oklab,var(--cue-accent)_var(--cue-style-chip-edge,35%),transparent)]",
+	ok: "border-[color:color-mix(in_oklab,var(--cue-ok)_var(--cue-style-chip-edge,35%),transparent)]",
+	busy: "border-[color:color-mix(in_oklab,var(--cue-busy)_var(--cue-style-chip-edge,35%),transparent)]",
+	warn: "border-[color:color-mix(in_oklab,var(--cue-warn)_var(--cue-style-chip-edge,35%),transparent)]",
+	danger: "border-[color:color-mix(in_oklab,var(--cue-danger)_var(--cue-style-chip-edge,35%),transparent)]",
+	info: "border-[color:color-mix(in_oklab,var(--cue-info)_var(--cue-style-chip-edge,35%),transparent)]"
+};
+/**
+* The chip's own height and inline padding (plan V.2, P14):
+* `style-chip-height`, falling back to the `h-chip` rung, and `style-chip-pad`,
+* falling back to the `space-3` the tinted and outline variants pad at (the
+* `tag` variant keeps its `space-2`). Porcelain's chips are 22px on a phone and
+* 18px on a desktop, 3px in — shorter than the `chip-h` rung its key caps
+* share, which is why this is the chip's name and not the rung's.
+*/
+const CHIP_HEIGHT = "h-[var(--cue-style-chip-height,var(--cue-chip-h))]";
+/** @see CHIP_HEIGHT */
+const CHIP_PAD = "px-[var(--cue-style-chip-pad,var(--cue-space-3))]";
+/**
+* The chip's leading (round 6, spec §11, lane R6.T: `style-chip-leading`).
+* stripe.com's tag sets 14px on a 19.6px line, 1.4 (T134). A nowrap, centred
+* chip lays its glyphs in the same place at any leading.
+*
+* Two fallbacks, because the recipe's two users rendered two leadings. The
+* recipe spelled `leading-none`, so `chipVariants()` on a consumer's own
+* element drew a line of 1: {@link CHIP_LEADING}, composed after the size so
+* it survives, falls back to `1`. `Chip` merged that recipe in `cn()`, where
+* `tailwind-merge` dropped `leading-none` because a font-size class follows
+* it, so a `Chip` inherited its leading: it appends
+* {@link CHIP_LEADING_INHERIT}, which replaces the recipe's in the merge (the
+* closing pass's adversarial review).
+*/
+const CHIP_LEADING = "leading-[var(--cue-style-chip-leading,1)]";
+/** @see CHIP_LEADING — `Chip`'s own, falling back to the leading it inherited. */
+const CHIP_LEADING_INHERIT = "leading-[var(--cue-style-chip-leading,inherit)]";
+/**
+* The tag volume's own gutter (round 6: `style-tag-pad`, PAD2), falling back
+* to the `space-2` it drew. stripe.com's small tag pads 4px (T135).
+*/
+const TAG_PAD = "px-[var(--cue-style-tag-pad,var(--cue-space-2))]";
+/**
+* The neutral tag's rim (round 6: `style-tag-edge`), falling back to the
+* `hair-strong` it drew. stripe.com rims its small tag in its quiet border
+* ink, #e5edf5, the md tag's own (T135).
+*/
+const TAG_EDGE = "border-[color:var(--cue-style-tag-edge,var(--cue-hair-strong))]";
+/**
+* The neutral chip's ink (round 6, spec §11, lane R6.K: `style-chip-ink`),
+* falling back to the `fg-muted` it drew. The tinted tones keep their own ink.
+* replit.com's tags are near-black, #151618, on a warm tint (K156).
+*/
+const CHIP_INK_NEUTRAL = "text-[color:var(--cue-style-chip-ink,var(--cue-fg-muted))]";
+/**
+* The gap between a chip's icon and its label (round 6, spec §11, lane R6.P:
+* `style-chip-gap`), falling back to the `space-2` it drew. coss.com/ui's badge
+* sets it 4px (P190.gap).
+*/
+const CHIP_GAP = "gap-[var(--cue-style-chip-gap,var(--cue-space-2))]";
+//#endregion
+export { CHIP_CASE, CHIP_EDGE, CHIP_FILL, CHIP_GAP, CHIP_HEIGHT, CHIP_INK_NEUTRAL, CHIP_LEADING, CHIP_LEADING_INHERIT, CHIP_PAD, CHIP_RADIUS, CHIP_SIZE, CHIP_SIZE_MICRO, CHIP_TRACKING, CHIP_TRACKING_TAG, TAG_EDGE, TAG_PAD };

package/dist/system/_style-choice-gap.js

@@ -0,0 +1,15 @@
+//#region src/system/_style-choice-gap.ts
+/**
+* The gap between a stacked CheckboxGroup's or RadioGroup's items (round 6,
+* spec §11, lane R6.P: `style-choice-gap`), falling back to the `space-2`
+* both drew. coss.com/ui stacks both 12px apart (P148, P171.gap). A horizontal
+* radio group keeps its own `space-5`.
+*
+* **Optional** (spec §3.0). Its own module for docgen's reason: one token per
+* file, so only the components that read it are credited with it.
+*
+* @internal Not part of the public API.
+*/
+const CHOICE_GAP = "gap-[var(--cue-style-choice-gap,var(--cue-space-2))]";
+//#endregion
+export { CHOICE_GAP };

package/dist/system/_style-code.js

@@ -0,0 +1,13 @@
+//#region src/system/_style-code.ts
+/**
+* Code's weight (plan V.2, T74): `style-code-weight` on a `CodeBlock`'s code,
+* falling back to `inherit` — the block declared none. Tender's source serves
+* one code face, SourceCodePro-Medium, so its code is 500 wherever it appears.
+*
+* **Optional** (spec §3.0). Its own module for docgen's reason.
+*
+* @internal Not part of the public API.
+*/
+const CODE_WEIGHT = "font-[number:var(--cue-style-code-weight,inherit)]";
+//#endregion
+export { CODE_WEIGHT };

package/dist/system/_style-collapse.js

@@ -0,0 +1,94 @@
+//#region src/system/_style-collapse.ts
+/**
+* The disclosure trigger's height (plan V.2, P125): `style-collapse-height`,
+* falling back to the `control-md` rung it drew. Porcelain's accordion rows
+* are 52px. Shared by `Accordion`, `Collapsible` and `Disclosure`, which ride
+* one trigger recipe (`layout/_collapse.ts`).
+*
+* **Optional** (spec §3.0). Its own module for docgen's reason.
+*
+* @internal Not part of the public API.
+*/
+const COLLAPSE_HEIGHT = "h-[var(--cue-style-collapse-height,var(--cue-control-md))]";
+/**
+* The disclosure trigger's and panel's inline padding (round 6, spec §11,
+* lane R6.T: `style-collapse-pad`), falling back to the row gutter
+* `--cue-pad-row-x` they drew. stripe.com's accordion summary and content sit
+* flush with the rule between sections, so tender sets `0px` (T127, T130).
+*/
+const COLLAPSE_PAD = "px-[var(--cue-style-collapse-pad,var(--cue-pad-row-x))]";
+/** The gap between the trigger's label and its caret (`style-collapse-gap`), falling back to `space-3` (T127). */
+const COLLAPSE_GAP = "gap-[var(--cue-style-collapse-gap,var(--cue-space-3))]";
+/** The trigger's hover ink (`style-collapse-hover-ink`), falling back to the `fg` it hovered to (T128). */
+const COLLAPSE_HOVER_INK = "hover:text-[color:var(--cue-style-collapse-hover-ink,var(--cue-fg))]";
+/** An open section's trigger ink (`style-collapse-open-ink`), falling back to `fg` (T129). */
+const COLLAPSE_OPEN_INK = "data-[panel-open]:text-[color:var(--cue-style-collapse-open-ink,var(--cue-fg))]";
+/**
+* The panel body's block padding, start then end (`style-collapse-body-pad`,
+* PAD2), falling back to the `space-1` over `space-4` it drew. stripe.com's
+* content starts under the summary's own padding and ends 16px above the
+* rule (T130).
+*/
+const COLLAPSE_BODY_PAD = "[padding-block:var(--cue-style-collapse-body-pad,var(--cue-space-1)_var(--cue-space-4))]";
+/**
+* The trigger's text size (round 6, spec §11, lane R6.K: `style-collapse-size`,
+* a SIZE the font scale moves), falling back to the `text-ui` rung it drew.
+* replit.com's FAQ rows set their question at 20px on a 28px line (K142); greptile.com's
+* FAQ toggles are its 16px copy, 14px on a phone (Z112).
+*/
+const COLLAPSE_SIZE = "text-[length:var(--cue-style-collapse-size,var(--cue-text-ui))]";
+/** The trigger's leading (`style-collapse-leading`), falling back to the `inherit` it drew (no leading class of its own). */
+const COLLAPSE_LEADING = "leading-[var(--cue-style-collapse-leading,inherit)]";
+/**
+* The trigger's hover ground (`style-collapse-hover-ground`), falling back to
+* the `transparent` it drew: the trigger painted no ground under the pointer.
+* replit.com's FAQ rows fill with its recessed ground on hover (K143).
+*/
+const COLLAPSE_HOVER_GROUND = "hover:bg-[color:var(--cue-style-collapse-hover-ground,transparent)]";
+/**
+* The panel body's ink (`style-collapse-body-ink`), falling back to the
+* `fg-muted` it drew. replit.com's FAQ answers are set in its quiet ink,
+* #37383c, the ink of its headings and quiet controls (K144).
+*/
+const COLLAPSE_BODY_INK = "text-[color:var(--cue-style-collapse-body-ink,var(--cue-fg-muted))]";
+/**
+* The panel body's face: the body face (`style-body-face`, spec §3.5), falling back to the `font-mono` the body
+* drew. The body was the one part of the disclosure still hard-coded mono under a sans Look (K144, the K44
+* finding).
+*/
+const COLLAPSE_BODY_FACE = "font-[family-name:var(--cue-style-body-face,var(--cue-font-mono))]";
+/**
+* The disclosure trigger's corner (round 6, spec §11, lane R6.K: `style-collapse-radius`), falling
+* back to the square it drew. replit.com's FAQ rows round their hover ground 6px (K141.radius).
+*/
+const COLLAPSE_RADIUS = "rounded-[var(--cue-style-collapse-radius,0px)]";
+/**
+* The trigger's weight (`style-collapse-weight`), falling back through the
+* label weight to the `400` it drew (`LABEL_WEIGHT_NORMAL`). greptile.com's
+* FAQ toggles are 600 beside its 400 labels, so the two are apart (Z112).
+*/
+const COLLAPSE_WEIGHT = "font-[number:var(--cue-style-collapse-weight,var(--cue-style-label-weight,400))]";
+/** The caret's size (`style-collapse-caret-size`), falling back to the `icon-sm` it drew; greptile.com's chevron is 16px (Z113). */
+const COLLAPSE_CARET_SIZE = "size-[var(--cue-style-collapse-caret-size,var(--cue-icon-sm))]";
+/** The caret's ink (`style-collapse-caret-ink`), falling back to the `fg-subtle` it drew; greptile.com's chevron takes the label's slate (Z113). */
+/**
+* The caret's fade (round 6, spec §11, lane R6.P: `style-collapse-caret-opacity`),
+* falling back to the opacity 1 it drew. coss.com/ui's accordion chevron sits
+* at 0.8 (P150.caret-opacity).
+*/
+const COLLAPSE_CARET_OPACITY = "opacity-[var(--cue-style-collapse-caret-opacity,1)]";
+/** @see COLLAPSE_CARET_SIZE */
+const COLLAPSE_CARET_INK = "text-[color:var(--cue-style-collapse-caret-ink,var(--cue-fg-subtle))]";
+/**
+* The panel body's size, leading and tracking (round 6, spec §11, lane R6.Z: `style-collapse-body-size`,
+* a type size the font scale moves, `-body-leading`, `-body-tracking`), each falling back to the class it
+* replaced: the `text-ui` rung on `leading-ui`, and the tracking it inherited (no class of its own). greptile.com's FAQ answers are its running
+* copy, 16px on 24px at −0.01em (Z114).
+*/
+const COLLAPSE_BODY_SIZE = "text-[length:var(--cue-style-collapse-body-size,var(--cue-text-ui))]";
+/** @see COLLAPSE_BODY_SIZE */
+const COLLAPSE_BODY_LEADING = "leading-[var(--cue-style-collapse-body-leading,var(--cue-leading-ui))]";
+/** @see COLLAPSE_BODY_SIZE */
+const COLLAPSE_BODY_TRACKING = "tracking-[var(--cue-style-collapse-body-tracking,inherit)]";
+//#endregion
+export { COLLAPSE_BODY_FACE, COLLAPSE_BODY_INK, COLLAPSE_BODY_LEADING, COLLAPSE_BODY_PAD, COLLAPSE_BODY_SIZE, COLLAPSE_BODY_TRACKING, COLLAPSE_CARET_INK, COLLAPSE_CARET_OPACITY, COLLAPSE_CARET_SIZE, COLLAPSE_GAP, COLLAPSE_HEIGHT, COLLAPSE_HOVER_GROUND, COLLAPSE_HOVER_INK, COLLAPSE_LEADING, COLLAPSE_OPEN_INK, COLLAPSE_PAD, COLLAPSE_RADIUS, COLLAPSE_SIZE, COLLAPSE_WEIGHT };

package/dist/system/_style-control-face.js

@@ -0,0 +1,29 @@
+//#region src/system/_style-control-face.ts
+/**
+* The face a control wears: mono by default, the style set's choice inside one.
+*
+* Spec 2026-09-26 R-8. Every control in this library spoke mono before this
+* existed — `font-mono` on `Button`'s chassis and on the `Tabs` trigger — and
+* that voice is the default and stays so. What was missing was a way for a
+* sans-voiced Look (stripe's, replit's, coss's) to change it, and a face chosen
+* per call site would not follow the Look. So the style set says it, through
+* `--cue-style-control-face`, and this reads it.
+*
+* **The fallback is the old class, spelt out.** `font-mono` compiles to
+* `font-family: var(--cue-font-mono)` through the Tailwind bridge, and
+* `--cue-style-control-face` is declared on no `:root` — deliberately, because
+* a `:root` `var(--cue-font-mono)` would be substituted at `<html>` and freeze
+* the page's mono into every `<Preview font>` stage. So under no set this
+* resolves to exactly what `font-mono` resolved to, at the control itself; and
+* every shipped set but a sans-voiced one restates `var(--cue-font-mono)`, which
+* `@cueplusplus/tokens` refuses to build otherwise for `console`.
+*
+* **Its own module**, because `@repo/docgen` attributes a token to a component
+* by the file its class string lives in, following only `_`-prefixed imports —
+* the rule `_paint-glow.ts` records. One reader per file.
+*
+* @internal Not part of the public API.
+*/
+const CONTROL_FACE = "font-[family-name:var(--cue-style-control-face,var(--cue-font-mono))]";
+//#endregion
+export { CONTROL_FACE };

package/dist/system/_style-control-gap.js

@@ -0,0 +1,14 @@
+//#region src/system/_style-control-gap.ts
+/**
+* The gap between a button's icon and its label (round 6, spec §11, lane
+* R6.P: `style-control-gap`), falling back to the `0.4em` the chassis drew.
+* coss.com/ui's buttons set it 8px (`gap-2`, P145.gap).
+*
+* **Optional** (spec §3.0). Its own module for docgen's reason: one token per
+* file, so only the components that read it are credited with it.
+*
+* @internal Not part of the public API.
+*/
+const CONTROL_GAP = "gap-[var(--cue-style-control-gap,0.4em)]";
+//#endregion
+export { CONTROL_GAP };

package/dist/system/_style-control-label.js

@@ -0,0 +1,29 @@
+//#region src/system/_style-control-label.ts
+/**
+* A control's own label — the text beside a `Switch`, a `Checkbox` or a
+* `Radio` — at the body weight first and the label weight after it (plan V.2,
+* T114, P126).
+*
+* The label beside a control is body copy in Tender's source (300, its body
+* weight) and a caption-weight label in Porcelain's (500, its label weight),
+* so the reader tries the body weight, then the label weight, then `inherit`
+* — `LABEL_WEIGHT`'s fallback, what the label drew before either name
+* existed. Only Tender declares the body weight, so every other Look keeps
+* its label weight here.
+*
+* **Optional** (spec §3.0). Its own module for docgen's reason: every
+* importer of `_style-label-weight.ts` would otherwise publish
+* `style-body-weight` as a token it reads.
+*
+* @internal Not part of the public API.
+*/
+const CONTROL_LABEL_WEIGHT = "font-[number:var(--cue-style-body-weight,var(--cue-style-label-weight,inherit))]";
+/**
+* A checkbox's, a switch's and a radio's label leading (round 6, spec §11,
+* lane R6.T: `style-control-label-leading`), falling back to the `inherit` it
+* drew (no leading class of its own). stripe.com sets its checkbox and switch
+* labels at 16px on a 19.2px line, 1.2 (T145, T146).
+*/
+const CONTROL_LABEL_LEADING = "leading-[var(--cue-style-control-label-leading,inherit)]";
+//#endregion
+export { CONTROL_LABEL_LEADING, CONTROL_LABEL_WEIGHT };

package/dist/system/_style-control-step.js

@@ -0,0 +1,22 @@
+//#region src/system/_style-control-step.ts
+/**
+* The control rungs' step size (plan V.2, P130): the `sm` field and the `lg`
+* field and button read `style-control-step-size`, each falling back to the
+* rung it drew — `text-label`, `text-body` and `text-emphasis`. Porcelain's
+* source sets every control's text at one size that steps from 16px on a
+* phone to 14px on a desktop, whichever rung the control is.
+*
+* A type size, so the build wraps a set's value in the font scale's `calc()`.
+* **Optional** (spec §3.0). Its own module for docgen's reason: the field
+* chassis reads it, and `_style-control.ts`'s button names are not the
+* field's.
+*
+* @internal Not part of the public API.
+*/
+const CONTROL_STEP_SIZE_SM = "text-[length:var(--cue-style-control-step-size,var(--cue-text-label))]";
+/** @see CONTROL_STEP_SIZE_SM */
+const CONTROL_STEP_SIZE_BODY = "text-[length:var(--cue-style-control-step-size,var(--cue-text-body))]";
+/** @see CONTROL_STEP_SIZE_SM */
+const CONTROL_STEP_SIZE_LG = "text-[length:var(--cue-style-control-step-size,var(--cue-text-emphasis))]";
+//#endregion
+export { CONTROL_STEP_SIZE_BODY, CONTROL_STEP_SIZE_LG, CONTROL_STEP_SIZE_SM };

package/dist/system/_style-control.js

@@ -0,0 +1,76 @@
+//#region src/system/_style-control.ts
+/**
+* `Button`'s voice, padding and tones, each a style-set name read with the
+* class it replaced as its fallback.
+*
+* Fidelity spec 2026-09-26 §3.7 (plan R3), and §10.4 for `CONTROL_CASE`. Four
+* Looks draw their buttons differently from the console: tender and zine at
+* weight 400, kiln tracked in, tender and zine padded out and kiln and
+* porcelain drawn in, tender's label trimmed to its cap height, graphite in
+* capitals; and each gives its secondary, ghost and outline tones an ink, a
+* ground or an edge of its own. None of that is a value one call site could
+* choose, so the style set says it and these read it.
+*
+* **Every fallback is what the site rendered before this existed**, so under
+* no set and under every set that declines a name the reader is a no-op:
+*
+* - `CONTROL_WEIGHT` is `font-medium`'s 500. It is spelt
+*   `font-[number:…]`: a bare `font-[…]` is read as a family, and the
+*   `number` label makes it a weight to Tailwind (which emits exactly what
+*   `font-medium` emitted, `--tw-font-weight` included) and to `twMerge`, so a
+*   caller's `className="font-semibold"` still replaces it. Spelt as an
+*   arbitrary `[font-weight:…]` property instead, it would survive the merge
+*   and win the cascade: Tailwind emits it after `font-semibold`.
+* - `CONTROL_TRACKING`, `CONTROL_TRIM` and `CONTROL_CASE` fall back to
+*   `normal`, `normal` and `none`, the spec's fallbacks: the chassis set none
+*   of the three, so a button drew each property's initial value unless an
+*   ancestor set a letter-spacing or a case for it to inherit. It now draws
+*   the initial value under such an ancestor too, which is what a control
+*   should: its voice is the set's, not the caption's it happens to sit in.
+* - The three `CONTROL_PAD_*` multiply the rung each size read (`space-4`,
+*   `-5`, `-6`) by the set's multiplier, `1` when it has none.
+* - The tone readers keep each tone's own ink, ground and edge:
+*   `style-quiet-ink` in particular falls back to `fg-muted` on the ghost and
+*   to `fg` on the outline, the two values the spec's §3.0 names as the reason
+*   a name like it cannot be declared on `console`.
+*
+* `style-control-case` is not in the contract yet (spec §10.4: it enters in
+* L5.1). Until then no set declares it and `CONTROL_CASE` renders its
+* fallback.
+*
+* **Its own module, and `Button`'s alone.** `@repo/docgen` attributes every
+* token a file spells to each component that imports it, following only
+* `_`-prefixed imports; the rule `_style-control-face.ts` records. Only
+* `primitives/button.tsx` imports this, and `IconButton` reads it through
+* `buttonChassis` and `buttonTones` as it always has.
+*
+* @internal Not part of the public API.
+*/
+/** The control's weight: 500, or the set's `style-control-weight`. */
+const CONTROL_WEIGHT = "font-[number:var(--cue-style-control-weight,500)]";
+/** The control's tracking: `normal`, or the set's `style-control-tracking`. */
+const CONTROL_TRACKING = "tracking-[var(--cue-style-control-tracking,normal)]";
+/** The label's box trim: `normal`, or the set's `style-control-trim`. */
+const CONTROL_TRIM = "[text-box:var(--cue-style-control-trim,normal)]";
+/** The label's case: `none`, or the set's `style-control-case` (spec §10.4). */
+const CONTROL_CASE = "[text-transform:var(--cue-style-control-case,none)]";
+/** `size="sm"`'s inline padding: `space-4` times the set's `style-control-pad`. */
+const CONTROL_PAD_SM = "px-[calc(var(--cue-space-4)*var(--cue-style-control-pad,1))]";
+/** `size="md"`'s inline padding: `space-5` times the set's `style-control-pad`. */
+const CONTROL_PAD_MD = "px-[calc(var(--cue-space-5)*var(--cue-style-control-pad,1))]";
+/** `size="lg"`'s inline padding: `space-6` times the set's `style-control-pad`. */
+const CONTROL_PAD_LG = "px-[calc(var(--cue-space-6)*var(--cue-style-control-pad,1))]";
+/** The secondary tone's ink: `fg-muted`, or the set's `style-secondary-ink`. */
+const SECONDARY_INK = "text-[color:var(--cue-style-secondary-ink,var(--cue-fg-muted))]";
+/** The secondary tone's ground: `surface-2`, or the set's `style-secondary-ground`. */
+const SECONDARY_GROUND = "bg-[color:var(--cue-style-secondary-ground,var(--cue-surface-2))]";
+/** The secondary tone's edge: `border`, or the set's `style-secondary-edge`. */
+const SECONDARY_EDGE = "border-[color:var(--cue-style-secondary-edge,var(--cue-border))]";
+/** The ghost tone's ink: `fg-muted`, or the set's `style-quiet-ink`. */
+const GHOST_INK = "text-[color:var(--cue-style-quiet-ink,var(--cue-fg-muted))]";
+/** The outline tone's ink: `fg`, or the set's `style-quiet-ink`. */
+const OUTLINE_INK = "text-[color:var(--cue-style-quiet-ink,var(--cue-fg))]";
+/** The outline tone's edge: `border`, or the set's `style-outline-edge`. */
+const OUTLINE_EDGE = "border-[color:var(--cue-style-outline-edge,var(--cue-border))]";
+//#endregion
+export { CONTROL_CASE, CONTROL_PAD_LG, CONTROL_PAD_MD, CONTROL_PAD_SM, CONTROL_TRACKING, CONTROL_TRIM, CONTROL_WEIGHT, GHOST_INK, OUTLINE_EDGE, OUTLINE_INK, SECONDARY_EDGE, SECONDARY_GROUND, SECONDARY_INK };

package/dist/system/_style-crumb.js

@@ -0,0 +1,44 @@
+//#region src/system/_style-crumb.ts
+/**
+* The breadcrumb's own voice (round 6, spec §11, lane R6.Z): its face
+* (`style-crumb-face`), falling back through the control face to the mono it
+* drew; a crumb's hover ink (`style-crumb-hover-ink`), falling back to the
+* `accent` it hovered to; and the gap between crumbs (`style-crumb-gap`),
+* falling back to the `space-2` it drew. greptile.com's blog trail is Space
+* Mono beside its DM Sans buttons, hovers to `fg`, and spaces its crumbs 8px
+* apart at 1440 and 6px at 390 (Z126). Its size is `style-body-size`'s
+* (`_style-body-size.ts`).
+*
+* **Optional** (spec §3.0). Its own module for docgen's reason: one token per
+* file, so `Breadcrumb` alone is credited with these.
+*
+* @internal Not part of the public API.
+*/
+const CRUMB_FACE = "font-[family-name:var(--cue-style-crumb-face,var(--cue-style-control-face,var(--cue-font-mono)))]";
+/** @see CRUMB_FACE */
+const CRUMB_HOVER_INK = "hover:text-[color:var(--cue-style-crumb-hover-ink,var(--cue-accent))]";
+/** @see CRUMB_FACE */
+const CRUMB_GAP = "gap-[var(--cue-style-crumb-gap,var(--cue-space-2))]";
+/**
+* A crumb's ink (round 6, spec §11, lane R6.Z: `style-crumb-ink`): the links fall back to the
+* `fg-muted` they drew and the current crumb to its full-strength `fg`. greptile.com's blog
+* sets both in one grey, #6a6a6a (Z126.ink, Z126.current).
+*/
+const CRUMB_INK = "text-[color:var(--cue-style-crumb-ink,var(--cue-fg-muted))]";
+/** @see CRUMB_INK */
+const CRUMB_CURRENT_INK = "text-[color:var(--cue-style-crumb-ink,var(--cue-fg))]";
+/**
+* The trail's type size (`style-crumb-size`, a type size the font scale moves), falling back through
+* the body size to the `text-label` rung it drew (`BODY_SIZE_LABEL`). greptile.com's crumbs are
+* 14px, 12px on a phone (Z126.size).
+*/
+/**
+* The separator's fade (round 6, spec §11, lane R6.P:
+* `style-crumb-separator-opacity`), falling back to the opacity 1 it drew.
+* coss.com/ui's separators sit at 0.8 (P144.opacity).
+*/
+const CRUMB_SEPARATOR_OPACITY = "opacity-[var(--cue-style-crumb-separator-opacity,1)]";
+/** @see CRUMB_INK */
+const CRUMB_SIZE = "text-[length:var(--cue-style-crumb-size,var(--cue-style-body-size,var(--cue-text-label)))]";
+//#endregion
+export { CRUMB_CURRENT_INK, CRUMB_FACE, CRUMB_GAP, CRUMB_HOVER_INK, CRUMB_INK, CRUMB_SEPARATOR_OPACITY, CRUMB_SIZE };

package/dist/system/_style-data-face.js

@@ -0,0 +1,28 @@
+//#region src/system/_style-data-face.ts
+/**
+* The face figures and records are set in: mono, until a style set names another.
+*
+* Spec 2026-09-26-looks-fidelity §3.5, plan R1. A `Stat`'s value and detail, a
+* `Table`, a `Row`, a `Bento` tile's eyebrow and a `SectionHeader`'s count all
+* spelt `font-mono`. In the console that is the data's voice; in Tender, Kiln
+* and Porcelain the same numbers are set in the Look's sans (T15, K44, P46), and
+* a face chosen per call site would not follow the Look.
+*
+* `tabular-nums` stays at each call site: a sans figure column still has to line
+* up. Code, timecode and DMX values do not read this — they are content, and stay
+* `font-mono` whatever the Look.
+*
+* **The fallback is the old class, spelt out**: `font-mono` compiles to
+* `font-family: var(--cue-font-mono)`, and `--cue-style-data-face` is optional
+* (spec §3.0) — on no `:root`, and left at the shared `[data-style]` reset by
+* every shipped set — so the reader resolves the element's own mono, exactly as
+* `font-mono` did, in every set and every font island.
+*
+* **Its own module**, one name per file, so `@repo/docgen` attributes exactly
+* this token to exactly the components that import it.
+*
+* @internal Not part of the public API.
+*/
+const DATA_FACE = "font-[family-name:var(--cue-style-data-face,var(--cue-font-mono))]";
+//#endregion
+export { DATA_FACE };

package/dist/system/_style-day.js

@@ -0,0 +1,25 @@
+//#region src/system/_style-day.ts
+/**
+* A calendar day's cell and ink (round 6, spec §11, lane R6.P: `style-day-size`,
+* `style-day-ink`). The size sets the day buttons, the weekday heads above
+* them, the month-nav buttons and the caption row they sit in, falling back to
+* the `control-sm` box they drew. coss.com/ui's days and its nav buttons are
+* 36px squares (40px on a phone) (P189, P189.nav).
+*
+* **Optional** (spec §3.0): each name is declared by `porcelain` alone and each
+* reader falls back to what the component drew. Its own module for docgen's
+* reason: one component's tokens per file.
+*
+* @internal Not part of the public API.
+*/
+const DAY_SIZE = "size-[var(--cue-style-day-size,var(--cue-control-sm))]";
+/** @see DAY_SIZE — the caption row's and the nav row's height. */
+const DAY_HEIGHT = "h-[var(--cue-style-day-size,var(--cue-control-sm))]";
+/**
+* A day's ink at rest (`style-day-ink`), falling back to the `fg-muted` the days
+* drew. coss.com/ui draws its days in `fg` (P189.day-ink); the outside days,
+* the selected day and a hovered day keep their own inks.
+*/
+const DAY_INK = "text-[color:var(--cue-style-day-ink,var(--cue-fg-muted))]";
+//#endregion
+export { DAY_HEIGHT, DAY_INK, DAY_SIZE };

package/dist/system/_style-description.js

@@ -0,0 +1,23 @@
+//#region src/system/_style-description.ts
+/**
+* `Card.Description`'s leading and tracking (plan V.2, Z104, T117, P8).
+*
+* The description reads `style-description-leading` first and then the body
+* leading, so Zine can set a card's supporting line apart from the rest of its
+* body copy (a clamp the description alone measured) while Tender and
+* Porcelain move it with their body leading; with neither named it keeps the
+* `leading-ui` it drew. The tracking is the description's own name rather
+* than `style-prose-tracking`, which Kiln declares at -0.02em for its prose:
+* reading that here would have moved every Kiln card's copy with it. It falls
+* back to `inherit`, which is what the description drew, since it declared no
+* tracking before.
+*
+* **Optional** (spec §3.0). Its own module for docgen's reason.
+*
+* @internal Not part of the public API.
+*/
+const DESCRIPTION_LEADING = "leading-[var(--cue-style-description-leading,var(--cue-style-body-leading,var(--cue-leading-ui)))]";
+/** @see DESCRIPTION_LEADING */
+const DESCRIPTION_TRACKING = "tracking-[var(--cue-style-description-tracking,inherit)]";
+//#endregion
+export { DESCRIPTION_LEADING, DESCRIPTION_TRACKING };

package/dist/system/_style-disabled.js

@@ -0,0 +1,70 @@
+//#region src/system/_style-disabled.ts
+/**
+* A disabled control's opacity, fill and ink (round 6, spec §11, lane R6.T:
+* `style-disabled-opacity`, `style-disabled-fill`, `style-disabled-ink`).
+*
+* The chassis marks a disabled control by fading it to 40%, whatever the Look.
+* stripe.com's system paints its disabled controls instead: a button, a
+* checkbox, a switch's track and a text field fill with its quiet surface
+* (`--hds-color-input-bg-disabled`, #e5edf5 over white), a disabled label and
+* button text take a pale ink (`--hds-color-input-text-disabled`, #95a4ba),
+* and nothing fades (T143, T132, T145, T146). So a set may lift the fade and
+* name the fill and the ink.
+*
+* **Every reader falls back to what its control drew before**: the fade to
+* `0.4`, each fill and ink to the resting value of the same control and
+* state, spelled here byte for byte, so a disabled control under a set that
+* declines all three is exactly the faded control it was. Each is spelled
+* out whole, because Tailwind reads class names from source text and cannot
+* see one built at run time.
+*
+* **Its own module**, because docgen credits every `--cue-*` in a module to
+* each component that imports it: the button chassis, the field chassis, the
+* checkbox and the switch each import the constants they spend.
+*
+* @internal Not part of the public API.
+*/
+/** The fade on `:disabled` (a native control). */
+const DISABLED_OPACITY = "disabled:opacity-[var(--cue-style-disabled-opacity,0.4)]";
+/** The fade on `[data-disabled]` (Base UI's own attribute). */
+const DATA_DISABLED_OPACITY = "data-[disabled]:opacity-[var(--cue-style-disabled-opacity,0.4)]";
+/** The fade on a control's label, which holds the disabled control. */
+const LABEL_DISABLED_OPACITY = "has-[[data-disabled]]:opacity-[var(--cue-style-disabled-opacity,0.4)]";
+/** A disabled control label's ink, falling back to the label ink it drew (`LABEL_INK`). */
+const LABEL_DISABLED_INK = "has-[[data-disabled]]:text-[color:var(--cue-style-disabled-ink,var(--cue-style-label-ink,var(--cue-fg-muted)))]";
+/**
+* The field chassis's fill when disabled: its own two layers (`STROKE_SUNKEN`),
+* with the fill layer's `sunken` read through `style-disabled-fill`, on
+* `:disabled` and on `[data-disabled]`.
+*/
+const FIELD_DISABLED_FILL = "disabled:bg-[linear-gradient(var(--cue-style-disabled-fill,var(--cue-sunken)),var(--cue-style-disabled-fill,var(--cue-sunken))),linear-gradient(var(--cue-paint-stroke-angle),var(--cue-paint-stroke-from,var(--cue-border)),var(--cue-paint-stroke-to,var(--cue-border)))] data-[disabled]:bg-[linear-gradient(var(--cue-style-disabled-fill,var(--cue-sunken)),var(--cue-style-disabled-fill,var(--cue-sunken))),linear-gradient(var(--cue-paint-stroke-angle),var(--cue-paint-stroke-from,var(--cue-border)),var(--cue-paint-stroke-to,var(--cue-border)))]";
+/**
+* The button tones' fill and ink when disabled, each falling back to the tone's own resting fill and ink.
+* The two transparent tones keep their ground and take an edge instead (`style-disabled-edge`, falling
+* back to the edge each drew): stripe.com's disabled icon button stays on its ground and draws a 1px rim
+* in its disabled border ink (T139), where its filled buttons fill (T143).
+*/
+const DISABLED_TONES = {
+	primary: "disabled:bg-[color:var(--cue-style-disabled-fill,var(--cue-accent-fill))] disabled:text-[color:var(--cue-style-disabled-ink,var(--cue-accent-fill-fg))]",
+	secondary: "disabled:bg-[color:var(--cue-style-disabled-fill,var(--cue-style-secondary-ground,var(--cue-surface-2)))] disabled:text-[color:var(--cue-style-disabled-ink,var(--cue-style-secondary-ink,var(--cue-fg-muted)))]",
+	ghost: "disabled:border-[color:var(--cue-style-disabled-edge,transparent)] disabled:text-[color:var(--cue-style-disabled-ink,var(--cue-style-quiet-ink,var(--cue-fg-muted)))]",
+	outline: "disabled:border-[color:var(--cue-style-disabled-edge,var(--cue-style-outline-edge,var(--cue-border)))] disabled:text-[color:var(--cue-style-disabled-ink,var(--cue-style-quiet-ink,var(--cue-fg)))]",
+	danger: "disabled:bg-[color:var(--cue-style-disabled-fill,var(--cue-danger))] disabled:text-[color:var(--cue-style-disabled-ink,var(--cue-danger-fg))]",
+	"danger-outline": "disabled:bg-[color:var(--cue-style-disabled-fill,transparent)] disabled:text-[color:var(--cue-style-disabled-ink,var(--cue-danger))]"
+};
+/**
+* The checkbox's box when disabled: its fill, and its edge, which a disabled
+* box draws in its own fill (the source's disabled box draws no border, so
+* the two read as one square). Each state keeps its own fallback: the
+* resting `sunken` and edge, and the checked and indeterminate `accent`.
+*
+* The checked and indeterminate edges skip an invalid box: they name two
+* attributes and so outrank `data-[invalid]:border-danger`, and a disabled,
+* checked, invalid box drew `danger` before round 6 (the closing pass's
+* adversarial review).
+*/
+const CHECK_DISABLED = "data-[disabled]:bg-[color:var(--cue-style-disabled-fill,var(--cue-sunken))] data-[disabled]:border-[color:var(--cue-style-disabled-fill,var(--cue-style-check-edge,var(--cue-border)))] data-[disabled]:data-[checked]:bg-[color:var(--cue-style-disabled-fill,var(--cue-accent))] data-[disabled]:data-[checked]:not-data-[invalid]:border-[color:var(--cue-style-disabled-fill,var(--cue-accent))] data-[disabled]:data-[indeterminate]:bg-[color:var(--cue-style-disabled-fill,var(--cue-accent))] data-[disabled]:data-[indeterminate]:not-data-[invalid]:border-[color:var(--cue-style-disabled-fill,var(--cue-accent))]";
+/** The switch's track when disabled, unchecked and checked, each state keeping its own fallback. */
+const SWITCH_DISABLED_TRACK = "data-[disabled]:bg-[color:var(--cue-style-disabled-fill,var(--cue-surface-3))] data-[disabled]:data-[checked]:bg-[color:var(--cue-style-disabled-fill,var(--cue-accent))]";
+//#endregion
+export { CHECK_DISABLED, DATA_DISABLED_OPACITY, DISABLED_OPACITY, DISABLED_TONES, FIELD_DISABLED_FILL, LABEL_DISABLED_INK, LABEL_DISABLED_OPACITY, SWITCH_DISABLED_TRACK };