@cueplusplus/ui 0.17.0 → 0.18.1

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

package/dist/system/_style-panel.js

@@ -0,0 +1,21 @@
+//#region src/system/_style-panel.ts
+/**
+* A panel header's padding and rule (round 6, spec §11, lane R6.P:
+* `style-panel-pad-y`, `style-panel-pad-x`, `style-panel-rule`), falling back
+* to the row paddings and the `border` it drew. coss.com/ui's frame panel pads
+* its header 16px by 20px and draws no rule under it (P158, P158.pad-inline,
+* P158.header-rule).
+*
+* **Optional** (spec §3.0): each name is declared by `porcelain` alone and each
+* reader falls back to what the component drew. Its own module for docgen's
+* reason: one component's tokens per file.
+*
+* @internal Not part of the public API.
+*/
+const PANEL_PAD_Y = "py-[var(--cue-style-panel-pad-y,var(--cue-pad-row-y))]";
+/** @see PANEL_PAD_Y */
+const PANEL_PAD_X = "px-[var(--cue-style-panel-pad-x,var(--cue-pad-row-x))]";
+/** @see PANEL_PAD_Y */
+const PANEL_RULE = "border-[color:var(--cue-style-panel-rule,var(--cue-border))]";
+//#endregion
+export { PANEL_PAD_X, PANEL_PAD_Y, PANEL_RULE };

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

@@ -0,0 +1,15 @@
+//#region src/system/_style-popover-width.ts
+/**
+* A popover's width (round 6, spec §11, lane R6.P: `style-popover-width`), falling
+* back to the `auto` it drew, sized to its content under its viewport cap.
+* coss.com/ui's popover is 320px (`w-80`, P168.width).
+*
+* **Optional** (spec §3.0): declared by `porcelain` alone, and the reader falls
+* back to what the component drew. Its own module for docgen's reason: one
+* component's tokens per file.
+*
+* @internal Not part of the public API.
+*/
+const POPOVER_WIDTH = "w-[var(--cue-style-popover-width,auto)]";
+//#endregion
+export { POPOVER_WIDTH };

package/dist/system/_style-radio.js

@@ -0,0 +1,19 @@
+//#region src/system/_style-radio.ts
+/**
+* A checked radio (round 6, spec §11, lane R6.P): its ground
+* (`style-radio-checked-ground`), falling back to the `sunken` it keeps; its dot's
+* ink and size (`style-radio-dot-ink`, `style-radio-dot-size`), falling back to
+* the `accent` half-size dot it drew. coss.com/ui fills a checked radio in `fg`
+* around a 6px dot in the page ground (P171.checked-edge, P171.dot-size).
+*
+* **Optional** (spec §3.0): each name is declared by `porcelain` alone and each
+* reader falls back to what the component drew. Its own module for docgen's
+* reason: one component's tokens per file.
+*
+* @internal Not part of the public API.
+*/
+const RADIO_CHECKED_GROUND = "data-[checked]:bg-[color:var(--cue-style-radio-checked-ground,var(--cue-sunken))]";
+/** @see RADIO_CHECKED_GROUND */
+const RADIO_DOT = "size-[var(--cue-style-radio-dot-size,calc(1/2*100%))] bg-[color:var(--cue-style-radio-dot-ink,var(--cue-accent))]";
+//#endregion
+export { RADIO_CHECKED_GROUND, RADIO_DOT };

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

@@ -0,0 +1,17 @@
+//#region src/system/_style-row-disabled.ts
+/**
+* A disabled row's fade in a menu, a command palette and a listbox (round 6,
+* spec §11, lane R6.P: `style-row-disabled-opacity`), falling back to the 0.4 it
+* drew. Its own name rather than `style-disabled-opacity`: a set that lifts the
+* controls' fade to 1 and dims them by ink (Tender) would otherwise leave a
+* disabled row undimmed. coss.com/ui fades its disabled menu row to 0.64
+* (P163.disabled).
+*
+* **Optional** (spec §3.0). Its own module for docgen's reason: one token per
+* file, so only the components that read it are credited with it.
+*
+* @internal Not part of the public API.
+*/
+const ROW_DISABLED_OPACITY = "data-[disabled]:opacity-[var(--cue-style-row-disabled-opacity,0.4)]";
+//#endregion
+export { ROW_DISABLED_OPACITY };

