@nxgt/material 3.46.0 → 3.47.0

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @nxgt/material
 
+## 3.47.0
+
+### Minor Changes
+
+- [#1811](https://github.com/softistx/nxgt-material/pull/1811) [`c043c12`](https://github.com/softistx/nxgt-material/commit/c043c12144283298f7dfaa929a74f34e8c7fb1a5) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `Stepper` and `Timeline` have a new look by default (the Expressive direction). The props are unchanged, the new ones are additive, and no code has to change except the migration notes below.
+  
+  `Stepper`: a cookie for the current step, a filled circle with a check for a completed one, a muted outlined circle for an upcoming one and a cookie in the error container for a failed one, joined by thick pill tracks that fill with the spatial spring (none under reduced motion). The label reads "Step N · Optional" and titles clamp to two lines. Below `sm` a header card replaces the compact bar: "Step 3 of 5", the title, the description, a segmented progress bar and, with `onChange`, Back / Next buttons. The layout is chosen by CSS breakpoints instead of `useSsrMediaQuery`, so the server and the client render the same markup. `Step` gains `optional` and `content` (a tinted card under the current step). A step that has not been reached is a neutral ring, and the failed step's icon takes the error container's text colour. Back and Next stay focusable at the ends (`aria-disabled`), and the header announces a failed current step and the number of failed steps. New keys `material.stepper.step-of`, `back`, `next`, `optional`, `attention`, `failed`.
+  
+  Migration notes for `Stepper` (search, then replace):
+  
+  - the info tooltip on the current step is gone (its description shows below the steps): a selector or test that targeted it no longer matches; read the description under the steps;
+  - `data-orientation` now repeats the prop (`horizontal`, `vertical` or `responsive`); a `responsive` Stepper no longer reports `vertical` or `horizontal` by width. Search `data-orientation` in tests and stylesheets; select by the prop you passed, and by the viewport for the layout;
+  - below 640px the horizontal step list is hidden and the header card replaces it: a test at a phone width that clicks `[data-slot=stepper-step] button` of a `horizontal` Stepper finds nothing visible; use the header's Back / Next, or a `responsive` Stepper, which lists every step;
+  - `horizontal` and `vertical` switch at `sm` (640px), not `md` (768px): a stylesheet or test between 640 and 767px sees the row (or the column) where it saw the other layout;
+  - `Stepper` no longer renders `StepperIndicator` (still exported, for a progress bar of your own): search `stepper-indicator` or `role="progressbar"` in tests that expected it inside a Stepper.
+  
+  `Timeline`: an item with `children` renders as a rounded card with a subtle tone bar instead of children under the text; the marker is 44px with a shape per tone (circle, squircle, cookie, clover, diamond, burst) in the tone's container colour; and, once its own container is 48rem wide (a container query, not the viewport), the two sides alternate. Migration: `layout="rail"` gives back a single rail. New props: `grouped` (below); `headingLevel`; `layout` (`'auto'` default, or `'rail'`); `timeZone` and `now`, which set the zone the days are cut in and the reference instant. Without both, `grouped` renders the flat list on the server and on the first client render, and the groups once mounted, so hydration never mismatches; with both, the groups render on the server too. New key `material.timeline.events`.
+  
+  `Timeline` `grouped`: each day opens with a `DaySeparator` heading (a real heading with `<time dateTime>` and an "N events" count) in place of the date pill. New prop `headingLevel` (2 to 6, default 3). Items stay in one flat list and never remount when the headings appear after mount; the heading renders inside the first item of its day, and every item of the day points to it with `aria-describedby`. Removed keys `material.timeline.today` and `yesterday` (the words now come from `material.day-separator.today` and `yesterday`; move custom translations there); `material.timeline.events` stays. `layout="auto"` is a container query on the Timeline, so its parent needs a definite width: in a shrink-to-fit parent (`w-fit`, an inline flex item) it collapses; use `layout="rail"` there.
+  
+  Migration notes for `Timeline` (search, then replace):
+  
+  - `material.timeline.today` and `material.timeline.yesterday` in an app's resources, tests or translations: move them to `material.day-separator.today` and `yesterday`;
+  - a test that targeted the old date pill: query the heading instead (`getByRole('heading', { level: 3 })`, or the level you pass in `headingLevel`);
+  - a `<Timeline>` (with `layout` left on `auto`) inside a `w-fit` parent or an inline flex item: add a definite width to the parent, or pass `layout="rail"`.
+
 ## 3.46.0
 
 ### Minor Changes

package/README.md

@@ -614,7 +614,7 @@ Not components: what the stylesheet gives any element.
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-display-entityheader.webp" width="120" alt="EntityHeader"> | [`EntityHeader`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-display.md#entityheader) | Page header with icon, a `leading` control slot (a Switcher at the band's start), title (`headingLevel` 1 to 3), status, metadata, `stats` (figures as compact `size="sm"` StatCard tiles, 2×2 on a phone) and actions. | `EntityHeader` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-display-listtile.webp" width="120" alt="ListTile"> | [`ListTile`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-display.md#listtile) | Row with leading / trailing slots, title and subtitle; becomes a link (with a decorative chevron; `selected` sets `aria-current="page"`), a button, or with `toggle` a switch row where the whole row toggles. `size="sm"` is the dense row; `chips` and `variant="divided"` make it a compact record row, `as="li"` puts it in a list. | `ListTile` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-display-accordioncard.webp" width="120" alt="AccordionCard"> | [`AccordionCard`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-display.md#accordioncard) | Renders `items` (title, content) as a styled accordion. | `AccordionCard` |
-| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-display-timeline.webp" width="120" alt="Timeline"> | [`Timeline`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-display.md#timeline), `TimelineItem`, `RelativeTime` | Vertical event timeline with toned icons and relative times. | `Timeline`, `TimelineItem`, `RelativeTime` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-display-timeline.webp" width="120" alt="Timeline"> | [`Timeline`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-display.md#timeline), `TimelineItem`, `RelativeTime` | Vertical event timeline with shaped, toned markers, cards, alternating sides in a wide container, optional day groups and relative times. | `Timeline`, `TimelineItem`, `RelativeTime` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-display-changehistory.webp" width="120" alt="ChangeHistory"> | [`ChangeHistory`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-display.md#changehistory) | History of the changes made to anything (a document, a project's settings, a file): a rail of toned dots or tinted cards with a Before / After block, a heading per day (sticky on the rail), long entries collapsed behind "N fields changed", redacted values shown as "Hidden", the exact time on hover and focus, load more. | — (later, #1626) |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-display-zonedtime.webp" width="120" alt="ZonedTime"> | [`ZonedTime`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-display.md#zonedtime) | A moment in a named IANA zone, with the zone as a computed offset (`Mar 12, 2026, 4:04 PM UTC+1`), identical on the server and the client (no hydration warning): the date and the time are formatted apart, `seconds` and `dateStyle` are optional, in a `<time dateTime>`. | — |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-display-eventchip.webp" width="120" alt="EventChip"> | [`EventChip`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-display.md#eventchip) | Calendar event pill — soft, solid or outlined — with its times, all-day and continuation edges. | `EventChip` |
@@ -668,7 +668,7 @@ Not components: what the stylesheet gives any element.
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/navigation-layout-pager.webp" width="120" alt="Pager"> | [`Pager`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/navigation-and-layout.md#pager) | Previous / next cards for a sequence of pages. `DocPager` composes it. | `Pager` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/navigation-layout-seealso.webp" width="120" alt="SeeAlso"> | [`SeeAlso`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/navigation-and-layout.md#seealso) | Related-link list with outbound icons. `DocSeeAlso` composes it. | `SeeAlso` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/navigation-layout-toc.webp" width="120" alt="Toc"> | [`Toc`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/navigation-and-layout.md#toc) | On-this-page outline with a per-item active bar. Rail from `xl`, collapsible panel below. `DocToc` composes it. | `Toc` |
-| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/navigation-layout-stepper.webp" width="120" alt="Stepper"> | [`Stepper`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/navigation-and-layout.md#stepper), `StepperIndicator` | Clickable horizontal or vertical steps with status and progress; compact on mobile. | `Stepper` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/navigation-layout-stepper.webp" width="120" alt="Stepper"> | [`Stepper`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/navigation-and-layout.md#stepper), `StepperIndicator` | Clickable horizontal or vertical steps with status and progress (expressive shapes, optional steps, a phone header with Back and Next). | `Stepper` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/navigation-layout-steps.webp" width="120" alt="Steps"> | [`Steps`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/navigation-and-layout.md#steps), `StepsItem` | Numbered editorial steps that stay visible on every breakpoint. | `Steps`, `StepsItem` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/navigation-layout-hero.webp" width="120" alt="Hero"> | [`Hero`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/navigation-and-layout.md#hero) | Landing band with eyebrow, title, supporting copy and actions. | `Hero` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/navigation-layout-doc.webp" width="120" alt="Doc"> | [`Doc`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/navigation-and-layout.md#doc), `DocPage`, `DocTopbar`, `DocSidebar`, `DocToc`, `DocPager`, `DocSearch`, `DocChildCards`, `DocSeeAlso`, `DocEmpty`, `DocProgress` | Documentation site shell: sidebar from `md`, TOC rail from `xl`. Reading bar, copy-page / markdown, child cards, see also, and a 404 slot. Storybook `UI/Doc/Api` composes an API page from `DocPage`, `AnchorHeading`, `ApiOperation`, `ParamTable` and `CodeGroup`. | `Doc` (same parts) |

package/dist/{async-slice-DPM9l8dd.js → async-slice-DlvKCKAa.js}

@@ -1,5 +1,5 @@
-import { i as e, r as t, t as n } from "./stored-language-BHmxU75w.js";
-import { r } from "./translator-B_ue2XEg.js";
+import { i as e, r as t, t as n } from "./stored-language-IaL1Ftn_.js";
+import { r } from "./translator-Dk4_qE6U.js";
 import { t as i } from "./_baseIsEqual-C6ksIHya.js";
 import { useMemo as a } from "react";
 import { asyncThunkCreator as o, buildCreateSlice as s } from "@reduxjs/toolkit";

package/dist/{button-DR_EdcfV.js → button-yaltbQmC.js}

@@ -2,7 +2,7 @@ import { t as e } from "./utils-BLfntITJ.js";
 import { n as t, t as n } from "./dist-DVRQkaTK.js";
 import { o as r, t as i } from "./tooltip-CkttDIab.js";
 import { t as a } from "./is-production-GLw59WU8.js";
-import { t as o } from "./spinner-7orqNAEy.js";
+import { t as o } from "./spinner-C4CgDEYm.js";
 import { a as s, i as c, r as l, t as u } from "./button-tones-BwuVvAmd.js";
 import { t as d } from "./button-group-context-CaP0X5p_.js";
 import { t as f } from "./has-text-content-Ds2dkHX_.js";

package/dist/charts.js

@@ -1,12 +1,12 @@
 import { t as e } from "./ui.utils-CAnKTCw5.js";
 import { t } from "./utils-BLfntITJ.js";
-import { t as n } from "./use-material-translation-CkPcqI6q.js";
-import { t as r } from "./button-DR_EdcfV.js";
+import { t as n } from "./use-material-translation-DOkTaWK_.js";
+import { t as r } from "./button-yaltbQmC.js";
 import { t as i } from "./use-ssr-media-query-C6M5m8sf.js";
 import { i as a, n as o, r as s, t as c } from "./util-4heV2LPI.js";
 import { t as l } from "./useIsomorphicLayoutEffect-DfgAhWcH.js";
 import { t as u } from "./warn-once-C_e47JM8.js";
-import { t as d } from "./chip-olzYjs30.js";
+import { t as d } from "./chip-BqWbbr1b.js";
 import { c as f, d as p, f as m, i as h, o as g, p as _, s as v, t as y } from "./line-path-C5pZGC49.js";
 import { t as b } from "./live-status-BGPaN8r8.js";
 import { t as x } from "./linear-G97mfnKF.js";

package/dist/{chip-olzYjs30.js → chip-BqWbbr1b.js}

@@ -1,6 +1,6 @@
 import { t as e } from "./utils-BLfntITJ.js";
 import { 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 { a as r } from "./button-tones-BwuVvAmd.js";
 import { t as i } from "./react-node-text-Crkpfpco.js";
 import { Check as a, X as o } from "lucide-react";

package/dist/{code-editor-CCc-piPv.js → code-editor-C9qBNoYb.js}

@@ -1,12 +1,12 @@
 import { r as e } from "./rolldown-runtime-BFFgcFxR.js";
 import { t } from "./utils-BLfntITJ.js";
 import { a as n } from "./dist-lmHmz_bu.js";
-import { c as r, d as i, f as a, n as o, t as s } from "./dropdown-menu-CFO3E-rO.js";
+import { c as r, d as i, f as a, n as o, t as s } from "./dropdown-menu-Df8785nt.js";
 import { a as c, i as l, n as u } from "./field-blur-context-Cft9s7Hg.js";
-import { a as d, d as f, r as p, t as m, u as h } from "./toolbar-items-BCy6DMzb.js";
+import { a as d, d as f, r as p, t as m, u as h } from "./toolbar-items-CsLGJMEJ.js";
 import { t as g } from "./is-production-GLw59WU8.js";
-import { t as _ } from "./use-material-translation-CkPcqI6q.js";
-import { i as v, n as y, o as b, t as x } from "./code-language-items-mjN3a33n.js";
+import { t as _ } from "./use-material-translation-DOkTaWK_.js";
+import { i as v, n as y, o as b, t as x } from "./code-language-items-DAHtfQ7W.js";
 import { t as S } from "./useIsomorphicLayoutEffect-DfgAhWcH.js";
 import { n as C, t as w } from "./escape-owner-C4W_sOAU.js";
 import { t as T } from "./skeleton-DSdtr2qc.js";

package/dist/code-editor.js

@@ -1,14 +1,14 @@
 import { t as e } from "./utils-BLfntITJ.js";
 import { a as t } from "./dist-lmHmz_bu.js";
-import { d as n, r, t as i, u as a } from "./toolbar-items-BCy6DMzb.js";
-import { t as o } from "./use-material-translation-CkPcqI6q.js";
-import { i as s, n as c, o as l } from "./code-language-items-mjN3a33n.js";
+import { d as n, r, t as i, u as a } from "./toolbar-items-CsLGJMEJ.js";
+import { t as o } from "./use-material-translation-DOkTaWK_.js";
+import { i as s, n as c, o as l } from "./code-language-items-DAHtfQ7W.js";
 import { r as u, t as d } from "./field-blur-CJHzVSh9.js";
 import { t as f } from "./skeleton-DSdtr2qc.js";
 import { t as p } from "./live-status-BGPaN8r8.js";
 import { t as m } from "./use-mobile-BDro060N.js";
 import { t as h } from "./react-node-text-Crkpfpco.js";
-import { a as g, c as _, d as v, f as y, i as b, l as x, m as S, o as C, p as w, r as T, s as E, t as D, u as O } from "./code-editor-CCc-piPv.js";
+import { a as g, c as _, d as v, f as y, i as b, l as x, m as S, o as C, p as w, r as T, s as E, t as D, u as O } from "./code-editor-C9qBNoYb.js";
 import { ChevronDown as k, ChevronUp as A, Columns2 as j } from "lucide-react";
 import { useEffect as M, useRef as N, useState as P } from "react";
 import { Fragment as F, jsx as I, jsxs as L } from "react/jsx-runtime";

package/dist/{code-language-items-mjN3a33n.js → code-language-items-DAHtfQ7W.js}

@@ -1,5 +1,5 @@
-import { d as e, f as t } from "./dropdown-menu-CFO3E-rO.js";
-import { t as n } from "./use-material-translation-CkPcqI6q.js";
+import { d as e, f as t } from "./dropdown-menu-Df8785nt.js";
+import { t as n } from "./use-material-translation-DOkTaWK_.js";
 import { t as r } from "./live-status-BGPaN8r8.js";
 import { useEffect as i, useRef as a, useState as o } from "react";
 import { jsx as s } from "react/jsx-runtime";