@nvidia-elements/core 2.12.0 → 2.12.2

package/dist/custom-elements.json

@@ -23778,6 +23778,14 @@
             "module": "/src/icon/icons.js"
           }
         },
+        {
+          "kind": "js",
+          "name": "IconName",
+          "declaration": {
+            "name": "IconName",
+            "module": "../internal/types/icons.js"
+          }
+        },
         {
           "kind": "js",
           "name": "ICON_NAMES_SOLID",
@@ -24087,13 +24095,13 @@
             "themes": true,
             "aria": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input",
             "entrypoint": "@nvidia-elements/core/input",
-            "example": "<nve-input-group>\n  <label>domain</label>\n  <nve-select style=\"width: 130px\">\n    <select aria-label=\"protocol\">\n      <option>https://</option>\n      <option>http://</option>\n    </select>\n  </nve-select>\n  <nve-input>\n    <input placeholder=\"example\" type=\"url\" aria-label=\"host\" />\n    <nve-button container=\"flat\" readonly>.com</nve-button>\n  </nve-input>\n  <nve-control-message>host: 123456</nve-control-message>\n</nve-input-group>",
+            "example": "<nve-input-group>\n  <label>domain</label>\n  <nve-select style=\"width: 130px\">\n    <select aria-label=\"protocol\">\n      <option>https://</option>\n      <option>http://</option>\n    </select>\n  </nve-select>\n  <nve-input>\n    <input placeholder=\"example\" type=\"url\" aria-label=\"host\" />\n    <nve-button container=\"flat\" readonly=\"\">.com</nve-button>\n  </nve-input>\n  <nve-control-message>host: 123456</nve-control-message>\n</nve-input-group>",
             "package": true,
             "documentation": "https://nvidia.github.io/elements/docs/elements/input-group/",
             "since": "0.3.0",
             "status": "stable",
             "behavior": "form",
-            "markdown": "## nve-input-group\n\nVisually combines many related input controls into a unified composite field with shared styling.\n\n### Example\n\n```html\n<nve-input-group>\n  <label>domain</label>\n  <nve-select style=\"width: 130px\">\n    <select aria-label=\"protocol\">\n      <option>https://</option>\n      <option>http://</option>\n    </select>\n  </nve-select>\n  <nve-input>\n    <input placeholder=\"example\" type=\"url\" aria-label=\"host\" />\n    <nve-button container=\"flat\" readonly>.com</nve-button>\n  </nve-input>\n  <nve-control-message>host: 123456</nve-control-message>\n</nve-input-group>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/input/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | Control input elements |\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| inputs |  | Returns the input elements associated with the control group. |\n| label |  | Returns the label associated with the control group. |\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| prominence | `'muted'` | Set the visual prominence of the control group |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --background | `string` | [MDN](https://mdn.dev/CSS/background) |\n| --border | `string` | [MDN](https://mdn.dev/CSS/border) |\n| --border-radius | `string` | [MDN](https://mdn.dev/CSS/border-radius) |\n| --color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --gap | `string` | [MDN](https://mdn.dev/CSS/gap) |\n| --label-color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --label-font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |\n| --label-font-weight | `string` | [MDN](https://mdn.dev/CSS/font-weight) |\n| --label-text-transform | `string` | [MDN](https://mdn.dev/CSS/text-transform) |\n| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |"
+            "markdown": "## nve-input-group\n\nVisually combines many related input controls into a unified composite field with shared styling.\n\n### Example\n\n```html\n<nve-input-group>\n  <label>domain</label>\n  <nve-select style=\"width: 130px\">\n    <select aria-label=\"protocol\">\n      <option>https://</option>\n      <option>http://</option>\n    </select>\n  </nve-select>\n  <nve-input>\n    <input placeholder=\"example\" type=\"url\" aria-label=\"host\" />\n    <nve-button container=\"flat\" readonly=\"\">.com</nve-button>\n  </nve-input>\n  <nve-control-message>host: 123456</nve-control-message>\n</nve-input-group>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/input/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | Control input elements |\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| inputs |  | Returns the input elements associated with the control group. |\n| label |  | Returns the label associated with the control group. |\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| prominence | `'muted'` | Set the visual prominence of the control group |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --background | `string` | [MDN](https://mdn.dev/CSS/background) |\n| --border | `string` | [MDN](https://mdn.dev/CSS/border) |\n| --border-radius | `string` | [MDN](https://mdn.dev/CSS/border-radius) |\n| --color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --gap | `string` | [MDN](https://mdn.dev/CSS/gap) |\n| --label-color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --label-font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |\n| --label-font-weight | `string` | [MDN](https://mdn.dev/CSS/font-weight) |\n| --label-text-transform | `string` | [MDN](https://mdn.dev/CSS/text-transform) |\n| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |"
           },
           "slots": [
             {
@@ -28036,6 +28044,12 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "/src/internal/types/icons.js",
+      "declarations": [],
+      "exports": []
+    },
     {
       "kind": "javascript-module",
       "path": "/src/internal/types/index.js",
@@ -35123,13 +35137,13 @@
             "themes": true,
             "aria": "https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/",
             "entrypoint": "@nvidia-elements/core/panel",
-            "example": "<section nve-layout=\"row align:space-between pad:sm\">\n  <div nve-theme=\"root\">\n    <nve-panel behavior-expand expanded side=\"left\" style=\"width: 280px; height: 550px\">\n      <nve-panel-header>\n        <div slot=\"title\">Title</div>\n        <div slot=\"subtitle\"></div>\n      </nve-panel-header>\n      <nve-panel-content nve-layout=\"column gap:md\">\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Release</label>\n          <p nve-text=\"label semibold sm\">RainbowBridge/08-18-2021AM/A2A</p>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Date</label>\n          <p nve-text=\"label semibold sm\">2021-08-18</p>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">State</label>\n          <nve-badge status=\"finished\">Indexed</nve-badge>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Driver</label>\n          <p nve-text=\"label semibold sm\">Kenjiro Ono</p>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Copilot</label>\n          <p nve-text=\"label semibold sm\">Kenichi Yoshii</p>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">GVS</label>\n          <a href=\"#\" nve-text=\"link body sm\">http://testbot/testbot/view/content...</a>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Session ID</label>\n          <a href=\"#\" nve-text=\"link body sm\">Experiment 12345</a>\n        </div>\n      </nve-panel-content>\n    </nve-panel>\n  </div>\n</section>",
+            "example": "<section nve-layout=\"row align:space-between pad:sm\">\n  <div nve-theme=\"root\">\n    <nve-panel behavior-expand expanded side=\"left\" style=\"width: 280px; height: 550px\">\n      <nve-panel-header>\n        <div slot=\"title\">Title</div>\n        <div slot=\"subtitle\"></div>\n      </nve-panel-header>\n\n      <nve-panel-content nve-layout=\"column gap:md\">\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Release</label>\n          <p nve-text=\"label semibold sm\">RainbowBridge/08-18-2021AM/A2A</p>\n        </div>\n\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Date</label>\n          <p nve-text=\"label semibold sm\">2021-08-18</p>\n        </div>\n\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">State</label>\n          <nve-badge status=\"finished\">Indexed</nve-badge>\n        </div>\n\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Driver</label>\n          <p nve-text=\"label semibold sm\">Kenjiro Ono</p>\n        </div>\n\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Copilot</label>\n          <p nve-text=\"label semibold sm\">Kenichi Yoshii</p>\n        </div>\n\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">GVS</label>\n          <a href=\"#\" nve-text=\"link body sm\">http://testbot/testbot/view/content...</a>\n        </div>\n\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Session ID</label>\n          <a href=\"#\" nve-text=\"link body sm\">Experiment 12345</a>\n        </div>\n      </nve-panel-content>\n    </nve-panel>\n  </div>\n</section>",
             "package": true,
             "documentation": "https://nvidia.github.io/elements/docs/elements/panel/",
             "since": "0.10.0",
             "status": "stable",
             "behavior": "container",
-            "markdown": "## nve-panel-header\n\nDisplays the title, subtitle, and optional action controls at the top of a panel.\n\n### Example\n\n```html\n<section nve-layout=\"row align:space-between pad:sm\">\n  <div nve-theme=\"root\">\n    <nve-panel behavior-expand expanded side=\"left\" style=\"width: 280px; height: 550px\">\n      <nve-panel-header>\n        <div slot=\"title\">Title</div>\n        <div slot=\"subtitle\"></div>\n      </nve-panel-header>\n      <nve-panel-content nve-layout=\"column gap:md\">\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Release</label>\n          <p nve-text=\"label semibold sm\">RainbowBridge/08-18-2021AM/A2A</p>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Date</label>\n          <p nve-text=\"label semibold sm\">2021-08-18</p>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">State</label>\n          <nve-badge status=\"finished\">Indexed</nve-badge>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Driver</label>\n          <p nve-text=\"label semibold sm\">Kenjiro Ono</p>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Copilot</label>\n          <p nve-text=\"label semibold sm\">Kenichi Yoshii</p>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">GVS</label>\n          <a href=\"#\" nve-text=\"link body sm\">http://testbot/testbot/view/content...</a>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Session ID</label>\n          <a href=\"#\" nve-text=\"link body sm\">Experiment 12345</a>\n        </div>\n      </nve-panel-content>\n    </nve-panel>\n  </div>\n</section>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/panel/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | default content slot |\n| action-icon | `string` | Extra Action Button |\n| subtitle | `string` | Subtitle Text |\n| title | `string` | Title Text |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --border-bottom | `string` | [MDN](https://mdn.dev/CSS/border-bottom) |\n| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |"
+            "markdown": "## nve-panel-header\n\nDisplays the title, subtitle, and optional action controls at the top of a panel.\n\n### Example\n\n```html\n<section nve-layout=\"row align:space-between pad:sm\">\n  <div nve-theme=\"root\">\n    <nve-panel behavior-expand expanded side=\"left\" style=\"width: 280px; height: 550px\">\n      <nve-panel-header>\n        <div slot=\"title\">Title</div>\n        <div slot=\"subtitle\"></div>\n      </nve-panel-header>\n\n      <nve-panel-content nve-layout=\"column gap:md\">\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Release</label>\n          <p nve-text=\"label semibold sm\">RainbowBridge/08-18-2021AM/A2A</p>\n        </div>\n\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Date</label>\n          <p nve-text=\"label semibold sm\">2021-08-18</p>\n        </div>\n\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">State</label>\n          <nve-badge status=\"finished\">Indexed</nve-badge>\n        </div>\n\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Driver</label>\n          <p nve-text=\"label semibold sm\">Kenjiro Ono</p>\n        </div>\n\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Copilot</label>\n          <p nve-text=\"label semibold sm\">Kenichi Yoshii</p>\n        </div>\n\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">GVS</label>\n          <a href=\"#\" nve-text=\"link body sm\">http://testbot/testbot/view/content...</a>\n        </div>\n\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Session ID</label>\n          <a href=\"#\" nve-text=\"link body sm\">Experiment 12345</a>\n        </div>\n      </nve-panel-content>\n    </nve-panel>\n  </div>\n</section>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/panel/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | default content slot |\n| action-icon | `string` | Extra Action Button |\n| subtitle | `string` | Subtitle Text |\n| title | `string` | Title Text |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --border-bottom | `string` | [MDN](https://mdn.dev/CSS/border-bottom) |\n| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |"
           }
         },
         {
@@ -35166,13 +35180,13 @@
             "themes": true,
             "aria": "https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/",
             "entrypoint": "@nvidia-elements/core/panel",
-            "example": "<section nve-layout=\"row align:space-between pad:sm\">\n  <div nve-theme=\"root\">\n    <nve-panel behavior-expand expanded side=\"left\" style=\"width: 280px; height: 550px\">\n      <nve-panel-header>\n        <div slot=\"title\">Title</div>\n        <div slot=\"subtitle\"></div>\n      </nve-panel-header>\n      <nve-panel-content nve-layout=\"column gap:md\">\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Release</label>\n          <p nve-text=\"label semibold sm\">RainbowBridge/08-18-2021AM/A2A</p>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Date</label>\n          <p nve-text=\"label semibold sm\">2021-08-18</p>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">State</label>\n          <nve-badge status=\"finished\">Indexed</nve-badge>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Driver</label>\n          <p nve-text=\"label semibold sm\">Kenjiro Ono</p>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Copilot</label>\n          <p nve-text=\"label semibold sm\">Kenichi Yoshii</p>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">GVS</label>\n          <a href=\"#\" nve-text=\"link body sm\">http://testbot/testbot/view/content...</a>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Session ID</label>\n          <a href=\"#\" nve-text=\"link body sm\">Experiment 12345</a>\n        </div>\n      </nve-panel-content>\n    </nve-panel>\n  </div>\n</section>",
+            "example": "<section nve-layout=\"row align:space-between pad:sm\">\n  <div nve-theme=\"root\">\n    <nve-panel behavior-expand expanded side=\"left\" style=\"width: 280px; height: 550px\">\n      <nve-panel-header>\n        <div slot=\"title\">Title</div>\n        <div slot=\"subtitle\"></div>\n      </nve-panel-header>\n\n      <nve-panel-content nve-layout=\"column gap:md\">\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Release</label>\n          <p nve-text=\"label semibold sm\">RainbowBridge/08-18-2021AM/A2A</p>\n        </div>\n\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Date</label>\n          <p nve-text=\"label semibold sm\">2021-08-18</p>\n        </div>\n\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">State</label>\n          <nve-badge status=\"finished\">Indexed</nve-badge>\n        </div>\n\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Driver</label>\n          <p nve-text=\"label semibold sm\">Kenjiro Ono</p>\n        </div>\n\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Copilot</label>\n          <p nve-text=\"label semibold sm\">Kenichi Yoshii</p>\n        </div>\n\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">GVS</label>\n          <a href=\"#\" nve-text=\"link body sm\">http://testbot/testbot/view/content...</a>\n        </div>\n\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Session ID</label>\n          <a href=\"#\" nve-text=\"link body sm\">Experiment 12345</a>\n        </div>\n      </nve-panel-content>\n    </nve-panel>\n  </div>\n</section>",
             "package": true,
             "documentation": "https://nvidia.github.io/elements/docs/elements/panel/",
             "since": "0.10.0",
             "status": "stable",
             "behavior": "container",
-            "markdown": "## nve-panel-content\n\nContains the main body content within a panel, providing a structured region for detailed information.\n\n### Example\n\n```html\n<section nve-layout=\"row align:space-between pad:sm\">\n  <div nve-theme=\"root\">\n    <nve-panel behavior-expand expanded side=\"left\" style=\"width: 280px; height: 550px\">\n      <nve-panel-header>\n        <div slot=\"title\">Title</div>\n        <div slot=\"subtitle\"></div>\n      </nve-panel-header>\n      <nve-panel-content nve-layout=\"column gap:md\">\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Release</label>\n          <p nve-text=\"label semibold sm\">RainbowBridge/08-18-2021AM/A2A</p>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Date</label>\n          <p nve-text=\"label semibold sm\">2021-08-18</p>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">State</label>\n          <nve-badge status=\"finished\">Indexed</nve-badge>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Driver</label>\n          <p nve-text=\"label semibold sm\">Kenjiro Ono</p>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Copilot</label>\n          <p nve-text=\"label semibold sm\">Kenichi Yoshii</p>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">GVS</label>\n          <a href=\"#\" nve-text=\"link body sm\">http://testbot/testbot/view/content...</a>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Session ID</label>\n          <a href=\"#\" nve-text=\"link body sm\">Experiment 12345</a>\n        </div>\n      </nve-panel-content>\n    </nve-panel>\n  </div>\n</section>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/panel/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | This is a default/unnamed slot for panel content |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |"
+            "markdown": "## nve-panel-content\n\nContains the main body content within a panel, providing a structured region for detailed information.\n\n### Example\n\n```html\n<section nve-layout=\"row align:space-between pad:sm\">\n  <div nve-theme=\"root\">\n    <nve-panel behavior-expand expanded side=\"left\" style=\"width: 280px; height: 550px\">\n      <nve-panel-header>\n        <div slot=\"title\">Title</div>\n        <div slot=\"subtitle\"></div>\n      </nve-panel-header>\n\n      <nve-panel-content nve-layout=\"column gap:md\">\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Release</label>\n          <p nve-text=\"label semibold sm\">RainbowBridge/08-18-2021AM/A2A</p>\n        </div>\n\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Date</label>\n          <p nve-text=\"label semibold sm\">2021-08-18</p>\n        </div>\n\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">State</label>\n          <nve-badge status=\"finished\">Indexed</nve-badge>\n        </div>\n\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Driver</label>\n          <p nve-text=\"label semibold sm\">Kenjiro Ono</p>\n        </div>\n\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Copilot</label>\n          <p nve-text=\"label semibold sm\">Kenichi Yoshii</p>\n        </div>\n\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">GVS</label>\n          <a href=\"#\" nve-text=\"link body sm\">http://testbot/testbot/view/content...</a>\n        </div>\n\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Session ID</label>\n          <a href=\"#\" nve-text=\"link body sm\">Experiment 12345</a>\n        </div>\n      </nve-panel-content>\n    </nve-panel>\n  </div>\n</section>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/panel/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | This is a default/unnamed slot for panel content |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |"
           }
         },
         {
@@ -35217,13 +35231,13 @@
             "themes": true,
             "aria": "https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/",
             "entrypoint": "@nvidia-elements/core/panel",
-            "example": "<section nve-layout=\"row align:space-between pad:sm\">\n  <div nve-theme=\"root\">\n    <nve-panel behavior-expand expanded side=\"left\" style=\"width: 280px; height: 550px\">\n      <nve-panel-header>\n        <div slot=\"title\">Title</div>\n        <div slot=\"subtitle\"></div>\n      </nve-panel-header>\n      <nve-panel-content nve-layout=\"column gap:md\">\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Release</label>\n          <p nve-text=\"label semibold sm\">RainbowBridge/08-18-2021AM/A2A</p>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Date</label>\n          <p nve-text=\"label semibold sm\">2021-08-18</p>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">State</label>\n          <nve-badge status=\"finished\">Indexed</nve-badge>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Driver</label>\n          <p nve-text=\"label semibold sm\">Kenjiro Ono</p>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Copilot</label>\n          <p nve-text=\"label semibold sm\">Kenichi Yoshii</p>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">GVS</label>\n          <a href=\"#\" nve-text=\"link body sm\">http://testbot/testbot/view/content...</a>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Session ID</label>\n          <a href=\"#\" nve-text=\"link body sm\">Experiment 12345</a>\n        </div>\n      </nve-panel-content>\n    </nve-panel>\n  </div>\n</section>",
+            "example": "<section nve-layout=\"row align:space-between pad:sm\">\n  <div nve-theme=\"root\">\n    <nve-panel behavior-expand expanded side=\"left\" style=\"width: 280px; height: 550px\">\n      <nve-panel-header>\n        <div slot=\"title\">Title</div>\n        <div slot=\"subtitle\"></div>\n      </nve-panel-header>\n\n      <nve-panel-content nve-layout=\"column gap:md\">\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Release</label>\n          <p nve-text=\"label semibold sm\">RainbowBridge/08-18-2021AM/A2A</p>\n        </div>\n\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Date</label>\n          <p nve-text=\"label semibold sm\">2021-08-18</p>\n        </div>\n\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">State</label>\n          <nve-badge status=\"finished\">Indexed</nve-badge>\n        </div>\n\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Driver</label>\n          <p nve-text=\"label semibold sm\">Kenjiro Ono</p>\n        </div>\n\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Copilot</label>\n          <p nve-text=\"label semibold sm\">Kenichi Yoshii</p>\n        </div>\n\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">GVS</label>\n          <a href=\"#\" nve-text=\"link body sm\">http://testbot/testbot/view/content...</a>\n        </div>\n\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Session ID</label>\n          <a href=\"#\" nve-text=\"link body sm\">Experiment 12345</a>\n        </div>\n      </nve-panel-content>\n    </nve-panel>\n  </div>\n</section>",
             "package": true,
             "documentation": "https://nvidia.github.io/elements/docs/elements/panel/",
             "since": "0.10.0",
             "status": "stable",
             "behavior": "container",
-            "markdown": "## nve-panel-footer\n\nProvides a designated area at the bottom of a panel for actions or supplementary controls.\n\n### Example\n\n```html\n<section nve-layout=\"row align:space-between pad:sm\">\n  <div nve-theme=\"root\">\n    <nve-panel behavior-expand expanded side=\"left\" style=\"width: 280px; height: 550px\">\n      <nve-panel-header>\n        <div slot=\"title\">Title</div>\n        <div slot=\"subtitle\"></div>\n      </nve-panel-header>\n      <nve-panel-content nve-layout=\"column gap:md\">\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Release</label>\n          <p nve-text=\"label semibold sm\">RainbowBridge/08-18-2021AM/A2A</p>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Date</label>\n          <p nve-text=\"label semibold sm\">2021-08-18</p>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">State</label>\n          <nve-badge status=\"finished\">Indexed</nve-badge>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Driver</label>\n          <p nve-text=\"label semibold sm\">Kenjiro Ono</p>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Copilot</label>\n          <p nve-text=\"label semibold sm\">Kenichi Yoshii</p>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">GVS</label>\n          <a href=\"#\" nve-text=\"link body sm\">http://testbot/testbot/view/content...</a>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Session ID</label>\n          <a href=\"#\" nve-text=\"link body sm\">Experiment 12345</a>\n        </div>\n      </nve-panel-content>\n    </nve-panel>\n  </div>\n</section>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/panel/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | This is a default/unnamed slot for panel footer content |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --border-top | `string` | [MDN](https://mdn.dev/CSS/border-top) |\n| --gap | `string` | [MDN](https://mdn.dev/CSS/gap) |\n| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |"
+            "markdown": "## nve-panel-footer\n\nProvides a designated area at the bottom of a panel for actions or supplementary controls.\n\n### Example\n\n```html\n<section nve-layout=\"row align:space-between pad:sm\">\n  <div nve-theme=\"root\">\n    <nve-panel behavior-expand expanded side=\"left\" style=\"width: 280px; height: 550px\">\n      <nve-panel-header>\n        <div slot=\"title\">Title</div>\n        <div slot=\"subtitle\"></div>\n      </nve-panel-header>\n\n      <nve-panel-content nve-layout=\"column gap:md\">\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Release</label>\n          <p nve-text=\"label semibold sm\">RainbowBridge/08-18-2021AM/A2A</p>\n        </div>\n\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Date</label>\n          <p nve-text=\"label semibold sm\">2021-08-18</p>\n        </div>\n\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">State</label>\n          <nve-badge status=\"finished\">Indexed</nve-badge>\n        </div>\n\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Driver</label>\n          <p nve-text=\"label semibold sm\">Kenjiro Ono</p>\n        </div>\n\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Copilot</label>\n          <p nve-text=\"label semibold sm\">Kenichi Yoshii</p>\n        </div>\n\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">GVS</label>\n          <a href=\"#\" nve-text=\"link body sm\">http://testbot/testbot/view/content...</a>\n        </div>\n\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Session ID</label>\n          <a href=\"#\" nve-text=\"link body sm\">Experiment 12345</a>\n        </div>\n      </nve-panel-content>\n    </nve-panel>\n  </div>\n</section>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/panel/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | This is a default/unnamed slot for panel footer content |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --border-top | `string` | [MDN](https://mdn.dev/CSS/border-top) |\n| --gap | `string` | [MDN](https://mdn.dev/CSS/gap) |\n| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |"
           }
         },
         {
@@ -35483,13 +35497,13 @@
             "themes": true,
             "aria": "https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/",
             "entrypoint": "@nvidia-elements/core/panel",
-            "example": "<section nve-layout=\"row align:space-between pad:sm\">\n  <div nve-theme=\"root\">\n    <nve-panel behavior-expand expanded side=\"left\" style=\"width: 280px; height: 550px\">\n      <nve-panel-header>\n        <div slot=\"title\">Title</div>\n        <div slot=\"subtitle\"></div>\n      </nve-panel-header>\n      <nve-panel-content nve-layout=\"column gap:md\">\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Release</label>\n          <p nve-text=\"label semibold sm\">RainbowBridge/08-18-2021AM/A2A</p>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Date</label>\n          <p nve-text=\"label semibold sm\">2021-08-18</p>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">State</label>\n          <nve-badge status=\"finished\">Indexed</nve-badge>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Driver</label>\n          <p nve-text=\"label semibold sm\">Kenjiro Ono</p>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Copilot</label>\n          <p nve-text=\"label semibold sm\">Kenichi Yoshii</p>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">GVS</label>\n          <a href=\"#\" nve-text=\"link body sm\">http://testbot/testbot/view/content...</a>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Session ID</label>\n          <a href=\"#\" nve-text=\"link body sm\">Experiment 12345</a>\n        </div>\n      </nve-panel-content>\n    </nve-panel>\n  </div>\n</section>",
+            "example": "<section nve-layout=\"row align:space-between pad:sm\">\n  <div nve-theme=\"root\">\n    <nve-panel behavior-expand expanded side=\"left\" style=\"width: 280px; height: 550px\">\n      <nve-panel-header>\n        <div slot=\"title\">Title</div>\n        <div slot=\"subtitle\"></div>\n      </nve-panel-header>\n\n      <nve-panel-content nve-layout=\"column gap:md\">\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Release</label>\n          <p nve-text=\"label semibold sm\">RainbowBridge/08-18-2021AM/A2A</p>\n        </div>\n\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Date</label>\n          <p nve-text=\"label semibold sm\">2021-08-18</p>\n        </div>\n\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">State</label>\n          <nve-badge status=\"finished\">Indexed</nve-badge>\n        </div>\n\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Driver</label>\n          <p nve-text=\"label semibold sm\">Kenjiro Ono</p>\n        </div>\n\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Copilot</label>\n          <p nve-text=\"label semibold sm\">Kenichi Yoshii</p>\n        </div>\n\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">GVS</label>\n          <a href=\"#\" nve-text=\"link body sm\">http://testbot/testbot/view/content...</a>\n        </div>\n\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Session ID</label>\n          <a href=\"#\" nve-text=\"link body sm\">Experiment 12345</a>\n        </div>\n      </nve-panel-content>\n    </nve-panel>\n  </div>\n</section>",
             "package": true,
             "documentation": "https://nvidia.github.io/elements/docs/elements/panel/",
             "since": "0.10.0",
             "status": "stable",
             "behavior": "container",
-            "markdown": "## nve-panel\n\nPanel is inline container for content that couples to the content on the page (details, extra actions/options). Or [Drawer](./docs/elements/drawer/) is out of context of the rest of the page (notifications, navigations, settings).\n\n### Example\n\n```html\n<section nve-layout=\"row align:space-between pad:sm\">\n  <div nve-theme=\"root\">\n    <nve-panel behavior-expand expanded side=\"left\" style=\"width: 280px; height: 550px\">\n      <nve-panel-header>\n        <div slot=\"title\">Title</div>\n        <div slot=\"subtitle\"></div>\n      </nve-panel-header>\n      <nve-panel-content nve-layout=\"column gap:md\">\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Release</label>\n          <p nve-text=\"label semibold sm\">RainbowBridge/08-18-2021AM/A2A</p>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Date</label>\n          <p nve-text=\"label semibold sm\">2021-08-18</p>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">State</label>\n          <nve-badge status=\"finished\">Indexed</nve-badge>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Driver</label>\n          <p nve-text=\"label semibold sm\">Kenjiro Ono</p>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Copilot</label>\n          <p nve-text=\"label semibold sm\">Kenichi Yoshii</p>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">GVS</label>\n          <a href=\"#\" nve-text=\"link body sm\">http://testbot/testbot/view/content...</a>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Session ID</label>\n          <a href=\"#\" nve-text=\"link body sm\">Experiment 12345</a>\n        </div>\n      </nve-panel-content>\n    </nve-panel>\n  </div>\n</section>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/panel/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | This is a default/unnamed slot for panel content |\n| content | `string` | content element (Use `panel-content` or custom content) |\n| footer | `string` | footer element (Use `panel-footer` or custom content) |\n| header | `string` | header element (Use `panel-header` or custom content) |\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| behaviorExpand (behavior-expand) | `boolean` | Determines whether the panel should handle auto-closing behavior vs. defaults to off. |\n| closable | `boolean` | Indicates whether the user can dismiss or close the element. - `true` The element displays a close control and the user can dismiss it. - `false` The user cannot close the element and must dismiss it programmatically. |\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| i18n |  | Enables updating internal string values for internationalization. |\n| side | `'left' \\| 'right'` | Sets the proper collapse icon and collapse animation, based on which side of the page the panel occupies. |\n\n### Events\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| close | `CustomEvent` | Dispatched when the panel closes. |\n| open | `CustomEvent` | Dispatched when the panel opens. |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --background | `string` | [MDN](https://mdn.dev/CSS/background) |\n| --box-shadow | `string` | [MDN](https://mdn.dev/CSS/box-shadow) |\n| --color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --panel-button-border-radius | `string` | Border radius of the panel expand/collapse button |"
+            "markdown": "## nve-panel\n\nPanel is inline container for content that couples to the content on the page (details, extra actions/options). Or [Drawer](./docs/elements/drawer/) is out of context of the rest of the page (notifications, navigations, settings).\n\n### Example\n\n```html\n<section nve-layout=\"row align:space-between pad:sm\">\n  <div nve-theme=\"root\">\n    <nve-panel behavior-expand expanded side=\"left\" style=\"width: 280px; height: 550px\">\n      <nve-panel-header>\n        <div slot=\"title\">Title</div>\n        <div slot=\"subtitle\"></div>\n      </nve-panel-header>\n\n      <nve-panel-content nve-layout=\"column gap:md\">\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Release</label>\n          <p nve-text=\"label semibold sm\">RainbowBridge/08-18-2021AM/A2A</p>\n        </div>\n\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Date</label>\n          <p nve-text=\"label semibold sm\">2021-08-18</p>\n        </div>\n\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">State</label>\n          <nve-badge status=\"finished\">Indexed</nve-badge>\n        </div>\n\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Driver</label>\n          <p nve-text=\"label semibold sm\">Kenjiro Ono</p>\n        </div>\n\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Copilot</label>\n          <p nve-text=\"label semibold sm\">Kenichi Yoshii</p>\n        </div>\n\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">GVS</label>\n          <a href=\"#\" nve-text=\"link body sm\">http://testbot/testbot/view/content...</a>\n        </div>\n\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm medium muted\">Session ID</label>\n          <a href=\"#\" nve-text=\"link body sm\">Experiment 12345</a>\n        </div>\n      </nve-panel-content>\n    </nve-panel>\n  </div>\n</section>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/panel/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | This is a default/unnamed slot for panel content |\n| content | `string` | content element (Use `panel-content` or custom content) |\n| footer | `string` | footer element (Use `panel-footer` or custom content) |\n| header | `string` | header element (Use `panel-header` or custom content) |\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| behaviorExpand (behavior-expand) | `boolean` | Determines whether the panel should handle auto-closing behavior vs. defaults to off. |\n| closable | `boolean` | Indicates whether the user can dismiss or close the element. - `true` The element displays a close control and the user can dismiss it. - `false` The user cannot close the element and must dismiss it programmatically. |\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| i18n |  | Enables updating internal string values for internationalization. |\n| side | `'left' \\| 'right'` | Sets the proper collapse icon and collapse animation, based on which side of the page the panel occupies. |\n\n### Events\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| close | `CustomEvent` | Dispatched when the panel closes. |\n| open | `CustomEvent` | Dispatched when the panel opens. |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --background | `string` | [MDN](https://mdn.dev/CSS/background) |\n| --box-shadow | `string` | [MDN](https://mdn.dev/CSS/box-shadow) |\n| --color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --panel-button-border-radius | `string` | Border radius of the panel expand/collapse button |"
           }
         }
       ],
