@cueplusplus/ui 0.17.0 → 0.18.0

package/dist/system/_style-disabled.js

@@ -0,0 +1,70 @@
+//#region src/system/_style-disabled.ts
+/**
+* A disabled control's opacity, fill and ink (round 6, spec §11, lane R6.T:
+* `style-disabled-opacity`, `style-disabled-fill`, `style-disabled-ink`).
+*
+* The chassis marks a disabled control by fading it to 40%, whatever the Look.
+* stripe.com's system paints its disabled controls instead: a button, a
+* checkbox, a switch's track and a text field fill with its quiet surface
+* (`--hds-color-input-bg-disabled`, #e5edf5 over white), a disabled label and
+* button text take a pale ink (`--hds-color-input-text-disabled`, #95a4ba),
+* and nothing fades (T143, T132, T145, T146). So a set may lift the fade and
+* name the fill and the ink.
+*
+* **Every reader falls back to what its control drew before**: the fade to
+* `0.4`, each fill and ink to the resting value of the same control and
+* state, spelled here byte for byte, so a disabled control under a set that
+* declines all three is exactly the faded control it was. Each is spelled
+* out whole, because Tailwind reads class names from source text and cannot
+* see one built at run time.
+*
+* **Its own module**, because docgen credits every `--cue-*` in a module to
+* each component that imports it: the button chassis, the field chassis, the
+* checkbox and the switch each import the constants they spend.
+*
+* @internal Not part of the public API.
+*/
+/** The fade on `:disabled` (a native control). */
+const DISABLED_OPACITY = "disabled:opacity-[var(--cue-style-disabled-opacity,0.4)]";
+/** The fade on `[data-disabled]` (Base UI's own attribute). */
+const DATA_DISABLED_OPACITY = "data-[disabled]:opacity-[var(--cue-style-disabled-opacity,0.4)]";
+/** The fade on a control's label, which holds the disabled control. */
+const LABEL_DISABLED_OPACITY = "has-[[data-disabled]]:opacity-[var(--cue-style-disabled-opacity,0.4)]";
+/** A disabled control label's ink, falling back to the label ink it drew (`LABEL_INK`). */
+const LABEL_DISABLED_INK = "has-[[data-disabled]]:text-[color:var(--cue-style-disabled-ink,var(--cue-style-label-ink,var(--cue-fg-muted)))]";
+/**
+* The field chassis's fill when disabled: its own two layers (`STROKE_SUNKEN`),
+* with the fill layer's `sunken` read through `style-disabled-fill`, on
+* `:disabled` and on `[data-disabled]`.
+*/
+const FIELD_DISABLED_FILL = "disabled:bg-[linear-gradient(var(--cue-style-disabled-fill,var(--cue-sunken)),var(--cue-style-disabled-fill,var(--cue-sunken))),linear-gradient(var(--cue-paint-stroke-angle),var(--cue-paint-stroke-from,var(--cue-border)),var(--cue-paint-stroke-to,var(--cue-border)))] data-[disabled]:bg-[linear-gradient(var(--cue-style-disabled-fill,var(--cue-sunken)),var(--cue-style-disabled-fill,var(--cue-sunken))),linear-gradient(var(--cue-paint-stroke-angle),var(--cue-paint-stroke-from,var(--cue-border)),var(--cue-paint-stroke-to,var(--cue-border)))]";
+/**
+* The button tones' fill and ink when disabled, each falling back to the tone's own resting fill and ink.
+* The two transparent tones keep their ground and take an edge instead (`style-disabled-edge`, falling
+* back to the edge each drew): stripe.com's disabled icon button stays on its ground and draws a 1px rim
+* in its disabled border ink (T139), where its filled buttons fill (T143).
+*/
+const DISABLED_TONES = {
+	primary: "disabled:bg-[color:var(--cue-style-disabled-fill,var(--cue-accent-fill))] disabled:text-[color:var(--cue-style-disabled-ink,var(--cue-accent-fill-fg))]",
+	secondary: "disabled:bg-[color:var(--cue-style-disabled-fill,var(--cue-style-secondary-ground,var(--cue-surface-2)))] disabled:text-[color:var(--cue-style-disabled-ink,var(--cue-style-secondary-ink,var(--cue-fg-muted)))]",
+	ghost: "disabled:border-[color:var(--cue-style-disabled-edge,transparent)] disabled:text-[color:var(--cue-style-disabled-ink,var(--cue-style-quiet-ink,var(--cue-fg-muted)))]",
+	outline: "disabled:border-[color:var(--cue-style-disabled-edge,var(--cue-style-outline-edge,var(--cue-border)))] disabled:text-[color:var(--cue-style-disabled-ink,var(--cue-style-quiet-ink,var(--cue-fg)))]",
+	danger: "disabled:bg-[color:var(--cue-style-disabled-fill,var(--cue-danger))] disabled:text-[color:var(--cue-style-disabled-ink,var(--cue-danger-fg))]",
+	"danger-outline": "disabled:bg-[color:var(--cue-style-disabled-fill,transparent)] disabled:text-[color:var(--cue-style-disabled-ink,var(--cue-danger))]"
+};
+/**
+* The checkbox's box when disabled: its fill, and its edge, which a disabled
+* box draws in its own fill (the source's disabled box draws no border, so
+* the two read as one square). Each state keeps its own fallback: the
+* resting `sunken` and edge, and the checked and indeterminate `accent`.
+*
+* The checked and indeterminate edges skip an invalid box: they name two
+* attributes and so outrank `data-[invalid]:border-danger`, and a disabled,
+* checked, invalid box drew `danger` before round 6 (the closing pass's
+* adversarial review).
+*/
+const CHECK_DISABLED = "data-[disabled]:bg-[color:var(--cue-style-disabled-fill,var(--cue-sunken))] data-[disabled]:border-[color:var(--cue-style-disabled-fill,var(--cue-style-check-edge,var(--cue-border)))] data-[disabled]:data-[checked]:bg-[color:var(--cue-style-disabled-fill,var(--cue-accent))] data-[disabled]:data-[checked]:not-data-[invalid]:border-[color:var(--cue-style-disabled-fill,var(--cue-accent))] data-[disabled]:data-[indeterminate]:bg-[color:var(--cue-style-disabled-fill,var(--cue-accent))] data-[disabled]:data-[indeterminate]:not-data-[invalid]:border-[color:var(--cue-style-disabled-fill,var(--cue-accent))]";
+/** The switch's track when disabled, unchecked and checked, each state keeping its own fallback. */
+const SWITCH_DISABLED_TRACK = "data-[disabled]:bg-[color:var(--cue-style-disabled-fill,var(--cue-surface-3))] data-[disabled]:data-[checked]:bg-[color:var(--cue-style-disabled-fill,var(--cue-accent))]";
+//#endregion
+export { CHECK_DISABLED, DATA_DISABLED_OPACITY, DISABLED_OPACITY, DISABLED_TONES, FIELD_DISABLED_FILL, LABEL_DISABLED_INK, LABEL_DISABLED_OPACITY, SWITCH_DISABLED_TRACK };

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

