@nxgt/material 3.29.0 → 3.30.1

package/dist/pdf-reader.js

@@ -1,3 +1,3 @@
-import { t as e } from "./public-BeM7-x-m.js";
+import { t as e } from "./public-Cvwb2tds.js";
 import { configurePdfReader as t } from "@nxgt/material-core/pdf-reader";
 export { e as PdfReader, t as configurePdfReader };

package/dist/print.js

@@ -1,5 +1,5 @@
-import { r as e } from "./i18n-provider-BfyDgd2o.js";
-import { t } from "./translate-material-BneuBHXZ.js";
+import { r as e } from "./i18n-provider-BBhhsa4I.js";
+import { t } from "./translate-material-BEQGLLY7.js";
 import { Children as n, createContext as r, isValidElement as i, useCallback as a, useContext as o, useEffect as s, useMemo as c, useState as l } from "react";
 import { jsx as u, jsxs as d } from "react/jsx-runtime";
 import { resolvePdfFileName as f } from "@nxgt/material-core/pdf-file-name";

package/dist/{public-BeM7-x-m.js → public-Cvwb2tds.js}

@@ -6,18 +6,18 @@ import { c as i, i as a, l as o, n as s, o as c, s as l } from "./dist-lmHmz_bu.
 import { a as u, o as d } from "./tooltip-CkttDIab.js";
 import { i as f } from "./dist-C4wtXCjf.js";
 import { r as p, t as m } from "./in-dialog-Vwkyp-M5.js";
-import { C as h, D as g, E as _, O as v, S as y, T as b, _ as x, f as S, g as ee, k as te, r as ne, t as C, u as re, w } from "./dialog-LtXwv6N3.js";
-import { c as T, d as ie, f as E, i as ae, l as oe, n as se, o as D, t as ce, u as O } from "./dropdown-menu-ppMPD12c.js";
-import { S as le, a as k, d as A, g as ue, h as de, i as fe, m as pe, n as j, r as me, t as M, u as he, w as ge } from "./toolbar-items-C1GdN9P9.js";
-import { t as N } from "./use-material-translation-Cqcwkuur.js";
-import { t as _e } from "./button-BjIg_Lz6.js";
+import { C as h, D as g, E as _, O as v, S as y, T as b, _ as x, f as S, g as ee, k as te, r as ne, t as C, u as re, w } from "./dialog-Cp7bS5LI.js";
+import { c as T, d as ie, f as E, i as ae, l as oe, n as se, o as D, t as ce, u as O } from "./dropdown-menu-DJNMcPZa.js";
+import { S as le, a as k, d as A, g as ue, h as de, i as fe, m as pe, n as j, r as me, t as M, u as he, w as ge } from "./toolbar-items-GIaifZbx.js";
+import { t as N } from "./use-material-translation-B0RHv3l7.js";
+import { t as _e } from "./button-B47lM8a5.js";
 import { n as ve, t as ye } from "./icon-button-ifTpXt0A.js";
 import { t as be } from "./useEvent-2fKq-6w8.js";
 import { n as xe, t as Se } from "./toggle-group-BMJNcFAC.js";
 import { o as Ce } from "./escape-owner-C4W_sOAU.js";
 import { n as we } from "./use-slice-reducer-BGkeGtML.js";
 import { r as Te } from "./use-csp-nonce-ZKs9k-ov.js";
-import { n as Ee, t as De } from "./empty-state-X_nikpBS.js";
+import { n as Ee, t as De } from "./empty-state-Dv9AtrMw.js";
 import { t as Oe } from "./client-only.utils-3nHNzCki.js";
 import { t as ke } from "./use-scroll-away-PQRFZkT2.js";
 import { ArrowLeft as Ae, BookOpenText as je, ChevronDown as Me, ChevronLeft as Ne, ChevronRight as Pe, ChevronUp as Fe, Download as Ie, Eraser as Le, FileText as Re, FileWarning as ze, FileX2 as Be, Highlighter as Ve, KeyRound as He, LayoutGrid as Ue, List as We, Loader2 as Ge, Maximize as Ke, MessageSquareText as qe, Minimize as Je, MoreVertical as Ye, MousePointer2 as Xe, MoveHorizontal as Ze, PanelLeft as Qe, Pen as $e, PencilLine as et, Printer as tt, RotateCw as nt, Search as rt, StickyNote as it, Type as at, Underline as ot, Undo2 as st, Volume2 as ct, X as lt, XIcon as ut, ZoomIn as dt, ZoomOut as ft } from "lucide-react";

