@nxgt/material 3.52.0 → 3.54.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (136) hide show
  1. package/CHANGELOG.md +44 -0
  2. package/README.md +5 -4
  3. package/dist/{async-slice-BGtmF3K5.js → async-slice-DDSsekfm.js} +2 -2
  4. package/dist/{button-Ct0KRBsN.js → button-Ct8DSLVv.js} +1 -1
  5. package/dist/charts.js +1064 -932
  6. package/dist/{chip-Ca1SEd70.js → chip-BzoNsd-W.js} +2 -2
  7. package/dist/{code-editor-DtwRhK8B.js → code-editor-DsLQeiZc.js} +6 -6
  8. package/dist/code-editor.js +5 -5
  9. package/dist/{code-language-items-CEclGxhA.js → code-language-items-4zXlIEZ0.js} +2 -2
  10. package/dist/components/components.css +1 -5
  11. package/dist/components/theme-tokens.css +19 -15
  12. package/dist/components/ui/actions/action-card/action-card-tile.css +11 -2
  13. package/dist/components/ui/collections/data-table/data-table-items-record.css +27 -0
  14. package/dist/components/ui/collections/data-table/index.css +14 -0
  15. package/dist/components/ui/overlays/dialog/dialog.css +2 -1
  16. package/dist/components/ui/overlays/popover/popover.css +3 -2
  17. package/dist/{components-CzELzsOi.js → components-DFG2mgsM.js} +14052 -13890
  18. package/dist/components.js +26 -26
  19. package/dist/{dialog-BIy04Hpd.js → dialog-DwPmwmA3.js} +4 -4
  20. package/dist/dnd.js +1 -1
  21. package/dist/draw-animate.js +1 -1
  22. package/dist/{dropdown-menu-B0Kd8x3G.js → dropdown-menu-CDN6Nqx6.js} +1 -1
  23. package/dist/editor.js +9 -9
  24. package/dist/{empty-state-CKxORwFE.js → empty-state-Bb9W9did.js} +2 -2
  25. package/dist/{escape-owner-BGKjiglh.js → escape-owner-DI_lg2ID.js} +1 -1
  26. package/dist/{field-blur-Dz1zPaYK.js → field-blur-BcJH8H9B.js} +1 -1
  27. package/dist/{field-blur-context-1T6GkSNc.js → field-blur-context-Dg1nwWOV.js} +1 -1
  28. package/dist/hooks.js +2 -2
  29. package/dist/{hover-card-BwQ9IRxa.js → hover-card-Qse4gnop.js} +2 -2
  30. package/dist/i18n-provider-DlVPS58N.js +79 -0
  31. package/dist/i18n.js +5 -5
  32. package/dist/{icon-badge-D5Ns7ndZ.js → icon-badge-DVPBQOKe.js} +3 -3
  33. package/dist/{icon-button-VzdqY_Tv.js → icon-button-C3wDxsh6.js} +12 -12
  34. package/dist/lib/components/ui/actions/action-card/action-card-semantics.d.ts +17 -1
  35. package/dist/lib/components/ui/actions/action-card/action-card.d.ts +16 -2
  36. package/dist/lib/components/ui/actions/action-card/partials/action-card-text.d.ts +6 -2
  37. package/dist/lib/components/ui/actions/action-card/partials/action-card-title-button.d.ts +15 -1
  38. package/dist/lib/components/ui/actions/action-card/partials/action-card-trail.d.ts +2 -1
  39. package/dist/lib/components/ui/collections/data-grid/columns/column-codec.d.ts +3 -3
  40. package/dist/lib/components/ui/collections/data-grid/columns/column-edit.d.ts +5 -5
  41. package/dist/lib/components/ui/collections/data-grid/columns/row-meta.d.ts +24 -0
  42. package/dist/lib/components/ui/collections/data-grid/grid-meta.d.ts +19 -6
  43. package/dist/lib/components/ui/collections/data-table/data-table.d.ts +1 -1
  44. package/dist/lib/components/ui/collections/data-table/layout-types.d.ts +27 -0
  45. package/dist/lib/components/ui/collections/data-table/partials/layouts/data-table-item-context.d.ts +2 -0
  46. package/dist/lib/components/ui/collections/data-table/partials/layouts/data-table-item-row.d.ts +8 -0
  47. package/dist/lib/components/ui/collections/data-table/types.d.ts +1 -1
  48. package/dist/lib/components/ui/collections/filter/bar/filter-bar-classes.d.ts +7 -2
  49. package/dist/lib/components/ui/collections/server-table/partials/server-table-band-classes.d.ts +5 -0
  50. package/dist/lib/components/ui/display/list-tile/internal.d.ts +1 -0
  51. package/dist/lib/components/ui/display/list-tile/partials/list-tile-dense-text.d.ts +28 -0
  52. package/dist/lib/components/ui/feedback/toast/toast-text.d.ts +7 -0
  53. package/dist/lib/components/ui/fields/contacts/placeholders.d.ts +1 -1
  54. package/dist/lib/components/ui/forms/index.d.ts +2 -0
  55. package/dist/lib/components/ui/forms/use-fast-form.d.ts +25 -0
  56. package/dist/lib/components/ui/forms/use-focus-on-refusal.d.ts +14 -0
  57. package/dist/lib/components/ui/layout/app-shell/activity-content-aside.d.ts +3 -1
  58. package/dist/lib/components/ui/layout/app-shell/activity-content.d.ts +10 -1
  59. package/dist/lib/components/ui/selection/switcher/partials/switcher-tooltip.d.ts +10 -2
  60. package/dist/lib/components/ui/selection/switcher/partials/switcher-trigger.d.ts +3 -1
  61. package/dist/lib/components/ui/selection/switcher/switcher.d.ts +1 -1
  62. package/dist/lib/components/ui/selection/switcher/types.d.ts +7 -0
  63. package/dist/lib/components/ui/widgets/native-charts/core/reference-text.d.ts +14 -6
  64. package/dist/lib/components/ui/widgets/native-charts/core/reference.d.ts +57 -10
  65. package/dist/lib/components/ui/widgets/native-charts/core/types.d.ts +13 -5
  66. package/dist/lib/components/ui/widgets/native-charts/hooks/chart-model-types.d.ts +3 -2
  67. package/dist/lib/components/ui/widgets/native-charts/index.d.ts +1 -1
  68. package/dist/lib/components/ui/widgets/native-charts/line-chart/line-chart-types.d.ts +6 -1
  69. package/dist/lib/components/ui/widgets/native-charts/line-chart/partials/reference-marks.d.ts +1 -1
  70. package/dist/lib/i18n/material-resources-registry.d.ts +21 -0
  71. package/dist/lib/i18n/resources/en/en.d.ts +4 -0
  72. package/dist/lib/i18n/resources/en/material.json.d.ts +5 -1
  73. package/dist/lib/i18n/resources/fr/fr.d.ts +4 -0
  74. package/dist/lib/i18n/resources/fr/material.json.d.ts +5 -1
  75. package/dist/lib/i18n/resources/resources.d.ts +8 -0
  76. package/dist/lib/i18n/translator.d.ts +1 -1
  77. package/dist/lib.js +1 -1
  78. package/dist/main.js +43 -43
  79. package/dist/map.js +8 -8
  80. package/dist/material.css +1 -1
  81. package/dist/pdf-reader.js +1 -1
  82. package/dist/print.js +2 -2
  83. package/dist/{public-D-J3nZFm.js → public-BoVE0ffh.js} +9 -9
  84. package/dist/{rich-code-block-Ig0ERAa2.js → rich-code-block-DAUM7Yh_.js} +5 -5
  85. package/dist/{sortable-provider-DfPkSN90.js → sortable-provider-BLXsGE_0.js} +2 -2
  86. package/dist/{spinner-KQb3YuR_.js → spinner-Rg4PnBPH.js} +1 -1
  87. package/dist/{stored-language-Cb9FMEwk.js → stored-language-B1lJMPbR.js} +10 -2
  88. package/dist/styles.css +1 -0
  89. package/dist/theme-picker.js +2 -2
  90. package/dist/{theme-toggle-BY-SpsFV.js → theme-toggle-jVdxF_mc.js} +1 -1
  91. package/dist/{toolbar-items-30w9rG5h.js → toolbar-items-BFY_hns5.js} +4 -4
  92. package/dist/{translate-material-BPl8TQLg.js → translate-material-q-JNxP1m.js} +2 -2
  93. package/dist/{translator-BnQXtpSZ.js → translator-BU1o3_l9.js} +1 -1
  94. package/dist/{use-chat-composer-BSKJRYMB.js → use-chat-composer-DGbDuIUa.js} +3758 -3716
  95. package/dist/{use-heading-spy-BgXA8uz6.js → use-heading-spy-CP63sAcS.js} +1 -1
  96. package/dist/{use-material-translation-ByM3gD9R.js → use-material-translation-nNF8fUXz.js} +2 -2
  97. package/dist/use-shape-morph-DXdy2X5g.js +35 -0
  98. package/docs/components/buttons-and-actions.md +30 -1
  99. package/docs/components/data-table-filter-and-lists.md +2 -2
  100. package/docs/components/navigation-and-layout.md +2 -1
  101. package/docs/components/rich-widgets.md +2 -1
  102. package/docs/components/selection-and-choice.md +21 -1
  103. package/docs/guides/app-shell.md +22 -0
  104. package/docs/guides/cards-and-tiles.md +40 -4
  105. package/docs/guides/charts.md +30 -2
  106. package/docs/guides/data-grid.md +80 -3
  107. package/docs/guides/forms.md +35 -0
  108. package/docs/guides/i18n.md +6 -2
  109. package/docs/guides/theming.md +8 -0
  110. package/docs/roadmap.md +85 -684
  111. package/docs/troubleshooting.md +36 -0
  112. package/lib/components/components.css +1 -5
  113. package/lib/components/theme-tokens.css +19 -15
  114. package/lib/components/ui/actions/action-card/action-card-tile.css +11 -2
  115. package/lib/components/ui/collections/data-table/data-table-items-record.css +27 -0
  116. package/lib/components/ui/collections/data-table/index.css +14 -0
  117. package/lib/components/ui/overlays/dialog/dialog.css +2 -1
  118. package/lib/components/ui/overlays/popover/popover.css +3 -2
  119. package/lib/styles.css +1 -0
  120. package/lib/themes/ambre.css +8 -6
  121. package/lib/themes/ardoise.css +8 -6
  122. package/lib/themes/bleumono.css +8 -6
  123. package/lib/themes/bluemoon.css +8 -6
  124. package/lib/themes/corail.css +8 -6
  125. package/lib/themes/foret.css +8 -6
  126. package/lib/themes/lavande.css +8 -6
  127. package/lib/themes/menthe.css +8 -6
  128. package/lib/themes/ocean.css +8 -6
  129. package/lib/themes/pink.css +8 -6
  130. package/lib/themes/prune.css +8 -6
  131. package/lib/themes/sable.css +8 -6
  132. package/lib/themes/slate.css +8 -6
  133. package/lib/themes/teal.css +8 -6
  134. package/package.json +4 -4
  135. package/dist/i18n-provider-BFNrM0Qu.js +0 -45
  136. package/dist/use-shape-morph-BKA_R5P5.js +0 -35
