@nvidia-elements/core 2.7.0 → 2.7.2

package/dist/icon-button/icon-button.examples.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon-button.examples.js","names":[],"sources":["../../src/icon-button/icon-button.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/icon-button/define.js';\n\nexport default {\n  title: 'Elements/Icon Button',\n  component: 'nve-icon-button'\n};\n\n/**\n * @summary Basic icon button for compact actions and toolbar controls with minimal visual footprint.\n */\nexport const Default = {\n  render: () => html`\n    <nve-icon-button icon-name=\"menu\"></nve-icon-button>\n  `\n};\n\n/**\n * @summary Icon buttons with different interaction styles including default, emphasis, destructive, and disabled states.\n */\nexport const Interactions = {\n  render: () => html`\n    <nve-icon-button icon-name=\"menu\"></nve-icon-button>\n    <nve-icon-button interaction=\"emphasis\" icon-name=\"menu\"></nve-icon-button>\n    <nve-icon-button interaction=\"destructive\" icon-name=\"menu\"></nve-icon-button>\n    <nve-icon-button disabled icon-name=\"menu\"></nve-icon-button>\n  `\n}\n\n/**\n * @summary Icon buttons in different sizes (small, medium, large) for varying contexts and visual hierarchy.\n * @tags test-case\n */\nexport const Size = {\n  render: () => html`\n    <nve-icon-button size=\"sm\" icon-name=\"menu\"></nve-icon-button>\n    <nve-icon-button icon-name=\"menu\"></nve-icon-button>\n    <nve-icon-button size=\"lg\" icon-name=\"menu\"></nve-icon-button>\n  `\n}\n\n/**\n * @summary Flat container icon buttons with interaction styles for minimal visual weight in dense toolbars.\n * @tags test-case\n */\nexport const FlatInteractions = {\n  render: () => html`\n    <nve-icon-button container=\"flat\" icon-name=\"menu\"></nve-icon-button>\n    <nve-icon-button container=\"flat\" interaction=\"emphasis\" icon-name=\"menu\"></nve-icon-button>\n    <nve-icon-button container=\"flat\" interaction=\"destructive\" icon-name=\"menu\"></nve-icon-button>\n    <nve-icon-button container=\"flat\" icon-name=\"menu\" disabled></nve-icon-button>\n  `\n}\n\n/**\n * @summary Icon buttons with pressed state for toggle functionality like filters or visibility controls.\n */\nexport const Pressed = {\n  render: () => html`\n    <nve-icon-button pressed icon-name=\"filter-stroke\"></nve-icon-button>\n    <nve-icon-button icon-name=\"filter\"></nve-icon-button>\n  `\n}\n\n/**\n * @summary Flat icon buttons with pressed state for low-emphasis toggles and compact toggle controls.\n * @tags test-case\n */\nexport const PressedFlat = {\n  render: () => html`\n    <nve-icon-button pressed container=\"flat\" icon-name=\"eye-hidden\" aria-label=\"show\"></nve-icon-button>\n    <nve-icon-button container=\"flat\" icon-name=\"eye\"  aria-label=\"hide\"></nve-icon-button>\n  `\n}\n\n/**\n * @summary Inline icon buttons with pressed state for minimal toggle controls within text or content flows.\n * @tags test-case\n */\nexport const PressedInline = {\n  render: () => html`\n    <nve-icon-button pressed container=\"inline\" icon-name=\"eye-hidden\" aria-label=\"show\"></nve-icon-button>\n    <nve-icon-button container=\"inline\" icon-name=\"eye\" aria-label=\"hide\"></nve-icon-button>\n  `\n}\n\n/**\n * @summary Icon buttons with selected state for mutually exclusive options like view modes or layout choices.\n */\nexport const Selected = {\n  render: () => html`\n  <nve-icon-button selected icon-name=\"split-vertical\" aria-label=\"split vertical\"></nve-icon-button>\n  <nve-icon-button icon-name=\"split-horizontal\" aria-label=\"split horizontal\"></nve-icon-button>\n  <nve-icon-button icon-name=\"split-none\" aria-label=\"preview\"></nve-icon-button>\n  `\n}\n\n/**\n * @summary Flat icon buttons with selected state for low-emphasis mode selection in compact toolbars.\n * @tags test-case\n */\nexport const SelectedFlat = {\n  render: () => html`\n    <nve-icon-button selected container=\"flat\" icon-name=\"split-vertical\" aria-label=\"split vertical\"></nve-icon-button>\n    <nve-icon-button container=\"flat\" icon-name=\"split-horizontal\" aria-label=\"split horizontal\"></nve-icon-button>\n    <nve-icon-button container=\"flat\" icon-name=\"split-none\" aria-label=\"preview\"></nve-icon-button>\n  `\n}\n\n/**\n * @summary Inline icon buttons with selected state for minimal mode selection within content flows.\n * @tags test-case\n */\nexport const SelectedInline = {\n  render: () => html`\n    <nve-icon-button selected container=\"inline\" icon-name=\"split-vertical\" aria-label=\"split vertical\"></nve-icon-button>\n    <nve-icon-button container=\"inline\" icon-name=\"split-horizontal\" aria-label=\"split horizontal\"></nve-icon-button>\n    <nve-icon-button container=\"inline\" icon-name=\"split-none\" aria-label=\"preview\"></nve-icon-button>\n  `\n}\n\n/**\n * @summary Icon buttons with custom content like text initials, emojis, or symbols for personalized actions.\n * @tags test-case\n */\nexport const CustomIcon = {\n  render: () => html`\n    <nve-icon-button interaction=\"emphasis\">ML</nve-icon-button>\n    <nve-icon-button>🎉</nve-icon-button>\n    <nve-icon-button>\n      🔗 <a href=\"#\" aria-label=\"custom icon button\"></a>\n    </nve-icon-button>\n  `\n}\n\n/**\n * @summary Proper implementation of icon buttons with links, showing correct and incorrect anchor placement patterns.\n */\nexport const Link = {\n  render: () => html`\n<nve-icon-button icon-name=\"menu\">\n  <a href=\"#\" aria-label=\"link to page\"></a>\n</nve-icon-button>`\n}\n\n/**\n * @summary Icon buttons styled for light and dark themes with all interaction states for theme consistency.\n * @tags test-case\n */\nexport const Themes = {\n  render: () => html`\n    <div nve-theme=\"root light\">\n      <nve-icon-button icon-name=\"menu\"></nve-icon-button>\n      <nve-icon-button interaction=\"emphasis\" icon-name=\"menu\"></nve-icon-button>\n      <nve-icon-button interaction=\"destructive\" icon-name=\"menu\"></nve-icon-button>\n      <nve-icon-button container=\"flat\" icon-name=\"menu\"></nve-icon-button>\n      <nve-icon-button disabled icon-name=\"menu\"></nve-icon-button>\n    </div>\n    <div nve-theme=\"root dark\">\n      <nve-icon-button icon-name=\"menu\"></nve-icon-button>\n      <nve-icon-button interaction=\"emphasis\" icon-name=\"menu\"></nve-icon-button>\n      <nve-icon-button interaction=\"destructive\" icon-name=\"menu\"></nve-icon-button>\n      <nve-icon-button container=\"flat\" icon-name=\"menu\"></nve-icon-button>\n      <nve-icon-button disabled icon-name=\"menu\"></nve-icon-button>\n    </div>\n  `\n}"],"mappings":";AAGA,IAAA,IAAS"}
+{"version":3,"file":"icon-button.examples.js","names":[],"sources":["../../src/icon-button/icon-button.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/icon-button/define.js';\n\nexport default {\n  title: 'Elements/Icon Button',\n  component: 'nve-icon-button'\n};\n\n/**\n * @summary Basic icon button for compact actions and toolbar controls with minimal visual footprint.\n */\nexport const Default = {\n  render: () => html`\n    <nve-icon-button icon-name=\"menu\"></nve-icon-button>\n  `\n};\n\n/**\n * @summary Icon buttons with different interaction styles including default, emphasis, destructive, and disabled states.\n */\nexport const Interactions = {\n  render: () => html`\n    <nve-icon-button icon-name=\"menu\"></nve-icon-button>\n    <nve-icon-button interaction=\"emphasis\" icon-name=\"menu\"></nve-icon-button>\n    <nve-icon-button interaction=\"destructive\" icon-name=\"menu\"></nve-icon-button>\n    <nve-icon-button disabled icon-name=\"menu\"></nve-icon-button>\n  `\n}\n\n/**\n * @summary Icon buttons in different sizes (small, medium, large) for varying contexts and visual hierarchy.\n * @tags test-case\n */\nexport const Size = {\n  render: () => html`\n    <nve-icon-button size=\"sm\" icon-name=\"menu\"></nve-icon-button>\n    <nve-icon-button icon-name=\"menu\"></nve-icon-button>\n    <nve-icon-button size=\"lg\" icon-name=\"menu\"></nve-icon-button>\n  `\n}\n\n/**\n * @summary Flat container icon buttons with interaction styles for minimal visual weight in dense toolbars.\n * @tags test-case\n */\nexport const FlatInteractions = {\n  render: () => html`\n    <nve-icon-button container=\"flat\" icon-name=\"menu\"></nve-icon-button>\n    <nve-icon-button container=\"flat\" interaction=\"emphasis\" icon-name=\"menu\"></nve-icon-button>\n    <nve-icon-button container=\"flat\" interaction=\"destructive\" icon-name=\"menu\"></nve-icon-button>\n    <nve-icon-button container=\"flat\" icon-name=\"menu\" disabled></nve-icon-button>\n  `\n}\n\n/**\n * @summary Icon buttons with pressed state for toggle functionality like filters or visibility controls.\n */\nexport const Pressed = {\n  render: () => html`\n    <nve-icon-button pressed icon-name=\"filter\"></nve-icon-button>\n    <nve-icon-button icon-name=\"filter\"></nve-icon-button>\n  `\n}\n\n/**\n * @summary Flat icon buttons with pressed state for low-emphasis toggles and compact toggle controls.\n * @tags test-case\n */\nexport const PressedFlat = {\n  render: () => html`\n    <nve-icon-button pressed container=\"flat\" icon-name=\"eye-hidden\" aria-label=\"show\"></nve-icon-button>\n    <nve-icon-button container=\"flat\" icon-name=\"eye\"  aria-label=\"hide\"></nve-icon-button>\n  `\n}\n\n/**\n * @summary Inline icon buttons with pressed state for minimal toggle controls within text or content flows.\n * @tags test-case\n */\nexport const PressedInline = {\n  render: () => html`\n    <nve-icon-button pressed container=\"inline\" icon-name=\"eye-hidden\" aria-label=\"show\"></nve-icon-button>\n    <nve-icon-button container=\"inline\" icon-name=\"eye\" aria-label=\"hide\"></nve-icon-button>\n  `\n}\n\n/**\n * @summary Icon buttons with selected state for mutually exclusive options like view modes or layout choices.\n */\nexport const Selected = {\n  render: () => html`\n  <nve-icon-button selected icon-name=\"split-vertical\" aria-label=\"split vertical\"></nve-icon-button>\n  <nve-icon-button icon-name=\"split-horizontal\" aria-label=\"split horizontal\"></nve-icon-button>\n  <nve-icon-button icon-name=\"split-none\" aria-label=\"preview\"></nve-icon-button>\n  `\n}\n\n/**\n * @summary Flat icon buttons with selected state for low-emphasis mode selection in compact toolbars.\n * @tags test-case\n */\nexport const SelectedFlat = {\n  render: () => html`\n    <nve-icon-button selected container=\"flat\" icon-name=\"split-vertical\" aria-label=\"split vertical\"></nve-icon-button>\n    <nve-icon-button container=\"flat\" icon-name=\"split-horizontal\" aria-label=\"split horizontal\"></nve-icon-button>\n    <nve-icon-button container=\"flat\" icon-name=\"split-none\" aria-label=\"preview\"></nve-icon-button>\n  `\n}\n\n/**\n * @summary Inline icon buttons with selected state for minimal mode selection within content flows.\n * @tags test-case\n */\nexport const SelectedInline = {\n  render: () => html`\n    <nve-icon-button selected container=\"inline\" icon-name=\"split-vertical\" aria-label=\"split vertical\"></nve-icon-button>\n    <nve-icon-button container=\"inline\" icon-name=\"split-horizontal\" aria-label=\"split horizontal\"></nve-icon-button>\n    <nve-icon-button container=\"inline\" icon-name=\"split-none\" aria-label=\"preview\"></nve-icon-button>\n  `\n}\n\n/**\n * @summary Icon buttons with custom content like text initials, emojis, or symbols for personalized actions.\n * @tags test-case\n */\nexport const CustomIcon = {\n  render: () => html`\n    <nve-icon-button interaction=\"emphasis\">ML</nve-icon-button>\n    <nve-icon-button>🎉</nve-icon-button>\n    <nve-icon-button>\n      🔗 <a href=\"#\" aria-label=\"custom icon button\"></a>\n    </nve-icon-button>\n  `\n}\n\n/**\n * @summary Proper implementation of icon buttons with links, showing correct and incorrect anchor placement patterns.\n */\nexport const Link = {\n  render: () => html`\n<nve-icon-button icon-name=\"menu\">\n  <a href=\"#\" aria-label=\"link to page\"></a>\n</nve-icon-button>`\n}\n\n/**\n * @summary Icon buttons styled for light and dark themes with all interaction states for theme consistency.\n * @tags test-case\n */\nexport const Themes = {\n  render: () => html`\n    <div nve-theme=\"root light\">\n      <nve-icon-button icon-name=\"menu\"></nve-icon-button>\n      <nve-icon-button interaction=\"emphasis\" icon-name=\"menu\"></nve-icon-button>\n      <nve-icon-button interaction=\"destructive\" icon-name=\"menu\"></nve-icon-button>\n      <nve-icon-button container=\"flat\" icon-name=\"menu\"></nve-icon-button>\n      <nve-icon-button disabled icon-name=\"menu\"></nve-icon-button>\n    </div>\n    <div nve-theme=\"root dark\">\n      <nve-icon-button icon-name=\"menu\"></nve-icon-button>\n      <nve-icon-button interaction=\"emphasis\" icon-name=\"menu\"></nve-icon-button>\n      <nve-icon-button interaction=\"destructive\" icon-name=\"menu\"></nve-icon-button>\n      <nve-icon-button container=\"flat\" icon-name=\"menu\"></nve-icon-button>\n      <nve-icon-button disabled icon-name=\"menu\"></nve-icon-button>\n    </div>\n  `\n}"],"mappings":";AAGA,IAAA,IAAS"}

