@nvidia-elements/core 2.11.2 → 2.12.1

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": [
             {
@@ -52924,19 +52938,53 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Renders origin-stable, zoom-adaptive gridlines behind viewport content.",
+          "description": "Renders origin-stable, zoom-adaptive gridline patterns behind viewport content.",
           "name": "ViewportGridlines",
           "cssProperties": [
             {
-              "description": "Sets the gridline stroke color. [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color)",
+              "description": "Sets the gridline pattern color. [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color)",
               "name": "--color"
             },
             {
               "description": "Sets the approximate stroke width in CSS pixels.",
               "name": "--line-width"
+            },
+            {
+              "description": "Sets the approximate dot radius in CSS pixels.",
+              "name": "--dot-radius"
+            },
+            {
+              "description": "Sets the approximate full width and height of each cross in CSS pixels.",
+              "name": "--cross-size"
             }
           ],
           "members": [
+            {
+              "kind": "field",
+              "name": "pattern",
+              "type": {
+                "text": "'lines' | 'dots' | 'crosses'",
+                "_sourceAliases": [],
+                "values": [
+                  {
+                    "value": "lines",
+                    "description": ""
+                  },
+                  {
+                    "value": "dots",
+                    "description": ""
+                  },
+                  {
+                    "value": "crosses",
+                    "description": ""
+                  }
+                ]
+              },
+              "default": "'lines'",
+              "description": "Grid pattern to render.",
+              "attribute": "pattern",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "step",
@@ -53007,6 +53055,30 @@
             }
           ],
           "attributes": [
+            {
+              "name": "pattern",
+              "type": {
+                "text": "'lines' | 'dots' | 'crosses'",
+                "_sourceAliases": [],
+                "values": [
+                  {
+                    "value": "lines",
+                    "description": ""
+                  },
+                  {
+                    "value": "dots",
+                    "description": ""
+                  },
+                  {
+                    "value": "crosses",
+                    "description": ""
+                  }
+                ]
+              },
+              "default": "'lines'",
+              "description": "Grid pattern to render.",
+              "fieldName": "pattern"
+            },
             {
               "name": "step",
               "type": {
@@ -53090,7 +53162,7 @@
             "since": "0.0.0",
             "status": "beta",
             "behavior": "content",
-            "markdown": "## nve-viewport-gridlines\n\nRenders origin-stable, zoom-adaptive gridlines behind viewport content.\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/viewport/define.js';\n```\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| originX (origin-x) | `number` | Content-space x coordinate of the grid origin. |\n| originY (origin-y) | `number` | Content-space y coordinate of the grid origin. |\n| step | `number` | Smallest gridline interval in content-space units. |\n| targetSpacing (target-spacing) | `number` | Target on-screen separation used to choose the adaptive gridline interval, in CSS pixels. |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --color | `string` | Sets the gridline stroke color. [MDN](https://mdn.dev/CSS/color) |\n| --line-width | `string` | Sets the approximate stroke width in CSS pixels. |"
+            "markdown": "## nve-viewport-gridlines\n\nRenders origin-stable, zoom-adaptive gridline patterns behind viewport content.\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/viewport/define.js';\n```\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| originX (origin-x) | `number` | Content-space x coordinate of the grid origin. |\n| originY (origin-y) | `number` | Content-space y coordinate of the grid origin. |\n| pattern | `'lines' \\| 'dots' \\| 'crosses'` | Grid pattern to render. |\n| step | `number` | Smallest gridline interval in content-space units. |\n| targetSpacing (target-spacing) | `number` | Target on-screen separation used to choose the adaptive gridline interval, in CSS pixels. |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --color | `string` | Sets the gridline pattern color. [MDN](https://mdn.dev/CSS/color) |\n| --cross-size | `string` | Sets the approximate full width and height of each cross in CSS pixels. |\n| --dot-radius | `string` | Sets the approximate dot radius in CSS pixels. |\n| --line-width | `string` | Sets the approximate stroke width in CSS pixels. |"
           }
         }
       ],
@@ -54467,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.html.json

@@ -5758,8 +5758,17 @@
     },
     {
       "name": "nve-viewport-gridlines",
-      "description": "Renders origin-stable, zoom-adaptive gridlines behind viewport content.\n---\n\n\n### **CSS Properties:**\n - **--color** - Sets the gridline stroke color. [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color) _(default: undefined)_\n- **--line-width** - Sets the approximate stroke width in CSS pixels. _(default: undefined)_",
+      "description": "Renders origin-stable, zoom-adaptive gridline patterns behind viewport content.\n---\n\n\n### **CSS Properties:**\n - **--color** - Sets the gridline pattern color. [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color) _(default: undefined)_\n- **--line-width** - Sets the approximate stroke width in CSS pixels. _(default: undefined)_\n- **--dot-radius** - Sets the approximate dot radius in CSS pixels. _(default: undefined)_\n- **--cross-size** - Sets the approximate full width and height of each cross in CSS pixels. _(default: undefined)_",
       "attributes": [
+        {
+          "name": "pattern",
+          "description": "Grid pattern to render.",
+          "values": [
+            { "name": "lines" },
+            { "name": "dots" },
+            { "name": "crosses" }
+          ]
+        },
         {
           "name": "step",
           "description": "Smallest gridline interval in content-space units.",

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.11.2"
+			version: "2.12.1"
 		};
 	}
 	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.11.2"
+			version: "2.12.1"
 		};
 	}
 	static {

package/dist/dialog/dialog-footer2.js

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

package/dist/dialog/dialog-header2.js

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