@nxgt/material-vue 0.42.0 → 0.43.1

package/CHANGELOG.md

@@ -1,5 +1,122 @@
 # @nxgt/material-vue
 
+## 0.43.1
+
+### Patch Changes
+
+- [#718](https://github.com/softistx/nxgt-material/pull/718) [`912a2a1`](https://github.com/softistx/nxgt-material/commit/912a2a1918ed23f7ffa95cf3c2edb7e3d2c5581a) Thanks [@SteveGT96](https://github.com/SteveGT96)! - Dev-only warnings (`formatFallback`, the i18n resource override) no longer show in production apps built with Vite or any bundler without a `process` polyfill. In `@nxgt/material-vue` the resource override warning was missing from the published package altogether; it now shows in development again.
+
+## 0.43.0
+
+### Minor Changes
+
+- [#690](https://github.com/softistx/nxgt-material/pull/690) [`9b656e8`](https://github.com/softistx/nxgt-material/commit/9b656e80aef7afb299151e9772c7271c0e3fa377) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `Background` on `/backgrounds` (`@nxgt/material/backgrounds`, `@nxgt/material-vue/backgrounds`): the component, a superset of the `/components` one under the same name. It takes `preset` (`gradient`, `grain`; the others as they land), `tone`, `intensity`, `animated`, `grain`, `seed`, `fill` (`viewport` or `container`), and states them as `data-*` attributes. `grain` lays an SVG `feTurbulence` film noise over the preset (needs `backgrounds.css`, or `backgrounds/grain.css`). Its SVG is built from plain data by core with ids from `useId`, so the server and the client render the same markup and there is no `style` attribute.
+  
+  `animated` is new on both `Background`s: the layers drift (only without `prefers-reduced-motion`) and stop (`data-paused`) while the page is hidden or the background is off screen; the listeners are removed on unmount. It is off by default.
+
+- [#655](https://github.com/softistx/nxgt-material/pull/655) [`bf383c6`](https://github.com/softistx/nxgt-material/commit/bf383c69eeb016f12f02011c3189b18c27ea81e2) Thanks [@SteveGT96](https://github.com/SteveGT96)! - New `/backgrounds` subpath (`@nxgt/material/backgrounds`, `@nxgt/material-vue/backgrounds`) and opt-in stylesheets `backgrounds.css` and `backgrounds/<preset>.css`, the base of the coming background presets. It exports the types and tables (`BACKGROUND_PRESETS`, `BACKGROUND_TONES`, `BACKGROUND_INTENSITIES`, `MOTIF_SHAPES`, ...) from `@nxgt/material-core/backgrounds`. `Background` from `/components` is now drawn by shared plain CSS (in `styles.css`, no Tailwind classes, no inline `style`): the same light look, its colours lift in dark, and it takes `tone` and `intensity`. Its root and its three blobs now carry `data-slot`, `data-preset` and `data-layer` attributes, the blobs are `aria-hidden`, and a `className` / `class` such as `h-96 w-full` still overrides its size.
+  
+  Migration: `Background` is no longer styled by Tailwind classes, so an app that recoloured its tint with `from-*` / `to-*` classes passed through `className` now gets nothing; override `--nxgt-bg-c1` and `--nxgt-bg-c2` on the element, or use `tone`, instead. The CSS is keyed on a `data-background` attribute that `Background` sets itself, so a wrapper's own `data-slot` does not unhook it.
+
+- [#688](https://github.com/softistx/nxgt-material/pull/688) [`3ba58c1`](https://github.com/softistx/nxgt-material/commit/3ba58c144d668bbeb3e78ee8a1764fbb1a2768e1) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `EmptyState` gets the new look and API. `kind` (`empty`, `search`, `not-found`, `unauthorized`) replaces `variant`; `size` (`default`, `compact`) swaps the illustration for a small icon; `illustration` (`#illustration` slot in Vue) replaces the built-in illustration, and in React `false` hides the media. The text is `text-foreground` and reads at 7:1. The DOM keeps `data-slot` and `data-variant` and adds `data-kind` and `data-size`.
+  
+  `variant` is deprecated and removed in the next major (`@nxgt/material` 3.0, `@nxgt/material-vue` 1.0). It still accepts all seven values; the error values render with the error illustration and no `role="alert"`. `<EmptyState />` with neither `kind` nor `variant` still renders the `generic` ("Something Went Wrong") copy until the next major, so pass `kind`.
+  
+  Migration, for an upgrade agent:
+  - search `variant="empty|search|not-found|unauthorized"` and replace with `kind=`;
+  - search `variant="generic|offline|maintenance"` and move to `<ErrorState kind=…>`;
+  - `variant` is removed in the next major.
+  
+  Every component that renders `EmptyState` (charts, contacts, postal address, opening hours, attributes, player, calendar board, repeatable group and the widgets' empty states in React) picks up the new look.
+
+- [#695](https://github.com/softistx/nxgt-material/pull/695) [`6da3e28`](https://github.com/softistx/nxgt-material/commit/6da3e28aeb9b9ada891d70bbd4de84c3a4d69a94) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `DataTable`'s default empty state is now a compact `EmptyState`: "No data available" for a table with no data, and "No results" with "Try a different search or clear the filters." (announced by the table's hidden status) when the column filters hide every row. This replaces the previous file icon and plain text; tables that pass `empty` are unchanged. New `emptyFiltered` prop (`#empty-filtered` slot in Vue), shown instead of `empty` when the table is empty because of a filter. Precedence: `emptyFiltered` when filtered, else `empty`, else the default; content that renders nothing falls through to the next. `empty` / `#empty` keep working and still receive `{ filtered }`. With `manual` (server-side data) `filtered` stays `false`.
+  
+  Vue: `filtered` is now `table.getCoreRowModel().rows.length > 0`, as in React (it was `data.length > 0`).
+  
+  `CommandEmpty` with no children renders a compact `EmptyState` ("No results", `material.command.empty`) when the search matches nothing; children are kept as before.
+  
+  `CommandEmpty` now merges a consumer `className` with its own classes instead of replacing them (as the Vue `CommandEmpty` does).
+
+- [#694](https://github.com/softistx/nxgt-material/pull/694) [`1150ab9`](https://github.com/softistx/nxgt-material/commit/1150ab90186a33708ff15bf2f0c88e4cbd673407) Thanks [@SteveGT96](https://github.com/SteveGT96)! - New `ErrorState`: a `role="alert"` failure block with the `generic`, `offline` and `maintenance` kinds, an illustration (an icon at `size="compact"`), an optional outlined Retry (`onRetry` in React, `@retry` in Vue; a returned promise keeps it loading) and collapsed technical details built from `error` (name, message and `cause` chain, never the stack). Copy reads `material.error-state.*`. To migrate an `EmptyState variant="generic|offline|maintenance"`, use `<ErrorState kind="…">`.
+  
+  An app that overrode `material.empty-state.generic|offline|maintenance.*` for an EmptyState error variant copies those overrides to `material.error-state.<kind>.title|description`; ErrorState reads its own keys.
+
+- [#651](https://github.com/softistx/nxgt-material/pull/651) [`0da112a`](https://github.com/softistx/nxgt-material/commit/0da112a9353e4bf369a58a8ef62e5ff3b9238f6a) Thanks [@SteveGT96](https://github.com/SteveGT96)! - New `nxgtMaterial()` from `/vite`: `plugins: [...nxgtMaterial()]` sets up a strict CSP (the hash of every inline script and style in `dist/.vite/nxgt-csp.json`, with a ready header that uses the script hashes and allows the components' `<style>` elements; `csp: { mode: 'nonce' }` for a server that fills a placeholder), never inlines a font, loads self-hosted Inter when `@fontsource-variable/inter` is installed (otherwise it warns once and keeps the system font; the build never fails), and fails the build when the library's stylesheet is not imported (React: or when the `@source` line is missing). Every part has an opt-out; see the new Vite plugin guide. `@fontsource-variable/inter` is a new optional peer (only needed for the default `fonts.sans: 'inter'`): `bun add @fontsource-variable/inter`, or `nxgtMaterial({ fonts: { sans: false } })`. The existing `pdfkitStandardFonts` and `cspAssetsInlineLimit` exports stay. `CSP_NONCE_PLACEHOLDER` and `ZOD_JITLESS_SCRIPT` are re-exported from `/vite`. To move an app that wrote its own CSP, zod, font or PDF setup, follow the [migration guide](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/guides/migrate-to-vite-plugin.md) (React) or the [Vue one](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/guides/migrate-to-vite-plugin.md).
+
+- [#642](https://github.com/softistx/nxgt-material/pull/642) [`2087342`](https://github.com/softistx/nxgt-material/commit/2087342f0b5cd3d987ff0903c0e90e5889c629d4) Thanks [@SteveGT96](https://github.com/SteveGT96)! - The server-side CSP helpers of `@nxgt/material-core/csp` are re-exported by name from the package root: `createCspNonce`, `cspPolicy`, `cspHash`, `applyCspNonce`, `CSP_NONCE_PLACEHOLDER`, `ZOD_JITLESS_SCRIPT`, `zodJitlessTag` and the types `CspPolicyOptions` and `CspDirectives`. An SSR entry now builds its nonce and header without `node:crypto` or a hand-written policy (see the CSP guide's SSR section).
+
+- [#638](https://github.com/softistx/nxgt-material/pull/638) [`0f080e1`](https://github.com/softistx/nxgt-material/commit/0f080e1fcc6067b530c9db80cebbab203a7211e3) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `NonceProvider` works without its `nonce` prop on the client: it falls back to
+  the nonce the page carries (`getCspNonce()`: the `csp-nonce` meta tag, a
+  nonced `<script>`, ...), after the `nonce` prop and an outer provider's (or
+  `ConfigProvider`'s) nonce. React reads it from the first render in a
+  client-only app (`createRoot`) and after hydration with `hydrateRoot`, where it
+  reaches only the `<style>` elements created afterwards: a hydrated app keeps
+  passing the same nonce on both sides. Vue reads it in `setup` on the client,
+  so a `<style>` a child creates in its own `onMounted` carries it; its server
+  passes the prop, the nonce the page carries, so hydration matches. React's
+  `nonce` prop is now optional in its type. A server must still pass the nonce.
+
+- [#641](https://github.com/softistx/nxgt-material/pull/641) [`95994a1`](https://github.com/softistx/nxgt-material/commit/95994a1d4239dba0a5731dbd691db878ad16c16b) Thanks [@SteveGT96](https://github.com/SteveGT96)! - The global link style has a documented opt-out: an `<a>` with the `nxgt-plain-link` class no longer takes the prose link style (info colour, underline and info tint on hover and focus, pointer) that `styles.css` gives every bare anchor ([#575](https://github.com/softistx/nxgt-material/issues/575)). The components that render a link with a look of their own now carry it, so none needs undo classes any more: `Toc`, `SeeAlso`, `Pager`, `LinkCard`, `ListTile`, the doc shell's links (crumbs, child cards, nav), `BreadcrumbLink` and `SkipLink`. Add the class to your own cards, menu entries and button-like links; a bare anchor keeps its prose style, so nothing changes for links in running text. See "Links" in the theming guide.
+
+- [#644](https://github.com/softistx/nxgt-material/pull/644) [`639a8b6`](https://github.com/softistx/nxgt-material/commit/639a8b629afa362c99897c40699ebbd98b10b01a) Thanks [@SteveGT96](https://github.com/SteveGT96)! - A `--primary-text` theme token (`text-primary-text`) for primary drawn as text or an icon ([#604](https://github.com/softistx/nxgt-material/issues/604), [#608](https://github.com/softistx/nxgt-material/issues/608)). The brand colour is a dark fill, about 2:1 as text on the dark surfaces; `--primary-text` equals `--primary` in light and mixes it 60 % with white in dark (the tonal `Button` recipe), well over 4.5:1 on `--background` and `--card`. `Typography tone="primary"`, the `Alert` primary icon and every other catalogue label or icon that was `text-primary` on a page or card surface (links in `Markdown`, selected rows, `Tabs`, `Breadcrumb`, card eyebrows, empty states, the media viewers' states…) now use it, so they read in the dark theme. `@theme` maps it as `--color-primary-text`.
+  
+  What to do: nothing, unless you override `--primary` (the token follows it) or draw primary text yourself. In that case replace `text-primary` with `text-primary-text` where it colours text or an icon on a page, card or popover surface, and keep `text-primary` for fills, borders and rings. To pick another dark colour, set `--primary-text` after the import under `.dark, [data-theme="dark"]`.
+
+- [#646](https://github.com/softistx/nxgt-material/pull/646) [`05d9f5a`](https://github.com/softistx/nxgt-material/commit/05d9f5ab15dcbaff6ad4d061700c2a817af59e28) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `DataTable` can leave rows out of the selection, and keeps a search usable while the list reloads.
+  
+  - **`enableRowSelection`** (`boolean | (row) => boolean`, [#630](https://github.com/softistx/nxgt-material/issues/630)): a row that cannot be selected is locked. With a `rowSelectionDisabledReason` (`(row) => string | undefined`), its checkbox is `aria-disabled` but focusable, and the reason is a tooltip on hover and focus and the checkbox's `aria-describedby`. With no reason, it is a plain disabled checkbox. A locked row that is already selected keeps an enabled checkbox that can only be cleared. "Select all" skips locked rows, and its checked and indeterminate states count only the rows that can be selected; it is disabled when none on the page can be.
+  - **`filters`** (React prop; Vue `#filters` slot or prop, [#633](https://github.com/softistx/nxgt-material/issues/633)): a search or filter controls on the toolbar's start side. They sit beside the `actions` fieldset instead of in it, so they stay enabled while `loading` and a search typed during a reload keeps its focus and its text. `actions` is unchanged: still disabled while `loading`.
+  
+  A search you keep in `actions`: move it to `filters` so it stays usable during a reload; nothing else changes.
+
+- [#645](https://github.com/softistx/nxgt-material/pull/645) [`f1f5094`](https://github.com/softistx/nxgt-material/commit/f1f5094d30905a0568bcbbdb88777f11916ede3a) Thanks [@SteveGT96](https://github.com/SteveGT96)! - New `--tertiary`, `--tertiary-foreground` tokens (the strix violet; lifted in dark for 4.5:1 text contrast) with `bg-tertiary`, `text-tertiary`, `text-tertiary-foreground` and `bg-tertiary-container`
+  (a 20 % tint of `--tertiary`) utilities.
+
+- [#649](https://github.com/softistx/nxgt-material/pull/649) [`7a9704e`](https://github.com/softistx/nxgt-material/commit/7a9704e00d11140a2e5fdaa13119288e240f684c) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `Autocomplete` follows the ARIA 1.2 combobox pattern, as `@nxgt/material` does ([#583](https://github.com/softistx/nxgt-material/issues/583)). The input is a `combobox` with `aria-expanded`, `aria-controls` and `aria-activedescendant` (the option Enter picks); the list is a `listbox` of `option`s (`aria-multiselectable` in multiple mode). The arrow keys move a highlighted option (`ArrowDown`/`ArrowUp` open the list, `Home`/`End` jump with an empty query, `Enter` picks it, `Escape` closes); the options are no longer tab stops. The list no longer opens on focus: it opens on a click or on typing, so a dialog that focuses its first field opens with the list shut.
+  
+  Migration:
+  
+  - Tests: query the input with `getByRole('combobox')` instead of `textbox`, and an option with `getByRole('option', { name })` instead of `button`.
+  - The list no longer opens on focus: a field a dialog focuses opens with its list shut. Tests and flows that relied on it: click the input, type, or press ArrowDown first.
+  - Enter on a closed list now submits the surrounding form; it no longer opens or picks. Open the list first (click, type or ArrowDown), then Enter picks the highlighted option.
+  - The options leave the tab order (the arrow keys move over them), and hovering an option moves the highlight.
+
+- [#687](https://github.com/softistx/nxgt-material/pull/687) [`970cf63`](https://github.com/softistx/nxgt-material/commit/970cf63a763be215c4d27cca58a5698d915d6f46) Thanks [@SteveGT96](https://github.com/SteveGT96)! - The Nuxt module calls `nxgtMaterial()` and takes its options: `fonts` (`katex` on; `sans: 'inter'` opt-in, loaded through `css`; without `@fontsource-variable/inter` the module warns once and keeps the system font, never failing the build), `styles` (opt-in), `csp.zodJitless` (opt-in: zod's jitless inline script in every head) and `pdf.bundle`. The CSP itself stays off under Nuxt (no `index.html` to hash or stamp): use `nuxt-security`. `nxgtMaterial()` from `@nxgt/material-vue/vite` takes the same `pdf` option as the React library (`pdf: { bundle: true }` for a Vite SSR server with no `node_modules` at runtime). Deprecated: the Nuxt option `pdf.bundleStandardFonts` is now `pdf.bundle`; it still works and warns. To migrate, search `bundleStandardFonts` in `nuxt.config.*` and replace it with `bundle`. In a Vite SSR server, replace `plugins: [pdfkitStandardFonts()]` plus `ssr.noExternal: ['@nxgt/material-vue', '@nxgt/material-core']` with `...nxgtMaterial({ pdf: { bundle: true } })`. The [migration guide](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/guides/migrate-to-vite-plugin.md) lists each pair with how to verify it.
+
+### Patch Changes
+
+- [#649](https://github.com/softistx/nxgt-material/pull/649) [`6a9b6e1`](https://github.com/softistx/nxgt-material/commit/6a9b6e14c4cb98f4e705bc188a61fa2adb713a31) Thanks [@SteveGT96](https://github.com/SteveGT96)! - An `Autocomplete` in a `Drawer` keeps its list floating, but the list now stops above the Drawer's footer instead of covering its controls, and a drag that starts on the list scrolls it instead of dragging the Drawer ([#582](https://github.com/softistx/nxgt-material/issues/582)). `DrawerContent` also resets the in-dialog mode, so a Drawer opened from a `Dialog` floats the list too: it no longer inherits the Dialog's in-flow list.
+
+- [#708](https://github.com/softistx/nxgt-material/pull/708) [`4c5658b`](https://github.com/softistx/nxgt-material/commit/4c5658bba08aac0d5b0224683f9374a1411296ba) Thanks [@SteveGT96](https://github.com/SteveGT96)! - Docs: the getting-started `/backgrounds` rows describe what ships, the roadmaps list the base as shipped and the remaining presets as next, and the troubleshooting pages explain the development warning for a preset that is not available yet, a grain that looks bare without `backgrounds.css`, and (in core) `assertSafeScene`'s errors.
+
+- [#664](https://github.com/softistx/nxgt-material/pull/664) [`5a872ac`](https://github.com/softistx/nxgt-material/commit/5a872ac21f429de7c39fe657bec8afa9fb241398) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `ResponsiveButton`'s `tooltip` no longer opens next to a visible label that it repeats ([#654](https://github.com/softistx/nxgt-material/issues/654)): on a desktop width, or with `expanded`, a tooltip whose text equals the label is not opened (no `aria-describedby`, and the first Escape in a dialog is no longer taken by it). It still opens below 768 px, with `expanded` false, and whenever its text adds to the label (`Create order (Ctrl+N)`). With `expanded`, a tooltip that adds to the label now opens too (it used to be dropped). The accessible name is unchanged.
+  
+  A text field without a placeholder is no longer tinted as if it held a value ([#658](https://github.com/softistx/nxgt-material/issues/658)): the tint follows the value only. In `@nxgt/material` this concerns `Input`, `Textarea` and, through them, `InputGroupInput`, `InputGroupTextarea` and `InputGroupField`; in `@nxgt/material-vue` only its input group (`InputGroupInput`, `InputGroupField`), whose `Input` and `Textarea` never had the tint.
+  
+  A text field without a placeholder (or with `placeholder=""`) now renders `placeholder=" "`, so update a test that selected `input:not([placeholder])`.
+
+- [#643](https://github.com/softistx/nxgt-material/pull/643) [`fb83002`](https://github.com/softistx/nxgt-material/commit/fb830020ce166141b85ef797160265873ae7f51a) Thanks [@SteveGT96](https://github.com/SteveGT96)! - Fix the accessibility violations in the Command listbox: `CommandSeparator` is now decorative (`role="presentation"` in React, `role="none"` in Vue) instead of a `role="separator"` inside the listbox, and Vue's `CommandList` gets a default accessible name through the new `material.command.list` key (React's uses it too, in place of cmdk's untranslated "Suggestions"); an `aria-label` you pass on `CommandList` wins in both. Fixes [#570](https://github.com/softistx/nxgt-material/issues/570).
+
+- [#639](https://github.com/softistx/nxgt-material/pull/639) [`009f7af`](https://github.com/softistx/nxgt-material/commit/009f7afaf99d44cdc960f9666cdb546fd4fc13f7) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `@nxgt/material-core/states`: the kinds of `EmptyState` and `ErrorState` (`EMPTY_STATE_KINDS`, `ERROR_STATE_KINDS`, `resolveEmptyStateKind`, `isErrorKind`), their i18n keys and English fallbacks (`stateCopy`, `STATE_ACTION_KEYS`), `describeError` (an error's name, message and cause chain, never its stack) and the geometry of the illustrations (`STATE_ILLUSTRATIONS`, `STATE_ACCENT`, `STATE_ICON`).
+  
+  `@nxgt/material` and `@nxgt/material-vue` ship new i18n keys in `en` and `fr`, for the components that follow: `material.error-state.*` (`generic`, `offline` and `maintenance` with a title and a description, `retry`, `details`, `details-name`, `details-message`, `details-cause`), `material.table.labels.no-results` and `no-results-description`, `material.command.empty` and `material.pdf-reader.retry`.
+
+- [#709](https://github.com/softistx/nxgt-material/pull/709) [`ee589c7`](https://github.com/softistx/nxgt-material/commit/ee589c78f6c86316fde91e8d1ed666e6a3169e4e) Thanks [@SteveGT96](https://github.com/SteveGT96)! - Docs: the new empty and error state i18n keys, "EmptyState shows Something Went Wrong" in the troubleshooting page, a "Migrating from `variant`" section, and the roadmap (the effort is shipped; `variant` and the error kinds of `EmptyState` go in the next major (`@nxgt/material` 3.0, `@nxgt/material-vue` 1.0)).
+
+- [#696](https://github.com/softistx/nxgt-material/pull/696) [`1b6b3b7`](https://github.com/softistx/nxgt-material/commit/1b6b3b74dac8bb231dfb314b87962778ebab7ae4) Thanks [@SteveGT96](https://github.com/SteveGT96)! - The built-in empty states use the new `EmptyState`. In `@nxgt/material-vue`, notifications, gallery, quiz, sortable list, transfer list, kanban, chat messages, charts, contacts, postal address, attributes, opening hours, the player and the event calendar's "no matching events" now render it (each keeps its `data-slot`), so Vue matches React. In `@nxgt/material`, the partials pass `kind` instead of `variant` and use `size="compact"` instead of class overrides; the kanban column shows the `search` kind while a query is set. `DocEmpty` accepts `kind` and `size` (still `not-found` by default). Sizes: the default size (illustration, `min-h-[22rem]`) is used by the quiz; the compact size (small icon, no minimum height) by notifications, the chat inbox and message list, charts, the gallery, the kanban columns, the sortable and transfer lists, the field blocks (contacts, postal address, opening hours, attributes), the player and the calendar board. A custom `#emptyState` slot on Vue's `ChartContainer` keeps its centring wrapper.
+
+- [#637](https://github.com/softistx/nxgt-material/pull/637) [`091765c`](https://github.com/softistx/nxgt-material/commit/091765c698cb2cc179ff4b82c1accbd9b840da29) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `ActivityLayout`'s `headerTitle` (`#header-title` in Vue) now shows its full text in a native `title` tooltip while the ellipsis cuts it off ([#629](https://github.com/softistx/nxgt-material/issues/629)).
+
+- [#691](https://github.com/softistx/nxgt-material/pull/691) [`8feb417`](https://github.com/softistx/nxgt-material/commit/8feb41728fc4d4f9ce3ad4be7c78fd4ddd7b5b67) Thanks [@SteveGT96](https://github.com/SteveGT96)! - New guide "Migrating to the Vite plugin" (`docs/guides/migrate-to-vite-plugin.md`): search → replace pairs, with a before/after snippet and a way to verify each, for an app that moves its hand-written CSP header, server nonce, `zod-config.ts`, `assetsInlineLimit`, Inter import, `pdfkitStandardFonts()` plus `ssr.noExternal` pair or client `NonceProvider` nonce to `nxgtMaterial()`.
+
+- [#647](https://github.com/softistx/nxgt-material/pull/647) [`0f88cbd`](https://github.com/softistx/nxgt-material/commit/0f88cbdd0ee2045901d568df2eb769196acaf73b) Thanks [@SteveGT96](https://github.com/SteveGT96)! - Escape closes only an open `ComboboxField`, `Combobox` or `Autocomplete` list inside a `Dialog`, `Sheet`, `Drawer`, `AlertDialog` or `Popover`; a second Escape closes the layer ([#631](https://github.com/softistx/nxgt-material/issues/631)). Before, the first Escape closed the whole layer. A `Select` list has always taken the first Escape, as a layer of its own, and is unchanged. The layer's own `onEscapeKeyDown` (`@escape-key-down`) now sees `defaultPrevented` true for an Escape that only closes a list. `@nxgt/material-core/escape-forward` gains `keepListEscape(event)` for your own overlay.
+
+- [#679](https://github.com/softistx/nxgt-material/pull/679) [`c17e6c2`](https://github.com/softistx/nxgt-material/commit/c17e6c235e471990a3315c03a463bfd0c3d0b3e8) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `PdfReader`: a scroll with no input the reader hears (find in page, a screen reader's cursor, setting `scrollTop`) that lands just after the opening page's pin corrects the view is reported once the scroll spy's hold ends, and the pin lets go; before, the page number stayed on the opening page and the next correction scrolled back to it. Fixes [#677](https://github.com/softistx/nxgt-material/issues/677). `@nxgt/material-core/pdf-viewer`'s `createScrollSpy` takes an options object as its fourth argument, `{ idleMs?, readerPosition? }` (a bare number is still `idleMs`): two frames after a hold ends, a scroll it held is measured once when `readerPosition` says the view is no longer where the reader put it; input in the page area during a hold measures a scroll it held. `pageInView(scroller, pages)`, the page most on screen, is exported.
+
+- [#676](https://github.com/softistx/nxgt-material/pull/676) [`5f544f4`](https://github.com/softistx/nxgt-material/commit/5f544f46f6dcfac8243f0964f6df34fc8f1bd926) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `CheckboxGroup` keeps each option's label, name and checked state when its `options` change (a folded or filtered list): its items are keyed by option value, no longer by position, which could show an option's old label in place of the new one. `RadioGroupField` keys the same way.
+- Updated dependencies [[`4c5658b`](https://github.com/softistx/nxgt-material/commit/4c5658bba08aac0d5b0224683f9374a1411296ba), [`f39e0b7`](https://github.com/softistx/nxgt-material/commit/f39e0b7321c6e753896f48119f354bd316cdd909), [`9b656e8`](https://github.com/softistx/nxgt-material/commit/9b656e80aef7afb299151e9772c7271c0e3fa377), [`2087342`](https://github.com/softistx/nxgt-material/commit/2087342f0b5cd3d987ff0903c0e90e5889c629d4), [`0fd651b`](https://github.com/softistx/nxgt-material/commit/0fd651b98403966aee8ecd4059048eabbe8c91f6), [`8feb417`](https://github.com/softistx/nxgt-material/commit/8feb41728fc4d4f9ce3ad4be7c78fd4ddd7b5b67), [`970cf63`](https://github.com/softistx/nxgt-material/commit/970cf63a763be215c4d27cca58a5698d915d6f46), [`0da112a`](https://github.com/softistx/nxgt-material/commit/0da112a9353e4bf369a58a8ef62e5ff3b9238f6a), [`009f7af`](https://github.com/softistx/nxgt-material/commit/009f7afaf99d44cdc960f9666cdb546fd4fc13f7), [`0f88cbd`](https://github.com/softistx/nxgt-material/commit/0f88cbdd0ee2045901d568df2eb769196acaf73b), [`c17e6c2`](https://github.com/softistx/nxgt-material/commit/c17e6c235e471990a3315c03a463bfd0c3d0b3e8)]:
+  - @nxgt/material-core@0.13.0
+
 ## 0.42.0
 
 ### Minor Changes

package/README.md

@@ -76,6 +76,7 @@ stores silently split between two instances.
 | `leaflet`, `@vue-leaflet/vue-leaflet` | `^1.9`, `^0.10` | optional: only for `@nxgt/material-vue/map` |
 | `react`, `@react-pdf/renderer` | `^18.2 \|\| ^19`, `^4.9` | optional: only to render with `@nxgt/material-vue/pdf` |
 | `nuxt` | `>=3.13` | optional: only for `@nxgt/material-vue/nuxt` |
+| `@fontsource-variable/inter` | `>=5` | optional: `nxgtMaterial()` from `@nxgt/material-vue/vite` loads Inter only when it is installed, else warns and keeps the system font (`fonts: { sans: false }` silences it) |
 
 **zod** (`^4.4.3`) is a dependency, imported at runtime, not bundled: the
 library uses the zod your app resolves. With a strict package manager (pnpm),
@@ -169,7 +170,13 @@ export default defineNuxtConfig({
 ```
 
 The module auto-imports components and composables and installs Pinia; it
-does not add the stylesheet. Options and the client-only widgets are in
+does not add the stylesheet. It also calls `nxgtMaterial()` for the build-time
+parts that fit Nuxt: fonts never inlined as `data:` URIs, optional self-hosted
+Inter (`fonts: { sans: 'inter' }`), pdfkit's fonts in the Nitro server
+(`pdf: { bundle: true }`) and, on request, zod's jitless script in the head
+(`csp: { zodJitless: true }`). It sets no Content Security Policy: use
+`nuxt-security` for that ([Vite plugin guide](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/guides/vite-plugin.md#nuxt)).
+Options and the client-only widgets are in
 [SSR and Nuxt](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/guides/ssr.md).
 
 ## Subpaths
@@ -179,17 +186,19 @@ does not add the stylesheet. Options and the client-only widgets are in
 | `@nxgt/material-vue` | every barrel below, plus the compiled `style` condition (`dist/material-vue.css`, for apps without Tailwind) |
 | `@nxgt/material-vue/components` | UI components, `*FormField` wrappers and `useCodeResolver` ([Components](#components)) |
 | `@nxgt/material-vue/map` | Leaflet maps, markers, a location field — **its own entry, not in the barrel** ([maps guide](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/guides/maps.md)) |
+| `@nxgt/material-vue/backgrounds` | Background presets: `Background` (a superset of the `/components` one: `preset`, `animated`, `grain`, `seed`, `fill`), 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-vue@0/docs/guides/backgrounds.md)) |
 | `@nxgt/material-vue/pdf` | PDF files from plain data: builders, `usePdf`, `PdfDownloadButton`, `pdfResponse` — **its own entry, not in the barrel** ([PDF guide](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/guides/pdf.md)) |
 | `@nxgt/material-vue/composables` | `useTheme`, `useIsClient`, `useIsMobile`, `useSearchParam`, `useCspNonce`, `useFocusOnMount`, `useSubmitOnce`, … ([helpers](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/guides/helpers.md)) |
 | `@nxgt/material-vue/dnd` | drag-and-drop primitives ([helpers](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/guides/helpers.md)) |
 | `@nxgt/material-vue/i18n` | `I18nProvider`, `mergeResources`, `createTranslator`, `translateMaterial`, … ([i18n guide](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/guides/i18n.md)) |
-| `@nxgt/material-vue/lib` | `cn`, `clientOnly`, date/number/string utils, Zod error map, `focusFirstInvalid` / `focusField` (focus an invalid field, see [forms](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/guides/forms.md#focusing-the-first-invalid-field)), Pinia store factories, `getCspNonce` / `setCspNonce` ([helpers](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/guides/helpers.md)) |
+| `@nxgt/material-vue/lib` | `cn`, `clientOnly`, the server-side CSP helpers (`createCspNonce`, `cspPolicy`, `cspHash`, `applyCspNonce`, `CSP_NONCE_PLACEHOLDER`, `ZOD_JITLESS_SCRIPT`, `zodJitlessTag`: [CSP, SSR](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/guides/csp.md#ssr)), date/number/string utils, Zod error map, `focusFirstInvalid` / `focusField` (focus an invalid field, see [forms](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/guides/forms.md#focusing-the-first-invalid-field)), Pinia store factories, `getCspNonce` / `setCspNonce` ([helpers](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/guides/helpers.md)) |
 | `@nxgt/material-vue/models` | `Status<T>` |
 | `@nxgt/material-vue/types` | shared function types |
 | `@nxgt/material-vue/styles.css` | source Tailwind v4 tokens: **this** is what a Tailwind app imports |
 | `@nxgt/material-vue/map.css` | leaflet's stylesheet, for the apps that use `./map`. Not part of `styles.css` |
+| `@nxgt/material-vue/backgrounds.css` | every background preset's CSS, for the apps that use `./backgrounds`; `@nxgt/material-vue/backgrounds/<preset>.css` loads one. Not part of `styles.css` |
 | `@nxgt/material-vue/nuxt` | Nuxt module |
-| `@nxgt/material-vue/vite` | `pdfkitStandardFonts()`, a Vite plugin for a server that inlines `/pdf` with no `node_modules` at runtime ([PDF guide](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/guides/pdf.md#fonts-on-a-fully-inlined-server)); `cspAssetsInlineLimit`, a `build.assetsInlineLimit` that never inlines a font ([CSP guide](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/guides/csp.md#katex-fonts)) |
+| `@nxgt/material-vue/vite` | `nxgtMaterial()` (a strict CSP by hash or nonce, self-hosted fonts, a styles check: [Vite plugin guide](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/guides/vite-plugin.md)); `pdfkitStandardFonts()`, a Vite plugin for a server that inlines `/pdf` with no `node_modules` at runtime ([PDF guide](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/guides/pdf.md#fonts-on-a-fully-inlined-server)); `cspAssetsInlineLimit`, a `build.assetsInlineLimit` that never inlines a font ([CSP guide](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/guides/csp.md#katex-fonts)) |
 
 ## Usage
 
@@ -328,8 +337,11 @@ Each area a consumer starts from has its own page under `docs/guides/`.
 | [Printing](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/guides/printing.md) | printable documents built from the `Print*` components |
 | [PDF documents](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/guides/pdf.md) | PDF files from data with `@nxgt/material-vue/pdf`: builders, `usePdf`, `PdfDownloadButton`, a Nitro route with `pdfResponse`, fonts on an inlined server |
 | [Maps](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/guides/maps.md) | using `@nxgt/material-vue/map` — optional leaflet peers, `map.css`, what `Map` does when you pass nothing |
+| [Backgrounds](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/guides/backgrounds.md) | tones, intensity, the opt-in `backgrounds.css` and per-preset files, custom tone tokens, motion and CSP |
 | [SSR and Nuxt](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/guides/ssr.md) | rendering on a server or with Nuxt: the module, what the barrels guarantee, `clientOnly` for browser-only code |
 | [Content Security Policy](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/guides/csp.md) | serving a strict CSP: the directives, `NonceProvider` and the per-request nonce, the components that still inject a `<style>`, the zod and KaTeX settings, a self-hosted font |
+| [The Vite plugin](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/guides/vite-plugin.md) | adding `nxgtMaterial()` to `vite.config.ts`: the CSP by hash or nonce, self-hosted fonts, a build that checks the stylesheet, and each option's opt-out |
+| [Migrating to the Vite plugin](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/guides/migrate-to-vite-plugin.md) | moving an app's hand-written CSP header, nonce, zod setting, Inter import or PDF bundling to `nxgtMaterial()`, as search → replace pairs |
 | [Helpers](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/guides/helpers.md) | the non-component subpaths: `/lib`, `/composables`, `/i18n`, `/models`, `/types`, `/dnd` |
 
 **Upgrading**: 0.3.0 stopped injecting the stylesheet from the Nuxt module,
@@ -552,7 +564,8 @@ React-only for now: `StepperIndicator` ([roadmap](https://cdn.jsdelivr.net/npm/@
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/feedback-status-alertdialog.webp" width="120" alt="AlertDialog"> | [`AlertDialog`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/feedback-and-status.md#alertdialog), `AlertDialogContent`, `AlertDialogAction`, `AlertDialogCancel` + parts | Parts for a blocking confirmation dialog. | `AlertDialog` (same parts) |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/feedback-status-confirmdialog.webp" width="120" alt="ConfirmDialog"> | [`ConfirmDialog`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/feedback-and-status.md#confirmdialog), `ConfirmationDialog`, `CustomAlertDialog` | Controlled confirm / cancel dialog. `ConfirmationDialog` brings its own trigger, icon and an optional Zod form; `CustomAlertDialog` is the free-form alert-dialog variant. | `ConfirmDialog`, `ConfirmationDialog`, `CustomAlertDialog` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/feedback-status-customdialog.webp" width="120" alt="CustomDialog"> | [`CustomDialog`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/feedback-and-status.md#customdialog) | Ready-made dialog with trigger, icon, title, body and footer. The `#trigger` slot is the trigger itself (as-child): put a `Button` in it, not inside another button. | `CustomDialog` |
-| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/feedback-status-emptystate.webp" width="120" alt="EmptyState"> | [`EmptyState`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/feedback-and-status.md#emptystate) | Icon in a tinted well, title, description and action; not-found, unauthorized, generic, empty, offline, search and maintenance presets. | `EmptyState` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/feedback-status-emptystate.webp" width="120" alt="EmptyState"> | [`EmptyState`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/feedback-and-status.md#emptystate) | Illustration, title, description and action, by kind (empty, search, not-found, unauthorized); `compact` size. | `EmptyState` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/feedback-status-errorstate.webp" width="120" alt="ErrorState"> | [`ErrorState`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/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-vue@0/docs/previews/feedback-status-progress.webp" width="120" alt="Progress"> | [`Progress`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/feedback-and-status.md#progress), `ProgressField`, `CircularProgress` | Linear bar, circular ring with a label, and a labelled progress field. | `Progress`, `CircularProgress`, `ProgressField` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/feedback-status-scrollprogress.webp" width="120" alt="ScrollProgress"> | [`ScrollProgress`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/feedback-and-status.md#scrollprogress) | Hairline that tracks the window or a scrollable `target` (VueUse `useWindowScroll` / `useScroll`). `DocProgress` composes it. | `ScrollProgress` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/feedback-status-spinner.webp" width="120" alt="Spinner"> | [`Spinner`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/feedback-and-status.md#spinner) | Loading spinner in several styles and colours. | `Spinner` |
@@ -609,7 +622,7 @@ The ones that cost the most time. Every error message, with its fix, is in
 | `getActivePinia()` was called but there was no active Pinia | `app.use(createPinia())` before mount (the Nuxt module does it) |
 | A map renders as an empty box under SSR, or `Cannot find package 'leaflet'` | wrap it in `<ClientOnly>`; `bun add leaflet @vue-leaflet/vue-leaflet` ([maps](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/guides/maps.md#browser-only)) |
 | `PdfPeerMissingError: … needs the optional peers` when rendering a PDF | `bun add react @react-pdf/renderer@^4.9` |
-| `Cannot find module '#standard-fonts/Helvetica'` on every request of a server with no `node_modules` | `nxgtMaterial: { pdf: { bundleStandardFonts: true } }`, or `pdfkitStandardFonts()` from `/vite` ([PDF guide](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/guides/pdf.md#fonts-on-a-fully-inlined-server)) |
+| `Cannot find module '#standard-fonts/Helvetica'` on every request of a server with no `node_modules` | `nxgtMaterial: { pdf: { bundle: true } }` (Nuxt) or `nxgtMaterial({ pdf: { bundle: true } })` from `/vite` ([PDF guide](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/guides/pdf.md#fonts-on-a-fully-inlined-server)) |
 | `Cannot find module '…/pdfkit/js/standard-fonts/Helvetica.cjs'` from a Nuxt or Nitro production server | use the Nuxt module, or add pdfkit's font files to `nitro.externals.traceInclude` ([troubleshooting](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/troubleshooting.md#cannot-find-module-pdfkitjsstandard-fontshelveticacjs)) |
 | CSS or a test selecting `[data-variant=destructive]` on a menu item stops matching | menu items render `data-variant="error"`, for `variant="error"` and the deprecated `"destructive"` alike: select `[data-variant=error]` |
 

package/dist/{Button-CWmzvv9p.js → Button-CEvi_i4g.js}

@@ -1,5 +1,5 @@
 import { t as e } from "./utils-CykWQ0iJ.js";
-import { t } from "./use-material-translation-COoBTGpB.js";
+import { t } from "./use-material-translation-CHacJbhU.js";
 import { Comment as n, Fragment as r, Text as i, computed as a, createBlock as o, createElementBlock as s, createElementVNode as c, createTextVNode as l, createVNode as u, defineComponent as d, guardReactiveProps as f, h as p, inject as ee, isVNode as m, mergeProps as h, normalizeClass as g, normalizeProps as _, onBeforeUnmount as v, openBlock as y, provide as te, ref as b, renderSlot as x, shallowRef as S, unref as C, useAttrs as ne, useSlots as w, watch as T, withCtx as E } from "vue";
 import { Primitive as re, TooltipArrow as D, TooltipContent as O, TooltipPortal as k, TooltipProvider as A, TooltipRoot as j, TooltipTrigger as M, useForwardPropsEmits as N } from "reka-ui";
 import { cva as P } from "class-variance-authority";
@@ -354,7 +354,7 @@ var V = ie(() => {
 		}, 16));
 	}
 }), G = Symbol("named-control"), K = {
-	primary: "text-primary dark:text-[color-mix(in_oklab,var(--color-primary)_40%,white)]",
+	primary: "text-primary-text",
 	secondary: "text-secondary",
 	success: "text-success dark:text-[color-mix(in_oklab,var(--color-success)_85%,white)]",
 	info: "text-info",
@@ -362,7 +362,7 @@ var V = ie(() => {
 	error: "text-[color-mix(in_oklab,var(--color-error)_85%,black)] dark:text-[color-mix(in_oklab,var(--color-error)_70%,white)]",
 	default: "text-foreground"
 }, q = {
-	primary: "[&_svg]:data-[slot=icon]:text-primary dark:[&_svg]:data-[slot=icon]:text-[color-mix(in_oklab,var(--color-primary)_40%,white)]",
+	primary: "[&_svg]:data-[slot=icon]:text-primary-text",
 	secondary: "[&_svg]:data-[slot=icon]:text-secondary",
 	success: "[&_svg]:data-[slot=icon]:text-success dark:[&_svg]:data-[slot=icon]:text-[color-mix(in_oklab,var(--color-success)_85%,white)]",
 	info: "[&_svg]:data-[slot=icon]:text-info",
@@ -370,7 +370,7 @@ var V = ie(() => {
 	error: "[&_svg]:data-[slot=icon]:text-[color-mix(in_oklab,var(--color-error)_85%,black)] dark:[&_svg]:data-[slot=icon]:text-[color-mix(in_oklab,var(--color-error)_70%,white)]",
 	default: "[&_svg]:data-[slot=icon]:text-foreground"
 }, le = {
-	primary: "[&_svg]:stroke-primary dark:[&_svg]:stroke-[color-mix(in_oklab,var(--color-primary)_40%,white)]",
+	primary: "[&_svg]:stroke-primary-text",
 	secondary: "[&_svg]:stroke-secondary",
 	success: "[&_svg]:stroke-success dark:[&_svg]:stroke-[color-mix(in_oklab,var(--color-success)_85%,white)]",
 	info: "[&_svg]:stroke-info",