@nvidia-elements/core 0.0.1 → 0.0.2

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

@@ -0,0 +1,74 @@
+import { GlobalStateService as e } from "../services/global.service.js";
+import { auditParentElement as t, auditSlots as n } from "../utils/audit.js";
+//#region src/internal/controllers/audit.controller.ts
+var r = 50;
+async function i(e) {
+	let { LogService: t } = await import("../services/log.service.js");
+	t.warn(e);
+}
+function a(e = {}) {
+	return (t) => t.addInitializer((t) => new o(t, e));
+}
+var o = class {
+	get #e() {
+		return e.state.audit[this.host.localName] ?? { count: 0 };
+	}
+	get #t() {
+		return e.state.env === "production";
+	}
+	get #n() {
+		return this.host.constructor.metadata;
+	}
+	constructor(e, t) {
+		this.host = e, this.options = t, this.#t || (this.host.addController(this), this.#r());
+	}
+	async hostConnected() {
+		await this.host.updateComplete, this.#t || (this.#i(), this.#s(), this.#c());
+	}
+	hostDisconnected() {
+		this.#a();
+	}
+	#r() {
+		e.state.audit[this.host.localName] || this.#o({ [this.host.localName]: { count: 0 } });
+	}
+	async #i() {
+		if (this.options.excessiveInstanceLimit !== void 0) if (this.#e.count > this.options.excessiveInstanceLimit && !this.#e.excessiveInstanceLimitAudited) {
+			let { getExcessiveInstanceLimitWarning: e } = await import("../utils/audit-logs.js");
+			i(e(this.#e.count, this.host.localName)), this.#o({ [this.host.localName]: {
+				count: this.#e.count + 1,
+				excessiveInstanceLimitAudited: !0
+			} });
+		} else this.#o({ [this.host.localName]: { count: this.#e.count + 1 } });
+	}
+	#a() {
+		this.options.excessiveInstanceLimit && this.#o({ [this.host.localName]: {
+			count: this.#e.count - 1,
+			excessiveInstanceLimitAudited: !1
+		} });
+	}
+	#o(t) {
+		e.dispatch("NVE_ELEMENTS_AUDIT_UPDATE", { audit: t });
+	}
+	async #s() {
+		if (this.#n.children || this.#n.disallowedChildren) {
+			let [e, t] = n(this.host);
+			if (e.length) {
+				let { getInvalidSlottedChildrenWarning: e } = await import("../utils/audit-logs.js");
+				i(e(this.host.localName, t));
+			}
+		}
+	}
+	async #c() {
+		if (this.#n.parents) {
+			let [e, n] = t(this.host);
+			if (!e) {
+				let { getInvalidParentWarning: e } = await import("../utils/audit-logs.js");
+				i(e(this.host.localName, n.join(", ")));
+			}
+		}
+	}
+};
+//#endregion
+export { o as AuditController, a as audit, r as excessiveInstanceLimit };
+
+//# sourceMappingURL=audit.controller.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"audit.controller.js","names":["#hostAuditState","#production","#hostMetadata","#initializeAudit","#auditExcessiveInstanceLimit","#auditSlots","#auditParentElement","#cleanupExcessiveInstanceLimit","#update"],"sources":["../../../src/internal/controllers/audit.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 { GlobalStateService } from '../services/global.service.js';\nimport { auditSlots, auditParentElement } from '../utils/audit.js';\n\nexport const excessiveInstanceLimit = 50;\n\nexport interface AuditOptions {\n  excessiveInstanceLimit?: number;\n  alternates?: { name: string; use: string }[];\n}\n\nexport interface AuditMetadata {\n  parents?: string[];\n  children?: string[];\n  disallowedChildren?: string[];\n}\n\ninterface AuditRegistry {\n  [key: string]: {\n    count?: number;\n    excessiveInstanceLimitAudited?: boolean;\n  };\n}\n\nasync function log(message: string) {\n  const { LogService } = await import('../services/log.service.js');\n  LogService.warn(message);\n}\n\nexport function audit<T extends Audit>(options: AuditOptions = {}): ClassDecorator {\n  return (target: LegacyDecoratorTarget) =>\n    target.addInitializer!((instance: T) => new AuditController(instance, options));\n}\n\nexport type Audit = ReactiveElement;\n\nexport class AuditController<T extends Audit> implements ReactiveController {\n  get #hostAuditState() {\n    return GlobalStateService.state.audit[this.host.localName] ?? { count: 0 };\n  }\n\n  get #production() {\n    return GlobalStateService.state.env === 'production';\n  }\n\n  get #hostMetadata() {\n    return (this.host.constructor as unknown as { metadata: AuditMetadata }).metadata;\n  }\n\n  constructor(\n    private host: T,\n    private options: AuditOptions\n  ) {\n    if (!this.#production) {\n      this.host.addController(this);\n      this.#initializeAudit();\n    }\n  }\n\n  async hostConnected() {\n    await this.host.updateComplete;\n    if (!this.#production) {\n      void this.#auditExcessiveInstanceLimit();\n      void this.#auditSlots();\n      void this.#auditParentElement();\n    }\n  }\n\n  hostDisconnected() {\n    this.#cleanupExcessiveInstanceLimit();\n  }\n\n  #initializeAudit() {\n    if (!GlobalStateService.state.audit[this.host.localName]) {\n      this.#update({ [this.host.localName]: { count: 0 } });\n    }\n  }\n\n  async #auditExcessiveInstanceLimit() {\n    if (this.options.excessiveInstanceLimit !== undefined) {\n      if (\n        this.#hostAuditState.count! > this.options.excessiveInstanceLimit &&\n        !this.#hostAuditState.excessiveInstanceLimitAudited\n      ) {\n        const { getExcessiveInstanceLimitWarning } = await import('../utils/audit-logs.js');\n        void log(getExcessiveInstanceLimitWarning(this.#hostAuditState.count!, this.host.localName));\n        this.#update({\n          [this.host.localName]: { count: this.#hostAuditState.count! + 1, excessiveInstanceLimitAudited: true }\n        });\n      } else {\n        this.#update({ [this.host.localName]: { count: this.#hostAuditState.count! + 1 } });\n      }\n    }\n  }\n\n  #cleanupExcessiveInstanceLimit() {\n    if (this.options.excessiveInstanceLimit) {\n      this.#update({\n        [this.host.localName]: { count: this.#hostAuditState.count! - 1, excessiveInstanceLimitAudited: false }\n      });\n    }\n  }\n\n  #update(audit: AuditRegistry) {\n    GlobalStateService.dispatch('NVE_ELEMENTS_AUDIT_UPDATE', { audit } as Partial<\n      typeof globalThis.NVE_ELEMENTS.state\n    >);\n  }\n\n  async #auditSlots() {\n    if (this.#hostMetadata.children || this.#hostMetadata.disallowedChildren) {\n      const [invalidElements, validElements] = auditSlots(this.host);\n      if (invalidElements.length) {\n        const { getInvalidSlottedChildrenWarning } = await import('../utils/audit-logs.js');\n        void log(getInvalidSlottedChildrenWarning(this.host.localName, validElements));\n      }\n    }\n  }\n\n  async #auditParentElement() {\n    if (this.#hostMetadata.parents) {\n      const [valid, validParents] = auditParentElement(this.host);\n      if (!valid) {\n        const { getInvalidParentWarning } = await import('../utils/audit-logs.js');\n        void log(getInvalidParentWarning(this.host.localName, validParents.join(', ')));\n      }\n    }\n  }\n}\n"],"mappings":";;;AAQA,IAAa,IAAyB;AAoBtC,eAAe,EAAI,GAAiB;CAClC,IAAM,EAAE,kBAAe,MAAM,OAAO;AACpC,GAAW,KAAK,EAAQ;;AAG1B,SAAgB,EAAuB,IAAwB,EAAE,EAAkB;AACjF,SAAQ,MACN,EAAO,gBAAiB,MAAgB,IAAI,EAAgB,GAAU,EAAQ,CAAC;;AAKnF,IAAa,IAAb,MAA4E;CAC1E,KAAA,IAAsB;AACpB,SAAO,EAAmB,MAAM,MAAM,KAAK,KAAK,cAAc,EAAE,OAAO,GAAG;;CAG5E,KAAA,IAAkB;AAChB,SAAO,EAAmB,MAAM,QAAQ;;CAG1C,KAAA,IAAoB;AAClB,SAAQ,KAAK,KAAK,YAAuD;;CAG3E,YACE,GACA,GACA;AACA,EAHQ,KAAA,OAAA,GACA,KAAA,UAAA,GAEH,MAAA,MACH,KAAK,KAAK,cAAc,KAAK,EAC7B,MAAA,GAAuB;;CAI3B,MAAM,gBAAgB;AAEpB,EADA,MAAM,KAAK,KAAK,gBACX,MAAA,MACE,MAAA,GAAmC,EACnC,MAAA,GAAkB,EAClB,MAAA,GAA0B;;CAInC,mBAAmB;AACjB,QAAA,GAAqC;;CAGvC,KAAmB;AACjB,EAAK,EAAmB,MAAM,MAAM,KAAK,KAAK,cAC5C,MAAA,EAAa,GAAG,KAAK,KAAK,YAAY,EAAE,OAAO,GAAG,EAAE,CAAC;;CAIzD,OAAA,IAAqC;AACnC,MAAI,KAAK,QAAQ,2BAA2B,KAAA,EAC1C,KACE,MAAA,EAAqB,QAAS,KAAK,QAAQ,0BAC3C,CAAC,MAAA,EAAqB,+BACtB;GACA,IAAM,EAAE,wCAAqC,MAAM,OAAO;AAE1D,GADK,EAAI,EAAiC,MAAA,EAAqB,OAAQ,KAAK,KAAK,UAAU,CAAC,EAC5F,MAAA,EAAa,GACV,KAAK,KAAK,YAAY;IAAE,OAAO,MAAA,EAAqB,QAAS;IAAG,+BAA+B;IAAM,EACvG,CAAC;QAEF,OAAA,EAAa,GAAG,KAAK,KAAK,YAAY,EAAE,OAAO,MAAA,EAAqB,QAAS,GAAG,EAAE,CAAC;;CAKzF,KAAiC;AAC/B,EAAI,KAAK,QAAQ,0BACf,MAAA,EAAa,GACV,KAAK,KAAK,YAAY;GAAE,OAAO,MAAA,EAAqB,QAAS;GAAG,+BAA+B;GAAO,EACxG,CAAC;;CAIN,GAAQ,GAAsB;AAC5B,IAAmB,SAAS,6BAA6B,EAAE,UAAO,CAEhE;;CAGJ,OAAA,IAAoB;AAClB,MAAI,MAAA,EAAmB,YAAY,MAAA,EAAmB,oBAAoB;GACxE,IAAM,CAAC,GAAiB,KAAiB,EAAW,KAAK,KAAK;AAC9D,OAAI,EAAgB,QAAQ;IAC1B,IAAM,EAAE,wCAAqC,MAAM,OAAO;AACrD,MAAI,EAAiC,KAAK,KAAK,WAAW,EAAc,CAAC;;;;CAKpF,OAAA,IAA4B;AAC1B,MAAI,MAAA,EAAmB,SAAS;GAC9B,IAAM,CAAC,GAAO,KAAgB,EAAmB,KAAK,KAAK;AAC3D,OAAI,CAAC,GAAO;IACV,IAAM,EAAE,+BAA4B,MAAM,OAAO;AAC5C,MAAI,EAAwB,KAAK,KAAK,WAAW,EAAa,KAAK,KAAK,CAAC,CAAC"}

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

