@cueplusplus/ui 0.15.0 → 0.16.0

package/dist/forms/search-input.d.ts

@@ -1,4 +1,5 @@
-import { FormControlSize } from "./_chassis.js";
+import { FormControlSize } from "./_chassis-size.js";
+import "./_chassis.js";
 import { InputProps } from "./input.js";
 import * as React from "react";
 //#region src/forms/search-input.d.ts

package/dist/forms/select.d.ts

@@ -1,4 +1,5 @@
-import { FormControlSize } from "./_chassis.js";
+import { FormControlSize } from "./_chassis-size.js";
+import "./_chassis.js";
 import * as React from "react";
 //#region src/forms/select.d.ts
 /** One row in a {@link Select}. */

package/dist/forms/select.js

@@ -1,6 +1,7 @@
 "use client";
 import { cn } from "../lib/cn.js";
 import { controlVariants } from "./_chassis.js";
+import { ELEVATION_2 } from "../system/_paint-elevation.js";
 import { useCuePortalProps } from "../system/portal.js";
 import { CaretGlyph, TickGlyph } from "./_glyphs.js";
 import * as React from "react";
@@ -65,7 +66,7 @@ const Select$1 = React.forwardRef(function Select$2({ items, value, defaultValue
 				alignItemWithTrigger: false,
 				children: /* @__PURE__ */ jsx(Select.Popup, {
 					"data-slot": "select-popup",
-					className: cn("min-w-(--anchor-width) origin-(--transform-origin) overflow-hidden rounded-(--radius-overlay) border border-border-overlay bg-surface-2 py-(--cue-space-1) shadow-[0_8px_24px_rgba(0,0,0,0.4)] outline-none", "transition-[opacity,scale] duration-100 ease-out motion-reduce:transition-none", "data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0", "data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0", popupClassName),
+					className: cn(`min-w-(--anchor-width) origin-(--transform-origin) overflow-hidden rounded-(--radius-overlay) border border-border-overlay bg-surface-2 py-(--cue-space-1) ${ELEVATION_2} outline-none`, "transition-[opacity,scale] duration-100 ease-out motion-reduce:transition-none", "data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0", "data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0", popupClassName),
 					children: /* @__PURE__ */ jsx(Select.List, {
 						className: "max-h-(--available-height) overflow-y-auto",
 						children: items.map((item) => /* @__PURE__ */ jsxs(Select.Item, {

package/dist/forms/tags-input.d.ts

@@ -1,4 +1,5 @@
-import { FormControlSize } from "./_chassis.js";
+import { FormControlSize } from "./_chassis-size.js";
+import "./_chassis.js";
 import * as React from "react";
 //#region src/forms/tags-input.d.ts
 interface TagsInputProps {

package/dist/forms/toggle-group.d.ts

@@ -1,4 +1,4 @@
-import { FormControlSize } from "./_chassis.js";
+import { FormControlSize } from "./_chassis-size.js";
 import * as React from "react";
 import { ToggleGroup } from "@base-ui/react/toggle-group";
 //#region src/forms/toggle-group.d.ts

package/dist/forms/toggle.d.ts

@@ -1,4 +1,4 @@
-import { FormControlSize } from "./_chassis.js";
+import { FormControlSize } from "./_chassis-size.js";
 import * as React from "react";
 import { Toggle } from "@base-ui/react/toggle";
 //#region src/forms/toggle.d.ts

package/dist/index.d.ts

@@ -34,7 +34,8 @@ import { TitleBar, TitleBarProps } from "./chrome/title-bar.js";
 import { Tree, TreeProps, TreeVisibility, TreeVisibilityToggle, TreeVisibilityToggleProps } from "./chrome/tree.js";
 import { Toolbar, ToolbarButtonProps, ToolbarGroupProps, ToolbarRootProps, ToolbarSeparatorProps } from "./chrome/toolbar.js";
 import "./chrome/index.js";
-import { ControlVariantProps, FormControlSize, bareControlClasses, controlClasses, controlGroupFocusClasses, controlSurface, controlVariants } from "./forms/_chassis.js";
+import { FormControlSize } from "./forms/_chassis-size.js";
+import { ControlVariantProps, bareControlClasses, controlClasses, controlGroupFocusClasses, controlSurface, controlVariants } from "./forms/_chassis.js";
 import { TokenOverrides, isSafeTokenValue } from "./system/overrides.js";
 import { FontFamilies, ResolvedMode, ThemeContextValue, ThemeProvider, ThemeProviderProps } from "./system/theme-provider.js";
 import { Autocomplete, AutocompleteProps } from "./forms/autocomplete.js";

package/dist/instruments/log-viewer.js

@@ -2,6 +2,7 @@
 import { cn } from "../lib/cn.js";
 import { Chip } from "../primitives/chip.js";
 import { useIsomorphicLayoutEffect } from "../system/use-isomorphic-layout-effect.js";
+import { ELEVATION_2 } from "../system/_paint-elevation.js";
 import { toRem } from "./_rem.js";
 import { useControlHeight } from "../system/use-density.js";
 import { ansiSpans } from "./_ansi.js";
@@ -204,7 +205,7 @@ const LogViewer = React.forwardRef(function LogViewer({ className, lines, follow
 			pending > 0 ? /* @__PURE__ */ jsx("button", {
 				type: "button",
 				"data-slot": "log-viewer-jump",
-				className: "absolute bottom-(--cue-space-4) left-1/2 -translate-x-1/2 cursor-pointer rounded-(--radius-control) border border-border-overlay bg-surface-2 px-(--cue-space-4) py-(--cue-space-2) font-mono text-(length:--cue-text-label) text-fg shadow-[0_8px_24px_rgba(0,0,0,0.4)] outline-none hover:border-accent hover:text-accent focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-1 focus-visible:outline-accent",
+				className: `absolute bottom-(--cue-space-4) left-1/2 -translate-x-1/2 cursor-pointer rounded-(--radius-control) border border-border-overlay bg-surface-2 px-(--cue-space-4) py-(--cue-space-2) font-mono text-(length:--cue-text-label) text-fg ${ELEVATION_2} outline-none hover:border-accent hover:text-accent focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-1 focus-visible:outline-accent`,
 				onClick: jumpToBottom,
 				children: newLinesLabel(pending)
 			}) : null

package/dist/layout/card.js

@@ -1,4 +1,6 @@
 import { cn } from "../lib/cn.js";
+import { RIM_INSET } from "../system/_paint-rim.js";
+import { STROKE_SURFACE_1 } from "../system/_paint-stroke-surface-1.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 /**
@@ -19,7 +21,7 @@ const Card = {
 			ref,
 			"data-slot": "card",
 			"data-seam": seam ? "" : void 0,
-			className: cn("group/card flex flex-col overflow-hidden rounded-(--radius-surface) border border-border", seam ? "gap-px bg-border" : "bg-surface-1", className),
+			className: cn("group/card flex flex-col overflow-hidden rounded-(--radius-surface)", seam ? "border border-border gap-px bg-border" : `${STROKE_SURFACE_1} ${RIM_INSET}`, className),
 			...elementProps
 		});
 	}),

package/dist/midi/musical-time-input.d.ts

@@ -1,4 +1,5 @@
-import { FormControlSize } from "../forms/_chassis.js";
+import { FormControlSize } from "../forms/_chassis-size.js";
+import "../forms/_chassis.js";
 import { TimeSignature } from "./_time.js";
 import * as React from "react";
 //#region src/midi/musical-time-input.d.ts

package/dist/overlays/_surface.d.ts

@@ -18,7 +18,7 @@
  * @example
  * <Popover.Popup className={cn(overlaySurfaceClasses, className)} />
  */
-declare const overlaySurfaceClasses = "border border-border-overlay bg-surface-2 rounded-(--radius-overlay) shadow-[0_8px_24px_rgba(0,0,0,0.4)]";
+declare const overlaySurfaceClasses = "rounded-(--radius-overlay) border-transparent border-(length:--cue-paint-stroke-width) bg-[linear-gradient(var(--cue-surface-2),var(--cue-surface-2)),linear-gradient(var(--cue-paint-stroke-angle),var(--cue-paint-stroke-from,var(--cue-border-overlay)),var(--cue-paint-stroke-to,var(--cue-border-overlay)))] bg-origin-border [background-clip:padding-box,border-box] shadow-[0_0_0_var(--cue-paint-rim-width)_var(--cue-paint-shade-hairline,transparent),0_calc(2px*var(--cue-paint-shadow-scale))_calc(6px*var(--cue-paint-shadow-scale))_var(--cue-paint-shadow-spread)_var(--cue-paint-shade-near,transparent),0_calc(8px*var(--cue-paint-shadow-scale))_calc(24px*var(--cue-paint-shadow-scale))_var(--cue-paint-shadow-spread)_var(--cue-paint-shade-far,rgba(0,0,0,0.4)),inset_0_1px_0_0_var(--cue-paint-sheen-ink,transparent)]";
 /**
  * The full-viewport dim behind a modal surface. `--cue-scrim` is theme-owned —
  * dusk and hivehub tune their own — so the value is never hard-coded here.

package/dist/overlays/_surface.js

@@ -1,3 +1,5 @@
+import { ELEVATION_2 } from "../system/_paint-elevation.js";
+import { STROKE_SURFACE_2 } from "../system/_paint-stroke-surface-2.js";
 //#region src/overlays/_surface.ts
 /**
 * The conventions every floating surface in this system shares.
@@ -18,7 +20,7 @@
 * @example
 * <Popover.Popup className={cn(overlaySurfaceClasses, className)} />
 */
-const overlaySurfaceClasses = "border border-border-overlay bg-surface-2 rounded-(--radius-overlay) shadow-[0_8px_24px_rgba(0,0,0,0.4)]";
+const overlaySurfaceClasses = `rounded-(--radius-overlay) ${STROKE_SURFACE_2} ${ELEVATION_2}`;
 /**
 * The full-viewport dim behind a modal surface. `--cue-scrim` is theme-owned —
 * dusk and hivehub tune their own — so the value is never hard-coded here.

package/dist/primitives/button.js

@@ -1,6 +1,7 @@
 "use client";
 import { cn } from "../lib/cn.js";
 import { cva } from "../lib/cva.js";
+import { GLOW_CLASSES } from "../system/_paint-glow.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useRender } from "@base-ui/react/use-render";
@@ -39,7 +40,7 @@ const buttonChassis = "inline-flex select-none items-center justify-center gap-[
 * @internal Not part of the public API; imported by `icon-button.tsx`.
 */
 const buttonTones = {
-	primary: "bg-accent text-accent-fg hover:bg-accent-hover border border-transparent",
+	primary: `bg-accent text-accent-fg hover:bg-accent-hover border border-transparent ${GLOW_CLASSES}`,
 	secondary: "border border-border text-fg-muted hover:border-border-strong hover:text-fg bg-surface-2",
 	ghost: "text-fg-muted hover:text-fg hover:bg-surface-2 border border-transparent",
 	outline: "border border-border text-fg hover:border-accent hover:text-accent bg-transparent",

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" | "busy" | "accent" | "ok" | "neutral" | null | undefined;
+  tone?: "danger" | "info" | "warn" | "accent" | "ok" | "busy" | "neutral" | null | undefined;
   variant?: "outline" | "tinted" | "tag" | null | undefined;
   interactive?: boolean | null | undefined;
 } & ClassProp) | undefined) => string;

package/dist/system/_paint-elevation.js

@@ -0,0 +1,9 @@
+//#region src/system/_paint-elevation.ts
+/**
+* An overlay. Its default MUST render `0 8px 24px rgba(0,0,0,0.4)` — the literal
+* at four call sites — which is why `--cue-paint-shade-far` is the one
+* non-transparent shadow ink. Measured pixel-identical to it.
+*/
+const ELEVATION_2 = "shadow-[0_0_0_var(--cue-paint-rim-width)_var(--cue-paint-shade-hairline,transparent),0_calc(2px*var(--cue-paint-shadow-scale))_calc(6px*var(--cue-paint-shadow-scale))_var(--cue-paint-shadow-spread)_var(--cue-paint-shade-near,transparent),0_calc(8px*var(--cue-paint-shadow-scale))_calc(24px*var(--cue-paint-shadow-scale))_var(--cue-paint-shadow-spread)_var(--cue-paint-shade-far,rgba(0,0,0,0.4)),inset_0_1px_0_0_var(--cue-paint-sheen-ink,transparent)]";
+//#endregion
+export { ELEVATION_2 };

package/dist/system/_paint-glass.js

@@ -0,0 +1,46 @@
+//#region src/system/_paint-glass.ts
+/**
+* Translucency, with the opaque twin every glass rule needs.
+*
+* **Why this writes `--tw-backdrop-blur` instead of `backdrop-filter`.** Spec
+* §13.5, decided on measurements. Tailwind composes every backdrop utility into
+* ONE declaration — `backdrop-filter: var(--tw-backdrop-blur,)
+* var(--tw-backdrop-brightness,) …` — so a raw `[backdrop-filter:var(…)]` here
+* is a second, competing declaration. Measured: a consumer passing
+* `backdrop-brightness-50` through `className` then computes
+* `brightness(0.5)` and **no blur at all**. The glass does not narrow, it
+* disappears, silently.
+*
+* Filling Tailwind's own slot keeps the composition: the default computes
+* `blur(8px)`, a consumer's brightness composes onto it, and a pack's
+* `blur(12px) saturate(1.4)` survives whole — which a length-valued
+* `backdrop-blur-(--name)` could not express at all.
+*
+* **`backdrop-saturate-100` is there to make the composed declaration exist**,
+* and the choice of utility is load-bearing. Filling a slot paints nothing
+* unless something emits the `backdrop-filter` that reads the slots, and only a
+* backdrop utility emits it. `backdrop-blur-none` would have done that — and it
+* writes `--tw-backdrop-blur` itself, so whichever of the two came later in the
+* stylesheet won: measured, with `blur-none` last the glass computes `none` and
+* disappears. `backdrop-saturate-100` writes a different slot, so the two cannot
+* race, and `saturate(1)` is the identity filter.
+*
+* **The cost is naming an internal, and it is pinned rather than accepted.**
+* `test/system/paint-glass.test.ts` asks the Tailwind compiler what
+* `backdrop-blur` emits and asserts the variable name against that answer, so a
+* rename fails loudly instead of the glass quietly ceasing to compose.
+*
+* **The fill is an explicit `background-color`, not `bg-(--name)`.** The
+* shorthand has nowhere to put the `var()` fallback an ink requires, and an ink
+* spent without one leaves the declaration invalid and CSS drops it in silence.
+*
+* **The `@supports` twin is not decoration.** A browser without
+* `backdrop-filter` paints the translucent fill over whatever is behind it and
+* the bar becomes unreadable; the fallback ink is the opaque surface it would
+* have had.
+*
+* @internal Not part of the public API.
+*/
+const GLASS_CLASSES = "[--tw-backdrop-blur:var(--cue-paint-glass-filter,blur(8px))] backdrop-saturate-100 [background-color:var(--cue-paint-glass-ink,color-mix(in_oklch,var(--cue-surface-1)_95%,transparent))] [@supports_not_(backdrop-filter:blur(0px))]:[background-color:var(--cue-paint-glass-fallback-ink,var(--cue-surface-1))]";
+//#endregion
+export { GLASS_CLASSES };

package/dist/system/_paint-glow.js

@@ -0,0 +1,32 @@
+//#region src/system/_paint-glow.ts
+/**
+* The halo: two offsetless stops at rest, two more on hover.
+*
+* **Offsetless is the rule that keeps this name from being `elevation` twice.**
+* A drop shadow has a y-offset and reads as light from above; a halo has none
+* and reads as the element emitting. The build refuses a glow value with an
+* offset for that reason, with a positive control that must throw.
+*
+* **A separate rest and hover ink, not a `calc()` on one.** The corpus doubles
+* the alpha on hover — railway `0.25`→`0.50`, aceternity `0.2`→`0.4` — and one
+* site's three-layer white halo exists *only* on hover. A single ink with a
+* multiplier cannot express the last of those at all.
+*
+* **Its own module**, because `@repo/docgen` attributes a token by the file its
+* class string lives in, including through a type-only import. One device per
+* file; the two ways that bit are recorded in `_paint-elevation.ts`.
+*
+* **Every ink carries its default as a `var()` fallback**, without exception: an
+* ink is declared in no stylesheet, so a spend without one leaves the whole
+* `box-shadow` invalid and CSS drops it in silence — measured, and the reason
+* the elevation rungs and the stroke recipe carry theirs.
+*
+* **Nothing wearing this may also carry a `shadow-` literal**: `twMerge` keeps
+* one of two `shadow-` utilities on the same element. `buttonTones` carries none
+* on any tone, which is what makes the adoption additive.
+*
+* @internal Not part of the public API.
+*/
+const GLOW_CLASSES = "shadow-[0_0_var(--cue-paint-glow-blur)_var(--cue-paint-glow-ink,transparent),0_0_var(--cue-paint-glow-blur-far)_var(--cue-paint-glow-ink,transparent)] hover:shadow-[0_0_var(--cue-paint-glow-blur)_var(--cue-paint-glow-ink-hover,transparent),0_0_var(--cue-paint-glow-blur-far)_var(--cue-paint-glow-ink-hover,transparent)]";
+//#endregion
+export { GLOW_CLASSES };

package/dist/system/_paint-ground-pattern.js

@@ -0,0 +1,30 @@
+//#region src/system/_paint-ground-pattern.ts
+/**
+* A repeating pattern on a page-level ground.
+*
+* **Distinct from a texture, and the difference is the layer.** A texture is
+* noise on a pseudo-element *over* the host (`_paint-texture.ts`); a ground
+* pattern is a repeating geometry painted as the host's own `background-image`,
+* beneath its content and beside its `background-color`. A page can carry both:
+* a hatch under a grain.
+*
+* **It sets `background-image`, so a host that paints its own image cannot take
+* it.** The two adopting surfaces paint a `background-color` only.
+*
+* **Its own module**, because `@repo/docgen` attributes a token by the file its
+* class string lives in, including through a type-only import.
+*
+* **The ink is spent by the pack's own image, not here.** A pattern is a whole
+* CSS `<image>` a pack writes, and `--cue-paint-ground-pattern-ink` is the name
+* that image references — which is why §4 documents these four image slots as
+* freezing their ink at the element the pack block sits on, and why they are
+* page-level devices where that costs nothing measurable.
+*
+* At the default `--cue-paint-ground-pattern` is `none`, so the host paints
+* exactly what it painted before.
+*
+* @internal Not part of the public API.
+*/
+const GROUND_PATTERN_CLASSES = "bg-[image:var(--cue-paint-ground-pattern)] bg-[length:var(--cue-paint-ground-pattern-size)]";
+//#endregion
+export { GROUND_PATTERN_CLASSES };

package/dist/system/_paint-rim.js

@@ -0,0 +1,41 @@
+//#region src/system/_paint-rim.ts
+/**
+* An inset ring on a surface that carries no shadow of its own.
+*
+* **A ring, not a border.** It is drawn as an inset `box-shadow`, outside the
+* box model, so it costs no layout and sits inside the surface's radius. That
+* is what lets a pack put a hairline of light on a panel without moving a
+* single pixel of content.
+*
+* **NOT the recessed control chassis**, and that is an accessibility rule
+* rather than a preference. `forced-colors: active` discards `box-shadow`
+* entirely and repaints outlines in the user's own highlight colour, so a ring
+* drawn as a shadow vanishes for exactly the people who most need it — and a
+* form control's ring is a focus indicator. `forms/chassis.test.ts` asserts
+* `controlSurface` contains no `shadow` at all, and it is right to.
+* §22's inventory lists `_chassis.ts:101` as a rim site; it is wrong, and the
+* guard predates it.
+*
+* A panel's or a card's rim is decorative, so the same loss is cosmetic there.
+*
+* **Nothing already carrying a `shadow-` utility may take this**, because
+* `twMerge` keeps one of two on the same element. The three adopting surfaces
+* were checked and carry none; an elevated surface gets its ring as the
+* hairline *layer* of `ELEVATION_*` instead, which is what that layer is for.
+*
+* **Its own module**, because `@repo/docgen` attributes a token by the file its
+* class string lives in, including through a type-only import.
+*
+* **The ink carries its default as a `var()` fallback**: an ink is declared in
+* no stylesheet, so a spend without one leaves the whole `box-shadow` invalid
+* and CSS drops it in silence — measured twice in earlier slices, once costing
+* an element its border and its fill together.
+*
+* At the defaults `--cue-paint-rim-width` is `0px` and the ink is
+* `transparent`, so the ring is a no-op twice over.
+*
+* @internal Not part of the public API.
+*/
+const RIM_INSET = "shadow-[inset_0_0_0_var(--cue-paint-rim-width)_var(--cue-paint-rim-ink,transparent)]";
+//#endregion
+export { RIM_INSET };

package/dist/system/_paint-stroke-sunken.js

@@ -0,0 +1,19 @@
+//#region src/system/_paint-stroke-sunken.ts
+/**
+* The gradient-stroke recipe for a recessed control — the `--cue-sunken` fill.
+*
+* **One fill per module, and that is the point of the file.** `@repo/docgen`
+* attributes a token to a component by the FILE the class string lives in, so a
+* single `_paint.ts` holding all three fills gave every adopting component all
+* three tokens: `card.json` claimed `--cue-sunken` and `--cue-surface-2`, which
+* `Card` does not paint. Measured on the first manifest regeneration of Slice 2;
+* the spec's own risk register predicted it and named this split as the remedy.
+*
+* The recipe itself, and why its off state is a flat gradient rather than
+* `none`, is documented once in `./_paint`.
+*
+* @internal Not part of the public API.
+*/
+const STROKE_SUNKEN = "border-transparent border-(length:--cue-paint-stroke-width) bg-[linear-gradient(var(--cue-sunken),var(--cue-sunken)),linear-gradient(var(--cue-paint-stroke-angle),var(--cue-paint-stroke-from,var(--cue-border)),var(--cue-paint-stroke-to,var(--cue-border)))] bg-origin-border [background-clip:padding-box,border-box]";
+//#endregion
+export { STROKE_SUNKEN };

package/dist/system/_paint-stroke-surface-1.js

@@ -0,0 +1,19 @@
+//#region src/system/_paint-stroke-surface-1.ts
+/**
+* The gradient-stroke recipe for a card or panel — the `--cue-surface-1` fill.
+*
+* **One fill per module, and that is the point of the file.** `@repo/docgen`
+* attributes a token to a component by the FILE the class string lives in, so a
+* single `_paint.ts` holding all three fills gave every adopting component all
+* three tokens: `card.json` claimed `--cue-sunken` and `--cue-surface-2`, which
+* `Card` does not paint. Measured on the first manifest regeneration of Slice 2;
+* the spec's own risk register predicted it and named this split as the remedy.
+*
+* The recipe itself, and why its off state is a flat gradient rather than
+* `none`, is documented once in `./_paint`.
+*
+* @internal Not part of the public API.
+*/
+const STROKE_SURFACE_1 = "border-transparent border-(length:--cue-paint-stroke-width) bg-[linear-gradient(var(--cue-surface-1),var(--cue-surface-1)),linear-gradient(var(--cue-paint-stroke-angle),var(--cue-paint-stroke-from,var(--cue-border)),var(--cue-paint-stroke-to,var(--cue-border)))] bg-origin-border [background-clip:padding-box,border-box]";
+//#endregion
+export { STROKE_SURFACE_1 };

package/dist/system/_paint-stroke-surface-2.js

@@ -0,0 +1,27 @@
+//#region src/system/_paint-stroke-surface-2.ts
+/**
+* The gradient-stroke recipe for an overlay — the `--cue-surface-2` fill.
+*
+* **One fill per module, and that is the point of the file.** `@repo/docgen`
+* attributes a token to a component by the FILE the class string lives in, so a
+* single `_paint.ts` holding all three fills gave every adopting component all
+* three tokens: `card.json` claimed `--cue-sunken` and `--cue-surface-2`, which
+* `Card` does not paint. Measured on the first manifest regeneration of Slice 2;
+* the spec's own risk register predicted it and named this split as the remedy.
+*
+* **Its stops fall back to `--cue-border-overlay`, not `--cue-border`**, and
+* that is the one place the three fills differ. An overlay has always drawn its
+* rim in `border-overlay`: a distinct token that some themes — venu — match to
+* the surface deliberately so the rim vanishes. Falling back to `--cue-border`
+* here would repaint every dialog, menu, popover and toast in a colour the
+* theme did not choose for them. Caught by the manifest, which showed 22
+* components losing `--cue-border-overlay` the moment this fill was adopted.
+*
+* The recipe itself, and why its off state is a flat gradient rather than
+* `none`, is documented once in `./_paint`.
+*
+* @internal Not part of the public API.
+*/
+const STROKE_SURFACE_2 = "border-transparent border-(length:--cue-paint-stroke-width) bg-[linear-gradient(var(--cue-surface-2),var(--cue-surface-2)),linear-gradient(var(--cue-paint-stroke-angle),var(--cue-paint-stroke-from,var(--cue-border-overlay)),var(--cue-paint-stroke-to,var(--cue-border-overlay)))] bg-origin-border [background-clip:padding-box,border-box]";
+//#endregion
+export { STROKE_SURFACE_2 };

package/dist/system/_paint-texture.js

@@ -0,0 +1,53 @@
+//#region src/system/_paint-texture.ts
+/**
+* A grain or pattern overlay, riding a pseudo-element.
+*
+* **Why `::before` and not the element's own background.** A texture sits *over*
+* whatever the host already paints — a band's ground, a shell's fill — and a
+* component's `background-image` is not free to take. The overlay is
+* `pointer-events-none` and `inset-0`, so it covers the host exactly and
+* intercepts nothing.
+*
+* **Its own module**, because `@repo/docgen` attributes a token by the file its
+* class string lives in, including through a type-only import. One device per
+* file; the two ways that bit are recorded in `_paint-elevation.ts`.
+*
+* **`isolate` and `before:-z-10` together, and neither works alone.** An
+* absolutely-positioned `::before` paints ABOVE its host's in-flow content, so
+* without them the texture covers the band's own text — measured, the white
+* text's brightest pixel drops 255 to 204 under a 60% overlay. `-z-10` alone
+* does not fix it: with no stacking context on the host the pseudo-element
+* falls behind the band's own background and the texture becomes invisible
+* entirely (measured: the ground pixel does not move). `isolate` gives the host
+* a stacking context, and inside one a negative-z child paints above the
+* background and below the content — which is exactly the layer a texture wants.
+* Found in review; the first gate could not see it because its test band had no
+* content in it.
+*
+* **The mask carries its `-webkit-` prefix**, which is the library's
+* convention rather than a guess: `elements/clamp.tsx:223` and
+* `chrome/_edge-scroller.tsx:73` are the only other mask users here and both
+* prefix it. Measured for completeness — Playwright's WebKit honours the
+* unprefixed property, identically to Chromium — so this is for the Safari
+* versions that engine is not, and it matches what the two existing sites
+* already decided. Found in review.
+*
+* **Nothing else in the library may take this pseudo-element on the same
+* element.** §6.5 note 2 is about that, and it is why the host was checked
+* before adopting: neither `Band` nor `AppShell` uses `::before` today.
+*
+* **No ink here, so no fallback rule to keep.** Every name this spends is a
+* declared pack name with a `:root` default — `texture` is `none`,
+* `texture-size` `auto`, `texture-opacity` `1`, `texture-blend` `normal`, and
+* `fade` (Slice 7's) `none`. Measured: at those defaults the overlay renders
+* identically to the same host with no pseudo-element at all.
+*
+* **The token layer ships no binary.** `--cue-paint-texture` takes a `data:`
+* URI a pack file holds inline, or an absolute `https://` URL a consumer's own
+* CDN serves — `PAINT_VALUES` enforces exactly those two and says why.
+*
+* @internal Not part of the public API.
+*/
+const TEXTURE_CLASSES = "relative isolate before:pointer-events-none before:absolute before:inset-0 before:-z-10 before:content-[''] before:bg-[image:var(--cue-paint-texture)] before:bg-[length:var(--cue-paint-texture-size)] before:opacity-(--cue-paint-texture-opacity) before:[mix-blend-mode:var(--cue-paint-texture-blend)] before:[mask-image:var(--cue-paint-fade)] before:[-webkit-mask-image:var(--cue-paint-fade)]";
+//#endregion
+export { TEXTURE_CLASSES };

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

@@ -252,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>`. */

package/dist/system/theme-provider.js

@@ -556,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/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",