@nvidia-elements/core 0.0.1 → 0.0.3

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

@@ -0,0 +1,119 @@
+import { GlobalStateService as e } from "../services/global.service.js";
+import { focusElement as t, getActiveElement as n, initializeKeyListItems as r, isSimpleFocusable as i, setActiveKeyListItem as a } from "../utils/focus.js";
+import { KeynavCode as o, getFlattenedDOMTree as s, getFlattenedFocusableItems as c, hasInvalidDOMGrid as l, isContextMenuClick as u, validKeyNavigationCode as d } from "../utils/dom.js";
+import { onChildListMutation as f, throttle as p } from "../utils/events.js";
+import { LogService as m } from "../services/log.service.js";
+//#region src/internal/controllers/keynav-grid.controller.ts
+function h() {
+	return (e) => e.addInitializer((e) => new g(e));
+}
+var g = class {
+	#e = [];
+	get #t() {
+		return {
+			grid: this.host,
+			...this.host.keynavGridConfig
+		};
+	}
+	get #n() {
+		let e = Array.from(this.#t.rows);
+		return this.#t.columnRow && e.unshift(this.#t.columnRow), e;
+	}
+	get #r() {
+		return [...Array.from(this.#t.columns ?? []), ...Array.from(this.#t.cells)];
+	}
+	constructor(e) {
+		this.host = e, this.host.addController(this);
+	}
+	async hostConnected() {
+		await this.host.updateComplete, r(this.#r), this.#t.grid.addEventListener("keyup", (e) => this.#s(e)), this.#t.grid.addEventListener("keydown", (e) => this.#a(e)), this.#t.grid.addEventListener("mouseup", (e) => this.#i(e)), this.#e.push(f(this.host, p(() => r(this.#r), 500)));
+	}
+	hostDisconnected() {
+		this.#e.forEach((e) => e?.disconnect());
+	}
+	#i(e) {
+		if (!u(e)) {
+			let t = e.composedPath()[0], n = this.#r.find((e) => e === t) ? t : null;
+			n && this.#o(e, n);
+		}
+	}
+	#a(t) {
+		let r = Array.from(this.#n), a = Array.from(this.#r);
+		if (e.state.env !== "production" && l(r)) {
+			m.warn("Invalid grid structure, all rows must have the same number of cells");
+			return;
+		}
+		if (d(t) && i(n())) {
+			let { x: e, y: n } = y(a, r, {
+				code: t.code,
+				ctrlKey: t.ctrlKey,
+				dir: this.host.dir
+			}), i = Array.from(s(r[n])).filter((e) => !!a.find((t) => t === e))[e];
+			this.#o(t, i), t.preventDefault();
+		}
+	}
+	#o(e, n) {
+		a(this.#r, n);
+		let r = c(n), o = r.filter((e) => i(e));
+		o.length === 1 && r.length === 1 ? t(o[0]) : t(n);
+		let s = {
+			code: e instanceof KeyboardEvent ? e.code : null,
+			shiftKey: e.shiftKey,
+			activeItem: n
+		};
+		n.dispatchEvent(new CustomEvent("nve-key-change", {
+			bubbles: !0,
+			composed: !0,
+			detail: s
+		}));
+	}
+	#s(e) {
+		let t = Array.from(this.#r).find((e) => e.tabIndex === 0);
+		e.code === "Escape" && t?.focus(), e.code === "Enter" && t === e.composedPath()[0] && c(t)[0]?.focus();
+	}
+};
+function _(e, t) {
+	let n = t === "rtl" ? o.ArrowRight : o.ArrowLeft, r = t === "rtl" ? o.ArrowLeft : o.ArrowRight;
+	return e === o.ArrowUp ? {
+		dx: 0,
+		dy: -1
+	} : e === o.ArrowDown ? {
+		dx: 0,
+		dy: 1
+	} : e === n ? {
+		dx: -1,
+		dy: 0
+	} : e === r ? {
+		dx: 1,
+		dy: 0
+	} : e === o.PageUp ? {
+		dx: 0,
+		dy: -4
+	} : e === o.PageDown ? {
+		dx: 0,
+		dy: 4
+	} : null;
+}
+function v(e, t, n, r, i, a) {
+	return e === o.End ? {
+		x: r,
+		y: a ? i : n
+	} : e === o.Home ? {
+		x: 0,
+		y: a ? 0 : n
+	} : {
+		x: t,
+		y: n
+	};
+}
+function y(e, t, n) {
+	let r = e.find((e) => e.tabIndex === 0), i = t.find((e) => s(e).find((e) => e === r)), a = Array.from(s(i)).filter((t) => !!e.find((e) => e === t)), o = t.length - 1, c = a.length - 1, l = a.indexOf(r), u = t.indexOf(i), d = _(n.code, n.dir);
+	return d ? (l = Math.max(0, Math.min(c, l + d.dx)), u = Math.max(0, Math.min(o, u + d.dy))) : {x: l, y: u} = v(n.code, l, u, c, o, n.ctrlKey), {
+		x: l,
+		y: u
+	};
+}
+//#endregion
+export { g as KeyNavigationGridController, y as getNextKeyGridItem, h as keyNavigationGrid };
+
+//# sourceMappingURL=keynav-grid.controller.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"keynav-grid.controller.js","names":["#config","#hostRows","#hostCells","#updateCellActivation","#keynavCell","#clickCell","#observers","#setActiveCell"],"sources":["../../../src/internal/controllers/keynav-grid.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 { onChildListMutation, throttle } from '../utils/events.js';\nimport { GlobalStateService } from '../services/global.service.js';\nimport { LogService } from '../services/log.service.js';\nimport {\n  validKeyNavigationCode,\n  isContextMenuClick,\n  getFlattenedDOMTree,\n  getFlattenedFocusableItems,\n  KeynavCode,\n  hasInvalidDOMGrid\n} from '../utils/dom.js';\nimport {\n  focusElement,\n  getActiveElement,\n  initializeKeyListItems,\n  setActiveKeyListItem,\n  isSimpleFocusable\n} from '../utils/focus.js';\n\nexport interface KeynavGridConfig {\n  grid?: HTMLElement;\n  columnRow?: HTMLElement;\n  columns?: NodeListOf<HTMLElement> | HTMLElement[];\n  rows: NodeListOf<HTMLElement> | HTMLElement[];\n  cells: NodeListOf<HTMLElement> | HTMLElement[];\n}\n\nexport interface KeynavGridElement {\n  keynavGridConfig: KeynavGridConfig;\n}\n\n/**\n * https://w3c.github.io/aria-practices/#gridNav_focus\n */\nexport function keyNavigationGrid<T extends ReactiveElement & KeynavGridElement>(): ClassDecorator {\n  return (target: LegacyDecoratorTarget) =>\n    target.addInitializer!((instance: T) => new KeyNavigationGridController(instance));\n}\n\nexport class KeyNavigationGridController<T extends ReactiveElement & KeynavGridElement> implements ReactiveController {\n  #observers: MutationObserver[] = [];\n\n  get #config() {\n    return {\n      grid: this.host,\n      ...this.host.keynavGridConfig\n    };\n  }\n\n  get #hostRows() {\n    const rows = Array.from(this.#config.rows);\n\n    if (this.#config.columnRow) {\n      rows.unshift(this.#config.columnRow);\n    }\n\n    return rows;\n  }\n\n  get #hostCells() {\n    return [...Array.from(this.#config.columns ?? []), ...Array.from(this.#config.cells)];\n  }\n\n  constructor(private host: T) {\n    this.host.addController(this);\n  }\n\n  async hostConnected() {\n    await this.host.updateComplete;\n    initializeKeyListItems(this.#hostCells);\n    this.#config.grid.addEventListener('keyup', (e: KeyboardEvent) => this.#updateCellActivation(e));\n    this.#config.grid.addEventListener('keydown', (e: KeyboardEvent) => this.#keynavCell(e));\n    this.#config.grid.addEventListener('mouseup', (e: MouseEvent) => this.#clickCell(e));\n    this.#observers.push(\n      onChildListMutation(\n        this.host,\n        throttle(() => initializeKeyListItems(this.#hostCells), 500)\n      )\n    );\n  }\n\n  hostDisconnected() {\n    this.#observers.forEach(o => o?.disconnect());\n  }\n\n  #clickCell(e: MouseEvent) {\n    if (!isContextMenuClick(e)) {\n      const focusedElement = e.composedPath()[0] as HTMLElement;\n      const activeCell = this.#hostCells.find(i => i === focusedElement) ? focusedElement : null;\n      if (activeCell) {\n        this.#setActiveCell(e, activeCell as HTMLElement);\n      }\n    }\n  }\n\n  #keynavCell(e: KeyboardEvent) {\n    const rows = Array.from(this.#hostRows);\n    const cells = Array.from(this.#hostCells);\n\n    if (GlobalStateService.state.env !== 'production' && hasInvalidDOMGrid(rows)) {\n      LogService.warn('Invalid grid structure, all rows must have the same number of cells');\n      return;\n    }\n\n    if (validKeyNavigationCode(e) && isSimpleFocusable(getActiveElement() as Element)) {\n      const { x, y } = getNextKeyGridItem(cells, rows, {\n        code: e.code,\n        ctrlKey: e.ctrlKey,\n        dir: this.host.dir\n      });\n\n      const nextCell = Array.from(getFlattenedDOMTree(rows[y]!)).filter(c => !!cells.find(i => i === c))[\n        x\n      ] as HTMLElement;\n      this.#setActiveCell(e, nextCell);\n      e.preventDefault();\n    }\n  }\n\n  #setActiveCell(e: KeyboardEvent | MouseEvent, activeCell: HTMLElement) {\n    setActiveKeyListItem(this.#hostCells, activeCell);\n\n    const items = getFlattenedFocusableItems(activeCell);\n    const simpleItems = items.filter(i => isSimpleFocusable(i));\n\n    if (simpleItems.length === 1 && items.length === 1) {\n      focusElement(simpleItems[0]!);\n    } else {\n      focusElement(activeCell);\n    }\n\n    const detail = { code: e instanceof KeyboardEvent ? e.code : null, shiftKey: e.shiftKey, activeItem: activeCell };\n    activeCell.dispatchEvent(new CustomEvent('nve-key-change', { bubbles: true, composed: true, detail }));\n  }\n\n  #updateCellActivation(e: KeyboardEvent) {\n    const activeCell = Array.from(this.#hostCells).find(i => i.tabIndex === 0) as HTMLElement;\n    if (e.code === 'Escape') {\n      activeCell?.focus();\n    }\n\n    if (e.code === 'Enter' && activeCell === e.composedPath()[0]) {\n      getFlattenedFocusableItems(activeCell as HTMLElement)[0]?.focus();\n    }\n  }\n}\n\nfunction getGridDelta(code: KeynavCode | string, dir: string): { dx: number; dy: number } | null {\n  const start = dir === 'rtl' ? KeynavCode.ArrowRight : KeynavCode.ArrowLeft;\n  const end = dir === 'rtl' ? KeynavCode.ArrowLeft : KeynavCode.ArrowRight;\n\n  if (code === KeynavCode.ArrowUp) return { dx: 0, dy: -1 };\n  if (code === KeynavCode.ArrowDown) return { dx: 0, dy: 1 };\n  if (code === start) return { dx: -1, dy: 0 };\n  if (code === end) return { dx: 1, dy: 0 };\n  if (code === KeynavCode.PageUp) return { dx: 0, dy: -4 };\n  if (code === KeynavCode.PageDown) return { dx: 0, dy: 4 };\n  return null;\n}\n\nfunction applyGridHomeEnd(\n  code: KeynavCode | string,\n  x: number,\n  y: number,\n  columnCount: number,\n  rowCount: number,\n  ctrlKey: boolean\n) {\n  if (code === KeynavCode.End) {\n    return { x: columnCount, y: ctrlKey ? rowCount : y };\n  }\n\n  if (code === KeynavCode.Home) {\n    return { x: 0, y: ctrlKey ? 0 : y };\n  }\n\n  return { x, y };\n}\n\nexport function getNextKeyGridItem(\n  cells: HTMLElement[],\n  rows: HTMLElement[],\n  config: { code: KeynavCode | string; ctrlKey: boolean; dir: string }\n) {\n  const currentCell = cells.find(i => i.tabIndex === 0) as HTMLElement;\n  const currentRow = rows.find(r => getFlattenedDOMTree(r).find(c => c === currentCell)) as HTMLElement;\n  const currentRowCells = Array.from(getFlattenedDOMTree(currentRow)).filter(c => !!cells.find(i => i === c));\n  const rowCount = rows.length - 1;\n  const columnCount = currentRowCells.length - 1;\n\n  let x = currentRowCells.indexOf(currentCell);\n  let y = rows.indexOf(currentRow);\n\n  const delta = getGridDelta(config.code, config.dir);\n  if (delta) {\n    x = Math.max(0, Math.min(columnCount, x + delta.dx));\n    y = Math.max(0, Math.min(rowCount, y + delta.dy));\n  } else {\n    ({ x, y } = applyGridHomeEnd(config.code, x, y, columnCount, rowCount, config.ctrlKey));\n  }\n\n  return { x, y };\n}\n"],"mappings":"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"}

