@cueplusplus/ui 0.16.0 → 0.18.0

package/dist/system/_style-disclosure.js

@@ -0,0 +1,21 @@
+//#region src/system/_style-disclosure.ts
+/**
+* The inline disclosure toggle's ink, hover ink and weight (round 6, spec §11,
+* lane R6.Z: `style-disclosure-ink`, `style-disclosure-hover-ink`,
+* `style-disclosure-weight`), each falling back to what `Disclosure` drew:
+* `fg-subtle`, `fg-muted` under the pointer, and the weight it inherited.
+* greptile.com's phone contents box is a `details` whose summary is 500 in
+* `fg` and stays so under the pointer (Z137).
+*
+* **Optional** (spec §3.0). Its own module for docgen's reason: the accordion
+* and collapsible triggers ride `_style-collapse.ts` and read none of these.
+*
+* @internal Not part of the public API.
+*/
+const DISCLOSURE_INK = "text-[color:var(--cue-style-disclosure-ink,var(--cue-fg-subtle))]";
+/** @see DISCLOSURE_INK */
+const DISCLOSURE_HOVER_INK = "hover:text-[color:var(--cue-style-disclosure-hover-ink,var(--cue-fg-muted))]";
+/** @see DISCLOSURE_INK */
+const DISCLOSURE_WEIGHT = "font-[number:var(--cue-style-disclosure-weight,inherit)]";
+//#endregion
+export { DISCLOSURE_HOVER_INK, DISCLOSURE_INK, DISCLOSURE_WEIGHT };

package/dist/system/_style-empty-state.js

@@ -0,0 +1,42 @@
+//#region src/system/_style-empty-state.ts
+/**
+* The empty state's own voice (round 6, spec §11, lane R6.P): its title's face,
+* size, weight and leading (`style-empty-title-face`, `-size`, `-weight`,
+* `-leading`), falling back to the inherited face, the `text-emphasis` rung and
+* the inherited weight and leading; its icon's size (`style-empty-icon-size`),
+* falling back to `space-7`; the gap between its parts (`style-empty-gap`),
+* falling back to `space-3`; and its block padding (`style-empty-pad`), falling
+* back to `space-7`. coss.com/ui's Empty sets a 20px, 600-weight heading-face
+* title on a 1.4 line, an 18px icon, 24px between its parts and 80px (48px on a
+* phone) above and below (P156).
+*
+* **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 EMPTY_TITLE_FACE = "font-[family-name:var(--cue-style-empty-title-face,inherit)]";
+/**
+* The hint's face and weight: the body names (`style-body-face`,
+* `style-body-weight`), each falling back to the `inherit` the hint drew — it
+* set neither, so a caller's face on the root reached it. The shared
+* `BODY_VOICE` falls back to mono, which is what the sites it replaced drew; the
+* title's face above falls back to `inherit` for the same reason (the closing
+* pass's adversarial review).
+*/
+const EMPTY_HINT_VOICE = "font-[family-name:var(--cue-style-body-face,inherit)] font-[number:var(--cue-style-body-weight,inherit)]";
+/** @see EMPTY_TITLE_FACE */
+const EMPTY_TITLE_SIZE = "text-[length:var(--cue-style-empty-title-size,var(--cue-text-emphasis))]";
+/** @see EMPTY_TITLE_FACE */
+const EMPTY_TITLE_WEIGHT = "font-[number:var(--cue-style-empty-title-weight,inherit)]";
+/** @see EMPTY_TITLE_FACE */
+const EMPTY_TITLE_LEADING = "leading-[var(--cue-style-empty-title-leading,inherit)]";
+/** @see EMPTY_TITLE_FACE */
+const EMPTY_ICON_SIZE = "size-[var(--cue-style-empty-icon-size,var(--cue-space-7))]";
+/** @see EMPTY_TITLE_FACE */
+const EMPTY_GAP = "gap-[var(--cue-style-empty-gap,var(--cue-space-3))]";
+/** @see EMPTY_TITLE_FACE */
+const EMPTY_PAD = "py-[var(--cue-style-empty-pad,var(--cue-space-7))]";
+//#endregion
+export { EMPTY_GAP, EMPTY_HINT_VOICE, EMPTY_ICON_SIZE, EMPTY_PAD, EMPTY_TITLE_FACE, EMPTY_TITLE_LEADING, EMPTY_TITLE_SIZE, EMPTY_TITLE_WEIGHT };

