@nxgt/material 3.37.0 → 3.39.0

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

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

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

@@ -924,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 |
@@ -944,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
@@ -990,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`
 
 ---
 

package/docs/components/date-and-time.md

@@ -177,7 +177,9 @@ export function Delivery() {
 | `onValueChange` | `(value?: Date) => void` | — | `undefined` when the day is unselected |
 | `entry` | `'typed'` | — | deprecated, no effect: the date is always typed in segments, with a button that opens the calendar (`'button'`, the 2.x trigger, was removed in 3.0) |
 | `clearable` | `boolean` | `!required` | a ✕ (named "Clear") that empties the typed field; shown only while it holds a date and is not `disabled` |
-| `showTimePicker` | `boolean` | — | adds a `TimePicker` and an OK button; the popover stays open. The time is picked there, not typed: the tiles, beside the calendar from 768px and under it in a sheet, with a Cancel button |
+| `showTimePicker` | `boolean` | — | adds the time of day (a day click in the calendar keeps it): its hours and minutes (and AM / PM on a 12-hour clock) are typed in segments after the date, and a `TimePicker` with an OK button and a Cancel button sits beside the calendar from 768px and under it in a sheet; the popover stays open. Typed and picked are one value. The field has a value once the date and the time are both complete (see [Time zones and typed time](#time-zones-and-typed-time)) |
+| `hourCycle` | `12 \| 24` | the language's | the clock of the typed time and of the picker (English 12, French 24); with `showTimePicker` |
+| `timeZone` | IANA name (`'Europe/Paris'`) | the machine's zone | the field reads and writes the wall clock of that zone; `value` and `onValueChange` stay the true instant ([below](#time-zones-and-typed-time)) |
 | `placeholder`, `label`, `helperText`, `error`, `required` | | — | `label` and `helperText` sit beside the field; `error` and `required` its state. `placeholder` names a field with no label |
 | `disabled` | `boolean` | — | disables the field: no segment takes a key and the calendar cannot be opened |
 | `disabledDays` | react-day-picker's `Matcher \| Matcher[]` | — | days that cannot be picked (the calendar's `disabled`), e.g. `{ dayOfWeek: [0] }` |
@@ -257,6 +259,77 @@ resized, a phone turned) keeps the field as it is: a partial entry stays,
 and so do the "Open calendar" button and its focus; an open picker keeps
 the focus when it moves between the popover and the sheet.
 
+### Time zones and typed time
+
+With `showTimePicker` the trigger reads `mm / dd / yyyy  09 : 30 AM` (the
+locale's order and clock; `hourCycle` forces one). The time is typed like the
+date: digits move on once a segment is full, a separator or an arrow moves
+between segments, ArrowUp and ArrowDown step the focused one (wrapping), "a"
+or "p" sets AM / PM, and a pasted "07/01/2026 9:30 PM" fills all of them. The
+segments are in one `group` named by the label; "Hours", "Minutes" and
+"AM / PM" are `spinbutton`s like the date's. On a phone, where the segments
+are 44px wide, the time wraps whole under the date when the two do not fit.
+
+A value needs the date and the time both complete: while one segment is empty
+the field emits `undefined` (a partial entry stays on screen), so a form's
+`required` rule refuses it, says so in the helper text and marks every segment
+`aria-invalid`, exactly as for a half-typed date. The calendar, the tiles and
+the segments edit the same value: a day picked in the calendar keeps the time
+of day, and a time typed shows in the tiles when the picker opens. (Before,
+with `showTimePicker`, a day picked in the calendar put the time back to
+midnight.) On the phone's sheet the pencil's large field takes the time too
+and is named `material.dates.type-date-time`.
+
+`timeZone` (an IANA name such as `Europe/Paris`) makes the field a form for the
+wall clock of that zone, whatever zone the browser runs in:
+
+| | |
+| --- | --- |
+| `value`, `onValueChange` | the true instant, a `Date`, as without `timeZone` |
+| Shown | the instant's wall clock in the zone: `2026-07-01T07:30:00Z` is `09:30` for `Europe/Paris` and `03:30` for `America/Toronto` |
+| Typed or picked | read as the zone's wall clock: `09:30` typed with `Europe/Paris` emits `07:30Z` in summer and `08:30Z` in winter |
+| `minDate`, `maxDate` | instants, compared as the days they fall on in the zone |
+| `disablePast`, `disableFuture`, today's mark | today in the zone, not the machine's |
+| `disabledDays` | `Date`s in a matcher are the days they fall on in the zone; a function sees the zone's days |
+| Unknown name | read as `UTC` (as `ZonedTime` does) |
+| No `timeZone` | the machine's zone, as before |
+
+Daylight-saving changes have one rule each, the one of Temporal's
+`compatible` mode:
+
+- **A time that does not exist** (the clocks go forward: 02:30 on 29 March
+  2026 in `Europe/Paris`) is read with the offset in force before the gap, so
+  it lands the length of the gap later: 03:30. The field shows 03:30 right
+  away.
+- **A time that happens twice** (the clocks go back: 02:30 on 25 October 2026
+  in `Europe/Paris`) is the first occurrence, `00:30Z`. If the value being
+  edited already is the second occurrence (`01:30Z`), editing its minutes
+  keeps the second one, so the time never jumps an hour back under the typing.
+
+The server renders the wall clock from `Intl` with the explicit zone, never
+from the machine, so the HTML hydrates identically whatever zone the server
+and the browser run in. Inside, the wall clock is a floating date (read
+through UTC), so a time the browser's own clocks skip (02:30 Paris on the
+day Toronto springs forward) is shown, typed and picked as it is. A
+`disabledDays` matcher that holds a `Date` (`Date`, `{ before }`,
+`{ after }`, `{ from, to }`, and lists of them) names the days those instants
+fall on in the zone; a function matcher is given the zone's days. With no
+value, a time picked first is dated today in the zone and must pass the
+bounds (`disablePast`...).
+
+```tsx
+<DateField
+	label="Starts"
+	timeZone="Europe/Paris"
+	showTimePicker
+	value={startsAt}
+	onValueChange={setStartsAt}
+	disablePast
+/>
+```
+
+`DateFormField` takes the same props. `DateRangeField` has no `timeZone` (react-day-picker's own `timeZone` prop is no longer accepted by `DateField` or `DateRangeField`: use `DateField`'s `timeZone`, or drop it from a range).
+
 ### Pickers' surfaces
 
 The popover has 28px corners, a soft lift and 12px of
@@ -277,7 +350,7 @@ Storybook: `Date & time/Pickers surfaces/Phone sheet`, `/Popover` and `/Cancel`.
 **Emits:** `Date | undefined`.
 **Form wrapper:** `DateFormField` — `control` and `name`, see
 [forms](../guides/forms.md#the-pair) and [what each field emits](../guides/forms.md#what-each-field-emits).
-**Storybook:** `Date & time/DateField`, `Date & time/DateField/Typed entry`, `Date & time/DateField/Phone sheet` · **Vue:** `DateField`, `DateFormField` (`disabled-days`, same rules; the 2.x trigger only, no typed entry)
+**Storybook:** `Date & time/DateField`, `Date & time/DateField/Typed entry`, `Date & time/DateField/Time zone`, `Date & time/DateField/Phone sheet` · **Vue:** `DateField`, `DateFormField` (`disabled-days`, same rules; the 2.x trigger only, no typed entry)
 
 ---
 
@@ -587,6 +660,7 @@ export function OpensAt() {
 | `value` | `Date` | — | only the hours and minutes are shown |
 | `onValueChange` | `(value?: Date) => void` | — | on every hour, minute or AM / PM change |
 | `size` | `'default' \| 'sm'` | `'default'` | `'sm'` is the compact 36px box (the field radius is unchanged) |
+| `timeZone` | IANA name (`'Europe/Paris'`) | the machine's zone | the segments and the picker show the value's wall clock in that zone and what is typed or picked is read in it; `value` and `onValueChange` stay the true instant. The time lands on the value's day in the zone (today in the zone with no value). The same rules as `DateField`'s ([Time zones and typed time](#time-zones-and-typed-time)): a time skipped by the clocks moves to the end of the gap, a repeated one is the first, unless the value holds the second. `TimeFormField` takes it too; with `asString` the `'HH:mm'` string is the wall clock itself and `timeZone` has no effect, and `TimeStringField` has none |
 | `variant`, `hourCycle`, `minuteStep` | | `'tiles'`, the language's, `5` | passed to the `TimePicker` ([below](#timepicker)); `hourCycle` sets the segments' clock too |
 | `entry` | `'typed'` | — | deprecated, no effect: the time is always typed in segments, with a button that opens the picker (`'button'`, the 2.x trigger, was removed in 3.0) |
 | `clearable` | `boolean` | `!required` | a ✕ (named "Clear") that empties the typed field; shown only while it holds a time and is not `disabled` |
@@ -647,7 +721,7 @@ unchanged.
 state.
 **Form wrapper:** `TimeFormField` — `control` and `name` (plus `asString`), see
 [forms](../guides/forms.md#the-pair) and [what each field emits](../guides/forms.md#what-each-field-emits).
-**Storybook:** `Date & time/TimeField`, `Date & time/TimeField/Typed entry`, `Date & time/TimeField/Phone sheet` · **Vue:** `TimeField`, `TimeFormField` (the 2.x trigger only, no typed entry)
+**Storybook:** `Date & time/TimeField`, `Date & time/TimeField/Typed entry`, `Date & time/TimeField/Time zone`, `Date & time/TimeField/Phone sheet` · **Vue:** `TimeField`, `TimeFormField` (the 2.x trigger only, no typed entry)
 
 ---
 

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/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/forms.md

@@ -508,9 +508,9 @@ or fails validation.
 
 | Field · wrapper | Form value | Empty default |
 | --- | --- | --- |
-| `DateField` · `DateFormField` | `Date \| undefined` (not an ISO string) | `undefined` |
+| `DateField` · `DateFormField` | `Date \| undefined` (not an ISO string). With `timeZone`, still the true instant (the field shows and edits that zone's wall clock); with `showTimePicker`, `undefined` until the date and the time are both complete | `undefined` |
 | `DateRangeField` · `DateRangeFormField` | `DateRange \| undefined`: `{ from: Date \| undefined; to?: Date }` | `undefined` |
-| `TimeField` · `TimeFormField` | `Date \| undefined`. With `asString`: `'HH:mm'`. While empty it shows its `placeholder` | `undefined` / `''` |
+| `TimeField` · `TimeFormField` | `Date \| undefined` (with `timeZone`, the true instant). With `asString`: `'HH:mm'`. While empty it shows its `placeholder` | `undefined` / `''` |
 | `DurationField` · `DurationFormField` | `number \| null`: total minutes (hours × 60 + minutes) | `null` |
 
 ### Selection & choice

package/docs/guides/i18n.md

@@ -371,7 +371,8 @@ date") and `material.dates.apply` on its Apply button ("Apply",
 "Appliquer"); the range itself is written by `Intl.DateTimeFormat`'s
 `formatRange` in the field's locale. On a phone's sheet, the switch to the
 large typed field is named `material.dates.type-date` ("Type the date",
-"Saisir la date") on `DateField` and `material.dates.type-range` ("Type the
+"Saisir la date") on `DateField` (`material.dates.type-date-time`, "Type the date and
+time", "Saisir la date et l’heure", with `showTimePicker`) and `material.dates.type-range` ("Type the
 dates", "Saisir les dates") on `DateRangeField`. Its hero says
 `material.dates.select-date` ("Select date", "Choisir la date") while the date
 is empty, `material.dates.select-dates` on `DateRangeField`, and the Cancel of
@@ -542,7 +543,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/docs/troubleshooting.md

@@ -6358,9 +6358,17 @@ names "Start time" and "End time". Every pick is committed as it is made, and
 OK only closes the picker. Cancel puts back the value the picker opened with
 (it fires `onValueChange` only if something changed); closing the picker in
 another way (Escape, a drag, a click outside) keeps what was picked.
-**Fix:** drive the tiles:
+A `DateField` with `showTimePicker` also types the time in the field itself
+(`spinbutton`s "Hours", "Minutes" and, on a 12-hour clock, "AM / PM", in the
+same group as the date's), so while the popover is open `getByRole('spinbutton',
+{ name: 'Hours' })` can match two: the field's and the tile's. A day clicked in
+the calendar keeps the time of day.
+**Fix:** drive the tiles, scoped to the popover (or type in the field's group):
 
 ```ts
+const popover = screen.getByRole('dialog');
+await user.click(within(popover).getByRole('button', { name: 'Increase hours' }));
+// or type: within(screen.getByRole('group', { name: 'Starts' })).getByRole('spinbutton', { name: 'Hours' })
 const start = screen.getByRole('group', { name: 'Start time' });
 await user.click(within(start).getByRole('button', { name: 'Increase hours' }));
 await user.click(screen.getByRole('button', { name: 'OK' }));

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";