@nxgt/material-vue 0.31.0 → 0.33.0

package/CHANGELOG.md

@@ -1,5 +1,78 @@
 # @nxgt/material-vue
 
+## 0.33.0
+
+### Minor Changes
+
+- [#479](https://github.com/softistx/nxgt-material/pull/479) [`6850b50`](https://github.com/softistx/nxgt-material/commit/6850b50d3832b401e32ea25aa356dde9b5684193) Thanks [@SteveGT96](https://github.com/SteveGT96)! - KaTeX's fonts (`Markdown` maths) ship as files: the compiled stylesheet `dist/material-vue.css` no longer inlines its 60 fonts as `data:` URIs, and goes from 1.75 MB to 0.31 MB (about 1 MB to 44 KB gzipped). Its `@font-face` rules point at the 20 `woff2` files in `dist/fonts/katex/`, beside it, through a relative `url()`, so a strict `font-src 'self'` allows them and a browser downloads a font only when a formula draws from it. KaTeX's layout CSS stays in the stylesheet.
+  
+  **Migration:** nothing to import. A bundler that processes the compiled stylesheet (`@import "@nxgt/material-vue"`) emits the fonts as files (Vite inlines the 3.6 KB `KaTeX_Size3` font unless `assetsInlineLimit` is set: see the CSP guide's KaTeX fonts section). An app that serves `dist/material-vue.css` itself must serve `dist/fonts/` beside it, at the same relative path; without it, math renders in the system fonts (`\mathbb`, large delimiters and roots look wrong), the rest of the page is unaffected. The Tailwind route (`styles.css`) is unchanged.
+
+- [#474](https://github.com/softistx/nxgt-material/pull/474) [`f4185a4`](https://github.com/softistx/nxgt-material/commit/f4185a49a03100e107092927eedf59893b5bd73a) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `NonceProvider` gives the page's Content Security Policy nonce to every component below it. Render it once at the root, on the server and on the client, with the request's nonce: `<NonceProvider :nonce="nonce">`. A nested `NonceProvider` without a `nonce` inherits the outer one's. The Nuxt module registers it; with nuxt-security, `useNonce()` on the server and `getCspNonce()` on the client.
+  
+  - It renders reka's `ConfigProvider` with `nonce`, so reka's `Select`, `Combobox`, `ScrollArea` and `Splitter` stamp their `<style>`; it carries over the `dir`, `locale`, `scrollBody`, `teleportTo` and `useId` of a `ConfigProvider` above it.
+  - `InputOTP` (and `OtpField`) pass it to vue-input-otp when given no `nonce` prop, and `RichTextEditor` sets tiptap's `injectNonce` from it.
+  - `useCspNonce()` (`@nxgt/material-vue/composables`, auto-imported by the Nuxt module) is a computed ref of the provider's nonce, else reka's `ConfigProvider` nonce, else `undefined`, for a `<style>` of your own.
+  - `getCspNonce()` and `setCspNonce()` are re-exported from `@nxgt/material-core/csp-nonce` by `@nxgt/material-vue/lib` and the main entry. `setCspNonce` does nothing on a server.
+  
+  **Migration:** a `<ConfigProvider :nonce="nonce">` wrapped around the app for reka, as the CSP guide of 0.28.0 showed, still works; search for it and replace it with `<NonceProvider :nonce="nonce">`, which also reaches `InputOTP` and `RichTextEditor`, and drop the `:nonce` passed to each `InputOTP`. `NonceProvider` keeps the nonce for the code outside Vue (`setCspNonce`) once mounted, never in setup, so one request's nonce never reaches another's.
+
+- [#478](https://github.com/softistx/nxgt-material/pull/478) [`525ca57`](https://github.com/softistx/nxgt-material/commit/525ca577bb5e186a84a900088ec286bcca6c8b94) Thanks [@SteveGT96](https://github.com/SteveGT96)! - The stylesheet (`styles.css` and `dist/material-vue.css`) now carries `InputOTP`'s rules (`input-otp.css`: the hidden input's selection, caret and autofill), the ones vue-input-otp adds on mount through a `<style>`. On a page under a strict Content Security Policy without the nonce, that `<style>` is still blocked and reported, but `InputOTP` renders right; under a `NonceProvider` it carries the nonce and nothing is reported. `ImageCropper` (vue-advanced-cropper) is measured: it injects no `<style>`, and the Content Security Policy guide now says so.
+  
+  **Migration:** none for an app that imports the stylesheet, as the README asks (`@import "@nxgt/material-vue/styles.css"`, or `dist/material-vue.css`). A route served `'unsafe-inline'` in `style-src-elem` only for `ImageCropper` can drop it and keep the nonce.
+
+- [#480](https://github.com/softistx/nxgt-material/pull/480) [`634a58e`](https://github.com/softistx/nxgt-material/commit/634a58e3353ebe340e87b0f21858396aa4354654) Thanks [@SteveGT96](https://github.com/SteveGT96)! - zod is no longer bundled, and the library builds no zod schema while it loads, so a page under a strict Content Security Policy (a `script-src` without `'unsafe-eval'`) can stop zod's `new Function` probe with one `z.config({ jitless: true })`.
+  
+  - `zod` stays a dependency (`^4.4.3`), imported at runtime: the library now uses the zod your app resolves, one copy when your range overlaps.
+  - New `openingHoursSchema()` and `attributeFormSchema()`: the zod schemas of one `OpeningHour` and of `AttributeForm`, built on the first call and the same schema after. `AttributeForm` builds its schema in its setup, not at import; `toAttributeFormSchema()` is unchanged.
+  - `OpeningHoursSchema` and the attribute form's `schema` are **deprecated** (removed in 1.0). They still work: each is built on its first use and behaves as its factory's schema (`.parse`, `.safeParse`, `.shape`, `.extend`, `instanceof z.ZodObject`), but it is not the same object (`===`), and a `.meta()` or `registry.add()` on it is not seen through the factory's schema.
+  
+  **Migration:**
+  
+  1. Install zod in the app if it is not there yet (`bun add zod`): a strict package manager (pnpm) does not let the app import a package it does not list. Keep it inside `^4.4.3`.
+  2. Search for `OpeningHoursSchema` and replace it with `openingHoursSchema()`; search for `schema` imported from `@nxgt/material-vue` (or `/components`) and replace it with `attributeFormSchema()`.
+  3. Under a strict CSP, call `z.config({ jitless: true })` in a module the client entry imports first (in Nuxt, a plugin named `00.zod.client.ts`), before the first schema is built; the `EvalError` / `'unsafe-eval'` report from zod then stops. Build your own schemas inside functions when their module may load before that one. `docs/guides/csp.md`, "zod and `'unsafe-eval'`".
+
+### Patch Changes
+
+- [#467](https://github.com/softistx/nxgt-material/pull/467) [`f621c1e`](https://github.com/softistx/nxgt-material/commit/f621c1e0c75974cd6d1c22728719d47c1acd9a24) Thanks [@SteveGT96](https://github.com/SteveGT96)! - A Content Security Policy guide (`docs/guides/csp.md`): the directives to send, the components that still inject a `<style>`, the zod and KaTeX settings, a self-hosted font, the per-request nonce; troubleshooting entries for the reports a strict policy sends, and a roadmap line.
+
+- [#481](https://github.com/softistx/nxgt-material/pull/481) [`6facbb0`](https://github.com/softistx/nxgt-material/commit/6facbb0d05b67b4235f1451369e5b85d9c59fc54) Thanks [@SteveGT96](https://github.com/SteveGT96)! - The CSP guide shows how to self-host Inter under a strict `font-src` (`@fontsource-variable/inter`, the `--font-sans` token, the fallback stack, `cspAssetsInlineLimit`, now also exported by `@nxgt/material-vue/vite`), the theming guide has a Fonts section, and troubleshooting has an entry for a font refused from Google Fonts. The guide's last section, now "Status", states the CSP work is complete.
+
+- [#479](https://github.com/softistx/nxgt-material/pull/479) [`e10c717`](https://github.com/softistx/nxgt-material/commit/e10c717bb6e3b74f444a2551b72314ddcd6c864c) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `@import "@nxgt/material"` (and `@nxgt/material-vue`) in CSS now resolves to the stylesheet under Vite and esbuild: the `style` condition comes before `import` in the `.` export, because those tools always add `import` when they resolve a CSS `@import`.
+- Updated dependencies [[`3a2889d`](https://github.com/softistx/nxgt-material/commit/3a2889d71f1bfc9039ef43db916f3be3bf287ccd), [`634a58e`](https://github.com/softistx/nxgt-material/commit/634a58e3353ebe340e87b0f21858396aa4354654)]:
+  - @nxgt/material-core@0.9.0
+
+## 0.32.0
+
+### Minor Changes
+
+- [#521](https://github.com/softistx/nxgt-material/pull/521) [`b76cd9a`](https://github.com/softistx/nxgt-material/commit/b76cd9ae3cc4f4d0f1b20cec31c9471819ffcd3c) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `Autocomplete` can search a server (softistx/nxgt-material#514). Fixes [#514](https://github.com/softistx/nxgt-material/issues/514).
+  
+  - **Server search.** `onSearch(query, { signal })` (Vue: the function prop `on-search`, so `@search="fn"` binds it too) is called once typing pauses and its results become the list. Each search aborts the previous one (pass `signal` to `fetch`), and a response that lands after a newer one is dropped, even from an API that ignores the signal. `minQueryLength` (Vue: `min-query-length`, default 1) is how many characters it waits for; below it the list says "Type at least N characters to search." A rejected search is shown and announced ("The search failed. Try again.") and reported to `onSearchError` (Vue: `@search-error`). `options` is now optional: with `onSearch` it is the list before a search and the selected options' labels, and a picked option keeps its chip once a new search no longer returns it.
+  - **Controlled mode.** `loading` and `searchError` (Vue: `search-error`), beside `onQueryChange` (Vue: `@query-change`), for an app that fetches `options` itself.
+  - **A configurable debounce.** `debounceMs` (Vue: `debounce-ms`), 250 ms by default, sets the pause before `onSearch` and `onQueryChange`.
+  - **Accent-insensitive matching.** `filter`: `'accent-insensitive'` (the default without `onSearch`), `'none'` (the default with `onSearch`) or `(option, query) => boolean`. The default compares the label or value with the query lowercased in the provider's language and stripped of accents, so "e" finds "École" and "orle" finds "Orléans". Vue's exported `filterAutocompleteOptions` matches the same way and takes an optional `locale`.
+  - **Accessibility.** A polite live region announces "Loading…", then "N results" / "No results" (or the failure) once the search answers or typing pauses, not on every keystroke; the list is `aria-busy` while loading. New strings: `material.autocomplete.loading`, `.results`, `.search-error`, `.min-query` (en, fr). The keyboard works as before.
+  - React: clearing a single `Autocomplete`'s input no longer throws (`Cannot read properties of null (reading 'value')`).
+  - `@nxgt/material-core` adds `/debounce` (the `debounce` both libraries' `SearchField` kept a copy of, still exported by both, Vue now with its `Debounced` type), `/text-match` (`foldText`, `matchesText`) and `/async-search` (`createAsyncSearch`, `searchAnnouncement`).
+  
+  Apps that built their own search field and result list while waiting for this (marked `Temporary, until material [#514](https://github.com/softistx/nxgt-material/issues/514)`) can replace it with `onSearch` and remove the workaround.
+  
+  **Behaviour changes, no API removed.**
+  
+  - Local matching ignores accents by default, so a query can keep more options than before. To match as before, pass your own `filter`, for example `filter={(option, query) => option.label.toLowerCase().includes(query.toLowerCase())}`; to show `options` exactly as given (filtered on your server), pass `filter="none"`.
+  - `onQueryChange` (`@query-change`) now runs 250 ms after typing pauses; it was a fixed 1 s in `@nxgt/material` and 300 ms in `@nxgt/material-vue`. Search for `onQueryChange` / `@query-change`, and add `debounceMs={1000}` (`:debounce-ms="300"`) where the old pause mattered — or move the fetch to `onSearch`.
+  - React: the list's empty text is no longer a live region of its own (Base UI's `ComboboxEmpty` had `role="status"`); the field's one status region (`[data-slot="autocomplete-status"]`) says "No results" instead. A test that found the empty text by `role="status"` finds it by its text.
+
+- [#518](https://github.com/softistx/nxgt-material/pull/518) [`102f3b8`](https://github.com/softistx/nxgt-material/commit/102f3b822ea8d1e83aaffec8b6739ce4fdb5a599) Thanks [@SteveGT96](https://github.com/SteveGT96)! - A `RadioGroup` option can be disabled on its own (softistx/nxgt-material#513): `options` take `disabled?: boolean`, in `RadioGroup` and `RadioGroupFormField` of `@nxgt/material` and in `RadioGroupField` and `RadioGroupFormField` of `@nxgt/material-vue`. A disabled option is announced as disabled, skipped by the arrow keys (as the Radix and Reka UI primitives do), and drawn with a muted label (4.5:1 in both themes) and a faded radio; the group's own `disabled` still disables every option. `@nxgt/material` also exports the `RadioGroupOption` type, as `@nxgt/material-vue` does. Apps can drop the list of unavailable choices they kept apart (`Temporary, until material [#513](https://github.com/softistx/nxgt-material/issues/513)`). Fixes [#513](https://github.com/softistx/nxgt-material/issues/513).
+
+### Patch Changes
+
+- [#519](https://github.com/softistx/nxgt-material/pull/519) [`18f30c1`](https://github.com/softistx/nxgt-material/commit/18f30c1cc6cc41c2b73a43fad2501b7db2bbc016) Thanks [@SteveGT96](https://github.com/SteveGT96)! - package.json names its repository, so issue reports route to it. Each package now has a `repository` field (`git+https://github.com/softistx/nxgt-material.git`, with its `directory` under `packages/`).
+- Updated dependencies [[`b76cd9a`](https://github.com/softistx/nxgt-material/commit/b76cd9ae3cc4f4d0f1b20cec31c9471819ffcd3c), [`18f30c1`](https://github.com/softistx/nxgt-material/commit/18f30c1cc6cc41c2b73a43fad2501b7db2bbc016)]:
+  - @nxgt/material-core@0.8.0
+
 ## 0.31.0
 
 ### Minor Changes

package/README.md

@@ -75,6 +75,12 @@ stores silently split between two instances.
 | `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` |
 
+**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),
+add it to the app (`bun add zod`) when your own code imports it. Under a
+strict Content Security Policy, call `z.config({ jitless: true })` first:
+[zod and `'unsafe-eval'`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/guides/csp.md#zod-and-unsafe-eval).
+
 The tarball ships `dist/`, `docs/`, the stylesheets (`lib/styles.css`, the
 component stylesheets it imports, `lib/components/**/*.css`, and
 `lib/map/map.css`) and the Nuxt module (`lib/nuxt`, with the `lib/vite/index.ts` it imports), and, from the
@@ -93,13 +99,17 @@ Import the stylesheet **explicitly**, in your Tailwind v4 entry, right after
 @import "@nxgt/material-vue/styles.css";
 ```
 
+Toaster and InputOTP take their CSS from this stylesheet: without it they render unstyled.
+
 `styles.css` is the **source** `@theme` layer and already declares the
 `@source` that makes your build generate the utilities used inside the
 components. It only applies when imported in the same file as
 `@import "tailwindcss"`: a second stylesheet (another Nuxt `css[]` entry)
 starts a second pipeline and the tokens never reach the app. Apps without
 Tailwind import the compiled `@nxgt/material-vue` style condition instead —
-never both. Details in [theming](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/guides/theming.md).
+never both. The compiled file loads KaTeX's fonts (`Markdown` maths) as
+files from `dist/fonts/katex/`, beside it, which `font-src 'self'` allows (Vite inlines the 3.6 KB `KaTeX_Size3` font unless `assetsInlineLimit` is set: see the CSP guide's KaTeX fonts section); no
+extra import is needed. Details in [theming](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/guides/theming.md).
 
 The required-field mark after a `Label` is drawn by this stylesheet too, so
 a page or test rendered without it shows no `*`.
@@ -168,16 +178,16 @@ does not add the stylesheet. Options and the client-only widgets are in
 | `@nxgt/material-vue/components` | UI components and `*FormField` wrappers ([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/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`, … ([helpers](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/guides/helpers.md)) |
+| `@nxgt/material-vue/composables` | `useTheme`, `useIsClient`, `useIsMobile`, `useSearchParam`, `useCspNonce`, … ([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 ([helpers](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/guides/helpers.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/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/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)) |
+| `@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)) |
 
 ## Usage
 
@@ -317,6 +327,7 @@ Each area a consumer starts from has its own page under `docs/guides/`.
 | [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 |
 | [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 |
 | [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,
@@ -365,6 +376,7 @@ React-only for now: `StepperIndicator` ([roadmap](https://cdn.jsdelivr.net/npm/@
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/primitives-toggle.webp" width="120" alt="Toggle"> | [`Toggle`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/primitives.md#toggle), `ToggleGroup`, `ToggleGroupItem` | Pressable on / off button: default or outline, three sizes. | `Toggle` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/primitives-togglegroup.webp" width="120" alt="ToggleGroup"> | [`Toggle`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/primitives.md#togglegroup), `ToggleGroup`, `ToggleGroupItem` | Single or multiple toggle group sharing variant and size. | `ToggleGroup`, `ToggleGroupItem`, `ToggleGroupSeparator` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/primitives-activity.webp" width="120" alt="Activity"> | [`Activity`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/primitives.md#activity) | Keeps its content mounted and hides it with a boolean `visible`. | `Activity` |
+| — | [`NonceProvider`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/primitives.md#nonceprovider) | Gives the page's CSP nonce to every component below; `useCspNonce()` reads it ([CSP guide](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/guides/csp.md#nonceprovider)). | `NonceProvider` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/primitives-scrollarea.webp" width="120" alt="ScrollArea"> | [`ScrollArea`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/primitives.md#scrollarea), `ScrollBar` | Scroll container with a thin custom scrollbar that matches the theme. | `ScrollArea`, `ScrollBar` |
 
 ### Buttons & actions
@@ -409,10 +421,10 @@ React-only for now: `StepperIndicator` ([roadmap](https://cdn.jsdelivr.net/npm/@
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/form-fields-ratingfield.webp" width="120" alt="RatingField"> | [`RatingField`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/form-fields.md#ratingfield) · `RatingFormField` | Star rating with hover preview, click-to-clear and a read-only mode. | `RatingField`, `RatingFormField` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/form-fields-slider.webp" width="120" alt="Slider"> | [`SliderField`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/form-fields.md#slider) · `SliderFormField`, `Slider` | Labelled single or range slider with a value readout, ticks and leading / trailing content. | `Slider`, `SliderField` (alias), `SliderFormField` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/form-fields-switch.webp" width="120" alt="Switch"> | [`SwitchField`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/form-fields.md#switch) · `SwitchFormField`, `Switch` | Toggle switch, optionally in a labelled, bordered row. | `Switch`, `SwitchField` (alias), `SwitchFormField` |
-| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/form-fields-attributes.webp" width="120" alt="Attributes"> | [`AttributesField`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/form-fields.md#attributes), `AttributesList`, `AttributeDialog`, `AttributeForm` · `AttributesFormField`, `AttributeValuesForm`, `AttributeValueFormField` · `AttributeValuesFormFieldSet` | Editor for typed custom attributes (string, number, date, select, rich text…). `AttributesField` takes `error` and `helperText`; `AttributesFormField` takes `helperText` and follows `resetForm` / `setFieldValue`. | `AttributesField`, `AttributesList`, `AttributeDialog`, `AttributeForm`, `AttributeValuesForm`, `AttributesFormField`, `AttributeValuesFormFieldSet`, `AttributeValueFormField` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/form-fields-attributes.webp" width="120" alt="Attributes"> | [`AttributesField`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/form-fields.md#attributes), `AttributesList`, `AttributeDialog`, `AttributeForm` · `AttributesFormField`, `AttributeValuesForm`, `AttributeValueFormField` · `AttributeValuesFormFieldSet` | Editor for typed custom attributes (string, number, date, select, rich text…). `AttributesField` takes `error` and `helperText`; `AttributesFormField` takes `helperText` and follows `resetForm` / `setFieldValue`. | `AttributesField`, `AttributesList`, `AttributeDialog`, `AttributeForm`, `AttributeValuesForm`, `AttributesFormField`, `AttributeValuesFormFieldSet`, `AttributeValueFormField`, `attributeFormSchema()` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/form-fields-contacts.webp" width="120" alt="Contacts"> | [`Contacts`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/form-fields.md#contacts), `ContactDialog`, `ContactItem` (deprecated) · `ContactsFormField` | Typed contact list (phone, email, URL…) with an add / edit dialog. | `Contacts`, `ContactItem`, `ContactDialog`, `ContactsFormField` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/form-fields-postaladdress.webp" width="120" alt="PostalAddress"> | [`PostalAddress`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/form-fields.md#postaladdress), `PostalAddressDialog` · `PostalAddressFormField` | Address card with an edit dialog. | `PostalAddress`, `PostalAddressDialog`, `PostalAddressFormField` |
-| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/form-fields-openinghours.webp" width="120" alt="OpeningHours"> | [`OpeningHours`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/form-fields.md#openinghours), `OpeningHoursDialog`, `OpeningHoursItem` (deprecated) · `OpeningHoursFormField` | Weekly opening hours with an add / edit dialog. | `OpeningHours`, `OpeningHoursDialog`, `OpeningHoursItem`, `OpeningHoursFormField` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/form-fields-openinghours.webp" width="120" alt="OpeningHours"> | [`OpeningHours`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/form-fields.md#openinghours), `OpeningHoursDialog`, `OpeningHoursItem` (deprecated) · `OpeningHoursFormField` | Weekly opening hours with an add / edit dialog. | `OpeningHours`, `OpeningHoursDialog`, `OpeningHoursItem`, `OpeningHoursFormField`, `openingHoursSchema()` (`OpeningHoursSchema` deprecated) |
 
 ### Date & time
 
@@ -433,7 +445,7 @@ React-only for now: `StepperIndicator` ([roadmap](https://cdn.jsdelivr.net/npm/@
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/selection-choice-selectfield.webp" width="120" alt="SelectField"> | [`SelectField`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/selection-and-choice.md#selectfield) · `SelectFormField` | Labelled select built from `options`, with an `#option` slot. | `SelectField`, `SelectFormField` |
 | — | [Combobox](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/selection-and-choice.md#combobox) | The raw combobox primitives are not in `@nxgt/material-vue`. Use [`ComboboxField`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/selection-and-choice.md#comboboxfield) for a searchable single select, [`Autocomplete`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/selection-and-choice.md#autocomplete) for several values or free text, or the `Command` parts (Overlays & menus) for a hand-built list. | `Combobox` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/selection-choice-comboboxfield.webp" width="120" alt="ComboboxField"> | [`ComboboxField`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/selection-and-choice.md#comboboxfield) · `ComboboxFormField` | Labelled, searchable single select over `{ value, label }` options, in a popover. | `ComboboxField`, `ComboboxFormField` |
-| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/selection-choice-autocomplete.webp" width="120" alt="Autocomplete"> | [`Autocomplete`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/selection-and-choice.md#autocomplete) · `AutocompleteFormField` | Single or multiple (chips) autocomplete typed by its options, with free-solo values, a query event and option slots. | `Autocomplete`, `AutocompleteFormField` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/selection-choice-autocomplete.webp" width="120" alt="Autocomplete"> | [`Autocomplete`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/selection-and-choice.md#autocomplete) · `AutocompleteFormField` | Single or multiple (chips) autocomplete typed by its options, with free-solo values, accent-insensitive matching, a debounced server search and option slots. | `Autocomplete`, `AutocompleteFormField` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/selection-choice-checkbox.webp" width="120" alt="Checkbox"> | [`Checkbox`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/selection-and-choice.md#checkbox) · `CheckboxFormField` | Checkbox with label, helper text and an indeterminate state; without a label, the bare Reka UI box. | `Checkbox`, `CheckboxFormField` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/selection-choice-checkboxgroup.webp" width="120" alt="CheckboxGroup"> | [`CheckboxGroup`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/selection-and-choice.md#checkboxgroup) · `CheckboxGroupFormField` | Checkbox list built from `options`, valued as `string[]`. | `CheckboxGroup`, `CheckboxGroupFormField` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/selection-choice-radiogroup.webp" width="120" alt="RadioGroup"> | [`RadioGroupField`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/selection-and-choice.md#radiogroup) · `RadioGroupFormField`, `RadioGroup`, `RadioGroupItem` | Labelled radio group built from `options`, horizontal or vertical. | `RadioGroupField` (alias), `RadioGroup`, `RadioGroupItem`, `RadioGroupFormField` |
@@ -582,6 +594,7 @@ The ones that cost the most time. Every error message, with its fix, is in
 | Symptom | Fix |
 | --- | --- |
 | Components render unstyled, no console error | import `styles.css` right after `@import "tailwindcss"`, in the same file ([getting started](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/getting-started.md#styles)) |
+| Toast or OTP input unstyled | import `@nxgt/material-vue/styles.css` (or `dist/material-vue.css`) |
 | `<Icon>` is blank | serve `public/assets/icons/sprites/<style>.svg` |
 | `Cannot find package '@nxgt/material-core'` at server boot | add `@nxgt/material-core` wherever `@nxgt/material-vue` is in `ssr.noExternal` or `--external` ([troubleshooting](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/troubleshooting.md#cannot-find-package-nxgtmaterial-core)) |
 | `getActivePinia()` was called but there was no active Pinia | `app.use(createPinia())` before mount (the Nuxt module does it) |

package/dist/{Button-CNbJT5qV.js → Button-DEA5W6O3.js}

@@ -1,5 +1,5 @@
 import { t as e } from "./utils-CykWQ0iJ.js";
-import { t } from "./use-material-translation-Do6ztdtV.js";
+import { t } from "./use-material-translation-CaHS6oZz.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 b, ref as x, renderSlot as S, shallowRef as C, unref as w, useAttrs as te, useSlots as ne, watch as T, withCtx as E } from "vue";
 import { Primitive as D, TooltipArrow as O, TooltipContent as k, TooltipPortal as A, TooltipProvider as re, TooltipRoot as j, TooltipTrigger as M, useForwardPropsEmits as N } from "reka-ui";
 import { cva as P } from "class-variance-authority";

package/dist/{HoverCardTrigger-BTAHE6wK.js → HoverCardTrigger-CjSteFgk.js}

@@ -1,6 +1,6 @@
 import { t as e } from "./utils-CykWQ0iJ.js";
-import { t } from "./use-material-translation-Do6ztdtV.js";
-import { t as n } from "./Button-CNbJT5qV.js";
+import { t } from "./use-material-translation-CaHS6oZz.js";
+import { t as n } from "./Button-DEA5W6O3.js";
 import { t as r } from "./use-inert-others-CtGqZKR8.js";
 import { t as i } from "./field-name-attribute-Bl7LSVK0.js";
 import { computed as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createTextVNode as u, createVNode as d, defineComponent as f, getCurrentInstance as p, guardReactiveProps as m, isRef as h, mergeProps as g, normalizeClass as _, normalizeProps as v, onMounted as ee, onUpdated as y, openBlock as b, renderSlot as x, toDisplayString as S, unref as C, useAttrs as w, useId as T, useTemplateRef as E, vModelText as D, withCtx as O, withDirectives as k } from "vue";

package/dist/{camera-rJmgxIEn.js → camera-B063QUeM.js}

@@ -1,8 +1,8 @@
 import { t as e } from "./utils-CykWQ0iJ.js";
-import { gr as t, mr as n, pr as r } from "./components-Dxy9DvEe.js";
-import { t as i } from "./use-material-translation-Do6ztdtV.js";
-import { t as a } from "./Button-CNbJT5qV.js";
-import { t as o } from "./icon-button-DXXjxBgr.js";
+import { _r as t, hr as n, mr as r } from "./components-CmIOfRO4.js";
+import { t as i } from "./use-material-translation-CaHS6oZz.js";
+import { t as a } from "./Button-DEA5W6O3.js";
+import { t as o } from "./icon-button-CWcOcNHr.js";
 import { createBlock as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, createTextVNode as d, createVNode as f, defineComponent as p, normalizeClass as m, openBlock as h, ref as g, renderSlot as _, shallowRef as v, toDisplayString as y, unref as b, withCtx as x } from "vue";
 import { Pause as S, Play as C } from "@lucide/vue";
 //#region lib/components/ui/media/camera/camera-content.vue?vue&type=script&setup=true&lang.ts

package/dist/components/components.css

@@ -6,7 +6,8 @@
  * The code theme (CodeBlock); PdfReader's text layer, highlights and pdf.js's
  * annotation layer; KaTeX (Markdown), highlight.js (RichTextEditor code
  * blocks), vue-sonner (Toaster), vue-advanced-cropper (ImageCropper); and the
- * components styled by a stylesheet of their own. */
+ * components styled by a stylesheet of their own, input-otp.css among them:
+ * the rules vue-input-otp also injects, here for a strict CSP. */
 @import "./ui/display/code/code-moonlight.css";
 @import "./ui/media/pdf-viewer/pdf-viewer.css";
 @import "./ui/media/pdf-viewer/pdf-annotation-layer.css";
@@ -15,6 +16,7 @@
 @import "vue-sonner/style.css";
 @import "vue-advanced-cropper/dist/style.css";
 @import "./ui/feedback/spinner/spinner.css";
+@import "./ui/fields/otp-field/input-otp.css";
 @import "./ui/media/image-cropper/partials/image-cropper-canvas.css";
 @import "./ui/actions/button-group/button-group.css";
 @import "./ui/primitives/label/label.css";

package/dist/components/ui/fields/otp-field/input-otp.css

@@ -0,0 +1,48 @@
+/* The rules input-otp (React, 1.4.2) and vue-input-otp (0.4.0) add on mount,
+ * through `insertRule` into a `<style id="input-otp-style">`: the hidden
+ * input's caret, selection and autofill stay invisible behind the slots.
+ * Here so a strict CSP blocks nothing. @nxgt/material strips input-otp's
+ * injection at build (build/strip-style-injection.ts); vue-input-otp is
+ * external, still injects, and takes the nonce (NonceProvider). The same file
+ * in both libraries (scripts/shared-paths.ts). */
+/* biome-ignore-all lint/complexity/noImportantStyles: input-otp's own rules */
+[data-input-otp]::selection {
+	background: transparent !important;
+	color: transparent !important;
+}
+
+/* Two rules: a browser that does not know one pseudo-class drops the list. */
+[data-input-otp]:autofill {
+	background: transparent !important;
+	color: transparent !important;
+	border-color: transparent !important;
+	opacity: 0 !important;
+	box-shadow: none !important;
+	-webkit-box-shadow: none !important;
+	-webkit-text-fill-color: transparent !important;
+}
+
+[data-input-otp]:-webkit-autofill {
+	background: transparent !important;
+	color: transparent !important;
+	border-color: transparent !important;
+	opacity: 0 !important;
+	box-shadow: none !important;
+	-webkit-box-shadow: none !important;
+	-webkit-text-fill-color: transparent !important;
+}
+
+@supports (-webkit-touch-callout: none) {
+	[data-input-otp] {
+		letter-spacing: -0.6em !important;
+		font-weight: 100 !important;
+		font-stretch: ultra-condensed;
+		font-optical-sizing: none !important;
+		left: -1px !important;
+		right: 1px !important;
+	}
+}
+
+[data-input-otp] + * {
+	pointer-events: all !important;
+}