@nxgt/material 3.68.0 → 3.71.0

package/dist/{use-heading-spy-DaqibCCm.js → use-heading-spy-CJnBkCY0.js}

@@ -1,14 +1,14 @@
 import { t as e } from "./utils-BLfntITJ.js";
-import { a as t, c as n, d as r, i, n as a, r as o, t as s, u as c } from "./alert-dialog-BhARh_qC.js";
-import { a as l } from "./button-Du7fJ9i_.js";
-import { i as u } from "./translate-material-DkcuQBNr.js";
-import { t as d } from "./use-material-translation-Bxl8sv1n.js";
+import { a as t, c as n, d as r, i, n as a, r as o, t as s, u as c } from "./alert-dialog-y2pbowVh.js";
+import { a as l } from "./button-D54Hrjo0.js";
+import { i as u } from "./translate-material-R-uLthBy.js";
+import { t as d } from "./use-material-translation-CCWUeiEn.js";
 import { _ as f, g as p, h as m, n as h, v as g, y as _ } from "./number.utils-BG_eEt5g.js";
 import { useCallback as v, useEffect as y, useMemo as b, useRef as x, useState as S } from "react";
-import { jsx as C, jsxs as w } from "react/jsx-runtime";
-import { busySettler as T, busySettler as E, createSubmitGuard as D, createSubmitGuard as O } from "@nxgt/material-core/submit-guard";
+import { Fragment as C, jsx as w, jsxs as T } from "react/jsx-runtime";
+import { busySettler as E, busySettler as D, createSubmitGuard as O, createSubmitGuard as k } from "@nxgt/material-core/submit-guard";
 //#region ../../node_modules/date-fns/locale/fr/_lib/formatDistance.js