package/dist/system/_style-row.js

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

package/dist/system/_style-scrollbar.js

@@ -0,0 +1,19 @@
+//#region src/system/_style-scrollbar.ts
+/**
+* A scroll area's bar and thumb (round 6, spec §11, lane R6.P: `style-scrollbar-size`,
+* `style-scrollbar-thumb`), falling back to the `space-3` bar and the
+* `border-strong` thumb it drew. coss.com/ui's bar is 6px (P172, P172.thumb).
+*
+* **Optional** (spec §3.0): each name is declared by `porcelain` alone and each
+* reader falls back to what the component drew. Its own module for docgen's
+* reason: one component's tokens per file.
+*
+* @internal Not part of the public API.
+*/
+const SCROLLBAR_SIZE_V = "data-[orientation=vertical]:w-[var(--cue-style-scrollbar-size,var(--cue-space-3))]";
+/** @see SCROLLBAR_SIZE_V */
+const SCROLLBAR_SIZE_H = "data-[orientation=horizontal]:h-[var(--cue-style-scrollbar-size,var(--cue-space-3))]";
+/** @see SCROLLBAR_SIZE_V */
+const SCROLLBAR_THUMB = "bg-[color:var(--cue-style-scrollbar-thumb,var(--cue-border-strong))]";
+//#endregion
+export { SCROLLBAR_SIZE_H, SCROLLBAR_SIZE_V, SCROLLBAR_THUMB };

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

@@ -0,0 +1,15 @@
+//#region src/system/_style-segment-pad.ts
+/**
+* A tab's and a segment's inline padding at the md step (round 6, spec §11, lane
+* R6.P: `style-segment-pad`), falling back to the `space-4` both drew. coss.com/ui
+* pads both 9px (P182.pad, P173.item-pad).
+*
+* **Optional** (spec §3.0): each name is declared by `porcelain` alone and each
+* reader falls back to what the component drew. Its own module for docgen's
+* reason: one component's tokens per file.
+*
+* @internal Not part of the public API.
+*/
+const SEGMENT_PAD = "px-[var(--cue-style-segment-pad,var(--cue-space-4))]";
+//#endregion
+export { SEGMENT_PAD };

package/dist/system/_style-skeleton.js

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

package/dist/system/_style-slider.js

@@ -0,0 +1,26 @@
+//#region src/system/_style-slider.ts
+/**
+* A slider's rail and thumb (round 6, spec §11, lane R6.P): the rail's height and
+* ink (`style-slider-track-height`, `style-slider-track-ink`), falling back to
+* the `h-0.5` and `border` it drew; the thumb's size, fill, rim width and rim
+* ink (`style-slider-thumb-size`, `-fill`, `-rim`, `-edge`), falling back to
+* its 8px `accent` dot with no rim. coss.com/ui draws a 4px rail in its input
+* ink and a 16px (20px on a phone) white thumb in a 1px rim (P178).
+*
+* **Optional** (spec §3.0): each name is declared by `porcelain` alone and each
+* reader falls back to what the component drew. Its own module for docgen's
+* reason: one component's tokens per file.
+*
+* @internal Not part of the public API.
+*/
+const SLIDER_TRACK_HEIGHT = "h-[var(--cue-style-slider-track-height,0.125rem)]";
+/** @see SLIDER_TRACK_HEIGHT */
+const SLIDER_TRACK_INK = "bg-[color:var(--cue-style-slider-track-ink,var(--cue-border))]";
+/** @see SLIDER_TRACK_HEIGHT */
+const SLIDER_THUMB_SIZE = "size-[var(--cue-style-slider-thumb-size,0.5rem)]";
+/** @see SLIDER_TRACK_HEIGHT */
+const SLIDER_THUMB_FILL = "bg-[color:var(--cue-style-slider-thumb-fill,var(--cue-accent))]";
+/** @see SLIDER_TRACK_HEIGHT — a width, so a set that names none draws no rim at all. */
+const SLIDER_THUMB_RIM = "border-solid border-[length:var(--cue-style-slider-thumb-rim,0px)] border-[color:var(--cue-style-slider-thumb-edge,transparent)]";
+//#endregion
+export { SLIDER_THUMB_FILL, SLIDER_THUMB_RIM, SLIDER_THUMB_SIZE, SLIDER_TRACK_HEIGHT, SLIDER_TRACK_INK };

