@nxgt/material 3.18.0 → 3.20.0

package/dist/pdf-reader.js

@@ -1,3 +1,3 @@
-import { t as e } from "./public-BLw13izR.js";
+import { t as e } from "./public-DWuBn4t_.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-3TsMIGn1.js";
-import { t } from "./translate-material-X1daoGxE.js";
+import { r as e } from "./i18n-provider-BpZOKh7U.js";
+import { t } from "./translate-material-CCyVEi_f.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-BLw13izR.js → public-DWuBn4t_.js}

@@ -6,18 +6,18 @@ import { c as i, i as a, l as o, n as s, o as c, s as l } from "./dist-lmHmz_bu.
 import { a as u, o as d } from "./tooltip-CkttDIab.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-jYcWDh9G.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-BEZhNnhr.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-CrATPuOX.js";
-import { t as N } from "./use-material-translation-tD9XqIBm.js";
-import { t as _e } from "./button-Ck1Bif-Q.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-B2GXKBp3.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-mTDyFwbQ.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-Tn3MMu-s.js";
+import { t as N } from "./use-material-translation-BFQODuQz.js";
+import { t as _e } from "./button-rdIhY2BT.js";
 import { n as ve, t as ye } from "./icon-button-ifTpXt0A.js";
 import { t as be } from "./useEvent-2fKq-6w8.js";
 import { n as xe, t as Se } from "./toggle-group-BMJNcFAC.js";
 import { o as Ce } from "./escape-owner-C4W_sOAU.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-BBUsR0_X.js";
+import { n as Ee, t as De } from "./empty-state-CJh9f2pc.js";
 import { t as Oe } from "./client-only.utils-3nHNzCki.js";
 import { t as ke } from "./use-scroll-away-PQRFZkT2.js";
 import { ArrowLeft as Ae, BookOpenText as je, ChevronDown as Me, ChevronLeft as Ne, ChevronRight as Pe, ChevronUp as Fe, Download as Ie, Eraser as Le, FileText as Re, FileWarning as ze, FileX2 as Be, Highlighter as Ve, KeyRound as He, LayoutGrid as Ue, List as We, Loader2 as Ge, Maximize as Ke, MessageSquareText as qe, Minimize as Je, MoreVertical as Ye, MousePointer2 as Xe, MoveHorizontal as Ze, PanelLeft as Qe, Pen as $e, PencilLine as et, Printer as tt, RotateCw as nt, Search as rt, StickyNote as it, Type as at, Underline as ot, Undo2 as st, Volume2 as ct, X as lt, XIcon as ut, ZoomIn as dt, ZoomOut as ft } from "lucide-react";

package/dist/{rich-code-block-DPe5USBG.js → rich-code-block-CLkufAhI.js}

@@ -1,7 +1,7 @@
 import { t as e } from "./tooltip-CkttDIab.js";
