@nvidia-elements/core 0.2.2 → 0.2.4

package/dist/switch/switch-group2.js

@@ -1,17 +1,17 @@
-import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.130.0/helpers/decorate.js";
-import { audit as t } from "../internal/controllers/audit.controller.js";
-import { useStyles as n } from "../internal/styles/index.js";
+import { audit as e } from "../internal/controllers/audit.controller.js";
+import { useStyles as t } from "../internal/styles/index.js";
+import { __decorate as n } from "../_virtual/_@oxc-project_runtime@0.132.0/helpers/decorate.js";
 import { ControlGroup as r } from "../forms/control-group/control-group2.js";
 import i from "./switch-group.js";
 //#region src/switch/switch-group.ts
 var a = class extends r {
 	static {
-		this.styles = n([...r.styles, i]);
+		this.styles = t([...r.styles, i]);
 	}
 	static {
 		this.metadata = {
 			tag: "nve-switch-group",
-			version: "0.2.2",
+			version: "0.2.4",
 			children: [
 				"label",
 				"nve-control-message",
@@ -20,7 +20,7 @@ var a = class extends r {
 		};
 	}
 };
-a = e([t()], a);
+a = n([e()], a);
 //#endregion
 export { a as SwitchGroup };
 

package/dist/switch/switch2.js

@@ -1,7 +1,7 @@
-import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.130.0/helpers/decorate.js";
-import { audit as t } from "../internal/controllers/audit.controller.js";
-import { hostAttr as n } from "../internal/decorators/host-attr.js";
-import { useStyles as r } from "../internal/styles/index.js";
+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 { __decorate as r } from "../_virtual/_@oxc-project_runtime@0.132.0/helpers/decorate.js";
 import { Control as i } from "../forms/control/control2.js";
 import a from "./switch.js";
 //#region src/switch/switch.ts
@@ -10,12 +10,12 @@ var o = class extends i {
 		super(...e), this.nveControl = "inline";
 	}
 	static {
-		this.styles = r([...i.styles, a]);
+		this.styles = n([...i.styles, a]);
 	}
 	static {
 		this.metadata = {
 			tag: "nve-switch",
-			version: "0.2.2",
+			version: "0.2.4",
 			children: [
 				"label",
 				"input",
@@ -24,7 +24,7 @@ var o = class extends i {
 		};
 	}
 };
-e([n({ attribute: "nve-control" })], o.prototype, "nveControl", void 0), o = e([t()], o);
+r([t({ attribute: "nve-control" })], o.prototype, "nveControl", void 0), o = r([e()], o);
 //#endregion
 export { o as Switch };
 

package/dist/tabs/tabs-group.d.ts

@@ -43,7 +43,7 @@ export declare class TabsGroup extends LitElement {
      * Renders the default slot (single `nve-tabs`) plus one named `<slot name={value}>` per distinct selectable
      * `nve-tabs-item` value. `#syncPanelSlot` applies panel visibility and ARIA from `selectedValue`.
      */
-    render(): import('lit-html').TemplateResult<1>;
+    render(): import('lit').TemplateResult<1>;
     connectedCallback(): void;
     firstUpdated(): void;
     disconnectedCallback(): void;

package/dist/tabs/tabs-group2.js

@@ -1,8 +1,8 @@
-import { generateId as e, sameOrderedStringArray as t, uniqueNonEmptyStrings as n } from "../internal/utils/dom.js";
-import { attachInternals as r } from "../internal/utils/a11y.js";
-import { __decorate as i } from "../_virtual/_@oxc-project_runtime@0.130.0/helpers/decorate.js";
-import { audit as a } from "../internal/controllers/audit.controller.js";
-import { useStyles as o } from "../internal/styles/index.js";
+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 { __decorate as o } from "../_virtual/_@oxc-project_runtime@0.132.0/helpers/decorate.js";
 import { Tabs as s } from "./tabs2.js";
 import c from "./tabs-group.js";
 import { LitElement as l, html as u } from "lit";
@@ -28,12 +28,12 @@ var m, h = class extends l {
 		};
 	}
 	static {
-		this.styles = o([c]);
+		this.styles = a([c]);
 	}
 	static {
 		this.metadata = {
 			tag: "nve-tabs-group",
-			version: "0.2.2",
+			version: "0.2.4",
 			children: ["nve-tabs"]
 		};
 	}
@@ -55,7 +55,7 @@ var m, h = class extends l {
 		return u`<div internal-host><slot @slotchange="${this.#t}"></slot>${this.panelValues.map((e) => u`<slot name="${e}" @slotchange="${this.#n}"></slot>`)}</div>`;
 	}
 	connectedCallback() {
-		super.connectedCallback(), r(this), this._internals.role = "group", this.addEventListener("command", this.#r);
+		super.connectedCallback(), i(this), this._internals.role = "group", this.addEventListener("command", this.#r);
 	}
 	firstUpdated() {
 		this.updateComplete.then(() => {
@@ -79,18 +79,18 @@ var m, h = class extends l {
 		e && (this.#e = new MutationObserver(() => this.#a()), this.#e.observe(e, m.subtreeObserverInit));
 	}
 	#a() {
-		let e = this.#d(), t = n(e.map((e) => e.value)), r = this.#m(e);
-		if (!r) {
+		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, r, {
+		this.#o(e, n, {
 			emitEvent: !1,
 			nextPanelValues: t
 		});
 	}
-	#o(e, t, r) {
-		let { emitEvent: i } = r, a = r.nextPanelValues ?? n(e.map((e) => e.value)), o = this.selectedValue !== t.value || !t.selected || e.some((e) => e !== t && e.selected);
+	#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);
 		e.forEach((e) => {
 			e.selected = e === t;
 		}), this.#s(a, t.value), i && o && this.dispatchEvent(new CustomEvent("select", {
@@ -99,8 +99,8 @@ var m, h = class extends l {
 			detail: { value: t.value }
 		}));
 	}
-	#s(e, n) {
-		t(this.panelValues, e) || (this.panelValues = e), this.selectedValue !== n && (this.selectedValue = n);
+	#s(e, t) {
+		n(this.panelValues, e) || (this.panelValues = e), this.selectedValue !== t && (this.selectedValue = t);
 	}
 	#c() {
 		let e = this.#d(), t = new Map(e.filter((e) => this.#p(e)).map((e) => [e.value, e]));
@@ -108,16 +108,16 @@ var m, h = class extends l {
 			this.#l(e, t);
 		});
 	}
-	#l(t, n) {
-		let r = n.get(t.name), i = t.assignedElements({ flatten: !0 });
+	#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 ||= e(), i.forEach((n, i) => {
-			n.id ||= e(), !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 = t.name !== this.selectedValue;
+		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;
 		});
 	}
 	#u() {
