@nxgt/material 3.75.0 → 3.76.0

package/dist/{use-heading-spy-B_Z4ArDh.js → use-heading-spy-DJR8YYm6.js}

@@ -1,9 +1,9 @@
 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-BfO_ri-N.js";
-import { a as l } from "./button-DgenqmpS.js";
-import { i as u } from "./translate-material-pVlPJ1v4.js";
-import { t as d } from "./use-material-translation-CIS2n3RB.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 { 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-653apk3f.js";
+import { a as l } from "./button-3op3rtZh.js";
+import { i as u } from "./translate-material-BypJJ1l5.js";
+import { t as d } from "./use-material-translation-CD6QoVal.js";
+import { _ as f, g as p, h as m, m as h, t as g, v as _ } from "./date.utils-DUvqcjan.js";
 import { useCallback as v, useEffect as y, useMemo as b, useRef as x, useState as S } from "react";
 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";
@@ -254,7 +254,7 @@ var A = {
 	], a;
 	return a = n === 1 ? r && i.includes(r) ? "ère" : "er" : "ème", n + a;
 }, z = ["MMM", "MMMM"], B = {
-	en: m,
+	en: h,
 	fr: {
 		code: "fr",
 		formatDistance: j,
@@ -266,35 +266,35 @@ var A = {
 				value: "d"
 			} : e),
 			ordinalNumber: R,
-			era: g({
+			era: f({
 				values: ee,
 				defaultWidth: "wide"
 			}),
-			quarter: g({
+			quarter: f({
 				values: te,
 				defaultWidth: "wide",
 				argumentCallback: (e) => e - 1
 			}),
-			month: g({
+			month: f({
 				values: F,
 				defaultWidth: "wide"
 			}),
-			day: g({
+			day: f({
 				values: I,
 				defaultWidth: "wide"
 			}),
-			dayPeriod: g({
+			dayPeriod: f({
 				values: L,
 				defaultWidth: "wide"
 			})
 		},
 		match: {
-			ordinalNumber: p({
+			ordinalNumber: m({
 				matchPattern: /^(\d+)(ième|ère|ème|er|e)?/i,
 				parsePattern: /\d+/i,
 				valueCallback: (e) => parseInt(e)
 			}),
-			era: f({
+			era: p({
 				matchPatterns: {
 					narrow: /^(av\.J\.C|ap\.J\.C|ap\.J\.-C)/i,
 					abbreviated: /^(av\.J\.-C|av\.J-C|apr\.J\.-C|apr\.J-C|ap\.J-C)/i,
@@ -304,7 +304,7 @@ var A = {
 				parsePatterns: { any: [/^av/i, /^ap/i] },
 				defaultParseWidth: "any"
 			}),
-			quarter: f({
+			quarter: p({
 				matchPatterns: {
 					narrow: /^T?[1234]/i,
 					abbreviated: /^[1234](er|ème|e)? trim\.?/i,
@@ -320,7 +320,7 @@ var A = {
 				defaultParseWidth: "any",
 				valueCallback: (e) => e + 1
 			}),
-			month: f({
+			month: p({
 				matchPatterns: {
 					narrow: /^[jfmasond]/i,
 					abbreviated: /^(janv|févr|mars|avr|mai|juin|juill|juil|août|sept|oct|nov|déc)\.?/i,
@@ -359,7 +359,7 @@ var A = {
 				},
 				defaultParseWidth: "any"
 			}),
-			day: f({
+			day: p({
 				matchPatterns: {
 					narrow: /^[lmjvsd]/i,
 					short: /^(di|lu|ma|me|je|ve|sa)/i,
@@ -389,7 +389,7 @@ var A = {
 				},
 				defaultParseWidth: "any"
 			}),
-			dayPeriod: f({
+			dayPeriod: p({
 				matchPatterns: {
 					narrow: /^(a|p|minuit|midi|mat\.?|ap\.?m\.?|soir|nuit)/i,
 					any: /^([ap]\.?\s?m\.?|du matin|de l'après[-\s]midi|du soir|de la nuit)/i
@@ -415,11 +415,11 @@ var A = {
 	}
 };
 function V() {
-	let e = u()?.language ?? "en", t = b(() => B[e] ?? m, [e]);
+	let e = u()?.language ?? "en", t = b(() => B[e] ?? h, [e]);
 	return {
 		language: e,
 		locale: t,
-		format: v((e, n) => h.format(e, n, t), [t])
+		format: v((e, n) => g.format(e, n, t), [t])
 	};
 }
 //#endregion

package/dist/{use-material-translation-CIS2n3RB.js → use-material-translation-CD6QoVal.js}

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

package/dist/{use-return-focus-DNQtADAR.js → use-return-focus-Cevw_6yq.js}

@@ -1,125 +1,126 @@
 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-B2MubVWb.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";
-import { useCallback as y, useContext as te, useRef as b } from "react";
-import { Fragment as x, jsx as S } from "react/jsx-runtime";
-import { forwardEscape as C, keepListEscape as w } from "@nxgt/material-core/escape-forward";
+import { i as n, n as r, r as i, t as a } from "./dist-DWZXlCZR.js";
+import { C as o, S as s, x as c } from "./spinner-C1QIewWv.js";
+import { a as l, i as u, r as d } from "./dist-DHdUUM1w.js";
+import { c as f, i as p, l as m, o as h, r as g, s as ee } from "./in-dialog-D61Yeaol.js";
+import { r as te } from "./escape-owner-DpaP0lm1.js";
+import * as _ from "react";
+import { useCallback as v, useContext as y, useRef as b } from "react";
+import { Fragment as ne, jsx as x } from "react/jsx-runtime";
+import { forwardEscape as S, keepListEscape as C } from "@nxgt/material-core/escape-forward";
 //#region ../../node_modules/@radix-ui/react-dialog/dist/index.mjs
-var T = Object.defineProperty, E = (e, t) => T(e, "name", {
+var w = Object.defineProperty, T = (e, t) => w(e, "name", {
 	value: t,
 	configurable: !0
-}), D = "Dialog", [O, ne] = r(D), [re, k] = O(D), A = /* @__PURE__ */ E((e) => {
-	let { __scopeDialog: t, children: r, open: i, defaultOpen: a, onOpenChange: o, modal: c = !0 } = e, l = v.useRef(null), u = v.useRef(null), [d, f] = n({
-		prop: i,
-		defaultProp: a ?? !1,
+}), E = "Dialog", [D, O] = l(E), [re, k] = D(E), A = /* @__PURE__ */ T((e) => {
+	let { __scopeDialog: t, children: n, open: r, defaultOpen: i, onOpenChange: o, modal: s = !0 } = e, c = _.useRef(null), l = _.useRef(null), [u, f] = a({
+		prop: r,
+		defaultProp: i ?? !1,
 		onChange: o,
-		caller: D
-	}), [p, m] = v.useState(0), [h, g] = v.useState(0);
-	return /* @__PURE__ */ S(re, {
+		caller: E
+	}), [p, m] = _.useState(0), [h, g] = _.useState(0);
+	return /* @__PURE__ */ x(re, {
 		scope: t,
-		triggerRef: l,
-		contentRef: u,
-		contentId: s(),
-		titleId: s(),
-		descriptionId: s(),
+		triggerRef: c,
+		contentRef: l,
+		contentId: d(),
+		titleId: d(),
+		descriptionId: d(),
 		titlePresent: p > 0,
 		descriptionPresent: h > 0,
 		setTitleCount: m,
 		setDescriptionCount: g,
-		open: d,
+		open: u,
 		onOpenChange: f,
-		onOpenToggle: v.useCallback(() => f((e) => !e), [f]),
-		modal: c,
-		children: r
+		onOpenToggle: _.useCallback(() => f((e) => !e), [f]),
+		modal: s,
+		children: n
 	});
-}, "Dialog"), j = "DialogTrigger", M = /* @__PURE__ */ v.forwardRef(/* @__PURE__ */ E(function(t, n) {
-	let { __scopeDialog: r, ...i } = t, o = k(j, r), s = e(n, o.triggerRef);
-	return /* @__PURE__ */ S(a.button, {
+}, "Dialog"), j = "DialogTrigger", M = /* @__PURE__ */ _.forwardRef(/* @__PURE__ */ T(function(t, r) {
+	let { __scopeDialog: a, ...o } = t, s = k(j, a), c = e(r, s.triggerRef);
+	return /* @__PURE__ */ x(n.button, {
 		type: "button",
 		"aria-haspopup": "dialog",
-		"aria-expanded": o.open,
-		"aria-controls": o.open ? o.contentId : void 0,
-		"data-state": Z(o.open),
-		...i,
-		ref: s,
-		onClick: c(t.onClick, o.onOpenToggle)
+		"aria-expanded": s.open,
+		"aria-controls": s.open ? s.contentId : void 0,
+		"data-state": Z(s.open),
+		...o,
+		ref: c,
+		onClick: i(t.onClick, s.onOpenToggle)
 	});
-}, "DialogTrigger")), N = "DialogPortal", [P, F] = O(N, { forceMount: void 0 }), I = /* @__PURE__ */ E((e) => {
-	let { __scopeDialog: t, forceMount: n, children: r, container: a } = e, o = k(N, t);
-	return /* @__PURE__ */ S(P, {
+}, "DialogTrigger")), N = "DialogPortal", [P, F] = D(N, { forceMount: void 0 }), I = /* @__PURE__ */ T((e) => {
+	let { __scopeDialog: t, forceMount: n, children: r, container: i } = e, a = k(N, t);
+	return /* @__PURE__ */ x(P, {
 		scope: t,
 		forceMount: n,
-		children: v.Children.map(r, (e) => /* @__PURE__ */ S(i, {
-			present: n || o.open,
-			children: /* @__PURE__ */ S(u, {
+		children: _.Children.map(r, (e) => /* @__PURE__ */ x(u, {
+			present: n || a.open,
+			children: /* @__PURE__ */ x(c, {
 				asChild: !0,
-				container: a,
+				container: i,
 				children: e
 			})
 		}))
 	});
-}, "DialogPortal"), L = "DialogOverlay", R = /* @__PURE__ */ v.forwardRef(/* @__PURE__ */ E(function(e, t) {
-	let n = F(L, e.__scopeDialog), { forceMount: r = n.forceMount, ...a } = e, o = k(L, e.__scopeDialog);
-	return o.modal ? /* @__PURE__ */ S(i, {
-		present: r || o.open,
-		children: /* @__PURE__ */ S(B, {
-			...a,
+}, "DialogPortal"), L = "DialogOverlay", R = /* @__PURE__ */ _.forwardRef(/* @__PURE__ */ T(function(e, t) {
+	let n = F(L, e.__scopeDialog), { forceMount: r = n.forceMount, ...i } = e, a = k(L, e.__scopeDialog);
+	return a.modal ? /* @__PURE__ */ x(u, {
+		present: r || a.open,
+		children: /* @__PURE__ */ x(B, {
+			...i,
 			ref: t
 		})
 	}) : null;
-}, "DialogOverlay")), z = t("DialogOverlay.RemoveScroll"), B = /* @__PURE__ */ v.forwardRef(/* @__PURE__ */ E(function(t, n) {
-	let { __scopeDialog: r, ...i } = t, o = k(L, r), s = e(n, d());
-	return /* @__PURE__ */ S(ee, {
+}, "DialogOverlay")), z = t("DialogOverlay.RemoveScroll"), B = /* @__PURE__ */ _.forwardRef(/* @__PURE__ */ T(function(t, r) {
+	let { __scopeDialog: i, ...a } = t, s = k(L, i), c = e(r, o());
+	return /* @__PURE__ */ x(ee, {
 		as: z,
 		allowPinchZoom: !0,
-		shards: [o.contentRef],
-		children: /* @__PURE__ */ S(a.div, {
-			"data-state": Z(o.open),
-			...i,
-			ref: s,
+		shards: [s.contentRef],
+		children: /* @__PURE__ */ x(n.div, {
+			"data-state": Z(s.open),
+			...a,
+			ref: c,
 			style: {
 				pointerEvents: "auto",
-				...i.style
+				...a.style
 			}
 		})
 	});
-}, "DialogOverlayImpl")), V = "DialogContent", H = /* @__PURE__ */ v.forwardRef(/* @__PURE__ */ E(function(e, t) {
-	let n = F(V, e.__scopeDialog), { forceMount: r = n.forceMount, ...a } = e, o = k(V, e.__scopeDialog);
-	return /* @__PURE__ */ S(i, {
-		present: r || o.open,
-		children: o.modal ? /* @__PURE__ */ S(U, {
-			...a,
+}, "DialogOverlayImpl")), V = "DialogContent", H = /* @__PURE__ */ _.forwardRef(/* @__PURE__ */ T(function(e, t) {
+	let n = F(V, e.__scopeDialog), { forceMount: r = n.forceMount, ...i } = e, a = k(V, e.__scopeDialog);
+	return /* @__PURE__ */ x(u, {
+		present: r || a.open,
+		children: a.modal ? /* @__PURE__ */ x(U, {
+			...i,
 			ref: t
-		}) : /* @__PURE__ */ S(W, {
-			...a,
+		}) : /* @__PURE__ */ x(W, {
+			...i,
 			ref: t
 		})
 	});
-}, "DialogContent")), U = /* @__PURE__ */ v.forwardRef(/* @__PURE__ */ E(function(t, n) {
-	let r = k(V, t.__scopeDialog), i = v.useRef(null), a = e(n, r.contentRef, i);
-	return v.useEffect(() => {
-		let e = i.current;
+}, "DialogContent")), U = /* @__PURE__ */ _.forwardRef(/* @__PURE__ */ T(function(t, n) {
+	let r = k(V, t.__scopeDialog), a = _.useRef(null), o = e(n, r.contentRef, a);
+	return _.useEffect(() => {
+		let e = a.current;
 		if (e) return h(e);
-	}, []), /* @__PURE__ */ S(G, {
+	}, []), /* @__PURE__ */ x(G, {
 		...t,
-		ref: a,
+		ref: o,
 		trapFocus: r.open,
 		disableOutsidePointerEvents: r.open,
-		onCloseAutoFocus: c(t.onCloseAutoFocus, (e) => {
+		onCloseAutoFocus: i(t.onCloseAutoFocus, (e) => {
 			e.preventDefault(), r.triggerRef.current?.focus();
 		}),
-		onPointerDownOutside: c(t.onPointerDownOutside, (e) => {
+		onPointerDownOutside: i(t.onPointerDownOutside, (e) => {
 			let t = e.detail.originalEvent, n = t.button === 0 && t.ctrlKey === !0;
 			(t.button === 2 || n) && e.preventDefault();
 		}),
-		onFocusOutside: c(t.onFocusOutside, (e) => e.preventDefault())
+		onFocusOutside: i(t.onFocusOutside, (e) => e.preventDefault())
 	});
-}, "DialogContentModal")), W = /* @__PURE__ */ v.forwardRef(/* @__PURE__ */ E(function(e, t) {
-	let n = k(V, e.__scopeDialog), r = v.useRef(!1), i = v.useRef(!1);
-	return /* @__PURE__ */ S(G, {
+}, "DialogContentModal")), W = /* @__PURE__ */ _.forwardRef(/* @__PURE__ */ T(function(e, t) {
+	let n = k(V, e.__scopeDialog), r = _.useRef(!1), i = _.useRef(!1);
+	return /* @__PURE__ */ x(G, {
 		...e,
 		ref: t,
 		trapFocus: !1,
@@ -133,53 +134,53 @@ var T = Object.defineProperty, E = (e, t) => T(e, "name", {
 			n.triggerRef.current?.contains(a) && t.preventDefault(), t.detail.originalEvent.type === "focusin" && i.current && t.preventDefault();
 		}
 	});
-}, "DialogContentNonModal")), G = /* @__PURE__ */ v.forwardRef(/* @__PURE__ */ E(function(e, t) {
-	let { __scopeDialog: n, trapFocus: r, onOpenAutoFocus: i, onCloseAutoFocus: a, ...o } = e, s = k(V, n);
-	return f(), /* @__PURE__ */ S(x, { children: /* @__PURE__ */ S(m, {
+}, "DialogContentNonModal")), G = /* @__PURE__ */ _.forwardRef(/* @__PURE__ */ T(function(e, t) {
+	let { __scopeDialog: n, trapFocus: r, onOpenAutoFocus: i, onCloseAutoFocus: a, ...o } = e, c = k(V, n);
+	return f(), /* @__PURE__ */ x(ne, { children: /* @__PURE__ */ x(m, {
 		asChild: !0,
 		loop: !0,
 		trapped: r,
 		onMountAutoFocus: i,
 		onUnmountAutoFocus: a,
-		children: /* @__PURE__ */ S(l, {
+		children: /* @__PURE__ */ x(s, {
 			role: "dialog",
-			id: s.contentId,
-			"aria-describedby": s.descriptionPresent ? s.descriptionId : void 0,
-			"aria-labelledby": s.titlePresent ? s.titleId : void 0,
-			"data-state": Z(s.open),
+			id: c.contentId,
+			"aria-describedby": c.descriptionPresent ? c.descriptionId : void 0,
+			"aria-labelledby": c.titlePresent ? c.titleId : void 0,
+			"data-state": Z(c.open),
 			...o,
 			ref: t,
 			deferPointerDownOutside: !0,
-			onDismiss: () => s.onOpenChange(!1)
+			onDismiss: () => c.onOpenChange(!1)
 		})
 	}) });
-}, "DialogContentImpl")), K = "DialogTitle", q = /* @__PURE__ */ v.forwardRef(/* @__PURE__ */ E(function(e, t) {
-	let { __scopeDialog: n, ...r } = e, i = k(K, n), { setTitleCount: s } = i;
-	return o(() => (s((e) => e + 1), () => s((e) => e - 1)), [s]), /* @__PURE__ */ S(a.h2, {
-		id: i.titleId,
-		...r,
+}, "DialogContentImpl")), K = "DialogTitle", q = /* @__PURE__ */ _.forwardRef(/* @__PURE__ */ T(function(e, t) {
+	let { __scopeDialog: i, ...a } = e, o = k(K, i), { setTitleCount: s } = o;
+	return r(() => (s((e) => e + 1), () => s((e) => e - 1)), [s]), /* @__PURE__ */ x(n.h2, {
+		id: o.titleId,
+		...a,
 		ref: t
 	});
-}, "DialogTitle")), J = "DialogDescription", Y = /* @__PURE__ */ v.forwardRef(/* @__PURE__ */ E(function(e, t) {
-	let { __scopeDialog: n, ...r } = e, i = k(J, n), { setDescriptionCount: s } = i;
-	return o(() => (s((e) => e + 1), () => s((e) => e - 1)), [s]), /* @__PURE__ */ S(a.p, {
-		id: i.descriptionId,
-		...r,
+}, "DialogTitle")), J = "DialogDescription", Y = /* @__PURE__ */ _.forwardRef(/* @__PURE__ */ T(function(e, t) {
+	let { __scopeDialog: i, ...a } = e, o = k(J, i), { setDescriptionCount: s } = o;
+	return r(() => (s((e) => e + 1), () => s((e) => e - 1)), [s]), /* @__PURE__ */ x(n.p, {
+		id: o.descriptionId,
+		...a,
 		ref: t
 	});
-}, "DialogDescription")), X = "DialogClose", ie = /* @__PURE__ */ v.forwardRef(/* @__PURE__ */ E(function(e, t) {
-	let { __scopeDialog: n, ...r } = e, i = k(X, n);
-	return /* @__PURE__ */ S(a.button, {
+}, "DialogDescription")), X = "DialogClose", ie = /* @__PURE__ */ _.forwardRef(/* @__PURE__ */ T(function(e, t) {
+	let { __scopeDialog: r, ...a } = e, o = k(X, r);
+	return /* @__PURE__ */ x(n.button, {
 		type: "button",
-		...r,
+		...a,
 		ref: t,
-		onClick: c(e.onClick, () => i.onOpenChange(!1))
+		onClick: i(e.onClick, () => o.onOpenChange(!1))
 	});
 }, "DialogClose"));
 function Z(e) {
 	return e ? "open" : "closed";
 }
-E(Z, "getState");
+T(Z, "getState");
 //#endregion
 //#region lib/components/ui/overlays/dialog/use-escape-forward.ts
 function ae(t, n) {
@@ -187,7 +188,7 @@ function ae(t, n) {
 	return {
 		ref: e(r, n),
 		onEscapeKeyDown(e) {
-			w(e), _(e, r.current), t?.(e), C(r.current, e);
+			C(e), te(e, r.current), t?.(e), S(r.current, e);
 		}
 	};
 }
@@ -196,7 +197,7 @@ function ae(t, n) {
 function oe(t) {
 	let n = b(null);
 	return {
-		overlayRef: y((e) => {
+		overlayRef: v((e) => {
 			let t = n.current;
 			!e || !t?.isConnected || t.parentNode === e.parentNode && t.compareDocumentPosition(e) & Node.DOCUMENT_POSITION_FOLLOWING && t.before(e);
 		}, []),
@@ -206,7 +207,7 @@ function oe(t) {
 //#endregion
 //#region lib/components/ui/overlays/dialog/use-modal-content.ts
 function se({ ref: e, onEscapeKeyDown: t, ...n }, r) {
-	let i = te(g) ?? !0, a = ae(t, p(r ?? i, e)), o = oe(a.ref);
+	let i = y(g) ?? !0, a = ae(t, p(r ?? i, e)), o = oe(a.ref);
 	return {
 		ref: o.contentRef,
 		overlayRef: o.overlayRef,
@@ -266,4 +267,4 @@ function fe(e, { focusFallback: t = !1 } = {}) {
 	};
 }
 //#endregion
-export { H as a, I as c, ne as d, ie as i, q as l, se as n, Y as o, A as r, R as s, fe as t, M as u };
+export { H as a, I as c, O as d, ie as i, q as l, se as n, Y as o, A as r, R as s, fe as t, M as u };

package/dist/useLatest-C2PnQEeD.js

@@ -0,0 +1,8 @@
+import { useRef as e } from "react";
+//#region ../../node_modules/react-use/esm/useLatest.js
+var t = function(t) {
+	var n = e(t);
+	return n.current = t, n;
+};
+//#endregion
+export { t };

package/docs/README.md

@@ -10,6 +10,7 @@ detail: every option, the second example, and the traps.
 | [Forms](guides/forms.md) | You are building a form: the field / `*FormField` pair, React Hook Form + Zod, what each field emits, server errors, multi-step forms |
 | [Themes for your app](guides/themes.md) | You define your own themes: `defineTheme` modules, the Vite plugin's `themes` option, the `nxgt-theme` command and its CI check, the tone warnings |
 | [Barcodes and label sheets](guides/barcode.md) | You draw a Code 128 or Data Matrix code and print a sheet of labels with `@nxgt/material/barcode`: `Barcode`, `LabelSheet` and `Label`, label size, columns, rows, gaps and a start offset, dark mode, print and accessibility |
+| [Calculator](guides/calculator.md) | You add an exact-decimal calculator with `@nxgt/material/calculator` (and `CalculatorField` with `@nxgt/material/calculator-field`): `Calculator`, the keyboard, the tape and memory, copy and paste, what is stored, feedback, sizing and accessibility |
 | [Charts](guides/charts.md) | You draw charts with `@nxgt/material/charts`: each chart, the shared props, reference bands, thresholds and point tones, zoom and phone scroll, the keyboard, accessibility, theming the `--chart-1..5` tokens, and moving off the Nivo charts, removed in 3.0 |
 | [Cards and tiles](guides/cards-and-tiles.md) | You want a `DataTable` as a list of cards or tiles: `layout`, `renderCard`, `renderTile`, the card's one link, selection, the sort control, columns by the list's width |
 | [DataGrid](guides/data-grid.md) | You are building an editable grid: columns and editors, save modes and conflicts, resizing, hiding and reordering columns, paste, fill and series, undo, totals, long lists, phones, custom editors, CSP |

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

@@ -580,8 +580,17 @@ import { Illustration } from '@nxgt/material/illustrations';
 | `tone` | `Tone` | `neutral` | the colour of the meaning: a named tone or one of your `AppTones` |
 | `closeLabel` | `string` | translated | name of the close button |
 | `className` | `string` | — | on the full-screen surface |
+| `modal` | `boolean` | `true` | `false`: a non-modal announcement, see below |
 
-A tap anywhere dismisses, so keep text a reader must act on out of a short `duration`. Without a `description` the dialog is described by the hint `material.moment.hint` ("Press Escape or tap to dismiss."), read by assistive technology only. The close button is named by `material.buttons.close`.
+On the modal variant a tap anywhere dismisses, so keep text a reader must act on out of a short `duration`. Without a `description` the modal dialog is described by the hint `material.moment.hint` ("Press Escape or tap to dismiss."), read by assistive technology only. The close button is named by `material.buttons.close`.
+
+### Non-modal: an event the user did not trigger
+
+A realtime update that shows a `Moment` while the user types or is about to press a button must not take their focus or swallow their next tap. With `modal={false}` it is not a dialog: focus stays where it is (no move, no trap, no return), the page behind stays interactive, and the backdrop lets pointer events through (only the text and the close button take them). The text is announced politely through a `role="status"` live region (`aria-live="polite"`) holding the picture, title and description (the action and close button sit beside it), and it does not interrupt a screen reader. Visuals, `duration` and the reduced-motion behaviour are the same. Escape dismisses it through a document listener that never moves focus (and stands down when the page already handled the key); the close button, a tap on the text and `duration` dismiss it too. Give a non-modal Moment a `duration`: nothing takes the user to it, so it should not stay.
+
+```tsx
+<Moment modal={false} open={open} onOpenChange={setOpen} duration={5000} title="Mira was eliminated" />
+```
 
 **Storybook:** `Feedback & status/Moment` · **Vue:** not yet (#2248)
 

package/docs/components/form-fields.md

@@ -734,6 +734,7 @@ export function Amount() {
 | `value` / `defaultValue` | `number \| null` | `null` | the amount |
 | `onChange` | `(value: number \| null) => void` | — | called while typing and on blur |
 | `currency` | `string` | `'EUR'` | the suffix text; formatting follows the `I18nProvider` language |
+| `trailingAction` | `ReactNode` | — | a button after the currency code, inside the field (`CalculatorField`'s "Open calculator" uses it); it keeps its own name and focus, and the input leaves room for it |
 | `fractionDigits` | `number` | the currency's own | decimals shown once the amount is committed (on blur): ISO 4217 by default — `JPY` 0, `EUR` 2, `KWD` 3 (2 for a code `Intl` does not know). Pass `2` to keep two decimals whatever the currency; the value is clamped to 0–20 (the range every `Intl` accepts), and `NaN` or `Infinity` counts as not given. What is typed is not rounded, on screen until blur nor in the emitted number: a `JPY` field shows `1,235` for `1234.5` and emits `1234.5` |
 
 **Emits:** `number | null` — never the formatted string.

package/docs/components/rich-widgets.md

@@ -12,6 +12,7 @@ the app owns the data.
 | <img src="../previews/rich-widgets-native-charts-linechart.webp" width="96" alt=""> | [Charts](#charts) | Native SVG charts (line, area, bar, pie, donut, gauge, radial, funnel, heat map, radar, scatter, combo) with keyboard, summary and View data; the Nivo ones were removed in 3.0 |
 | <img src="../previews/rich-widgets-drawing.webp" width="96" alt=""> | [Drawing](#drawing) | Vector drawing from a scene of plain data or JSX primitives: theme colours, accessible, focusable nodes, strict-CSP safe |
 | <img src="../previews/rich-widgets-barcode.webp" width="96" alt=""> | [Barcode](#barcode) | Code 128 and Data Matrix as accessible SVG, themed and dark-aware, black on white in print, with `LabelSheet` for a printed sheet of labels |
+| <img src="../previews/rich-widgets-calculator.webp" width="96" alt=""> | [Calculator](#calculator) | Exact decimal calculator (Standard, Scientific, a point of sale, Financial, Conversion and Programmer) with the usual precedence, a shaped keypad, tape, memory, keyboard, copy and paste, and a number field whose button opens it (`CalculatorField`, in `@nxgt/material/calculator-field`), in its own entry; variants other than Standard load on demand |
 | <img src="../previews/rich-widgets-emojipicker.webp" width="96" alt=""> | [EmojiPicker](#emojipicker) | Shared emoji picker and list |
 | <img src="../previews/rich-widgets-mentionlist.webp" width="96" alt=""> | [MentionList](#mentionlist) | `@` mention list with local search |
 | <img src="../previews/rich-widgets-documenteditor.webp" width="96" alt=""> | [DocumentEditor](#documenteditor) | Rich text editor for long-form writing, built on a headless core |
@@ -684,6 +685,113 @@ first); lengths are millimetres or a string with a unit. A value a symbology can
 [barcode guide](../guides/barcode.md) for printing a sheet and for the limits
 of each symbology.
 
+## Calculator
+
+![Calculator](../previews/rich-widgets-calculator.webp)
+
+An exact-decimal calculator from `@nxgt/material/calculator`: `0.1 + 0.2` is
+`0.3`, `2 + 3 × 4` is `14`, and the whole expression stays above the result. A
+large display previews the value while you type; the keypad is native buttons
+in one `role="group"` (one tab stop, arrow keys over the grid); `=` is a
+primary pill. A tape keeps every result to replay or reuse, `MC MR M+ M−` keep
+a memory, the physical keyboard works, and copy and paste take the locale's
+separators. A live region announces each result. The maths is
+`@nxgt/material-core/calculator`, with no `eval`, so a strict CSP is
+satisfied. Only Standard is in the entry: the other variants load on demand the first time they are shown, behind a skeleton of the same size with a polite status (the server renders that loading body, then the client fetches the variant). Its own entry, server-safe, with an opt-in stylesheet: import
+`@nxgt/material/calculator.css` once, after `styles.css` (`styles.css` does not
+carry it).
+
+```tsx
+import { Calculator } from '@nxgt/material/calculator';
+
+<Calculator />
+<Calculator locale="fr" persist={{ key: 'till-1' }} globalKeyboard onResult={(value) => save(value)} />
+```
+
+`persist` (default `true`) keeps the tape and memory in `localStorage` after
+mount, `feedback={{ haptics, sound }}` is off by default, and the layout follows
+the calculator's own width (compact under 360px, the tape beside the keypad
+from 720px). `variants` and `variant` choose among the available variants
+(Standard, Scientific, the point of sale, Financial, Conversion and Programmer now; the switcher shows them all
+unless `variants={['standard']}`). Scientific adds `sin cos tan` and their hyperbolic
+forms (2nd for the inverses), logarithms, powers and roots, `n!`, `π`, `e`,
+`EE` and `mod`, with a toolbar for the angle unit (degrees, radians, gradians)
+and the result notation (auto, scientific, engineering), exact to 34 digits:
+`sin(30)` is `0.5`.
+
+```tsx
+<Calculator defaultVariant="scientific" />
+```
+
+### Point of sale
+
+A point of sale till: type an amount like a till (`1`, `2`, `5` is `1.25`), `×` a
+quantity, `%` a discount, `+` to add the line, a ticket whose lines go one by
+one, VAT by rate from your `vatRates` (prices with or without it), the bills
+to hand over from your `denominations`, the change due and a Charge button.
+Exact to the currency's minor unit, and the ticket is never stored.
+
+```tsx
+<Calculator
+  defaultVariant="pos"
+  currency="EUR"
+  vatRates={[20, 5.5]}
+  denominations={[5, 10, 20, 50]}
+  onCharge={(total, ticket) => pay(total, ticket)}
+/>
+```
+
+### Financial
+
+Financial is a panel of forms on the library's own fields, in four sub-tabs:
+VAT (add it, or take it out of a price), margin and markup (the rates of a
+cost and a price, or the price or cost a rate gives), percent change, and a
+loan (payment, totals and a captioned amortisation `<table>`). The amounts are
+exact decimals rounded to the minor unit of `currency`, written in `locale`,
+and a result is announced once the fields settle. `currency` is the shared
+prop (the point of sale reads it too): with none, amounts have two decimals
+and no code.
+
+```tsx
+<Calculator defaultVariant="financial" currency="EUR" />
+```
+
+### Conversion
+
+![Conversion](../previews/rich-widgets-calculator-conversion.webp)
+
+A unit converter: a category (length, mass, temperature, volume, area, speed,
+time, data), a value, the unit it is in and the unit wanted, a swap button and
+the exact result in the locale (`1 in` is `2.54 cm`; `32 °F` is `0 °C`). Add
+`currencyRates` for a Currency category, as an object or a function that fetches
+the rates.
+
+```tsx
+<Calculator
+  defaultVariant="conversion"
+  currencyRates={{ base: 'EUR', rates: { USD: '1.085', JPY: '160.5' }, asOf: '2026-10-28' }}
+/>
+```
+
+### CalculatorField
+
+Its own entry, `@nxgt/material/calculator-field`: a number field (a currency field with `currency`) whose button opens the
+calculator, seeded with the field's number: a popover from 768px, a bottom
+sheet below. Apply writes the rounded result, Cancel and Escape keep the
+number. `CalculatorFormField` is the React Hook Form wrapper. It needs the
+calculator's stylesheet, `@nxgt/material/calculator.css`. The calculator it opens loads a variant other than Standard on demand, so the first time one is chosen it shows the loading skeleton for a moment.
+
+With `currency` the field is a `CurrencyField`, which takes no `suffix`, `step` or `hideSteppers`, and `min` / `max` do not limit what is typed (Apply still holds a currency amount to them): those props apply only without `currency`.
+
+```tsx
+import { CalculatorField, CalculatorFormField } from '@nxgt/material/calculator-field';
+
+<CalculatorField label="Price" currency="EUR" value={price} onChange={setPrice} />
+<CalculatorFormField control={form.control} name="total" label="Total" />
+```
+
+See the [calculator guide](../guides/calculator.md).
+
 ## EmojiPicker
 
 ![EmojiPicker](../previews/rich-widgets-emojipicker.webp)

package/docs/getting-started.md

@@ -154,6 +154,7 @@ and need nothing.
 | `@nxgt/material/models` | `Status<T>` |
 | `@nxgt/material/types` | Shared function types (`PromiseOr`, `FunctionOr`, …) |
 | `@nxgt/material/styles.css` | Source Tailwind v4 tokens. **This** is the stylesheet a Tailwind app imports |
+| `@nxgt/material/calculator.css` | The calculator's stylesheet, for apps that use `/calculator` or `/calculator-field`. Not part of `styles.css` |
 | `@nxgt/material/map.css` | Leaflet's stylesheet, for apps that use `/map`. Not part of `styles.css` |
 | `@nxgt/material/backgrounds.css` | Every background preset's CSS, for apps that use `/backgrounds`; `@nxgt/material/backgrounds/<preset>.css` loads one. Not part of `styles.css` |