@cueplusplus/ui 0.17.0 → 0.18.1

package/dist/primitives/button.js

@@ -3,10 +3,13 @@ import { cn } from "../lib/cn.js";
 import { FOCUS_RING_PAINT } from "../system/_focus-ring.js";
 import { CONTROL_FACE } from "../system/_style-control-face.js";
 import { REST_SHADE_CLASS } from "../system/_paint-rest-shade.js";
+import { DISABLED_OPACITY, DISABLED_TONES } from "../system/_style-disabled.js";
 import { cva } from "../lib/cva.js";
 import { CONTROL_STEP_SIZE_LG } from "../system/_style-control-step.js";
 import { GLOW_CLASSES, GLOW_DANGER_CLASSES } from "../system/_paint-glow.js";
 import { CONTROL_CASE, CONTROL_PAD_LG, CONTROL_PAD_MD, CONTROL_PAD_SM, CONTROL_TRACKING, CONTROL_TRIM, CONTROL_WEIGHT, GHOST_INK, OUTLINE_EDGE, OUTLINE_INK, SECONDARY_EDGE, SECONDARY_GROUND, SECONDARY_INK } from "../system/_style-control.js";
+import { CONTROL_GAP } from "../system/_style-control-gap.js";
+import { OUTLINE_HOVER_EDGE, OUTLINE_HOVER_GROUND } from "../system/_style-outline-hover.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useRender } from "@base-ui/react/use-render";
@@ -35,7 +38,7 @@ import { useRender } from "@base-ui/react/use-render";
 *
 * @internal Not part of the public API; imported by `icon-button.tsx`.
 */
