@cueplusplus/ui 0.15.0 → 0.17.0

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 };

package/dist/system/_style-help-ink.js

@@ -0,0 +1,14 @@
+//#region src/system/_style-help-ink.ts
+/**
+* The help ink, for a site that reads it without the help size: a table's
+* caption and the breadcrumb's separator (plan V.2, P122, P128) —
+* `style-help-ink`, falling back to the `fg-subtle` both drew. The same class
+* `_style-help.ts`'s `HELP_INK` spells for a field's description, restated in
+* a module of its own so docgen does not publish `style-help-size` as a
+* token of a table or a breadcrumb.
+*
+* @internal Not part of the public API.
+*/
+const HELP_INK = "text-[color:var(--cue-style-help-ink,var(--cue-fg-subtle))]";
+//#endregion
+export { HELP_INK };

package/dist/system/_style-help.js

@@ -0,0 +1,29 @@
+//#region src/system/_style-help.ts
+/**
+* The size and ink of a field's helper text: the micro rung in `fg-subtle`,
+* until a style set says otherwise.
+*
+* Spec 2026-09-26-looks-fidelity §3.5, plan R1. `FieldDescription` and
+* `FieldError` each spelt `font-mono text-(length:--cue-text-micro)`, the
+* description in `fg-subtle` and the error in `danger`. Tender and Porcelain set
+* helper text a rung larger and a step darker (T55, P48), in the Look's label
+* face — so both lines now wear `LABEL_FACE` and read the size here, and the
+* description reads the ink. The error keeps `danger`: a Look's helper ink is
+* not a reason to quieten a validation message.
+*
+* | property  | reads             | fallback                  |
+* |-----------|-------------------|---------------------------|
+* | font-size | `style-help-size` | `var(--cue-text-micro)`   |
+* | color     | `style-help-ink`  | `var(--cue-fg-subtle)`    |
+*
+* **Both names are optional** (spec §3.0), declared on no `:root` and left at the
+* shared `[data-style]` reset by every shipped set, so each reader computes the
+* old class's value at the element.
+*
+* @internal Not part of the public API.
+*/
+const HELP_SIZE = "text-[length:var(--cue-style-help-size,var(--cue-text-micro))]";
+/** @see HELP_SIZE — the description's ink; `FieldError` keeps `text-danger`. */
+const HELP_INK = "text-[color:var(--cue-style-help-ink,var(--cue-fg-subtle))]";
+//#endregion
+export { HELP_INK, HELP_SIZE };

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

@@ -0,0 +1,34 @@
+//#region src/system/_style-input-face.ts
+/**
+* The face a typing surface wears: mono by default, the style set's choice
+* inside one.
+*
+* Spec 2026-09-26 (the label-voice brief). `forms/_chassis.ts`'s
+* `controlSurface` and `bareControlClasses` — the shared recessed-control
+* chassis a text field, a textarea, a number field, a combobox, a select
+* trigger and everything else a person types into all ride — spoke
+* `font-mono` before this existed, the same fact `_style-control-face.ts`
+* records for `Button`. What was missing was a way for a sans-voiced Look to
+* change the ONE surface that is neither a control nor a caption: text a
+* person types, which a face chosen per call site would not follow. So the
+* style set says it, through `--cue-style-input-face`, and this reads it.
+*
+* **The fallback is the old class, spelt out**, for the identical reason
+* `_style-control-face.ts` gives: `font-mono` compiles to
+* `font-family: var(--cue-font-mono)`, and `--cue-style-input-face` is
+* declared on no `:root`, so under no set this resolves to exactly what
+* `font-mono` resolved to, at the control itself. A call site that
+* deliberately keeps a typed value in mono regardless of the set — a hex
+* colour code, a DMX value, anything code-shaped rather than prose — restates
+* `font-mono` directly instead of importing this, exactly as `color-picker.tsx`
+* already did for its hex field before this axis existed.
+*
+* **Its own module**, for the reason `_style-control-face.ts` gives: one
+* reader per file, so `@repo/docgen` attributes exactly this token to exactly
+* the components that import it.
+*
+* @internal Not part of the public API.
+*/
+const INPUT_FACE = "font-[family-name:var(--cue-style-input-face,var(--cue-font-mono))]";
+//#endregion
+export { INPUT_FACE };

