@nvidia-elements/core 0.0.3 → 0.0.4

package/dist/data.html.json

@@ -926,7 +926,7 @@
     },
     {
       "name": "nve-combobox",
-      "description": "An editable combobox with autocomplete behavior and selection support.\n---\n\n\n### **Events:**\n - **scroll** - Fires when the user scrolls the dropdown option list. Throttled to one dispatch per animation frame. `detail: { scrollTop, scrollHeight, clientHeight }`.\n- **reset**\n\n### **Methods:**\n - **reset()** - Resets control value to initial attribute value and clears any active validation rules.\n- **selectAll()** - Select all options provided\n\n### **Slots:**\n - _default_ - default slot for an input and a datalist/select element\n- **prefix-icon** - slot for icon before the input\n- **footer** - slot for dropdown footer content\n- **label** - Label element\n\n### **CSS Properties:**\n - **--scroll-height** -  _(default: undefined)_\n- **--padding** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) _(default: undefined)_\n- **--font-size** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size) _(default: undefined)_\n- **--height** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/height) _(default: undefined)_\n- **--background** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/background) _(default: undefined)_\n- **--color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color) _(default: undefined)_\n- **--border-radius** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius) _(default: undefined)_\n- **--border** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border) _(default: undefined)_\n- **--cursor** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/cursor) _(default: undefined)_\n- **--font-weight** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight) _(default: undefined)_\n- **--width** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/width) _(default: undefined)_\n- **--border-color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-color) _(default: undefined)_\n- **--max-height** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/max-height) _(default: undefined)_\n- **--text-transform** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform) _(default: undefined)_\n- **--accent-color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/accent-color) _(default: undefined)_\n- **--label-color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color) _(default: undefined)_\n- **--label-width** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/width) _(default: undefined)_\n- **--label-font-weight** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight) _(default: undefined)_\n- **--label-font-size** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size) _(default: undefined)_\n- **--control-width** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/width) _(default: undefined)_\n- **--control-height** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/height) _(default: undefined)_\n\n### **CSS Parts:**\n - **tag** - The tag element for selected items\n- **dropdown** - The dropdown popup element\n- **menu** - The menu element\n- **menu-item** - The menu item elements\n- **checkbox** - The checkbox element\n- **icon** - The icon element",
+      "description": "An editable combobox with autocomplete behavior and selection support.\n---\n\n\n### **Events:**\n - **create** - Fires when the user confirms a value that doesn't match any existing option and the `behavior-create` attribute exists. `detail: { value }`.\n- **scroll** - Fires when the user scrolls the dropdown option list. Throttled to one dispatch per animation frame. `detail: { scrollTop, scrollHeight, clientHeight }`.\n- **reset**\n\n### **Methods:**\n - **reset()** - Resets control value to initial attribute value and clears any active validation rules.\n- **selectAll()** - Select all options provided\n\n### **Slots:**\n - _default_ - default slot for an input and a datalist/select element\n- **prefix-icon** - slot for icon before the input\n- **footer** - slot for dropdown footer content\n- **label** - Label element\n\n### **CSS Properties:**\n - **--scroll-height** -  _(default: undefined)_\n- **--padding** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) _(default: undefined)_\n- **--font-size** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size) _(default: undefined)_\n- **--height** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/height) _(default: undefined)_\n- **--background** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/background) _(default: undefined)_\n- **--color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color) _(default: undefined)_\n- **--border-radius** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius) _(default: undefined)_\n- **--border** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border) _(default: undefined)_\n- **--cursor** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/cursor) _(default: undefined)_\n- **--font-weight** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight) _(default: undefined)_\n- **--width** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/width) _(default: undefined)_\n- **--border-color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-color) _(default: undefined)_\n- **--max-height** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/max-height) _(default: undefined)_\n- **--text-transform** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform) _(default: undefined)_\n- **--accent-color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/accent-color) _(default: undefined)_\n- **--label-color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color) _(default: undefined)_\n- **--label-width** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/width) _(default: undefined)_\n- **--label-font-weight** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight) _(default: undefined)_\n- **--label-font-size** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size) _(default: undefined)_\n- **--control-width** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/width) _(default: undefined)_\n- **--control-height** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/height) _(default: undefined)_\n\n### **CSS Parts:**\n - **tag** - The tag element for selected items\n- **dropdown** - The dropdown popup element\n- **menu** - The menu element\n- **menu-item** - The menu item elements\n- **checkbox** - The checkbox element\n- **icon** - The icon element\n- **create-option** - The menu item element for creating new options",
       "attributes": [
         {
           "name": "container",
@@ -938,6 +938,11 @@
           "description": "Disable rendering of inline tags for many-item select",
           "values": []
         },
+        {
+          "name": "behavior-create",
+          "description": "Enable creation of new options when the input value doesn't match any existing option. Dispatches a `create` event with `{ value }` detail.",
+          "values": []
+        },
         {
           "name": "status",
           "description": "Communicates the intent and semantic meaning of an element to help users understand the outcome of their actions.\n- `warning` Indicates cautionary actions that require careful consideration before proceeding.\n\n- `success` Represents positive outcomes, confirmations, or constructive actions.",
@@ -987,7 +992,7 @@
         },
         {
           "name": "markdown",
-          "url": "## nve-combobox\n\nAn editable combobox with autocomplete behavior and selection support.\n\n### Example\n\n```html\n<nve-combobox>\n  <label>label</label>\n  <input type=\"search\" />\n  <datalist>\n    <option value=\"status\"></option>\n    <option value=\"priority\"></option>\n    <option value=\"date\"></option>\n    <option value=\"session\"></option>\n    <option value=\"configuration\"></option>\n    <option value=\"contains\"></option>\n  </datalist>\n  <nve-control-message>message</nve-control-message>\n</nve-combobox>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/combobox/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | default slot for an input and a datalist/select element |\n| prefix-icon | `string` | slot for icon before the input |\n| footer | `string` | slot for dropdown footer content |\n| label | `string` | Label element |\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| container | `'flat'` | Demonstrates different container styles to accommodate visual weight and context. - `flat` Element has white space bounds but reduced visual container. |\n| notags | `boolean` | Disable rendering of inline tags for many-item select |\n| reset |  | Resets control value to initial attribute value and clears any active validation rules. |\n| selectAll |  | Select all options provided |\n| status | `'warning' \\| 'error' \\| 'success' \\| 'disabled'` | Communicates the intent and semantic meaning of an element to help users understand the outcome of their actions. - `warning` Indicates cautionary actions that require careful consideration before proceeding. - `success` Represents positive outcomes, confirmations, or constructive actions. |\n| layout | `\\| 'vertical'\n    \\| 'vertical-inline'\n    \\| 'horizontal'\n    \\| 'horizontal-inline'` | Controls the directional arrangement and spacing behavior of the element's content. - `vertical` Arranges content in a vertical stack with block-level spacing. - `vertical-inline` Arranges content vertically with compact inline spacing for dense layouts. - `horizontal` Arranges content in a horizontal row with block-level spacing. - `horizontal-inline` Arranges content horizontally with compact inline spacing. |\n| fitText (fit-text) | `boolean` | Sets the input to match the width of the active text content of the control value. Only applicable to vertical input box type controls (input, select) |\n| fitContent (fit-content) | `boolean` | Sets the input to match native default content block |\n| i18n |  | Enables updating internal string values for internationalization. |\n| prominence | `'muted'` | Controls the visual prominence to establish hierarchy and guide user attention. - `muted` Reduces visual weight for supporting content that should remain subtle and unobtrusive. |\n| nveControl | `string` |  |\n| showPicker |  |  |\n\n### Events\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| scroll | `CustomEvent` | Fires when the user scrolls the dropdown option list. Throttled to one dispatch per animation frame. `detail: { scrollTop, scrollHeight, clientHeight }`. |\n| reset | `CustomEvent` |  |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --scroll-height | `string` |  |\n| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |\n| --font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |\n| --height | `string` | [MDN](https://mdn.dev/CSS/height) |\n| --background | `string` | [MDN](https://mdn.dev/CSS/background) |\n| --color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --border-radius | `string` | [MDN](https://mdn.dev/CSS/border-radius) |\n| --border | `string` | [MDN](https://mdn.dev/CSS/border) |\n| --cursor | `string` | [MDN](https://mdn.dev/CSS/cursor) |\n| --font-weight | `string` | [MDN](https://mdn.dev/CSS/font-weight) |\n| --width | `string` | [MDN](https://mdn.dev/CSS/width) |\n| --border-color | `string` | [MDN](https://mdn.dev/CSS/border-color) |\n| --max-height | `string` | [MDN](https://mdn.dev/CSS/max-height) |\n| --text-transform | `string` | [MDN](https://mdn.dev/CSS/text-transform) |\n| --accent-color | `string` | [MDN](https://mdn.dev/CSS/accent-color) |\n| --label-color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --label-width | `string` | [MDN](https://mdn.dev/CSS/width) |\n| --label-font-weight | `string` | [MDN](https://mdn.dev/CSS/font-weight) |\n| --label-font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |\n| --control-width | `string` | [MDN](https://mdn.dev/CSS/width) |\n| --control-height | `string` | [MDN](https://mdn.dev/CSS/height) |"
+          "url": "## nve-combobox\n\nAn editable combobox with autocomplete behavior and selection support.\n\n### Example\n\n```html\n<nve-combobox>\n  <label>label</label>\n  <input type=\"search\" />\n  <datalist>\n    <option value=\"status\"></option>\n    <option value=\"priority\"></option>\n    <option value=\"date\"></option>\n    <option value=\"session\"></option>\n    <option value=\"configuration\"></option>\n    <option value=\"contains\"></option>\n  </datalist>\n  <nve-control-message>message</nve-control-message>\n</nve-combobox>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/combobox/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | default slot for an input and a datalist/select element |\n| prefix-icon | `string` | slot for icon before the input |\n| footer | `string` | slot for dropdown footer content |\n| label | `string` | Label element |\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| container | `'flat'` | Demonstrates different container styles to accommodate visual weight and context. - `flat` Element has white space bounds but reduced visual container. |\n| notags | `boolean` | Disable rendering of inline tags for many-item select |\n| behaviorCreate (behavior-create) | `boolean` | Enable creation of new options when the input value doesn't match any existing option. Dispatches a `create` event with `{ value }` detail. |\n| reset |  | Resets control value to initial attribute value and clears any active validation rules. |\n| selectAll |  | Select all options provided |\n| status | `'warning' \\| 'error' \\| 'success' \\| 'disabled'` | Communicates the intent and semantic meaning of an element to help users understand the outcome of their actions. - `warning` Indicates cautionary actions that require careful consideration before proceeding. - `success` Represents positive outcomes, confirmations, or constructive actions. |\n| layout | `\\| 'vertical'\n    \\| 'vertical-inline'\n    \\| 'horizontal'\n    \\| 'horizontal-inline'` | Controls the directional arrangement and spacing behavior of the element's content. - `vertical` Arranges content in a vertical stack with block-level spacing. - `vertical-inline` Arranges content vertically with compact inline spacing for dense layouts. - `horizontal` Arranges content in a horizontal row with block-level spacing. - `horizontal-inline` Arranges content horizontally with compact inline spacing. |\n| fitText (fit-text) | `boolean` | Sets the input to match the width of the active text content of the control value. Only applicable to vertical input box type controls (input, select) |\n| fitContent (fit-content) | `boolean` | Sets the input to match native default content block |\n| i18n |  | Enables updating internal string values for internationalization. |\n| prominence | `'muted'` | Controls the visual prominence to establish hierarchy and guide user attention. - `muted` Reduces visual weight for supporting content that should remain subtle and unobtrusive. |\n| nveControl | `string` |  |\n| showPicker |  |  |\n\n### Events\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| create | `CustomEvent` | Fires when the user confirms a value that doesn't match any existing option and the `behavior-create` attribute exists. `detail: { value }`. |\n| scroll | `CustomEvent` | Fires when the user scrolls the dropdown option list. Throttled to one dispatch per animation frame. `detail: { scrollTop, scrollHeight, clientHeight }`. |\n| reset | `CustomEvent` |  |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --scroll-height | `string` |  |\n| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |\n| --font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |\n| --height | `string` | [MDN](https://mdn.dev/CSS/height) |\n| --background | `string` | [MDN](https://mdn.dev/CSS/background) |\n| --color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --border-radius | `string` | [MDN](https://mdn.dev/CSS/border-radius) |\n| --border | `string` | [MDN](https://mdn.dev/CSS/border) |\n| --cursor | `string` | [MDN](https://mdn.dev/CSS/cursor) |\n| --font-weight | `string` | [MDN](https://mdn.dev/CSS/font-weight) |\n| --width | `string` | [MDN](https://mdn.dev/CSS/width) |\n| --border-color | `string` | [MDN](https://mdn.dev/CSS/border-color) |\n| --max-height | `string` | [MDN](https://mdn.dev/CSS/max-height) |\n| --text-transform | `string` | [MDN](https://mdn.dev/CSS/text-transform) |\n| --accent-color | `string` | [MDN](https://mdn.dev/CSS/accent-color) |\n| --label-color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --label-width | `string` | [MDN](https://mdn.dev/CSS/width) |\n| --label-font-weight | `string` | [MDN](https://mdn.dev/CSS/font-weight) |\n| --label-font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |\n| --control-width | `string` | [MDN](https://mdn.dev/CSS/width) |\n| --control-height | `string` | [MDN](https://mdn.dev/CSS/height) |"
         }
       ]
     },