-const buttonChassis = `inline-flex select-none items-center justify-center gap-[0.4em] whitespace-nowrap rounded-control ${CONTROL_FACE} ${CONTROL_WEIGHT} ${CONTROL_TRACKING} ${CONTROL_TRIM} ${CONTROL_CASE} transition-colors duration-150 outline-none ${FOCUS_RING_PAINT} focus-visible:outline-offset-[var(--cue-style-focus-offset,1px)] disabled:pointer-events-none disabled:opacity-40`;
+const buttonChassis = `inline-flex select-none items-center justify-center ${CONTROL_GAP} whitespace-nowrap rounded-control ${CONTROL_FACE} ${CONTROL_WEIGHT} ${CONTROL_TRACKING} ${CONTROL_TRIM} ${CONTROL_CASE} transition-colors duration-150 outline-none ${FOCUS_RING_PAINT} focus-visible:outline-offset-[var(--cue-style-focus-offset,1px)] disabled:pointer-events-none ${DISABLED_OPACITY}`;
 /**
 * The shared colour vocabulary. `accent` is theme-controlled, so `primary`
 * reads as white-on-black in `cue` and cyan-on-near-black in `terminal` with no
@@ -54,12 +57,12 @@ const buttonChassis = `inline-flex select-none items-center justify-center gap-[
 * @internal Not part of the public API; imported by `icon-button.tsx`.
 */
 const buttonTones = {
-	primary: `bg-accent-fill text-accent-fill-fg hover:bg-accent-fill-hover border border-transparent ${GLOW_CLASSES}`,
-	secondary: `border ${SECONDARY_EDGE} ${SECONDARY_INK} hover:text-[color:var(--cue-style-secondary-hover-ink,var(--cue-fg))] hover:border-[color:var(--cue-style-secondary-hover-edge,var(--cue-border-strong))] ${SECONDARY_GROUND}`,
-	ghost: `${GHOST_INK} hover:text-fg hover:bg-surface-2 border border-transparent`,
-	outline: `border ${OUTLINE_EDGE} ${OUTLINE_INK} hover:border-accent hover:text-accent bg-transparent ${REST_SHADE_CLASS}`,
-	danger: `bg-danger text-danger-fg hover:opacity-90 border border-transparent ${GLOW_DANGER_CLASSES}`,
-	"danger-outline": "border text-danger bg-transparent hover:bg-danger/10 border-danger/40"
+	primary: `bg-accent-fill text-accent-fill-fg hover:bg-accent-fill-hover border border-transparent ${GLOW_CLASSES} ${DISABLED_TONES.primary}`,
+	secondary: `border ${SECONDARY_EDGE} ${SECONDARY_INK} hover:text-[color:var(--cue-style-secondary-hover-ink,var(--cue-fg))] hover:border-[color:var(--cue-style-secondary-hover-edge,var(--cue-border-strong))] ${SECONDARY_GROUND} hover:bg-[color:var(--cue-style-secondary-hover-ground,var(--cue-style-secondary-ground,var(--cue-surface-2)))] ${DISABLED_TONES.secondary}`,
+	ghost: `${GHOST_INK} hover:text-fg hover:bg-surface-2 border border-transparent ${DISABLED_TONES.ghost}`,
+	outline: `border ${OUTLINE_EDGE} ${OUTLINE_INK} ${OUTLINE_HOVER_EDGE} hover:text-accent bg-transparent ${OUTLINE_HOVER_GROUND} ${REST_SHADE_CLASS} ${DISABLED_TONES.outline}`,
+	danger: `bg-danger text-danger-fg hover:opacity-90 border border-transparent ${GLOW_DANGER_CLASSES} ${DISABLED_TONES.danger}`,
+	"danger-outline": `border text-danger bg-transparent hover:bg-danger/10 border-danger/40 ${DISABLED_TONES["danger-outline"]}`
 };
 /**
 * The `Button` class recipe, exported so other surfaces (a link that must look

package/dist/primitives/chip.d.ts

@@ -1,44 +1,8 @@
 import { ClassProp, VariantProps } from "../lib/cva.js";
 import * as React from "react";
 //#region src/primitives/chip.d.ts
-/**
- * The tinted-chip recipe: `bg-<tone>/10 border-<tone>/35 text-<tone>`, and the
- * two quieter readings of it — `outline`, which drops the fill, and `tag`,
- * which drops the fill and the voice with it.
- *
- * Every property that varies is emitted from exactly one place: one rim, one
- * ink, one fill, one gutter, one type size, always. Emitting `bg-<tone>/10`
- * from the tone map and then cancelling it with `bg-transparent` would leave
- * two competing utilities in the class string, and `chipVariants` is exported —
- * a caller who uses it without `cn` gets a raw string where the winner is
- * decided by stylesheet order rather than by which utility was written last.
- * `h-chip h-4` proves the point at the other end: `tailwind-merge` cannot even
- * see that as a conflict, because `chip` is a token name and not a scale step.
- * So nothing here cancels anything. What varies moves into `variants` or
- * `compoundVariants` until only one of it is ever emitted.
- *
- * That is why `neutral` carries no rim of its own. The other six tones rim
- * themselves at `/35` in all three variants, but the neutral line has two
- * weights in this system: `--cue-border` is a box edge, and a chip is a box;
- * `--cue-hair-strong` is the rule between things, and a tag is a mark on the
- * page rather than a container. The rim is therefore a compound of tone and
- * variant, exactly as the fill is.
- *
- * **The recipe reads the style set** (spec 2026-09-26-looks-fidelity §3.6,
- * `system/_style-chip.ts`): the six tones' fill and rim are
- * `color-mix(in oklab, var(--cue-<tone>) var(--cue-style-chip-fill, 10%), transparent)`
- * and the same with `--cue-style-chip-edge` at `35%` — exactly `bg-<tone>/10`
- * and `border-<tone>/35` under no set, and a set's own shares inside one. The
- * case, tracking, radius, size and weight read `--cue-style-chip-case`,
- * `-tracking`, `-radius`, `-size` and `--cue-style-label-weight` the same way.
- *
- * @example
- * <span className={chipVariants({ tone: "danger", variant: "outline" })}>fault</span>
- * @example
- * <span className={chipVariants({ variant: "tag" })}>mcp</span>
- */
 declare const chipVariants: (props?: ({
-  tone?: "danger" | "info" | "warn" | "accent" | "ok" | "busy" | "neutral" | null | undefined;
+  tone?: "info" | "warn" | "danger" | "accent" | "ok" | "busy" | "neutral" | null | undefined;
   variant?: "outline" | "tinted" | "tag" | null | undefined;
   interactive?: boolean | null | undefined;
 } & ClassProp) | undefined) => string;

package/dist/primitives/chip.js

@@ -2,52 +2,15 @@
 import { cn } from "../lib/cn.js";
 import { FOCUS_RING } from "../system/_focus-ring.js";
 import { cva } from "../lib/cva.js";