package/dist/system/_style-kbd.js

@@ -0,0 +1,46 @@
+//#region src/system/_style-kbd.ts
+/**
+* A key cap's rim and size: the box edge and the micro rung by default, the
+* style set's choice inside one.
+*
+* Spec 2026-09-26-looks-fidelity §3.6 (R2), F-16. `Kbd` spent `border-border`
+* and `text-(length:--cue-text-micro)`. Porcelain's `MenuShortcut` key caps
+* have no rim at all and sit at 0.75rem (coss.md, P55), which a set says as
+* `--cue-style-kbd-edge: transparent` and `--cue-style-chip-size: 0.75rem` —
+* the chip's size name, because `Kbd` is sized off `h-chip` to sit on a chip's
+* row, and a Look that retunes one retunes both. The border's width stays, so
+* a key cap keeps its box and its baseline in every Look.
+*
+* Both names are optional (spec §3.0, F-3): under no set, `console` and every
+* set that declines them each reader resolves to exactly what the class it
+* replaced resolved to, at the key cap itself.
+*
+* **Put {@link KBD_SIZE} before `leading-none` in the same `cn()`**, as
+* `_style-label-size.ts` explains: `tailwind-merge` drops a `leading-*` that a
+* later font-size follows.
+*
+* **Its own module**, apart from `_style-chip.ts` though it reads one of the
+* chip's names, because `@repo/docgen` credits every importer with every token
+* in a file, and `Kbd` reads none of the chip's other names.
+*
+* @internal Not part of the public API.
+*/
+const KBD_EDGE = "border-[color:var(--cue-style-kbd-edge,var(--cue-border))]";
+/** @see KBD_EDGE — the key cap's size: the chip's size name, the micro rung by default. */
+const KBD_SIZE = "text-[length:var(--cue-style-kbd-size,var(--cue-style-chip-size,var(--cue-text-micro)))]";
+/**
+* The key cap's own box (plan V.2, P55, P111): its height and minimum width
+* (`style-kbd-height`, the `chip-h` it shared with the chip), its inline
+* padding (`style-kbd-pad`, `space-2`) and its corner (`style-kbd-radius`, the
+* `rounded-control` corner). Porcelain's key caps are 20px, 4px in and
+* rounded at 0.4 of its control corner, while its chips are a phone-to-desktop
+* clamp — so the cap stopped riding the chip's `h-chip`.
+*
+* The size above reads `style-kbd-size` first for the same reason (P14):
+* Porcelain's chip text ramps from 14px on a phone to 12px on a desktop,
+* where its key caps stay 12px. It falls back through the chip's size, so a
+* Look that names only the chip's keeps its key caps beside it.
+*/
+const KBD_BOX = "h-[var(--cue-style-kbd-height,var(--cue-chip-h))] min-w-[var(--cue-style-kbd-height,var(--cue-chip-h))] px-[var(--cue-style-kbd-pad,var(--cue-space-2))] rounded-[var(--cue-style-kbd-radius,calc(var(--cue-radius-control)*var(--cue-radius-scale)))]";
+//#endregion
+export { KBD_BOX, KBD_EDGE, KBD_SIZE };

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

