@nxgt/material 3.81.0 → 3.83.0

package/dist/{use-heading-spy-BgyA6SJl.js → use-heading-spy-gDNtK1sU.js}

@@ -1,5 +1,5 @@
 import { t as e } from "./utils-BLfntITJ.js";
-import { a as t, c as n, d as r, i, n as a, r as o, t as s, u as c } from "./alert-dialog-DOZ0SfQs.js";
+import { a as t, c as n, d as r, i, n as a, r as o, t as s, u as c } from "./alert-dialog-DXLJ4AZP.js";
 import { a as l } from "./button-CSKUtMI3.js";
 import { i as u } from "./translate-material-D4rn5UaQ.js";
 import { t as d } from "./use-material-translation-DYrfV_JJ.js";

package/docs/README.md

@@ -26,7 +26,7 @@ detail: every option, the second example, and the traps.
 | [Streaming (HLS)](guides/media-streaming.md) | You play `.m3u8` streams in `MediaPlayer` with `@nxgt/material/media-hls` |
 | [Maps](guides/maps.md) | You render Leaflet maps or a location field with `@nxgt/material/map` |
 | [Drawing](guides/drawing.md) | You draw diagrams, badges or illustrations from code with `@nxgt/material/draw`: scenes and JSX primitives, roles and tones, a strict CSP, accessibility and events, sketch, animation, PNG, PDF and e-mail |
-| [Illustrations](guides/illustrations.md) | You draw state illustrations from your Font Awesome sprites with `@nxgt/material/illustrations`: the twelve scenes and the health and education sets, `EmptyState` / `ErrorState` / `DataTable` with `illustration`, `IllustrationDefaults` for an app, sizes, motion and CSP |
+| [Illustrations](guides/illustrations.md) | You draw state illustrations from your Font Awesome sprites with `@nxgt/material/illustrations`: the twelve scenes and the health, education and game sets, `EmptyState` / `ErrorState` / `DataTable` with `illustration`, `IllustrationDefaults` for an app, sizes, motion and CSP |
 | [Icon motifs](guides/icon-motifs.md) | You use icon backgrounds, celestial skies, illustrations or a theme that names a motif: serving your own Font Awesome sprites (the package ships none), `IconSpritesProvider`, `icons` / `iconStyle` / `iconMotif`, `sky`, the health and education sets, Free fallbacks for Pro-only names |
 | [Backgrounds](guides/backgrounds.md) | You want a gradient or patterned backdrop: tones, intensity, the opt-in `backgrounds.css`, custom colours, motion and CSP |
 | [SSR](guides/ssr.md) | Your app renders on a server and bundles this package |

package/docs/components/data-display.md

