@cueplusplus/ui 0.15.0 → 0.17.0

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,42 @@
+//#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.
+*
+* `data-[highlighted]:text-fg` stays a class: every Look's highlighted row is
+* `fg`. 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-fg data-[selected]:text-[color:var(--cue-style-option-selected-ink,var(--cue-accent))]";
+//#endregion
+export { OPTION_ROW };

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

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

@@ -0,0 +1,71 @@
+//#region src/system/_style-tab.ts
+/**
+* The `Tabs` list's rule and track, and the active tab: its underline, and its
+* ground, ink, weight and shadow when a Look raises it as a segment.
+*
+* Spec 2026-09-26-looks-fidelity §3.8 (plan R4). The list hung its tabs off a
+* 1px `border-b`, and the active tab laid an accent `::after` over it. A Look
+* that draws its tabs as a segmented track (kiln, porcelain) has neither, and
+* `style-tab-rule` and `style-tab-underline` take them away.
+*
+* **The fallbacks are the classes they replace**: `border-b` is 1px wide, and
+* the underline was the accent, `var(--cue-accent)`. The width utility keeps
+* `border-b`'s solid style, so it replaces it whole.
+*
+* **The list is the track.** `Tabs` has no frame, so the list reads
+* `style-segment-track` and `style-segment-inset`, and falls back to what it
+* had: no ground and no padding (`transparent`, `0px`). Its corners are
+* square, and stay so: a radius on the list would curl the ends of its 1px
+* rule under every set. A Look that draws its tabs on a track (kiln,
+* porcelain) takes the rule away and owes the track its corners; spec §3.8
+* leaves how to the Look lanes.
+*
+* **The active tab**, raised as a segment by a Look that draws its tabs on a
+* track: its ground, ink, weight, edge and resting shade, read through the
+* segment names (`_style-segment.ts` tells the family's story). The ink
+* replaced `data-[active]:text-accent` and keeps that class's standing. The
+* ground falls back to none (`transparent`, spec §3.8): a tab is marked by its
+* underline. The ground, the weight (`400`, inherited and computed under every
+* shipped set) and the shadow (a `transparent` inset edge and the paint axis's
+* resting shade, one list written out for the reason
+* `_style-segmented-control.ts` gives) are declarations the tab had in no
+* state, so they are written `[:where(&[data-active])]:` — the active state at
+* zero specificity — and a caller's `className="font-medium bg-surface-2
+* shadow-sm"` still applies to the active tab as to the others.
+*
+* **Its own module**, for the docgen reason `_style-nav-voice.ts` gives:
+* `SegmentedControl` shares `_style-segment.ts` with the tabs, and reads
+* none of these.
+*
+* @internal Not part of the public API.
+*/
+/** The list behind the tabs, which is the track: its ground and its inset. */
+const TAB_TRACK = "bg-[color:var(--cue-style-segment-track,transparent)] p-[var(--cue-style-segment-inset,0px)] rounded-[var(--cue-style-tab-radius,0px)]";
+/**
+* A tab's corners and its resting weight (plan V.2, P41).
+*
+* Under a set that names `style-tab-radius` the list above is a rounded track
+* and every tab a pill inside it, rounded on all four corners at the track's
+* radius less the inset, as a pressed segment nests inside its frame. Under a
+* set that does not, a tab keeps the `rounded-t-control` it drew: its top two
+* corners at the control corner, its bottom two square on the list's rule.
+* Both are one expression per edge, so neither needs a class the other lacks:
+*
+* - top: `tab-radius`, else the control corner **plus** the inset, less the
+*   inset — which is the control corner exactly, whether or not the set names
+*   an inset (Porcelain names one, 2px, before it names a tab radius);
+* - bottom: `tab-radius`, else the inset, less the inset — `0px`.
+*
+* The weight is the segment weight on every tab, not only the active one —
+* Porcelain's idle tabs are 500 too — falling back to 400. A caller's
+* `font-*` class on a tab replaces it through `tailwind-merge`.
+*/
+const TAB_SHAPE = "rounded-t-[calc(var(--cue-style-tab-radius,calc(var(--cue-radius-control)*var(--cue-radius-scale)+var(--cue-style-segment-inset,0px)))-var(--cue-style-segment-inset,0px))] rounded-b-[calc(var(--cue-style-tab-radius,var(--cue-style-segment-inset,0px))-var(--cue-style-segment-inset,0px))] font-[number:var(--cue-style-segment-weight,400)]";
+/** The list's bottom rule, as a width. */
+const TAB_RULE = "border-b-[length:var(--cue-style-tab-rule,1px)]";
+/** The active tab's underline ink, on its `::after`. */
+const TAB_UNDERLINE = "data-[active]:after:bg-[color:var(--cue-style-tab-underline,var(--cue-accent))]";
+/** The `Tabs` active tab. Its ground falls back to none: a tab is marked by its underline. */
+const TAB_ACTIVE = "[:where(&[data-active])]:bg-[color:var(--cue-style-segment-ground,transparent)] data-[active]:text-[color:var(--cue-style-segment-ink,var(--cue-accent))] [:where(&[data-active])]:font-[number:var(--cue-style-segment-weight,400)] [:where(&[data-active])]: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)]";
+//#endregion
+export { TAB_ACTIVE, TAB_RULE, TAB_SHAPE, TAB_TRACK, TAB_UNDERLINE };

