@cueplusplus/ui 0.16.0 → 0.18.0

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

@@ -0,0 +1,48 @@
+//#region src/system/_style-page-title.ts
+/**
+* The `PageShell` h1's voice: mono, `text-title`, weight 500, at the page's own
+* tracking and leading, in `fg`, until a style set says otherwise.
+*
+* Spec 2026-09-26-looks-fidelity §3.2 (and §3.1 for the ink and the variation),
+* plan R1. The page title and a card's title are separate voices, because three
+* Looks measure them apart: Porcelain 36px against 16px, Kiln 64px against 32px,
+* Zine a display face against a sans. So the h1 reads its own five
+* `style-page-title-*` names rather than the title voice's
+* (`_style-title.ts`), and shares only the two names every heading shares:
+* `style-heading-ink` and `style-display-variation`.
+*
+* | property                | reads                          | fallback (the class it replaced) |
+* |-------------------------|--------------------------------|----------------------------------|
+* | font-family             | `style-page-title-face`        | `var(--cue-font-mono)` (`font-mono`) |
+* | font-size               | `style-page-title-size`        | `var(--cue-text-title)` |
+* | font-weight             | `style-page-title-weight`      | `500` (`font-medium`) |
+* | letter-spacing          | `style-page-title-tracking`    | `normal` |
+* | line-height             | `style-page-title-leading`     | `inherit` |
+* | font-variation-settings | `style-display-variation`      | `normal` |
+* | color                   | `style-heading-ink`            | `var(--cue-fg)` (`text-fg`) |
+*
+* **Every name is optional** (spec §3.0): none is declared on `:root`, `console`
+* declines each, and every shipped set leaves them at the shared
+* `[data-style] { …: initial }` reset, so each `var()` resolves its fallback at
+* the h1 itself — the value the old class computed there, under every set and in
+* every density island.
+*
+* **Weight is `font-[number:…]`**, the typed form: a bare `font-[var(…)]` is
+* read as a family by `tailwind-merge`, and the arbitrary property
+* `[font-weight:…]` is in no `tailwind-merge` group at all, so a caller's
+* `font-bold` would no longer replace it — and it sorts after `font-bold` in the
+* built stylesheet, so it would win. `number:` keeps both Tailwind and
+* `tailwind-merge` reading a weight.
+*
+* **Size before leading**, because `tailwind-merge` drops a `leading-*` that
+* precedes a font size in the same list.
+*
+* **Its own module**, because `@repo/docgen` attributes a token to a component by
+* the file its class string lives in, following only `_`-prefixed imports:
+* every name here is one the page title spends, and nothing else imports it.
+*
+* @internal Not part of the public API.
+*/
+const PAGE_TITLE_VOICE = "font-[family-name:var(--cue-style-page-title-face,var(--cue-font-mono))] text-[length:var(--cue-style-page-title-size,var(--cue-text-title))] font-[number:var(--cue-style-page-title-weight,500)] tracking-[var(--cue-style-page-title-tracking,normal)] leading-[var(--cue-style-page-title-leading,inherit)] [font-variation-settings:var(--cue-style-display-variation,normal)] text-[color:var(--cue-style-heading-ink,var(--cue-fg))] [overflow-wrap:anywhere]";
+//#endregion
+export { PAGE_TITLE_VOICE };

package/dist/system/_style-page.js

@@ -0,0 +1,17 @@
+//#region src/system/_style-page.ts
+/**
+* Pagination's current page (round 6, spec §11, lane R6.P:
+* `style-page-current-ground`, `style-page-current-rim`, `style-page-current-edge`),
+* falling back to the `accent-soft` fill and no rim, as it drew. coss.com/ui marks the
+* current page as an outline button: the surface, in a 1px rim (P167.current,
+* P167.current-edge).
+*
+* **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 PAGE_CURRENT = "border-solid border-[length:var(--cue-style-page-current-rim,0px)] border-[color:var(--cue-style-page-current-edge,transparent)] bg-[color:var(--cue-style-page-current-ground,var(--cue-accent-soft))] text-accent";
+//#endregion
+export { PAGE_CURRENT };

package/dist/system/_style-palette.js

@@ -0,0 +1,18 @@
+//#region src/system/_style-palette.ts
+/**
+* The command palette's own parts (round 6, spec §11, lane R6.P): the rule under
+* its search field (`style-palette-rule`), falling back to the `border` it
+* drew, and its footer's block padding (`style-palette-footer-pad`), falling
+* back to `space-2`. coss.com/ui draws no rule there and pads its footer 12px
+* (P152.input-rule, P152.footer).
+*
+* **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 PALETTE_RULE = "border-[color:var(--cue-style-palette-rule,var(--cue-border))]";
+/** @see PALETTE_RULE */
+const PALETTE_FOOTER_PAD = "py-[var(--cue-style-palette-footer-pad,var(--cue-space-2))]";
+//#endregion
+export { PALETTE_FOOTER_PAD, PALETTE_RULE };

