@nxgt/material-vue 0.32.0 → 0.33.0

package/CHANGELOG.md

@@ -1,5 +1,48 @@
 # @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

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
 
@@ -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/{camera-DlWK0PLP.js → camera-B063QUeM.js}

@@ -1,5 +1,5 @@
 import { t as e } from "./utils-CykWQ0iJ.js";
-import { gr as t, mr as n, pr as r } from "./components-Dqg7KwA2.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";

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;
+}