@nxgt/material 3.48.0 → 3.50.0

package/dist/{button-tones-BwuVvAmd.js → use-click-lock-BZYtTmVt.js}

@@ -1,6 +1,20 @@
-import { createContext as e } from "react";
+import { createContext as e, useCallback as t, useEffect as n, useRef as r, useState as i } from "react";
 //#region lib/components/ui/primitives/icon/icon-context.ts
-var t = e(!1), n = {
+var a = e(!1);
+//#endregion
+//#region lib/components/ui/actions/button/busy-click-capture.ts
+function o(e, t, n) {
+	return (r) => {
+		if (e || t.isLocked()) {
+			r.preventDefault(), r.stopPropagation();
+			return;
+		}
+		t.lock(), n?.(r);
+	};
+}
+//#endregion
+//#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)]",
@@ -8,7 +22,7 @@ var t = e(!1), n = {
 	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)]",
 	default: "text-foreground"
-}, r = {
+}, 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)]",
@@ -16,7 +30,7 @@ var t = e(!1), n = {
 	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)]",
 	default: "[&_svg]:data-[slot=icon]:text-foreground"
-}, i = {
+}, 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)]",
@@ -24,7 +38,7 @@ var t = e(!1), n = {
 	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)]",
 	default: "[&_svg]:stroke-foreground"
-}, a = {
+}, 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)]",
@@ -32,6 +46,22 @@ var t = e(!1), n = {
 	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)]",
 	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) {
+	let o = r(!1), s = r(!1), c = r(void 0), [l, u] = i(!1), f = t(() => {
+		o.current = !1, s.current = !1, clearTimeout(c.current), u(!1);
+	}, []), p = t(() => {
+		e && (o.current = !0, u(!0), clearTimeout(c.current), c.current = setTimeout(() => {
+			s.current || f();
+		}, d));
+	}, [e, f]);
+	return n(() => {
+		o.current && (a ? s.current = !0 : s.current && f());
+	}, [a, f]), n(() => () => clearTimeout(c.current), []), {
+		locked: l,
+		lock: p,
+		isLocked: t(() => o.current, [])
+	};
+}
 //#endregion
-export { t as a, a as i, i as n, n as r, r as t };
+export { u as a, s as i, c as n, o, l as r, a as s, f as t };

package/dist/{use-heading-spy-DjKixjLm.js → use-heading-spy-C5LXtA8Z.js}

@@ -1,4 +1,4 @@
-import { r as e } from "./i18n-provider-C0fB0sEL.js";
+import { r as e } from "./i18n-provider-DPM_ALQ4.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, useState as d } from "react";
 import { busySettler as f, busySettler as p, createSubmitGuard as m, createSubmitGuard as h } from "@nxgt/material-core/submit-guard";

package/dist/{use-material-translation-DOkTaWK_.js → use-material-translation-DWWeeg-B.js}

