@cueplusplus/ui 0.14.1 → 0.15.0

package/dist/primitives/chip.js

@@ -44,8 +44,8 @@ const chipVariants = cva("inline-flex h-chip select-none items-center justify-ce
 			info: "border-info/35 text-info"
 		},
 		variant: {
-			tinted: "px-(--cue-space-3) text-(length:--cue-text-label) tracking-[0.15em]",
-			outline: "bg-transparent px-(--cue-space-3) text-(length:--cue-text-label) tracking-[0.15em]",
+			tinted: "px-(--cue-space-3) text-(length:--cue-text-label) tracking-(--cue-tracking-caps)",
+			outline: "bg-transparent px-(--cue-space-3) text-(length:--cue-text-label) tracking-(--cue-tracking-caps)",
 			tag: "bg-transparent px-(--cue-space-2) text-(length:--cue-text-micro) tracking-[0.06em]"
 		},
 		interactive: {

package/dist/system/density.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { StyleSet } from "@cueplusplus/tokens";
+import { Paint, StyleSet } from "@cueplusplus/tokens";
 import { Density as Density$1 } from "@cueplusplus/theme-base";
 //#region src/system/density.d.ts
 interface DensityProps {
@@ -8,6 +8,15 @@ interface DensityProps {
    * `large` or `ultra-large`.
    */
   density: Density$1;
+  /**
+   * A look pack for this subtree.
+   *
+   * Optional, and **absent means inherit**, exactly as `styleSet` is: an island
+   * that names none stamps no `data-paint` and passes the ambient pack straight
+   * through. `none` is a *value*, not an absence — it restates the `:root`
+   * defaults, so a subtree stamps it to opt out of a pack its parent set.
+   */
+  paint?: Paint;
   /**
    * A style set for this subtree: `console`, `editorial` or `marketing`.
    *
@@ -68,6 +77,6 @@ interface DensityProps {
  *   <Toolbar />
  * </Density>
  */
-declare function Density$2({ density, styleSet, children, className, style }: DensityProps): React.JSX.Element;
+declare function Density$2({ density, styleSet, paint, children, className, style }: DensityProps): React.JSX.Element;
 //#endregion
 export { Density$2 as Density, DensityProps };

package/dist/system/density.js

@@ -57,6 +57,21 @@ const AmbientThemeContext = React.createContext(null);
 */
 const StyleSetContext = React.createContext(null);
 /**
+* The look pack stamped around this subtree, or `null` when none is.
+*
+* The fifth axis's counterpart to {@link StyleSetContext}, and internal for the
+* same reasons: a provider publishes this and its `ThemeContext.paint` from one
+* value, a `<Density paint>` island re-scopes it without a `ThemeContext` of its
+* own, and `Preview`'s stage and the portal stamp both leave the DOM they were
+* written in and have to carry the answer with them.
+*
+* `null` is not `"none"`. Absent means *inherit*; `none` is a pack that restates
+* the `:root` defaults, which is what a subtree stamps to opt OUT of an ambient
+* pack. Collapsing the two would make every unpainted subtree override its
+* parent instead of inheriting from it.
+*/
+const PaintContext = React.createContext(null);
+/**
 * Re-scope any subtree to a different density level.
 *
 * Renders a plain `<div data-density="…" data-cue-theme="…">`: the geometry
@@ -89,23 +104,28 @@ const StyleSetContext = React.createContext(null);
 *   <Toolbar />
 * </Density>
 */
-function Density({ density, styleSet, children, className, style }) {
+function Density({ density, styleSet, paint, children, className, style }) {
 	const theme = React.useContext(AmbientThemeContext);
 	const ambientStyleSet = React.useContext(StyleSetContext);
+	const ambientPaint = React.useContext(PaintContext);
 	return /* @__PURE__ */ jsx(DensityContext.Provider, {
 		value: density,
 		children: /* @__PURE__ */ jsx(StyleSetContext.Provider, {
 			value: styleSet ?? ambientStyleSet,
-			children: /* @__PURE__ */ jsx("div", {
-				"data-density": density,
-				"data-cue-theme": theme ?? void 0,
-				"data-style": styleSet ?? void 0,
-				className,
-				style,
-				children
+			children: /* @__PURE__ */ jsx(PaintContext.Provider, {
+				value: paint ?? ambientPaint,
+				children: /* @__PURE__ */ jsx("div", {
+					"data-density": density,
+					"data-cue-theme": theme ?? void 0,
+					"data-style": styleSet ?? void 0,
+					"data-paint": paint ?? void 0,
+					className,
+					style,
+					children
+				})
 			})
 		})
 	});
 }
 //#endregion
-export { AmbientThemeContext, DEFAULT_DENSITY, Density, DensityContext, StyleSetContext };
+export { AmbientThemeContext, DEFAULT_DENSITY, Density, DensityContext, PaintContext, StyleSetContext };

package/dist/system/portal.js

@@ -1,7 +1,7 @@
 "use client";
 import { useIsomorphicLayoutEffect } from "./use-isomorphic-layout-effect.js";
 import { AgentSkinContext } from "./agent-skin.js";
-import { DensityContext, StyleSetContext } from "./density.js";
+import { DensityContext, PaintContext, StyleSetContext } from "./density.js";
 import { OverridesContext } from "./overrides.js";
 import { FontFamiliesContext, FontScaleContext, ThemeContext } from "./theme-provider.js";
 import * as React from "react";
@@ -31,6 +31,7 @@ function usePortalStamp() {
 	const overrides = React.useContext(OverridesContext);
 	const skin = React.useContext(AgentSkinContext);
 	const styleSet = React.useContext(StyleSetContext);
+	const paint = React.useContext(PaintContext);
 	return {
 		theme: theme?.theme ?? DEFAULT_THEME,
 		density: island ?? theme?.density ?? "compact",
@@ -41,7 +42,8 @@ function usePortalStamp() {
 		overrides,
 		skin: skin?.skin ?? null,
 		fidelity: skin?.fidelity ?? null,
-		styleSet
+		styleSet,
+		paint
 	};
 }
 /**
@@ -97,6 +99,7 @@ function useCuePortalProps() {
 		stamp.density,
 		stamp.font,
 		stamp.styleSet,
+		stamp.paint,
 		stamp.mode,
 		stamp.fontScale,
 		stamp.fontFamilies?.sans,
@@ -132,6 +135,8 @@ function applyStamp(element, stamp) {
 	element.setAttribute("data-mode", stamp.mode);
 	if (stamp.styleSet === null) element.removeAttribute("data-style");
 	else element.setAttribute("data-style", stamp.styleSet);
+	if (stamp.paint === null) element.removeAttribute("data-paint");
+	else element.setAttribute("data-paint", stamp.paint);
 	if (stamp.skin === null) element.removeAttribute("data-cue-skin");
 	else element.setAttribute("data-cue-skin", stamp.skin);
 	if (stamp.fidelity === null) element.removeAttribute("data-cue-fidelity");
@@ -182,6 +187,7 @@ function CuePortalFrame({ children, className, style }) {
 		"data-font": stamp.font,
 		"data-mode": stamp.mode,
 		"data-style": stamp.styleSet ?? void 0,
+		"data-paint": stamp.paint ?? void 0,
 		"data-cue-skin": stamp.skin ?? void 0,
 		"data-cue-fidelity": stamp.fidelity ?? void 0,
 		className,

package/dist/system/prepaint.d.ts

@@ -1,4 +1,4 @@
-import { StyleSet } from "@cueplusplus/tokens";
+import { Paint, StyleSet } from "@cueplusplus/tokens";
 import { Density as Density$1, FontName, Mode, ThemeManifest, ThemeName } from "@cueplusplus/theme-base";
 //#region src/system/prepaint.d.ts
 /** localStorage key the ThemeProvider and the pre-paint script share by default. */
@@ -21,6 +21,13 @@ interface PersistedPreferences {
    * value to hold an opinion about.
    */
   style?: string;
+  /**
+   * Last look pack the user picked, or absent — which is what "no pack" means,
+   * for exactly the reason `style` above gives. An application that never
+   * touches this axis keeps storing the object it always stored, and the
+   * pre-paint script has no sixth value to hold an opinion about.
+   */
+  paint?: string;
 }
 /**
  * The server-authoritative fallback stamped when storage is absent or ignored.
@@ -52,6 +59,16 @@ interface PrepaintDefaults {
    * (stored, then this) rather than four.
    */
   styleSet?: StyleSet;
+  /**
+   * The look pack an unstamped page opens on, or omitted for none.
+   *
+   * The second axis whose absence is a value, and it behaves exactly as
+   * `styleSet` does: omitted means the script REMOVES `data-paint` rather than
+   * stamping a default, because a page in no pack has made no claim about
+   * finish and `[data-paint]` blocks key their whole value-set on the attribute
+   * being there.
+   */
+  paint?: Paint;
 }
 /** Options form for apps whose server projection, not localStorage, owns first paint. */
 interface PrepaintOptions {

package/dist/system/prepaint.js

@@ -1,5 +1,5 @@
 import { vocabulary } from "./vocabulary.js";
-import { DEFAULT_DENSITY, DEFAULT_FONT, STYLE_SETS } from "@cueplusplus/tokens";
+import { DEFAULT_DENSITY, DEFAULT_FONT, PAINTS, STYLE_SETS } from "@cueplusplus/tokens";
 import { MODES } from "@cueplusplus/theme-base";
 //#region src/system/prepaint.ts
 /**
@@ -114,7 +114,13 @@ function prepaintScript(storageKeyOrOptions = DEFAULT_STORAGE_KEY, defaultTheme
 	*/
 	const styleSets = scriptSafe(JSON.stringify([...STYLE_SETS]));
 	const fallbackStyleSet = defaults.styleSet === void 0 ? "null" : jsStringLiteral(defaults.styleSet);
-	return `!function(){try{var k=${key},e=document.documentElement,s=null;` + (readStoredPreferences ? "try{var r=localStorage.getItem(k);s=r?JSON.parse(r):null}catch(_){}" : "") + `s=s&&typeof s=="object"?s:{};var T=${themes},A=${axes},P=/^[a-z][a-z0-9-]*$/i;var t=T?(T.indexOf(s.theme)>-1?s.theme:${fallbackTheme}):(typeof s.theme=="string"&&P.test(s.theme)?s.theme:${fallbackTheme});var a=A[T?t:""]||A[""]||{d:[],f:[]};var d=a.d.indexOf(s.density)>-1?s.density:(a.d.indexOf(${fallbackDensity})>-1?${fallbackDensity}:(a.p&&a.d.indexOf(a.p)>-1?a.p:${baseDensity}));var f=a.f.indexOf(s.font)>-1?s.font:(a.f.indexOf(${fallbackFont})>-1?${fallbackFont}:(a.q&&a.f.indexOf(a.q)>-1?a.q:${baseFont}));var m=${modes}.indexOf(s.mode)>-1?s.mode:${fallbackMode};var S=${styleSets},y=S.indexOf(s.style)>-1?s.style:${fallbackStyleSet};e.setAttribute("data-theme",t);e.setAttribute("data-density",d);e.setAttribute("data-font",f);e.setAttribute("data-mode",m);y?e.setAttribute("data-style",y):e.removeAttribute("data-style");e.style.colorScheme=a.l===false?"dark":(m==="system"?"light dark":m)}catch(_){}}()`;
+	/**
+	* The packs, inlined for the same reason as everything above it, and the
+	* second axis whose absence is a legal value.
+	*/
+	const paints = scriptSafe(JSON.stringify([...PAINTS]));
+	const fallbackPaint = defaults.paint === void 0 ? "null" : jsStringLiteral(defaults.paint);
+	return `!function(){try{var k=${key},e=document.documentElement,s=null;` + (readStoredPreferences ? "try{var r=localStorage.getItem(k);s=r?JSON.parse(r):null}catch(_){}" : "") + `s=s&&typeof s=="object"?s:{};var T=${themes},A=${axes},P=/^[a-z][a-z0-9-]*$/i;var t=T?(T.indexOf(s.theme)>-1?s.theme:${fallbackTheme}):(typeof s.theme=="string"&&P.test(s.theme)?s.theme:${fallbackTheme});var a=A[T?t:""]||A[""]||{d:[],f:[]};var d=a.d.indexOf(s.density)>-1?s.density:(a.d.indexOf(${fallbackDensity})>-1?${fallbackDensity}:(a.p&&a.d.indexOf(a.p)>-1?a.p:${baseDensity}));var f=a.f.indexOf(s.font)>-1?s.font:(a.f.indexOf(${fallbackFont})>-1?${fallbackFont}:(a.q&&a.f.indexOf(a.q)>-1?a.q:${baseFont}));var m=${modes}.indexOf(s.mode)>-1?s.mode:${fallbackMode};var S=${styleSets},y=S.indexOf(s.style)>-1?s.style:${fallbackStyleSet};var G=${paints},g=G.indexOf(s.paint)>-1?s.paint:${fallbackPaint};e.setAttribute("data-theme",t);e.setAttribute("data-density",d);e.setAttribute("data-font",f);e.setAttribute("data-mode",m);y?e.setAttribute("data-style",y):e.removeAttribute("data-style");g?e.setAttribute("data-paint",g):e.removeAttribute("data-paint");e.style.colorScheme=a.l===false?"dark":(m==="system"?"light dark":m)}catch(_){}}()`;
 }
 //#endregion
 export { DEFAULT_STORAGE_KEY, prepaintScript };

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

@@ -1,6 +1,6 @@
 import { TokenOverrides } from "./overrides.js";
 import * as React from "react";
-import { StyleSet } from "@cueplusplus/tokens";
+import { Paint, 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. */
@@ -33,6 +33,14 @@ interface ThemeContextValue {
    * `StyleSetContext` the portal and stage stamps read are one value.
    */
   styleSet: StyleSet | null;
+  /**
+   * The look pack in force on this subtree, or `null`.
+   *
+   * *In force*, not *named here*, exactly as `styleSet` is: a provider that
+   * names no pack reports the one stamped around it, so this and the
+   * `PaintContext` the portal and stage stamps read are one value.
+   */
+  paint: Paint | null;
   /** Mode after resolving `"system"` against `prefers-color-scheme`. */
   resolvedMode: ResolvedMode;
   /** Switch theme and persist the new preference triple. */
@@ -58,6 +66,8 @@ interface ThemeContextValue {
    * out-specify an ancestor's in a cascade.
    */
   setStyleSet: (next: StyleSet | null) => void;
+  /** Switch the look pack and persist it. `null` clears the attribute. */
+  setPaint: (next: Paint | null) => void;
 }
 /** Provider-owned font-family overrides that detached portals must republish. */
 interface FontFamilies {
@@ -164,6 +174,11 @@ interface ThemeProviderProps {
    * holds its own rather than handing the axis up to the root.
    */
   styleSet?: StyleSet;
+  /**
+   * A look pack for this subtree. Opt-in: a provider that names none stamps no
+   * `data-paint`, and a nested one inherits the pack stamped around it.
+   */
+  paint?: Paint;
   /** 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. */
@@ -330,6 +345,6 @@ interface ThemeProviderProps {
  *   <App />
  * </ThemeProvider>
  */
-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;
+declare function ThemeProvider({ themes: themesProp, theme: themeProp, density: densityProp, mode: modeProp, font: fontProp, styleSet: styleSetProp, paint: paintProp, 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, StyleSetContext } from "./density.js";
-import { buildRegistry, isStyleSet, vocabulary, warnOnce } from "./vocabulary.js";
+import { AmbientThemeContext, DensityContext, PaintContext, StyleSetContext } from "./density.js";
+import { buildRegistry, isPaint, 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";
@@ -117,16 +117,21 @@ function acceptedPreferences(vocab, stored, fallback) {
 		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,
-		styleSet: isStyleSet(stored.style) ? stored.style : fallback.styleSet
+		styleSet: isStyleSet(stored.style) ? stored.style : fallback.styleSet,
+		paint: isPaint(stored.paint) ? stored.paint : fallback.paint
 	};
 }
 function writePreferences(storageKey, preferences) {
 	if (typeof localStorage === "undefined") return;
-	const { styleSet, ...axes } = preferences;
-	const payload = styleSet === null ? axes : {
+	const { styleSet, paint, ...axes } = preferences;
+	const withStyle = styleSet === null ? axes : {
 		...axes,
 		style: styleSet
 	};
+	const payload = paint === null ? withStyle : {
+		...withStyle,
+		paint
+	};
 	try {
 		localStorage.setItem(storageKey, JSON.stringify(payload));
 	} catch {}
@@ -171,10 +176,11 @@ function writePreferences(storageKey, preferences) {
 *   <App />
 * </ThemeProvider>
 */
-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 }) {
+function ThemeProvider({ themes: themesProp, theme: themeProp, density: densityProp, mode: modeProp = DEFAULT_MODE, font: fontProp, styleSet: styleSetProp, paint: paintProp, 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 outerPaint = React.useContext(PaintContext);
 	const ambientRegistry = React.useContext(ThemeRegistryContext);
 	const themes = themesProp ?? ambientRegistry?.themes ?? EMPTY;
 	const vocab = React.useMemo(() => vocabulary(themes), [themes]);
@@ -200,10 +206,12 @@ function ThemeProvider({ themes: themesProp, theme: themeProp, density: densityP
 	const initialDensity = densityProp ?? vocab.preferredDensity(initialTheme);
 	const initialFont = fontProp ?? vocab.preferredFont(initialTheme);
 	const initialStyleSet = styleSetProp ?? (isRoot ? null : outerStyleSet);
+	const initialPaint = paintProp ?? (isRoot ? null : outerPaint);
 	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 [paint, setPaintState] = React.useState(initialPaint);
 	const [storedSeed] = React.useState(() => {
 		if (!isRoot || !persistPreferences) return {
 			theme: initialTheme,
@@ -245,14 +253,16 @@ function ThemeProvider({ themes: themesProp, theme: themeProp, density: densityP
 			density,
 			font,
 			mode,
-			styleSet
+			styleSet,
+			paint
 		});
 		setThemeState(next.theme);
 		setDensityState(next.density);
 		setRootFontState(next.font);
 		setModeState(next.mode);
 		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);
+		setPaintState(next.paint);
+		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) || stored.paint !== void 0 && !isPaint(stored.paint)) writePreferences(storageKey, next);
 	}, [
 		isRoot,
 		persistPreferences,
@@ -263,7 +273,8 @@ function ThemeProvider({ themes: themesProp, theme: themeProp, density: densityP
 		density: densityProp,
 		mode: modeProp,
 		font: fontProp,
-		styleSet: styleSetProp
+		styleSet: styleSetProp,
+		paint: paintProp
 	});
 	React.useEffect(() => {
 		const previous = lastProps.current;
@@ -272,19 +283,22 @@ function ThemeProvider({ themes: themesProp, theme: themeProp, density: densityP
 			density: densityProp,
 			mode: modeProp,
 			font: fontProp,
-			styleSet: styleSetProp
+			styleSet: styleSetProp,
+			paint: paintProp
 		};
 		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);
+		if (previous.paint !== paintProp && paintProp !== void 0) setPaintState(paintProp);
 	}, [
 		themeProp,
 		densityProp,
 		modeProp,
 		fontProp,
-		styleSetProp
+		styleSetProp,
+		paintProp
 	]);
 	useIsomorphicLayoutEffect(() => {
 		if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
@@ -299,7 +313,8 @@ function ThemeProvider({ themes: themesProp, theme: themeProp, density: densityP
 		density: densityState,
 		mode,
 		font: rawFont,
-		styleSet
+		styleSet,
+		paint
 	});
 	useIsomorphicLayoutEffect(() => {
 		stateRef.current = {
@@ -307,7 +322,8 @@ function ThemeProvider({ themes: themesProp, theme: themeProp, density: densityP
 			density: densityState,
 			mode,
 			font: rawFont,
-			styleSet
+			styleSet,
+			paint
 		};
 	});
 	const persist = React.useCallback((patch) => {
@@ -345,6 +361,10 @@ function ThemeProvider({ themes: themesProp, theme: themeProp, density: densityP
 		setStyleSetState(next);
 		persist({ styleSet: next });
 	}, [persist]);
+	const setPaint = React.useCallback((next) => {
+		setPaintState(next);
+		persist({ paint: next });
+	}, [persist]);
 	const originalStamp = React.useRef(null);
 	useIsomorphicInsertionEffect(() => {
 		if (!isRoot || typeof document === "undefined") return;
@@ -354,7 +374,8 @@ function ThemeProvider({ themes: themesProp, theme: themeProp, density: densityP
 			density,
 			font,
 			mode,
-			styleSet
+			styleSet,
+			paint
 		};
 		const next = restored || !persistPreferences ? current : acceptedPreferences(vocab, readPreferences(storageKey), current);
 		originalStamp.current ??= {
@@ -363,6 +384,7 @@ function ThemeProvider({ themes: themesProp, theme: themeProp, density: densityP
 			font: root.getAttribute("data-font"),
 			mode: root.getAttribute("data-mode"),
 			style: root.getAttribute("data-style"),
+			paint: root.getAttribute("data-paint"),
 			colorScheme: root.style.colorScheme
 		};
 		const write = (name, value) => {
@@ -375,6 +397,9 @@ function ThemeProvider({ themes: themesProp, theme: themeProp, density: densityP
 		if (next.styleSet === null) {
 			if (root.hasAttribute("data-style")) root.removeAttribute("data-style");
 		} else write("data-style", next.styleSet);
+		if (next.paint === null) {
+			if (root.hasAttribute("data-paint")) root.removeAttribute("data-paint");
+		} else write("data-paint", next.paint);
 		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;
 	}, [
@@ -404,9 +429,19 @@ function ThemeProvider({ themes: themesProp, theme: themeProp, density: densityP
 		restore("data-font", original.font);
 		restore("data-mode", original.mode);
 		restore("data-style", original.style);
+		restore("data-paint", original.paint);
 		root.style.colorScheme = original.colorScheme;
 	}, []);
 	const effectiveStyleSet = styleSet ?? outerStyleSet;
+	/**
+	* The pack in force, for the same reason and with the same caveat: it is what
+	* `useTheme().paint` reports, and it does NOT feed the `data-paint` stamp.
+	* That stays on this provider's own `paint` state, so a root that named none
+	* stamps nothing on itself and nothing on `<html>` however much is stamped
+	* around it — which keeps a `<Density paint>` island out of the document-wide
+	* attribute and out of the storage the pre-paint script reads back.
+	*/
+	const effectivePaint = paint ?? outerPaint;
 	const contextValue = React.useMemo(() => ({
 		theme,
 		manifest,
@@ -414,12 +449,14 @@ function ThemeProvider({ themes: themesProp, theme: themeProp, density: densityP
 		mode,
 		font,
 		styleSet: effectiveStyleSet,
+		paint: effectivePaint,
 		resolvedMode,
 		setTheme,
 		setDensity,
 		setMode,
 		setFont,
-		setStyleSet
+		setStyleSet,
+		setPaint
 	}), [
 		theme,
 		manifest,
@@ -427,12 +464,14 @@ function ThemeProvider({ themes: themesProp, theme: themeProp, density: densityP
 		mode,
 		font,
 		effectiveStyleSet,
+		effectivePaint,
 		resolvedMode,
 		setTheme,
 		setDensity,
 		setMode,
 		setFont,
-		setStyleSet
+		setStyleSet,
+		setPaint
 	]);
 	/** The axes on offer under the theme that is actually active. */
 	const registry = React.useMemo(() => buildRegistry(themes, theme), [themes, theme]);
@@ -491,7 +530,8 @@ function ThemeProvider({ themes: themesProp, theme: themeProp, density: densityP
 		"data-theme": theme,
 		"data-density": density,
 		"data-mode": mode,
-		...styleSet === null ? null : { "data-style": styleSet }
+		...styleSet === null ? null : { "data-style": styleSet },
+		...paint === null ? null : { "data-paint": paint }
 	};
 	let root;
 	if (asChild) {

package/dist/system/vocabulary.d.ts

@@ -1,4 +1,4 @@
-import { StyleSet } from "@cueplusplus/tokens";
+import { Paint, 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. */

package/dist/system/vocabulary.js

@@ -1,4 +1,4 @@
-import { DEFAULT_DENSITY, DEFAULT_FONT, STYLE_SETS } from "@cueplusplus/tokens";
+import { DEFAULT_DENSITY, DEFAULT_FONT, PAINTS, STYLE_SETS } from "@cueplusplus/tokens";
 import { DENSITIES, FONTS, THEME_NAME_PATTERN, resolveDensities, resolveFonts } from "@cueplusplus/theme-base";
 //#region src/system/vocabulary.ts
 /**
@@ -82,6 +82,18 @@ function vocabulary(themes) {
 function isStyleSet(value) {
 	return typeof value === "string" && STYLE_SETS.includes(value);
 }
+/**
+* Whether a value is one of the look 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
+* `@cueplusplus/tokens`, no manifest field describes it, so there is nothing
+* per-theme to ask and a per-theme signature would be parameters pretending to
+* be a rule.
+*/
+function isPaint(value) {
+	return typeof value === "string" && PAINTS.includes(value);
+}
 /** Derive the context value. Pure; the provider memoises it on `themes` and the active name. */
 function buildRegistry(themes, active) {
 	return {
@@ -122,4 +134,4 @@ function noteOnce(message) {
 	console.info(`[cue] ${message}`);
 }
 //#endregion
-export { buildRegistry, isStyleSet, noteOnce, vocabulary, warnOnce };
+export { buildRegistry, isPaint, isStyleSet, noteOnce, vocabulary, warnOnce };

package/manifest/components/alert-dialog.json

@@ -185,7 +185,8 @@
     "--cue-surface-2",
     "--cue-text-emphasis",
     "--cue-text-label",
-    "--cue-text-ui"
+    "--cue-text-ui",
+    "--cue-tracking-caps"
   ],
   "summary": "A modal that asks one question with two answers, for anything irreversible.",
   "examples": [

package/manifest/components/autocomplete.json

@@ -232,7 +232,8 @@
     "--cue-text-body",
     "--cue-text-emphasis",
     "--cue-text-label",
-    "--cue-text-ui"
+    "--cue-text-ui",
+    "--cue-tracking-caps"
   ],
   "summary": "A text field that suggests as you type — and accepts what you typed anyway.",
   "examples": [

package/manifest/components/band.json

@@ -72,8 +72,8 @@
   "tokensUsed": [
     "--cue-band-ground",
     "--cue-band-rule",
+    "--cue-band-rule-color",
     "--cue-band-y",
-    "--cue-border",
     "--cue-measure-prose"
   ],
   "summary": "A full-bleed horizontal section: a rule to the window's edge, a column at the measure.",

package/manifest/components/calendar.json

@@ -35,7 +35,9 @@
     "--cue-surface-3",
     "--cue-text-label",
     "--cue-text-micro",
-    "--cue-text-ui"
+    "--cue-text-ui",
+    "--cue-tracking-caps",
+    "--cue-tracking-caps-tight"
   ],
   "summary": "A month grid, on react-day-picker.",
   "examples": [

package/manifest/components/channel-matrix.json

@@ -209,7 +209,8 @@
     "--cue-text-emphasis",
     "--cue-text-label",
     "--cue-text-micro",
-    "--cue-text-ui"
+    "--cue-text-ui",
+    "--cue-tracking-caps"
   ],
   "summary": "The channel-by-channel view: 512 addressed cells, repainted imperatively.",
   "examples": [

package/manifest/components/chart-tooltip-content.json

@@ -110,7 +110,8 @@
     "--cue-surface-2",
     "--cue-text-emphasis",
     "--cue-text-label",
-    "--cue-text-ui"
+    "--cue-text-ui",
+    "--cue-tracking-caps"
   ],
   "summary": "The chart tooltip surface: an overlay, styled like every other overlay.",
   "examples": [

package/manifest/components/chip.json

@@ -123,6 +123,7 @@
     "--cue-surface-2",
     "--cue-text-label",
     "--cue-text-micro",
+    "--cue-tracking-caps",
     "--cue-warn"
   ],
   "summary": "The status pill, at three volumes: tinted fill, bare outline, or a hairline tag.",

package/manifest/components/code-block.json

@@ -57,7 +57,8 @@
     "--cue-space-4",
     "--cue-sunken",
     "--cue-text-micro",
-    "--cue-text-ui"
+    "--cue-text-ui",
+    "--cue-tracking-caps"
   ],
   "summary": "A block of code with a copy button and no highlighter palette; `language=\"jsx\"` adds emphasis in three inks the theme already has.",
   "examples": [

package/manifest/components/collapsible.json

@@ -103,7 +103,8 @@
     "--cue-space-4",
     "--cue-text-label",
     "--cue-text-micro",
-    "--cue-text-ui"
+    "--cue-text-ui",
+    "--cue-tracking-caps"
   ],
   "summary": "One section that opens and closes — an accordion of exactly one.",
   "examples": [

package/manifest/components/colors-section.json

@@ -52,7 +52,8 @@
     "--cue-space-4",
     "--cue-text-label",
     "--cue-text-micro",
-    "--cue-text-ui"
+    "--cue-text-ui",
+    "--cue-tracking-caps"
   ],
   "summary": "Section 2 of the configurator — every colour the active theme declares, one row each.",
   "examples": [

package/manifest/components/combobox.json

@@ -235,7 +235,8 @@
     "--cue-text-body",
     "--cue-text-emphasis",
     "--cue-text-label",
-    "--cue-text-ui"
+    "--cue-text-ui",
+    "--cue-tracking-caps"
   ],
   "summary": "A `Select` you can type into: one value out of a known, filterable set.",
   "examples": [