@nvidia-elements/core 0.2.1 → 0.2.3

package/dist/grid/row/row2.js

@@ -1,8 +1,8 @@
-import { attachInternals as e } from "../../internal/utils/a11y.js";
-import { stateSelected as t } from "../../internal/controllers/state-selected.controller.js";
-import { __decorate as n } from "../../_virtual/_@oxc-project_runtime@0.130.0/helpers/decorate.js";
-import { audit as r } from "../../internal/controllers/audit.controller.js";
-import { useStyles as i } from "../../internal/styles/index.js";
+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.130.0/helpers/decorate.js";
 import { GridCell as a } from "../cell/cell2.js";
 import o from "./row.js";
 import { LitElement as s, html as c } from "lit";
@@ -10,12 +10,12 @@ import { property as l } from "lit/decorators/property.js";
 //#region src/grid/row/row.ts
 var u = class extends s {
 	static {
-		this.styles = i([o]);
+		this.styles = r([o]);
 	}
 	static {
 		this.metadata = {
 			tag: "nve-grid-row",
-			version: "0.2.1",
+			version: "0.2.3",
 			children: [a.metadata.tag]
 		};
 	}
@@ -23,10 +23,10 @@ var u = class extends s {
 		return c`<div internal-host><slot></slot></div>`;
 	}
 	connectedCallback() {
-		super.connectedCallback(), e(this), this._internals.role = "row";
+		super.connectedCallback(), t(this), this._internals.role = "row";
 	}
 };
-n([l({ type: Boolean })], u.prototype, "selected", void 0), u = n([t(), r()], u);
+i([l({ type: Boolean })], u.prototype, "selected", void 0), u = i([n(), e()], u);
 //#endregion
 export { u as GridRow };
 

package/dist/icon/icon2.js

@@ -1,9 +1,9 @@
 import { parseVersion as e } from "../internal/utils/objects.js";
 import { attachInternals as t } from "../internal/utils/a11y.js";
-import { __decorate as n } from "../_virtual/_@oxc-project_runtime@0.130.0/helpers/decorate.js";
-import { useStyles as r } from "../internal/styles/index.js";
-import { ICON_IMPORTS as i } from "./icons.js";
-import a from "./icon.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.130.0/helpers/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";
@@ -11,16 +11,16 @@ import { state as d } from "lit/decorators/state.js";
 //#region src/icon/icon.ts
 var f = class e extends o {
 	static {
-		this.styles = r([a]);
+		this.styles = n([i]);
 	}
 	static {
 		this.metadata = {
 			tag: "nve-icon",
-			version: "0.2.1"
+			version: "0.2.3"
 		};
 	}
 	static {
-		this._icons = i;
+		this._icons = r;
 	}
 	static get _iconsRegistry() {
 		return this.registeredIcon?._icons ?? e._icons;
@@ -71,25 +71,25 @@ var f = class e extends o {
 		}, this.svg = t;
 	}
 };
-n([l({
+a([l({
 	type: String,
 	reflect: !0
-})], f.prototype, "status", void 0), n([l({
+})], f.prototype, "status", void 0), a([l({
 	type: String,
 	reflect: !0
-})], f.prototype, "size", void 0), n([l({
+})], f.prototype, "size", void 0), a([l({
 	type: String,
 	reflect: !0
-})], f.prototype, "direction", void 0), n([l({
+})], f.prototype, "direction", void 0), a([l({
 	type: String,
 	reflect: !0
-})], f.prototype, "name", void 0), n([d()], f.prototype, "svg", void 0);
+})], 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), r = e("0.2.1");
-		n.minor <= r.minor && n.major <= r.major && (t._icons = {
+		let n = e(t.metadata.version), i = e("0.2.3");
+		n.minor <= i.minor && n.major <= i.major && (t._icons = {
 			...t._icons,
-			...i
+			...r
 		});
 	}
 }

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

@@ -1,7 +1,7 @@
 import { removeEmptySlotWhitespace as e } from "../internal/utils/dom.js";
-import { __decorate as t } from "../_virtual/_@oxc-project_runtime@0.130.0/helpers/decorate.js";
-import { scopedRegistry as n } from "../internal/decorators/scoped-registry.js";
-import { useStyles as r } from "../internal/styles/index.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.130.0/helpers/decorate.js";
 import { Icon as i } from "../icon/icon2.js";
 import { Button as a } from "../button/button2.js";
 import o from "./icon-button.js";