package/docs/roadmap.md CHANGED
@@ -6,6 +6,19 @@ version they shipped in, and planned entries may name the major they target.
6
6
 
7
7
  ## Now
8
8
 
9
+ - **Toast texts follow app translations** — the toast presets read the
10
+ app's `I18nProvider` `resources`, so an override under `material.*`
11
+ changes their wording ([#1855](https://github.com/softistx/nxgt-material/issues/1855)).
12
+ - **Smaller, easier-to-read components** — the library's own source is kept
13
+ to files under 200 lines and functions under 80, so a component is quicker to
14
+ read and to fix ([#1865](https://github.com/softistx/nxgt-material/issues/1865)).
15
+ - **DataGrid: one column, several kinds of row** — `meta.rowEditor(row)` picks
16
+ the built-in editor from the row, and `meta.options` and
17
+ `meta.number.decimals` take the row, so a result column can be a bounded
18
+ number, a pick among the row's own options or a text
19
+ ([#1892](https://github.com/softistx/nxgt-material/issues/1892),
20
+ [guide](guides/data-grid.md#one-column-several-kinds-of-row)).
21
+
9
22
  - **Dense pages on large screens** — a record's page shows more on a 1440 or
10
23
  1920 px screen instead of stretching the same fields. `DescriptionList` lays
11
24
  a record's fields in `auto-fill` columns (`minItem`, `maxColumns`, a `meta`
@@ -137,84 +150,89 @@ version they shipped in, and planned entries may name the major they target.
137
150
 
138
151
  ## Next
139
152
 
153
+ - **FilterBar "Add a filter" stays on its row** — the button no longer wraps
154
+ alone onto a second row on a desktop screen ([#1752](https://github.com/softistx/nxgt-material/issues/1752)).
155
+
140
156
  - **`ButtonGroup` standard look by default, and the old `Typography` names
141
157
  removed (4.0)** — `ButtonGroup`'s Material 3 Expressive look (`look="standard"`)
142
158
  becomes the default, with `look="legacy"` to keep the original group. The
143
159
  fifteen deprecated `Typography` variants (`huge-*`, `headline-larger`,
144
160
  `headline-large`... `caption`) are removed in favour of the type scale's
145
161
  names, once the other component families read the scale
146
- ([Typography](components/primitives.md#typography)).
162
+ ([Typography](components/primitives.md#typography)). Tracked in [#1872](https://github.com/softistx/nxgt-material/issues/1872).
147
163
 
148
164
  - **IconButton: `round` or `square` like Button** — a `shape` of `round` or
149
165
  `square` on `IconButton`, with the same press morph, beside the expressive
150
- shape names it takes today.
166
+ shape names it takes today ([#1450](https://github.com/softistx/nxgt-material/issues/1450)).
151
167
 
152
168
  - **DataGrid: row selection on phones** — the phone list gets the selection
153
169
  control the grid has with `enableRowSelection`: a checkbox per item and a
154
- select-all, with the same `rowSelection` state.
170
+ select-all, with the same `rowSelection` state. Tracked in [#1873](https://github.com/softistx/nxgt-material/issues/1873).
155
171
  - **Players that take children** — `MediaPlayer` and `AudioPlayer` accept
156
172
  children rendered inside the player's provider, so `MediaTranscript` and
157
173
  `useMediaPlayer` work next to a player without a `MediaPlayerHost`
158
174
  ([#1023](https://github.com/softistx/nxgt-material/issues/1023)).
159
175
  - **Connected date and time pickers** — the calendar or time picker of a
160
- date or time field opens connected to the field, as a `Select` list does.
176
+ date or time field opens connected to the field, as a `Select` list does
177
+ ([#1870](https://github.com/softistx/nxgt-material/issues/1870)).
161
178
  - **Your own tiptap and ProseMirror classes in custom features** — a subpath
162
179
  re-exporting the editor's own tiptap and ProseMirror classes, so a custom
163
180
  feature can use `instanceof` and build nodes with the editor's copy
164
- (additive).
181
+ (additive). Tracked in [#1874](https://github.com/softistx/nxgt-material/issues/1874).
165
182
  - **The built-in toolbars on `Toolbar`** — `DataTable`, `PdfReader`,
166
183
  `Calendar` and the notifications panel get one tab stop
167
184
  and arrow keys (the WAI-ARIA toolbar pattern), the shared look and overflow
168
- into a More menu.
169
- - **DataGrid, wave 2: rows and finding** — add and delete rows, filters inside
170
- the grid, and find and replace.
171
- - **DataGrid, wave 3: more cells and more context** — more cell types, grouped
172
- headers, conditional tints and comments on cells.
185
+ into a More menu. Tracked in [#1875](https://github.com/softistx/nxgt-material/issues/1875).
186
+ - **DataGrid: rows, finding and richer cells** — add and delete rows, filters
187
+ inside the grid, find and replace, more cell types, grouped headers,
188
+ conditional tints and comments on cells ([#1877](https://github.com/softistx/nxgt-material/issues/1877)).
173
189
  - **Segmented `Progress`** — a steps variant of the bar, for a quiz or a
174
- wizard: one segment per step, filled as the user moves through.
190
+ wizard: one segment per step, filled as the user moves through
191
+ ([#1868](https://github.com/softistx/nxgt-material/issues/1868)).
175
192
  - **Upload components in the Progress style** — `FileList`,
176
193
  `NetworkUploadField` and `S3UploadField` redesigned like the Progress upload
177
- example: a file tile with the name and percent above a wavy bar.
194
+ example: a file tile with the name and percent above a wavy bar
195
+ ([#1869](https://github.com/softistx/nxgt-material/issues/1869)).
178
196
  - **PDFs generated without React** — a framework-free engine on pdfkit replaces
179
197
  `@react-pdf/renderer`, so a document renders the same in React, Vue, Node, Bun
180
198
  and the browser. One data API, `definePdfDocument`, everywhere (the `Print*`
181
199
  JSX components leave later, see Later). Output is tagged for
182
200
  accessibility (PDF/UA), archival (PDF/A-3) and electronic invoicing (Factur-X,
183
- EN 16931). It also brings the items below.
201
+ EN 16931). It also brings the items below. Tracked in [#1878](https://github.com/softistx/nxgt-material/issues/1878); tagged output also [#1468](https://github.com/softistx/nxgt-material/issues/1468).
184
202
  - **Your brand on the page** — a print theme whose defaults follow the screen
185
203
  theme, and your own font files registered in one call (the font half ships:
186
204
  `registerPdfFont` and `theme.fonts` on the current renderer; the library
187
- bundles no fonts).
205
+ bundles no fonts). Tracked in [#1878](https://github.com/softistx/nxgt-material/issues/1878).
188
206
  - **QR codes, barcodes and charts in a PDF** — pass the value or the chart
189
- options and get vector output, no data URL to prepare.
207
+ options and get vector output, no data URL to prepare. Tracked in [#1878](https://github.com/softistx/nxgt-material/issues/1878).
190
208
  - **Rich text and Markdown in a PDF** — the rich-text editor's content and
191
- Markdown rendered as PDF headings, paragraphs, lists, tables and links.
209
+ Markdown rendered as PDF headings, paragraphs, lists, tables and links. Tracked in [#1878](https://github.com/softistx/nxgt-material/issues/1878).
192
210
  - **A live preview inside `PdfReader`** — `PdfReader` takes a document and
193
- renders it itself, refreshing a moment after its data stops changing.
211
+ renders it itself, refreshing a moment after its data stops changing. Tracked in [#1878](https://github.com/softistx/nxgt-material/issues/1878).
194
212
  - **Test helpers for generated PDFs** — read a generated PDF's text, page count
195
- and metadata in a unit test, without a browser.
213
+ and metadata in a unit test, without a browser. Tracked in [#1878](https://github.com/softistx/nxgt-material/issues/1878).
196
214
  - **Archive-ready PDFs** — PDF/A-3 output through one option (the PDF/A-1/2/3
197
215
  marker ships already through `conformance` on the current renderer), for invoices and
198
- records that must be kept.
216
+ records that must be kept. Tracked in [#1878](https://github.com/softistx/nxgt-material/issues/1878).
199
217
  - **Electronic invoices (Factur-X)** — an invoice PDF that carries its
200
218
  machine-readable data (EN 16931), built on archive-ready PDFs and the
201
- invoice template, for e-invoicing mandates such as France's.
219
+ invoice template, for e-invoicing mandates such as France's. Tracked in [#1878](https://github.com/softistx/nxgt-material/issues/1878).
202
220
  - **A PDF reader that annotates and fills forms** — the redesigned
203
221
  `PdfReader` (see Now) gains the rest of its plan: viewers add their own
204
222
  annotations (highlight, underline, pen, note, text, eraser), held as JSON in
205
223
  `value` / `onChange` and exportable into the PDF; fill AcroForms; hear the
206
224
  text read aloud; or switch to a reflowed text mode. Annotation export loads
207
225
  `pdf-lib` only when used. The same reader in `@nxgt/material-vue` is not
208
- planned until requested.
209
- - **Dark-mode previews** — each component preview also shown in the dark theme,
210
- so you can check contrast without running it.
211
- - **Previews that cannot go stale** — a CI check that fails when a story changes
212
- but its preview image does not, so the picture in the docs is the component
213
- you install.
226
+ planned until requested. Tracked in [#1878](https://github.com/softistx/nxgt-material/issues/1878).
227
+ - **Dark-mode previews** — each component preview in the docs is also shown in
228
+ the dark theme, so you can check contrast without running it ([#1866](https://github.com/softistx/nxgt-material/issues/1866)).
229
+ - **Previews that match the component** — the picture in the docs is always the
230
+ component you install, because a changed story cannot ship with its old
231
+ preview ([#1867](https://github.com/softistx/nxgt-material/issues/1867)).
214
232
  - **`ViewTabs`: saved views over the filter bar** — tabs of saved filters
215
233
  ("All", "My students") with a count each, using the filter bar's `counts`
216
234
  slot; the bar's `views` slot is planned with it. They are meant to replace
217
- the legacy `FilterPresets`.
235
+ the legacy `FilterPresets`. Tracked in [#1876](https://github.com/softistx/nxgt-material/issues/1876).
218
236
 
219
237
  ## Later
220
238
 
@@ -330,6 +348,42 @@ version they shipped in, and planned entries may name the major they target.
330
348
 
331
349
  ## Shipped
332
350
 
351
+ - **Dark cards that separate from the page ground (3.54.0)** — in dark mode, cards,
352
+ popovers and dialogs lift off the page ground (lighter surfaces and a `--card-edge`
353
+ hairline), light unchanged ([#1676](https://github.com/softistx/nxgt-material/issues/1676)).
354
+ - **Compact `ServerTable` tiles** — `renderTile` shows a compact `ListTile`
355
+ record row (`size="sm"` with chips) through `item.Row` ([#1766](https://github.com/softistx/nxgt-material/issues/1766)).
356
+ - **A compact `Switcher` trigger, `size="compact"`** — an icon-only round
357
+ button sized for the app bar's `titleAfter` slot, where the title already
358
+ names the current item; the chosen option stays in its accessible name and
359
+ tooltip ([#1789](https://github.com/softistx/nxgt-material/issues/1789)).
360
+
361
+ - **Toast and translation overrides, `I18nProvider` `resources`** (3.52.0) —
362
+ `I18nProvider` takes `resources`, the app's `mergeResources(...)` result,
363
+ and components read their `material.*` words from it, so an app
364
+ translation changes the wording, except the toast presets and the close
365
+ label ([#1855](https://github.com/softistx/nxgt-material/issues/1855)) ([#1840](https://github.com/softistx/nxgt-material/issues/1840)).
366
+ - **Fixes for empty and unstable cases** (3.52.0) — `Description` with only
367
+ `children` renders them ([#1641](https://github.com/softistx/nxgt-material/issues/1641)); `ChangeHistory` draws no empty
368
+ list for an entry without `changes` ([#1648](https://github.com/softistx/nxgt-material/issues/1648)); `useColumnHelpers`
369
+ keeps `columnHelper` stable across renders ([#1644](https://github.com/softistx/nxgt-material/issues/1644)); after a
370
+ throttled "Resend" the code field of `StepUpDialog` and `VerificationCode`
371
+ takes the focus.
372
+ - **A scroll cue that stays inside its tabs** (3.52.0) — the scroll cue of an
373
+ overflowing `TabsList` is clipped to the list and no longer takes taps aimed
374
+ at the content under it on a phone ([#1824](https://github.com/softistx/nxgt-material/issues/1824)).
375
+ - **A selection band on `ServerTable`** (3.51.0) — with `bulkActions` and
376
+ `filter`, the first selected row turns the filter band into a selection bar
377
+ in place: "N selected", the bulk actions and a tonal "Cancel"
378
+ ([#1718](https://github.com/softistx/nxgt-material/issues/1718)). A backdrop shape no longer flashes behind body text on a
379
+ reload ([#1720](https://github.com/softistx/nxgt-material/issues/1720)).
380
+ - **`StepUpDialog` `onRetry`** (3.50.0) — the dialog tells the app when the
381
+ user retries ([#1831](https://github.com/softistx/nxgt-material/issues/1831)). `PageFooter` takes `hideOnSinglePage`;
382
+ `IconButton` and `RowMenuTrigger` take a `label`; `effectiveConditions` and
383
+ `splitFilterErrors` are re-exported for a server loader; the touch hit areas
384
+ of `static` close buttons, a quick `switch` filter and the no-match state of
385
+ a filtered `ServerTable` are fixed.
386
+
333
387
  - **A status board of tiles** (3.49.0) — `ActionCard` gains `status` (a soft badge line),
334
388
  `meta` (one line, its tooltip only while clipped), a trailing `action` (a
335
389
  `RowMenu`, an `IconButton`) outside the press surface, and `variant="tile"`
@@ -351,7 +405,7 @@ version they shipped in, and planned entries may name the major they target.
351
405
  [Filter errors](components/data-table-filter-and-lists.md#filter-bar) ·
352
406
  [Troubleshooting](troubleshooting.md)
353
407
 
354
- - **Stepper and Timeline, expressive** — both have a new look by default, with
408
+ - **Stepper and Timeline, expressive** (3.47.0) — both have a new look by default, with
355
409
  the same props. `Stepper` shows the current step as a cookie, a completed one
356
410
  as a circle with a check and a failed one in the error container, joined by
357
411
  thick tracks that fill with a spring; below `sm` a header card ("Step 3 of
@@ -365,7 +419,7 @@ version they shipped in, and planned entries may name the major they target.
365
419
  twin is a `vue` issue.
366
420
  [Stepper](components/navigation-and-layout.md#stepper) ·
367
421
  [Timeline](components/data-display.md#timeline)
368
- - **Two-step verification** — the pieces every app rebuilt for a one-time
422
+ - **Two-step verification** (3.46.0) — the pieces every app rebuilt for a one-time
369
423
  code. `VerificationCode` is the form (app or e-mailed code, "Use a recovery
370
424
  code", resend, wrong with the tries left, expired, busy, locked, throttled
371
425
  with `retryAfter`: Resend waits, and waits again if it is answered throttled
@@ -381,7 +435,7 @@ version they shipped in, and planned entries may name the major they target.
381
435
  [VerificationCode](components/form-fields.md#verificationcode) ·
382
436
  [StepUpDialog](components/feedback-and-status.md#stepupdialog) ·
383
437
  [EnrolmentCard](components/data-display.md#enrolmentcard)
384
- - **One filter model: defaults, a scope, a refusal, `FilterBar`** — a filter
438
+ - **One filter model: defaults, a scope, a refusal, `FilterBar`** (3.28.0) — a filter
385
439
  field says what an absent value means and what role it plays, so a list can
386
440
  start narrowed and a page can keep a value the user never clears.
387
441
  `default` (values, or `'page'` with `defaults` from the loader) is shown but
@@ -397,658 +451,5 @@ version they shipped in, and planned entries may name the major they target.
397
451
  [A field's default](components/data-table-filter-and-lists.md#a-fields-default) ·
398
452
  [A scope field](components/data-table-filter-and-lists.md#a-scope-field) ·
399
453
  [Server lists in the URL](guides/server-lists-url.md)
400
- - **Display polish** — `Badge` is a status badge: a 20 px pill with the
401
- `label-sm` text and no hover, a `soft` variant (the tone's container under
402
- the tone's text, 4.5:1) and a `tone` prop for `soft` and `outlined`, taking
403
- your own tones too; `CountBadge` keeps its own size. `ListTile` with an
404
- `href` ends with a discreet chevron (`chevron={false}` opts out). `StatCard`
405
- gets a compact `size="sm"` tile and `EntityHeader` a `stats` prop that shows
406
- figures as these tiles. `Banner` takes `Alert`'s look. A footer `MenuItem`
407
- can be `display: 'icon'`, a round icon-only button with a tooltip, 44 px on
408
- a touch screen; the rail's active label is drawn in a darker primary so it
409
- reads 4.5:1 on every theme preset. `breadcrumb={false}` hides the trail, and
410
- so does a trail whose crumbs all render `null` (#1475). `Combobox` rows are
411
- touch-sized on a touch screen (#1474). The backdrop's shapes are hidden while
412
- they lie over the page's text or controls, never moved (#1478). Nothing
413
- changes in core. React only; the
414
- Vue port is a `vue` issue. Ships in 3.12.0.
415
- ([Data display](components/data-display.md),
416
- [App shell](guides/app-shell.md))
417
-
418
- - **Buttons and the type scale in Material 3 Expressive** — `Typography` takes
419
- the Material 3 scale (`display`, `headline`, `title`, `body`, `label`, each
420
- `lg`, `md` and `sm`, plus `emphasized`) as Tailwind tokens: `text-title-md`
421
- and `text-title-md-em` are utilities, and an app or a zone retunes a step
422
- with CSS variables. The former variants are deprecated aliases (their sizes
423
- changed) and the bare `h1` to `h6` read the scale. `Button` gains the `xl`
424
- (56 px) and `2xl` (96 px) sizes, `shape` `round` or `square` with a spring
425
- press morph, and `selected` (a toggle with an inverted shape and a solid
426
- fill); every button has a 2 px focus outline, a neutral disabled look and a
427
- 44 px hit area on a coarse pointer. `IconButton` gets `size` `xs` to `xl`
428
- and `width` `narrow`, `default` or `wide`, on Button's look and the shared
429
- toggle fill. `ButtonGroup` gets `look="standard"` (the pressed button widens,
430
- its neighbours give the width back) and a `size` its buttons share. Nothing
431
- changes in core. React only; the Vue port is a `vue` issue. 3.11.0.
432
- ([Buttons & actions](components/buttons-and-actions.md),
433
- [Typography](components/primitives.md#typography),
434
- [Type scale](guides/theming.md#type-scale))
435
-
436
- - **Icon backgrounds, celestial presets and illustrations** — `Background
437
- preset="icons"` draws a pattern of icons from the packs, `iconStyle` taking
438
- one style or a list and `iconMotif` choosing the layout.
439
- `IconSpritesProvider` serves the Font Awesome sprites from your own base (the
440
- package ships none). Four celestial presets (`eclipse`, `meteor-shower`,
441
- `ringed-planet`, `northern-lights`) and a `sky` overlay join the
442
- backgrounds. `Illustration` draws 12 base scenes, and the health and
443
- education sets (10 scenes each) come from their own subpaths,
444
- `@nxgt/material/illustrations/health` and
445
- `@nxgt/material/illustrations/education`; `IllustrationDefaults` sets the
446
- look once for a subtree. A theme can name an icon motif, and the theme
447
- picker's tile shows it. The teal preset's success hue is fixed (#1411).
448
- React only. 3.9.0. ([Icon motifs](guides/icon-motifs.md))
449
-
450
- - **Themes** (in the next prerelease) — 14 ready-made themes (Lavande, the
451
- default, then Océan, Forêt, Ambre, Ardoise, Corail, Menthe, Prune, Sable,
452
- Slate, Pink, Bleu mono, Blue moon and Teal) as stylesheets,
453
- `@import "@nxgt/material/themes/<name>.css"` after `styles.css`, each with
454
- light and dark and each also usable on a single element: `[data-nxgt-theme]`
455
- makes a zone that paints its own text. `NxgtThemeProvider`, `NxgtTheme` and
456
- `useThemeContext` in `@nxgt/material/themes` hold the registry and the
457
- persisted choice; `useTheme()` gains `themeName` and `setThemeName`, shared
458
- across components and tabs and hydration-safe. `Background` and
459
- `ActivityLayout` take the theme's background, and `ThemePicker`
460
- (`@nxgt/material/theme-picker`, with its opt-in `theme-picker.css`) is a
461
- radiogroup of theme tiles beside the light / dark / system control. Define
462
- your own with `defineTheme()` from one to three seed colours: the Vite
463
- plugin's `themes` option (or the `nxgt-theme` command) writes the CSS and
464
- typings and adds the boot script. The page is white in light and a shared
465
- night in dark for every theme (`neutrals: 'tinted'` brings back a tinted
466
- page). `Background` also draws a `moon` preset.
467
- Four behaviour changes: a wrapper that overrides `--color-*` no longer
468
- recolours utilities (set `--primary`, or use a theme), `ActivityLayout`
469
- `backdrop={false}` now draws a plain page, `class="dark"`, `data-theme="dark"`
470
- or a token such as `--primary:` on a sub-element now recolours the utilities
471
- below it, and the default page is white in light and a shared night in dark
472
- (see above). React only; the Vue port is on the Vue roadmap.
473
- ([Theming](guides/theming.md#themes), [Themes for your app](guides/themes.md))
474
-
475
- - **44 `Background` presets, and 22 motif shapes** — `Background` from
476
- `@nxgt/material/backgrounds` draws six light presets (`rays`, `halo`,
477
- `plasma`, `glass`, `ripples`, `blobs`), six geometry presets (`hexagons`,
478
- `circuit`, `graph-paper`, `checker`, `diagonal-checker`, `chevrons`), four
479
- textures discreet enough under body text (`paper`, `linen`, `concrete`,
480
- `marble`) and eight illustrated line-art scenes (`school`, `night-sky`,
481
- `bubbles`, `leaves`, `science`, `music`, `travel`, `sport`), beside the
482
- existing ones. The motif shapes grow from seven to 22 (`MOTIF_SHAPES_ALL`:
483
- `star`, `heart`, `hexagon`, `diamond`, `wave`, `zigzag`, `spiral` and eight
484
- Material 3 Expressive shapes such as `m3-flower`); the default stays the
485
- first seven, so existing backgrounds draw as before. The textures and the
486
- scenes cap `vivid` at the default intensity so body text stays readable.
487
- Every preset follows `tone`, `intensity` and the theme, is seeded where
488
- random, and moves only with `animated`. React only. 3.4.0.
489
- ([Backgrounds guide](guides/backgrounds.md))
490
-
491
- - **Tailwind 4 animation API** — `animate-*` classes in `styles.css`, pure CSS
492
- and completed by Tailwind IntelliSense, with the Material 3 Expressive
493
- springs and durations by default: entrances and exits (fade, slide, scale,
494
- pop, blur, flip, rotate, expand and collapse), attention seekers, loops and
495
- ambient motion (a skeleton `shimmer`, `marquee`, `float`…), stagger on a
496
- parent (`animate-stagger-100`, from `sibling-index()` or your own `--nx-anim-index`), text
497
- reveals, scroll-driven animation in native CSS (`animate-on-view`,
498
- `animate-scroll-progress`) and appear/disappear for popovers, dialogs and the
499
- `hidden` class. One set of modifiers tunes them all: duration, delay, ease,
500
- repeat, direction, fill and distance. Under reduced motion an entrance is a
501
- 150ms fade and attention, loops and scroll do not run. It sits next to
502
- `tw-animate-css` and Tailwind's own `animate-spin`, `animate-pulse`,
503
- `animate-bounce` and `animate-ping`, which it leaves alone. React only. The
504
- Storybook catalogue has a searchable Overview.
505
- ([Animations](guides/animations.md))
506
-
507
- - **3.0: React 19.3, a route transition, and the 2.x deprecations removed** —
508
- React 19.3 and React Router 8.5 are required peers. `ActivityLayout` animates
509
- route changes with React's `<ViewTransition>`, on by default
510
- (`routeTransition`, `false` to opt out); the browser-only parts, `clientOnly()`
511
- and a few hidden inputs, bail out with `use(browser())`, so the server HTML
512
- carries a client-render marker; and the Gallery's tile-to-lightbox morph
513
- runs on React's `<ViewTransition>` too. Removed, each with its replacement in
514
- [Migrating to 3.0](guides/migrating-to-3.md): the Nivo charts (use
515
- `@nxgt/material/charts`); `CodeEditor`, `CodeDiff` and the Moonlight helpers
516
- from the barrels (use `@nxgt/material/code-editor`); `StxPlayer` and
517
- `VideoPlayer` (use `MediaPlayer` and `AudioPlayer`); the classic `PdfReader`
518
- and its parts; `SelectChipField` and `SelectCardField` and their
519
- `*FormField`s (use `ChipGroupField` and `ChoiceCardGroup`); `EmptyState`'s
520
- `variant` (`kind` defaults to `empty`; use `ErrorState` for errors);
521
- `SplitButton`'s legacy props; `ContactItem`, `OpeningHoursItem` and
522
- `OpeningHoursSchema`; `CountryField`'s `singleDisplay="chip"`; `Switch`'s
523
- `data-filed`; `entry="button"` of the date and time fields and
524
- `TimePicker`'s `variant="inputs"`; and `ComboboxEmpty` without `items`.
525
- - **Native charts** — `@nxgt/material/charts` draws line, area, bar, pie,
526
- donut, gauge, radial bar, funnel, heat map, radar, scatter and a combo chart
527
- (bars, areas and lines on one or two axes) in SVG, with no chart library.
528
- Each is one tab stop with arrow-key point navigation and a live status, has
529
- a screen-reader summary, a "View data" table, a hide/isolate legend,
530
- `patterns` so colour is never the only cue, `onPointClick`, and series
531
- colours held to 3:1 marks and 4.5:1 labels in both themes. The line, area,
532
- bar and combo charts add `zoom` (a mini overview with a window and two
533
- slider handles) and a phone scroll that opens on the latest point. The
534
- light `--chart-4` is now a purple. Client-only, like `/editor`.
535
- ([Charts](guides/charts.md))
536
- - **Reference bands, thresholds and point tones on the line chart** — `bands`
537
- shade a range of the value axis, `thresholds` draw labelled lines, and
538
- `pointTone` rings the values that need a word (`toneLabels` gives the words).
539
- The words reach the tooltip, the live status, the summary (values outside a
540
- band, tone counts) and a tone column of "View data"; the axis grows to hold
541
- them and a zoom window keeps them right.
542
- ([Reading values against a reference](guides/charts.md#reading-values-against-a-reference))
543
-
544
- - **The page's title in the app bar, a text breadcrumb root and the tenant in the menu** —
545
- a route's `handle.title` (a node, or a function of the match like
546
- `handle.breadcrumb`; the deepest match wins) puts the page's title in the app
547
- bar: it is in the server HTML, it is the page's one `<h1>`, it is truncated
548
- with its full text as the `title` tooltip when cut off, and `ActivityContent`
549
- drops its own title while the bar has one (see [the page's title in the app
550
- bar](guides/app-shell.md#the-pages-title-in-the-app-bar)). The title has a
551
- stable `id` and `tabIndex={-1}`, `<main>` is labelled by it, and
552
- `usePageTitleFocus()` focuses it after a navigation. `handle.titleAfter` (or the
553
- `titleAfter` prop) puts a node, such as a record's `Switcher`, right after the
554
- title outside its `h1`, and `headerContext` a small tenant line after it from
555
- `md` up (see [a slot after the
556
- title](guides/app-shell.md#a-slot-after-the-title)).
557
- `breadcrumbRoot` on `ActivityLayout` (`root` on `AppBreadcrumb`) puts a text
558
- root crumb, resolved through the router's basename, in place of the home
559
- icon; and `context` on `ActivityLayout`, `AppHeader` and `AppSidebar` shows
560
- the tenant's name at the top of the phone's menu sheet, above the brand.
561
-
562
- - **PeriodCards** — consecutive date ranges, such as a
563
- school year's terms or sprints, as cards: the period that holds today is
564
- marked ("Current" and `aria-current="date"`), each card can be a link over
565
- its whole area, a footer keeps its own buttons, and the cards fill as many
566
- 14rem columns as fit (one on a phone). Its state and range text are in
567
- `@nxgt/material-core/periods`.
568
- Shipped in 2.41.0.
569
-
570
- - **Choice fields** — `ChipGroupField` and
571
- `ChoiceCardGroup`: one choice or several as chips or cards, a real radio
572
- group or group of checkboxes with one Tab stop, arrow keys, `max` with a
573
- reason, and 44px boxes on a touch screen. `OptionTile` takes the refined
574
- look (a tint, a start bar and a bold title when chosen), and
575
- `CheckboxGroup` and `RadioGroup` take a working `orientation`. The shared
576
- rules are in `@nxgt/material-core/choice-group`.
577
- Shipped in 2.41.0.
578
-
579
- - **Material 3 Expressive editors and toolbars** — `Toolbar` gains
580
- `selectedLook="morph"`: a pressed tool fills with the primary colour and
581
- widens into a pill, groups are connected, and overflow keeps room for the
582
- widening so pressing never folds a tool into More. `shape="round" | "pill"`
583
- picks the form per item, and an `IconButton` toggle morphs the same way. The
584
- quiet look is now a tonal pill. The editor presets take
585
- `look="expressive"` by default (`look="classic"` opts out): a floating pill
586
- and an Insert FAB offering the `/` menu's blocks on `DocumentEditor`, a
587
- vertical pill on the page layout's rail, a tonal head on `CompactEditor` and
588
- its form fields, connected tools and a squircle Send on `RichChatComposer`,
589
- and sans headings and a tonal sheet. `PdfReader` defaults to the expressive
590
- look as well, and `RichTextViewer` takes an opt-in `look="expressive"` to
591
- match the sheet. A dark code block stays readable under a nested `.dark`.
592
- Shipped in 2.40.0; a visual change for apps that keep the defaults.
593
- React only for now. [Rich widgets](components/rich-widgets.md),
594
- [Toolbar](components/buttons-and-actions.md#toolbar)
595
-
596
- - **Refined selection controls** — `Checkbox` and `Radio` draw their check and
597
- dot in with a round state layer (the radio is 20px, like the box); `Switch`
598
- is a 52x32 track with a thumb that grows and carries a check, with an opt-in
599
- `thumbIcons`; `Slider` has a thin masked track, a bar handle, stop dots and a
600
- value bubble (`formatValue`, `valueBubble`, `inverted`), and `size="large"`
601
- with an `icon` for a volume or a brightness. Menus, `Select`, `Combobox`,
602
- `Command`, the phone country menu, `Switcher` and the filter presets draw the
603
- same animated check and dot. Checkbox helper text is announced through
604
- `aria-describedby`, and the items of an invalid group show the error border.
605
- Shipped in 2.38.0. React only for now. [Form fields](components/form-fields.md#slider),
606
- [selection](components/selection-and-choice.md#checkbox)
607
-
608
- - **Tone tokens** — every tone now has a readable
609
- text colour (`--secondary-text`, `--success-text`, …), an opaque container
610
- (`--success-container`, …) and an on-colour, and `data-tone` hands a
611
- component the four values it needs (`--nxgt-tone`, `-on`, `-container`,
612
- `-text`). Your own tone needs only `--nxgt-tone`; the others are derived.
613
- `Shape`, `Fab`, `Avatar`, `StatCard` and the metric cards follow, with app
614
- tones. A calm zone (`data-density="calm"` on any container) fades the decorative
615
- tints inside it (shapes, avatar fallbacks, StatCards, the metric rank
616
- badge), with `data-density="expressive"` to opt back in; status chips and
617
- selection keep their colour. A coloured tonal `Chip` reads as a status (a
618
- stronger container, the label in the tone's text colour), and the active
619
- entry of the sidebar and the rail is drawn with tokens a theme can set
620
- (`--sidebar-active`, `-hover`, `-foreground`).
621
- [Guide](guides/theming.md#tones)
622
- Shipped in 2.38.0.
623
- - **A redesigned `PdfReader`** — `PdfReader` from the new
624
- `@nxgt/material/pdf-reader` draws pages with pdf.js directly (no `react-pdf`),
625
- a window of pages at a time: a docked header, a floating page pill, a rail
626
- and a panel with thumbnails, outline and search, `embedded`, `dialog`,
627
- `page` and `fullscreen` modes, single and two-page layouts (with a cover,
628
- and right to left), and `configurePdfReader` for pdf.js's worker and assets.
629
- Since 3.0 `/components` exports it as `PdfReader` and the classic react-pdf
630
- reader is removed.
631
- [Guide](guides/pdf-reader.md)
632
- Shipped in 2.38.0.
633
- - **DataGrid row selection and keyboard and touch resize** — `enableRowSelection` adds a leading column with a checkbox per
634
- row and a select-all, with the selection controlled or kept by the grid and
635
- the count announced. Alt+Left and Alt+Right resize a header's column from
636
- the keyboard, a touch screen gets a grip on the active header, and the
637
- frozen edge is a stronger line. [Guide](guides/data-grid.md#row-selection)
638
- Shipped in 2.38.0.
639
- - **One media player, video and audio** — `MediaPlayer` plays video or audio
640
- with captions, chapters, a transcript that follows the playback, thumbnails on
641
- hover, a playlist with shuffle and repeat, and resume where the viewer left
642
- off; `AudioPlayer` is an audio card or list row with a waveform.
643
- `MediaPlayerHost` keeps sound and video going across routes, docked in a bar
644
- or floating as `MediaPlayerMini`; `MediaPlayerLightbox` opens a video over
645
- the page; `MediaTranscript` lays the transcript out where you want it.
646
- Streams play through `@nxgt/material/media-hls` (an optional `hls.js` peer,
647
- loaded only when a stream needs it), with a quality menu. It runs under a
648
- strict CSP and is built for WCAG 2.2 AA, with a full keyboard.
649
- `StxPlayer` and `VideoPlayer` were removed in 3.0
650
- ([migrating](guides/migrating-to-3.md#stxplayer-and-videoplayer)). 2.38.0.
651
- ([Media players](guides/media.md))
652
- - **The filter bar: `Filter variant="bar"` and `"facets"`** — a query-driven
653
- list filter: the search, the active filters as chips, dashed quick-filter
654
- pills and toggles, "Add filter" (field, operator, value), locked conditions
655
- with a lock and no remove button, a facets panel beside the list
656
- (`variant="facets"`: collapsible FacetGroups sharing the bar's state), and a
657
- bottom sheet with staged apply and a "Show 24 results" count on a phone. All
658
- 18 field types (numbers, sliders, dates and times with relative presets,
659
- server-searched autocompletes, custom fields) edit in every surface. The
660
- query is plain data (`query`, `defaultQuery`, `onQueryChange`) that a route's
661
- loader parses and the page writes back with the URL codec in
662
- `@nxgt/material-core/filter`; `/` and `F` shortcuts you can turn off;
663
- one live region tells the settled count. The older `Filter` variants and
664
- `FilterChips` still work, now deprecated. Shipped in 2.37.0.
665
- [Filter bar](components/data-table-filter-and-lists.md#filter-bar) ·
666
- [Server lists in the URL](guides/server-lists-url.md)
667
- - **A server list driven by the URL: `ServerTable`** — a server-mode `DataTable` with the filter bar in its top band beside the page's optional title, its description line and its actions, the query, sort and cursor in the URL for any router, the empty page listing the filters as removable chips (and, for "nothing yet", a scene and an action), and one count announced. Shipped in 2.37.0.
668
- - **LocalizedTextFields** — one text in several
669
- languages: a fieldset with an input per language, the default as a
670
- placeholder with a reset button, `lang` and `dir` on each input, an error
671
- per language and for the group, and a record value with no key for an empty
672
- language. `primaryLanguages` keeps the main languages in view and folds the
673
- rest under "Other languages", which opens itself on an error. With
674
- `LocalizedTextFormField` for React Hook Form.
675
- Not in material-vue yet (#969).
676
- [Guide](components/form-fields.md#localizedtextfields)
677
- Shipped in 2.37.0.
678
- - **Your own tiptap and ProseMirror classes in custom features** — `@nxgt/material/editor/pm` re-exports the editor's own
679
- tiptap and ProseMirror (`Extension`, `Node`, `Plugin`, `PluginKey`,
680
- `TextSelection`, `Fragment`, `DecorationSet`...), so a custom feature's
681
- `instanceof` checks and the nodes it builds agree with the editor. It shares
682
- the editor's code instead of shipping a second copy (additive).
683
- [Guide](components/rich-widgets.md#a-custom-feature)
684
- Shipped in 2.36.0.
685
- - **A modern rich text editor** — `DocumentEditor` from
686
- `@nxgt/material/editor`, a client-only entry built on composable parts, a
687
- `useEditor` hook and feature kits you pick from, with a toolbar on `Toolbar`
688
- that folds what does not fit into "More". `layout="page"` is a sheet on a
689
- tinted surface with a tool rail, comments in the margin and a Write / Preview
690
- / Markdown switch. It reads and writes HTML, JSON and Markdown;
691
- `RichTextViewer` shows a saved document on the server;
692
- `CompactEditor` and `RichChatComposer` serve a comment or a chat message.
693
- Blocks move by a drag handle, with an outline, focus mode and find and
694
- replace; images and files upload through your `onUpload`; an `onAssist`
695
- function adds an AI assistant; comments are stored by your adapter; and
696
- several people edit one document through a Yjs provider you supply.
697
- `RichTextEditor` is rebuilt on the same engine and is deprecated
698
- ([migration](components/rich-widgets.md#migrating-from-richtexteditor)). 2.35.0.
699
- ([DocumentEditor](components/rich-widgets.md#documenteditor), [Formats](components/rich-widgets.md#formats), [RichTextViewer](components/rich-widgets.md#richtextviewer), [CompactEditor](components/rich-widgets.md#compacteditor), [Navigation](components/rich-widgets.md#navigating-a-long-document), [Upload](components/rich-widgets.md#uploading-media), [Assistant](components/rich-widgets.md#assistant-ai-hooks), [Comments](components/rich-widgets.md#comments), [Collaboration](components/rich-widgets.md#collaboration))
700
- - **Gallery and Carousel, Material 3 Expressive** — every `Gallery` preset
701
- gets the Material 3 look with no API change (softer corners that round on
702
- hover, a spring press, a picked or current tile marked by a tint, a start bar
703
- and a check badge, a visible focus ring, motion that stops under reduced
704
- motion); then carousel formats (multi-browse, hero, uncontained,
705
- full screen) with indicators and an accessible autoplay, in `Carousel` and in
706
- `Gallery`; `quilted` and `woven` layouts; tiles in Material shapes (opt-in `galleries.css`;
707
- without it the `xl` corner); and a
708
- lightbox with swipe-to-close, pinch zoom and a filmstrip. Motion and corner
709
- tokens come with it. 2.34.0.
710
- ([Theming](guides/theming.md#motion-and-shape-tokens), [Gallery](components/media-and-files.md#gallery-lightboxgallery-minigallery), [Carousel](components/media-and-files.md#carousel))
711
- - **Progress in Material 3 Expressive style** — `Progress` and `CircularProgress`
712
- redesigned: a rounded stroke, a gap, the track and a stop dot; opt-in `wavy`;
713
- `thickness`, eight `tone`s and a `buffer`; values that move on a spring and
714
- Material 3's indeterminate motion; server markup with no `style` attribute.
715
- `Progress`'s `pulse` and `asChild`, and `CircularProgress`'s `variant`
716
- (now `tone`), `strokeWidth`, `circleStrokeWidth`, `progressStrokeWidth` and
717
- `shape` are deprecated, still accepted
718
- ([Progress](components/feedback-and-status.md#progress)).
719
- Shipped in 2.33.0.
720
- - **DataGrid, wave 1: fill handle and column layout** — drag a cell's corner to copy or to continue a series, as
721
- Excel does (1, 2 gives 3, 4; "Devoir 1" gives "Devoir 2"; dates by the day,
722
- month or year), double-click it to fill down, or press Ctrl/Cmd+D and
723
- Ctrl/Cmd+R. Columns resize, hide and reorder from the header, with menu
724
- items for the keyboard and touch, a `DataGridColumnsMenu` for your toolbar,
725
- and a layout that is plain JSON your app persists. Column 0 and columns with
726
- `lockPosition` keep their place. [Guide](guides/data-grid.md)
727
- Shipped in 2.33.0.
728
- - **Expressive shapes** — `Shape` draws any of Material 3 Expressive's 35
729
- shapes (and a squircle) as a backdrop, an icon container or a mask for a
730
- photo, in eight tones and three variants, with an optical fit and a morph on
731
- a spring. `LoadingIndicator` is Material 3 Expressive's loading indicator, a
732
- shape morphing while it turns with no script. `Avatar` and `IconButton` take
733
- a `shape`; an `IconButton` that changes shape morphs, for a selected state.
734
- All of it is SVG, drawn on the server as in the browser, with no `style`
735
- attribute. Built on `@nxgt/material-core/shapes`.
736
- - **DataGrid** — an editable grid for data that is typed, pasted and saved:
737
- spreadsheet keys and a selected range, editors for text, numbers (with codes
738
- such as "abs"), options, dates and checkboxes, or your own, paste from Excel
739
- and Google Sheets, a fill, undo and redo, totals that follow unsaved edits,
740
- and saving per cell, per row or in a batch, with the version each value was
741
- read at so that two people editing one cell are told. Long grids render only
742
- what is in view, a phone gets a list of rows that open a panel, and a strict
743
- Content Security Policy works. 2.29.0.
744
- ([DataGrid guide](guides/data-grid.md))
745
- - **Background presets** — `Background` from `@nxgt/material/backgrounds` draws
746
- twenty presets: the gradient and the grain, the light family (`mesh`,
747
- `aurora`, `spotlight`, `bokeh`), the geometry family (`isometric`,
748
- `blueprint`, `dots`, `stripes`, `low-poly`, `topography`, `waves`) and the
749
- motif presets (`shapes`, `confetti-grid`, `constellation`, `halftone`,
750
- `truchet`, `floating`, `scatter-icons`), driven by the `motif` prop (`shapes`,
751
- `density`, `size`, `rotate`, `shapeFill`, `opacitySpread`). All of it is plain CSS and
752
- seeded SVG, so a strict CSP and SSR accept it; `animated` is opt-in and
753
- pauses when hidden or under reduced motion. 2.28.0.
754
- ([Backgrounds guide](guides/backgrounds.md))
755
- - **Empty and error states that look designed** — `EmptyState` with its
756
- `kind` (`empty`, `search`, `not-found`, `unauthorized`) and a new
757
- `ErrorState` (`generic`, `offline`, `maintenance`), each in two sizes
758
- (`default`, `compact`), with in-house inline SVG illustrations or your own in
759
- `illustration`. `ErrorState` is a `role="alert"` with a Retry action and
760
- collapsible technical details. The `DataTable` default (your `empty` prop
761
- still replaces it, and `emptyFiltered` covers a filter that hides every row),
762
- `CommandEmpty`, the gallery, the kanban board, chat and the other built-in
763
- empty states use them, and `PdfReader` shows an `EmptyState` or an
764
- `ErrorState` with Retry when there is no document or it fails to load.
765
- `variant` still works and is deprecated. 2.24.0.
766
- ([EmptyState](components/feedback-and-status.md#emptystate),
767
- [ErrorState](components/feedback-and-status.md#errorstate))
768
- - **Background presets, the base** — `Background` from `@nxgt/material/backgrounds`,
769
- a superset of the one in `/components`: `preset` (`gradient` or `grain`),
770
- `tone`, `intensity`, `animated` (drifts, and pauses while the page is hidden,
771
- the background is off screen or the user prefers reduced motion), `grain`,
772
- `seed` and `fill`. The SVG is built from plain data, so the server and the
773
- client render the same markup and a strict CSP accepts it. The stylesheets
774
- (`backgrounds.css`, `backgrounds/<preset>.css`) are opt-in.
775
-
776
- - **One Vite plugin for the whole setup** — `nxgtMaterial()` from
777
- `@nxgt/material/vite` and `@nxgt/material-vue/vite` (one implementation in
778
- `@nxgt/material-core/vite`) wires the library into a Vite app, each part on
779
- by default and each switchable off; the helpers that existed before stay
780
- exported ([Vite plugin guide](guides/vite-plugin.md), and the migration guide moves a hand-written setup over). You get:
781
- - `csp`: `mode: 'hash'` (default) writes the sha256 of every inline script
782
- and style to `dist/.vite/nxgt-csp.json` with the header, or `mode: 'nonce'`
783
- leaves a placeholder for `applyCspNonce`; zod's jitless script; a
784
- Report-Only header on the dev server. `createCspNonce()`, `cspPolicy()`
785
- and `cspHash()` ship in `@nxgt/material-core/csp`.
786
- - `fonts`: `katex` (fonts stay files) and `sans: 'inter'` (self-hosted Inter).
787
- - `styles`: a build that fails with the exact fix when the stylesheet import
788
- or React's `@source` line is missing.
789
- - `pdf`: pdfkit's standard fonts handled by the same plugin, with
790
- `bundle: true` for an SSR server with no `node_modules`. The Nuxt module
791
- calls `nxgtMaterial()` with the same `fonts`, `styles` and `pdf` options
792
- (`pdf.bundleStandardFonts` is deprecated for `pdf.bundle`) and adds zod's
793
- jitless script to the head on request; its CSP stays `nuxt-security`'s.
794
- - `NonceProvider`'s `nonce` is optional on the client (a client-only app gets the
795
- page's nonce from its first render; a hydrated app passes it on both sides).
796
- Shipped in 2.24.0.
797
-
798
- - **The app's brand, a header title and an account menu** — the app shell
799
- takes the app's `logo` and `name`: the logo alone in the collapsed rail,
800
- named by the app's name and shown as its tooltip, the logo and the name side
801
- by side expanded and in the phone's menu sheet, which now shows `brand` too;
802
- `headerTitle`, the context the app is in, right after the phone's menu
803
- button and truncated when long; and `AccountMenu`, the avatar button named
804
- "Account menu, <name>" that opens the account's name and e-mail, the app's
805
- links and a busy-aware Sign out (`onSignOut`).
806
-
807
- - **Rows a user adds, removes and reorders** — `RepeatableGroup` and
808
- `RepeatableGroupFormField` over the form library's field array: rows from
809
- `renderRow`, a list for assistive tech, Remove and move buttons named after
810
- the row ("Remove period 2"), `max` and `min`, an empty state, focus that
811
- follows each change, polite announcements, and the array's own error under
812
- the rows. One column on a phone. 2.19.0. `removable` and
813
- `removeDisabledReason` keep a row that cannot be removed, its Remove button
814
- `aria-disabled` and described by the reason.
815
-
816
- - **Signed-out pages and two-step verification** — `AuthCard`, the frame of a
817
- sign-in page (one `main`, the card's title its `h1`, a status or alert
818
- notice, safe-area padding); `EnrolmentSecret`, a TOTP enrolment's QR code,
819
- app link and key grouped by four; `RecoveryCodes`, one-time codes to copy,
820
- download or print alone, with an "I have saved these codes" confirmation
821
- (`saved` / `onSavedChange`) an app's router guard can follow. 2.17.0.
822
- - **Focus after a change, one submit at a time, errors worded by code** —
823
- `useFocusOnMount` focuses the heading of what replaced the content the user
824
- acted on; `useSubmitOnce` drops a double click or a second Enter until the
825
- request ends; `useCodeResolver` words a zod schema's errors in the page's
826
- language, a refinement's `params.code` in the app's own words. 2.17.0.
827
- - **Long forms in titled sections** — `FormSection`: a heading (an `h2`, or
828
- the level `titleAs` names), a description and actions, its fields in the form
829
- grid's columns and one column on a phone, a rule between sections, and a
830
- group a screen reader announces by its title. 2.17.0.
831
- - **A strict Content Security Policy** — a page that sends `script-src` with a
832
- nonce and no `'unsafe-eval'`, and `style-src-elem` with a nonce and no
833
- `'unsafe-inline'`, runs every component with no violation report:
834
- `NonceProvider` forwards the nonce to each component, the CSS the
835
- dependencies inject is in the stylesheet, zod is external and its schemas are
836
- built on first use, and the KaTeX fonts are files. The
837
- [Content Security Policy guide](guides/csp.md) has the policy. 2.14.0.
838
- - **An `Autocomplete` that searches a server** — `onSearch`, `debounceMs`, `minQueryLength`, `filter`, `loading`, `searchError`: a
839
- debounced search with an `AbortSignal` whose stale responses are dropped,
840
- a polite "Loading…" / "N results" announcement, and local matching that
841
- ignores accents ("e" finds "École"). 2.12.0.
842
- - **Toast actions that work everywhere** — `toasts.success(message, { action })`
843
- and every other preset take sonner's own call shape and keep their action,
844
- and a dialog a toast's action opens keeps the focus, then gives it back to
845
- where it was before the toast. 2.10.0.
846
-
847
- - **Tabs in two looks** — `underline`, the new default, whose bar slides to
848
- the active tab, and a neutral `segmented` pill; a list that scrolls
849
- sideways on a phone instead of widening the page, right-to-left, a visible
850
- focus ring, labels that read 4.5:1 in both themes, and an indicator that
851
- stops sliding under `prefers-reduced-motion`. `bar` and `line` still work,
852
- as deprecated aliases of `underline` and `segmented`. 2.9.0.
853
-
854
- - **Accessible by default** — error text in its own `--error-text` colour that
855
- reads 4.5:1 in both themes, the empty part of sliders and meters in a
856
- `--track` colour that reads 3:1, buttons, badges and status colours that
857
- reach WCAG contrast, animations that honour `prefers-reduced-motion`, the
858
- page behind a modal layer made `inert`, focus on the first invalid field
859
- after a failed submit, Escape that reaches the layer below while one
860
- closes, and a `Toaster` at the top of a phone whose toasts a tap does not
861
- pause and whose actions work over a dialog. 2.8.0.
862
- - **Fits a phone** — `DataTable` with no height cap by default (`maxHeight`
863
- when it should scroll in a box), a header row at every width, and wide
864
- columns that scroll sideways in one region a keyboard can reach; a `Button`
865
- never wider than its container (a long label ends in "…", or wraps with
866
- `wrap`); `OtpField` slots that shrink to fit a narrow card. 2.8.0.
867
- - **App shell links, landmarks and scrolling** — menu entries that are real
868
- links (middle-click, before hydration, `aria-current="page"`, your router's
869
- link through `linkComponent`), one `<main>` landmark, and a shell
870
- that lets the document scroll, with `scroll="container"` for a full-height
871
- screen. 2.8.0.
872
- - **DataTable server-side data** — hand the table one page from your loader
873
- (`manual`): no client paging or sorting, controlled sorting and selection by
874
- row id (`sorting`, `rowSelection`, `getRowId`), a footer with "41–60 of 133"
875
- and Previous / Next as links that work with no JavaScript (`pagination`,
876
- `DataTableServerFooter`, `footer`), and rows that link to their page
877
- (`getRowHref`, `onRowClick`, `linkComponent`). 2.7.0.
878
- - **TreeSelectField** — pick one or several items from a tree inside a form
879
- field, as chips when several, with an optional filter that keeps each match
880
- under its ancestors (`TreeSelectField`, `TreeSelectFormField`). 2.6.0.
881
- - **DateRangeField presets and time** — one-click ranges such as Today, Last 7
882
- days and This month, or your own, beside the calendar (`presets`), and a time
883
- of day on each end of the range (`withTime`). 2.6.0.
884
- - **FilePreview** — preview a file picked by its type, in one component: an
885
- image, a PDF in `PdfReader`, a video or audio file, the text of a text, JSON,
886
- CSV or Markdown file, or a card with a download link for anything else
887
- (`FilePreview`, `onError`). Safe on a server. 2.6.0.
888
- - **Spinner `light` colour renders** — a `Spinner` with `color="light"` shows
889
- its light ring, for loading states on dark or coloured surfaces. 2.5.0.
890
- - **Range filters announce their field name** — the slider thumbs and the
891
- `Min`/`Max` inputs of a `slider-range` or `number-range` filter are named
892
- after the field, so a screen reader says which range is changing. 2.5.0.
893
- - **Alert keeps long content inside** — a long title, description or unbroken
894
- string wraps inside the `Alert` instead of running past its edge. 2.5.0.
895
- - **Stepper: unique ids, announced steps and truncated titles** — two steppers
896
- on one page no longer share ids, a screen reader hears which step is current
897
- and whether each is done or in error, and a long step title truncates. 2.5.0.
898
- - **Layouts that hold long content** — `ListTile`, `StatCard` and `Banner`
899
- keep long titles, values and actions inside their box instead of overflowing.
900
- 2.5.0.
901
- - **The same exports as `@nxgt/material-vue`** — `Camera`, `NativeSelect`, the
902
- `InputOTP` parts, `PaginationFirst` and `PaginationLast`, `TableEmpty`,
903
- `DialogScrollContent` and `ToastAction`, `Button`'s sizes, and the
904
- `RadioGroupField`, `SliderField` and `SwitchField` names, so code moves
905
- between the two libraries without renaming. 2.5.0.
906
- - **DataTable loading and empty states** — skeleton rows while the data loads
907
- (the rows already shown stay in place, dimmed, during a refresh), the table
908
- announced as busy, and your own content when there are no rows, told
909
- whether a filter emptied it. 2.5.0.
910
- - **PDFs from a Next.js route handler in one line of config** —
911
- `withNxgtPrint(nextConfig)` from `@nxgt/material/next` adds what `/print`
912
- needs to `next.config.ts` — the library in `serverExternalPackages`, and
913
- pdfkit's fonts in the `output: 'standalone'` trace wherever your package
914
- manager installed them — merged with your own config. 2.4.0.
915
- ([printing](guides/printing.md#nextjs-serverexternalpackages-and-output-standalone))
916
- - **One copy of the framework-free code, shared with `@nxgt/material-vue`** —
917
- the PDF document model and renderer, the print formatters, the PDF file
918
- helpers, `PdfReader`'s page geometry, scroll spy and search, the
919
- `CurrencyField` decimals, the fields' blur rule and `pdfkitStandardFonts()`
920
- now come from `@nxgt/material-core`, which your install adds on its own.
921
- Every entry exports the same names with the same types, so nothing changes
922
- in your imports; a server bundled without `node_modules` bundles
923
- `@nxgt/material-core` too. 2.3.0.
924
- ([troubleshooting](troubleshooting.md#cannot-find-package-nxgtmaterial-core))
925
- - **Forms that validate on blur, and a lighter map entry** — every
926
- `*FormField` marks its field touched when focus leaves it, so
927
- `mode: 'onBlur'` and `'onTouched'` work; `@nxgt/material/map` no longer loads
928
- the rest of the library (about 0.4 MiB of static imports instead of 5.5 MiB).
929
- 2.2.0. ([forms](guides/forms.md#touched-on-blur))
930
- - **Accessible names, ids and focus across the catalogue** — every field is
931
- named by its label and says it is required on the element a screen reader
932
- lands on (the input, the picker's `combobox`, the slider thumbs, the group),
933
- with the asterisk drawn by CSS, so in no name or label text; groups are named
934
- by their question and describe their error instead of carrying `aria-invalid`
935
- where ARIA does not allow it; ids are generated rather than taken from a
936
- field's `name` or an option's `value`, so two forms on one page no longer
937
- collide; icon buttons, crumbs, carousel arrows, codes and the camera have
938
- names; and a dialog, sheet or drawer takes focus when it opens and gives it
939
- back when it closes. 2.2.0.
940
- ([upgrading](getting-started.md#220-ids-names-and-aria-invalid-moved))
941
- - **PdfReader, turned pages and a steady zoom** — a page the PDF turns
942
- (`/Rotate`) shows the right way up, the fit zoom settles once when the
943
- document opens instead of moving while you read, `onPageChange` also reports
944
- the page the reader moves to itself, links to websites open in a new tab
945
- (`externalLinkTarget`), the toolbar's tooltips show in fullscreen, the
946
- password field has a name, and a layout of your own opens bytes without
947
- detaching them. 2.2.0. ([PdfReader](components/media-and-files.md#pdfreader))
948
- - **One document model for React and Vue** — `@nxgt/material/print` renders
949
- documents written as plain data (`pdfDocument` and its builders,
950
- `definePdfDocument` templates, `dataTable` from column definitions) alongside
951
- the JSX components, and `@nxgt/material-vue/pdf` (0.22.0) renders the same
952
- model, so a template renders the same pages in both libraries (experimental:
953
- the model may still change in a minor release). 2.2.0.
954
- ([printing](guides/printing.md#documents-as-data))
955
- - **One call to a PDF file** — `downloadPdf` and `openPdf` in the browser (a
956
- blocked tab falls back to a download), `usePdfFile` for a preview that keeps
957
- up with its data, `pdfResponse` for a server route on Node or Bun, and
958
- `renderPdfBlob`, `renderPdfBuffer` and `renderPdfStream` for the file
959
- itself, so you never touch `@react-pdf/renderer`'s output API or leak an
960
- object URL. They also render documents written as plain data with
961
- `pdfDocument` and its builders (experimental). 2.2.0.
962
- ([printing](guides/printing.md#rendering-the-document))
963
- - **Tables from columns and rows** — `PrintDataTable` takes `columns` (label,
964
- width, alignment, formatter, total) and `rows`, stripes them, keeps each row
965
- whole, repeats the header on each page it crosses and closes with a totals
966
- row; `PrintKeyValue` prints one record as label and value pairs and
967
- `PrintMetric` a figure with its change. The `PrintTable` blocks you already
968
- use keep working as they are. 2.2.0.
969
- ([printing](guides/printing.md#tables-from-columns-and-rows))
970
- - **A page shell with page numbers** — `PrintDocument` sets page size,
971
- orientation, margins and metadata, repeats your header and footer on every
972
- page, prints "Page 2 of 5" in the document's language and can add a
973
- watermark; `PrintHeader` takes a logo image. 2.2.0.
974
- ([printing](guides/printing.md#the-page-shell-printdocument))
975
- - **`Stepper` without the SSR warning** — `Stepper` answers its screen-width
976
- question on the server like the other responsive components, so SSR logs
977
- stay clean and a desktop hydrates its server HTML without a mismatch.
978
- `TimeField`'s OK button follows the language. 2.2.0.
979
- ([SSR](guides/ssr.md#hydration))
980
- - **A PDF viewer that opens any source** — `PdfReader` opens a `Blob`, a
981
- `File`, an `ArrayBuffer` or a `Uint8Array` as well as a URL, or a URL with
982
- request headers (`{ url, httpHeaders }`), without reloading on every render;
983
- its zoom menu works from the keyboard and in fullscreen. 2.2.0.
984
- ([PdfReader](components/media-and-files.md#pdfreader))
985
- - **Amounts and dates in your locale** — `formatAmount` and `formatDate` take a
986
- locale and time zone, use each currency's own decimals (`{ fractionDigits: 2
987
- }` keeps two) and keep a date-only value on its day; `useFormatters()` binds
988
- them to the `I18nProvider` language and `createFormatters()` to a locale you
989
- pass, so a document rendered on a server reads like the screen. 2.2.0.
990
- ([printing](guides/printing.md#formatamount-and-formatdate))
991
- - **More built-in labels follow the language** — calendar navigation,
992
- the data table's selection checkboxes, filter presets and
993
- `Min`/`Max`, the spinner, scroll-to-top, upload `Retry`/`Remove`, the map's
994
- `You are here` and zoom buttons, icon-only close buttons, and the editor's
995
- slash menu (searchable in either language), font names and table alignment;
996
- then the filter's empty state and chips, breadcrumb and pagination names,
997
- `MessageCard`'s "Unread", the upload field's replace button and errors, the
998
- editor's placeholder and emoji buttons, `CircularProgress`, `StxPlayer`,
999
- `PaneLayoutPane`'s sheet title, `JsonViewer`'s "Empty JSON" and
1000
- `TimePicker`'s AM/PM. 2.2.0.
1001
- ([i18n](guides/i18n.md#the-material-namespace))
1002
- - **PdfReader fixes** — downloads finish in every browser and take the file name
1003
- you give instead of `document.pdf`, a protected PDF asks for its password and
1004
- says when it is wrong, Escape closes the search bar before the dialog around
1005
- the reader, `onPageChange` reports a page inside the document, A4 and
1006
- landscape pages fit the width or the page, search counts matches on pages you
1007
- have not scrolled to yet, the page number follows scrolling, the reader opens
1008
- on `initialPage`, and your editor no longer shows `PdfReader` as deprecated.
1009
- 2.2.0.
1010
- - **Form wrappers honour your `disabled` and `helperText`** — every
1011
- `*FormField` follows one rule: disabled when you pass `disabled` or the form
1012
- disables it, and your `helperText` shows until there is an error. Composite
1013
- fields (contacts, opening hours, attributes) show array-level errors. 2.2.0.
1014
- - **Formatted i18n fallbacks** — without an `I18nProvider`, components show
1015
- `Step 01` or `3 items`, not raw `{step}` placeholders. 2.2.0.
1016
- - **Server-safe `zodLocaleError`** — English Zod messages in the English
1017
- bundle, no throw on a server or with blocked storage, and your own
1018
- `storageKey`, language and translator. 2.2.0.
1019
- - **One shared theme** — every `useTheme()` reads one store, so code blocks and
1020
- editors follow a toggle straight away, and `ThemeToggle` no longer flashes the
1021
- server's guess while hydrating. 2.2.0.
1022
- - **Declaration files that always resolve** — a packed or linked build types
1023
- `react` like the npm one, instead of as `any`. 2.2.0.
1024
- - **Component documentation with previews** — every component has an entry with
1025
- a picture of how it renders, an example that compiles and the options that
1026
- matter, under the same twelve categories in the README and `docs/`. A forms
1027
- guide covers React Hook Form, Zod, composite values and server errors. 2.2.0.
1028
- - **`@nxgt/material/map`** — the leaflet map, markers, location field and
1029
- `useGeolocation` as an entry of this package, with leaflet as optional peers.
1030
- 2.1.0.
1031
- - **`formatAmount` and `formatDate` on the main entry** — no need to import the
1032
- print entry for two `Intl` helpers. 2.1.0.
1033
- - **Print as its own entry** — `@nxgt/material/print`, PDF dependencies as
1034
- optional peers, and `pdfkitStandardFonts()` for Vite. 2.0.0.
1035
- - **No phantom self-dependency** — installing the package no longer adds a
1036
- second copy of it to your lockfile. 1.16.6.
1037
- - **Importable in any node process** — `import '@nxgt/material'` no longer
1038
- throws at server boot. 1.16.5.
1039
- - **Gallery lightbox fits the viewport** — media is fitted instead of cropped.
1040
- 1.16.4.
1041
- - **Uniform gallery tiles** — media cropped to one aspect, restyled carousel
1042
- controls. 1.16.3.
1043
- - **Mention list closes on select** — in the chat composer. 1.16.2.
1044
- - **Modern emoji picker** — refreshed picker, with stories for emoji, mentions,
1045
- chat and markdown. 1.16.1.
1046
- - **`MentionList`** — mention suggestions with local search, for chat and the
1047
- rich text editor. 1.16.0.
1048
- - **Range filters in generated filter forms** — slider ranges and number ranges
1049
- rendered by the schema-driven filter fields: a `Filter` schema field with
1050
- `type: 'slider-range'` or `'number-range'` renders a two-thumb slider or a
1051
- `Min`/`Max` pair. 1.0.0.
1052
- ([filters](components/data-table-filter-and-lists.md))
1053
454
 
1054
- Older releases: the [version list on npm](https://www.npmjs.com/package/@nxgt/material?activeTab=versions).
455
+ Older releases: every earlier entry is in the [CHANGELOG](../CHANGELOG.md).