@nxgt/material 3.25.1 → 3.26.1

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @nxgt/material
 
+## 3.26.1
+
+### Patch Changes
+
+- [#1649](https://github.com/softistx/nxgt-material/pull/1649) [`344f911`](https://github.com/softistx/nxgt-material/commit/344f9119b10d32db542e1f875a5c89234c8ee560) Thanks [@SteveGT96](https://github.com/SteveGT96)! - Tabs: a `TabsList` that overflows (a phone, a narrow card) now fades the side or sides that have hidden tabs and shows a scroll button on each ("Scroll tabs left" / "Scroll tabs right", `material.tabs.*` in en and fr, 44px on a coarse pointer, out of the tab order). The selected tab and the focused tab are scrolled into view without moving the page, instantly under reduced motion. A list that fits keeps its markup, and the server markup has no button. Fixes [#1643](https://github.com/softistx/nxgt-material/issues/1643).
+
+## 3.26.0
+
+### Minor Changes
+
+- [#1627](https://github.com/softistx/nxgt-material/pull/1627) [`ba65c4e`](https://github.com/softistx/nxgt-material/commit/ba65c4e9aaaa9cf58bd3bd9036b93931227d2974) Thanks [@SteveGT96](https://github.com/SteveGT96)! - New `ChangeHistory` (`Data display/ChangeHistory`): a history of the changes made to anything (a document, a project's settings, a file), with who changed what and when and the values before and after. Nothing in its API names a domain: `entries`, `kinds`, `author`.
+  
+  - `variant="rail"` (default): a thin rail of toned dot icons, one row per entry with the avatar, a sentence, the relative time (exact time on hover and on focus), and the changes as a description list (old value struck through, an arrow, the new value in a tinted pill). `variant="cards"`: a card tinted by kind with an icon chip, the kind word and a Before / After block that spells its words.
+  - `kinds` merges over the built-ins (`created` success, `updated` neutral, `archived` and `restored` warning, `purged` and `deleted` error); an app overrides a part or adds its own kinds. `groupBy` (`day` | `none`), `collapseAfter` (default 3, "N fields changed" / "N fields set" with a preview of the names), `filter` slot, `loading`, `hasMore` / `onLoadMore` / `total` ("Showing X of Y", announced politely; the focus moves to the first new entry when Load more takes the last page), `empty`, `now` and `timeZone` (pass both from the server so the grouping and labels match on hydration), `headingLevel` (day headings, default 3).
+  - A `redacted` change shows "Hidden" and never renders its values; a `created` entry shows values only. Each entry is an `article` in an `ol` labelled "{kind} by {author}, {date and time}"; day headings are real headings.
+  - Small, additive upstream changes with unchanged defaults: `DaySeparator` takes `as` (`h2` to `h6` for a real heading), `RelativeTime` takes `focusable`, `tooltip` and `now` and forwards its `ref`.
+  - i18n: `material.history.*` in en and fr (React only; the Vue twin is a `vue` issue).
+
 ## 3.25.1
 
 ### Patch Changes

package/README.md

@@ -611,6 +611,7 @@ Not components: what the stylesheet gives any element.
 | <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-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-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` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-display-codeblock.webp" width="120" alt="CodeBlock"> | [`CodeBlock`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-display.md#codeblock), `JsonViewer`, `CodeGroup` | Highlighted code with line numbers and copy, a collapsible JSON tree, and tabbed samples (`Tabs`, underlined). `CodeDiff` is under Rich widgets. | `CodeBlock`, `JsonViewer`, `CodeGroup` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-display-markdown.webp" width="120" alt="Markdown"> | [`Markdown`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-display.md#markdown), `MermaidDiagram` | GFM markdown with KaTeX math and mermaid diagrams (`clientOnly`). Fences reuse `CodeBlock`. `ChatMarkdown` renders through it. | `Markdown`, `MermaidDiagram` |

package/dist/{async-slice-nTRgm_ct.js → async-slice-gAbGnQT8.js}

@@ -1,5 +1,5 @@
-import { i as e, r as t, t as n } from "./stored-language-CJn_iWwG.js";
-import { r } from "./translator-1THr41fc.js";
+import { i as e, r as t, t as n } from "./stored-language-ClkfkueV.js";
+import { r } from "./translator-C0uxN1Nh.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-rdIhY2BT.js → button-Cr9GIIj4.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-B7HCQMFr.js";
+import { t as o } from "./spinner-CJtTRNAX.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-BFQODuQz.js";
-import { t as r } from "./button-rdIhY2BT.js";
+import { t as n } from "./use-material-translation-B4Frk3vC.js";
+import { t as r } from "./button-Cr9GIIj4.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-CEau88ZV.js";
+import { t as d } from "./chip-s11lOfxB.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-CEau88ZV.js → chip-s11lOfxB.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-BFQODuQz.js";
+import { t as n } from "./use-material-translation-B4Frk3vC.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-DHB5ytUz.js → code-editor-DGIjL8Hr.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-mTDyFwbQ.js";
+import { c as r, d as i, f as a, n as o, t as s } from "./dropdown-menu-B71aggp0.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-Tn3MMu-s.js";
+import { a as d, d as f, r as p, t as m, u as h } from "./toolbar-items-DlioFgpM.js";
 import { t as g } from "./is-production-GLw59WU8.js";
-import { t as _ } from "./use-material-translation-BFQODuQz.js";
-import { i as v, n as y, o as b, t as x } from "./code-language-items-Dww9amx_.js";
+import { t as _ } from "./use-material-translation-B4Frk3vC.js";
+import { i as v, n as y, o as b, t as x } from "./code-language-items-DCOQnaCo.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-Tn3MMu-s.js";
-import { t as o } from "./use-material-translation-BFQODuQz.js";
-import { i as s, n as c, o as l } from "./code-language-items-Dww9amx_.js";
+import { d as n, r, t as i, u as a } from "./toolbar-items-DlioFgpM.js";
+import { t as o } from "./use-material-translation-B4Frk3vC.js";
+import { i as s, n as c, o as l } from "./code-language-items-DCOQnaCo.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-DHB5ytUz.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-DGIjL8Hr.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-Dww9amx_.js → code-language-items-DCOQnaCo.js}

@@ -1,5 +1,5 @@
-import { d as e, f as t } from "./dropdown-menu-mTDyFwbQ.js";
-import { t as n } from "./use-material-translation-BFQODuQz.js";
+import { d as e, f as t } from "./dropdown-menu-B71aggp0.js";
+import { t as n } from "./use-material-translation-B4Frk3vC.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";