@@ -1715,6 +1720,176 @@
         }
       ]
     },
+    {
+      "name": "nve-format-datetime",
+      "description": "Formats a date/time value as localized text using the Intl.DateTimeFormat API. Renders inside a semantic time element.\nGranular options (weekday, year, month, day, hour, minute, second) mirror the Intl.DateTimeFormat API. 'numeric' omits zero-padding, '2-digit' zero-pads.\n---\n\n\n### **Slots:**\n - _default_ - Date string to format (such as 2023-07-28T04:20:17.434Z). Serves as fallback before hydration.",
+      "attributes": [
+        {
+          "name": "date",
+          "description": "Optional date string for values supplied by JavaScript or bound data.\nBy default, the component formats the element's text content, which also serves as the SSR fallback.\nWhen both are present, this property takes precedence.",
+          "values": [{ "name": "default" }]
+        },
+        {
+          "name": "locale",
+          "description": "Language tag (such as en-US, de-DE). Defaults to document.documentElement.lang or browser default.",
+          "values": [{ "name": "default" }]
+        },
+        {
+          "name": "weekday",
+          "description": "Weekday representation: 'long' | 'short' | 'narrow'.",
+          "values": [
+            { "name": "long" },
+            { "name": "short" },
+            { "name": "narrow" },
+            { "name": "default" }
+          ]
+        },
+        {
+          "name": "year",
+          "description": "Year representation: 'numeric' | '2-digit'.",
+          "values": [
+            { "name": "numeric" },
+            { "name": "2-digit" },
+            { "name": "default" }
+          ]
+        },
+        {
+          "name": "month",
+          "description": "Month representation: 'numeric' | '2-digit' | 'long' | 'short' | 'narrow'.",
+          "values": [
+            { "name": "numeric" },
+            { "name": "2-digit" },
+            { "name": "long" },
+            { "name": "short" },
+            { "name": "narrow" },
+            { "name": "default" }
+          ]
+        },
+        {
+          "name": "day",
+          "description": "Day representation: 'numeric' | '2-digit'.",
+          "values": [
+            { "name": "numeric" },
+            { "name": "2-digit" },
+            { "name": "default" }
+          ]
+        },
+        {
+          "name": "hour",
+          "description": "Hour representation: 'numeric' | '2-digit'.",
+          "values": [
+            { "name": "numeric" },
+            { "name": "2-digit" },
+            { "name": "default" }
+          ]
+        },
+        {
+          "name": "minute",
+          "description": "Minute representation: 'numeric' | '2-digit'.",
+          "values": [
+            { "name": "numeric" },
+            { "name": "2-digit" },
+            { "name": "default" }
+          ]
+        },
+        {
+          "name": "second",
+          "description": "Second representation: 'numeric' | '2-digit'.",
+          "values": [
+            { "name": "numeric" },
+            { "name": "2-digit" },
+            { "name": "default" }
+          ]
+        },
+        {
+          "name": "date-style",
+          "description": "Preset date formatting style: 'full' | 'long' | 'medium' | 'short'.\nPreset styles take precedence over granular date and time part options.",
+          "values": [
+            { "name": "full" },
+            { "name": "long" },
+            { "name": "medium" },
+            { "name": "short" },
+            { "name": "default" }
+          ]
+        },
+        {
+          "name": "time-style",
+          "description": "Preset time formatting style: 'full' | 'long' | 'medium' | 'short'.\nPreset styles take precedence over granular date and time part options.",
+          "values": [
+            { "name": "full" },
+            { "name": "long" },
+            { "name": "medium" },
+            { "name": "short" },
+            { "name": "default" }
+          ]
+        },
+        {
+          "name": "time-zone-name",
+          "description": "Time zone name display: 'long' | 'short'. Use it with granular options only; preset styles ignore it.",
+          "values": [
+            { "name": "long" },
+            { "name": "short" },
+            { "name": "default" }
+          ]
+        },
+        {
+          "name": "time-zone",
+          "description": "IANA time zone identifier (such as 'America/New_York', 'UTC').",
+          "values": [{ "name": "default" }]
+        }
+      ],
+      "references": []
+    },
+    {
+      "name": "nve-format-relative-time",
+      "description": "Formats a date/time value as localized relative text using the Intl.RelativeTimeFormat API. Renders inside a semantic time element.\nOptions mirror the Intl.RelativeTimeFormat API. When unit is 'auto', the component selects the best unit based on the time difference.\n---\n\n\n### **Slots:**\n - _default_ - Date string to format (such as 2023-07-28T04:20:17.434Z). Serves as fallback before hydration.",
+      "attributes": [
+        {
+          "name": "date",
+          "description": "Optional date string for values supplied by JavaScript or bound data.\nBy default, the component formats the element's text content, which also serves as the SSR fallback.\nWhen both are present, this property takes precedence.",
+          "values": [{ "name": "default" }]
+        },
+        {
+          "name": "locale",
+          "description": "Language tag (such as en-US, de-DE). Defaults to document.documentElement.lang or browser default.",
+          "values": [{ "name": "default" }]
+        },
+        {
+          "name": "numeric",
+          "description": "Numeric formatting: 'always' | 'auto'. When 'auto', enables natural language forms such as 'yesterday' instead of '1 day ago'.",
+          "values": [{ "name": "always" }, { "name": "auto" }]
+        },
+        {
+          "name": "format-style",
+          "description": "Formatting length: 'long' | 'short' | 'narrow'. Controls verbosity (such as '3 days ago' vs '3d ago'). Maps to Intl.RelativeTimeFormat style option.",
+          "values": [
+            { "name": "long" },
+            { "name": "short" },
+            { "name": "narrow" }
+          ]
+        },
+        {
+          "name": "unit",
+          "description": "Time unit: 'second' | 'minute' | 'hour' | 'day' | 'week' | 'month' | 'year' | 'auto'. Use 'auto' to let the component select the most appropriate unit based on the time difference.",
+          "values": [
+            { "name": "second" },
+            { "name": "minute" },
+            { "name": "hour" },
+            { "name": "day" },
+            { "name": "week" },
+            { "name": "month" },
+            { "name": "year" },
+            { "name": "auto" }
+          ]
+        },
+        {
+          "name": "sync",
+          "description": "When present, auto-updates the displayed relative time at appropriate intervals.",
+          "values": []
+        }
+      ],
+      "references": []
+    },
     {
       "name": "nve-control-group",
       "description": "Groups many related form controls under a shared label and validation context for semantically linked inputs.\n---\n\n\n### **Slots:**\n - _default_ - Control input elements\n\n### **CSS Properties:**\n - **--color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color) _(default: undefined)_\n- **--label-color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color) _(default: undefined)_\n- **--label-text-transform** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform) _(default: undefined)_\n- **--label-font-weight** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight) _(default: undefined)_\n- **--label-font-size** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size) _(default: undefined)_",
@@ -4651,6 +4826,27 @@
         }
       ]
     },
