@nvidia-elements/core 2.8.0 → 2.8.1

package/dist/custom-elements.json

@@ -47,13 +47,13 @@
             "themes": true,
             "aria": "https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/",
             "entrypoint": "@nvidia-elements/core/accordion",
-            "example": "<nve-accordion-group behavior-expand>\n  <nve-accordion>\n    <nve-accordion-header>\n      <h2 nve-text=\"heading xs medium\">Workspace Settings</h2>\n    </nve-accordion-header>\n    <nve-accordion-content\n      >Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content\n    >\n  </nve-accordion>\n</nve-accordion-group>",
+            "example": "<nve-accordion-group behavior-expand>\n  <nve-accordion>\n    <nve-accordion-header>\n      <h2 nve-text=\"heading xs medium\">Workspace Settings</h2>\n    </nve-accordion-header>\n    <nve-accordion-content>Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content>\n  </nve-accordion>\n</nve-accordion-group>",
             "package": true,
             "documentation": "https://nvidia.github.io/elements/docs/elements/accordion/",
             "since": "0.12.0",
             "status": "stable",
             "behavior": "container",
-            "markdown": "## nve-accordion-header\n\nProvides the clickable heading region of an accordion that toggles the visibility of associated content.\n\n### Example\n\n```html\n<nve-accordion-group behavior-expand>\n  <nve-accordion>\n    <nve-accordion-header>\n      <h2 nve-text=\"heading xs medium\">Workspace Settings</h2>\n    </nve-accordion-header>\n    <nve-accordion-content\n      >Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content\n    >\n  </nve-accordion>\n</nve-accordion-group>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/accordion/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | Heading text and supporting content that labels the accordion section. |\n| prefix | `string` | slot for prefix content |\n| suffix | `string` | slot for suffix content |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --cursor | `string` | [MDN](https://mdn.dev/CSS/cursor) |"
+            "markdown": "## nve-accordion-header\n\nProvides the clickable heading region of an accordion that toggles the visibility of associated content.\n\n### Example\n\n```html\n<nve-accordion-group behavior-expand>\n  <nve-accordion>\n    <nve-accordion-header>\n      <h2 nve-text=\"heading xs medium\">Workspace Settings</h2>\n    </nve-accordion-header>\n    <nve-accordion-content>Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content>\n  </nve-accordion>\n</nve-accordion-group>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/accordion/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | Heading text and supporting content that labels the accordion section. |\n| prefix | `string` | slot for prefix content |\n| suffix | `string` | slot for suffix content |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --cursor | `string` | [MDN](https://mdn.dev/CSS/cursor) |"
           }
         },
         {
@@ -89,13 +89,13 @@
             "themes": true,
             "aria": "https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/",
             "entrypoint": "@nvidia-elements/core/accordion",
-            "example": "<nve-accordion-group behavior-expand>\n  <nve-accordion>\n    <nve-accordion-header>\n      <h2 nve-text=\"heading xs medium\">Workspace Settings</h2>\n    </nve-accordion-header>\n    <nve-accordion-content\n      >Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content\n    >\n  </nve-accordion>\n</nve-accordion-group>",
+            "example": "<nve-accordion-group behavior-expand>\n  <nve-accordion>\n    <nve-accordion-header>\n      <h2 nve-text=\"heading xs medium\">Workspace Settings</h2>\n    </nve-accordion-header>\n    <nve-accordion-content>Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content>\n  </nve-accordion>\n</nve-accordion-group>",
             "package": true,
             "documentation": "https://nvidia.github.io/elements/docs/elements/accordion/",
             "since": "0.12.0",
             "status": "stable",
             "behavior": "container",
-            "markdown": "## nve-accordion-content\n\nContains the collapsible body content that reveals or hides when the parent accordion expands or collapses.\n\n### Example\n\n```html\n<nve-accordion-group behavior-expand>\n  <nve-accordion>\n    <nve-accordion-header>\n      <h2 nve-text=\"heading xs medium\">Workspace Settings</h2>\n    </nve-accordion-header>\n    <nve-accordion-content\n      >Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content\n    >\n  </nve-accordion>\n</nve-accordion-group>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/accordion/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | This is a default/unnamed slot for accordion content |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |"
+            "markdown": "## nve-accordion-content\n\nContains the collapsible body content that reveals or hides when the parent accordion expands or collapses.\n\n### Example\n\n```html\n<nve-accordion-group behavior-expand>\n  <nve-accordion>\n    <nve-accordion-header>\n      <h2 nve-text=\"heading xs medium\">Workspace Settings</h2>\n    </nve-accordion-header>\n    <nve-accordion-content>Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content>\n  </nve-accordion>\n</nve-accordion-group>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/accordion/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | This is a default/unnamed slot for accordion content |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |"
           }
         },
         {
@@ -348,13 +348,13 @@
             "themes": true,
             "aria": "https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/",
             "entrypoint": "@nvidia-elements/core/accordion",
-            "example": "<nve-accordion-group behavior-expand>\n  <nve-accordion>\n    <nve-accordion-header>\n      <h2 nve-text=\"heading xs medium\">Workspace Settings</h2>\n    </nve-accordion-header>\n    <nve-accordion-content\n      >Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content\n    >\n  </nve-accordion>\n</nve-accordion-group>",
+            "example": "<nve-accordion-group behavior-expand>\n  <nve-accordion>\n    <nve-accordion-header>\n      <h2 nve-text=\"heading xs medium\">Workspace Settings</h2>\n    </nve-accordion-header>\n    <nve-accordion-content>Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content>\n  </nve-accordion>\n</nve-accordion-group>",
             "package": true,
             "documentation": "https://nvidia.github.io/elements/docs/elements/accordion/",
             "since": "0.12.0",
             "status": "stable",
             "behavior": "container",
-            "markdown": "## nve-accordion\n\nAn accordion is a vertical stack of interactive headings used to toggle the display of further information.\n\n### Example\n\n```html\n<nve-accordion-group behavior-expand>\n  <nve-accordion>\n    <nve-accordion-header>\n      <h2 nve-text=\"heading xs medium\">Workspace Settings</h2>\n    </nve-accordion-header>\n    <nve-accordion-content\n      >Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content\n    >\n  </nve-accordion>\n</nve-accordion-group>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/accordion/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | Content displayed in the collapsible region, typically an `nve-accordion-content` element. |\n| icon-button | `string` | icon elements to display for expand/collapse |\n| header | `string` | header element (Use `accordion-header` or custom content) |\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| i18n |  | Enables updating internal string values for internationalization. |\n| container | `'flat' \\| 'inset' \\| undefined` | Determines the container styles of component. Flat suits nesting accordions within other containers. Inset suits more complex accordions where content needs distinct separation. |\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| 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| behaviorExpand (behavior-expand) | `boolean` | Determines whether the accordion should opt-in to stateful expansion behavior (defaults to stateless) |\n\n### Invoker Commands\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --open | `CommandEvent` | use to open the accordion |\n| --close | `CommandEvent` | use to close the accordion |\n| --toggle | `CommandEvent` | use to toggle the accordion |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\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| --header-padding | `string` | Padding around the header content. |\n| --cursor | `string` | [MDN](https://mdn.dev/CSS/cursor) |\n| --transition | `string` | [MDN](https://mdn.dev/CSS/transition) |"
+            "markdown": "## nve-accordion\n\nAn accordion is a vertical stack of interactive headings used to toggle the display of further information.\n\n### Example\n\n```html\n<nve-accordion-group behavior-expand>\n  <nve-accordion>\n    <nve-accordion-header>\n      <h2 nve-text=\"heading xs medium\">Workspace Settings</h2>\n    </nve-accordion-header>\n    <nve-accordion-content>Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content>\n  </nve-accordion>\n</nve-accordion-group>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/accordion/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | Content displayed in the collapsible region, typically an `nve-accordion-content` element. |\n| icon-button | `string` | icon elements to display for expand/collapse |\n| header | `string` | header element (Use `accordion-header` or custom content) |\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| i18n |  | Enables updating internal string values for internationalization. |\n| container | `'flat' \\| 'inset' \\| undefined` | Determines the container styles of component. Flat suits nesting accordions within other containers. Inset suits more complex accordions where content needs distinct separation. |\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| 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| behaviorExpand (behavior-expand) | `boolean` | Determines whether the accordion should opt-in to stateful expansion behavior (defaults to stateless) |\n\n### Invoker Commands\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --open | `CommandEvent` | use to open the accordion |\n| --close | `CommandEvent` | use to close the accordion |\n| --toggle | `CommandEvent` | use to toggle the accordion |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\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| --header-padding | `string` | Padding around the header content. |\n| --cursor | `string` | [MDN](https://mdn.dev/CSS/cursor) |\n| --transition | `string` | [MDN](https://mdn.dev/CSS/transition) |"
           },
           "commands": [
             {
@@ -529,13 +529,13 @@
             "themes": true,
             "aria": "https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/",
             "entrypoint": "@nvidia-elements/core/accordion",
-            "example": "<nve-accordion-group behavior-expand>\n  <nve-accordion>\n    <nve-accordion-header>\n      <h2 nve-text=\"heading xs medium\">Workspace Settings</h2>\n    </nve-accordion-header>\n    <nve-accordion-content\n      >Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content\n    >\n  </nve-accordion>\n</nve-accordion-group>",
+            "example": "<nve-accordion-group behavior-expand>\n  <nve-accordion>\n    <nve-accordion-header>\n      <h2 nve-text=\"heading xs medium\">Workspace Settings</h2>\n    </nve-accordion-header>\n    <nve-accordion-content>Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content>\n  </nve-accordion>\n</nve-accordion-group>",
             "package": true,
             "documentation": "https://nvidia.github.io/elements/docs/elements/accordion/",
             "since": "0.12.0",
             "status": "stable",
             "behavior": "container",
-            "markdown": "## nve-accordion-group\n\nOrganizes many accordions into a cohesive group, enabling coordinated expand/collapse behavior such as single-item expansion.\n\n### Example\n\n```html\n<nve-accordion-group behavior-expand>\n  <nve-accordion>\n    <nve-accordion-header>\n      <h2 nve-text=\"heading xs medium\">Workspace Settings</h2>\n    </nve-accordion-header>\n    <nve-accordion-content\n      >Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content\n    >\n  </nve-accordion>\n</nve-accordion-group>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/accordion/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | This is a default slot for accordions within the group |\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| behaviorExpand (behavior-expand) | `boolean` | Determines whether the accordion should opt-in to stateful expansion behavior (defaults to stateless) |\n| behaviorExpandSingle (behavior-expand-single) | `boolean` | Determines whether the accordion should opt-in to stateful expansion of a single accordion at a time |\n| container | `'flat' \\| 'inset' \\| undefined` | Controls the container style applied to child accordions. `flat` removes the visual container, `inset` adds rounded containment, and omission uses the default divided presentation. |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |"
+            "markdown": "## nve-accordion-group\n\nOrganizes many accordions into a cohesive group, enabling coordinated expand/collapse behavior such as single-item expansion.\n\n### Example\n\n```html\n<nve-accordion-group behavior-expand>\n  <nve-accordion>\n    <nve-accordion-header>\n      <h2 nve-text=\"heading xs medium\">Workspace Settings</h2>\n    </nve-accordion-header>\n    <nve-accordion-content>Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content>\n  </nve-accordion>\n</nve-accordion-group>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/accordion/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | This is a default slot for accordions within the group |\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| behaviorExpand (behavior-expand) | `boolean` | Determines whether the accordion should opt-in to stateful expansion behavior (defaults to stateless) |\n| behaviorExpandSingle (behavior-expand-single) | `boolean` | Determines whether the accordion should opt-in to stateful expansion of a single accordion at a time |\n| container | `'flat' \\| 'inset' \\| undefined` | Controls the container style applied to child accordions. `flat` removes the visual container, `inset` adds rounded containment, and omission uses the default divided presentation. |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |"
           }
         }
       ],
