@nxgt/material 3.26.1 → 3.28.0

package/dist/pdf-reader.js

@@ -1,3 +1,3 @@
-import { t as e } from "./public-QUiFLEoj.js";
+import { t as e } from "./public-BeM7-x-m.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-BDi9-6DO.js";
-import { t } from "./translate-material-O-uasx3u.js";
+import { r as e } from "./i18n-provider-BfyDgd2o.js";
+import { t } from "./translate-material-BneuBHXZ.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-QUiFLEoj.js → public-BeM7-x-m.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-Crvg-MN5.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-B71aggp0.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-DlioFgpM.js";
-import { t as N } from "./use-material-translation-B4Frk3vC.js";
-import { t as _e } from "./button-Cr9GIIj4.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-LtXwv6N3.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-ppMPD12c.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-C1GdN9P9.js";
+import { t as N } from "./use-material-translation-Cqcwkuur.js";
+import { t as _e } from "./button-BjIg_Lz6.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-8LddxMU4.js";
+import { n as Ee, t as De } from "./empty-state-X_nikpBS.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-CjD54THr.js → rich-code-block-B4TIjZRA.js}

@@ -1,7 +1,7 @@
 import { t as e } from "./tooltip-CkttDIab.js";
-import { c as t, n, t as r } from "./dropdown-menu-B71aggp0.js";
-import { t as i } from "./use-material-translation-B4Frk3vC.js";
-import { a, i as o, n as s, o as c, t as l } from "./code-language-items-DCOQnaCo.js";
+import { c as t, n, t as r } from "./dropdown-menu-ppMPD12c.js";
+import { t as i } from "./use-material-translation-Cqcwkuur.js";
+import { a, i as o, n as s, o as c, t as l } from "./code-language-items-C_UeMQMm.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-DGIjL8Hr.js").then((e) => e.n).then((e) => ({ default: e.CodeEditor })));
+var N = x(() => import("./code-editor-2EU-q9FV.js").then((e) => e.n).then((e) => ({ default: e.CodeEditor })));
 function P() {
 	let { t: e } = i();
 	return /* @__PURE__ */ T("div", {

package/dist/{sortable-provider-DYnyzfgR.js → sortable-provider-Dcsw0pgW.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-B4Frk3vC.js";
+import { t as n } from "./use-material-translation-Cqcwkuur.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-CJtTRNAX.js → spinner-1Ia6Akhy.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-B4Frk3vC.js";
+import { t as n } from "./use-material-translation-Cqcwkuur.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-ClkfkueV.js → stored-language-DoWMr969.js}

@@ -1278,6 +1278,17 @@ var t = {
 				until: "Until {value}",
 				"up-to": "Up to {value}"
 			},
+			default: {
+				label: "Default",
+				hint: "Default value, in effect until you choose one",
+				tag: "· {default}",
+				change: "{filter}, default value. Change"
+			},
+			error: {
+				tag: "Invalid",
+				label: "Invalid: {message}",
+				announce: "{field}: {message}"
+			},
 			bar: {
 				label: "Filters",
 				search: "Search",
@@ -3930,6 +3941,17 @@ var t = {
 				until: "Jusqu'au {value}",
 				"up-to": "Jusqu'à {value}"
 			},
+			default: {
+				label: "Par défaut",
+				hint: "Valeur par défaut, appliquée tant que vous n'en choisissez pas une",
+				tag: "· {default}",
+				change: "{filter}, valeur par défaut. Modifier"
+			},
+			error: {
+				tag: "Invalide",
+				label: "Invalide : {message}",
+				announce: "{field} : {message}"
+			},
 			bar: {
 				label: "Filtres",
 				search: "Rechercher",

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-B4Frk3vC.js";
+import { t as s } from "./use-material-translation-Cqcwkuur.js";
 import { a as c, r as l } from "./icon-sprites-CaYXzOL4.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-ufQL3SO6.js";
+import { t as p } from "./theme-toggle-GlKtdgYz.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-ufQL3SO6.js → theme-toggle-GlKtdgYz.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./use-material-translation-B4Frk3vC.js";
+import { t as e } from "./use-material-translation-Cqcwkuur.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-DlioFgpM.js → toolbar-items-C1GdN9P9.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-B71aggp0.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-ppMPD12c.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-B4Frk3vC.js";
+import { t as xe } from "./use-material-translation-Cqcwkuur.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-O-uasx3u.js → translate-material-BneuBHXZ.js}

@@ -1,5 +1,5 @@
-import "./stored-language-ClkfkueV.js";
-import { a as e, r as t } from "./translator-C0uxN1Nh.js";
+import "./stored-language-DoWMr969.js";
+import { a as e, r as t } from "./translator-D88BbpXZ.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-C0uxN1Nh.js → translator-D88BbpXZ.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-ClkfkueV.js";
+import { a as t, i as n, r, t as i } from "./stored-language-DoWMr969.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-DzVO5mwz.js → use-chat-composer-beyfZPBD.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-Crvg-MN5.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-LtXwv6N3.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-B71aggp0.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-ppMPD12c.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-DlioFgpM.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-C1GdN9P9.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-ClkfkueV.js";
-import { a as kt } from "./translator-C0uxN1Nh.js";
+import "./stored-language-DoWMr969.js";
+import { a as kt } from "./translator-D88BbpXZ.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-B4Frk3vC.js";
-import { t as Mt } from "./spinner-CJtTRNAX.js";
+import { t as L } from "./use-material-translation-Cqcwkuur.js";
+import { t as Mt } from "./spinner-1Ia6Akhy.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-Cr9GIIj4.js";
+import { a as Pt, i as Ft, n as It, r as Lt, t as Rt } from "./button-BjIg_Lz6.js";
 import { t as R } from "./icon-button-ifTpXt0A.js";
 import { a as zt, r as Bt } from "./icon-sprites-CaYXzOL4.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-s11lOfxB.js";
-import { n as dn, t as fn } from "./icon-badge-DG7wLnHh.js";
+import { n as cn, r as ln, t as un } from "./chip-DIBIDUZH.js";
+import { n as dn, t as fn } from "./icon-badge-oLBh3Mlk.js";
 import { r as pn } from "./use-csp-nonce-ZKs9k-ov.js";
-import { t as mn } from "./empty-state-8LddxMU4.js";
+import { t as mn } from "./empty-state-X_nikpBS.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-CjD54THr.js")
+			import("./rich-code-block-B4TIjZRA.js")
 		]);
 		return [r(t, {
 			lowlight: n,

package/dist/{use-heading-spy-BHCVdJfr.js → use-heading-spy-BN0yeBod.js}

@@ -1,4 +1,4 @@
-import { r as e } from "./i18n-provider-BDi9-6DO.js";
+import { r as e } from "./i18n-provider-BfyDgd2o.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-B4Frk3vC.js → use-material-translation-Cqcwkuur.js}

@@ -1,5 +1,5 @@
-import { r as e } from "./i18n-provider-BDi9-6DO.js";
-import { t } from "./translate-material-O-uasx3u.js";
+import { r as e } from "./i18n-provider-BfyDgd2o.js";
+import { t } from "./translate-material-BneuBHXZ.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

@@ -878,7 +878,7 @@ 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?, searchApply?, searchMinLength?, codec? }` |
+| `filter` | `ServerTableFilter` | — | `{ model, locked?, fieldProps?, variant?, sheetTrigger?, quick?, density?, shortcuts?, previewCount?, counts?, liveDelayMs?, label?, searchLabel?, searchPlaceholder?, searchApply?, searchMinLength?, codec?, defaults?, errors? }` |
 | `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>`). 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 |
@@ -1252,8 +1252,12 @@ 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'`, the controls' size and the gap between them), `bandDensity`
-(`'comfortable'` or `'compact'`, the bar's own vertical room: see below), `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
+(`'comfortable'` or `'compact'`, the bar's own vertical room: see below), `label`,
+`searchLabel`, `searchPlaceholder`, `liveDelayMs`
+(200 ms), `searchApply` and `searchMinLength` tune it; `defaults` gives the
+`default: 'page'` fields their values (see [A field's default](#a-fields-default))
+and `errors` shows a server's refusal of a condition (see
+[A refused condition](#a-refused-condition)). 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.
 
 #### A compact band for a list inside a page section
@@ -1373,6 +1377,59 @@ function StudentsFilter({ total }: { total: number }) {
 }
 ```
 
+#### Filter bar outside a table
+
+A feed or a list that is no table hosts the same bar with `FilterBar`: it
+reads its query from the search params and writes it back, so there is no
+`parseFilterQuery` / `serializeFilterQuery` to wire. It is the bar of
+`ServerTable`'s band: the search, the chips, "Clear all", the count announced
+once the page answers, "Filters (N)" opening the sheet on a phone, and a
+`widens` field (a "Show archived" switch) as a toggle, never a chip.
+
+```tsx
+import { FilterBar } from '@nxgt/material/components';
+import { useSearchParams } from 'react-router';
+
+function Notifications({ items }: { items: Notification[] }) {
+  const [params, setParams] = useSearchParams();
+  return (
+    <>
+      <FilterBar
+        model={NOTIFICATION_FILTERS}
+        params={params}
+        onParamsChange={(next) => setParams(next, { replace: true })}
+        resultCount={items.length}
+      />
+      <ul>{items.map((n) => <NotificationRow key={n.id} {...n} />)}</ul>
+    </>
+  );
+}
+```
+
+- **Props** (`FilterBarProps`). `model`, `params`, `onParamsChange`, then
+  `locked`, `codec` (a `FilterUrlCodec`: `keepKnownValues`, `encoding`, the
+  loader's own options), `reset` (the params dropped on every write, a cursor
+  or a page number), `defaults` (the values of the `default: 'page'` fields,
+  the loader's own; see [A field's default](#a-fields-default)),
+  `resultCount`, `loading`; every other prop of `Filter variant="bar"`
+  (`quick`, `counts`, `previewCount`, `fieldProps`, `density`, `shortcuts`,
+  `searchApply`, `searchMinLength`, `errors`, `label`...) passes through. There is no `query`,
+  `defaultQuery` nor `onQueryChange`: the URL is the query.
+- **One write.** An edit writes the search, every `f=` and the aliased params,
+  drops the `reset` ones and keeps the page's others (a tab, a sort).
+  `onParamsChange` receives the next params for your router; the bar then
+  holds the count back until the router has taken them, and until `loading`
+  ends. Pass `replace`, so Back leaves the list rather than undoing every chip;
+  a Back or a link that changes the params shows at once.
+- **The hook.** `useFilterUrlQuery(options)` takes a
+  `UseFilterUrlQueryOptions` (`{ model, params, onParamsChange, locked,
+  defaults, codec, reset }`) and returns a `FilterUrlQuery` (`{ query,
+  onQueryChange, waiting, heading }`): the bar's URL half, for a page that
+  lays `Filter` out itself.
+  `ServerTable` uses the same hook, so a list and a table write the same URL.
+- **Not a router.** Nothing is imported from one: `params` is a
+  `URLSearchParams`, and `onParamsChange` is yours.
+
 #### Locked conditions
 
 A condition the page imposes (a class's roster, the school year) goes in
@@ -1411,6 +1468,116 @@ for you), pass the table `announceEmpty={false}` and `announceLoading={false}`:
 the bar's live region tells the count and "no results", so the table's own
 status stays quiet and the answer is said once.
 
+#### A field's default
+
+A field declared with a `default` (a fixed list, or `'page'` with a `defaults`
+prop the page computes per request, the loader's own) narrows the list while the
+user has chosen nothing for it. `Filter`, `FilterBar` and `ServerTable`'s
+`filter` take `defaults`; the display is:
+
+| Field | Shown as |
+| --- | --- |
+| select, multi-select, any non-quick field | a hint chip in the active filters, "Status: Active, Upcoming · Default": dashed, no ✕, a button named "Status: Active, Upcoming, default value. Change" that opens the field's editor on the default, like an applied chip |
+| quick pill | the pill reads the default, tagged "· Default" (`material.filter.default.tag`, for the eye only: the pill is described "Default value, …"), and opens its editor, which shows the default checked; no ✕ until the user picks a value |
+| switch or checkbox quick toggle | pressed (`aria-pressed`), marked "Default" and described so; pressing writes an explicit "No" |
+| facets panel and phone sheet | the default values checked, "Default" beside the field's title (`FacetGroup`'s `hint`); the section starts open |
+
+A default is never in `query`: it is not counted in "Filters (N)" or the
+announcement. Choosing or changing a value replaces it (removing the last value
+returns to it). "Clear all" returns the fields to their defaults. A locked field shows
+its lock only. The words are `material.filter.default.*`.
+
+```tsx
+// `status` has a fixed `default: ['active', 'upcoming']`: its hint chip needs no
+// prop. `mine` is a switch with `default: 'page'`: the page gives its value.
+<FilterBar model={EVENT_FILTERS} params={params} onParamsChange={setParams}
+  defaults={{ mine: ['1'] }} />
+<ServerTable filter={{ model: EVENT_FILTERS, defaults: { mine: ['1'] } }} {...table} />
+```
+
+#### A scope field
+
+A list scoped by a value the user changes but never clears (the period or the
+workspace it shows) declares `scope: true`. It is not a narrowing filter, so
+it is never counted, chipped or cleared, and it needs a `default` (the value
+while the user chose none) and a single-value type (`select`, `radio-group` or
+`chips-single`); `defineFilterModel` throws without a default, with another
+type, or together with `widens` (a field is one role or the other).
+
+```ts
+{ id: 'period', type: 'select', label: 'Period', options: PERIODS,
+  scope: true, default: 'page' } // or default: ['p2']
+```
+
+- **Its control** is the bar's leading pill, "Period: P2": a button
+  (`aria-haspopup="dialog"`) that opens the field's editor, with the value
+  always shown (the default while the user chose none, with no "Default" tag)
+  and no ✕. `ServerTable`'s band shows it the same way, and the facets panel
+  and the phone sheet list it as the first section, with no count and no
+  Clear. On a phone the pill stays in the bar beside the search (44px
+  target): a tap opens the filters sheet on the period's section, focused,
+  not a popover. Below 640px the search takes the whole first row, and the
+  pill and "Filters" share the second (pill first, "Filters" at the end);
+  without a scope field the single row stays.
+- **Not a filter.** It is never a chip, never in "Add filter", and never
+  counted: not in "Filters (N)", not in the announcement, not in `isFiltered`
+  or `isNarrowing`. "Clear all" and `withoutFilters` keep it, so the list
+  keeps its scope; "Clear all" shows from two filters *beside* it.
+- **In the URL** it is an explicit choice like any other (`f=period:is:p1`, or
+  its alias); an invalid value means the default. It filters the rows
+  (`matchQuery`, `effectiveConditions`) as any field does. A `locked`
+  condition on it wins: the lock chip shows, the pill does not.
+- **Core.** `isKeptField(model, id)` is true for a `widens` or a `scope`
+  field, `isScopeField(model, id)` for a scope alone.
+
+#### A field only a link sets
+
+A field a detail page sets through a link (`/items?item=abc`) must be in the
+model, so its condition is parsed, filters the rows and shows as a chip. Declare
+it `addable: false` so the user is never offered it with nothing to pick:
+
+```ts
+{ id: 'item', type: 'autocomplete', label: 'Item', style: 'single', multiple: false,
+  addable: false }
+```
+
+It is a plain filter in every other way: read from the URL and written back,
+a chip with its ✕ while it has a value, counted, and removed by "Clear all"
+(unlike a `scope` field, which is always shown and never cleared). It is
+left out of "Add filter" and of the quick filters (also when listed in
+`quick`), and the phone sheet and the facets panel list its section only
+while the applied query holds a value. Core: `isAddableField(model, id)`.
+
+#### A refused condition
+
+A server can refuse a value (a date span too long, an end before a start).
+Pass its message per field id, a record `{ [fieldId]: message }`, as `errors`
+(`Filter`, `FilterBar` and `ServerTable`'s `filter`), built from what the
+loader's API answered:
+
+```tsx
+<ServerTable filter={{ model, errors: { period: 'The period cannot exceed 366 days.' } }} {...table} />
+```
+
+The field's control turns to the error tone and reads "Invalid" (an icon and
+a word, never colour alone): a chip, a quick pill, a scope pill (on a phone
+too), a quick switch or checkbox toggle, and the default chip. It is described "Invalid: <message>"; its
+editor and its facets section show the message under the title; and the
+polite live region tells it ("Period: The period cannot exceed 366 days."),
+once, after the count, also when the page opens with it; the next count replaces it. A dashed control (a toggle, the default chip) keeps its dashes
+and takes the error tone on its line and text. Only a field of the model that the page does not lock shows
+one. The page clears it when the condition changes, by passing no error. The
+words are `material.filter.error.*`; `fieldErrors(errors, model, locked)` in
+the core lists what the bar shows.
+
+#### A list without a search box
+
+`defineFilterModel({ search: false, fields })` declares a list with no text
+search (invitations by status, where the API has none): the bar, the facets
+panel and the phone sheet render no search box, `/` goes to the first quick
+filter (nothing without one), and the codec neither reads nor writes the
+search param, so `q` is free for a field. `model.search.enabled` tells.
+
 #### Quick filters
 
 Fields declared `quick: true` in the model (or listed in `quick`) show as
@@ -1439,6 +1606,19 @@ archived") is a switch or checkbox in its editor, and off removes its
 condition (it never writes `0`). A plain boolean ("Scholarship") offers Yes
 and No as two radios, and "No" is a condition of its own, with its chip.
 
+A switch that only narrows ("Only unassigned") declares `off: 'remove'`
+(`'no'` is the default; with `widens: true` it is `'remove'`, and `widens`
+with `off: 'no'` throws). Its editor is one switch, with no Yes or No; on
+is a filter like any other, counted ("Clear all" appears, the phone sheet
+counts it) and shown as a chip, and off removes the condition and writes
+nothing to the URL. An old `?f=unassigned:is:0` link on such a field is
+dropped silently, so it shows every row. A field that does not opt in
+behaves as before.
+
+```ts
+{ id: 'unassigned', type: 'switch', label: 'Only unassigned', off: 'remove' }
+```
+
 A chip's popover is titled with its field and operator ("Level is not") and
 edits the values only. To change the operator, go back through "Add filter":
 it lists an active field with its current condition, and picking it
@@ -1869,6 +2049,7 @@ const [levels, setLevels] = useState<string[]>(['ce1']);
 | Prop | Type | Default | Effect |
 | --- | --- | --- | --- |
 | `title` | `string` | — | the facet's name, in the header; a string, because it builds the accessible names |
+| `hint` | `ReactNode` | — | a quiet word after the title (a field's "Default"); part of the toggle's name unless `activeCount > 0` names it |
 | `activeCount` | `number` | `0` | how many values are active: the count Badge (hidden at 0) and the toggle's name |
 | `onClear` | `() => void` | — | the "Clear" button, shown while `activeCount > 0`; the focus then goes to the toggle |
 | `open` / `defaultOpen` / `onOpenChange` | `boolean` / `boolean` / `(open) => void` | uncontrolled, open | controlled or not |

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

@@ -207,7 +207,7 @@ import { AuthCard, Button, EmailField, LanguageSwitcher, PasswordField } from '@
 | `banner` | `ReactNode` | — | above that row (an update notice) |
 | `footer` | `ReactNode` | — | under the card |
 | `backdrop` | `ReactNode \| false` | the theme's background | what is drawn behind the page: a `Background` preset or any node; `false` for none. Without a theme provider nothing is drawn |
-| `keepClear` | `boolean` | `true` | glyphs (shapes or icons) of the backdrop that would meet the brand row, the card or the page's surfaces, text or controls are dropped (never moved); `false` lets them run under the card |
+| `keepClear` | `boolean \| 'gaps'` | `true` | glyphs (shapes or icons) of the backdrop that would meet the brand row, the card or the page's surfaces, text or controls are dropped (never moved); `false` lets them run under the card; `'gaps'` also keeps a glyph that fits in a gap of 24px or more between two surfaces |
 
 ```tsx
 import { Background } from '@nxgt/material/backgrounds';

package/docs/guides/app-shell.md

@@ -210,6 +210,7 @@ partitionMenu(items);                              // { content, footer }
 | `menuOpen` | `boolean` | — | Controls the phone's menu sheet: open while `true`. Leave it out and the layout manages the sheet. Only a phone shows the sheet |
 | `onMenuOpenChange` | `(open: boolean) => void` | — | Called for every change of the sheet: the menu button, Escape, the close button, a followed link, a new location |
 | `backdrop` | `ReactNode \| false` | — | An exception to the theme's background (the page ground, [`--ground`](#the-page-ground), is painted either way), which the layout draws by default (Lavande's: the built-in gradient and blobs). A node replaces it for this screen: usually a `Background` preset from `@nxgt/material/backgrounds` (see [Use a background preset behind the shell](#use-a-background-preset-behind-the-shell)); `false` draws no background, a plain page |
+| `keepClear` | `boolean \| 'gaps'` | `true` | how the backdrop's glyphs keep clear of the page: `true` drops every glyph within 8px of a surface, a text or a control; `'gaps'` also keeps a glyph that fits in a gap of 24px or more between two surfaces; `false` keeps nothing clear (the edge and the header band still are). See [Keep the backdrop clear of the content](#keep-the-backdrop-clear-of-the-content) |
 
 On a page with `viewport-fit=cover` (an installed PWA drawing under a
 notch and the home indicator), the shell pads clear of
@@ -646,6 +647,43 @@ export function Shell({ items }: { items: MenuItem[] }) {
 - The `--nxgt-bg-blob-1..3` variables recolour the built-in blobs only; the
   `blobs` preset reads them too.
 
+## Keep the backdrop clear of the content
+
+Behind the shell a glyph of the backdrop (a shape or an icon) is dropped, never
+moved, when its box meets the page's content. `keepClear` sets how strict that
+is:
+
+| `keepClear` | Result |
+| --- | --- |
+| `true` (default) | a glyph within 8px of a surface (a card, a stat card, a list, a table), a text or a control is dropped |
+| `'gaps'` | the same for text, controls and the inside of a surface, but a glyph may stay between two surfaces when its whole box fits in a gap of 24px or more (4px to spare from each card) |
+| `false` | the content is not measured; only the layer's edge and the header band drop a glyph |
+
+On a dense page (stat cards, a list, a grid of cards 24 to 32px apart) `true`
+leaves almost no glyph. `'gaps'` is opt-in and keeps the glyphs small enough
+for the gutters, so use it on such a page. It adds little on a page with wide
+open areas, where `true` already draws them. It never keeps a glyph that sits
+on a card, on text or on a control, and it measures the same way as `true`:
+boxes are read first, then written in one frame, with the 150 ms fade. A
+floating (`animated`) scene keeps its drift margin, so it rarely fits a gutter.
+
+```tsx
+import { ActivityLayout } from '@nxgt/material/components';
+import { Background, MOTIF_SHAPES_ALL } from '@nxgt/material/backgrounds';
+
+<ActivityLayout
+  items={items}
+  backdrop={<Background preset="shapes" motif={{ shapes: MOTIF_SHAPES_ALL }} />}
+  keepClear="gaps"
+>
+  <Outlet />
+</ActivityLayout>
+```
+
+`AuthCard` takes the same prop (`keepClear="gaps"`). Its card and brand row
+are kept whole, so there it only adds glyphs between the page's other
+surfaces, such as a banner.
+
 ## Route transitions
 
 `ActivityLayout` wraps its content region (`data-slot="activity-content-region"`)

package/docs/guides/backgrounds.md

@@ -548,6 +548,11 @@ good.
   away. It runs again on resize and when the content changes.
 - 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
+  two surfaces when its whole box fits in a gap of 24 px or more, with 4 px to spare from each. It is still dropped when
+  it meets a text, a control or the inside of a surface. Use it on a dense page (stat cards, a list and a grid of cards
+  24 to 32 px apart), where `true` leaves almost nothing. A glyph wider than the gap is dropped as before. See
+  [Keep the backdrop clear of the content](./app-shell.md#keep-the-backdrop-clear-of-the-content).
 - See [The theme's background](./app-shell.md#the-themes-background) for the shell and `AuthCard` in
   [navigation and layout](../components/navigation-and-layout.md#authcard) for the sign-in page.
 

package/docs/guides/i18n.md

@@ -286,6 +286,13 @@ chip's description), and a chip's words: `chip` "{field} {operator}
 `operator` "Operator", `operator-placeholder` "Operator…", `no-operator`,
 `back` "Back", `done` "Done", `live` "Applied as you go" and `no-value` "No
 value to enter." (an operator such as "is empty")),
+`material.filter.default.*` for a field's default shown as a hint (`label`
+"Default", `hint` "Default value, in effect until you choose one", `tag`
+"· {default}" after a title, a pill's or a toggle's words, and `change`
+"{filter}, default value. Change", the hint chip's name),
+`material.filter.error.*` for a condition the server refused (`tag`
+"Invalid", `label` "Invalid: {message}", the chip's description, and
+`announce` "{field}: {message}", told in the live region),
 `material.filter.announce.*` for its live region (`results`, `cleared`,
 `cleared-count`, `added`, `added-count`, each an ICU plural over `count`),
 `material.filter.summary.*` for values (`yes`, `no`, `quoted`, `range-and`,