package/dist/system/_style-panel.js

@@ -0,0 +1,21 @@
+//#region src/system/_style-panel.ts
+/**
+* A panel header's padding and rule (round 6, spec §11, lane R6.P:
+* `style-panel-pad-y`, `style-panel-pad-x`, `style-panel-rule`), falling back
+* to the row paddings and the `border` it drew. coss.com/ui's frame panel pads
+* its header 16px by 20px and draws no rule under it (P158, P158.pad-inline,
+* P158.header-rule).
+*
+* **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 PANEL_PAD_Y = "py-[var(--cue-style-panel-pad-y,var(--cue-pad-row-y))]";
+/** @see PANEL_PAD_Y */
+const PANEL_PAD_X = "px-[var(--cue-style-panel-pad-x,var(--cue-pad-row-x))]";
+/** @see PANEL_PAD_Y */
+const PANEL_RULE = "border-[color:var(--cue-style-panel-rule,var(--cue-border))]";
+//#endregion
+export { PANEL_PAD_X, PANEL_PAD_Y, PANEL_RULE };

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

@@ -0,0 +1,13 @@
+//#region src/system/_style-popover-pad.ts
+/**
+* The popover's padding (plan V.2, P131): the `space-4` rung times
+* `style-popover-pad`, `1` under a set that has none. Porcelain's popover is
+* 16px in.
+*
+* **Optional** (spec §3.0). Its own module for docgen's reason.
+*
+* @internal Not part of the public API.
+*/
+const POPOVER_PAD = "p-[calc(var(--cue-space-4)*var(--cue-style-popover-pad,1))]";
+//#endregion
+export { POPOVER_PAD };

package/dist/system/_style-popover-width.js

@@ -0,0 +1,15 @@
+//#region src/system/_style-popover-width.ts
+/**
+* A popover's width (round 6, spec §11, lane R6.P: `style-popover-width`), falling
+* back to the `auto` it drew, sized to its content under its viewport cap.
+* coss.com/ui's popover is 320px (`w-80`, P168.width).
+*
+* **Optional** (spec §3.0): declared by `porcelain` alone, and the 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 POPOVER_WIDTH = "w-[var(--cue-style-popover-width,auto)]";
+//#endregion
+export { POPOVER_WIDTH };

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

@@ -0,0 +1,13 @@
+//#region src/system/_style-quiet-ink.ts
+/**
+* The quiet ink, for a site that reads it without the rest of the control
+* vocabulary: the disclosure trigger (plan V.2, P125) — `style-quiet-ink`,
+* falling back to the `fg-muted` it drew. The same class `_style-control.ts`
+* spells as `GHOST_INK`, restated in a module of its own so docgen does not
+* publish every button name as a token of an accordion.
+*
+* @internal Not part of the public API.
+*/
+const QUIET_INK = "text-[color:var(--cue-style-quiet-ink,var(--cue-fg-muted))]";
+//#endregion
+export { QUIET_INK };

package/dist/system/_style-radio.js

@@ -0,0 +1,19 @@
+//#region src/system/_style-radio.ts
+/**
+* A checked radio (round 6, spec §11, lane R6.P): its ground
+* (`style-radio-checked-ground`), falling back to the `sunken` it keeps; its dot's
+* ink and size (`style-radio-dot-ink`, `style-radio-dot-size`), falling back to
+* the `accent` half-size dot it drew. coss.com/ui fills a checked radio in `fg`
+* around a 6px dot in the page ground (P171.checked-edge, P171.dot-size).
+*
+* **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 RADIO_CHECKED_GROUND = "data-[checked]:bg-[color:var(--cue-style-radio-checked-ground,var(--cue-sunken))]";
+/** @see RADIO_CHECKED_GROUND */
+const RADIO_DOT = "size-[var(--cue-style-radio-dot-size,calc(1/2*100%))] bg-[color:var(--cue-style-radio-dot-ink,var(--cue-accent))]";
+//#endregion
+export { RADIO_CHECKED_GROUND, RADIO_DOT };

