@nvidia-elements/core 0.2.2 → 0.2.4

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

@@ -1,8 +1,8 @@
 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";
+import { onChildListMutation as t, throttle as n } from "../utils/events.js";
+import { LogService as r } from "../services/log.service.js";
+import { focusElement as i, getActiveElement as a, initializeKeyListItems as o, isSimpleFocusable as s, setActiveKeyListItem as c } from "../utils/focus.js";
+import { KeynavCode as l, getFlattenedDOMTree as u, getFlattenedFocusableItems as d, hasInvalidDOMGrid as f, isContextMenuClick as p, validKeyNavigationCode as m } from "../utils/dom.js";
 //#region src/internal/controllers/keynav-grid.controller.ts
 function h() {
 	return (e) => e.addInitializer((e) => new g(e));
@@ -26,58 +26,58 @@ var g = class {
 		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)));
+		await this.host.updateComplete, o(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(t(this.host, n(() => o(this.#r), 500)));
 	}
 	hostDisconnected() {
 		this.#e.forEach((e) => e?.disconnect());
 	}
 	#i(e) {
-		if (!u(e)) {
+		if (!p(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");
+		let n = Array.from(this.#n), i = Array.from(this.#r);
+		if (e.state.env !== "production" && f(n)) {
+			r.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, {
+		if (m(t) && s(a())) {
+			let { x: e, y: r } = y(i, n, {
 				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();
+			}), a = Array.from(u(n[r])).filter((e) => !!i.find((t) => t === e))[e];
+			this.#o(t, a), 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 = {
+	#o(e, t) {
+		c(this.#r, t);
+		let n = d(t), r = n.filter((e) => s(e));
+		r.length === 1 && n.length === 1 ? i(r[0]) : i(t);
+		let a = {
 			code: e instanceof KeyboardEvent ? e.code : null,
 			shiftKey: e.shiftKey,
-			activeItem: n
+			activeItem: t
 		};
-		n.dispatchEvent(new CustomEvent("nve-key-change", {
+		t.dispatchEvent(new CustomEvent("nve-key-change", {
 			bubbles: !0,
 			composed: !0,
-			detail: s
+			detail: a
 		}));
 	}
 	#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();
+		e.code === "Escape" && t?.focus(), e.code === "Enter" && t === e.composedPath()[0] && d(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 ? {
+	let n = t === "rtl" ? l.ArrowRight : l.ArrowLeft, r = t === "rtl" ? l.ArrowLeft : l.ArrowRight;
+	return e === l.ArrowUp ? {
 		dx: 0,
 		dy: -1
-	} : e === o.ArrowDown ? {
+	} : e === l.ArrowDown ? {
 		dx: 0,
 		dy: 1
 	} : e === n ? {
@@ -86,39 +86,39 @@ function _(e, t) {
 	} : e === r ? {
 		dx: 1,
 		dy: 0
-	} : e === o.PageUp ? {
+	} : e === l.PageUp ? {
 		dx: 0,
 		dy: -4
-	} : e === o.PageDown ? {
+	} : e === l.PageDown ? {
 		dx: 0,
 		dy: 4
 	} : null;
 }
 function v(e, t, n) {
-	let { x: r, y: i } = t, { columnCount: a, rowCount: s, ctrlKey: c } = n;
-	return e === o.End ? {
+	let { x: r, y: i } = t, { columnCount: a, rowCount: o, ctrlKey: s } = n;
+	return e === l.End ? {
 		x: a,
-		y: c ? s : i
-	} : e === o.Home ? {
+		y: s ? o : i
+	} : e === l.Home ? {
 		x: 0,
-		y: c ? 0 : i
+		y: s ? 0 : i
 	} : {
 		x: r,
 		y: i
 	};
 }
 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, {
-		x: l,
-		y: u
+	let r = e.find((e) => e.tabIndex === 0), i = t.find((e) => u(e).find((e) => e === r)), a = Array.from(u(i)).filter((t) => !!e.find((e) => e === t)), o = t.length - 1, s = a.length - 1, c = a.indexOf(r), l = t.indexOf(i), d = _(n.code, n.dir);
+	return d ? (c = Math.max(0, Math.min(s, c + d.dx)), l = Math.max(0, Math.min(o, l + d.dy))) : {x: c, y: l} = v(n.code, {
+		x: c,
+		y: l
 	}, {
-		columnCount: c,
+		columnCount: s,
 		rowCount: o,
 		ctrlKey: n.ctrlKey
 	}), {
-		x: l,
-		y: u
+		x: c,
+		y: l
 	};
 }
 //#endregion

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

@@ -16,5 +16,6 @@ export declare class StateScrollController<T extends Scroll> implements Reactive
     private host;
     constructor(host: T);
     hostConnected(): Promise<void>;
+    hostUpdated(): void;
     hostDisconnected(): void;
 }

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

@@ -5,26 +5,43 @@ function n() {
 	return (e) => e.addInitializer((e) => new r(e));
 }
 var r = class {
-	get #e() {
+	#e;
+	get #t() {
 		return this.host.stateScrollConfig?.target || this.host;
 	}
-	get #t() {
+	get #n() {
 		return this.host.stateScrollConfig?.scrollOffset ?? 0;
 	}
 	constructor(e) {
 		this.host = e, this.host.addController(this);
 	}
 	async hostConnected() {
-		await this.host.updateComplete, t(this.host), this.#r(), this.#e.addEventListener("scrollend", this.#n);
+		await this.host.updateComplete, t(this.host), this.#r();
+	}
+	hostUpdated() {
+		this.#r();
 	}
 	hostDisconnected() {
-		this.#e.removeEventListener("scrollend", this.#n);
+		this.#s();
 	}
-	#n = () => {
-		this.host._internals.states.delete("scrolling"), e(this.#e, this.#t) && this.host.dispatchEvent(new CustomEvent("scrollboxend")), this.#r();
-	};
 	#r() {
-		this.#e.addEventListener("scroll", () => this.host._internals.states.add("scrolling"), { once: !0 });
+		let e = this.#t;
+		this.#e !== e && (this.#s(), this.#e = e, this.#e.addEventListener("scrollend", this.#i), this.#o());
+	}
+	#i = () => {
+		this.host._internals.states.delete("scrolling"), this.#e && e(this.#e, this.#n) && this.host.dispatchEvent(new CustomEvent("scrollboxend", {
+			bubbles: !0,
+			composed: !0
+		})), this.#o();
+	};
+	#a = () => {
+		this.host._internals.states.add("scrolling");
+	};
+	#o() {
+		this.#e?.removeEventListener("scroll", this.#a), this.#e?.addEventListener("scroll", this.#a, { once: !0 });
+	}
+	#s() {
+		this.#e?.removeEventListener("scroll", this.#a), this.#e?.removeEventListener("scrollend", this.#i), this.#e = void 0;
 	}
 };
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"state-scroll.controller.js","names":["#target","#offset","#startScroll","#onScrollEnd"],"sources":["../../../src/internal/controllers/state-scroll.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, endOfScrollBox } from '@nvidia-elements/core/internal';\n\n/**\n * Adds active scroll state detection\n */\nexport function stateScroll<T extends Scroll>(): ClassDecorator {\n  return (target: LegacyDecoratorTarget) =>\n    target.addInitializer!((instance: T) => new StateScrollController(instance));\n}\n\nexport interface StateScrollConfig {\n  target?: HTMLElement;\n  scrollOffset?: number;\n}\n\nexport type Scroll = ReactiveElement & {\n  _internals?: ElementInternals;\n  stateScrollConfig?: StateScrollConfig;\n};\n\nexport class StateScrollController<T extends Scroll> implements ReactiveController {\n  get #target() {\n    const target = this.host.stateScrollConfig?.target;\n    return target ? target : this.host;\n  }\n\n  get #offset() {\n    return this.host.stateScrollConfig?.scrollOffset ?? 0;\n  }\n\n  constructor(private host: T) {\n    this.host.addController(this);\n  }\n\n  async hostConnected() {\n    await this.host.updateComplete;\n    attachInternals(this.host);\n\n    this.#startScroll();\n    this.#target.addEventListener('scrollend', this.#onScrollEnd);\n  }\n\n  hostDisconnected() {\n    this.#target.removeEventListener('scrollend', this.#onScrollEnd);\n  }\n\n  #onScrollEnd = () => {\n    this.host._internals!.states.delete('scrolling');\n\n    if (endOfScrollBox(this.#target, this.#offset)) {\n      this.host.dispatchEvent(new CustomEvent('scrollboxend'));\n    }\n\n    this.#startScroll();\n  };\n\n  #startScroll() {\n    this.#target.addEventListener('scroll', () => this.host._internals!.states.add('scrolling'), { once: true });\n  }\n}\n"],"mappings":";;;AAUA,SAAgB,IAAgD;CAC9D,QAAQ,MACN,EAAO,gBAAiB,MAAgB,IAAI,EAAsB,CAAQ,CAAC;AAC/E;AAYA,IAAa,IAAb,MAAmF;CACjF,IAAIA,KAAU;EAEZ,OADe,KAAK,KAAK,mBAAmB,UACnB,KAAK;CAChC;CAEA,IAAIC,KAAU;EACZ,OAAO,KAAK,KAAK,mBAAmB,gBAAgB;CACtD;CAEA,YAAY,GAAiB;EAC3B,AADkB,KAAA,OAAA,GAClB,KAAK,KAAK,cAAc,IAAI;CAC9B;CAEA,MAAM,gBAAgB;EAKpB,AAJA,MAAM,KAAK,KAAK,gBAChB,EAAgB,KAAK,IAAI,GAEzB,KAAKC,GAAa,GAClB,KAAKF,GAAQ,iBAAiB,aAAa,KAAKG,EAAY;CAC9D;CAEA,mBAAmB;EACjB,KAAKH,GAAQ,oBAAoB,aAAa,KAAKG,EAAY;CACjE;CAEA,WAAqB;EAOnB,AANA,KAAK,KAAK,WAAY,OAAO,OAAO,WAAW,GAE3C,EAAe,KAAKH,IAAS,KAAKC,EAAO,KAC3C,KAAK,KAAK,cAAc,IAAI,YAAY,cAAc,CAAC,GAGzD,KAAKC,GAAa;CACpB;CAEA,KAAe;EACb,KAAKF,GAAQ,iBAAiB,gBAAgB,KAAK,KAAK,WAAY,OAAO,IAAI,WAAW,GAAG,EAAE,MAAM,GAAK,CAAC;CAC7G;AACF"}
+{"version":3,"file":"state-scroll.controller.js","names":["#target","#offset","#syncTarget","#removeTargetListeners","#activeTarget","#onScrollEnd","#startScroll","#onScroll"],"sources":["../../../src/internal/controllers/state-scroll.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, endOfScrollBox } from '@nvidia-elements/core/internal';\n\n/**\n * Adds active scroll state detection\n */\nexport function stateScroll<T extends Scroll>(): ClassDecorator {\n  return (target: LegacyDecoratorTarget) =>\n    target.addInitializer!((instance: T) => new StateScrollController(instance));\n}\n\nexport interface StateScrollConfig {\n  target?: HTMLElement;\n  scrollOffset?: number;\n}\n\nexport type Scroll = ReactiveElement & {\n  _internals?: ElementInternals;\n  stateScrollConfig?: StateScrollConfig;\n};\n\nexport class StateScrollController<T extends Scroll> implements ReactiveController {\n  #activeTarget?: HTMLElement;\n\n  get #target(): HTMLElement {\n    const target = this.host.stateScrollConfig?.target;\n    return target ? target : this.host;\n  }\n\n  get #offset() {\n    return this.host.stateScrollConfig?.scrollOffset ?? 0;\n  }\n\n  constructor(private host: T) {\n    this.host.addController(this);\n  }\n\n  async hostConnected() {\n    await this.host.updateComplete;\n    attachInternals(this.host);\n    this.#syncTarget();\n  }\n\n  hostUpdated() {\n    this.#syncTarget();\n  }\n\n  hostDisconnected() {\n    this.#removeTargetListeners();\n  }\n\n  #syncTarget() {\n    const target = this.#target;\n    if (this.#activeTarget === target) return;\n\n    this.#removeTargetListeners();\n    this.#activeTarget = target;\n    this.#activeTarget.addEventListener('scrollend', this.#onScrollEnd);\n    this.#startScroll();\n  }\n\n  #onScrollEnd = () => {\n    this.host._internals!.states.delete('scrolling');\n\n    if (this.#activeTarget && endOfScrollBox(this.#activeTarget, this.#offset)) {\n      this.host.dispatchEvent(new CustomEvent('scrollboxend', { bubbles: true, composed: true }));\n    }\n\n    this.#startScroll();\n  };\n\n  #onScroll = () => {\n    this.host._internals!.states.add('scrolling');\n  };\n\n  #startScroll() {\n    this.#activeTarget?.removeEventListener('scroll', this.#onScroll);\n    this.#activeTarget?.addEventListener('scroll', this.#onScroll, { once: true });\n  }\n\n  #removeTargetListeners() {\n    this.#activeTarget?.removeEventListener('scroll', this.#onScroll);\n    this.#activeTarget?.removeEventListener('scrollend', this.#onScrollEnd);\n    this.#activeTarget = undefined;\n  }\n}\n"],"mappings":";;;AAUA,SAAgB,IAAgD;CAC9D,QAAQ,MACN,EAAO,gBAAiB,MAAgB,IAAI,EAAsB,CAAQ,CAAC;AAC/E;AAYA,IAAa,IAAb,MAAmF;CACjF;CAEA,IAAIA,KAAuB;EAEzB,OADe,KAAK,KAAK,mBAAmB,UACnB,KAAK;CAChC;CAEA,IAAIC,KAAU;EACZ,OAAO,KAAK,KAAK,mBAAmB,gBAAgB;CACtD;CAEA,YAAY,GAAiB;EAC3B,AADkB,KAAA,OAAA,GAClB,KAAK,KAAK,cAAc,IAAI;CAC9B;CAEA,MAAM,gBAAgB;EAGpB,AAFA,MAAM,KAAK,KAAK,gBAChB,EAAgB,KAAK,IAAI,GACzB,KAAKC,GAAY;CACnB;CAEA,cAAc;EACZ,KAAKA,GAAY;CACnB;CAEA,mBAAmB;EACjB,KAAKC,GAAuB;CAC9B;CAEA,KAAc;EACZ,IAAM,IAAS,KAAKH;EAChB,KAAKI,OAAkB,MAE3B,KAAKD,GAAuB,GAC5B,KAAKC,KAAgB,GACrB,KAAKA,GAAc,iBAAiB,aAAa,KAAKC,EAAY,GAClE,KAAKC,GAAa;CACpB;CAEA,WAAqB;EAOnB,AANA,KAAK,KAAK,WAAY,OAAO,OAAO,WAAW,GAE3C,KAAKF,MAAiB,EAAe,KAAKA,IAAe,KAAKH,EAAO,KACvE,KAAK,KAAK,cAAc,IAAI,YAAY,gBAAgB;GAAE,SAAS;GAAM,UAAU;EAAK,CAAC,CAAC,GAG5F,KAAKK,GAAa;CACpB;CAEA,WAAkB;EAChB,KAAK,KAAK,WAAY,OAAO,IAAI,WAAW;CAC9C;CAEA,KAAe;EAEb,AADA,KAAKF,IAAe,oBAAoB,UAAU,KAAKG,EAAS,GAChE,KAAKH,IAAe,iBAAiB,UAAU,KAAKG,IAAW,EAAE,MAAM,GAAK,CAAC;CAC/E;CAEA,KAAyB;EAGvB,AAFA,KAAKH,IAAe,oBAAoB,UAAU,KAAKG,EAAS,GAChE,KAAKH,IAAe,oBAAoB,aAAa,KAAKC,EAAY,GACtE,KAAKD,KAAgB,KAAA;CACvB;AACF"}

package/dist/internal/controllers/type-button.controller.examples.js.map

@@ -1 +1 @@
-{"version":3,"file":"type-button.controller.examples.js","names":[],"sources":["../../../src/internal/controllers/type-button.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 } from 'lit';\nimport { BaseButton } from '@nvidia-elements/core/internal';\nimport '@nvidia-elements/core/card/define.js';\nimport '@nvidia-elements/core/button/define.js';\nimport '@nvidia-elements/core/icon-button/define.js';\n\nexport default {\n  title: 'Internal/Controllers'\n}\n\nclass UIButton extends BaseButton {\n  static styles = [css`\n    :host {\n      --background: hsl(0, 0%, 90%);\n      --color: hsl(0, 0%, 0%);\n      --cursor: pointer;\n      display: inline-flex;\n      position: relative;\n    }\n\n    [internal-host] {\n      background: var(--background);\n      color: var(--color);\n      cursor: var(--cursor);\n      padding: 8px 12px;\n      min-width: 75px;\n      text-align: center;\n    }\n\n    /* element states */\n    :host(:hover) {\n      --background: hsl(0, 0%, 95%);\n    }\n\n    :host(:state(active)) {\n      --background: hsl(0, 0%, 85%);\n    }\n\n    :host(:state(pressed)) {\n      --background: hsl(0, 0%, 85%);\n    }\n\n    :host(:state(expanded)) {\n      --background: hsl(0, 0%, 85%);\n    }\n\n    :host(:state(disabled)) {\n      --background: hsl(0, 0%, 80%);\n      --color: hsl(0, 0%, 60%);\n      --cursor: not-allowed;\n    }\n\n    :host(:state(readonly)) {\n      --cursor: initial;\n      --color: blue;\n    }\n\n    /* anchor styles */\n    [internal-host]:focus-within {\n      outline: Highlight solid 2px;\n      outline: 5px auto -webkit-focus-ring-color;\n    }\n\n    ::slotted(a) {\n      color: var(--color) !important;\n      text-decoration: none !important;\n      outline: 0 !important;\n    }\n\n    ::slotted(a)::after {\n      position: absolute;\n      content: '';\n      inset: 0;\n      display: block;\n    }\n  `]\n}\n\ncustomElements.get('ui-button') || customElements.define('ui-button', UIButton);\n\n/**\n * Example of custom element button using the base button and controllers.\n * When a custom element extends the base button it will inherit all the\n * necessary button behaviors and states.\n * @summary Custom button element using BaseButton with pressed, expanded, disabled, and link states.\n * @tags test-case\n */\nexport const TypeButtonDemo = {\n  render: () => html`\n<ui-button>button</ui-button>\n<ui-button pressed>pressed</ui-button>\n<ui-button expanded>expanded</ui-button>\n<ui-button selected>selected</ui-button>\n<ui-button disabled>disabled</ui-button>\n<ui-button><a href=\"#\">link</a></ui-button>\n\n<form id=\"type-button-demo-form\" style=\"display: inline-flex;\">\n  <ui-button type=\"submit\">submit</ui-button>\n</form>\n<script type=\"module\">\n  const form = document.querySelector('#type-button-demo-form');\n  form.addEventListener('submit', (e) => {\n    e.preventDefault();\n    alert('submit!');\n  });\n</script>`\n};\n"],"mappings":";AAGA,IAAA,IAAc"}
+{"version":3,"file":"type-button.controller.examples.js","names":[],"sources":["../../../src/internal/controllers/type-button.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 { ButtonFormControlMixin } from '@nvidia-elements/forms/mixins';\nimport '@nvidia-elements/core/card/define.js';\nimport '@nvidia-elements/core/button/define.js';\nimport '@nvidia-elements/core/icon-button/define.js';\n\nexport default {\n  title: 'Internal/Controllers'\n}\n\nclass UIButton extends ButtonFormControlMixin(LitElement) {\n  static styles = [css`\n    :host {\n      --background: hsl(0, 0%, 90%);\n      --color: hsl(0, 0%, 0%);\n      --cursor: pointer;\n      display: inline-flex;\n      position: relative;\n    }\n\n    [internal-host] {\n      background: var(--background);\n      color: var(--color);\n      cursor: var(--cursor);\n      padding: 8px 12px;\n      min-width: 75px;\n      text-align: center;\n    }\n\n    /* element states */\n    :host(:hover) {\n      --background: hsl(0, 0%, 95%);\n    }\n\n    :host(:state(active)) {\n      --background: hsl(0, 0%, 85%);\n    }\n\n    :host(:state(pressed)) {\n      --background: hsl(0, 0%, 85%);\n    }\n\n    :host(:state(expanded)) {\n      --background: hsl(0, 0%, 85%);\n    }\n\n    :host(:state(disabled)) {\n      --background: hsl(0, 0%, 80%);\n      --color: hsl(0, 0%, 60%);\n      --cursor: not-allowed;\n    }\n\n    :host(:state(readonly)) {\n      --cursor: initial;\n      --color: blue;\n    }\n\n    /* anchor styles */\n    [internal-host]:focus-within {\n      outline: Highlight solid 2px;\n      outline: 5px auto -webkit-focus-ring-color;\n    }\n\n    ::slotted(a) {\n      color: var(--color) !important;\n      text-decoration: none !important;\n      outline: 0 !important;\n    }\n\n    ::slotted(a)::after {\n      position: absolute;\n      content: '';\n      inset: 0;\n      display: block;\n    }\n  `]\n}\n\ncustomElements.get('ui-button') || customElements.define('ui-button', UIButton);\n\n/**\n * Example of custom element button using the button form control mixin.\n * When a custom element applies the mixin it inherits button behaviors and states.\n * @summary Custom button element using ButtonFormControlMixin with pressed, expanded, disabled, and link states.\n * @tags test-case\n */\nexport const TypeButtonDemo = {\n  render: () => html`\n<ui-button>button</ui-button>\n<ui-button pressed>pressed</ui-button>\n<ui-button expanded>expanded</ui-button>\n<ui-button selected>selected</ui-button>\n<ui-button disabled>disabled</ui-button>\n<ui-button><a href=\"#\">link</a></ui-button>\n\n<form id=\"type-button-demo-form\" style=\"display: inline-flex;\">\n  <ui-button type=\"submit\">submit</ui-button>\n</form>\n<script type=\"module\">\n  const form = document.querySelector('#type-button-demo-form');\n  form.addEventListener('submit', (e) => {\n    e.preventDefault();\n    alert('submit!');\n  });\n</script>`\n};\n"],"mappings":";AAGA,IAAA,IAAc"}

package/dist/internal/controllers/type-button.controller.examples.json

@@ -5,7 +5,7 @@
       "id": "internal-controllers-type-button.controller-type-button-demo",
       "name": "TypeButtonDemo",
       "template": "<ui-button>button</ui-button>\n<ui-button pressed>pressed</ui-button>\n<ui-button expanded>expanded</ui-button>\n<ui-button selected>selected</ui-button>\n<ui-button disabled>disabled</ui-button>\n<ui-button><a href=\"#\">link</a></ui-button>\n<form id=\"type-button-demo-form\" style=\"display: inline-flex\">\n  <ui-button type=\"submit\">submit</ui-button>\n</form>\n<script type=\"module\">\n  const form = document.querySelector(\"#type-button-demo-form\");\n  form.addEventListener(\"submit\", (e) => {\n    e.preventDefault();\n    alert(\"submit!\");\n  });\n</script>\n",
-      "summary": "Custom button element using BaseButton with pressed, expanded, disabled, and link states.",
+      "summary": "Custom button element using ButtonFormControlMixin with pressed, expanded, disabled, and link states.",
       "description": "",
       "composition": false,
       "tags": [

package/dist/internal/controllers/type-command.controller.d.ts

@@ -14,7 +14,12 @@ export type Command = ReactiveElement & HTMLElement & {
 export declare class TypeCommandController<T extends Command> implements ReactiveController {
     #private;
     private host;
-    constructor(host: T);
+    constructor(host: T, options?: TypeCommandControllerOptions);
+    get target(): HTMLElement | null;
     hostUpdated(): Promise<void>;
     hostDisconnected(): void;
+    dispatchCommand(): boolean;
+}
+export interface TypeCommandControllerOptions {
+    trigger?: 'click' | 'manual';
 }

package/dist/internal/controllers/type-command.controller.js

@@ -4,27 +4,33 @@ function t() {
 	return (e) => e.addInitializer((e) => new n(e));
 }
 var n = class {
-	constructor(e) {
-		this.host = e, this.host.addController(this);
+	#e;
+	constructor(e, t = {}) {
+		this.host = e, this.#e = t.trigger ?? "click", this.host.addController(this);
+	}
+	get target() {
+		return this.host.commandForElement ? this.host.commandForElement : this.host.commandfor ? e(this.host.getRootNode()).find((e) => e.id === this.host.commandfor) ?? null : null;
 	}
 	async hostUpdated() {
-		await this.host.updateComplete, this.#e();
+		await this.host.updateComplete, this.#t();
 	}
 	hostDisconnected() {
-		this.host.removeEventListener("click", this.#t);
+		this.host.removeEventListener("click", this.#n);
 	}
-	#e() {
-		!this.host.readOnly && !this.host.disabled ? this.host.addEventListener("click", this.#t) : this.host.removeEventListener("click", this.#t);
+	#t() {
+		this.#e === "manual" || this.host.readOnly || this.host.disabled ? this.host.removeEventListener("click", this.#n) : this.host.addEventListener("click", this.#n);
 	}
-	#t = () => {
-		if ((this.host.commandfor || this.host.commandForElement) && globalThis.CommandEvent) {
-			let t = e(this.host.getRootNode()).find((e) => e.id === this.host.commandfor || e === this.host.commandForElement);
-			t ? t.dispatchEvent(new globalThis.CommandEvent("command", {
-				command: this.host.command,
-				source: this.host
-			})) : console.warn("commandForElement", this.host.commandfor || this.host.commandForElement, "not found");
-		}
+	#n = (e) => {
+		e.defaultPrevented || this.dispatchCommand();
 	};
+	dispatchCommand() {
+		if (this.host.readOnly || this.host.disabled || !this.host.command) return !1;
+		let e = this.target;
+		return e ? (e.dispatchEvent(new globalThis.CommandEvent("command", {
+			command: this.host.command,
+			source: this.host
+		})), !0) : ((this.host.commandfor || this.host.commandForElement) && console.warn("commandForElement", this.host.commandfor || this.host.commandForElement, "not found"), !1);
+	}
 };
 //#endregion
 export { n as TypeCommandController, t as typeCommand };

package/dist/internal/controllers/type-command.controller.js.map

@@ -1 +1 @@
-{"version":3,"file":"type-command.controller.js","names":["#updateListener","#triggerCommand"],"sources":["../../../src/internal/controllers/type-command.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 { getFlattenedDOMTree } from '../utils/dom.js';\n\n/**\n * Adds Invoker Commands API support for interactive custom elements.\n * https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API\n */\nexport function typeCommand<T extends Command>(): ClassDecorator {\n  return (target: LegacyDecoratorTarget) =>\n    target.addInitializer!((instance: T) => new TypeCommandController(instance));\n}\n\nexport type Command = ReactiveElement &\n  HTMLElement & {\n    command: string;\n    commandfor: string | null;\n    commandForElement: HTMLElement | null;\n    readOnly: boolean;\n    disabled: boolean;\n  };\n\nexport class TypeCommandController<T extends Command> implements ReactiveController {\n  constructor(private host: T) {\n    this.host.addController(this);\n  }\n\n  async hostUpdated() {\n    await this.host.updateComplete;\n    this.#updateListener();\n  }\n\n  hostDisconnected() {\n    this.host.removeEventListener('click', this.#triggerCommand);\n  }\n\n  #updateListener() {\n    if (!this.host.readOnly && !this.host.disabled) {\n      this.host.addEventListener('click', this.#triggerCommand);\n    } else {\n      this.host.removeEventListener('click', this.#triggerCommand);\n    }\n  }\n\n  #triggerCommand = () => {\n    if ((this.host.commandfor || this.host.commandForElement) && globalThis.CommandEvent) {\n      const match = getFlattenedDOMTree(this.host.getRootNode() as HTMLElement).find(\n        el => el.id === this.host.commandfor || el === this.host.commandForElement\n      );\n      if (!match) {\n        console.warn('commandForElement', this.host.commandfor || this.host.commandForElement, 'not found');\n      } else {\n        match.dispatchEvent(new globalThis.CommandEvent('command', { command: this.host.command, source: this.host }));\n      }\n    }\n  };\n}\n"],"mappings":";;AAWA,SAAgB,IAAiD;CAC/D,QAAQ,MACN,EAAO,gBAAiB,MAAgB,IAAI,EAAsB,CAAQ,CAAC;AAC/E;AAWA,IAAa,IAAb,MAAoF;CAClF,YAAY,GAAiB;EAC3B,AADkB,KAAA,OAAA,GAClB,KAAK,KAAK,cAAc,IAAI;CAC9B;CAEA,MAAM,cAAc;EAElB,AADA,MAAM,KAAK,KAAK,gBAChB,KAAKA,GAAgB;CACvB;CAEA,mBAAmB;EACjB,KAAK,KAAK,oBAAoB,SAAS,KAAKC,EAAe;CAC7D;CAEA,KAAkB;EAChB,AAAI,CAAC,KAAK,KAAK,YAAY,CAAC,KAAK,KAAK,WACpC,KAAK,KAAK,iBAAiB,SAAS,KAAKA,EAAe,IAExD,KAAK,KAAK,oBAAoB,SAAS,KAAKA,EAAe;CAE/D;CAEA,WAAwB;EACtB,KAAK,KAAK,KAAK,cAAc,KAAK,KAAK,sBAAsB,WAAW,cAAc;GACpF,IAAM,IAAQ,EAAoB,KAAK,KAAK,YAAY,CAAgB,EAAE,MACxE,MAAM,EAAG,OAAO,KAAK,KAAK,cAAc,MAAO,KAAK,KAAK,iBAC3D;GACA,AAAK,IAGH,EAAM,cAAc,IAAI,WAAW,aAAa,WAAW;IAAE,SAAS,KAAK,KAAK;IAAS,QAAQ,KAAK;GAAK,CAAC,CAAC,IAF7G,QAAQ,KAAK,qBAAqB,KAAK,KAAK,cAAc,KAAK,KAAK,mBAAmB,WAAW;EAItG;CACF;AACF"}
+{"version":3,"file":"type-command.controller.js","names":["#trigger","#updateListener","#triggerCommand"],"sources":["../../../src/internal/controllers/type-command.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 { getFlattenedDOMTree } from '../utils/dom.js';\n\n/**\n * Adds Invoker Commands API support for interactive custom elements.\n * https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API\n */\nexport function typeCommand<T extends Command>(): ClassDecorator {\n  return (target: LegacyDecoratorTarget) =>\n    target.addInitializer!((instance: T) => new TypeCommandController(instance));\n}\n\nexport type Command = ReactiveElement &\n  HTMLElement & {\n    command: string;\n    commandfor: string | null;\n    commandForElement: HTMLElement | null;\n    readOnly: boolean;\n    disabled: boolean;\n  };\n\nexport class TypeCommandController<T extends Command> implements ReactiveController {\n  #trigger: 'click' | 'manual';\n\n  constructor(\n    private host: T,\n    options: TypeCommandControllerOptions = {}\n  ) {\n    this.#trigger = options.trigger ?? 'click';\n    this.host.addController(this);\n  }\n\n  get target(): HTMLElement | null {\n    if (this.host.commandForElement) {\n      return this.host.commandForElement;\n    }\n\n    if (!this.host.commandfor) {\n      return null;\n    }\n\n    return (\n      getFlattenedDOMTree(this.host.getRootNode() as HTMLElement).find(el => el.id === this.host.commandfor) ?? null\n    );\n  }\n\n  async hostUpdated() {\n    await this.host.updateComplete;\n    this.#updateListener();\n  }\n\n  hostDisconnected() {\n    this.host.removeEventListener('click', this.#triggerCommand);\n  }\n\n  #updateListener() {\n    if (this.#trigger === 'manual' || this.host.readOnly || this.host.disabled) {\n      this.host.removeEventListener('click', this.#triggerCommand);\n    } else {\n      this.host.addEventListener('click', this.#triggerCommand);\n    }\n  }\n\n  #triggerCommand = (event: Event) => {\n    if (event.defaultPrevented) {\n      return;\n    }\n\n    this.dispatchCommand();\n  };\n\n  dispatchCommand() {\n    if (this.host.readOnly || this.host.disabled || !this.host.command) {\n      return false;\n    }\n\n    const target = this.target;\n    if (!target) {\n      if (this.host.commandfor || this.host.commandForElement) {\n        console.warn('commandForElement', this.host.commandfor || this.host.commandForElement, 'not found');\n      }\n      return false;\n    }\n\n    target.dispatchEvent(new globalThis.CommandEvent('command', { command: this.host.command, source: this.host }));\n    return true;\n  }\n}\n\nexport interface TypeCommandControllerOptions {\n  trigger?: 'click' | 'manual';\n}\n"],"mappings":";;AAWA,SAAgB,IAAiD;CAC/D,QAAQ,MACN,EAAO,gBAAiB,MAAgB,IAAI,EAAsB,CAAQ,CAAC;AAC/E;AAWA,IAAa,IAAb,MAAoF;CAClF;CAEA,YACE,GACA,IAAwC,CAAC,GACzC;EAEA,AAJQ,KAAA,OAAA,GAGR,KAAKA,KAAW,EAAQ,WAAW,SACnC,KAAK,KAAK,cAAc,IAAI;CAC9B;CAEA,IAAI,SAA6B;EAS/B,OARI,KAAK,KAAK,oBACL,KAAK,KAAK,oBAGd,KAAK,KAAK,aAKb,EAAoB,KAAK,KAAK,YAAY,CAAgB,EAAE,MAAK,MAAM,EAAG,OAAO,KAAK,KAAK,UAAU,KAAK,OAJnG;CAMX;CAEA,MAAM,cAAc;EAElB,AADA,MAAM,KAAK,KAAK,gBAChB,KAAKC,GAAgB;CACvB;CAEA,mBAAmB;EACjB,KAAK,KAAK,oBAAoB,SAAS,KAAKC,EAAe;CAC7D;CAEA,KAAkB;EAChB,AAAI,KAAKF,OAAa,YAAY,KAAK,KAAK,YAAY,KAAK,KAAK,WAChE,KAAK,KAAK,oBAAoB,SAAS,KAAKE,EAAe,IAE3D,KAAK,KAAK,iBAAiB,SAAS,KAAKA,EAAe;CAE5D;CAEA,MAAmB,MAAiB;EAC9B,EAAM,oBAIV,KAAK,gBAAgB;CACvB;CAEA,kBAAkB;EAChB,IAAI,KAAK,KAAK,YAAY,KAAK,KAAK,YAAY,CAAC,KAAK,KAAK,SACzD,OAAO;EAGT,IAAM,IAAS,KAAK;EASpB,OARK,KAOL,EAAO,cAAc,IAAI,WAAW,aAAa,WAAW;GAAE,SAAS,KAAK,KAAK;GAAS,QAAQ,KAAK;EAAK,CAAC,CAAC,GACvG,QAPD,KAAK,KAAK,cAAc,KAAK,KAAK,sBACpC,QAAQ,KAAK,qBAAqB,KAAK,KAAK,cAAc,KAAK,KAAK,mBAAmB,WAAW,GAE7F;CAKX;AACF"}

package/dist/internal/controllers/type-native-popover.controller.js

@@ -23,19 +23,19 @@ var c = class {
 		};
 	}
 	async hostConnected() {
-		i(this.host), this.host.popover = this.host.popoverType ?? null, await this.host.updateComplete, this.host.setAttribute("nve-popover", ""), this.#u(), this.#l(), this.#s(), this.host.inert = this.host.matches(":not(:popover-open)") && !!this.#e.length, this.host.addEventListener("beforetoggle", (e) => {
+		i(this.host), this.host.popover = this.host.popoverType ?? null, await this.host.updateComplete, this.host.setAttribute("nve-popover", ""), this.#p(), this.#f(), this.#u(), this.host.inert = this.host.matches(":not(:popover-open)") && !!this.#e.length, this.host.addEventListener("beforetoggle", (e) => {
 			e.newState === "open" && this.host._internals.states.add("transition-start");
 		}), this.host.addEventListener("toggle", (e) => {
-			this.host.behaviorTrigger && (this.host.hidden = e.newState === "closed"), e.newState === "open" && this.host.closeTimeout && setTimeout(() => this.host.hidePopover(), this.host.closeTimeout), e.newState === "closed" && this.#i(), this.host.inert = this.host.matches(":not(:popover-open)"), this.host.modal && this.#d(e.newState === "open", e.target), this.host.dispatchEvent(new CustomEvent(e.newState === "open" && e.oldState !== "open" ? "open" : "close", {
+			this.host.behaviorTrigger && (this.host.hidden = e.newState === "closed"), e.newState === "open" && this.host.closeTimeout && this.#a(), e.newState === "closed" && (this.#s(), this.#o()), this.host.inert = this.host.matches(":not(:popover-open)"), this.host.modal && this.#m(e.newState === "open", e.target), this.host.dispatchEvent(new CustomEvent(e.newState === "open" && e.oldState !== "open" ? "open" : "close", {
 				bubbles: !0,
 				composed: !0,
 				detail: { trigger: e.source }
 			}));
 		}), this.host.addEventListener("command", ((e) => {
-			e.command === "toggle-popover" && this.host.togglePopover({ source: e.source }), e.command === "hide-popover" && (this.host.hidePopover(), this.#i()), e.command === "show-popover" && this.host.showPopover({ source: e.source });
+			e.command === "toggle-popover" && this.host.togglePopover({ source: e.source }), e.command === "hide-popover" && (this.host.hidePopover(), this.#s()), e.command === "show-popover" && this.host.showPopover({ source: e.source });
 		})), this.host.addEventListener("interest", ((e) => {
 			if (e.source?.localName.includes("-")) {
-				let t = this.host.openDelay ?? this.#a();
+				let t = this.host.openDelay ?? this.#c();
 				t ? this.#t = setTimeout(() => {
 					this.host.isConnected && this.host.showPopover({ source: e.source });
 				}, t) : this.host.showPopover({ source: e.source });
@@ -45,44 +45,51 @@ var c = class {
 		}));
 	}
 	#t = null;
-	#n = [];
-	#r = null;
+	#n = null;
+	#r = [];
+	#i = null;
 	async hostUpdated() {
-		this.host.popover = this.host.popoverType ?? null, this.#u();
+		this.host.popover = this.host.popoverType ?? null, this.#p();
 	}
 	hostDisconnected() {
-		this.#n.forEach((e) => e.disconnect()), this.#i();
+		this.#r.forEach((e) => e.disconnect()), this.#s(), this.#o();
 	}
-	#i() {
+	#a() {
+		this.#o(), this.host.closeTimeout && (this.#n = setTimeout(() => this.host.hidePopover(), this.host.closeTimeout));
+	}
+	#o() {
+		this.#n &&= (clearTimeout(this.#n), null);
+	}
+	#s() {
 		this.#t &&= (clearTimeout(this.#t), null);
 	}
-	#a() {
+	#c() {
 		let e = getComputedStyle(this.host).interestDelayStart;
 		if (!e) return 0;
 		let t = parseFloat(e);
 		return e.endsWith("ms") ? t : t * 1e3;
 	}
-	#o = !1;
-	#s() {
+	#l = !1;
+	#u() {
 		this.host.addEventListener("pointerdown", (e) => {
-			this.host.modal && this.host.matches(":popover-open") && (this.#o = t(e, this.host));
+			this.host.modal && this.host.matches(":popover-open") && (this.#l = t(e, this.host));
 		}), this.host.addEventListener("pointerup", (e) => {
-			this.#o && this.host.popoverDismissible && this.host.modal && this.host.matches(":popover-open") && !s(this.host) && t(e, this.host) && this.host.hidePopover();
+			this.#l && this.host.popoverDismissible && this.host.modal && this.host.matches(":popover-open") && !s(this.host) && t(e, this.host) && this.host.hidePopover();
 		});
 	}
-	get #c() {
+	get #d() {
 		return this.host.trigger ? o(this.host, this.host.trigger) : null;
 	}
-	async #l() {
-		await new Promise((e) => requestAnimationFrame(e)), this.#n.push(r(this.host, ["hidden"], () => {
+	async #f() {
+		await new Promise((e) => requestAnimationFrame(e)), this.#r.push(r(this.host, ["hidden"], () => {
 			this.host.isConnected && !this.host.hidden && !this.host.matches(":popover-open") && this.host.showPopover(), this.host.isConnected && this.host.hidden && this.host.matches(":popover-open") && this.host.hidePopover();
 		})), this.host.isConnected && !this.#e.length && !this.host.hidden && !this.host.matches(":popover-open") && (this.host.popover = "manual", this.host.showPopover());
 	}