@@ -0,0 +1,36 @@
+//#region src/system/_style-label-case.ts
+/**
+* The `text-transform` a chassis caption wears: `uppercase` by default, the
+* style set's choice inside one.
+*
+* Spec 2026-09-26 (the label-voice brief). Every mono-uppercase chassis
+* caption spent a literal `uppercase` utility before this existed, and a face
+* changed to sans through {@link LABEL_FACE} alone still shouts — a sentence-
+* case label rendered in a sans face and still transformed to caps is a sans
+* label wearing the console's voice, not the source site's. So the two travel
+* together at every call site.
+*
+* **The fallback is the old class, spelt out.** `uppercase` compiles to
+* `text-transform: uppercase`, and `--cue-style-label-case` is declared on no
+* `:root` — deliberately, for the identical reason `_style-control-face.ts`
+* gives for its own name: a `:root` declaration would freeze the page's
+* choice into every nested font or theme island. So under no set this
+* resolves to exactly what `uppercase` resolved to, at the label itself; and
+* every shipped set but a sans-voiced one restates `uppercase`, which
+* `@cueplusplus/tokens` refuses to build otherwise for `console`.
+*
+* Written as a bare arbitrary property (`[text-transform:…]`) rather than a
+* named Tailwind utility because none of Tailwind's `uppercase` / `lowercase`
+* / `capitalize` / `normal-case` utilities take a dynamic value — the same
+* reason `_paint-*` readers reach for `[mask-image:…]` and `[background-*:…]`
+* instead of a utility that does not exist for a `var()`-driven keyword.
+*
+* **Its own module**, for the reason `_style-control-face.ts` gives: one
+* reader per file, so `@repo/docgen` attributes exactly this token to exactly
+* the components that import it.
+*
+* @internal Not part of the public API.
+*/
+const LABEL_CASE = "[text-transform:var(--cue-style-label-case,uppercase)]";
+//#endregion
+export { LABEL_CASE };

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

@@ -0,0 +1,32 @@
+//#region src/system/_style-label-face.ts
+/**
+* The face a chassis caption wears: mono by default, the style set's choice inside one.
+*
+* Spec 2026-09-26 (the label-voice brief). `FieldLabel`, `Eyebrow`, a table head,
+* a `Stat` label, a group or section heading and a dozen more chassis sites all
+* spoke `font-mono … uppercase` before this existed — the same fact
+* `_style-control-face.ts` records for `Button` and the `Tabs` trigger, one
+* layer over. What was missing was a way for a sans-voiced Look (stripe's,
+* replit's, coss's) to change a LABEL's face rather than only a control's, and
+* a face chosen per call site would not follow the Look. So the style set says
+* it, through `--cue-style-label-face`, and this reads it.
+*
+* Always paired with {@link LABEL_CASE}: a sans face still shouting in caps is
+* still the console's voice, not the source site's, so the two travel
+* together at every call site.
+*
+* **The fallback is the old class, spelt out**, for the identical reason
+* `_style-control-face.ts` gives: `font-mono` compiles to
+* `font-family: var(--cue-font-mono)`, and `--cue-style-label-face` is
+* declared on no `:root`, so under no set this resolves to exactly what
+* `font-mono` resolved to, at the label itself.
+*
+* **Its own module**, because `@repo/docgen` attributes a token to a component
+* by the file its class string lives in, following only `_`-prefixed imports.
+* One reader per file — see `_style-control-face.ts`'s note.
+*
+* @internal Not part of the public API.
+*/
+const LABEL_FACE = "font-[family-name:var(--cue-style-label-face,var(--cue-font-mono))]";
+//#endregion
+export { LABEL_FACE };

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

