@nvidia-elements/core 2.0.2 → 2.0.3

package/dist/progressive-filter-chip/progressive-filter-chip.examples.js.map

@@ -1 +1 @@
-{"version":3,"file":"progressive-filter-chip.examples.js","names":[],"sources":["../../src/progressive-filter-chip/progressive-filter-chip.examples.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html } from 'lit';\nimport '@nvidia-elements/core/progressive-filter-chip/define.js';\nimport '@nvidia-elements/core/input/define.js';\nimport '@nvidia-elements/core/card/define.js';\nimport '@nvidia-elements/core/select/define.js';\n\nexport default {\n  title: 'Elements/Progressive Filter Chip',\n  component: 'nve-progressive-filter-chip',\n};\n\n/**\n * @summary Basic progressive filter chip with cascading select dropdowns for multi-criteria filtering.\n */\nexport const Default = {\n  render: () => html`\n    <nve-progressive-filter-chip closable>\n      <nve-select>\n        <select aria-label=\"dataset\">\n          <option>workload</option>\n          <option selected>instance</option>\n        </select>\n      </nve-select>\n      <nve-select>\n        <select aria-label=\"condition\">\n          <option>sort by</option>\n          <option selected>filter by</option>\n        </select>\n      </nve-select>\n      <nve-select>\n        <select aria-label=\"filter\">\n          <option selected>utilization</option>\n          <option>status</option>\n        </select>\n      </nve-select>\n    </nve-progressive-filter-chip>\n  `\n}\n\n/**\n * @summary Progressive filter chip with proper layer stacking within dropdown contexts.\n */\nexport const Layer = {\n  render: () => html`\n    <nve-progressive-filter-chip closable>\n      <nve-select>\n        <select aria-label=\"dataset\">\n          <option>workload</option>\n          <option selected>instance</option>\n        </select>\n      </nve-select>\n      <nve-select>\n        <select aria-label=\"condition\">\n          <option>sort by</option>\n          <option selected>filter by</option>\n        </select>\n      </nve-select>\n      <nve-select>\n        <select aria-label=\"filter\">\n          <option selected>utilization</option>\n          <option>status</option>\n        </select>\n      </nve-select>\n    </nve-progressive-filter-chip>\n  `\n}\n\n/**\n * @summary Progressive filter chip with multi-select dropdown for filtering by many values simultaneously.\n */\nexport const Multiple = {\nrender: () => html`\n    <nve-progressive-filter-chip closable>\n      <nve-select>\n        <select aria-label=\"dataset\">\n          <option selected>status</option>\n          <option>workload</option>\n        </select>\n      </nve-select>\n      <nve-select>\n        <select aria-label=\"condition\">\n          <option selected>filter by</option>\n          <option>sort by</option>\n        </select>\n      </nve-select>\n      <nve-select>\n        <select multiple aria-label=\"filter\">\n          <option selected>progress</option>\n          <option>pending</option>\n          <option>success</option>\n          <option>failed</option>\n        </select>\n      </nve-select>\n    </nve-progressive-filter-chip>\n  `\n}\n\n/**\n * @summary Progressive filter chip with numeric text input for threshold-based filtering (greater than, less than).\n */\nexport const TextInput = {\n  render: () => html`\n    <nve-progressive-filter-chip closable>\n      <nve-select>\n        <select aria-label=\"dataset\">\n          <option selected>memory</option>\n          <option>CPU</option>\n        </select>\n      </nve-select>\n      <nve-select>\n        <select aria-label=\"condition\">\n          <option selected>greater than</option>\n          <option>less than</option>\n          <option>equal to</option>\n        </select>\n      </nve-select>\n      <nve-input>\n        <input type=\"number\" min=\"0\" max=\"100\" value=\"50\" aria-label=\"filter\" />\n      </nve-input>\n    </nve-progressive-filter-chip>\n  `\n}\n\n/**\n * @summary Progressive filter chip with date picker inputs for filtering by date range criteria.\n */\nexport const DateRange = {\n  render: () => html`\n    <nve-progressive-filter-chip>\n      <nve-select>\n        <select aria-label=\"date type\">\n          <option>recording date</option>\n          <option>process date</option>\n        </select>\n      </nve-select>\n      <nve-date>\n        <input type=\"date\" value=\"2022-05-11\" aria-label=\"start date\" />\n      </nve-date>\n      <nve-date>\n        <input type=\"date\" value=\"2022-12-07\" aria-label=\"end date\" />\n      </nve-date>\n    </nve-progressive-filter-chip>\n    `\n}\n\n/**\n * @summary Progressive filter chip with custom button trigger opening a map coordinate picker dropdown.\n */\nexport const Custom = {\n  render: () => html`\n    <nve-progressive-filter-chip closable>\n      <nve-select>\n        <select aria-label=\"dataset\">\n          <option>GPS</option>\n          <option selected>Cellular</option>\n        </select>\n      </nve-select>\n      <nve-select>\n        <select aria-label=\"condition\">\n          <option>contains</option>\n          <option>excludes</option>\n        </select>\n      </nve-select>\n      <nve-button style=\"width: 190px\" popovertarget=\"map-dropdown\">37.3706254,-121.9671894</nve-button>\n    </nve-progressive-filter-chip>\n    <nve-dropdown id=\"map-dropdown\">\n      <nve-input>\n        <nve-icon-button icon-name=\"map-pin\" readonly></nve-icon-button>\n        <input value=\"37.3706254,-121.9671894\" disabled aria-label=\"map coordinates\" />\n      </nve-input>\n      <img src=\"static/images/test-map-2.webp\" width=\"300px\" alt=\"non-interactive demo map\" />\n    </nve-dropdown>\n  `\n}\n\n/**\n * @summary Progressive filter chip with input validation states showing required field and error styling.\n */\nexport const Validation = {\n  render: () => html`\n<div nve-layout=\"column gap:lg\">\n  <nve-progressive-filter-chip closable>\n    <nve-input>\n      <input type=\"text\" value=\"validation\" required aria-label=\"validation\" />\n      <nve-control-message error=\"valueMissing\">required</nve-control-message>\n    </nve-input>\n    <nve-input>\n      <input type=\"text\" aria-label=\"validation\" />\n    </nve-input>\n  </nve-progressive-filter-chip>\n\n  <nve-progressive-filter-chip closable>\n    <nve-input status=\"error\">\n      <input type=\"text\" value=\"manual validation\" formnovalidate aria-label=\"manual validation\" />\n    </nve-input>\n    <nve-input>\n      <input type=\"text\" aria-label=\"validation\" />\n    </nve-input>\n  </nve-progressive-filter-chip>\n</div>\n  `\n}\n"],"mappings":";AAGA,IAAA,IAAS"}
+{"version":3,"file":"progressive-filter-chip.examples.js","names":[],"sources":["../../src/progressive-filter-chip/progressive-filter-chip.examples.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html } from 'lit';\nimport '@nvidia-elements/core/progressive-filter-chip/define.js';\nimport '@nvidia-elements/core/input/define.js';\nimport '@nvidia-elements/core/card/define.js';\nimport '@nvidia-elements/core/select/define.js';\n\nexport default {\n  title: 'Elements/Progressive Filter Chip',\n  component: 'nve-progressive-filter-chip',\n};\n\n/**\n * @summary Basic progressive filter chip with cascading select dropdowns for multi-criteria filtering.\n */\nexport const Default = {\n  render: () => html`\n    <nve-progressive-filter-chip closable>\n      <nve-select>\n        <select aria-label=\"dataset\">\n          <option>workload</option>\n          <option selected>instance</option>\n        </select>\n      </nve-select>\n      <nve-select>\n        <select aria-label=\"condition\">\n          <option>sort by</option>\n          <option selected>filter by</option>\n        </select>\n      </nve-select>\n      <nve-select>\n        <select aria-label=\"filter\">\n          <option selected>utilization</option>\n          <option>status</option>\n        </select>\n      </nve-select>\n    </nve-progressive-filter-chip>\n  `\n}\n\n/**\n * @summary Progressive filter chip with proper layer stacking within dropdown contexts.\n */\nexport const Layer = {\n  render: () => html`\n    <nve-progressive-filter-chip closable>\n      <nve-select>\n        <select aria-label=\"dataset\">\n          <option>workload</option>\n          <option selected>instance</option>\n        </select>\n      </nve-select>\n      <nve-select>\n        <select aria-label=\"condition\">\n          <option>sort by</option>\n          <option selected>filter by</option>\n        </select>\n      </nve-select>\n      <nve-select>\n        <select aria-label=\"filter\">\n          <option selected>utilization</option>\n          <option>status</option>\n        </select>\n      </nve-select>\n    </nve-progressive-filter-chip>\n  `\n}\n\n/**\n * @summary Progressive filter chip with multi-select dropdown for filtering by many values simultaneously.\n */\nexport const Multiple = {\nrender: () => html`\n    <nve-progressive-filter-chip closable>\n      <nve-select>\n        <select aria-label=\"dataset\">\n          <option selected>status</option>\n          <option>workload</option>\n        </select>\n      </nve-select>\n      <nve-select>\n        <select aria-label=\"condition\">\n          <option selected>filter by</option>\n          <option>sort by</option>\n        </select>\n      </nve-select>\n      <nve-select>\n        <select multiple aria-label=\"filter\">\n          <option selected>progress</option>\n          <option>pending</option>\n          <option>success</option>\n          <option>failed</option>\n        </select>\n      </nve-select>\n    </nve-progressive-filter-chip>\n  `\n}\n\n/**\n * @summary Progressive filter chip with numeric text input for threshold-based filtering (greater than, less than).\n */\nexport const TextInput = {\n  render: () => html`\n    <nve-progressive-filter-chip closable>\n      <nve-select>\n        <select aria-label=\"dataset\">\n          <option selected>memory</option>\n          <option>CPU</option>\n        </select>\n      </nve-select>\n      <nve-select>\n        <select aria-label=\"condition\">\n          <option selected>greater than</option>\n          <option>less than</option>\n          <option>equal to</option>\n        </select>\n      </nve-select>\n      <nve-input>\n        <input type=\"number\" min=\"0\" max=\"100\" value=\"50\" aria-label=\"filter\" />\n      </nve-input>\n    </nve-progressive-filter-chip>\n  `\n}\n\n/**\n * @summary Progressive filter chip with date picker inputs for filtering by date range criteria.\n */\nexport const DateRange = {\n  render: () => html`\n    <nve-progressive-filter-chip>\n      <nve-select>\n        <select aria-label=\"date type\">\n          <option>recording date</option>\n          <option>process date</option>\n        </select>\n      </nve-select>\n      <nve-date>\n        <input type=\"date\" value=\"2022-05-11\" aria-label=\"start date\" />\n      </nve-date>\n      <nve-date>\n        <input type=\"date\" value=\"2022-12-07\" aria-label=\"end date\" />\n      </nve-date>\n    </nve-progressive-filter-chip>\n    `\n}\n\n/**\n * @summary Progressive filter chip with custom button trigger opening a map coordinate picker dropdown.\n */\nexport const Custom = {\n  render: () => html`\n    <nve-progressive-filter-chip closable>\n      <nve-select>\n        <select aria-label=\"dataset\">\n          <option>GPS</option>\n          <option selected>Cellular</option>\n        </select>\n      </nve-select>\n      <nve-select>\n        <select aria-label=\"condition\">\n          <option>contains</option>\n          <option>excludes</option>\n        </select>\n      </nve-select>\n      <nve-button style=\"width: 190px\" popovertarget=\"map-dropdown\">37.3706254,-121.9671894</nve-button>\n    </nve-progressive-filter-chip>\n    <nve-dropdown id=\"map-dropdown\">\n      <nve-input>\n        <nve-icon-button icon-name=\"map-pin\" readonly></nve-icon-button>\n        <input value=\"37.3706254,-121.9671894\" disabled aria-label=\"map coordinates\" />\n      </nve-input>\n      <img src=\"/static/images/test-map-2.webp\" width=\"300px\" alt=\"non-interactive demo map\" />\n    </nve-dropdown>\n  `\n}\n\n/**\n * @summary Progressive filter chip with input validation states showing required field and error styling.\n */\nexport const Validation = {\n  render: () => html`\n<div nve-layout=\"column gap:lg\">\n  <nve-progressive-filter-chip closable>\n    <nve-input>\n      <input type=\"text\" value=\"validation\" required aria-label=\"validation\" />\n      <nve-control-message error=\"valueMissing\">required</nve-control-message>\n    </nve-input>\n    <nve-input>\n      <input type=\"text\" aria-label=\"validation\" />\n    </nve-input>\n  </nve-progressive-filter-chip>\n\n  <nve-progressive-filter-chip closable>\n    <nve-input status=\"error\">\n      <input type=\"text\" value=\"manual validation\" formnovalidate aria-label=\"manual validation\" />\n    </nve-input>\n    <nve-input>\n      <input type=\"text\" aria-label=\"validation\" />\n    </nve-input>\n  </nve-progressive-filter-chip>\n</div>\n  `\n}\n"],"mappings":";AAGA,IAAA,IAAS"}