@@ -0,0 +1,19 @@
+import { ReactiveController, ReactiveElement } from 'lit';
+import { I18nStrings } from '../services/i18n.service.js';
+export declare function i18n<T extends I18n>(): ClassDecorator;
+export type I18n = ReactiveElement & {
+    i18n: Partial<I18nStrings> & {
+        __set?: boolean;
+    };
+};
+export declare class I18nController<T extends I18n> implements ReactiveController {
+    #private;
+    private host;
+    get i18n(): Partial<I18nStrings & {
+        __set: boolean;
+    }>;
+    constructor(host: T);
+    hostConnected(): void;
+    hostDisconnected(): void;
+    hostUpdated(): void;
+}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"i18n.controller.examples.js","names":["#i18nController","#english","#french"],"sources":["../../../src/internal/controllers/i18n.controller.examples.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { I18nController } from '@nvidia-elements/core/internal';\nimport { I18nService } from '@nvidia-elements/core';\nimport '@nvidia-elements/core/card/define.js';\nimport '@nvidia-elements/core/button/define.js';\n\nexport default {\n  title: 'Internal/Controllers'\n}\n\nclass I18nItem extends LitElement {\n  #i18nController: I18nController<this> = new I18nController<this>(this);\n  @property({ type: Object }) i18n = this.#i18nController.i18n;\n\n  render() {\n    return html`<nve-card><pre style=\"padding: 24px\">${JSON.stringify(this.i18n, null, 2)}</pre></nve-card>`\n  }\n}\ncustomElements.get('i18n-item') || customElements.define('i18n-item', I18nItem);\n\nclass I18nDemo extends LitElement {\n  render() {\n    return html`\n    <div nve-layout=\"column gap:md\">\n      <div nve-layout=\"row gap:sm\">\n        <nve-button @click=${() => this.#english()}>English</nve-button>\n        <nve-button @click=${() => this.#french()}>French</nve-button>\n      </div>\n      \n      <div nve-layout=\"grid span-items:6 gap:sm\">\n        <i18n-item .i18n=${{ \"close\": \"dismiss task failure warning\" }}></i18n-item>\n        <i18n-item></i18n-item>\n      </div>\n    </div>\n    `\n  }\n\n  createRenderRoot() {\n    return this;\n  }\n\n  #french() {\n    I18nService.update({\n      close: 'fermer',\n      expand: 'étendre',\n      sort: 'classer',\n      show: 'montrer',\n      hide: 'cacher',\n      loading: 'bourrage'\n    });\n  }\n\n  #english() {\n    I18nService.update({\n      close: 'close',\n      expand: 'expand',\n      sort: 'sort',\n      show: 'show',\n      hide: 'hide',\n      loading: 'loading'\n    });\n  }\n}\ncustomElements.get('i18n-demo') || customElements.define('i18n-demo', I18nDemo);\n\n/**\n * @summary Internationalization controller with dynamic language switching between English and French.\n * @tags test-case\n */\nexport const I18nControllerDemo = {\n  render: () => html`<i18n-demo></i18n-demo>`\n}\n"],"mappings":";AAGA,IAAA,IAAe"}

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