package/dist/system/_style-textarea.js

@@ -0,0 +1,21 @@
+//#region src/system/_style-textarea.ts
+/**
+* A textarea's leading and block padding (plan V.2, P139):
+* `style-input-leading`, falling back to the `leading-ui` it drew, and the
+* `space-3` rung times `style-textarea-pad`, `1` under a set that has none.
+* Porcelain's textarea sets 1.45 and 5.5px.
+*
+* The padding is a name of its own and not `style-control-pad`, the button's
+* inline proportion: Tender, Zine and Kiln declare that one (1.5, 1.625,
+* 0.75), and a textarea that read it would move in every one of them where
+* no row measured it.
+*
+* **Optional** (spec §3.0). Its own module for docgen's reason.
+*
+* @internal Not part of the public API.
+*/
+const TEXTAREA_LEADING = "leading-[var(--cue-style-input-leading,var(--cue-leading-ui))]";
+/** @see TEXTAREA_LEADING */
+const TEXTAREA_PAD_Y = "py-[calc(var(--cue-space-3)*var(--cue-style-textarea-pad,1))]";
+//#endregion
+export { TEXTAREA_LEADING, TEXTAREA_PAD_Y };

package/dist/system/_style-title.js

@@ -0,0 +1,37 @@
+//#region src/system/_style-title.ts
+/**
+* The title voice: a `Card`, `Panel` or `Bento` tile's name — mono,
+* `text-emphasis`, weight 500, in `fg`, until a style set says otherwise.
+*
+* Spec 2026-09-26-looks-fidelity §3.3 (and §3.1 for the ink and the variation),
+* plan R1. `CardTitle`, `PanelHeader`'s title and `Bento.Tile`'s title each
+* spelt `font-mono text-(length:--cue-text-emphasis) font-medium text-fg`, so a
+* Look could not move a card's name without a per-call-site class — and every
+* Look the fidelity round measured draws it differently (Tender 26px at 300,
+* Kiln 32px at 400, Porcelain 16px at 700, three of the four in sans).
+*
+* | property                | reads                     | fallback (the class it replaced) |
+* |-------------------------|---------------------------|----------------------------------|
+* | font-family             | `style-title-face`        | `var(--cue-font-mono)` (`font-mono`) |
+* | font-size               | `style-title-size`        | `var(--cue-text-emphasis)` |
+* | font-weight             | `style-title-weight`      | `500` (`font-medium`) |
+* | letter-spacing          | `style-title-tracking`    | `normal` |
+* | line-height             | `style-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), declared on no `:root` and left at the
+* shared `[data-style]` reset by every shipped set, so each `var()` resolves its
+* fallback at the title — what the old classes computed there.
+*
+* An overlay's title shares the face, the weight, the ink and the variation but
+* not the size, the tracking or the leading, so it is `_style-overlay-title.ts`
+* and not an import of this: docgen would publish every name in this file as a
+* token of every overlay. `_style-page-title.ts` says why the weight is
+* `font-[number:…]` and why the size comes before the leading.
+*
+* @internal Not part of the public API.
+*/
+const TITLE_VOICE = "font-[family-name:var(--cue-style-title-face,var(--cue-font-mono))] text-[length:var(--cue-style-title-size,var(--cue-text-emphasis))] font-[number:var(--cue-style-title-weight,500)] tracking-[var(--cue-style-title-tracking,normal)] leading-[var(--cue-style-title-leading,inherit)] [font-variation-settings:var(--cue-style-title-variation,var(--cue-style-display-variation,normal))] text-[color:var(--cue-style-heading-ink,var(--cue-fg))]";
+//#endregion
+export { TITLE_VOICE };

package/dist/system/_style-tooltip.js

@@ -0,0 +1,17 @@
+//#region src/system/_style-tooltip.ts
+/**
+* A tooltip's size and padding (plan V.2, P129): the help size, falling back
+* to the `text-label` rung the tooltip drew, and `style-tooltip-pad`, one or
+* two rem lengths, falling back to the `space-2` block and `space-3` inline
+* padding it drew. Porcelain's tooltip is 12px type, 4px by 8px in. Its
+* leading is the body leading (`_style-body-leading.ts`).
+*
+* **Optional** (spec §3.0). Its own module for docgen's reason.
+*
+* @internal Not part of the public API.
+*/
+const TOOLTIP_SIZE = "text-[length:var(--cue-style-help-size,var(--cue-text-label))]";
+/** @see TOOLTIP_SIZE */
+const TOOLTIP_PAD = "p-[var(--cue-style-tooltip-pad,var(--cue-space-2)_var(--cue-space-3))]";
+//#endregion
+export { TOOLTIP_PAD, TOOLTIP_SIZE };