package/dist/system/_style-eyebrow.js

@@ -0,0 +1,43 @@
+//#region src/system/_style-eyebrow.ts
+/**
+* The eyebrow's voice: its face, size, ink, weight and whether it prints the
+* `//` glyph — the console's by default, the style set's choice inside one.
+*
+* Spec 2026-09-26-looks-fidelity §3.6 (R2). `Eyebrow` is the one caption the
+* four measured Looks each draw differently from the rest of their labels:
+* zine's is a 1–1.125rem kicker, kiln's a mono 0.8125rem at weight 500 in a
+* softened heading ink, tender's is in the body ink, and none of the four
+* prints the slashes. So it has names of its own rather than riding the label
+* names — but it falls back THROUGH them, so a set that restyles its labels
+* and says nothing about its eyebrow gets an eyebrow that matches its labels.
+*
+* Every name is optional (spec §3.0, F-3), emitted as `initial` on the shared
+* `[data-style]` reset, so under no set, `console` and every set that declines
+* them each reader resolves to exactly what the class it replaced resolved to:
+*
+* - face: `LABEL_FACE`'s own chain, `var(--cue-style-label-face, var(--cue-font-mono))`;
+* - size: `var(--cue-style-label-size, var(--cue-text-label))`, the label size's chain;
+* - ink: `var(--cue-accent)`, what `text-accent` compiled to;
+* - weight: `inherit` — the eyebrow declared none (see `_style-label-weight.ts`
+*   on why a literal `400` would not be a no-op, and on the `font-[number:…]`
+*   spelling);
+* - glyph: `inline`, the slashes' own display. A flex item is blockified either
+*   way, so under no set it computes what it computed before; `none` removes it.
+*
+* **One module for the five**, because `Eyebrow` is their only reader:
+* `@repo/docgen` attributes a token by the file its class string lives in, and
+* every importer of this file reads every name in it.
+*
+* @internal Not part of the public API.
+*/
+const EYEBROW_FACE = "font-[family-name:var(--cue-style-eyebrow-face,var(--cue-style-label-face,var(--cue-font-mono)))]";
+/** @see EYEBROW_FACE — the eyebrow's size, falling back through the label size. */
+const EYEBROW_SIZE = "text-[length:var(--cue-style-eyebrow-size,var(--cue-style-label-size,var(--cue-text-label)))]";
+/** @see EYEBROW_FACE — the eyebrow's ink; the accent by default. */
+const EYEBROW_INK = "text-[color:var(--cue-style-eyebrow-ink,var(--cue-accent))]";
+/** @see EYEBROW_FACE — the eyebrow's weight; inherited by default. */
+const EYEBROW_WEIGHT = "font-[number:var(--cue-style-eyebrow-weight,inherit)]";
+/** @see EYEBROW_FACE — the `//` glyph's display: `inline` by default, `none` to drop it. */
+const EYEBROW_GLYPH = "[display:var(--cue-style-eyebrow-glyph,inline)]";
+//#endregion
+export { EYEBROW_FACE, EYEBROW_GLYPH, EYEBROW_INK, EYEBROW_SIZE, EYEBROW_WEIGHT };

package/dist/system/_style-field-chassis.js