@@ -38370,13 +38384,13 @@
             "themes": true,
             "aria": "https://www.w3.org/WAI/ARIA/apg/patterns/radio/",
             "entrypoint": "@nvidia-elements/core/radio",
-            "example": "<nve-radio-group>\n  <label>label</label>\n  <nve-radio>\n    <label>radio 1</label>\n    <input type=\"radio\" checked />\n  </nve-radio>\n  <nve-radio>\n    <label>radio 2</label>\n    <input type=\"radio\" />\n  </nve-radio>\n  <nve-radio>\n    <label>radio 3</label>\n    <input type=\"radio\" />\n  </nve-radio>\n  <nve-control-message>message</nve-control-message>\n</nve-radio-group>",
+            "example": "<nve-radio-group>\n  <label>label</label>\n  <nve-radio>\n    <label>radio 1</label>\n    <input type=\"radio\" checked />\n  </nve-radio>\n\n  <nve-radio>\n    <label>radio 2</label>\n    <input type=\"radio\" />\n  </nve-radio>\n\n  <nve-radio>\n    <label>radio 3</label>\n    <input type=\"radio\" />\n  </nve-radio>\n  <nve-control-message>message</nve-control-message>\n</nve-radio-group>",
             "package": true,
             "documentation": "https://nvidia.github.io/elements/docs/elements/radio/",
             "since": "0.3.0",
             "status": "stable",
             "behavior": "form",
