@nvidia-elements/core 0.0.1 → 0.0.3

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

@@ -0,0 +1,36 @@
+import { attachInternals as e } from "../utils/a11y.js";
+//#region src/internal/controllers/type-expandable.controller.ts
+var t = class {
+	#e = !1;
+	#t = !1;
+	constructor(e, t = {}) {
+		this.host = e, this.#t = t.useHidden ?? !1, this.host.addController(this);
+	}
+	hostConnected() {
+		e(this.host), this.host.addEventListener("command", ((e) => {
+			this.#e = !0, e.command === "--toggle" && this.toggle(), e.command === "--open" && this.open(), e.command === "--close" && this.close(), this.#e = !1;
+		}));
+	}
+	hostUpdated() {
+		this.host.expandable ? this.host._internals.states.add("expandable") : this.host._internals.states.delete("expandable");
+	}
+	open() {
+		(this.host.behaviorExpand || this.#e) && (this.host.expanded = !0, this.#t && (this.host.hidden = !1)), this.host.dispatchEvent(new CustomEvent("open", {
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	close() {
+		(this.host.behaviorExpand || this.#e) && (this.host.expanded = !1, this.#t && (this.host.hidden = !0)), this.host.dispatchEvent(new CustomEvent("close", {
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	toggle() {
+		this.host.expanded || this.#t && !this.host.hidden ? this.close() : this.open();
+	}
+};
+//#endregion
+export { t as TypeExpandableController };
+
+//# sourceMappingURL=type-expandable.controller.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"type-expandable.controller.js","names":["#useHidden","#commandTriggered"],"sources":["../../../src/internal/controllers/type-expandable.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 { attachInternals } from '../utils/a11y.js';\n\nexport type TypeExpandable = ReactiveElement & {\n  expanded?: boolean;\n  behaviorExpand?: boolean;\n  expandable?: boolean;\n  _internals?: ElementInternals;\n};\n\n/**\n * Controller for enabling expandable behavior for elements.\n * @event open - Dispatched when the expandable element opens.\n * @event close - Dispatched when the expandable element closes.\n * @property expanded - expanded state\n * @property behaviorExpand - determines if stateful auto behavior should enable\n */\nexport class TypeExpandableController<T extends TypeExpandable> implements ReactiveController {\n  #commandTriggered = false;\n  #useHidden = false;\n\n  constructor(\n    private host: T,\n    config: { useHidden?: boolean } = {}\n  ) {\n    this.#useHidden = config.useHidden ?? false;\n    this.host.addController(this);\n  }\n\n  hostConnected() {\n    attachInternals(this.host);\n\n    this.host.addEventListener('command', ((e: CommandEvent) => {\n      this.#commandTriggered = true;\n      if (e.command === '--toggle') {\n        this.toggle();\n      }\n\n      if (e.command === '--open') {\n        this.open();\n      }\n\n      if (e.command === '--close') {\n        this.close();\n      }\n      this.#commandTriggered = false;\n    }) as EventListener);\n  }\n\n  hostUpdated() {\n    this.host.expandable\n      ? this.host._internals!.states.add('expandable')\n      : this.host._internals!.states.delete('expandable');\n  }\n\n  open() {\n    if (this.host.behaviorExpand || this.#commandTriggered) {\n      this.host.expanded = true;\n\n      if (this.#useHidden) {\n        this.host.hidden = false;\n      }\n    }\n\n    this.host.dispatchEvent(new CustomEvent('open', { bubbles: true, composed: true }));\n  }\n\n  close() {\n    if (this.host.behaviorExpand || this.#commandTriggered) {\n      this.host.expanded = false;\n\n      if (this.#useHidden) {\n        this.host.hidden = true;\n      }\n    }\n\n    this.host.dispatchEvent(new CustomEvent('close', { bubbles: true, composed: true }));\n  }\n\n  toggle() {\n    if (this.host.expanded || (this.#useHidden && !this.host.hidden)) {\n      this.close();\n    } else {\n      this.open();\n    }\n  }\n}\n"],"mappings":";;AAoBA,IAAa,IAAb,MAA8F;CAC5F,KAAoB;CACpB,KAAa;CAEb,YACE,GACA,IAAkC,EAAE,EACpC;AAEA,EAJQ,KAAA,OAAA,GAGR,MAAA,IAAkB,EAAO,aAAa,IACtC,KAAK,KAAK,cAAc,KAAK;;CAG/B,gBAAgB;AAGd,EAFA,EAAgB,KAAK,KAAK,EAE1B,KAAK,KAAK,iBAAiB,aAAa,MAAoB;AAa1D,GAZA,MAAA,IAAyB,IACrB,EAAE,YAAY,cAChB,KAAK,QAAQ,EAGX,EAAE,YAAY,YAChB,KAAK,MAAM,EAGT,EAAE,YAAY,aAChB,KAAK,OAAO,EAEd,MAAA,IAAyB;KACP;;CAGtB,cAAc;AACZ,OAAK,KAAK,aACN,KAAK,KAAK,WAAY,OAAO,IAAI,aAAa,GAC9C,KAAK,KAAK,WAAY,OAAO,OAAO,aAAa;;CAGvD,OAAO;AASL,GARI,KAAK,KAAK,kBAAkB,MAAA,OAC9B,KAAK,KAAK,WAAW,IAEjB,MAAA,MACF,KAAK,KAAK,SAAS,MAIvB,KAAK,KAAK,cAAc,IAAI,YAAY,QAAQ;GAAE,SAAS;GAAM,UAAU;GAAM,CAAC,CAAC;;CAGrF,QAAQ;AASN,GARI,KAAK,KAAK,kBAAkB,MAAA,OAC9B,KAAK,KAAK,WAAW,IAEjB,MAAA,MACF,KAAK,KAAK,SAAS,MAIvB,KAAK,KAAK,cAAc,IAAI,YAAY,SAAS;GAAE,SAAS;GAAM,UAAU;GAAM,CAAC,CAAC;;CAGtF,SAAS;AACP,EAAI,KAAK,KAAK,YAAa,MAAA,KAAmB,CAAC,KAAK,KAAK,SACvD,KAAK,OAAO,GAEZ,KAAK,MAAM"}

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

@@ -0,0 +1,23 @@
+import { ReactiveController, ReactiveElement } from 'lit';
+export type InterestEvent = Event & {
+    source: HTMLElement;
+};
+/**
+ * Adds Interest Invoker Commands API support for interactive custom elements.
+ * https://developer.mozilla.org/en-US/docs/Web/API/Popover_API/Using_interest_invokers
+ */
+export declare function typeInterest<T extends Interest>(): ClassDecorator;
+export type Interest = ReactiveElement & HTMLElement & {
+    interestfor: string | null;
+    interestForElement: HTMLElement | null;
+    readonly: boolean;
+    disabled: boolean;
+};
+export declare class TypeInterestController<T extends Interest> implements ReactiveController {
+    #private;
+    private host;
+    constructor(host: T);
+    hostConnected(): Promise<void>;
+    hostUpdated(): Promise<void>;
+    hostDisconnected(): void;
+}

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

@@ -0,0 +1,51 @@
+import { getFlattenedDOMTree as e } from "../utils/dom.js";
+//#region src/internal/controllers/type-interest.controller.ts
+function t() {
+	return (e) => e.addInitializer((e) => new n(e));
+}
+var n = class {
+	#e = !1;
+	constructor(e) {
+		this.host = e, this.host.addController(this);
+	}
+	async hostConnected() {
+		await this.#t();
+	}
+	async hostUpdated() {
+		await this.#t();
+	}
+	hostDisconnected() {
+		this.#n();
+	}
+	async #t() {
+		await this.host.updateComplete, this.#e || (this.#e = !0, this.host.addEventListener("mouseenter", this.#r), this.host.addEventListener("mouseleave", this.#i), this.host.addEventListener("focus", this.#r), this.host.addEventListener("blur", this.#i));
+	}
+	#n() {
+		this.#e = !1, this.host.removeEventListener("mouseenter", this.#r), this.host.removeEventListener("mouseleave", this.#i), this.host.removeEventListener("focus", this.#r), this.host.removeEventListener("blur", this.#i);
+	}
+	#r = () => {
+		if (this.#a(), this.host.interestForElement) {
+			let e = new Event("interest", { cancelable: !0 });
+			e.source = this.host, this.host.interestForElement.dispatchEvent(e);
+		}
+	};
+	#i = () => {
+		if (this.#a(), this.host.interestForElement) {
+			let e = new Event("loseinterest", { cancelable: !0 });
+			e.source = this.host, this.host.interestForElement.dispatchEvent(e);
+		}
+	};
+	#a() {
+		let t = this.host.getAttribute("interestfor");
+		t && !this.host.interestForElement && (this.host.interestForElement = e(this.host.getRootNode()).find((e) => e.id === t));
+		let n = this.host.getAttribute("popovertarget");
+		if (n && !t) {
+			let t = e(this.host.getRootNode()).find((e) => e.id === n);
+			t && t.popover === "hint" && (this.host.interestForElement = t);
+		}
+	}
+};
+//#endregion
+export { n as TypeInterestController, t as typeInterest };
+
+//# sourceMappingURL=type-interest.controller.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"type-interest.controller.js","names":["#setupInterestEvents","#teardownInterestEvents","#interestSetupComplete","#triggerInterest","#triggerLoseInterest","#updateInterestForElement"],"sources":["../../../src/internal/controllers/type-interest.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\nexport type InterestEvent = Event & {\n  source: HTMLElement;\n};\n\n/**\n * Adds Interest Invoker Commands API support for interactive custom elements.\n * https://developer.mozilla.org/en-US/docs/Web/API/Popover_API/Using_interest_invokers\n */\nexport function typeInterest<T extends Interest>(): ClassDecorator {\n  return (target: LegacyDecoratorTarget) =>\n    target.addInitializer!((instance: T) => new TypeInterestController(instance));\n}\n\nexport type Interest = ReactiveElement &\n  HTMLElement & {\n    interestfor: string | null;\n    interestForElement: HTMLElement | null;\n    readonly: boolean;\n    disabled: boolean;\n  };\n\nexport class TypeInterestController<T extends Interest> implements ReactiveController {\n  #interestSetupComplete = false;\n\n  constructor(private host: T) {\n    this.host.addController(this);\n  }\n\n  async hostConnected() {\n    await this.#setupInterestEvents();\n  }\n\n  async hostUpdated() {\n    await this.#setupInterestEvents();\n  }\n\n  hostDisconnected() {\n    this.#teardownInterestEvents();\n  }\n\n  async #setupInterestEvents() {\n    await this.host.updateComplete;\n    if (!this.#interestSetupComplete) {\n      this.#interestSetupComplete = true;\n      this.host.addEventListener('mouseenter', this.#triggerInterest);\n      this.host.addEventListener('mouseleave', this.#triggerLoseInterest);\n      this.host.addEventListener('focus', this.#triggerInterest);\n      this.host.addEventListener('blur', this.#triggerLoseInterest);\n    }\n  }\n\n  #teardownInterestEvents() {\n    this.#interestSetupComplete = false;\n    this.host.removeEventListener('mouseenter', this.#triggerInterest);\n    this.host.removeEventListener('mouseleave', this.#triggerLoseInterest);\n    this.host.removeEventListener('focus', this.#triggerInterest);\n    this.host.removeEventListener('blur', this.#triggerLoseInterest);\n  }\n\n  #triggerInterest = () => {\n    this.#updateInterestForElement();\n    if (this.host.interestForElement) {\n      const event = new Event('interest', { cancelable: true }) as InterestEvent;\n      event.source = this.host;\n      this.host.interestForElement.dispatchEvent(event);\n    }\n  };\n\n  #triggerLoseInterest = () => {\n    this.#updateInterestForElement();\n    if (this.host.interestForElement) {\n      const event = new Event('loseinterest', { cancelable: true }) as InterestEvent;\n      event.source = this.host;\n      this.host.interestForElement.dispatchEvent(event);\n    }\n  };\n\n  // we can only do this on interaction as its too costly to do this on every getter or update of the interestfor attribute, this diverges from the native behavior of the interestfor attribute\n  #updateInterestForElement() {\n    const interestForIdRef = this.host.getAttribute('interestfor');\n    if (interestForIdRef && !this.host.interestForElement) {\n      this.host.interestForElement = getFlattenedDOMTree(this.host.getRootNode() as HTMLElement).find(\n        el => el.id === interestForIdRef\n      )!;\n    }\n\n    // legacy behavior that allows popovertarget to trigger interestfor behavior for hint type popovers\n    const popovertargetIdRef = this.host.getAttribute('popovertarget');\n    if (popovertargetIdRef && !interestForIdRef) {\n      const target = getFlattenedDOMTree(this.host.getRootNode() as HTMLElement).find(\n        el => el.id === popovertargetIdRef\n      );\n      if (target && target.popover === 'hint') {\n        this.host.interestForElement = target;\n      }\n    }\n  }\n}\n"],"mappings":";;AAeA,SAAgB,IAAmD;AACjE,SAAQ,MACN,EAAO,gBAAiB,MAAgB,IAAI,EAAuB,EAAS,CAAC;;AAWjF,IAAa,IAAb,MAAsF;CACpF,KAAyB;CAEzB,YAAY,GAAiB;AAC3B,EADkB,KAAA,OAAA,GAClB,KAAK,KAAK,cAAc,KAAK;;CAG/B,MAAM,gBAAgB;AACpB,QAAM,MAAA,GAA2B;;CAGnC,MAAM,cAAc;AAClB,QAAM,MAAA,GAA2B;;CAGnC,mBAAmB;AACjB,QAAA,GAA8B;;CAGhC,OAAA,IAA6B;AAE3B,EADA,MAAM,KAAK,KAAK,gBACX,MAAA,MACH,MAAA,IAA8B,IAC9B,KAAK,KAAK,iBAAiB,cAAc,MAAA,EAAsB,EAC/D,KAAK,KAAK,iBAAiB,cAAc,MAAA,EAA0B,EACnE,KAAK,KAAK,iBAAiB,SAAS,MAAA,EAAsB,EAC1D,KAAK,KAAK,iBAAiB,QAAQ,MAAA,EAA0B;;CAIjE,KAA0B;AAKxB,EAJA,MAAA,IAA8B,IAC9B,KAAK,KAAK,oBAAoB,cAAc,MAAA,EAAsB,EAClE,KAAK,KAAK,oBAAoB,cAAc,MAAA,EAA0B,EACtE,KAAK,KAAK,oBAAoB,SAAS,MAAA,EAAsB,EAC7D,KAAK,KAAK,oBAAoB,QAAQ,MAAA,EAA0B;;CAGlE,WAAyB;AAEvB,MADA,MAAA,GAAgC,EAC5B,KAAK,KAAK,oBAAoB;GAChC,IAAM,IAAQ,IAAI,MAAM,YAAY,EAAE,YAAY,IAAM,CAAC;AAEzD,GADA,EAAM,SAAS,KAAK,MACpB,KAAK,KAAK,mBAAmB,cAAc,EAAM;;;CAIrD,WAA6B;AAE3B,MADA,MAAA,GAAgC,EAC5B,KAAK,KAAK,oBAAoB;GAChC,IAAM,IAAQ,IAAI,MAAM,gBAAgB,EAAE,YAAY,IAAM,CAAC;AAE7D,GADA,EAAM,SAAS,KAAK,MACpB,KAAK,KAAK,mBAAmB,cAAc,EAAM;;;CAKrD,KAA4B;EAC1B,IAAM,IAAmB,KAAK,KAAK,aAAa,cAAc;AAC9D,EAAI,KAAoB,CAAC,KAAK,KAAK,uBACjC,KAAK,KAAK,qBAAqB,EAAoB,KAAK,KAAK,aAAa,CAAgB,CAAC,MACzF,MAAM,EAAG,OAAO,EACjB;EAIH,IAAM,IAAqB,KAAK,KAAK,aAAa,gBAAgB;AAClE,MAAI,KAAsB,CAAC,GAAkB;GAC3C,IAAM,IAAS,EAAoB,KAAK,KAAK,aAAa,CAAgB,CAAC,MACzE,MAAM,EAAG,OAAO,EACjB;AACD,GAAI,KAAU,EAAO,YAAY,WAC/B,KAAK,KAAK,qBAAqB"}