@@ -0,0 +1,38 @@
+//#region src/system/_style-field-chassis.ts
+/**
+* The field chassis's inline padding and hover edge (round 6, spec §11, lane
+* R6.T: `style-field-pad`, `style-field-hover-edge`), and its invalid edge.
+*
+* stripe.com pads its text field, textarea and select trigger 16px
+* (`--hds-space-core-200`) where ours pad 12px (`space-4` at normal), so the
+* padding is the rung times a set's multiplier (T132, T148); it draws a
+* lavender edge under the pointer (`--hds-color-input-border-hoverSubdued`,
+* T132, T148, T153). An invalid field's resting edge there is a pale red
+* (`--hds-color-input-border-errorBlur`, T147), which Tender refuses (spec
+* §6.2), so no set spends a name for it and the edge is plain `danger`.
+*
+* **The fallbacks are the classes they replace**: each rung's `px-(--cue-space-*)`
+* times 1, the `transparent` the chassis's border already is (so a pointer
+* over a field under a set that declines the name changes nothing: Tailwind
+* emits `hover:` before `focus:` and `data-[invalid]:`, so a focused or
+* invalid field keeps its own edge).
+*
+* @internal Not part of the public API.
+*/
+const FIELD_PAD_SM = "px-[calc(var(--cue-space-3)*var(--cue-style-field-pad,1))]";
+/** The `md` rung's inline padding, and the textarea's. */
+const FIELD_PAD_MD = "px-[calc(var(--cue-space-4)*var(--cue-style-field-pad,1))]";
+/** The `lg` rung's inline padding. */
+const FIELD_PAD_LG = "px-[calc(var(--cue-space-5)*var(--cue-style-field-pad,1))]";
+/** The edge under a pointer that can hover. */
+const FIELD_HOVER_EDGE = "hover:border-[color:var(--cue-style-field-hover-edge,transparent)]";
+/** An invalid field's edge: `danger`, the class the chassis drew before round 6. */
+const INVALID_EDGE = "data-[invalid]:border-danger";
+/**
+* The select trigger's own hover edge: it draws `border-strong` under the
+* pointer where the rest of the chassis draws nothing, so its reader falls
+* back to that, and a set's field hover edge reaches it too.
+*/
+const SELECT_HOVER_EDGE = "hover:not-data-disabled:border-[color:var(--cue-style-field-hover-edge,var(--cue-border-strong))]";
+//#endregion
+export { FIELD_HOVER_EDGE, FIELD_PAD_LG, FIELD_PAD_MD, FIELD_PAD_SM, INVALID_EDGE, SELECT_HOVER_EDGE };

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

@@ -0,0 +1,12 @@
+//#region src/system/_style-field-gap.ts
+/**
+* The gap between a field's label, its control and its help line (round 6,
+* spec §11, lane R6.T: `style-field-gap`, MULT), falling back to the `space-2`
+* it drew times 1. stripe.com leaves 8px under a label
+* (`.hds-field__label-layout`'s margin) where ours leaves 6px at normal (T147).
+*
+* @internal Not part of the public API.
+*/
+const FIELD_GAP = "gap-[calc(var(--cue-space-2)*var(--cue-style-field-gap,1))]";
+//#endregion
+export { FIELD_GAP };

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

@@ -0,0 +1,47 @@
+//#region src/system/_style-footer-rule.ts
+/**
+* The width of the rule across the top of `Footer`, and the line style of
+* both of its rules.
+*
+* Spec 2026-09-26-looks-fidelity §3.11 (plan R4). `Footer` spends `Band`'s
+* recipe, whose rule is `--cue-band-rule` wide, and a Look whose bands carry
+* no rule but whose footer does (kiln) needs the footer's width on its own.
+* `--cue-style-footer-rule` is that width, and this reads it.
+*
+* **The fallback is the class it replaces**: `bandClasses("rule")`'s
+* `border-t-(length:--cue-band-rule)`, which compiles to
+* `var(--cue-band-rule)`. Composed after it, so `tailwind-merge` drops the
+* recipe's own width and keeps this one; `Band` is untouched.
+*
+* **The line style fills Tailwind's own slot** (`style-footer-rule-style`,
+* round 5 of plan V.2: `tender` dashes both rules, T120 and T121). Both of
+* the footer's rules are written by width utilities — the band rule by
+* `border-t-[length:…]` above, the fine print's by `border-t` — and each
+* writes `border-top-style: var(--tw-border-style)`, a slot Tailwind
+* registers as `@property` with `inherits: false` and `initial-value: solid`,
+* which is the solid rule the footer always drew. So `Footer` spends
+* {@link FOOTER_RULE_STYLE} on both elements, as `_style-app-bar.ts` fills the
+* same slot for the bar's rule: one declaration each, rather than a raw
+* `[border-top-style:…]` that Tailwind would emit after `border-dotted` and
+* that would beat a caller's own style class. Through the slot, a caller's
+* `className="border-dotted"` still wins on the landmark, because a style
+* utility writes `border-style` itself and is emitted after the width
+* utilities. The slot does not inherit, so filling it on the landmark reaches
+* no descendant's border, which is why the fine-print row fills it too.
+*
+* Its own name rather than `style-chrome-rule-style`, the bar's: the sources
+* style the two ends of a page apart. Tender's dashes its footer's rules and
+* draws the rule under its header solid; zine's dashes its header rule.
+*
+* **Its own module, and not in `_band.ts`**, whose docblock says why: docgen
+* publishes every `--cue-*` in that file as a token both `Band` and `Footer`
+* paint, and `Band` reads neither name here. A band's rule keeps its solid
+* under every set.
+*
+* @internal Not part of the public API.
+*/
+const FOOTER_RULE = "border-t-[length:var(--cue-style-footer-rule,var(--cue-band-rule))]";
+/** Both footer rules' line style, filling the slot their `border-t` utilities read. */
+const FOOTER_RULE_STYLE = "[--tw-border-style:var(--cue-style-footer-rule-style,solid)]";
+//#endregion
+export { FOOTER_RULE, FOOTER_RULE_STYLE };

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