package/dist/system/_style-row-disabled.js

@@ -0,0 +1,17 @@
+//#region src/system/_style-row-disabled.ts
+/**
+* A disabled row's fade in a menu, a command palette and a listbox (round 6,
+* spec §11, lane R6.P: `style-row-disabled-opacity`), falling back to the 0.4 it
+* drew. Its own name rather than `style-disabled-opacity`: a set that lifts the
+* controls' fade to 1 and dims them by ink (Tender) would otherwise leave a
+* disabled row undimmed. coss.com/ui fades its disabled menu row to 0.64
+* (P163.disabled).
+*
+* **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 ROW_DISABLED_OPACITY = "data-[disabled]:opacity-[var(--cue-style-row-disabled-opacity,0.4)]";
+//#endregion
+export { ROW_DISABLED_OPACITY };

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

@@ -0,0 +1,13 @@
+//#region src/system/_style-row-pad.ts
+/**
+* A table row's block padding (plan V.2, P121): the `pad-row-y` rung times
+* `style-row-pad`, `1` under a set that has none. Porcelain's table rows are
+* 40px, half again its rung's padding.
+*
+* **Optional** (spec §3.0). Its own module for docgen's reason.
+*
+* @internal Not part of the public API.
+*/
+const ROW_PAD_Y = "py-[calc(var(--cue-pad-row-y)*var(--cue-style-row-pad,1))]";
+//#endregion
+export { ROW_PAD_Y };

package/dist/system/_style-row.js

@@ -0,0 +1,30 @@
+//#region src/system/_style-row.ts
+/**
+* `Row` in the rule idiom (round 6, spec §11, lane R6.T: `style-row-ink`,
+* `style-row-block-pad`, `style-row-rule-style`).
+*
+* stripe.com's list with dividers (`.hds-list--show-dividers`) draws each item
+* in its soft ink (`--hds-color-text-soft`), pads its foot 16px and rules it
+* 1px dashed in its quiet border ink (`.hds-list__item--showDivider`, T136).
+* Each reader falls back to the class it replaced: `text-fg`, the row's
+* `--cue-pad-row-y`, and the solid of the `--tw-border-style` slot the rule's
+* `border-t` reads (`_style-footer-rule.ts` gives the reason for the slot).
+* The block pad and the rule style apply to the rule idiom only; a seam row
+* (`SeamList`) keeps its own.
+*
+* @internal Not part of the public API.
+*/
+const ROW_INK = "text-[color:var(--cue-style-row-ink,var(--cue-fg))]";
+/**
+* A ruled row's block padding, at zero specificity (`:where()`), the only
+* `py` a ruled row carries: a consumer's own `py-*` beats it wherever
+* Tailwind emits the two, as it beat the `py-(--cue-pad-row-y)` this replaced —
+* a consumer composing `rowVariants({ className: "py-2" })` on its own element
+* kept its padding before round 6, and an arbitrary-value reader, emitted after
+* `py-2`, took it away (the closing pass's adversarial review).
+*/
+const ROW_BLOCK_PAD = "[:where(&)]:py-[var(--cue-style-row-block-pad,var(--cue-pad-row-y))]";
+/** The line style of the rule a ruled row draws above itself. */
+const ROW_RULE_STYLE = "[--tw-border-style:var(--cue-style-row-rule-style,solid)]";
+//#endregion
+export { ROW_BLOCK_PAD, ROW_INK, ROW_RULE_STYLE };

package/dist/system/_style-scrollbar.js

