@nxgt/material 3.36.0 → 3.38.0

package/CHANGELOG.md

@@ -1,5 +1,38 @@
 # @nxgt/material
 
+## 3.38.0
+
+### Minor Changes
+
+- [#1761](https://github.com/softistx/nxgt-material/pull/1761) [`da9cb18`](https://github.com/softistx/nxgt-material/commit/da9cb18f2d9a75ae0ced9b168ee73f9106d8acd5) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `AppBreadcrumb`'s `root` (and `ActivityLayout`'s `breadcrumbRoot`) take `icon: true` ([#1746](https://github.com/softistx/nxgt-material/issues/1746)): the trail starts with the house icon alone, linked to `to` and named `label` (a string), which is also its tooltip, shown on hover and on keyboard focus. It keeps the home icon's 44px touch target and focus ring. The text root is unchanged, and the default home icon, still linked to `/` and named by `material.app-shell.home`, now shows that name as a tooltip. `AppBreadcrumbRoot` is now the union of `AppBreadcrumbTextRoot` and `AppBreadcrumbIconRoot`.
+  
+  The home icon's 44px hit area is no longer clipped by the trail's scrolling list on a touch screen.
+
+- [#1768](https://github.com/softistx/nxgt-material/pull/1768) [`bc06c9a`](https://github.com/softistx/nxgt-material/commit/bc06c9a288b6cfd4f8186eeeb979f059ecdabd31) Thanks [@SteveGT96](https://github.com/SteveGT96)! - feat(chip-group-field): visible disabled reasons, a `columns` grid and option `groups` ([#1751](https://github.com/softistx/nxgt-material/issues/1751)). A disabled option's `disabledReason` is now printed as a small muted line under its chip, and the chip is tied to it by `aria-describedby` (it stays `aria-disabled` and reachable by arrows); `showDisabledReason={false}` brings back the tooltip-only look. `columns` (`4`, or `{ base, sm, md, lg }`) lays the chips out in equal-width cells with static classes, and Up and Down then move by row. `groups` (`{ label, options }[]`) draws titled sections, each a `role="group"` named by its heading, with one arrow-key sequence across them. `options` becomes optional (give `options` or `groups`). Single and multiple modes, `dir="rtl"`, 44px coarse targets and the server markup are unchanged.
+
+- [#1757](https://github.com/softistx/nxgt-material/pull/1757) [`3d1a12c`](https://github.com/softistx/nxgt-material/commit/3d1a12c7363472e37d4d05390a46d6fea1518d01) Thanks [@SteveGT96](https://github.com/SteveGT96)! - feat(activity-layout): a slot after the header title ([#1745](https://github.com/softistx/nxgt-material/issues/1745)) and a context line ([#1747](https://github.com/softistx/nxgt-material/issues/1747)). `handle.titleAfter` on a route (a node, or a function of the match, the deepest declaring route winning, like `handle.title`) and the `titleAfter` prop of `ActivityLayout` (which wins over the handle) render a node right after the page's title in the app bar, such as a record's `Switcher` in link mode. It sits outside the `h1`, a sibling in the same row and centred with it, so the heading's accessible name stays the plain title; on a phone it stays on screen and the title truncates first. `AppShellHandle` gains `titleAfter`. Nothing changes without a slot: the server-rendered markup is the same.
+  
+  `headerContext` ([#1747](https://github.com/softistx/nxgt-material/issues/1747)) renders a small muted line (the tenant's name) after the title and the slot, from `md` up: outside the `h1`, truncated at 14rem with its full text as the tooltip once cut off, hidden on a phone where the menu sheet's `context` carries it; the two props are independent, so nothing is shown twice. The title truncates first. Ignored while the bar has no page title.
+
+- [#1728](https://github.com/softistx/nxgt-material/pull/1728) [`7e9b687`](https://github.com/softistx/nxgt-material/commit/7e9b687718eb08f1e5984482854e58af96c8cd69) Thanks [@SteveGT96](https://github.com/SteveGT96)! - feat(server-table): a two-row header on a phone for a list in cards or tiles ([#1719](https://github.com/softistx/nxgt-material/issues/1719)). Below 768px, with `filter`, `actions` and a `cards` or `tiles` list (`layout`, or the phone side of `{ phone, wide }`), the header takes two rows instead of three: the search, then "Select all" at the start (a short visible label, its accessible name still "Select all on this page") and, at the end, the sort menu, "Filters (N)" and the page's `actions`. While rows are selected, that row becomes the selection bar: "N rows selected" and "Clear selection" take the label's place and the `bulkActions` take the place of the sort, "Filters (N)" and the actions (icon buttons on a phone, named "Label n rows" with a tooltip and a count badge, hidden at 0 rows; [#1737](https://github.com/softistx/nxgt-material/issues/1737)), so the header stays at two rows; the footer's polite status still tells the selection. The cards' separate list bar row and the `actions` row above the search are gone in this layout (`bandActions` has no effect there). A button of `actions` with an icon is drawn as the icon alone, its text kept as its accessible name and a tooltip (`title`); the row compacts to the band's width (the sort keeps its icon and arrow, "Filters (N)" its icon and count while rows are selected or on a narrow band) and every control stays a 44px target on a coarse pointer. Visible change on phones: lists that matched this setup now have two header rows and an icon-only primary action; from 768px, the table layout, lists without `filter` or `actions`, and a standalone `DataTable` are unchanged.
+
+### Patch Changes
+
+- [#1772](https://github.com/softistx/nxgt-material/pull/1772) [`fb1bbd3`](https://github.com/softistx/nxgt-material/commit/fb1bbd3d3374217743a87207fd2656e8e23653b7) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `EventCalendar` passes axe WCAG 2.2 AA in its own markup ([#1762](https://github.com/softistx/nxgt-material/issues/1762)):
+  
+  - A day's time column is a named group (its date) instead of a `div` with an `aria-label` and no role, and an event's drag wrapper is a group instead of dnd-kit's `button` around the chip's own button (nested interactive). The all-day lane's cells lose their label. The bare resize strip is hidden from assistive technology: it only answered the pointer.
+  - The weekend day heads keep the muted colour at 4.5:1 and are told apart by a lighter weight and a tint. The event chip's time ink is mixed 55% with the foreground (was 72%) so it holds 4.5:1 on its tint in dark mode.
+  - The day heads are named by what they show, then the date to open (`Mon 26, Open Monday, October 26th, 2026`, a letter on a phone), and the date trigger is named by the period it shows, with `Choose date` as its description. `material.event-calendar.add` is no longer used by the time grid.
+  - An event is drawn at least 24px tall (WCAG 2.5.8), and two short events that would then touch share the width instead of overlapping.
+
+- [#1765](https://github.com/softistx/nxgt-material/pull/1765) [`6996442`](https://github.com/softistx/nxgt-material/commit/69964428f2fa26801fb417b941ed22d6fd3fa6e2) Thanks [@SteveGT96](https://github.com/SteveGT96)! - fix(server-table): the phone form of the `bulkActions` list shows labels (corrects [#1737](https://github.com/softistx/nxgt-material/issues/1737)). Below 768px, in the selection bar, each action keeps its icon, a short label and its count ("Publish (2)", named "Publish 2 rows") instead of an icon with a badge; the buttons wrap onto a second line when they do not fit, and past the third action the rest go into a "More" menu (`material.server-table.bulk-more`, "Plus" in French) whose items keep their counts. An action at 0 rows stays hidden, menu included. From 768px nothing changes. `IconButton`'s `badge` stays.
+
+## 3.37.0
+
+### Minor Changes
+
+- [#1754](https://github.com/softistx/nxgt-material/pull/1754) [`e6662f1`](https://github.com/softistx/nxgt-material/commit/e6662f19cf969b189b3440a9025262ad0926c548) Thanks [@SteveGT96](https://github.com/SteveGT96)! - feat(buttons): the Cancel / Close secondary button the library draws in its footers is `tonal` by default, under a filled Confirm; a text or outlined Cancel read poorly as a button and its hit area was invisible. It covers `AlertDialogCancel` (so `ConfirmDialog` and the delete confirmation of `useDeleteRowsHandler`), `ConfirmationDialog`, the dialogs of `Contacts`, `PostalAddress`, `OpeningHours` and `Attributes`, `ImageCropper`, the `RichTextEditor` Save / Cancel row, the phone filter sheet's "Clear all", the staged facets panel's "Reset", the `FilterPresets` save dialog, the data grid's save bar "Discard" and paste "Dismiss", and the comment composer and editor of `DocumentEditor`. Icon-only close buttons, toolbar buttons and text links are unchanged. **To restore the earlier look**, pass `cancelVariant` (a `Button` `variant`: `'outlined'` or `'ghost'`) on `ConfirmDialog`, `ConfirmationDialog`, `ContactDialog`, `PostalAddressDialog`, `OpeningHoursDialog`, `AttributeDialog` and their `*FormField` / `*DialogField` wrappers, `ImageCropper`, `Filter` (`variant="bar"` and `"facets"`) and `FilterPresets`; `options.cancelVariant` on `RichTextEditor`; `useDeleteRowsHandler(onDelete, { cancelVariant })`; `variant` on `AlertDialogCancel`. The data grid's save bar and paste panel and the comment forms of `DocumentEditor` are tonal with no option (no caller-facing surface); the comment editor's Save is now filled to keep the hierarchy. `ConfirmationDialog`'s Cancel was already tonal: only its `cancelVariant` is new. New exports: the `ButtonVariant` type and `DEFAULT_CANCEL_VARIANT`. The docs' and recipes' examples now write `variant="tonal"` on their Cancel.
+
 ## 3.36.0
 
 ### Minor Changes

package/README.md

@@ -422,7 +422,7 @@ Each area a consumer starts from has its own page under `docs/guides/`.
 | --- | --- |
 | [Forms](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/forms.md) | wiring fields to React Hook Form and Zod, composite values (contacts, opening hours), config-driven `Field`, server errors, what each field emits |
 | [i18n](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/i18n.md) | adding your strings next to the package's, switching language, translated Zod messages, SSR without a text mismatch |
-| [App shell](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/app-shell.md) | laying out an app with `ActivityLayout` (route changes cross-fade by default, `routeTransition={false}` opts out; it draws the theme's background, `backdrop` is the exception and `backdrop={false}` a plain page), its `items` (rendered as links; `linkComponent` to pass your own), the brand (`logo`, `name`, and `context` for the phone sheet's tenant line), the header's title, a route's `handle.title` as the page's `h1` in the app bar (`AppShellHandle`, `PageTitle`; it labels `<main>`, and `usePageTitleFocus()` focuses it after a navigation), and `AccountMenu`, the active entry and breadcrumbs (needs a data router; `breadcrumbRoot` replaces the home icon with a text link, `breadcrumb={false}` hides the trail), the `<main>` landmark, the `h1` title, document scrolling, a background preset behind the shell (`backdrop`), and the tinted page ground the cards stand on (`--ground`, the opt-out) |
+| [App shell](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/app-shell.md) | laying out an app with `ActivityLayout` (route changes cross-fade by default, `routeTransition={false}` opts out; it draws the theme's background, `backdrop` is the exception and `backdrop={false}` a plain page), its `items` (rendered as links; `linkComponent` to pass your own), the brand (`logo`, `name`, and `context` for the phone sheet's tenant line), the header's title, a route's `handle.title` as the page's `h1` in the app bar (`AppShellHandle`, `PageTitle`; `handle.titleAfter` / `titleAfter` a slot right after it, such as a record's `Switcher`, and `headerContext` a small tenant line from md up; it labels `<main>`, and `usePageTitleFocus()` focuses it after a navigation), and `AccountMenu`, the active entry and breadcrumbs (needs a data router; `breadcrumbRoot` replaces the home icon with a text link, or with `icon: true` keeps it with its own target and name, `breadcrumb={false}` hides the trail), the `<main>` landmark, the `h1` title, document scrolling, a background preset behind the shell (`backdrop`), and the tinted page ground the cards stand on (`--ground`, the opt-out) |
 | [Themes for your app](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/themes.md) | defining app themes, generating their stylesheets and types with the Vite plugin's `themes` option or the `nxgt-theme` command, the CI check |
 | [Theming](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/theming.md) | changing colours, radius or fonts, motion and corner tokens, the page ground (`--ground`, `bg-ground`: its light and dark values and the opt-out), dark mode, tones (the `data-tone` channel, app tones and the calm zone `data-density="calm"`), touch targets, using the compiled CSS without Tailwind |
 | [Printing](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/printing.md) | producing PDFs with `@nxgt/material/print` and getting the file in one call (download, new tab, preview, server `Response`) — its own entry since 2.0.0, with optional peers, a bundling trap on SSR servers, and the `next.config.ts` a Next.js route handler (and `output: 'standalone'`) needs |

package/dist/{async-slice-BNI_F0jz.js → async-slice-DqjtOYlO.js}

@@ -1,5 +1,5 @@
-import { i as e, r as t, t as n } from "./stored-language-CfQGHLq9.js";
-import { r } from "./translator-BbOZntEF.js";
+import { i as e, r as t, t as n } from "./stored-language-D8aemZhx.js";
+import { r } from "./translator-Bq8UHmvu.js";
 import { t as i } from "./_baseIsEqual-C6ksIHya.js";
 import { useMemo as a } from "react";
 import { asyncThunkCreator as o, buildCreateSlice as s } from "@reduxjs/toolkit";

package/dist/{button-EMWOFSDB.js → button-D52ron-a.js}

@@ -2,7 +2,7 @@ import { t as e } from "./utils-BLfntITJ.js";
 import { n as t, t as n } from "./dist-DVRQkaTK.js";
 import { o as r, t as i } from "./tooltip-CkttDIab.js";
 import { t as a } from "./is-production-GLw59WU8.js";
-import { t as o } from "./spinner-CKlDba5I.js";
+import { t as o } from "./spinner-CuxEwO0d.js";
 import { a as s, i as c, r as l, t as u } from "./button-tones-BwuVvAmd.js";
 import { t as d } from "./button-group-context-CaP0X5p_.js";
 import { t as f } from "./has-text-content-Ds2dkHX_.js";
@@ -323,5 +323,6 @@ function F({ tooltip: e, ...t }) {
 		children: /* @__PURE__ */ S(P, { ...t })
 	}) : /* @__PURE__ */ S(P, { ...t });
 }
+var I = "tonal";
 //#endregion
-export { w as a, D as i, N as n, A as r, F as t };
+export { D as a, A as i, I as n, w as o, N as r, F as t };

package/dist/charts.js

@@ -1,12 +1,12 @@
 import { t as e } from "./ui.utils-CAnKTCw5.js";
 import { t } from "./utils-BLfntITJ.js";
-import { t as n } from "./use-material-translation-BK2YYCY3.js";
-import { t as r } from "./button-EMWOFSDB.js";
+import { t as n } from "./use-material-translation-CiYhVc39.js";
+import { t as r } from "./button-D52ron-a.js";
 import { t as i } from "./use-ssr-media-query-C6M5m8sf.js";
 import { i as a, n as o, r as s, t as c } from "./util-4heV2LPI.js";
 import { t as l } from "./useIsomorphicLayoutEffect-DfgAhWcH.js";
 import { t as u } from "./warn-once-C_e47JM8.js";
-import { t as d } from "./chip-B6m3yagf.js";
+import { t as d } from "./chip-0XYwSp9o.js";
 import { c as f, d as p, f as m, i as h, o as g, p as _, s as v, t as y } from "./line-path-C5pZGC49.js";
 import { t as b } from "./live-status-BGPaN8r8.js";
 import { t as x } from "./linear-G97mfnKF.js";

package/dist/{chip-B6m3yagf.js → chip-0XYwSp9o.js}

@@ -1,6 +1,6 @@
 import { t as e } from "./utils-BLfntITJ.js";
 import { t } from "./tooltip-CkttDIab.js";
-import { t as n } from "./use-material-translation-BK2YYCY3.js";
+import { t as n } from "./use-material-translation-CiYhVc39.js";
 import { a as r } from "./button-tones-BwuVvAmd.js";
 import { t as i } from "./react-node-text-Crkpfpco.js";
 import { Check as a, X as o } from "lucide-react";

package/dist/{code-editor-BdiufnpC.js → code-editor-BetIXpJ6.js}

@@ -1,12 +1,12 @@
 import { r as e } from "./rolldown-runtime-BFFgcFxR.js";
 import { t } from "./utils-BLfntITJ.js";
 import { a as n } from "./dist-lmHmz_bu.js";
-import { c as r, d as i, f as a, n as o, t as s } from "./dropdown-menu-CpSnRXd-.js";
+import { c as r, d as i, f as a, n as o, t as s } from "./dropdown-menu-Crt5QvTr.js";
 import { a as c, i as l, n as u } from "./field-blur-context-Cft9s7Hg.js";
-import { a as d, d as f, r as p, t as m, u as h } from "./toolbar-items-B1W-uVHS.js";
+import { a as d, d as f, r as p, t as m, u as h } from "./toolbar-items-C97E5HRa.js";
 import { t as g } from "./is-production-GLw59WU8.js";
-import { t as _ } from "./use-material-translation-BK2YYCY3.js";
-import { i as v, n as y, o as b, t as x } from "./code-language-items-v5Rnq425.js";
+import { t as _ } from "./use-material-translation-CiYhVc39.js";
+import { i as v, n as y, o as b, t as x } from "./code-language-items-C7prxl_7.js";
 import { t as S } from "./useIsomorphicLayoutEffect-DfgAhWcH.js";
 import { n as C, t as w } from "./escape-owner-C4W_sOAU.js";
 import { t as T } from "./skeleton-DSdtr2qc.js";

package/dist/code-editor.js

@@ -1,14 +1,14 @@
 import { t as e } from "./utils-BLfntITJ.js";
 import { a as t } from "./dist-lmHmz_bu.js";
-import { d as n, r, t as i, u as a } from "./toolbar-items-B1W-uVHS.js";
-import { t as o } from "./use-material-translation-BK2YYCY3.js";
-import { i as s, n as c, o as l } from "./code-language-items-v5Rnq425.js";
+import { d as n, r, t as i, u as a } from "./toolbar-items-C97E5HRa.js";
+import { t as o } from "./use-material-translation-CiYhVc39.js";
+import { i as s, n as c, o as l } from "./code-language-items-C7prxl_7.js";
 import { r as u, t as d } from "./field-blur-CJHzVSh9.js";
 import { t as f } from "./skeleton-DSdtr2qc.js";
 import { t as p } from "./live-status-BGPaN8r8.js";
 import { t as m } from "./use-mobile-BDro060N.js";
 import { t as h } from "./react-node-text-Crkpfpco.js";
-import { a as g, c as _, d as v, f as y, i as b, l as x, m as S, o as C, p as w, r as T, s as E, t as D, u as O } from "./code-editor-BdiufnpC.js";
+import { a as g, c as _, d as v, f as y, i as b, l as x, m as S, o as C, p as w, r as T, s as E, t as D, u as O } from "./code-editor-BetIXpJ6.js";
 import { ChevronDown as k, ChevronUp as A, Columns2 as j } from "lucide-react";
 import { useEffect as M, useRef as N, useState as P } from "react";
 import { Fragment as F, jsx as I, jsxs as L } from "react/jsx-runtime";

package/dist/{code-language-items-v5Rnq425.js → code-language-items-C7prxl_7.js}

@@ -1,5 +1,5 @@
-import { d as e, f as t } from "./dropdown-menu-CpSnRXd-.js";
-import { t as n } from "./use-material-translation-BK2YYCY3.js";
+import { d as e, f as t } from "./dropdown-menu-Crt5QvTr.js";
+import { t as n } from "./use-material-translation-CiYhVc39.js";
 import { t as r } from "./live-status-BGPaN8r8.js";
 import { useEffect as i, useRef as a, useState as o } from "react";
 import { jsx as s } from "react/jsx-runtime";

package/dist/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/dist/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;
+	}
+}