@cueplusplus/ui 0.16.0 → 0.18.0

package/dist/system/_paint-rim.js

@@ -12,9 +12,12 @@
 * entirely and repaints outlines in the user's own highlight colour, so a ring
 * drawn as a shadow vanishes for exactly the people who most need it — and a
 * form control's ring is a focus indicator. `forms/chassis.test.ts` asserts
-* `controlSurface` contains no `shadow` at all, and it is right to.
-* §22's inventory lists `_chassis.ts:101` as a rim site; it is wrong, and the
-* guard predates it.
+* that the one shadow `controlSurface` carries is the resting shade
+* (`REST_SHADE_CLASS`, fidelity plan R3) and that nothing else in it is a
+* shadow or a ring, and it is right to: the shade is decorative and
+* unconditional, no part of the focus indicator, so losing it to
+* `forced-colors` loses nothing a person needs. §22's inventory lists
+* `_chassis.ts:101` as a rim site; it is wrong, and the guard predates it.
 *
 * A panel's or a card's rim is decorative, so the same loss is cosmetic there.
 *
@@ -34,8 +37,23 @@
 * At the defaults `--cue-paint-rim-width` is `0px` and the ink is
 * `transparent`, so the ring is a no-op twice over.
 *
+* **The resting shade rides in the same list** (spec 2026-09-26-looks-fidelity
+* §3.10, `paint-rest-shade`; plan R5). A card and a panel are the two surfaces
+* that spend this ring, and they are two of `REST_SHADE`'s readers: a pack that
+* sets them down on the page with a one-stop contact shadow (glaze, rows P21
+* and P25) tints `--cue-paint-rest-shade`, and every other pack leaves it
+* `transparent`. It is composed here, as the second layer of this one utility,
+* and not beside it, for the reason above — `twMerge` keeps one of two
+* `shadow-` utilities. It is spelt out rather than interpolated from
+* `_paint-rest-shade.ts`, because Tailwind scans the shipped `dist/` for whole
+* class strings and a template literal is not one; `test/system/
+* paint-rim-pattern.test.ts` holds the two spellings to each other. A
+* transparent layer paints nothing, so under every pack but a tinted one this
+* is still the ring alone (`tests/browser/paint-elevation-noop.spec.ts`, by
+* pixels, under all ten).
+*
 * @internal Not part of the public API.
 */
-const RIM_INSET = "shadow-[inset_0_0_0_var(--cue-paint-rim-width)_var(--cue-paint-rim-ink,transparent)]";
+const RIM_INSET = "shadow-[inset_0_0_0_var(--cue-paint-rim-width)_var(--cue-paint-rim-ink,transparent),0_calc(2px*var(--cue-paint-shadow-scale))_calc(4px*var(--cue-paint-shadow-scale))_var(--cue-paint-rest-shade,transparent)]";
 //#endregion
 export { RIM_INSET };

package/dist/system/_paint-stroke-surface-1.js

@@ -14,6 +14,6 @@
 *
 * @internal Not part of the public API.
 */
-const STROKE_SURFACE_1 = "border-transparent border-(length:--cue-paint-stroke-width) bg-[linear-gradient(var(--cue-surface-1),var(--cue-surface-1)),linear-gradient(var(--cue-paint-stroke-angle),var(--cue-paint-stroke-from,var(--cue-border)),var(--cue-paint-stroke-to,var(--cue-border)))] bg-origin-border [background-clip:padding-box,border-box]";
+const STROKE_SURFACE_1 = "border-transparent border-(length:--cue-paint-stroke-width) bg-[linear-gradient(var(--cue-surface-1),var(--cue-surface-1)),linear-gradient(var(--cue-paint-stroke-angle),var(--cue-paint-stroke-raised-from,var(--cue-paint-stroke-from,var(--cue-border))),var(--cue-paint-stroke-raised-to,var(--cue-paint-stroke-to,var(--cue-border))))] bg-origin-border [background-clip:padding-box,border-box]";
 //#endregion
 export { STROKE_SURFACE_1 };

