@nxgt/material 3.7.0 → 3.7.2

package/dist/pdf-reader.js

@@ -1,3 +1,3 @@
-import { t as e } from "./public-CBlV2XuA.js";
+import { t as e } from "./public-SsiazLEv.js";
 import { configurePdfReader as t } from "@nxgt/material-core/pdf-reader";
 export { e as PdfReader, t as configurePdfReader };

package/dist/{public-CBlV2XuA.js → public-SsiazLEv.js}

@@ -2,15 +2,15 @@ import { r as e } from "./rolldown-runtime-BFFgcFxR.js";
 import { n as t } from "./ui.utils-CAnKTCw5.js";
 import { t as n } from "./utils-Bcd2Z3ea.js";
 import { A as r, E as i, M as a, O as o, R as s, a as c, k as l, o as u, w as d } from "./tooltip-tmFoTU_d.js";
-import { $ as f, c as p, d as m, f as h, i as g, l as _, n as v, o as y, t as b, u as x } from "./dropdown-menu-DiZvX4tG.js";
+import { $ as f, c as p, d as m, f as h, i as g, l as _, n as v, o as y, t as b, u as x } from "./dropdown-menu-DWtgUVW7.js";
 import { r as S, t as ee } from "./in-dialog-AiwTD3DK.js";
 import { C, D as w, E as T, O as te, S as E, T as ne, _ as re, f as ie, g as ae, k as oe, r as se, t as ce, u as le, w as ue } from "./dialog-DdJ1C4BR.js";
-import { S as de, a as D, d as O, g as fe, h as pe, i as me, m as he, n as k, r as ge, t as A, u as _e, w as ve } from "./toolbar-items-DnkS3bDY.js";
+import { S as de, a as D, d as O, g as fe, h as pe, i as me, m as he, n as k, r as ge, t as A, u as _e, w as ve } from "./toolbar-items-DsDDD5AY.js";
 import { t as j } from "./use-material-translation-hLQzOjF0.js";
-import { t as M } from "./button-1Fornjtn.js";
+import { t as M } from "./button--cF4gY14.js";
 import { n as ye, t as be } from "./icon-button-5A6Mrj6w.js";
 import { t as xe } from "./useEvent-2fKq-6w8.js";
-import { i as Se, n as Ce, r as we, t as Te } from "./empty-state-Cpvsmk0R.js";
+import { i as Se, n as Ce, r as we, t as Te } from "./empty-state-CRWLQ1sM.js";
 import { n as Ee } from "./use-slice-reducer-0r5dXnJe.js";
 import { r as De } from "./use-csp-nonce-ZKs9k-ov.js";
 import { t as Oe } from "./client-only.utils-lQ7GqP8w.js";