package/dist/internal/controllers/keynav-list.controller.d.ts

@@ -0,0 +1,32 @@
+import { ReactiveController, ReactiveElement } from 'lit';
+import { KeynavCode } from '../utils/dom.js';
+export interface KeynavListConfig {
+    items: NodeListOf<HTMLElement> | HTMLElement[];
+    layout?: 'both' | 'horizontal' | 'vertical';
+    manageFocus?: boolean;
+    manageTabindex?: boolean;
+    loop?: boolean;
+    dir?: string | null;
+}
+export interface KeynavListElement {
+    keynavListConfig: KeynavListConfig;
+}
+/** https://webaim.org/techniques/keyboard/ */
+export declare function keyNavigationList<T extends ReactiveElement & KeynavListElement>(): ClassDecorator;
+export declare class KeyNavigationListController<T extends ReactiveElement & KeynavListElement> implements ReactiveController {
+    #private;
+    private host;
+    constructor(host: T);
+    hostConnected(): Promise<void>;
+}
+interface KeyListConfig {
+    code: KeynavCode;
+    loop?: boolean;
+    layout?: 'horizontal' | 'vertical' | 'both';
+    dir: string | null | undefined;
+}
+export declare function getNextKeyListItem(item: HTMLElement, items: HTMLElement[], config: KeyListConfig): {
+    next: number;
+    previous: number;
+};
+export {};

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

