@cueplusplus/ui 0.16.0 → 0.18.0

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,58 @@
+//#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 set's `style-link-hover-ink`, else its
+* `style-hover-ink`, else the accent.
+*
+* Round 6 (spec §11, lane R6.T) splits the link's hover from the header
+* nav's: `style-hover-ink` also colours `AppBar.Link` under the pointer, and
+* stripe.com draws the two apart (its links hover to its brand-800, #2e2b8c;
+* its nav's triggers stay in their solid ink, #061b31, T144, T151). So the
+* link reads a name of its own first, falling back to the shared one, and a
+* set that names neither renders exactly what it did.
+*/
+const HOVER_INK = "hover:text-[color:var(--cue-style-link-hover-ink,var(--cue-style-hover-ink,var(--cue-accent)))]";
+/** An underlined link's rule under the pointer: the same chain as {@link HOVER_INK}. */
+const HOVER_RULE = "hover:decoration-[color:var(--cue-style-link-hover-ink,var(--cue-style-hover-ink,var(--cue-accent)))]";
+//#endregion
+export { HOVER_INK, HOVER_RULE, INLINE_LINK_INK, LINK_INK, LINK_OFFSET, LINK_RULE, LINK_WEIGHT };

package/dist/system/_style-menu.js

@@ -0,0 +1,43 @@
+//#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)))]";
+/**
+* A menu popup's minimum width (round 6, spec §11, lane R6.P:
+* `style-menu-min-width`), falling back to the `10rem` it drew. coss.com/ui's
+* menus start at 8rem (`min-w-32`, P163.min-width).
+*/
+const MENU_MIN_WIDTH = "min-w-[var(--cue-style-menu-min-width,10rem)]";
+/**
+* The inline inset of the rule between a menu's groups (round 6, spec §11, lane
+* R6.P: `style-menu-separator-inset`), falling back to the `0px` it drew: the
+* rule ran rim to rim. coss.com/ui's stops 8px short of each side
+* (P163.separator-inset).
+*/
+const MENU_SEPARATOR_INSET = "mx-[var(--cue-style-menu-separator-inset,0px)]";
+//#endregion
+export { MENU_ITEM_INK, MENU_ITEM_RADIUS, MENU_MIN_WIDTH, MENU_SEPARATOR_INSET };

package/dist/system/_style-meter.js

@@ -0,0 +1,15 @@
+//#region src/system/_style-meter.ts
+/**
+* A meter track's corner (round 6, spec §11, lane R6.P: `style-meter-radius`),
+* falling back to the `rounded-full` it drew. coss.com/ui's meter track is
+* square (P164.radius).
+*
+* **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 METER_RADIUS = "rounded-[var(--cue-style-meter-radius,calc(infinity*1px))]";
+//#endregion
+export { METER_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 };

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

@@ -0,0 +1,48 @@
+//#region src/system/_style-nav-menu.ts
+/**
+* `NavigationMenu`'s trigger (round 6, spec §11, lane R6.T): the header nav's
+* voice, padding and resting ink, and two names of its own, `style-nav-height`
+* and `style-nav-open-ground`.
+*
+* **It reads the header nav's names**, because a site's header draws its menu
+* triggers and its plain links as one row, in one voice: stripe.com's four
+* triggers and its Pricing link are all 14px, 400, #061b31 with no inline
+* padding (T16, T151); replit.com's are 13.3px and 14px, one ink, one
+* padding; greptile.com, coss.com and agent-native.com draw no header menu
+* trigger, only links (probed 2026-09-28). So the trigger reads
+* `style-nav-face`, `-case`, `-tracking`, `-size`, `-weight` and `-pad`,
+* which `AppBar.Link` reads, and `style-quiet-ink`, `AppBar.Link`'s muted
+* register. Each falls back to what the trigger drew — the control face, its
+* own `text-ui`, an inherited weight, tracking and case, `0 space-3` and
+* `fg-muted` — so a set that names none of them renders the trigger it did.
+*
+* The height and the open ground are its own: stripe.com's triggers stand
+* 40px on the nav's own padding (ours ride the `md` control rung) and draw no
+* ground when their panel is open (ours tint it `accent-soft`), T151.
+*
+* @internal Not part of the public API.
+*/
+const NAV_TRIGGER_VOICE = "font-[family-name:var(--cue-style-nav-face,var(--cue-style-control-face,var(--cue-font-mono)))] [text-transform:var(--cue-style-nav-case,inherit)] tracking-[var(--cue-style-nav-tracking,inherit)] text-[length:var(--cue-style-nav-size,var(--cue-text-ui))] font-[number:var(--cue-style-nav-weight,inherit)]";
+/** The trigger's resting ink: the header nav's muted register. */
+const NAV_TRIGGER_INK = "text-[color:var(--cue-style-quiet-ink,var(--cue-fg-muted))]";
+/** The trigger's padding: the header nav's. */
+const NAV_TRIGGER_PAD = "p-[var(--cue-style-nav-pad,0_var(--cue-space-3))]";
+/** The trigger's height. */
+const NAV_TRIGGER_HEIGHT = "h-[var(--cue-style-nav-height,var(--cue-control-md))]";
+/** An open trigger's ground. */
+const NAV_OPEN_GROUND = "data-[popup-open]:bg-[color:var(--cue-style-nav-open-ground,var(--cue-accent-soft))]";
+/**
+* The caret's ink (round 6, spec §11, lane R6.K: `style-nav-caret-ink`),
+* falling back to the `fg-subtle` it drew. replit.com draws its menu
+* triggers' carets in the trigger's own ink, #37383c (K159).
+*/
+const NAV_CARET_INK = "text-[color:var(--cue-style-nav-caret-ink,var(--cue-fg-subtle))]";
+/**
+* The trigger's hover ink: the header nav's `style-hover-ink`, falling back to
+* the `fg` it hovered to. replit.com's triggers hover to #2c2e31, the same
+* ink its header links hover to (K51, K159), so the trigger reads the name
+* `AppBar.Link` reads rather than a fixed `fg`.
+*/
+const NAV_TRIGGER_HOVER_INK = "hover:text-[color:var(--cue-style-hover-ink,var(--cue-fg))]";
+//#endregion
+export { NAV_CARET_INK, NAV_OPEN_GROUND, NAV_TRIGGER_HEIGHT, NAV_TRIGGER_HOVER_INK, NAV_TRIGGER_INK, NAV_TRIGGER_PAD, NAV_TRIGGER_VOICE };

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

@@ -0,0 +1,43 @@
+//#region src/system/_style-nav-voice.ts
+/**
+* The voice a navigation link speaks in — face, case, tracking, size and
+* weight — each the style set's choice, each falling back to what its reader
+* rendered before this existed.
+*
+* Spec 2026-09-26-looks-fidelity §3.8 (plan R4). `AppBar.Link` and `Footer`'s
+* column both said `font-mono text-(length:--cue-text-ui)` and nothing more,
+* so a Look whose header links are sans (tender, kiln, porcelain), uppercase
+* and tracked (zine) or medium (porcelain) could only say so with a class at
+* every call site, which a Look does not follow.
+*
+* **The fallbacks are the old classes, spelt out**, for the reason
+* `_style-control-face.ts` gives: none of these names is declared on `:root`,
+* and every set that declines one resets it to `initial` on the shared
+* `[data-style]` block (spec §3.0), so a reader resolves its own fallback at
+* itself. `font-mono` compiled to `var(--cue-font-mono)` and
+* `text-(length:--cue-text-ui)` to `var(--cue-text-ui)`. Case, tracking and
+* weight were inherited, and computed `none`, `normal` and `400` at both
+* readers under every shipped set — spec §3.8's three fallbacks.
+*
+* **Weight is written `font-[number:…]`.** A bare `font-[var(…)]` is read as a
+* family (plan §R1), and the `number` label makes it a weight to Tailwind —
+* which emits exactly what `font-medium` emits, `--tw-font-weight` included —
+* and to `tailwind-merge`, so a caller's `className="font-medium"` replaces it
+* through `cn()`. Spelt as an arbitrary `[font-weight:…]` property it survived
+* the merge beside the caller's class and won the cascade, because Tailwind
+* emits it after `font-medium`: `<AppBar.Link className="font-medium">` drew
+* 400. Case is an arbitrary property for the reason `_style-label-case.ts`
+* gives — no case utility takes a value — and nothing merges it with a
+* caller's `uppercase`, but Tailwind emits it before `uppercase`,
+* `normal-case` and the rest, so the caller's case still wins the cascade.
+*
+* **Its own module**, because `@repo/docgen` credits a component with every
+* `--cue-*` in each `_`-prefixed file it imports (`_style-control-face.ts`'s
+* note). `Footer` reads this voice and none of `AppBar.Link`'s own names, which
+* live in `_style-app-bar.ts`.
+*
+* @internal Not part of the public API.
+*/
+const NAV_VOICE = "font-[family-name:var(--cue-style-nav-face,var(--cue-font-mono))] [text-transform:var(--cue-style-nav-case,none)] tracking-[var(--cue-style-nav-tracking,normal)] text-[length:var(--cue-style-nav-size,var(--cue-text-ui))] font-[number:var(--cue-style-nav-weight,400)]";
+//#endregion
+export { NAV_VOICE };

package/dist/system/_style-option.js

@@ -0,0 +1,99 @@
+//#region src/system/_style-option.ts
+/**
+* One row of a list a control opens: `Select`'s items and the filterable
+* lists' (`Combobox`, `Autocomplete`, `MultiSelect`, `TagsInput`).
+*
+* Plan V.2 (T112, P112, P127). The two shared one class string —
+* `text-fg-muted … data-[highlighted]:bg-accent-soft … data-[selected]:text-accent`
+* — which no Look could reach, so a select under Tender drew a lilac selected
+* row on a lilac highlight where the source draws navy on a 5% wash, and under
+* Porcelain a square muted row where the source draws a rounded `fg` one.
+*
+* | part            | reads                                         | fallback                     |
+* |-----------------|-----------------------------------------------|------------------------------|
+* | idle ink        | `style-option-ink`                            | `var(--cue-fg-muted)`        |
+* | highlight       | `style-menu-highlight`, as a menu row's does  | `var(--cue-accent-soft)`     |
+* | selected ink    | `style-option-selected-ink`                   | `var(--cue-accent)`          |
+* | idle weight     | `style-body-weight`, on an unselected row     | `inherit`                    |
+* | corner          | `style-menu-item-radius`                      | `0px`                        |
+*
+* **Its own two inks**, not `style-quiet-ink` and `style-selected-ink`. The
+* quiet ink is a ghost button's and a menu row's; Tender's is `fg`, and its
+* select rows measure a 55% share of `fg` into `fg-muted`. The selected ink is
+* the sidebar's active item's and a table's selected row's; Tender's option
+* ink is navy where its sidebar keeps the lilac accent. Porcelain's rows,
+* which do measure `fg`, declare the option ink as `var(--cue-fg)`.
+*
+* **The weight goes on the unselected row only**, at zero specificity
+* (`[:where(&:not([data-selected]))]:`): Tender's body copy is 300 and its
+* selected row keeps the 400 it inherits, and a caller's `font-*` class on a
+* row still beats both, as it beat nothing before.
+*
+* The highlighted row's ink reads `style-option-highlight-ink` (round 6, lane
+* R6.G), falling back to the `fg` every Look's highlighted row drew:
+* agent-native.com's language listbox keeps its rows' `#3d3d3d` under the
+* pointer (G143.hover-ink). The weight is spelt out whole rather than composed from
+* `_style-body-weight.ts`: a variant prefixed onto an interpolated constant is
+* a class that appears in no source file, and a consumer's Tailwind, which
+* scans this package's build for candidates, would never generate it.
+*
+* @internal Not part of the public API.
+*/
+const OPTION_ROW = "rounded-[var(--cue-style-menu-item-radius,0px)] text-[color:var(--cue-style-option-ink,var(--cue-fg-muted))] [:where(&:not([data-selected]))]:font-[number:var(--cue-style-body-weight,inherit)] data-[highlighted]:bg-[color:var(--cue-style-menu-highlight,var(--cue-accent-soft))] data-[highlighted]:text-[color:var(--cue-style-option-highlight-ink,var(--cue-fg))] data-[selected]:text-[color:var(--cue-style-option-selected-ink,var(--cue-accent))]";
+/**
+* A listbox row's box (round 6, spec §11, lane R6.T: `style-option-pad`,
+* `style-option-leading`, `style-option-height`): the select's rows and the
+* combobox, autocomplete and multi-select rows (`forms/_listbox.ts`).
+*
+* stripe.com's rows (`.hds-listbox__item`) pad 12px, set 16px at 1.25 and
+* stand 36px tall (T149, T154), where ours pad `space-3` (8px at normal), set
+* an inherited leading, and ride the control ladder's `sm` rung (40px). Each
+* falls back to the class it replaced.
+*/
+const OPTION_PAD = "px-[calc(var(--cue-space-3)*var(--cue-style-option-pad,1))]";
+/** A listbox row's leading. */
+const OPTION_LEADING = "leading-[var(--cue-style-option-leading,inherit)]";
+/** A listbox row's height. */
+const OPTION_HEIGHT = "h-[var(--cue-style-option-height,var(--cue-control-sm))]";
+/**
+* A selected row's ground (round 6, spec §11, lane R6.K:
+* `style-option-selected-ground`), falling back to the `transparent` a
+* selected row drew: the recipe above marks selection by ink alone.
+* replit.com's credit-tier listbox fills its selected row with a warm tint,
+* #f5e7e2, under a deep accent ink (K147).
+*/
+const OPTION_SELECTED_GROUND = "data-[selected]:bg-[color:var(--cue-style-option-selected-ground,transparent)]";
+/**
+* A row that is selected *and* highlighted — the row a select opens on, and
+* the selected row under the pointer — keeps the highlight ground it drew
+* before `style-option-selected-ground` existed. The name's fallback here is
+* the highlight's own chain, and the two attributes together outrank either
+* alone, so the order Tailwind emits `data-[selected]` and `data-[highlighted]`
+* in cannot decide it. A set that names a selected ground (Kiln) paints it
+* under the pointer too. The closing pass's full runs found the gap
+* (T112.ground): with {@link OPTION_SELECTED_GROUND} alone, the open row lost
+* its highlight in every Look but Kiln, and in no Look at all.
+*/
+const OPTION_SELECTED_HIGHLIGHT_GROUND = "data-[selected]:data-[highlighted]:bg-[color:var(--cue-style-option-selected-ground,var(--cue-style-menu-highlight,var(--cue-accent-soft)))]";
+/**
+* A selected row under the pointer (the closing pass, lane R6.G:
+* `style-option-selected-hover-ground`), falling back to what the row paints
+* selected and highlighted ({@link OPTION_SELECTED_HIGHLIGHT_GROUND}), which a
+* pointer over it always is. A list opens with its selected row highlighted, so
+* a set that grounds that row needs the pointer's own ground to answer a hover:
+* agent-native.com's selected option sits on its raised ground, #ffffff /
+* #0f0f0f, until the pointer paints its hover fill over it (G143). `hover:` is
+* the pointer's alone, so a list opened from the keyboard keeps the selected
+* ground, and the third attribute outranks the two above.
+*/
+const OPTION_SELECTED_POINTER_GROUND = "data-[selected]:data-[highlighted]:hover:bg-[color:var(--cue-style-option-selected-hover-ground,var(--cue-style-option-selected-ground,var(--cue-style-menu-highlight,var(--cue-accent-soft))))]";
+/**
+* A listbox popup's own padding (lane R6.K: `style-listbox-pad`, PAD2),
+* falling back to the `space-1` block and `0` inline it drew (`py-(--cue-space-1)`).
+* replit.com's listbox pads 4px all round, so its rows sit inside the popup's
+* edge (K146). Read by `Select`'s popup and the listbox family's
+* (`forms/_listbox.ts`).
+*/
+const LISTBOX_PAD = "p-[var(--cue-style-listbox-pad,var(--cue-space-1)_0)]";
+//#endregion
+export { LISTBOX_PAD, OPTION_HEIGHT, OPTION_LEADING, OPTION_PAD, OPTION_ROW, OPTION_SELECTED_GROUND, OPTION_SELECTED_HIGHLIGHT_GROUND, OPTION_SELECTED_POINTER_GROUND };

package/dist/system/_style-otp.js

@@ -0,0 +1,15 @@
+//#region src/system/_style-otp.ts
+/**
+* The gap between an OTP field's slots (round 6, spec §11, lane R6.P:
+* `style-otp-gap`), falling back to the `space-2` it drew. coss.com/ui sets its
+* slots 8px apart (P166.gap).
+*
+* **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 OTP_GAP = "gap-[var(--cue-style-otp-gap,var(--cue-space-2))]";
+//#endregion
+export { OTP_GAP };

package/dist/system/_style-outline-hover.js

@@ -0,0 +1,18 @@
+//#region src/system/_style-outline-hover.ts
+/**
+* An outline button's hover (round 6, spec §11, lane R6.P:
+* `style-outline-hover-ground`, `style-outline-hover-edge`), falling back to
+* the transparent ground and `accent` edge it drew. coss.com/ui's outline
+* button fills a faint ink on hover and keeps its rim grey (P145.outline,
+* P145.outline-edge).
+*
+* **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 OUTLINE_HOVER_GROUND = "hover:bg-[color:var(--cue-style-outline-hover-ground,transparent)]";
+/** @see OUTLINE_HOVER_GROUND */
+const OUTLINE_HOVER_EDGE = "hover:border-[color:var(--cue-style-outline-hover-edge,var(--cue-accent))]";
+//#endregion
+export { OUTLINE_HOVER_EDGE, OUTLINE_HOVER_GROUND };

package/dist/system/_style-overlay-title.js

@@ -0,0 +1,35 @@
+//#region src/system/_style-overlay-title.ts
+/**
+* The heading line of a dialog, an alert dialog, a drawer, a sheet or a popover:
+* the title voice's face, weight, ink and variation, at its own size.
+*
+* Spec 2026-09-26-looks-fidelity §3.3, plan R1. `overlayTitleClasses` spelt
+* `font-mono text-(length:--cue-text-emphasis) font-medium text-fg`. It reads
+* `style-title-face` and `style-title-weight` because a Look's dialog title is
+* its card title's face and weight, but `style-overlay-title-size` rather than
+* `style-title-size`, because the one Look that sizes it measured them apart
+* (Porcelain: a 20px dialog title over 16px card titles, P42). It reads no
+* tracking and no leading: no Look measured either on an overlay.
+*
+* | property                | reads                      | fallback (the class it replaced) |
+* |-------------------------|----------------------------|----------------------------------|
+* | font-family             | `style-title-face`         | `var(--cue-font-mono)` (`font-mono`) |
+* | font-size               | `style-overlay-title-size` | `var(--cue-text-emphasis)` |
+* | font-weight             | `style-title-weight`       | `500` (`font-medium`) |
+* | font-variation-settings | `style-display-variation`  | `normal` |
+* | color                   | `style-heading-ink`        | `var(--cue-fg)` (`text-fg`) |
+*
+* `style-display-variation` is here although the plan's R1 list for this site
+* leaves it out: the spec (§3.1) names "the title-voice readers" as its readers,
+* and §3.3 names this title as one of them.
+*
+* **Every name is optional** (spec §3.0), so under every shipped set each
+* `var()` resolves its fallback at the title. A module of its own and not an
+* import of `_style-title.ts`, which would publish that file's size, tracking and
+* leading as tokens every overlay paints.
+*
+* @internal Not part of the public API.
+*/
+const OVERLAY_TITLE_VOICE = "font-[family-name:var(--cue-style-title-face,var(--cue-font-mono))] text-[length:var(--cue-style-overlay-title-size,var(--cue-text-emphasis))] leading-[var(--cue-style-overlay-title-leading,inherit)] font-[number:var(--cue-style-title-weight,500)] [font-variation-settings:var(--cue-style-display-variation,normal)] text-[color:var(--cue-style-heading-ink,var(--cue-fg))]";
+//#endregion
+export { OVERLAY_TITLE_VOICE };