@nxgt/material-vue 0.24.0 → 0.25.1

package/README.md

@@ -334,13 +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` (not planned) and `FilesFormField` are React
-entries with no Vue counterpart; they keep a row, and their page says what to
-use instead. Also React-only for now: `StepperIndicator`, and some options —
-a generic `Autocomplete`, `ConfirmationDialog`'s `formOptions`, the date
-fields' `disabledDays`, `SliderField` ticks and leading/trailing content, `Avatar` status, a QR logo,
-`AccordionCard` slots, a `SelectField` option slot, `CodeEditor` options and
-the `Tabs` line variant ([roadmap](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/roadmap.md)).
+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
 
@@ -361,7 +357,7 @@ the `Tabs` line variant ([roadmap](https://cdn.jsdelivr.net/npm/@nxgt/material-v
 | <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) |
-| <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-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` |
@@ -407,7 +403,7 @@ the `Tabs` line variant ([roadmap](https://cdn.jsdelivr.net/npm/@nxgt/material-v
 | <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`, `SliderField` (alias), `SliderFormField` |
+| <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` |
@@ -419,8 +415,8 @@ the `Tabs` line variant ([roadmap](https://cdn.jsdelivr.net/npm/@nxgt/material-v
 | 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` |
@@ -430,10 +426,10 @@ the `Tabs` line variant ([roadmap](https://cdn.jsdelivr.net/npm/@nxgt/material-v
 | 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), `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`. | `SelectField`, `SelectFormField` |
+| <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-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. | `RadioGroupField` (alias), `RadioGroup`, `RadioGroupItem`, `RadioGroupFormField` |
@@ -442,13 +438,14 @@ the `Tabs` line variant ([roadmap](https://cdn.jsdelivr.net/npm/@nxgt/material-v
 | <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` |
@@ -461,7 +458,7 @@ the `Tabs` line variant ([roadmap](https://cdn.jsdelivr.net/npm/@nxgt/material-v
 | <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` |
@@ -470,7 +467,7 @@ the `Tabs` line variant ([roadmap](https://cdn.jsdelivr.net/npm/@nxgt/material-v
 | <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
@@ -528,7 +525,7 @@ the `Tabs` line variant ([roadmap](https://cdn.jsdelivr.net/npm/@nxgt/material-v
 | <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` |
@@ -546,7 +543,8 @@ the `Tabs` line variant ([roadmap](https://cdn.jsdelivr.net/npm/@nxgt/material-v
 | <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` |
@@ -569,7 +567,7 @@ the `Tabs` line variant ([roadmap](https://cdn.jsdelivr.net/npm/@nxgt/material-v
 | <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) · `CodeEditorFormField` | 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

package/dist/{Button-DOcT4Pej.js → Button-C1aaI0Gw.js}

@@ -1,5 +1,5 @@
 import { t as e } from "./utils-CykWQ0iJ.js";
-import { t } from "./use-material-translation-8hUB2M-S.js";
+import { t } from "./use-material-translation-B6sIk0mF.js";
 import { Comment as n, Text as r, computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createTextVNode as l, createVNode as u, defineComponent as d, guardReactiveProps as f, inject as p, isVNode as m, mergeProps as h, normalizeClass as g, normalizeProps as _, openBlock as v, provide as y, renderSlot as b, shallowRef as x, toDisplayString as S, unref as C, useAttrs as w, useSlots as T, withCtx as E } from "vue";
 import { Primitive as D, TooltipArrow as O, TooltipContent as k, TooltipPortal as A, TooltipProvider as j, TooltipRoot as M, TooltipTrigger as N, useForwardPropsEmits as P } from "reka-ui";
 import { cva as F } from "class-variance-authority";

package/dist/{HoverCardTrigger-WQe85PCH.js → HoverCardTrigger-JtHn0IFQ.js}

@@ -1,6 +1,6 @@
 import { t as e } from "./utils-CykWQ0iJ.js";
-import { t } from "./use-material-translation-8hUB2M-S.js";
-import { t as n } from "./Button-DOcT4Pej.js";
+import { t } from "./use-material-translation-B6sIk0mF.js";
+import { t as n } from "./Button-C1aaI0Gw.js";
 import { createBlock as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, createTextVNode as s, createVNode as c, defineComponent as l, guardReactiveProps as u, isRef as d, mergeProps as f, normalizeClass as p, normalizeProps as m, openBlock as h, renderSlot as g, toDisplayString as _, unref as v, useId as y, useTemplateRef as b, vModelText as x, withCtx as S, withDirectives as C } from "vue";
 import { X as w } from "@lucide/vue";
 import { DialogClose as T, DialogContent as E, DialogDescription as D, DialogOverlay as O, DialogPortal as k, DialogRoot as ee, DialogTitle as te, DialogTrigger as A, HoverCardContent as j, HoverCardPortal as M, HoverCardRoot as N, HoverCardTrigger as P, Label as F, useForwardProps as I, useForwardPropsEmits as L } from "reka-ui";

package/dist/{camera-BNbLUPb1.js → camera-BacVyXl0.js}

@@ -1,8 +1,8 @@
 import { t as e } from "./utils-CykWQ0iJ.js";
-import { ar as t, cr as n, or as r } from "./components-YlYuHLEI.js";
-import { t as i } from "./use-material-translation-8hUB2M-S.js";
-import { t as a } from "./Button-DOcT4Pej.js";
-import { t as o } from "./icon-button-DKLuZ2c-.js";
+import { gr as t, mr as n, pr as r } from "./components-DRBKkOqk.js";
+import { t as i } from "./use-material-translation-B6sIk0mF.js";
+import { t as a } from "./Button-C1aaI0Gw.js";
+import { t as o } from "./icon-button-B2FQtIHS.js";
 import { createBlock as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, createTextVNode as d, createVNode as f, defineComponent as p, normalizeClass as m, openBlock as h, ref as g, renderSlot as _, shallowRef as v, toDisplayString as y, unref as b, withCtx as x } from "vue";
 import { Pause as S, Play as C } from "@lucide/vue";
 //#region lib/components/ui/media/camera/camera-content.vue?vue&type=script&setup=true&lang.ts
@@ -16,8 +16,8 @@ var w = { class: "grid gap-2" }, T = { class: "flex justify-end" }, E = ["src",
 		Object,
 		Array
 	] } },
-	setup(n) {
-		let r = n, { t: p } = i(), { videoRef: g, state: _, actions: v } = t();
+	setup(t) {
+		let n = t, { t: p } = i(), { videoRef: g, state: _, actions: v } = r();
 		function D(e) {
 			g.value = e instanceof HTMLVideoElement ? e : null;
 		}
@@ -25,9 +25,9 @@ var w = { class: "grid gap-2" }, T = { class: "flex justify-end" }, E = ["src",
 			_.isStreaming ? v.stopStream() : v.startStream();
 		}
 		let k = p("material.camera.capture", "Take Capture"), A = p("material.camera.captured", "Captured");
-		return (t, n) => (h(), l("div", {
+		return (t, r) => (h(), l("div", {
 			"data-slot": "camera",
-			class: m(b(e)("flex relative w-full h-full gap-2", r.class))
+			class: m(b(e)("flex relative w-full h-full gap-2", n.class))
 		}, [u("div", w, [u("video", {
 			ref: D,
 			class: "w-full max-w-lg right-1 ring-primary",
@@ -58,9 +58,9 @@ var w = { class: "grid gap-2" }, T = { class: "flex justify-end" }, E = ["src",
 }), O = /* @__PURE__ */ p({
 	__name: "camera-provider",
 	setup(e) {
-		let t = g(null), i = g(null), a = v(null), o = n();
-		return r({
-			videoRef: t,
+		let r = g(null), i = g(null), a = v(null), o = t();
+		return n({
+			videoRef: r,
 			canvasRef: i,
 			streamRef: a,
 			state: o,
@@ -74,7 +74,7 @@ var w = { class: "grid gap-2" }, T = { class: "flex justify-end" }, E = ["src",
 				requestPermission: () => o.requestPermission(),
 				startStream: () => {
 					o.startStream((e) => {
-						a.value = e, t.value && (t.value.srcObject = e);
+						a.value = e, r.value && (r.value.srcObject = e);
 					});
 				},
 				stopStream: () => {
@@ -83,7 +83,7 @@ var w = { class: "grid gap-2" }, T = { class: "flex justify-end" }, E = ["src",
 					}), a.value = null, o.setStreaming(!1);
 				},
 				capturePhoto: () => {
-					o.capturePhoto(t.value);
+					o.capturePhoto(r.value);
 				}
 			}
 		}), (e, t) => _(e.$slots, "default");