@nxgt/material 2.4.2 → 2.6.0

package/README.md

@@ -264,6 +264,7 @@ preview, an example and the options that matter. In the
 *Component* column, `·` separates a field from its React Hook Form wrapper.
 The last column gives the matching export in `@nxgt/material-vue`, or `—` when
 Vue has none. "(same parts)" means Vue exports the same sub-components.
+React-only today: `Combobox` (not planned in Vue) and `StepperIndicator`.
 
 ### Primitives
 
@@ -284,7 +285,7 @@ Vue has none. "(same parts)" means Vue exports the same sub-components.
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/previews/primitives-kbd.webp" width="120" alt="Kbd"> | [`Kbd`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/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@2/docs/previews/primitives-separator.webp" width="120" alt="Separator"> | [`Separator`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/components/primitives.md#separator) | Horizontal or vertical divider. | `Separator` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/previews/primitives-scrollarea.webp" width="120" alt="ScrollArea"> | [`ScrollArea`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/components/primitives.md#scrollarea), `ScrollBar` | Scroll container with a thin custom scrollbar that matches the theme. | `ScrollArea`, `ScrollBar` |
-| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/previews/primitives-table.webp" width="120" alt="Table"> | [`Table`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/components/primitives.md#table), `TableHeader`, `TableBody`, `TableFooter`, `TableRow`, `TableHead`, `TableCell`, `TableCaption` | Styled semantic table inside a scrollable wrapper. | `Table` (same parts), `TableEmpty` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/previews/primitives-table.webp" width="120" alt="Table"> | [`Table`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/components/primitives.md#table), `TableHeader`, `TableBody`, `TableFooter`, `TableRow`, `TableHead`, `TableCell`, `TableCaption`, `TableEmpty` | Styled semantic table inside a scrollable wrapper; `TableEmpty` is the full-width "nothing here" row. | `Table` (same parts) |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/previews/primitives-tabs.webp" width="120" alt="Tabs"> | [`Tabs`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/components/primitives.md#tabs), `TabsList`, `TabsTrigger`, `TabsContent` | 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@2/docs/previews/primitives-toggle.webp" width="120" alt="Toggle"> | [`Toggle`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/components/primitives.md#toggle) | Pressable on / off button: default or outlined, three sizes. | `Toggle` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/previews/primitives-togglegroup.webp" width="120" alt="ToggleGroup"> | [`ToggleGroup`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/components/primitives.md#togglegroup), `ToggleGroupItem`, `ToggleGroupSeparator` | Single or multiple toggle group sharing variant and size. | `ToggleGroup`, `ToggleGroupItem` |
@@ -294,13 +295,13 @@ Vue has none. "(same parts)" means Vue exports the same sub-components.
 
 | Preview | Component | What it does | @nxgt/material-vue |
 | --- | --- | --- | --- |
-| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/previews/buttons-actions-button.webp" width="120" alt="Button"> | [`Button`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/components/buttons-and-actions.md#button) | Filled, tonal, outlined, ghost or link button in seven colours, with a loading state. | `Button` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/previews/buttons-actions-button.webp" width="120" alt="Button"> | [`Button`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/components/buttons-and-actions.md#button) | Filled, tonal, outlined, ghost or link button in seven colours, four sizes and four square icon sizes, with a loading state. | `Button` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/previews/buttons-actions-iconbutton.webp" width="120" alt="IconButton"> | [`IconButton`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/components/buttons-and-actions.md#iconbutton) | Icon-only button with an optional tooltip. | `IconButton` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/previews/buttons-actions-buttongroup.webp" width="120" alt="ButtonGroup"> | [`ButtonGroup`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/components/buttons-and-actions.md#buttongroup) | Joins adjacent buttons into one control. | `ButtonGroup` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/previews/buttons-actions-splitbutton.webp" width="120" alt="SplitButton"> | [`SplitButton`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/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@2/docs/previews/buttons-actions-responsivebutton.webp" width="120" alt="ResponsiveButton"> | [`ResponsiveButton`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/components/buttons-and-actions.md#responsivebutton) | Shows its label on desktop and collapses to icon-only on mobile, keeping the label for screen readers. | `ResponsiveButton` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/previews/buttons-actions-linkbutton.webp" width="120" alt="LinkButton"> | [`LinkButton`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/components/buttons-and-actions.md#linkbutton), `IconLinkButton`, `ResponsiveLinkButton` | The button styles rendered as `react-router` links. | `LinkButton`, `IconLinkButton`, `ResponsiveLinkButton` |
-| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/previews/buttons-actions-copybutton.webp" width="120" alt="CopyButton"> | [`CopyButton`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/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` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/previews/buttons-actions-copybutton.webp" width="120" alt="CopyButton"> | [`CopyButton`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/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@2/docs/previews/buttons-actions-highlighttext.webp" width="120" alt="HighlightText"> | [`HighlightText`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/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@2/docs/previews/buttons-actions-loadmorebutton.webp" width="120" alt="LoadMoreButton"> | [`LoadMoreButton`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/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@2/docs/previews/buttons-actions-scrolltotop.webp" width="120" alt="ScrollToTop"> | [`ScrollToTop`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/components/buttons-and-actions.md#scrolltotop) | Floating button that appears past a scroll threshold. | `ScrollToTop` |
@@ -324,14 +325,14 @@ Vue has none. "(same parts)" means Vue exports the same sub-components.
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/previews/form-fields-urlfield.webp" width="120" alt="UrlField"> | [`UrlField`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/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@2/docs/previews/form-fields-searchfield.webp" width="120" alt="SearchField"> | [`SearchField`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/components/form-fields.md#searchfield) · `SearchFormField` | Search icon, clear button and spinner, with a debounced `onValueChange`. | `SearchField`, `SearchFormField` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/previews/form-fields-colorfield.webp" width="120" alt="ColorField"> | [`ColorField`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/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@2/docs/previews/form-fields-otpfield.webp" width="120" alt="OtpField"> | [`OtpField`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/components/form-fields.md#otpfield) · `OtpFormField` | One-time code input of configurable length. | `OtpField`, `OtpFormField`, `InputOTP` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/previews/form-fields-otpfield.webp" width="120" alt="OtpField"> | [`OtpField`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/components/form-fields.md#otpfield) · `OtpFormField`, `InputOTP`, `InputOTPGroup`, `InputOTPSlot`, `InputOTPSeparator` | One-time code input of configurable length; the `InputOTP` parts compose your own. | `OtpField`, `OtpFormField`, `InputOTP` (same parts) |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/previews/form-fields-inputgroupfield.webp" width="120" alt="InputGroupField"> | [`InputGroupField`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/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@2/docs/previews/form-fields-inlineedit.webp" width="120" alt="InlineEdit"> | [`InlineEdit`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/components/form-fields.md#inlineedit) · `InlineEditFormField` | Click-to-edit text with save and cancel. | `InlineEdit` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/previews/form-fields-inlineedit.webp" width="120" alt="InlineEdit"> | [`InlineEdit`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/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@2/docs/previews/form-fields-countryfield.webp" width="120" alt="CountryField"> | [`CountryField`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/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@2/docs/previews/form-fields-timezonefield.webp" width="120" alt="TimezoneField"> | [`TimezoneField`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/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@2/docs/previews/form-fields-ratingfield.webp" width="120" alt="RatingField"> | [`RatingField`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/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@2/docs/previews/form-fields-slider.webp" width="120" alt="Slider"> | [`Slider`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/components/form-fields.md#slider) · `SliderFormField` | Labelled single or range slider with an editable value and ticks. | `Slider`, `SliderField`, `SliderFormField` |
-| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/previews/form-fields-switch.webp" width="120" alt="Switch"> | [`Switch`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/components/form-fields.md#switch) · `SwitchFormField` | Toggle switch, optionally in a labelled, bordered row. | `Switch`, `SwitchField`, `SwitchFormField` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/previews/form-fields-slider.webp" width="120" alt="Slider"> | [`Slider`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/components/form-fields.md#slider), `SliderField` · `SliderFormField` | Labelled single or range slider with an editable value and ticks. `SliderField` is an alias, Vue's name. | `Slider`, `SliderField`, `SliderFormField` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/previews/form-fields-switch.webp" width="120" alt="Switch"> | [`Switch`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/components/form-fields.md#switch), `SwitchField` · `SwitchFormField` | Toggle switch, optionally in a labelled, bordered row. `SwitchField` is an alias, Vue's name. | `Switch`, `SwitchField`, `SwitchFormField` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/previews/form-fields-attributes.webp" width="120" alt="AttributesField"> | [`AttributesField`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/components/form-fields.md#attributes), `AttributesList`, `AttributeDialog`, `AttributeForm`, `AttributeValuesForm` · `AttributesFormField`, `AttributeValuesFormFieldSet`, `AttributeValueFormField` | Editor for typed custom attributes (string, number, date, select, rich text…). | `AttributesField`, `AttributesList`, `AttributeDialog`, `AttributeForm`, `AttributeValuesForm`, `AttributesFormField`, `AttributeValuesFormFieldSet`, `AttributeValueFormField` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/previews/form-fields-contacts.webp" width="120" alt="Contacts"> | [`Contacts`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/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@2/docs/previews/form-fields-postaladdress.webp" width="120" alt="PostalAddress"> | [`PostalAddress`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/components/form-fields.md#postaladdress), `PostalAddressDialog` · `PostalAddressFormField` | Address card with an edit dialog. | `PostalAddress`, `PostalAddressDialog`, `PostalAddressFormField` |
@@ -343,7 +344,7 @@ Vue has none. "(same parts)" means Vue exports the same sub-components.
 | --- | --- | --- | --- |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/previews/date-time-calendar.webp" width="120" alt="Calendar"> | [`Calendar`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/components/date-and-time.md#calendar), `CalendarDayButton` | Day-picker calendar with a year view, a today shortcut and `disablePast` / `disableFuture`. | `Calendar` (Reka parts) |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/previews/date-time-datefield.webp" width="120" alt="DateField"> | [`DateField`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/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@2/docs/previews/date-time-daterangefield.webp" width="120" alt="DateRangeField"> | [`DateRangeField`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/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@2/docs/previews/date-time-daterangefield.webp" width="120" alt="DateRangeField"> | [`DateRangeField`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/components/date-and-time.md#daterangefield) · `DateRangeFormField` | From / to range picked in a popover calendar, with presets and times. | `DateRangeField`, `DateRangeFormField` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/previews/date-time-timefield.webp" width="120" alt="TimeField"> | [`TimeField`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/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@2/docs/previews/date-time-timepicker.webp" width="120" alt="TimePicker"> | [`TimePicker`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/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@2/docs/previews/date-time-durationfield.webp" width="120" alt="DurationField"> | [`DurationField`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/components/date-and-time.md#durationfield) · `DurationFormField` | Hours and minutes combined into a total in minutes. | `DurationField`, `DurationFormField` |
@@ -352,19 +353,20 @@ Vue has none. "(same parts)" means Vue exports the same sub-components.
 
 | Preview | Component | What it does | @nxgt/material-vue |
 | --- | --- | --- | --- |
-| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/previews/selection-choice-select.webp" width="120" alt="Select"> | [`Select`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/components/selection-and-choice.md#select), `SelectTrigger`, `SelectValue`, `SelectContent`, `SelectItem`, `SelectGroup`, `SelectLabel`… | Select primitives with groups, labels and scroll buttons. | `Select` (same parts), `NativeSelect` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/previews/selection-choice-select.webp" width="120" alt="Select"> | [`Select`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/components/selection-and-choice.md#select), `SelectTrigger`, `SelectValue`, `SelectContent`, `SelectItem`, `SelectGroup`, `SelectLabel`…, `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@2/docs/previews/selection-choice-selectfield.webp" width="120" alt="SelectField"> | [`SelectField`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/components/selection-and-choice.md#selectfield) · `SelectFormField` | Labelled select built from `options`, with `renderOption`. | `SelectField`, `SelectFormField` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/previews/selection-choice-combobox.webp" width="120" alt="Combobox"> | [`Combobox`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/components/selection-and-choice.md#combobox), `ComboboxInput`, `ComboboxContent`, `ComboboxList`, `ComboboxItem`, `ComboboxChips`… | Base UI combobox primitives: input, popup list, groups and chips. | — |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/previews/selection-choice-comboboxfield.webp" width="120" alt="ComboboxField"> | [`ComboboxField`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/components/selection-and-choice.md#comboboxfield) · `ComboboxFormField` | Labelled, searchable single select over `{ value, label }` options. | `ComboboxField`, `ComboboxFormField` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/previews/selection-choice-autocomplete.webp" width="120" alt="Autocomplete"> | [`Autocomplete`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/components/selection-and-choice.md#autocomplete), `AutocompleteChips` · `AutocompleteFormField` | Single or multiple (chips) autocomplete with free-solo values and a query callback. | `Autocomplete`, `AutocompleteFormField` |
-| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/previews/selection-choice-checkbox.webp" width="120" alt="Checkbox"> | [`Checkbox`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/components/selection-and-choice.md#checkbox) · `CheckboxFormField` | Checkbox with label, helper text and an indeterminate state. | `Checkbox` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/previews/selection-choice-checkbox.webp" width="120" alt="Checkbox"> | [`Checkbox`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/components/selection-and-choice.md#checkbox) · `CheckboxFormField` | Checkbox with label, helper text and an indeterminate state. | `Checkbox`, `CheckboxFormField` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/previews/selection-choice-checkboxgroup.webp" width="120" alt="CheckboxGroup"> | [`CheckboxGroup`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/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@2/docs/previews/selection-choice-radiogroup.webp" width="120" alt="RadioGroup"> | [`RadioGroup`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/components/selection-and-choice.md#radiogroup), `RadioGroupItem` · `RadioGroupFormField` | Labelled radio group built from `options`, horizontal or vertical. | `RadioGroupField`, `RadioGroup`, `RadioGroupFormField` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/previews/selection-choice-radiogroup.webp" width="120" alt="RadioGroup"> | [`RadioGroup`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/components/selection-and-choice.md#radiogroup), `RadioGroupField`, `RadioGroupItem` · `RadioGroupFormField` | Labelled radio group built from `options`, horizontal or vertical. `RadioGroupField` is an alias, Vue's name. | `RadioGroupField`, `RadioGroup`, `RadioGroupFormField` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/previews/selection-choice-checkcardfield.webp" width="120" alt="CheckCardField"> | [`CheckCardField`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/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@2/docs/previews/selection-choice-selectcardfield.webp" width="120" alt="SelectCardField"> | [`SelectCardField`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/components/selection-and-choice.md#selectcardfield) · `SelectCardFormField` | Single or multiple choice shown as `ActionCard`s. | `SelectCardField`, `SelectCardFormField` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/previews/selection-choice-selectchipfield.webp" width="120" alt="SelectChipField"> | [`SelectChipField`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/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@2/docs/previews/selection-choice-transferlist.webp" width="120" alt="TransferList"> | [`TransferList`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/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@2/docs/previews/selection-choice-sortablelist.webp" width="120" alt="SortableList"> | [`SortableList`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/components/selection-and-choice.md#sortablelist) · `SortableListFormField` | Searchable list of strings you reorder by dragging or with the keyboard. | `SortableList`, `SortableListFormField` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/previews/selection-choice-treeselectfield.webp" width="120" alt="TreeSelectField"> | [`TreeSelectField`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/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@2/docs/previews/selection-choice-switcher.webp" width="120" alt="Switcher"> | [`Switcher`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/components/selection-and-choice.md#switcher) | Dropdown for switching the active workspace or account, with an avatar. | `Switcher` |
 
 ### Data display
@@ -388,7 +390,7 @@ Vue has none. "(same parts)" means Vue exports the same sub-components.
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/previews/data-display-timeline.webp" width="120" alt="Timeline"> | [`Timeline`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/components/data-display.md#timeline), `TimelineItem`, `RelativeTime` | Vertical event timeline with toned icons and relative times. | `Timeline`, `TimelineItem`, `RelativeTime` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/previews/data-display-eventchip.webp" width="120" alt="EventChip"> | [`EventChip`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/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@2/docs/previews/data-display-codeblock.webp" width="120" alt="CodeBlock"> | [`CodeBlock`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/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@2/docs/previews/data-display-markdown.webp" width="120" alt="Markdown"> | [`Markdown`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/components/data-display.md#markdown), `MermaidDiagram` | GFM markdown with KaTeX math and mermaid diagrams (`clientOnly`). Fences reuse `CodeBlock`. `ChatMarkdown` renders through it. | `Markdown` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/previews/data-display-markdown.webp" width="120" alt="Markdown"> | [`Markdown`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/components/data-display.md#markdown), `MermaidDiagram` | GFM markdown with KaTeX math and mermaid diagrams (`clientOnly`). Fences reuse `CodeBlock`. `ChatMarkdown` renders through it. | `Markdown`, `MermaidDiagram` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/previews/data-display-terminal.webp" width="120" alt="Terminal"> | [`Terminal`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/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@2/docs/previews/data-display-figure.webp" width="120" alt="Figure"> | [`Figure`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/components/data-display.md#figure) | Framed media with an optional caption. | `Figure` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/previews/data-display-apioperation.webp" width="120" alt="ApiEndpoint"> | [`ApiEndpoint`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/components/data-display.md#apiendpoint), `ApiOperation` | HTTP method badge, path and copy; `ApiOperation` adds a param table and example `CodeGroup`. | `ApiEndpoint`, `ApiOperation` |
@@ -400,10 +402,10 @@ Vue has none. "(same parts)" means Vue exports the same sub-components.
 
 | Preview | Component | What it does | @nxgt/material-vue |
 | --- | --- | --- | --- |
-| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/previews/data-table-filter-lists-datatable.webp" width="120" alt="DataTable"> | [`DataTable`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/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@2/docs/previews/data-table-filter-lists-datatable.webp" width="120" alt="DataTable"> | [`DataTable`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/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@2/docs/previews/data-table-filter-lists-filter.webp" width="120" alt="Filter"> | [`Filter`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/components/data-table-filter-and-lists.md#filter), `FilterProvider`, `FilterContent`, `FilterChips`, `FilterPresets` · `FilterFormField` | 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@2/docs/components/data-table-filter-and-lists.md#filterinline-filterpopover-filterdialog-filtersheet-filterdrawer), `FilterPopover`, `FilterDialog`, `FilterSheet`, `FilterDrawer` | 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@2/docs/previews/data-table-filter-lists-pagination.webp" width="120" alt="Pagination"> | [`Pagination`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/components/data-table-filter-and-lists.md#pagination), `PaginationContent`, `PaginationItem`, `PaginationLink`, `PaginationBar`… | Pagination primitives. `PaginationBar` adds a sibling window with ellipses. | `Pagination` (parts), `PaginationFirst`, `PaginationLast` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/previews/data-table-filter-lists-pagination.webp" width="120" alt="Pagination"> | [`Pagination`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/components/data-table-filter-and-lists.md#pagination), `PaginationContent`, `PaginationItem`, `PaginationFirst`, `PaginationLast`, `PaginationLink`, `PaginationBar`, `paginationItems`… | Pagination primitives, with first / last links. `PaginationBar` adds a sibling window with ellipses. | `Pagination` (parts), `PaginationFirst`, `PaginationLast`, `PaginationLink`, `PaginationBar`, `paginationItems` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/previews/data-table-filter-lists-tree.webp" width="120" alt="Tree"> | [`Tree`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/components/data-table-filter-and-lists.md#tree), `TreeItem`, `useTree` | Expandable tree with none, single or multiple selection and keyboard navigation. | `Tree`, `TreeItem`, `useTree` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/previews/data-table-filter-lists-drag-and-drop.webp" width="120" alt="DndProvider"> | [`DndProvider`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/components/data-table-filter-and-lists.md#drag-and-drop), `Draggable`, `Droppable`, `Sortable`, `DragHandle`… | Drag-and-drop primitives; see [dnd](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/guides/helpers.md#nxgtmaterialdnd). | `DndProvider`, `Draggable`, `Droppable`, `Sortable`, `DragHandle` |
 
@@ -425,7 +427,7 @@ Vue has none. "(same parts)" means Vue exports the same sub-components.
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/previews/navigation-layout-stepper.webp" width="120" alt="Stepper"> | [`Stepper`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/components/navigation-and-layout.md#stepper), `StepperIndicator` | Clickable horizontal or vertical steps with status and progress; compact on mobile. | `Stepper` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/previews/navigation-layout-steps.webp" width="120" alt="Steps"> | [`Steps`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/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@2/docs/previews/navigation-layout-hero.webp" width="120" alt="Hero"> | [`Hero`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/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@2/docs/previews/navigation-layout-doc.webp" width="120" alt="Doc"> | [`Doc`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/components/navigation-and-layout.md#doc), `DocPage`, `DocTopbar`, `DocSidebar`, `DocToc`, `DocPager`, `DocSearch`, `DocChildCards`, `DocSeeAlso`, `DocEmpty`, `DocProgress` | Documentation site shell: sidebar from `md`, TOC rail from `xl`. Reading bar, copy-page / markdown, child cards, see also, and a 404 slot. Storybook `UI/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@2/docs/previews/navigation-layout-doc.webp" width="120" alt="Doc"> | [`Doc`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/components/navigation-and-layout.md#doc), `DocPage`, `DocTopbar`, `DocSidebar`, `DocToc`, `DocPager`, `DocSearch`, `DocChildCards`, `DocSeeAlso`, `DocEmpty`, `DocProgress` | Documentation site shell: sidebar from `md`, TOC rail from `xl`. Reading bar, copy-page / markdown, child cards, see also, and a 404 slot. Storybook `UI/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@2/docs/previews/navigation-layout-background.webp" width="120" alt="Background"> | [`Background`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/components/navigation-and-layout.md#background) | Full-viewport gradient with blurred colour blobs; centres its children. | `Background` |
 | — | [`NavigationRail`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/components/navigation-and-layout.md#navigationrail) | Placeholder: renders an empty rail container and takes no props yet. | `NavigationRail` |
 
@@ -433,7 +435,7 @@ Vue has none. "(same parts)" means Vue exports the same sub-components.
 
 | Preview | Component | What it does | @nxgt/material-vue |
 | --- | --- | --- | --- |
-| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/previews/overlays-menus-dialog.webp" width="120" alt="Dialog"> | [`Dialog`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/components/overlays-and-menus.md#dialog), `DialogTrigger`, `DialogContent`, `DialogHeader`, `DialogTitle`, `DialogDescription`, `DialogFooter`, `DialogClose`… | Modal dialog parts with an icon close button. | `Dialog` (same parts), `DialogScrollContent` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/previews/overlays-menus-dialog.webp" width="120" alt="Dialog"> | [`Dialog`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/components/overlays-and-menus.md#dialog), `DialogTrigger`, `DialogContent`, `DialogHeader`, `DialogTitle`, `DialogDescription`, `DialogFooter`, `DialogClose`, `DialogScrollContent`… | Modal dialog parts with an icon close button; `DialogScrollContent` scrolls a dialog taller than the screen. | `Dialog` (same parts) |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/previews/overlays-menus-sheet.webp" width="120" alt="Sheet"> | [`Sheet`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/components/overlays-and-menus.md#sheet), `SheetTrigger`, `SheetContent`, `SheetHeader`, `SheetTitle`, `SheetFooter`… | Panel that slides in from any edge. | `Sheet` (same parts) |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/previews/overlays-menus-drawer.webp" width="120" alt="Drawer"> | [`Drawer`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/components/overlays-and-menus.md#drawer), `DrawerTrigger`, `DrawerContent`, `DrawerHeader`, `DrawerTitle`, `DrawerFooter`… | Swipeable bottom or side drawer (Vaul). | `Drawer` (same parts) |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/previews/overlays-menus-popover.webp" width="120" alt="Popover"> | [`Popover`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/components/overlays-and-menus.md#popover), `PopoverTrigger`, `PopoverContent`, `PopoverAnchor` | Floating panel anchored to a trigger. | `Popover` (same parts) |
@@ -457,7 +459,7 @@ Vue has none. "(same parts)" means Vue exports the same sub-components.
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/previews/feedback-status-progress.webp" width="120" alt="Progress"> | [`Progress`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/components/feedback-and-status.md#progress), `CircularProgress`, `ProgressField` | Linear bar, circular ring with a label, and a labelled progress field. | `Progress`, `CircularProgress`, `ProgressField` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/previews/feedback-status-scrollprogress.webp" width="120" alt="ScrollProgress"> | [`ScrollProgress`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/components/feedback-and-status.md#scrollprogress) | Hairline that tracks window or a scrollable `target` (`react-use` `useWindowScroll` / `useScroll`). `DocProgress` composes it. | `ScrollProgress` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/previews/feedback-status-spinner.webp" width="120" alt="Spinner"> | [`Spinner`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/components/feedback-and-status.md#spinner) | Loading spinner in several styles and colours. | `Spinner` |
-| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/previews/feedback-status-toast.webp" width="120" alt="Toaster"> | [`Toaster`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/components/feedback-and-status.md#toast), `toast`, `toasts`, `Toast` | Sonner toasts with icon and action. `toasts` provides `success` / `error` / `warning` / `info` / `loading` presets. | `Toaster`, `toast`, `toasts`, `Toast` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/previews/feedback-status-toast.webp" width="120" alt="Toaster"> | [`Toaster`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/components/feedback-and-status.md#toast), `toast`, `toasts`, `Toast` | Sonner toasts with icon and action (`ToastAction`). `toasts` provides `success` / `error` / `warning` / `info` / `loading` presets. | `Toaster`, `toast`, `toasts`, `Toast` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/previews/feedback-status-skeleton.webp" width="120" alt="Skeleton"> | [`Skeleton`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/components/feedback-and-status.md#skeleton), `SkeletonAvatar`, `SkeletonCard`, `SkeletonText`, `SkeletonTable` | Loading placeholder and ready-made shapes. | `Skeleton` (same parts) |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/previews/feedback-status-hydrateloading.webp" width="120" alt="HydrateLoading"> | [`HydrateLoading`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/components/feedback-and-status.md#hydrateloading) | Full-area spinner shown while hydrating. | `HydrateLoading` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/previews/feedback-status-notifications.webp" width="120" alt="Notifications"> | [`Notifications`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/components/feedback-and-status.md#notifications) | Notification centre as a bell popover with an unread count, or as an inline panel, with filters and read / dismiss. | `Notifications` |
@@ -469,7 +471,8 @@ Vue has none. "(same parts)" means Vue exports the same sub-components.
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/previews/media-files-s3uploadfield.webp" width="120" alt="S3UploadField"> | [`S3UploadField`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/components/media-and-files.md#s3uploadfield-networkuploadfield), `NetworkUploadField` · `S3UploadFormField`, `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@2/docs/previews/media-files-uploadfield.webp" width="120" alt="UploadField"> | [`UploadField`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/components/media-and-files.md#uploadfield) · `UploadFormField` | Labelled file input showing the chosen file's name. | `UploadField`, `UploadFormField` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/previews/media-files-filelist.webp" width="120" alt="FileList"> | [`FileList`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/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@2/docs/components/media-and-files.md#filesformfield) | Free-solo autocomplete of file URLs, with image thumbnails. | — |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/previews/media-files-filepreview.webp" width="120" alt="FilePreview"> | [`FilePreview`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/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@2/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@2/docs/previews/media-files-imagefield.webp" width="120" alt="ImageField"> | [`ImageField`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/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@2/docs/previews/media-files-imagecropper.webp" width="120" alt="ImageCropper"> | [`ImageCropper`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/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@2/docs/previews/media-files-gallery.webp" width="120" alt="Gallery"> | [`Gallery`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/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` |
@@ -477,6 +480,7 @@ Vue has none. "(same parts)" means Vue exports the same sub-components.
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/previews/media-files-pdfreader.webp" width="120" alt="PdfReader"> | [`PdfReader`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/components/media-and-files.md#pdfreader), `PdfViewer` (deprecated alias), `PdfToolbar`, `PdfSidebar`, `PdfPageList`… | Browser-only PDF reader with zoom, rotation, search, thumbnails, outline and print. | `PdfReader`, `PdfViewer` (same parts) |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/previews/media-files-stxplayer.webp" width="120" alt="StxPlayer"> | [`StxPlayer`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/components/media-and-files.md#stxplayer), `StxPlayerProvider`, `StxPlayerMini`, `StxPlayerQueue`… | 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@2/docs/components/media-and-files.md#videoplayer) | Deprecated alias of `StxPlayer`. | `VideoPlayer` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/previews/media-files-camera.webp" width="120" alt="Camera"> | [`Camera`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/components/media-and-files.md#camera), `useCamera`, `capturePhotoFromVideo` | Webcam preview with a start / stop toggle and a still capture. Browser-only: renders after mount. | `Camera`, `useCamera`, `capturePhotoFromVideo` |
 | — | [`PrintDocument`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/components/media-and-files.md#print-components), `PrintHeader`, `PrintSection`, `PrintTable`, `PrintTotals`, `PrintCard`, `PrintDataTable`, `PrintKeyValue`, `PrintMetric`… | `@react-pdf/renderer` page shell (size, margins, repeated header and footer, page numbers, watermark) and building blocks for printable PDF documents, with a shared `tw`; tables, detail blocks and figures from column definitions and plain rows. From `@nxgt/material/print`, not `/components`. | `PrintHeader`, `PrintSection`, `PrintTable`, `PrintTotals`, `PrintCard` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/previews/media-files-map.webp" width="120" alt="Map"> | [`Map`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/components/media-and-files.md#map), `Marker`, `LocationMarker`, `LocationPreview`, `MapActions`, `MinimapControl` · `LocationField`, `LocationFormField` | Leaflet map, markers, controls and a location field. From `@nxgt/material/map`, not `/components`: browser-only, optional peers, `map.css` ([maps guide](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/guides/maps.md)). | `Map`, `Marker`, `LocationMarker`, `LocationPreview`, `MapActions` · `LocationField`, `LocationFormField` (`@nxgt/material-vue/map`) |
 
@@ -491,11 +495,14 @@ Vue has none. "(same parts)" means Vue exports the same sub-components.
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/previews/rich-widgets-emojipicker.webp" width="120" alt="EmojiPicker"> | [`EmojiPicker`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/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@2/docs/previews/rich-widgets-mentionlist.webp" width="120" alt="MentionList"> | [`MentionList`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/components/rich-widgets.md#mentionlist) | `@` mention list from an `items` prop (local search). ChatComposer and the RTE suggestion list use it. | `MentionList` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/previews/rich-widgets-richtexteditor.webp" width="120" alt="RichTextEditor"> | [`RichTextEditor`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/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@2/docs/previews/rich-widgets-codeeditor.webp" width="120" alt="CodeEditor"> | [`CodeEditor`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/components/rich-widgets.md#codeeditor) · `CodeEditorFormField` | Monaco editor field with a label and a language switch. | `CodeEditor` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/previews/rich-widgets-codeeditor.webp" width="120" alt="CodeEditor"> | [`CodeEditor`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/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@2/docs/previews/rich-widgets-quiz.webp" width="120" alt="Quiz"> | [`Quiz`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/components/rich-widgets.md#quiz), `QuestionCard` | Quiz and question cards composed from Card, ActionCard, GaugeCard, ChecklistCard, ProgressField and TextField. Container queries. | `Quiz`, `QuestionCard` |
 
-`@nxgt/material-vue` also has components with no React counterpart here:
-`Camera`, `NativeSelect` and the `InputOTP` primitives.
+`RadioGroupField`, `SliderField` and `SwitchField` are aliases of the
+labelled `RadioGroup`, `Slider` and `Switch`, under the names
+`@nxgt/material-vue` uses, so code reads the same in both libraries. Both
+names work and neither is deprecated; the full naming alignment is planned
+for 3.0.
 
 ## Traps
 

package/dist/{_Uint8Array-DEXn42kj.js → _Uint8Array-CDlDeQmw.js}

@@ -1,4 +1,4 @@
-import { S as e, T as t, d as n, g as r, l as i, u as a, v as o, w as s, x as c } from "./translator-Cfug7hC5.js";
+import { S as e, T as t, d as n, g as r, l as i, u as a, v as o, w as s, x as c } from "./translator-CaIYjyFP.js";
 //#region ../../node_modules/lodash-es/_isIndex.js
 var l = 9007199254740991, u = /^(?:0|[1-9]\d*)$/;
 function d(e, t) {

package/dist/_overRest-CWIWQwDJ.js

@@ -0,0 +1,81 @@
+import { m as e, p as t } from "./translator-CaIYjyFP.js";
+//#region ../../node_modules/lodash-es/identity.js
+function n(e) {
+	return e;
+}
+//#endregion
+//#region ../../node_modules/lodash-es/_apply.js
+function r(e, t, n) {
+	switch (n.length) {
+		case 0: return e.call(t);
+		case 1: return e.call(t, n[0]);
+		case 2: return e.call(t, n[0], n[1]);
+		case 3: return e.call(t, n[0], n[1], n[2]);
+	}
+	return e.apply(t, n);
+}
+//#endregion
+//#region ../../node_modules/lodash-es/_shortOut.js
+var i = 800, a = 16, o = Date.now;
+function s(e) {
+	var t = 0, n = 0;
+	return function() {
+		var r = o(), s = a - (r - n);
+		if (n = r, s > 0) {
+			if (++t >= i) return arguments[0];
+		} else t = 0;
+		return e.apply(void 0, arguments);
+	};
+}
+//#endregion
+//#region ../../node_modules/lodash-es/constant.js
+function c(e) {
+	return function() {
+		return e;
+	};
+}
+//#endregion
+//#region ../../node_modules/lodash-es/_defineProperty.js
+var l = function() {
+	try {
+		var t = e(Object, "defineProperty");
+		return t({}, "", {}), t;
+	} catch {}
+}(), u = s(l ? function(e, t) {
+	return l(e, "toString", {
+		configurable: !0,
+		enumerable: !1,
+		value: c(t),
+		writable: !0
+	});
+} : n);
+//#endregion
+//#region ../../node_modules/lodash-es/_baseAssignValue.js
+function d(e, t, n) {
+	t == "__proto__" && l ? l(e, t, {
+		configurable: !0,
+		enumerable: !0,
+		value: n,
+		writable: !0
+	}) : e[t] = n;
+}
+//#endregion
+//#region ../../node_modules/lodash-es/_assignValue.js
+var f = Object.prototype.hasOwnProperty;
+function p(e, n, r) {
+	var i = e[n];
+	(!(f.call(e, n) && t(i, r)) || r === void 0 && !(n in e)) && d(e, n, r);
+}
+//#endregion
+//#region ../../node_modules/lodash-es/_overRest.js
+var m = Math.max;
+function h(e, t, n) {
+	return t = m(t === void 0 ? e.length - 1 : t, 0), function() {
+		for (var i = arguments, a = -1, o = m(i.length - t, 0), s = Array(o); ++a < o;) s[a] = i[t + a];
+		a = -1;
+		for (var c = Array(t + 1); ++a < t;) c[a] = i[a];
+		return c[t] = n(s), r(e, this, c);
+	};
+}
+//#endregion
+export { c as a, u as i, p as n, n as o, d as r, h as t };

package/dist/{abnfDiagram-O67JEVCF-C7NxOWqd.js → abnfDiagram-O67JEVCF-Cl4ukf6a.js}

@@ -1,9 +1,9 @@
-import { n as e } from "./src-CJ8DNrI1.js";
+import { n as e } from "./src-C9kQSo6K.js";
 import { m as t, t as n } from "./mermaid-parser.core-BXD_TD1T.js";
 import { n as r } from "./chunk-Y2CYZVJY-BAad7w_K.js";
-import "./chunk-O7XYJQB3-C87zK8E5.js";
-import "./chunk-6AEJRKK7-DDXoGWDs.js";
-import { n as i, r as a, t as o } from "./chunk-GTNCS2PH-CzDYTYNy.js";
+import "./chunk-O7XYJQB3-A66QSOPA.js";
+import "./chunk-6AEJRKK7-3YWRP4aV.js";
+import { n as i, r as a, t as o } from "./chunk-GTNCS2PH-BZ9WMD1v.js";
 import { t as s } from "./chunk-JWPE2WC7-BGVSGRTC.js";
 //#region ../../node_modules/mermaid/dist/chunks/mermaid.core/abnfDiagram-O67JEVCF.mjs
 var c = t().RailroadAbnf.parser.LangiumParser, l = /* @__PURE__ */ r((e) => {

package/dist/{architectureDiagram-NJMV4G6O-BIvwyzEh.js → architectureDiagram-NJMV4G6O-WmFlBQF5.js}

@@ -1,13 +1,13 @@
-import { bt as e, gt as t } from "./icon-button-Dl9PDYCE.js";
-import { n, t as r } from "./src-CJ8DNrI1.js";
-import { c as i, i as a } from "./chunk-ZIGJFQKS-HDJ6e6OJ.js";
+import { bt as e, gt as t } from "./icon-button-BxySFfrr.js";
+import { n, t as r } from "./src-C9kQSo6K.js";
+import { c as i, i as a } from "./chunk-ZIGJFQKS-C3xUAXJq.js";
 import { n as o } from "./mermaid-parser.core-BXD_TD1T.js";
 import { n as s } from "./chunk-Y2CYZVJY-BAad7w_K.js";
-import { H as c, U as l, Y as u, a as d, b as f, f as p, q as m, v as h, w as g, x as _, y as v, z as y } from "./chunk-O7XYJQB3-C87zK8E5.js";
-import { t as b } from "./chunk-6AEJRKK7-DDXoGWDs.js";
+import { H as c, U as l, Y as u, a as d, b as f, f as p, q as m, v as h, w as g, x as _, y as v, z as y } from "./chunk-O7XYJQB3-A66QSOPA.js";
+import { t as b } from "./chunk-6AEJRKK7-3YWRP4aV.js";
 import { t as x } from "./chunk-JWPE2WC7-BGVSGRTC.js";
-import { i as S, r as C, t as w } from "./chunk-742MDFTN-nG_ROTnT.js";
-import { n as T } from "./chunk-MBY4JIJT-IA2XBafa.js";
+import { i as S, r as C, t as w } from "./chunk-742MDFTN-Cs1qGiTK.js";
+import { n as T } from "./chunk-MBY4JIJT-C3RQP_Nk.js";
 import { t as E } from "./cytoscape.esm-DXVRLXF3.js";
 //#region ../../node_modules/cytoscape-fcose/node_modules/cose-base/node_modules/layout-base/layout-base.js
 var D = /* @__PURE__ */ t(((e, t) => {