-            "markdown": "## nve-radio\n\nA radio button is a control that enables users to choose one option from a list of mutually exclusive options.\n\n### Example\n\n```html\n<nve-radio-group>\n  <label>label</label>\n  <nve-radio>\n    <label>radio 1</label>\n    <input type=\"radio\" checked />\n  </nve-radio>\n  <nve-radio>\n    <label>radio 2</label>\n    <input type=\"radio\" />\n  </nve-radio>\n  <nve-radio>\n    <label>radio 3</label>\n    <input type=\"radio\" />\n  </nve-radio>\n  <nve-control-message>message</nve-control-message>\n</nve-radio-group>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/radio/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| i18n |  | Enables internal string values to update for internationalization. |\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| prominence | `'muted'` | Set the visual prominence of the control |\n| status | `'warning' \\| 'error' \\| 'success' \\| 'disabled'` | Set current visual state for control. This overrides any validation states active. |\n\n### Events\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| reset | `CustomEvent` |  |\n\n### Methods\n\n| method | signatures | description |\n| ------ | ---------- | ----------- |\n| reset | `reset(): unknown` | Resets control value to initial attribute value and clears any active validation rules. |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --accent-color | `string` | [MDN](https://mdn.dev/CSS/accent-color) |\n| --background | `string` | [MDN](https://mdn.dev/CSS/background) |\n| --border-color | `string` | [MDN](https://mdn.dev/CSS/border-color) |\n| --border-radius | `string` | [MDN](https://mdn.dev/CSS/border-radius) |\n| --border-width | `string` | [MDN](https://mdn.dev/CSS/border-width) |\n| --color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --control-height | `string` | [MDN](https://mdn.dev/CSS/height) |\n| --control-width | `string` | [MDN](https://mdn.dev/CSS/width) |\n| --cursor | `string` | [MDN](https://mdn.dev/CSS/cursor) |\n| --height | `string` | [MDN](https://mdn.dev/CSS/height) |\n| --label-color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --label-font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |\n| --label-font-weight | `string` | [MDN](https://mdn.dev/CSS/font-weight) |\n| --label-width | `string` | [MDN](https://mdn.dev/CSS/width) |\n| --radio-color | `string` |  |\n| --width | `string` | [MDN](https://mdn.dev/CSS/width) |"
+            "markdown": "## nve-radio\n\nA radio button is a control that enables users to choose one option from a list of mutually exclusive options.\n\n### Example\n\n```html\n<nve-radio-group>\n  <label>label</label>\n  <nve-radio>\n    <label>radio 1</label>\n    <input type=\"radio\" checked />\n  </nve-radio>\n\n  <nve-radio>\n    <label>radio 2</label>\n    <input type=\"radio\" />\n  </nve-radio>\n\n  <nve-radio>\n    <label>radio 3</label>\n    <input type=\"radio\" />\n  </nve-radio>\n  <nve-control-message>message</nve-control-message>\n</nve-radio-group>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/radio/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| i18n |  | Enables internal string values to update for internationalization. |\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| prominence | `'muted'` | Set the visual prominence of the control |\n| status | `'warning' \\| 'error' \\| 'success' \\| 'disabled'` | Set current visual state for control. This overrides any validation states active. |\n\n### Events\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| reset | `CustomEvent` |  |\n\n### Methods\n\n| method | signatures | description |\n| ------ | ---------- | ----------- |\n| reset | `reset(): unknown` | Resets control value to initial attribute value and clears any active validation rules. |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --accent-color | `string` | [MDN](https://mdn.dev/CSS/accent-color) |\n| --background | `string` | [MDN](https://mdn.dev/CSS/background) |\n| --border-color | `string` | [MDN](https://mdn.dev/CSS/border-color) |\n| --border-radius | `string` | [MDN](https://mdn.dev/CSS/border-radius) |\n| --border-width | `string` | [MDN](https://mdn.dev/CSS/border-width) |\n| --color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --control-height | `string` | [MDN](https://mdn.dev/CSS/height) |\n| --control-width | `string` | [MDN](https://mdn.dev/CSS/width) |\n| --cursor | `string` | [MDN](https://mdn.dev/CSS/cursor) |\n| --height | `string` | [MDN](https://mdn.dev/CSS/height) |\n| --label-color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --label-font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |\n| --label-font-weight | `string` | [MDN](https://mdn.dev/CSS/font-weight) |\n| --label-width | `string` | [MDN](https://mdn.dev/CSS/width) |\n| --radio-color | `string` |  |\n| --width | `string` | [MDN](https://mdn.dev/CSS/width) |"
           },
           "slots": [
             {
@@ -54525,13 +54539,13 @@
             "themes": true,
             "aria": "#",
             "entrypoint": "@nvidia-elements/core/viewport",
-            "example": "<nve-viewport autofit fit-inset=\"24\" behavior-pan behavior-zoom style=\"height: 420px\">\n  <nve-viewport-gridlines></nve-viewport-gridlines>\n  <svg role=\"img\" aria-label=\"Three geometric forms in a spatial field\" width=\"900\" height=\"600\" viewBox=\"0 0 900 600\" style=\"position: absolute; left: 0; top: 0\">\n    <circle cx=\"200\" cy=\"400\" r=\"100\" fill=\"var(--nve-ref-color-green-jade-600)\"></circle>\n    <rect x=\"350\" y=\"100\" width=\"200\" height=\"200\" rx=\"50\" fill=\"var(--nve-ref-color-blue-cobalt-600)\"></rect>\n    <path d=\"M 700 290 L 810 400 L 700 510 L 590 400 Z\" fill=\"var(--nve-ref-color-purple-lavender-600)\"></path>\n    <rect x=\"1\" y=\"1\" width=\"898\" height=\"598\" rx=\"24\" fill=\"none\" stroke=\"var(--nve-ref-border-color-emphasis)\" stroke-width=\"2\" stroke-dasharray=\"32 20\" vector-effect=\"non-scaling-stroke\"></rect>\n  </svg>\n  <nve-viewport-minimap></nve-viewport-minimap>\n</nve-viewport>",
+            "example": "<nve-viewport autofit fit-inset=\"24\" behavior-pan behavior-zoom style=\"height: 420px\">\n  <nve-viewport-gridlines></nve-viewport-gridlines>\n\n  <svg role=\"img\" aria-label=\"Three geometric forms in a spatial field\" width=\"900\" height=\"600\" viewBox=\"0 0 900 600\" style=\"position: absolute; left: 0; top: 0\">\n    <circle cx=\"200\" cy=\"400\" r=\"100\" fill=\"var(--nve-ref-color-green-jade-600)\"></circle>\n    <rect x=\"350\" y=\"100\" width=\"200\" height=\"200\" rx=\"50\" fill=\"var(--nve-ref-color-blue-cobalt-600)\"></rect>\n    <path d=\"M 700 290 L 810 400 L 700 510 L 590 400 Z\" fill=\"var(--nve-ref-color-purple-lavender-600)\"></path>\n    <rect x=\"1\" y=\"1\" width=\"898\" height=\"598\" rx=\"24\" fill=\"none\" stroke=\"var(--nve-ref-border-color-emphasis)\" stroke-width=\"2\" stroke-dasharray=\"32 20\" vector-effect=\"non-scaling-stroke\"></rect>\n  </svg>\n\n  <nve-viewport-minimap></nve-viewport-minimap>\n</nve-viewport>",
             "package": true,
             "documentation": "https://nvidia.github.io/elements/docs/elements/viewport/",
             "since": "0.0.0",
             "status": "beta",
             "behavior": "content",
-            "markdown": "## nve-viewport\n\nA viewport provides a spatial surface for arbitrary content, with optional pan and zoom navigation.\n\n### Example\n\n```html\n<nve-viewport autofit fit-inset=\"24\" behavior-pan behavior-zoom style=\"height: 420px\">\n  <nve-viewport-gridlines></nve-viewport-gridlines>\n  <svg role=\"img\" aria-label=\"Three geometric forms in a spatial field\" width=\"900\" height=\"600\" viewBox=\"0 0 900 600\" style=\"position: absolute; left: 0; top: 0\">\n    <circle cx=\"200\" cy=\"400\" r=\"100\" fill=\"var(--nve-ref-color-green-jade-600)\"></circle>\n    <rect x=\"350\" y=\"100\" width=\"200\" height=\"200\" rx=\"50\" fill=\"var(--nve-ref-color-blue-cobalt-600)\"></rect>\n    <path d=\"M 700 290 L 810 400 L 700 510 L 590 400 Z\" fill=\"var(--nve-ref-color-purple-lavender-600)\"></path>\n    <rect x=\"1\" y=\"1\" width=\"898\" height=\"598\" rx=\"24\" fill=\"none\" stroke=\"var(--nve-ref-border-color-emphasis)\" stroke-width=\"2\" stroke-dasharray=\"32 20\" vector-effect=\"non-scaling-stroke\"></rect>\n  </svg>\n  <nve-viewport-minimap></nve-viewport-minimap>\n</nve-viewport>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/viewport/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | Content positioned in the viewport's infinite content space. |\n| background | `string` | Custom content rendered behind viewport content and excluded from content fitting |\n| overlay | `string` | Interactive content fixed above the transformed plane and excluded from content fitting |\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| autoFit | `boolean` | Fits measurable direct default-slot content once after initial layout. |\n| behaviorPan (behavior-pan) | `boolean \\| 'space'` | Enables panning by pointer, focused wheel, focused keyboard, and Invoker commands; requires Space for primary-pointer dragging when set to space. |\n| behaviorZoom (behavior-zoom) | `boolean` | Enables zooming by pinch, focused modified wheel, focused keyboard, and Invoker commands. |\n| dragThreshold (drag-threshold) | `number` | CSS-pixel pointer movement required before a pointer pan begins. |\n| fitInset (fit-inset) | `number` | Default uniform CSS-pixel inset reserved around bounds when fitting content. |\n| maxScale (max-scale) | `number` | Inclusive upper scale limit. |\n| minScale (min-scale) | `number` | Inclusive lower scale limit. |\n| pannable | `boolean` | Whether the viewport may admit new user-input panning. |\n| scale | `number` | Content-to-viewport CSS-pixel scale. |\n| x | `number` | Horizontal content-space coordinate at the viewport origin. |\n| y | `number` | Vertical content-space coordinate at the viewport origin. |\n| zoomable | `boolean` | Whether the viewport may admit new user-input zooming. |\n\n### Events\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| capabilitieschange | `CustomEvent` | Dispatched after effective user-input pan or zoom admission changes. |\n| pan | `CustomEvent` | Dispatched for admitted user pan proposals. Cancel to skip the proposed transform mutation. |\n| panend | `CustomEvent` | Dispatched once when a sustained pan ends, including its terminal reason. |\n| panstart | `CustomEvent` | Dispatched when a sustained pointer or control pan begins. Cancel to suppress the default for its session. |\n| type | `CustomEvent` |  |\n| viewportchange | `CustomEvent` | Dispatched once after a render that commits one or more viewport transform changes. |\n| zoom | `CustomEvent` | Dispatched for admitted user zoom proposals. Cancel to skip the proposed transform mutation. |\n\n### Invoker Commands\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --pan-down | `CommandEvent` | With behavior-pan enabled, pans down by one discrete step. |\n| --pan-left | `CommandEvent` | With behavior-pan enabled, pans left by one discrete step. |\n| --pan-right | `CommandEvent` | With behavior-pan enabled, pans right by one discrete step. |\n| --pan-up | `CommandEvent` | With behavior-pan enabled, pans up by one discrete step. |\n| --zoom-in | `CommandEvent` | With behavior-zoom enabled, animates to the next permitted scale step. |\n| --zoom-out | `CommandEvent` | With behavior-zoom enabled, animates to the previous permitted scale step. |\n| --zoom-reset | `CommandEvent` | With behavior-zoom enabled, animates to 100% scale. |\n| --zoom-to-fit | `CommandEvent` | With behavior-zoom enabled, animates to fit direct default-slot element boxes. |\n\n### Methods\n\n| method | signatures | description |\n| ------ | ---------- | ----------- |\n| animateTo | `animateTo(target: Partial<ViewportTransform>, options?: ViewportAnimationOptions): void` | Animates the viewport to the requested partial transform. |\n| fitContents | `fitContents(options?: ViewportRevealOptions): void` | Fits the union of direct default-slot element boxes within the viewport. |\n| getTransform | `getTransform(): ViewportTransform` | Returns the current content-space origin and CSS-pixel scale. |\n| getVisibleRect | `getVisibleRect(): ViewportRect` | Returns the visible content-space rectangle. |\n| requestPan | `requestPan(proposal: ViewportPanProposal): boolean` | Requests one discrete user-originated pan. When pannable, the viewport dispatches a cancelable `pan` and applies the default transform if no listener cancels the event. Returns true only when that default changes the transform. |\n| requestZoom | `requestZoom(proposal: ViewportZoomProposal, options?: ViewportZoomRequestOptions): boolean` | Requests one discrete user-originated zoom. When zoomable, the viewport dispatches a cancelable `zoom` and applies the default transform if no listener cancels the event. Set `options.animated` to animate the uncanceled default; the option is absent from the `zoom` detail. Returns true when the default changes or schedules a change to the transform. |\n| reveal | `reveal(region: { x: number; y: number; width?: number; height?: number }, options?: ViewportRevealOptions): void` | Centers or fits a content-space region within the viewport. |\n| startPan | `startPan(proposal: ViewportPanProposal): ViewportPanSession \\| undefined` | Starts a sustained semantic pan after the caller crosses its activation threshold. Dispatches `panstart`, performs the initial `pan` update, and returns a session for later updates and one terminal `panend`. Returns undefined when pannable is false. |\n| toContentCoords | `toContentCoords(viewportX: number, viewportY: number): ViewportPoint` | Converts a viewport CSS-pixel point to content space. |\n| toViewportCoords | `toViewportCoords(contentX: number, contentY: number): ViewportPoint` | Converts a content-space point to viewport CSS pixels. |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --background | `string` | Background color of the fixed viewport area. [MDN](https://mdn.dev/CSS/background) |\n| --min-height | `string` | [MDN](https://mdn.dev/CSS/min-height) |\n| --pan-cursor | `string` | Cursor shown over a background eligible for primary-pointer panning. |\n| --panning-cursor | `string` | Cursor shown while a pointer pan is active. |"
+            "markdown": "## nve-viewport\n\nA viewport provides a spatial surface for arbitrary content, with optional pan and zoom navigation.\n\n### Example\n\n```html\n<nve-viewport autofit fit-inset=\"24\" behavior-pan behavior-zoom style=\"height: 420px\">\n  <nve-viewport-gridlines></nve-viewport-gridlines>\n\n  <svg role=\"img\" aria-label=\"Three geometric forms in a spatial field\" width=\"900\" height=\"600\" viewBox=\"0 0 900 600\" style=\"position: absolute; left: 0; top: 0\">\n    <circle cx=\"200\" cy=\"400\" r=\"100\" fill=\"var(--nve-ref-color-green-jade-600)\"></circle>\n    <rect x=\"350\" y=\"100\" width=\"200\" height=\"200\" rx=\"50\" fill=\"var(--nve-ref-color-blue-cobalt-600)\"></rect>\n    <path d=\"M 700 290 L 810 400 L 700 510 L 590 400 Z\" fill=\"var(--nve-ref-color-purple-lavender-600)\"></path>\n    <rect x=\"1\" y=\"1\" width=\"898\" height=\"598\" rx=\"24\" fill=\"none\" stroke=\"var(--nve-ref-border-color-emphasis)\" stroke-width=\"2\" stroke-dasharray=\"32 20\" vector-effect=\"non-scaling-stroke\"></rect>\n  </svg>\n\n  <nve-viewport-minimap></nve-viewport-minimap>\n</nve-viewport>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/viewport/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | Content positioned in the viewport's infinite content space. |\n| background | `string` | Custom content rendered behind viewport content and excluded from content fitting |\n| overlay | `string` | Interactive content fixed above the transformed plane and excluded from content fitting |\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| autoFit | `boolean` | Fits measurable direct default-slot content once after initial layout. |\n| behaviorPan (behavior-pan) | `boolean \\| 'space'` | Enables panning by pointer, focused wheel, focused keyboard, and Invoker commands; requires Space for primary-pointer dragging when set to space. |\n| behaviorZoom (behavior-zoom) | `boolean` | Enables zooming by pinch, focused modified wheel, focused keyboard, and Invoker commands. |\n| dragThreshold (drag-threshold) | `number` | CSS-pixel pointer movement required before a pointer pan begins. |\n| fitInset (fit-inset) | `number` | Default uniform CSS-pixel inset reserved around bounds when fitting content. |\n| maxScale (max-scale) | `number` | Inclusive upper scale limit. |\n| minScale (min-scale) | `number` | Inclusive lower scale limit. |\n| pannable | `boolean` | Whether the viewport may admit new user-input panning. |\n| scale | `number` | Content-to-viewport CSS-pixel scale. |\n| x | `number` | Horizontal content-space coordinate at the viewport origin. |\n| y | `number` | Vertical content-space coordinate at the viewport origin. |\n| zoomable | `boolean` | Whether the viewport may admit new user-input zooming. |\n\n### Events\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| capabilitieschange | `CustomEvent` | Dispatched after effective user-input pan or zoom admission changes. |\n| pan | `CustomEvent` | Dispatched for admitted user pan proposals. Cancel to skip the proposed transform mutation. |\n| panend | `CustomEvent` | Dispatched once when a sustained pan ends, including its terminal reason. |\n| panstart | `CustomEvent` | Dispatched when a sustained pointer or control pan begins. Cancel to suppress the default for its session. |\n| type | `CustomEvent` |  |\n| viewportchange | `CustomEvent` | Dispatched once after a render that commits one or more viewport transform changes. |\n| zoom | `CustomEvent` | Dispatched for admitted user zoom proposals. Cancel to skip the proposed transform mutation. |\n\n### Invoker Commands\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --pan-down | `CommandEvent` | With behavior-pan enabled, pans down by one discrete step. |\n| --pan-left | `CommandEvent` | With behavior-pan enabled, pans left by one discrete step. |\n| --pan-right | `CommandEvent` | With behavior-pan enabled, pans right by one discrete step. |\n| --pan-up | `CommandEvent` | With behavior-pan enabled, pans up by one discrete step. |\n| --zoom-in | `CommandEvent` | With behavior-zoom enabled, animates to the next permitted scale step. |\n| --zoom-out | `CommandEvent` | With behavior-zoom enabled, animates to the previous permitted scale step. |\n| --zoom-reset | `CommandEvent` | With behavior-zoom enabled, animates to 100% scale. |\n| --zoom-to-fit | `CommandEvent` | With behavior-zoom enabled, animates to fit direct default-slot element boxes. |\n\n### Methods\n\n| method | signatures | description |\n| ------ | ---------- | ----------- |\n| animateTo | `animateTo(target: Partial<ViewportTransform>, options?: ViewportAnimationOptions): void` | Animates the viewport to the requested partial transform. |\n| fitContents | `fitContents(options?: ViewportRevealOptions): void` | Fits the union of direct default-slot element boxes within the viewport. |\n| getTransform | `getTransform(): ViewportTransform` | Returns the current content-space origin and CSS-pixel scale. |\n| getVisibleRect | `getVisibleRect(): ViewportRect` | Returns the visible content-space rectangle. |\n| requestPan | `requestPan(proposal: ViewportPanProposal): boolean` | Requests one discrete user-originated pan. When pannable, the viewport dispatches a cancelable `pan` and applies the default transform if no listener cancels the event. Returns true only when that default changes the transform. |\n| requestZoom | `requestZoom(proposal: ViewportZoomProposal, options?: ViewportZoomRequestOptions): boolean` | Requests one discrete user-originated zoom. When zoomable, the viewport dispatches a cancelable `zoom` and applies the default transform if no listener cancels the event. Set `options.animated` to animate the uncanceled default; the option is absent from the `zoom` detail. Returns true when the default changes or schedules a change to the transform. |\n| reveal | `reveal(region: { x: number; y: number; width?: number; height?: number }, options?: ViewportRevealOptions): void` | Centers or fits a content-space region within the viewport. |\n| startPan | `startPan(proposal: ViewportPanProposal): ViewportPanSession \\| undefined` | Starts a sustained semantic pan after the caller crosses its activation threshold. Dispatches `panstart`, performs the initial `pan` update, and returns a session for later updates and one terminal `panend`. Returns undefined when pannable is false. |\n| toContentCoords | `toContentCoords(viewportX: number, viewportY: number): ViewportPoint` | Converts a viewport CSS-pixel point to content space. |\n| toViewportCoords | `toViewportCoords(contentX: number, contentY: number): ViewportPoint` | Converts a content-space point to viewport CSS pixels. |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --background | `string` | Background color of the fixed viewport area. [MDN](https://mdn.dev/CSS/background) |\n| --min-height | `string` | [MDN](https://mdn.dev/CSS/min-height) |\n| --pan-cursor | `string` | Cursor shown over a background eligible for primary-pointer panning. |\n| --panning-cursor | `string` | Cursor shown while a pointer pan is active. |"
           },
           "commands": [
             {

package/dist/data.snippets.json

@@ -71,6 +71,24 @@
     "description": "Basic inline search",
     "body": "<nve-search>\n  <input type=\"search\" aria-label=\"${2:search}\" placeholder=\"${3:search}\">\n</nve-search>\n"
   },
+  "Page Header": {
+    "srcFile": "page-header.snippets.html",
+    "prefix": [
+      "page-header"
+    ],
+    "type": "pattern",
+    "description": "Basic page-header layout.",
+    "body": "<nve-page-header slot=\"header\">\n  <nve-logo slot=\"prefix\" size=\"sm\">NV</nve-logo>\n  <h2 slot=\"prefix\">${1:NVIDIA}</h2>\n</nve-page-header>\n"
+  },
+  "Page Header with Links": {
+    "srcFile": "page-header.snippets.html",
+    "prefix": [
+      "page-header-with-links"
+    ],
+    "type": "pattern",
+    "description": "Basic page-header layout with links.",
+    "body": "<nve-page-header slot=\"header\">\n  <nve-logo slot=\"prefix\" size=\"sm\">NV</nve-logo>\n  <h2 slot=\"prefix\">${1:NVIDIA}</h2>\n  <nve-button selected container=\"flat\"><a href=\"#\">${2:Link 1}</a></nve-button>\n  <nve-button container=\"flat\"><a href=\"#\">${3:Link 2}</a></nve-button>\n</nve-page-header>\n"
+  },
   "Page": {
     "srcFile": "page.snippets.html",
     "prefix": [
@@ -116,24 +134,6 @@
     "description": "Basic page subheader using toolbar.",
     "body": "<nve-toolbar slot=\"subheader\">\n  <h2 nve-text=\"emphasis heading sm\">${1:Subheader}</h2>\n</nve-toolbar>\n"
   },
-  "Page Header": {
-    "srcFile": "page-header.snippets.html",
-    "prefix": [
-      "page-header"
-    ],
-    "type": "pattern",
-    "description": "Basic page-header layout.",
-    "body": "<nve-page-header slot=\"header\">\n  <nve-logo slot=\"prefix\" size=\"sm\">NV</nve-logo>\n  <h2 slot=\"prefix\">${1:NVIDIA}</h2>\n</nve-page-header>\n"
-  },
-  "Page Header with Links": {
-    "srcFile": "page-header.snippets.html",
-    "prefix": [
-      "page-header-with-links"
-    ],
-    "type": "pattern",
-    "description": "Basic page-header layout with links.",
-    "body": "<nve-page-header slot=\"header\">\n  <nve-logo slot=\"prefix\" size=\"sm\">NV</nve-logo>\n  <h2 slot=\"prefix\">${1:NVIDIA}</h2>\n  <nve-button selected container=\"flat\"><a href=\"#\">${2:Link 1}</a></nve-button>\n  <nve-button container=\"flat\"><a href=\"#\">${3:Link 2}</a></nve-button>\n</nve-page-header>\n"
-  },
   "Input Group": {
     "srcFile": "input.snippets.html",
     "prefix": [

package/dist/date/date.examples.json

@@ -23,7 +23,7 @@
     {
       "id": "date-vertical",
       "name": "Vertical",
-      "template": "<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-date>\n    <label>label</label>\n    <input type=\"date\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-date>\n  <nve-date>\n    <label>disabled</label>\n    <input type=\"date\" disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-date>\n  <nve-date>\n    <label>success</label>\n    <input type=\"date\" />\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-date>\n  <nve-date>\n    <label>error</label>\n    <input type=\"date\" />\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-date>\n</div>\n",
+      "template": "<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-date>\n    <label>label</label>\n    <input type=\"date\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-date>\n\n  <nve-date>\n    <label>disabled</label>\n    <input type=\"date\" disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-date>\n\n  <nve-date>\n    <label>success</label>\n    <input type=\"date\" />\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-date>\n\n  <nve-date>\n    <label>error</label>\n    <input type=\"date\" />\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-date>\n</div>\n",
       "summary": "Date pickers with vertical layout including validation states for disabled, success, and error.",
       "description": "",
       "composition": false,
@@ -34,7 +34,7 @@
     {
       "id": "date-horizontal",
       "name": "Horizontal",
-      "template": "<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-date layout=\"horizontal\">\n    <label>label</label>\n    <input type=\"date\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-date>\n  <nve-date layout=\"horizontal\">\n    <label>disabled</label>\n    <input type=\"date\" disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-date>\n  <nve-date layout=\"horizontal\">\n    <label>success</label>\n    <input type=\"date\" />\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-date>\n  <nve-date layout=\"horizontal\">\n    <label>error</label>\n    <input type=\"date\" />\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-date>\n</div>\n",
+      "template": "<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-date layout=\"horizontal\">\n    <label>label</label>\n    <input type=\"date\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-date>\n\n  <nve-date layout=\"horizontal\">\n    <label>disabled</label>\n    <input type=\"date\" disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-date>\n\n  <nve-date layout=\"horizontal\">\n    <label>success</label>\n    <input type=\"date\" />\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-date>\n\n  <nve-date layout=\"horizontal\">\n    <label>error</label>\n    <input type=\"date\" />\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-date>\n</div>\n",
       "summary": "Date pickers with horizontal layout showing validation states for inline forms and compact layouts.",
       "description": "",
       "composition": false,
@@ -54,7 +54,7 @@
     {
       "id": "date-types",
       "name": "Types",
-      "template": "<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-date layout=\"horizontal\">\n    <label>date label</label>\n    <input type=\"date\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-date>\n  <nve-datetime layout=\"horizontal\">\n    <label>datetime label</label>\n    <input type=\"datetime-local\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-datetime>\n  <nve-month layout=\"horizontal\">\n    <label>month label</label>\n    <input type=\"month\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-month>\n  <nve-week layout=\"horizontal\">\n    <label>week label</label>\n    <input type=\"week\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-week>\n  <nve-time layout=\"horizontal\">\n    <label>time label</label>\n    <input type=\"time\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-time>\n  <nve-input-group layout=\"horizontal\">\n    <label>date range</label>\n    <nve-date>\n      <input type=\"date\" aria-label=\"start date\" value=\"2018-07-22\" />\n    </nve-date>\n    <nve-date>\n      <input type=\"date\" aria-label=\"end date\" value=\"2022-07-22\" />\n    </nve-date>\n    <nve-control-message>message</nve-control-message>\n  </nve-input-group>\n</div>\n",
+      "template": "<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-date layout=\"horizontal\">\n    <label>date label</label>\n    <input type=\"date\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-date>\n\n  <nve-datetime layout=\"horizontal\">\n    <label>datetime label</label>\n    <input type=\"datetime-local\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-datetime>\n\n  <nve-month layout=\"horizontal\">\n    <label>month label</label>\n    <input type=\"month\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-month>\n\n  <nve-week layout=\"horizontal\">\n    <label>week label</label>\n    <input type=\"week\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-week>\n\n  <nve-time layout=\"horizontal\">\n    <label>time label</label>\n    <input type=\"time\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-time>\n\n  <nve-input-group layout=\"horizontal\">\n    <label>date range</label>\n    <nve-date>\n      <input type=\"date\" aria-label=\"start date\" value=\"2018-07-22\" />\n    </nve-date>\n    <nve-date>\n      <input type=\"date\" aria-label=\"end date\" value=\"2022-07-22\" />\n    </nve-date>\n    <nve-control-message>message</nve-control-message>\n  </nve-input-group>\n</div>\n",
       "summary": "Collection of temporal input types including date, datetime, month, week, time, and date range pickers.",
       "description": "",
       "composition": true,

package/dist/date/date2.js

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

package/dist/datetime/datetime.examples.json

@@ -23,7 +23,7 @@
     {
       "id": "datetime-vertical",
       "name": "Vertical",
-      "template": "<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-datetime>\n    <label>label</label>\n    <input type=\"datetime-local\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-datetime>\n  <nve-datetime>\n    <label>disabled</label>\n    <input type=\"datetime-local\" disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-datetime>\n  <nve-datetime>\n    <label>success</label>\n    <input type=\"datetime-local\" />\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-datetime>\n  <nve-datetime>\n    <label>error</label>\n    <input type=\"datetime-local\" />\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-datetime>\n</div>\n",
+      "template": "<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-datetime>\n    <label>label</label>\n    <input type=\"datetime-local\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-datetime>\n\n  <nve-datetime>\n    <label>disabled</label>\n    <input type=\"datetime-local\" disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-datetime>\n\n  <nve-datetime>\n    <label>success</label>\n    <input type=\"datetime-local\" />\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-datetime>\n\n  <nve-datetime>\n    <label>error</label>\n    <input type=\"datetime-local\" />\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-datetime>\n</div>\n",
       "summary": "Datetime pickers with vertical layout including validation states for disabled, success, and error.",
       "description": "",
       "composition": false,
@@ -34,7 +34,7 @@
     {
       "id": "datetime-horizontal",
       "name": "Horizontal",
-      "template": "<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-datetime layout=\"horizontal\">\n    <label>label</label>\n    <input type=\"datetime-local\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-datetime>\n  <nve-datetime layout=\"horizontal\">\n    <label>disabled</label>\n    <input type=\"datetime-local\" disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-datetime>\n  <nve-datetime layout=\"horizontal\">\n    <label>success</label>\n    <input type=\"datetime-local\" />\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-datetime>\n  <nve-datetime layout=\"horizontal\">\n    <label>error</label>\n    <input type=\"datetime-local\" />\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-datetime>\n</div>\n",
+      "template": "<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-datetime layout=\"horizontal\">\n    <label>label</label>\n    <input type=\"datetime-local\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-datetime>\n\n  <nve-datetime layout=\"horizontal\">\n    <label>disabled</label>\n    <input type=\"datetime-local\" disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-datetime>\n\n  <nve-datetime layout=\"horizontal\">\n    <label>success</label>\n    <input type=\"datetime-local\" />\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-datetime>\n\n  <nve-datetime layout=\"horizontal\">\n    <label>error</label>\n    <input type=\"datetime-local\" />\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-datetime>\n</div>\n",
       "summary": "Datetime pickers with horizontal layout showing validation states for inline forms and compact layouts.",
       "description": "",
       "composition": false,

package/dist/datetime/datetime2.js

@@ -19,7 +19,7 @@ var l = class extends r {
 	static {
 		this.metadata = {
 			tag: "nve-datetime",
-			version: "2.12.0"
+			version: "2.12.2"
 		};
 	}
 	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.12.0",
+			version: "2.12.2",
 			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.12.0",
+			version: "2.12.2",
 			parents: ["nve-dialog"]
 		};
 	}

package/dist/dialog/dialog.examples.json

@@ -109,7 +109,7 @@
     {
       "id": "dialog-alignment",
       "name": "Alignment",
-      "template": "<nve-dialog>center</nve-dialog>\n<nve-dialog position=\"top\">top center</nve-dialog>\n<nve-dialog position=\"top\" alignment=\"start\">top start</nve-dialog>\n<nve-dialog position=\"top\">top center</nve-dialog>\n<nve-dialog position=\"top\" alignment=\"end\">top end</nve-dialog>\n<nve-dialog position=\"right\" alignment=\"start\">right start</nve-dialog>\n<nve-dialog position=\"right\">right center</nve-dialog>\n<nve-dialog position=\"right\" alignment=\"end\">right end</nve-dialog>\n<nve-dialog position=\"bottom\" alignment=\"start\">bottom start</nve-dialog>\n<nve-dialog position=\"bottom\">bottom center</nve-dialog>\n<nve-dialog position=\"bottom\" alignment=\"end\">bottom end</nve-dialog>\n<nve-dialog position=\"left\" alignment=\"start\">left start</nve-dialog>\n<nve-dialog position=\"left\">left center</nve-dialog>\n<nve-dialog position=\"left\" alignment=\"end\">left end</nve-dialog>\n",
+      "template": "<nve-dialog>center</nve-dialog>\n\n<nve-dialog position=\"top\">top center</nve-dialog>\n<nve-dialog position=\"top\" alignment=\"start\">top start</nve-dialog>\n<nve-dialog position=\"top\">top center</nve-dialog>\n<nve-dialog position=\"top\" alignment=\"end\">top end</nve-dialog>\n\n<nve-dialog position=\"right\" alignment=\"start\">right start</nve-dialog>\n<nve-dialog position=\"right\">right center</nve-dialog>\n<nve-dialog position=\"right\" alignment=\"end\">right end</nve-dialog>\n\n<nve-dialog position=\"bottom\" alignment=\"start\">bottom start</nve-dialog>\n<nve-dialog position=\"bottom\">bottom center</nve-dialog>\n<nve-dialog position=\"bottom\" alignment=\"end\">bottom end</nve-dialog>\n\n<nve-dialog position=\"left\" alignment=\"start\">left start</nve-dialog>\n<nve-dialog position=\"left\">left center</nve-dialog>\n<nve-dialog position=\"left\" alignment=\"end\">left end</nve-dialog>\n",
       "summary": "Dialog positioning and alignment options for contextual placement. While center positioning is standard, use edge positioning (top/bottom/left/right) for contextually relevant dialogs that relate to specific interface regions or when working with limited vertical 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>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",
+      "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\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\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>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",
+      "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\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,
@@ -155,7 +155,7 @@
     {
       "id": "dialog-shadow-root",
       "name": "ShadowRoot",
-      "template": "<dialog-test-shadow-root>\n  <template shadowrootmode=\"open\">\n    <style>\n      :host {\n        box-sizing: border-box;\n        display: block;\n        margin: 25vh auto;\n        width: 400px;\n        height: 400px;\n        background: red;\n        visibility: visible !important;\n      }\n    </style>\n    <nve-dialog size=\"sm\">center</nve-dialog>\n    <nve-dialog size=\"sm\" position=\"top\">top center</nve-dialog>\n    <nve-dialog size=\"sm\" position=\"top\" alignment=\"start\">top start</nve-dialog>\n    <nve-dialog size=\"sm\" position=\"top\" alignment=\"end\">top end</nve-dialog>\n    <nve-dialog size=\"sm\" position=\"right\" alignment=\"start\">right start</nve-dialog>\n    <nve-dialog size=\"sm\" position=\"right\">right center</nve-dialog>\n    <nve-dialog size=\"sm\" position=\"right\" alignment=\"end\">right end</nve-dialog>\n    <nve-dialog size=\"sm\" position=\"bottom\" alignment=\"start\">bottom start</nve-dialog>\n    <nve-dialog size=\"sm\" position=\"bottom\">bottom center</nve-dialog>\n    <nve-dialog size=\"sm\" position=\"bottom\" alignment=\"end\">bottom end</nve-dialog>\n    <nve-dialog size=\"sm\" position=\"left\" alignment=\"start\">left start</nve-dialog>\n    <nve-dialog size=\"sm\" position=\"left\">left center</nve-dialog>\n    <nve-dialog size=\"sm\" position=\"left\" alignment=\"end\">left end</nve-dialog>\n  </template>\n</dialog-test-shadow-root>\n",
+      "template": "<dialog-test-shadow-root>\n  <template shadowrootmode=\"open\">\n    <style>:host { box-sizing: border-box; display: block; margin: 25vh auto; width: 400px; height: 400px; background: red; visibility: visible !important; }</style>\n    <nve-dialog size=\"sm\">center</nve-dialog>\n    <nve-dialog size=\"sm\" position=\"top\">top center</nve-dialog>\n    <nve-dialog size=\"sm\" position=\"top\" alignment=\"start\">top start</nve-dialog>\n    <nve-dialog size=\"sm\" position=\"top\" alignment=\"end\">top end</nve-dialog>\n    <nve-dialog size=\"sm\" position=\"right\" alignment=\"start\">right start</nve-dialog>\n    <nve-dialog size=\"sm\" position=\"right\">right center</nve-dialog>\n    <nve-dialog size=\"sm\" position=\"right\" alignment=\"end\">right end</nve-dialog>\n    <nve-dialog size=\"sm\" position=\"bottom\" alignment=\"start\">bottom start</nve-dialog>\n    <nve-dialog size=\"sm\" position=\"bottom\">bottom center</nve-dialog>\n    <nve-dialog size=\"sm\" position=\"bottom\" alignment=\"end\">bottom end</nve-dialog>\n    <nve-dialog size=\"sm\" position=\"left\" alignment=\"start\">left start</nve-dialog>\n    <nve-dialog size=\"sm\" position=\"left\">left center</nve-dialog>\n    <nve-dialog size=\"sm\" position=\"left\" alignment=\"end\">left end</nve-dialog>\n  </template>\n</dialog-test-shadow-root>\n",
       "summary": "Dialog functionality within shadow DOM, with proper dialog behavior in encapsulated component environments and custom elements.",
       "description": "",
       "composition": false,
@@ -177,7 +177,7 @@
     {
       "id": "dialog-inert-modal",
       "name": "InertModal",
-      "template": "<style>\n  body {\n    display: block !important;\n    padding: 24px;\n  }\n</style>\n<div>\n  <button popovertarget=\"popover\">btn</button>\n  <div>\n    <button popovertarget=\"popover\">btn</button>\n    <nve-dialog id=\"popover\" modal>\n      <nve-dialog-header>\n        <h3 nve-text=\"heading semibold\">title</h3>\n      </nve-dialog-header>\n      <button popovertarget=\"dropdown\">button</button>\n      <nve-dropdown id=\"dropdown\">\n        dropdown content\n        <button>btn</button>\n      </nve-dropdown>\n      <p nve-text=\"body\">some text content in a closable dialog</p>\n      <button>btn</button>\n      <button>btn</button>\n    </nve-dialog>\n  </div>\n</div>\n<button popovertarget=\"popover\">btn</button><br />\n<button popovertarget=\"popover\">btn</button>\n<div>\n  <button popovertarget=\"popover\">btn</button>\n  <div>\n    <button popovertarget=\"popover\">btn</button>\n    <div>\n      <button popovertarget=\"popover\">btn</button>\n    </div>\n  </div>\n</div>\n",
+      "template": "<style>\n  body {\n    display: block !important;\n    padding: 24px;\n  }\n</style>\n<div>\n  <button popovertarget=\"popover\">btn</button>\n  <div>\n    <button popovertarget=\"popover\">btn</button>\n    <nve-dialog id=\"popover\" modal>\n      <nve-dialog-header>\n        <h3 nve-text=\"heading semibold\">title</h3>\n      </nve-dialog-header>\n      <button popovertarget=\"dropdown\">button</button>\n      <nve-dropdown id=\"dropdown\">\n        dropdown content\n        <button>btn</button>\n      </nve-dropdown>\n      <p nve-text=\"body\">some text content in a closable dialog</p>\n      <button>btn</button>\n      <button>btn</button>\n    </nve-dialog>\n  </div>\n</div>\n\n<button popovertarget=\"popover\">btn</button><br />\n\n<button popovertarget=\"popover\">btn</button>\n<div>\n  <button popovertarget=\"popover\">btn</button>\n  <div>\n    <button popovertarget=\"popover\">btn</button>\n    <div>\n      <button popovertarget=\"popover\">btn</button>\n    </div>\n  </div>\n</div>\n",
       "summary": "Modal dialog with inert behavior, including proper focus management and accessibility compliance for modal overlays and user interaction.",
       "description": "",
       "composition": false,
@@ -188,7 +188,7 @@
     {
       "id": "dialog-container-styles",
       "name": "ContainerStyles",
-      "template": "<nve-dialog id=\"slots-dialog\" closable popover=\"manual\" position=\"top\">\n  <nve-dialog-header>\n    <h3 nve-text=\"heading semibold\">default</h3>\n  </nve-dialog-header>\n  <p nve-text=\"body\">default dialog with header and footer components</p>\n  <nve-dialog-footer>\n    <nve-button>button</nve-button>\n  </nve-dialog-footer>\n</nve-dialog>\n<nve-dialog id=\"content-dialog\" closable popover=\"manual\" position=\"right\">\n  <h3 nve-text=\"heading semibold\">title</h3>\n  <p nve-text=\"body\">dialog with only content and no header or footer components</p>\n  <nve-button>button</nve-button>\n</nve-dialog>\n<nve-dialog id=\"custom-dialog\" closable style=\"--padding: 0\" position=\"bottom\">\n  <h3 nve-text=\"heading semibold\">title</h3>\n  <p nve-text=\"body\">dialog with only content and no header or footer components and --padding set to 0</p>\n  <nve-button>button</nve-button>\n</nve-dialog>\n<nve-dialog id=\"custom-slots\" closable style=\"--padding: 48px\" position=\"left\">\n  <nve-dialog-header>\n    <h3 nve-text=\"heading semibold\">title</h3>\n  </nve-dialog-header>\n  <p nve-text=\"body\">dialog with header and footer components with --padding set to 48px</p>\n  <nve-dialog-footer>\n    <nve-button>button</nve-button>\n  </nve-dialog-footer>\n</nve-dialog>\n",
+      "template": "<nve-dialog id=\"slots-dialog\" closable popover=\"manual\" position=\"top\">\n  <nve-dialog-header>\n    <h3 nve-text=\"heading semibold\">default</h3>\n  </nve-dialog-header>\n  <p nve-text=\"body\">default dialog with header and footer components</p>\n  <nve-dialog-footer>\n    <nve-button>button</nve-button>\n  </nve-dialog-footer>\n</nve-dialog>\n\n<nve-dialog id=\"content-dialog\" closable popover=\"manual\" position=\"right\">\n  <h3 nve-text=\"heading semibold\">title</h3>\n  <p nve-text=\"body\">dialog with only content and no header or footer components</p>\n  <nve-button>button</nve-button>\n</nve-dialog>\n\n<nve-dialog id=\"custom-dialog\" closable style=\"--padding: 0\" position=\"bottom\">\n  <h3 nve-text=\"heading semibold\">title</h3>\n  <p nve-text=\"body\">dialog with only content and no header or footer components and --padding set to 0</p>\n  <nve-button>button</nve-button>\n</nve-dialog>\n\n<nve-dialog id=\"custom-slots\" closable style=\"--padding: 48px\" position=\"left\">\n  <nve-dialog-header>\n    <h3 nve-text=\"heading semibold\">title</h3>\n  </nve-dialog-header>\n  <p nve-text=\"body\">dialog with header and footer components with --padding set to 48px</p>\n  <nve-dialog-footer>\n    <nve-button>button</nve-button>\n  </nve-dialog-footer>\n</nve-dialog>\n",
       "summary": "Dialog with different container styles, including custom padding and layout options.",
       "description": "",
       "composition": false,
@@ -210,7 +210,7 @@
     {
       "id": "dialog-legacy-dom-creation",
       "name": "LegacyDOMCreation",
-      "template": "<nve-button id=\"dialog-btn\">button</nve-button>\n<script type=\"module\">\n  import \"@nvidia-elements/core/dialog/define.js\";\n  import \"@nvidia-elements/core/button/define.js\";\n  document.querySelector(\"#dialog-btn\").addEventListener(\"click\", () => {\n    const dialog = document.createElement(\"nve-dialog\");\n    dialog.id = \"dialog-dom-creation\";\n    dialog.modal = true;\n    dialog.closable = true;\n\n    dialog.addEventListener(\n      \"close\",\n      () => {\n        document.body.removeChild(dialog);\n      },\n      { once: true },\n    );\n    document.body.appendChild(dialog);\n  });\n</script>\n",
+      "template": "<nve-button id=\"dialog-btn\">button</nve-button>\n<script type=\"module\">\n  import \"@nvidia-elements/core/dialog/define.js\";\n  import \"@nvidia-elements/core/button/define.js\";\n\n  document.querySelector(\"#dialog-btn\").addEventListener(\"click\", () => {\n    const dialog = document.createElement(\"nve-dialog\");\n    dialog.id = \"dialog-dom-creation\";\n    dialog.modal = true;\n    dialog.closable = true;\n\n    dialog.addEventListener(\n      \"close\",\n      () => {\n        document.body.removeChild(dialog);\n      },\n      { once: true },\n    );\n\n    document.body.appendChild(dialog);\n  });\n</script>\n",
       "summary": "Legacy DOM Creation",
       "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.12.0"
+			version: "2.12.2"
 		};
 	}
 	static {

package/dist/divider/divider2.js

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