@nxgt/material 3.15.0 → 3.17.0

package/dist/pdf-reader.js

@@ -1,3 +1,3 @@
-import { t as e } from "./public-Bj3rGSfS.js";
+import { t as e } from "./public-B4lpmahC.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-GV4Ukoe2.js";
-import { t } from "./translate-material-C0aOnHpZ.js";
+import { r as e } from "./i18n-provider-WReTVxE3.js";
+import { t } from "./translate-material-DZ_i8xJx.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-Bj3rGSfS.js → public-B4lpmahC.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-YHZJjDrI.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-BEyP-A0J.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-CVQBYp4K.js";
-import { t as N } from "./use-material-translation-DGeVp-qP.js";
-import { t as _e } from "./button-BrgyWw7T.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-CFIn1NPR.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-CL6mNhgT.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-DCZxamGy.js";
+import { t as N } from "./use-material-translation-C4ysFJtw.js";
+import { t as _e } from "./button-DOYHfcMJ.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-ZtqqpX0S.js";
+import { n as Ee, t as De } from "./empty-state-BNljKZLV.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-RN-EpeTA.js → rich-code-block-CvqJmvuT.js}

@@ -1,7 +1,7 @@
 import { t as e } from "./tooltip-CkttDIab.js";
-import { c as t, n, t as r } from "./dropdown-menu-BEyP-A0J.js";
-import { t as i } from "./use-material-translation-DGeVp-qP.js";
-import { a, i as o, n as s, o as c, t as l } from "./code-language-items-D1lpNQ6J.js";
+import { c as t, n, t as r } from "./dropdown-menu-CL6mNhgT.js";
+import { t as i } from "./use-material-translation-C4ysFJtw.js";
+import { a, i as o, n as s, o as c, t as l } from "./code-language-items-DOr9J9yu.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-DjY7_8TH.js").then((e) => e.n).then((e) => ({ default: e.CodeEditor })));
+var N = x(() => import("./code-editor-BqeS_XMJ.js").then((e) => e.n).then((e) => ({ default: e.CodeEditor })));
 function P() {
 	let { t: e } = i();
 	return /* @__PURE__ */ T("div", {

package/dist/{sortable-provider-Iej7IS4n.js → sortable-provider-DE692phf.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-DGeVp-qP.js";
+import { t as n } from "./use-material-translation-C4ysFJtw.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-BwWDXIbg.js → spinner-CGgOgUCe.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-DGeVp-qP.js";
+import { t as n } from "./use-material-translation-C4ysFJtw.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-BAAP7qS3.js → stored-language-DiCe2ZcR.js}

@@ -1275,6 +1275,7 @@ var t = {
 			bar: {
 				label: "Filters",
 				search: "Search",
+				"search-min": "Type at least {min, plural, one {# character} other {# characters}} to search",
 				active: "Active filters",
 				locked: "Locked",
 				"locked-reason": "Locked: {reason}",
@@ -3874,6 +3875,7 @@ var t = {
 			bar: {
 				label: "Filtres",
 				search: "Rechercher",
+				"search-min": "Saisissez au moins {min, plural, one {# caractère} other {# caractères}} pour rechercher",
 				active: "Filtres actifs",
 				locked: "Verrouillé",
 				"locked-reason": "Verrouillé : {reason}",

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-DGeVp-qP.js";
+import { t as s } from "./use-material-translation-C4ysFJtw.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-8zHeXSD1.js";
+import { t as p } from "./theme-toggle-O6z6PokP.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-8zHeXSD1.js → theme-toggle-O6z6PokP.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./use-material-translation-DGeVp-qP.js";
+import { t as e } from "./use-material-translation-C4ysFJtw.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-CVQBYp4K.js → toolbar-items-DCZxamGy.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-BEyP-A0J.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-CL6mNhgT.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-DGeVp-qP.js";
+import { t as xe } from "./use-material-translation-C4ysFJtw.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-C0aOnHpZ.js → translate-material-DZ_i8xJx.js}

@@ -1,5 +1,5 @@
-import "./stored-language-BAAP7qS3.js";
-import { a as e, r as t } from "./translator-BU07gNva.js";
+import "./stored-language-DiCe2ZcR.js";
+import { a as e, r as t } from "./translator-Ch1dEqFf.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-BU07gNva.js → translator-Ch1dEqFf.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-BAAP7qS3.js";
+import { a as t, i as n, r, t as i } from "./stored-language-DiCe2ZcR.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-CoXmJCkr.js → use-chat-composer-ByWwRuYg.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-YHZJjDrI.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-CFIn1NPR.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-BEyP-A0J.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-CL6mNhgT.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-CVQBYp4K.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-DCZxamGy.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-BAAP7qS3.js";
-import { a as kt } from "./translator-BU07gNva.js";
+import "./stored-language-DiCe2ZcR.js";
+import { a as kt } from "./translator-Ch1dEqFf.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-DGeVp-qP.js";
-import { t as Mt } from "./spinner-BwWDXIbg.js";
+import { t as L } from "./use-material-translation-C4ysFJtw.js";
+import { t as Mt } from "./spinner-CGgOgUCe.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-BrgyWw7T.js";
+import { a as Pt, i as Ft, n as It, r as Lt, t as Rt } from "./button-DOYHfcMJ.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-BZu-bvAJ.js";
-import { n as dn, t as fn } from "./icon-badge-C0TGvF9o.js";
+import { n as cn, r as ln, t as un } from "./chip-C8MB2xzb.js";
+import { n as dn, t as fn } from "./icon-badge-lfAUxNe8.js";
 import { r as pn } from "./use-csp-nonce-ZKs9k-ov.js";
-import { t as mn } from "./empty-state-ZtqqpX0S.js";
+import { t as mn } from "./empty-state-BNljKZLV.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-RN-EpeTA.js")
+			import("./rich-code-block-CvqJmvuT.js")
 		]);
 		return [r(t, {
 			lowlight: n,
@@ -12053,35 +12053,35 @@ function WC({ shortcut: e, loading: t, filled: n, disabled: r, onClear: i }) {
 }
 //#endregion
 //#region lib/components/ui/fields/search-field/search-field.tsx
-function GC({ id: e, value: t, defaultValue: r = "", onChange: i, onValueChange: a, debounceMs: o = 0, loading: s = !1, placeholder: c, label: l, helperText: u, error: d, disabled: f, required: p, name: m, className: h, onKeyDown: g, shortcut: _, ...v }) {
-	let { t: y } = L(), b = eo(), x = eo(), [S, C] = W(String(r ?? "")), w = t !== void 0, T = w ? String(t ?? "") : S, E = Gt(a), D = a !== void 0, O = H(() => o ? Po((e) => E.current?.(e), o) : null, [o, E]);
-	V(() => () => O?.cancel(), [O]);
-	let k = (e, t = !1) => {
-		if (w || C(e), D) {
-			if (t || !O) {
-				O?.cancel(), E.current?.(e);
+function GC({ id: e, value: t, defaultValue: r = "", onChange: i, onValueChange: a, onClear: o, debounceMs: s = 0, loading: c = !1, placeholder: l, label: u, helperText: d, error: f, disabled: p, required: m, name: h, className: g, onKeyDown: _, shortcut: v, ...y }) {
+	let { t: b } = L(), x = eo(), S = eo(), [C, w] = W(String(r ?? "")), T = t !== void 0, E = T ? String(t ?? "") : C, D = Gt(a), O = a !== void 0, k = H(() => s ? Po((e) => D.current?.(e), s) : null, [s, D]);
+	V(() => () => k?.cancel(), [k]);
+	let A = (e, t = !1) => {
+		if (T || w(e), O) {
+			if (t || !k) {
+				k?.cancel(), D.current?.(e);
 				return;
 			}
-			O(e);
+			k(e);
 		}
-	}, A = () => {
-		k("", !0), i?.({
+	}, ee = () => {
+		A("", !0), o?.(), i?.({
 			target: { value: "" },
 			currentTarget: { value: "" }
 		});
-	}, ee = e ?? b, j = po(v["aria-describedby"], !!u && x);
+	}, j = e ?? x, M = po(y["aria-describedby"], !!d && S);
 	return /* @__PURE__ */ K("div", {
 		"data-slot": "search-field",
-		"data-pw": m ?? "search-field",
-		className: n("grid w-full content-start gap-1.5", h),
+		"data-pw": h ?? "search-field",
+		className: n("grid w-full content-start gap-1.5", g),
 		children: [
-			l && /* @__PURE__ */ G(dt, {
-				htmlFor: ee,
-				withAsterisk: p,
-				children: l
+			u && /* @__PURE__ */ G(dt, {
+				htmlFor: j,
+				withAsterisk: m,
+				children: u
 			}),
 			/* @__PURE__ */ K(lv, {
-				"data-disabled": f || void 0,
+				"data-disabled": p || void 0,
 				children: [
 					/* @__PURE__ */ G(dv, {
 						align: "inline-start",
@@ -12093,39 +12093,39 @@ function GC({ id: e, value: t, defaultValue: r = "", onChange: i, onValueChange:
 						})
 					}),
 					/* @__PURE__ */ G(mv, {
-						...v,
-						id: ee,
-						name: m,
+						...y,
+						id: j,
+						name: h,
 						type: "search",
-						value: T,
-						disabled: f,
-						required: p,
-						"aria-invalid": d || void 0,
-						"aria-busy": s || void 0,
-						"aria-describedby": j,
-						"aria-keyshortcuts": _,
-						placeholder: c ?? y("material.search-field.placeholder", "Search"),
+						value: E,
+						disabled: p,
+						required: m,
+						"aria-invalid": f || void 0,
+						"aria-busy": c || void 0,
+						"aria-describedby": M,
+						"aria-keyshortcuts": v,
+						placeholder: l ?? b("material.search-field.placeholder", "Search"),
 						className: "[&::-webkit-search-cancel-button]:hidden",
 						onChange: (e) => {
-							k(e.target.value), i?.(e);
+							A(e.target.value), i?.(e);
 						},
 						onKeyDown: (e) => {
-							e.key === "Escape" && T && (e.preventDefault(), A()), g?.(e);
+							e.key === "Escape" && E && (e.preventDefault(), ee()), _?.(e);
 						}
 					}),
 					/* @__PURE__ */ G(WC, {
-						shortcut: _,
-						loading: s,
-						filled: T !== "",
-						disabled: f,
-						onClear: A
+						shortcut: v,
+						loading: c,
+						filled: E !== "",
+						disabled: p,
+						onClear: ee
 					})
 				]
 			}),
-			u && /* @__PURE__ */ G(ut, {
-				id: x,
-				error: d,
-				children: u
+			d && /* @__PURE__ */ G(ut, {
+				id: S,
+				error: f,
+				children: d
 			})
 		]
 	});

package/dist/{use-heading-spy-DETdqnB6.js → use-heading-spy-S6PT8wPG.js}

@@ -1,4 +1,4 @@
-import { r as e } from "./i18n-provider-GV4Ukoe2.js";
+import { r as e } from "./i18n-provider-WReTVxE3.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-DGeVp-qP.js → use-material-translation-C4ysFJtw.js}

@@ -1,5 +1,5 @@
-import { r as e } from "./i18n-provider-GV4Ukoe2.js";
-import { t } from "./translate-material-C0aOnHpZ.js";
+import { r as e } from "./i18n-provider-WReTVxE3.js";
+import { t } from "./translate-material-DZ_i8xJx.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

@@ -847,7 +847,8 @@ Its props are `ServerTableProps<T>`; `filter` is a `ServerTableFilter`,
 | `rows`, `totalCount`, `pageInfo` | the connection's page | — | `pageInfo: { endCursor?, hasNextPage }`; `rows` stable per answer |
 | `pageSize` | `number` | — | the footer's range ("21–40 of 45") |
 | `getRowId` | `(row) => string` | — | the selection's key |
-| `filter` | `ServerTableFilter` | — | `{ model, locked?, fieldProps?, variant?, sheetTrigger?, quick?, density?, shortcuts?, previewCount?, counts?, liveDelayMs?, label?, searchLabel?, searchPlaceholder? }` |
+| `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>`) |
 | `actions` | `ReactNode` | — | the page's actions, at the band's end |
 | `sorting` | `createSorting(…)` | — | headers sorted from the URL |
@@ -1163,10 +1164,41 @@ Its props are `FilterQueryProps`, its `variant` a `FilterQueryVariant`
 overload per kind, so `<Filter variant="bar" />` does not compile).
 `query` / `defaultQuery` + `onQueryChange` carry the user's query, never a
 locked condition; `density` (a `FilterDensity`: `'comfortable'` or
-`'compact'`), `label`, `searchLabel`, `searchPlaceholder` and `liveDelayMs`
-(200 ms) tune it. A locked chip is a focusable group named by its text ("Year is 2026-2027"), with "Locked: <reason>" as its description. The other variants
+`'compact'`), `label`, `searchLabel`, `searchPlaceholder`, `liveDelayMs`
+(200 ms), `searchApply` and `searchMinLength` tune it. A locked chip is a focusable group named by its text ("Year is 2026-2027"), with "Locked: <reason>" as its description. The other variants
 and `FilterProps` are unchanged.
 
+#### The search: apply on Enter, a minimum length
+
+By default the search is live: the text reaches `onQueryChange` (and a
+`ServerTable`'s URL) `liveDelayMs` after the last keystroke. A list whose
+every request is costly or audited can hold it back:
+
+```tsx
+<ServerTable
+  filter={{ model, searchApply: 'enter', searchMinLength: 3 }}
+  {...props}
+/>
+```
+
+- `searchApply: 'live' | 'enter'` (default `'live'`). With `'enter'`, typing
+  changes nothing until Enter is pressed. Clearing the field (the ✕, Escape,
+  or emptying it by hand then Enter) applies at once. The URL is written only
+  when the search is applied, so a half-typed query never reaches the router
+  or the loader.
+- `searchMinLength` (default `0`, in both modes): below it nothing is applied,
+  and a short hint (`material.filter.bar.search-min`, "Type at least 3
+  characters to search") is shown under the field and announced politely. An
+  empty field is always allowed, because it clears. The length counts the
+  trimmed text.
+- Both go on `Filter` (`variant="bar"` and `"facets"`) and on
+  `ServerTable`'s `filter`. On a phone the search sits beside "Filters (N)"
+  and follows them the same way.
+- A `text` field (an IPP number, a city) inherits `searchApply`, with no
+  option of its own: its editor (the chip's popover, the facets panel) holds
+  the text until Enter, which applies at once. The phone sheet and a staged
+  panel keep their own Apply. `searchMinLength` concerns the search field only.
+
 #### The model, the query and the URL
 
 Declare the fields once, in a `.ts` module with no JSX, so the route's loader

package/docs/components/form-fields.md

@@ -609,6 +609,7 @@ import { SearchField } from '@nxgt/material/components';
 | Prop | Type | Default | Effect |
 | --- | --- | --- | --- |
 | `onValueChange` | `(value: string) => void` | — | the text, debounced when `debounceMs` is set; the latest `onValueChange` is called when the delay ends, so an inline arrow is safe |
+| `onClear` | `() => void` | — | the clear button or Escape emptied the field, after `onValueChange('')`; an input emptied by typing does not call it |
 | `debounceMs` | `number` | `0` | delay before `onValueChange`; `0` calls it on every key |
 | `loading` | `boolean` | `false` | spinner in place of the clear button |
 | `shortcut` | `string` | — | a hint for the key that focuses the field, e.g. `"/"`: a `Kbd` at the end while the field is empty, not loading and not disabled (`aria-hidden`) and `aria-keyshortcuts` on the input. It binds no key; your page listens and focuses the field |

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

@@ -81,6 +81,9 @@ phone's menu sheet pad clear of `env(safe-area-inset-*)`, as classes; see the
 | `menuOpen` / `onMenuOpenChange` | `boolean` / `(open: boolean) => void` | — | control the phone's menu sheet; it still closes by itself when a link in it is followed or the location changes (see the [app shell guide](../guides/app-shell.md#activitylayout)) |
 | `titleAs` | `'h1'` … `'h6'` \| `'div'` | `'h1'` | `ActivityContent`: the title's heading level |
 | `inset` | `boolean` | `false` | `ActivityContent`: pads the content 1rem on each side. Off, it lines up with the app bar and the cards |
+| `width` | `'full' \| 'form' \| 'reading'` | `'full'` | `ActivityContent`: caps the main column at 48rem (`'form'`) or 72ch (`'reading'`), the side panel right beside it |
+| `aside`, `asideLabel` / `asideLabelledBy` | `ReactNode`, `string` | — | `ActivityContent`: a side panel, a named `complementary` landmark, beside the content from 1280px (CSS only), stacked below; sticky under the app bar |
+| `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) |

package/docs/guides/app-shell.md

@@ -799,6 +799,15 @@ export function BoardShell({ items }: { items: MenuItem[] }) {
 | `hideHeader` | `boolean` | `false` | No header card |
 | `titleAs` | `'h1'` … `'h6'` \| `'div'` | `'h1'` | The title's element: the screen's heading, `'h2'` under a heading of yours, `'div'` for none |
 | `inset` | `boolean` | `false` | Pads the content 1rem on each side. Off, it lines up with the app bar and the cards |
+| `width` | `'full'` \| `'form'` \| `'reading'` | `'full'` | Caps the main column: `'form'` 48rem, `'reading'` 72ch. The header card keeps the full width |
+| `aside` | `ReactNode` | — | A side panel: beside the content from `asideFrom`, stacked below it |
+| `asideLabel` / `asideLabelledBy` | `string` | — | The panel's accessible name (`aria-label`), or the id of a heading inside it (`aria-labelledby`). One of them is needed |
+| `asideSide` | `'start'` \| `'end'` | `'end'` | Which side of the content the panel sits on, wide |
+| `asideWidth` | `'sm'` \| `'md'` \| `'lg'` \| a CSS length | `'md'` | 16, 20 or 24rem; `'md'` reads the `--nxgt-aside-width` token (20rem) |
+| `asideFrom` | `'lg'` \| `'xl'` \| `'2xl'` | `'xl'` | The viewport width (1024, 1280 or 1536px) from which the panel is beside the content |
+| `asideSticky` | `boolean` | `true` | Keeps the panel under the app bar while the page scrolls; it scrolls inside itself when taller than the window |
+| `asideStack` | `'before'` \| `'after'` | `'after'` | Where the panel goes below `asideFrom`, in the DOM and on screen |
+| `asideClassName` | `string` | — | Classes for the panel |
 
 ```tsx
 import { ActivityContent, Button } from '@nxgt/material/components';
@@ -819,6 +828,49 @@ export function InvoicesPage() {
 The header card wraps: on a narrow screen the actions go under the title
 instead of squeezing it, and a long title wraps rather than scrolling.
 
+### A side panel and a readable width
+
+A record's alerts and key facts, a dashboard's counts, a form's help: pass them
+as `aside`. From `asideFrom` (`'xl'`, a 1280px window) the panel sits beside the
+main column and sticks under the app bar; below it, the panel stacks after the
+content (`asideStack="before"` puts it first). The switch is CSS only: the
+server's HTML and a phone's first paint are already right, and no JavaScript
+decides the layout.
+
+```tsx
+<ActivityContent
+  title="New visit"
+  width="form"
+  aside={<DuplicateHints />}
+  asideLabel="Possible duplicates"
+>
+  <VisitForm />
+</ActivityContent>
+```
+
+- **Landmark.** The panel is an `<aside>`, a `complementary` landmark: name it
+  with `asideLabel`, or with `asideLabelledBy` (the id of its heading). Its
+  content is the panel's own; give it one `h2` when it has a heading.
+- **Sticky, in every scroll mode.** With `scroll="document"` the panel sticks
+  under the app bar (the bar's gutter, its `--nxgt-header-height` and 0.5rem);
+  with `scroll="container"` it sticks to the top of the content region. It is as
+  tall as the window at most and scrolls inside itself, and becomes focusable
+  (`tabindex="0"`) only while it does, so a keyboard reaches what overflows. A
+  `scroll="document"` page needs no `overflow` on any ancestor of the screen
+  (see [the troubleshooting entry](../troubleshooting.md#the-side-panel-does-not-stick)).
+- **A capped column sits beside its panel.** `width="form"` or `"reading"` caps
+  the main column and the pair stays start-aligned: at 1920px the panel is 1rem
+  from the fields, not at the window's far edge. The header card above keeps
+  the full width. `width` also works without a panel.
+- **The breakpoint is the window's.** `asideFrom` follows the viewport, not the
+  content column, which the sidebar and the gutters narrow a little: pick `'lg'`
+  for a panel on a smaller window, `'2xl'` to keep it stacked on all but the
+  widest.
+- **A size container.** With a panel, the main column is an `@container`, so a
+  `ResponsiveGrid` inside it follows the column's width.
+- **Width token.** `--nxgt-aside-width` changes `asideWidth="md"` (20rem) app-wide;
+  any CSS length goes in `asideWidth` for one screen.
+
 ## Breadcrumbs
 
 `AppBreadcrumb` (rendered by `ActivityLayout`) starts with a home icon linking

package/docs/guides/i18n.md

@@ -275,7 +275,7 @@ children, `Spinner`'s and `ScrollToTop`'s `aria-label`, `LocationMarker`'s
 
 `Filter variant="bar"` words everything through its own keys,
 overridable like the rest: `material.filter.bar.*` (`label` "Filters" for its
-`search` landmark, `search`, `active` "Active filters" for the chip list,
+`search` landmark, `search`, `search-min` "Type at least {min} character(s) to search" (the hint under the search while it is shorter than `searchMinLength`; a plural), `active` "Active filters" for the chip list,
 `locked` "Locked" and `locked-reason` "Locked: {reason}" (a locked
 chip's description), and a chip's words: `chip` "{field} {operator}
 {value}", `chip-plain`, `remove` "Remove {field}: {value}", `quick-active`;

package/docs/guides/server-lists-url.md

@@ -144,6 +144,12 @@ export default function Students({ loaderData }: Route.ComponentProps) {
   never leaves you on a page that no longer exists. `serializeFilterQuery`
   copies `into`, it does not change it, and it replaces the search, every `f=`,
   every aliased param and the `reset` ones.
+- **The search on Enter.** Every applied edit is one URL write, hence one
+  loader call. `searchApply: 'enter'` (on `Filter`, or `ServerTable`'s
+  `filter`) writes the search only when Enter is pressed, and
+  `searchMinLength` keeps a too-short text out of the URL; clearing the field
+  writes at once. Typing in between writes nothing, so a loader whose every
+  read is audited is called once per search.
 - **`resultCount` and `loading`** drive the bar's one live region: it waits
   for `loading` to end, then tells the count once.
 - **A readable URL.** `` `?${written}` `` prints `f=level:in:CE1,CE2`. Passing
@@ -151,6 +157,12 @@ export default function Students({ loaderData }: Route.ComponentProps) {
   re-encodes them (`f=level%3Ain%3ACE1%2CCE2`), which parses back the same. To
   compare a URL you wrote with the one the router hands back, use
   `paramsKey(a) === paramsKey(b)`.
+- **The same options on both sides.** If the loader parses with
+  `keepKnownValues: true` (or writes `encoding: 'standard'`), give
+  `ServerTable` the same: `filter={{ model, codec: { keepKnownValues: true,
+  encoding: 'standard' } }}`. Without it the page drops a condition such as
+  `f=level:in:a,zzz` whole and shows no chip, while the loader keeps `a` and
+  filters the rows.
 - **Standard encoding.** If your list URLs are already written the
   `URLSearchParams` way (`status=a%2Cb`), pass `encoding: 'standard'` to
   `serializeFilterQuery` (and to `tableFilters` / `withoutFilters`): the params

package/docs/guides/theming.md

@@ -625,6 +625,7 @@ centre line from `md` (48rem) up:
 | Token | Default | Reads |
 | --- | --- | --- |
 | `--nxgt-header-height` | `4rem` | the app bar (all widths) and the rail's header (`md` and up) |
+| `--nxgt-aside-width` | `20rem` | an `ActivityContent` side panel with `asideWidth="md"` (the default) |
 
 ```css
 :root {

package/docs/troubleshooting.md

@@ -1338,6 +1338,30 @@ top (`align="start"`).
 <ActivityLayout items={items} align="center">…</ActivityLayout>
 ```
 
+### The side panel does not stick
+
+**When:** an `ActivityContent` `aside` scrolls away with the page instead of
+staying under the app bar, or it is not beside the content at 1280px.
+**Why:** `position: sticky` sticks inside its nearest scrolling ancestor, and
+any ancestor with an `overflow` other than `visible` (`overflow-hidden`,
+`overflow-auto`, `overflow-clip`; a `PaneLayout`'s root has `overflow-hidden`)
+becomes that scroller, which does not scroll, so the panel never moves. A
+wrapper of yours around the screen, or an `ActivityLayout` with
+`scroll="container"` where you meant `"document"`, does the same. Below
+`asideFrom` (1280px by default) the panel is stacked and not sticky on
+purpose, and the breakpoint is the window's width, not the column's.
+**Fix:** take the `overflow` off every ancestor between `ActivityLayout` and
+`ActivityContent`, or move it onto an element inside the screen; use
+`scroll="document"` (the default). Find the culprit in the console:
+
+```js
+for (let el = document.querySelector('[data-slot="activity-content-aside"]').parentElement; el; el = el.parentElement)
+  if (getComputedStyle(el).overflowY !== 'visible') console.log(el);
+```
+
+With `scroll="container"` the region itself is the scroller, and the panel
+sticks to its top: that is expected.
+
 ### axe reports `target-size` on a control under a form's sticky actions
 
 **When:** since the form's actions stick to the bottom (see above), axe's

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nxgt/material",
-	"version": "3.15.0",
+	"version": "3.17.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.31.0",
+		"@nxgt/material-core": "^0.32.0",
 		"@base-ui/react": "^1.6.0",
 		"@dnd-kit/core": "^6.3.1",
 		"@dnd-kit/sortable": "^10.0.0",