@nxgt/material 3.82.0 → 3.84.0

package/dist/{use-chat-composer-BfFcmDua.js → use-chat-composer-BqLkk_iH.js}

@@ -4,28 +4,28 @@ import { t as n } from "./utils-BLfntITJ.js";
 import { n as r } from "./use-shape-morph-BKA_R5P5.js";
 import { n as i, o as a, t as o } from "./dist-DVRQkaTK.js";
 import { i as s, n as c, r as l, t as u } from "./dist-DWZXlCZR.js";
-import { _ as d, a as f, b as p, g as m, h, i as g, m as _, n as v, o as y, r as b, s as x, t as S, v as C, y as w } from "./spinner-DH1mm8hH.js";
+import { _ as d, a as f, b as p, g as m, h, i as g, m as _, n as v, o as y, r as b, s as x, t as S, v as C, y as w } from "./spinner-C6LP2Rw8.js";
 import { a as T, i as E, n as D, r as O, t as k } from "./dist-DHdUUM1w.js";
 import { a as A, i as ee } from "./dist-DOK3zo5C.js";
 import { i as j, n as M } from "./in-dialog-D61Yeaol.js";
-import { c as N, l as P, n as te, r as F, t as ne } from "./alert-dialog-DXLJ4AZP.js";
+import { c as N, l as P, n as te, r as F, t as ne } from "./alert-dialog-1t6ULy5i.js";
 import { A as re, C as ie, D as ae, E as oe, O as se, S as I, T as ce, _ as le, a as ue, b as de, d as fe, f as pe, g as me, h as he, i as ge, k as _e, l as ve, m as ye, n as be, o as xe, p as Se, r as Ce, s as we, t as Te, u as Ee, v as De, w as Oe, x as ke, y as Ae } from "./floating-ui.dom-KkZSW8_E.js";
-import { D as je, E as Me, N as Ne, O as Pe, c as Fe, d as Ie, f as Le, i as Re, k as ze, m as Be, n as Ve, o as He, p as Ue, t as We, u as Ge } from "./dropdown-menu-C6rcYGB9.js";
+import { D as je, E as Me, N as Ne, O as Pe, c as Fe, d as Ie, f as Le, i as Re, k as ze, m as Be, n as Ve, o as He, p as Ue, t as We, u as Ge } from "./dropdown-menu-CDKev8dk.js";
 import { a as Ke, i as qe, n as Je } from "./field-blur-context-BLGgf_3z.js";
-import { i as Ye, n as Xe, r as Ze, t as Qe } from "./popover-YmbzbKQG.js";
+import { i as Ye, n as Xe, r as Ze, t as Qe } from "./popover-3EF4q2CT.js";
 import { a as $e, i as et, n as tt, o as nt, t as rt } from "./bubble-input-CQwVSoU3.js";
-import { n as it, r as at, t as ot, u as st } from "./tabs-Um0SFyf1.js";
-import { a as ct, n as lt, o as ut, s as dt, v as ft, y as pt } from "./toolbar-items-BoEY5bkt.js";
+import { n as it, r as at, t as ot, u as st } from "./tabs-Bj1zOe7-.js";
+import { a as ct, n as lt, o as ut, s as dt, v as ft, y as pt } from "./toolbar-items-CEIuSxU_.js";
 import { t as mt } from "./dist-DkQbkF9T.js";
 import { o as ht, s as gt, t as _t } from "./use-click-lock-Bwg_caHO.js";
 import { a as vt, r as yt } from "./icon-sprites-CaYXzOL4.js";
 import { t as bt } from "./warn-once-C_e47JM8.js";
-import { r as xt, t as St } from "./button-CSKUtMI3.js";
-import { a as Ct } from "./translator-CcEgQ-H7.js";
+import { r as xt, t as St } from "./button-DhiNGrdT.js";
+import { a as Ct } from "./translator-BstxG_hN.js";
 import { h as wt } from "./get-CTzJAwfc.js";
 import { t as Tt } from "./isEmpty-F_g3jLf8.js";
-import { t as L } from "./use-material-translation-DYrfV_JJ.js";
-import { t as R } from "./icon-button-4PKlaI1g.js";
+import { t as L } from "./use-material-translation-1kCHtB0p.js";
+import { t as R } from "./icon-button-CG4aO8Gh.js";
 import { t as Et } from "./use-ssr-media-query-C6M5m8sf.js";
 import { n as Dt, t as Ot } from "./typography-CYEquVeb.js";
 import { n as kt, t as At } from "./util-4heV2LPI.js";
@@ -36,14 +36,14 @@ import { a as Bt } from "./toggle-group-CVMxEpWi.js";
 import { n as Vt } from "./use-slice-reducer-BGkeGtML.js";
 import { t as Ht } from "./browser-only-DQ94lWF8.js";
 import { t as Ut } from "./compose-refs-G4J4kaUA.js";
-import { n as Wt, r as Gt, t as Kt } from "./chip-BGn0V6Pt.js";
+import { n as Wt, r as Gt, t as Kt } from "./chip-m0_usuzd.js";
 import { a as qt, c as Jt, o as Yt, r as Xt, s as Zt, t as Qt } from "./input-CC2joTjB.js";
 import { t as $t } from "./text-field-BAdY-kpO.js";
 import { r as en } from "./use-csp-nonce-ZKs9k-ov.js";
