@nxgt/material 3.52.0 → 3.53.0

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # @nxgt/material
 
+## 3.53.0
+
+### Minor Changes
+
+- [#1899](https://github.com/softistx/nxgt-material/pull/1899) [`a0e39f7`](https://github.com/softistx/nxgt-material/commit/a0e39f7a264b61892dd1d84f0024730f5c0c5ae8) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `ActivityContent` gains a `notice` slot: an `Alert` or `Banner` rendered under the header card, above the main column and the `aside`, as wide as the two together (so `width="form"` caps it), taking its own height in the layout and stacking first on a phone. Nothing changes without it ([#1897](https://github.com/softistx/nxgt-material/issues/1897)).
+
+- [#1884](https://github.com/softistx/nxgt-material/pull/1884) [`65cf28b`](https://github.com/softistx/nxgt-material/commit/65cf28bde7b9725574f28092005d228d9982cab3) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `ActionCard` (tile): `titleLink` makes the title a link (a router `Link` or an `<a>`) stretched over the card, `action` takes several controls, and the new `footer` slot holds secondary links above it, with nothing nested. The Status board recipe gains a linked variant ([#1882](https://github.com/softistx/nxgt-material/issues/1882)).
+
+- [#1895](https://github.com/softistx/nxgt-material/pull/1895) [`51a7700`](https://github.com/softistx/nxgt-material/commit/51a7700a662aaac7f34402ee1e9288b685986af6) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `DataGrid`: one column can mix kinds of row. The new `meta.rowEditor(row)` picks the built-in editor from the row, and `meta.options` and `meta.number.decimals` accept a function of the row, beside `number.min` and `number.max`, which already did. A result column can be a number with its own bounds on one row, a pick among its own options on the next, and a text on the third ([#1892](https://github.com/softistx/nxgt-material/issues/1892)).
+
+- [#1900](https://github.com/softistx/nxgt-material/pull/1900) [`85821fc`](https://github.com/softistx/nxgt-material/commit/85821fc221e5c1a1e2fea64aa97344a21402d490) Thanks [@SteveGT96](https://github.com/SteveGT96)! - Form hooks in `@nxgt/material/components`: `useFastForm(props, first, active?)` is `useForm` with `mode: 'onTouched'` that focuses the first field when the form opens (retrying a few frames so a dialog's focus trap settles), and `useFocusOnRefusal<T>(message, busy)` returns a ref that takes the focus back to the submit control once a refusal shows and nothing is running ([#1896](https://github.com/softistx/nxgt-material/issues/1896)).
+
+- [#1894](https://github.com/softistx/nxgt-material/pull/1894) [`98e3ede`](https://github.com/softistx/nxgt-material/commit/98e3ede48e6d4532806f011fa0f0b46806d51384) Thanks [@SteveGT96](https://github.com/SteveGT96)! - feat(charts): `LineChart` and `AreaChart` bands and thresholds that change along x ([#1891](https://github.com/softistx/nxgt-material/issues/1891)). A band's `from` and `to`, and a threshold's `value`, also take the name of a row field or a function of the row: the band or line then steps along x, one range per row (a normal range copied with each measurement), rows with the same range merging into one block and a row without a number leaving a gap. The summary and "View data" name each range with the x labels it covers, the outside-the-band count uses each row's own range, and the value axis grows to the whole span. A number keeps today's behaviour. New keys `material.charts.reference.{span,range,step,steps}` in English and French.
+
+- [#1889](https://github.com/softistx/nxgt-material/pull/1889) [`9be86bb`](https://github.com/softistx/nxgt-material/commit/9be86bb1a1a27c8ab6a25395f1bc517b3834e15f) Thanks [@SteveGT96](https://github.com/SteveGT96)! - feat(server-table): `renderTile` can lay a tile out as the compact record row of `ListTile`. `renderTile(row, { Row })` takes `<Row as="h2" title subtitle chips trailing />`: the dense row (`size="sm"` with `chips`) with the tile's own corner checkbox, one link and states, the title keeping the heading level of `as`. 36px tall under a mouse, 44px on a coarse pointer. Additive; `DataTable` tiles get it too, and the new `DataTableItemRowProps` type describes it ([#1766](https://github.com/softistx/nxgt-material/issues/1766)). A test that builds a `DataTableItem` by hand needs a `Row`.
+
+- [#1886](https://github.com/softistx/nxgt-material/pull/1886) [`a6dbabe`](https://github.com/softistx/nxgt-material/commit/a6dbabe9fb4ce429d206f8dd895af04803088d20) Thanks [@SteveGT96](https://github.com/SteveGT96)! - feat(switcher): `size="compact"` renders an icon-only trigger for the app bar's `titleAfter` slot, where the title already names the chosen option. It is named by the label and the chosen option, shows the option in a tooltip, keeps the panel and the keyboard, and is a 44x44 box on a coarse pointer. The default trigger is unchanged ([#1789](https://github.com/softistx/nxgt-material/issues/1789)).
+
+### Patch Changes
+
+- [#1881](https://github.com/softistx/nxgt-material/pull/1881) [`7d2b03a`](https://github.com/softistx/nxgt-material/commit/7d2b03af8df8c0954e1a29773887fbd040454a30) Thanks [@SteveGT96](https://github.com/SteveGT96)! - fix(filter): "Add filter" stays on the quick pills' row when it fits. The quick pills and "Add filter" now wrap as items of the bar's own row instead of the pills moving down as one block, and the search in a `ServerTable` band gives up room down to 8rem (was 10rem) before they wrap ([#1752](https://github.com/softistx/nxgt-material/issues/1752)).
+
+- [#1871](https://github.com/softistx/nxgt-material/pull/1871) [`9526810`](https://github.com/softistx/nxgt-material/commit/95268107647b91c493a2373bb642d93af502a31a) Thanks [@SteveGT96](https://github.com/SteveGT96)! - Roadmap: planned entries link their issues; the 3.50–3.52 entries move to Shipped
+
+- [#1890](https://github.com/softistx/nxgt-material/pull/1890) [`dd49310`](https://github.com/softistx/nxgt-material/commit/dd49310caec84e82d38346ccb591cc96b52f5d4a) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `ServerTable`'s selection bar on a phone no longer draws its "More" button over "Cancel" when the first action's label is long: the inline action now shrinks and truncates its label, so "More" and "Cancel" keep their 44px and their own place, and a tap on "More" opens its menu ([#1880](https://github.com/softistx/nxgt-material/issues/1880)).
+
+- [#1883](https://github.com/softistx/nxgt-material/pull/1883) [`5a20c66`](https://github.com/softistx/nxgt-material/commit/5a20c6658266085a04dc46234ad722e8152c2962) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `toast()`, the toast presets and the close label follow the `material.*` overrides passed to `<I18nProvider resources>`, and its language. They run outside React, so the provider now registers them in an internal registry (the last mounted provider wins); no new public API ([#1855](https://github.com/softistx/nxgt-material/issues/1855)).
+
 ## 3.52.0
 
 ### Minor Changes

package/README.md

@@ -14,6 +14,7 @@ drag-and-drop, i18n, and `Icon`. Tailwind CSS v4 + Base UI.
   (`TextField`) and a React Hook Form wrapper (`TextFormField`). Both are in
   the same barrel. The [forms guide](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/forms.md) covers validation,
   errors worded by code in the page's language (`useCodeResolver`),
+  quick-to-fill forms (`useFastForm`, `useFocusOnRefusal`),
   composite values, config-driven forms and server errors.
 - **Helpers** ([helpers guide](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/helpers.md)): `cn`, `clientOnly`,
   date, number, storage and URL utilities, a Zod error map, and Redux Toolkit
@@ -193,7 +194,7 @@ reads `duotone.svg`, the file that exists (it used to ask for the missing
 | Specifier | What is in it |
 | --- | --- |
 | `@nxgt/material` | Everything below in one barrel, plus the compiled `style` condition (`dist/material.css`, for apps without Tailwind) |
-| `@nxgt/material/components` | UI components, `*FormField` wrappers and `useCodeResolver` ([Components](#components)) |
+| `@nxgt/material/components` | UI components, `*FormField` wrappers, `useCodeResolver`, `useFastForm` and `useFocusOnRefusal` ([Components](#components)) |
 | `@nxgt/material/print` | PDF documents over `@react-pdf/renderer`: the `PrintDocument` page shell, the print blocks, `PrintDrawing` and the `drawing(scene)` node (a vector drawing from `@nxgt/material-core/draw` printed as vectors), and `PrintDataTable`, `PrintKeyValue` and `PrintMetric` from column definitions and plain rows; documents as plain data (`pdfDocument` and its builders, with `outline` and `conformance`); `registerPdfFont` (with the `PdfFontFaces` type) to embed a font, and the `PdfConformance` type for the PDF/A marker; a `numeric` column and `tabularNums` for figures that line up; `downloadPdf`, `openPdf`, `usePdfFile` and `pdfResponse` to get the file in one call — **its own entry, and not in the barrel above** ([printing guide](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/printing.md)) |
 | `@nxgt/material/pdf-reader` | `PdfReader`, the redesigned PDF reader (header, floating page pill, rail and panel; `embedded`, `dialog`, `page` and `fullscreen` modes; single page and two-page layouts; `look="expressive"` by default, `"classic"` to opt out, type `PdfReaderLook`) and `configurePdfReader` for pdf.js's worker and assets. **Its own entry, browser-only** (pdf.js loads on first render); also exported as `PdfReader` from `/components` since 3.0 ([guide](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/pdf-reader.md)) |
 | `@nxgt/material/charts` | Native SVG charts (d3-scale and d3-shape for the maths only) with keyboard point navigation, a screen-reader summary, a "View data" table and `patterns`: `LineChart` and `AreaChart` (`LineChartProps`, `AreaChartProps`, `ChartCurve`), `BarChart` (`BarChartProps`, `BarLayout`, `BarOrientation`), `PieChart` (`PieChartProps`), `DonutChart` (`DonutChartProps`), `Gauge` (`GaugeProps`, `GaugeSize`), `RadialBarChart` (`RadialBarChartProps`), `FunnelChart` (`FunnelChartProps`), `HeatmapChart` (`HeatmapChartProps`, `HeatColumn`), `RadarChart` (`RadarChartProps`), `ScatterChart` (`ScatterChartProps`, `ScatterSeries`, `ScatterPoint`), `ComboChart` (`ComboChartProps`, `ComboSeries`: bars, areas and lines, each on a left or a right axis), `zoom` (a mini overview with a window and two slider handles that picks the rows shown; `range`, `defaultRange`, `onRangeChange`) and `scroll` (a dense plot scrolls sideways on a phone, the value axis pinned) on the line, area, bar and combo charts (`ChartRangeProps`, `ChartZoomOptions`, `ChartScrollOptions`, `ChartRange`), `bands` (shaded ranges), `thresholds` (labelled lines) and `pointTone` (a ringed point with its word, `toneLabels`) on the line and area charts, read against the value axis and carried into the tooltip, the summary and the "View data" table (`ChartBand`, `ChartThreshold`), `onPointClick` on every chart but `Gauge`, `palette` (`'soft'`: the soft palette, or `data-chart-palette="soft"` on an ancestor; `ChartPalette`) on every chart, and the shared types (`ChartSlice`, `ChartRow`, `ChartValue`, `ChartColor`, `ChartShape`, `ChartSeries`, `ChartAxis`, `ChartXAxis`, `ChartPoint`, `ChartBaseProps`). `categoryLabel` names the "View data" table's category column: on Line, Area, Bar and Combo it defaults to the x axis label, on Radar and Heatmap it is always "Category" unless set. **Its own entry, client-only** (import it from a `'use client'` file), not in the barrel above; replaces the Nivo charts (removed in 3.0) of `/components` ([guide](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/charts.md)) |
@@ -518,7 +519,7 @@ Not components: what the stylesheet gives any element.
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/buttons-actions-loadmorebutton.webp" width="120" alt="LoadMoreButton"> | [`LoadMoreButton`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/buttons-and-actions.md#loadmorebutton) | "Load more" button for cursor pagination; icon-only with a tooltip unless `expanded`. | `LoadMoreButton` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/buttons-actions-scrolltotop.webp" width="120" alt="ScrollToTop"> | [`ScrollToTop`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/buttons-and-actions.md#scrolltotop) | Floating button that appears past a scroll threshold. | `ScrollToTop` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/buttons-actions-scrolltolatestbutton.webp" width="120" alt="ScrollToLatestButton"> | [`ScrollToLatestButton`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/buttons-and-actions.md#scrolltolatestbutton) | "Jump to latest" over a scroll box: an arrow that widens into "3 new messages". | — |
-| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/buttons-actions-actioncard.webp" width="120" alt="ActionCard"> | [`ActionCard`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/buttons-and-actions.md#actioncard) | Clickable card (a `role="button"` with `aria-pressed`) with a shape icon that morphs when chosen, title, description and active indicator; `status`, `meta`, a trailing `action` (a `RowMenu`) and `variant="tile"` make a compact cell for status boards. | `ActionCard` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/buttons-actions-actioncard.webp" width="120" alt="ActionCard"> | [`ActionCard`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/buttons-and-actions.md#actioncard) | Clickable card (a `role="button"` with `aria-pressed`) with a shape icon that morphs when chosen, title, description and active indicator; `status`, `meta`, a trailing `action` (a `RowMenu`) and `variant="tile"` make a compact cell for status boards; `titleLink` makes the title a link and `footer` adds a row of secondary links. | `ActionCard` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/buttons-actions-themetoggle.webp" width="120" alt="ThemeToggle"> | [`ThemeToggle`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/buttons-and-actions.md#themetoggle) | Light / dark / system switch that stores and applies the choice. | `ThemeToggle` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/buttons-actions-languageswitcher.webp" width="120" alt="LanguageSwitcher"> | [`LanguageSwitcher`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/buttons-and-actions.md#languageswitcher) | Globe button with a menu of the `I18nProvider` languages. | `LanguageSwitcher` |
 
@@ -590,7 +591,7 @@ Not components: what the stylesheet gives any element.
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/selection-choice-transferlist.webp" width="120" alt="TransferList"> | [`TransferList`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/selection-and-choice.md#transferlist) · `TransferListFormField` | Two-pane picker with search, counts, select-all, Shift-range checks, drag-and-drop between panes, reordering and a `max`; avatar and badge slots, a `compact` density, and panes that stack in a narrow container. | `TransferList`, `TransferListFormField` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/selection-choice-sortablelist.webp" width="120" alt="SortableList"> | [`SortableList`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/selection-and-choice.md#sortablelist) · `SortableListFormField` | Searchable list you reorder by dragging (row or grip) or with the keyboard (Space to pick up, arrows, Space to drop, Escape to cancel), each step announced; `numbered`, `removable`, locked rows, `cards` or `plain`, `compact`. | `SortableList`, `SortableListFormField` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/selection-choice-treeselectfield.webp" width="120" alt="TreeSelectField"> | [`TreeSelectField`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/selection-and-choice.md#treeselectfield) · `TreeSelectFormField` | A field that opens a `Tree` in a popover: pick one node, or several as chips, with an optional filter. | `TreeSelectField`, `TreeSelectFormField` |
-| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/selection-choice-switcher.webp" width="120" alt="Switcher"> | [`Switcher`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/selection-and-choice.md#switcher) | Switches the active workspace, establishment or class: a menu, or a searchable panel with groups and links; an expressive variant; a clipped subtitle keeps its full text; `open`/`onOpenChange`, and a link pick closes it. | `Switcher` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/selection-choice-switcher.webp" width="120" alt="Switcher"> | [`Switcher`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/selection-and-choice.md#switcher) | Switches the active workspace, establishment or class: a menu, or a searchable panel with groups and links; an expressive variant; a clipped subtitle keeps its full text; a compact icon-only trigger (`size="compact"`) for the app bar; `open`/`onOpenChange`, and a link pick closes it. | `Switcher` |
 
 ### Data display
 
@@ -654,7 +655,7 @@ Not components: what the stylesheet gives any element.
 
 | Preview | Component | What it does | @nxgt/material-vue |
 | --- | --- | --- | --- |
-| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/navigation-layout-appshell.webp" width="120" alt="ActivityLayout"> | [`ActivityLayout`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/navigation-and-layout.md#activitylayout), `ActivityContent`, `AppSidebar`, `AppHeader`, `AppBreadcrumb`, `AppBreadcrumbItem`, `AppBreadcrumbSeparator` | App shell: sidebar built from `items`, a header with a mobile sheet, route breadcrumbs and a titled page; entries are real links, and `linkComponent` swaps the link; it draws the theme's background (Lavande's is the gradient), `backdrop` puts a `/backgrounds` preset behind it for one screen, and `backdrop={false}` draws a plain page, and `keepClear="gaps"` lets its glyphs sit in the gaps between surfaces of a dense page. It paints the tinted page ground (`--ground`, `bg-ground`) under the content, with the sidebar and the app bar flat on `--background` and the cards on `bg-card` (`--ground: var(--background)` opts out). `ActivityContent` takes an `aside` side panel (beside the content from 1280px in CSS only, sticky under the app bar, a named `complementary` landmark, stacked below) and `width="form" \| "reading"` to cap the main column with the panel right beside it. See the [app shell guide](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/app-shell.md). | `ActivityLayout`, `ActivityContent`, `AppSidebar`, `AppHeader`, `AppBreadcrumb` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/navigation-layout-appshell.webp" width="120" alt="ActivityLayout"> | [`ActivityLayout`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/navigation-and-layout.md#activitylayout), `ActivityContent`, `AppSidebar`, `AppHeader`, `AppBreadcrumb`, `AppBreadcrumbItem`, `AppBreadcrumbSeparator` | App shell: sidebar built from `items`, a header with a mobile sheet, route breadcrumbs and a titled page; entries are real links, and `linkComponent` swaps the link; it draws the theme's background (Lavande's is the gradient), `backdrop` puts a `/backgrounds` preset behind it for one screen, and `backdrop={false}` draws a plain page, and `keepClear="gaps"` lets its glyphs sit in the gaps between surfaces of a dense page. It paints the tinted page ground (`--ground`, `bg-ground`) under the content, with the sidebar and the app bar flat on `--background` and the cards on `bg-card` (`--ground: var(--background)` opts out). `ActivityContent` takes an `aside` side panel (beside the content from 1280px in CSS only, sticky under the app bar, a named `complementary` landmark, stacked below) and `width="form" \| "reading"` to cap the main column with the panel right beside it; `notice` puts an `Alert` or `Banner` above both, at their width. See the [app shell guide](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/app-shell.md). | `ActivityLayout`, `ActivityContent`, `AppSidebar`, `AppHeader`, `AppBreadcrumb` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/navigation-layout-accountmenu.webp" width="120" alt="AccountMenu"> | [`AccountMenu`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/navigation-and-layout.md#accountmenu) | The app bar's avatar menu: named after the account, the name and e-mail, the app's links, then an optional Theme choice (`themeChoice`) and a destructive Sign out with a busy state. | `AccountMenu` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/navigation-layout-authcard.webp" width="120" alt="AuthCard"> | [`AuthCard`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/navigation-and-layout.md#authcard) | The frame of a signed-out page: one `main`, a centred card whose title is the `h1` (focusable on an end state), a status or alert notice, a brand and toolbar row, safe-area padding, an optional backdrop (the theme's by default) that keeps clear of the card. | `AuthCard` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/navigation-layout-sidebar.webp" width="120" alt="Sidebar"> | [`Sidebar`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/navigation-and-layout.md#sidebar), `SidebarHeader`, `SidebarContent`, `SidebarFooter`, `SidebarMenuItem`, `SidebarMenuLabel` | Collapsible navigation sidebar with icons, tooltips and active items. | `Sidebar` (same parts) |

package/dist/{async-slice-BGtmF3K5.js → async-slice-DDSsekfm.js}

@@ -1,5 +1,5 @@
-import { i as e, r as t, t as n } from "./stored-language-Cb9FMEwk.js";
-import { r } from "./translator-BnQXtpSZ.js";
+import { i as e, r as t, t as n } from "./stored-language-B1lJMPbR.js";
+import { r } from "./translator-BU1o3_l9.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-Ct0KRBsN.js → button-Ct8DSLVv.js}

@@ -1,7 +1,7 @@
 import { t as e } from "./utils-BLfntITJ.js";
 import { t } from "./is-production-GLw59WU8.js";
 import { n, t as r } from "./dist-DVRQkaTK.js";
-import { n as i, r as a, t as o } from "./spinner-KQb3YuR_.js";
+import { n as i, r as a, t as o } from "./spinner-Rg4PnBPH.js";
 import { a as s, i as c, n as l, o as u, s as d, t as f } from "./use-click-lock-BZYtTmVt.js";
 import { t as p } from "./button-group-context-CaP0X5p_.js";
 import { t as m } from "./has-text-content-Ds2dkHX_.js";