@@ -11060,13 +11060,13 @@
             "themes": true,
             "aria": "https://www.w3.org/WAI/ARIA/apg/patterns/menubar/",
             "entrypoint": "@nvidia-elements/core/dropdown-group",
-            "example": "<nve-button popovertarget=\"menu-1\">menu</nve-button>\n<nve-dropdown-group>\n  <nve-dropdown id=\"menu-1\">\n    <nve-menu>\n      <nve-menu-item popovertarget=\"menu-2\">\n        item 1-1 <nve-icon name=\"caret\" direction=\"right\" size=\"sm\" slot=\"suffix\"></nve-icon>\n      </nve-menu-item>\n      <nve-menu-item>item 1-2</nve-menu-item>\n      <nve-menu-item>item 1-3</nve-menu-item>\n    </nve-menu>\n  </nve-dropdown>\n  <nve-dropdown id=\"menu-2\" position=\"right\">\n    <nve-menu>\n      <nve-menu-item>item 2-1</nve-menu-item>\n      <nve-menu-item popovertarget=\"menu-3\">\n        item 2-2 <nve-icon name=\"caret\" direction=\"right\" size=\"sm\" slot=\"suffix\"></nve-icon>\n      </nve-menu-item>\n      <nve-menu-item>item 2-3</nve-menu-item>\n    </nve-menu>\n  </nve-dropdown>\n  <nve-dropdown id=\"menu-3\" position=\"right\">\n    <nve-menu>\n      <nve-menu-item>item 3-1</nve-menu-item>\n      <nve-menu-item>item 3-2</nve-menu-item>\n      <nve-menu-item>item 3-3</nve-menu-item>\n    </nve-menu>\n  </nve-dropdown>\n</nve-dropdown-group>",
+            "example": "<nve-button popovertarget=\"menu-1\">menu</nve-button>\n<nve-dropdown-group>\n  <nve-dropdown id=\"menu-1\">\n    <nve-menu>\n      <nve-menu-item popovertarget=\"menu-2\"> item 1-1 <nve-icon name=\"caret\" direction=\"right\" size=\"sm\" slot=\"suffix\"></nve-icon> </nve-menu-item>\n      <nve-menu-item>item 1-2</nve-menu-item>\n      <nve-menu-item>item 1-3</nve-menu-item>\n    </nve-menu>\n  </nve-dropdown>\n  <nve-dropdown id=\"menu-2\" position=\"right\">\n    <nve-menu>\n      <nve-menu-item>item 2-1</nve-menu-item>\n      <nve-menu-item popovertarget=\"menu-3\"> item 2-2 <nve-icon name=\"caret\" direction=\"right\" size=\"sm\" slot=\"suffix\"></nve-icon> </nve-menu-item>\n      <nve-menu-item>item 2-3</nve-menu-item>\n    </nve-menu>\n  </nve-dropdown>\n  <nve-dropdown id=\"menu-3\" position=\"right\">\n    <nve-menu>\n      <nve-menu-item>item 3-1</nve-menu-item>\n      <nve-menu-item>item 3-2</nve-menu-item>\n      <nve-menu-item>item 3-3</nve-menu-item>\n    </nve-menu>\n  </nve-dropdown>\n</nve-dropdown-group>",
             "package": true,
             "documentation": "https://nvidia.github.io/elements/docs/elements/dropdown-group/",
             "since": "1.30.1",
             "status": "stable",
             "behavior": "navigation",
-            "markdown": "## nve-dropdown-group\n\nA Dropdown Group streamlines the management of linked dropdowns and supports nested dropdowns for a more organized and intuitive user experience\n\n### Example\n\n```html\n<nve-button popovertarget=\"menu-1\">menu</nve-button>\n<nve-dropdown-group>\n  <nve-dropdown id=\"menu-1\">\n    <nve-menu>\n      <nve-menu-item popovertarget=\"menu-2\">\n        item 1-1 <nve-icon name=\"caret\" direction=\"right\" size=\"sm\" slot=\"suffix\"></nve-icon>\n      </nve-menu-item>\n      <nve-menu-item>item 1-2</nve-menu-item>\n      <nve-menu-item>item 1-3</nve-menu-item>\n    </nve-menu>\n  </nve-dropdown>\n  <nve-dropdown id=\"menu-2\" position=\"right\">\n    <nve-menu>\n      <nve-menu-item>item 2-1</nve-menu-item>\n      <nve-menu-item popovertarget=\"menu-3\">\n        item 2-2 <nve-icon name=\"caret\" direction=\"right\" size=\"sm\" slot=\"suffix\"></nve-icon>\n      </nve-menu-item>\n      <nve-menu-item>item 2-3</nve-menu-item>\n    </nve-menu>\n  </nve-dropdown>\n  <nve-dropdown id=\"menu-3\" position=\"right\">\n    <nve-menu>\n      <nve-menu-item>item 3-1</nve-menu-item>\n      <nve-menu-item>item 3-2</nve-menu-item>\n      <nve-menu-item>item 3-3</nve-menu-item>\n    </nve-menu>\n  </nve-dropdown>\n</nve-dropdown-group>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/dropdown-group/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | default slot for dropdown content |\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| close |  | Closes every descendant dropdown in the group. |\n\n### Events\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| open | `CustomEvent` | Dispatched when a dropdown in the group opens |\n| close | `CustomEvent` | Dispatched when a dropdown in the group closes |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --arrow-transform | `string` | Transform applied to the popover arrow |"
+            "markdown": "## nve-dropdown-group\n\nA Dropdown Group streamlines the management of linked dropdowns and supports nested dropdowns for a more organized and intuitive user experience\n\n### Example\n\n```html\n<nve-button popovertarget=\"menu-1\">menu</nve-button>\n<nve-dropdown-group>\n  <nve-dropdown id=\"menu-1\">\n    <nve-menu>\n      <nve-menu-item popovertarget=\"menu-2\"> item 1-1 <nve-icon name=\"caret\" direction=\"right\" size=\"sm\" slot=\"suffix\"></nve-icon> </nve-menu-item>\n      <nve-menu-item>item 1-2</nve-menu-item>\n      <nve-menu-item>item 1-3</nve-menu-item>\n    </nve-menu>\n  </nve-dropdown>\n  <nve-dropdown id=\"menu-2\" position=\"right\">\n    <nve-menu>\n      <nve-menu-item>item 2-1</nve-menu-item>\n      <nve-menu-item popovertarget=\"menu-3\"> item 2-2 <nve-icon name=\"caret\" direction=\"right\" size=\"sm\" slot=\"suffix\"></nve-icon> </nve-menu-item>\n      <nve-menu-item>item 2-3</nve-menu-item>\n    </nve-menu>\n  </nve-dropdown>\n  <nve-dropdown id=\"menu-3\" position=\"right\">\n    <nve-menu>\n      <nve-menu-item>item 3-1</nve-menu-item>\n      <nve-menu-item>item 3-2</nve-menu-item>\n      <nve-menu-item>item 3-3</nve-menu-item>\n    </nve-menu>\n  </nve-dropdown>\n</nve-dropdown-group>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/dropdown-group/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | default slot for dropdown content |\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| close |  | Closes every descendant dropdown in the group. |\n\n### Events\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| open | `CustomEvent` | Dispatched when a dropdown in the group opens |\n| close | `CustomEvent` | Dispatched when a dropdown in the group closes |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --arrow-transform | `string` | Transform applied to the popover arrow |"
           }
         }
       ],