package/dist/system/_style-stat.js

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

package/dist/system/_style-stepper.js

@@ -0,0 +1,16 @@
+//#region src/system/_style-stepper.ts
+/**
+* A number field's stepper width at the md step (round 6, spec §11, lane R6.P:
+* `style-stepper-width`), falling back to the square `control-md` box it drew.
+* coss.com/ui's steppers are 38px wide (40px on a phone) beside a 32px field
+* (P165.stepper).
+*
+* **Optional** (spec §3.0): each name is declared by `porcelain` alone and each
+* reader falls back to what the component drew. Its own module for docgen's
+* reason: one component's tokens per file.
+*
+* @internal Not part of the public API.
+*/
+const STEPPER_WIDTH = "w-[var(--cue-style-stepper-width,var(--cue-control-md))]";
+//#endregion
+export { STEPPER_WIDTH };

package/dist/system/_style-switch.js

@@ -0,0 +1,26 @@
+//#region src/system/_style-switch.ts
+/**
+* The switch's thumb (round 6, spec §11, lane R6.T: `style-switch-thumb`,
+* `style-switch-disabled-thumb`).
+*
+* stripe.com's thumb is white in every state (`--hds-color-input-icon-onSolid`),
+* and its disabled thumb is its quiet border ink (`--hds-color-input-icon-disabled`,
+* #d4dee9). Ours was `fg-muted` at rest and `accent-fg` when checked. The one
+* name serves both states, each falling back to what it drew (T146); the
+* disabled thumb reads its own, falling back to the resting state's value.
+*
+* @internal Not part of the public API.
+*/
+const SWITCH_THUMB = "bg-[color:var(--cue-style-switch-thumb,var(--cue-fg-muted))]";
+/** The checked thumb: the same name, falling back to `accent-fg`. */
+const SWITCH_THUMB_CHECKED = "data-[checked]:bg-[color:var(--cue-style-switch-thumb,var(--cue-accent-fg))]";
+/** The disabled thumb, unchecked and checked, each falling back through the thumb's own name to what it drew. */
+const SWITCH_THUMB_DISABLED = "data-[disabled]:bg-[color:var(--cue-style-switch-disabled-thumb,var(--cue-style-switch-thumb,var(--cue-fg-muted)))] data-[disabled]:data-[checked]:bg-[color:var(--cue-style-switch-disabled-thumb,var(--cue-style-switch-thumb,var(--cue-accent-fg)))]";
+/**
+* The switch track's rim (round 6, spec §11, lane R6.P: `style-switch-edge`),
+* falling back to the `border` it drew at rest and the `border-strong` on hover.
+* coss.com/ui's unchecked track draws no rim (P180.track-edge).
+*/
+const SWITCH_EDGE = "border-[color:var(--cue-style-switch-edge,var(--cue-border))] hover:border-[color:var(--cue-style-switch-edge,var(--cue-border-strong))]";
+//#endregion
+export { SWITCH_EDGE, SWITCH_THUMB, SWITCH_THUMB_CHECKED, SWITCH_THUMB_DISABLED };

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