@@ -0,0 +1,6 @@
+//#region src/internal/controllers/keynav-list.controller.examples.ts
+var e = "";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=keynav-list.controller.examples.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"keynav-list.controller.examples.js","names":[],"sources":["../../../src/internal/controllers/keynav-list.controller.examples.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { css, html, LitElement } from 'lit';\nimport { state } from 'lit/decorators/state.js';\nimport type { KeynavListConfig } from '@nvidia-elements/core/internal';\nimport { keyNavigationList } from '@nvidia-elements/core/internal';\n\nexport default {\n  title: 'Internal/Controllers'\n}\n\nconst styles = css`\n  section {\n    display: grid;\n    gap: 4px;\n    grid-template-columns: repeat(10, 50px);\n  }\n\n  .vertical {\n    grid-template-rows: repeat(10, 1fr);\n    grid-template-columns: 50px;\n  }\n\n  .row {\n    display: contents;\n  }\n\n  button {\n    width: 100%;\n    height: 30px;\n    min-width: 30px;\n    display: block;\n  }\n\n  button[selected] {\n    background: green;\n    color: white;\n  }\n`;\n\n@keyNavigationList<DemoKeyNavigationList>()\nclass DemoKeyNavigationList extends LitElement {\n  get keynavListConfig() {\n    return {\n      items: this.shadowRoot.querySelectorAll<HTMLElement>('button')\n    }\n  }\n\n  @state() private selected = '0';\n  @state() private active = '';\n\n  static styles = [styles];\n\n  render() {\n    return html`\n      <p nve-text=\"body\">Selected: ${this.selected}</p>\n      <p nve-text=\"body\">Active: ${this.active}</p>\n      <section @nve-key-change=${e => (this.active = e.detail.activeItem.textContent)}>\n        ${Array.from(Array(10).keys()).map(i => html`<div>\n          <button ?selected=${this.selected === `${i}`} @click=${e => (this.selected = e.target.innerText)}>${i}</button>\n        </div>`)}\n      </section>`;\n  }\n}\ncustomElements.get('demo-key-navigation-list') || customElements.define('demo-key-navigation-list', DemoKeyNavigationList);\n\n/**\n * @summary Horizontal list keyboard navigation controller with arrow key support.\n * @tags test-case\n */\nexport const ListDemo = {\n  render: () => html`<demo-key-navigation-list></demo-key-navigation-list>`\n};\n\n@keyNavigationList<DemoKeyNavigationListVertical>()\nclass DemoKeyNavigationListVertical extends LitElement {\n  get keynavListConfig(): KeynavListConfig {\n    return {\n      layout: 'vertical',\n      items: this.shadowRoot.querySelectorAll<HTMLElement>('button')\n    }\n  }\n\n  @state() private selected = '0';\n  @state() private active = '';\n\n  static styles = [styles];\n\n  render() {\n    return html`\n      <p nve-text=\"body\">Selected: ${this.selected}</p>\n      <p nve-text=\"body\">Active: ${this.active}</p>\n      <section class=\"vertical\" @nve-key-change=${e => (this.active = e.detail.activeItem.textContent)}>\n        ${Array.from(Array(10).keys()).map(i => html`<div>\n          <button ?selected=${this.selected === `${i}`} @click=${e => (this.selected = e.target.innerText)}>${i}</button>\n        </div>`)}\n      </section>\n    `;\n  }\n}\ncustomElements.get('demo-key-navigation-list-vertical') || customElements.define('demo-key-navigation-list-vertical', DemoKeyNavigationListVertical);\n\n/**\n * @summary Vertical list keyboard navigation controller with up and down arrow key support.\n * @tags test-case\n */\nexport const VerticalDemo = {\n  render: () => html`<demo-key-navigation-list-vertical></demo-key-navigation-list-vertical>`\n};\n\n@keyNavigationList<DemoKeyNavigationListLoop>()\nclass DemoKeyNavigationListLoop extends LitElement {\n  get keynavListConfig(): KeynavListConfig {\n    return {\n      loop: true,\n      layout: 'vertical',\n      items: this.shadowRoot.querySelectorAll<HTMLElement>('button')\n    }\n  }\n\n  @state() private selected = '0';\n  @state() private active = '';\n\n  static styles = [styles];\n\n  render() {\n    return html`\n      <p nve-text=\"body\">Selected: ${this.selected}</p>\n      <p nve-text=\"body\">Active: ${this.active}</p>\n      <section class=\"vertical\" @nve-key-change=${e => (this.active = e.detail.activeItem.textContent)}>\n        ${Array.from(Array(10).keys()).map(i => html`<div>\n          <button ?selected=${this.selected === `${i}`} @click=${e => (this.selected = e.target.innerText)}>${i}</button>\n        </div>`)}\n      </section>`;\n  }\n}\ncustomElements.get('demo-key-navigation-list-loop') || customElements.define('demo-key-navigation-list-loop', DemoKeyNavigationListLoop);\n\n/**\n * @summary Vertical list keyboard navigation with looping enabled to wrap from last item to first.\n * @tags test-case\n */\nexport const LoopDemo = {\n  render: () => html`<demo-key-navigation-list-loop></demo-key-navigation-list-loop>`\n};\n"],"mappings":";AAGA,IAAA,IAAc"}

