@nxgt/material 3.37.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/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/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/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";

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

@@ -0,0 +1,189 @@
+/* ServerTable's second header row below 768px (#1719): the list's "Select all"
+ * (or the count and "Clear selection") at the start; the sort, "Filters (N)"
+ * and the page's actions at the end. Logical properties throughout. The list
+ * bar's own rules (data-table-items-bar.css) answer to the list's width; here
+ * the row is the band's, so they are restated for its slots.
+ *
+ * Unlayered on purpose: the buttons' sizes are Tailwind utilities (`min-w-0`,
+ * `px-*`), a layer that comes after `components`. */
+/* The row is the container the compactions below answer to: the band's
+ * width, not the window's (a page may pad it). */
+[data-slot="server-table-phone-row"] {
+	container: server-table-phone-row / inline-size;
+}
+[data-slot="server-table-phone-row-start"]
+	> [data-slot="data-table-list-bar-start"] {
+	flex-wrap: nowrap;
+	gap: 0.25rem 0.5rem;
+}
+[data-slot="data-table-list-bar-start"][data-in-row] {
+	/* A fixed row: the 44px box's height on a coarse pointer, the 36px
+	 * buttons' otherwise, so the count and the label swap with no move. */
+	min-height: 2.25rem;
+}
+[data-slot="data-table-list-bar-start"][data-in-row]
+	[data-slot="data-table-list-bar-count"] {
+	min-width: 0;
+	overflow-wrap: anywhere;
+	line-height: 1.15;
+}
+[data-slot="data-table-list-bar-start"][data-in-row][data-selected]
+	[data-slot="data-table-list-bar-count"] {
+	color: var(--primary-text);
+}
+[data-slot="server-table-phone-row"] [data-slot="data-table-list-bar-clear"] {
+	aspect-ratio: 1;
+	min-width: 2.25rem;
+	padding-inline: 0;
+}
+[data-slot="server-table-phone-row"] [data-slot="data-table-sort"] {
+	max-width: 9rem;
+}
+/* Room on a phone: the sort keeps its icon and its arrow (its name, "Sort:
+ * Name, Ascending", is still its accessible name); while rows are selected,
+ * and on a narrow band, "Filters (N)" keeps its icon and its count, and the
+ * name too. The count and "Clear selection" need the room. */
+@container server-table-phone-row (max-width: 30rem) {
+	[data-slot="data-table-sort-label"] {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		overflow: hidden;
+		clip-path: inset(50%);
+		white-space: nowrap;
+	}
+	[data-slot="server-table-phone-row"]:has(
+			[data-slot="data-table-list-bar-start"][data-selected]
+		)
+		[data-slot="filter-sheet-trigger"]
+		> [data-slot="button-label"] {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		overflow: hidden;
+		clip-path: inset(50%);
+		white-space: nowrap;
+	}
+}
+@container server-table-phone-row (max-width: 19rem) {
+	[data-slot="filter-sheet-trigger"] > [data-slot="button-label"] {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		overflow: hidden;
+		clip-path: inset(50%);
+		white-space: nowrap;
+	}
+}
+/* Icon-only: a button of the actions with an icon loses its label to its
+ * name and tooltip (a button without an icon keeps its text). */
+[data-slot="server-table-phone-row"]
+	[data-slot="server-table-actions"]
+	[data-slot="button"]:has(> svg:only-of-type) {
+	aspect-ratio: 1;
+	min-width: 2.25rem;
+	padding-inline: 0;
+}
+@media (pointer: coarse) {
+	[data-slot="server-table-phone-row"] [data-slot="data-table-list-bar-clear"],
+	[data-slot="server-table-phone-row"]
+		[data-slot="server-table-actions"]
+		[data-slot="button"]:has(> svg:only-of-type) {
+		min-width: 2.75rem;
+		min-height: 2.75rem;
+	}
+	/* The 44px box sits at the row's edge: the label's 14px of room
+	 * is taken back, so the box lines up with the search above. */
+	[data-slot="server-table-phone-row-start"]
+	[data-slot="select-checkbox-label"] {
+		margin-inline-start: -0.875rem;
+	}
+}
+[data-slot="server-table-phone-row"]
+	[data-slot="data-table-list-bar-clear-label"],
+[data-slot="server-table-phone-row"] [data-slot="data-table-sort-prefix"],
+[data-slot="server-table-phone-row"]
+	[data-slot="server-table-actions"]
+	[data-slot="button"]:has(> svg:only-of-type)
+	> [data-slot="button-label"] {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	overflow: hidden;
+	clip-path: inset(50%);
+	white-space: nowrap;
+}
+
+/* While rows are selected the row is the selection bar: the bulk actions take
+ * the place of the sort, "Filters (N)" and the page's actions, which are
+ * hidden (not unmounted) and come back once the selection is empty. */
+[data-slot="server-table-phone-row"][data-selecting]
+[data-slot="server-table-phone-sort"],
+[data-slot="server-table-phone-row"][data-selecting]
+	[data-slot="filter-sheet-trigger"],
+[data-slot="server-table-phone-row"][data-selecting]
+	[data-slot="server-table-actions"] {
+	display: none;
+}
+/* The bulk buttons keep icon, label and count; they wrap onto a second line
+ * rather than scroll, and a long label is cut to the row's width. */
+[data-slot="server-table-phone-bulk"] {
+	flex: 1 1 auto;
+	justify-content: flex-end;
+}
+[data-slot="server-table-phone-bulk"] [data-slot="button"] {
+	max-width: 100%;
+}
+/* The menu trigger's own item radius would square the More
+ * button: it keeps its siblings' pill, and so does its focus ring. */
+[data-slot="server-table-phone-bulk"] [data-slot="dropdown-menu-trigger"] {
+	border-radius: var(--btn-rad, var(--btn-round));
+}
+/* An icon with its tone at full strength: the duotone's second layer is
+ * drawn at 40% by default, which on its own, in a button with no text, reads
+ * as disabled. */
+[data-slot="server-table-phone-row"]
+	[data-slot="server-table-actions"]
+	[data-slot="button"]:has(> svg:only-of-type) {
+	--fa-secondary-opacity: 1;
+}
+/* The selection bar wraps: the count and Clear keep their own width on the
+ * first line, the bulk buttons take the rest of it, or a line of their own
+ * (right-aligned) when they do not fit beside it; they wrap again inside it. */
+[data-slot="server-table-phone-row"][data-selecting] {
+	flex-wrap: wrap;
+	row-gap: 0.25rem;
+}
+[data-slot="server-table-phone-row"][data-selecting]
+	[data-slot="server-table-phone-row-start"] {
+	flex: 0 0 auto;
+}
+[data-slot="server-table-phone-row"][data-selecting]
+	[data-slot="data-table-list-bar-count"] {
+	white-space: nowrap;
+}
+[data-slot="server-table-phone-row"][data-selecting]
+	[data-slot="server-table-phone-row-end"] {
+	flex: 1 1 auto;
+	min-width: 0;
+}
+/* The row is at least as high as the actions (40px, 44px on a coarse
+ * pointer), so selecting moves nothing; it grows when the bulk buttons wrap. */
+[data-slot="server-table-phone-row"] {
+	min-height: 2.5rem;
+}
+@media (pointer: coarse) {
+	[data-slot="server-table-phone-row"] {
+		min-height: 2.75rem;
+	}
+}
+@media (pointer: coarse) {
+	/* The 32px bulk buttons reach 44px with an invisible 6px margin: a gap of
+	 * 12px keeps neighbours from taking each other's edge. */
+	[data-slot="server-table-phone-row"][data-selecting] {
+		gap: 0.75rem;
+	}
+	[data-slot="server-table-phone-bulk"] {
+		gap: 0.75rem;
+	}
+}

package/package.json

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