package/dist/internal/controllers/type-native-popover-trigger.controller.d.ts

@@ -0,0 +1,16 @@
+import { ReactiveElement, ReactiveController } from 'lit';
+export interface NativePopoverTrigger extends ReactiveElement {
+    disabled: boolean;
+    popoverTargetAction: 'show' | 'hide' | 'toggle';
+    popoverTargetElement: HTMLElement | null;
+    popovertarget: string;
+    anchor?: HTMLElement;
+}
+export declare function typeNativePopoverTrigger<T extends NativePopoverTrigger>(): ClassDecorator;
+export declare class TypeNativePopoverTriggerController<T extends NativePopoverTrigger> implements ReactiveController {
+    #private;
+    private host;
+    constructor(host: T);
+    hostConnected(): void;
+    hostDisconnected(): void;
+}

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

@@ -0,0 +1,25 @@
+import { getFlattenedDOMTree as e } from "../utils/dom.js";
+import { getHostAnchor as t } from "./type-native-popover.utils.js";
+//#region src/internal/controllers/type-native-popover-trigger.controller.ts
+function n() {
+	return (e) => e.addInitializer((e) => new r(e));
+}
+var r = class {
+	constructor(e) {
+		this.host = e, this.host.addController(this);
+	}
+	hostConnected() {
+		this.host.addEventListener("click", this.#e);
+	}
+	hostDisconnected() {
+		this.host.removeEventListener("click", this.#e);
+	}
+	#e = () => {
+		let n = this.host, r = this.host.popoverTargetElement;
+		!r && this.host.popovertarget && (r = e(this.host.getRootNode()).find((e) => e.id === this.host.popovertarget), this.host.popoverTargetElement = r ?? null), r?.anchor && (n = t(r)), r && !this.host.disabled && (this.host.popoverTargetAction === "hide" ? r.hidePopover() : this.host.popoverTargetAction === "show" ? r.showPopover({ source: n }) : r.togglePopover({ source: n }));
+	};
+};
+//#endregion
+export { r as TypeNativePopoverTriggerController, n as typeNativePopoverTrigger };
+
+//# sourceMappingURL=type-native-popover-trigger.controller.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"type-native-popover-trigger.controller.js","names":["#click"],"sources":["../../../src/internal/controllers/type-native-popover-trigger.controller.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ReactiveElement, ReactiveController } from 'lit';\nimport type { LegacyDecoratorTarget } from '../types/index.js';\nimport { getFlattenedDOMTree } from '../utils/dom.js';\nimport { getHostAnchor } from './type-native-popover.utils.js';\n\nexport interface NativePopoverTrigger extends ReactiveElement {\n  disabled: boolean;\n  popoverTargetAction: 'show' | 'hide' | 'toggle';\n  popoverTargetElement: HTMLElement | null;\n  popovertarget: string;\n  anchor?: HTMLElement;\n}\n\nexport function typeNativePopoverTrigger<T extends NativePopoverTrigger>(): ClassDecorator {\n  return (target: LegacyDecoratorTarget) =>\n    target.addInitializer!((instance: T) => new TypeNativePopoverTriggerController(instance));\n}\n\nexport class TypeNativePopoverTriggerController<T extends NativePopoverTrigger> implements ReactiveController {\n  constructor(private host: T) {\n    this.host.addController(this);\n  }\n\n  hostConnected() {\n    this.host.addEventListener('click', this.#click);\n  }\n\n  hostDisconnected() {\n    this.host.removeEventListener('click', this.#click);\n  }\n\n  #click = () => {\n    let source = this.host as HTMLElement;\n    let popoverTargetElement = this.host.popoverTargetElement;\n\n    // we can only do this on interaction as its too costly to do this on every getter or update of the popovertarget attribute, this diverges from the native behavior of the popovertarget attribute\n    if (!popoverTargetElement && this.host.popovertarget) {\n      popoverTargetElement = getFlattenedDOMTree(this.host.getRootNode()).find(e => e.id === this.host.popovertarget)!;\n      this.host.popoverTargetElement = popoverTargetElement ?? null;\n    }\n\n    // if popover has explicit anchor, use it as the source\n    if ((popoverTargetElement as NativePopoverTrigger)?.anchor) {\n      source = getHostAnchor(popoverTargetElement as NativePopoverTrigger);\n    }\n\n    if (popoverTargetElement && !this.host.disabled) {\n      if (this.host.popoverTargetAction === 'hide') {\n        popoverTargetElement.hidePopover();\n      } else if (this.host.popoverTargetAction === 'show') {\n        popoverTargetElement.showPopover({ source });\n      } else {\n        popoverTargetElement.togglePopover({ source });\n      }\n    }\n  };\n}\n"],"mappings":";;;AAgBA,SAAgB,IAA2E;AACzF,SAAQ,MACN,EAAO,gBAAiB,MAAgB,IAAI,EAAmC,EAAS,CAAC;;AAG7F,IAAa,IAAb,MAA8G;CAC5G,YAAY,GAAiB;AAC3B,EADkB,KAAA,OAAA,GAClB,KAAK,KAAK,cAAc,KAAK;;CAG/B,gBAAgB;AACd,OAAK,KAAK,iBAAiB,SAAS,MAAA,EAAY;;CAGlD,mBAAmB;AACjB,OAAK,KAAK,oBAAoB,SAAS,MAAA,EAAY;;CAGrD,WAAe;EACb,IAAI,IAAS,KAAK,MACd,IAAuB,KAAK,KAAK;AAarC,EAVI,CAAC,KAAwB,KAAK,KAAK,kBACrC,IAAuB,EAAoB,KAAK,KAAK,aAAa,CAAC,CAAC,MAAK,MAAK,EAAE,OAAO,KAAK,KAAK,cAAc,EAC/G,KAAK,KAAK,uBAAuB,KAAwB,OAItD,GAA+C,WAClD,IAAS,EAAc,EAA6C,GAGlE,KAAwB,CAAC,KAAK,KAAK,aACjC,KAAK,KAAK,wBAAwB,SACpC,EAAqB,aAAa,GACzB,KAAK,KAAK,wBAAwB,SAC3C,EAAqB,YAAY,EAAE,WAAQ,CAAC,GAE5C,EAAqB,cAAc,EAAE,WAAQ,CAAC"}

package/dist/internal/controllers/type-native-popover.controller.d.ts

@@ -0,0 +1,28 @@
+import { ReactiveController, ReactiveElement } from 'lit';
+import { PopoverType } from '../types/index.js';
+export interface NativePopover extends ReactiveElement {
+    anchor?: HTMLElement | string;
+    closeTimeout?: number;
+    popoverType?: PopoverType;
+    modal?: boolean;
+    popoverDismissible?: boolean;
+    _activeTrigger?: HTMLElement;
+    _internals?: ElementInternals;
+    /** @deprecated */
+    trigger?: HTMLElement | string;
+    /** @deprecated */
+    openDelay?: number;
+    /** @deprecated */
+    behaviorTrigger?: boolean;
+}
+/**
+ * https://open-ui.org/components/popup.research.explainer
+ */
+export declare class TypeNativePopoverController<T extends NativePopover> implements ReactiveController {
+    #private;
+    private host;
+    constructor(host: T);
+    hostConnected(): Promise<void>;
+    hostUpdated(): Promise<void>;
+    hostDisconnected(): void;
+}

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

@@ -0,0 +1,89 @@
+import { focusElement as e } from "../utils/focus.js";
+import { clickOutsideElementBounds as t, generateId as n, getAttributeListChanges as r } from "../utils/dom.js";
+import { attachInternals as i } from "../utils/a11y.js";
+import { getHostAnchor as a, getHostTrigger as o, hasOpenPopover as s } from "./type-native-popover.utils.js";
+//#region src/internal/controllers/type-native-popover.controller.ts
+var c = class {
+	get #e() {
+		let e = this.host.getRootNode(), t = Array.from(e.querySelectorAll(`[popovertarget="${CSS.escape ? CSS.escape(this.host.id) : this.host.id}"]`)), n = Array.from(e.querySelectorAll(`[commandfor="${CSS.escape ? CSS.escape(this.host.id) : this.host.id}"]`)), r = Array.from(e.querySelectorAll(`[interestfor="${CSS.escape ? CSS.escape(this.host.id) : this.host.id}"]`));
+		return [
+			...t,
+			...n,
+			...r
+		];
+	}
+	constructor(e) {
+		this.host = e, this.host.addController(this);
+		let t = this.host.showPopover;
+		this.host.showPopover = (e) => {
+			if (this.host.isConnected) {
+				let n = e?.source ?? null;
+				n ||= this.host.anchor ? a(this.host) : this.host.trigger ? o(this.host, this.host.trigger) : globalThis.document.activeElement, t.call(this.host, { source: n });
+			}
+		};
+	}
+	async hostConnected() {
+		i(this.host), this.host.popover = this.host.popoverType ?? null, await this.host.updateComplete, this.host.setAttribute("nve-popover", ""), this.#l(), this.#c(), this.#o(), 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), this.host.inert = this.host.matches(":not(:popover-open)"), this.host.modal && this.#u(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(), 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.#i();
+				t ? this.#t = setTimeout(() => {
+					this.host.isConnected && this.host.showPopover({ source: e.source });
+				}, t) : this.host.showPopover({ source: e.source });
+			}
+		})), this.host.addEventListener("loseinterest", ((e) => {
+			e.source?.localName.includes("-") && this.host.hidePopover(), this.#t &&= (clearTimeout(this.#t), null);
+		}));
+	}
+	#t = null;
+	#n = [];
+	#r = null;
+	async hostUpdated() {
+		this.host.popover = this.host.popoverType ?? null, this.#l();
+	}
+	hostDisconnected() {
+		this.#n.forEach((e) => e.disconnect()), this.#t &&= (clearTimeout(this.#t), null);
+	}
+	#i() {
+		let e = getComputedStyle(this.host).interestDelayStart;
+		if (!e) return 0;
+		let t = parseFloat(e);
+		return e.endsWith("ms") ? t : t * 1e3;
+	}
+	#a = !1;
+	#o() {
+		this.host.addEventListener("pointerdown", (e) => {
+			this.host.modal && this.host.matches(":popover-open") && (this.#a = t(e, this.host));
+		}), this.host.addEventListener("pointerup", (e) => {
+			this.#a && this.host.popoverDismissible && this.host.modal && this.host.matches(":popover-open") && !s(this.host) && t(e, this.host) && this.host.hidePopover();
+		});
+	}
+	get #s() {
+		return this.host.trigger ? o(this.host, this.host.trigger) : null;
+	}
+	async #c() {
+		await new Promise((e) => requestAnimationFrame(e)), this.#n.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());
+	}
+	#l() {
+		let e = this.#s;
+		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);
+	}
+	#u(t, n) {
+		t ? this.host.getRootNode().activeElement !== this.host && !this.host.shadowRoot.activeElement && e(this.host) : e(n);
+	}
+};
+//#endregion
+export { c as TypeNativePopoverController };
+
+//# sourceMappingURL=type-native-popover.controller.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"type-native-popover.controller.js","names":["#nativeTriggers","#updateLegacyTriggers","#setupLegacyTriggers","#setupModalLightDismiss","#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  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      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      }\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\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.d.ts