@@ -0,0 +1,15 @@
+//#region src/system/_style-tab-hover.ts
+/**
+* An idle tab's hover ink (round 6, spec §11, lane R6.P: `style-tab-hover-ink`),
+* falling back to the `fg` it drew. coss.com/ui's idle tabs keep their muted ink
+* under the pointer (P182.hover).
+*
+* **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 TAB_HOVER_INK = "hover:text-[color:var(--cue-style-tab-hover-ink,var(--cue-fg))]";
+//#endregion
+export { TAB_HOVER_INK };

package/dist/system/_style-text-focus.js

@@ -0,0 +1,26 @@
+import { FOCUS_RING_PAINT } from "./_focus-ring.js";
+//#region src/system/_style-text-focus.ts
+/**
+* The focus ring of a text control — a link, and a disclosure's trigger —
+* with its offset read from the style set (round 6, spec §11, lane R6.T:
+* `style-text-focus-offset`).
+*
+* `_focus-ring.ts`'s fixed shapes are the ring every other site draws; these
+* two compose its width and colour ({@link FOCUS_RING_PAINT}) with an offset
+* a Look may move, as the button chassis does with `style-focus-offset`. Each
+* falls back to the fixed shape it replaces: the disclosure's two pixels in
+* (`FOCUS_RING_INSET_2`, because sections sit inside `overflow-hidden` panels)
+* and the link's two pixels clear (`FOCUS_RING_OFFSET_2`). stripe.com draws
+* both rings 3px clear (`--hds-focus-outline-offset` on `.hds-link` and on the
+* accordion's summary), so tender sets `3px` (T128, T144).
+*
+* A name of its own, not `style-focus-offset`: the source draws its buttons'
+* rings at another offset (`--hds-focus-outline-button-offset`, T50).
+*
+* @internal Not part of the public API.
+*/
+const COLLAPSE_FOCUS_RING = `${FOCUS_RING_PAINT} focus-visible:outline-offset-[var(--cue-style-text-focus-offset,-2px)]`;
+/** A link's focus ring: as {@link COLLAPSE_FOCUS_RING}, falling back to two pixels clear. */
+const LINK_FOCUS_RING = `${FOCUS_RING_PAINT} focus-visible:outline-offset-[var(--cue-style-text-focus-offset,2px)]`;
+//#endregion
+export { COLLAPSE_FOCUS_RING, LINK_FOCUS_RING };

package/dist/system/_style-toast.js

@@ -0,0 +1,22 @@
+//#region src/system/_style-toast.ts
+/**
+* A toast's padding and width (round 6, spec §11, lane R6.P: `style-toast-pad-y`,
+* `style-toast-pad-x`, `style-toast-width`), falling back to the `space-3` block
+* and `space-4` inline-start padding and the 20rem viewport it drew; the
+* inline-end padding keeps its room for the close button. coss.com/ui pads its
+* toast 12px by 14px and sets it 360px wide (P184.pad, P184.pad-inline,
+* P184.width).
+*
+* **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 TOAST_PAD_Y = "py-[var(--cue-style-toast-pad-y,var(--cue-space-3))]";
+/** @see TOAST_PAD_Y */
+const TOAST_PAD_X = "pl-[var(--cue-style-toast-pad-x,var(--cue-space-4))]";
+/** @see TOAST_PAD_Y */
+const TOAST_WIDTH = "w-[var(--cue-style-toast-width,20rem)]";
+//#endregion
+export { TOAST_PAD_X, TOAST_PAD_Y, TOAST_WIDTH };

package/dist/system/_style-toggle.js

