@nxgt/material-vue 0.32.0 → 0.34.0

package/docs/guides/csp.md

@@ -0,0 +1,420 @@
+# Content Security Policy
+
+This page is for an app that serves a strict Content Security Policy (CSP) and
+wants `@nxgt/material-vue` to run under it: the directives to send, the few
+places the library still needs a relaxation (and which components cause it),
+and the settings that quiet the console. Nothing here is needed on a page
+without a CSP.
+
+## Start from this policy
+
+```http
+Content-Security-Policy:
+  default-src 'self';
+  script-src 'nonce-{NONCE}' 'strict-dynamic';
+  style-src-elem 'self' 'nonce-{NONCE}';
+  style-src-attr 'unsafe-inline';
+  font-src 'self';
+  img-src 'self' data: blob:;
+  worker-src 'self';
+  connect-src 'self';
+  object-src 'none';
+  base-uri 'self'
+```
+
+| Directive | Why |
+| --- | --- |
+| `script-src 'nonce-X' 'strict-dynamic'` | Your entry script carries the nonce; the chunks it loads are trusted through `strict-dynamic`. The library needs no `'unsafe-eval'` once the zod setting below is applied |
+| `style-src-elem 'self' 'nonce-X'` | Your stylesheet and the `<style>` elements that carry the nonce. No component needs `'unsafe-inline'` here, apart from the [known gaps](#known-gaps): see [the `<style>` elements the components inject](#style-elements-the-components-inject) |
+| `style-src-attr 'unsafe-inline'` | The `style="…"` attributes in the server-rendered HTML and those set through `setAttribute('style', …)`. CSP blocks only these two; `el.style.x = …` and `style.setProperty` are not blocked. An attribute cannot carry a nonce, so this is the only way to allow it. It does not allow `<style>` elements or scripts |
+| `font-src 'self'` | The library ships no web font (host Inter yourself: [Inter / the sans font](#inter--the-sans-font)), and KaTeX's fonts are files, never `data:` URIs: see [KaTeX fonts](#katex-fonts) for the one Vite setting the Tailwind route needs |
+| `img-src 'self' data: blob:` | `data:` for the cropper's output, a captured `Camera` photo, a `Markdown` mermaid diagram and the PDF viewer's annotation icons (SVG `data:` images; the icons the components draw are inline `<svg>` elements and need none); `blob:` for previews of a file the user picked. Drop what you do not use |
+| `worker-src 'self'` | The pdf.js worker of `PdfReader` is a same-origin file your bundler emits (Monaco: see below) |
+| `connect-src 'self'` | `PdfReader` fetches the PDF from its `url`: add that origin when it is not yours |
+
+Components outside this table need nothing more. Measured per component:
+
+| Component | Extra directive | Status |
+| --- | --- | --- |
+| `PdfReader`, `PdfSidebar`, `PdfPageList`, `PdfThumbnailSidebar` | `worker-src 'self'` (the worker is a bundled asset), `connect-src` for the PDF's origin | worker URL read from the code; fonts: see [gaps](#known-gaps) |
+| `CodeEditor`, `CodeDiff` (Monaco) | `@monaco-editor/loader` loads Monaco from `https://cdn.jsdelivr.net/npm/monaco-editor@…/min/vs` by default: that host in `style-src-elem` (Monaco's CSS) and `font-src` (its icon font), plus `worker-src blob:` | not yet verified in a browser. Safe default: allow `https://cdn.jsdelivr.net` in `script-src`, `style-src-elem` and `font-src`, and `worker-src blob:`; or stay on `'self'` by [serving Monaco yourself](#monaco-on-self) |
+| `Markdown` with a `mermaid` block | mermaid is imported lazily and runs with `securityLevel: 'strict'` | whether mermaid needs `'unsafe-eval'` is not yet verified. Safe default: keep `'unsafe-eval'` out and report any violation you see; its SVG carries a `<style>` element, see [gaps](#known-gaps) |
+| `Camera` | none: `getUserMedia` is not governed by CSP; the captured photo is a `data:` image | `media-src` for the live preview is not yet verified. Safe default: `media-src 'self' blob:` (a `srcObject` stream usually needs nothing) |
+
+### Monaco on `'self'`
+
+Copy Monaco's `min/vs` folder to your public files (for example `/monaco/vs`)
+and point the loader at it, before the first editor mounts:
+
+```ts
+import loader from '@monaco-editor/loader';
+
+loader.config({ paths: { vs: '/monaco/vs' } });
+```
+
+### Packages the app imports itself
+
+`zod`, `reka-ui` and `@monaco-editor/loader` are dependencies of the library,
+imported at runtime rather than bundled (keep your zod inside `^4.4.3`, since zod 4.4 or later shares its
+configuration through `globalThis`, and the app and the library share one copy). A strict
+package manager (pnpm) does not let the app import a package it does not
+list, so install what you import: `bun add zod reka-ui @monaco-editor/loader`.
+
+## NonceProvider
+
+Render `NonceProvider` once, at the root, with this request's nonce, on the
+server and on the client. Every component below it takes the nonce: reka's
+`Select`, `Combobox`, `ScrollArea` and `Splitter` (`NonceProvider` renders a
+reka `ConfigProvider` with `nonce`), `InputOTP` when you pass it no `nonce`
+of its own, and the stylesheet tiptap injects for `RichTextEditor` (its
+`injectNonce` option).
+
+```vue
+<!-- App.vue -->
+<script setup lang="ts">
+import { NonceProvider } from '@nxgt/material-vue';
+
+defineProps<{ nonce?: string }>();
+</script>
+
+<template>
+  <NonceProvider :nonce="nonce">
+    <RouterView />
+  </NonceProvider>
+</template>
+```
+
+With Nuxt, the module registers `NonceProvider` and auto-imports
+`useCspNonce`: see [SSR](#ssr) for `app.vue` with nuxt-security.
+
+On the server, the nonce goes down through `provide`/`inject` only. On the
+client, `NonceProvider` also keeps it for the code that runs outside Vue
+(`claimCspNonce`, once mounted, so never on a server: one request's nonce
+never reaches another's). With nested providers, the innermost one mounted is
+the page's nonce, and it falls back to the outer one's when it unmounts. On
+the client, read the nonce the server wrote into the page and give the root
+the same prop:
+
+```ts
+// entry-client.ts
+import { getCspNonce } from '@nxgt/material-vue';
+import { createSSRApp } from 'vue';
+import App from './App.vue';
+
+createSSRApp(App, { nonce: getCspNonce() }).mount('#app');
+```
+
+`getCspNonce()` reads, in order: the value given to `setCspNonce`,
+`<meta property="csp-nonce" nonce="…">` (what Vite's `html.cspNonce` writes)
+or `<meta name="csp-nonce" content="…">`, the first `<script nonce>` or
+`<style nonce>` of the page, then `__webpack_nonce__`. A browser hides a
+`nonce` attribute's value once the page is parsed; `getCspNonce()` reads the
+`nonce` property, which keeps it.
+
+A nested reka `ConfigProvider` replaces its parent's settings instead of
+merging with them. `NonceProvider` carries over the `dir`, `locale`,
+`scrollBody`, `teleportTo` and `useId` of a `ConfigProvider` above it, so
+put yours outside: a `ConfigProvider` inside `NonceProvider` without a
+`nonce` hides the nonce from the reka components below it.
+
+A component of your own that creates a `<style>` takes the nonce with
+`useCspNonce()`, in `setup`:
+
+```vue
+<script setup lang="ts">
+import { useCspNonce } from '@nxgt/material-vue/composables';
+import { h } from 'vue';
+
+const props = defineProps<{ css: string }>();
+const nonce = useCspNonce();
+const Keyframes = () => h('style', { nonce: nonce.value }, props.css);
+</script>
+
+<template>
+  <Keyframes />
+</template>
+```
+
+`useCspNonce()` is a computed ref: `NonceProvider`'s nonce, else the nearest
+reka `ConfigProvider`'s, else `undefined`. It never reads the page in
+`setup`, so the server and the client render the same attribute and
+hydration does not mismatch. Code that runs once mounted (an imperative
+widget creating its own `<style>`) can call `getCspNonce()` instead.
+
+## `<style>` elements the components inject
+
+`style-src-elem 'self' 'nonce-X'` is enough for every component below: your
+stylesheet carries the dependencies' CSS, and under a `NonceProvider` the few
+`<style>` elements left carry the nonce. No route needs `'unsafe-inline'` in
+`style-src-elem` for them; mermaid and pdf.js's font fallback are the
+[known gaps](#known-gaps).
+
+| Component | What it needs | How |
+| --- | --- | --- |
+| `Toaster` (vue-sonner), `ImageCropper` (vue-advanced-cropper), `Spinner`, `PdfReader` | nothing | their CSS is in the stylesheet you import (`styles.css`, or `dist/material-vue.css`); none of them creates a `<style>` (measured: vue-advanced-cropper's code has none) |
+| `Drawer`, the scroll lock of modals | nothing | they only set style properties from JavaScript, which CSP does not block |
+| `InputOTP` (vue-input-otp) | the nonce | vue-input-otp adds a `<style>` on mount, with its `nonce` prop, else `NonceProvider`'s. Its rules are in the stylesheet too, so a page without the nonce still renders it right, but reports the blocked `<style>` |
+| `Select`, `Combobox`, `ScrollArea`, `Splitter` (reka-ui) | the nonce | reka renders a `<style>` element and reads `ConfigProvider`'s `nonce`, which `NonceProvider` sets |
+| `RichTextEditor` (tiptap) | the nonce | tiptap, on mount, with `NonceProvider`'s nonce as `injectNonce` |
+
+The library's CI checks this on every build: it fails when the built
+JavaScript creates a `<style>`, or calls `insertRule`, `Function` or `eval`,
+outside a short list, each entry with its reason (tiptap, the gaps below,
+and the two below). It then imports every built entry and fails if importing
+calls `Function`: a schema built at import would. vue-input-otp and
+vue-sonner are not bundled, so that check does not see them: a story renders
+a `Toaster` with a toast, an open `Drawer` and `Dialog`, an `InputOTP`,
+`Spinner` and `ImageCropper` under this policy and counts the violations:
+none. Another adds `script-src 'self' 'nonce-X'`, no `'unsafe-eval'`, calls
+`z.config({ jitless: true })`, then renders `AttributeForm`, submits it and
+parses with `openingHoursSchema()`: no violation at all.
+
+A `ConfigProvider :nonce` of your own, as earlier versions of this guide
+showed, still works for reka's components; `NonceProvider` replaces it and
+reaches `InputOTP` and `RichTextEditor` too.
+
+### Allowed by the check, nothing for you to do
+
+| Where | What it is | Why it is no violation |
+| --- | --- | --- |
+| `PdfReader` (pdf.js) | the `isEvalSupported` probe, `new Function("")` | unreachable: `PdfReader` passes `isEvalSupported: false`. If you call `pdfjs.getDocument` yourself, pass it too |
+| lodash (a dependency of some chart code) | `Function("return this")()` | only when neither `global` nor `self` exists: never in a browser |
+
+### Known gaps
+
+Not fixable by configuration yet, and still reported by a strict policy:
+
+- the `<style>` element inside mermaid's SVG, and the one cytoscape adds to
+  `<head>` for mermaid's mindmap and architecture diagrams;
+- the font fallback of pdf.js, when a PDF font is not embedded.
+
+## zod and `'unsafe-eval'`
+
+Building a `z.object()` makes zod probe `new Function` once, to choose
+between its compiled parser and its interpreter. Without `'unsafe-eval'` the
+browser reports a violation. The error is caught, so nothing breaks, but the
+report is sent. Switch zod to its interpreter **before the first schema is
+built**, in a module the app imports first:
+
+```ts
+// zod-config.ts
+import { z } from 'zod';
+
+z.config({ jitless: true });
+```
+
+```ts
+// main.ts (in Nuxt, a plugin file named 00.zod.client.ts: plugins load in file order)
+import './zod-config'; // first
+import './app';
+```
+
+The library builds no schema while it loads, so that is all it takes:
+
+- **zod is not bundled.** `@nxgt/material-vue` imports the zod your app has (a
+  dependency, `^4.4.3`), so your `z.config` is the one its schemas see. zod
+  4.4 or later shares its configuration through `globalThis`, so a
+  second copy of zod 4 that a package manager nested still sees it; that is
+  why the range is `^4.4.3`.
+- **Its schemas are factories**, built on the first call and the same schema
+  after: `openingHoursSchema()` and `attributeFormSchema()`, which
+  `AttributeForm` builds in its setup. A component that validates builds its
+  schema when it first renders, never at import.
+
+| Deprecated constant (removed in 1.0) | Use |
+| --- | --- |
+| `OpeningHoursSchema` | `openingHoursSchema()` |
+| `schema` (the attribute form's) | `attributeFormSchema()`; `toAttributeFormSchema()` is unchanged |
+
+The deprecated constants still work: each is built on its first use and
+behaves as the schema its factory returns (`.parse`, `.safeParse`, `.shape`,
+`.extend`, `instanceof z.ZodObject`). It is not the same object, so do not
+compare it with `===` or register it: a `.meta()` or `registry.add()` on
+the stand-in is not seen through the factory's schema.
+
+## KaTeX fonts
+
+`Markdown` renders formulas with KaTeX, which needs its fonts
+(`KaTeX_*.woff2`). They are files on both routes, so `font-src 'self'` allows
+them, and a browser downloads a font only when a formula draws a glyph from
+it: a page with no math downloads none.
+
+- **Compiled route** (`dist/material-vue.css`): the `@font-face` rules point at
+  `dist/fonts/katex/*.woff2`, shipped beside the stylesheet, through a
+  relative `url()`. A bundler emits them as files of your build; an app that
+  serves `dist/` as it is must serve `dist/fonts/` with it. Copy only the
+  stylesheet and math falls back to the system fonts
+  ([troubleshooting](../troubleshooting.md#math-renders-in-the-system-fonts)).
+  Earlier versions inlined the 60 fonts as `data:` URIs (1.4 MB of the
+  stylesheet), and `font-src` needed `data:`.
+- **Tailwind route** (`@import "@nxgt/material-vue/styles.css"`): your bundler emits
+  KaTeX's fonts as files, but Vite inlines any asset under
+  `assetsInlineLimit` (4096 bytes) as a `data:` URI, and
+  `KaTeX_Size3-Regular.woff2` is 3.6 KB, so it is inlined and `font-src 'self'`
+  blocks it. Never inline fonts, with `cspAssetsInlineLimit` from
+  `@nxgt/material-vue/vite` (the same helper as [Inter](#inter--the-sans-font)):
+
+  ```ts
+  // vite.config.ts
+  import { cspAssetsInlineLimit } from '@nxgt/material-vue/vite';
+  import { defineConfig } from 'vite';
+
+  export default defineConfig({ build: { assetsInlineLimit: cspAssetsInlineLimit } });
+  ```
+
+  It returns `false` for a font and leaves every other asset to Vite's
+  default. (`assetsInlineLimit: 0` also works, and inlines nothing at all.)
+  The compiled route through Vite needs the same setting, for the same file.
+
+The library's CI fails when a stylesheet in `dist/` carries a `data:` font.
+
+## Inter / the sans font
+
+The library ships no web font. Its sans text uses the Tailwind token
+`--font-sans`, which the theme does not set, so it is Tailwind's system stack
+(`ui-sans-serif, system-ui, sans-serif`, then the emoji fonts). Many apps name
+Inter there and load it from Google Fonts or rsms.me; both are blocked by
+`font-src 'self'` and `style-src-elem 'self' 'nonce-X'`, because the page then
+asks for another origin's stylesheet and fonts. Host Inter yourself instead:
+
+```sh
+bun add @fontsource-variable/inter
+```
+
+```css
+/* the app's root stylesheet */
+@import "tailwindcss";
+@import "@nxgt/material-vue/styles.css";
+@import "@fontsource-variable/inter";
+
+@theme {
+  --font-sans: "Inter Variable", ui-sans-serif, system-ui, sans-serif;
+}
+```
+
+(`@fontsource-variable/inter` is the variable font, family `Inter Variable`.
+For fixed weights install `@fontsource/inter` instead, import
+`@fontsource/inter/400.css` and the weights you use, and name the family
+`"Inter"`.) A JavaScript entry works as well: `import '@fontsource-variable/inter';`.
+
+Set it in the root `@theme`, like the colours: `@theme` entries are resolved
+on the root, so a value set on an inner element does not change what the
+rest of the page inherits. See [theming](theming.md#fonts).
+
+- **Under the policy.** The package's stylesheet is bundled into yours (no
+  second origin, so `style-src-elem 'self'` holds) and its `@font-face` rules
+  point at `.woff2` files that your bundler emits into the build. They load
+  from your own origin, so `font-src 'self'` allows them. A browser downloads
+  only the subsets a page draws: Latin first, the other scripts on demand.
+- **Vite and `assetsInlineLimit`.** Vite inlines an asset under 4096 bytes as
+  a `data:` URI, which `font-src 'self'` blocks. Fontsource's files are
+  larger, so they are emitted as files without any setting. A small subset
+  file can still fall under the limit, and the KaTeX route needs it anyway:
+  keep the one setting that never inlines a font, `cspAssetsInlineLimit`
+  from `@nxgt/material-vue/vite`:
+
+  ```ts
+  // vite.config.ts
+  import { cspAssetsInlineLimit } from '@nxgt/material-vue/vite';
+  import { defineConfig } from 'vite';
+
+  export default defineConfig({ build: { assetsInlineLimit: cspAssetsInlineLimit } });
+  ```
+
+  ([KaTeX fonts](#katex-fonts) uses the same setting.)
+- **If Inter is not loaded.** Nothing breaks and no violation is reported: the
+  browser skips `"Inter Variable"`, which names no installed font, and draws
+  the next entry of the stack, the system sans. Only the look changes. This is
+  also what you get when you keep the token at its default.
+- **Troubleshooting.** A request to `fonts.googleapis.com` or
+  `fonts.gstatic.com` is not ours: see
+  [the font refused for another host](../troubleshooting.md#refused-to-load-the-font-httpsfontsgstaticcom-because-it-violates-the-following-content-security-policy-directive-font-src-self).
+
+## SSR
+
+Generate the nonce **per request**, put it in the header and hand it to the
+renderer. With Nuxt, let `nuxt-security` do it: it creates a nonce for each
+request, adds it to the scripts and styles Nuxt emits, and exposes it as
+`useNonce()`:
+
+```ts
+// nuxt.config.ts
+export default defineNuxtConfig({
+  modules: ['@nxgt/material-vue/nuxt', 'nuxt-security'],
+  security: {
+    nonce: true,
+    headers: {
+      contentSecurityPolicy: {
+        'script-src': ["'nonce-{{nonce}}'", "'strict-dynamic'"],
+        'style-src-elem': ["'self'", "'nonce-{{nonce}}'"],
+        'style-src-attr': ["'unsafe-inline'"],
+        'font-src': ["'self'"],
+        'img-src': ["'self'", 'data:', 'blob:'],
+      },
+    },
+  },
+});
+```
+
+```vue
+<!-- app.vue: NonceProvider is registered by @nxgt/material-vue/nuxt -->
+<script setup lang="ts">
+import { getCspNonce } from '@nxgt/material-vue/lib';
+
+// The request's nonce on the server; on the client, the one in the page.
+const nonce = import.meta.server ? useNonce() : getCspNonce();
+</script>
+
+<template>
+  <NonceProvider :nonce="nonce">
+    <NuxtPage />
+  </NonceProvider>
+</template>
+```
+
+`useNonce()` reads the request, so it answers only on the server;
+`getCspNonce()` finds the same value in the page on the client (nuxt-security
+stamps Nuxt's scripts with it), so both render the same tree.
+
+On your own Vite SSR server, generate the nonce in the request handler, put it
+in the header and in every `<script>` and `<style>` you emit, and pass it to
+`NonceProvider` through your root component's props:
+
+```ts
+// entry-server.ts
+import { createSSRApp } from 'vue';
+import { renderToString } from 'vue/server-renderer';
+import App from './App.vue';
+
+export function render(nonce: string) {
+  return renderToString(createSSRApp(App, { nonce }));
+}
+```
+
+**Never keep the nonce in a module-level variable on the server.** Two
+requests handled at once would overwrite each other, and one page would carry
+the other's nonce. Pass it down the request: as an argument, a prop, or
+`NonceProvider` (`provide`/`inject`). `setCspNonce` is a no-op there for that
+reason.
+
+See also the [SSR and Nuxt guide](ssr.md).
+
+## Status
+
+Nothing is left to ship for the policy. What was done:
+
+- the CSS of `Toaster`, `ImageCropper`, `Spinner` and `PdfReader` is in the
+  stylesheet, and none of them creates a `<style>`; `Drawer` and the scroll
+  lock of modals need nothing, since they only set style properties;
+- the `<style>` elements left carry the nonce (`NonceProvider`): reka's,
+  the one `InputOTP` adds on mount (its rules are in the stylesheet too) and
+  tiptap's;
+- KaTeX's fonts ship as files, so `font-src 'self'` needs no `data:`, and
+  Inter is documented as a self-hosted font;
+- zod is an external dependency whose schemas are built on first use (see
+  above).
+
+What remains are the [known gaps](#known-gaps) and the rows marked "not yet
+verified" in the tables above; each is waiting on a dependency, not on this
+library. Progress is on the [roadmap](../roadmap.md). A report you cannot match
+to an entry is in [troubleshooting](../troubleshooting.md#content-security-policy).

package/docs/guides/helpers.md

@@ -17,6 +17,7 @@ differences are listed under each table. React's `/hooks` is
 | Export | What it does |
 | --- | --- |
 | `cn(...classes)` | `clsx` + `tailwind-merge`: joins conditional classes, last Tailwind utility wins. |
+| `getCspNonce(doc?)`, `setCspNonce(nonce)` | The page's Content Security Policy nonce, from `@nxgt/material-core/csp-nonce`: `getCspNonce` reads what `setCspNonce` kept, else the `csp-nonce` meta tag, a `<script nonce>` or `<style nonce>`, else `__webpack_nonce__`; `undefined` on a server, where `setCspNonce` does nothing. See [CSP](csp.md#nonceprovider). |
 | `clientOnly(component)` | Wraps a component so it renders nothing on the server and on the first client render, and mounts only after `onMounted`. Pair it with `defineAsyncComponent(() => import(…))`. See [SSR](ssr.md). |
 | `renderSlot(slot, context)`, `ContentSlot<T>` | Resolves a `ContentSlot`: a `VNode`, a string or number, or a `(context) => VNode \| string \| number`. |
 | `formatAmount(value, currency?, { locale?, fractionDigits? })`, `formatDate(value, { locale?, timeZone?, dateStyle?, timeStyle? })` | An amount in its currency's own decimals (two without a currency) and a medium date, in the runtime's locale unless you pass one; a date-only `YYYY-MM-DD` keeps its day in every time zone; `'—'` when empty. Also on `/components`. See [printing](printing.md#formatamount-and-formatdate). |
@@ -195,6 +196,7 @@ they are auto-imported.
 | `useTheme()` | `{ theme, preference, updateTheme }`: light / dark / system, stored in `localStorage.theme`, applied as the `dark` class. `theme` and `preference` are reactive getters. See [theming](theming.md#usetheme). |
 | `resolveTheme(stored, prefersDark)`, `applyResolvedTheme(theme)` | The pure theme logic behind `useTheme`, for a boot script. `applyResolvedTheme` does nothing without a `document`. |
 | `useIsClient()` | `Ref<boolean>`: `false` on the server and first render, `true` after mount: a hydration guard. |
+| `useCspNonce()` | `ComputedRef<string \| undefined>`: the nonce of the nearest `NonceProvider`, else of reka's nearest `ConfigProvider`, for a `<style>` of your own; `undefined` without either, on the server and on the client alike. Call it in `setup`. See [CSP](csp.md#nonceprovider). |
 | `useIsMobile()` | `Ref<boolean>`, `true` below 768 px (`@vueuse/core`'s `useMediaQuery`). On the server and in a component's first client render (an SPA's too) it answers for `provideSSRWidth()`'s width, or a 1024 px desktop (`false`), so hydration matches; a phone switches once the component mounts. Called outside a component (a Pinia setup store), it reads the screen straight away. |
 | `useHeadingSpy(ids, onActive, options?)` | IntersectionObserver over heading ids (a ref, getter or array); reports the topmost visible one. |
 | `useLocalizedDate()` | `{ language, locale, format }`: `DATE_UTILS.format` bound to the `I18nProvider` language (`en` without a provider). |

package/docs/guides/i18n.md

@@ -549,6 +549,8 @@ For money and dates shown to a user, `useFormatters()` (`formatAmount`,
 `useNumberFormatter()` is for the other `Intl.NumberFormat` styles
 (percentages, units). See [helpers](helpers.md#nxgtmaterial-vuecomposables).
 
+The trigger of a `DateField`, `DateRangeField` or `TimeField` follows the same language: `01/09/2028` on a French page, `09/01/2028` in English.
+
 ## Reference
 
 Everything `@nxgt/material-vue/i18n` exports is listed in

package/docs/guides/theming.md

@@ -69,6 +69,27 @@ Some colours are derived rather than tokens of their own:
 `bg-secondary-container`, `bg-accent-container`, `bg-error-container`. They
 follow the token they are computed from.
 
+## Fonts
+
+The library ships no font. Text uses Tailwind's `--font-sans`, which the theme
+does not set, so the default is the system sans stack
+(`ui-sans-serif, system-ui, sans-serif`, then the emoji fonts); there is
+nothing to download. To use Inter, self-host it and set the token in the root
+`@theme`:
+
+```css
+@import "@fontsource-variable/inter";
+
+@theme {
+  --font-sans: "Inter Variable", ui-sans-serif, system-ui, sans-serif;
+}
+```
+
+If Inter is not loaded, the browser draws the next font of the stack. Loading it
+from Google Fonts or rsms.me is blocked by a strict CSP: the install, the
+bundler settings and the policy are in
+[Inter / the sans font](csp.md#inter--the-sans-font).
+
 ## Overriding tokens
 
 Redefine the variables **after** the import, for light and dark separately:
@@ -411,6 +432,12 @@ do other bundlers that support package `exports` in CSS. The file is not
 exported under a path of its own, so
 `import '@nxgt/material-vue/dist/material-vue.css'` does not resolve.
 
+The compiled stylesheet loads KaTeX's fonts (`Markdown` maths) from
+`dist/fonts/katex/`, beside it: your bundler emits them as files (Vite inlines the 3.6 KB `KaTeX_Size3` font unless `assetsInlineLimit` is set: see the CSP guide's KaTeX fonts section), and a
+browser fetches one only when a formula needs it. Serving `dist/material-vue.css`
+without `dist/fonts/` makes math fall back to the system fonts
+([troubleshooting](../troubleshooting.md#math-renders-in-the-system-fonts)).
+
 Tokens can be overridden the same way, after the import. What you cannot do
 without Tailwind is use the token utilities (`bg-primary`…) in your own
 markup beyond those the library already uses.

package/docs/roadmap.md

@@ -6,6 +6,21 @@ version they shipped in, and planned entries may name the major they target.
 
 ## Now
 
+- **A strict Content Security Policy** — a page that sends `script-src` with
+  a nonce and no `'unsafe-eval'`, and `style-src-elem` with a nonce and no
+  `'unsafe-inline'`, runs every component with no violation report: a
+  `NonceProvider` forwards the nonce to each component, the CSS the
+  dependencies inject moves into the stylesheet, zod becomes external with
+  schemas built lazily, and the KaTeX fonts ship as files. Done so far:
+  KaTeX's fonts are files beside the compiled stylesheet instead of 1.4 MB of
+  `data:` URIs inside it, so `font-src 'self'` needs no `data:`;
+  `NonceProvider` takes the nonce to reka's `Select`, `Combobox`,
+  `ScrollArea` and `Splitter`, `InputOTP` and `RichTextEditor`;
+  `ImageCropper` is measured and injects no `<style>`, and `InputOTP`'s rules
+  are in the stylesheet too; zod is no longer bundled and no schema is built
+  at import, so the app's `z.config({ jitless: true })` keeps zod from
+  probing `new Function`. Today the
+  [Content Security Policy guide](guides/csp.md) lists what is left to relax.
 - **Empty and error states that look designed** — `EmptyState` and a new
   `ErrorState` in three sizes (`default`, `compact`, `inline`), with in-house
   inline SVG illustrations or a slot for your own. `ErrorState` is a
@@ -84,6 +99,8 @@ version they shipped in, and planned entries may name the major they target.
   `@nxgt/material` (removed there in 3.0): single rows bound to a vee-validate
   array that no component of this package renders. Use `ContactsFormField` and
   `OpeningHoursFormField`, which own the list, the dialog and the array.
+  The `OpeningHoursSchema` and `schema` constants go as well: call
+  `openingHoursSchema()` and `attributeFormSchema()`.
   The `Switch` row's misspelt `data-filed` attribute goes too: select
   `[data-checked="true"]` instead. So do `PdfReader`'s `onPageChange`,
   `onLoadSuccess` and `onLoadError` props: listen with `@page-change`,