@nxgt/material 3.17.0 → 3.18.0

package/dist/pdf-reader.js

@@ -1,3 +1,3 @@
-import { t as e } from "./public-B4lpmahC.js";
+import { t as e } from "./public-BLw13izR.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-WReTVxE3.js";
-import { t } from "./translate-material-DZ_i8xJx.js";
+import { r as e } from "./i18n-provider-3TsMIGn1.js";
+import { t } from "./translate-material-X1daoGxE.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-B4lpmahC.js → public-BLw13izR.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-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 { C as h, D as g, E as _, O as v, S as y, T as b, _ as x, f as S, g as ee, k as te, r as ne, t as C, u as re, w } from "./dialog-jYcWDh9G.js";
+import { c as T, d as ie, f as E, i as ae, l as oe, n as se, o as D, t as ce, u as O } from "./dropdown-menu-BEZhNnhr.js";
+import { S as le, a as k, d as A, g as ue, h as de, i as fe, m as pe, n as j, r as me, t as M, u as he, w as ge } from "./toolbar-items-CrATPuOX.js";
+import { t as N } from "./use-material-translation-tD9XqIBm.js";
+import { t as _e } from "./button-Ck1Bif-Q.js";
 import { 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-BNljKZLV.js";
+import { n as Ee, t as De } from "./empty-state-BBUsR0_X.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-CvqJmvuT.js → rich-code-block-DPe5USBG.js}

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

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

@@ -2600,7 +2600,17 @@ var t = {
 				"scatter-series": "{series}: {count, plural, one {# point} other {# points}}."
 			}
 		},
-		"list-details": { back: "Back to the list" }
+		"list-details": { back: "Back to the list" },
+		switcher: {
+			search: "Search",
+			"search-placeholder": "Search…",
+			clear: "Clear the search",
+			empty: "No results for “{query}”",
+			results: "{count, plural, =0 {No results} one {# result} other {# results}}",
+			recent: "Recent",
+			manage: "Manage…",
+			choose: "Choose"
+		}
 	} },
 	fr: { material: {
 		"empty-state": {
@@ -5200,7 +5210,17 @@ var t = {
 				"scatter-series": "{series} : {count, plural, one {# point} other {# points}}."
 			}
 		},
-		"list-details": { back: "Retour à la liste" }
+		"list-details": { back: "Retour à la liste" },
+		switcher: {
+			search: "Rechercher",
+			"search-placeholder": "Rechercher…",
+			clear: "Effacer la recherche",
+			empty: "Aucun résultat pour « {query} »",
+			results: "{count, plural, =0 {Aucun résultat} one {# résultat} other {# résultats}}",
+			recent: "Récents",
+			manage: "Gérer…",
+			choose: "Choisir"
+		}
 	} }
 }, n = "language", r = "en", i = Object.keys(t);
 //#endregion

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

@@ -1,4 +1,4 @@
-import { t as e } from "./use-material-translation-C4ysFJtw.js";
+import { t as e } from "./use-material-translation-tD9XqIBm.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-DCZxamGy.js → toolbar-items-CrATPuOX.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-CL6mNhgT.js";
+import { A as ne, M as re, N as ie, b as ae, d as oe, f as se, i as ce, j as le, l as ue, n as de, o as fe, r as pe, t as me, u as he, y as ge } from "./dropdown-menu-BEZhNnhr.js";
 import { a as _e, n as ve, r as ye, t as be } from "./dist-B7RjY7SL.js";
-import { t as xe } from "./use-material-translation-C4ysFJtw.js";
+import { t as xe } from "./use-material-translation-tD9XqIBm.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-DZ_i8xJx.js → translate-material-X1daoGxE.js}

