@cueplusplus/ui 0.16.0 → 0.18.0

package/dist/chrome/eyebrow.js

@@ -1,15 +1,26 @@
 import { cn } from "../lib/cn.js";
+import { LABEL_CASE } from "../system/_style-label-case.js";
+import { LABEL_TRACKING_LOOSE } from "../system/_style-label-tracking.js";
+import { EYEBROW_FACE, EYEBROW_GLYPH, EYEBROW_INK, EYEBROW_SIZE, EYEBROW_WEIGHT } from "../system/_style-eyebrow.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/chrome/eyebrow.tsx
 /**
 * The small accent kicker that sits above a title: `// PATCH`.
 *
-* Mono, uppercase and widely tracked, in the theme's accent — the one place
-* where the accent is used for pure typography rather than for a control. The
-* slashes are marked `aria-hidden` and `select-none`, so a screen reader reads
-* "patch" and a copy-paste of the page does not carry punctuation that was only
-* ever decoration.
+* Mono, uppercase and widely tracked by default — the style set's choice
+* inside one — in the theme's accent: the one place where the accent is used
+* for pure typography rather than for a control. The slashes are marked
+* `aria-hidden` and `select-none`, so a screen reader reads "patch" and a
+* copy-paste of the page does not carry punctuation that was only ever
+* decoration.
+*
+* A style set can restyle it apart from its other captions: its face, size,
+* ink and weight (`--cue-style-eyebrow-face`, `-size`, `-ink`, `-weight`, each
+* falling back through the label names to the console's voice), and whether
+* the slashes print at all (`--cue-style-eyebrow-glyph: none` drops them, as
+* every measured Look does). `slashes={false}` still removes them from the
+* markup under any set.
 *
 * Static markup — no `"use client"`.
 *
@@ -22,12 +33,12 @@ const Eyebrow = React.forwardRef(function Eyebrow({ className, slashes = true, c
 	return /* @__PURE__ */ jsxs("span", {
 		ref,
 		"data-slot": "eyebrow",
-		className: cn("inline-flex items-center gap-(--cue-space-2) font-mono text-(length:--cue-text-label) tracking-(--cue-tracking-caps-loose) text-accent uppercase", className),
+		className: cn("inline-flex items-center gap-(--cue-space-2)", EYEBROW_SIZE, EYEBROW_INK, EYEBROW_WEIGHT, EYEBROW_FACE, LABEL_TRACKING_LOOSE, LABEL_CASE, className),
 		...elementProps,
 		children: [slashes ? /* @__PURE__ */ jsx("span", {
 			"data-slot": "eyebrow-glyph",
 			"aria-hidden": "true",
-			className: "select-none",
+			className: cn("select-none", EYEBROW_GLYPH),
 			children: "//"
 		}) : null, children]
 	});

package/dist/chrome/footer.d.ts

