@cueplusplus/ui 0.16.0 → 0.17.0

package/dist/system/_style-body-size.js

@@ -0,0 +1,30 @@
+//#region src/system/_style-body-size.ts
+/**
+* Body copy's size where a component sets it itself: a card's description, an
+* overlay's description, a table, a table's caption and the breadcrumb.
+*
+* Plan V.2 (P8, P42, P122, P128, P138). Each read a density rung directly —
+* `text-ui` or `text-label` — and Porcelain's source sets them all at one 14px
+* body size that does not ramp on a phone the way its `text-ui` does, so a
+* Look needed a name for "body copy" apart from the rung.
+*
+* | constant          | reads             | fallback                |
+* |-------------------|-------------------|-------------------------|
+* | `BODY_SIZE`       | `style-body-size` | `var(--cue-text-ui)`    |
+* | `BODY_SIZE_LABEL` | `style-body-size` | `var(--cue-text-label)` |
+*
+* A type size, so the build wraps a set's value in the font scale's `calc()`
+* as it does the `text-*` rungs it stands in for. **Size before leading** in
+* any one class list: `tailwind-merge` drops a `leading-*` that precedes a
+* font size. **Optional** (spec §3.0): declared on no `:root` and left at the
+* shared `[data-style]` reset by every set that does not name it. Its own
+* module because docgen attributes a token to a component by the file its
+* class string lives in.
+*
+* @internal Not part of the public API.
+*/
+const BODY_SIZE = "text-[length:var(--cue-style-body-size,var(--cue-text-ui))]";
+/** @see BODY_SIZE — for a site whose body copy was the `text-label` rung. */
+const BODY_SIZE_LABEL = "text-[length:var(--cue-style-body-size,var(--cue-text-label))]";
+//#endregion
+export { BODY_SIZE, BODY_SIZE_LABEL };

package/dist/system/_style-body-weight.js

@@ -0,0 +1,24 @@
+//#region src/system/_style-body-weight.ts
+/**
+* Body copy's weight: whatever the box above says, until a style set names one.
+*
+* Spec 2026-09-26-looks-fidelity §3.5, plan R1. No reader of this name set a
+* weight before it existed — a card's description, an overlay's body copy, the
+* `PageShell` subtitle and the recessed control chassis all inherited theirs —
+* so the fallback is `inherit`, which is what not declaring one computed.
+* Tender's body copy is 300 (T62), and without this name a Look could not say so.
+*
+* The chassis (`forms/_chassis.ts`) reads this and not `_style-body.ts`: a
+* control's face is `INPUT_FACE`, and importing the body face beside the weight
+* would have docgen publish `style-body-face` as a token of every control.
+* `_style-body.ts` composes this one for the readers that spend both.
+*
+* **Optional** (spec §3.0): declared on no `:root` and left at the shared
+* `[data-style]` reset by every shipped set. `_style-page-title.ts` says why a
+* weight reader is `font-[number:…]`.
+*
+* @internal Not part of the public API.
+*/
+const BODY_WEIGHT = "font-[number:var(--cue-style-body-weight,inherit)]";
+//#endregion
+export { BODY_WEIGHT };

package/dist/system/_style-body.js

@@ -0,0 +1,27 @@
+import { BODY_WEIGHT } from "./_style-body-weight.js";
+//#region src/system/_style-body.ts
+/**
+* Body copy's face and weight: mono and inherited, until a style set names them.
+*
+* Spec 2026-09-26-looks-fidelity §3.5, plan R1. `CardDescription`,
+* `overlayTextClasses`, `overlayDescriptionClasses` and the `PageShell` subtitle
+* each spelt `font-mono`, so a sans-voiced Look (Tender, Zine, Kiln, Porcelain)
+* could change a card's title and leave the sentence under it shouting in mono.
+*
+* | property    | reads               | fallback (the class it replaced)     |
+* |-------------|---------------------|--------------------------------------|
+* | font-family | `style-body-face`   | `var(--cue-font-mono)` (`font-mono`) |
+* | font-weight | `style-body-weight` | `inherit` (no class)                 |
+*
+* Size, leading and ink stay with each call site: a description and an overlay's
+* body copy sit at different rungs and inks, and no Look measured them moving.
+*
+* **Both names are optional** (spec §3.0), declared on no `:root` and left at the
+* shared `[data-style]` reset by every shipped set, so under each the reader
+* computes what `font-mono` and no weight computed at the element.
+*
+* @internal Not part of the public API.
+*/
+const BODY_VOICE = `font-[family-name:var(--cue-style-body-face,var(--cue-font-mono))] ${BODY_WEIGHT}`;
+//#endregion
+export { BODY_VOICE };