@@ -0,0 +1,16 @@
+{
+  "entrypoint": "@nvidia-elements/core/internal/controllers/i18n.controller.examples.json",
+  "items": [
+    {
+      "id": "core-internal-controllers-i18n.controller_i18n-controller-demo",
+      "name": "I18nControllerDemo",
+      "template": "<i18n-demo></i18n-demo>\n",
+      "summary": "Internationalization controller with dynamic language switching between English and French.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    }
+  ]
+}

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

@@ -0,0 +1,38 @@
+import { I18nService as e } from "../services/i18n.service.js";
+//#region src/internal/controllers/i18n.controller.ts
+function t() {
+	return (e) => e.addInitializer((e) => new n(e));
+}
+var n = class {
+	get i18n() {
+		return {
+			...e.i18n,
+			...this.host.i18n,
+			__set: !1
+		};
+	}
+	#e = {};
+	constructor(e) {
+		this.host = e, this.host.addController(this);
+	}
+	hostConnected() {
+		globalThis.document.addEventListener("NVE_ELEMENTS_I18N_UPDATE", this.#t);
+	}
+	hostDisconnected() {
+		globalThis.document.removeEventListener("NVE_ELEMENTS_I18N_UPDATE", this.#t);
+	}
+	hostUpdated() {
+		this.host.i18n.__set === void 0 && (this.#e = this.host.i18n, this.#t());
+	}
+	#t = () => {
+		this.host.i18n = {
+			...e.i18n,
+			...this.#e,
+			__set: !0
+		};
+	};
+};
+//#endregion
+export { n as I18nController, t as i18n };
+
+//# sourceMappingURL=i18n.controller.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"i18n.controller.js","names":["#update","#overrides"],"sources":["../../../src/internal/controllers/i18n.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 type { I18nStrings } from '../services/i18n.service.js';\nimport { I18nService } from '../services/i18n.service.js';\n\nexport function i18n<T extends I18n>(): ClassDecorator {\n  return (target: LegacyDecoratorTarget) => target.addInitializer!((instance: T) => new I18nController(instance));\n}\n\nexport type I18n = ReactiveElement & { i18n: Partial<I18nStrings> & { __set?: boolean } };\n\nexport class I18nController<T extends I18n> implements ReactiveController {\n  get i18n(): Partial<I18nStrings & { __set: boolean }> {\n    return { ...I18nService.i18n, ...this.host.i18n, __set: false };\n  }\n\n  #overrides: Partial<I18nStrings> = {};\n\n  constructor(private host: T) {\n    this.host.addController(this);\n  }\n\n  hostConnected() {\n    globalThis.document.addEventListener('NVE_ELEMENTS_I18N_UPDATE', this.#update);\n  }\n\n  hostDisconnected() {\n    globalThis.document.removeEventListener('NVE_ELEMENTS_I18N_UPDATE', this.#update);\n  }\n\n  hostUpdated() {\n    if (this.host.i18n.__set === undefined) {\n      // if the host lacks a set, an override exists\n      this.#overrides = this.host.i18n;\n      this.#update();\n    }\n  }\n\n  #update = () => {\n    this.host.i18n = { ...I18nService.i18n, ...this.#overrides, __set: true };\n  };\n}\n"],"mappings":";;AAQA,SAAgB,IAAuC;AACrD,SAAQ,MAAkC,EAAO,gBAAiB,MAAgB,IAAI,EAAe,EAAS,CAAC;;AAKjH,IAAa,IAAb,MAA0E;CACxE,IAAI,OAAkD;AACpD,SAAO;GAAE,GAAG,EAAY;GAAM,GAAG,KAAK,KAAK;GAAM,OAAO;GAAO;;CAGjE,KAAmC,EAAE;CAErC,YAAY,GAAiB;AAC3B,EADkB,KAAA,OAAA,GAClB,KAAK,KAAK,cAAc,KAAK;;CAG/B,gBAAgB;AACd,aAAW,SAAS,iBAAiB,4BAA4B,MAAA,EAAa;;CAGhF,mBAAmB;AACjB,aAAW,SAAS,oBAAoB,4BAA4B,MAAA,EAAa;;CAGnF,cAAc;AACZ,EAAI,KAAK,KAAK,KAAK,UAAU,KAAA,MAE3B,MAAA,IAAkB,KAAK,KAAK,MAC5B,MAAA,GAAc;;CAIlB,WAAgB;AACd,OAAK,KAAK,OAAO;GAAE,GAAG,EAAY;GAAM,GAAG,MAAA;GAAiB,OAAO;GAAM"}

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

@@ -0,0 +1,31 @@
+import { ReactiveController, ReactiveElement } from 'lit';
+import { KeynavCode } from '../utils/dom.js';
+export interface KeynavGridConfig {
+    grid?: HTMLElement;
+    columnRow?: HTMLElement;
+    columns?: NodeListOf<HTMLElement> | HTMLElement[];
+    rows: NodeListOf<HTMLElement> | HTMLElement[];
+    cells: NodeListOf<HTMLElement> | HTMLElement[];
+}
+export interface KeynavGridElement {
+    keynavGridConfig: KeynavGridConfig;
+}
+/**
+ * https://w3c.github.io/aria-practices/#gridNav_focus
+ */
+export declare function keyNavigationGrid<T extends ReactiveElement & KeynavGridElement>(): ClassDecorator;
+export declare class KeyNavigationGridController<T extends ReactiveElement & KeynavGridElement> implements ReactiveController {
+    #private;
+    private host;
+    constructor(host: T);
+    hostConnected(): Promise<void>;
+    hostDisconnected(): void;
+}
+export declare function getNextKeyGridItem(cells: HTMLElement[], rows: HTMLElement[], config: {
+    code: KeynavCode | string;
+    ctrlKey: boolean;
+    dir: string;
+}): {
+    x: number;
+    y: number;
+};

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

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

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

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

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

@@ -0,0 +1,25 @@
+{
+  "entrypoint": "@nvidia-elements/core/internal/controllers/keynav-grid.controller.examples.json",
+  "items": [
+    {
+      "id": "core-internal-controllers-keynav-grid.controller_styles",
+      "name": "styles",
+      "template": "section { display: grid; gap: 4px; grid-template-columns: repeat(10, 50px); } .vertical { grid-template-rows: repeat(10,\n1fr); grid-template-columns: 50px; } .row { display: contents; } button { width: 100%; height: 30px; min-width: 30px;\ndisplay: block; } button[selected] { background: green; color: white; }\n",
+      "summary": "",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-internal-controllers-keynav-grid.controller_grid-demo",
+      "name": "GridDemo",
+      "template": "<demo-key-navigation-grid></demo-key-navigation-grid>\n",
+      "summary": "Grid-based keyboard navigation controller with arrow key support across rows and columns.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    }
+  ]
+}

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

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

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

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

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

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

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

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

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

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

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

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

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

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