package/dist/internal/controllers/keynav-list.controller.examples.json

@@ -0,0 +1,47 @@
+{
+  "entrypoint": "@nvidia-elements/core/internal/controllers/keynav-list.controller.examples.json",
+  "items": [
+    {
+      "id": "core-internal-controllers-keynav-list.controller_styles",
+      "name": "styles",
+      "template": "section { display: grid; gap: 4px; grid-template-columns: repeat(10, 50px); } .vertical { grid-template-rows: repeat(10,\n1fr); grid-template-columns: 50px; } .row { display: contents; } button { width: 100%; height: 30px; min-width: 30px;\ndisplay: block; } button[selected] { background: green; color: white; }\n",
+      "summary": "",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-internal-controllers-keynav-list.controller_list-demo",
+      "name": "ListDemo",
+      "template": "<demo-key-navigation-list></demo-key-navigation-list>\n",
+      "summary": "Horizontal list keyboard navigation controller with arrow key support.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "core-internal-controllers-keynav-list.controller_vertical-demo",
+      "name": "VerticalDemo",
+      "template": "<demo-key-navigation-list-vertical></demo-key-navigation-list-vertical>\n",
+      "summary": "Vertical list keyboard navigation controller with up and down arrow key support.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "core-internal-controllers-keynav-list.controller_loop-demo",
+      "name": "LoopDemo",
+      "template": "<demo-key-navigation-list-loop></demo-key-navigation-list-loop>\n",
+      "summary": "Vertical list keyboard navigation with looping enabled to wrap from last item to first.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    }
+  ]
+}

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

@@ -0,0 +1,121 @@
+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";
+//#region src/internal/controllers/keynav-list.controller.ts
+function a() {
+	return (e) => e.addInitializer((e) => new o(e));
+}
+var o = class {
+	get #e() {
+		return {
+			layout: "horizontal",
+			manageFocus: !0,
+			manageTabindex: !0,
+			loop: !1,
+			dir: this.host.getAttribute("rtl"),
+			...this.host.keynavListConfig,
+			items: Array.from(this.host.keynavListConfig.items).filter((e) => !e.disabled)
+		};
+	}
+	constructor(e) {
+		this.host = e, this.host.addController(this);
+	}
+	get #t() {
+		return this.host.hasAttribute("nve-keynav-disabled");
+	}
+	async hostConnected() {
+		await this.host.updateComplete, this.#n(), this.host.addEventListener("pointerup", (e) => this.#r(e)), this.host.addEventListener("keydown", (e) => this.#i(e));
+	}
+	#n() {
+		let { manageFocus: e, manageTabindex: n, items: r } = this.#e;
+		e && n && !this.#t && t(r);
+	}
+	#r(e) {
+		let t = this.#a(e, this.#e.items);
+		t && this.#o(e, t);
+	}
+	#i(e) {
+		if (i(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), {
+					loop: t,
+					layout: n,
+					dir: r,
+					code: e.code
+				});
+				o !== s && this.#o(e, i[o], i[s]);
+			}
+		}
+	}
+	#a(e, t) {
+		let n = e.composedPath()[0];
+		return t.find((e) => e === n) ? n : null;
+	}
+	#o(t, r, i) {
+		let { manageFocus: a, manageTabindex: o, items: s } = this.#e;
+		a && (o && n(s, r), e(r), t.preventDefault());
+		let c = {
+			activeItem: r,
+			previousItem: i,
+			code: t instanceof KeyboardEvent ? t.code : null,
+			metaKey: t.ctrlKey || t.metaKey,
+			items: s
+		};
+		r.dispatchEvent(new CustomEvent("nve-key-change", {
+			bubbles: !0,
+			composed: !0,
+			detail: c
+		}));
+	}
+};
+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;
+	if (n !== "horizontal") {
+		if (t === r.ArrowUp) return "backward";
+		if (t === r.ArrowDown) return "forward";
+	}
+	if (n !== "vertical") {
+		if (t === a) return "backward";
+		if (t === o) return "forward";
+	}
+	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, t, n, r) {
+	let i = e + n;
+	return i >= 0 && i <= t ? i : r ? n < 0 ? t : 0 : e;
+}
+function u(e, t, n) {
+	let r = t.indexOf(e), i = r, a = t.length - 1;
+	switch (s(n) ?? c(n.code)) {
+		case "backward":
+			r = l(r, a, -1, n.loop);
+			break;
+		case "forward":
+			r = l(r, a, 1, n.loop);
+			break;
+		case "end":
+			r = a;
+			break;
+		case "home":
+			r = 0;
+			break;
+		case "pageup":
+			r = Math.max(0, r - 4);
+			break;
+		case "pagedown":
+			r = Math.min(a, r + 4);
+			break;
+		case null: break;
+	}
+	return {
+		next: r,
+		previous: i
+	};
+}
+//#endregion
+export { o as KeyNavigationListController, u as getNextKeyListItem, a as keyNavigationList };
+
+//# sourceMappingURL=keynav-list.controller.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"keynav-list.controller.js","names":["#config","#keynavDisabled","#initializeTabIndex","#clickItem","#focusItem","#getActiveItem","#setActiveItem"],"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  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    this.#initializeTabIndex();\n    this.host.addEventListener('pointerup', (e: PointerEvent) => this.#clickItem(e));\n    this.host.addEventListener('keydown', (e: KeyboardEvent) => this.#focusItem(e));\n  }\n\n  #initializeTabIndex() {\n    const { manageFocus, manageTabindex, items } = this.#config;\n    if (manageFocus && manageTabindex && !this.#keynavDisabled) {\n      initializeKeyListItems(items);\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\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, limit: number, step: number, loop: boolean | undefined) {\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, itemCount, -1, config.loop);\n      break;\n    case 'forward':\n      next = navigateWithLoop(next, itemCount, 1, 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

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

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