@@ -0,0 +1,29 @@
+//#region src/system/_style-label-ink.ts
+/**
+* A chassis caption's ink: its own historic role by default, one shared ink
+* inside a style set that declares `--cue-style-label-ink`.
+*
+* Spec 2026-09-26-looks-fidelity §3.6 (R2). Two inks, both already on the
+* page: `FieldLabel`, a `SectionHeader` label and the `Checkbox` and `Switch`
+* labels spent `text-fg-muted`; a table head and a group row, a
+* `Sidebar.Section` label, a `Stat` label and a menu group label spent the
+* quieter `text-fg-subtle`. Tender and porcelain draw every caption in the
+* body ink (`var(--cue-fg)`), kiln in the muted one — one value a set says
+* once, which is why the name exists.
+*
+* **Optional, so each reader keeps its own fallback** (spec §3.0, F-3): under
+* no set, `console` and every set that declines the name this resolves to
+* exactly what `text-fg-muted` or `text-fg-subtle` resolved to, at the label
+* itself — so a nested theme island still repaints it.
+*
+* **Its own module**, for the reason `_style-control-face.ts` gives: one
+* token per file, so `@repo/docgen` credits exactly the components that read
+* the label ink with it.
+*
+* @internal Not part of the public API.
+*/
+const LABEL_INK = "text-[color:var(--cue-style-label-ink,var(--cue-fg-muted))]";
+/** @see LABEL_INK — for a reader that spent `text-fg-subtle` before this existed. */
+const LABEL_INK_SUBTLE = "text-[color:var(--cue-style-label-ink,var(--cue-fg-subtle))]";
+//#endregion
+export { LABEL_INK, LABEL_INK_SUBTLE };

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

@@ -0,0 +1,14 @@
+//#region src/system/_style-label-leading.ts
+/**
+* A field label's leading (plan V.2, P10): `style-label-leading`, falling back
+* to the `leading-none` (`1`) the label drew. Porcelain's field label is 16px
+* on 14px type, a 1.143 leading.
+*
+* **Optional** (spec §3.0). 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 LABEL_LEADING = "leading-[var(--cue-style-label-leading,1)]";
+//#endregion
+export { LABEL_LEADING };

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

@@ -0,0 +1,36 @@
+//#region src/system/_style-label-size.ts
+/**
+* A chassis caption's size: its own historic rung by default, one shared size
+* inside a style set that declares `--cue-style-label-size`.
+*
+* Spec 2026-09-26-looks-fidelity §3.6 (R2). `FieldLabel`, a `SectionHeader`
+* label, a table head and a group row, a `Sidebar.Section` label and a menu
+* group label all spent `text-(length:--cue-text-label)`; the `Stat` label
+* alone spent `text-(length:--cue-text-micro)`. The four measured Looks set
+* their captions at one size (tender and porcelain 0.875rem, zine and kiln
+* 0.75rem), and a size chosen per call site would not follow the Look.
+*
+* **Optional, so each reader keeps its own fallback** (spec §3.0, F-3): the
+* name is emitted as `initial` on the shared `[data-style]` reset, so under no
+* set, `console` and every set that declines it this resolves to exactly what
+* the class it replaced resolved to, at the label itself — which is also what
+* keeps a `<Density>` island's rung reaching it.
+*
+* **Put it before any `leading-*` class in the same `cn()`.** `tailwind-merge`
+* reads a font-size utility as overriding an earlier line-height one (Tailwind's
+* named sizes carry a line-height), so `cn("leading-none", LABEL_SIZE)` drops
+* the `leading-none`. The class this replaced had the same rule; the order at
+* each call site is the order it already had.
+*
+* **Its own module**, for the reason `_style-control-face.ts` gives:
+* `@repo/docgen` attributes a token to a component by the file its class
+* string lives in, so a component that reads the label ink but not the label
+* size (`Checkbox`, `Switch`) is not credited with this one.
+*
+* @internal Not part of the public API.
+*/
+const LABEL_SIZE = "text-[length:var(--cue-style-label-size,var(--cue-text-label))]";
+/** @see LABEL_SIZE — for the `Stat` label, which read the micro rung before this existed. */
+const LABEL_SIZE_MICRO = "text-[length:var(--cue-style-label-size,var(--cue-text-micro))]";
+//#endregion
+export { LABEL_SIZE, LABEL_SIZE_MICRO };

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

