@nxgt/material 3.50.0 → 3.51.0

package/dist/pdf-reader.js

@@ -1,3 +1,3 @@
-import { t as e } from "./public-vxiijIJF.js";
+import { t as e } from "./public-CTZ5RK_Y.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-DPM_ALQ4.js";
-import { t } from "./translate-material-DEUlaL_1.js";
+import { r as e } from "./i18n-provider-Ang2f31m.js";
+import { t } from "./translate-material-D6KCK21i.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-vxiijIJF.js → public-CTZ5RK_Y.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-BpVwI1ps.js";
+import { n as u, s as d } from "./spinner-UvqlDsV8.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-S7dLsYRZ.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-XLlxfDgq.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-CIMo4F9q.js";
-import { t as N } from "./use-material-translation-DWWeeg-B.js";
-import { t as _e } from "./button-BRUaHD8z.js";
-import { n as ve, t as ye } from "./icon-button-DSC2-IAG.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-TdT_5iUc.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-BozV6Ikw.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-C09bJphe.js";
+import { t as N } from "./use-material-translation-pLgSqqLw.js";
+import { t as _e } from "./button-BWcr2b49.js";
+import { n as ve, t as ye } from "./icon-button-CtG3Snfm.js";
 import { t as be } from "./useEvent-2fKq-6w8.js";
 import { n as xe, t as Se } from "./toggle-group-BkH23Jk4.js";
-import { o as Ce } from "./escape-owner-B9eCwjLw.js";
+import { o as Ce } from "./escape-owner-Bu-aDEEO.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-Dsf6R-Zo.js";
+import { n as Ee, t as De } from "./empty-state-gzBPimAo.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-BwvCXPqq.js → rich-code-block-oTgL-s4W.js}