package/dist/system/_paint-stroke-surface-2.js

@@ -17,11 +17,24 @@
 * theme did not choose for them. Caught by the manifest, which showed 22
 * components losing `--cue-border-overlay` the moment this fill was adopted.
 *
+* **Round 2 (spec §3.10, P0.6): the stroke stops read the overlay's own ink,
+* `paint-stroke-overlay-from`/`-to`, not `paint-stroke-from`/`-to` any more.**
+* Every shipped pack still restates its stroke pair here too — `none`'s pair
+* is `var(--cue-border-overlay)`, closing F-10's gap (under `none`, an overlay's
+* edge used to differ from what a page with no pack draws) — so the fallback
+* stays load-bearing only for a THIRD-PARTY pack that has not yet declared the
+* two new names.
+*
+* **The fill reads `style-overlay-ground` (spec §3.11), not a bare
+* `--cue-surface-2` literal.** A style set may pick one of five opaque grounds
+* for an overlay's fill, the same way `band-ground` works one axis over; no
+* set does yet, so the fallback keeps this a no-op everywhere.
+*
 * The recipe itself, and why its off state is a flat gradient rather than
 * `none`, is documented once in `./_paint`.
 *
 * @internal Not part of the public API.
 */
-const STROKE_SURFACE_2 = "border-transparent border-(length:--cue-paint-stroke-width) bg-[linear-gradient(var(--cue-surface-2),var(--cue-surface-2)),linear-gradient(var(--cue-paint-stroke-angle),var(--cue-paint-stroke-from,var(--cue-border-overlay)),var(--cue-paint-stroke-to,var(--cue-border-overlay)))] bg-origin-border [background-clip:padding-box,border-box]";
+const STROKE_SURFACE_2 = "border-transparent border-(length:--cue-paint-stroke-width) bg-[linear-gradient(var(--cue-style-overlay-ground,var(--cue-surface-2)),var(--cue-style-overlay-ground,var(--cue-surface-2))),linear-gradient(var(--cue-paint-stroke-angle),var(--cue-paint-stroke-overlay-from,var(--cue-border-overlay)),var(--cue-paint-stroke-overlay-to,var(--cue-border-overlay)))] bg-origin-border [background-clip:padding-box,border-box]";
 //#endregion
 export { STROKE_SURFACE_2 };

package/dist/system/_paint-texture.js

@@ -33,8 +33,11 @@
 * already decided. Found in review.
 *
 * **Nothing else in the library may take this pseudo-element on the same
-* element.** §6.5 note 2 is about that, and it is why the host was checked
-* before adopting: neither `Band` nor `AppShell` uses `::before` today.
+* element.** §6.5 note 2 is about that, and it is why each host is checked
+* before adopting: neither `Band` nor `AppShell.Root` used `::before` for
+* anything else at the point each one took this class string (spec 2026-09-26
+* R-14 added the second host, so a pack's texture also covers the page ground
+* a console shell paints and not only `<Band separation="ground">`).
 *
 * **No ink here, so no fallback rule to keep.** Every name this spends is a
 * declared pack name with a `:root` default — `texture` is `none`,

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