@@ -10,12 +10,12 @@ import { property as c } from "lit/decorators/property.js";
 //#region src/icon-button/icon-button.ts
 var l = class extends a {
 	static {
-		this.styles = r([...a.styles, o]);
+		this.styles = n([...a.styles, o]);
 	}
 	static {
 		this.metadata = {
 			tag: "nve-icon-button",
-			version: "0.2.1"
+			version: "0.2.3"
 		};
 	}
 	static {
@@ -25,16 +25,16 @@ var l = class extends a {
 		return s`<div internal-host interaction-state focus-within aria-hidden="true"><slot @slotchange="${(t) => e(t.target)}"><nve-icon .name="${this.iconName}" .direction="${this.direction}" .size="${this.size}" aria-hidden="true" part="icon"></nve-icon></slot></div><slot name="anchor"></slot>`;
 	}
 };
-t([c({
+r([c({
 	type: String,
 	attribute: "icon-name"
-})], l.prototype, "iconName", void 0), t([c({
+})], l.prototype, "iconName", void 0), r([c({
 	type: String,
 	reflect: !0
-})], l.prototype, "direction", void 0), t([c({
+})], l.prototype, "direction", void 0), r([c({
 	type: String,
 	reflect: !0
-})], l.prototype, "size", void 0), l = t([n()], l);
+})], l.prototype, "size", void 0), l = r([t()], l);
 //#endregion
 export { l as IconButton };
 

package/dist/index.js

@@ -1,9 +1,9 @@
-import { getThemeTokens as e } from "./internal/utils/dom.js";
-import { I18nService as t } from "./internal/services/i18n.service.js";
+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 = "0.2.1", i = "@nvidia-elements";
+var r = "0.2.3", i = "@nvidia-elements";
 //#endregion
-export { t as I18nService, i as SCOPE, r as VERSION, e as getThemeTokens, n as statusIcons };
+export { e as I18nService, i as SCOPE, r as VERSION, t as getThemeTokens, n as statusIcons };
 
 //# sourceMappingURL=index.js.map

package/dist/input/input-group2.js

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

package/dist/input/input2.js

@@ -1,5 +1,5 @@
-import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.130.0/helpers/decorate.js";
-import { useStyles as t } from "../internal/styles/index.js";
+import { useStyles as e } from "../internal/styles/index.js";
+import { __decorate as t } from "../_virtual/_@oxc-project_runtime@0.130.0/helpers/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";
@@ -9,19 +9,19 @@ var a = r, o = class extends n {
 		super(...e), this.rounded = !1;
 	}
 	static {
-		this.styles = t([...n.styles, r]);
+		this.styles = e([...n.styles, r]);
 	}
 	static {
 		this.metadata = {
 			tag: "nve-input",
-			version: "0.2.1"
+			version: "0.2.3"
 		};
 	}
 };