@@ -0,0 +1,50 @@
+//#region src/system/_style-toggle.ts
+/**
+* `Toggle` — and so `ToggleGroup`'s items — at rest and pressed (round 6, spec
+* §11, lane R6.T: `style-toggle-edge`, `style-toggle-ink`,
+* `style-toggle-pressed-ground`, `style-toggle-pressed-edge`).
+*
+* stripe.com's select tiles (`.hds-select-tile`, one of N options drawn as
+* tiles) stand in its field edge at rest (`--hds-color-input-border-default`)
+* with its field text ink (`--hds-color-input-text-solid`), and a selected
+* tile fills with a 12% lilac and edges in its brand-400 (T155). Ours drew a
+* transparent edge in `fg-muted`, and `accent-soft` with no edge when
+* pressed. Each reader falls back to the class it replaced.
+*
+* @internal Not part of the public API.
+*/
+const TOGGLE_EDGE = "border-[color:var(--cue-style-toggle-edge,transparent)]";
+/** A toggle's resting ink. */
+const TOGGLE_INK = "text-[color:var(--cue-style-toggle-ink,var(--cue-fg-muted))]";
+/** A pressed toggle's ground. */
+const TOGGLE_PRESSED_GROUND = "data-[pressed]:bg-[color:var(--cue-style-toggle-pressed-ground,var(--cue-accent-soft))]";
+/** A pressed toggle's edge. */
+const TOGGLE_PRESSED_EDGE = "data-[pressed]:border-[color:var(--cue-style-toggle-pressed-edge,transparent)]";
+/**
+* A pressed toggle's ink (round 6, spec §11, lane R6.K: `style-toggle-pressed-ink`),
+* falling back to the `accent` it drew. replit.com's pressed filter pill is
+* white on an ink fill (K148).
+*/
+const TOGGLE_PRESSED_INK = "data-[pressed]:text-[color:var(--cue-style-toggle-pressed-ink,var(--cue-accent))]";
+/**
+* The hover state (lanes R6.T and R6.K: `style-toggle-hover-edge`, `-hover-ground`,
+* `-hover-ink`). replit.com's filter pills hover by darkening their edge alone
+* (#d8d5cf to #a8a49d), keeping a transparent ground and their resting ink,
+* where ours filled `surface-2` and inked `fg` (K148). Each falls back to what
+* the toggle drew under the pointer: its resting edge (through `style-toggle-edge`),
+* `surface-2` and `fg`.
+*/
+const TOGGLE_HOVER_EDGE = "hover:border-[color:var(--cue-style-toggle-hover-edge,var(--cue-style-toggle-edge,transparent))]";
+/** @see TOGGLE_HOVER_EDGE */
+const TOGGLE_HOVER_GROUND = "hover:bg-[color:var(--cue-style-toggle-hover-ground,var(--cue-surface-2))]";
+/** @see TOGGLE_HOVER_EDGE */
+const TOGGLE_HOVER_INK = "hover:text-[color:var(--cue-style-toggle-hover-ink,var(--cue-fg))]";
+/**
+* A disabled toggle's ink and edge, through the disabled names every control reads
+* (`style-disabled-ink`, `style-disabled-edge`), each falling back to the toggle's own resting value;
+* the fade reads `style-disabled-opacity` as the other controls' does. stripe.com's disabled tile
+* pales its ink and draws its disabled border (T155.disabled, T155.disabled-edge).
+*/
+const TOGGLE_DISABLED = "data-[disabled]:text-[color:var(--cue-style-disabled-ink,var(--cue-style-toggle-ink,var(--cue-fg-muted)))] data-[disabled]:border-[color:var(--cue-style-disabled-edge,var(--cue-style-toggle-edge,transparent))]";
+//#endregion
+export { TOGGLE_DISABLED, TOGGLE_EDGE, TOGGLE_HOVER_EDGE, TOGGLE_HOVER_GROUND, TOGGLE_HOVER_INK, TOGGLE_INK, TOGGLE_PRESSED_EDGE, TOGGLE_PRESSED_GROUND, TOGGLE_PRESSED_INK };

package/dist/system/_style-toolbar.js

