@nxgt/material 3.38.0 → 3.41.0

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @nxgt/material
 
+## 3.41.0
+
+### Minor Changes
+
+- [#1774](https://github.com/softistx/nxgt-material/pull/1774) [`cb7d564`](https://github.com/softistx/nxgt-material/commit/cb7d564127bc457bc1060ecbfd086d5a2e3e91ba) Thanks [@SteveGT96](https://github.com/SteveGT96)! - feat(server-table): the `bulkActions` list gets an accessible name, a row maximum and focus return ([#1767](https://github.com/softistx/nxgt-material/issues/1767)). An action takes `name: (count) => string` (the button's accessible name and tooltip, e.g. "Archive 2 people"; start it with the visible label, WCAG 2.5.3; the default stays "Label n rows"), `max` with `maxNotice` (past `max` applicable rows its button gives way to a short muted notice, told politely once; default `material.server-table.bulk-max-notice`, "Select 100 rows or fewer to archive"; in the phone's More menu a disabled item whose description is the notice), and `onClick(ids, selection, rows, { trigger, focusTrigger })` so a step that opens a dialog can give the focus back to its button, or to the next bulk action, "More" or the table's "Select all" when the button is gone. New type `ServerTableBulkContext`. Additive: three-parameter handlers and lists without the new props render the same.
+
+## 3.40.0
+
+### Minor Changes
+
+- [#1778](https://github.com/softistx/nxgt-material/pull/1778) [`c8bdd2a`](https://github.com/softistx/nxgt-material/commit/c8bdd2a7ab4f32f0923a9da170060bf4ea03bc51) Thanks [@SteveGT96](https://github.com/SteveGT96)! - feat(charts): LineChart reference bands, thresholds and point tones ([#1749](https://github.com/softistx/nxgt-material/issues/1749)). `bands` (`{ from, to, label, tone? }[]`) shade a range of the value axis behind the lines, `thresholds` (`{ value, label, tone?, dash? }[]`) draw a labelled line, and `pointTone` (`(point, series) => Tone | undefined`, with `toneLabels` for the words) rings the values that need a word. The words are carried into the tooltip, the live status (`Day 4: Reading 63 (High)`), the generated summary (the ranges and lines, how many values lie outside each band, the tone counts) and a tone column plus a list of the ranges under "View data". The value axis grows to hold the bands and lines unless `yAxis.min` / `max` pin it, then a band is clipped; zoom, scroll and resize keep them right. A toned point is a ring (never colour alone), labels hold 4.5:1 in both themes, forced colours and right-to-left labels are handled, and the markup is the same on the server. `AreaChart` takes the same props. New types `ChartBand` and `ChartThreshold`; new keys `material.charts.tone.*`, `material.charts.reference.*`, `material.charts.status-value-tone`, `material.charts.table-tone` and `material.charts.summary.{bands,thresholds,outside,tones,tone-count}` in English and French.
+
+## 3.39.0
+
+### Minor Changes
+
+- [#1759](https://github.com/softistx/nxgt-material/pull/1759) [`a10f533`](https://github.com/softistx/nxgt-material/commit/a10f5335ab0080f0f82e71710f88d1619b925ece) Thanks [@SteveGT96](https://github.com/SteveGT96)! - feat(date-fields): `timeZone` on `DateField` and `TimeField` (and `DateFormField`, `TimeFormField`), and a time that is typed with `showTimePicker` ([#1750](https://github.com/softistx/nxgt-material/issues/1750)). `timeZone` is an IANA name (`Europe/Paris`): the segments and the picker show the value's wall clock in that zone, what is typed or picked is read in it, and `value` / `onValueChange` stay the true instant, whatever zone the browser runs in. `minDate`, `maxDate`, `disablePast`, `disableFuture`, today's mark and `disabledDays` are the zone's days. A time the clocks skip moves to the end of the gap (02:30 becomes 03:30); a time that happens twice is the first occurrence unless the value already holds the second. The zone helpers are `@nxgt/material-core/zone` ([#1763](https://github.com/softistx/nxgt-material/issues/1763)). The server renders the same wall clock whatever its own zone. Without `timeZone` nothing changes; an unknown name reads as `UTC`. `TimeFormField` with `asString` and `TimeStringField` keep the string as the wall clock and take no zone. With `showTimePicker`, `DateField` types the hours, minutes and AM / PM after the date, in the locale's clock (`hourCycle` forces one), beside the tiles; typed and picked are one value, and the field has a value once the date and the time are both complete. On a phone the time wraps under the date, and the sheet's large field takes the time too (`material.dates.type-date-time`, en and fr). **Behaviour change with `showTimePicker`:** a day picked in the calendar keeps the time of day instead of putting it back to midnight. **Note:** react-day-picker's own `timeZone` prop, which the types of `DateField` and `DateRangeField` used to let through to the calendar, is no longer accepted: `DateField`'s is ours, and `DateRangeField` takes none. `disabledDays` matchers that hold a `Date` name the days those instants fall on in the zone. A wall time the browser's own clocks skip is shown and typed as it is (the zone's wall clock is held as a floating date).
+
+### Patch Changes
+
+- Updated dependencies [[`0655e48`](https://github.com/softistx/nxgt-material/commit/0655e48d2f67eb06a2c8bb8c5379fac2484f4a08)]:
+  - @nxgt/material-core@0.40.0
+
 ## 3.38.0
 
 ### Minor Changes

package/README.md

@@ -193,7 +193,7 @@ reads `duotone.svg`, the file that exists (it used to ask for the missing
 | `@nxgt/material/components` | UI components, `*FormField` wrappers and `useCodeResolver` ([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`), `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)) |
+| `@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)) |
 | `@nxgt/material/draw` | Vector drawing: a scene of plain data or JSX primitives drawn as accessible, themeable SVG that is safe under a strict CSP and identical on the server and in the browser. `Drawing` (`DrawingProps`, `NodeHandlers`; `scene` or `w`/`h` with children; a `title` (with an optional long `description`, written as a `<desc>`) or `decorative`, enforced by the type), the primitives `Rect`, `Ellipse`, `Circle`, `Line`, `Polygon`, `Path` (takes `node`), `Text`, `Group` and `Image`, and the builders of `@nxgt/material-core/draw` re-exported by name (`scene`, `rect`, `ellipse`, `circle`, `line`, `polygon`, `path`, `text`, `group`, `image`, `linear`, `radial`, `pattern`, `hatch`, `tone`, `toSVG`, `compileScene`, `ROLES`, `DRAW_PALETTE`, and the types `Scene`, `DrawNode`, `Paint`, `Role`, `ToneRef`), plus Material 3 Expressive's shapes (`shape`, `morph`, `SHAPE_NAMES`, `toCubics`) and the layout helpers (`bbox`, `stack`, `grid`, `align`, `distribute`) re-exported by name. Colours are theme roles (`primary-container`, `on-surface`...) mapped to classes in `styles.css`, so import it. Interactive nodes are focusable `button`s with a focus ring; wrapped text is re-measured by the browser once mounted. **Its own entry, client-only** (render `Drawing` from a `'use client'` file; the builders and `toSVG` run anywhere), not in the barrel above ([drawing guide](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/drawing.md)) |
 | `@nxgt/material/draw/sketch` | The sketchy, hand-drawn style for a drawing: `Sketch` (`seed`, `roughness`, `bowing`, `fill`: `hachure`, `cross-hatch`, `solid` or `none`, `hachureAngle`, `hachureGap`, `strokeWidth`) wraps a `Drawing`, or primitives inside one, and draws shapes as double wobbling strokes with hatched fills; `sketch(sceneOrNode, options)` does it to plain data for `toSVG`. Seeded, so the server and the client draw the same lines; ids, labels, focus rings and events keep working. **Its own entry, client-only** (render `Sketch` from a `'use client'` file), not in the barrel above ([drawing guide](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/drawing.md#sketch)) |
 | `@nxgt/material/map` | Leaflet maps, markers, a location field — **its own entry, not in the barrel, and browser-only** ([maps guide](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/maps.md)) |
@@ -427,7 +427,7 @@ Each area a consumer starts from has its own page under `docs/guides/`.
 | [Theming](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/theming.md) | changing colours, radius or fonts, motion and corner tokens, the page ground (`--ground`, `bg-ground`: its light and dark values and the opt-out), dark mode, tones (the `data-tone` channel, app tones and the calm zone `data-density="calm"`), touch targets, using the compiled CSS without Tailwind |
 | [Printing](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/printing.md) | producing PDFs with `@nxgt/material/print` and getting the file in one call (download, new tab, preview, server `Response`) — its own entry since 2.0.0, with optional peers, a bundling trap on SSR servers, and the `next.config.ts` a Next.js route handler (and `output: 'standalone'`) needs |
 | [Maps](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/maps.md) | using `@nxgt/material/map` — browser-only, optional leaflet peers, `map.css` |
-| [Charts](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/charts.md) | drawing charts with `@nxgt/material/charts` (client-only): the twelve charts, shared props, legend, View data, `onPointClick`, zoom and phone scroll, right-to-left pages, keyboard and accessibility, theming the `--chart-*` tokens, and migrating from the Nivo charts, removed in 3.0 |
+| [Charts](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/charts.md) | drawing charts with `@nxgt/material/charts` (client-only): the twelve charts, shared props, legend, View data, `onPointClick`, reference bands, thresholds and point tones on the line chart, zoom and phone scroll, right-to-left pages, keyboard and accessibility, theming the `--chart-*` tokens, and migrating from the Nivo charts, removed in 3.0 |
 | [Drawing](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/drawing.md) | drawing diagrams, badges and illustrations from code with `@nxgt/material/draw`: a scene or JSX, theme roles and tones, strict CSP, accessibility, events, sketch, animation, PNG, PDF and e-mail |
 | [Backgrounds](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/backgrounds.md) | tones, intensity, the opt-in `backgrounds.css` and per-preset files, custom tone tokens, motion and CSP |
 | [Illustrations](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/illustrations.md) | `@nxgt/material/illustrations`: the twelve scenes and the health and education sets, icons from your sprites, `EmptyState` / `ErrorState` / `DataTable` with `illustration`, `IllustrationDefaults` for an app, sizes, motion and CSP |
@@ -630,7 +630,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/data-table-filter-lists-datatable.webp" width="120" alt="DataTable"> | [`DataTable`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-table-filter-and-lists.md#datatable), `DataTableColumnHeader`, `DataTablePagination`, `DataTableServerFooter`, `DataTableViewOptions` | TanStack Table v9 with sorting, filtering, selection, expandable rows, pagination or load-more, column visibility, skeleton rows while loading and your own empty state — or one server page at a time, with controlled sorting and selection, cursor Previous / Next links and row links. On a phone it keeps its header row and scrolls sideways in a keyboard-reachable region; the page does not. Or cards and tiles instead of the table (`layout`, `renderCard`, `renderTile`), and `layout={{ phone: 'tiles', wide: 'table' }}` for tiles on a phone ([cards and tiles guide](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/cards-and-tiles.md)). Long lists render only the rows in view (`virtual`). | `DataTable`, `DataTableColumnHeader`, `DataTablePagination`, `DataTableServerFooter`, `DataTableViewOptions` |
-| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-table-filter-lists-servertable.webp" width="120" alt="ServerTable"> | [`ServerTable`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-table-filter-and-lists.md#servertable), `createSorting`, `tableFilters`, `defineFilterModel`, `parseFilterQuery`, `serializeFilterQuery`, `paramsFromQuery`, `serverPagination`… | A server-mode `DataTable` driven by the URL's search params, for any router: the Filter in its top band with the page's title (optional), description and actions, the sort, forward cursor paging, a selection reset on a new query, the empty page (a scene and an action for "nothing yet", the filters as removable chips), a compact band (`bandDensity`), icon-only Previous / Next (`pageControls`, 44px targets on a touch screen, focus kept while a page loads), actions that stay on the search's row on a phone (`bandActions`), a bulk bar that reserves no row until a selection, bulk actions with `appliesTo` that count and run only the selected rows they apply to (hidden at zero), a `filterRef` to focus the Filter, a page past the last (rows deleted) that says so and links back to the first, an error state with Retry for a failed fetch (`error`, `onRetry`), and one count announced. | `ServerTable`, `createSorting`, `tableFilters`, `serverPagination` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-table-filter-lists-servertable.webp" width="120" alt="ServerTable"> | [`ServerTable`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-table-filter-and-lists.md#servertable), `createSorting`, `tableFilters`, `defineFilterModel`, `parseFilterQuery`, `serializeFilterQuery`, `paramsFromQuery`, `serverPagination`… | A server-mode `DataTable` driven by the URL's search params, for any router: the Filter in its top band with the page's title (optional), description and actions, the sort, forward cursor paging, a selection reset on a new query, the empty page (a scene and an action for "nothing yet", the filters as removable chips), a compact band (`bandDensity`), icon-only Previous / Next (`pageControls`, 44px targets on a touch screen, focus kept while a page loads), actions that stay on the search's row on a phone (`bandActions`), a bulk bar that reserves no row until a selection, bulk actions with `appliesTo` that count and run only the selected rows they apply to (hidden at zero), an accessible `name`, a `max` rows with a notice, and `focusTrigger()` to give the focus back after a dialog, a `filterRef` to focus the Filter, a page past the last (rows deleted) that says so and links back to the first, an error state with Retry for a failed fetch (`error`, `onRetry`), and one count announced. | `ServerTable`, `createSorting`, `tableFilters`, `serverPagination` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-table-filter-lists-rowmenu.webp" width="120" alt="RowMenu"> | [`RowMenu`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-table-filter-and-lists.md#rowmenu), `RowMenuTrigger`, `rowMenuColumn` | A row's "..." button named after its row ("Actions for Ada"; 44px on touch, 36px with a mouse from `md`), its menu aligned to the end with the destructive item last and 44px items on touch, and a column helper for `DataTable` and `ServerTable` under a hidden but named "Actions" header; focus returns to the button, also from a dialog an item opened. | — |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-table-filter-lists-listempty.webp" width="120" alt="ListEmpty"> | [`ListEmpty`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-table-filter-and-lists.md#listempty) | A list's empty page: nothing yet (a title, or a scene, a line and an action), or nothing matches with what narrows it and a way out (a button or a link); its title is an `h2` (`headingLevel`). | `ListEmpty` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-table-filter-lists-pagefooter.webp" width="120" alt="PageFooter"> | [`PageFooter`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-table-filter-and-lists.md#pagefooter) | The page footer of a feed that is not a table (a list of cards, a news feed) under a `FilterBar`: the range ("21–40 of 134") and Previous / Next as real links built from the URL's cursor trail (`pageInfo`, `totalCount`, `params`), the same footer `ServerTable` draws, icon-only with `pageControls="icon"` (44px targets on a touch screen); an end with no page is a disabled button, `aria-disabled`. | `PageFooter` |

package/dist/{async-slice-DqjtOYlO.js → async-slice-Dj0tAKRI.js}

@@ -1,5 +1,5 @@
-import { i as e, r as t, t as n } from "./stored-language-D8aemZhx.js";
-import { r } from "./translator-Bq8UHmvu.js";
+import { i as e, r as t, t as n } from "./stored-language-B5SMR-W2.js";
+import { r } from "./translator-C-_M57ZA.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-D52ron-a.js → button-CTsT_LqL.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-CuxEwO0d.js";
+import { t as o } from "./spinner-DLd_IHev.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";