@@ -25,5 +25,14 @@
 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_SIZE };
+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-kbd.js

@@ -42,5 +42,17 @@ const KBD_SIZE = "text-[length:var(--cue-style-kbd-size,var(--cue-style-chip-siz
 * 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_SIZE };
+export { KBD_BOX, KBD_EDGE, KBD_FILL, KBD_LEADING, KBD_SIZE };

package/dist/system/_style-link.js

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

package/dist/system/_style-menu.js

@@ -26,5 +26,18 @@ const MENU_ITEM_INK = "text-[color:var(--cue-style-quiet-ink,var(--cue-fg-muted)
 * they drew no corner.
 */
 const MENU_ITEM_RADIUS = "rounded-[var(--cue-style-menu-item-radius,calc(var(--cue-radius-control)*var(--cue-radius-scale)))]";
+/**
+* A menu popup's minimum width (round 6, spec §11, lane R6.P:
+* `style-menu-min-width`), falling back to the `10rem` it drew. coss.com/ui's
+* menus start at 8rem (`min-w-32`, P163.min-width).
+*/
+const MENU_MIN_WIDTH = "min-w-[var(--cue-style-menu-min-width,10rem)]";
+/**
+* The inline inset of the rule between a menu's groups (round 6, spec §11, lane
+* R6.P: `style-menu-separator-inset`), falling back to the `0px` it drew: the
+* rule ran rim to rim. coss.com/ui's stops 8px short of each side
+* (P163.separator-inset).
+*/
+const MENU_SEPARATOR_INSET = "mx-[var(--cue-style-menu-separator-inset,0px)]";
 //#endregion