@@ -1,7 +1,7 @@
-import { r as e } from "./spinner-BpVwI1ps.js";
-import { c as t, n, t as r } from "./dropdown-menu-XLlxfDgq.js";
-import { t as i } from "./use-material-translation-DWWeeg-B.js";
-import { a, i as o, n as s, o as c, t as l } from "./code-language-items-BKEUhQlF.js";
+import { r as e } from "./spinner-UvqlDsV8.js";
+import { c as t, n, t as r } from "./dropdown-menu-BozV6Ikw.js";
+import { t as i } from "./use-material-translation-pLgSqqLw.js";
+import { a, i as o, n as s, o as c, t as l } from "./code-language-items-Cs1Pwd1h.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-R_nPN_-d.js").then((e) => e.n).then((e) => ({ default: e.CodeEditor })));
+var N = g(() => import("./code-editor-BKMaeIF6.js").then((e) => e.n).then((e) => ({ default: e.CodeEditor })));
 function P() {
 	let { t: e } = i();
 	return /* @__PURE__ */ b("div", {

package/dist/{sortable-provider-D2pAFWQB.js → sortable-provider-CpA5NYgD.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-DWWeeg-B.js";
-import { t as r } from "./icon-button-DSC2-IAG.js";
+import { t as n } from "./use-material-translation-pLgSqqLw.js";
+import { t as r } from "./icon-button-CtG3Snfm.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-BpVwI1ps.js → spinner-UvqlDsV8.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-DWWeeg-B.js";
+import { t as w } from "./use-material-translation-pLgSqqLw.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-Beyj2ult.js → stored-language-Cb9FMEwk.js}

@@ -2076,7 +2076,10 @@ var t = {
 			"bulk-action": "{label} ({count})",
 			"bulk-action-name": "{label} {count, plural, one {# row} other {# rows}}",
 			"bulk-max-notice": "Select {max, plural, one {# row} other {# rows}} or fewer to {label}",
-			"bulk-more": "More"
+			"bulk-more": "More",
+			"bulk-bar": "Selected rows",
+			"bulk-selected": "{count} selected",
+			"bulk-cancel": "Cancel"
 		},
 		"list-empty": { clear: "Clear search and filters" },
 		"data-grid": {
@@ -4909,7 +4912,10 @@ var t = {
 			"bulk-action": "{label} ({count})",
 			"bulk-action-name": "{label} : {count, plural, one {# ligne} other {# lignes}}",
 			"bulk-max-notice": "Sélectionnez {max, plural, one {# ligne} other {# lignes}} ou moins pour {label}",
-			"bulk-more": "Plus"
+			"bulk-more": "Plus",
+			"bulk-bar": "Lignes sélectionnées",
+			"bulk-selected": "{count, plural, one {# sélectionnée} other {# sélectionnées}}",
+			"bulk-cancel": "Annuler"
 		},
 		"list-empty": { clear: "Effacer la recherche et les filtres" },
 		"data-grid": {

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-DWWeeg-B.js";
+import { t as l } from "./use-material-translation-pLgSqqLw.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-BTYRPkP4.js";
+import { t as p } from "./theme-toggle-BZVz6O5q.js";
 import { n as m, t as h } from "./nxgt-theme-ivgNca3z.js";
 import { useContext as g } from "react";
 import { jsx as _, jsxs as v } from "react/jsx-runtime";

package/dist/{theme-toggle-BTYRPkP4.js → theme-toggle-BZVz6O5q.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./use-material-translation-DWWeeg-B.js";
+import { t as e } from "./use-material-translation-pLgSqqLw.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-CIMo4F9q.js → toolbar-items-C09bJphe.js}

@@ -2,13 +2,13 @@ import { t as e } from "./utils-BLfntITJ.js";
 import { t } from "./warn-once-C_e47JM8.js";
 import { o as n, r, t as i } from "./dist-DVRQkaTK.js";
 import { a, c as o, i as s, l as c, r as l, s as u } from "./dist-lmHmz_bu.js";
-import { C as d, S as f, d as p, f as m, m as h, p as g, r as _, u as v } from "./spinner-BpVwI1ps.js";
+import { C as d, S as f, d as p, f as m, m as h, p as g, r as _, u as v } from "./spinner-UvqlDsV8.js";
 import { i as y, n as b, r as x, t as S } from "./dist-C4wtXCjf.js";
 import { a as C, c as w, l as T, o as E, 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-XLlxfDgq.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-BozV6Ikw.js";
 import { a as ve, n as ye, r as be, t as xe } from "./dist-B7RjY7SL.js";
-import { t as Se } from "./use-material-translation-DWWeeg-B.js";
-import { o as Ce } from "./escape-owner-B9eCwjLw.js";
+import { t as Se } from "./use-material-translation-pLgSqqLw.js";
+import { o as Ce } from "./escape-owner-Bu-aDEEO.js";
 import * as D from "react";
 import { createContext as O, useCallback as we, useContext as k, useEffect as A, useId as Te, useLayoutEffect as j, useMemo as M, useReducer as Ee, useRef as N, useState as P } from "react";
 import { Fragment as F, jsx as I, jsxs as L } from "react/jsx-runtime";

package/dist/{translate-material-DEUlaL_1.js → translate-material-D6KCK21i.js}

@@ -1,5 +1,5 @@
-import "./stored-language-Beyj2ult.js";
-import { a as e, r as t } from "./translator-CBgIb3zP.js";
+import "./stored-language-Cb9FMEwk.js";
+import { a as e, r as t } from "./translator-BnQXtpSZ.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-CBgIb3zP.js → translator-BnQXtpSZ.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-Beyj2ult.js";
+import { a as t, i as n, r, t as i } from "./stored-language-Cb9FMEwk.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-D8UAsX0f.js → use-chat-composer-AZAj4tFJ.js}

@@ -5,39 +5,39 @@ import { t as r } from "./warn-once-C_e47JM8.js";
 import { n as i } from "./use-shape-morph-BKA_R5P5.js";
 import { n as a, o, t as s } from "./dist-DVRQkaTK.js";
 import { a as c, c as l, i as u, l as d, n as f, o as p, r as m, s as h, t as g } from "./dist-lmHmz_bu.js";
-import { _, a as v, b as y, c as b, g as x, h as S, i as C, n as w, o as T, r as E, s as D, t as O, v as k, x as A, y as ee } from "./spinner-BpVwI1ps.js";
+import { _, a as v, b as y, c as b, g as x, h as S, i as C, n as w, o as T, r as E, s as D, t as O, v as k, x as A, y as ee } from "./spinner-UvqlDsV8.js";
 import { a as j, i as M, n as N, r as te, t as ne } from "./dist-C4wtXCjf.js";
 import { i as P, n as re, t as ie } from "./in-dialog-Vwkyp-M5.js";
-import { A as F, C as ae, D as oe, E as se, O as I, S as ce, 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-S7dLsYRZ.js";
+import { A as F, C as ae, D as oe, E as se, O as I, S as ce, 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-TdT_5iUc.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 L, d as ot, 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-XLlxfDgq.js";
-import { a as gt, i as _t, n as vt } from "./field-blur-context-Cwt4TuBq.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-CIMo4F9q.js";
+import { D as nt, E as rt, N as it, O as at, c as L, d as ot, 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-BozV6Ikw.js";
+import { a as gt, i as _t, n as vt } from "./field-blur-context-6McYOnM8.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-C09bJphe.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 "./stored-language-Beyj2ult.js";
-import { a as Bt } from "./translator-CBgIb3zP.js";
+import "./stored-language-Cb9FMEwk.js";
+import { a as Bt } from "./translator-BnQXtpSZ.js";
 import { h as Vt } from "./get-CTzJAwfc.js";
 import { t as Ht } from "./isEmpty-F_g3jLf8.js";
-import { t as R } from "./use-material-translation-DWWeeg-B.js";
-import { i as Ut, r as Wt, t as Gt } from "./button-BRUaHD8z.js";
-import { t as z } from "./icon-button-DSC2-IAG.js";
+import { t as R } from "./use-material-translation-pLgSqqLw.js";
+import { i as Ut, r as Wt, t as Gt } from "./button-BWcr2b49.js";
+import { t as z } from "./icon-button-CtG3Snfm.js";
 import { t as Kt } from "./use-ssr-media-query-C6M5m8sf.js";
 import { n as qt, t as Jt } from "./util-4heV2LPI.js";
 import { t as Yt } from "./useEvent-2fKq-6w8.js";
-import { f as Xt } from "./field-blur-5uRDFHvB.js";
+import { f as Xt } from "./field-blur-47zmuDkH.js";
 import { c as Zt, i as Qt, l as $t, o as en, r as tn, s as nn, t as rn } from "./dist-C3GR7kJd.js";
 import { i as an } from "./toggle-group-BkH23Jk4.js";
-import { a as on, i as sn, o as cn } from "./escape-owner-B9eCwjLw.js";
+import { a as on, i as sn, o as cn } from "./escape-owner-Bu-aDEEO.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-DneTrtNj.js";
-import { n as hn, t as gn } from "./icon-badge-Dh6-FNOF.js";
+import { n as fn, r as pn, t as mn } from "./chip-CmLW6ZrT.js";
+import { n as hn, t as gn } from "./icon-badge-CRFGIQPX.js";
 import { r as _n } from "./use-csp-nonce-ZKs9k-ov.js";
-import { t as vn } from "./empty-state-Dsf6R-Zo.js";
+import { t as vn } from "./empty-state-gzBPimAo.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";
@@ -11311,7 +11311,7 @@ var eC = (e = {}) => jn({
 		let [{ default: t }, { lowlight: n }, { richCodeBlock: r }] = await Promise.all([
 			import("./dist-CRMFGjng.js"),
 			import("./lowlight-OtcjU2Sa.js"),
-			import("./rich-code-block-BwvCXPqq.js")
+			import("./rich-code-block-oTgL-s4W.js")
 		]);
 		return [r(t, {
 			lowlight: n,

package/dist/{use-heading-spy-C5LXtA8Z.js → use-heading-spy-C9-A2md2.js}

@@ -1,4 +1,4 @@
-import { r as e } from "./i18n-provider-DPM_ALQ4.js";
+import { r as e } from "./i18n-provider-Ang2f31m.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-DWWeeg-B.js → use-material-translation-pLgSqqLw.js}

@@ -1,5 +1,5 @@
-import { r as e } from "./i18n-provider-DPM_ALQ4.js";
-import { t } from "./translate-material-DEUlaL_1.js";
+import { r as e } from "./i18n-provider-Ang2f31m.js";
+import { t } from "./translate-material-D6KCK21i.js";
 import { useCallback as n } from "react";
 //#region lib/i18n/use-material-translation.ts
 function r() {

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

@@ -244,8 +244,10 @@ with a `select` column and `actions`, the toolbar keeps its band while
 nothing is selected, so the first selection does not move the rows (on a
 wide screen; on a phone the extra lines still push them down). Below 768px
 the declarative `bulkActions` fold past the third into a "More" menu in the
-toolbar too, so a list that stays a table on a phone (`layout="table"`) shows
-three actions and "More", as the cards and tiles do (#1797).
+toolbar (a `ServerTable` without `filter`, or with the facets panel) and in a
+phone's second row (#1719), as the cards and tiles do (#1797). The
+[selection band](#the-selection-band) keeps one action and puts the rest in
+"More".
 
 ```tsx
 <DataTable
@@ -293,6 +295,33 @@ press elsewhere is never pulled back. The footer's selected count is a polite
 status, so the first selection is announced ("1 row selected") when its bar
 shows up.
 
+### The selection band
+
+With `bulkActions` and a `filter` (not `variant: 'facets'`), the first
+selected row turns the band that holds the filter bar into a selection bar, in
+place and on the same row: "N selected", the bulk actions, and a tonal
+"Cancel" that clears the selection (#1718). The search and the page's
+`actions` stay mounted, hidden (`invisible`, `inert`) and keep their size, so
+the table does not move; clearing the selection brings them back. The bar's
+height is the row's (40px, 44px on a coarse pointer). From 768px every
+declarative action keeps its button; below it the bar is one row: the first
+action keeps its button, the others go into "More" (an icon, still named),
+and "Cancel" is an icon (its name and tooltip stay). Bulk actions written as a
+function are rendered as they are, in the same place.
+
+After "Cancel" the focus goes back to the control that started the selection
+(the row's or the header's checkbox) when it is still on the page, else to the
+list; a selection cleared another way (a bulk action's `selection.clear()`, a
+new query) keeps its own focus rule. While rows are selected the search is
+`inert`, so `filterRef.focus()` does nothing: cancel the selection first. The count is told once, politely, by the
+footer's status ("N rows selected"); the bar's own count is plain text. The
+cards' and tiles' list bar leaves its count and "Clear selection" to the bar.
+A phone's second row of a list in cards or tiles with `actions` (#1719) is the
+selection bar there, as before. Without `filter` (or with the facets panel) the
+band has no filter bar to replace, and the bulk actions stay in the table's
+toolbar. Text keys: `material.server-table.bulk-selected`, `bulk-cancel`,
+`bulk-bar` (English and French).
+
 ### Focus after a bulk action
 
 When a bulk action clears the selection, its buttons unmount and the focus
@@ -410,7 +439,9 @@ grow the toolbar. Without the `select` column, or without `actions`, no band
 is kept above the table. `reserveActions={false}` keeps none either: the bar
 arrives on the first selection with a short grow (none under reduced motion),
 and the rows move down by its height. `ServerTable` passes `false`, so its
-bulk bar leaves no empty row under the band while nothing is selected.
+bulk bar leaves no empty row under the band while nothing is selected. With
+`filter` it has no toolbar row at all: the band's selection bar holds the bulk
+actions ([the selection band](#the-selection-band)).
 
 ```tsx
 <DataTable
@@ -843,7 +874,8 @@ export default function Students() {
     onRetry={() => fetcher.reload()}
   />
   ```
-- **Selection.** With `bulkActions(ids, selection)`, rows are selectable;
+- **Selection.** With `bulkActions(ids, selection)`, rows are selectable
+  (see [the selection band](#the-selection-band) for where the bulk actions show);
   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
@@ -1036,7 +1068,8 @@ rows (the bulk bar is not drawn under it). With the declarative list form of
 (2)", named "Publish 2 rows"), hidden at 0 rows; the buttons wrap onto a second
 line rather than scroll, and past the third action the rest go into a "More"
 menu (`material.server-table.bulk-more`), each item keeping its count (the same
-fold applies below 768px to every layout, a phone table included). From
+fold applies below 768px to every layout in the toolbar and in this row; the
+[selection band](#the-selection-band) of a list with `filter` keeps one action). From
 768px the buttons read "Label (n)" as before. When the focused button
 disappears the focus goes to the next one, else to "More", else to "Select all"; an action past `max` shows its notice there (an inline text, or a disabled More item). The function
 form (`bulkActions={(ids) => node}`) is drawn whole in the row, so keep it to

package/docs/guides/backgrounds.md

@@ -545,7 +545,9 @@ good.
 - The server renders every glyph. The drop happens after the first measure, on the client, in one frame (boxes read
   before any write), so the markup never differs between server and client.
 - A dropped glyph fades out in 150 ms (none under `prefers-reduced-motion`) and fades back when the content moves
-  away. It runs again on resize and when the content changes.
+  away. It runs again on resize and when the content changes. A glyph the first pass drops is hidden at once: the fade
+  starts a frame later (`data-settled` on the scene), so no glyph is seen over a paragraph for the length of a fade on
+  a reload.
 - The open areas keep their glyphs; the space behind and between cards is empty. `keepClear={false}` on an `AuthCard`
   lets the glyphs run under the card.
 - **`keepClear="gaps"`** (on `ActivityLayout` and `AuthCard`, opt-in; `true` stays the default) lets a glyph stay between

package/docs/guides/cards-and-tiles.md

@@ -144,6 +144,9 @@ is not `focusable`). On a narrow list (under 30rem) the bar stays on one row and
 Clear shrinks to an icon button; its label stays its accessible name, and it has
 a tooltip. Do not add your own in `actions`: that one is the bulk bar's.
 Once a bulk action clears the selection and the focus is lost, the list takes it.
+In a `ServerTable` with `filter` and `bulkActions`, the band's own selection bar
+tells the count and has "Cancel" (#1718), so the list bar leaves its count and
+"Clear selection" out ([the selection band](../components/data-table-filter-and-lists.md#the-selection-band)).
 
 Inside a `ServerTable` with `filter` and `actions`, below 768px, the bar has no
 row of its own: its "Select all" (with a short visible label, "Select all"),

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

@@ -18,15 +18,20 @@
 		visibility: hidden;
 	}
 
-	/* A shape over the page's text, controls or surfaces (cards, tables, lists) fades out and comes back once
-	 * clear (watch-content.ts): it is hidden, never moved. A compound body (the
-	 * moon, the planet, the eclipse: `.pt.mg`) is hidden whole, with its halo
-	 * (`.pt.mh`). The scene stays invisible until the first check, so nothing
-	 * flashes over the content. */
-	[data-keep-inside] .mo > *,
-	[data-keep-inside] .pt,
-	[data-slot="activity-layout-backdrop"] [data-background] .mo > *,
-	[data-slot="activity-layout-backdrop"] [data-background] .pt {
+	/* A shape over the page's text, controls or surfaces (cards, tables, lists)
+	 * fades out and comes back once clear (watch-content.ts): it is hidden,
+	 * never moved. A compound body (the moon, the planet, the eclipse: `.pt.mg`)
+	 * is hidden whole, with its halo (`.pt.mh`). The scene stays invisible until
+	 * the first check, so nothing flashes over the content. The fade waits for
+	 * `data-settled`, set a frame after the first pass: a shape that pass drops
+	 * is hidden at once, never seen fading out over the text on a reload. */
+	[data-keep-inside][data-settled] .mo > *,
+	[data-keep-inside][data-settled] .pt,
+	[data-slot="activity-layout-backdrop"]
+		[data-background][data-settled]
+		.mo
+		> *,
+	[data-slot="activity-layout-backdrop"] [data-background][data-settled] .pt {
 		transition: opacity 150ms ease;
 	}
 	/* Important: a preset sets its own opacity on a body (`.md`, the dark

package/lib/components/ui/layout/auth-card/auth-card-backdrop.css

@@ -13,8 +13,8 @@
 		visibility: hidden;
 	}
 	/* A shape over the card or the brand row fades out (watch-content.ts). */
-	[data-slot="auth-card-backdrop"] [data-background] .mo > *,
-	[data-slot="auth-card-backdrop"] [data-background] .pt {
+	[data-slot="auth-card-backdrop"] [data-background][data-settled] .mo > *,
+	[data-slot="auth-card-backdrop"] [data-background][data-settled] .pt {
 		transition: opacity 150ms ease;
 	}
 	[data-slot="auth-card-backdrop"] [data-background] .mo > [data-hidden],

package/package.json

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