@@ -0,0 +1,23 @@
+//#region src/system/_style-toolbar.ts
+/**
+* The toolbar as a framed bar (round 6, spec §11, lane R6.P): its rim on the sides
+* it did not draw (`style-toolbar-rim`, a width, falling back to `0px`, so the
+* bar keeps only its bottom rule) and the rim's ink (`style-toolbar-edge`,
+* falling back to `border`); its corner, padding, height and gap
+* (`style-toolbar-radius`, `-pad`, `-height`, `-gap`), falling back to the
+* square, inline-padded, `chrome-toolbar`-tall strip it drew; and a separator's
+* height (`style-toolbar-separator-height`), falling back to `60%`. coss.com/ui
+* draws its toolbar as a 14px-rounded bar in a 1px rim, 4px in, its groups 8px
+* apart and its separators 20px tall (P185).
+*
+* **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 TOOLBAR_FRAME = "border-t-[length:var(--cue-style-toolbar-rim,0px)] border-x-[length:var(--cue-style-toolbar-rim,0px)] border-[color:var(--cue-style-toolbar-edge,var(--cue-border))] rounded-[var(--cue-style-toolbar-radius,0px)] p-[var(--cue-style-toolbar-pad,0_var(--cue-pad-row-x))] h-[var(--cue-style-toolbar-height,var(--cue-chrome-toolbar))] gap-[var(--cue-style-toolbar-gap,var(--cue-space-2))]";
+/** @see TOOLBAR_FRAME */
+const TOOLBAR_SEPARATOR_HEIGHT = "data-[orientation=vertical]:h-[var(--cue-style-toolbar-separator-height,60%)]";
+//#endregion
+export { TOOLBAR_FRAME, TOOLBAR_SEPARATOR_HEIGHT };

package/dist/system/_style-tooltip.js

@@ -13,5 +13,34 @@
 const TOOLTIP_SIZE = "text-[length:var(--cue-style-help-size,var(--cue-text-label))]";
 /** @see TOOLTIP_SIZE */
 const TOOLTIP_PAD = "p-[var(--cue-style-tooltip-pad,var(--cue-space-2)_var(--cue-space-3))]";
+/**
+* The tooltip's tracking (round 6, spec §11, lane R6.T: `style-tooltip-tracking`),
+* falling back to the `inherit` it drew (no tracking class of its own).
+* stripe.com's tooltip sets 0.2px on its 15px text, 0.0133em (T131).
+*/
+const TOOLTIP_TRACKING = "tracking-[var(--cue-style-tooltip-tracking,inherit)]";
+/**
+* The tooltip's corner (round 6, spec §11, lane R6.T: `style-tooltip-radius`), falling back to the
+* overlay corner it drew. stripe.com's overlays take three corners — its dialog 16px, its select
+* popover 4px (which `radius-overlay` follows), its tooltip 8px (T131.radius) — and the dialog already
+* has `style-dialog-radius`. Scaled by `radius-scale` as the dialog's is: `rounded-overlay` is
+* `calc(var(--cue-radius-overlay) * var(--cue-radius-scale))`, and a reader without the scale drew
+* 6px where the tooltip drew 4.5px at ultra-compact (the closing pass's adversarial review).
+*/
+const TOOLTIP_RADIUS = "rounded-[calc(var(--cue-style-tooltip-radius,var(--cue-radius-overlay))*var(--cue-radius-scale))]";
+/**
+* The tooltip's face (round 6, spec §11, lane R6.Z: `style-tooltip-face`),
+* falling back through the control face to the mono it drew. greptile.com's
+* seat tooltip is Space Mono beside its DM Sans buttons (Z115).
+*/
+const TOOLTIP_FACE = "font-[family-name:var(--cue-style-tooltip-face,var(--cue-style-control-face,var(--cue-font-mono)))]";
+/** The tooltip's ink (`style-tooltip-ink`), falling back to the `fg` it drew; greptile.com's is slate (Z115). */
+const TOOLTIP_INK = "text-[color:var(--cue-style-tooltip-ink,var(--cue-fg))]";
+/**
+* The tooltip's leading (`style-tooltip-leading`), falling back through the
+* body leading to the `leading-ui` it drew (`BODY_LEADING`). greptile.com's
+* tooltip sets a 20px line on 10px type (Z115).
+*/
+const TOOLTIP_LEADING = "leading-[var(--cue-style-tooltip-leading,var(--cue-style-body-leading,var(--cue-leading-ui)))]";
 //#endregion