@@ -0,0 +1,20 @@
+//#region src/system/_style-glyph-ink.ts
+/**
+* A control's glyph ink (round 6, spec §11, lane R6.P: `style-glyph-ink`): the
+* chevron on a select and a filterable field, a number field's steppers, the
+* date trigger's calendar mark, a calendar's month arrows, pagination's
+* ellipsis and an empty state's icon. Each falls back to the `fg-subtle` or
+* `fg-muted` it drew. coss.com/ui draws all of them in `fg` (P151.chevron-ink,
+* P174.chevron-ink, P165.stepper-ink, P167.ellipsis, P189.nav-ink,
+* P156.icon-ink).
+*
+* **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 GLYPH_INK_SUBTLE = "text-[color:var(--cue-style-glyph-ink,var(--cue-fg-subtle))]";
+/** @see GLYPH_INK_SUBTLE */
+const GLYPH_INK_MUTED = "text-[color:var(--cue-style-glyph-ink,var(--cue-fg-muted))]";
+//#endregion
+export { GLYPH_INK_MUTED, GLYPH_INK_SUBTLE };

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

@@ -0,0 +1,20 @@
+//#region src/system/_style-glyph-opacity.ts
+/**
+* An affordance glyph's opacity (round 6, spec §11, lane R6.P:
+* `style-glyph-opacity`): the chevron on a select and a filterable field, the
+* date trigger's calendar mark, a calendar's month arrows, and a glyph in an
+* input group's gutters. Each falls back to `1`, the opacity it drew.
+* coss.com/ui paints all of them in `fg` at 80% (P151, P153, P161, P174,
+* P189), and its number-field steppers, pagination ellipsis and empty-state
+* icon at full strength, so those read `style-glyph-ink` alone.
+*
+* **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 GLYPH_OPACITY = "opacity-[var(--cue-style-glyph-opacity,1)]";
+/** @see GLYPH_OPACITY — on the glyphs inside a wrapper, so a focus ring on the wrapper keeps its strength. */
+const GLYPH_OPACITY_SVG = "[&_svg]:opacity-[var(--cue-style-glyph-opacity,1)]";
+//#endregion
+export { GLYPH_OPACITY, GLYPH_OPACITY_SVG };

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

@@ -0,0 +1,21 @@
+//#region src/system/_style-glyph-size.ts
+/**
+* A control's glyph size (round 6, spec §11, lane R6.P: `style-glyph-size`): the
+* date trigger's calendar mark and a number field's stepper glyphs, falling
+* back to the `icon-sm` they drew. coss.com/ui draws both 16px (P153.icon,
+* P165.stepper-glyph).
+*
+* **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 GLYPH_SIZE = "size-[var(--cue-style-glyph-size,var(--cue-icon-sm))]";
+/**
+* The same size for a glyph set as type: a number field's − and +, which fall
+* back to the size they inherited. coss.com/ui's stepper glyphs are 16px
+* (P165.stepper-glyph).
+*/
+const GLYPH_TEXT_SIZE = "text-[length:var(--cue-style-glyph-size,inherit)]";
+//#endregion
+export { GLYPH_SIZE, GLYPH_TEXT_SIZE };

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

