@nxgt/material-vue 0.23.4 → 0.24.0

package/README.md

@@ -334,9 +334,13 @@ example and the options that matter. In the *Component* column, `·` separates
 a field from its vee-validate wrapper, and "+ parts" means the family exports
 more sub-components. The last column gives the matching export in
 [`@nxgt/material`](https://www.npmjs.com/package/@nxgt/material), or `—`
-when React has none. `Combobox` and `FilesFormField` are React entries with
-no Vue counterpart; they keep a row, and their page says what to use
-instead.
+when React has none. `Combobox` (not planned) 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)).
 
 ### Primitives
 
@@ -356,7 +360,7 @@ instead.
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/primitives-icon.webp" width="120" alt="Icon"> | [`Icon`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/primitives.md#icon) | Font Awesome sprite icon by name and style (duotone by default), labelled with `role="img"`. | `Icon` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/primitives-kbd.webp" width="120" alt="Kbd"> | [`Kbd`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/primitives.md#kbd), `KbdShortcut` | One keyboard key, or a key combination with platform glyphs. | `Kbd`, `KbdShortcut` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/primitives-separator.webp" width="120" alt="Separator"> | [`Separator`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/primitives.md#separator) | Horizontal or vertical divider. | `Separator` |
-| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/primitives-table.webp" width="120" alt="Table"> | [`Table`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/primitives.md#table), `TableHeader`, `TableBody`, `TableRow`, `TableHead`, `TableCell`, `TableEmpty` + parts | Styled semantic table inside a scrollable wrapper. | `Table` (same parts; no `TableEmpty`) |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/primitives-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-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` |
@@ -373,7 +377,7 @@ instead.
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/buttons-actions-splitbutton.webp" width="120" alt="SplitButton"> | [`SplitButton`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/buttons-and-actions.md#splitbutton) | Main action plus a dropdown menu of secondary actions. | `SplitButton` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/buttons-actions-responsivebutton.webp" width="120" alt="ResponsiveButton"> | [`ResponsiveButton`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/buttons-and-actions.md#responsivebutton) | Shows its label on desktop and collapses to icon-only on mobile. | `ResponsiveButton` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/buttons-actions-linkbutton.webp" width="120" alt="LinkButton"> | [`LinkButton`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/buttons-and-actions.md#linkbutton), `IconLinkButton`, `ResponsiveLinkButton` | The button styles rendered as `vue-router` links. | `LinkButton`, `IconLinkButton`, `ResponsiveLinkButton` |
-| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/buttons-actions-copybutton.webp" width="120" alt="CopyButton"> | [`CopyButton`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/buttons-and-actions.md#copybutton) | Copies a value to the clipboard and briefly shows a check mark. | `CopyButton`, `CopyValue` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/buttons-actions-copybutton.webp" width="120" alt="CopyButton"> | [`CopyButton`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/buttons-and-actions.md#copybutton), `CopyValue` | Copies a value to the clipboard and briefly shows a check mark. `CopyValue` displays the value next to the button. | `CopyButton`, `CopyValue` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/buttons-actions-highlighttext.webp" width="120" alt="HighlightText"> | [`HighlightText`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/buttons-and-actions.md#highlighttext) | Marks case-insensitive matches of a query inside a string (`splitMatch`). | `HighlightText` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/buttons-actions-loadmorebutton.webp" width="120" alt="LoadMoreButton"> | [`LoadMoreButton`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/buttons-and-actions.md#loadmorebutton) | "Load more" button for cursor pagination; icon-only with a tooltip unless `expanded`. | `LoadMoreButton` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/buttons-actions-scrolltotop.webp" width="120" alt="ScrollToTop"> | [`ScrollToTop`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/buttons-and-actions.md#scrolltotop) | Floating button that appears past a scroll threshold. | `ScrollToTop` |
@@ -397,14 +401,14 @@ instead.
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/form-fields-urlfield.webp" width="120" alt="UrlField"> | [`UrlField`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/form-fields.md#urlfield) · `UrlFormField` | Validates on blur; open-in-new-tab and copy buttons. | `UrlField`, `UrlFormField` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/form-fields-searchfield.webp" width="120" alt="SearchField"> | [`SearchField`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/form-fields.md#searchfield) · `SearchFormField` | Search icon, clear button and spinner, with a debounced `value-change` event. | `SearchField`, `SearchFormField` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/form-fields-colorfield.webp" width="120" alt="ColorField"> | [`ColorField`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/form-fields.md#colorfield) · `ColorFormField` | Hex input with a colour picker in a popover. | `ColorField`, `ColorFormField` |
-| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/form-fields-otpfield.webp" width="120" alt="OtpField"> | [`OtpField`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/form-fields.md#otpfield) · `OtpFormField`, `InputOTP`, `InputOTPGroup`, `InputOTPSlot`, `InputOTPSeparator` | One-time code input of configurable length. | `OtpField`, `OtpFormField` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/form-fields-otpfield.webp" width="120" alt="OtpField"> | [`OtpField`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/form-fields.md#otpfield) · `OtpFormField`, `InputOTP`, `InputOTPGroup`, `InputOTPSlot`, `InputOTPSeparator` | One-time code input of configurable length. | `OtpField`, `OtpFormField`, `InputOTP` (same parts) |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/form-fields-inputgroupfield.webp" width="120" alt="InputGroupField"> | [`InputGroupField`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/form-fields.md#inputgroupfield) · `InputGroupFormField` | Labelled `InputGroup` with addons and helper text. | `InputGroupField`, `InputGroupFormField` |
-| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/form-fields-inlineedit.webp" width="120" alt="InlineEdit"> | [`InlineEdit`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/form-fields.md#inlineedit) | Click-to-edit text with save and cancel. | `InlineEdit`, `InlineEditFormField` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/form-fields-inlineedit.webp" width="120" alt="InlineEdit"> | [`InlineEdit`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/form-fields.md#inlineedit) · `InlineEditFormField` | Click-to-edit text with save and cancel. | `InlineEdit`, `InlineEditFormField` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/form-fields-countryfield.webp" width="120" alt="CountryField"> | [`CountryField`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/form-fields.md#countryfield) · `CountryFormField` | Single or multiple country picker with flags. | `CountryField`, `CountryFormField` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/form-fields-timezonefield.webp" width="120" alt="TimezoneField"> | [`TimezoneField`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/form-fields.md#timezonefield) · `TimezoneFormField` | Searchable IANA timezone picker with localised labels. | `TimezoneField`, `TimezoneFormField` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/form-fields-ratingfield.webp" width="120" alt="RatingField"> | [`RatingField`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/form-fields.md#ratingfield) · `RatingFormField` | Star rating with hover preview, click-to-clear and a read-only mode. | `RatingField`, `RatingFormField` |
-| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/form-fields-slider.webp" width="120" alt="Slider"> | [`SliderField`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/form-fields.md#slider) · `SliderFormField`, `Slider` | Labelled single or range slider with a value readout. | `Slider`, `SliderFormField` |
-| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/form-fields-switch.webp" width="120" alt="Switch"> | [`SwitchField`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/form-fields.md#switch) · `SwitchFormField`, `Switch` | Toggle switch, optionally in a labelled, bordered row. | `Switch`, `SwitchFormField` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/form-fields-slider.webp" width="120" alt="Slider"> | [`SliderField`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/form-fields.md#slider) · `SliderFormField`, `Slider` | Labelled single or range slider with a value readout. | `Slider`, `SliderField` (alias), `SliderFormField` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/form-fields-switch.webp" width="120" alt="Switch"> | [`SwitchField`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/form-fields.md#switch) · `SwitchFormField`, `Switch` | Toggle switch, optionally in a labelled, bordered row. | `Switch`, `SwitchField` (alias), `SwitchFormField` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/form-fields-attributes.webp" width="120" alt="Attributes"> | [`AttributesField`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/form-fields.md#attributes), `AttributesList`, `AttributeDialog`, `AttributeForm` · `AttributesFormField`, `AttributeValuesForm`, `AttributeValueFormField` · `AttributeValuesFormFieldSet` | Editor for typed custom attributes (string, number, date, select, rich text…). `AttributesField` takes `error` and `helperText`; `AttributesFormField` takes `helperText` and follows `resetForm` / `setFieldValue`. | `AttributesField`, `AttributesList`, `AttributeDialog`, `AttributeForm`, `AttributeValuesForm`, `AttributesFormField`, `AttributeValuesFormFieldSet`, `AttributeValueFormField` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/form-fields-contacts.webp" width="120" alt="Contacts"> | [`Contacts`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/form-fields.md#contacts), `ContactDialog`, `ContactItem` (deprecated) · `ContactsFormField` | Typed contact list (phone, email, URL…) with an add / edit dialog. | `Contacts`, `ContactItem`, `ContactDialog`, `ContactsFormField` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/form-fields-postaladdress.webp" width="120" alt="PostalAddress"> | [`PostalAddress`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/form-fields.md#postaladdress), `PostalAddressDialog` · `PostalAddressFormField` | Address card with an edit dialog. | `PostalAddress`, `PostalAddressDialog`, `PostalAddressFormField` |
@@ -425,14 +429,14 @@ instead.
 
 | Preview | Component | What it does | @nxgt/material |
 | --- | --- | --- | --- |
-| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/selection-choice-select.webp" width="120" alt="Select"> | [`Select`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/selection-and-choice.md#select), `SelectTrigger`, `SelectValue`, `SelectContent`, `SelectItem` + parts, `NativeSelect`, `NativeSelectOption`, `NativeSelectOptGroup` | Select primitives with groups, labels and scroll buttons, plus a styled native `<select>`. | `Select` (same parts) |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/selection-choice-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` |
 | — | [Combobox](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/selection-and-choice.md#combobox) | The raw combobox primitives are not in `@nxgt/material-vue`. Use [`ComboboxField`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/selection-and-choice.md#comboboxfield) for a searchable single select, [`Autocomplete`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/selection-and-choice.md#autocomplete) for several values or free text, or the `Command` parts (Overlays & menus) for a hand-built list. | `Combobox` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/selection-choice-comboboxfield.webp" width="120" alt="ComboboxField"> | [`ComboboxField`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/selection-and-choice.md#comboboxfield) · `ComboboxFormField` | Labelled, searchable single select over `{ value, label }` options, in a popover. | `ComboboxField`, `ComboboxFormField` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/selection-choice-autocomplete.webp" width="120" alt="Autocomplete"> | [`Autocomplete`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/selection-and-choice.md#autocomplete) · `AutocompleteFormField` | Single or multiple (chips) autocomplete with free-solo values and a query event. | `Autocomplete`, `AutocompleteFormField` |
-| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/selection-choice-checkbox.webp" width="120" alt="Checkbox"> | [`Checkbox`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/selection-and-choice.md#checkbox) | Reka UI checkbox with an indeterminate state; pair it with a `Label`. | `Checkbox`, `CheckboxFormField` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/selection-choice-checkbox.webp" width="120" alt="Checkbox"> | [`Checkbox`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/selection-and-choice.md#checkbox) · `CheckboxFormField` | Checkbox with label, helper text and an indeterminate state; without a label, the bare Reka UI box. | `Checkbox`, `CheckboxFormField` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/selection-choice-checkboxgroup.webp" width="120" alt="CheckboxGroup"> | [`CheckboxGroup`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/selection-and-choice.md#checkboxgroup) · `CheckboxGroupFormField` | Checkbox list built from `options`, valued as `string[]`. | `CheckboxGroup`, `CheckboxGroupFormField` |
-| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/selection-choice-radiogroup.webp" width="120" alt="RadioGroup"> | [`RadioGroupField`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/selection-and-choice.md#radiogroup) · `RadioGroupFormField`, `RadioGroup`, `RadioGroupItem` | Labelled radio group built from `options`, horizontal or vertical. | `RadioGroup`, `RadioGroupItem`, `RadioGroupFormField` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/selection-choice-radiogroup.webp" width="120" alt="RadioGroup"> | [`RadioGroupField`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/selection-and-choice.md#radiogroup) · `RadioGroupFormField`, `RadioGroup`, `RadioGroupItem` | Labelled radio group built from `options`, horizontal or vertical. | `RadioGroupField` (alias), `RadioGroup`, `RadioGroupItem`, `RadioGroupFormField` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/selection-choice-checkcardfield.webp" width="120" alt="CheckCardField"> | [`CheckCardField`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/selection-and-choice.md#checkcardfield) · `CheckCardFormField` | A yes / no choice shown as two selectable cards. | `CheckCardField`, `CheckCardFormField` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/selection-choice-selectcardfield.webp" width="120" alt="SelectCardField"> | [`SelectCardField`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/selection-and-choice.md#selectcardfield) · `SelectCardFormField` | Single or multiple choice shown as selectable cards. | `SelectCardField`, `SelectCardFormField` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/selection-choice-selectchipfield.webp" width="120" alt="SelectChipField"> | [`SelectChipField`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/selection-and-choice.md#selectchipfield) · `SelectChipFormField` | Single or multiple choice shown as toggleable chips. | `SelectChipField`, `SelectChipFormField` |
@@ -461,7 +465,7 @@ instead.
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/data-display-timeline.webp" width="120" alt="Timeline"> | [`Timeline`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/data-display.md#timeline), `TimelineItem`, `RelativeTime` | Vertical event timeline with toned markers and relative times. | `Timeline`, `TimelineItem`, `RelativeTime` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/data-display-eventchip.webp" width="120" alt="EventChip"> | [`EventChip`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/data-display.md#eventchip) | Calendar event pill with time, all-day and continuation edges. | `EventChip` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/data-display-codeblock.webp" width="120" alt="CodeBlock"> | [`CodeBlock`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/data-display.md#codeblock), `CodeDiff`, `JsonViewer`, `CodeGroup` | Highlighted code with line numbers and copy, a Monaco diff, a collapsible JSON tree, and tabbed samples (`Tabs variant="line"`). | `CodeBlock`, `CodeDiff`, `JsonViewer`, `CodeGroup` |
-| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/data-display-markdown.webp" width="120" alt="Markdown"> | [`Markdown`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/data-display.md#markdown) | Markdown with KaTeX math and mermaid diagrams (client-only). Fences reuse `CodeBlock`. `ChatMarkdown` renders through it. | `Markdown` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/data-display-markdown.webp" width="120" alt="Markdown"> | [`Markdown`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/data-display.md#markdown), `MermaidDiagram` | Markdown with KaTeX math and mermaid diagrams (client-only). Fences reuse `CodeBlock`. `ChatMarkdown` renders through it. | `Markdown`, `MermaidDiagram` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/data-display-terminal.webp" width="120" alt="Terminal"> | [`Terminal`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/data-display.md#terminal) | Display-only log with prompt, copy, and error/input tones. Container queries. | `Terminal` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/data-display-figure.webp" width="120" alt="Figure"> | [`Figure`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/data-display.md#figure) | Framed media with an optional caption. | `Figure` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/data-display-apioperation.webp" width="120" alt="ApiEndpoint"> | [`ApiEndpoint`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/data-display.md#apiendpoint), `ApiOperation` | HTTP method badge, path and copy; `ApiOperation` adds a param table and example `CodeGroup`. | `ApiEndpoint`, `ApiOperation` |
@@ -473,10 +477,10 @@ instead.
 
 | Preview | Component | What it does | @nxgt/material |
 | --- | --- | --- | --- |
-| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/data-table-filter-lists-datatable.webp" width="120" alt="DataTable"> | [`DataTable`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/data-table-filter-and-lists.md#datatable), `DataTableColumnHeader`, `DataTablePagination`, `DataTableViewOptions` | TanStack Table v9 with sorting, filtering, selection, expandable rows, pagination or load-more, and column visibility. | `DataTable`, `DataTableColumnHeader`, `DataTablePagination`, `DataTableViewOptions` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/data-table-filter-lists-datatable.webp" width="120" alt="DataTable"> | [`DataTable`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/data-table-filter-and-lists.md#datatable), `DataTableColumnHeader`, `DataTablePagination`, `DataTableViewOptions` | TanStack Table v9 with sorting, filtering, selection, expandable rows, pagination or load-more, column visibility, skeleton rows while loading and your own empty state. | `DataTable`, `DataTableColumnHeader`, `DataTablePagination`, `DataTableViewOptions` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/data-table-filter-lists-filter.webp" width="120" alt="Filter"> | [`Filter`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/data-table-filter-and-lists.md#filter) · `FilterFormField`, `FilterProvider`, `FilterTrigger`, `FilterChips`, `FilterContent`, `FilterGroups`, `FilterGroup`, `FilterField`, `FilterActions`, `FilterPresets` | Schema-driven filters with chips, presets, validation, and URL or storage persistence. | `Filter`, `FilterProvider`, `FilterContent`, `FilterChips`, `FilterPresets`, `FilterFormField` |
 | — | [`FilterInline`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/data-table-filter-and-lists.md#filterinline-filterpopover-filterdialog-filtersheet-filterdrawer), `FilterDialog`, `FilterSheet`, `FilterDrawer`, `FilterPopover` | The filter panel shown inline, or in a popover, dialog, sheet or drawer. | `FilterInline`, `FilterPopover`, `FilterDialog`, `FilterSheet`, `FilterDrawer` |
-| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/data-table-filter-lists-pagination.webp" width="120" alt="Pagination"> | [`Pagination`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/data-table-filter-and-lists.md#pagination), `PaginationContent`, `PaginationItem`, `PaginationFirst`, `PaginationLast` + parts | Pagination primitives on Reka UI's `Pagination`, with first / last buttons and ellipses. | `Pagination` (parts), `PaginationBar` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/data-table-filter-lists-pagination.webp" width="120" alt="Pagination"> | [`Pagination`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/data-table-filter-and-lists.md#pagination), `PaginationContent`, `PaginationItem`, `PaginationFirst`, `PaginationLast`, `PaginationLink`, `PaginationBar`, `paginationItems` + parts | Pagination primitives on Reka UI's `Pagination`, with first / last buttons and ellipses. `PaginationBar` adds a sibling window with ellipses. | `Pagination` (parts), `PaginationFirst`, `PaginationLast`, `PaginationLink`, `PaginationBar`, `paginationItems` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/data-table-filter-lists-tree.webp" width="120" alt="Tree"> | [`Tree`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/data-table-filter-and-lists.md#tree), `TreeItem` | Expandable tree with none, single or multiple selection and keyboard navigation. | `Tree`, `TreeItem`, `useTree` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/data-table-filter-lists-drag-and-drop.webp" width="120" alt="Drag and drop"> | [`DndProvider`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/data-table-filter-and-lists.md#drag-and-drop), `Draggable`, `Droppable`, `DraggableDroppable`, `SortableProvider`, `Sortable`, `DragHandle`, `DndOverlay` | Drag-and-drop primitives; see [dnd](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/guides/helpers.md#nxgtmaterial-vuednd). | `DndProvider`, `Draggable`, `Droppable`, `Sortable`, `DragHandle` |
 
@@ -498,7 +502,7 @@ instead.
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/navigation-layout-stepper.webp" width="120" alt="Stepper"> | [`Stepper`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/navigation-and-layout.md#stepper) | Clickable horizontal or vertical steps with status and progress; compact on mobile. | `Stepper` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/navigation-layout-steps.webp" width="120" alt="Steps"> | [`Steps`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/navigation-and-layout.md#steps), `StepsItem` | Numbered editorial steps that stay visible on every breakpoint. | `Steps`, `StepsItem` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/navigation-layout-hero.webp" width="120" alt="Hero"> | [`Hero`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/navigation-and-layout.md#hero) | Landing band with eyebrow, title, supporting copy and actions. | `Hero` |
-| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/navigation-layout-doc.webp" width="120" alt="Doc"> | [`Doc`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/navigation-and-layout.md#doc), `DocPage`, `DocTopbar`, `DocSidebar`, `DocToc`, `DocPager`, `DocSearch`, `DocChildCards`, `DocSeeAlso`, `DocEmpty`, `DocProgress`, `DocHeader`, `DocCopyMarkdown` | Documentation site shell: sidebar from `md`, TOC rail from `xl`. Reading bar, copy-as-markdown, child cards, see also, and a 404 slot. Storybook `Navigation & layout/Doc/Api` composes an API page from `DocPage`, `AnchorHeading`, `ApiOperation`, `ParamTable` and `CodeGroup`. | `Doc`, `DocPage`, `DocTopbar`, `DocSidebar`, `DocToc`, `DocPager`, `DocSearch`, `DocChildCards`, `DocSeeAlso`, `DocEmpty`, `DocProgress` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/navigation-layout-doc.webp" width="120" alt="Doc"> | [`Doc`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/navigation-and-layout.md#doc), `DocPage`, `DocTopbar`, `DocSidebar`, `DocNav`, `DocArticle`, `DocToc`, `DocPager`, `DocSearch`, `DocChildCards`, `DocSeeAlso`, `DocEmpty`, `DocProgress`, `DocHeader`, `DocLink`, `DefaultDocLink`, `DocCopyPage`, `DocCopyMarkdown` | Documentation site shell: sidebar from `md`, TOC rail from `xl`. Reading bar, copy-page / markdown, child cards, see also, and a 404 slot. Storybook `Navigation & layout/Doc/Api` composes an API page from `DocPage`, `AnchorHeading`, `ApiOperation`, `ParamTable` and `CodeGroup`. | `Doc` (same parts) |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/navigation-layout-background.webp" width="120" alt="Background"> | [`Background`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/navigation-and-layout.md#background) | Full-viewport gradient with blurred colour blobs; centres its content. | `Background` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/navigation-layout-navigationrail.webp" width="120" alt="NavigationRail"> | [`NavigationRail`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/navigation-and-layout.md#navigationrail) | Narrow vertical rail for icon buttons. | `NavigationRail` (placeholder) |
 
@@ -550,7 +554,7 @@ instead.
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/media-files-pdfreader.webp" width="120" alt="PdfReader"> | [`PdfReader`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/media-and-files.md#pdfreader), `PdfToolbar`, `PdfSidebar`, `PdfPageList`, `PdfThumbnailSidebar`, `PdfOutlineSidebar` | Client-only PDF reader with zoom, rotation, search, thumbnails, outline and print. | `PdfReader`, `PdfViewer` (same parts) |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/media-files-stxplayer.webp" width="120" alt="StxPlayer"> | [`StxPlayer`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/media-and-files.md#stxplayer), `StxPlayerProvider`, `StxPlayerViewport`, `StxPlayerControls`, `StxPlayerQueue`, `StxPlayerMini`, `StxPlayerExtras` | Video / audio player with a queue, captions, playback rate, PiP, and full or mini layouts. | `StxPlayer` (same parts) |
 | — | [`VideoPlayer`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/media-and-files.md#videoplayer) (deprecated) | Deprecated alias of `StxPlayer`. | `VideoPlayer` |
-| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/media-files-camera.webp" width="120" alt="Camera"> | [`Camera`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/media-and-files.md#camera) | Webcam preview with device selection and a still capture. | — (a story only, not exported) |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/media-files-camera.webp" width="120" alt="Camera"> | [`Camera`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/media-and-files.md#camera) | Webcam preview with device selection and a still capture. | `Camera`, `useCamera`, `capturePhotoFromVideo` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/media-files-print.webp" width="120" alt="Print components"> | [`PrintHeader`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/media-and-files.md#print-components), `PrintSection`, `PrintCard`, `PrintCardField`, `PrintInfoRow`, `PrintBadge`, `PrintTable`, `PrintTableHeader`, `PrintTableRow`, `PrintTableCell`, `PrintTotals`, `PrintTotalRow` | Inline-styled blocks for printable documents (invoice, receipt, report), with a shared `tw`. | `@nxgt/material/print` (same part names, rendered with `@react-pdf/renderer`) |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/media-files-map.webp" width="120" alt="Map"> | [`Map`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/media-and-files.md#map), `Marker`, `LocationMarker`, `LocationPreview`, `MapActions`, `LocationField` · `LocationFormField` (from `@nxgt/material-vue/map`) | Leaflet map with markers, controls and a location field. It is not in the component barrel: it lives in `@nxgt/material-vue/map`, with `leaflet` and `@vue-leaflet/vue-leaflet` as **optional peer dependencies** (install them to use it), and its stylesheet is `@nxgt/material-vue/map.css`, which is not part of `styles.css`. The entry imports cleanly under SSR, but leaflet only initialises in a browser: in Nuxt wrap the map in `<ClientOnly>`. The Nuxt module does not auto-register these components — import them where you use them. The [maps guide](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/guides/maps.md) covers the peers, SSR and the defaults. | `Map`, `LocationField`, `LocationFormField` (`@nxgt/material/map`) |
 
@@ -565,7 +569,7 @@ instead.
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/rich-widgets-emojipicker.webp" width="120" alt="EmojiPicker"> | [`EmojiPicker`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/rich-widgets.md#emojipicker), `EmojiList` | Shared picker. `ChatComposer` takes `emojis`; `Markdown` expands `:shortcode:`; the RTE toolbar uses the same picker. | `EmojiPicker`, `EmojiList` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/rich-widgets-mentionlist.webp" width="120" alt="MentionList"> | [`MentionList`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/rich-widgets.md#mentionlist) | `@` mention list from an `items` prop (local search). ChatComposer and the RTE suggestion list use it. `filterMentions(items, query, limit?, { match: 'prefix' \| 'substring' })` filters the same way (default `'substring'`); the editor's `mentions.suggestions` takes `(string \| MentionItem)[]`. | `MentionList` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/rich-widgets-richtexteditor.webp" width="120" alt="RichTextEditor"> | [`RichTextEditor`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/rich-widgets.md#richtexteditor) · `RichTextEditorFormField` | Tiptap editor with toolbar, bubble menu, slash commands, mentions, tables, emoji and images. | `RichTextEditor`, `RichTextEditorFormField` |
-| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/rich-widgets-codeeditor.webp" width="120" alt="CodeEditor"> | [`CodeEditor`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/rich-widgets.md#codeeditor) | Monaco editor field with a label and a language switch. | `CodeEditor`, `CodeEditorFormField` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/rich-widgets-codeeditor.webp" width="120" alt="CodeEditor"> | [`CodeEditor`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/rich-widgets.md#codeeditor) · `CodeEditorFormField` | Monaco editor field with a label and a language switch. | `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-CVIR6uLK.js → Button-DOcT4Pej.js}

@@ -1,12 +1,12 @@
 import { t as e } from "./utils-CykWQ0iJ.js";
-import { t } from "./use-material-translation-C5zPFhbk.js";
-import { computed as n, createBlock as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, createTextVNode as s, createVNode as c, defineComponent as l, guardReactiveProps as u, mergeProps as d, normalizeClass as f, normalizeProps as p, openBlock as m, renderSlot as h, shallowRef as g, toDisplayString as _, unref as v, useAttrs as y, withCtx as b } from "vue";
-import { Primitive as x, TooltipArrow as S, TooltipContent as C, TooltipPortal as w, TooltipProvider as T, TooltipRoot as E, TooltipTrigger as D, useForwardPropsEmits as O } from "reka-ui";
-import { cva as k } from "class-variance-authority";
-import { createSharedComposable as A, defaultDocument as j, reactiveOmit as M, useEventListener as N } from "@vueuse/core";
+import { t } from "./use-material-translation-8hUB2M-S.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";
+import { createSharedComposable as I, defaultDocument as L, reactiveOmit as R, useEventListener as z } from "@vueuse/core";
 //#endregion
 //#region lib/components/ui/feedback/spinner/spinner.variants.ts
-var P = k("transition-all duration-500", {
+var B = F("transition-all duration-500", {
 	variants: {
 		variant: {
 			1: "",
@@ -67,7 +67,7 @@ var P = k("transition-all duration-500", {
 		},
 		{
 			variant: "1",
-			color: "default",
+			color: "light",
 			class: "border-white/10 border-t-white"
 		},
 		{
@@ -191,11 +191,11 @@ var P = k("transition-all duration-500", {
 			class: "stroke-white"
 		}
 	]
-}), F = [
+}), V = [
 	"data-variant",
 	"data-color",
 	"aria-label"
-], I = ["data-variant", "data-color"], L = /* @__PURE__ */ l({
+], H = ["data-variant", "data-color"], U = /* @__PURE__ */ d({
 	__name: "spinner",
 	props: {
 		variant: { default: "1" },
@@ -210,7 +210,7 @@ var P = k("transition-all duration-500", {
 	},
 	setup(n) {
 		let r = n, { t: i } = t();
-		return (t, s) => n.variant === "4" ? (m(), a("svg", {
+		return (t, a) => n.variant === "4" ? (v(), s("svg", {
 			key: 0,
 			viewBox: "0 0 800 800",
 			"data-slot": "spinner",
@@ -218,10 +218,10 @@ var P = k("transition-all duration-500", {
 			"data-color": n.color,
 			xmlns: "http://www.w3.org/2000/svg",
 			role: "img",
-			"aria-label": v(i)("material.spinner.loading", "Loading..."),
-			class: f(v(e)("size-14", r.class))
-		}, [o("circle", {
-			class: f(["spin2", v(P)({
+			"aria-label": C(i)("material.spinner.loading", "Loading..."),
+			class: g(C(e)("size-14", r.class))
+		}, [c("circle", {
+			class: g(["spin2", C(B)({
 				variant: n.variant,
 				color: n.color
 			})]),
@@ -232,18 +232,18 @@ var P = k("transition-all duration-500", {
 			"stroke-width": "50",
 			"stroke-dasharray": "700 1400",
 			"stroke-linecap": "round"
-		}, null, 2)], 10, F)) : (m(), a("div", {
+		}, null, 2)], 10, V)) : (v(), s("div", {
 			key: 1,
 			"data-slot": "spinner",
 			"data-variant": n.variant,
 			"data-color": n.color,
-			class: f(v(e)("size-12 border-[2px] rounded-full animate-spin", v(P)({
+			class: g(C(e)("size-12 border-[2px] rounded-full animate-spin", C(B)({
 				variant: n.variant,
 				color: n.color
 			}), r.class))
-		}, null, 10, I));
+		}, null, 10, H));
 	}
-}), R = /* @__PURE__ */ l({
+}), W = /* @__PURE__ */ d({
 	__name: "Tooltip",
 	props: {
 		defaultOpen: { type: Boolean },
@@ -256,29 +256,29 @@ var P = k("transition-all duration-500", {
 	},
 	emits: ["update:open"],
 	setup(e, { emit: t }) {
-		let n = O(e, t);
-		return (e, t) => (m(), r(v(E), d({ "data-slot": "tooltip" }, v(n)), {
-			default: b((t) => [h(e.$slots, "default", p(u(t)))]),
+		let n = P(e, t);
+		return (e, t) => (v(), a(C(M), h({ "data-slot": "tooltip" }, C(n)), {
+			default: E((t) => [b(e.$slots, "default", _(f(t)))]),
 			_: 3
 		}, 16));
 	}
-}), z = /* @__PURE__ */ new Set([
+}), G = /* @__PURE__ */ new Set([
 	"VIDEO",
 	"IFRAME",
 	"CANVAS",
 	"IMG",
 	"EMBED"
 ]);
-function B(e) {
+function K(e) {
 	let t = e?.fullscreenElement;
-	return !t || typeof HTMLElement > "u" || !(t instanceof HTMLElement) || z.has(t.tagName) ? null : t;
+	return !t || typeof HTMLElement > "u" || !(t instanceof HTMLElement) || G.has(t.tagName) ? null : t;
 }
-var V = A(() => {
-	let e = g(B(j));
-	return N(j, "fullscreenchange", () => {
-		e.value = B(j);
+var q = I(() => {
+	let e = x(K(L));
+	return z(L, "fullscreenchange", () => {
+		e.value = K(L);
 	}), e;
-}), H = /* @__PURE__ */ l({
+}), J = /* @__PURE__ */ d({
 	inheritAttrs: !1,
 	__name: "TooltipContent",
 	props: {
@@ -309,19 +309,19 @@ var V = A(() => {
 	},
 	emits: ["escapeKeyDown", "pointerDownOutside"],
 	setup(t, { emit: n }) {
-		let i = t, a = n, o = V(), s = O(M(i, "class", "to"), a);
-		return (n, a) => (m(), r(v(w), { to: t.to ?? v(o) ?? void 0 }, {
-			default: b(() => [c(v(C), d({ "data-slot": "tooltip-content" }, {
-				...v(s),
+		let r = t, i = n, o = q(), s = P(R(r, "class", "to"), i);
+		return (n, i) => (v(), a(C(A), { to: t.to ?? C(o) ?? void 0 }, {
+			default: E(() => [u(C(k), h({ "data-slot": "tooltip-content" }, {
+				...C(s),
 				...n.$attrs
-			}, { class: v(e)("bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit rounded-md px-3 py-1.5 text-xs text-balance", i.class) }), {
-				default: b(() => [h(n.$slots, "default"), c(v(S), { class: "bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-xs" })]),
+			}, { class: C(e)("bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit rounded-md px-3 py-1.5 text-xs text-balance", r.class) }), {
+				default: E(() => [b(n.$slots, "default"), u(C(O), { class: "bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-xs" })]),
 				_: 3
 			}, 16, ["class"])]),
 			_: 3
 		}, 8, ["to"]));
 	}
-}), U = /* @__PURE__ */ l({
+}), Y = /* @__PURE__ */ d({
 	__name: "TooltipProvider",
 	props: {
 		delayDuration: { default: 0 },
@@ -334,12 +334,12 @@ var V = A(() => {
 	},
 	setup(e) {
 		let t = e;
-		return (e, n) => (m(), r(v(T), p(u(t)), {
-			default: b(() => [h(e.$slots, "default")]),
+		return (e, n) => (v(), a(C(j), _(f(t)), {
+			default: E(() => [b(e.$slots, "default")]),
 			_: 3
 		}, 16));
 	}
-}), W = /* @__PURE__ */ l({
+}), X = /* @__PURE__ */ d({
 	__name: "TooltipTrigger",
 	props: {
 		reference: {},
@@ -348,12 +348,12 @@ var V = A(() => {
 	},
 	setup(e) {
 		let t = e;
-		return (e, n) => (m(), r(v(D), d({ "data-slot": "tooltip-trigger" }, t), {
-			default: b(() => [h(e.$slots, "default")]),
+		return (e, n) => (v(), a(C(N), h({ "data-slot": "tooltip-trigger" }, t), {
+			default: E(() => [b(e.$slots, "default")]),
 			_: 3
 		}, 16));
 	}
-}), G = k("inline-flex center truncate **:truncate gap-2 h-min cursor-pointer whitespace-nowrap rounded-full text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-error/20 dark:aria-invalid:ring-error/40 aria-invalid:border-error px-4 py-2 has-[>svg]:px-3", {
+}), Z = Symbol("named-control"), Q = F("inline-flex center truncate **:truncate gap-2 h-min cursor-pointer whitespace-nowrap rounded-full text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-error/20 dark:aria-invalid:ring-error/40 aria-invalid:border-error px-4 py-2 has-[>svg]:px-3", {
 	variants: {
 		variant: {
 			filled: "shadow-xs",
@@ -376,10 +376,10 @@ var V = A(() => {
 			xs: "h-6 gap-1 rounded-full px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
 			sm: "h-8 rounded-full gap-1.5 px-3 has-[>svg]:px-2.5",
 			lg: "h-10 rounded-full px-6 has-[>svg]:px-4",
-			icon: "size-9 px-0 py-0",
-			"icon-xs": "size-6 rounded-full px-0 py-0 [&_svg:not([class*='size-'])]:size-3",
-			"icon-sm": "size-8 px-0 py-0",
-			"icon-lg": "size-10 px-0 py-0"
+			icon: "size-9 px-0 py-0 has-[>svg]:px-0",
+			"icon-xs": "size-6 rounded-full px-0 py-0 has-[>svg]:px-0 [&_svg:not([class*='size-'])]:size-3",
+			"icon-sm": "size-8 px-0 py-0 has-[>svg]:px-0",
+			"icon-lg": "size-10 px-0 py-0 has-[>svg]:px-0"
 		}
 	},
 	defaultVariants: {
@@ -528,7 +528,28 @@ var V = A(() => {
 			class: "text-foreground [&_svg]:data-[slot=icon]:text-foreground hover:bg-foreground/10 active:bg-muted focus:bg-foreground/15"
 		}
 	]
-}), K = /* @__PURE__ */ l({
+});
+//#endregion
+//#region lib/components/ui/actions/button/has-text-content.ts
+function $(e) {
+	if (e == null || typeof e == "boolean") return !1;
+	if (typeof e == "string" || typeof e == "number") return String(e).trim() !== "";
+	if (Array.isArray(e)) return e.some($);
+	if (!m(e) || e.type === n) return !1;
+	if (e.type === r) return String(e.children ?? "").trim() !== "";
+	if (ee(e.props?.["aria-hidden"] ?? e.props?.ariaHidden)) return !1;
+	let { children: t } = e;
+	if (typeof t == "string") return t.trim() !== "";
+	if (Array.isArray(t)) return $(t);
+	let i = t?.default;
+	return typeof i == "function" && $(i());
+}
+function ee(e) {
+	return e === "" || !!e && e !== "false";
+}
+//#endregion
+//#region lib/components/ui/actions/button/Button.vue
+var te = /* @__PURE__ */ d({
 	inheritAttrs: !1,
 	__name: "Button",
 	props: {
@@ -550,36 +571,38 @@ var V = A(() => {
 		tooltip: {}
 	},
 	setup(t) {
-		let a = t, o = y(), l = n(() => !!(a.disabled || a.loading)), u = n(() => a.as !== "button" || a.asChild ? o.type : o.type ?? "button"), p = n(() => !!a.size?.startsWith("icon")), g = n(() => e("justify-center duration-500", !p.value && "w-max truncate line-clamp-1 text-ellipsis", G({
-			variant: a.variant,
-			color: a.color,
-			size: a.size
-		}), a.class));
-		return (n, a) => t.tooltip ? (m(), r(v(U), { key: 0 }, {
-			default: b(() => [c(v(R), null, {
-				default: b(() => [c(v(W), { "as-child": "" }, {
-					default: b(() => [c(v(x), d(n.$attrs, {
+		let n = t, r = w(), s = T(), c = p(Z, void 0);
+		y(Z, i(() => !!c?.value || !!(r["aria-label"] || r["aria-labelledby"]) || $(s.default?.())));
+		let d = i(() => !!(n.disabled || n.loading)), f = i(() => n.as !== "button" || n.asChild ? r.type : r.type ?? "button"), m = i(() => !!n.size?.startsWith("icon")), _ = i(() => e("justify-center duration-500", !m.value && "w-max truncate line-clamp-1 text-ellipsis", Q({
+			variant: n.variant,
+			color: n.color,
+			size: n.size
+		}), n.class));
+		return (n, r) => t.tooltip ? (v(), a(C(Y), { key: 0 }, {
+			default: E(() => [u(C(W), null, {
+				default: E(() => [u(C(X), { "as-child": "" }, {
+					default: E(() => [u(C(D), h(n.$attrs, {
 						"data-slot": n.$attrs["data-slot"] ?? "button",
 						"data-variant": t.variant,
 						"data-color": t.color,
 						"data-size": t.size,
 						as: t.as,
 						"as-child": t.asChild,
-						type: u.value,
-						disabled: l.value,
+						type: f.value,
+						disabled: d.value,
 						"aria-busy": t.loading || void 0,
-						class: g.value
+						class: _.value
 					}), {
-						default: b(() => [t.loading ? (m(), r(L, {
+						default: E(() => [t.loading ? (v(), a(U, {
 							key: 0,
 							variant: t.spinnerVariant,
 							color: t.variant === "filled" ? "light" : t.color,
-							class: f(v(e)("starting:scale-0 duration-500", t.spinnerVariant === "4" ? "size-7.5" : "size-4.5"))
+							class: g(C(e)("starting:scale-0 duration-500", t.spinnerVariant === "4" ? "size-7.5" : "size-4.5"))
 						}, null, 8, [
 							"variant",
 							"color",
 							"class"
-						])) : i("", !0), h(n.$slots, "default")]),
+						])) : o("", !0), b(n.$slots, "default")]),
 						_: 3
 					}, 16, [
 						"data-slot",
@@ -594,35 +617,35 @@ var V = A(() => {
 						"class"
 					])]),
 					_: 3
-				}), c(v(H), null, {
-					default: b(() => [s(_(t.tooltip), 1)]),
+				}), u(C(J), null, {
+					default: E(() => [l(S(t.tooltip), 1)]),
 					_: 1
 				})]),
 				_: 3
 			})]),
 			_: 3
-		})) : (m(), r(v(x), d({ key: 1 }, n.$attrs, {
+		})) : (v(), a(C(D), h({ key: 1 }, n.$attrs, {
 			"data-slot": n.$attrs["data-slot"] ?? "button",
 			"data-variant": t.variant,
 			"data-color": t.color,
 			"data-size": t.size,
 			as: t.as,
 			"as-child": t.asChild,
-			type: u.value,
-			disabled: l.value,
+			type: f.value,
+			disabled: d.value,
 			"aria-busy": t.loading || void 0,
-			class: g.value
+			class: _.value
 		}), {
-			default: b(() => [t.loading ? (m(), r(L, {
+			default: E(() => [t.loading ? (v(), a(U, {
 				key: 0,
 				variant: t.spinnerVariant,
 				color: t.variant === "filled" ? "light" : t.color,
-				class: f(v(e)("starting:scale-0 duration-500", t.spinnerVariant === "4" ? "size-7.5" : "size-4.5"))
+				class: g(C(e)("starting:scale-0 duration-500", t.spinnerVariant === "4" ? "size-7.5" : "size-4.5"))
 			}, null, 8, [
 				"variant",
 				"color",
 				"class"
-			])) : i("", !0), h(n.$slots, "default")]),
+			])) : o("", !0), b(n.$slots, "default")]),
 			_: 3
 		}, 16, [
 			"data-slot",
@@ -639,4 +662,4 @@ var V = A(() => {
 	}
 });
 //#endregion
-export { H as a, L as c, U as i, P as l, G as n, V as o, W as r, R as s, K as t };
+export { Y as a, W as c, X as i, U as l, Q as n, J as o, Z as r, q as s, te as t, B as u };

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

@@ -1,6 +1,6 @@
 import { t as e } from "./utils-CykWQ0iJ.js";
-import { t } from "./use-material-translation-C5zPFhbk.js";
-import { t as n } from "./Button-CVIR6uLK.js";
+import { t } from "./use-material-translation-8hUB2M-S.js";
+import { t as n } from "./Button-DOcT4Pej.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-Gvg5N956.js → camera-BNbLUPb1.js}

@@ -1,8 +1,8 @@
 import { t as e } from "./utils-CykWQ0iJ.js";
-import { ir as t, or as n, rr as r } from "./components-AScwCcds.js";
-import { t as i } from "./use-material-translation-C5zPFhbk.js";
-import { t as a } from "./Button-CVIR6uLK.js";
-import { t as o } from "./icon-button-DbEME76t.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 { 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(t) {
-		let n = t, { t: p } = i(), { videoRef: g, state: _, actions: v } = r();
+	setup(n) {
+		let r = n, { t: p } = i(), { videoRef: g, state: _, actions: v } = t();
 		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, r) => (h(), l("div", {
+		return (t, n) => (h(), l("div", {
 			"data-slot": "camera",
-			class: m(b(e)("flex relative w-full h-full gap-2", n.class))
+			class: m(b(e)("flex relative w-full h-full gap-2", r.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 r = g(null), i = g(null), a = v(null), o = n();
-		return t({
-			videoRef: r,
+		let t = g(null), i = g(null), a = v(null), o = n();
+		return r({
+			videoRef: t,
 			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, r.value && (r.value.srcObject = e);
+						a.value = e, t.value && (t.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(r.value);
+					o.capturePhoto(t.value);
 				}
 			}
 		}), (e, t) => _(e.$slots, "default");