@cueplusplus/ui 0.18.2 → 0.19.0

package/dist/layout/sidebar.js

@@ -51,6 +51,91 @@ const LANDMARK_ELEMENTS = {
 	complementary: "aside"
 };
 /**
+* The navigation column: a `<nav>` on a hairline, with a collapse valve and a
+* scroller of its own.
+*
+* Width is an inline length rather than a class, because it is the one piece of
+* console geometry a user is expected to change and persist; the transition
+* between the two widths is CSS and switches off under `prefers-reduced-motion`.
+*
+* **The column scrolls, the rail does not.** Thirty rows of navigation is an
+* ordinary amount for a documentation site or a settings screen, and a column
+* that cannot scroll simply loses the last of them off the bottom of the frame.
+* So the sections go in an inner scroller and the root keeps the height — which
+* is also what saves {@link SidebarRail}: it is `absolute inset-y-0`, its
+* containing block is the root rather than the scroller, and an absolutely
+* positioned box whose containing block is outside a scroll container neither
+* scrolls with it nor is clipped by it. Put the scroller on the root instead
+* and the collapse rail slides away with the third screenful.
+*
+* @example
+* <Sidebar.Root aria-label="Main">
+*   <Sidebar.Section label="Console">
+*     <Sidebar.Item icon={Sliders} active>Patch</Sidebar.Item>
+*     <Sidebar.Item icon={List}>Cues</Sidebar.Item>
+*   </Sidebar.Section>
+*   <Sidebar.Rail />
+* </Sidebar.Root>
+*/
+const SidebarRoot = React.forwardRef(function SidebarRoot({ className, landmark = "navigation", collapsed: collapsedProp, defaultCollapsed = false, onCollapsedChange, width = "14rem", collapsedWidth = "3rem", style, children, ...elementProps }, ref) {
+	const Element = LANDMARK_ELEMENTS[landmark];
+	const [uncontrolled, setUncontrolled] = React.useState(defaultCollapsed);
+	const collapsed = collapsedProp ?? uncontrolled;
+	const toggle = React.useCallback(() => {
+		const next = !(collapsedProp ?? uncontrolled);
+		if (collapsedProp === void 0) setUncontrolled(next);
+		onCollapsedChange?.(next);
+	}, [
+		collapsedProp,
+		uncontrolled,
+		onCollapsedChange
+	]);
+	const context = React.useMemo(() => ({
+		collapsed,
+		toggle
+	}), [collapsed, toggle]);
+	return /* @__PURE__ */ jsx(SidebarContext.Provider, {
+		value: context,
+		children: /* @__PURE__ */ jsx(Element, {
+			ref,
+			"data-slot": "sidebar",
+			"data-collapsed": collapsed ? "" : void 0,
+			className: cn("group/sidebar relative flex h-full min-h-0 shrink-0 flex-col border-r border-border bg-surface-1 transition-[width] duration-150 ease-out motion-reduce:transition-none", "[counter-reset:cue-rail]", className),
+			style: {
+				width: collapsed ? collapsedWidth : width,
+				...style
+			},
+			...elementProps,
+			children: /* @__PURE__ */ jsx("div", {
+				"data-slot": "sidebar-scroller",
+				className: "flex min-h-0 flex-1 flex-col gap-(--cue-space-4) overflow-y-auto py-(--cue-space-4)",
+				children
+			})
+		})
+	});
+});
+/** One group of items, under an optional caption. */
+const SidebarSection = React.forwardRef(function SidebarSection({ className, label, children, ...elementProps }, ref) {
+	const { collapsed } = useSidebar();
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		"data-slot": "sidebar-section",
+		className: cn("flex flex-col gap-(--cue-space-1) px-(--cue-space-2)", className),
+		...elementProps,
+		children: [label === void 0 || collapsed ? null : /* @__PURE__ */ jsx("div", {
+			"data-slot": "sidebar-section-label",
+			className: cn("flex h-control-sm items-center px-(--cue-space-2)", LABEL_SIZE, LABEL_INK_SUBTLE, LABEL_WEIGHT, LABEL_FACE, LABEL_TRACKING, LABEL_CASE),
+			children: label
+		}), children]
+	});
+});
+/**
+* A style set's numbered rail (structural Looks, spec 2026-10-02 §3.5): every item
+* counts, and draws its number before the icon only when the set derives
+* `style-rail-counter-content` — `none` unset, which generates no box at all.
+*/
+const RAIL_COUNTER = "[counter-increment:cue-rail] before:content-[var(--cue-style-rail-counter-content,none)] before:shrink-0 before:font-mono before:text-(length:--cue-text-label) before:text-fg-subtle";
+/**
 * The console's navigation column: sections of items, a scroller of its own,
 * and a rail that collapses the whole thing to icons.
 *
@@ -63,57 +148,8 @@ const LANDMARK_ELEMENTS = {
 * </Sidebar.Root>
 */
 const Sidebar = {
-	Root: React.forwardRef(function SidebarRoot({ className, landmark = "navigation", collapsed: collapsedProp, defaultCollapsed = false, onCollapsedChange, width = "14rem", collapsedWidth = "3rem", style, children, ...elementProps }, ref) {
-		const Element = LANDMARK_ELEMENTS[landmark];
-		const [uncontrolled, setUncontrolled] = React.useState(defaultCollapsed);
-		const collapsed = collapsedProp ?? uncontrolled;
-		const toggle = React.useCallback(() => {
-			const next = !(collapsedProp ?? uncontrolled);
-			if (collapsedProp === void 0) setUncontrolled(next);
-			onCollapsedChange?.(next);
-		}, [
-			collapsedProp,
-			uncontrolled,
-			onCollapsedChange
-		]);
-		const context = React.useMemo(() => ({
-			collapsed,
-			toggle
-		}), [collapsed, toggle]);
-		return /* @__PURE__ */ jsx(SidebarContext.Provider, {
-			value: context,
-			children: /* @__PURE__ */ jsx(Element, {
-				ref,
-				"data-slot": "sidebar",
-				"data-collapsed": collapsed ? "" : void 0,
-				className: cn("group/sidebar relative flex h-full min-h-0 shrink-0 flex-col border-r border-border bg-surface-1 transition-[width] duration-150 ease-out motion-reduce:transition-none", className),
-				style: {
-					width: collapsed ? collapsedWidth : width,
-					...style
-				},
-				...elementProps,
-				children: /* @__PURE__ */ jsx("div", {
-					"data-slot": "sidebar-scroller",
-					className: "flex min-h-0 flex-1 flex-col gap-(--cue-space-4) overflow-y-auto py-(--cue-space-4)",
-					children
-				})
-			})
-		});
-	}),
-	Section: React.forwardRef(function SidebarSection({ className, label, children, ...elementProps }, ref) {
-		const { collapsed } = useSidebar();
-		return /* @__PURE__ */ jsxs("div", {
-			ref,
-			"data-slot": "sidebar-section",
-			className: cn("flex flex-col gap-(--cue-space-1) px-(--cue-space-2)", className),
-			...elementProps,
-			children: [label === void 0 || collapsed ? null : /* @__PURE__ */ jsx("div", {
-				"data-slot": "sidebar-section-label",
-				className: cn("flex h-control-sm items-center px-(--cue-space-2)", LABEL_SIZE, LABEL_INK_SUBTLE, LABEL_WEIGHT, LABEL_FACE, LABEL_TRACKING, LABEL_CASE),
-				children: label
-			}), children]
-		});
-	}),
+	Root: SidebarRoot,
+	Section: SidebarSection,
 	Item: React.forwardRef(function SidebarItem({ className, icon: Icon, active = false, badge, render, type, children, ...elementProps }, ref) {
 		return useRender({
 			render,
@@ -125,7 +161,7 @@ const Sidebar = {
 				"data-slot": "sidebar-item",
 				"data-active": active ? "" : void 0,
 				"aria-current": active ? "page" : void 0,
-				className: cn(`relative flex h-control-md w-full cursor-pointer items-center gap-(--cue-space-3) rounded-control border-0 bg-transparent px-(--cue-space-3) text-left font-mono text-(length:--cue-text-ui) no-underline transition-colors duration-150 outline-none select-none hover:bg-surface-2 hover:text-fg ${FOCUS_RING_INSET} ${NAV_ITEM} disabled:pointer-events-none disabled:opacity-40`, className),
+				className: cn(`relative flex h-control-md w-full cursor-pointer items-center gap-(--cue-space-3) rounded-control border-0 bg-transparent px-(--cue-space-3) text-left font-mono text-(length:--cue-text-ui) no-underline transition-colors duration-150 outline-none select-none hover:bg-surface-2 hover:text-fg ${FOCUS_RING_INSET} ${NAV_ITEM} ${RAIL_COUNTER} disabled:pointer-events-none disabled:opacity-40`, className),
 				children: /* @__PURE__ */ jsxs(Fragment, { children: [
 					Icon === void 0 ? null : /* @__PURE__ */ jsx(Icon, {
 						"aria-hidden": "true",

package/dist/overlays/_surface.d.ts

@@ -117,9 +117,9 @@ declare const overlayFooterClasses = "flex items-center justify-end gap-(--cue-s
  * and the highlight are the style set's, with those as their defaults
  * (`_style-menu.ts`).
  */
-declare const menuItemClasses = "flex h-control-sm cursor-default items-center gap-(--cue-space-2) rounded-[var(--cue-style-menu-item-radius,calc(var(--cue-radius-control)*var(--cue-radius-scale)))] px-(--cue-space-3) font-[family-name:var(--cue-style-control-face,var(--cue-font-mono))] text-(length:--cue-text-ui) text-[color:var(--cue-style-quiet-ink,var(--cue-fg-muted))] data-[highlighted]:bg-[color:var(--cue-style-menu-highlight,var(--cue-accent-soft))] outline-none select-none data-[highlighted]:text-fg data-[disabled]:pointer-events-none data-[disabled]:opacity-[var(--cue-style-row-disabled-opacity,0.4)]";
+declare const menuItemClasses = "flex h-control-sm cursor-default items-center gap-(--cue-space-2) rounded-[var(--cue-style-menu-item-radius,calc(var(--cue-style-control-radius,var(--cue-radius-control))*var(--cue-radius-scale)))] px-(--cue-space-3) font-[family-name:var(--cue-style-control-face,var(--cue-font-mono))] text-(length:--cue-text-ui) text-[color:var(--cue-style-quiet-ink,var(--cue-fg-muted))] data-[highlighted]:bg-[color:var(--cue-style-menu-highlight,var(--cue-accent-soft))] outline-none select-none data-[highlighted]:text-fg data-[disabled]:pointer-events-none data-[disabled]:opacity-[var(--cue-style-row-disabled-opacity,0.4)]";
 /** The uppercase mono caption over a group of menu rows — by default. */
-declare const menuLabelClasses = "flex h-control-sm items-center px-(--cue-space-3) py-[var(--cue-style-group-label-pad,0px)] font-[family-name:var(--cue-style-label-face,var(--cue-font-mono))] text-[length:var(--cue-style-group-label-size,var(--cue-style-label-size,var(--cue-text-label)))] tracking-[var(--cue-style-label-tracking,var(--cue-tracking-caps))] text-[color:var(--cue-style-group-label-ink,var(--cue-style-label-ink,var(--cue-fg-subtle)))] font-[number:var(--cue-style-label-weight,inherit)] [text-transform:var(--cue-style-label-case,uppercase)] select-none";
+declare const menuLabelClasses = "flex h-control-sm items-center px-(--cue-space-3) py-[var(--cue-style-group-label-pad,0px)] font-[family-name:var(--cue-style-label-face,var(--cue-font-mono))] text-[length:var(--cue-style-group-label-size,var(--cue-style-label-size,var(--cue-text-label)))] tracking-[var(--cue-style-label-tracking,var(--cue-tracking-caps))] text-[color:var(--cue-style-group-label-ink,var(--cue-style-label-ink,var(--cue-fg-muted)))] font-[number:var(--cue-style-label-weight,inherit)] [text-transform:var(--cue-style-label-case,uppercase)] select-none";
 /** The hairline between menu groups. */
 declare const menuSeparatorClasses = "my-(--cue-space-1) mx-[var(--cue-style-menu-separator-inset,0px)] h-px bg-border";
 /** Padding of a menu popup — a single space unit so rows reach the rim. */

package/dist/primitives/button.js

@@ -40,6 +40,25 @@ import { useRender } from "@base-ui/react/use-render";
 */
 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}`;
 /**
+* A style set's chevron cut (structural Looks, spec 2026-10-02 §3.3), for the tones
+* that are a filled shape: primary and danger always, secondary only where the set
+* fills its ground (the build derives `--cue-style-secondary-cut` as `none` for a set
+* whose secondary ground is `transparent`). Outline, ghost and danger-outline are
+* drawn by their edge or their ink, and a hollow cut is geometry this chassis does
+* not take on, so they keep the rectangle.
+*
+* The cut is a `clip-path` on the element: a filled tone's border is transparent,
+* so nothing is cut but fill and exterior glow. Two things give way, on purpose:
+* the glow outside a cut button is clipped (a set with a cut is worn with a pack
+* that has none), and under `:focus-visible` and in forced colours the clip is
+* removed, so the focus ring and the system border are never cut. The element stays
+* a rectangle throughout: hit area, ring, `render`, refs, sizing and keyboard.
+* Unset, the clip is `none` and the button renders exactly as before. The rules
+* live in `styles.css` (`.cue-cut`, `.cue-cut-secondary`): as arbitrary utilities
+* they were ~105 characters on every button a page renders.
+*/
+const CUT_FILLED = "cue-cut";
+/**
 * 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
 * per-theme branching here.
@@ -57,11 +76,11 @@ const buttonChassis = `inline-flex select-none items-center justify-center ${CON
 * @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} ${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}`,
+	primary: `bg-accent-fill [background-image:var(--cue-style-primary-fill,none)] text-accent-fill-fg hover:bg-accent-fill-hover hover:[background-image:none] disabled:[background-image:none] border border-transparent ${GLOW_CLASSES} ${CUT_FILLED} ${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)))] cue-cut-secondary ${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: `bg-danger text-danger-fg hover:opacity-90 border border-transparent ${GLOW_DANGER_CLASSES} ${CUT_FILLED} ${DISABLED_TONES.danger}`,
 	"danger-outline": `border text-danger bg-transparent hover:bg-danger/10 border-danger/40 ${DISABLED_TONES["danger-outline"]}`
 };
 /**

package/dist/primitives/chip.js

@@ -7,16 +7,72 @@ 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` and the tone's ink
+* (mixed toward `fg`, see `CHIP_TONE_INK`), 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>
+*/
+/**
+* A toned chip's ink: its tone, mixed 30% toward the page's own `fg`.
+*
+* A status ink is cut to be seen as a dot or a rim (3:1), and a chip sets it
+* as text: small, uppercase and on its own 10% tint, where the bare tone fell
+* to 4.2–4.4:1 in light under most themes and 3.6:1 under Kiln (structural
+* Looks §4.1's rendered sweep, phase 5). Mixing toward `fg` raises it in both
+* modes, because `fg` is the ink furthest from the ground in either, and
+* keeps the hue a reader reads the tone by.
+*/
+const CHIP_TONE_INK = {
+	accent: "text-[color:color-mix(in_oklch,var(--cue-accent)_70%,var(--cue-fg))]",
+	ok: "text-[color:color-mix(in_oklch,var(--cue-ok)_70%,var(--cue-fg))]",
+	busy: "text-[color:color-mix(in_oklch,var(--cue-busy)_70%,var(--cue-fg))]",
+	warn: "text-[color:color-mix(in_oklch,var(--cue-warn)_70%,var(--cue-fg))]",
+	danger: "text-[color:color-mix(in_oklch,var(--cue-danger)_70%,var(--cue-fg))]",
+	info: "text-[color:color-mix(in_oklch,var(--cue-info)_70%,var(--cue-fg))]"
+};
 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: CHIP_INK_NEUTRAL,
-			accent: `${CHIP_EDGE.accent} text-accent`,
-			ok: `${CHIP_EDGE.ok} text-ok`,
-			busy: `${CHIP_EDGE.busy} text-busy`,
-			warn: `${CHIP_EDGE.warn} text-warn`,
-			danger: `${CHIP_EDGE.danger} text-danger`,
-			info: `${CHIP_EDGE.info} text-info`
+			accent: `${CHIP_EDGE.accent} ${CHIP_TONE_INK.accent}`,
+			ok: `${CHIP_EDGE.ok} ${CHIP_TONE_INK.ok}`,
+			busy: `${CHIP_EDGE.busy} ${CHIP_TONE_INK.busy}`,
+			warn: `${CHIP_EDGE.warn} ${CHIP_TONE_INK.warn}`,
+			danger: `${CHIP_EDGE.danger} ${CHIP_TONE_INK.danger}`,
+			info: `${CHIP_EDGE.info} ${CHIP_TONE_INK.info}`
 		},
 		variant: {
 			tinted: `${CHIP_PAD} ${CHIP_SIZE} ${CHIP_LEADING} ${CHIP_TRACKING}`,

package/dist/styles.css

@@ -95,3 +95,29 @@
     animation: none;
   }
 }
+
+/* A style set's chevron cut on filled buttons (structural Looks, spec 2026-10-02
+ * §3.3), as two bespoke classes for the plussie's reason and one more: written as
+ * Tailwind arbitrary properties it was some 105 characters on every button a page
+ * renders, and `/kitchen-sink`'s document grew 1.5% for it. Unset, the clip is
+ * `none` and nothing changes. Focus and forced colours drop the clip, so the ring
+ * and the system border are never cut; unlayered, so a utility cannot undo it. */
+.cue-cut {
+  clip-path: var(--cue-style-control-cut-clip, none);
+}
+
+.cue-cut-secondary {
+  clip-path: var(--cue-style-secondary-cut, none);
+}
+
+.cue-cut:focus-visible,
+.cue-cut-secondary:focus-visible {
+  clip-path: none;
+}
+
+@media (forced-colors: active) {
+  .cue-cut,
+  .cue-cut-secondary {
+    clip-path: none;
+  }
+}

package/dist/system/_scoped-pairing.js

@@ -0,0 +1,18 @@
+import * as React from "react";
+//#region src/system/_scoped-pairing.ts
+/**
+* Whether the subtree's pairing is a scope's own rather than the root's.
+*
+* A portal mounts on `<body>`, whose `font-family` was computed from the root's
+* pairing, and a computed family does not follow a token. So a portal opened
+* under a scope that names a pairing asks for the family again
+* (`portal.tsx`), and one opened anywhere else leaves it alone. Set by
+* `StageScope` (`_stage-scope.tsx`) for `Preview` and `FontScope`. Its own
+* module, with nothing but React behind it, so the portal can read it without
+* importing the provider it is stamped from.
+*
+* @internal Not part of the public API.
+*/
+const ScopedPairingContext = React.createContext(false);
+//#endregion
+export { ScopedPairingContext };

package/dist/system/_stage-scope.js

@@ -0,0 +1,199 @@
+"use client";
+import { usePublish, useRead } from "./published.js";
+import { AmbientThemeContext, DensityContext, PaintContext, RootAxesContext, StyleSetContext, rootAxes } from "./density.js";
+import { OverridesContext } from "./overrides.js";
+import { ScopedPairingContext } from "./_scoped-pairing.js";
+import { NO_PAIRING_SEED, PairingSeedContext, ThemeContext } from "./theme-provider.js";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/system/_stage-scope.tsx
+/**
+* The attributes the stage carries — and, when nothing is asked, none at all.
+*
+* Inheriting is the *absence* of attributes, which is why every branch below
+* is conditional. Three branches add a second attribute, each for a reason in
+* the stylesheets rather than in taste.
+*
+* A theme's light block is the compound selector
+* `[data-theme="t"][data-mode="light"]`, so a mode with no theme restates the
+* page's theme on the same element. Read the other way, a theme with no mode
+* repeats the page's mode. Otherwise the stage would match the theme's dark
+* block under a light page, while every popup opened on it came up light:
+* popups are stamped from the context `StageScope` publishes, which carries
+* the page's mode.
+*
+* A theme's density overrides are addressed through `data-cue-theme`, the
+* stamp `<Density>` writes, so a density names the nearest theme the same way.
+*
+* A stage that ends up naming a theme and no rung — its own theme, or the
+* page's restated beside a mode (`scoped`, below) — restates the rung in force
+* around it, as `data-density` with the theme as `data-cue-theme` (spec
+* 2026-09-26-looks-fidelity §4.1.1). A theme's rung retunes are keyed on the
+* theme and the rung on one element, or a rung below the theme, so a stage that
+* re-themes with no `data-density` of its own inherits the rung already
+* resolved against the PAGE's theme, and its own theme's retune of that rung
+* never applies. `/looks` opens every stage this way: a theme and no rung. It
+* is what a nested `ThemeProvider` that names a theme already does — theme,
+* rung and mode together. The rung is the one `DensityContext` carries: `null`
+* outside every provider, where nothing is restated, and never `useDensity()`'s
+* `compact` fallback, which would invent one.
+*
+* The style set adds no second attribute, and that is the difference worth
+* writing down beside the three that do: a `[data-style]` block is a single
+* attribute selector naming no other axis, so a set stamped alone matches on
+* its own.
+*
+* But a stage that re-themes, re-modes or re-faces restates the set and the pack
+* in force around it (`around`), for a reason in custom properties rather than
+* in selectors. Their blocks declare names whose values read those axes — a
+* pack's stroke stops are the theme's borders, a set's band rule and ground are
+* the theme's border and surface — and a custom property's `var()`s are
+* substituted where it is declared. Declared only on the page, they arrive at
+* the stage already resolved against the page's theme and pairing; restated on
+* the stage, beside its own `data-theme` or `data-font`, they resolve against
+* those. A rung alone changes no ink and restates nothing. `around` is `null`
+* until the stage may restate: under a root that persists, not before the stage
+* has mounted, when the set and pack in force are the root's props rather than
+* the visitor's (see `useRestateReady`).
+*
+* The page's mode and rung, restated beside a stage theme — and the page's
+* theme, restated beside a stage mode or as a stage rung's `data-cue-theme` —
+* wait for the same mount on the same terms (tracking plan F13): under a
+* persisting root each is the root's, whose value on the server is its prop
+* while `<html>` carries the visitor's. So until then `followed` holds it back,
+* and `data-cue-follows` names it instead — the theme stylesheets' blocks each
+* have a twin keyed on `<html>`'s value and that marker (a followed rung
+* included: the base rung's twin in `axes.css`, and each theme's retune of it
+* keyed on the stage's own `data-theme`), and a rung node with no
+* `data-cue-theme` is reached by the rung rules' structural form, so the stage
+* paints the visitor's theme, mode and rung from the first frame (see
+* `useFollowedAxes`). A theme, mode or rung the stage names, or one named
+* between it and the root, is stamped as it always was. A followed rung takes
+* its `data-cue-theme` with it: the stamp addresses a `data-density` on the
+* same element, and there is none to address until the rung is stamped.
+*/
+function stageAttributes(asked, page, around, aroundDensity, followed) {
+	const attributes = {};
+	const scoped = asked.theme ?? (asked.mode === void 0 ? null : page?.theme ?? null);
+	if (scoped !== null && (asked.theme !== void 0 || !followed.theme)) attributes["data-theme"] = scoped;
+	const moded = asked.mode ?? (asked.theme === void 0 ? void 0 : page?.mode);
+	if (moded !== void 0 && !followed.mode) attributes["data-mode"] = moded;
+	if (asked.density !== void 0) {
+		attributes["data-density"] = asked.density;
+		const nearest = asked.theme ?? page?.theme ?? null;
+		if (nearest !== null && (asked.theme !== void 0 || !followed.theme)) attributes["data-cue-theme"] = nearest;
+	} else if (scoped !== null && aroundDensity !== null && !followed.density) {
+		attributes["data-density"] = aroundDensity;
+		if (asked.theme !== void 0 || !followed.theme) attributes["data-cue-theme"] = scoped;
+	}
+	if (followed.marker !== null) attributes["data-cue-follows"] = followed.marker;
+	if (asked.font !== void 0) attributes["data-font"] = asked.font;
+	if (asked.styleSet !== void 0) attributes["data-style"] = asked.styleSet;
+	if (asked.paint !== void 0) attributes["data-paint"] = asked.paint;
+	const restates = around !== null && (scoped !== null || moded !== void 0 || asked.font !== void 0);
+	if (restates && asked.styleSet === void 0 && around.styleSet !== null) attributes["data-style"] = around.styleSet;
+	if (restates && asked.paint === void 0 && around.paint !== null) attributes["data-paint"] = around.paint;
+	return attributes;
+}
+/**
+* The contexts the stage republishes, so an overlay opened on it follows it.
+*
+* `useCuePortalProps()` stamps a portal container from `ThemeContext` and
+* `DensityContext`; a popup mounts on `<body>` and inherits nothing from the
+* stage's DOM. So the stage's subtree reads a theme context with the stage's
+* theme and mode, and a density context with the stage's rung. The tools and
+* footer are outside this subtree, so what they open follows the page. A theme
+* the provider did not register leaves `manifest` null, which is what
+* `useTheme()` already reports for a name nobody registered.
+*
+* The style set travels with the density for the same reason and by the same
+* route: `useCuePortalProps()` stamps a portal container from `StyleSetContext`,
+* and a popup opened on the stage inherits nothing from the stage's DOM.
+*
+* And the pairing travels in the theme context, because that is where the
+* portal stamp reads `data-font` from (`theme?.font`). It used not to: the
+* stage stamped `data-font` on its own element and republished nothing, so a
+* popover opened on a `plex` stage came up in the root's pairing — a limit the
+* `font` prop's docblock stated rather than a rule anybody chose. A pairing on
+* the stage is the stage's, exactly as its theme is; `setFont` read here still
+* drives the root, because the pairing's setter has no island form.
+*/
+function StageScope({ theme, mode, density, font, styleSet, paint, children }) {
+	const outer = useRead(ThemeContext);
+	const outerOverrides = useRead(OverridesContext);
+	const outerDensity = useRead(DensityContext);
+	const outerAmbient = useRead(AmbientThemeContext);
+	const outerStyleSet = useRead(StyleSetContext);
+	const outerPaint = useRead(PaintContext);
+	const value = React.useMemo(() => {
+		if (outer === null || theme === void 0 && mode === void 0 && font === void 0) return outer;
+		const scoped = theme ?? outer.theme;
+		return {
+			...outer,
+			theme: scoped,
+			manifest: scoped === outer.theme ? outer.manifest : null,
+			mode: mode ?? outer.mode,
+			font: font ?? outer.font,
+			resolvedMode: mode === "dark" || mode === "light" ? mode : outer.resolvedMode
+		};
+	}, [
+		outer,
+		theme,
+		mode,
+		font
+	]);
+	const stamped = theme !== void 0 || mode !== void 0;
+	const inputs = [
+		theme,
+		mode,
+		density,
+		font,
+		styleSet,
+		paint,
+		React.useContext(ThemeContext),
+		React.useContext(OverridesContext),
+		React.useContext(DensityContext),
+		React.useContext(AmbientThemeContext),
+		React.useContext(StyleSetContext),
+		React.useContext(PaintContext)
+	];
+	const publishedAmbient = usePublish(theme ?? outerAmbient, inputs);
+	const publishedDensity = usePublish(density ?? outerDensity, inputs);
+	const publishedStyleSet = usePublish(styleSet ?? outerStyleSet, inputs);
+	const publishedPaint = usePublish(paint ?? outerPaint, inputs);
+	const publishedOverrides = usePublish(stamped ? null : outerOverrides, inputs);
+	const publishedValue = usePublish(value, inputs);
+	const outerPairingSeed = React.useContext(PairingSeedContext);
+	const outerScopedPairing = React.useContext(ScopedPairingContext);
+	const outerRootAxes = React.useContext(RootAxesContext);
+	return /* @__PURE__ */ jsx(RootAxesContext.Provider, {
+		value: rootAxes(outerRootAxes.theme && theme === void 0, outerRootAxes.mode && mode === void 0, outerRootAxes.density && density === void 0),
+		children: /* @__PURE__ */ jsx(AmbientThemeContext.Provider, {
+			value: publishedAmbient,
+			children: /* @__PURE__ */ jsx(DensityContext.Provider, {
+				value: publishedDensity,
+				children: /* @__PURE__ */ jsx(StyleSetContext.Provider, {
+					value: publishedStyleSet,
+					children: /* @__PURE__ */ jsx(PaintContext.Provider, {
+						value: publishedPaint,
+						children: /* @__PURE__ */ jsx(OverridesContext.Provider, {
+							value: publishedOverrides,
+							children: /* @__PURE__ */ jsx(PairingSeedContext.Provider, {
+								value: font === void 0 ? outerPairingSeed : NO_PAIRING_SEED,
+								children: /* @__PURE__ */ jsx(ScopedPairingContext.Provider, {
+									value: font !== void 0 || outerScopedPairing,
+									children: /* @__PURE__ */ jsx(ThemeContext.Provider, {
+										value: publishedValue,
+										children
+									})
+								})
+							})
+						})
+					})
+				})
+			})
+		})
+	});
+}
+//#endregion
+export { StageScope, stageAttributes };

package/dist/system/_style-check.js

@@ -26,7 +26,7 @@ const CHECK_EDGE = "border-[color:var(--cue-style-check-edge,var(--cue-border))]
 * box is 18px on a phone and 16px on a desktop, rounded at 0.4 of its control
 * corner (4px). The `sm` box keeps its `icon-sm`.
 */
-const CHECK_RADIUS = "rounded-[var(--cue-style-check-radius,calc(var(--cue-radius-control)*var(--cue-radius-scale)))]";
+const CHECK_RADIUS = "rounded-[var(--cue-style-check-radius,calc(var(--cue-style-control-radius,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))]";
 /**

package/dist/system/_style-chip.js

@@ -69,7 +69,7 @@ const CHIP_TRACKING = "tracking-[var(--cue-style-chip-tracking,var(--cue-trackin
 /** @see CHIP_CASE — the `tag` variant's tracking; its own closed `0.06em` by default. */
 const CHIP_TRACKING_TAG = "tracking-[var(--cue-style-chip-tracking,0.06em)]";
 /** @see CHIP_CASE — the chip's radius; what `rounded-control` compiles to by default. */
-const CHIP_RADIUS = "rounded-[var(--cue-style-chip-radius,calc(var(--cue-radius-control)*var(--cue-radius-scale)))]";
+const CHIP_RADIUS = "rounded-[var(--cue-style-chip-radius,calc(var(--cue-style-control-radius,var(--cue-radius-control))*var(--cue-radius-scale)))]";
 /** @see CHIP_CASE — each tone's fill: `var(--cue-style-chip-fill, 10%)` of the tone over transparent. */
 const CHIP_FILL = {
 	accent: "bg-[color:color-mix(in_oklab,var(--cue-accent)_var(--cue-style-chip-fill,10%),transparent)]",

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

@@ -4,21 +4,25 @@
 * `style-group-label-size`, `style-group-label-ink`): a menu's and a command
 * palette's group labels. A menu's falls back through `style-label-size` and
 * `style-label-ink` to the rung and ink it drew; the palette's, which read no
-* label name, to its `text-micro` and `fg-subtle`. coss.com/ui sets both at
+* label name, to its `text-micro`. coss.com/ui sets both at
 * 12px in `fg-muted` (P163.label-size, P152.group-label, P152.group-label-ink),
 * where its field labels are 14px `fg`.
 *
 * **Optional** (spec §3.0). Its own module for docgen's reason: one token per
 * file, so only the components that read it are credited with it.
 *
+* Both inks fall back to `fg-muted`, not `fg-subtle`: a group label is label
+* text, held to 4.5:1 (structural Looks, spec 2026-10-02 §4.1; see
+* `_style-label-ink.ts`).
+*
 * @internal Not part of the public API.
 */
 const GROUP_LABEL_SIZE = "text-[length:var(--cue-style-group-label-size,var(--cue-style-label-size,var(--cue-text-label)))]";
 /** @see GROUP_LABEL_SIZE */
-const GROUP_LABEL_INK = "text-[color:var(--cue-style-group-label-ink,var(--cue-style-label-ink,var(--cue-fg-subtle)))]";
+const GROUP_LABEL_INK = "text-[color:var(--cue-style-group-label-ink,var(--cue-style-label-ink,var(--cue-fg-muted)))]";
 /** @see GROUP_LABEL_SIZE — the palette's, which read no label name. */
 const GROUP_LABEL_SIZE_MICRO = "text-[length:var(--cue-style-group-label-size,var(--cue-text-micro))]";
 /** @see GROUP_LABEL_SIZE */
-const GROUP_LABEL_INK_SUBTLE = "text-[color:var(--cue-style-group-label-ink,var(--cue-fg-subtle))]";
+const GROUP_LABEL_INK_SUBTLE = "text-[color:var(--cue-style-group-label-ink,var(--cue-fg-muted))]";
 //#endregion
 export { GROUP_LABEL_INK, GROUP_LABEL_INK_SUBTLE, GROUP_LABEL_SIZE, GROUP_LABEL_SIZE_MICRO };

package/dist/system/_style-hero-title.js

@@ -0,0 +1,41 @@
+//#region src/system/_style-hero-title.ts
+/**
+* The `Hero` title's voice: the style set's **display** rung, falling back to
+* the page title's voice (`_style-page-title.ts`) name by name, and through it
+* to the class the page title replaced.
+*
+* Spec 2026-10-02-structural-looks §16 (revision 8). A hero is a page's display
+* line, and the sources say so: Tender's opens at 48px where its page titles
+* are 32px, Porcelain's at 48px against 36px, Zine's at 96px. The display rung
+* is where every measured set already records that size, so the hero reads it
+* first. `style-hero-title-size` sits in front of the size for the one source
+* whose hero is larger than its display rung: Graphite's is 56px, and its
+* display rung is its 46px section heading.
+*
+* | property                | reads, outermost first |
+* |-------------------------|------------------------|
+* | font-family             | `style-display-face` → `style-page-title-face` → `var(--cue-font-mono)` |
+* | font-size               | `style-hero-title-size` → `style-display` → `style-page-title-size` → `var(--cue-text-title)` |
+* | font-weight             | `style-display-weight` → `style-page-title-weight` → `500` |
+* | letter-spacing          | `style-tracking-display` → `style-page-title-tracking` → `normal` |
+* | line-height             | `style-leading-display` → `style-page-title-leading` → `inherit` |
+* | font-variation-settings | `style-display-variation` → `normal` |
+* | color                   | `style-heading-ink` → `var(--cue-fg)` |
+* | text-transform          | `style-display-case` → `none` |
+*
+* **Who moves.** A set that declares none of the display names draws its hero
+* exactly as before, because each chain ends in the page title's reader. The
+* four structural sets of phase 3 declare both rungs equal. `editorial` and
+* `marketing` declare a display size and no page-title size, so their heroes
+* grow to it (22 → 52px and 22 → 64px at scale 1); that is what a display rung
+* is for. `tests/browser/hero-voice.spec.ts` pins every set.
+*
+* **Its own module**, for the reason `_style-page-title.ts` gives: `@repo/docgen`
+* attributes a token to a component by the file its class string lives in, and
+* the display names belong to the hero.
+*
+* @internal Not part of the public API.
+*/
+const HERO_TITLE_VOICE = "font-[family-name:var(--cue-style-display-face,var(--cue-style-page-title-face,var(--cue-font-mono)))] text-[length:var(--cue-style-hero-title-size,var(--cue-style-display,var(--cue-style-page-title-size,var(--cue-text-title))))] font-[number:var(--cue-style-display-weight,var(--cue-style-page-title-weight,500))] tracking-[var(--cue-style-tracking-display,var(--cue-style-page-title-tracking,normal))] leading-[var(--cue-style-leading-display,var(--cue-style-page-title-leading,inherit))] [font-variation-settings:var(--cue-style-display-variation,normal)] text-[color:var(--cue-style-heading-ink,var(--cue-fg))] [text-transform:var(--cue-style-display-case,none)] [overflow-wrap:anywhere]";
+//#endregion
+export { HERO_TITLE_VOICE };

package/dist/system/_style-kbd.js

@@ -41,7 +41,7 @@ const KBD_SIZE = "text-[length:var(--cue-style-kbd-size,var(--cue-style-chip-siz
 * where its key caps stay 12px. It falls back through the chip's size, so a
 * Look that names only the chip's keeps its key caps beside it.
 */
-const KBD_BOX = "h-[var(--cue-style-kbd-height,var(--cue-chip-h))] min-w-[var(--cue-style-kbd-height,var(--cue-chip-h))] px-[var(--cue-style-kbd-pad,var(--cue-space-2))] rounded-[var(--cue-style-kbd-radius,calc(var(--cue-radius-control)*var(--cue-radius-scale)))]";
+const KBD_BOX = "h-[var(--cue-style-kbd-height,var(--cue-chip-h))] min-w-[var(--cue-style-kbd-height,var(--cue-chip-h))] px-[var(--cue-style-kbd-pad,var(--cue-space-2))] rounded-[var(--cue-style-kbd-radius,calc(var(--cue-style-control-radius,var(--cue-radius-control))*var(--cue-radius-scale)))]";
 /**
 * A key's leading (round 6, spec §11, lane R6.P: `style-kbd-leading`), falling
 * back to the `leading-none` it drew. coss.com/ui's keys set 12px on a 16px line