-import { CHIP_CASE, CHIP_EDGE, CHIP_FILL, CHIP_HEIGHT, CHIP_PAD, CHIP_RADIUS, CHIP_SIZE, CHIP_SIZE_MICRO, CHIP_TRACKING, CHIP_TRACKING_TAG } from "../system/_style-chip.js";
+import { CHIP_CASE, CHIP_EDGE, CHIP_FILL, CHIP_GAP, CHIP_HEIGHT, CHIP_INK_NEUTRAL, CHIP_LEADING, CHIP_LEADING_INHERIT, CHIP_PAD, CHIP_RADIUS, CHIP_SIZE, CHIP_SIZE_MICRO, CHIP_TRACKING, CHIP_TRACKING_TAG, TAG_EDGE, TAG_PAD } from "../system/_style-chip.js";
 import { LABEL_FACE } from "../system/_style-label-face.js";
 import { LABEL_WEIGHT } from "../system/_style-label-weight.js";
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
-//#region src/primitives/chip.tsx
-/**
-* The tinted-chip recipe: `bg-<tone>/10 border-<tone>/35 text-<tone>`, and the
-* two quieter readings of it — `outline`, which drops the fill, and `tag`,
-* which drops the fill and the voice with it.
-*
-* Every property that varies is emitted from exactly one place: one rim, one
-* ink, one fill, one gutter, one type size, always. Emitting `bg-<tone>/10`
-* from the tone map and then cancelling it with `bg-transparent` would leave
-* two competing utilities in the class string, and `chipVariants` is exported —
-* a caller who uses it without `cn` gets a raw string where the winner is
-* decided by stylesheet order rather than by which utility was written last.
-* `h-chip h-4` proves the point at the other end: `tailwind-merge` cannot even
-* see that as a conflict, because `chip` is a token name and not a scale step.
-* So nothing here cancels anything. What varies moves into `variants` or
-* `compoundVariants` until only one of it is ever emitted.
-*
-* That is why `neutral` carries no rim of its own. The other six tones rim
-* themselves at `/35` in all three variants, but the neutral line has two
-* weights in this system: `--cue-border` is a box edge, and a chip is a box;
-* `--cue-hair-strong` is the rule between things, and a tag is a mark on the
-* page rather than a container. The rim is therefore a compound of tone and
-* variant, exactly as the fill is.
-*
-* **The recipe reads the style set** (spec 2026-09-26-looks-fidelity §3.6,
-* `system/_style-chip.ts`): the six tones' fill and rim are
-* `color-mix(in oklab, var(--cue-<tone>) var(--cue-style-chip-fill, 10%), transparent)`
-* and the same with `--cue-style-chip-edge` at `35%` — exactly `bg-<tone>/10`
-* and `border-<tone>/35` under no set, and a set's own shares inside one. The
-* case, tracking, radius, size and weight read `--cue-style-chip-case`,
-* `-tracking`, `-radius`, `-size` and `--cue-style-label-weight` the same way.
-*
-* @example
-* <span className={chipVariants({ tone: "danger", variant: "outline" })}>fault</span>
-* @example
-* <span className={chipVariants({ variant: "tag" })}>mcp</span>
-*/
-const chipVariants = cva(`inline-flex ${CHIP_HEIGHT} select-none items-center justify-center gap-(--cue-space-2) whitespace-nowrap ${CHIP_RADIUS} border ${LABEL_FACE} ${LABEL_WEIGHT} leading-none ${CHIP_CASE} outline-none ${FOCUS_RING}`, {
+const chipVariants = cva(`inline-flex ${CHIP_HEIGHT} select-none items-center justify-center ${CHIP_GAP} whitespace-nowrap ${CHIP_RADIUS} border ${LABEL_FACE} ${LABEL_WEIGHT} ${CHIP_CASE} outline-none ${FOCUS_RING}`, {
 	variants: {
 		tone: {
-			neutral: "text-fg-muted",
+			neutral: CHIP_INK_NEUTRAL,
 			accent: `${CHIP_EDGE.accent} text-accent`,
 			ok: `${CHIP_EDGE.ok} text-ok`,
 			busy: `${CHIP_EDGE.busy} text-busy`,
@@ -56,9 +19,9 @@ const chipVariants = cva(`inline-flex ${CHIP_HEIGHT} select-none items-center ju
 			info: `${CHIP_EDGE.info} text-info`
 		},
 		variant: {
-			tinted: `${CHIP_PAD} ${CHIP_SIZE} ${CHIP_TRACKING}`,
-			outline: `bg-transparent ${CHIP_PAD} ${CHIP_SIZE} ${CHIP_TRACKING}`,
-			tag: `bg-transparent px-(--cue-space-2) ${CHIP_SIZE_MICRO} ${CHIP_TRACKING_TAG}`
+			tinted: `${CHIP_PAD} ${CHIP_SIZE} ${CHIP_LEADING} ${CHIP_TRACKING}`,
+			outline: `bg-transparent ${CHIP_PAD} ${CHIP_SIZE} ${CHIP_LEADING} ${CHIP_TRACKING}`,
+			tag: `bg-transparent ${TAG_PAD} ${CHIP_SIZE_MICRO} ${CHIP_LEADING} ${CHIP_TRACKING_TAG}`
 		},
 		interactive: {
 			true: "cursor-pointer disabled:pointer-events-none disabled:opacity-40",
@@ -68,13 +31,18 @@ const chipVariants = cva(`inline-flex ${CHIP_HEIGHT} select-none items-center ju
 	compoundVariants: [
 		{
 			tone: "neutral",
-			variant: ["tinted", "outline"],
+			variant: "tinted",
 			class: "border-border"
 		},
+		{
+			tone: "neutral",
+			variant: "outline",
+			class: "border-[color:var(--cue-style-outline-edge,var(--cue-border))]"
+		},
 		{
 			tone: "neutral",
 			variant: "tag",
-			class: "border-(--cue-hair-strong)"
+			class: TAG_EDGE
 		},
 		{
 			tone: "neutral",
@@ -240,7 +208,7 @@ const Chip = React.forwardRef(function Chip({ className, tone, variant, interact
 		tone,
 		variant,
 		interactive
-	}), className);
+	}), CHIP_LEADING_INHERIT, className);
 	if (interactive) return /* @__PURE__ */ jsx("button", {
 		ref,
 		type: "button",

package/dist/primitives/icon-button.d.ts

@@ -8,7 +8,7 @@ import { useRender } from "@base-ui/react/use-render";
  * every density.
  */
 declare const iconButtonVariants: (props?: ({
-  variant?: "ghost" | "primary" | "secondary" | "outline" | "danger" | "danger-outline" | null | undefined;
+  variant?: "danger-outline" | "ghost" | "primary" | "secondary" | "outline" | "danger" | null | undefined;
   size?: "sm" | "md" | "lg" | null | undefined;
 } & ClassProp) | undefined) => string;
 interface IconButtonProps extends Omit<React.ComponentPropsWithoutRef<"button">, "children">, VariantProps<typeof iconButtonVariants> {

package/dist/primitives/kbd.js

@@ -1,7 +1,7 @@
 import { cn } from "../lib/cn.js";
 import { CONTROL_FACE } from "../system/_style-control-face.js";
 import { LABEL_WEIGHT } from "../system/_style-label-weight.js";
-import { KBD_BOX, KBD_EDGE, KBD_SIZE } from "../system/_style-kbd.js";
+import { KBD_BOX, KBD_EDGE, KBD_FILL, KBD_LEADING, KBD_SIZE } from "../system/_style-kbd.js";
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/primitives/kbd.tsx
@@ -24,7 +24,7 @@ import { jsx } from "react/jsx-runtime";
 const Kbd = React.forwardRef(function Kbd({ className, children, ...elementProps }, ref) {
 	return /* @__PURE__ */ jsx("kbd", {
 		ref,
-		className: cn(`inline-flex ${KBD_BOX} select-none items-center justify-center border bg-surface-2 text-fg-muted`, KBD_EDGE, CONTROL_FACE, KBD_SIZE, "leading-none", LABEL_WEIGHT, className),
+		className: cn(`inline-flex ${KBD_BOX} select-none items-center justify-center border ${KBD_FILL} text-fg-muted`, KBD_EDGE, CONTROL_FACE, KBD_SIZE, KBD_LEADING, LABEL_WEIGHT, className),
 		...elementProps,
 		children
 	});

package/dist/primitives/skeleton.js

@@ -1,4 +1,5 @@
 import { cn } from "../lib/cn.js";
+import { SKELETON_RADIUS } from "../system/_style-skeleton.js";
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/primitives/skeleton.tsx
@@ -19,7 +20,7 @@ const Skeleton = React.forwardRef(function Skeleton({ className, ...elementProps
 	return /* @__PURE__ */ jsx("div", {
 		ref,
 		"aria-hidden": "true",
-		className: cn("animate-pulse rounded-control bg-surface-2 motion-reduce:animate-none", className),
+		className: cn(`animate-pulse ${SKELETON_RADIUS} bg-surface-2 motion-reduce:animate-none`, className),
 		...elementProps
 	});
 });

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

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

package/dist/system/_style-avatar.js

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

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

@@ -15,7 +15,5 @@
 * @internal Not part of the public API.
 */
 const BODY_LEADING = "leading-[var(--cue-style-body-leading,var(--cue-leading-ui))]";
-/** @see BODY_LEADING — for a site that set none and inherited its box's. */
-const BODY_LEADING_INHERIT = "leading-[var(--cue-style-body-leading,inherit)]";
 //#endregion
-export { BODY_LEADING, BODY_LEADING_INHERIT };
+export { BODY_LEADING };

package/dist/system/_style-body.js

@@ -20,8 +20,13 @@ import { BODY_WEIGHT } from "./_style-body-weight.js";
 * shared `[data-style]` reset by every shipped set, so under each the reader
 * computes what `font-mono` and no weight computed at the element.
 *
+* A site that sets its own weight (a toast's medium title, round 6, P184) reads
+* `BODY_FACE` alone, so a set's body weight does not thin it.
+*
 * @internal Not part of the public API.
 */
-const BODY_VOICE = `font-[family-name:var(--cue-style-body-face,var(--cue-font-mono))] ${BODY_WEIGHT}`;
+const BODY_FACE = "font-[family-name:var(--cue-style-body-face,var(--cue-font-mono))]";
+/** @see BODY_FACE — the face with the weight, for copy whose weight is inherited. */
+const BODY_VOICE = `${BODY_FACE} ${BODY_WEIGHT}`;
 //#endregion
-export { BODY_VOICE };
+export { BODY_FACE, BODY_VOICE };

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

@@ -0,0 +1,17 @@
+//#region src/system/_style-caption-ink.ts
+/**
+* A caption's ink (round 6, spec §11, lane R6.P: `style-caption-ink`): an avatar's
+* initials and a progress bar's label and value, falling back to the
+* `fg-muted` or `fg-subtle` each drew. coss.com/ui inks all three `fg`
+* (P143.fallback-ink, P170.label-ink, P170.value).
+*
+* **Optional** (spec §3.0). Its own module for docgen's reason: one token per
+* file, so only the components that read it are credited with it.
+*
+* @internal Not part of the public API.
+*/
+const CAPTION_INK_MUTED = "text-[color:var(--cue-style-caption-ink,var(--cue-fg-muted))]";
+/** @see CAPTION_INK_MUTED */
+const CAPTION_INK_SUBTLE = "text-[color:var(--cue-style-caption-ink,var(--cue-fg-subtle))]";
+//#endregion
+export { CAPTION_INK_MUTED, CAPTION_INK_SUBTLE };

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

@@ -0,0 +1,19 @@
+//#region src/system/_style-caption-size.ts
+/**
+* A caption's type size (round 6, spec §11, lane R6.P: `style-caption-size`): an
+* avatar's initials, a progress bar's and a slider's readout, and a calendar's
+* month caption and weekday heads — the small type each set on the `text-label`
+* or `text-micro` rung it falls back to. coss.com/ui sets the readouts and the
+* month caption 14px (P170.label, P170.value-size, P178.value, P189.caption);
+* its initials and weekday heads are 12px, which spec §6.2's G10 line quotes.
+*
+* **Optional** (spec §3.0). Its own module for docgen's reason: one token per
+* file, so only the components that read it are credited with it.
+*
+* @internal Not part of the public API.
+*/
+const CAPTION_SIZE_LABEL = "text-[length:var(--cue-style-caption-size,var(--cue-text-label))]";
+/** @see CAPTION_SIZE_LABEL */
+const CAPTION_SIZE_MICRO = "text-[length:var(--cue-style-caption-size,var(--cue-text-micro))]";
+//#endregion
+export { CAPTION_SIZE_LABEL, CAPTION_SIZE_MICRO };

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

@@ -0,0 +1,18 @@
+//#region src/system/_style-caption-weight.ts
+/**
+* A caption's weight (round 6, spec §11, lane R6.P: `style-caption-weight`): an
+* avatar's initials, a progress bar's label, and a calendar's month caption and
+* weekday heads, falling back to the inherited or `400` weight each drew.
+* coss.com/ui sets all four at 500 (P143.fallback-weight, P170.label-weight,
+* P189.caption-weight, P189.weekday-weight).
+*
+* **Optional** (spec §3.0). Its own module for docgen's reason: one token per
+* file, so only the components that read it are credited with it.
+*
+* @internal Not part of the public API.
+*/
+const CAPTION_WEIGHT = "font-[number:var(--cue-style-caption-weight,inherit)]";
+/** @see CAPTION_WEIGHT */
+const CAPTION_WEIGHT_NORMAL = "font-[number:var(--cue-style-caption-weight,400)]";
+//#endregion
+export { CAPTION_WEIGHT, CAPTION_WEIGHT_NORMAL };

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

@@ -0,0 +1,14 @@
+//#region src/system/_style-card-gap.ts
+/**
+* The gap between a card's title and its description (round 6, spec §11, lane
+* R6.P: `style-card-gap`), falling back to the `space-1` the header drew.
+* coss.com/ui's card header sets them 6px apart (P146.gap).
+*
+* **Optional** (spec §3.0). Its own module for docgen's reason: one token per
+* file, so only the components that read it are credited with it.
+*
+* @internal Not part of the public API.
+*/
+const CARD_GAP = "gap-[var(--cue-style-card-gap,var(--cue-space-1))]";
+//#endregion
+export { CARD_GAP };

package/dist/system/_style-cell.js

@@ -0,0 +1,18 @@
+//#region src/system/_style-cell.ts
+/**
+* A table cell's inline padding and leading (round 6, spec §11, lane R6.P:
+* `style-cell-pad`, `style-cell-leading`), falling back to the row's
+* `pad-row-x` and the inherited leading. coss.com/ui pads its cells and heads
+* 10px and sets them on a line of 1 (P181, P181.head-pad, P181.cell-leading).
+*
+* **Optional** (spec §3.0): each name is declared by `porcelain` alone and each
+* reader falls back to what the component drew. Its own module for docgen's
+* reason: one component's tokens per file.
+*
+* @internal Not part of the public API.
+*/
+const CELL_PAD = "px-[var(--cue-style-cell-pad,var(--cue-pad-row-x))]";
+/** @see CELL_PAD */
+const CELL_LEADING = "leading-[var(--cue-style-cell-leading,inherit)]";
+//#endregion
+export { CELL_LEADING, CELL_PAD };

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

@@ -0,0 +1,14 @@
+//#region src/system/_style-check-glyph.ts
+/**
+* A checkbox's tick and dash (round 6, spec §11, lane R6.P:
+* `style-check-glyph-size`), falling back to the `size-full` of the box they
+* drew. coss.com/ui's tick is 12px inside its 16px box (P147.glyph-size).
+*
+* **Optional** (spec §3.0). Its own module for docgen's reason: one token per
+* file, so only the components that read it are credited with it.
+*
+* @internal Not part of the public API.
+*/
+const CHECK_GLYPH_SIZE = "size-[var(--cue-style-check-glyph-size,100%)]";
+//#endregion
+export { CHECK_GLYPH_SIZE };

package/dist/system/_style-check.js

@@ -29,5 +29,12 @@ const CHECK_EDGE = "border-[color:var(--cue-style-check-edge,var(--cue-border))]
 const CHECK_RADIUS = "rounded-[var(--cue-style-check-radius,calc(var(--cue-radius-control)*var(--cue-radius-scale)))]";
 /** @see CHECK_RADIUS */
 const CHECK_SIZE_MD = "size-[var(--cue-style-check-size,var(--cue-icon-md))]";
+/**
+* The checkbox's hover edge (round 6, spec §11, lane R6.T:
+* `style-check-hover-edge`), falling back to the `border-strong` it drew.
+* stripe.com's unchecked box draws its hover edge in its brand-500
+* (`--hds-color-input-border-hover`, #665efd, T145).
+*/
+const CHECK_HOVER_EDGE = "hover:border-[color:var(--cue-style-check-hover-edge,var(--cue-border-strong))]";
 //#endregion
-export { CHECK_EDGE, CHECK_RADIUS, CHECK_SIZE_MD };
+export { CHECK_EDGE, CHECK_HOVER_EDGE, CHECK_RADIUS, CHECK_SIZE_MD };

package/dist/system/_style-chip.js

@@ -99,5 +99,45 @@ const CHIP_EDGE = {
 const CHIP_HEIGHT = "h-[var(--cue-style-chip-height,var(--cue-chip-h))]";
 /** @see CHIP_HEIGHT */
 const CHIP_PAD = "px-[var(--cue-style-chip-pad,var(--cue-space-3))]";
+/**
+* The chip's leading (round 6, spec §11, lane R6.T: `style-chip-leading`).
+* stripe.com's tag sets 14px on a 19.6px line, 1.4 (T134). A nowrap, centred
+* chip lays its glyphs in the same place at any leading.
+*
+* Two fallbacks, because the recipe's two users rendered two leadings. The
+* recipe spelled `leading-none`, so `chipVariants()` on a consumer's own
+* element drew a line of 1: {@link CHIP_LEADING}, composed after the size so
+* it survives, falls back to `1`. `Chip` merged that recipe in `cn()`, where
+* `tailwind-merge` dropped `leading-none` because a font-size class follows
+* it, so a `Chip` inherited its leading: it appends
+* {@link CHIP_LEADING_INHERIT}, which replaces the recipe's in the merge (the
+* closing pass's adversarial review).
+*/
+const CHIP_LEADING = "leading-[var(--cue-style-chip-leading,1)]";
+/** @see CHIP_LEADING — `Chip`'s own, falling back to the leading it inherited. */
+const CHIP_LEADING_INHERIT = "leading-[var(--cue-style-chip-leading,inherit)]";
+/**
+* The tag volume's own gutter (round 6: `style-tag-pad`, PAD2), falling back
+* to the `space-2` it drew. stripe.com's small tag pads 4px (T135).
+*/
+const TAG_PAD = "px-[var(--cue-style-tag-pad,var(--cue-space-2))]";
+/**
+* The neutral tag's rim (round 6: `style-tag-edge`), falling back to the
+* `hair-strong` it drew. stripe.com rims its small tag in its quiet border
+* ink, #e5edf5, the md tag's own (T135).
+*/
+const TAG_EDGE = "border-[color:var(--cue-style-tag-edge,var(--cue-hair-strong))]";
+/**
+* The neutral chip's ink (round 6, spec §11, lane R6.K: `style-chip-ink`),
+* falling back to the `fg-muted` it drew. The tinted tones keep their own ink.
+* replit.com's tags are near-black, #151618, on a warm tint (K156).
+*/
+const CHIP_INK_NEUTRAL = "text-[color:var(--cue-style-chip-ink,var(--cue-fg-muted))]";
+/**
+* The gap between a chip's icon and its label (round 6, spec §11, lane R6.P:
+* `style-chip-gap`), falling back to the `space-2` it drew. coss.com/ui's badge
+* sets it 4px (P190.gap).
+*/
+const CHIP_GAP = "gap-[var(--cue-style-chip-gap,var(--cue-space-2))]";
 //#endregion
-export { CHIP_CASE, CHIP_EDGE, CHIP_FILL, CHIP_HEIGHT, CHIP_PAD, CHIP_RADIUS, CHIP_SIZE, CHIP_SIZE_MICRO, CHIP_TRACKING, CHIP_TRACKING_TAG };
+export { CHIP_CASE, CHIP_EDGE, CHIP_FILL, CHIP_GAP, CHIP_HEIGHT, CHIP_INK_NEUTRAL, CHIP_LEADING, CHIP_LEADING_INHERIT, CHIP_PAD, CHIP_RADIUS, CHIP_SIZE, CHIP_SIZE_MICRO, CHIP_TRACKING, CHIP_TRACKING_TAG, TAG_EDGE, TAG_PAD };

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

@@ -0,0 +1,15 @@
+//#region src/system/_style-choice-gap.ts
+/**
+* The gap between a stacked CheckboxGroup's or RadioGroup's items (round 6,
+* spec §11, lane R6.P: `style-choice-gap`), falling back to the `space-2`
+* both drew. coss.com/ui stacks both 12px apart (P148, P171.gap). A horizontal
+* radio group keeps its own `space-5`.
+*
+* **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 CHOICE_GAP = "gap-[var(--cue-style-choice-gap,var(--cue-space-2))]";
+//#endregion
+export { CHOICE_GAP };

package/dist/system/_style-collapse.js

@@ -10,5 +10,85 @@
 * @internal Not part of the public API.
 */
 const COLLAPSE_HEIGHT = "h-[var(--cue-style-collapse-height,var(--cue-control-md))]";
+/**
+* The disclosure trigger's and panel's inline padding (round 6, spec §11,
+* lane R6.T: `style-collapse-pad`), falling back to the row gutter
+* `--cue-pad-row-x` they drew. stripe.com's accordion summary and content sit
+* flush with the rule between sections, so tender sets `0px` (T127, T130).
+*/
+const COLLAPSE_PAD = "px-[var(--cue-style-collapse-pad,var(--cue-pad-row-x))]";
+/** The gap between the trigger's label and its caret (`style-collapse-gap`), falling back to `space-3` (T127). */
+const COLLAPSE_GAP = "gap-[var(--cue-style-collapse-gap,var(--cue-space-3))]";
+/** The trigger's hover ink (`style-collapse-hover-ink`), falling back to the `fg` it hovered to (T128). */
+const COLLAPSE_HOVER_INK = "hover:text-[color:var(--cue-style-collapse-hover-ink,var(--cue-fg))]";
+/** An open section's trigger ink (`style-collapse-open-ink`), falling back to `fg` (T129). */
+const COLLAPSE_OPEN_INK = "data-[panel-open]:text-[color:var(--cue-style-collapse-open-ink,var(--cue-fg))]";
+/**
+* The panel body's block padding, start then end (`style-collapse-body-pad`,
+* PAD2), falling back to the `space-1` over `space-4` it drew. stripe.com's
+* content starts under the summary's own padding and ends 16px above the
+* rule (T130).
+*/
+const COLLAPSE_BODY_PAD = "[padding-block:var(--cue-style-collapse-body-pad,var(--cue-space-1)_var(--cue-space-4))]";
+/**
+* The trigger's text size (round 6, spec §11, lane R6.K: `style-collapse-size`,
+* a SIZE the font scale moves), falling back to the `text-ui` rung it drew.
+* replit.com's FAQ rows set their question at 20px on a 28px line (K142); greptile.com's
+* FAQ toggles are its 16px copy, 14px on a phone (Z112).
+*/
+const COLLAPSE_SIZE = "text-[length:var(--cue-style-collapse-size,var(--cue-text-ui))]";
+/** The trigger's leading (`style-collapse-leading`), falling back to the `inherit` it drew (no leading class of its own). */
+const COLLAPSE_LEADING = "leading-[var(--cue-style-collapse-leading,inherit)]";
+/**
+* The trigger's hover ground (`style-collapse-hover-ground`), falling back to
+* the `transparent` it drew: the trigger painted no ground under the pointer.
+* replit.com's FAQ rows fill with its recessed ground on hover (K143).
+*/
+const COLLAPSE_HOVER_GROUND = "hover:bg-[color:var(--cue-style-collapse-hover-ground,transparent)]";
+/**
+* The panel body's ink (`style-collapse-body-ink`), falling back to the
+* `fg-muted` it drew. replit.com's FAQ answers are set in its quiet ink,
+* #37383c, the ink of its headings and quiet controls (K144).
+*/
+const COLLAPSE_BODY_INK = "text-[color:var(--cue-style-collapse-body-ink,var(--cue-fg-muted))]";
+/**
+* The panel body's face: the body face (`style-body-face`, spec §3.5), falling back to the `font-mono` the body
+* drew. The body was the one part of the disclosure still hard-coded mono under a sans Look (K144, the K44
+* finding).
+*/
+const COLLAPSE_BODY_FACE = "font-[family-name:var(--cue-style-body-face,var(--cue-font-mono))]";
+/**
+* The disclosure trigger's corner (round 6, spec §11, lane R6.K: `style-collapse-radius`), falling
+* back to the square it drew. replit.com's FAQ rows round their hover ground 6px (K141.radius).
+*/
+const COLLAPSE_RADIUS = "rounded-[var(--cue-style-collapse-radius,0px)]";
+/**
+* The trigger's weight (`style-collapse-weight`), falling back through the
+* label weight to the `400` it drew (`LABEL_WEIGHT_NORMAL`). greptile.com's
+* FAQ toggles are 600 beside its 400 labels, so the two are apart (Z112).
+*/
+const COLLAPSE_WEIGHT = "font-[number:var(--cue-style-collapse-weight,var(--cue-style-label-weight,400))]";
+/** The caret's size (`style-collapse-caret-size`), falling back to the `icon-sm` it drew; greptile.com's chevron is 16px (Z113). */
+const COLLAPSE_CARET_SIZE = "size-[var(--cue-style-collapse-caret-size,var(--cue-icon-sm))]";
+/** The caret's ink (`style-collapse-caret-ink`), falling back to the `fg-subtle` it drew; greptile.com's chevron takes the label's slate (Z113). */
+/**
+* The caret's fade (round 6, spec §11, lane R6.P: `style-collapse-caret-opacity`),
+* falling back to the opacity 1 it drew. coss.com/ui's accordion chevron sits
+* at 0.8 (P150.caret-opacity).
+*/
+const COLLAPSE_CARET_OPACITY = "opacity-[var(--cue-style-collapse-caret-opacity,1)]";
+/** @see COLLAPSE_CARET_SIZE */
+const COLLAPSE_CARET_INK = "text-[color:var(--cue-style-collapse-caret-ink,var(--cue-fg-subtle))]";
+/**
+* The panel body's size, leading and tracking (round 6, spec §11, lane R6.Z: `style-collapse-body-size`,
+* a type size the font scale moves, `-body-leading`, `-body-tracking`), each falling back to the class it
+* replaced: the `text-ui` rung on `leading-ui`, and the tracking it inherited (no class of its own). greptile.com's FAQ answers are its running
+* copy, 16px on 24px at −0.01em (Z114).
+*/
+const COLLAPSE_BODY_SIZE = "text-[length:var(--cue-style-collapse-body-size,var(--cue-text-ui))]";
+/** @see COLLAPSE_BODY_SIZE */
+const COLLAPSE_BODY_LEADING = "leading-[var(--cue-style-collapse-body-leading,var(--cue-leading-ui))]";
+/** @see COLLAPSE_BODY_SIZE */
+const COLLAPSE_BODY_TRACKING = "tracking-[var(--cue-style-collapse-body-tracking,inherit)]";
 //#endregion
-export { COLLAPSE_HEIGHT };
+export { COLLAPSE_BODY_FACE, COLLAPSE_BODY_INK, COLLAPSE_BODY_LEADING, COLLAPSE_BODY_PAD, COLLAPSE_BODY_SIZE, COLLAPSE_BODY_TRACKING, COLLAPSE_CARET_INK, COLLAPSE_CARET_OPACITY, COLLAPSE_CARET_SIZE, COLLAPSE_GAP, COLLAPSE_HEIGHT, COLLAPSE_HOVER_GROUND, COLLAPSE_HOVER_INK, COLLAPSE_LEADING, COLLAPSE_OPEN_INK, COLLAPSE_PAD, COLLAPSE_RADIUS, COLLAPSE_SIZE, COLLAPSE_WEIGHT };

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

@@ -0,0 +1,14 @@
+//#region src/system/_style-control-gap.ts
+/**
+* The gap between a button's icon and its label (round 6, spec §11, lane
+* R6.P: `style-control-gap`), falling back to the `0.4em` the chassis drew.
+* coss.com/ui's buttons set it 8px (`gap-2`, P145.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 CONTROL_GAP = "gap-[var(--cue-style-control-gap,0.4em)]";
+//#endregion
+export { CONTROL_GAP };

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

@@ -18,5 +18,12 @@
 * @internal Not part of the public API.
 */
 const CONTROL_LABEL_WEIGHT = "font-[number:var(--cue-style-body-weight,var(--cue-style-label-weight,inherit))]";
+/**
+* A checkbox's, a switch's and a radio's label leading (round 6, spec §11,
+* lane R6.T: `style-control-label-leading`), falling back to the `inherit` it
+* drew (no leading class of its own). stripe.com sets its checkbox and switch
+* labels at 16px on a 19.2px line, 1.2 (T145, T146).
+*/
+const CONTROL_LABEL_LEADING = "leading-[var(--cue-style-control-label-leading,inherit)]";
 //#endregion
-export { CONTROL_LABEL_WEIGHT };
+export { CONTROL_LABEL_LEADING, CONTROL_LABEL_WEIGHT };