@cueplusplus/ui 0.12.0 → 0.14.0

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

@@ -1,6 +1,7 @@
 import { TokenOverrides } from "./overrides.js";
 import * as React from "react";
-import { Density, FontName, Mode, ThemeManifest, ThemeName } from "@cueplusplus/theme-base";
+import { StyleSet } from "@cueplusplus/tokens";
+import { Density as Density$1, FontName, Mode, ThemeManifest, ThemeName } from "@cueplusplus/theme-base";
 //#region src/system/theme-provider.d.ts
 /** A mode that has been resolved to an actual palette — `"system"` never survives this far. */
 type ResolvedMode = "dark" | "light";
@@ -15,21 +16,48 @@ interface ThemeContextValue {
    */
   manifest: ThemeManifest | null;
   /** Density the *provider* holds — a nested `<Density>` island does not change it. */
-  density: Density;
+  density: Density$1;
   /** Mode as chosen, including the literal `"system"`. */
   mode: Mode;
   /** Active font pairing. */
   font: FontName;
+  /**
+   * The style set in force, or `null` when nothing has chosen one — which is
+   * every application that has not asked for page composition. `null` rather
+   * than the default set's name, because the two are different facts: no
+   * attribute is stamped, and `console` is the set a subtree stamps to say it is
+   * the ordinary thing inside a page that is not.
+   *
+   * *In force*, not *named here*: a provider that names no set reports the one
+   * stamped around it, exactly as the DOM resolves it, so this and the
+   * `StyleSetContext` the portal and stage stamps read are one value.
+   */
+  styleSet: StyleSet | null;
   /** Mode after resolving `"system"` against `prefers-color-scheme`. */
   resolvedMode: ResolvedMode;
   /** Switch theme and persist the new preference triple. */
   setTheme: (theme: ThemeName) => void;
   /** Switch the provider-level density and persist the new preference triple. */
-  setDensity: (density: Density) => void;
+  setDensity: (density: Density$1) => void;
   /** Switch mode (`"system"` included) and persist the new preference triple. */
   setMode: (mode: Mode) => void;
   /** Switch the font pairing and persist the new preference. */
   setFont: (font: FontName) => void;
+  /**
+   * Switch the style set this provider names, and persist the preference.
+   *
+   * `null` means *this provider names none* — not *no set applies*. The
+   * provider stops stamping `data-style`, so a nested one under an outer
+   * `editorial` page goes back to inheriting `editorial`, and `styleSet`
+   * above reports it, because that is what the DOM resolves to. At the root,
+   * where nothing is stamped around it, `null` and "no set" coincide.
+   *
+   * To positively leave an inherited set rather than stop naming one, pass
+   * {@link DEFAULT_STYLE_SET}: it stamps an attribute whose block restates the
+   * `:root` defaults token for token, which is the only thing that can
+   * out-specify an ancestor's in a cascade.
+   */
+  setStyleSet: (next: StyleSet | null) => void;
 }
 /** Provider-owned font-family overrides that detached portals must republish. */
 interface FontFamilies {
@@ -89,7 +117,7 @@ interface ThemeProviderProps {
    * Changing it after mount adopts the new value; dropping it does not — a
    * parent that stops naming a rung is not asking to move back to the theme's.
    */
-  density?: Density;
+  density?: Density$1;
   /** Initial mode. Defaults to `"dark"`; `"system"` tracks `prefers-color-scheme`. */
   mode?: Mode;
   /**
@@ -112,6 +140,30 @@ interface ThemeProviderProps {
    * needs nothing from this library but `data-font` on a `<div>`.
    */
   font?: FontName;
+  /**
+   * Page composition for this subtree: `console`, `editorial` or `marketing`.
+   *
+   * **`styleSet`, not `style`.** This interface already has a
+   * `style?: React.CSSProperties` a few lines below, applied to the provider
+   * root, and a second meaning for that name would be the one collision every
+   * consumer of this component would have to think about. The DOM attribute is
+   * `data-style`, matching the four public axes — `data-cue-*` is this tree's
+   * prefix for *internal* attributes (`data-cue-theme`, `data-cue-fidelity`), and
+   * a public axis wearing the internal prefix would be the more confusing of the
+   * two mistakes.
+   *
+   * Unset, **no attribute is stamped at all**, and that is the promise: an
+   * application that has never heard of this axis renders the markup it rendered
+   * before it existed and stores the preference object it stored before it
+   * existed. A style set is opt-in page composition, not a fourth thing every
+   * page has.
+   *
+   * Like the other three axes this is an *initial* value the provider then holds
+   * as state, so `setStyleSet` can drive it; a changed prop is adopted after
+   * mount. Unlike the font pairing it has an island form, so a nested provider
+   * holds its own rather than handing the axis up to the root.
+   */
+  styleSet?: StyleSet;
   /** Multiplier on every text token, published as `--cue-font-scale`. Defaults to `1`. */
   fontScale?: number;
   /** Optional app-owned font stacks, published as inline CUE font custom properties. */
@@ -184,6 +236,29 @@ interface ThemeProviderProps {
   storageKey?: string;
   /** Restore and write root preferences in localStorage. Defaults to `true`. */
   persistPreferences?: boolean;
+  /**
+   * The Content-Security-Policy nonce for the density override layer.
+   *
+   * When `overrides.densities` is set this provider emits one `<style>`
+   * element (see {@link ThemeProviderProps.overrides}). Under a policy of
+   * `style-src-elem 'self' 'nonce-<per-request>'` the browser refuses that
+   * element on every page load, because an element React renders on the client
+   * cannot pick up a server nonce by itself. Pass the request's nonce here and
+   * it is set on the element.
+   *
+   * Nothing else in this library emits a `<style>` element, and
+   * `prepaintScript()` returns a *string* the application renders in a
+   * `<script>` of its own — so the application already controls that element's
+   * nonce, and this prop is the whole of what a strict policy needs from here.
+   *
+   * **A nonce cannot rescue a style ATTRIBUTE**, and this provider always sets
+   * one on its root: `color-scheme` and `--cue-font-scale`, plus the font
+   * families and overrides where they are given. CSP has no nonce form for
+   * `style-src-attr` — it is `'unsafe-inline'` or `'none'` — so an application
+   * serving `style-src-attr 'none'` loses those declarations, silently. That is
+   * a policy decision rather than something this prop can change.
+   */
+  nonce?: string;
   /** Stamp the single child element instead of rendering a wrapper `<div>`. */
   asChild?: boolean;
   /** Extra classes for the provider root. */
@@ -200,7 +275,8 @@ interface ThemeProviderProps {
  * registry the three axis hooks read.
  *
  * Rendering: `<div data-cue-root data-theme data-density data-mode style={{ colorScheme, --cue-font-scale }}>`
- * (or the single child when `asChild`). The `theme`/`density`/`font`/`mode` props are
+ * (or the single child when `asChild`), plus `data-style` when — and only when —
+ * a style set is in force. The `theme`/`density`/`font`/`mode`/`styleSet` props are
  * *initial* values — the provider holds the state so `setTheme` and friends can
  * drive it — but a changed prop is adopted after mount, so a controlling parent
  * still works.
@@ -211,7 +287,10 @@ interface ThemeProviderProps {
  * below.
  *
  * Persistence and the pre-paint contract: setters write
- * `{ theme, density, font, mode }` to `localStorage[storageKey]`, which is exactly what
+ * `{ theme, density, font, mode }` to `localStorage[storageKey]`, plus a `style`
+ * key holding the style set when there is one — omitted entirely when there is
+ * not, so an application that never touches that axis writes the same four-key
+ * object it always wrote. That is exactly what
  * {@link prepaintScript} reads to stamp `<html>` before the first paint. The
  * outermost provider keeps `<html>` in sync while the app runs (and restores the
  * previous stamp on unmount) so the page ground, UA scrollbars and form controls
@@ -229,6 +308,6 @@ interface ThemeProviderProps {
  *   <App />
  * </ThemeProvider>
  */
-declare function ThemeProvider({ themes: themesProp, theme: themeProp, density: densityProp, mode: modeProp, font: fontProp, fontScale, fontFamilies, overrides, storageKey, persistPreferences, asChild, className, style: styleProp, children }: ThemeProviderProps): React.JSX.Element;
+declare function ThemeProvider({ themes: themesProp, theme: themeProp, density: densityProp, mode: modeProp, font: fontProp, styleSet: styleSetProp, fontScale, fontFamilies, overrides, storageKey, persistPreferences, nonce, asChild, className, style: styleProp, children }: ThemeProviderProps): React.JSX.Element;
 //#endregion
 export { FontFamilies, ResolvedMode, ThemeContextValue, ThemeProvider, ThemeProviderProps };

package/dist/system/theme-provider.js

@@ -1,8 +1,8 @@
 "use client";
 import { cn } from "../lib/cn.js";
 import { useIsomorphicInsertionEffect, useIsomorphicLayoutEffect } from "./use-isomorphic-layout-effect.js";
-import { AmbientThemeContext, DensityContext } from "./density.js";
-import { buildRegistry, vocabulary, warnOnce } from "./vocabulary.js";
+import { AmbientThemeContext, DensityContext, StyleSetContext } from "./density.js";
+import { buildRegistry, isStyleSet, vocabulary, warnOnce } from "./vocabulary.js";
 import { OverridesContext, inlineOverrides, overridesCss, reportOverrides } from "./overrides.js";
 import { DEFAULT_STORAGE_KEY } from "./prepaint.js";
 import { ThemeRegistryContext } from "./theme-registry.js";
@@ -115,13 +115,19 @@ function acceptedPreferences(vocab, stored, fallback) {
 		theme,
 		density: vocab.acceptsDensity(theme, stored.density) ? stored.density : vocab.acceptsDensity(theme, fallback.density) ? fallback.density : vocab.preferredDensity(theme),
 		font: vocab.acceptsFont(theme, stored.font) ? stored.font : vocab.acceptsFont(theme, fallback.font) ? fallback.font : vocab.preferredFont(theme),
-		mode: isOneOf(MODES, stored.mode) ? stored.mode : fallback.mode
+		mode: isOneOf(MODES, stored.mode) ? stored.mode : fallback.mode,
+		styleSet: isStyleSet(stored.style) ? stored.style : fallback.styleSet
 	};
 }
 function writePreferences(storageKey, preferences) {
 	if (typeof localStorage === "undefined") return;
+	const { styleSet, ...axes } = preferences;
+	const payload = styleSet === null ? axes : {
+		...axes,
+		style: styleSet
+	};
 	try {
-		localStorage.setItem(storageKey, JSON.stringify(preferences));
+		localStorage.setItem(storageKey, JSON.stringify(payload));
 	} catch {}
 }
 /**
@@ -131,7 +137,8 @@ function writePreferences(storageKey, preferences) {
 * registry the three axis hooks read.
 *
 * Rendering: `<div data-cue-root data-theme data-density data-mode style={{ colorScheme, --cue-font-scale }}>`
-* (or the single child when `asChild`). The `theme`/`density`/`font`/`mode` props are
+* (or the single child when `asChild`), plus `data-style` when — and only when —
+* a style set is in force. The `theme`/`density`/`font`/`mode`/`styleSet` props are
 * *initial* values — the provider holds the state so `setTheme` and friends can
 * drive it — but a changed prop is adopted after mount, so a controlling parent
 * still works.
@@ -142,7 +149,10 @@ function writePreferences(storageKey, preferences) {
 * below.
 *
 * Persistence and the pre-paint contract: setters write
-* `{ theme, density, font, mode }` to `localStorage[storageKey]`, which is exactly what
+* `{ theme, density, font, mode }` to `localStorage[storageKey]`, plus a `style`
+* key holding the style set when there is one — omitted entirely when there is
+* not, so an application that never touches that axis writes the same four-key
+* object it always wrote. That is exactly what
 * {@link prepaintScript} reads to stamp `<html>` before the first paint. The
 * outermost provider keeps `<html>` in sync while the app runs (and restores the
 * previous stamp on unmount) so the page ground, UA scrollbars and form controls
@@ -160,9 +170,10 @@ function writePreferences(storageKey, preferences) {
 *   <App />
 * </ThemeProvider>
 */
-function ThemeProvider({ themes: themesProp, theme: themeProp, density: densityProp, mode: modeProp = DEFAULT_MODE, font: fontProp, fontScale = 1, fontFamilies, overrides, storageKey = DEFAULT_STORAGE_KEY, persistPreferences = true, asChild = false, className, style: styleProp, children }) {
+function ThemeProvider({ themes: themesProp, theme: themeProp, density: densityProp, mode: modeProp = DEFAULT_MODE, font: fontProp, styleSet: styleSetProp, fontScale = 1, fontFamilies, overrides, storageKey = DEFAULT_STORAGE_KEY, persistPreferences = true, nonce, asChild = false, className, style: styleProp, children }) {
 	const ambient = React.useContext(ThemeContext);
 	const isRoot = ambient === null;
+	const outerStyleSet = React.useContext(StyleSetContext);
 	const ambientRegistry = React.useContext(ThemeRegistryContext);
 	const themes = themesProp ?? ambientRegistry?.themes ?? EMPTY;
 	const vocab = React.useMemo(() => vocabulary(themes), [themes]);
@@ -187,9 +198,11 @@ function ThemeProvider({ themes: themesProp, theme: themeProp, density: densityP
 	const initialTheme = themeProp ?? (isRoot ? themes[0]?.name : ambient?.theme) ?? DEFAULT_THEME;
 	const initialDensity = densityProp ?? vocab.preferredDensity(initialTheme);
 	const initialFont = fontProp ?? vocab.preferredFont(initialTheme);
+	const initialStyleSet = styleSetProp ?? (isRoot ? null : outerStyleSet);
 	const [theme, setThemeState] = React.useState(initialTheme);
 	const [densityState, setDensityState] = React.useState(initialDensity);
 	const [mode, setModeState] = React.useState(modeProp);
+	const [styleSet, setStyleSetState] = React.useState(initialStyleSet);
 	const [storedSeed] = React.useState(() => {
 		if (!isRoot || !persistPreferences) return {
 			theme: initialTheme,
@@ -230,13 +243,15 @@ function ThemeProvider({ themes: themesProp, theme: themeProp, density: densityP
 			theme,
 			density,
 			font,
-			mode
+			mode,
+			styleSet
 		});
 		setThemeState(next.theme);
 		setDensityState(next.density);
 		setRootFontState(next.font);
 		setModeState(next.mode);
-		if (stored.theme !== void 0 && stored.theme !== next.theme || stored.density !== void 0 && stored.density !== next.density || stored.font !== void 0 && stored.font !== next.font || stored.mode !== void 0 && stored.mode !== next.mode) writePreferences(storageKey, next);
+		setStyleSetState(next.styleSet);
+		if (stored.theme !== void 0 && stored.theme !== next.theme || stored.density !== void 0 && stored.density !== next.density || stored.font !== void 0 && stored.font !== next.font || stored.mode !== void 0 && stored.mode !== next.mode || stored.style !== void 0 && !isStyleSet(stored.style)) writePreferences(storageKey, next);
 	}, [
 		isRoot,
 		persistPreferences,
@@ -246,7 +261,8 @@ function ThemeProvider({ themes: themesProp, theme: themeProp, density: densityP
 		theme: themeProp,
 		density: densityProp,
 		mode: modeProp,
-		font: fontProp
+		font: fontProp,
+		styleSet: styleSetProp
 	});
 	React.useEffect(() => {
 		const previous = lastProps.current;
@@ -254,17 +270,20 @@ function ThemeProvider({ themes: themesProp, theme: themeProp, density: densityP
 			theme: themeProp,
 			density: densityProp,
 			mode: modeProp,
-			font: fontProp
+			font: fontProp,
+			styleSet: styleSetProp
 		};
 		if (previous.theme !== themeProp && themeProp !== void 0) setThemeState(themeProp);
 		if (previous.density !== densityProp && densityProp !== void 0) setDensityState(densityProp);
 		if (previous.mode !== modeProp) setModeState(modeProp);
 		if (previous.font !== fontProp && fontProp !== void 0) setRootFontState(fontProp);
+		if (previous.styleSet !== styleSetProp && styleSetProp !== void 0) setStyleSetState(styleSetProp);
 	}, [
 		themeProp,
 		densityProp,
 		modeProp,
-		fontProp
+		fontProp,
+		styleSetProp
 	]);
 	useIsomorphicLayoutEffect(() => {
 		if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
@@ -278,14 +297,16 @@ function ThemeProvider({ themes: themesProp, theme: themeProp, density: densityP
 		theme,
 		density: densityState,
 		mode,
-		font: rawFont
+		font: rawFont,
+		styleSet
 	});
 	useIsomorphicLayoutEffect(() => {
 		stateRef.current = {
 			theme,
 			density: densityState,
 			mode,
-			font: rawFont
+			font: rawFont,
+			styleSet
 		};
 	});
 	const persist = React.useCallback((patch) => {
@@ -319,6 +340,10 @@ function ThemeProvider({ themes: themesProp, theme: themeProp, density: densityP
 	}, [persist]);
 	/** Nested providers hand the axis straight up: one document, one pairing. */
 	const setFont = isRoot ? rootSetFont : ambient.setFont;
+	const setStyleSet = React.useCallback((next) => {
+		setStyleSetState(next);
+		persist({ styleSet: next });
+	}, [persist]);
 	const originalStamp = React.useRef(null);
 	useIsomorphicInsertionEffect(() => {
 		if (!isRoot || typeof document === "undefined") return;
@@ -327,7 +352,8 @@ function ThemeProvider({ themes: themesProp, theme: themeProp, density: densityP
 			theme,
 			density,
 			font,
-			mode
+			mode,
+			styleSet
 		};
 		const next = restored || !persistPreferences ? current : acceptedPreferences(vocab, readPreferences(storageKey), current);
 		originalStamp.current ??= {
@@ -335,6 +361,7 @@ function ThemeProvider({ themes: themesProp, theme: themeProp, density: densityP
 			density: root.getAttribute("data-density"),
 			font: root.getAttribute("data-font"),
 			mode: root.getAttribute("data-mode"),
+			style: root.getAttribute("data-style"),
 			colorScheme: root.style.colorScheme
 		};
 		const write = (name, value) => {
@@ -344,6 +371,9 @@ function ThemeProvider({ themes: themesProp, theme: themeProp, density: densityP
 		write("data-density", next.density);
 		write("data-font", next.font);
 		write("data-mode", next.mode);
+		if (next.styleSet === null) {
+			if (root.hasAttribute("data-style")) root.removeAttribute("data-style");
+		} else write("data-style", next.styleSet);
 		const scheme = (themes.find((m) => m.name === next.theme) ?? null)?.supportsLight === false ? "dark" : next.mode === "system" ? "light dark" : next.mode;
 		if (root.style.colorScheme !== scheme) root.style.colorScheme = scheme;
 	}, [
@@ -355,6 +385,7 @@ function ThemeProvider({ themes: themesProp, theme: themeProp, density: densityP
 		density,
 		font,
 		mode,
+		styleSet,
 		themes,
 		vocab
 	]);
@@ -371,30 +402,36 @@ function ThemeProvider({ themes: themesProp, theme: themeProp, density: densityP
 		restore("data-density", original.density);
 		restore("data-font", original.font);
 		restore("data-mode", original.mode);
+		restore("data-style", original.style);
 		root.style.colorScheme = original.colorScheme;
 	}, []);
+	const effectiveStyleSet = styleSet ?? outerStyleSet;
 	const contextValue = React.useMemo(() => ({
 		theme,
 		manifest,
 		density,
 		mode,
 		font,
+		styleSet: effectiveStyleSet,
 		resolvedMode,
 		setTheme,
 		setDensity,
 		setMode,
-		setFont
+		setFont,
+		setStyleSet
 	}), [
 		theme,
 		manifest,
 		density,
 		mode,
 		font,
+		effectiveStyleSet,
 		resolvedMode,
 		setTheme,
 		setDensity,
 		setMode,
-		setFont
+		setFont,
+		setStyleSet
 	]);
 	/** The axes on offer under the theme that is actually active. */
 	const registry = React.useMemo(() => buildRegistry(themes, theme), [themes, theme]);
@@ -452,7 +489,8 @@ function ThemeProvider({ themes: themesProp, theme: themeProp, density: densityP
 		"data-cue-root": "",
 		"data-theme": theme,
 		"data-density": density,
-		"data-mode": mode
+		"data-mode": mode,
+		...styleSet === null ? null : { "data-style": styleSet }
 	};
 	let root;
 	if (asChild) {
@@ -472,6 +510,7 @@ function ThemeProvider({ themes: themesProp, theme: themeProp, density: densityP
 		children
 	});
 	const densityLayer = overridesStyle === "" ? null : /* @__PURE__ */ jsx("style", {
+		...nonce === void 0 ? null : { nonce },
 		"data-cue-overrides": "",
 		children: overridesStyle
 	});
@@ -487,9 +526,12 @@ function ThemeProvider({ themes: themesProp, theme: themeProp, density: densityP
 						value: effectiveFontFamilies,
 						children: /* @__PURE__ */ jsx(OverridesContext.Provider, {
 							value: effectiveOverrides,
-							children: /* @__PURE__ */ jsxs(DensityContext.Provider, {
+							children: /* @__PURE__ */ jsx(DensityContext.Provider, {
 								value: density,
-								children: [root, densityLayer]
+								children: /* @__PURE__ */ jsxs(StyleSetContext.Provider, {
+									value: effectiveStyleSet,
+									children: [root, densityLayer]
+								})
 							})
 						})
 					})

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, resolvedMode, setTheme,
- * setDensity, setMode, setFont }`.
+ * Returns `{ theme, manifest, density, mode, font, styleSet, resolvedMode,
+ * setTheme, setDensity, setMode, setFont, setStyleSet }`.
  * `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
@@ -12,6 +12,13 @@ import { ThemeContextValue } from "./theme-provider.js";
  * when that name is not in the provider's `themes` — which is every name in an
  * app that has registered none; `useThemes()` is what was registered.
  *
+ * `styleSet` is the page-composition set in force, or `null` when nothing has
+ * chosen one — which is every application that has not asked for it. *In
+ * force*, not *named here*: a provider that names no set of its own reports the
+ * one stamped around it — a `<Density styleSet>` island between it and an outer
+ * provider included — exactly as the DOM resolves it, so this and the set a
+ * portal or a `<Preview>` stage carries are one value.
+ *
  * @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

@@ -5,8 +5,8 @@ import * as React from "react";
 /**
 * Read and drive the ambient theme state.
 *
-* Returns `{ theme, manifest, density, mode, font, resolvedMode, setTheme,
-* setDensity, setMode, setFont }`.
+* Returns `{ theme, manifest, density, mode, font, styleSet, resolvedMode,
+* setTheme, setDensity, setMode, setFont, setStyleSet }`.
 * `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
@@ -14,6 +14,13 @@ import * as React from "react";
 * when that name is not in the provider's `themes` — which is every name in an
 * app that has registered none; `useThemes()` is what was registered.
 *
+* `styleSet` is the page-composition set in force, or `null` when nothing has
+* chosen one — which is every application that has not asked for it. *In
+* force*, not *named here*: a provider that names no set of its own reports the
+* one stamped around it — a `<Density styleSet>` island between it and an outer
+* provider included — exactly as the DOM resolves it, so this and the set a
+* portal or a `<Preview>` stage carries are one value.
+*
 * @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/vocabulary.d.ts

@@ -1,4 +1,5 @@
-import { Density, DensityEntry, FontEntry, FontName, ThemeManifest } from "@cueplusplus/theme-base";
+import { StyleSet } from "@cueplusplus/tokens";
+import { Density as Density$1, DensityEntry, FontEntry, FontName, ThemeManifest } from "@cueplusplus/theme-base";
 //#region src/system/vocabulary.d.ts
 /** What the three registry hooks read: the manifests, and the axes the ACTIVE theme offers. */
 interface ThemeRegistry {

package/dist/system/vocabulary.js

@@ -1,4 +1,4 @@
-import { DEFAULT_DENSITY, DEFAULT_FONT } from "@cueplusplus/tokens";
+import { DEFAULT_DENSITY, DEFAULT_FONT, STYLE_SETS } from "@cueplusplus/tokens";
 import { DENSITIES, FONTS, THEME_NAME_PATTERN, resolveDensities, resolveFonts } from "@cueplusplus/theme-base";
 //#region src/system/vocabulary.ts
 /**
@@ -68,6 +68,20 @@ function vocabulary(themes) {
 		supportsLight: (theme) => theme === null ? true : byName.get(theme)?.supportsLight ?? true
 	};
 }
+/**
+* Whether a value is one of the three 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
+* theme may add a rung or a pairing and a name accepted under the wrong theme
+* stamps an attribute no block matches. No theme can add a style set — the axis
+* is emitted by `@cueplusplus/tokens` and no manifest field describes it — so
+* there is nothing per-theme to ask and a per-theme signature would be three
+* parameters pretending to be a rule.
+*/
+function isStyleSet(value) {
+	return typeof value === "string" && STYLE_SETS.includes(value);
+}
 /** Derive the context value. Pure; the provider memoises it on `themes` and the active name. */
 function buildRegistry(themes, active) {
 	return {
@@ -108,4 +122,4 @@ function noteOnce(message) {
 	console.info(`[cue] ${message}`);
 }
 //#endregion
-export { buildRegistry, noteOnce, vocabulary, warnOnce };
+export { buildRegistry, isStyleSet, noteOnce, vocabulary, warnOnce };

package/manifest/components/accordion.json

@@ -138,6 +138,7 @@
     "--cue-fg-subtle",
     "--cue-font-mono",
     "--cue-icon-sm",
+    "--cue-leading-ui",
     "--cue-pad-row-x",
     "--cue-space-1",
     "--cue-space-3",

package/manifest/components/agent-card.json

@@ -113,6 +113,7 @@
     "--cue-border",
     "--cue-fg-muted",
     "--cue-fg-subtle",
+    "--cue-leading-ui",
     "--cue-ok",
     "--cue-radius-control",
     "--cue-radius-overlay",

package/manifest/components/agent-handoff.json

@@ -72,6 +72,7 @@
     "--cue-border",
     "--cue-fg-muted",
     "--cue-fg-subtle",
+    "--cue-leading-ui",
     "--cue-stream",
     "--cue-text-ui"
   ],

package/manifest/components/alert-dialog.json

@@ -173,6 +173,7 @@
     "--cue-fg-muted",
     "--cue-fg-subtle",
     "--cue-font-mono",
+    "--cue-leading-ui",
     "--cue-radius-control",
     "--cue-radius-overlay",
     "--cue-scrim",

package/manifest/components/ask-box.json

@@ -248,6 +248,7 @@
     "--cue-fg-subtle",
     "--cue-font-mono",
     "--cue-icon-sm",
+    "--cue-leading-ui",
     "--cue-ok",
     "--cue-radius-surface",
     "--cue-space-2",

package/manifest/components/autocomplete.json

@@ -218,6 +218,7 @@
     "--cue-focus",
     "--cue-font-mono",
     "--cue-icon-sm",
+    "--cue-leading-ui",
     "--cue-radius-control",
     "--cue-radius-overlay",
     "--cue-scrim",