package/dist/system/_style-caption.js

@@ -0,0 +1,19 @@
+//#region src/system/_style-caption.ts
+/**
+* A caption's case where the caption is sentence case today (plan V.2, K131,
+* G123): `style-caption-case`, falling back to `inherit` — what a caption
+* that declared no case drew.
+*
+* Not `LABEL_CASE`. `style-label-case` is a required name that `console`
+* restates as `uppercase`, so reading it at a caption that is not uppercase
+* today would uppercase that caption under Classic. Kiln and Graphite set
+* their captions in capitals at these sites too — a frame's caption, a
+* showcase caption — and this is the optional name they say so with.
+*
+* **Optional** (spec §3.0). Its own module for docgen's reason.
+*
+* @internal Not part of the public API.
+*/
+const CAPTION_CASE = "[text-transform:var(--cue-style-caption-case,inherit)]";
+//#endregion
+export { CAPTION_CASE };

package/dist/system/_style-card-pad.js

@@ -0,0 +1,43 @@
+//#region src/system/_style-card-pad.ts
+/**
+* A card's padding: one `--cue-space-5` rung, times the style set's
+* proportion.
+*
+* Spec 2026-09-26-looks-fidelity §3.11, `style-card-pad` (row K31). Kiln's
+* cards breathe a quarter wider than the chassis's; a card's padding is a
+* proportion of the density rung (F-6), so the set owns the multiplier and
+* density keeps the rung — a compact island still pads a Kiln card less than a
+* large one does.
+*
+* **The fallback is the old class, spelt out.** `p-(--cue-space-5)` compiled to
+* `padding: var(--cue-space-5)`, and `calc(var(--cue-space-5)*1)` computes the
+* same length at every rung. `--cue-style-card-pad` is on no `:root` — it is
+* one of contract round 2's optional names, reset to `initial` under every
+* `[data-style]` that does not declare it — so under no set, `console` and every
+* shipped set today each reader below resolves to exactly what it drew before.
+*
+* **One constant per side and state**, because a card's parts pad
+* asymmetrically on purpose: the header carries no bottom padding and the footer
+* no top padding, so the body's own padding is the whole gap between them, and
+* under `seam` each takes its missing side back (`Card.Header`'s docblock). Every
+* side reads the same multiplier, so the asymmetry survives any value of it.
+*
+* **Its own module**, because `@repo/docgen` attributes a token to a component
+* by the file its class string lives in, following only `_`-prefixed imports.
+* `Card` is this file's only reader.
+*
+* @internal Not part of the public API.
+*/
+const CARD_PAD = "p-[calc(var(--cue-space-5)*var(--cue-style-card-pad,1))]";
+/** The inline sides alone: the header's and the footer's. @internal */
+const CARD_PAD_X = "px-[calc(var(--cue-space-5)*var(--cue-style-card-pad,1))]";
+/** The header's top. @internal */
+const CARD_PAD_TOP = "pt-[calc(var(--cue-space-5)*var(--cue-style-card-pad,1))]";
+/** The footer's bottom. @internal */
+const CARD_PAD_BOTTOM = "pb-[calc(var(--cue-space-5)*var(--cue-style-card-pad,1))]";
+/** The header's bottom, taken back under `<Card.Root seam>`. @internal */
+const CARD_PAD_SEAM_BOTTOM = "group-data-[seam]/card:pb-[calc(var(--cue-space-5)*var(--cue-style-card-pad,1))]";
+/** The footer's top, taken back under `<Card.Root seam>`. @internal */
+const CARD_PAD_SEAM_TOP = "group-data-[seam]/card:pt-[calc(var(--cue-space-5)*var(--cue-style-card-pad,1))]";
+//#endregion
+export { CARD_PAD, CARD_PAD_BOTTOM, CARD_PAD_SEAM_BOTTOM, CARD_PAD_SEAM_TOP, CARD_PAD_TOP, CARD_PAD_X };

package/dist/system/_style-check.js