@@ -0,0 +1,19 @@
+//#region src/system/_style-scrollbar.ts
+/**
+* A scroll area's bar and thumb (round 6, spec §11, lane R6.P: `style-scrollbar-size`,
+* `style-scrollbar-thumb`), falling back to the `space-3` bar and the
+* `border-strong` thumb it drew. coss.com/ui's bar is 6px (P172, P172.thumb).
+*
+* **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 SCROLLBAR_SIZE_V = "data-[orientation=vertical]:w-[var(--cue-style-scrollbar-size,var(--cue-space-3))]";
+/** @see SCROLLBAR_SIZE_V */
+const SCROLLBAR_SIZE_H = "data-[orientation=horizontal]:h-[var(--cue-style-scrollbar-size,var(--cue-space-3))]";
+/** @see SCROLLBAR_SIZE_V */
+const SCROLLBAR_THUMB = "bg-[color:var(--cue-style-scrollbar-thumb,var(--cue-border-strong))]";
+//#endregion
+export { SCROLLBAR_SIZE_H, SCROLLBAR_SIZE_V, SCROLLBAR_THUMB };

package/dist/system/_style-seam.js

@@ -0,0 +1,43 @@
+//#region src/system/_style-seam.ts
+/**
+* The seam idiom's ink: the colour that shows through a 1px gap and becomes the
+* hairline between two filled cells.
+*
+* Spec 2026-09-26 R-8. `SeamGrid`, `SeamList` and `<Card seam>` each hard-coded
+* `bg-border` for it, so a style set could say how its bands are ruled
+* (`--cue-band-rule-color`) and had no way to say that the line INSIDE a
+* component is lighter than a box edge — which is what every site in the
+* 2026-09-22 corpus that draws seams does (agent-native's seam is its subtle
+* line, not its default border). `--cue-style-seam-color` is that statement.
+*
+* **The fallback is the old class, spelt out.** `bg-border` compiles to
+* `background-color: var(--cue-border)`, and `--cue-style-seam-color` is on no
+* `:root` — a `:root` `var(--cue-border)` would be substituted at `<html>` and
+* freeze the page's border into every theme island. Under no set this resolves
+* at the grid itself, exactly as `bg-border` did.
+*
+* @internal Not part of the public API.
+*/
+const SEAM_INK = "bg-[color:var(--cue-style-seam-color,var(--cue-border))]";
+/**
+* The rim a bordered seam container draws around its cells, in the seam's ink.
+*
+* The rim is part of the idiom rather than an unrelated border: `SeamGrid`'s
+* `bordered` is "a hairline rim around the whole grid as well as between the
+* cells", and a rim in the box-edge colour around seams in a lighter one reads
+* as a box drawn around a grid — the one thing the idiom exists not to be.
+*
+* **`bg-clip-padding` is what keeps a translucent seam honest.** The container's
+* own background is the seam, and by default it paints under the border too; an
+* opaque ink hides that, but a share over transparency — graphite's
+* `color-mix(in oklch, var(--cue-border) 60%, transparent)` — would lay the rim
+* over a second copy of itself and draw it darker than the seams it encloses.
+* Under an opaque ink, which is every set but graphite and every page under no
+* set, the clip changes nothing a reader can see: the border covers exactly the
+* area it removes the background from.
+*
+* @internal Not part of the public API.
+*/
+const SEAM_RIM = "border-[color:var(--cue-style-seam-color,var(--cue-border))] bg-clip-padding";
+//#endregion
+export { SEAM_INK, SEAM_RIM };

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

@@ -0,0 +1,26 @@
+//#region src/system/_style-section-rule.ts
+/**
+* The ink of a rule that divides a section: `SectionHeader`'s hairline and the
+* rule over `Footer`'s fine print.
+*
+* Spec 2026-09-26-looks-fidelity §3.11 (plan R4). Both drew `var(--cue-border)`
+* through `bg-border` and `border-border`, and a Look that sets its sections
+* apart by space alone (kiln) had no way to take the line away without taking
+* the box edges with it. `--cue-style-section-rule` says it, and these read it.
+*
+* **The fallbacks are the old classes, spelt out**, for the reason
+* `_style-control-face.ts` gives. Two exports because the two readers paint
+* the same ink through two properties: the header's rule is a `h-px` block
+* with a ground, the footer's is a top border.
+*
+* **Its own module**, for the docgen reason `_style-nav-voice.ts` gives: both
+* readers read exactly this one name.
+*
+* @internal Not part of the public API.
+*/
+/** A rule drawn as a filled hairline block (`SectionHeader`). */
+const SECTION_RULE_FILL = "bg-[color:var(--cue-style-section-rule,var(--cue-border))]";
+/** A rule drawn as a border (`Footer`'s fine print); the element sets which side. */
+const SECTION_RULE_EDGE = "border-[color:var(--cue-style-section-rule,var(--cue-border))]";
+//#endregion
+export { SECTION_RULE_EDGE, SECTION_RULE_FILL };

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