package/dist/{rich-code-block-B4TIjZRA.js → rich-code-block-MItKFVB-.js}

@@ -1,7 +1,7 @@
 import { t as e } from "./tooltip-CkttDIab.js";
-import { c as t, n, t as r } from "./dropdown-menu-ppMPD12c.js";
-import { t as i } from "./use-material-translation-Cqcwkuur.js";
-import { a, i as o, n as s, o as c, t as l } from "./code-language-items-C_UeMQMm.js";
+import { c as t, n, t as r } from "./dropdown-menu-DJNMcPZa.js";
+import { t as i } from "./use-material-translation-B0RHv3l7.js";
+import { a, i as o, n as s, o as c, t as l } from "./code-language-items-COd99vab.js";
 import { i as u, n as d, r as f, s as p } from "./dist-C3GR7kJd.js";
 import { t as m } from "./code-block-spec-CGLKRhwD.js";
 import { Check as h, ChevronDown as g, Copy as _, Maximize2 as v, WrapText as y } from "lucide-react";
@@ -143,7 +143,7 @@ function M({ node: e, editor: t, updateAttributes: n, editable: r, wrap: a, onWr
 }
 //#endregion
 //#region lib/components/ui/widgets/editor/extensions/code/code-block-open.tsx
-var N = x(() => import("./code-editor-2EU-q9FV.js").then((e) => e.n).then((e) => ({ default: e.CodeEditor })));
+var N = x(() => import("./code-editor-BLLpzmCc.js").then((e) => e.n).then((e) => ({ default: e.CodeEditor })));
 function P() {
 	let { t: e } = i();
 	return /* @__PURE__ */ T("div", {

package/dist/{sortable-provider-Dcsw0pgW.js → sortable-provider-CIlK0Vuk.js}

@@ -1,6 +1,6 @@
 import { t as e } from "./utils-BLfntITJ.js";
 import { t } from "./dist-DVRQkaTK.js";
-import { t as n } from "./use-material-translation-Cqcwkuur.js";
+import { t as n } from "./use-material-translation-B0RHv3l7.js";
 import { t as r } from "./icon-button-ifTpXt0A.js";
 import { t as i } from "./compose-refs-DZ0iIVF-.js";
 import { GripVertical as a } from "lucide-react";

package/dist/{spinner-1Ia6Akhy.js → spinner-DRGPXRNW.js}

@@ -1,6 +1,6 @@
 import { t as e } from "./utils-BLfntITJ.js";
 import { o as t } from "./tooltip-CkttDIab.js";
-import { t as n } from "./use-material-translation-Cqcwkuur.js";
+import { t as n } from "./use-material-translation-B0RHv3l7.js";
 import { jsx as r } from "react/jsx-runtime";
 //#region lib/components/ui/feedback/spinner/spinner.tsx
 var i = t("transition-all duration-500", {

package/dist/{stored-language-DoWMr969.js → stored-language-CkPRWAaM.js}

@@ -2663,6 +2663,10 @@ var t = {
 			recent: "Recent",
 			manage: "Manage…",
 			choose: "Choose"
+		},
+		"row-menu": {
+			label: "Actions for {name}",
+			column: "Actions"
 		}
 	} },
 	fr: { material: {
@@ -5326,6 +5330,10 @@ var t = {
 			recent: "Récents",
 			manage: "Gérer…",
 			choose: "Choisir"
+		},
+		"row-menu": {
+			label: "Actions pour {name}",
+			column: "Actions"
 		}
 	} }
 }, n = "language", r = "en", i = Object.keys(t);

package/dist/theme-picker.js

@@ -1,10 +1,10 @@
 import { t as e } from "./utils-BLfntITJ.js";
 import { a as t, i as n, n as r, o as i, r as a, t as o } from "./bubble-input-B7BVd9fX.js";
-import { t as s } from "./use-material-translation-Cqcwkuur.js";
+import { t as s } from "./use-material-translation-B0RHv3l7.js";
 import { a as c, r as l } from "./icon-sprites-CaYXzOL4.js";
 import { t as u } from "./use-theme-DMcyJ52N.js";
 import { a as d, r as f } from "./theme-context-Cofk6vgs.js";
-import { t as p } from "./theme-toggle-GlKtdgYz.js";
+import { t as p } from "./theme-toggle-CPzxOW_X.js";
 import { n as m, t as h } from "./nxgt-theme-ZS945iMP.js";
 import { Check as g } from "lucide-react";
 import { useContext as _ } from "react";

package/dist/{theme-toggle-GlKtdgYz.js → theme-toggle-CPzxOW_X.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./use-material-translation-Cqcwkuur.js";
+import { t as e } from "./use-material-translation-B0RHv3l7.js";
 import { i as t } from "./theme-store-CSl51uNH.js";
 import { n, t as r } from "./use-theme-DMcyJ52N.js";
 import { r as i } from "./theme-context-Cofk6vgs.js";

package/dist/{toolbar-items-C1GdN9P9.js → toolbar-items-GIaifZbx.js}

@@ -4,9 +4,9 @@ import { a as i, c as a, i as o, l as s, r as c, s as l } from "./dist-lmHmz_bu.
 import { b as u, c as d, d as f, f as p, l as m, t as h, u as g, x as _ } from "./tooltip-CkttDIab.js";
 import { i as v, n as y, r as b, t as x } from "./dist-C4wtXCjf.js";
 import { a as S, c as C, l as w, o as T, r as ee, s as te, t as E } from "./in-dialog-Vwkyp-M5.js";
-import { A as ne, M as re, N as ie, b as ae, d as oe, f as se, i as ce, j as le, l as ue, n as de, o as fe, r as pe, t as me, u as he, y as ge } from "./dropdown-menu-ppMPD12c.js";
+import { A as ne, M as re, N as ie, b as ae, d as oe, f as se, i as ce, j as le, l as ue, n as de, o as fe, r as pe, t as me, u as he, y as ge } from "./dropdown-menu-DJNMcPZa.js";
 import { a as _e, n as ve, r as ye, t as be } from "./dist-B7RjY7SL.js";
-import { t as xe } from "./use-material-translation-Cqcwkuur.js";
+import { t as xe } from "./use-material-translation-B0RHv3l7.js";
 import { t as Se } from "./warn-once-C_e47JM8.js";
 import { o as Ce } from "./escape-owner-C4W_sOAU.js";
 import { ChevronLeft as we, ChevronRightIcon as Te, MoreVertical as Ee } from "lucide-react";

package/dist/{translate-material-BneuBHXZ.js → translate-material-BEQGLLY7.js}

@@ -1,5 +1,5 @@
-import "./stored-language-DoWMr969.js";
-import { a as e, r as t } from "./translator-D88BbpXZ.js";
+import "./stored-language-CkPRWAaM.js";
+import { a as e, r as t } from "./translator-Ec9Uj32C.js";
 //#region lib/i18n/translate-material.ts
 function n(n, r, i, a) {
 	if (n) for (let e of /* @__PURE__ */ new Set([n, n.split("-")[0]])) {

package/dist/{translator-D88BbpXZ.js → translator-Ec9Uj32C.js}

@@ -1,5 +1,5 @@
 import { t as e } from "./is-production-GLw59WU8.js";
-import { a as t, i as n, r, t as i } from "./stored-language-DoWMr969.js";
+import { a as t, i as n, r, t as i } from "./stored-language-CkPRWAaM.js";
 import { t as a } from "./get-CTzJAwfc.js";
 //#region ../../node_modules/@formatjs/fast-memoize/index.js
 function o(e, t) {

package/dist/{use-chat-composer-beyfZPBD.js → use-chat-composer-BEs82Xar.js}

@@ -7,21 +7,21 @@ import { a as o, c as s, i as c, l, n as u, o as d, r as f, s as p, t as m } fro
 import { _ as h, a as g, g as _, h as v, m as y, o as b, p as x, t as S, v as C, y as w } from "./tooltip-CkttDIab.js";
 import { a as T, i as E, n as D, r as O, t as k } from "./dist-C4wtXCjf.js";
 import { i as A, n as ee, t as j } from "./in-dialog-Vwkyp-M5.js";
-import { A as M, C as N, D as te, E as ne, O as P, S as re, T as ie, _ as F, b as ae, f as oe, g as se, k as I, l as ce, m as le, n as ue, o as de, r as fe, s as pe, t as me, u as he, v as ge, w as _e, x as ve, y as ye } from "./dialog-LtXwv6N3.js";
+import { A as M, C as N, D as te, E as ne, O as P, S as re, T as ie, _ as F, b as ae, f as oe, g as se, k as I, l as ce, m as le, n as ue, o as de, r as fe, s as pe, t as me, u as he, v as ge, w as _e, x as ve, y as ye } from "./dialog-Cp7bS5LI.js";
 import { A as be, C as xe, D as Se, E as Ce, O as we, S as Te, T as Ee, _ as De, a as Oe, b as ke, d as Ae, f as je, g as Me, h as Ne, i as Pe, k as Fe, l as Ie, m as Le, n as Re, o as ze, p as Be, r as Ve, s as He, t as Ue, u as We, v as Ge, w as Ke, x as qe, y as Je } from "./floating-ui.dom-KkZSW8_E.js";
-import { D as Ye, E as Xe, N as Ze, O as Qe, c as $e, d as et, f as tt, i as nt, k as rt, m as it, n as at, o as ot, p as st, t as ct, u as lt } from "./dropdown-menu-ppMPD12c.js";
+import { D as Ye, E as Xe, N as Ze, O as Qe, c as $e, d as et, f as tt, i as nt, k as rt, m as it, n as at, o as ot, p as st, t as ct, u as lt } from "./dropdown-menu-DJNMcPZa.js";
 import { a as ut, i as dt, n as ft } from "./field-blur-context-Cft9s7Hg.js";
-import { C as pt, S as mt, a as ht, c as gt, d as _t, l as vt, n as yt, o as bt, s as xt, u as St } from "./toolbar-items-C1GdN9P9.js";
+import { C as pt, S as mt, a as ht, c as gt, d as _t, l as vt, n as yt, o as bt, s as xt, u as St } from "./toolbar-items-GIaifZbx.js";
 import { a as Ct, i as wt, n as Tt, o as Et, t as Dt } from "./bubble-input-B7BVd9fX.js";
 import { i as Ot } from "./dist-B7RjY7SL.js";
-import "./stored-language-DoWMr969.js";
-import { a as kt } from "./translator-D88BbpXZ.js";
+import "./stored-language-CkPRWAaM.js";
+import { a as kt } from "./translator-Ec9Uj32C.js";
 import { h as At } from "./get-CTzJAwfc.js";
 import { t as jt } from "./isEmpty-F_g3jLf8.js";
-import { t as L } from "./use-material-translation-Cqcwkuur.js";
-import { t as Mt } from "./spinner-1Ia6Akhy.js";
+import { t as L } from "./use-material-translation-B0RHv3l7.js";
+import { t as Mt } from "./spinner-DRGPXRNW.js";
 import { a as Nt } from "./button-tones-BwuVvAmd.js";
-import { a as Pt, i as Ft, n as It, r as Lt, t as Rt } from "./button-BjIg_Lz6.js";
+import { a as Pt, i as Ft, n as It, r as Lt, t as Rt } from "./button-B47lM8a5.js";
 import { t as R } from "./icon-button-ifTpXt0A.js";
 import { a as zt, r as Bt } from "./icon-sprites-CaYXzOL4.js";
 import { t as Vt } from "./use-ssr-media-query-C6M5m8sf.js";
@@ -35,10 +35,10 @@ import { a as tn, i as nn, o as rn } from "./escape-owner-C4W_sOAU.js";
 import { n as an } from "./use-slice-reducer-BGkeGtML.js";
 import { t as on } from "./browser-only-DQ94lWF8.js";
 import { t as sn } from "./compose-refs-DZ0iIVF-.js";
-import { n as cn, r as ln, t as un } from "./chip-DIBIDUZH.js";
-import { n as dn, t as fn } from "./icon-badge-oLBh3Mlk.js";
+import { n as cn, r as ln, t as un } from "./chip-Bf80b1XT.js";
+import { n as dn, t as fn } from "./icon-badge-DEk244kn.js";
 import { r as pn } from "./use-csp-nonce-ZKs9k-ov.js";
-import { t as mn } from "./empty-state-X_nikpBS.js";
+import { t as mn } from "./empty-state-Dv9AtrMw.js";
 import { t as hn } from "./skeleton-DSdtr2qc.js";
 import { H as gn, V as _n, X as vn, bt as yn, it as bn, lt as xn, n as Sn, t as Cn, xt as wn, yt as Tn } from "./dist-moutbfbd.js";
 import { t as En } from "./markdown-Dw_uH7j7.js";
@@ -10782,7 +10782,7 @@ var CS = (e = {}) => Dn({
 		let [{ default: t }, { lowlight: n }, { richCodeBlock: r }] = await Promise.all([
 			import("./dist-CRMFGjng.js"),
 			import("./lowlight-OtcjU2Sa.js"),
-			import("./rich-code-block-B4TIjZRA.js")
+			import("./rich-code-block-MItKFVB-.js")
 		]);
 		return [r(t, {
 			lowlight: n,

package/dist/{use-heading-spy-BN0yeBod.js → use-heading-spy-BRAPVvfh.js}

@@ -1,4 +1,4 @@
-import { r as e } from "./i18n-provider-BfyDgd2o.js";
+import { r as e } from "./i18n-provider-BBhhsa4I.js";
 import { _ as t, g as n, h as r, n as i, v as a, y as o } from "./number.utils-BG_eEt5g.js";
 import { useCallback as s, useEffect as c, useMemo as l, useRef as u } from "react";
 //#region ../../node_modules/date-fns/locale/fr/_lib/formatDistance.js

package/dist/{use-material-translation-Cqcwkuur.js → use-material-translation-B0RHv3l7.js}

@@ -1,5 +1,5 @@
-import { r as e } from "./i18n-provider-BfyDgd2o.js";
-import { t } from "./translate-material-BneuBHXZ.js";
+import { r as e } from "./i18n-provider-BBhhsa4I.js";
+import { t } from "./translate-material-BEQGLLY7.js";
 import { useCallback as n } from "react";
 //#region lib/i18n/use-material-translation.ts
 function r() {

package/docs/components/data-display.md

@@ -9,7 +9,7 @@ from `@nxgt/material/components`.
 | <img src="../previews/data-display-avatar.webp" width="96" alt=""> | [Avatar](#avatar) | Image with a fallback and an optional online / offline dot |
 | <img src="../previews/data-display-avatargroup.webp" width="96" alt=""> | [AvatarGroup](#avatargroup) | Overlapping avatars with a `+N` overflow |
 | <img src="../previews/data-display-shape.webp" width="96" alt=""> | [Shape](#shape) | Material 3 Expressive's shapes as a backdrop, an icon container or a mask for a photo |
-| <img src="../previews/data-display-badge.webp" width="96" alt=""> | [Badge](#badge) | Status pill, 20 px, in seven tones, soft or outlined |
+| <img src="../previews/data-display-badge.webp" width="96" alt=""> | [Badge](#badge) | Status pill, 20 px, in seven tones, soft or outlined, with an optional decorative `icon` before the words |
 | <img src="../previews/data-display-countbadge.webp" width="96" alt=""> | [CountBadge](#countbadge) | Count in the corner of its children |
 | <img src="../previews/data-display-dayseparator.webp" width="96" alt=""> | [DaySeparator](#dayseparator) | "Today", "Yesterday" or the date between two hairlines |
 | <img src="../previews/data-display-periodcards.webp" width="96" alt=""> | [PeriodCards](#periodcards) | Consecutive date ranges (terms, sprints) as cards, with a current marker and an optional link per card |
@@ -26,6 +26,7 @@ from `@nxgt/material/components`.
 | <img src="../previews/data-display-accordioncard.webp" width="96" alt=""> | [AccordionCard](#accordioncard) | Accordion rendered from `items` |
 | <img src="../previews/data-display-timeline.webp" width="96" alt=""> | [Timeline](#timeline) | Vertical event timeline with relative times |
 | <img src="../previews/data-display-changehistory.webp" width="96" alt=""> | [ChangeHistory](#changehistory) | History of the changes made to anything, as a rail or as cards |
+| <img src="../previews/data-display-zonedtime.webp" width="96" alt=""> | [ZonedTime](#zonedtime) | A moment written in a given time zone, identical on the server and the client |
 | <img src="../previews/data-display-eventchip.webp" width="96" alt=""> | [EventChip](#eventchip) | Calendar event pill, soft, solid or outlined |
 | <img src="../previews/data-display-codeblock.webp" width="96" alt=""> | [CodeBlock](#codeblock) | Code, JSON tree and tabbed samples |
 | <img src="../previews/data-display-markdown.webp" width="96" alt=""> | [Markdown](#markdown) | GFM with math and mermaid |
@@ -226,17 +227,21 @@ import { Badge } from '@nxgt/material/components';
 <Badge variant="soft" tone="success">Paid</Badge>
 <Badge variant="outlined" tone="error">Late</Badge>
 <Badge variant="success">New</Badge>
+<Badge variant="soft" tone="warning" icon="box-archive">Archived</Badge>
 ```
 
+With an `icon`, a status reads as icon plus words, so colour is never the only signal. The icon is decorative (`aria-hidden`: the words name the status), 12 px, and takes the tone's text colour in `soft` and `outlined`; nothing changes without it.
+
 | Prop | Type | Default | Effect |
 | --- | --- | --- | --- |
+| `icon` | `IconName \| ReactNode` | — | a decorative icon before the label: a string is a Font Awesome name (drawn solid), a node is rendered as given. Ignored with `asChild` |
 | `variant` | `'default' \| 'secondary' \| 'error' \| 'success' \| 'info' \| 'warning' \| 'soft' \| 'outlined'` | `'default'` | the filled tones, `soft` (recommended for a state) or `outlined` |
 | `tone` | the eight named tones, or a tone of your own declared in `AppTones` | `'neutral'` | the colour of a `soft` or `outlined` badge; ignored by the filled variants |
 | `asChild` | `boolean` | `false` | renders its child (a link) with the badge styles |
 
 A `Badge` link (`asChild`) no longer fades on hover: a badge is a status, not a button. Put a `Chip` or a `Button` where the user acts.
 
-**Storybook:** `Data display/Badge` (Soft, SoftContrast) · **Vue:** `Badge` (without `soft` and `tone` yet)
+**Storybook:** `Data display/Badge` (Soft, SoftContrast), `Data display/Badge/Icon` · **Vue:** `Badge` (without `soft` and `tone` yet)
 
 ---
 
@@ -1083,6 +1088,43 @@ and the user's zone) and both sides agree:
 
 ---
 
+## ZonedTime
+
+![ZonedTime](../previews/data-display-zonedtime.webp)
+
+A moment written in a time zone you name, with the zone: `Mar 12, 2026, 4:04 PM UTC+1`
+inside a `<time dateTime>`. It prints the same on the server and in the browser,
+so there is no hydration warning to suppress: the zone is passed in (the
+component never reads the machine's), the date and the time are formatted
+separately and joined with a comma, and the zone is a computed offset (`UTC+2`,
+`UTC+5:30`, `UTC`), never a name that depends on the runtime's ICU data. The
+language is the provider's: `12 mars 2026, 16:04 UTC+1` in French.
+
+```tsx
+import { ZonedTime } from '@nxgt/material/components';
+
+<ZonedTime at="2026-03-12T15:04:05Z" timeZone="Europe/Paris" />
+// Mar 12, 2026, 4:04 PM UTC+1
+<ZonedTime at={event.startsAt} timeZone={school.timeZone} seconds zoneLabel="none" />
+```
+
+| Prop | Type | Default | Effect |
+| --- | --- | --- | --- |
+| `at` | `Date \| string \| number` | — | the instant; an invalid one renders nothing |
+| `timeZone` | `string` | — | the IANA zone it is written in. One `Intl` does not know is written as `UTC`, not as the machine's zone |
+| `seconds` | `boolean` | `false` | writes the seconds (`4:04:05 PM`); lists read at a glance without |
+| `dateStyle` | `'short' \| 'medium' \| 'long'` | `'medium'` | `03/12/2026`, `Mar 12, 2026`, `March 12th, 2026` (the language's patterns) |
+| `zoneLabel` | `'offset' \| 'none'` | `'offset'` | the offset after the time, or nothing for a column whose header names the zone. A zone's short name (`CEST`) is not offered: it differs between ICU builds |
+| `className` | `string` | — | on the `<time>` |
+
+The offset follows the instant (`Europe/Paris` is `UTC+1` in winter and
+`UTC+2` in summer). `ChangeHistory` takes a `timeZone` and `RelativeTime` a `now`
+the same way; pass the app's zone from the server so every screen agrees.
+
+**Storybook:** `Data display/ZonedTime` · **Vue:** not yet (tracked as a `vue` issue)
+
+---
+
 ## EventChip
 
 ![EventChip](../previews/data-display-eventchip.webp)

package/docs/components/data-table-filter-and-lists.md

@@ -15,6 +15,7 @@ either can be used alone.
 | --- | --- | --- |
 | <img src="../previews/data-table-filter-lists-datatable.webp" width="96" alt=""> | [DataTable](#datatable) | TanStack Table v9 with sorting, selection, expansion and pagination, client-side or one server page at a time |
 | <img src="../previews/data-table-filter-lists-servertable.webp" width="96" alt=""> | [ServerTable](#servertable) | A server-mode `DataTable` driven by the URL, with the Filter in its top band (a title and a description, or neither): sort, cursor paging, the empty page with a scene, an action and removable chips, one count announced |
+| <img src="../previews/data-table-filter-lists-rowmenu.webp" width="96" alt=""> | [RowMenu](#rowmenu) | A row's "..." button named after its row ("Actions for Ada"), its menu aligned to the end with the destructive item last, and `rowMenuColumn` to drop both in a table |
 | <img src="../previews/data-table-filter-lists-listempty.webp" width="96" alt=""> | [ListEmpty](#listempty) | A list's empty page: nothing yet, with a scene and an action, or nothing matches and the way out |
 | <img src="../previews/data-table-filter-lists-datagrid.webp" width="96" alt=""> | [DataGrid](#datagrid) | An editable grid: spreadsheet keys, paste, a fill handle with series, undo, totals, saving with versions and conflicts (lazy ones fetch theirs on "Keep mine"), `onRefuse` for a refused paste or fill, row selection (`enableRowSelection`), and resizable, hideable and reorderable columns (`columnControls`, `columnLayout`, `DataGridColumnsMenu`) |
 | <img src="../previews/data-table-filter-lists-daygroupedlist.webp" width="96" alt=""> | [DayGroupedList](#daygroupedlist) | A list split by day under sticky Today / Yesterday / Earlier headings |
@@ -955,6 +956,70 @@ page's `title`.
 
 ---
 
+## RowMenu
+
+![RowMenu](../previews/data-table-filter-lists-rowmenu.webp)
+
+The actions of a row: a ghost "..." button and a menu aligned to its end. The
+button is named after its row ("Actions for Ada Lovelace", the template is
+`material.row-menu.label`), so a screen reader does not hear a bare "Actions"
+on every row. It is 44px on a coarse pointer (and below `md`) and 36px with a
+fine pointer from `md` up; the menu's items are 44px high on a coarse pointer,
+and the destructive ones come last, after a separator.
+
+```tsx
+import { DataTable, rowMenuColumn } from '@nxgt/material/components';
+
+const columns = [
+  /* …your columns… */
+  rowMenuColumn<Person>({
+    label: (person) => person.name,
+    items: (person) => [
+      { label: 'Edit', onSelect: () => edit(person) },
+      { label: 'Delete…', destructive: true, onSelect: () => setRemoving(person) },
+    ],
+  }),
+];
+
+<DataTable columns={columns} data={people} />
+```
+
+`rowMenuColumn` returns a column for `DataTable` and `ServerTable`: a header
+that is visually hidden but named "Actions" (`material.row-menu.column`), a cell
+per row, no sorting and no hiding. Build the columns once (outside the render,
+or in a `useMemo`), and keep a dialog's state in the page, not in the cell: a
+cell that remounts would lose it.
+
+For a menu of your own, compose the parts: `RowMenuTrigger` forwards its props
+and `ref`, so it is the child of a `DropdownMenuTrigger asChild`.
+
+```tsx
+<DropdownMenu>
+  <DropdownMenuTrigger asChild>
+    <RowMenuTrigger label={person.name} />
+  </DropdownMenuTrigger>
+  <DropdownMenuContent align="end">{/* items */}</DropdownMenuContent>
+</DropdownMenu>
+```
+
+| Prop | Type | Default | Effect |
+| --- | --- | --- | --- |
+| `label` (`RowMenu`, `RowMenuTrigger`) | `string` | — | the row's name; the button's name is "Actions for {label}" (translated). An `aria-label` of your own wins |
+| `items` (`RowMenu`) | `{ label, icon?, onSelect?, disabled?, destructive?, id? }[]` | `[]` | the actions; `destructive` ones are drawn in the error colour and moved last, after a separator |
+| `children` (`RowMenu`) | `ReactNode` | — | menu content of your own, above `items` (put a destructive item last yourself) |
+| `triggerProps` (`RowMenu`) | button props | — | `disabled`, `className`, `data-*` on the button |
+| `open`, `onOpenChange` (`RowMenu`) | as `DropdownMenu` | — | controlled state |
+| `label`, `items`, `menu` (`rowMenuColumn`) | `(row) => string` / `(row) => RowMenuItem[]` / `(row) => ReactNode` | — | the row's name, its actions as data, or its menu content as nodes |
+| `id`, `className` (`rowMenuColumn`) | `string` | `'actions'`, `'w-12'` | the column's id and its cell classes |
+
+Focus returns to the button when the menu closes, and when a dialog opened from
+an item (a `ConfirmDialog`, a `Dialog`, a `Sheet`) closes: the item is gone by
+then, so the dialog hands the focus back to the menu's button.
+
+**Storybook:** `Data table, filter & lists/RowMenu`, `Guides/Accessibility/Touch targets/Row menu` · **Vue:** not yet (tracked as a `vue` issue)
+
+---
+
 ## ListEmpty
 
 ![ListEmpty](../previews/data-table-filter-lists-listempty.webp)

package/docs/components/overlays-and-menus.md

@@ -42,7 +42,7 @@ item that is both chosen and highlighted gets an 18 % tint and the bar. `SelectF
 | <img src="../previews/overlays-menus-dropdownmenu.webp" width="96" alt=""> | [DropdownMenu](#dropdownmenu) | Menu with checkbox and radio items, submenus and shortcuts |
 | <img src="../previews/overlays-menus-contextmenu.webp" width="96" alt=""> | [ContextMenu](#contextmenu) | Right-click menu |
 | <img src="../previews/overlays-menus-menubar.webp" width="96" alt=""> | [Menubar](#menubar) | Desktop-style menubar |
-| <img src="../previews/overlays-menus-command.webp" width="96" alt=""> | [Command](#command) | Command palette, inline or in a modal |
+| <img src="../previews/overlays-menus-command.webp" width="96" alt=""> | [Command](#command) | Command palette, inline or in a modal; `commandProps` for server results |
 
 ## Dialog
 
@@ -679,9 +679,22 @@ children and they replace that, as before.
 | `shouldFilter` (`Command`) | `boolean` | `true` | `false` when you filter the items yourself (server search) |
 | `title` / `description` (`CommandDialog`) | `string` | `"Command Palette"` / `"Search for a command to run..."` (translated) | the dialog's title and description, inside the dialog and visually hidden |
 | `mobilePresentation` (`CommandDialog`) | `'dialog' \| 'top' \| 'fullscreen'` | `'top'` | below 640 px: pinned under the top edge (so the input and the results stay above the on-screen keyboard), the whole screen, or the centred modal it was before |
-| `open`, `onOpenChange` (`CommandDialog`) | as `Dialog` | — | `CommandDialog` takes every `Dialog` prop |
+| `commandProps` (`CommandDialog`) | `Pick<CommandProps, 'shouldFilter' \| 'value' \| 'onValueChange' \| 'loop' \| 'filter' \| 'label'>` | — | reaches the inner `Command`: `{ shouldFilter: false }` for a palette whose results come from a server (cmdk then does not hide them again by the typed text), `value` / `onValueChange` for the highlighted item, `label` for the input's accessible name. The input's sizing, the dialog's title and its focus stay as they are |
+| `open`, `onOpenChange` (`CommandDialog`) | as `Dialog` | — | every other prop goes to the `Dialog` |
 
 `CommandDialog` does not bind a keyboard shortcut; listen for ⌘K yourself and
 set `open`.
 
-**Storybook:** `Overlays & menus/Command` · **Vue:** `Command`, `CommandDialog` (same parts)
+```tsx
+// A server-driven search: the server already filtered, cmdk must not again.
+<CommandDialog open={open} onOpenChange={setOpen} commandProps={{ shouldFilter: false }}>
+	<CommandInput value={query} onValueChange={setQuery} />
+	<CommandList>
+		{results.map((r) => (
+			<CommandItem key={r.id} value={r.id}>{r.label}</CommandItem>
+		))}
+	</CommandList>
+</CommandDialog>
+```
+
+**Storybook:** `Overlays & menus/Command`, `Overlays & menus/Command/Server results` · **Vue:** `Command`, `CommandDialog` (same parts)

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nxgt/material",
-	"version": "3.29.0",
+	"version": "3.30.1",
 	"license": "MIT",
 	"bugs": {
 		"email": "stevegires@gmail.com"

package/dist/lib/components/ui/display/change-history/zoned.d.ts

@@ -1,12 +0,0 @@
-import { DayInput } from '@nxgt/material-core/day-math';
-/**
- * The wall clock of an instant in `timeZone`, as a `Date` whose local
- * getters read it: `wallClock('2026-08-02T23:30:00Z', 'Asia/Tokyo')` is
- * August 3rd, 08:30 whatever zone the machine runs in. The day maths
- * (`daysAgo`, `localIsoDay`, `formatDayLabel`) then work on it unchanged, so
- * a server and a browser group and label the same way. Without a
- * `timeZone` (or with one `Intl` does not know), the instant itself.
- */
-export declare function wallClock(value: DayInput, timeZone?: string): Date;
-/** The wall clock as an offset-less ISO string, which date-fns reads as local: `2026-08-03T08:30:00`. */
-export declare function wallIso(value: DayInput, timeZone?: string): string;