@nxgt/material 3.46.0 → 3.47.0

package/dist/pdf-reader.js

@@ -1,3 +1,3 @@
-import { t as e } from "./public-BmA6r0EK.js";
+import { t as e } from "./public-zVb_Nq_D.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-BnVQVqAF.js";
-import { t } from "./translate-material-n0YBXLGp.js";
+import { r as e } from "./i18n-provider-C0fB0sEL.js";
+import { t } from "./translate-material-v9u-e7Kd.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-BmA6r0EK.js → public-zVb_Nq_D.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-DOhEoEP2.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-CFO3E-rO.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-BCy6DMzb.js";
-import { t as N } from "./use-material-translation-CkPcqI6q.js";
-import { t as _e } from "./button-DR_EdcfV.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-CCCcnTIx.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-Df8785nt.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-CsLGJMEJ.js";
+import { t as N } from "./use-material-translation-DOkTaWK_.js";
+import { t as _e } from "./button-yaltbQmC.js";
 import { n as ve, t as ye } from "./icon-button-CN9r5TNE.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-CTX0gKR3.js";
+import { n as Ee, t as De } from "./empty-state-DcF4TBzi.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-BgPtzSnv.js → rich-code-block-DMWZZJma.js}

@@ -1,7 +1,7 @@
 import { t as e } from "./tooltip-CkttDIab.js";