-export { MENU_ITEM_INK, MENU_ITEM_RADIUS };
+export { MENU_ITEM_INK, MENU_ITEM_RADIUS, MENU_MIN_WIDTH, MENU_SEPARATOR_INSET };

package/dist/system/_style-meter.js

@@ -0,0 +1,15 @@
+//#region src/system/_style-meter.ts
+/**
+* A meter track's corner (round 6, spec §11, lane R6.P: `style-meter-radius`),
+* falling back to the `rounded-full` it drew. coss.com/ui's meter track is
+* square (P164.radius).
+*
+* **Optional** (spec §3.0): each name is declared by `porcelain` alone and each
+* reader falls back to what the component drew. Its own module for docgen's
+* reason: one component's tokens per file.
+*
+* @internal Not part of the public API.
+*/
+const METER_RADIUS = "rounded-[var(--cue-style-meter-radius,calc(infinity*1px))]";
+//#endregion
+export { METER_RADIUS };

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

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

package/dist/system/_style-option.js

@@ -29,14 +29,71 @@
 * 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
+* The highlighted row's ink reads `style-option-highlight-ink` (round 6, lane
+* R6.G), falling back to the `fg` every Look's highlighted row drew:
+* agent-native.com's language listbox keeps its rows' `#3d3d3d` under the
+* pointer (G143.hover-ink). The weight is spelt out whole rather than composed from
 * `_style-body-weight.ts`: a variant prefixed onto an interpolated constant is
 * a class that appears in no source file, and a consumer's Tailwind, which
 * scans this package's build for candidates, would never generate it.
 *
 * @internal Not part of the public API.
 */