@@ -0,0 +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"}

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

@@ -0,0 +1,88 @@
+{
+  "entrypoint": "@nvidia-elements/core/internal/controllers/popover.examples.json",
+  "items": [
+    {
+      "id": "core-internal-controllers-popover_anchor",
+      "name": "Anchor",
+      "template": "<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",
+      "summary": "Anchor-based positioning where popovers anchor to specific elements rather than their triggers.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "core-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",
+      "summary": "Nested popovers within dialogs and notifications, with proper layering and stacking order.",
+      "description": "",
+      "composition": true,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "core-internal-controllers-popover_programmatic-trigger",
+      "name": "ProgrammaticTrigger",
+      "template": "<nve-toast hidden close-timeout=\"3000\">hello there</nve-toast>\n<nve-button>open after 2s</nve-button>\n<script type=\"module\">\n  const toast = document.querySelector(\"nve-toast\");\n  const button = document.querySelector(\"nve-button\");\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",
+      "summary": "Programmatic popover control with async operations before showing the popover.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "core-internal-controllers-popover_interactive",
+      "name": "Interactive",
+      "template": "<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  <nve-toast id=\"toast\" close-timeout=\"1500\">copied!</nve-toast>\n  <nve-button popovertarget=\"toast\">toast</nve-button>\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  <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  <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  <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",
+      "summary": "Interactive showcase of all popover types (tooltip, toast, drawer, dropdown, dialog, notification) using modern popovertarget API.",
+      "description": "",
+      "composition": true,
+      "tags": []
+    },
+    {
+      "id": "core-internal-controllers-popover_legacy-interactive",
+      "name": "LegacyInteractive",
+      "template": "<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  <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  <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  <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  <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  <nve-button id=\"notification-btn\">notification snackbar</nve-button>\n  <nve-notification\n    trigger=\"notification-btn\"\n    behavior-trigger\n    hidden\n    closable\n    position=\"bottom\"\n    alignment=\"end\"\n    close-timeout=\"2000\"\n  >\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",
+      "summary": "Legacy implementation showing all popover types using the older trigger/behavior-trigger API for backward compatibility.",
+      "description": "",
+      "deprecated": true,
+      "composition": true,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "core-internal-controllers-popover_closable",
+      "name": "Closable",
+      "template": "<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",
+      "summary": "Simple modal dialog with keyboard accessibility, including escape key to close functionality.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "core-internal-controllers-popover_invoker-command",
+      "name": "InvokerCommand",
+      "template": "<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",
+      "summary": "example of declarative popovers using the Invoker Commands API",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-internal-controllers-popover_event-bubbling",
+      "name": "EventBubbling",
+      "template": "<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  <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\"> dropdown content </nve-dropdown>\n  </nve-dialog>\n</div>\n<script type=\"module\">\n  const dialog = document.querySelector(\"#event-example-dialog\");\n  const eventLabel = document.querySelector(\"#event-example\");\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  dialog.addEventListener(\"close\", (e) => {\n    eventLabel.innerText = \"close: \" + e.target.localName;\n  });\n</script>\n",
+      "summary": "Custom events like many standard DOM events bubble. When listening to larger DOM trees, check which element dispatched the source event.",
+      "description": "",
+      "composition": true,
+      "tags": []
+    }
+  ]
+}