@@ -17899,13 +17899,13 @@
             "themes": true,
             "aria": "https://www.w3.org/WAI/ARIA/apg/patterns/grid/",
             "entrypoint": "@nvidia-elements/core/grid",
-            "example": "<nve-grid>\n  <nve-grid-header>\n    <nve-grid-column>column 0</nve-grid-column><nve-grid-column>column 1</nve-grid-column\n    ><nve-grid-column>column 2</nve-grid-column><nve-grid-column>column 3</nve-grid-column\n    ><nve-grid-column>column 4</nve-grid-column>\n  </nve-grid-header>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 0-0</nve-grid-cell><nve-grid-cell>cell 0-1</nve-grid-cell><nve-grid-cell>cell 0-2</nve-grid-cell\n    ><nve-grid-cell>cell 0-3</nve-grid-cell><nve-grid-cell>cell 0-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 1-0</nve-grid-cell><nve-grid-cell>cell 1-1</nve-grid-cell><nve-grid-cell>cell 1-2</nve-grid-cell\n    ><nve-grid-cell>cell 1-3</nve-grid-cell><nve-grid-cell>cell 1-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 2-0</nve-grid-cell><nve-grid-cell>cell 2-1</nve-grid-cell><nve-grid-cell>cell 2-2</nve-grid-cell\n    ><nve-grid-cell>cell 2-3</nve-grid-cell><nve-grid-cell>cell 2-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 3-0</nve-grid-cell><nve-grid-cell>cell 3-1</nve-grid-cell><nve-grid-cell>cell 3-2</nve-grid-cell\n    ><nve-grid-cell>cell 3-3</nve-grid-cell><nve-grid-cell>cell 3-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 4-0</nve-grid-cell><nve-grid-cell>cell 4-1</nve-grid-cell><nve-grid-cell>cell 4-2</nve-grid-cell\n    ><nve-grid-cell>cell 4-3</nve-grid-cell><nve-grid-cell>cell 4-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 5-0</nve-grid-cell><nve-grid-cell>cell 5-1</nve-grid-cell><nve-grid-cell>cell 5-2</nve-grid-cell\n    ><nve-grid-cell>cell 5-3</nve-grid-cell><nve-grid-cell>cell 5-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 6-0</nve-grid-cell><nve-grid-cell>cell 6-1</nve-grid-cell><nve-grid-cell>cell 6-2</nve-grid-cell\n    ><nve-grid-cell>cell 6-3</nve-grid-cell><nve-grid-cell>cell 6-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 7-0</nve-grid-cell><nve-grid-cell>cell 7-1</nve-grid-cell><nve-grid-cell>cell 7-2</nve-grid-cell\n    ><nve-grid-cell>cell 7-3</nve-grid-cell><nve-grid-cell>cell 7-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 8-0</nve-grid-cell><nve-grid-cell>cell 8-1</nve-grid-cell><nve-grid-cell>cell 8-2</nve-grid-cell\n    ><nve-grid-cell>cell 8-3</nve-grid-cell><nve-grid-cell>cell 8-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 9-0</nve-grid-cell><nve-grid-cell>cell 9-1</nve-grid-cell><nve-grid-cell>cell 9-2</nve-grid-cell\n    ><nve-grid-cell>cell 9-3</nve-grid-cell><nve-grid-cell>cell 9-4</nve-grid-cell>\n  </nve-grid-row>\n</nve-grid>",
+            "example": "<nve-grid>\n  <nve-grid-header>\n    <nve-grid-column>column 0</nve-grid-column><nve-grid-column>column 1</nve-grid-column><nve-grid-column>column 2</nve-grid-column><nve-grid-column>column 3</nve-grid-column><nve-grid-column>column 4</nve-grid-column>\n  </nve-grid-header>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 0-0</nve-grid-cell><nve-grid-cell>cell 0-1</nve-grid-cell><nve-grid-cell>cell 0-2</nve-grid-cell><nve-grid-cell>cell 0-3</nve-grid-cell><nve-grid-cell>cell 0-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 1-0</nve-grid-cell><nve-grid-cell>cell 1-1</nve-grid-cell><nve-grid-cell>cell 1-2</nve-grid-cell><nve-grid-cell>cell 1-3</nve-grid-cell><nve-grid-cell>cell 1-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 2-0</nve-grid-cell><nve-grid-cell>cell 2-1</nve-grid-cell><nve-grid-cell>cell 2-2</nve-grid-cell><nve-grid-cell>cell 2-3</nve-grid-cell><nve-grid-cell>cell 2-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 3-0</nve-grid-cell><nve-grid-cell>cell 3-1</nve-grid-cell><nve-grid-cell>cell 3-2</nve-grid-cell><nve-grid-cell>cell 3-3</nve-grid-cell><nve-grid-cell>cell 3-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 4-0</nve-grid-cell><nve-grid-cell>cell 4-1</nve-grid-cell><nve-grid-cell>cell 4-2</nve-grid-cell><nve-grid-cell>cell 4-3</nve-grid-cell><nve-grid-cell>cell 4-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 5-0</nve-grid-cell><nve-grid-cell>cell 5-1</nve-grid-cell><nve-grid-cell>cell 5-2</nve-grid-cell><nve-grid-cell>cell 5-3</nve-grid-cell><nve-grid-cell>cell 5-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 6-0</nve-grid-cell><nve-grid-cell>cell 6-1</nve-grid-cell><nve-grid-cell>cell 6-2</nve-grid-cell><nve-grid-cell>cell 6-3</nve-grid-cell><nve-grid-cell>cell 6-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 7-0</nve-grid-cell><nve-grid-cell>cell 7-1</nve-grid-cell><nve-grid-cell>cell 7-2</nve-grid-cell><nve-grid-cell>cell 7-3</nve-grid-cell><nve-grid-cell>cell 7-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 8-0</nve-grid-cell><nve-grid-cell>cell 8-1</nve-grid-cell><nve-grid-cell>cell 8-2</nve-grid-cell><nve-grid-cell>cell 8-3</nve-grid-cell><nve-grid-cell>cell 8-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 9-0</nve-grid-cell><nve-grid-cell>cell 9-1</nve-grid-cell><nve-grid-cell>cell 9-2</nve-grid-cell><nve-grid-cell>cell 9-3</nve-grid-cell><nve-grid-cell>cell 9-4</nve-grid-cell>\n  </nve-grid-row>\n</nve-grid>",
             "package": true,
             "documentation": "https://nvidia.github.io/elements/docs/elements/data-grid/",
             "since": "0.11.0",
             "status": "stable",
             "behavior": "list",
