@nvidia-elements/core 2.8.0 → 2.9.0

package/CHANGELOG.md

@@ -1,3 +1,26 @@
+## [2.9.0](https://github.com/NVIDIA/elements/compare/@nvidia-elements/core-v2.8.1...@nvidia-elements/core-v2.9.0) (2026-09-24)
+
+### Features
+
+* **core:** add viewport ([0e9e892](https://github.com/NVIDIA/elements/commit/0e9e892de5d41c2a64d1e9adcfaa7a9df2c4deef))
+
+### Bug Fixes
+
+* **cli:** update bun to 1.4.2 ([0e84e28](https://github.com/NVIDIA/elements/commit/0e84e2880ca5ff09405d0d88d16ef12d9341623e))
+* **core:** enhance gesture recognizer ([0be2399](https://github.com/NVIDIA/elements/commit/0be2399b37982fde94c061ed811c280b29e3a3ae))
+
+## [2.8.1](https://github.com/NVIDIA/elements/compare/@nvidia-elements/core-v2.8.0...@nvidia-elements/core-v2.8.1) (2026-09-23)
+
+### Features
+
+* **lint:** improve slotted element checks ([0e1985d](https://github.com/NVIDIA/elements/commit/0e1985deb9edba09cbcbd9eec121e445d3559624))
+
+### Bug Fixes
+
+* **cli:** update @inquirer/prompts to 8.7.2 ([b6984b5](https://github.com/NVIDIA/elements/commit/b6984b58a80a666b7a83aac1e109337e90c469d1))
+* **core:** textarea slots ([0f8fb33](https://github.com/NVIDIA/elements/commit/0f8fb33a38c60a08aaf37e774a92338cf5416401))
+* **lint:** skip generated eleventy vite directories in eslint ([92e5d50](https://github.com/NVIDIA/elements/commit/92e5d506fe0a951c354641a1aad2b1a9dd75a212))
+
 ## [2.8.0](https://github.com/NVIDIA/elements/compare/@nvidia-elements/core-v2.7.3...@nvidia-elements/core-v2.8.0) (2026-09-19)
 
 ### Features

package/dist/accordion/accordion.examples.json

@@ -5,7 +5,7 @@
     {
       "id": "accordion",
       "name": "Default",
-      "template": "<nve-accordion-group behavior-expand>\n  <nve-accordion>\n    <nve-accordion-header>\n      <h2 nve-text=\"heading xs medium\">Workspace Settings</h2>\n    </nve-accordion-header>\n    <nve-accordion-content\n      >Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content\n    >\n  </nve-accordion>\n</nve-accordion-group>\n",
+      "template": "<nve-accordion-group behavior-expand>\n  <nve-accordion>\n    <nve-accordion-header>\n      <h2 nve-text=\"heading xs medium\">Workspace Settings</h2>\n    </nve-accordion-header>\n    <nve-accordion-content>Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content>\n  </nve-accordion>\n</nve-accordion-group>\n",
       "summary": "Basic accordion component for collapsible content sections. Use accordions to progressively disclose information, helping users focus on relevant content while keeping the interface compact and scannable.",
       "description": "",
       "composition": false,
@@ -14,7 +14,7 @@
     {
       "id": "accordion-disabled",
       "name": "Disabled",
-      "template": "<nve-accordion behavior-expand disabled>\n  <nve-accordion-header>\n    <h2 nve-text=\"heading xs medium\" slot=\"prefix\">Admin Settings</h2>\n    <p nve-text=\"body\">Requires administrator access</p>\n  </nve-accordion-header>\n  <nve-accordion-content\n    >Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content\n  >\n</nve-accordion>\n",
+      "template": "<nve-accordion behavior-expand disabled>\n  <nve-accordion-header>\n    <h2 nve-text=\"heading xs medium\" slot=\"prefix\">Admin Settings</h2>\n    <p nve-text=\"body\">Requires administrator access</p>\n  </nve-accordion-header>\n  <nve-accordion-content>Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content>\n</nve-accordion>\n",
       "summary": "Disabled accordion state for read-only content display. Use when accordion sections are temporarily unavailable or conditionally accessible based on user permissions, providing visual feedback about inaccessible content.",
       "description": "",
       "composition": false,
@@ -23,7 +23,7 @@
     {
       "id": "accordion-container",
       "name": "Container",
-      "template": "<div nve-layout=\"column gap:md\">\n  <nve-accordion-group behavior-expand>\n    <nve-accordion>\n      <nve-accordion-header>\n        <h2 nve-text=\"heading xs medium\" slot=\"prefix\">General</h2>\n      </nve-accordion-header>\n      <nve-accordion-content\n        >Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content\n      >\n    </nve-accordion>\n    <nve-accordion>\n      <nve-accordion-header>\n        <h2 nve-text=\"heading xs medium\" slot=\"prefix\">Settings</h2>\n      </nve-accordion-header>\n      <nve-accordion-content\n        >Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content\n      >\n    </nve-accordion>\n  </nve-accordion-group>\n  <nve-accordion-group container=\"inset\" behavior-expand>\n    <nve-accordion>\n      <nve-accordion-header>\n        <h2 nve-text=\"heading xs medium\" slot=\"prefix\">General</h2>\n      </nve-accordion-header>\n      <nve-accordion-content\n        >Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content\n      >\n    </nve-accordion>\n    <nve-accordion>\n      <nve-accordion-header>\n        <h2 nve-text=\"heading xs medium\" slot=\"prefix\">Settings</h2>\n      </nve-accordion-header>\n      <nve-accordion-content\n        >Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content\n      >\n    </nve-accordion>\n  </nve-accordion-group>\n  <nve-accordion-group container=\"flat\" behavior-expand>\n    <nve-accordion>\n      <nve-accordion-header>\n        <h2 nve-text=\"heading xs medium\" slot=\"prefix\">General</h2>\n      </nve-accordion-header>\n      <nve-accordion-content\n        >Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content\n      >\n    </nve-accordion>\n    <nve-accordion>\n      <nve-accordion-header>\n        <h2 nve-text=\"heading xs medium\" slot=\"prefix\">Settings</h2>\n      </nve-accordion-header>\n      <nve-accordion-content\n        >Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content\n      >\n    </nve-accordion>\n  </nve-accordion-group>\n</div>\n",
+      "template": "<div nve-layout=\"column gap:md\">\n  <nve-accordion-group behavior-expand>\n    <nve-accordion>\n      <nve-accordion-header>\n        <h2 nve-text=\"heading xs medium\" slot=\"prefix\">General</h2>\n      </nve-accordion-header>\n      <nve-accordion-content>Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content>\n    </nve-accordion>\n    <nve-accordion>\n      <nve-accordion-header>\n        <h2 nve-text=\"heading xs medium\" slot=\"prefix\">Settings</h2>\n      </nve-accordion-header>\n      <nve-accordion-content>Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content>\n    </nve-accordion>\n  </nve-accordion-group>\n  <nve-accordion-group container=\"inset\" behavior-expand>\n    <nve-accordion>\n      <nve-accordion-header>\n        <h2 nve-text=\"heading xs medium\" slot=\"prefix\">General</h2>\n      </nve-accordion-header>\n      <nve-accordion-content>Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content>\n    </nve-accordion>\n    <nve-accordion>\n      <nve-accordion-header>\n        <h2 nve-text=\"heading xs medium\" slot=\"prefix\">Settings</h2>\n      </nve-accordion-header>\n      <nve-accordion-content>Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content>\n    </nve-accordion>\n  </nve-accordion-group>\n  <nve-accordion-group container=\"flat\" behavior-expand>\n    <nve-accordion>\n      <nve-accordion-header>\n        <h2 nve-text=\"heading xs medium\" slot=\"prefix\">General</h2>\n      </nve-accordion-header>\n      <nve-accordion-content>Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content>\n    </nve-accordion>\n    <nve-accordion>\n      <nve-accordion-header>\n        <h2 nve-text=\"heading xs medium\" slot=\"prefix\">Settings</h2>\n      </nve-accordion-header>\n      <nve-accordion-content>Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content>\n    </nve-accordion>\n  </nve-accordion-group>\n</div>\n",
       "summary": "Accordion container variants for different visual emphasis levels. Use default for standard sections, inset for elevated content within cards, and flat for minimal visual weight in dense layouts or sidebars.",
       "description": "",
       "composition": false,
@@ -32,7 +32,7 @@
     {
       "id": "accordion-animated",
       "name": "Animated",
-      "template": "<nve-accordion behavior-expand style=\"--transition: height 0.3s ease-in-out\">\n  <nve-accordion-header>\n    <h2 nve-text=\"heading xs medium\" slot=\"prefix\">Release Notes</h2>\n    <p nve-text=\"body\">Version 3.2.0</p>\n  </nve-accordion-header>\n  <nve-accordion-content\n    >Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content\n  >\n</nve-accordion>\n",
+      "template": "<nve-accordion behavior-expand style=\"--transition: height 0.3s ease-in-out\">\n  <nve-accordion-header>\n    <h2 nve-text=\"heading xs medium\" slot=\"prefix\">Release Notes</h2>\n    <p nve-text=\"body\">Version 3.2.0</p>\n  </nve-accordion-header>\n  <nve-accordion-content>Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content>\n</nve-accordion>\n",
       "summary": "Accordion with custom CSS transitions for enhanced visual feedback during state changes. Use animated accordions to provide smoother, more polished interactions, particularly in content-heavy interfaces where transitions help users track what changed.",
       "description": "",
       "composition": false,
@@ -43,7 +43,7 @@
     {
       "id": "accordion-behavior-expand-single",
       "name": "BehaviorExpandSingle",
-      "template": "<nve-accordion-group behavior-expand-single>\n  <nve-accordion>\n    <nve-accordion-header>\n      <h2 nve-text=\"heading xs medium\" slot=\"prefix\">Account Settings</h2>\n    </nve-accordion-header>\n    <nve-accordion-content\n      >Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content\n    >\n  </nve-accordion>\n  <nve-accordion>\n    <nve-accordion-header>\n      <h2 nve-text=\"heading xs medium\" slot=\"prefix\">Security</h2>\n    </nve-accordion-header>\n    <nve-accordion-content\n      >Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content\n    >\n  </nve-accordion>\n</nve-accordion-group>\n",
+      "template": "<nve-accordion-group behavior-expand-single>\n  <nve-accordion>\n    <nve-accordion-header>\n      <h2 nve-text=\"heading xs medium\" slot=\"prefix\">Account Settings</h2>\n    </nve-accordion-header>\n    <nve-accordion-content>Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content>\n  </nve-accordion>\n  <nve-accordion>\n    <nve-accordion-header>\n      <h2 nve-text=\"heading xs medium\" slot=\"prefix\">Security</h2>\n    </nve-accordion-header>\n    <nve-accordion-content>Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content>\n  </nve-accordion>\n</nve-accordion-group>\n",
       "summary": "Accordion group allowing only one section expanded at a time, automatically closing others. Use single-expand behavior when content sections are mutually exclusive or when you want to maintain compact vertical space by limiting expanded content to one section.",
       "description": "",
       "composition": false,
@@ -52,7 +52,7 @@
     {
       "id": "accordion-custom-icon-button",
       "name": "CustomIconButton",
-      "template": "<nve-accordion id=\"custom-icon-button-accordion\">\n  <nve-icon-button slot=\"icon-button\" icon-name=\"add\" size=\"sm\" container=\"flat\"></nve-icon-button>\n  <nve-accordion-header>\n    <h2 nve-text=\"heading xs medium\" slot=\"prefix\">Additional Resources</h2>\n  </nve-accordion-header>\n  <nve-accordion-content\n    >Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content\n  >\n</nve-accordion>\n<script type=\"module\">\n  const accordion = document.querySelector(\"#custom-icon-button-accordion\");\n  const accordionHeader = accordion.querySelector(\"nve-accordion-header\");\n  const iconButton = accordion.querySelector(\"nve-icon-button\");\n  accordionHeader.addEventListener(\"click\", () => toggle());\n  iconButton.addEventListener(\"click\", () => toggle());\n  function toggle() {\n    accordion.expanded = !accordion.expanded;\n    iconButton.iconName = accordion.expanded ? \"minus\" : \"add\";\n  }\n</script>\n",
+      "template": "<nve-accordion id=\"custom-icon-button-accordion\">\n  <nve-icon-button slot=\"icon-button\" icon-name=\"add\" size=\"sm\" container=\"flat\"></nve-icon-button>\n  <nve-accordion-header>\n    <h2 nve-text=\"heading xs medium\" slot=\"prefix\">Additional Resources</h2>\n  </nve-accordion-header>\n  <nve-accordion-content>Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content>\n</nve-accordion>\n<script type=\"module\">\n  const accordion = document.querySelector(\"#custom-icon-button-accordion\");\n  const accordionHeader = accordion.querySelector(\"nve-accordion-header\");\n  const iconButton = accordion.querySelector(\"nve-icon-button\");\n  accordionHeader.addEventListener(\"click\", () => toggle());\n  iconButton.addEventListener(\"click\", () => toggle());\n  function toggle() {\n    accordion.expanded = !accordion.expanded;\n    iconButton.iconName = accordion.expanded ? \"minus\" : \"add\";\n  }\n</script>\n",
       "summary": "Accordion with custom icon button that changes based on state. Use custom icons to provide more semantic indicators (e.g., plus/minus for add/remove patterns, chevron for expand/collapse).",
       "description": "",
       "composition": false,
@@ -63,7 +63,7 @@
     {
       "id": "accordion-with-actions",
       "name": "WithActions",
-      "template": "<nve-accordion behavior-expand>\n  <nve-accordion-header>\n    <h2 nve-text=\"heading xs medium\" slot=\"prefix\">Pipeline Configuration</h2>\n    <p nve-text=\"body\">Last updated 2 hours ago <nve-button container=\"inline\">view history</nve-button></p>\n    <nve-icon-button container=\"flat\" icon-name=\"add\" size=\"sm\" slot=\"suffix\"></nve-icon-button>\n    <nve-icon-button container=\"flat\" icon-name=\"delete\" size=\"sm\" slot=\"suffix\"></nve-icon-button>\n  </nve-accordion-header>\n  <nve-accordion-content\n    >Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content\n  >\n</nve-accordion>\n",
+      "template": "<nve-accordion behavior-expand>\n  <nve-accordion-header>\n    <h2 nve-text=\"heading xs medium\" slot=\"prefix\">Pipeline Configuration</h2>\n    <p nve-text=\"body\">Last updated 2 hours ago <nve-button container=\"inline\">view history</nve-button></p>\n    <nve-icon-button container=\"flat\" icon-name=\"add\" size=\"sm\" slot=\"suffix\"></nve-icon-button>\n    <nve-icon-button container=\"flat\" icon-name=\"delete\" size=\"sm\" slot=\"suffix\"></nve-icon-button>\n  </nve-accordion-header>\n  <nve-accordion-content>Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content>\n</nve-accordion>\n",
       "summary": "Accordion with action buttons in header for quick operations without expanding. Perfect for list items where users need both to view details and perform actions like edit, delete, or add, keeping common actions immediately accessible.",
       "description": "",
       "composition": true,
@@ -83,7 +83,7 @@
     {
       "id": "accordion-single",
       "name": "Single",
-      "template": "<nve-accordion-group behavior-expand>\n  <nve-accordion>\n    <nve-accordion-header>\n      <h2 nve-text=\"heading xs medium\" slot=\"prefix\">Appearance</h2>\n    </nve-accordion-header>\n    <nve-accordion-content\n      >Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content\n    >\n  </nve-accordion>\n</nve-accordion-group>\n",
+      "template": "<nve-accordion-group behavior-expand>\n  <nve-accordion>\n    <nve-accordion-header>\n      <h2 nve-text=\"heading xs medium\" slot=\"prefix\">Appearance</h2>\n    </nve-accordion-header>\n    <nve-accordion-content>Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content>\n  </nve-accordion>\n</nve-accordion-group>\n",
       "summary": "Basic accordion component for collapsible content sections with expand/collapse functionality.",
       "description": "",
       "composition": false,
@@ -94,7 +94,7 @@
     {
       "id": "accordion-multiple",
       "name": "Multiple",
-      "template": "<nve-accordion-group behavior-expand>\n  <nve-accordion>\n    <nve-accordion-header>\n      <h2 nve-text=\"heading xs medium\" slot=\"prefix\">Account Settings</h2>\n    </nve-accordion-header>\n    <nve-accordion-content\n      >Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content\n    >\n  </nve-accordion>\n  <nve-accordion>\n    <nve-accordion-header>\n      <h2 nve-text=\"heading xs medium\" slot=\"prefix\">Privacy</h2>\n    </nve-accordion-header>\n    <nve-accordion-content\n      >Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content\n    >\n  </nve-accordion>\n</nve-accordion-group>\n",
+      "template": "<nve-accordion-group behavior-expand>\n  <nve-accordion>\n    <nve-accordion-header>\n      <h2 nve-text=\"heading xs medium\" slot=\"prefix\">Account Settings</h2>\n    </nve-accordion-header>\n    <nve-accordion-content>Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content>\n  </nve-accordion>\n  <nve-accordion>\n    <nve-accordion-header>\n      <h2 nve-text=\"heading xs medium\" slot=\"prefix\">Privacy</h2>\n    </nve-accordion-header>\n    <nve-accordion-content>Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content>\n  </nve-accordion>\n</nve-accordion-group>\n",
       "summary": "Brings together many accordion components for embedded multi-section content organization.",
       "description": "",
       "composition": false,

package/dist/accordion/accordion2.js

@@ -28,7 +28,7 @@ var b = class extends g {
 	static {
 		this.metadata = {
 			tag: "nve-accordion-header",
-			version: "2.8.0"
+			version: "2.9.0"
 		};
 	}
 	render() {
@@ -46,7 +46,7 @@ var x = class extends g {
 	static {
 		this.metadata = {
 			tag: "nve-accordion-content",
-			version: "2.8.0"
+			version: "2.9.0"
 		};
 	}
 	render() {
@@ -62,7 +62,7 @@ var x = class extends g {
 	static {
 		this.metadata = {
 			tag: "nve-accordion",
-			version: "2.8.0",
+			version: "2.9.0",
 			children: [
 				b.metadata.tag,
 				x.metadata.tag,
@@ -120,7 +120,7 @@ var C = class extends g {
 	static {
 		this.metadata = {
 			tag: "nve-accordion-group",
-			version: "2.8.0",
+			version: "2.9.0",
 			children: [S.metadata.tag]
 		};
 	}

package/dist/alert/alert-group2.js

@@ -19,7 +19,7 @@ var f = class extends c {
 	static {
 		this.metadata = {
 			tag: "nve-alert-group",
-			version: "2.8.0",
+			version: "2.9.0",
 			children: [o.metadata.tag]
 		};
 	}

package/dist/alert/alert.examples.json

@@ -54,7 +54,7 @@
     {
       "id": "alert-invoker-command",
       "name": "InvokerCommand",
-      "template": "<nve-alert-group>\n  <nve-alert id=\"alert-1\">\n    Alert Notification Message 1\n    <nve-icon-button\n      commandfor=\"alert-1\"\n      command=\"--close\"\n      slot=\"actions\"\n      container=\"flat\"\n      icon-name=\"cancel\"\n      size=\"sm\"\n      aria-label=\"close\"\n    ></nve-icon-button>\n  </nve-alert>\n  <nve-alert id=\"alert-2\">\n    Alert Notification Message 2\n    <nve-icon-button\n      commandfor=\"alert-2\"\n      command=\"--close\"\n      slot=\"actions\"\n      container=\"flat\"\n      icon-name=\"cancel\"\n      size=\"sm\"\n      aria-label=\"close\"\n    ></nve-icon-button>\n  </nve-alert>\n</nve-alert-group>\n",
+      "template": "<nve-alert-group>\n  <nve-alert id=\"alert-1\">\n    Alert Notification Message 1\n    <nve-icon-button commandfor=\"alert-1\" command=\"--close\" slot=\"actions\" container=\"flat\" icon-name=\"cancel\" size=\"sm\" aria-label=\"close\"></nve-icon-button>\n  </nve-alert>\n  <nve-alert id=\"alert-2\">\n    Alert Notification Message 2\n    <nve-icon-button commandfor=\"alert-2\" command=\"--close\" slot=\"actions\" container=\"flat\" icon-name=\"cancel\" size=\"sm\" aria-label=\"close\"></nve-icon-button>\n  </nve-alert>\n</nve-alert-group>\n",
       "summary": "Dismissible alerts using the Invoker Command API for declarative close behavior. Use `commandfor` and `command=\"--close\"` on action buttons to dismiss individual alerts without custom JavaScript event handling.",
       "description": "",
       "composition": false,
@@ -81,7 +81,7 @@
     {
       "id": "alert-prominence",
       "name": "Prominence",
-      "template": "<nve-page document-scroll>\n  <nve-alert-group slot=\"header\" prominence=\"emphasis\" container=\"full\">\n    <nve-alert closable\n      ><span slot=\"prefix\">Standard</span> banner message\n      <a href=\"#\" nve-text=\"link\" slot=\"actions\">view details</a></nve-alert\n    >\n  </nve-alert-group>\n  <nve-alert-group slot=\"header\" status=\"accent\" prominence=\"emphasis\" container=\"full\">\n    <nve-alert closable\n      ><span slot=\"prefix\">Accent</span> banner message\n      <a href=\"#\" nve-text=\"link\" slot=\"actions\">view details</a></nve-alert\n    >\n  </nve-alert-group>\n  <nve-alert-group slot=\"header\" status=\"warning\" prominence=\"emphasis\" container=\"full\">\n    <nve-alert closable\n      ><span slot=\"prefix\">Warning</span> banner message\n      <a href=\"#\" nve-text=\"link\" slot=\"actions\">view details</a></nve-alert\n    >\n  </nve-alert-group>\n  <nve-alert-group slot=\"header\" status=\"success\" prominence=\"emphasis\" container=\"full\">\n    <nve-alert closable\n      ><span slot=\"prefix\">Success</span> banner message\n      <a href=\"#\" nve-text=\"link\" slot=\"actions\">view details</a></nve-alert\n    >\n  </nve-alert-group>\n  <nve-alert-group slot=\"header\" status=\"danger\" prominence=\"emphasis\" container=\"full\">\n    <nve-alert closable\n      ><span slot=\"prefix\">Danger</span> banner message\n      <a href=\"#\" nve-text=\"link\" slot=\"actions\">view details</a></nve-alert\n    >\n  </nve-alert-group>\n</nve-page>\n",
+      "template": "<nve-page document-scroll>\n  <nve-alert-group slot=\"header\" prominence=\"emphasis\" container=\"full\">\n    <nve-alert closable><span slot=\"prefix\">Standard</span> banner message <a href=\"#\" nve-text=\"link\" slot=\"actions\">view details</a></nve-alert>\n  </nve-alert-group>\n  <nve-alert-group slot=\"header\" status=\"accent\" prominence=\"emphasis\" container=\"full\">\n    <nve-alert closable><span slot=\"prefix\">Accent</span> banner message <a href=\"#\" nve-text=\"link\" slot=\"actions\">view details</a></nve-alert>\n  </nve-alert-group>\n  <nve-alert-group slot=\"header\" status=\"warning\" prominence=\"emphasis\" container=\"full\">\n    <nve-alert closable><span slot=\"prefix\">Warning</span> banner message <a href=\"#\" nve-text=\"link\" slot=\"actions\">view details</a></nve-alert>\n  </nve-alert-group>\n  <nve-alert-group slot=\"header\" status=\"success\" prominence=\"emphasis\" container=\"full\">\n    <nve-alert closable><span slot=\"prefix\">Success</span> banner message <a href=\"#\" nve-text=\"link\" slot=\"actions\">view details</a></nve-alert>\n  </nve-alert-group>\n  <nve-alert-group slot=\"header\" status=\"danger\" prominence=\"emphasis\" container=\"full\">\n    <nve-alert closable><span slot=\"prefix\">Danger</span> banner message <a href=\"#\" nve-text=\"link\" slot=\"actions\">view details</a></nve-alert>\n  </nve-alert-group>\n</nve-page>\n",
       "summary": "High-prominence alerts with emphasis styling for full-width banners. Use prominence=\"emphasis\" for system-wide announcements like maintenance windows, feature launches, or critical security updates that need max visibility and impact across the entire interface.",
       "description": "",
       "composition": false,
@@ -110,7 +110,7 @@
     {
       "id": "alert-custom-color-combinations",
       "name": "CustomColorCombinations",
-      "template": "<div nve-layout=\"column gap:md\">\n  <nve-alert-group color=\"blue-indigo\">\n    <nve-alert closable\n      >Custom <code nve-text=\"code\">color</code> will theme the <code nve-text=\"code\">closable</code> icon.</nve-alert\n    >\n  </nve-alert-group>\n  <nve-alert-group color=\"teal-seafoam\">\n    <nve-alert>\n      Custom <code nve-text=\"code\">color</code> is compatible with <code nve-text=\"code\">actions</code> button.\n      <nve-button slot=\"actions\" container=\"flat\">action</nve-button>\n    </nve-alert>\n  </nve-alert-group>\n  <nve-alert-group color=\"pink-rose\" status=\"accent\">\n    <nve-alert\n      >Combining custom <code nve-text=\"code\">color=\"pink-rose\"</code> with <code nve-text=\"code\">status</code> yields\n      the status icon with custom alert color.</nve-alert\n    >\n  </nve-alert-group>\n  <nve-alert-group color=\"pink-rose\" status=\"success\">\n    <nve-alert\n      >Combining custom <code nve-text=\"code\">color=\"pink-rose\"</code> with <code nve-text=\"code\">status</code> yields\n      the status icon with custom alert color.</nve-alert\n    >\n  </nve-alert-group>\n  <nve-alert-group color=\"pink-rose\" status=\"warning\">\n    <nve-alert\n      >Combining custom <code nve-text=\"code\">color=\"pink-rose\"</code> with <code nve-text=\"code\">status</code> yields\n      the status icon with custom alert color.</nve-alert\n    >\n  </nve-alert-group>\n  <nve-alert-group color=\"pink-rose\" status=\"danger\">\n    <nve-alert\n      >Combining custom <code nve-text=\"code\">color=\"pink-rose\"</code> with <code nve-text=\"code\">status</code> yields\n      the status icon with custom alert color.</nve-alert\n    >\n  </nve-alert-group>\n  <nve-alert-group color=\"blue-indigo\" status=\"accent\" prominence=\"emphasis\">\n    <nve-alert\n      >Combining custom <code nve-text=\"code\">color=\"blue-indigo\"</code> with <code nve-text=\"code\">status</code> and\n      <code nve-text=\"code\">prominence</code> yields the status icon with an <em>emphasized</em> custom alert\n      color.</nve-alert\n    >\n  </nve-alert-group>\n  <nve-alert-group color=\"blue-indigo\" status=\"success\" prominence=\"emphasis\">\n    <nve-alert\n      >Combining custom <code nve-text=\"code\">color=\"blue-indigo\"</code> with <code nve-text=\"code\">status</code> and\n      <code nve-text=\"code\">prominence</code> yields the status icon with an <em>emphasized</em> custom alert\n      color.</nve-alert\n    >\n  </nve-alert-group>\n  <nve-alert-group color=\"blue-indigo\" status=\"warning\" prominence=\"emphasis\">\n    <nve-alert\n      >Combining custom <code nve-text=\"code\">color=\"blue-indigo\"</code> with <code nve-text=\"code\">status</code> and\n      <code nve-text=\"code\">prominence</code> yields the status icon with an <em>emphasized</em> custom alert\n      color.</nve-alert\n    >\n  </nve-alert-group>\n  <nve-alert-group color=\"blue-indigo\" status=\"danger\" prominence=\"emphasis\">\n    <nve-alert\n      >Combining custom <code nve-text=\"code\">color=\"blue-indigo\"</code> with <code nve-text=\"code\">status</code> and\n      <code nve-text=\"code\">prominence</code> yields the status icon with an <em>emphasized</em> custom alert\n      color.</nve-alert\n    >\n  </nve-alert-group>\n</div>\n",
+      "template": "<div nve-layout=\"column gap:md\">\n  <nve-alert-group color=\"blue-indigo\">\n    <nve-alert closable>Custom <code nve-text=\"code\">color</code> will theme the <code nve-text=\"code\">closable</code> icon.</nve-alert>\n  </nve-alert-group>\n  <nve-alert-group color=\"teal-seafoam\">\n    <nve-alert>\n      Custom <code nve-text=\"code\">color</code> is compatible with <code nve-text=\"code\">actions</code> button.\n      <nve-button slot=\"actions\" container=\"flat\">action</nve-button>\n    </nve-alert>\n  </nve-alert-group>\n  <nve-alert-group color=\"pink-rose\" status=\"accent\">\n    <nve-alert>Combining custom <code nve-text=\"code\">color=\"pink-rose\"</code> with <code nve-text=\"code\">status</code> yields the status icon with custom alert color.</nve-alert>\n  </nve-alert-group>\n  <nve-alert-group color=\"pink-rose\" status=\"success\">\n    <nve-alert>Combining custom <code nve-text=\"code\">color=\"pink-rose\"</code> with <code nve-text=\"code\">status</code> yields the status icon with custom alert color.</nve-alert>\n  </nve-alert-group>\n  <nve-alert-group color=\"pink-rose\" status=\"warning\">\n    <nve-alert>Combining custom <code nve-text=\"code\">color=\"pink-rose\"</code> with <code nve-text=\"code\">status</code> yields the status icon with custom alert color.</nve-alert>\n  </nve-alert-group>\n  <nve-alert-group color=\"pink-rose\" status=\"danger\">\n    <nve-alert>Combining custom <code nve-text=\"code\">color=\"pink-rose\"</code> with <code nve-text=\"code\">status</code> yields the status icon with custom alert color.</nve-alert>\n  </nve-alert-group>\n  <nve-alert-group color=\"blue-indigo\" status=\"accent\" prominence=\"emphasis\">\n    <nve-alert\n      >Combining custom <code nve-text=\"code\">color=\"blue-indigo\"</code> with <code nve-text=\"code\">status</code> and <code nve-text=\"code\">prominence</code> yields the status icon with an <em>emphasized</em> custom\n      alert color.</nve-alert\n    >\n  </nve-alert-group>\n  <nve-alert-group color=\"blue-indigo\" status=\"success\" prominence=\"emphasis\">\n    <nve-alert\n      >Combining custom <code nve-text=\"code\">color=\"blue-indigo\"</code> with <code nve-text=\"code\">status</code> and <code nve-text=\"code\">prominence</code> yields the status icon with an <em>emphasized</em> custom\n      alert color.</nve-alert\n    >\n  </nve-alert-group>\n  <nve-alert-group color=\"blue-indigo\" status=\"warning\" prominence=\"emphasis\">\n    <nve-alert\n      >Combining custom <code nve-text=\"code\">color=\"blue-indigo\"</code> with <code nve-text=\"code\">status</code> and <code nve-text=\"code\">prominence</code> yields the status icon with an <em>emphasized</em> custom\n      alert color.</nve-alert\n    >\n  </nve-alert-group>\n  <nve-alert-group color=\"blue-indigo\" status=\"danger\" prominence=\"emphasis\">\n    <nve-alert\n      >Combining custom <code nve-text=\"code\">color=\"blue-indigo\"</code> with <code nve-text=\"code\">status</code> and <code nve-text=\"code\">prominence</code> yields the status icon with an <em>emphasized</em> custom\n      alert color.</nve-alert\n    >\n  </nve-alert-group>\n</div>\n",
       "summary": "Custom color combinations with status icons and prominence for advanced theming. Custom colors interact with status icons and emphasis styling, useful for maintaining brand consistency while preserving semantic meaning through status indicators.",
       "description": "",
       "composition": false,

package/dist/alert/alert2.js

@@ -28,7 +28,7 @@ var v = class extends m {
 	static {
 		this.metadata = {
 			tag: "nve-alert",
-			version: "2.8.0"
+			version: "2.9.0"
 		};
 	}
 	static {

package/dist/avatar/avatar-group2.js

@@ -10,7 +10,7 @@ var a = class extends r {
 	static {
 		this.metadata = {
 			tag: "nve-avatar-group",
-			version: "2.8.0"
+			version: "2.9.0"
 		};
 	}
 	render() {

package/dist/avatar/avatar2.js

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

package/dist/badge/badge.examples.json

@@ -99,7 +99,7 @@
     {
       "id": "badge-prominence",
       "name": "Prominence",
-      "template": "<div nve-layout=\"row gap:sm align:wrap\">\n  <nve-badge prominence=\"emphasis\" color=\"red-cardinal\"\n    ><nve-icon name=\"placeholder\"></nve-icon> red-cardinal</nve-badge\n  >\n  <nve-badge prominence=\"emphasis\" color=\"gray-slate\"><nve-icon name=\"placeholder\"></nve-icon> gray-slate</nve-badge>\n  <nve-badge prominence=\"emphasis\" color=\"gray-denim\"><nve-icon name=\"placeholder\"></nve-icon> gray-denim</nve-badge>\n  <nve-badge prominence=\"emphasis\" color=\"blue-indigo\"><nve-icon name=\"placeholder\"></nve-icon> blue-indigo</nve-badge>\n  <nve-badge prominence=\"emphasis\" color=\"blue-cobalt\"><nve-icon name=\"placeholder\"></nve-icon> blue-cobalt</nve-badge>\n  <nve-badge prominence=\"emphasis\" color=\"blue-sky\"><nve-icon name=\"placeholder\"></nve-icon> blue-sky</nve-badge>\n  <nve-badge prominence=\"emphasis\" color=\"teal-cyan\"><nve-icon name=\"placeholder\"></nve-icon> teal-cyan</nve-badge>\n  <nve-badge prominence=\"emphasis\" color=\"green-mint\"><nve-icon name=\"placeholder\"></nve-icon> green-mint</nve-badge>\n  <nve-badge prominence=\"emphasis\" color=\"teal-seafoam\"\n    ><nve-icon name=\"placeholder\"></nve-icon> teal-seafoam</nve-badge\n  >\n  <nve-badge prominence=\"emphasis\" color=\"green-grass\"><nve-icon name=\"placeholder\"></nve-icon> green-grass</nve-badge>\n  <nve-badge prominence=\"emphasis\" color=\"yellow-amber\"\n    ><nve-icon name=\"placeholder\"></nve-icon> yellow-amber</nve-badge\n  >\n  <nve-badge prominence=\"emphasis\" color=\"orange-pumpkin\"\n    ><nve-icon name=\"placeholder\"></nve-icon> orange-pumpkin</nve-badge\n  >\n  <nve-badge prominence=\"emphasis\" color=\"red-tomato\"><nve-icon name=\"placeholder\"></nve-icon> red-tomato</nve-badge>\n  <nve-badge prominence=\"emphasis\" color=\"pink-magenta\"\n    ><nve-icon name=\"placeholder\"></nve-icon> pink-magenta</nve-badge\n  >\n  <nve-badge prominence=\"emphasis\" color=\"purple-plum\"><nve-icon name=\"placeholder\"></nve-icon> purple-plum</nve-badge>\n  <nve-badge prominence=\"emphasis\" color=\"purple-violet\"\n    ><nve-icon name=\"placeholder\"></nve-icon> purple-violet</nve-badge\n  >\n  <nve-badge prominence=\"emphasis\" color=\"purple-lavender\"\n    ><nve-icon name=\"placeholder\"></nve-icon> purple-lavender</nve-badge\n  >\n  <nve-badge prominence=\"emphasis\" color=\"pink-rose\"><nve-icon name=\"placeholder\"></nve-icon> pink-rose</nve-badge>\n  <nve-badge prominence=\"emphasis\" color=\"green-jade\"><nve-icon name=\"placeholder\"></nve-icon> green-jade</nve-badge>\n  <nve-badge prominence=\"emphasis\" color=\"lime-pear\"><nve-icon name=\"placeholder\"></nve-icon> lime-pear</nve-badge>\n  <nve-badge prominence=\"emphasis\" color=\"yellow-nova\"><nve-icon name=\"placeholder\"></nve-icon> yellow-nova</nve-badge>\n  <nve-badge prominence=\"emphasis\" color=\"brand-green\"><nve-icon name=\"placeholder\"></nve-icon> brand-green</nve-badge>\n</div>\n",
+      "template": "<div nve-layout=\"row gap:sm align:wrap\">\n  <nve-badge prominence=\"emphasis\" color=\"red-cardinal\"><nve-icon name=\"placeholder\"></nve-icon> red-cardinal</nve-badge>\n  <nve-badge prominence=\"emphasis\" color=\"gray-slate\"><nve-icon name=\"placeholder\"></nve-icon> gray-slate</nve-badge>\n  <nve-badge prominence=\"emphasis\" color=\"gray-denim\"><nve-icon name=\"placeholder\"></nve-icon> gray-denim</nve-badge>\n  <nve-badge prominence=\"emphasis\" color=\"blue-indigo\"><nve-icon name=\"placeholder\"></nve-icon> blue-indigo</nve-badge>\n  <nve-badge prominence=\"emphasis\" color=\"blue-cobalt\"><nve-icon name=\"placeholder\"></nve-icon> blue-cobalt</nve-badge>\n  <nve-badge prominence=\"emphasis\" color=\"blue-sky\"><nve-icon name=\"placeholder\"></nve-icon> blue-sky</nve-badge>\n  <nve-badge prominence=\"emphasis\" color=\"teal-cyan\"><nve-icon name=\"placeholder\"></nve-icon> teal-cyan</nve-badge>\n  <nve-badge prominence=\"emphasis\" color=\"green-mint\"><nve-icon name=\"placeholder\"></nve-icon> green-mint</nve-badge>\n  <nve-badge prominence=\"emphasis\" color=\"teal-seafoam\"><nve-icon name=\"placeholder\"></nve-icon> teal-seafoam</nve-badge>\n  <nve-badge prominence=\"emphasis\" color=\"green-grass\"><nve-icon name=\"placeholder\"></nve-icon> green-grass</nve-badge>\n  <nve-badge prominence=\"emphasis\" color=\"yellow-amber\"><nve-icon name=\"placeholder\"></nve-icon> yellow-amber</nve-badge>\n  <nve-badge prominence=\"emphasis\" color=\"orange-pumpkin\"><nve-icon name=\"placeholder\"></nve-icon> orange-pumpkin</nve-badge>\n  <nve-badge prominence=\"emphasis\" color=\"red-tomato\"><nve-icon name=\"placeholder\"></nve-icon> red-tomato</nve-badge>\n  <nve-badge prominence=\"emphasis\" color=\"pink-magenta\"><nve-icon name=\"placeholder\"></nve-icon> pink-magenta</nve-badge>\n  <nve-badge prominence=\"emphasis\" color=\"purple-plum\"><nve-icon name=\"placeholder\"></nve-icon> purple-plum</nve-badge>\n  <nve-badge prominence=\"emphasis\" color=\"purple-violet\"><nve-icon name=\"placeholder\"></nve-icon> purple-violet</nve-badge>\n  <nve-badge prominence=\"emphasis\" color=\"purple-lavender\"><nve-icon name=\"placeholder\"></nve-icon> purple-lavender</nve-badge>\n  <nve-badge prominence=\"emphasis\" color=\"pink-rose\"><nve-icon name=\"placeholder\"></nve-icon> pink-rose</nve-badge>\n  <nve-badge prominence=\"emphasis\" color=\"green-jade\"><nve-icon name=\"placeholder\"></nve-icon> green-jade</nve-badge>\n  <nve-badge prominence=\"emphasis\" color=\"lime-pear\"><nve-icon name=\"placeholder\"></nve-icon> lime-pear</nve-badge>\n  <nve-badge prominence=\"emphasis\" color=\"yellow-nova\"><nve-icon name=\"placeholder\"></nve-icon> yellow-nova</nve-badge>\n  <nve-badge prominence=\"emphasis\" color=\"brand-green\"><nve-icon name=\"placeholder\"></nve-icon> brand-green</nve-badge>\n</div>\n",
       "summary": "High emphasis badges with custom colors for important or highlighted content. Use for highlighting critical information.",
       "description": "",
       "composition": false,
@@ -108,7 +108,7 @@
     {
       "id": "badge-flat",
       "name": "Flat",
-      "template": "<div nve-layout=\"row gap:sm align:wrap\">\n  <nve-badge container=\"flat\" color=\"red-cardinal\"><nve-icon name=\"placeholder\"></nve-icon> red-cardinal</nve-badge>\n  <nve-badge container=\"flat\" color=\"gray-slate\"><nve-icon name=\"placeholder\"></nve-icon> gray-slate</nve-badge>\n  <nve-badge container=\"flat\" color=\"gray-denim\"><nve-icon name=\"placeholder\"></nve-icon> gray-denim</nve-badge>\n  <nve-badge container=\"flat\" color=\"blue-indigo\"><nve-icon name=\"placeholder\"></nve-icon> blue-indigo</nve-badge>\n  <nve-badge container=\"flat\" color=\"blue-cobalt\"><nve-icon name=\"placeholder\"></nve-icon> blue-cobalt</nve-badge>\n  <nve-badge container=\"flat\" color=\"blue-sky\"><nve-icon name=\"placeholder\"></nve-icon> blue-sky</nve-badge>\n  <nve-badge container=\"flat\" color=\"teal-cyan\"><nve-icon name=\"placeholder\"></nve-icon> teal-cyan</nve-badge>\n  <nve-badge container=\"flat\" color=\"green-mint\"><nve-icon name=\"placeholder\"></nve-icon> green-mint</nve-badge>\n  <nve-badge container=\"flat\" color=\"teal-seafoam\"><nve-icon name=\"placeholder\"></nve-icon> teal-seafoam</nve-badge>\n  <nve-badge container=\"flat\" color=\"green-grass\"><nve-icon name=\"placeholder\"></nve-icon> green-grass</nve-badge>\n  <nve-badge container=\"flat\" color=\"yellow-amber\"><nve-icon name=\"placeholder\"></nve-icon> yellow-amber</nve-badge>\n  <nve-badge container=\"flat\" color=\"orange-pumpkin\"><nve-icon name=\"placeholder\"></nve-icon> orange-pumpkin</nve-badge>\n  <nve-badge container=\"flat\" color=\"red-tomato\"><nve-icon name=\"placeholder\"></nve-icon> red-tomato</nve-badge>\n  <nve-badge container=\"flat\" color=\"pink-magenta\"><nve-icon name=\"placeholder\"></nve-icon> pink-magenta</nve-badge>\n  <nve-badge container=\"flat\" color=\"purple-plum\"><nve-icon name=\"placeholder\"></nve-icon> purple-plum</nve-badge>\n  <nve-badge container=\"flat\" color=\"purple-violet\"><nve-icon name=\"placeholder\"></nve-icon> purple-violet</nve-badge>\n  <nve-badge container=\"flat\" color=\"purple-lavender\"\n    ><nve-icon name=\"placeholder\"></nve-icon> purple-lavender</nve-badge\n  >\n  <nve-badge container=\"flat\" color=\"pink-rose\"><nve-icon name=\"placeholder\"></nve-icon> pink-rose</nve-badge>\n  <nve-badge container=\"flat\" color=\"green-jade\"><nve-icon name=\"placeholder\"></nve-icon> green-jade</nve-badge>\n  <nve-badge container=\"flat\" color=\"lime-pear\"><nve-icon name=\"placeholder\"></nve-icon> lime-pear</nve-badge>\n  <nve-badge container=\"flat\" color=\"yellow-nova\"><nve-icon name=\"placeholder\"></nve-icon> yellow-nova</nve-badge>\n  <nve-badge container=\"flat\" color=\"brand-green\"><nve-icon name=\"placeholder\"></nve-icon> brand-green</nve-badge>\n</div>\n",
+      "template": "<div nve-layout=\"row gap:sm align:wrap\">\n  <nve-badge container=\"flat\" color=\"red-cardinal\"><nve-icon name=\"placeholder\"></nve-icon> red-cardinal</nve-badge>\n  <nve-badge container=\"flat\" color=\"gray-slate\"><nve-icon name=\"placeholder\"></nve-icon> gray-slate</nve-badge>\n  <nve-badge container=\"flat\" color=\"gray-denim\"><nve-icon name=\"placeholder\"></nve-icon> gray-denim</nve-badge>\n  <nve-badge container=\"flat\" color=\"blue-indigo\"><nve-icon name=\"placeholder\"></nve-icon> blue-indigo</nve-badge>\n  <nve-badge container=\"flat\" color=\"blue-cobalt\"><nve-icon name=\"placeholder\"></nve-icon> blue-cobalt</nve-badge>\n  <nve-badge container=\"flat\" color=\"blue-sky\"><nve-icon name=\"placeholder\"></nve-icon> blue-sky</nve-badge>\n  <nve-badge container=\"flat\" color=\"teal-cyan\"><nve-icon name=\"placeholder\"></nve-icon> teal-cyan</nve-badge>\n  <nve-badge container=\"flat\" color=\"green-mint\"><nve-icon name=\"placeholder\"></nve-icon> green-mint</nve-badge>\n  <nve-badge container=\"flat\" color=\"teal-seafoam\"><nve-icon name=\"placeholder\"></nve-icon> teal-seafoam</nve-badge>\n  <nve-badge container=\"flat\" color=\"green-grass\"><nve-icon name=\"placeholder\"></nve-icon> green-grass</nve-badge>\n  <nve-badge container=\"flat\" color=\"yellow-amber\"><nve-icon name=\"placeholder\"></nve-icon> yellow-amber</nve-badge>\n  <nve-badge container=\"flat\" color=\"orange-pumpkin\"><nve-icon name=\"placeholder\"></nve-icon> orange-pumpkin</nve-badge>\n  <nve-badge container=\"flat\" color=\"red-tomato\"><nve-icon name=\"placeholder\"></nve-icon> red-tomato</nve-badge>\n  <nve-badge container=\"flat\" color=\"pink-magenta\"><nve-icon name=\"placeholder\"></nve-icon> pink-magenta</nve-badge>\n  <nve-badge container=\"flat\" color=\"purple-plum\"><nve-icon name=\"placeholder\"></nve-icon> purple-plum</nve-badge>\n  <nve-badge container=\"flat\" color=\"purple-violet\"><nve-icon name=\"placeholder\"></nve-icon> purple-violet</nve-badge>\n  <nve-badge container=\"flat\" color=\"purple-lavender\"><nve-icon name=\"placeholder\"></nve-icon> purple-lavender</nve-badge>\n  <nve-badge container=\"flat\" color=\"pink-rose\"><nve-icon name=\"placeholder\"></nve-icon> pink-rose</nve-badge>\n  <nve-badge container=\"flat\" color=\"green-jade\"><nve-icon name=\"placeholder\"></nve-icon> green-jade</nve-badge>\n  <nve-badge container=\"flat\" color=\"lime-pear\"><nve-icon name=\"placeholder\"></nve-icon> lime-pear</nve-badge>\n  <nve-badge container=\"flat\" color=\"yellow-nova\"><nve-icon name=\"placeholder\"></nve-icon> yellow-nova</nve-badge>\n  <nve-badge container=\"flat\" color=\"brand-green\"><nve-icon name=\"placeholder\"></nve-icon> brand-green</nve-badge>\n</div>\n",
       "summary": "Flat container badges with custom colors for a minimal, borderless appearance. Ideal for subtle categorization or when you want to reduce visual noise.",
       "description": "",
       "composition": false,

package/dist/badge/badge2.js

@@ -25,7 +25,7 @@ var g = class extends f {
 	static {
 		this.metadata = {
 			tag: "nve-badge",
-			version: "2.8.0"
+			version: "2.9.0"
 		};
 	}
 	static {

package/dist/breadcrumb/breadcrumb.examples.json

@@ -14,7 +14,7 @@
     {
       "id": "breadcrumb-with-icon-button",
       "name": "WithIconButton",
-      "template": "<nve-breadcrumb>\n  <nve-icon-button icon-name=\"home\" size=\"sm\"\n    ><a href=\"#\" target=\"_self\" aria-label=\"link to first page\"></a\n  ></nve-icon-button>\n  <nve-button><a href=\"#\" target=\"_self\">Item 1</a></nve-button>\n  <nve-button><a href=\"#\" target=\"_self\">Item 2</a></nve-button>\n  <span>You Are Here</span>\n</nve-breadcrumb>\n",
+      "template": "<nve-breadcrumb>\n  <nve-icon-button icon-name=\"home\" size=\"sm\"><a href=\"#\" target=\"_self\" aria-label=\"link to first page\"></a></nve-icon-button>\n  <nve-button><a href=\"#\" target=\"_self\">Item 1</a></nve-button>\n  <nve-button><a href=\"#\" target=\"_self\">Item 2</a></nve-button>\n  <span>You Are Here</span>\n</nve-breadcrumb>\n",
       "summary": "Breadcrumb with home icon button for quick navigation to the root page, offering a compact starting point.",
       "description": "",
       "composition": true,

package/dist/breadcrumb/breadcrumb2.js

@@ -24,7 +24,7 @@ var m = class extends u {
 	static {
 		this.metadata = {
 			tag: "nve-breadcrumb",
-			version: "2.8.0"
+			version: "2.9.0"
 		};
 	}
 	static {

package/dist/bundle.d.ts

@@ -67,6 +67,7 @@ import '@nvidia-elements/core/toggletip/define.js';
 import '@nvidia-elements/core/toolbar/define.js';
 import '@nvidia-elements/core/tooltip/define.js';
 import '@nvidia-elements/core/tree/define.js';
+import '@nvidia-elements/core/viewport/define.js';
 import '@nvidia-elements/core/week/define.js';
 export * from '@nvidia-elements/core/accordion';
 export * from '@nvidia-elements/core/alert';
@@ -137,4 +138,5 @@ export * from '@nvidia-elements/core/toggletip';
 export * from '@nvidia-elements/core/toolbar';
 export * from '@nvidia-elements/core/tooltip';
 export * from '@nvidia-elements/core/tree';
+export * from '@nvidia-elements/core/viewport';
 export * from '@nvidia-elements/core/week';

package/dist/bundles/index.d.ts

@@ -78,6 +78,19 @@ export interface RenderOptions {
 	 */
 	isConnected?: boolean;
 }
+/** Coordinates and deltas use CSS pixels; movement is sample-relative and total displacement is start-relative. */
+export interface PointerMovementGesture {
+	readonly event: PointerEvent;
+	readonly clientX: number;
+	readonly clientY: number;
+	readonly movementX: number;
+	readonly movementY: number;
+	readonly startClientX: number;
+	readonly startClientY: number;
+	readonly totalDisplacementX: number;
+	readonly totalDisplacementY: number;
+}
+export type PointerEndReason = "up" | "cancel" | "lost-capture" | "buttons-released";
 export interface I18nStrings {
 	close: string;
 	copy: string;
@@ -5155,6 +5168,8 @@ export declare class TabsGroup extends LitElement {
  * @documentation https://nvidia.github.io/elements/docs/elements/textarea/
  * @since 0.3.0
  * @entrypoint \@nvidia-elements/core/textarea
+ * @slot prefix - Content to display before the textarea.
+ * @slot suffix - Content to display after the textarea.
  * @cssprop --padding
  * @cssprop --font-size
  * @cssprop --height
@@ -5169,6 +5184,10 @@ export declare class TabsGroup extends LitElement {
  */
 export declare class Textarea extends Control {
 	static styles: CSSResult[];
+	/** @private */
+	protected get prefixContent(): TemplateResult<1>;
+	/** @private */
+	protected get suffixContent(): TemplateResult<1>;
 	static readonly metadata: {
 		tag: string;
 		version: string;
@@ -5535,6 +5554,198 @@ export declare class Tree extends LitElement {
 	disconnectedCallback(): void;
 	updated(props: PropertyValues<this>): Promise<void>;
 }
+export interface ViewportTransform {
+	readonly x: number;
+	readonly y: number;
+	readonly scale: number;
+}
+export interface ViewportPoint {
+	readonly x: number;
+	readonly y: number;
+}
+export interface ViewportRect extends ViewportPoint {
+	readonly width: number;
+	readonly height: number;
+}
+export type ViewportPanBehavior = boolean | "space";
+export interface ViewportPointerPanDetail extends PointerMovementGesture {
+	readonly source: "pointer";
+	readonly start: ViewportTransform;
+	readonly next: ViewportTransform;
+}
+export interface ViewportWheelPanDetail {
+	readonly source: "wheel";
+	readonly event: WheelEvent;
+	readonly clientX: number;
+	readonly clientY: number;
+	readonly deltaX: number;
+	readonly deltaY: number;
+	readonly start: ViewportTransform;
+	readonly next: ViewportTransform;
+}
+export interface ViewportDiscretePanDetail {
+	readonly source: "keyboard" | "command";
+	readonly event: KeyboardEvent | CommandEvent;
+	readonly start: ViewportTransform;
+	readonly next: ViewportTransform;
+}
+export type ViewportPanDetail = ViewportPointerPanDetail | ViewportWheelPanDetail | ViewportDiscretePanDetail;
+export type ViewportPanEndReason = PointerEndReason | "pinch";
+export interface ViewportPanEndDetail {
+	readonly source: "pointer";
+	readonly event: PointerEvent;
+	readonly interrupted: boolean;
+	readonly reason: ViewportPanEndReason;
+	readonly start: ViewportTransform;
+	readonly transform: ViewportTransform;
+}
+export interface ViewportZoomDetail {
+	readonly source: "wheel" | "pinch" | "keyboard" | "command";
+	readonly event: WheelEvent | PointerEvent | KeyboardEvent | CommandEvent;
+	readonly clientX: number;
+	readonly clientY: number;
+	readonly anchor: ViewportPoint;
+	readonly factor: number;
+	readonly start: ViewportTransform;
+	readonly next: ViewportTransform;
+}
+export interface ViewportAnimationOptions {
+	readonly duration?: number;
+}
+export interface ViewportRevealOptions {
+	/** Uniform CSS-pixel inset reserved around the revealed bounds. */
+	readonly inset?: number;
+	readonly scale?: number;
+	readonly animated?: boolean;
+	readonly duration?: number;
+}
+/**
+ * @element nve-viewport
+ * @description A viewport provides a spatial surface for arbitrary content, with optional pan and zoom navigation.
+ * @documentation https://nvidia.github.io/elements/docs/elements/viewport/
+ * @since 0.0.0
+ * @entrypoint \@nvidia-elements/core/viewport
+ * @slot - Content positioned in the viewport's infinite content space.
+ * @slot background - Custom content rendered behind viewport content and excluded from content fitting
+ * @event panstart - Dispatched when pointer movement crosses the pan threshold. Cancel to disable built-in pointer panning for the sequence.
+ * @event pan - Dispatched when pointer, wheel, keyboard, or command input requests a pan. Cancel to skip the proposed transform mutation.
+ * @event panend - Dispatched when a pointer pan ends, including its terminal reason.
+ * @event zoom - Dispatched when wheel, pinch, or command input requests a scale change. Cancel to skip the proposed transform mutation.
+ * @event viewportchange - Dispatched once after a render that commits one or more viewport transform changes.
+ * @cssprop --background - Background color of the fixed viewport area.
+ * @cssprop --min-height
+ * @cssprop --pan-cursor - Cursor shown over a background eligible for primary-pointer panning.
+ * @cssprop --panning-cursor - Cursor shown while a pointer pan is active.
+ * @command --pan-left - With behavior-pan enabled, pans left by one discrete step.
+ * @command --pan-right - With behavior-pan enabled, pans right by one discrete step.
+ * @command --pan-up - With behavior-pan enabled, pans up by one discrete step.
+ * @command --pan-down - With behavior-pan enabled, pans down by one discrete step.
+ * @command --zoom-in - With behavior-zoom enabled, animates to the next permitted scale step.
+ * @command --zoom-out - With behavior-zoom enabled, animates to the previous permitted scale step.
+ * @command --zoom-reset - With behavior-zoom enabled, animates to 100% scale.
+ * @command --zoom-to-fit - With behavior-zoom enabled, animates to fit direct default-slot element boxes.
+ * @stable false
+ */
+export declare class Viewport extends LitElement {
+	#private;
+	static styles: CSSResult[];
+	static readonly metadata: {
+		tag: string;
+		version: string;
+	};
+	/** @private */
+	_internals: ElementInternals;
+	private internalHost;
+	constructor();
+	/** Horizontal content-space coordinate at the viewport origin. */
+	get x(): number;
+	set x(value: number);
+	/** Vertical content-space coordinate at the viewport origin. */
+	get y(): number;
+	set y(value: number);
+	/** Content-to-viewport CSS-pixel scale. */
+	get scale(): number;
+	set scale(value: number);
+	/** Inclusive lower scale limit. */
+	get minScale(): number;
+	set minScale(value: number);
+	/** Inclusive upper scale limit. */
+	get maxScale(): number;
+	set maxScale(value: number);
+	/** Enables panning by pointer, focused wheel, focused keyboard, and Invoker commands; requires Space for primary-pointer dragging when set to space. */
+	get behaviorPan(): ViewportPanBehavior;
+	set behaviorPan(value: ViewportPanBehavior | null | undefined);
+	/** Enables zooming by pinch, focused modified wheel, focused keyboard, and Invoker commands. */
+	behaviorZoom: boolean;
+	/** Fits measurable direct default-slot content once after initial layout. */
+	autoFit: boolean;
+	/** Default uniform CSS-pixel inset reserved around bounds when fitting content. */
+	get fitInset(): number;
+	set fitInset(value: number);
+	/** CSS-pixel pointer movement required before a pointer pan begins. */
+	get dragThreshold(): number;
+	set dragThreshold(value: number);
+	connectedCallback(): void;
+	disconnectedCallback(): void;
+	protected updated(changed: PropertyValues<this>): void;
+	render(): TemplateResult<1>;
+	/** Converts a content-space point to viewport CSS pixels. */
+	toViewportCoords(contentX: number, contentY: number): ViewportPoint;
+	/** Converts a viewport CSS-pixel point to content space. */
+	toContentCoords(viewportX: number, viewportY: number): ViewportPoint;
+	/** Returns the current content-space origin and CSS-pixel scale. */
+	getTransform(): ViewportTransform;
+	/** Returns the visible content-space rectangle. */
+	getVisibleRect(): ViewportRect;
+	/** Animates the viewport to the requested partial transform. */
+	animateTo(target: Partial<ViewportTransform>, options?: ViewportAnimationOptions): void;
+	/** Centers or fits a content-space region within the viewport. */
+	reveal(region: {
+		x: number;
+		y: number;
+		width?: number;
+		height?: number;
+	}, options?: ViewportRevealOptions): void;
+	/** Fits the union of direct default-slot element boxes within the viewport. */
+	fitContents(options?: ViewportRevealOptions): void;
+}
+/**
+ * @element nve-viewport-gridlines
+ * @description Renders origin-stable, zoom-adaptive gridlines behind viewport content.
+ * @documentation https://nvidia.github.io/elements/docs/elements/viewport/
+ * @since 0.0.0
+ * @entrypoint \@nvidia-elements/core/viewport
+ * @cssprop --color - Sets the gridline stroke color.
+ * @cssprop --line-width - Sets the approximate stroke width in CSS pixels.
+ */
+export declare class ViewportGridlines extends LitElement {
+	#private;
+	static styles: CSSResult[];
+	static readonly metadata: {
+		tag: string;
+		version: string;
+	};
+	/** @private */
+	slot: string;
+	/** @private */
+	protected accessibilityHidden: string;
+	/** Smallest gridline interval in content-space units. */
+	get step(): number;
+	set step(value: number);
+	/** Content-space x coordinate of the grid origin. */
+	get originX(): number;
+	set originX(value: number);
+	/** Content-space y coordinate of the grid origin. */
+	get originY(): number;
+	set originY(value: number);
+	/** Target on-screen separation used to choose the adaptive gridline interval, in CSS pixels. */
+	get targetSpacing(): number;
+	set targetSpacing(value: number);
+	connectedCallback(): void;
+	disconnectedCallback(): void;
+	protected willUpdate(changed: PropertyValues<this>): void;
+	render(): typeof nothing | TemplateResult<1>;
+}
 /**
  * @element nve-week
  * @description A week picker is a control that enables users to choose a week value.