@@ -0,0 +1,7 @@
+export declare function associateAnchor(host: HTMLElement, anchor: HTMLElement): void;
+export declare function getHostTrigger(element: HTMLElement, trigger: HTMLElement | string): HTMLButtonElement;
+export declare function getHostAnchor(host: HTMLElement & {
+    anchor?: HTMLElement | string;
+    _activeTrigger?: HTMLElement;
+}): HTMLElement;
+export declare function hasOpenPopover(host: HTMLElement): boolean;

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

@@ -0,0 +1,22 @@
+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";
+//#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 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;
+	} 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;
+}
+//#endregion
+export { i as getHostAnchor, r as getHostTrigger, a as hasOpenPopover };
+
+//# sourceMappingURL=type-native-popover.utils.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"type-native-popover.utils.js","names":[],"sources":["../../../src/internal/controllers/type-native-popover.utils.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { LogService } from '../services/log.service.js';\nimport { getIdMatchNotFoundWarning } from '../utils/audit-logs.js';\nimport { generateId, getFlattenedDOMTree, getAnchorNames, appendAnchorName } from '../utils/dom.js';\n\nexport function associateAnchor(host: HTMLElement, anchor: HTMLElement) {\n  const anchorNames = getAnchorNames(anchor);\n  let anchorId = anchorNames.find(name => name.startsWith('--_'));\n  if (!anchorId) {\n    anchorId = `--${anchor.id && !anchor.id.includes(':') ? `_${anchor.id}` : generateId()}`;\n    appendAnchorName(anchor, anchorId);\n  }\n  host.style.positionAnchor = anchorId;\n}\n\nexport function getHostTrigger(element: HTMLElement, trigger: HTMLElement | string) {\n  if (typeof trigger === 'string') {\n    return (\n      (getFlattenedDOMTree(element.parentNode as HTMLElement)\n        .filter(el => el?.id !== '')\n        .find(el => el.id === trigger) as HTMLButtonElement) ?? globalThis.document.body\n    );\n  } else {\n    return trigger as HTMLButtonElement;\n  }\n}\n\nexport function getHostAnchor(host: HTMLElement & { anchor?: HTMLElement | string; _activeTrigger?: HTMLElement }) {\n  const anchor = host.anchor ?? host._activeTrigger;\n\n  if (typeof anchor === 'string' && anchor?.length) {\n    const match = getFlattenedDOMTree(host.parentNode as HTMLElement).find(el => el.id === anchor);\n\n    if (!match) {\n      LogService.warn(getIdMatchNotFoundWarning(anchor));\n    }\n\n    return match ?? globalThis.document.body;\n  } else if (anchor && anchor !== globalThis.document.body) {\n    return anchor as HTMLElement;\n  } else {\n    return globalThis.document.body;\n  }\n}\n\nexport function hasOpenPopover(host: HTMLElement) {\n  return !!getFlattenedDOMTree(host).filter(e => e.popover && e.matches(':popover-open')).length;\n}\n"],"mappings":";;;;AAiBA,SAAgB,EAAe,GAAsB,GAA+B;AAQhF,QAPE,OAAO,KAAY,WAElB,EAAoB,EAAQ,WAA0B,CACpD,QAAO,MAAM,GAAI,OAAO,GAAG,CAC3B,MAAK,MAAM,EAAG,OAAO,EAAQ,IAA0B,WAAW,SAAS,OAGzE;;AAIX,SAAgB,EAAc,GAAqF;CACjH,IAAM,IAAS,EAAK,UAAU,EAAK;AAEnC,KAAI,OAAO,KAAW,YAAY,GAAQ,QAAQ;EAChD,IAAM,IAAQ,EAAoB,EAAK,WAA0B,CAAC,MAAK,MAAM,EAAG,OAAO,EAAO;AAM9F,SAJK,KACH,EAAW,KAAK,EAA0B,EAAO,CAAC,EAG7C,KAAS,WAAW,SAAS;YAC3B,KAAU,MAAW,WAAW,SAAS,KAClD,QAAO;KAEP,QAAO,WAAW,SAAS;;AAI/B,SAAgB,EAAe,GAAmB;AAChD,QAAO,CAAC,CAAC,EAAoB,EAAK,CAAC,QAAO,MAAK,EAAE,WAAW,EAAE,QAAQ,gBAAgB,CAAC,CAAC"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"type-popover.controller.examples.js","names":[],"sources":["../../../src/internal/controllers/type-popover.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 { property } from 'lit/decorators/property.js';\nimport { query } from 'lit/decorators/query.js';\nimport type { PopoverPosition, PopoverAlign, PopoverType } from '@nvidia-elements/core/internal';\nimport { popoverStyles, TypeNativePopoverController, useStyles } 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';\nimport '@nvidia-elements/core/dropdown/define.js';\n\nexport default {\n  title: 'Internal/Controllers'\n}\n\nclass PopoverDemo extends LitElement {\n  @property({ type: String }) anchor: string | HTMLElement;\n\n  @property({ type: String }) trigger: string | HTMLElement;\n\n  @property({ type: String, reflect: true }) position: PopoverPosition = 'top';\n\n  @property({ type: String, reflect: true }) alignment: PopoverAlign = 'center';\n\n  @property({ type: Boolean }) arrow = true;\n\n  @query('.arrow') popoverArrow: HTMLElement;\n\n  static styles = useStyles([popoverStyles, css`\n    :host {\n      --nve-sys-layer-popover-arrow-padding: 6px;\n      --nve-sys-layer-popover-arrow-offset: 2px;\n      --nve-sys-layer-popover-offset: 2px;\n    }\n\n    [internal-host] {\n      padding: 18px;\n      min-width: 80px;\n      text-align: center;\n      background: #fff;\n      color: #2d2d2d;\n    }\n\n    :host::backdrop {\n      background: none;\n    }\n\n    .arrow {\n      width: 12px;\n      height: 12px;\n      background: #fff;\n      position: absolute;\n    }\n  `]);\n\n  /** @private */\n  readonly popoverType: PopoverType = 'auto';\n\n  protected typeNativePopoverController = new TypeNativePopoverController<PopoverDemo>(this);\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  render() {\n    return html`\n    <div internal-host>\n      <div id=\"content\">\n        <slot></slot>\n      </div>\n    </div>\n    ${this.arrow ? html`<div class=\"arrow\"></div>` : ''}\n  `;\n  }\n}\ncustomElements.get('ui-popover') || customElements.define('ui-popover', PopoverDemo);\n\n/**\n * @summary Basic popover toggled by a button using the native popovertarget API.\n * @tags test-case\n */\nexport const Default = {\n  render: () => html`\n    <style>\n      #root-inner {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        flex-direction: column;\n        width: 100%;\n        height: 100vh;\n      }\n    </style>\n    <ui-popover id=\"type-popover\">popover</ui-popover>\n    <nve-button popovertarget=\"type-popover\">toggle</nve-button>\n  `\n};\n\n/**\n * @summary Popover positioning and alignment options across all anchor and viewport placements.\n * @tags test-case\n */\nexport const Alignment = {\n  render: () => html`\n  <nve-card id=\"card\" style=\"width: 450px; height: 300px;\"></nve-card>\n  <ui-popover anchor=\"card\" popover-type=\"manual\" position=\"top\" alignment=\"start\">top start</ui-popover>\n  <ui-popover anchor=\"card\" popover-type=\"manual\" position=\"top\">top center</ui-popover>\n  <ui-popover anchor=\"card\" popover-type=\"manual\" position=\"top\" alignment=\"end\">top end</ui-popover>\n  <ui-popover anchor=\"card\" popover-type=\"manual\" position=\"right\" alignment=\"start\">right start</ui-popover>\n  <ui-popover anchor=\"card\" popover-type=\"manual\" position=\"right\">right center</ui-popover>\n  <ui-popover anchor=\"card\" popover-type=\"manual\" position=\"right\" alignment=\"end\">right end</ui-popover>\n  <ui-popover anchor=\"card\" popover-type=\"manual\" position=\"bottom\" alignment=\"start\">bottom start</ui-popover>\n  <ui-popover anchor=\"card\" popover-type=\"manual\" position=\"bottom\">bottom center</ui-popover>\n  <ui-popover anchor=\"card\" popover-type=\"manual\" position=\"bottom\" alignment=\"end\">bottom end</ui-popover>\n  <ui-popover anchor=\"card\" popover-type=\"manual\" position=\"left\" alignment=\"start\">left start</ui-popover>\n  <ui-popover anchor=\"card\" popover-type=\"manual\" position=\"left\">left center</ui-popover>\n  <ui-popover anchor=\"card\" popover-type=\"manual\" position=\"left\" alignment=\"end\">left end</ui-popover>\n\n  <ui-popover popover-type=\"manual\" position=\"center\">center</ui-popover>\n  <ui-popover popover-type=\"manual\" position=\"top\" alignment=\"start\">top start</ui-popover>\n  <ui-popover popover-type=\"manual\" position=\"top\">top center</ui-popover>\n  <ui-popover popover-type=\"manual\" position=\"top\" alignment=\"end\">top end</ui-popover>\n  <ui-popover popover-type=\"manual\" position=\"right\" alignment=\"start\">right start</ui-popover>\n  <ui-popover popover-type=\"manual\" position=\"right\">right center</ui-popover>\n  <ui-popover popover-type=\"manual\" position=\"right\" alignment=\"end\">right end</ui-popover>\n  <ui-popover popover-type=\"manual\" position=\"bottom\" alignment=\"start\">bottom start</ui-popover>\n  <ui-popover popover-type=\"manual\" position=\"bottom\">bottom center</ui-popover>\n  <ui-popover popover-type=\"manual\" position=\"bottom\" alignment=\"end\">bottom end</ui-popover>\n  <ui-popover popover-type=\"manual\" position=\"left\" alignment=\"start\">left start</ui-popover>\n  <ui-popover popover-type=\"manual\" position=\"left\">left center</ui-popover>\n  <ui-popover popover-type=\"manual\" position=\"left\" alignment=\"end\">left end</ui-popover>\n  `\n}\n\nclass MyElement extends LitElement {\n  render() {\n    return html`\n      <div style=\"width: 250px; height: 100px; resize: both; overflow: scroll; border: 1px solid white;\">\n        <nve-dropdown id=\"my-dropdown\">dropdown content</nve-dropdown>\n        <nve-icon-button id=\"my-dropdown-anchor\" popovertarget=\"my-dropdown\" icon-name=\"refresh\"></nve-icon-button>\n      </div>\n    `;\n  }\n}\n\ncustomElements.get('my-element') || customElements.define('my-element', MyElement);"],"mappings":";AAGA,IAAA,IAAc"}

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

