@cueplusplus/ui 0.14.0 → 0.15.0

package/dist/layout/preview.d.ts

@@ -1,6 +1,6 @@
 import { PreviewGround } from "./_ground.js";
 import * as React from "react";
-import { StyleSet } from "@cueplusplus/tokens";
+import { Paint, StyleSet } from "@cueplusplus/tokens";
 import { Density as Density$1, FontName, Mode, ThemeName } from "@cueplusplus/theme-base";
 //#region src/layout/preview.d.ts
 /** Where the chrome sits and what the stage's ground is. */
@@ -71,6 +71,18 @@ interface PreviewProps extends Omit<React.ComponentPropsWithoutRef<"div">, "chil
    * `<body>` and inherits nothing from the stage's DOM.
    */
   styleSet?: StyleSet;
+  /**
+   * A look pack for the stage: the finish its surfaces wear.
+   *
+   * Stamped as `data-paint` on the stage element, and republished to React for
+   * the same reason `styleSet` is — a popover opened on the stage mounts on
+   * `<body>` and inherits nothing from the stage's DOM, so it has to be told.
+   *
+   * Absent means inherit. `none` is a value that opts OUT of an ambient pack,
+   * which is what a stage uses to show a component unpainted inside a page that
+   * is not.
+   */
+  paint?: Paint;
   /**
    * Resize the stage by dragging or with the keyboard. `true` gives both axes
    * inside the default bounds (160–1280 px wide, 96–960 px tall); an object

package/dist/layout/preview.js

@@ -1,7 +1,7 @@
 "use client";
 import { cn } from "../lib/cn.js";
 import { useIsomorphicLayoutEffect } from "../system/use-isomorphic-layout-effect.js";
-import { AmbientThemeContext, DensityContext, StyleSetContext } from "../system/density.js";
+import { AmbientThemeContext, DensityContext, PaintContext, StyleSetContext } from "../system/density.js";
 import { OverridesContext } from "../system/overrides.js";
 import { ThemeContext } from "../system/theme-provider.js";
 import { GROUND_CLASSES } from "./_ground.js";
@@ -241,6 +241,7 @@ function stageAttributes(asked, page) {
 	}
 	if (asked.font !== void 0) attributes["data-font"] = asked.font;
 	if (asked.styleSet !== void 0) attributes["data-style"] = asked.styleSet;
+	if (asked.paint !== void 0) attributes["data-paint"] = asked.paint;
 	return attributes;
 }
 /**
@@ -258,12 +259,13 @@ function stageAttributes(asked, page) {
 * route: `useCuePortalProps()` stamps a portal container from `StyleSetContext`,
 * and a popup opened on the stage inherits nothing from the stage's DOM.
 */