@@ -0,0 +1,45 @@
+//#region src/system/_style-label-tracking.ts
+/**
+* A label's tracking: its own historic rung of the caps ladder by default, one
+* shared tracking inside a style set that declares it.
+*
+* Spec 2026-09-26 (the label-voice brief). Unlike {@link LABEL_FACE} and the
+* case reader beside it, this name is **optional**
+* (`@cueplusplus/tokens`' `STYLE_SET_OPTIONAL`), because its readers do not
+* share one fallback. `FieldLabel`, `Slider`, a calendar weekday and the
+* stepper trail all read `tracking-caps-tight`; `Eyebrow` alone reads
+* `tracking-caps-loose`; a table head, a `Stat` label, a group heading and
+* most of the rest read plain `tracking-caps` — three different values, each
+* already what that component renders today. A set that declines the name (as
+* every mono set does) leaves every reader at its own historic tier, which is
+* the no-op this axis promises; a set that declares one real value (`normal`,
+* for `tender`, `kiln` and `porcelain`) overrides every reader to that SAME
+* tracking at once, regardless of which tier it used to read — which is the
+* point under a sans, sentence-case voice: there is no caps rung left to
+* space out.
+*
+* Three exports, one token: each pairs `--cue-style-label-tracking` with the
+* one ladder rung that call site read before this existed, so a component
+* that switches to one of these keeps rendering its own historic value under
+* every set that declines the name — which today is every set but the three
+* sans ones.
+*
+* **Its own module**, for the reason `_style-control-face.ts` gives: one
+* reader per file, so `@repo/docgen` attributes exactly this token to exactly
+* the components that import it, regardless of which of the three exports a
+* given file reaches for.
+*
+* @internal Not part of the public API.
+*/
+const LABEL_TRACKING = "tracking-[var(--cue-style-label-tracking,var(--cue-tracking-caps))]";
+/** @see LABEL_TRACKING — for a reader that read `tracking-caps-tight` before this existed. */
+const LABEL_TRACKING_TIGHT = "tracking-[var(--cue-style-label-tracking,var(--cue-tracking-caps-tight))]";
+/** @see LABEL_TRACKING — for a reader that read `tracking-caps-loose` before this existed. */
+const LABEL_TRACKING_LOOSE = "tracking-[var(--cue-style-label-tracking,var(--cue-tracking-caps-loose))]";
+/**
+* {@link LABEL_TRACKING} for a caption that declared no tracking of its own
+* (plan V.2, K131): the label tracking, falling back to `inherit`.
+*/
+const LABEL_TRACKING_INHERIT = "tracking-[var(--cue-style-label-tracking,inherit)]";
+//#endregion
+export { LABEL_TRACKING, LABEL_TRACKING_INHERIT, LABEL_TRACKING_LOOSE, LABEL_TRACKING_TIGHT };

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

@@ -0,0 +1,40 @@
+//#region src/system/_style-label-weight.ts
+/**
+* A chassis caption's weight: what it rendered before by default, one shared
+* weight inside a style set that declares `--cue-style-label-weight`.
+*
+* Spec 2026-09-26-looks-fidelity §3.6 (R2). Porcelain's captions, table heads,
+* group labels, tags and key caps are `font-medium` (coss.md §4); every other
+* Look's are regular. The label readers, `Chip` and `Kbd` read it.
+*
+* **Two fallbacks, because the sites declared two different things.** The
+* table head and the table group row are `<th>` cells, whose user-agent weight
+* is bold, and they spent `font-normal` to undo it: their reader falls back to
+* `400`, {@link LABEL_WEIGHT_NORMAL}. Every other reader declared no weight at
+* all and inherited its parent's, so its fallback is `inherit`,
+* {@link LABEL_WEIGHT} — the spec's `400` is what each of them computes on a
+* page, but a literal `400` would override the weight a `Kbd` or a `Chip`
+* inherits from a heavier parent today, which a fallback may not do (the R
+* lanes' rule: the fallback is the site's current value).
+*
+* **Written `font-[number:…]`, not as a bare `[font-weight:…]` property.** The
+* `number:` hint is what makes Tailwind emit `font-weight` (and not a family)
+* for a `var()`, and it is also what `tailwind-merge` reads as a font weight: a
+* caller's `className="font-medium"` replaces this class, as it replaced
+* `font-normal`. A bare `[font-weight:…]` would not merge, and Tailwind sorts
+* it AFTER every named `font-*` utility (measured: a named weight declares
+* `--tw-font-weight` too, and a rule with more declarations sorts first), so
+* the caller's weight would silently lose — against every `className` prop's
+* "merged over the defaults" contract.
+*
+* **Its own module**, for the reason `_style-control-face.ts` gives: one
+* token per file, so `@repo/docgen` credits `Chip` and `Kbd` with the label
+* weight and not with the label size or ink they do not read.
+*
+* @internal Not part of the public API.
+*/
+const LABEL_WEIGHT = "font-[number:var(--cue-style-label-weight,inherit)]";
+/** @see LABEL_WEIGHT — for a `<th>` reader that spent `font-normal` before this existed. */
+const LABEL_WEIGHT_NORMAL = "font-[number:var(--cue-style-label-weight,400)]";
+//#endregion
+export { LABEL_WEIGHT, LABEL_WEIGHT_NORMAL };

