@nvidia-elements/core 2.20.0 → 2.20.2

package/dist/switch/switch.js

@@ -1,6 +1,5 @@
-//#region src/switch/switch.css?inline
+// src/switch/switch.css?inline
 var e = ":host{--cursor: pointer;--border-radius: var(--nve-ref-border-radius-xxl);--border-width: var(--nve-ref-border-width-sm);--border: var(--border-width) solid transparent;--background: var(--nve-sys-interaction-field-background);--width: var(--nve-ref-size-1000);--height: var(--nve-ref-size-500);--padding: 0 var(--nve-ref-size-50);--anchor-width: calc(var(--nve-ref-size-300) + var(--nve-ref-size-50));--anchor-height: calc(var(--nve-ref-size-300) + var(--nve-ref-size-50));--anchor-border-radius: var(--nve-ref-border-radius-xxl);--anchor-background: var(--nve-sys-interaction-disabled-color);display:inline-block;contain:layout}::slotted(input){cursor:var(--cursor)!important;appearance:none!important;position:absolute!important;inset:0!important;width:var(--width)!important;height:var(--height)!important;border-radius:var(--border-radius)!important;margin:0!important;padding:0!important}[input]{align-items:center;outline-offset:2px}[input] slot{cursor:var(--cursor);border-radius:var(--border-radius);border:var(--border);background:var(--background);height:var(--height);width:var(--width);padding:var(--padding);min-height:auto;display:flex!important;align-items:center;transition:background-color var(--nve-ref-animation-duration-150) ease;position:relative}[input] slot:after{border-radius:var(--anchor-border-radius);background:var(--anchor-background);height:var(--anchor-height);width:var(--anchor-width);display:inline-block;content:\"\";transition:transform var(--nve-ref-animation-duration-250) cubic-bezier(.12,.32,.54,2);pointer-events:none;will-change:transform}:host(:state(checked)){--background: var(--accent-color);--anchor-background: var(--nve-sys-text-white-color)}:host(:state(checked)) [input] slot:after{transform:translate(calc(calc(var(--width) / 2) - var(--border-width)))}:host(:state(checked):state(dirty)) [input] slot:after{animation:thumb-bounce var(--nve-ref-animation-duration-250) cubic-bezier(.12,.32,.54,2)}@keyframes thumb-bounce{0%{transform:translate(0) scale(1)}20%{transform:translate(calc(var(--width) / 4)) scale(1.15)}60%{transform:translate(calc(var(--width) / 1.8)) scale(.95)}to{transform:translate(calc(var(--width) / 2)) scale(1)}}";
-//#endregion
 export { e as default };
 
 //# sourceMappingURL=switch.js.map

