@cueplusplus/ui 0.16.0 → 0.17.0

package/dist/instruments/stat.js

@@ -1,4 +1,11 @@
 import { cn } from "../lib/cn.js";
+import { LABEL_INK_SUBTLE } from "../system/_style-label-ink.js";
+import { LABEL_FACE } from "../system/_style-label-face.js";
+import { LABEL_WEIGHT } from "../system/_style-label-weight.js";
+import { LABEL_CASE } from "../system/_style-label-case.js";
+import { LABEL_TRACKING } from "../system/_style-label-tracking.js";
+import { LABEL_SIZE_MICRO } from "../system/_style-label-size.js";
+import { DATA_FACE } from "../system/_style-data-face.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/instruments/stat.tsx
@@ -39,17 +46,17 @@ const Stat = React.forwardRef(function Stat({ className, label, value, detail, t
 		children: [
 			/* @__PURE__ */ jsx("span", {
 				"data-slot": "stat-label",
-				className: "truncate font-mono text-(length:--cue-text-micro) tracking-(--cue-tracking-caps) text-fg-subtle uppercase",
+				className: cn("truncate", LABEL_SIZE_MICRO, LABEL_INK_SUBTLE, LABEL_WEIGHT, LABEL_FACE, LABEL_TRACKING, LABEL_CASE),
 				children: label
 			}),
 			/* @__PURE__ */ jsx("span", {
 				"data-slot": "stat-value",
-				className: cn("truncate font-mono text-(length:--cue-text-title) leading-none tabular-nums", VALUE_TONE_CLASSES[tone]),
+				className: cn(`truncate ${DATA_FACE} text-(length:--cue-text-title) leading-none tabular-nums`, VALUE_TONE_CLASSES[tone]),
 				children: value
 			}),
 			detail === void 0 ? null : /* @__PURE__ */ jsx("span", {
 				"data-slot": "stat-detail",
-				className: "truncate font-mono text-(length:--cue-text-label) text-fg-muted",
+				className: `truncate ${DATA_FACE} text-(length:--cue-text-label) text-fg-muted`,
 				children: detail
 			})
 		]

package/dist/instruments/table.js

@@ -1,4 +1,16 @@
 import { cn } from "../lib/cn.js";
+import { FOCUS_RING_INSET_2 } from "../system/_focus-ring.js";
+import { LABEL_INK_SUBTLE } from "../system/_style-label-ink.js";
+import { LABEL_FACE } from "../system/_style-label-face.js";
+import { LABEL_WEIGHT_NORMAL } from "../system/_style-label-weight.js";
+import { LABEL_CASE } from "../system/_style-label-case.js";
+import { LABEL_TRACKING } from "../system/_style-label-tracking.js";
+import { LABEL_SIZE } from "../system/_style-label-size.js";
+import { BODY_SIZE, BODY_SIZE_LABEL } from "../system/_style-body-size.js";
+import { DATA_FACE } from "../system/_style-data-face.js";
+import { SELECTED_ROW } from "../system/_style-selected.js";
+import { HELP_INK } from "../system/_style-help-ink.js";
+import { ROW_PAD_Y } from "../system/_style-row-pad.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/instruments/table.tsx
@@ -16,7 +28,7 @@ const TableScrollRegion = React.forwardRef(function TableScrollRegion({ classNam
 		role: "region",
 		tabIndex: 0,
 		"data-slot": "table-scroll-region",
-		className: cn("overflow-x-auto outline-none focus-visible:outline-2 focus-visible:outline-solid focus-visible:-outline-offset-2 focus-visible:outline-accent", className)
+		className: cn(`overflow-x-auto outline-none ${FOCUS_RING_INSET_2}`, className)
 	});
 });
 /**
@@ -32,7 +44,7 @@ const TableRoot = React.forwardRef(function TableRoot({ className, ...elementPro
 	return /* @__PURE__ */ jsx("table", {
 		ref,
 		"data-slot": "table",
-		className: cn("w-full border-collapse font-mono text-(length:--cue-text-ui) text-fg", "[&_[data-numeric]]:text-right [&_[data-numeric]]:tabular-nums", className),
+		className: cn(`w-full border-collapse ${DATA_FACE} ${BODY_SIZE} text-fg`, "[&_[data-numeric]]:text-right [&_[data-numeric]]:tabular-nums", className),
 		...elementProps
 	});
 });
@@ -93,7 +105,7 @@ const TableRow = React.forwardRef(function TableRow({ className, interactive = f
 		ref,
 		"data-slot": "table-row",
 		"data-selected": selected ? "" : void 0,
-		className: cn("group/data-row border-b border-border last:border-b-0 data-[selected]:bg-accent-soft", interactive ? "cursor-pointer outline-none hover:bg-(--cue-row-hover) focus-visible:outline-2 focus-visible:outline-solid focus-visible:-outline-offset-2 focus-visible:outline-accent" : null, className),
+		className: cn(`group/data-row border-b border-border last:border-b-0 ${SELECTED_ROW}`, interactive ? `cursor-pointer outline-none hover:bg-(--cue-row-hover) ${FOCUS_RING_INSET_2}` : null, className),
 		...elementProps
 	});
 });