@@ -0,0 +1,15 @@
+//#region src/system/_style-segment-pad.ts
+/**
+* A tab's and a segment's inline padding at the md step (round 6, spec §11, lane
+* R6.P: `style-segment-pad`), falling back to the `space-4` both drew. coss.com/ui
+* pads both 9px (P182.pad, P173.item-pad).
+*
+* **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 SEGMENT_PAD = "px-[var(--cue-style-segment-pad,var(--cue-space-4))]";
+//#endregion
+export { SEGMENT_PAD };

package/dist/system/_style-segment.js

@@ -0,0 +1,30 @@
+//#region src/system/_style-segment.ts
+/**
+* The segment family's shared half: the ink of a choice that is not the
+* current one — read by `SegmentedControl` and `Tabs` alike.
+*
+* Spec 2026-09-26-looks-fidelity §3.8 and §3.10 (plan R4). Both components
+* mark the current choice their own way — a tinted segment, an underlined
+* tab — and two Looks draw both as one object: a filled track with the choice
+* raised on it as a pill with an edge and a resting shade (kiln, porcelain).
+* The segment names say it, in both components at once. Where each component
+* draws the track, and what it reads for its current choice, has a fallback of
+* its own, so it lives with that component: `SegmentedControl`'s frame and
+* pressed segment in `_style-segmented-control.ts`, the `Tabs` list and active
+* tab in `_style-tab.ts`.
+*
+* **The fallback is the class it replaced**, for the reason
+* `_style-control-face.ts` gives: an idle choice was `text-fg-muted`.
+*
+* **Its own module, holding only what both read**, because `@repo/docgen`
+* credits a component with every `--cue-*` in each `_`-prefixed file it
+* imports (`_style-nav-voice.ts`'s note). When the pressed segment's constants
+* lived here, `Tabs` was published as a user of `--cue-accent-soft`, the
+* pressed segment's fallback, which no tab paints.
+*
+* @internal Not part of the public API.
+*/
+/** A choice that is not the current one. */
+const SEGMENT_IDLE_INK = "text-[color:var(--cue-style-segment-idle-ink,var(--cue-fg-muted))]";
+//#endregion
+export { SEGMENT_IDLE_INK };

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

