@nxgt/material 3.25.1 → 3.26.0

package/dist/pdf-reader.js

@@ -1,3 +1,3 @@
-import { t as e } from "./public-DAF5SCWH.js";
+import { t as e } from "./public-Bi0CZNsk.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-BpZOKh7U.js";
-import { t } from "./translate-material-CCyVEi_f.js";
+import { r as e } from "./i18n-provider-W9rFBjXN.js";
+import { t } from "./translate-material-DeVLQZTk.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-DAF5SCWH.js → public-Bi0CZNsk.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-B2GXKBp3.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-mTDyFwbQ.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-Tn3MMu-s.js";
-import { t as N } from "./use-material-translation-BFQODuQz.js";
-import { t as _e } from "./button-rdIhY2BT.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-CJUqXZ-U.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-D5yDYO-N.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-BgcE2dSq.js";
+import { t as N } from "./use-material-translation-DgeOLK6g.js";
+import { t as _e } from "./button-e-N2SrR4.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-lj7vjYWG.js";
+import { n as Ee, t as De } from "./empty-state-BHrddQlY.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-CLkufAhI.js → rich-code-block-B81MCyAI.js}

@@ -1,7 +1,7 @@
 import { t as e } from "./tooltip-CkttDIab.js";
-import { c as t, n, t as r } from "./dropdown-menu-mTDyFwbQ.js";
-import { t as i } from "./use-material-translation-BFQODuQz.js";
-import { a, i as o, n as s, o as c, t as l } from "./code-language-items-Dww9amx_.js";
+import { c as t, n, t as r } from "./dropdown-menu-D5yDYO-N.js";
+import { t as i } from "./use-material-translation-DgeOLK6g.js";
+import { a, i as o, n as s, o as c, t as l } from "./code-language-items-Cra1Wt0w.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-DHB5ytUz.js").then((e) => e.n).then((e) => ({ default: e.CodeEditor })));
+var N = x(() => import("./code-editor-CTNdNmnn.js").then((e) => e.n).then((e) => ({ default: e.CodeEditor })));
 function P() {
 	let { t: e } = i();
 	return /* @__PURE__ */ T("div", {

package/dist/{sortable-provider-BofwO9zZ.js → sortable-provider-CJ5P_QhI.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-BFQODuQz.js";
+import { t as n } from "./use-material-translation-DgeOLK6g.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-B7HCQMFr.js → spinner-BuMxoFCj.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-BFQODuQz.js";
+import { t as n } from "./use-material-translation-DgeOLK6g.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-CJn_iWwG.js → stored-language-pHK1kTl6.js}

@@ -1781,6 +1781,42 @@ var t = {
 			today: "Today",
 			yesterday: "Yesterday"
 		},
+		history: {
+			label: "Change history",
+			loading: "Loading history",
+			"empty-title": "No history yet",
+			"empty-description": "Changes will appear here.",
+			hidden: "Hidden",
+			"no-value": "Empty",
+			"changed-to": "changed to",
+			before: "Before",
+			after: "After",
+			value: "Value",
+			"hide-changes": "Hide changes",
+			"fields-changed": "{count, plural, one {# field changed} other {# fields changed}}",
+			"fields-set": "{count, plural, one {# field set} other {# fields set}}",
+			"more-names": "+{count}",
+			showing: "Showing {shown} of {total}",
+			"load-more": "Load more",
+			summary: "{kind} by {author}, {date}",
+			"summary-undated": "{kind} by {author}",
+			kind: {
+				created: "Created",
+				updated: "Updated",
+				archived: "Archived",
+				restored: "Restored",
+				purged: "Purged",
+				deleted: "Deleted"
+			},
+			verb: {
+				created: "created this",
+				updated: "updated {count, plural, one {# field} other {# fields}}",
+				archived: "archived this",
+				restored: "restored this",
+				purged: "purged this",
+				deleted: "deleted this"
+			}
+		},
 		map: {
 			"you-are-here": "You are here",
 			"zoom-in": "Zoom in",
@@ -4393,6 +4429,42 @@ var t = {
 			today: "Aujourd'hui",
 			yesterday: "Hier"
 		},
+		history: {
+			label: "Historique des modifications",
+			loading: "Chargement de l'historique",
+			"empty-title": "Aucun historique",
+			"empty-description": "Les modifications apparaîtront ici.",
+			hidden: "Masqué",
+			"no-value": "Vide",
+			"changed-to": "devient",
+			before: "Avant",
+			after: "Après",
+			value: "Valeur",
+			"hide-changes": "Masquer les modifications",
+			"fields-changed": "{count, plural, one {# champ modifié} other {# champs modifiés}}",
+			"fields-set": "{count, plural, one {# champ renseigné} other {# champs renseignés}}",
+			"more-names": "+{count}",
+			showing: "{shown} sur {total} affichées",
+			"load-more": "Charger plus",
+			summary: "{kind} par {author}, {date}",
+			"summary-undated": "{kind} par {author}",
+			kind: {
+				created: "Création",
+				updated: "Modification",
+				archived: "Archivage",
+				restored: "Restauration",
+				purged: "Purge",
+				deleted: "Suppression"
+			},
+			verb: {
+				created: "a créé cet élément",
+				updated: "a modifié {count, plural, one {# champ} other {# champs}}",
+				archived: "a archivé cet élément",
+				restored: "a restauré cet élément",
+				purged: "a purgé cet élément",
+				deleted: "a supprimé cet élément"
+			}
+		},
 		map: {
 			"you-are-here": "Vous êtes ici",
 			"zoom-in": "Zoom avant",

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-BFQODuQz.js";
+import { t as s } from "./use-material-translation-DgeOLK6g.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-mQzIR1hw.js";
+import { t as p } from "./theme-toggle-BAGSB-HE.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-mQzIR1hw.js → theme-toggle-BAGSB-HE.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./use-material-translation-BFQODuQz.js";
+import { t as e } from "./use-material-translation-DgeOLK6g.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-Tn3MMu-s.js → toolbar-items-BgcE2dSq.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-mTDyFwbQ.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-D5yDYO-N.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-BFQODuQz.js";
+import { t as xe } from "./use-material-translation-DgeOLK6g.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-CCyVEi_f.js → translate-material-DeVLQZTk.js}

@@ -1,5 +1,5 @@
-import "./stored-language-CJn_iWwG.js";
-import { a as e, r as t } from "./translator-1THr41fc.js";
+import "./stored-language-pHK1kTl6.js";
+import { a as e, r as t } from "./translator-DEPJOWV-.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-1THr41fc.js → translator-DEPJOWV-.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-CJn_iWwG.js";
+import { a as t, i as n, r, t as i } from "./stored-language-pHK1kTl6.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-B0ze1cU9.js → use-chat-composer-Ded2gthF.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-B2GXKBp3.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-CJUqXZ-U.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-mTDyFwbQ.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-D5yDYO-N.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-Tn3MMu-s.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-BgcE2dSq.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-CJn_iWwG.js";
-import { a as kt } from "./translator-1THr41fc.js";
+import "./stored-language-pHK1kTl6.js";
+import { a as kt } from "./translator-DEPJOWV-.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-BFQODuQz.js";
-import { t as Mt } from "./spinner-B7HCQMFr.js";
+import { t as L } from "./use-material-translation-DgeOLK6g.js";
+import { t as Mt } from "./spinner-BuMxoFCj.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-rdIhY2BT.js";
+import { a as Pt, i as Ft, n as It, r as Lt, t as Rt } from "./button-e-N2SrR4.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-CEau88ZV.js";
-import { n as dn, t as fn } from "./icon-badge-CiWXvKCs.js";
+import { n as cn, r as ln, t as un } from "./chip-CaIK5m3c.js";
+import { n as dn, t as fn } from "./icon-badge-BnAUnMVr.js";
 import { r as pn } from "./use-csp-nonce-ZKs9k-ov.js";
-import { t as mn } from "./empty-state-lj7vjYWG.js";
+import { t as mn } from "./empty-state-BHrddQlY.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-CLkufAhI.js")
+			import("./rich-code-block-B81MCyAI.js")
 		]);
 		return [r(t, {
 			lowlight: n,

package/dist/{use-heading-spy-DNFfHQJs.js → use-heading-spy-swqwAMjR.js}

@@ -1,4 +1,4 @@
-import { r as e } from "./i18n-provider-BpZOKh7U.js";
+import { r as e } from "./i18n-provider-W9rFBjXN.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-BFQODuQz.js → use-material-translation-DgeOLK6g.js}

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

package/docs/components/data-display.md

@@ -25,6 +25,7 @@ from `@nxgt/material/components`.
 | <img src="../previews/data-display-listtile.webp" width="96" alt=""> | [ListTile](#listtile) | Row with leading / trailing slots, row actions, chips and a divided variant |
 | <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-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 |
@@ -297,6 +298,7 @@ import { DaySeparator, isNewDay } from '@nxgt/material/components';
 | `badge` | `ReactNode` | — | a count after the label |
 | `variant` | `'pill' \| 'line'` | `'pill'` | the label in a pill, or bare |
 | `sticky` | `boolean` | `false` | stays at the top of its scroll box while its day scrolls by |
+| `as` | `'div' \| 'h2'` to `'h6'` | `'div'` | a real heading of that level (the hairlines stay decorative) |
 | `now` / `locale` | `DayInput` / `string` | now / the provider's language | the reference day and the date's language |
 
 `formatDayLabel(date, { today, yesterday, locale, now })`, `isNewDay(previous,
@@ -971,7 +973,7 @@ const items: TimelineItemData[] = [
 ```
 
 Parts: `Timeline`, `TimelineItem` (one row, for your own list),
-`RelativeTime` (`date`, `addSuffix`; the exact date is its `title`).
+`RelativeTime` (`date`, `addSuffix`, `now`; the exact date is its `title`, or with `tooltip` a tooltip on hover and, with `focusable`, on keyboard focus; it takes a `ref`).
 
 | Prop | Type | Default | Effect |
 | --- | --- | --- | --- |
@@ -979,7 +981,105 @@ Parts: `Timeline`, `TimelineItem` (one row, for your own list),
 | `loading` | `boolean` | `false` | skeleton rows |
 | `empty` | `ReactNode` | "No activity yet" | shown when `items` is empty |
 
-**Storybook:** `Data display/Timeline` · **Vue:** `Timeline`, `TimelineItem`, `RelativeTime`
+**Storybook:** `Data display/Timeline` · **Vue:** `Timeline`, `TimelineItem`, `RelativeTime` (without `now`, `tooltip`, `focusable` and `ref`, React only)
+
+---
+
+## ChangeHistory
+
+![ChangeHistory](../previews/data-display-changehistory.webp)
+
+A history of the changes made to anything (a document, a project's
+settings, a file): who changed what and when, with the values before and after.
+As a rail (default): toned dot icons, one row per entry, the old value struck
+through and the new one in a tinted pill. As cards: a card tinted by kind with a
+Before / After block that spells its words, so colour is never the only signal.
+Entries group under a heading per day (sticky on the rail), newest first.
+
+```tsx
+import { Rocket } from 'lucide-react';
+import { ChangeHistory, type ChangeHistoryEntry } from '@nxgt/material/components';
+
+const createdAt = new Date('2026-10-01T09:00:00Z');
+const updatedAt = new Date('2026-10-02T14:30:00Z');
+const loadNextPage = () => {};
+
+const entries: ChangeHistoryEntry[] = [
+  {
+    id: 'e2',
+    kind: 'updated',
+    at: updatedAt,
+    author: { name: 'Ada Lovelace' },
+    changes: [
+      { field: 'Visibility', before: 'Private', after: 'Public' },
+      { field: 'Webhook secret', redacted: true },
+    ],
+  },
+  {
+    id: 'e1',
+    kind: 'created',
+    at: createdAt,
+    author: { name: 'Grace Hopper', src: '/grace.jpg' },
+    changes: [{ field: 'Name', after: 'Billing service' }],
+  },
+];
+
+<ChangeHistory
+  entries={entries}
+  kinds={{ deployed: { label: 'Deployed', verb: 'deployed', icon: <Rocket />, tone: 'primary' } }}
+  total={27}
+  hasMore
+  onLoadMore={loadNextPage}
+/>
+```
+
+`kind` names a key of `kinds`, which is merged over the built-in ones:
+`created` (success), `updated` (neutral), `archived` and `restored` (warning),
+`purged` and `deleted` (error). Override one part of a built-in
+(`updated: { tone: 'info' }`) or add your own; the app's labels and verbs are
+yours, the component names no domain.
+
+| Prop | Type | Default | Effect |
+| --- | --- | --- | --- |
+| `entries` | `ChangeHistoryEntry[]` | — | `id`, `kind`, `at` (`Date`, string or number), `author` (`name`, `src`), `changes` (`ChangeHistoryChange[]`: `field`, `before`, `after`, `redacted`) |
+| `kinds` | `Record<string, ChangeHistoryKindOverride>` | built-ins | `label`, `verb`, `icon` (`null` removes it), `tone` per kind; `creation` (default true for `created`) makes an entry list values only |
+| `variant` | `'rail' \| 'cards'` | `'rail'` | the look |
+| `groupBy` | `'day' \| 'none'` | `'day'` | a heading per day (sticky on the rail), or one list in the order given |
+| `collapseAfter` | `number` | `3` | an entry with more changes collapses behind "N fields changed" (a creation: "N fields set") and a preview of the names, as a button with `aria-expanded` |
+| `filter` | `ReactNode` | — | a slot above the list, for a `Filter` bar |
+| `loading` | `boolean` | `false` | skeleton entries |
+| `hasMore` | `boolean` | — | shows the Load more button |
+| `onLoadMore` | `() => void` | — | called by Load more |
+| `total` | `number` | — | the count over all pages: "Showing X of Y" |
+| `empty` | `ReactNode` | "No history yet" | shown when `entries` is empty |
+| `now` | `Date \| string \| number` | now | the reference instant for "Today" and "5 minutes ago"; pass it from the server |
+| `timeZone` | `string` | the machine's zone | an IANA zone (`Europe/Paris`) for the day grouping, the day heading, the entry summary and the exact time; pass it from the server |
+| `headingLevel` | `2 \| 3 \| 4 \| 5 \| 6` | `3` | the level of the day headings |
+| `aria-label` | `string` | "Change history" | the region's name |
+| `className` | `string` | — | on the region |
+
+A `redacted` change shows "Hidden" and never renders `before` or `after`. A
+`created` entry shows values only, with no "Empty →". Each entry is an
+`article` in an `ol`, labelled "{kind} by {author}, {date and time}"; the day
+headings are real headings (`h3`, or `headingLevel`); the author's avatar is
+decorative (`aria-hidden`), so the initials are not read; "Showing X of Y" is
+announced through a polite live region, and when Load more takes the last page
+and its button goes away, the focus moves to the first new entry (an `article`
+with `tabIndex={-1}`); the relative time takes keyboard focus and shows the
+exact time in a tooltip on hover and on focus (`RelativeTime` with `focusable`
+and `tooltip`). Strings are the `material.history.*` keys (en, fr).
+
+**Server rendering:** the day grouping, the "Today" and "Yesterday" labels and
+the relative times read the clock and the time zone of the machine that renders,
+so a server and a browser in other zones can group and label an entry
+differently. Pass `now` and `timeZone` from the server (the request's instant
+and the user's zone) and both sides agree:
+
+```tsx
+<ChangeHistory entries={entries} now={loaderData.now} timeZone={loaderData.timeZone} />
+```
+
+**Storybook:** `Data display/ChangeHistory` · **Vue:** not yet (tracked as a `vue` issue)
 
 ---
 

package/package.json

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