-const OPTION_ROW = "rounded-[var(--cue-style-menu-item-radius,0px)] text-[color:var(--cue-style-option-ink,var(--cue-fg-muted))] [:where(&:not([data-selected]))]:font-[number:var(--cue-style-body-weight,inherit)] data-[highlighted]:bg-[color:var(--cue-style-menu-highlight,var(--cue-accent-soft))] data-[highlighted]:text-fg data-[selected]:text-[color:var(--cue-style-option-selected-ink,var(--cue-accent))]";
+const OPTION_ROW = "rounded-[var(--cue-style-menu-item-radius,0px)] text-[color:var(--cue-style-option-ink,var(--cue-fg-muted))] [:where(&:not([data-selected]))]:font-[number:var(--cue-style-body-weight,inherit)] data-[highlighted]:bg-[color:var(--cue-style-menu-highlight,var(--cue-accent-soft))] data-[highlighted]:text-[color:var(--cue-style-option-highlight-ink,var(--cue-fg))] data-[selected]:text-[color:var(--cue-style-option-selected-ink,var(--cue-accent))]";
+/**
+* A listbox row's box (round 6, spec §11, lane R6.T: `style-option-pad`,
+* `style-option-leading`, `style-option-height`): the select's rows and the
+* combobox, autocomplete and multi-select rows (`forms/_listbox.ts`).
+*
+* stripe.com's rows (`.hds-listbox__item`) pad 12px, set 16px at 1.25 and
+* stand 36px tall (T149, T154), where ours pad `space-3` (8px at normal), set
+* an inherited leading, and ride the control ladder's `sm` rung (40px). Each
+* falls back to the class it replaced.
+*/
+const OPTION_PAD = "px-[calc(var(--cue-space-3)*var(--cue-style-option-pad,1))]";
+/** A listbox row's leading. */
+const OPTION_LEADING = "leading-[var(--cue-style-option-leading,inherit)]";
+/** A listbox row's height. */
+const OPTION_HEIGHT = "h-[var(--cue-style-option-height,var(--cue-control-sm))]";
+/**
+* A selected row's ground (round 6, spec §11, lane R6.K:
+* `style-option-selected-ground`), falling back to the `transparent` a
+* selected row drew: the recipe above marks selection by ink alone.
+* replit.com's credit-tier listbox fills its selected row with a warm tint,
+* #f5e7e2, under a deep accent ink (K147).
+*/
+const OPTION_SELECTED_GROUND = "data-[selected]:bg-[color:var(--cue-style-option-selected-ground,transparent)]";
+/**
+* A row that is selected *and* highlighted — the row a select opens on, and
+* the selected row under the pointer — keeps the highlight ground it drew
+* before `style-option-selected-ground` existed. The name's fallback here is
+* the highlight's own chain, and the two attributes together outrank either
+* alone, so the order Tailwind emits `data-[selected]` and `data-[highlighted]`
+* in cannot decide it. A set that names a selected ground (Kiln) paints it
+* under the pointer too. The closing pass's full runs found the gap
+* (T112.ground): with {@link OPTION_SELECTED_GROUND} alone, the open row lost
+* its highlight in every Look but Kiln, and in no Look at all.
+*/
+const OPTION_SELECTED_HIGHLIGHT_GROUND = "data-[selected]:data-[highlighted]:bg-[color:var(--cue-style-option-selected-ground,var(--cue-style-menu-highlight,var(--cue-accent-soft)))]";
+/**
+* A selected row under the pointer (the closing pass, lane R6.G:
+* `style-option-selected-hover-ground`), falling back to what the row paints
+* selected and highlighted ({@link OPTION_SELECTED_HIGHLIGHT_GROUND}), which a
+* pointer over it always is. A list opens with its selected row highlighted, so
+* a set that grounds that row needs the pointer's own ground to answer a hover:
+* agent-native.com's selected option sits on its raised ground, #ffffff /
+* #0f0f0f, until the pointer paints its hover fill over it (G143). `hover:` is
+* the pointer's alone, so a list opened from the keyboard keeps the selected
+* ground, and the third attribute outranks the two above.
+*/
+const OPTION_SELECTED_POINTER_GROUND = "data-[selected]:data-[highlighted]:hover:bg-[color:var(--cue-style-option-selected-hover-ground,var(--cue-style-option-selected-ground,var(--cue-style-menu-highlight,var(--cue-accent-soft))))]";
+/**
+* A listbox popup's own padding (lane R6.K: `style-listbox-pad`, PAD2),
+* falling back to the `space-1` block and `0` inline it drew (`py-(--cue-space-1)`).
+* replit.com's listbox pads 4px all round, so its rows sit inside the popup's
+* edge (K146). Read by `Select`'s popup and the listbox family's
+* (`forms/_listbox.ts`).
+*/
+const LISTBOX_PAD = "p-[var(--cue-style-listbox-pad,var(--cue-space-1)_0)]";
 //#endregion
-export { OPTION_ROW };
+export { LISTBOX_PAD, OPTION_HEIGHT, OPTION_LEADING, OPTION_PAD, OPTION_ROW, OPTION_SELECTED_GROUND, OPTION_SELECTED_HIGHLIGHT_GROUND, OPTION_SELECTED_POINTER_GROUND };