@@ -0,0 +1,86 @@
+//#region src/system/_style-segmented-control.ts
+/**
+* What `SegmentedControl` reads from the style set: the track its segments sit
+* in, and the pressed segment's ground, ink, weight, edge, resting shade and
+* corners.
+*
+* Spec 2026-09-26-looks-fidelity §3.8 and §3.10 (plan R4). The shared half of
+* the segment family — the track and the idle ink — is `_style-segment.ts`,
+* whose docblock tells the family's story; the active tab's counterpart is in
+* `_style-tab.ts`.
+*
+* **The track is the frame.** Spec §3.8 names "the list" as the reader of
+* `style-segment-track` and `style-segment-inset`, and R4 first read them on
+* the `ToggleGroup` inside the frame. That box has no corners and sits inside
+* the frame's own ground, border and padding, so a Look's track (kiln's
+* `surface-3`, porcelain's tint inset 2px) drew a square box within a rounded
+* `surface-1` rim instead of a rounded track with the pill on it. The frame is
+* the rounded object — `rounded-control`, the rim, the ground, the inset — so
+* it reads both names, with its own classes as the fallbacks:
+* `var(--cue-surface-1)` and `var(--cue-space-1)`. The list reads nothing.
+* The overflow chevrons sit in the frame's padding over the segments, so their
+* ground follows the track too, laid over an opaque `surface-1` so a
+* translucent track (porcelain's) still hides the segments scrolled beneath.
+*
+* **Every fallback is the class it replaced**, for the reason
+* `_style-control-face.ts` gives:
+*
+* - the frame: `bg-surface-1` and `p-(--cue-space-1)`; the chevrons:
+*   `bg-surface-1`, under a transparent layer;
+* - the ground and ink: `bg-accent-soft` and `text-accent`;
+* - weight `400`, which the segment inherited and computed under every
+*   shipped set;
+* - the edge: `transparent`, drawn as an inset ring so it never moves layout;
+* - the resting shade: `paint-rest-shade`, `transparent` under every pack but
+*   glaze;
+* - the corners: `rounded-control`'s own value (below).
+*
+* **The edge and the rest shade are one `shadow-[…]` list**, and it is written
+* out in full rather than built from `REST_SHADE`: Tailwind finds a class by
+* scanning source text, so a class assembled at runtime is a class it never
+* generates (`_focus-ring.ts` records the failure). `test/system/style-navigation.test.tsx`
+* holds the literal to `REST_SHADE`, spaces as underscores. A transparent
+* layer paints nothing, so the list is a rendered no-op until a Look names an
+* edge or a pack a shade.
+*
+* **What the segment never had yields to a caller's class.** The ground and
+* ink replaced `data-[pressed]:bg-accent-soft` and `data-[pressed]:text-accent`
+* and keep the standing those classes had. The weight and the shadow are
+* declarations the segment had in no state, so a caller's
+* `itemClassName="font-medium shadow-sm"` applied to the pressed segment as to
+* the others. A `data-[pressed]:` utility is `(0,2,0)` and would beat such a
+* class on the pressed segment alone, so these are written
+* `[:where(&[data-pressed])]:` — the same state at zero specificity — and a
+* caller's class wins in every state again. The weight is `font-[number:…]`
+* for `_style-nav-voice.ts`'s reason.
+*
+* **The segment's radius nests in the track's inset**:
+* `radius-control` less `style-segment-inset`, so a pill inset 2px into its
+* track keeps concentric corners. Its fallback is `0px`, not the frame's
+* `space-1`: at `0px` it is `rounded-control`'s own value, which is what the
+* segment drew, and one name's readers keep their own fallbacks (spec §3.0).
+* Only a set that names an inset nests the corners.
+*
+* **Its own module**, for the docgen reason `_style-segment.ts` gives: the
+* frame, the `accent-soft` fallback and the nested radius are this
+* component's alone.
+*
+* @internal Not part of the public API.
+*/
+/** The frame, which is the track: its ground and its inset. */
+const SEGMENTED_TRACK = "bg-[color:var(--cue-style-segment-track,var(--cue-surface-1))] p-[var(--cue-style-segment-inset,var(--cue-space-1))]";
+/** The overflow chevrons' ground: the track's colour over an opaque `surface-1`. */
+const SEGMENTED_CHEVRON_GROUND = "bg-surface-1 bg-[image:linear-gradient(var(--cue-style-segment-track,transparent),var(--cue-style-segment-track,transparent))]";
+/** A segment's corners, nested inside the track's inset. */
+const SEGMENT_RADIUS = "rounded-[calc(var(--cue-radius-control)*var(--cue-radius-scale)-var(--cue-style-segment-inset,0px))]";
+/** `SegmentedControl`'s pressed segment. */
+const SEGMENT_PRESSED = "data-[pressed]:bg-[color:var(--cue-style-segment-ground,var(--cue-accent-soft))] data-[pressed]:text-[color:var(--cue-style-segment-ink,var(--cue-accent))] [:where(&[data-pressed])]:font-[number:var(--cue-style-segment-weight,400)] [:where(&[data-pressed])]:shadow-[inset_0_0_0_var(--cue-border-width)_var(--cue-style-segment-edge,transparent),0_calc(2px*var(--cue-paint-shadow-scale))_calc(4px*var(--cue-paint-shadow-scale))_var(--cue-paint-rest-shade,transparent)]";
+/**
+* The frame's rim (plan V.2, K129): `style-segment-rim`, falling back to the
+* `border-border` the frame drew. Kiln's source draws its segmented track with
+* no rim at all — a `surface-3` ground and nothing around it — and the frame's
+* border was the one part of the control no name reached.
+*/
+const SEGMENTED_RIM = "border-[color:var(--cue-style-segment-rim,var(--cue-border))]";
+//#endregion
+export { SEGMENTED_CHEVRON_GROUND, SEGMENTED_RIM, SEGMENTED_TRACK, SEGMENT_PRESSED, SEGMENT_RADIUS };

package/dist/system/_style-selected.js

