@nxgt/material-vue 0.32.0 → 0.34.0

package/dist/{use-heading-spy-Czi_Xv3u.js → use-heading-spy-ClhUg50z.js}

@@ -1,28 +1,29 @@
 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 { c as t, d as n, f as r, l as i, r as a, u as o } from "./number.utils-Bpo9tUaJ.js";
+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/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/date-and-time.md

@@ -101,6 +101,8 @@ No form wrapper — use `DateFormField`.
 
 Labelled trigger that opens a calendar popover, with an optional time picker and `disabled-days`.
 
+The trigger writes the date in the `I18nProvider` language, else English.
+
 ```vue
 <script setup lang="ts">
 import { ref } from 'vue';
@@ -159,6 +161,8 @@ before your `aria-describedby` ids.
 
 From / to range picked in a popover calendar, with `disabled-days`, presets and times.
 
+The trigger writes each date in the `I18nProvider` language, else English.
+
 ```vue
 <script setup lang="ts">
 import { ref } from 'vue';
@@ -304,6 +308,8 @@ where `to` stays `undefined` until the second day is picked.
 
 Opens a `TimePicker` in a popover, or in a dialog on mobile.
 
+The trigger writes the time in the `I18nProvider` language, else English.
+
 ```vue
 <script setup lang="ts">
 import { ref } from 'vue';

package/docs/components/feedback-and-status.md

@@ -432,9 +432,11 @@ function clearFilters() {}
 | --- | --- | --- | --- |
 | `variant` | `'not-found' \| 'unauthorized' \| 'generic' \| 'empty' \| 'offline' \| 'search' \| 'maintenance'` | `'generic'` | preset icon, well colour, title and description |
 | `#icon` slot | — | the preset's | replaces the icon |
-| `title` / `description` | `string` (or `#title` / `#description`) | the preset's (translated) | replace the preset text |
+| `title` / `description` | `string` (or `#title` / `#description`) | the preset's (translated) | replace the preset text; see below |
 | `#action` slot | — | — | shown under the text |
 
+The preset's description is the companion of its title: with your own `title` and no `description`, no description is rendered. Pass `description` to keep a line under your own title. A `#title` slot counts as your own title; a `#description` slot always renders.
+
 **Storybook:** `Feedback & status/EmptyState` · **React:** `EmptyState`
 
 ---

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
 
@@ -192,9 +193,17 @@ import { Typography } from '@nxgt/material-vue/components';
 | Prop | Type | Default | Effect |
 | --- | --- | --- | --- |
 | `variant` | `'huge-larger' \| 'huge-large' \| 'huge-medium' \| 'huge-small' \| 'headline-larger' \| 'headline-large' \| 'headline-medium' \| 'headline-small' \| 'title-large' \| 'title-medium' \| 'title-small' \| 'body-medium' \| 'body-small' \| 'caption' \| 'normal'` | `'normal'` | size and weight; `caption` is also muted |
+| `as` | a tag name or a component | `'div'` | the element to render, keeping the variant, e.g. `as="h2"` or `as="span"` |
+| `asChild` | `boolean` | `false` | merge the classes onto the single child instead of rendering an element |
 
-It renders a `<div>`; the variants are also exported as `typographyVariants`
-for use on your own elements. Vue has one more step than React, `huge-larger`.
+It renders a `<div>` unless `as` or `asChild` says otherwise:
+
+```vue
+<Typography as="span" variant="title-small">Inline</Typography>
+<Typography as-child variant="body-medium"><a href="/docs">Docs</a></Typography>
+```
+
+The variants are also exported as `typographyVariants` for use on your own elements. Vue has one more step than React, `huge-larger`.
 
 **Storybook:** `Primitives/Typography` · **React:** `Typography`
 
@@ -859,3 +868,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/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,