@nxgt/material-vue 0.23.3 → 0.24.0

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

@@ -521,6 +521,11 @@ step has no `icon`, and there is no separate `StepperIndicator`.
 | `active` | `number` | `0` | current step; its `description` is shown as helper text below, and in a hover tooltip on a decorative info icon |
 | `@change` | `(index: number) => void` | — | a step was clicked |
 | `orientation` | `'horizontal' \| 'vertical'` | `'horizontal'` | vertical from `md` only; phones get the compact bar |
+| `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.
 
 **Storybook:** `Navigation & layout/Stepper` · **React:** `Stepper`
 
@@ -629,11 +634,66 @@ const toc: DocTocItem[] = [{ id: 'what', title: 'What it is', level: 2 }];
 ```
 
 Parts: `Doc` (the shell), `DocPage` (header, content, see also and pager);
-the pieces it composes — `DocTopbar`, `DocSidebar`, `DocToc`, `DocPager`,
-`DocSearch`, `DocSeeAlso`, `DocChildCards`, `DocProgress`, `DocSkipLink`,
-`DocHeader`, `DocCopyMarkdown` — and `DocEmpty` for a 404.
+the pieces it composes — `DocTopbar`, `DocSidebar`, `DocNav`, `DocArticle`,
+`DocToc`, `DocPager`, `DocSearch`, `DocSeeAlso`, `DocChildCards`,
+`DocProgress`, `DocSkipLink`, `DocHeader`, `DocCopyPage`, `DocCopyMarkdown`,
+`DocLink` — and `DocEmpty` for a 404.
 `useDoc` / `provideDoc` / `useDocContext` expose the state for a shell of
-your own. Search, the phone sheet and the active heading live in a Pinia
+your own, built from those parts:
+
+```vue
+<script setup lang="ts">
+import { useRoute, useRouter } from 'vue-router';
+import {
+  DocArticle,
+  type DocNavItem,
+  DocLink,
+  DocNav,
+  provideDoc,
+  useDoc,
+} from '@nxgt/material-vue/components';
+
+const route = useRoute();
+const router = useRouter();
+
+const items: DocNavItem[] = [
+  {
+    id: 'start',
+    title: 'Start',
+    items: [
+      { id: 'intro', title: 'Introduction', href: '/docs' },
+      { id: 'install', title: 'Install', href: '/docs/install' },
+    ],
+  },
+];
+
+provideDoc(
+  useDoc({
+    items,
+    get pathname() {
+      return route.path;
+    },
+    onNavigate: (href) => router.push(href),
+  }),
+);
+</script>
+
+<template>
+  <div class="flex">
+    <DocNav class="w-64" />
+    <DocArticle>
+      <slot />
+      <DocLink href="/docs/install">Next: Install</DocLink>
+    </DocArticle>
+  </div>
+</template>
+```
+
+`DocLink` is an anchor that navigates through `onNavigate` for an internal
+`href` (an external one opens in a new tab); `DefaultDocLink` is the same
+anchor without the navigation. `DocCopyPage` (`title`) copies the title and
+the page URL; `DocArticle` is the `#doc-content` landmark the skip link and
+copy-as-markdown target. Search, the phone sheet and the active heading live in a Pinia
 store, so the app needs `app.use(createPinia())`.
 
 | Prop | Type | Default | Effect |
@@ -649,10 +709,10 @@ store, so the app needs `app.use(createPinia())`.
 On `DocPage`: `title`, `description`, `crumbs`, `editHref`, `updatedAt`,
 `copyPage` / `copyMarkdown` (default: shown) with `markdown` for the copy
 buttons, and a
-`#badge` slot. There is no `linkComponent` on `Doc` and no `DocCopyPage`
-export in Vue.
+`#badge` slot. There is no `linkComponent` on `Doc` in Vue: wire your
+router with `@navigate`.
 
