@nxgt/material 3.74.0 → 3.75.0

package/CHANGELOG.md

@@ -1,5 +1,53 @@
 # @nxgt/material
 
+## 3.75.0
+
+### Minor Changes
+
+- [#2266](https://github.com/softistx/nxgt-material/pull/2266) [`fdf0a12`](https://github.com/softistx/nxgt-material/commit/fdf0a1277626f6cada5786ec6e3adab52c6ad420) Thanks [@SteveGT96](https://github.com/SteveGT96)! - feat(table): `DataTable` and `ServerTable` cards and tiles get a trailing action slot, `item.Actions`. It renders outside the card's title link, at its end, in a target of at least 44px raised above the link's overlay, so a primary row action (a button) stays focusable after the link and a click on it does not follow the card. Fixes [#2252](https://github.com/softistx/nxgt-material/issues/2252).
+
+- [#2273](https://github.com/softistx/nxgt-material/pull/2273) [`ea6b623`](https://github.com/softistx/nxgt-material/commit/ea6b623ab39489d7cdb8cc1f8722c9ca4af28ca6) Thanks [@SteveGT96](https://github.com/SteveGT96)! - feat(celebration): add `Celebration`, a one-shot confetti burst that plays once on mount or when `trigger` changes, never loops, uses theme tokens, is `aria-hidden` and renders nothing under `prefers-reduced-motion`.
+
+- [#2289](https://github.com/softistx/nxgt-material/pull/2289) [`36773a3`](https://github.com/softistx/nxgt-material/commit/36773a384ec64ad881ed5e7bf2c548124a8a3d6b) Thanks [@SteveGT96](https://github.com/SteveGT96)! - fix(chat): `ChatThreadHeader` no longer clips a long title with no way to read it. The title wraps onto two lines and both title and subtitle carry their full text in a `title` attribute; `titleText` and `subtitleText` give it for a node, as `ChatConversationItem` does. Fixes [#2285](https://github.com/softistx/nxgt-material/issues/2285).
+
+- [#2302](https://github.com/softistx/nxgt-material/pull/2302) [`df76986`](https://github.com/softistx/nxgt-material/commit/df7698605638ee0bcac46e7c6528af0e8ddb3b0c) Thanks [@SteveGT96](https://github.com/SteveGT96)! - fix(chat): `ChatToolActivity` no longer clips a long tool name with an ellipsis and no way to read it. The name wraps onto two lines and carries its full text in a `title` attribute; `nameText` gives it when `name` is a node, as `ChatThreadHeader` does. Fixes [#2299](https://github.com/softistx/nxgt-material/issues/2299).
+
+- [#2301](https://github.com/softistx/nxgt-material/pull/2301) [`6c0a89a`](https://github.com/softistx/nxgt-material/commit/6c0a89a144ddd7031104f5d6c6060075e710a1d8) Thanks [@SteveGT96](https://github.com/SteveGT96)! - fix(chat): `ChatConversationItem` keeps its timestamp whole in a narrow list pane, also when it sits in an auto-sized grid track (a `ul` or `li` around it): the item no longer lends its title's width to its parent (`contain: inline-size`), the timestamp never shrinks or wraps, and a long title clamps with an ellipsis. The Vue item gains `titleText` and a `title` attribute on the clipped title. `ChatConversationItem` no longer has an intrinsic width: it fills its container (`w-full`), so a shrink-to-fit parent (`w-fit`, `max-content`, an inline-flex wrapper, a popover sized to its content) must give it a width. Fixes [#2300](https://github.com/softistx/nxgt-material/issues/2300).
+
+- [#2291](https://github.com/softistx/nxgt-material/pull/2291) [`7ba8e5d`](https://github.com/softistx/nxgt-material/commit/7ba8e5d04468dede6eb6cc9f0deec15c6677cd2c) Thanks [@SteveGT96](https://github.com/SteveGT96)! - feat(countdown-timer): `CountdownTimer` gets `size="lg"` (56 px high, a 30 px clock in semibold tabular figures, a larger ring and warning icon) for a countdown that is the focal point of a screen. The timer role and the polite announcement are unchanged. Fixes [#2221](https://github.com/softistx/nxgt-material/issues/2221).
+
+- [#2298](https://github.com/softistx/nxgt-material/pull/2298) [`f0490a2`](https://github.com/softistx/nxgt-material/commit/f0490a2d8843d34a1c38015da33ab56c1ba5a8f8) Thanks [@SteveGT96](https://github.com/SteveGT96)! - feat(table): a `DataTable` or `ServerTable` card or tile built on `item.Title` with `getRowHref` (or `onRowClick`) draws the same discreet, decorative trailing chevron as `item.Row`, ListTile and the StatCard href variant, with no change for unlinked cards. `Title` takes `chevron={false}` to opt out, as `Row` does; a card with an `item.Actions` slot leaves it out. Fixes [#2287](https://github.com/softistx/nxgt-material/issues/2287).
+
+- [#2282](https://github.com/softistx/nxgt-material/pull/2282) [`d6681e1`](https://github.com/softistx/nxgt-material/commit/d6681e1cf5322f6806e5333e0872fad91e510a83) Thanks [@SteveGT96](https://github.com/SteveGT96)! - feat(backgrounds): `Background` gets two daytime skies, `preset="day-sky"` and `preset="dawn-sky"`, and `sky="day-sky"` / `sky="dawn-sky"` lays them over any preset, for an app that alternates night and day phases. A thin-outlined sun with rays and a halo (low over a horizon glow at dawn) and soft clouds in the top band, never in the clear middle; `moon.phase` is the cloud cover, `motif.density` and `motif.size` as the other skies, `intensity` fades the scene, the tones follow the theme in light and dark, every shape stays at half opacity or less so body text keeps AA contrast over it, and `animated` drifts the clouds except under `prefers-reduced-motion`. In core, `CelestialPreset` and `SkyPreset` gain the two ids (the registry stays at 52 presets, both reserved for `/backgrounds/celestial`), and themes may name them as `background.preset` or `background.sky`. Fixes [#2219](https://github.com/softistx/nxgt-material/issues/2219).
+
+- [#2290](https://github.com/softistx/nxgt-material/pull/2290) [`4100da3`](https://github.com/softistx/nxgt-material/commit/4100da3aa943b12013469a8bade7a09ed8e05f07) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `@nxgt/material/illustrations/game` gains five scenes: `villager` and `witch` pictograms, `dawn`, `graveyard` and `day-village`, themed and dark-mode aware like the others. Fixes [#2218](https://github.com/softistx/nxgt-material/issues/2218).
+
+- [#2262](https://github.com/softistx/nxgt-material/pull/2262) [`2c55734`](https://github.com/softistx/nxgt-material/commit/2c557340b144e481aeac3b718869b1d5d616bb18) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `SecretCard` and `SecretCardProps` take `size` ([#2258](https://github.com/softistx/nxgt-material/issues/2258)): `size="sm"` is a compact card for a phone, where the pattern and the back face drop their 6rem minimum height and the card's padding and gap tighten (`data-size="sm"`). `default` is unchanged. Nothing to migrate; a consumer's `[&_[data-slot=secret-card-back]]:min-h-0` override can go.
+
+- [#2278](https://github.com/softistx/nxgt-material/pull/2278) [`cf3cf3b`](https://github.com/softistx/nxgt-material/commit/cf3cf3b6fc51e18639ffbb02193ddf44aace18a8) Thanks [@SteveGT96](https://github.com/SteveGT96)! - feat(table): `ServerTable` takes `surface="none"` for a table placed in a Card or a page section: it draws no background and no padding of its own, so the screen shows one surface, not a frame inside a frame. The default, `'card'`, is unchanged. Fixes [#2267](https://github.com/softistx/nxgt-material/issues/2267).
+
+### Patch Changes
+
+- [#2263](https://github.com/softistx/nxgt-material/pull/2263) [`7a7075c`](https://github.com/softistx/nxgt-material/commit/7a7075c79456331a4c3efa723ddf730030727dd5) Thanks [@SteveGT96](https://github.com/SteveGT96)! - fix(chip-group): `ChipGroupField` prints a disabled option's `disabledReason` below the whole group ("Label: reason", still tied to the chip by `aria-describedby`) instead of inside the chip row, so a reason no longer widens its item or pushes the next chips onto a new line at phone width. The chips wrap as if no reason were set. The reason's `data-slot="chip-group-reason"` span now sits in a `chip-group-reasons` block after the chips, and `chip-group-cell` wrappers are gone. Fixes [#2254](https://github.com/softistx/nxgt-material/issues/2254).
+
+- [#2271](https://github.com/softistx/nxgt-material/pull/2271) [`93486bf`](https://github.com/softistx/nxgt-material/commit/93486bf7904f4e817843583eda934c9d2ad0565d) Thanks [@SteveGT96](https://github.com/SteveGT96)! - Fix the `PhoneField` country code button, which was 32px high on a phone: on a coarse pointer its own box is now 44px high (the pill stays 32px painted and the field keeps its height), so a tap-target check passes ([#2256](https://github.com/softistx/nxgt-material/issues/2256)).
+
+- [#2268](https://github.com/softistx/nxgt-material/pull/2268) [`5db7722`](https://github.com/softistx/nxgt-material/commit/5db7722e589c91ff00e13b651d3e329e5f37f6ca) Thanks [@SteveGT96](https://github.com/SteveGT96)! - fix(quantity-field): size the unit part to its longest unit label instead of a fixed 7rem, capped at 55% of the row, with an ellipsis and a title beyond it ([#2253](https://github.com/softistx/nxgt-material/issues/2253)).
+
+- [#2274](https://github.com/softistx/nxgt-material/pull/2274) [`d5bb0fb`](https://github.com/softistx/nxgt-material/commit/d5bb0fb5fdaf0f63c69403e0ec4f3895284eed30) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `ChangeHistory`: the collapsed list of changed fields no longer clips with an ellipsis. The preview wraps, and a screen reader hears the names hidden behind the "+N" ([#2257](https://github.com/softistx/nxgt-material/issues/2257)).
+
+- [#2286](https://github.com/softistx/nxgt-material/pull/2286) [`2b4945a`](https://github.com/softistx/nxgt-material/commit/2b4945af149b79eb80acda1a8c31df831dfde15d) Thanks [@SteveGT96](https://github.com/SteveGT96)! - fix(server-table): the phone list bar's start slot keeps the room of its whole content (`min-w-fit` instead of `min-w-24`), so the visible "Select all" label (`data-slot="select-checkbox-text"`) is no longer clipped with an ellipsis and no `title` (a regression of 3.73 that `expectNoTextOverflow` flagged); a wider end group wraps to a row of its own instead. The label itself no longer truncates: in a row too narrow for it, it wraps. Fixes [#2284](https://github.com/softistx/nxgt-material/issues/2284).
+
+- [#2295](https://github.com/softistx/nxgt-material/pull/2295) [`4c27722`](https://github.com/softistx/nxgt-material/commit/4c2772271ba96429a6bdee77d5499dbf0d46dacf) Thanks [@SteveGT96](https://github.com/SteveGT96)! - fix(server-table): on a phone a `ServerTable` draws no surface and no padding of its own, and its tile list sits at the page gutter (no 4px margin), in line with the page heading. The layout's gutter was stacked with the table's panel and the tile list's inset, which put the content about 45px from the edge, a card in a card. From 768px the table is unchanged. A `ServerTable` outside a layout that adds a gutter now sits flush with the screen edge below 768px, so the caller wraps it in its own padding. Fixes [#2292](https://github.com/softistx/nxgt-material/issues/2292).
+
+- [#2265](https://github.com/softistx/nxgt-material/pull/2265) [`3533fad`](https://github.com/softistx/nxgt-material/commit/3533fadb134865dac33b975f0a047af75ab1f61e) Thanks [@SteveGT96](https://github.com/SteveGT96)! - fix(number-field): the +/− steppers no longer open their tooltip when a Sheet or Dialog moves its initial focus onto them. The tooltip opens on hover and on keyboard focus-visible only; the steppers stay tabbable and keep their names. `QuantityField` shares the fix ([#2255](https://github.com/softistx/nxgt-material/issues/2255)).
+
+- [#2279](https://github.com/softistx/nxgt-material/pull/2279) [`eddd385`](https://github.com/softistx/nxgt-material/commit/eddd385c9279e1b902c44ff36e8755c5df9f29ee) Thanks [@SteveGT96](https://github.com/SteveGT96)! - fix(tabs): the overflow scroll buttons of `Tabs`, `TabsNav` and the segmented nav no longer cover the tab labels at phone width. On a side with a button, the list's edge mask is now transparent under the button (2rem on a fine pointer, 3rem on a coarse one, where the button stays 44px wide) and fades in over 1rem beyond it, and a selected or focused tab is scrolled at least 4rem clear of the edge. The list keeps its box, so nothing shifts when a button appears. Fixes [#2276](https://github.com/softistx/nxgt-material/issues/2276).
+
+- [#2281](https://github.com/softistx/nxgt-material/pull/2281) [`9976d09`](https://github.com/softistx/nxgt-material/commit/9976d094e552be2e3bd350526a1a09a387bb06f9) Thanks [@SteveGT96](https://github.com/SteveGT96)! - fix(themes/teal): the teal preset sets `neutrals: 'tinted'`, so its dark `--background` follows the neutral hue 190 instead of the shared navy night (`oklch(0.15 0.026 273)`). Text fields, date fields and tab strips no longer show navy through hue-190 cards. The light page is tinted at hue 190 too; every other preset's dark page is unchanged. Fixes [#2275](https://github.com/softistx/nxgt-material/issues/2275).
+- Updated dependencies [[`d6681e1`](https://github.com/softistx/nxgt-material/commit/d6681e1cf5322f6806e5333e0872fad91e510a83), [`4100da3`](https://github.com/softistx/nxgt-material/commit/4100da3aa943b12013469a8bade7a09ed8e05f07), [`9976d09`](https://github.com/softistx/nxgt-material/commit/9976d094e552be2e3bd350526a1a09a387bb06f9)]:
+  - @nxgt/material-core@0.48.0
+
 ## 3.74.0
 
 ### Minor Changes

package/README.md

@@ -208,8 +208,8 @@ reads `duotone.svg`, the file that exists (it used to ask for the missing
 | `@nxgt/material/illustrations` | State illustrations: `Illustration` (`scene`: `empty`, `no-results`, `not-found`, `error`, `offline`, `success`, `welcome`, `forbidden`, `maintenance`, `invitation`, `sign-in`, `empty-inbox`, or an id of the `scenes` table it is given; `size`, `title`, `animated`, `hero`, `satellites`, `iconStyle`, `tone`, `duotone`) draws a hero icon on a Material 3 Expressive plate with satellites, from the Font Awesome sprites your app serves (no icon artwork ships); `IllustrationDefaults` (`icons`: `'suggested'` or a table, `iconStyle`, `sets`) opts a subtree's `EmptyState` and `ErrorState` into them; `ILLUSTRATION_SCENES`, `SUGGESTED_ICONS` and the types re-exported from `@nxgt/material-core/illustrations` (`SceneRow`, `SceneTable`), plus `IconStyleInput` and `IconStyleRef` (the `iconStyle` types: `{ family?, type? }` or one of the 37 sprite file names), `SceneId`, `RegisteredScene` and `IllustrationSceneRegistry`, the scene id type that an imported set's ids widen. `unauthorized` and `maintenance` states draw the `forbidden` and `maintenance` scenes. `EmptyState`, `ErrorState` and the `DataTable` empty row (`emptyIllustration`) also take `illustration` as a scene id or `true`. Colours are theme tones in `styles.css`; its own entry ([illustrations guide](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/illustrations.md)) |
 | `@nxgt/material/illustrations/health` | The health scenes: `HEALTH_SCENES` (`patient-record`, `consultation`, `appointment`, `lab-sample`, `prescription`, `vaccination`, `hospitalisation`, `emergency`, `no-patients`, `lab-results`), `HEALTH_SCENE_IDS`, `HEALTH_SUGGESTED_ICONS`, `HealthScene`; register it with `<IllustrationDefaults sets={[HEALTH_SCENES]}>` so `<Illustration scene="patient-record" />` and `<EmptyState illustration="no-patients" />` work (or pass `scenes={HEALTH_SCENES}` to one `Illustration`); importing it adds the ids to `SceneId`. An app that does not import it does not carry it |
 | `@nxgt/material/illustrations/education` | The education scenes: `EDUCATION_SCENES` (`classroom`, `homework`, `exam-grades`, `timetable`, `attendance`, `enrolment`, `library`, `graduation`, `no-students`, `report-card`), `EDUCATION_SCENE_IDS`, `EDUCATION_SUGGESTED_ICONS`, `EducationScene`; register it with `<IllustrationDefaults sets={[EDUCATION_SCENES]}>` so `<Illustration scene="classroom" />` and `<EmptyState illustration="no-students" />` work (or pass `scenes={EDUCATION_SCENES}` to one `Illustration`); importing it adds the ids to `SceneId`. An app that does not import it does not carry it |
-| `@nxgt/material/illustrations/game` | The game scenes, for a game, quiz, community or event app: `GAME_SCENES` (`night-sky`, `village`, `seer`, `healer`, `archer`, `cupid`, `wolf`, `victory`, `empty-table`, `waiting-players`, `connection-lost`), `GAME_SCENE_IDS`, `GAME_SUGGESTED_ICONS`, `GameScene`; register it with `<IllustrationDefaults sets={[GAME_SCENES]}>` so `<Illustration scene="village" />` and `<EmptyState illustration="empty-table" />` work (or pass `scenes={GAME_SCENES}` to one `Illustration`); importing it adds the ids to `SceneId`. Pass `title` for an accessible name, otherwise the picture is decorative (`aria-hidden`). An app that does not import it does not carry it |
-| `@nxgt/material/backgrounds` | Background presets: `Background` (a superset of the `/components` one: `preset`, `animated`, `grain`, `seed`, `fill`, `motif`, and for `preset="icons"` `icons`, `iconStyle` and `iconMotif`), `AVAILABLE_BACKGROUND_PRESETS` and `AvailableBackgroundPreset` (the 50 ids `Background` draws), `MoonOptions` (the `moon` prop), `IconMotifOptions` (`iconMotif`, with `quiet`: a band the icons fade out of for text), `IconLayout`, `IconQuiet`, `SkyPreset` and `CelestialPreset` (the `sky` ids), `IconsInput` (`icons`), `IconStyleInput` and `IconStyleRef` (`iconStyle`: `{ family?, type? }` or one of the 37 sprite file names, completed by the editor, any other string is a type error), `sky` (`'moon'` or a celestial preset over any preset, also read from the theme's `background.sky`; the four celestial presets and `sky` share the opt-in `@nxgt/material/backgrounds/celestial.css`, also in `backgrounds.css`), `MOTIF_SHAPES_ALL` (the 25 motif shapes), the `MotifLayout` type, the types and tables (`BACKGROUND_PRESETS`, `BACKGROUND_TONES`, ...) re-exported from `@nxgt/material-core/backgrounds`; its own entry, with an opt-in stylesheet ([backgrounds guide](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/backgrounds.md)) |
+| `@nxgt/material/illustrations/game` | The game scenes, for a game, quiz, community or event app: `GAME_SCENES` (`night-sky`, `dawn`, `village`, `day-village`, `graveyard`, `seer`, `healer`, `archer`, `cupid`, `wolf`, `villager`, `witch`, `victory`, `empty-table`, `waiting-players`, `connection-lost`), `GAME_SCENE_IDS`, `GAME_SUGGESTED_ICONS`, `GameScene`; register it with `<IllustrationDefaults sets={[GAME_SCENES]}>` so `<Illustration scene="village" />` and `<EmptyState illustration="empty-table" />` work (or pass `scenes={GAME_SCENES}` to one `Illustration`); importing it adds the ids to `SceneId`. Pass `title` for an accessible name, otherwise the picture is decorative (`aria-hidden`). An app that does not import it does not carry it |
+| `@nxgt/material/backgrounds` | Background presets: `Background` (a superset of the `/components` one: `preset`, `animated`, `grain`, `seed`, `fill`, `motif`, and for `preset="icons"` `icons`, `iconStyle` and `iconMotif`), `AVAILABLE_BACKGROUND_PRESETS` and `AvailableBackgroundPreset` (the 52 ids `Background` draws), `MoonOptions` (the `moon` prop), `IconMotifOptions` (`iconMotif`, with `quiet`: a band the icons fade out of for text), `IconLayout`, `IconQuiet`, `SkyPreset` and `CelestialPreset` (the `sky` ids), `IconsInput` (`icons`), `IconStyleInput` and `IconStyleRef` (`iconStyle`: `{ family?, type? }` or one of the 37 sprite file names, completed by the editor, any other string is a type error), `sky` (`'moon'` or a celestial preset over any preset, also read from the theme's `background.sky`; the four celestial presets and `sky` share the opt-in `@nxgt/material/backgrounds/celestial.css`, also in `backgrounds.css`), `MOTIF_SHAPES_ALL` (the 25 motif shapes), the `MotifLayout` type, the types and tables (`BACKGROUND_PRESETS`, `BACKGROUND_TONES`, ...) re-exported from `@nxgt/material-core/backgrounds`; its own entry, with an opt-in stylesheet ([backgrounds guide](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/backgrounds.md)) |
 | `@nxgt/material/editor` | The rich text editor: `DocumentEditor` and `DocumentEditorFormField` (with an `outline`, a block handle, focus mode, find and replace, `onUpload`, `onAssist` and `comments`), `CompactEditor` and `CompactEditorFormField`, `RichChatComposer`, `EditorRoot` and the parts (`EditorToolbar`, `EditorContent`, `EditorFooter`, `EditorAssistantPanel`, ...), `useEditor`, the kits (`documentKit`, `compactKit`, `chatKit`, `formNodesKit`), `withFeatures` / `withoutFeatures` and `defineFeature`, and the converters `toHtml`, `toJson`, `toMarkdown`, `fromMarkdown` and `looksLikeMarkdown` — **its own entry, and not in the barrel above**. **Client-only**: import it from a `'use client'` file; `/editor/viewer` is the server-safe one. The `.nxgt-prose` page styles ship in `styles.css` with the component CSS ([DocumentEditor](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/rich-widgets.md#documenteditor)) |
 | `@nxgt/material/editor/viewer` | `RichTextViewer`: shows a saved document (HTML, JSON or Markdown) read-only, **server-safe**, with no editor instance and no `'use client'` ([RichTextViewer](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/rich-widgets.md#richtextviewer)) |
 | `@nxgt/material/code-editor` | `CodeEditor`, `CodeEditorFormField` and `CodeDiff` on Monaco, their theme presets (`theme`: `'app'`, `'moonlight'`, `'soft'`, `CODE_THEMES`), `defineCodeTheme` for your own, the `CodeMarker` and `CodeMarkerSeverity` types of the `markers` prop, `CodeEditorHandle` (its `ref`), `CodeFile` (its `files`), and `configureMonaco` to bundle Monaco instead of loading it from the CDN. **Client-only**: import it from a `'use client'` file. They are no longer exported from the barrels (removed in 3.0; [guide](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/code-editor.md)) |
@@ -679,7 +679,7 @@ Not components: what the stylesheet gives any element.
 | Preview | Component | What it does | @nxgt/material-vue |
 | --- | --- | --- | --- |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-table-filter-lists-datatable.webp" width="120" alt="DataTable"> | [`DataTable`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-table-filter-and-lists.md#datatable), `DataTableColumnHeader`, `DataTablePagination`, `DataTableServerFooter`, `DataTableViewOptions` | TanStack Table v9 with sorting, filtering, selection, expandable rows, pagination or load-more, column visibility, skeleton rows while loading and your own empty state — or one server page at a time, with controlled sorting and selection, cursor Previous / Next links and row links. On a phone it keeps its header row and scrolls sideways in a keyboard-reachable region; the page does not. Or cards and tiles instead of the table (`layout`, `renderCard`, `renderTile`), and `layout={{ phone: 'tiles', wide: 'table' }}` for tiles on a phone ([cards and tiles guide](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/cards-and-tiles.md)). Long lists render only the rows in view (`virtual`). | `DataTable`, `DataTableColumnHeader`, `DataTablePagination`, `DataTableServerFooter`, `DataTableViewOptions` |
-| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-table-filter-lists-servertable.webp" width="120" alt="ServerTable"> | [`ServerTable`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-table-filter-and-lists.md#servertable), `createSorting`, `tableFilters`, `defineFilterModel`, `parseFilterQuery`, `serializeFilterQuery`, `paramsFromQuery`, `serverPagination`… | A server-mode `DataTable` driven by the URL's search params, for any router: the Filter in its top band with the page's title (optional), description and actions, the sort, forward cursor paging, a selection reset on a new query, the empty page (a scene and an action for "nothing yet", the filters as removable chips), a compact band (`bandDensity`), icon-only Previous / Next (`pageControls`, 44px targets on a touch screen, focus kept while a page loads), actions that stay on the search's row on a phone (`bandActions`), a bulk bar that reserves no row until a selection, bulk actions with `appliesTo` that count and run only the selected rows they apply to (hidden at zero), an accessible `name`, a `max` rows with a notice, and `focusTrigger()` to give the focus back after a dialog, a `filterRef` to focus the Filter, a page past the last (rows deleted) that says so and links back to the first, an error state with Retry for a failed fetch (`error`, `onRetry`), and one count announced. | `ServerTable`, `createSorting`, `tableFilters`, `serverPagination` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-table-filter-lists-servertable.webp" width="120" alt="ServerTable"> | [`ServerTable`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-table-filter-and-lists.md#servertable), `createSorting`, `tableFilters`, `defineFilterModel`, `parseFilterQuery`, `serializeFilterQuery`, `paramsFromQuery`, `serverPagination`… | A server-mode `DataTable` driven by the URL's search params, for any router: the Filter in its top band with the page's title (optional), description and actions, the sort, forward cursor paging, a selection reset on a new query, the empty page (a scene and an action for "nothing yet", the filters as removable chips), a compact band (`bandDensity`), icon-only Previous / Next (`pageControls`, 44px targets on a touch screen, focus kept while a page loads), actions that stay on the search's row on a phone (`bandActions`), `surface="none"` to sit in a Card with no frame of its own, a bulk bar that reserves no row until a selection, bulk actions with `appliesTo` that count and run only the selected rows they apply to (hidden at zero), an accessible `name`, a `max` rows with a notice, and `focusTrigger()` to give the focus back after a dialog, a `filterRef` to focus the Filter, a page past the last (rows deleted) that says so and links back to the first, an error state with Retry for a failed fetch (`error`, `onRetry`), and one count announced. | `ServerTable`, `createSorting`, `tableFilters`, `serverPagination` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-table-filter-lists-rowmenu.webp" width="120" alt="RowMenu"> | [`RowMenu`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-table-filter-and-lists.md#rowmenu), `RowMenuTrigger`, `rowMenuColumn` | A row's "..." button named after its row ("Actions for Ada"; 44px on touch, 36px with a mouse from `md`), its menu aligned to the end with the destructive item last and 44px items on touch, and a column helper for `DataTable` and `ServerTable` under a hidden but named "Actions" header; focus returns to the button, also from a dialog an item opened; `useRowMenuFocus()` / `focusRowMenu(rowId)` hands it back to one row's button after an async action, a toast or a later dialog. | — |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-table-filter-lists-recordactionsmenu.webp" width="120" alt="RecordActionsMenu"> | [`RecordActionsMenu`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-table-filter-and-lists.md#recordactionsmenu), `useRecordActions` | A record's archive, restore and delete menu over `RowMenu`: Archive runs at once with an Undo toast that stays until dismissed, Restore runs at once, Delete permanently (archived records only) always asks and keeps a refusal in its locked dialog; `can` hides what is not allowed (and the whole menu when nothing is), `send` does the action, `onDone` follows it, `items` / `children` add your own entries, `messages` renames the words; `archivePolicy="confirm"` asks before archiving (no Undo), `consequence` notes what an action entails, `successAction` adds a toast action, and `ActionRefusal` / `isActionRefusal` carry a refusal's details and action. | — |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-table-filter-lists-listempty.webp" width="120" alt="ListEmpty"> | [`ListEmpty`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-table-filter-and-lists.md#listempty) | A list's empty page: nothing yet (a title, or a scene, a line and an action), or nothing matches with what narrows it and a way out (a button or a link); its title is an `h2` (`headingLevel`). | `ListEmpty` |
@@ -718,7 +718,7 @@ Not components: what the stylesheet gives any element.
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/navigation-layout-steps.webp" width="120" alt="Steps"> | [`Steps`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/navigation-and-layout.md#steps), `StepsItem` | Numbered editorial steps that stay visible on every breakpoint. | `Steps`, `StepsItem` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/navigation-layout-hero.webp" width="120" alt="Hero"> | [`Hero`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/navigation-and-layout.md#hero) | Landing band with eyebrow, title, supporting copy and actions. | `Hero` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/navigation-layout-doc.webp" width="120" alt="Doc"> | [`Doc`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/navigation-and-layout.md#doc), `DocPage`, `DocTopbar`, `DocSidebar`, `DocToc`, `DocPager`, `DocSearch`, `DocChildCards`, `DocSeeAlso`, `DocEmpty`, `DocProgress` | Documentation site shell: sidebar from `md`, TOC rail from `xl`. Reading bar, copy-page / markdown, child cards, see also, and a 404 slot. Storybook `UI/Doc/Api` composes an API page from `DocPage`, `AnchorHeading`, `ApiOperation`, `ParamTable` and `CodeGroup`. | `Doc` (same parts) |
-| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/navigation-layout-background.webp" width="120" alt="Background"> | [`Background`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/navigation-and-layout.md#background) | Full-viewport gradient with blurred colour blobs; centres its children; 50 presets on `/backgrounds`, and a `sky` overlay. | `Background` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/navigation-layout-background.webp" width="120" alt="Background"> | [`Background`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/navigation-and-layout.md#background) | Full-viewport gradient with blurred colour blobs; centres its children; 52 presets on `/backgrounds`, and a `sky` overlay. | `Background` |
 | — | [`NavigationRail`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/navigation-and-layout.md#navigationrail) | Placeholder: renders an empty rail container and takes no props yet. | `NavigationRail` |
 
 ### Overlays & menus
@@ -741,6 +741,7 @@ Not components: what the stylesheet gives any element.
 | Preview | Component | What it does | @nxgt/material-vue |
 | --- | --- | --- | --- |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/feedback-status-alert.webp" width="120" alt="Alert"> | [`Alert`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/feedback-and-status.md#alert) | Callout with the tone's icon (or yours, or none with `icon={null}`), title, description and `actions` (buttons or links under the text) in seven tones; it spans the row in a form grid. | `Alert` |
+| | [`Celebration`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/feedback-and-status.md#celebration) | One-shot confetti burst for a win or a reveal: plays once on mount or when `trigger` changes, never loops, theme-token colours, `aria-hidden`, nothing under reduced motion. | — (later, #2272) |
 | | [`Moment`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/feedback-and-status.md#moment) | Full-screen one-off announcement (a player is eliminated, a role revealed): a modal dialog named by its title, focus moved in and restored, dismissed by Escape, a tap, its action or `duration`, tone-coloured, with a fade and pop-in that stop under reduced motion. | — (later) |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/feedback-status-stalenotice.webp" width="120" alt="StaleNotice"> | [`StaleNotice`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/feedback-and-status.md#stalenotice) | Warning that another write came first: keeps what was typed, takes the focus and scrolls into view on mount, and offers one "Reload the record" action (`onReload`, `busy`, `message`), never an overwrite. | — (later) |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/feedback-status-banner.webp" width="120" alt="Banner"> | [`Banner`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/feedback-and-status.md#banner) | Dismissible info / success / warning / error banner with an action, in the look of `Alert` (light surface, start bar); it spans the row in a form grid. | `Banner` |
@@ -854,10 +855,10 @@ which is private: adding it needs a GitHub account with access to it.
 | Part | What it does |
 | --- | --- |
 | skill `use-nxgt-material` | an index that picks the component by need and wires imports and `styles.css`; its references cover the tokens and themes, forms, i18n, tests by role, SSR and the other subpaths, read from these docs in `node_modules/@nxgt/material/docs/` |
-| skill `design-screens` | the library's visual language for a screen (hierarchy, rhythm, tones, surfaces, states, phone, dark, motion) and an 11-criteria grid to score a screen out of 5 |
+| skill `design-screens` | the library's visual language for a screen (hierarchy, rhythm, tones, surfaces, states, phone, dark, motion) and a 12-criteria grid to score a screen out of 5 |
 | skill `screen-recipes` | whole screens to start from (a home dashboard, a list with a detail sheet, forms and dialogs, tables and settings, a dense record page, a status board and an occupancy board), each the code of a tested `Guides/Recipes/<Name>` story |
 | agent `screen-builder` | builds a page or a form from the catalogue, with tests by role and name and an accessibility check, then looks at 360 and 1440 px screenshots in light and dark and fixes until the grid reads 4 everywhere |
-| agent `design-reviewer` | read-only: scores a screen's screenshots on the same 11 criteria and returns the fixes ranked, each with the component and prop |
+| agent `design-reviewer` | read-only: scores a screen's screenshots on the same 12 criteria and returns the fixes ranked, each with the component and prop |
 | skill `build-a-theme` + agent `theme-builder` | the app's own theme with `defineTheme`: seeds, tones, background and icon motif, generation, provider and picker; checks the AA contrast of the generated tokens in light and dark and looks at key screens |
 | skill `compose-scenes` + agent `scene-composer` | illustrations (domain scene sets), backgrounds and icon sprites for empty, error, auth, hero and celebration moments; checks text contrast over backgrounds, reduced motion, dark, Free against Pro sprites and the Font Awesome Pro licence rule |
 | skill `design-print-documents` + agent `print-designer` | PDF and print documents with `@nxgt/material/print`: a school report card, a prescription and a receipt as recipes; checks A4 margins, page breaks, figures, black-and-white legibility, fonts and accessibility |

package/dist/{background-D1gC4m2R.js → background-Q4Ek3rNy.js}

@@ -64,7 +64,9 @@ var j = [
 	"eclipse",
 	"meteor-shower",
 	"ringed-planet",
-	"northern-lights"
+	"northern-lights",
+	"day-sky",
+	"dawn-sky"
 ], F = (e) => P.includes(e), I = [
 	...j,
 	...M,

package/dist/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/dist/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/dist/backgrounds.js

@@ -1,3 +1,3 @@
-import { r as e, t } from "./background-D1gC4m2R.js";
+import { r as e, t } from "./background-Q4Ek3rNy.js";
 import { BACKGROUND_INTENSITIES as n, BACKGROUND_PRESETS as r, BACKGROUND_TONES as i, MOTIF_SHAPES as a, MOTIF_SHAPES_ALL as o, SHIPPED_BACKGROUND_PRESETS as s } from "@nxgt/material-core/backgrounds";
 export { e as AVAILABLE_BACKGROUND_PRESETS, n as BACKGROUND_INTENSITIES, r as BACKGROUND_PRESETS, i as BACKGROUND_TONES, t as Background, a as MOTIF_SHAPES, o as MOTIF_SHAPES_ALL, s as SHIPPED_BACKGROUND_PRESETS };

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

package/dist/components/ui/display/secret-card/secret-card.css

@@ -1,4 +1,4 @@
-/* SecretCard: a card whose secret face is not rendered until it is revealed.
+/* SecretCard (`data-size="sm"` is the compact card): a card whose secret face is not rendered until it is revealed.
  * It carries `data-tone`, so the tone's tokens resolve on it. The hidden face
  * is a quiet diagonal pattern in the tone's ring colour. The card's border is
  * that colour too (set by a utility class on the Card, which wins over the
@@ -40,6 +40,10 @@
 		font-weight: 600;
 		user-select: text;
 	}
+	.nxgt-secret-card[data-size="sm"] [data-slot="secret-card-pattern"],
+	.nxgt-secret-card[data-size="sm"] [data-slot="secret-card-back"] {
+		min-height: 0;
+	}
 	.nxgt-secret-card [data-slot="secret-card-actions"] {
 		flex-wrap: wrap;
 		gap: 0.5rem;

package/dist/components/ui/feedback/celebration/celebration.css

@@ -0,0 +1,49 @@
+/* Celebration: a one-shot burst of confetti. Each piece is a span that flies
+ * out, falls and fades once (`animation-iteration-count: 1`, `forwards`: it
+ * never loops). Colours are theme tokens; the layer ignores the pointer.
+ * Under prefers-reduced-motion the component renders nothing, and
+ * reduced-motion.css ends any animation of a `data-slot` element anyway. */
+@layer components {
+	.nxgt-celebration {
+		position: fixed;
+		inset: 0;
+		z-index: 60;
+		overflow: hidden;
+		pointer-events: none;
+	}
+	.nxgt-celebration-piece {
+		position: absolute;
+		left: 50%;
+		top: 45%;
+		width: 0.5rem;
+		height: 0.9rem;
+		border-radius: 1px;
+		background-color: var(--nxgt-celebration-color);
+		animation: nxgt-celebration-burst var(--nxgt-celebration-duration, 2400ms)
+			var(--nxgt-ease-effects, ease-out) var(--nxgt-celebration-delay, 0ms) 1
+			both;
+	}
+}
+
+@keyframes nxgt-celebration-burst {
+	0% {
+		opacity: 1;
+		transform: translate(0, 0) rotate(0deg);
+	}
+	35% {
+		opacity: 1;
+		transform: translate(
+				calc(var(--nxgt-celebration-x) * 0.7),
+				var(--nxgt-celebration-up)
+			)
+			rotate(calc(var(--nxgt-celebration-spin) * 0.4));
+	}
+	100% {
+		opacity: 0;
+		transform: translate(
+				var(--nxgt-celebration-x),
+				var(--nxgt-celebration-down)
+			)
+			rotate(var(--nxgt-celebration-spin));
+	}
+}

package/dist/components/ui/feedback/feedback.css

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