package/dist/internal/controllers/state-active.controller.d.ts

@@ -0,0 +1,18 @@
+import { ReactiveController, ReactiveElement } from 'lit';
+/**
+ * Adds CSS State psuedo-selector :state(active) behavior for keydown space/enter for custom elements
+ * https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/states
+ */
+export declare function stateActive<T extends Active>(): ClassDecorator;
+type Active = ReactiveElement & {
+    disabled: boolean;
+    _internals?: ElementInternals;
+};
+export declare class StateActiveController<T extends Active> implements ReactiveController {
+    #private;
+    private host;
+    constructor(host: T);
+    hostConnected(): void;
+    hostDisconnected(): void;
+}
+export {};

package/dist/internal/controllers/state-active.controller.js

@@ -0,0 +1,29 @@
+import { attachInternals as e } from "../utils/a11y.js";
+//#region src/internal/controllers/state-active.controller.ts
+function t() {
+	return (e) => e.addInitializer((e) => new n(e));
+}
+var n = class {
+	constructor(e) {
+		this.host = e, this.host.addController(this);
+	}
+	hostConnected() {
+		e(this.host), this.host.addEventListener("keypress", this.#e), this.host.addEventListener("mousedown", this.#e), this.host.addEventListener("keyup", this.#t), this.host.addEventListener("blur", this.#t), this.host.addEventListener("mouseup", this.#t);
+	}
+	hostDisconnected() {
+		this.host.removeEventListener("keypress", this.#e), this.host.removeEventListener("mousedown", this.#e), this.host.removeEventListener("keyup", this.#t), this.host.removeEventListener("blur", this.#t), this.host.removeEventListener("mouseup", this.#t);
+	}
+	#e = (e) => {
+		!this.host.disabled && this.#n(e) && this.host._internals.states.add("active"), e instanceof KeyboardEvent && e.code === "Space" && e.target === this.host && e.preventDefault();
+	};
+	#t = () => {
+		this.host._internals.states.delete("active");
+	};
+	#n(e) {
+		return e instanceof KeyboardEvent ? e.code === "Space" || e.code === "Enter" : !0;
+	}
+};
+//#endregion
+export { n as StateActiveController, t as stateActive };
+
+//# sourceMappingURL=state-active.controller.js.map