-function StageScope({ theme, mode, density, styleSet, children }) {
+function StageScope({ theme, mode, density, styleSet, paint, children }) {
 	const outer = React.useContext(ThemeContext);
 	const outerOverrides = React.useContext(OverridesContext);
 	const outerDensity = React.useContext(DensityContext);
 	const outerAmbient = React.useContext(AmbientThemeContext);
 	const outerStyleSet = React.useContext(StyleSetContext);
+	const outerPaint = React.useContext(PaintContext);
 	const value = React.useMemo(() => {
 		if (outer === null || theme === void 0 && mode === void 0) return outer;
 		const scoped = theme ?? outer.theme;
@@ -286,11 +288,14 @@ function StageScope({ theme, mode, density, styleSet, children }) {
 			value: density ?? outerDensity,
 			children: /* @__PURE__ */ jsx(StyleSetContext.Provider, {
 				value: styleSet ?? outerStyleSet,
-				children: /* @__PURE__ */ jsx(OverridesContext.Provider, {
-					value: stamped ? null : outerOverrides,
-					children: /* @__PURE__ */ jsx(ThemeContext.Provider, {
-						value,
-						children
+				children: /* @__PURE__ */ jsx(PaintContext.Provider, {
+					value: paint ?? outerPaint,
+					children: /* @__PURE__ */ jsx(OverridesContext.Provider, {
+						value: stamped ? null : outerOverrides,
+						children: /* @__PURE__ */ jsx(ThemeContext.Provider, {
+							value,
+							children
+						})
 					})
 				})
 			})
@@ -505,7 +510,7 @@ function Grips({ label, options, size }) {
 *   <Container className="max-w-(--cue-measure-prose)">…</Container>
 * </Preview>
 */
-const Preview = React.forwardRef(function Preview({ children, label, theme, mode, density, font, styleSet, resizable, tools, footer, presentation = "panel", name, count, ground, captions = true, className, ...elementProps }, ref) {
+const Preview = React.forwardRef(function Preview({ children, label, theme, mode, density, font, styleSet, paint, resizable, tools, footer, presentation = "panel", name, count, ground, captions = true, className, ...elementProps }, ref) {
 	const outer = React.useContext(ThemeContext);
 	const bench = React.useRef(null);
 	const given = resolveResize(resizable);
@@ -517,7 +522,8 @@ const Preview = React.forwardRef(function Preview({ children, label, theme, mode
 		mode,
 		density,
 		font,
-		styleSet
+		styleSet,
+		paint
 	}, outer);
 	const framed = presentation === "frame";
 	const stage = /* @__PURE__ */ jsx("div", {
@@ -530,6 +536,7 @@ const Preview = React.forwardRef(function Preview({ children, label, theme, mode
 			mode,
 			density,
 			styleSet,
+			paint,
 			children
 		})
 	});

package/dist/layout/sidebar.js

@@ -101,7 +101,7 @@ const Sidebar = {
 			...elementProps,
 			children: [label === void 0 || collapsed ? null : /* @__PURE__ */ jsx("div", {
 				"data-slot": "sidebar-section-label",
-				className: "flex h-control-sm items-center px-(--cue-space-2) font-mono text-(length:--cue-text-label) tracking-[0.15em] text-fg-subtle uppercase",
+				className: "flex h-control-sm items-center px-(--cue-space-2) font-mono text-(length:--cue-text-label) tracking-(--cue-tracking-caps) text-fg-subtle uppercase",
 				children: label
 			}), children]
 		});

package/dist/layout/stepper.js

@@ -43,7 +43,7 @@ const Stepper = React.forwardRef(function Stepper({ className, steps, current, o
 		className: cn("min-w-0", className),
 		...elementProps,
 		children: /* @__PURE__ */ jsx("ol", {
-			className: "m-0 flex list-none flex-wrap items-center gap-(--cue-space-3) p-0 font-mono text-(length:--cue-text-label) tracking-[0.1em] uppercase",
+			className: "m-0 flex list-none flex-wrap items-center gap-(--cue-space-3) p-0 font-mono text-(length:--cue-text-label) tracking-(--cue-tracking-caps-tight) uppercase",
 			children: steps.map((step, index) => {
 				const state = currentIndex === -1 || index > currentIndex ? "upcoming" : index === currentIndex ? "current" : "complete";
 				const navigable = onStepChange !== void 0 && state === "complete";

package/dist/overlays/_surface.d.ts

@@ -59,7 +59,7 @@ declare const overlayFooterClasses = "flex items-center justify-end gap-(--cue-s
  */
 declare const menuItemClasses = "flex h-control-sm cursor-default items-center gap-(--cue-space-2) rounded-(--radius-control) px-(--cue-space-3) font-mono text-(length:--cue-text-ui) text-fg-muted outline-none select-none data-[highlighted]:bg-accent-soft data-[highlighted]:text-fg data-[disabled]:pointer-events-none data-[disabled]:opacity-40";
 /** The uppercase mono caption over a group of menu rows. */
-declare const menuLabelClasses = "flex h-control-sm items-center px-(--cue-space-3) font-mono text-(length:--cue-text-label) tracking-[0.15em] text-fg-subtle uppercase select-none";
+declare const menuLabelClasses = "flex h-control-sm items-center px-(--cue-space-3) font-mono text-(length:--cue-text-label) tracking-(--cue-tracking-caps) text-fg-subtle uppercase select-none";
 /** The hairline between menu groups. */
 declare const menuSeparatorClasses = "my-(--cue-space-1) h-px bg-border";
 /** Padding of a menu popup — a single space unit so rows reach the rim. */

package/dist/overlays/_surface.js

@@ -59,7 +59,7 @@ const overlayFooterClasses = "flex items-center justify-end gap-(--cue-space-3)
 */
 const menuItemClasses = "flex h-control-sm cursor-default items-center gap-(--cue-space-2) rounded-(--radius-control) px-(--cue-space-3) font-mono text-(length:--cue-text-ui) text-fg-muted outline-none select-none data-[highlighted]:bg-accent-soft data-[highlighted]:text-fg data-[disabled]:pointer-events-none data-[disabled]:opacity-40";
 /** The uppercase mono caption over a group of menu rows. */
-const menuLabelClasses = "flex h-control-sm items-center px-(--cue-space-3) font-mono text-(length:--cue-text-label) tracking-[0.15em] text-fg-subtle uppercase select-none";
+const menuLabelClasses = "flex h-control-sm items-center px-(--cue-space-3) font-mono text-(length:--cue-text-label) tracking-(--cue-tracking-caps) text-fg-subtle uppercase select-none";
 /** The hairline between menu groups. */
 const menuSeparatorClasses = "my-(--cue-space-1) h-px bg-border";
 /** Padding of a menu popup — a single space unit so rows reach the rim. */

package/dist/overlays/command-palette.js

@@ -155,7 +155,7 @@ function CommandPalette({ items, onSelect, open: openProp, defaultOpen = false,
 								items: group.items,
 								className: "block",
 								children: [group.value === "" ? null : /* @__PURE__ */ jsx(Combobox.GroupLabel, {
-									className: "flex h-control-sm items-center px-(--cue-space-3) font-mono text-(length:--cue-text-micro) tracking-[0.15em] text-fg-subtle uppercase select-none",
+									className: "flex h-control-sm items-center px-(--cue-space-3) font-mono text-(length:--cue-text-micro) tracking-(--cue-tracking-caps) text-fg-subtle uppercase select-none",
 									children: group.value
 								}), /* @__PURE__ */ jsx(Combobox.Collection, { children: (item) => /* @__PURE__ */ jsxs(Combobox.Item, {
 									value: item,

package/dist/overlays/toast.js

@@ -87,7 +87,7 @@ function ToastItem({ toast, className, closeLabel }) {
 			}),
 			/* @__PURE__ */ jsx(Toast.Action, {
 				"data-slot": "toast-action",
-				className: "mt-(--cue-space-1) inline-flex h-control-sm w-fit cursor-pointer items-center justify-center rounded-(--radius-control) border border-border px-(--cue-space-3) font-mono text-(length:--cue-text-label) tracking-[0.1em] text-fg-muted uppercase transition-colors outline-none hover:border-border-strong hover:text-fg focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-1 focus-visible:outline-accent"
+				className: "mt-(--cue-space-1) inline-flex h-control-sm w-fit cursor-pointer items-center justify-center rounded-(--radius-control) border border-border px-(--cue-space-3) font-mono text-(length:--cue-text-label) tracking-(--cue-tracking-caps-tight) text-fg-muted uppercase transition-colors outline-none hover:border-border-strong hover:text-fg focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-1 focus-visible:outline-accent"
 			}),
 			/* @__PURE__ */ jsx(Toast.Close, {
 				"aria-label": closeLabel,

package/dist/primitives/chip.d.ts

@@ -30,7 +30,7 @@ import * as React from "react";
  * <span className={chipVariants({ variant: "tag" })}>mcp</span>
  */
 declare const chipVariants: (props?: ({
-  tone?: "info" | "warn" | "danger" | "accent" | "ok" | "busy" | "neutral" | null | undefined;
+  tone?: "info" | "warn" | "danger" | "busy" | "accent" | "ok" | "neutral" | null | undefined;
   variant?: "outline" | "tinted" | "tag" | null | undefined;
   interactive?: boolean | null | undefined;
 } & ClassProp) | undefined) => string;

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. */
@@ -237,7 +252,8 @@ interface ThemeProviderProps {
   /** Restore and write root preferences in localStorage. Defaults to `true`. */
   persistPreferences?: boolean;
   /**
-   * The Content-Security-Policy nonce for the density override layer.
+   * The Content-Security-Policy nonce for every `<style>` element this tree
+   * renders — this library's and Base UI's.
    *
    * When `overrides.densities` is set this provider emits one `<style>`
    * element (see {@link ThemeProviderProps.overrides}). Under a policy of
@@ -246,10 +262,31 @@ interface ThemeProviderProps {
    * 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
+   * 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`.
+   *
    * `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.
+   * nonce, and between it and this prop a strict policy needs nothing else
+   * from here.
+   *
+   * **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.
    *
    * **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
@@ -308,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 };