@@ -0,0 +1,32 @@
+//#region src/system/_style-accordion-rule.ts
+/**
+* The line style of the rule between two accordion sections (round 6, spec
+* §11, lane R6.T: `style-accordion-rule-style`, KEY{solid, dashed}).
+*
+* `Accordion.Item` draws the rule with `border-t`, which writes
+* `border-top-style: var(--tw-border-style)`, a slot Tailwind registers with
+* `inherits: false` and `initial-value: solid`, so the section fills that slot
+* rather than a raw `[border-top-style:…]` — the footer's reason
+* (`_style-footer-rule.ts`): a caller's own `border-dotted` still wins. The
+* fallback is the slot's `solid`. stripe.com's accordion draws its rules 1px
+* dashed in the quiet border ink (`:where(.hds-accordion) .hds-details`), so
+* tender sets `dashed` (T126).
+*
+* **Its own module**, and not in `_style-collapse.ts`, because docgen credits
+* every `--cue-*` in a module to each component that imports it, and
+* `Collapsible` and `Disclosure` draw no rule between sections.
+*
+* @internal Not part of the public API.
+*/
+const ACCORDION_RULE_STYLE = "[--tw-border-style:var(--cue-style-accordion-rule-style,solid)]";
+/**
+* The ink of the rule between two accordion sections (round 6, spec §11, lane
+* R6.K: `style-accordion-rule-ink`), falling back to the `border` the item's
+* `border-border` drew. replit.com rules its FAQ rows 1px #d7d5ce where its
+* footer rule, the kiln theme's `border`, is #dad2ce — ΔE00 3.85 apart, so the
+* rule takes a name of its own rather than moving the theme's anchor (K140). greptile.com's
+* FAQ rules are 1px dashed in its heading ink, slate, which zine sets (Z111).
+*/
+const ACCORDION_RULE_INK = "border-[color:var(--cue-style-accordion-rule-ink,var(--cue-border))]";
+//#endregion
+export { ACCORDION_RULE_INK, ACCORDION_RULE_STYLE };

package/dist/system/_style-app-bar.js

@@ -0,0 +1,65 @@
+//#region src/system/_style-app-bar.ts
+/**
+* What `AppBar` reads from the style set beyond the navigation voice: the
+* bar's height, its rule's ink and line style, and its inline inset, and a
+* link's padding, hover ground, hover ink and muted ink.
+*
+* Spec 2026-09-26-looks-fidelity §3.7, §3.8, §3.11 and §10.4 (plan R4 and its
+* Graphite addition). The site header serves every Look, so a Look's taller
+* bar (tender, zine, kiln, porcelain), its lighter or absent rule (zine,
+* kiln), its wider inset (graphite) or its padded, tinted links (zine,
+* porcelain) cannot be a class on the header: it would move Classic too
+* (F-18). Each is a style-set name read here.
+*
+* **Every fallback is the class it replaced, spelt out**, for the reason
+* `_style-control-face.ts` gives, so under no set and under every set that
+* declines a name the bar renders exactly what it did:
+*
+* - `h-(--cue-chrome-toolbar)`, `border-border` and `px-(--cue-space-5)` on
+*   the bar;
+* - no padding and no ground on a link (`0`, `transparent`) — the link keeps
+*   `Link`'s own `rounded-control`, which a padded, tinted link now shows;
+* - `hover:text-accent`, which `AppBar.Link` inherited from `Link`, read here
+*   through `style-hover-ink` as spec §3.7 names this reader;
+* - `text-fg-muted` for the `muted` register, read through `style-quiet-ink`
+*   (spec §3.7: `fg-muted` for AppBar.Link `muted`).
+*
+* **The hover ground yields to a caller's own ground.** It is the one
+* declaration here the link never had: `Link` sets no background in any state,
+* so `<AppBar.Link className="bg-surface-2">` kept its ground under the pointer.
+* A plain `hover:bg-[…]` is `(0,2,0)` and would paint over it; this is written
+* `[@media(hover:hover)]:[:where(&:hover)]:`, which is `hover:` — the same
+* media query, the same state — at zero specificity, so any class a caller
+* passes for the ground still wins, hovered or not. The hover INK replaced
+* `Link`'s own `hover:text-accent` and keeps its standing, as that did.
+*
+* `style-appbar-inset` entered the contract in the fidelity plan's L5.1:
+* `graphite` declares it (40px, 24px on a phone; G38), and under every other
+* set the bar renders its fallback.
+*
+* **The rule's line style fills Tailwind's own slot** (`style-chrome-rule-style`,
+* round 5 of plan V.2: `zine` dashes it, Z17). The bar's `border-b` writes
+* `border-bottom-style: var(--tw-border-style)`, a slot Tailwind registers as
+* `@property` with `inherits: false` and `initial-value: solid` — which is the
+* solid rule the bar always drew. Filling that slot keeps the one declaration,
+* for the reason `_paint-glass.ts` fills `--tw-backdrop-blur`: a raw
+* `[border-bottom-style:…]` would be a second, competing declaration, and
+* Tailwind emits it after `border-dashed`, so it would beat a caller's own
+* `border-dotted`. Through the slot a caller's style class still wins, because
+* it writes `border-style` itself, after `border-b`. The fallback is the
+* slot's own initial value, and `test/system/style-navigation.test.tsx` asks
+* the compiler for both the slot and that value rather than remembering them.
+*
+* **Its own module**, for the docgen reason `_style-nav-voice.ts` gives: only
+* `AppBar` reads these names, so only `AppBar` is credited with them.
+*
+* @internal Not part of the public API.
+*/
+/** The bar itself: height, bottom rule's ink and line style, and inline inset. */
+const APP_BAR_CHROME = "h-[var(--cue-style-appbar-height,var(--cue-chrome-toolbar))] border-[color:var(--cue-style-chrome-rule,var(--cue-border))] [--tw-border-style:var(--cue-style-chrome-rule-style,solid)] px-[var(--cue-style-appbar-inset,var(--cue-space-5))]";
+/** One link's box and hover: padding, hover ground, hover ink. */
+const APP_BAR_LINK = "p-[var(--cue-style-nav-pad,0)] [@media(hover:hover)]:[:where(&:hover)]:bg-[color:var(--cue-style-nav-hover-ground,transparent)] hover:text-[color:var(--cue-style-hover-ink,var(--cue-accent))]";
+/** The `muted` register's ink. */
+const APP_BAR_QUIET_INK = "text-[color:var(--cue-style-quiet-ink,var(--cue-fg-muted))]";
+//#endregion
+export { APP_BAR_CHROME, APP_BAR_LINK, APP_BAR_QUIET_INK };