package/dist/internal/controllers/state-active.controller.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"state-active.controller.js","names":["#emulateActive","#emulateInactive","#isValidKeyEvent"],"sources":["../../../src/internal/controllers/state-active.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 { attachInternals } from '../utils/a11y.js';\n\n/**\n * Adds CSS State psuedo-selector :state(active) behavior for keydown space/enter for custom elements\n * https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/states\n */\nexport function stateActive<T extends Active>(): ClassDecorator {\n  return (target: LegacyDecoratorTarget) =>\n    target.addInitializer!((instance: T) => new StateActiveController(instance));\n}\n\ntype Active = ReactiveElement & { disabled: boolean; _internals?: ElementInternals };\n\nexport class StateActiveController<T extends Active> implements ReactiveController {\n  #initialized = false;\n  constructor(private host: T) {\n    this.host.addController(this);\n  }\n\n  hostConnected() {\n    attachInternals(this.host);\n    this.host.addEventListener('keypress', this.#emulateActive as EventListener);\n    this.host.addEventListener('mousedown', this.#emulateActive as EventListener);\n    this.host.addEventListener('keyup', this.#emulateInactive);\n    this.host.addEventListener('blur', this.#emulateInactive);\n    this.host.addEventListener('mouseup', this.#emulateInactive);\n  }\n\n  hostDisconnected() {\n    this.host.removeEventListener('keypress', this.#emulateActive as EventListener);\n    this.host.removeEventListener('mousedown', this.#emulateActive as EventListener);\n    this.host.removeEventListener('keyup', this.#emulateInactive);\n    this.host.removeEventListener('blur', this.#emulateInactive);\n    this.host.removeEventListener('mouseup', this.#emulateInactive);\n  }\n\n  #emulateActive = (e: KeyboardEvent | PointerEvent) => {\n    if (!this.host.disabled && this.#isValidKeyEvent(e)) {\n      this.host._internals!.states.add('active');\n    }\n\n    if (e instanceof KeyboardEvent && e.code === 'Space' && e.target === this.host) {\n      e.preventDefault(); // prevent space bar scroll with standard button behavior\n    }\n  };\n\n  #emulateInactive = () => {\n    this.host._internals!.states.delete('active');\n  };\n\n  #isValidKeyEvent(e: KeyboardEvent | PointerEvent) {\n    return e instanceof KeyboardEvent ? e.code === 'Space' || e.code === 'Enter' : true;\n  }\n}\n"],"mappings":";;AAWA,SAAgB,IAAgD;AAC9D,SAAQ,MACN,EAAO,gBAAiB,MAAgB,IAAI,EAAsB,EAAS,CAAC;;AAKhF,IAAa,IAAb,MAAmF;CAEjF,YAAY,GAAiB;AAC3B,EADkB,KAAA,OAAA,GAClB,KAAK,KAAK,cAAc,KAAK;;CAG/B,gBAAgB;AAMd,EALA,EAAgB,KAAK,KAAK,EAC1B,KAAK,KAAK,iBAAiB,YAAY,MAAA,EAAqC,EAC5E,KAAK,KAAK,iBAAiB,aAAa,MAAA,EAAqC,EAC7E,KAAK,KAAK,iBAAiB,SAAS,MAAA,EAAsB,EAC1D,KAAK,KAAK,iBAAiB,QAAQ,MAAA,EAAsB,EACzD,KAAK,KAAK,iBAAiB,WAAW,MAAA,EAAsB;;CAG9D,mBAAmB;AAKjB,EAJA,KAAK,KAAK,oBAAoB,YAAY,MAAA,EAAqC,EAC/E,KAAK,KAAK,oBAAoB,aAAa,MAAA,EAAqC,EAChF,KAAK,KAAK,oBAAoB,SAAS,MAAA,EAAsB,EAC7D,KAAK,KAAK,oBAAoB,QAAQ,MAAA,EAAsB,EAC5D,KAAK,KAAK,oBAAoB,WAAW,MAAA,EAAsB;;CAGjE,MAAkB,MAAoC;AAKpD,EAJI,CAAC,KAAK,KAAK,YAAY,MAAA,EAAsB,EAAE,IACjD,KAAK,KAAK,WAAY,OAAO,IAAI,SAAS,EAGxC,aAAa,iBAAiB,EAAE,SAAS,WAAW,EAAE,WAAW,KAAK,QACxE,EAAE,gBAAgB;;CAItB,WAAyB;AACvB,OAAK,KAAK,WAAY,OAAO,OAAO,SAAS;;CAG/C,GAAiB,GAAiC;AAChD,SAAO,aAAa,gBAAgB,EAAE,SAAS,WAAW,EAAE,SAAS,UAAU"}