@@ -1,5 +1,5 @@
-import "./stored-language-DiCe2ZcR.js";
-import { a as e, r as t } from "./translator-Ch1dEqFf.js";
+import "./stored-language-CsDEJDR7.js";
+import { a as e, r as t } from "./translator-BUVKAo4l.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-Ch1dEqFf.js → translator-BUVKAo4l.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-DiCe2ZcR.js";
+import { a as t, i as n, r, t as i } from "./stored-language-CsDEJDR7.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-ByWwRuYg.js → use-chat-composer-UZVFm8Tw.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-CFIn1NPR.js";
+import { A as M, C as N, D as te, E as ne, O as P, S as re, T as ie, _ as F, b as ae, f as oe, g as se, k as I, l as ce, m as le, n as ue, o as de, r as fe, s as pe, t as me, u as he, v as ge, w as _e, x as ve, y as ye } from "./dialog-jYcWDh9G.js";
 import { A as 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-CL6mNhgT.js";
+import { D as Ye, E as Xe, N as Ze, O as Qe, c as $e, d as et, f as tt, i as nt, k as rt, m as it, n as at, o as ot, p as st, t as ct, u as lt } from "./dropdown-menu-BEZhNnhr.js";
 import { 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-DCZxamGy.js";
+import { C as pt, S as mt, a as ht, c as gt, d as _t, l as vt, n as yt, o as bt, s as xt, u as St } from "./toolbar-items-CrATPuOX.js";
 import { 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-DiCe2ZcR.js";
-import { a as kt } from "./translator-Ch1dEqFf.js";
+import "./stored-language-CsDEJDR7.js";
+import { a as kt } from "./translator-BUVKAo4l.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-C4ysFJtw.js";
-import { t as Mt } from "./spinner-CGgOgUCe.js";
+import { t as L } from "./use-material-translation-tD9XqIBm.js";
+import { t as Mt } from "./spinner-CcmXeIHf.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-DOYHfcMJ.js";
+import { a as Pt, i as Ft, n as It, r as Lt, t as Rt } from "./button-Ck1Bif-Q.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-C8MB2xzb.js";
-import { n as dn, t as fn } from "./icon-badge-lfAUxNe8.js";
+import { n as cn, r as ln, t as un } from "./chip-B9pZFWbi.js";
+import { n as dn, t as fn } from "./icon-badge-92uhu2o6.js";
 import { r as pn } from "./use-csp-nonce-ZKs9k-ov.js";
-import { t as mn } from "./empty-state-BNljKZLV.js";
+import { t as mn } from "./empty-state-BBUsR0_X.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-CvqJmvuT.js")
+			import("./rich-code-block-DPe5USBG.js")
 		]);
 		return [r(t, {
 			lowlight: n,

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

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

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

package/docs/components/overlays-and-menus.md

@@ -21,7 +21,7 @@ that prevents the default and focuses nothing) goes to the layer's content.
 Non-modal layers (`modal={false}`, and `DropdownMenu` and `Popover` by
 default) leave the page as it is.
 
-**Checked and radio items draw a mark.** The check of a `*CheckboxItem` draws in and out and the dot of a `*RadioItem` springs in; a checked `CommandItem`, a chosen `Select` or `Combobox` option, the `PhoneField` country menu, the `Switcher` and the `FilterPresets` menu draw their check in. The mark is `data-slot="option-mark"`, `aria-hidden`, follows the row's text colour and stops moving under reduced motion. Roles, `aria-checked` and keyboard behaviour are unchanged: read `aria-checked` on the item, not the mark.
+**Checked and radio items draw a mark.** The check of a `*CheckboxItem` draws in and out and the dot of a `*RadioItem` springs in; a checked `CommandItem`, a chosen `Select` or `Combobox` option, the `PhoneField` country menu and the `FilterPresets` menu draw their check in. The mark is `data-slot="option-mark"`, `aria-hidden`, follows the row's text colour and stops moving under reduced motion. Roles, `aria-checked` and keyboard behaviour are unchanged: read `aria-checked` on the item, not the mark.
 
 **Chosen and highlighted items look the same everywhere.** In the radio groups of `DropdownMenu`, `ContextMenu` and `Menubar`, and in `Select` and
 `Autocomplete` lists, the one chosen item has a 12 % primary tint, a 3px rounded bar

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

@@ -28,7 +28,7 @@ value type each one writes. Everything is imported from
 | <img src="../previews/selection-choice-transferlist.webp" width="96" alt=""> | [TransferList](#transferlist) | Two-pane picker: search, counts, select-all, drag between panes |
 | <img src="../previews/selection-choice-sortablelist.webp" width="96" alt=""> | [SortableList](#sortablelist) | Reorderable list: drag or keyboard, announced |
 | <img src="../previews/selection-choice-treeselectfield.webp" width="96" alt=""> | [TreeSelectField](#treeselectfield) | Pick from a tree, single or multiple |
-| <img src="../previews/selection-choice-switcher.webp" width="96" alt=""> | [Switcher](#switcher) | Workspace or account switcher |
+| <img src="../previews/selection-choice-switcher.webp" width="96" alt=""> | [Switcher](#switcher) | Workspace, establishment or class switcher: menu, search, groups, links |
 
 ## Select
 
@@ -1125,7 +1125,7 @@ multiple mode).
 
 ![Switcher](../previews/selection-choice-switcher.webp)
 
-Dropdown for switching the active workspace or account, with an avatar.
+Switches the workspace, the establishment or the class a page is about. A 44px card trigger (initial or icon tile, title, subtitle, up-down chevron) opens a menu for up to 7 options, and from 8 a panel with a search, groups and a listbox; on a phone it is a bottom sheet. `variant="expressive"` is a pill with a larger panel, "Recent" tiles and soft badges. With `getHref` the options are links.
 
 ```tsx
 import { Switcher, type SwitcherItem } from '@nxgt/material/components';
@@ -1138,17 +1138,87 @@ const workspaces: SwitcherItem[] = [
 
 export function Workspaces() {
 	const [value, setValue] = useState('acme');
-	return <Switcher label="Workspaces" options={workspaces} value={value} onValueChange={setValue} />;
+	return <Switcher label="Workspace" options={workspaces} value={value} onValueChange={setValue} />;
 }
 ```
 
+An option with no `icon` draws its `initial` (default: the first letter of its title) in a tile of its `tone`. Establishments take an icon, a tone and a "Manage…" footer:
+
+```tsx
+import { Icon, Switcher } from '@nxgt/material/components';
+
+<Switcher
+	label="Establishment"
+	value={school}
+	onValueChange={setSchool}
+	options={[
+		{ id: 'ljc', title: 'Lycée Joss', subtitle: 'Lycée · Douala', icon: <Icon name="school" />, tone: 'primary' },
+		{ id: 'src', title: 'École La Source', subtitle: 'Primaire · Bafoussam', icon: <Icon name="graduation-cap" />, tone: 'success' },
+	]}
+	footer={{ onSelect: () => navigate('/establishments') }}
+/>;
+```
+
+### Classes: search, groups and links
+
+Eight options or more (or `searchable`) open a popover with a search field. It is a combobox over a listbox: typing filters on the title, the subtitle and the group (accents and case ignored), the arrows move the active option, Enter chooses it and gives the focus back to the trigger. Options with a `group` are listed under its header, and put the pupil count in the subtitle **or** in `badge`, not both.
+
+With `getHref` each option is a link, for a switcher that is a navigation (`/classes/6b`): the panel is a `nav` of links with `aria-current="page"` on the chosen one (no `listbox` role), and the arrows move the real focus. Pass your router's link as `linkComponent`, as for `ListTile` and `AccountMenu`:
+
+```tsx
+import { Link } from 'react-router';
+import { Switcher, type AppShellLinkComponent } from '@nxgt/material/components';
+
+// Hoisted, outside the render: not a new component on every render.
+const RouterLink: AppShellLinkComponent = ({ href, ...props }) => <Link to={href} {...props} />;
+
+<Switcher
+	label="Class"
+	value={classId}
+	options={classes} // { id: '6b', title: '6e B', subtitle: 'Mathematics · 26 pupils', group: '6e', tone: 'primary' }
+	getHref={(item) => `/classes/${item.id}`}
+	linkComponent={RouterLink}
+	footer={{ label: 'Manage my classes…', href: '/classes' }}
+/>;
+```
+
+### Expressive
+
+`variant="expressive"` is a pill that opens a larger panel (always with a search). `recent` lists up to 3 option ids shown as tiles above the groups while nothing is typed; `badge` draws a soft badge after the title. On a phone the sheet is full height with a close button.
+
+```tsx
+<Switcher
+	variant="expressive"
+	label="Class"
+	value={classId}
+	onValueChange={setClassId}
+	options={classes.map((c) => ({ ...c, badge: c.pupils }))}
+	recent={['6b', 't1', '4a']}
+/>
+```
+
+A title that does not fit the trigger is cut with an ellipsis: the span carries the full title in `aria-label` (what `expectNoTextOverflow` of `@nxgt/playwright` reads), hovering or focusing the trigger shows it with the subtitle in a tooltip, and the trigger's accessible name is the label, the full title and the subtitle.
+
 | Prop | Type | Default | Effect |
 | --- | --- | --- | --- |
-| `options` | `SwitcherItem[]` | — | `{ id, title, subtitle?, icon? }`; without `icon` an initial avatar is shown |
+| `options` | `SwitcherItem[]` | — | see below |
 | `value` | `string` | — | the active `id` |
 | `onValueChange` | `(value: string) => void` | — | |
-| `label` | `ReactNode` | — | heading of the menu |
+| `label` | `ReactNode` | — | what is switched: names the trigger, the panel and the list |
+| `variant` | `'default' \| 'expressive'` | `'default'` | tile trigger and menu, or pill and large panel |
+| `searchable` | `boolean` | from 8 options (always, expressive) | the search field of the panel; `true` also replaces the menu with the panel |
+| `recent` | `string[]` | — | up to 3 option ids shown as tiles (expressive) |
+| `getHref` | `(item) => string \| undefined` | — | link mode; falls back to `item.href` |
+| `linkComponent` | `LinkComponent` | `<a>` | your router's link: takes `href`, spreads every prop, forwards `ref` |
+| `footer` | `{ label?, onSelect?, href? }` | — | a "Manage…" button (a link with `href`) at the end of the panel; `label` defaults to `material.switcher.manage` |
+| `emptyLabel` | `ReactNode` | `material.switcher.empty` | shown when the search matches nothing |
+| `sheet` | `boolean` | on a phone | `true` always opens a sheet, `false` never |
+| `name`, button props | `ComponentProps<'button'>` | — | spread on the trigger; `name` is its `data-pw` |
+
+`SwitcherItem`: `{ id, title, subtitle?, icon?, group?, initial?, tone?, badge?, href?, disabled? }`.
+
+Strings (the search field, "Recent", "Manage…", the empty and result texts) are `material.switcher.*` keys, in English and French.
 
 **Emits:** `string` (the item `id`). No form wrapper — it switches context,
 it is not a form value.
-**Storybook:** `Selection & choice/Switcher` · **Vue:** `Switcher`
+**Storybook:** `Selection & choice/Switcher` (and `/Behaviour`) · **Vue:** `Switcher` (the earlier look; the modern one is React only for now)

package/docs/troubleshooting.md

@@ -111,6 +111,7 @@ words in your error.
 
 - [A `ListTile` link shows two chevrons](#a-listtile-link-shows-two-chevrons)
 - [A `ListTile` link reloads the whole page](#a-listtile-link-reloads-the-whole-page)
+- [A `Switcher` in link mode reloads the page](#a-switcher-in-link-mode-reloads-the-page)
 - [After a link in the phone menu, the focus goes to `<main>`, not to the page's title](#after-a-link-in-the-phone-menu-the-focus-goes-to-main-not-to-the-pages-title)
 - [The phone menu needs two Escapes to close, or a tooltip shows over it](#the-phone-menu-needs-two-escapes-to-close-or-a-tooltip-shows-over-it)
 - [The phone menu stays open after a navigation, or an app clicks its button to close it](#the-phone-menu-stays-open-after-a-navigation-or-an-app-clicks-its-button-to-close-it)
@@ -1115,7 +1116,7 @@ expect(screen.getByRole('checkbox', { name: 'Email me receipts' })).toHaveAttrib
 
 ### A test looked for `lucide-check` in a menu item
 
-**When:** a test or a style looks for the `lucide-check` or `lucide-circle` svg in a checked item of `DropdownMenu`, `ContextMenu`, `Menubar`, `Select`, `Combobox`, `Command`, the `PhoneField` country menu, the `Switcher` or the filter presets.
+**When:** a test or a style looks for the `lucide-check` or `lucide-circle` svg in a checked item of `DropdownMenu`, `ContextMenu`, `Menubar`, `Select`, `Combobox`, `Command`, the `PhoneField` country menu or the filter presets.
 **Why:** those items draw an animated mark, an `aria-hidden` element with `data-slot="option-mark"`. In `Select` and `Combobox` it is present only on the chosen option; the menu items keep it mounted while unchecked.
 **Fix:** read `aria-checked` (or `aria-selected`) on the item:
 
@@ -2057,6 +2058,22 @@ const RouterLink: AppShellLinkComponent = ({ href, ...props }) => (
 <ListTile title="Notifications" href="/settings/notifications" linkComponent={RouterLink} />
 ```
 
+### A `Switcher` in link mode reloads the page
+
+**When:** a `Switcher` with `getHref` is used in a router app and choosing an option loads the document again (the page flashes, client state is lost).
+**Why:** link mode renders plain `<a href>` links, which need no router and so cannot navigate on the client. Without `getHref` the options are not links and `href` on an item does nothing.
+**Fix:** pass `linkComponent`, with the contract of the app shell's: it takes `href`, spreads every other prop (`aria-current`, `className`, handlers) and forwards `ref`. React Router's `Link` takes `to`, so wrap it:
+
+```tsx
+import { Link } from 'react-router';
+import { Switcher, type AppShellLinkComponent } from '@nxgt/material/components';
+
+// Hoisted, outside the render: not a new component on every render.
+const RouterLink: AppShellLinkComponent = ({ href, ...props }) => <Link to={href} {...props} />;
+
+<Switcher label="Class" value={classId} options={classes} getHref={(item) => `/classes/${item.id}`} linkComponent={RouterLink} />
+```
+
 ### After a link in the phone menu, the focus goes to `<main>`, not to the page's title
 
 **When:** on a phone, a link followed in the menu sheet of `ActivityLayout` or

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nxgt/material",
-	"version": "3.17.0",
+	"version": "3.18.0",
 	"license": "MIT",
 	"bugs": {
 		"email": "stevegires@gmail.com"
@@ -357,7 +357,7 @@
 		"docs:previews": "rm -rf node_modules/.cache/nxgt-preview-free/missing && NXGT_PREVIEW_FREE=1 vitest run --project previews && bun .storybook/preview-free-report.ts"
 	},
 	"dependencies": {
-		"@nxgt/material-core": "^0.32.0",
+		"@nxgt/material-core": "^0.32.1",
 		"@base-ui/react": "^1.6.0",
 		"@dnd-kit/core": "^6.3.1",
 		"@dnd-kit/sortable": "^10.0.0",