@nvidia-elements/core 2.6.1 → 2.7.1

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

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

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

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

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

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

package/dist/index.js

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

package/dist/input/input-group2.js

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

package/dist/input/input2.js

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

package/dist/internal/controllers/gesture.controller.d.ts

@@ -0,0 +1,65 @@
+import type { ReactiveController, ReactiveControllerHost } from 'lit';
+export interface GestureCapabilities {
+    readonly drag: boolean;
+    readonly pan: boolean;
+    readonly pinch: boolean;
+    readonly wheel: boolean;
+}
+interface PointerMovementGesture {
+    readonly event: PointerEvent;
+    readonly movementX: number;
+    readonly movementY: number;
+}
+export type Gesture<TPinchContext> = (PointerMovementGesture & {
+    readonly kind: 'drag';
+}) | (PointerMovementGesture & {
+    readonly kind: 'pan';
+}) | {
+    readonly context: TPinchContext;
+    readonly event: PointerEvent;
+    readonly kind: 'pinch';
+    readonly scale: number;
+} | {
+    readonly deltaPixels: number;
+    readonly event: WheelEvent;
+    readonly kind: 'wheel';
+};
+export type UnhandledPointerInput = {
+    readonly event: PointerEvent;
+    readonly kind: 'click';
+} | {
+    readonly event: PointerEvent;
+    readonly kind: 'lostpointercapture';
+} | {
+    readonly event: PointerEvent;
+    readonly kind: 'pointercancel';
+} | {
+    readonly event: PointerEvent;
+    readonly kind: 'pointerdown';
+} | {
+    readonly event: PointerEvent;
+    readonly kind: 'pointermove';
+} | {
+    readonly event: PointerEvent;
+    readonly kind: 'pointerup';
+};
+export interface GestureControllerOptions<TPinchContext = undefined> {
+    /** Creates a snapshot of caller state when a pinch begins. Omit this field to disable pinch recognition. */
+    readonly createPinchContext?: () => TPinchContext;
+    /** Returns the gesture kinds that the controller can recognize for the current input event. */
+    readonly getCapabilities: () => GestureCapabilities;
+    /** Updates caller state before the controller reads capabilities for a nonignored input event. */
+    readonly prepare?: () => void;
+    /** Returns whether the controller should skip an input event before preparing or recognizing it. */
+    readonly shouldIgnore?: (event: Event) => boolean;
+}
+type GestureHost = EventTarget & ReactiveControllerHost;
+/** Recognizes drag, pan, pinch, and wheel input on a dynamically assigned target. */
+export declare class GestureController<TPinchContext = undefined> implements ReactiveController {
+    #private;
+    constructor(host: GestureHost, options: GestureControllerOptions<TPinchContext>);
+    set target(target: HTMLElement | undefined);
+    hostConnected(): void;
+    hostDisconnected(): void;
+}
+export {};

package/dist/internal/controllers/gesture.controller.examples.js

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

package/dist/internal/controllers/gesture.controller.examples.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gesture.controller.examples.js","names":["#gestureController"],"sources":["../../../src/internal/controllers/gesture.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 { GestureController } from '@nvidia-elements/core/internal';\n\nexport default {\n  title: 'Internal/Controllers'\n};\n\nclass GestureDemoElement extends LitElement {\n  readonly #gestureController = new GestureController(this, {\n    getCapabilities: () => ({ drag: true, pan: false, pinch: false, wheel: false })\n  });\n\n  static styles = css`\n    :host {\n      cursor: grab;\n      display: grid;\n      height: 64px;\n      place-items: center;\n      width: 64px;\n    }\n\n    :host([data-active]) {\n      cursor: grabbing;\n    }\n  `;\n\n  constructor() {\n    super();\n    this.#gestureController.target = this;\n  }\n\n  render() {\n    return html`drag`;\n  }\n}\n\nif (!customElements.get('gesture-controller-demo-element')) {\n  customElements.define('gesture-controller-demo-element', GestureDemoElement);\n}\n\n/**\n * @summary Drag recognition delivered through gesture and unmatched pointer events. Use event details to move content and represent active pointer state.\n * @tags test-case\n */\nexport const Drag = {\n  render: () => html`\n<gesture-controller-demo-element></gesture-controller-demo-element>\n<script type=\"module\">\n  const element = document.querySelector('gesture-controller-demo-element');\n  let x = 0;\n  let y = 0;\n\n  element.addEventListener('nve-pointer-input', ({ detail }) => {\n    if (detail.kind === 'pointerdown') element.dataset.active = '';\n    if (detail.kind === 'pointerup' || detail.kind === 'pointercancel') delete element.dataset.active;\n  });\n\n  element.addEventListener('nve-gesture', ({ detail }) => {\n    if (detail.kind !== 'drag') return;\n    x += detail.movementX;\n    y += detail.movementY;\n    element.style.translate = x + 'px ' + y + 'px';\n  });\n</script>\n`\n};\n"],"mappings":";AAGA,IAAA,IAAc"}

package/dist/internal/controllers/gesture.controller.examples.json