+    {
+      "name": "nve-tabs-group",
+      "description": "Coordinates tabs with matching panel content using Invoker Commands and slot-matched panels.\n---\n\n\n### **Events:**\n - **select** - Dispatched when the selected tab value changes after an invoker `--toggle` updates selection\n\n### **Slots:**\n - _default_ - Default slot for a single nve-tabs element. Do not use behavior-select on nve-tabs when using this group.\n- **value** - Named panel content where the slot name matches a nve-tabs-item value.\n\n### **CSS Properties:**\n - **--padding** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) _(default: undefined)_",
+      "attributes": [
+        {
+          "name": "alignment",
+          "description": "Determines the alignment of the popover relative to the provided anchor element.",
+          "values": [{ "name": "top" }, { "name": "start" }, { "name": "end" }]
+        }
+      ],
+      "references": [
+        {
+          "name": "aria",
+          "url": "https://www.w3.org/WAI/ARIA/apg/patterns/tabs/"
+        },
+        {
+          "name": "markdown",
+          "url": "## nve-tabs-group\n\nCoordinates tabs with matching panel content using Invoker Commands and slot-matched panels.\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/tabs/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | Default slot for a single nve-tabs element. Do not use behavior-select on nve-tabs when using this group. |\n| {value} | `string` | Named panel content where the slot name matches a nve-tabs-item value. |\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| alignment | `'top' \\| 'start' \\| 'end'` | Determines the alignment of the popover relative to the provided anchor element. |\n\n### Events\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| select | `CustomEvent` | Dispatched when the selected tab value changes after an invoker `--toggle` updates selection |\n\n### Invoker Commands\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --toggle | `CommandEvent` | Select the matching tab and reveal the panel whose slot matches the invoker value. |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |"
+        }
+      ]
+    },
     {
       "name": "nve-tabs-item",
       "description": "Represents an individual tab within a tablist, providing a selectable button for switching between content views.\n---\n\n\n### **Slots:**\n - _default_ - default slot for content\n\n### **CSS Properties:**\n - **--font-size** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size) _(default: undefined)_\n- **--border-width** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-width) _(default: undefined)_\n- **--border-height** -  _(default: undefined)_\n- **--border-top** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top) _(default: undefined)_\n- **--border-background** -  _(default: undefined)_\n- **--width** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/width) _(default: undefined)_\n- **--padding** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) _(default: undefined)_\n- **--font-size** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size) _(default: undefined)_\n- **--font-weight** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight) _(default: undefined)_\n- **--border-radius** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius) _(default: undefined)_\n- **--color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color) _(default: undefined)_\n- **--height** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/height) _(default: undefined)_\n- **--cursor** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/cursor) _(default: undefined)_\n- **--text-transform** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform) _(default: undefined)_",
@@ -4761,7 +4957,7 @@
         },
         {
           "name": "markdown",
-          "url": "## nve-tabs-item\n\nRepresents an individual tab within a tablist, providing a selectable button for switching between content views.\n\n### Example\n\n```html\n<nve-tabs behavior-select>\n  <nve-tabs-item selected>Tab 1</nve-tabs-item>\n  <nve-tabs-item>Tab 2</nve-tabs-item>\n  <nve-tabs-item>Tab 3</nve-tabs-item>\n  <nve-tabs-item>Tab 4</nve-tabs-item>\n  <nve-tabs-item disabled>Disabled</nve-tabs-item>\n</nve-tabs>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/tabs/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | default slot for content |\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| selected | `boolean` | Indicates whether an element currently holds selection within a multi-option selection group. [MDN](https://mdn.dev/ARIA/Attributes/aria-selected) - `true` The element holds selection and represents the user's current choice within the group. - `false` The element does not hold selection and the user can choose it. |\n| type | `'button' \\| 'submit' \\| 'reset'` | Defines the button behavior when associated within an <form> element. https://mdn.dev/HTML/Element/button#attr-type |\n| pressed | `boolean` | Indicates the current state of a toggle button that switches on or off. [MDN](https://mdn.dev/ARIA/Attributes/aria-pressed) - `true` The button is in the pressed (on) state and the associated action or setting is active. - `false` The button is in the unpressed (off) state and the associated action or setting is inactive. |\n| expanded | `boolean` | Indicates whether collapsible content is currently visible or hidden from the user. [MDN](https://mdn.dev/ARIA/Attributes/aria-expanded) - `true` The associated content expands and becomes visible to the user. - `false` The associated content collapses and hides from the user. |\n| readonly | `boolean` | Indicates whether the user can change the element's value while it remains visible and focusable. [MDN](https://mdn.dev/HTML/Attributes/readonly) - `true` The element has a readonly state: the user cannot change its value, but can still focus and copy it. - `false` The element allows editing and the user can change its value through interaction. |\n| form | `HTMLFormElement \\| null \\| string` | Like input form, sets a button to submit a form outside its parent form. Returns a reference to the form element if available. https://mdn.dev/ElementInternals/form |\n| name | `string` | The name of the button, submitted as a pair with the button's value as part of the form data, when that button submits the form. https://mdn.dev/HTML/Element/button#attr-name |\n| value | `string` | Defines the value associated with the element's name when submitting the form data. The server receives this value in params when the form submits through this button. [MDN](https://mdn.dev/HTML/Element/input#value) |\n| disabled | `boolean` | This Boolean attribute prevents the user from interacting with the element: it cannot receive press or focus events. [MDN](https://mdn.dev/ARIA/Attributes/aria-disabled) - `true` The element has a disabled state and does not accept interaction. - `false` The element has an enabled state and accepts interaction. |\n| current | `'page' \\| 'step'` | Indicates the element that represents the user's current location or position within a set. [MDN](https://mdn.dev/ARIA/Attributes/aria-current) - `page` Marks the current page within a set of navigation links. - `step` Marks the current step within a multi-step process or workflow. |\n| popoverTargetElement | `HTMLElement \\| null` | Establishing a relationship between a popover and its invoker button. https://mdn.dev/HTMLInputElement/popoverTargetElement |\n| popovertarget | `string` | The idref of the element that receives the popover. https://mdn.dev/HTML/Reference/Elements/button#popovertarget |\n| popoverTargetAction (popovertargetaction) | `'show' \\| 'hide' \\| 'toggle'` | The popover target action to perform on the popover target element. https://mdn.dev/HTMLInputElement/popoverTargetAction |\n| commandForElement | `HTMLElement \\| null` | The element that receives the command. https://mdn.dev/Invoker_Commands_API |\n| commandfor | `string \\| null` | The idref of the element that receives the command. https://mdn.dev/Invoker_Commands_API |\n| command | `string` | The command to execute on the element. https://mdn.dev/Invoker_Commands_API |\n| interestForElement | `HTMLElement \\| null` | The element that receives the interest. https://mdn.dev/HTMLAnchorElement/interestForElement |\n| interestfor | `string \\| null` | The idref of the element that receives the interest. https://mdn.dev/HTMLAnchorElement/interestForElement |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |\n| --border-width | `string` | [MDN](https://mdn.dev/CSS/border-width) |\n| --border-height | `string` |  |\n| --border-top | `string` | [MDN](https://mdn.dev/CSS/border-top) |\n| --border-background | `string` |  |\n| --width | `string` | [MDN](https://mdn.dev/CSS/width) |\n| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |\n| --font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |\n| --font-weight | `string` | [MDN](https://mdn.dev/CSS/font-weight) |\n| --border-radius | `string` | [MDN](https://mdn.dev/CSS/border-radius) |\n| --color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --height | `string` | [MDN](https://mdn.dev/CSS/height) |\n| --cursor | `string` | [MDN](https://mdn.dev/CSS/cursor) |\n| --text-transform | `string` | [MDN](https://mdn.dev/CSS/text-transform) |"
+          "url": "## nve-tabs-item\n\nRepresents an individual tab within a tablist, providing a selectable button for switching between content views.\n\n### Example\n\n```html\n<nve-tabs-group id=\"tab-group-default\">\n  <nve-tabs>\n    <nve-tabs-item selected command=\"--toggle\" commandfor=\"tab-group-default\" value=\"overview\">Overview</nve-tabs-item>\n    <nve-tabs-item command=\"--toggle\" commandfor=\"tab-group-default\" value=\"details\">Details</nve-tabs-item>\n    <nve-tabs-item command=\"--toggle\" commandfor=\"tab-group-default\" value=\"settings\">Settings</nve-tabs-item>\n  </nve-tabs>\n  <div slot=\"overview\">overview content</div>\n  <div slot=\"details\">details content</div>\n  <div slot=\"settings\">settings content</div>\n</nve-tabs-group>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/tabs/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | default slot for content |\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| selected | `boolean` | Indicates whether an element currently holds selection within a multi-option selection group. [MDN](https://mdn.dev/ARIA/Attributes/aria-selected) - `true` The element holds selection and represents the user's current choice within the group. - `false` The element does not hold selection and the user can choose it. |\n| type | `'button' \\| 'submit' \\| 'reset'` | Defines the button behavior when associated within an <form> element. https://mdn.dev/HTML/Element/button#attr-type |\n| pressed | `boolean` | Indicates the current state of a toggle button that switches on or off. [MDN](https://mdn.dev/ARIA/Attributes/aria-pressed) - `true` The button is in the pressed (on) state and the associated action or setting is active. - `false` The button is in the unpressed (off) state and the associated action or setting is inactive. |\n| expanded | `boolean` | Indicates whether collapsible content is currently visible or hidden from the user. [MDN](https://mdn.dev/ARIA/Attributes/aria-expanded) - `true` The associated content expands and becomes visible to the user. - `false` The associated content collapses and hides from the user. |\n| readonly | `boolean` | Indicates whether the user can change the element's value while it remains visible and focusable. [MDN](https://mdn.dev/HTML/Attributes/readonly) - `true` The element has a readonly state: the user cannot change its value, but can still focus and copy it. - `false` The element allows editing and the user can change its value through interaction. |\n| form | `HTMLFormElement \\| null \\| string` | Like input form, sets a button to submit a form outside its parent form. Returns a reference to the form element if available. https://mdn.dev/ElementInternals/form |\n| name | `string` | The name of the button, submitted as a pair with the button's value as part of the form data, when that button submits the form. https://mdn.dev/HTML/Element/button#attr-name |\n| value | `string` | Defines the value associated with the element's name when submitting the form data. The server receives this value in params when the form submits through this button. [MDN](https://mdn.dev/HTML/Element/input#value) |\n| disabled | `boolean` | This Boolean attribute prevents the user from interacting with the element: it cannot receive press or focus events. [MDN](https://mdn.dev/ARIA/Attributes/aria-disabled) - `true` The element has a disabled state and does not accept interaction. - `false` The element has an enabled state and accepts interaction. |\n| current | `'page' \\| 'step'` | Indicates the element that represents the user's current location or position within a set. [MDN](https://mdn.dev/ARIA/Attributes/aria-current) - `page` Marks the current page within a set of navigation links. - `step` Marks the current step within a multi-step process or workflow. |\n| popoverTargetElement | `HTMLElement \\| null` | Establishing a relationship between a popover and its invoker button. https://mdn.dev/HTMLInputElement/popoverTargetElement |\n| popovertarget | `string` | The idref of the element that receives the popover. https://mdn.dev/HTML/Reference/Elements/button#popovertarget |\n| popoverTargetAction (popovertargetaction) | `'show' \\| 'hide' \\| 'toggle'` | The popover target action to perform on the popover target element. https://mdn.dev/HTMLInputElement/popoverTargetAction |\n| commandForElement | `HTMLElement \\| null` | The element that receives the command. https://mdn.dev/Invoker_Commands_API |\n| commandfor | `string \\| null` | The idref of the element that receives the command. https://mdn.dev/Invoker_Commands_API |\n| command | `string` | The command to execute on the element. https://mdn.dev/Invoker_Commands_API |\n| interestForElement | `HTMLElement \\| null` | The element that receives the interest. https://mdn.dev/HTMLAnchorElement/interestForElement |\n| interestfor | `string \\| null` | The idref of the element that receives the interest. https://mdn.dev/HTMLAnchorElement/interestForElement |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |\n| --border-width | `string` | [MDN](https://mdn.dev/CSS/border-width) |\n| --border-height | `string` |  |\n| --border-top | `string` | [MDN](https://mdn.dev/CSS/border-top) |\n| --border-background | `string` |  |\n| --width | `string` | [MDN](https://mdn.dev/CSS/width) |\n| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |\n| --font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |\n| --font-weight | `string` | [MDN](https://mdn.dev/CSS/font-weight) |\n| --border-radius | `string` | [MDN](https://mdn.dev/CSS/border-radius) |\n| --color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --height | `string` | [MDN](https://mdn.dev/CSS/height) |\n| --cursor | `string` | [MDN](https://mdn.dev/CSS/cursor) |\n| --text-transform | `string` | [MDN](https://mdn.dev/CSS/text-transform) |"
         }
       ]
     },