-import { c as t, n, t as r } from "./dropdown-menu-BEZhNnhr.js";
-import { t as i } from "./use-material-translation-tD9XqIBm.js";
-import { a, i as o, n as s, o as c, t as l } from "./code-language-items-Bnm_WDVg.js";
+import { c as t, n, t as r } from "./dropdown-menu-mTDyFwbQ.js";
+import { t as i } from "./use-material-translation-BFQODuQz.js";
+import { a, i as o, n as s, o as c, t as l } from "./code-language-items-Dww9amx_.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-M4DcaX-P.js").then((e) => e.n).then((e) => ({ default: e.CodeEditor })));
+var N = x(() => import("./code-editor-DHB5ytUz.js").then((e) => e.n).then((e) => ({ default: e.CodeEditor })));
 function P() {
 	let { t: e } = i();
 	return /* @__PURE__ */ T("div", {

package/dist/{sortable-provider-CtAb1Q02.js → sortable-provider-BofwO9zZ.js}

@@ -1,6 +1,6 @@
 import { t as e } from "./utils-BLfntITJ.js";
 import { t } from "./dist-DVRQkaTK.js";
-import { t as n } from "./use-material-translation-tD9XqIBm.js";
+import { t as n } from "./use-material-translation-BFQODuQz.js";
 import { t as r } from "./icon-button-ifTpXt0A.js";
 import { t as i } from "./compose-refs-DZ0iIVF-.js";
 import { GripVertical as a } from "lucide-react";

package/dist/{spinner-CcmXeIHf.js → spinner-B7HCQMFr.js}

@@ -1,6 +1,6 @@
 import { t as e } from "./utils-BLfntITJ.js";
 import { o as t } from "./tooltip-CkttDIab.js";
-import { t as n } from "./use-material-translation-tD9XqIBm.js";
+import { t as n } from "./use-material-translation-BFQODuQz.js";
 import { jsx as r } from "react/jsx-runtime";
 //#region lib/components/ui/feedback/spinner/spinner.tsx
 var i = t("transition-all duration-500", {

package/dist/{stored-language-CsDEJDR7.js → stored-language-CJn_iWwG.js}

@@ -505,6 +505,8 @@ var t = {
 			pagination: {
 				previous: "Previous",
 				next: "Next",
+				"previous-page": "Previous page",
+				"next-page": "Next page",
 				"go-to-next-page": "Go to next page",
 				"go-to-previous-page": "Go to previous page",
 				"go-to-first-page": "Go to first page",
@@ -3115,6 +3117,8 @@ var t = {
 			pagination: {
 				previous: "Précédent",
 				next: "Suivant",
+				"previous-page": "Page précédente",
+				"next-page": "Page suivante",
 				"go-to-next-page": "Aller à la page suivante",
 				"go-to-previous-page": "Aller à la page précédente",
 				"go-to-first-page": "Aller à la première page",

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 { t as s } from "./use-material-translation-tD9XqIBm.js";
+import { t as s } from "./use-material-translation-BFQODuQz.js";
 import { n as c, r as l } from "./icon-sprites-FxHyqyhg.js";
 import { t as u } from "./use-theme-DMcyJ52N.js";
 import { a as d, r as f } from "./theme-context-Cofk6vgs.js";
-import { t as p } from "./theme-toggle-CWovcIQY.js";
+import { t as p } from "./theme-toggle-mQzIR1hw.js";
 import { n as m, t as h } from "./nxgt-theme-ZS945iMP.js";
 import { Check as g } from "lucide-react";
 import { useContext as _ } from "react";

package/dist/{theme-toggle-CWovcIQY.js → theme-toggle-mQzIR1hw.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./use-material-translation-tD9XqIBm.js";
+import { t as e } from "./use-material-translation-BFQODuQz.js";
 import { i as t } from "./theme-store-CSl51uNH.js";
 import { n, t as r } from "./use-theme-DMcyJ52N.js";
 import { r as i } from "./theme-context-Cofk6vgs.js";

package/dist/{toolbar-items-CrATPuOX.js → toolbar-items-Tn3MMu-s.js}

@@ -4,9 +4,9 @@ import { a as i, c as a, i as o, l as s, r as c, s as l } from "./dist-lmHmz_bu.
 import { b as u, c as d, d as f, f as p, l as m, t as h, u as g, x as _ } from "./tooltip-CkttDIab.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 E } from "./in-dialog-Vwkyp-M5.js";
-import { A as ne, M as re, N as ie, b as ae, d as oe, f as se, i as ce, j as le, l as ue, n as de, o as fe, r as pe, t as me, u as he, y as ge } from "./dropdown-menu-BEZhNnhr.js";
+import { A as ne, M as re, N as ie, b as ae, d as oe, f as se, i as ce, j as le, l as ue, n as de, o as fe, r as pe, t as me, u as he, y as ge } from "./dropdown-menu-mTDyFwbQ.js";
 import { a as _e, n as ve, r as ye, t as be } from "./dist-B7RjY7SL.js";
-import { t as xe } from "./use-material-translation-tD9XqIBm.js";
+import { t as xe } from "./use-material-translation-BFQODuQz.js";
 import { t as Se } from "./warn-once-C_e47JM8.js";
 import { o as Ce } from "./escape-owner-C4W_sOAU.js";
 import { ChevronLeft as we, ChevronRightIcon as Te, MoreVertical as Ee } from "lucide-react";

package/dist/{translate-material-X1daoGxE.js → translate-material-CCyVEi_f.js}

@@ -1,5 +1,5 @@
-import "./stored-language-CsDEJDR7.js";
-import { a as e, r as t } from "./translator-BUVKAo4l.js";
+import "./stored-language-CJn_iWwG.js";
+import { a as e, r as t } from "./translator-1THr41fc.js";
 //#region lib/i18n/translate-material.ts
 function n(n, r, i, a) {
 	if (n) for (let e of /* @__PURE__ */ new Set([n, n.split("-")[0]])) {

package/dist/{translator-BUVKAo4l.js → translator-1THr41fc.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-CsDEJDR7.js";
+import { a as t, i as n, r, t as i } from "./stored-language-CJn_iWwG.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-UZVFm8Tw.js → use-chat-composer-BBFuKNqC.js}

@@ -7,21 +7,21 @@ import { a as o, c as s, i as c, l, n as u, o as d, r as f, s as p, t as m } fro
 import { _ as h, a as g, g as _, h as v, m as y, o as b, p as x, t as S, v as C, y as w } from "./tooltip-CkttDIab.js";
 import { a as T, i as E, n as D, r as O, t as k } from "./dist-C4wtXCjf.js";
 import { i as A, n as ee, t as j } from "./in-dialog-Vwkyp-M5.js";
-import { A as M, C as N, D as te, E as ne, O as P, S as re, T as ie, _ as F, b as ae, f as oe, g as se, k as I, l as ce, m as le, n as ue, o as de, r as fe, s as pe, t as me, u as he, v as ge, w as _e, x as ve, y as ye } from "./dialog-jYcWDh9G.js";
+import { A as M, C as N, D as te, E as ne, O as P, S as re, T as ie, _ as F, b as ae, f as oe, g as se, k as I, l as ce, m as le, n as ue, o as de, r as fe, s as pe, t as me, u as he, v as ge, w as _e, x as ve, y as ye } from "./dialog-B2GXKBp3.js";
 import { A as be, C as xe, D as Se, E as Ce, O as we, S as Te, T as Ee, _ as De, a as Oe, b as ke, d as Ae, f as je, g as Me, h as Ne, i as Pe, k as Fe, l as Ie, m as Le, n as Re, o as ze, p as Be, r as Ve, s as He, t as Ue, u as We, v as Ge, w as Ke, x as qe, y as Je } from "./floating-ui.dom-KkZSW8_E.js";
-import { D as Ye, E as Xe, N as Ze, O as Qe, c as $e, d as et, f as tt, i as nt, k as rt, m as it, n as at, o as ot, p as st, t as ct, u as lt } from "./dropdown-menu-BEZhNnhr.js";
+import { D as Ye, E as Xe, N as Ze, O as Qe, c as $e, d as et, f as tt, i as nt, k as rt, m as it, n as at, o as ot, p as st, t as ct, u as lt } from "./dropdown-menu-mTDyFwbQ.js";
 import { a as ut, i as dt, n as ft } from "./field-blur-context-Cft9s7Hg.js";
-import { C as pt, S as mt, a as ht, c as gt, d as _t, l as vt, n as yt, o as bt, s as xt, u as St } from "./toolbar-items-CrATPuOX.js";
+import { C as pt, S as mt, a as ht, c as gt, d as _t, l as vt, n as yt, o as bt, s as xt, u as St } from "./toolbar-items-Tn3MMu-s.js";
 import { a as Ct, i as wt, n as Tt, o as Et, t as Dt } from "./bubble-input-B7BVd9fX.js";
 import { i as Ot } from "./dist-B7RjY7SL.js";
-import "./stored-language-CsDEJDR7.js";
-import { a as kt } from "./translator-BUVKAo4l.js";
+import "./stored-language-CJn_iWwG.js";
+import { a as kt } from "./translator-1THr41fc.js";
 import { h as At } from "./get-CTzJAwfc.js";
 import { t as jt } from "./isEmpty-F_g3jLf8.js";
-import { t as L } from "./use-material-translation-tD9XqIBm.js";
-import { t as Mt } from "./spinner-CcmXeIHf.js";
+import { t as L } from "./use-material-translation-BFQODuQz.js";
+import { t as Mt } from "./spinner-B7HCQMFr.js";
 import { a as Nt } from "./button-tones-BwuVvAmd.js";
-import { a as Pt, i as Ft, n as It, r as Lt, t as Rt } from "./button-Ck1Bif-Q.js";
+import { a as Pt, i as Ft, n as It, r as Lt, t as Rt } from "./button-rdIhY2BT.js";
 import { t as R } from "./icon-button-ifTpXt0A.js";
 import { n as zt, r as Bt } from "./icon-sprites-FxHyqyhg.js";
 import { t as Vt } from "./use-ssr-media-query-C6M5m8sf.js";
@@ -35,10 +35,10 @@ import { a as tn, i as nn, o as rn } from "./escape-owner-C4W_sOAU.js";
 import { n as an } from "./use-slice-reducer-BGkeGtML.js";
 import { t as on } from "./browser-only-DQ94lWF8.js";
 import { t as sn } from "./compose-refs-DZ0iIVF-.js";
-import { n as cn, r as ln, t as un } from "./chip-B9pZFWbi.js";
-import { n as dn, t as fn } from "./icon-badge-92uhu2o6.js";
+import { n as cn, r as ln, t as un } from "./chip-CEau88ZV.js";
+import { n as dn, t as fn } from "./icon-badge-CiWXvKCs.js";
 import { r as pn } from "./use-csp-nonce-ZKs9k-ov.js";
-import { t as mn } from "./empty-state-BBUsR0_X.js";
+import { t as mn } from "./empty-state-CJh9f2pc.js";
 import { t as hn } from "./skeleton-DSdtr2qc.js";
 import { H as gn, V as _n, X as vn, bt as yn, it as bn, lt as xn, n as Sn, t as Cn, xt as wn, yt as Tn } from "./dist-moutbfbd.js";
 import { t as En } from "./markdown-Dw_uH7j7.js";
@@ -10782,7 +10782,7 @@ var CS = (e = {}) => Dn({
 		let [{ default: t }, { lowlight: n }, { richCodeBlock: r }] = await Promise.all([
 			import("./dist-CRMFGjng.js"),
 			import("./lowlight-OtcjU2Sa.js"),
-			import("./rich-code-block-DPe5USBG.js")
+			import("./rich-code-block-CLkufAhI.js")
 		]);
 		return [r(t, {
 			lowlight: n,

package/dist/{use-heading-spy-ByraZUf9.js → use-heading-spy-DNFfHQJs.js}

@@ -1,4 +1,4 @@
-import { r as e } from "./i18n-provider-3TsMIGn1.js";
+import { r as e } from "./i18n-provider-BpZOKh7U.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 } from "react";
 //#region ../../node_modules/date-fns/locale/fr/_lib/formatDistance.js

package/dist/{use-material-translation-tD9XqIBm.js → use-material-translation-BFQODuQz.js}

@@ -1,5 +1,5 @@
-import { r as e } from "./i18n-provider-3TsMIGn1.js";
-import { t } from "./translate-material-X1daoGxE.js";
+import { r as e } from "./i18n-provider-BpZOKh7U.js";
+import { t } from "./translate-material-CCyVEi_f.js";
 import { useCallback as n } from "react";
 //#region lib/i18n/use-material-translation.ts
 function r() {

package/docs/components/data-display.md

@@ -633,7 +633,7 @@ the grid it is in; pass `className="col-start-full"` for a full-width row.
 
 ![EntityHeader](../previews/data-display-entityheader.webp)
 
-Page header with icon, title, status, metadata and actions.
+Page header with icon (or a `leading` control), title, status, metadata and actions.
 
 ```tsx
 import { Edit } from 'lucide-react';
@@ -651,13 +651,27 @@ import { Badge, EntityHeader } from '@nxgt/material/components';
 | --- | --- | --- | --- |
 | `title` | `ReactNode` | — | the heading (an `h1` unless `headingLevel` says otherwise); optional: without it no heading is rendered (see below) |
 | `headingLevel` | `1 \| 2 \| 3` | `1` | the title's heading level: pass `2` or `3` when the page already has its `h1` (a list title beside a detail header); the look does not change |
-| `icon`, `status` | `ReactNode` | — | before and after the title; `icon` is decoration, shown in an `aria-hidden` badge, so put nothing meaningful or focusable there |
+| `icon`, `status` | `ReactNode` | — | before and after the title; `icon` is decoration, shown in an `aria-hidden` badge, so put nothing meaningful or focusable there; for a control, use `leading` |
+| `leading` | `ReactNode` | — | an interactive control at the band's start, such as a [Switcher](selection-and-choice.md#switcher) of either variant: drawn as it is, at its natural size (at most 18rem wide beside the title, from a 384px band; narrower, it takes the band's width), in the accessibility tree, with no badge and no `aria-hidden`; on a phone it takes the band's width above the title. **It replaces `icon` when both are given** (a development warning says so). Root `data-slot="entity-header-leading"` |
 | `metadata` | `{ label: string; value: ReactNode }[]` | `[]` | facts under the title, a description list: a muted label beside its value, no colon; a link in a value is drawn in the primary text colour (`text-primary-text`), not the prose link's info blue, and `nxgt-plain-link` still opts out |
 | `stats` | `EntityStat[]` | `[]` | figures (counts, a mean) as compact `size="sm"` [StatCard](#statcard) tiles in a `StatCardGroup` (2×2 on a phone, a wrapping row beside) under the metadata; a `tone` paints a tile, `0` is a figure, an empty value drops the tile (see Stats below) |
 | `actions` | `ResponsiveButtonProps[] \| ReactNode` | `[]` | an array becomes responsive buttons (icon-only on phones) |
 
 The root carries `data-slot="entity-header"`; the metadata is a `dl` with `data-slot="entity-metadata"` (a muted `dt` label beside its `dd` value, no colon), and the actions sit in `data-slot="entity-header-actions"` (absent when there are none). Inside an EntityHeader that replaces the old `summary-data` slot and its `Label:` text, so update a selector or a test that read "Label: value".
 
+**A control at the start.** `leading` takes a control, never `icon`: the icon badge is `aria-hidden`, which squashes a `Switcher` and makes axe report `aria-hidden-focus` (see [Troubleshooting](../troubleshooting.md#a-control-in-an-entityheaders-icon-is-hidden-from-assistive-tech-squashed-and-reports-aria-hidden-focus)).
+
+```tsx
+import { Badge, EntityHeader, Switcher } from '@nxgt/material/components';
+
+<EntityHeader
+  leading={<Switcher variant="expressive" label="Group" value={group} onValueChange={setGroup} options={groups} />}
+  title="Attendance"
+  status={<Badge variant="success">Active</Badge>}
+  metadata={[{ label: 'Year', value: '2026-2027' }]}
+/>
+```
+
 **Stats.** Figures (counts, a mean) go in `stats`, shown as compact [StatCard](#statcard) tiles (`size="sm"`) in a `StatCardGroup` (2×2 on a phone, a row that wraps beside) under the metadata; facts (dates, names) stay in `metadata`. A `tone` paints a tile (tonal), none leaves it outlined; `0` is a figure, an empty value drops the tile. The row is `data-slot="entity-stats"`, and the type `EntityStat` is exported.
 
 ```tsx

package/docs/components/data-table-filter-and-lists.md

@@ -14,8 +14,8 @@ either can be used alone.
 | | Component | What it does |
 | --- | --- | --- |
 | <img src="../previews/data-table-filter-lists-datatable.webp" width="96" alt=""> | [DataTable](#datatable) | TanStack Table v9 with sorting, selection, expansion and pagination, client-side or one server page at a time |
-| <img src="../previews/data-table-filter-lists-servertable.webp" width="96" alt=""> | [ServerTable](#servertable) | A server-mode `DataTable` driven by the URL, with the Filter in its top band: sort, cursor paging, the empty page with removable chips, one count announced |
-| <img src="../previews/data-table-filter-lists-listempty.webp" width="96" alt=""> | [ListEmpty](#listempty) | A list's empty page: nothing yet, or nothing matches and the way out |
+| <img src="../previews/data-table-filter-lists-servertable.webp" width="96" alt=""> | [ServerTable](#servertable) | A server-mode `DataTable` driven by the URL, with the Filter in its top band (a title and a description, or neither): sort, cursor paging, the empty page with a scene, an action and removable chips, one count announced |
+| <img src="../previews/data-table-filter-lists-listempty.webp" width="96" alt=""> | [ListEmpty](#listempty) | A list's empty page: nothing yet, with a scene and an action, or nothing matches and the way out |
 | <img src="../previews/data-table-filter-lists-datagrid.webp" width="96" alt=""> | [DataGrid](#datagrid) | An editable grid: spreadsheet keys, paste, a fill handle with series, undo, totals, saving with versions and conflicts (lazy ones fetch theirs on "Keep mine"), `onRefuse` for a refused paste or fill, row selection (`enableRowSelection`), and resizable, hideable and reorderable columns (`columnControls`, `columnLayout`, `DataGridColumnsMenu`) |
 | <img src="../previews/data-table-filter-lists-daygroupedlist.webp" width="96" alt=""> | [DayGroupedList](#daygroupedlist) | A list split by day under sticky Today / Yesterday / Earlier headings |
 | <img src="../previews/data-table-filter-lists-filter.webp" width="96" alt=""> | [Filter](#filter) | Schema-driven filters with chips, presets and persistence |
@@ -115,9 +115,9 @@ table enables, for typing your own column defs.
 | `sorting` / `onSortingChange` | `SortingState` / `(sorting) => void` | held inside | controlled sorting; the callback gets the new state, not an updater, and is not called for an update that resolves to the current value |
 | `getRowId` | `(row, index) => string` | the index | the row's id, the key of `rowSelection` |
 | `enableRowSelection` | `boolean \| (row) => boolean` | `true` | which rows can be selected (`row` is the data). A row that cannot has a disabled checkbox; "Select all" skips it and its checked and indeterminate states count only selectable rows. A locked row already in the selection can be cleared by its own box (and only cleared) |
-| `rowSelectionDisabledReason` | `(row) => string \| undefined` | — | why a row cannot be selected: its checkbox is `aria-disabled` but stays focusable, shows the reason in a tooltip on hover and focus, and has it as its `aria-describedby`; without a reason it is a plain `disabled` box |
+| `rowSelectionDisabledReason` | `(row) => string \| undefined` | — | why a row cannot be selected: its checkbox is `aria-disabled` but stays focusable, shows the reason in a tooltip on hover, focus and tap, and has it as its `aria-describedby`; without a reason it is a plain `disabled` box |
 | `rowSelection` / `onRowSelectionChange` | `RowSelectionState` / `(selection) => void` | held inside | controlled selection, by id; may hold rows of other pages; the callback is not called for an update that resolves to the current value |
-| `pagination` | `{ totalCount?, offset?, previous?, next?, live? }` | — | the server footer's range ("41–60 of 133") and Previous / Next: an href (a link) or a callback (a button); `live: false` renders the range as plain text instead of a polite live region (a page that tells a new query's count elsewhere) |
+| `pagination` | `{ totalCount?, offset?, previous?, next?, live?, pageControls? }` | — | the server footer's range ("41–60 of 133") and Previous / Next: an href (a link) or a callback (a button); `live: false` renders the range as plain text instead of a polite live region (a page that tells a new query's count elsewhere); `pageControls: 'icon'` draws Previous and Next as icon-only buttons (default `'labelled'`, the tonal buttons with their word): a tooltip and the names "Previous page" / "Next page" (`material.table.pagination.previous-page`, `next-page`), `rel` and `data-slot` kept, a link staying a link, the disabled one in place |
 | `footer` | `false \| (table) => ReactNode` | the pagination | replaces the footer, or removes it |
 | `getRowHref` | `(row) => string \| undefined` | — | the first data cell links to the row's page; a click elsewhere on the row follows it |
 | `onRowClick` | `(row, event) => void` | — | a click on the row (not on a control); alone (without `getRowHref`), it makes the row focusable and Enter calls it |
@@ -824,7 +824,21 @@ export default function Students() {
   the selection is kept across pages and drops on a new query.
   `selection.clear()` empties it and moves the focus to the table
   (`tabindex="-1"`, by script only; the list of cards or tiles in those layouts); `selection.deselect(ids)` drops rows
-  gone since the page was read.
+  gone since the page was read. **Locked rows:** `enableRowSelection` (`true`,
+  `false` or `(row) => boolean`, as DataTable's) leaves rows out of it, and
+  `rowSelectionDisabledReason` says why; a locked row's checkbox is
+  `aria-disabled` but focusable, described by the reason (`aria-describedby`)
+  and shown in a tooltip on hover, focus and tap. Space on it does nothing,
+  "Select all" skips it, and its state counts only the rows that can be
+  selected.
+  ```tsx
+  <ServerTable<Request>
+    {...props}
+    bulkActions={(ids) => <Button>{`Apply ${ids.length}`}</Button>}
+    enableRowSelection={(row) => !row.applied}
+    rowSelectionDisabledReason={() => 'Already applied'}
+  />
+  ```
 - **Your own controls instead.** Without `filter`, pass
   `filters={tableFilters(model)}`: whether the page is "nothing matches",
   and its "Clear search and filters" button
@@ -833,7 +847,8 @@ export default function Students() {
 - **Passed through** to `DataTable`: `columns`, `maxHeight`, `scrollLabel`,
   `showViewOptions`, `renderExpandedRow`, `options`, `loading`,
   `loadingRows`, `getRowHref`, `onRowClick`, `linkComponent`, `density`,
-  `layout`, `renderCard`, `renderTile` (a list of cards or tiles instead of the
+  `layout`, `enableRowSelection`, `rowSelectionDisabledReason`,
+  `renderCard`, `renderTile` (a list of cards or tiles instead of the
   table: [Cards and tiles](../guides/cards-and-tiles.md)).
 
 Its props are `ServerTableProps<T>`; `filter` is a `ServerTableFilter`,
@@ -849,23 +864,72 @@ Its props are `ServerTableProps<T>`; `filter` is a `ServerTableFilter`,
 | `getRowId` | `(row) => string` | — | the selection's key |
 | `filter` | `ServerTableFilter` | — | `{ model, locked?, fieldProps?, variant?, sheetTrigger?, quick?, density?, shortcuts?, previewCount?, counts?, liveDelayMs?, label?, searchLabel?, searchPlaceholder?, searchApply?, searchMinLength?, codec? }` |
 | `filter.codec` | `{ keepKnownValues?, encoding? }` | — | how the page reads and writes the URL: pass the loader's `keepKnownValues` / `encoding` so chips and rows agree |
-| `title` | `ReactNode` | — | the band's title (a string is an `<h2>`) |
+| `title` | `ReactNode` | — | the band's title (a string is an `<h2>`). Leave it out when the page's `h1` is elsewhere (the app bar's): the band then has no heading |
+| `description` | `ReactNode` | — | a muted line under the `title`, or alone above the band's controls without one; the `actions` stay at the band's end |
 | `actions` | `ReactNode` | — | the page's actions, at the band's end |
+| `bandDensity` | `'comfortable' \| 'compact'` | `'comfortable'` | `'compact'` halves the room above the band (16px to 8px) and under it (12px to 6px), for a list under a sticky app bar and a breadcrumb; the controls keep their size (the Filter's own `density` is the controls') |
+| `pageControls` | `'labelled' \| 'icon'` | `'labelled'` | the footer's Previous / Next: `'icon'` is icon-only, with a tooltip and the names "Previous page" / "Next page" (`DataTable`'s default is unchanged) |
+| `filterRef` | `Ref<ServerTableFilterHandle>` | — | with `filter`: `filterRef.current.focus()` focuses the Filter's first control, the search, else the first quick filter, "Add filter" or "Filters (N)" the width shows |
 | `sorting` | `createSorting(…)` | — | headers sorted from the URL |
 | `filters` | `tableFilters(model)` | — | without `filter`: "nothing matches" and its clear |
-| `empty` | `ServerTableEmpty`: `{ none, noMatch, clear?, headingLevel? }` | — | the empty page's words; `headingLevel` (default 2) is the level of its title and of the error's |
+| `empty` | `ServerTableEmpty`: `{ none, noMatch, clear?, headingLevel?, iconStyle? }` | — | the empty page: `none` and `noMatch` are a title or a `ListEmptyPage` (`{ title, description?, illustration?, action? }`); `headingLevel` (default 2) is the level of its title and of the error's; `iconStyle` styles the scenes (see below) |
 | `error` | `ServerTableError \| null` | — | the fetch failed: the failure and a Retry replace the rows |
 | `onRetry` | `() => unknown` | — | the error's Retry; a returned promise keeps it loading |
 | `onClearFilters` | `() => void` | focus the table | without `filter`, after "clear" |
 | `bulkActions` | `(ids, selection: ServerTableSelection) => ReactNode` | — | the selection's toolbar |
+| `enableRowSelection`, `rowSelectionDisabledReason` | `boolean \| (row) => boolean`, `(row) => string \| undefined` | all rows, no reason | with `bulkActions`: which rows can be selected, and why one cannot ([DataTable](#datatable)) |
 | `pageHref` | `(params) => string` | `` `?${params}` `` | Previous / Next hrefs |
 | `pagingNames` | `{ after?, trail? }` | `after`, `trail` | the cursor's params |
 | `resultsLabel` | `(count) => string` | "N results" | without `filter`: what the list's region says. The page past the last has its own words: `material.server-table.past-end`, `past-end-hint`, `first-page` and `past-end-status` |
 | `className` | `string` | — | on the list's surface |
 
+**Where the focus goes.** After "Clear" on an empty page, or the last chip
+removed, the focus returns to the Filter's search; a bar without one falls to
+its first shown control (a quick filter, "Add filter", or "Filters (N)" on a
+phone, never a control hidden at the width). An app that moves the focus
+itself holds `filterRef`:
+
+```tsx
+const filterRef = useRef<ServerTableFilterHandle>(null);
+<ServerTable {...props} filter={{ model }} filterRef={filterRef} bandDensity="compact" pageControls="icon" />;
+filterRef.current?.focus();
+```
+
+**A page whose heading is elsewhere, and a "nothing yet" with a scene.** Without
+`title` the band has no heading; `description` is the line above its controls,
+and `empty.none` takes the scene and the call to action (the same
+`ListEmptyPage` as [ListEmpty](#listempty)):
+
+```tsx
+// Once, above: <IllustrationDefaults sets={[EDUCATION_SCENES]}> (from
+// '@nxgt/material-core/illustrations/education'), so 'no-students' resolves.
+<ServerTable<Student>
+  {...page}
+  description="12 students this year"
+  actions={<Button>New student</Button>}
+  empty={{
+    none: {
+      title: 'No students yet',
+      description: 'Enrol the first one.',
+      illustration: 'no-students', // a scene of a registered set; decorative
+      action: <Button>New student</Button>,
+    },
+    noMatch: 'No student matches', // keeps the "no results" scene and "Clear"
+    iconStyle: 'solid', // the sprite file the app serves
+  }}
+/>
+```
+
+A scene id from a set (`EDUCATION_SCENES`, `HEALTH_SCENES`) is registered once
+with `IllustrationDefaults sets` above the table; `iconStyle` keeps that
+provider's icons and sets and changes only the style (`{ family?, type? }`, a
+sprite file's name, or a list of them). On "nothing matches", an `action` in
+`noMatch` replaces "Clear search and filters". The live region speaks the
+page's `title`.
+
 `ServerTable` uses `DataTable`'s `focusable`, `focusRef` (the table, or the list of cards or tiles), `announceLoading`, `announceEmpty`, `filtered` and `pagination.live` (see [DataTable](#datatable)).
 
-**Storybook:** `Data table, filter & lists/ServerTable` (`Error No Loading`, `Error Retry`), `…/ServerTable/Phone`, `…/ServerTable/Cards`, `…/ServerTable/Tiles`, `…/ServerTable/Own controls` (`Past The Last Page`, `Slow Router Keeps Search`) · **Vue:** `ServerTable`
+**Storybook:** `Data table, filter & lists/ServerTable` (`Error No Loading`, `Error Retry`), `…/ServerTable/Band and empty page`, `…/ServerTable/Phone`, `…/ServerTable/Cards`, `…/ServerTable/Tiles`, `…/ServerTable/Own controls` (`Past The Last Page`, `Slow Router Keeps Search`), `…/ServerTable/Locked rows`, `…/ServerTable/Compact band and icon paging` · **Vue:** `ServerTable`
 
 ---
 
@@ -892,7 +956,8 @@ import { ListEmpty } from '@nxgt/material/components';
 | Prop | Type | Default | Effect |
 | --- | --- | --- | --- |
 | `filtered` | `boolean` | — | "nothing matches" rather than "nothing yet" |
-| `none`, `noMatch` | `ReactNode` | — | the two titles |
+| `none`, `noMatch` | `ReactNode \| ListEmptyPage` | — | the two titles, or `{ title, description?, illustration?, action? }`: a line, a scene (a scene id, `true` for the kind's, `false` for none; decorative) and a call to action. On `noMatch`, `action` replaces the way out |
+| `iconStyle` | `IconStyleInput` | — | the icon style of the scenes (`{ family?, type? }`, a sprite file's name, or a list), keeping the `IllustrationDefaults` above |
 | `children` | `ReactNode` | — | while nothing matches, above the way out (`ServerTable`'s removable chips) |
 | `clear` | `string` | "Clear search and filters" | the way out's label (`material.list-empty.clear`) |
 | `onClear` | `() => void` | — | the way out is a button |

package/docs/components/selection-and-choice.md

@@ -1197,7 +1197,17 @@ const RouterLink: AppShellLinkComponent = ({ href, ...props }) => <Link to={href
 />
 ```
 
-A title that does not fit the trigger is cut with an ellipsis: the span carries the full title in `aria-label` (what `expectNoTextOverflow` of `@nxgt/playwright` reads), hovering or focusing the trigger shows it with the subtitle in a tooltip, and the trigger's accessible name is the label, the full title and the subtitle.
+A title that does not fit the trigger is cut with an ellipsis: the span carries the full title in `aria-label` (what `expectNoTextOverflow` of `@nxgt/playwright` reads), hovering or focusing the trigger shows it with the subtitle in a tooltip, and the trigger's accessible name is the label, the full title and the subtitle. An option's subtitle that does not fit, in the trigger (default variant; the expressive pill keeps it for screen readers only), the menu or the panel, is treated the same way while it is cut: the full text in `aria-label` and, in the options, in `title`, and in the trigger's tooltip. The option's accessible name still reads the title and the subtitle once each.
+
+**Choosing a link closes the panel.** In link mode the popover or the phone sheet closes when an option (or a footer link) is activated, as in select mode, and focus is **not** handed back to the trigger: the navigation owns it, so a route's own focus on the new page's title runs. `open` and `onOpenChange` control the panel from the app (close it from a route effect, or open it from a shortcut):
+
+```tsx
+const [open, setOpen] = useState(false);
+
+<Switcher label="Group" value={id} options={groups} getHref={(g) => `/groups/${g.id}`} linkComponent={RouterLink} open={open} onOpenChange={setOpen} />;
+```
+
+To put a Switcher at the start of a page header, pass it as [EntityHeader](data-display.md#entityheader)'s `leading` (not `icon`).
 
 | Prop | Type | Default | Effect |
 | --- | --- | --- | --- |
@@ -1213,6 +1223,8 @@ A title that does not fit the trigger is cut with an ellipsis: the span carries
 | `footer` | `{ label?, onSelect?, href? }` | — | a "Manage…" button (a link with `href`) at the end of the panel; `label` defaults to `material.switcher.manage` |
 | `emptyLabel` | `ReactNode` | `material.switcher.empty` | shown when the search matches nothing |
 | `sheet` | `boolean` | on a phone | `true` always opens a sheet, `false` never |
+| `open` | `boolean` | uncontrolled | controls the panel (popover, menu or sheet); pair with `onOpenChange` |
+| `onOpenChange` | `(open: boolean) => void` | — | called when the panel opens or closes, by the user or after a pick |
 | `name`, button props | `ComponentProps<'button'>` | — | spread on the trigger; `name` is its `data-pw` |
 
 `SwitcherItem`: `{ id, title, subtitle?, icon?, group?, initial?, tone?, badge?, href?, disabled? }`.

package/docs/roadmap.md

@@ -566,7 +566,7 @@ version they shipped in, and planned entries may name the major they target.
   `FilterChips` still work, now deprecated. Shipped in 2.37.0.
   [Filter bar](components/data-table-filter-and-lists.md#filter-bar) ·
   [Server lists in the URL](guides/server-lists-url.md)
-- **A server list driven by the URL: `ServerTable`** — a server-mode `DataTable` with the filter bar in its top band beside the page's title and actions, the query, sort and cursor in the URL for any router, the empty page listing the filters as removable chips, and one count announced. Shipped in 2.37.0.
+- **A server list driven by the URL: `ServerTable`** — a server-mode `DataTable` with the filter bar in its top band beside the page's optional title, its description line and its actions, the query, sort and cursor in the URL for any router, the empty page listing the filters as removable chips (and, for "nothing yet", a scene and an action), and one count announced. Shipped in 2.37.0.
 - **LocalizedTextFields** — one text in several
   languages: a fieldset with an input per language, the default as a
   placeholder with a reset button, `lang` and `dir` on each input, an error

package/docs/troubleshooting.md

@@ -36,6 +36,8 @@ words in your error.
 - [`IconRefError` from `IconSpritesProvider`](#iconreferror-from-iconspritesprovider)
 - [An accessibility audit reports low contrast on a badge, a button, a toast or a menu entry](#an-accessibility-audit-reports-low-contrast-on-a-badge-a-button-a-toast-or-a-menu-entry)
 - [`ARIA hidden element must not be focusable or contain focusable elements`](#aria-hidden-element-must-not-be-focusable-or-contain-focusable-elements)
+- [A control in an `EntityHeader`'s `icon` is hidden from assistive tech, squashed, and reports `aria-hidden-focus`](#a-control-in-an-entityheaders-icon-is-hidden-from-assistive-tech-squashed-and-reports-aria-hidden-focus)
+- [A `Switcher` in link mode leaves focus on the trigger after a navigation, and the new page's title never gets it](#a-switcher-in-link-mode-leaves-focus-on-the-trigger-after-a-navigation-and-the-new-pages-title-never-gets-it)
 - [An accessibility audit reports low contrast on a tonal or outlined button, a selected list tile or a hovered badge link](#an-accessibility-audit-reports-low-contrast-on-a-tonal-or-outlined-button-a-selected-list-tile-or-a-hovered-badge-link)
 - [An accessibility audit reports low contrast on error text in the dark theme](#an-accessibility-audit-reports-low-contrast-on-error-text-in-the-dark-theme)
 - [An accessibility audit reports low contrast on primary text in the dark theme](#an-accessibility-audit-reports-low-contrast-on-primary-text-in-the-dark-theme)
@@ -956,6 +958,35 @@ Elements mounted after the layer opens are not made inert: mount them
 first, or pass them to `inertOthers` in `keep` when they must stay
 reachable.
 
+### A control in an `EntityHeader`'s `icon` is hidden from assistive tech, squashed, and reports `aria-hidden-focus`
+
+**When:** an `EntityHeader` gets a `Switcher`, a button or a link as its `icon`.
+The control is drawn small and clipped inside a filled square, a screen reader
+skips it, and an accessibility audit (axe) reports `aria-hidden-focus`.
+**Why:** `icon` is decoration: it is wrapped in a filled, icon-sized badge with
+`aria-hidden="true"`, so anything focusable inside it is an `aria-hidden`
+subtree the keyboard still reaches.
+**Fix:** put the control in `leading`: it is drawn as it is, at its natural
+size, beside the title, with no badge and no `aria-hidden`. When both are
+given, `leading` replaces `icon` (and warns in development).
+
+```tsx
+<EntityHeader
+	leading={<Switcher label="Group" value={group} onValueChange={setGroup} options={groups} />}
+	title="Attendance"
+/>
+```
+
+### A `Switcher` in link mode leaves focus on the trigger after a navigation, and the new page's title never gets it
+
+**When:** a `Switcher` with `getHref` and your router's `linkComponent`: you pick an option, the URL changes, but focus sits on the Switcher's trigger (or on the clicked link while the panel is open) instead of moving to the new page's title.
+**Why:** a closing overlay hands focus back to its trigger, which ran after your route's own focus handling. Older versions also gave you no way to close the panel yourself.
+**Fix:** update `@nxgt/material`: activating a link option closes the popover or sheet and no longer returns focus to the trigger, so the page's focus runs. To close it from the app, control it with `open` and `onOpenChange`.
+
+```tsx
+<Switcher label="Group" value={id} options={groups} getHref={(g) => `/groups/${g.id}`} linkComponent={RouterLink} open={open} onOpenChange={setOpen} />
+```
+
 ### An accessibility audit reports low contrast on a tonal or outlined button, a selected list tile or a hovered badge link
 
 **When:** axe (or Lighthouse) reports `color-contrast` on a `tonal` or

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nxgt/material",
-	"version": "3.18.0",
+	"version": "3.20.0",
 	"license": "MIT",
 	"bugs": {
 		"email": "stevegires@gmail.com"
@@ -357,7 +357,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.32.1",
+		"@nxgt/material-core": "^0.33.0",
 		"@base-ui/react": "^1.6.0",
 		"@dnd-kit/core": "^6.3.1",
 		"@dnd-kit/sortable": "^10.0.0",