package/dist/system/_style-lede.js

@@ -0,0 +1,49 @@
+//#region src/system/_style-lede.ts
+/**
+* The `PageShell` subtitle's size and ink: the lede under a page title.
+*
+* Spec 2026-09-26-looks-fidelity §3.5 and §10.4, plan R1 and its Graphite
+* addition. The subtitle spelt `text-(length:--cue-text-ui) … text-fg-muted`.
+* It is a lede — the one sentence under a title, which three Looks set a rung
+* above their body copy (T2, Z43, P1) — so it reads `style-lede-size`; and a
+* lede's ink is `style-lede-ink`, which falls back to the prose ink, which falls
+* back to the old class. Two names for one colour because Graphite's docs body
+* reads in `fg` while its ledes stay muted (G5 against G74), and Kiln's ledes
+* read in `fg` with its prose (K49): so a set that names only the prose ink
+* moves the ledes with it, and one that also names the lede ink parts them.
+*
+* | property  | reads                                      | fallback               |
+* |-----------|--------------------------------------------|------------------------|
+* | font-size | `style-lede-size`                          | `var(--cue-text-ui)`   |
+* | color     | `style-lede-ink`, then `style-prose-ink`   | `var(--cue-fg-muted)`  |
+*
+* `style-lede-ink` enters the contract with Graphite's round (plan L5.1); until
+* it does, nothing declares it and the chain reads the prose ink, and nothing
+* declares that either — so under every shipped set the subtitle computes
+* `fg-muted`, as it did. The docs site's ledes size from `--docs-text-body`
+* instead and are the docs site's own readers (spec §5.2), not this constant.
+*
+* Two constants, not one, because the subtitle's `leading-*` sits between them:
+* `tailwind-merge` drops a `leading-*` that precedes a font size in one list.
+*
+* @internal Not part of the public API.
+*/
+const LEDE_SIZE = "text-[length:var(--cue-style-lede-size,var(--cue-text-ui))]";
+/** @see LEDE_SIZE — the lede's ink, through the prose ink to `fg-muted`. */
+const LEDE_INK = "text-[color:var(--cue-style-lede-ink,var(--cue-style-prose-ink,var(--cue-fg-muted)))]";
+/**
+* The lede's leading (plan V.2, T110, Z95, Z96, P1): `style-lede-leading`,
+* falling back to the `leading-ui` the subtitle drew. Three Looks set their
+* ledes on a leading of their own — Tender 1.4, Porcelain 1.5 and Zine a clamp
+* from 1.4 on a phone to 1.3333 on a desktop — none of which is their body's.
+*/
+const LEDE_LEADING = "leading-[var(--cue-style-lede-leading,var(--cue-leading-ui))]";
+/**
+* The lede's tracking (plan V.2, Z96): the prose tracking, which spec §3.5
+* already gives "the prose readers and ledes", falling back to `inherit` — the
+* subtitle declared none. Kiln (-0.02em) and Zine (-0.01em) declare it, so
+* their `PageShell` subtitles take their prose's tracking with this.
+*/
+const LEDE_TRACKING = "tracking-[var(--cue-style-prose-tracking,inherit)]";
+//#endregion
+export { LEDE_INK, LEDE_LEADING, LEDE_SIZE, LEDE_TRACKING };