package/dist/system/_style-avatar.js

@@ -0,0 +1,20 @@
+//#region src/system/_style-avatar.ts
+/**
+* The avatar's corner and edge (round 6, spec §11, lane R6.Z).
+*
+* `style-avatar-radius` is a proportion of a radius rung (RUNG(radius-*), as
+* `style-dialog-radius` is), multiplied by `--cue-radius-scale` like every
+* other corner, and falls back to the `rounded-full` (9999px) an avatar drew.
+* `style-avatar-edge` is an INK, falling back to the `border` it drew.
+* greptile.com zeroes every corner, its portrait's among them, and draws no
+* edge on it (Z132), so zine sets the control corner and `transparent`.
+*
+* **Optional** (spec §3.0). Its own module for docgen's reason.
+*
+* @internal Not part of the public API.
+*/
+const AVATAR_RADIUS = "rounded-[calc(var(--cue-style-avatar-radius,9999px)*var(--cue-radius-scale))]";
+/** @see AVATAR_RADIUS */
+const AVATAR_EDGE = "border-[color:var(--cue-style-avatar-edge,var(--cue-border))]";
+//#endregion
+export { AVATAR_EDGE, AVATAR_RADIUS };

package/dist/system/_style-band.js

@@ -0,0 +1,57 @@
+//#region src/system/_style-band.ts
+/**
+* The two `Band`-only readers of the band's proportions: the broad column's
+* measure, and the rhythm's two halves.
+*
+* **Why neither is in `chrome/_band.ts`.** `Footer` spends that file's
+* `bandClasses("rule")` too, and `@repo/docgen` reads a `_`-prefixed module
+* whole and publishes every `--cue-*` in it as a token each importer paints.
+* `Footer` cannot render either reader below — its `width` is a
+* `ContainerWidth` whose `broad` goes straight to `Container`, and the docs site
+* renders it on every page, where Graphite's 160/80 halves would have moved
+* every footer on a surface the fidelity round never measured (spec §10.4). So
+* they live here, imported by `band.tsx` alone.
+*
+* @internal Not part of the public API.
+*/
+/**
+* The `width="broad"` column's measure — spec §3.11, `style-band-width` (T38).
+*
+* `--cue-measure-broad` stays `:root`-only (a set that moved it would move
+* every `Container` and `PageShell` at the broad rung); the band column reads a
+* name of its own instead, a rem length from 40 to 100rem.
+*
+* **The fallback is the old class, spelt out.** `Container`'s broad rung is
+* `max-w-(--cue-measure-broad)`, and this computes the same `max-width` when
+* `--cue-style-band-width` is unset, which it is under no set and under every
+* shipped set today.
+*
+* @internal
+*/
+const BAND_BROAD_WIDTH = "max-w-[var(--cue-style-band-width,var(--cue-measure-broad))]";
+/**
+* The rhythm's halves — spec §10.4, `band-y-top` and `band-y-bottom` (G46).
+*
+* `--cue-band-y` is one symmetric value, and Graphite's source draws every band
+* 160px above and 80px below (88/32 on a phone), which no value of it reaches.
+* The halves keep `band-y`'s spelling rather than the `style-` prefix: they are
+* its halves (the paint-axis spec's §9.1 named them so).
+*
+* **Composed after `bandClasses(separation)`, and both stay in the class
+* list.** `tailwind-merge` drops an earlier `py-` only for a later `py-`, so
+* `bandClasses`'s `py-(--cue-band-y)` survives beside these; they win by
+* Tailwind 4's property order, which emits `padding-block` before
+* `padding-top` and `padding-bottom`. A consumer's later `py-0`
+* (`home-band.tsx`) drops these two as well, so a band that zeroes its rhythm
+* still does.
+*
+* **The fallback is the old value, spelt out.** Each half falls back to
+* `var(--cue-band-y)`, which is what `py-(--cue-band-y)` drew on that side. The
+* two names enter the contract with Graphite's round (plan L5.1); until then no
+* set declares them, and each half renders `band-y`.
+*
+* @internal
+*/
+const BAND_Y_HALVES = "pt-[var(--cue-band-y-top,var(--cue-band-y))] pb-[var(--cue-band-y-bottom,var(--cue-band-y))]";
+//#endregion
+export { BAND_BROAD_WIDTH, BAND_Y_HALVES };

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