-import { t as tn } from "./empty-state-CSkghnD9.js";
+import { t as tn } from "./empty-state-C56000TB.js";
 import { t as nn } from "./skeleton-DSdtr2qc.js";
-import { l as rn, n as an, o as on, r as sn, s as cn, t as ln, u as un } from "./dialog-B-3s-oXt.js";
-import { t as dn } from "./icon-badge-3ThP6EOl.js";
+import { l as rn, n as an, o as on, r as sn, s as cn, t as ln, u as un } from "./dialog-DmlG9opW.js";
+import { t as dn } from "./icon-badge-ec7MmUGA.js";
 import { H as fn, V as pn, X as mn, bt as hn, it as gn, lt as _n, n as vn, t as yn, xt as bn, yt as xn } from "./dist-moutbfbd.js";
 import { t as Sn } from "./markdown-Dw_uH7j7.js";
 import { r as Cn, t as wn } from "./create-store-Dqp-PLLn.js";
@@ -11229,7 +11229,7 @@ var aS = (e = {}) => Cn({
 		let [{ default: t }, { lowlight: n }, { richCodeBlock: r }] = await Promise.all([
 			import("./dist-CRMFGjng.js"),
 			import("./lowlight-OtcjU2Sa.js"),
-			import("./rich-code-block-BuJLDoBu.js")
+			import("./rich-code-block-DmX7d58S.js")
 		]);
 		return [r(t, {
 			lowlight: n,
@@ -20005,18 +20005,22 @@ function RN({ className: e }) {
 //#endregion
 //#region lib/components/ui/media/galleries/partials/gallery-selection-bar.tsx
 function zN() {
-	let { state: e, selectable: t, clearSelection: n } = KC(), { t: r } = L();
+	let { state: e, selectable: t, selectionActions: n, clearSelection: r } = KC(), { t: i } = L();
 	return !t || e.selectedIds.length === 0 ? null : /* @__PURE__ */ K("div", {
 		"data-slot": "gallery-selection-bar",
 		className: "mb-2 flex flex-wrap items-center justify-between gap-2 rounded-(--nxgt-shape-corner-lg) border border-border bg-background px-3 py-2",
 		children: [/* @__PURE__ */ G(Ot, {
 			className: "text-sm",
-			children: r("material.gallery.selected", "{count} selected", { count: e.selectedIds.length })
-		}), /* @__PURE__ */ G(St, {
-			variant: "ghost",
-			color: "default",
-			onClick: n,
-			children: r("material.gallery.clear-selection", "Clear selection")
+			children: i("material.gallery.selected", "{count} selected", { count: e.selectedIds.length })
+		}), /* @__PURE__ */ K("div", {
+			"data-slot": "gallery-selection-actions",
+			className: "flex flex-wrap items-center gap-2",
+			children: [typeof n == "function" ? n(e.selectedIds) : n, /* @__PURE__ */ G(St, {
+				variant: "ghost",
+				color: "default",
+				onClick: r,
+				children: i("material.gallery.clear-selection", "Clear selection")
+			})]
 		})]
 	});
 }
@@ -20342,68 +20346,69 @@ function oP({ open: e, close: t, currentIndex: n, lightboxOpen: r }) {
 //#endregion
 //#region lib/components/ui/media/galleries/use-gallery.ts
 function sP(e) {
-	let { items: t, defaultIndex: n = 0, defaultOpen: r = !1, onDelete: i, trigger: a, selectable: o = !1 } = e, s = eP(e), [c, l] = Vt(UM, {
+	let { items: t, defaultIndex: n = 0, defaultOpen: r = !1, onDelete: i, trigger: a, selectable: o = !1, selectionActions: s } = e, c = eP(e), [l, u] = Vt(UM, {
 		currentIndex: n,
-		loop: s.loop ?? !1,
+		loop: c.loop ?? !1,
 		lightboxOpen: r
 	});
-	nP(e, c, l);
-	let { next: u, prev: d, select: f, downloadCurrent: p } = XN(t, c, l), m = oP({
-		lightboxOpen: c.lightboxOpen,
-		open: l.openLightbox,
-		close: l.closeLightbox,
-		currentIndex: c.currentIndex
-	}), h = B((e, t) => {
-		s.lightbox ? m.openWith(e, t) : l.setIndex(e);
+	nP(e, l, u);
+	let { next: d, prev: f, select: p, downloadCurrent: m } = XN(t, l, u), h = oP({
+		lightboxOpen: l.lightboxOpen,
+		open: u.openLightbox,
+		close: u.closeLightbox,
+		currentIndex: l.currentIndex
+	}), g = B((e, t) => {
+		c.lightbox ? h.openWith(e, t) : u.setIndex(e);
 	}, [
-		s.lightbox,
-		l,
-		m.openWith
-	]), g = qN({
+		c.lightbox,
+		u,
+		h.openWith
+	]), _ = qN({
 		items: t,
-		state: c,
-		sliceActions: l,
-		resolved: s,
-		next: u,
-		prev: d,
-		close: m.closeWith,
-		downloadCurrent: p,
-		zoomable: t[c.currentIndex]?.kind !== "video"
+		state: l,
+		sliceActions: u,
+		resolved: c,
+		next: d,
+		prev: f,
+		close: h.closeWith,
+		downloadCurrent: m,
+		zoomable: t[l.currentIndex]?.kind !== "video"
 	});
 	return {
 		items: t,
-		resolved: s,
-		state: c,
-		current: WM.selectCurrent(c, t),
-		canNext: WM.selectCanNext(c, t.length),
-		canPrev: WM.selectCanPrev(c, t.length),
+		resolved: c,
+		state: l,
+		current: WM.selectCurrent(l, t),
+		canNext: WM.selectCanNext(l, t.length),
+		canPrev: WM.selectCanPrev(l, t.length),
 		onDelete: i,
 		trigger: a,
-		openAt: h,
-		select: f,
-		next: u,
-		prev: d,
-		closeLightbox: m.closeWith,
-		setZoom: l.setZoom,
-		setPan: l.setPan,
-		morph: m.morph,
-		toggleLoop: l.toggleLoop,
-		goToFirst: () => l.setIndex(0),
-		goToLast: () => l.setIndex(Math.max(0, t.length - 1)),
-		downloadCurrent: p,
+		openAt: g,
+		select: p,
+		next: d,
+		prev: f,
+		closeLightbox: h.closeWith,
+		setZoom: u.setZoom,
+		setPan: u.setPan,
+		morph: h.morph,
+		toggleLoop: u.toggleLoop,
+		goToFirst: () => u.setIndex(0),
+		goToLast: () => u.setIndex(Math.max(0, t.length - 1)),
+		downloadCurrent: m,
 		selectable: o,
-		toggleSelected: l.toggleSelected,
-		clearSelection: l.clearSelection,
-		onKeyDown: g
+		selectionActions: s,
+		toggleSelected: u.toggleSelected,
+		clearSelection: u.clearSelection,
+		onKeyDown: _
 	};
 }
 //#endregion
 //#region lib/components/ui/media/galleries/gallery.tsx
 function cP(e) {
-	let t = sP(e), { items: n, preset: r, layout: i, columns: a, aspect: o, loop: s, maxItems: c, lightbox: l, captions: u, shape: d, carousel: f, carouselAlign: p, carouselOrientation: m, defaultIndex: h, currentIndex: g, onIndexChange: _, open: v, defaultOpen: y, onOpenChange: b, onDelete: x, selectable: S, onSelectionChange: C, trigger: w, ...T } = e;
+	let t = sP(e), { items: n, preset: r, layout: i, columns: a, aspect: o, loop: s, maxItems: c, lightbox: l, captions: u, shape: d, carousel: f, carouselAlign: p, carouselOrientation: m, defaultIndex: h, currentIndex: g, onIndexChange: _, open: v, defaultOpen: y, onOpenChange: b, onDelete: x, selectable: S, onSelectionChange: C, selectionActions: w, trigger: T, ...E } = e;
 	return /* @__PURE__ */ G(GC, {
 		value: t,
-		children: /* @__PURE__ */ G(lP, { ...T })
+		children: /* @__PURE__ */ G(lP, { ...E })
 	});
 }
 function lP({ className: e, onKeyDown: t, ...r }) {

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

@@ -1,8 +1,8 @@
 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-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 { 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-1t6ULy5i.js";
+import { a as l } from "./button-DhiNGrdT.js";
+import { i as u } from "./translate-material-DI3nmQ6I.js";
+import { t as d } from "./use-material-translation-1kCHtB0p.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";

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

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

package/dist/{use-return-focus-C_Qz_yTk.js → use-return-focus-Hv8rn55-.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-DH1mm8hH.js";
+import { C as o, S as s, x as c } from "./spinner-C6LP2Rw8.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/components/data-display.md

@@ -18,6 +18,7 @@ from `@nxgt/material/components`.
 | <img src="../previews/data-display-periodcards.webp" width="96" alt=""> | [PeriodCards](#periodcards) | Consecutive date ranges (terms, sprints) as cards, with a current marker and an optional link per card |
 | <img src="../previews/data-display-chip.webp" width="96" alt=""> | [Chip](#chip) | Three looks and a dashed add pill, with slots, a selected state and a dismiss button |
 | <img src="../previews/data-display-statcard.webp" width="96" alt=""> | [StatCard](#statcard) | KPI tile with value, hint, icon and toned delta; `href` makes it one link |
+| | [TotalsList](#totalslist) | Labelled figures in a `dl`, amounts right-aligned, a ruled grand-total row; the screen twin of `PrintTotals` |
 | <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 |
@@ -194,7 +195,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 (#2470) (#1931)
+**Storybook:** `Data display/SeatRing` · **Vue:** not yet (#1931)
 
 ---
 
@@ -269,7 +270,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 (#2470) (#1938)
+**Storybook:** `Data display/SecretCard` · **Vue:** not yet (#1938)
 
 ---
 
@@ -603,6 +604,35 @@ pass `disabled` with a `Spinner` in `leading`, or use a `Button`.
 
 ---
 
+## TotalsList
+
+On-screen counterpart of `PrintTotals`: a `dl` of labelled figures, labels at the start, amounts right-aligned in tabular figures, one column at any width (a side rail, a phone). Rows have the shape of `PrintTotalRow` (`label`, `value`, `last`), so one array feeds the screen and its print.
+
+```tsx
+import { TotalsList } from '@nxgt/material/components';
+
+<TotalsList
+  label="Order totals"
+  rows={[
+    { label: 'Subtotal', value: '1,000.00' },
+    { label: 'Tax (19%)', value: '190.00' },
+    { label: 'Total', value: '1,190.00', last: true },
+  ]}
+/>
+```
+
+| Prop | Type | Default | Effect |
+| --- | --- | --- | --- |
+| `rows` | `{ label, value, last?, strong?, tone? }[]` | required | `last` makes the grand total larger and bold with a rule above; `strong` emphasises a row with no rule; `tone` colours the amount (`error` for a due or negative amount, `success` for a credit; an `AppTones` tone works too) |
+| `label` | `string` | — | accessible name: the block becomes a `group` named by it |
+| `variant` | `'card' \| 'plain'` | `'card'` | `plain` has no border or padding, to sit inside a card you already have |
+
+Format the amounts for the locale before passing them (`Intl.NumberFormat`); a long label wraps and the amount stays whole.
+
+**Storybook:** `Data display/TotalsList`
+
+---
+
 ## StatCard
 
 ![StatCard](../previews/data-display-statcard.webp)
@@ -812,7 +842,7 @@ import { TubeCap } from '@nxgt/material/components';
 | `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`.
+`TUBE_CAP_KINDS` lists the kinds, and `TubeCapKind` is the exported type of `kind`. 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`)
 
@@ -1367,7 +1397,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 (#2470) (tracked as a `vue` issue)
+**Storybook:** `Data display/ChangeHistory` · **Vue:** not yet (tracked as a `vue` issue)
 
 ---
 
@@ -1404,7 +1434,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 (#2470) (tracked as a `vue` issue)
+**Storybook:** `Data display/ZonedTime` · **Vue:** not yet (tracked as a `vue` issue)
 
 ---
 
@@ -1473,7 +1503,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 (#2470) (#1940)
+**Storybook:** `Data display/VoteTally` · **Vue:** not yet (#1940)
 
 ---
 
@@ -1806,7 +1836,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 (#2470)
+**Storybook:** `Data display/EnrolmentCard`, `…/Shared lock`, `Guides/Accessibility/Touch targets/Verification code` · **Vue:** not yet
 
 ---
 
@@ -1949,4 +1979,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 (#2470)
+**Storybook:** `Data display/RecoveryCodesStatus`, `Data display/EnrolmentCard/Shared lock` · **Vue:** not yet

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

@@ -602,6 +602,14 @@ const items: GalleryItem[] = [
 
 <Gallery items={items} preset="grid" selectable onSelectionChange={console.log} />;
 
+// Bulk actions on the selection: they appear in the "n selected" bar.
+<Gallery
+  items={items}
+  preset="grid"
+  selectable
+  selectionActions={(ids) => <Button onClick={() => removeAll(ids)}>Delete</Button>}
+/>;
+
 <LightboxGallery items={items} trigger={<button type="button">Open gallery</button>} />;
 
 <MiniGallery items={items} maxItems={5} />;
@@ -622,6 +630,7 @@ with a `+N` tile).
 | `carouselAlign` / `carouselOrientation` | `'start' \| 'center'` / `'horizontal' \| 'vertical'` | `'start'` / `'horizontal'` | where the large tile of `hero` sits; the scroll axis |
 | `lightbox` | `boolean` | from `preset` | click opens the full-screen viewer (gestures, zoom, filmstrip, download, keyboard) |
 | `selectable` | `boolean` | — | checkboxes on tiles; `onSelectionChange(ids)` |
+| `selectionActions` | `ReactNode \| (selectedIds: string[]) => ReactNode` | — | bulk actions (download, move, delete) at the end of the "n selected" bar of a `selectable` gallery; a render function receives the selected ids. Hidden while nothing is selected; wraps under the count on a phone |
 | `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 |
@@ -1913,6 +1922,8 @@ Parts: `PrintDocument`, `PrintHeader`, `PrintSection`, `PrintInfoRow`,
 `definePrintColumns` and the helpers `resolvePrintTable`,
 `resolvePrintFields`, `toPrintValue` and `formatPrintValue`.
 
+For the same rows on screen, use [`TotalsList`](data-display.md#totalslist).
+
 **To get the file**, pass the document to one function: `downloadPdf`
 saves it, `openPdf` opens it in a new tab (a download when a popup blocker
 stops the tab), `usePdfFile` keeps a preview current, and `pdfResponse`

package/docs/components/rich-widgets.md

@@ -8,7 +8,7 @@ the app owns the data.
 | --- | --- | --- |
 | <img src="../previews/rich-widgets-chat-overview.webp" width="96" alt=""> | [Chat kit](#chat-kit) | Inbox, thread, grouped bubbles with receipts and replies, composer with quick replies, floating widget |
 | <img src="../previews/rich-widgets-kanban.webp" width="96" alt=""> | [Kanban](#kanban) | Board with columns, swimlanes, WIP limits and drag-and-drop |
-| <img src="../previews/rich-widgets-eventcalendar.webp" width="96" alt=""> | [EventCalendar](#eventcalendar) | Month / week / day / agenda calendar, a day view split by resource, a named time zone, phone to desktop |
+| <img src="../previews/rich-widgets-eventcalendar.webp" width="96" alt=""> | [EventCalendar](#eventcalendar) | Month / week / day / agenda calendar, a day view split by resource, a named time zone, an event preview you can route to your app, phone to desktop |
 | <img src="../previews/rich-widgets-native-charts-linechart.webp" width="96" alt=""> | [Charts](#charts) | Native SVG charts (line, area, bar, pie, donut, gauge, radial, funnel, heat map, radar, scatter, combo) with keyboard, summary and View data; the Nivo ones were removed in 3.0 |
 | <img src="../previews/rich-widgets-drawing.webp" width="96" alt=""> | [Drawing](#drawing) | Vector drawing from a scene of plain data or JSX primitives: theme colours, accessible, focusable nodes, strict-CSP safe |
 | <img src="../previews/rich-widgets-barcode.webp" width="96" alt=""> | [Barcode](#barcode) | Code 128 and Data Matrix as accessible SVG, themed and dark-aware, black on white in print, with `LabelSheet` for a printed sheet of labels |
@@ -289,11 +289,28 @@ function Schedule() {
 }
 ```
 
+To edit and delete in your own dialog instead of the built-in inline fields:
+
+```tsx
+<EventCalendar
+	events={events}
+	onEventsChange={setEvents}
+	previewFields={[]}
+	onEventEdit={(e) => openEditor(e.id)}
+	onEventDelete={(e) => confirmThenRemove(e.id)}
+/>
+```
+
 | Prop | Type | Default | Effect |
 | --- | --- | --- | --- |
 | `events` / `defaultEvents` | `CalendarEvent[]` | — | controlled / uncontrolled events (ISO `start` / `end`) |
 | `onChange` | `(change: EventCalendarChange) => void` | — | after a drag or resize, with the previous event |
 | `onSlotClick` | `(slot: EventCalendarSlot) => void` | — | click on an empty slot or day — create an event there |
+| `onEventClick` | `(event: CalendarEvent) => void` | — | an event was clicked; it runs even with `onSlotClick` set (an event click never reports a slot) |
+| `eventPreview` | `boolean` | `true` | `false` skips the preview popover, so `onEventClick` alone handles the click |
+| `previewFields` | `EventCalendarPreviewField[]` | all three | the fields the preview edits in place (`'title' \| 'color' \| 'description'`); `[]` keeps the time range and the actions |
+| `onEventEdit` | `(event: CalendarEvent) => void` | — | adds an Edit button to the preview; the app opens its own editor; hidden when the calendar or the event is `disabled` |
+| `onEventDelete` | `(event: CalendarEvent) => void` | — | the preview's delete button calls this instead of the built-in confirmation and removal; the app confirms and deletes; hidden when the calendar or the event is `disabled`, so it never runs for those |
 | `view` / `defaultView` | `'month' \| 'week' \| 'workweek' \| 'day' \| 'agenda'` | `'month'` | the visible view |
 | `date` / `defaultDate` | `string` | today | the date the view is centred on |
 | `startHour` / `endHour` | `number` | `0` / `24` | hours shown in the time grids |
@@ -425,6 +442,10 @@ function Timetable() {
 | `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 |
+| `onEventEdit` | `(event: EventCalendarTemplateEvent) => void` | — | adds an Edit button to the preview and receives the `EventCalendarTemplateEvent`; both buttons are hidden when the calendar or the event is `disabled` |
+| `onEventDelete` | `(event: EventCalendarTemplateEvent) => void` | — | the Delete button calls this with the `EventCalendarTemplateEvent`, skipping the built-in confirmation and removal; both buttons are hidden when the calendar or the event is `disabled` |
+| `eventPreview` | `boolean` | `true` | `false` skips the preview popover; see the dated table |
+| `previewFields` | `EventCalendarPreviewField[]` | all three | the fields the preview edits (`'title' \| 'color' \| 'description'`); see the dated table |
 | `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 |

package/docs/guides/helpers.md

@@ -142,6 +142,7 @@ Vue: the Redux helpers are Pinia store factories: `defineLocalStore`
 | `useSubmitOnce(busy?)` | One submit in flight: wraps a submit handler so a double click or a second Enter is dropped until the request ends (the handler's promise, or `busy` back to false). See [below](#usesubmitonce). |
 | `useDrafts<T>(storageKey, { serialize?, parse?, storage? })`, `clearDrafts(storageKey, storage?)` | Unsent values kept by key in `sessionStorage`: `{ get, set, drop, clear, keys, loaded }`. Read after the first render (no hydration mismatch), storage errors swallowed, `drop(key)` once saved; `clearDrafts` empties a store key without a hook (sign-out). See [below](#usedrafts). |
 | `useUnsavedGuard(dirty, { block, … })`, `useDiscardGuard(dirty)`, `useReactRouterBlock` | Stop losing a dirty form: a "Leave without saving?" dialog on in-app navigation and on closing a dialog form, plus the browser's own `beforeunload` prompt. See [below](#useunsavedguard). |
+| `usePoll({ ms, enabled?, read, onError? })`, `startPoll({ ms, read, active?, visible?, onError? })` | Reads again every `ms` while `enabled` and the page is visible, one read at a time; the timer is cleared on unmount and when `enabled` turns false. `startPoll` is the framework-free loop, and returns its stop. See [below](#usepoll). |
 | `createSubmitGuard()`, `busySettler(guard)` | The framework-free guard behind `useSubmitOnce` (`@nxgt/material-core/submit-guard`): `{ once(run, { settleSync? }), settle(run?), pendingRun() }`, and the function that settles it from a busy flag. |
 
 ```tsx
@@ -436,6 +437,45 @@ drafts keep what was typed, the guard asks before it is dropped; they combine.
 Storybook: `Guides/Hooks/useUnsavedGuard` (leave, stay, release after save,
 query change, flush, dialog form). No Vue twin yet (`vue` issue #2019).
 
+### `usePoll`
+
+Several screens re-read a resource every few seconds while something is under
+way (a sync, a pending state). The hook owns the interval, the visibility check
+and the single-flight guard.
+
+```tsx
+import { usePoll } from '@nxgt/material/hooks';
+
+export function JobStatus({ job, reload }: { job: Job; reload: () => Promise<void> }) {
+  usePoll({
+    ms: 3000,
+    enabled: job.status === 'running',
+    read: reload,
+    onError: (error) => console.warn('poll failed', error),
+  });
+  return <p>{job.status}</p>;
+}
+```
+
+- **Visible pages only.** A tick that falls while
+  `document.visibilityState` is not `visible` is skipped, not queued, so
+  returning to the tab waits for the next tick.
+- **Never two reads at once.** A tick that falls while `read` (its promise) is
+  still running is skipped, also after a restart (a new `ms`, `enabled` back on).
+- **Stops cleanly.** The timer is cleared on unmount and when `enabled` turns
+  false; turning it back on starts a new interval.
+- **First read after `ms`.** Call `read` yourself for an immediate one.
+- **Latest `read`.** `read` and `onError` may be new on every render; the
+  interval does not restart. Only `ms` and `enabled` restart it.
+- **Errors.** A read that throws or rejects is passed to `onError` and the poll
+  goes on; without `onError` it is ignored.
+- **Server.** Nothing runs during render or on the server.
+- **Outside React**, `startPoll({ ms, read, active?, visible? })` is the same
+  loop; `active()` and `visible()` are checked at each tick, and the call
+  returns the function that stops it.
+
+No Vue twin yet (`vue` issue #2498).
+
 ## `@nxgt/material/i18n`
 
 | Export | What it does |

package/docs/guides/layouts.md

@@ -204,8 +204,11 @@ The props of each are in
 The `Guides/Recipes` stories in Storybook are tested whole screens (the code
 ships with the `screen-recipes` skill of the `nxgt-material` plugin): a home
 dashboard, a list and detail, a form and dialog, a table and settings, a dense
-detail page, a status board, a landing page and a search dialog with its
-results page. Start from the closest one and replace the data.
+detail page, a status board, a landing page, a search dialog with its results
+page, a team feed, the sign-in, sign-up and forgotten-password screens, a
+gallery of pictures, settings with sections, a messages thread, an overview of
+rearrangeable widgets on `DashboardGrid` and a document editor. Start from the
+closest one and replace the data.
 
 ## See also
 

package/docs/guides/theming.md

@@ -68,7 +68,7 @@ at the top are needed is in [getting started](../getting-started.md#styles).
 | `--accent`, `--accent-foreground` | `bg-accent`, … | hover surfaces |
 | `--nxgt-accent` | `[--nxgt-accent:…]` | the mark colour of the selection controls: the fill, handle, state layer and stop dots of `Slider`, the on state of `Switch`, the box and dot of `Checkbox` and `Radio`. It defaults to `--primary` (`--primary-text` in dark) and is set per control, so override it on the control itself, not on `:root` |
 | `--error`, `--success`, `--info`, `--warning` (+ `-foreground`) | `bg-error`, `text-success`, … | the status colours of `Button`, `Alert`, `Badge`, toasts |
-| `--primary-text` | `text-primary-text` | primary drawn as text or an icon on a page, card or popover surface: `Typography tone="primary"`, links, the `Alert` primary icon, selected labels. In light, `--primary` mixed toward black: 96 % at most, solved lower on a tinted page so a tonal Button label on a striped row, or straight on the page ground, reaches 4.6:1 (92 % on teal, 88 % on corail, 92 % on pink, 95 % on menthe); in dark, `--primary` mixed 60 % with white (`color-mix(in oklab, var(--primary) 40%, white)`), well over 4.5:1 on `--background` and `--card` |
+| `--primary-text` | `text-primary-text` | primary drawn as text or an icon on a page, card or popover surface: `Typography tone="primary"`, links, the `Alert` primary icon, selected labels. In light, `--primary` mixed toward black: 96 % at most, solved lower on a tinted page so a tonal Button label on a striped, selected or header row, or straight on the page ground, reaches 4.6:1 (79 % on teal, 76 % on corail; read the shipped theme file for each preset); in dark, `--primary` mixed 60 % with white (`color-mix(in oklab, var(--primary) 40%, white)`), well over 4.5:1 on `--background` and `--card` |
 | `--primary-indicator` | `bg-primary-indicator`, `border-primary-indicator`, `ring-primary-indicator`, `stroke-primary-indicator` | primary drawn as a non-text mark that carries a state (WCAG 1.4.11, 3:1): an active bar or dot, a selected or focused border, a ring, a spinner arc. Equal to `--primary` in light; in dark, `--primary` mixed 25 % with white (`color-mix(in oklab, var(--primary) 75%, white)`), 4.8:1 on `--background`, 4.5:1 on `--card`, 4.2:1 on `--muted` (`--primary` itself gives 2.7, 2.5 and 2.3:1) |
 | `--error-text` | `text-error-text` | error drawn as text: field messages, `HelperText` in its error state, form and dialog errors, `variant="error"` menu items |
 | `--destructive` | `bg-destructive`, `text-destructive` | deprecated alias of `--error`: the light theme sets it to `var(--error)`, the dark theme keeps its own value; use `--error` |
@@ -1012,7 +1012,7 @@ override on the root, or use a [theme zone](#themes), which re-declares them.
 for the same reason: the brand colour is a dark fill (it keeps near-white text
 readable on a button) and reads at only about 2:1 as text on the dark surfaces.
 The light value is `color-mix(in oklab, var(--primary) 96%, black)` at most (primary
-4 % toward black, 7.9:1 on the white page; the share is solved per theme and drops when a tinted page would leave a tonal Button label under 4.6:1 on a striped row or on the page ground, to 92 % on teal); the dark one is
+4 % toward black, 7.9:1 on the white page; the share is solved per theme and drops when a tinted page would leave a tonal Button label under 4.6:1 on a striped, selected or header row or on the page ground, to 79 % on teal); the dark one is
 `color-mix(in oklab, var(--primary) 40%, white)` (primary mixed 60 % with
 white, the recipe of the tonal `Button` labels). `Typography tone="primary"`,
 the `Alert` primary icon, links, selected labels and the other primary text of

package/docs/roadmap.md

@@ -6,6 +6,12 @@ version they shipped in, and planned entries may name the major they target.
 
 ## Now
 
+- **App shell header refresh** — `AppHeader` and the look `TopAppBar`
+  shares sit flat on the page ground and tint when content scrolls under
+  them; the actions are grouped in a pill, the search is a pill field (an
+  icon on a phone), and the menu button is a ghost icon button. The new look
+  is the default in a minor, with no API change; an A/B preview comes first
+  ([#2503](https://github.com/softistx/nxgt-material/issues/2503)).
 - **Calculator** — `@nxgt/material/calculator` is an exact-decimal calculator
   (Standard, Scientific, point of sale, Financial, Conversion, Programmer;
   every variant but Standard loads on demand)
@@ -166,13 +172,10 @@ version they shipped in, and planned entries may name the major they target.
   descriptions, a small empty state, loading rows and an in-list search
   pill. What changes on upgrade:
   [The field look (2.x)](guides/field-look-2-x.md)
+- **`TotalsList`** — the on-screen `PrintTotals` (#2490): React only for now; Vue twin is #2492.
 
 ## Next
 
-- **Seven more layout recipes** — Feed, Gallery, Auth, Thread, settings,
-  dashboard and editor screens, each a tested Storybook recipe under
-  Guides/Recipes with its code beside it, on the layouts the shell now ships
-  ([#2413](https://github.com/softistx/nxgt-material/issues/2413)).
 - **FilterBar "Add a filter" stays on its row** — the button no longer wraps
   alone onto a second row on a desktop screen ([#1752](https://github.com/softistx/nxgt-material/issues/1752)).
 
@@ -383,6 +386,8 @@ version they shipped in, and planned entries may name the major they target.
 
 ## Shipped
 
+- **Seven more layout recipes (next minor)** — whole screens to start from under Guides/Recipes, each a tested Storybook story with its code in the plugin's `screen-recipes` skill: a team feed, a gallery of pictures by day, sign-in, sign-up and forgotten-password screens, a messages thread, settings with sections, an overview of rearrangeable widgets and a document editor, on the layouts the shell ships ([#2413](https://github.com/softistx/nxgt-material/issues/2413)).
+
 - **Search dialog and results page recipe (next patch)** — a command dialog (Ctrl/Cmd+K and a header button), debounced grouped suggestions, type chips, a conditional filter and highlighted result cards, with its code in the plugin's `screen-recipes` skill ([#2333](https://github.com/softistx/nxgt-material/issues/2333)).
 
 - **Layouts: adaptive navigation, headers and page layouts (3.80.0)** — `ActivityLayout` takes `navigation` (a bottom bar with More and badges, a rail with a FAB or expanded, a standard or modal drawer, a collapsible sidebar, a top navigation with dropdowns, two-level navigation, a floating toolbar or none, chosen for phone, tablet and desktop) and `header` (small, center-aligned, medium and large collapsing on scroll, hide on scroll, a search bar that opens full screen on a phone, sticky tabs), and a route adds a back arrow with `handle.back`; each piece is also exported. Page layouts grow with it: an inspector pane and the selection in the URL for `ListDetailsLayout`, phone modes and a container breakpoint for `PaneLayout`, a centred form and wizard for `ThreadLayout`, a split `AuthCard`, spans and masonry for `ResponsiveGrid`, tabs for `Kanban` on a phone, `Doc` drawn inside the shell, and new `SettingsLayout`, `DashboardGrid` (tiles the user rearranges), `EditorLayout` and `LandingLayout` (with `LandingSection` and `SiteFooter`). Everything is opt-in; the shell's default is unchanged. [Layouts guide](guides/layouts.md) ([#2103](https://github.com/softistx/nxgt-material/issues/2103)). Follow-ups: a resize handle for `EditorLayout`'s properties panel and a separate open state for its phone sheet.

package/docs/troubleshooting.md

@@ -1182,7 +1182,7 @@ given, `leading` replaces `icon` (and warns in development).
 **When:** axe (or Lighthouse) reports `color-contrast` on a `tonal` or
 `outlined` `Button` or `IconButton` (`primary` in the dark theme, `error`,
 `warning` and `success`), at rest or hovered, focused or pressed; on the
-subtitle of a selected `ListTile`; or on a `Badge` link while it is hovered.
+subtitle of a selected `ListTile`; or on a `Badge` link while it is hovered; or on a tonal primary `Button` in a selected `Table` row or a table header cell (light, 4.1 to 4.4:1 before the share of `--primary-text` was solved against those surfaces, #2495).
 **Why:** those variants drew their text in the token itself, and some tokens
 do not reach 4.5:1 as text on the page and on their own tint: the dark
 `--primary` is a dark indigo (2.2:1 on `--card`), the light `--error` gave
@@ -1245,7 +1245,7 @@ on the page; the catalogue's own primary text passes.
 **Why:** it is drawn with `text-primary`, the fill colour. The brand colour is
 dark so that near-white text reads on it, which makes it too dark to read as
 text on the dark surfaces. Primary text has its own token, `--primary-text`:
-`--primary` mixed toward black in light (96 % at most, solved per theme), `--primary` mixed 60 % with white in dark.
+`--primary` mixed toward black in light (96 % at most, solved per theme, lower when a tonal label sits on a tinted row, selected row or header), `--primary` mixed 60 % with white in dark.
 **Fix:** draw primary text with `text-primary-text`; keep `text-primary` for
 fills, borders and rings:
 

package/lib/components/theme-tokens.css

@@ -21,9 +21,9 @@
 	--primary: oklch(46% 0.1135 276.35);
 	--primary-foreground: oklch(0.984 0.003 247.858);
 	/* Primary drawn as text or an icon on a normal surface (`text-primary-text`):
-	   the colour mixed 4 % toward black in light, which keeps it 7.9:1 on
-	   the white page and on a Card (the colour itself gives 7.3:1); the dark theme lifts it. */
-	--primary-text: color-mix(in oklab, var(--primary) 96%, black);
+	   the colour mixed 10 % toward black in light, which keeps it above 4.5:1 on
+	   the page, a Card and the tinted row, header and ground surfaces a tonal Button label sits on; the dark theme lifts it. */
+	--primary-text: color-mix(in oklab, var(--primary) 90%, black);
 	/* Primary drawn as a non-text mark (WCAG 1.4.11, 3:1): an indicator bar or dot,
 	   a selected or focused border, a ring, a spinner arc, a progress fill
 	   (`bg-primary-indicator`, `border-primary-indicator`...). Light is --primary;

package/lib/components/ui/collections/server-table/server-table-phone-row.css

@@ -184,6 +184,18 @@
 		min-height: 2.75rem;
 	}
 }
+/* Nothing to show (#2497): no select-all, no sort, no "Filters" trigger, no
+ * actions and no bulk bar leave both slots empty, and the row would be an
+ * empty 40px gap under the filter bar. Any control fills a slot, and the row
+ * is back. */
+[data-slot="server-table-phone-row"]:has(
+	> [data-slot="server-table-phone-row-start"]:empty
+):has(
+	> [data-slot="server-table-phone-row-end"]
+		> [data-slot="server-table-phone-sort"]:only-child:empty
+) {
+	display: none;
+}
 @media (pointer: coarse) {
 	/* The 32px bulk buttons reach 44px with an invisible 6px margin: a gap of
 	 * 12px keeps neighbours from taking each other's edge. */