@@ -137,10 +137,10 @@ var m, h = class extends l {
 		return e.find((e) => this.#p(e) && e.selected) ?? e.find((e) => this.#p(e));
 	}
 };
-i([p({ flatten: !0 })], h.prototype, "defaultSlotElements", void 0), i([d({
+o([p({ flatten: !0 })], h.prototype, "defaultSlotElements", void 0), o([d({
 	type: String,
 	reflect: !0
-})], h.prototype, "alignment", void 0), i([f()], h.prototype, "panelValues", void 0), i([f()], h.prototype, "selectedValue", void 0), h = m = i([a()], h);
+})], h.prototype, "alignment", void 0), o([f()], h.prototype, "panelValues", void 0), o([f()], h.prototype, "selectedValue", void 0), h = m = o([e()], h);
 //#endregion
 export { h as TabsGroup };
 

package/dist/tabs/tabs-item.js

@@ -1,5 +1,5 @@
 //#region src/tabs/tabs-item.css?inline
-var e = ":host{--border-background: var(--indicator-background);--border-height: var(--indicator-height);--border-width: 100%;--border-top: auto;--width: 100%;--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(--nve-ref-space-xs);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: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:relative}:host(:state(selected)){--color: var(--nve-sys-text-emphasis-color);--font-weight: var(--nve-ref-font-weight-semibold)}:host(:state(selected)):after{width:var(--border-width);height:var(--border-height);border-radius:var(--border-radius);background:var(--border-background);top:var(--border-top);content:\"\";display:block;position:absolute;bottom:0;left:0}: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}::slotted(a){text-decoration:var(--text-decoration)!important;color:var(--color)!important;gap:var(--gap)!important;display:flex!important;align-items:center!important;outline:0}::slotted(a):after{display:block;content:\" \";inset:0;position:absolute}";
+var e = ":host{--width: 100%;--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(--nve-ref-space-xs);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: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: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}::slotted(a){text-decoration:var(--text-decoration)!important;color:var(--color)!important;gap:var(--gap)!important;display:flex!important;align-items:center!important;outline:0}::slotted(a):after{display:block;content:\" \";inset:0;position:absolute}";
 //#endregion
 export { e as default };
 

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  --border-background: var(--indicator-background);\n  --border-height: var(--indicator-height);\n  --border-width: 100%;\n  --border-top: auto;\n  --width: 100%;\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(--nve-ref-space-xs);\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: 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  ) !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: 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/* @deprecated use the --indicator-background variable instead */\n:host(:state(selected))::after {\n  width: var(--border-width);\n  height: var(--border-height);\n  border-radius: var(--border-radius);\n  background: var(--border-background);\n  top: var(--border-top);\n  content: '';\n  display: block;\n  position: absolute;\n  bottom: 0;\n  left: 0;\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\n::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  outline: 0;\n}\n\n::slotted(a)::after {\n  display: block;\n  content: ' ';\n  inset: 0;\n  position: absolute;\n}\n"],"mappings":""}
+{"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  --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(--nve-ref-space-xs);\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: 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  ) !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: 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\n::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  outline: 0;\n}\n\n::slotted(a)::after {\n  display: block;\n  content: ' ';\n  inset: 0;\n  position: absolute;\n}\n"],"mappings":""}

package/dist/tabs/tabs.d.ts

@@ -1,5 +1,6 @@
 import { PropertyValues, LitElement } from 'lit';
-import { KeynavListConfig, BaseButton } from '../internal';
+import { KeynavListConfig } from '../internal';
+declare const TabsItem_base: import('@nvidia-elements/forms/mixins').ButtonFormControlMixinReturn<typeof LitElement>;
 /**
  * @element nve-tabs-item
  * @description Represents an individual tab within a tablist, providing a selectable button for switching between content views.
@@ -7,10 +8,6 @@ import { KeynavListConfig, BaseButton } from '../internal';
  * @entrypoint \@nvidia-elements/core/tabs
  * @slot - default slot for content
  * @cssprop --font-size
- * @cssprop --border-width
- * @cssprop --border-height
- * @cssprop --border-top
- * @cssprop --border-background
  * @cssprop --width
  * @cssprop --padding
  * @cssprop --font-size
@@ -23,7 +20,7 @@ import { KeynavListConfig, BaseButton } from '../internal';
  * @aria https://www.w3.org/WAI/ARIA/apg/patterns/tabs/
  * @responsive false
  */
