@nxgt/material 2.4.1 → 2.5.0

package/docs/components/form-fields.md

@@ -412,10 +412,41 @@ export function Code() {
 | `error` | `boolean` | — | error colour on the slots |
 | `id` | `string` | from `useId()` | the input's id, which the label points to; the generated one is the same on the server and the client |
 
+`InputOTP`, `InputOTPGroup`, `InputOTPSlot` and `InputOTPSeparator` are the
+parts `OtpField` is built from (`input-otp`), for a layout of your own — no
+label, no helper text:
+
+```tsx
+import { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot } from '@nxgt/material/components';
+import { useState } from 'react';
+
+export function Pin() {
+	const [pin, setPin] = useState('');
+	return (
+		<InputOTP aria-label="PIN" maxLength={4} value={pin} onChange={setPin}>
+			<InputOTPGroup>
+				<InputOTPSlot index={0} />
+				<InputOTPSlot index={1} />
+			</InputOTPGroup>
+			<InputOTPSeparator />
+			<InputOTPGroup>
+				<InputOTPSlot index={2} />
+				<InputOTPSlot index={3} />
+			</InputOTPGroup>
+		</InputOTP>
+	);
+}
+```
+
+`InputOTP` takes `input-otp`'s `OTPInput` props (`maxLength`, `value`,
+`onChange`, `pattern`, …) plus `containerClassName`; `InputOTPSlot` takes the
+`index` it shows; `InputOTPSeparator` is a `separator` with a dash, or your
+children.
+
 **Emits:** `string` (the digits typed so far).
 **Form wrapper:** `OtpFormField` — `control` and `name`, see
 [forms](../guides/forms.md#the-pair) and [what each field emits](../guides/forms.md#what-each-field-emits).
-**Storybook:** `Form fields/OtpField` · **Vue:** `OtpField`, `OtpFormField`, `InputOTP`
+**Storybook:** `Form fields/OtpField` · **Vue:** `OtpField`, `OtpFormField`, `InputOTP` (same parts)
 
 ---
 
@@ -478,7 +509,7 @@ import { InlineEdit } from '@nxgt/material/components';
 **Emits:** `string`, trimmed, on save only.
 **Form wrapper:** `InlineEditFormField` — `control` and `name`, see
 [forms](../guides/forms.md#the-pair) and [what each field emits](../guides/forms.md#what-each-field-emits).
-**Storybook:** `Form fields/InlineEdit` · **Vue:** `InlineEdit`
+**Storybook:** `Form fields/InlineEdit` · **Vue:** `InlineEdit`, `InlineEditFormField`
 
 ---
 
@@ -605,8 +636,16 @@ import { Slider } from '@nxgt/material/components';
 Each thumb (`role="slider"`) is named by an `aria-labelledby` or `aria-label`
 you pass, else by the label (a vertical slider does not show it, and it still
 names the thumbs); a range's thumbs add "Minimum" and "Maximum":
-`getByRole('slider', { name: 'Price Minimum' })`. `aria-invalid` (or `error`)
-goes on every thumb too, not on the root `span`.
+`getByRole('slider', { name: 'Price Minimum' })`. A labelled range is also a
+`role="group"` named by the label, and its readout inputs are named
+"Minimum" and "Maximum" (`material.slider.minimum` / `maximum`), so two range
+sliders are told apart. `aria-invalid` (or `error`) goes on every thumb too,
+not on the root `span`.
+
+`SliderField` is the same component under `@nxgt/material-vue`'s name (an
+alias, `SliderFieldProps` 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.
 
 **Emits:** `number[]`. `SliderFormField` stores a plain `number` when the
 form's value is a number, and `number[]` when it is an array — the default
@@ -656,6 +695,11 @@ while the switch is on, from `checked` or, uncontrolled, from `defaultChecked` a
 `[data-checked="true"]` (a bare `[data-checked]` also matches rows that are
 off). `data-filed` says the same and is deprecated: it goes in 3.0.
 
+`SwitchField` is the same component under `@nxgt/material-vue`'s name (an
+alias, `SwitchFieldProps` 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.
+
 **Emits:** `boolean`.
 **Form wrapper:** `SwitchFormField` — `control` and `name`, see
 [forms](../guides/forms.md#the-pair) and [what each field emits](../guides/forms.md#what-each-field-emits).

package/docs/components/media-and-files.md

@@ -19,6 +19,7 @@ them into a form.
 | <img src="../previews/media-files-pdfreader.webp" width="96" alt=""> | [PdfReader](#pdfreader) | Browser-only PDF reader with zoom, search, thumbnails and print |
 | <img src="../previews/media-files-stxplayer.webp" width="96" alt=""> | [StxPlayer](#stxplayer) | Video / audio player with a queue, captions and mini layout |
 | | [VideoPlayer](#videoplayer) | Deprecated alias of `StxPlayer` |
+| <img src="../previews/media-files-camera.webp" width="96" alt=""> | [Camera](#camera) | Webcam preview with a start / stop toggle and a still capture |
 | | [Print components](#print-components) | `PrintDocument` page shell and `@react-pdf/renderer` building blocks for PDF documents, and `downloadPdf`, `openPdf`, `usePdfFile` and `pdfResponse` to get the file |
 | <img src="../previews/media-files-map.webp" width="96" alt=""> | [Map](#map) | Leaflet map, markers and a location field (`@nxgt/material/map`) |
 
@@ -633,6 +634,51 @@ No preview: it is [`StxPlayer`](#stxplayer) under another name
 
 ---
 
+## Camera
+
+![Camera](../previews/media-files-camera.webp)
+
+Webcam preview with a start / stop toggle and a still capture.
+
+```tsx
+import { Camera } from '@nxgt/material/components';
+
+export function Webcam() {
+	return (
+		<div className="w-[640px]">
+			<Camera />
+		</div>
+	);
+}
+```
+
+It asks for camera permission when it mounts, lists the devices, streams on
+the toggle and shows the captured photo beside the preview; the stream is
+stopped on unmount. **It renders in the browser only, after mount**
+(`clientOnly`): on the server, and on the first client render, it renders
+nothing, so it is safe in an SSR page. `Camera` takes the props of a `div`
+(`className`, …) and has no callback: the capture stays inside the
+component. Each `Camera` keeps its own state.
+
+`Camera` renders its own parts and takes no children. The helpers it runs
+are exported, and the first three are what a webcam UI of your own needs
+(`<video>` + `getUserMedia`):
+
+| Export | What it is |
+| --- | --- |
+| `capturePhotoFromVideo(video, state)` | draws a `<video>` frame on a canvas (`captureSettings`: resolution, quality, format, mirror) and returns `{ capturedImage }` as a data URL, `{ alert }` on failure, `null` when not streaming or on the server |
+| `isCameraSupported()`, `requestCameraPermissions()`, `getCameraDevices()` | the browser checks the component runs |
+| `useCamera()`, `useCameraContext()` | the context `Camera`'s own parts read (`{ videoRef, canvasRef, streamRef, state, actions }`); they throw outside `Camera`, and `Camera` exposes no slot, so they serve its internals and tests, as in `@nxgt/material-vue` |
+| `createCameraStore(preloaded?)` | the Redux store each `Camera` creates for itself, for tests |
+
+Types: `CameraProps`, `CameraState`, `CameraActions`, `CameraContextValue`,
+`CameraAlert`, `CameraDeviceInfo`, `CaptureSettings`, `ImageFormat`,
+`CapturePhotoResult`, `CameraStore`.
+
+**Storybook:** `Media & files/Camera` · **Vue:** `Camera`, `useCamera`, `capturePhotoFromVideo` (`useCameraStore` for the store)
+
+---
+
 ## Print components
 
 No preview: these render PDF with `@react-pdf/renderer`, not DOM, so there is
@@ -892,10 +938,3 @@ Parts: `Map` (also exported as `MapComponent`), `Marker`, `LocationMarker`,
 
 **Form wrapper:** `LocationFormField` — see [forms](../guides/forms.md).
 **Storybook:** `Media & files/Map` · **Vue:** —
-
----
-
-## Not documented here
-
-`Media & files/Camera` exists in Storybook only: the `Camera` component is not
-exported from the package, so it has no entry on this page.

package/docs/components/navigation-and-layout.md

@@ -437,6 +437,11 @@ Parts: `Stepper`, `StepperIndicator` (the progress bar alone: `current`,
 | `onChange` | `(index: number) => void` | — | makes steps clickable |
 | `orientation` | `'horizontal' \| 'vertical'` | `'horizontal'` | vertical from `md` only; phones get the compact bar |
 | `renderStepLabel` | `(step, index) => ReactNode` | — | replaces the "Step n" caption |
+| `name` | `string` | — | the stepper's `data-pw` (`stepper` without it), and the prefix of each step's: `<name>-step-N` instead of `step-N` |
+
+Each step is an `<li>` with `data-pw="step-N"` (`<name>-step-N` with `name`),
+N counted from 0, for tests to select; the current step's button carries
+`aria-current="step"`, and a completed or failed step is announced as such.
 
 A server renders the desktop layout (every step), as does a hydrating client;
 a phone switches to the compact bar right after hydrating. A page rendered
@@ -550,7 +555,7 @@ On `DocPage`: `title`, `description`, `badge`, `crumbs`, `editHref`,
 `updatedAt`, and `copyPage` / `copyMarkdown` with `markdown` for the copy
 buttons.
 
-**Storybook:** `Navigation & layout/Doc`, `Navigation & layout/Doc/Api`, `Navigation & layout/Doc/Blocks` · **Vue:** `Doc`, `DocPage`, `DocTopbar`, `DocSidebar`, `DocToc`, `DocPager`, `DocSearch`, `DocChildCards`, `DocSeeAlso`, `DocEmpty`, `DocProgress`
+**Storybook:** `Navigation & layout/Doc`, `Navigation & layout/Doc/Api`, `Navigation & layout/Doc/Blocks` · **Vue:** `Doc`, `DocPage`, `DocTopbar`, `DocSidebar`, `DocNav`, `DocArticle`, `DocToc`, `DocPager`, `DocSearch`, `DocChildCards`, `DocSeeAlso`, `DocEmpty`, `DocProgress`, `DocLink`, `DefaultDocLink`, `DocCopyPage` (no `linkComponent`: `@navigate`)
 
 ---
 

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)
 
 ---
 

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`, `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 |
@@ -73,9 +73,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)
 
 ---
 
@@ -297,7 +320,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 +395,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 |
 | --- | --- | --- | --- |

package/docs/guides/i18n.md

@@ -195,16 +195,19 @@ 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"). 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
@@ -246,11 +249,14 @@ 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
+`PaginationFirst` / `PaginationLast`'s "First" / "Last"
+(`material.pagination.first` / `last`). `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,27 @@ the version something shipped in.
 
 ## Now
 
-Nothing in progress right now; see Next.
+- **Spinner `light` colour renders** — a `Spinner` with `color="light"` shows
+  its light ring, for loading states on dark or coloured surfaces.
+- **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.
+- **Alert keeps long content inside** — a long title, description or unbroken
+  string wraps inside the `Alert` instead of running past its edge.
+- **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.
+- **Layouts that hold long content** — `ListTile`, `StatCard` and `Banner`
+  keep long titles, values and actions inside their box instead of overflowing.
+- **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.
+- **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.
 
 ## Next
 
@@ -15,6 +35,12 @@ Nothing in progress right now; see Next.
 - **Previews that cannot go stale** — a CI check that fails when a story changes
   but its preview image does not, so the picture in the docs is the component
   you install.
+- **DateRangeField presets and time** — one-click ranges such as Today, Last 7
+  days and This month, and a time of day on each end of the range.
+- **TreeSelectField** — pick one or several items from a tree inside a form
+  field.
+- **FilePreview** — preview an image, PDF, video or text file, chosen by its
+  type, in one component.
 
 ## Later
 
@@ -30,11 +56,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.
@@ -219,5 +248,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).

package/docs/troubleshooting.md

@@ -77,6 +77,7 @@ words in your error.
 **Runtime**
 
 - [`must be used within` / `must be used inside` (context providers)](#must-be-used-within--must-be-used-inside)
+- [`Camera components must be used inside <Camera>`](#camera-components-must-be-used-inside-camera)
 - [`Clipboard is not available`](#clipboard-is-not-available)
 - [`Upload failed with status 403`](#upload-failed-with-status-403)
 - [`Network error during upload`](#network-error-during-upload)
@@ -94,6 +95,7 @@ words in your error.
 - [A test no longer finds a chip's remove button by the exact name `Remove`](#a-test-no-longer-finds-a-chips-remove-button-by-the-exact-name-remove)
 - [A test no longer finds a pagination, breadcrumb or other built-in label by its English name](#a-test-no-longer-finds-a-pagination-breadcrumb-or-other-built-in-label-by-its-english-name)
 - [A test no longer finds an icon badge by role `button`, or an `Icon` named "Icon {name}" inside a button](#a-test-no-longer-finds-an-icon-badge-by-role-button-or-an-icon-named-icon-name-inside-a-button)
+- [A button named "Icon plus Add" is now named "Add"](#a-button-named-icon-plus-add-is-now-named-add)
 - [`An invalid form control with name='…' is not focusable` (an `UploadField`)](#an-invalid-form-control-with-name-is-not-focusable)
 - [A `DateField` or `DateRangeField` with `disabled` still opens](#a-datefield-or-daterangefield-with-disabled-still-opens)
 - [An `id`, `aria-describedby` or `data-testid` on a `DateField`, `DateRangeField` or `TimeField` is not on the trigger](#an-id-aria-describedby-or-data-testid-on-a-datefield-daterangefield-or-timefield-is-not-on-the-trigger)
@@ -109,6 +111,7 @@ words in your error.
 - [`ConfirmDialog` buttons stay in English](#confirmdialog-buttons-stay-in-english)
 - [A `ConfirmationDialog` opened with `open` no longer closes](#a-confirmationdialog-opened-with-open-no-longer-closes)
 - [A menu item selected by `[data-variant=destructive]` stops matching](#a-menu-item-selected-by-data-variantdestructive-stops-matching)
+- [A `Stepper` step selected by `#step-N` stops matching](#a-stepper-step-selected-by-step-n-stops-matching)
 - [Keys typed right after opening a dialog, sheet or drawer land inside it](#keys-typed-right-after-opening-a-dialog-sheet-or-drawer-land-inside-it)
 
 **PDF reader**
@@ -1213,6 +1216,61 @@ function ActiveCount() {
 </FilterProvider>;
 ```
 
+### `Camera components must be used inside <Camera>`
+
+**When:** on render, from `useCamera()` or `useCameraContext()` called in a
+component of yours.
+**Why:** both read the context `Camera` provides to its own parts (the video,
+the capture button, the toggle). `Camera` renders those parts itself and takes
+no children, so no component of yours is ever below its provider: the hooks
+serve its internals, and throw anywhere else. A second copy of
+`@nxgt/material` gives the same message (see
+[Invalid hook call](#invalid-hook-call-hooks-can-only-be-called-inside-of-the-body-of-a-function-component)).
+**Fix:** render `<Camera />` as it is, or build your own webcam UI on the
+helpers, which need no provider:
+
+```tsx
+import { capturePhotoFromVideo, isCameraSupported } from '@nxgt/material/components';
+import { useEffect, useRef, useState } from 'react';
+
+const SETTINGS = { resolution: { width: 1280, height: 720 }, quality: 0.9, format: 'jpeg' as const, mirror: false };
+
+export function Snapshot() {
+	const video = useRef<HTMLVideoElement>(null);
+	const [photo, setPhoto] = useState<string | null>(null);
+
+	useEffect(() => {
+		if (!isCameraSupported()) return;
+		let stream: MediaStream | undefined;
+		let cancelled = false;
+		const stop = (s: MediaStream) => s.getTracks().forEach((track) => track.stop());
+		navigator.mediaDevices.getUserMedia({ video: true }).then((s) => {
+			// Unmounted before the permission prompt resolved: release the camera.
+			if (cancelled) return stop(s);
+			stream = s;
+			if (video.current) video.current.srcObject = s;
+		});
+		return () => {
+			cancelled = true;
+			if (stream) stop(stream);
+		};
+	}, []);
+
+	const capture = () => {
+		const result = capturePhotoFromVideo(video.current, { isStreaming: true, captureSettings: SETTINGS });
+		if (result?.capturedImage) setPhoto(result.capturedImage);
+	};
+
+	return (
+		<>
+			<video ref={video} autoPlay playsInline muted />
+			<button type="button" onClick={capture}>Capture</button>
+			{photo && <img src={photo} alt="Captured" />}
+		</>
+	);
+}
+```
+
 ### `Clipboard is not available`
 
 **When:** calling `copyToClipboard(value)` on a page served over plain `http`
@@ -1629,6 +1687,33 @@ If you passed an `IconButton` as `ConfirmationDialog`'s `icon`, pass the glyph
 alone and style the badge with `iconProps={{ variant, color }}`: the dialog
 already wraps it in a badge, and yours is now a button inside a `<span>`.
 
+### A button named "Icon plus Add" is now named "Add"
+
+**When:** after upgrading to 2.5.0, `getByRole('button', { name: 'Icon plus Add' })`
+(or any name that starts with "Icon {name}") finds nothing, or a
+`getByRole('img', { name: 'Icon plus' })` inside a `Button` that also has text.
+**Why:** an `Icon` is named "Icon {name}" by default, and a `Button` takes its
+name from its content, so a `Button` holding an `Icon` and the text "Add" was
+announced "Icon plus Add". A `Button` with text, an `aria-label` or an
+`aria-labelledby` now hides an `Icon` inside it (`aria-hidden="true"`), as a
+named `IconButton` already did. A `Button` holding only an `Icon` still reads
+it, since that is the only name it has; give it an `aria-label` instead. Text
+a component produces from its props (a translation component) is not seen:
+pass the button an `aria-label` then. Text inside an `aria-hidden` element
+(a decorative count, `<span aria-hidden="true">3</span>`) does not name the
+button either, so beside it the `Icon` stays named.
+**Fix:** select the button by its text:
+
+```ts
+await page.getByRole('button', { name: 'Add' }).click();
+```
+
+and name an icon-only button yourself:
+
+```tsx
+<Button aria-label="Add"><Icon name="plus" /></Button>
+```
+
 ### `An invalid form control with name='…' is not focusable`
 
 **When:** submitting a form with an empty `required` `UploadField`, before
@@ -1930,6 +2015,30 @@ render `data-variant="error"`, and both use the `error` colour.
 [data-slot='menubar-item'][data-variant='error'] { font-weight: 600; }
 ```
 
+### A `Stepper` step selected by `#step-N` stops matching
+
+**When:** after upgrading to 2.5.0, a test or a stylesheet that targets a
+step by its id — `#step-0`, `page.locator('#step-1')`,
+`document.getElementById('step-2')` — finds nothing.
+**Why:** every `Stepper` gave its steps the same ids, `step-0`, `step-1`, …,
+so two steppers on one page produced duplicate ids, which is invalid HTML and
+breaks any `aria-*` reference to them. Each id is now prefixed with one
+unique to its stepper (React's `useId`). The steps are also an `<ol>` of
+`<li>` now, and the current one carries `aria-current="step"`. A selector
+written against the old markup, such as `div[data-slot="stepper-step"]`,
+stops matching too, since a step is now an `li`: drop the tag
+(`[data-slot="stepper-step"]`).
+**Fix:** select by `data-pw`, which did not change — `step-N`, or
+`<name>-step-N` when you passed `name`:
+
+```ts
+await page.locator('[data-pw="step-1"]').click();
+// with <Stepper name="checkout" … />
+await page.locator('[data-pw="checkout-step-1"]').click();
+// or the current step
+await expect(page.locator('[aria-current="step"]')).toContainText('Shipping');
+```
+
 ### Keys typed right after opening a dialog, sheet or drawer land inside it
 
 **When:** after upgrading, a test (or code of yours) that opens a `Dialog`,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nxgt/material",
-	"version": "2.4.1",
+	"version": "2.5.0",
 	"license": "MIT",
 	"bugs": {
 		"email": "stevegires@gmail.com"

package/dist/flowDiagram-KWPJA3E3-PC80XOp8.js

@@ -1,17 +0,0 @@
-import "./src-CJ8DNrI1.js";
-import "./chunk-ZIGJFQKS-HDJ6e6OJ.js";
-import "./chunk-O7XYJQB3-C87zK8E5.js";
-import "./chunk-742MDFTN-nG_ROTnT.js";
-import "./chunk-MBY4JIJT-IA2XBafa.js";
-import "./chunk-7PRAP22T-DIiYRAce.js";
-import "./chunk-7INBJB4K-Dg64CbhT.js";
-import "./chunk-5DYCD2WN-Bqi3iL5i.js";
-import "./chunk-Z7XXMR3K-DcqSgI9Q.js";
-import "./chunk-GWA4HPMP-CmsxMX3A.js";
-import "./chunk-XXDRQBXY-Bq4sFnO2.js";
-import "./chunk-WEXAMYUT-C-QP0DFq.js";
-import "./chunk-UA2S7LBM-B0LGFGu3.js";
-import "./chunk-GNY47TPC-vOPvRE_8.js";
-import "./chunk-LNGE3PJU-DJjGTS7O.js";
-import { n as e } from "./chunk-7M6MHVWA-DEh1Crrc.js";
-export { e as diagram };