-	#u() {
-		let e = this.#c;
-		this.#r && this.#r !== e && (this.#r.popoverTargetElement = null, this.#r.removeAttribute("popovertarget")), e && (this.host.popoverType === "hint" ? (e.addEventListener("mouseenter", () => this.host.showPopover({ source: e })), e.addEventListener("mouseleave", () => this.host.hidePopover()), e.addEventListener("focusout", () => this.host.hidePopover())) : (this.host.id = this.host.id ? this.host.id : n(), e.popoverTargetElement = this.host, e.setAttribute("popovertarget", this.host.id)), this.#r = e);
+	#p() {
+		let e = this.#d;
+		this.#i && this.#i !== e && (this.#i.popoverTargetElement = null, this.#i.removeAttribute("popovertarget")), e && (this.host.popoverType === "hint" ? (e.addEventListener("mouseenter", () => this.host.showPopover({ source: e })), e.addEventListener("mouseleave", () => this.host.hidePopover()), e.addEventListener("focusout", () => this.host.hidePopover())) : (this.host.id = this.host.id ? this.host.id : n(), e.popoverTargetElement = this.host, e.setAttribute("popovertarget", this.host.id)), this.#i = e);
 	}
-	#d(t, n) {
+	#m(t, n) {
 		t ? this.host.getRootNode().activeElement !== this.host && !this.host.shadowRoot.activeElement && e(this.host) : e(n);
 	}
 };