@@ -4792,7 +4988,7 @@
         },
         {
           "name": "markdown",
-          "url": "## nve-tabs\n\nTabs provide a selection UX, typically used for swapping content shown on a page, or within a navigation context.\n\n### Example\n\n```html\n<nve-tabs behavior-select>\n  <nve-tabs-item selected>Tab 1</nve-tabs-item>\n  <nve-tabs-item>Tab 2</nve-tabs-item>\n  <nve-tabs-item>Tab 3</nve-tabs-item>\n  <nve-tabs-item>Tab 4</nve-tabs-item>\n  <nve-tabs-item disabled>Disabled</nve-tabs-item>\n</nve-tabs>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/tabs/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | default slot for tab-item |\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| vertical | `boolean` | Determines whether the tabs should display in a vertical layout vs. defaulting to horizontal. |\n| borderless | `boolean` | Determines whether the tabs should display a border on selected items vs. defaults to show border. |\n| behaviorSelect (behavior-select) | `boolean` | Determines whether the tabs should handle selection behavior vs. defaults to off. |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --gap | `string` | [MDN](https://mdn.dev/CSS/gap) |\n| --indicator-background | `string` |  |\n| --indicator-border-radius | `string` |  |\n| --indicator-height | `string` |  |\n| --border-inset | `string` |  |"
+          "url": "## nve-tabs\n\nTabs provide a selection UX, typically used for swapping content shown on a page, or within a navigation context.\n\n### Example\n\n```html\n<nve-tabs-group id=\"tab-group-default\">\n  <nve-tabs>\n    <nve-tabs-item selected command=\"--toggle\" commandfor=\"tab-group-default\" value=\"overview\">Overview</nve-tabs-item>\n    <nve-tabs-item command=\"--toggle\" commandfor=\"tab-group-default\" value=\"details\">Details</nve-tabs-item>\n    <nve-tabs-item command=\"--toggle\" commandfor=\"tab-group-default\" value=\"settings\">Settings</nve-tabs-item>\n  </nve-tabs>\n  <div slot=\"overview\">overview content</div>\n  <div slot=\"details\">details content</div>\n  <div slot=\"settings\">settings content</div>\n</nve-tabs-group>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/tabs/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | default slot for tab-item |\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| vertical | `boolean` | Determines whether the tabs should display in a vertical layout vs. defaulting to horizontal. |\n| borderless | `boolean` | Determines whether the tabs should display a border on selected items vs. defaults to show border. |\n| behaviorSelect (behavior-select) | `boolean` | Determines whether the tabs should handle selection behavior vs. defaults to off. |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --gap | `string` | [MDN](https://mdn.dev/CSS/gap) |\n| --indicator-background | `string` |  |\n| --indicator-border-radius | `string` |  |\n| --indicator-height | `string` |  |\n| --border-inset | `string` |  |"
         }
       ]
     },