-import { c as t, n, t as r } from "./dropdown-menu-CFO3E-rO.js";
-import { t as i } from "./use-material-translation-CkPcqI6q.js";
-import { a, i as o, n as s, o as c, t as l } from "./code-language-items-mjN3a33n.js";
+import { c as t, n, t as r } from "./dropdown-menu-Df8785nt.js";
+import { t as i } from "./use-material-translation-DOkTaWK_.js";
+import { a, i as o, n as s, o as c, t as l } from "./code-language-items-DAHtfQ7W.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-CCc-piPv.js").then((e) => e.n).then((e) => ({ default: e.CodeEditor })));
+var N = x(() => import("./code-editor-C9qBNoYb.js").then((e) => e.n).then((e) => ({ default: e.CodeEditor })));
 function P() {
 	let { t: e } = i();
 	return /* @__PURE__ */ T("div", {

package/dist/{sortable-provider-CceARBYP.js → sortable-provider-DstbgMVf.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-CkPcqI6q.js";
+import { t as n } from "./use-material-translation-DOkTaWK_.js";
 import { t as r } from "./icon-button-CN9r5TNE.js";
 import { t as i } from "./compose-refs-DZ0iIVF-.js";
 import { GripVertical as a } from "lucide-react";

package/dist/{spinner-7orqNAEy.js → spinner-C4CgDEYm.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-CkPcqI6q.js";
+import { t as n } from "./use-material-translation-DOkTaWK_.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-BHmxU75w.js → stored-language-IaL1Ftn_.js}

@@ -1167,7 +1167,8 @@ var t = {
 		"now-indicator": { label: "Current time: {time}" },
 		timeline: {
 			label: "Timeline",
-			empty: "No activity yet"
+			empty: "No activity yet",
+			events: "{count, plural, one {# event} other {# events}}"
 		},
 		copy: {
 			copy: "Copy",
@@ -1290,7 +1291,13 @@ var t = {
 		stepper: {
 			step: "Step {step}",
 			completed: "Completed",
-			error: "Error"
+			error: "Error",
+			"step-of": "Step {step} of {total}",
+			back: "Back",
+			next: "Next",
+			optional: "Optional",
+			attention: "Needs attention",
+			failed: "Steps needing attention: {count}"
 		},
 		"location-field": {
 			placeholder: "No location selected",
@@ -3992,7 +3999,8 @@ var t = {
 		"now-indicator": { label: "Heure actuelle : {time}" },
 		timeline: {
 			label: "Chronologie",
-			empty: "Aucune activité"
+			empty: "Aucune activité",
+			events: "{count, plural, one {# événement} other {# événements}}"
 		},
 		copy: {
 			copy: "Copier",
@@ -4115,7 +4123,13 @@ var t = {
 		stepper: {
 			step: "Étape {step}",
 			completed: "Terminée",
-			error: "Erreur"
+			error: "Erreur",
+			"step-of": "Étape {step} sur {total}",
+			back: "Précédent",
+			next: "Suivant",
+			optional: "Facultative",
+			attention: "À corriger",
+			failed: "Étapes à corriger : {count}"
 		},
 		"location-field": {
 			placeholder: "Aucun emplacement sélectionné",

package/dist/styles.css

@@ -157,3 +157,11 @@
 	bottom: -0.1875rem;
 	transform: rotate(-45deg) scale(0.75);
 }
+
+/* A state change on a Stepper's shape: a small spring-in (no motion under
+ * prefers-reduced-motion: the catalogue's reduced-motion rule ends it). */
+@keyframes nxgt-pop {
+	from {
+		transform: scale(0.55);
+	}
+}

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-CkPcqI6q.js";
+import { t as s } from "./use-material-translation-DOkTaWK_.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-_RJgLHs9.js";
+import { t as p } from "./theme-toggle-CGW2_K54.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-_RJgLHs9.js → theme-toggle-CGW2_K54.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./use-material-translation-CkPcqI6q.js";
+import { t as e } from "./use-material-translation-DOkTaWK_.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-BCy6DMzb.js → toolbar-items-CsLGJMEJ.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-CFO3E-rO.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-Df8785nt.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-CkPcqI6q.js";
+import { t as xe } from "./use-material-translation-DOkTaWK_.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-n0YBXLGp.js → translate-material-v9u-e7Kd.js}

@@ -1,5 +1,5 @@
-import "./stored-language-BHmxU75w.js";
-import { a as e, r as t } from "./translator-B_ue2XEg.js";
+import "./stored-language-IaL1Ftn_.js";
+import { a as e, r as t } from "./translator-Dk4_qE6U.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-B_ue2XEg.js → translator-Dk4_qE6U.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-BHmxU75w.js";
+import { a as t, i as n, r, t as i } from "./stored-language-IaL1Ftn_.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-FDmwZSua.js → use-chat-composer-Brcb5f7r.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-DOhEoEP2.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-CCCcnTIx.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-CFO3E-rO.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-Df8785nt.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-BCy6DMzb.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-CsLGJMEJ.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-BHmxU75w.js";
-import { a as kt } from "./translator-B_ue2XEg.js";
+import "./stored-language-IaL1Ftn_.js";
+import { a as kt } from "./translator-Dk4_qE6U.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-CkPcqI6q.js";
-import { t as Mt } from "./spinner-7orqNAEy.js";
+import { t as L } from "./use-material-translation-DOkTaWK_.js";
+import { t as Mt } from "./spinner-C4CgDEYm.js";
 import { a as Nt } from "./button-tones-BwuVvAmd.js";
-import { a as Pt, i as Ft, o as It, r as Lt, t as Rt } from "./button-DR_EdcfV.js";
+import { a as Pt, i as Ft, o as It, r as Lt, t as Rt } from "./button-yaltbQmC.js";
 import { t as R } from "./icon-button-CN9r5TNE.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-olzYjs30.js";
-import { n as dn, t as fn } from "./icon-badge-BRys8Tuo.js";
+import { n as cn, r as ln, t as un } from "./chip-BqWbbr1b.js";
+import { n as dn, t as fn } from "./icon-badge-aJ22mKGh.js";
 import { r as pn } from "./use-csp-nonce-ZKs9k-ov.js";
-import { t as mn } from "./empty-state-CTX0gKR3.js";
+import { t as mn } from "./empty-state-DcF4TBzi.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";
@@ -11082,7 +11082,7 @@ var RS = (e = {}) => Dn({
 		let [{ default: t }, { lowlight: n }, { richCodeBlock: r }] = await Promise.all([
 			import("./dist-CRMFGjng.js"),
 			import("./lowlight-OtcjU2Sa.js"),
-			import("./rich-code-block-BgPtzSnv.js")
+			import("./rich-code-block-DMWZZJma.js")
 		]);
 		return [r(t, {
 			lowlight: n,

package/dist/{use-heading-spy-O6_EATtA.js → use-heading-spy-DjKixjLm.js}

@@ -1,4 +1,4 @@
-import { r as e } from "./i18n-provider-BnVQVqAF.js";
+import { r as e } from "./i18n-provider-C0fB0sEL.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, useState as d } from "react";
 import { busySettler as f, busySettler as p, createSubmitGuard as m, createSubmitGuard as h } from "@nxgt/material-core/submit-guard";

package/dist/{use-material-translation-CkPcqI6q.js → use-material-translation-DOkTaWK_.js}

@@ -1,5 +1,5 @@
-import { r as e } from "./i18n-provider-BnVQVqAF.js";
-import { t } from "./translate-material-n0YBXLGp.js";
+import { r as e } from "./i18n-provider-C0fB0sEL.js";
+import { t } from "./translate-material-v9u-e7Kd.js";
 import { useCallback as n } from "react";
 //#region lib/i18n/use-material-translation.ts
 function r() {

package/docs/components/data-display.md

@@ -24,7 +24,7 @@ from `@nxgt/material/components`.
 | <img src="../previews/data-display-entityheader.webp" width="96" alt=""> | [EntityHeader](#entityheader) | Page header with status, metadata and actions |
 | <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-timeline.webp" width="96" alt=""> | [Timeline](#timeline) | Vertical event timeline: shaped markers, cards, alternating sides, day groups (`DaySeparator` headings, words from `material.day-separator.*`), relative times; `layout="auto"` needs a parent with a definite width (`rail` in a `w-fit` parent) |
 | <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 |
@@ -965,7 +965,12 @@ import { AccordionCard } from '@nxgt/material/components';
 
 ![Timeline](../previews/data-display-timeline.webp)
 
-Vertical event timeline with toned icons and relative times.
+Vertical event timeline with toned markers and relative times. Each marker is
+44px and takes a shape by tone (circle, squircle, cookie, clover, diamond,
+burst) in the tone's container colour; an item with `children` is a rounded
+card with a subtle tone bar. Once the timeline's own container is 48rem wide
+(a container query, not the viewport) the two sides alternate; narrower, it is
+a single rail. `grouped` opens each day with a `DaySeparator` heading.
 
 ```tsx
 import { Package, Pencil } from 'lucide-react';
@@ -984,11 +989,45 @@ Parts: `Timeline`, `TimelineItem` (one row, for your own list),
 
 | Prop | Type | Default | Effect |
 | --- | --- | --- | --- |
-| `items` | `TimelineItemData[]` | — | `title`, `description`, `timestamp`, `icon` or `avatar`, `tone`, `children` |
+| `items` | `TimelineItemData[]` | — | `title`, `description`, `timestamp`, `icon` or `avatar`, `tone`, `children` (rendered as a card) |
+| `grouped` | `boolean` | `false` | a heading per day ("Today", "Yesterday", a weekday or a date: a `DaySeparator`, real `<h3>`, with a `<time dateTime>` and its count); items keep the order given |
+| `headingLevel` | `2 \| 3 \| 4 \| 5 \| 6` | `3` | the level of the day headings |
+| `layout` | `'auto' \| 'rail'` | `'auto'` | `'auto'` alternates sides in a wide container (it measures its own container: its parent needs a definite width, see below); `'rail'` never does |
+| `timeZone` | `string` | — | the zone the days are cut in |
+| `now` | `Date` | — | the reference instant for "Today" and "Yesterday" |
 | `loading` | `boolean` | `false` | skeleton rows |
 | `empty` | `ReactNode` | "No activity yet" | shown when `items` is empty |
 
-**Storybook:** `Data display/Timeline` · **Vue:** `Timeline`, `TimelineItem`, `RelativeTime` (without `now`, `tooltip`, `focusable` and `ref`, React only)
+```tsx
+// Grouped on the server too: fix the zone and the reference instant.
+<Timeline items={items} grouped timeZone="UTC" now={new Date('2026-03-15T12:00:00Z')} aria-label="Order history" />
+
+// One rail, never alternating sides.
+<Timeline items={items} layout="rail" aria-label="Order history" />
+```
+
+**Server rendering.** Without both `timeZone` and `now`, `grouped` renders no
+day headings on the server and on the first client render, and adds them once
+mounted (and logs a development warning once). With both, the headings render
+on the server too. The list is one flat `<ol>`: each heading sits inside the first `<li>` of
+its day, ahead of the item's content (a list may only hold `<li>`s, so a
+standalone heading row fails axe), never around the items, so an item keeps its
+parent, its key and its state when they appear (a counter inside an item is not reset).
+**Width.** `layout="auto"` is a container query on the Timeline itself, so its
+parent needs a definite width (a block, a grid cell, a fixed width). In a
+shrink-to-fit parent (`w-fit`, an inline flex item) it collapses to 0 wide:
+use `layout="rail"` there, which sets no container. In right-to-left the wide
+layout mirrors, time labels included. `now` also fixes the relative times
+("5 minutes ago") of the items. **Accessibility:** the list keeps its
+`aria-label`, markers are decorative, each day heading is a real heading whose
+count reads as "N events", and every item of a day has `aria-describedby`
+pointing to that heading (a nested list labelled by it would put the items
+under a new parent). **Migrating:** the new look is the default; pass
+`layout="rail"` for a single rail. Children now render as a card, not as text
+under the title. New key: `material.timeline.events`; the day words come from
+`material.day-separator.today` and `yesterday`.
+
+**Storybook:** `Data display/Timeline` · **Vue:** `Timeline`, `TimelineItem`, `RelativeTime` (without `now`, `tooltip`, `focusable` and `ref`, React only); the redesign and `grouped`, `layout`, `timeZone`, `now` are React only for now (#1810)
 
 ---
 

package/docs/components/navigation-and-layout.md

@@ -21,7 +21,7 @@ documentation-site shell. Everything is imported from
 | <img src="../previews/navigation-layout-pager.webp" width="96" alt=""> | [Pager](#pager) | Previous / next cards |
 | <img src="../previews/navigation-layout-seealso.webp" width="96" alt=""> | [SeeAlso](#seealso) | Related links |
 | <img src="../previews/navigation-layout-toc.webp" width="96" alt=""> | [Toc](#toc) | On-this-page outline |
-| <img src="../previews/navigation-layout-stepper.webp" width="96" alt=""> | [Stepper](#stepper) | Clickable steps with progress |
+| <img src="../previews/navigation-layout-stepper.webp" width="96" alt=""> | [Stepper](#stepper) | Clickable steps with progress: shaped indicators, optional steps, a phone header |
 | <img src="../previews/navigation-layout-steps.webp" width="96" alt=""> | [Steps](#steps) | Numbered editorial steps |
 | <img src="../previews/navigation-layout-hero.webp" width="96" alt=""> | [Hero](#hero) | Landing band |
 | <img src="../previews/navigation-layout-doc.webp" width="96" alt=""> | [Doc](#doc) | Documentation site shell |
@@ -657,23 +657,41 @@ const items: TocItem[] = [
 
 ![Stepper](../previews/navigation-layout-stepper.webp)
 
-Clickable horizontal or vertical steps with status and progress; compact on mobile.
+Clickable horizontal or vertical steps with status and progress. The look is
+expressive: the current step is a cookie, a completed one a filled circle with
+a check, an upcoming one a muted outlined circle and a failed one a cookie in
+the error container, joined by thick pill tracks that fill with the spatial
+spring (no motion under `prefers-reduced-motion`). Below `sm` a header card
+replaces the steps.
 
 ```tsx
 import { CreditCard, Truck, User } from 'lucide-react';
-import { Stepper, TooltipProvider } from '@nxgt/material/components';
+import { Stepper } from '@nxgt/material/components';
+
+<Stepper
+  active={active}
+  onChange={setActive}
+  steps={[
+    { icon: <User />, title: 'Account', description: 'Your profile details.' },
+    { icon: <Truck />, title: 'Shipping', status: 'completed' },
+    { icon: <CreditCard />, title: 'Payment' },
+  ]}
+/>
+```
 
-<TooltipProvider>
-  <Stepper
-    active={active}
-    onChange={setActive}
-    steps={[
-      { icon: <User />, title: 'Account', description: 'Your profile details.' },
-      { icon: <Truck />, title: 'Shipping', status: 'completed' },
-      { icon: <CreditCard />, title: 'Payment' },
-    ]}
-  />
-</TooltipProvider>
+An optional step with a card under it, and Back / Next in the phone header
+(they call `onChange(active ± 1)`):
+
+```tsx
+<Stepper
+  active={active}
+  onChange={setActive}
+  steps={[
+    { title: 'Account' },
+    { title: 'Address', optional: true, content: <p>Skip this if you pick up in store.</p> },
+    { title: 'Payment' },
+  ]}
+/>
 ```
 
 Parts: `Stepper`, `StepperIndicator` (the progress bar alone: `current`,
@@ -681,10 +699,10 @@ Parts: `Stepper`, `StepperIndicator` (the progress bar alone: `current`,
 
 | Prop | Type | Default | Effect |
 | --- | --- | --- | --- |
-| `steps` | `{ icon?; title; description?; status? }[]` | — | `status`: `'completed' \| 'error' \| 'upcoming'`, else derived from `active` |
-| `active` | `number` | `0` | current step; its `description` shows under the bar |
+| `steps` | `{ icon?; title; description?; status?; optional?; content? }[]` | — | `status`: `'completed' \| 'error' \| 'upcoming'`, else derived from `active`. `optional` adds "· Optional" to the label; `content` is a tinted card shown under the current step |
+| `active` | `number` | `0` | current step; its `description` shows under the steps (in the header card on a phone) |
 | `onChange` | `(index: number) => void` | — | makes steps clickable |
-| `orientation` | `'horizontal' \| 'vertical' \| 'responsive'` | `'horizontal'` | `'vertical'`: a column from `md`, phones get the compact bar. `'responsive'`: every step in a column below `sm` (640px), a row from `sm` |
+| `orientation` | `'horizontal' \| 'vertical' \| 'responsive'` | `'horizontal'` | `'vertical'`: a column from `sm` (640px), phones get the header card. `'responsive'`: every step in a column below `sm` (640px), a row from `sm` |
 | `renderStepLabel` | `(step, index) => ReactNode` | — | replaces the "Step n" caption |
 | `name` | `string` | — | the stepper's `data-pw` (`stepper` without it), and the prefix of each step's: `<name>-step-N` instead of `step-N` |
 
@@ -692,12 +710,37 @@ Each step is an `<li>` with `data-pw="step-N"` (`<name>-step-N` with `name`),
 N counted from 0, for tests to select; the current step's button carries
 `aria-current="step"`, and a completed or failed step is announced as such.
 
-A server renders the desktop layout (every step), as does a hydrating client;
-a phone switches to the compact bar right after hydrating (with
-`orientation="responsive"`, to the column of every step). A page rendered
-only in the browser starts on the real layout.
-
-**Storybook:** `Navigation & layout/Stepper` · **Vue:** `Stepper`
+Below `sm` a header card shows "Step 3 of 5", the title, the description and a
+segmented progress bar (one segment per step, toned by state); with `onChange`
+it also has Back and Next buttons, which stay focusable but inactive (`aria-disabled`) at the ends. Titles clamp to two
+lines. The info tooltip on the current step is gone: read the description
+under the steps.
+
+**Server rendering.** The layout is chosen by CSS breakpoints, not by the
+screen width in JavaScript, so the server and the client render the same
+markup and nothing switches after hydration. Both layouts are in the markup
+and the unused one is hidden; ids stay unique.
+
+**Accessibility.** The steps are a list, the current step's button carries
+`aria-current="step"`, a completed or failed step is announced as such, and
+steps are focusable when `onChange` is given. The header's progress bar is
+decorative: the "Step n of N" text carries the meaning. The live header
+announces a failed current step and the number of failed steps; Back and Next
+use `aria-disabled` and stay focusable at the ends.
+
+**Migrating.** The new look is the default and the props are unchanged;
+`optional` and `content` are additive. Update any test that selected the old
+info button on the current step. New `material.stepper.*` keys: `step-of`,
+`back`, `next`, `optional`, `attention`, `failed`. The `attention` text ("Needs attention") is shown under the title of a failed step, as a visual cue only: the announced status stays "Error".
+
+Migration notes:
+
+- `data-orientation` now repeats the `orientation` prop; a `responsive` Stepper no longer reports `vertical` or `horizontal` by width.
+- Below 640px the horizontal step list is hidden and the header card replaces it.
+- `horizontal` and `vertical` switch at `sm` (640px), not `md` (768px).
+- `Stepper` no longer renders `StepperIndicator` (still exported).
+
+**Storybook:** `Navigation & layout/Stepper` · **Vue:** `Stepper`, with the earlier look: the redesign, `optional` and `content` are React only for now (#1810)
 
 ---
 

package/docs/guides/i18n.md

@@ -334,7 +334,10 @@ names of its −/+ buttons, "Increase hours" / "Decrease hours" /
 "Increase minutes" / "Decrease minutes"
 (`material['duration-field']['increase-hours']` and the three others); the status a
 `Stepper` step announces after its title, "Completed" or "Error"
-(`material.stepper.completed` / `error`, "Terminée" / "Erreur" in French); and
+(`material.stepper.completed` / `error`, "Terminée" / "Erreur" in French); the
+Stepper's phone header (`material.stepper.step-of`, `back`, `next`, `optional`,
+`attention`, `failed`) and the Timeline's day-heading count (`material.timeline.events`; its
+"Today" and "Yesterday" are `DaySeparator`'s); and
 the pagination buttons' names and text: `PaginationPrevious` /
 `PaginationNext`'s "Previous" / "Next" (`material.pagination.previous` /
 `next`), `PaginationFirst` / `PaginationLast`'s "First" / "Last"

package/docs/guides/ssr.md

@@ -167,8 +167,10 @@ State the server cannot know must be resolved the same way on both sides:
 | Language | no `localStorage`: `defaultLanguage` | Resolve it from the request and pass `initialLanguage` to `I18nProvider`. See [i18n](i18n.md#server-rendering) |
 | Theme | no preference: light | An inline boot script in `<head>`, and `suppressHydrationWarning` on `<html>`. See [theming](theming.md#no-flash-on-load-a-boot-script) |
 | `formatAmount`, `formatDate` | the server's locale and time zone, unless you pass them | Use `useFormatters({ timeZone })`, which follows the `I18nProvider` language, or pass `locale` and `timeZone` (`createFormatters` binds them). A date-only `YYYY-MM-DD` is the same everywhere. See [printing](printing.md#formatamount-and-formatdate) |
-| Screen width, `prefers-color-scheme` (`useIsMobile`, `useTheme`, `AppHeader`, `DataTable`, `TimeField`, `Stepper`, `PaneLayout`, `ListDetailsLayout`, the code blocks, …) | no screen: a desktop, light | Nothing: a hydrating client renders the same, then switches on a phone or a dark screen |
+| Screen width, `prefers-color-scheme` (`useIsMobile`, `useTheme`, `AppHeader`, `DataTable`, `TimeField`, `PaneLayout`, `ListDetailsLayout`, the code blocks, …) | no screen: a desktop, light | Nothing: a hydrating client renders the same, then switches on a phone or a dark screen |
 | An attribute's `DATETIME` / `TIME` instant (`AttributesSummary`, `AttributesEditor`), the opening hours' first day of the week | the server's time zone and Intl data differ from the browser's | Nothing: the instant is written in UTC and the week starts on the language's first day until mount, then the viewer's zone and the locale's week info take over, so hydration matches |
+| `Stepper` layout, `Timeline` sides | CSS breakpoints and a container query, no screen width in JavaScript | Nothing: server and client markup are the same |
+| `Timeline` `grouped` | the server's time zone and clock differ from the browser's | Pass `timeZone` and `now` to group on the server too; without them the day headings appear after mount (the items do not remount) |
 | Step form (`createStepFormSlice`) | no `localStorage`: step 0 | Nothing with `useSliceReducer`: a hydrating client renders step 0, then resumes. A slice in a Redux store: see [forms](forms.md#a-multi-step-form) |
 | Zod messages | no `localStorage`: English | Pass the request's language, `zodLocaleError({ language })`, where the server formats messages. See [forms](forms.md#validation-messages) |
 

package/docs/roadmap.md

@@ -330,6 +330,20 @@ version they shipped in, and planned entries may name the major they target.
 
 ## Shipped
 
+- **Stepper and Timeline, expressive** — both have a new look by default, with
+  the same props. `Stepper` shows the current step as a cookie, a completed one
+  as a circle with a check and a failed one in the error container, joined by
+  thick tracks that fill with a spring; below `sm` a header card ("Step 3 of
+  5", a segmented bar, Back and Next with `onChange`) replaces the steps, and
+  the layout no longer depends on JavaScript, so the server and the client
+  match. `Step` gains `optional` and `content`. `Timeline` has shaped markers
+  by tone, cards for items with `children`, alternating sides in a wide
+  container (`layout="rail"` for one rail) and `grouped` day headings (`DaySeparator`, level
+  set with `headingLevel`), with
+  `timeZone` and `now` to group on the server. React only for now; the Vue
+  twin is a `vue` issue.
+  [Stepper](components/navigation-and-layout.md#stepper) ·
+  [Timeline](components/data-display.md#timeline)
 - **Two-step verification** — the pieces every app rebuilt for a one-time
   code. `VerificationCode` is the form (app or e-mailed code, "Use a recovery
   code", resend, wrong with the tries left, expired, busy, locked, throttled

package/lib/styles.css

@@ -157,3 +157,11 @@
 	bottom: -0.1875rem;
 	transform: rotate(-45deg) scale(0.75);
 }
+
+/* A state change on a Stepper's shape: a small spring-in (no motion under
+ * prefers-reduced-motion: the catalogue's reduced-motion rule ends it). */
+@keyframes nxgt-pop {
+	from {
+		transform: scale(0.55);
+	}
+}

package/package.json

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