@@ -0,0 +1,16 @@
+{
+  "entrypoint": "@nvidia-elements/core/internal/controllers/gesture.controller.examples.json",
+  "items": [
+    {
+      "id": "internal-controllers-gesture.controller-drag",
+      "name": "Drag",
+      "template": "<gesture-controller-demo-element></gesture-controller-demo-element>\n<script type=\"module\">\n  const element = document.querySelector(\"gesture-controller-demo-element\");\n  let x = 0;\n  let y = 0;\n  element.addEventListener(\"nve-pointer-input\", ({ detail }) => {\n    if (detail.kind === \"pointerdown\") element.dataset.active = \"\";\n    if (detail.kind === \"pointerup\" || detail.kind === \"pointercancel\") delete element.dataset.active;\n  });\n  element.addEventListener(\"nve-gesture\", ({ detail }) => {\n    if (detail.kind !== \"drag\") return;\n    x += detail.movementX;\n    y += detail.movementY;\n    element.style.translate = x + \"px \" + y + \"px\";\n  });\n</script>\n",
+      "summary": "Drag recognition delivered through gesture and unmatched pointer events. Use event details to move content and represent active pointer state.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    }
+  ]
+}

package/dist/internal/controllers/gesture.controller.js

@@ -0,0 +1,235 @@
+//#region src/internal/controllers/gesture.controller.ts
+var e = [
+	"auxclick",
+	"click",
+	"contextmenu",
+	"lostpointercapture",
+	"pointercancel",
+	"pointerdown",
+	"pointermove",
+	"pointerup",
+	"wheel"
+], t = class {
+	#e;
+	#t;
+	#n = /* @__PURE__ */ new Set();
+	#r = /* @__PURE__ */ new Map();
+	#i = !1;
+	#a;
+	#o;
+	constructor(e, t) {
+		this.#e = e, this.#t = t, e.addController(this);
+	}
+	set target(e) {
+		e !== this.#o && (this.#c(), this.#E(), this.#o = e, this.#s());
+	}
+	hostConnected() {
+		this.#i = !0, this.#s();
+	}
+	hostDisconnected() {
+		this.#c(), this.#E(), this.#i = !1;
+	}
+	#s() {
+		if (!(!this.#i || !this.#o)) for (let t of e) this.#o.addEventListener(t, this.#l, !0);
+	}
+	#c() {
+		if (!(!this.#i || !this.#o)) for (let t of e) this.#o.removeEventListener(t, this.#l, !0);
+	}
+	#l = (e) => {
+		let t = this.#o;
+		if (!t || e.currentTarget !== t || this.#t.shouldIgnore?.(e)) return;
+		this.#t.prepare?.();
+		let n = this.#t.getCapabilities();
+		e instanceof WheelEvent ? this.#u(e, n) : e.type === "contextmenu" ? n.pan && e.preventDefault() : e instanceof PointerEvent && this.#d(e, n);
+	};
+	#u(e, t) {
+		let n = this.#o;
+		!t.wheel || !n || (this.#w({
+			deltaPixels: i(e, n),
+			event: e,
+			kind: "wheel"
+		}), e.preventDefault());
+	}
+	#d(e, t) {
+		switch (e.type) {
+			case "auxclick":
+			case "click":
+				this.#f(e, t);
+				break;
+			case "lostpointercapture":
+				this.#r.delete(e.pointerId), this.#n.delete(e.pointerId), this.#a?.pointerIds.includes(e.pointerId) && (this.#a = void 0), this.#T({
+					event: e,
+					kind: "lostpointercapture"
+				});
+				break;
+			case "pointercancel":
+				this.#r.delete(e.pointerId), this.#n.delete(e.pointerId), this.#a = void 0, this.#T({
+					event: e,
+					kind: "pointercancel"
+				});
+				break;
+			case "pointerdown":
+				this.#p(e, t);
+				break;
+			case "pointermove":
+				this.#h(e, t);
+				break;
+			case "pointerup":
+				this.#m(e);
+				break;
+		}
+	}
+	#f(e, t) {
+		e.button === 2 && t.pan ? r(e) : e.type === "click" && this.#T({
+			event: e,
+			kind: "click"
+		});
+	}
+	#p(e, t) {
+		let i = t.pinch && this.#t.createPinchContext !== void 0;
+		if (this.#r.set(e.pointerId, {
+			x: e.clientX,
+			y: e.clientY
+		}), e.button === 2 && t.pan && this.#n.add(e.pointerId), n(t, i) && this.#C(e.pointerId), this.#n.has(e.pointerId)) {
+			r(e);
+			return;
+		}
+		i && this.#b(), this.#T({
+			event: e,
+			kind: "pointerdown"
+		});
+	}
+	#m(e) {
+		this.#r.delete(e.pointerId);
+		let t = this.#n.delete(e.pointerId);
+		this.#a?.pointerIds.includes(e.pointerId) && (this.#a = void 0), t ? r(e) : this.#T({
+			event: e,
+			kind: "pointerup"
+		});
+	}
+	#h(e, t) {
+		if (e.buttons === 0) {
+			this.#g(e);
+			return;
+		}
+		let r = t.pinch && this.#t.createPinchContext !== void 0, i = this.#v(e);
+		if (!i || !n(t, r)) return this.#T({
+			event: e,
+			kind: "pointermove"
+		});
+		if (!this.#_(e, i, t) && !(this.#r.size >= 2 && r && this.#y(e))) {
+			if (!t.drag) return this.#T({
+				event: e,
+				kind: "pointermove"
+			});
+			this.#C(e.pointerId), e.preventDefault(), this.#w({
+				event: e,
+				kind: "drag",
+				movementX: i.x,
+				movementY: i.y
+			});
+		}
+	}
+	#g(e) {
+		this.#r.delete(e.pointerId), this.#n.delete(e.pointerId), this.#a = void 0, this.#T({
+			event: e,
+			kind: "pointermove"
+		});
+	}
+	#_(e, t, n) {
+		return !n.pan || !this.#n.has(e.pointerId) ? !1 : (this.#C(e.pointerId), e.preventDefault(), this.#w({
+			event: e,
+			kind: "pan",
+			movementX: t.x,
+			movementY: t.y
+		}), !0);
+	}
+	#v(e) {
+		let t = this.#r.get(e.pointerId);
+		if (!t) return;
+		this.#r.set(e.pointerId, {
+			x: e.clientX,
+			y: e.clientY
+		});
+		let n = {
+			x: e.clientX - t.x,
+			y: e.clientY - t.y
+		};
+		return n.x === 0 && n.y === 0 ? void 0 : n;
+	}
+	#y(e) {
+		let t = this.#t.createPinchContext;
+		if (!t) return !1;
+		if (this.#a && !this.#a.pointerIds.includes(e.pointerId)) return !0;
+		let n = this.#a?.pointerIds ?? this.#x();
+		if (!n) return !1;
+		let r = this.#S(n);
+		return r === void 0 || r <= 0 ? !1 : (this.#a ??= {
+			context: t(),
+			distance: r,
+			pointerIds: n
+		}, this.#C(e.pointerId), e.preventDefault(), this.#w({
+			context: this.#a.context,
+			event: e,
+			kind: "pinch",
+			scale: r / this.#a.distance
+		}), !0);
+	}
+	#b() {
+		let e = this.#t.createPinchContext;
+		if (this.#r.size !== 2 || !e) return;
+		let t = this.#x();
+		if (!t) return;
+		let n = this.#S(t);
+		n !== void 0 && n > 0 && (this.#a = {
+			context: e(),
+			distance: n,
+			pointerIds: t
+		});
+	}
+	#x() {
+		let e = [...this.#r.keys()], t = e[0], n = e[1];
+		return t === void 0 || n === void 0 ? void 0 : [t, n];
+	}
+	#S(e) {
+		let t = this.#r.get(e[0]), n = this.#r.get(e[1]);
+		return t && n ? Math.hypot(t.x - n.x, t.y - n.y) : void 0;
+	}
+	#C(e) {
+		try {
+			this.#o?.setPointerCapture?.(e);
+		} catch {}
+	}
+	#w(e) {
+		this.#e.dispatchEvent(new CustomEvent("nve-gesture", {
+			bubbles: !1,
+			cancelable: !1,
+			composed: !1,
+			detail: e
+		}));
+	}
+	#T(e) {
+		this.#e.dispatchEvent(new CustomEvent("nve-pointer-input", {
+			bubbles: !1,
+			cancelable: !1,
+			composed: !1,
+			detail: e
+		}));
+	}
+	#E() {
+		this.#r.clear(), this.#n.clear(), this.#a = void 0;
+	}
+};
+function n(e, t) {
+	return e.drag || e.pan || t;
+}
+function r(e) {
+	e.preventDefault(), e.stopImmediatePropagation();
+}
+function i(e, t) {
+	return e.deltaMode === WheelEvent.DOM_DELTA_LINE ? e.deltaY * 16 : e.deltaMode === WheelEvent.DOM_DELTA_PAGE ? e.deltaY * t.getBoundingClientRect().height : e.deltaY;
+}
+//#endregion
+export { t as GestureController };
+
+//# sourceMappingURL=gesture.controller.js.map

