@nxgt/material 3.59.1 → 3.62.0

package/dist/pdf-reader.js

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

package/dist/print.js

@@ -1,5 +1,5 @@
-import { r as e } from "./i18n-provider-BJDI-A5w.js";
-import { t } from "./translate-material-Q67GD4co.js";
+import { r as e } from "./i18n-provider-BehR6cU7.js";
+import { t } from "./translate-material-tUaLZUmT.js";
 import { Children as n, createContext as r, isValidElement as i, useCallback as a, useContext as o, useEffect as s, useMemo as c, useState as l } from "react";
 import { jsx as u, jsxs as d } from "react/jsx-runtime";
 import { resolvePdfFileName as f } from "@nxgt/material-core/pdf-file-name";

package/dist/{public-DEh75enl.js → public-BYsrhyPW.js}

@@ -3,21 +3,21 @@ import { n as t } from "./ui.utils-CAnKTCw5.js";
 import { t as n } from "./utils-BLfntITJ.js";
 import { o as r } from "./dist-DVRQkaTK.js";
 import { c as i, i as a, l as o, n as s, o as c, s as l } from "./dist-lmHmz_bu.js";
-import { n as u, s as d } from "./spinner-CquTUxzt.js";
+import { n as u, s as d } from "./spinner-C5lObWXT.js";
 import { i as f } from "./dist-C4wtXCjf.js";
 import { r as p, t as m } from "./in-dialog-Vwkyp-M5.js";
-import { C as h, D as g, E as _, O as v, S as y, T as b, _ as x, f as S, g as ee, k as te, r as ne, t as C, u as re, w } from "./dialog-1BstKBvt.js";
-import { c as T, d as ie, f as E, i as ae, l as oe, n as se, o as D, t as ce, u as O } from "./dropdown-menu-hoaocAS7.js";
-import { S as le, a as k, d as A, g as ue, h as de, i as fe, m as pe, n as j, r as me, t as M, u as he, w as ge } from "./toolbar-items-Bm1baIp6.js";
-import { t as _e } from "./button-qb9UpHF5.js";
-import { t as N } from "./use-material-translation-BZAy_ffS.js";
-import { n as ve, t as ye } from "./icon-button-AwJtCkV5.js";
-import { i as be } from "./escape-owner-BvLBo_Al.js";
+import { C as h, D as g, E as _, O as v, S as y, T as b, _ as x, f as S, g as ee, k as te, r as ne, t as C, u as re, w } from "./dialog-yfPkLqUQ.js";
+import { c as T, d as ie, f as E, i as ae, l as oe, n as se, o as D, t as ce, u as O } from "./dropdown-menu-CiobN1wi.js";
+import { S as le, a as k, d as A, g as ue, h as de, i as fe, m as pe, n as j, r as me, t as M, u as he, w as ge } from "./toolbar-items-ByvXcMHm.js";
+import { t as _e } from "./button-7BuUCGRm.js";
+import { t as N } from "./use-material-translation-B5j3jZs7.js";
+import { n as ve, t as ye } from "./icon-button-DvP0Gy3j.js";
+import { i as be } from "./escape-owner-r57kuPjn.js";
 import { t as xe } from "./useEvent-2fKq-6w8.js";
 import { n as Se, t as Ce } from "./toggle-group-BkH23Jk4.js";
 import { n as we } from "./use-slice-reducer-BGkeGtML.js";
 import { r as Te } from "./use-csp-nonce-ZKs9k-ov.js";
-import { n as Ee, t as De } from "./empty-state-DEG9h7xk.js";
+import { n as Ee, t as De } from "./empty-state-DA517HAb.js";
 import { t as Oe } from "./client-only.utils-3nHNzCki.js";
 import { t as ke } from "./use-scroll-away-PQRFZkT2.js";
 import * as P from "react";

package/dist/{rich-code-block-hJexXOdk.js → rich-code-block-WJxDWPPY.js}

