@nxgt/material 3.72.0 → 3.74.0

package/dist/{use-heading-spy-Bzj5mIUZ.js → use-heading-spy-B_Z4ArDh.js}

@@ -1,8 +1,8 @@
 import { t as e } from "./utils-BLfntITJ.js";
-import { a as t, c as n, d as r, i, n as a, r as o, t as s, u as c } from "./alert-dialog-A8K8zai1.js";
-import { a as l } from "./button-C8moFnIT.js";
-import { i as u } from "./translate-material-D1ndrd7a.js";
-import { t as d } from "./use-material-translation-C6H0B4kE.js";
+import { a as t, c as n, d as r, i, n as a, r as o, t as s, u as c } from "./alert-dialog-BfO_ri-N.js";
+import { a as l } from "./button-DgenqmpS.js";
+import { i as u } from "./translate-material-pVlPJ1v4.js";
+import { t as d } from "./use-material-translation-CIS2n3RB.js";
 import { _ as f, g as p, h as m, n as h, v as g, y as _ } from "./number.utils-BG_eEt5g.js";
 import { useCallback as v, useEffect as y, useMemo as b, useRef as x, useState as S } from "react";
 import { Fragment as C, jsx as w, jsxs as T } from "react/jsx-runtime";

package/dist/{use-material-translation-C6H0B4kE.js → use-material-translation-CIS2n3RB.js}

