@nxgt/material-vue 0.23.4 → 0.25.0

package/README.md

@@ -334,9 +334,9 @@ example and the options that matter. In the *Component* column, `·` separates
 a field from its vee-validate wrapper, and "+ parts" means the family exports
 more sub-components. The last column gives the matching export in
 [`@nxgt/material`](https://www.npmjs.com/package/@nxgt/material), or `—`
-when React has none. `Combobox` and `FilesFormField` are React entries with
-no Vue counterpart; they keep a row, and their page says what to use
-instead.
+when React has none. `Combobox` (not planned) is a React entry with no Vue
+counterpart; it keeps a row, and its page says what to use instead. Also
+React-only for now: `StepperIndicator` ([roadmap](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/roadmap.md)).
 
 ### Primitives
 
@@ -356,8 +356,8 @@ instead.
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/primitives-icon.webp" width="120" alt="Icon"> | [`Icon`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/primitives.md#icon) | Font Awesome sprite icon by name and style (duotone by default), labelled with `role="img"`. | `Icon` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/primitives-kbd.webp" width="120" alt="Kbd"> | [`Kbd`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/primitives.md#kbd), `KbdShortcut` | One keyboard key, or a key combination with platform glyphs. | `Kbd`, `KbdShortcut` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/primitives-separator.webp" width="120" alt="Separator"> | [`Separator`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/primitives.md#separator) | Horizontal or vertical divider. | `Separator` |
-| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/primitives-table.webp" width="120" alt="Table"> | [`Table`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/primitives.md#table), `TableHeader`, `TableBody`, `TableRow`, `TableHead`, `TableCell`, `TableEmpty` + parts | Styled semantic table inside a scrollable wrapper. | `Table` (same parts; no `TableEmpty`) |
-| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/primitives-tabs.webp" width="120" alt="Tabs"> | [`Tabs`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/primitives.md#tabs), `TabsList`, `TabsTrigger`, `TabsContent`, `Tabs` | Tabs whose triggers can take an icon. | `Tabs` (same parts) |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/primitives-table.webp" width="120" alt="Table"> | [`Table`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/primitives.md#table), `TableHeader`, `TableBody`, `TableRow`, `TableHead`, `TableCell`, `TableEmpty` + parts | Styled semantic table inside a scrollable wrapper. | `Table` (same parts) |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/primitives-tabs.webp" width="120" alt="Tabs"> | [`Tabs`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/primitives.md#tabs), `TabsList`, `TabsTrigger`, `TabsContent`, `Tabs` | Tabs whose triggers can take an icon. `variant="line"` is the quieter pill style. | `Tabs` (same parts) |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/primitives-toggle.webp" width="120" alt="Toggle"> | [`Toggle`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/primitives.md#toggle), `ToggleGroup`, `ToggleGroupItem` | Pressable on / off button: default or outline, three sizes. | `Toggle` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/primitives-togglegroup.webp" width="120" alt="ToggleGroup"> | [`Toggle`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/primitives.md#togglegroup), `ToggleGroup`, `ToggleGroupItem` | Single or multiple toggle group sharing variant and size. | `ToggleGroup`, `ToggleGroupItem`, `ToggleGroupSeparator` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/primitives-activity.webp" width="120" alt="Activity"> | [`Activity`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/primitives.md#activity) | Keeps its content mounted and hides it with a boolean `visible`. | `Activity` |
@@ -373,7 +373,7 @@ instead.
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/buttons-actions-splitbutton.webp" width="120" alt="SplitButton"> | [`SplitButton`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/buttons-and-actions.md#splitbutton) | Main action plus a dropdown menu of secondary actions. | `SplitButton` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/buttons-actions-responsivebutton.webp" width="120" alt="ResponsiveButton"> | [`ResponsiveButton`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/buttons-and-actions.md#responsivebutton) | Shows its label on desktop and collapses to icon-only on mobile. | `ResponsiveButton` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/buttons-actions-linkbutton.webp" width="120" alt="LinkButton"> | [`LinkButton`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/buttons-and-actions.md#linkbutton), `IconLinkButton`, `ResponsiveLinkButton` | The button styles rendered as `vue-router` links. | `LinkButton`, `IconLinkButton`, `ResponsiveLinkButton` |
-| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/buttons-actions-copybutton.webp" width="120" alt="CopyButton"> | [`CopyButton`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/buttons-and-actions.md#copybutton) | Copies a value to the clipboard and briefly shows a check mark. | `CopyButton`, `CopyValue` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/buttons-actions-copybutton.webp" width="120" alt="CopyButton"> | [`CopyButton`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/buttons-and-actions.md#copybutton), `CopyValue` | Copies a value to the clipboard and briefly shows a check mark. `CopyValue` displays the value next to the button. | `CopyButton`, `CopyValue` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/buttons-actions-highlighttext.webp" width="120" alt="HighlightText"> | [`HighlightText`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/buttons-and-actions.md#highlighttext) | Marks case-insensitive matches of a query inside a string (`splitMatch`). | `HighlightText` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/buttons-actions-loadmorebutton.webp" width="120" alt="LoadMoreButton"> | [`LoadMoreButton`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/buttons-and-actions.md#loadmorebutton) | "Load more" button for cursor pagination; icon-only with a tooltip unless `expanded`. | `LoadMoreButton` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/buttons-actions-scrolltotop.webp" width="120" alt="ScrollToTop"> | [`ScrollToTop`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/buttons-and-actions.md#scrolltotop) | Floating button that appears past a scroll threshold. | `ScrollToTop` |
@@ -397,14 +397,14 @@ instead.
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/form-fields-urlfield.webp" width="120" alt="UrlField"> | [`UrlField`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/form-fields.md#urlfield) · `UrlFormField` | Validates on blur; open-in-new-tab and copy buttons. | `UrlField`, `UrlFormField` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/form-fields-searchfield.webp" width="120" alt="SearchField"> | [`SearchField`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/form-fields.md#searchfield) · `SearchFormField` | Search icon, clear button and spinner, with a debounced `value-change` event. | `SearchField`, `SearchFormField` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/form-fields-colorfield.webp" width="120" alt="ColorField"> | [`ColorField`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/form-fields.md#colorfield) · `ColorFormField` | Hex input with a colour picker in a popover. | `ColorField`, `ColorFormField` |
-| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/form-fields-otpfield.webp" width="120" alt="OtpField"> | [`OtpField`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/form-fields.md#otpfield) · `OtpFormField`, `InputOTP`, `InputOTPGroup`, `InputOTPSlot`, `InputOTPSeparator` | One-time code input of configurable length. | `OtpField`, `OtpFormField` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/form-fields-otpfield.webp" width="120" alt="OtpField"> | [`OtpField`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/form-fields.md#otpfield) · `OtpFormField`, `InputOTP`, `InputOTPGroup`, `InputOTPSlot`, `InputOTPSeparator` | One-time code input of configurable length. | `OtpField`, `OtpFormField`, `InputOTP` (same parts) |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/form-fields-inputgroupfield.webp" width="120" alt="InputGroupField"> | [`InputGroupField`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/form-fields.md#inputgroupfield) · `InputGroupFormField` | Labelled `InputGroup` with addons and helper text. | `InputGroupField`, `InputGroupFormField` |
-| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/form-fields-inlineedit.webp" width="120" alt="InlineEdit"> | [`InlineEdit`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/form-fields.md#inlineedit) | Click-to-edit text with save and cancel. | `InlineEdit`, `InlineEditFormField` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/form-fields-inlineedit.webp" width="120" alt="InlineEdit"> | [`InlineEdit`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/form-fields.md#inlineedit) · `InlineEditFormField` | Click-to-edit text with save and cancel. | `InlineEdit`, `InlineEditFormField` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/form-fields-countryfield.webp" width="120" alt="CountryField"> | [`CountryField`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/form-fields.md#countryfield) · `CountryFormField` | Single or multiple country picker with flags. | `CountryField`, `CountryFormField` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/form-fields-timezonefield.webp" width="120" alt="TimezoneField"> | [`TimezoneField`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/form-fields.md#timezonefield) · `TimezoneFormField` | Searchable IANA timezone picker with localised labels. | `TimezoneField`, `TimezoneFormField` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/form-fields-ratingfield.webp" width="120" alt="RatingField"> | [`RatingField`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/form-fields.md#ratingfield) · `RatingFormField` | Star rating with hover preview, click-to-clear and a read-only mode. | `RatingField`, `RatingFormField` |
-| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/form-fields-slider.webp" width="120" alt="Slider"> | [`SliderField`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/form-fields.md#slider) · `SliderFormField`, `Slider` | Labelled single or range slider with a value readout. | `Slider`, `SliderFormField` |
-| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/form-fields-switch.webp" width="120" alt="Switch"> | [`SwitchField`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/form-fields.md#switch) · `SwitchFormField`, `Switch` | Toggle switch, optionally in a labelled, bordered row. | `Switch`, `SwitchFormField` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/form-fields-slider.webp" width="120" alt="Slider"> | [`SliderField`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/form-fields.md#slider) · `SliderFormField`, `Slider` | Labelled single or range slider with a value readout, ticks and leading / trailing content. | `Slider`, `SliderField` (alias), `SliderFormField` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/form-fields-switch.webp" width="120" alt="Switch"> | [`SwitchField`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/form-fields.md#switch) · `SwitchFormField`, `Switch` | Toggle switch, optionally in a labelled, bordered row. | `Switch`, `SwitchField` (alias), `SwitchFormField` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/form-fields-attributes.webp" width="120" alt="Attributes"> | [`AttributesField`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/form-fields.md#attributes), `AttributesList`, `AttributeDialog`, `AttributeForm` · `AttributesFormField`, `AttributeValuesForm`, `AttributeValueFormField` · `AttributeValuesFormFieldSet` | Editor for typed custom attributes (string, number, date, select, rich text…). `AttributesField` takes `error` and `helperText`; `AttributesFormField` takes `helperText` and follows `resetForm` / `setFieldValue`. | `AttributesField`, `AttributesList`, `AttributeDialog`, `AttributeForm`, `AttributeValuesForm`, `AttributesFormField`, `AttributeValuesFormFieldSet`, `AttributeValueFormField` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/form-fields-contacts.webp" width="120" alt="Contacts"> | [`Contacts`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/form-fields.md#contacts), `ContactDialog`, `ContactItem` (deprecated) · `ContactsFormField` | Typed contact list (phone, email, URL…) with an add / edit dialog. | `Contacts`, `ContactItem`, `ContactDialog`, `ContactsFormField` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/form-fields-postaladdress.webp" width="120" alt="PostalAddress"> | [`PostalAddress`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/form-fields.md#postaladdress), `PostalAddressDialog` · `PostalAddressFormField` | Address card with an edit dialog. | `PostalAddress`, `PostalAddressDialog`, `PostalAddressFormField` |
@@ -415,8 +415,8 @@ instead.
 | Preview | Component | What it does | @nxgt/material |
 | --- | --- | --- | --- |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/date-time-calendar.webp" width="120" alt="Calendar"> | [`Calendar`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/date-and-time.md#calendar) + parts | Day-picker calendar built on Reka UI, with optional month and year selects and `min-value` / `max-value` bounds. | `Calendar`, `CalendarDayButton` |
-| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/date-time-datefield.webp" width="120" alt="DateField"> | [`DateField`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/date-and-time.md#datefield) · `DateFormField` | Labelled trigger that opens a calendar popover, with an optional time picker. | `DateField`, `DateFormField` |
-| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/date-time-daterangefield.webp" width="120" alt="DateRangeField"> | [`DateRangeField`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/date-and-time.md#daterangefield) · `DateRangeFormField` | From / to range picked in a popover calendar. | `DateRangeField`, `DateRangeFormField` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/date-time-datefield.webp" width="120" alt="DateField"> | [`DateField`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/date-and-time.md#datefield) · `DateFormField` | Labelled trigger that opens a calendar popover, with an optional time picker and `disabled-days`. | `DateField`, `DateFormField` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/date-time-daterangefield.webp" width="120" alt="DateRangeField"> | [`DateRangeField`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/date-and-time.md#daterangefield) · `DateRangeFormField` | From / to range picked in a popover calendar, with `disabled-days`, presets and times. | `DateRangeField`, `DateRangeFormField` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/date-time-timefield.webp" width="120" alt="TimeField"> | [`TimeField`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/date-and-time.md#timefield) · `TimeFormField` | Opens a `TimePicker` in a popover, or in a dialog on mobile. | `TimeField`, `TimeFormField` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/date-time-timepicker.webp" width="120" alt="TimePicker"> | [`TimePicker`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/date-and-time.md#timepicker) | Hour and minute inputs with AM / PM and auto-advancing focus. | `TimePicker` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/date-time-durationfield.webp" width="120" alt="DurationField"> | [`DurationField`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/date-and-time.md#durationfield) · `DurationFormField` | Hours and minutes combined into a total in minutes. | `DurationField`, `DurationFormField` |
@@ -425,26 +425,27 @@ instead.
 
 | Preview | Component | What it does | @nxgt/material |
 | --- | --- | --- | --- |
-| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/selection-choice-select.webp" width="120" alt="Select"> | [`Select`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/selection-and-choice.md#select), `SelectTrigger`, `SelectValue`, `SelectContent`, `SelectItem` + parts, `NativeSelect`, `NativeSelectOption`, `NativeSelectOptGroup` | Select primitives with groups, labels and scroll buttons, plus a styled native `<select>`. | `Select` (same parts) |
-| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/selection-choice-selectfield.webp" width="120" alt="SelectField"> | [`SelectField`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/selection-and-choice.md#selectfield) · `SelectFormField` | Labelled select built from `options`. | `SelectField`, `SelectFormField` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/selection-choice-select.webp" width="120" alt="Select"> | [`Select`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/selection-and-choice.md#select), `SelectTrigger`, `SelectValue`, `SelectContent`, `SelectItem` + parts, `NativeSelect`, `NativeSelectOption`, `NativeSelectOptGroup` | Select primitives with groups, labels and scroll buttons, plus a styled native `<select>`. | `Select` (same parts), `NativeSelect` (same parts) |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/selection-choice-selectfield.webp" width="120" alt="SelectField"> | [`SelectField`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/selection-and-choice.md#selectfield) · `SelectFormField` | Labelled select built from `options`, with an `#option` slot. | `SelectField`, `SelectFormField` |
 | — | [Combobox](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/selection-and-choice.md#combobox) | The raw combobox primitives are not in `@nxgt/material-vue`. Use [`ComboboxField`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/selection-and-choice.md#comboboxfield) for a searchable single select, [`Autocomplete`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/selection-and-choice.md#autocomplete) for several values or free text, or the `Command` parts (Overlays & menus) for a hand-built list. | `Combobox` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/selection-choice-comboboxfield.webp" width="120" alt="ComboboxField"> | [`ComboboxField`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/selection-and-choice.md#comboboxfield) · `ComboboxFormField` | Labelled, searchable single select over `{ value, label }` options, in a popover. | `ComboboxField`, `ComboboxFormField` |
-| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/selection-choice-autocomplete.webp" width="120" alt="Autocomplete"> | [`Autocomplete`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/selection-and-choice.md#autocomplete) · `AutocompleteFormField` | Single or multiple (chips) autocomplete with free-solo values and a query event. | `Autocomplete`, `AutocompleteFormField` |
-| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/selection-choice-checkbox.webp" width="120" alt="Checkbox"> | [`Checkbox`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/selection-and-choice.md#checkbox) | Reka UI checkbox with an indeterminate state; pair it with a `Label`. | `Checkbox`, `CheckboxFormField` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/selection-choice-autocomplete.webp" width="120" alt="Autocomplete"> | [`Autocomplete`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/selection-and-choice.md#autocomplete) · `AutocompleteFormField` | Single or multiple (chips) autocomplete typed by its options, with free-solo values, a query event and option slots. | `Autocomplete`, `AutocompleteFormField` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/selection-choice-checkbox.webp" width="120" alt="Checkbox"> | [`Checkbox`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/selection-and-choice.md#checkbox) · `CheckboxFormField` | Checkbox with label, helper text and an indeterminate state; without a label, the bare Reka UI box. | `Checkbox`, `CheckboxFormField` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/selection-choice-checkboxgroup.webp" width="120" alt="CheckboxGroup"> | [`CheckboxGroup`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/selection-and-choice.md#checkboxgroup) · `CheckboxGroupFormField` | Checkbox list built from `options`, valued as `string[]`. | `CheckboxGroup`, `CheckboxGroupFormField` |
-| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/selection-choice-radiogroup.webp" width="120" alt="RadioGroup"> | [`RadioGroupField`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/selection-and-choice.md#radiogroup) · `RadioGroupFormField`, `RadioGroup`, `RadioGroupItem` | Labelled radio group built from `options`, horizontal or vertical. | `RadioGroup`, `RadioGroupItem`, `RadioGroupFormField` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/selection-choice-radiogroup.webp" width="120" alt="RadioGroup"> | [`RadioGroupField`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/selection-and-choice.md#radiogroup) · `RadioGroupFormField`, `RadioGroup`, `RadioGroupItem` | Labelled radio group built from `options`, horizontal or vertical. | `RadioGroupField` (alias), `RadioGroup`, `RadioGroupItem`, `RadioGroupFormField` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/selection-choice-checkcardfield.webp" width="120" alt="CheckCardField"> | [`CheckCardField`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/selection-and-choice.md#checkcardfield) · `CheckCardFormField` | A yes / no choice shown as two selectable cards. | `CheckCardField`, `CheckCardFormField` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/selection-choice-selectcardfield.webp" width="120" alt="SelectCardField"> | [`SelectCardField`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/selection-and-choice.md#selectcardfield) · `SelectCardFormField` | Single or multiple choice shown as selectable cards. | `SelectCardField`, `SelectCardFormField` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/selection-choice-selectchipfield.webp" width="120" alt="SelectChipField"> | [`SelectChipField`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/selection-and-choice.md#selectchipfield) · `SelectChipFormField` | Single or multiple choice shown as toggleable chips. | `SelectChipField`, `SelectChipFormField` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/selection-choice-transferlist.webp" width="120" alt="TransferList"> | [`TransferList`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/selection-and-choice.md#transferlist) · `TransferListFormField` | Two-pane picker with search, drag-and-drop, reordering and a `max`. | `TransferList`, `TransferListFormField` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/selection-choice-sortablelist.webp" width="120" alt="SortableList"> | [`SortableList`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/selection-and-choice.md#sortablelist), `SortableHandle` · `SortableListFormField` | Searchable list of strings you reorder by dragging or with the keyboard. | `SortableList`, `SortableListFormField` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/selection-choice-treeselectfield.webp" width="120" alt="TreeSelectField"> | [`TreeSelectField`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/selection-and-choice.md#treeselectfield) · `TreeSelectFormField` | A field that opens a `Tree` in a popover: pick one node, or several as chips, with an optional filter. | `TreeSelectField`, `TreeSelectFormField` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/selection-choice-switcher.webp" width="120" alt="Switcher"> | [`Switcher`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/selection-and-choice.md#switcher) | Dropdown for switching the active workspace or account, with an avatar. | `Switcher` |
 
 ### Data display
 
 | Preview | Component | What it does | @nxgt/material |
 | --- | --- | --- | --- |
-| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/data-display-avatar.webp" width="120" alt="Avatar"> | [`Avatar`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/data-display.md#avatar), `AvatarImage`, `AvatarFallback` | Round image with a fallback that shows while it loads or when it fails. | `Avatar`, `AvatarImage`, `AvatarFallback` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/data-display-avatar.webp" width="120" alt="Avatar"> | [`Avatar`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/data-display.md#avatar), `AvatarImage`, `AvatarFallback` | Round image with a fallback that shows while it loads or when it fails, and an optional presence dot (`status`). | `Avatar`, `AvatarImage`, `AvatarFallback` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/data-display-avatargroup.webp" width="120" alt="AvatarGroup"> | [`AvatarGroup`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/data-display.md#avatargroup) | Overlapping avatars with a `+N` overflow. | `AvatarGroup` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/data-display-badge.webp" width="120" alt="Badge"> | [`Badge`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/data-display.md#badge) | Pill label: default, secondary, error, success, info, warning, outlined. | `Badge` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/data-display-countbadge.webp" width="120" alt="CountBadge"> | [`CountBadge`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/data-display.md#countbadge) | Count in the corner of its content, capped at `99+` and hidden at 0. | `CountBadge` |
@@ -457,26 +458,26 @@ instead.
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/data-display-description.webp" width="120" alt="Description"> | [`Description`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/data-display.md#description) | Read-only label / value pair that renders nothing when empty. | `Description` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/data-display-entityheader.webp" width="120" alt="EntityHeader"> | [`EntityHeader`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/data-display.md#entityheader) | Page header with icon, title, status, metadata and actions. | `EntityHeader` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/data-display-listtile.webp" width="120" alt="ListTile"> | [`ListTile`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/data-display.md#listtile) | Row with leading / trailing slots, title and subtitle; a link with `href`, otherwise a button. `size="sm"` is the dense row. | `ListTile` |
-| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/data-display-accordioncard.webp" width="120" alt="AccordionCard"> | [`AccordionCard`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/data-display.md#accordioncard) | Renders `items` (title, content) as a styled accordion. | `AccordionCard` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/data-display-accordioncard.webp" width="120" alt="AccordionCard"> | [`AccordionCard`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/data-display.md#accordioncard) | Renders `items` (title, content) as a styled accordion, with `#header`, `#title` and `#content` slots. | `AccordionCard` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/data-display-timeline.webp" width="120" alt="Timeline"> | [`Timeline`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/data-display.md#timeline), `TimelineItem`, `RelativeTime` | Vertical event timeline with toned markers and relative times. | `Timeline`, `TimelineItem`, `RelativeTime` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/data-display-eventchip.webp" width="120" alt="EventChip"> | [`EventChip`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/data-display.md#eventchip) | Calendar event pill with time, all-day and continuation edges. | `EventChip` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/data-display-codeblock.webp" width="120" alt="CodeBlock"> | [`CodeBlock`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/data-display.md#codeblock), `CodeDiff`, `JsonViewer`, `CodeGroup` | Highlighted code with line numbers and copy, a Monaco diff, a collapsible JSON tree, and tabbed samples (`Tabs variant="line"`). | `CodeBlock`, `CodeDiff`, `JsonViewer`, `CodeGroup` |
-| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/data-display-markdown.webp" width="120" alt="Markdown"> | [`Markdown`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/data-display.md#markdown) | Markdown with KaTeX math and mermaid diagrams (client-only). Fences reuse `CodeBlock`. `ChatMarkdown` renders through it. | `Markdown` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/data-display-markdown.webp" width="120" alt="Markdown"> | [`Markdown`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/data-display.md#markdown), `MermaidDiagram` | Markdown with KaTeX math and mermaid diagrams (client-only). Fences reuse `CodeBlock`. `ChatMarkdown` renders through it. | `Markdown`, `MermaidDiagram` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/data-display-terminal.webp" width="120" alt="Terminal"> | [`Terminal`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/data-display.md#terminal) | Display-only log with prompt, copy, and error/input tones. Container queries. | `Terminal` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/data-display-figure.webp" width="120" alt="Figure"> | [`Figure`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/data-display.md#figure) | Framed media with an optional caption. | `Figure` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/data-display-apioperation.webp" width="120" alt="ApiEndpoint"> | [`ApiEndpoint`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/data-display.md#apiendpoint), `ApiOperation` | HTTP method badge, path and copy; `ApiOperation` adds a param table and example `CodeGroup`. | `ApiEndpoint`, `ApiOperation` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/data-display-paramtable.webp" width="120" alt="ParamTable"> | [`ParamTable`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/data-display.md#paramtable) | Name / type / default / description table; stacked cards below `sm`. | `ParamTable` |
-| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/data-display-qrcode.webp" width="120" alt="QRCode"> | [`QRCode`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/data-display.md#qrcode) | QR code on a padded tile, with an optional centred logo. | `QRCode` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/data-display-qrcode.webp" width="120" alt="QRCode"> | [`QRCode`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/data-display.md#qrcode) | QR code on a padded tile, with an optional centred logo in its `#logo` slot. | `QRCode` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/data-display-barecode.webp" width="120" alt="Barecode"> | [`Barecode`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/data-display.md#barecode) | 1D barcode. | `Barecode` |
 
 ### Data table, filter & lists
 
 | Preview | Component | What it does | @nxgt/material |
 | --- | --- | --- | --- |
-| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/data-table-filter-lists-datatable.webp" width="120" alt="DataTable"> | [`DataTable`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/data-table-filter-and-lists.md#datatable), `DataTableColumnHeader`, `DataTablePagination`, `DataTableViewOptions` | TanStack Table v9 with sorting, filtering, selection, expandable rows, pagination or load-more, and column visibility. | `DataTable`, `DataTableColumnHeader`, `DataTablePagination`, `DataTableViewOptions` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/data-table-filter-lists-datatable.webp" width="120" alt="DataTable"> | [`DataTable`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/data-table-filter-and-lists.md#datatable), `DataTableColumnHeader`, `DataTablePagination`, `DataTableViewOptions` | TanStack Table v9 with sorting, filtering, selection, expandable rows, pagination or load-more, column visibility, skeleton rows while loading and your own empty state. | `DataTable`, `DataTableColumnHeader`, `DataTablePagination`, `DataTableViewOptions` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/data-table-filter-lists-filter.webp" width="120" alt="Filter"> | [`Filter`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/data-table-filter-and-lists.md#filter) · `FilterFormField`, `FilterProvider`, `FilterTrigger`, `FilterChips`, `FilterContent`, `FilterGroups`, `FilterGroup`, `FilterField`, `FilterActions`, `FilterPresets` | Schema-driven filters with chips, presets, validation, and URL or storage persistence. | `Filter`, `FilterProvider`, `FilterContent`, `FilterChips`, `FilterPresets`, `FilterFormField` |
 | — | [`FilterInline`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/data-table-filter-and-lists.md#filterinline-filterpopover-filterdialog-filtersheet-filterdrawer), `FilterDialog`, `FilterSheet`, `FilterDrawer`, `FilterPopover` | The filter panel shown inline, or in a popover, dialog, sheet or drawer. | `FilterInline`, `FilterPopover`, `FilterDialog`, `FilterSheet`, `FilterDrawer` |
-| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/data-table-filter-lists-pagination.webp" width="120" alt="Pagination"> | [`Pagination`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/data-table-filter-and-lists.md#pagination), `PaginationContent`, `PaginationItem`, `PaginationFirst`, `PaginationLast` + parts | Pagination primitives on Reka UI's `Pagination`, with first / last buttons and ellipses. | `Pagination` (parts), `PaginationBar` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/data-table-filter-lists-pagination.webp" width="120" alt="Pagination"> | [`Pagination`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/data-table-filter-and-lists.md#pagination), `PaginationContent`, `PaginationItem`, `PaginationFirst`, `PaginationLast`, `PaginationLink`, `PaginationBar`, `paginationItems` + parts | Pagination primitives on Reka UI's `Pagination`, with first / last buttons and ellipses. `PaginationBar` adds a sibling window with ellipses. | `Pagination` (parts), `PaginationFirst`, `PaginationLast`, `PaginationLink`, `PaginationBar`, `paginationItems` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/data-table-filter-lists-tree.webp" width="120" alt="Tree"> | [`Tree`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/data-table-filter-and-lists.md#tree), `TreeItem` | Expandable tree with none, single or multiple selection and keyboard navigation. | `Tree`, `TreeItem`, `useTree` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/data-table-filter-lists-drag-and-drop.webp" width="120" alt="Drag and drop"> | [`DndProvider`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/data-table-filter-and-lists.md#drag-and-drop), `Draggable`, `Droppable`, `DraggableDroppable`, `SortableProvider`, `Sortable`, `DragHandle`, `DndOverlay` | Drag-and-drop primitives; see [dnd](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/guides/helpers.md#nxgtmaterial-vuednd). | `DndProvider`, `Draggable`, `Droppable`, `Sortable`, `DragHandle` |
 
@@ -498,7 +499,7 @@ instead.
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/navigation-layout-stepper.webp" width="120" alt="Stepper"> | [`Stepper`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/navigation-and-layout.md#stepper) | Clickable horizontal or vertical steps with status and progress; compact on mobile. | `Stepper` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/navigation-layout-steps.webp" width="120" alt="Steps"> | [`Steps`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/navigation-and-layout.md#steps), `StepsItem` | Numbered editorial steps that stay visible on every breakpoint. | `Steps`, `StepsItem` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/navigation-layout-hero.webp" width="120" alt="Hero"> | [`Hero`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/navigation-and-layout.md#hero) | Landing band with eyebrow, title, supporting copy and actions. | `Hero` |
-| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/navigation-layout-doc.webp" width="120" alt="Doc"> | [`Doc`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/navigation-and-layout.md#doc), `DocPage`, `DocTopbar`, `DocSidebar`, `DocToc`, `DocPager`, `DocSearch`, `DocChildCards`, `DocSeeAlso`, `DocEmpty`, `DocProgress`, `DocHeader`, `DocCopyMarkdown` | Documentation site shell: sidebar from `md`, TOC rail from `xl`. Reading bar, copy-as-markdown, child cards, see also, and a 404 slot. Storybook `Navigation & layout/Doc/Api` composes an API page from `DocPage`, `AnchorHeading`, `ApiOperation`, `ParamTable` and `CodeGroup`. | `Doc`, `DocPage`, `DocTopbar`, `DocSidebar`, `DocToc`, `DocPager`, `DocSearch`, `DocChildCards`, `DocSeeAlso`, `DocEmpty`, `DocProgress` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/navigation-layout-doc.webp" width="120" alt="Doc"> | [`Doc`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/navigation-and-layout.md#doc), `DocPage`, `DocTopbar`, `DocSidebar`, `DocNav`, `DocArticle`, `DocToc`, `DocPager`, `DocSearch`, `DocChildCards`, `DocSeeAlso`, `DocEmpty`, `DocProgress`, `DocHeader`, `DocLink`, `DefaultDocLink`, `DocCopyPage`, `DocCopyMarkdown` | Documentation site shell: sidebar from `md`, TOC rail from `xl`. Reading bar, copy-page / markdown, child cards, see also, and a 404 slot. Storybook `Navigation & layout/Doc/Api` composes an API page from `DocPage`, `AnchorHeading`, `ApiOperation`, `ParamTable` and `CodeGroup`. | `Doc` (same parts) |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/navigation-layout-background.webp" width="120" alt="Background"> | [`Background`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/navigation-and-layout.md#background) | Full-viewport gradient with blurred colour blobs; centres its content. | `Background` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/navigation-layout-navigationrail.webp" width="120" alt="NavigationRail"> | [`NavigationRail`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/navigation-and-layout.md#navigationrail) | Narrow vertical rail for icon buttons. | `NavigationRail` (placeholder) |
 
@@ -524,7 +525,7 @@ instead.
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/feedback-status-alert.webp" width="120" alt="Alert"> | [`Alert`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/feedback-and-status.md#alert) | Callout with icon, title and description in seven tones. | `Alert` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/feedback-status-banner.webp" width="120" alt="Banner"> | [`Banner`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/feedback-and-status.md#banner) | Dismissible info / success / warning / error banner with an action. | `Banner` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/feedback-status-alertdialog.webp" width="120" alt="AlertDialog"> | [`AlertDialog`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/feedback-and-status.md#alertdialog), `AlertDialogContent`, `AlertDialogAction`, `AlertDialogCancel` + parts | Parts for a blocking confirmation dialog. | `AlertDialog` (same parts) |
-| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/feedback-status-confirmdialog.webp" width="120" alt="ConfirmDialog"> | [`ConfirmDialog`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/feedback-and-status.md#confirmdialog), `ConfirmationDialog`, `CustomAlertDialog` | Controlled confirm / cancel dialog. `ConfirmationDialog` brings its own trigger and icon; `CustomAlertDialog` is the free-form alert-dialog variant. | `ConfirmDialog`, `ConfirmationDialog`, `CustomAlertDialog` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/feedback-status-confirmdialog.webp" width="120" alt="ConfirmDialog"> | [`ConfirmDialog`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/feedback-and-status.md#confirmdialog), `ConfirmationDialog`, `CustomAlertDialog` | Controlled confirm / cancel dialog. `ConfirmationDialog` brings its own trigger, icon and an optional Zod form; `CustomAlertDialog` is the free-form alert-dialog variant. | `ConfirmDialog`, `ConfirmationDialog`, `CustomAlertDialog` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/feedback-status-customdialog.webp" width="120" alt="CustomDialog"> | [`CustomDialog`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/feedback-and-status.md#customdialog) | Ready-made dialog with trigger, icon, title, body and footer. The `#trigger` slot is the trigger itself (as-child): put a `Button` in it, not inside another button. | `CustomDialog` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/feedback-status-emptystate.webp" width="120" alt="EmptyState"> | [`EmptyState`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/feedback-and-status.md#emptystate) | Icon in a tinted well, title, description and action; not-found, unauthorized, generic, empty, offline, search and maintenance presets. | `EmptyState` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/feedback-status-progress.webp" width="120" alt="Progress"> | [`Progress`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/feedback-and-status.md#progress), `ProgressField`, `CircularProgress` | Linear bar, circular ring with a label, and a labelled progress field. | `Progress`, `CircularProgress`, `ProgressField` |
@@ -542,7 +543,8 @@ instead.
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/media-files-s3uploadfield.webp" width="120" alt="S3UploadField"> | [`S3UploadField`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/media-and-files.md#s3uploadfield-networkuploadfield) · `S3UploadFormField`, `NetworkUploadField` · `NetworkUploadFormField` | Drag-and-drop uploader with progress, retry, previews and size / count limits. The S3 variant uploads through a presigned PUT. | `S3UploadField`, `NetworkUploadField`, `S3UploadFormField`, `NetworkUploadFormField` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/media-files-uploadfield.webp" width="120" alt="UploadField"> | [`UploadField`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/media-and-files.md#uploadfield) · `UploadFormField` | Labelled file input holding the chosen `File`. | `UploadField`, `UploadFormField` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/media-files-filelist.webp" width="120" alt="FileList"> | [`FileList`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/media-and-files.md#filelist), `FileListField`, `FileListS3Field` · `FileListFormField`, `FileListS3FormField` | File list with type icons, size, download and remove. The field variants upload with progress. | `FileList`, `FileListField`, `FileListS3Field`, `FileListFormField`, `FileListS3FormField` |
-| — | [FilesFormField](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/media-and-files.md#filesformfield) | Not in `@nxgt/material-vue`. For a list of file URLs use [`FileListFormField`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/media-and-files.md#filelist); for typed URLs with suggestions, an `AutocompleteFormField` with `free-solo` (see [Selection & choice](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/selection-and-choice.md#autocomplete)). | `FilesFormField` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/media-files-filepreview.webp" width="120" alt="FilePreview"> | [`FilePreview`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/media-and-files.md#filepreview) | One file previewed by its MIME type or extension: image, PDF (lazy `PdfReader`), video, audio, text / JSON / CSV / Markdown, or a card with a download link. SSR-safe. | `FilePreview` |
+| — | [`FilesFormField`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/media-and-files.md#filesformfield) | Free-solo autocomplete of file URLs, with image thumbnails. | `FilesFormField` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/media-files-imagefield.webp" width="120" alt="ImageField"> | [`ImageField`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/media-and-files.md#imagefield), `ImageS3Field` · `ImageFormField`, `ImageS3FormField` | Single image upload with preview and progress. | `ImageField`, `ImageS3Field`, `ImageFormField`, `ImageS3FormField` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/media-files-imagecropper.webp" width="120" alt="ImageCropper"> | [`ImageCropper`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/media-and-files.md#imagecropper), `ImageCropperDialog` | Crop with zoom, rotation, aspect presets and a round shape; outputs a `File`. | `ImageCropper`, `ImageCropperDialog` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/media-files-gallery.webp" width="120" alt="Gallery"> | [`Gallery`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/media-and-files.md#gallery-lightboxgallery-minigallery), `LightboxGallery`, `MiniGallery` | Image / video gallery (grid, masonry, justified, carousel…) with a lightbox and selection. | `Gallery`, `LightboxGallery`, `MiniGallery` |
@@ -550,7 +552,7 @@ instead.
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/media-files-pdfreader.webp" width="120" alt="PdfReader"> | [`PdfReader`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/media-and-files.md#pdfreader), `PdfToolbar`, `PdfSidebar`, `PdfPageList`, `PdfThumbnailSidebar`, `PdfOutlineSidebar` | Client-only PDF reader with zoom, rotation, search, thumbnails, outline and print. | `PdfReader`, `PdfViewer` (same parts) |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/media-files-stxplayer.webp" width="120" alt="StxPlayer"> | [`StxPlayer`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/media-and-files.md#stxplayer), `StxPlayerProvider`, `StxPlayerViewport`, `StxPlayerControls`, `StxPlayerQueue`, `StxPlayerMini`, `StxPlayerExtras` | Video / audio player with a queue, captions, playback rate, PiP, and full or mini layouts. | `StxPlayer` (same parts) |
 | — | [`VideoPlayer`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/media-and-files.md#videoplayer) (deprecated) | Deprecated alias of `StxPlayer`. | `VideoPlayer` |
-| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/media-files-camera.webp" width="120" alt="Camera"> | [`Camera`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/media-and-files.md#camera) | Webcam preview with device selection and a still capture. | — (a story only, not exported) |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/media-files-camera.webp" width="120" alt="Camera"> | [`Camera`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/media-and-files.md#camera) | Webcam preview with device selection and a still capture. | `Camera`, `useCamera`, `capturePhotoFromVideo` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/media-files-print.webp" width="120" alt="Print components"> | [`PrintHeader`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/media-and-files.md#print-components), `PrintSection`, `PrintCard`, `PrintCardField`, `PrintInfoRow`, `PrintBadge`, `PrintTable`, `PrintTableHeader`, `PrintTableRow`, `PrintTableCell`, `PrintTotals`, `PrintTotalRow` | Inline-styled blocks for printable documents (invoice, receipt, report), with a shared `tw`. | `@nxgt/material/print` (same part names, rendered with `@react-pdf/renderer`) |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/media-files-map.webp" width="120" alt="Map"> | [`Map`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/media-and-files.md#map), `Marker`, `LocationMarker`, `LocationPreview`, `MapActions`, `LocationField` · `LocationFormField` (from `@nxgt/material-vue/map`) | Leaflet map with markers, controls and a location field. It is not in the component barrel: it lives in `@nxgt/material-vue/map`, with `leaflet` and `@vue-leaflet/vue-leaflet` as **optional peer dependencies** (install them to use it), and its stylesheet is `@nxgt/material-vue/map.css`, which is not part of `styles.css`. The entry imports cleanly under SSR, but leaflet only initialises in a browser: in Nuxt wrap the map in `<ClientOnly>`. The Nuxt module does not auto-register these components — import them where you use them. The [maps guide](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/guides/maps.md) covers the peers, SSR and the defaults. | `Map`, `LocationField`, `LocationFormField` (`@nxgt/material/map`) |
 
@@ -565,7 +567,7 @@ instead.
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/rich-widgets-emojipicker.webp" width="120" alt="EmojiPicker"> | [`EmojiPicker`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/rich-widgets.md#emojipicker), `EmojiList` | Shared picker. `ChatComposer` takes `emojis`; `Markdown` expands `:shortcode:`; the RTE toolbar uses the same picker. | `EmojiPicker`, `EmojiList` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/rich-widgets-mentionlist.webp" width="120" alt="MentionList"> | [`MentionList`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/rich-widgets.md#mentionlist) | `@` mention list from an `items` prop (local search). ChatComposer and the RTE suggestion list use it. `filterMentions(items, query, limit?, { match: 'prefix' \| 'substring' })` filters the same way (default `'substring'`); the editor's `mentions.suggestions` takes `(string \| MentionItem)[]`. | `MentionList` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/rich-widgets-richtexteditor.webp" width="120" alt="RichTextEditor"> | [`RichTextEditor`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/rich-widgets.md#richtexteditor) · `RichTextEditorFormField` | Tiptap editor with toolbar, bubble menu, slash commands, mentions, tables, emoji and images. | `RichTextEditor`, `RichTextEditorFormField` |
-| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/rich-widgets-codeeditor.webp" width="120" alt="CodeEditor"> | [`CodeEditor`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/rich-widgets.md#codeeditor) | Monaco editor field with a label and a language switch. | `CodeEditor`, `CodeEditorFormField` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/rich-widgets-codeeditor.webp" width="120" alt="CodeEditor"> | [`CodeEditor`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/rich-widgets.md#codeeditor) · `CodeEditorFormField` | Monaco editor field with a label, a language switch and Monaco's own `options`. | `CodeEditor`, `CodeEditorFormField` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/rich-widgets-quiz.webp" width="120" alt="Quiz"> | [`Quiz`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/rich-widgets.md#quiz), `QuestionCard` | Quiz and question cards composed from Card, ActionCard, GaugeCard, ChecklistCard, Progress and TextField. Container queries. | `Quiz`, `QuestionCard` |
 
 ## Traps