@@ -1526,7 +1526,7 @@ var Zr = mt(function({ pageNumber: e, doc: t, size: r, rotation: i, lit: a, curr
 		className: n("flex cursor-pointer flex-col items-center gap-1 rounded-lg p-1.5 outline-none transition-colors hover:bg-foreground/5 focus-visible:ring-2 focus-visible:ring-ring", a && "bg-primary/10"),
 		children: [/* @__PURE__ */ V("div", {
 			ref: d,
-			className: n("overflow-hidden rounded-sm bg-white shadow-sm [&>canvas]:block [&>canvas]:size-full", a && "ring-2 ring-primary"),
+			className: n("overflow-hidden rounded-sm bg-white shadow-sm [&>canvas]:block [&>canvas]:size-full", a && "ring-2 ring-primary-indicator"),
 			style: f
 		}), /* @__PURE__ */ V("span", {
 			"aria-hidden": !0,

package/dist/{render-json-BwJX1jZ2.js → render-json-DyFYFIkZ.js}

@@ -276,7 +276,7 @@ var U = (e) => typeof e == "string" ? e : typeof e == "number" || typeof e == "b
 			className: "m-0 flex list-none flex-wrap gap-2 p-0",
 			children: t.map((e) => /* @__PURE__ */ h("li", {
 				"aria-current": n.has(J(e)) || void 0,
-				className: "rounded-full border border-border px-3 py-1 text-sm aria-[current=true]:border-primary aria-[current=true]:bg-primary/10",
+				className: "rounded-full border border-border px-3 py-1 text-sm aria-[current=true]:border-primary-indicator aria-[current=true]:bg-primary/10",
 				children: q(e)
 			}, J(e)))
 		})]

package/dist/{rich-code-block-yxMXBuGd.js → rich-code-block-CwNwQs5z.js}

@@ -1,7 +1,7 @@
 import { t as e } from "./tooltip-tmFoTU_d.js";
-import { c as t, n, t as r } from "./dropdown-menu-DiZvX4tG.js";
+import { c as t, n, t as r } from "./dropdown-menu-DWtgUVW7.js";
 import { t as i } from "./use-material-translation-hLQzOjF0.js";
-import { a, i as o, n as s, o as c, t as l } from "./code-language-items-Bb7afEj-.js";
+import { a, i as o, n as s, o as c, t as l } from "./code-language-items-CGARRbVm.js";
 import { i as u, n as d, r as f, s as p } from "./dist-C3GR7kJd.js";
 import { t as m } from "./code-block-spec-CGLKRhwD.js";
 import { Check as h, ChevronDown as g, Copy as _, Maximize2 as v, WrapText as y } from "lucide-react";
@@ -143,7 +143,7 @@ function M({ node: e, editor: t, updateAttributes: n, editable: r, wrap: a, onWr
 }
 //#endregion
 //#region lib/components/ui/widgets/editor/extensions/code/code-block-open.tsx
-var N = x(() => import("./code-editor-DeZYlIO2.js").then((e) => e.n).then((e) => ({ default: e.CodeEditor })));
+var N = x(() => import("./code-editor-0CdGwKDg.js").then((e) => e.n).then((e) => ({ default: e.CodeEditor })));
 function P() {
 	let { t: e } = i();
 	return /* @__PURE__ */ T("div", {

package/dist/{rich-text-viewer-Bq-2vTVm.js → rich-text-viewer-LO1IZCWs.js}

@@ -3,7 +3,7 @@ import { t } from "./utils-Bcd2Z3ea.js";
 import { B as n, E as r, I as i, Q as a, U as o, Z as s, c, d as l, m as u } from "./youtube-node-OWSNlYCc.js";
 import { r as d, t as f } from "./lib-CEU1EE-D.js";
 import { a as p, c as ee, i as m, l as h, o as g, s as _, t as v, u as y } from "./headless-extensions-CvmdhANJ.js";
-import { n as b, t as x } from "./render-json-BwJX1jZ2.js";
+import { n as b, t as x } from "./render-json-DyFYFIkZ.js";
 import { t as S } from "./markdown-engine-Do-jxF--.js";
 import { Fragment as C, jsx as w, jsxs as T } from "react/jsx-runtime";
 //#region lib/components/ui/widgets/editor/viewer/parse-markdown.ts

package/dist/{spinner-D-FE_mTW.js → spinner-CtGCPza-.js}

@@ -30,7 +30,7 @@ var i = t("transition-all duration-500", {
 		{
 			variant: "1",
 			color: "primary",
-			className: "border-primary/10 border-t-primary"
+			className: "border-primary/10 border-t-primary-indicator"
 		},
 		{
 			variant: "1",
@@ -70,7 +70,7 @@ var i = t("transition-all duration-500", {
 		{
 			variant: "2",
 			color: "primary",
-			className: "border-primary/10 border-b-primary border-t-primary"
+			className: "border-primary/10 border-b-primary-indicator border-t-primary-indicator"
 		},
 		{
 			variant: "2",
@@ -110,7 +110,7 @@ var i = t("transition-all duration-500", {
 		{
 			variant: "3",
 			color: "primary",
-			className: "border-primary/10 border-b-primary border-t-primary border-r-primary"
+			className: "border-primary/10 border-b-primary-indicator border-t-primary-indicator border-r-primary-indicator"
 		},
 		{
 			variant: "3",
@@ -150,7 +150,7 @@ var i = t("transition-all duration-500", {
 		{
 			variant: "4",
 			color: "primary",
-			className: "stroke-primary"
+			className: "stroke-primary-indicator"
 		},
 		{
 			variant: "4",

package/dist/styles.css

@@ -55,6 +55,7 @@
 	--color-primary: var(--primary);
 	--color-primary-foreground: var(--primary-foreground);
 	--color-primary-text: var(--primary-text);
+	--color-primary-indicator: var(--primary-indicator);
 	/* Containers: a tint of the base colour over the surface, from the variant that
 	 * is lifted in dark (primary-text, error-text) so it shows there too. Accent, a
 	 * near-grey a tint would hide, is the colour itself. Text on one: `text-foreground`. */

package/dist/{toolbar-items-DnkS3bDY.js → toolbar-items-DsDDD5AY.js}

@@ -1,6 +1,6 @@
 import { t as e } from "./utils-Bcd2Z3ea.js";
 import { A as t, D as n, E as r, I as i, M as a, P as o, R as s, S as c, T as l, c as u, d, f, k as p, l as m, t as h, u as g, x as _ } from "./tooltip-tmFoTU_d.js";
-import { $ as v, A as y, M as b, N as x, Q as S, X as C, Z as w, b as T, d as ee, f as E, i as te, j as ne, l as re, n as ie, o as ae, r as oe, t as se, u as ce, y as le } from "./dropdown-menu-DiZvX4tG.js";
+import { $ as v, A as y, M as b, N as x, Q as S, X as C, Z as w, b as T, d as ee, f as E, i as te, j as ne, l as re, n as ie, o as ae, r as oe, t as se, u as ce, y as le } from "./dropdown-menu-DWtgUVW7.js";
 import { a as ue, c as de, l as fe, o as pe, r as me, s as he, t as ge } from "./in-dialog-AiwTD3DK.js";
 import { t as _e } from "./use-material-translation-hLQzOjF0.js";
 import { t as ve } from "./warn-once-C_e47JM8.js";

package/dist/{use-chat-composer-BhdPNmYm.js → use-chat-composer-DZ01a16D.js}

@@ -3,27 +3,27 @@ import { t } from "./ui.utils-CAnKTCw5.js";
 import { t as n } from "./utils-Bcd2Z3ea.js";
 import { n as r } from "./use-shape-morph-BKA_R5P5.js";
 import { A as i, D as a, E as o, F as s, M as c, O as l, R as u, T as d, _ as f, a as p, b as m, g as h, h as g, k as _, m as v, o as y, p as b, t as x, v as S, w as C, y as w } from "./tooltip-tmFoTU_d.js";
-import { $ as T, D as E, E as D, N as O, O as k, Q as A, X as ee, Z as j, c as M, d as N, et as te, f as ne, i as P, k as re, m as ie, n as F, o as ae, p as oe, t as se, u as I } from "./dropdown-menu-DiZvX4tG.js";
+import { $ as T, D as E, E as D, N as O, O as k, Q as A, X as ee, Z as j, c as M, d as N, et as te, f as ne, i as P, k as re, m as ie, n as F, o as ae, p as oe, t as se, u as I } from "./dropdown-menu-DWtgUVW7.js";
 import { i as ce, n as le, t as ue } from "./in-dialog-AiwTD3DK.js";
 import { A as de, C as fe, D as pe, E as me, O as he, S as ge, T as _e, _ as ve, b as ye, f as be, g as xe, k as Se, l as Ce, m as we, n as Te, o as Ee, r as De, s as Oe, t as ke, u as Ae, v as je, w as Me, x as Ne, y as Pe } from "./dialog-DdJ1C4BR.js";
 import { A as Fe, C as Ie, D as Le, E as Re, O as ze, S as Be, T as Ve, _ as He, a as Ue, b as We, d as Ge, f as Ke, g as qe, h as Je, i as Ye, k as Xe, l as Ze, m as Qe, n as $e, o as et, p as tt, r as nt, s as rt, t as it, u as at, v as ot, w as st, x as ct, y as lt } from "./floating-ui.dom-KkZSW8_E.js";
 import { a as ut, i as dt, n as ft } from "./field-blur-context-Dw9ZAgBr.js";
-import { C as pt, D as mt, S as ht, a as gt, c as _t, d as vt, l as yt, n as bt, o as xt, s as St, u as Ct } from "./toolbar-items-DnkS3bDY.js";
+import { C as pt, D as mt, S as ht, a as gt, c as _t, d as vt, l as yt, n as bt, o as xt, s as St, u as Ct } from "./toolbar-items-DsDDD5AY.js";
 import "./stored-language-Bb7yX5uE.js";
 import { a as wt } from "./translator-or2y0JJB.js";
 import { h as Tt } from "./get-CTzJAwfc.js";
 import { t as Et } from "./isEmpty-F_g3jLf8.js";
 import { t as L } from "./use-material-translation-hLQzOjF0.js";
-import { t as Dt } from "./spinner-D-FE_mTW.js";
+import { t as Dt } from "./spinner-CtGCPza-.js";
 import { i as Ot } from "./button-tones-BgZJ1tkD.js";
-import { a as kt, n as At, o as jt, r as Mt, t as Nt } from "./button-1Fornjtn.js";
+import { a as kt, n as At, o as jt, r as Mt, t as Nt } from "./button--cF4gY14.js";
 import { t as R } from "./icon-button-5A6Mrj6w.js";
 import { t as Pt } from "./use-ssr-media-query-C6M5m8sf.js";
 import { n as Ft, t as It } from "./util-4heV2LPI.js";
 import { t as Lt } from "./useEvent-2fKq-6w8.js";
 import { f as Rt } from "./field-blur-DFUazxsL.js";
 import { c as zt, i as Bt, l as Vt, o as Ht, r as Ut, s as Wt, t as Gt } from "./dist-C3GR7kJd.js";
-import { o as Kt, t as qt } from "./empty-state-Cpvsmk0R.js";
+import { o as Kt, t as qt } from "./empty-state-CRWLQ1sM.js";
 import { t as Jt } from "./warn-once-C_e47JM8.js";
 import { i as Yt, n as Xt } from "./use-slice-reducer-0r5dXnJe.js";
 import { a as Zt, i as Qt } from "./escape-owner-B8k7DvFa.js";
@@ -9004,7 +9004,7 @@ function qb({ className: e, value: t, disabled: r, ...i }) {
 		disabled: r,
 		...Hu(/* @__PURE__ */ G(Wl, {
 			"data-slot": "radio-group-item",
-			className: n("nxgt-radio nxgt-touch-target relative focus-visible:data-[state=unchecked]:border-primary focus-visible:ring-ring/50 aria-invalid:ring-error/20 dark:aria-invalid:ring-error/40 aria-invalid:border-error in-aria-invalid:border-error dark:bg-input/30 aspect-square size-5 shrink-0 shadow-xs outline-none focus-visible:ring-[3px] forced-colors:focus-visible:outline-solid forced-colors:focus-visible:outline-2 forced-colors:focus-visible:outline-offset-2 forced-colors:focus-visible:outline-[Highlight] disabled:cursor-not-allowed disabled:opacity-50", e),
+			className: n("nxgt-radio nxgt-touch-target relative focus-visible:data-[state=unchecked]:border-primary-indicator focus-visible:ring-ring/50 aria-invalid:ring-error/20 dark:aria-invalid:ring-error/40 aria-invalid:border-error in-aria-invalid:border-error dark:bg-input/30 aspect-square size-5 shrink-0 shadow-xs outline-none focus-visible:ring-[3px] forced-colors:focus-visible:outline-solid forced-colors:focus-visible:outline-2 forced-colors:focus-visible:outline-offset-2 forced-colors:focus-visible:outline-[Highlight] disabled:cursor-not-allowed disabled:opacity-50", e),
 			...i,
 			children: /* @__PURE__ */ G("span", {
 				"data-slot": "radio-group-indicator",
@@ -10973,7 +10973,7 @@ var US = (e = {}) => yn({
 		let [{ default: t }, { lowlight: n }, { richCodeBlock: r }] = await Promise.all([
 			import("./dist-CRMFGjng.js"),
 			import("./lowlight-OtcjU2Sa.js"),
-			import("./rich-code-block-yxMXBuGd.js")
+			import("./rich-code-block-CwNwQs5z.js")
 		]);
 		return [r(t, {
 			lowlight: n,
@@ -14368,7 +14368,7 @@ function zE({ variant: e = "dots", getLabel: t, className: r, ...i }) {
 				className: n("group/indicator flex h-6 min-w-6 cursor-pointer items-center justify-center rounded-full", NE),
 				children: /* @__PURE__ */ G("span", {
 					"data-slot": "carousel-indicator-dot",
-					className: n("block h-2 w-2 rounded-full bg-foreground/30 group-hover/indicator:bg-foreground/50 forced-colors:bg-[ButtonText]", l && "bg-primary group-hover/indicator:bg-primary forced-colors:bg-[Highlight]", l && e === "pill" && "w-6")
+					className: n("block h-2 w-2 rounded-full bg-foreground/30 group-hover/indicator:bg-foreground/50 forced-colors:bg-[ButtonText]", l && "bg-primary-indicator group-hover/indicator:bg-primary-indicator forced-colors:bg-[Highlight]", l && e === "pill" && "w-6")
 				})
 			}, i);
 		})
@@ -14571,7 +14571,7 @@ function pD() {
 			type: "button",
 			"aria-label": dD(e),
 			"aria-current": t.currentIndex === i || void 0,
-			className: n("h-1.5 cursor-pointer rounded-full [transition:width_var(--nxgt-motion-spatial-fast-duration)_var(--nxgt-motion-spatial-fast),background-color_var(--nxgt-motion-effects-default-duration)_var(--nxgt-motion-effects-default)]", WE, t.currentIndex === i ? "w-5 bg-primary" : "w-1.5 bg-foreground/30 hover:bg-foreground/50"),
+			className: n("h-1.5 cursor-pointer rounded-full [transition:width_var(--nxgt-motion-spatial-fast-duration)_var(--nxgt-motion-spatial-fast),background-color_var(--nxgt-motion-effects-default-duration)_var(--nxgt-motion-effects-default)]", WE, t.currentIndex === i ? "w-5 bg-primary-indicator" : "w-1.5 bg-foreground/30 hover:bg-foreground/50"),
 			onClick: () => r(i)
 		}, e.id))
 	});
@@ -14887,7 +14887,7 @@ function JD({ shape: e, target: t }) {
 		"data-slot": "media-mini-target",
 		"data-corner": r,
 		"data-active": r === t || void 0,
-		className: n("pointer-events-none fixed z-40 border-2 border-dashed border-primary/60 bg-primary/5 data-active:border-primary data-active:bg-primary/15 forced-colors:border-[Highlight]", kD[r], AD[e], jD[e])
+		className: n("pointer-events-none fixed z-40 border-2 border-dashed border-primary/60 bg-primary/5 data-active:border-primary-indicator data-active:bg-primary/15 forced-colors:border-[Highlight]", kD[r], AD[e], jD[e])
 	}, r));
 }
 //#endregion
@@ -22891,7 +22891,7 @@ function FL({ entry: e, id: t, selected: r, startsGroup: i, onPick: a }) {
 		tabIndex: -1,
 		onMouseDown: (e) => e.preventDefault(),
 		onClick: a,
-		className: n("flex cursor-pointer items-center gap-3 rounded-md px-2 py-1.5 text-sm", "hover:bg-accent aria-selected:bg-primary/10 aria-selected:shadow-[inset_2px_0_0_var(--color-primary)]"),
+		className: n("flex cursor-pointer items-center gap-3 rounded-md px-2 py-1.5 text-sm", "hover:bg-accent aria-selected:bg-primary/10 aria-selected:shadow-[inset_2px_0_0_var(--color-primary-indicator)]"),
 		children: [
 			o && /* @__PURE__ */ G("span", {
 				className: "flex size-8 shrink-0 items-center justify-center rounded-md border bg-muted/30",
@@ -23093,7 +23093,7 @@ function JL({ className: e, variant: t = "docked", layout: r, dividers: i = !0,
 //#region lib/components/ui/display/status-indicator/status-indicator.tsx
 var YL = {
 	neutral: "bg-muted-foreground",
-	primary: "bg-primary",
+	primary: "bg-primary-indicator",
 	success: "bg-success",
 	info: "bg-info",
 	warning: "bg-warning",
@@ -23423,7 +23423,7 @@ function _R({ sendLabel: e, stopLabel: t, isDisabled: r, isEmpty: i, onStop: a,
 //#endregion
 //#region lib/components/ui/widgets/chat/chat-reply-quote.tsx
 function vR({ author: e, content: t, onClick: r, tone: i = "default", className: a, ...o }) {
-	let { t: s } = L(), c = n("flex w-full min-w-0 flex-col gap-0.5 rounded-(--nxgt-shape-corner-sm) border-s-[3px] px-2.5 py-1.5 text-start text-xs", i === "inverted" ? "border-primary-foreground/70 bg-primary-foreground/15 text-primary-foreground" : "border-primary bg-primary/8 text-foreground", r && "cursor-pointer outline-none transition-colors duration-(--nxgt-motion-effects-fast-duration) ease-effects-fast hover:bg-primary/15 focus-visible:ring-[3px] focus-visible:ring-ring/50 forced-colors:focus-visible:outline-2 forced-colors:focus-visible:outline-solid forced-colors:focus-visible:outline-[Highlight]", a), l = /* @__PURE__ */ K(Xa, { children: [e != null && /* @__PURE__ */ G("span", {
+	let { t: s } = L(), c = n("flex w-full min-w-0 flex-col gap-0.5 rounded-(--nxgt-shape-corner-sm) border-s-[3px] px-2.5 py-1.5 text-start text-xs", i === "inverted" ? "border-primary-foreground/70 bg-primary-foreground/15 text-primary-foreground" : "border-primary-indicator bg-primary/8 text-foreground", r && "cursor-pointer outline-none transition-colors duration-(--nxgt-motion-effects-fast-duration) ease-effects-fast hover:bg-primary/15 focus-visible:ring-[3px] focus-visible:ring-ring/50 forced-colors:focus-visible:outline-2 forced-colors:focus-visible:outline-solid forced-colors:focus-visible:outline-[Highlight]", a), l = /* @__PURE__ */ K(Xa, { children: [e != null && /* @__PURE__ */ G("span", {
 		className: n("truncate font-semibold", i === "inverted" ? "" : "text-primary-text"),
 		children: e
 	}), /* @__PURE__ */ G("span", {

package/docs/components/navigation-and-layout.md

@@ -81,7 +81,7 @@ phone's menu sheet pad clear of `env(safe-area-inset-*)`, as classes; see the
 | `titleAs` | `'h1'` … `'h6'` \| `'div'` | `'h1'` | `ActivityContent`: the title's heading level |
 | `inset` | `boolean` | `false` | `ActivityContent`: pads the content 1rem on each side. Off, it lines up with the app bar and the cards |
 | `align` | `'start' \| 'center'` | `'start'` | `ActivityLayout`, `AppSidebar`: the collapsed rail's entries sit right under the brand, or `'center'` for centred in the height below it |
-| `backdrop` | `ReactNode` | — | `ActivityLayout`: a decorative background behind the frame, in place of the gradient and its blobs: a `Background` preset from `@nxgt/material/backgrounds`. Rendered in an `inert`, `aria-hidden` layer that fills the layout. See [Use a background preset behind the shell](../guides/app-shell.md#use-a-background-preset-behind-the-shell) |
+| `backdrop` | `ReactNode` | — | `ActivityLayout`: a decorative background behind the frame, in place of the gradient and its blobs: a `Background` preset from `@nxgt/material/backgrounds`. Rendered in an `inert`, `aria-hidden` layer that fills the content column; the chrome and lists stay opaque over it, coloured by `--nxgt-backdrop-chrome` and `--nxgt-backdrop-surface`. See [Use a background preset behind the shell](../guides/app-shell.md#use-a-background-preset-behind-the-shell) |
 | `routeTransition` | `boolean \| Omit<ViewTransitionProps, 'children' \| 'ref'>` | `true` | `ActivityLayout`: React's `<ViewTransition>` around the content region, so a navigation cross-fades it. `false` renders none (your app has its own boundary); an object passes `default` / `update` classes, `name`, callbacks through. See [Route transitions](../guides/app-shell.md#route-transitions) |
 
 The active entry is the longest match across the whole menu, segment-aware.

package/docs/guides/app-shell.md

@@ -512,18 +512,41 @@ export function Shell({ items }: { items: MenuItem[] }) {
   carries `data-backdrop`, and the built-in gradient (its tint and three blobs) is not drawn (plain
   CSS, no inline `style`). Without it the markup and the look are what they
   were; `null`, `undefined` and `false` count as none.
-- **It sits behind everything.** The node is wrapped in a layer
-  (`[data-slot="activity-layout-backdrop"]`) that fills the layout, under the
-  sidebar, the header and the content. The layer is `inert`, `aria-hidden="true"`
+- **It sits behind the content column.** The node is wrapped in a layer
+  (`[data-slot="activity-layout-backdrop"]`) that fills the column beside the
+  sidebar, under the app bar, the breadcrumb and the content. The layer is `inert`, `aria-hidden="true"`
   and takes no pointer, so the preset is decoration only: put nothing
   interactive in it.
-- **It fills the layout.** A `Background` in the layer is sized to the layer,
+- **It fills the column.** A `Background` in the layer is sized to the layer,
   not to `100lvw × 100lvh`, so you need no `className` or `fill`. In
-  `scroll="document"` the layout grows with the content, and so does the preset.
-- **Readable by design.** The frame keeps `bg-background-paper` and the sidebar
-  and header their `bg-background/40`, so the content reads over a busy preset.
-  Tone it down with the preset's `intensity` (`subtle`) rather than by
-  restyling the frame.
+  `scroll="document"` the column grows with the content, and so does the preset.
+- **The shapes stay in the free content area.** Under a `backdrop`, every
+  surface of the chrome is opaque, so no shape runs behind a text, an icon or a
+  control: the sidebar (over its full height), the app bar, the breadcrumb (a
+  pill as wide as its crumbs), the tabs strip, the lists and tables (band and
+  rows), the segmented `ToggleGroup`, the list bar and the phone tiles. Nothing
+  changes without a `backdrop`. Two tokens set the colours, on the layout (a
+  `className` such as `[--nxgt-backdrop-chrome:var(--muted)]`) or on any
+  ancestor:
+
+  | Token | Paints | Default |
+  | --- | --- | --- |
+  | `--nxgt-backdrop-chrome` | sidebar, app bar, breadcrumb, tabs strip | `var(--background)` |
+  | `--nxgt-backdrop-surface` | lists and tables (`DataTable`, `ServerTable`) | `var(--card)` |
+
+  ```tsx
+  <ActivityLayout
+    backdrop={<Background preset="shapes" />}
+    className="[--nxgt-backdrop-chrome:var(--card)] [--nxgt-backdrop-surface:var(--background)]"
+  >
+  ```
+
+  Give a colour, not a translucent one: a see-through surface lets the shapes
+  run behind the text again. Tone the preset down with its `intensity`
+  (`subtle`) rather than restyling the frame. The backdrop shows only inside
+  the content column (its layer is in the column, rounded like the frame): the
+  frame's padding, the gap beside the sidebar and the strip above the app bar
+  are the chrome colour, so no shape is cut at the edges.
 - **The stylesheet is yours to import.** `@nxgt/material/backgrounds` is a
   separate entry, so `ActivityLayout` never pulls it in: import it where you
   build the `backdrop`, and its `backgrounds.css` once.

package/docs/guides/theming.md

@@ -65,6 +65,7 @@ at the top are needed is in [getting started](../getting-started.md#styles).
 | `--nxgt-accent` | `[--nxgt-accent:…]` | the mark colour of the selection controls: the fill, handle, state layer and stop dots of `Slider`, the on state of `Switch`, the box and dot of `Checkbox` and `Radio`. It defaults to `--primary` (`--primary-text` in dark) and is set per control, so override it on the control itself, not on `:root` |
 | `--error`, `--success`, `--info`, `--warning` (+ `-foreground`) | `bg-error`, `text-success`, … | the status colours of `Button`, `Alert`, `Badge`, toasts |
 | `--primary-text` | `text-primary-text` | primary drawn as text or an icon on a page, card or popover surface: `Typography tone="primary"`, links, the `Alert` primary icon, selected labels. Equal to `--primary` in light; in dark, `--primary` mixed 60 % with white (`color-mix(in oklab, var(--primary) 40%, white)`), well over 4.5:1 on `--background` and `--card` |
+| `--primary-indicator` | `bg-primary-indicator`, `border-primary-indicator`, `ring-primary-indicator`, `stroke-primary-indicator` | primary drawn as a non-text mark that carries a state (WCAG 1.4.11, 3:1): an active bar or dot, a selected or focused border, a ring, a spinner arc. Equal to `--primary` in light; in dark, `--primary` mixed 25 % with white (`color-mix(in oklab, var(--primary) 75%, white)`), 4.5:1 on `--background`, 4.1:1 on `--card`, 3.7:1 on `--muted` (`--primary` itself gives 2.5, 2.3 and 2.1:1) |
 | `--error-text` | `text-error-text` | error drawn as text: field messages, `HelperText` in its error state, form and dialog errors, `variant="error"` menu items |
 | `--destructive` | `bg-destructive`, `text-destructive` | deprecated alias of `--error`: the light theme sets it to `var(--error)`, the dark theme keeps its own value; use `--error` |
 | `--card`, `--popover`, `--tooltip` (+ `-foreground`) | `bg-card`, `bg-popover`, `bg-tooltip` | surfaces |

package/docs/troubleshooting.md

@@ -60,6 +60,7 @@ words in your error.
 - [axe reports `target-size` on a control under a form's sticky actions](#axe-reports-target-size-on-a-control-under-a-forms-sticky-actions)
 - [`color-contrast` fails over the background blobs on phone](#color-contrast-fails-over-the-background-blobs-on-phone)
 - [`ActivityLayout`'s `backdrop` shows nothing, or the blobs are still there](#activitylayouts-backdrop-shows-nothing-or-the-blobs-are-still-there)
+- [Shapes of an `ActivityLayout` `backdrop` run behind the text of the chrome or a list](#shapes-of-an-activitylayout-backdrop-run-behind-the-text-of-the-chrome-or-a-list)
 - [Shaped Gallery tiles are plain rounded squares](#shaped-gallery-tiles-are-plain-rounded-squares)
 - [A component with my own tone (Shape, Fab, Avatar, StatCard, a metric card) shows no colour, or `tone` is a type error](#a-component-with-my-own-tone-shape-fab-avatar-statcard-a-metric-card-shows-no-colour-or-tone-is-a-type-error)
 - [A test expects the old `bg-muted` Avatar fallback, or a filled fallback shows a grey ring](#a-test-expects-the-old-bg-muted-avatar-fallback-or-a-filled-fallback-shows-a-grey-ring)
@@ -960,6 +961,15 @@ An app that overrides `--primary` under `:root` and `.dark, [data-theme="dark"]`
 gets `--primary-text` for free; set `--primary-text` after it to choose another
 colour. On an element below the root, set `--color-primary-text`.
 
+The same goes for a primary mark that is not text: a bar, a dot, a selected or
+focused border, a ring or a spinner arc. In dark, `--primary` is only 2.1 to
+2.5:1 on the surfaces, under the 3:1 of WCAG 1.4.11. Draw it with
+`bg-primary-indicator`, `border-primary-indicator`, `ring-primary-indicator` or
+`stroke-primary-indicator`: `--primary-indicator` is `--primary` in light and
+`--primary` mixed 25 % with white in dark (3.7:1 or more on `--background`,
+`--card` and `--muted`). It follows an app's own `--primary`; set
+`--primary-indicator` after it to choose another dark colour.
+
 ### `expectTapTargets` reports a checkbox, switch or chip remove button under 44px
 
 **When:** a phone project's `expectTapTargets` (`@nxgt/playwright`) lists a
@@ -1314,6 +1324,21 @@ import { Background } from '@nxgt/material/backgrounds';
 import '@nxgt/material/backgrounds.css';
 ```
 
+### Shapes of an `ActivityLayout` `backdrop` run behind the text of the chrome or a list
+
+**When:** with `backdrop`, a breadcrumb, a tabs strip, a table or the sidebar
+shows the shapes through it, or you set a translucent colour and they come back.
+**Why:** under `data-backdrop` those surfaces take `--nxgt-backdrop-chrome` (default
+`var(--background)`) and `--nxgt-backdrop-surface` (default `var(--card)`); before
+3.7.2 they had no surface or a translucent one, and a custom `className` with its
+own `bg-*` on a list wins over the token.
+**Fix:** update `@nxgt/material`, and give the tokens opaque colours; drop a
+`bg-*/NN` class from the list's `className`.
+
+```tsx
+<ActivityLayout backdrop={<Background preset="shapes" />} className="[--nxgt-backdrop-surface:var(--background)]" />
+```
+
 ### A ResponsiveButton no longer shows its tooltip next to its visible label
 
 **When:** a `ResponsiveButton` with a `tooltip` on a desktop width (768 px and up, or `expanded`), where the tooltip used to appear beside the label.

package/lib/components/animations/scroll.css

@@ -132,7 +132,7 @@
 		z-index: 50;
 		height: 0.25rem;
 		pointer-events: none;
-		background-color: var(--primary);
+		background-color: var(--primary-indicator);
 	}
 	transform-origin: 0 50%;
 	animation: nx-scroll-progress linear both;

package/lib/components/base-content.css

@@ -43,7 +43,7 @@
 				}
 
 				.column-resize-handle {
-					background-color: var(--color-primary);
+					background-color: var(--color-primary-indicator);
 					bottom: -2px;
 					pointer-events: none;
 					position: absolute;

package/lib/components/base.css

@@ -124,7 +124,7 @@
 			height: 0.55em;
 			transform: scale(0);
 			transition: 120ms transform ease-in-out;
-			box-shadow: inset 1em 1em var(--color-primary);
+			box-shadow: inset 1em 1em var(--color-primary-indicator);
 		}
 		input[type="checkbox"]:checked::before {
 			transform: scale(1);

package/lib/components/editor-field-expressive.css

@@ -37,6 +37,11 @@
 		border-color: color-mix(in oklab, var(--primary) 60%, transparent);
 		box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 50%, transparent);
 	}
+	/* Dark: the 60 % border is under 3:1 on the card (WCAG 1.4.11). */
+	:is(.dark, [data-theme="dark"])
+	[data-slot="compact-editor"][data-look="expressive"]:focus-within {
+		border-color: var(--primary-indicator);
+	}
 	[data-slot="editor-field"][data-invalid]
 		:is(
 			[data-slot="compact-editor"],

package/lib/components/editor-prose.css

@@ -115,7 +115,7 @@
 		}
 
 		blockquote {
-			border-inline-start: 3px solid var(--primary);
+			border-inline-start: 3px solid var(--primary-indicator);
 			padding-inline-start: 1.1em;
 			color: var(--muted-foreground);
 			font-family: var(--nxgt-prose-heading-font);

package/lib/components/theme-tokens.css

@@ -17,6 +17,11 @@
 	   the violet page (7.9:1 on a Card; the colour itself gives 6.8:1 on the
 	   page); the dark theme lifts it. */
 	--primary-text: color-mix(in oklab, var(--primary) 96%, black);
+	/* Primary drawn as a non-text mark (WCAG 1.4.11, 3:1): an indicator bar or dot,
+	   a selected or focused border, a ring, a spinner arc, a progress fill
+	   (`bg-primary-indicator`, `border-primary-indicator`...). Light is --primary;
+	   the dark theme lifts it. */
+	--primary-indicator: var(--primary);
 	/* --secondary, --success and --info are 0.02 darker than before: on the
 	   violet page tint (--background, 97.3 %) their own 15 % tonal tint gave the
 	   text 4.3 to 4.5:1; now 4.7:1 or more on the page and on a Card. */
@@ -104,6 +109,9 @@
 	/* Mixed 60 % toward white (the tonal Button labels' recipe): readable as text
 	   on --background and --card. */
 	--primary-text: color-mix(in oklab, var(--primary) 40%, white);
+	/* --primary itself is 2.5:1 on --background, 2.3:1 on --card and 2.1:1 on
+	   --muted. Mixed 25 % toward white: 4.5:1, 4.1:1 and 3.7:1. */
+	--primary-indicator: color-mix(in oklab, var(--primary) 75%, white);
 	/* Brighter than the light one: it is read as text on the dark surfaces (6.3:1
 	   on --background, 5.8:1 on --card; 4.6:1 on its own 15 % tonal tint over a
 	   Card). A filled secondary surface mixes it toward --background (the opaque

package/lib/components/ui/display/period-cards/period-cards.css

@@ -49,8 +49,8 @@
 		pointer-events: none;
 	}
 	[data-slot="period-card"][data-state="current"] {
-		--card-bar: var(--primary);
-		border-color: var(--primary);
+		--card-bar: var(--primary-indicator);
+		border-color: var(--primary-indicator);
 		background: color-mix(in oklab, var(--primary) 7%, var(--card));
 	}
 	[data-slot="period-card"][data-state="past"] {

package/lib/components/ui/layout/app-shell/activity-backdrop.css

@@ -1,11 +1,24 @@
 /* ActivityLayout's `backdrop` prop: a node (a `Background` preset from
- * `@nxgt/material/backgrounds`) drawn behind the frame instead of the built-in
+ * `@nxgt/material/backgrounds`) drawn behind the content column instead of the built-in
  * gradient. `data-backdrop` is on the layout's root only while one is given, so
  * without it nothing here matches and the gradient is unchanged.
  *
  * Plain CSS, no inline `style`, in `@layer components` like the rest: an app's
  * utilities still win. The layer itself (`data-slot="activity-layout-backdrop"`)
- * is positioned by classes in activity-layout.tsx. */
+ * is in the content column, positioned by classes in activity-layout.tsx: the
+ * frame's padding and gaps take the chrome fill, so the shapes show nowhere
+ * else.
+ *
+ * The shapes show in the free content area only: every surface of the chrome and
+ * of the lists is opaque, so none runs behind a text, an icon or a control. Two
+ * tokens, set on the layout (or any ancestor), tune them:
+ *   --nxgt-backdrop-chrome   the sidebar, the app bar, the breadcrumb, the tabs
+ *                            strip (default: var(--background))
+ *   --nxgt-backdrop-surface  the lists and tables, their band and rows
+ *                            (default: var(--card))
+ * The sidebar, the app bar and the tables take theirs from a class whose
+ * fallback is their usual surface, through `--nxgt-backdrop-fill-*`: a utility
+ * class outranks any rule in a layer, so a rule here could not set them. */
 @layer components {
 	/* The gradient's own tint and blobs give way to the backdrop. */
 	[data-slot="activity-layout"][data-backdrop] {
@@ -21,4 +34,30 @@
 		width: 100%;
 		height: 100%;
 	}
+
+	[data-slot="activity-layout"][data-backdrop] {
+		--nxgt-backdrop-fill-chrome: var(--nxgt-backdrop-chrome, var(--background));
+		--nxgt-backdrop-fill-surface: var(--nxgt-backdrop-surface, var(--card));
+	}
+
+	/* The breadcrumb trail: a pill under the app bar, as wide as its crumbs. */
+	[data-slot="activity-layout"][data-backdrop]
+		[data-slot="activity-layout-frame"]
+		> *
+		> [data-slot="breadcrumb"] {
+		width: fit-content;
+		max-width: 100%;
+		padding-block: 0.25rem;
+		padding-inline-end: 0.75rem;
+		border-radius: 999px;
+		background: var(--nxgt-backdrop-fill-chrome);
+	}
+
+	/* Tabs: the strip is a band, its top corners rounded. (The segmented look
+	 * has its own track.) */
+	[data-slot="activity-layout"][data-backdrop] [data-slot="tabs-list"] {
+		border-start-start-radius: var(--radius);
+		border-start-end-radius: var(--radius);
+		background: var(--nxgt-backdrop-fill-chrome);
+	}
 }

package/lib/components/ui/media/pdf-viewer/pdf-viewer.css

@@ -9,7 +9,7 @@
 }
 
 .pdf-highlight[data-current] {
-	outline: 2px solid var(--color-primary);
+	outline: 2px solid var(--color-primary-indicator);
 	outline-offset: 1px;
 }
 

package/lib/styles.css

@@ -55,6 +55,7 @@
 	--color-primary: var(--primary);
 	--color-primary-foreground: var(--primary-foreground);
 	--color-primary-text: var(--primary-text);
+	--color-primary-indicator: var(--primary-indicator);
 	/* Containers: a tint of the base colour over the surface, from the variant that
 	 * is lifted in dark (primary-text, error-text) so it shows there too. Accent, a
 	 * near-grey a tint would hide, is the colour itself. Text on one: `text-foreground`. */

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nxgt/material",
-	"version": "3.7.0",
+	"version": "3.7.2",
 	"license": "MIT",
 	"bugs": {
 		"email": "stevegires@gmail.com"