-export declare class TabsItem extends BaseButton {
+export declare class TabsItem extends TabsItem_base {
     /**
      * Determines which tab item the user selects, defaults to false.
      */
@@ -34,7 +31,7 @@ export declare class TabsItem extends BaseButton {
         version: string;
         parents: string[];
     };
-    render(): import('lit-html').TemplateResult<1>;
+    render(): import('lit').TemplateResult<1>;
     constructor();
     connectedCallback(): void;
     updated(props: PropertyValues<this>): void;
@@ -78,8 +75,9 @@ export declare class Tabs extends LitElement {
     private items;
     /** @private */
     _internals: ElementInternals;
-    render(): import('lit-html').TemplateResult<1>;
+    render(): import('lit').TemplateResult<1>;
     connectedCallback(): void;
     disconnectedCallback(): void;
     updated(props: PropertyValues<this>): void;
 }
+export {};

package/dist/tabs/tabs.global.js

@@ -1,5 +1,5 @@
 //#region src/tabs/tabs.global.css?inline
-var e = "nve-tabs{--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-item{&[selected]{anchor-name:--selected}@container style(--border-background: var(--indicator-background)){&:after{visibility:hidden!important}}}";
+var e = "nve-tabs{--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-item{&[selected]{anchor-name:--selected}}";
 //#endregion
 export { e as default };
 

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  --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-item {\n  &[selected] {\n    anchor-name: --selected;\n  }\n\n  /* if the item does not have custom styles disable the item specific indicator */\n  @container style(--border-background: var(--indicator-background)) {\n    &::after {\n      visibility: hidden !important;\n    }\n  }\n}\n"],"mappings":""}
+{"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  --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-item {\n  &[selected] {\n    anchor-name: --selected;\n  }\n}\n"],"mappings":""}

package/dist/tabs/tabs.js

@@ -1,5 +1,5 @@
 //#region 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(nve-tabs-item){--border-width: var(--nve-ref-border-width-lg);--border-height: 24px;--border-top: calc(50% - 12px) ;--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([borderless]) ::slotted(nve-tabs-item){--border-width: 0;--border-height: 0}::slotted(nve-tabs-item){white-space:nowrap}";
+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(nve-tabs-item){--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)}::slotted(nve-tabs-item){white-space:nowrap}";
 //#endregion
 export { e as default };
 

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(nve-tabs-item) {\n  --border-width: var(--nve-ref-border-width-lg);\n  --border-height: 24px;\n  --border-top: calc(50% - 12px);\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([borderless]) ::slotted(nve-tabs-item) {\n  --border-width: 0;\n  --border-height: 0;\n}\n\n::slotted(nve-tabs-item) {\n  white-space: nowrap;\n}\n"],"mappings":""}
+{"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(nve-tabs-item) {\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::slotted(nve-tabs-item) {\n  white-space: nowrap;\n}\n"],"mappings":""}

package/dist/tabs/tabs2.js

@@ -1,31 +1,31 @@
-import { appendAnchorName as e, appendRootNodeStyle as t, removeAnchorName as n } from "../internal/utils/dom.js";
-import { attachInternals as r } from "../internal/utils/a11y.js";
-import { stateSelected as i } from "../internal/controllers/state-selected.controller.js";
-import { __decorate as a } from "../_virtual/_@oxc-project_runtime@0.130.0/helpers/decorate.js";
-import { BaseButton as o } from "../internal/base/button.js";
-import { audit as s } from "../internal/controllers/audit.controller.js";
-import { keyNavigationList as c } from "../internal/controllers/keynav-list.controller.js";
-import { useStyles as l } from "../internal/styles/index.js";
-import u from "./tabs.global.js";
-import d from "./tabs-item.js";
-import f from "./tabs.js";
-import { LitElement as p, html as m } from "lit";
-import { property as h } from "lit/decorators/property.js";
+import { audit as e } from "../internal/controllers/audit.controller.js";
+import { appendAnchorName as t, appendRootNodeStyle as n, removeAnchorName as r } from "../internal/utils/dom.js";
+import { keyNavigationList as i } from "../internal/controllers/keynav-list.controller.js";
+import { attachInternals as a } from "../internal/utils/a11y.js";
+import { stateSelected as o } from "../internal/controllers/state-selected.controller.js";
+import { useStyles as s } from "../internal/styles/index.js";
+import { __decorate as c } from "../_virtual/_@oxc-project_runtime@0.132.0/helpers/decorate.js";
+import l from "./tabs.global.js";
+import u from "./tabs-item.js";
+import d from "./tabs.js";
+import { LitElement as f, html as p } from "lit";
+import { property as m } from "lit/decorators/property.js";
+import { ButtonFormControlMixin as h } from "@nvidia-elements/forms/mixins";
 import { queryAssignedElements as g } from "lit/decorators/query-assigned-elements.js";
 //#region src/tabs/tabs.ts