package/dist/internal/controllers/gesture.controller.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gesture.controller.js","names":["#host","#options","#panPointerIds","#pointerPositions","#target","#removeTargetListeners","#resetGestureState","#addTargetListeners","#connected","#handleEvent","#handleWheel","#handlePointer","#dispatchGesture","#handleClick","#pinch","#dispatchPointerInput","#handlePointerDown","#handlePointerMove","#handlePointerUp","#capturePointer","#startPinchIfNeeded","#handlePointerButtonsReleased","#updatePointerPosition","#handlePanMove","#handlePinch","#getPinchPointerIds","#getPointerDistance"],"sources":["../../../src/internal/controllers/gesture.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, ReactiveControllerHost } from 'lit';\n\nconst GESTURE_EVENT_TYPES = [\n  'auxclick',\n  'click',\n  'contextmenu',\n  'lostpointercapture',\n  'pointercancel',\n  'pointerdown',\n  'pointermove',\n  'pointerup',\n  'wheel'\n] as const;\n\ninterface Point {\n  readonly x: number;\n  readonly y: number;\n}\n\nexport interface GestureCapabilities {\n  readonly drag: boolean;\n  readonly pan: boolean;\n  readonly pinch: boolean;\n  readonly wheel: boolean;\n}\n\ninterface PointerMovementGesture {\n  readonly event: PointerEvent;\n  readonly movementX: number;\n  readonly movementY: number;\n}\n\nexport type Gesture<TPinchContext> =\n  | (PointerMovementGesture & { readonly kind: 'drag' })\n  | (PointerMovementGesture & { readonly kind: 'pan' })\n  | {\n      readonly context: TPinchContext;\n      readonly event: PointerEvent;\n      readonly kind: 'pinch';\n      readonly scale: number;\n    }\n  | {\n      readonly deltaPixels: number;\n      readonly event: WheelEvent;\n      readonly kind: 'wheel';\n    };\n\nexport type UnhandledPointerInput =\n  | { readonly event: PointerEvent; readonly kind: 'click' }\n  | { readonly event: PointerEvent; readonly kind: 'lostpointercapture' }\n  | { readonly event: PointerEvent; readonly kind: 'pointercancel' }\n  | { readonly event: PointerEvent; readonly kind: 'pointerdown' }\n  | { readonly event: PointerEvent; readonly kind: 'pointermove' }\n  | { readonly event: PointerEvent; readonly kind: 'pointerup' };\n\nexport interface GestureControllerOptions<TPinchContext = undefined> {\n  /** Creates a snapshot of caller state when a pinch begins. Omit this field to disable pinch recognition. */\n  readonly createPinchContext?: () => TPinchContext;\n  /** Returns the gesture kinds that the controller can recognize for the current input event. */\n  readonly getCapabilities: () => GestureCapabilities;\n  /** Updates caller state before the controller reads capabilities for a nonignored input event. */\n  readonly prepare?: () => void;\n  /** Returns whether the controller should skip an input event before preparing or recognizing it. */\n  readonly shouldIgnore?: (event: Event) => boolean;\n}\n\ninterface PinchState<TPinchContext> {\n  readonly context: TPinchContext;\n  readonly distance: number;\n  readonly pointerIds: readonly [number, number];\n}\n\ntype GestureHost = EventTarget & ReactiveControllerHost;\n\n/** Recognizes drag, pan, pinch, and wheel input on a dynamically assigned target. */\nexport class GestureController<TPinchContext = undefined> implements ReactiveController {\n  readonly #host: GestureHost;\n  readonly #options: GestureControllerOptions<TPinchContext>;\n  readonly #panPointerIds = new Set<number>();\n  readonly #pointerPositions = new Map<number, Point>();\n  #connected = false;\n  #pinch?: PinchState<TPinchContext>;\n  #target?: HTMLElement;\n\n  constructor(host: GestureHost, options: GestureControllerOptions<TPinchContext>) {\n    this.#host = host;\n    this.#options = options;\n    host.addController(this);\n  }\n\n  set target(target: HTMLElement | undefined) {\n    if (target === this.#target) return;\n    this.#removeTargetListeners();\n    this.#resetGestureState();\n    this.#target = target;\n    this.#addTargetListeners();\n  }\n\n  hostConnected(): void {\n    this.#connected = true;\n    this.#addTargetListeners();\n  }\n\n  hostDisconnected(): void {\n    this.#removeTargetListeners();\n    this.#resetGestureState();\n    this.#connected = false;\n  }\n\n  #addTargetListeners(): void {\n    if (!this.#connected || !this.#target) return;\n    for (const type of GESTURE_EVENT_TYPES) this.#target.addEventListener(type, this.#handleEvent, true);\n  }\n\n  #removeTargetListeners(): void {\n    if (!this.#connected || !this.#target) return;\n    for (const type of GESTURE_EVENT_TYPES) this.#target.removeEventListener(type, this.#handleEvent, true);\n  }\n\n  #handleEvent = (event: Event): void => {\n    const target = this.#target;\n    if (!target || event.currentTarget !== target || this.#options.shouldIgnore?.(event)) return;\n    this.#options.prepare?.();\n    const capabilities = this.#options.getCapabilities();\n    if (event instanceof WheelEvent) {\n      this.#handleWheel(event, capabilities);\n    } else if (event.type === 'contextmenu') {\n      if (capabilities.pan) event.preventDefault();\n    } else if (event instanceof PointerEvent) {\n      this.#handlePointer(event, capabilities);\n    }\n  };\n\n  #handleWheel(event: WheelEvent, capabilities: GestureCapabilities): void {\n    const target = this.#target;\n    if (!capabilities.wheel || !target) return;\n    this.#dispatchGesture({\n      deltaPixels: normalizeWheelDelta(event, target),\n      event,\n      kind: 'wheel'\n    });\n    event.preventDefault();\n  }\n\n  #handlePointer(event: PointerEvent, capabilities: GestureCapabilities): void {\n    switch (event.type) {\n      case 'auxclick':\n      case 'click':\n        this.#handleClick(event, capabilities);\n        break;\n      case 'lostpointercapture':\n        this.#pointerPositions.delete(event.pointerId);\n        this.#panPointerIds.delete(event.pointerId);\n        if (this.#pinch?.pointerIds.includes(event.pointerId)) this.#pinch = undefined;\n        this.#dispatchPointerInput({ event, kind: 'lostpointercapture' });\n        break;\n      case 'pointercancel':\n        this.#pointerPositions.delete(event.pointerId);\n        this.#panPointerIds.delete(event.pointerId);\n        this.#pinch = undefined;\n        this.#dispatchPointerInput({ event, kind: 'pointercancel' });\n        break;\n      case 'pointerdown':\n        this.#handlePointerDown(event, capabilities);\n        break;\n      case 'pointermove':\n        this.#handlePointerMove(event, capabilities);\n        break;\n      case 'pointerup':\n        this.#handlePointerUp(event);\n        break;\n    }\n  }\n\n  #handleClick(event: PointerEvent, capabilities: GestureCapabilities): void {\n    if (event.button === 2 && capabilities.pan) {\n      consumePanBoundaryEvent(event);\n    } else if (event.type === 'click') {\n      this.#dispatchPointerInput({ event, kind: 'click' });\n    }\n  }\n\n  #handlePointerDown(event: PointerEvent, capabilities: GestureCapabilities): void {\n    const canPinch = capabilities.pinch && this.#options.createPinchContext !== undefined;\n    this.#pointerPositions.set(event.pointerId, { x: event.clientX, y: event.clientY });\n    if (event.button === 2 && capabilities.pan) this.#panPointerIds.add(event.pointerId);\n    if (hasPointerCapability(capabilities, canPinch)) this.#capturePointer(event.pointerId);\n    if (this.#panPointerIds.has(event.pointerId)) {\n      consumePanBoundaryEvent(event);\n      return;\n    }\n    if (canPinch) this.#startPinchIfNeeded();\n    this.#dispatchPointerInput({ event, kind: 'pointerdown' });\n  }\n\n  #handlePointerUp(event: PointerEvent): void {\n    this.#pointerPositions.delete(event.pointerId);\n    const wasPanPointer = this.#panPointerIds.delete(event.pointerId);\n    if (this.#pinch?.pointerIds.includes(event.pointerId)) this.#pinch = undefined;\n    if (wasPanPointer) {\n      consumePanBoundaryEvent(event);\n    } else {\n      this.#dispatchPointerInput({ event, kind: 'pointerup' });\n    }\n  }\n\n  #handlePointerMove(event: PointerEvent, capabilities: GestureCapabilities): void {\n    if (event.buttons === 0) {\n      this.#handlePointerButtonsReleased(event);\n      return;\n    }\n    const canPinch = capabilities.pinch && this.#options.createPinchContext !== undefined;\n    const movement = this.#updatePointerPosition(event);\n    if (!movement || !hasPointerCapability(capabilities, canPinch)) {\n      return this.#dispatchPointerInput({ event, kind: 'pointermove' });\n    }\n    if (this.#handlePanMove(event, movement, capabilities)) return;\n    if (this.#pointerPositions.size >= 2 && canPinch && this.#handlePinch(event)) return;\n    if (!capabilities.drag) return this.#dispatchPointerInput({ event, kind: 'pointermove' });\n    this.#capturePointer(event.pointerId);\n    event.preventDefault();\n    this.#dispatchGesture({ event, kind: 'drag', movementX: movement.x, movementY: movement.y });\n  }\n\n  #handlePointerButtonsReleased(event: PointerEvent): void {\n    this.#pointerPositions.delete(event.pointerId);\n    this.#panPointerIds.delete(event.pointerId);\n    this.#pinch = undefined;\n    this.#dispatchPointerInput({ event, kind: 'pointermove' });\n  }\n\n  #handlePanMove(event: PointerEvent, movement: Point, capabilities: GestureCapabilities): boolean {\n    if (!capabilities.pan || !this.#panPointerIds.has(event.pointerId)) return false;\n    this.#capturePointer(event.pointerId);\n    event.preventDefault();\n    this.#dispatchGesture({ event, kind: 'pan', movementX: movement.x, movementY: movement.y });\n    return true;\n  }\n\n  #updatePointerPosition(event: PointerEvent): Point | undefined {\n    const previous = this.#pointerPositions.get(event.pointerId);\n    if (!previous) return undefined;\n    this.#pointerPositions.set(event.pointerId, { x: event.clientX, y: event.clientY });\n    const movement = { x: event.clientX - previous.x, y: event.clientY - previous.y };\n    return movement.x === 0 && movement.y === 0 ? undefined : movement;\n  }\n\n  #handlePinch(event: PointerEvent): boolean {\n    const createPinchContext = this.#options.createPinchContext;\n    if (!createPinchContext) return false;\n    if (this.#pinch && !this.#pinch.pointerIds.includes(event.pointerId)) return true;\n    const pointerIds = this.#pinch?.pointerIds ?? this.#getPinchPointerIds();\n    if (!pointerIds) return false;\n    const distance = this.#getPointerDistance(pointerIds);\n    if (distance === undefined || distance <= 0) return false;\n    this.#pinch ??= { context: createPinchContext(), distance, pointerIds };\n    this.#capturePointer(event.pointerId);\n    event.preventDefault();\n    this.#dispatchGesture({\n      context: this.#pinch.context,\n      event,\n      kind: 'pinch',\n      scale: distance / this.#pinch.distance\n    });\n    return true;\n  }\n\n  #startPinchIfNeeded(): void {\n    const createPinchContext = this.#options.createPinchContext;\n    if (this.#pointerPositions.size !== 2 || !createPinchContext) return;\n    const pointerIds = this.#getPinchPointerIds();\n    if (!pointerIds) return;\n    const distance = this.#getPointerDistance(pointerIds);\n    if (distance !== undefined && distance > 0) {\n      this.#pinch = { context: createPinchContext(), distance, pointerIds };\n    }\n  }\n\n  #getPinchPointerIds(): [number, number] | undefined {\n    const pointerIds = [...this.#pointerPositions.keys()];\n    const first = pointerIds[0];\n    const second = pointerIds[1];\n    return first === undefined || second === undefined ? undefined : [first, second];\n  }\n\n  #getPointerDistance(pointerIds: readonly [number, number]): number | undefined {\n    const first = this.#pointerPositions.get(pointerIds[0]);\n    const second = this.#pointerPositions.get(pointerIds[1]);\n    return first && second ? Math.hypot(first.x - second.x, first.y - second.y) : undefined;\n  }\n\n  #capturePointer(pointerId: number): void {\n    try {\n      this.#target?.setPointerCapture?.(pointerId);\n    } catch {\n      // Synthetic test events and browser implementations may not have an active pointer to capture.\n    }\n  }\n\n  #dispatchGesture(gesture: Gesture<TPinchContext>): void {\n    this.#host.dispatchEvent(\n      new CustomEvent<Gesture<TPinchContext>>('nve-gesture', {\n        bubbles: false,\n        cancelable: false,\n        composed: false,\n        detail: gesture\n      })\n    );\n  }\n\n  #dispatchPointerInput(input: UnhandledPointerInput): void {\n    this.#host.dispatchEvent(\n      new CustomEvent<UnhandledPointerInput>('nve-pointer-input', {\n        bubbles: false,\n        cancelable: false,\n        composed: false,\n        detail: input\n      })\n    );\n  }\n\n  #resetGestureState(): void {\n    this.#pointerPositions.clear();\n    this.#panPointerIds.clear();\n    this.#pinch = undefined;\n  }\n}\n\nfunction hasPointerCapability(capabilities: GestureCapabilities, canPinch: boolean): boolean {\n  return capabilities.drag || capabilities.pan || canPinch;\n}\n\nfunction consumePanBoundaryEvent(event: Event): void {\n  event.preventDefault();\n  event.stopImmediatePropagation();\n}\n\nfunction normalizeWheelDelta(event: WheelEvent, target: HTMLElement): number {\n  if (event.deltaMode === WheelEvent.DOM_DELTA_LINE) return event.deltaY * 16;\n  if (event.deltaMode === WheelEvent.DOM_DELTA_PAGE) return event.deltaY * target.getBoundingClientRect().height;\n  return event.deltaY;\n}\n"],"mappings":";AAKA,IAAM,IAAsB;CAC1B;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,GA+Da,IAAb,MAAwF;CACtF;CACA;CACA,qBAA0B,IAAI,IAAY;CAC1C,qBAA6B,IAAI,IAAmB;CACpD,KAAa;CACb;CACA;CAEA,YAAY,GAAmB,GAAkD;EAG/E,AAFA,KAAKA,KAAQ,GACb,KAAKC,KAAW,GAChB,EAAK,cAAc,IAAI;CACzB;CAEA,IAAI,OAAO,GAAiC;EACtC,MAAW,KAAKG,OACpB,KAAKC,GAAuB,GAC5B,KAAKC,GAAmB,GACxB,KAAKF,KAAU,GACf,KAAKG,GAAoB;CAC3B;CAEA,gBAAsB;EAEpB,AADA,KAAKC,KAAa,IAClB,KAAKD,GAAoB;CAC3B;CAEA,mBAAyB;EAGvB,AAFA,KAAKF,GAAuB,GAC5B,KAAKC,GAAmB,GACxB,KAAKE,KAAa;CACpB;CAEA,KAA4B;EACtB,OAAC,KAAKA,MAAc,CAAC,KAAKJ,KAC9B,KAAK,IAAM,KAAQ,GAAqB,KAAKA,GAAQ,iBAAiB,GAAM,KAAKK,IAAc,EAAI;CACrG;CAEA,KAA+B;EACzB,OAAC,KAAKD,MAAc,CAAC,KAAKJ,KAC9B,KAAK,IAAM,KAAQ,GAAqB,KAAKA,GAAQ,oBAAoB,GAAM,KAAKK,IAAc,EAAI;CACxG;CAEA,MAAgB,MAAuB;EACrC,IAAM,IAAS,KAAKL;EACpB,IAAI,CAAC,KAAU,EAAM,kBAAkB,KAAU,KAAKH,GAAS,eAAe,CAAK,GAAG;EACtF,KAAKA,GAAS,UAAU;EACxB,IAAM,IAAe,KAAKA,GAAS,gBAAgB;EACnD,AAAI,aAAiB,aACnB,KAAKS,GAAa,GAAO,CAAY,IAC5B,EAAM,SAAS,gBACpB,EAAa,OAAK,EAAM,eAAe,IAClC,aAAiB,gBAC1B,KAAKC,GAAe,GAAO,CAAY;CAE3C;CAEA,GAAa,GAAmB,GAAyC;EACvE,IAAM,IAAS,KAAKP;EAChB,CAAC,EAAa,SAAS,CAAC,MAC5B,KAAKQ,GAAiB;GACpB,aAAa,EAAoB,GAAO,CAAM;GAC9C;GACA,MAAM;EACR,CAAC,GACD,EAAM,eAAe;CACvB;CAEA,GAAe,GAAqB,GAAyC;EAC3E,QAAQ,EAAM,MAAd;GACE,KAAK;GACL,KAAK;IACH,KAAKC,GAAa,GAAO,CAAY;IACrC;GACF,KAAK;IAIH,AAHA,KAAKV,GAAkB,OAAO,EAAM,SAAS,GAC7C,KAAKD,GAAe,OAAO,EAAM,SAAS,GACtC,KAAKY,IAAQ,WAAW,SAAS,EAAM,SAAS,MAAG,KAAKA,KAAS,KAAA,IACrE,KAAKC,GAAsB;KAAE;KAAO,MAAM;IAAqB,CAAC;IAChE;GACF,KAAK;IAIH,AAHA,KAAKZ,GAAkB,OAAO,EAAM,SAAS,GAC7C,KAAKD,GAAe,OAAO,EAAM,SAAS,GAC1C,KAAKY,KAAS,KAAA,GACd,KAAKC,GAAsB;KAAE;KAAO,MAAM;IAAgB,CAAC;IAC3D;GACF,KAAK;IACH,KAAKC,GAAmB,GAAO,CAAY;IAC3C;GACF,KAAK;IACH,KAAKC,GAAmB,GAAO,CAAY;IAC3C;GACF,KAAK;IACH,KAAKC,GAAiB,CAAK;IAC3B;EACJ;CACF;CAEA,GAAa,GAAqB,GAAyC;EACzE,AAAI,EAAM,WAAW,KAAK,EAAa,MACrC,EAAwB,CAAK,IACpB,EAAM,SAAS,WACxB,KAAKH,GAAsB;GAAE;GAAO,MAAM;EAAQ,CAAC;CAEvD;CAEA,GAAmB,GAAqB,GAAyC;EAC/E,IAAM,IAAW,EAAa,SAAS,KAAKd,GAAS,uBAAuB,KAAA;EAI5E,IAHA,KAAKE,GAAkB,IAAI,EAAM,WAAW;GAAE,GAAG,EAAM;GAAS,GAAG,EAAM;EAAQ,CAAC,GAC9E,EAAM,WAAW,KAAK,EAAa,OAAK,KAAKD,GAAe,IAAI,EAAM,SAAS,GAC/E,EAAqB,GAAc,CAAQ,KAAG,KAAKiB,GAAgB,EAAM,SAAS,GAClF,KAAKjB,GAAe,IAAI,EAAM,SAAS,GAAG;GAC5C,EAAwB,CAAK;GAC7B;EACF;EAEA,AADI,KAAU,KAAKkB,GAAoB,GACvC,KAAKL,GAAsB;GAAE;GAAO,MAAM;EAAc,CAAC;CAC3D;CAEA,GAAiB,GAA2B;EAC1C,KAAKZ,GAAkB,OAAO,EAAM,SAAS;EAC7C,IAAM,IAAgB,KAAKD,GAAe,OAAO,EAAM,SAAS;EAEhE,AADI,KAAKY,IAAQ,WAAW,SAAS,EAAM,SAAS,MAAG,KAAKA,KAAS,KAAA,IACjE,IACF,EAAwB,CAAK,IAE7B,KAAKC,GAAsB;GAAE;GAAO,MAAM;EAAY,CAAC;CAE3D;CAEA,GAAmB,GAAqB,GAAyC;EAC/E,IAAI,EAAM,YAAY,GAAG;GACvB,KAAKM,GAA8B,CAAK;GACxC;EACF;EACA,IAAM,IAAW,EAAa,SAAS,KAAKpB,GAAS,uBAAuB,KAAA,GACtE,IAAW,KAAKqB,GAAuB,CAAK;EAClD,IAAI,CAAC,KAAY,CAAC,EAAqB,GAAc,CAAQ,GAC3D,OAAO,KAAKP,GAAsB;GAAE;GAAO,MAAM;EAAc,CAAC;EAE9D,UAAKQ,GAAe,GAAO,GAAU,CAAY,KACjD,OAAKpB,GAAkB,QAAQ,KAAK,KAAY,KAAKqB,GAAa,CAAK,IAC3E;OAAI,CAAC,EAAa,MAAM,OAAO,KAAKT,GAAsB;IAAE;IAAO,MAAM;GAAc,CAAC;GAGxF,AAFA,KAAKI,GAAgB,EAAM,SAAS,GACpC,EAAM,eAAe,GACrB,KAAKP,GAAiB;IAAE;IAAO,MAAM;IAAQ,WAAW,EAAS;IAAG,WAAW,EAAS;GAAE,CAAC;EAHH;CAI1F;CAEA,GAA8B,GAA2B;EAIvD,AAHA,KAAKT,GAAkB,OAAO,EAAM,SAAS,GAC7C,KAAKD,GAAe,OAAO,EAAM,SAAS,GAC1C,KAAKY,KAAS,KAAA,GACd,KAAKC,GAAsB;GAAE;GAAO,MAAM;EAAc,CAAC;CAC3D;CAEA,GAAe,GAAqB,GAAiB,GAA4C;EAK/F,OAJI,CAAC,EAAa,OAAO,CAAC,KAAKb,GAAe,IAAI,EAAM,SAAS,IAAU,MAC3E,KAAKiB,GAAgB,EAAM,SAAS,GACpC,EAAM,eAAe,GACrB,KAAKP,GAAiB;GAAE;GAAO,MAAM;GAAO,WAAW,EAAS;GAAG,WAAW,EAAS;EAAE,CAAC,GACnF;CACT;CAEA,GAAuB,GAAwC;EAC7D,IAAM,IAAW,KAAKT,GAAkB,IAAI,EAAM,SAAS;EAC3D,IAAI,CAAC,GAAU;EACf,KAAKA,GAAkB,IAAI,EAAM,WAAW;GAAE,GAAG,EAAM;GAAS,GAAG,EAAM;EAAQ,CAAC;EAClF,IAAM,IAAW;GAAE,GAAG,EAAM,UAAU,EAAS;GAAG,GAAG,EAAM,UAAU,EAAS;EAAE;EAChF,OAAO,EAAS,MAAM,KAAK,EAAS,MAAM,IAAI,KAAA,IAAY;CAC5D;CAEA,GAAa,GAA8B;EACzC,IAAM,IAAqB,KAAKF,GAAS;EACzC,IAAI,CAAC,GAAoB,OAAO;EAChC,IAAI,KAAKa,MAAU,CAAC,KAAKA,GAAO,WAAW,SAAS,EAAM,SAAS,GAAG,OAAO;EAC7E,IAAM,IAAa,KAAKA,IAAQ,cAAc,KAAKW,GAAoB;EACvE,IAAI,CAAC,GAAY,OAAO;EACxB,IAAM,IAAW,KAAKC,GAAoB,CAAU;EAWpD,OAVI,MAAa,KAAA,KAAa,KAAY,IAAU,MACpD,KAAKZ,OAAW;GAAE,SAAS,EAAmB;GAAG;GAAU;EAAW,GACtE,KAAKK,GAAgB,EAAM,SAAS,GACpC,EAAM,eAAe,GACrB,KAAKP,GAAiB;GACpB,SAAS,KAAKE,GAAO;GACrB;GACA,MAAM;GACN,OAAO,IAAW,KAAKA,GAAO;EAChC,CAAC,GACM;CACT;CAEA,KAA4B;EAC1B,IAAM,IAAqB,KAAKb,GAAS;EACzC,IAAI,KAAKE,GAAkB,SAAS,KAAK,CAAC,GAAoB;EAC9D,IAAM,IAAa,KAAKsB,GAAoB;EAC5C,IAAI,CAAC,GAAY;EACjB,IAAM,IAAW,KAAKC,GAAoB,CAAU;EACpD,AAAI,MAAa,KAAA,KAAa,IAAW,MACvC,KAAKZ,KAAS;GAAE,SAAS,EAAmB;GAAG;GAAU;EAAW;CAExE;CAEA,KAAoD;EAClD,IAAM,IAAa,CAAC,GAAG,KAAKX,GAAkB,KAAK,CAAC,GAC9C,IAAQ,EAAW,IACnB,IAAS,EAAW;EAC1B,OAAO,MAAU,KAAA,KAAa,MAAW,KAAA,IAAY,KAAA,IAAY,CAAC,GAAO,CAAM;CACjF;CAEA,GAAoB,GAA2D;EAC7E,IAAM,IAAQ,KAAKA,GAAkB,IAAI,EAAW,EAAE,GAChD,IAAS,KAAKA,GAAkB,IAAI,EAAW,EAAE;EACvD,OAAO,KAAS,IAAS,KAAK,MAAM,EAAM,IAAI,EAAO,GAAG,EAAM,IAAI,EAAO,CAAC,IAAI,KAAA;CAChF;CAEA,GAAgB,GAAyB;EACvC,IAAI;GACF,KAAKC,IAAS,oBAAoB,CAAS;EAC7C,QAAQ,CAER;CACF;CAEA,GAAiB,GAAuC;EACtD,KAAKJ,GAAM,cACT,IAAI,YAAoC,eAAe;GACrD,SAAS;GACT,YAAY;GACZ,UAAU;GACV,QAAQ;EACV,CAAC,CACH;CACF;CAEA,GAAsB,GAAoC;EACxD,KAAKA,GAAM,cACT,IAAI,YAAmC,qBAAqB;GAC1D,SAAS;GACT,YAAY;GACZ,UAAU;GACV,QAAQ;EACV,CAAC,CACH;CACF;CAEA,KAA2B;EAGzB,AAFA,KAAKG,GAAkB,MAAM,GAC7B,KAAKD,GAAe,MAAM,GAC1B,KAAKY,KAAS,KAAA;CAChB;AACF;AAEA,SAAS,EAAqB,GAAmC,GAA4B;CAC3F,OAAO,EAAa,QAAQ,EAAa,OAAO;AAClD;AAEA,SAAS,EAAwB,GAAoB;CAEnD,AADA,EAAM,eAAe,GACrB,EAAM,yBAAyB;AACjC;AAEA,SAAS,EAAoB,GAAmB,GAA6B;CAG3E,OAFI,EAAM,cAAc,WAAW,iBAAuB,EAAM,SAAS,KACrE,EAAM,cAAc,WAAW,iBAAuB,EAAM,SAAS,EAAO,sBAAsB,CAAC,CAAC,SACjG,EAAM;AACf"}

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

