@nxgt/material 3.12.1 → 3.13.1

package/CHANGELOG.md

@@ -1,5 +1,50 @@
 # @nxgt/material
 
+## 3.13.1
+
+### Patch Changes
+
+- [#1534](https://github.com/softistx/nxgt-material/pull/1534) [`3375ebb`](https://github.com/softistx/nxgt-material/commit/3375ebbd0b4b2d2d32ddd5379be326b8ca136d0b) Thanks [@SteveGT96](https://github.com/SteveGT96)! - Fix the app header page title missing its `title` when a web font widens it after mount (it is re-measured when fonts finish loading), and read a `flag` filter alias at `0` (`?archived=0`) as off instead of an active condition; `f=archived:is:0` still filters on "No". Behaviour change: a link `?archived=0` used to filter on "No" and now shows every row; rewrite it as `f=archived:is:0` (the serializer already writes that form).
+- Updated dependencies [[`3375ebb`](https://github.com/softistx/nxgt-material/commit/3375ebbd0b4b2d2d32ddd5379be326b8ca136d0b)]:
+  - @nxgt/material-core@0.30.1
+
+## 3.13.0
+
+### Minor Changes
+
+- [#1501](https://github.com/softistx/nxgt-material/pull/1501) [`b08f9f7`](https://github.com/softistx/nxgt-material/commit/b08f9f732757126a42bea5e6f6d0e5f2f3e3f386) Thanks [@SteveGT96](https://github.com/SteveGT96)! - Display and form polish: `Alert` shows its tone icon, `Avatar` initials scale, a `StatCardGroup`, `FormSection variant="heading"`, and `Alert` / `Banner` span the row in form grids.
+  
+  - **Visual change: `Alert` shows its tone's icon by default** (the same icons as `Banner`, now one shared map). `icon={null}` (or `false`) opts out, and an explicit `icon` still wins. An `Alert` rendered without `icon` (also the ones inside `AuthCard` notices and `RecoveryCodes`) now gains an icon; search for `<Alert` without `icon=` and add `icon={null}` to keep the old look.
+  - `Avatar` ([#1492](https://github.com/softistx/nxgt-material/issues/1492)): the initials are 40 % of the avatar's diameter (never under 10 px) at every size, round and shaped, with the tone's AA colours unchanged. `--avatar-text-share` changes the share.
+  - `StatCardGroup` ([#1493](https://github.com/softistx/nxgt-material/issues/1493)), new: wrap `StatCard size="sm"` tiles for an even layout, 2×2 while the group is narrower than 28 rem, one row of hugging tiles beyond. `EntityHeader`'s `stats` use it. New type `StatCardGroupProps`.
+  - `FormSection` takes `variant` ([#1495](https://github.com/softistx/nxgt-material/issues/1495)): `'label'` (default, unchanged) or `'heading'`, which draws the title as `title-md` emphasized and the description as `body-md`, muted.
+  - `Alert` and `Banner` placed directly in `.form-grid-layout`'s `[data-slot="form-fields"]` or a `FormSection`'s fields span the whole row ([#1497](https://github.com/softistx/nxgt-material/issues/1497)), with no `col-span-full w-full` from the app; a utility class of the app still wins.
+
+- [#1503](https://github.com/softistx/nxgt-material/pull/1503) [`2b14b95`](https://github.com/softistx/nxgt-material/commit/2b14b950e5461cccab09cf35505c2d3e09360176) Thanks [@SteveGT96](https://github.com/SteveGT96)! - Print and draw gaps of the 3.13 effort: embedded fonts, an outline, tabular figures, a drawing `description` and a quiet band for the icons background. Nothing breaks: every addition is opt-in, and a document or a drawing that uses none renders as before.
+  
+  - **PDF: embed a font** ([#1469](https://github.com/softistx/nxgt-material/issues/1469)). `registerPdfFont({ family, regular, bold?, italic?, boldItalic? })` (from `@nxgt/material/print`, `@nxgt/material-core/pdf/render`) registers a static font family and returns its name for `theme: { fonts: { sans } }`; the file embeds the glyphs it uses. `PrintDocument` takes `theme`, and the document model and `PrintDocument` take `conformance` (`'PDF/A-2b'`, …), the archive marker. The library bundles no font: the package sizes do not change. A variable font has one weight in a PDF; give static files.
+  - **PDF: what is tagged** ([#1468](https://github.com/softistx/nxgt-material/issues/1468)). `@react-pdf/renderer` 4.9 writes no structure tree, so a PDF made here is **not a tagged PDF** and claims no PDF/UA. What is written, and now documented: the language, the title shown as the window title, the reading order, and, new, `outline: true` on a document model: the bookmarks panel, one entry per heading (a level 2 under the level 1 before it). The `image` node has no `alt`: an untagged file has nowhere to write it.
+  - **PDF and print: tabular figures** ([#1470](https://github.com/softistx/nxgt-material/issues/1470)). A table column takes `numeric` (tabular digits, flush right); the amount, number and percent columns of `dataTable` and `PrintDataTable` are `numeric` unless `numeric: false`, which drops the tabular digits only (an amount column stays flush right, `align` moves it), `totals` and `metric` values print tabular, and a style takes `tabularNums`. It uses the OpenType `tnum` feature of an embedded font such as Inter; the standard fonts' digits are fixed-width already, so their output is the same. `PrintColumn` takes `numeric`. On screen, a `DataTable` column takes `meta: { numeric: true }` (`text-end tabular-nums` on its header and cells); `DataGrid` cells were `tabular-nums` already.
+  - **Drawing: a long description** ([#1471](https://github.com/softistx/nxgt-material/issues/1471)). `Drawing` takes `description` beside `title`, written as a `<desc>` the root names in `aria-describedby` (role `img`, `aria-label`, `<desc>`). It is for a titled drawing: the `Drawing` type refuses it on a `decorative` one. `toSVG` takes it too (see its own entry). `MorphDrawing` takes it too.
+  - **Background icons: a quiet band** ([#1488](https://github.com/softistx/nxgt-material/issues/1488)). `iconMotif.quiet` is `'start'`, `'end'` or `'center'`: the icons fade out over a band (a CSS mask, `--background-quiet` wide, 42% by default), so a greeting can sit on the motif with AA contrast. `start` and `end` follow the reading direction. The scene's icons do not change; a theme's `iconMotif` takes it. New type `IconQuiet`.
+  
+  `@nxgt/material-vue` is frozen and gets none of the React additions: its `Drawing`, `DataTable` and `Background` have no `description`, `meta.numeric` or `quiet`, and its `/pdf` entry does not re-export `registerPdfFont`; a document model it renders with the shared core already honours `outline`, `conformance`, `numeric` and `tabularNums`.
+
+- [#1508](https://github.com/softistx/nxgt-material/pull/1508) [`52b63fc`](https://github.com/softistx/nxgt-material/commit/52b63fc713b8f9bfeb04ff805b6e7e8a29158d1d) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `toSVG` takes a `description`, like `Drawing` and `MorphDrawing`. `toSVG(scene, { title, description })` writes a `<desc id="<idPrefix>-desc">` (the text escaped) as the root's first child and names it in the root's `aria-describedby`, so an exported file or an e-mail is read name, role, then description. It needs a `title` and throws without one, which also refuses it on a `decorative` drawing; the types refuse both (`title` or `decorative`, as `Drawing`'s). The default id prefix hashes the description too. Without `description` the output is byte for byte what it was. The `toSVG` size budget rises from 7168 to 7232 bytes gzipped (the option costs about 60 B).
+
+- [#1502](https://github.com/softistx/nxgt-material/pull/1502) [`a316d2e`](https://github.com/softistx/nxgt-material/commit/a316d2e1049745af03ef416286725fc29c605848) Thanks [@SteveGT96](https://github.com/SteveGT96)! - Layout rows: `EntityHeader`, `ListDetailsLayout` and `ListTile` close four gaps. Refs [#1489](https://github.com/softistx/nxgt-material/issues/1489), [#1490](https://github.com/softistx/nxgt-material/issues/1490), [#1491](https://github.com/softistx/nxgt-material/issues/1491), [#1496](https://github.com/softistx/nxgt-material/issues/1496).
+  
+  - `EntityHeader` takes `headingLevel` (`1 | 2 | 3`, default `1`) so a page that already has its `h1` keeps an outline in order ([#1489](https://github.com/softistx/nxgt-material/issues/1489)).
+  - `ListDetailsLayout.Details` takes `back`: on a phone, a bar with a labelled "Back to the list" button (`ListDetailsLayout.Back`, translated under `material['list-details'].back`), and the layout moves the focus to the details, then back to the row that opened them. `ListDetailsLayout` fills its box (`flex-1 min-h-0`, no `h-dvh`) and takes `breakpoint="container"` to follow its own width instead of the window's. The breakpoint and the first render are unchanged ([#1490](https://github.com/softistx/nxgt-material/issues/1490)).
+  - A `ListTile` link with `selected` is `aria-current="page"` and drawn selected, and a caller's own `aria-current` wins, for list-detail navigation by URL ([#1491](https://github.com/softistx/nxgt-material/issues/1491)).
+  - `ListTile` takes `toggle`, a switch row: the tile is a label for a Switch, the whole row toggles it, the title names it and the subtitle describes it, `disabled` disables it, and `href`, `onClick`, `actions`, `chevron` and `linkComponent` are refused beside `toggle` by type ([#1496](https://github.com/softistx/nxgt-material/issues/1496)).
+
+### Patch Changes
+
+- [#1509](https://github.com/softistx/nxgt-material/pull/1509) [`fb6596e`](https://github.com/softistx/nxgt-material/commit/fb6596ed54c89c3f76db9b619978ef81a3ebd940) Thanks [@SteveGT96](https://github.com/SteveGT96)! - The `Guides/Recipes` stories use the 3.13 additions: the list and detail recipe drops `h-dvh` and the hand-made back trigger for `Details back`, the settings rows use `ListTile toggle`, the stat tiles sit in a `StatCardGroup`, the gradebook scores are `numeric` columns, and the form recipe's `Alert` takes the tone icon and spans the grid row on its own. Stories only; no change to the library.
+- Updated dependencies [[`2b14b95`](https://github.com/softistx/nxgt-material/commit/2b14b950e5461cccab09cf35505c2d3e09360176), [`52b63fc`](https://github.com/softistx/nxgt-material/commit/52b63fc713b8f9bfeb04ff805b6e7e8a29158d1d)]:
+  - @nxgt/material-core@0.30.0
+
 ## 3.12.1
 
 ### Patch Changes

package/README.md

@@ -191,10 +191,10 @@ reads `duotone.svg`, the file that exists (it used to ask for the missing
 | --- | --- |
 | `@nxgt/material` | Everything below in one barrel, plus the compiled `style` condition (`dist/material.css`, for apps without Tailwind) |
 | `@nxgt/material/components` | UI components, `*FormField` wrappers and `useCodeResolver` ([Components](#components)) |
-| `@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); `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/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`), `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/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` 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` | 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)) |
 | `@nxgt/material/themes` | `NxgtThemeProvider` (the registry, the persisted theme name, `<html data-nxgt-theme>`, `defaultMode`; renders no element; `useTheme({ defaultMode })` takes the first-visit mode too), `NxgtTheme` (a zone in another theme, `mode`, `asChild`), `useThemeContext`, `defineTheme`, `ThemeDefinitionError`, `themeBootScript` and `THEME_BOOT_SCRIPT` (with `ThemeBootOptions`), the 14 presets and `THEME_PRESETS`, `ThemeName` and `NxgtThemes` (augmentable), with the `NxgtThemeProps`, `NxgtThemeProviderProps`, `ThemeContextValue`, `Theme`, `ThemeDefinition` and `ThemeBackground` types ([guide](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/theming.md#the-provider-and-zones)). `Background` and `ActivityLayout` take their background from the nearest theme |
@@ -202,7 +202,7 @@ 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/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`), `IconLayout`, `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 22 motif shapes), 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/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 22 motif shapes), 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)) |
@@ -222,7 +222,7 @@ reads `duotone.svg`, the file that exists (it used to ask for the missing
 | `@nxgt/material/styles.css` | source Tailwind v4 tokens. **This** is the file the app imports |
 | `@nxgt/material/map.css` | leaflet's stylesheet, for the apps that use `./map`. Not part of `styles.css` |
 | `@nxgt/material/galleries.css` | the Gallery's shaped tiles (`shape`, `preset="shaped"`): `clip-path: shape()` for twelve shapes, about 9 KB gzipped. Opt-in, not part of `styles.css`; without it a shaped tile keeps a rounded corner |
-| `@nxgt/material/backgrounds.css` | every background preset's CSS, for the apps that use `./backgrounds`; `@nxgt/material/backgrounds/<preset>.css` loads one (`icons.css` for `preset="icons"`, `celestial.css` for the sky) (the illustrated scenes share `backgrounds/illustrated.css`). Not part of `styles.css` |
+| `@nxgt/material/backgrounds.css` | every background preset's CSS, for the apps that use `./backgrounds`; `@nxgt/material/backgrounds/<preset>.css` loads one (`icons.css` for `preset="icons"`, which pulls in `icons-quiet.css` for `iconMotif.quiet`, also importable alone; `celestial.css` for the sky) (the illustrated scenes share `backgrounds/illustrated.css`). Not part of `styles.css` |
 | `@nxgt/material/theme-picker.css` | the tiles of `ThemePicker` (the mini backgrounds included), for the apps that use `@nxgt/material/theme-picker`. Import it after `styles.css`. Not part of `styles.css` |
 | `@nxgt/material/themes/<name>.css` | one shipped theme (`lavande`, `ocean`, `foret`, `ambre`, `ardoise`, `corail`, `menthe`, `prune`, `sable`, `slate`, `pink`, `bleumono`, `bluemoon`, `teal`) under `[data-nxgt-theme="<name>"]`, on `<html>` or on a zone. Import it after `styles.css`. Not part of `styles.css`: the default Lavande stays in `:root` ([guide](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/theming.md#themes)) |
 
@@ -356,7 +356,9 @@ metadata, a header and footer on every page, translated page numbers, a
 watermark. Its `language` is a prop, because the PDF renders outside your
 `I18nProvider`. `openPdf` opens a new tab, `usePdfFile` keeps a preview
 current, and a document can also be plain data built with `pdfDocument`
-(experimental). More: [Printing](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/printing.md#rendering-the-document).
+(experimental). The PDFs are untagged (the renderer writes no structure tree):
+they carry the language, the title and, with `outline`, the bookmarks, and
+`registerPdfFont` embeds a font instead of the viewer's Helvetica. More: [Printing](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/printing.md#rendering-the-document).
 
 In Next.js, a route handler that calls `pdfResponse` needs its
 `next.config.ts` wrapped:
@@ -522,7 +524,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/form-fields-field.webp" width="120" alt="Field"> | [`Field`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/form-fields.md#field) · `FormField` | Renders the field matching a config `type` (text, select, date, upload, otp…). | `Field` |
-| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/form-fields-formsection.webp" width="120" alt="FormSection"> | [`FormSection`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/form-fields.md#formsection) | A titled section of a form (an `h2` by default) with an optional description and actions, its fields in the form grid's columns, one column on a phone. | `FormSection` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/form-fields-formsection.webp" width="120" alt="FormSection"> | [`FormSection`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/form-fields.md#formsection) | A titled section of a form (an `h2` by default) with an optional description and actions (`variant="heading"` puts the title on the type scale), its fields in the form grid's columns, one column on a phone. | `FormSection` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/form-fields-repeatablegroup.webp" width="120" alt="RepeatableGroup"> | [`RepeatableGroup`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/form-fields.md#repeatablegroup) · `RepeatableGroupFormField` | Rows of fields a user adds, removes and reorders (`useFieldArray`), a list for assistive tech, focus that follows each change, one column on a phone. | `RepeatableGroup`, `RepeatableGroupFormField` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/form-fields-textfield.webp" width="120" alt="TextField"> | [`TextField`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/form-fields.md#textfield) · `TextFormField` | Labelled input with leading / trailing adornments and helper text. | `TextField`, `TextFormField` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/form-fields-textareafield.webp" width="120" alt="TextareaField"> | [`TextareaField`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/form-fields.md#textareafield) · `TextareaFormField` | Labelled textarea with row sizing and a `maxLength` counter. | `TextareaField`, `TextareaFormField` |
@@ -590,7 +592,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-display-avatar.webp" width="120" alt="Avatar"> | [`Avatar`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-display.md#avatar), `AvatarImage`, `AvatarFallback`, `AvatarBase` | Image with a fallback and an optional online / offline dot; `shape` clips it to an expressive shape; `tone` colours the fallback. | `Avatar`, `AvatarImage`, `AvatarFallback` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-display-avatar.webp" width="120" alt="Avatar"> | [`Avatar`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-display.md#avatar), `AvatarImage`, `AvatarFallback`, `AvatarBase` | Image with a fallback and an optional online / offline dot; `shape` clips it to an expressive shape; the initials scale with the size (40 % of the diameter); `tone` colours the fallback. | `Avatar`, `AvatarImage`, `AvatarFallback` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-display-avatargroup.webp" width="120" alt="AvatarGroup"> | [`AvatarGroup`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-display.md#avatargroup) | Overlapping avatars with a `+N` overflow. | `AvatarGroup` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-display-shape.webp" width="120" alt="Shape"> | [`Shape`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-display.md#shape) | Material 3 Expressive's 35 shapes and a squircle as a backdrop, an icon container or a mask for a photo, with a morph; eight tones or an app tone. | — |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-display-badge.webp" width="120" alt="Badge"> | [`Badge`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-display.md#badge) | Status pill, 20 px: default, secondary, error, success, info, warning, `soft` (tonal, for states), outlined. | `Badge` |
@@ -598,14 +600,14 @@ Not components: what the stylesheet gives any element.
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-display-dayseparator.webp" width="120" alt="DaySeparator"> | [`DaySeparator`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-display.md#dayseparator), `isNewDay`, `formatDayLabel` | "Today", "Yesterday", the weekday or the date between two hairlines, in the provider's language; sticky if asked. | — |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-display-periodcards.webp" width="120" alt="PeriodCards"> | [`PeriodCards`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-display.md#periodcards) | Consecutive date ranges (terms, sprints) as cards: a "Current" marker with `aria-current`, a link over each card, as many 14rem columns as fit (one on a phone). | — |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-display-chip.webp" width="120" alt="Chip"> | [`Chip`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-display.md#chip) | Compact pill in three looks (hairline, soft, tag) and a dashed add pill, with leading, avatar and trailing slots, a selected state and a dismiss button; a coloured soft chip reads as a status (the tone's container, its text colour on it). | `Chip` |
-| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-display-statcard.webp" width="120" alt="StatCard"> | [`StatCard`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-display.md#statcard) | KPI tile with value, hint, icon, toned delta and a loading skeleton; `tone` and `variant` (`outlined`, `tonal`, `filled`) colour it, `valueSize` enlarges the value, `size="sm"` makes a compact tile (it ignores `hint`, `delta` and `valueSize`). | `StatCard` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-display-statcard.webp" width="120" alt="StatCard"> | [`StatCard`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-display.md#statcard) | KPI tile with value, hint, icon, toned delta and a loading skeleton; `tone` and `variant` (`outlined`, `tonal`, `filled`) colour it, `valueSize` enlarges the value, `size="sm"` makes a compact tile (it ignores `hint`, `delta` and `valueSize`); `StatCardGroup` lays compact tiles 2×2 on a phone and in a row beside. | `StatCard` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-display-metric-cards.webp" width="120" alt="TrendCard"> | [`TrendCard`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-display.md#metric-cards), `GoalCard`, `BreakdownCard`, `RankCard`, `CompareCard`, `HeatweekCard`, `FunnelCard`, `GaugeCard`, `SparkbarCard`, `DeltaListCard`, `BandCard`, `LatencyCard`, `RatioCard`, `ThresholdCard`, `PaceCard`, `HistogramCard`, `Sparkline` | Dashboard tiles including compare, heat, funnel, gauge, spark bars, delta list, range band, latency, ratio, threshold, pace and labelled histogram. Container queries. A `tone` (named, or your app's) draws the accent in it; deltas and breaches stay semantic. | `TrendCard`, `GoalCard`, `BreakdownCard`, `RankCard`, `CompareCard`, `HeatweekCard`, `FunnelCard`, `GaugeCard`, `SparkbarCard`, `DeltaListCard`, `BandCard`, `LatencyCard`, `RatioCard`, `ThresholdCard`, `PaceCard`, `HistogramCard` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-display-card-presets.webp" width="120" alt="FeatureCard"> | [`FeatureCard`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-display.md#card-presets), `MediaCard`, `PricingCard`, `ProfileCard`, `QuoteCard`, `OverlayCard`, `SpotlightCard`, `CrewCard`, `SplitCard`, `TicketCard`, `NoticeCard`, `TimelineCard`, `MessageCard`, `EventCard`, `StackCard`, `LinkCard`, `AlbumCard`, `TagCard`, `ReceiptCard`, `ReviewCard`, `OfferCard`, `PlaceCard`, `FileCard`, `StatusCard`, `ScoreCard`, `ShortcutCard`, `ChecklistCard` | Card presets including overlay, ticket, inbox, event, stack, link, album, tags, receipt, review, offer, place, file, status, score, shortcuts and checklist. Container queries. | `FeatureCard`, `MediaCard`, `PricingCard`, `ProfileCard`, `QuoteCard`, `OverlayCard`, `SpotlightCard`, `CrewCard`, `SplitCard`, `TicketCard`, `NoticeCard`, `TimelineCard`, `MessageCard`, `EventCard`, `StackCard`, `LinkCard`, `AlbumCard`, `TagCard`, `ReceiptCard`, `ReviewCard`, `OfferCard`, `PlaceCard`, `FileCard`, `StatusCard`, `ScoreCard`, `ShortcutCard`, `ChecklistCard` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-display-statusindicator.webp" width="120" alt="StatusIndicator"> | [`StatusIndicator`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-display.md#statusindicator) | Coloured status dot with an optional pulse and label. | `StatusIndicator` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-display-summarydata.webp" width="120" alt="SummaryData"> | [`SummaryData`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-display.md#summarydata) | Label / value pairs as a grid or inline; hides empty values. | `SummaryData` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-display-description.webp" width="120" alt="Description"> | [`Description`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-display.md#description) | Read-only label / value pair that renders nothing when empty. | `Description` |
-| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-display-entityheader.webp" width="120" alt="EntityHeader"> | [`EntityHeader`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-display.md#entityheader) | Page header with icon, title, status, metadata, `stats` (figures as compact `size="sm"` StatCard tiles) and actions. | `EntityHeader` |
-| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-display-listtile.webp" width="120" alt="ListTile"> | [`ListTile`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-display.md#listtile) | Row with leading / trailing slots, title and subtitle; becomes a link (with a decorative chevron) or button when interactive. `size="sm"` is the dense row. | `ListTile` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-display-entityheader.webp" width="120" alt="EntityHeader"> | [`EntityHeader`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-display.md#entityheader) | Page header with icon, title (`headingLevel` 1 to 3), status, metadata, `stats` (figures as compact `size="sm"` StatCard tiles, 2×2 on a phone) and actions. | `EntityHeader` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-display-listtile.webp" width="120" alt="ListTile"> | [`ListTile`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-display.md#listtile) | Row with leading / trailing slots, title and subtitle; becomes a link (with a decorative chevron; `selected` sets `aria-current="page"`), a button, or with `toggle` a switch row where the whole row toggles. `size="sm"` is the dense row. | `ListTile` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-display-accordioncard.webp" width="120" alt="AccordionCard"> | [`AccordionCard`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-display.md#accordioncard) | Renders `items` (title, content) as a styled accordion. | `AccordionCard` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-display-timeline.webp" width="120" alt="Timeline"> | [`Timeline`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-display.md#timeline), `TimelineItem`, `RelativeTime` | Vertical event timeline with toned icons and relative times. | `Timeline`, `TimelineItem`, `RelativeTime` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-display-eventchip.webp" width="120" alt="EventChip"> | [`EventChip`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-display.md#eventchip) | Calendar event pill — soft, solid or outlined — with its times, all-day and continuation edges. | `EventChip` |
@@ -647,7 +649,7 @@ Not components: what the stylesheet gives any element.
 | <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-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 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-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. | `ResponsiveGrid` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/navigation-layout-resizable.webp" width="120" alt="ResizableGroup"> | [`ResizableGroup`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/navigation-and-layout.md#resizablegroup), `ResizablePanel`, `ResizableSeparator` | Resizable panels with an optional grip handle. | `ResizablePanelGroup`, `ResizablePanel`, `ResizableHandle` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/navigation-layout-skiplink.webp" width="120" alt="SkipLink"> | [`SkipLink`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/navigation-and-layout.md#skiplink) | Skip-to-content control, visible on focus. `DocSkipLink` composes it with `#doc-content`. | `SkipLink` |
@@ -680,8 +682,8 @@ 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 icon, title and description in seven tones. | `Alert` |
-| <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). | `Banner` |
+| <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 and description in seven tones; it spans the row in a form grid. | `Alert` |
+| <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` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/feedback-status-alertdialog.webp" width="120" alt="AlertDialog"> | [`AlertDialog`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/feedback-and-status.md#alertdialog), `AlertDialogContent`, `AlertDialogAction`, `AlertDialogCancel`… | Parts for a blocking confirmation dialog. | `AlertDialog` (same parts) |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/feedback-status-confirmdialog.webp" width="120" alt="ConfirmDialog"> | [`ConfirmDialog`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/feedback-and-status.md#confirmdialog), `ConfirmationDialog`, `CustomAlertDialog` | Confirm / cancel dialog with async loading. `ConfirmationDialog` adds a trigger and an optional Zod form. | `ConfirmDialog`, `ConfirmationDialog`, `CustomAlertDialog` |
 | <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` |

package/dist/{async-slice-4qbER86I.js → async-slice-ChtlTP8W.js}

@@ -1,5 +1,5 @@
-import { i as e, r as t, t as n } from "./stored-language-BeIKw3-K.js";
-import { r } from "./translator-Dje8HrNz.js";
+import { i as e, r as t, t as n } from "./stored-language-BAAP7qS3.js";
+import { r } from "./translator-BU07gNva.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-cEqcZQ3v.js → background-Ce7M5V42.js}

@@ -145,7 +145,8 @@ var z = Object.keys({
 	rotation: 1,
 	duotone: 1,
 	secondaryOpacity: 1,
-	calm: 1
+	calm: 1,
+	quiet: 1
 });
 function B(e) {
 	return JSON.stringify(Object.fromEntries(z.flatMap((t) => e?.[t] === void 0 ? [] : [[t, e[t]]])));

package/dist/backgrounds/css-react/icons-quiet.css

@@ -0,0 +1,43 @@
+/* `iconMotif.quiet` of the `icons` preset (React only). */
+@layer components {
+	/* `quiet`: the icons fade out over a band, so text can sit on the motif. The
+	 * band is `--background-quiet` wide (42%), then the icons fade back in over
+	 * 30%. `start` and `end` follow the reading direction. A mask, not a colour:
+	 * the text underneath keeps the wash's own contrast. */
+	[data-background="icons"] > [data-scene] > :is(.ic-q-start, .ic-q-end) {
+		--nxgt-quiet-to: to right;
+		-webkit-mask-image: linear-gradient(
+			var(--nxgt-quiet-to),
+			transparent var(--background-quiet, 42%),
+			#000 calc(var(--background-quiet, 42%) + 30%)
+		);
+		mask-image: linear-gradient(
+			var(--nxgt-quiet-to),
+			transparent var(--background-quiet, 42%),
+			#000 calc(var(--background-quiet, 42%) + 30%)
+		);
+	}
+	[data-background="icons"] > [data-scene] > .ic-q-end,
+	[data-background="icons"] > [data-scene]:dir(rtl) > .ic-q-start {
+		--nxgt-quiet-to: to left;
+	}
+	[data-background="icons"] > [data-scene]:dir(rtl) > .ic-q-end {
+		--nxgt-quiet-to: to right;
+	}
+	[data-background="icons"] > [data-scene] > .ic-q-center {
+		-webkit-mask-image: linear-gradient(
+			to right,
+			#000 calc(50% - var(--background-quiet, 42%) / 2 - 30%),
+			transparent calc(50% - var(--background-quiet, 42%) / 2),
+			transparent calc(50% + var(--background-quiet, 42%) / 2),
+			#000 calc(50% + var(--background-quiet, 42%) / 2 + 30%)
+		);
+		mask-image: linear-gradient(
+			to right,
+			#000 calc(50% - var(--background-quiet, 42%) / 2 - 30%),
+			transparent calc(50% - var(--background-quiet, 42%) / 2),
+			transparent calc(50% + var(--background-quiet, 42%) / 2),
+			#000 calc(50% + var(--background-quiet, 42%) / 2 + 30%)
+		);
+	}
+}

package/dist/backgrounds/css-react/icons.css

@@ -16,6 +16,8 @@
  * its place. React only: nothing in the shared `css/` folder. */
 @import "../css/motifs.css";
 
+@import "./icons-quiet.css";
+
 @layer components {
 	[data-background="icons"] > [data-layer="wash"] {
 		position: absolute;

package/dist/backgrounds.js

@@ -1,3 +1,3 @@
-import { r as e, t } from "./background-cEqcZQ3v.js";
+import { r as e, t } from "./background-Ce7M5V42.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/{button-BNjw-pnE.js → button-BrgyWw7T.js}

@@ -2,7 +2,7 @@ import { t as e } from "./utils-BLfntITJ.js";
 import { n as t, t as n } from "./dist-DVRQkaTK.js";
 import { o as r, t as i } from "./tooltip-CkttDIab.js";
 import { t as a } from "./is-production-GLw59WU8.js";
-import { t as o } from "./spinner-BtSIYVrC.js";
+import { t as o } from "./spinner-BwWDXIbg.js";
 import { a as s, i as c, r as l, t as u } from "./button-tones-BwuVvAmd.js";
 import { t as d } from "./button-group-context-CaP0X5p_.js";
 import { t as f } from "./has-text-content-Ds2dkHX_.js";

package/dist/charts.js

@@ -1,12 +1,12 @@
 import { t as e } from "./ui.utils-CAnKTCw5.js";
 import { t } from "./utils-BLfntITJ.js";
-import { t as n } from "./use-material-translation-B3V_bz-5.js";
-import { t as r } from "./button-BNjw-pnE.js";
+import { t as n } from "./use-material-translation-DGeVp-qP.js";
+import { t as r } from "./button-BrgyWw7T.js";
 import { t as i } from "./use-ssr-media-query-C6M5m8sf.js";
 import { i as a, n as o, r as s, t as c } from "./util-4heV2LPI.js";
 import { t as l } from "./useIsomorphicLayoutEffect-DfgAhWcH.js";
 import { t as u } from "./warn-once-C_e47JM8.js";
-import { t as d } from "./chip-DLgQTJBZ.js";
+import { t as d } from "./chip-BZu-bvAJ.js";
 import { c as f, d as p, f as m, i as h, o as g, p as _, s as v, t as y } from "./line-path-C5pZGC49.js";
 import { t as b } from "./live-status-BGPaN8r8.js";
 import { t as x } from "./linear-G97mfnKF.js";

package/dist/{chip-DLgQTJBZ.js → chip-BZu-bvAJ.js}

@@ -1,6 +1,6 @@
 import { t as e } from "./utils-BLfntITJ.js";
 import { t } from "./tooltip-CkttDIab.js";
-import { t as n } from "./use-material-translation-B3V_bz-5.js";
+import { t as n } from "./use-material-translation-DGeVp-qP.js";
 import { a as r } from "./button-tones-BwuVvAmd.js";
 import { t as i } from "./react-node-text-Crkpfpco.js";
 import { Check as a, X as o } from "lucide-react";

package/dist/{code-editor-BZbaYLvo.js → code-editor-DjY7_8TH.js}

@@ -1,12 +1,12 @@
 import { r as e } from "./rolldown-runtime-BFFgcFxR.js";
 import { t } from "./utils-BLfntITJ.js";
 import { a as n } from "./dist-lmHmz_bu.js";
-import { c as r, d as i, f as a, n as o, t as s } from "./dropdown-menu-BsH9W_3C.js";
+import { c as r, d as i, f as a, n as o, t as s } from "./dropdown-menu-BEyP-A0J.js";
 import { a as c, i as l, n as u } from "./field-blur-context-Cft9s7Hg.js";
-import { a as d, d as f, r as p, t as m, u as h } from "./toolbar-items-rUHdVqAq.js";
+import { a as d, d as f, r as p, t as m, u as h } from "./toolbar-items-CVQBYp4K.js";
 import { t as g } from "./is-production-GLw59WU8.js";
-import { t as _ } from "./use-material-translation-B3V_bz-5.js";
-import { i as v, n as y, o as b, t as x } from "./code-language-items-BT5BO5w6.js";
+import { t as _ } from "./use-material-translation-DGeVp-qP.js";
+import { i as v, n as y, o as b, t as x } from "./code-language-items-D1lpNQ6J.js";
 import { t as S } from "./useIsomorphicLayoutEffect-DfgAhWcH.js";
 import { n as C, t as w } from "./escape-owner-C4W_sOAU.js";
 import { t as T } from "./skeleton-DSdtr2qc.js";

package/dist/code-editor.js

@@ -1,14 +1,14 @@
 import { t as e } from "./utils-BLfntITJ.js";
 import { a as t } from "./dist-lmHmz_bu.js";
-import { d as n, r, t as i, u as a } from "./toolbar-items-rUHdVqAq.js";
-import { t as o } from "./use-material-translation-B3V_bz-5.js";
-import { i as s, n as c, o as l } from "./code-language-items-BT5BO5w6.js";
+import { d as n, r, t as i, u as a } from "./toolbar-items-CVQBYp4K.js";
+import { t as o } from "./use-material-translation-DGeVp-qP.js";
+import { i as s, n as c, o as l } from "./code-language-items-D1lpNQ6J.js";
 import { r as u, t as d } from "./field-blur-CJHzVSh9.js";
 import { t as f } from "./skeleton-DSdtr2qc.js";
 import { t as p } from "./live-status-BGPaN8r8.js";
 import { t as m } from "./use-mobile-BDro060N.js";
 import { t as h } from "./react-node-text-Crkpfpco.js";
-import { a as g, c as _, d as v, f as y, i as b, l as x, m as S, o as C, p as w, r as T, s as E, t as D, u as O } from "./code-editor-BZbaYLvo.js";
+import { a as g, c as _, d as v, f as y, i as b, l as x, m as S, o as C, p as w, r as T, s as E, t as D, u as O } from "./code-editor-DjY7_8TH.js";
 import { ChevronDown as k, ChevronUp as A, Columns2 as j } from "lucide-react";
 import { useEffect as M, useRef as N, useState as P } from "react";
 import { Fragment as F, jsx as I, jsxs as L } from "react/jsx-runtime";

package/dist/{code-language-items-BT5BO5w6.js → code-language-items-D1lpNQ6J.js}

@@ -1,5 +1,5 @@
-import { d as e, f as t } from "./dropdown-menu-BsH9W_3C.js";
-import { t as n } from "./use-material-translation-B3V_bz-5.js";
+import { d as e, f as t } from "./dropdown-menu-BEyP-A0J.js";
+import { t as n } from "./use-material-translation-DGeVp-qP.js";
 import { t as r } from "./live-status-BGPaN8r8.js";
 import { useEffect as i, useRef as a, useState as o } from "react";
 import { jsx as s } from "react/jsx-runtime";

package/dist/components/components.css

@@ -135,6 +135,8 @@
 @import "./ui/display/period-cards/period-cards.css";
 @import "./ui/layout/sidebar/sidebar-tokens.css";
 @import "./ui/display/avatar/avatar.css";
+/* Alert and Banner span the row in the form grids (#1497). */
+@import "./ui/feedback/alert/alert.css";
 @import "./ui/display/stat-card/stat-card.css";
 /* The native charts (@nxgt/material/charts): held series colours, grid, marks;
  * then the frame, legend keys, tooltip (float and phone bottom card), table. */

package/dist/components/ui/display/avatar/avatar.css

@@ -10,3 +10,20 @@
 		--nxgt-tone-ring-share-own: var(--avatar-ring-share);
 	}
 }
+
+/* The initials scale with the avatar (#1492): the avatar is a size container,
+ * and its fallback text is 40 % of the diameter (`cqw`), never under 10 px, so
+ * two letters keep clear of the edge at 32 px and the text grows with a
+ * larger avatar. The share is `--avatar-text-share` (a unitless percentage,
+ * 40 by default). The rule reads the avatar's own size, so it only applies to
+ * a fallback inside an `avatar` (a bare `AvatarFallback` keeps inheriting).
+ * Colours are the tone's, unchanged: the text stays AA on its container. */
+@layer components {
+	[data-slot="avatar"] {
+		container-type: inline-size;
+	}
+	[data-slot="avatar"] [data-slot="avatar-fallback"] {
+		font-size: max(0.625rem, calc(var(--avatar-text-share, 40) * 1cqw));
+		line-height: 1;
+	}
+}

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

@@ -0,0 +1,16 @@
+/* An Alert or a Banner placed in a form's grid takes the whole row (#1497),
+ * like a FormSection: no `col-span-full w-full` from the app. Direct children
+ * of the form grid's `[data-slot="form-fields"]` (inside `.form-grid-layout`)
+ * or of a FormSection's `[data-slot="form-section-fields"]`, so an alert deeper
+ * in a field is untouched. In the components layer: a utility class of the
+ * app on the alert (`col-span-1`, `w-fit`) still wins. */
+@layer components {
+	:is(
+			.form-grid-layout [data-slot="form-fields"],
+			[data-slot="form-section-fields"]
+		)
+		> :is([data-slot="alert"], [data-slot="banner"]) {
+		grid-column: 1 / -1;
+		width: 100%;
+	}
+}