package/dist/switch/switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"switch.js","names":[],"sources":["../../src/switch/switch.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n:host {\n  --cursor: pointer;\n  --border-radius: var(--nve-ref-border-radius-xxl);\n  --border-width: var(--nve-ref-border-width-sm);\n  --border: var(--border-width) solid transparent;\n  --background: var(--nve-sys-interaction-field-background);\n  --width: var(--nve-ref-size-1000);\n  --height: var(--nve-ref-size-500);\n  --padding: 0 var(--nve-ref-size-50);\n  --anchor-width: calc(var(--nve-ref-size-300) + var(--nve-ref-size-50));\n  --anchor-height: calc(var(--nve-ref-size-300) + var(--nve-ref-size-50));\n  --anchor-border-radius: var(--nve-ref-border-radius-xxl);\n  --anchor-background: var(--nve-sys-interaction-disabled-color);\n  display: inline-block;\n  contain: layout;\n}\n\n::slotted(input) {\n  cursor: var(--cursor) !important;\n  appearance: none !important;\n  position: absolute !important;\n  inset: 0 !important;\n  width: var(--width) !important;\n  height: var(--height) !important;\n  border-radius: var(--border-radius) !important;\n  margin: 0 !important;\n  padding: 0 !important;\n}\n\n[input] {\n  align-items: center;\n  outline-offset: 2px;\n}\n\n[input] slot {\n  cursor: var(--cursor);\n  border-radius: var(--border-radius);\n  border: var(--border);\n  background: var(--background);\n  height: var(--height);\n  width: var(--width);\n  padding: var(--padding);\n  min-height: auto;\n  display: flex !important;\n  align-items: center;\n  transition: background-color var(--nve-ref-animation-duration-150) ease;\n  position: relative;\n}\n\n[input] slot::after {\n  border-radius: var(--anchor-border-radius);\n  background: var(--anchor-background);\n  height: var(--anchor-height);\n  width: var(--anchor-width);\n  display: inline-block;\n  content: '';\n  transition: transform var(--nve-ref-animation-duration-250) cubic-bezier(0.12, 0.32, 0.54, 2);\n  pointer-events: none;\n  will-change: transform;\n}\n\n:host(:state(checked)) {\n  --background: var(--accent-color);\n  --anchor-background: var(--nve-sys-text-white-color);\n}\n\n:host(:state(checked)) [input] slot::after {\n  transform: translate(calc(calc(var(--width) / 2) - var(--border-width)), 0);\n}\n\n:host(:state(checked):state(dirty)) [input] slot::after {\n  animation: thumb-bounce var(--nve-ref-animation-duration-250) cubic-bezier(0.12, 0.32, 0.54, 2);\n}\n\n@keyframes thumb-bounce {\n  0% {\n    transform: translate(0, 0) scale(1);\n  }\n\n  20% {\n    transform: translate(calc(var(--width) / 4), 0) scale(1.15);\n  }\n\n  60% {\n    transform: translate(calc(var(--width) / 1.8), 0) scale(0.95);\n  }\n\n  100% {\n    transform: translate(calc(var(--width) / 2), 0) scale(1);\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"switch.js","names":["switch_default"],"sources":["../../src/switch/switch.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n:host {\n  --cursor: pointer;\n  --border-radius: var(--nve-ref-border-radius-xxl);\n  --border-width: var(--nve-ref-border-width-sm);\n  --border: var(--border-width) solid transparent;\n  --background: var(--nve-sys-interaction-field-background);\n  --width: var(--nve-ref-size-1000);\n  --height: var(--nve-ref-size-500);\n  --padding: 0 var(--nve-ref-size-50);\n  --anchor-width: calc(var(--nve-ref-size-300) + var(--nve-ref-size-50));\n  --anchor-height: calc(var(--nve-ref-size-300) + var(--nve-ref-size-50));\n  --anchor-border-radius: var(--nve-ref-border-radius-xxl);\n  --anchor-background: var(--nve-sys-interaction-disabled-color);\n  display: inline-block;\n  contain: layout;\n}\n\n::slotted(input) {\n  cursor: var(--cursor) !important;\n  appearance: none !important;\n  position: absolute !important;\n  inset: 0 !important;\n  width: var(--width) !important;\n  height: var(--height) !important;\n  border-radius: var(--border-radius) !important;\n  margin: 0 !important;\n  padding: 0 !important;\n}\n\n[input] {\n  align-items: center;\n  outline-offset: 2px;\n}\n\n[input] slot {\n  cursor: var(--cursor);\n  border-radius: var(--border-radius);\n  border: var(--border);\n  background: var(--background);\n  height: var(--height);\n  width: var(--width);\n  padding: var(--padding);\n  min-height: auto;\n  display: flex !important;\n  align-items: center;\n  transition: background-color var(--nve-ref-animation-duration-150) ease;\n  position: relative;\n}\n\n[input] slot::after {\n  border-radius: var(--anchor-border-radius);\n  background: var(--anchor-background);\n  height: var(--anchor-height);\n  width: var(--anchor-width);\n  display: inline-block;\n  content: '';\n  transition: transform var(--nve-ref-animation-duration-250) cubic-bezier(0.12, 0.32, 0.54, 2);\n  pointer-events: none;\n  will-change: transform;\n}\n\n:host(:state(checked)) {\n  --background: var(--accent-color);\n  --anchor-background: var(--nve-sys-text-white-color);\n}\n\n:host(:state(checked)) [input] slot::after {\n  transform: translate(calc(calc(var(--width) / 2) - var(--border-width)), 0);\n}\n\n:host(:state(checked):state(dirty)) [input] slot::after {\n  animation: thumb-bounce var(--nve-ref-animation-duration-250) cubic-bezier(0.12, 0.32, 0.54, 2);\n}\n\n@keyframes thumb-bounce {\n  0% {\n    transform: translate(0, 0) scale(1);\n  }\n\n  20% {\n    transform: translate(calc(var(--width) / 4), 0) scale(1.15);\n  }\n\n  60% {\n    transform: translate(calc(var(--width) / 1.8), 0) scale(0.95);\n  }\n\n  100% {\n    transform: translate(calc(var(--width) / 2), 0) scale(1);\n  }\n}\n"],"mappings":""}

package/dist/switch/switch2.js

@@ -1,10 +1,10 @@
 import { audit as e } from "../internal/controllers/audit.controller.js";
 import { hostAttr as t } from "../internal/decorators/host-attr.js";
 import { useStyles as n } from "../internal/styles/index.js";
-import r from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js";
+import r from "../_virtual/_@oxc-project_runtime@0.155.0/helpers/esm/decorate.js";
 import { Control as i } from "../forms/control/control2.js";
 import a from "./switch.js";
-//#region src/switch/switch.ts
+// src/switch/switch.ts
 var o = class extends i {
 	constructor(...e) {
 		super(...e), this.nveControl = "inline";
@@ -15,7 +15,7 @@ var o = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-switch",
-			version: "2.20.0",
+			version: "2.20.2",
 			children: [
 				"label",
 				"input",
@@ -25,7 +25,6 @@ var o = class extends i {
 	}
 };
 r([t({ attribute: "nve-control" })], o.prototype, "nveControl", void 0), o = r([e()], o);
-//#endregion
 export { o as Switch };
 
 //# sourceMappingURL=switch2.js.map

package/dist/switch/switch2.js.map

@@ -1 +1 @@
-{"version":3,"file":"switch2.js","names":[],"sources":["../../src/switch/switch.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { CSSResult } from 'lit';\nimport { audit, hostAttr, useStyles } from '@nvidia-elements/core/internal';\nimport { Control } from '@nvidia-elements/core/forms';\nimport styles from './switch.css?inline';\n\n/**\n * @element nve-switch\n * @description A switch is a control that enables users to switch between two mutually exclusive options (on or off, checked or unchecked) through a single click or tap.\n * @documentation https://nvidia.github.io/elements/docs/elements/switch/\n * @since 0.3.0\n * @entrypoint \\@nvidia-elements/core/switch\n * @cssprop --cursor\n * @cssprop --border-radius\n * @cssprop --border-width\n * @cssprop --border\n * @cssprop --background\n * @cssprop --width\n * @cssprop --height\n * @cssprop --anchor-width\n * @cssprop --anchor-height\n * @cssprop --anchor-border-radius\n * @cssprop --anchor-background\n * @cssprop --padding\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/switch/\n */\n@audit()\nexport class Switch extends Control {\n  @hostAttr({ attribute: 'nve-control' }) protected nveControl = 'inline';\n\n  static styles: CSSResult[] = useStyles([...Control.styles, styles]);\n\n  static readonly metadata = {\n    tag: 'nve-switch',\n    version: '0.0.0',\n    children: ['label', 'input', 'nve-control-message']\n  };\n}\n"],"mappings":";;;;;;;AA6BO,IAAM,IAAN,cAAqB,EAAQ;;EAC6B,aAAA,KAAA,aAAA;;;EAElC,KAAA,SAAA,EAAU,CAAC,GAAG,EAAQ,QAAQ,CAAM,CAAC;;;EAEvC,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;GACT,UAAU;IAAC;IAAS;IAAS;GAAqB;EACpD;;AACF;AATG,EAAA,CAAA,EAAS,EAAE,WAAW,cAAc,CAAC,CAAA,GAAA,EAAA,WAAA,cAAA,KAAA,CAAA,GAFvC,IAAA,EAAA,CAAA,EAAM,CAAA,GAAA,CAAA"}
+{"version":3,"file":"switch2.js","names":["styles","_decorate","__decorate","switch_default","Switch","Control","_args","useStyles","hostAttr","audit"],"sources":["../../src/switch/switch.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { CSSResult } from 'lit';\nimport { audit, hostAttr, useStyles } from '@nvidia-elements/core/internal';\nimport { Control } from '@nvidia-elements/core/forms';\nimport styles from './switch.css?inline';\n\n/**\n * @element nve-switch\n * @description A switch is a control that enables users to switch between two mutually exclusive options (on or off, checked or unchecked) through a single click or tap.\n * @documentation https://nvidia.github.io/elements/docs/elements/switch/\n * @since 0.3.0\n * @entrypoint \\@nvidia-elements/core/switch\n * @cssprop --cursor\n * @cssprop --border-radius\n * @cssprop --border-width\n * @cssprop --border\n * @cssprop --background\n * @cssprop --width\n * @cssprop --height\n * @cssprop --anchor-width\n * @cssprop --anchor-height\n * @cssprop --anchor-border-radius\n * @cssprop --anchor-background\n * @cssprop --padding\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/switch/\n */\n@audit()\nexport class Switch extends Control {\n  @hostAttr({ attribute: 'nve-control' }) protected nveControl = 'inline';\n\n  static styles: CSSResult[] = useStyles([...Control.styles, styles]);\n\n  static readonly metadata = {\n    tag: 'nve-switch',\n    version: '0.0.0',\n    children: ['label', 'input', 'nve-control-message']\n  };\n}\n"],"mappings":";;;;;;;AA6BO,IAAMI,IAAN,cAAqBC,EAAQ;;EAC6B,A,aAAA,KAAA,aAAA;;;EAElC,KAAA,SAAAE,EAAU,CAAC,GAAGF,EAAQ,QAAQL,CAAM,CAAC;;;EAEvC,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;GACT,UAAU;IAAC;IAAS;IAAS;GAAqB;EACpD;;AACF;AATGC,EAAA,CAAAO,EAAS,EAAE,WAAW,cAAc,CAAC,CAAA,GAAAJ,EAAA,WAAA,cAAA,KAAA,CAAA,GAFvC,IAAAH,EAAA,CAAAQ,EAAM,CAAA,GAAAL,CAAA"}

package/dist/tabs/define.js

@@ -3,6 +3,5 @@ import { TabsGroup as n } from "./tabs-group2.js";
 import { TabsItemGroup as r } from "./tabs-item-group2.js";
 import { define as i } from "@nvidia-elements/foundations/internal/define";
 i(t), i(r), i(e), i(n);
-//#endregion
 
 //# sourceMappingURL=define.js.map

package/dist/tabs/define.js.map

@@ -1 +1 @@
-{"version":3,"file":"define.js","names":[],"sources":["../../src/tabs/define.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { define } from '@nvidia-elements/foundations/internal/define';\nimport { TabsGroup, TabsItem, TabsItemGroup, Tabs } from '@nvidia-elements/core/tabs';\n\ndefine(TabsItem);\ndefine(TabsItemGroup);\ndefine(Tabs);\ndefine(TabsGroup);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nve-tabs-item': TabsItem;\n    'nve-tabs-item-group': TabsItemGroup;\n    'nve-tabs': Tabs;\n    'nve-tabs-group': TabsGroup;\n  }\n}\n"],"mappings":";;;;AAMA,EAAO,CAAQ,GACf,EAAO,CAAa,GACpB,EAAO,CAAI,GACX,EAAO,CAAS"}
+{"version":3,"file":"define.js","names":["define","TabsItem","TabsItemGroup","Tabs","TabsGroup"],"sources":["../../src/tabs/define.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { define } from '@nvidia-elements/foundations/internal/define';\nimport { TabsGroup, TabsItem, TabsItemGroup, Tabs } from '@nvidia-elements/core/tabs';\n\ndefine(TabsItem);\ndefine(TabsItemGroup);\ndefine(Tabs);\ndefine(TabsGroup);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nve-tabs-item': TabsItem;\n    'nve-tabs-item-group': TabsItemGroup;\n    'nve-tabs': Tabs;\n    'nve-tabs-group': TabsGroup;\n  }\n}\n"],"mappings":";;;;AAMAA,EAAOC,CAAQ,GACfD,EAAOE,CAAa,GACpBF,EAAOG,CAAI,GACXH,EAAOI,CAAS"}

package/dist/tabs/tabs-group.js

@@ -1,6 +1,5 @@
-//#region src/tabs/tabs-group.css?inline
+// src/tabs/tabs-group.css?inline
 var e = ":host{--padding: var(--nve-ref-space-sm) 0 0 0;display:block;width:100%}:host(:is([alignment=\"start\"],[alignment=\"end\"])){--padding: 0}[internal-host]{display:flex;flex-direction:column}:host(:is([alignment=\"start\"],[alignment=\"end\"])) [internal-host]{flex-direction:row;align-items:flex-start;gap:var(--nve-ref-space-lg)}:host([alignment=\"end\"]) [internal-host]{flex-direction:row-reverse}:host(:is([alignment=\"start\"],[alignment=\"end\"])) [internal-host]>slot:not([name]){flex-shrink:0}:host(:is([alignment=\"start\"],[alignment=\"end\"])) [internal-host]>slot[name]{flex:1;min-width:0}::slotted([slot]){display:block;padding:var(--padding)}::slotted([slot][hidden]){display:none!important}";
-//#endregion
 export { e as default };
 
 //# sourceMappingURL=tabs-group.js.map

package/dist/tabs/tabs-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs-group.js","names":[],"sources":["../../src/tabs/tabs-group.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n:host {\n  --padding: var(--nve-ref-space-sm) 0 0 0;\n  display: block;\n  width: 100%;\n}\n\n:host(:is([alignment='start'], [alignment='end'])) {\n  --padding: 0;\n}\n\n[internal-host] {\n  display: flex;\n  flex-direction: column;\n}\n\n:host(:is([alignment='start'], [alignment='end'])) [internal-host] {\n  flex-direction: row;\n  align-items: flex-start;\n  gap: var(--nve-ref-space-lg);\n}\n\n:host([alignment='end']) [internal-host] {\n  flex-direction: row-reverse;\n}\n\n:host(:is([alignment='start'], [alignment='end'])) [internal-host] > slot:not([name]) {\n  flex-shrink: 0;\n}\n\n:host(:is([alignment='start'], [alignment='end'])) [internal-host] > slot[name] {\n  flex: 1;\n  min-width: 0;\n}\n\n::slotted([slot]) {\n  display: block;\n  padding: var(--padding);\n}\n\n::slotted([slot][hidden]) {\n  display: none !important;\n}\n"],"mappings":""}
+{"version":3,"file":"tabs-group.js","names":["tabs_group_default"],"sources":["../../src/tabs/tabs-group.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n:host {\n  --padding: var(--nve-ref-space-sm) 0 0 0;\n  display: block;\n  width: 100%;\n}\n\n:host(:is([alignment='start'], [alignment='end'])) {\n  --padding: 0;\n}\n\n[internal-host] {\n  display: flex;\n  flex-direction: column;\n}\n\n:host(:is([alignment='start'], [alignment='end'])) [internal-host] {\n  flex-direction: row;\n  align-items: flex-start;\n  gap: var(--nve-ref-space-lg);\n}\n\n:host([alignment='end']) [internal-host] {\n  flex-direction: row-reverse;\n}\n\n:host(:is([alignment='start'], [alignment='end'])) [internal-host] > slot:not([name]) {\n  flex-shrink: 0;\n}\n\n:host(:is([alignment='start'], [alignment='end'])) [internal-host] > slot[name] {\n  flex: 1;\n  min-width: 0;\n}\n\n::slotted([slot]) {\n  display: block;\n  padding: var(--padding);\n}\n\n::slotted([slot][hidden]) {\n  display: none !important;\n}\n"],"mappings":""}

package/dist/tabs/tabs-group2.js

@@ -2,7 +2,7 @@ import { audit as e } from "../internal/controllers/audit.controller.js";
 import { generateId as t, sameOrderedStringArray as n, uniqueNonEmptyStrings as r } from "../internal/utils/dom.js";
 import { attachInternals as i } from "../internal/utils/a11y.js";
 import { useStyles as a } from "../internal/styles/index.js";
-import o from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js";
+import o from "../_virtual/_@oxc-project_runtime@0.155.0/helpers/esm/decorate.js";
 import { getTabItems as s } from "./utils.js";
 import { Tabs as c } from "./tabs2.js";
 import l from "./tabs-group.js";
@@ -10,7 +10,7 @@ import { LitElement as u, html as d } from "lit";
 import { property as f } from "lit/decorators/property.js";
 import { state as p } from "lit/decorators/state.js";
 import { queryAssignedElements as m } from "lit/decorators/query-assigned-elements.js";
-//#region src/tabs/tabs-group.ts
+// src/tabs/tabs-group.ts
 var h, g = class extends u {
 	static {
 		h = this;
@@ -34,7 +34,7 @@ var h, g = class extends u {
 	static {
 		this.metadata = {
 			tag: "nve-tabs-group",
-			version: "2.20.0",
+			version: "2.20.2",
 			children: ["nve-tabs"]
 		};
 	}
@@ -81,14 +81,10 @@ var h, g = class extends u {
 	}
 	#a() {
 		let e = this.#d(), t = r(e.map((e) => e.value)), n = this.#m(e);
-		if (!n) {
-			e.forEach((e) => e.selected = !1), this.#s(t, "");
-			return;
-		}
-		this.#o(e, n, {
+		n ? this.#o(e, n, {
 			emitEvent: !1,
 			nextPanelValues: t
-		});
+		}) : (e.forEach((e) => e.selected = !1), this.#s(t, ""));
 	}
 	#o(e, t, n) {
 		let { emitEvent: i } = n, a = n.nextPanelValues ?? r(e.map((e) => e.value)), o = this.selectedValue !== t.value || !t.selected || e.some((e) => e !== t && e.selected);
@@ -111,14 +107,10 @@ var h, g = class extends u {
 	}
 	#l(e, n) {
 		let r = n.get(e.name), i = e.assignedElements({ flatten: !0 });
-		if (!r) {
-			i.forEach((e) => {
-				e.hidden = !0;
-			});
-			return;
-		}
-		r.id ||= t(), i.forEach((n, i) => {
+		r ? (r.id ||= t(), i.forEach((n, i) => {
 			n.id ||= t(), !r.hasAttribute("aria-controls") && i === 0 && r.setAttribute("aria-controls", n.id), n.hasAttribute("aria-labelledby") || n.setAttribute("aria-labelledby", r.id), n.hasAttribute("role") || n.setAttribute("role", "tabpanel"), n.hidden = e.name !== this.selectedValue;
+		})) : i.forEach((e) => {
+			e.hidden = !0;
 		});
 	}
 	#u() {
@@ -142,7 +134,6 @@ o([m({ flatten: !0 })], g.prototype, "defaultSlotElements", void 0), o([f({
 	type: String,
 	reflect: !0
 })], g.prototype, "alignment", void 0), o([p()], g.prototype, "panelValues", void 0), o([p()], g.prototype, "selectedValue", void 0), g = h = o([e()], g);
-//#endregion
 export { g as TabsGroup };
 
 //# sourceMappingURL=tabs-group2.js.map

package/dist/tabs/tabs-group2.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs-group2.js","names":[],"sources":["../../src/tabs/tabs-group.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { PropertyValues } from 'lit';\nimport { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { queryAssignedElements } from 'lit/decorators/query-assigned-elements.js';\nimport { state } from 'lit/decorators/state.js';\nimport {\n  attachInternals,\n  audit,\n  generateId,\n  sameOrderedStringArray,\n  uniqueNonEmptyStrings,\n  useStyles\n} from '@nvidia-elements/core/internal';\nimport { Tabs, type TabsItem } from './tabs.js';\nimport styles from './tabs-group.css?inline';\nimport { getTabItems } from './utils.js';\n\n/** Invoker command source for `--toggle` (e.g. `nve-tabs-item` with `value`). */\ntype TabsGroupCommandSource = HTMLElement & {\n  disabled?: boolean;\n  value?: string | null;\n};\n\n/** `command` event from Invoker Commands; `source` is the control that fired. */\ntype TabsGroupCommandEvent = Event & {\n  command?: string;\n  source?: TabsGroupCommandSource | null;\n};\n\n/** Payload for the composed `select` event when the active tab value changes via command. */\ntype TabsGroupSelectDetail = { value: string };\n\n/** Arranges the tab strip and slot-matched panels: stacked column (`top`), or sidebar row with tabs at inline-start (`start`) or inline-end (`end`). */\nexport type TabsGroupAlignment = 'top' | 'start' | 'end';\n\n/**\n * @element nve-tabs-group\n * @description Coordinates tabs with matching panel content using Invoker Commands and slot-matched panels.\n * @documentation https://nvidia.github.io/elements/docs/elements/tabs/\n * @since 1.67.0\n * @entrypoint \\@nvidia-elements/core/tabs\n * @command --toggle - Select the matching tab and reveal the panel whose slot matches the invoker value.\n * @event select - Dispatched when the selected tab value changes after an invoker `--toggle` updates selection\n * @slot - Default slot for a single nve-tabs element. Do not use behavior-select on nve-tabs when using this group.\n * @slot {value} - Named panel content where the slot name matches a nve-tabs-item value.\n * @cssprop --padding\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/tabs/\n * @responsive false\n */\n@audit()\nexport class TabsGroup extends LitElement {\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-tabs-group',\n    version: '0.0.0',\n    children: ['nve-tabs']\n  };\n\n  /** Options for observing the slotted `nve-tabs` subtree (tab list / item attribute changes). */\n  protected static readonly subtreeObserverInit = {\n    childList: true,\n    subtree: true,\n    attributes: true,\n    attributeFilter: ['disabled', 'id', 'selected', 'value']\n  } as const satisfies MutationObserverInit;\n\n  @queryAssignedElements({ flatten: true }) private defaultSlotElements!: HTMLElement[];\n\n  /**\n   * Arranges the tab strip relative to slot-matched panels: stacked column (`top`), or sidebar row with tabs at\n   * inline-start (`start`) or inline-end (`end`) beside the panel region.\n   */\n  @property({ type: String, reflect: true }) alignment: TabsGroupAlignment = 'top';\n\n  @state() private panelValues: string[] = [];\n\n  @state() private selectedValue = '';\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  #tabsObserver?: MutationObserver;\n\n  /**\n   * Renders the default slot (single `nve-tabs`) plus one named `<slot name={value}>` per distinct selectable\n   * `nve-tabs-item` value. `#syncPanelSlot` applies panel visibility and ARIA from `selectedValue`.\n   */\n  render() {\n    return html`\n      <div internal-host>\n        <slot @slotchange=${this.#handleDefaultSlotChange}></slot>\n        ${this.panelValues.map(value => html`<slot name=${value} @slotchange=${this.#handlePanelSlotChange}></slot>`)}\n      </div>\n    `;\n  }\n\n  // --- Lifecycle & command ---\n\n  connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    this._internals.role = 'group';\n    this.addEventListener('command', this.#handleCommand as EventListener);\n  }\n\n  firstUpdated() {\n    void this.updateComplete.then(() => {\n      if (!this.isConnected) {\n        return;\n      }\n\n      this.#syncFromTabs();\n    });\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener('command', this.#handleCommand as EventListener);\n    this.#tabsObserver?.disconnect();\n  }\n\n  updated(changedProperties: PropertyValues<this>) {\n    super.updated(changedProperties);\n\n    if (!this.#tabsObserver) {\n      this.#observeTabs();\n    }\n\n    // `@state()` fields are not in `PropertyValues<this>` keys; cast for membership checks.\n    const props = changedProperties as ReadonlyMap<PropertyKey, unknown>;\n    if (props.has('panelValues') || props.has('selectedValue')) {\n      this.#syncPanels();\n    }\n  }\n\n  #handleDefaultSlotChange = (): void => {\n    this.#observeTabs();\n    this.#syncFromTabs();\n  };\n\n  #handlePanelSlotChange = (): void => {\n    this.#syncPanels();\n  };\n\n  /**\n   * Handles Invoker `--toggle` on a tab item: selects the matching `nve-tabs-item` and syncs panels.\n   * Ignores non-toggle commands and invokers without a non-empty string `value`.\n   */\n  #handleCommand = (event: TabsGroupCommandEvent): void => {\n    if (event.command !== '--toggle') {\n      return;\n    }\n\n    const value = event.source?.value;\n    if (typeof value !== 'string' || !value.length) {\n      return;\n    }\n\n    const tabItems = this.#getTabItems();\n    const tabItem = tabItems.find(item => this.#isSelectableTab(item) && item.value === value);\n    if (!tabItem) {\n      return;\n    }\n\n    this.#setActiveTab(tabItems, tabItem, { emitEvent: true });\n  };\n\n  // --- Tab strip sync (tabs → state) ---\n\n  /** Attaches a single `MutationObserver` on the slotted `nve-tabs` element to mirror tab list changes into state. */\n  #observeTabs(): void {\n    this.#tabsObserver?.disconnect();\n\n    const tabs = this.#getTabsElement();\n    if (!tabs) {\n      return;\n    }\n\n    this.#tabsObserver = new MutationObserver(() => this.#syncFromTabs());\n    this.#tabsObserver.observe(tabs, TabsGroup.subtreeObserverInit);\n  }\n\n  /**\n   * Reads the current tab items: derives ordered `panelValues` for render, resolves which tab should be active,\n   * and commits selection. Called on slot change, subtree mutations, and after mount.\n   */\n  #syncFromTabs(): void {\n    const tabItems = this.#getTabItems();\n    const nextPanelValues = uniqueNonEmptyStrings(tabItems.map(item => item.value));\n\n    const selectedTab = this.#resolveSelectedTab(tabItems);\n\n    if (!selectedTab) {\n      tabItems.forEach(item => (item.selected = false));\n      this.#commitState(nextPanelValues, '');\n      return;\n    }\n\n    this.#setActiveTab(tabItems, selectedTab, { emitEvent: false, nextPanelValues });\n  }\n\n  /**\n   * Sets exactly one selected tab, updates `panelValues` / `selectedValue`, and optionally dispatches `select`.\n   *\n   * @param emitEvent - When true (command path), dispatches `select` if selection actually changed.\n   */\n  #setActiveTab(\n    tabItems: TabsItem[],\n    nextTab: TabsItem,\n    options: { emitEvent: boolean; nextPanelValues?: string[] }\n  ): void {\n    const { emitEvent } = options;\n    const nextPanelValues = options.nextPanelValues ?? uniqueNonEmptyStrings(tabItems.map(item => item.value));\n    // True when the effective selection differs from the prior committed state (value, flags, or multi-select).\n    // `select` is only dispatched when both `emitEvent` (invoker/command path) and `changed` are true.\n    const changed =\n      this.selectedValue !== nextTab.value ||\n      !nextTab.selected ||\n      tabItems.some(item => item !== nextTab && item.selected);\n\n    tabItems.forEach(item => {\n      item.selected = item === nextTab;\n    });\n\n    this.#commitState(nextPanelValues, nextTab.value);\n\n    if (emitEvent && changed) {\n      this.dispatchEvent(\n        new CustomEvent<TabsGroupSelectDetail>('select', {\n          bubbles: true,\n          composed: true,\n          detail: { value: nextTab.value }\n        })\n      );\n    }\n  }\n\n  /** Updates reactive state for panel slot names and the active tab value without touching the tab items. */\n  #commitState(nextPanelValues: string[], nextSelectedValue: string): void {\n    if (!sameOrderedStringArray(this.panelValues, nextPanelValues)) {\n      this.panelValues = nextPanelValues;\n    }\n\n    if (this.selectedValue !== nextSelectedValue) {\n      this.selectedValue = nextSelectedValue;\n    }\n  }\n\n  // --- Panel sync (state → panels & ARIA) ---\n\n  /** For each named panel slot, wires `hidden` and tab↔panel ARIA ids to match `selectedValue`. */\n  #syncPanels(): void {\n    const tabItems = this.#getTabItems();\n    const tabMap = new Map(\n      tabItems.filter(item => this.#isSelectableTab(item)).map(item => [item.value, item] satisfies [string, TabsItem])\n    );\n\n    this.#getPanelSlots().forEach(slot => {\n      this.#syncPanelSlot(slot, tabMap);\n    });\n  }\n\n  /**\n   * If no selectable tab exists for `slot.name`, hides all assigned nodes. Otherwise shows only the panel(s)\n   * for the active value and assigns `role=\"tabpanel\"` / `aria-labelledby` when missing.\n   */\n  #syncPanelSlot(slot: HTMLSlotElement, tabMap: ReadonlyMap<string, TabsItem>): void {\n    const tabItem = tabMap.get(slot.name);\n    const panels = slot.assignedElements({ flatten: true }) as HTMLElement[];\n\n    if (!tabItem) {\n      panels.forEach(panel => {\n        panel.hidden = true;\n      });\n      return;\n    }\n\n    tabItem.id ||= generateId();\n\n    panels.forEach((panel, index) => {\n      panel.id ||= generateId();\n\n      if (!tabItem.hasAttribute('aria-controls') && index === 0) {\n        tabItem.setAttribute('aria-controls', panel.id);\n      }\n\n      if (!panel.hasAttribute('aria-labelledby')) {\n        panel.setAttribute('aria-labelledby', tabItem.id);\n      }\n\n      if (!panel.hasAttribute('role')) {\n        panel.setAttribute('role', 'tabpanel');\n      }\n\n      const isActive = slot.name === this.selectedValue;\n      panel.hidden = !isActive;\n    });\n  }\n\n  // --- DOM queries ---\n\n  /** Resolves the single slotted `nve-tabs` (default slot), with a light-DOM fallback for edge timing. */\n  #getTabsElement(): Tabs | undefined {\n    const el =\n      this.defaultSlotElements.find(element => element.localName === Tabs.metadata.tag) ??\n      this.querySelector(Tabs.metadata.tag);\n    return el instanceof Tabs ? el : undefined;\n  }\n\n  #getTabItems(): TabsItem[] {\n    return getTabItems(Array.from(this.#getTabsElement()?.children ?? []));\n  }\n\n  #getPanelSlots(): HTMLSlotElement[] {\n    return Array.from(this.renderRoot.querySelectorAll<HTMLSlotElement>('slot[name]'));\n  }\n\n  /** Selectable tabs have a non-empty `value` and are not `disabled`. */\n  #isSelectableTab(tabItem: TabsItem): tabItem is TabsItem & { value: string } {\n    return typeof tabItem.value === 'string' && tabItem.value.length > 0 && !tabItem.disabled;\n  }\n\n  /** Prefer the selectable tab that is already selected; otherwise the first selectable tab. */\n  #resolveSelectedTab(tabItems: readonly TabsItem[]): TabsItem | undefined {\n    return (\n      tabItems.find(item => this.#isSelectableTab(item) && item.selected) ??\n      tabItems.find(item => this.#isSelectableTab(item))\n    );\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"tabs-group2.js","names":["styles","_decorate","__decorate","tabs_group_default","_TabsGroup","TabsGroup","LitElement","_args","#handleDefaultSlotChange","#observeTabs","#syncFromTabs","#handlePanelSlotChange","#syncPanels","#handleCommand","event","value","tabItems","#getTabItems","tabItem","#isSelectableTab","item","#setActiveTab","useStyles","attachInternals","#tabsObserver","changedProperties","props","tabs","#getTabsElement","nextPanelValues","uniqueNonEmptyStrings","selectedTab","#resolveSelectedTab","#commitState","options","changed","nextTab","emitEvent","sameOrderedStringArray","nextSelectedValue","tabMap","#getPanelSlots","#syncPanelSlot","slot","panels","generateId","index","panel","el","element","Tabs","getTabItems","queryAssignedElements","property","state","audit"],"sources":["../../src/tabs/tabs-group.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { PropertyValues } from 'lit';\nimport { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { queryAssignedElements } from 'lit/decorators/query-assigned-elements.js';\nimport { state } from 'lit/decorators/state.js';\nimport {\n  attachInternals,\n  audit,\n  generateId,\n  sameOrderedStringArray,\n  uniqueNonEmptyStrings,\n  useStyles\n} from '@nvidia-elements/core/internal';\nimport { Tabs, type TabsItem } from './tabs.js';\nimport styles from './tabs-group.css?inline';\nimport { getTabItems } from './utils.js';\n\n/** Invoker command source for `--toggle` (e.g. `nve-tabs-item` with `value`). */\ntype TabsGroupCommandSource = HTMLElement & {\n  disabled?: boolean;\n  value?: string | null;\n};\n\n/** `command` event from Invoker Commands; `source` is the control that fired. */\ntype TabsGroupCommandEvent = Event & {\n  command?: string;\n  source?: TabsGroupCommandSource | null;\n};\n\n/** Payload for the composed `select` event when the active tab value changes via command. */\ntype TabsGroupSelectDetail = { value: string };\n\n/** Arranges the tab strip and slot-matched panels: stacked column (`top`), or sidebar row with tabs at inline-start (`start`) or inline-end (`end`). */\nexport type TabsGroupAlignment = 'top' | 'start' | 'end';\n\n/**\n * @element nve-tabs-group\n * @description Coordinates tabs with matching panel content using Invoker Commands and slot-matched panels.\n * @documentation https://nvidia.github.io/elements/docs/elements/tabs/\n * @since 1.67.0\n * @entrypoint \\@nvidia-elements/core/tabs\n * @command --toggle - Select the matching tab and reveal the panel whose slot matches the invoker value.\n * @event select - Dispatched when the selected tab value changes after an invoker `--toggle` updates selection\n * @slot - Default slot for a single nve-tabs element. Do not use behavior-select on nve-tabs when using this group.\n * @slot {value} - Named panel content where the slot name matches a nve-tabs-item value.\n * @cssprop --padding\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/tabs/\n * @responsive false\n */\n@audit()\nexport class TabsGroup extends LitElement {\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-tabs-group',\n    version: '0.0.0',\n    children: ['nve-tabs']\n  };\n\n  /** Options for observing the slotted `nve-tabs` subtree (tab list / item attribute changes). */\n  protected static readonly subtreeObserverInit = {\n    childList: true,\n    subtree: true,\n    attributes: true,\n    attributeFilter: ['disabled', 'id', 'selected', 'value']\n  } as const satisfies MutationObserverInit;\n\n  @queryAssignedElements({ flatten: true }) private defaultSlotElements!: HTMLElement[];\n\n  /**\n   * Arranges the tab strip relative to slot-matched panels: stacked column (`top`), or sidebar row with tabs at\n   * inline-start (`start`) or inline-end (`end`) beside the panel region.\n   */\n  @property({ type: String, reflect: true }) alignment: TabsGroupAlignment = 'top';\n\n  @state() private panelValues: string[] = [];\n\n  @state() private selectedValue = '';\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  #tabsObserver?: MutationObserver;\n\n  /**\n   * Renders the default slot (single `nve-tabs`) plus one named `<slot name={value}>` per distinct selectable\n   * `nve-tabs-item` value. `#syncPanelSlot` applies panel visibility and ARIA from `selectedValue`.\n   */\n  render() {\n    return html`\n      <div internal-host>\n        <slot @slotchange=${this.#handleDefaultSlotChange}></slot>\n        ${this.panelValues.map(value => html`<slot name=${value} @slotchange=${this.#handlePanelSlotChange}></slot>`)}\n      </div>\n    `;\n  }\n\n  // --- Lifecycle & command ---\n\n  connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    this._internals.role = 'group';\n    this.addEventListener('command', this.#handleCommand as EventListener);\n  }\n\n  firstUpdated() {\n    void this.updateComplete.then(() => {\n      if (!this.isConnected) {\n        return;\n      }\n\n      this.#syncFromTabs();\n    });\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener('command', this.#handleCommand as EventListener);\n    this.#tabsObserver?.disconnect();\n  }\n\n  updated(changedProperties: PropertyValues<this>) {\n    super.updated(changedProperties);\n\n    if (!this.#tabsObserver) {\n      this.#observeTabs();\n    }\n\n    // `@state()` fields are not in `PropertyValues<this>` keys; cast for membership checks.\n    const props = changedProperties as ReadonlyMap<PropertyKey, unknown>;\n    if (props.has('panelValues') || props.has('selectedValue')) {\n      this.#syncPanels();\n    }\n  }\n\n  #handleDefaultSlotChange = (): void => {\n    this.#observeTabs();\n    this.#syncFromTabs();\n  };\n\n  #handlePanelSlotChange = (): void => {\n    this.#syncPanels();\n  };\n\n  /**\n   * Handles Invoker `--toggle` on a tab item: selects the matching `nve-tabs-item` and syncs panels.\n   * Ignores non-toggle commands and invokers without a non-empty string `value`.\n   */\n  #handleCommand = (event: TabsGroupCommandEvent): void => {\n    if (event.command !== '--toggle') {\n      return;\n    }\n\n    const value = event.source?.value;\n    if (typeof value !== 'string' || !value.length) {\n      return;\n    }\n\n    const tabItems = this.#getTabItems();\n    const tabItem = tabItems.find(item => this.#isSelectableTab(item) && item.value === value);\n    if (!tabItem) {\n      return;\n    }\n\n    this.#setActiveTab(tabItems, tabItem, { emitEvent: true });\n  };\n\n  // --- Tab strip sync (tabs → state) ---\n\n  /** Attaches a single `MutationObserver` on the slotted `nve-tabs` element to mirror tab list changes into state. */\n  #observeTabs(): void {\n    this.#tabsObserver?.disconnect();\n\n    const tabs = this.#getTabsElement();\n    if (!tabs) {\n      return;\n    }\n\n    this.#tabsObserver = new MutationObserver(() => this.#syncFromTabs());\n    this.#tabsObserver.observe(tabs, TabsGroup.subtreeObserverInit);\n  }\n\n  /**\n   * Reads the current tab items: derives ordered `panelValues` for render, resolves which tab should be active,\n   * and commits selection. Called on slot change, subtree mutations, and after mount.\n   */\n  #syncFromTabs(): void {\n    const tabItems = this.#getTabItems();\n    const nextPanelValues = uniqueNonEmptyStrings(tabItems.map(item => item.value));\n\n    const selectedTab = this.#resolveSelectedTab(tabItems);\n\n    if (!selectedTab) {\n      tabItems.forEach(item => (item.selected = false));\n      this.#commitState(nextPanelValues, '');\n      return;\n    }\n\n    this.#setActiveTab(tabItems, selectedTab, { emitEvent: false, nextPanelValues });\n  }\n\n  /**\n   * Sets exactly one selected tab, updates `panelValues` / `selectedValue`, and optionally dispatches `select`.\n   *\n   * @param emitEvent - When true (command path), dispatches `select` if selection actually changed.\n   */\n  #setActiveTab(\n    tabItems: TabsItem[],\n    nextTab: TabsItem,\n    options: { emitEvent: boolean; nextPanelValues?: string[] }\n  ): void {\n    const { emitEvent } = options;\n    const nextPanelValues = options.nextPanelValues ?? uniqueNonEmptyStrings(tabItems.map(item => item.value));\n    // True when the effective selection differs from the prior committed state (value, flags, or multi-select).\n    // `select` is only dispatched when both `emitEvent` (invoker/command path) and `changed` are true.\n    const changed =\n      this.selectedValue !== nextTab.value ||\n      !nextTab.selected ||\n      tabItems.some(item => item !== nextTab && item.selected);\n\n    tabItems.forEach(item => {\n      item.selected = item === nextTab;\n    });\n\n    this.#commitState(nextPanelValues, nextTab.value);\n\n    if (emitEvent && changed) {\n      this.dispatchEvent(\n        new CustomEvent<TabsGroupSelectDetail>('select', {\n          bubbles: true,\n          composed: true,\n          detail: { value: nextTab.value }\n        })\n      );\n    }\n  }\n\n  /** Updates reactive state for panel slot names and the active tab value without touching the tab items. */\n  #commitState(nextPanelValues: string[], nextSelectedValue: string): void {\n    if (!sameOrderedStringArray(this.panelValues, nextPanelValues)) {\n      this.panelValues = nextPanelValues;\n    }\n\n    if (this.selectedValue !== nextSelectedValue) {\n      this.selectedValue = nextSelectedValue;\n    }\n  }\n\n  // --- Panel sync (state → panels & ARIA) ---\n\n  /** For each named panel slot, wires `hidden` and tab↔panel ARIA ids to match `selectedValue`. */\n  #syncPanels(): void {\n    const tabItems = this.#getTabItems();\n    const tabMap = new Map(\n      tabItems.filter(item => this.#isSelectableTab(item)).map(item => [item.value, item] satisfies [string, TabsItem])\n    );\n\n    this.#getPanelSlots().forEach(slot => {\n      this.#syncPanelSlot(slot, tabMap);\n    });\n  }\n\n  /**\n   * If no selectable tab exists for `slot.name`, hides all assigned nodes. Otherwise shows only the panel(s)\n   * for the active value and assigns `role=\"tabpanel\"` / `aria-labelledby` when missing.\n   */\n  #syncPanelSlot(slot: HTMLSlotElement, tabMap: ReadonlyMap<string, TabsItem>): void {\n    const tabItem = tabMap.get(slot.name);\n    const panels = slot.assignedElements({ flatten: true }) as HTMLElement[];\n\n    if (!tabItem) {\n      panels.forEach(panel => {\n        panel.hidden = true;\n      });\n      return;\n    }\n\n    tabItem.id ||= generateId();\n\n    panels.forEach((panel, index) => {\n      panel.id ||= generateId();\n\n      if (!tabItem.hasAttribute('aria-controls') && index === 0) {\n        tabItem.setAttribute('aria-controls', panel.id);\n      }\n\n      if (!panel.hasAttribute('aria-labelledby')) {\n        panel.setAttribute('aria-labelledby', tabItem.id);\n      }\n\n      if (!panel.hasAttribute('role')) {\n        panel.setAttribute('role', 'tabpanel');\n      }\n\n      const isActive = slot.name === this.selectedValue;\n      panel.hidden = !isActive;\n    });\n  }\n\n  // --- DOM queries ---\n\n  /** Resolves the single slotted `nve-tabs` (default slot), with a light-DOM fallback for edge timing. */\n  #getTabsElement(): Tabs | undefined {\n    const el =\n      this.defaultSlotElements.find(element => element.localName === Tabs.metadata.tag) ??\n      this.querySelector(Tabs.metadata.tag);\n    return el instanceof Tabs ? el : undefined;\n  }\n\n  #getTabItems(): TabsItem[] {\n    return getTabItems(Array.from(this.#getTabsElement()?.children ?? []));\n  }\n\n  #getPanelSlots(): HTMLSlotElement[] {\n    return Array.from(this.renderRoot.querySelectorAll<HTMLSlotElement>('slot[name]'));\n  }\n\n  /** Selectable tabs have a non-empty `value` and are not `disabled`. */\n  #isSelectableTab(tabItem: TabsItem): tabItem is TabsItem & { value: string } {\n    return typeof tabItem.value === 'string' && tabItem.value.length > 0 && !tabItem.disabled;\n  }\n\n  /** Prefer the selectable tab that is already selected; otherwise the first selectable tab. */\n  #resolveSelectedTab(tabItems: readonly TabsItem[]): TabsItem | undefined {\n    return (\n      tabItems.find(item => this.#isSelectableTab(item) && item.selected) ??\n      tabItems.find(item => this.#isSelectableTab(item))\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/tabs/tabs-item-group.js

@@ -1,6 +1,5 @@
-//#region src/tabs/tabs-item-group.css?inline
+// src/tabs/tabs-item-group.css?inline
 var e = ":host{display:block;flex-shrink:0;min-inline-size:0;--gap: var(--nve-ref-space-xs);--height: var(--nve-ref-size-800);--padding: 0 var(--nve-ref-size-200);--width: 100%;--border-radius: var(--nve-ref-border-radius-sm)}[internal-host]{display:flex;align-items:center;position:relative;isolation:isolate;inset:var(--border-inset, 0);gap:var(--gap);height:var(--height);width:var(--width);padding:var(--padding);border-radius:var(--border-radius);background-image:linear-gradient(color-mix(in oklab,var(--nve-sys-interaction-state-base) 100%,var(--nve-sys-interaction-state-mix) var(--_tabs-group-interaction-state-ratio, 0)) 0 0)}slot:not([name]){display:flex;flex:1 1 auto;min-inline-size:0}::slotted(nve-tabs-item){contain:none;flex:1 1 auto;min-inline-size:0;--padding: 0;--height: inherit;--width: 100%;--border-inset: 0;--border-radius: inherit;--_tabs-item-position: static;--_tabs-item-background: none}::slotted(nve-tabs-item):before{content:\"\";position:absolute;z-index:-1;inset:0;border-radius:var(--border-radius);background-image:linear-gradient(color-mix(in oklab,var(--nve-sys-interaction-state-base) 100%,var(--nve-sys-interaction-state-mix) var(--nve-sys-interaction-state-ratio)) 0 0)}slot[name]{display:contents}::slotted([slot=\"prefix\"]),::slotted([slot=\"suffix\"]){position:relative;z-index:2;flex:none;align-self:center}";
-//#endregion
 export { e as default };
 
 //# sourceMappingURL=tabs-item-group.js.map

package/dist/tabs/tabs-item-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs-item-group.js","names":[],"sources":["../../src/tabs/tabs-item-group.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n:host {\n  display: block;\n  flex-shrink: 0;\n  min-inline-size: 0;\n  --gap: var(--nve-ref-space-xs);\n  --height: var(--nve-ref-size-800);\n  --padding: 0 var(--nve-ref-size-200);\n  --width: 100%;\n  --border-radius: var(--nve-ref-border-radius-sm);\n}\n\n[internal-host] {\n  display: flex;\n  align-items: center;\n  position: relative;\n  isolation: isolate;\n  inset: var(--border-inset, 0);\n  gap: var(--gap);\n  height: var(--height);\n  width: var(--width);\n  padding: var(--padding);\n  border-radius: var(--border-radius);\n  background-image: linear-gradient(\n    color-mix(\n        in oklab,\n        var(--nve-sys-interaction-state-base) 100%,\n        var(--nve-sys-interaction-state-mix) var(--_tabs-group-interaction-state-ratio, 0)\n      )\n      0 0\n  );\n}\n\nslot:not([name]) {\n  display: flex;\n  flex: 1 1 auto;\n  min-inline-size: 0;\n}\n\n::slotted(nve-tabs-item) {\n  contain: none;\n  flex: 1 1 auto;\n  min-inline-size: 0;\n  --padding: 0;\n  --height: inherit;\n  --width: 100%;\n  --border-inset: 0;\n  --border-radius: inherit;\n  --_tabs-item-position: static;\n  --_tabs-item-background: none;\n}\n\n::slotted(nve-tabs-item)::before {\n  content: '';\n  position: absolute;\n  z-index: -1;\n  inset: 0;\n  border-radius: var(--border-radius);\n  background-image: linear-gradient(\n    color-mix(\n        in oklab,\n        var(--nve-sys-interaction-state-base) 100%,\n        var(--nve-sys-interaction-state-mix) var(--nve-sys-interaction-state-ratio)\n      )\n      0 0\n  );\n}\n\nslot[name] {\n  display: contents;\n}\n\n::slotted([slot='prefix']),\n::slotted([slot='suffix']) {\n  position: relative;\n  z-index: 2;\n  flex: none;\n  align-self: center;\n}\n"],"mappings":""}
+{"version":3,"file":"tabs-item-group.js","names":["tabs_item_group_default"],"sources":["../../src/tabs/tabs-item-group.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n:host {\n  display: block;\n  flex-shrink: 0;\n  min-inline-size: 0;\n  --gap: var(--nve-ref-space-xs);\n  --height: var(--nve-ref-size-800);\n  --padding: 0 var(--nve-ref-size-200);\n  --width: 100%;\n  --border-radius: var(--nve-ref-border-radius-sm);\n}\n\n[internal-host] {\n  display: flex;\n  align-items: center;\n  position: relative;\n  isolation: isolate;\n  inset: var(--border-inset, 0);\n  gap: var(--gap);\n  height: var(--height);\n  width: var(--width);\n  padding: var(--padding);\n  border-radius: var(--border-radius);\n  background-image: linear-gradient(\n    color-mix(\n        in oklab,\n        var(--nve-sys-interaction-state-base) 100%,\n        var(--nve-sys-interaction-state-mix) var(--_tabs-group-interaction-state-ratio, 0)\n      )\n      0 0\n  );\n}\n\nslot:not([name]) {\n  display: flex;\n  flex: 1 1 auto;\n  min-inline-size: 0;\n}\n\n::slotted(nve-tabs-item) {\n  contain: none;\n  flex: 1 1 auto;\n  min-inline-size: 0;\n  --padding: 0;\n  --height: inherit;\n  --width: 100%;\n  --border-inset: 0;\n  --border-radius: inherit;\n  --_tabs-item-position: static;\n  --_tabs-item-background: none;\n}\n\n::slotted(nve-tabs-item)::before {\n  content: '';\n  position: absolute;\n  z-index: -1;\n  inset: 0;\n  border-radius: var(--border-radius);\n  background-image: linear-gradient(\n    color-mix(\n        in oklab,\n        var(--nve-sys-interaction-state-base) 100%,\n        var(--nve-sys-interaction-state-mix) var(--nve-sys-interaction-state-ratio)\n      )\n      0 0\n  );\n}\n\nslot[name] {\n  display: contents;\n}\n\n::slotted([slot='prefix']),\n::slotted([slot='suffix']) {\n  position: relative;\n  z-index: 2;\n  flex: none;\n  align-self: center;\n}\n"],"mappings":""}

package/dist/tabs/tabs-item-group2.js

@@ -1,10 +1,10 @@
 import { audit as e } from "../internal/controllers/audit.controller.js";
 import { useStyles as t } from "../internal/styles/index.js";
-import n from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js";
+import n from "../_virtual/_@oxc-project_runtime@0.155.0/helpers/esm/decorate.js";
 import r from "./tabs-item-group.js";
 import { LitElement as i, html as a, nothing as o } from "lit";
 import { state as s } from "lit/decorators/state.js";
-//#region src/tabs/tabs-item-group.ts
+// src/tabs/tabs-item-group.ts
 var c = class extends i {
 	constructor(...e) {
 		super(...e), this.accessoryTabEnabled = !0;
@@ -15,7 +15,7 @@ var c = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-tabs-item-group",
-			version: "2.20.0",
+			version: "2.20.2",
 			parents: ["nve-tabs"],
 			children: ["nve-tabs-item"]
 		};
@@ -28,7 +28,6 @@ var c = class extends i {
 	}
 };
 n([s()], c.prototype, "accessoryTabEnabled", void 0), c = n([e()], c);
-//#endregion
 export { c as TabsItemGroup };
 
 //# sourceMappingURL=tabs-item-group2.js.map

package/dist/tabs/tabs-item-group2.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs-item-group2.js","names":[],"sources":["../../src/tabs/tabs-item-group.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, LitElement, nothing } from 'lit';\nimport { state } from 'lit/decorators/state.js';\nimport { audit, useStyles } from '@nvidia-elements/core/internal';\nimport styles from './tabs-item-group.css?inline';\n\n/**\n * @element nve-tabs-item-group\n * @description Groups a tab item with application-owned accessory controls.\n * @documentation https://nvidia.github.io/elements/docs/elements/tabs/\n * @since 0.0.0\n * @entrypoint \\@nvidia-elements/core/tabs\n * @slot - A single nve-tabs-item.\n * @slot prefix - Controls before the tab item.\n * @slot suffix - Controls after the tab item.\n * @cssprop --gap - Spacing between the tab item and accessories.\n * @cssprop --height\n * @cssprop --padding\n * @cssprop --width\n * @cssprop --border-radius\n */\n@audit()\nexport class TabsItemGroup extends LitElement {\n  /** @private */\n  @state() accessoryTabEnabled = true;\n\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-tabs-item-group',\n    version: '0.0.0',\n    parents: ['nve-tabs'],\n    children: ['nve-tabs-item']\n  };\n\n  render() {\n    return html`\n      <div internal-host>\n        <slot name=\"prefix\" tabindex=${this.accessoryTabEnabled ? nothing : -1}></slot>\n        <slot></slot>\n        <slot name=\"suffix\" tabindex=${this.accessoryTabEnabled ? nothing : -1}></slot>\n      </div>\n    `;\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.accessoryTabEnabled = true;\n  }\n}\n"],"mappings":";;;;;;;AAwBO,IAAM,IAAN,cAA4B,EAAW;;EAEb,aAAA,KAAA,sBAAA;;;EAEf,KAAA,SAAA,EAAU,CAAC,CAAM,CAAC;;;EAEP,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;GACT,SAAS,CAAC,UAAU;GACpB,UAAU,CAAC,eAAe;EAC5B;;CAEA,SAAS;EACP,OAAO,CAAI,oDAEwB,KAAK,sBAAsB,IAAU,GAAG,sDAExC,KAAK,sBAAsB,IAAU,GAAG;CAG7E;CAEA,uBAAuB;EAErB,AADA,MAAM,qBAAqB,GAC3B,KAAK,sBAAsB;CAC7B;AACF;AAzBG,EAAA,CAAA,EAAM,CAAA,GAAA,EAAA,WAAA,uBAAA,KAAA,CAAA,GAHR,IAAA,EAAA,CAAA,EAAM,CAAA,GAAA,CAAA"}
+{"version":3,"file":"tabs-item-group2.js","names":["styles","_decorate","__decorate","tabs_item_group_default","TabsItemGroup","LitElement","_args","useStyles","nothing","state","audit"],"sources":["../../src/tabs/tabs-item-group.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, LitElement, nothing } from 'lit';\nimport { state } from 'lit/decorators/state.js';\nimport { audit, useStyles } from '@nvidia-elements/core/internal';\nimport styles from './tabs-item-group.css?inline';\n\n/**\n * @element nve-tabs-item-group\n * @description Groups a tab item with application-owned accessory controls.\n * @documentation https://nvidia.github.io/elements/docs/elements/tabs/\n * @since 0.0.0\n * @entrypoint \\@nvidia-elements/core/tabs\n * @slot - A single nve-tabs-item.\n * @slot prefix - Controls before the tab item.\n * @slot suffix - Controls after the tab item.\n * @cssprop --gap - Spacing between the tab item and accessories.\n * @cssprop --height\n * @cssprop --padding\n * @cssprop --width\n * @cssprop --border-radius\n */\n@audit()\nexport class TabsItemGroup extends LitElement {\n  /** @private */\n  @state() accessoryTabEnabled = true;\n\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-tabs-item-group',\n    version: '0.0.0',\n    parents: ['nve-tabs'],\n    children: ['nve-tabs-item']\n  };\n\n  render() {\n    return html`\n      <div internal-host>\n        <slot name=\"prefix\" tabindex=${this.accessoryTabEnabled ? nothing : -1}></slot>\n        <slot></slot>\n        <slot name=\"suffix\" tabindex=${this.accessoryTabEnabled ? nothing : -1}></slot>\n      </div>\n    `;\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.accessoryTabEnabled = true;\n  }\n}\n"],"mappings":";;;;;;;AAwBO,IAAMI,IAAN,cAA4BC,EAAW;;EAEb,A,aAAA,KAAA,sBAAA;;;EAEf,KAAA,SAAAE,EAAU,CAACP,CAAM,CAAC;;;EAEP,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;GACT,SAAS,CAAC,UAAU;GACpB,UAAU,CAAC,eAAe;EAC5B;;CAEA,SAAS;EACP,OAAO,CAAI,oDAEwB,KAAK,sBAAsBQ,IAAU,GAAG,sDAExC,KAAK,sBAAsBA,IAAU,GAAG;CAG7E;CAEA,uBAAuB;EAErB,AADA,MAAM,qBAAqB,GAC3B,KAAK,sBAAsB;CAC7B;AACF;AAzBGP,EAAA,CAAAQ,EAAM,CAAA,GAAAL,EAAA,WAAA,uBAAA,KAAA,CAAA,GAHR,IAAAH,EAAA,CAAAS,EAAM,CAAA,GAAAN,CAAA"}

package/dist/tabs/tabs-item.js

@@ -1,6 +1,5 @@
-//#region src/tabs/tabs-item.css?inline
+// src/tabs/tabs-item.css?inline
 var e = ":host{--width: 100%;--gap: var(--nve-ref-space-xs);--padding: 0 var(--nve-ref-size-200);--font-size: var(--nve-ref-font-size-100);--font-weight: var(--nve-ref-font-weight-medium);--border-radius: var(--nve-ref-border-radius-sm);--color: var(--nve-sys-text-muted-color);--height: var(--nve-ref-size-800);--cursor: pointer;--text-transform: initial;--nve-sys-interaction-state-ratio: 0}[internal-host]{width:var(--width);gap:var(--gap);padding:var(--padding);height:var(--height);color:var(--color);font-weight:var(--font-weight);font-size:var(--font-size);line-height:var(--nve-ref-font-size-500);background-image:var( --_tabs-item-background, linear-gradient( color-mix( in oklab, var(--nve-sys-interaction-state-base) 100%, var(--nve-sys-interaction-state-mix) var(--nve-sys-interaction-state-ratio) ) 0 0 ) )!important;inset:var(--border-inset);border-radius:var(--border-radius);cursor:var(--cursor);text-transform:var(--text-transform);display:inline-flex;align-items:center;border:0;position:var(--_tabs-item-position, relative)}:host(:state(selected)){--color: var(--nve-sys-text-emphasis-color);--font-weight: var(--nve-ref-font-weight-semibold)}:host(:state(selected)) ::slotted(nve-icon){--color: var(--nve-sys-interaction-color)}:host(:hover:not(:state(disabled),:state(selected))){--color: var(--nve-sys-text-emphasis-color);--nve-sys-interaction-state-ratio: var(--nve-sys-interaction-state-ratio-hover)}:host(:state(disabled)){--color: var(--nve-sys-interaction-disabled-color);--cursor: not-allowed}:host(:is(:focus,:state(focused))) [internal-host]{outline-offset:-3px;outline:5px auto -webkit-focus-ring-color;outline:Highlight solid 2px}slot:not([name])::slotted(a){text-decoration:var(--text-decoration)!important;color:var(--color)!important;gap:var(--gap)!important;display:flex!important;align-items:center!important;min-inline-size:0;outline:0}slot:not([name])::slotted(a):after{display:block;content:\" \";inset:0;position:absolute;z-index:1}#label{display:flex;align-items:center;gap:var(--gap);flex:1 1 auto;min-inline-size:0;overflow:hidden;white-space:nowrap}slot[name]{display:contents}::slotted([slot=\"prefix\"]),::slotted([slot=\"suffix\"]){flex:none;align-self:center}";
-//#endregion
 export { e as default };
 
 //# sourceMappingURL=tabs-item.js.map

package/dist/tabs/tabs-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs-item.js","names":[],"sources":["../../src/tabs/tabs-item.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n:host {\n  --width: 100%;\n  --gap: var(--nve-ref-space-xs);\n  --padding: 0 var(--nve-ref-size-200);\n  --font-size: var(--nve-ref-font-size-100);\n  --font-weight: var(--nve-ref-font-weight-medium);\n  --border-radius: var(--nve-ref-border-radius-sm);\n  --color: var(--nve-sys-text-muted-color);\n  --height: var(--nve-ref-size-800);\n  --cursor: pointer;\n  --text-transform: initial;\n  --nve-sys-interaction-state-ratio: 0;\n}\n\n[internal-host] {\n  width: var(--width);\n  gap: var(--gap);\n  padding: var(--padding);\n  height: var(--height);\n  color: var(--color);\n  font-weight: var(--font-weight);\n  font-size: var(--font-size);\n  line-height: var(--nve-ref-font-size-500);\n  background-image: var(\n    --_tabs-item-background,\n    linear-gradient(\n      color-mix(\n          in oklab,\n          var(--nve-sys-interaction-state-base) 100%,\n          var(--nve-sys-interaction-state-mix) var(--nve-sys-interaction-state-ratio)\n        )\n        0 0\n    )\n  ) !important;\n  inset: var(--border-inset);\n  border-radius: var(--border-radius);\n  cursor: var(--cursor);\n  text-transform: var(--text-transform);\n  display: inline-flex;\n  align-items: center;\n  border: 0;\n  position: var(--_tabs-item-position, relative);\n}\n\n:host(:state(selected)) {\n  --color: var(--nve-sys-text-emphasis-color);\n  --font-weight: var(--nve-ref-font-weight-semibold);\n}\n\n:host(:state(selected)) ::slotted(nve-icon) {\n  --color: var(--nve-sys-interaction-color);\n}\n\n:host(:hover:not(:state(disabled), :state(selected))) {\n  --color: var(--nve-sys-text-emphasis-color);\n  --nve-sys-interaction-state-ratio: var(--nve-sys-interaction-state-ratio-hover);\n}\n\n:host(:state(disabled)) {\n  --color: var(--nve-sys-interaction-disabled-color);\n  --cursor: not-allowed;\n}\n\n:host(:is(:focus, :state(focused))) [internal-host] {\n  outline-offset: -3px;\n  outline: 5px auto -webkit-focus-ring-color; /* var(--nve-ref-outline-webkit) */\n  outline: Highlight solid 2px; /* --nve-ref-outline */\n}\n\nslot:not([name])::slotted(a) {\n  text-decoration: var(--text-decoration) !important;\n  color: var(--color) !important;\n  gap: var(--gap) !important;\n  display: flex !important;\n  align-items: center !important;\n  min-inline-size: 0;\n  outline: 0;\n}\n\nslot:not([name])::slotted(a)::after {\n  display: block;\n  content: ' ';\n  inset: 0;\n  position: absolute;\n  z-index: 1;\n}\n\n#label {\n  display: flex;\n  align-items: center;\n  gap: var(--gap);\n  flex: 1 1 auto;\n  min-inline-size: 0;\n  overflow: hidden;\n  white-space: nowrap;\n}\n\nslot[name] {\n  display: contents;\n}\n\n::slotted([slot='prefix']),\n::slotted([slot='suffix']) {\n  flex: none;\n  align-self: center;\n}\n"],"mappings":""}
+{"version":3,"file":"tabs-item.js","names":["tabs_item_default"],"sources":["../../src/tabs/tabs-item.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n:host {\n  --width: 100%;\n  --gap: var(--nve-ref-space-xs);\n  --padding: 0 var(--nve-ref-size-200);\n  --font-size: var(--nve-ref-font-size-100);\n  --font-weight: var(--nve-ref-font-weight-medium);\n  --border-radius: var(--nve-ref-border-radius-sm);\n  --color: var(--nve-sys-text-muted-color);\n  --height: var(--nve-ref-size-800);\n  --cursor: pointer;\n  --text-transform: initial;\n  --nve-sys-interaction-state-ratio: 0;\n}\n\n[internal-host] {\n  width: var(--width);\n  gap: var(--gap);\n  padding: var(--padding);\n  height: var(--height);\n  color: var(--color);\n  font-weight: var(--font-weight);\n  font-size: var(--font-size);\n  line-height: var(--nve-ref-font-size-500);\n  background-image: var(\n    --_tabs-item-background,\n    linear-gradient(\n      color-mix(\n          in oklab,\n          var(--nve-sys-interaction-state-base) 100%,\n          var(--nve-sys-interaction-state-mix) var(--nve-sys-interaction-state-ratio)\n        )\n        0 0\n    )\n  ) !important;\n  inset: var(--border-inset);\n  border-radius: var(--border-radius);\n  cursor: var(--cursor);\n  text-transform: var(--text-transform);\n  display: inline-flex;\n  align-items: center;\n  border: 0;\n  position: var(--_tabs-item-position, relative);\n}\n\n:host(:state(selected)) {\n  --color: var(--nve-sys-text-emphasis-color);\n  --font-weight: var(--nve-ref-font-weight-semibold);\n}\n\n:host(:state(selected)) ::slotted(nve-icon) {\n  --color: var(--nve-sys-interaction-color);\n}\n\n:host(:hover:not(:state(disabled), :state(selected))) {\n  --color: var(--nve-sys-text-emphasis-color);\n  --nve-sys-interaction-state-ratio: var(--nve-sys-interaction-state-ratio-hover);\n}\n\n:host(:state(disabled)) {\n  --color: var(--nve-sys-interaction-disabled-color);\n  --cursor: not-allowed;\n}\n\n:host(:is(:focus, :state(focused))) [internal-host] {\n  outline-offset: -3px;\n  outline: 5px auto -webkit-focus-ring-color; /* var(--nve-ref-outline-webkit) */\n  outline: Highlight solid 2px; /* --nve-ref-outline */\n}\n\nslot:not([name])::slotted(a) {\n  text-decoration: var(--text-decoration) !important;\n  color: var(--color) !important;\n  gap: var(--gap) !important;\n  display: flex !important;\n  align-items: center !important;\n  min-inline-size: 0;\n  outline: 0;\n}\n\nslot:not([name])::slotted(a)::after {\n  display: block;\n  content: ' ';\n  inset: 0;\n  position: absolute;\n  z-index: 1;\n}\n\n#label {\n  display: flex;\n  align-items: center;\n  gap: var(--gap);\n  flex: 1 1 auto;\n  min-inline-size: 0;\n  overflow: hidden;\n  white-space: nowrap;\n}\n\nslot[name] {\n  display: contents;\n}\n\n::slotted([slot='prefix']),\n::slotted([slot='suffix']) {\n  flex: none;\n  align-self: center;\n}\n"],"mappings":""}

package/dist/tabs/tabs.examples.js

@@ -1,6 +1,5 @@
-//#region src/tabs/tabs.examples.ts
+// src/tabs/tabs.examples.ts
 var e = "";
-//#endregion
 export { e as default };
 
 //# sourceMappingURL=tabs.examples.js.map

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';\nimport '@nvidia-elements/core/icon-button/define.js';\nimport '@nvidia-elements/core/dropdown/define.js';\nimport '@nvidia-elements/core/menu/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  command=\"--toggle\" commandfor=\"tab-group-default\" value=\"overview\">Overview</nve-tabs-item>\n    <nve-tabs-item selected 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 * @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 Add icons and notification indicators around tab labels.\n * @description Add Icons before tab labels and Dots after them using the `prefix` and `suffix` slots.\n */\nexport const PrefixAndSuffix = {\n  render: () => html`\n<nve-tabs behavior-select>\n  <nve-tabs-item selected>\n    <nve-icon slot=\"prefix\" name=\"home\" aria-hidden=\"true\"></nve-icon>\n    Overview\n    <nve-dot slot=\"suffix\" aria-label=\"10 notifications\">10</nve-dot>\n  </nve-tabs-item>\n  <nve-tabs-item>\n    <nve-icon slot=\"prefix\" name=\"beaker\" aria-hidden=\"true\"></nve-icon>\n    Experiments\n  </nve-tabs-item>\n  <nve-tabs-item>\n    <nve-icon slot=\"prefix\" name=\"gear\" aria-hidden=\"true\"></nve-icon>\n    Settings\n    <nve-dot slot=\"suffix\" status=\"accent\" size=\"sm\" aria-hidden=\"true\"></nve-dot>\n  </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\n/**\n * @summary Close a tab with an application-owned button.\n * @description Add a labeled Icon Button to the `suffix` slot of a Tabs Item Group and handle its click to close the tab. Use arrow keys to focus a tab, then Tab to reach its actions.\n */\nexport const ItemGroupAction = {\n  render: () => html`\n<nve-tabs behavior-select>\n  <nve-tabs-item id=\"workspace-overview\" selected>Overview</nve-tabs-item>\n  <nve-tabs-item-group id=\"workspace-experiment\">\n    <nve-tabs-item>Experiment</nve-tabs-item>\n    <nve-icon-button id=\"close-experiment\" slot=\"suffix\" icon-name=\"cancel\" size=\"sm\" container=\"flat\" aria-label=\"Close experiment\"></nve-icon-button>\n  </nve-tabs-item-group>\n</nve-tabs>\n<script type=\"module\">\n  const overview = document.querySelector('#workspace-overview');\n  document.querySelector('#close-experiment').addEventListener('click', () => {\n    document.querySelector('#workspace-experiment').remove();\n    overview.selected = true;\n    overview.focus();\n  });\n</script>`\n};\n\n/**\n * @summary Open a tab's actions menu from a suffix button without selecting the tab.\n * @description Add an Icon Button to open a Dropdown beside the tab strip.\n */\nexport const ItemGroupMenu = {\n  render: () => html`\n<nve-tabs behavior-select>\n  <nve-tabs-item selected>Overview</nve-tabs-item>\n  <nve-tabs-item-group>\n    <nve-tabs-item>Experiment</nve-tabs-item>\n    <nve-icon-button slot=\"suffix\" icon-name=\"more-actions\" size=\"sm\" container=\"flat\" aria-label=\"Experiment actions\" aria-haspopup=\"menu\" popovertarget=\"experiment-actions\"></nve-icon-button>\n  </nve-tabs-item-group>\n</nve-tabs>\n<nve-dropdown id=\"experiment-actions\">\n  <nve-menu>\n    <nve-menu-item>Rename</nve-menu-item>\n    <nve-menu-item>Duplicate</nve-menu-item>\n  </nve-menu>\n</nve-dropdown>`\n};\n"],"mappings":";AAGA,IAAA,IAAS"}
+{"version":3,"file":"tabs.examples.js","names":["tabs_examples_default"],"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';\nimport '@nvidia-elements/core/icon-button/define.js';\nimport '@nvidia-elements/core/dropdown/define.js';\nimport '@nvidia-elements/core/menu/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  command=\"--toggle\" commandfor=\"tab-group-default\" value=\"overview\">Overview</nve-tabs-item>\n    <nve-tabs-item selected 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 * @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 Add icons and notification indicators around tab labels.\n * @description Add Icons before tab labels and Dots after them using the `prefix` and `suffix` slots.\n */\nexport const PrefixAndSuffix = {\n  render: () => html`\n<nve-tabs behavior-select>\n  <nve-tabs-item selected>\n    <nve-icon slot=\"prefix\" name=\"home\" aria-hidden=\"true\"></nve-icon>\n    Overview\n    <nve-dot slot=\"suffix\" aria-label=\"10 notifications\">10</nve-dot>\n  </nve-tabs-item>\n  <nve-tabs-item>\n    <nve-icon slot=\"prefix\" name=\"beaker\" aria-hidden=\"true\"></nve-icon>\n    Experiments\n  </nve-tabs-item>\n  <nve-tabs-item>\n    <nve-icon slot=\"prefix\" name=\"gear\" aria-hidden=\"true\"></nve-icon>\n    Settings\n    <nve-dot slot=\"suffix\" status=\"accent\" size=\"sm\" aria-hidden=\"true\"></nve-dot>\n  </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\n/**\n * @summary Close a tab with an application-owned button.\n * @description Add a labeled Icon Button to the `suffix` slot of a Tabs Item Group and handle its click to close the tab. Use arrow keys to focus a tab, then Tab to reach its actions.\n */\nexport const ItemGroupAction = {\n  render: () => html`\n<nve-tabs behavior-select>\n  <nve-tabs-item id=\"workspace-overview\" selected>Overview</nve-tabs-item>\n  <nve-tabs-item-group id=\"workspace-experiment\">\n    <nve-tabs-item>Experiment</nve-tabs-item>\n    <nve-icon-button id=\"close-experiment\" slot=\"suffix\" icon-name=\"cancel\" size=\"sm\" container=\"flat\" aria-label=\"Close experiment\"></nve-icon-button>\n  </nve-tabs-item-group>\n</nve-tabs>\n<script type=\"module\">\n  const overview = document.querySelector('#workspace-overview');\n  document.querySelector('#close-experiment').addEventListener('click', () => {\n    document.querySelector('#workspace-experiment').remove();\n    overview.selected = true;\n    overview.focus();\n  });\n</script>`\n};\n\n/**\n * @summary Open a tab's actions menu from a suffix button without selecting the tab.\n * @description Add an Icon Button to open a Dropdown beside the tab strip.\n */\nexport const ItemGroupMenu = {\n  render: () => html`\n<nve-tabs behavior-select>\n  <nve-tabs-item selected>Overview</nve-tabs-item>\n  <nve-tabs-item-group>\n    <nve-tabs-item>Experiment</nve-tabs-item>\n    <nve-icon-button slot=\"suffix\" icon-name=\"more-actions\" size=\"sm\" container=\"flat\" aria-label=\"Experiment actions\" aria-haspopup=\"menu\" popovertarget=\"experiment-actions\"></nve-icon-button>\n  </nve-tabs-item-group>\n</nve-tabs>\n<nve-dropdown id=\"experiment-actions\">\n  <nve-menu>\n    <nve-menu-item>Rename</nve-menu-item>\n    <nve-menu-item>Duplicate</nve-menu-item>\n  </nve-menu>\n</nve-dropdown>`\n};\n"],"mappings":";AAGA,IAAAA,IAAS"}

package/dist/tabs/tabs.global.js

@@ -1,6 +1,5 @@
-//#region src/tabs/tabs.global.css?inline
+// src/tabs/tabs.global.css?inline
 var e = "nve-tabs{anchor-scope:--selected,--selected-group;--indicator-background: var(--nve-sys-accent-secondary-background);--indicator-height: var(--nve-ref-border-width-xl);--indicator-border-radius: var(--nve-ref-border-radius-sm);&:after{background:var(--indicator-background);height:var(--indicator-height);border-radius:var(--indicator-border-radius);position:fixed;display:block;content:\"\";width:anchor-size(width);transition:left var(--nve-ref-animation-duration-150) var(--nve-ref-animation-easing-100);position-anchor:--selected;top:calc(anchor(bottom) - var(--indicator-height));left:anchor(left);z-index:-1}&[borderless]:after{display:none!important}}nve-tabs[vertical]{&:after{width:var(--indicator-height);height:anchor-size(height);transition:top var(--nve-ref-animation-duration-150) var(--nve-ref-animation-easing-100);top:anchor(top)}}nve-tabs[vertical]:dir(rtl):after{left:auto;right:anchor(right)}nve-tabs-item[selected]{anchor-name:--selected}nve-tabs-item-group:has(>nve-tabs-item[selected]){anchor-name:--selected-group}nve-tabs:has(>nve-tabs-item-group>nve-tabs-item[selected]):after{position-anchor:--selected-group}";
-//#endregion
 export { e as default };
 
 //# sourceMappingURL=tabs.global.js.map

package/dist/tabs/tabs.global.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.global.js","names":[],"sources":["../../src/tabs/tabs.global.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\nnve-tabs {\n  anchor-scope: --selected, --selected-group;\n  --indicator-background: var(--nve-sys-accent-secondary-background);\n  --indicator-height: var(--nve-ref-border-width-xl);\n  --indicator-border-radius: var(--nve-ref-border-radius-sm);\n\n  &::after {\n    background: var(--indicator-background);\n    height: var(--indicator-height);\n    border-radius: var(--indicator-border-radius);\n    position: fixed;\n    display: block;\n    content: '';\n    width: anchor-size(width);\n    transition: left var(--nve-ref-animation-duration-150) var(--nve-ref-animation-easing-100);\n    position-anchor: --selected;\n    top: calc(anchor(bottom) - var(--indicator-height));\n    left: anchor(left);\n    z-index: -1;\n  }\n\n  &[borderless]::after {\n    display: none !important;\n  }\n}\n\nnve-tabs[vertical] {\n  &::after {\n    width: var(--indicator-height);\n    height: anchor-size(height);\n    transition: top var(--nve-ref-animation-duration-150) var(--nve-ref-animation-easing-100);\n    top: anchor(top);\n  }\n}\n\nnve-tabs[vertical]:dir(rtl)::after {\n  left: auto;\n  right: anchor(right);\n}\n\nnve-tabs-item[selected] {\n  anchor-name: --selected;\n}\n\nnve-tabs-item-group:has(> nve-tabs-item[selected]) {\n  anchor-name: --selected-group;\n}\n\nnve-tabs:has(> nve-tabs-item-group > nve-tabs-item[selected])::after {\n  position-anchor: --selected-group;\n}\n"],"mappings":""}
+{"version":3,"file":"tabs.global.js","names":["tabs_global_default"],"sources":["../../src/tabs/tabs.global.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\nnve-tabs {\n  anchor-scope: --selected, --selected-group;\n  --indicator-background: var(--nve-sys-accent-secondary-background);\n  --indicator-height: var(--nve-ref-border-width-xl);\n  --indicator-border-radius: var(--nve-ref-border-radius-sm);\n\n  &::after {\n    background: var(--indicator-background);\n    height: var(--indicator-height);\n    border-radius: var(--indicator-border-radius);\n    position: fixed;\n    display: block;\n    content: '';\n    width: anchor-size(width);\n    transition: left var(--nve-ref-animation-duration-150) var(--nve-ref-animation-easing-100);\n    position-anchor: --selected;\n    top: calc(anchor(bottom) - var(--indicator-height));\n    left: anchor(left);\n    z-index: -1;\n  }\n\n  &[borderless]::after {\n    display: none !important;\n  }\n}\n\nnve-tabs[vertical] {\n  &::after {\n    width: var(--indicator-height);\n    height: anchor-size(height);\n    transition: top var(--nve-ref-animation-duration-150) var(--nve-ref-animation-easing-100);\n    top: anchor(top);\n  }\n}\n\nnve-tabs[vertical]:dir(rtl)::after {\n  left: auto;\n  right: anchor(right);\n}\n\nnve-tabs-item[selected] {\n  anchor-name: --selected;\n}\n\nnve-tabs-item-group:has(> nve-tabs-item[selected]) {\n  anchor-name: --selected-group;\n}\n\nnve-tabs:has(> nve-tabs-item-group > nve-tabs-item[selected])::after {\n  position-anchor: --selected-group;\n}\n"],"mappings":""}

package/dist/tabs/tabs.js

@@ -1,6 +1,5 @@
-//#region src/tabs/tabs.css?inline
+// src/tabs/tabs.css?inline
 var e = ":host{--gap: var(--nve-ref-space-xs)}[internal-host]{display:flex;flex-direction:row;gap:var(--gap);overflow-x:auto;white-space:nowrap;scrollbar-color:var(--nve-sys-scrollbar-thumb-color) var(--nve-sys-scrollbar-track-color);scrollbar-width:var(--nve-sys-scrollbar-width)}:host([vertical]){--gap: var(--nve-ref-space-xxxs)}:host([vertical]) [internal-host]{flex-direction:column}:host([vertical]) ::slotted(:is(nve-tabs-item,nve-tabs-item-group)){--border-inset: 0 8px 0 8px;--width: calc(100% - 8px) }:host([vertical]) ::slotted(nve-tabs-item:state(selected)){--nve-sys-interaction-state-ratio: var(--nve-sys-interaction-state-ratio-hover)}:host([vertical]) ::slotted(nve-tabs-item-group:has(> nve-tabs-item[selected])){--_tabs-group-interaction-state-ratio: var(--nve-sys-interaction-state-ratio-hover)}::slotted(:is(nve-tabs-item,nve-tabs-item-group)){white-space:nowrap}";
-//#endregion
 export { e as default };
 
 //# sourceMappingURL=tabs.js.map

package/dist/tabs/tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.js","names":[],"sources":["../../src/tabs/tabs.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n:host {\n  --gap: var(--nve-ref-space-xs);\n}\n\n[internal-host] {\n  display: flex;\n  flex-direction: row;\n  gap: var(--gap);\n  overflow-x: auto;\n  white-space: nowrap;\n  scrollbar-color: var(--nve-sys-scrollbar-thumb-color) var(--nve-sys-scrollbar-track-color);\n  scrollbar-width: var(--nve-sys-scrollbar-width);\n}\n\n:host([vertical]) {\n  --gap: var(--nve-ref-space-xxxs);\n}\n\n:host([vertical]) [internal-host] {\n  flex-direction: column;\n}\n\n:host([vertical]) ::slotted(:is(nve-tabs-item, nve-tabs-item-group)) {\n  --border-inset: 0 8px 0 8px;\n  --width: calc(100% - 8px);\n}\n\n:host([vertical]) ::slotted(nve-tabs-item:state(selected)) {\n  --nve-sys-interaction-state-ratio: var(--nve-sys-interaction-state-ratio-hover);\n}\n\n:host([vertical]) ::slotted(nve-tabs-item-group:has(> nve-tabs-item[selected])) {\n  --_tabs-group-interaction-state-ratio: var(--nve-sys-interaction-state-ratio-hover);\n}\n\n::slotted(:is(nve-tabs-item, nve-tabs-item-group)) {\n  white-space: nowrap;\n}\n"],"mappings":""}
+{"version":3,"file":"tabs.js","names":["tabs_default"],"sources":["../../src/tabs/tabs.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n:host {\n  --gap: var(--nve-ref-space-xs);\n}\n\n[internal-host] {\n  display: flex;\n  flex-direction: row;\n  gap: var(--gap);\n  overflow-x: auto;\n  white-space: nowrap;\n  scrollbar-color: var(--nve-sys-scrollbar-thumb-color) var(--nve-sys-scrollbar-track-color);\n  scrollbar-width: var(--nve-sys-scrollbar-width);\n}\n\n:host([vertical]) {\n  --gap: var(--nve-ref-space-xxxs);\n}\n\n:host([vertical]) [internal-host] {\n  flex-direction: column;\n}\n\n:host([vertical]) ::slotted(:is(nve-tabs-item, nve-tabs-item-group)) {\n  --border-inset: 0 8px 0 8px;\n  --width: calc(100% - 8px);\n}\n\n:host([vertical]) ::slotted(nve-tabs-item:state(selected)) {\n  --nve-sys-interaction-state-ratio: var(--nve-sys-interaction-state-ratio-hover);\n}\n\n:host([vertical]) ::slotted(nve-tabs-item-group:has(> nve-tabs-item[selected])) {\n  --_tabs-group-interaction-state-ratio: var(--nve-sys-interaction-state-ratio-hover);\n}\n\n::slotted(:is(nve-tabs-item, nve-tabs-item-group)) {\n  white-space: nowrap;\n}\n"],"mappings":""}