-            "markdown": "## nve-grid\n\nA versatile table/datagrid component with built-in keyboard navigation for displaying and interacting with structured data. Use it for anything from simple read-only tables to fully interactive, spreadsheet experiences.\n\n### Example\n\n```html\n<nve-grid>\n  <nve-grid-header>\n    <nve-grid-column>column 0</nve-grid-column><nve-grid-column>column 1</nve-grid-column\n    ><nve-grid-column>column 2</nve-grid-column><nve-grid-column>column 3</nve-grid-column\n    ><nve-grid-column>column 4</nve-grid-column>\n  </nve-grid-header>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 0-0</nve-grid-cell><nve-grid-cell>cell 0-1</nve-grid-cell><nve-grid-cell>cell 0-2</nve-grid-cell\n    ><nve-grid-cell>cell 0-3</nve-grid-cell><nve-grid-cell>cell 0-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 1-0</nve-grid-cell><nve-grid-cell>cell 1-1</nve-grid-cell><nve-grid-cell>cell 1-2</nve-grid-cell\n    ><nve-grid-cell>cell 1-3</nve-grid-cell><nve-grid-cell>cell 1-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 2-0</nve-grid-cell><nve-grid-cell>cell 2-1</nve-grid-cell><nve-grid-cell>cell 2-2</nve-grid-cell\n    ><nve-grid-cell>cell 2-3</nve-grid-cell><nve-grid-cell>cell 2-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 3-0</nve-grid-cell><nve-grid-cell>cell 3-1</nve-grid-cell><nve-grid-cell>cell 3-2</nve-grid-cell\n    ><nve-grid-cell>cell 3-3</nve-grid-cell><nve-grid-cell>cell 3-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 4-0</nve-grid-cell><nve-grid-cell>cell 4-1</nve-grid-cell><nve-grid-cell>cell 4-2</nve-grid-cell\n    ><nve-grid-cell>cell 4-3</nve-grid-cell><nve-grid-cell>cell 4-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 5-0</nve-grid-cell><nve-grid-cell>cell 5-1</nve-grid-cell><nve-grid-cell>cell 5-2</nve-grid-cell\n    ><nve-grid-cell>cell 5-3</nve-grid-cell><nve-grid-cell>cell 5-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 6-0</nve-grid-cell><nve-grid-cell>cell 6-1</nve-grid-cell><nve-grid-cell>cell 6-2</nve-grid-cell\n    ><nve-grid-cell>cell 6-3</nve-grid-cell><nve-grid-cell>cell 6-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 7-0</nve-grid-cell><nve-grid-cell>cell 7-1</nve-grid-cell><nve-grid-cell>cell 7-2</nve-grid-cell\n    ><nve-grid-cell>cell 7-3</nve-grid-cell><nve-grid-cell>cell 7-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 8-0</nve-grid-cell><nve-grid-cell>cell 8-1</nve-grid-cell><nve-grid-cell>cell 8-2</nve-grid-cell\n    ><nve-grid-cell>cell 8-3</nve-grid-cell><nve-grid-cell>cell 8-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 9-0</nve-grid-cell><nve-grid-cell>cell 9-1</nve-grid-cell><nve-grid-cell>cell 9-2</nve-grid-cell\n    ><nve-grid-cell>cell 9-3</nve-grid-cell><nve-grid-cell>cell 9-4</nve-grid-cell>\n  </nve-grid-row>\n</nve-grid>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/grid/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | `nve-grid-header`, `nve-grid-row`, and `nve-grid-placeholder` elements. |\n| footer | `string` | slot for grid-footer or toolbar |\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| container | `'flat' \\| 'full' \\| undefined` | Determines the container styles of component. Flat nests the grid within other containers. Full spans the full edge-to-edge viewport width. |\n| stripe | `boolean` | Determine style variant stripe rows |\n| scrollTo |  | Scroll to a specific position in the grid. |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\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| --box-shadow | `string` | [MDN](https://mdn.dev/CSS/box-shadow) |\n| --font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |\n| --row-height | `string` | fixed height of each row |\n| --scroll-height | `string` | height of the scrollable area |"
+            "markdown": "## nve-grid\n\nA versatile table/datagrid component with built-in keyboard navigation for displaying and interacting with structured data. Use it for anything from simple read-only tables to fully interactive, spreadsheet experiences.\n\n### Example\n\n```html\n<nve-grid>\n  <nve-grid-header>\n    <nve-grid-column>column 0</nve-grid-column><nve-grid-column>column 1</nve-grid-column><nve-grid-column>column 2</nve-grid-column><nve-grid-column>column 3</nve-grid-column><nve-grid-column>column 4</nve-grid-column>\n  </nve-grid-header>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 0-0</nve-grid-cell><nve-grid-cell>cell 0-1</nve-grid-cell><nve-grid-cell>cell 0-2</nve-grid-cell><nve-grid-cell>cell 0-3</nve-grid-cell><nve-grid-cell>cell 0-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 1-0</nve-grid-cell><nve-grid-cell>cell 1-1</nve-grid-cell><nve-grid-cell>cell 1-2</nve-grid-cell><nve-grid-cell>cell 1-3</nve-grid-cell><nve-grid-cell>cell 1-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 2-0</nve-grid-cell><nve-grid-cell>cell 2-1</nve-grid-cell><nve-grid-cell>cell 2-2</nve-grid-cell><nve-grid-cell>cell 2-3</nve-grid-cell><nve-grid-cell>cell 2-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 3-0</nve-grid-cell><nve-grid-cell>cell 3-1</nve-grid-cell><nve-grid-cell>cell 3-2</nve-grid-cell><nve-grid-cell>cell 3-3</nve-grid-cell><nve-grid-cell>cell 3-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 4-0</nve-grid-cell><nve-grid-cell>cell 4-1</nve-grid-cell><nve-grid-cell>cell 4-2</nve-grid-cell><nve-grid-cell>cell 4-3</nve-grid-cell><nve-grid-cell>cell 4-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 5-0</nve-grid-cell><nve-grid-cell>cell 5-1</nve-grid-cell><nve-grid-cell>cell 5-2</nve-grid-cell><nve-grid-cell>cell 5-3</nve-grid-cell><nve-grid-cell>cell 5-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 6-0</nve-grid-cell><nve-grid-cell>cell 6-1</nve-grid-cell><nve-grid-cell>cell 6-2</nve-grid-cell><nve-grid-cell>cell 6-3</nve-grid-cell><nve-grid-cell>cell 6-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 7-0</nve-grid-cell><nve-grid-cell>cell 7-1</nve-grid-cell><nve-grid-cell>cell 7-2</nve-grid-cell><nve-grid-cell>cell 7-3</nve-grid-cell><nve-grid-cell>cell 7-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 8-0</nve-grid-cell><nve-grid-cell>cell 8-1</nve-grid-cell><nve-grid-cell>cell 8-2</nve-grid-cell><nve-grid-cell>cell 8-3</nve-grid-cell><nve-grid-cell>cell 8-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 9-0</nve-grid-cell><nve-grid-cell>cell 9-1</nve-grid-cell><nve-grid-cell>cell 9-2</nve-grid-cell><nve-grid-cell>cell 9-3</nve-grid-cell><nve-grid-cell>cell 9-4</nve-grid-cell>\n  </nve-grid-row>\n</nve-grid>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/grid/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | `nve-grid-header`, `nve-grid-row`, and `nve-grid-placeholder` elements. |\n| footer | `string` | slot for grid-footer or toolbar |\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| container | `'flat' \\| 'full' \\| undefined` | Determines the container styles of component. Flat nests the grid within other containers. Full spans the full edge-to-edge viewport width. |\n| stripe | `boolean` | Determine style variant stripe rows |\n| scrollTo |  | Scroll to a specific position in the grid. |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\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| --box-shadow | `string` | [MDN](https://mdn.dev/CSS/box-shadow) |\n| --font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |\n| --row-height | `string` | fixed height of each row |\n| --scroll-height | `string` | height of the scrollable area |"
           }
         }
       ],
@@ -36415,13 +36415,13 @@
             "themes": true,
             "aria": "https://www.w3.org/WAI/ARIA/apg/patterns/listbox/",
             "entrypoint": "@nvidia-elements/core/preferences-input",
-            "example": "<nve-preferences-input\n  name=\"theme\"\n  value='{ \"color-scheme\": \"dark\", \"scale\": \"compact\", \"reduced-motion\": \"true\" }'\n></nve-preferences-input>",
+            "example": "<nve-preferences-input name=\"theme\" value='{ \"color-scheme\": \"dark\", \"scale\": \"compact\", \"reduced-motion\": \"true\" }'></nve-preferences-input>",
             "package": true,
             "documentation": "https://nvidia.github.io/elements/docs/elements/preferences-input/",
             "since": "1.23.7",
             "status": "stable",
             "behavior": "form",