@@ -0,0 +1,27 @@
+{
+  "entrypoint": "@nvidia-elements/core/internal/controllers/type-popover.controller.examples.json",
+  "items": [
+    {
+      "id": "core-internal-controllers-type-popover.controller_default",
+      "name": "Default",
+      "template": "<style>\n  #root-inner {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-direction: column;\n    width: 100%;\n    height: 100vh;\n  }\n</style>\n<ui-popover id=\"type-popover\">popover</ui-popover>\n<nve-button popovertarget=\"type-popover\">toggle</nve-button>\n",
+      "summary": "Basic popover toggled by a button using the native popovertarget API.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "core-internal-controllers-type-popover.controller_alignment",
+      "name": "Alignment",
+      "template": "<nve-card id=\"card\" style=\"width: 450px; height: 300px\"></nve-card>\n<ui-popover anchor=\"card\" popover-type=\"manual\" position=\"top\" alignment=\"start\">top start</ui-popover>\n<ui-popover anchor=\"card\" popover-type=\"manual\" position=\"top\">top center</ui-popover>\n<ui-popover anchor=\"card\" popover-type=\"manual\" position=\"top\" alignment=\"end\">top end</ui-popover>\n<ui-popover anchor=\"card\" popover-type=\"manual\" position=\"right\" alignment=\"start\">right start</ui-popover>\n<ui-popover anchor=\"card\" popover-type=\"manual\" position=\"right\">right center</ui-popover>\n<ui-popover anchor=\"card\" popover-type=\"manual\" position=\"right\" alignment=\"end\">right end</ui-popover>\n<ui-popover anchor=\"card\" popover-type=\"manual\" position=\"bottom\" alignment=\"start\">bottom start</ui-popover>\n<ui-popover anchor=\"card\" popover-type=\"manual\" position=\"bottom\">bottom center</ui-popover>\n<ui-popover anchor=\"card\" popover-type=\"manual\" position=\"bottom\" alignment=\"end\">bottom end</ui-popover>\n<ui-popover anchor=\"card\" popover-type=\"manual\" position=\"left\" alignment=\"start\">left start</ui-popover>\n<ui-popover anchor=\"card\" popover-type=\"manual\" position=\"left\">left center</ui-popover>\n<ui-popover anchor=\"card\" popover-type=\"manual\" position=\"left\" alignment=\"end\">left end</ui-popover>\n<ui-popover popover-type=\"manual\" position=\"center\">center</ui-popover>\n<ui-popover popover-type=\"manual\" position=\"top\" alignment=\"start\">top start</ui-popover>\n<ui-popover popover-type=\"manual\" position=\"top\">top center</ui-popover>\n<ui-popover popover-type=\"manual\" position=\"top\" alignment=\"end\">top end</ui-popover>\n<ui-popover popover-type=\"manual\" position=\"right\" alignment=\"start\">right start</ui-popover>\n<ui-popover popover-type=\"manual\" position=\"right\">right center</ui-popover>\n<ui-popover popover-type=\"manual\" position=\"right\" alignment=\"end\">right end</ui-popover>\n<ui-popover popover-type=\"manual\" position=\"bottom\" alignment=\"start\">bottom start</ui-popover>\n<ui-popover popover-type=\"manual\" position=\"bottom\">bottom center</ui-popover>\n<ui-popover popover-type=\"manual\" position=\"bottom\" alignment=\"end\">bottom end</ui-popover>\n<ui-popover popover-type=\"manual\" position=\"left\" alignment=\"start\">left start</ui-popover>\n<ui-popover popover-type=\"manual\" position=\"left\">left center</ui-popover>\n<ui-popover popover-type=\"manual\" position=\"left\" alignment=\"end\">left end</ui-popover>\n",
+      "summary": "Popover positioning and alignment options across all anchor and viewport placements.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    }
+  ]
+}

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

@@ -0,0 +1,23 @@
+import { ReactiveController, ReactiveElement } from 'lit';
+export type TypeSelectable = ReactiveElement & {
+    selected?: boolean;
+    behaviorSelect?: boolean;
+    selectable?: 'single' | 'multi';
+    _internals?: ElementInternals;
+};
+/**
+ * Controller for enabling selectable behavior for elements.
+ * @event select - Dispatched when the selectable element selects.
+ * @property selected - selected state
+ * @property behaviorSelect - determines if stateful auto behavior should enable
+ */
+export declare class TypeSelectableController<T extends TypeSelectable> implements ReactiveController {
+    #private;
+    private host;
+    constructor(host: T);
+    hostConnected(): void;
+    hostUpdated(): void;
+    select(): void;
+    deselect(): void;
+    toggle(): void;
+}

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

@@ -0,0 +1,37 @@
+import { attachInternals as e } from "../utils/a11y.js";
+//#region src/internal/controllers/type-selectable.controller.ts
+var t = class {
+	#e = !1;
+	constructor(e) {
+		this.host = e, this.host.addController(this);
+	}
+	hostConnected() {
+		e(this.host), this.host.addEventListener("command", ((e) => {
+			this.#e = !0, e.command === "--toggle-select" && this.toggle(), e.command === "--select" && this.select(), e.command === "--deselect" && (this.host.selected = !1), this.#e = !1;
+		}));
+	}
+	hostUpdated() {
+		this.host.selectable === "single" ? this.host._internals.states.add("selectable-single") : this.host._internals.states.delete("selectable-single"), this.host.selectable === "multi" ? this.host._internals.states.add("selectable-multi") : this.host._internals.states.delete("selectable-multi");
+	}
+	select() {
+		(this.host.behaviorSelect || this.#e) && (this.host.selected = !0), this.host.dispatchEvent(new CustomEvent("select", {
+			bubbles: !0,
+			composed: !0,
+			detail: this.host
+		}));
+	}
+	deselect() {
+		(this.host.behaviorSelect || this.#e) && (this.host.selected = !1), this.host.dispatchEvent(new CustomEvent("select", {
+			bubbles: !0,
+			composed: !0,
+			detail: this.host
+		}));
+	}
+	toggle() {
+		this.host.selected ? this.deselect() : this.select();
+	}
+};
+//#endregion
+export { t as TypeSelectableController };
+
+//# sourceMappingURL=type-selectable.controller.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"type-selectable.controller.js","names":["#commandTriggered"],"sources":["../../../src/internal/controllers/type-selectable.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 { attachInternals } from '../utils/a11y.js';\n\nexport type TypeSelectable = ReactiveElement & {\n  selected?: boolean;\n  behaviorSelect?: boolean;\n  selectable?: 'single' | 'multi';\n  _internals?: ElementInternals;\n};\n\n/**\n * Controller for enabling selectable behavior for elements.\n * @event select - Dispatched when the selectable element selects.\n * @property selected - selected state\n * @property behaviorSelect - determines if stateful auto behavior should enable\n */\nexport class TypeSelectableController<T extends TypeSelectable> implements ReactiveController {\n  #commandTriggered = false;\n  constructor(private host: T) {\n    this.host.addController(this);\n  }\n\n  hostConnected() {\n    attachInternals(this.host);\n\n    this.host.addEventListener('command', ((e: CommandEvent) => {\n      this.#commandTriggered = true;\n      if (e.command === '--toggle-select') {\n        this.toggle();\n      }\n\n      if (e.command === '--select') {\n        this.select();\n      }\n\n      if (e.command === '--deselect') {\n        this.host.selected = false;\n      }\n      this.#commandTriggered = false;\n    }) as EventListener);\n  }\n\n  hostUpdated() {\n    this.host.selectable === 'single'\n      ? this.host._internals!.states.add('selectable-single')\n      : this.host._internals!.states.delete('selectable-single');\n    this.host.selectable === 'multi'\n      ? this.host._internals!.states.add('selectable-multi')\n      : this.host._internals!.states.delete('selectable-multi');\n  }\n\n  select() {\n    if (this.host.behaviorSelect || this.#commandTriggered) {\n      this.host.selected = true;\n    }\n\n    this.host.dispatchEvent(new CustomEvent('select', { bubbles: true, composed: true, detail: this.host }));\n  }\n\n  deselect() {\n    if (this.host.behaviorSelect || this.#commandTriggered) {\n      this.host.selected = false;\n    }\n\n    this.host.dispatchEvent(new CustomEvent('select', { bubbles: true, composed: true, detail: this.host }));\n  }\n\n  toggle() {\n    if (this.host.selected) {\n      this.deselect();\n    } else {\n      this.select();\n    }\n  }\n}\n"],"mappings":";;AAmBA,IAAa,IAAb,MAA8F;CAC5F,KAAoB;CACpB,YAAY,GAAiB;AAC3B,EADkB,KAAA,OAAA,GAClB,KAAK,KAAK,cAAc,KAAK;;CAG/B,gBAAgB;AAGd,EAFA,EAAgB,KAAK,KAAK,EAE1B,KAAK,KAAK,iBAAiB,aAAa,MAAoB;AAa1D,GAZA,MAAA,IAAyB,IACrB,EAAE,YAAY,qBAChB,KAAK,QAAQ,EAGX,EAAE,YAAY,cAChB,KAAK,QAAQ,EAGX,EAAE,YAAY,iBAChB,KAAK,KAAK,WAAW,KAEvB,MAAA,IAAyB;KACP;;CAGtB,cAAc;AAIZ,EAHA,KAAK,KAAK,eAAe,WACrB,KAAK,KAAK,WAAY,OAAO,IAAI,oBAAoB,GACrD,KAAK,KAAK,WAAY,OAAO,OAAO,oBAAoB,EAC5D,KAAK,KAAK,eAAe,UACrB,KAAK,KAAK,WAAY,OAAO,IAAI,mBAAmB,GACpD,KAAK,KAAK,WAAY,OAAO,OAAO,mBAAmB;;CAG7D,SAAS;AAKP,GAJI,KAAK,KAAK,kBAAkB,MAAA,OAC9B,KAAK,KAAK,WAAW,KAGvB,KAAK,KAAK,cAAc,IAAI,YAAY,UAAU;GAAE,SAAS;GAAM,UAAU;GAAM,QAAQ,KAAK;GAAM,CAAC,CAAC;;CAG1G,WAAW;AAKT,GAJI,KAAK,KAAK,kBAAkB,MAAA,OAC9B,KAAK,KAAK,WAAW,KAGvB,KAAK,KAAK,cAAc,IAAI,YAAY,UAAU;GAAE,SAAS;GAAM,UAAU;GAAM,QAAQ,KAAK;GAAM,CAAC,CAAC;;CAG1G,SAAS;AACP,EAAI,KAAK,KAAK,WACZ,KAAK,UAAU,GAEf,KAAK,QAAQ"}

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

