@cueplusplus/ui 0.15.0 → 0.17.0

package/dist/system/theme-registry.d.ts

@@ -1,3 +1,4 @@
+import "./published.js";
 import { ThemeRegistry } from "./vocabulary.js";
 import "react";
 import { DensityEntry, FontEntry, ThemeManifest } from "@cueplusplus/theme-base";
@@ -40,7 +41,7 @@ declare function useThemes(): readonly ThemeManifest[];
  */
 declare function useDensities(): readonly DensityEntry[];
 /**
- * The font pairings, by the same rule: the base eight, then the active theme's.
+ * The font pairings, by the same rule: the base twelve, then the active theme's.
  *
  * @throws If called outside a `<ThemeProvider>`.
  * @example

package/dist/system/theme-registry.js

@@ -1,13 +1,30 @@
 "use client";
+import { published, useReadSelected } from "./published.js";
 import "./vocabulary.js";
 import * as React from "react";
 //#region src/system/theme-registry.tsx
-/** Internal: consumers read it through the three hooks. `null` outside a provider. */
-const ThemeRegistryContext = React.createContext(null);
-function useRegistry(hook) {
-	const registry = React.useContext(ThemeRegistryContext);
-	if (registry === null) throw new Error(`${hook}() must be called inside a <ThemeProvider>.`);
-	return registry;
+/**
+* Internal: consumers read it through the three hooks. `null` outside a provider.
+*
+* Carried as a `Published` (see `published.ts`): the registry is built for the
+* active theme, which a root's restore can change while streamed boundaries
+* below are still hydrating.
+*/
+const ThemeRegistryContext = React.createContext(published(null));
+/** What a slice reads outside any provider — never a value a registry can hold. */
+const NO_REGISTRY = Symbol("no registry");
+/**
+* One slice of the registry. The registry is rebuilt for every active theme,
+* but the themes a registry lists do not change with it — so a `useThemes()`
+* reader sits out the restore entirely: the rebuilt registry is posted beside
+* the context (see `published.ts`), and this reader re-renders only if its own
+* slice moved. An edit that switches the theme moves the context itself, and
+* that re-renders every reader of it, as any context does.
+*/
+function useRegistry(hook, select) {
+	const slice = useReadSelected(ThemeRegistryContext, (registry) => registry === null ? NO_REGISTRY : select(registry));
+	if (slice === NO_REGISTRY) throw new Error(`${hook}() must be called inside a <ThemeProvider>.`);
+	return slice;
 }
 /**
 * Every registered manifest, in registration order.
@@ -27,7 +44,7 @@ function useRegistry(hook) {
 * ));
 */
 function useThemes() {
-	return useRegistry("useThemes").themes;
+	return useRegistry("useThemes", (registry) => registry.themes);
 }
 /**
 * The rungs an app may offer right now: the base five, then the ACTIVE theme's
@@ -48,10 +65,10 @@ function useThemes() {
 * />
 */
 function useDensities() {
-	return useRegistry("useDensities").densities;
+	return useRegistry("useDensities", (registry) => registry.densities);
 }
 /**
-* The font pairings, by the same rule: the base eight, then the active theme's.
+* The font pairings, by the same rule: the base twelve, then the active theme's.
 *
 * @throws If called outside a `<ThemeProvider>`.
 * @example
@@ -60,7 +77,7 @@ function useDensities() {
 * const sans = useFonts().find((f) => f.name === font)?.stacks["font-sans"];
 */
 function useFonts() {
-	return useRegistry("useFonts").fonts;
+	return useRegistry("useFonts", (registry) => registry.fonts);
 }
 //#endregion
 export { ThemeRegistryContext, useDensities, useFonts, useThemes };

package/dist/system/use-density.js

@@ -1,5 +1,6 @@
 "use client";
 import { useIsomorphicLayoutEffect } from "./use-isomorphic-layout-effect.js";
+import { useRead } from "./published.js";
 import { DEFAULT_DENSITY, DensityContext } from "./density.js";
 import { warnOnce } from "./vocabulary.js";
 import { ThemeRegistryContext } from "./theme-registry.js";
@@ -181,7 +182,7 @@ function measureControlHeight(ladder, density, theme, size) {
 * });
 */
 function useDensity() {
-	return React.useContext(DensityContext) ?? "compact";
+	return useRead(DensityContext) ?? "compact";
 }
 /**
 * The pixel height of a control at the ambient density — what a virtualiser or a
@@ -208,8 +209,8 @@ function useDensity() {
 */
 function useControlHeight(size = "md") {
 	const density = useDensity();
-	const theme = React.useContext(ThemeContext)?.theme ?? null;
-	const ladder = ladderFor(React.useContext(ThemeRegistryContext), density);
+	const theme = useRead(ThemeContext)?.theme ?? null;
+	const ladder = ladderFor(useRead(ThemeRegistryContext), density);
 	const { sm, md, lg } = ladder;
 	const [height, setHeight] = React.useState(() => ladder[size] * ASSUMED_ROOT_FONT_SIZE);
 	useIsomorphicLayoutEffect(() => {

package/dist/system/use-theme.d.ts

@@ -3,8 +3,8 @@ import { ThemeContextValue } from "./theme-provider.js";
 /**
  * Read and drive the ambient theme state.
  *
- * Returns `{ theme, manifest, density, mode, font, styleSet, resolvedMode,
- * setTheme, setDensity, setMode, setFont, setStyleSet }`.
+ * Returns `{ theme, manifest, density, mode, font, styleSet, paint, resolvedMode,
+ * setTheme, setDensity, setMode, setFont, setStyleSet, setPaint }`.
  * `density` here is the *provider's* level — a nested `<Density>` island does not
  * change it; use `useDensity()` when you want the level that actually applies
  * where you are. `font` is the pairing the provider holds; it has no island, so
@@ -19,6 +19,9 @@ import { ThemeContextValue } from "./theme-provider.js";
  * provider included — exactly as the DOM resolves it, so this and the set a
  * portal or a `<Preview>` stage carries are one value.
  *
+ * `paint` is the pack in force on the same terms: `null` when nothing has
+ * chosen one, and the pack stamped around a provider that names none.
+ *
  * @throws If called outside a `<ThemeProvider>`. Theme state is never guessed:
  *   a missing provider is a wiring bug, not a fallback situation.
  * @example

package/dist/system/use-theme.js

@@ -1,12 +1,12 @@
 "use client";
+import { useRead } from "./published.js";
 import { ThemeContext } from "./theme-provider.js";
-import * as React from "react";
 //#region src/system/use-theme.ts
 /**
 * Read and drive the ambient theme state.
 *
-* Returns `{ theme, manifest, density, mode, font, styleSet, resolvedMode,
-* setTheme, setDensity, setMode, setFont, setStyleSet }`.
+* Returns `{ theme, manifest, density, mode, font, styleSet, paint, resolvedMode,
+* setTheme, setDensity, setMode, setFont, setStyleSet, setPaint }`.
 * `density` here is the *provider's* level — a nested `<Density>` island does not
 * change it; use `useDensity()` when you want the level that actually applies
 * where you are. `font` is the pairing the provider holds; it has no island, so
@@ -21,6 +21,9 @@ import * as React from "react";
 * provider included — exactly as the DOM resolves it, so this and the set a
 * portal or a `<Preview>` stage carries are one value.
 *
+* `paint` is the pack in force on the same terms: `null` when nothing has
+* chosen one, and the pack stamped around a provider that names none.
+*
 * @throws If called outside a `<ThemeProvider>`. Theme state is never guessed:
 *   a missing provider is a wiring bug, not a fallback situation.
 * @example
@@ -28,7 +31,7 @@ import * as React from "react";
 * <Switch checked={resolvedMode === "light"} onCheckedChange={(on) => setMode(on ? "light" : "dark")} />
 */
 function useTheme() {
-	const context = React.useContext(ThemeContext);
+	const context = useRead(ThemeContext);
 	if (context === null) throw new Error("useTheme() must be called inside a <ThemeProvider>.");
 	return context;
 }

package/dist/system/vocabulary.js

@@ -69,7 +69,7 @@ function vocabulary(themes) {
 	};
 }
 /**
-* Whether a value is one of the three style sets.
+* Whether a value is one of the eight style sets.
 *
 * A standalone function rather than a member of {@link Vocabulary}, and the
 * asymmetry is the point: every other axis is asked *under a theme*, because a
@@ -83,7 +83,7 @@ function isStyleSet(value) {
 	return typeof value === "string" && STYLE_SETS.includes(value);
 }
 /**
-* Whether a value is one of the look packs.
+* Whether a value is one of the paint packs.
 *
 * Standalone for exactly the reason {@link isStyleSet} is, and the reason reads
 * the same one axis over: no theme can add a pack. The vocabulary is emitted by

package/dist/theming/create-theme.js

@@ -416,7 +416,8 @@ function radiusBlocks(name, radiusScale) {
 		blocks.push({
 			selector: themeSelector(name, {
 				density: level,
-				pair: true
+				pair: true,
+				follows: true
 			}),
 			sections: [{ declarations: [[property, scaled(radiusScale, scale)]] }]
 		});
@@ -485,12 +486,15 @@ function createTheme(anchors) {
 	}];
 	const blocks = [
 		{
-			selector: themeSelector(name),
+			selector: themeSelector(name, { follows: true }),
 			colorScheme: "dark",
 			sections: darkSections
 		},
 		...lightSections === null ? [] : [{
-			selector: themeSelector(name, { mode: "light" }),
+			selector: themeSelector(name, {
+				mode: "light",
+				follows: true
+			}),
 			colorScheme: "light",
 			sections: lightSections
 		}],
@@ -504,15 +508,17 @@ function createTheme(anchors) {
 		tokens: light.colors,
 		provisional: light.provisional
 	}]];
+	const explicitCss = serializeThemeCss(blocks, { banner: `@cueplusplus/ui — theme "${name}"` }).trimEnd();
+	const systemScheme = lightSections === null ? "dark" : "light dark";
 	return {
 		name,
-		css: `${serializeThemeCss(blocks, { banner: `@cueplusplus/ui — theme "${name}"` }).trimEnd()}\n\n${serializeSystemModeAliases(name, [{
+		css: `${explicitCss}\n\n${serializeSystemModeAliases(name, [{
 			mode: "dark",
-			colorScheme: "light dark",
+			colorScheme: systemScheme,
 			sections: darkPaletteSections
 		}, {
 			mode: "light",
-			colorScheme: "light dark",
+			colorScheme: systemScheme,
 			sections: lightSections ?? darkPaletteSections
 		}])}\n`,
 		tokens: Object.fromEntries(darkSections.flatMap((section) => section.declarations)),

package/dist/theming/serialize.d.ts

@@ -56,8 +56,13 @@ declare function assertCssValue(name: string, value: string): string;
  */
 declare function tokenProperty(name: string): string;
 interface ThemeSelectorOptions {
-  /** Cross with the mode axis. Only `"light"` needs a selector; dark is the base block. */
-  mode?: "dark" | "light";
+  /**
+   * Cross with the mode axis. `"dark"` is the base block and needs none;
+   * `"light"` does, and so does `"system"` — the block a theme writes once
+   * inside each `prefers-color-scheme` query, for a document that stamps
+   * `data-mode="system"`.
+   */
+  mode?: "dark" | "light" | "system";
   /** Cross with the density axis. Used only for the radius multiplier. */
   density?: Density;
   /**
@@ -76,6 +81,31 @@ interface ThemeSelectorOptions {
    * match the root itself.
    */
   pair?: boolean;
+  /**
+   * Put the follower's twins in front of the selector, one a line, as every
+   * stylesheet this library and `@cueplusplus/theme-tools` write does.
+   *
+   * Under a root `ThemeProvider` that persists, a nested provider or a
+   * `Preview` stage that names a theme and not a mode (or a mode and not a
+   * theme, or no rung) leaves the axis it did not name to `<html>` until it
+   * has mounted: it stamps no `data-mode` (or `data-theme`, or `data-density`)
+   * and carries `data-cue-follows` naming what it left out, because on the
+   * server the only value it could stamp is the root's default, while `<html>`
+   * already carries the visitor's. A compound block such as
+   * `[data-theme="x"][data-mode="light"]` does not match such an island; its
+   * twin, keyed on `<html>`'s value and the marker, does — at the same
+   * specificity, so every precedence relation carries over. Without it a
+   * hand-assembled theme paints its dark block for a light visitor until the
+   * island mounts.
+   *
+   * The twins depend on which block this is: the dark block's reaches an
+   * island that follows `<html>`'s theme; the light and system blocks' also
+   * reach one that follows `<html>`'s mode; a rung's reach one that follows
+   * `<html>`'s rung. A mode crossed with a rung is refused with a `TypeError`:
+   * an island can follow either axis without the other, so no single list is
+   * right for the compound.
+   */
+  follows?: boolean;
 }
 /**
  * The selector a theme's declarations live under.
@@ -89,6 +119,8 @@ interface ThemeSelectorOptions {
  * @returns The CSS selector.
  * @example
  * themeSelector("acme", { mode: "light" }); // → '[data-theme="acme"][data-mode="light"]'
+ * themeSelector("acme", { mode: "light", follows: true });
+ * // → ':where(:root[data-theme="acme"]) [data-mode="light"][data-cue-follows~="theme"],\n:where(:root[data-mode="light"]) [data-theme="acme"][data-cue-follows~="mode"],\n[data-theme="acme"][data-mode="light"]'
  * themeSelector("acme", { density: "compact", pair: true });
  * // → '[data-theme="acme"] [data-density="compact"]:where([data-cue-theme="acme"]), [data-theme="acme"] [data-density="compact"]:where(:not([data-cue-theme]):not([data-theme]:not([data-theme="acme"])):not([data-theme="acme"] [data-theme]:not([data-theme="acme"]) *)), [data-theme="acme"][data-density="compact"]'
  */

package/dist/theming/serialize.js

@@ -83,18 +83,93 @@ function tokenProperty(name) {
 * @returns The CSS selector.
 * @example
 * themeSelector("acme", { mode: "light" }); // → '[data-theme="acme"][data-mode="light"]'
+* themeSelector("acme", { mode: "light", follows: true });
+* // → ':where(:root[data-theme="acme"]) [data-mode="light"][data-cue-follows~="theme"],\n:where(:root[data-mode="light"]) [data-theme="acme"][data-cue-follows~="mode"],\n[data-theme="acme"][data-mode="light"]'
 * themeSelector("acme", { density: "compact", pair: true });
 * // → '[data-theme="acme"] [data-density="compact"]:where([data-cue-theme="acme"]), [data-theme="acme"] [data-density="compact"]:where(:not([data-cue-theme]):not([data-theme]:not([data-theme="acme"])):not([data-theme="acme"] [data-theme]:not([data-theme="acme"]) *)), [data-theme="acme"][data-density="compact"]'
 */
 function themeSelector(name, options = {}) {
+	const { mode, density, follows } = options;
+	const crossed = mode === "light" || mode === "system" ? mode : null;
+	const selector = compoundSelector(name, options);
+	if (follows !== true) return selector;
+	if (density !== void 0 && crossed !== null) throw new TypeError(`themeSelector: follows cannot be combined with mode "${crossed}" and density "${density}"; an island can follow either axis without the other`);
+	return [...density !== void 0 ? [rungFollowerSelector(name, density), followerSelector(name, "density", density)] : crossed === null ? [themeFollowerSelector(name, null)] : [themeFollowerSelector(name, crossed), followerSelector(name, "mode", crossed)], selector].join(",\n");
+}
+/** {@link themeSelector} without the twins: the compound, and the paired forms beside it. */
+function compoundSelector(name, options) {
 	const { mode, density, pair } = options;
 	const themeAttr = `[data-theme="${name}"]`;
-	const theme = `${themeAttr}${mode === "light" ? "[data-mode=\"light\"]" : ""}`;
+	const theme = `${themeAttr}${mode === "light" || mode === "system" ? `[data-mode="${mode}"]` : ""}`;
 	if (density === void 0) return theme;
 	const crossed = `[data-density="${density}"]`;
 	if (pair !== true) return `${theme}${crossed}`;
 	return `${`${theme} ${crossed}:where([data-cue-theme="${name}"])`}, ${`${theme} ${crossed}:where(:not([data-cue-theme]):not([data-theme]:not(${themeAttr})):not(${themeAttr} [data-theme]:not(${themeAttr}) *))`}, ${theme}${crossed}`;
 }
+/**
+* The selector a theme island matches while it follows a persisting root's
+* `axis` before it mounts, when `<html>` carries `value` — written first, on
+* its own line, in the selector list of the compound block it stands in for.
+*
+* `ThemeProvider` renders a persisting root's PROPS on the server, while the
+* pre-paint script has already stamped the visitor's stored axes on `<html>`.
+* A nested provider that names a theme and no mode (or no rung), and a
+* `Preview` stage that names a theme and no mode, would have to stamp the only
+* mode it knows there — the root's prop. So until its own layout effect runs it
+* stamps neither `data-mode` nor `data-density` of the root's, and carries
+* `data-cue-follows="mode density"` (the axes it has left to the document)
+* instead. `@cueplusplus/theme-tools`' `follows` emits the same line for every
+* packaged theme, and its docblock carries the argument for anchoring on
+* `:root`: the runtime marks only an axis that is the persisting root's, and
+* that root mirrors the axis onto `<html>`, so `<html>`'s value is the one the
+* island is about to stamp. `:where()` keeps it at the compound's (0,2,0).
+*
+* The public route to it is `themeSelector(name, { mode, follows: true })`,
+* which puts it, and the theme follower's twin, in front of the compound —
+* what `createTheme()` and the system aliases below write. The configurator's
+* override blocks, which name both modes, compose it themselves.
+*
+* @internal Used by package-owned serializers; not part of the public
+* `@cueplusplus/ui/theming` barrel.
+*/
+function followerSelector(name, axis, value) {
+	return `:where(:root[data-${axis}="${value}"]) [data-theme="${name}"][data-cue-follows~="${axis}"]`;
+}
+/**
+* The same twin one axis over: what an island matches while it follows a
+* persisting root's THEME before it mounts, when `<html>` carries `name` —
+* written first in the selector list of the colour block of theme `name` for
+* the island's own `mode`.
+*
+* A nested provider or a `Preview` stage that names a mode and no theme stamps
+* its mode and, until it mounts, no `data-theme`, carrying
+* `data-cue-follows~="theme"` instead (theme-tools' `followsTheme` is the
+* packaged half, and says why). `mode` is the half of the compound the twin
+* stands in for: `"light"` or `"system"` for those blocks, and `null` for the
+* bare dark block, whose twin asks only that the island carry a mode —
+* `:where([data-mode])`, weightless, so the twin weighs (0,1,0) like
+* `[data-theme="x"]` itself, and the others (0,2,0) like their compounds.
+*
+* @internal Used by package-owned serializers; not part of the public
+* `@cueplusplus/ui/theming` barrel.
+*/
+function themeFollowerSelector(name, mode) {
+	return `:where(:root[data-theme="${name}"]) ${mode === null ? ":where([data-mode])" : `[data-mode="${mode}"]`}[data-cue-follows~="theme"]`;
+}
+/**
+* The rung twin for an island that follows BOTH the persisting root's theme and
+* its rung before it mounts (a provider that names only a mode): keyed on
+* `<html>`'s theme and rung together, for a theme's own retune of that rung.
+* The rung's base values it re-declares through `@cueplusplus/tokens`' own
+* follower twin; an island that names the theme is reached by
+* {@link followerSelector}'s density form instead.
+*
+* @internal Used by package-owned serializers; not part of the public
+* `@cueplusplus/ui/theming` barrel.
+*/
+function rungFollowerSelector(name, density) {
+	return `:where(:root[data-theme="${name}"][data-density="${density}"]) [data-cue-follows~="theme"][data-cue-follows~="density"]`;
+}
 /** The tone vocabulary that gets a soft fill and a soft border in every theme. */
 const STATUSES = [
 	"ok",
@@ -163,7 +238,11 @@ const HAIRLINE_TEMPLATES = [
 const DERIVED_TOKEN_TEMPLATES = [
 	["accent-soft", "color-mix(in oklch, var(--cue-accent) 14%, transparent)"],
 	...TINTED.flatMap((tone) => [[`${tone}-soft`, `color-mix(in oklch, var(--cue-${tone}) 12%, transparent)`], [`${tone}-border`, `color-mix(in oklch, var(--cue-${tone}) 35%, transparent)`]]),
-	...HAIRLINE_TEMPLATES
+	...HAIRLINE_TEMPLATES,
+	["accent-fill", "var(--cue-accent)"],
+	["accent-fill-fg", "var(--cue-accent-fg)"],
+	["accent-fill-hover", "var(--cue-accent-hover)"],
+	["shade", "var(--cue-fg)"]
 ];
 /**
 * {@link DERIVED_TOKEN_TEMPLATES} as a property → value map.
@@ -218,7 +297,10 @@ function serializeSystemModeAliases(theme, aliases) {
 	const name = assertThemeName(theme);
 	return aliases.map(({ mode, colorScheme, sections }) => {
 		return `@media (prefers-color-scheme: ${mode}) {\n${indentRule(serializeThemeBlock({
-			selector: `[data-theme="${name}"][data-mode="system"]`,
+			selector: themeSelector(name, {
+				mode: "system",
+				follows: true
+			}),
 			colorScheme,
 			sections
 		}))}\n}`;
@@ -238,4 +320,4 @@ function serializeThemeCss(blocks, options = {}) {
 	return `${[...options.banner === void 0 ? [] : [`/*! ${options.banner}\n * Generated by createTheme(). Do not edit by hand.\n */`], ...rules].join("\n\n")}\n`;
 }
 //#endregion
-export { CUE_TOKEN_PREFIX, DERIVED_TOKEN_TEMPLATES, RESOLVED_MONO, THEME_NAME_PATTERN$1 as THEME_NAME_PATTERN, assertCssValue, assertThemeName, derivedTokens, serializeSystemModeAliases, serializeThemeBlock, serializeThemeCss, themeSelector, tokenProperty };
+export { CUE_TOKEN_PREFIX, DERIVED_TOKEN_TEMPLATES, RESOLVED_MONO, THEME_NAME_PATTERN$1 as THEME_NAME_PATTERN, assertCssValue, assertThemeName, derivedTokens, followerSelector, rungFollowerSelector, serializeSystemModeAliases, serializeThemeBlock, serializeThemeCss, themeFollowerSelector, themeSelector, tokenProperty };

package/manifest/components/accordion.json

@@ -130,12 +130,13 @@
   "variants": {},
   "defaultVariants": {},
   "tokensUsed": [
-    "--cue-accent",
     "--cue-border",
     "--cue-control-md",
     "--cue-fg",
     "--cue-fg-muted",
     "--cue-fg-subtle",
+    "--cue-focus",
+    "--cue-focus-ring",
     "--cue-font-mono",
     "--cue-icon-sm",
     "--cue-leading-ui",
@@ -143,6 +144,11 @@
     "--cue-space-1",
     "--cue-space-3",
     "--cue-space-4",
+    "--cue-style-collapse-height",
+    "--cue-style-control-face",
+    "--cue-style-focus-width",
+    "--cue-style-label-weight",
+    "--cue-style-quiet-ink",
     "--cue-text-ui"
   ],
   "summary": "A stack of sections, one or several open at a time.",

package/manifest/components/agent-pile.json

@@ -111,8 +111,11 @@
     "--cue-control-md",
     "--cue-control-sm",
     "--cue-fg-muted",
+    "--cue-focus",
+    "--cue-focus-ring",
     "--cue-font-mono",
     "--cue-icon-sm",
+    "--cue-style-focus-width",
     "--cue-surface-2",
     "--cue-surface-3",
     "--cue-text-label",

package/manifest/components/alert-dialog.json

@@ -174,19 +174,56 @@
     "--cue-fg-subtle",
     "--cue-font-mono",
     "--cue-leading-ui",
+    "--cue-paint-rim-width",
+    "--cue-paint-scrim-filter",
+    "--cue-paint-shade-far",
+    "--cue-paint-shade-hairline",
+    "--cue-paint-shade-near",
+    "--cue-paint-shadow-scale",
+    "--cue-paint-shadow-spread",
+    "--cue-paint-sheen-ink",
+    "--cue-paint-stroke-angle",
+    "--cue-paint-stroke-overlay-from",
+    "--cue-paint-stroke-overlay-to",
+    "--cue-paint-stroke-width",
     "--cue-radius-control",
     "--cue-radius-overlay",
+    "--cue-radius-scale",
     "--cue-scrim",
     "--cue-space-1",
     "--cue-space-2",
     "--cue-space-3",
     "--cue-space-4",
     "--cue-space-6",
+    "--cue-style-body-face",
+    "--cue-style-body-leading",
+    "--cue-style-body-size",
+    "--cue-style-body-weight",
+    "--cue-style-control-face",
+    "--cue-style-display-variation",
+    "--cue-style-heading-ink",
+    "--cue-style-label-case",
+    "--cue-style-label-face",
+    "--cue-style-label-ink",
+    "--cue-style-label-size",
+    "--cue-style-label-tracking",
+    "--cue-style-label-weight",
+    "--cue-style-menu-highlight",
+    "--cue-style-menu-item-radius",
+    "--cue-style-overlay-ground",
+    "--cue-style-overlay-title-leading",
+    "--cue-style-overlay-title-size",
+    "--cue-style-quiet-ink",
+    "--cue-style-title-face",
+    "--cue-style-title-weight",
     "--cue-surface-2",
     "--cue-text-emphasis",
     "--cue-text-label",
+    "--cue-text-micro",
     "--cue-text-ui",
-    "--cue-tracking-caps"
+    "--cue-tracking-caps",
+    "--cue-tracking-caps-loose",
+    "--cue-tracking-caps-tight"
   ],
   "summary": "A modal that asks one question with two answers, for anything irreversible.",
   "examples": [

package/manifest/components/app-bar.json

@@ -20,7 +20,7 @@
     {
       "name": "Root",
       "usage": "AppBar.Root",
-      "description": "The bar across the top of a document: brand, navigation, actions.\n\nOne rung of the chrome ladder tall, from `--cue-chrome-toolbar` — the same\ntoken `Toolbar` and the docs site's hand-rolled header use, so a page that\nstacks a bar on a toolbar gets two equal strips rather than two guesses.\n\nSticky by default, and translucent because of it: a bar pinned over scrolling\ncontent needs a ground, and `bg-surface-1/95` plus `backdrop-blur` says\n\"there is content under this\" where an opaque fill would claim the content\nends here. `z-40` is above the page and below the `z-50` this library's\noverlays float at, so a menu opened from the bar is never behind it.\n\n**This is a bar, not a menu.** `NavigationMenu` is the mega-menu — triggers\nthat open panels — and it goes *inside* an `AppBar.Nav` when a section has\nchildren. This component is the strip it sits in.\n\nStatic markup — no `\"use client\"` on this module, deliberately: a site header\nis where a framework reads its data, so the bar has to be renderable from a\nserver component. The one part with state is the navigation's scroller, and\nthe client boundary is drawn around that alone (`_edge-scroller.tsx`).\n\nIt adds **no viewport breakpoint**. `AppShell` holds the library's only one,\nfor navigation shape, and a horizontal bar does not need it: the brand and\nthe actions are `shrink-0`, the navigation between them takes the remaining\nwidth and scrolls inside it, so a 390px viewport gets the same bar with a\nshorter window onto the same links rather than a second layout to maintain.",
+      "description": "The bar across the top of a document: brand, navigation, actions.\n\nOne rung of the chrome ladder tall, from `--cue-chrome-toolbar` — the same\ntoken `Toolbar` and the docs site's hand-rolled header use, so a page that\nstacks a bar on a toolbar gets two equal strips rather than two guesses.\nA style set may make it taller, lighten, drop or dash its rule and widen its\ninline inset (`style-appbar-height`, `style-chrome-rule`,\n`style-chrome-rule-style`, `style-appbar-inset`); under a set that names\nnone of them it is exactly this.\n\nSticky by default, and translucent because of it: a bar pinned over scrolling\ncontent needs a ground, and `bg-surface-1/95` plus `backdrop-blur` says\n\"there is content under this\" where an opaque fill would claim the content\nends here. `z-40` is above the page and below the `z-50` this library's\noverlays float at, so a menu opened from the bar is never behind it.\n\n**This is a bar, not a menu.** `NavigationMenu` is the mega-menu — triggers\nthat open panels — and it goes *inside* an `AppBar.Nav` when a section has\nchildren. This component is the strip it sits in.\n\nStatic markup — no `\"use client\"` on this module, deliberately: a site header\nis where a framework reads its data, so the bar has to be renderable from a\nserver component. The one part with state is the navigation's scroller, and\nthe client boundary is drawn around that alone (`_edge-scroller.tsx`).\n\nIt adds **no viewport breakpoint**. `AppShell` holds the library's only one,\nfor navigation shape, and a horizontal bar does not need it: the brand and\nthe actions are `shrink-0`, the navigation between them takes the remaining\nwidth and scrolls inside it, so a 390px viewport gets the same bar with a\nshorter window onto the same links rather than a second layout to maintain.",
       "props": [
         {
           "name": "sticky",
@@ -140,7 +140,7 @@
     {
       "name": "Link",
       "usage": "AppBar.Link",
-      "description": "One destination in the bar.\n\nA `Link`, so `render={<NextLink href=\"/x\" />}` composes it with a router and\n`external` gives an outbound link its `↗`, plus the bar's type register and\nthe `shrink-0` that keeps a label from being squeezed into an ellipsis while\nthe navigation around it scrolls.",
+      "description": "One destination in the bar.\n\nA `Link`, so `render={<NextLink href=\"/x\" />}` composes it with a router and\n`external` gives an outbound link its `↗`, plus the bar's type register and\nthe `shrink-0` that keeps a label from being squeezed into an ellipsis while\nthe navigation around it scrolls.\n\nThe register is mono at the UI size by default. A style set may change its\nface, case, tracking, size and weight, pad it, and give it a hover ground\n(the `style-nav-*` names), which is how a Look's header links follow it.",
       "props": [
         {
           "name": "register",
@@ -230,11 +230,32 @@
     "--cue-edge-fade",
     "--cue-fg",
     "--cue-fg-muted",
+    "--cue-focus",
+    "--cue-focus-ring",
     "--cue-font-mono",
     "--cue-icon-sm",
+    "--cue-paint-fade-length",
+    "--cue-paint-glass-fallback-ink",
+    "--cue-paint-glass-filter",
+    "--cue-paint-glass-ink",
+    "--cue-radius-control",
     "--cue-space-3",
     "--cue-space-4",
     "--cue-space-5",
+    "--cue-style-appbar-height",
+    "--cue-style-appbar-inset",
+    "--cue-style-chrome-rule",
+    "--cue-style-chrome-rule-style",
+    "--cue-style-focus-width",
+    "--cue-style-hover-ink",
+    "--cue-style-nav-case",
+    "--cue-style-nav-face",
+    "--cue-style-nav-hover-ground",
+    "--cue-style-nav-pad",
+    "--cue-style-nav-size",
+    "--cue-style-nav-tracking",
+    "--cue-style-nav-weight",
+    "--cue-style-quiet-ink",
     "--cue-surface-1",
     "--cue-text-ui"
   ],

package/manifest/components/app-shell.json

@@ -417,6 +417,11 @@
     "--cue-font-mono",
     "--cue-nav-width",
     "--cue-pad-row-x",
+    "--cue-paint-fade",
+    "--cue-paint-texture",
+    "--cue-paint-texture-blend",
+    "--cue-paint-texture-opacity",
+    "--cue-paint-texture-size",
     "--cue-space-3",
     "--cue-space-4",
     "--cue-space-5",

package/manifest/components/ask-box.json

@@ -241,11 +241,12 @@
   "variants": {},
   "defaultVariants": {},
   "tokensUsed": [
-    "--cue-accent",
     "--cue-border",
     "--cue-fg",
     "--cue-fg-muted",
     "--cue-fg-subtle",
+    "--cue-focus",
+    "--cue-focus-ring",
     "--cue-font-mono",
     "--cue-icon-sm",
     "--cue-leading-ui",
@@ -254,6 +255,7 @@
     "--cue-space-2",
     "--cue-space-3",
     "--cue-space-4",
+    "--cue-style-focus-width",
     "--cue-surface-1",
     "--cue-text-body",
     "--cue-text-label",