@nxgt/material-vue 0.31.0 → 0.33.0

package/dist/{use-heading-spy-_dk8kGwL.js → use-heading-spy-DimKb49j.js}

@@ -1,28 +1,29 @@
-import { a as e } from "./i18n-provider-BPK68eqM.js";
+import { a as e } from "./i18n-provider-CiVi05fs.js";
 import { c as t, d as n, f as r, l as i, n as a, u as o } from "./number.utils-Cy1z6qI7.js";
-import { computed as s, getCurrentInstance as c, onMounted as l, ref as u, toValue as d } from "vue";
-import { useIntersectionObserver as f, useMediaQuery as p, useSSRWidth as m, useStorage as h } from "@vueuse/core";
+import { computed as s, getCurrentInstance as c, inject as l, onMounted as u, ref as d, toValue as f } from "vue";
+import { injectConfigProviderContext as p } from "reka-ui";
+import { useIntersectionObserver as m, useMediaQuery as h, useSSRWidth as g, useStorage as _ } from "@vueuse/core";
 //#region lib/composables/resolve-theme.ts
-function g(e, t) {
+function v(e, t) {
 	let n = e === "light" || e === "dark" ? e : "system";
 	return {
 		theme: n === "system" ? t ? "dark" : "light" : n,
 		preference: n
 	};
 }
-function _(e) {
+function y(e) {
 	typeof document > "u" || (document.documentElement.classList.toggle("dark", e === "dark"), document.documentElement.style.colorScheme = e);
 }
 //#endregion
 //#region lib/composables/use-ssr-media-query.ts
-var v = 1024;
-function y(e) {
-	return c() ? p(e, { ssrWidth: m() ?? v }) : p(e);
+var b = 1024;
+function x(e) {
+	return c() ? h(e, { ssrWidth: g() ?? b }) : h(e);
 }
 //#endregion
 //#region lib/composables/use-theme.ts
-function b() {
-	let e = y("(prefers-color-scheme: dark)"), t = h("theme", null, void 0, { initOnMounted: !0 }), n = s(() => g(t.value, !!e.value));
+function S() {
+	let e = x("(prefers-color-scheme: dark)"), t = _("theme", null, void 0, { initOnMounted: !0 }), n = s(() => v(t.value, !!e.value));
 	return {
 		get theme() {
 			return n.value.theme;
@@ -31,19 +32,19 @@ function b() {
 			return n.value.preference;
 		},
 		updateTheme: (n) => {
-			n === "system" ? t.value = null : t.value = n, _(g(n === "system" ? void 0 : n, !!e.value).theme);
+			n === "system" ? t.value = null : t.value = n, y(v(n === "system" ? void 0 : n, !!e.value).theme);
 		}
 	};
 }
 //#endregion
 //#region lib/composables/use-mobile.ts
-var x = 768;
-function S() {
-	return y(`(max-width: ${x - 1}px)`);
+var C = 768;
+function w() {
+	return x(`(max-width: ${C - 1}px)`);
 }
 //#endregion
 //#region ../../node_modules/date-fns/locale/fr/_lib/formatDistance.js
-var C = {
+var T = {
 	lessThanXSeconds: {
 		one: "moins d’une seconde",
 		other: "moins de {{count}} secondes"
@@ -105,10 +106,10 @@ var C = {
 		one: "presqu’un an",
 		other: "presque {{count}} ans"
 	}
-}, w = (e, t, n) => {
-	let r, i = C[e];
+}, E = (e, t, n) => {
+	let r, i = T[e];
 	return r = typeof i == "string" ? i : t === 1 ? i.one : i.other.replace("{{count}}", String(t)), n?.addSuffix ? n.comparison && n.comparison > 0 ? "dans " + r : "il y a " + r : r;
-}, T = {
+}, D = {
 	date: r({
 		formats: {
 			full: "EEEE d MMMM y",
@@ -136,18 +137,18 @@ var C = {
 		},
 		defaultWidth: "full"
 	})
-}, E = {
+}, O = {
 	lastWeek: "eeee 'dernier à' p",
 	yesterday: "'hier à' p",
 	today: "'aujourd’hui à' p",
 	tomorrow: "'demain à' p'",
 	nextWeek: "eeee 'prochain à' p",
 	other: "P"
-}, D = (e, t, n, r) => E[e], O = {
+}, k = (e, t, n, r) => O[e], A = {
 	narrow: ["av. J.-C", "ap. J.-C"],
 	abbreviated: ["av. J.-C", "ap. J.-C"],
 	wide: ["avant Jésus-Christ", "après Jésus-Christ"]
-}, k = {
+}, j = {
 	narrow: [
 		"T1",
 		"T2",
@@ -166,7 +167,7 @@ var C = {
 		"3ème trimestre",
 		"4ème trimestre"
 	]
-}, A = {
+}, M = {
 	narrow: [
 		"J",
 		"F",
@@ -209,7 +210,7 @@ var C = {
 		"novembre",
 		"décembre"
 	]
-}, j = {
+}, N = {
 	narrow: [
 		"D",
 		"L",
@@ -246,7 +247,7 @@ var C = {
 		"vendredi",
 		"samedi"
 	]
-}, M = {
+}, P = {
 	narrow: {
 		am: "AM",
 		pm: "PM",
@@ -277,7 +278,7 @@ var C = {
 		evening: "du soir",
 		night: "du matin"
 	}
-}, N = (e, t) => {
+}, F = (e, t) => {
 	let n = Number(e), r = t?.unit;
 	if (n === 0) return "0";
 	let i = [
@@ -288,38 +289,38 @@ var C = {
 		"second"
 	], a;
 	return a = n === 1 ? r && i.includes(r) ? "ère" : "er" : "ème", n + a;
-}, P = ["MMM", "MMMM"], F = {
+}, I = ["MMM", "MMMM"], L = {
 	en: t,
 	fr: {
 		code: "fr",
-		formatDistance: w,
-		formatLong: T,
-		formatRelative: D,
+		formatDistance: E,
+		formatLong: D,
+		formatRelative: k,
 		localize: {
-			preprocessor: (e, t) => e.getDate() === 1 || !t.some((e) => e.isToken && P.includes(e.value)) ? t : t.map((e) => e.isToken && e.value === "do" ? {
+			preprocessor: (e, t) => e.getDate() === 1 || !t.some((e) => e.isToken && I.includes(e.value)) ? t : t.map((e) => e.isToken && e.value === "do" ? {
 				isToken: !0,
 				value: "d"
 			} : e),
-			ordinalNumber: N,
+			ordinalNumber: F,
 			era: n({
-				values: O,
+				values: A,
 				defaultWidth: "wide"
 			}),
 			quarter: n({
-				values: k,
+				values: j,
 				defaultWidth: "wide",
 				argumentCallback: (e) => e - 1
 			}),
 			month: n({
-				values: A,
+				values: M,
 				defaultWidth: "wide"
 			}),
 			day: n({
-				values: j,
+				values: N,
 				defaultWidth: "wide"
 			}),
 			dayPeriod: n({
-				values: M,
+				values: P,
 				defaultWidth: "wide"
 			})
 		},
@@ -449,8 +450,8 @@ var C = {
 		}
 	}
 };
-function I() {
-	let n = e(), r = s(() => n?.language ?? "en"), i = s(() => F[r.value] ?? t);
+function R() {
+	let n = e(), r = s(() => n?.language ?? "en"), i = s(() => L[r.value] ?? t);
 	return {
 		get language() {
 			return r.value;
@@ -462,19 +463,26 @@ function I() {
 	};
 }
 //#endregion
+//#region lib/composables/use-csp-nonce.ts
+var z = Symbol("nxgt-csp-nonce"), B = Symbol("nxgt-csp-nonce-depth");
+function V() {
+	let e = l(z, null), t = p(null);
+	return s(() => e?.value || t?.nonce?.value || void 0);
+}
+//#endregion
 //#region lib/composables/use-heading-spy.ts
-var L = "0px 0px -65% 0px", R = [0, 1];
-function z(e, t, n) {
-	let r = u(!1);
-	l(() => {
+var H = "0px 0px -65% 0px", U = [0, 1];
+function W(e, t, n) {
+	let r = d(!1);
+	u(() => {
 		r.value = !0;
-	}), f(s(() => r.value ? d(e).map((e) => document.getElementById(e)).filter((e) => e != null) : []), (e) => {
+	}), m(s(() => r.value ? f(e).map((e) => document.getElementById(e)).filter((e) => e != null) : []), (e) => {
 		let n = e.filter((e) => e.isIntersecting).sort((e, t) => e.boundingClientRect.top - t.boundingClientRect.top)[0]?.target.id;
 		n && t(n);
 	}, {
-		rootMargin: n?.rootMargin ?? L,
-		threshold: n?.threshold ?? R
+		rootMargin: n?.rootMargin ?? H,
+		threshold: n?.threshold ?? U
 	});
 }
 //#endregion
-export { y as a, b as i, I as n, _ as o, S as r, g as s, z as t };
+export { R as a, x as c, V as i, y as l, B as n, w as o, z as r, S as s, W as t, v as u };

package/dist/{use-material-translation-Do6ztdtV.js → use-material-translation-CaHS6oZz.js}

@@ -1,6 +1,6 @@
-import "./stored-language-UnInBB6T.js";
-import { a as e } from "./i18n-provider-BPK68eqM.js";
-import { i as t, r as n } from "./translator-J3_vaV_A.js";
+import "./stored-language-GDRdeYD8.js";
+import { a as e } from "./i18n-provider-CiVi05fs.js";
+import { i as t, r as n } from "./translator-BDFEmlcL.js";
 //#region lib/i18n/translate-material.ts
 function r(e, r, i, a) {
 	if (e) for (let t of /* @__PURE__ */ new Set([e, e.split("-")[0]])) {

package/dist/vite.js

@@ -1,2 +1,2 @@
-import { pdfkitStandardFonts as e } from "@nxgt/material-core/vite";
-export { e as pdfkitStandardFonts };
+import { cspAssetsInlineLimit as e, pdfkitStandardFonts as t } from "@nxgt/material-core/vite";
+export { e as cspAssetsInlineLimit, t as pdfkitStandardFonts };

package/docs/README.md

@@ -15,6 +15,7 @@ detail: every option, the second example, and the traps.
 | [PDF documents](guides/pdf.md) | You produce a PDF file from data with `@nxgt/material-vue/pdf`: in the browser (`usePdf`, `PdfDownloadButton`) or from a Nuxt server route (`pdfResponse`), fonts on an inlined server |
 | [Maps](guides/maps.md) | You render Leaflet maps or a location field with `@nxgt/material-vue/map` |
 | [SSR](guides/ssr.md) | Your app renders on a server — Nuxt or a Vite SSR server — and bundles this package |
+| [Content Security Policy](guides/csp.md) | Your app sends a strict CSP: the directives to use, the components that still inject a `<style>`, the zod and KaTeX settings, self-hosting a font, the per-request nonce |
 | [Helpers](guides/helpers.md) | You need a utility, composable, Pinia store factory or type from `/lib`, `/composables`, `/i18n`, `/models`, `/types` or `/dnd` |
 | [Troubleshooting](troubleshooting.md) | Something failed and you have an error message or a symptom |
 | [Roadmap](roadmap.md) | You want to know what is planned, what shipped, and what will not be done |

package/docs/components/data-display.md

@@ -706,6 +706,11 @@ left alone. Mermaid diagrams
 render in the browser only, after mount; on the server the fence is left
 empty.
 
+Math needs no import of its own: KaTeX's CSS is in the stylesheet, and its
+fonts are files the stylesheet loads (`dist/fonts/katex/` on the compiled
+route), allowed by `font-src 'self'`. Math in system fonts means the fonts
+were not served ([troubleshooting](../troubleshooting.md#math-renders-in-the-system-fonts)).
+
 `MermaidDiagram` renders one chart outside markdown, the same way: client-only,
 with `mermaid` imported on mount.
 

package/docs/components/form-fields.md

@@ -499,6 +499,7 @@ const code = ref('');
 | `v-model` | `string` | — | the digits typed so far |
 | `@complete` | `(value: string) => void` | — | once every slot is filled (from `vue-input-otp`) |
 | `error` | `boolean` | — | error colour on the slots (`data-invalid` on each); `aria-invalid` goes on the input only, the one element a screen reader reads |
+| `nonce` | `string` | the `NonceProvider`'s | the CSP nonce of the `<style>` `vue-input-otp` injects; an explicit one wins (passed down to `InputOTP`, [CSP](../guides/csp.md)) |
 | `id` | `string` | from `useId()` | the input's id, which the label points to; it differs per field — `OtpFormField` too (not the field `name`), so two code forms on one page each keep their name |
 
 `InputOTP`, `InputOTPGroup`, `InputOTPSlot` and `InputOTPSeparator` are the
@@ -891,6 +892,16 @@ attribute), `AttributeValuesForm` (fill values for a set of attributes).
 Form wrappers: `AttributesFormField` (the definitions),
 `AttributeValuesFormFieldSet` and `AttributeValueFormField` (the values).
 Add and edit confirmations use a toast, so mount a `Toaster` once in the app.
+`attributeFormSchema()` returns `AttributeForm`'s zod schema, built on the
+first call (in the form's setup), and `toAttributeFormSchema()` the same as
+vee-validate's typed schema; the `schema` constant is **deprecated** and
+removed in 1.0 ([CSP](../guides/csp.md#zod-and-unsafe-eval)).
+
+```ts
+import { attributeFormSchema } from '@nxgt/material-vue/components';
+
+const result = attributeFormSchema().safeParse({ label: 'Color', name: 'color', type: 'COLOR' });
+```
 
 | Prop | Type | Default | Effect |
 | --- | --- | --- | --- |
@@ -1046,6 +1057,18 @@ function onEdit(value: OpeningHour, index: number) {}
 Parts: `OpeningHours` (the list) and `OpeningHoursDialog` (add / edit).
 `OpeningHoursItem`, a day row bound to a vee-validate array, is
 **deprecated** and removed in 1.0: use `OpeningHoursFormField`.
+`openingHoursSchema()` returns the zod schema of one `OpeningHour`
+(`dayOfWeek` coerced from a string), built on the first call; the
+`OpeningHoursSchema` constant is **deprecated** and removed in 1.0. Under a
+strict CSP, call `z.config({ jitless: true })` first: see
+[CSP](../guides/csp.md#zod-and-unsafe-eval).
+
+```ts
+import { openingHoursSchema } from '@nxgt/material-vue/components';
+import { z } from 'zod';
+
+const schema = z.object({ hours: z.array(openingHoursSchema()) });
+```
 
 | Prop | Type | Default | Effect |
 | --- | --- | --- | --- |

package/docs/components/primitives.md

@@ -29,6 +29,7 @@ work on them unchanged.
 | <img src="../previews/primitives-togglegroup.webp" width="96" alt=""> | [ToggleGroup](#togglegroup) | Single or multiple toggle group |
 | <img src="../previews/primitives-activity.webp" width="96" alt=""> | [Activity](#activity) | Keeps its content mounted and hides it with a boolean |
 | <img src="../previews/primitives-scrollarea.webp" width="96" alt=""> | [ScrollArea](#scrollarea) | Scroll container with a thin custom scrollbar |
+| | [NonceProvider](#nonceprovider) | Gives the page's CSP nonce to every component below |
 
 ## Accordion
 
@@ -859,3 +860,43 @@ through.
 The React `ScrollArea` takes the same props, camel-cased (`scrollHideDelay`).
 
 **Storybook:** `Primitives/ScrollArea` · **React:** `ScrollArea`, `ScrollBar`
+
+---
+
+## NonceProvider
+
+No preview: it draws nothing of its own, it hands the page's Content Security
+Policy nonce down.
+
+Gives this request's CSP nonce to every component below it: reka's `Select`,
+`Combobox`, `ScrollArea` and `Splitter` (it renders a reka `ConfigProvider`
+with `nonce`, carrying over a parent `ConfigProvider`'s other settings),
+`InputOTP` when it has no `nonce` of its own, and the stylesheet tiptap
+injects for `RichTextEditor`. Render it once, at the root, on the server and
+on the client, with the same nonce. The Nuxt module registers it.
+
+```vue
+<script setup lang="ts">
+import { NonceProvider } from '@nxgt/material-vue/components';
+
+defineProps<{ nonce?: string }>();
+</script>
+
+<template>
+  <NonceProvider :nonce="nonce">
+    <RouterView />
+  </NonceProvider>
+</template>
+```
+
+| Prop | Type | Default | Effect |
+| --- | --- | --- | --- |
+| `nonce` | `string` | `undefined` | the nonce of the page's `style-src-elem 'nonce-…'`; `undefined` or `''` inherits the nearest outer `NonceProvider`'s (or `ConfigProvider`'s) nonce (none at the root) |
+
+`useCspNonce()` (`@nxgt/material-vue/composables`) reads it in a component of
+your own; `getCspNonce()` and `setCspNonce()` (`@nxgt/material-vue/lib`) read
+and keep the page's nonce outside Vue. The Nuxt `app.vue`, the client entry
+and what each component needs are in the [Content Security Policy
+guide](../guides/csp.md#nonceprovider).
+
+**Storybook:** `Primitives/NonceProvider` · **React:** `NonceProvider`

package/docs/components/selection-and-choice.md

@@ -231,7 +231,7 @@ options by label. Picking the selected option again clears it.
 
 ![Autocomplete](../previews/selection-choice-autocomplete.webp)
 
-Single or multiple (chips) autocomplete typed by its options, with free-solo values, a query event and option slots.
+Single or multiple (chips) autocomplete typed by its options, with free-solo values, accent-insensitive matching, a debounced server search and option slots.
 
 ```vue
 <script setup lang="ts">
@@ -262,16 +262,81 @@ const picked = ref<string[]>(['nuxt']);
 | --- | --- | --- | --- |
 | `mode` | `'single' \| 'multiple'` | `'single'` | decides the `v-model` type |
 | `v-model` | `string \| string[] \| null` | `null` | per `mode` |
-| `options` | `T[]`, `T extends { value: string; label: string }` | — | required; the items, typed by your own option type |
+| `options` | `T[]`, `T extends { value: string; label: string }` | `[]` | the items, typed by your own option type; with `on-search`, the list before a search and the selected options' labels |
 | `get-option-value` | `(option: T) => string` | `option.value` | the value an option stands for |
 | `get-option-label` | `(option: T) => string` | `option.label` | the text it shows and is searched by |
+| `filter` | `'accent-insensitive' \| 'none' \| (option: T, query: string) => boolean` | `'accent-insensitive'`, `'none'` with `on-search` | how the list is filtered as the user types: label or value, ignoring case and accents (`e` finds "École") in the provider's language; `'none'` shows `options` as given; a function gets the trimmed query, never an empty one |
 | `free-solo` | `boolean` | `false` | accept a typed value that is not an option ("Add …") |
 | `free-solo-label` | `(query: string) => string` | `Add "{query}"`, translated | the free-solo button's text |
-| `@query-change` | `(query: string) => void` | — | the typed text, debounced 300 ms — fetch options here |
+| `@search` (prop `on-search`) | `(query: string, { signal }: { signal: AbortSignal }) => Promise<T[]>` | — | server search: called once typing pauses; its results become the list. Each search aborts the previous one, and a response that lands after a newer one is dropped |
+| `@search-error` | `(error: unknown) => void` | — | `on-search` rejected (an abort is not a rejection) |
+| `min-query-length` | `number` | `1` | `on-search` waits for this many characters; below it the list says "Type at least N characters to search." |
+| `debounce-ms` | `number` | `250` | the pause before `on-search` and `@query-change` run |
+| `@query-change` | `(query: string) => void` | — | the typed text once typing pauses — fetch `options` yourself here |
+| `loading` | `boolean` | — | with `@query-change`: "Loading…" in the list, `aria-busy` on it, announced |
+| `search-error` | `string` | — | with `@query-change`: shown and announced in place of the options |
 | `empty` | `string` | "No option found." | text when nothing matches |
 | `required` | `boolean` | — | the asterisk, and `aria-required` on the input, which the label names |
 | `error` | `boolean` | — | red border on the box, error helper text, `aria-invalid` on the input |
 
+### Searching a server
+
+`on-search` is a function prop (so `@search="fn"` binds it too): it takes
+the query and an `AbortSignal`; hand the signal to `fetch` so a search the
+user typed past is cancelled. The field shows "Loading…", keeps the last
+results until the new ones arrive, and never lets an older response
+overwrite a newer one, even from an API that ignores the signal. Pass the
+selected option in `options` so its chip has a label before any search; a
+picked option keeps its chip once a new search no longer returns it.
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+import { Autocomplete } from '@nxgt/material-vue/components';
+
+type Person = { value: string; label: string };
+
+async function searchPeople(query: string, { signal }: { signal: AbortSignal }) {
+  const response = await fetch(`/api/people?q=${encodeURIComponent(query)}`, { signal });
+  if (!response.ok) throw new Error(`Search failed: ${response.status}`);
+  return (await response.json()) as Person[];
+}
+
+const person = ref<string | null>(null);
+</script>
+
+<template>
+  <Autocomplete
+    v-model="person"
+    label="Person"
+    placeholder="Search by name"
+    :on-search="searchPeople"
+    :min-query-length="2"
+    :debounce-ms="300"
+  />
+</template>
+```
+
+With `on-search`, `min-query-length` defaults to 1, `debounce-ms` to 250 and `filter` to `'none'`
+(the server filters). A rejected search shows and announces "The search
+failed. Try again." by itself and hands the error to `@search-error`; an abort is
+never an error. Type your search with `AutocompleteSearch<T>` (its second
+argument is `AutocompleteSearchContext`, `{ signal }`); `AutocompleteFilter<T>`
+and `AutocompleteSearchProps<T>` are exported from `@nxgt/material-vue/components` too.
+`filterAutocompleteOptions(options, query, locale?)`, exported beside the
+component, is the default filter as a function: label or value, ignoring
+case and accents, lowercased for `locale`.
+
+To fetch it yourself instead, keep `options` and `loading` in your state,
+update them on `@query-change`, and pass `filter="none"` when the server
+already filtered.
+
+**Accessibility.** A polite live region (`role="status"`) says "Loading…",
+then "3 results" or "No results" (or the failure) once the search answers or
+typing pauses — never on every keystroke. The list is `aria-busy` while
+loading. The strings are `material.autocomplete.loading`, `.results`,
+`.search-error` and `.min-query`. The keyboard works as before.
+
 It is a generic component: `T` is inferred from `options`, and the slots —
 React's render props — receive it whole:
 
@@ -450,7 +515,7 @@ React the labelled one is called `RadioGroup`.
 
 | Prop | Type | Default | Effect |
 | --- | --- | --- | --- |
-| `options` | `{ value: string; label: string }[]` | — | required; the radios |
+| `options` | `{ value: string; label: string; disabled?: boolean }[]` | — | required; the radios; `disabled` on an option disables only it |
 | `v-model` | `string` | — | the selected `value` |
 | `orientation` | `'vertical' \| 'horizontal'` | `'horizontal'` | layout |
 | `label`, `helper-text`, `error`, `disabled` | | — | the field's text and state |
@@ -463,6 +528,12 @@ put on `RadioGroupField` land on the `radiogroup` (`class` and `style` stay on
 the layout wrapper): your own `aria-label` / `aria-labelledby` wins, and your
 `aria-describedby` ids come first.
 
+An option's type is exported as `RadioGroupOption`. A disabled option (`disabled: true` on it) is announced as disabled, skipped by
+the arrow keys (as the Reka UI primitives do) and drawn with a muted label and a
+faded radio; the label keeps 4.5:1 contrast in both themes. The group's own
+`disabled` disables every option. An option disabled while it is the current
+value stays checked.
+
 **Emits:** `update:modelValue` with `string`.
 **Form wrapper:** `RadioGroupFormField` — `name` inside a vee-validate form, see
 [forms](../guides/forms.md#the-pair) and [what each field emits](../guides/forms.md#what-each-field-emits).

package/docs/getting-started.md

@@ -32,7 +32,9 @@ does not import that entry never has them in its tree.
 | `@nxgt/material-vue/pdf` | `bun add react @react-pdf/renderer@^4.9`, to render; building documents needs neither ([PDF documents](guides/pdf.md)) |
 | `@nxgt/material-vue/nuxt` | a Nuxt app, `nuxt >= 3.13` ([below](#nuxt)) |
 
-The tarball contains the built `dist/`, `lib/styles.css`, the component
+The tarball contains the built `dist/` (with KaTeX's fonts in
+`dist/fonts/katex/`, which the compiled stylesheet loads),
+`lib/styles.css`, the component
 stylesheets it imports (`lib/components/**/*.css`), `lib/map/map.css`, the
 Nuxt module (`lib/nuxt`, with the
 `lib/vite/index.ts` it imports), these docs and `CHANGELOG.md` (from the
@@ -48,6 +50,8 @@ In the app's root stylesheet, right after Tailwind:
 @import "@nxgt/material-vue/styles.css";
 ```
 
+Toaster and InputOTP take their CSS from this stylesheet: without it they render unstyled.
+
 - **`styles.css` is source, not compiled CSS.** It holds the Tailwind v4
   `@theme` layer (colours, `--radius`, the `dark` variant, base styles, a few
   utilities), so it runs through *your* Tailwind build. Nothing injects it,