package/dist/progressive-filter-chip/progressive-filter-chip.examples.json

@@ -50,7 +50,7 @@
     {
       "id": "progressive-filter-chip-custom",
       "name": "Custom",
-      "template": "<nve-progressive-filter-chip closable>\n  <nve-select>\n    <select aria-label=\"dataset\">\n      <option>GPS</option>\n      <option selected>Cellular</option>\n    </select>\n  </nve-select>\n  <nve-select>\n    <select aria-label=\"condition\">\n      <option>contains</option>\n      <option>excludes</option>\n    </select>\n  </nve-select>\n  <nve-button style=\"width: 190px\" popovertarget=\"map-dropdown\">37.3706254,-121.9671894</nve-button>\n</nve-progressive-filter-chip>\n<nve-dropdown id=\"map-dropdown\">\n  <nve-input>\n    <nve-icon-button icon-name=\"map-pin\" readonly></nve-icon-button>\n    <input value=\"37.3706254,-121.9671894\" disabled aria-label=\"map coordinates\" />\n  </nve-input>\n  <img src=\"static/images/test-map-2.webp\" width=\"300px\" alt=\"non-interactive demo map\" />\n</nve-dropdown>\n",
+      "template": "<nve-progressive-filter-chip closable>\n  <nve-select>\n    <select aria-label=\"dataset\">\n      <option>GPS</option>\n      <option selected>Cellular</option>\n    </select>\n  </nve-select>\n  <nve-select>\n    <select aria-label=\"condition\">\n      <option>contains</option>\n      <option>excludes</option>\n    </select>\n  </nve-select>\n  <nve-button style=\"width: 190px\" popovertarget=\"map-dropdown\">37.3706254,-121.9671894</nve-button>\n</nve-progressive-filter-chip>\n<nve-dropdown id=\"map-dropdown\">\n  <nve-input>\n    <nve-icon-button icon-name=\"map-pin\" readonly></nve-icon-button>\n    <input value=\"37.3706254,-121.9671894\" disabled aria-label=\"map coordinates\" />\n  </nve-input>\n  <img src=\"/static/images/test-map-2.webp\" width=\"300px\" alt=\"non-interactive demo map\" />\n</nve-dropdown>\n",
       "summary": "Progressive filter chip with custom button trigger opening a map coordinate picker dropdown.",
       "description": "",
       "composition": true,

package/dist/progressive-filter-chip/progressive-filter-chip2.js

@@ -23,7 +23,7 @@ var b = class extends h {
 	static {
 		this.metadata = {
 			tag: "nve-progressive-filter-chip",
-			version: "2.0.2"
+			version: "2.0.3"
 		};
 	}
 	static {

package/dist/pulse/pulse2.js

@@ -13,7 +13,7 @@ var c = class extends a {
 	static {
 		this.metadata = {
 			tag: "nve-pulse",
-			version: "2.0.2"
+			version: "2.0.3"
 		};
 	}
 	static {

package/dist/radio/radio-group2.js

@@ -12,7 +12,7 @@ var o = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-radio-group",
-			version: "2.0.2",
+			version: "2.0.3",
 			children: [
 				"label",
 				"nve-control-message",

package/dist/radio/radio2.js

@@ -15,7 +15,7 @@ var o = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-radio",
-			version: "2.0.2",
+			version: "2.0.3",
 			children: [
 				"label",
 				"input",

package/dist/range/range2.js

@@ -17,7 +17,7 @@ var d = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-range",
-			version: "2.0.2"
+			version: "2.0.3"
 		};
 	}
 	connectedCallback() {

package/dist/resize-handle/resize-handle2.js

@@ -18,7 +18,7 @@ var u = class extends c(a) {
 	static {
 		this.metadata = {
 			tag: "nve-resize-handle",
-			version: "2.0.2",
+			version: "2.0.3",
 			valueSchema: { type: "number" }
 		};
 	}

package/dist/search/search2.js

@@ -22,7 +22,7 @@ var l = class extends r {
 	static {
 		this.metadata = {
 			tag: "nve-search",
-			version: "2.0.2"
+			version: "2.0.3"
 		};
 	}
 	static {

package/dist/select/select2.js

@@ -27,7 +27,7 @@ var S = class extends d {
 	static {
 		this.metadata = {
 			tag: "nve-select",
-			version: "2.0.2"
+			version: "2.0.3"
 		};
 	}
 	static {

package/dist/skeleton/skeleton2.js

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

package/dist/sort-button/sort-button2.js

@@ -19,7 +19,7 @@ var u = {
 	static {
 		this.metadata = {
 			tag: "nve-sort-button",
-			version: "2.0.2"
+			version: "2.0.3"
 		};
 	}
 	static {

package/dist/sparkline/sparkline2.js

@@ -21,7 +21,7 @@ var C = class extends _ {
 	static {
 		this.metadata = {
 			tag: "nve-sparkline",
-			version: "2.0.2"
+			version: "2.0.3"
 		};
 	}
 	render() {

package/dist/star-rating/star-rating2.js

@@ -18,7 +18,7 @@ var l = class extends a {
 	static {
 		this.metadata = {
 			tag: "nve-star-rating",
-			version: "2.0.2"
+			version: "2.0.3"
 		};
 	}
 	static {

package/dist/steps/steps2.js

@@ -23,7 +23,7 @@ var v = class extends h(d) {
 	static {
 		this.metadata = {
 			tag: "nve-steps-item",
-			version: "2.0.2",
+			version: "2.0.3",
 			parents: ["nve-steps"]
 		};
 	}
@@ -69,7 +69,7 @@ var y = class extends d {
 	static {
 		this.metadata = {
 			tag: "nve-steps",
-			version: "2.0.2",
+			version: "2.0.3",
 			children: ["nve-steps-item"]
 		};
 	}

package/dist/switch/switch-group2.js

@@ -11,7 +11,7 @@ var a = class extends r {
 	static {
 		this.metadata = {
 			tag: "nve-switch-group",
-			version: "2.0.2",
+			version: "2.0.3",
 			children: [
 				"label",
 				"nve-control-message",

package/dist/switch/switch2.js

@@ -15,7 +15,7 @@ var o = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-switch",
-			version: "2.0.2",
+			version: "2.0.3",
 			children: [
 				"label",
 				"input",

package/dist/tabs/tabs-group2.js

@@ -33,7 +33,7 @@ var m, h = class extends l {
 	static {
 		this.metadata = {
 			tag: "nve-tabs-group",
-			version: "2.0.2",
+			version: "2.0.3",
 			children: ["nve-tabs"]
 		};
 	}

package/dist/tabs/tabs.examples.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.examples.js","names":[],"sources":["../../src/tabs/tabs.examples.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html } from 'lit';\nimport '@nvidia-elements/core/tabs/define.js';\nimport '@nvidia-elements/core/button/define.js';\nimport '@nvidia-elements/core/card/define.js';\nimport '@nvidia-elements/core/dot/define.js';\nimport '@nvidia-elements/core/icon/define.js';\n\nexport default {\n  title: 'Elements/Tabs',\n  component: 'nve-tabs'\n};\n\n/**\n * @summary Tabs group component for organizing content into selectable sections with disabled state support.\n */\nexport const Default = {\n  render: () => html`\n<nve-tabs-group id=\"tab-group-default\">\n  <nve-tabs>\n    <nve-tabs-item selected command=\"--toggle\" commandfor=\"tab-group-default\" value=\"overview\">Overview</nve-tabs-item>\n    <nve-tabs-item command=\"--toggle\" commandfor=\"tab-group-default\" value=\"details\">Details</nve-tabs-item>\n    <nve-tabs-item command=\"--toggle\" commandfor=\"tab-group-default\" value=\"settings\">Settings</nve-tabs-item>\n  </nve-tabs>\n  <div slot=\"overview\">\n    overview content\n  </div>\n  <div slot=\"details\">\n    details content\n  </div>\n  <div slot=\"settings\">\n    settings content\n  </div>\n</nve-tabs-group>`\n};\n\n\n/**\n * @summary Borderless tabs variant for minimal visual styling without border emphasis.\n * @tags test-case\n */\nexport const BorderlessTabs = {\n  render: () => html`\n<nve-tabs borderless behavior-select>\n  <nve-tabs-item selected>Tab 1</nve-tabs-item>\n  <nve-tabs-item>Tab 2</nve-tabs-item>\n  <nve-tabs-item>Tab 3 </nve-tabs-item>\n  <nve-tabs-item disabled>Disabled</nve-tabs-item>\n  <nve-tabs-item>Tab 5</nve-tabs-item>\n</nve-tabs>`\n};\n\n/**\n * @summary Tabs with custom border background styling for brand-specific visual customization.\n * @tags test-case\n */\nexport const BorderBackground = {\n  render: () => html`\n<nve-tabs behavior-select style=\"--indicator-background: var(--nve-ref-color-brand-green-900); --indicator-border-radius: none;\">\n  <nve-tabs-item selected>\n    Tab 1\n  </nve-tabs-item>\n  <nve-tabs-item>\n    Tab 2\n  </nve-tabs-item>\n  <nve-tabs-item>\n    Tab 3\n  </nve-tabs-item>\n</nve-tabs>`\n};\n\n/**\n * @summary Tabs with notification dots for indicating unread content or alerts within tab sections.\n */\nexport const WithDots = {\n  render: () => html`\n<nve-tabs behavior-select>\n  <nve-tabs-item>Tab 1</nve-tabs-item>\n  <nve-tabs-item>Tab 2</nve-tabs-item>\n  <nve-tabs-item>Tab 3 </nve-tabs-item>\n  <nve-tabs-item selected>\n    Tab 4\n    <nve-dot aria-label=\"10 notifications\">10</nve-dot>\n  </nve-tabs-item>\n  <nve-tabs-item>Tab 5</nve-tabs-item>\n</nve-tabs>`\n};\n\n/**\n * @summary Vertical tabs layout for sidebar navigation and vertical content organization patterns.\n */\nexport const VerticalTabs = {\n  render: () => html`\n<nve-tabs vertical behavior-select style=\"width: 250px\">\n  <nve-tabs-item selected>Tab 1</nve-tabs-item>\n  <nve-tabs-item>Tab 2</nve-tabs-item>\n  <nve-tabs-item>Tab 3</nve-tabs-item>\n  <nve-tabs-item disabled>Disabled</nve-tabs-item>\n  <nve-tabs-item>Tab 5</nve-tabs-item>\n</nve-tabs>`\n};\n\n/**\n * @summary Borderless vertical tabs with icons for enhanced visual navigation and minimal styling.\n * @tags test-case\n */\nexport const BorderlessVerticalTabs = {\n  render: () => html`\n<nve-tabs vertical borderless behavior-select style=\"width: 250px\">\n  <nve-tabs-item>\n    <nve-icon name=\"gear\"></nve-icon> Tab 1\n  </nve-tabs-item>\n  <nve-tabs-item>\n    <nve-icon name=\"person\"></nve-icon> Tab 2\n  </nve-tabs-item>\n  <nve-tabs-item selected>\n    <nve-icon name=\"beaker\"></nve-icon> Tab 3\n  </nve-tabs-item>\n  <nve-tabs-item>\n    <nve-icon name=\"add-grid\"></nve-icon> Tab 4\n  </nve-tabs-item>\n</nve-tabs>`\n};\n\n/**\n * @summary Stateless tabs for external state management without built-in selection behavior.\n */\nexport const StatelessTabs = {\n  render: () => html`\n<nve-tabs>\n  <nve-tabs-item selected>Tab 1</nve-tabs-item>\n  <nve-tabs-item>Tab 2</nve-tabs-item>\n  <nve-tabs-item>Tab 3</nve-tabs-item>\n  <nve-tabs-item>Tab 4</nve-tabs-item>\n  <nve-tabs-item disabled>Disabled</nve-tabs-item>\n</nve-tabs>`\n};\n\n/**\n * @summary Tabs with link navigation for routing-based tab switching and page navigation.\n */\nexport const Links = {\n  render: () => html`\n<nve-tabs>\n  <nve-tabs-item selected>\n    <a href=\"./docs/elements/tabs/#links\">Tab 1</a>\n  </nve-tabs-item>\n  <nve-tabs-item>\n    <a href=\"./docs/elements/tabs/#links\">Tab 2</a>\n  </nve-tabs-item>\n  <nve-tabs-item>\n    <a href=\"/docs/elements/tabs/#links\">Tab 3</a>\n  </nve-tabs-item>\n</nve-tabs>`\n};\n\n/**\n * @summary Tabs with overflow handling for managing large numbers of tabs with scrolling behavior.\n * @tags test-case\n */\nexport const OverflowTabs = {\n  render: () => html`\n<nve-tabs behavior-select>\n  <nve-tabs-item selected>Tab 1</nve-tabs-item>\n  <nve-tabs-item>Tab 2</nve-tabs-item>\n  <nve-tabs-item>Tab 3</nve-tabs-item>\n  <nve-tabs-item>Tab 4</nve-tabs-item>\n  <nve-tabs-item>Tab 5</nve-tabs-item>\n  <nve-tabs-item>Tab 6</nve-tabs-item>\n  <nve-tabs-item>Tab 7</nve-tabs-item>\n  <nve-tabs-item>Tab 8</nve-tabs-item>\n  <nve-tabs-item>Tab 9</nve-tabs-item>\n  <nve-tabs-item>Tab 10</nve-tabs-item>\n  <nve-tabs-item>Tab 11</nve-tabs-item>\n  <nve-tabs-item>Tab 12</nve-tabs-item>\n  <nve-tabs-item>Tab 13</nve-tabs-item>\n  <nve-tabs-item>Tab 14</nve-tabs-item>\n  <nve-tabs-item>Tab 15</nve-tabs-item>\n  <nve-tabs-item>Tab 16</nve-tabs-item>\n  <nve-tabs-item>Tab 17</nve-tabs-item>\n  <nve-tabs-item>Tab 18</nve-tabs-item>\n  <nve-tabs-item>Tab 19</nve-tabs-item>\n  <nve-tabs-item>Tab 20</nve-tabs-item>\n</nve-tabs>`\n};\n\n/**\n * @summary Tabs selection state and a popover working together without any CSS Anchor Positioning collisions.\n * @tags test-case\n */\nexport const WithTooltips = {\n  render: () => html`\n<nve-tooltip id=\"tab1\">Tooltip for tab 1</nve-tooltip>\n<nve-tooltip id=\"tab2\">Tooltip for tab 2</nve-tooltip>\n<nve-tooltip id=\"tab3\">Tooltip for tab 3</nve-tooltip>\n<nve-tabs behavior-select>\n  <nve-tabs-item selected popovertarget=\"tab1\">Tab 1</nve-tabs-item>\n  <nve-tabs-item popovertarget=\"tab2\">Tab 2</nve-tabs-item>\n  <nve-tabs-item id=\"tab-item-3\" popovertarget=\"tab3\">Tab 3</nve-tabs-item>\n</nve-tabs>`\n};\n\n/**\n * @summary Group tabs with slot-matched panels and structured card content when one selected value should control both the tab state and revealed details.\n */\nexport const GroupPanels = {\n  render: () => html`\n<nve-tabs-group id=\"tab-group\">\n  <nve-tabs>\n    <nve-tabs-item selected command=\"--toggle\" commandfor=\"tab-group\" value=\"overview\">Overview</nve-tabs-item>\n    <nve-tabs-item command=\"--toggle\" commandfor=\"tab-group\" value=\"details\">Details</nve-tabs-item>\n    <nve-tabs-item command=\"--toggle\" commandfor=\"tab-group\" value=\"settings\">Settings</nve-tabs-item>\n  </nve-tabs>\n  <div slot=\"overview\">\n    <nve-card style=\"width: 100%; min-width: 320px;\">\n      <nve-card-header>\n        <div nve-layout=\"column gap:xs\">\n          <h2 nve-text=\"heading sm bold\">Overview</h2>\n          <p nve-text=\"body sm muted\">High-level release status and current priorities.</p>\n        </div>\n      </nve-card-header>\n      <nve-card-content>\n        <dl nve-layout=\"grid gap:sm\">\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Status</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Ready for review</dd>\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Audience</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Design and product owners</dd>\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Next step</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Validate the tab labels and panel order</dd>\n        </dl>\n      </nve-card-content>\n    </nve-card>\n  </div>\n  <div slot=\"details\">\n    <nve-card style=\"width: 100%; min-width: 320px;\">\n      <nve-card-header>\n        <div nve-layout=\"column gap:xs\">\n          <h2 nve-text=\"heading sm bold\">Details</h2>\n          <p nve-text=\"body sm muted\">Supporting context for teams that need implementation specifics.</p>\n        </div>\n      </nve-card-header>\n      <nve-card-content>\n        <dl nve-layout=\"grid gap:sm\">\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Owner</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Elements design system</dd>\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Coverage</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Unit, SSR, and accessibility checks</dd>\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Focus</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Selection sync and panel wiring</dd>\n        </dl>\n      </nve-card-content>\n    </nve-card>\n  </div>\n  <div slot=\"settings\">\n    <nve-card style=\"width: 100%; min-width: 320px;\">\n      <nve-card-header>\n        <div nve-layout=\"column gap:xs\">\n          <h2 nve-text=\"heading sm bold\">Settings</h2>\n          <p nve-text=\"body sm muted\">Configuration notes for authors and downstream consumers.</p>\n        </div>\n      </nve-card-header>\n      <nve-card-content>\n        <dl nve-layout=\"grid gap:sm\">\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Selection</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Controlled by the active tab value</dd>\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Panels</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Matched by slot name</dd>\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Actions</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">External buttons can drive the same group</dd>\n        </dl>\n      </nve-card-content>\n    </nve-card>\n  </div>\n</nve-tabs-group>`\n};\n\n/**\n * @summary Tab group with vertical tab strip at inline-start beside slot-matched panels for sidebar-style settings and details layouts in LTR.\n */\nexport const GroupVerticalPanels = {\n  render: () => html`\n<nve-tabs-group id=\"tab-group-vertical-start\" alignment=\"start\">\n  <nve-tabs vertical style=\"width: 250px\">\n    <nve-tabs-item selected command=\"--toggle\" commandfor=\"tab-group-vertical-start\" value=\"overview\">Overview</nve-tabs-item>\n    <nve-tabs-item command=\"--toggle\" commandfor=\"tab-group-vertical-start\" value=\"details\">Details</nve-tabs-item>\n    <nve-tabs-item command=\"--toggle\" commandfor=\"tab-group-vertical-start\" value=\"settings\">Settings</nve-tabs-item>\n  </nve-tabs>\n  <div slot=\"overview\" style=\"width: 100%; min-width: 320px;\">\n    <nve-card style=\"width: 100%\">\n      <nve-card-header>\n        <div nve-layout=\"column gap:xs\">\n          <h2 nve-text=\"heading sm bold\">Overview</h2>\n          <p nve-text=\"body sm muted\">High-level release status and current priorities.</p>\n        </div>\n      </nve-card-header>\n      <nve-card-content>\n        <dl nve-layout=\"grid gap:sm\">\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Status</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Ready for review</dd>\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Audience</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Design and product owners</dd>\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Next step</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Validate the tab labels and panel order</dd>\n        </dl>\n      </nve-card-content>\n    </nve-card>\n  </div>\n  <div slot=\"details\" style=\"width: 100%; min-width: 320px;\">\n    <nve-card style=\"width: 100%\">\n      <nve-card-header>\n        <div nve-layout=\"column gap:xs\">\n          <h2 nve-text=\"heading sm bold\">Details</h2>\n          <p nve-text=\"body sm muted\">Supporting context for teams that need implementation specifics.</p>\n        </div>\n      </nve-card-header>\n      <nve-card-content>\n        <dl nve-layout=\"grid gap:sm\">\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Owner</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Elements design system</dd>\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Coverage</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Unit, SSR, and accessibility checks</dd>\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Focus</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Selection sync and panel wiring</dd>\n        </dl>\n      </nve-card-content>\n    </nve-card>\n  </div>\n  <div slot=\"settings\" style=\"width: 100%; min-width: 320px;\">\n    <nve-card style=\"width: 100%\">\n      <nve-card-header>\n        <div nve-layout=\"column gap:xs\">\n          <h2 nve-text=\"heading sm bold\">Settings</h2>\n          <p nve-text=\"body sm muted\">Configuration notes for authors and downstream consumers.</p>\n        </div>\n      </nve-card-header>\n      <nve-card-content>\n        <dl nve-layout=\"grid gap:sm\">\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Selection</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Controlled by the active tab value</dd>\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Panels</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Matched by slot name</dd>\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Actions</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">External buttons can drive the same group</dd>\n        </dl>\n      </nve-card-content>\n    </nve-card>\n  </div>\n</nve-tabs-group>`\n};\n\n/**\n * @summary Tab group with vertical tab strip at inline-end beside slot-matched panels when the tab rail should sit on the opposite side from inline-start sidebars.\n */\nexport const GroupVerticalEnd = {\n  render: () => html`\n<nve-tabs-group id=\"tab-group-vertical-end\" alignment=\"end\">\n  <nve-tabs vertical style=\"width: 250px\">\n    <nve-tabs-item selected command=\"--toggle\" commandfor=\"tab-group-vertical-end\" value=\"overview\">Overview</nve-tabs-item>\n    <nve-tabs-item command=\"--toggle\" commandfor=\"tab-group-vertical-end\" value=\"details\">Details</nve-tabs-item>\n    <nve-tabs-item command=\"--toggle\" commandfor=\"tab-group-vertical-end\" value=\"settings\">Settings</nve-tabs-item>\n  </nve-tabs>\n  <div slot=\"overview\" style=\"width: 100%; min-width: 320px;\">\n    <nve-card style=\"width: 100%\">\n      <nve-card-header>\n        <div nve-layout=\"column gap:xs\">\n          <h2 nve-text=\"heading sm bold\">Overview</h2>\n          <p nve-text=\"body sm muted\">High-level release status and current priorities.</p>\n        </div>\n      </nve-card-header>\n      <nve-card-content>\n        <dl nve-layout=\"grid gap:sm\">\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Status</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Ready for review</dd>\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Audience</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Design and product owners</dd>\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Next step</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Validate the tab labels and panel order</dd>\n        </dl>\n      </nve-card-content>\n    </nve-card>\n  </div>\n  <div slot=\"details\" style=\"width: 100%; min-width: 320px;\">\n    <nve-card style=\"width: 100%\">\n      <nve-card-header>\n        <div nve-layout=\"column gap:xs\">\n          <h2 nve-text=\"heading sm bold\">Details</h2>\n          <p nve-text=\"body sm muted\">Supporting context for teams that need implementation specifics.</p>\n        </div>\n      </nve-card-header>\n      <nve-card-content>\n        <dl nve-layout=\"grid gap:sm\">\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Owner</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Elements design system</dd>\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Coverage</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Unit, SSR, and accessibility checks</dd>\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Focus</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Selection sync and panel wiring</dd>\n        </dl>\n      </nve-card-content>\n    </nve-card>\n  </div>\n  <div slot=\"settings\" style=\"width: 100%; min-width: 320px;\">\n    <nve-card style=\"width: 100%\">\n      <nve-card-header>\n        <div nve-layout=\"column gap:xs\">\n          <h2 nve-text=\"heading sm bold\">Settings</h2>\n          <p nve-text=\"body sm muted\">Configuration notes for authors and downstream consumers.</p>\n        </div>\n      </nve-card-header>\n      <nve-card-content>\n        <dl nve-layout=\"grid gap:sm\">\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Selection</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Controlled by the active tab value</dd>\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Panels</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Matched by slot name</dd>\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Actions</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">External buttons can drive the same group</dd>\n        </dl>\n      </nve-card-content>\n    </nve-card>\n  </div>\n</nve-tabs-group>`\n};\n\n/**\n * @summary Drive the same tabs group from external buttons when layouts need tabs and secondary actions to stay in sync with structured panel content.\n */\nexport const ExternalControls = {\n  render: () => html`\n<div nve-layout=\"column gap:lg\">\n  <nve-tabs-group id=\"tab-group-controls\">\n    <nve-tabs>\n      <nve-tabs-item selected command=\"--toggle\" commandfor=\"tab-group-controls\" value=\"overview\">Overview</nve-tabs-item>\n      <nve-tabs-item command=\"--toggle\" commandfor=\"tab-group-controls\" value=\"details\">Details</nve-tabs-item>\n      <nve-tabs-item command=\"--toggle\" commandfor=\"tab-group-controls\" value=\"settings\">Settings</nve-tabs-item>\n    </nve-tabs>\n    <div slot=\"overview\">\n      <nve-card style=\"width: 100%; min-width: 320px;\">\n        <nve-card-header>\n          <div nve-layout=\"column gap:xs\">\n            <h2 nve-text=\"heading sm bold\">Overview</h2>\n            <p nve-text=\"body sm muted\">Quick status for the current tab group.</p>\n          </div>\n        </nve-card-header>\n        <nve-card-content>\n          <dl nve-layout=\"grid gap:sm\">\n            <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">State</dt>\n            <dd nve-layout=\"span:8\" nve-text=\"body\">Overview is active</dd>\n            <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Signal</dt>\n            <dd nve-layout=\"span:8\" nve-text=\"body\">Use this tab for a summary of the current workflow</dd>\n            <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Tip</dt>\n            <dd nve-layout=\"span:8\" nve-text=\"body\">Pair it with external controls for quick switching</dd>\n          </dl>\n        </nve-card-content>\n      </nve-card>\n    </div>\n    <div slot=\"details\">\n      <nve-card style=\"width: 100%; min-width: 320px;\">\n        <nve-card-header>\n          <div nve-layout=\"column gap:xs\">\n            <h2 nve-text=\"heading sm bold\">Details</h2>\n            <p nve-text=\"body sm muted\">Deeper context for follow-up tasks and implementation notes.</p>\n          </div>\n        </nve-card-header>\n        <nve-card-content>\n          <dl nve-layout=\"grid gap:sm\">\n            <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">State</dt>\n            <dd nve-layout=\"span:8\" nve-text=\"body\">Details are available on demand</dd>\n            <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Signal</dt>\n            <dd nve-layout=\"span:8\" nve-text=\"body\">Use this tab when readers need extra context</dd>\n            <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Tip</dt>\n            <dd nve-layout=\"span:8\" nve-text=\"body\">Keep the content specific to the selected tab</dd>\n          </dl>\n        </nve-card-content>\n      </nve-card>\n    </div>\n    <div slot=\"settings\">\n      <nve-card style=\"width: 100%; min-width: 320px;\">\n        <nve-card-header>\n          <div nve-layout=\"column gap:xs\">\n            <h2 nve-text=\"heading sm bold\">Settings</h2>\n            <p nve-text=\"body sm muted\">Preferences and coordination notes for the shared tab group.</p>\n          </div>\n        </nve-card-header>\n        <nve-card-content>\n          <dl nve-layout=\"grid gap:sm\">\n            <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">State</dt>\n            <dd nve-layout=\"span:8\" nve-text=\"body\">Settings remain in sync with the selected value</dd>\n            <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Signal</dt>\n            <dd nve-layout=\"span:8\" nve-text=\"body\">Useful for configuration and admin actions</dd>\n            <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Tip</dt>\n            <dd nve-layout=\"span:8\" nve-text=\"body\">Use external buttons when the layout needs extra actions</dd>\n          </dl>\n        </nve-card-content>\n      </nve-card>\n    </div>\n  </nve-tabs-group>\n\n  <div nve-layout=\"row gap:xs\">\n    <nve-button command=\"--toggle\" commandfor=\"tab-group-controls\" value=\"overview\">overview</nve-button>\n    <nve-button command=\"--toggle\" commandfor=\"tab-group-controls\" value=\"details\">details</nve-button>\n    <nve-button command=\"--toggle\" commandfor=\"tab-group-controls\" value=\"settings\">settings</nve-button>\n  </div>\n</div>`\n};\n"],"mappings":";AAGA,IAAA,IAAS"}
+{"version":3,"file":"tabs.examples.js","names":[],"sources":["../../src/tabs/tabs.examples.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html } from 'lit';\nimport '@nvidia-elements/core/tabs/define.js';\nimport '@nvidia-elements/core/button/define.js';\nimport '@nvidia-elements/core/card/define.js';\nimport '@nvidia-elements/core/dot/define.js';\nimport '@nvidia-elements/core/icon/define.js';\n\nexport default {\n  title: 'Elements/Tabs',\n  component: 'nve-tabs'\n};\n\n/**\n * @summary Tabs group component for organizing content into selectable sections with disabled state support.\n */\nexport const Default = {\n  render: () => html`\n<nve-tabs-group id=\"tab-group-default\">\n  <nve-tabs>\n    <nve-tabs-item selected command=\"--toggle\" commandfor=\"tab-group-default\" value=\"overview\">Overview</nve-tabs-item>\n    <nve-tabs-item command=\"--toggle\" commandfor=\"tab-group-default\" value=\"details\">Details</nve-tabs-item>\n    <nve-tabs-item command=\"--toggle\" commandfor=\"tab-group-default\" value=\"settings\">Settings</nve-tabs-item>\n  </nve-tabs>\n  <div slot=\"overview\">\n    overview content\n  </div>\n  <div slot=\"details\">\n    details content\n  </div>\n  <div slot=\"settings\">\n    settings content\n  </div>\n</nve-tabs-group>`\n};\n\n\n/**\n * @summary Borderless tabs variant for minimal visual styling without border emphasis.\n * @tags test-case\n */\nexport const BorderlessTabs = {\n  render: () => html`\n<nve-tabs borderless behavior-select>\n  <nve-tabs-item selected>Tab 1</nve-tabs-item>\n  <nve-tabs-item>Tab 2</nve-tabs-item>\n  <nve-tabs-item>Tab 3 </nve-tabs-item>\n  <nve-tabs-item disabled>Disabled</nve-tabs-item>\n  <nve-tabs-item>Tab 5</nve-tabs-item>\n</nve-tabs>`\n};\n\n/**\n * @summary Tabs with custom border background styling for brand-specific visual customization.\n * @tags test-case\n */\nexport const BorderBackground = {\n  render: () => html`\n<nve-tabs behavior-select style=\"--indicator-background: var(--nve-ref-color-brand-green-900); --indicator-border-radius: none;\">\n  <nve-tabs-item selected>\n    Tab 1\n  </nve-tabs-item>\n  <nve-tabs-item>\n    Tab 2\n  </nve-tabs-item>\n  <nve-tabs-item>\n    Tab 3\n  </nve-tabs-item>\n</nve-tabs>`\n};\n\n/**\n * @summary Tabs with notification dots for indicating unread content or alerts within tab sections.\n */\nexport const WithDots = {\n  render: () => html`\n<nve-tabs behavior-select>\n  <nve-tabs-item>Tab 1</nve-tabs-item>\n  <nve-tabs-item>Tab 2</nve-tabs-item>\n  <nve-tabs-item>Tab 3 </nve-tabs-item>\n  <nve-tabs-item selected>\n    Tab 4\n    <nve-dot aria-label=\"10 notifications\">10</nve-dot>\n  </nve-tabs-item>\n  <nve-tabs-item>Tab 5</nve-tabs-item>\n</nve-tabs>`\n};\n\n/**\n * @summary Vertical tabs layout for sidebar navigation and vertical content organization patterns.\n */\nexport const VerticalTabs = {\n  render: () => html`\n<nve-tabs vertical behavior-select style=\"width: 250px\">\n  <nve-tabs-item selected>Tab 1</nve-tabs-item>\n  <nve-tabs-item>Tab 2</nve-tabs-item>\n  <nve-tabs-item>Tab 3</nve-tabs-item>\n  <nve-tabs-item disabled>Disabled</nve-tabs-item>\n  <nve-tabs-item>Tab 5</nve-tabs-item>\n</nve-tabs>`\n};\n\n/**\n * @summary Borderless vertical tabs with icons for enhanced visual navigation and minimal styling.\n * @tags test-case\n */\nexport const BorderlessVerticalTabs = {\n  render: () => html`\n<nve-tabs vertical borderless behavior-select style=\"width: 250px\">\n  <nve-tabs-item>\n    <nve-icon name=\"gear\"></nve-icon> Tab 1\n  </nve-tabs-item>\n  <nve-tabs-item>\n    <nve-icon name=\"person\"></nve-icon> Tab 2\n  </nve-tabs-item>\n  <nve-tabs-item selected>\n    <nve-icon name=\"beaker\"></nve-icon> Tab 3\n  </nve-tabs-item>\n  <nve-tabs-item>\n    <nve-icon name=\"add-grid\"></nve-icon> Tab 4\n  </nve-tabs-item>\n</nve-tabs>`\n};\n\n/**\n * @summary Stateless tabs for external state management without built-in selection behavior.\n */\nexport const StatelessTabs = {\n  render: () => html`\n<nve-tabs>\n  <nve-tabs-item selected>Tab 1</nve-tabs-item>\n  <nve-tabs-item>Tab 2</nve-tabs-item>\n  <nve-tabs-item>Tab 3</nve-tabs-item>\n  <nve-tabs-item>Tab 4</nve-tabs-item>\n  <nve-tabs-item disabled>Disabled</nve-tabs-item>\n</nve-tabs>`\n};\n\n/**\n * @summary Tabs with link navigation for routing-based tab switching and page navigation.\n */\nexport const Links = {\n  render: () => html`\n<nve-tabs>\n  <nve-tabs-item selected>\n    <a href=\"#links\">Tab 1</a>\n  </nve-tabs-item>\n  <nve-tabs-item>\n    <a href=\"#links\">Tab 2</a>\n  </nve-tabs-item>\n  <nve-tabs-item>\n    <a href=\"#links\">Tab 3</a>\n  </nve-tabs-item>\n</nve-tabs>`\n};\n\n/**\n * @summary Tabs with overflow handling for managing large numbers of tabs with scrolling behavior.\n * @tags test-case\n */\nexport const OverflowTabs = {\n  render: () => html`\n<nve-tabs behavior-select>\n  <nve-tabs-item selected>Tab 1</nve-tabs-item>\n  <nve-tabs-item>Tab 2</nve-tabs-item>\n  <nve-tabs-item>Tab 3</nve-tabs-item>\n  <nve-tabs-item>Tab 4</nve-tabs-item>\n  <nve-tabs-item>Tab 5</nve-tabs-item>\n  <nve-tabs-item>Tab 6</nve-tabs-item>\n  <nve-tabs-item>Tab 7</nve-tabs-item>\n  <nve-tabs-item>Tab 8</nve-tabs-item>\n  <nve-tabs-item>Tab 9</nve-tabs-item>\n  <nve-tabs-item>Tab 10</nve-tabs-item>\n  <nve-tabs-item>Tab 11</nve-tabs-item>\n  <nve-tabs-item>Tab 12</nve-tabs-item>\n  <nve-tabs-item>Tab 13</nve-tabs-item>\n  <nve-tabs-item>Tab 14</nve-tabs-item>\n  <nve-tabs-item>Tab 15</nve-tabs-item>\n  <nve-tabs-item>Tab 16</nve-tabs-item>\n  <nve-tabs-item>Tab 17</nve-tabs-item>\n  <nve-tabs-item>Tab 18</nve-tabs-item>\n  <nve-tabs-item>Tab 19</nve-tabs-item>\n  <nve-tabs-item>Tab 20</nve-tabs-item>\n</nve-tabs>`\n};\n\n/**\n * @summary Tabs selection state and a popover working together without any CSS Anchor Positioning collisions.\n * @tags test-case\n */\nexport const WithTooltips = {\n  render: () => html`\n<nve-tooltip id=\"tab1\">Tooltip for tab 1</nve-tooltip>\n<nve-tooltip id=\"tab2\">Tooltip for tab 2</nve-tooltip>\n<nve-tooltip id=\"tab3\">Tooltip for tab 3</nve-tooltip>\n<nve-tabs behavior-select>\n  <nve-tabs-item selected popovertarget=\"tab1\">Tab 1</nve-tabs-item>\n  <nve-tabs-item popovertarget=\"tab2\">Tab 2</nve-tabs-item>\n  <nve-tabs-item id=\"tab-item-3\" popovertarget=\"tab3\">Tab 3</nve-tabs-item>\n</nve-tabs>`\n};\n\n/**\n * @summary Group tabs with slot-matched panels and structured card content when one selected value should control both the tab state and revealed details.\n */\nexport const GroupPanels = {\n  render: () => html`\n<nve-tabs-group id=\"tab-group\">\n  <nve-tabs>\n    <nve-tabs-item selected command=\"--toggle\" commandfor=\"tab-group\" value=\"overview\">Overview</nve-tabs-item>\n    <nve-tabs-item command=\"--toggle\" commandfor=\"tab-group\" value=\"details\">Details</nve-tabs-item>\n    <nve-tabs-item command=\"--toggle\" commandfor=\"tab-group\" value=\"settings\">Settings</nve-tabs-item>\n  </nve-tabs>\n  <div slot=\"overview\">\n    <nve-card style=\"width: 100%; min-width: 320px;\">\n      <nve-card-header>\n        <div nve-layout=\"column gap:xs\">\n          <h2 nve-text=\"heading sm bold\">Overview</h2>\n          <p nve-text=\"body sm muted\">High-level release status and current priorities.</p>\n        </div>\n      </nve-card-header>\n      <nve-card-content>\n        <dl nve-layout=\"grid gap:sm\">\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Status</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Ready for review</dd>\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Audience</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Design and product owners</dd>\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Next step</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Validate the tab labels and panel order</dd>\n        </dl>\n      </nve-card-content>\n    </nve-card>\n  </div>\n  <div slot=\"details\">\n    <nve-card style=\"width: 100%; min-width: 320px;\">\n      <nve-card-header>\n        <div nve-layout=\"column gap:xs\">\n          <h2 nve-text=\"heading sm bold\">Details</h2>\n          <p nve-text=\"body sm muted\">Supporting context for teams that need implementation specifics.</p>\n        </div>\n      </nve-card-header>\n      <nve-card-content>\n        <dl nve-layout=\"grid gap:sm\">\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Owner</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Elements design system</dd>\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Coverage</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Unit, SSR, and accessibility checks</dd>\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Focus</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Selection sync and panel wiring</dd>\n        </dl>\n      </nve-card-content>\n    </nve-card>\n  </div>\n  <div slot=\"settings\">\n    <nve-card style=\"width: 100%; min-width: 320px;\">\n      <nve-card-header>\n        <div nve-layout=\"column gap:xs\">\n          <h2 nve-text=\"heading sm bold\">Settings</h2>\n          <p nve-text=\"body sm muted\">Configuration notes for authors and downstream consumers.</p>\n        </div>\n      </nve-card-header>\n      <nve-card-content>\n        <dl nve-layout=\"grid gap:sm\">\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Selection</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Controlled by the active tab value</dd>\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Panels</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Matched by slot name</dd>\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Actions</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">External buttons can drive the same group</dd>\n        </dl>\n      </nve-card-content>\n    </nve-card>\n  </div>\n</nve-tabs-group>`\n};\n\n/**\n * @summary Tab group with vertical tab strip at inline-start beside slot-matched panels for sidebar-style settings and details layouts in LTR.\n */\nexport const GroupVerticalPanels = {\n  render: () => html`\n<nve-tabs-group id=\"tab-group-vertical-start\" alignment=\"start\">\n  <nve-tabs vertical style=\"width: 250px\">\n    <nve-tabs-item selected command=\"--toggle\" commandfor=\"tab-group-vertical-start\" value=\"overview\">Overview</nve-tabs-item>\n    <nve-tabs-item command=\"--toggle\" commandfor=\"tab-group-vertical-start\" value=\"details\">Details</nve-tabs-item>\n    <nve-tabs-item command=\"--toggle\" commandfor=\"tab-group-vertical-start\" value=\"settings\">Settings</nve-tabs-item>\n  </nve-tabs>\n  <div slot=\"overview\" style=\"width: 100%; min-width: 320px;\">\n    <nve-card style=\"width: 100%\">\n      <nve-card-header>\n        <div nve-layout=\"column gap:xs\">\n          <h2 nve-text=\"heading sm bold\">Overview</h2>\n          <p nve-text=\"body sm muted\">High-level release status and current priorities.</p>\n        </div>\n      </nve-card-header>\n      <nve-card-content>\n        <dl nve-layout=\"grid gap:sm\">\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Status</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Ready for review</dd>\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Audience</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Design and product owners</dd>\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Next step</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Validate the tab labels and panel order</dd>\n        </dl>\n      </nve-card-content>\n    </nve-card>\n  </div>\n  <div slot=\"details\" style=\"width: 100%; min-width: 320px;\">\n    <nve-card style=\"width: 100%\">\n      <nve-card-header>\n        <div nve-layout=\"column gap:xs\">\n          <h2 nve-text=\"heading sm bold\">Details</h2>\n          <p nve-text=\"body sm muted\">Supporting context for teams that need implementation specifics.</p>\n        </div>\n      </nve-card-header>\n      <nve-card-content>\n        <dl nve-layout=\"grid gap:sm\">\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Owner</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Elements design system</dd>\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Coverage</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Unit, SSR, and accessibility checks</dd>\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Focus</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Selection sync and panel wiring</dd>\n        </dl>\n      </nve-card-content>\n    </nve-card>\n  </div>\n  <div slot=\"settings\" style=\"width: 100%; min-width: 320px;\">\n    <nve-card style=\"width: 100%\">\n      <nve-card-header>\n        <div nve-layout=\"column gap:xs\">\n          <h2 nve-text=\"heading sm bold\">Settings</h2>\n          <p nve-text=\"body sm muted\">Configuration notes for authors and downstream consumers.</p>\n        </div>\n      </nve-card-header>\n      <nve-card-content>\n        <dl nve-layout=\"grid gap:sm\">\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Selection</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Controlled by the active tab value</dd>\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Panels</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Matched by slot name</dd>\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Actions</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">External buttons can drive the same group</dd>\n        </dl>\n      </nve-card-content>\n    </nve-card>\n  </div>\n</nve-tabs-group>`\n};\n\n/**\n * @summary Tab group with vertical tab strip at inline-end beside slot-matched panels when the tab rail should sit on the opposite side from inline-start sidebars.\n */\nexport const GroupVerticalEnd = {\n  render: () => html`\n<nve-tabs-group id=\"tab-group-vertical-end\" alignment=\"end\">\n  <nve-tabs vertical style=\"width: 250px\">\n    <nve-tabs-item selected command=\"--toggle\" commandfor=\"tab-group-vertical-end\" value=\"overview\">Overview</nve-tabs-item>\n    <nve-tabs-item command=\"--toggle\" commandfor=\"tab-group-vertical-end\" value=\"details\">Details</nve-tabs-item>\n    <nve-tabs-item command=\"--toggle\" commandfor=\"tab-group-vertical-end\" value=\"settings\">Settings</nve-tabs-item>\n  </nve-tabs>\n  <div slot=\"overview\" style=\"width: 100%; min-width: 320px;\">\n    <nve-card style=\"width: 100%\">\n      <nve-card-header>\n        <div nve-layout=\"column gap:xs\">\n          <h2 nve-text=\"heading sm bold\">Overview</h2>\n          <p nve-text=\"body sm muted\">High-level release status and current priorities.</p>\n        </div>\n      </nve-card-header>\n      <nve-card-content>\n        <dl nve-layout=\"grid gap:sm\">\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Status</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Ready for review</dd>\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Audience</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Design and product owners</dd>\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Next step</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Validate the tab labels and panel order</dd>\n        </dl>\n      </nve-card-content>\n    </nve-card>\n  </div>\n  <div slot=\"details\" style=\"width: 100%; min-width: 320px;\">\n    <nve-card style=\"width: 100%\">\n      <nve-card-header>\n        <div nve-layout=\"column gap:xs\">\n          <h2 nve-text=\"heading sm bold\">Details</h2>\n          <p nve-text=\"body sm muted\">Supporting context for teams that need implementation specifics.</p>\n        </div>\n      </nve-card-header>\n      <nve-card-content>\n        <dl nve-layout=\"grid gap:sm\">\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Owner</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Elements design system</dd>\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Coverage</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Unit, SSR, and accessibility checks</dd>\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Focus</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Selection sync and panel wiring</dd>\n        </dl>\n      </nve-card-content>\n    </nve-card>\n  </div>\n  <div slot=\"settings\" style=\"width: 100%; min-width: 320px;\">\n    <nve-card style=\"width: 100%\">\n      <nve-card-header>\n        <div nve-layout=\"column gap:xs\">\n          <h2 nve-text=\"heading sm bold\">Settings</h2>\n          <p nve-text=\"body sm muted\">Configuration notes for authors and downstream consumers.</p>\n        </div>\n      </nve-card-header>\n      <nve-card-content>\n        <dl nve-layout=\"grid gap:sm\">\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Selection</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Controlled by the active tab value</dd>\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Panels</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Matched by slot name</dd>\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Actions</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">External buttons can drive the same group</dd>\n        </dl>\n      </nve-card-content>\n    </nve-card>\n  </div>\n</nve-tabs-group>`\n};\n\n/**\n * @summary Drive the same tabs group from external buttons when layouts need tabs and secondary actions to stay in sync with structured panel content.\n */\nexport const ExternalControls = {\n  render: () => html`\n<div nve-layout=\"column gap:lg\">\n  <nve-tabs-group id=\"tab-group-controls\">\n    <nve-tabs>\n      <nve-tabs-item selected command=\"--toggle\" commandfor=\"tab-group-controls\" value=\"overview\">Overview</nve-tabs-item>\n      <nve-tabs-item command=\"--toggle\" commandfor=\"tab-group-controls\" value=\"details\">Details</nve-tabs-item>\n      <nve-tabs-item command=\"--toggle\" commandfor=\"tab-group-controls\" value=\"settings\">Settings</nve-tabs-item>\n    </nve-tabs>\n    <div slot=\"overview\">\n      <nve-card style=\"width: 100%; min-width: 320px;\">\n        <nve-card-header>\n          <div nve-layout=\"column gap:xs\">\n            <h2 nve-text=\"heading sm bold\">Overview</h2>\n            <p nve-text=\"body sm muted\">Quick status for the current tab group.</p>\n          </div>\n        </nve-card-header>\n        <nve-card-content>\n          <dl nve-layout=\"grid gap:sm\">\n            <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">State</dt>\n            <dd nve-layout=\"span:8\" nve-text=\"body\">Overview is active</dd>\n            <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Signal</dt>\n            <dd nve-layout=\"span:8\" nve-text=\"body\">Use this tab for a summary of the current workflow</dd>\n            <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Tip</dt>\n            <dd nve-layout=\"span:8\" nve-text=\"body\">Pair it with external controls for quick switching</dd>\n          </dl>\n        </nve-card-content>\n      </nve-card>\n    </div>\n    <div slot=\"details\">\n      <nve-card style=\"width: 100%; min-width: 320px;\">\n        <nve-card-header>\n          <div nve-layout=\"column gap:xs\">\n            <h2 nve-text=\"heading sm bold\">Details</h2>\n            <p nve-text=\"body sm muted\">Deeper context for follow-up tasks and implementation notes.</p>\n          </div>\n        </nve-card-header>\n        <nve-card-content>\n          <dl nve-layout=\"grid gap:sm\">\n            <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">State</dt>\n            <dd nve-layout=\"span:8\" nve-text=\"body\">Details are available on demand</dd>\n            <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Signal</dt>\n            <dd nve-layout=\"span:8\" nve-text=\"body\">Use this tab when readers need extra context</dd>\n            <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Tip</dt>\n            <dd nve-layout=\"span:8\" nve-text=\"body\">Keep the content specific to the selected tab</dd>\n          </dl>\n        </nve-card-content>\n      </nve-card>\n    </div>\n    <div slot=\"settings\">\n      <nve-card style=\"width: 100%; min-width: 320px;\">\n        <nve-card-header>\n          <div nve-layout=\"column gap:xs\">\n            <h2 nve-text=\"heading sm bold\">Settings</h2>\n            <p nve-text=\"body sm muted\">Preferences and coordination notes for the shared tab group.</p>\n          </div>\n        </nve-card-header>\n        <nve-card-content>\n          <dl nve-layout=\"grid gap:sm\">\n            <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">State</dt>\n            <dd nve-layout=\"span:8\" nve-text=\"body\">Settings remain in sync with the selected value</dd>\n            <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Signal</dt>\n            <dd nve-layout=\"span:8\" nve-text=\"body\">Useful for configuration and admin actions</dd>\n            <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Tip</dt>\n            <dd nve-layout=\"span:8\" nve-text=\"body\">Use external buttons when the layout needs extra actions</dd>\n          </dl>\n        </nve-card-content>\n      </nve-card>\n    </div>\n  </nve-tabs-group>\n\n  <div nve-layout=\"row gap:xs\">\n    <nve-button command=\"--toggle\" commandfor=\"tab-group-controls\" value=\"overview\">overview</nve-button>\n    <nve-button command=\"--toggle\" commandfor=\"tab-group-controls\" value=\"details\">details</nve-button>\n    <nve-button command=\"--toggle\" commandfor=\"tab-group-controls\" value=\"settings\">settings</nve-button>\n  </div>\n</div>`\n};\n"],"mappings":";AAGA,IAAA,IAAS"}

package/dist/tabs/tabs.examples.json

@@ -74,7 +74,7 @@
     {
       "id": "tabs-links",
       "name": "Links",
-      "template": "<nve-tabs>\n  <nve-tabs-item selected>\n    <a href=\"./docs/elements/tabs/#links\">Tab 1</a>\n  </nve-tabs-item>\n  <nve-tabs-item>\n    <a href=\"./docs/elements/tabs/#links\">Tab 2</a>\n  </nve-tabs-item>\n  <nve-tabs-item>\n    <a href=\"/docs/elements/tabs/#links\">Tab 3</a>\n  </nve-tabs-item>\n</nve-tabs>\n",
+      "template": "<nve-tabs>\n  <nve-tabs-item selected>\n    <a href=\"#links\">Tab 1</a>\n  </nve-tabs-item>\n  <nve-tabs-item>\n    <a href=\"#links\">Tab 2</a>\n  </nve-tabs-item>\n  <nve-tabs-item>\n    <a href=\"#links\">Tab 3</a>\n  </nve-tabs-item>\n</nve-tabs>\n",
       "summary": "Tabs with link navigation for routing-based tab switching and page navigation.",
       "description": "",
       "composition": false,

package/dist/tabs/tabs2.js

@@ -20,7 +20,7 @@ var _ = class extends h(f) {
 	static {
 		this.metadata = {
 			tag: "nve-tabs-item",
-			version: "2.0.2",
+			version: "2.0.3",
 			parents: ["nve-tabs"]
 		};
 	}
@@ -53,7 +53,7 @@ var v = class extends f {
 	static {
 		this.metadata = {
 			tag: "nve-tabs",
-			version: "2.0.2",
+			version: "2.0.3",
 			children: ["nve-tabs-item"]
 		};
 	}

package/dist/tag/tag2.js

@@ -17,7 +17,7 @@ var p = class extends d(c) {
 	static {
 		this.metadata = {
 			tag: "nve-tag",
-			version: "2.0.2"
+			version: "2.0.3"
 		};
 	}
 	static {

package/dist/textarea/textarea2.js

@@ -9,7 +9,7 @@ var r = class extends t {
 	static {
 		this.metadata = {
 			tag: "nve-textarea",
-			version: "2.0.2"
+			version: "2.0.3"
 		};
 	}
 };

package/dist/time/time2.js

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

package/dist/toast/toast2.js

@@ -23,7 +23,7 @@ var g = class extends f {
 	static {
 		this.metadata = {
 			tag: "nve-toast",
-			version: "2.0.2"
+			version: "2.0.3"
 		};
 	}
 	static {

package/dist/toggletip/toggletip-footer.d.ts

@@ -8,7 +8,7 @@ import { LitElement } from 'lit';
  * @cssprop --border-top
  * @cssprop --padding
  * @cssprop --gap
- *
+ * @aria https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/
  */
 export declare class ToggletipFooter extends LitElement {
     static styles: import('lit').CSSResult[];

package/dist/toggletip/toggletip-footer2.js

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

package/dist/toggletip/toggletip-footer2.js.map

@@ -1 +1 @@
-{"version":3,"file":"toggletip-footer2.js","names":[],"sources":["../../src/toggletip/toggletip-footer.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, LitElement } from 'lit';\nimport { audit, useStyles } from '@nvidia-elements/core/internal';\nimport styles from './toggletip-footer.css?inline';\n\n/**\n * @element nve-toggletip-footer\n * @description Provides a designated area at the bottom of a toggletip for actions or supplementary information.\n * @since 0.38.0\n * @entrypoint \\@nvidia-elements/core/toggletip\n * @slot - default slot for the toggletip footer\n * @cssprop --border-top\n * @cssprop --padding\n * @cssprop --gap\n *\n */\n@audit()\nexport class ToggletipFooter extends LitElement {\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-toggletip-footer',\n    version: '0.0.0',\n    parents: ['nve-toggletip']\n  };\n\n  render() {\n    return html`\n      <div internal-host>\n        <slot></slot>\n      </div>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.slot = 'footer';\n  }\n}\n"],"mappings":";;;;;;AAmBO,IAAA,IAAA,cAA8B,EAAW;;gBAC9B,EAAU,CAAC,CAAM,CAAC;;;kBAEP;GACzB,KAAK;GACL,SAAS;GACT,SAAS,CAAC,eAAe;EAC3B;;CAEA,SAAS;EACP,OAAO,CAAI;CAKb;CAEA,oBAAoB;EAElB,AADA,MAAM,kBAAkB,GACxB,KAAK,OAAO;CACd;AACF;OAtBC,EAAM,CAAA,GAAA,CAAA"}
+{"version":3,"file":"toggletip-footer2.js","names":[],"sources":["../../src/toggletip/toggletip-footer.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, LitElement } from 'lit';\nimport { audit, useStyles } from '@nvidia-elements/core/internal';\nimport styles from './toggletip-footer.css?inline';\n\n/**\n * @element nve-toggletip-footer\n * @description Provides a designated area at the bottom of a toggletip for actions or supplementary information.\n * @since 0.38.0\n * @entrypoint \\@nvidia-elements/core/toggletip\n * @slot - default slot for the toggletip footer\n * @cssprop --border-top\n * @cssprop --padding\n * @cssprop --gap\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/\n */\n@audit()\nexport class ToggletipFooter extends LitElement {\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-toggletip-footer',\n    version: '0.0.0',\n    parents: ['nve-toggletip']\n  };\n\n  render() {\n    return html`\n      <div internal-host>\n        <slot></slot>\n      </div>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.slot = 'footer';\n  }\n}\n"],"mappings":";;;;;;AAmBO,IAAA,IAAA,cAA8B,EAAW;;gBAC9B,EAAU,CAAC,CAAM,CAAC;;;kBAEP;GACzB,KAAK;GACL,SAAS;GACT,SAAS,CAAC,eAAe;EAC3B;;CAEA,SAAS;EACP,OAAO,CAAI;CAKb;CAEA,oBAAoB;EAElB,AADA,MAAM,kBAAkB,GACxB,KAAK,OAAO;CACd;AACF;OAtBC,EAAM,CAAA,GAAA,CAAA"}

package/dist/toggletip/toggletip-header.d.ts

@@ -8,7 +8,7 @@ import { LitElement } from 'lit';
  * @cssprop --border-bottom
  * @cssprop --padding
  * @cssprop --border-radius
- *
+ * @aria https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/
  */
 export declare class ToggletipHeader extends LitElement {
     static styles: import('lit').CSSResult[];

package/dist/toggletip/toggletip-header2.js

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

package/dist/toggletip/toggletip-header2.js.map

@@ -1 +1 @@
-{"version":3,"file":"toggletip-header2.js","names":[],"sources":["../../src/toggletip/toggletip-header.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, LitElement } from 'lit';\nimport { audit, useStyles } from '@nvidia-elements/core/internal';\nimport styles from './toggletip-header.css?inline';\n\n/**\n * @element nve-toggletip-header\n * @description Displays a title or contextual label at the top of a toggletip to categorize its contents.\n * @since 0.38.0\n * @entrypoint \\@nvidia-elements/core/toggletip\n * @slot - default slot for the toggletip header\n * @cssprop --border-bottom\n * @cssprop --padding\n * @cssprop --border-radius\n *\n */\n@audit()\nexport class ToggletipHeader extends LitElement {\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-toggletip-header',\n    version: '0.0.0',\n    parents: ['nve-toggletip']\n  };\n\n  render() {\n    return html`\n      <div internal-host>\n        <slot></slot>\n      </div>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.slot = 'header';\n  }\n}\n"],"mappings":";;;;;;AAmBO,IAAA,IAAA,cAA8B,EAAW;;gBAC9B,EAAU,CAAC,CAAM,CAAC;;;kBAEP;GACzB,KAAK;GACL,SAAS;GACT,SAAS,CAAC,eAAe;EAC3B;;CAEA,SAAS;EACP,OAAO,CAAI;CAKb;CAEA,oBAAoB;EAElB,AADA,MAAM,kBAAkB,GACxB,KAAK,OAAO;CACd;AACF;OAtBC,EAAM,CAAA,GAAA,CAAA"}
+{"version":3,"file":"toggletip-header2.js","names":[],"sources":["../../src/toggletip/toggletip-header.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, LitElement } from 'lit';\nimport { audit, useStyles } from '@nvidia-elements/core/internal';\nimport styles from './toggletip-header.css?inline';\n\n/**\n * @element nve-toggletip-header\n * @description Displays a title or contextual label at the top of a toggletip to categorize its contents.\n * @since 0.38.0\n * @entrypoint \\@nvidia-elements/core/toggletip\n * @slot - default slot for the toggletip header\n * @cssprop --border-bottom\n * @cssprop --padding\n * @cssprop --border-radius\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/\n */\n@audit()\nexport class ToggletipHeader extends LitElement {\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-toggletip-header',\n    version: '0.0.0',\n    parents: ['nve-toggletip']\n  };\n\n  render() {\n    return html`\n      <div internal-host>\n        <slot></slot>\n      </div>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.slot = 'header';\n  }\n}\n"],"mappings":";;;;;;AAmBO,IAAA,IAAA,cAA8B,EAAW;;gBAC9B,EAAU,CAAC,CAAM,CAAC;;;kBAEP;GACzB,KAAK;GACL,SAAS;GACT,SAAS,CAAC,eAAe;EAC3B;;CAEA,SAAS;EACP,OAAO,CAAI;CAKb;CAEA,oBAAoB;EAElB,AADA,MAAM,kBAAkB,GACxB,KAAK,OAAO;CACd;AACF;OAtBC,EAAM,CAAA,GAAA,CAAA"}

package/dist/toggletip/toggletip2.js

@@ -24,7 +24,7 @@ var g = class extends f {
 	static {
 		this.metadata = {
 			tag: "nve-toggletip",
-			version: "2.0.2"
+			version: "2.0.3"
 		};
 	}
 	static {

package/dist/toolbar/toolbar2.js

@@ -21,7 +21,7 @@ var f = class extends c {
 	static {
 		this.metadata = {
 			tag: "nve-toolbar",
-			version: "2.0.2"
+			version: "2.0.3"
 		};
 	}
 	static {

package/dist/tooltip/tooltip2.js

@@ -19,7 +19,7 @@ var d = class extends s {
 	static {
 		this.metadata = {
 			tag: "nve-tooltip",
-			version: "2.0.2"
+			version: "2.0.3"
 		};
 	}
 	render() {

package/dist/tree/tree-node2.js

@@ -41,7 +41,7 @@ var E = class extends b {
 	static {
 		this.metadata = {
 			tag: "nve-tree-node",
-			version: "2.0.2",
+			version: "2.0.3",
 			parents: ["nve-tree", "nve-tree-node"]
 		};
 	}

package/dist/tree/tree2.js

@@ -22,7 +22,7 @@ var m = class extends d {
 	static {
 		this.metadata = {
 			tag: "nve-tree",
-			version: "2.0.2",
+			version: "2.0.3",
 			children: ["nve-tree-node"]
 		};
 	}

package/dist/week/week2.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nvidia-elements/core",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "release": {
     "extends": "../../release.config.js"
   },
@@ -952,10 +952,10 @@
     "typescript": "6.0.3",
     "vite": "8.0.16",
     "vitest": "4.1.9",
+    "@internals/eslint": "0.0.0",
     "@internals/testing": "0.0.0",
     "@internals/vite": "0.0.0",
     "@nvidia-elements/lint": "2.0.1",
-    "@internals/eslint": "0.0.0",
     "@nvidia-elements/styles": "^2.0.2"
   },
   "wireit": {