@nxgt/material 2.12.0 → 2.14.0

package/dist/{usecaseDiagram-POWQR4AR-DIdH4Oia.js → usecaseDiagram-POWQR4AR-CzGOd4ic.js}

@@ -8,11 +8,11 @@ import "./chunk-7PRAP22T-0C6_H8Li.js";
 import { a as g, i as _, o as v, r as y } from "./chunk-J5ZVWO5B-DmRRmhon.js";
 import "./chunk-7INBJB4K-k-I67NSP.js";
 import "./chunk-5DYCD2WN-Cd1zazNp.js";
-import "./chunk-Z7XXMR3K-vmLFt9Cr.js";
+import "./chunk-Z7XXMR3K-BzO1efzA.js";
 import { t as ee } from "./chunk-XXDRQBXY-dKXxu_aj.js";
 import { t as te } from "./chunk-WEXAMYUT-CbFOhEve.js";
 import "./chunk-UA2S7LBM-ChuksCDg.js";
-import { r as ne, t as re } from "./chunk-GNY47TPC-DCFqYc_z.js";
+import { r as ne, t as re } from "./chunk-GNY47TPC-CGgBmY0O.js";
 //#region ../../node_modules/chevrotain/node_modules/lodash-es/_freeGlobal.js
 var ie = typeof global == "object" && global && global.Object === Object && global, ae = typeof self == "object" && self && self.Object === Object && self, b = ie || ae || Function("return this")(), oe = b.Symbol, se = Object.prototype, ce = se.hasOwnProperty, le = se.toString, ue = oe ? oe.toStringTag : void 0;
 function de(e) {

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/dist/{xychartDiagram-PMCCYNJV-aecZdRhd.js → xychartDiagram-PMCCYNJV-Bh_1zZoW.js}

@@ -1,4 +1,4 @@
-import { at as e, rt as t, st as n } from "./components-BYxsGbyO.js";
+import { at as e, rt as t, st as n } from "./components-qTUjhFuo.js";
 import { n as r } from "./src-CsLQInsN.js";
 import { i } from "./chunk-ZIGJFQKS-9VXArDKF.js";
 import { n as a } from "./chunk-Y2CYZVJY-BAad7w_K.js";

package/docs/README.md

@@ -14,6 +14,7 @@ detail: every option, the second example, and the traps.
 | [Printing](guides/printing.md) | You render PDF documents with `@nxgt/material/print`, turn them into a download, a new tab or a server response, write them as plain data, or bundle them into an SSR server |
 | [Maps](guides/maps.md) | You render Leaflet maps or a location field with `@nxgt/material/map` |
 | [SSR](guides/ssr.md) | Your app renders on a 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, hook, slice factory or type from `/lib`, `/hooks`, `/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

@@ -532,6 +532,11 @@ import { Markdown } from '@nxgt/material/components';
 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)).
+
 **Storybook:** `Data display/Markdown` · **Vue:** `Markdown`, `MermaidDiagram`
 
 ---

package/docs/components/form-fields.md

@@ -744,6 +744,8 @@ Parts: `AttributesField` (the editable list), `AttributesList` (display with
 attribute), `AttributeValuesForm` (fill values for a set of attributes).
 Form wrappers: `AttributesFormField` (the definitions),
 `AttributeValuesFormFieldSet` and `AttributeValueFormField` (the values).
+`AttributeForm` builds its zod schema when it first renders, not when the
+module loads ([CSP](../guides/csp.md#zod-and-unsafe-eval)).
 
 | Prop | Type | Default | Effect |
 | --- | --- | --- | --- |
@@ -856,6 +858,18 @@ const hours: OpeningHour[] = [
 Parts: `OpeningHours` (the list) and `OpeningHoursDialog` (add / edit).
 `OpeningHoursItem`, a day row bound to a react-hook-form array, is
 **deprecated** and removed in 3.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 3.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/components';
+import { z } from 'zod';
+
+const schema = z.object({ hours: z.array(openingHoursSchema()) });
+```
 
 | Prop | Type | Default | Effect |
 | --- | --- | --- | --- |

package/docs/components/primitives.md

@@ -27,6 +27,7 @@ other pages are built from these.
 | <img src="../previews/primitives-toggle.webp" width="96" alt=""> | [Toggle](#toggle) | Pressable on / off button |
 | <img src="../previews/primitives-togglegroup.webp" width="96" alt=""> | [ToggleGroup](#togglegroup) | Single or multiple toggle group |
 | | [Activity](#activity) | React `<Activity>` switched by a boolean |
+| | [NonceProvider](#nonceprovider) | Gives the page's CSP nonce to every component below |
 
 ## Accordion
 
@@ -773,3 +774,33 @@ import { Activity } from '@nxgt/material/components';
 | `visible` | `boolean` | `false` | `true` renders with `mode="visible"`; `false` hides the subtree and keeps its state |
 
 **Storybook:** — · **Vue:** `Activity`
+
+## 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: the `<style>`
+elements of `ScrollArea` and `Select`, the stylesheet tiptap injects for
+`RichTextEditor`, and, on the client, the scroll lock of every modal. Render it once, at the root, on the server and on
+the client, with the same nonce.
+
+```tsx
+import { NonceProvider } from '@nxgt/material/components';
+
+<NonceProvider nonce={nonce}>
+	<App />
+</NonceProvider>;
+```
+
+| 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 nonce (none at the root) |
+
+`useCspNonce()` (`@nxgt/material/hooks`) reads it in a component of your own;
+`getCspNonce()` and `setCspNonce()` (`@nxgt/material/lib`) read and keep the
+page's nonce outside React. The server entry, the client entry and what each
+component needs are in the [Content Security Policy
+guide](../guides/csp.md#nonceprovider).
+
+**Storybook:** `Primitives/NonceProvider` · **Vue:** `NonceProvider`

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

@@ -250,7 +250,7 @@ export function Framework() {
 
 ![Autocomplete](../previews/selection-choice-autocomplete.webp)
 
-Single or multiple (chips) autocomplete with free-solo values and a query callback.
+Single or multiple (chips) autocomplete with free-solo values, accent-insensitive matching and a debounced server search.
 
 ```tsx
 import { Autocomplete } from '@nxgt/material/components';
@@ -286,15 +286,79 @@ Parts: `Autocomplete`, `AutocompleteChips` (the chips row it uses in
 | `mode` | `'single' \| 'multiple'` | — | required; decides the `value` type |
 | `value` | `string` / `string[]` | — | required, per `mode` |
 | `onValueChange` | `(value?: string \| null) => void` / `(value?: string[] \| null) => void` | — | per `mode` |
-| `options` | `T[]` (`{ value, label }` by default) | — | the items |
+| `options` | `T[]` (`{ value, label }` by default) | `[]` | the items; with `onSearch`, the list before a search and the selected options' labels |
 | `getOptionValue`, `getOptionLabel` | `(option: T) => string` | `.value`, `.label` | for other option shapes |
+| `filter` | `'accent-insensitive' \| 'none' \| (option: T, query: string) => boolean` | `'accent-insensitive'`, `'none'` with `onSearch` | 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 |
 | `freeSolo` | `boolean` | — | accept a typed value that is not an option |
-| `onQueryChange` | `(query: string) => void` | — | fetch options as the user types |
+| `onSearch` | `(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 |
+| `onSearchError` | `(error: unknown) => void` | — | `onSearch` rejected (an abort is not a rejection) |
+| `minQueryLength` | `number` | `1` | `onSearch` waits for this many characters; below it the list says "Type at least N characters to search." |
+| `debounceMs` | `number` | `250` | the pause before `onSearch` and `onQueryChange` run |
+| `onQueryChange` | `(query: string) => void` | — | the query once typing pauses — fetch `options` yourself here |
+| `loading` | `boolean` | — | with `onQueryChange`: "Loading…" in the list, `aria-busy` on the listbox, announced |
+| `searchError` | `ReactNode` | — | with `onQueryChange`: shown and announced in place of the options |
+| `empty` | `ReactNode` | "No option found." | text when nothing matches |
 | `actions` | `ReactNode \| ((query: string) => ReactNode)` | — | buttons at the end of the list ("Create …") |
 | `required` | `boolean` | — | the asterisk, and `aria-required` on the `combobox` input, which the label names |
 | `disabled` | `boolean` | — | disables the input and each chip's remove button |
 | `error` | `boolean` | — | error border on the chips box, error helper text, `aria-invalid` on the input |
 
+### Searching a server
+
+`onSearch` 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.
+
+```tsx
+import { Autocomplete } from '@nxgt/material/components';
+import { useState } from 'react';
+
+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[];
+}
+
+export function PersonField() {
+	const [value, setValue] = useState('');
+	return (
+		<Autocomplete<Person>
+			mode="single"
+			label="Person"
+			placeholder="Search by name"
+			value={value}
+			onValueChange={(next) => setValue(next ?? '')}
+			onSearch={searchPeople}
+			minQueryLength={2}
+			debounceMs={300}
+		/>
+	);
+}
+```
+
+With `onSearch`, `minQueryLength` defaults to 1, `debounceMs` 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 `onSearchError`; 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/components` too.
+
+To fetch it yourself instead, keep `options` and `loading` in your state,
+update them from `onQueryChange`, 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 listbox is `aria-busy` while
+loading. The strings are `material.autocomplete.loading`, `.results`,
+`.search-error` and `.min-query`. The keyboard works as before.
+
 **Emits:** `string | null` in `single` mode, `string[]` in `multiple`.
 **Form wrapper:** `AutocompleteFormField` — `control` and `name`, see
 [forms](../guides/forms.md#the-pair) and [what each field emits](../guides/forms.md#what-each-field-emits).
@@ -409,7 +473,7 @@ full naming alignment is planned for 3.0.
 
 | Prop | Type | Default | Effect |
 | --- | --- | --- | --- |
-| `options` | `{ value: string; label: ReactNode }[]` | — | the radios |
+| `options` | `{ value: string; label: ReactNode; disabled?: boolean }[]` | — | the radios; `disabled` on an option disables only it |
 | `value` / `defaultValue` | `string` | — | Radix radio group state |
 | `onValueChange` | `(value: string) => void` | — | |
 | `orientation` | `'vertical' \| 'horizontal'` | `'horizontal'` | layout |
@@ -422,6 +486,12 @@ before the first radio, and `error` sets `aria-invalid` on it (a `radiogroup`
 may carry it; your own `aria-invalid` wins). 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 Radix 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:** `string`.
 **Form wrapper:** `RadioGroupFormField` — `control` and `name`, see
 [forms](../guides/forms.md#the-pair) and [what each field emits](../guides/forms.md#what-each-field-emits).

package/docs/getting-started.md

@@ -30,7 +30,9 @@ does not import that entry never has them in its tree.
 | `@nxgt/material/print` | `bun add @react-pdf/renderer@^4.9 react-pdf-tailwind` ([printing](guides/printing.md)) |
 | `@nxgt/material/map` | `bun add leaflet react-leaflet @react-leaflet/core @adamscybot/react-leaflet-component-marker react-geolocated` ([maps](guides/maps.md)) |
 
-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`,
 these docs and `CHANGELOG.md` (from the release after 2.6.1). There is no
 `postinstall` build step.
@@ -45,6 +47,8 @@ In the app's root stylesheet, in this order:
 @source "../node_modules/@nxgt/material/";
 ```
 
+Toaster, Drawer 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), so it
   runs through *your* Tailwind build. Nothing injects it: import it