@@ -1,4 +1,4 @@
-import { i as e, t } from "./translate-material-D1ndrd7a.js";
+import { i as e, t } from "./translate-material-pVlPJ1v4.js";
 import { useCallback as n } from "react";
 //#region lib/i18n/use-material-translation.ts
 function r() {

package/dist/{use-return-focus-CkUX1HFl.js → use-return-focus-DNQtADAR.js}

@@ -1,6 +1,6 @@
 import { o as e, r as t } from "./dist-DVRQkaTK.js";
 import { a as n, c as r, i, l as a, o, r as s, s as c } from "./dist-lmHmz_bu.js";
-import { C as l, S as u, w as d } from "./spinner-C5Kb6MWu.js";
+import { C as l, S as u, w as d } from "./spinner-B2MubVWb.js";
 import { c as f, i as p, l as m, o as h, r as g, s as ee } from "./in-dialog-Vwkyp-M5.js";
 import { r as _ } from "./escape-owner-DpaP0lm1.js";
 import * as v from "react";

package/docs/components/data-display.md

@@ -13,6 +13,7 @@ from `@nxgt/material/components`.
 | <img src="../previews/data-display-shape.webp" width="96" alt=""> | [Shape](#shape) | Material 3 Expressive's shapes as a backdrop, an icon container or a mask for a photo |
 | <img src="../previews/data-display-badge.webp" width="96" alt=""> | [Badge](#badge) | Status pill, 20 px, in seven tones, soft or outlined, with an optional decorative `icon` before the words |
 | <img src="../previews/data-display-countbadge.webp" width="96" alt=""> | [CountBadge](#countbadge) | Count in the corner of its children |
+| <img src="../previews/data-display-highlightedtext.webp" width="96" alt=""> | [HighlightedText](#highlightedtext) | A string with the words of a search query in a themed `<mark>` |
 | <img src="../previews/data-display-dayseparator.webp" width="96" alt=""> | [DaySeparator](#dayseparator) | "Today", "Yesterday" or the date between two hairlines |
 | <img src="../previews/data-display-periodcards.webp" width="96" alt=""> | [PeriodCards](#periodcards) | Consecutive date ranges (terms, sprints) as cards, with a current marker and an optional link per card |
 | <img src="../previews/data-display-chip.webp" width="96" alt=""> | [Chip](#chip) | Three looks and a dashed add pill, with slots, a selected state and a dismiss button |
@@ -147,6 +148,7 @@ import { SeatRing } from '@nxgt/material/components';
   seats={[
     { id: 'ada', label: 'Ada Example', status: { label: 'Ready', tone: 'success' }, badge: 'Host' },
     { id: 'bo', label: 'Bo Sample', status: { label: 'Away', tone: 'warning' } },
+    { id: 'cy', label: 'Cy Demo', out: true },
     { id: 'free', label: 'Free', empty: true },
   ]}
   highlightedId="ada"
@@ -159,7 +161,7 @@ import { SeatRing } from '@nxgt/material/components';
 
 | Prop | Type | Default | Notes |
 | --- | --- | --- | --- |
-| `seats` | `Seat[]` | required | `{ id, label, avatar?: { src?, fallback? }, status?: { label, tone? }, badge?, disabled?, empty? }`; clockwise from the top |
+| `seats` | `Seat[]` | required | `{ id, label, avatar?: { src?, fallback? }, status?: { label, tone? }, badge?, disabled?, out?, empty? }`; clockwise from the top |
 | `layout` | `'ring' \| 'grid'` | `'ring'` | `ring` falls back to the grid in a narrow box and past the seat limit (10 seats) |
 | `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | seat width 4.75, 6 or 8rem; ring from a box of 32, 38 or 46rem; at most 10 seats on the circle |
 | `selectionMode` | `'none' \| 'single' \| 'multiple'` | `'none'` | `none`: a list; otherwise a listbox |
@@ -183,6 +185,7 @@ no `style` attribute and a strict CSP is fine.
   keys, Home and End move the focus (an empty seat is skipped); Space or Enter
   picks, and pressing the chosen seat again clears it.
 - A seat is named by its label and its status text, never by colour alone.
+- `out: true` marks an eliminated seat: it stays visible, dimmed, with the name struck through, the avatar greyed and the word "Out" (`material.seat-ring.out`, "Éliminé" in French) written in it, so the word is part of the seat's name (label, status, "Out", then the badge); it stays pickable unless `disabled`. An empty seat ignores it. Seat status words ("Eliminated") remain the app's own.
 - In a listbox, empty and `disabled` seats are `aria-disabled`, and a disabled
   seat can be reached but not picked (in a list, `disabled` only dims the seat).
 - Put no button in a selectable seat: interactive content (an "Invite" action
@@ -417,6 +420,35 @@ import { CountBadge, IconButton } from '@nxgt/material/components';
 
 ---
 
+## HighlightedText
+
+![HighlightedText](../previews/data-display-highlightedtext.webp)
+
+A string with the words of a search query in a themed `<mark>`. Case, accents and ligatures are folded (`œ` is `oe`, `æ` is `ae`, `ß` is `ss`), and a query word matches at the start of a word, as a search engine's normaliser does.
+
+```tsx
+import { HighlightedText, highlightRanges } from '@nxgt/material/components';
+
+<HighlightedText text="Œuvres d'été" query="oeuvre ete" />
+// <mark>Œuvre</mark>s d'<mark>été</mark>
+
+// For a table or a custom renderer: offsets into the original text.
+highlightRanges("Œuvres d'été", 'oeuvre ete'); // [[0, 5], [9, 12]]
+```
+
+| Prop | Type | Default | Effect |
+| --- | --- | --- | --- |
+| `text` | `string` | — | the string to show |
+| `query` | `string` | — | search words; a blank query marks nothing |
+| `locale` | `string` | runtime's | language for lowercasing |
+| span props | | | `className` and the other `span` props go to the wrapping `span` |
+
+`highlightRanges(text, query, locale?)` is pure and returns sorted, non-overlapping `[start, end)` offsets. The marks use theme tokens (readable in dark mode) and the system `Mark` colours in forced colours.
+
+**Storybook:** `Data display/HighlightedText`
+
+---
+
 ## DaySeparator
 
 ![DaySeparator](../previews/data-display-dayseparator.webp)
@@ -974,15 +1006,16 @@ A tile with an `href` ends with a discreet chevron after `trailing`: decorative
 | `linkComponent` | `AppShellLinkComponent` | plain `<a>` | the link element, as in the app shell: takes `href`, spreads every other prop, forwards `ref`. Defaults to the [`LinkComponentProvider`](./primitives.md#linkcomponentprovider)'s link when one is set. |
 | `onClick` | `MouseEventHandler` | — | renders a `<button>` |
 | `selected` | `boolean` | `false` | the current row: drawn selected; a link gets `aria-current="page"` (your own `aria-current` replaces it), a button `aria-pressed` |
-| `toggle` | `Switch` props | — | makes the tile a switch row (see below): the whole row toggles a Switch at its end; `href`, `onClick`, `actions`, `chips`, `chevron` and `linkComponent` are refused beside it by type |
+| `toggle` | `Switch` props | — | makes the tile a switch row (see below): the whole row toggles a Switch at its end; `href`, `onClick`, `actions`, `chips`, `content`, `chevron` and `linkComponent` are refused beside it by type |
 | `size` | `'sm' \| 'md'` | `'md'` | `sm` is the dense row (with `chips`, the record row, see below) |
 | `leading`, `trailing`, `subtitle` | `ReactNode` | — | slots; `trailing` sits inside the link, so it holds decoration only |
 | `actions` | `ReactNode` | — | buttons at the end of the tile, outside the link, vertically centred (`data-slot="item-actions"`) |
 | `chips` | `ReactNode` | — | tags after the text, in the compact record row (see below); inside the link, so decoration only; part of the row's accessible name, keep labels short |
+| `content` | `ReactNode` | — | full-width content under the title row, inside the tile's box and outside its link or button: it may hold inputs and buttons (an expected value beside an editable field), and its clicks do not reach `onClick`. Not available on a `toggle` row |
 | `variant` | `'tonal' \| 'divided'` | `'tonal'` | `divided`: flat rows with no tonal surface, a hover tint and the record-row layout; the hairline comes with `as="li"` |
 | `inset` | `boolean` | `false` | With `variant="divided"`: 16px of inline padding (M3's list-item inset) in place of 4px, for a list inside a `Card`; the hairlines on the `<li>` still run edge to edge. Ignored by `tonal` |
 | `as` | `'li'` | — | renders the tile inside a `<li>`, for a `<ul>` you own |
-| `disabled` | `boolean` | — | disables the link or button, and the `actions` with it |
+| `disabled` | `boolean` | — | disables the link or button, and the `actions` and `content` with it (both become inert) |
 
 With a router, pass `linkComponent` so a click navigates on the client instead of reloading the page (React Router's `Link` takes `to`, so wrap it):
 
@@ -999,7 +1032,27 @@ export function SettingsLink() {
 }
 ```
 
-A link tile's `trailing` sits inside its `<a>`, which cannot hold buttons. Put edit / remove / menu buttons in `actions`: they render outside the link, in the tile's box, while the link still covers the whole tile (a click on the text navigates, a click on a button does not) and hover and selected styles stay on the tile. Tab goes to the link, then to the buttons. A tile without `href` renders `actions` the same way. With `actions`, `className`, `style` and `data-*` go on the tile's box and every other prop (`aria-label`, `id`, handlers…) on the link or button; `actions={null}` (or `false`) is no actions. and the text of a link tile with actions cannot be selected (the link is stretched over the tile).
+A link tile's `trailing` sits inside its `<a>`, which cannot hold buttons. Put edit / remove / menu buttons in `actions`: they render outside the link, in the tile's box, while the link still covers the whole tile (a click on the text navigates, a click on a button does not) and hover and selected styles stay on the tile. Tab goes to the link, then to the buttons, then to the controls of `content`. A tile without `href` renders `actions` the same way. With `actions`, `className`, `style` and `data-*` go on the tile's box and every other prop (`aria-label`, `id`, handlers…) on the link or button; `actions={null}` (or `false`) is no actions. and the text of a link tile with actions cannot be selected (the link is stretched over the tile).
+
+**Content under the row.** `content` renders full-width under the title row, inside the tile's box and outside its link or button, so it may hold inputs and buttons (an expected value beside an editable field). Its clicks never reach the tile's `onClick`.
+
+```tsx
+<ul className="m-0 list-none p-0">
+  <ListTile
+    as="li"
+    variant="divided"
+    title="Item"
+    subtitle="SKU-1 · LOT-2"
+    actions={<IconButton label="Remove" onClick={remove}><Trash2 /></IconButton>}
+    content={
+      <label className="flex items-center justify-between gap-2">
+        Expected 12
+        <NumberField aria-label="Counted" value={counted} onChange={setCounted} />
+      </label>
+    }
+  />
+</ul>
+```
 
 ```tsx
 import { Pencil } from 'lucide-react';
@@ -1070,7 +1123,7 @@ function GuideList({ guides }: { guides: { to: string; title: string }[] }) {
 }
 ```
 
-**A switch row.** `toggle` takes a Switch's props (`checked`, `defaultChecked`, `onCheckedChange`, `name`, `thumbIcons`…). The tile is then a `<label>` for the switch, so a press anywhere on the row toggles it; the switch is the one tab stop (Space or Enter), named by `title` and described by `subtitle`, and `disabled` on the tile disables it. A switch row is neither a link nor a button: `href`, `onClick`, `actions` and `chevron` do not apply, and `trailing` sits before the switch.
+**A switch row.** `toggle` takes a Switch's props (`checked`, `defaultChecked`, `onCheckedChange`, `name`, `thumbIcons`…). The tile is then a `<label>` for the switch, so a press anywhere on the row toggles it; the switch is the one tab stop (Space or Enter), named by `title` and described by `subtitle`, and `disabled` on the tile disables it. A switch row is neither a link nor a button: `href`, `onClick`, `actions`, `content` and `chevron` do not apply, and `trailing` sits before the switch.
 
 ```tsx
 const [on, setOn] = useState(true);

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

@@ -1018,7 +1018,7 @@ export default function Students() {
   table: [Cards and tiles](../guides/cards-and-tiles.md)).
 
 Its props are `ServerTableProps<T>`; `filter` is a `ServerTableFilter`,
-`empty` a `ServerTableEmpty`, and `bulkActions` gets a
+`empty` an optional `ServerTableEmpty`, and `bulkActions` gets a
 `ServerTableSelection`.
 
 | Prop | Type | Default | Effect |
@@ -1045,7 +1045,7 @@ Its props are `ServerTableProps<T>`; `filter` is a `ServerTableFilter`,
 | `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; without it, no column is sortable (the server sorts, so pass `sorting` to let people sort), and the phone list bar shows only for selection |
 | `filters` | `tableFilters(model)` | — | without `filter`: "nothing matches" and its clear |
-| `empty` | `ServerTableEmpty`: `{ none, noMatch, clear?, headingLevel?, iconStyle? }` | — | the empty page: `none` and `noMatch` are a title or a `ListEmptyPage` (`{ title, description?, illustration?, action? }`); `headingLevel` (default 2) is the level of its title and of the error's; `iconStyle` styles the scenes (see below) |
+| `empty` | `ServerTableEmpty`: `{ none, noMatch, clear?, headingLevel?, iconStyle? }` | the `DataTable` default ("No data available", or "No results" when filtered) | the empty page. Leave it out when your page answers "nothing yet" and "nothing matches" itself and renders the table only when there are rows; the failure with Retry and the page past the last show either way. When given: `none` and `noMatch` are a title or a `ListEmptyPage` (`{ title, description?, illustration?, action? }`); `headingLevel` (default 2) is the level of its title and of the error's; `iconStyle` styles the scenes (see below) |
 | `error` | `ServerTableError \| null` | — | the fetch failed: the failure and a Retry replace the rows |
 | `onRetry` | `() => unknown` | — | the error's Retry; a returned promise keeps it loading |
 | `onClearFilters` | `() => void` | focus the table | without `filter`, after "clear" |
@@ -1936,8 +1936,13 @@ function Notifications({ items }: { items: Notification[] }) {
   the loader's own; see [A field's default](#a-fields-default)),
   `resultCount`, `loading`; every other prop of `Filter variant="bar"`
   (`quick`, `counts`, `previewCount`, `fieldProps`, `density`, `shortcuts`,
-  `searchApply`, `searchMinLength`, `errors`, `label`...) passes through. There is no `query`,
+  `searchApply`, `searchMinLength`, `searchAutoFocus`, `errors`, `label`...) passes through. There is no `query`,
   `defaultQuery` nor `onQueryChange`: the URL is the query.
+- **Focus on arrival.** `searchAutoFocus` puts focus in the search field when
+  the bar mounts (React's `autoFocus`, so it is right on the server too). Use it
+  on a search page reached with an empty query; leave it off on a list page,
+  where it would take focus from the page. `/` still focuses the field. `ServerTable`'s `filter` does not take
+  `searchAutoFocus`, on purpose: a list page should not steal focus.
 - **One write.** An edit writes the search, every `f=` and the aliased params,
   drops the `reset` ones and keeps the page's others (a tab, a sort).
   `onParamsChange` receives the next params for your router; the bar then

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

@@ -14,6 +14,7 @@ centre.
 | <img src="../previews/feedback-status-stepupdialog.webp" width="96" alt=""> | [StepUpDialog](#stepupdialog) | "Confirm it's you": a dialog that asks for a one-time code, driven by props |
 | <img src="../previews/feedback-status-unsaveddialog.webp" width="96" alt=""> | [UnsavedDialog](#unsaveddialog) | "Leave without saving?": a destructive confirm with Stay focused, used by the unsaved-changes guards |
 | <img src="../previews/feedback-status-stalenotice.webp" width="96" alt=""> | [StaleNotice](#stalenotice) | "This record changed": a warning that another write came first, with one Reload action and no overwrite |
+| | [Moment](#moment) | A full-screen one-off announcement (a player is eliminated, a role revealed): illustration, title, description and action, dismissed by Escape, a tap, its action or a timer |
 | <img src="../previews/feedback-status-emptystate.webp" width="96" alt=""> | [EmptyState](#emptystate) | Illustration, title, description and action, by kind (empty, search, not-found, unauthorized) |
 | <img src="../previews/feedback-status-pageloadfailed.webp" width="96" alt=""> | [PageLoadFailed](#pageloadfailed) | An empty state for a page opened at a cursor that failed, with a link back to the start |
 | <img src="../previews/feedback-status-errorstate.webp" width="96" alt=""> | [ErrorState](#errorstate) | Failure block with Retry and technical details |
@@ -522,6 +523,45 @@ import { UnsavedDialog } from '@nxgt/material/components';
 
 ---
 
+## Moment
+
+A transient full-screen announcement for a dramatic one-off event: a player is eliminated, a role is revealed. It is a modal dialog named by its `title` (and described by its `description`), so a screen reader announces it as it opens. Focus moves into it and goes back to the element that had it when it closes; the page behind is inert. Escape, a tap anywhere, the close button and the `action` dismiss it, and so does `duration`. It fades in and its picture pops in; under `prefers-reduced-motion` both stop. The surface is the tone's container with the foreground colour on it, so it holds AA in light and dark, and it fills a phone.
+
+```tsx
+import { Moment } from '@nxgt/material/components';
+import { Illustration } from '@nxgt/material/illustrations';
+
+<Moment
+  open={eliminated != null}
+  onOpenChange={(open) => !open && setEliminated(null)}
+  duration={6000}
+  tone="error"
+  illustration={<Illustration scene="error" />}
+  title={`${eliminated?.name} was eliminated`}
+  description="The village chose her. She was the seer."
+  action={<Button onClick={nextNight}>Next night</Button>}
+/>
+```
+
+| Prop | Type | Default | Effect |
+| --- | --- | --- | --- |
+| `open` | `boolean` | — | shown or not (controlled) |
+| `onOpenChange` | `(open: boolean) => void` | — | called with `false` on every dismissal |
+| `duration` | `number` (ms) | — | dismisses by itself after this long; unset: stays until dismissed |
+| `illustration` | `ReactNode` | — | the picture (a scene, a pictogram, an icon); decorative, hidden from assistive technology |
+| `title` | `ReactNode` | — | what happened; the accessible name |
+| `description` | `ReactNode` | — | the line under it, in a `<p>` (phrasing content only) |
+| `action` | `ReactNode` | — | a button or link; its click dismisses after its own handler, unless that handler calls `event.preventDefault()` |
+| `tone` | `Tone` | `neutral` | the colour of the meaning: a named tone or one of your `AppTones` |
+| `closeLabel` | `string` | translated | name of the close button |
+| `className` | `string` | — | on the full-screen surface |
+
+A tap anywhere dismisses, so keep text a reader must act on out of a short `duration`. Without a `description` the dialog is described by the hint `material.moment.hint` ("Press Escape or tap to dismiss."), read by assistive technology only. The close button is named by `material.buttons.close`.
+
+**Storybook:** `Feedback & status/Moment` · **Vue:** not yet (a `vue` issue)
+
+---
+
 ## StaleNotice
 
 ![StaleNotice](../previews/feedback-status-stalenotice.webp)

package/docs/components/form-fields.md

@@ -375,6 +375,22 @@ up / down buttons, `min` and `max` rows (Remove is disabled at `min`, Add is
 announcements. Without a form library, `ChoiceListField` takes `value` and
 `onChange`.
 
+**Focus.** `ChoiceListFormField` gives React Hook Form's `field.ref` a handle
+that focuses the first refused row's text input: the row of the first
+`choices.<i>.text` error (a resolver's), or the first blank row when the
+built-in blank rule refused the list. An error on the list itself (too few
+rows, no row marked) focuses its first control. So `shouldFocusError`,
+`setFocus('choices')` and `setError('choices', …, { shouldFocus: true })` land
+on the refused row when there is an error, and on the first control otherwise.
+A row path works too: `setFocus('choices.1.text')` and
+`setError('choices.1.text', …, { shouldFocus: true })` (a server's refusal)
+focus that row's text input. The form needs no `[aria-invalid="true"]` lookup.
+
+```tsx
+// After the server refused the second row:
+form.setError('choices.1.text', { message }, { shouldFocus: true });
+```
+
 | Prop | Type | Default | What it does |
 | --- | --- | --- | --- |
 | `control`, `name` | `Control<T>`, `Path<T>` | — | the form and its array (`ChoiceListFormField`) |

package/docs/components/overlays-and-menus.md

@@ -641,7 +641,7 @@ in a desktop application.
 
 ![Command](../previews/overlays-menus-command.webp)
 
-Command palette with filtering, groups and shortcuts. `CommandDialog` shows it in a modal.
+Command palette with filtering, groups and shortcuts. `CommandDialog` shows it in a modal, with a visible close button (`showCloseButton`, on by default; `false` removes it) at the end of the input row: named "Close" (`material.buttons.close`) and 44px on a coarse pointer, since a phone has no Escape key.
 
 ```tsx
 import {
@@ -700,6 +700,7 @@ children and they replace that, as before.
 | `shouldFilter` (`Command`) | `boolean` | `true` | `false` when you filter the items yourself (server search) |
 | `title` / `description` (`CommandDialog`) | `string` | `"Command Palette"` / `"Search for a command to run..."` (translated) | the dialog's title and description, inside the dialog and visually hidden |
 | `mobilePresentation` (`CommandDialog`) | `'dialog' \| 'top' \| 'fullscreen'` | `'top'` | below 640 px: pinned under the top edge (so the input and the results stay above the on-screen keyboard), the whole screen, or the centred modal it was before |
+| `showCloseButton` (`CommandDialog`) | `boolean` | `true` | a visible close button at the end of the input row, named `material.buttons.close` and 44 px on a coarse pointer; `false` leaves Escape and the backdrop |
 | `commandProps` (`CommandDialog`) | `Pick<CommandProps, 'shouldFilter' \| 'value' \| 'onValueChange' \| 'loop' \| 'filter' \| 'label'>` | — | reaches the inner `Command`: `{ shouldFilter: false }` for a palette whose results come from a server (cmdk then does not hide them again by the typed text), `value` / `onValueChange` for the highlighted item, `label` for the input's accessible name. The input's sizing, the dialog's title and its focus stay as they are |
 | `open`, `onOpenChange` (`CommandDialog`) | as `Dialog` | — | every other prop goes to the `Dialog` |
 

package/docs/components/primitives.md

@@ -163,7 +163,8 @@ import {
 Parts: `Card`, `CardHeader`, `CardTitle`, `CardDescription`, `CardAction`,
 `CardContent`, `CardFooter` — each a styled `<div>` taking its element's props,
 except `CardTitle`, a heading: an `h3` by default, another level or a `div`
-with `as` (`<CardTitle as="h2">`), so `getByRole('heading', { name })` finds it.
+with `as` (`<CardTitle as="h2">`), so `getByRole('heading', { name })` finds it. The title takes its text size's
+line height; pass a `leading-*` class to override.
 `CardAction` sits top-right of the header.
 
 **Storybook:** `Primitives/Card` · **Vue:** `Card` (same parts)

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

@@ -436,8 +436,10 @@ disabled with the field; Backspace in the empty input removes the last one.
 Enter in a form: it acts on the list and does not submit the form while it has
 something to do (WAI-ARIA combobox practice). It picks the highlighted option;
 with `freeSolo` and no option highlighted it adds the typed text; with the list
-open it is only default-prevented. On a closed list with nothing typed it
-submits, as a plain input does.
+open it is only default-prevented. In `mode="multiple"` (a tags box, `freeSolo`
+or not) Enter never submits the form, closed list and empty input included, so
+the Enter after a pick does not save the form. In `single` mode, on a closed
+list with nothing typed it submits, as a plain input does.
 
 An avatar in the rows and the chips:
 `getOptionLeading={(person) => <Avatar src={person.photo} alt="" />}`; see

package/docs/guides/i18n.md

@@ -312,7 +312,7 @@ title), `show` "Show results", `show-count` (an ICU plural over `count`:
 filters" (the list atop it); its Close is `material.buttons.close`.
 
 Smaller labels follow the language the same way: `CommandDialog`'s default
-title and description (`material.command.title` / `description`) and
+title and description (`material.command.title` / `description`), its close button (`material.buttons.close`) and
 `CommandList`'s accessible name (`material.command.list`); the filter's empty state and
 `+N more` chip (`material.filter.empty` / `more`) and the Yes/No, From, Until
 and Up to of its chips (`material.filter.value.*`; `formatFilterValue` takes
@@ -578,6 +578,9 @@ places that use them read:
 | `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.seat-ring.empty` | Empty seat | Place libre | `SeatRing`'s default empty seat (`renderEmptySeat` replaces it) |
+| `material.seat-ring.out` | Out | Éliminé | the word written in a `SeatRing` seat with `out: true`, part of its accessible name |
+| `material.moment.hint` | Press Escape or tap to dismiss. | Appuyez sur Échap ou touchez l'écran pour fermer. | `Moment`'s description for assistive technology when it has no `description` |
 | `material.command.empty` | No results | Aucun résultat | `CommandEmpty` with no children |
 | `material.pdf-reader.retry` | Retry | Réessayer | the `PdfReader` button |
 

package/docs/guides/theming.md

@@ -1171,6 +1171,10 @@ are, without growing what is painted (nothing changes for a mouse):
   visible label (only an `aria-label`) is still its drawn size plus the
   `.nxgt-touch-target` hit area: wrap it in a `<label>` of 44px, or give it a
   label.
+- **A `FilterBar` chip is 44px tall and at least 44px wide**: the quick pills and toggles, the
+  scope pill, an active condition's chip and the default hint (`height` and
+  `min-width`, so a long label still grows it; a mouse keeps 24-28px), and
+  "Add filter" and "Clear all" are 44px tall.
 
 A toast covering a control is out of scope: it physically hides what is under
 it.

package/docs/roadmap.md

@@ -371,6 +371,7 @@ version they shipped in, and planned entries may name the major they target.
 
 ## Shipped
 
+- **Moment (next minor)** — a transient full-screen announcement for a one-off event (a player is eliminated, a role is revealed): a modal dialog named by its title, with an illustration, description, action and tone, dismissed by Escape, a tap, its action or a timer, and no motion under reduced motion ([#2220](https://github.com/softistx/nxgt-material/issues/2220)).
 - **RecordActionsMenu (next minor)** — one menu for a record's lifecycle: archive with an Undo toast (or confirm first with `archivePolicy="confirm"`), restore, and delete that always confirms and shows the backend's refusal, with `ConfirmDialog` gaining `details` and `refusal` slots.
 - **Assistant approval card (next minor)** — `ChatActionProposal` shows an action an assistant proposes, with its status, deadline and Confirm / Reject, and `ChatToolActivity` is a compact row for a tool step in a chat thread ([#2134](https://github.com/softistx/nxgt-material/issues/2134)).
 

package/docs/troubleshooting.md

@@ -313,6 +313,7 @@ words in your error.
 - [A click on the next field right after an `Autocomplete` pick is lost](#a-click-on-the-next-field-right-after-an-autocomplete-pick-is-lost)
 - [An older search's results replace the newer ones in an `Autocomplete`](#an-older-searchs-results-replace-the-newer-ones-in-an-autocomplete)
 - [An `Autocomplete` option does nothing on click or Enter](#an-autocomplete-option-does-nothing-on-click-or-enter)
+- [Enter in a multiple `Autocomplete` no longer submits the form](#enter-in-a-multiple-autocomplete-no-longer-submits-the-form)
 - ["The search failed. Try again." no longer shows in an `Autocomplete`](#the-search-failed-try-again-no-longer-shows-in-an-autocomplete)
 - [A test no longer finds `aria-invalid` on an `OtpField` slot](#a-test-no-longer-finds-aria-invalid-on-an-otpfield-slot)
 - [A test no longer finds `aria-invalid` on a `CodeEditor`](#a-test-no-longer-finds-aria-invalid-on-a-codeeditor)
@@ -4880,6 +4881,21 @@ on a desktop and on a phone alike: closing the picker with OK hands focus back
 to the trigger, and the next Tab or click elsewhere touches it. See the next
 entry.
 
+### A failed submit focuses a `ChoiceListFormField` but not the refused row
+
+**When:** a form with a `ChoiceListFormField` fails validation (a row's text
+is blank, `choices.2.text` in a resolver) and `document.activeElement` is the
+list's first control, or nothing, instead of the refused row. In versions
+before this fix.
+**Why:** the field gave React Hook Form a handle that focused the first
+control of the list, whichever row was refused.
+**Fix:** upgrade to the release that lists this fix in its changelog:
+`shouldFocusError` and `setFocus(name)` focus the first refused row's text
+input, and so do `setFocus('choices.1.text')` and
+`setError('choices.1.text', …, { shouldFocus: true })` on a row path, as a
+server's refusal sets. Remove a workaround that queries `[aria-invalid="true"]`
+after submit. For the other fields, see the next entry.
+
 ### `setError(…, { shouldFocus: true })` or a failed submit does not focus the field
 
 **When:** a form wired with `*FormField`s: `handleSubmit` fails validation, or
@@ -5712,6 +5728,27 @@ may be chosen:
 />
 ```
 
+### Enter in a multiple `Autocomplete` no longer submits the form
+
+**When:** after upgrading, Enter in an `Autocomplete` (or `AutocompleteFormField`,
+a tags field) with `mode="multiple"` no longer submits the surrounding form
+when the list is closed and the input is empty.
+**Why:** the field is a tags box: the Enter that follows a pick used to save the
+whole form by surprise (#2199). Enter in `mode="multiple"` now only picks or
+adds. `single` mode is unchanged.
+**Fix:** submit with the form's button, or with a key handler of your own on the
+form if a keyboard shortcut is wanted (Ctrl/Cmd + Enter); drop any
+`onKeyDown` that prevented Enter on the combobox.
+
+```tsx
+<form
+	onSubmit={save}
+	onKeyDown={(e) => {
+		if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) e.currentTarget.requestSubmit();
+	}}
+>
+```
+
 ### "The search failed. Try again." no longer shows in an `Autocomplete`
 
 **When:** after upgrading, an `Autocomplete` whose `onSearch` rejects shows

package/lib/components/ui/display/seat-ring/seat-ring.css

@@ -101,6 +101,32 @@
 		border-style: dashed;
 		background: transparent;
 	}
+	/* Out: dimmed, the name struck through, the avatar greyed, and the word
+	 * "Out" written under the name, so colour and opacity are never the only cue. */
+	.nxgt-seat-ring [data-out] {
+		background: color-mix(in oklab, var(--muted) 60%, transparent);
+		border-color: var(--border);
+	}
+	.nxgt-seat-ring [data-out] [data-slot="seat-ring-avatar"] {
+		opacity: 0.55;
+		filter: grayscale(1);
+	}
+	.nxgt-seat-ring [data-out] [data-slot="seat-ring-label"] {
+		color: var(--muted-foreground);
+		text-decoration: line-through;
+		text-decoration-thickness: 2px;
+	}
+	.nxgt-seat-ring [data-slot="seat-ring-out"] {
+		padding-inline: 0.375rem;
+		border: 1px solid currentColor;
+		border-radius: 9999px;
+		color: var(--muted-foreground);
+		font-size: 0.6875rem;
+		font-weight: 600;
+		line-height: 1.25rem;
+		text-transform: uppercase;
+		letter-spacing: 0.04em;
+	}
 	.nxgt-seat-ring [data-highlighted] {
 		border-color: var(--primary-indicator, var(--primary));
 		box-shadow: 0 0 0 2px var(--primary-indicator, var(--primary));

package/lib/components/ui/feedback/feedback.css

@@ -1,4 +1,6 @@
 @import "./spinner/spinner.css";
+/* Moment: the full-screen announcement. */
+@import "./moment/moment.css";
 /* Illustration: the classes of the state scenes (EmptyState, ErrorState, @nxgt/material/illustrations). */
 @import "./state-frame/illustration.css";
 @import "./progress/progress.css";

package/lib/components/ui/feedback/moment/moment.css

@@ -0,0 +1,22 @@
+/* Moment: a full-screen one-off announcement. The surface is the tone's
+ * container (the `data-tone` channel), the text the foreground colour, so it
+ * reads at AA in light and dark. It fades in and its picture pops in (the
+ * keyframes are dialog.css's `nxgt-fade-in` and the `nxgt-pop` of styles.css);
+ * under prefers-reduced-motion reduced-motion.css ends both at once (the
+ * content carries `data-slot`). */
+@layer components {
+	.nxgt-moment {
+		background-color: var(--nxgt-tone-container, var(--background));
+		color: var(--foreground);
+	}
+	.nxgt-moment[data-state="open"] {
+		animation: nxgt-fade-in 240ms var(--nxgt-ease-effects) backwards;
+	}
+	.nxgt-moment[data-state="closed"] {
+		animation: nxgt-fade-out 160ms var(--nxgt-ease-emphasized-accelerate) both;
+	}
+	.nxgt-moment[data-state="open"] [data-slot="moment-illustration"] {
+		animation: nxgt-pop 520ms var(--nxgt-ease-emphasized-decelerate) 80ms
+			backwards;
+	}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nxgt/material",
-	"version": "3.72.0",
+	"version": "3.74.0",
 	"license": "MIT",
 	"bugs": {
 		"email": "stevegires@gmail.com"
@@ -372,7 +372,7 @@
 		"docs:previews": "rm -rf node_modules/.cache/nxgt-preview-free/missing && NXGT_PREVIEW_FREE=1 vitest run --project previews && bun .storybook/preview-free-report.ts"
 	},
 	"dependencies": {
-		"@nxgt/material-core": "^0.47.0",
+		"@nxgt/material-core": "^0.47.1",
 		"@base-ui/react": "^1.6.0",
 		"@dnd-kit/core": "^6.3.1",
 		"@dnd-kit/sortable": "^10.0.0",
@@ -459,7 +459,7 @@
 		"@fontsource-variable/inter": "^5",
 		"@fortawesome/fontawesome-free": "7.3.1",
 		"@nxgt/material-testing": "0.0.0",
-		"@nxgt/playwright": "^0.9.7",
+		"@nxgt/playwright": "^0.11.0",
 		"@react-leaflet/core": "^3.0.0",
 		"@react-pdf/renderer": "^4.9.0",
 		"@storybook/addon-a11y": "10.6.0",