@nxgt/material 3.74.0 → 3.75.0

package/docs/components/data-display.md

@@ -231,6 +231,7 @@ import { Button, SecretCard } from '@nxgt/material/components';
 | `revealed` + `onRevealedChange` | `boolean` + `(revealed) => void` | - | controlled |
 | `defaultRevealed`, `onRevealedChange` | `boolean`, `(revealed) => void` | `false` | uncontrolled; never together with `revealed` |
 | `autoHideMs` | `number` | - | hides again after this long shown; also calls `onRevealedChange(false)` |
+| `size` | `'default' \| 'sm'` | `'default'` | `sm` is the compact card for a phone: the faces lose their 6rem minimum height, the padding and gap tighten (`data-size`) |
 | `disabled` | `boolean` | `false` | the card cannot be revealed; a revealed card can always be hidden |
 | `labels` | `Partial<{ reveal, revealed, hidden }>` | `material.secret-card.*` | the button's name ("Show secret") and the announcements |
 
@@ -1299,7 +1300,7 @@ yours, the component names no domain.
 | `kinds` | `Record<string, ChangeHistoryKindOverride>` | built-ins | `label`, `verb`, `icon` (`null` removes it), `tone` per kind; `creation` (default true for `created`) makes an entry list values only |
 | `variant` | `'rail' \| 'cards'` | `'rail'` | the look |
 | `groupBy` | `'day' \| 'none'` | `'day'` | a heading per day (sticky on the rail), or one list in the order given |
-| `collapseAfter` | `number` | `3` | an entry with more changes collapses behind "N fields changed" (a creation: "N fields set") and a preview of the names, as a button with `aria-expanded` |
+| `collapseAfter` | `number` | `3` | an entry with more changes collapses behind "N fields changed" (a creation: "N fields set") and a preview of the first three names, as a button with `aria-expanded`. The preview wraps instead of clipping with an ellipsis, and a screen reader hears the names behind the "+N" |
 | `filter` | `ReactNode` | — | a slot above the list, for a `Filter` bar |
 | `loading` | `boolean` | `false` | skeleton entries |
 | `hasMore` | `boolean` | — | shows the Load more button |

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