-**Storybook:** `Navigation & layout/Doc`, `Navigation & layout/Doc/Api`, `Navigation & layout/Doc/Blocks` · **React:** `Doc`, `DocPage`, `DocTopbar`, `DocSidebar`, `DocToc`, `DocPager`, `DocSearch`, `DocChildCards`, `DocSeeAlso`, `DocEmpty`, `DocProgress`
+**Storybook:** `Navigation & layout/Doc`, `Navigation & layout/Doc/Api`, `Navigation & layout/Doc/Blocks` · **React:** `Doc`, `DocPage`, `DocTopbar`, `DocSidebar`, `DocToc`, `DocPager`, `DocSearch`, `DocChildCards`, `DocSeeAlso`, `DocEmpty`, `DocProgress`, `DocNav`, `DocArticle`, `DocLink`, `DefaultDocLink`, `DocCopyPage`
 
 ---
 

package/docs/components/primitives.md

@@ -557,10 +557,12 @@ const invoices = [{ id: 'INV001', amount: '$250.00' }];
 Parts: `Table`, `TableHeader`, `TableBody`, `TableFooter`, `TableRow`,
 `TableHead`, `TableCell`, `TableCaption` — each takes its HTML element's
 attributes — plus `TableEmpty`, a full-width row for "nothing here" (`colspan`
-defaults to `1`: set it to the column count). For sorting, paging and selection
+defaults to `1`: set it to the column count). The attributes you put on
+`Table` (`id`, `aria-*`, `style`, listeners) go on the `<table>`, not on its
+scrolling container; `class` too. For sorting, paging and selection
 use `DataTable` on the [Data table, filter & lists](data-table-filter-and-lists.md) page.
 
-**Storybook:** `Primitives/Table` · **React:** `Table` (same parts; no `TableEmpty`)
+**Storybook:** `Primitives/Table` · **React:** `Table` (same parts)
 
 ---
 

package/docs/components/rich-widgets.md

@@ -443,10 +443,11 @@ Monaco mounts on the client only.
 | `required` | `boolean` | — | the asterisk, and `aria-required` on Monaco's textarea (its `ariaRequired` option) |
 | `label` | `string` | — | shown above the editor, and the name of Monaco's textarea (its `ariaLabel` option) |
 
-There is no `options` pass-through and no form wrapper in Vue (React has
-`CodeEditorFormField`).
+There is no `options` pass-through in Vue yet.
 