@@ -122,7 +134,7 @@ const TableHead = React.forwardRef(function TableHead({ className, numeric = fal
 		scope,
 		"data-slot": "table-head",
 		"data-numeric": numeric ? "" : void 0,
-		className: cn("border-b border-border bg-surface-1 px-(--cue-pad-row-x) py-(--cue-pad-row-y) text-left font-mono text-(length:--cue-text-label) font-normal tracking-(--cue-tracking-caps) whitespace-nowrap text-fg-subtle uppercase", sticky ? "sticky top-0 z-3 border-b-0 shadow-[inset_0_-1px_0_var(--cue-hair-strong)]" : null, className),
+		className: cn(`border-b border-border bg-surface-1 px-(--cue-pad-row-x) ${ROW_PAD_Y} text-left whitespace-nowrap`, LABEL_SIZE, LABEL_INK_SUBTLE, LABEL_WEIGHT_NORMAL, LABEL_FACE, LABEL_TRACKING, LABEL_CASE, sticky ? "sticky top-0 z-3 border-b-0 shadow-[inset_0_-1px_0_var(--cue-hair-strong)]" : null, className),
 		...elementProps
 	});
 });
@@ -140,8 +152,14 @@ const headingTag = (level) => `h${level}`;
 * - `text-[length:inherit]` — `<h2>` is `1.5em` and `<h6>` is `0.67em`, so
 *   without this the divider's type would change with the level it was given,
 *   which is a heading level leaking into the visual design.
-* - `font-normal` — headings come bold, and a bold micro-label in a dense list
-*   reads as a second kind of emphasis (the same ruling as `Ledger`'s heading).
+* - `font-[number:inherit]` — headings come bold, and a bold micro-label in a
+*   dense list reads as a second kind of emphasis (the same ruling as
+*   `Ledger`'s heading). The weight is *inherited*, not set: the `<th>` reads
+*   `--cue-style-label-weight` (falling back to `400`), and a label that
+*   declared its own `font-normal` held the group's name at 400 while the cell
+*   and the count beside it moved to a style set's weight — two weights in one
+*   row. Inheriting also lets a caller's `className="font-medium"`, which lands
+*   on the cell, reach the name.
 * - `m-0` — headings carry a block margin that would thicken the divider row.
 *
 * Preflight already does the middle two for consumers who import it, but the
@@ -150,7 +168,7 @@ const headingTag = (level) => `h${level}`;
 * touches them, so they inherit from the `<th>` that owns the recipe, and a
 * second copy of a treatment is exactly how two surfaces drift apart.
 */
-const TABLE_GROUP_LABEL = "m-0 inline text-[length:inherit] font-normal";
+const TABLE_GROUP_LABEL = "m-0 inline text-[length:inherit] font-[number:inherit]";
 /**
 * The canonical console table: hairlines, mono figures, no zebra striping.
 *
@@ -201,7 +219,7 @@ const Table = {
 				colSpan: span,
 				scope: "rowgroup",
 				"data-slot": "table-group-cell",
-				className: cn("bg-bg px-(--cue-pad-row-x) py-(--cue-pad-row-y) text-left font-mono text-(length:--cue-text-label) font-normal tracking-(--cue-tracking-caps) whitespace-nowrap text-fg-subtle uppercase", sticky ? "sticky z-2 [top:var(--cue-table-group-top,0px)]" : null, className),
+				className: cn(`bg-bg px-(--cue-pad-row-x) ${ROW_PAD_Y} text-left whitespace-nowrap`, LABEL_SIZE, LABEL_INK_SUBTLE, LABEL_WEIGHT_NORMAL, LABEL_FACE, LABEL_TRACKING, LABEL_CASE, sticky ? "sticky z-2 [top:var(--cue-table-group-top,0px)]" : null, className),
 				children: [/* @__PURE__ */ jsx(Label, {
 					"data-slot": "table-group-label",
 					className: TABLE_GROUP_LABEL,
@@ -220,7 +238,7 @@ const Table = {
 			ref,
 			"data-slot": "table-cell",
 			"data-numeric": numeric ? "" : void 0,
-			className: cn("px-(--cue-pad-row-x) py-(--cue-pad-row-y) align-middle", className),
+			className: cn(`px-(--cue-pad-row-x) ${ROW_PAD_Y} align-middle`, className),
 			...elementProps
 		});
 	}),
@@ -228,7 +246,7 @@ const Table = {
 		return /* @__PURE__ */ jsx("caption", {
 			ref,
 			"data-slot": "table-caption",
-			className: cn("caption-bottom pt-(--cue-space-3) text-left font-mono text-(length:--cue-text-label) text-fg-subtle", className),
+			className: cn(`caption-bottom pt-(--cue-space-3) text-left ${BODY_SIZE_LABEL} ${HELP_INK}`, LABEL_FACE, className),
 			...elementProps
 		});
 	})

package/dist/instruments/terminal-frame.js

@@ -1,5 +1,7 @@
 "use client";
 import { cn } from "../lib/cn.js";