@@ -0,0 +1,36 @@
+//#region src/system/_style-selected.ts
+/**
+* The ground and ink of a selected table row.
+*
+* Spec 2026-09-26-looks-fidelity §3.8 (plan R4). `Table.Row` said
+* `data-[selected]:bg-accent-soft` and set no ink of its own. Spec §3.8 names
+* this row as a reader of both `style-selected-ground` and
+* `style-selected-ink`, and the two travel together for a reason a Look makes
+* concrete: kiln's selection is inverted, `var(--cue-fg)` behind
+* `var(--cue-bg)`, and a row that took the ground without the ink would set
+* the table's `fg` text on an `fg` ground.
+*
+* **Each fallback is this reader's own value**, which is not the sidebar's
+* (spec §3.0: readers of one name keep their own fallbacks). The ground was
+* `var(--cue-accent-soft)`. The ink was inherited from the table's `text-fg`,
+* so its fallback is `currentColor`, which on `color` computes exactly the
+* inherited value — under no set and every set that declines the name, the
+* row renders what it did.
+*
+* **The ink yields to a caller's own ink.** The row set no colour, so
+* `<Table.Row selected className="text-fg-muted">` stayed muted when selected.
+* A `data-[selected]:` ink is `(0,2,0)` and would beat that class, and
+* `currentColor` on `color` takes the PARENT's colour, not the row's own class;
+* so the ink is written `[:where(&[data-selected])]:` — the same state at zero
+* specificity — and a caller's ink class wins again. The ground replaced
+* `data-[selected]:bg-accent-soft` and keeps its standing, as that did.
+*
+* **Its own module**, for the docgen reason `_style-nav-voice.ts` gives: the
+* table reads neither `style-nav-active-ground` nor `style-selected-weight`,
+* so it does not share `_style-nav-item.ts`.
+*
+* @internal Not part of the public API.
+*/
+const SELECTED_ROW = "data-[selected]:bg-[color:var(--cue-style-selected-ground,var(--cue-accent-soft))] [:where(&[data-selected])]:text-[color:var(--cue-style-selected-ink,currentColor)]";
+//#endregion
+export { SELECTED_ROW };

package/dist/system/_style-skeleton.js

@@ -0,0 +1,15 @@
+//#region src/system/_style-skeleton.ts
+/**
+* A skeleton block's corner (round 6, spec §11, lane R6.P: `style-skeleton-radius`),
+* falling back to the `rounded-control` corner it drew. coss.com/ui rounds its
+* skeletons 6px (P177.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 SKELETON_RADIUS = "rounded-[var(--cue-style-skeleton-radius,calc(var(--cue-radius-control)*var(--cue-radius-scale)))]";
+//#endregion
+export { SKELETON_RADIUS };

package/dist/system/_style-slider.js

@@ -0,0 +1,26 @@
+//#region src/system/_style-slider.ts
+/**
+* A slider's rail and thumb (round 6, spec §11, lane R6.P): the rail's height and
+* ink (`style-slider-track-height`, `style-slider-track-ink`), falling back to
+* the `h-0.5` and `border` it drew; the thumb's size, fill, rim width and rim
+* ink (`style-slider-thumb-size`, `-fill`, `-rim`, `-edge`), falling back to
+* its 8px `accent` dot with no rim. coss.com/ui draws a 4px rail in its input
+* ink and a 16px (20px on a phone) white thumb in a 1px rim (P178).
+*
+* **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 SLIDER_TRACK_HEIGHT = "h-[var(--cue-style-slider-track-height,0.125rem)]";
+/** @see SLIDER_TRACK_HEIGHT */
+const SLIDER_TRACK_INK = "bg-[color:var(--cue-style-slider-track-ink,var(--cue-border))]";
+/** @see SLIDER_TRACK_HEIGHT */
+const SLIDER_THUMB_SIZE = "size-[var(--cue-style-slider-thumb-size,0.5rem)]";
+/** @see SLIDER_TRACK_HEIGHT */
+const SLIDER_THUMB_FILL = "bg-[color:var(--cue-style-slider-thumb-fill,var(--cue-accent))]";
+/** @see SLIDER_TRACK_HEIGHT — a width, so a set that names none draws no rim at all. */
+const SLIDER_THUMB_RIM = "border-solid border-[length:var(--cue-style-slider-thumb-rim,0px)] border-[color:var(--cue-style-slider-thumb-edge,transparent)]";
+//#endregion
+export { SLIDER_THUMB_FILL, SLIDER_THUMB_RIM, SLIDER_THUMB_SIZE, SLIDER_TRACK_HEIGHT, SLIDER_TRACK_INK };

