@nxgt/material 3.57.0 → 3.59.0

package/CHANGELOG.md

@@ -1,5 +1,37 @@
 # @nxgt/material
 
+## 3.59.0
+
+### Minor Changes
+
+- [#1970](https://github.com/softistx/nxgt-material/pull/1970) [`991aa74`](https://github.com/softistx/nxgt-material/commit/991aa746f83f04565da5dcb106213bd888fca991) Thanks [@SteveGT96](https://github.com/SteveGT96)! - Add `@nxgt/material/barcode`: `Barcode` draws Code 128 and Data Matrix as accessible SVG that follows the theme and dark mode (`appearance="paper"` keeps it dark on light) and prints black on white, and `LabelSheet` / `Label` lay a printed sheet of labels out by label size, columns, rows, gaps, a start offset and `skip`. The encoders are written in the package (no runtime dependency); `barcodeGeometry` returns the path for an SVG of your own. Nothing to migrate. Closes [#1963](https://github.com/softistx/nxgt-material/issues/1963).
+
+- [#1985](https://github.com/softistx/nxgt-material/pull/1985) [`9ebd264`](https://github.com/softistx/nxgt-material/commit/9ebd26405cb7d48655db77087d08f1cf6d728248) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `LoadMoreFooter` (Buttons & actions) is the footer of a paged list: a "Showing N of M" line in a polite live region (`shown`, `total`), the load button (`hasMore`, `loading`, `label`, `onLoad`) and, with `failed`, an error alert in its place with a tonal "Try again" that calls `onLoad` and keeps the rows shown. It renders nothing when `hasMore` is false. `PageLoadFailed` (Feedback & status) is an `EmptyState` for a page opened at a cursor that failed, with a "Back to the start" link (`href`, rendered by the `LinkComponentProvider`'s component). New texts under `material.load-more.*`, in English and French. Additive; React only for now. Fixes [#1983](https://github.com/softistx/nxgt-material/issues/1983).
+
+- [#1967](https://github.com/softistx/nxgt-material/pull/1967) [`204e4cd`](https://github.com/softistx/nxgt-material/commit/204e4cd05dfce84ad781af838d5f854ef71a48e4) Thanks [@SteveGT96](https://github.com/SteveGT96)! - print: a typed `keepTogether` option on `PrintSection` and on the `section` and `stack` nodes of a document as data moves a block to the next page whole rather than split across a break (react-pdf's `wrap={false}`, without a cast). Only for blocks shorter than a page: react-pdf cannot break a taller one, it overflows.
+
+### Patch Changes
+
+- [#1982](https://github.com/softistx/nxgt-material/pull/1982) [`5cbed3b`](https://github.com/softistx/nxgt-material/commit/5cbed3b100b1c590778da0103d6f37610a25cfc5) Thanks [@SteveGT96](https://github.com/SteveGT96)! - Roadmap: the size-limit split shipped.
+- Updated dependencies [[`204e4cd`](https://github.com/softistx/nxgt-material/commit/204e4cd05dfce84ad781af838d5f854ef71a48e4)]:
+  - @nxgt/material-core@0.43.0
+
+## 3.58.0
+
+### Minor Changes
+
+- [#1969](https://github.com/softistx/nxgt-material/pull/1969) [`e96bfb2`](https://github.com/softistx/nxgt-material/commit/e96bfb23673015b4414c2de78c4fd8df11003633) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `QuestionCard`: `QuestionVerdict` gains `'unanswered'` for a review of a question the learner left blank. The banner reads "No answer" (`material.question-card.unanswered`, "Sans réponse" in French) with a minus icon on a neutral tone, never colour alone. No value is shown and the inputs stay read-only, the correct answer and the explanation are shown, and `points` read 0 out of the question's points. Additive ([#1966](https://github.com/softistx/nxgt-material/issues/1966)).
+
+- [#1975](https://github.com/softistx/nxgt-material/pull/1975) [`92250a8`](https://github.com/softistx/nxgt-material/commit/92250a8ac05d986d27e62232453ce9395385538b) Thanks [@SteveGT96](https://github.com/SteveGT96)! - Add `StickyActionBar`: the bar that holds a page's main decision. On a phone it sticks to the bottom of the scroll box, above the on-screen keyboard and clear of the safe areas; from `md` it is an inline row after the content. The last child is the one primary action. `sticky={false}` keeps it inline everywhere.
+
+### Patch Changes
+
+- [#1979](https://github.com/softistx/nxgt-material/pull/1979) [`c263975`](https://github.com/softistx/nxgt-material/commit/c263975549cdd49e869d091744e13c230a628dfc) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `CountdownTimer` keeps its icon and words through the critical tone (the last `criticalAt` seconds), where 3.57 dropped them and left colour alone. The critical tone has its own phrase, `material.countdown-timer.critical` (en "Almost out of time", fr "Le temps est presque écoulé"), and the announcement on entering it includes the phrase. A custom `warningText` replaces the phrase in both tones; `warningText={false}` still hides the icon and words in both. Additive.
+
+- [#1976](https://github.com/softistx/nxgt-material/pull/1976) [`ad9d8db`](https://github.com/softistx/nxgt-material/commit/ad9d8db51cc97ecd5d20f67cf65b264ae2015c85) Thanks [@SteveGT96](https://github.com/SteveGT96)! - DataGrid: a phone list item's accessible name now holds everything it shows (label, badges, summary and the reason of a locked row), label first, so axe `label-content-name-mismatch` passes. The summary and reason are no longer a description, and the default summary draws its "·" separators with CSS. Tests that matched the item's exact name (`{ name: 'Ada Lovelace' }`) match its start instead (`/^Ada Lovelace/`).
+
+- [#1926](https://github.com/softistx/nxgt-material/pull/1926) [`704ae75`](https://github.com/softistx/nxgt-material/commit/704ae75978defef993346fbf18e39d4c8dc8c60d) Thanks [@SteveGT96](https://github.com/SteveGT96)! - Split the library's components so no source file exceeds 200 lines and no function 80 ([#1865](https://github.com/softistx/nxgt-material/issues/1865)). No API or behaviour change.
+
 ## 3.57.0
 
 ### Minor Changes

package/README.md

@@ -199,6 +199,7 @@ reads `duotone.svg`, the file that exists (it used to ask for the missing
 | `@nxgt/material/print` | PDF documents over `@react-pdf/renderer`: the `PrintDocument` page shell, the print blocks, `PrintDrawing` and the `drawing(scene)` node (a vector drawing from `@nxgt/material-core/draw` printed as vectors), and `PrintDataTable`, `PrintKeyValue` and `PrintMetric` from column definitions and plain rows; documents as plain data (`pdfDocument` and its builders, with `outline` and `conformance`); `registerPdfFont` (with the `PdfFontFaces` type) to embed a font, and the `PdfConformance` type for the PDF/A marker; a `numeric` column and `tabularNums` for figures that line up; `downloadPdf`, `openPdf`, `usePdfFile` and `pdfResponse` to get the file in one call — **its own entry, and not in the barrel above** ([printing guide](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/printing.md)) |
 | `@nxgt/material/pdf-reader` | `PdfReader`, the redesigned PDF reader (header, floating page pill, rail and panel; `embedded`, `dialog`, `page` and `fullscreen` modes; single page and two-page layouts; `look="expressive"` by default, `"classic"` to opt out, type `PdfReaderLook`) and `configurePdfReader` for pdf.js's worker and assets. **Its own entry, browser-only** (pdf.js loads on first render); also exported as `PdfReader` from `/components` since 3.0 ([guide](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/pdf-reader.md)) |
 | `@nxgt/material/charts` | Native SVG charts (d3-scale and d3-shape for the maths only) with keyboard point navigation, a screen-reader summary, a "View data" table and `patterns`: `LineChart` and `AreaChart` (`LineChartProps`, `AreaChartProps`, `ChartCurve`), `BarChart` (`BarChartProps`, `BarLayout`, `BarOrientation`), `PieChart` (`PieChartProps`), `DonutChart` (`DonutChartProps`), `Gauge` (`GaugeProps`, `GaugeSize`), `RadialBarChart` (`RadialBarChartProps`), `FunnelChart` (`FunnelChartProps`), `HeatmapChart` (`HeatmapChartProps`, `HeatColumn`), `RadarChart` (`RadarChartProps`), `ScatterChart` (`ScatterChartProps`, `ScatterSeries`, `ScatterPoint`), `ComboChart` (`ComboChartProps`, `ComboSeries`: bars, areas and lines, each on a left or a right axis), `zoom` (a mini overview with a window and two slider handles that picks the rows shown; `range`, `defaultRange`, `onRangeChange`) and `scroll` (a dense plot scrolls sideways on a phone, the value axis pinned) on the line, area, bar and combo charts (`ChartRangeProps`, `ChartZoomOptions`, `ChartScrollOptions`, `ChartRange`), `bands` (shaded ranges), `thresholds` (labelled lines) and `pointTone` (a ringed point with its word, `toneLabels`) on the line and area charts, read against the value axis and carried into the tooltip, the summary and the "View data" table (`ChartBand`, `ChartThreshold`), `onPointClick` on every chart but `Gauge`, `palette` (`'soft'`: the soft palette, or `data-chart-palette="soft"` on an ancestor; `ChartPalette`) on every chart, and the shared types (`ChartSlice`, `ChartRow`, `ChartValue`, `ChartColor`, `ChartShape`, `ChartSeries`, `ChartAxis`, `ChartXAxis`, `ChartPoint`, `ChartBaseProps`). `categoryLabel` names the "View data" table's category column: on Line, Area, Bar and Combo it defaults to the x axis label, on Radar and Heatmap it is always "Category" unless set. **Its own entry, client-only** (import it from a `'use client'` file), not in the barrel above; replaces the Nivo charts (removed in 3.0) of `/components` ([guide](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/charts.md)) |
+| `@nxgt/material/barcode` | `Barcode` (Code 128 and Data Matrix as accessible SVG that follows the theme and dark mode, black on white in print; no runtime dependency) and `LabelSheet` / `Label` (label size, columns, rows, gaps and a start offset for a printed sheet of labels), plus `barcodeGeometry` and `BarcodeError` — **its own entry** ([barcode guide](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/barcode.md)) |
 | `@nxgt/material/draw` | Vector drawing: a scene of plain data or JSX primitives drawn as accessible, themeable SVG that is safe under a strict CSP and identical on the server and in the browser. `Drawing` (`DrawingProps`, `NodeHandlers`; `scene` or `w`/`h` with children; a `title` (with an optional long `description`, written as a `<desc>`) or `decorative`, enforced by the type), the primitives `Rect`, `Ellipse`, `Circle`, `Line`, `Polygon`, `Path` (takes `node`), `Text`, `Group` and `Image`, and the builders of `@nxgt/material-core/draw` re-exported by name (`scene`, `rect`, `ellipse`, `circle`, `line`, `polygon`, `path`, `text`, `group`, `image`, `linear`, `radial`, `pattern`, `hatch`, `tone`, `toSVG`, `compileScene`, `ROLES`, `DRAW_PALETTE`, and the types `Scene`, `DrawNode`, `Paint`, `Role`, `ToneRef`), plus Material 3 Expressive's shapes (`shape`, `morph`, `SHAPE_NAMES`, `toCubics`) and the layout helpers (`bbox`, `stack`, `grid`, `align`, `distribute`) re-exported by name. Colours are theme roles (`primary-container`, `on-surface`...) mapped to classes in `styles.css`, so import it. Interactive nodes are focusable `button`s with a focus ring; wrapped text is re-measured by the browser once mounted. **Its own entry, client-only** (render `Drawing` from a `'use client'` file; the builders and `toSVG` run anywhere), not in the barrel above ([drawing guide](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/drawing.md)) |
 | `@nxgt/material/draw/sketch` | The sketchy, hand-drawn style for a drawing: `Sketch` (`seed`, `roughness`, `bowing`, `fill`: `hachure`, `cross-hatch`, `solid` or `none`, `hachureAngle`, `hachureGap`, `strokeWidth`) wraps a `Drawing`, or primitives inside one, and draws shapes as double wobbling strokes with hatched fills; `sketch(sceneOrNode, options)` does it to plain data for `toSVG`. Seeded, so the server and the client draw the same lines; ids, labels, focus rings and events keep working. **Its own entry, client-only** (render `Sketch` from a `'use client'` file), not in the barrel above ([drawing guide](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/drawing.md#sketch)) |
 | `@nxgt/material/map` | Leaflet maps, markers, a location field — **its own entry, not in the barrel, and browser-only** ([maps guide](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/maps.md)) |
@@ -419,6 +420,32 @@ from `@nxgt/material/print` puts it in a PDF as vectors. The
 [drawing guide](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/drawing.md)
 covers colours, accessibility, events, sketch, animation, PNG, PDF and e-mail.
 
+### Barcodes and label sheets
+
+`@nxgt/material/barcode` draws Code 128 and Data Matrix as accessible SVG, with
+encoders written in the package (no runtime dependency). The symbol follows the
+theme on screen (`appearance="paper"` keeps it dark on light) and prints black
+on white; `LabelSheet` lays printed labels out by size, columns, rows and gaps.
+Its own entry, server-safe.
+
+```tsx
+import { Barcode, Label, LabelSheet } from '@nxgt/material/barcode';
+
+<Barcode value="TUBE-0042" label="Tube 0042" showText />
+<Barcode value="TUBE-0042" symbology="datamatrix" />
+
+<LabelSheet label={{ width: '50mm', height: '25mm' }} columns={3} rows={8} gap="2mm">
+	{items.map((i) => (
+		<Label key={i.id}>
+			<Barcode value={i.code} decorative />
+			{i.code}
+		</Label>
+	))}
+</LabelSheet>
+```
+
+The [barcode guide](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/barcode.md) covers the props, start offsets and `skip`, errors and printing.
+
 ## Guides
 
 Each area a consumer starts from has its own page under `docs/guides/`.
@@ -434,6 +461,7 @@ Each area a consumer starts from has its own page under `docs/guides/`.
 | [Maps](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/maps.md) | using `@nxgt/material/map` — browser-only, optional leaflet peers, `map.css` |
 | [Charts](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/charts.md) | drawing charts with `@nxgt/material/charts` (client-only): the twelve charts, shared props, legend, View data, `onPointClick`, reference bands, thresholds and point tones on the line chart, zoom and phone scroll, right-to-left pages, keyboard and accessibility, theming the `--chart-*` tokens, and migrating from the Nivo charts, removed in 3.0 |
 | [Drawing](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/drawing.md) | drawing diagrams, badges and illustrations from code with `@nxgt/material/draw`: a scene or JSX, theme roles and tones, strict CSP, accessibility, events, sketch, animation, PNG, PDF and e-mail |
+| [Barcodes](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/barcode.md) | Code 128 and Data Matrix with `@nxgt/material/barcode`: props, paper appearance, accessibility, `barcodeGeometry`, `LabelSheet` label sizes, offsets and `skip`, errors and printing |
 | [Backgrounds](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/backgrounds.md) | tones, intensity, the opt-in `backgrounds.css` and per-preset files, custom tone tokens, motion and CSP |
 | [Illustrations](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/illustrations.md) | `@nxgt/material/illustrations`: the twelve scenes and the health and education sets, icons from your sprites, `EmptyState` / `ErrorState` / `DataTable` with `illustration`, `IllustrationDefaults` for an app, sizes, motion and CSP |
 | [Icon motifs](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/icon-motifs.md) | icon backgrounds, celestial skies, illustrations and themes together: serving your own Font Awesome sprites (the package ships none), `IconSpritesProvider`, `icons` / `iconStyle` / `iconMotif`, `sky`, the health and education sets, a theme naming its motif, Free fallbacks for Pro-only names |
@@ -519,6 +547,7 @@ Not components: what the stylesheet gives any element.
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/buttons-actions-copybutton.webp" width="120" alt="CopyButton"> | [`CopyButton`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/buttons-and-actions.md#copybutton), `CopyValue` | Copies a value to the clipboard and briefly shows a check mark. `CopyValue` displays the value next to the button. | `CopyButton`, `CopyValue` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/buttons-actions-highlighttext.webp" width="120" alt="HighlightText"> | [`HighlightText`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/buttons-and-actions.md#highlighttext) | Marks case-insensitive matches of a query inside a string (`splitMatch`). | `HighlightText` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/buttons-actions-loadmorebutton.webp" width="120" alt="LoadMoreButton"> | [`LoadMoreButton`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/buttons-and-actions.md#loadmorebutton) | "Load more" button for cursor pagination; icon-only with a tooltip unless `expanded`. | `LoadMoreButton` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/buttons-actions-loadmorefooter.webp" width="120" alt="LoadMoreFooter"> | [`LoadMoreFooter`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/buttons-and-actions.md#loadmorefooter) | Footer of a paged list: shown-of-total line, load button, and a failed state with retry. | not yet |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/buttons-actions-scrolltotop.webp" width="120" alt="ScrollToTop"> | [`ScrollToTop`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/buttons-and-actions.md#scrolltotop) | Floating button that appears past a scroll threshold. | `ScrollToTop` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/buttons-actions-scrolltolatestbutton.webp" width="120" alt="ScrollToLatestButton"> | [`ScrollToLatestButton`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/buttons-and-actions.md#scrolltolatestbutton) | "Jump to latest" over a scroll box: an arrow that widens into "3 new messages". | — |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/buttons-actions-actioncard.webp" width="120" alt="ActionCard"> | [`ActionCard`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/buttons-and-actions.md#actioncard) | Clickable card (a `role="button"` with `aria-pressed`) with a shape icon that morphs when chosen, title, description and active indicator; `status`, `meta`, a trailing `action` (a `RowMenu`) and `variant="tile"` make a compact cell for status boards; `titleLink` makes the title a link and `footer` adds a row of secondary links. | `ActionCard` |
@@ -665,6 +694,7 @@ Not components: what the stylesheet gives any element.
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/navigation-layout-authcard.webp" width="120" alt="AuthCard"> | [`AuthCard`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/navigation-and-layout.md#authcard) | The frame of a signed-out page: one `main`, a centred card whose title is the `h1` (focusable on an end state), a status or alert notice, a brand and toolbar row, safe-area padding, an optional backdrop (the theme's by default) that keeps clear of the card. | `AuthCard` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/navigation-layout-sidebar.webp" width="120" alt="Sidebar"> | [`Sidebar`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/navigation-and-layout.md#sidebar), `SidebarHeader`, `SidebarContent`, `SidebarFooter`, `SidebarMenuItem`, `SidebarMenuLabel` | Collapsible navigation sidebar with icons, tooltips and active items. | `Sidebar` (same parts) |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/navigation-layout-topappbar.webp" width="120" alt="TopAppBar"> | [`TopAppBar`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/navigation-and-layout.md#topappbar), `BottomAppBar` | Top bar surface, and a bottom bar of icon actions with an active state. | `TopAppBar`, `BottomAppBar` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/navigation-layout-stickyactionbar.webp" width="120" alt="StickyActionBar"> | [`StickyActionBar`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/navigation-and-layout.md#stickyactionbar) | The bar of a page's main decision: stuck to the bottom on a phone above the keyboard and clear of the safe areas, inline from `md`, one primary action. | not yet |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/navigation-layout-breadcrumb.webp" width="120" alt="Breadcrumb"> | [`Breadcrumb`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/navigation-and-layout.md#breadcrumb), `BreadcrumbList`, `BreadcrumbItem`, `BreadcrumbLink`, `BreadcrumbPage`, `BreadcrumbSeparator`, `BreadcrumbEllipsis` | Breadcrumb primitives. | `Breadcrumb` (same parts) |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/navigation-layout-listdetailslayout.webp" width="120" alt="ListDetailsLayout"> | [`ListDetailsLayout`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/navigation-and-layout.md#listdetailslayout), `PaneLayout`, `ThreadLayout` | List / details that collapses to one view on mobile (a `back` bar and focus moves on the details, `breakpoint="container"` to follow its own width), a side pane that becomes a sheet, and a centred column. | `ListDetailsLayout`, `PaneLayout`, `ThreadLayout` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/navigation-layout-responsivegrid.webp" width="120" alt="ResponsiveGrid"> | [`ResponsiveGrid`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/navigation-and-layout.md#responsivegrid) | Container-query grid that grows from 1 to 5 columns, or fills by a minimum tile width (`minItem`) with a `gap`. | `ResponsiveGrid` |
@@ -707,11 +737,12 @@ Not components: what the stylesheet gives any element.
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/feedback-status-customdialog.webp" width="120" alt="CustomDialog"> | [`CustomDialog`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/feedback-and-status.md#customdialog) | Ready-made dialog with trigger, icon, title, body and footer. | `CustomDialog` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/feedback-status-stepupdialog.webp" width="120" alt="StepUpDialog"> | [`StepUpDialog`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/feedback-and-status.md#stepupdialog) | "Confirm it's you": a dialog that asks for a one-time code, driven by props (`via`, `attemptsLeft`, `error`, `pending`, `confirming`). The title takes the focus, the field after a refusal; `DialogFooter` `stackOnPhone={false}` keeps its footer one row on a phone. | — |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/feedback-status-emptystate.webp" width="120" alt="EmptyState"> | [`EmptyState`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/feedback-and-status.md#emptystate) | Illustration, title, description and action, by kind (empty, search, not-found, unauthorized); `compact` size, or `inline` as one row in a list. | `EmptyState` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/feedback-status-pageloadfailed.webp" width="120" alt="PageLoadFailed"> | [`PageLoadFailed`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/feedback-and-status.md#pageloadfailed) | An `EmptyState` for a page opened at a cursor that failed, with a "Back to the start" link. | not yet |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/feedback-status-errorstate.webp" width="120" alt="ErrorState"> | [`ErrorState`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/feedback-and-status.md#errorstate) | Failure block (`role="alert"`) with illustration, outlined Retry and collapsed technical details; generic, offline and maintenance kinds. | `ErrorState` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/feedback-status-progress.webp" width="120" alt="Progress"> | [`Progress`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/feedback-and-status.md#progress), `CircularProgress`, `ProgressField` | Material 3 Expressive linear bar and circular ring (flat or wavy, eight tones, buffer and stop dot), and a labelled progress field. | `Progress`, `CircularProgress`, `ProgressField` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/feedback-status-scrollprogress.webp" width="120" alt="ScrollProgress"> | [`ScrollProgress`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/feedback-and-status.md#scrollprogress) | Hairline that tracks window or a scrollable `target` (`react-use` `useWindowScroll` / `useScroll`). `DocProgress` composes it. | `ScrollProgress` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/feedback-status-stepdots.webp" width="120" alt="StepDots"> | [`StepDots`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/feedback-and-status.md#stepdots) | Segmented step progress, each step coloured by its state (done, correct, incorrect, flagged), optionally clickable. | — |
-| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/feedback-status-countdowntimer.webp" width="120" alt="CountdownTimer"> | [`CountdownTimer`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/feedback-and-status.md#countdowntimer) | Countdown clock with an emptying ring, amber then red as time runs out, with an icon and words in the warning; announced only at its thresholds. | — |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/feedback-status-countdowntimer.webp" width="120" alt="CountdownTimer"> | [`CountdownTimer`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/feedback-and-status.md#countdowntimer) | Countdown clock with an emptying ring, amber then red as time runs out, with an icon and words when time is low; announced only at its thresholds. | — |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/feedback-status-spinner.webp" width="120" alt="Spinner"> | [`Spinner`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/feedback-and-status.md#spinner) | Loading spinner in several styles and colours. | `Spinner` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/feedback-status-loadingindicator.webp" width="120" alt="LoadingIndicator"> | [`LoadingIndicator`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/feedback-and-status.md#loadingindicator) | Material 3 Expressive's loading indicator: a shape morphing while it turns, with no script. | — |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/feedback-status-typingindicator.webp" width="120" alt="TypingIndicator"> | [`TypingIndicator`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/feedback-and-status.md#typingindicator) | Three dots in a wave, plain or as a chat bubble; still under reduced motion. | — |
@@ -765,6 +796,7 @@ Not components: what the stylesheet gives any element.
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/rich-widgets-codeeditor-diff.webp" width="120" alt="CodeDiff"> | [`CodeDiff`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/rich-widgets.md#codediff) | A Monaco diff in the code editor's frame and themes: side by side or inline (always inline on a phone), previous/next change, `+N −M` counts and copy. From `@nxgt/material/code-editor`. | `CodeDiff` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/rich-widgets-quiz.webp" width="120" alt="Quiz"> | [`Quiz`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/rich-widgets.md#quiz), `QuestionCard` · [`QuestionNavigator`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/rich-widgets.md#questionnavigator) | Exam or practice quizzes: step progress, instant feedback with explanations and hints, a time limit, keyboard shortcuts, and a results screen with a score ring, a breakdown and a retry of the misses. Container queries. | `Quiz`, `QuestionCard` (modes and results: React only for now); `QuestionNavigator` React only for now |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/rich-widgets-drawing.webp" width="120" alt="Drawing"> | [`Drawing`, `Rect`, `Ellipse`, `Circle`, `Line`, `Polygon`, `Path`, `Text`, `Group`, `Image`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/rich-widgets.md#drawing) from `@nxgt/material/draw` | Vector drawings from a scene of plain data or from JSX: theme-role colours that follow light and dark, no inline style (strict CSP), a `title` or `decorative` enforced by the type, focusable nodes with `onClick` and a focus ring, text that wraps with Inter's metrics and is refined by the browser. Client-only entry. | React only for now |
+| — | [`Barcode`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/rich-widgets.md#barcode), `LabelSheet`, `Label`, `barcodeGeometry` | Code 128 and Data Matrix as accessible SVG that follows the theme and prints black on white, and a printed sheet of labels. Its own entry, `@nxgt/material/barcode`, server-safe. | React only for now |
 
 `RadioGroupField`, `SliderField` and `SwitchField` are aliases of the
 labelled `RadioGroup`, `Slider` and `Switch`, under the names

package/dist/{async-slice-B3RMgJUn.js → async-slice-Cmvxrvn9.js}

@@ -1,5 +1,5 @@
-import { i as e, r as t, t as n } from "./stored-language-C89mti-z.js";
-import { r } from "./translator-B5fId5Rw.js";
+import { i as e, r as t, t as n } from "./stored-language-BDzGeEAm.js";
+import { r } from "./translator-CBhGdYun.js";
 import { t as i } from "./_baseIsEqual-C6ksIHya.js";
 import { useMemo as a } from "react";
 import { asyncThunkCreator as o, buildCreateSlice as s } from "@reduxjs/toolkit";

package/dist/{background-BtSZsTvY.js → background-qdnet2A5.js}

@@ -1,6 +1,6 @@
 import { r as e } from "./rolldown-runtime-BFFgcFxR.js";
-import { t } from "./is-production-GLw59WU8.js";
-import { a as n, i as r, n as i, r as a } from "./icon-sprites-CaYXzOL4.js";
+import { a as t, i as n, n as r, r as i } from "./icon-sprites-CaYXzOL4.js";
+import { t as a } from "./is-production-GLw59WU8.js";
 import { a as o, t as s } from "./theme-context-Cofk6vgs.js";
 import { t as c } from "./compose-refs-DZ0iIVF-.js";
 import { t as l } from "./use-background-activity-KxQgelFF.js";
@@ -9,9 +9,9 @@ import { n as d, r as f, t as p } from "./scene-options-2zNF3ZkQ.js";
 import { Suspense as m, lazy as h, memo as g, useId as _, useMemo as v, useRef as y } from "react";
 import { Fragment as b, jsx as x, jsxs as S } from "react/jsx-runtime";
 import { IconRefError as C, resolveIconStyles as w, resolveIcons as T } from "@nxgt/material-core/icons";
-import { SCENE_LAYER as E, buildBackgroundScene as D, presetLayers as O, resolveBackgroundPreset as k, svgIdPrefix as ee } from "@nxgt/material-core/backgrounds";
+import { SCENE_LAYER as E, buildBackgroundScene as D, presetLayers as O, resolveBackgroundPreset as k, svgIdPrefix as A } from "@nxgt/material-core/backgrounds";
 //#region lib/backgrounds/background/available.ts
-var A = [
+var j = [
 	"gradient",
 	"grain",
 	"mesh",
@@ -28,7 +28,7 @@ var A = [
 	"linen",
 	"concrete",
 	"marble"
-], j = [
+], M = [
 	"isometric",
 	"blueprint",
 	"dots",
@@ -42,7 +42,7 @@ var A = [
 	"checker",
 	"diagonal-checker",
 	"chevrons"
-], M = [
+], N = [
 	"shapes",
 	"confetti-grid",
 	"constellation",
@@ -60,38 +60,38 @@ var A = [
 	"sport",
 	"moon",
 	"icons"
-], N = [
+], P = [
 	"eclipse",
 	"meteor-shower",
 	"ringed-planet",
 	"northern-lights"
-], P = (e) => N.includes(e), F = [
-	...A,
+], F = (e) => P.includes(e), I = [
 	...j,
 	...M,
-	...N
-], I = h(() => import("./icons-scene-M4HBeN2c.js"));
-function L(e) {
+	...N,
+	...P
+], L = h(() => import("./icons-scene-M4HBeN2c.js"));
+function R(e) {
 	return /* @__PURE__ */ x("div", {
 		"data-scene": "",
 		"aria-hidden": "true",
 		children: /* @__PURE__ */ x(m, {
 			fallback: null,
-			children: /* @__PURE__ */ x(I, { ...e })
+			children: /* @__PURE__ */ x(L, { ...e })
 		})
 	});
 }
 //#endregion
 //#region lib/backgrounds/background/partials/background-layers.tsx
-var R = h(() => import("./celestial-scene-8Muu6f7O.js")), te = g(function({ preset: e, scene: t, grain: n, sky: r, icons: i, ...a }) {
+var z = h(() => import("./celestial-scene-8Muu6f7O.js")), B = g(function({ preset: e, scene: t, grain: n, sky: r, icons: i, ...a }) {
 	return /* @__PURE__ */ S(b, { children: [
-		O(e).map((n) => n === E ? i ? /* @__PURE__ */ x(L, { ...i }, n) : P(e) ? /* @__PURE__ */ x("div", {
+		O(e).map((n) => n === E ? i ? /* @__PURE__ */ x(R, { ...i }, n) : F(e) ? /* @__PURE__ */ x("div", {
 			"data-scene": "",
 			"data-celestial": "",
 			"aria-hidden": "true",
 			children: /* @__PURE__ */ x(m, {
 				fallback: null,
-				children: /* @__PURE__ */ x(R, {
+				children: /* @__PURE__ */ x(z, {
 					name: e,
 					as: "preset",
 					...a
@@ -112,7 +112,7 @@ var R = h(() => import("./celestial-scene-8Muu6f7O.js")), te = g(function({ pres
 			"aria-hidden": "true",
 			children: /* @__PURE__ */ x(m, {
 				fallback: null,
-				children: /* @__PURE__ */ x(R, {
+				children: /* @__PURE__ */ x(z, {
 					name: r,
 					as: "sky",
 					base: e,
@@ -128,8 +128,42 @@ var R = h(() => import("./celestial-scene-8Muu6f7O.js")), te = g(function({ pres
 	] });
 });
 //#endregion
+//#region lib/backgrounds/background/partials/use-background-scenes.ts
+function V(e, t, n, r, i, a) {
+	return e === "grain" ? null : D(e, f(t, n, r, i, a));
+}
+function H(e, t) {
+	return D("grain", {
+		idPrefix: `${e}-grain`,
+		seed: t
+	});
+}
+function U({ preset: e, hasIcons: t, grain: n, idPrefix: r, seed: i, motif: a, moon: o }) {
+	let s = n || e === "grain", c = a?.shapes ? [...new Set(a.shapes)].sort().join(",") : void 0, l = JSON.stringify(d(a)), u = JSON.stringify(p(o));
+	return {
+		scene: v(() => t ? null : V(e, r, i, c, l, u), [
+			t,
+			e,
+			r,
+			i,
+			c,
+			l,
+			u
+		]),
+		grainScene: v(() => s ? H(r, i) : null, [
+			s,
+			r,
+			i
+		]),
+		withGrain: s,
+		shapesKey: c,
+		scalarsKey: l,
+		moonKey: u
+	};
+}
+//#endregion
 //#region lib/backgrounds/background/partials/icons-check.ts
-function z(e, t) {
+function W(e, t) {
 	try {
 		e !== void 0 && T(e);
 		let n = Array.isArray(t) ? t.map((e) => e && typeof e == "object" && "style" in e ? e.style : e) : t && typeof t == "object" && "style" in t ? t.style : t;
@@ -141,7 +175,7 @@ function z(e, t) {
 }
 //#endregion
 //#region lib/backgrounds/background/partials/icons-keys.ts
-var B = Object.keys({
+var G = Object.keys({
 	layout: 1,
 	colors: 1,
 	sizeRange: 1,
@@ -151,36 +185,36 @@ var B = Object.keys({
 	calm: 1,
 	quiet: 1
 });
-function V(e) {
-	return JSON.stringify(Object.fromEntries(B.flatMap((t) => e?.[t] === void 0 ? [] : [[t, e[t]]])));
+function K(e) {
+	return JSON.stringify(Object.fromEntries(G.flatMap((t) => e?.[t] === void 0 ? [] : [[t, e[t]]])));
 }
-var H = .2;
-function U(e, t, n) {
+var q = .2;
+function J(e, t, n) {
 	let { icons: r, iconStyle: i, iconMotif: a, motif: o } = t, s = o?.icons, c = a?.layout, l = e === "shapes" ? !!s : e === "icons" && (c === void 0 || c === "even");
 	return {
 		wants: e === "icons" || e === "shapes" && !!s,
 		iconsKey: JSON.stringify(s?.pack ?? r ?? null),
 		styleKey: JSON.stringify(s?.style ?? i ?? null),
-		motifKey: V(a),
+		motifKey: K(a),
 		mixKey: JSON.stringify(l ? {
 			...o,
-			icons: { ratio: s?.ratio ?? H }
+			icons: { ratio: s?.ratio ?? q }
 		} : null),
 		servedKey: JSON.stringify(n ?? null)
 	};
 }
 //#endregion
 //#region lib/backgrounds/background/partials/use-icons-scene.ts
-function W(e, { icons: o, iconStyle: s, iconMotif: c, motif: l, idPrefix: u, seed: d, animated: f }) {
-	let p = n(), m = a(), h = r(), g = i(), { wants: _, iconsKey: y, styleKey: b, motifKey: x, mixKey: S, servedKey: C } = U(e, {
+function Y(e, { icons: o, iconStyle: s, iconMotif: c, motif: l, idPrefix: u, seed: d, animated: f }) {
+	let p = t(), m = i(), h = n(), g = r(), { wants: _, iconsKey: y, styleKey: b, motifKey: x, mixKey: S, servedKey: C } = J(e, {
 		icons: o,
 		iconStyle: s,
 		iconMotif: c,
 		motif: l
 	}, h), w = v(() => {
 		if (!_) return null;
-		let n = z(JSON.parse(y) ?? void 0, JSON.parse(b) ?? void 0);
-		return n && !t() && console.warn(`Background: icons cannot be drawn (${n}); drawing "${e === "icons" ? "scatter-icons" : e}" instead.`), n;
+		let t = W(JSON.parse(y) ?? void 0, JSON.parse(b) ?? void 0);
+		return t && !a() && console.warn(`Background: icons cannot be drawn (${t}); drawing "${e === "icons" ? "scatter-icons" : e}" instead.`), t;
 	}, [
 		_,
 		e,
@@ -219,63 +253,70 @@ function W(e, { icons: o, iconStyle: s, iconMotif: c, motif: l, idPrefix: u, see
 	};
 }
 //#endregion
-//#region lib/backgrounds/background/background.tsx
-var G = /* @__PURE__ */ e({ Background: () => J }), K = (e) => console.warn(e);
-function q(e, t, n, r, i, a) {
-	return e === "grain" ? null : D(e, f(t, n, r, i, a));
+//#region lib/backgrounds/background/partials/use-themed-background.ts
+function X({ preset: e, tone: t, intensity: n, animated: r, grain: i, seed: a, motif: c, moon: l, sky: u, icons: d, iconStyle: f, iconMotif: p, ...m }) {
+	let h = o()?.background || s;
+	return {
+		requested: e ?? h.preset,
+		tone: t ?? h.tone ?? s.tone,
+		intensity: n ?? h.intensity ?? s.intensity,
+		animated: r ?? h.animated ?? !1,
+		grain: i ?? h.grain ?? !1,
+		seed: a ?? h.seed ?? 0,
+		motif: c ?? h.motif,
+		moon: l ?? h.moon,
+		sky: u ?? h.sky,
+		iconProps: {
+			icons: d ?? h.icons,
+			iconStyle: f ?? h.iconStyle,
+			iconMotif: p ?? h.iconMotif
+		},
+		props: m
+	};
 }
-function ne(e, t) {
-	return D("grain", {
-		idPrefix: `${e}-grain`,
-		seed: t
+//#endregion
+//#region lib/backgrounds/background/background.tsx
+var Z = /* @__PURE__ */ e({ Background: () => $ }), Q = (e) => console.warn(e);
+function $({ children: e, ref: t, fill: n = "viewport", ...r }) {
+	let { requested: i, tone: o, intensity: s, animated: u, grain: d, seed: f, motif: p, moon: m, sky: h, iconProps: g, props: b } = X(r), C = y(null), w = v(() => c(C, t), [t]), T = l(C, u), E = A(_()), { preset: D, iconsScene: O } = Y(k(i, I, a() ? void 0 : Q), {
+		...g,
+		motif: p,
+		idPrefix: E,
+		seed: f,
+		animated: u
+	}), { scene: j, grainScene: M, withGrain: N, shapesKey: P, scalarsKey: F, moonKey: L } = U({
+		preset: D,
+		hasIcons: O !== void 0,
+		grain: d,
+		idPrefix: E,
+		seed: f,
+		motif: p,
+		moon: m
 	});
-}
-function J({ children: e, ref: n, preset: r, tone: i, intensity: a, animated: u, grain: f, seed: m, motif: h, moon: g, sky: b, icons: C, iconStyle: w, iconMotif: T, fill: E = "viewport", ...D }) {
-	let O = o()?.background || s, A = r ?? O.preset, j = i ?? O.tone ?? s.tone, M = a ?? O.intensity ?? s.intensity, N = u ?? O.animated ?? !1, P = f ?? O.grain ?? !1, I = m ?? O.seed ?? 0, L = h ?? O.motif, R = g ?? O.moon, z = b ?? O.sky, B = y(null), V = v(() => c(B, n), [n]), H = l(B, N), U = ee(_()), { preset: G, iconsScene: J } = W(k(A, F, t() ? void 0 : K), {
-		icons: C ?? O.icons,
-		iconStyle: w ?? O.iconStyle,
-		iconMotif: T ?? O.iconMotif,
-		motif: L,
-		idPrefix: U,
-		seed: I,
-		animated: N
-	}), Y = P || G === "grain", X = L?.shapes ? [...new Set(L.shapes)].sort().join(",") : void 0, Z = JSON.stringify(d(L)), Q = JSON.stringify(p(R)), $ = J !== void 0, re = v(() => $ ? null : q(G, U, I, X, Z, Q), [
-		$,
-		G,
-		U,
-		I,
-		X,
-		Z,
-		Q
-	]), ie = v(() => Y ? ne(U, I) : null, [
-		Y,
-		U,
-		I
-	]);
 	return /* @__PURE__ */ S("div", {
 		"data-slot": "background",
-		...D,
-		ref: V,
-		"data-background": G === "grain" ? "gradient" : G,
-		"data-preset": G,
-		"data-tone": j,
-		"data-intensity": M,
-		"data-fill": E === "container" ? E : void 0,
-		"data-animated": N ? "" : void 0,
-		"data-grain": Y ? "" : void 0,
-		"data-sky": z,
-		"data-paused": N && H ? "" : void 0,
-		children: [/* @__PURE__ */ x(te, {
-			preset: G,
-			scene: re,
-			grain: ie,
-			sky: z,
-			idPrefix: U,
-			seed: I,
-			shapesKey: X,
-			scalarsKey: Z,
-			moonKey: Q,
-			icons: J
+		...b,
+		ref: w,
+		"data-background": D === "grain" ? "gradient" : D,
+		"data-preset": D,
+		"data-tone": o,
+		"data-intensity": s,
+		"data-fill": n === "container" ? n : void 0,
+		"data-animated": u ? "" : void 0,
+		"data-grain": N ? "" : void 0,
+		"data-sky": h,
+		"data-paused": u && T ? "" : void 0,
+		children: [/* @__PURE__ */ x(B, {
+			preset: D,
+			scene: j,
+			grain: M,
+			sky: h,
+			idPrefix: E,
+			seed: f,
+			shapesKey: P,
+			scalarsKey: F,
+			moonKey: L,
+			icons: O
 		}), /* @__PURE__ */ x("div", {
 			"data-slot": "background-content",
 			children: e
@@ -283,4 +324,4 @@ function J({ children: e, ref: n, preset: r, tone: i, intensity: a, animated: u,
 	});
 }
 //#endregion
-export { G as n, F as r, J as t };
+export { Z as n, I as r, $ as t };

package/dist/backgrounds.js

@@ -1,3 +1,3 @@
-import { r as e, t } from "./background-BtSZsTvY.js";
+import { r as e, t } from "./background-qdnet2A5.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 };