+import { LABEL_INK_SUBTLE } from "../system/_style-label-ink.js";
+import { LABEL_SIZE } from "../system/_style-label-size.js";
 import { CopyButton } from "./copy-button.js";
 import { toRem } from "./_rem.js";
 import { mulberry32, usePrefersReducedMotion } from "./_motion.js";
@@ -184,14 +186,14 @@ const TerminalFrame = React.forwardRef(function TerminalFrame({ className, title
 		ref,
 		"data-slot": "terminal-frame",
 		"data-simulating": simulate === void 0 ? void 0 : String(simulating),
-		className: cn("flex min-w-0 flex-col overflow-hidden rounded-(--radius-surface) border border-border bg-sunken font-mono text-(length:--cue-text-ui) text-fg-muted", className),
+		className: cn("flex min-w-0 flex-col overflow-hidden rounded-surface border border-border bg-sunken font-mono text-(length:--cue-text-ui) text-fg-muted", className),
 		...elementProps,
 		children: [title === void 0 && !copy ? null : /* @__PURE__ */ jsxs("div", {
 			"data-slot": "terminal-frame-bar",
 			className: "flex h-control-md shrink-0 items-center justify-between gap-(--cue-space-3) border-b border-border px-(--cue-pad-row-x)",
 			children: [/* @__PURE__ */ jsx("span", {
 				"data-slot": "terminal-frame-title",
-				className: "min-w-0 truncate text-(length:--cue-text-label) tracking-(--cue-tracking-caps) text-fg-subtle uppercase",
+				className: `min-w-0 truncate ${LABEL_SIZE} tracking-(--cue-tracking-caps) ${LABEL_INK_SUBTLE} uppercase`,
 				children: title
 			}), copy ? /* @__PURE__ */ jsx("span", {
 				"data-slot": "terminal-frame-copy",

package/dist/instruments/usage-chart.js

@@ -220,7 +220,7 @@ const UsageChart = React.forwardRef(function UsageChart({ className, points, ton
 			]
 		}), hover === null ? null : /* @__PURE__ */ jsx("div", {
 			"data-slot": "usage-chart-tooltip",
-			className: "pointer-events-none absolute top-0 -translate-x-1/2 rounded-(--radius-control) border border-border-overlay bg-surface-2 px-(--cue-space-3) py-(--cue-space-1) font-mono text-(length:--cue-text-label) tabular-nums text-fg",
+			className: "pointer-events-none absolute top-0 -translate-x-1/2 rounded-control border border-border-overlay bg-surface-2 px-(--cue-space-3) py-(--cue-space-1) font-mono text-(length:--cue-text-label) tabular-nums text-fg",
 			style: { left: `${Math.min(88, Math.max(2, hover.x / VIEW_WIDTH * 100))}%` },
 			children: `${formatValue(hover.point.v)} · ${formatTimestamp === void 0 ? new Date(hover.point.t).toLocaleString(void 0, {
 				month: "short",

package/dist/layout/_collapse.js

@@ -1,3 +1,8 @@
+import { FOCUS_RING_INSET_2 } from "../system/_focus-ring.js";
+import { CONTROL_FACE } from "../system/_style-control-face.js";
+import { LABEL_WEIGHT_NORMAL } from "../system/_style-label-weight.js";
+import { COLLAPSE_HEIGHT } from "../system/_style-collapse.js";
+import { QUIET_INK } from "../system/_style-quiet-ink.js";
 //#region src/layout/_collapse.ts
 /**
 * The one disclosure recipe, shared by `Accordion` and `Collapsible`.
@@ -19,7 +24,7 @@
 * inset (`-outline-offset-2`) because sections live inside `overflow-hidden`
 * panels, where an outset ring on the first row would be clipped by the rim.
 */
-const collapseTriggerClasses = "group/collapse flex h-control-md w-full cursor-pointer items-center gap-(--cue-space-3) px-(--cue-pad-row-x) text-left font-mono text-(length:--cue-text-ui) text-fg-muted transition-colors duration-150 outline-none select-none hover:text-fg focus-visible:outline-2 focus-visible:outline-solid focus-visible:-outline-offset-2 focus-visible:outline-accent data-[panel-open]:text-fg data-[disabled]:pointer-events-none data-[disabled]:opacity-40";
+const collapseTriggerClasses = `group/collapse flex ${COLLAPSE_HEIGHT} w-full cursor-pointer items-center gap-(--cue-space-3) px-(--cue-pad-row-x) text-left ${CONTROL_FACE} text-(length:--cue-text-ui) ${QUIET_INK} ${LABEL_WEIGHT_NORMAL} transition-colors duration-150 outline-none select-none hover:text-fg ${FOCUS_RING_INSET_2} data-[panel-open]:text-fg data-[disabled]:pointer-events-none data-[disabled]:opacity-40`;
 /** The label between the summary row's gutters — truncates, never wraps. */
 const collapseLabelClasses = "min-w-0 flex-1 truncate";
 /**

package/dist/layout/bento.js

@@ -1,4 +1,7 @@
 import { cn } from "../lib/cn.js";
+import { FOCUS_RING_OFFSET_2 } from "../system/_focus-ring.js";
+import { DATA_FACE } from "../system/_style-data-face.js";
+import { TITLE_VOICE } from "../system/_style-title.js";
 import { GAP_CLASSES } from "./stack.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -53,9 +56,9 @@ const MIN_HEIGHT_CLASSES = {
 	hero: "min-h-[calc(var(--cue-space-8)*8)]"
 };
 /** The tile surface, shared by both variants so a link tile is not a second look. */
-const TILE_CLASS = "flex flex-col gap-(--cue-space-3) overflow-hidden rounded-(--radius-surface) border border-border bg-surface-1 p-(--cue-space-5)";
+const TILE_CLASS = "flex flex-col gap-(--cue-space-3) overflow-hidden rounded-surface border border-border bg-surface-1 p-(--cue-space-5)";
 /** What a link tile adds: the hover tint and the focus ring the whole surface takes. */
-const LINK_TILE_CLASS = "no-underline transition-colors duration-150 outline-none hover:bg-surface-2 focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-2 focus-visible:outline-accent";
+const LINK_TILE_CLASS = `no-underline transition-colors duration-150 outline-none hover:bg-surface-2 ${FOCUS_RING_OFFSET_2}`;
 /** The host elements a link tile may not contain, plus anything carrying `tabIndex`. */
 const INTERACTIVE_TAGS = /* @__PURE__ */ new Set([
 	"a",
@@ -169,11 +172,11 @@ const BentoTile = React.forwardRef(function BentoTile(props, ref) {
 			className: "flex min-w-0 flex-col gap-(--cue-space-1)",
 			children: [eyebrow === void 0 ? null : /* @__PURE__ */ jsx("span", {
 				"data-slot": "bento-tile-eyebrow",
-				className: "min-w-0 truncate font-mono text-(length:--cue-text-micro) text-fg-muted",
+				className: `min-w-0 truncate ${DATA_FACE} text-(length:--cue-text-micro) text-fg-muted`,
 				children: eyebrow
 			}), title === void 0 ? null : /* @__PURE__ */ jsx("span", {
 				"data-slot": "bento-tile-title",
-				className: "font-mono text-(length:--cue-text-emphasis) font-medium text-fg",
+				className: TITLE_VOICE,
 				children: title
 			})]
 		}) : null, tail ? /* @__PURE__ */ jsxs("div", {

package/dist/layout/breadcrumb.js

@@ -1,4 +1,8 @@
 import { cn } from "../lib/cn.js";
+import { FOCUS_RING_OFFSET_2 } from "../system/_focus-ring.js";
+import { CONTROL_FACE } from "../system/_style-control-face.js";
+import { BODY_SIZE_LABEL } from "../system/_style-body-size.js";
+import { HELP_INK } from "../system/_style-help-ink.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/layout/breadcrumb.tsx
@@ -6,7 +10,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * A crumb that goes somewhere. Muted until hovered, never underlined — the
 * trail is navigation furniture and should not read as body-copy links.
 */
-const CRUMB_LINK_CLASSES = "cursor-pointer rounded-(--radius-control) border-0 bg-transparent p-0 font-mono text-(length:--cue-text-label) text-fg-muted no-underline transition-colors duration-150 outline-none hover:text-accent focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-2 focus-visible:outline-accent";
+const CRUMB_LINK_CLASSES = `cursor-pointer rounded-control border-0 bg-transparent p-0 ${CONTROL_FACE} ${BODY_SIZE_LABEL} text-fg-muted no-underline transition-colors duration-150 outline-none hover:text-accent ${FOCUS_RING_OFFSET_2}`;
 /**
 * Where you are, and how to get back.
 *
@@ -28,13 +32,13 @@ const Breadcrumb = React.forwardRef(function Breadcrumb({ className, items, sepa
 		className: cn("min-w-0", className),
 		...elementProps,
 		children: /* @__PURE__ */ jsx("ol", {
-			className: "m-0 flex list-none flex-wrap items-center gap-(--cue-space-2) p-0 font-mono text-(length:--cue-text-label) text-fg-muted",
+			className: cn(`m-0 flex list-none flex-wrap items-center gap-(--cue-space-2) p-0 ${BODY_SIZE_LABEL} text-fg-muted`, CONTROL_FACE),
 			children: items.map((item, index) => {
 				const last = index === items.length - 1;
 				return /* @__PURE__ */ jsxs(React.Fragment, { children: [index === 0 ? null : /* @__PURE__ */ jsx("li", {
 					"data-slot": "breadcrumb-separator",
 					"aria-hidden": "true",
-					className: "text-fg-subtle select-none",
+					className: `${HELP_INK} select-none`,
 					children: separator
 				}), /* @__PURE__ */ jsx("li", {
 					"data-slot": "breadcrumb-item",

package/dist/layout/card.js

@@ -1,6 +1,12 @@
 import { cn } from "../lib/cn.js";
+import { BODY_VOICE } from "../system/_style-body.js";
+import { BODY_SIZE } from "../system/_style-body-size.js";
 import { RIM_INSET } from "../system/_paint-rim.js";
+import { TITLE_VOICE } from "../system/_style-title.js";
+import { SEAM_INK, SEAM_RIM } from "../system/_style-seam.js";
 import { STROKE_SURFACE_1 } from "../system/_paint-stroke-surface-1.js";
+import { CARD_PAD, CARD_PAD_BOTTOM, CARD_PAD_SEAM_BOTTOM, CARD_PAD_SEAM_TOP, CARD_PAD_TOP, CARD_PAD_X } from "../system/_style-card-pad.js";
+import { DESCRIPTION_LEADING, DESCRIPTION_TRACKING } from "../system/_style-description.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 /**
@@ -21,7 +27,7 @@ const Card = {
 			ref,
 			"data-slot": "card",
 			"data-seam": seam ? "" : void 0,
-			className: cn("group/card flex flex-col overflow-hidden rounded-(--radius-surface)", seam ? "border border-border gap-px bg-border" : `${STROKE_SURFACE_1} ${RIM_INSET}`, className),
+			className: cn("group/card flex flex-col overflow-hidden rounded-surface", seam ? `border ${SEAM_RIM} gap-px ${SEAM_INK}` : `${STROKE_SURFACE_1} ${RIM_INSET}`, className),
 			...elementProps
 		});
 	}),
@@ -29,7 +35,7 @@ const Card = {
 		return /* @__PURE__ */ jsxs("div", {
 			ref,
 			"data-slot": "card-header",
-			className: cn("flex items-start justify-between gap-(--cue-space-4) bg-surface-1 px-(--cue-space-5) pt-(--cue-space-5) pb-0 group-data-[seam]/card:pb-(--cue-space-5)", className),
+			className: cn(`flex items-start justify-between gap-(--cue-space-4) bg-surface-1 ${CARD_PAD_X} ${CARD_PAD_TOP} pb-0 ${CARD_PAD_SEAM_BOTTOM}`, className),
 			...elementProps,
 			children: [/* @__PURE__ */ jsx("div", {
 				className: "flex min-w-0 flex-col gap-(--cue-space-1)",
@@ -45,7 +51,7 @@ const Card = {
 		return /* @__PURE__ */ jsx("h3", {
 			ref,
 			"data-slot": "card-title",
-			className: cn("font-mono text-(length:--cue-text-emphasis) font-medium text-fg", className),
+			className: cn(TITLE_VOICE, className),
 			...elementProps
 		});
 	}),
@@ -53,7 +59,7 @@ const Card = {
 		return /* @__PURE__ */ jsx("p", {
 			ref,
 			"data-slot": "card-description",
-			className: cn("font-mono text-(length:--cue-text-ui) leading-(--cue-leading-ui) text-fg-muted", className),
+			className: cn(`${BODY_VOICE} ${BODY_SIZE} ${DESCRIPTION_LEADING} ${DESCRIPTION_TRACKING} text-fg-muted`, className),
 			...elementProps
 		});
 	}),
@@ -61,7 +67,7 @@ const Card = {
 		return /* @__PURE__ */ jsx("div", {
 			ref,
 			"data-slot": "card-content",
-			className: cn("bg-surface-1 p-(--cue-space-5)", className),
+			className: cn(`bg-surface-1 ${CARD_PAD}`, className),
 			...elementProps
 		});
 	}),
@@ -69,7 +75,7 @@ const Card = {
 		return /* @__PURE__ */ jsx("div", {
 			ref,
 			"data-slot": "card-footer",
-			className: cn("flex items-center justify-end gap-(--cue-space-3) bg-surface-1 px-(--cue-space-5) pt-0 pb-(--cue-space-5) group-data-[seam]/card:pt-(--cue-space-5)", className),
+			className: cn(`flex items-center justify-end gap-(--cue-space-3) bg-surface-1 ${CARD_PAD_X} pt-0 ${CARD_PAD_BOTTOM} ${CARD_PAD_SEAM_TOP}`, className),
 			...elementProps
 		});
 	})

package/dist/layout/carousel.js

@@ -1,5 +1,6 @@
 "use client";
 import { cn } from "../lib/cn.js";
+import { FOCUS_RING_OFFSET_2 } from "../system/_focus-ring.js";
 import { IconButton } from "../primitives/icon-button.js";
 import { ChevronLeftGlyph, ChevronRightGlyph } from "./_glyphs.js";
 import * as React from "react";
@@ -118,7 +119,7 @@ const Carousel = {
 						scrollNext();
 					}
 				},
-				className: cn("relative outline-none focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-2 focus-visible:outline-accent", className),
+				className: cn(`relative outline-none ${FOCUS_RING_OFFSET_2}`, className),
 				...elementProps,
 				children
 			})
@@ -202,7 +203,7 @@ const Carousel = {
 				"aria-label": dotLabel(index),
 				"aria-current": index === selectedIndex ? "true" : void 0,
 				onClick: () => scrollTo(index),
-				className: cn("size-[0.25rem] cursor-pointer rounded-full border-0 p-0 transition-colors duration-150 outline-none focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-2 focus-visible:outline-accent motion-reduce:transition-none", index === selectedIndex ? "bg-accent" : "bg-border-strong")
+				className: cn(`size-[0.25rem] cursor-pointer rounded-full border-0 p-0 transition-colors duration-150 outline-none ${FOCUS_RING_OFFSET_2} motion-reduce:transition-none`, index === selectedIndex ? "bg-accent" : "bg-border-strong")
 			}, index))
 		});
 	})

package/dist/layout/collapsible.js

@@ -1,5 +1,9 @@
 "use client";
 import { cn } from "../lib/cn.js";
+import { FOCUS_RING_OFFSET_2 } from "../system/_focus-ring.js";
+import { LABEL_FACE } from "../system/_style-label-face.js";
+import { LABEL_CASE } from "../system/_style-label-case.js";
+import { LABEL_TRACKING } from "../system/_style-label-tracking.js";
 import { collapseCaretClasses, collapseLabelClasses, collapsePanelBodyClasses, collapseTriggerClasses, collapsiblePanelClasses } from "./_collapse.js";
 import { ChevronRightGlyph } from "./_glyphs.js";
 import * as React from "react";
@@ -94,7 +98,7 @@ const Disclosure = React.forwardRef(function Disclosure({ className, label = "ad
 		children: [/* @__PURE__ */ jsxs(Collapsible.Trigger, {
 			ref,
 			"data-slot": "disclosure-trigger",
-			className: cn("group/disclosure inline-flex cursor-pointer items-center gap-(--cue-space-2) self-start border-0 bg-transparent p-0 py-(--cue-space-2) font-mono text-(length:--cue-text-label) tracking-(--cue-tracking-caps) text-fg-subtle uppercase transition-colors duration-150 outline-none select-none hover:text-fg-muted focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-2 focus-visible:outline-accent", className),
+			className: cn(`group/disclosure inline-flex cursor-pointer items-center gap-(--cue-space-2) self-start border-0 bg-transparent p-0 py-(--cue-space-2) text-(length:--cue-text-label) text-fg-subtle transition-colors duration-150 outline-none select-none hover:text-fg-muted ${FOCUS_RING_OFFSET_2}`, LABEL_FACE, LABEL_TRACKING, LABEL_CASE, className),
 			...elementProps,
 			children: [
 				/* @__PURE__ */ jsx("span", {

package/dist/layout/container.js

@@ -1,4 +1,5 @@
 import { cn } from "../lib/cn.js";
+import { GUTTER } from "../system/_style-gutter.js";
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/layout/container.tsx
@@ -35,7 +36,7 @@ const Container = React.forwardRef(function Container({ className, width = "narr
 	return /* @__PURE__ */ jsx("div", {
 		ref,
 		"data-slot": "container",
-		className: cn("mx-auto w-full", WIDTHS[width], padded ? "px-(--cue-space-6)" : null, className),
+		className: cn("mx-auto w-full", WIDTHS[width], padded ? GUTTER : null, className),
 		...elementProps
 	});
 });

package/dist/layout/description-list.js

@@ -1,4 +1,7 @@
 import { cn } from "../lib/cn.js";
+import { LABEL_FACE } from "../system/_style-label-face.js";
+import { LABEL_CASE } from "../system/_style-label-case.js";
+import { LABEL_TRACKING } from "../system/_style-label-tracking.js";
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/layout/description-list.tsx
@@ -20,7 +23,7 @@ const DescriptionList = {
 		return /* @__PURE__ */ jsx("dt", {
 			ref,
 			"data-slot": "description-list-term",
-			className: cn("font-mono text-(length:--cue-text-label) tracking-(--cue-tracking-caps) text-fg-subtle uppercase", className),
+			className: cn("text-(length:--cue-text-label) text-fg-subtle", LABEL_FACE, LABEL_TRACKING, LABEL_CASE, className),
 			...elementProps
 		});
 	}),

package/dist/layout/frames.js

@@ -1,6 +1,12 @@
 "use client";
 import { cn } from "../lib/cn.js";
+import { FOCUS_RING_INSET_2 } from "../system/_focus-ring.js";
+import { LABEL_INK_SUBTLE } from "../system/_style-label-ink.js";
+import { LABEL_FACE } from "../system/_style-label-face.js";
+import { LABEL_TRACKING_INHERIT } from "../system/_style-label-tracking.js";
+import { LABEL_SIZE_MICRO } from "../system/_style-label-size.js";
 import { GROUND_CLASSES } from "./_ground.js";
+import { CAPTION_CASE } from "../system/_style-caption.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/layout/frames.tsx
@@ -105,7 +111,7 @@ const HEIGHT_CLASSES = {
 * scroller fills stays where a reader left it. The ground is on the box for the
 * same reason — a board's grid does not move with its art.
 */
-const ROOT_CLASS = "relative min-w-0 overflow-hidden rounded-(--radius-surface) border border-border";
+const ROOT_CLASS = "relative min-w-0 overflow-hidden rounded-surface border border-border";
 /**
 * The scroller: a row of frames, sideways only, with a rung of the space
 * ladder's top between them.
@@ -117,7 +123,7 @@ const ROOT_CLASS = "relative min-w-0 overflow-hidden rounded-(--radius-surface)
 * there is no frame loop here for `reduced-motion.test.ts` to find, and there
 * must not be.
 */
-const CANVAS_CLASS = "flex h-full min-w-0 items-start gap-(--cue-space-8) overflow-x-auto overflow-y-hidden scroll-smooth p-(--cue-space-6) outline-none motion-reduce:scroll-auto focus-visible:outline-2 focus-visible:outline-solid focus-visible:-outline-offset-2 focus-visible:outline-accent";
+const CANVAS_CLASS = `flex h-full min-w-0 items-start gap-(--cue-space-8) overflow-x-auto overflow-y-hidden scroll-smooth p-(--cue-space-6) outline-none motion-reduce:scroll-auto ${FOCUS_RING_INSET_2}`;
 /**
 * The column: the same frames, stacked, sized by what they hold.
 *
@@ -127,7 +133,7 @@ const CANVAS_CLASS = "flex h-full min-w-0 items-start gap-(--cue-space-8) overfl
 * It keeps the focus ring and the keyboard handler: the region is still
 * focusable, and arrow keys still scroll it, they just scroll the page.
 */
-const COLUMN_CLASS = "flex min-w-0 flex-col gap-(--cue-space-6) p-(--cue-space-6) outline-none focus-visible:outline-2 focus-visible:outline-solid focus-visible:-outline-offset-2 focus-visible:outline-accent";
+const COLUMN_CLASS = `flex min-w-0 flex-col gap-(--cue-space-6) p-(--cue-space-6) outline-none ${FOCUS_RING_INSET_2}`;
 /** A column is sized by its contents, so the box must not hold a height. */
 const COLUMN_ROOT_CLASS = "h-auto";
 /** The affordance, and only where there is something to afford. */
@@ -237,7 +243,7 @@ const FramesRoot = React.forwardRef(function FramesRoot({ children, label, heigh
 	});
 });
 /** One cell: the specimen, and the line under it. */
-const ITEM_CLASS = "flex min-w-0 shrink-0 flex-col items-center gap-(--cue-space-2) rounded-(--radius-control) p-(--cue-space-2)";
+const ITEM_CLASS = "flex min-w-0 shrink-0 flex-col items-center gap-(--cue-space-2) rounded-control p-(--cue-space-2)";
 /** The one a reader is inspecting. An outline and not a border: a border would move the cell. */
 const ITEM_SELECTED_CLASS = "outline-2 outline-solid -outline-offset-1 outline-accent";
 const ITEM_BODY_CLASS = "flex min-w-0 items-center justify-center";
@@ -262,7 +268,7 @@ const ITEM_BODY_CLASS = "flex min-w-0 items-center justify-center";
 * behaves like any other line, rather than inheriting the empty string and
 * vanishing.
 */
-const ITEM_CAPTION_CLASS = "min-w-0 truncate text-center font-mono text-(length:--cue-text-micro) text-fg-subtle [opacity:var(--preview-captions,1)] [pointer-events:var(--preview-captions-pe,auto)]";
+const ITEM_CAPTION_CLASS = `min-w-0 truncate text-center ${LABEL_FACE} ${CAPTION_CASE} ${LABEL_TRACKING_INHERIT} ${LABEL_SIZE_MICRO} ${LABEL_INK_SUBTLE} [opacity:var(--preview-captions,1)] [pointer-events:var(--preview-captions-pe,auto)]`;
 /**
 * A design canvas: frames side by side, each holding one axis of one component.
 *

package/dist/layout/item.js

@@ -1,4 +1,5 @@
 import { cn } from "../lib/cn.js";
+import { FOCUS_RING } from "../system/_focus-ring.js";
 import { cva } from "../lib/cva.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -15,7 +16,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 * @example
 * <div className={itemVariants({ variant: "outline" })} />
 */
-const itemVariants = cva("flex w-full items-center gap-(--cue-space-4) rounded-(--radius-control) px-(--cue-pad-row-x) py-(--cue-pad-row-y) text-left font-mono text-(length:--cue-text-ui) text-fg", {
+const itemVariants = cva("flex w-full items-center gap-(--cue-space-4) rounded-control px-(--cue-pad-row-x) py-(--cue-pad-row-y) text-left font-mono text-(length:--cue-text-ui) text-fg", {
 	variants: {
 		variant: {
 			plain: "",
@@ -23,7 +24,7 @@ const itemVariants = cva("flex w-full items-center gap-(--cue-space-4) rounded-(
 			soft: "bg-surface-2"
 		},
 		interactive: {
-			true: "cursor-pointer transition-colors duration-150 outline-none hover:bg-surface-2 focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-1 focus-visible:outline-accent disabled:pointer-events-none disabled:opacity-40",
+			true: `cursor-pointer transition-colors duration-150 outline-none hover:bg-surface-2 ${FOCUS_RING} disabled:pointer-events-none disabled:opacity-40`,
 			false: ""
 		}
 	},

package/dist/layout/link.d.ts

@@ -13,6 +13,22 @@ import { useRender } from "@base-ui/react/use-render";
  * alone would fail WCAG 1.4.1 — and it offsets the rule by 4px so descenders
  * are not struck through.
  *
+ * The ink, the rule's colour and offset, the weight and the hover ink are the
+ * style set's to change (spec §3.7): each reads a `style-link-*` name, or
+ * `style-hover-ink`, with what this recipe drew before as its fallback —
+ * `_style-link.ts` lists them. The `underline` variant's ink falls back
+ * through every link's, so a set that inks all links inks prose links too.
+ *
+ * **Each variant carries its own ink, and the base carries none.** The two
+ * inks are two `text-[color:…]` utilities, and `linkVariants()` is exported to
+ * be spread onto an anchor without `cn()`: were the plain ink in the base and
+ * the prose ink in the variant, an underlined link would carry both, and which
+ * one painted would be decided by the order Tailwind happened to emit them in.
+ * The same holds for a class a caller concatenates onto it: it does not replace
+ * the recipe's own, and the offset reader is emitted after every numeric
+ * `underline-offset-*`. Merge with `tailwind-merge`, or pass `className` to
+ * `Link`, which merges, to override one.
+ *
  * @example
  * <a className={linkVariants({ variant: "underline" })} href="/docs">Docs</a>
  */

package/dist/layout/link.js

@@ -1,6 +1,9 @@
 "use client";
 import { cn } from "../lib/cn.js";
+import { FOCUS_RING_OFFSET_2 } from "../system/_focus-ring.js";
+import { CONTROL_FACE } from "../system/_style-control-face.js";
 import { cva } from "../lib/cva.js";
+import { HOVER_INK, INLINE_LINK_INK, LINK_INK, LINK_OFFSET, LINK_RULE, LINK_WEIGHT } from "../system/_style-link.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useRender } from "@base-ui/react/use-render";
@@ -16,13 +19,29 @@ import { useRender } from "@base-ui/react/use-render";
 * alone would fail WCAG 1.4.1 — and it offsets the rule by 4px so descenders
 * are not struck through.
 *
+* The ink, the rule's colour and offset, the weight and the hover ink are the
+* style set's to change (spec §3.7): each reads a `style-link-*` name, or
+* `style-hover-ink`, with what this recipe drew before as its fallback —
+* `_style-link.ts` lists them. The `underline` variant's ink falls back
+* through every link's, so a set that inks all links inks prose links too.
+*
+* **Each variant carries its own ink, and the base carries none.** The two
+* inks are two `text-[color:…]` utilities, and `linkVariants()` is exported to
+* be spread onto an anchor without `cn()`: were the plain ink in the base and
+* the prose ink in the variant, an underlined link would carry both, and which
+* one painted would be decided by the order Tailwind happened to emit them in.
+* The same holds for a class a caller concatenates onto it: it does not replace
+* the recipe's own, and the offset reader is emitted after every numeric
+* `underline-offset-*`. Merge with `tailwind-merge`, or pass `className` to
+* `Link`, which merges, to override one.
+*
 * @example
 * <a className={linkVariants({ variant: "underline" })} href="/docs">Docs</a>
 */
-const linkVariants = cva("cursor-pointer rounded-(--radius-control) font-mono text-fg transition-colors duration-150 outline-none hover:text-accent focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-2 focus-visible:outline-accent", {
+const linkVariants = cva(`cursor-pointer rounded-control ${CONTROL_FACE} ${LINK_WEIGHT} transition-colors duration-150 outline-none ${HOVER_INK} ${FOCUS_RING_OFFSET_2}`, {
 	variants: { variant: {
-		plain: "no-underline",
-		underline: "underline decoration-border underline-offset-4 hover:decoration-accent"
+		plain: `no-underline ${LINK_INK}`,
+		underline: `underline ${INLINE_LINK_INK} ${LINK_RULE} ${LINK_OFFSET} hover:decoration-[color:var(--cue-style-hover-ink,var(--cue-accent))]`
 	} },
 	defaultVariants: { variant: "plain" }
 });

package/dist/layout/pagination.js

@@ -1,5 +1,6 @@
 "use client";
 import { cn } from "../lib/cn.js";
+import { FOCUS_RING_INSET } from "../system/_focus-ring.js";
 import { IconButton } from "../primitives/icon-button.js";
 import { ChevronLeftGlyph, ChevronRightGlyph } from "./_glyphs.js";
 import * as React from "react";
@@ -62,7 +63,7 @@ function paginationRange(page, pageCount, siblingCount = 1) {
 * with `accent-soft` when it is the page you are on — never a solid accent
 * fill, which at console density reads as a second, louder button.
 */
-const PAGE_BUTTON_CLASSES = "inline-flex h-control-sm min-w-control-sm cursor-pointer items-center justify-center rounded-(--radius-control) border-0 bg-transparent px-(--cue-space-2) font-mono text-(length:--cue-text-ui) tabular-nums text-fg-muted transition-colors duration-150 outline-none select-none hover:bg-surface-2 hover:text-fg focus-visible:outline-2 focus-visible:outline-solid focus-visible:-outline-offset-1 focus-visible:outline-accent";
+const PAGE_BUTTON_CLASSES = `inline-flex h-control-sm min-w-control-sm cursor-pointer items-center justify-center rounded-control border-0 bg-transparent px-(--cue-space-2) font-mono text-(length:--cue-text-ui) tabular-nums text-fg-muted transition-colors duration-150 outline-none select-none hover:bg-surface-2 hover:text-fg ${FOCUS_RING_INSET}`;
 /**
 * The pager: previous, a window of page numbers, next.
 *