@nvidia-elements/core 2.0.1 → 2.0.3

package/dist/forms/utils/states.js

@@ -3,66 +3,74 @@ import { ControlMessage as i } from "../control-message/control-message2.js";
 //#region src/forms/utils/states.ts
 var a = "input, select, selectmenu, textarea, [nve-control]";
 function o(e, t) {
+	let n = [];
 	if (!e.input.form?.noValidate && !e.input.formNoValidate && !e.input.hasAttribute("formnovalidate")) {
-		f(t);
-		let n = () => {
-			e.input.validity?.valid && (e._internals.states.delete("invalid"), e._internals.states.add("valid"), e.status = null), m(e, t);
-		}, r = () => {
-			e.status = null, e._internals.states.delete("valid"), e._internals.states.delete("invalid"), f(t);
+		m(t);
+		let r = () => {
+			e.input.validity?.valid && (e._internals.states.delete("invalid"), e._internals.states.add("valid"), e.status = null), g(e, t);
+		}, i = () => {
+			e.status = null, e._internals.states.delete("valid"), e._internals.states.delete("invalid"), m(t);
 		};
-		e.input.addEventListener("blur", () => {
-			e.input.checkValidity(), n();
-		}), e.input.addEventListener("input", () => {
-			n();
-		}), e.input.addEventListener("invalid", () => {
-			t.find((e) => e.error) && (f(t), p(e, t)), e.status = "error", e._internals.states.delete("valid"), e._internals.states.add("invalid");
-		}), e.addEventListener("reset", () => r()), e.input.form?.addEventListener("reset", () => r());
+		n.push(f(e.input, "blur", () => {
+			e.input.checkValidity(), r();
+		}), f(e.input, "input", () => {
+			r();
+		}), f(e.input, "invalid", () => {
+			t.find((e) => e.error) && (m(t), h(e, t)), e.status = "error", e._internals.states.delete("valid"), e._internals.states.add("invalid");
+		}), f(e, "reset", i)), e.input.form && n.push(f(e.input.form, "reset", i));
 	}
-	e.shadowRoot.addEventListener("slotchange", () => {
+	return n.push(f(e.shadowRoot, "slotchange", () => {
 		let t = Array.from(e.querySelectorAll(i.metadata.tag));
 		e._internals.states.delete("valid"), e._internals.states.delete("invalid"), t.find((e) => !e.hidden && (e.status === "error" || e.error)) ? e._internals.states.add("invalid") : e._internals.states.add("valid");
-	});
+	})), n;
 }
 function s(e) {
 	let t = [], r = e._internals.states;
-	return e.input.checked ? r.add("checked") : r.delete("checked"), e.input.indeterminate ? r.add("indeterminate") : r.delete("indeterminate"), e.input.addEventListener("focus", () => e._internals.states.add("focus")), e.input.addEventListener("input", () => e._internals.states.add("dirty")), e.input.addEventListener("blur", () => {
+	return e.input.checked ? r.add("checked") : r.delete("checked"), e.input.indeterminate ? r.add("indeterminate") : r.delete("indeterminate"), t.push(...c(e)), t.push(n(e.input, "readonly", (e) => e === "" || e ? r.add("readonly") : r.delete("readonly")), n(e.input, "checked", () => e.input.checked ? r.add("checked") : r.delete("checked")), n(e.input, "disabled", (e) => e === "" || e ? r.add("disabled") : r.delete("disabled")), n(e.input, "indeterminate", () => e.input.indeterminate ? r.add("indeterminate") : r.delete("indeterminate"))), t;
+}
+function c(e) {
+	let t = [], n = e._internals.states;
+	return t.push(f(e.input, "focus", () => e._internals.states.add("focus")), f(e.input, "input", () => e._internals.states.add("dirty")), f(e.input, "blur", () => {
 		e._internals.states.add("touched"), e._internals.states.delete("focus");
-	}), e.input.getRootNode().addEventListener("change", (t) => {
-		t.target.name === e.input?.name && (e.input.checked ? r.add("checked") : r.delete("checked"));
-	}), e.input.form?.addEventListener("reset", () => {
+	}), f(e.input.getRootNode(), "change", (t) => {
+		t.target.name === e.input?.name && (e.input.checked ? n.add("checked") : n.delete("checked"));
+	})), e.input.form && t.push(f(e.input.form, "reset", () => {
 		e._internals.states.delete("touched"), e._internals.states.delete("dirty"), e._internals.states.delete("error"), e._internals.states.delete("success"), e.requestUpdate();
-	}), t.push(n(e.input, "readonly", (e) => e === "" || e ? r.add("readonly") : r.delete("readonly")), n(e.input, "checked", () => e.input.checked ? r.add("checked") : r.delete("checked")), n(e.input, "disabled", (e) => e === "" || e ? r.add("disabled") : r.delete("disabled")), n(e.input, "indeterminate", () => e.input.indeterminate ? r.add("indeterminate") : r.delete("indeterminate"))), t;
+	})), t;
 }
-function c(t) {
-	return l(t), e(t, "disabled", () => l(t));
+function l(t) {
+	return u(t), e(t, "disabled", () => u(t));
 }
-function l(e) {
+function u(e) {
 	Array.from(e.inputs).find((e) => e.disabled) ? e._internals.states.add("disabled") : e._internals.states.delete("disabled");
 }
-function u(e, n) {
-	d(e, n.find((e) => !e.hidden));
+function d(e, n) {
+	p(e, n.find((e) => !e.hidden));
 	let a = [];
 	return a.push(t(e, ["hidden", "status"], (t) => {
 		let n = t.target;
-		r(n, i) && d(e, n);
-	})), e.shadowRoot.addEventListener("slotchange", () => {
+		r(n, i) && p(e, n);
+	})), a.push(f(e.shadowRoot, "slotchange", () => {
 		let t = Array.from(e.querySelectorAll(i.metadata.tag)).find((e) => e.status && !e.hidden);
 		e._internals.states.delete("error"), e._internals.states.delete("success"), t && e._internals.states.add(t.status);
-	}), a;
+	})), a;
+}
+function f(e, t, n) {
+	return e.addEventListener(t, n), { disconnect: () => e.removeEventListener(t, n) };
 }
-function d(e, t) {
+function p(e, t) {
 	e._internals.states.delete("error"), e._internals.states.delete("success"), t?.status?.length && !t?.hidden && e._internals.states.add(t.status);
 }
-function f(e) {
+function m(e) {
 	e.filter((e) => e.hasAttribute("error")).forEach((e) => e.setAttribute("hidden", ""));
 }
-function p(e, t) {
+function h(e, t) {
 	t.find((t) => t.error && e.input.validity[t.error])?.removeAttribute("hidden");
 }
-function m(e, t) {
+function g(e, t) {
 	t.find((e) => e.error) && e.input.validity.valid && t.filter((t) => t.error && !e.input.validity[t.error]).forEach((e) => e.setAttribute("hidden", ""));
 }
 //#endregion
-export { a as inputQuery, c as setupControlGroupStates, s as setupControlStates, u as setupControlStatusStates, o as setupControlValidationStates };
+export { a as inputQuery, l as setupControlGroupStates, s as setupControlStates, d as setupControlStatusStates, o as setupControlValidationStates };
 
 //# sourceMappingURL=states.js.map

package/dist/forms/utils/states.js.map

@@ -1 +1 @@
-{"version":3,"file":"states.js","names":[],"sources":["../../../src/forms/utils/states.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport {\n  getAttributeChanges,\n  getAttributeListChanges,\n  getElementUpdate,\n  matchesElementName\n} from '@nvidia-elements/core/internal';\nimport type { ControlGroup } from '../control-group/control-group.js';\nimport { ControlMessage } from '../control-message/control-message.js';\nimport type { Control } from '../control/control.js';\n\nexport const inputQuery = 'input, select, selectmenu, textarea, [nve-control]';\n\n/**\n * Adds validation states to custom element\n * :state(valid) form control is in a valid state\n * :state(invalid) form control is in a invalid state\n */\n// eslint-disable-next-line max-lines-per-function\nexport function setupControlValidationStates(control: Control, messages: ControlMessage[]) {\n  if (\n    !control.input.form?.noValidate &&\n    !control.input.formNoValidate &&\n    !control.input.hasAttribute('formnovalidate')\n  ) {\n    hideAllValidationMessages(messages);\n\n    /**\n     * updateValidityState() logic triggered by input blur() or input() change events\n     */\n    const updateValidityState = () => {\n      if (control.input.validity?.valid) {\n        control._internals.states.delete('invalid');\n        control._internals.states.add('valid');\n        control.status = null!;\n      }\n\n      hideInactiveValidationMessages(control, messages);\n    };\n\n    const resetValidityState = () => {\n      control.status = null!;\n      control._internals.states.delete('valid');\n      control._internals.states.delete('invalid');\n      hideAllValidationMessages(messages);\n    };\n\n    control.input.addEventListener('blur', () => {\n      control.input.checkValidity();\n      updateValidityState();\n    });\n\n    control.input.addEventListener('input', () => {\n      updateValidityState();\n    });\n\n    control.input.addEventListener('invalid', () => {\n      if (messages.find(m => m.error)) {\n        hideAllValidationMessages(messages);\n        showActiveValidationMessages(control, messages);\n      }\n\n      control.status = 'error';\n      control._internals.states.delete('valid');\n      control._internals.states.add('invalid');\n    });\n\n    control.addEventListener('reset', () => resetValidityState());\n    control.input.form?.addEventListener('reset', () => resetValidityState());\n  }\n\n  control.shadowRoot!.addEventListener('slotchange', () => {\n    const current = Array.from(control.querySelectorAll<ControlMessage>(ControlMessage.metadata.tag));\n    control._internals.states.delete('valid');\n    control._internals.states.delete('invalid');\n    if (current.find(m => !m.hidden && (m.status === 'error' || m.error))) {\n      control._internals.states.add('invalid');\n    } else {\n      control._internals.states.add('valid');\n    }\n  });\n}\n\n/**\n * Adds control interaction states to custom element\n * :state(checked) form control is in a checked state\n * :state(disabled) form control is in a disabled state\n * :state(readonly) form control is in a readonly state\n * :state(touched) form control received focus and then blurred\n * :state(dirty) user modified the form control\n */\nexport function setupControlStates(control: Control) {\n  const observers: MutationObserver[] = [];\n  const states = control._internals.states;\n  control.input.checked ? states.add('checked') : states.delete('checked');\n  control.input.indeterminate ? states.add('indeterminate') : states.delete('indeterminate');\n  control.input.addEventListener('focus', () => control._internals.states.add('focus'));\n  control.input.addEventListener('input', () => control._internals.states.add('dirty'));\n  control.input.addEventListener('blur', () => {\n    control._internals.states.add('touched');\n    control._internals.states.delete('focus');\n  });\n\n  control.input.getRootNode().addEventListener('change', (e: Event) => {\n    if ((e.target as HTMLInputElement).name === control.input?.name) {\n      control.input.checked ? states.add('checked') : states.delete('checked');\n    }\n  });\n\n  control.input.form?.addEventListener('reset', () => {\n    control._internals.states.delete('touched');\n    control._internals.states.delete('dirty');\n    control._internals.states.delete('error');\n    control._internals.states.delete('success');\n    control.requestUpdate();\n  });\n\n  observers.push(\n    getElementUpdate(control.input, 'readonly', value =>\n      (value === '' ? true : value) ? states.add('readonly') : states.delete('readonly')\n    ),\n    getElementUpdate(control.input, 'checked', () =>\n      control.input.checked ? states.add('checked') : states.delete('checked')\n    ),\n    getElementUpdate(control.input, 'disabled', value =>\n      (value === '' ? true : value) ? states.add('disabled') : states.delete('disabled')\n    ),\n    getElementUpdate(control.input, 'indeterminate', () =>\n      control.input.indeterminate ? states.add('indeterminate') : states.delete('indeterminate')\n    )\n  );\n  return observers;\n}\n\n/**\n * Adds control group interaction states to custom element\n * :state(disabled) any form control within group is in a disabled state\n */\nexport function setupControlGroupStates(controlGroup: ControlGroup) {\n  toggleControlGroupDisabledState(controlGroup);\n  return getAttributeChanges(controlGroup, 'disabled', () => toggleControlGroupDisabledState(controlGroup));\n}\n\nfunction toggleControlGroupDisabledState(controlGroup: ControlGroup) {\n  if (Array.from(controlGroup.inputs).find(i => i.disabled)) {\n    controlGroup._internals.states.add('disabled');\n  } else {\n    controlGroup._internals.states.delete('disabled');\n  }\n}\n\n/**\n * Adds control status states to custom element\n * :state(error) form control is in a error state\n * :state(success) form control is in a success state\n */\nexport function setupControlStatusStates(control: Control | ControlGroup, messages: ControlMessage[]) {\n  updateControlStatusState(control, messages.find(m => !m.hidden)!);\n  const observers: MutationObserver[] = [];\n  observers.push(\n    getAttributeListChanges(control, ['hidden', 'status'], mutation => {\n      const target = mutation.target as ControlMessage;\n      if (matchesElementName(target, ControlMessage)) {\n        updateControlStatusState(control, target);\n      }\n    })\n  );\n\n  control.shadowRoot!.addEventListener('slotchange', () => {\n    const current = Array.from(control.querySelectorAll<ControlMessage>(ControlMessage.metadata.tag));\n    const message = current.find(m => m.status && !m.hidden);\n    control._internals.states.delete('error');\n    control._internals.states.delete('success');\n    if (message) {\n      control._internals.states.add(message.status!);\n    }\n  });\n\n  return observers;\n}\n\nexport function updateControlStatusState(control: Control | ControlGroup, message: ControlMessage) {\n  control._internals.states.delete('error');\n  control._internals.states.delete('success');\n\n  if (message?.status?.length && !message?.hidden) {\n    control._internals.states.add(message.status);\n  }\n}\n\nexport function showNonValidationMessages(messages: ControlMessage[]) {\n  messages.filter(m => !m.hasAttribute('error')).forEach(m => m.removeAttribute('hidden'));\n}\n\nexport function hideAllValidationMessages(messages: ControlMessage[]) {\n  messages.filter(m => m.hasAttribute('error')).forEach(m => m.setAttribute('hidden', ''));\n}\n\nexport function showActiveValidationMessages(control: Control, messages: ControlMessage[]) {\n  messages.find(m => m.error && control.input.validity[m.error])?.removeAttribute('hidden');\n}\n\nexport function hideInactiveValidationMessages(control: Control, messages: ControlMessage[]) {\n  if (messages.find(m => m.error) && control.input.validity.valid) {\n    messages.filter(m => m.error && !control.input.validity[m.error!]).forEach(m => m.setAttribute('hidden', ''));\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"states.js","names":[],"sources":["../../../src/forms/utils/states.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport {\n  getAttributeChanges,\n  getAttributeListChanges,\n  getElementUpdate,\n  matchesElementName\n} from '@nvidia-elements/core/internal';\nimport type { ControlGroup } from '../control-group/control-group.js';\nimport { ControlMessage } from '../control-message/control-message.js';\nimport type { Control } from '../control/control.js';\n\nexport const inputQuery = 'input, select, selectmenu, textarea, [nve-control]';\nexport interface ControlStateCleanup {\n  disconnect: () => void;\n}\n\n/**\n * Adds validation states to custom element\n * :state(valid) form control is in a valid state\n * :state(invalid) form control is in a invalid state\n */\n// eslint-disable-next-line max-lines-per-function\nexport function setupControlValidationStates(control: Control, messages: ControlMessage[]) {\n  const cleanups: ControlStateCleanup[] = [];\n\n  if (\n    !control.input.form?.noValidate &&\n    !control.input.formNoValidate &&\n    !control.input.hasAttribute('formnovalidate')\n  ) {\n    hideAllValidationMessages(messages);\n\n    /**\n     * updateValidityState() logic triggered by input blur() or input() change events\n     */\n    const updateValidityState = () => {\n      if (control.input.validity?.valid) {\n        control._internals.states.delete('invalid');\n        control._internals.states.add('valid');\n        control.status = null!;\n      }\n\n      hideInactiveValidationMessages(control, messages);\n    };\n\n    const resetValidityState = () => {\n      control.status = null!;\n      control._internals.states.delete('valid');\n      control._internals.states.delete('invalid');\n      hideAllValidationMessages(messages);\n    };\n\n    const onBlur = () => {\n      control.input.checkValidity();\n      updateValidityState();\n    };\n\n    const onInput = () => {\n      updateValidityState();\n    };\n\n    const onInvalid = () => {\n      if (messages.find(m => m.error)) {\n        hideAllValidationMessages(messages);\n        showActiveValidationMessages(control, messages);\n      }\n\n      control.status = 'error';\n      control._internals.states.delete('valid');\n      control._internals.states.add('invalid');\n    };\n\n    cleanups.push(\n      addCleanupListener(control.input, 'blur', onBlur),\n      addCleanupListener(control.input, 'input', onInput),\n      addCleanupListener(control.input, 'invalid', onInvalid),\n      addCleanupListener(control, 'reset', resetValidityState)\n    );\n\n    if (control.input.form) {\n      cleanups.push(addCleanupListener(control.input.form, 'reset', resetValidityState));\n    }\n  }\n\n  const onSlotChange = () => {\n    const current = Array.from(control.querySelectorAll<ControlMessage>(ControlMessage.metadata.tag));\n    control._internals.states.delete('valid');\n    control._internals.states.delete('invalid');\n    if (current.find(m => !m.hidden && (m.status === 'error' || m.error))) {\n      control._internals.states.add('invalid');\n    } else {\n      control._internals.states.add('valid');\n    }\n  };\n  cleanups.push(addCleanupListener(control.shadowRoot!, 'slotchange', onSlotChange));\n\n  return cleanups;\n}\n\n/**\n * Adds control interaction states to custom element\n * :state(checked) form control is in a checked state\n * :state(disabled) form control is in a disabled state\n * :state(readonly) form control is in a readonly state\n * :state(touched) form control received focus and then blurred\n * :state(dirty) user modified the form control\n */\nexport function setupControlStates(control: Control) {\n  const observers: ControlStateCleanup[] = [];\n  const states = control._internals.states;\n  control.input.checked ? states.add('checked') : states.delete('checked');\n  control.input.indeterminate ? states.add('indeterminate') : states.delete('indeterminate');\n\n  observers.push(...addControlInteractionListeners(control));\n  observers.push(\n    getElementUpdate(control.input, 'readonly', value =>\n      (value === '' ? true : value) ? states.add('readonly') : states.delete('readonly')\n    ),\n    getElementUpdate(control.input, 'checked', () =>\n      control.input.checked ? states.add('checked') : states.delete('checked')\n    ),\n    getElementUpdate(control.input, 'disabled', value =>\n      (value === '' ? true : value) ? states.add('disabled') : states.delete('disabled')\n    ),\n    getElementUpdate(control.input, 'indeterminate', () =>\n      control.input.indeterminate ? states.add('indeterminate') : states.delete('indeterminate')\n    )\n  );\n  return observers;\n}\n\nfunction addControlInteractionListeners(control: Control): ControlStateCleanup[] {\n  const cleanups: ControlStateCleanup[] = [];\n  const states = control._internals.states;\n  const onFocus = () => control._internals.states.add('focus');\n  const onInput = () => control._internals.states.add('dirty');\n  const onBlur = () => {\n    control._internals.states.add('touched');\n    control._internals.states.delete('focus');\n  };\n\n  const onRootChange = (e: Event) => {\n    if ((e.target as HTMLInputElement).name === control.input?.name) {\n      control.input.checked ? states.add('checked') : states.delete('checked');\n    }\n  };\n\n  const onFormReset = () => {\n    control._internals.states.delete('touched');\n    control._internals.states.delete('dirty');\n    control._internals.states.delete('error');\n    control._internals.states.delete('success');\n    control.requestUpdate();\n  };\n\n  cleanups.push(\n    addCleanupListener(control.input, 'focus', onFocus),\n    addCleanupListener(control.input, 'input', onInput),\n    addCleanupListener(control.input, 'blur', onBlur),\n    addCleanupListener(control.input.getRootNode(), 'change', onRootChange)\n  );\n\n  if (control.input.form) {\n    cleanups.push(addCleanupListener(control.input.form, 'reset', onFormReset));\n  }\n\n  return cleanups;\n}\n\n/**\n * Adds control group interaction states to custom element\n * :state(disabled) any form control within group is in a disabled state\n */\nexport function setupControlGroupStates(controlGroup: ControlGroup) {\n  toggleControlGroupDisabledState(controlGroup);\n  return getAttributeChanges(controlGroup, 'disabled', () => toggleControlGroupDisabledState(controlGroup));\n}\n\nfunction toggleControlGroupDisabledState(controlGroup: ControlGroup) {\n  if (Array.from(controlGroup.inputs).find(i => i.disabled)) {\n    controlGroup._internals.states.add('disabled');\n  } else {\n    controlGroup._internals.states.delete('disabled');\n  }\n}\n\n/**\n * Adds control status states to custom element\n * :state(error) form control is in a error state\n * :state(success) form control is in a success state\n */\nexport function setupControlStatusStates(control: Control | ControlGroup, messages: ControlMessage[]) {\n  updateControlStatusState(control, messages.find(m => !m.hidden)!);\n  const observers: ControlStateCleanup[] = [];\n  observers.push(\n    getAttributeListChanges(control, ['hidden', 'status'], mutation => {\n      const target = mutation.target as ControlMessage;\n      if (matchesElementName(target, ControlMessage)) {\n        updateControlStatusState(control, target);\n      }\n    })\n  );\n\n  const onSlotChange = () => {\n    const current = Array.from(control.querySelectorAll<ControlMessage>(ControlMessage.metadata.tag));\n    const message = current.find(m => m.status && !m.hidden);\n    control._internals.states.delete('error');\n    control._internals.states.delete('success');\n    if (message) {\n      control._internals.states.add(message.status!);\n    }\n  };\n  observers.push(addCleanupListener(control.shadowRoot!, 'slotchange', onSlotChange));\n\n  return observers;\n}\n\nfunction addCleanupListener(target: EventTarget, type: string, listener: EventListener): ControlStateCleanup {\n  target.addEventListener(type, listener);\n  return {\n    disconnect: () => target.removeEventListener(type, listener)\n  };\n}\n\nexport function updateControlStatusState(control: Control | ControlGroup, message: ControlMessage) {\n  control._internals.states.delete('error');\n  control._internals.states.delete('success');\n\n  if (message?.status?.length && !message?.hidden) {\n    control._internals.states.add(message.status);\n  }\n}\n\nexport function showNonValidationMessages(messages: ControlMessage[]) {\n  messages.filter(m => !m.hasAttribute('error')).forEach(m => m.removeAttribute('hidden'));\n}\n\nexport function hideAllValidationMessages(messages: ControlMessage[]) {\n  messages.filter(m => m.hasAttribute('error')).forEach(m => m.setAttribute('hidden', ''));\n}\n\nexport function showActiveValidationMessages(control: Control, messages: ControlMessage[]) {\n  messages.find(m => m.error && control.input.validity[m.error])?.removeAttribute('hidden');\n}\n\nexport function hideInactiveValidationMessages(control: Control, messages: ControlMessage[]) {\n  if (messages.find(m => m.error) && control.input.validity.valid) {\n    messages.filter(m => m.error && !control.input.validity[m.error!]).forEach(m => m.setAttribute('hidden', ''));\n  }\n}\n"],"mappings":"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"}

package/dist/grid/cell/cell2.js

@@ -10,7 +10,7 @@ var a = class extends r {
 	static {
 		this.metadata = {
 			tag: "nve-grid-cell",
-			version: "2.0.1"
+			version: "2.0.3"
 		};
 	}
 	render() {

package/dist/grid/column/column2.js

@@ -1,7 +1,7 @@
 import { appendRootNodeStyle as e } from "../../internal/utils/dom.js";
 import { attachInternals as t } from "../../internal/utils/a11y.js";
 import { useStyles as n } from "../../internal/styles/index.js";
-import { __decorate as r } from "../../_virtual/_@oxc-project_runtime@0.132.0/helpers/decorate.js";
+import { __decorate as r } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorate.js";
 import i from "./column.js";
 import { LitElement as a, html as o } from "lit";
 import { property as s } from "lit/decorators/property.js";
@@ -13,7 +13,7 @@ var c = class r extends a {
 	static {
 		this.metadata = {
 			tag: "nve-grid-column",
-			version: "2.0.1"
+			version: "2.0.3"
 		};
 	}
 	get #e() {

package/dist/grid/footer/footer2.js

@@ -1,7 +1,7 @@
 import { attachInternals as e } from "../../internal/utils/a11y.js";
 import { hostAttr as t } from "../../internal/decorators/host-attr.js";
 import { useStyles as n } from "../../internal/styles/index.js";
-import { __decorate as r } from "../../_virtual/_@oxc-project_runtime@0.132.0/helpers/decorate.js";
+import { __decorate as r } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorate.js";
 import i from "./footer.js";
 import { LitElement as a, html as o } from "lit";
 //#region src/grid/footer/footer.ts
@@ -15,7 +15,7 @@ var s = class extends a {
 	static {
 		this.metadata = {
 			tag: "nve-grid-footer",
-			version: "2.0.1"
+			version: "2.0.3"
 		};
 	}
 	static {

package/dist/grid/grid2.js

@@ -4,7 +4,7 @@ import { keyNavigationGrid as r } from "../internal/controllers/keynav-grid.cont
 import { attachInternals as i } from "../internal/utils/a11y.js";
 import { stateScroll as a } from "../internal/controllers/state-scroll.controller.js";
 import { useStyles as o } from "../internal/styles/index.js";
-import { __decorate as s } from "../_virtual/_@oxc-project_runtime@0.132.0/helpers/decorate.js";
+import { __decorate as s } from "../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorate.js";
 import { GridPlaceholder as c } from "./placeholder/placeholder2.js";
 import { GridColumn as l } from "./column/column2.js";
 import { GridCell as u } from "./cell/cell2.js";
@@ -23,7 +23,7 @@ var y = class extends g {
 	static {
 		this.metadata = {
 			tag: "nve-grid",
-			version: "2.0.1",
+			version: "2.0.3",
 			children: [
 				d.metadata.tag,
 				f.metadata.tag,

package/dist/grid/header/header2.js

@@ -4,7 +4,7 @@ import { debounce as n } from "../../internal/utils/events.js";
 import { LogService as r } from "../../internal/services/log.service.js";
 import { attachInternals as i } from "../../internal/utils/a11y.js";
 import { useStyles as a } from "../../internal/styles/index.js";
-import { __decorate as o } from "../../_virtual/_@oxc-project_runtime@0.132.0/helpers/decorate.js";
+import { __decorate as o } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorate.js";
 import s from "./header.js";
 import { GridColumn as c } from "../column/column2.js";
 import { GridCell as l } from "../cell/cell2.js";
@@ -19,7 +19,7 @@ var m = class extends d {
 	static {
 		this.metadata = {
 			tag: "nve-grid-header",
-			version: "2.0.1",
+			version: "2.0.3",
 			children: [c.metadata.tag]
 		};
 	}

package/dist/grid/placeholder/placeholder2.js

@@ -10,7 +10,7 @@ var a = class extends r {
 	static {
 		this.metadata = {
 			tag: "nve-grid-placeholder",
-			version: "2.0.1"
+			version: "2.0.3"
 		};
 	}
 	render() {

package/dist/grid/row/row2.js

@@ -2,7 +2,7 @@ import { audit as e } from "../../internal/controllers/audit.controller.js";
 import { attachInternals as t } from "../../internal/utils/a11y.js";
 import { stateSelected as n } from "../../internal/controllers/state-selected.controller.js";
 import { useStyles as r } from "../../internal/styles/index.js";
-import { __decorate as i } from "../../_virtual/_@oxc-project_runtime@0.132.0/helpers/decorate.js";
+import { __decorate as i } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorate.js";
 import { GridCell as a } from "../cell/cell2.js";
 import o from "./row.js";
 import { LitElement as s, html as c } from "lit";
@@ -15,7 +15,7 @@ var u = class extends s {
 	static {
 		this.metadata = {
 			tag: "nve-grid-row",
-			version: "2.0.1",
+			version: "2.0.3",
 			children: [a.metadata.tag]
 		};
 	}

package/dist/icon/icon2.js

@@ -3,7 +3,7 @@ import { attachInternals as t } from "../internal/utils/a11y.js";
 import { useStyles as n } from "../internal/styles/index.js";
 import { ICON_IMPORTS as r } from "./icons.js";
 import i from "./icon.js";
-import { __decorate as a } from "../_virtual/_@oxc-project_runtime@0.132.0/helpers/decorate.js";
+import { __decorate as a } from "../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorate.js";
 import { LitElement as o, html as s, isServer as c } from "lit";
 import { property as l } from "lit/decorators/property.js";
 import { unsafeSVG as u } from "lit/directives/unsafe-svg.js";
@@ -16,7 +16,7 @@ var f = class e extends o {
 	static {
 		this.metadata = {
 			tag: "nve-icon",
-			version: "2.0.1"
+			version: "2.0.3"
 		};
 	}
 	static {
@@ -94,7 +94,7 @@ a([l({
 })], f.prototype, "name", void 0), a([d()], f.prototype, "svg", void 0);
 function p(t) {
 	if (typeof globalThis.customElements?.get == "function") {
-		let n = e(t.metadata.version), i = e("2.0.1");
+		let n = e(t.metadata.version), i = e("2.0.3");
 		n.minor <= i.minor && n.major <= i.major && (t._icons = {
 			...t._icons,
 			...r

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

@@ -1,7 +1,7 @@
 import { removeEmptySlotWhitespace as e } from "../internal/utils/dom.js";
 import { scopedRegistry as t } from "../internal/decorators/scoped-registry.js";
 import { useStyles as n } from "../internal/styles/index.js";
-import { __decorate as r } from "../_virtual/_@oxc-project_runtime@0.132.0/helpers/decorate.js";
+import { __decorate as r } from "../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorate.js";
 import { Icon as i } from "../icon/icon2.js";
 import { Button as a } from "../button/button2.js";
 import o from "./icon-button.js";
@@ -15,7 +15,7 @@ var l = class extends a {
 	static {
 		this.metadata = {
 			tag: "nve-icon-button",
-			version: "2.0.1"
+			version: "2.0.3"
 		};
 	}
 	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.0.1", i = "@nvidia-elements";
+var r = "2.0.3", 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.0.1"
+			version: "2.0.3"
 		};
 	}
 	async connectedCallback() {

package/dist/input/input2.js

@@ -1,5 +1,5 @@
 import { useStyles as e } from "../internal/styles/index.js";
-import { __decorate as t } from "../_virtual/_@oxc-project_runtime@0.132.0/helpers/decorate.js";
+import { __decorate as t } from "../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorate.js";
 import { Control as n } from "../forms/control/control2.js";
 import r from "./input.js";
 import { property as i } from "lit/decorators/property.js";
@@ -14,7 +14,7 @@ var a = r, o = class extends n {
 	static {
 		this.metadata = {
 			tag: "nve-input",
-			version: "2.0.1"
+			version: "2.0.3"
 		};
 	}
 };

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

@@ -9,36 +9,37 @@ function h() {
 }
 var g = class {
 	#e = [];
-	get #t() {
+	#t;
+	get #n() {
 		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)];
+		let e = Array.from(this.#n.rows);
+		return this.#n.columnRow && e.unshift(this.#n.columnRow), e;
+	}
+	get #i() {
+		return [...Array.from(this.#n.columns ?? []), ...Array.from(this.#n.cells)];
 	}
 	constructor(e) {
 		this.host = e, this.host.addController(this);
 	}
 	async hostConnected() {
-		await this.host.updateComplete, o(this.#r), this.#t.grid.addEventListener("keyup", (e) => this.#s(e)), this.#t.grid.addEventListener("keydown", (e) => this.#a(e)), this.#t.grid.addEventListener("mouseup", (e) => this.#i(e)), this.#e.push(t(this.host, n(() => o(this.#r), 500)));
+		await this.host.updateComplete, this.host.isConnected && (this.#t = this.#n.grid, o(this.#i), this.#t.addEventListener("keyup", this.#l), this.#t.addEventListener("keydown", this.#u), this.#t.addEventListener("mouseup", this.#d), this.#e.push(t(this.host, n(() => o(this.#i), 500))));
 	}
 	hostDisconnected() {
-		this.#e.forEach((e) => e?.disconnect());
+		this.#e.forEach((e) => e?.disconnect()), this.#e.length = 0, this.#t?.removeEventListener("keyup", this.#l), this.#t?.removeEventListener("keydown", this.#u), this.#t?.removeEventListener("mouseup", this.#d), this.#t = void 0;
 	}
-	#i(e) {
+	#a(e) {
 		if (!p(e)) {
-			let t = e.composedPath()[0], n = this.#r.find((e) => e === t) ? t : null;
-			n && this.#o(e, n);
+			let t = e.composedPath()[0], n = this.#i.find((e) => e === t) ? t : null;
+			n && this.#s(e, n);
 		}
 	}
-	#a(t) {
-		let n = Array.from(this.#n), i = Array.from(this.#r);
+	#o(t) {
+		let n = Array.from(this.#r), i = Array.from(this.#i);
 		if (e.state.env !== "production" && f(n)) {
 			r.warn("Invalid grid structure, all rows must have the same number of cells");
 			return;
@@ -49,11 +50,11 @@ var g = class {
 				ctrlKey: t.ctrlKey,
 				dir: this.host.dir
 			}), a = Array.from(u(n[r])).filter((e) => !!i.find((t) => t === e))[e];
-			this.#o(t, a), t.preventDefault();
+			this.#s(t, a), t.preventDefault();
 		}
 	}
-	#o(e, t) {
-		c(this.#r, t);
+	#s(e, t) {
+		c(this.#i, t);
 		let n = d(t), r = n.filter((e) => s(e));
 		r.length === 1 && n.length === 1 ? i(r[0]) : i(t);
 		let a = {
@@ -67,10 +68,13 @@ var g = class {
 			detail: a
 		}));
 	}
-	#s(e) {
-		let t = Array.from(this.#r).find((e) => e.tabIndex === 0);
+	#c(e) {
+		let t = Array.from(this.#i).find((e) => e.tabIndex === 0);
 		e.code === "Escape" && t?.focus(), e.code === "Enter" && t === e.composedPath()[0] && d(t)[0]?.focus();
 	}
+	#l = (e) => this.#c(e);
+	#u = (e) => this.#o(e);
+	#d = (e) => this.#a(e);
 };
 function _(e, t) {
 	let n = t === "rtl" ? l.ArrowRight : l.ArrowLeft, r = t === "rtl" ? l.ArrowLeft : l.ArrowRight;

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

@@ -1 +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  position: { x: number; y: number },\n  bounds: { columnCount: number; rowCount: number; ctrlKey: boolean }\n) {\n  const { x, y } = position;\n  const { columnCount, rowCount, ctrlKey } = bounds;\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, ctrlKey: config.ctrlKey }));\n  }\n\n  return { x, y };\n}\n"],"mappings":"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"}
+{"version":3,"file":"keynav-grid.controller.js","names":["#config","#hostRows","#hostCells","#grid","#onKeyUp","#onKeyDown","#onMouseUp","#observers","#setActiveCell","#updateCellActivation","#keynavCell","#clickCell"],"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  #grid?: HTMLElement;\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    if (!this.host.isConnected) return;\n\n    this.#grid = this.#config.grid;\n    initializeKeyListItems(this.#hostCells);\n    this.#grid.addEventListener('keyup', this.#onKeyUp);\n    this.#grid.addEventListener('keydown', this.#onKeyDown);\n    this.#grid.addEventListener('mouseup', this.#onMouseUp);\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    this.#observers.length = 0;\n    this.#grid?.removeEventListener('keyup', this.#onKeyUp);\n    this.#grid?.removeEventListener('keydown', this.#onKeyDown);\n    this.#grid?.removeEventListener('mouseup', this.#onMouseUp);\n    this.#grid = undefined;\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  #onKeyUp = (e: KeyboardEvent) => this.#updateCellActivation(e);\n\n  #onKeyDown = (e: KeyboardEvent) => this.#keynavCell(e);\n\n  #onMouseUp = (e: MouseEvent) => this.#clickCell(e);\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  position: { x: number; y: number },\n  bounds: { columnCount: number; rowCount: number; ctrlKey: boolean }\n) {\n  const { x, y } = position;\n  const { columnCount, rowCount, ctrlKey } = bounds;\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, ctrlKey: config.ctrlKey }));\n  }\n\n  return { x, y };\n}\n"],"mappings":"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"}

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

@@ -18,6 +18,7 @@ export declare class KeyNavigationListController<T extends ReactiveElement & Key
     private host;
     constructor(host: T);
     hostConnected(): Promise<void>;
+    hostDisconnected(): void;
 }
 interface KeyListConfig {
     code: KeynavCode;

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

@@ -23,7 +23,10 @@ var o = class {
 		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));
+		await this.host.updateComplete, this.host.isConnected && (this.#n(), this.host.addEventListener("pointerup", this.#s), this.host.addEventListener("keydown", this.#c));
+	}
+	hostDisconnected() {
+		this.host.removeEventListener("pointerup", this.#s), this.host.removeEventListener("keydown", this.#c);
 	}
 	#n() {
 		let { manageFocus: e, manageTabindex: n, items: r } = this.#e;
@@ -67,6 +70,8 @@ var o = class {
 			detail: c
 		}));
 	}
+	#s = (e) => this.#r(e);
+	#c = (e) => this.#i(e);
 };
 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;

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

@@ -1 +1 @@
-{"version":3,"file":"keynav-list.controller.js","names":["#config","#keynavDisabled","#initializeTabIndex","#clickItem","#focusItem","#getActiveItem","#setActiveItem"],"sources":["../../../src/internal/controllers/keynav-list.controller.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ReactiveController, ReactiveElement } from 'lit';\nimport type { LegacyDecoratorTarget } from '../types/index.js';\nimport { focusElement, initializeKeyListItems, setActiveKeyListItem } from '../utils/focus.js';\nimport { KeynavCode, validKeyNavigationCode } from '../utils/dom.js';\n\nexport interface KeynavListConfig {\n  items: NodeListOf<HTMLElement> | HTMLElement[];\n  layout?: 'both' | 'horizontal' | 'vertical';\n  manageFocus?: boolean;\n  manageTabindex?: boolean;\n  loop?: boolean;\n  dir?: string | null;\n}\n\nexport interface KeynavListElement {\n  keynavListConfig: KeynavListConfig;\n}\n\n/** https://webaim.org/techniques/keyboard/ */\nexport function keyNavigationList<T extends ReactiveElement & KeynavListElement>(): ClassDecorator {\n  return (target: LegacyDecoratorTarget) =>\n    target.addInitializer!((instance: T) => new KeyNavigationListController(instance));\n}\n\nexport class KeyNavigationListController<T extends ReactiveElement & KeynavListElement> implements ReactiveController {\n  get #config(): KeynavListConfig & { items: HTMLElement[] } {\n    return {\n      layout: 'horizontal',\n      manageFocus: true,\n      manageTabindex: true,\n      loop: false,\n      dir: this.host.getAttribute('rtl'),\n      ...this.host.keynavListConfig,\n      items: Array.from(this.host.keynavListConfig.items).filter(\n        (i: HTMLElement & { disabled?: boolean }) => !i.disabled\n      )\n    };\n  }\n\n  constructor(private host: T) {\n    this.host.addController(this);\n  }\n\n  /** @private attr nve-keynav-disabled is an internal API for advanced use cases only */\n  get #keynavDisabled() {\n    return this.host.hasAttribute('nve-keynav-disabled');\n  }\n\n  async hostConnected() {\n    await this.host.updateComplete;\n    this.#initializeTabIndex();\n    this.host.addEventListener('pointerup', (e: PointerEvent) => this.#clickItem(e));\n    this.host.addEventListener('keydown', (e: KeyboardEvent) => this.#focusItem(e));\n  }\n\n  #initializeTabIndex() {\n    const { manageFocus, manageTabindex, items } = this.#config;\n    if (manageFocus && manageTabindex && !this.#keynavDisabled) {\n      initializeKeyListItems(items);\n    }\n  }\n\n  #clickItem(e: PointerEvent) {\n    const item = this.#getActiveItem(e, this.#config.items);\n    if (item) {\n      this.#setActiveItem(e, item);\n    }\n  }\n\n  #focusItem(e: KeyboardEvent) {\n    if (validKeyNavigationCode(e) && !this.#keynavDisabled) {\n      const { loop, layout, dir, items } = this.#config;\n      const activeItem = this.#getActiveItem(e, items);\n      if (activeItem) {\n        const { next, previous } = getNextKeyListItem(activeItem, Array.from(items), {\n          loop,\n          layout,\n          dir,\n          code: e.code as KeynavCode\n        });\n\n        if (next !== previous) {\n          this.#setActiveItem(e, items[next]!, items[previous]);\n        }\n      }\n    }\n  }\n\n  #getActiveItem(e: Event, items: HTMLElement[]) {\n    const focusedElement = e.composedPath()[0] as HTMLElement;\n    return items.find(i => i === focusedElement) ? focusedElement : null;\n  }\n\n  #setActiveItem(e: KeyboardEvent | PointerEvent, activeItem: HTMLElement, previousItem?: HTMLElement) {\n    const { manageFocus, manageTabindex, items } = this.#config;\n    if (manageFocus) {\n      if (manageTabindex) {\n        setActiveKeyListItem(items, activeItem);\n      }\n\n      focusElement(activeItem);\n      e.preventDefault();\n    }\n\n    const detail = {\n      activeItem,\n      previousItem,\n      code: e instanceof KeyboardEvent ? e.code : null,\n      metaKey: e.ctrlKey || e.metaKey,\n      items\n    };\n    activeItem.dispatchEvent(new CustomEvent('nve-key-change', { bubbles: true, composed: true, detail }));\n  }\n}\n\ninterface KeyListConfig {\n  code: KeynavCode;\n  loop?: boolean;\n  layout?: 'horizontal' | 'vertical' | 'both';\n  dir: string | null | undefined;\n}\n\nfunction resolveArrowDirection(config: KeyListConfig): 'backward' | 'forward' | null {\n  const { code, layout, dir } = config;\n  const start = dir === 'rtl' ? KeynavCode.ArrowRight : KeynavCode.ArrowLeft;\n  const end = dir === 'rtl' ? KeynavCode.ArrowLeft : KeynavCode.ArrowRight;\n\n  if (layout !== 'horizontal') {\n    if (code === KeynavCode.ArrowUp) return 'backward';\n    if (code === KeynavCode.ArrowDown) return 'forward';\n  }\n\n  if (layout !== 'vertical') {\n    if (code === start) return 'backward';\n    if (code === end) return 'forward';\n  }\n\n  return null;\n}\n\nfunction resolveSpecialKey(code: KeynavCode): 'home' | 'end' | 'pageup' | 'pagedown' | null {\n  if (code === KeynavCode.End) return 'end';\n  if (code === KeynavCode.Home) return 'home';\n  if (code === KeynavCode.PageUp) return 'pageup';\n  if (code === KeynavCode.PageDown) return 'pagedown';\n  return null;\n}\n\nfunction navigateWithLoop(current: number, step: number, options: { limit: number; loop: boolean | undefined }) {\n  const { limit, loop } = options;\n  const next = current + step;\n  if (next >= 0 && next <= limit) return next;\n  return loop ? (step < 0 ? limit : 0) : current;\n}\n\nexport function getNextKeyListItem(item: HTMLElement, items: HTMLElement[], config: KeyListConfig) {\n  let next = items.indexOf(item);\n  const previous = next;\n  const itemCount = items.length - 1;\n  const direction = resolveArrowDirection(config);\n\n  switch (direction ?? resolveSpecialKey(config.code)) {\n    case 'backward':\n      next = navigateWithLoop(next, -1, { limit: itemCount, loop: config.loop });\n      break;\n    case 'forward':\n      next = navigateWithLoop(next, 1, { limit: itemCount, loop: config.loop });\n      break;\n    case 'end':\n      next = itemCount;\n      break;\n    case 'home':\n      next = 0;\n      break;\n    case 'pageup':\n      next = Math.max(0, next - 4);\n      break;\n    case 'pagedown':\n      next = Math.min(itemCount, next + 4);\n      break;\n    case null:\n      break;\n  }\n\n  return { next, previous };\n}\n"],"mappings":"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"}
+{"version":3,"file":"keynav-list.controller.js","names":["#config","#keynavDisabled","#initializeTabIndex","#onPointerUp","#onKeyDown","#getActiveItem","#setActiveItem","#clickItem","#focusItem"],"sources":["../../../src/internal/controllers/keynav-list.controller.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ReactiveController, ReactiveElement } from 'lit';\nimport type { LegacyDecoratorTarget } from '../types/index.js';\nimport { focusElement, initializeKeyListItems, setActiveKeyListItem } from '../utils/focus.js';\nimport { KeynavCode, validKeyNavigationCode } from '../utils/dom.js';\n\nexport interface KeynavListConfig {\n  items: NodeListOf<HTMLElement> | HTMLElement[];\n  layout?: 'both' | 'horizontal' | 'vertical';\n  manageFocus?: boolean;\n  manageTabindex?: boolean;\n  loop?: boolean;\n  dir?: string | null;\n}\n\nexport interface KeynavListElement {\n  keynavListConfig: KeynavListConfig;\n}\n\n/** https://webaim.org/techniques/keyboard/ */\nexport function keyNavigationList<T extends ReactiveElement & KeynavListElement>(): ClassDecorator {\n  return (target: LegacyDecoratorTarget) =>\n    target.addInitializer!((instance: T) => new KeyNavigationListController(instance));\n}\n\nexport class KeyNavigationListController<T extends ReactiveElement & KeynavListElement> implements ReactiveController {\n  get #config(): KeynavListConfig & { items: HTMLElement[] } {\n    return {\n      layout: 'horizontal',\n      manageFocus: true,\n      manageTabindex: true,\n      loop: false,\n      dir: this.host.getAttribute('rtl'),\n      ...this.host.keynavListConfig,\n      items: Array.from(this.host.keynavListConfig.items).filter(\n        (i: HTMLElement & { disabled?: boolean }) => !i.disabled\n      )\n    };\n  }\n\n  constructor(private host: T) {\n    this.host.addController(this);\n  }\n\n  /** @private attr nve-keynav-disabled is an internal API for advanced use cases only */\n  get #keynavDisabled() {\n    return this.host.hasAttribute('nve-keynav-disabled');\n  }\n\n  async hostConnected() {\n    await this.host.updateComplete;\n    if (!this.host.isConnected) return;\n    this.#initializeTabIndex();\n    this.host.addEventListener('pointerup', this.#onPointerUp);\n    this.host.addEventListener('keydown', this.#onKeyDown);\n  }\n\n  hostDisconnected() {\n    this.host.removeEventListener('pointerup', this.#onPointerUp);\n    this.host.removeEventListener('keydown', this.#onKeyDown);\n  }\n\n  #initializeTabIndex() {\n    const { manageFocus, manageTabindex, items } = this.#config;\n    if (manageFocus && manageTabindex && !this.#keynavDisabled) {\n      initializeKeyListItems(items);\n    }\n  }\n\n  #clickItem(e: PointerEvent) {\n    const item = this.#getActiveItem(e, this.#config.items);\n    if (item) {\n      this.#setActiveItem(e, item);\n    }\n  }\n\n  #focusItem(e: KeyboardEvent) {\n    if (validKeyNavigationCode(e) && !this.#keynavDisabled) {\n      const { loop, layout, dir, items } = this.#config;\n      const activeItem = this.#getActiveItem(e, items);\n      if (activeItem) {\n        const { next, previous } = getNextKeyListItem(activeItem, Array.from(items), {\n          loop,\n          layout,\n          dir,\n          code: e.code as KeynavCode\n        });\n\n        if (next !== previous) {\n          this.#setActiveItem(e, items[next]!, items[previous]);\n        }\n      }\n    }\n  }\n\n  #getActiveItem(e: Event, items: HTMLElement[]) {\n    const focusedElement = e.composedPath()[0] as HTMLElement;\n    return items.find(i => i === focusedElement) ? focusedElement : null;\n  }\n\n  #setActiveItem(e: KeyboardEvent | PointerEvent, activeItem: HTMLElement, previousItem?: HTMLElement) {\n    const { manageFocus, manageTabindex, items } = this.#config;\n    if (manageFocus) {\n      if (manageTabindex) {\n        setActiveKeyListItem(items, activeItem);\n      }\n\n      focusElement(activeItem);\n      e.preventDefault();\n    }\n\n    const detail = {\n      activeItem,\n      previousItem,\n      code: e instanceof KeyboardEvent ? e.code : null,\n      metaKey: e.ctrlKey || e.metaKey,\n      items\n    };\n    activeItem.dispatchEvent(new CustomEvent('nve-key-change', { bubbles: true, composed: true, detail }));\n  }\n\n  #onPointerUp = (e: PointerEvent) => this.#clickItem(e);\n\n  #onKeyDown = (e: KeyboardEvent) => this.#focusItem(e);\n}\n\ninterface KeyListConfig {\n  code: KeynavCode;\n  loop?: boolean;\n  layout?: 'horizontal' | 'vertical' | 'both';\n  dir: string | null | undefined;\n}\n\nfunction resolveArrowDirection(config: KeyListConfig): 'backward' | 'forward' | null {\n  const { code, layout, dir } = config;\n  const start = dir === 'rtl' ? KeynavCode.ArrowRight : KeynavCode.ArrowLeft;\n  const end = dir === 'rtl' ? KeynavCode.ArrowLeft : KeynavCode.ArrowRight;\n\n  if (layout !== 'horizontal') {\n    if (code === KeynavCode.ArrowUp) return 'backward';\n    if (code === KeynavCode.ArrowDown) return 'forward';\n  }\n\n  if (layout !== 'vertical') {\n    if (code === start) return 'backward';\n    if (code === end) return 'forward';\n  }\n\n  return null;\n}\n\nfunction resolveSpecialKey(code: KeynavCode): 'home' | 'end' | 'pageup' | 'pagedown' | null {\n  if (code === KeynavCode.End) return 'end';\n  if (code === KeynavCode.Home) return 'home';\n  if (code === KeynavCode.PageUp) return 'pageup';\n  if (code === KeynavCode.PageDown) return 'pagedown';\n  return null;\n}\n\nfunction navigateWithLoop(current: number, step: number, options: { limit: number; loop: boolean | undefined }) {\n  const { limit, loop } = options;\n  const next = current + step;\n  if (next >= 0 && next <= limit) return next;\n  return loop ? (step < 0 ? limit : 0) : current;\n}\n\nexport function getNextKeyListItem(item: HTMLElement, items: HTMLElement[], config: KeyListConfig) {\n  let next = items.indexOf(item);\n  const previous = next;\n  const itemCount = items.length - 1;\n  const direction = resolveArrowDirection(config);\n\n  switch (direction ?? resolveSpecialKey(config.code)) {\n    case 'backward':\n      next = navigateWithLoop(next, -1, { limit: itemCount, loop: config.loop });\n      break;\n    case 'forward':\n      next = navigateWithLoop(next, 1, { limit: itemCount, loop: config.loop });\n      break;\n    case 'end':\n      next = itemCount;\n      break;\n    case 'home':\n      next = 0;\n      break;\n    case 'pageup':\n      next = Math.max(0, next - 4);\n      break;\n    case 'pagedown':\n      next = Math.min(itemCount, next + 4);\n      break;\n    case null:\n      break;\n  }\n\n  return { next, previous };\n}\n"],"mappings":"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"}