-            "markdown": "## nve-preferences-input\n\nA preferences input is a widget for controlling apperance. Stylesheets register to the preferences input by including a css-property, see Standard for an example.\n\n### Example\n\n```html\n<nve-preferences-input\n  name=\"theme\"\n  value='{ \"color-scheme\": \"dark\", \"scale\": \"compact\", \"reduced-motion\": \"true\" }'\n></nve-preferences-input>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/preferences-input/define.js';\n```\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| i18n |  | Enables updating internal string values for internationalization. |\n| value | property: `PreferencesInputValue`; attribute: `string` | Contains the current color scheme, scale, and reduced motion preferences. Assign an object through JavaScript or provide its JSON serialization in the HTML `value` attribute. |\n| defaultValue | `string` | The initial value used when the parent form resets. |\n| readOnly (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| 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| required | `boolean` | Requires a value before the parent form can submit. https://mdn.dev/HTML/Attributes/required |\n| pattern | `string` | Defines the pattern that text values must match. https://mdn.dev/HTML/Attributes/pattern |\n| min | `number \\| null` | Defines the minimum numeric value. https://mdn.dev/HTML/Attributes/min |\n| max | `number \\| null` | Defines the maximum numeric value. https://mdn.dev/HTML/Attributes/max |\n| step | `number \\| null` | Defines the value granularity for numeric inputs. https://mdn.dev/HTML/Attributes/step |\n| minLength (minlength) | `number` | Defines the minimum text length. https://mdn.dev/HTML/Attributes/minlength |\n| maxLength (maxlength) | `number` | Defines the maximum text length. https://mdn.dev/HTML/Attributes/maxlength |\n| name | `string` | The name submitted with the control value as part of the form data. https://mdn.dev/HTML/Attributes/name |\n| noValidate (novalidate) | `boolean` | Disables constraint validation for this control. https://mdn.dev/HTML/Attributes/novalidate |\n| form | `HTMLFormElement \\| null` | The form associated with the control. https://mdn.dev/ElementInternals/form |\n| willValidate | `boolean` | Indicates whether the control participates in constraint validation. https://mdn.dev/ElementInternals/willValidate |\n| validity | `ValidityState` | The control validity state. https://mdn.dev/ElementInternals/validity |\n| validationMessage | `string` | The validation message shown when the control is invalid. https://mdn.dev/ElementInternals/validationMessage |\n| valueAsString | `string` | The current value serialized as a string. |\n| valueAsNumber | `number` | The current value parsed as a number. |\n| type | `string` | The control type. |\n| labels | `NodeList` | Labels associated with the control. https://mdn.dev/ElementInternals/labels |\n| composedLabel | `string` | Text content from labels associated with the control. |\n| reportValidity | `() => boolean` | Reports whether the control satisfies its constraints. https://mdn.dev/HTMLInputElement/reportValidity |\n| checkValidity | `() => boolean` | Checks whether the control satisfies its constraints. https://mdn.dev/HTMLInputElement/checkValidity |\n| setCustomValidity | `(message: string) => void` | Sets a custom validation message. https://mdn.dev/HTMLInputElement/setCustomValidity |\n| reset | `() => void` | Resets the control value to its initial value. |\n\n### Events\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| input | `CustomEvent` | Dispatched when the value has changed |\n| change | `CustomEvent` | Dispatched when the value has changed |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --width | `string` | [MDN](https://mdn.dev/CSS/width) |"
+            "markdown": "## nve-preferences-input\n\nA preferences input is a widget for controlling apperance. Stylesheets register to the preferences input by including a css-property, see Standard for an example.\n\n### Example\n\n```html\n<nve-preferences-input name=\"theme\" value='{ \"color-scheme\": \"dark\", \"scale\": \"compact\", \"reduced-motion\": \"true\" }'></nve-preferences-input>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/preferences-input/define.js';\n```\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| i18n |  | Enables updating internal string values for internationalization. |\n| value | property: `PreferencesInputValue`; attribute: `string` | Contains the current color scheme, scale, and reduced motion preferences. Assign an object through JavaScript or provide its JSON serialization in the HTML `value` attribute. |\n| defaultValue | `string` | The initial value used when the parent form resets. |\n| readOnly (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| 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| required | `boolean` | Requires a value before the parent form can submit. https://mdn.dev/HTML/Attributes/required |\n| pattern | `string` | Defines the pattern that text values must match. https://mdn.dev/HTML/Attributes/pattern |\n| min | `number \\| null` | Defines the minimum numeric value. https://mdn.dev/HTML/Attributes/min |\n| max | `number \\| null` | Defines the maximum numeric value. https://mdn.dev/HTML/Attributes/max |\n| step | `number \\| null` | Defines the value granularity for numeric inputs. https://mdn.dev/HTML/Attributes/step |\n| minLength (minlength) | `number` | Defines the minimum text length. https://mdn.dev/HTML/Attributes/minlength |\n| maxLength (maxlength) | `number` | Defines the maximum text length. https://mdn.dev/HTML/Attributes/maxlength |\n| name | `string` | The name submitted with the control value as part of the form data. https://mdn.dev/HTML/Attributes/name |\n| noValidate (novalidate) | `boolean` | Disables constraint validation for this control. https://mdn.dev/HTML/Attributes/novalidate |\n| form | `HTMLFormElement \\| null` | The form associated with the control. https://mdn.dev/ElementInternals/form |\n| willValidate | `boolean` | Indicates whether the control participates in constraint validation. https://mdn.dev/ElementInternals/willValidate |\n| validity | `ValidityState` | The control validity state. https://mdn.dev/ElementInternals/validity |\n| validationMessage | `string` | The validation message shown when the control is invalid. https://mdn.dev/ElementInternals/validationMessage |\n| valueAsString | `string` | The current value serialized as a string. |\n| valueAsNumber | `number` | The current value parsed as a number. |\n| type | `string` | The control type. |\n| labels | `NodeList` | Labels associated with the control. https://mdn.dev/ElementInternals/labels |\n| composedLabel | `string` | Text content from labels associated with the control. |\n| reportValidity | `() => boolean` | Reports whether the control satisfies its constraints. https://mdn.dev/HTMLInputElement/reportValidity |\n| checkValidity | `() => boolean` | Checks whether the control satisfies its constraints. https://mdn.dev/HTMLInputElement/checkValidity |\n| setCustomValidity | `(message: string) => void` | Sets a custom validation message. https://mdn.dev/HTMLInputElement/setCustomValidity |\n| reset | `() => void` | Resets the control value to its initial value. |\n\n### Events\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| input | `CustomEvent` | Dispatched when the value has changed |\n| change | `CustomEvent` | Dispatched when the value has changed |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --width | `string` | [MDN](https://mdn.dev/CSS/width) |"
           }
         }
       ],
@@ -47539,6 +47539,32 @@
               "description": "[MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/height)"
             }
           ],