package/dist/internal/controllers/state-current.controller.d.ts

@@ -0,0 +1,18 @@
+import { ReactiveController, ReactiveElement } from 'lit';
+/**
+ * Adds current support for interactive custom elements including CSS State psuedo-selector :state(current) and aria-current.
+ * https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current
+ */
+export declare function stateCurrent<T extends Current>(): ClassDecorator;
+type Current = ReactiveElement & {
+    current: 'page' | 'step';
+    readonly?: boolean;
+    _internals?: ElementInternals;
+};
+export declare class StateCurrentController<T extends Current> implements ReactiveController {
+    private host;
+    constructor(host: T);
+    hostConnected(): void;
+    hostUpdated(): void;
+}
+export {};

package/dist/internal/controllers/state-current.controller.js

@@ -0,0 +1,28 @@
+import { attachInternals as e } from "../utils/a11y.js";
+//#region src/internal/controllers/state-current.controller.ts
+function t() {
+	return (e) => e.addInitializer((e) => new n(e));
+}
+var n = class {
+	constructor(e) {
+		this.host = e, this.host.addController(this);
+	}
+	hostConnected() {
+		e(this.host);
+	}
+	hostUpdated() {
+		if (this.host.readonly) {
+			this.host._internals.ariaCurrent = null, this.host._internals.states.delete("current");
+			return;
+		}
+		if (this.host._internals?.states.has("anchor") && this.host.current) {
+			this.host._internals.ariaCurrent = null, this.host._internals.states.add("current"), this.host.querySelector("a")?.setAttribute("aria-current", "page");
+			return;
+		}
+		this.host.current !== null && this.host.current !== void 0 && (this.host._internals.ariaCurrent = `${this.host.current}`), this.host.current ? this.host._internals.states.add("current") : this.host._internals.states.delete("current");
+	}
+};
+//#endregion
+export { n as StateCurrentController, t as stateCurrent };
+
+//# sourceMappingURL=state-current.controller.js.map