package/dist/internal/controllers/type-native-popover.controller.js.map

@@ -1 +1 @@
-{"version":3,"file":"type-native-popover.controller.js","names":["#nativeTriggers","#updateLegacyTriggers","#setupLegacyTriggers","#setupModalLightDismiss","#clearInterestTimeout","#toggleFocus","#parseInterestDelay","#interestTimeout","#observers","#pointerdownWithinModal","#legacyHostTrigger","#previousLegacyTrigger"],"sources":["../../../src/internal/controllers/type-native-popover.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 { clickOutsideElementBounds, generateId, getAttributeListChanges } from '../utils/dom.js';\nimport { attachInternals } from '../utils/a11y.js';\nimport { focusElement } from '../utils/focus.js';\nimport { getHostAnchor, getHostTrigger, hasOpenPopover } from './type-native-popover.utils.js';\nimport type { PopoverType } from '../types/index.js';\nimport type { InterestEvent } from './type-interest.controller.js';\n\nexport interface NativePopover extends ReactiveElement {\n  anchor?: HTMLElement | string;\n  closeTimeout?: number;\n  popoverType?: PopoverType;\n  modal?: boolean;\n  popoverDismissible?: boolean;\n  _activeTrigger?: HTMLElement;\n  _internals?: ElementInternals;\n\n  /** @deprecated */\n  trigger?: HTMLElement | string;\n  /** @deprecated */\n  openDelay?: number;\n  /** @deprecated */\n  behaviorTrigger?: boolean;\n}\n\n/**\n * https://open-ui.org/components/popup.research.explainer\n */\nexport class TypeNativePopoverController<T extends NativePopover> implements ReactiveController {\n  get #nativeTriggers(): HTMLElement[] {\n    const root = this.host.getRootNode() as HTMLElement;\n    const popoverTargetTriggers = Array.from(\n      root.querySelectorAll(`[popovertarget=\"${CSS.escape ? CSS.escape(this.host.id) : this.host.id}\"]`)\n    ) as HTMLElement[];\n\n    const commandForTriggers = Array.from(\n      root.querySelectorAll(`[commandfor=\"${CSS.escape ? CSS.escape(this.host.id) : this.host.id}\"]`)\n    ) as HTMLElement[];\n\n    const interestForTriggers = Array.from(\n      root.querySelectorAll(`[interestfor=\"${CSS.escape ? CSS.escape(this.host.id) : this.host.id}\"]`)\n    ) as HTMLElement[];\n\n    return [...popoverTargetTriggers, ...commandForTriggers, ...interestForTriggers];\n  }\n\n  constructor(private host: T) {\n    this.host.addController(this);\n\n    const showPopover = this.host.showPopover;\n    this.host.showPopover = (options?: ShowPopoverOptions) => {\n      if (this.host.isConnected) {\n        // provide legacy fallback for source anchor or trigger if not provided, this can happen if the popover is dynamically created in the DOM without the use of the standard popover api or legacy trigger based api\n        let source: HTMLElement | Element | null = options?.source ?? null;\n        if (!source) {\n          if (this.host.anchor) {\n            source = getHostAnchor(this.host);\n          } else if (this.host.trigger) {\n            source = getHostTrigger(this.host, this.host.trigger);\n          } else {\n            source = globalThis.document.activeElement;\n          }\n        }\n\n        showPopover.call(this.host, { source: source as HTMLElement });\n      }\n    };\n  }\n\n  // eslint-disable-next-line max-lines-per-function\n  async hostConnected() {\n    attachInternals(this.host);\n    this.host.popover = this.host.popoverType ?? null;\n    await this.host.updateComplete;\n    this.host.setAttribute('nve-popover', '');\n    this.#updateLegacyTriggers();\n    this.#setupLegacyTriggers(); // eslint-disable-line @typescript-eslint/no-floating-promises\n    this.#setupModalLightDismiss();\n    this.host.inert = this.host.matches(':not(:popover-open)') && !!this.#nativeTriggers.length;\n\n    this.host.addEventListener('beforetoggle', e => {\n      if (e.newState === 'open') {\n        this.host._internals!.states.add('transition-start');\n      }\n    });\n\n    this.host.addEventListener('toggle', (e: ToggleEvent) => {\n      if (this.host.behaviorTrigger) {\n        this.host.hidden = e.newState === 'closed';\n      }\n\n      if (e.newState === 'open' && this.host.closeTimeout) {\n        setTimeout(() => this.host.hidePopover(), this.host.closeTimeout);\n      }\n\n      if (e.newState === 'closed') {\n        this.#clearInterestTimeout();\n      }\n\n      this.host.inert = this.host.matches(':not(:popover-open)');\n\n      if (this.host.modal) {\n        this.#toggleFocus(e.newState === 'open', e.target as HTMLElement);\n      }\n\n      this.host.dispatchEvent(\n        new CustomEvent(e.newState === 'open' && e.oldState !== 'open' ? 'open' : 'close', {\n          bubbles: true,\n          composed: true,\n          detail: { trigger: e.source }\n        })\n      );\n    });\n\n    // https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API#creating_declarative_popovers\n    this.host.addEventListener('command', ((e: CommandEvent) => {\n      if (e.command === 'toggle-popover') {\n        this.host.togglePopover({ source: e.source as HTMLElement });\n      }\n\n      if (e.command === 'hide-popover') {\n        this.host.hidePopover();\n        this.#clearInterestTimeout();\n      }\n\n      if (e.command === 'show-popover') {\n        this.host.showPopover({ source: e.source as HTMLElement });\n      }\n    }) as EventListener);\n\n    // https://developer.mozilla.org/en-US/docs/Web/API/Popover_API/Using_interest_invokers\n    this.host.addEventListener('interest', ((e: InterestEvent) => {\n      const isCustomElement = e.source?.localName.includes('-');\n      if (isCustomElement) {\n        const interestDelayStart = this.host.openDelay ?? this.#parseInterestDelay();\n        if (interestDelayStart) {\n          this.#interestTimeout = setTimeout(() => {\n            if (this.host.isConnected) {\n              this.host.showPopover({ source: e.source as HTMLElement });\n            }\n          }, interestDelayStart);\n        } else {\n          this.host.showPopover({ source: e.source as HTMLElement });\n        }\n      }\n    }) as EventListener);\n\n    this.host.addEventListener('loseinterest', ((e: InterestEvent) => {\n      const isCustomElement = e.source?.localName.includes('-');\n      if (isCustomElement) {\n        this.host.hidePopover();\n      }\n\n      if (this.#interestTimeout) {\n        clearTimeout(this.#interestTimeout);\n        this.#interestTimeout = null;\n      }\n    }) as EventListener);\n  }\n\n  #interestTimeout: ReturnType<typeof setTimeout> | null = null;\n  #observers: MutationObserver[] = [];\n  #previousLegacyTrigger: HTMLButtonElement | null = null;\n\n  async hostUpdated() {\n    this.host.popover = this.host.popoverType ?? null;\n    this.#updateLegacyTriggers();\n  }\n\n  hostDisconnected() {\n    this.#observers.forEach(observer => observer.disconnect());\n    this.#clearInterestTimeout();\n  }\n\n  #clearInterestTimeout() {\n    if (this.#interestTimeout) {\n      clearTimeout(this.#interestTimeout);\n      this.#interestTimeout = null;\n    }\n  }\n\n  #parseInterestDelay(): number {\n    const style = getComputedStyle(this.host);\n    const raw = (style as unknown as { interestDelayStart: string }).interestDelayStart;\n    if (!raw) {\n      return 0;\n    }\n    const value = parseFloat(raw);\n    return raw.endsWith('ms') ? value : value * 1000;\n  }\n\n  #pointerdownWithinModal = false;\n\n  #setupModalLightDismiss() {\n    this.host.addEventListener('pointerdown', e => {\n      if (this.host.modal && this.host.matches(':popover-open')) {\n        this.#pointerdownWithinModal = clickOutsideElementBounds(e, this.host);\n      }\n    });\n\n    this.host.addEventListener('pointerup', e => {\n      if (\n        this.#pointerdownWithinModal &&\n        this.host.popoverDismissible &&\n        this.host.modal &&\n        this.host.matches(':popover-open') &&\n        !hasOpenPopover(this.host) &&\n        clickOutsideElementBounds(e, this.host)\n      ) {\n        this.host.hidePopover();\n      }\n    });\n  }\n\n  get #legacyHostTrigger(): HTMLElement | null {\n    return this.host.trigger ? (getHostTrigger(this.host, this.host.trigger) as HTMLButtonElement) : null;\n  }\n\n  /**\n   * @deprecated Legacy behavior that allows popovers to show as open by default when using the legacy trigger based api\n   */\n  async #setupLegacyTriggers() {\n    await new Promise(r => requestAnimationFrame(r));\n\n    // setup hidden updates for legacy triggers\n    this.#observers.push(\n      getAttributeListChanges(this.host, ['hidden'], () => {\n        if (this.host.isConnected && !this.host.hidden && !this.host.matches(':popover-open')) {\n          this.host.showPopover();\n        }\n\n        if (this.host.isConnected && this.host.hidden && this.host.matches(':popover-open')) {\n          this.host.hidePopover();\n        }\n      })\n    );\n\n    // determine if popover is open by default\n    if (\n      this.host.isConnected &&\n      !this.#nativeTriggers.length &&\n      !this.host.hidden &&\n      !this.host.matches(':popover-open')\n    ) {\n      this.host.popover = 'manual';\n      this.host.showPopover();\n    }\n  }\n\n  /**\n   * @deprecated Legacy behavior that allows popovers to show as open by default when using the legacy trigger based api\n   */\n  #updateLegacyTriggers() {\n    const trigger = this.#legacyHostTrigger as HTMLButtonElement;\n\n    // Clean up previous trigger if it changed\n    if (this.#previousLegacyTrigger && this.#previousLegacyTrigger !== trigger) {\n      this.#previousLegacyTrigger.popoverTargetElement = null;\n      this.#previousLegacyTrigger.removeAttribute('popovertarget');\n    }\n\n    // if not a hint type setup native popovertarget\n    if (trigger) {\n      if (this.host.popoverType === 'hint') {\n        trigger.addEventListener('mouseenter', () => this.host.showPopover({ source: trigger as HTMLElement }));\n        trigger.addEventListener('mouseleave', () => this.host.hidePopover());\n        trigger.addEventListener('focusout', () => this.host.hidePopover());\n      } else {\n        this.host.id = this.host.id ? this.host.id : generateId();\n        trigger.popoverTargetElement = this.host;\n        trigger.setAttribute('popovertarget', this.host.id);\n      }\n      this.#previousLegacyTrigger = trigger;\n    }\n  }\n\n  #toggleFocus(open: boolean, target: HTMLElement) {\n    if (open) {\n      // only focus popover if not the active element and not containing the active element already\n      if ((this.host.getRootNode() as Document).activeElement !== this.host && !this.host.shadowRoot!.activeElement) {\n        focusElement(this.host);\n      }\n    } else {\n      focusElement(target);\n    }\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"type-native-popover.controller.js","names":["#nativeTriggers","#updateLegacyTriggers","#setupLegacyTriggers","#setupModalLightDismiss","#setCloseTimeout","#clearInterestTimeout","#clearCloseTimeout","#toggleFocus","#parseInterestDelay","#interestTimeout","#observers","#closeTimeout","#pointerdownWithinModal","#legacyHostTrigger","#previousLegacyTrigger"],"sources":["../../../src/internal/controllers/type-native-popover.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 { clickOutsideElementBounds, generateId, getAttributeListChanges } from '../utils/dom.js';\nimport { attachInternals } from '../utils/a11y.js';\nimport { focusElement } from '../utils/focus.js';\nimport { getHostAnchor, getHostTrigger, hasOpenPopover } from './type-native-popover.utils.js';\nimport type { PopoverType } from '../types/index.js';\nimport type { InterestEvent } from './type-interest.controller.js';\n\nexport interface NativePopover extends ReactiveElement {\n  anchor?: HTMLElement | string;\n  closeTimeout?: number;\n  popoverType?: PopoverType;\n  modal?: boolean;\n  popoverDismissible?: boolean;\n  _activeTrigger?: HTMLElement;\n  _internals?: ElementInternals;\n\n  /** @deprecated */\n  trigger?: HTMLElement | string;\n  /** @deprecated */\n  openDelay?: number;\n  /** @deprecated */\n  behaviorTrigger?: boolean;\n}\n\n/**\n * https://open-ui.org/components/popup.research.explainer\n */\nexport class TypeNativePopoverController<T extends NativePopover> implements ReactiveController {\n  get #nativeTriggers(): HTMLElement[] {\n    const root = this.host.getRootNode() as HTMLElement;\n    const popoverTargetTriggers = Array.from(\n      root.querySelectorAll(`[popovertarget=\"${CSS.escape ? CSS.escape(this.host.id) : this.host.id}\"]`)\n    ) as HTMLElement[];\n\n    const commandForTriggers = Array.from(\n      root.querySelectorAll(`[commandfor=\"${CSS.escape ? CSS.escape(this.host.id) : this.host.id}\"]`)\n    ) as HTMLElement[];\n\n    const interestForTriggers = Array.from(\n      root.querySelectorAll(`[interestfor=\"${CSS.escape ? CSS.escape(this.host.id) : this.host.id}\"]`)\n    ) as HTMLElement[];\n\n    return [...popoverTargetTriggers, ...commandForTriggers, ...interestForTriggers];\n  }\n\n  constructor(private host: T) {\n    this.host.addController(this);\n\n    const showPopover = this.host.showPopover;\n    this.host.showPopover = (options?: ShowPopoverOptions) => {\n      if (this.host.isConnected) {\n        // provide legacy fallback for source anchor or trigger if not provided, this can happen if the popover is dynamically created in the DOM without the use of the standard popover api or legacy trigger based api\n        let source: HTMLElement | Element | null = options?.source ?? null;\n        if (!source) {\n          if (this.host.anchor) {\n            source = getHostAnchor(this.host);\n          } else if (this.host.trigger) {\n            source = getHostTrigger(this.host, this.host.trigger);\n          } else {\n            source = globalThis.document.activeElement;\n          }\n        }\n\n        showPopover.call(this.host, { source: source as HTMLElement });\n      }\n    };\n  }\n\n  // eslint-disable-next-line max-lines-per-function\n  async hostConnected() {\n    attachInternals(this.host);\n    this.host.popover = this.host.popoverType ?? null;\n    await this.host.updateComplete;\n    this.host.setAttribute('nve-popover', '');\n    this.#updateLegacyTriggers();\n    this.#setupLegacyTriggers(); // eslint-disable-line @typescript-eslint/no-floating-promises\n    this.#setupModalLightDismiss();\n    this.host.inert = this.host.matches(':not(:popover-open)') && !!this.#nativeTriggers.length;\n\n    this.host.addEventListener('beforetoggle', e => {\n      if (e.newState === 'open') {\n        this.host._internals!.states.add('transition-start');\n      }\n    });\n\n    this.host.addEventListener('toggle', (e: ToggleEvent) => {\n      if (this.host.behaviorTrigger) {\n        this.host.hidden = e.newState === 'closed';\n      }\n\n      if (e.newState === 'open' && this.host.closeTimeout) {\n        this.#setCloseTimeout();\n      }\n\n      if (e.newState === 'closed') {\n        this.#clearInterestTimeout();\n        this.#clearCloseTimeout();\n      }\n\n      this.host.inert = this.host.matches(':not(:popover-open)');\n\n      if (this.host.modal) {\n        this.#toggleFocus(e.newState === 'open', e.target as HTMLElement);\n      }\n\n      this.host.dispatchEvent(\n        new CustomEvent(e.newState === 'open' && e.oldState !== 'open' ? 'open' : 'close', {\n          bubbles: true,\n          composed: true,\n          detail: { trigger: e.source }\n        })\n      );\n    });\n\n    // https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API#creating_declarative_popovers\n    this.host.addEventListener('command', ((e: CommandEvent) => {\n      if (e.command === 'toggle-popover') {\n        this.host.togglePopover({ source: e.source as HTMLElement });\n      }\n\n      if (e.command === 'hide-popover') {\n        this.host.hidePopover();\n        this.#clearInterestTimeout();\n      }\n\n      if (e.command === 'show-popover') {\n        this.host.showPopover({ source: e.source as HTMLElement });\n      }\n    }) as EventListener);\n\n    // https://developer.mozilla.org/en-US/docs/Web/API/Popover_API/Using_interest_invokers\n    this.host.addEventListener('interest', ((e: InterestEvent) => {\n      const isCustomElement = e.source?.localName.includes('-');\n      if (isCustomElement) {\n        const interestDelayStart = this.host.openDelay ?? this.#parseInterestDelay();\n        if (interestDelayStart) {\n          this.#interestTimeout = setTimeout(() => {\n            if (this.host.isConnected) {\n              this.host.showPopover({ source: e.source as HTMLElement });\n            }\n          }, interestDelayStart);\n        } else {\n          this.host.showPopover({ source: e.source as HTMLElement });\n        }\n      }\n    }) as EventListener);\n\n    this.host.addEventListener('loseinterest', ((e: InterestEvent) => {\n      const isCustomElement = e.source?.localName.includes('-');\n      if (isCustomElement) {\n        this.host.hidePopover();\n      }\n\n      if (this.#interestTimeout) {\n        clearTimeout(this.#interestTimeout);\n        this.#interestTimeout = null;\n      }\n    }) as EventListener);\n  }\n\n  #interestTimeout: ReturnType<typeof setTimeout> | null = null;\n  #closeTimeout: ReturnType<typeof setTimeout> | null = null;\n  #observers: MutationObserver[] = [];\n  #previousLegacyTrigger: HTMLButtonElement | null = null;\n\n  async hostUpdated() {\n    this.host.popover = this.host.popoverType ?? null;\n    this.#updateLegacyTriggers();\n  }\n\n  hostDisconnected() {\n    this.#observers.forEach(observer => observer.disconnect());\n    this.#clearInterestTimeout();\n    this.#clearCloseTimeout();\n  }\n\n  #setCloseTimeout() {\n    this.#clearCloseTimeout();\n    if (this.host.closeTimeout) {\n      this.#closeTimeout = setTimeout(() => this.host.hidePopover(), this.host.closeTimeout);\n    }\n  }\n\n  #clearCloseTimeout() {\n    if (this.#closeTimeout) {\n      clearTimeout(this.#closeTimeout);\n      this.#closeTimeout = null;\n    }\n  }\n\n  #clearInterestTimeout() {\n    if (this.#interestTimeout) {\n      clearTimeout(this.#interestTimeout);\n      this.#interestTimeout = null;\n    }\n  }\n\n  #parseInterestDelay(): number {\n    const style = getComputedStyle(this.host);\n    const raw = (style as unknown as { interestDelayStart: string }).interestDelayStart;\n    if (!raw) {\n      return 0;\n    }\n    const value = parseFloat(raw);\n    return raw.endsWith('ms') ? value : value * 1000;\n  }\n\n  #pointerdownWithinModal = false;\n\n  #setupModalLightDismiss() {\n    this.host.addEventListener('pointerdown', e => {\n      if (this.host.modal && this.host.matches(':popover-open')) {\n        this.#pointerdownWithinModal = clickOutsideElementBounds(e, this.host);\n      }\n    });\n\n    this.host.addEventListener('pointerup', e => {\n      if (\n        this.#pointerdownWithinModal &&\n        this.host.popoverDismissible &&\n        this.host.modal &&\n        this.host.matches(':popover-open') &&\n        !hasOpenPopover(this.host) &&\n        clickOutsideElementBounds(e, this.host)\n      ) {\n        this.host.hidePopover();\n      }\n    });\n  }\n\n  get #legacyHostTrigger(): HTMLElement | null {\n    return this.host.trigger ? (getHostTrigger(this.host, this.host.trigger) as HTMLButtonElement) : null;\n  }\n\n  /**\n   * @deprecated Legacy behavior that allows popovers to show as open by default when using the legacy trigger based api\n   */\n  async #setupLegacyTriggers() {\n    await new Promise(r => requestAnimationFrame(r));\n\n    // setup hidden updates for legacy triggers\n    this.#observers.push(\n      getAttributeListChanges(this.host, ['hidden'], () => {\n        if (this.host.isConnected && !this.host.hidden && !this.host.matches(':popover-open')) {\n          this.host.showPopover();\n        }\n\n        if (this.host.isConnected && this.host.hidden && this.host.matches(':popover-open')) {\n          this.host.hidePopover();\n        }\n      })\n    );\n\n    // determine if popover is open by default\n    if (\n      this.host.isConnected &&\n      !this.#nativeTriggers.length &&\n      !this.host.hidden &&\n      !this.host.matches(':popover-open')\n    ) {\n      this.host.popover = 'manual';\n      this.host.showPopover();\n    }\n  }\n\n  /**\n   * @deprecated Legacy behavior that allows popovers to show as open by default when using the legacy trigger based api\n   */\n  #updateLegacyTriggers() {\n    const trigger = this.#legacyHostTrigger as HTMLButtonElement;\n\n    // Clean up previous trigger if it changed\n    if (this.#previousLegacyTrigger && this.#previousLegacyTrigger !== trigger) {\n      this.#previousLegacyTrigger.popoverTargetElement = null;\n      this.#previousLegacyTrigger.removeAttribute('popovertarget');\n    }\n\n    // if not a hint type setup native popovertarget\n    if (trigger) {\n      if (this.host.popoverType === 'hint') {\n        trigger.addEventListener('mouseenter', () => this.host.showPopover({ source: trigger as HTMLElement }));\n        trigger.addEventListener('mouseleave', () => this.host.hidePopover());\n        trigger.addEventListener('focusout', () => this.host.hidePopover());\n      } else {\n        this.host.id = this.host.id ? this.host.id : generateId();\n        trigger.popoverTargetElement = this.host;\n        trigger.setAttribute('popovertarget', this.host.id);\n      }\n      this.#previousLegacyTrigger = trigger;\n    }\n  }\n\n  #toggleFocus(open: boolean, target: HTMLElement) {\n    if (open) {\n      // only focus popover if not the active element and not containing the active element already\n      if ((this.host.getRootNode() as Document).activeElement !== this.host && !this.host.shadowRoot!.activeElement) {\n        focusElement(this.host);\n      }\n    } else {\n      focusElement(target);\n    }\n  }\n}\n"],"mappings":"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"}

package/dist/internal/controllers/type-native-popover.utils.js

@@ -1,20 +1,20 @@
 import { getIdMatchNotFoundWarning as e } from "../utils/audit-logs.js";
-import { getFlattenedDOMTree as t } from "../utils/dom.js";
-import { LogService as n } from "../services/log.service.js";
+import { LogService as t } from "../services/log.service.js";
+import { getFlattenedDOMTree as n } from "../utils/dom.js";
 //#region src/internal/controllers/type-native-popover.utils.ts
-function r(e, n) {
-	return typeof n == "string" ? t(e.parentNode).filter((e) => e?.id !== "").find((e) => e.id === n) ?? globalThis.document.body : n;
+function r(e, t) {
+	return typeof t == "string" ? n(e.parentNode).filter((e) => e?.id !== "").find((e) => e.id === t) ?? globalThis.document.body : t;
 }
 function i(r) {
 	let i = r.anchor ?? r._activeTrigger;
 	if (typeof i == "string" && i?.length) {
-		let a = t(r.parentNode).find((e) => e.id === i);
-		return a || n.warn(e(i)), a ?? globalThis.document.body;
+		let a = n(r.parentNode).find((e) => e.id === i);
+		return a || t.warn(e(i)), a ?? globalThis.document.body;
 	} else if (i && i !== globalThis.document.body) return i;
 	else return globalThis.document.body;
 }
 function a(e) {
-	return !!t(e).filter((e) => e.popover && e.matches(":popover-open")).length;
+	return !!n(e).filter((e) => e.popover && e.matches(":popover-open")).length;
 }
 //#endregion
 export { i as getHostAnchor, r as getHostTrigger, a as hasOpenPopover };

package/dist/internal/index.d.ts

@@ -1,7 +1,6 @@
 /**
  * @internal private common utilities for Elements
  */
-export * from './base/button.js';
 export * from './controllers/audit.controller.js';
 export * from './controllers/i18n.controller.js';
 export * from './controllers/keynav-grid.controller.js';