-var _ = class extends o {
+var _ = class extends h(f) {
 	static {
-		this.styles = l([d]);
+		this.styles = s([u]);
 	}
 	static {
 		this.metadata = {
 			tag: "nve-tabs-item",
-			version: "0.2.2",
+			version: "0.2.4",
 			parents: ["nve-tabs"]
 		};
 	}
 	render() {
-		return m`<div internal-host focus-within><slot></slot></div>`;
+		return p`<div internal-host focus-within><slot></slot></div>`;
 	}
 	constructor() {
 		super(), this.selected = !1, this.type = "button";
@@ -33,27 +33,27 @@ var _ = class extends o {
 	connectedCallback() {
 		super.connectedCallback(), this._internals.role = "tab";
 	}
-	updated(t) {
-		t.has("selected") && (this.selected ? e(this, "--selected") : n(this, "--selected"));
+	updated(e) {
+		super.updated(e), e.has("selected") && (this.selected ? t(this, "--selected") : r(this, "--selected"));
 	}
 };
-a([h({
+c([m({
 	type: Boolean,
 	reflect: !0
-})], _.prototype, "selected", void 0), _ = a([s(), i()], _);
-var v = class extends p {
+})], _.prototype, "selected", void 0), _ = c([e(), o()], _);
+var v = class extends f {
 	constructor(...e) {
 		super(...e), this.vertical = !1, this.borderless = !1, this.behaviorSelect = !1, this.#t = (e) => {
 			this.#e(e.target);
 		};
 	}
 	static {
-		this.styles = l([f]);
+		this.styles = s([d]);
 	}
 	static {
 		this.metadata = {
 			tag: "nve-tabs",
-			version: "0.2.2",
+			version: "0.2.4",
 			children: ["nve-tabs-item"]
 		};
 	}
@@ -67,10 +67,10 @@ var v = class extends p {
 		!this.behaviorSelect || !e.matches("nve-tabs-item") || e.disabled || (this.keynavListConfig.items.forEach((e) => e.selected = !1), e.selected = !0);
 	}
 	render() {
-		return m`<div internal-host><slot></slot></div>`;
+		return p`<div internal-host><slot></slot></div>`;
 	}
 	connectedCallback() {
-		super.connectedCallback(), t(this, u), r(this), this._internals.role = "tablist", this.addEventListener("click", this.#t);
+		super.connectedCallback(), n(this, l), a(this), this._internals.role = "tablist", this.addEventListener("click", this.#t);
 	}
 	disconnectedCallback() {
 		super.disconnectedCallback(), this.removeEventListener("click", this.#t);
@@ -80,16 +80,16 @@ var v = class extends p {
 		super.updated(e), this._internals.ariaOrientation = this.vertical ? "vertical" : "horizontal";
 	}
 };
-a([h({
+c([m({
 	type: Boolean,
 	reflect: !0
-})], v.prototype, "vertical", void 0), a([h({
+})], v.prototype, "vertical", void 0), c([m({
 	type: Boolean,
 	reflect: !0
-})], v.prototype, "borderless", void 0), a([h({
+})], v.prototype, "borderless", void 0), c([m({
 	type: Boolean,
 	attribute: "behavior-select"
-})], v.prototype, "behaviorSelect", void 0), a([g()], v.prototype, "items", void 0), v = a([s(), c()], v);
+})], v.prototype, "behaviorSelect", void 0), c([g()], v.prototype, "items", void 0), v = c([e(), i()], v);
 //#endregion
 export { v as Tabs, _ as TabsItem };
 

package/dist/tabs/tabs2.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs2.js","names":["#selectTab","#onClick"],"sources":["../../src/tabs/tabs.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 type { KeynavListConfig } from '@nvidia-elements/core/internal';\nimport {\n  BaseButton,\n  stateSelected,\n  useStyles,\n  keyNavigationList,\n  attachInternals,\n  audit,\n  appendRootNodeStyle,\n  appendAnchorName,\n  removeAnchorName\n} from '@nvidia-elements/core/internal';\nimport globalStyles from './tabs.global.css?inline';\nimport tabsItemStyleSheet from './tabs-item.css?inline';\nimport tabsStyleSheet from './tabs.css?inline';\n\n/**\n * @element nve-tabs-item\n * @description Represents an individual tab within a tablist, providing a selectable button for switching between content views.\n * @since 0.10.0\n * @entrypoint \\@nvidia-elements/core/tabs\n * @slot - default slot for content\n * @cssprop --font-size\n * @cssprop --border-width\n * @cssprop --border-height\n * @cssprop --border-top\n * @cssprop --border-background\n * @cssprop --width\n * @cssprop --padding\n * @cssprop --font-size\n * @cssprop --font-weight\n * @cssprop --border-radius\n * @cssprop --color\n * @cssprop --height\n * @cssprop --cursor\n * @cssprop --text-transform\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/tabs/\n * @responsive false\n */\n@audit()\n@stateSelected<TabsItem>()\nexport class TabsItem extends BaseButton {\n  /**\n   * Determines which tab item the user selects, defaults to false.\n   */\n  @property({ type: Boolean, reflect: true }) selected = false;\n\n  static styles = useStyles([tabsItemStyleSheet]);\n\n  static readonly metadata = {\n    tag: 'nve-tabs-item',\n    version: '0.0.0',\n    parents: ['nve-tabs']\n  };\n\n  render() {\n    return html`\n      <div internal-host focus-within>\n        <slot></slot>\n      </div>\n    `;\n  }\n\n  constructor() {\n    super();\n    this.type = 'button';\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this._internals.role = 'tab';\n  }\n\n  updated(props: PropertyValues<this>) {\n    if (props.has('selected')) {\n      if (this.selected) {\n        appendAnchorName(this, '--selected');\n      } else {\n        removeAnchorName(this, '--selected');\n      }\n    }\n  }\n}\n\n/**\n * @element nve-tabs\n * @description Tabs provide a selection UX, typically used for swapping content shown on a page, or within a navigation context.\n * @since 0.10.0\n * @entrypoint \\@nvidia-elements/core/tabs\n * @slot - default slot for tab-item\n * @cssprop --gap\n * @cssprop --indicator-background\n * @cssprop --indicator-border-radius\n * @cssprop --indicator-height\n * @cssprop --border-inset\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/tabs/\n * @responsive false\n */\n@audit()\n@keyNavigationList<Tabs>()\nexport class Tabs extends LitElement {\n  /**\n   * Determines whether the tabs should display in a vertical layout vs. defaulting to horizontal.\n   */\n  @property({ type: Boolean, reflect: true }) vertical = false;\n\n  /**\n   * Determines whether the tabs should display a border on selected items vs. defaults to show border.\n   */\n  @property({ type: Boolean, reflect: true }) borderless = false;\n\n  /**\n   * Determines whether the tabs should handle selection behavior vs. defaults to off.\n   */\n  @property({ type: Boolean, attribute: 'behavior-select' }) behaviorSelect = false;\n\n  static styles = useStyles([tabsStyleSheet]);\n\n  static readonly metadata = {\n    tag: 'nve-tabs',\n    version: '0.0.0',\n    children: ['nve-tabs-item']\n  };\n\n  /** @private */\n  get keynavListConfig(): KeynavListConfig {\n    return {\n      items: this.items,\n      layout: this.vertical ? 'vertical' : 'horizontal'\n    };\n  }\n\n  @queryAssignedElements() private items!: TabsItem[];\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  #selectTab(tabItem: HTMLElement & { matches: Element['matches']; disabled?: boolean; selected?: boolean }) {\n    if (!this.behaviorSelect || !tabItem.matches('nve-tabs-item') || tabItem.disabled) {\n      return;\n    }\n\n    this.keynavListConfig.items.forEach((i: HTMLElement) => ((i as TabsItem).selected = false));\n    tabItem.selected = true;\n  }\n\n  render() {\n    return html`\n      <div internal-host>\n        <slot></slot>\n      </div>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    appendRootNodeStyle(this, globalStyles);\n    attachInternals(this);\n    this._internals.role = 'tablist';\n    this.addEventListener('click', this.#onClick);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener('click', this.#onClick);\n  }\n\n  #onClick = (e: Event) => {\n    this.#selectTab(e.target as HTMLElement & { matches: Element['matches']; disabled?: boolean; selected?: boolean });\n  };\n\n  updated(props: PropertyValues<this>) {\n    super.updated(props);\n    this._internals.ariaOrientation = this.vertical ? 'vertical' : 'horizontal';\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;AAgDO,IAAA,IAAA,cAAuB,EAAW;;gBAMvB,EAAU,CAAC,CAAkB,CAAC;;;kBAEnB;GACzB,KAAK;GACL,SAAS;GACT,SAAS,CAAC,UAAU;EACtB;;CAEA,SAAS;EACP,OAAO,CAAI;CAKb;CAEA,cAAc;EAEZ,AADA,MAAM,mBAnB+C,IAoBrD,KAAK,OAAO;CACd;CAEA,oBAAoB;EAElB,AADA,MAAM,kBAAkB,GACxB,KAAK,WAAW,OAAO;CACzB;CAEA,QAAQ,GAA6B;EACnC,AAAI,EAAM,IAAI,UAAU,MAClB,KAAK,WACP,EAAiB,MAAM,YAAY,IAEnC,EAAiB,MAAM,YAAY;CAGzC;AACF;GArCG,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,UAN3C,EAAM,GACN,EAAwB,CAAA,GAAA,CAAA;AA4DlB,IAAA,IAAA,cAAmB,EAAW;;+BAIoB,sBAKE,0BAKmB,eAqDhE,MAAa;GACvB,KAAKA,GAAW,EAAE,MAA+F;EACnH;;;gBArDgB,EAAU,CAAC,CAAc,CAAC;;;kBAEf;GACzB,KAAK;GACL,SAAS;GACT,UAAU,CAAC,eAAe;EAC5B;;CAGA,IAAI,mBAAqC;EACvC,OAAO;GACL,OAAO,KAAK;GACZ,QAAQ,KAAK,WAAW,aAAa;EACvC;CACF;CAOA,GAAW,GAAgG;EACrG,CAAC,KAAK,kBAAkB,CAAC,EAAQ,QAAQ,eAAe,KAAK,EAAQ,aAIzE,KAAK,iBAAiB,MAAM,SAAS,MAAoB,EAAgB,WAAW,EAAM,GAC1F,EAAQ,WAAW;CACrB;CAEA,SAAS;EACP,OAAO,CAAI;CAKb;CAEA,oBAAoB;EAKlB,AAJA,MAAM,kBAAkB,GACxB,EAAoB,MAAM,CAAY,GACtC,EAAgB,IAAI,GACpB,KAAK,WAAW,OAAO,WACvB,KAAK,iBAAiB,SAAS,KAAKC,EAAQ;CAC9C;CAEA,uBAAuB;EAErB,AADA,MAAM,qBAAqB,GAC3B,KAAK,oBAAoB,SAAS,KAAKA,EAAQ;CACjD;CAEA;CAIA,QAAQ,GAA6B;EAEnC,AADA,MAAM,QAAQ,CAAK,GACnB,KAAK,WAAW,kBAAkB,KAAK,WAAW,aAAa;CACjE;AACF;GAvEG,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,MAKzC,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,cAAA,KAAA,CAAA,MAKzC,EAAS;CAAE,MAAM;CAAS,WAAW;AAAkB,CAAC,CAAA,GAAA,EAAA,WAAA,kBAAA,KAAA,CAAA,MAkBxD,EAAsB,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,UAlCxB,EAAM,GACN,EAAwB,CAAA,GAAA,CAAA"}
+{"version":3,"file":"tabs2.js","names":["#selectTab","#onClick"],"sources":["../../src/tabs/tabs.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 { ButtonFormControlMixin } from '@nvidia-elements/forms/mixins';\nimport type { KeynavListConfig } from '@nvidia-elements/core/internal';\nimport {\n  stateSelected,\n  useStyles,\n  keyNavigationList,\n  attachInternals,\n  audit,\n  appendRootNodeStyle,\n  appendAnchorName,\n  removeAnchorName\n} from '@nvidia-elements/core/internal';\nimport globalStyles from './tabs.global.css?inline';\nimport tabsItemStyleSheet from './tabs-item.css?inline';\nimport tabsStyleSheet from './tabs.css?inline';\n\n/**\n * @element nve-tabs-item\n * @description Represents an individual tab within a tablist, providing a selectable button for switching between content views.\n * @since 0.10.0\n * @entrypoint \\@nvidia-elements/core/tabs\n * @slot - default slot for content\n * @cssprop --font-size\n * @cssprop --width\n * @cssprop --padding\n * @cssprop --font-size\n * @cssprop --font-weight\n * @cssprop --border-radius\n * @cssprop --color\n * @cssprop --height\n * @cssprop --cursor\n * @cssprop --text-transform\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/tabs/\n * @responsive false\n */\n@audit()\n@stateSelected<TabsItem>()\nexport class TabsItem extends ButtonFormControlMixin(LitElement) {\n  /**\n   * Determines which tab item the user selects, defaults to false.\n   */\n  @property({ type: Boolean, reflect: true }) selected = false;\n\n  static styles = useStyles([tabsItemStyleSheet]);\n\n  static readonly metadata = {\n    tag: 'nve-tabs-item',\n    version: '0.0.0',\n    parents: ['nve-tabs']\n  };\n\n  render() {\n    return html`\n      <div internal-host focus-within>\n        <slot></slot>\n      </div>\n    `;\n  }\n\n  constructor() {\n    super();\n    this.type = 'button';\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this._internals.role = 'tab';\n  }\n\n  updated(props: PropertyValues<this>) {\n    super.updated(props);\n\n    if (props.has('selected')) {\n      if (this.selected) {\n        appendAnchorName(this, '--selected');\n      } else {\n        removeAnchorName(this, '--selected');\n      }\n    }\n  }\n}\n\n/**\n * @element nve-tabs\n * @description Tabs provide a selection UX, typically used for swapping content shown on a page, or within a navigation context.\n * @since 0.10.0\n * @entrypoint \\@nvidia-elements/core/tabs\n * @slot - default slot for tab-item\n * @cssprop --gap\n * @cssprop --indicator-background\n * @cssprop --indicator-border-radius\n * @cssprop --indicator-height\n * @cssprop --border-inset\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/tabs/\n * @responsive false\n */\n@audit()\n@keyNavigationList<Tabs>()\nexport class Tabs extends LitElement {\n  /**\n   * Determines whether the tabs should display in a vertical layout vs. defaulting to horizontal.\n   */\n  @property({ type: Boolean, reflect: true }) vertical = false;\n\n  /**\n   * Determines whether the tabs should display a border on selected items vs. defaults to show border.\n   */\n  @property({ type: Boolean, reflect: true }) borderless = false;\n\n  /**\n   * Determines whether the tabs should handle selection behavior vs. defaults to off.\n   */\n  @property({ type: Boolean, attribute: 'behavior-select' }) behaviorSelect = false;\n\n  static styles = useStyles([tabsStyleSheet]);\n\n  static readonly metadata = {\n    tag: 'nve-tabs',\n    version: '0.0.0',\n    children: ['nve-tabs-item']\n  };\n\n  /** @private */\n  get keynavListConfig(): KeynavListConfig {\n    return {\n      items: this.items,\n      layout: this.vertical ? 'vertical' : 'horizontal'\n    };\n  }\n\n  @queryAssignedElements() private items!: TabsItem[];\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  #selectTab(tabItem: HTMLElement & { matches: Element['matches']; disabled?: boolean; selected?: boolean }) {\n    if (!this.behaviorSelect || !tabItem.matches('nve-tabs-item') || tabItem.disabled) {\n      return;\n    }\n\n    this.keynavListConfig.items.forEach((i: HTMLElement) => ((i as TabsItem).selected = false));\n    tabItem.selected = true;\n  }\n\n  render() {\n    return html`\n      <div internal-host>\n        <slot></slot>\n      </div>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    appendRootNodeStyle(this, globalStyles);\n    attachInternals(this);\n    this._internals.role = 'tablist';\n    this.addEventListener('click', this.#onClick);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener('click', this.#onClick);\n  }\n\n  #onClick = (e: Event) => {\n    this.#selectTab(e.target as HTMLElement & { matches: Element['matches']; disabled?: boolean; selected?: boolean });\n  };\n\n  updated(props: PropertyValues<this>) {\n    super.updated(props);\n    this._internals.ariaOrientation = this.vertical ? 'vertical' : 'horizontal';\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;AA4CO,IAAA,IAAA,cAAuB,EAAuB,CAAU,EAAE;;gBAM/C,EAAU,CAAC,CAAkB,CAAC;;;kBAEnB;GACzB,KAAK;GACL,SAAS;GACT,SAAS,CAAC,UAAU;EACtB;;CAEA,SAAS;EACP,OAAO,CAAI;CAKb;CAEA,cAAc;EAEZ,AADA,MAAM,mBAnB+C,IAoBrD,KAAK,OAAO;CACd;CAEA,oBAAoB;EAElB,AADA,MAAM,kBAAkB,GACxB,KAAK,WAAW,OAAO;CACzB;CAEA,QAAQ,GAA6B;EAGnC,AAFA,MAAM,QAAQ,CAAK,GAEf,EAAM,IAAI,UAAU,MAClB,KAAK,WACP,EAAiB,MAAM,YAAY,IAEnC,EAAiB,MAAM,YAAY;CAGzC;AACF;GAvCG,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,UAN3C,EAAM,GACN,EAAwB,CAAA,GAAA,CAAA;AA8DlB,IAAA,IAAA,cAAmB,EAAW;;+BAIoB,sBAKE,0BAKmB,eAqDhE,MAAa;GACvB,KAAKA,GAAW,EAAE,MAA+F;EACnH;;;gBArDgB,EAAU,CAAC,CAAc,CAAC;;;kBAEf;GACzB,KAAK;GACL,SAAS;GACT,UAAU,CAAC,eAAe;EAC5B;;CAGA,IAAI,mBAAqC;EACvC,OAAO;GACL,OAAO,KAAK;GACZ,QAAQ,KAAK,WAAW,aAAa;EACvC;CACF;CAOA,GAAW,GAAgG;EACrG,CAAC,KAAK,kBAAkB,CAAC,EAAQ,QAAQ,eAAe,KAAK,EAAQ,aAIzE,KAAK,iBAAiB,MAAM,SAAS,MAAoB,EAAgB,WAAW,EAAM,GAC1F,EAAQ,WAAW;CACrB;CAEA,SAAS;EACP,OAAO,CAAI;CAKb;CAEA,oBAAoB;EAKlB,AAJA,MAAM,kBAAkB,GACxB,EAAoB,MAAM,CAAY,GACtC,EAAgB,IAAI,GACpB,KAAK,WAAW,OAAO,WACvB,KAAK,iBAAiB,SAAS,KAAKC,EAAQ;CAC9C;CAEA,uBAAuB;EAErB,AADA,MAAM,qBAAqB,GAC3B,KAAK,oBAAoB,SAAS,KAAKA,EAAQ;CACjD;CAEA;CAIA,QAAQ,GAA6B;EAEnC,AADA,MAAM,QAAQ,CAAK,GACnB,KAAK,WAAW,kBAAkB,KAAK,WAAW,aAAa;CACjE;AACF;GAvEG,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,MAKzC,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,cAAA,KAAA,CAAA,MAKzC,EAAS;CAAE,MAAM;CAAS,WAAW;AAAkB,CAAC,CAAA,GAAA,EAAA,WAAA,kBAAA,KAAA,CAAA,MAkBxD,EAAsB,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,UAlCxB,EAAM,GACN,EAAwB,CAAA,GAAA,CAAA"}

package/dist/tag/tag.d.ts

@@ -1,5 +1,7 @@
-import { Color, Prominence, BaseButton } from '../internal';
+import { LitElement } from 'lit';
+import { Color, Prominence } from '../internal';
 import { Icon } from '../icon';
+declare const Tag_base: import('@nvidia-elements/forms/mixins').ButtonFormControlMixinReturn<typeof LitElement>;
 /**
  * @element nve-tag
  * @description A interactive element that represents a category or group of content. Typically used to filter or organize content for one to many relations.
@@ -22,7 +24,7 @@ import { Icon } from '../icon';
  * @csspart icon - The icon element
  * @aria https://www.w3.org/WAI/ARIA/apg/patterns/button/
  */
-export declare class Tag extends BaseButton {
+export declare class Tag extends Tag_base {
     #private;
     static styles: import('lit').CSSResult[];
     static readonly metadata: {
@@ -42,6 +44,7 @@ export declare class Tag extends BaseButton {
     i18n: Partial<import('../internal').I18nStrings & {
         __set: boolean;
     }>;
-    render(): import('lit-html').TemplateResult<1>;
+    render(): import('lit').TemplateResult<1>;
     constructor();
 }
+export {};

package/dist/tag/tag2.js

@@ -1,45 +1,45 @@
-import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.130.0/helpers/decorate.js";
-import { BaseButton as t } from "../internal/base/button.js";
-import { I18nController as n } from "../internal/controllers/i18n.controller.js";
-import { TypeClosableController as r } from "../internal/controllers/type-closable.controller.js";
-import { scopedRegistry as i } from "../internal/decorators/scoped-registry.js";
-import { colorStateStyles as a, useStyles as o } from "../internal/styles/index.js";
-import { Icon as s } from "../icon/icon2.js";
-import c from "./tag.js";
-import { html as l } from "lit";
+import { I18nController as e } from "../internal/controllers/i18n.controller.js";
+import { TypeClosableController as t } from "../internal/controllers/type-closable.controller.js";
+import { scopedRegistry as n } from "../internal/decorators/scoped-registry.js";
+import { colorStateStyles as r, useStyles as i } from "../internal/styles/index.js";
+import { __decorate as a } from "../_virtual/_@oxc-project_runtime@0.132.0/helpers/decorate.js";
+import { Icon as o } from "../icon/icon2.js";
+import s from "./tag.js";
+import { LitElement as c, html as l } from "lit";
 import { property as u } from "lit/decorators/property.js";
-import { ifDefined as d } from "lit/directives/if-defined.js";
+import { ButtonFormControlMixin as d } from "@nvidia-elements/forms/mixins";
+import { ifDefined as f } from "lit/directives/if-defined.js";
 //#region src/tag/tag.ts
-var f = class extends t {
+var p = class extends d(c) {
 	static {
-		this.styles = o([a, c]);
+		this.styles = i([r, s]);
 	}
 	static {
 		this.metadata = {
 			tag: "nve-tag",
-			version: "0.2.2"
+			version: "0.2.4"
 		};
 	}
 	static {
-		this.elementDefinitions = { [s.metadata.tag]: s };
+		this.elementDefinitions = { [o.metadata.tag]: o };
 	}
 	#e;
 	#t;
 	render() {
-		return l`<div internal-host interaction-state focus-within><slot></slot>${this.closable ? l`<nve-icon part="icon" @click="${() => this.#t.close()}" container="flat" name="cancel" size="sm" role="img" aria-label="${d(this.i18n.close)}"></nve-icon>` : ""}</div>`;
+		return l`<div internal-host interaction-state focus-within><slot></slot>${this.closable ? l`<nve-icon part="icon" @click="${() => this.#t.close()}" container="flat" name="cancel" size="sm" role="img" aria-label="${f(this.i18n.close)}"></nve-icon>` : ""}</div>`;
 	}
 	constructor() {
-		super(), this.closable = !1, this.#e = new n(this), this.i18n = this.#e.i18n, this.#t = new r(this), this.type = "button";
+		super(), this.closable = !1, this.#e = new e(this), this.i18n = this.#e.i18n, this.#t = new t(this), this.type = "button";
 	}
 };
-e([u({ type: Boolean })], f.prototype, "closable", void 0), e([u({
+a([u({ type: Boolean })], p.prototype, "closable", void 0), a([u({
 	type: String,
 	reflect: !0
-})], f.prototype, "color", void 0), e([u({
+})], p.prototype, "color", void 0), a([u({
 	type: String,
 	reflect: !0
-})], f.prototype, "prominence", void 0), e([u({ type: Object })], f.prototype, "i18n", void 0), f = e([i()], f);
+})], p.prototype, "prominence", void 0), a([u({ type: Object })], p.prototype, "i18n", void 0), p = a([n()], p);
 //#endregion
-export { f as Tag };
+export { p as Tag };
 
 //# sourceMappingURL=tag2.js.map

package/dist/tag/tag2.js.map

@@ -1 +1 @@
-{"version":3,"file":"tag2.js","names":["#typeClosableController","#i18nController"],"sources":["../../src/tag/tag.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 { property } from 'lit/decorators/property.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport type { Color, Prominence } from '@nvidia-elements/core/internal';\nimport {\n  I18nController,\n  BaseButton,\n  TypeClosableController,\n  useStyles,\n  colorStateStyles,\n  scopedRegistry\n} from '@nvidia-elements/core/internal';\nimport { Icon } from '@nvidia-elements/core/icon';\nimport styles from './tag.css?inline';\n\n/**\n * @element nve-tag\n * @description A interactive element that represents a category or group of content. Typically used to filter or organize content for one to many relations.\n * @since 0.10.0\n * @entrypoint \\@nvidia-elements/core/tag\n * @slot - default slot for content\n * @cssprop --background\n * @cssprop --color\n * @cssprop --gap\n * @cssprop --font-size\n * @cssprop --padding\n * @cssprop --border\n * @cssprop --border-radius\n * @cssprop --font-weight\n * @cssprop --cursor\n * @cssprop --height\n * @cssprop --width\n * @cssprop --max-width\n * @cssprop --text-decoration\n * @csspart icon - The icon element\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/button/\n */\n@scopedRegistry()\nexport class Tag extends BaseButton {\n  static styles = useStyles([colorStateStyles, styles]);\n\n  static readonly metadata = {\n    tag: 'nve-tag',\n    version: '0.0.0'\n  };\n\n  static elementDefinitions = {\n    [Icon.metadata.tag]: Icon\n  };\n\n  /** Determines if tag is closable, if true, the component renders a close icon. */\n  @property({ type: Boolean }) closable = false;\n\n  /** Determines the color of the tag. */\n  @property({ type: String, reflect: true }) color: Color;\n\n  /** Determines the visual prominence or weight */\n  @property({ type: String, reflect: true }) prominence?: Extract<Prominence, 'emphasis'>;\n\n  #i18nController: I18nController<this> = new I18nController<this>(this);\n\n  /** Updates internal string values for internationalization. */\n  @property({ type: Object }) i18n = this.#i18nController.i18n;\n\n  #typeClosableController = new TypeClosableController(this);\n\n  render() {\n    return html`\n      <div internal-host interaction-state focus-within>\n        <slot></slot>\n        ${this.closable ? html`<nve-icon part=\"icon\" @click=${() => this.#typeClosableController.close()} container=\"flat\" name=\"cancel\" size=\"sm\" role=\"img\" aria-label=${ifDefined(this.i18n.close)}></nve-icon>` : ''}\n      </div>\n    `;\n  }\n\n  constructor() {\n    super();\n    this.type = 'button';\n  }\n}\n"],"mappings":";;;;;;;;;;;;AAyCO,IAAA,IAAA,cAAkB,EAAW;;gBAClB,EAAU,CAAC,GAAkB,CAAM,CAAC;;;kBAEzB;GACzB,KAAK;GACL,SAAS;EACX;;;4BAE4B,GACzB,EAAK,SAAS,MAAM,EACvB;;CAWA;CAKA;CAEA,SAAS;EACP,OAAO,CAAI,kEAGL,KAAK,WAAW,CAAI,uCAAsC,KAAKA,GAAwB,MAAM,EAAE,oEAAkE,EAAU,KAAK,KAAK,KAAK,EAAE,iBAAgB,GAAG;CAGvN;CAEA,cAAc;EAEZ,AADA,MAAM,mBAzBgC,cAQA,IAAI,EAAqB,IAAI,eAGlC,KAAKC,GAAgB,gBAE9B,IAAI,EAAuB,IAAI,GAavD,KAAK,OAAO;CACd;AACF;GA5BG,EAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,MAG1B,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,MAGxC,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,cAAA,KAAA,CAAA,MAKxC,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,UAzB3B,EAAe,CAAA,GAAA,CAAA"}
+{"version":3,"file":"tag2.js","names":["#typeClosableController","#i18nController"],"sources":["../../src/tag/tag.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { ButtonFormControlMixin } from '@nvidia-elements/forms/mixins';\nimport type { Color, Prominence } from '@nvidia-elements/core/internal';\nimport {\n  I18nController,\n  TypeClosableController,\n  useStyles,\n  colorStateStyles,\n  scopedRegistry\n} from '@nvidia-elements/core/internal';\nimport { Icon } from '@nvidia-elements/core/icon';\nimport styles from './tag.css?inline';\n\n/**\n * @element nve-tag\n * @description A interactive element that represents a category or group of content. Typically used to filter or organize content for one to many relations.\n * @since 0.10.0\n * @entrypoint \\@nvidia-elements/core/tag\n * @slot - default slot for content\n * @cssprop --background\n * @cssprop --color\n * @cssprop --gap\n * @cssprop --font-size\n * @cssprop --padding\n * @cssprop --border\n * @cssprop --border-radius\n * @cssprop --font-weight\n * @cssprop --cursor\n * @cssprop --height\n * @cssprop --width\n * @cssprop --max-width\n * @cssprop --text-decoration\n * @csspart icon - The icon element\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/button/\n */\n@scopedRegistry()\nexport class Tag extends ButtonFormControlMixin(LitElement) {\n  static styles = useStyles([colorStateStyles, styles]);\n\n  static readonly metadata = {\n    tag: 'nve-tag',\n    version: '0.0.0'\n  };\n\n  static elementDefinitions = {\n    [Icon.metadata.tag]: Icon\n  };\n\n  /** Determines if tag is closable, if true, the component renders a close icon. */\n  @property({ type: Boolean }) closable = false;\n\n  /** Determines the color of the tag. */\n  @property({ type: String, reflect: true }) color: Color;\n\n  /** Determines the visual prominence or weight */\n  @property({ type: String, reflect: true }) prominence?: Extract<Prominence, 'emphasis'>;\n\n  #i18nController: I18nController<this> = new I18nController<this>(this);\n\n  /** Updates internal string values for internationalization. */\n  @property({ type: Object }) i18n = this.#i18nController.i18n;\n\n  #typeClosableController = new TypeClosableController(this);\n\n  render() {\n    return html`\n      <div internal-host interaction-state focus-within>\n        <slot></slot>\n        ${this.closable ? html`<nve-icon part=\"icon\" @click=${() => this.#typeClosableController.close()} container=\"flat\" name=\"cancel\" size=\"sm\" role=\"img\" aria-label=${ifDefined(this.i18n.close)}></nve-icon>` : ''}\n      </div>\n    `;\n  }\n\n  constructor() {\n    super();\n    this.type = 'button';\n  }\n}\n"],"mappings":";;;;;;;;;;;;AAyCO,IAAA,IAAA,cAAkB,EAAuB,CAAU,EAAE;;gBAC1C,EAAU,CAAC,GAAkB,CAAM,CAAC;;;kBAEzB;GACzB,KAAK;GACL,SAAS;EACX;;;4BAE4B,GACzB,EAAK,SAAS,MAAM,EACvB;;CAWA;CAKA;CAEA,SAAS;EACP,OAAO,CAAI,kEAGL,KAAK,WAAW,CAAI,uCAAsC,KAAKA,GAAwB,MAAM,EAAE,oEAAkE,EAAU,KAAK,KAAK,KAAK,EAAE,iBAAgB,GAAG;CAGvN;CAEA,cAAc;EAEZ,AADA,MAAM,mBAzBgC,cAQA,IAAI,EAAqB,IAAI,eAGlC,KAAKC,GAAgB,gBAE9B,IAAI,EAAuB,IAAI,GAavD,KAAK,OAAO;CACd;AACF;GA5BG,EAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,MAG1B,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,MAGxC,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,cAAA,KAAA,CAAA,MAKxC,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,UAzB3B,EAAe,CAAA,GAAA,CAAA"}

package/dist/textarea/textarea2.js

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

package/dist/time/time.d.ts

@@ -30,5 +30,5 @@ export declare class Time extends Control implements ContainerElement {
     static elementDefinitions: {
         [IconButton.metadata.tag]: typeof IconButton;
     };
-    protected get suffixContent(): import('lit-html').TemplateResult<1>;
+    protected get suffixContent(): import('lit').TemplateResult<1>;
 }