package/dist/system/_style-link.js

@@ -0,0 +1,46 @@
+//#region src/system/_style-link.ts
+/**
+* `Link`'s ink, rule, offset, weight and hover ink, each a style-set name read
+* with the class it replaced as its fallback.
+*
+* Fidelity spec 2026-09-26 §3.7 (plan R3). Tender inks its links in the
+* accent, kiln its prose links in the focus colour; four Looks rule the
+* underline in the text's own colour rather than a hairline, tender draws it
+* 2px under rather than 4px, porcelain sets its links at 500, and kiln and
+* zine hover to an ink other than the accent. Each is the set's to say.
+*
+* **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:
+* `fg` for the ink, `border` for the rule, `4px` for the offset, the
+* accent on hover, and `inherit` for the weight — the link set no weight, and
+* took its parent's.
+*
+* `INLINE_LINK_INK` falls back through `style-link-ink`, so a set that inks
+* every link (tender) inks the prose link too without saying so twice, and a
+* set that inks only prose links (kiln) leaves the plain link alone.
+*
+* **Its own module**, for the reason `_style-control-face.ts` gives:
+* `@repo/docgen` attributes every token a file spells to each component that
+* imports it. Only `layout/link.tsx` imports this.
+*
+* @internal Not part of the public API.
+*/
+/** Every link's ink: `fg`, or the set's `style-link-ink`. */
+const LINK_INK = "text-[color:var(--cue-style-link-ink,var(--cue-fg))]";
+/** The `underline` variant's ink: the set's `style-inline-link-ink`, else {@link LINK_INK}'s chain. */
+const INLINE_LINK_INK = "text-[color:var(--cue-style-inline-link-ink,var(--cue-style-link-ink,var(--cue-fg)))]";
+/** The underline's colour: `border`, or the set's `style-link-rule`. */
+const LINK_RULE = "decoration-[color:var(--cue-style-link-rule,var(--cue-border))]";
+/** The underline's offset: 4px, or the set's `style-link-offset`. */
+const LINK_OFFSET = "underline-offset-[var(--cue-style-link-offset,4px)]";
+/**
+* Every link's weight: its parent's, or the set's `style-link-weight`.
+* `font-[number:…]` rather than an arbitrary `[font-weight:…]`, so a caller's
+* `font-*` weight still replaces it through `twMerge` — `_style-control.ts`'s
+* `CONTROL_WEIGHT` says why.
+*/
+const LINK_WEIGHT = "font-[number:var(--cue-style-link-weight,inherit)]";
+/** Every link's hover ink: the accent, or the set's `style-hover-ink`. */
+const HOVER_INK = "hover:text-[color:var(--cue-style-hover-ink,var(--cue-accent))]";
+//#endregion
+export { HOVER_INK, INLINE_LINK_INK, LINK_INK, LINK_OFFSET, LINK_RULE, LINK_WEIGHT };

package/dist/system/_style-menu.js

