@nxgt/material 3.49.0 → 3.51.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-C9-A2md2.js}

@@ -1,4 +1,4 @@
-import { r as e } from "./i18n-provider-C0fB0sEL.js";
+import { r as e } from "./i18n-provider-Ang2f31m.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-pLgSqqLw.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-Ang2f31m.js";
+import { t } from "./translate-material-D6KCK21i.js";
 import { useCallback as n } from "react";
 //#region lib/i18n/use-material-translation.ts
 function r() {

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 |
@@ -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.
 

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 |
@@ -244,8 +244,10 @@ with a `select` column and `actions`, the toolbar keeps its band while
 nothing is selected, so the first selection does not move the rows (on a
 wide screen; on a phone the extra lines still push them down). Below 768px
 the declarative `bulkActions` fold past the third into a "More" menu in the
-toolbar too, so a list that stays a table on a phone (`layout="table"`) shows
-three actions and "More", as the cards and tiles do (#1797).
+toolbar (a `ServerTable` without `filter`, or with the facets panel) and in a
+phone's second row (#1719), as the cards and tiles do (#1797). The
+[selection band](#the-selection-band) keeps one action and puts the rest in
+"More".
 
 ```tsx
 <DataTable
@@ -293,6 +295,33 @@ press elsewhere is never pulled back. The footer's selected count is a polite
 status, so the first selection is announced ("1 row selected") when its bar
 shows up.
 
+### The selection band
+
+With `bulkActions` and a `filter` (not `variant: 'facets'`), the first
+selected row turns the band that holds the filter bar into a selection bar, in
+place and on the same row: "N selected", the bulk actions, and a tonal
+"Cancel" that clears the selection (#1718). The search and the page's
+`actions` stay mounted, hidden (`invisible`, `inert`) and keep their size, so
+the table does not move; clearing the selection brings them back. The bar's
+height is the row's (40px, 44px on a coarse pointer). From 768px every
+declarative action keeps its button; below it the bar is one row: the first
+action keeps its button, the others go into "More" (an icon, still named),
+and "Cancel" is an icon (its name and tooltip stay). Bulk actions written as a
+function are rendered as they are, in the same place.
+
+After "Cancel" the focus goes back to the control that started the selection
+(the row's or the header's checkbox) when it is still on the page, else to the
+list; a selection cleared another way (a bulk action's `selection.clear()`, a
+new query) keeps its own focus rule. While rows are selected the search is
+`inert`, so `filterRef.focus()` does nothing: cancel the selection first. The count is told once, politely, by the
+footer's status ("N rows selected"); the bar's own count is plain text. The
+cards' and tiles' list bar leaves its count and "Clear selection" to the bar.
+A phone's second row of a list in cards or tiles with `actions` (#1719) is the
+selection bar there, as before. Without `filter` (or with the facets panel) the
+band has no filter bar to replace, and the bulk actions stay in the table's
+toolbar. Text keys: `material.server-table.bulk-selected`, `bulk-cancel`,
+`bulk-bar` (English and French).
+
 ### Focus after a bulk action
 
 When a bulk action clears the selection, its buttons unmount and the focus
@@ -410,7 +439,9 @@ grow the toolbar. Without the `select` column, or without `actions`, no band
 is kept above the table. `reserveActions={false}` keeps none either: the bar
 arrives on the first selection with a short grow (none under reduced motion),
 and the rows move down by its height. `ServerTable` passes `false`, so its
-bulk bar leaves no empty row under the band while nothing is selected.
+bulk bar leaves no empty row under the band while nothing is selected. With
+`filter` it has no toolbar row at all: the band's selection bar holds the bulk
+actions ([the selection band](#the-selection-band)).
 
 ```tsx
 <DataTable
@@ -818,8 +849,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`).
@@ -843,7 +874,8 @@ export default function Students() {
     onRetry={() => fetcher.reload()}
   />
   ```
-- **Selection.** With `bulkActions(ids, selection)`, rows are selectable;
+- **Selection.** With `bulkActions(ids, selection)`, rows are selectable
+  (see [the selection band](#the-selection-band) for where the bulk actions show);
   the selection is kept across pages and drops on a new query.
   `selection.clear()` empties it and moves the focus to the table
   (`tabindex="-1"`, by script only; the list of cards or tiles in those layouts); `selection.deselect(ids)` drops rows
@@ -995,6 +1027,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 |
@@ -1035,7 +1068,8 @@ rows (the bulk bar is not drawn under it). With the declarative list form of
 (2)", named "Publish 2 rows"), hidden at 0 rows; the buttons wrap onto a second
 line rather than scroll, and past the third action the rest go into a "More"
 menu (`material.server-table.bulk-more`), each item keeping its count (the same
-fold applies below 768px to every layout, a phone table included). From
+fold applies below 768px to every layout in the toolbar and in this row; the
+[selection band](#the-selection-band) of a list with `filter` keeps one action). From
 768px the buttons read "Label (n)" as before. When the focused button
 disappears the focus goes to the next one, else to "More", else to "Select all"; an action past `max` shows its notice there (an inline text, or a disabled More item). The function
 form (`bulkActions={(ids) => node}`) is drawn whole in the row, so keep it to
@@ -1168,6 +1202,7 @@ 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); its menu items are 44px high on a coarse pointer too |
 | `triggerProps` (`RowMenu`) | button props | — | `disabled`, `className`, `data-*` on the button |
@@ -1175,6 +1210,17 @@ and `ref`, so it is the child of a `DropdownMenuTrigger asChild`.
 | `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 +1295,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 +1311,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 +1537,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 +1545,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 +1937,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 +2001,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 +2024,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/backgrounds.md

@@ -545,7 +545,9 @@ good.
 - The server renders every glyph. The drop happens after the first measure, on the client, in one frame (boxes read
   before any write), so the markup never differs between server and client.
 - A dropped glyph fades out in 150 ms (none under `prefers-reduced-motion`) and fades back when the content moves
-  away. It runs again on resize and when the content changes.
+  away. It runs again on resize and when the content changes. A glyph the first pass drops is hidden at once: the fade
+  starts a frame later (`data-settled` on the scene), so no glyph is seen over a paragraph for the length of a fade on
+  a reload.
 - The open areas keep their glyphs; the space behind and between cards is empty. `keepClear={false}` on an `AuthCard`
   lets the glyphs run under the card.
 - **`keepClear="gaps"`** (on `ActivityLayout` and `AuthCard`, opt-in; `true` stays the default) lets a glyph stay between

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

@@ -144,6 +144,9 @@ is not `focusable`). On a narrow list (under 30rem) the bar stays on one row and
 Clear shrinks to an icon button; its label stays its accessible name, and it has
 a tooltip. Do not add your own in `actions`: that one is the bulk bar's.
 Once a bulk action clears the selection and the focus is lost, the list takes it.
+In a `ServerTable` with `filter` and `bulkActions`, the band's own selection bar
+tells the count and has "Cancel" (#1718), so the list bar leaves its count and
+"Clear selection" out ([the selection band](../components/data-table-filter-and-lists.md#the-selection-band)).
 
 Inside a `ServerTable` with `filter` and `actions`, below 768px, the bar has no
 row of its own: its "Select all" (with a short visible label, "Select all"),

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/lib/components/ui/layout/app-shell/activity-backdrop-shapes.css

@@ -18,15 +18,20 @@
 		visibility: hidden;
 	}
 
-	/* A shape over the page's text, controls or surfaces (cards, tables, lists) fades out and comes back once
-	 * clear (watch-content.ts): it is hidden, never moved. A compound body (the
-	 * moon, the planet, the eclipse: `.pt.mg`) is hidden whole, with its halo
-	 * (`.pt.mh`). The scene stays invisible until the first check, so nothing
-	 * flashes over the content. */
-	[data-keep-inside] .mo > *,
-	[data-keep-inside] .pt,
-	[data-slot="activity-layout-backdrop"] [data-background] .mo > *,
-	[data-slot="activity-layout-backdrop"] [data-background] .pt {
+	/* A shape over the page's text, controls or surfaces (cards, tables, lists)
+	 * fades out and comes back once clear (watch-content.ts): it is hidden,
+	 * never moved. A compound body (the moon, the planet, the eclipse: `.pt.mg`)
+	 * is hidden whole, with its halo (`.pt.mh`). The scene stays invisible until
+	 * the first check, so nothing flashes over the content. The fade waits for
+	 * `data-settled`, set a frame after the first pass: a shape that pass drops
+	 * is hidden at once, never seen fading out over the text on a reload. */
+	[data-keep-inside][data-settled] .mo > *,
+	[data-keep-inside][data-settled] .pt,
+	[data-slot="activity-layout-backdrop"]
+		[data-background][data-settled]
+		.mo
+		> *,
+	[data-slot="activity-layout-backdrop"] [data-background][data-settled] .pt {
 		transition: opacity 150ms ease;
 	}
 	/* Important: a preset sets its own opacity on a body (`.md`, the dark

package/lib/components/ui/layout/auth-card/auth-card-backdrop.css

@@ -13,8 +13,8 @@
 		visibility: hidden;
 	}
 	/* A shape over the card or the brand row fades out (watch-content.ts). */
-	[data-slot="auth-card-backdrop"] [data-background] .mo > *,
-	[data-slot="auth-card-backdrop"] [data-background] .pt {
+	[data-slot="auth-card-backdrop"] [data-background][data-settled] .mo > *,
+	[data-slot="auth-card-backdrop"] [data-background][data-settled] .pt {
 		transition: opacity 150ms ease;
 	}
 	[data-slot="auth-card-backdrop"] [data-background] .mo > [data-hidden],

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nxgt/material",
-	"version": "3.49.0",
+	"version": "3.51.0",
 	"license": "MIT",
 	"bugs": {
 		"email": "stevegires@gmail.com"