-export { TOOLTIP_PAD, TOOLTIP_SIZE };
+export { TOOLTIP_FACE, TOOLTIP_INK, TOOLTIP_LEADING, TOOLTIP_PAD, TOOLTIP_RADIUS, TOOLTIP_SIZE, TOOLTIP_TRACKING };

package/manifest/components/accordion.json

@@ -39,7 +39,7 @@
     {
       "name": "Item",
       "usage": "Accordion.Item",
-      "description": "One section.\n\nSeparation is a hairline the section draws above itself, dropped on the first\none — so a stack shows rules *between* sections and none against the rim of\nwhatever contains them. Same rule as `Row`, for the same reason.",
+      "description": "One section.\n\nSeparation is a hairline the section draws above itself, dropped on the first\none — so a stack shows rules *between* sections and none against the rim of\nwhatever contains them. Same rule as `Row`, for the same reason. Its line\nstyle is the style set's (`style-accordion-rule-style`), solid by default,\nand so is its ink (`style-accordion-rule-ink`, round 6 lane R6.Z), `border`\nby default.",
       "props": [
         {
           "name": "className",
@@ -144,11 +144,32 @@
     "--cue-space-1",
     "--cue-space-3",
     "--cue-space-4",
+    "--cue-style-accordion-rule-ink",
+    "--cue-style-accordion-rule-style",
+    "--cue-style-body-face",
+    "--cue-style-collapse-body-ink",
+    "--cue-style-collapse-body-leading",
+    "--cue-style-collapse-body-pad",
+    "--cue-style-collapse-body-size",
+    "--cue-style-collapse-body-tracking",
+    "--cue-style-collapse-caret-ink",
+    "--cue-style-collapse-caret-opacity",
+    "--cue-style-collapse-caret-size",
+    "--cue-style-collapse-gap",
     "--cue-style-collapse-height",
+    "--cue-style-collapse-hover-ground",
+    "--cue-style-collapse-hover-ink",
+    "--cue-style-collapse-leading",
+    "--cue-style-collapse-open-ink",
+    "--cue-style-collapse-pad",
+    "--cue-style-collapse-radius",
+    "--cue-style-collapse-size",
+    "--cue-style-collapse-weight",
     "--cue-style-control-face",
     "--cue-style-focus-width",
     "--cue-style-label-weight",
     "--cue-style-quiet-ink",
+    "--cue-style-text-focus-offset",
     "--cue-text-ui"
   ],
   "summary": "A stack of sections, one or several open at a time.",

package/manifest/components/alert-dialog.json

@@ -200,7 +200,11 @@
     "--cue-style-body-size",
     "--cue-style-body-weight",
     "--cue-style-control-face",
+    "--cue-style-dialog-radius",
     "--cue-style-display-variation",
+    "--cue-style-group-label-ink",
+    "--cue-style-group-label-pad",
+    "--cue-style-group-label-size",
     "--cue-style-heading-ink",
     "--cue-style-label-case",
     "--cue-style-label-face",
@@ -210,10 +214,13 @@
     "--cue-style-label-weight",
     "--cue-style-menu-highlight",
     "--cue-style-menu-item-radius",
+    "--cue-style-menu-min-width",
+    "--cue-style-menu-separator-inset",
     "--cue-style-overlay-ground",
     "--cue-style-overlay-title-leading",
     "--cue-style-overlay-title-size",
     "--cue-style-quiet-ink",
+    "--cue-style-row-disabled-opacity",
     "--cue-style-title-face",
     "--cue-style-title-weight",
     "--cue-surface-2",