@@ -0,0 +1,24 @@
+import { ReactiveController, ReactiveElement, RenderOptions, TemplateResult } from 'lit';
+type UnprotectedLitElement = ReactiveElement & {
+    update: () => void;
+    render: () => TemplateResult;
+    renderOptions: RenderOptions;
+    _internals?: ElementInternals;
+};
+/**
+ * Catch and manage hydration related fallbacks for SSR
+ */
+export declare function typeSSR<T extends UnprotectedLitElement>(options?: {
+    log?: boolean;
+}): ClassDecorator;
+export declare class TypeSSRController<T extends ReactiveElement> implements ReactiveController {
+    #private;
+    private host;
+    private options;
+    didSSR: boolean;
+    constructor(host: T & UnprotectedLitElement, options: {
+        log?: boolean;
+    });
+    hostUpdated(): void;
+}
+export {};

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

@@ -0,0 +1,38 @@
+import { getSSRMismatchWarning as e } from "../utils/audit-logs.js";
+import { getEnv as t } from "../services/global.utils.js";
+import { LogService as n } from "../services/log.service.js";
+import { render as r } from "lit";
+//#region src/internal/controllers/type-ssr.controller.ts
+function i(e = { log: !0 }) {
+	return (t) => t.addInitializer((t) => new a(t, e));
+}
+var a = class {
+	constructor(i, a) {
+		if (this.host = i, this.options = a, this.didSSR = !!this.host.shadowRoot, this.host.addController(this), this.didSSR) {
+			let a = this.options, o = i.update;
+			Object.defineProperty(i, "update", { value: function() {
+				try {
+					o.call(i);
+				} catch {
+					let o = i.renderRoot;
+					o.innerHTML = o.innerHTML.split("<!--lit-part ")[0], r(i.render(), o, i.renderOptions), t() !== "production" && a.log && n.warn(e(i.localName));
+				}
+				return o;
+			} });
+		}
+	}
+	#e = !0;
+	hostUpdated() {
+		this.didSSR && this.#e && (this.#e = !1, this.host.shadowRoot?.querySelectorAll("slot").forEach((e) => {
+			e.dispatchEvent(new Event("slotchange", {
+				bubbles: !0,
+				composed: !1,
+				cancelable: !1
+			}));
+		}), this.host._internals?.role && this.host.setAttribute("role", this.host._internals.role));
+	}
+};
+//#endregion
+export { a as TypeSSRController, i as typeSSR };
+
+//# sourceMappingURL=type-ssr.controller.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"type-ssr.controller.js","names":["#firstUpdate"],"sources":["../../../src/internal/controllers/type-ssr.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, RenderOptions, TemplateResult } from 'lit';\nimport type { LegacyDecoratorTarget } from '../types/index.js';\nimport { render } from 'lit';\nimport { LogService } from '../services/log.service.js';\nimport { getSSRMismatchWarning } from '../utils/audit-logs.js';\nimport { getEnv } from '../services/global.utils.js';\n\ntype UnprotectedLitElement = ReactiveElement & {\n  update: () => void;\n  render: () => TemplateResult;\n  renderOptions: RenderOptions;\n  _internals?: ElementInternals;\n};\n\n/**\n * Catch and manage hydration related fallbacks for SSR\n */\nexport function typeSSR<T extends UnprotectedLitElement>(options: { log?: boolean } = { log: true }): ClassDecorator {\n  return (target: LegacyDecoratorTarget) =>\n    target.addInitializer!(\n      (instance: T & { _internals: ElementInternals }) => new TypeSSRController(instance, options)\n    );\n}\n\nexport class TypeSSRController<T extends ReactiveElement> implements ReactiveController {\n  // https://www.konnorrogers.com/posts/2024/running-lit-ssr-in-web-awesome#hydration-errors\n  didSSR = Boolean(this.host.shadowRoot);\n\n  constructor(\n    private host: T & UnprotectedLitElement,\n    private options: { log?: boolean }\n  ) {\n    this.host.addController(this);\n\n    // https://github.com/lit/lit/issues/1434#issuecomment-1598332000\n    if (this.didSSR) {\n      const options = this.options;\n      const updateOriginal = host.update;\n      Object.defineProperty(host, 'update', {\n        value: function () {\n          try {\n            updateOriginal.call(host);\n            // eslint-disable-next-line @typescript-eslint/no-unused-vars\n          } catch (_) {\n            const renderRoot = host.renderRoot as HTMLElement;\n            renderRoot.innerHTML = renderRoot.innerHTML.split('<!--lit-part ')[0]!;\n            render(host.render(), renderRoot, host.renderOptions);\n\n            if (getEnv() !== 'production' && options.log) {\n              LogService.warn(getSSRMismatchWarning(host.localName));\n            }\n          }\n          return updateOriginal;\n        }\n      });\n    }\n  }\n\n  #firstUpdate = true;\n  hostUpdated() {\n    // https://github.com/lit/lit/discussions/4697\n    // https://github.com/w3c/csswg-drafts/issues/6867#issuecomment-1599444407\n    if (this.didSSR && this.#firstUpdate) {\n      this.#firstUpdate = false;\n      this.host.shadowRoot?.querySelectorAll('slot').forEach(slotElement => {\n        slotElement.dispatchEvent(new Event('slotchange', { bubbles: true, composed: false, cancelable: false }));\n      });\n\n      // if SSR reflect role attribute to host\n      if (this.host._internals?.role) {\n        this.host.setAttribute('role', this.host._internals.role);\n      }\n    }\n  }\n}\n"],"mappings":";;;;;AAoBA,SAAgB,EAAyC,IAA6B,EAAE,KAAK,IAAM,EAAkB;AACnH,SAAQ,MACN,EAAO,gBACJ,MAAmD,IAAI,EAAkB,GAAU,EAAQ,CAC7F;;AAGL,IAAa,IAAb,MAAwF;CAItF,YACE,GACA,GACA;AAIA,MANQ,KAAA,OAAA,GACA,KAAA,UAAA,iBAJD,EAAQ,KAAK,KAAK,YAMzB,KAAK,KAAK,cAAc,KAAK,EAGzB,KAAK,QAAQ;GACf,IAAM,IAAU,KAAK,SACf,IAAiB,EAAK;AAC5B,UAAO,eAAe,GAAM,UAAU,EACpC,OAAO,WAAY;AACjB,QAAI;AACF,OAAe,KAAK,EAAK;YAEf;KACV,IAAM,IAAa,EAAK;AAIxB,KAHA,EAAW,YAAY,EAAW,UAAU,MAAM,gBAAgB,CAAC,IACnE,EAAO,EAAK,QAAQ,EAAE,GAAY,EAAK,cAAc,EAEjD,GAAQ,KAAK,gBAAgB,EAAQ,OACvC,EAAW,KAAK,EAAsB,EAAK,UAAU,CAAC;;AAG1D,WAAO;MAEV,CAAC;;;CAIN,KAAe;CACf,cAAc;AAGZ,EAAI,KAAK,UAAU,MAAA,MACjB,MAAA,IAAoB,IACpB,KAAK,KAAK,YAAY,iBAAiB,OAAO,CAAC,SAAQ,MAAe;AACpE,KAAY,cAAc,IAAI,MAAM,cAAc;IAAE,SAAS;IAAM,UAAU;IAAO,YAAY;IAAO,CAAC,CAAC;IACzG,EAGE,KAAK,KAAK,YAAY,QACxB,KAAK,KAAK,aAAa,QAAQ,KAAK,KAAK,WAAW,KAAK"}

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

@@ -0,0 +1,22 @@
+import { ReactiveController, ReactiveElement } from 'lit';
+/**
+ * Adds Form submit support for interactive custom elements.
+ * https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit_event
+ */
+export declare function typeSubmit<T extends Submit>(): ClassDecorator;
+export type Submit = ReactiveElement & HTMLElement & {
+    name: string;
+    value: string;
+    disabled: boolean;
+    type: 'button' | 'submit' | 'reset';
+    readonly: boolean;
+    form?: HTMLFormElement | null;
+    _internals: ElementInternals;
+};
+export declare class TypeSubmitController<T extends Submit> implements ReactiveController {
+    #private;
+    private host;
+    constructor(host: T);
+    hostUpdated(): Promise<void>;
+    hostDisconnected(): void;
+}