@@ -1,5 +1,5 @@
-import { r as e } from "./i18n-provider-C0fB0sEL.js";
-import { t } from "./translate-material-v9u-e7Kd.js";
+import { r as e } from "./i18n-provider-DPM_ALQ4.js";
+import { t } from "./translate-material-DEUlaL_1.js";
 import { useCallback as n } from "react";
 //#region lib/i18n/use-material-translation.ts
 function r() {

package/dist/{use-theme-DMcyJ52N.js → use-theme-BCLireTd.js}

@@ -1,5 +1,5 @@
 import { t as e } from "./use-ssr-media-query-C6M5m8sf.js";
-import { i as t, n, o as r, r as i, s as a, t as o } from "./theme-store-CSl51uNH.js";
+import { i as t, n, o as r, r as i, s as a, t as o } from "./theme-store-BdPp43cV.js";
 import { a as s } from "./theme-context-Cofk6vgs.js";
 import { useCallback as c, useEffect as l, useState as u, useSyncExternalStore as d } from "react";
 import { PRESET_SCHEMES as f } from "@nxgt/material-core/theme/boot";

package/docs/components/buttons-and-actions.md

@@ -7,7 +7,7 @@ and language switches. Everything is imported from `@nxgt/material/components`.
 | | Component | What it does |
 | --- | --- | --- |
 | <img src="../previews/buttons-actions-button.webp" width="96" alt=""> | [Button](#button) | Five variants in seven colours, six sizes, a round or square shape and a selected state, with a loading state |
-| <img src="../previews/buttons-actions-iconbutton.webp" width="96" alt=""> | [IconButton](#iconbutton) | Icon-only button in five sizes and three widths, with an optional tooltip |
+| <img src="../previews/buttons-actions-iconbutton.webp" width="96" alt=""> | [IconButton](#iconbutton) | Icon-only button in five sizes and three widths, with an optional tooltip and a loading state |
 | <img src="../previews/buttons-actions-buttongroup.webp" width="96" alt=""> | [ButtonGroup](#buttongroup) | Joins adjacent buttons into one control; the expressive look widens the pressed one |
 | <img src="../previews/buttons-actions-splitbutton.webp" width="96" alt=""> | [SplitButton](#splitbutton) | Main action plus a menu of related ones, Material 3 Expressive |
 | <img src="../previews/buttons-actions-fab.webp" width="96" alt=""> | [Fab](#fab) | The screen's main action, floating; extended with its label, folds on scroll |
@@ -20,7 +20,7 @@ and language switches. Everything is imported from `@nxgt/material/components`.
 | <img src="../previews/buttons-actions-loadmorebutton.webp" width="96" alt=""> | [LoadMoreButton](#loadmorebutton) | "Load more" for cursor pagination |
 | <img src="../previews/buttons-actions-scrolltotop.webp" width="96" alt=""> | [ScrollToTop](#scrolltotop) | Appears past a scroll threshold |
 | <img src="../previews/buttons-actions-scrolltolatestbutton.webp" width="96" alt=""> | [ScrollToLatestButton](#scrolltolatestbutton) | "Jump to latest" over a scroll box, counting what arrived |
-| <img src="../previews/buttons-actions-actioncard.webp" width="96" alt=""> | [ActionCard](#actioncard) | Clickable card, a button (`aria-pressed`) when it chooses or reacts, with an active indicator |
+| <img src="../previews/buttons-actions-actioncard.webp" width="96" alt=""> | [ActionCard](#actioncard) | Clickable card, a button (`aria-pressed`) when it chooses or reacts, with an active indicator; `status`, `meta`, a trailing `action` and a `tile` variant |
 | <img src="../previews/buttons-actions-themetoggle.webp" width="96" alt=""> | [ThemeToggle](#themetoggle) | Light / dark / system switch |
 | <img src="../previews/buttons-actions-languageswitcher.webp" width="96" alt=""> | [LanguageSwitcher](#languageswitcher) | Menu of the `I18nProvider` languages |
 
@@ -180,6 +180,7 @@ import { Pencil, Trash2 } from 'lucide-react';
 | `morph` | `'round' \| 'pill' \| 'none'` | `'pill'` | what a **toggle** (`aria-pressed` set) does when pressed: `pill` fills with its colour and widens by 14 px into a pill, `round` fills and stays a circle, `none` keeps the look your classes give it. Not set on a button without `aria-pressed`, one with a `shape`, or a Toolbar item (the Toolbar's own look) |
 | `badge` | `number` | — | a count on the top end corner (top left in a right-to-left page): "99+" past 99, nothing at 0 or unset. It takes no room, so the box and the 44 px hit area are unchanged. It is **decorative** (`aria-hidden`): put the number in the accessible name yourself, e.g. `aria-label="Publish 2 items"` |
 | `badgeTone` | `'primary' \| 'error' \| 'neutral'` | `'primary'` | the badge's colour: a count is not an alert, so `primary`; `error` for a notification; `neutral` is the page's text colour on its background |
+| `loading` | `boolean` | `false` | busy, as `Button`'s: `aria-busy` and `aria-disabled`, a spinner in place of the icon (the button keeps its size) and every click blocked. It stays focusable (no native `disabled`), so the focus is not lost while the work runs |
 
 **A count badge** (`badge`) is a primary pill (`badgeTone="error"` is the menu-item badge's red), ringed in the page background so it reads over any variant, and sits half outside the corner, over the neighbours' gap (leave 4 px; a `Toolbar` clips 4 px outside its items, so leave room there too). It does not dim when the button is disabled. It never names itself: `<IconButton badge={2} aria-label="Publish 2 items">`. `Button` has no `badge`: its label can be cut with an ellipsis and an `asChild` one clips, so compose a `CountBadge` around it.
 
@@ -1063,9 +1064,12 @@ import { Banknote, CreditCard } from 'lucide-react';
 | `active` | `boolean` | — | the chosen look: a primary container with its edge, a primary title, the icon's circle morphs to a filled cookie and the indicator fills; also `aria-pressed` |
 | `onClick` | `(event) => void` | — | makes the card a button |
 | `disabled` | `boolean` | `false` | `aria-disabled`, out of the Tab order, no click and no key, muted look |
-| `variant` | `'sm' \| 'md'` | `'sm'` | one row, or icon and indicator above the text |
-| `withIndicator` | `boolean` | `true` | the radio-like ring that fills with a check |
+| `variant` | `'sm' \| 'md' \| 'tile'` | `'sm'` | one row, icon and indicator above the text, or a compact [tile](#actioncard-tile) |
+| `withIndicator` | `boolean` | `true` (`false` for `tile`) | the radio-like ring that fills with a check |
 | `title`, `description`, `icon` | `ReactNode` | — | the content |
+| `status` | `ReactNode` | — | a line under the title; a string or number becomes a soft `Badge`, a node is shown as given |
+| `meta` | `ReactNode` | — | a secondary line, one line with an ellipsis |
+| `action` | `ReactNode` | — | a trailing control outside the press surface, see [tile](#actioncard-tile); `title` is then required, a `role` moves to the title button; the card's `disabled` does not reach it, disable its control too |
 
 A card with `active`, `onClick`, `disabled` or your own `role` is `role="button"` (unless you set another): it takes the Tab stop, and
 Enter and Space press it. `active` sets `aria-pressed`; pass your own `role`
@@ -1079,9 +1083,64 @@ the card, forced colours in system colours, and no motion under reduced motion.
 For a card choice bound to a form value, see `ChoiceCardGroup` on
 [Selection & choice](selection-and-choice.md).
 
+### ActionCard tile
+
+`variant="tile"` is a compact grid cell for boards: no minimum width (it fills
+its grid track), the title and the `action` on the first row, then `status`,
+`description` and `meta`, and no indicator unless `withIndicator`. `status` and
+`meta` work on every variant.
+
+```tsx
+import {
+	ActionCard,
+	Badge,
+	DropdownMenuRadioGroup,
+	DropdownMenuRadioItem,
+	RowMenu,
+} from '@nxgt/material/components';
+
+<ActionCard
+	variant="tile"
+	active={selected === unit.id}
+	onClick={() => setSelected(unit.id)}
+	title={unit.name}
+	status={<Badge variant="soft" tone="success">Free</Badge>}
+	meta="Zone B, second floor"
+	action={
+		<RowMenu
+			label={unit.name}
+			triggerProps={{ 'aria-label': `Change status of ${unit.name}` }}
+		>
+			<DropdownMenuRadioGroup value={unit.status} onValueChange={setStatus}>
+				<DropdownMenuRadioItem value="free">Free</DropdownMenuRadioItem>
+				<DropdownMenuRadioItem value="occupied">Occupied</DropdownMenuRadioItem>
+			</DropdownMenuRadioGroup>
+		</RowMenu>
+	}
+/>;
+```
+
+With an `action`, a card that chooses or reacts is a plain `div` and its
+**title is the one button**, stretched over the card, so the whole card presses
+it and the action never nests inside it (no `nested-interactive`). The button
+is named after the title, the status and the meta together ("Unit 21 Free Zone
+B"); the action keeps its own name. The card is one Tab stop and the action a
+second; Enter and Space press the button. `disabled` disables the button
+natively; disable the action's control too. **`title` is required with
+`action`**: it is the button's text (without one the button is still there, named
+after the status and the meta line, and development builds warn). The
+`description` is the button's description (`aria-describedby`). A `role`
+(`switch`, `checkbox`, `radio`) and its `aria-checked` move to the button, where
+they are valid; the root stays a plain `div` and takes no `aria-checked` or
+`aria-label`. Hover and press answer only the title button (its stretched area covers the
+card, padding included), not the action. The meta line shows its full text in a tooltip, on hover or
+keyboard focus of the title button, only while it is clipped (Escape dismisses
+it; moving the pointer across the line does not). Without `action` the DOM is as
+before. Nothing is added for a Vue port yet (React first).
+
 The root is `data-slot="action-card"` (it was the `Card` primitive's `data-slot="card"`): style it with `className`, not through `Card` classes or a `[data-slot=card]` selector.
 
-**Storybook:** `Buttons & actions/ActionCard`, `Buttons & actions/ActionCard/Look` · **Vue:** `ActionCard`, with the earlier look and no button role yet (#1195)
+A whole board built on it, with sections and an occupancy table, is the `Guides/Recipes/Status board` recipe. **Storybook:** `Buttons & actions/ActionCard`, `Buttons & actions/ActionCard/Look`, `Buttons & actions/ActionCard/Tile`, `Buttons & actions/ActionCard/Checks` · **Vue:** `ActionCard`, with the earlier look and no button role yet (#1195)
 
 ---
 

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

@@ -15,9 +15,9 @@ either can be used alone.
 | --- | --- | --- |
 | <img src="../previews/data-table-filter-lists-datatable.webp" width="96" alt=""> | [DataTable](#datatable) | TanStack Table v9 with sorting, selection, expansion and pagination, client-side or one server page at a time |
 | <img src="../previews/data-table-filter-lists-servertable.webp" width="96" alt=""> | [ServerTable](#servertable) | A server-mode `DataTable` driven by the URL, with the Filter in its top band (a title and a description, or neither): sort, cursor paging, the empty page with a scene, an action and removable chips, one count announced |
-| <img src="../previews/data-table-filter-lists-rowmenu.webp" width="96" alt=""> | [RowMenu](#rowmenu) | A row's "..." button named after its row ("Actions for Ada"), its menu aligned to the end with the destructive item last, and `rowMenuColumn` to drop both in a table |
+| <img src="../previews/data-table-filter-lists-rowmenu.webp" width="96" alt=""> | [RowMenu](#rowmenu) | A row's "..." button named after its row ("Actions for Ada"), its menu aligned to the end with the destructive item last, a loading state while an action runs, and `rowMenuColumn` to drop both in a table |
 | <img src="../previews/data-table-filter-lists-listempty.webp" width="96" alt=""> | [ListEmpty](#listempty) | A list's empty page: nothing yet, with a scene and an action, or nothing matches and the way out |
-| <img src="../previews/data-table-filter-lists-pagefooter.webp" width="96" alt=""> | [PageFooter](#pagefooter) | The page footer of a feed that is not a table (cards, a news feed) under a FilterBar: the range and Previous / Next as links from the URL's cursor trail, `pageControls="icon"`; no `totalCount` for a feed with no total (no range, Previous / Next only) |
+| <img src="../previews/data-table-filter-lists-pagefooter.webp" width="96" alt=""> | [PageFooter](#pagefooter) | The page footer of a feed that is not a table (cards, a news feed) under a FilterBar: the range and Previous / Next as links from the URL's cursor trail, `pageControls="icon"`; no `totalCount` for a feed with no total (no range, Previous / Next only); `hideOnSinglePage` hides it on a single page |
 | <img src="../previews/data-table-filter-lists-datagrid.webp" width="96" alt=""> | [DataGrid](#datagrid) | An editable grid: spreadsheet keys, paste, a fill handle with series, undo, totals, saving with versions and conflicts (lazy ones fetch theirs on "Keep mine"), `onRefuse` for a refused paste or fill, row selection (`enableRowSelection`), and resizable, hideable and reorderable columns (`columnControls`, `columnLayout`, `DataGridColumnsMenu`) |
 | <img src="../previews/data-table-filter-lists-daygroupedlist.webp" width="96" alt=""> | [DayGroupedList](#daygroupedlist) | A list split by day under sticky Today / Yesterday / Earlier headings |
 | <img src="../previews/data-table-filter-lists-filter.webp" width="96" alt=""> | [Filter](#filter) | Schema-driven filters with chips, presets and persistence |
@@ -818,8 +818,8 @@ export default function Students() {
 - **Nothing matches.** The empty page is [`ListEmpty`](#listempty), with no
   header row and no footer. With `filter`, it lists the user's filters as
   removable chips (the band's row keeps the locked ones only, so none is
-  listed twice), then "Clear all" while two of them or a search remain;
-  removing one moves the focus to the next chip, then "Clear all", then the
+  listed twice), then "Clear all" (worded by `empty.clear`) whenever a chip or a search
+  remains, a single chip included, the locked conditions staying; removing one moves the focus to the next chip, then "Clear all", then the
   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`).
@@ -995,6 +995,7 @@ Its props are `ServerTableProps<T>`; `filter` is a `ServerTableFilter`,
 | `actions` | `ReactNode` | — | the page's actions, at the band's end |
 | `bandDensity` | `'comfortable' \| 'compact'` | `'comfortable'` | (the same prop as [`Filter`](#a-compact-band-for-a-list-inside-a-page-section)'s bar) `'compact'` halves the room above the band (16px to 8px) and under it (12px to 6px), for a list under a sticky app bar and a breadcrumb; the controls keep their size (the Filter's own `density` is the controls') |
 | `pageControls` | `'labelled' \| 'icon'` | `'labelled'` | the footer's Previous / Next: `'icon'` is icon-only, with a tooltip and the names "Previous page" / "Next page" (`DataTable`'s default is unchanged); on a coarse pointer the icon controls are 44x44 boxes (still painted 32px) |
+| `hideOnSinglePage` | `boolean` | `false` | hides the footer's range and Previous / Next when the result is one page (no previous, no next), in the table, cards and tiles layouts; the count is still announced by the live region but no longer shown, so put it in `description` or keep the footer. With `bulkActions` the footer stays for "N rows selected", without its pager |
 | `bandActions` | `'stacked' \| 'inline'` | `'stacked'` | with `filter`, where `actions` sit below 768px: `'stacked'` gives them a row above the search; `'inline'` keeps them on the search's row (the search takes the room left), for a lone icon action such as a "+". An action wider than 3.5rem wraps under the search. From 768px both are the same. With a cards or tiles list on a phone, neither applies: [the two-row header](#the-phone-header-of-a-list-in-cards-or-tiles) puts the actions on its second row |
 | `filterRef` | `Ref<ServerTableFilterHandle>` | — | with `filter`: `filterRef.current.focus()` focuses the Filter's first control, the search, else the first quick filter, "Add filter" or "Filters (N)" the width shows |
 | `sorting` | `createSorting(…)` | — | headers sorted from the URL |
@@ -1168,13 +1169,25 @@ and `ref`, so it is the child of a `DropdownMenuTrigger asChild`.
 | Prop | Type | Default | Effect |
 | --- | --- | --- | --- |
 | `label` (`RowMenu`, `RowMenuTrigger`) | `string` | — | the row's name; the button's name is "Actions for {label}" (translated). An `aria-label` of your own wins |
+| `loading` (`RowMenuTrigger`, `triggerProps.loading` of `RowMenu`) | `boolean` | `false` | an action chosen from this row's menu is running: `aria-busy`, a spinner in place of the dots (the button keeps its size), and the menu does not open again until it is over. The button stays focusable and keeps the focus. As `Button`'s `loading` |
 | `items` (`RowMenu`) | `{ label, icon?, onSelect?, disabled?, destructive?, id? }[]` | `[]` | the actions; `destructive` ones are drawn in the error colour and moved last, after a separator |
-| `children` (`RowMenu`) | `ReactNode` | — | menu content of your own, above `items` (put a destructive item last yourself) |
+| `children` (`RowMenu`) | `ReactNode` | — | menu content of your own, above `items` (put a destructive item last yourself); its menu items are 44px high on a coarse pointer too |
 | `triggerProps` (`RowMenu`) | button props | — | `disabled`, `className`, `data-*` on the button |
 | `open`, `onOpenChange` (`RowMenu`) | as `DropdownMenu` | — | controlled state |
 | `label`, `items`, `menu` (`rowMenuColumn`) | `(row) => string` / `(row) => RowMenuItem[]` / `(row) => ReactNode` | — | the row's name, its actions as data, or its menu content as nodes |
 | `id`, `className` (`rowMenuColumn`) | `string` | `'actions'`, `'w-12'` | the column's id and its cell classes |
 
+While an action runs, set `loading` on its row's button. The button keeps its size and
+the focus, so the focus does not fall to the page when the menu closes:
+
+```tsx
+<RowMenu
+  label={person.name}
+  items={[{ label: 'Archive', onSelect: () => archive.mutate(person.id) }]}
+  triggerProps={{ loading: archive.isPending && archive.variables === person.id }}
+/>
+```
+
 Focus returns to the button when the menu closes, and when a dialog opened from
 an item (a `ConfirmDialog`, a `Dialog`, a `Sheet`) closes: the item is gone by
 then, so the dialog hands the focus back to the menu's button.
@@ -1249,6 +1262,12 @@ A cursor feed whose API answers `pageInfo` and the items but no total (a news or
 <PageFooter pageInfo={pageInfo} params={params} pageSize={20} count={items.length} pageControls="icon" />
 ```
 
+A list that fits one page shows "1–5 of 5" by default. `hideOnSinglePage` renders nothing when there is no previous and no next page (`ServerTable` takes the same prop, in every layout). The range is gone from the screen then: tell the count elsewhere, a heading or a status line, or keep the footer.
+
+```tsx
+<PageFooter pageInfo={pageInfo} totalCount={5} params={params} pageSize={20} count={5} hideOnSinglePage />
+```
+
 | Prop | Type | Default | Effect |
 | --- | --- | --- | --- |
 | `params` | `URLSearchParams` | — | the page's search params: the trail is read from them and every other param is kept in the hrefs |
@@ -1259,6 +1278,7 @@ A cursor feed whose API answers `pageInfo` and the items but no total (a news or
 | `pageHref` | `(params) => string` | ``?${params}`` | a page's href |
 | `pagingNames` | `{ after?, trail? }` | `after`, `trail` | the cursor's search param names |
 | `pageControls` | `'labelled' \| 'icon'` | `'labelled'` | icon-only controls with a tooltip; 44x44 boxes on a coarse pointer |
+| `hideOnSinglePage` | `boolean` | `false` | renders nothing when there is no previous and no next page; the range is then not shown, so tell the count elsewhere (a heading, a status line) or keep the footer |
 | `live` | `boolean` | `true` | `false` renders the range as plain text instead of a polite live region |
 | `disabled` | `boolean` | `false` | makes Previous and Next inert while the feed loads |
 | `linkComponent` | `DataTableLinkComponent` | `<a>` | your router's link; it must forward `className` and `ref` |
@@ -1484,7 +1504,7 @@ filter values become one form value. See [forms](../guides/forms.md).
 `variant="bar"` is a query-driven bar over
 `@nxgt/material-core/filter`. So far: the search; the quick filters, a group
 named "Quick filters" (a dashed "+ Status" pill that opens the field's
-editor, or a toggle for a switch or checkbox field); "Add filter", a menu
+editor, or a toggle chip for a switch or checkbox field: its label alone while off, the chip's check mark once on); "Add filter", a menu
 that picks a field, then an operator (skipped when the field has one), then
 its value, applied as it changes, Done (`aria-disabled`, with its reason described, while the value cannot be read) returning the focus to "Add filter"
 and announcing the filter ("Level is CE1, 3 results"), Escape or a click
@@ -1492,7 +1512,7 @@ elsewhere dropping it; the active filters as chips in a list named "Active
 filters" (each opens its editor, titled with its field and operator: select,
 multi-select, radio group, chips, text, switch, checkbox, autocomplete, date, date range, time, time range, a custom field the page renders; "is empty" takes
 no value); the page's locked conditions (a lock, no ✕); "Clear all" from two
-filters; live apply and one polite live region telling the settled count.
+filters (on the empty page, from one); live apply and one polite live region telling the settled count.
 `/` focuses the search and `F` opens "Add filter" (never while typing, with
 a modifier, or while a menu or dialog is open; on a phone, `F` opens the
 sheet). Below 768px, a "Filters (N)" button opens the phone sheet (below). That button is `FilterSheetTrigger`, exported: to place it elsewhere, render `<FilterSheetTrigger />` inside `ServerTable` (in its `actions`, or anywhere else in its tree) and hide the bar's own with `filter.sheetTrigger: false`; `Filter` takes no children, and outside a filter scope the trigger throws (see the troubleshooting page). `filter.variant: 'facets'` keeps its own. It opens the one sheet the bar mounts, `F` still opens it, and the focus comes back to the button that opened it.
@@ -1884,7 +1904,7 @@ a word, never colour alone): a chip, a quick pill, a scope pill (on a phone
 too), a quick switch or checkbox toggle, and the default chip. It is described "Invalid: <message>"; its
 editor and its facets section show the message under the title; and the
 polite live region tells it ("Period: The period cannot exceed 366 days."),
-once, after the count, also when the page opens with it; the next count replaces it. A dashed control (a toggle, the default chip) keeps its dashes
+once, after the count, also when the page opens with it; the next count replaces it. A dashed control (the default chip) keeps its dashes
 and takes the error tone on its line and text. Only a field of the model that the page does not lock shows
 one. The page clears it when the condition changes, by passing no error. The
 words are `material.filter.error.*`; `fieldErrors(errors, model, locked)` in
@@ -1948,7 +1968,7 @@ field's, once and after the count: "Search: Not a valid item." and the
 search or the query changes, by passing nothing, as it does for `errors`.
 
 When the loader answers one flat record, `splitFilterErrors(refusal, model)`
-from `@nxgt/material-core/filter` splits it: the key equal to the model's
+(from `@nxgt/material/components`, usable in a loader) splits it: the key equal to the model's
 search param becomes `searchError`, the key `FILTER_FORM_ERROR_KEY`
 (`'$form'`, never a field id) becomes `formError`, and the rest stays in
 `errors`. Messages are trimmed and an empty one is dropped:
@@ -1971,7 +1991,7 @@ search param, so `q` is free for a field. `model.search.enabled` tells.
 
 Fields declared `quick: true` in the model (or listed in `quick`) show as
 pills beside the search, before any chip: a dashed "+ Level" pill opens the
-field's editor, and a switch or checkbox field is a toggle.
+field's editor, and a switch or checkbox field is a toggle chip (`aria-pressed`): its label alone, not dashed and with no plus while off, the chip's check mark once on.
 
 ```tsx
 <Filter

package/docs/components/feedback-and-status.md

@@ -418,20 +418,39 @@ export function ConfirmItsYou({
 | `via` | `'email' \| 'secondFactor'` | — | how the code was issued; left out, the code is still being requested: no field, a status line. Changing it starts the form again (typed value, recovery switch) |
 | `destination` | `ReactNode` | — | where an e-mailed code went; named in the description |
 | `requestError` | `ReactNode` | — | the request for a code failed: an alert in place of the field |
+| `onRetry` | `() => unknown` | — | with `requestError`, the alert holds a "Retry" button (`labels.retry`, "Réessayer" in French) that calls it. While the returned promise is pending the button is busy and keeps the focus. Clear `requestError` and set `via` and the code field takes the focus; set a new `requestError` and the focus stays on "Retry" and the new text is announced. Left out, there is no button |
 | `attemptsLeft`, `locked`, `error`, `retryAfter`, `pending` | as `VerificationCode` | — | the answer to the last code (`error="throttled"` with `retryAfter` seconds disables "Resend the code" for that long and never locks; the footer is unchanged). No tries left: an e-mailed code reads "expired, ask for a new code"; an app or recovery code shows the locked alert and writes the page-wide lock |
 | `length`, `allowRecovery` | `number`, `boolean` | `6`, per `via` | the slots in the code field, and "Use a recovery code" (on for `via="secondFactor"`), passed to the `VerificationCode` |
+| `autoFocus` | `boolean` | — | the code field, not the title, takes the focus on open (passed to the `VerificationCode`) |
 | `onSubmit`, `onResend`, `resent` | as `VerificationCode` | — | your calls; "Resend the code" sits alone on its own line |
 | `confirming`, `confirmedLabel` | `boolean`, `ReactNode` | — | the code was accepted and you re-run the action: the field goes, a status line shows, Cancel is disabled and Escape does nothing until you close it |
 | `title`, `description` | `ReactNode` | built-in | the title ("Confirm it's you") and the line under it, which follows `via` |
-| `labels`, `icons` | partial objects | built-in | every string of the dialog (`title`, `description`, `descriptionApp`, `descriptionEmail`, `descriptionEmailTo`, `requesting`, `cancel`, `confirmed`) and of `VerificationCode` (`incomplete`, `incompleteRecovery` among them) |
+| `labels`, `icons` | partial objects | built-in | every string of the dialog (`title`, `description`, `descriptionApp`, `descriptionEmail`, `descriptionEmailTo`, `requesting`, `cancel`, `confirmed`, `retry`) and of `VerificationCode` (`incomplete`, `incompleteRecovery` among them) |
+
+**Retrying a failed request.** Give `onRetry` and the alert offers a button
+instead of leaving the user to cancel and start over:
+
+```tsx
+<StepUpDialog
+	open
+	onCancel={close}
+	requestError={step.requestError} // "We could not send a code."
+	onRetry={async () => {
+		// clear requestError and set via on success; set a new requestError on failure
+		await requestCode();
+	}}
+	onSubmit={(code, { kind }) => check(code, kind)}
+/>
+```
 
 Confirm is a footer button that submits the form. Pressed with too few digits
 (or an empty recovery code) it focuses the field and says "Enter all 6 digits."
 instead of calling `onSubmit`.
 
 **Focus.** The title takes the focus on open and whenever the field goes away
-(a code being requested, a code accepted); the field takes it after a refusal;
-on close it goes back to the button that opened the dialog. A locked code
+(a code being requested, a code accepted), unless `autoFocus` sends it to the
+field on open; "Retry" keeps it while a retry runs and when the request fails again, and the code field takes it once the request succeeds; the field takes it after a refusal and once a resend settles
+(answered or throttled), when "Resend" held the focus as it started; on close it goes back to the button that opened the dialog. A locked code
 leaves Cancel usable.
 
 **On a phone** the footer stays one row, Cancel on the left and Confirm on the

package/docs/components/form-fields.md

@@ -792,6 +792,7 @@ export function SecondStep({ answer, pending, send }: Props) {
 | `onResend`, `resent` | `() => unknown`, `boolean` | — | "Resend the code" alone on its own line (an e-mailed code), "New code" / "Try again" once a code expired; `resent` says a new code was sent |
 | `allowRecovery` | `boolean` | `via === 'secondFactor'` | "Use a recovery code", which swaps the field for a text field and back |
 | `length` | `number` | `6` | slots in the code field |
+| `autoFocus` | `boolean` | — | puts the focus in the code field on mount |
 | `id` | `string` | generated | the form's id; the buttons of `actions="none"` point at it with `form={id}`. Other `<form>` props pass through |
 | `actions` | `'inline' \| 'none'` | `'inline'` | `'none'` leaves the buttons to you; point them at the form with `form={id}` |
 | `submitLabel`, `secondaryAction` | `ReactNode` | "Confirm" | the button, and what sits beside it (Cancel), which stays usable when locked |
@@ -836,6 +837,12 @@ is described by the line, and the live region leaves it out. The words are
 `labels.throttled`, `throttledMinutes(n)` and `throttledSeconds(n)` (`throttledMinutesApp(n)` and `throttledSecondsApp(n)` for `via="secondFactor"`). On the
 server nothing waits and no timer runs.
 
+**After a resend settles** (answered with or without a throttle), the focus
+returns to the code field when "Resend" held it, or the page did, as the resend
+started (a host that sets `pending` disables the button, which drops the focus
+to the page): WCAG 2.4.3. A focus the user moved elsewhere in the meantime is
+left alone.
+
 **With no tries left** (`attemptsLeft === 0`) the form reads the answer by what
 the code was: an e-mailed code shows "expired, ask for a new code" (nothing is
 held against it), and an app or recovery code shows the locked alert, because

package/docs/guides/cards-and-tiles.md

@@ -240,6 +240,66 @@ navigation to learn.
 
 A `linkComponent` must forward `onClick` (with `className`): it is how `onRowClick` runs before the card's link navigates. A click that opens the link elsewhere (Ctrl, Cmd, Shift, Alt, the middle button) only opens it: `onRowClick` does not run. A title that is a button (`onRowClick` and no href) runs it on every click.
 
+## Status tiles and boards
+
+A board of resources (beds, rooms, vehicles) is not a list of records: it is a
+grid of compact cells you read at a glance and change in place. Use
+[`ActionCard variant="tile"`](../components/buttons-and-actions.md#actioncard-tile)
+in a `ResponsiveGrid minItem="xs"`, one grid per section under its own `h2`:
+
+- **`status`** is a soft `Badge` with its word and an icon, so a status is
+  never told by colour alone.
+- **`meta`** is one line, the occupant only while occupied; a long one is
+  clipped and shown in full in a tooltip.
+- **`action`** is a `RowMenu` with a `DropdownMenuRadioGroup` of statuses,
+  named "Change status of {name}". The title is the one button (it opens the
+  detail), so the card and its menu are two tab stops and nothing nests.
+
+```tsx
+import {
+	ActionCard,
+	Badge,
+	DropdownMenuRadioGroup,
+	DropdownMenuRadioItem,
+	ResponsiveGrid,
+	RowMenu,
+} from '@nxgt/material/components';
+
+<ResponsiveGrid minItem="xs">
+	<ActionCard
+		variant="tile"
+		title="Bed A1"
+		status={<Badge variant="soft" tone="warning" icon="user">Occupied</Badge>}
+		meta="Amara Diallo"
+		onClick={() => openDetail('a1')}
+		action={
+			<RowMenu
+				label="Bed A1"
+				triggerProps={{ 'aria-label': 'Change status of Bed A1' }}
+			>
+				<DropdownMenuRadioGroup value={status} onValueChange={setStatus}>
+					<DropdownMenuRadioItem value="free">Free</DropdownMenuRadioItem>
+					<DropdownMenuRadioItem value="occupied">Occupied</DropdownMenuRadioItem>
+					<DropdownMenuRadioItem value="cleaning">Cleaning</DropdownMenuRadioItem>
+				</DropdownMenuRadioGroup>
+			</RowMenu>
+		}
+	/>
+</ResponsiveGrid>;
+```
+
+`title` is required with `action`: it is the card's button, named after the
+title, the status and the meta line.
+
+For the figures of the whole board, put a `StatCardGroup` above a `DataTable`
+with one row per section, one numeric column per status (they add up to the
+total) (`meta: { numeric: true }`) and a
+rate cell (a `Progress` named "{section} occupancy" beside the visible
+percent); `layout={{ phone: 'tiles', wide: 'table' }}` turns the rows into
+tiles on a phone. Both screens, tested at 360 and 1440 px, light and dark, are
+the `Guides/Recipes/Status board` story, and the Claude Code plugin's
+`screen-recipes` skill ships their code.
+
 ## Troubleshooting
 
 **The sort control is missing, or an option reads like the column id.** The control needs a column that can be sorted (an accessor, `enableSorting` not `false`); an option is the column's `meta.label`, else a string `header`. Set `meta.label`.

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

@@ -6,7 +6,8 @@ and an edit in the bar writes the URL back. A shared link, a reload and the
 browser's Back button all land on the same list.
 
 It uses the URL codec (`defineFilterModel`, `parseFilterQuery`,
-`serializeFilterQuery`), which `@nxgt/material/components` re-exports (it is
+`serializeFilterQuery`, plus `effectiveConditions` and `splitFilterErrors` for
+a loader), which `@nxgt/material/components` re-exports (it is
 also in `@nxgt/material-core/filter`, so the examples below work with either
 import) and React Router's
 framework mode. Any router works the same way: the codec takes and returns
@@ -71,7 +72,7 @@ a condition with no readable value left is still dropped.
 
 ```ts
 // app/routes/students.tsx
-import { effectiveConditions, parseFilterQuery } from '@nxgt/material-core/filter';
+import { effectiveConditions, parseFilterQuery } from '@nxgt/material/components';
 import type { Route } from './+types/students';
 import { STUDENT_FILTERS } from './students.filters';
 import { LOCKED } from './students.locked';

package/docs/roadmap.md

@@ -330,6 +330,17 @@ version they shipped in, and planned entries may name the major they target.
 
 ## Shipped
 
+- **A status board of tiles** (3.49.0) — `ActionCard` gains `status` (a soft badge line),
+  `meta` (one line, its tooltip only while clipped), a trailing `action` (a
+  `RowMenu`, an `IconButton`) outside the press surface, and `variant="tile"`
+  for grids of compact cells. With an `action` the title is the card's one
+  button, so the card and its menu are two tab stops and nothing nests. The
+  `Guides/Recipes/Status board` recipe (tiles in sections with a menu that
+  changes the status, and an occupancy table with a rate per section) shows
+  the whole pattern, with its code in the plugin's `screen-recipes` skill.
+  React only for now; the Vue gap is a `vue` issue.
+  ([ActionCard tile](components/buttons-and-actions.md#actioncard-tile))
+
 - **A refused field says why** (3.48.0) — the filter bar shows the words of a
   refused field under it, in one error `Alert`: "Period: choose 366 days or
   fewer.", after `formError`, so a refused, empty list no longer shows a red

package/lib/components/components.css

@@ -191,6 +191,7 @@
 @import "./ui/feedback/toast/toast-tokens.css";
 @import "./ui/actions/action-card/action-card.css";
 @import "./ui/actions/action-card/action-card-indicator.css";
+@import "./ui/actions/action-card/action-card-tile.css";
 @import "./ui/actions/action-card/action-card-modes.css";
 @import "./ui/media/galleries/gallery-image-lists.css";
 /* Gallery: the View Transition from a tile to its lightbox. */

package/lib/components/ui/actions/action-card/action-card-indicator.css

@@ -37,4 +37,52 @@
 	.nxgt-action-card[data-active] .nxgt-action-card-indicator svg {
 		stroke-dashoffset: 0;
 	}
+
+	/* The indicator takes its own column, after the action, only when shown. */
+	.nxgt-action-card[data-size="tile"]:has(> .nxgt-action-card-indicator) {
+		grid-template-columns: minmax(0, 1fr) auto;
+		grid-template-areas: "title ind" "status status" "desc desc" "meta meta";
+	}
+	.nxgt-action-card[data-size="tile"][data-icon]:has(
+		> .nxgt-action-card-indicator
+	) {
+		grid-template-columns: auto minmax(0, 1fr) auto;
+		grid-template-areas:
+			"icon title ind"
+			". status status"
+			". desc desc"
+			". meta meta";
+	}
+	.nxgt-action-card[data-size="tile"][data-has-action]:has(
+		> .nxgt-action-card-indicator
+	) {
+		grid-template-columns: minmax(0, 1fr) auto auto;
+		grid-template-areas:
+			"title act ind"
+			"status status status"
+			"desc desc desc"
+			"meta meta meta";
+	}
+	.nxgt-action-card[data-size="tile"][data-has-action][data-icon]:has(
+		> .nxgt-action-card-indicator
+	) {
+		grid-template-columns: auto minmax(0, 1fr) auto auto;
+		grid-template-areas:
+			"icon title act ind"
+			". status status status"
+			". desc desc desc"
+			". meta meta meta";
+	}
+
+	/* The indicator is centred on the title row (36px high). */
+	.nxgt-action-card[data-size="tile"] .nxgt-action-card-indicator {
+		align-self: start;
+		margin-block: 5px;
+	}
+
+	/* The action is no longer at the card's edge: no optical offset. */
+	.nxgt-action-card[data-size="tile"]:has(> .nxgt-action-card-indicator)
+	.nxgt-action-card-action {
+		margin-inline-end: 0;
+	}
 }

package/lib/components/ui/actions/action-card/action-card-modes.css

@@ -7,7 +7,10 @@
 		.nxgt-action-card * {
 			transition: none;
 		}
-		.nxgt-action-card[data-interactive]:not([data-disabled]):active {
+		.nxgt-action-card[data-interactive]:not([data-disabled]):active,
+		.nxgt-action-card[data-has-action][data-interactive]:not(
+				[data-disabled]
+			):has(.nxgt-action-card-button:active) {
 			scale: none;
 			--ac-r: 12px;
 		}