@@ -18,6 +18,7 @@ from `@nxgt/material/components`.
 | <img src="../previews/data-display-periodcards.webp" width="96" alt=""> | [PeriodCards](#periodcards) | Consecutive date ranges (terms, sprints) as cards, with a current marker and an optional link per card |
 | <img src="../previews/data-display-chip.webp" width="96" alt=""> | [Chip](#chip) | Three looks and a dashed add pill, with slots, a selected state and a dismiss button |
 | <img src="../previews/data-display-statcard.webp" width="96" alt=""> | [StatCard](#statcard) | KPI tile with value, hint, icon and toned delta; `href` makes it one link |
+| | [TotalsList](#totalslist) | Labelled figures in a `dl`, amounts right-aligned, a ruled grand-total row; the screen twin of `PrintTotals` |
 | <img src="../previews/data-display-metric-cards.webp" width="96" alt=""> | [Metric cards](#metric-cards) | Sixteen dashboard tiles |
 | <img src="../previews/data-display-card-presets.webp" width="96" alt=""> | [Card presets](#card-presets) | Twenty-seven ready-made cards |
 | <img src="../previews/data-display-statusindicator.webp" width="96" alt=""> | [StatusIndicator](#statusindicator) | Coloured status dot with a label |
@@ -194,7 +195,7 @@ no `style` attribute and a strict CSP is fine.
 - Seat changes are not animated beyond a colour fade, which stops under
   `prefers-reduced-motion`.
 
-**Storybook:** `Data display/SeatRing` · **Vue:** not yet (#2470) (#1931)
+**Storybook:** `Data display/SeatRing` · **Vue:** not yet (#1931)
 
 ---
 
@@ -269,7 +270,7 @@ const [open, setOpen] = useState(false);
   the layout follows `dir` (RTL) and dark mode.
 - Keep `front` and `description` free of the secret: they are always in the page.
 
-**Storybook:** `Data display/SecretCard` · **Vue:** not yet (#2470) (#1938)
+**Storybook:** `Data display/SecretCard` · **Vue:** not yet (#1938)
 
 ---
 
@@ -603,6 +604,35 @@ pass `disabled` with a `Spinner` in `leading`, or use a `Button`.
 
 ---
 
+## TotalsList
+
+On-screen counterpart of `PrintTotals`: a `dl` of labelled figures, labels at the start, amounts right-aligned in tabular figures, one column at any width (a side rail, a phone). Rows have the shape of `PrintTotalRow` (`label`, `value`, `last`), so one array feeds the screen and its print.
+
+```tsx
+import { TotalsList } from '@nxgt/material/components';
+
+<TotalsList
+  label="Order totals"
+  rows={[
+    { label: 'Subtotal', value: '1,000.00' },
+    { label: 'Tax (19%)', value: '190.00' },
+    { label: 'Total', value: '1,190.00', last: true },
+  ]}
+/>
+```
+
+| Prop | Type | Default | Effect |
+| --- | --- | --- | --- |
+| `rows` | `{ label, value, last?, strong?, tone? }[]` | required | `last` makes the grand total larger and bold with a rule above; `strong` emphasises a row with no rule; `tone` colours the amount (`error` for a due or negative amount, `success` for a credit; an `AppTones` tone works too) |
+| `label` | `string` | — | accessible name: the block becomes a `group` named by it |
+| `variant` | `'card' \| 'plain'` | `'card'` | `plain` has no border or padding, to sit inside a card you already have |
+
+Format the amounts for the locale before passing them (`Intl.NumberFormat`); a long label wraps and the amount stays whole.
+
+**Storybook:** `Data display/TotalsList`
+
+---
+
 ## StatCard
 
 ![StatCard](../previews/data-display-statcard.webp)
@@ -812,9 +842,9 @@ import { TubeCap } from '@nxgt/material/components';
 | `action` | `ReactNode` | none | trailing slot, such as an `IconButton` |
 | `size` | `'sm' \| 'default' \| 'lg'` | `'default'` | cap of 20, 28 or 40px |
 
-`TUBE_CAP_KINDS` lists the kinds. The look is CSS on `data-kind`, with no inline style (strict CSP). The cap is `aria-hidden`.
+`TUBE_CAP_KINDS` lists the kinds, and `TubeCapKind` is the exported type of `kind`. The look is CSS on `data-kind`, with no inline style (strict CSP). The cap is `aria-hidden`.
 
-**Storybook:** `Data display/TubeCap` · **Vue:** not yet (#2470)
+**Storybook:** `Data display/TubeCap` · **Vue:** `TubeCap` (`@nxgt/material-vue/components`)
 
 ---
 
@@ -1367,7 +1397,7 @@ and the user's zone) and both sides agree:
 <ChangeHistory entries={entries} now={loaderData.now} timeZone={loaderData.timeZone} />
 ```
 
-**Storybook:** `Data display/ChangeHistory` · **Vue:** not yet (#2470) (tracked as a `vue` issue)
+**Storybook:** `Data display/ChangeHistory` · **Vue:** not yet (tracked as a `vue` issue)
 
 ---
 
@@ -1404,7 +1434,7 @@ The offset follows the instant (`Europe/Paris` is `UTC+1` in winter and
 `UTC+2` in summer). `ChangeHistory` takes a `timeZone` and `RelativeTime` a `now`
 the same way; pass the app's zone from the server so every screen agrees.
 
-**Storybook:** `Data display/ZonedTime` · **Vue:** not yet (#2470) (tracked as a `vue` issue)
+**Storybook:** `Data display/ZonedTime` · **Vue:** not yet (tracked as a `vue` issue)
 
 ---
 
@@ -1473,7 +1503,7 @@ own, so they add up to less.
 - Bar widths are SVG attributes, so server markup has no `style` attribute and
   a strict CSP is fine.
 
-**Storybook:** `Data display/VoteTally` · **Vue:** not yet (#2470) (#1940)
+**Storybook:** `Data display/VoteTally` · **Vue:** not yet (#1940)
 
 ---
 
@@ -1806,7 +1836,7 @@ lock set by another code form disables its field and leaves Cancel usable.
 button by `getByRole('button', { name: 'Activate' })` and the lock by
 `getByRole('alert')`.
 
-**Storybook:** `Data display/EnrolmentCard`, `…/Shared lock`, `Guides/Accessibility/Touch targets/Verification code` · **Vue:** not yet (#2470)
+**Storybook:** `Data display/EnrolmentCard`, `…/Shared lock`, `Guides/Accessibility/Touch targets/Verification code` · **Vue:** not yet
 
 ---
 
@@ -1949,4 +1979,4 @@ import { RecoveryCodesStatus, VerificationLockProvider } from '@nxgt/material/co
 
 It reads the page-wide lock like [EnrolmentCard](#enrolmentcard) does. With `requireCode={false}` there is no code form, so `error` and `attemptsLeft` are not shown: the plain button follows `pending`, and is disabled by `locked` and by the page-wide lock; then the lock's text (the message of the answer that locked, or "Too many wrong codes. Try again later.") shows above it as a muted line that describes the button.
 
-**Storybook:** `Data display/RecoveryCodesStatus`, `Data display/EnrolmentCard/Shared lock` · **Vue:** not yet (#2470)
+**Storybook:** `Data display/RecoveryCodesStatus`, `Data display/EnrolmentCard/Shared lock` · **Vue:** not yet

package/docs/components/form-fields.md

@@ -1348,6 +1348,11 @@ import { InlineEdit } from '@nxgt/material/components';
 | `onSave` | `(value: string) => void` | — | on save (Enter or the check button), not on each key |
 | `placeholder` | `string` | "Click to edit" | shown while empty |
 | `disabled` | `boolean` | `false` | read-only text |
+| `variant` | Typography step (`headline-lg`, …) | body | the type step of the saved text and of the input, so a title reads as a title |
+| `headingLevel` | `1 \| 2 \| 3 \| 4 \| 5 \| 6` | none | renders the text (and the input while editing) in an `<h1>`…`<h6>`, so the field can be a document's title; the button and input keep their name |
+| `defaultEditing` | `boolean` | `false` | starts with the input open, and focuses it on mount (a new, untitled document) |
+| `aria-label` | `string` | — | the input's name when there is no `label`; with `headingLevel`, set `label` or `aria-label` (the heading then reads the value, then the label) |
+| `editing` / `onEditingChange` | `boolean` / `(editing: boolean) => void` | — | controls whether the input is open (`disabled` keeps it closed) |
 
 Enter, Escape, Save and Cancel return focus to the field, while a click
 elsewhere saves and leaves focus where it went.

package/docs/components/media-and-files.md

@@ -602,6 +602,14 @@ const items: GalleryItem[] = [
 
 <Gallery items={items} preset="grid" selectable onSelectionChange={console.log} />;
 
+// Bulk actions on the selection: they appear in the "n selected" bar.
+<Gallery
+  items={items}
+  preset="grid"
+  selectable
+  selectionActions={(ids) => <Button onClick={() => removeAll(ids)}>Delete</Button>}
+/>;
+
 <LightboxGallery items={items} trigger={<button type="button">Open gallery</button>} />;
 
 <MiniGallery items={items} maxItems={5} />;
@@ -622,6 +630,7 @@ with a `+N` tile).
 | `carouselAlign` / `carouselOrientation` | `'start' \| 'center'` / `'horizontal' \| 'vertical'` | `'start'` / `'horizontal'` | where the large tile of `hero` sits; the scroll axis |
 | `lightbox` | `boolean` | from `preset` | click opens the full-screen viewer (gestures, zoom, filmstrip, download, keyboard) |
 | `selectable` | `boolean` | — | checkboxes on tiles; `onSelectionChange(ids)` |
+| `selectionActions` | `ReactNode \| (selectedIds: string[]) => ReactNode` | — | bulk actions (download, move, delete) at the end of the "n selected" bar of a `selectable` gallery; a render function receives the selected ids. Hidden while nothing is selected; wraps under the count on a phone |
 | `open` / `defaultOpen` / `onOpenChange` | `boolean` | — | control the lightbox |
 | `onDelete` | `(item) => void` | — | adds a delete button on each tile |
 | `aria-label` / `aria-labelledby` | `string` | `'Gallery'` label | names the gallery (the root has `role="application"`); a given `aria-labelledby` replaces the default label. `MiniGallery` and `LightboxGallery` take both. Other `div` props (`id`, `data-*`, `onKeyDown`) reach the root element |
@@ -1913,6 +1922,8 @@ Parts: `PrintDocument`, `PrintHeader`, `PrintSection`, `PrintInfoRow`,
 `definePrintColumns` and the helpers `resolvePrintTable`,
 `resolvePrintFields`, `toPrintValue` and `formatPrintValue`.
 
+For the same rows on screen, use [`TotalsList`](data-display.md#totalslist).
+
 **To get the file**, pass the document to one function: `downloadPdf`
 saves it, `openPdf` opens it in a new tab (a download when a popup blocker
 stops the tab), `usePdfFile` keeps a preview current, and `pdfResponse`

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

@@ -1007,6 +1007,7 @@ const [order, setOrder] = useState(savedLayout); // string[] of tile ids
 | --- | --- | --- | --- |
 | `id` | `string` | required | The tile's name in `order`; unique in the grid |
 | `title` | `ReactNode` | none | An `h3` at the top, the tile's accessible name and its handle's name |
+| `headingLevel` | `2 \| 3 \| 4 \| 5 \| 6` | `3` | The level of the title (`<h2>`…`<h6>`), to follow the heading above the grid |
 | `span` / `rowSpan` | as `ResponsiveGrid.Item` | 1 | Columns and rows covered, held to the grid's columns at each width |
 | `plain` | `boolean` | `false` | No card of its own (border, background, padding), for a child that is a card already |
 | `label` | `string` | the title, else the id | The name used by the handle and the announcements when `title` is not text |

package/docs/guides/icon-motifs.md

@@ -138,7 +138,7 @@ 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** (sixteen scenes for games and
+ten, **health** and **education**, plus **game** (twenty-five 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">

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 sixteen 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 twenty-five 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,12 +148,12 @@ icons: serve a Pro sprite, or set `edition="free"` on `IconSpritesProvider`, whi
 
 ## Scene sets: the game scenes
 
-`@nxgt/material/illustrations/game` holds sixteen scenes for a game, a quiz, a
+`@nxgt/material/illustrations/game` holds twenty-five 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`,
+`day-village`, `graveyard`, sixteen character pictograms (`seer`, `healer`,
+`archer`, `cupid`, `wolf`, `villager`, `witch`, `protector`, `elder`, `village-idiot`, `scapegoat`, `raven`, `fox`, `siblings`, `big-bad-wolf`, `wolf-father`), `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,
+and they register side by side. The `fox` and `scapegoat` heroes are drawn as vector art, because the icon sprites have no fox or goat; they follow the tone and dark mode like the sprite icons. 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.

package/docs/guides/layouts.md

@@ -204,8 +204,11 @@ The props of each are in
 The `Guides/Recipes` stories in Storybook are tested whole screens (the code
 ships with the `screen-recipes` skill of the `nxgt-material` plugin): a home
 dashboard, a list and detail, a form and dialog, a table and settings, a dense
-detail page, a status board, a landing page and a search dialog with its
-results page. Start from the closest one and replace the data.
+detail page, a status board, a landing page, a search dialog with its results
+page, a team feed, the sign-in, sign-up and forgotten-password screens, a
+gallery of pictures, settings with sections, a messages thread, an overview of
+rearrangeable widgets on `DashboardGrid` and a document editor. Start from the
+closest one and replace the data.
 
 ## See also
 

package/docs/roadmap.md

@@ -166,13 +166,10 @@ version they shipped in, and planned entries may name the major they target.
   descriptions, a small empty state, loading rows and an in-list search
   pill. What changes on upgrade:
   [The field look (2.x)](guides/field-look-2-x.md)
+- **`TotalsList`** — the on-screen `PrintTotals` (#2490): React only for now; Vue twin is #2492.
 
 ## Next
 
-- **Seven more layout recipes** — Feed, Gallery, Auth, Thread, settings,
-  dashboard and editor screens, each a tested Storybook recipe under
-  Guides/Recipes with its code beside it, on the layouts the shell now ships
-  ([#2413](https://github.com/softistx/nxgt-material/issues/2413)).
 - **FilterBar "Add a filter" stays on its row** — the button no longer wraps
   alone onto a second row on a desktop screen ([#1752](https://github.com/softistx/nxgt-material/issues/1752)).
 
@@ -383,6 +380,8 @@ version they shipped in, and planned entries may name the major they target.
 
 ## Shipped
 
+- **Seven more layout recipes (next minor)** — whole screens to start from under Guides/Recipes, each a tested Storybook story with its code in the plugin's `screen-recipes` skill: a team feed, a gallery of pictures by day, sign-in, sign-up and forgotten-password screens, a messages thread, settings with sections, an overview of rearrangeable widgets and a document editor, on the layouts the shell ships ([#2413](https://github.com/softistx/nxgt-material/issues/2413)).
+
 - **Search dialog and results page recipe (next patch)** — a command dialog (Ctrl/Cmd+K and a header button), debounced grouped suggestions, type chips, a conditional filter and highlighted result cards, with its code in the plugin's `screen-recipes` skill ([#2333](https://github.com/softistx/nxgt-material/issues/2333)).
 
 - **Layouts: adaptive navigation, headers and page layouts (3.80.0)** — `ActivityLayout` takes `navigation` (a bottom bar with More and badges, a rail with a FAB or expanded, a standard or modal drawer, a collapsible sidebar, a top navigation with dropdowns, two-level navigation, a floating toolbar or none, chosen for phone, tablet and desktop) and `header` (small, center-aligned, medium and large collapsing on scroll, hide on scroll, a search bar that opens full screen on a phone, sticky tabs), and a route adds a back arrow with `handle.back`; each piece is also exported. Page layouts grow with it: an inspector pane and the selection in the URL for `ListDetailsLayout`, phone modes and a container breakpoint for `PaneLayout`, a centred form and wizard for `ThreadLayout`, a split `AuthCard`, spans and masonry for `ResponsiveGrid`, tabs for `Kanban` on a phone, `Doc` drawn inside the shell, and new `SettingsLayout`, `DashboardGrid` (tiles the user rearranges), `EditorLayout` and `LandingLayout` (with `LandingSection` and `SiteFooter`). Everything is opt-in; the shell's default is unchanged. [Layouts guide](guides/layouts.md) ([#2103](https://github.com/softistx/nxgt-material/issues/2103)). Follow-ups: a resize handle for `EditorLayout`'s properties panel and a separate open state for its phone sheet.

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

@@ -48,6 +48,21 @@
 		gap: var(--nxgt-cards-gap, 0.75rem);
 		grid-template-columns: minmax(0, 1fr);
 	}
+	/* The list's 4px of ring room sits inside the scroll box, which clips: the
+	 * box takes it back on each inline side, so the cards' edges (not the
+	 * room's) meet the page's edge and the heading above (#2472); the parent needs 4px of inline room. */
+	[data-slot="table-wrapper"]:has(> [data-slot="data-table-cards"]) {
+		margin-inline: -4px;
+		/* `w-full` (utilities layer) would win over this layer. */
+		width: calc(100% + 8px) !important;
+	}
+	/* Tiles keep their own 4px margin, except on a phone (#2292). */
+	@media (min-width: 768px) {
+		[data-slot="table-wrapper"]:has(> [data-slot="data-table-tiles"]) {
+			margin-inline: -4px;
+			width: calc(100% + 8px) !important;
+		}
+	}
 	@container (min-width: 36rem) {
 		[data-slot="data-table-cards"] {
 			grid-template-columns: repeat(2, minmax(0, 1fr));

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nxgt/material",
-	"version": "3.81.0",
+	"version": "3.83.0",
 	"license": "MIT",
 	"bugs": {
 		"email": "stevegires@gmail.com"
@@ -390,7 +390,7 @@
 		"docs:previews": "rm -rf node_modules/.cache/nxgt-preview-free/missing && NXGT_PREVIEW_FREE=1 vitest run --project previews && bun .storybook/preview-free-report.ts"
 	},
 	"dependencies": {
-		"@nxgt/material-core": "^0.49.2",
+		"@nxgt/material-core": "^0.50.0",
 		"@base-ui/react": "^1.6.0",
 		"@dnd-kit/core": "^6.3.1",
 		"@dnd-kit/sortable": "^10.0.0",