@@ -5319,7 +5515,7 @@
     },
     {
       "name": "nve-tree-node",
-      "description": "A tree view widget presents a hierarchical list. Any item in the hierarchy may have child items, and items that have children can expand or collapse to show or hide the children.\n---\n\n\n### **Events:**\n - **open** - Dispatched when the node opens.\n- **close** - Dispatched when the node closes.\n- **select** - Dispatched when the node selection state changes.\n\n### **Methods:**\n - **open()** - opens and sets the expanded state automatically if behaviorExpand is true\n- **close()** - closes and sets the expanded state automatically if behaviorExpand is true\n\n### **Slots:**\n - _default_ - Use default slot for basic text content or nested <nve-tree-node> elements.\n- **content** - Use for extended long form content containing interactive elements or form inputs.\n\n### **CSS Properties:**\n - **--color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color) _(default: undefined)_\n- **--border-radius** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius) _(default: undefined)_\n- **--font-size** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size) _(default: undefined)_\n- **--min-height** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/min-height) _(default: undefined)_\n- **--text-wrap** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/text-wrap) _(default: undefined)_\n- **--font-weight** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight) _(default: undefined)_\n- **--width** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/width) _(default: undefined)_\n\n### **CSS Parts:**\n - **icon-button** - The icon button element\n- **icon** - The icon element\n- **checkbox** - The checkbox element",
+      "description": "A tree view widget presents a hierarchical list. Any item in the hierarchy may have child items, and items that have children can expand or collapse to show or hide the children.\n---\n\n\n### **Events:**\n - **open** - Dispatched when the node opens.\n- **close** - Dispatched when the node closes.\n- **select** - Dispatched when the node selection state changes.\n\n### **Methods:**\n - **open()** - opens and sets the expanded state automatically if behaviorExpand is true\n- **close()** - closes and sets the expanded state automatically if behaviorExpand is true\n\n### **Slots:**\n - _default_ - Use default slot for basic text content or nested <nve-tree-node> elements.\n- **content** - Use only for extended long form content containing interactive elements or form inputs.\n\n### **CSS Properties:**\n - **--color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color) _(default: undefined)_\n- **--border-radius** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius) _(default: undefined)_\n- **--font-size** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size) _(default: undefined)_\n- **--min-height** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/min-height) _(default: undefined)_\n- **--text-wrap** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/text-wrap) _(default: undefined)_\n- **--font-weight** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight) _(default: undefined)_\n- **--width** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/width) _(default: undefined)_\n\n### **CSS Parts:**\n - **icon-button** - The icon button element\n- **icon** - The icon element\n- **checkbox** - The checkbox element",
       "attributes": [
         {
           "name": "expanded",
@@ -5359,7 +5555,7 @@
         },
         {
           "name": "markdown",
-          "url": "## nve-tree-node\n\nA tree view widget presents a hierarchical list. Any item in the hierarchy may have child items, and items that have children can expand or collapse to show or hide the children.\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/tree/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | Use default slot for basic text content or nested <nve-tree-node> elements. |\n| content | `string` | Use for extended long form content containing interactive elements or form inputs. |\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| expanded | `boolean` | Indicates whether collapsible content is currently visible or hidden from the user. [MDN](https://mdn.dev/ARIA/Attributes/aria-expanded) - `true` The associated content expands and becomes visible to the user. - `false` The associated content collapses and hides from the user. |\n| selected | `boolean` | Indicates whether an element currently holds selection within a multi-option selection group. [MDN](https://mdn.dev/ARIA/Attributes/aria-selected) - `true` The element holds selection and represents the user's current choice within the group. - `false` The element does not hold selection and the user can choose it. |\n| expandable | `boolean` | Determines whether a node can be expandable. Expandable by default if slotted nodes exist. |\n| selectable | `'single' \\| 'multi'` | Determines whether a node can be in a selected state. Nodes can be in a single or multi select state. |\n| highlighted | `boolean` | Determines the highlighted state of the element. Highlighted states serve non-interactive selections where nodes may relate to other selected portions of the UI. |\n| i18n |  | Enables updating internal string values for internationalization. |\n| indeterminate | `boolean` |  |\n| behaviorExpand | `boolean` |  |\n| behaviorSelect | `boolean` |  |\n| open |  | opens and sets the expanded state automatically if behaviorExpand is true |\n| close |  | closes and sets the expanded state automatically if behaviorExpand is true |\n\n### Events\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| open | `CustomEvent` | Dispatched when the node opens. |\n| close | `CustomEvent` | Dispatched when the node closes. |\n| select | `CustomEvent` | Dispatched when the node selection state changes. |\n\n### Invoker Commands\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --select | `CommandEvent` | use to select the node |\n| --deselect | `CommandEvent` | use to deselect the node |\n| --toggle-select | `CommandEvent` | use to toggle the node selection state |\n| --open | `CommandEvent` | use to open the node |\n| --close | `CommandEvent` | use to close the node |\n| --toggle | `CommandEvent` | use to toggle open / closed state of the node |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --border-radius | `string` | [MDN](https://mdn.dev/CSS/border-radius) |\n| --font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |\n| --min-height | `string` | [MDN](https://mdn.dev/CSS/min-height) |\n| --text-wrap | `string` | [MDN](https://mdn.dev/CSS/text-wrap) |\n| --font-weight | `string` | [MDN](https://mdn.dev/CSS/font-weight) |\n| --width | `string` | [MDN](https://mdn.dev/CSS/width) |"
+          "url": "## nve-tree-node\n\nA tree view widget presents a hierarchical list. Any item in the hierarchy may have child items, and items that have children can expand or collapse to show or hide the children.\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/tree/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | Use default slot for basic text content or nested <nve-tree-node> elements. |\n| content | `string` | Use only for extended long form content containing interactive elements or form inputs. |\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| expanded | `boolean` | Indicates whether collapsible content is currently visible or hidden from the user. [MDN](https://mdn.dev/ARIA/Attributes/aria-expanded) - `true` The associated content expands and becomes visible to the user. - `false` The associated content collapses and hides from the user. |\n| selected | `boolean` | Indicates whether an element currently holds selection within a multi-option selection group. [MDN](https://mdn.dev/ARIA/Attributes/aria-selected) - `true` The element holds selection and represents the user's current choice within the group. - `false` The element does not hold selection and the user can choose it. |\n| expandable | `boolean` | Determines whether a node can be expandable. Expandable by default if slotted nodes exist. |\n| selectable | `'single' \\| 'multi'` | Determines whether a node can be in a selected state. Nodes can be in a single or multi select state. |\n| highlighted | `boolean` | Determines the highlighted state of the element. Highlighted states serve non-interactive selections where nodes may relate to other selected portions of the UI. |\n| i18n |  | Enables updating internal string values for internationalization. |\n| indeterminate | `boolean` |  |\n| behaviorExpand | `boolean` |  |\n| behaviorSelect | `boolean` |  |\n| open |  | opens and sets the expanded state automatically if behaviorExpand is true |\n| close |  | closes and sets the expanded state automatically if behaviorExpand is true |\n\n### Events\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| open | `CustomEvent` | Dispatched when the node opens. |\n| close | `CustomEvent` | Dispatched when the node closes. |\n| select | `CustomEvent` | Dispatched when the node selection state changes. |\n\n### Invoker Commands\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --select | `CommandEvent` | use to select the node |\n| --deselect | `CommandEvent` | use to deselect the node |\n| --toggle-select | `CommandEvent` | use to toggle the node selection state |\n| --open | `CommandEvent` | use to open the node |\n| --close | `CommandEvent` | use to close the node |\n| --toggle | `CommandEvent` | use to toggle open / closed state of the node |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --border-radius | `string` | [MDN](https://mdn.dev/CSS/border-radius) |\n| --font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |\n| --min-height | `string` | [MDN](https://mdn.dev/CSS/min-height) |\n| --text-wrap | `string` | [MDN](https://mdn.dev/CSS/text-wrap) |\n| --font-weight | `string` | [MDN](https://mdn.dev/CSS/font-weight) |\n| --width | `string` | [MDN](https://mdn.dev/CSS/width) |"
         }
       ]
     },

