@nxgt/material 3.73.0 → 3.75.0

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/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/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`
@@ -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

@@ -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
@@ -4891,8 +4903,10 @@ before this fix.
 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. Remove a workaround that queries `[aria-invalid="true"]` after submit.
-For the other fields, see the next entry.
+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
 
@@ -7063,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)
@@ -7651,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

package/lib/backgrounds/css-react/celestial-day.css

@@ -0,0 +1,85 @@
+/* The daytime skies, `day-sky` and `dawn-sky`: the dawn's wash, the sun's rays,
+ * the horizon glow and the clouds. Imported by celestial.css, which holds the
+ * rest of the celestial presets and the shared scene; see its header.
+ *
+ * Motion (opt-in, `animated`): rays turn, the glow swells, clouds drift;
+ * never under `prefers-reduced-motion`. React only. */
+@layer components {
+	/* The dawn's wash: a pool low on the left where the sun rises, a lighter one above. */
+	[data-background="dawn-sky"] > [data-layer="wash"] {
+		position: absolute;
+		inset: 0;
+		background:
+			radial-gradient(
+				ellipse 80% 45% at 22% 74%,
+				color-mix(in oklab, var(--nxgt-bg-c2) var(--nxgt-bg-a2), transparent),
+				transparent 72%
+			),
+			radial-gradient(
+				ellipse 70% 40% at 80% 4%,
+				color-mix(in oklab, var(--nxgt-bg-c3) var(--nxgt-bg-a1), transparent),
+				transparent 70%
+			);
+	}
+
+	/* The sun's rays turn about the sun, the dawn's glow swells from the horizon. */
+	[data-background] > [data-scene][data-celestial] .sn > path,
+	[data-background] > [data-scene][data-celestial] .hz {
+		transform-box: fill-box;
+		transform-origin: 50% 100%;
+	}
+	[data-background] > [data-scene][data-celestial] .sn > path {
+		transform-origin: center;
+	}
+
+	/* The clouds drift sideways from their own box. */
+	[data-background]
+		> [data-scene][data-celestial]
+		:is(.cl-day-sky, .cl-dawn-sky)
+		.cd
+		> .mo {
+		transform-box: fill-box;
+	}
+}
+
+@media (prefers-reduced-motion: no-preference) {
+	@keyframes nxgt-bg-sky-turn {
+		to {
+			transform: rotate(30deg);
+		}
+	}
+	@keyframes nxgt-bg-sky-glow {
+		to {
+			transform: scaleY(1.12);
+		}
+	}
+	@keyframes nxgt-bg-sky-cloud {
+		to {
+			transform: translateX(14px);
+		}
+	}
+
+	@layer components {
+		[data-background][data-animated]
+			> [data-scene][data-celestial]
+			.cl-day-sky
+			.cd
+			> .mo,
+		[data-background][data-animated]
+			> [data-scene][data-celestial]
+			.cl-dawn-sky
+			.cd
+			> .mo {
+			animation: nxgt-bg-sky-cloud 18s ease-in-out var(--nxgt-sky-delay, 0s)
+				infinite alternate var(--nxgt-bg-play, running);
+		}
+		[data-background][data-animated] > [data-scene][data-celestial] .sn > path {
+			animation: nxgt-bg-sky-turn 60s linear infinite alternate
+				var(--nxgt-bg-play, running);
+		}
+		[data-background][data-animated] > [data-scene][data-celestial] .hz {
+			animation: nxgt-bg-sky-glow 14s ease-in-out infinite alternate
+				var(--nxgt-bg-play, running);
+		}
+	}
+}

package/lib/backgrounds/css-react/celestial.css

@@ -1,15 +1,14 @@
 /* The celestial presets (`eclipse`, `meteor-shower`, `ringed-planet`,
- * `northern-lights`) and the `sky` overlay, which draws the moon or one of
- * them over any preset. Core's `/backgrounds/celestial` builds the scenes: the
- * root is `mn cl-<preset>`, the colours are the `k1..k3` and `s1..s3` classes
- * of scene.css, and a scene holds no inline style. Both kinds of scene sit in
- * a `[data-scene][data-celestial]` div, which is what this file styles, so the
- * look is the same alone and as a sky. Discreet like `moon.css`: a faint
- * watermark in light (multiplied into the page), silver light in dark.
- *
- * Motion (opt-in, `animated`): stars twinkle, meteors glide, ribbons drift;
- * never under `prefers-reduced-motion`. React only. */
+ * `northern-lights`; `day-sky` and `dawn-sky` are in celestial-day.css) and
+ * the `sky` overlay, which draws the moon or one of them over any preset.
+ * Core's `/backgrounds/celestial` builds the scenes: the root is
+ * `mn cl-<preset>`, the colours are the `k1..k3` and `s1..s3` classes of
+ * scene.css, and a scene holds no inline style. Both kinds sit in a
+ * `[data-scene][data-celestial]` div, which this file styles. Discreet like
+ * `moon.css`: a faint watermark in light, silver light in dark. Motion
+ * (opt-in, `animated`): never under `prefers-reduced-motion`. React only. */
 @import "../css/scene.css";
+@import "./celestial-day.css";
 
 @layer components {
 	/* The wash behind a celestial preset, as the moon's: two faint pools of
@@ -17,7 +16,8 @@
 	:is(
 		[data-background="eclipse"],
 		[data-background="meteor-shower"],
-		[data-background="ringed-planet"]
+		[data-background="ringed-planet"],
+		[data-background="day-sky"]
 	) > [data-layer="wash"] {
 		position: absolute;
 		inset: 0;

package/lib/components/ui/collections/data-table/data-table-items-actions.css

@@ -0,0 +1,37 @@
+/* DataTable cards and tiles: the trailing action slot (`item.Actions`,
+ * partials/layouts/data-table-item-actions.tsx). A sibling of the title, never
+ * inside its link, raised above the link's stretched `::after` (z-index 1, as
+ * the corner checkbox is) so a click on it never follows the card. At least a
+ * 44px target, at the item's end; the item keeps room for it. */
+@layer components {
+	[data-slot="data-table-item-actions"] {
+		position: absolute;
+		z-index: 1;
+		inset-inline-end: 0.25rem;
+		inset-block-start: 0.625rem;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		gap: 0.25rem;
+		min-width: 2.75rem;
+		min-height: 2.75rem;
+	}
+	/* A tile: the slot is centred on the tile, as its checkbox is. */
+	[data-slot="data-table-tiles"] [data-slot="data-table-item-actions"] {
+		inset-block-start: 50%;
+		translate: 0 -50%;
+	}
+	[data-slot="data-table-cards"][data-density="compact"]
+		> [data-slot="data-table-item"]
+		> [data-slot="data-table-item-actions"],
+	[data-slot="data-table-cards"][data-card-density="compact"]
+		> [data-slot="data-table-item"]
+		> [data-slot="data-table-item-actions"] {
+		inset-block-start: 0.375rem;
+	}
+	/* Specific enough to win over the density and tile paddings above it. */
+	[data-slot="data-table-items"]
+	[data-slot="data-table-item"]:has(> [data-slot="data-table-item-actions"]) {
+		padding-inline-end: 3.25rem;
+	}
+}

package/lib/components/ui/collections/data-table/data-table-items-chevron.css

@@ -0,0 +1,28 @@
+/* DataTable cards and tiles: the trailing chevron of a linked `item.Title`
+ * (partials/layouts/data-table-item-title.tsx), the affordance `item.Row`
+ * draws in its own row. Decorative: centred on the item at its end, under the
+ * pointer (the link's `::after` takes the click), and the item keeps room for
+ * it. An item with an `item.Actions` slot leaves it out: that slot owns the
+ * item's end. */
+@layer components {
+	[data-slot="item-chevron"][data-placement="item"] {
+		position: absolute;
+		inset-inline-end: 0.75rem;
+		inset-block-start: 50%;
+		translate: 0 -50%;
+		pointer-events: none;
+	}
+	[data-slot="data-table-items"]
+		[data-slot="data-table-item"]:has([data-placement="item"]) {
+		padding-inline-end: 2.25rem;
+	}
+	[data-slot="data-table-items"]
+		[data-slot="data-table-item"]:has(> [data-slot="data-table-item-actions"])
+		[data-placement="item"] {
+		display: none;
+	}
+	[data-slot="data-table-items"]
+		[data-slot="data-table-item"]:has(> [data-slot="data-table-item-actions"]) {
+		padding-inline-end: 3.25rem;
+	}
+}

package/lib/components/ui/collections/data-table/data-table-items-tiles.css

@@ -13,6 +13,13 @@
 		border: 1px solid var(--item-border);
 		border-radius: var(--item-radius);
 	}
+	/* A ServerTable on a phone has no panel of its own: the tile list sits at
+	 * the page gutter, in line with the heading (#2292). */
+	@media (max-width: 767.98px) {
+		[data-slot="server-table"] [data-slot="data-table-tiles"] {
+			margin-inline: 0;
+		}
+	}
 	[data-slot="data-table-tiles"] > [data-slot="data-table-item"] {
 		padding: 0.75rem 1rem;
 		min-height: 4.5rem;

package/lib/components/ui/collections/data-table/index.css

@@ -5,10 +5,14 @@
  *   data-table-items-bar.css      the list bar
  *   data-table-items-forced.css   forced colours
  *   data-table-items-tiles.css    tiles: one column, one surface
- *   data-table-items-record.css   the compact record row of a tile (item.Row) */
+ *   data-table-items-record.css   the compact record row of a tile (item.Row)
+ *   data-table-items-actions.css  the trailing action slot (item.Actions)
+ *   data-table-items-chevron.css  the chevron of a linked item.Title */
 @import "./data-table-items.css";
 @import "./data-table-items-compact.css";
 @import "./data-table-items-bar.css";
 @import "./data-table-items-forced.css";
 @import "./data-table-items-tiles.css";
 @import "./data-table-items-record.css";
+@import "./data-table-items-actions.css";
+@import "./data-table-items-chevron.css";