@@ -0,0 +1,19 @@
+//#region src/system/_style-body-leading.ts
+/**
+* Body copy's leading where a component sets it itself: an overlay's
+* description, a field's help and a tooltip (plan V.2, P42, P48, P129).
+* Porcelain's body copy sits on a 1.38 leading at every size.
+*
+* | constant               | reads                | fallback                 |
+* |------------------------|----------------------|--------------------------|
+* | `BODY_LEADING`         | `style-body-leading` | `var(--cue-leading-ui)`  |
+* | `BODY_LEADING_INHERIT` | `style-body-leading` | `inherit`                |
+*
+* **Optional** (spec §3.0). Its own module for docgen's reason
+* (`_style-body-size.ts`).
+*
+* @internal Not part of the public API.
+*/
+const BODY_LEADING = "leading-[var(--cue-style-body-leading,var(--cue-leading-ui))]";
+//#endregion
+export { BODY_LEADING };

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

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

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

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

package/dist/system/_style-body.js

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

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

@@ -0,0 +1,17 @@
+//#region src/system/_style-caption-ink.ts
+/**
+* A caption's ink (round 6, spec §11, lane R6.P: `style-caption-ink`): an avatar's
+* initials and a progress bar's label and value, falling back to the
+* `fg-muted` or `fg-subtle` each drew. coss.com/ui inks all three `fg`
+* (P143.fallback-ink, P170.label-ink, P170.value).
+*
+* **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 CAPTION_INK_MUTED = "text-[color:var(--cue-style-caption-ink,var(--cue-fg-muted))]";
+/** @see CAPTION_INK_MUTED */
+const CAPTION_INK_SUBTLE = "text-[color:var(--cue-style-caption-ink,var(--cue-fg-subtle))]";
+//#endregion
+export { CAPTION_INK_MUTED, CAPTION_INK_SUBTLE };

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