package/dist/data.snippets.json

@@ -35,6 +35,15 @@
     "description": "Dots and icons to tabs by slotting content.",
     "body": "<nve-tabs>\n  <nve-tabs-item selected>${1:Tab 1}</nve-tabs-item>\n  <nve-tabs-item>${2:Tab 2}</nve-tabs-item>\n  <nve-tabs-item>${3:Tab 3}</nve-tabs-item>\n  <nve-tabs-item selected>\n    ${4:Tab 4}\n    <nve-dot aria-label=\"${5:10} notifications\">${5:10}</nve-dot>\n  </nve-tabs-item>\n  <nve-tabs-item disabled>disabled</nve-tabs-item>\n</nve-tabs>\n$0\n"
   },
+  "Grouped Tabs": {
+    "srcFile": "tabs.snippets.html",
+    "prefix": [
+      "tabs-group"
+    ],
+    "type": "pattern",
+    "description": "Tabs group with slot-matched panels controlled by tab item commands.",
+    "body": "<nve-tabs-group id=\"${1:tab-group}\">\n  <nve-tabs>\n    <nve-tabs-item selected command=\"--toggle\" commandfor=\"${1:tab-group}\" value=\"${2:overview}\">${3:Overview}</nve-tabs-item>\n    <nve-tabs-item command=\"--toggle\" commandfor=\"${1:tab-group}\" value=\"${4:details}\">${5:Details}</nve-tabs-item>\n    <nve-tabs-item command=\"--toggle\" commandfor=\"${1:tab-group}\" value=\"${6:settings}\">${7:Settings}</nve-tabs-item>\n  </nve-tabs>\n  <div slot=\"${2:overview}\">${8:Overview content}</div>\n  <div slot=\"${4:details}\">${9:Details content}</div>\n  <div slot=\"${6:settings}\">${10:Settings content}</div>\n</nve-tabs-group>\n$0\n"
+  },
   "Steps": {
     "srcFile": "steps.snippets.html",
     "prefix": [

package/dist/date/date2.js

@@ -19,7 +19,7 @@ var l = class extends r {
 	static {
 		this.metadata = {
 			tag: "nve-date",
-			version: "0.0.3"
+			version: "0.0.4"
 		};
 	}
 	static {

package/dist/datetime/datetime2.js

@@ -19,7 +19,7 @@ var l = class extends r {
 	static {
 		this.metadata = {
 			tag: "nve-datetime",
-			version: "0.0.3"
+			version: "0.0.4"
 		};
 	}
 	static {

package/dist/dialog/dialog-footer2.js

@@ -11,7 +11,7 @@ var o = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-dialog-footer",
-			version: "0.0.3",
+			version: "0.0.4",
 			parents: ["nve-dialog"]
 		};
 	}

package/dist/dialog/dialog-header2.js

@@ -11,7 +11,7 @@ var o = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-dialog-header",
-			version: "0.0.3",
+			version: "0.0.4",
 			parents: ["nve-dialog"]
 		};
 	}

package/dist/dialog/dialog2.js

@@ -30,7 +30,7 @@ var h = class extends f {
 	static {
 		this.metadata = {
 			tag: "nve-dialog",
-			version: "0.0.3"
+			version: "0.0.4"
 		};
 	}
 	static {

package/dist/divider/divider2.js

@@ -15,7 +15,7 @@ var s = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-divider",
-			version: "0.0.3"
+			version: "0.0.4"
 		};
 	}
 	render() {

package/dist/dot/dot2.js

@@ -16,7 +16,7 @@ var l = class extends o {
 	static {
 		this.metadata = {
 			tag: "nve-dot",
-			version: "0.0.3"
+			version: "0.0.4"
 		};
 	}
 	render() {

package/dist/drawer/drawer-content2.js

@@ -11,7 +11,7 @@ var o = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-drawer-content",
-			version: "0.0.3",
+			version: "0.0.4",
 			parents: ["nve-drawer"]
 		};
 	}

package/dist/drawer/drawer-footer2.js

@@ -11,7 +11,7 @@ var o = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-drawer-footer",
-			version: "0.0.3",
+			version: "0.0.4",
 			parents: ["nve-drawer"]
 		};
 	}

package/dist/drawer/drawer-header2.js

@@ -11,7 +11,7 @@ var o = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-drawer-header",
-			version: "0.0.3",
+			version: "0.0.4",
 			parents: ["nve-drawer"]
 		};
 	}