@@ -66,6 +66,11 @@ interface FooterProps extends React.ComponentPropsWithoutRef<"footer"> {
  * docblock says why that is a fact about the published manifest and not only
  * about the markup.
  *
+ * Both rules are solid unless a style set says otherwise: `style-footer-rule-style`
+ * dashes the rule across the top and the rule over the fine print together,
+ * through the slot their borders already read, so a caller's own
+ * `className="border-dotted"` still wins. `Band`'s rule does not read it.
+ *
  * Static markup — no `"use client"`.
  *
  * @example

package/dist/chrome/footer.js

@@ -1,6 +1,12 @@
 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 { NAV_VOICE } from "../system/_style-nav-voice.js";
+import { LABEL_SIZE } from "../system/_style-label-size.js";
 import { Container } from "../layout/container.js";
 import { bandClasses } from "./_band.js";
+import { FOOTER_RULE, FOOTER_RULE_STYLE } from "../system/_style-footer-rule.js";
+import { SECTION_RULE_EDGE } from "../system/_style-section-rule.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/chrome/footer.tsx
@@ -44,6 +50,11 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * docblock says why that is a fact about the published manifest and not only
 * about the markup.
 *
+* Both rules are solid unless a style set says otherwise: `style-footer-rule-style`
+* dashes the rule across the top and the rule over the fine print together,
+* through the slot their borders already read, so a caller's own
+* `className="border-dotted"` still wins. `Band`'s rule does not read it.
+*
 * Static markup — no `"use client"`.
 *
 * @example
@@ -66,14 +77,14 @@ const Footer = React.forwardRef(function Footer({ className, columnClassName, wi
 		ref,
 		"data-slot": "footer",
 		"data-separation": "rule",
-		className: cn(bandClasses("rule"), "border-(--cue-band-rule-color)", className),
+		className: cn(bandClasses("rule"), FOOTER_RULE, FOOTER_RULE_STYLE, "border-(--cue-band-rule-color)", className),
 		...elementProps,
 		children: /* @__PURE__ */ jsxs(Container, {
 			width,
-			className: cn("flex flex-col gap-(--cue-space-6) font-mono text-(length:--cue-text-ui)", columnClassName),
+			className: cn(`flex flex-col gap-(--cue-space-6) ${NAV_VOICE}`, columnClassName),
 			children: [children, meta === void 0 ? null : /* @__PURE__ */ jsx("div", {
 				"data-slot": "footer-meta",
-				className: "flex flex-wrap items-center justify-between gap-(--cue-space-3) border-t border-border pt-(--cue-space-5) font-mono text-(length:--cue-text-label) text-fg-subtle",
+				className: cn(`flex flex-wrap items-center justify-between gap-(--cue-space-3) border-t pt-(--cue-space-5) ${LABEL_SIZE} ${LABEL_INK_SUBTLE}`, SECTION_RULE_EDGE, FOOTER_RULE_STYLE, LABEL_FACE),
 				children: meta
 			})]
 		})

package/dist/chrome/navigation-menu.js

@@ -1,8 +1,11 @@
 "use client";
 import { cn } from "../lib/cn.js";
+import { FOCUS_RING_INSET } from "../system/_focus-ring.js";
+import { CONTROL_FACE } from "../system/_style-control-face.js";
 import { CaretDownGlyph } from "./_glyphs.js";
 import { useCuePortalProps } from "../system/portal.js";
 import { overlayPopupTransitionClasses, overlayPositionerClasses, overlaySurfaceClasses } from "../overlays/_surface.js";
+import { NAV_CARET_INK, NAV_OPEN_GROUND, NAV_TRIGGER_HEIGHT, NAV_TRIGGER_HOVER_INK, NAV_TRIGGER_INK, NAV_TRIGGER_PAD, NAV_TRIGGER_VOICE } from "../system/_style-nav-menu.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { NavigationMenu } from "@base-ui/react/navigation-menu";
@@ -64,11 +67,11 @@ const NavigationMenu$1 = {
 		return /* @__PURE__ */ jsxs(NavigationMenu.Trigger, {
 			ref,
 			"data-slot": "navigation-menu-trigger",
-			className: cn("inline-flex h-control-md cursor-default items-center gap-(--cue-space-2) rounded-(--radius-control) px-(--cue-space-3) font-mono text-(length:--cue-text-ui) whitespace-nowrap text-fg-muted no-underline transition-colors duration-150 outline-none select-none hover:text-fg focus-visible:outline-2 focus-visible:outline-solid focus-visible:-outline-offset-1 focus-visible:outline-accent data-[popup-open]:bg-accent-soft data-[popup-open]:text-fg", className),
+			className: cn(`inline-flex ${NAV_TRIGGER_HEIGHT} cursor-default items-center gap-(--cue-space-2) rounded-control ${NAV_TRIGGER_PAD} ${NAV_TRIGGER_VOICE} whitespace-nowrap ${NAV_TRIGGER_INK} no-underline transition-colors duration-150 outline-none select-none ${NAV_TRIGGER_HOVER_INK} ${FOCUS_RING_INSET} ${NAV_OPEN_GROUND} data-[popup-open]:text-fg`, className),
 			...elementProps,
 			children: [children, caret ? /* @__PURE__ */ jsx(NavigationMenu.Icon, {
 				className: "flex items-center transition-transform duration-150 data-[popup-open]:rotate-180 motion-reduce:transition-none",
-				children: /* @__PURE__ */ jsx(CaretDownGlyph, { className: "size-icon-sm text-fg-subtle" })
+				children: /* @__PURE__ */ jsx(CaretDownGlyph, { className: `size-icon-sm ${NAV_CARET_INK}` })
 			}) : null]
 		});
 	}),
@@ -86,7 +89,7 @@ const NavigationMenu$1 = {
 			"data-slot": "navigation-menu-link",
 			"data-active": active === true ? "" : void 0,
 			"aria-current": active === true ? "page" : void 0,
-			className: cn("flex cursor-pointer flex-col gap-(--cue-space-1) rounded-(--radius-control) px-(--cue-space-3) py-(--cue-space-2) font-mono text-(length:--cue-text-ui) text-fg-muted no-underline transition-colors duration-150 outline-none select-none hover:bg-surface-3 hover:text-fg focus-visible:outline-2 focus-visible:outline-solid focus-visible:-outline-offset-1 focus-visible:outline-accent data-[active]:text-accent", className),
+			className: cn(`flex cursor-pointer flex-col gap-(--cue-space-1) rounded-control px-(--cue-space-3) py-(--cue-space-2) text-(length:--cue-text-ui) text-fg-muted no-underline transition-colors duration-150 outline-none select-none hover:bg-surface-3 hover:text-fg ${FOCUS_RING_INSET} data-[active]:text-accent`, CONTROL_FACE, className),
 			...elementProps,
 			children: [/* @__PURE__ */ jsx("span", { children }), description === void 0 ? null : /* @__PURE__ */ jsx("span", {
 				className: "text-(length:--cue-text-label) leading-(--cue-leading-ui) text-fg-subtle",

package/dist/chrome/page-shell.js

@@ -1,4 +1,7 @@
 import { cn } from "../lib/cn.js";
+import { BODY_VOICE } from "../system/_style-body.js";
+import { LEDE_INK, LEDE_LEADING, LEDE_SIZE, LEDE_TRACKING } from "../system/_style-lede.js";
+import { PAGE_TITLE_VOICE } from "../system/_style-page-title.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/chrome/page-shell.tsx
@@ -48,25 +51,25 @@ const PageShell = React.forwardRef(function PageShell({ className, width = "narr
 		...elementProps,
 		children: [hasHeader ? /* @__PURE__ */ jsxs("header", {
 			"data-slot": "page-shell-header",
-			className: "flex items-start justify-between gap-(--cue-space-4)",
+			className: "flex flex-wrap items-start justify-between gap-(--cue-space-4)",
 			children: [/* @__PURE__ */ jsxs("div", {
-				className: "flex min-w-0 flex-col gap-(--cue-space-2)",
+				className: "flex min-w-[min(100%,20rem)] flex-col gap-(--cue-space-2)",
 				children: [
 					eyebrow,
 					title === void 0 ? null : /* @__PURE__ */ jsx("h1", {
 						"data-slot": "page-shell-title",
-						className: "font-mono text-(length:--cue-text-title) font-medium text-fg",
+						className: PAGE_TITLE_VOICE,
 						children: title
 					}),
 					subtitle === void 0 ? null : /* @__PURE__ */ jsx("p", {
 						"data-slot": "page-shell-subtitle",
-						className: "font-mono text-(length:--cue-text-ui) leading-(--cue-leading-ui) text-fg-muted",
+						className: `${BODY_VOICE} ${LEDE_SIZE} ${LEDE_LEADING} ${LEDE_TRACKING} ${LEDE_INK}`,
 						children: subtitle
 					})
 				]
 			}), actions === void 0 ? null : /* @__PURE__ */ jsx("div", {
 				"data-slot": "page-shell-actions",
-				className: "flex shrink-0 items-center gap-(--cue-space-2)",
+				className: "flex min-w-0 flex-wrap items-center gap-(--cue-space-2)",
 				children: actions
 			})]
 		}) : null, children]

package/dist/chrome/panel.d.ts

@@ -12,8 +12,11 @@ type PanelProps = React.ComponentPropsWithoutRef<"div">;
  * panel's radius, which is what makes a stack of hairline rows read as one
  * object.
  *
- * Deliberately flat: no shadow. In this system only a floating surface (a
- * dialog, a menu, a toast) is allowed one — see `overlays/_surface.ts`.
+ * Deliberately flat: no elevation. In this system only a floating surface (a
+ * dialog, a menu, a toast) is allowed one — see `overlays/_surface.ts`. What a
+ * panel does carry is the paint axis's rim and its resting shade, both in
+ * `RIM_INSET` and both transparent until a pack tints them: a one-stop contact
+ * shade that sets the panel on the page, not a ladder rung that lifts it off.
  *
  * Static markup — no `"use client"`.
  *

package/dist/chrome/panel.js

@@ -1,5 +1,7 @@
 import { cn } from "../lib/cn.js";
+import { PANEL_PAD_X, PANEL_PAD_Y, PANEL_RULE } from "../system/_style-panel.js";
 import { RIM_INSET } from "../system/_paint-rim.js";
+import { TITLE_VOICE } from "../system/_style-title.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/chrome/panel.tsx
@@ -13,8 +15,11 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * panel's radius, which is what makes a stack of hairline rows read as one
 * object.
 *
-* Deliberately flat: no shadow. In this system only a floating surface (a
-* dialog, a menu, a toast) is allowed one — see `overlays/_surface.ts`.
+* Deliberately flat: no elevation. In this system only a floating surface (a
+* dialog, a menu, a toast) is allowed one — see `overlays/_surface.ts`. What a
+* panel does carry is the paint axis's rim and its resting shade, both in
+* `RIM_INSET` and both transparent until a pack tints them: a one-stop contact
+* shade that sets the panel on the page, not a ladder rung that lifts it off.
 *
 * Static markup — no `"use client"`.
 *
@@ -29,7 +34,7 @@ const Panel = React.forwardRef(function Panel({ className, ...elementProps }, re
 	return /* @__PURE__ */ jsx("div", {
 		ref,
 		"data-slot": "panel",
-		className: cn(`overflow-hidden rounded-(--radius-surface) border border-border bg-surface-1 ${RIM_INSET}`, className),
+		className: cn(`overflow-hidden rounded-surface border border-border bg-surface-1 ${RIM_INSET}`, className),
 		...elementProps
 	});
 });
@@ -48,13 +53,13 @@ const PanelHeader = React.forwardRef(function PanelHeader({ className, title, ac
 	return /* @__PURE__ */ jsxs("div", {
 		ref,
 		"data-slot": "panel-header",
-		className: cn("flex items-center justify-between gap-(--cue-space-3) border-b border-border px-(--cue-pad-row-x) py-(--cue-pad-row-y)", className),
+		className: cn(`flex items-center justify-between gap-(--cue-space-3) border-b ${PANEL_RULE} ${PANEL_PAD_X} ${PANEL_PAD_Y}`, className),
 		...elementProps,
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: "flex min-w-0 items-center gap-(--cue-space-3)",
 			children: [title === void 0 ? null : /* @__PURE__ */ jsx("span", {
 				"data-slot": "panel-header-title",
-				className: "truncate font-mono text-(length:--cue-text-emphasis) font-medium text-fg",
+				className: `overflow-x-clip text-ellipsis whitespace-nowrap ${TITLE_VOICE}`,
 				children: title
 			}), children]
 		}), actions === void 0 ? null : /* @__PURE__ */ jsx("div", {

package/dist/chrome/row.js

@@ -1,5 +1,9 @@
 import { cn } from "../lib/cn.js";
+import { FOCUS_RING_INSET_2 } from "../system/_focus-ring.js";
 import { cva } from "../lib/cva.js";
+import { DATA_FACE } from "../system/_style-data-face.js";
+import { ROW_BLOCK_PAD, ROW_INK, ROW_RULE_STYLE } from "../system/_style-row.js";
+import { SEAM_INK, SEAM_RIM } from "../system/_style-seam.js";
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/chrome/row.tsx
@@ -18,14 +22,14 @@ import { jsx } from "react/jsx-runtime";
 * @example
 * <li className={rowVariants({ interactive: true })} />
 */
-const rowVariants = cva("flex w-full items-center gap-(--cue-space-3) px-(--cue-pad-row-x) py-(--cue-pad-row-y) font-mono text-(length:--cue-text-ui) text-fg", {
+const rowVariants = cva(`flex w-full items-center gap-(--cue-space-3) px-(--cue-pad-row-x) ${DATA_FACE} text-(length:--cue-text-ui) ${ROW_INK}`, {
 	variants: {
 		seam: {
-			true: "bg-bg",
-			false: "border-t border-border first:border-t-0 [[data-slot=panel-header]+&]:border-t-0"
+			true: "bg-bg py-(--cue-pad-row-y)",
+			false: `border-t border-border first:border-t-0 [[data-slot=panel-header]+&]:border-t-0 ${ROW_RULE_STYLE} ${ROW_BLOCK_PAD}`
 		},
 		interactive: {
-			true: "cursor-pointer text-left 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 disabled:pointer-events-none disabled:opacity-40",
+			true: `cursor-pointer text-left transition-colors duration-150 outline-none hover:bg-surface-2 ${FOCUS_RING_INSET_2} disabled:pointer-events-none disabled:opacity-40`,
 			false: ""
 		}
 	},
@@ -98,7 +102,7 @@ const SeamList = React.forwardRef(function SeamList({ className, ...elementProps
 	return /* @__PURE__ */ jsx("div", {
 		ref,
 		"data-slot": "seam-list",
-		className: cn("flex flex-col gap-px overflow-hidden rounded-(--radius-surface) border border-border bg-border", className),
+		className: cn(`flex flex-col gap-px overflow-hidden rounded-surface border ${SEAM_RIM} ${SEAM_INK}`, className),
 		...elementProps
 	});
 });

package/dist/chrome/scroll-area.js

@@ -1,5 +1,7 @@
 "use client";
 import { cn } from "../lib/cn.js";
+import { FOCUS_RING_INSET_2 } from "../system/_focus-ring.js";
+import { SCROLLBAR_SIZE_H, SCROLLBAR_SIZE_V, SCROLLBAR_THUMB } from "../system/_style-scrollbar.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ScrollArea } from "@base-ui/react/scroll-area";
@@ -10,7 +12,7 @@ import { ScrollArea } from "@base-ui/react/scroll-area";
 * A console packs panels edge to edge, and a permanent 12px trough on every one
 * of them is 12px of chrome per panel that says nothing.
 */
-const SCROLLBAR_CLASSES = "flex touch-none justify-center rounded-full opacity-0 transition-opacity delay-300 duration-150 select-none data-[hovering]:opacity-100 data-[hovering]:delay-0 data-[scrolling]:opacity-100 data-[scrolling]:delay-0 motion-reduce:transition-none data-[orientation=horizontal]:h-(--cue-space-3) data-[orientation=horizontal]:flex-col data-[orientation=vertical]:w-(--cue-space-3)";
+const SCROLLBAR_CLASSES = `flex touch-none justify-center rounded-full opacity-0 transition-opacity delay-300 duration-150 select-none data-[hovering]:opacity-100 data-[hovering]:delay-0 data-[scrolling]:opacity-100 data-[scrolling]:delay-0 motion-reduce:transition-none ${SCROLLBAR_SIZE_H} data-[orientation=horizontal]:flex-col ${SCROLLBAR_SIZE_V}`;
 /**
 * A scrolling region with the system's own scrollbar instead of the platform's.
 *
@@ -36,7 +38,7 @@ const ScrollArea$1 = React.forwardRef(function ScrollArea$2({ className, viewpor
 			/* @__PURE__ */ jsx(ScrollArea.Viewport, {
 				ref: viewportRef,
 				"data-slot": "scroll-area-viewport",
-				className: cn("size-full overscroll-contain outline-none focus-visible:outline-2 focus-visible:outline-solid focus-visible:-outline-offset-2 focus-visible:outline-accent", viewportClassName),
+				className: cn(`size-full overscroll-contain outline-none ${FOCUS_RING_INSET_2}`, viewportClassName),
 				children: /* @__PURE__ */ jsx(ScrollArea.Content, {
 					"data-slot": "scroll-area-content",
 					children
@@ -49,7 +51,7 @@ const ScrollArea$1 = React.forwardRef(function ScrollArea$2({ className, viewpor
 				className: SCROLLBAR_CLASSES,
 				children: /* @__PURE__ */ jsx(ScrollArea.Thumb, {
 					"data-slot": "scroll-area-thumb",
-					className: "w-full rounded-full bg-border-strong"
+					className: `w-full rounded-full ${SCROLLBAR_THUMB}`
 				})
 			}) : null,
 			horizontal ? /* @__PURE__ */ jsx(ScrollArea.Scrollbar, {
@@ -59,7 +61,7 @@ const ScrollArea$1 = React.forwardRef(function ScrollArea$2({ className, viewpor
 				className: SCROLLBAR_CLASSES,
 				children: /* @__PURE__ */ jsx(ScrollArea.Thumb, {
 					"data-slot": "scroll-area-thumb",
-					className: "h-full rounded-full bg-border-strong"
+					className: `h-full rounded-full ${SCROLLBAR_THUMB}`
 				})
 			}) : null,
 			vertical && horizontal ? /* @__PURE__ */ jsx(ScrollArea.Corner, { "data-slot": "scroll-area-corner" }) : null

package/dist/chrome/section-header.js

@@ -1,6 +1,15 @@
 "use client";
 import { cn } from "../lib/cn.js";
+import { FOCUS_RING_OFFSET_2 } from "../system/_focus-ring.js";
+import { LABEL_INK } 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 { ChevronRightGlyph } from "./_glyphs.js";
+import { LABEL_SIZE } from "../system/_style-label-size.js";
+import { SECTION_RULE_FILL } from "../system/_style-section-rule.js";
+import { DATA_FACE } from "../system/_style-data-face.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/chrome/section-header.tsx
@@ -35,18 +44,18 @@ const SectionHeader = React.forwardRef(function SectionHeader({ className, label
 		}) : null,
 		/* @__PURE__ */ jsx("span", {
 			"data-slot": "section-header-label",
-			className: "shrink-0 font-mono text-(length:--cue-text-label) tracking-(--cue-tracking-caps) text-fg-muted uppercase",
+			className: cn("shrink-0", LABEL_SIZE, LABEL_INK, LABEL_WEIGHT, LABEL_FACE, LABEL_TRACKING, LABEL_CASE),
 			children: label
 		}),
 		count === void 0 ? null : /* @__PURE__ */ jsx("span", {
 			"data-slot": "section-header-count",
-			className: "shrink-0 font-mono text-(length:--cue-text-label) tabular-nums text-fg-subtle",
+			className: `shrink-0 ${DATA_FACE} text-(length:--cue-text-label) tabular-nums text-fg-subtle`,
 			children: count
 		}),
 		/* @__PURE__ */ jsx("span", {
 			"data-slot": "section-header-rule",
 			"aria-hidden": "true",
-			className: "h-px min-w-(--cue-space-4) flex-1 bg-border"
+			className: cn("h-px min-w-(--cue-space-4) flex-1", SECTION_RULE_FILL)
 		})
 	] });
 	const headClasses = "flex min-w-0 flex-1 items-center gap-(--cue-space-3)";
@@ -62,7 +71,7 @@ const SectionHeader = React.forwardRef(function SectionHeader({ className, label
 				"aria-expanded": open,
 				onClick: toggle,
 				"data-slot": "section-header-toggle",
-				className: cn(headClasses, "cursor-pointer text-left outline-none hover:text-fg focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-2 focus-visible:outline-accent"),
+				className: cn(headClasses, `cursor-pointer text-left outline-none hover:text-fg ${FOCUS_RING_OFFSET_2}`),
 				children: headContent
 			}) : /* @__PURE__ */ jsx("div", {
 				className: headClasses,

package/dist/chrome/segmented-control.js

@@ -1,7 +1,12 @@
 "use client";
 import { cn } from "../lib/cn.js";
+import { FOCUS_RING_INSET } from "../system/_focus-ring.js";
+import { CONTROL_FACE } from "../system/_style-control-face.js";
 import { useComposedRefs } from "../lib/compose.js";
 import { EDGE_SCROLLER_CLASSES, EdgeChevrons, useEdgeScroll } from "./_edge-scroller.js";
+import { SEGMENT_PAD } from "../system/_style-segment-pad.js";
+import { SEGMENT_IDLE_INK } from "../system/_style-segment.js";
+import { SEGMENTED_CHEVRON_GROUND, SEGMENTED_RIM, SEGMENTED_TRACK, SEGMENT_PRESSED, SEGMENT_RADIUS } from "../system/_style-segmented-control.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Toggle } from "@base-ui/react/toggle";
@@ -9,7 +14,7 @@ import { ToggleGroup } from "@base-ui/react/toggle-group";
 //#region src/chrome/segmented-control.tsx
 const ITEM_SIZES = {
 	sm: "h-control-sm px-(--cue-space-3) text-(length:--cue-text-label)",
-	md: "h-control-md px-(--cue-space-4) text-(length:--cue-text-ui)",
+	md: `h-control-md ${SEGMENT_PAD} text-(length:--cue-text-ui)`,
 	lg: "h-control-lg px-(--cue-space-5) text-(length:--cue-text-body)"
 };
 /**
@@ -17,8 +22,13 @@ const ITEM_SIZES = {
 * solid accent fill. A solid bar inside a small control reads as a second,
 * louder button and drowns the labels around it (the luma defect ruling); the
 * soft tint says "this one" at exactly the volume a view switcher deserves.
+*
+* That is the default. A style set may draw the choice as a raised pill on a
+* filled track instead — its ground, ink, edge, weight and resting shade, the
+* track and its inset — through the segment names: `_style-segmented-control.ts`
+* for the pressed segment, and `_style-segment.ts` for the half `Tabs` shares.
 */
-const ITEM_CLASSES = "inline-flex shrink-0 cursor-pointer select-none items-center justify-center gap-(--cue-space-2) whitespace-nowrap rounded-(--radius-control) font-mono text-fg-muted transition-colors duration-150 outline-none hover:text-fg data-[pressed]:bg-accent-soft data-[pressed]:text-accent focus-visible:outline-2 focus-visible:outline-solid focus-visible:-outline-offset-1 focus-visible:outline-accent disabled:pointer-events-none disabled:opacity-40 data-[disabled]:pointer-events-none data-[disabled]:opacity-40";
+const ITEM_CLASSES = `inline-flex shrink-0 cursor-pointer select-none items-center justify-center gap-(--cue-space-2) whitespace-nowrap ${SEGMENT_RADIUS} ${CONTROL_FACE} ${SEGMENT_IDLE_INK} transition-colors duration-150 outline-none hover:text-fg ${SEGMENT_PRESSED} ${FOCUS_RING_INSET} disabled:pointer-events-none disabled:opacity-40 data-[disabled]:pointer-events-none data-[disabled]:opacity-40`;
 /**
 * A one-of-N switch drawn as a row of segments: the console's view picker.
 *
@@ -57,7 +67,7 @@ const SegmentedControl = React.forwardRef(function SegmentedControl({ items, val
 	const iconSize = size === "sm" ? "size-icon-sm" : "size-icon-md";
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "segmented-control-frame",
-		className: cn("relative inline-flex max-w-full min-w-0 shrink-0 items-center rounded-(--radius-control) border border-border bg-surface-1 p-(--cue-space-1)", className),
+		className: cn(`relative inline-flex max-w-full min-w-0 shrink-0 items-center rounded-control border ${SEGMENTED_RIM} ${SEGMENTED_TRACK}`, className),
 		children: [/* @__PURE__ */ jsx(ToggleGroup, {
 			ref: groupRef,
 			value: value === void 0 ? [] : [value],
@@ -87,7 +97,7 @@ const SegmentedControl = React.forwardRef(function SegmentedControl({ items, val
 			onNudge: scroll.nudge,
 			previousLabel,
 			nextLabel,
-			className: "rounded-(--radius-control) bg-surface-1"
+			className: `rounded-control ${SEGMENTED_CHEVRON_GROUND}`
 		})]
 	});
 });

package/dist/chrome/status-bar.js

@@ -1,4 +1,5 @@
 import { cn } from "../lib/cn.js";
+import { LABEL_FACE } from "../system/_style-label-face.js";
 import { STATUS_BAR_GROUP_CLASSES, statusBarItemClasses } from "./_status-bar.js";
 import { StatusBarInteractiveItem } from "./_status-bar-item.js";
 import * as React from "react";
@@ -8,7 +9,7 @@ const StatusBarRoot = React.forwardRef(function StatusBar({ className, ...elemen
 	return /* @__PURE__ */ jsx("div", {
 		ref,
 		"data-slot": "status-bar",
-		className: cn("flex h-(--cue-chrome-statusbar) w-full shrink-0 items-center gap-(--cue-space-4) overflow-x-clip border-t border-border bg-surface-1 px-(--cue-pad-row-x) font-mono text-(length:--cue-text-label) text-fg-subtle", className),
+		className: cn("flex h-(--cue-chrome-statusbar) w-full shrink-0 items-center gap-(--cue-space-4) overflow-x-clip border-t border-border bg-surface-1 px-(--cue-pad-row-x) text-(length:--cue-text-label) text-fg-subtle", LABEL_FACE, className),
 		...elementProps
 	});
 });

package/dist/chrome/tabs.js

@@ -1,6 +1,13 @@
 "use client";
 import { cn } from "../lib/cn.js";
+import { FOCUS_RING_INSET_2, FOCUS_RING_OFFSET_2 } from "../system/_focus-ring.js";
+import { CONTROL_FACE } from "../system/_style-control-face.js";
 import { EDGE_SCROLLER_CLASSES, EdgeChevrons, useEdgeScroll } from "./_edge-scroller.js";
+import { SEGMENT_PAD } from "../system/_style-segment-pad.js";
+import { SEGMENT_IDLE_INK } from "../system/_style-segment.js";
+import { TAB_HOVER_INK } from "../system/_style-tab-hover.js";
+import { GROUP_GAP } from "../system/_style-group-gap.js";
+import { TAB_ACTIVE, TAB_RULE, TAB_SHAPE, TAB_TRACK, TAB_UNDERLINE } from "../system/_style-tab.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Tabs } from "@base-ui/react/tabs";
@@ -25,7 +32,7 @@ const TabsList = React.forwardRef(function TabsList({ className, ...elementProps
 	return /* @__PURE__ */ jsx(Tabs.List, {
 		ref,
 		"data-slot": "tabs-list",
-		className: cn("relative flex items-center gap-(--cue-space-1) border-b border-border data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch data-[orientation=vertical]:border-b-0 data-[orientation=vertical]:border-r", className),
+		className: cn(`relative flex items-center ${GROUP_GAP} ${TAB_RULE} border-border ${TAB_TRACK} data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch data-[orientation=vertical]:border-b-0 data-[orientation=vertical]:border-r`, className),
 		...elementProps
 	});
 });
@@ -33,12 +40,16 @@ const TabsList = React.forwardRef(function TabsList({ className, ...elementProps
 * One tab. Selected state is an accent underline sitting on the list's rule —
 * never a filled pill, which at console density turns a row of four tabs into a
 * row of four buttons and loses the "one surface, several views" reading.
+*
+* That is the default. A Look that draws its tabs as a segmented track says so
+* through the style set's segment names, and takes the rule and the underline
+* away with `style-tab-rule` and `style-tab-underline`.
 */
 const TabsTab = React.forwardRef(function TabsTab({ className, ...elementProps }, ref) {
 	return /* @__PURE__ */ jsx(Tabs.Tab, {
 		ref,
 		"data-slot": "tabs-tab",
-		className: cn("relative inline-flex h-control-md shrink-0 cursor-pointer items-center justify-center gap-(--cue-space-2) rounded-t-(--radius-control) px-(--cue-space-4) font-mono text-(length:--cue-text-ui) whitespace-nowrap 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-[disabled]:pointer-events-none data-[disabled]:opacity-40", "after:absolute after:inset-x-0 after:-bottom-px after:h-px after:bg-transparent after:content-['']", "data-[active]:text-accent data-[active]:after:bg-accent", className),
+		className: cn(`relative inline-flex h-control-md shrink-0 cursor-pointer items-center justify-center gap-(--cue-space-2) ${TAB_SHAPE} ${SEGMENT_PAD} text-(length:--cue-text-ui) whitespace-nowrap ${SEGMENT_IDLE_INK} transition-colors duration-150 outline-none select-none`, CONTROL_FACE, `${TAB_HOVER_INK} ${FOCUS_RING_INSET_2}`, "data-[disabled]:pointer-events-none data-[disabled]:opacity-40", "after:absolute after:inset-x-0 after:-bottom-px after:h-px after:bg-transparent after:content-['']", `${TAB_ACTIVE} ${TAB_UNDERLINE}`, className),
 		...elementProps
 	});
 });
@@ -47,7 +58,7 @@ const TabsPanel = React.forwardRef(function TabsPanel({ className, ...elementPro
 	return /* @__PURE__ */ jsx(Tabs.Panel, {
 		ref,
 		"data-slot": "tabs-panel",
-		className: cn("min-w-0 outline-none focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-2 focus-visible:outline-accent", className),
+		className: cn(`min-w-0 outline-none ${FOCUS_RING_OFFSET_2}`, className),
 		...elementProps
 	});
 });

package/dist/chrome/toolbar.js

@@ -1,7 +1,10 @@
 "use client";
 import { cn } from "../lib/cn.js";
+import { FOCUS_RING_INSET } from "../system/_focus-ring.js";
+import { GHOST_INK } from "../system/_style-control.js";
 import { useComposedRefs } from "../lib/compose.js";
 import { EDGE_SCROLLER_CLASSES, EdgeChevrons, useEdgeScroll } from "./_edge-scroller.js";
+import { TOOLBAR_FRAME, TOOLBAR_SEPARATOR_HEIGHT } from "../system/_style-toolbar.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Toolbar } from "@base-ui/react/toolbar";
@@ -30,7 +33,7 @@ const Toolbar$1 = {
 		const bar = /* @__PURE__ */ jsx(Toolbar.Root, {
 			ref: barRef,
 			"data-slot": "toolbar",
-			className: cn("flex h-(--cue-chrome-toolbar) w-full shrink-0 items-center gap-(--cue-space-2) border-b border-border bg-surface-1 px-(--cue-pad-row-x) data-[orientation=vertical]:h-auto data-[orientation=vertical]:w-(--cue-chrome-toolbar) data-[orientation=vertical]:flex-col data-[orientation=vertical]:border-r data-[orientation=vertical]:border-b-0", scrolls ? EDGE_SCROLLER_CLASSES : null, className),
+			className: cn(`flex w-full shrink-0 items-center border-b ${TOOLBAR_FRAME} bg-surface-1 data-[orientation=vertical]:h-auto data-[orientation=vertical]:w-(--cue-chrome-toolbar) data-[orientation=vertical]:flex-col data-[orientation=vertical]:border-r data-[orientation=vertical]:border-b-0`, scrolls ? EDGE_SCROLLER_CLASSES : null, className),
 			...elementProps,
 			style: {
 				...elementProps.style,
@@ -54,7 +57,7 @@ const Toolbar$1 = {
 		return /* @__PURE__ */ jsxs(Toolbar.Button, {
 			ref,
 			"data-slot": "toolbar-button",
-			className: cn("inline-flex h-control-md shrink-0 cursor-pointer items-center justify-center gap-(--cue-space-2) rounded-(--radius-control) px-(--cue-space-3) font-mono text-(length:--cue-text-ui) whitespace-nowrap 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 data-[disabled]:pointer-events-none data-[disabled]:opacity-40", className),
+			className: cn(`inline-flex h-control-md shrink-0 cursor-pointer items-center justify-center gap-(--cue-space-2) rounded-control px-(--cue-space-3) font-mono text-(length:--cue-text-ui) whitespace-nowrap ${GHOST_INK} transition-colors duration-150 outline-none select-none hover:bg-surface-2 hover:text-fg ${FOCUS_RING_INSET} data-[disabled]:pointer-events-none data-[disabled]:opacity-40`, className),
 			...elementProps,
 			children: [Icon === void 0 ? null : /* @__PURE__ */ jsx(Icon, {
 				"aria-hidden": "true",
@@ -74,7 +77,7 @@ const Toolbar$1 = {
 		return /* @__PURE__ */ jsx(Toolbar.Separator, {
 			ref,
 			"data-slot": "toolbar-separator",
-			className: cn("shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:mx-(--cue-space-1) data-[orientation=vertical]:h-[60%] data-[orientation=vertical]:w-px", className),
+			className: cn(`shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:mx-(--cue-space-1) ${TOOLBAR_SEPARATOR_HEIGHT} data-[orientation=vertical]:w-px`, className),
 			...elementProps
 		});
 	})

package/dist/chrome/tree.js

@@ -1,5 +1,6 @@
 "use client";
 import { cn } from "../lib/cn.js";
+import { FOCUS_RING, FOCUS_RING_INSET } from "../system/_focus-ring.js";
 import { TREE_GUIDE_GLYPHS, flattenTree } from "./_tree.js";
 import { ChevronRightGlyph, EyeGlyph, EyeOffGlyph, GhostGlyph } from "./_glyphs.js";
 import * as React from "react";
@@ -145,7 +146,7 @@ const Tree = React.forwardRef(function Tree({ className, items, expanded: expand
 				"data-disabled": item.disabled === true ? "" : void 0,
 				onFocus: () => setActiveId(item.id),
 				onClick: () => select(row),
-				className: "group/tree-row flex h-control-sm cursor-default items-center gap-(--cue-space-1) rounded-(--radius-control) pr-(--cue-space-2) font-mono text-(length:--cue-text-ui) whitespace-nowrap text-fg-muted 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 data-[selected]:bg-accent-soft data-[selected]:text-accent data-[disabled]:pointer-events-none data-[disabled]:opacity-40",
+				className: `group/tree-row flex h-control-sm cursor-default items-center gap-(--cue-space-1) rounded-control pr-(--cue-space-2) font-mono text-(length:--cue-text-ui) whitespace-nowrap text-fg-muted outline-none select-none hover:bg-surface-2 hover:text-fg ${FOCUS_RING_INSET} data-[selected]:bg-accent-soft data-[selected]:text-accent data-[disabled]:pointer-events-none data-[disabled]:opacity-40`,
 				children: [
 					guides ? row.guides.map((guide, depth) => /* @__PURE__ */ jsx("span", {
 						"aria-hidden": "true",
@@ -239,7 +240,7 @@ const TreeVisibilityToggle = React.forwardRef(function TreeVisibilityToggle({ cl
 			if (event.defaultPrevented) return;
 			onValueChange(NEXT_VISIBILITY[value]);
 		},
-		className: cn("flex size-icon-md shrink-0 cursor-pointer items-center justify-center rounded-(--radius-control) border-0 bg-transparent p-0 outline-none transition-colors duration-150 hover:text-fg focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-1 focus-visible:outline-accent motion-reduce:transition-none data-[state=visible]:text-fg-subtle data-[state=ghost]:text-info data-[state=hidden]:text-warn", className),
+		className: cn(`flex size-icon-md shrink-0 cursor-pointer items-center justify-center rounded-control border-0 bg-transparent p-0 outline-none transition-colors duration-150 hover:text-fg ${FOCUS_RING} motion-reduce:transition-none data-[state=visible]:text-fg-subtle data-[state=ghost]:text-info data-[state=hidden]:text-warn`, className),
 		...elementProps,
 		children: /* @__PURE__ */ jsx(Glyph, { className: "size-icon-sm" })
 	});

package/dist/color/_thumb.js

@@ -1,15 +1,21 @@
+import { FOCUS_RING_DATA_OFFSET_2 } from "../system/_focus-ring.js";
 //#region src/color/_thumb.ts
 /**
 * The draggable puck shared by the colour area and every colour rail.
 *
-* The one place in this system where a ring is not a token colour: the thumb
+* The one place in this system where the RIM is not a token colour: the thumb
 * sits on top of arbitrary user colour, so it needs a light rim *and* a dark
 * halo to stay visible against both ends of the spectrum. `--cue-fg` /
 * `--cue-bg` supply the pair, which keeps it theme-driven without pretending a
-* single token could do the job.
+* single token could do the job. The keyboard ring is a different question —
+* it is an indicator, not decoration — and reads `--cue-focus` like every
+* other ring in this system (spec 2026-09-26-looks-fidelity §3.12, F-9): three
+* shipped presets (hivehub, luma, venu, all light) fail WCAG 1.4.11 with the
+* un-gated accent here, since the puck is exactly the small, thin indicator
+* that clause guards.
 *
 * @internal Not part of the public API.
 */
-const colorThumbClasses = "size-[0.875rem] rounded-full border-2 border-fg shadow-[0_0_0_1px_var(--cue-bg)] outline-none data-[focus-visible]:outline-2 data-[focus-visible]:outline-solid data-[focus-visible]:outline-offset-2 data-[focus-visible]:outline-accent data-[dragging]:scale-110 data-[disabled]:opacity-40";
+const colorThumbClasses = `size-[0.875rem] rounded-full border-2 border-fg shadow-[0_0_0_1px_var(--cue-bg)] outline-none ${FOCUS_RING_DATA_OFFSET_2} data-[dragging]:scale-110 data-[disabled]:opacity-40`;
 //#endregion
 export { colorThumbClasses };

package/dist/color/color-area.js

@@ -26,7 +26,7 @@ import { ColorArea, ColorThumb } from "react-aria-components";
 function ColorArea$1({ className, thumbClassName, value, defaultValue, ...areaProps }) {
 	return /* @__PURE__ */ jsx(ColorArea, {
 		"data-slot": "color-area",
-		className: ariaClassName("relative h-[9rem] w-full touch-none rounded-(--radius-control) border border-border outline-none data-[disabled]:opacity-40", className),
+		className: ariaClassName("relative h-[9rem] w-full touch-none rounded-control border border-border outline-none data-[disabled]:opacity-40", className),
 		value: toAriaColor(value),
 		defaultValue: toAriaColor(defaultValue),
 		...areaProps,

package/dist/color/color-swatch.js

@@ -32,7 +32,7 @@ const SWATCH_SIZES = {
 function ColorSwatch$1({ size = "md", className, color, ...swatchProps }) {
 	return /* @__PURE__ */ jsx("span", {
 		"data-slot": "color-swatch",
-		className: cn("relative inline-block shrink-0 overflow-hidden rounded-(--radius-control) border border-border", SWATCH_SIZES[size], checkerClasses, className),
+		className: cn("relative inline-block shrink-0 overflow-hidden rounded-control border border-border", SWATCH_SIZES[size], checkerClasses, className),
 		children: /* @__PURE__ */ jsx(ColorSwatch, {
 			color: toAriaColor(color),
 			className: "block size-full",