package/dist/icon-button/icon-button.examples.json

@@ -45,7 +45,7 @@
     {
       "id": "icon-button-pressed",
       "name": "Pressed",
-      "template": "<nve-icon-button pressed icon-name=\"filter-stroke\"></nve-icon-button>\n<nve-icon-button icon-name=\"filter\"></nve-icon-button>\n",
+      "template": "<nve-icon-button pressed icon-name=\"filter\"></nve-icon-button>\n<nve-icon-button icon-name=\"filter\"></nve-icon-button>\n",
       "summary": "Icon buttons with pressed state for toggle functionality like filters or visibility controls.",
       "description": "",
       "composition": false,

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

@@ -15,7 +15,7 @@ var l = class extends a {
 	static {
 		this.metadata = {
 			tag: "nve-icon-button",
-			version: "2.7.0"
+			version: "2.7.2"
 		};
 	}
 	static {

package/dist/index.js

@@ -2,7 +2,7 @@ import { I18nService as e } from "./internal/services/i18n.service.js";
 import { getThemeTokens as t } from "./internal/utils/dom.js";
 import { statusIcons as n } from "./internal/types/index.js";
 //#region src/index.ts
-var r = "2.7.0", i = "@nvidia-elements";
+var r = "2.7.2", i = "@nvidia-elements";
 //#endregion
 export { e as I18nService, i as SCOPE, r as VERSION, t as getThemeTokens, n as statusIcons };
 

package/dist/input/input-group2.js

@@ -11,7 +11,7 @@ var a = class extends n {
 	static {
 		this.metadata = {
 			tag: "nve-input-group",
-			version: "2.7.0"
+			version: "2.7.2"
 		};
 	}
 	async connectedCallback() {

package/dist/input/input2.js

@@ -14,7 +14,7 @@ var a = r, o = class extends n {
 	static {
 		this.metadata = {
 			tag: "nve-input",
-			version: "2.7.0"
+			version: "2.7.2"
 		};
 	}
 };

package/dist/internal/controllers/keynav-list.controller.js

@@ -1,10 +1,10 @@
-import { focusElement as e, initializeKeyListItems as t, setActiveKeyListItem as n } from "../utils/focus.js";
-import { KeynavCode as r, validKeyNavigationCode as i } from "../utils/dom.js";
+import { focusElement as e, initializeKeyListItems as t, isFocusable as n, setActiveKeyListItem as r } from "../utils/focus.js";
+import { KeynavCode as i, validKeyNavigationCode as a } from "../utils/dom.js";
 //#region src/internal/controllers/keynav-list.controller.ts
-function a() {
-	return (e) => e.addInitializer((e) => new o(e));
+function o() {
+	return (e) => e.addInitializer((e) => new s(e));
 }
-var o = class {
+var s = class {
 	get #e() {
 		return {
 			layout: "horizontal",
@@ -23,61 +23,65 @@ var o = class {
 		return this.host.hasAttribute("nve-keynav-disabled");
 	}
 	async hostConnected() {
-		await this.host.updateComplete, this.host.isConnected && (this.#n(), this.host.addEventListener("pointerup", this.#s), this.host.addEventListener("keydown", this.#c));
+		await this.host.updateComplete, this.host.isConnected && (this.#n(), this.host.addEventListener("pointerup", this.#c), this.host.addEventListener("keydown", this.#l));
 	}
 	hostDisconnected() {
-		this.host.removeEventListener("pointerup", this.#s), this.host.removeEventListener("keydown", this.#c);
+		this.host.removeEventListener("pointerup", this.#c), this.host.removeEventListener("keydown", this.#l);
 	}
 	#n() {
-		let { manageFocus: e, manageTabindex: r, items: i, initialItem: a } = this.#e;
-		e && r && !this.#t && (t(i), a && i.includes(a) && n(i, a));
+		let { manageFocus: e, manageTabindex: n, items: i, initialItem: a } = this.#e;
+		e && n && !this.#t && (t(i), a && i.includes(a) && r(i, a));
 	}
 	#r(e) {
-		let t = this.#a(e, this.#e.items);
-		t && this.#o(e, t);
+		let t = this.#o(e, this.#e.items);
+		t && this.#s(e, t);
 	}
 	#i(e) {
-		if (i(e) && !this.#t) {
+		if (a(e) && !this.#t) {
 			let { loop: t, layout: n, dir: r, items: i } = this.#e, a = this.#a(e, i);
 			if (a) {
-				let { next: o, previous: s } = u(a, Array.from(i), {
+				let { next: o, previous: s } = d(a, Array.from(i), {
 					loop: t,
 					layout: n,
 					dir: r,
 					code: e.code
 				});
-				o !== s && this.#o(e, i[o], i[s]);
+				o !== s && this.#s(e, i[o], i[s]);
 			}
 		}
 	}
 	#a(e, t) {
 		let n = e.composedPath()[0];
-		return t.find((e) => e === n) ? n : null;
+		return n instanceof HTMLElement && t.includes(n) ? n : null;
 	}
-	#o(t, r, i) {
+	#o(e, t) {
+		let r = e.composedPath(), i = r.findIndex((e) => e instanceof HTMLElement && t.includes(e)), a = r[i];
+		return a instanceof HTMLElement ? r.slice(0, i).some((e) => e instanceof Element && n(e)) ? null : a : null;
+	}
+	#s(t, n, i) {
 		let { manageFocus: a, manageTabindex: o, items: s } = this.#e;
-		a && (o && n(s, r), e(r), t.preventDefault());
+		a && (o && r(s, n), e(n), t.preventDefault());
 		let c = {
-			activeItem: r,
+			activeItem: n,
 			previousItem: i,
 			code: t instanceof KeyboardEvent ? t.code : null,
 			metaKey: t.ctrlKey || t.metaKey,
 			items: s
 		};
-		r.dispatchEvent(new CustomEvent("nve-key-change", {
+		n.dispatchEvent(new CustomEvent("nve-key-change", {
 			bubbles: !0,
 			composed: !0,
 			detail: c
 		}));
 	}
-	#s = (e) => this.#r(e);
-	#c = (e) => this.#i(e);
+	#c = (e) => this.#r(e);
+	#l = (e) => this.#i(e);
 };
-function s(e) {
-	let { code: t, layout: n, dir: i } = e, a = i === "rtl" ? r.ArrowRight : r.ArrowLeft, o = i === "rtl" ? r.ArrowLeft : r.ArrowRight;
+function c(e) {
+	let { code: t, layout: n, dir: r } = e, a = r === "rtl" ? i.ArrowRight : i.ArrowLeft, o = r === "rtl" ? i.ArrowLeft : i.ArrowRight;
 	if (n !== "horizontal") {
-		if (t === r.ArrowUp) return "backward";
-		if (t === r.ArrowDown) return "forward";
+		if (t === i.ArrowUp) return "backward";
+		if (t === i.ArrowDown) return "forward";
 	}
 	if (n !== "vertical") {
 		if (t === a) return "backward";
@@ -85,24 +89,24 @@ function s(e) {
 	}
 	return null;
 }
-function c(e) {
-	return e === r.End ? "end" : e === r.Home ? "home" : e === r.PageUp ? "pageup" : e === r.PageDown ? "pagedown" : null;
+function l(e) {
+	return e === i.End ? "end" : e === i.Home ? "home" : e === i.PageUp ? "pageup" : e === i.PageDown ? "pagedown" : null;
 }
-function l(e, t, n) {
+function u(e, t, n) {
 	let { limit: r, loop: i } = n, a = e + t;
 	return a >= 0 && a <= r ? a : i ? t < 0 ? r : 0 : e;
 }
-function u(e, t, n) {
+function d(e, t, n) {
 	let r = t.indexOf(e), i = r, a = t.length - 1;
-	switch (s(n) ?? c(n.code)) {
+	switch (c(n) ?? l(n.code)) {
 		case "backward":
-			r = l(r, -1, {
+			r = u(r, -1, {
 				limit: a,
 				loop: n.loop
 			});
 			break;
 		case "forward":
-			r = l(r, 1, {
+			r = u(r, 1, {
 				limit: a,
 				loop: n.loop
 			});
@@ -127,6 +131,6 @@ function u(e, t, n) {
 	};
 }
 //#endregion
-export { o as KeyNavigationListController, u as getNextKeyListItem, a as keyNavigationList };
+export { s as KeyNavigationListController, d as getNextKeyListItem, o as keyNavigationList };
 
 //# sourceMappingURL=keynav-list.controller.js.map

package/dist/internal/controllers/keynav-list.controller.js.map

@@ -1 +1 @@
-{"version":3,"file":"keynav-list.controller.js","names":["#config","#keynavDisabled","#initializeTabIndex","#onPointerUp","#onKeyDown","#getActiveItem","#setActiveItem","#clickItem","#focusItem"],"sources":["../../../src/internal/controllers/keynav-list.controller.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ReactiveController, ReactiveElement } from 'lit';\nimport type { LegacyDecoratorTarget } from '../types/index.js';\nimport { focusElement, initializeKeyListItems, setActiveKeyListItem } from '../utils/focus.js';\nimport { KeynavCode, validKeyNavigationCode } from '../utils/dom.js';\n\nexport interface KeynavListConfig {\n  items: NodeListOf<HTMLElement> | HTMLElement[];\n  initialItem?: HTMLElement;\n  layout?: 'both' | 'horizontal' | 'vertical';\n  manageFocus?: boolean;\n  manageTabindex?: boolean;\n  loop?: boolean;\n  dir?: string | null;\n}\n\nexport interface KeynavListElement {\n  keynavListConfig: KeynavListConfig;\n}\n\n/** https://webaim.org/techniques/keyboard/ */\nexport function keyNavigationList<T extends ReactiveElement & KeynavListElement>(): ClassDecorator {\n  return (target: LegacyDecoratorTarget) =>\n    target.addInitializer!((instance: T) => new KeyNavigationListController(instance));\n}\n\nexport class KeyNavigationListController<T extends ReactiveElement & KeynavListElement> implements ReactiveController {\n  get #config(): KeynavListConfig & { items: HTMLElement[] } {\n    return {\n      layout: 'horizontal',\n      manageFocus: true,\n      manageTabindex: true,\n      loop: false,\n      dir: this.host.getAttribute('rtl'),\n      ...this.host.keynavListConfig,\n      items: Array.from(this.host.keynavListConfig.items).filter(\n        (i: HTMLElement & { disabled?: boolean }) => !i.disabled\n      )\n    };\n  }\n\n  constructor(private host: T) {\n    this.host.addController(this);\n  }\n\n  /** @private attr nve-keynav-disabled is an internal API for advanced use cases only */\n  get #keynavDisabled() {\n    return this.host.hasAttribute('nve-keynav-disabled');\n  }\n\n  async hostConnected() {\n    await this.host.updateComplete;\n    if (!this.host.isConnected) return;\n    this.#initializeTabIndex();\n    this.host.addEventListener('pointerup', this.#onPointerUp);\n    this.host.addEventListener('keydown', this.#onKeyDown);\n  }\n\n  hostDisconnected() {\n    this.host.removeEventListener('pointerup', this.#onPointerUp);\n    this.host.removeEventListener('keydown', this.#onKeyDown);\n  }\n\n  #initializeTabIndex() {\n    const { manageFocus, manageTabindex, items, initialItem } = this.#config;\n    if (manageFocus && manageTabindex && !this.#keynavDisabled) {\n      initializeKeyListItems(items);\n      if (initialItem && items.includes(initialItem)) {\n        setActiveKeyListItem(items, initialItem);\n      }\n    }\n  }\n\n  #clickItem(e: PointerEvent) {\n    const item = this.#getActiveItem(e, this.#config.items);\n    if (item) {\n      this.#setActiveItem(e, item);\n    }\n  }\n\n  #focusItem(e: KeyboardEvent) {\n    if (validKeyNavigationCode(e) && !this.#keynavDisabled) {\n      const { loop, layout, dir, items } = this.#config;\n      const activeItem = this.#getActiveItem(e, items);\n      if (activeItem) {\n        const { next, previous } = getNextKeyListItem(activeItem, Array.from(items), {\n          loop,\n          layout,\n          dir,\n          code: e.code as KeynavCode\n        });\n\n        if (next !== previous) {\n          this.#setActiveItem(e, items[next]!, items[previous]);\n        }\n      }\n    }\n  }\n\n  #getActiveItem(e: Event, items: HTMLElement[]) {\n    const focusedElement = e.composedPath()[0] as HTMLElement;\n    return items.find(i => i === focusedElement) ? focusedElement : null;\n  }\n\n  #setActiveItem(e: KeyboardEvent | PointerEvent, activeItem: HTMLElement, previousItem?: HTMLElement) {\n    const { manageFocus, manageTabindex, items } = this.#config;\n    if (manageFocus) {\n      if (manageTabindex) {\n        setActiveKeyListItem(items, activeItem);\n      }\n\n      focusElement(activeItem);\n      e.preventDefault();\n    }\n\n    const detail = {\n      activeItem,\n      previousItem,\n      code: e instanceof KeyboardEvent ? e.code : null,\n      metaKey: e.ctrlKey || e.metaKey,\n      items\n    };\n    activeItem.dispatchEvent(new CustomEvent('nve-key-change', { bubbles: true, composed: true, detail }));\n  }\n\n  #onPointerUp = (e: PointerEvent) => this.#clickItem(e);\n\n  #onKeyDown = (e: KeyboardEvent) => this.#focusItem(e);\n}\n\ninterface KeyListConfig {\n  code: KeynavCode;\n  loop?: boolean;\n  layout?: 'horizontal' | 'vertical' | 'both';\n  dir: string | null | undefined;\n}\n\nfunction resolveArrowDirection(config: KeyListConfig): 'backward' | 'forward' | null {\n  const { code, layout, dir } = config;\n  const start = dir === 'rtl' ? KeynavCode.ArrowRight : KeynavCode.ArrowLeft;\n  const end = dir === 'rtl' ? KeynavCode.ArrowLeft : KeynavCode.ArrowRight;\n\n  if (layout !== 'horizontal') {\n    if (code === KeynavCode.ArrowUp) return 'backward';\n    if (code === KeynavCode.ArrowDown) return 'forward';\n  }\n\n  if (layout !== 'vertical') {\n    if (code === start) return 'backward';\n    if (code === end) return 'forward';\n  }\n\n  return null;\n}\n\nfunction resolveSpecialKey(code: KeynavCode): 'home' | 'end' | 'pageup' | 'pagedown' | null {\n  if (code === KeynavCode.End) return 'end';\n  if (code === KeynavCode.Home) return 'home';\n  if (code === KeynavCode.PageUp) return 'pageup';\n  if (code === KeynavCode.PageDown) return 'pagedown';\n  return null;\n}\n\nfunction navigateWithLoop(current: number, step: number, options: { limit: number; loop: boolean | undefined }) {\n  const { limit, loop } = options;\n  const next = current + step;\n  if (next >= 0 && next <= limit) return next;\n  return loop ? (step < 0 ? limit : 0) : current;\n}\n\nexport function getNextKeyListItem(item: HTMLElement, items: HTMLElement[], config: KeyListConfig) {\n  let next = items.indexOf(item);\n  const previous = next;\n  const itemCount = items.length - 1;\n  const direction = resolveArrowDirection(config);\n\n  switch (direction ?? resolveSpecialKey(config.code)) {\n    case 'backward':\n      next = navigateWithLoop(next, -1, { limit: itemCount, loop: config.loop });\n      break;\n    case 'forward':\n      next = navigateWithLoop(next, 1, { limit: itemCount, loop: config.loop });\n      break;\n    case 'end':\n      next = itemCount;\n      break;\n    case 'home':\n      next = 0;\n      break;\n    case 'pageup':\n      next = Math.max(0, next - 4);\n      break;\n    case 'pagedown':\n      next = Math.min(itemCount, next + 4);\n      break;\n    case null:\n      break;\n  }\n\n  return { next, previous };\n}\n"],"mappings":"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"}
+{"version":3,"file":"keynav-list.controller.js","names":["#config","#keynavDisabled","#initializeTabIndex","#onPointerUp","#onKeyDown","#getPointerActiveItem","#setActiveItem","#getKeyboardActiveItem","#clickItem","#focusItem"],"sources":["../../../src/internal/controllers/keynav-list.controller.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ReactiveController, ReactiveElement } from 'lit';\nimport type { LegacyDecoratorTarget } from '../types/index.js';\nimport { focusElement, initializeKeyListItems, isFocusable, setActiveKeyListItem } from '../utils/focus.js';\nimport { KeynavCode, validKeyNavigationCode } from '../utils/dom.js';\n\nexport interface KeynavListConfig {\n  items: NodeListOf<HTMLElement> | HTMLElement[];\n  initialItem?: HTMLElement;\n  layout?: 'both' | 'horizontal' | 'vertical';\n  manageFocus?: boolean;\n  manageTabindex?: boolean;\n  loop?: boolean;\n  dir?: string | null;\n}\n\nexport interface KeynavListElement {\n  keynavListConfig: KeynavListConfig;\n}\n\n/** https://webaim.org/techniques/keyboard/ */\nexport function keyNavigationList<T extends ReactiveElement & KeynavListElement>(): ClassDecorator {\n  return (target: LegacyDecoratorTarget) =>\n    target.addInitializer!((instance: T) => new KeyNavigationListController(instance));\n}\n\nexport class KeyNavigationListController<T extends ReactiveElement & KeynavListElement> implements ReactiveController {\n  get #config(): KeynavListConfig & { items: HTMLElement[] } {\n    return {\n      layout: 'horizontal',\n      manageFocus: true,\n      manageTabindex: true,\n      loop: false,\n      dir: this.host.getAttribute('rtl'),\n      ...this.host.keynavListConfig,\n      items: Array.from(this.host.keynavListConfig.items).filter(\n        (i: HTMLElement & { disabled?: boolean }) => !i.disabled\n      )\n    };\n  }\n\n  constructor(private host: T) {\n    this.host.addController(this);\n  }\n\n  /** @private attr nve-keynav-disabled is an internal API for advanced use cases only */\n  get #keynavDisabled() {\n    return this.host.hasAttribute('nve-keynav-disabled');\n  }\n\n  async hostConnected() {\n    await this.host.updateComplete;\n    if (!this.host.isConnected) return;\n    this.#initializeTabIndex();\n    this.host.addEventListener('pointerup', this.#onPointerUp);\n    this.host.addEventListener('keydown', this.#onKeyDown);\n  }\n\n  hostDisconnected() {\n    this.host.removeEventListener('pointerup', this.#onPointerUp);\n    this.host.removeEventListener('keydown', this.#onKeyDown);\n  }\n\n  #initializeTabIndex() {\n    const { manageFocus, manageTabindex, items, initialItem } = this.#config;\n    if (manageFocus && manageTabindex && !this.#keynavDisabled) {\n      initializeKeyListItems(items);\n      if (initialItem && items.includes(initialItem)) {\n        setActiveKeyListItem(items, initialItem);\n      }\n    }\n  }\n\n  #clickItem(e: PointerEvent) {\n    const item = this.#getPointerActiveItem(e, this.#config.items);\n    if (item) {\n      this.#setActiveItem(e, item);\n    }\n  }\n\n  #focusItem(e: KeyboardEvent) {\n    if (validKeyNavigationCode(e) && !this.#keynavDisabled) {\n      const { loop, layout, dir, items } = this.#config;\n      const activeItem = this.#getKeyboardActiveItem(e, items);\n      if (activeItem) {\n        const { next, previous } = getNextKeyListItem(activeItem, Array.from(items), {\n          loop,\n          layout,\n          dir,\n          code: e.code as KeynavCode\n        });\n\n        if (next !== previous) {\n          this.#setActiveItem(e, items[next]!, items[previous]);\n        }\n      }\n    }\n  }\n\n  #getKeyboardActiveItem(e: KeyboardEvent, items: HTMLElement[]) {\n    const target = e.composedPath()[0];\n    return target instanceof HTMLElement && items.includes(target) ? target : null;\n  }\n\n  #getPointerActiveItem(e: PointerEvent, items: HTMLElement[]) {\n    const path = e.composedPath();\n    const itemIndex = path.findIndex(item => item instanceof HTMLElement && items.includes(item));\n    const item = path[itemIndex];\n\n    if (!(item instanceof HTMLElement)) return null;\n\n    const hasFocusableDescendant = path\n      .slice(0, itemIndex)\n      .some(descendant => descendant instanceof Element && isFocusable(descendant));\n    return hasFocusableDescendant ? null : item;\n  }\n\n  #setActiveItem(e: KeyboardEvent | PointerEvent, activeItem: HTMLElement, previousItem?: HTMLElement) {\n    const { manageFocus, manageTabindex, items } = this.#config;\n    if (manageFocus) {\n      if (manageTabindex) {\n        setActiveKeyListItem(items, activeItem);\n      }\n\n      focusElement(activeItem);\n      e.preventDefault();\n    }\n\n    const detail = {\n      activeItem,\n      previousItem,\n      code: e instanceof KeyboardEvent ? e.code : null,\n      metaKey: e.ctrlKey || e.metaKey,\n      items\n    };\n    activeItem.dispatchEvent(new CustomEvent('nve-key-change', { bubbles: true, composed: true, detail }));\n  }\n\n  #onPointerUp = (e: PointerEvent) => this.#clickItem(e);\n\n  #onKeyDown = (e: KeyboardEvent) => this.#focusItem(e);\n}\n\ninterface KeyListConfig {\n  code: KeynavCode;\n  loop?: boolean;\n  layout?: 'horizontal' | 'vertical' | 'both';\n  dir: string | null | undefined;\n}\n\nfunction resolveArrowDirection(config: KeyListConfig): 'backward' | 'forward' | null {\n  const { code, layout, dir } = config;\n  const start = dir === 'rtl' ? KeynavCode.ArrowRight : KeynavCode.ArrowLeft;\n  const end = dir === 'rtl' ? KeynavCode.ArrowLeft : KeynavCode.ArrowRight;\n\n  if (layout !== 'horizontal') {\n    if (code === KeynavCode.ArrowUp) return 'backward';\n    if (code === KeynavCode.ArrowDown) return 'forward';\n  }\n\n  if (layout !== 'vertical') {\n    if (code === start) return 'backward';\n    if (code === end) return 'forward';\n  }\n\n  return null;\n}\n\nfunction resolveSpecialKey(code: KeynavCode): 'home' | 'end' | 'pageup' | 'pagedown' | null {\n  if (code === KeynavCode.End) return 'end';\n  if (code === KeynavCode.Home) return 'home';\n  if (code === KeynavCode.PageUp) return 'pageup';\n  if (code === KeynavCode.PageDown) return 'pagedown';\n  return null;\n}\n\nfunction navigateWithLoop(current: number, step: number, options: { limit: number; loop: boolean | undefined }) {\n  const { limit, loop } = options;\n  const next = current + step;\n  if (next >= 0 && next <= limit) return next;\n  return loop ? (step < 0 ? limit : 0) : current;\n}\n\nexport function getNextKeyListItem(item: HTMLElement, items: HTMLElement[], config: KeyListConfig) {\n  let next = items.indexOf(item);\n  const previous = next;\n  const itemCount = items.length - 1;\n  const direction = resolveArrowDirection(config);\n\n  switch (direction ?? resolveSpecialKey(config.code)) {\n    case 'backward':\n      next = navigateWithLoop(next, -1, { limit: itemCount, loop: config.loop });\n      break;\n    case 'forward':\n      next = navigateWithLoop(next, 1, { limit: itemCount, loop: config.loop });\n      break;\n    case 'end':\n      next = itemCount;\n      break;\n    case 'home':\n      next = 0;\n      break;\n    case 'pageup':\n      next = Math.max(0, next - 4);\n      break;\n    case 'pagedown':\n      next = Math.min(itemCount, next + 4);\n      break;\n    case null:\n      break;\n  }\n\n  return { next, previous };\n}\n"],"mappings":"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"}

package/dist/internal/controllers/popover.examples.js.map

@@ -1 +1 @@
-{"version":3,"file":"popover.examples.js","names":[],"sources":["../../../src/internal/controllers/popover.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/forms/define.js';\nimport '@nvidia-elements/core/button/define.js';\nimport '@nvidia-elements/core/icon-button/define.js';\nimport '@nvidia-elements/core/search/define.js';\nimport '@nvidia-elements/core/dialog/define.js';\nimport '@nvidia-elements/core/tooltip/define.js';\nimport '@nvidia-elements/core/toast/define.js';\nimport '@nvidia-elements/core/drawer/define.js';\nimport '@nvidia-elements/core/dropdown/define.js';\nimport '@nvidia-elements/core/notification/define.js';\nimport '@nvidia-elements/core/toggletip/define.js';\n\nexport default {\n  title: 'Elements/Popovers',\n  parameters: {\n    layout: 'centered'\n  }\n}\n\n/* eslint-disable @nvidia-elements/lint/no-missing-popover-trigger */\n\n/**\n * @summary Anchor-based positioning where popovers anchor to specific elements rather than their triggers.\n * @tags test-case\n */\nexport const Anchor = {\n  render: () => html`\n    <nve-tooltip id=\"popover-1\" anchor=\"btn-2\">tooltip 1</nve-tooltip>\n    <nve-tooltip id=\"popover-2\" anchor=\"btn-1\">tooltip 2</nve-tooltip>\n    <div nve-layout=\"row gap:xs align:center\">\n      <nve-button id=\"btn-1\" popovertarget=\"popover-1\">button 1</nve-button>\n      <nve-button id=\"btn-2\" popovertarget=\"popover-2\">button 2</nve-button>\n    </div>\n  `\n}\n\n/**\n * @summary Nested popovers within dialogs and notifications, with proper layering and stacking order.\n * @tags test-case\n */\nexport const Nested = {\n  render: () => html`\n<style>\n  #root-inner { height: 2000px;}\n</style>\n<nve-dialog closable modal>\n  <h3 nve-text=\"heading\">Dialog</h3>\n  <p nve-text=\"body\" style=\"margin-bottom: 48px\">hello there</p>\n\n  <nve-button id=\"dropdown-btn\">search</nve-button>\n  <nve-dropdown anchor=\"dropdown-btn\" closable position=\"bottom\" alignment=\"start\">\n    <nve-search rounded>\n      <label>search dataset</label>\n      <nve-icon-button id=\"tooltip-btn\" icon-name=\"information-circle-stroke\" container=\"flat\" aria-label=\"more details\" slot=\"label\"></nve-icon-button>\n      <input type=\"search\" placeholder=\"search\" />\n    </nve-search>\n    <nve-tooltip anchor=\"tooltip-btn\" position=\"top\">hello there</nve-tooltip>\n  </nve-dropdown>\n</nve-dialog>\n\n<nve-notification closable position=\"bottom\" alignment=\"end\">\n  <h3 nve-text=\"label\">notification</h3>\n  <p nve-text=\"body\">some text content in a notification</p>  \n</nve-notification>\n  `\n}\n\n/**\n * @summary Programmatic popover control with async operations before showing the popover.\n * @tags test-case\n */\nexport const ProgrammaticTrigger = {\n  render: () => html`\n<nve-toast hidden close-timeout=\"3000\">hello there</nve-toast>\n<nve-button>open after 2s</nve-button>\n\n<script type=\"module\">\n  const toast = document.querySelector('nve-toast');\n  const button = document.querySelector('nve-button');\n\n  button.addEventListener('click', async () => {\n    await new Promise(r => setTimeout(r, 2000)); // do an async task then open the popover\n    toast.showPopover();\n  });\n</script>`\n}\n\n/**\n * @summary Interactive showcase of all popover types (tooltip, toast, drawer, dropdown, dialog, notification) using modern popovertarget API.\n */\nexport const Interactive = {\n  render: () => html`\n    <div nve-layout=\"row align:center gap:xl\" style=\"height: 300px\">\n      <nve-tooltip id=\"tooltip\">hello there</nve-tooltip>\n      <nve-button popovertarget=\"tooltip\">tooltip</nve-button>\n\n      <nve-toast id=\"toast\" close-timeout=\"1500\">copied!</nve-toast>\n      <nve-button popovertarget=\"toast\">toast</nve-button>\n\n      <nve-drawer id=\"drawer\" closable modal>\n        <nve-drawer-header>\n          <h3 nve-text=\"heading semibold sm\">Title</h3>\n        </nve-drawer-header>\n        <p nve-text=\"body\">some text content in a drawer</p>\n      </nve-drawer>\n      <nve-button popovertarget=\"drawer\">drawer</nve-button>\n\n      <nve-dropdown id=\"dropdown\" closable>\n        <h3 nve-text=\"heading\">Title</h3>\n        <p nve-text=\"body\">some text content in a dropdown</p>\n      </nve-dropdown>\n      <nve-button popovertarget=\"dropdown\">dropdown</nve-button>\n\n      <nve-dialog id=\"dialog\" closable modal>\n        <h3 nve-text=\"heading\">Title</h3>\n        <p nve-text=\"body\">some text content in a closable dialog</p>\n      </nve-dialog>\n      <nve-button popovertarget=\"dialog\">dialog</nve-button>\n\n      <nve-notification id=\"notification\" closable position=\"bottom\" alignment=\"end\" close-timeout=\"2000\">\n        <h3 nve-text=\"label\">notification</h3>\n        <p nve-text=\"body\">some text content in a notification</p>  \n      </nve-notification>\n      <nve-button popovertarget=\"notification\">notification snackbar</nve-button>\n    </div>\n  `\n}\n\n/* eslint-disable @nvidia-elements/lint/no-deprecated-popover-attributes */\n\n/**\n * @deprecated\n * @summary Legacy implementation showing all popover types using the older trigger/behavior-trigger API for backward compatibility.\n * @tags test-case\n */\nexport const LegacyInteractive = {\n  render: () => html`\n    <div nve-layout=\"row align:center gap:xl\" style=\"height: 300px\">\n      <nve-tooltip trigger=\"tooltip-btn\" behavior-trigger position=\"top\" hidden>hello there</nve-tooltip>\n      <nve-button id=\"tooltip-btn\">tooltip</nve-button>\n\n      <nve-button id=\"toast-btn\">toast</nve-button>\n      <nve-toast trigger=\"toast-btn\" behavior-trigger position=\"top\" close-timeout=\"1500\" hidden>copied!</nve-toast>\n\n      <nve-button id=\"drawer-btn\" size=\"sm\">drawer</nve-button>\n      <nve-drawer trigger=\"drawer-btn\" behavior-trigger hidden closable modal>\n        <nve-drawer-header>\n          <h3 nve-text=\"heading semibold sm\">Title</h3>\n        </nve-drawer-header>\n        <p nve-text=\"body\">some text content in a drawer</p>\n      </nve-drawer>\n\n      <nve-button id=\"dropdown-btn\">dropdown</nve-button>\n      <nve-dropdown trigger=\"dropdown-btn\" behavior-trigger closable hidden>\n        <h3 nve-text=\"heading\">Title</h3>\n        <p nve-text=\"body\">some text content in a dropdown</p>\n      </nve-dropdown>\n\n      <nve-button id=\"dialog-btn\">dialog</nve-button>\n      <nve-dialog trigger=\"dialog-btn\" behavior-trigger closable modal hidden>\n        <h3 nve-text=\"heading\">Title</h3>\n        <p nve-text=\"body\">some text content in a closable dialog</p>\n      </nve-dialog>\n\n      <nve-button id=\"notification-btn\">notification snackbar</nve-button>\n      <nve-notification trigger=\"notification-btn\" behavior-trigger hidden closable position=\"bottom\" alignment=\"end\" close-timeout=\"2000\">\n        <h3 nve-text=\"label\">notification</h3>\n        <p nve-text=\"body\">some text content in a notification</p>  \n      </nve-notification>\n    </div>\n  `\n}\n\n/**\n * @summary Simple modal dialog with keyboard accessibility, including escape key to close functionality.\n * @tags test-case\n */\nexport const Closable = {\n  render: () => html`\n    <nve-button popovertarget=\"popover\">open dialog</nve-button>\n    <nve-dialog id=\"popover\" modal>\n      <p nve-text=\"body\">Press \"escape\" key to close.</p>\n    </nve-dialog>\n  `\n}\n\n/**\n * @summary example of declarative popovers using the Invoker Commands API\n */\nexport const InvokerCommand = {\n  render: () => html`\n    <nve-button commandfor=\"popover\" command=\"toggle-popover\">toggle-popover</nve-button>\n    <nve-button commandfor=\"popover\" command=\"show-popover\">show-popover</nve-button>\n    <nve-toggletip id=\"popover\">\n      toggletip\n      <nve-button commandfor=\"popover\" command=\"hide-popover\">hide-popover</nve-button>\n    </nve-toggletip>\n  `\n};\n\n/**\n * @summary Custom events like many standard DOM events bubble. When listening\n * to larger DOM trees, check which element dispatched the source event.\n */\nexport const EventBubbling = {\n  render: () => html`\n    <div style=\"width: 100vw; height: 100vh;\">\n      <p nve-text=\"body\" id=\"event-example\">event:</p>\n      <nve-button popovertarget=\"event-example-dialog\">open</nve-button>\n\n      <nve-dialog id=\"event-example-dialog\" closable modal (close)=\"close($event)\" (open)=\"open($event)\">\n        <nve-dialog-header>Header</nve-dialog-header>\n        <div>\n          <nve-button popovertarget=\"event-example-dropdown\">show dropdown</nve-button>\n        </div>\n        <nve-dropdown id=\"event-example-dropdown\">\n          dropdown content\n        </nve-dropdown>\n      </nve-dialog>\n    </div>\n\n    <script type=\"module\">\n      const dialog = document.querySelector('#event-example-dialog');\n      const eventLabel = document.querySelector('#event-example');\n\n      // Custom events like many standard DOM events bubble. By listening to\n      // larger DOM trees check which element dispatched the source event\n      dialog.addEventListener('open', e => {\n        eventLabel.innerText = 'open: ' + e.target.localName;\n      });\n\n      dialog.addEventListener('close', e => {\n        eventLabel.innerText = 'close: ' + e.target.localName;\n      });\n    </script>\n  `\n}\n"],"mappings":";AAGA,IAAA,IAAS"}
+{"version":3,"file":"popover.examples.js","names":[],"sources":["../../../src/internal/controllers/popover.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/forms/define.js';\nimport '@nvidia-elements/core/button/define.js';\nimport '@nvidia-elements/core/icon-button/define.js';\nimport '@nvidia-elements/core/search/define.js';\nimport '@nvidia-elements/core/dialog/define.js';\nimport '@nvidia-elements/core/tooltip/define.js';\nimport '@nvidia-elements/core/toast/define.js';\nimport '@nvidia-elements/core/drawer/define.js';\nimport '@nvidia-elements/core/dropdown/define.js';\nimport '@nvidia-elements/core/notification/define.js';\nimport '@nvidia-elements/core/toggletip/define.js';\n\nexport default {\n  title: 'Elements/Popovers',\n  parameters: {\n    layout: 'centered'\n  }\n}\n\n/* eslint-disable @nvidia-elements/lint/no-missing-popover-trigger */\n\n/**\n * @summary Anchor-based positioning where popovers anchor to specific elements rather than their triggers.\n * @tags test-case\n */\nexport const Anchor = {\n  render: () => html`\n    <nve-tooltip id=\"popover-1\" anchor=\"btn-2\">tooltip 1</nve-tooltip>\n    <nve-tooltip id=\"popover-2\" anchor=\"btn-1\">tooltip 2</nve-tooltip>\n    <div nve-layout=\"row gap:xs align:center\">\n      <nve-button id=\"btn-1\" popovertarget=\"popover-1\">button 1</nve-button>\n      <nve-button id=\"btn-2\" popovertarget=\"popover-2\">button 2</nve-button>\n    </div>\n  `\n}\n\n/**\n * @summary Nested popovers within dialogs and notifications, with proper layering and stacking order.\n * @tags test-case\n */\nexport const Nested = {\n  render: () => html`\n<style>\n  #root-inner { height: 2000px;}\n</style>\n<nve-dialog closable modal>\n  <h3 nve-text=\"heading\">Dialog</h3>\n  <p nve-text=\"body\" style=\"margin-bottom: 48px\">hello there</p>\n\n  <nve-button id=\"dropdown-btn\">search</nve-button>\n  <nve-dropdown anchor=\"dropdown-btn\" closable position=\"bottom\" alignment=\"start\">\n    <nve-search rounded>\n      <label>search dataset</label>\n      <nve-icon-button id=\"tooltip-btn\" icon-name=\"information-circle\" container=\"flat\" aria-label=\"more details\" slot=\"label\"></nve-icon-button>\n      <input type=\"search\" placeholder=\"search\" />\n    </nve-search>\n    <nve-tooltip anchor=\"tooltip-btn\" position=\"top\">hello there</nve-tooltip>\n  </nve-dropdown>\n</nve-dialog>\n\n<nve-notification closable position=\"bottom\" alignment=\"end\">\n  <h3 nve-text=\"label\">notification</h3>\n  <p nve-text=\"body\">some text content in a notification</p>  \n</nve-notification>\n  `\n}\n\n/**\n * @summary Programmatic popover control with async operations before showing the popover.\n * @tags test-case\n */\nexport const ProgrammaticTrigger = {\n  render: () => html`\n<nve-toast hidden close-timeout=\"3000\">hello there</nve-toast>\n<nve-button>open after 2s</nve-button>\n\n<script type=\"module\">\n  const toast = document.querySelector('nve-toast');\n  const button = document.querySelector('nve-button');\n\n  button.addEventListener('click', async () => {\n    await new Promise(r => setTimeout(r, 2000)); // do an async task then open the popover\n    toast.showPopover();\n  });\n</script>`\n}\n\n/**\n * @summary Interactive showcase of all popover types (tooltip, toast, drawer, dropdown, dialog, notification) using modern popovertarget API.\n */\nexport const Interactive = {\n  render: () => html`\n    <div nve-layout=\"row align:center gap:xl\" style=\"height: 300px\">\n      <nve-tooltip id=\"tooltip\">hello there</nve-tooltip>\n      <nve-button popovertarget=\"tooltip\">tooltip</nve-button>\n\n      <nve-toast id=\"toast\" close-timeout=\"1500\">copied!</nve-toast>\n      <nve-button popovertarget=\"toast\">toast</nve-button>\n\n      <nve-drawer id=\"drawer\" closable modal>\n        <nve-drawer-header>\n          <h3 nve-text=\"heading semibold sm\">Title</h3>\n        </nve-drawer-header>\n        <p nve-text=\"body\">some text content in a drawer</p>\n      </nve-drawer>\n      <nve-button popovertarget=\"drawer\">drawer</nve-button>\n\n      <nve-dropdown id=\"dropdown\" closable>\n        <h3 nve-text=\"heading\">Title</h3>\n        <p nve-text=\"body\">some text content in a dropdown</p>\n      </nve-dropdown>\n      <nve-button popovertarget=\"dropdown\">dropdown</nve-button>\n\n      <nve-dialog id=\"dialog\" closable modal>\n        <h3 nve-text=\"heading\">Title</h3>\n        <p nve-text=\"body\">some text content in a closable dialog</p>\n      </nve-dialog>\n      <nve-button popovertarget=\"dialog\">dialog</nve-button>\n\n      <nve-notification id=\"notification\" closable position=\"bottom\" alignment=\"end\" close-timeout=\"2000\">\n        <h3 nve-text=\"label\">notification</h3>\n        <p nve-text=\"body\">some text content in a notification</p>  \n      </nve-notification>\n      <nve-button popovertarget=\"notification\">notification snackbar</nve-button>\n    </div>\n  `\n}\n\n/* eslint-disable @nvidia-elements/lint/no-deprecated-popover-attributes */\n\n/**\n * @deprecated\n * @summary Legacy implementation showing all popover types using the older trigger/behavior-trigger API for backward compatibility.\n * @tags test-case\n */\nexport const LegacyInteractive = {\n  render: () => html`\n    <div nve-layout=\"row align:center gap:xl\" style=\"height: 300px\">\n      <nve-tooltip trigger=\"tooltip-btn\" behavior-trigger position=\"top\" hidden>hello there</nve-tooltip>\n      <nve-button id=\"tooltip-btn\">tooltip</nve-button>\n\n      <nve-button id=\"toast-btn\">toast</nve-button>\n      <nve-toast trigger=\"toast-btn\" behavior-trigger position=\"top\" close-timeout=\"1500\" hidden>copied!</nve-toast>\n\n      <nve-button id=\"drawer-btn\" size=\"sm\">drawer</nve-button>\n      <nve-drawer trigger=\"drawer-btn\" behavior-trigger hidden closable modal>\n        <nve-drawer-header>\n          <h3 nve-text=\"heading semibold sm\">Title</h3>\n        </nve-drawer-header>\n        <p nve-text=\"body\">some text content in a drawer</p>\n      </nve-drawer>\n\n      <nve-button id=\"dropdown-btn\">dropdown</nve-button>\n      <nve-dropdown trigger=\"dropdown-btn\" behavior-trigger closable hidden>\n        <h3 nve-text=\"heading\">Title</h3>\n        <p nve-text=\"body\">some text content in a dropdown</p>\n      </nve-dropdown>\n\n      <nve-button id=\"dialog-btn\">dialog</nve-button>\n      <nve-dialog trigger=\"dialog-btn\" behavior-trigger closable modal hidden>\n        <h3 nve-text=\"heading\">Title</h3>\n        <p nve-text=\"body\">some text content in a closable dialog</p>\n      </nve-dialog>\n\n      <nve-button id=\"notification-btn\">notification snackbar</nve-button>\n      <nve-notification trigger=\"notification-btn\" behavior-trigger hidden closable position=\"bottom\" alignment=\"end\" close-timeout=\"2000\">\n        <h3 nve-text=\"label\">notification</h3>\n        <p nve-text=\"body\">some text content in a notification</p>  \n      </nve-notification>\n    </div>\n  `\n}\n\n/**\n * @summary Simple modal dialog with keyboard accessibility, including escape key to close functionality.\n * @tags test-case\n */\nexport const Closable = {\n  render: () => html`\n    <nve-button popovertarget=\"popover\">open dialog</nve-button>\n    <nve-dialog id=\"popover\" modal>\n      <p nve-text=\"body\">Press \"escape\" key to close.</p>\n    </nve-dialog>\n  `\n}\n\n/**\n * @summary example of declarative popovers using the Invoker Commands API\n */\nexport const InvokerCommand = {\n  render: () => html`\n    <nve-button commandfor=\"popover\" command=\"toggle-popover\">toggle-popover</nve-button>\n    <nve-button commandfor=\"popover\" command=\"show-popover\">show-popover</nve-button>\n    <nve-toggletip id=\"popover\">\n      toggletip\n      <nve-button commandfor=\"popover\" command=\"hide-popover\">hide-popover</nve-button>\n    </nve-toggletip>\n  `\n};\n\n/**\n * @summary Custom events like many standard DOM events bubble. When listening\n * to larger DOM trees, check which element dispatched the source event.\n */\nexport const EventBubbling = {\n  render: () => html`\n    <div style=\"width: 100vw; height: 100vh;\">\n      <p nve-text=\"body\" id=\"event-example\">event:</p>\n      <nve-button popovertarget=\"event-example-dialog\">open</nve-button>\n\n      <nve-dialog id=\"event-example-dialog\" closable modal (close)=\"close($event)\" (open)=\"open($event)\">\n        <nve-dialog-header>Header</nve-dialog-header>\n        <div>\n          <nve-button popovertarget=\"event-example-dropdown\">show dropdown</nve-button>\n        </div>\n        <nve-dropdown id=\"event-example-dropdown\">\n          dropdown content\n        </nve-dropdown>\n      </nve-dialog>\n    </div>\n\n    <script type=\"module\">\n      const dialog = document.querySelector('#event-example-dialog');\n      const eventLabel = document.querySelector('#event-example');\n\n      // Custom events like many standard DOM events bubble. By listening to\n      // larger DOM trees check which element dispatched the source event\n      dialog.addEventListener('open', e => {\n        eventLabel.innerText = 'open: ' + e.target.localName;\n      });\n\n      dialog.addEventListener('close', e => {\n        eventLabel.innerText = 'close: ' + e.target.localName;\n      });\n    </script>\n  `\n}\n"],"mappings":";AAGA,IAAA,IAAS"}

package/dist/internal/controllers/popover.examples.json

@@ -15,7 +15,7 @@
     {
       "id": "internal-controllers-popover-nested",
       "name": "Nested",
-      "template": "<style>\n  #root-inner {\n    height: 2000px;\n  }\n</style>\n<nve-dialog closable modal>\n  <h3 nve-text=\"heading\">Dialog</h3>\n  <p nve-text=\"body\" style=\"margin-bottom: 48px\">hello there</p>\n  <nve-button id=\"dropdown-btn\">search</nve-button>\n  <nve-dropdown anchor=\"dropdown-btn\" closable position=\"bottom\" alignment=\"start\">\n    <nve-search rounded>\n      <label>search dataset</label>\n      <nve-icon-button\n        id=\"tooltip-btn\"\n        icon-name=\"information-circle-stroke\"\n        container=\"flat\"\n        aria-label=\"more details\"\n        slot=\"label\"\n      ></nve-icon-button>\n      <input type=\"search\" placeholder=\"search\" />\n    </nve-search>\n    <nve-tooltip anchor=\"tooltip-btn\" position=\"top\">hello there</nve-tooltip>\n  </nve-dropdown>\n</nve-dialog>\n<nve-notification closable position=\"bottom\" alignment=\"end\">\n  <h3 nve-text=\"label\">notification</h3>\n  <p nve-text=\"body\">some text content in a notification</p>\n</nve-notification>\n",
+      "template": "<style>\n  #root-inner {\n    height: 2000px;\n  }\n</style>\n<nve-dialog closable modal>\n  <h3 nve-text=\"heading\">Dialog</h3>\n  <p nve-text=\"body\" style=\"margin-bottom: 48px\">hello there</p>\n  <nve-button id=\"dropdown-btn\">search</nve-button>\n  <nve-dropdown anchor=\"dropdown-btn\" closable position=\"bottom\" alignment=\"start\">\n    <nve-search rounded>\n      <label>search dataset</label>\n      <nve-icon-button\n        id=\"tooltip-btn\"\n        icon-name=\"information-circle\"\n        container=\"flat\"\n        aria-label=\"more details\"\n        slot=\"label\"\n      ></nve-icon-button>\n      <input type=\"search\" placeholder=\"search\" />\n    </nve-search>\n    <nve-tooltip anchor=\"tooltip-btn\" position=\"top\">hello there</nve-tooltip>\n  </nve-dropdown>\n</nve-dialog>\n<nve-notification closable position=\"bottom\" alignment=\"end\">\n  <h3 nve-text=\"label\">notification</h3>\n  <p nve-text=\"body\">some text content in a notification</p>\n</nve-notification>\n",
       "summary": "Nested popovers within dialogs and notifications, with proper layering and stacking order.",
       "description": "",
       "composition": true,

package/dist/internal/services/global.service.js

@@ -19,7 +19,7 @@ var a = class {
 				i18nRegistry: {},
 				audit: {}
 			}
-		}, globalThis.NVE_ELEMENTS.state.versions = Array.from(/* @__PURE__ */ new Set([...globalThis.NVE_ELEMENTS.state.versions, "2.7.0"])), globalThis.NVE_ELEMENTS.state.scopedRegistry ??= {}, globalThis.NVE_ELEMENTS.state.scopedRegistry["2.7.0"] = i(), globalThis.NVE_ELEMENTS.state.versions.length > 1 && globalThis.NVE_ELEMENTS.state.env !== "production" && console.warn(e(), `\n\n${JSON.stringify(globalThis.NVE_ELEMENTS.state.versions, null, 2)}`);
+		}, globalThis.NVE_ELEMENTS.state.versions = Array.from(/* @__PURE__ */ new Set([...globalThis.NVE_ELEMENTS.state.versions, "2.7.2"])), globalThis.NVE_ELEMENTS.state.scopedRegistry ??= {}, globalThis.NVE_ELEMENTS.state.scopedRegistry["2.7.2"] = i(), globalThis.NVE_ELEMENTS.state.versions.length > 1 && globalThis.NVE_ELEMENTS.state.env !== "production" && console.warn(e(), `\n\n${JSON.stringify(globalThis.NVE_ELEMENTS.state.versions, null, 2)}`);
 	}
 	get state() {
 		return globalThis.NVE_ELEMENTS.state;

package/dist/internal/types/index.js

@@ -1,9 +1,9 @@
 //#region src/internal/types/index.ts
 var e = {
-	"": "information-circle-stroke",
-	undefined: "information-circle-stroke",
-	default: "information-circle-stroke",
-	accent: "information-circle-stroke",
+	"": "information-circle",
+	undefined: "information-circle",
+	default: "information-circle",
+	accent: "information-circle",
 	warning: "exclamation-triangle",
 	success: "checkmark-circle",
 	danger: "exclamation-circle",

package/dist/internal/types/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/internal/types/index.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { TemplateResult } from 'lit';\nimport type { IconName } from '@nvidia-elements/core/icon';\nimport type { I18nStrings } from '../services/i18n.service.js';\n\nexport type Color =\n  | 'red-cardinal'\n  | 'gray-slate'\n  | 'gray-denim'\n  | 'blue-indigo'\n  | 'blue-cobalt'\n  | 'blue-sky'\n  | 'teal-cyan'\n  | 'green-mint'\n  | 'teal-seafoam'\n  | 'green-grass'\n  | 'yellow-amber'\n  | 'orange-pumpkin'\n  | 'red-tomato'\n  | 'pink-magenta'\n  | 'purple-plum'\n  | 'purple-violet'\n  | 'purple-lavender'\n  | 'pink-rose'\n  | 'green-jade'\n  | 'lime-pear'\n  | 'yellow-nova'\n  | 'brand-green';\n\n/** Controls the visual scale of an element to match its importance and available space.\n * - `sm` - Compact size for dense layouts or secondary elements with less visual prominence.\n * - `md` - Standard size that works well in most contexts and provides balanced visibility.\n * - `lg` - Larger size for emphasizing important elements or improving touch targets in spacious layouts.\n */\nexport type Size = 'sm' | 'md' | 'lg';\n\n/** Controls the visual scale of an element to match its importance and available space.\n * - `xs` - Extra small size for minimal elements or highly dense layouts.\n * - `sm` - Compact size for dense layouts or secondary elements with less visual prominence.\n * - `md` - Standard size that works well in most contexts and provides balanced visibility.\n * - `lg` - Larger size for emphasizing important elements or improving touch targets in spacious layouts.\n * - `xl` - Extra large size for emphasizing elements or sparse layouts.\n */\nexport type SizeExpanded = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\n/** Controls the visual prominence to establish hierarchy and guide user attention.\n * - `emphasis` - Increases visual weight to draw attention and highlight important elements.\n * - `muted` - Reduces visual weight for supporting content that should remain subtle and unobtrusive.\n */\nexport type Prominence = 'emphasis' | 'muted';\n\n/**\n * Determines the container bounds of the element\n * - `flat` Element has white space bounds but reduced visual container.\n * - `inline` Element container reduces to fit within inline content such as a block of text.\n * - `inset` Element container optimizes for embedding or inset placement inside another containing element.\n * - `full` Element container optimizes for filling its container bounds.\n * - `condensed` Element container optimizes for small, summarized or contained spaces.\n */\nexport type Container = 'inline' | 'flat' | 'inset' | 'full' | 'condensed';\n\n/** Communicates the intent and semantic meaning of an element to help users understand the outcome of their actions.\n * - `accent` - Highlights important actions or draws attention to primary interactive elements.\n * - `warning` - Indicates cautionary actions that require careful consideration before proceeding.\n * - `success` - Represents positive outcomes, confirmations, or constructive actions.\n * - `danger` - Signals destructive or irreversible actions that need extra attention and confirmation.\n */\nexport type SupportStatus = 'accent' | 'warning' | 'success' | 'danger';\n\n/** Controls how the chart connects intermediate values between points in a data series.\n * - `linear` - Connects points with straight line segments.\n * - `smooth` - Connects points with smooth bezier curves.\n * - `step` - Connects points with horizontal and vertical step segments.\n */\nexport type Interpolation = 'linear' | 'smooth' | 'step';\n\n/** Determines the orientation of an element. */\nexport type Orientation = 'vertical' | 'horizontal';\n\n/** Communicates the current state of a task or process to keep users informed of progress and outcomes.\n * - `scheduled` - Task has a scheduled future execution at a specific time.\n * - `queued` - Task is waiting in line to begin after other tasks complete.\n * - `pending` - Task is awaiting approval, user input, or external conditions before proceeding.\n * - `starting` - Task is initializing and preparing to begin active execution.\n * - `running` - Task is actively executing and making progress.\n * - `restarting` - Task restarts after an interruption or reset.\n * - `stopping` - Task is gracefully shutting down and completing cleanup operations.\n * - `finished` - Task has completed successfully with the expected outcome.\n * - `failed` - Task encountered an error and did not complete as intended.\n * - `unknown` - Task status remains unknown or unavailable.\n * - `ignored` - Task was intentionally skipped or excluded from execution.\n */\nexport type TaskStatus =\n  | 'scheduled'\n  | 'queued'\n  | 'pending'\n  | 'starting'\n  | 'running'\n  | 'restarting'\n  | 'stopping'\n  | 'finished'\n  | 'failed'\n  | 'unknown'\n  | 'ignored';\n\n/**\n * https://open-ui.org/components/popup.research.explainer#api-shape\n * - `auto` light dismiss, focus on open, return to trigger\n * - `manual` no light dismiss, no auto focus\n * - `hint` no light dismiss, no auto focus, open/close on hover/focus\n */\nexport type PopoverType = 'auto' | 'manual' | 'hint' | 'inline';\n\nexport type InterestEvent = Event & {\n  source: HTMLElement;\n};\n\n/** Controls how the popover aligns along the edge of its anchor element.\n * - `start` - Aligns the popover to the beginning edge of the anchor for left or top alignment.\n * - `end` - Aligns the popover to the ending edge of the anchor for right or bottom alignment.\n * - `center` - Centers the popover along the anchor's edge for balanced positioning.\n */\nexport type PopoverAlign = 'start' | 'end' | 'center';\n\n/** Determines the popover position relative to its assigned anchor and alignment.\n * - `top` - Positions the popover above the anchor element.\n * - `bottom` - Positions the popover below the anchor element.\n * - `left` - Positions the popover to the left side of the anchor element.\n * - `right` - Positions the popover to the right side of the anchor element.\n */\nexport type PopoverSides = 'top' | 'bottom' | 'left' | 'right';\n\n/** Controls the placement of the popover relative to its anchor element.\n * - `center` - Centers the popover directly over the anchor element.\n * - `top` - Positions the popover above the anchor element.\n * - `bottom` - Positions the popover below the anchor element.\n * - `left` - Positions the popover to the left side of the anchor element.\n * - `right` - Positions the popover to the right side of the anchor element.\n */\nexport type PopoverPosition = 'center' | 'top' | 'bottom' | 'left' | 'right';\n\n/** Determines the position of an element relative to its anchor */\nexport type Placement = PopoverPosition | `${PopoverSides}-${PopoverAlign}`;\n\n/** Controls the directional arrangement and spacing behavior of the element's content.\n * - `vertical` - Arranges content in a vertical stack with block-level spacing.\n * - `vertical-inline` - Arranges content vertically with compact inline spacing for dense layouts.\n * - `horizontal` - Arranges content in a horizontal row with block-level spacing.\n * - `horizontal-inline` - Arranges content horizontally with compact inline spacing.\n */\nexport type ControlLayout = 'vertical' | 'vertical-inline' | 'horizontal' | 'horizontal-inline';\n\n/** Indicates the element that represents the user's current location or position within a set. [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current)\n * - `page` - Marks the current page within a set of navigation links.\n * - `step` - Marks the current step within a multi-step process or workflow.\n */\nexport type Current = 'page' | 'step';\n\n/** Controls how data points are visually encoded in a sparkline chart.\n * - `line` - Renders data as a connected line to emphasize macro trend.\n * - `area` - Renders data as a filled area beneath a line to emphasize magnitude over time.\n * - `gradient` - Renders a line with gradient color treatment to communicate value intensity across the series.\n * - `column` - Renders data as vertical columns for easy comparison of discrete values.\n * - `winloss` - Renders outcomes as binary or ternary bars to highlight wins, losses, and optional ties.\n */\nexport type SparklineMark = 'line' | 'area' | 'gradient' | 'column' | 'winloss';\n\nexport interface NveElement {\n  /**\n   * This Boolean attribute prevents the user from interacting with the element: it cannot receive press or focus events. [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-disabled)\n   * - `true` - The element has a disabled state and does not accept interaction.\n   * - `false` - The element has an enabled state and accepts interaction.\n   */\n  disabled?: boolean;\n\n  /** Indicates whether the element is currently actively engaged through user interaction. [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/:active)\n   * - `true` - The user is pressing or activating the element (mousedown, keydown, or touch).\n   * - `false` - No active user engagement on the element.\n   */\n  active?: boolean;\n\n  /** Indicates whether collapsible content is currently visible or hidden from the user. [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)\n   * - `true` - The associated content expands and becomes visible to the user.\n   * - `false` - The associated content collapses and hides from the user.\n   */\n  expanded?: boolean;\n\n  /** Indicates the current state of a toggle button that switches on or off. [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-pressed)\n   * - `true` - The button is in the pressed (on) state and the associated action or setting is active.\n   * - `false` - The button is in the unpressed (off) state and the associated action or setting is inactive.\n   */\n  pressed?: boolean;\n\n  /** Indicates whether an element currently holds selection within a multi-option selection group. [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)\n   * - `true` - The element holds selection and represents the user's current choice within the group.\n   * - `false` - The element does not hold selection and the user can choose it.\n   */\n  selected?: boolean;\n\n  /** Indicates whether the user can change the element's value while it remains visible and focusable. [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly)\n   * - `true` - The element has a readonly state: the user cannot change its value, but can still focus and copy it.\n   * - `false` - The element allows editing and the user can change its value through interaction.\n   */\n  readOnly?: boolean;\n\n  /** Defines the value associated with the element's name when submitting the form data. The server receives this value in params when the form submits through this button. [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#value) */\n  value?: string;\n\n  /** The name of the element, submitted as a pair with the element value as part of the form data. [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-name) */\n  name?: string;\n\n  /** Indicates whether the user can dismiss or close the element.\n   * - `true` - The element displays a close control and the user can dismiss it.\n   * - `false` - The user cannot close the element and must dismiss it programmatically.\n   */\n  closable?: boolean;\n\n  /** Enables updating internal string values for internationalization. */\n  i18n?: Partial<I18nStrings & { __set: boolean }>;\n\n  /** Indicates the element that represents the user's current location or position within a set. [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current)\n   * - `page` - Marks the current page within a set of navigation links.\n   * - `step` - Marks the current step within a multi-step process or workflow.\n   */\n  current?: 'page' | 'step';\n\n  /** Controls the horizontal alignment of the element within its container, respecting the text direction. [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout#the_two_axes_of_a_grid_layout)\n   * - `start` - Aligns the element to the beginning of the inline axis (left in LTR, right in RTL).\n   * - `center` - Centers the element along the inline axis for balanced visual positioning.\n   * - `end` - Aligns the element to the end of the inline axis (right in LTR, left in RTL).\n   */\n  inlinePosition?: 'start' | 'center' | 'end';\n\n  /** Controls the vertical alignment of the element within its container. [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout#the_two_axes_of_a_grid_layout)\n   * - `start` - Aligns the element to the top of the block axis for top-aligned positioning.\n   * - `center` - Centers the element along the block axis for balanced vertical positioning.\n   * - `end` - Aligns the element to the bottom of the block axis for bottom-aligned positioning.\n   */\n  blockPosition?: 'start' | 'center' | 'end';\n\n  /** Controls the directional arrangement and spacing behavior of the element's content.\n   * - `vertical` - Arranges content in a vertical stack with block-level spacing.\n   * - `vertical-inline` - Arranges content vertically with compact inline spacing for dense layouts.\n   * - `horizontal` - Arranges content in a horizontal row with block-level spacing.\n   * - `horizontal-inline` - Arranges content horizontally with compact inline spacing.\n   */\n  layout?: 'vertical' | 'vertical-inline' | 'horizontal' | 'horizontal-inline';\n\n  /** Controls the directional flow of the element's layout and interaction pattern.\n   * - `vertical` - Element orients vertically with top-to-bottom flow.\n   * - `horizontal` - Element orients horizontally with left-to-right flow.\n   */\n  orientation?: 'vertical' | 'horizontal';\n\n  /** Controls the visual prominence to establish hierarchy and guide user attention.\n   * - `emphasis` - Increases visual weight to draw attention and highlight important elements.\n   * - `muted` - Reduces visual weight for supporting content that should remain subtle and unobtrusive.\n   */\n  prominence?: 'emphasis' | 'muted';\n\n  /** The Interaction type provides a way to show the intent of an interactive element. This can help users quickly understand what each interaction does and reduce the potential for confusion or errors.\n   * - `emphasis` Shows the interaction targets emphasis or highlighting primary actions.\n   * - `destructive` Shows the interaction targets destructive actions such as deleting or removing.\n   */\n  interaction?: 'emphasis' | 'destructive';\n\n  /** Defines a base color from the theme color palette */\n  color?:\n    | 'red-cardinal'\n    | 'gray-slate'\n    | 'gray-denim'\n    | 'blue-indigo'\n    | 'blue-cobalt'\n    | 'blue-sky'\n    | 'teal-cyan'\n    | 'green-mint'\n    | 'teal-seafoam'\n    | 'green-grass'\n    | 'yellow-amber'\n    | 'orange-pumpkin'\n    | 'red-tomato'\n    | 'pink-magenta'\n    | 'purple-plum'\n    | 'purple-violet'\n    | 'purple-lavender'\n    | 'pink-rose'\n    | 'green-jade'\n    | 'lime-pear'\n    | 'yellow-nova'\n    | 'brand-green';\n\n  /** Communicates the intent and semantic meaning of an element to help users understand the outcome of their actions.\n   * - `accent` - Highlights important actions or draws attention to primary interactive elements.\n   * - `warning` - Indicates cautionary actions that require careful consideration before proceeding.\n   * - `success` - Represents positive outcomes, confirmations, or constructive actions.\n   * - `danger` - Signals destructive or irreversible actions that need extra attention and confirmation.\n   */\n  status?: 'accent' | 'warning' | 'success' | 'danger';\n\n  /** Controls the visual scale of an element to match its importance and available space.\n   * - `sm` - Compact size for dense layouts or secondary elements with less visual prominence.\n   * - `md` - Standard size that works well in most contexts and provides balanced visibility.\n   * - `lg` - Larger size for emphasizing important elements or improving touch targets in spacious layouts.\n   */\n  size?: 'sm' | 'md' | 'lg';\n\n  /**\n   * Demonstrates different container styles to accommodate visual weight and context.\n   * - `flat` Element has white space bounds but reduced visual container.\n   * - `inline` Element container reduces to fit within inline content such as a block of text.\n   * - `inset` Element container optimizes for embedding or inset placement inside another containing element.\n   * - `full` Element container optimizes for filling its container bounds.\n   */\n  container?: 'inline' | 'flat' | 'inset' | 'full';\n\n  /** Determines the position of an element along both inline and block axis. [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout#the_two_axes_of_a_grid_layout) */\n  position?:\n    | 'top-start'\n    | 'top-end'\n    | 'top-center'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'bottom-center'\n    | 'left-start'\n    | 'left-end'\n    | 'left-center'\n    | 'right-start'\n    | 'right-end'\n    | 'right-center';\n\n  /** Determines the alignment of the popover relative to the provided anchor element. */\n  alignment?: 'start' | 'end' | 'center';\n\n  /** Provides the element that the popover should position relative to. Set the property to an element or its ID within the same render root. The HTML attribute accepts only the element ID. */\n  anchor?: string | HTMLElement;\n\n  /** Defines the element that triggers an `open` interaction event. Set the property to an element or its ID within the same render root. The HTML attribute accepts only the element ID. */\n  trigger?: string | HTMLElement;\n\n  /** Defines named content areas where users can insert custom markup into the element.\n   * - `default` - The primary content area for the element.\n   * - `prefix` - Content that appears before the main element content.\n   * - `suffix` - Content that appears after the main element content.\n   * - `header` - Content that appears at the top of the element, used for titles or introductory information.\n   * - `footer` - Content that appears at the bottom of the element, used for supplementary information or actions.\n   * - `actions` - Content area specifically for interactive controls like buttons or links.\n   * - `icon` - Content area for displaying an icon that represents the element's purpose or state.\n   */\n  slots?: 'default' | 'prefix' | 'suffix' | 'header' | 'footer' | 'actions' | 'icon';\n\n  /**\n   * Sets the automatic dismissal time in milliseconds before the element emits a `close` event. Allow ~200-250ms per word for comfortable reading.\n   * - `0` - Warning or error messages requiring immediate acknowledgment.\n   * - `3000` - Brief success or confirmation messages.\n   * - `7000` - Standard informational messages.\n   * - `10000` - Messages with actions or requiring user decision.\n   */\n  closeTimeout?: number;\n\n  /**\n   * Sets the delay in milliseconds before the element emits an `open` event.\n   * - `0` - Keyboard focus interactions (always immediate for accessibility).\n   * - `500` - Dense interfaces with many tooltips to reduce visual noise and prevent accidental triggers.\n   */\n  openDelay?: number;\n\n  /** @private An instance of `ElementInternals` that decorators/controllers set dynamically */\n  _internals: ElementInternals;\n\n  render: TemplateResult;\n}\n\n/** Defines named content areas where users can insert custom markup into the element.\n * - `default` - The primary content area for the element.\n * - `prefix` - Content that appears before the main element content.\n * - `suffix` - Content that appears after the main element content.\n * - `header` - Content that appears at the top of the element, used for titles or introductory information.\n * - `footer` - Content that appears at the bottom of the element, used for supplementary information or actions.\n * - `actions` - Content area specifically for interactive controls like buttons or links.\n * - `icon` - Content area for displaying an icon that represents the element's purpose or state.\n */\nexport type SlotName = 'default' | 'prefix' | 'suffix' | 'header' | 'footer' | 'actions' | 'icon';\n\n/** The Interaction type provides a way to show the intent of an interactive element. This can help users quickly understand what each interaction does and reduce the potential for confusion or errors.\n * - `emphasis` Shows the interaction targets emphasis or highlighting primary actions.\n * - `destructive` Shows the interaction targets destructive actions such as deleting or removing.\n */\nexport type Interaction = 'emphasis' | 'destructive';\n\nexport interface ContainerElement {\n  container?: Partial<Container>;\n}\n\n/** An element that renders complex data structures (e.g., arrays, series, matrices) rather than composable UI content and values expressible with primitive attributes. */\nexport interface DataElement<T extends unknown[] | Record<string, unknown>> {\n  data?: T;\n}\n\nexport const statusIcons: { [key: string]: IconName } = {\n  '': 'information-circle-stroke',\n  undefined: 'information-circle-stroke',\n  default: 'information-circle-stroke',\n  accent: 'information-circle-stroke',\n  warning: 'exclamation-triangle',\n  success: 'checkmark-circle',\n  danger: 'exclamation-circle',\n  scheduled: 'clock',\n  failed: 'x-circle',\n  finished: 'checkmark-circle',\n  unknown: 'question-mark-circle',\n  queued: 'bar-pill-stack',\n  running: 'running',\n  restarting: 'refresh',\n  stopping: 'stop-sign',\n  pending: 'circle-dash',\n  starting: 'circle-dot',\n  ignored: 'circle-angled-line'\n} as const;\n\ndeclare global {\n  var NVE_ELEMENTS: {\n    state: {\n      bundle: boolean;\n      env: 'watch' | 'production' | 'development';\n      pageHost: string;\n      moduleHost: string;\n      versions: string[];\n      scopedRegistry: { [key: string]: CustomElementRegistry };\n      elementRegistry: Readonly<{ [key: string]: string }>;\n      i18nRegistry: Readonly<{ [key: string]: string }>;\n      audit: Readonly<{\n        [key: string]: {\n          count?: number;\n          excessiveInstanceLimitAudited?: boolean;\n        };\n      }>;\n    };\n    debug: (log?: (...args: unknown[]) => void) => void;\n  };\n\n  interface HTMLElement {\n    'nve-text': string;\n    'nve-layout': string;\n  }\n\n  interface CustomElementRegistry {\n    initialize(root: ShadowRoot | Document): void;\n  }\n\n  var CustomElementRegistry: {\n    new (): CustomElementRegistry;\n    prototype: CustomElementRegistry;\n  };\n}\n\nexport interface ElementDefinition extends CustomElementConstructor {\n  metadata: { version: string; tag: string };\n  elementDefinitions?: { [key: string]: ElementDefinition };\n  shadowRootOptions?: { customElementRegistry?: CustomElementRegistry | null };\n}\n\nexport interface Point {\n  x: number;\n  y: number;\n}\n\nexport interface OffsetPoint {\n  offsetX: number;\n  offsetY: number;\n}\n\nexport interface Dimensions {\n  width: number;\n  height: number;\n}\n\nexport type Rect = Point & Dimensions;\n\nexport interface Scale {\n  min: number;\n  max: number;\n}\n\n/** https://github.com/tc39/proposal-decorators */\n// eslint-disable-next-line @typescript-eslint/no-unsafe-function-type\nexport type LegacyDecoratorTarget = Function & {\n  addInitializer?: (initializer: (instance: any) => void) => void; // eslint-disable-line @typescript-eslint/no-explicit-any\n};\n"],"mappings":";AAgZA,IAAa,IAA2C;CACtD,IAAI;CACJ,WAAW;CACX,SAAS;CACT,QAAQ;CACR,SAAS;CACT,SAAS;CACT,QAAQ;CACR,WAAW;CACX,QAAQ;CACR,UAAU;CACV,SAAS;CACT,QAAQ;CACR,SAAS;CACT,YAAY;CACZ,UAAU;CACV,SAAS;CACT,UAAU;CACV,SAAS;AACX"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/internal/types/index.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { TemplateResult } from 'lit';\nimport type { IconName } from '@nvidia-elements/core/icon';\nimport type { I18nStrings } from '../services/i18n.service.js';\n\nexport type Color =\n  | 'red-cardinal'\n  | 'gray-slate'\n  | 'gray-denim'\n  | 'blue-indigo'\n  | 'blue-cobalt'\n  | 'blue-sky'\n  | 'teal-cyan'\n  | 'green-mint'\n  | 'teal-seafoam'\n  | 'green-grass'\n  | 'yellow-amber'\n  | 'orange-pumpkin'\n  | 'red-tomato'\n  | 'pink-magenta'\n  | 'purple-plum'\n  | 'purple-violet'\n  | 'purple-lavender'\n  | 'pink-rose'\n  | 'green-jade'\n  | 'lime-pear'\n  | 'yellow-nova'\n  | 'brand-green';\n\n/** Controls the visual scale of an element to match its importance and available space.\n * - `sm` - Compact size for dense layouts or secondary elements with less visual prominence.\n * - `md` - Standard size that works well in most contexts and provides balanced visibility.\n * - `lg` - Larger size for emphasizing important elements or improving touch targets in spacious layouts.\n */\nexport type Size = 'sm' | 'md' | 'lg';\n\n/** Controls the visual scale of an element to match its importance and available space.\n * - `xs` - Extra small size for minimal elements or highly dense layouts.\n * - `sm` - Compact size for dense layouts or secondary elements with less visual prominence.\n * - `md` - Standard size that works well in most contexts and provides balanced visibility.\n * - `lg` - Larger size for emphasizing important elements or improving touch targets in spacious layouts.\n * - `xl` - Extra large size for emphasizing elements or sparse layouts.\n */\nexport type SizeExpanded = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\n/** Controls the visual prominence to establish hierarchy and guide user attention.\n * - `emphasis` - Increases visual weight to draw attention and highlight important elements.\n * - `muted` - Reduces visual weight for supporting content that should remain subtle and unobtrusive.\n */\nexport type Prominence = 'emphasis' | 'muted';\n\n/**\n * Determines the container bounds of the element\n * - `flat` Element has white space bounds but reduced visual container.\n * - `inline` Element container reduces to fit within inline content such as a block of text.\n * - `inset` Element container optimizes for embedding or inset placement inside another containing element.\n * - `full` Element container optimizes for filling its container bounds.\n * - `condensed` Element container optimizes for small, summarized or contained spaces.\n */\nexport type Container = 'inline' | 'flat' | 'inset' | 'full' | 'condensed';\n\n/** Communicates the intent and semantic meaning of an element to help users understand the outcome of their actions.\n * - `accent` - Highlights important actions or draws attention to primary interactive elements.\n * - `warning` - Indicates cautionary actions that require careful consideration before proceeding.\n * - `success` - Represents positive outcomes, confirmations, or constructive actions.\n * - `danger` - Signals destructive or irreversible actions that need extra attention and confirmation.\n */\nexport type SupportStatus = 'accent' | 'warning' | 'success' | 'danger';\n\n/** Controls how the chart connects intermediate values between points in a data series.\n * - `linear` - Connects points with straight line segments.\n * - `smooth` - Connects points with smooth bezier curves.\n * - `step` - Connects points with horizontal and vertical step segments.\n */\nexport type Interpolation = 'linear' | 'smooth' | 'step';\n\n/** Determines the orientation of an element. */\nexport type Orientation = 'vertical' | 'horizontal';\n\n/** Communicates the current state of a task or process to keep users informed of progress and outcomes.\n * - `scheduled` - Task has a scheduled future execution at a specific time.\n * - `queued` - Task is waiting in line to begin after other tasks complete.\n * - `pending` - Task is awaiting approval, user input, or external conditions before proceeding.\n * - `starting` - Task is initializing and preparing to begin active execution.\n * - `running` - Task is actively executing and making progress.\n * - `restarting` - Task restarts after an interruption or reset.\n * - `stopping` - Task is gracefully shutting down and completing cleanup operations.\n * - `finished` - Task has completed successfully with the expected outcome.\n * - `failed` - Task encountered an error and did not complete as intended.\n * - `unknown` - Task status remains unknown or unavailable.\n * - `ignored` - Task was intentionally skipped or excluded from execution.\n */\nexport type TaskStatus =\n  | 'scheduled'\n  | 'queued'\n  | 'pending'\n  | 'starting'\n  | 'running'\n  | 'restarting'\n  | 'stopping'\n  | 'finished'\n  | 'failed'\n  | 'unknown'\n  | 'ignored';\n\n/**\n * https://open-ui.org/components/popup.research.explainer#api-shape\n * - `auto` light dismiss, focus on open, return to trigger\n * - `manual` no light dismiss, no auto focus\n * - `hint` no light dismiss, no auto focus, open/close on hover/focus\n */\nexport type PopoverType = 'auto' | 'manual' | 'hint' | 'inline';\n\nexport type InterestEvent = Event & {\n  source: HTMLElement;\n};\n\n/** Controls how the popover aligns along the edge of its anchor element.\n * - `start` - Aligns the popover to the beginning edge of the anchor for left or top alignment.\n * - `end` - Aligns the popover to the ending edge of the anchor for right or bottom alignment.\n * - `center` - Centers the popover along the anchor's edge for balanced positioning.\n */\nexport type PopoverAlign = 'start' | 'end' | 'center';\n\n/** Determines the popover position relative to its assigned anchor and alignment.\n * - `top` - Positions the popover above the anchor element.\n * - `bottom` - Positions the popover below the anchor element.\n * - `left` - Positions the popover to the left side of the anchor element.\n * - `right` - Positions the popover to the right side of the anchor element.\n */\nexport type PopoverSides = 'top' | 'bottom' | 'left' | 'right';\n\n/** Controls the placement of the popover relative to its anchor element.\n * - `center` - Centers the popover directly over the anchor element.\n * - `top` - Positions the popover above the anchor element.\n * - `bottom` - Positions the popover below the anchor element.\n * - `left` - Positions the popover to the left side of the anchor element.\n * - `right` - Positions the popover to the right side of the anchor element.\n */\nexport type PopoverPosition = 'center' | 'top' | 'bottom' | 'left' | 'right';\n\n/** Determines the position of an element relative to its anchor */\nexport type Placement = PopoverPosition | `${PopoverSides}-${PopoverAlign}`;\n\n/** Controls the directional arrangement and spacing behavior of the element's content.\n * - `vertical` - Arranges content in a vertical stack with block-level spacing.\n * - `vertical-inline` - Arranges content vertically with compact inline spacing for dense layouts.\n * - `horizontal` - Arranges content in a horizontal row with block-level spacing.\n * - `horizontal-inline` - Arranges content horizontally with compact inline spacing.\n */\nexport type ControlLayout = 'vertical' | 'vertical-inline' | 'horizontal' | 'horizontal-inline';\n\n/** Indicates the element that represents the user's current location or position within a set. [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current)\n * - `page` - Marks the current page within a set of navigation links.\n * - `step` - Marks the current step within a multi-step process or workflow.\n */\nexport type Current = 'page' | 'step';\n\n/** Controls how data points are visually encoded in a sparkline chart.\n * - `line` - Renders data as a connected line to emphasize macro trend.\n * - `area` - Renders data as a filled area beneath a line to emphasize magnitude over time.\n * - `gradient` - Renders a line with gradient color treatment to communicate value intensity across the series.\n * - `column` - Renders data as vertical columns for easy comparison of discrete values.\n * - `winloss` - Renders outcomes as binary or ternary bars to highlight wins, losses, and optional ties.\n */\nexport type SparklineMark = 'line' | 'area' | 'gradient' | 'column' | 'winloss';\n\nexport interface NveElement {\n  /**\n   * This Boolean attribute prevents the user from interacting with the element: it cannot receive press or focus events. [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-disabled)\n   * - `true` - The element has a disabled state and does not accept interaction.\n   * - `false` - The element has an enabled state and accepts interaction.\n   */\n  disabled?: boolean;\n\n  /** Indicates whether the element is currently actively engaged through user interaction. [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/:active)\n   * - `true` - The user is pressing or activating the element (mousedown, keydown, or touch).\n   * - `false` - No active user engagement on the element.\n   */\n  active?: boolean;\n\n  /** Indicates whether collapsible content is currently visible or hidden from the user. [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)\n   * - `true` - The associated content expands and becomes visible to the user.\n   * - `false` - The associated content collapses and hides from the user.\n   */\n  expanded?: boolean;\n\n  /** Indicates the current state of a toggle button that switches on or off. [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-pressed)\n   * - `true` - The button is in the pressed (on) state and the associated action or setting is active.\n   * - `false` - The button is in the unpressed (off) state and the associated action or setting is inactive.\n   */\n  pressed?: boolean;\n\n  /** Indicates whether an element currently holds selection within a multi-option selection group. [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)\n   * - `true` - The element holds selection and represents the user's current choice within the group.\n   * - `false` - The element does not hold selection and the user can choose it.\n   */\n  selected?: boolean;\n\n  /** Indicates whether the user can change the element's value while it remains visible and focusable. [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly)\n   * - `true` - The element has a readonly state: the user cannot change its value, but can still focus and copy it.\n   * - `false` - The element allows editing and the user can change its value through interaction.\n   */\n  readOnly?: boolean;\n\n  /** Defines the value associated with the element's name when submitting the form data. The server receives this value in params when the form submits through this button. [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#value) */\n  value?: string;\n\n  /** The name of the element, submitted as a pair with the element value as part of the form data. [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-name) */\n  name?: string;\n\n  /** Indicates whether the user can dismiss or close the element.\n   * - `true` - The element displays a close control and the user can dismiss it.\n   * - `false` - The user cannot close the element and must dismiss it programmatically.\n   */\n  closable?: boolean;\n\n  /** Enables updating internal string values for internationalization. */\n  i18n?: Partial<I18nStrings & { __set: boolean }>;\n\n  /** Indicates the element that represents the user's current location or position within a set. [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current)\n   * - `page` - Marks the current page within a set of navigation links.\n   * - `step` - Marks the current step within a multi-step process or workflow.\n   */\n  current?: 'page' | 'step';\n\n  /** Controls the horizontal alignment of the element within its container, respecting the text direction. [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout#the_two_axes_of_a_grid_layout)\n   * - `start` - Aligns the element to the beginning of the inline axis (left in LTR, right in RTL).\n   * - `center` - Centers the element along the inline axis for balanced visual positioning.\n   * - `end` - Aligns the element to the end of the inline axis (right in LTR, left in RTL).\n   */\n  inlinePosition?: 'start' | 'center' | 'end';\n\n  /** Controls the vertical alignment of the element within its container. [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout#the_two_axes_of_a_grid_layout)\n   * - `start` - Aligns the element to the top of the block axis for top-aligned positioning.\n   * - `center` - Centers the element along the block axis for balanced vertical positioning.\n   * - `end` - Aligns the element to the bottom of the block axis for bottom-aligned positioning.\n   */\n  blockPosition?: 'start' | 'center' | 'end';\n\n  /** Controls the directional arrangement and spacing behavior of the element's content.\n   * - `vertical` - Arranges content in a vertical stack with block-level spacing.\n   * - `vertical-inline` - Arranges content vertically with compact inline spacing for dense layouts.\n   * - `horizontal` - Arranges content in a horizontal row with block-level spacing.\n   * - `horizontal-inline` - Arranges content horizontally with compact inline spacing.\n   */\n  layout?: 'vertical' | 'vertical-inline' | 'horizontal' | 'horizontal-inline';\n\n  /** Controls the directional flow of the element's layout and interaction pattern.\n   * - `vertical` - Element orients vertically with top-to-bottom flow.\n   * - `horizontal` - Element orients horizontally with left-to-right flow.\n   */\n  orientation?: 'vertical' | 'horizontal';\n\n  /** Controls the visual prominence to establish hierarchy and guide user attention.\n   * - `emphasis` - Increases visual weight to draw attention and highlight important elements.\n   * - `muted` - Reduces visual weight for supporting content that should remain subtle and unobtrusive.\n   */\n  prominence?: 'emphasis' | 'muted';\n\n  /** The Interaction type provides a way to show the intent of an interactive element. This can help users quickly understand what each interaction does and reduce the potential for confusion or errors.\n   * - `emphasis` Shows the interaction targets emphasis or highlighting primary actions.\n   * - `destructive` Shows the interaction targets destructive actions such as deleting or removing.\n   */\n  interaction?: 'emphasis' | 'destructive';\n\n  /** Defines a base color from the theme color palette */\n  color?:\n    | 'red-cardinal'\n    | 'gray-slate'\n    | 'gray-denim'\n    | 'blue-indigo'\n    | 'blue-cobalt'\n    | 'blue-sky'\n    | 'teal-cyan'\n    | 'green-mint'\n    | 'teal-seafoam'\n    | 'green-grass'\n    | 'yellow-amber'\n    | 'orange-pumpkin'\n    | 'red-tomato'\n    | 'pink-magenta'\n    | 'purple-plum'\n    | 'purple-violet'\n    | 'purple-lavender'\n    | 'pink-rose'\n    | 'green-jade'\n    | 'lime-pear'\n    | 'yellow-nova'\n    | 'brand-green';\n\n  /** Communicates the intent and semantic meaning of an element to help users understand the outcome of their actions.\n   * - `accent` - Highlights important actions or draws attention to primary interactive elements.\n   * - `warning` - Indicates cautionary actions that require careful consideration before proceeding.\n   * - `success` - Represents positive outcomes, confirmations, or constructive actions.\n   * - `danger` - Signals destructive or irreversible actions that need extra attention and confirmation.\n   */\n  status?: 'accent' | 'warning' | 'success' | 'danger';\n\n  /** Controls the visual scale of an element to match its importance and available space.\n   * - `sm` - Compact size for dense layouts or secondary elements with less visual prominence.\n   * - `md` - Standard size that works well in most contexts and provides balanced visibility.\n   * - `lg` - Larger size for emphasizing important elements or improving touch targets in spacious layouts.\n   */\n  size?: 'sm' | 'md' | 'lg';\n\n  /**\n   * Demonstrates different container styles to accommodate visual weight and context.\n   * - `flat` Element has white space bounds but reduced visual container.\n   * - `inline` Element container reduces to fit within inline content such as a block of text.\n   * - `inset` Element container optimizes for embedding or inset placement inside another containing element.\n   * - `full` Element container optimizes for filling its container bounds.\n   */\n  container?: 'inline' | 'flat' | 'inset' | 'full';\n\n  /** Determines the position of an element along both inline and block axis. [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout#the_two_axes_of_a_grid_layout) */\n  position?:\n    | 'top-start'\n    | 'top-end'\n    | 'top-center'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'bottom-center'\n    | 'left-start'\n    | 'left-end'\n    | 'left-center'\n    | 'right-start'\n    | 'right-end'\n    | 'right-center';\n\n  /** Determines the alignment of the popover relative to the provided anchor element. */\n  alignment?: 'start' | 'end' | 'center';\n\n  /** Provides the element that the popover should position relative to. Set the property to an element or its ID within the same render root. The HTML attribute accepts only the element ID. */\n  anchor?: string | HTMLElement;\n\n  /** Defines the element that triggers an `open` interaction event. Set the property to an element or its ID within the same render root. The HTML attribute accepts only the element ID. */\n  trigger?: string | HTMLElement;\n\n  /** Defines named content areas where users can insert custom markup into the element.\n   * - `default` - The primary content area for the element.\n   * - `prefix` - Content that appears before the main element content.\n   * - `suffix` - Content that appears after the main element content.\n   * - `header` - Content that appears at the top of the element, used for titles or introductory information.\n   * - `footer` - Content that appears at the bottom of the element, used for supplementary information or actions.\n   * - `actions` - Content area specifically for interactive controls like buttons or links.\n   * - `icon` - Content area for displaying an icon that represents the element's purpose or state.\n   */\n  slots?: 'default' | 'prefix' | 'suffix' | 'header' | 'footer' | 'actions' | 'icon';\n\n  /**\n   * Sets the automatic dismissal time in milliseconds before the element emits a `close` event. Allow ~200-250ms per word for comfortable reading.\n   * - `0` - Warning or error messages requiring immediate acknowledgment.\n   * - `3000` - Brief success or confirmation messages.\n   * - `7000` - Standard informational messages.\n   * - `10000` - Messages with actions or requiring user decision.\n   */\n  closeTimeout?: number;\n\n  /**\n   * Sets the delay in milliseconds before the element emits an `open` event.\n   * - `0` - Keyboard focus interactions (always immediate for accessibility).\n   * - `500` - Dense interfaces with many tooltips to reduce visual noise and prevent accidental triggers.\n   */\n  openDelay?: number;\n\n  /** @private An instance of `ElementInternals` that decorators/controllers set dynamically */\n  _internals: ElementInternals;\n\n  render: TemplateResult;\n}\n\n/** Defines named content areas where users can insert custom markup into the element.\n * - `default` - The primary content area for the element.\n * - `prefix` - Content that appears before the main element content.\n * - `suffix` - Content that appears after the main element content.\n * - `header` - Content that appears at the top of the element, used for titles or introductory information.\n * - `footer` - Content that appears at the bottom of the element, used for supplementary information or actions.\n * - `actions` - Content area specifically for interactive controls like buttons or links.\n * - `icon` - Content area for displaying an icon that represents the element's purpose or state.\n */\nexport type SlotName = 'default' | 'prefix' | 'suffix' | 'header' | 'footer' | 'actions' | 'icon';\n\n/** The Interaction type provides a way to show the intent of an interactive element. This can help users quickly understand what each interaction does and reduce the potential for confusion or errors.\n * - `emphasis` Shows the interaction targets emphasis or highlighting primary actions.\n * - `destructive` Shows the interaction targets destructive actions such as deleting or removing.\n */\nexport type Interaction = 'emphasis' | 'destructive';\n\nexport interface ContainerElement {\n  container?: Partial<Container>;\n}\n\n/** An element that renders complex data structures (e.g., arrays, series, matrices) rather than composable UI content and values expressible with primitive attributes. */\nexport interface DataElement<T extends unknown[] | Record<string, unknown>> {\n  data?: T;\n}\n\nexport const statusIcons: { [key: string]: IconName } = {\n  '': 'information-circle',\n  undefined: 'information-circle',\n  default: 'information-circle',\n  accent: 'information-circle',\n  warning: 'exclamation-triangle',\n  success: 'checkmark-circle',\n  danger: 'exclamation-circle',\n  scheduled: 'clock',\n  failed: 'x-circle',\n  finished: 'checkmark-circle',\n  unknown: 'question-mark-circle',\n  queued: 'bar-pill-stack',\n  running: 'running',\n  restarting: 'refresh',\n  stopping: 'stop-sign',\n  pending: 'circle-dash',\n  starting: 'circle-dot',\n  ignored: 'circle-angled-line'\n} as const;\n\ndeclare global {\n  var NVE_ELEMENTS: {\n    state: {\n      bundle: boolean;\n      env: 'watch' | 'production' | 'development';\n      pageHost: string;\n      moduleHost: string;\n      versions: string[];\n      scopedRegistry: { [key: string]: CustomElementRegistry };\n      elementRegistry: Readonly<{ [key: string]: string }>;\n      i18nRegistry: Readonly<{ [key: string]: string }>;\n      audit: Readonly<{\n        [key: string]: {\n          count?: number;\n          excessiveInstanceLimitAudited?: boolean;\n        };\n      }>;\n    };\n    debug: (log?: (...args: unknown[]) => void) => void;\n  };\n\n  interface HTMLElement {\n    'nve-text': string;\n    'nve-layout': string;\n  }\n\n  interface CustomElementRegistry {\n    initialize(root: ShadowRoot | Document): void;\n  }\n\n  var CustomElementRegistry: {\n    new (): CustomElementRegistry;\n    prototype: CustomElementRegistry;\n  };\n}\n\nexport interface ElementDefinition extends CustomElementConstructor {\n  metadata: { version: string; tag: string };\n  elementDefinitions?: { [key: string]: ElementDefinition };\n  shadowRootOptions?: { customElementRegistry?: CustomElementRegistry | null };\n}\n\nexport interface Point {\n  x: number;\n  y: number;\n}\n\nexport interface OffsetPoint {\n  offsetX: number;\n  offsetY: number;\n}\n\nexport interface Dimensions {\n  width: number;\n  height: number;\n}\n\nexport type Rect = Point & Dimensions;\n\nexport interface Scale {\n  min: number;\n  max: number;\n}\n\n/** https://github.com/tc39/proposal-decorators */\n// eslint-disable-next-line @typescript-eslint/no-unsafe-function-type\nexport type LegacyDecoratorTarget = Function & {\n  addInitializer?: (initializer: (instance: any) => void) => void; // eslint-disable-line @typescript-eslint/no-explicit-any\n};\n"],"mappings":";AAgZA,IAAa,IAA2C;CACtD,IAAI;CACJ,WAAW;CACX,SAAS;CACT,QAAQ;CACR,SAAS;CACT,SAAS;CACT,QAAQ;CACR,WAAW;CACX,QAAQ;CACR,UAAU;CACV,SAAS;CACT,QAAQ;CACR,SAAS;CACT,YAAY;CACZ,UAAU;CACV,SAAS;CACT,UAAU;CACV,SAAS;AACX"}

package/dist/logo/logo2.js

@@ -12,7 +12,7 @@ var c = class extends a {
 	static {
 		this.metadata = {
 			tag: "nve-logo",
-			version: "2.7.0"
+			version: "2.7.2"
 		};
 	}
 	render() {

package/dist/menu/menu-item2.js

@@ -13,7 +13,7 @@ var c = class extends s(i) {
 	static {
 		this.metadata = {
 			tag: "nve-menu-item",
-			version: "2.7.0",
+			version: "2.7.2",
 			parents: ["nve-menu"]
 		};
 	}

package/dist/menu/menu2.js

@@ -16,7 +16,7 @@ var d = class extends c {
 	static {
 		this.metadata = {
 			tag: "nve-menu",
-			version: "2.7.0",
+			version: "2.7.2",
 			children: ["nve-menu-item", "nve-divider"]
 		};
 	}

package/dist/month/month2.js

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

package/dist/notification/notification-group2.js

@@ -20,7 +20,7 @@ var l = class extends o {
 	static {
 		this.metadata = {
 			tag: "nve-notification-group",
-			version: "2.7.0",
+			version: "2.7.2",
 			children: ["nve-notification"]
 		};
 	}

package/dist/notification/notification2.js

@@ -34,7 +34,7 @@ var m = class extends d {
 	static {
 		this.metadata = {
 			tag: "nve-notification",
-			version: "2.7.0"
+			version: "2.7.2"
 		};
 	}
 	static {

package/dist/page/page-panel/page-panel-content2.js

@@ -9,7 +9,7 @@ var i = class extends n {
 	static {
 		this.metadata = {
 			tag: "nve-page-panel-content",
-			version: "2.7.0"
+			version: "2.7.2"
 		};
 	}
 	render() {

package/dist/page/page-panel/page-panel-footer2.js

@@ -14,7 +14,7 @@ var o = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-page-panel-footer",
-			version: "2.7.0"
+			version: "2.7.2"
 		};
 	}
 	render() {

package/dist/page/page-panel/page-panel-header2.js

@@ -14,7 +14,7 @@ var o = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-page-panel-header",
-			version: "2.7.0"
+			version: "2.7.2"
 		};
 	}
 	render() {