-**Emits:** `update:modelValue` — `string`.
+**Emits:** `update:modelValue` — `string`; `languageChange` — `string`.
+**Form wrapper:** `CodeEditorFormField` (`name` plus the same props; the error
+message replaces `helper-text`), see [forms](../guides/forms.md#the-pair).
 **Storybook:** `Rich widgets/CodeEditor` · **React:** `CodeEditor`, `CodeEditorFormField`
 
 ---

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

@@ -105,7 +105,7 @@ const food = ref('banana');
 
 **Emits:** `update:modelValue` with the item value (`string` here). For a
 form, use `SelectField` / `SelectFormField`.
-**Storybook:** `Selection & choice/Select` · **React:** `Select` (same parts)
+**Storybook:** `Selection & choice/Select` · **React:** `Select` (same parts), `NativeSelect` (same parts)
 
 ---
 
@@ -263,35 +263,38 @@ field.
 
 ![Checkbox](../previews/selection-choice-checkbox.webp)
 
-Reka UI checkbox with an indeterminate state; pair it with a `Label`.
+Checkbox with label, helper text and an indeterminate state.
 
 ```vue
 <script setup lang="ts">
 import { ref } from 'vue';
-import { Checkbox, Label } from '@nxgt/material-vue/components';
+import { Checkbox } from '@nxgt/material-vue/components';
 
 const receipts = ref(true);
 </script>
 
 <template>
-  <div class="flex items-center gap-2">
-    <Checkbox id="receipts" v-model="receipts" />
-    <Label for="receipts">Email me receipts</Label>
-  </div>
+  <Checkbox v-model="receipts" label="Email me receipts" helper-text="Sent after every payment." />
 </template>
 ```
 
 | Prop | Type | Default | Effect |
 | --- | --- | --- | --- |
 | `v-model` / `default-value` | `boolean \| 'indeterminate'` | — | Reka UI checkbox state |
-| `disabled`, `required`, `name`, `value` | | — | as on a native checkbox |
+| `label` / `#label` slot | `string` | — | renders the box in a row with this label, which names and toggles it |
+| `helper-text` / `#helper-text` slot | `string` | — | a line under the label |
+| `class` | | — | the row when labelled, else the box |
+| `disabled`, `required`, `name`, `value`, `id` | | — | as on a native checkbox; a labelled box gets an id when it has none |
 
-Unlike React, `Checkbox` has no `label` / `helper-text` of its own, and there
-is no `CheckboxFormField`: bind `v-model` to a `useField` value, or use
-`CheckboxGroup` / `SwitchFormField`.
+Without `label` or `helper-text` it is the bare Reka UI box, as before: pair
+it with your own `Label`. The default slot replaces the check mark (its
+props give `state`, to draw a dash for `'indeterminate'`). Attributes such as
+`aria-*` always reach the box, not the row.
 
 **Emits:** `update:modelValue` with `boolean | 'indeterminate'`.
-**Form wrapper:** none — `useField` + `v-model`, see [forms](../guides/forms.md#the-pair).
+**Form wrapper:** `CheckboxFormField` (`name` plus the same props): an unset
+value shows as indeterminate, and an indeterminate value is written as `null`;
+the error message replaces `helper-text`. See [forms](../guides/forms.md#the-pair).
 **Storybook:** `Selection & choice/Checkbox` · **React:** `Checkbox`, `CheckboxFormField`
 
 ---
@@ -399,7 +402,7 @@ the layout wrapper): your own `aria-label` / `aria-labelledby` wins, and your
 **Emits:** `update:modelValue` with `string`.
 **Form wrapper:** `RadioGroupFormField` — `name` inside a vee-validate form, see
 [forms](../guides/forms.md#the-pair) and [what each field emits](../guides/forms.md#what-each-field-emits).
-**Storybook:** `Selection & choice/RadioGroup` · **React:** `RadioGroup`, `RadioGroupItem`, `RadioGroupFormField`
+**Storybook:** `Selection & choice/RadioGroup` · **React:** `RadioGroupField` (an alias of `RadioGroup`), `RadioGroup`, `RadioGroupItem`, `RadioGroupFormField`
 
 ---
 

package/docs/guides/forms.md

@@ -110,7 +110,7 @@ useForm({
 | a picker (`SelectFormField`, `DateFormField`, `TimeFormField`, `ComboboxFormField`, `CountryFormField`, …) | 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-vue/map`) | focus leaves its buttons and the dialog they open |
 | an upload (`UploadFormField`, `NetworkUploadFormField`, `ImageFormField`, `FileListFormField` and their S3 variants) | focus leaves the drop zone and its buttons. Choosing a file in the browser's own dialog is not leaving |
-| `RichTextEditorFormField` | focus leaves the editor and its toolbar |
+| `RichTextEditorFormField`, `CodeEditorFormField` | focus leaves the editor and its toolbar |
 | `FilterFormField` | the filter is applied (or on every change, with `live-update`) — not on blur |
 
 "Opened" means named by one of the field's controls as the popup it controls
@@ -344,7 +344,7 @@ or fails validation.
 | `ColorField` · `ColorFormField` | `string` (hex, `'#1e293b'`), written when a valid colour is committed | `''` |
 | `OtpField` · `OtpFormField` | `string` of up to `length` (default 6) characters | `''` |
 | `InputGroupField` · `InputGroupFormField` | `string` | `''` |
-| `InlineEdit` | `string`, written on save only. No form wrapper: bind it with `useField` | `''` |
+| `InlineEdit` · `InlineEditFormField` | `string`, written on save only | `''` |
 | `CountryField` · `CountryFormField` | `mode="single"` (default): ISO code `string \| null` (`'FR'`). `mode="multiple"`: `string[]` | `null` / `[]` |
 | `TimezoneField` · `TimezoneFormField` | IANA `string \| null` (`'Europe/Paris'`) | `null` |
 | `RatingField` · `RatingFormField` | `number`, `0` for no rating | `0` |
@@ -372,7 +372,7 @@ or fails validation.
 | `SelectField` · `SelectFormField` | `string` (an option `value`) | `''` |
 | `ComboboxField` · `ComboboxFormField` | `string \| null`; picking the selected option again clears it | `null` |
 | `Autocomplete` · `AutocompleteFormField` | `mode="single"` (default): `string \| null`. `mode="multiple"`: `string[]` | `null` / `[]` |
-| `Checkbox` | `boolean` (`'indeterminate'` / `null` for the third state). No form wrapper: use `SwitchFormField`, or bind it with `useField` | `false` |
+| `Checkbox` · `CheckboxFormField` | `boolean`; an indeterminate value is written as `null` | `false` (see [Traps](#traps)) |
 | `CheckboxGroup` · `CheckboxGroupFormField` | `string[]` | `[]` |
 | `RadioGroupField` · `RadioGroupFormField` | `string` | `''` |
 | `CheckCardField` · `CheckCardFormField` | `boolean`: `true` for the first card, `false` for the second | `false` |
@@ -391,6 +391,7 @@ or fails validation.
 | `FileListField`, `FileListS3Field` · `FileListFormField`, `FileListS3FormField` | `string[]` | `[]` |
 | `UploadField` · `UploadFormField` | a `File`, or `File[]` with `multiple`. Nothing is uploaded | `undefined` / `[]` |
 | `RichTextEditor` · `RichTextEditorFormField` | `string`: the editor's HTML | `''` |
+| `CodeEditor` · `CodeEditorFormField` | `string`: the source | `''` |
 | `LocationField` · `LocationFormField` (from `@nxgt/material-vue/map`) | `[lat, lng]`, rounded to 7 decimals | `null` |
 
 An upload field emits a **string** because it uploads as soon as a file is
@@ -400,8 +401,7 @@ handler sends it (with `convertToFormData` from `@nxgt/material-vue/lib`,
 for example).
 
 Not in `@nxgt/material-vue`: `FilesFormField` (use `NetworkUploadFormField`
-or `FileListFormField`) and `CheckboxFormField` / `InlineEditFormField` (see
-the rows above).
+or `FileListFormField`).
 
 ## Composite values
 
@@ -947,6 +947,15 @@ Type the schema as an array:
 z.object({ plan: z.array(z.string()).length(1, { error: 'Pick a plan' }) });
 ```
 
+**A checkbox with no initial value is indeterminate.** `CheckboxFormField`
+renders `undefined` as the indeterminate state (and writes `null` for it), as
+in `@nxgt/material`. A `validationSchema` alone gives it no initial value.
+Give it a boolean:
+
+```ts
+useForm({ initialValues: { terms: false } });
+```
+
 **A field re-mounted on every render loses its state.** A `:key` that changes
 on each render (`:key="Math.random()"`) mounts a new field every time: focus,
 the `PhoneField` draft and the `NumberField` text are lost as you type, and

package/docs/guides/i18n.md

@@ -280,7 +280,8 @@ checkboxes, the filter's presets and `Min`/`Max` fields, the `variant="4"` spinn
 `You are here` and zoom buttons, and the close button of dialogs, sheets and
 `DialogFooter`. 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, which the
+(`material.table.labels.toggle-row`), its loading status, "Loading data…" /
+"Chargement des données…" (`material.table.loading`), a `Chip`'s remove button, which the
 `Autocomplete` chips use ("Remove {label}", `material.chip.dismiss-label`),
 the `LocationPreview` trigger (`material.map.preview` / `preview-named`),
 `DurationField`'s inputs, "Hours" and "Minutes"
@@ -298,7 +299,10 @@ names and text, which reka-ui left in English (`material.pagination.first`,
 `previous`, `next`, `last`, `page`, and `more` for the ellipsis), and the
 `aria-label` of `Pagination` and `Breadcrumb` and the breadcrumb ellipsis's
 "More" (`material.pagination.label`, `material.breadcrumb.*`), and
-`DocHeader`'s breadcrumb (`material.doc.breadcrumb`); `CommandDialog`'s
+`DocHeader`'s breadcrumb (`material.doc.breadcrumb`); the status a `Stepper`
+step announces after its title, "Completed" or "Error"
+(`material.stepper.completed` / `error`, "Terminée" / "Erreur" in French);
+`CommandDialog`'s
 default title and description (`material.command.*`); the carousel's
 `aria-roledescription` (`material.carousel.roledescription` / `slide`); the
 filter's empty state and `+N more` chip (`material.filter.empty` / `more`) and

package/docs/guides/ssr.md

@@ -42,12 +42,14 @@ at import time would crash the server before it answers anything.
   | --- | --- |
   | `PdfReader`, `PdfSidebar`, `PdfPageList`, `PdfThumbnailSidebar` | `pdfjs-dist` runs `new DOMMatrix()` when it is imported |
   | `CodeEditor`, `CodeDiff` | Monaco |
+  | `CodeEditorFormField` | it renders `CodeEditor`, whose Monaco is client-only |
   | `Camera` | `getUserMedia` |
   | `StxPlayer` | media element APIs |
   | the charts (`BarChart`, `AreaChart`, `HeatmapChart`, …) | ECharts draws on a canvas it sizes from the DOM |
   | `ImageCropper` (its canvas) | canvas cropping |
   | `RichTextEditor` (its editor) | Tiptap / ProseMirror |
   | mermaid diagrams inside `Markdown` | mermaid renders in the browser; the rest of the Markdown renders on the server |
+  | `MermaidDiagram` | the same mermaid chart on its own, rendered in the browser |
 
 - **The map entry is importable, but draws in the browser only.**
   `@nxgt/material-vue/map` is its own entry because `leaflet` and

package/docs/roadmap.md

@@ -6,7 +6,31 @@ 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.
+- **Slider thumb follows the theme in dark mode** — the `Slider` thumb takes
+  the dark theme's colours instead of staying light. Vue only.
+- **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`** — a `Checkbox` with its own
+  `label` and `helper-text` (the bare box is unchanged) and
+  `CheckboxFormField`, `InlineEditFormField`, `CodeEditorFormField`,
+  `PaginationBar` with `paginationItems` and `PaginationLink`, `CopyValue`,
+  `MermaidDiagram`, and the `Doc` parts `DocArticle`, `DocNav`, `DocLink`,
+  `DefaultDocLink` and `DocCopyPage`, under the names they have in React.
+  ([forms](guides/forms.md#what-each-field-emits))
+- **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
 
@@ -14,6 +38,20 @@ Nothing in progress right now; see Next.
   their table header on every printed page, keep rows and totals whole, print
   their colours, and a `PrintPage` sets size and margins for `window.print()`.
   Vue only: `@nxgt/material`'s print blocks already produce a PDF.
+- **`StepperIndicator`, as in `@nxgt/material`** — the step markers on their
+  own, for a stepper laid out your way.
+- **The same options as `@nxgt/material`** — a generic `Autocomplete` and
+  `FilesFormField` typed by your items, a `ConfirmationDialog` that holds a
+  form, date fields that disable chosen days, `SliderField` ticks and
+  leading/trailing content, a presence status on `Avatar`, a logo in the QR
+  code, slots on `AccordionCard`, an option slot on `SelectField`, editor
+  options on `CodeEditor` and a line variant for `Tabs`.
+- **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
 
@@ -53,6 +91,8 @@ Nothing in progress right now; see Next.
 
 ## Not planned
 
+- **The `Combobox` primitive family** — `ComboboxFormField` covers forms; the
+  low-level `Combobox` parts stay in `@nxgt/material` only.
 - **The React library's state and form stacks** — widgets keep their state in
   per-instance Pinia stores (`defineLocalStore`), forms use vee-validate, the
   primitives Reka UI, the charts ECharts through `vue-echarts`, and routing

package/docs/troubleshooting.md

@@ -23,6 +23,7 @@ words in your error.
 - [A `Toc`, `Pager`, `SeeAlso` or `ScrollProgress` inside `Doc` selected by `data-slot` stops matching](#a-toc-pager-seealso-or-scrollprogress-inside-doc-selected-by-data-slot-stops-matching)
 - [A `ResponsiveButton` selected by `[aria-expanded]` stops matching](#a-responsivebutton-selected-by-aria-expanded-stops-matching)
 - [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)
 - [A test no longer finds a date or time picker by the `button` role, or a slider thumb by the exact name `Minimum`](#a-test-no-longer-finds-a-date-or-time-picker-by-the-button-role-or-a-slider-thumb-by-the-exact-name-minimum)
 - [An end-to-end test no longer finds a required field by a name ending in `*`](#an-end-to-end-test-no-longer-finds-a-required-field-by-a-name-ending-in-)
 - [A test no longer finds `aria-invalid` on an upload field's group or drop zone](#a-test-no-longer-finds-aria-invalid-on-an-upload-fields-group-or-drop-zone)
@@ -30,6 +31,7 @@ words in your error.
 - [A test no longer finds the breadcrumb's home button](#a-test-no-longer-finds-the-breadcrumbs-home-button)
 - [A `QRCode`'s `aria-label` is no longer on its wrapper](#a-qrcodes-aria-label-is-no-longer-on-its-wrapper)
 - [A `CheckboxGroup` or `RadioGroupField` option selected by `#<id>-<value>` stops matching](#a-checkboxgroup-or-radiogroupfield-option-selected-by-id-value-stops-matching)
+- [A `Table`'s `id`, `aria-*` or `style` is no longer on its scrolling container](#a-tables-id-aria--or-style-is-no-longer-on-its-scrolling-container)
 
 **SSR & build**
 
@@ -100,6 +102,7 @@ words in your error.
 - [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 a chip's remove button by the exact name `Remove`, or a `LocationPreview` by its place name](#a-test-no-longer-finds-a-chips-remove-button-by-the-exact-name-remove-or-a-locationpreview-by-its-place-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)
 - [An `id`, `aria-describedby` or `data-testid` on a `DateField`, `DateRangeField` or `TimeField` is nowhere in the page](#an-id-aria-describedby-or-data-testid-on-a-datefield-daterangefield-or-timefield-is-nowhere-in-the-page)
 - [A test no longer finds the label or helper text inside a date or time picker's trigger](#a-test-no-longer-finds-the-label-or-helper-text-inside-a-date-or-time-pickers-trigger)
@@ -401,6 +404,30 @@ menubar colour had no token, so Tailwind generated nothing).
 [data-slot='dropdown-menu-item'][data-variant='error'] { font-weight: 600; }
 ```
 
+### A `Stepper` step selected by `#step-N` stops matching
+
+**When:** after upgrading to 0.24.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 (Vue'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`: `step-N`, or `<name>-step-N` when you passed
+`name` — the same values as in `@nxgt/material`, now on each step here too:
+
+```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');
+```
+
 ### A test no longer finds a date or time picker by the `button` role, or a slider thumb by the exact name `Minimum`
 
 **When:** after upgrading to 0.22.0, a spec such as
@@ -535,6 +562,36 @@ which a `group` may not carry: assert its description instead,
 hidden hint sits inside the helper element, so match its text with
 `getByText('Pick any.', { exact: false })` or the description with a RegExp.
 
+### A `Table`'s `id`, `aria-*` or `style` is no longer on its scrolling container
+
+**When:** after upgrading, either:
+
+- a selector or listener aimed at the attributes you put on `<Table>` finds
+  nothing on `div[data-slot="table-container"]` (`#orders` matches the
+  `<table>` instead, `[data-testid]` / `[aria-label]` queries return the
+  table, a `@scroll` listener on `<Table>` never fires); or
+- a `style` such as `max-height` on `<Table>` no longer limits the height,
+  and the table stops scrolling.
+
+**Why:** `Table` passed every attribute but `class` to its scrolling
+container. It now puts them on the `<table>`, as `@nxgt/material` does, so
+`aria-busy`, `aria-label` or `id` describe the table itself. A
+`max-height` on a `<table>` has no effect: the table grows instead of
+scrolling.
+**Fix:** select the container by its slot, or the table by role, and put a
+height limit on a wrapper of your own:
+
+```vue
+<div class="max-h-96 overflow-auto">
+  <Table aria-label="Orders">…</Table>
+</div>
+```
+
+```ts
+page.getByRole('table', { name: 'Orders' });
+page.locator('[data-slot="table-container"]'); // the scrolling container
+```
+
 ### An end-to-end test no longer finds a required field by a name ending in `*`
 
 **When:** after upgrading to 0.22.0, `getByRole('textbox', { name: 'Email*' })`
@@ -1486,6 +1543,26 @@ const filter = useFilterContext(); // fine: this component is below FilterProvid
 </template>
 ```
 
+For a documentation shell of your own (`DocNav`, `DocArticle`, `DocLink`
+without `<Doc>`), provide the state yourself in the component that renders
+the parts:
+
+```vue
+<script setup lang="ts">
+import { type DocNavItem, provideDoc, useDoc } from '@nxgt/material-vue/components';
+
+const props = defineProps<{ items: DocNavItem[]; pathname: string }>();
+provideDoc(
+  useDoc({
+    items: props.items,
+    get pathname() {
+      return props.pathname;
+    },
+  }),
+);
+</script>
+```
+
 ### `Clipboard is not available`
 
 **When:** calling `copyToClipboard(value)` on a page served over plain `http`
@@ -1728,6 +1805,33 @@ await expect(page.getByRole('img', { name: 'Phone' })).toBeVisible();
 await page.getByRole('button', { name: 'Delete' }).click();
 ```
 
+### A button named "Icon plus Add" is now named "Add"
+
+**When:** after upgrading to 0.24.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:
+
+```vue
+<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`, with

package/lib/nuxt/component-names.ts

@@ -99,6 +99,7 @@ export const COMPONENT_NAMES = [
 	'CheckCardField',
 	'CheckCardFormField',
 	'Checkbox',
+	'CheckboxFormField',
 	'CheckboxGroup',
 	'CheckboxGroupFormField',
 	'ChecklistCard',
@@ -107,6 +108,7 @@ export const COMPONENT_NAMES = [
 	'CodeBlock',
 	'CodeDiff',
 	'CodeEditor',
+	'CodeEditorFormField',
 	'CodeGroup',
 	'Collapsible',
 	'CollapsibleContent',
@@ -146,6 +148,7 @@ export const COMPONENT_NAMES = [
 	'ContextMenuSubTrigger',
 	'ContextMenuTrigger',
 	'CopyButton',
+	'CopyValue',
 	'CountBadge',
 	'CountryField',
 	'CountryFormField',
@@ -162,6 +165,7 @@ export const COMPONENT_NAMES = [
 	'DateFormField',
 	'DateRangeField',
 	'DateRangeFormField',
+	'DefaultDocLink',
 	'DeltaListCard',
 	'Description',
 	'Dialog',
@@ -177,10 +181,14 @@ export const COMPONENT_NAMES = [
 	'DndOverlay',
 	'DndProvider',
 	'Doc',
+	'DocArticle',
 	'DocChildCards',
 	'DocCopyMarkdown',
+	'DocCopyPage',
 	'DocEmpty',
 	'DocHeader',
+	'DocLink',
+	'DocNav',
 	'DocPage',
 	'DocPager',
 	'DocProgress',
@@ -280,6 +288,7 @@ export const COMPONENT_NAMES = [
 	'ImageS3Field',
 	'ImageS3FormField',
 	'InlineEdit',
+	'InlineEditFormField',
 	'Input',
 	'InputGroup',
 	'InputGroupAddon',
@@ -328,6 +337,7 @@ export const COMPONENT_NAMES = [
 	'MenubarSubContent',
 	'MenubarSubTrigger',
 	'MenubarTrigger',
+	'MermaidDiagram',
 	'MessageCard',
 	'MiniGallery',
 	'NativeSelect',
@@ -351,11 +361,13 @@ export const COMPONENT_NAMES = [
 	'PaceCard',
 	'Pager',
 	'Pagination',
+	'PaginationBar',
 	'PaginationContent',
 	'PaginationEllipsis',
 	'PaginationFirst',
 	'PaginationItem',
 	'PaginationLast',
+	'PaginationLink',
 	'PaginationNext',
 	'PaginationPrevious',
 	'PaneLayout',

package/package.json

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