@nxgt/material 3.25.1 → 3.26.1

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

@@ -1,4 +1,4 @@
-import { r as e } from "./i18n-provider-BpZOKh7U.js";
+import { r as e } from "./i18n-provider-BDi9-6DO.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-B4Frk3vC.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-BDi9-6DO.js";
+import { t } from "./translate-material-O-uasx3u.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/docs/components/primitives.md

@@ -732,7 +732,12 @@ Parts: `Tabs`, `TabsList`, `TabsTrigger`, `TabsContent`. `TabsList` and
 **`underline`** (the default) lays the tabs over a border; the active one
 takes the primary colour, and a bar under it slides to the tab clicked or
 reached with the arrow keys. The list scrolls sideways when the tabs do not
-fit (its scrollbar hidden), which suits a phone or a narrow popover.
+fit (its scrollbar hidden), which suits a phone or a narrow popover. While it
+overflows, each side with hidden tabs fades and gets a small scroll button
+("Scroll tabs left" / "Scroll tabs right", from `material.tabs.*`; out of the
+tab order, 44px on a touch screen); the selected and the focused tab are
+scrolled into view, instantly under reduced motion. A list that fits has
+neither, and neither is in the server markup. `segmented` does the same.
 
 **`segmented`** is a neutral pill track: the active tab sits on a raised
 surface that slides between tabs, and its label turns to the foreground

package/docs/guides/i18n.md

@@ -240,7 +240,8 @@ presets and `Min`/`Max` fields, the `variant="4"` spinner's label,
 `material.slider.minimum` / `maximum` ("Minimum", "Maximum"), and a
 single value's input, when nothing names the slider, `material.slider.value`
 ("Value", "Valeur"). `CopyButton` reads `material.copy.copy`, `copied` and `failed` ("Copy", "Copied",
-"Copy failed"). The other icon-only buttons are named from it too: the
+"Copy failed"). An overflowing `TabsList`'s scroll buttons read
+`material.tabs.scroll-left` / `scroll-right` ("Scroll tabs left" / "Scroll tabs right"). The other icon-only buttons are named from it too: the
 `Sidebar` toggle (`material.sidebar.toggle`), the data table's row expander
 (`material.table.labels.toggle-row`) and its header, a hidden "Expand" / "Déplier"
 (`material.table.labels.expand`), its loading status, "Loading data…" /

package/package.json

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