@nxgt/material 3.80.0 → 3.82.0

package/dist/{use-click-lock-BZYtTmVt.js → use-click-lock-Bwg_caHO.js}

@@ -16,35 +16,35 @@ function o(e, t, n) {
 //#region lib/components/ui/actions/button/button-tones.ts
 var s = {
 	primary: "text-primary-text",
-	secondary: "text-secondary",
-	success: "text-success dark:text-[color-mix(in_oklab,var(--color-success)_85%,white)]",
-	info: "text-info",
+	secondary: "text-[color-mix(in_oklab,var(--color-secondary)_90%,black)] dark:text-[color-mix(in_oklab,var(--color-secondary)_80%,white)]",
+	success: "text-[color-mix(in_oklab,var(--color-success)_90%,black)] dark:text-[color-mix(in_oklab,var(--color-success)_70%,white)]",
+	info: "text-[color-mix(in_oklab,var(--color-info)_90%,black)] dark:text-[color-mix(in_oklab,var(--color-info)_85%,white)]",
 	warning: "text-[color-mix(in_oklab,var(--color-warning)_85%,black)] dark:text-[color-mix(in_oklab,var(--color-warning)_85%,white)]",
-	error: "text-[color-mix(in_oklab,var(--color-error)_85%,black)] dark:text-[color-mix(in_oklab,var(--color-error)_70%,white)]",
+	error: "text-[color-mix(in_oklab,var(--color-error)_80%,black)] dark:text-[color-mix(in_oklab,var(--color-error)_70%,white)]",
 	default: "text-foreground"
 }, c = {
 	primary: "[&_svg]:data-[slot=icon]:text-primary-text",
-	secondary: "[&_svg]:data-[slot=icon]:text-secondary",
-	success: "[&_svg]:data-[slot=icon]:text-success dark:[&_svg]:data-[slot=icon]:text-[color-mix(in_oklab,var(--color-success)_85%,white)]",
-	info: "[&_svg]:data-[slot=icon]:text-info",
+	secondary: "[&_svg]:data-[slot=icon]:text-[color-mix(in_oklab,var(--color-secondary)_90%,black)] dark:[&_svg]:data-[slot=icon]:text-[color-mix(in_oklab,var(--color-secondary)_80%,white)]",
+	success: "[&_svg]:data-[slot=icon]:text-[color-mix(in_oklab,var(--color-success)_90%,black)] dark:[&_svg]:data-[slot=icon]:text-[color-mix(in_oklab,var(--color-success)_70%,white)]",
+	info: "[&_svg]:data-[slot=icon]:text-[color-mix(in_oklab,var(--color-info)_90%,black)] dark:[&_svg]:data-[slot=icon]:text-[color-mix(in_oklab,var(--color-info)_85%,white)]",
 	warning: "[&_svg]:data-[slot=icon]:text-[color-mix(in_oklab,var(--color-warning)_85%,black)] dark:[&_svg]:data-[slot=icon]:text-[color-mix(in_oklab,var(--color-warning)_85%,white)]",
-	error: "[&_svg]:data-[slot=icon]:text-[color-mix(in_oklab,var(--color-error)_85%,black)] dark:[&_svg]:data-[slot=icon]:text-[color-mix(in_oklab,var(--color-error)_70%,white)]",
+	error: "[&_svg]:data-[slot=icon]:text-[color-mix(in_oklab,var(--color-error)_80%,black)] dark:[&_svg]:data-[slot=icon]:text-[color-mix(in_oklab,var(--color-error)_70%,white)]",
 	default: "[&_svg]:data-[slot=icon]:text-foreground"
 }, l = {
 	primary: "[&_svg]:stroke-primary-text",
-	secondary: "[&_svg]:stroke-secondary",
-	success: "[&_svg]:stroke-success dark:[&_svg]:stroke-[color-mix(in_oklab,var(--color-success)_85%,white)]",
-	info: "[&_svg]:stroke-info",
+	secondary: "[&_svg]:stroke-[color-mix(in_oklab,var(--color-secondary)_90%,black)] dark:[&_svg]:stroke-[color-mix(in_oklab,var(--color-secondary)_80%,white)]",
+	success: "[&_svg]:stroke-[color-mix(in_oklab,var(--color-success)_90%,black)] dark:[&_svg]:stroke-[color-mix(in_oklab,var(--color-success)_70%,white)]",
+	info: "[&_svg]:stroke-[color-mix(in_oklab,var(--color-info)_90%,black)] dark:[&_svg]:stroke-[color-mix(in_oklab,var(--color-info)_85%,white)]",
 	warning: "[&_svg]:stroke-[color-mix(in_oklab,var(--color-warning)_85%,black)] dark:[&_svg]:stroke-[color-mix(in_oklab,var(--color-warning)_85%,white)]",
-	error: "[&_svg]:stroke-[color-mix(in_oklab,var(--color-error)_85%,black)] dark:[&_svg]:stroke-[color-mix(in_oklab,var(--color-error)_70%,white)]",
+	error: "[&_svg]:stroke-[color-mix(in_oklab,var(--color-error)_80%,black)] dark:[&_svg]:stroke-[color-mix(in_oklab,var(--color-error)_70%,white)]",
 	default: "[&_svg]:stroke-foreground"
 }, u = {
 	primary: "[--morph-on:var(--color-primary)] [--morph-on-fg:var(--color-primary-foreground)] [--btn-focus:var(--color-primary-text)] [--btn-line:var(--color-primary)]",
 	secondary: "[--morph-on:var(--color-secondary)] dark:[--morph-on:color-mix(in_oklab,var(--color-secondary)_70%,var(--color-background))] [--morph-on-fg:var(--color-secondary-foreground)] [--btn-focus:var(--color-secondary)] [--btn-line:var(--color-secondary)]",
-	success: "[--morph-on:var(--color-success)] dark:[--morph-on:color-mix(in_oklab,var(--color-success)_60%,var(--color-background))] [--morph-on-fg:var(--color-success-foreground)] [--btn-focus:var(--color-success)] dark:[--btn-focus:color-mix(in_oklab,var(--color-success)_85%,white)] [--btn-line:var(--color-success)]",
+	success: "[--morph-on:var(--color-success)] dark:[--morph-on:color-mix(in_oklab,var(--color-success)_60%,var(--color-background))] [--morph-on-fg:var(--color-success-foreground)] [--btn-focus:var(--color-success)] dark:[--btn-focus:color-mix(in_oklab,var(--color-success)_70%,white)] [--btn-line:var(--color-success)]",
 	info: "[--morph-on:var(--color-info)] dark:[--morph-on:color-mix(in_oklab,var(--color-info)_60%,var(--color-background))] [--morph-on-fg:var(--color-info-foreground)] [--btn-focus:var(--color-info)] [--btn-line:var(--color-info)]",
 	warning: "[--morph-on:var(--color-warning)] dark:[--morph-on:color-mix(in_oklab,var(--color-warning)_60%,var(--color-background))] [--morph-on-fg:var(--color-warning-foreground)] [--btn-focus:color-mix(in_oklab,var(--color-warning)_85%,black)] dark:[--btn-focus:color-mix(in_oklab,var(--color-warning)_85%,white)] [--btn-line:var(--color-warning)]",
-	error: "[--morph-on:var(--color-error)] [--morph-on-fg:var(--color-error-foreground)] [--btn-focus:color-mix(in_oklab,var(--color-error)_85%,black)] dark:[--btn-focus:color-mix(in_oklab,var(--color-error)_70%,white)] [--btn-line:var(--color-error)]",
+	error: "[--morph-on:var(--color-error)] [--morph-on-fg:var(--color-error-foreground)] [--btn-focus:color-mix(in_oklab,var(--color-error)_80%,black)] dark:[--btn-focus:color-mix(in_oklab,var(--color-error)_70%,white)] [--btn-line:var(--color-error)]",
 	default: "[--morph-on:var(--color-foreground)] [--morph-on-fg:var(--color-background)] [--btn-focus:var(--color-foreground)] [--btn-line:var(--color-foreground)]"
 }, d = 1e3;
 function f(e, a) {

package/dist/{use-heading-spy-Dt48bBts.js → use-heading-spy-gDNtK1sU.js}

@@ -1,9 +1,9 @@
 import { t as e } from "./utils-BLfntITJ.js";
-import { a as t, c as n, d as r, i, n as a, r as o, t as s, u as c } from "./alert-dialog-DgHtXZuB.js";
-import { a as l } from "./button-_vm-xSBU.js";
-import { i as u } from "./translate-material-CZTGqgen.js";
-import { t as d } from "./use-material-translation-BJucC_xe.js";
-import { _ as f, g as p, h as m, m as h, t as g, v as _ } from "./date.utils-DUvqcjan.js";
+import { a as t, c as n, d as r, i, n as a, r as o, t as s, u as c } from "./alert-dialog-DXLJ4AZP.js";
+import { a as l } from "./button-CSKUtMI3.js";
+import { i as u } from "./translate-material-D4rn5UaQ.js";
+import { t as d } from "./use-material-translation-DYrfV_JJ.js";
+import { _ as f, g as p, h as m, t as h, v as g, y as _ } from "./date.utils-JTEIo3mM.js";
 import { useCallback as v, useEffect as y, useMemo as b, useRef as x, useState as S } from "react";
 import { Fragment as C, jsx as w, jsxs as T } from "react/jsx-runtime";
 import { busySettler as E, busySettler as D, createSubmitGuard as O, createSubmitGuard as k } from "@nxgt/material-core/submit-guard";
@@ -254,7 +254,7 @@ var A = {
 	], a;
 	return a = n === 1 ? r && i.includes(r) ? "ère" : "er" : "ème", n + a;
 }, z = ["MMM", "MMMM"], B = {
-	en: h,
+	en: m,
 	fr: {
 		code: "fr",
 		formatDistance: j,
@@ -266,35 +266,35 @@ var A = {
 				value: "d"
 			} : e),
 			ordinalNumber: R,
-			era: f({
+			era: g({
 				values: ee,
 				defaultWidth: "wide"
 			}),
-			quarter: f({
+			quarter: g({
 				values: te,
 				defaultWidth: "wide",
 				argumentCallback: (e) => e - 1
 			}),
-			month: f({
+			month: g({
 				values: F,
 				defaultWidth: "wide"
 			}),
-			day: f({
+			day: g({
 				values: I,
 				defaultWidth: "wide"
 			}),
-			dayPeriod: f({
+			dayPeriod: g({
 				values: L,
 				defaultWidth: "wide"
 			})
 		},
 		match: {
-			ordinalNumber: m({
+			ordinalNumber: p({
 				matchPattern: /^(\d+)(ième|ère|ème|er|e)?/i,
 				parsePattern: /\d+/i,
 				valueCallback: (e) => parseInt(e)
 			}),
-			era: p({
+			era: f({
 				matchPatterns: {
 					narrow: /^(av\.J\.C|ap\.J\.C|ap\.J\.-C)/i,
 					abbreviated: /^(av\.J\.-C|av\.J-C|apr\.J\.-C|apr\.J-C|ap\.J-C)/i,
@@ -304,7 +304,7 @@ var A = {
 				parsePatterns: { any: [/^av/i, /^ap/i] },
 				defaultParseWidth: "any"
 			}),
-			quarter: p({
+			quarter: f({
 				matchPatterns: {
 					narrow: /^T?[1234]/i,
 					abbreviated: /^[1234](er|ème|e)? trim\.?/i,
@@ -320,7 +320,7 @@ var A = {
 				defaultParseWidth: "any",
 				valueCallback: (e) => e + 1
 			}),
-			month: p({
+			month: f({
 				matchPatterns: {
 					narrow: /^[jfmasond]/i,
 					abbreviated: /^(janv|févr|mars|avr|mai|juin|juill|juil|août|sept|oct|nov|déc)\.?/i,
@@ -359,7 +359,7 @@ var A = {
 				},
 				defaultParseWidth: "any"
 			}),
-			day: p({
+			day: f({
 				matchPatterns: {
 					narrow: /^[lmjvsd]/i,
 					short: /^(di|lu|ma|me|je|ve|sa)/i,
@@ -389,7 +389,7 @@ var A = {
 				},
 				defaultParseWidth: "any"
 			}),
-			dayPeriod: p({
+			dayPeriod: f({
 				matchPatterns: {
 					narrow: /^(a|p|minuit|midi|mat\.?|ap\.?m\.?|soir|nuit)/i,
 					any: /^([ap]\.?\s?m\.?|du matin|de l'après[-\s]midi|du soir|de la nuit)/i
@@ -415,11 +415,11 @@ var A = {
 	}
 };
 function V() {
-	let e = u()?.language ?? "en", t = b(() => B[e] ?? h, [e]);
+	let e = u()?.language ?? "en", t = b(() => B[e] ?? m, [e]);
 	return {
 		language: e,
 		locale: t,
-		format: v((e, n) => g.format(e, n, t), [t])
+		format: v((e, n) => h.format(e, n, t), [t])
 	};
 }
 //#endregion

package/dist/{use-material-translation-BJucC_xe.js → use-material-translation-DYrfV_JJ.js}

@@ -1,4 +1,4 @@
-import { i as e, t } from "./translate-material-CZTGqgen.js";
+import { i as e, t } from "./translate-material-D4rn5UaQ.js";
 import { useCallback as n } from "react";
 //#region lib/i18n/use-material-translation.ts
 function r() {

package/dist/{use-return-focus-BS1JLcnq.js → use-return-focus-C_Qz_yTk.js}

@@ -1,6 +1,6 @@
 import { o as e, r as t } from "./dist-DVRQkaTK.js";
 import { i as n, n as r, r as i, t as a } from "./dist-DWZXlCZR.js";
-import { C as o, S as s, x as c } from "./spinner-RITOxvpH.js";
+import { C as o, S as s, x as c } from "./spinner-DH1mm8hH.js";
 import { a as l, i as u, r as d } from "./dist-DHdUUM1w.js";
 import { c as f, i as p, l as m, o as h, r as g, s as ee } from "./in-dialog-D61Yeaol.js";
 import { r as te } from "./escape-owner-DpaP0lm1.js";

package/docs/README.md

@@ -26,7 +26,7 @@ detail: every option, the second example, and the traps.
 | [Streaming (HLS)](guides/media-streaming.md) | You play `.m3u8` streams in `MediaPlayer` with `@nxgt/material/media-hls` |
 | [Maps](guides/maps.md) | You render Leaflet maps or a location field with `@nxgt/material/map` |
 | [Drawing](guides/drawing.md) | You draw diagrams, badges or illustrations from code with `@nxgt/material/draw`: scenes and JSX primitives, roles and tones, a strict CSP, accessibility and events, sketch, animation, PNG, PDF and e-mail |
-| [Illustrations](guides/illustrations.md) | You draw state illustrations from your Font Awesome sprites with `@nxgt/material/illustrations`: the twelve scenes and the health and education sets, `EmptyState` / `ErrorState` / `DataTable` with `illustration`, `IllustrationDefaults` for an app, sizes, motion and CSP |
+| [Illustrations](guides/illustrations.md) | You draw state illustrations from your Font Awesome sprites with `@nxgt/material/illustrations`: the twelve scenes and the health, education and game sets, `EmptyState` / `ErrorState` / `DataTable` with `illustration`, `IllustrationDefaults` for an app, sizes, motion and CSP |
 | [Icon motifs](guides/icon-motifs.md) | You use icon backgrounds, celestial skies, illustrations or a theme that names a motif: serving your own Font Awesome sprites (the package ships none), `IconSpritesProvider`, `icons` / `iconStyle` / `iconMotif`, `sky`, the health and education sets, Free fallbacks for Pro-only names |
 | [Backgrounds](guides/backgrounds.md) | You want a gradient or patterned backdrop: tones, intensity, the opt-in `backgrounds.css`, custom colours, motion and CSP |
 | [SSR](guides/ssr.md) | Your app renders on a server and bundles this package |

package/docs/components/data-display.md

@@ -21,6 +21,7 @@ from `@nxgt/material/components`.
 | <img src="../previews/data-display-metric-cards.webp" width="96" alt=""> | [Metric cards](#metric-cards) | Sixteen dashboard tiles |
 | <img src="../previews/data-display-card-presets.webp" width="96" alt=""> | [Card presets](#card-presets) | Twenty-seven ready-made cards |
 | <img src="../previews/data-display-statusindicator.webp" width="96" alt=""> | [StatusIndicator](#statusindicator) | Coloured status dot with a label |
+| <img src="../previews/data-display-tubecap.webp" width="96" alt=""> | [TubeCap](#tubecap) | A specimen tube's chip: a cap in its fixed convention colour, the container's name beside it, optional volume, accession and action |
 | <img src="../previews/data-display-summarydata.webp" width="96" alt=""> | [SummaryData](#summarydata) | Label / value pairs as a grid or inline |
 | <img src="../previews/data-display-description.webp" width="96" alt=""> | [Description](#description) | One read-only label / value pair |
 | <img src="../previews/data-display-descriptionlist.webp" width="96" alt=""> | [DescriptionList](#descriptionlist) | A dense auto-fill grid of label / value pairs in a `dl`, with a panels variant |
@@ -193,7 +194,7 @@ no `style` attribute and a strict CSP is fine.
 - Seat changes are not animated beyond a colour fade, which stops under
   `prefers-reduced-motion`.
 
-**Storybook:** `Data display/SeatRing` · **Vue:** not yet (#1931)
+**Storybook:** `Data display/SeatRing` · **Vue:** not yet (#2470) (#1931)
 
 ---
 
@@ -268,7 +269,7 @@ const [open, setOpen] = useState(false);
   the layout follows `dir` (RTL) and dark mode.
 - Keep `front` and `description` free of the secret: they are always in the page.
 
-**Storybook:** `Data display/SecretCard` · **Vue:** not yet (#1938)
+**Storybook:** `Data display/SecretCard` · **Vue:** not yet (#2470) (#1938)
 
 ---
 
@@ -425,7 +426,7 @@ import { CountBadge, IconButton } from '@nxgt/material/components';
 
 ![HighlightedText](../previews/data-display-highlightedtext.webp)
 
-A string with the words of a search query in a themed `<mark>`. Case, accents and ligatures are folded (`œ` is `oe`, `æ` is `ae`, `ß` is `ss`), and a query word matches at the start of a word, as a search engine's normaliser does.
+A string with the words of a search query in a themed `<mark>`. Case, accents and ligatures are folded (`œ` is `oe`, `æ` is `ae`, `ß` is `ss`), and a query word matches at the start of a word, as a search engine's normaliser does. The `Guides/Recipes/Search dialog and results page` story marks the matches in command rows and result cards with it.
 
 ```tsx
 import { HighlightedText, highlightRanges } from '@nxgt/material/components';
@@ -790,6 +791,33 @@ import { StatusIndicator } from '@nxgt/material/components';
 
 ---
 
+## TubeCap
+
+![TubeCap](../previews/data-display-tubecap.webp)
+
+A chip for a specimen tube. The cap colour comes from the international tube convention, so it is a fixed value: it does not follow the theme and is the same in light and dark. The container's name is written beside the cap (`label` is required), so colour never carries the meaning alone; the text uses the theme's foreground, which keeps the theme's 4.5:1 contrast.
+
+```tsx
+import { TubeCap } from '@nxgt/material/components';
+
+<TubeCap kind="edta" label="EDTA" volume="4 mL" accession="L00000042-1" />
+```
+
+| Prop | Type | Default | Effect |
+| --- | --- | --- | --- |
+| `kind` | `'edta' \| 'heparin' \| 'citrate' \| 'esr' \| 'serum' \| 'gel' \| 'fluoride' \| 'trace' \| 'other'` | required | the cap colour: lavender, green, light blue, black, red, gold, grey, royal blue, plain |
+| `label` | `ReactNode` | required | the container's name beside the cap; it also names the chip (`role="group"`) |
+| `volume` | `ReactNode` | none | the volume, as text |
+| `accession` | `ReactNode` | none | the tube's accession label |
+| `action` | `ReactNode` | none | trailing slot, such as an `IconButton` |
+| `size` | `'sm' \| 'default' \| 'lg'` | `'default'` | cap of 20, 28 or 40px |
+
+`TUBE_CAP_KINDS` lists the kinds. The look is CSS on `data-kind`, with no inline style (strict CSP). The cap is `aria-hidden`.
+
+**Storybook:** `Data display/TubeCap` · **Vue:** `TubeCap` (`@nxgt/material-vue/components`)
+
+---
+
 ## SummaryData
 
 ![SummaryData](../previews/data-display-summarydata.webp)
@@ -1339,7 +1367,7 @@ and the user's zone) and both sides agree:
 <ChangeHistory entries={entries} now={loaderData.now} timeZone={loaderData.timeZone} />
 ```
 
-**Storybook:** `Data display/ChangeHistory` · **Vue:** not yet (tracked as a `vue` issue)
+**Storybook:** `Data display/ChangeHistory` · **Vue:** not yet (#2470) (tracked as a `vue` issue)
 
 ---
 
@@ -1376,7 +1404,7 @@ The offset follows the instant (`Europe/Paris` is `UTC+1` in winter and
 `UTC+2` in summer). `ChangeHistory` takes a `timeZone` and `RelativeTime` a `now`
 the same way; pass the app's zone from the server so every screen agrees.
 
-**Storybook:** `Data display/ZonedTime` · **Vue:** not yet (tracked as a `vue` issue)
+**Storybook:** `Data display/ZonedTime` · **Vue:** not yet (#2470) (tracked as a `vue` issue)
 
 ---
 
@@ -1445,7 +1473,7 @@ own, so they add up to less.
 - Bar widths are SVG attributes, so server markup has no `style` attribute and
   a strict CSP is fine.
 
-**Storybook:** `Data display/VoteTally` · **Vue:** not yet (#1940)
+**Storybook:** `Data display/VoteTally` · **Vue:** not yet (#2470) (#1940)
 
 ---
 
@@ -1778,7 +1806,7 @@ lock set by another code form disables its field and leaves Cancel usable.
 button by `getByRole('button', { name: 'Activate' })` and the lock by
 `getByRole('alert')`.
 
-**Storybook:** `Data display/EnrolmentCard`, `…/Shared lock`, `Guides/Accessibility/Touch targets/Verification code` · **Vue:** not yet
+**Storybook:** `Data display/EnrolmentCard`, `…/Shared lock`, `Guides/Accessibility/Touch targets/Verification code` · **Vue:** not yet (#2470)
 
 ---
 
@@ -1921,4 +1949,4 @@ import { RecoveryCodesStatus, VerificationLockProvider } from '@nxgt/material/co
 
 It reads the page-wide lock like [EnrolmentCard](#enrolmentcard) does. With `requireCode={false}` there is no code form, so `error` and `attemptsLeft` are not shown: the plain button follows `pending`, and is disabled by `locked` and by the page-wide lock; then the lock's text (the message of the answer that locked, or "Too many wrong codes. Try again later.") shows above it as a muted line that describes the button.
 
-**Storybook:** `Data display/RecoveryCodesStatus`, `Data display/EnrolmentCard/Shared lock` · **Vue:** not yet
+**Storybook:** `Data display/RecoveryCodesStatus`, `Data display/EnrolmentCard/Shared lock` · **Vue:** not yet (#2470)

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

@@ -864,8 +864,9 @@ export default function Students() {
   search. When rows come back while the focus was on the empty page, it
   goes to the search; rows that come back on their own leave the focus
   alone. The empty page stays while the next answer loads (`data-busy`).
-- **A failed fetch.** Pass `error` (`{ title?, description?, cause?, kind? }`,
-  `null` when there is none; `kind` takes `ErrorState`'s kinds, `generic`
+- **A failed fetch.** Pass `error` (`{ title?, description?, cause?, kind?, illustration? }`,
+  `null` when there is none; `illustration` is a scene id, a node, `true` or
+  `false`, as on `ListEmptyPage`, and replaces the scene `kind` picks; `kind` takes `ErrorState`'s kinds, `generic`
   (default), `offline` or `maintenance`; `title` and `description` default to
   the two strings below, `cause` to none) and `onRetry`: the failure replaces the rows,
   the header, the footer and the empty page, with a Retry (a returned promise,
@@ -1667,6 +1668,7 @@ import { DayGroupedList } from '@nxgt/material/components';
 | `labels` | `Partial<Record<DayGroupKey, ReactNode>>` | — | replaces a heading |
 | `sticky` | `boolean` | `true` | headings stick while their items scroll |
 | `showCount` | `boolean` | `false` | the count beside each heading |
+| `headingLevel` | `2 \| 3 \| 4 \| 5 \| 6` | `3` | the level of each heading (`<h2>`…`<h6>`), to follow the heading above the list |
 | `headerClassName` / `listClassName` | `string` | — | a heading's background on a tinted parent, the `<ul>`'s dividers |
 
 **Storybook:** `Data table, filter & lists/DayGroupedList` · **Vue:** — (later)
@@ -2992,7 +2994,9 @@ import { Avatar, ListPane, ListPaneItem } from '@nxgt/material/components';
 `trailing`, `selected`, `focused` (a ring while its `group/listbox` parent has
 visible focus), `disabled`, `density` (`comfortable` or `compact`, one line),
 `appearance` (`plain` or `card`) and `lifted` (raised, as under a drag). It is
-purely visual: give it the role and the events of the list it sits in. The
+purely visual: give it the role and the events of the list it sits in. A
+`title` or `description` cut by the ellipsis keeps its full text in a `title`
+attribute (when it is a string). The
 badge steps aside when the pane is narrower than 20rem.
 
 The height reaches the body as a CSS custom property set from script, never

package/docs/components/form-fields.md

@@ -245,6 +245,7 @@ export function PlanForm({ onSave }: { onSave: (values: Values) => void }) {
 | `reorderable` | `boolean` | `false` | move up / move down buttons on each row |
 | `max` | `number` | — | at this many rows, Add is disabled and says why |
 | `min` | `number` | — | at this many rows, Remove is disabled |
+| `removeAtMin` | `'disable' \| 'hide'` | `'disable'` | at `min` rows, `'hide'` does not render Remove instead of disabling it |
 | `removable` | `(row, index) => boolean` | every row | a row it refuses keeps its Remove button `aria-disabled` (focusable; activating it does nothing). `row` is the `useFieldArray` field (`RepeatableGroupFormField`) or your item |
 | `removeDisabledReason` | `(row, index) => string \| undefined` | — | why a row cannot be removed: its Remove button's tooltip (on hover, focus, tap and click) and `aria-describedby` description |
 | `emptyTitle`, `emptyDescription` | `ReactNode` | — | an `EmptyState` when there is no row |
@@ -1347,6 +1348,11 @@ import { InlineEdit } from '@nxgt/material/components';
 | `onSave` | `(value: string) => void` | — | on save (Enter or the check button), not on each key |
 | `placeholder` | `string` | "Click to edit" | shown while empty |
 | `disabled` | `boolean` | `false` | read-only text |
+| `variant` | Typography step (`headline-lg`, …) | body | the type step of the saved text and of the input, so a title reads as a title |
+| `headingLevel` | `1 \| 2 \| 3 \| 4 \| 5 \| 6` | none | renders the text (and the input while editing) in an `<h1>`…`<h6>`, so the field can be a document's title; the button and input keep their name |
+| `defaultEditing` | `boolean` | `false` | starts with the input open, and focuses it on mount (a new, untitled document) |
+| `aria-label` | `string` | — | the input's name when there is no `label`; with `headingLevel`, set `label` or `aria-label` (the heading then reads the value, then the label) |
+| `editing` / `onEditingChange` | `boolean` / `(editing: boolean) => void` | — | controls whether the input is open (`disabled` keeps it closed) |
 
 Enter, Escape, Save and Cancel return focus to the field, while a click
 elsewhere saves and leaves focus where it went.

package/docs/components/media-and-files.md

@@ -624,6 +624,7 @@ with a `+N` tile).
 | `selectable` | `boolean` | — | checkboxes on tiles; `onSelectionChange(ids)` |
 | `open` / `defaultOpen` / `onOpenChange` | `boolean` | — | control the lightbox |
 | `onDelete` | `(item) => void` | — | adds a delete button on each tile |
+| `aria-label` / `aria-labelledby` | `string` | `'Gallery'` label | names the gallery (the root has `role="application"`); a given `aria-labelledby` replaces the default label. `MiniGallery` and `LightboxGallery` take both. Other `div` props (`id`, `data-*`, `onKeyDown`) reach the root element |
 
 **States.** Tiles use the `md` corner and round to `lg-plus` on hover (an
 effects easing, so the radius never overshoots) with a spring press scale. A

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

@@ -536,8 +536,9 @@ the page. It takes a `div`'s props.
   `Button`; a second filled `Button` among the children warns once in
   development, make the others `outlined` or `tonal`.
 - **Surface.** Below `md` the bar paints `--background` (it is stuck over the content); from `md`, and with `sticky={false}`, it paints nothing and takes its parent's surface, such as a `Card`.
+- **Edges.** The bar adds no horizontal padding: its leading and trailing edges are those of the column it sits in, sticky or inline, so its buttons line up with the cards and fields above. Pad the column, not the bar.
 - **Safe areas.** Under `viewport-fit=cover` the bar pads clear of
-  `env(safe-area-inset-left | right | bottom)`, as classes.
+  `env(safe-area-inset-left | right | bottom)` (the sides only below `md`), as classes.
 - **Keyboard.** From the visual viewport (`visualViewport`), the bar rises by
   the height the on-screen keyboard covers (`--nxgt-keyboard-inset` on the bar,
   `data-keyboard="open"` while it is open) and drops the bottom safe-area
@@ -1006,6 +1007,7 @@ const [order, setOrder] = useState(savedLayout); // string[] of tile ids
 | --- | --- | --- | --- |
 | `id` | `string` | required | The tile's name in `order`; unique in the grid |
 | `title` | `ReactNode` | none | An `h3` at the top, the tile's accessible name and its handle's name |
+| `headingLevel` | `2 \| 3 \| 4 \| 5 \| 6` | `3` | The level of the title (`<h2>`…`<h6>`), to follow the heading above the grid |
 | `span` / `rowSpan` | as `ResponsiveGrid.Item` | 1 | Columns and rows covered, held to the grid's columns at each width |
 | `plain` | `boolean` | `false` | No card of its own (border, background, padding), for a child that is a card already |
 | `label` | `string` | the title, else the id | The name used by the handle and the announcements when `title` is not text |

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

@@ -157,8 +157,12 @@ The look lives in the stylesheet (`nxgt-dialog`, `nxgt-scrim`), under the
 utilities: a class you pass wins. The flat look of 2.x before it is
 `className="rounded-lg border bg-background shadow-lg"` on `DialogContent`
 (and `className="bg-black/50"` on a `DialogOverlay` of your own).
-`DialogFooter` stacks its actions full width on a phone, the main one at the
-bottom. `stackOnPhone={false}` keeps one row instead, the first
+`DialogFooter` stacks its actions full width on a phone. **One order for
+`DialogFooter`, `SheetFooter` and `AlertDialogFooter`:** write the actions in
+reading order, the secondary first and the main one last (`Cancel`, `Save`).
+On a wide screen the dialog puts them in a row with the main one on the right;
+on a phone the stack puts the main one on top and the secondary below it, in a
+dialog and in a sheet alike. `stackOnPhone={false}` keeps one row instead, the first
 action on the left and the last on the right, for two short actions such as
 Cancel and Confirm. With `prefers-reduced-motion`, nothing moves: it appears and goes.
 
@@ -271,7 +275,9 @@ Parts: `Sheet`, `SheetTrigger`, `SheetContent`, `SheetHeader`, `SheetTitle`,
 
 `SheetContent` scrolls inside itself, and a top or bottom sheet is capped at
 `100dvh - 3.5rem`. Override the cap with `max-h-*` through `className`.
-`SheetFooter` makes its buttons full width. The former look is
+`SheetFooter` makes its buttons full width, stacked in the same order as
+`DialogFooter` on a phone: write the secondary first and the main action last,
+the main one is on top. The former look is
 `className="rounded-none border-l bg-background shadow-lg"` (the border on the
 side facing the page), and `className="w-3/4"` for the former width.
 
@@ -339,7 +345,7 @@ A bottom drawer spans a phone's width and is centred, at most 672 px wide,
 from 640 px up; `className="mx-auto max-w-md"` on `DrawerContent` centres a
 narrower one, `sm:max-w-none` spans the viewport again, and
 `className="rounded-t-lg bg-background"` is the former look. `DrawerFooter`
-makes its buttons full width. Prefer it to `Sheet` on touch screens.
+makes its buttons full width and keeps source order (first written on top). Prefer it to `Sheet` on touch screens.
 `DrawerContent` moves focus in on open and hands it back on close as
 `DialogContent` does (`Drawer` turns Vaul's `autoFocus` on; `autoFocus={false}`
 keeps focus where it was): back to the
@@ -641,7 +647,7 @@ in a desktop application.
 
 ![Command](../previews/overlays-menus-command.webp)
 
-Command palette with filtering, groups and shortcuts. `CommandDialog` shows it in a modal, with a visible close button (`showCloseButton`, on by default; `false` removes it) at the end of the input row: named "Close" (`material.buttons.close`) and 44px on a coarse pointer, since a phone has no Escape key.
+Command palette with filtering, groups and shortcuts. `CommandDialog` shows it in a modal, with a visible close button (`showCloseButton`, on by default; `false` removes it) at the end of the input row: named "Close" (`material.buttons.close`) and 44px on a coarse pointer, since a phone has no Escape key. For results the server already filtered (`commandProps={{ shouldFilter: false }}`), with debounced suggestions grouped by type, see the `Guides/Recipes/Search dialog and results page` story.
 
 ```tsx
 import {

package/docs/components/rich-widgets.md

@@ -252,6 +252,8 @@ cannot be dragged to another tab; use Move to or Ctrl/Cmd + arrows.
 
 Month / week / day / agenda calendar with drag, resize and slot creation, a
 now line, an optional mini-month side panel and a phone layout of its own.
+With `mode="template"` it edits a recurring week instead (weekday columns, no
+dates), see [Template week](#eventcalendar-template-week).
 
 It reads its **own width**, not the window's, so it adapts inside a narrow
 column too. From 1024px `sidebar` shows a [MiniMonth](date-and-time.md#minimonth)
@@ -307,6 +309,7 @@ function Schedule() {
 | `scrollToHour` | `number` | `7` | the hour the week and day views open on when today is not shown |
 | `resources` | `EventCalendarResource[]` | — | the day view draws one column per resource, see [Resources](#eventcalendar-resources) |
 | `timeZone` | `string` | the machine's | an IANA zone the grid, today and the times follow, see [Time zone](#eventcalendar-time-zone) |
+| `mode` | `'dated' \| 'template'` | `'dated'` | `'template'` is a recurring week with weekday columns and no dates, see [Template week](#eventcalendar-template-week) |
 
 **Short events.** Events that do not overlap in time share a column and keep the
 full width. An event is drawn at least 24px tall only where there is free space
@@ -372,6 +375,87 @@ const events: CalendarEvent[] = [
   date (`Room A, Thursday, March 12th, 2026`), and an event's name includes
   its resource (`Visit 1, Room A`).
 
+### EventCalendar template week
+
+`mode="template"` edits a **recurring week** instead of a dated one: a weekly
+timetable, an opening-hours grid. The columns are named by weekday only (a
+letter on a phone, the full name from 1024px), and there is no date
+navigation, no Today button, no today marker and no now line. Events,
+slots and changes are keyed by **ISO weekday** (1 Monday to 7 Sunday) and
+`HH:mm` times, never by a date. Create (click or drag across free hours),
+move, resize, the keyboard moves and the preview popover keep working.
+The month, day and agenda views do not apply: `view` is `'week'` (the
+default) or `'workweek'` (Monday to Friday), and the week always starts on
+Monday.
+
+```tsx
+import { useState } from 'react';
+import { EventCalendar, type EventCalendarTemplateEvent } from '@nxgt/material/components';
+
+function Timetable() {
+	const [events, setEvents] = useState<EventCalendarTemplateEvent[]>([
+		{ id: 'm', title: 'Maths', weekday: 1, start: '08:00', end: '09:00' },
+		{ id: 'p', title: 'Physics', weekday: 1, start: '09:00', end: '10:30', lane: 'A' },
+		{ id: 'c', title: 'Chemistry', weekday: 1, start: '09:00', end: '10:30', lane: 'B' },
+	]);
+	return (
+		<EventCalendar
+			mode="template"
+			events={events}
+			onEventsChange={setEvents}
+			lanes={[
+				{ id: 'A', label: 'Week A' },
+				{ id: 'B', label: 'Week B' },
+			]}
+			onSlotClick={({ weekday, start, end, lane }) =>
+				setEvents((current) => [
+					...current,
+					{ id: crypto.randomUUID(), title: 'New lesson', weekday, start, end, lane },
+				])
+			}
+		/>
+	);
+}
+```
+
+| Prop | Type | Default | Effect |
+| --- | --- | --- | --- |
+| `mode` | `'template'` | `'dated'` | the recurring week; `'dated'` (the default) is the calendar above |
+| `events` / `defaultEvents` | `EventCalendarTemplateEvent[]` | — | `{ id, title, weekday, start, end, lane?, color?, description?, disabled? }`; `end` may be `'24:00'` |
+| `onEventsChange` | `(events: EventCalendarTemplateEvent[]) => void` | — | the whole list after a move, a resize, an edit or a delete |
+| `onChange` | `(change: EventCalendarTemplateChange) => void` | — | `{ events, event, previous }` after a move, a resize or an edit |
+| `onEventClick` | `(event: EventCalendarTemplateEvent) => void` | — | an event was clicked |
+| `onSlotClick` | `(slot: EventCalendarTemplateSlot) => void` | — | `{ weekday, start, end, lane? }` of the free slot clicked or dragged over; `lane` is the one picked in the switch |
+| `view` / `defaultView` / `onViewChange` | `'week' \| 'workweek'` | `'week'` | the visible view |
+| `renderEvent` | `(event: EventCalendarTemplateEvent) => ReactNode` | — | replaces how an event is drawn |
+| `className` | `string` | — | on the calendar's root |
+| `lanes` | `EventCalendarLane[]` | — | `{ id, label }` of the alternating weeks (`A`, `B`); adds a switch to the toolbar |
+| `lane` / `defaultLane` / `onLaneChange` | `string \| null` | `null` (all) | the lane shown; `null` shows them all |
+
+**Lanes.** An event with a `lane` belongs to that alternating week only; one
+with none belongs to every week. Picking a lane in the switch hides the other
+lanes' events, so one week is edited at a time; with **All weeks** every event shows,
+and the ones with a lane carry its label (`A · Physics`), side by side where they
+overlap. A slot made while a lane is picked reports it in `slot.lane`.
+Moving and resizing keep an event's lane.
+
+The shared options (`startHour`, `endHour`, `hourHeight`,
+`slotDurationMinutes`, `density`, `eventVariant`, `scrollToHour`, `toolbar`,
+`searchable`, `disabled`) work as in the dated calendar; `renderEvent` and
+`className` are in the table above. `date`, `resources`, `timeZone`,
+`sidebar`, `phoneView`, `views` and `weekStartsOn` do not apply. All-day
+events do not exist in a template week.
+
+Ctrl+Arrow moves the focused event within the visible days (Friday wraps to
+Monday in a `workweek`) and stops at 00:00 and 24:00. `ComponentProps<typeof
+EventCalendar>` is the union of the dated and template props: type a wrapper
+with `EventCalendarProps` or `EventCalendarTemplateProps`.
+
+The types are exported from `@nxgt/material/components`: `EventCalendarTemplateProps`
+(the props of this mode), `EventCalendarTemplateEvent`, `EventCalendarTemplateSlot`,
+`EventCalendarTemplateChange`, `EventCalendarLane` and `EventCalendarWeekday`
+(`1 | 2 | … | 7`, the ISO weekday).
+
 ### EventCalendar time zone
 
 `timeZone` (an IANA name such as `Africa/Lagos`) makes the calendar read that
@@ -409,7 +493,7 @@ zone's wall clock. Without it, nothing changes: the machine's clock.
 <EventCalendar view="day" date="2026-03-12" timeZone="Asia/Tokyo" events={events} />
 ```
 
-**Storybook:** `Rich widgets/EventCalendar`, `Rich widgets/EventCalendar/Layouts`, `Rich widgets/EventCalendar/Resources`, `Rich widgets/EventCalendar/Resources on a phone`, `Rich widgets/EventCalendar/Resources a11y`, `Rich widgets/EventCalendar/Time zone`, `Rich widgets/EventCalendar/Back to back`, `Rich widgets/EventCalendar/Resource tone`, `Rich widgets/EventCalendar/Hydration` · **Vue:** `EventCalendar` (the new props and layouts, `resources` and `timeZone`: React only for now, #892 and #1780)
+**Storybook:** `Rich widgets/EventCalendar`, `Rich widgets/EventCalendar/Layouts`, `Rich widgets/EventCalendar/Resources`, `Rich widgets/EventCalendar/Resources on a phone`, `Rich widgets/EventCalendar/Resources a11y`, `Rich widgets/EventCalendar/Time zone`, `Rich widgets/EventCalendar/Back to back`, `Rich widgets/EventCalendar/Resource tone`, `Rich widgets/EventCalendar/Hydration`, `Rich widgets/EventCalendar/Template week` · **Vue:** `EventCalendar` (the new props and layouts, `resources`, `timeZone` and `mode="template"`: React only for now, #892, #1780 and #2458)
 
 ---