@@ -0,0 +1,30 @@
+//#region src/system/_style-menu.ts
+/**
+* A menu row's resting ink and its highlight.
+*
+* Spec 2026-09-26-looks-fidelity §3.7 and §3.8 (plan R4). `menuItemClasses`
+* said `text-fg-muted` and `data-[highlighted]:bg-accent-soft`. A Look whose
+* menu rows are full-contrast (tender, porcelain) or whose highlight is a
+* faint neutral or none (porcelain, kiln) reads these names instead.
+*
+* **The fallbacks are the classes they replace**: `var(--cue-fg-muted)` —
+* spec §3.7 gives `style-quiet-ink` that fallback for a menu row — and
+* `var(--cue-accent-soft)`.
+*
+* **Its own module**, for the docgen reason `_style-nav-voice.ts` gives. It is
+* reached through `overlays/_surface.ts`, whose every importer docgen already
+* credits with the whole overlay recipe.
+*
+* @internal Not part of the public API.
+*/
+const MENU_ITEM_INK = "text-[color:var(--cue-style-quiet-ink,var(--cue-fg-muted))] data-[highlighted]:bg-[color:var(--cue-style-menu-highlight,var(--cue-accent-soft))]";
+/**
+* A menu row's corner (plan V.2, P112): `style-menu-item-radius`, falling back
+* to the `rounded-control` corner the row drew. Porcelain rounds its menu and
+* select rows at 0.6 of its control corner. A select's and a filterable list's
+* rows read the same name with a `0px` fallback (`_style-option.ts`), since
+* they drew no corner.
+*/
+const MENU_ITEM_RADIUS = "rounded-[var(--cue-style-menu-item-radius,calc(var(--cue-radius-control)*var(--cue-radius-scale)))]";
+//#endregion
+export { MENU_ITEM_INK, MENU_ITEM_RADIUS };

package/dist/system/_style-nav-item.js

@@ -0,0 +1,41 @@
+//#region src/system/_style-nav-item.ts
+/**
+* What a `Sidebar.Item` reads from the style set: its resting ink, and the
+* ground, ink and weight of the item that is the current page.
+*
+* Spec 2026-09-26-looks-fidelity §3.8 and §10.4 (plan R4 and its Graphite
+* addition). The item said `text-fg-muted` at rest and, as the current page, an
+* `accent-soft` ground under an `accent` ink. A Look whose sidebar is a softer
+* ink (porcelain), whose current page is inverted (kiln), tinted and medium
+* (porcelain) or marked by ink alone (graphite) reads these names instead.
+*
+* **Every fallback is the class it replaced**, for the reason
+* `_style-control-face.ts` gives: `var(--cue-fg-muted)`, `var(--cue-accent-soft)`
+* and `var(--cue-accent)`, and `400` for the weight, which the item inherited
+* and computed under every shipped set.
+*
+* **The active weight yields to a caller's own weight.** The item set no
+* weight in any state, so `<Sidebar.Item className="font-medium">` was 500
+* whether current or not. A `data-[active]:` weight is `(0,2,0)` and would
+* beat that class on the current item alone, so it is written
+* `[:where(&[data-active])]:` — the same state at zero specificity — and a
+* caller's weight class wins in both states again. The active ground and ink
+* replaced `data-[active]:` classes and keep their standing, as those did.
+*
+* **The active ground reads two names, the sidebar's own first.**
+* `style-selected-ground` is also the selected table row's ground
+* (`_style-selected.ts`), where `transparent` would leave a selection with no
+* mark at all; graphite's sidebar has no fill (G57). So the item reads
+* `style-nav-active-ground` and falls back through `style-selected-ground`,
+* which keeps kiln's and porcelain's values here, and the table reads
+* `style-selected-ground` alone (spec §10.4). `style-nav-active-ground`
+* entered the contract in the fidelity plan's L5.1, and `graphite` declares it
+* `transparent` (G57).
+*
+* **Its own module**, for the docgen reason `_style-nav-voice.ts` gives.
+*
+* @internal Not part of the public API.
+*/
+const NAV_ITEM = "text-[color:var(--cue-style-nav-ink,var(--cue-fg-muted))] data-[active]:bg-[color:var(--cue-style-nav-active-ground,var(--cue-style-selected-ground,var(--cue-accent-soft)))] data-[active]:text-[color:var(--cue-style-selected-ink,var(--cue-accent))] [:where(&[data-active])]:font-[number:var(--cue-style-selected-weight,400)]";
+//#endregion
+export { NAV_ITEM };