@@ -0,0 +1,19 @@
+//#region src/system/_style-caption-size.ts
+/**
+* A caption's type size (round 6, spec §11, lane R6.P: `style-caption-size`): an
+* avatar's initials, a progress bar's and a slider's readout, and a calendar's
+* month caption and weekday heads — the small type each set on the `text-label`
+* or `text-micro` rung it falls back to. coss.com/ui sets the readouts and the
+* month caption 14px (P170.label, P170.value-size, P178.value, P189.caption);
+* its initials and weekday heads are 12px, which spec §6.2's G10 line quotes.
+*
+* **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 CAPTION_SIZE_LABEL = "text-[length:var(--cue-style-caption-size,var(--cue-text-label))]";
+/** @see CAPTION_SIZE_LABEL */
+const CAPTION_SIZE_MICRO = "text-[length:var(--cue-style-caption-size,var(--cue-text-micro))]";
+//#endregion
+export { CAPTION_SIZE_LABEL, CAPTION_SIZE_MICRO };

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

@@ -0,0 +1,18 @@
+//#region src/system/_style-caption-weight.ts
+/**
+* A caption's weight (round 6, spec §11, lane R6.P: `style-caption-weight`): an
+* avatar's initials, a progress bar's label, and a calendar's month caption and
+* weekday heads, falling back to the inherited or `400` weight each drew.
+* coss.com/ui sets all four at 500 (P143.fallback-weight, P170.label-weight,
+* P189.caption-weight, P189.weekday-weight).
+*
+* **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 CAPTION_WEIGHT = "font-[number:var(--cue-style-caption-weight,inherit)]";
+/** @see CAPTION_WEIGHT */
+const CAPTION_WEIGHT_NORMAL = "font-[number:var(--cue-style-caption-weight,400)]";
+//#endregion
+export { CAPTION_WEIGHT, CAPTION_WEIGHT_NORMAL };

package/dist/system/_style-caption.js

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

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

@@ -0,0 +1,14 @@
+//#region src/system/_style-card-gap.ts
+/**
+* The gap between a card's title and its description (round 6, spec §11, lane
+* R6.P: `style-card-gap`), falling back to the `space-1` the header drew.
+* coss.com/ui's card header sets them 6px apart (P146.gap).
+*
+* **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 CARD_GAP = "gap-[var(--cue-style-card-gap,var(--cue-space-1))]";
+//#endregion
+export { CARD_GAP };

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

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

package/dist/system/_style-cell.js

@@ -0,0 +1,18 @@
+//#region src/system/_style-cell.ts
+/**
+* A table cell's inline padding and leading (round 6, spec §11, lane R6.P:
+* `style-cell-pad`, `style-cell-leading`), falling back to the row's
+* `pad-row-x` and the inherited leading. coss.com/ui pads its cells and heads
+* 10px and sets them on a line of 1 (P181, P181.head-pad, P181.cell-leading).
+*
+* **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 CELL_PAD = "px-[var(--cue-style-cell-pad,var(--cue-pad-row-x))]";
+/** @see CELL_PAD */
+const CELL_LEADING = "leading-[var(--cue-style-cell-leading,inherit)]";
+//#endregion
+export { CELL_LEADING, CELL_PAD };

package/dist/system/_style-check-glyph.js

@@ -0,0 +1,14 @@
+//#region src/system/_style-check-glyph.ts
+/**
+* A checkbox's tick and dash (round 6, spec §11, lane R6.P:
+* `style-check-glyph-size`), falling back to the `size-full` of the box they
+* drew. coss.com/ui's tick is 12px inside its 16px box (P147.glyph-size).
+*
+* **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 CHECK_GLYPH_SIZE = "size-[var(--cue-style-check-glyph-size,100%)]";
+//#endregion
+export { CHECK_GLYPH_SIZE };

package/dist/system/_style-check.js

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