@@ -0,0 +1,15 @@
+//#region src/system/_style-group-gap.ts
+/**
+* The gap between the items of a group control (round 6, spec §11, lane R6.P:
+* `style-group-gap`): a ToggleGroup's toggles and a tab list's tabs, falling
+* back to the `space-1` both drew. coss.com/ui sets both 2px apart (P141,
+* P182.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 GROUP_GAP = "gap-[var(--cue-style-group-gap,var(--cue-space-1))]";
+//#endregion
+export { GROUP_GAP };

package/dist/system/_style-group-label-pad.js

@@ -0,0 +1,14 @@
+//#region src/system/_style-group-label-pad.ts
+/**
+* A menu group label's block padding (round 6, spec §11, lane R6.P:
+* `style-group-label-pad`), falling back to the `0px` it drew inside its fixed
+* row height. coss.com/ui pads its labels 6px (P163.label-pad).
+*
+* **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 GROUP_LABEL_PAD = "py-[var(--cue-style-group-label-pad,0px)]";
+//#endregion
+export { GROUP_LABEL_PAD };

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

@@ -0,0 +1,24 @@
+//#region src/system/_style-group-label.ts
+/**
+* A caption over a group of rows (round 6, spec §11, lane R6.P:
+* `style-group-label-size`, `style-group-label-ink`): a menu's and a command
+* palette's group labels. A menu's falls back through `style-label-size` and
+* `style-label-ink` to the rung and ink it drew; the palette's, which read no
+* label name, to its `text-micro` and `fg-subtle`. coss.com/ui sets both at
+* 12px in `fg-muted` (P163.label-size, P152.group-label, P152.group-label-ink),
+* where its field labels are 14px `fg`.
+*
+* **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 GROUP_LABEL_SIZE = "text-[length:var(--cue-style-group-label-size,var(--cue-style-label-size,var(--cue-text-label)))]";
+/** @see GROUP_LABEL_SIZE */
+const GROUP_LABEL_INK = "text-[color:var(--cue-style-group-label-ink,var(--cue-style-label-ink,var(--cue-fg-subtle)))]";
+/** @see GROUP_LABEL_SIZE — the palette's, which read no label name. */
+const GROUP_LABEL_SIZE_MICRO = "text-[length:var(--cue-style-group-label-size,var(--cue-text-micro))]";
+/** @see GROUP_LABEL_SIZE */
+const GROUP_LABEL_INK_SUBTLE = "text-[color:var(--cue-style-group-label-ink,var(--cue-fg-subtle))]";
+//#endregion
+export { GROUP_LABEL_INK, GROUP_LABEL_INK_SUBTLE, GROUP_LABEL_SIZE, GROUP_LABEL_SIZE_MICRO };

package/dist/system/_style-gutter.js

@@ -0,0 +1,17 @@
+//#region src/system/_style-gutter.ts
+/**
+* A padded `Container`'s gutter (plan V.2, T119): `style-gutter`, falling back
+* to the `space-6` it drew. Tender's page column is 16px in from the viewport
+* on a phone and its band column is 1232px wide at 1440, where `space-6` is
+* 24px. A proportion of the rung (RUNG(`space-6`)), so it follows density.
+*
+* Spec §3.11 withdrew a `style-gutter` in round 1 because no row needed it;
+* T38 and T119 are the rows.
+*
+* **Optional** (spec §3.0). Its own module for docgen's reason.
+*
+* @internal Not part of the public API.
+*/
+const GUTTER = "px-[var(--cue-style-gutter,var(--cue-space-6))]";
+//#endregion
+export { GUTTER };

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

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

package/dist/system/_style-help.js

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

package/dist/system/_style-hover-card-width.js

@@ -0,0 +1,15 @@
+//#region src/system/_style-hover-card-width.ts
+/**
+* A hover card's width (round 6, spec §11, lane R6.P: `style-hover-card-width`),
+* falling back to the 20rem it drew, under the same viewport cap. coss.com/ui's
+* preview card is 256px (`w-64`, P169.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 HOVER_CARD_WIDTH = "w-[min(var(--cue-style-hover-card-width,20rem),calc(100vw-2rem))]";
+//#endregion
+export { HOVER_CARD_WIDTH };

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

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

package/dist/system/_style-kbd.js

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

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

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

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

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

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

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

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

@@ -0,0 +1,14 @@
+//#region src/system/_style-label-leading.ts
+/**
+* A field label's leading (plan V.2, P10): `style-label-leading`, falling back
+* to the `leading-none` (`1`) the label drew. Porcelain's field label is 16px
+* on 14px type, a 1.143 leading.
+*
+* **Optional** (spec §3.0). Its own module because docgen attributes a token
+* to a component by the file its class string lives in.
+*
+* @internal Not part of the public API.
+*/
+const LABEL_LEADING = "leading-[var(--cue-style-label-leading,1)]";
+//#endregion
+export { LABEL_LEADING };