@nxgt/material 2.4.2 → 2.6.0

package/docs/components/overlays-and-menus.md

@@ -61,7 +61,32 @@ import {
 
 Parts: `Dialog`, `DialogTrigger`, `DialogContent`, `DialogHeader`,
 `DialogTitle`, `DialogDescription`, `DialogFooter`, `DialogClose`, plus
-`DialogOverlay` and `DialogPortal`.
+`DialogOverlay` and `DialogPortal`, and `DialogScrollContent`: a content for
+a dialog taller than the screen, which sits in a scrolling overlay with a
+margin instead of being clipped, and renders its own close button. It takes
+`DialogContent`'s props and moves and returns focus the same way.
+
+```tsx
+import { Button, Dialog, DialogScrollContent, DialogTitle, DialogTrigger } from '@nxgt/material/components';
+
+const clauses = Array.from({ length: 30 }, (_, i) => `Clause ${i + 1}. Either party may end the service with thirty days' notice.`);
+
+export function Terms() {
+	return (
+		<Dialog>
+			<DialogTrigger>
+				<Button>Read the terms</Button>
+			</DialogTrigger>
+			<DialogScrollContent>
+				<DialogTitle>Terms of service</DialogTitle>
+				{clauses.map((clause) => (
+					<p key={clause}>{clause}</p>
+				))}
+			</DialogScrollContent>
+		</Dialog>
+	);
+}
+```
 
 | Prop | Type | Default | Effect |
 | --- | --- | --- | --- |
@@ -105,7 +130,7 @@ export function RenameButton() {
 }
 ```
 
-**Storybook:** `Overlays & menus/Dialog` · **Vue:** `Dialog` (same parts), `DialogScrollContent`
+**Storybook:** `Overlays & menus/Dialog` · **Vue:** `Dialog` (same parts)
 
 ---
 

package/docs/components/primitives.md

@@ -516,11 +516,42 @@ import {
 ```
 
 Parts: `Table`, `TableHeader`, `TableBody`, `TableFooter`, `TableRow`,
-`TableHead`, `TableCell`, `TableCaption` — each takes its HTML element's props.
+`TableHead`, `TableCell`, `TableCaption` — each takes its HTML element's props
+— plus `TableEmpty`, a full-width row for "nothing here" (`colSpan`, default
+`1`; the content is centred):
+
+```tsx
+import { Table, TableBody, TableCell, TableEmpty, TableHead, TableHeader, TableRow } from '@nxgt/material/components';
+
+type Invoice = { id: string; amount: string };
+
+export function Invoices({ invoices }: { invoices: Invoice[] }) {
+	return (
+		<Table>
+			<TableHeader>
+				<TableRow>
+					<TableHead>Invoice</TableHead>
+					<TableHead className="text-right">Amount</TableHead>
+				</TableRow>
+			</TableHeader>
+			<TableBody>
+				{invoices.length === 0 && <TableEmpty colSpan={2}>No invoices yet.</TableEmpty>}
+				{invoices.map((invoice) => (
+					<TableRow key={invoice.id}>
+						<TableCell>{invoice.id}</TableCell>
+						<TableCell className="text-right">{invoice.amount}</TableCell>
+					</TableRow>
+				))}
+			</TableBody>
+		</Table>
+	);
+}
+```
+
 For sorting, paging and selection use `DataTable` on the
 [Data table, filter & lists](data-table-filter-and-lists.md) page.
 
-**Storybook:** `Primitives/Table` · **Vue:** `Table` (same parts), `TableEmpty`
+**Storybook:** `Primitives/Table` · **Vue:** `Table` (same parts)
 
 ---
 
@@ -562,7 +593,7 @@ Parts: `Tabs`, `TabsList`, `TabsTrigger`, `TabsContent`.
 | `onValueChange` (`Tabs`) | `(value: string) => void` | — | called when a trigger is selected |
 | `icon` (`TabsTrigger`) | `ReactNode` | — | shown before the label (above it on the phone in `bar`) |
 
-**Storybook:** `Primitives/Tabs` · **Vue:** `Tabs` (same parts)
+**Storybook:** `Primitives/Tabs` · **Vue:** `Tabs` (same parts, `variant="line"`)
 
 ---
 

package/docs/components/rich-widgets.md

@@ -372,7 +372,7 @@ function Config() {
 
 **Form wrapper:** `CodeEditorFormField` — `control` and `name`, see
 [forms](../guides/forms.md).
-**Storybook:** `Rich widgets/CodeEditor` · **Vue:** `CodeEditor`
+**Storybook:** `Rich widgets/CodeEditor` · **Vue:** `CodeEditor` (`options`), `CodeEditorFormField`
 
 ---
 

package/docs/components/selection-and-choice.md

@@ -10,7 +10,7 @@ value type each one writes. Everything is imported from
 
 | | Component | What it does |
 | --- | --- | --- |
-| <img src="../previews/selection-choice-select.webp" width="96" alt=""> | [Select](#select) | Select primitives with groups and labels |
+| <img src="../previews/selection-choice-select.webp" width="96" alt=""> | [Select](#select) | Select primitives with groups and labels, and a styled native `<select>` |
 | <img src="../previews/selection-choice-selectfield.webp" width="96" alt=""> | [SelectField](#selectfield) | Labelled select built from `options` |
 | <img src="../previews/selection-choice-combobox.webp" width="96" alt=""> | [Combobox](#combobox) | Base UI combobox primitives |
 | <img src="../previews/selection-choice-comboboxfield.webp" width="96" alt=""> | [ComboboxField](#comboboxfield) | Labelled, searchable single select |
@@ -23,6 +23,7 @@ value type each one writes. Everything is imported from
 | <img src="../previews/selection-choice-selectchipfield.webp" width="96" alt=""> | [SelectChipField](#selectchipfield) | Choice shown as chips |
 | <img src="../previews/selection-choice-transferlist.webp" width="96" alt=""> | [TransferList](#transferlist) | Two-pane picker |
 | <img src="../previews/selection-choice-sortablelist.webp" width="96" alt=""> | [SortableList](#sortablelist) | Reorderable list of strings |
+| <img src="../previews/selection-choice-treeselectfield.webp" width="96" alt=""> | [TreeSelectField](#treeselectfield) | Pick from a tree, single or multiple |
 | <img src="../previews/selection-choice-switcher.webp" width="96" alt=""> | [Switcher](#switcher) | Workspace or account switcher |
 
 ## Select
@@ -73,9 +74,32 @@ Parts: `Select`, `SelectTrigger`, `SelectValue`, `SelectContent`,
 | `SelectContent` `position` | `'popper' \| 'item-aligned'` | `'popper'` | below the trigger, as wide as it; `item-aligned` overlays it macOS-style |
 | `SelectTrigger` `size` | `'sm' \| 'default'` | `'default'` | trigger height |
 
-**Emits:** `string` through `onValueChange`. For a form, use `SelectField` /
-`SelectFormField`.
-**Storybook:** `Selection & choice/Select` · **Vue:** `Select` (same parts), `NativeSelect`
+`NativeSelect` is the browser's own `<select>` with the library's styling and
+chevron, for when the platform picker is what you want (long lists on a
+phone, no portal). Parts: `NativeSelect`, `NativeSelectOption`,
+`NativeSelectOptGroup`; `value` / `defaultValue` / `onChange`, `className`
+and every other attribute go to the `<select>`.
+
+```tsx
+import { NativeSelect, NativeSelectOptGroup, NativeSelectOption } from '@nxgt/material/components';
+import { useState } from 'react';
+
+export function Food() {
+	const [food, setFood] = useState('banana');
+	return (
+		<NativeSelect aria-label="Food" value={food} onChange={(event) => setFood(event.target.value)}>
+			<NativeSelectOptGroup label="Fruits">
+				<NativeSelectOption value="apple">Apple</NativeSelectOption>
+				<NativeSelectOption value="banana">Banana</NativeSelectOption>
+			</NativeSelectOptGroup>
+		</NativeSelect>
+	);
+}
+```
+
+**Emits:** `string` through `onValueChange` (`Select`), a change event
+(`NativeSelect`). For a form, use `SelectField` / `SelectFormField`.
+**Storybook:** `Selection & choice/Select` · **Vue:** `Select` (same parts), `NativeSelect` (same parts)
 
 ---
 
@@ -114,7 +138,7 @@ export function Framework() {
 **Emits:** `string`.
 **Form wrapper:** `SelectFormField` — `control` and `name`, see
 [forms](../guides/forms.md#the-pair) and [what each field emits](../guides/forms.md#what-each-field-emits).
-**Storybook:** `Selection & choice/SelectField` · **Vue:** `SelectField`, `SelectFormField`
+**Storybook:** `Selection & choice/SelectField` · **Vue:** `SelectField`, `SelectFormField` (`#option` slot for `renderOption`)
 
 ---
 
@@ -268,7 +292,7 @@ Parts: `Autocomplete`, `AutocompleteChips` (the chips row it uses in
 **Emits:** `string | null` in `single` mode, `string[]` in `multiple`.
 **Form wrapper:** `AutocompleteFormField` — `control` and `name`, see
 [forms](../guides/forms.md#the-pair) and [what each field emits](../guides/forms.md#what-each-field-emits).
-**Storybook:** `Selection & choice/Autocomplete` · **Vue:** `Autocomplete`, `AutocompleteFormField`
+**Storybook:** `Selection & choice/Autocomplete` · **Vue:** `Autocomplete`, `AutocompleteFormField` (generic; `#option`, `#selected-leading`, `#actions` slots)
 
 ---
 
@@ -297,7 +321,7 @@ the field's `name`, which two forms on one page shared).
 and `null` for indeterminate.
 **Form wrapper:** `CheckboxFormField` — `control` and `name`, see
 [forms](../guides/forms.md#the-pair) and [what each field emits](../guides/forms.md#what-each-field-emits).
-**Storybook:** `Selection & choice/Checkbox` · **Vue:** `Checkbox`
+**Storybook:** `Selection & choice/Checkbox` · **Vue:** `Checkbox`, `CheckboxFormField`
 
 ---
 
@@ -372,7 +396,10 @@ export function Plan() {
 ```
 
 Parts: `RadioGroup` (labelled, from `options`) and `RadioGroupItem` (one
-radio, for a hand-built layout).
+radio, for a hand-built layout). `RadioGroupField` is the same component under
+`@nxgt/material-vue`'s name (an alias, `RadioGroupFieldProps` for its props),
+so code reads the same in both libraries; neither name is deprecated, and the
+full naming alignment is planned for 3.0.
 
 | Prop | Type | Default | Effect |
 | --- | --- | --- | --- |
@@ -601,6 +628,82 @@ export function Ranking() {
 
 ---
 
+## TreeSelectField
+
+![TreeSelectField](../previews/selection-choice-treeselectfield.webp)
+
+A field that opens a `Tree` in a popover: pick one node, or several as chips,
+with an optional filter.
+
+The field is controlled only: it holds no value of its own. Pass `value` and update it in `onValueChange`;
+without it, a pick changes nothing on screen.
+
+```tsx
+import { TreeSelectField, type TreeNode } from '@nxgt/material/components';
+import { useState } from 'react';
+
+const regions: TreeNode[] = [
+	{
+		id: 'europe',
+		label: 'Europe',
+		children: [
+			{ id: 'france', label: 'France' },
+			{ id: 'spain', label: 'Spain' },
+		],
+	},
+	{ id: 'africa', label: 'Africa', children: [{ id: 'cameroon', label: 'Cameroon' }] },
+];
+
+export function Regions() {
+	const [value, setValue] = useState<string[]>(['france']);
+	return (
+		<TreeSelectField
+			label="Regions"
+			items={regions}
+			multiple
+			searchable
+			value={value}
+			onValueChange={setValue}
+		/>
+	);
+}
+```
+
+Single mode (no `multiple`): a pick closes the popover and the trigger shows
+the node's label. Multiple: the tree has checkboxes, and each pick is a
+dismissible `Chip` beside the trigger, its remove button named "Remove
+{label}" (`material.chip.dismiss-label`). The trigger is a `combobox`, named by
+the label, with `aria-expanded` and, while open, `aria-controls`. Opening moves
+focus into the filter, else into the tree on the pick (its branches unfolded);
+the tree keeps its own keys (arrows, Home / End, Enter / Space), ↓ from the
+filter enters it, and Escape closes the popover and hands focus back to the
+trigger.
+
+| Prop | Type | Default | Effect |
+| --- | --- | --- | --- |
+| `items` | `TreeNode[]` | — | required; `Tree`'s nodes: `{ id, label, icon?, trailing?, disabled?, children? }` |
+| `multiple` | `boolean` | `false` | checkboxes and chips; decides the `value` type |
+| `value` | `string \| null` / `string[]` | — | the picked id, or ids with `multiple` |
+| `onValueChange` | `(value: string \| null) => void` / `(value: string[]) => void` | — | per `multiple` |
+| `searchable` | `boolean` | `false` | a filter above the tree; each match stays under its ancestors, which open |
+| `placeholder` | `string` | "Select…" | shown while nothing is picked (`material.tree-select-field.placeholder`) |
+| `searchPlaceholder` | `string` | "Search" | the filter's placeholder and name (`material.tree-select-field.search`) |
+| `required` | `boolean` | — | the asterisk, and `aria-required` on the `combobox` |
+| `disabled` | `boolean` | — | disables the trigger and each chip's remove button |
+| `error` | `boolean` | — | error border, error helper text, `aria-invalid` on the `combobox` |
+| `id`, `aria-describedby`, `data-*` | | — | on the trigger: the label is `for` the `id`, the description follows the helper text's |
+
+Its copy is `material.tree-select-field.*`: `placeholder`, `search`, `empty` ("No
+match found.") and `selected` ("{count} selected", the trigger's text in
+multiple mode).
+
+**Emits:** `string | null` (single), `string[]` (multiple).
+**Form wrapper:** `TreeSelectFormField` — `control`, `name` and `multiple`, see
+[forms](../guides/forms.md#the-pair) and [what each field emits](../guides/forms.md#what-each-field-emits).
+**Storybook:** `Selection & choice/TreeSelectField` · **Vue:** `TreeSelectField`, `TreeSelectFormField`
+
+---
+
 ## Switcher
 
 ![Switcher](../previews/selection-choice-switcher.webp)

package/docs/guides/forms.md

@@ -116,7 +116,7 @@ export function PlanForm() {
 | --- | --- |
 | one input (`TextFormField`, `EmailFormField`, `TextareaFormField`, `SwitchFormField`, `CheckboxFormField`, …) | its input loses focus, as a native `blur` |
 | several controls (`PasswordFormField` and its eye button, `NumberFormField` and its steppers, `PhoneFormField`, `OtpFormField`, `SliderFormField` with two thumbs, `DurationFormField`, `RatingFormField`, `RadioGroupFormField`, `CheckboxGroupFormField`, `SelectChipFormField`, `SelectCardFormField`, `SortableListFormField`, `TransferListFormField`, `InlineEditFormField`, `AttributeValuesFormFieldSet`, …) | focus leaves all of them; moving between them is not leaving |
-| a picker (`SelectFormField`, `ComboboxFormField`, `AutocompleteFormField`, `CountryFormField`, `TimezoneFormField`, `ColorFormField`, `DateFormField`, `DateRangeFormField`, `TimeFormField`, …) | focus leaves the trigger **and** the popover it opened. Opening the popover, or picking in it, is not leaving; closing it hands focus back to the trigger, and the next Tab or click elsewhere is |
+| a picker (`SelectFormField`, `ComboboxFormField`, `AutocompleteFormField`, `TreeSelectFormField`, `CountryFormField`, `TimezoneFormField`, `ColorFormField`, `DateFormField`, `DateRangeFormField`, `TimeFormField`, …) | focus leaves the trigger **and** the popover it opened. Opening the popover, or picking in it, is not leaving; closing it hands focus back to the trigger, and the next Tab or click elsewhere is |
 | a dialog editor (`PostalAddressFormField`, `ContactsFormField`, `OpeningHoursFormField`, `AttributesFormField`, and `LocationFormField` from `@nxgt/material/map`) | focus leaves its buttons and the dialog they open. Closing the dialog hands focus back to the button that opened it |
 | an upload (`UploadFormField`, `NetworkUploadFormField`, `S3UploadFormField`, `ImageFormField`, `ImageS3FormField`, `FileListFormField`, `FileListS3FormField`) | focus leaves the drop zone and its buttons. Choosing a file in the browser's own dialog is not leaving |
 | `RichTextEditorFormField`, `CodeEditorFormField` | focus leaves the editor and its toolbar |
@@ -343,6 +343,7 @@ or fails validation.
 | `SelectChipField` · `SelectChipFormField` | same as `SelectCardField` | `''` / `[]` |
 | `TransferList` · `TransferListFormField` | `string[]`: the selected `value`s, in order | `[]` |
 | `SortableList` · `SortableListFormField` | `string[]`: the `value`s, in the user's order | `[]` |
+| `TreeSelectField` · `TreeSelectFormField` | `string \| null` (a node `id`). With `multiple`: `string[]`, in the order picked | `null` / `[]` |
 
 ### Media & files
 

package/docs/guides/i18n.md

@@ -195,16 +195,21 @@ The copy components render on their own comes from this namespace: empty
 states, dialogs, pickers, the rich-text editor's toolbar, menus, node dialogs,
 slash menu, font names and table-caption alignment
 (`material['rich-text-editor'].*`), the carousel arrows' screen-reader text,
-the camera, the autocomplete's `Add "…"` and empty state, the QR code and
+the camera's button, toggle and image (`material.camera.capture`, `captured`,
+`start` and `stop`), the autocomplete's `Add "…"` and empty state, the QR code and
 barcode accessible names, the calendar's navigation tooltips
 (`material.calendar.*`), the data table's selection checkboxes, the filter's
 presets and `Min`/`Max` fields, the `variant="4"` spinner's label,
 `ScrollToTop`, the network upload field's `Retry`/`Remove`, the map's
 `You are here` and zoom buttons, and the icon-only close button of
 `DialogClose`, `DrawerClose`, `SheetClose` and `SheetContent`'s
-`withCloseButton`. The other icon-only buttons are named from it too: the
+`withCloseButton`. A range `Slider`'s readout inputs read
+`material.slider.minimum` / `maximum` ("Minimum", "Maximum"), and a
+single value's input, when nothing names the slider, `material.slider.value`
+("Value", "Valeur"). The other icon-only buttons are named from it too: the
 `Sidebar` toggle (`material.sidebar.toggle`), the data table's row expander
-(`material.table.labels.toggle-row`), a chip's remove button — `Chip`,
+(`material.table.labels.toggle-row`), its loading status, "Loading data…" /
+"Chargement des données…" (`material.table.loading`), a chip's remove button — `Chip`,
 `ComboboxChip` and the `Autocomplete` chips, "Remove {label}"
 (`material.chip.dismiss-label`) — the `LocationPreview` trigger
 (`material.map.preview` / `preview-named`), and the delete button of the
@@ -217,7 +222,10 @@ reads `material.print.table.total` ("Total", "Total") for its totals row and
 unless you pass `totalLabel` or `emptyText`; a PDF does not see your
 app's provider, so pass `PrintDocument` its `language` (see
 [printing](printing.md#translating-built-in-strings-in-a-pdf)). The keys and the French
-are the same in `@nxgt/material-vue`, so one set of overrides fits both. Text
+are the same in `@nxgt/material-vue`, so one set of overrides fits both. Some
+keys are read there only, such as `material.confirm-dialog.form-failed` ("The form could
+not be loaded."), which `@nxgt/material-vue`'s `ConfirmationDialog` shows when
+its on-demand form fails to load. Text
 you pass yourself always wins over the translation: a `label`,
 `Autocomplete`'s `freeSoloLabel` and `empty`, the editor's `options.labels`,
 `QRCode`'s `title`, `Barecode`'s `aria-label`, `CarouselPrevious`/`CarouselNext`
@@ -246,11 +254,52 @@ sheet title on a phone (`material['pane-layout']['sheet-title']`);
 `JsonViewer`'s "Empty JSON" (`material['json-viewer'].empty`);
 `TimePicker`'s AM/PM (`material['time-picker'].am` / `pm`, "a.m." / "p.m." in
 French); and the names of `DurationField`'s inputs, "Hours" and "Minutes"
-(`material['duration-field']['hours-label']` / `minutes-label`). `material.pagination.first` / `last`,
-`material.carousel.roledescription` / `slide` and
-`material.attributes.buttons.add-option` are there for `@nxgt/material-vue`'s
-`PaginationFirst`, `PaginationLast`, carousel and attribute options, so the
-bundles hold the same keys. Your `placeholder`, `sheetTitle` and `aria-label` still
+(`material['duration-field']['hours-label']` / `minutes-label`); the status a
+`Stepper` step announces after its title, "Completed" or "Error"
+(`material.stepper.completed` / `error`, "Terminée" / "Erreur" in French); and
+the pagination buttons' names and text: `PaginationPrevious` /
+`PaginationNext`'s "Previous" / "Next" (`material.pagination.previous` /
+`next`), `PaginationFirst` / `PaginationLast`'s "First" / "Last"
+(`material.pagination.first` / `last`), `PaginationBar`'s "Page {page}" on
+each page button (`material.pagination.page`) and `PaginationEllipsis`'s
+"More pages" (`material.pagination.more`). `TreeSelectField`'s placeholder,
+search box, empty message and "{count} selected" follow the language too
+(`material['tree-select-field'].placeholder` / `search` / `empty` /
+`selected`; in French `selected` is an ICU plural, `{count, plural, …}`); the
+`placeholder` and `searchPlaceholder` props take precedence over them. The names of
+`TimePicker`'s inputs read `material.time-picker.hours` and
+`material.time-picker.minutes` ("Hours" / "Minutes", "Heures" / "Minutes").
+`DateRangeField`'s preset list is a group named by
+`material.date-range-field.presets` ("Presets", "Plages prédéfinies"); its
+built-in presets read `material.date-range-field.preset.today`,
+`material.date-range-field.preset.yesterday`,
+`material.date-range-field.preset.last-7-days`,
+`material.date-range-field.preset.last-30-days`,
+`material.date-range-field.preset.this-month`,
+`material.date-range-field.preset.last-month` and
+`material.date-range-field.preset.this-year` ("Today", "Yesterday", "Last 7
+days", "Last 30 days", "This month", "Last month", "This year"; "Aujourd’hui",
+"Hier", "7 derniers jours", "30 derniers jours", "Ce mois-ci", "Le mois
+dernier", "Cette année"), and with times its two groups
+`material.date-range-field.start-time` and `material.date-range-field.end-time`
+("Start time" / "End time", "Heure de début" / "Heure de fin"); its OK button
+reads `material.buttons.ok`. The label of a preset of your own is yours.
+`FilePreview`'s figure is named by `material.file-preview.label` ("Preview
+of {name}", "Aperçu de {name}"), with `material.file-preview.untitled`
+("Untitled file", "Fichier sans nom") as the name of a file that has none; it
+reads `material.file-preview.loading` ("Loading preview…", "Chargement de
+l’aperçu…") while it reads the file, `material.file-preview.error` ("This
+file could not be previewed.", "Impossible d’afficher l’aperçu de ce
+fichier.") when it cannot show it, `material.file-preview.download`
+("Download", "Télécharger") on its download link, and
+`material.file-preview.truncated` ("Showing the first {size} of this file.",
+"Seuls les premiers {size} de ce fichier sont affichés.") under a text cut
+by the size cap; the text or Markdown it shows scrolls in a region named by
+`material.file-preview.content` ("Contents of {name}", "Contenu de {name}").
+`material.carousel.roledescription` /
+`slide` and `material.attributes.buttons.add-option` are there for
+`@nxgt/material-vue`'s carousel and attribute options, so the bundles hold
+the same keys. Your `placeholder`, `sheetTitle` and `aria-label` still
 win.
 
 To format filter values yourself in the provider's language, pass

package/docs/guides/ssr.md

@@ -34,7 +34,9 @@ at import time would crash the server before it answers anything.
 - **Browser-only widgets render nothing on the server.** `PdfReader`,
   `PdfSidebar`, `PdfPageList`, `PdfThumbnailSidebar` and the mermaid diagrams
   inside `Markdown` load their dependency with `import()` and are wrapped in
-  `clientOnly`. They appear after hydration, with no mismatch.
+  `clientOnly`. They appear after hydration, with no mismatch. `Camera` is
+  `clientOnly` too: it has no lazy dependency, but `getUserMedia` has no
+  server side.
 - **Two entries are the exceptions, on purpose.** They are not in any barrel,
   and the build fails if another entry reaches their dependencies:
   - `@nxgt/material/print` reaches `@react-pdf/renderer` and pdfkit, whose

package/docs/roadmap.md

@@ -6,7 +6,16 @@ the version something shipped in.
 
 ## Now
 
-Nothing in progress right now; see Next.
+- **TreeSelectField** — pick one or several items from a tree inside a form
+  field, as chips when several, with an optional filter that keeps each match
+  under its ancestors (`TreeSelectField`, `TreeSelectFormField`).
+- **DateRangeField presets and time** — one-click ranges such as Today, Last 7
+  days and This month, or your own, beside the calendar (`presets`), and a time
+  of day on each end of the range (`withTime`).
+- **FilePreview** — preview a file picked by its type, in one component: an
+  image, a PDF in `PdfReader`, a video or audio file, the text of a text, JSON,
+  CSV or Markdown file, or a card with a download link for anything else
+  (`FilePreview`, `onError`). Safe on a server.
 
 ## Next
 
@@ -30,11 +39,14 @@ Nothing in progress right now; see Next.
   The `Switch` row's misspelt `data-filed` attribute goes too: select
   `[data-checked="true"]` instead. `DateField` / `DateRangeField` stop
   accepting a day rule as `disabled`: pass it as `disabledDays`.
+- **3.0: the same component names as `@nxgt/material-vue`** — the labelled
+  fields take the names both libraries share (`RadioGroupField`,
+  `SliderField`, `SwitchField`, today aliases of `RadioGroup`, `Slider` and
+  `Switch`), so code reads the same in React and Vue. Both names work until
+  then, and neither is deprecated yet.
 - **Multi-month calendar with custom caption** — the month, caption and grid
   slots together with `numberOfMonths` greater than one; today that combination
   is not supported.
-- **Range filters in generated filter forms** — slider ranges and number ranges
-  rendered by the schema-driven filter fields, not only by hand-written ones.
 - **Ready-made documents** — invoice, quote, receipt, report, certificate and
   label-sheet templates that take your data and return a document, their labels
   translated.
@@ -82,6 +94,28 @@ Nothing in progress right now; see Next.
 
 ## Shipped
 
+- **Spinner `light` colour renders** — a `Spinner` with `color="light"` shows
+  its light ring, for loading states on dark or coloured surfaces. 2.5.0.
+- **Range filters announce their field name** — the slider thumbs and the
+  `Min`/`Max` inputs of a `slider-range` or `number-range` filter are named
+  after the field, so a screen reader says which range is changing. 2.5.0.
+- **Alert keeps long content inside** — a long title, description or unbroken
+  string wraps inside the `Alert` instead of running past its edge. 2.5.0.
+- **Stepper: unique ids, announced steps and truncated titles** — two steppers
+  on one page no longer share ids, a screen reader hears which step is current
+  and whether each is done or in error, and a long step title truncates. 2.5.0.
+- **Layouts that hold long content** — `ListTile`, `StatCard` and `Banner`
+  keep long titles, values and actions inside their box instead of overflowing.
+  2.5.0.
+- **The same exports as `@nxgt/material-vue`** — `Camera`, `NativeSelect`, the
+  `InputOTP` parts, `PaginationFirst` and `PaginationLast`, `TableEmpty`,
+  `DialogScrollContent` and `ToastAction`, `Button`'s sizes, and the
+  `RadioGroupField`, `SliderField` and `SwitchField` names, so code moves
+  between the two libraries without renaming. 2.5.0.
+- **DataTable loading and empty states** — skeleton rows while the data loads
+  (the rows already shown stay in place, dimmed, during a refresh), the table
+  announced as busy, and your own content when there are no rows, told
+  whether a filter emptied it. 2.5.0.
 - **PDFs from a Next.js route handler in one line of config** —
   `withNxgtPrint(nextConfig)` from `@nxgt/material/next` adds what `/print`
   needs to `next.config.ts` — the library in `serverExternalPackages`, and
@@ -219,5 +253,10 @@ Nothing in progress right now; see Next.
   chat and markdown. 1.16.1.
 - **`MentionList`** — mention suggestions with local search, for chat and the
   rich text editor. 1.16.0.
+- **Range filters in generated filter forms** — slider ranges and number ranges
+  rendered by the schema-driven filter fields: a `Filter` schema field with
+  `type: 'slider-range'` or `'number-range'` renders a two-thumb slider or a
+  `Min`/`Max` pair. 1.0.0.
+  ([filters](components/data-table-filter-and-lists.md))
 
 Older releases: the [version list on npm](https://www.npmjs.com/package/@nxgt/material?activeTab=versions).