-var k = {
+var A = {
 	lessThanXSeconds: {
 		one: "moins d’une seconde",
 		other: "moins de {{count}} secondes"
@@ -70,10 +70,10 @@ var k = {
 		one: "presqu’un an",
 		other: "presque {{count}} ans"
 	}
-}, A = (e, t, n) => {
-	let r, i = k[e];
+}, j = (e, t, n) => {
+	let r, i = A[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;
-}, j = {
+}, M = {
 	date: _({
 		formats: {
 			full: "EEEE d MMMM y",
@@ -101,18 +101,18 @@ var k = {
 		},
 		defaultWidth: "full"
 	})
-}, M = {
+}, N = {
 	lastWeek: "eeee 'dernier à' p",
 	yesterday: "'hier à' p",
 	today: "'aujourd’hui à' p",
 	tomorrow: "'demain à' p'",
 	nextWeek: "eeee 'prochain à' p",
 	other: "P"
-}, N = (e, t, n, r) => M[e], P = {
+}, P = (e, t, n, r) => N[e], ee = {
 	narrow: ["av. J.-C", "ap. J.-C"],
 	abbreviated: ["av. J.-C", "ap. J.-C"],
 	wide: ["avant Jésus-Christ", "après Jésus-Christ"]
-}, F = {
+}, te = {
 	narrow: [
 		"T1",
 		"T2",
@@ -131,7 +131,7 @@ var k = {
 		"3ème trimestre",
 		"4ème trimestre"
 	]
-}, I = {
+}, F = {
 	narrow: [
 		"J",
 		"F",
@@ -174,7 +174,7 @@ var k = {
 		"novembre",
 		"décembre"
 	]
-}, L = {
+}, I = {
 	narrow: [
 		"D",
 		"L",
@@ -211,7 +211,7 @@ var k = {
 		"vendredi",
 		"samedi"
 	]
-}, R = {
+}, L = {
 	narrow: {
 		am: "AM",
 		pm: "PM",
@@ -242,7 +242,7 @@ var k = {
 		evening: "du soir",
 		night: "du matin"
 	}
-}, z = (e, t) => {
+}, R = (e, t) => {
 	let n = Number(e), r = t?.unit;
 	if (n === 0) return "0";
 	let i = [
@@ -253,38 +253,38 @@ var k = {
 		"second"
 	], a;
 	return a = n === 1 ? r && i.includes(r) ? "ère" : "er" : "ème", n + a;
-}, B = ["MMM", "MMMM"], V = {
+}, z = ["MMM", "MMMM"], B = {
 	en: m,
 	fr: {
 		code: "fr",
-		formatDistance: A,
-		formatLong: j,
-		formatRelative: N,
+		formatDistance: j,
+		formatLong: M,
+		formatRelative: P,
 		localize: {
-			preprocessor: (e, t) => e.getDate() === 1 || !t.some((e) => e.isToken && B.includes(e.value)) ? t : t.map((e) => e.isToken && e.value === "do" ? {
+			preprocessor: (e, t) => e.getDate() === 1 || !t.some((e) => e.isToken && z.includes(e.value)) ? t : t.map((e) => e.isToken && e.value === "do" ? {
 				isToken: !0,
 				value: "d"
 			} : e),
-			ordinalNumber: z,
+			ordinalNumber: R,
 			era: g({
-				values: P,
+				values: ee,
 				defaultWidth: "wide"
 			}),
 			quarter: g({
-				values: F,
+				values: te,
 				defaultWidth: "wide",
 				argumentCallback: (e) => e - 1
 			}),
 			month: g({
-				values: I,
+				values: F,
 				defaultWidth: "wide"
 			}),
 			day: g({
-				values: L,
+				values: I,
 				defaultWidth: "wide"
 			}),
 			dayPeriod: g({
-				values: R,
+				values: L,
 				defaultWidth: "wide"
 			})
 		},
@@ -414,8 +414,8 @@ var k = {
 		}
 	}
 };
-function H() {
-	let e = u()?.language ?? "en", t = b(() => V[e] ?? m, [e]);
+function V() {
+	let e = u()?.language ?? "en", t = b(() => B[e] ?? m, [e]);
 	return {
 		language: e,
 		locale: t,
@@ -424,8 +424,8 @@ function H() {
 }
 //#endregion
 //#region lib/components/ui/feedback/alert-dialog/alert-dialog-actions.tsx
-function U({ className: t, ...n }) {
-	return /* @__PURE__ */ C(c, {
+function H({ className: t, ...n }) {
+	return /* @__PURE__ */ w(c, {
 		className: e(l({
 			variant: n.variant,
 			color: n.color
@@ -433,8 +433,8 @@ function U({ className: t, ...n }) {
 		...n
 	});
 }
-function W({ className: t, ...n }) {
-	return /* @__PURE__ */ C(r, {
+function U({ className: t, ...n }) {
+	return /* @__PURE__ */ w(r, {
 		"data-variant": n.variant ?? "tonal",
 		className: e(l({
 			variant: n.variant ?? "tonal",
@@ -444,92 +444,165 @@ function W({ className: t, ...n }) {
 	});
 }
 //#endregion
-//#region lib/hooks/use-focus-on-mount.ts
-function G(e = !0) {
-	let t = x(null);
-	return y(() => {
-		e && t.current?.focus();
-	}, [e]), t;
+//#region lib/components/ui/feedback/confirm-dialog/action-refusal.ts
+var W = class extends Error {
+	action;
+	details;
+	constructor(e, t) {
+		super(e), this.name = "ActionRefusal", this.action = t.action, this.details = t.details;
+	}
+};
+function G(e) {
+	return e instanceof W || e instanceof Error && e.name === "ActionRefusal" && typeof e.action?.label == "string";
 }
-//#endregion
-//#region lib/hooks/use-submit-once.ts
 function K(e) {
-	let [t] = S(D), [n] = S(() => T(t)), r = e !== void 0;
-	return y(() => {
-		e !== void 0 && n(e);
-	}, [e, n]), v((e, n) => t.once(e, {
-		settleSync: !r,
-		...n
-	}), [t, r]);
+	return G(e) ? e.action : void 0;
+}
+//#endregion
+//#region lib/components/ui/feedback/confirm-dialog/confirm-refusal.tsx
+var q = "font-medium text-inherit underline underline-offset-2";
+function J({ action: e, close: t }) {
+	return e.href && !e.onAction ? /* @__PURE__ */ w("a", {
+		className: q,
+		href: e.href,
+		onClick: t,
+		children: e.label
+	}) : /* @__PURE__ */ w("button", {
+		type: "button",
+		className: q,
+		onClick: () => {
+			e.onAction?.(), t();
+		},
+		children: e.label
+	});
+}
+function Y({ message: e, cause: t, close: n }) {
+	return G(t) ? /* @__PURE__ */ T("div", {
+		className: "flex flex-col gap-1",
+		children: [
+			/* @__PURE__ */ w("span", { children: e }),
+			t.details != null && /* @__PURE__ */ w("span", {
+				className: "text-muted-foreground",
+				children: t.details
+			}),
+			/* @__PURE__ */ w("span", { children: /* @__PURE__ */ w(J, {
+				action: t.action,
+				close: n
+			}) })
+		]
+	}) : /* @__PURE__ */ w(C, { children: e });
+}
+//#endregion
+//#region lib/components/ui/feedback/confirm-dialog/confirm-alert.tsx
+function X({ message: e, cause: t, close: n, refusal: r }) {
+	return /* @__PURE__ */ w("div", {
+		role: "alert",
+		className: "text-sm text-error-text",
+		children: r ? r({
+			message: e,
+			cause: t,
+			close: n
+		}) : /* @__PURE__ */ w(Y, {
+			message: e,
+			cause: t,
+			close: n
+		})
+	});
+}
+//#endregion
+//#region lib/components/ui/feedback/confirm-dialog/confirm-description.tsx
+function Z({ children: e, details: t }) {
+	return typeof e == "string" && t == null ? /* @__PURE__ */ w(o, { children: e }) : /* @__PURE__ */ w(o, {
+		asChild: !0,
+		children: /* @__PURE__ */ w("div", {
+			className: "space-y-2",
+			children: t == null ? e : /* @__PURE__ */ T(C, { children: [/* @__PURE__ */ w("div", { children: e }), /* @__PURE__ */ w("div", { children: t })] })
+		})
+	});
 }
 //#endregion
 //#region lib/components/ui/feedback/confirm-dialog/confirm-dialog-rules.ts
-function q(e) {
+function ne(e) {
 	return e === "destructive" ? "max-sm:flex-col" : void 0;
 }
-function J({ busy: e, confirmDisabled: t, lockOnRefusal: n, error: r }) {
+function re({ busy: e, confirmDisabled: t, lockOnRefusal: n, error: r }) {
 	return e || !!t || !!n && !!r;
 }
 //#endregion
 //#region lib/components/ui/feedback/confirm-dialog/use-confirm-action.ts
-function Y({ open: e, onOpenChange: t, onConfirm: n }) {
-	let { t: r } = d(), [i, a] = S(!1), [o, s] = S(null);
+function ie({ open: e, onOpenChange: t, onConfirm: n }) {
+	let { t: r } = d(), [i, a] = S(!1), [o, s] = S(null), [c, l] = S(null);
 	return y(() => {
-		e || s(null);
+		e || (s(null), l(null));
 	}, [e]), {
 		pending: i,
 		error: o,
+		cause: c,
 		handleOpenChange: (e) => {
-			e && s(null), t(e);
+			e && (s(null), l(null)), t(e);
 		},
 		handleConfirm: async (e) => {
-			e.preventDefault(), s(null), a(!0);
+			e.preventDefault(), s(null), l(null), a(!0);
 			try {
 				await n(), t(!1);
 			} catch (e) {
-				s(e instanceof Error && e.message ? e.message : r("material.confirm-dialog.failed", "The action failed."));
+				l(e), s(e instanceof Error && e.message ? e.message : r("material.confirm-dialog.failed", "The action failed."));
 			} finally {
 				a(!1);
 			}
 		}
 	};
 }
+function ae(e) {
+	let t = x(null);
+	return y(() => {
+		let n = t.current;
+		if (!e || !n) return;
+		let r = document.activeElement;
+		(r === document.body || n.contains(r)) && n.focus();
+	}, [e]), t;
+}
 //#endregion
 //#region lib/components/ui/feedback/confirm-dialog/confirm-dialog.tsx
-function X({ open: e, onOpenChange: r, title: c, description: l, confirmLabel: u, cancelLabel: f, cancelVariant: p, onConfirm: m, variant: h = "default", loading: g = !1, confirmDisabled: _, lockOnRefusal: v, onCloseAutoFocus: y }) {
-	let { t: b } = d(), { pending: x, error: S, handleOpenChange: T, handleConfirm: E } = Y({
+function Q({ open: e, onOpenChange: r, title: o, description: c, details: l, confirmLabel: u, cancelLabel: f, cancelVariant: p, onConfirm: m, variant: h = "default", loading: g = !1, confirmDisabled: _, lockOnRefusal: v, refusal: y, onCloseAutoFocus: b }) {
+	let { t: x } = d(), { pending: S, error: C, cause: E, handleOpenChange: D, handleConfirm: O } = ie({
 		open: e,
 		onOpenChange: r,
 		onConfirm: m
-	}), D = g || x;
-	return /* @__PURE__ */ C(s, {
+	}), k = g || S;
+	return /* @__PURE__ */ w(s, {
 		open: e,
-		onOpenChange: T,
-		children: /* @__PURE__ */ w(a, {
-			onCloseAutoFocus: y,
+		onOpenChange: D,
+		children: /* @__PURE__ */ T(a, {
+			ref: ae(S),
+			onCloseAutoFocus: b,
 			children: [
-				/* @__PURE__ */ w(t, { children: [/* @__PURE__ */ C(n, { children: c }), /* @__PURE__ */ C(o, { children: l })] }),
-				S && /* @__PURE__ */ C("p", {
-					role: "alert",
-					className: "text-sm text-error-text",
-					children: S
+				/* @__PURE__ */ T(t, { children: [/* @__PURE__ */ w(n, { children: o }), /* @__PURE__ */ w(Z, {
+					details: l,
+					children: c
+				})] }),
+				C && /* @__PURE__ */ w(X, {
+					message: C,
+					cause: E,
+					close: () => r(!1),
+					refusal: y
 				}),
-				/* @__PURE__ */ w(i, {
-					className: q(h),
-					children: [/* @__PURE__ */ C(W, {
-						disabled: D,
+				/* @__PURE__ */ T(i, {
+					className: ne(h),
+					children: [/* @__PURE__ */ w(U, {
+						disabled: k,
 						variant: p,
-						children: f ?? b("material.confirm-dialog.cancel", "Cancel")
-					}), /* @__PURE__ */ C(U, {
-						onClick: E,
+						children: f ?? x("material.confirm-dialog.cancel", "Cancel")
+					}), /* @__PURE__ */ w(H, {
+						onClick: O,
 						color: h === "destructive" ? "error" : "primary",
-						disabled: J({
-							busy: D,
+						disabled: re({
+							busy: k,
 							confirmDisabled: _,
 							lockOnRefusal: v,
-							error: S
+							error: C
 						}),
-						children: D ? b("material.confirm-dialog.processing", "Processing...") : u ?? b("material.confirm-dialog.confirm", "Confirm")
+						children: k ? x("material.confirm-dialog.processing", "Processing...") : u ?? x("material.confirm-dialog.confirm", "Confirm")
 					})]
 				})
 			]
@@ -537,8 +610,27 @@ function X({ open: e, onOpenChange: r, title: c, description: l, confirmLabel: u
 	});
 }
 //#endregion
+//#region lib/hooks/use-focus-on-mount.ts
+function oe(e = !0) {
+	let t = x(null);
+	return y(() => {
+		e && t.current?.focus();
+	}, [e]), t;
+}
+//#endregion
+//#region lib/hooks/use-submit-once.ts
+function $(e) {
+	let [t] = S(O), [n] = S(() => E(t)), r = e !== void 0;
+	return y(() => {
+		e !== void 0 && n(e);
+	}, [e, n]), v((e, n) => t.once(e, {
+		settleSync: !r,
+		...n
+	}), [t, r]);
+}
+//#endregion
 //#region lib/hooks/use-countdown.ts
-function Z(e, { paused: t = !1, onExpire: n, key: r } = {}) {
+function se(e, { paused: t = !1, onExpire: n, key: r } = {}) {
 	let [i, a] = S(e), [o, s] = S({
 		duration: e,
 		key: r
@@ -565,9 +657,9 @@ function Z(e, { paused: t = !1, onExpire: n, key: r } = {}) {
 }
 //#endregion
 //#region lib/components/ui/feedback/unsaved-dialog/unsaved-dialog.tsx
-function Q({ open: e, onOpenChange: t, onLeave: n, title: r, description: i, stayLabel: a, leaveLabel: o }) {
+function ce({ open: e, onOpenChange: t, onLeave: n, title: r, description: i, stayLabel: a, leaveLabel: o }) {
 	let { t: s } = d();
-	return /* @__PURE__ */ C(X, {
+	return /* @__PURE__ */ w(Q, {
 		open: e,
 		onOpenChange: t,
 		variant: "destructive",
@@ -580,9 +672,9 @@ function Q({ open: e, onOpenChange: t, onLeave: n, title: r, description: i, sta
 }
 //#endregion
 //#region lib/hooks/use-heading-spy.ts
-var $ = "0px 0px -65% 0px", ee = [0, 1];
-function te(e, t, n) {
-	let r = n?.rootMargin ?? $, i = n?.threshold ?? ee;
+var le = "0px 0px -65% 0px", ue = [0, 1];
+function de(e, t, n) {
+	let r = n?.rootMargin ?? le, i = n?.threshold ?? ue;
 	y(() => {
 		if (e.length === 0) return;
 		let n = e.map((e) => document.getElementById(e)).filter((e) => e != null);
@@ -604,4 +696,4 @@ function te(e, t, n) {
 	]);
 }
 //#endregion
-export { E as a, G as c, H as d, X as i, U as l, Q as n, O as o, Z as r, K as s, te as t, W as u };
+export { k as a, Q as c, K as d, H as f, D as i, W as l, V as m, ce as n, $ as o, U as p, se as r, oe as s, de as t, G as u };

package/dist/{use-material-translation-Bxl8sv1n.js → use-material-translation-CCWUeiEn.js}

@@ -1,4 +1,4 @@
-import { i as e, t } from "./translate-material-DkcuQBNr.js";
+import { i as e, t } from "./translate-material-R-uLthBy.js";
 import { useCallback as n } from "react";
 //#region lib/i18n/use-material-translation.ts
 function r() {

package/dist/{use-return-focus-Y_Kx0QlW.js → use-return-focus-Duk40DZI.js}

@@ -1,6 +1,6 @@
 import { o as e, r as t } from "./dist-DVRQkaTK.js";
 import { a as n, c as r, i, l as a, o, r as s, s as c } from "./dist-lmHmz_bu.js";
-import { C as l, S as u, w as d } from "./spinner-DCgDw8eq.js";
+import { C as l, S as u, w as d } from "./spinner-BFZxqdWC.js";
 import { c as f, i as p, l as m, o as h, r as g, s as ee } from "./in-dialog-Vwkyp-M5.js";
 import { r as _ } from "./escape-owner-DpaP0lm1.js";
 import * as v from "react";

package/docs/components/buttons-and-actions.md

@@ -444,6 +444,30 @@ Other `<button>` props go to the button. **Parts:** `data-slot="fab"` (with `dat
 
 **FabDock** places its children in the bottom-end corner, 16 px in (24 px from 840 px wide), above the home indicator (`env(safe-area-inset-bottom)`) and above a docked bar that sets `--nxgt-media-dock` (0 otherwise). Several FABs stack, the main one last. `contained` places it in its nearest positioned ancestor (a pane) instead of the viewport: it spans the pane (clicks pass through it), and an open FabMenu's scrim covers that pane only. The menu stays modal, so the whole page, not just the pane, is `inert` while it is open. `data-slot="fab-dock"`.
 
+**Keeping the page end clear.** A viewport `FabDock` (not `contained`) sets `--fab-dock-inset` on the document while it shows its button: the dock's height, its offset from the bottom (gap, home indicator, docked bar) and 12 px of clearance. Pad the scroller or the page with it, so the last row scrolls clear of the button. Where the dock is hidden (`display: none` at a breakpoint, for example `className="sm:hidden"`) the property is removed and the padding falls back to 0. Several docks share the property (the largest value wins, and it goes when the last one does). It is measured on mount and at each resize; a change to `--nxgt-media-dock` alone is picked up at the next resize. A `contained` dock sets nothing.
+
+```tsx
+import { Fab, FabDock } from '@nxgt/material/components';
+import { Plus } from 'lucide-react';
+
+function Members({ names }: { names: string[] }) {
+	return (
+		<>
+			<main className="pb-[var(--fab-dock-inset,0px)]">
+				<ul>
+					{names.map((name) => (
+						<li key={name}>{name}</li>
+					))}
+				</ul>
+			</main>
+			<FabDock className="sm:hidden">
+				<Fab icon={<Plus />} label="Add member" />
+			</FabDock>
+		</>
+	);
+}
+```
+
 **useScrollAway(ref?, { threshold = 24 })** (`@nxgt/material/hooks`) is true while the reader scrolls down by `threshold` px or more since the scroll last turned, and false again on scrolling back up, at the top or at the end. With `ref` it listens to that scroller only; without one, to the window. It reads once per frame at most, and is false on the server and at first render, so the markup never depends on it.
 
 **Accessibility:** a small FAB still takes 44 px on a coarse pointer; the icon is 3:1 or more and the label 4.5:1 or more against each tone, light and dark; under forced colours it keeps a border, a pressed FAB takes the system highlight and a disabled one turns `GrayText`. The springs stop under `prefers-reduced-motion`.

package/docs/components/data-display.md

@@ -1469,6 +1469,39 @@ import { Markdown } from '@nxgt/material/components';
 | --- | --- | --- | --- |
 | `children` | `string` | — | the markdown source |
 | `emojis` | `EmojiItem[]` | — | resolves `:shortcode:` to custom emojis |
+| `math` | `boolean` | `true` | `false`: `$...$` and `$$...$$` stay text, KaTeX is not run |
+| `mermaid` | `boolean` | `true` | `false`: a `mermaid` fence shows as a code block and mermaid is never loaded |
+
+`ChatMarkdown` takes the same `math` and `mermaid` props (default `true`).
+
+### Untrusted input (model output, user text)
+
+`Markdown` and `ChatMarkdown` are safe for text you do not control, with no
+prop to set. These guarantees are covered by tests with XSS payloads:
+
+- **Raw HTML is never rendered.** `<img onerror>`, `<script>`, `<iframe>`,
+  `<svg onload>` and the like show as escaped text; there is no HTML plugin.
+- **Dangerous URLs are dropped.** In a link, an image, a reference definition or
+  an autolink, only `http:`, `https:`, `mailto:`, `tel:`, relative paths and
+  `#anchors` survive (a relative path holding a `:` is dropped), whatever the case or the whitespace. `javascript:`,
+  `vbscript:`, `data:` and `file:` links lose their `href` (the text stays);
+  such images are removed.
+- **External links** (`http(s)://…` and `//host`) carry
+  `rel="noopener noreferrer"`. The component sets no `target`; add none if you
+  can avoid it.
+- Mermaid runs with `securityLevel: 'strict'` and its SVG is inserted as DOM
+  (it is shown as an image from a `blob:` URL: allow `img-src blob:`, no
+  `data:` needed), after mount.
+
+The full `Markdown` (maths, diagrams and highlighted code) runs under a strict
+nonce CSP with no `unsafe-inline`, no `unsafe-eval`, no `style-src-attr` and no
+`img-src data:` (`img-src blob:` for the diagrams): wrap the app in `NonceProvider` and see the
+[CSP guide](../guides/csp.md#markdown-katex-mermaid-and-code-under-a-strict-csp)
+(`Data display/Markdown > StrictCsp` plays it under that policy). Two things
+only: a server-rendered page that has math needs `style-src-attr 'unsafe-inline'`
+(KaTeX's server markup carries inline `style` attributes), and mermaid's mindmap
+and architecture diagrams add a `<style>` to `<head>`. `math={false}` and
+`mermaid={false}` stay for a restricted GFM-only mode.
 
 Mermaid diagrams render in the browser only, after mount; on the server the
 fence is left empty.