@@ -0,0 +1,33 @@
+//#region src/system/_style-check.ts
+/**
+* The checkbox's resting edge: `border`, or the style set's `style-check-edge`.
+*
+* Fidelity spec 2026-09-26 §3.7 (plan R3). Porcelain draws an unchecked box
+* one rung heavier than its hairlines (`border-strong`, P50), and a checkbox
+* is not a control a call site restyles per Look, so the set says it.
+*
+* **The fallback is the old class, spelt out**: `border-border` compiles to
+* `border-color: var(--cue-border)`, and the name is declared on no `:root`,
+* so under no set and under every set that declines it this resolves at the
+* box exactly as `border-border` did. The checked, indeterminate, hovered and
+* invalid edges are variants over this and keep their own colours.
+*
+* **Its own module**, for the reason `_style-control-face.ts` gives: one
+* reader per file, so `@repo/docgen` attributes this token to the checkbox and
+* to nothing else.
+*
+* @internal Not part of the public API.
+*/
+const CHECK_EDGE = "border-[color:var(--cue-style-check-edge,var(--cue-border))]";
+/**
+* The checkbox's corner and its `md` size (plan V.2, P110, P137):
+* `style-check-radius`, falling back to the `rounded-control` corner the box
+* drew, and `style-check-size`, falling back to the `icon-md` rung. Porcelain's
+* box is 18px on a phone and 16px on a desktop, rounded at 0.4 of its control
+* corner (4px). The `sm` box keeps its `icon-sm`.
+*/
+const CHECK_RADIUS = "rounded-[var(--cue-style-check-radius,calc(var(--cue-radius-control)*var(--cue-radius-scale)))]";
+/** @see CHECK_RADIUS */
+const CHECK_SIZE_MD = "size-[var(--cue-style-check-size,var(--cue-icon-md))]";
+//#endregion
+export { CHECK_EDGE, CHECK_RADIUS, CHECK_SIZE_MD };

package/dist/system/_style-chip.js

@@ -0,0 +1,103 @@
+//#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))]";
+//#endregion
+export { CHIP_CASE, CHIP_EDGE, CHIP_FILL, CHIP_HEIGHT, CHIP_PAD, CHIP_RADIUS, CHIP_SIZE, CHIP_SIZE_MICRO, CHIP_TRACKING, CHIP_TRACKING_TAG };

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,14 @@
+//#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))]";
+//#endregion
+export { COLLAPSE_HEIGHT };

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-label.js