@@ -96,8 +96,8 @@ table enables, for typing your own column defs.
 | `data` | `T[]` | — | rows; sorting, filtering and pagination run client-side |
 | `layout` | `'table' \| 'cards' \| 'tiles' \| { phone, wide }` | `'table'` | `'cards'` lays the rows out as a list of cards, `'tiles'` as one column in a single surface ([Cards and tiles](../guides/cards-and-tiles.md)); both ignore `virtual`, `renderExpandedRow` and `showViewOptions` |
 | `cardDensity` | `'comfortable' \| 'compact'` | `'comfortable'` | `compact` fits cards of at least `--nxgt-cards-min` (15rem), up to four a row, with a tighter padding; `layout="cards"` only ([Cards and tiles](../guides/cards-and-tiles.md#columns)) |
-| `renderCard` | `(row, { Title, Row, selected, locked, reason }) => ReactNode` | — | a card's content, required with `layout="cards"`; `Title` is the card's one link and its name; `Row` (the compact record row) is also passed, laid out inside the card's own padding, with no height of its own |
-| `renderTile` | `(row, { Title, Row, selected, locked, reason }) => ReactNode` | — | a tile's content, required with `layout="tiles"`; same `Title` as a card, or `Row`, the compact record row (title, subtitle, chips, trailing facts; see the cards and tiles guide) |
+| `renderCard` | `(row, { Title, Actions, Row, selected, locked, reason }) => ReactNode` | — | a card's content, required with `layout="cards"`; `Title` is the card's one link and its name; `Actions` is the trailing action slot (outside the link, at least 44px); `Row` (the compact record row) is also passed, laid out inside the card's own padding, with no height of its own |
+| `renderTile` | `(row, { Title, Actions, Row, selected, locked, reason }) => ReactNode` | — | a tile's content, required with `layout="tiles"`; same `Title` as a card, or `Row`, the compact record row (title, subtitle, chips, trailing facts; see the cards and tiles guide) |
 | `renderExpandedRow` | `(row) => ReactNode` | — | makes rows expandable; pair with the `expand` column |
 | `showViewOptions` | `boolean` | — | column visibility menu above the table |
 | `actions` | `(table, controls) => ReactNode` | — | toolbar content with access to the table (selected rows…); disabled while `loading`. `controls.focusTable()` moves the focus to the table |
@@ -1042,6 +1042,7 @@ Its props are `ServerTableProps<T>`; `filter` is a `ServerTableFilter`,
 | `loadMoreLabel` | `string` | "Load more" | with `footer="load-more"`: the button's label |
 | `hideOnSinglePage` | `boolean` | `false` | hides the footer's range and Previous / Next when the result is one page (no previous, no next), in the table, cards and tiles layouts; the count is still announced by the live region but no longer shown, so put it in `description` or keep the footer. With `bulkActions` the footer stays for "N rows selected", without its pager |
 | `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 |
+| `surface` | `'card' \| 'none'` | `'card'` | the list's own surface: `'card'` a translucent background and 16px of padding (below 768px neither: the layout owns the page gutter and the tiles sit at it, so a `ServerTable` outside a layout that adds a gutter now sits flush with the screen edge below 768px and the caller wraps it in its own padding); `'none'` neither, for a `ServerTable` placed in a `Card`, a page section or any surface that already frames it, so the screen shows one surface, not a frame inside a frame (the tiles keep their own grouped border) |
 | `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 |
@@ -1054,7 +1055,17 @@ Its props are `ServerTableProps<T>`; `filter` is a `ServerTableFilter`,
 | `pageHref` | `(params) => string` | `` `?${params}` `` | Previous / Next hrefs |
 | `pagingNames` | `{ after?, trail? }` | `after`, `trail` | the cursor's params |
 | `resultsLabel` | `(count) => string` | "N results" | without `filter`: what the list's region says. The page past the last has its own words: `material.server-table.past-end`, `past-end-hint`, `first-page` and `past-end-status` |
-| `className` | `string` | — | on the list's surface |
+| `className` | `string` | — | on the list's surface (below 768px the list has no padding or background of its own) |
+
+A `ServerTable` in a `Card` shows one surface with `surface="none"`:
+
+```tsx
+<Card>
+  <CardContent>
+    <ServerTable {...props} surface="none" />
+  </CardContent>
+</Card>
+```
 
 ```tsx
 // A lone icon action stays on the search's row on a phone.

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 |
+| | [Celebration](#celebration) | A one-shot confetti burst for a win or a reveal: plays once, never loops, theme colours, nothing under reduced motion |
 | | [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 |
@@ -523,6 +524,30 @@ import { UnsavedDialog } from '@nxgt/material/components';
 
 ---
 
+## Celebration
+
+A one-shot confetti burst for a win or a reveal. It plays once when it mounts and again only when `trigger` changes. It never loops: the pieces fly out, fall and fade once, then are removed from the DOM. They are painted with theme tokens (`--primary`, `--secondary`, `--success`, `--info`, `--warning`), sit in a full-screen layer that ignores the pointer, and are `aria-hidden`. Under `prefers-reduced-motion` it renders nothing; it renders nothing on the server either.
+
+```tsx
+import { Celebration } from '@nxgt/material/components';
+
+{winner && <Celebration trigger={round} onComplete={() => startNextRound()} />}
+```
+
+| Prop | Type | Default | Effect |
+| --- | --- | --- | --- |
+| `trigger` | `unknown` | — | plays the burst again when its value changes |
+| `pieces` | `number` | `48` | how many pieces fly out |
+| `duration` | `number` (ms) | `2400` | length of one burst |
+| `onComplete` | `() => void` | — | called once when a burst has ended |
+| `className` | `string` | — | on the full-screen layer |
+
+It is decorative: say what happened in text (a `Moment`, an alert). It pairs with `Moment` for a win screen.
+
+**Storybook:** `Feedback & status/Celebration` · **Vue:** not yet (#2272)
+
+---
+
 ## 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.
@@ -558,7 +583,7 @@ import { Illustration } from '@nxgt/material/illustrations';
 
 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)
+**Storybook:** `Feedback & status/Moment` · **Vue:** not yet (#2248)
 
 ---
 
@@ -895,6 +920,9 @@ import { CountdownTimer } from '@nxgt/material/components';
 // `criticalAt`); change (both tones) or hide the words:
 <CountdownTimer duration={300} warningText="Hurry up" />;
 <CountdownTimer duration={300} warningText={false} />;
+
+// The focal point of a screen:
+<CountdownTimer duration={300} size="lg" />;
 ```
 
 | Prop | Type | Default | Effect |
@@ -905,7 +933,7 @@ import { CountdownTimer } from '@nxgt/material/components';
 | `warningAt` / `criticalAt` | `number` | a quarter (≤ 60 s) / a tenth (≤ 10 s) | the seconds left when it turns amber / red |
 | `label` | `string` | `'Time remaining'` | its name |
 | `warningText` | `string \| false` | `'Little time left'` / `'Almost out of time'` | the words shown with a clock icon in the warning and critical tones, so low time is not told by colour alone; a string replaces both phrases; `false` hides them |
-| `size` | `'sm' \| 'md'` | `'md'` | 28 or 36 px high |
+| `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | 28, 36 or 56 px high; `lg` is for a countdown that is the focal point of a screen (centred in a ring of seats, a full-screen exam) |
 
 It ticks on the client only: the server renders the full time. The clock is a
 `role="timer"`; a polite live region speaks only when a threshold is crossed

package/docs/components/form-fields.md

@@ -587,6 +587,13 @@ plain-text `label`, else from `aria-label`; with neither (a field named only
 through `aria-labelledby` included), the buttons keep the bare "Increase" /
 "Decrease".
 
+**Stepper tooltips.** Each +/− button shows its name in a tooltip on hover and
+on keyboard focus (`:focus-visible`). Focus that a script moves onto it, such
+as a `Sheet` or `Dialog` putting its initial focus on the first tabbable
+control, does not open the tooltip once the user has used the pointer (the browser does not treat that focus as `:focus-visible`), so it does not cover the field's label. The
+buttons stay in the tab order and keep their accessible names. `QuantityField`
+shares this (React only; the Vue steppers are unchanged, #2264).
+
 **Decimal separator.** After blur (and after +/−) the value is shown with the
 active language's separator, from `I18nProvider`: `1,5` in French, `1.5` in
 English (no grouping, so it stays editable). Typing accepts both: `1,5` and
@@ -670,7 +677,7 @@ Without a form library, `QuantityField` takes `value` and `onChange` (or
 `defaultValue`). The number is the one `NumberField` has: the language's
 decimal separator, `min`, `max` and `step` (clamped on blur), and steppers
 named after the field ("Increase Dose"). Both parts stay on one line on a
-phone: the number shrinks, the unit keeps a fixed 7rem.
+phone: the number shrinks, the unit is sized to its longest label (see Unit width below).
 
 | Prop | Type | Default | What it does |
 | --- | --- | --- | --- |
@@ -690,6 +697,11 @@ phone: the number shrinks, the unit keeps a fixed 7rem.
   is a textbox named after the label, the unit a combobox (or, with
   `allowCustomUnit`, a text input) named "Dose unit". The message describes
   the group, the number and the unit, and both are `aria-invalid` on an error.
+- **Unit width:** the unit part is sized to the longest label of `units`
+  (never under 7rem, never over 55% of the row, so the number keeps room at
+  360px). Beyond the cap the label is cut with an ellipsis and the full label
+  is the select's `title` (the `units` select only; a free unit typed past
+  the cap scrolls in its input). No inline style is used for it.
 - **Translations:** `material.quantity-field.unit` and `.unit-named` (English
   and French) name the unit part.
 

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

@@ -987,7 +987,7 @@ import { Background, Card } from '@nxgt/material/components';
 It fills the viewport; pass a `className` such as `h-96 w-full` to use it as a band.
 It is plain CSS from `styles.css`, with no inline `style`, and its colours lift
 in dark. `ActivityLayout` and `ThreadLayout` sit on it. The superset with `grain`,
-`seed`, `fill`, `motif` and the other presets (light, geometry and motif families) is `Background` from `/backgrounds`; see the [backgrounds guide](../guides/backgrounds.md). Light presets there: `mesh`, `aurora`, `spotlight`, `bokeh`, `rays`, `halo`, `plasma`, `glass`, `ripples`, `blobs`, `paper`, `linen`, `concrete`, `marble`, `grain`; geometry: `isometric`, `blueprint`, `dots`, `stripes`, `low-poly`, `topography`, `waves`, `hexagons`, `circuit`, `graph-paper`, `checker`, `diagonal-checker`, `chevrons`; motifs: `shapes`, `confetti-grid`, `constellation`, `halftone`, `truchet`, `floating`, `scatter-icons`, `school`, `night-sky`, `bubbles`, `leaves`, `science`, `music`, `travel`, `sport`, `moon`; sky: `eclipse`, `meteor-shower`, `ringed-planet`, `northern-lights`, or the `sky` prop to lay the moon or one of them over any preset.
+`seed`, `fill`, `motif` and the other presets (light, geometry and motif families) is `Background` from `/backgrounds`; see the [backgrounds guide](../guides/backgrounds.md). Light presets there: `mesh`, `aurora`, `spotlight`, `bokeh`, `rays`, `halo`, `plasma`, `glass`, `ripples`, `blobs`, `paper`, `linen`, `concrete`, `marble`, `grain`; geometry: `isometric`, `blueprint`, `dots`, `stripes`, `low-poly`, `topography`, `waves`, `hexagons`, `circuit`, `graph-paper`, `checker`, `diagonal-checker`, `chevrons`; motifs: `shapes`, `confetti-grid`, `constellation`, `halftone`, `truchet`, `floating`, `scatter-icons`, `school`, `night-sky`, `bubbles`, `leaves`, `science`, `music`, `travel`, `sport`, `moon`; sky: `eclipse`, `meteor-shower`, `ringed-planet`, `northern-lights`, `day-sky`, `dawn-sky`, or the `sky` prop to lay the moon or one of them over any preset.
 
 **Storybook:** `Navigation & layout/Background` · **Vue:** `Background`
 

package/docs/components/primitives.md

@@ -739,8 +739,8 @@ reached with the arrow keys. The list scrolls sideways when the tabs do not
 fit (its scrollbar hidden), which suits a phone or a narrow popover. While it
 overflows, each side with hidden tabs fades and gets a small scroll button
 ("Scroll tabs left" / "Scroll tabs right", from `material.tabs.*`; out of the
-tab order; on a touch screen 44px wide and as tall as the list, so it never covers content); the selected and the focused tab are
-scrolled into view, instantly under reduced motion. A list that fits has
+tab order; on a touch screen 44px wide and as tall as the list, so it never covers content). Under a button the list shows nothing (its edge mask is transparent there and fades in just beyond), so no label is ever cut by the button, even at 375px; the selected and the focused tab are
+scrolled into view clear of the button, instantly under reduced motion. A list that fits has
 neither, and neither is in the server markup. `segmented` does the same.
 
 **`segmented`** is a neutral pill track: the active tab sits on a raised

package/docs/components/rich-widgets.md

@@ -135,7 +135,7 @@ import {
 | `ChatActionProposal` `busy` / `disabled` | `boolean` | `false` | an answer is being sent (both disabled, Confirm spins) / a read-only viewer |
 | `ChatActionProposal` `deadline` | `Date \| string \| number` | — | "Respond by …" in a `<time>`, in the active language; `expired` says "Expired on" |
 | `ChatActionProposal` `failureCode` / `failureMessage` | `string` / `ReactNode` | — | a `failed` card's reason, in an `alert`, with the code |
-| `ChatToolActivity` `name` / `state` / `detail` | `ReactNode` / `'running' \| 'ok' \| 'failed'` / `ReactNode` | — / `'running'` | one compact row for a tool step in a `ChatMessageList`: the name in mono, Running (spinner), Done or Failed |
+| `ChatToolActivity` `name` / `nameText` / `state` / `detail` | `ReactNode` / `string` / `'running' \| 'ok' \| 'failed'` / `ReactNode` | — / — / `'running'` | one compact row for a tool step in a `ChatMessageList`: the name in mono, wrapped onto two lines at most with its full text in a `title` (`nameText` gives it when `name` is a node), then Running (spinner), Done or Failed |
 | `ChatThread` / `ChatMessageList` `layout` | `'bubbles' \| 'flat'` | `'bubbles'` | a messenger's bubbles, or a team chat's rows (name and time over each run) |
 | `ChatThread` / `ChatMessageList` `density` | `'comfortable' \| 'compact'` | `'comfortable'` | tighter bubbles, smaller avatars |
 | `ChatMessageList` `viewportProps` | `ComponentProps` of the viewport | `{ tabIndex: 0 }` | attributes of the scrolling element; it is a tab stop so the keyboard can scroll the transcript (`tabIndex: -1` opts out) |
@@ -148,8 +148,9 @@ import {
 | `ChatComposer` `onStop` | `() => void` | — | while `isLoading`, send becomes stop (an assistant answering) |
 | `ChatComposer` `sendOnEnter` | `boolean` | `true` | Enter sends and Shift+Enter breaks the line; `false`: Ctrl/⌘+Enter sends. Never while an IME composes |
 | `ChatComposer` `emojis` / `mentions` | `EmojiItem[]` / `MentionItem[]` | — | enables the emoji picker and the `@` list |
-| `ChatThreadHeader` | `title`, `subtitle`, `avatarSrc`, `status`, `actions`, `onBack` | — | the title bar; inside a `ChatInbox` it carries the back button on a narrow screen |
+| `ChatThreadHeader` | `title`, `subtitle`, `titleText`, `subtitleText`, `avatarSrc`, `status`, `actions`, `onBack` | — | the title bar; inside a `ChatInbox` it carries the back button on a narrow screen. The title is clamped to two lines and the subtitle truncated, each with its full text in a `title` attribute; `titleText` / `subtitleText` give that text when `title` / `subtitle` is a node |
 | `ChatConversationItem` `title` / `titleText` | `ReactNode` / `string` | — | the clipped title carries its full text in a `title` attribute when it is a string; `titleText` gives it when `title` is a node |
+| `ChatConversationItem` width | — | — | fills its container (`w-full`) and has no intrinsic width (`contain: inline-size`), so a long title never widens an auto-sized grid track and the timestamp stays whole; a shrink-to-fit parent (`w-fit`, `max-content`, an inline-flex wrapper, a popover sized to content) must give it a width |
 | `ChatConversationItem` `status` / `isTyping` | `StatusTone` / `boolean` | — | presence dot; "Typing…" instead of the preview |
 | `ChatInbox` `pane` / `defaultPane` | `'list' \| 'thread'` | `'list'` | which pane shows below the `@md` container width |
 | `ChatWidget` `open` / `defaultOpen` / `onOpenChange` | `boolean` | `false` | the floating launcher's panel (full screen below `sm`); `unreadCount` on the launcher, `side`, `strategy` |

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

@@ -846,7 +846,7 @@ export function Topics() {
 | `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 |
+| `showDisabledReason` | `boolean` | `true` | prints a disabled option's `disabledReason` below the whole group ("Label: reason"), so the chip row keeps its wrapping; `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` |
@@ -894,7 +894,7 @@ export function Slots() {
 }
 ```
 
-- **Disabled reason.** The reason is a small muted line under the chip (not
+- **Disabled reason.** The reason is a small muted line below the whole group, as "Label: reason" (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"
@@ -918,7 +918,7 @@ single mode), Home and End jump, and the arrows follow `dir="rtl"`; Space toggle
 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 printed under the chip (unless
+and its `disabledReason` is printed below the whole group, outside the chip row (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

package/docs/getting-started.md

@@ -144,7 +144,7 @@ and need nothing.
 | `@nxgt/material/editor/viewer` | `RichTextViewer`: shows a saved document (HTML, JSON or Markdown) read-only. **Server-safe**: no editor instance, no `'use client'` ([RichTextViewer](components/rich-widgets.md#richtextviewer)) |
 | `@nxgt/material/editor/collab` | `collaboration()`: several people editing one `DocumentEditor` through a Yjs document and provider your app supplies. Needs `yjs` and `y-protocols` ([Collaboration](components/rich-widgets.md#collaboration)) |
 | `@nxgt/material/editor/pm` | The editor's own tiptap and ProseMirror classes (`Extension`, `Node`, `Plugin`, `PluginKey`, `TextSelection`, `ProseMirrorNode`, `Fragment`, `DecorationSet`, …) for a custom feature's extensions, so `instanceof` agrees with the editor. Shares the editor's code; **server-safe** ([A custom feature](components/rich-widgets.md#a-custom-feature)) |
-| `@nxgt/material/backgrounds` | Background presets: `Background` (a superset of the `/components` one: `preset` (50 ids, `AVAILABLE_BACKGROUND_PRESETS`), `tone`, `intensity`, `animated`, `grain`, `seed`, `fill`, `sky`, `motif` (`shapes`, `density`, `size`, `rotate`, `shapeFill`, `opacitySpread`) and, for `preset="icons"`, `icons`, `iconStyle` and `iconMotif`), and the types and tables re-exported from `@nxgt/material-core/backgrounds`. **Its own entry**, with an opt-in stylesheet ([backgrounds](guides/backgrounds.md)) |
+| `@nxgt/material/backgrounds` | Background presets: `Background` (a superset of the `/components` one: `preset` (52 ids, `AVAILABLE_BACKGROUND_PRESETS`), `tone`, `intensity`, `animated`, `grain`, `seed`, `fill`, `sky`, `motif` (`shapes`, `density`, `size`, `rotate`, `shapeFill`, `opacitySpread`) and, for `preset="icons"`, `icons`, `iconStyle` and `iconMotif`), and the types and tables re-exported from `@nxgt/material-core/backgrounds`. **Its own entry**, with an opt-in stylesheet ([backgrounds](guides/backgrounds.md)) |
 | `@nxgt/material/media-hls` | `hlsStreaming()`: the HLS adapter for `MediaPlayer`, `hls.js` loaded lazily ([streaming](guides/media-streaming.md)) |
 | `@nxgt/material/vite` | Build-time helper for consumers: `pdfkitStandardFonts()` ([printing](guides/printing.md#bundling-print-into-an-ssr-server)) |
 | `@nxgt/material/hooks` | `useTheme`, `useIsClient`, `useIsMobile`, `useLocalizedDate`, … ([helpers](guides/helpers.md#nxgtmaterialhooks)) |

package/docs/guides/app-shell.md

@@ -639,7 +639,7 @@ to know the theme on the server (a cookie, passed to `defaultTheme`).
 ## Use a background preset behind the shell
 
 The shell draws the gradient with three blurred blobs behind its frame. To use
-one of the 50 presets of `@nxgt/material/backgrounds` instead, pass it as
+one of the 52 presets of `@nxgt/material/backgrounds` instead, pass it as
 `backdrop` (behind the shell its shapes show only in empty space, see [Where the shapes go](#the-themes-background)):
 
 ```tsx

package/docs/guides/backgrounds.md

@@ -45,22 +45,22 @@ import '@nxgt/material/backgrounds.css';
 
 | Prop | Values | Default |
 | --- | --- | --- |
-| `preset` | `gradient`, `grain`, `mesh`, `aurora`, `spotlight`, `bokeh`, `rays`, `halo`, `plasma`, `glass`, `ripples`, `blobs`, `paper`, `linen`, `concrete`, `marble`, `isometric`, `blueprint`, `dots`, `stripes`, `low-poly`, `topography`, `waves`, `hexagons`, `circuit`, `graph-paper`, `checker`, `diagonal-checker`, `chevrons`, `shapes`, `confetti-grid`, `constellation`, `halftone`, `truchet`, `floating`, `scatter-icons`, `school`, `night-sky`, `bubbles`, `leaves`, `science`, `music`, `travel`, `sport`, `moon`, `eclipse`, `meteor-shower`, `ringed-planet`, `northern-lights`, `icons` (`AVAILABLE_BACKGROUND_PRESETS`, the ids this library draws); any other id draws the gradient and warns outside production | `gradient` |
+| `preset` | `gradient`, `grain`, `mesh`, `aurora`, `spotlight`, `bokeh`, `rays`, `halo`, `plasma`, `glass`, `ripples`, `blobs`, `paper`, `linen`, `concrete`, `marble`, `isometric`, `blueprint`, `dots`, `stripes`, `low-poly`, `topography`, `waves`, `hexagons`, `circuit`, `graph-paper`, `checker`, `diagonal-checker`, `chevrons`, `shapes`, `confetti-grid`, `constellation`, `halftone`, `truchet`, `floating`, `scatter-icons`, `school`, `night-sky`, `bubbles`, `leaves`, `science`, `music`, `travel`, `sport`, `moon`, `eclipse`, `meteor-shower`, `ringed-planet`, `northern-lights`, `day-sky`, `dawn-sky`, `icons` (`AVAILABLE_BACKGROUND_PRESETS`, the ids this library draws); any other id draws the gradient and warns outside production | `gradient` |
 | `tone`, `intensity` | as above | `primary`, `default` |
 | `animated` | `boolean`: drifts the layers, see Motion | `false` |
 | `grain` | `boolean`: film noise over the preset; needs `grain.css` | `false` |
 | `seed` | `number`: moves a seeded preset's geometry and the grain | `0` |
 | `motif` | a `MotifOptions` object (`shapes`, `density`, `layout`, `size`, `rotate`, `shapeFill`, `opacitySpread`), see [Motif presets](#motif-presets) | all fields optional |
 | `moon` | a `MoonOptions` object for `preset="moon"`, the celestial presets and a `sky`: `position` (`{ x, y }`, fractions of the container), `phase`, `halo`; see [Moon](#moon) | `{ position: { x: 0.8, y: 0.2 }, phase: 0.78, halo: 2.6 }` |
-| `sky` | `'moon'`, `'eclipse'`, `'meteor-shower'`, `'ringed-planet'` or `'northern-lights'`: a second scene drawn over any preset, before the grain; see [Celestial presets and the sky overlay](#celestial-presets-and-the-sky-overlay) | none |
+| `sky` | `'moon'`, `'eclipse'`, `'meteor-shower'`, `'ringed-planet'`, `'northern-lights'`, `'day-sky'` or `'dawn-sky'`: a second scene drawn over any preset, before the grain; see [Celestial presets and the sky overlay](#celestial-presets-and-the-sky-overlay) | none |
 | `icons` | for `preset="icons"`: a pack name (`school`, `health`, `finance`, `travel`, `nature`, `tech`) or up to 48 icon names and `{ name, family?, type? }` references; see [Icons](#icons) | the `school` pack |
 | `iconStyle` | for `preset="icons"` (and `shapes` with `motif.icons`): one style (`{ family?, type? }` or a sprite name such as `'sharp-light'`), a list of at most 8, or a weighted list `[{ style, weight? }]`; one drawn per icon. A weighted list drops the styles whose sprite is not served | light 3, thin 3, sharp-regular 2, sharp-light 2, duotone-thin 1 |
 | `iconMotif` | for `preset="icons"` (and `shapes` with `motif.icons`): `layout` (`even`: shapes and a few icons; `scatter`, `grid`, `constellation`, `drift`: icons only), `colors` (`one`, `palette`, `classic`), `sizeRange`, `rotation`, `duotone` (`opacity` or `tones`), `secondaryOpacity` (0.4 or, with `tones`, 0.85 unless set), `calm` (icons-only layouts), `quiet` (`start`, `end`, `center`: a band the icons fade out of) | `{ layout: 'even', colors: 'one', duotone: 'opacity' }` (`secondaryOpacity` unset: 0.4, or 0.85 with `tones`) |
 | `fill` | `viewport` (the viewport's size) or `container` (its parent's size: the parent needs a definite height) | `viewport` |
 
 
-`BACKGROUND_PRESETS` is the table of all 50 presets with their family and
-kind; `AVAILABLE_BACKGROUND_PRESETS` lists the ids this library draws (all 50;
+`BACKGROUND_PRESETS` is the table of all 52 presets with their family and
+kind; `AVAILABLE_BACKGROUND_PRESETS` lists the ids this library draws (all 52;
 `SHIPPED_BACKGROUND_PRESETS` is the common floor every library draws).
 
 <img src="../previews/backgrounds-matrix.webp" width="640" alt="The presets, each in a card with its name">
@@ -287,8 +287,8 @@ follows `intensity` (`subtle` is a faint watermark, `vivid` the strongest; the s
 
 ## Celestial presets and the sky overlay
 
-Four presets draw a sky of their own, each discreet like `moon`: thin outlines and soft halos in the tone's three
-colours, a few stars and a clear middle for the content.
+Six presets draw a sky of their own, each discreet like `moon`: thin outlines and soft halos in the tone's three
+colours, a few stars (or, for the two daytime skies, clouds) and a clear middle for the content.
 
 | Preset | Draws | `moon.phase` is | Default `moon.position` |
 | --- | --- | --- | --- |
@@ -296,6 +296,8 @@ colours, a few stars and a clear middle for the content.
 | `meteor-shower` | streaks falling down and to the left, among a few stars | the direction of the fall (0.2 steep, 0.9 shallow) | `0.7, 0.18` (the radiant) |
 | `ringed-planet` | a planet with a ring that passes behind it, and a small moon | the ring's tilt | `0.78, 0.22` |
 | `northern-lights` | three soft ribbons across the top | the ribbons' height | `0.5, 0.2` (only `y` applies) |
+| `day-sky` | a thin-outlined sun with rays and a halo, and soft clouds in the top band; no stars | the cloud cover (0.2 clear, 0.9 overcast) | `0.8, 0.16` |
+| `dawn-sky` | a low sun on the left over a horizon glow, and long thin clouds; no stars | the cloud cover | `0.22, 0.7` (`y` is where the glow hangs) |
 
 ```tsx
 import '@nxgt/material/backgrounds/celestial.css'; // or backgrounds.css
@@ -308,7 +310,17 @@ They read `motif.size` (the body at 0.7, 1 or 1.4 times) and `motif.density` (5,
 and `seed` places the stars. The body is halved (the planet scaled to two thirds) in a container under 640 px
 wide so it stays whole in its corner. In light the scene is multiplied into the page, a faint watermark; in dark
 it adds light and the body is silver. `intensity` fades it (`subtle` is the calmest, and the right pick for
-`northern-lights`, whose ribbons are the strongest of the four).
+`northern-lights`, whose ribbons are the strongest of the night skies).
+
+`day-sky` and `dawn-sky` are the daytime pair, for an app that alternates night and day phases: the same
+`preset` or `sky` option, so switching phase is a prop change (`preset={night ? 'night-sky' : 'day-sky'}`, or
+`sky={night ? 'moon' : 'dawn-sky'}`). `moon.phase` is the cloud cover and `motif.density` adds clouds (2, 3 or 5,
+plus up to two with the cover); `motif.size` scales the sun and the clouds. The clouds stay in the top band, out of
+the clear middle, and every shape is drawn at half opacity or less, so body text over the backdrop keeps AA
+contrast (checked in light and dark for every `intensity`). The tones follow the theme in light and dark, and
+`animated` drifts the clouds sideways (18 s) unless the user asks for reduced motion.
+
+<img src="../previews/backgrounds-day-and-dawn-sky.webp" width="640" alt="The day-sky and dawn-sky presets, each behind a card">
 
 The builders live in `@nxgt/material-core/backgrounds/celestial`, a separate subpath, and `Background` loads it
 on demand: the first paint (and the server's HTML) holds the layers, with the SVG filling in once the chunk has
@@ -316,7 +328,7 @@ loaded, so the scene never causes a hydration mismatch and an app that draws non
 
 ### The `sky` prop
 
-`sky` draws the moon or a celestial preset over *any* preset, after its layers and before the grain, with its
+`sky` draws the moon, a celestial preset or a daytime one over *any* preset, after its layers and before the grain, with its
 own ids (`<id>-sky-…`), so the two never clash. It reads the base's `motif` but not its `moon` options (those stay with the
 preset): the sky's body sits at its own default place, mirrored to the other side when the preset's moon or
 celestial body would land within a fifth of the width, and its stars follow `seed + 1`.
@@ -327,8 +339,8 @@ celestial body would land within a fifth of the width, and its stars follow `see
 
 A theme can name it too (`background: { preset: 'school', sky: 'meteor-shower' }`): a `sky` you pass wins over the
 theme's. With `animated` the stars twinkle (8 s a leg), a meteor glides and fades (10 s) and a ribbon drifts
-(14 s); nothing moves under `prefers-reduced-motion` or while the page is hidden. CSS: `backgrounds/celestial.css`
-(it imports `scene.css`) styles all four presets and the overlay; React only, `@nxgt/material-vue` does not draw
+(14 s) and a cloud slides (18 s); nothing moves under `prefers-reduced-motion` or while the page is hidden. CSS: `backgrounds/celestial.css`
+(it imports `scene.css`) styles all six presets and the overlay; React only, `@nxgt/material-vue` does not draw
 them. The theme picker draws a small tile for a theme with a celestial preset.
 
 ## Icons
@@ -700,7 +712,7 @@ else is opt-in, because CSS cannot be tree-shaken. `animated` on the
 /* or just the one you use: */
 @import "@nxgt/material/backgrounds/aurora.css";     /* a preset file, named after the preset (aurora.css, low-poly.css, hexagons.css, scatter-icons.css…) */
 @import "@nxgt/material/backgrounds/grain.css";      /* the grain overlay, over any preset */
-@import "@nxgt/material/backgrounds/celestial.css";  /* eclipse, meteor-shower, ringed-planet, northern-lights, and the `sky` overlay */
+@import "@nxgt/material/backgrounds/celestial.css";  /* eclipse, meteor-shower, ringed-planet, northern-lights, day-sky, dawn-sky, and the `sky` overlay */
 @import "@nxgt/material/backgrounds/halftone.css";   /* a motif preset (brings motifs.css) */
 @import "@nxgt/material/backgrounds/floating.css";   /* brings motifs.css and drift.css */
 ```

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

@@ -123,12 +123,50 @@ A card is as tall as its content, and the cards of a grid row stretch to the tal
 | the text only | neither |
 
 The link's hit area covers the whole card, so a click anywhere on the card
-follows it. Never put a second link or a button inside the card's content:
+follows it. A linked or clickable `Title` also draws the same discreet,
+decorative trailing chevron as `Row`, centred at the card's end (left out when
+the card holds an `Actions` slot); `<Title chevron={false}>` removes it.
+
+Never put a second link or a button inside the card's content:
 only the title is interactive.
 
 On a coarse pointer the title link also keeps a 44px box of its own, clear of
 the row-select checkbox, however short the title.
 
+### A trailing action beside the link
+
+A card's primary action (a worklist's "Edit", "Approve") cannot live inside
+the title link. Render it in `item.Actions`, after `Title`:
+
+```tsx
+import { Pencil } from 'lucide-react';
+import { Button } from '@nxgt/material/components';
+
+<DataTable
+  layout="cards"
+  getRowHref={(task) => `/tasks/${task.id}`}
+  renderCard={(task, { Title, Actions }) => (
+    <>
+      <Title as="h3">{task.name}</Title>
+      <p>{task.owner}</p>
+      <Actions>
+        <Button variant="ghost" size="icon" aria-label={`Edit ${task.name}`}
+          onClick={() => edit(task)}>
+          <Pencil aria-hidden />
+        </Button>
+      </Actions>
+    </>
+  )}
+/>
+```
+
+`Actions` is a slot at the item's end (a tile centres it), outside the link,
+at least 44px square, raised above the link's overlay: a click on the action
+runs the action and does not follow the card. The item keeps room for it at its
+end, room for one 44px control: a menu button for several actions, not a row
+of buttons. `renderTile` takes it too, and so does a `ServerTable`. Render it once per
+item. Put the action in `Actions`, not in `Row`'s `trailing` (decoration only).
+
 `item` also carries `Row` (the compact record row above), `selected`,
 `locked` and `reason` (a row `enableRowSelection` leaves out, and
 `rowSelectionDisabledReason`'s answer).
@@ -237,7 +275,7 @@ own: do not put it in a shrink-to-fit parent (`w-fit`, `inline-flex`).
 `cardDensity="compact"` instead fits as many cards of at least
 `--nxgt-cards-min` (15rem) as the list holds, up to four, with a 0.5rem gap and a
 tighter padding. By the list's own width (the table's box minus the 16px it
-keeps on each side), four from about 62rem, three from about 46.5rem, two from
+keeps on each side from 768px; on a phone it keeps 0, so the list is 32px wider than the thresholds below assume), four from about 62rem, three from about 46.5rem, two from
 about 31rem, one below: a table 1280px wide shows four (so does a 1024px one), a 992px one
 (a 1024px window with 16px page padding) three, a 328px one one. It suits a card that
 holds a name and a fact or two. A compact card is about 15rem wide, so stack it
@@ -274,7 +312,7 @@ they are ignored and warn once in development. `tableRef` stays `null`: use
 
 The list is a plain list, not a grid: Tab visits each card's checkbox (with a
 `select` column) and then its link, in order, after the list bar's "Select all on
-this page". Space toggles a checkbox, Enter follows a link. There is no arrow-key
+this page". An `Actions` control comes after its link. Space toggles a checkbox, Enter follows a link. There is no arrow-key
 navigation to learn.
 
 ## Custom links
@@ -352,6 +390,7 @@ then switches. Render the app on the client for a phone-only screen, or use
 
 **My card has two links.** Only `Title` is a link. Content you render yourself
 must not hold another `<a>` or button: it would sit under the card's hit area.
+A button the card needs goes in `item.Actions`.
 
 **The cards have one column on a wide screen.** (Tiles always do.) The columns follow the list's
 width. Check that the list is not inside a shrink-to-fit parent.

package/docs/guides/icon-motifs.md

@@ -97,8 +97,8 @@ no icon background never downloads it.
 
 ## A sky
 
-Four presets draw a discreet sky (`eclipse`, `meteor-shower`, `ringed-planet`,
-`northern-lights`), and `sky` lays the moon or one of them over **any** preset:
+Six presets draw a discreet sky (`eclipse`, `meteor-shower`, `ringed-planet`,
+`northern-lights`, `day-sky`, `dawn-sky`), and `sky` lays the moon or one of them over **any** preset:
 
 ```tsx
 import '@nxgt/material/backgrounds/celestial.css'; // or backgrounds.css
@@ -107,12 +107,12 @@ import '@nxgt/material/backgrounds/celestial.css'; // or backgrounds.css
 <Background preset="icons" icons="travel" sky="northern-lights" grain />
 ```
 
-<img src="../previews/backgrounds-celestial.webp" width="480" alt="The four celestial presets: an eclipse, a meteor shower, a ringed planet and northern lights">
+<img src="../previews/backgrounds-celestial.webp" width="480" alt="Four of the celestial presets: an eclipse, a meteor shower, a ringed planet and northern lights">
 
 The `sky` keeps clear of the base's own moon or planet (it moves to the other
 side), and sits before the grain. The sky over the school icons:
 
-<img src="../previews/backgrounds-sky-overlay.webp" width="480" alt="The four skies laid over the school icons">
+<img src="../previews/backgrounds-sky-overlay.webp" width="480" alt="Four of the skies laid over the school icons">
 
 The presets and `sky` are pure SVG: they need no sprite. Details in
 [backgrounds](backgrounds.md#celestial-presets-and-the-sky-overlay).
@@ -138,8 +138,8 @@ An `Illustration` draws a hero icon on a Material 3 Expressive plate, with two
 to four satellites. There are twelve base scenes (`empty`, `no-results`,
 `not-found`, `error`, `offline`, `success`, `welcome`, `forbidden`,
 `maintenance`, `invitation`, `sign-in`, `empty-inbox`) and two domain sets of
-ten, **health** and **education**, plus **game** (eleven scenes for games and events), each its own subpath so an app that does not
-import one does not carry it:
+ten, **health** and **education**, plus **game** (sixteen scenes for games and
+events), each its own subpath so an app that does not import one does not carry it:
 
 <img src="../previews/feedback-status-illustration.webp" width="480" alt="The twelve base illustration scenes">
 
@@ -147,7 +147,7 @@ import one does not carry it:
 
 <img src="../previews/feedback-status-illustration-education.webp" width="480" alt="The ten education scenes">
 
-<img src="../previews/feedback-status-illustration-game.webp" width="480" alt="The eleven game scenes">
+<img src="../previews/feedback-status-illustration-game.webp" width="480" alt="The game scenes">
 
 - `IllustrationDefaults` is opt-in: without it (and without a `hero`) an
   `EmptyState` or `ErrorState` draws the same built-in art as before. An

package/docs/guides/illustrations.md

@@ -5,7 +5,7 @@ on a Material 3 Expressive plate, two to four satellite icons around it, a
 dashed ring and a few sparkles. There are twelve scenes: `empty`, `no-results`,
 `not-found`, `error`, `offline`, `success`, `welcome`, `forbidden`,
 `maintenance`, `invitation`, `sign-in` and `empty-inbox`, and two domain sets of
-ten more each, health and education, in their own entries ([health](#scene-sets-the-health-scenes) and [education](#scene-sets-the-education-scenes)), and eleven for games ([game](#scene-sets-the-game-scenes)). The icons are
+ten more each, health and education, in their own entries ([health](#scene-sets-the-health-scenes) and [education](#scene-sets-the-education-scenes)), and sixteen for games ([game](#scene-sets-the-game-scenes)). The icons are
 [Font Awesome](https://fontawesome.com) sprites **your app serves** (see
 [Icons](../getting-started.md#icons)): the package ships no icon artwork, so it
 works with the sprites your licence covers. The [icon motifs guide](icon-motifs.md) shows them next to the icon backgrounds, the sky and the themes, and lists the suggested names that are Pro only, with Free neighbours.
@@ -148,16 +148,17 @@ icons: serve a Pro sprite, or set `edition="free"` on `IconSpritesProvider`, whi
 
 ## Scene sets: the game scenes
 
-`@nxgt/material/illustrations/game` holds eleven scenes for a game, a quiz, a
-community or an event app: `night-sky`, `village`, five character pictograms
-(`seer`, `healer`, `archer`, `cupid`, `wolf`), `victory`, `empty-table`,
+`@nxgt/material/illustrations/game` holds sixteen scenes for a game, a quiz, a
+community or an event app: `night-sky`, `dawn`, `village` (night),
+`day-village`, `graveyard`, seven character pictograms (`seer`, `healer`,
+`archer`, `cupid`, `wolf`, `villager`, `witch`), `victory`, `empty-table`,
 `waiting-players` and `connection-lost`. It works exactly like the other sets,
 and they register side by side. Use them where a screen is empty, waiting,
 failed, celebrating or opening: a lobby with no players, a round that waits, a
 dropped connection, a winner, a night-phase hero. Keep them away from behind
 data.
 
-<img src="../previews/feedback-status-illustration-game.webp" width="480" alt="The eleven game scenes">
+<img src="../previews/feedback-status-illustration-game.webp" width="480" alt="The game scenes">
 
 ```tsx
 import { Illustration, IllustrationDefaults } from '@nxgt/material/illustrations';

package/docs/guides/theming.md

@@ -146,7 +146,7 @@ A backdrop's colours come from the theme; set none on it.
 ## The neutral palette
 
 The default theme's page is plain: pure white in light and the one dark night
-every theme shares (`oklch(0.15 0.026 273)`), whatever the colours. Its other
+every theme shares (`oklch(0.15 0.026 273)`), whatever the colours (the `teal` theme is the exception: it sets `neutrals: 'tinted'`). The default's other
 neutrals (cards in dark, muted, borders, text) are softly tinted toward violet
 (hue 290, low chroma), to sit with the primary indigo instead of fighting it.
 A theme can tint its page too with `neutrals: 'tinted'` in `defineTheme`

package/docs/troubleshooting.md

@@ -386,6 +386,7 @@ words in your error.
 - [`defineCodeTheme: "keyword" must be a hex colour`](#definecodetheme-keyword-must-be-a-hex-colour-rgb-or-rrggbb)
 - [A `CodeEditor` shows its code in one colour after another Monaco editor mounts](#a-codeeditor-shows-its-code-in-one-colour-after-another-monaco-editor-mounts)
 - [`primary={false}` has no effect on a `ContactsFormField` with `editing="dialog"`](#primaryfalse-has-no-effect-on-a-contactsformfield-with-editingdialog)
+- [ChatConversationItem collapses to zero width (or its timestamp is clipped) inside a w-fit / max-content / inline-flex / popover parent](#chatconversationitem-collapses-to-zero-width-or-its-timestamp-is-clipped-inside-a-w-fit--max-content--inline-flex--popover-parent)
 
 **PDF reader**
 
@@ -2325,6 +2326,17 @@ your own draws a second chevron since the tile adds one.
 <ListTile title="Notifications" href="/settings/notifications" chevron={false} trailing={<MyArrow />} />
 ```
 
+### A linked DataTable card shows two chevrons
+
+**When:** a `renderCard` or `renderTile` built on `item.Title`, with
+`getRowHref` or `onRowClick`, draws a chevron icon of its own.
+**Why:** a linked `Title` ends with a decorative chevron by default.
+**Fix:** drop your own, or keep it and pass `chevron={false}`:
+
+```tsx
+<Title as="h3" chevron={false}>{row.name}</Title>
+```
+
 ### A `ListTile` link reloads the whole page
 
 **When:** a `ListTile` with an `href` is clicked inside a router app: the
@@ -7065,6 +7077,32 @@ in both modes.
 **Fix:** use the default `editing="inline"` when the star must go, or drop the
 `primary` flag from the value before saving.
 
+### `ChatConversationItem collapses to zero width (or its timestamp is clipped) inside a w-fit / max-content / inline-flex / popover parent`
+
+**When:** a `ChatConversationItem` sits in a parent that sizes to its content
+(`w-fit`, `max-content`, an inline-flex wrapper, a popover sized to content),
+after upgrading `@nxgt/material` to the version that fixed the clipped timestamp.
+
+**Why:** the item now has `contain: inline-size`, so it has no intrinsic width
+and a long title can no longer widen an auto-sized grid track and push the
+timestamp out of the list pane. It fills its container (`w-full`); a parent
+that takes its width from its content gives it zero.
+
+**Fix:** give the item's parent a width, or, in a grid, use
+`grid-cols-[minmax(0,1fr)]` on the list that wraps it:
+
+```tsx
+// A shrink-to-fit parent: give the item a width.
+<div className="w-72">
+  <ChatConversationItem title="Support" timestamp="31 août" />
+</div>
+
+// In a grid, let the track shrink below the title's width.
+<ul className="grid grid-cols-[minmax(0,1fr)]">
+  <li><ChatConversationItem title="Support" timestamp="31 août" /></li>
+</ul>
+```
+
 ## PDF reader
 
 ### PDF text is missing or in the wrong font in `PdfReader` (cMaps and standard fonts)
@@ -7653,13 +7691,13 @@ How the presets work is in the [Backgrounds guide](guides/backgrounds.md).
 ### `Background: preset "<id>" is not available in this library yet; drawing "gradient".`
 
 **When:** in development (not when `NODE_ENV` is `production`), the first time a `Background` from `@nxgt/material/backgrounds` gets a `preset` that this library does not draw yet, or a typo from JavaScript. It is printed once per id.
-**Why:** `BACKGROUND_PRESETS` lists the 50 presets; this library draws all of them, the ones in `AVAILABLE_BACKGROUND_PRESETS`. Any other id (a typo from JavaScript) draws the gradient.
+**Why:** `BACKGROUND_PRESETS` lists the 52 presets; this library draws all of them, the ones in `AVAILABLE_BACKGROUND_PRESETS`. Any other id (a typo from JavaScript) draws the gradient.
 **Fix:** use an available preset:
 
 ```ts
 import { AVAILABLE_BACKGROUND_PRESETS } from '@nxgt/material/backgrounds';
 
-console.log(AVAILABLE_BACKGROUND_PRESETS); // the 50 ids it draws: 'gradient', 'grain', 'mesh', 'aurora', …, 'moon', 'eclipse', …, 'northern-lights', 'icons'
+console.log(AVAILABLE_BACKGROUND_PRESETS); // the 52 ids it draws: 'gradient', 'grain', 'mesh', 'aurora', …, 'moon', 'eclipse', …, 'northern-lights', 'icons'
 ```
 
 ### A preset `Background` looks bare, with no error