-e([i({
+t([i({
 	type: String,
 	reflect: !0
-})], o.prototype, "container", void 0), e([i({
+})], o.prototype, "container", void 0), t([i({
 	type: Boolean,
 	reflect: !0
 })], o.prototype, "rounded", void 0);

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

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

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

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

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

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

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

@@ -9,12 +9,21 @@ export type Command = ReactiveElement & HTMLElement & {
     commandfor: string | null;
     commandForElement: HTMLElement | null;
     readOnly: boolean;
+    /**
+     * @deprecated Use `readOnly`. The `readonly` attribute remains supported.
+     */
+    readonly?: boolean;
     disabled: boolean;
 };
 export declare class TypeCommandController<T extends Command> implements ReactiveController {
     #private;
     private host;
-    constructor(host: T);
+    constructor(host: T, options?: TypeCommandControllerOptions);
+    get target(): HTMLElement | null;
     hostUpdated(): Promise<void>;
     hostDisconnected(): void;
+    dispatchCommand(): boolean;
+}
+export interface TypeCommandControllerOptions {
+    trigger?: 'click' | 'manual';
 }

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

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

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

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

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

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

package/dist/internal/decorators/scoped-registry.js

@@ -1,21 +1,39 @@
 import { GlobalStateService as e } from "../services/global.service.js";
 import { defineElement as t, supportsScopedRegistry as n } from "../utils/dom.js";
 //#region src/internal/decorators/scoped-registry.ts
-function r() {
+var r = /* @__PURE__ */ new WeakSet();
+function i(e, t) {
+	return { importNode: (n, r = !1) => e.importNode(n, {
+		customElementRegistry: t,
+		selfOnly: !r
+	}) };
+}
+function a(e, t) {
+	if (r.has(e)) return;
+	let n = e.prototype, a = n.createRenderRoot;
+	a && (r.add(e), Object.defineProperty(n, "createRenderRoot", {
+		configurable: !0,
+		value() {
+			let e = a.call(this);
+			return e instanceof ShadowRoot && (this.renderOptions ??= {}, this.renderOptions.creationScope = i(e.ownerDocument, t)), e;
+		}
+	}));
+}
+function o() {
 	return (r) => {
 		let i = r;
 		e.state.scopedRegistry ??= {};
-		let a = e.state.scopedRegistry[i.metadata.version] ?? customElements;
-		n && Object.defineProperty(i, "shadowRootOptions", {
+		let o = e.state.scopedRegistry[i.metadata.version] ?? customElements;
+		n && (Object.defineProperty(i, "shadowRootOptions", {
 			configurable: !0,
 			value: {
 				...i.shadowRootOptions ?? { mode: "open" },
-				customElementRegistry: a
+				customElementRegistry: o
 			}
-		}), t(i, a);
+		}), a(i, o)), t(i, o);
 	};
 }
 //#endregion
-export { r as scopedRegistry };
+export { o as scopedRegistry };
 
 //# sourceMappingURL=scoped-registry.js.map

package/dist/internal/decorators/scoped-registry.js.map

@@ -1 +1 @@
-{"version":3,"file":"scoped-registry.js","names":[],"sources":["../../../src/internal/decorators/scoped-registry.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { GlobalStateService } from '../services/global.service.js';\nimport type { ElementDefinition, LegacyDecoratorTarget } from '../types/index.js';\nimport { defineElement, supportsScopedRegistry } from '../utils/dom.js';\n\n/** decorator which registers element dependencies with the scoped custom element registry when available */\nexport function scopedRegistry(): ClassDecorator {\n  return (target: LegacyDecoratorTarget) => {\n    const element = target as unknown as ElementDefinition;\n    GlobalStateService.state.scopedRegistry ??= {};\n    const customElementRegistry = GlobalStateService.state.scopedRegistry[element.metadata.version] ?? customElements;\n    if (supportsScopedRegistry) {\n      Object.defineProperty(element, 'shadowRootOptions', {\n        configurable: true,\n        value: { ...(element.shadowRootOptions ?? { mode: 'open' }), customElementRegistry }\n      });\n    }\n    defineElement(element, customElementRegistry);\n  };\n}\n"],"mappings":";;;AAQA,SAAgB,IAAiC;CAC/C,QAAQ,MAAkC;EACxC,IAAM,IAAU;EAChB,EAAmB,MAAM,mBAAmB,CAAC;EAC7C,IAAM,IAAwB,EAAmB,MAAM,eAAe,EAAQ,SAAS,YAAY;EAOnG,AANI,KACF,OAAO,eAAe,GAAS,qBAAqB;GAClD,cAAc;GACd,OAAO;IAAE,GAAI,EAAQ,qBAAqB,EAAE,MAAM,OAAO;IAAI;GAAsB;EACrF,CAAC,GAEH,EAAc,GAAS,CAAqB;CAC9C;AACF"}
+{"version":3,"file":"scoped-registry.js","names":[],"sources":["../../../src/internal/decorators/scoped-registry.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { RenderOptions } from 'lit';\nimport { GlobalStateService } from '../services/global.service.js';\nimport type { ElementDefinition, LegacyDecoratorTarget } from '../types/index.js';\nimport { defineElement, supportsScopedRegistry } from '../utils/dom.js';\n\ninterface ScopedRegistryHost extends HTMLElement {\n  createRenderRoot?: () => HTMLElement | DocumentFragment;\n  renderOptions?: RenderOptions;\n}\n\nconst litCreationScopeElements = new WeakSet<ElementDefinition>();\n\n/** Lit passes a legacy `deep` boolean, but scoped registries require `ImportNodeOptions`. https://html.spec.whatwg.org/multipage/custom-elements.html#scoped-custom-element-registries */\nfunction createScopedCreationScope(ownerDocument: Document, customElementRegistry: CustomElementRegistry) {\n  return {\n    importNode: (node: Node, deep = false) =>\n      ownerDocument.importNode(node, {\n        customElementRegistry,\n        selfOnly: !deep\n      })\n  } satisfies NonNullable<RenderOptions['creationScope']>;\n}\n\nfunction attachLitCreationScope(element: ElementDefinition, customElementRegistry: CustomElementRegistry) {\n  if (litCreationScopeElements.has(element)) return;\n\n  const host = element.prototype as ScopedRegistryHost;\n  const createRenderRoot = host.createRenderRoot;\n  if (!createRenderRoot) return;\n\n  litCreationScopeElements.add(element);\n  Object.defineProperty(host, 'createRenderRoot', {\n    configurable: true,\n    value(this: ScopedRegistryHost) {\n      const renderRoot = createRenderRoot.call(this);\n      if (renderRoot instanceof ShadowRoot) {\n        this.renderOptions ??= {};\n        this.renderOptions.creationScope = createScopedCreationScope(renderRoot.ownerDocument, customElementRegistry);\n      }\n      return renderRoot;\n    }\n  });\n}\n\n/** decorator which registers element dependencies with the scoped custom element registry when available */\nexport function scopedRegistry(): ClassDecorator {\n  return (target: LegacyDecoratorTarget) => {\n    const element = target as unknown as ElementDefinition;\n    GlobalStateService.state.scopedRegistry ??= {};\n    const customElementRegistry = GlobalStateService.state.scopedRegistry[element.metadata.version] ?? customElements;\n    if (supportsScopedRegistry) {\n      Object.defineProperty(element, 'shadowRootOptions', {\n        configurable: true,\n        value: { ...(element.shadowRootOptions ?? { mode: 'open' }), customElementRegistry }\n      });\n      attachLitCreationScope(element, customElementRegistry);\n    }\n    defineElement(element, customElementRegistry);\n  };\n}\n"],"mappings":";;;AAaA,IAAM,oBAA2B,IAAI,QAA2B;AAGhE,SAAS,EAA0B,GAAyB,GAA8C;CACxG,OAAO,EACL,aAAa,GAAY,IAAO,OAC9B,EAAc,WAAW,GAAM;EAC7B;EACA,UAAU,CAAC;CACb,CAAC,EACL;AACF;AAEA,SAAS,EAAuB,GAA4B,GAA8C;CACxG,IAAI,EAAyB,IAAI,CAAO,GAAG;CAE3C,IAAM,IAAO,EAAQ,WACf,IAAmB,EAAK;CACzB,MAEL,EAAyB,IAAI,CAAO,GACpC,OAAO,eAAe,GAAM,oBAAoB;EAC9C,cAAc;EACd,QAAgC;GAC9B,IAAM,IAAa,EAAiB,KAAK,IAAI;GAK7C,OAJI,aAAsB,eACxB,KAAK,kBAAkB,CAAC,GACxB,KAAK,cAAc,gBAAgB,EAA0B,EAAW,eAAe,CAAqB,IAEvG;EACT;CACF,CAAC;AACH;AAGA,SAAgB,IAAiC;CAC/C,QAAQ,MAAkC;EACxC,IAAM,IAAU;EAChB,EAAmB,MAAM,mBAAmB,CAAC;EAC7C,IAAM,IAAwB,EAAmB,MAAM,eAAe,EAAQ,SAAS,YAAY;EAQnG,AAPI,MACF,OAAO,eAAe,GAAS,qBAAqB;GAClD,cAAc;GACd,OAAO;IAAE,GAAI,EAAQ,qBAAqB,EAAE,MAAM,OAAO;IAAI;GAAsB;EACrF,CAAC,GACD,EAAuB,GAAS,CAAqB,IAEvD,EAAc,GAAS,CAAqB;CAC9C;AACF"}

package/dist/internal/index.d.ts

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