@@ -0,0 +1,24 @@
+import type { ReactiveController, ReactiveControllerHost } from 'lit';
+type SpatialKeyHost = ReactiveControllerHost & HTMLElement;
+export type SpatialKeyHandling = 'handled' | 'ignored';
+export type SpatialKeyCommand = {
+    readonly ctrlKey: boolean;
+    readonly event: KeyboardEvent;
+    readonly kind: 'direction';
+    readonly horizontal: -1 | 0 | 1;
+    readonly key: 'ArrowDown' | 'ArrowLeft' | 'ArrowRight' | 'ArrowUp';
+    readonly shiftKey: boolean;
+    readonly vertical: -1 | 0 | 1;
+} | {
+    readonly event: KeyboardEvent;
+    readonly kind: 'zoom';
+    readonly key: '+' | '-' | '=';
+};
+/** Converts direct-host keyboard input into spatial direction and zoom commands. */
+export declare class KeyNavigationSpatialController implements ReactiveController {
+    #private;
+    constructor(host: SpatialKeyHost);
+    hostConnected(): void;
+    hostDisconnected(): void;
+}
+export {};

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

@@ -0,0 +1,75 @@
+//#region src/internal/controllers/keynav-spatial.controller.ts
+var e = class {
+	#e;
+	constructor(e) {
+		this.#e = e, e.addController(this);
+	}
+	hostConnected() {
+		this.#e.addEventListener("keydown", this.#t);
+	}
+	hostDisconnected() {
+		this.#e.removeEventListener("keydown", this.#t);
+	}
+	#t = (e) => {
+		if (e.composedPath()[0] !== this.#e) return;
+		let n = t(e);
+		n && this.#e.dispatchEvent(new CustomEvent("nve-key", {
+			bubbles: !1,
+			cancelable: !1,
+			composed: !1,
+			detail: n
+		}));
+	};
+};
+function t(e) {
+	switch (e.key) {
+		case "ArrowDown": return {
+			ctrlKey: e.ctrlKey,
+			event: e,
+			horizontal: 0,
+			key: e.key,
+			kind: "direction",
+			shiftKey: e.shiftKey,
+			vertical: -1
+		};
+		case "ArrowLeft": return {
+			ctrlKey: e.ctrlKey,
+			event: e,
+			horizontal: -1,
+			key: e.key,
+			kind: "direction",
+			shiftKey: e.shiftKey,
+			vertical: 0
+		};
+		case "ArrowRight": return {
+			ctrlKey: e.ctrlKey,
+			event: e,
+			horizontal: 1,
+			key: e.key,
+			kind: "direction",
+			shiftKey: e.shiftKey,
+			vertical: 0
+		};
+		case "ArrowUp": return {
+			ctrlKey: e.ctrlKey,
+			event: e,
+			horizontal: 0,
+			key: e.key,
+			kind: "direction",
+			shiftKey: e.shiftKey,
+			vertical: 1
+		};
+		case "+":
+		case "-":
+		case "=": return {
+			event: e,
+			key: e.key,
+			kind: "zoom"
+		};
+		default: return;
+	}
+}
+//#endregion
+export { e as KeyNavigationSpatialController };
+
+//# sourceMappingURL=keynav-spatial.controller.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"keynav-spatial.controller.js","names":["#host","#handleKeydown"],"sources":["../../../src/internal/controllers/keynav-spatial.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, ReactiveControllerHost } from 'lit';\n\ntype SpatialKeyHost = ReactiveControllerHost & HTMLElement;\n\nexport type SpatialKeyHandling = 'handled' | 'ignored';\n\nexport type SpatialKeyCommand =\n  | {\n      readonly ctrlKey: boolean;\n      readonly event: KeyboardEvent;\n      readonly kind: 'direction';\n      readonly horizontal: -1 | 0 | 1;\n      readonly key: 'ArrowDown' | 'ArrowLeft' | 'ArrowRight' | 'ArrowUp';\n      readonly shiftKey: boolean;\n      readonly vertical: -1 | 0 | 1;\n    }\n  | {\n      readonly event: KeyboardEvent;\n      readonly kind: 'zoom';\n      readonly key: '+' | '-' | '=';\n    };\n\n/** Converts direct-host keyboard input into spatial direction and zoom commands. */\nexport class KeyNavigationSpatialController implements ReactiveController {\n  readonly #host: SpatialKeyHost;\n\n  constructor(host: SpatialKeyHost) {\n    this.#host = host;\n    host.addController(this);\n  }\n\n  hostConnected(): void {\n    this.#host.addEventListener('keydown', this.#handleKeydown);\n  }\n\n  hostDisconnected(): void {\n    this.#host.removeEventListener('keydown', this.#handleKeydown);\n  }\n\n  #handleKeydown = (event: KeyboardEvent): void => {\n    if (event.composedPath()[0] !== this.#host) return;\n    const command = getSpatialKeyCommand(event);\n    if (!command) return;\n    this.#host.dispatchEvent(\n      new CustomEvent<SpatialKeyCommand>('nve-key', {\n        bubbles: false,\n        cancelable: false,\n        composed: false,\n        detail: command\n      })\n    );\n  };\n}\n\nfunction getSpatialKeyCommand(event: KeyboardEvent): SpatialKeyCommand | undefined {\n  switch (event.key) {\n    case 'ArrowDown':\n      return {\n        ctrlKey: event.ctrlKey,\n        event,\n        horizontal: 0,\n        key: event.key,\n        kind: 'direction',\n        shiftKey: event.shiftKey,\n        vertical: -1\n      };\n    case 'ArrowLeft':\n      return {\n        ctrlKey: event.ctrlKey,\n        event,\n        horizontal: -1,\n        key: event.key,\n        kind: 'direction',\n        shiftKey: event.shiftKey,\n        vertical: 0\n      };\n    case 'ArrowRight':\n      return {\n        ctrlKey: event.ctrlKey,\n        event,\n        horizontal: 1,\n        key: event.key,\n        kind: 'direction',\n        shiftKey: event.shiftKey,\n        vertical: 0\n      };\n    case 'ArrowUp':\n      return {\n        ctrlKey: event.ctrlKey,\n        event,\n        horizontal: 0,\n        key: event.key,\n        kind: 'direction',\n        shiftKey: event.shiftKey,\n        vertical: 1\n      };\n    case '+':\n    case '-':\n    case '=':\n      return { event, key: event.key, kind: 'zoom' };\n    default:\n      return undefined;\n  }\n}\n"],"mappings":";AA0BA,IAAa,IAAb,MAA0E;CACxE;CAEA,YAAY,GAAsB;EAEhC,AADA,KAAKA,KAAQ,GACb,EAAK,cAAc,IAAI;CACzB;CAEA,gBAAsB;EACpB,KAAKA,GAAM,iBAAiB,WAAW,KAAKC,EAAc;CAC5D;CAEA,mBAAyB;EACvB,KAAKD,GAAM,oBAAoB,WAAW,KAAKC,EAAc;CAC/D;CAEA,MAAkB,MAA+B;EAC/C,IAAI,EAAM,aAAa,CAAC,CAAC,OAAO,KAAKD,IAAO;EAC5C,IAAM,IAAU,EAAqB,CAAK;EACrC,KACL,KAAKA,GAAM,cACT,IAAI,YAA+B,WAAW;GAC5C,SAAS;GACT,YAAY;GACZ,UAAU;GACV,QAAQ;EACV,CAAC,CACH;CACF;AACF;AAEA,SAAS,EAAqB,GAAqD;CACjF,QAAQ,EAAM,KAAd;EACE,KAAK,aACH,OAAO;GACL,SAAS,EAAM;GACf;GACA,YAAY;GACZ,KAAK,EAAM;GACX,MAAM;GACN,UAAU,EAAM;GAChB,UAAU;EACZ;EACF,KAAK,aACH,OAAO;GACL,SAAS,EAAM;GACf;GACA,YAAY;GACZ,KAAK,EAAM;GACX,MAAM;GACN,UAAU,EAAM;GAChB,UAAU;EACZ;EACF,KAAK,cACH,OAAO;GACL,SAAS,EAAM;GACf;GACA,YAAY;GACZ,KAAK,EAAM;GACX,MAAM;GACN,UAAU,EAAM;GAChB,UAAU;EACZ;EACF,KAAK,WACH,OAAO;GACL,SAAS,EAAM;GACf;GACA,YAAY;GACZ,KAAK,EAAM;GACX,MAAM;GACN,UAAU,EAAM;GAChB,UAAU;EACZ;EACF,KAAK;EACL,KAAK;EACL,KAAK,KACH,OAAO;GAAE;GAAO,KAAK,EAAM;GAAK,MAAM;EAAO;EAC/C,SACE;CACJ;AACF"}

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

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