@cueplusplus/ui 0.14.1 → 0.16.0

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. */
@@ -237,48 +252,59 @@ interface ThemeProviderProps {
   /** Restore and write root preferences in localStorage. Defaults to `true`. */
   persistPreferences?: boolean;
   /**
-   * The Content-Security-Policy nonce for every `<style>` element this tree
-   * renders — this library's and Base UI's.
+   * The Content-Security-Policy nonce this provider hands on: to its own
+   * density-layer `<style>`, and — through Base UI's `CSPProvider` — to Base
+   * UI's scrollbar `<style>` and to the pre-hydration `<script>` a
+   * `<Slider thumbAlignment="edge">` renders. List it in `script-src`, and in
+   * whichever directive governs style elements: `style-src-elem` if the policy
+   * has one, otherwise `style-src`. It does not reach `ThemeConfigurator`'s
+   * `<style>` or the application's pre-paint `<script>`.
    *
-   * 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.
+   * The density layer — one `<style data-cue-overrides>` when
+   * `overrides.densities` yields a valid declaration (see
+   * {@link ThemeProviderProps.overrides}) — takes its nonce **from this prop
+   * alone**: not from an outer `CSPProvider`, and not from an outer
+   * `ThemeProvider`. A nested provider that sets its own `overrides.densities`
+   * needs its own `nonce`.
    *
-   * It also reaches **Base UI**. Given a nonce, this provider renders
-   * `@base-ui/react`'s own `CSPProvider` around the tree, so the hoisted
-   * `<style>` that `ScrollAreaRoot` and `SelectPopup` emit carries it too.
-   * Without that, a strict policy refuses it by content hash on every page
-   * rendering a Select, a Popover or a ScrollArea — and a consumer has no way
-   * to guess the remedy lives in a peer dependency's provider. An outer
-   * `CSPProvider` a consumer renders itself is left alone: no nonce here means
-   * no provider here, rather than one that overwrites theirs with `undefined`.
+   * Base UI's scrollbar rule gets the nonce wherever React creates it in the
+   * browser. **It does not get it in server-rendered HTML** under a framework
+   * that hands React a script-only nonce, which includes Next.js 16: React's
+   * server renderer (19.2, and the canary Next.js 16 bundles) writes a
+   * `precedence` style's nonce only from its render option `nonce: { style }`.
+   * Allow that rule by hash, or turn on Base
+   * UI's `disableStyleElements` and ship the rule yourself;
+   * `docs/CONSUMING.md` §4.5 has both, with the hash.
    *
    * `prepaintScript()` returns a *string* the application renders in a
-   * `<script>` of its own — so the application already controls that element's
-   * nonce, and between it and this prop a strict policy needs nothing else
-   * from here.
+   * `<script>` of its own, so put the same nonce on that element yourself.
    *
-   * **Pass this OR render your own `CSPProvider` — not both.** Base UI's
-   * context carries a second value beside the nonce, `disableStyleElements`,
-   * and its provider is the only public way to set either: the package exports
-   * `CSPProvider` and no hook, so a provider rendered here *replaces* an outer
-   * one rather than extending it. Given a nonce this provider therefore sets
-   * `disableStyleElements` back to its default, and a consumer who had turned
-   * it on outside loses it silently — Base UI resumes emitting the very style
-   * element they suppressed. An application already rendering its own
-   * `CSPProvider` needs nothing from this prop: leave it unset and the outer
-   * context survives untouched, which is the case
-   * `base-ui-nonce-outer-provider.test.tsx` pins.
+   * **An outer `CSPProvider` that sets `disableStyleElements` is switched off
+   * inside this provider once a nonce is given.** Base UI's `CSPProvider`
+   * builds its context from its own props alone, so the one rendered here
+   * *replaces* an outer one rather than extending it. Either leave this prop
+   * unset — only when no `overrides.densities` needs it and, wherever a
+   * `<Slider thumbAlignment="edge">` renders, the outer provider carries the
+   * nonce — or render
+   * `<CSPProvider nonce={nonce} disableStyleElements>` again inside this
+   * provider's children (with the nonce, or Base UI's pre-hydration script
+   * there loses it), and again inside any nested provider given a nonce. An
+   * application already rendering its own `CSPProvider` can leave this prop
+   * unset: Base UI's pre-hydration script takes the outer nonce, and so does
+   * its scrollbar rule wherever React creates it in the browser — the case
+   * `base-ui-nonce-outer-provider.test.tsx` pins — but the density layer then
+   * has none.
    *
-   * **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.
+   * **A nonce cannot rescue a style ATTRIBUTE.** This provider's root always
+   * carries one — `color-scheme` and `--cue-font-scale`, plus `fontFamilies`,
+   * `overrides.colors`, `overrides.fonts` and `style` where given — and many
+   * components, and Base UI's form roots, render their own. A policy whose
+   * `style-src` (or, without one, `default-src`) does not allow all inline
+   * style — a nonce or a hash in it, or no `'unsafe-inline'` — therefore needs
+   * an explicit `style-src-attr 'unsafe-inline'`: a nonce or hash in the
+   * governing list makes the browser ignore `'unsafe-inline'`. The browser
+   * reports a refused attribute as a CSP violation; this library adds no
+   * warning of its own.
    */
   nonce?: string;
   /** Stamp the single child element instead of rendering a wrapper `<div>`. */
@@ -330,6 +356,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) {
@@ -516,18 +556,25 @@ function ThemeProvider({ themes: themesProp, theme: themeProp, density: densityP
 		children: overridesStyle
 	});
 	/**
-	* Base UI's own style elements, which this provider's nonce also has to reach.
+	* Base UI's own style and script elements, which this provider's nonce also
+	* has to reach.
 	*
 	* `@base-ui/react` renders one style element — a hoisted
 	* `<style precedence>` carrying `.base-ui-disable-scrollbar` — from
 	* `utils/styles.mjs`. `ScrollAreaRoot` and `SelectPopup` pass it a nonce they
 	* read from Base UI's own `CSPContext`, and nothing fills that context unless
 	* a `CSPProvider` is rendered above them. Without one it ships bare and a
-	* `style-src-elem` policy refuses it by content hash, on every page that
-	* renders a Select, a Popover or a ScrollArea — which is most authenticated
-	* pages of a real application, and no page of its sign-in screen. A consumer
-	* cannot reasonably guess that the fix lives in a peer dependency's provider,
-	* and this library already takes the nonce and already sits at the root.
+	* `style-src-elem` policy refuses it on every page that mounts a ScrollArea
+	* or a Select's popup — and the browser's message names neither Base UI nor
+	* this prop, so a consumer cannot reasonably guess that the fix lives in a
+	* peer dependency's provider. This library already takes the nonce and
+	* already sits at the root.
+	*
+	* It reaches the element React creates in the browser. A ScrollArea's
+	* element in server-rendered HTML is written by React's server renderer,
+	* which takes a `precedence` style's nonce only from its own render option
+	* `nonce: { style }`; the `nonce` prop's docblock says what that means under
+	* Next.js, and what to do about it.
 	*
 	* Rendered **only when a nonce was given**, and that is not tidiness. A
 	* consumer that wraps its own application in `CSPProvider` is the case this

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

@@ -174,6 +174,17 @@
     "--cue-fg-subtle",
     "--cue-font-mono",
     "--cue-leading-ui",
+    "--cue-paint-rim-width",
+    "--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-from",
+    "--cue-paint-stroke-to",
+    "--cue-paint-stroke-width",
     "--cue-radius-control",
     "--cue-radius-overlay",
     "--cue-scrim",
@@ -185,7 +196,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/app-bar.json

@@ -232,6 +232,10 @@
     "--cue-fg-muted",
     "--cue-font-mono",
     "--cue-icon-sm",
+    "--cue-paint-fade-length",
+    "--cue-paint-glass-fallback-ink",
+    "--cue-paint-glass-filter",
+    "--cue-paint-glass-ink",
     "--cue-space-3",
     "--cue-space-4",
     "--cue-space-5",

package/manifest/components/autocomplete.json

@@ -219,6 +219,17 @@
     "--cue-font-mono",
     "--cue-icon-sm",
     "--cue-leading-ui",
+    "--cue-paint-rim-width",
+    "--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-from",
+    "--cue-paint-stroke-to",
+    "--cue-paint-stroke-width",
     "--cue-radius-control",
     "--cue-radius-overlay",
     "--cue-scrim",
@@ -232,7 +243,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": [