@nxgt/material 3.36.0 → 3.38.0

package/dist/{use-heading-spy-DXYCeegh.js → use-heading-spy-BgG7Q47k.js}

@@ -1,4 +1,4 @@
-import { r as e } from "./i18n-provider-A4mI4vc1.js";
+import { r as e } from "./i18n-provider-C0RBM8rH.js";
 import { _ as t, g as n, h as r, n as i, v as a, y as o } from "./number.utils-BG_eEt5g.js";
 import { useCallback as s, useEffect as c, useMemo as l, useRef as u } from "react";
 //#region ../../node_modules/date-fns/locale/fr/_lib/formatDistance.js

package/dist/{use-material-translation-BK2YYCY3.js → use-material-translation-CiYhVc39.js}

@@ -1,5 +1,5 @@
-import { r as e } from "./i18n-provider-A4mI4vc1.js";
-import { t } from "./translate-material-xDh10aWZ.js";
+import { r as e } from "./i18n-provider-C0RBM8rH.js";
+import { t } from "./translate-material-B84ufMSF.js";
 import { useCallback as n } from "react";
 //#region lib/i18n/use-material-translation.ts
 function r() {

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

@@ -65,7 +65,7 @@ import { Mail } from 'lucide-react';
 | `asChild` | `boolean` | `false` | styles its only child instead of rendering a `<button>` |
 | `type` | `'button' \| 'submit' \| 'reset'` | `'button'` | not `submit` by default — pass it inside a form |
 
-The classes are exported as `buttonVariants` for styling your own element (Pagination, AlertDialog and the calendar's date picker use them).
+The `ButtonVariant` type (one `variant` value) is exported too, to type a `cancelVariant` you forward. The classes are exported as `buttonVariants` for styling your own element (Pagination, AlertDialog and the calendar's date picker use them).
 
 **The look.** The label is set in the type scale and is heavier than before (weights 560 at `xs` to 700 at `2xl`). The focus is a 2 px outline in the button's colour, 2 px off the button (the error colour with `aria-invalid`). A disabled button has neutral text (40 % of the text colour) and a neutral 12 % fill, none on `ghost` and `link`. `outlined` is a 1.5 px line inside the box at 55 % of the colour, and keeps a `ButtonText` outline in forced colours, where the inset shadow is removed. A `ghost` button is neutral without a `color`, and takes the tone of one it is given. On a coarse pointer every size has a 44 px hit area.
 
@@ -79,6 +79,24 @@ const [on, setOn] = useState(false);
 <Button size="2xl" shape="square" variant="tonal">Start</Button>;
 ```
 
+**Footer buttons.** In a footer (a dialog, a sheet, a form, an inline editor),
+the confirming action is `filled` and the Cancel, Close or Discard beside it
+is `tonal`: two clear buttons, one weight apart, where a text or outlined
+Cancel read poorly and left its hit area invisible. The library draws its own
+Cancel buttons that way (`AlertDialogCancel`, `ConfirmDialog`,
+`ConfirmationDialog`, the field dialogs, `ImageCropper`, the filter sheet…),
+and each takes `cancelVariant` (a `Button` `variant`, default `'tonal'`) to
+restore `'outlined'` or `'ghost'`. Write yours the same way. An icon-only ✕ in
+a corner, a toolbar button and a text link stay as they are; a destructive
+confirm keeps its own variant and `color="error"`.
+
+```tsx
+<DialogFooter>
+	<Button variant="tonal" onClick={close}>Cancel</Button>
+	<Button type="submit">Save</Button>
+</DialogFooter>;
+```
+
 **On a phone.** A button is never wider than its container, and keeps its
 content's width in a column: a label too
 long for it (a card on a phone) is cut with “…” on one line, and its

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

@@ -83,7 +83,9 @@ truncates with an ellipsis and carries its full text as a `title`); `DataTablePa
 "Toggle row details" (`material.table.labels.toggle-row`) with `aria-expanded`, under a
 visually hidden header "Expand", `material.table.labels.expand`);
 `useDeleteRowsHandler(onDelete)` returns a `handleDelete(rows)` click
-handler and the `confirmDialog` to render.
+handler and the `confirmDialog` to render; its Cancel button is `tonal`
+(`useDeleteRowsHandler(onDelete, { cancelVariant: 'outlined' })` restores the
+earlier look).
 `dataTableFeatures` / `DataTableFeatures` are the TanStack v9 features the
 table enables, for typing your own column defs.
 
@@ -922,7 +924,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) |
-| `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 |
+| `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 |
 | `filters` | `tableFilters(model)` | — | without `filter`: "nothing matches" and its clear |
@@ -942,6 +944,59 @@ Its props are `ServerTableProps<T>`; `filter` is a `ServerTableFilter`,
 <ServerTable {...props} filter={{ model }} bandActions="inline" actions={<IconButton aria-label="New" tooltip="New"><Icon name="plus" /></IconButton>} />
 ```
 
+#### The phone header of a list in cards or tiles
+
+Below 768px, with `filter`, `actions` and a list in `cards` or `tiles` (the
+`layout`, or the phone side of `{ phone, wide }`), the header takes two rows,
+not three:
+
+1. the search;
+2. at the start, the list's labelled "Select all" checkbox (its name stays
+   "Select all on this page"); at the end, the sort menu, "Filters (N)" and
+   the page's `actions`.
+
+While rows are selected, row 2 becomes the selection bar: "N rows selected"
+(`material.table.pagination.selected`) and "Clear selection" take the label's
+place, and the `bulkActions` take the place of the sort, "Filters (N)" and the
+actions, which come back once the selection is empty. The header stays at two
+rows (the bulk bar is not drawn under it). With the declarative list form of
+`bulkActions`, each action keeps its icon, a short label and its count ("Publish
+(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. From
+768px the buttons read "Label (n)" as before. When the focused button
+disappears the focus goes to the next one, else to "Select all". The function
+form (`bulkActions={(ids) => node}`) is drawn whole in the row, so keep it to
+one or two compact buttons; the footer's polite status still tells the selection once. The cards'
+own list bar row is gone in this layout; the names, the sort menu and the
+Filters sheet are the same. A list that cannot be selected has no checkbox
+(row 2 starts with the sort). The table layout, a list without `filter` or
+without `actions`, `variant: 'facets'` and every width from 768px are
+unchanged, and `bandActions` has no effect while the second row is there.
+
+The row is narrow, so it compacts to the band's width, never wrapping to a
+third row: below 30rem the sort shows its icon and arrow (its name, "Sort: Name,
+Ascending", is unchanged); "Filters (N)" keeps its icon and count (and its
+name) while rows are selected, and on a band narrower than 19rem; the count
+may take two lines. A button of `actions` that has an icon (a lucide glyph or
+an `Icon`) is drawn as the icon alone: its text stays its accessible name and,
+unless you gave it a `tooltip`, becomes its `title`; an `IconButton` keeps its
+own name and tooltip, and a button without an icon keeps its text. Only a button with a single icon is compacted; put an icon
+in the primary action to get the compact form. With `filter.sheetTrigger: false`
+the second row has no "Filters (N)": the one you place in `actions` goes there. Every control is a 44px box on a
+coarse pointer.
+
+```tsx
+<ServerTable
+  {...props}
+  filter={{ model }}
+  layout={{ phone: 'tiles', wide: 'table' }}
+  renderTile={renderTile}
+  bulkActions={(ids) => <Button>Archive</Button>}
+  actions={<Button><Icon name="plus" />New</Button>}
+/>
+```
+
 **Where the focus goes.** After "Clear" on an empty page, or the last chip
 removed, the focus returns to the Filter's search; a bar without one falls to
 its first shown control (a quick filter, "Add filter", or "Filters (N)" on a
@@ -988,7 +1043,7 @@ page's `title`.
 
 `ServerTable` uses `DataTable`'s `focusable`, `focusRef` (the table, or the list of cards or tiles), `announceLoading`, `announceEmpty`, `filtered` and `pagination.live` (see [DataTable](#datatable)).
 
-**Storybook:** `Data table, filter & lists/ServerTable` (`Error No Loading`, `Error Retry`), `…/ServerTable/Band and empty page`, `…/ServerTable/Phone`, `…/ServerTable/Cards`, `…/ServerTable/Tiles`, `…/ServerTable/Own controls` (`Past The Last Page`, `Slow Router Keeps Search`), `…/ServerTable/Locked rows`, `…/ServerTable/Compact band and icon paging` · **Vue:** `ServerTable`
+**Storybook:** `Data table, filter & lists/ServerTable` (`Error No Loading`, `Error Retry`), `…/ServerTable/Band and empty page`, `…/ServerTable/Phone`, `…/ServerTable/Phone header`, `…/ServerTable/Cards`, `…/ServerTable/Tiles`, `…/ServerTable/Own controls` (`Past The Last Page`, `Slow Router Keeps Search`), `…/ServerTable/Locked rows`, `…/ServerTable/Compact band and icon paging` · **Vue:** `ServerTable`
 
 ---
 
@@ -1402,6 +1457,13 @@ and `errors` shows a server's refusal of a condition (see
 [A refused condition](#a-refused-condition)). A locked chip is a focusable group named by its text ("Year is 2026-2027"), with "Locked: <reason>" as its description. The other variants
 and `FilterProps` are unchanged.
 
+#### The sheet's and the staged panel's secondary button
+
+"Clear all" in the phone sheet's footer and "Reset" in the staged panel's are
+`tonal`, beside a filled "Show N results" / "Apply". `cancelVariant` on
+`Filter variant="bar"` or `"facets"` (a `Button` `variant`) restores
+`'outlined'`. `FilterPresets` takes the same prop for its save dialog's Cancel.
+
 #### A compact band for a list inside a page section
 
 `bandDensity="compact"` is `ServerTable`'s prop, with the same values and the

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

@@ -167,7 +167,7 @@ Parts: `AlertDialog`, `AlertDialogTrigger`, `AlertDialogContent`,
 `AlertDialogFooter`, `AlertDialogAction`, `AlertDialogCancel`,
 `AlertDialogOverlay`, `AlertDialogPortal`. `AlertDialogAction` and
 `AlertDialogCancel` take the `Button` `variant` and `color` (cancel defaults
-to `outlined`; a `ghost` one in a colour shows it, as a ghost `Button` does). Radix props (`open`, `defaultOpen`, `onOpenChange`) go on
+to `tonal`, under a filled action; `variant="outlined"` restores the earlier look; a `ghost` one in a colour shows it, as a ghost `Button` does). Radix props (`open`, `defaultOpen`, `onOpenChange`) go on
 `AlertDialog`.
 On open, `AlertDialogContent` focuses `AlertDialogCancel`, the least
 destructive action (its first control when there is no Cancel, the content
@@ -225,6 +225,7 @@ function DeleteProject({ onDelete }: { onDelete: () => Promise<void> }) {
 | `confirmDisabled` | `boolean` | `false` | disables the confirm button, for example while an error of yours stands |
 | `lockOnRefusal` | `boolean` | `false` | once `onConfirm` has refused (thrown), the confirm button stays disabled while its error shows, so a retry that cannot succeed is not invited; Cancel stays enabled. The error clears when the dialog closes |
 | `confirmLabel` / `cancelLabel` | `string` | "Confirm" / "Cancel", translated (`material.confirm-dialog.confirm` / `.cancel`) | button text |
+| `cancelVariant` | `ButtonVariant` | `'tonal'` | the Cancel button's variant; `'outlined'` restores the earlier look |
 
 On a phone (below 640 px) the footer stacks. A `destructive` dialog puts Cancel first and the destructive action last; a default one keeps the action on top.
 
@@ -272,6 +273,7 @@ const schema = z.object({ reason: z.string().min(3) });
 | `icon` | `ReactNode` | info icon | the glyph alone (not an `IconButton`): it is shown in a decorative, `aria-hidden` badge |
 | `iconProps` | `IconButtonProps` | — | the badge's `variant`, `color`, `className` |
 | `confirmText` / `cancelText` | `ReactNode` | "Confirm" / "Cancel", translated (`material.confirm-dialog.confirm` / `.cancel`) | button text |
+| `cancelVariant` | `ButtonVariant` | `'tonal'` | the Cancel button's variant; `'outlined'` or `'ghost'` restores an earlier look |
 
 **Several steps, one dialog.** Confirm closes it; to show the next step, change
 its `title` (and `description`) and set `open` back to `true`, at once (from

package/docs/components/form-fields.md

@@ -1324,7 +1324,7 @@ Three parts, each for one job:
 
 | Part | Use it for |
 | --- | --- |
-| `AttributesField` · `AttributesFormField` | the field, and its React Hook Form wrapper. Inline by default; `editing="dialog"` keeps the list and dialog |
+| `AttributesField` · `AttributesFormField` | the field, and its React Hook Form wrapper. Inline by default; `editing="dialog"` keeps the list and dialog, whose Cancel button is `tonal` (`cancelVariant` restores `'outlined'`) |
 | `AttributesEditor` | the same inline editor, controlled (`value`, `onValueChange`), outside a form |
 | `AttributesSummary` | the read-only display: type icons, labels and default values |
 
@@ -1536,8 +1536,9 @@ only, and a value that fails its check is shown without a link.
 `ContactsEditor` takes `value`, `onValueChange`, `label`, `headingLevel` (`3`
 by default; the type headings sit one below it), `variant` and `disabled`. A
 wrong format is said once the field was left, a duplicate at once. `ContactsFormField` takes `editing` (`'inline' \| 'dialog'`,
-default `'inline'`) and `variant` (inline only). `Contacts` takes `data`,
-`onAdd`, `onEdit` and `disabled`.
+default `'inline'`), `variant` (inline only) and `cancelVariant` (dialog only,
+the Cancel button's `Button` variant, default `'tonal'`; `'outlined'` restores
+the earlier look). `Contacts` takes `data`, `onAdd`, `onEdit` and `disabled`.
 
 `contactsListSchema()` is the zod schema of a whole list, with the editor's
 own rules (the same functions): the value's format by type (an email, an
@@ -1592,6 +1593,10 @@ Parts: `PostalAddress` (the card), `PostalAddressDialog` (the edit form).
 | `onEdit` | `() => void` | — | shows the edit button |
 | `disabled` | `boolean` | — | hides it |
 
+`PostalAddressFormField` and `PostalAddressDialog` take `cancelVariant` (the
+dialog's Cancel button, a `Button` `variant`, default `'tonal'`; `'outlined'`
+restores the earlier look).
+
 **Emits:** `PostalAddressFormField` stores a `PostalAddressFieldValue`
 object, and `{}` when the address is removed.
 **Form wrapper:** `PostalAddressFormField` — `control` and `name`, see
@@ -1671,7 +1676,8 @@ summary shows a quiet "Hours not set" (`empty` replaces the text,
 `OpeningHoursEditor` takes `value`, `onValueChange`, `label`, `headingLevel` (`3` by default), `weekStartsOn`,
 `locale` and `disabled`. `OpeningHoursFormField` takes `editing`
 (`'inline' \| 'dialog'`, default `'inline'`), `weekStartsOn` and `locale`
-(inline), and `showAddAllDays` (dialog, default `false`).
+(inline), and `showAddAllDays` (dialog, default `false`) and `cancelVariant`
+(dialog, the Cancel button's `Button` variant, default `'tonal'`).
 
 `openingHoursSchema()` returns the zod schema of one `OpeningHour`
 (`dayOfWeek` coerced from a string), built on the first call. It is unchanged.

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

@@ -429,6 +429,7 @@ after `onCrop`).
 | `cropShape` | `'rect' \| 'round'` | `'rect'` | round mask for avatars |
 | `fileName` | `string` | — | name of the produced `File` |
 | `onCancel` | `() => void` | — | `ImageCropper`: shows a Cancel button |
+| `cancelVariant` | `ButtonVariant` | `'tonal'` | `ImageCropper`: the Cancel button's variant; `'ghost'` restores the earlier look |
 | `open` / `onOpenChange` / `trigger` | | — | `ImageCropperDialog`: controlled or trigger-opened |
 
 **Storybook:** `Media & files/ImageCropper` · **Vue:** `ImageCropper`, `ImageCropperDialog`

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

@@ -7,7 +7,7 @@ documentation-site shell. Everything is imported from
 
 | | Component | What it does |
 | --- | --- | --- |
-| <img src="../previews/navigation-layout-appshell.webp" width="96" alt=""> | [ActivityLayout](#activitylayout) | App shell: sidebar, header, breadcrumbs, titled page; a route's `handle.title` is the page's `h1` in the app bar (it labels `main`; `usePageTitleFocus()` focuses it after a navigation), `breadcrumbRoot` a text root crumb, `breadcrumb={false}` no trail, `context` the tenant line atop the phone's menu sheet; `menuOpen` / `onMenuOpenChange` control the phone's menu sheet, which closes itself on a followed link or any location change |
+| <img src="../previews/navigation-layout-appshell.webp" width="96" alt=""> | [ActivityLayout](#activitylayout) | App shell: sidebar, header, breadcrumbs, titled page; a route's `handle.title` is the page's `h1` in the app bar (it labels `main`; `usePageTitleFocus()` focuses it after a navigation), `handle.titleAfter` / `titleAfter` a node right after it, outside the `h1` (a record's `Switcher`), `headerContext` a small tenant line after it from md up, `breadcrumbRoot` a text root crumb or (`icon: true`) the home icon with its own target and name, `breadcrumb={false}` no trail, `context` the tenant line atop the phone's menu sheet; `menuOpen` / `onMenuOpenChange` control the phone's menu sheet, which closes itself on a followed link or any location change |
 | <img src="../previews/navigation-layout-accountmenu.webp" width="96" alt=""> | [AccountMenu](#accountmenu) | The app bar's avatar menu: the account, the app's links, Sign out |
 | <img src="../previews/navigation-layout-authcard.webp" width="96" alt=""> | [AuthCard](#authcard) | Signed-out page frame: one `main`, a centred card, its title the `h1` |
 | <img src="../previews/navigation-layout-sidebar.webp" width="96" alt=""> | [Sidebar](#sidebar) | Collapsible navigation sidebar |
@@ -73,8 +73,10 @@ phone's menu sheet pad clear of `env(safe-area-inset-*)`, as classes; see the
 | `avatar` | `ReactNode` | — | an image URL or a node, in the header |
 | `headerTitle` | `ReactNode` | — | the header's leading title (the context: an organisation's name), after the phone's menu button, truncated when long; when it is cut off, its full text is the `title` tooltip (#629) |
 | `handle.title` | `ReactNode \| (match: UIMatch) => ReactNode` | — | on a route: the page's title in the app bar, its one `h1`, in the first server HTML; `ActivityContent` leaves its own title out while it is set (see the [app shell guide](../guides/app-shell.md#the-pages-title-in-the-app-bar)) |
+| `titleAfter` / `handle.titleAfter` | `ReactNode \| (match: UIMatch) => ReactNode` | — | a node right after the page's title in the app bar, outside its `h1` (a record's `Switcher`); stays on screen on a phone, the title truncates first; the prop wins over the handle (see the [app shell guide](../guides/app-shell.md#a-slot-after-the-title)) |
+| `headerContext` | `ReactNode` | — | a small muted context line (the tenant) after the page's title and its slot, from `md` up, outside the `h1`, truncated with its full text as the tooltip; hidden on a phone, where `context` fills the menu sheet (see the [app shell guide](../guides/app-shell.md#a-context-line-after-the-title)) |
 | `breadcrumb` | `boolean` | `true` | `false` hides the breadcrumb trail (an error page); it is also hidden when every matched `handle.breadcrumb` renders `null`; see the [app shell guide](../guides/app-shell.md#breadcrumbs) |
-| `breadcrumbRoot` | `{ label: ReactNode; to: string }` | — | the breadcrumb's first crumb, a text link in place of the home icon (`AppBreadcrumb`'s `root`); see the [app shell guide](../guides/app-shell.md#breadcrumbs) |
+| `breadcrumbRoot` | `{ label: ReactNode; to: string }` or `{ label: string; to: string; icon: true }` | — | the breadcrumb's first crumb: a text link in place of the home icon, or with `icon: true` the home icon alone linked to `to`, named and tooltipped `label` (`AppBreadcrumb`'s `root`); see the [app shell guide](../guides/app-shell.md#breadcrumbs) |
 | `headerActions` | `ReactNode` | — | header, before the avatar |
 | `title`, `subtitle`, `actions` | `ReactNode` | — | `ActivityContent`'s header card; `title` is left out while a route's `handle.title` puts the page's title in the app bar |
 | `header` / `hideHeader` | `ReactNode` / `boolean` | — | `ActivityContent`: replace or drop the header card |

package/docs/components/primitives.md

@@ -151,7 +151,7 @@ import {
 	</CardHeader>
 	<CardContent>Pick a name and a framework.</CardContent>
 	<CardFooter className="justify-end gap-2">
-		<Button variant="outlined">Cancel</Button>
+		<Button variant="tonal">Cancel</Button>
 		<Button>Deploy</Button>
 	</CardFooter>
 </Card>;

package/docs/components/rich-widgets.md

@@ -1728,7 +1728,7 @@ function Reply({ onSubmit }: { onSubmit: (html: string) => void }) {
 			mentions={['Ada', 'Grace']}
 			actions={
 				<>
-					<Button variant="ghost" onClick={() => setHtml('')}>
+					<Button variant="tonal" onClick={() => setHtml('')}>
 						Cancel
 					</Button>
 					<Button onClick={() => onSubmit(html)}>Reply</Button>
@@ -1965,7 +1965,7 @@ function Comment() {
 | `editable` | `boolean` | `true` | read-only when `false` (toolbar hidden) |
 | `options.features` | `RichTextEditorFeatures` | all `true` | turn off tables, images, YouTube, slash commands, custom blocks… |
 | `options.mentions.suggestions` | `(string \| MentionItem)[]` | — | enables `@` mentions; a `MentionItem` (as `MentionList` / `ChatComposer` take) shows its avatar and handle in the list and inserts its `id` with its `label` as text |
-| `options.onSave` / `onCancel` | `() => void` | — | adds Save / Cancel buttons |
+| `options.onSave` / `onCancel` | `() => void` | — | adds Save / Cancel buttons; Cancel is `tonal`, `options.cancelVariant` restores `'ghost'` |
 | `characterLimit` | `number` | — | caps the text and shows the count |
 | `placeholder` | `string` | "Write something …" (translated, `material['rich-text-editor'].placeholder`) | shown in an empty editor; a change shows at once |
 | `required` | `boolean` | — | the asterisk, and `aria-required` on the editable area |

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

@@ -788,20 +788,84 @@ export function Topics() {
 | `value` / `onValueChange` | `string \| null` or `string[]` | — | the chosen value, by `type` |
 | `deselectable` | `boolean` | `false` | `single` only: pressing the chosen chip clears it |
 | `max` / `min` | `number` | — | `multiple` only: `max` blocks the other chips once reached and speaks "{count} of {max} chosen"; `min` is a hint only |
-| `options` | `{ value; label; icon?; count?; description?; disabled?; disabledReason? }[]` | — | the chips; `count`: see [option counts](#option-counts) |
+| `options` | `{ value; label; icon?; count?; description?; disabled?; disabledReason? }[]` | — | the chips, in one flow; `count`: see [option counts](#option-counts) |
+| `groups` | `{ label: string; options }[]` | — | titled sections instead of `options` (it wins when both are given): see [slot picker](#slot-picker-columns-groups-and-reasons) |
+| `columns` | `number \| { base?; sm?; md?; lg? }` | — | equal-width columns (1 to 12; one count per breakpoint, each holding to the next); Up and Down then move by row. Unset, the chips flow and wrap |
+| `showDisabledReason` | `boolean` | `true` | prints a disabled option's `disabledReason` under its chip; `false` leaves it to the tooltip and the accessible description |
 | `size` | `'default' \| 'sm' \| 'lg'` | `'default'` | the chip's size: 28px, 24px, or `lg`, a 44px box at every pointer (a coarse pointer already gets a 44px box at any size) |
 | `name` | `string` | — | put on every chip (`ChipGroupFormField` passes its field `name`), so `document.getElementsByName(name)` finds the group's chips in order |
 | `label`, `helperText`, `error`, `required`, `disabled`, `id` | | — | the question and its help or error text, the required mark, disabling every chip, the group's `id` |
 | `orientation` | `'horizontal' \| 'vertical'` | `'horizontal'` | wrapping row or a column (each chip as wide as its label); in single mode it sets the `radiogroup`'s `aria-orientation` (ARIA allows none on a `group`), and every arrow key moves in both axes either way (the chips wrap) |
 
+### Slot picker: columns, groups and reasons
+
+A day's slots, some taken: an even grid, a heading per period, and the reason
+a slot is gone printed where a touch user can read it.
+
+```tsx
+import { ChipGroupField } from '@nxgt/material/components';
+import { useState } from 'react';
+
+const groups = [
+	{
+		label: 'Morning',
+		options: [
+			{ value: '09:00', label: '09:00' },
+			{ value: '09:30', label: '09:30', disabled: true, disabledReason: 'Taken' },
+			{ value: '10:00', label: '10:00' },
+		],
+	},
+	{
+		label: 'Afternoon',
+		options: [
+			{ value: '13:00', label: '13:00' },
+			{ value: '13:30', label: '13:30' },
+		],
+	},
+];
+
+export function Slots() {
+	const [slot, setSlot] = useState<string | null>(null);
+	return (
+		<ChipGroupField
+			label="Time"
+			size="lg"
+			groups={groups}
+			columns={{ base: 3, lg: 6 }}
+			value={slot}
+			onValueChange={setSlot}
+		/>
+	);
+}
+```
+
+- **Disabled reason.** The reason is a small muted line under the chip (not
+  only a tooltip), and the chip points to it with `aria-describedby`, so a
+  screen reader says "09:30, Taken". The chip stays `aria-disabled`, not
+  `disabled`: arrows still land on it and a press does nothing. The "up to N"
+  reason of a reached `max` stays a hidden text.
+- **Columns.** The cells are equal (`minmax(0, 1fr)`), each chip fills its
+  cell, and the classes are static, so the server markup holds no inline
+  style. Unlike `ChoiceCardGroup`'s `columns` (a maximum, as many as fit), this
+  is the exact count at each width.
+- **Groups.** Each section is a `role="group"` named by its visible heading
+  (`aria-labelledby`), inside the one `radiogroup` (or `group`). Chips keep one
+  index across sections: Left and Right run through all of them in reading
+  order, Up and Down move to the nearest chip on the row above or below,
+  crossing from the last row of Morning to the first of Afternoon, and Home
+  and End go to the first and last chip. With `columns` or `groups`, the
+  vertical arrows follow the layout; a plain flow keeps its linear order.
+- A 44x44 box on a coarse pointer, and the grid follows `dir="rtl"`.
+
 **Accessibility:** `role="radiogroup"` / `radio` (single) or `role="group"` /
 `checkbox` (multiple), named by `label`. Arrows move the focus (and choose, in
 single mode), Home and End jump, and the arrows follow `dir="rtl"`; Space toggles in multiple
 mode; Enter does nothing, so it never submits a surrounding form. One chip holds
 the tab stop. A disabled option, or an unchosen one once `max` is reached, is
 `aria-disabled`: it stays focusable and an arrow stop, a press does nothing,
-and its `disabledReason` is its tooltip and its accessible description (as is
-`description`). The group's label shows the required mark when `required`; in
+and its `disabledReason` is printed under the chip (unless
+`showDisabledReason={false}`, then its tooltip) and is its accessible description
+(as is `description`). The group's label shows the required mark when `required`; in
 multiple mode, where a `group` cannot carry `aria-required`, the group is
 described by "This field is required." instead. On a touch screen (coarse
 pointer) each chip is a real 44x44 box, 28px drawn with a mouse, and the

package/docs/guides/app-shell.md

@@ -200,8 +200,10 @@ partitionMenu(items);                              // { content, footer }
 | `avatar` | `ReactNode` | — | End of the header. A `string` is used as the image URL of an `Avatar`; anything else is rendered as-is |
 | `linkComponent` | `AppShellLinkComponent` | React Router `Link` | The link each menu entry renders, given `href` (see below) |
 | `headerTitle` | `ReactNode` | — | The header's leading title: the context the app is in (the active organisation's name), right after the phone's menu button, truncated when long; when it is cut off, its full text is the `title` tooltip (#629) |
+| `titleAfter` | `ReactNode` | — | A node right after the page's title in the app bar, outside its `h1` (a record's `Switcher`); wins over a route's `handle.titleAfter` (see [A slot after the title](#a-slot-after-the-title)) |
+| `headerContext` | `ReactNode` | — | A small muted context line (the tenant's name) after the page's title and its slot, from `md` up: outside the `h1`, truncated, its full text the tooltip once cut off. Not shown on a phone, where the menu sheet's `context` carries it (see [A context line](#a-context-line-after-the-title)) |
 | `breadcrumb` | `boolean` | `true` | `false` hides the breadcrumb trail, for an error page whose matched routes would show a misleading one (see [Breadcrumbs](#breadcrumbs)) |
-| `breadcrumbRoot` | `AppBreadcrumbRoot` (`{ label: ReactNode; to: string }`) | — | The breadcrumb's first crumb, in place of the home icon: a text link to `to` (see [Breadcrumbs](#breadcrumbs)) |
+| `breadcrumbRoot` | `AppBreadcrumbRoot` (`{ label: ReactNode; to: string }`, or `{ label: string; to: string; icon: true }`) | — | The breadcrumb's first crumb, in place of the default home icon: a text link to `to`, or with `icon: true` the home icon alone, linked to `to` and named `label` (see [Breadcrumbs](#breadcrumbs)) |
 | `headerActions` | `ReactNode` | — | In the header, before the avatar: notifications, help, `ThemeToggle` |
 | `children` | `ReactNode` | — | The routed content, usually `<Outlet />` |
 | `contentAs` | `'main' \| 'div'` | `'main'` | The content region's element: the page's `<main>` landmark, or a `div` when your app renders its own `<main>` |
@@ -377,10 +379,11 @@ export const invoiceRoute: RouteObject = {
   define none), truncated with an ellipsis; when it is cut off, its full text
   is the `title` tooltip, as for `headerTitle` (#629), and its accessible
   name stays the text itself. It sits after `headerTitle`, which gives it room.
-- **Typing it.** `AppShellHandle<Data>` (`{ breadcrumb?, title? }`) and
+- **Typing it.** `AppShellHandle<Data>` (`{ breadcrumb?, title?, titleAfter? }`) and
   `PageTitle<Data>` are exported for a route's `handle`; `Data` types the
   match's `loaderData`. A custom `ActivityContent` `header` is
   yours: keep an `h1` out of it when the route sets `handle.title`.
+- **A slot after the title** (`titleAfter`) and a tenant line (`headerContext`) go in the same row, see [below](#a-slot-after-the-title).
 - **`ActivityContent` leaves its own title out** while the bar has one, so the
   page has a single `h1`, whatever its `titleAs` (the bar already shows the
   title); its `subtitle` and `actions` stay, in the header
@@ -421,6 +424,72 @@ function FocusTitleOnNavigation() {
 // <ActivityLayout items={items}><FocusTitleOnNavigation /><Outlet /></ActivityLayout>
 ```
 
+### A slot after the title
+
+`handle.titleAfter` (or the `titleAfter` prop of `ActivityLayout`) renders a node
+right after the page's title in the app bar: a record page puts its `Switcher`
+there, where the user reads the record's name. It takes the same forms as
+`handle.title`: a node, or a function of the route's match, the deepest matched
+route that declares one winning. The `titleAfter` prop wins over the handle, and
+neither shows while the bar has no page title.
+
+```tsx
+import type { AppShellHandle } from '@nxgt/material/components';
+import { Switcher } from '@nxgt/material/components';
+
+export const handle = {
+  title: 'Project A',
+  titleAfter: (
+    <Switcher
+      variant="expressive"
+      label="Project"
+      value="a"
+      options={projects}
+      getHref={(item) => `/projects/${item.id}`}
+    />
+  ),
+} satisfies AppShellHandle;
+```
+
+- **It is outside the `h1`**: a sibling in the same row
+  (`[data-slot=app-header-title-after]`), vertically centred with the title, so
+  the heading's accessible name stays the plain title.
+- **On a phone it stays on screen** and shares the row with the title: the
+  title truncates first (ellipsis), the slot never shrinks.
+- **Nothing changes without it**: the markup of a bar with no slot is the same
+  as before, and the slot is read from the matches like the title, so it is in
+  the server HTML and does not flash on a route change.
+
+### A context line after the title
+
+A multi-tenant app keeps the current tenant visible on a desktop screen with
+`headerContext`: a small, muted line after the page's title (and its
+`titleAfter` slot) in the app bar.
+
+```tsx
+<ActivityLayout
+  items={items}
+  context={tenant.name} // the phone's menu sheet
+  headerContext={tenant.name} // the app bar, from md up
+>
+  <Outlet />
+</ActivityLayout>
+```
+
+- **It is outside the `h1`** (`[data-slot=app-header-context]`), so the
+  heading's name stays the page's title; it is truncated (at most 14rem), and
+  its full text is the `title` tooltip once it is cut off (#629).
+- **From `md` up only.** On a phone it is hidden: the menu sheet's `context`
+  line covers it. The two props are independent, so setting `context` alone
+  adds nothing to the bar, and setting both never shows the name twice on one
+  screen.
+- **The title truncates first**: with a long title, the slot and the line
+  together, the title gives way; the slot stays whole and the line keeps its cap.
+- **It needs a page title**: while the bar shows none (no `handle.title`),
+  `headerTitle` is the context line and `headerContext` is ignored.
+
+### The account menu
+
 `AccountMenu` is the `avatar` most apps want: an avatar button named
 "Account menu, Ada Lovelace" (`material.account-menu.trigger`) that opens a
 menu aligned to its end, headed by the avatar, the name and `secondary`, then
@@ -1010,6 +1079,26 @@ crumbs; `label` is a node, already translated.
 </ActivityLayout>
 ```
 
+When a long tenant name would crowd the trail, keep the house icon alone with
+`icon: true`: it links to `to`, and `label` (a string) is its accessible name
+and its tooltip, shown on hover and on keyboard focus. It keeps the home
+icon's 44px target on a touch screen and its focus ring. The default icon
+(no `breadcrumbRoot`) shows the `material.app-shell.home` name as a tooltip
+too, and still links to the router's root.
+
+```tsx
+<ActivityLayout
+  items={items}
+  breadcrumbRoot={{
+    label: `Home \u2014 ${school.name}`,
+    to: `/schools/${school.slug}`,
+    icon: true,
+  }}
+>
+  <Outlet />
+</ActivityLayout>
+```
+
 ```tsx
 import type { RouteObject, UIMatch } from 'react-router';
 

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

@@ -145,6 +145,11 @@ 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.
 
+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"),
+the count and "Clear selection", and the sort move to the table's second header
+row, beside "Filters (N)" and the actions ([ServerTable](../components/data-table-filter-and-lists.md#the-phone-header-of-a-list-in-cards-or-tiles)).
+
 ```tsx
 const { columnHelper, predefinedColumns } = useColumnHelpers<Person>();
 const columns = [predefinedColumns().select, columnHelper.accessor('name', { header: 'Name' })];

package/docs/guides/i18n.md

@@ -542,7 +542,7 @@ places that use them read:
 | `material.table.labels.no-data` | No data available | Données non disponibles | `DataTable`'s default for a table with no data |
 | `material.table.labels.no-results` / `no-results-description` | No results / Try a different search or clear the filters. | Aucun résultat / Essayez une autre recherche ou retirez les filtres. | `DataTable`'s default when a filter hides every row, also announced by its status |
 | `material.table.labels.sort` / `sort-by` / `ascending` / `descending` | Sort / Sort by / Ascending / Descending | Trier / Trier par / Croissant / Décroissant | The cards list's sort menu button and its two radio groups |
-| `material.table.labels.select-page` / `select-item` | Select all on this page / Select | Tout sélectionner sur cette page / Sélectionner | The cards list bar's select-all, and a card's checkbox (named "Select <title>") |
+| `material.table.labels.select-page` / `select-item` | Select all on this page / Select | Tout sélectionner sur cette page / Sélectionner | The cards list bar's select-all (its accessible name), and a card's checkbox (named "Select <title>"). Inside a `ServerTable`'s two-row phone header the select-all also shows `material.table.labels.select-all` ("Select all") as its short visible label |
 | `material.table.labels.clear-selection` | Clear selection | Effacer la sélection | The cards list bar's button, shown while rows are selected; on a narrow list it is an icon button, and this string is its accessible name and tooltip |
 | `material.table.labels.scroll-list` | Scrollable list | Liste défilante | The region of a cards or tiles list with `maxHeight` (`scrollLabel` overrides it) |
 | `material.command.empty` | No results | Aucun résultat | `CommandEmpty` with no children |

package/docs/roadmap.md

@@ -491,7 +491,11 @@ version they shipped in, and planned entries may name the major they target.
   drops its own title while the bar has one (see [the page's title in the app
   bar](guides/app-shell.md#the-pages-title-in-the-app-bar)). The title has a
   stable `id` and `tabIndex={-1}`, `<main>` is labelled by it, and
-  `usePageTitleFocus()` focuses it after a navigation.
+  `usePageTitleFocus()` focuses it after a navigation. `handle.titleAfter` (or the
+  `titleAfter` prop) puts a node, such as a record's `Switcher`, right after the
+  title outside its `h1`, and `headerContext` a small tenant line after it from
+  `md` up (see [a slot after the
+  title](guides/app-shell.md#a-slot-after-the-title)).
   `breadcrumbRoot` on `ActivityLayout` (`root` on `AppBreadcrumb`) puts a text
   root crumb, resolved through the router's basename, in place of the home
   icon; and `context` on `ActivityLayout`, `AppHeader` and `AppSidebar` shows

package/lib/components/components.css

@@ -63,6 +63,8 @@
 @import "./ui/collections/data-table/data-table-items-bar.css";
 @import "./ui/collections/data-table/data-table-items-forced.css";
 @import "./ui/collections/data-table/data-table-items-tiles.css";
+/* ServerTable's second header row on a phone: select-all, sort, Filters and the actions. */
+@import "./ui/collections/server-table/server-table-phone-row.css";
 /* Checkbox and Radio: the check that draws in, the dot that springs in, the state layer. */
 @import "./ui/selection/selection-controls.css";
 @import "./ui/selection/selection-controls-forced.css";