@@ -0,0 +1,22 @@
+//#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))]";
+//#endregion
+export { 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-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-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-eyebrow.js

@@ -0,0 +1,43 @@
+//#region src/system/_style-eyebrow.ts
+/**
+* The eyebrow's voice: its face, size, ink, weight and whether it prints the
+* `//` glyph — the console's by default, the style set's choice inside one.
+*
+* Spec 2026-09-26-looks-fidelity §3.6 (R2). `Eyebrow` is the one caption the
+* four measured Looks each draw differently from the rest of their labels:
+* zine's is a 1–1.125rem kicker, kiln's a mono 0.8125rem at weight 500 in a
+* softened heading ink, tender's is in the body ink, and none of the four
+* prints the slashes. So it has names of its own rather than riding the label
+* names — but it falls back THROUGH them, so a set that restyles its labels
+* and says nothing about its eyebrow gets an eyebrow that matches its labels.
+*
+* Every name is optional (spec §3.0, F-3), emitted as `initial` on the shared
+* `[data-style]` reset, so under no set, `console` and every set that declines
+* them each reader resolves to exactly what the class it replaced resolved to:
+*
+* - face: `LABEL_FACE`'s own chain, `var(--cue-style-label-face, var(--cue-font-mono))`;
+* - size: `var(--cue-style-label-size, var(--cue-text-label))`, the label size's chain;
+* - ink: `var(--cue-accent)`, what `text-accent` compiled to;
+* - weight: `inherit` — the eyebrow declared none (see `_style-label-weight.ts`
+*   on why a literal `400` would not be a no-op, and on the `font-[number:…]`
+*   spelling);
+* - glyph: `inline`, the slashes' own display. A flex item is blockified either
+*   way, so under no set it computes what it computed before; `none` removes it.
+*
+* **One module for the five**, because `Eyebrow` is their only reader:
+* `@repo/docgen` attributes a token by the file its class string lives in, and
+* every importer of this file reads every name in it.
+*
+* @internal Not part of the public API.
+*/
+const EYEBROW_FACE = "font-[family-name:var(--cue-style-eyebrow-face,var(--cue-style-label-face,var(--cue-font-mono)))]";
+/** @see EYEBROW_FACE — the eyebrow's size, falling back through the label size. */
+const EYEBROW_SIZE = "text-[length:var(--cue-style-eyebrow-size,var(--cue-style-label-size,var(--cue-text-label)))]";
+/** @see EYEBROW_FACE — the eyebrow's ink; the accent by default. */
+const EYEBROW_INK = "text-[color:var(--cue-style-eyebrow-ink,var(--cue-accent))]";
+/** @see EYEBROW_FACE — the eyebrow's weight; inherited by default. */
+const EYEBROW_WEIGHT = "font-[number:var(--cue-style-eyebrow-weight,inherit)]";
+/** @see EYEBROW_FACE — the `//` glyph's display: `inline` by default, `none` to drop it. */
+const EYEBROW_GLYPH = "[display:var(--cue-style-eyebrow-glyph,inline)]";
+//#endregion
+export { EYEBROW_FACE, EYEBROW_GLYPH, EYEBROW_INK, EYEBROW_SIZE, EYEBROW_WEIGHT };

package/dist/system/_style-footer-rule.js

@@ -0,0 +1,47 @@
+//#region src/system/_style-footer-rule.ts
+/**
+* The width of the rule across the top of `Footer`, and the line style of
+* both of its rules.
+*
+* Spec 2026-09-26-looks-fidelity §3.11 (plan R4). `Footer` spends `Band`'s
+* recipe, whose rule is `--cue-band-rule` wide, and a Look whose bands carry
+* no rule but whose footer does (kiln) needs the footer's width on its own.
+* `--cue-style-footer-rule` is that width, and this reads it.
+*
+* **The fallback is the class it replaces**: `bandClasses("rule")`'s
+* `border-t-(length:--cue-band-rule)`, which compiles to
+* `var(--cue-band-rule)`. Composed after it, so `tailwind-merge` drops the
+* recipe's own width and keeps this one; `Band` is untouched.
+*
+* **The line style fills Tailwind's own slot** (`style-footer-rule-style`,
+* round 5 of plan V.2: `tender` dashes both rules, T120 and T121). Both of
+* the footer's rules are written by width utilities — the band rule by
+* `border-t-[length:…]` above, the fine print's by `border-t` — and each
+* writes `border-top-style: var(--tw-border-style)`, a slot Tailwind
+* registers as `@property` with `inherits: false` and `initial-value: solid`,
+* which is the solid rule the footer always drew. So `Footer` spends
+* {@link FOOTER_RULE_STYLE} on both elements, as `_style-app-bar.ts` fills the
+* same slot for the bar's rule: one declaration each, rather than a raw
+* `[border-top-style:…]` that Tailwind would emit after `border-dotted` and
+* that would beat a caller's own style class. Through the slot, a caller's
+* `className="border-dotted"` still wins on the landmark, because a style
+* utility writes `border-style` itself and is emitted after the width
+* utilities. The slot does not inherit, so filling it on the landmark reaches
+* no descendant's border, which is why the fine-print row fills it too.
+*
+* Its own name rather than `style-chrome-rule-style`, the bar's: the sources
+* style the two ends of a page apart. Tender's dashes its footer's rules and
+* draws the rule under its header solid; zine's dashes its header rule.
+*
+* **Its own module, and not in `_band.ts`**, whose docblock says why: docgen
+* publishes every `--cue-*` in that file as a token both `Band` and `Footer`
+* paint, and `Band` reads neither name here. A band's rule keeps its solid
+* under every set.
+*
+* @internal Not part of the public API.
+*/
+const FOOTER_RULE = "border-t-[length:var(--cue-style-footer-rule,var(--cue-band-rule))]";
+/** Both footer rules' line style, filling the slot their `border-t` utilities read. */
+const FOOTER_RULE_STYLE = "[--tw-border-style:var(--cue-style-footer-rule-style,solid)]";
+//#endregion
+export { FOOTER_RULE, FOOTER_RULE_STYLE };

package/dist/system/_style-gutter.js

@@ -0,0 +1,17 @@
+//#region src/system/_style-gutter.ts
+/**
+* A padded `Container`'s gutter (plan V.2, T119): `style-gutter`, falling back
+* to the `space-6` it drew. Tender's page column is 16px in from the viewport
+* on a phone and its band column is 1232px wide at 1440, where `space-6` is
+* 24px. A proportion of the rung (RUNG(`space-6`)), so it follows density.
+*
+* Spec §3.11 withdrew a `style-gutter` in round 1 because no row needed it;
+* T38 and T119 are the rows.
+*
+* **Optional** (spec §3.0). Its own module for docgen's reason.
+*
+* @internal Not part of the public API.
+*/
+const GUTTER = "px-[var(--cue-style-gutter,var(--cue-space-6))]";
+//#endregion
+export { GUTTER };