package/dist/drawer/drawer2.js

@@ -28,7 +28,7 @@ var p = class extends u {
 	static {
 		this.metadata = {
 			tag: "nve-drawer",
-			version: "0.0.3"
+			version: "0.0.4"
 		};
 	}
 	static {

package/dist/dropdown/dropdown-footer2.js

@@ -11,7 +11,7 @@ var o = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-dropdown-footer",
-			version: "0.0.3",
+			version: "0.0.4",
 			parents: ["nve-dropdown"]
 		};
 	}

package/dist/dropdown/dropdown-header2.js

@@ -11,7 +11,7 @@ var o = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-dropdown-header",
-			version: "0.0.3",
+			version: "0.0.4",
 			parents: ["nve-dropdown"]
 		};
 	}

package/dist/dropdown/dropdown2.js

@@ -21,7 +21,7 @@ var p = class extends l {
 	static {
 		this.metadata = {
 			tag: "nve-dropdown",
-			version: "0.0.3"
+			version: "0.0.4"
 		};
 	}
 	static {

package/dist/dropdown-group/dropdown-group.js

@@ -14,7 +14,7 @@ var d = class extends c {
 	static {
 		this.metadata = {
 			tag: "nve-dropdown-group",
-			version: "0.0.3",
+			version: "0.0.4",
 			children: ["nve-dropdown"]
 		};
 	}

package/dist/dropzone/dropzone.examples.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropzone.examples.js","names":[],"sources":["../../src/dropzone/dropzone.examples.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html } from 'lit';\nimport '@nvidia-elements/core/forms/define.js';\nimport '@nvidia-elements/core/dropzone/define.js';\n\nexport default {\n  title: 'Elements/Dropzone',\n  component: 'nve-dropzone'\n};\n\n/**\n * @summary Basic file dropzone with drag-and-drop area for file upload interactions.\n */\nexport const Default = {\n  render: () => html`\n<nve-dropzone name=\"files\" style=\"--min-height: 200px;\"></nve-dropzone>`\n};\n\n/**\n * @summary Dropzone with custom icon slot showing visual feedback on hover and highlight states.\n */\nexport const Icon = {\n  render: () => html`\n<style>\n  nve-dropzone nve-icon {\n    --color: red;\n    background: var(--nve-sys-layer-canvas-accent-background);\n  }\n\n  nve-dropzone[highlighted] nve-icon,\n  nve-dropzone:hover nve-icon {\n    --color: var(--nve-sys-text-white-color);\n    background: var(--nve-sys-accent-primary-background);\n  }\n</style>\n<nve-dropzone name=\"files\">\n  <nve-icon slot=\"icon\" name=\"document\"></nve-icon>\n</nve-dropzone>\n`\n};\n\n/**\n * @summary Dropzone integrated with form validation showing file type and size constraint errors.\n */\nexport const Form = {\n  render: () => html`\n<form id=\"form-demo\" nve-layout=\"column gap:lg\">\n  <section>\n    <nve-control>\n      <nve-dropzone name=\"files\" accept=\"image/gif, image/jpeg, image/png\" max-file-size=\"1048576\"></nve-dropzone>\n      <nve-control-message error=\"typeMismatch\">Unsupported file type — this upload only accepts images</nve-control-message>\n      <nve-control-message error=\"rangeOverflow\">File too big - maximum 1.00 MB allowed</nve-control-message>\n    </nve-control>\n  </section>\n  <nve-button type=\"submit\">submit</nve-button>\n</form>\n<script type=\"module\">\n  const form = document.querySelector('#form-demo');\n  const dropzone = document.querySelector('#form-demo nve-dropzone');\n\n  dropzone.addEventListener('change', e => {\n    console.log('change', e.target.value);\n    const files = e.target.value;\n    console.log('Validity:', e.target.validity);\n    console.log('Validation Message:', e.target.validationMessage);\n  });\n\n  form.addEventListener('submit', e => {\n    e.preventDefault();\n    const formData = new FormData(e.target);\n    const files = formData.getAll('files');\n\n    if (form.checkValidity()) {\n      console.log('Form submitted successfully!');\n    } else {\n      console.log('Form validation failed');\n    }\n  });\n</script>\n`\n};\n"],"mappings":";AAGA,IAAA,IAAS"}
+{"version":3,"file":"dropzone.examples.js","names":[],"sources":["../../src/dropzone/dropzone.examples.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html } from 'lit';\nimport '@nvidia-elements/core/forms/define.js';\nimport '@nvidia-elements/core/dropzone/define.js';\n\nexport default {\n  title: 'Elements/Dropzone',\n  component: 'nve-dropzone'\n};\n\n/**\n * @summary Basic file dropzone with drag-and-drop area for file upload interactions.\n */\nexport const Default = {\n  render: () => html`\n<nve-dropzone name=\"files\" style=\"--min-height: 200px;\"></nve-dropzone>`\n};\n\n/**\n * @summary Dropzone with custom icon slot showing visual feedback on hover and highlight states.\n * @tags theme\n */\nexport const Icon = {\n  render: () => html`\n<style>\n  nve-dropzone nve-icon {\n    --color: red;\n    background: var(--nve-sys-layer-canvas-accent-background);\n  }\n\n  nve-dropzone[highlighted] nve-icon,\n  nve-dropzone:hover nve-icon {\n    --color: var(--nve-sys-text-white-color);\n    background: var(--nve-sys-accent-primary-background);\n  }\n</style>\n<nve-dropzone name=\"files\">\n  <nve-icon slot=\"icon\" name=\"document\"></nve-icon>\n</nve-dropzone>\n`\n};\n\n/**\n * @summary Dropzone integrated with form validation showing file type and size constraint errors.\n */\nexport const Form = {\n  render: () => html`\n<form id=\"form-demo\" nve-layout=\"column gap:lg\">\n  <section>\n    <nve-control>\n      <nve-dropzone name=\"files\" accept=\"image/gif, image/jpeg, image/png\" max-file-size=\"1048576\"></nve-dropzone>\n      <nve-control-message error=\"typeMismatch\">Unsupported file type — this upload only accepts images</nve-control-message>\n      <nve-control-message error=\"rangeOverflow\">File too big - maximum 1.00 MB allowed</nve-control-message>\n    </nve-control>\n  </section>\n  <nve-button type=\"submit\">submit</nve-button>\n</form>\n<script type=\"module\">\n  const form = document.querySelector('#form-demo');\n  const dropzone = document.querySelector('#form-demo nve-dropzone');\n\n  dropzone.addEventListener('change', e => {\n    console.log('change', e.target.value);\n    const files = e.target.value;\n    console.log('Validity:', e.target.validity);\n    console.log('Validation Message:', e.target.validationMessage);\n  });\n\n  form.addEventListener('submit', e => {\n    e.preventDefault();\n    const formData = new FormData(e.target);\n    const files = formData.getAll('files');\n\n    if (form.checkValidity()) {\n      console.log('Form submitted successfully!');\n    } else {\n      console.log('Form validation failed');\n    }\n  });\n</script>\n`\n};\n"],"mappings":";AAGA,IAAA,IAAS"}

package/dist/dropzone/dropzone.examples.json

@@ -18,7 +18,9 @@
       "summary": "Dropzone with custom icon slot showing visual feedback on hover and highlight states.",
       "description": "",
       "composition": false,
-      "tags": []
+      "tags": [
+        "theme"
+      ]
     },
     {
       "id": "core-dropzone_form",

package/dist/dropzone/dropzone2.js

@@ -20,7 +20,7 @@ var g = class extends h(d) {
 	static {
 		this.metadata = {
 			tag: "nve-dropzone",
-			version: "0.0.3",
+			version: "0.0.4",
 			validators: [l, c],
 			valueSchema: {
 				type: "array",

package/dist/file/file2.js

@@ -11,7 +11,7 @@ var a = class extends n {
 	static {
 		this.metadata = {
 			tag: "nve-file",
-			version: "0.0.3"
+			version: "0.0.4"
 		};
 	}
 	connectedCallback() {

package/dist/format-datetime/define.d.ts

@@ -0,0 +1,6 @@
+import { FormatDatetime } from '.';
+declare global {
+    interface HTMLElementTagNameMap {
+        'nve-format-datetime': FormatDatetime;
+    }
+}

package/dist/format-datetime/define.js

@@ -0,0 +1,7 @@
+import { define as e } from "../internal/utils/dom.js";
+import { FormatDatetime as t } from "./format-datetime2.js";
+//#region src/format-datetime/define.ts
+e(t);
+//#endregion
+
+//# sourceMappingURL=define.js.map

package/dist/format-datetime/define.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"define.js","names":[],"sources":["../../src/format-datetime/define.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { define } from '@nvidia-elements/core/internal';\nimport { FormatDatetime } from '@nvidia-elements/core/format-datetime';\n\ndefine(FormatDatetime);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nve-format-datetime': FormatDatetime;\n  }\n}\n"],"mappings":";;;AAMA,EAAO,EAAe"}