+          "slots": [
+            {
+              "description": "Content to display before the textarea.",
+              "name": "prefix"
+            },
+            {
+              "description": "Content to display after the textarea.",
+              "name": "suffix"
+            },
+            {
+              "description": "Control input element",
+              "name": "",
+              "inheritedFrom": {
+                "name": "Control",
+                "module": "/src/forms/control/control.js"
+              }
+            },
+            {
+              "description": "Label element",
+              "name": "label",
+              "inheritedFrom": {
+                "name": "Control",
+                "module": "/src/forms/control/control.js"
+              }
+            }
+          ],
           "members": [
             {
               "kind": "field",
@@ -47750,26 +47776,8 @@
             "since": "0.3.0",
             "status": "stable",
             "behavior": "form",
-            "markdown": "## nve-textarea\n\nA textarea is a control that enables users to enter and edit text.\n\n### Example\n\n```html\n<nve-textarea>\n  <label>label</label>\n  <textarea></textarea>\n  <nve-control-message>message</nve-control-message>\n</nve-textarea>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/textarea/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | Control input element |\n| label | `string` | Label element |\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| status | `'warning' \\| 'error' \\| 'success' \\| 'disabled'` | Set current visual state for control. This overrides any validation states active. |\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 internal string values to update for internationalization. |\n| prominence | `'muted'` | Set the visual prominence of the control |\n| reset |  | Resets control value to initial attribute value and clears any active validation rules. |\n\n### Events\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| reset | `CustomEvent` |  |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\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| --width | `string` | [MDN](https://mdn.dev/CSS/width) |\n| --min-height | `string` | [MDN](https://mdn.dev/CSS/min-height) |\n| --background | `string` | [MDN](https://mdn.dev/CSS/background) |\n| --border-radius | `string` | [MDN](https://mdn.dev/CSS/border-radius) |\n| --cursor | `string` | [MDN](https://mdn.dev/CSS/cursor) |\n| --border | `string` | [MDN](https://mdn.dev/CSS/border) |\n| --color | `string` | [MDN](https://mdn.dev/CSS/color) |\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) |"
+            "markdown": "## nve-textarea\n\nA textarea is a control that enables users to enter and edit text.\n\n### Example\n\n```html\n<nve-textarea>\n  <label>label</label>\n  <textarea></textarea>\n  <nve-control-message>message</nve-control-message>\n</nve-textarea>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/textarea/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| prefix | `string` | Content to display before the textarea. |\n| suffix | `string` | Content to display after the textarea. |\n| (default) | `string` | Control input element |\n| label | `string` | Label element |\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| status | `'warning' \\| 'error' \\| 'success' \\| 'disabled'` | Set current visual state for control. This overrides any validation states active. |\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 internal string values to update for internationalization. |\n| prominence | `'muted'` | Set the visual prominence of the control |\n| reset |  | Resets control value to initial attribute value and clears any active validation rules. |\n\n### Events\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| reset | `CustomEvent` |  |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\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| --width | `string` | [MDN](https://mdn.dev/CSS/width) |\n| --min-height | `string` | [MDN](https://mdn.dev/CSS/min-height) |\n| --background | `string` | [MDN](https://mdn.dev/CSS/background) |\n| --border-radius | `string` | [MDN](https://mdn.dev/CSS/border-radius) |\n| --cursor | `string` | [MDN](https://mdn.dev/CSS/cursor) |\n| --border | `string` | [MDN](https://mdn.dev/CSS/border) |\n| --color | `string` | [MDN](https://mdn.dev/CSS/color) |\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) |"
           },
-          "slots": [
-            {
-              "description": "Control input element",
-              "name": "",
-              "inheritedFrom": {
-                "name": "Control",
-                "module": "/src/forms/control/control.js"
-              }
-            },
-            {
-              "description": "Label element",
-              "name": "label",
-              "inheritedFrom": {
-                "name": "Control",
-                "module": "/src/forms/control/control.js"
-              }
-            }
-          ],
           "attributes": [
             {
               "name": "status",

package/dist/data.html.json

@@ -5276,7 +5276,7 @@
     },
     {
       "name": "nve-textarea",
-      "description": "A textarea is a control that enables users to enter and edit text.\n---\n\n\n### **Events:**\n - **reset**\n\n### **Methods:**\n - **reset()** - Resets control value to initial attribute value and clears any active validation rules.\n\n### **Slots:**\n - _default_ - Control input element\n- **label** - Label element\n\n### **CSS Properties:**\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- **--width** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/width) _(default: undefined)_\n- **--min-height** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/min-height) _(default: undefined)_\n- **--background** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/background) _(default: undefined)_\n- **--border-radius** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius) _(default: undefined)_\n- **--cursor** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/cursor) _(default: undefined)_\n- **--border** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border) _(default: undefined)_\n- **--color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color) _(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)_",
+      "description": "A textarea is a control that enables users to enter and edit text.\n---\n\n\n### **Events:**\n - **reset**\n\n### **Methods:**\n - **reset()** - Resets control value to initial attribute value and clears any active validation rules.\n\n### **Slots:**\n - **prefix** - Content to display before the textarea.\n- **suffix** - Content to display after the textarea.\n- _default_ - Control input element\n- **label** - Label element\n\n### **CSS Properties:**\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- **--width** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/width) _(default: undefined)_\n- **--min-height** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/min-height) _(default: undefined)_\n- **--background** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/background) _(default: undefined)_\n- **--border-radius** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius) _(default: undefined)_\n- **--cursor** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/cursor) _(default: undefined)_\n- **--border** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border) _(default: undefined)_\n- **--color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color) _(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)_",
       "attributes": [
         {
           "name": "status",

package/dist/date/date2.js

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

package/dist/datetime/datetime2.js

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

package/dist/dialog/dialog-footer2.js

@@ -11,7 +11,7 @@ var o = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-dialog-footer",
-			version: "2.8.0",
+			version: "2.8.1",
 			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: "2.8.0",
+			version: "2.8.1",
 			parents: ["nve-dialog"]
 		};
 	}

package/dist/dialog/dialog.examples.json

@@ -87,7 +87,7 @@
     {
       "id": "dialog-text-wrap",
       "name": "TextWrap",
-      "template": "<nve-dialog closable>\n  <h3 nve-text=\"heading\">Text Wrap</h3>\n  <p nve-text=\"body\">\n    Some text wrapped content in a small dialog. Some text wrapped content in a small dialog. Some text wrapped content\n    in a small dialog. Some text wrapped content in a small dialog. Some text wrapped content in a small dialog. Some\n    text wrapped content in a small dialog. Some text wrapped content in a small dialog. Some text wrapped content in a\n    small dialog. Some text wrapped content in a small dialog. Some text wrapped content in a small dialog. Some text\n    wrapped content in a small dialog. Some text wrapped content in a small dialog.\n  </p>\n</nve-dialog>\n",
+      "template": "<nve-dialog closable>\n  <h3 nve-text=\"heading\">Text Wrap</h3>\n  <p nve-text=\"body\">\n    Some text wrapped content in a small dialog. Some text wrapped content in a small dialog. Some text wrapped content in a small dialog. Some text wrapped content in a small dialog. Some text wrapped content in a small\n    dialog. Some text wrapped content in a small dialog. Some text wrapped content in a small dialog. Some text wrapped content in a small dialog. Some text wrapped content in a small dialog. Some text wrapped content in\n    a small dialog. Some text wrapped content in a small dialog. Some text wrapped content in a small dialog.\n  </p>\n</nve-dialog>\n",
       "summary": "Dialog with text wrapping behavior, where content adapts to dialog constraints and maintains readability in limited space.",
       "description": "",
       "composition": false,
@@ -131,7 +131,7 @@
     {
       "id": "dialog-legacy-trigger",
       "name": "LegacyTrigger",
-      "template": "<nve-button id=\"dialog-btn\">open</nve-button>\n<nve-dialog trigger=\"dialog-btn\" closable modal hidden>\n  <h3 nve-text=\"heading\">Title</h3>\n  <p nve-text=\"body\">some text content in a closable dialog</p>\n  <nve-accordion behavior-expand>\n    <nve-accordion-header>\n      <h2 nve-text=\"heading xs medium\" slot=\"prefix\">Heading</h2>\n    </nve-accordion-header>\n    <nve-accordion-content\n      >Adjust workspace preferences including theme, notification settings, and default project configurations to\n      customize your experience.</nve-accordion-content\n    >\n  </nve-accordion>\n</nve-dialog>\n<script type=\"module\">\n  const dialog = document.querySelector(\"nve-dialog\");\n  dialog.addEventListener(\"open\", (e) => {\n    console.log(e);\n    dialog.hidden = false;\n  });\n  dialog.addEventListener(\"close\", (e) => {\n    console.log(e);\n    dialog.hidden = true;\n  });\n</script>\n",
+      "template": "<nve-button id=\"dialog-btn\">open</nve-button>\n<nve-dialog trigger=\"dialog-btn\" closable modal hidden>\n  <h3 nve-text=\"heading\">Title</h3>\n  <p nve-text=\"body\">some text content in a closable dialog</p>\n  <nve-accordion behavior-expand>\n    <nve-accordion-header>\n      <h2 nve-text=\"heading xs medium\" slot=\"prefix\">Heading</h2>\n    </nve-accordion-header>\n    <nve-accordion-content>Adjust workspace preferences including theme, notification settings, and default project configurations to customize your experience.</nve-accordion-content>\n  </nve-accordion>\n</nve-dialog>\n<script type=\"module\">\n  const dialog = document.querySelector(\"nve-dialog\");\n  dialog.addEventListener(\"open\", (e) => {\n    console.log(e);\n    dialog.hidden = false;\n  });\n  dialog.addEventListener(\"close\", (e) => {\n    console.log(e);\n    dialog.hidden = true;\n  });\n</script>\n",
       "summary": "Legacy trigger mechanism for dialog opening, with backward compatibility and alternative interaction patterns for dialog activation.",
       "description": "",
       "deprecated": true,
@@ -143,7 +143,7 @@
     {
       "id": "dialog-legacy-behavior-trigger",
       "name": "LegacyBehaviorTrigger",
-      "template": "<nve-button id=\"dialog-btn\">open</nve-button>\n<nve-dialog trigger=\"dialog-btn\" behavior-trigger closable modal hidden>\n  <h3 nve-text=\"heading\">Title</h3>\n  <p nve-text=\"body\">some text content in a closable dialog</p>\n  <nve-accordion behavior-expand>\n    <nve-accordion-header>\n      <h2 nve-text=\"heading xs medium\" slot=\"prefix\">Heading</h2>\n    </nve-accordion-header>\n    <nve-accordion-content\n      >Adjust workspace preferences including theme, notification settings, and default project configurations to\n      customize your experience.</nve-accordion-content\n    >\n  </nve-accordion>\n</nve-dialog>\n",
+      "template": "<nve-button id=\"dialog-btn\">open</nve-button>\n<nve-dialog trigger=\"dialog-btn\" behavior-trigger closable modal hidden>\n  <h3 nve-text=\"heading\">Title</h3>\n  <p nve-text=\"body\">some text content in a closable dialog</p>\n  <nve-accordion behavior-expand>\n    <nve-accordion-header>\n      <h2 nve-text=\"heading xs medium\" slot=\"prefix\">Heading</h2>\n    </nve-accordion-header>\n    <nve-accordion-content>Adjust workspace preferences including theme, notification settings, and default project configurations to customize your experience.</nve-accordion-content>\n  </nve-accordion>\n</nve-dialog>\n",
       "summary": "Legacy behavior trigger for dialog management, showing traditional dialog control patterns and event handling for dialog lifecycle.",
       "description": "",
       "deprecated": true,

package/dist/dialog/dialog2.js

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

package/dist/divider/divider.examples.json

@@ -45,7 +45,7 @@
     {
       "id": "divider-rounded",
       "name": "Rounded",
-      "template": "<nve-divider\n  style=\"\n    --size: var(--nve-ref-border-width-xl);\n    --border-radius: var(--nve-ref-border-radius-xs);\n    --color: var(--nve-sys-accent-secondary-background);\n  \"\n></nve-divider>\n",
+      "template": "<nve-divider style=\"--size: var(--nve-ref-border-width-xl); --border-radius: var(--nve-ref-border-radius-xs); --color: var(--nve-sys-accent-secondary-background)\"></nve-divider>\n",
       "summary": "Divider with custom rounded styling, thicker border, and accent color for decorative separation.",
       "description": "",
       "composition": false,

package/dist/divider/divider2.js

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

package/dist/dot/dot2.js

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

package/dist/drawer/drawer-content2.js

@@ -11,7 +11,7 @@ var o = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-drawer-content",
-			version: "2.8.0",
+			version: "2.8.1",
 			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: "2.8.0",
+			version: "2.8.1",
 			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: "2.8.0",
+			version: "2.8.1",
 			parents: ["nve-drawer"]
 		};
 	}

package/dist/drawer/drawer2.js

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

package/dist/dropdown/dropdown-footer2.js

@@ -11,7 +11,7 @@ var o = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-dropdown-footer",
-			version: "2.8.0",
+			version: "2.8.1",
 			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: "2.8.0",
+			version: "2.8.1",
 			parents: ["nve-dropdown"]
 		};
 	}

package/dist/dropdown/dropdown2.js

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

package/dist/dropdown-group/dropdown-group.examples.json

@@ -5,7 +5,7 @@
     {
       "id": "dropdown-group",
       "name": "Default",
-      "template": "<nve-button popovertarget=\"menu-1\">menu</nve-button>\n<nve-dropdown-group>\n  <nve-dropdown id=\"menu-1\">\n    <nve-menu>\n      <nve-menu-item popovertarget=\"menu-2\">\n        item 1-1 <nve-icon name=\"caret\" direction=\"right\" size=\"sm\" slot=\"suffix\"></nve-icon>\n      </nve-menu-item>\n      <nve-menu-item>item 1-2</nve-menu-item>\n      <nve-menu-item>item 1-3</nve-menu-item>\n    </nve-menu>\n  </nve-dropdown>\n  <nve-dropdown id=\"menu-2\" position=\"right\">\n    <nve-menu>\n      <nve-menu-item>item 2-1</nve-menu-item>\n      <nve-menu-item popovertarget=\"menu-3\">\n        item 2-2 <nve-icon name=\"caret\" direction=\"right\" size=\"sm\" slot=\"suffix\"></nve-icon>\n      </nve-menu-item>\n      <nve-menu-item>item 2-3</nve-menu-item>\n    </nve-menu>\n  </nve-dropdown>\n  <nve-dropdown id=\"menu-3\" position=\"right\">\n    <nve-menu>\n      <nve-menu-item>item 3-1</nve-menu-item>\n      <nve-menu-item>item 3-2</nve-menu-item>\n      <nve-menu-item>item 3-3</nve-menu-item>\n    </nve-menu>\n  </nve-dropdown>\n</nve-dropdown-group>\n",
+      "template": "<nve-button popovertarget=\"menu-1\">menu</nve-button>\n<nve-dropdown-group>\n  <nve-dropdown id=\"menu-1\">\n    <nve-menu>\n      <nve-menu-item popovertarget=\"menu-2\"> item 1-1 <nve-icon name=\"caret\" direction=\"right\" size=\"sm\" slot=\"suffix\"></nve-icon> </nve-menu-item>\n      <nve-menu-item>item 1-2</nve-menu-item>\n      <nve-menu-item>item 1-3</nve-menu-item>\n    </nve-menu>\n  </nve-dropdown>\n  <nve-dropdown id=\"menu-2\" position=\"right\">\n    <nve-menu>\n      <nve-menu-item>item 2-1</nve-menu-item>\n      <nve-menu-item popovertarget=\"menu-3\"> item 2-2 <nve-icon name=\"caret\" direction=\"right\" size=\"sm\" slot=\"suffix\"></nve-icon> </nve-menu-item>\n      <nve-menu-item>item 2-3</nve-menu-item>\n    </nve-menu>\n  </nve-dropdown>\n  <nve-dropdown id=\"menu-3\" position=\"right\">\n    <nve-menu>\n      <nve-menu-item>item 3-1</nve-menu-item>\n      <nve-menu-item>item 3-2</nve-menu-item>\n      <nve-menu-item>item 3-3</nve-menu-item>\n    </nve-menu>\n  </nve-dropdown>\n</nve-dropdown-group>\n",
       "summary": "Cascading dropdown menu group with nested submenus for hierarchical navigation.",
       "description": "",
       "composition": true,
@@ -14,7 +14,7 @@
     {
       "id": "dropdown-group-with-disabled-items",
       "name": "WithDisabledItems",
-      "template": "<nve-button popovertarget=\"disabled-menu-1\">Disabled Items</nve-button>\n<nve-dropdown-group>\n  <nve-dropdown id=\"disabled-menu-1\">\n    <nve-menu>\n      <nve-menu-item popovertarget=\"disabled-menu-2\">\n        item 1-1 <nve-icon name=\"caret\" direction=\"right\" size=\"sm\" slot=\"suffix\"></nve-icon>\n      </nve-menu-item>\n      <nve-menu-item disabled>item 1-2</nve-menu-item>\n      <nve-menu-item>item 1-3</nve-menu-item>\n    </nve-menu>\n  </nve-dropdown>\n  <nve-dropdown id=\"disabled-menu-2\" position=\"right\">\n    <nve-menu>\n      <nve-menu-item>item 2-1</nve-menu-item>\n      <nve-menu-item disabled>item 2-2</nve-menu-item>\n      <nve-menu-item popovertarget=\"disabled-menu-3\">\n        item 2-3 <nve-icon name=\"caret\" direction=\"right\" size=\"sm\" slot=\"suffix\"></nve-icon>\n      </nve-menu-item>\n    </nve-menu>\n  </nve-dropdown>\n  <nve-dropdown id=\"disabled-menu-3\" position=\"right\">\n    <nve-menu>\n      <nve-menu-item>item 3-1</nve-menu-item>\n      <nve-menu-item disabled>item 3-2</nve-menu-item>\n      <nve-menu-item>item 3-3</nve-menu-item>\n    </nve-menu>\n  </nve-dropdown>\n</nve-dropdown-group>\n",
+      "template": "<nve-button popovertarget=\"disabled-menu-1\">Disabled Items</nve-button>\n<nve-dropdown-group>\n  <nve-dropdown id=\"disabled-menu-1\">\n    <nve-menu>\n      <nve-menu-item popovertarget=\"disabled-menu-2\"> item 1-1 <nve-icon name=\"caret\" direction=\"right\" size=\"sm\" slot=\"suffix\"></nve-icon> </nve-menu-item>\n      <nve-menu-item disabled>item 1-2</nve-menu-item>\n      <nve-menu-item>item 1-3</nve-menu-item>\n    </nve-menu>\n  </nve-dropdown>\n  <nve-dropdown id=\"disabled-menu-2\" position=\"right\">\n    <nve-menu>\n      <nve-menu-item>item 2-1</nve-menu-item>\n      <nve-menu-item disabled>item 2-2</nve-menu-item>\n      <nve-menu-item popovertarget=\"disabled-menu-3\"> item 2-3 <nve-icon name=\"caret\" direction=\"right\" size=\"sm\" slot=\"suffix\"></nve-icon> </nve-menu-item>\n    </nve-menu>\n  </nve-dropdown>\n  <nve-dropdown id=\"disabled-menu-3\" position=\"right\">\n    <nve-menu>\n      <nve-menu-item>item 3-1</nve-menu-item>\n      <nve-menu-item disabled>item 3-2</nve-menu-item>\n      <nve-menu-item>item 3-3</nve-menu-item>\n    </nve-menu>\n  </nve-dropdown>\n</nve-dropdown-group>\n",
       "summary": "Cascading dropdown menu with disabled menu items in non-interactive states.",
       "description": "",
       "composition": true,
@@ -23,7 +23,7 @@
     {
       "id": "dropdown-group-with-icons",
       "name": "WithIcons",
-      "template": "<nve-button popovertarget=\"icon-menu-1\">Icons Menu</nve-button>\n<nve-dropdown-group>\n  <nve-dropdown id=\"icon-menu-1\">\n    <nve-menu>\n      <nve-menu-item popovertarget=\"icon-menu-2\">\n        <nve-icon name=\"folder\" size=\"sm\"></nve-icon> item 1-1\n        <nve-icon name=\"caret\" direction=\"right\" size=\"sm\"></nve-icon>\n      </nve-menu-item>\n      <nve-menu-item> <nve-icon name=\"image\" size=\"sm\"></nve-icon> item 1-2 </nve-menu-item>\n      <nve-menu-item> <nve-icon name=\"video-camera\" size=\"sm\"></nve-icon> item 1-3 </nve-menu-item>\n    </nve-menu>\n  </nve-dropdown>\n  <nve-dropdown id=\"icon-menu-2\" position=\"right\">\n    <nve-menu>\n      <nve-menu-item> <nve-icon name=\"document\" size=\"sm\"></nve-icon> item 2-1 </nve-menu-item>\n      <nve-menu-item> <nve-icon name=\"document\" size=\"sm\"></nve-icon> item 2-2 </nve-menu-item>\n      <nve-menu-item popovertarget=\"icon-menu-3\">\n        <nve-icon name=\"terminal\" size=\"sm\"></nve-icon> item 2-3\n        <nve-icon name=\"caret\" direction=\"right\" size=\"sm\"></nve-icon>\n      </nve-menu-item>\n    </nve-menu>\n  </nve-dropdown>\n  <nve-dropdown id=\"icon-menu-3\" position=\"right\">\n    <nve-menu>\n      <nve-menu-item> <nve-icon name=\"terminal\" size=\"sm\"></nve-icon> item 3-1 </nve-menu-item>\n      <nve-menu-item> <nve-icon name=\"terminal\" size=\"sm\"></nve-icon> item 3-2 </nve-menu-item>\n      <nve-menu-item> <nve-icon name=\"terminal\" size=\"sm\"></nve-icon> item 3-3 </nve-menu-item>\n    </nve-menu>\n  </nve-dropdown>\n</nve-dropdown-group>\n",
+      "template": "<nve-button popovertarget=\"icon-menu-1\">Icons Menu</nve-button>\n<nve-dropdown-group>\n  <nve-dropdown id=\"icon-menu-1\">\n    <nve-menu>\n      <nve-menu-item popovertarget=\"icon-menu-2\"> <nve-icon name=\"folder\" size=\"sm\"></nve-icon> item 1-1 <nve-icon name=\"caret\" direction=\"right\" size=\"sm\"></nve-icon> </nve-menu-item>\n      <nve-menu-item> <nve-icon name=\"image\" size=\"sm\"></nve-icon> item 1-2 </nve-menu-item>\n      <nve-menu-item> <nve-icon name=\"video-camera\" size=\"sm\"></nve-icon> item 1-3 </nve-menu-item>\n    </nve-menu>\n  </nve-dropdown>\n  <nve-dropdown id=\"icon-menu-2\" position=\"right\">\n    <nve-menu>\n      <nve-menu-item> <nve-icon name=\"document\" size=\"sm\"></nve-icon> item 2-1 </nve-menu-item>\n      <nve-menu-item> <nve-icon name=\"document\" size=\"sm\"></nve-icon> item 2-2 </nve-menu-item>\n      <nve-menu-item popovertarget=\"icon-menu-3\"> <nve-icon name=\"terminal\" size=\"sm\"></nve-icon> item 2-3 <nve-icon name=\"caret\" direction=\"right\" size=\"sm\"></nve-icon> </nve-menu-item>\n    </nve-menu>\n  </nve-dropdown>\n  <nve-dropdown id=\"icon-menu-3\" position=\"right\">\n    <nve-menu>\n      <nve-menu-item> <nve-icon name=\"terminal\" size=\"sm\"></nve-icon> item 3-1 </nve-menu-item>\n      <nve-menu-item> <nve-icon name=\"terminal\" size=\"sm\"></nve-icon> item 3-2 </nve-menu-item>\n      <nve-menu-item> <nve-icon name=\"terminal\" size=\"sm\"></nve-icon> item 3-3 </nve-menu-item>\n    </nve-menu>\n  </nve-dropdown>\n</nve-dropdown-group>\n",
       "summary": "Cascading dropdown menu with leading icons for visual identification of menu item types.",
       "description": "",
       "composition": true,
@@ -32,7 +32,7 @@
     {
       "id": "dropdown-group-with-more-icons",
       "name": "WithMoreIcons",
-      "template": "<nve-button popovertarget=\"more-icon-menu-1\">More Icons</nve-button>\n<nve-dropdown-group>\n  <nve-dropdown id=\"more-icon-menu-1\">\n    <nve-menu>\n      <nve-menu-item popovertarget=\"more-icon-menu-2\">\n        <nve-icon name=\"person\" size=\"sm\"></nve-icon> item 1-1\n        <nve-icon name=\"caret\" direction=\"right\" size=\"sm\"></nve-icon>\n      </nve-menu-item>\n      <nve-menu-item> <nve-icon name=\"arrow\" direction=\"right\" size=\"sm\"></nve-icon> item 1-2 </nve-menu-item>\n      <nve-menu-item> <nve-icon name=\"star\" size=\"sm\"></nve-icon> item 1-3 </nve-menu-item>\n    </nve-menu>\n  </nve-dropdown>\n  <nve-dropdown id=\"more-icon-menu-2\" position=\"right\">\n    <nve-menu>\n      <nve-menu-item> <nve-icon name=\"flag\" size=\"sm\"></nve-icon> item 2-1 </nve-menu-item>\n      <nve-menu-item> <nve-icon name=\"home\" size=\"sm\"></nve-icon> item 2-2 </nve-menu-item>\n      <nve-menu-item popovertarget=\"more-icon-menu-3\">\n        <nve-icon name=\"gear\" size=\"sm\"></nve-icon> item 2-3\n        <nve-icon name=\"chevron\" direction=\"right\" size=\"sm\"></nve-icon>\n      </nve-menu-item>\n    </nve-menu>\n  </nve-dropdown>\n  <nve-dropdown id=\"more-icon-menu-3\" position=\"right\">\n    <nve-menu>\n      <nve-menu-item> <nve-icon name=\"dot\" size=\"sm\"></nve-icon> item 3-1 </nve-menu-item>\n      <nve-menu-item> <nve-icon name=\"exclamation-mark\" size=\"sm\"></nve-icon> item 3-2 </nve-menu-item>\n      <nve-menu-item> <nve-icon name=\"edit\" size=\"sm\"></nve-icon> item 3-3 </nve-menu-item>\n    </nve-menu>\n  </nve-dropdown>\n</nve-dropdown-group>\n",
+      "template": "<nve-button popovertarget=\"more-icon-menu-1\">More Icons</nve-button>\n<nve-dropdown-group>\n  <nve-dropdown id=\"more-icon-menu-1\">\n    <nve-menu>\n      <nve-menu-item popovertarget=\"more-icon-menu-2\"> <nve-icon name=\"person\" size=\"sm\"></nve-icon> item 1-1 <nve-icon name=\"caret\" direction=\"right\" size=\"sm\"></nve-icon> </nve-menu-item>\n      <nve-menu-item> <nve-icon name=\"arrow\" direction=\"right\" size=\"sm\"></nve-icon> item 1-2 </nve-menu-item>\n      <nve-menu-item> <nve-icon name=\"star\" size=\"sm\"></nve-icon> item 1-3 </nve-menu-item>\n    </nve-menu>\n  </nve-dropdown>\n  <nve-dropdown id=\"more-icon-menu-2\" position=\"right\">\n    <nve-menu>\n      <nve-menu-item> <nve-icon name=\"flag\" size=\"sm\"></nve-icon> item 2-1 </nve-menu-item>\n      <nve-menu-item> <nve-icon name=\"home\" size=\"sm\"></nve-icon> item 2-2 </nve-menu-item>\n      <nve-menu-item popovertarget=\"more-icon-menu-3\"> <nve-icon name=\"gear\" size=\"sm\"></nve-icon> item 2-3 <nve-icon name=\"chevron\" direction=\"right\" size=\"sm\"></nve-icon> </nve-menu-item>\n    </nve-menu>\n  </nve-dropdown>\n  <nve-dropdown id=\"more-icon-menu-3\" position=\"right\">\n    <nve-menu>\n      <nve-menu-item> <nve-icon name=\"dot\" size=\"sm\"></nve-icon> item 3-1 </nve-menu-item>\n      <nve-menu-item> <nve-icon name=\"exclamation-mark\" size=\"sm\"></nve-icon> item 3-2 </nve-menu-item>\n      <nve-menu-item> <nve-icon name=\"edit\" size=\"sm\"></nve-icon> item 3-3 </nve-menu-item>\n    </nve-menu>\n  </nve-dropdown>\n</nve-dropdown-group>\n",
       "summary": "Cascading dropdown menu showcasing extra icon varieties for diverse menu actions.",
       "description": "",
       "composition": true,

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

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

package/dist/dropzone/dropzone.examples.json

@@ -25,7 +25,7 @@
     {
       "id": "dropzone-form",
       "name": "Form",
-      "template": "<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\"\n        >Unsupported file type — this upload only accepts images</nve-control-message\n      >\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  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  form.addEventListener(\"submit\", (e) => {\n    e.preventDefault();\n    const formData = new FormData(e.target);\n    const files = formData.getAll(\"files\");\n    if (form.checkValidity()) {\n      console.log(\"Form submitted successfully!\");\n    } else {\n      console.log(\"Form validation failed\");\n    }\n  });\n</script>\n",
+      "template": "<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  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  form.addEventListener(\"submit\", (e) => {\n    e.preventDefault();\n    const formData = new FormData(e.target);\n    const files = formData.getAll(\"files\");\n    if (form.checkValidity()) {\n      console.log(\"Form submitted successfully!\");\n    } else {\n      console.log(\"Form validation failed\");\n    }\n  });\n</script>\n",
       "summary": "Dropzone integrated with form validation showing file type and size constraint errors.",
       "description": "",
       "composition": true,