package/dist/system/_style-otp.js

@@ -0,0 +1,15 @@
+//#region src/system/_style-otp.ts
+/**
+* The gap between an OTP field's slots (round 6, spec §11, lane R6.P:
+* `style-otp-gap`), falling back to the `space-2` it drew. coss.com/ui sets its
+* slots 8px apart (P166.gap).
+*
+* **Optional** (spec §3.0): each name is declared by `porcelain` alone and each
+* reader falls back to what the component drew. Its own module for docgen's
+* reason: one component's tokens per file.
+*
+* @internal Not part of the public API.
+*/
+const OTP_GAP = "gap-[var(--cue-style-otp-gap,var(--cue-space-2))]";
+//#endregion
+export { OTP_GAP };

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

@@ -0,0 +1,18 @@
+//#region src/system/_style-outline-hover.ts
+/**
+* An outline button's hover (round 6, spec §11, lane R6.P:
+* `style-outline-hover-ground`, `style-outline-hover-edge`), falling back to
+* the transparent ground and `accent` edge it drew. coss.com/ui's outline
+* button fills a faint ink on hover and keeps its rim grey (P145.outline,
+* P145.outline-edge).
+*
+* **Optional** (spec §3.0). Its own module for docgen's reason: one token per
+* file, so only the components that read it are credited with it.
+*
+* @internal Not part of the public API.
+*/
+const OUTLINE_HOVER_GROUND = "hover:bg-[color:var(--cue-style-outline-hover-ground,transparent)]";
+/** @see OUTLINE_HOVER_GROUND */
+const OUTLINE_HOVER_EDGE = "hover:border-[color:var(--cue-style-outline-hover-edge,var(--cue-accent))]";
+//#endregion
+export { OUTLINE_HOVER_EDGE, OUTLINE_HOVER_GROUND };

package/dist/system/_style-page.js

@@ -0,0 +1,17 @@
+//#region src/system/_style-page.ts
+/**
+* Pagination's current page (round 6, spec §11, lane R6.P:
+* `style-page-current-ground`, `style-page-current-rim`, `style-page-current-edge`),
+* falling back to the `accent-soft` fill and no rim, as it drew. coss.com/ui marks the
+* current page as an outline button: the surface, in a 1px rim (P167.current,
+* P167.current-edge).
+*
+* **Optional** (spec §3.0): each name is declared by `porcelain` alone and each
+* reader falls back to what the component drew. Its own module for docgen's
+* reason: one component's tokens per file.
+*
+* @internal Not part of the public API.
+*/
+const PAGE_CURRENT = "border-solid border-[length:var(--cue-style-page-current-rim,0px)] border-[color:var(--cue-style-page-current-edge,transparent)] bg-[color:var(--cue-style-page-current-ground,var(--cue-accent-soft))] text-accent";
+//#endregion
+export { PAGE_CURRENT };

package/dist/system/_style-palette.js

@@ -0,0 +1,18 @@
+//#region src/system/_style-palette.ts
+/**
+* The command palette's own parts (round 6, spec §11, lane R6.P): the rule under
+* its search field (`style-palette-rule`), falling back to the `border` it
+* drew, and its footer's block padding (`style-palette-footer-pad`), falling
+* back to `space-2`. coss.com/ui draws no rule there and pads its footer 12px
+* (P152.input-rule, P152.footer).
+*
+* **Optional** (spec §3.0). Its own module for docgen's reason: one token per
+* file, so only the components that read it are credited with it.
+*
+* @internal Not part of the public API.
+*/
+const PALETTE_RULE = "border-[color:var(--cue-style-palette-rule,var(--cue-border))]";
+/** @see PALETTE_RULE */
+const PALETTE_FOOTER_PAD = "py-[var(--cue-style-palette-footer-pad,var(--cue-space-2))]";
+//#endregion
+export { PALETTE_FOOTER_PAD, PALETTE_RULE };