@@ -1,7 +1,7 @@
-import { r as e } from "./spinner-CquTUxzt.js";
-import { c as t, n, t as r } from "./dropdown-menu-hoaocAS7.js";
-import { t as i } from "./use-material-translation-BZAy_ffS.js";
-import { a, i as o, n as s, o as c, t as l } from "./code-language-items-Cqk4Fq61.js";
+import { r as e } from "./spinner-C5lObWXT.js";
+import { c as t, n, t as r } from "./dropdown-menu-CiobN1wi.js";
+import { t as i } from "./use-material-translation-B5j3jZs7.js";
+import { a, i as o, n as s, o as c, t as l } from "./code-language-items-rCPB0Xee.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 { Suspense as h, lazy as g, useEffect as _, useRef as v, useState as y } from "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 = g(() => import("./code-editor-BYEpBp_U.js").then((e) => e.n).then((e) => ({ default: e.CodeEditor })));
+var N = g(() => import("./code-editor-Ckc9TTCM.js").then((e) => e.n).then((e) => ({ default: e.CodeEditor })));
 function P() {
 	let { t: e } = i();
 	return /* @__PURE__ */ b("div", {

package/dist/{sortable-provider-DE-MSfeJ.js → sortable-provider-oPjlhlZo.js}

@@ -1,7 +1,7 @@
 import { t as e } from "./utils-BLfntITJ.js";
 import { t } from "./dist-DVRQkaTK.js";
-import { t as n } from "./use-material-translation-BZAy_ffS.js";
-import { t as r } from "./icon-button-AwJtCkV5.js";
+import { t as n } from "./use-material-translation-B5j3jZs7.js";
+import { t as r } from "./icon-button-DvP0Gy3j.js";
 import { t as i } from "./compose-refs-DZ0iIVF-.js";
 import a, { cloneElement as o, createContext as s, forwardRef as c, memo as l, useCallback as u, useContext as d, useEffect as f, useId as p, useLayoutEffect as m, useMemo as h, useReducer as g, useRef as _, useState as v } from "react";
 import { jsx as y } from "react/jsx-runtime";

package/dist/{spinner-CquTUxzt.js → spinner-C5lObWXT.js}

@@ -3,7 +3,7 @@ import { n as t, t as n } from "./utils-BLfntITJ.js";
 import { i as r, o as i } from "./dist-DVRQkaTK.js";
 import { a, c as o, i as s, l as c, n as l, o as u, r as d, s as f, t as p, u as m } from "./dist-lmHmz_bu.js";
 import { a as h, c as g, d as _, i as v, l as y, o as b, r as x, t as S, u as C } from "./floating-ui.dom-KkZSW8_E.js";
-import { t as w } from "./use-material-translation-BZAy_ffS.js";
+import { t as w } from "./use-material-translation-B5j3jZs7.js";
 import * as T from "react";
 import { useLayoutEffect as E, useRef as D, useSyncExternalStore as O } from "react";
 import { jsx as k, jsxs as A } from "react/jsx-runtime";

package/dist/{stored-language-BDzGeEAm.js → stored-language-B-tiWZU2.js}

@@ -1298,7 +1298,7 @@ var t = {
 		"load-more": {
 			shown: "Showing {shown} of {total}",
 			"shown-count": "{shown, plural, one {# shown} other {# shown}}",
-			failed: "The next items could not be loaded",
+			failed: "The next page could not be loaded",
 			retry: "Try again",
 			"page-failed-title": "This page could not be loaded",
 			"back-to-start": "Back to the start"
@@ -4181,7 +4181,7 @@ var t = {
 		"load-more": {
 			shown: "Affichage de {shown} sur {total}",
 			"shown-count": "{shown, plural, one {# affiché} other {# affichés}}",
-			failed: "La suite n’a pas pu être chargée",
+			failed: "La page suivante n’a pas pu être chargée",
 			retry: "Réessayer",
 			"page-failed-title": "Cette page n’a pas pu être chargée",
 			"back-to-start": "Retour au début"

package/dist/theme-picker.js

@@ -1,10 +1,10 @@
 import { t as e } from "./utils-BLfntITJ.js";
 import { a as t, i as n, n as r, o as i, r as a, t as o } from "./bubble-input-B7BVd9fX.js";
 import { a as s, r as c } from "./icon-sprites-CaYXzOL4.js";
-import { t as l } from "./use-material-translation-BZAy_ffS.js";
+import { t as l } from "./use-material-translation-B5j3jZs7.js";
 import { t as u } from "./use-theme-BCLireTd.js";
 import { a as d, r as f } from "./theme-context-Cofk6vgs.js";
-import { t as p } from "./theme-toggle-DBgsBw8S.js";
+import { t as p } from "./theme-toggle-CPEq5JG-.js";
 import { n as m, t as h } from "./nxgt-theme-DA1IQe0O.js";
 import { useContext as g } from "react";
 import { jsx as _, jsxs as v } from "react/jsx-runtime";

package/dist/{theme-toggle-DBgsBw8S.js → theme-toggle-CPEq5JG-.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./use-material-translation-BZAy_ffS.js";
+import { t as e } from "./use-material-translation-B5j3jZs7.js";
 import { i as t } from "./theme-store-BdPp43cV.js";
 import { n, t as r } from "./use-theme-BCLireTd.js";
 import { r as i } from "./theme-context-Cofk6vgs.js";

package/dist/{toolbar-items-Bm1baIp6.js → toolbar-items-ByvXcMHm.js}

@@ -1,14 +1,14 @@
 import { t as e } from "./utils-BLfntITJ.js";
 import { o as t, r as n, t as r } from "./dist-DVRQkaTK.js";
 import { a as i, c as a, i as o, l as s, r as c, s as l } from "./dist-lmHmz_bu.js";
-import { C as u, S as d, d as f, f as p, m, p as h, r as g, u as _ } from "./spinner-CquTUxzt.js";
+import { C as u, S as d, d as f, f as p, m, p as h, r as g, u as _ } from "./spinner-C5lObWXT.js";
 import { i as v, n as y, r as b, t as x } from "./dist-C4wtXCjf.js";
 import { a as S, c as C, l as w, o as T, r as ee, s as te, t as ne } from "./in-dialog-Vwkyp-M5.js";
-import { A as re, M as ie, N as ae, b as oe, d as se, f as ce, i as le, j as ue, l as de, n as fe, o as pe, r as me, t as he, u as ge, y as _e } from "./dropdown-menu-hoaocAS7.js";
+import { A as re, M as ie, N as ae, b as oe, d as se, f as ce, i as le, j as ue, l as de, n as fe, o as pe, r as me, t as he, u as ge, y as _e } from "./dropdown-menu-CiobN1wi.js";
 import { a as ve, n as ye, r as be, t as xe } from "./dist-B7RjY7SL.js";
 import { t as Se } from "./warn-once-C_e47JM8.js";
-import { t as Ce } from "./use-material-translation-BZAy_ffS.js";
-import { i as we } from "./escape-owner-BvLBo_Al.js";
+import { t as Ce } from "./use-material-translation-B5j3jZs7.js";
+import { i as we } from "./escape-owner-r57kuPjn.js";
 import * as E from "react";
 import { createContext as D, useCallback as Te, useContext as O, useEffect as k, useId as Ee, useLayoutEffect as A, useMemo as j, useReducer as De, useRef as M, useState as N } from "react";
 import { Fragment as P, jsx as F, jsxs as I } from "react/jsx-runtime";

package/dist/{translate-material-Q67GD4co.js → translate-material-tUaLZUmT.js}

@@ -1,5 +1,5 @@
-import "./stored-language-BDzGeEAm.js";
-import { a as e, r as t, t as n } from "./translator-CBhGdYun.js";
+import "./stored-language-B-tiWZU2.js";
+import { a as e, r as t, t as n } from "./translator-B9XjUDRu.js";
 //#region lib/i18n/translate-material.ts
 var r = /* @__PURE__ */ new WeakMap();
 function i(e) {

package/dist/{translator-CBhGdYun.js → translator-B9XjUDRu.js}

@@ -1,5 +1,5 @@
 import { t as e } from "./is-production-GLw59WU8.js";
-import { a as t, i as n, r, t as i } from "./stored-language-BDzGeEAm.js";
+import { a as t, i as n, r, t as i } from "./stored-language-B-tiWZU2.js";
 import { t as a } from "./get-CTzJAwfc.js";
 //#region ../../node_modules/@formatjs/fast-memoize/index.js
 function o(e, t) {

package/dist/{use-chat-composer-BlfhGDFp.js → use-chat-composer-CzOVaIed.js}

@@ -4,40 +4,40 @@ import { t as n } from "./utils-BLfntITJ.js";
 import { n as r } from "./use-shape-morph-BKA_R5P5.js";
 import { n as i, o as a, t as o } from "./dist-DVRQkaTK.js";
 import { a as s, c, i as l, l as u, n as d, o as f, r as p, s as m, t as h } from "./dist-lmHmz_bu.js";
-import { _ as g, a as _, b as v, c as y, g as b, h as x, i as S, n as C, o as w, r as T, s as E, t as D, v as O, x as k, y as A } from "./spinner-CquTUxzt.js";
+import { _ as g, a as _, b as v, c as y, g as b, h as x, i as S, n as C, o as w, r as T, s as E, t as D, v as O, x as k, y as A } from "./spinner-C5lObWXT.js";
 import { a as ee, i as j, n as te, r as M, t as ne } from "./dist-C4wtXCjf.js";
 import { i as re, n as N, t as ie } from "./in-dialog-Vwkyp-M5.js";
-import { A as ae, C as P, D as oe, E as se, O as ce, S as F, T as le, _ as ue, b as de, f as fe, g as pe, k as me, l as he, m as ge, n as _e, o as ve, r as ye, s as be, t as xe, u as Se, v as Ce, w as we, x as Te, y as Ee } from "./dialog-1BstKBvt.js";
+import { A as ae, C as P, D as oe, E as se, O as ce, S as F, T as le, _ as ue, b as de, f as fe, g as pe, k as me, l as he, m as ge, n as _e, o as ve, r as ye, s as be, t as xe, u as Se, v as Ce, w as we, x as Te, y as Ee } from "./dialog-yfPkLqUQ.js";
 import { A as De, C as Oe, D as ke, E as Ae, O as je, S as Me, T as Ne, _ as Pe, a as Fe, b as Ie, d as Le, f as Re, g as ze, h as Be, i as Ve, k as He, l as Ue, m as We, n as Ge, o as Ke, p as qe, r as Je, s as Ye, t as Xe, u as Ze, v as Qe, w as $e, x as et, y as tt } from "./floating-ui.dom-KkZSW8_E.js";
-import { D as nt, E as rt, N as it, O as at, c as ot, d as I, f as st, i as ct, k as lt, m as ut, n as dt, o as ft, p as pt, t as mt, u as ht } from "./dropdown-menu-hoaocAS7.js";
-import { a as gt, i as _t, n as vt } from "./field-blur-context-Ba7iZVm_.js";
-import { C as yt, S as bt, a as xt, c as St, d as Ct, l as wt, n as Tt, o as Et, s as Dt, u as Ot } from "./toolbar-items-Bm1baIp6.js";
+import { D as nt, E as rt, N as it, O as at, c as ot, d as I, f as st, i as ct, k as lt, m as ut, n as dt, o as ft, p as pt, t as mt, u as ht } from "./dropdown-menu-CiobN1wi.js";
+import { a as gt, i as _t, n as vt } from "./field-blur-context-DbJQZkEB.js";
+import { C as yt, S as bt, a as xt, c as St, d as Ct, l as wt, n as Tt, o as Et, s as Dt, u as Ot } from "./toolbar-items-ByvXcMHm.js";
 import { a as kt, i as At, n as jt, o as Mt, t as Nt } from "./bubble-input-B7BVd9fX.js";
 import { i as Pt } from "./dist-B7RjY7SL.js";
 import { o as Ft, s as It, t as Lt } from "./use-click-lock-BZYtTmVt.js";
 import { a as Rt, r as zt } from "./icon-sprites-CaYXzOL4.js";
 import { t as Bt } from "./warn-once-C_e47JM8.js";
-import { r as Vt, t as Ht } from "./button-qb9UpHF5.js";
-import "./stored-language-BDzGeEAm.js";
-import { a as Ut } from "./translator-CBhGdYun.js";
+import { r as Vt, t as Ht } from "./button-7BuUCGRm.js";
+import "./stored-language-B-tiWZU2.js";
+import { a as Ut } from "./translator-B9XjUDRu.js";
 import { h as Wt } from "./get-CTzJAwfc.js";
 import { t as Gt } from "./isEmpty-F_g3jLf8.js";
-import { t as L } from "./use-material-translation-BZAy_ffS.js";
-import { t as R } from "./icon-button-AwJtCkV5.js";
+import { t as L } from "./use-material-translation-B5j3jZs7.js";
+import { t as R } from "./icon-button-DvP0Gy3j.js";
 import { t as Kt } from "./use-ssr-media-query-C6M5m8sf.js";
-import { a as qt, i as Jt, o as Yt } from "./escape-owner-BvLBo_Al.js";
+import { a as qt, i as Jt, o as Yt } from "./escape-owner-r57kuPjn.js";
 import { n as Xt, t as Zt } from "./util-4heV2LPI.js";
 import { t as Qt } from "./useEvent-2fKq-6w8.js";
-import { f as $t } from "./field-blur-BkeYPaWi.js";
+import { f as $t } from "./field-blur-DdvY0NQQ.js";
 import { c as en, i as tn, l as nn, o as rn, r as an, s as on, t as sn } from "./dist-C3GR7kJd.js";
 import { i as cn } from "./toggle-group-BkH23Jk4.js";
 import { n as ln } from "./use-slice-reducer-BGkeGtML.js";
 import { t as un } from "./browser-only-DQ94lWF8.js";
 import { t as dn } from "./compose-refs-DZ0iIVF-.js";
-import { n as fn, r as pn, t as mn } from "./chip-BlmIjpiD.js";
-import { n as hn, t as gn } from "./icon-badge-9ZE6k7cn.js";
+import { n as fn, r as pn, t as mn } from "./chip-kQOrHlDX.js";
+import { n as hn, t as gn } from "./icon-badge-C646JTOI.js";
 import { r as _n } from "./use-csp-nonce-ZKs9k-ov.js";
-import { t as vn } from "./empty-state-DEG9h7xk.js";
+import { t as vn } from "./empty-state-DA517HAb.js";
 import { t as yn } from "./skeleton-DSdtr2qc.js";
 import { H as bn, V as xn, X as Sn, bt as Cn, it as wn, lt as Tn, n as En, t as Dn, xt as On, yt as kn } from "./dist-moutbfbd.js";
 import { t as An } from "./markdown-Dw_uH7j7.js";
@@ -11424,7 +11424,7 @@ var dC = (e = {}) => jn({
 		let [{ default: t }, { lowlight: n }, { richCodeBlock: r }] = await Promise.all([
 			import("./dist-CRMFGjng.js"),
 			import("./lowlight-OtcjU2Sa.js"),
-			import("./rich-code-block-hJexXOdk.js")
+			import("./rich-code-block-WJxDWPPY.js")
 		]);
 		return [r(t, {
 			lowlight: n,

package/dist/{use-heading-spy-COxCWqWF.js → use-heading-spy-BOtygPFu.js}

@@ -1,4 +1,4 @@
-import { r as e } from "./i18n-provider-BJDI-A5w.js";
+import { r as e } from "./i18n-provider-BehR6cU7.js";
 import { _ as t, g as n, h as r, n as i, v as a, y as o } from "./number.utils-BG_eEt5g.js";
 import { useCallback as s, useEffect as c, useMemo as l, useRef as u, useState as d } from "react";
 import { busySettler as f, busySettler as p, createSubmitGuard as m, createSubmitGuard as h } from "@nxgt/material-core/submit-guard";

package/dist/{use-material-translation-BZAy_ffS.js → use-material-translation-B5j3jZs7.js}

@@ -1,5 +1,5 @@
-import { r as e } from "./i18n-provider-BJDI-A5w.js";
-import { t } from "./translate-material-Q67GD4co.js";
+import { r as e } from "./i18n-provider-BehR6cU7.js";
+import { t } from "./translate-material-tUaLZUmT.js";
 import { useCallback as n } from "react";
 //#region lib/i18n/use-material-translation.ts
 function r() {

package/docs/components/buttons-and-actions.md

@@ -997,6 +997,7 @@ import { LoadMoreFooter } from '@nxgt/material/components';
 | `hasMore` | `boolean` | — | `false` renders nothing, not even the count |
 | `loading` | `boolean` | `false` | the button (or the retry) spins and ignores clicks |
 | `failed` | `boolean` | `false` | an error alert with a tonal "Try again" replaces the button |
+| `showCount` | `boolean` | `true` | `false` hides the "Showing N of M" line (keep it for a list whose header already announces the count in its own `role="status"`); the button and the failed alert stay |
 | `label` | `string` | `"Load more"` (translated) | the load button's text; the button is expanded here |
 | `onLoad` | `() => void` | — | loads the next page; the retry calls it too |
 

package/docs/components/data-display.md

@@ -967,6 +967,7 @@ A tile with an `href` ends with a discreet chevron after `trailing`: decorative
 | `actions` | `ReactNode` | — | buttons at the end of the tile, outside the link, vertically centred (`data-slot="item-actions"`) |
 | `chips` | `ReactNode` | — | tags after the text, in the compact record row (see below); inside the link, so decoration only; part of the row's accessible name, keep labels short |
 | `variant` | `'tonal' \| 'divided'` | `'tonal'` | `divided`: flat rows with no tonal surface, a hover tint and the record-row layout; the hairline comes with `as="li"` |
+| `inset` | `boolean` | `false` | With `variant="divided"`: 16px of inline padding (M3's list-item inset) in place of 4px, for a list inside a `Card`; the hairlines on the `<li>` still run edge to edge. Ignored by `tonal` |
 | `as` | `'li'` | — | renders the tile inside a `<li>`, for a `<ul>` you own |
 | `disabled` | `boolean` | — | disables the link or button, and the `actions` with it |
 

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

@@ -91,7 +91,7 @@ phone's menu sheet pad clear of `env(safe-area-inset-*)`, as classes; see the
 | `asideSide` / `asideWidth` / `asideFrom` / `asideSticky` / `asideStack` | `'start' \| 'end'` / `'sm' \| 'md' \| 'lg' \| string` / `'lg' \| 'xl' \| '2xl'` / `boolean` / `'before' \| 'after'` | `'end'` / `'md'` / `'xl'` / `true` / `'after'` | `ActivityContent`: the panel's side, width (16, 20, 24rem), breakpoint, stickiness and stacking order (see the [app shell guide](../guides/app-shell.md#a-side-panel-and-a-readable-width)) |
 | `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 \| false` | — | `ActivityLayout`: an exception to the theme's background (drawn by default; Lavande's is the built-in gradient and blobs); `false` draws a plain page. A node is a decorative background behind the frame: a `Background` preset from `@nxgt/material/backgrounds`. Rendered in an `inert`, `aria-hidden` layer as wide as the content column and one viewport high, fixed in the viewport while the content scrolls; the chrome (app bar, breadcrumb, tabs strip) is lightly translucent and frosted over it (80%, 87% for the sidebar, breadcrumb and tabs strip, 92% and no blur under `prefers-reduced-transparency` or without `backdrop-filter`), and the lists, tables and cards stay opaque; `--nxgt-backdrop-chrome` sets the chrome's fill and `--nxgt-backdrop-surface` the lists'. 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) |
+| `routeTransition` | `boolean \| Omit<ViewTransitionProps, 'children' \| 'ref'>` | `true` | `ActivityLayout`: React's `<ViewTransition>` around the content region, so a navigation cross-fades it (by default only when the pathname changes, not on a search change, a fetcher or a revalidation). `false` renders none (your app has its own boundary); an object passes `default` / `update` classes, `name`, callbacks through. `ROUTE_TRANSITION_CLASS` (`'nxgt-route'`) is exported for nested boundaries. See [Route transitions](../guides/app-shell.md#route-transitions) |
 
 The active entry is the longest match across the whole menu, segment-aware.
 `AppBreadcrumb` reads `handle.breadcrumb` from `useMatches()`, so the shell

package/docs/guides/app-shell.md

@@ -768,6 +768,23 @@ pass `viewTransition` or wrap a navigation in `flushSync`.
 </ActivityLayout>
 ```
 
+By default the region fades only when the **pathname** changes. React Router
+runs a `?tab=` change, a list search, a fetcher submit and a revalidation as
+untyped transitions too; they update the page without fading it (and typing in
+a search field is not interrupted). An explicit value is used as is, with no
+gate. To fade on every transition, as before, give the class yourself:
+`routeTransition={{ default: 'nxgt-route' }}`. An app that gated the update on
+the pathname with a ref (`update: pathnameChanged ? 'nxgt-route' : 'none'`) can
+drop it. A nested `<ViewTransition>` takes the same timing from the exported
+`ROUTE_TRANSITION_CLASS` (`'nxgt-route'`):
+
+```tsx
+import { ViewTransition } from 'react';
+import { ROUTE_TRANSITION_CLASS } from '@nxgt/material/components';
+
+<ViewTransition default={ROUTE_TRANSITION_CLASS}>{tabs}</ViewTransition>
+```
+
 Tune it with an object, the props of React's `<ViewTransition>` (`default`,
 `update`, `name`, `onEnter`…), or turn it off:
 

package/docs/guides/code-editor.md

@@ -141,6 +141,14 @@ JSON, TypeScript/JavaScript, HTML and CSS each need their own worker (the
 generic one throws "Missing requestHandler" for theirs); a worker you leave
 out only matters if an editor uses that language.
 
+`configureMonaco` also gives the `<style>` elements Monaco injects (the
+editor, context menus, widgets) the page's CSP nonce (`getCspNonce()`, read when
+the element is created), so a `style-src-elem 'nonce-…'` policy accepts them
+and you need no `document.createElement` patch of your own. It changes nothing
+when the page has no nonce; see the [CSP guide](csp.md). Bundling the workers
+as above keeps `worker-src 'self'` enough (Vite's `?worker` emits them as
+files); the CDN default needs `worker-src blob:`.
+
 `monaco-editor` (0.56 and later: the paths above) is then a dependency of
 your app; this library's own stories run Monaco this way. Or serve Monaco's files from
 your origin: copy its `min/vs` folder to your public files and call

package/docs/guides/csp.md

@@ -57,6 +57,10 @@ configureMonaco({ paths: { vs: '/monaco/vs' } });
 Or bundle Monaco with your app and pass the instance:
 [code editor guide](code-editor.md#self-hosting-monaco).
 
+`configureMonaco` also puts the page nonce on the `<style>` elements Monaco
+creates, so `style-src-elem 'self' 'nonce-…'` is enough for the editor's own
+styles. Bundle its workers as the guide shows to keep `worker-src 'self'`.
+
 ### Packages the app imports itself
 
 `zod` and `@monaco-editor/react` are dependencies of the library, and

package/docs/guides/helpers.md

@@ -139,6 +139,7 @@ Vue: the Redux helpers are Pinia store factories: `defineLocalStore`
 | `useScrollAway(ref?, { threshold? })` | True while the reader scrolls down (by `threshold`, 24 px, since the scroll last turned); false scrolling up, at the top or at the end. Folds an extended `Fab`. Without `ref`, the window; false on the server. See [Fab](../components/buttons-and-actions.md#fab). |
 | `useCountdown(duration, { paused?, onExpire?, key? })` | Seconds left of `duration` (the clock `CountdownTimer` draws), for a button or a message that waits: ticks on the client only, `duration` on the server and first render. A new `duration` **or a new `key`** starts over, so the same `retryAfter` twice restarts it. See [below](#usecountdown). |
 | `useSubmitOnce(busy?)` | One submit in flight: wraps a submit handler so a double click or a second Enter is dropped until the request ends (the handler's promise, or `busy` back to false). See [below](#usesubmitonce). |
+| `useDrafts<T>(storageKey, { serialize?, parse?, storage? })`, `clearDrafts(storageKey, storage?)` | Unsent values kept by key in `sessionStorage`: `{ get, set, drop, clear, keys, loaded }`. Read after the first render (no hydration mismatch), storage errors swallowed, `drop(key)` once saved; `clearDrafts` empties a store key without a hook (sign-out). See [below](#usedrafts). |
 | `createSubmitGuard()`, `busySettler(guard)` | The framework-free guard behind `useSubmitOnce` (`@nxgt/material-core/submit-guard`): `{ once(run, { settleSync? }), settle(run?), pendingRun() }`, and the function that settles it from a busy flag. |
 
 ```tsx
@@ -293,6 +294,62 @@ Outside React, `createSubmitGuard()` from `@nxgt/material-core/submit-guard`
 `busySettler(guard)` returns the function to call with each value of a busy
 flag. Storybook: `Guides/Hooks/useSubmitOnce`.
 
+### `useDrafts`
+
+Long answers are lost when the reader jumps to another step or reloads. The
+hook keeps unsent values by key in the tab's `sessionStorage`; `storageKey`
+names the store (one per form) and each field has its own key inside it.
+
+```tsx
+import { Textarea } from '@nxgt/material/components';
+import { useDrafts } from '@nxgt/material/hooks';
+
+export function Answer({ save }: { save: (text: string) => Promise<void> }) {
+  const drafts = useDrafts<string>('quiz-1');
+  return (
+    <form
+      onSubmit={async (event) => {
+        event.preventDefault();
+        await save(drafts.get('q3') ?? '');
+        drafts.drop('q3'); // saved: the draft goes
+      }}
+    >
+      <Textarea
+        value={drafts.get('q3') ?? ''}
+        onChange={(event) => drafts.set('q3', event.target.value)}
+      />
+      <p>{drafts.keys.length} unsaved</p>
+    </form>
+  );
+}
+```
+
+- **SSR-safe.** The first render, on the server and on the client, has no
+  drafts; they are read in an effect and `loaded` turns true.
+- **Storage errors are swallowed.** A private window, a blocked or full
+  store, or a damaged entry reads and writes as no draft.
+- **Written at once.** `set`, `drop` and `clear` write the store in the call,
+  so a `drop` or `clear` before `loaded` wins over the stored copy. When no
+  draft is left the store key is removed. `keys` lists the unsaved ones.
+- **Values that are not strings.** The default serialiser is JSON; pass
+  `serialize` and `parse` (throw or return `undefined` to ignore an entry).
+- **Another store.** `storage` takes a getter, preferred because nothing
+  touches `window` during render: `useDrafts('quiz-1', { storage: () => localStorage })`.
+  A store object is accepted too.
+- **A new `storageKey`** starts from that key's drafts (`loaded` false until
+  they are read); the old key's drafts stay in the store under the old key.
+- **Two instances on one key** read at mount and merge on write; they do not
+  update each other live. Share one instance (props or context) when both
+  must follow.
+- **Sign-out.** `clearDrafts('quiz-1')` (same optional `storage`) empties the
+  store key without a mounted hook; call it where the session ends.
+- **Why not `react-use`'s `useSessionStorage`?** It holds one value per hook
+  call, reads storage during the first render (a hydration mismatch) and
+  throws when storage is blocked. `useDrafts` holds many keys in one store key,
+  renders the same on server and client, and never throws.
+
+Storybook: `Guides/Hooks/useDrafts` (remount restores, `drop`, key change).
+
 ## `@nxgt/material/i18n`
 
 | Export | What it does |

package/docs/guides/icon-motifs.md

@@ -138,7 +138,7 @@ An `Illustration` draws a hero icon on a Material 3 Expressive plate, with two
 to four satellites. There are twelve base scenes (`empty`, `no-results`,
 `not-found`, `error`, `offline`, `success`, `welcome`, `forbidden`,
 `maintenance`, `invitation`, `sign-in`, `empty-inbox`) and two domain sets of
-ten, **health** and **education**, each its own subpath so an app that does not
+ten, **health** and **education**, plus **game** (eleven scenes for games and events), each its own subpath so an app that does not
 import one does not carry it:
 
 <img src="../previews/feedback-status-illustration.webp" width="480" alt="The twelve base illustration scenes">
@@ -147,6 +147,8 @@ import one does not carry it:
 
 <img src="../previews/feedback-status-illustration-education.webp" width="480" alt="The ten education scenes">
 
+<img src="../previews/feedback-status-illustration-game.webp" width="480" alt="The eleven game scenes">
+
 - `IllustrationDefaults` is opt-in: without it (and without a `hero`) an
   `EmptyState` or `ErrorState` draws the same built-in art as before. An
   `illustration` prop wins over it, `illustration={false}` hides the media, and

package/docs/guides/illustrations.md

@@ -5,7 +5,7 @@ on a Material 3 Expressive plate, two to four satellite icons around it, a
 dashed ring and a few sparkles. There are twelve scenes: `empty`, `no-results`,
 `not-found`, `error`, `offline`, `success`, `welcome`, `forbidden`,
 `maintenance`, `invitation`, `sign-in` and `empty-inbox`, and two domain sets of
-ten more each, health and education, in their own entries ([health](#scene-sets-the-health-scenes) and [education](#scene-sets-the-education-scenes)). The icons are
+ten more each, health and education, in their own entries ([health](#scene-sets-the-health-scenes) and [education](#scene-sets-the-education-scenes)), and eleven for games ([game](#scene-sets-the-game-scenes)). The icons are
 [Font Awesome](https://fontawesome.com) sprites **your app serves** (see
 [Icons](../getting-started.md#icons)): the package ships no icon artwork, so it
 works with the sprites your licence covers. The [icon motifs guide](icon-motifs.md) shows them next to the icon backgrounds, the sky and the themes, and lists the suggested names that are Pro only, with Free neighbours.
@@ -146,6 +146,38 @@ the icon names the set draws, hero first. Some of them (`backpack`,
 `clipboard-list-check`, `books`, `file-chart-column`) are Font Awesome Pro
 icons: serve a Pro sprite, or set `edition="free"` on `IconSpritesProvider`, which draws their Free twins (see the [Free edition](icon-motifs.md#the-free-edition)).
 
+## Scene sets: the game scenes
+
+`@nxgt/material/illustrations/game` holds eleven scenes for a game, a quiz, a
+community or an event app: `night-sky`, `village`, five character pictograms
+(`seer`, `healer`, `archer`, `cupid`, `wolf`), `victory`, `empty-table`,
+`waiting-players` and `connection-lost`. It works exactly like the other sets,
+and they register side by side. Use them where a screen is empty, waiting,
+failed, celebrating or opening: a lobby with no players, a round that waits, a
+dropped connection, a winner, a night-phase hero. Keep them away from behind
+data.
+
+<img src="../previews/feedback-status-illustration-game.webp" width="480" alt="The eleven game scenes">
+
+```tsx
+import { Illustration, IllustrationDefaults } from '@nxgt/material/illustrations';
+import { GAME_SCENES } from '@nxgt/material/illustrations/game';
+import { EmptyState } from '@nxgt/material/components';
+
+<IllustrationDefaults sets={[GAME_SCENES]}>
+  <Illustration scene="night-sky" />                {/* decorative: aria-hidden */}
+  <Illustration scene="victory" title="Victory" />  {/* role="img" + aria-label */}
+  <EmptyState illustration="empty-table" title="No one at the table" />
+</IllustrationDefaults>
+```
+
+Colours come from the theme's tone tokens (light and dark follow the theme),
+motion stops under `prefers-reduced-motion`, and a scene is 120, 190 or 280 px
+wide (`size`), never wider than its container. The `night-sky` scene is
+unrelated to the `night-sky` Background preset. Every icon is in the Free sheet, so `edition="free"`
+needs no substitution; `GAME_SUGGESTED_ICONS` lists the names, hero first.
+Importing the entry adds the ids to `SceneId`.
+
 ## Turn them on for an app
 
 `IllustrationDefaults` opts a subtree in: every default-size `EmptyState` and

package/docs/guides/migrating-to-3.md

@@ -59,7 +59,8 @@ component`). As a peer there is one copy, your app's.
 ## ActivityLayout animates route changes (`routeTransition`)
 
 3.0 wraps the content region of `ActivityLayout` in React's `<ViewTransition>`,
-on by default: a navigation cross-fades the page, the sidebar, header and
+on by default: a navigation cross-fades the page (only when the pathname
+changes; see [Route transitions](./app-shell.md#route-transitions)), the sidebar, header and
 breadcrumb staying still. Back and Forward may not animate (React skips view
 transitions for synchronous popstate updates).
 
@@ -92,7 +93,8 @@ shell's off with `routeTransition={false}`, or remove yours:
 ```
 
 The prop is `routeTransition?: boolean | Omit<ViewTransitionProps, 'children' | 'ref'>`,
-default `true`. An object turns it on and passes its props through, so the app
+default `true` (it fades only when the pathname changes; see
+[Route transitions](./app-shell.md#route-transitions)). An object turns it on and passes its props through, so the app
 can pick its own classes: `routeTransition={{ default: 'my-route' }}`.
 
 **Nested boundaries.** An inner `<ViewTransition>` takes the mutation from the

package/docs/roadmap.md

@@ -250,7 +250,7 @@ version they shipped in, and planned entries may name the major they target.
   (`name` for a key, `range` for a value), as it does for the icon keys.
 
 - **More illustration sets** — finance, travel and tech scenes beside the
-  health and education sets, each in its own subpath.
+  health, education and game sets, each in its own subpath.
 - **More generic scenes** — further base scenes for `Illustration` beyond the
   twelve it draws today (`forbidden`, `maintenance`, `invitation`, `sign-in`
   and `empty-inbox` are among them), added on demand.

package/docs/troubleshooting.md

@@ -2724,10 +2724,12 @@ See [Route transitions](./guides/app-shell.md#route-transitions).
 **When:** after upgrading to `@nxgt/material` 3.0, a filter, a tab switch, a
 `useDeferredValue` update or a lazy part loading inside `ActivityLayout`'s
 content fades the whole page, as a navigation does.
-**Why:** the shell's `<ViewTransition>` animates every transition that changes
-its content region, not only navigations: your `startTransition`,
-`useDeferredValue` and Suspense reveals too. The Gallery's morph is the one
-exception the shell makes itself.
+**Why:** the default fades the region only when the pathname changes, so a
+filter or a `?tab=` change does not fade it. Two cases still do: an explicit
+`routeTransition={{ default: 'nxgt-route' }}`, which animates every transition
+that changes the region (your `startTransition`, `useDeferredValue`, Suspense
+reveals), and a Suspense reveal or a transition that changes the pathname on the
+default. The Gallery's morph is the one exception the shell makes itself.
 **Fix:** give your transition a type and map that type to `'none'`:
 
 ```tsx
@@ -7801,14 +7803,15 @@ z.config({ jitless: true });
 ### `Illustration: … Drawing the built-in art instead.`
 
 **When:** a development-only `console.warn`, once per message, from an `Illustration` (or an `EmptyState` / `ErrorState` with `illustration`) that cannot be built. The page does not break: the built-in art of the scene's kind is drawn, and production builds do it silently.
-**Why:** the scene id is in no table (`"patient-record" is not a scene of the table`), an icon name is not valid, or the style is not one Font Awesome 7.3.1 draws. A domain id such as `patient-record` (health) or `classroom` (education) is only a scene when its set is registered; in an `EmptyState`, `illustration="no-patients"` or `"no-students"` is otherwise drawn as text.
+**Why:** the scene id is in no table (`"patient-record" is not a scene of the table`), an icon name is not valid, or the style is not one Font Awesome 7.3.1 draws. A domain id such as `patient-record` (health) `classroom` (education) or `village` (game) is only a scene when its set is registered; in an `EmptyState`, `illustration="no-patients"`, `"no-students"` or `"empty-table"` is otherwise drawn as text.
 **Fix:** register the set once for the subtree, or pass it to the one `Illustration`; and take `iconStyle` from the 37 sprite file names (a bad name is a type error):
 
 ```tsx
 import { EDUCATION_SCENES } from '@nxgt/material/illustrations/education';
+import { GAME_SCENES } from '@nxgt/material/illustrations/game';
 import { HEALTH_SCENES } from '@nxgt/material/illustrations/health';
 
-<IllustrationDefaults sets={[HEALTH_SCENES, EDUCATION_SCENES]}>
+<IllustrationDefaults sets={[HEALTH_SCENES, EDUCATION_SCENES, GAME_SCENES]}>
   <EmptyState illustration="no-patients" />
 </IllustrationDefaults>;
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nxgt/material",
-	"version": "3.59.1",
+	"version": "3.62.0",
 	"license": "MIT",
 	"bugs": {
 		"email": "stevegires@gmail.com"
@@ -105,6 +105,11 @@
 			"types": "./dist/lib/illustrations-education/index.d.ts",
 			"require": "./dist/illustrations-education.js"
 		},
+		"./illustrations/game": {
+			"import": "./dist/illustrations-game.js",
+			"types": "./dist/lib/illustrations-game/index.d.ts",
+			"require": "./dist/illustrations-game.js"
+		},
 		"./themes": {
 			"import": "./dist/themes.js",
 			"types": "./dist/lib/themes/index.d.ts",
@@ -367,7 +372,7 @@
 		"docs:previews": "rm -rf node_modules/.cache/nxgt-preview-free/missing && NXGT_PREVIEW_FREE=1 vitest run --project previews && bun .storybook/preview-free-report.ts"
 	},
 	"dependencies": {
-		"@nxgt/material-core": "^0.43.0",
+		"@nxgt/material-core": "^0.44.0",
 		"@base-ui/react": "^1.6.0",
 		"@dnd-kit/core": "^6.3.1",
 		"@dnd-kit/sortable": "^10.0.0",