package/dist/system/_style-stage-marks.js

@@ -0,0 +1,26 @@
+//#region src/system/_style-stage-marks.ts
+/**
+* Whether a preview frame draws its registration marks — spec
+* 2026-09-26-looks-fidelity §3.11, `style-stage-marks` (row P52).
+*
+* The four crosshairs at a frame's stage corners are this library's own
+* furniture, and four of the measured Looks' sources draw nothing there. A
+* mark is decoration, so a set says `none` and the marks go; `inline` keeps
+* them.
+*
+* **The fallback is the old value, spelt out.** A mark is an absolutely
+* positioned `<span>`, which the engine blockifies: `inline` computes
+* `display: block`, exactly what the span computed with no `display` class at
+* all. `--cue-style-stage-marks` is on no `:root` (contract round 2's optional
+* names are reset to `initial` under every `[data-style]` that declines them),
+* so under no set and every shipped set today the marks draw as they did.
+*
+* **Its own module**, because `@repo/docgen` attributes a token to a component
+* by the file its class string lives in, following only `_`-prefixed imports.
+* `Preview` is this file's only reader.
+*
+* @internal Not part of the public API.
+*/
+const STAGE_MARKS = "[display:var(--cue-style-stage-marks,inline)]";
+//#endregion
+export { STAGE_MARKS };

package/dist/system/_style-stat.js

@@ -0,0 +1,31 @@
+//#region src/system/_style-stat.ts
+/**
+* `Stat`'s value, detail and gap (round 6, spec §11, lane R6.T:
+* `style-stat-size`, `-weight`, `-leading`, `-tracking`,
+* `style-stat-detail-size`, `-detail-leading`, `style-stat-gap`).
+*
+* stripe.com sets a stat's value in its xxl text rung (`hds-text--xxl`: 48px,
+* 40px on phones, at 300, 1.0 and 1.07 leading, −0.02em and −0.01em
+* tracking) and its description in its body rung (`hds-text--md`: 16px at
+* 300 and 1.4), 12px apart (`.hds-stat`'s gap), T137. Each reader falls back
+* to the class it replaced: the value's `text-title`, inherited weight,
+* `leading-none` and inherited tracking; the detail's `text-label` and
+* inherited leading; and `space-2` times 1.
+*
+* @internal Not part of the public API.
+*/
+const STAT_SIZE = "text-[length:var(--cue-style-stat-size,var(--cue-text-title))]";
+/** The value's weight. */
+const STAT_WEIGHT = "font-[number:var(--cue-style-stat-weight,inherit)]";
+/** The value's leading. */
+const STAT_LEADING = "leading-[var(--cue-style-stat-leading,1)]";
+/** The value's tracking. */
+const STAT_TRACKING = "tracking-[var(--cue-style-stat-tracking,inherit)]";
+/** The detail's size. */
+const STAT_DETAIL_SIZE = "text-[length:var(--cue-style-stat-detail-size,var(--cue-text-label))]";
+/** The detail's leading. */
+const STAT_DETAIL_LEADING = "leading-[var(--cue-style-stat-detail-leading,inherit)]";
+/** The gap between the label, the value and the detail. */
+const STAT_GAP = "gap-[calc(var(--cue-space-2)*var(--cue-style-stat-gap,1))]";
+//#endregion
+export { STAT_DETAIL_LEADING, STAT_DETAIL_SIZE, STAT_GAP, STAT_LEADING, STAT_SIZE, STAT_TRACKING, STAT_WEIGHT };

package/dist/system/_style-stepper.js

@@ -0,0 +1,16 @@
+//#region src/system/_style-stepper.ts
+/**
+* A number field's stepper width at the md step (round 6, spec §11, lane R6.P:
+* `style-stepper-width`), falling back to the square `control-md` box it drew.
+* coss.com/ui's steppers are 38px wide (40px on a phone) beside a 32px field
+* (P165.stepper).
+*
+* **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 STEPPER_WIDTH = "w-[var(--cue-style-stepper-width,var(--cue-control-md))]";
+//#endregion
+export { STEPPER_WIDTH };