@nvidia-elements/core 2.0.1 → 2.0.2

package/dist/forms/control/control2.js

@@ -4,7 +4,7 @@ import { associateAriaDescribedBy as r, associateDataList as i, associateLabel a
 import { typeSSR as s } from "../../internal/controllers/type-ssr.controller.js";
 import { hostAttr as c } from "../../internal/decorators/host-attr.js";
 import { useStyles as l } from "../../internal/styles/index.js";
-import { __decorate as u } from "../../_virtual/_@oxc-project_runtime@0.132.0/helpers/decorate.js";
+import { __decorate as u } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorate.js";
 import { inputQuery as d, setupControlStates as f, setupControlStatusStates as p, setupControlValidationStates as m } from "../utils/states.js";
 import { setupControlLayoutStates as h } from "../utils/layout.js";
 import g from "./control.global.js";
@@ -15,11 +15,11 @@ import { property as S } from "lit/decorators/property.js";
 var C = class extends v {
 	constructor(...t) {
 		super(...t), this.fitText = !1, this.fitContent = !1, this.#e = new e(this), this.i18n = this.#e.i18n, this.nveControl = "", this.#i = [], this._associateDatalist = !0, this.#a = () => {
-			this.#f(), this.input && this.#i.length === 0 && (this.#o(), this.#c());
-		}, this.#s = () => {
-			this.#f(), this.#p();
-		}, this.#l = () => {
-			this.#u();
+			this.#h(), this.input && this.#i.length === 0 && (this.#l(), this.#d());
+		}, this.#u = () => {
+			this.#h(), this.#g();
+		}, this.#f = () => {
+			this.#p();
 		};
 	}
 	#e;
@@ -50,7 +50,7 @@ var C = class extends v {
 	static {
 		this.metadata = {
 			tag: "nve-control",
-			version: "2.0.1"
+			version: "2.0.2"
 		};
 	}
 	render() {
@@ -60,39 +60,57 @@ var C = class extends v {
 		super.connectedCallback(), o(this), t(this, g), this.shadowRoot.addEventListener("slotchange", this.#a);
 	}
 	disconnectedCallback() {
-		super.disconnectedCallback(), this.shadowRoot.removeEventListener("slotchange", this.#a), this.shadowRoot.removeEventListener("slotchange", this.#s), this.fitText && this.input && (this.input.removeEventListener("input", this.#l), this.input.removeEventListener("change", this.#l)), this.#i.forEach((e) => e.disconnect()), this.#i.length = 0;
+		super.disconnectedCallback(), this.shadowRoot.removeEventListener("slotchange", this.#a), this.shadowRoot.removeEventListener("slotchange", this.#u), this.fitText && this.input && (this.input.removeEventListener("input", this.#f), this.input.removeEventListener("change", this.#f)), this.#i.forEach((e) => e.disconnect()), this.#i.length = 0;
 	}
 	#a;
 	reset() {
-		this.input.value = this.input.getAttribute("value") ?? "", this.requestUpdate(), this.dispatchEvent(new CustomEvent("reset", {
+		this.#o(this.input), this.requestUpdate(), this.dispatchEvent(new CustomEvent("reset", {
 			bubbles: !0,
 			composed: !0
 		}));
 	}
-	#o() {
-		m(this, this.#n), this.#i.push(...f(this), ...p(this, this.#n), h(this), n(this, ["hidden", "status"], () => this.#f())), this.#d(), this.#p(), this.shadowRoot.addEventListener("slotchange", this.#s);
+	#o(e) {
+		if (e instanceof HTMLSelectElement) {
+			this.#s(e);
+			return;
+		}
+		if (this.#c(e)) {
+			e.checked = e.defaultChecked, e.indeterminate = !1;
+			return;
+		}
+		e.value = e instanceof HTMLInputElement || e instanceof HTMLTextAreaElement ? e.defaultValue : e.getAttribute("value") ?? "";
+	}
+	#s(e) {
+		let t = Array.from(e.options).some((e) => e.defaultSelected);
+		Array.from(e.options).forEach((e) => e.selected = e.defaultSelected), !e.multiple && !t && (e.selectedIndex = 0);
 	}
-	#s;
-	#c() {
-		this.fitText && (this.#u(), this.input.addEventListener("input", this.#l), this.input.addEventListener("change", this.#l));
+	#c(e) {
+		return e instanceof HTMLInputElement && (e.type === "checkbox" || e.type === "radio");
+	}
+	#l() {
+		this.#i.push(...m(this, this.#n), ...f(this), ...p(this, this.#n), h(this), n(this, ["hidden", "status"], () => this.#h())), this.#m(), this.#g(), this.shadowRoot.addEventListener("slotchange", this.#u);
+	}
+	#u;
+	#d() {
+		this.fitText && (this.#p(), this.input.addEventListener("input", this.#f), this.input.addEventListener("change", this.#f));
 	}
-	#l;
-	#u() {
+	#f;
+	#p() {
 		if (this.input.tagName === "INPUT") {
 			let e = this.input.type === "text" ? 0 : 4;
 			this.style.setProperty("--control-width", `${this.input.value.length + e}ch`), this.input.style.setProperty("max-width", `${this.input.value.length + 2}ch`, "important");
 		} else this.input.tagName === "SELECT" && this.style.setProperty("--control-width", `${this.input.options[this.input.selectedIndex].textContent.length + 4}ch`);
 	}
-	#d() {
+	#m() {
 		this.input.showPicker || (this.input.showPicker = () => this.input.focus());
 	}
-	#f() {
+	#h() {
 		this.input && (this.toggleAttribute("multiple", this.input?.multiple), this.input?.hasAttribute("size") ? this.setAttribute("size", "") : this.removeAttribute("size"));
 	}
-	#p() {
-		this.#m(), a(this.#t, this.input), r(Array.from(this.#n), this.input), this._associateDatalist && i(this.querySelector("datalist"), this.input);
+	#g() {
+		this.#_(), a(this.#t, this.input), r(Array.from(this.#n), this.input), this._associateDatalist && i(this.querySelector("datalist"), this.input);
 	}
-	#m() {
+	#_() {
 		let e = this.querySelector("label") || this.shadowRoot.querySelector("slot").assignedNodes({ flatten: !0 }).find((e) => e.tagName === "LABEL");
 		e && (e.slot = "label");
 	}

package/dist/forms/control/control2.js.map

@@ -1 +1 @@
-{"version":3,"file":"control2.js","names":["#i18nController","#updateStyleStates","#observers","#setupInput","#setupFitText","#updateAssociations","#getCharacterWidth","#label","#messages","#input","#onRootSlotchange","#onInputSlotchange","#onFitTextUpdate","#polyfillShowPicker","#assignLabel"],"sources":["../../../src/forms/control/control.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { TemplateResult } from 'lit';\nimport { LitElement, html, nothing, isServer } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport {\n  attachInternals,\n  useStyles,\n  associateLabel,\n  associateAriaDescribedBy,\n  associateDataList,\n  appendRootNodeStyle,\n  getAttributeListChanges,\n  I18nController,\n  hostAttr,\n  typeSSR\n} from '@nvidia-elements/core/internal';\nimport type { ControlMessage } from '../control-message/control-message.js';\nimport {\n  setupControlValidationStates,\n  setupControlStates,\n  setupControlStatusStates,\n  inputQuery\n} from '../utils/states.js';\nimport { setupControlLayoutStates } from '../utils/layout.js';\nimport globalStyles from './control.global.css?inline';\nimport styles from './control.css?inline';\n\n/**\n * @element nve-control\n * @description Wraps a form input with its associated label and validation messages, managing layout and accessibility associations.\n * @since 0.3.0\n * @entrypoint \\@nvidia-elements/core/forms\n * @slot - Control input element\n * @slot label - Label element\n * @cssprop --cursor\n * @cssprop --accent-color\n * @cssprop --color\n * @cssprop --label-color\n * @cssprop --label-width\n * @cssprop --label-font-weight\n * @cssprop --label-font-size\n * @cssprop --control-width\n * @cssprop --control-height\n\n * @aria https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals\n * @package true\n */\n@typeSSR()\nexport class Control extends LitElement {\n  /** Set current visual state for control. This overrides any validation states active. */\n  @property({ type: String }) status: 'warning' | 'error' | 'success' | 'disabled';\n\n  /** Set current control + label + control message layout. Layouts will collapse based on available container space. */\n  @property({ type: String, reflect: true }) layout:\n    | 'vertical'\n    | 'vertical-inline'\n    | 'horizontal'\n    | 'horizontal-inline';\n\n  /** Sets the input to match the width of the active text content of the control value. Only applicable to vertical input box type controls (input, select) */\n  @property({ type: Boolean, reflect: true, attribute: 'fit-text' }) fitText = false;\n\n  /** Sets the input to match native default content block */\n  @property({ type: Boolean, reflect: true, attribute: 'fit-content' }) fitContent = false;\n\n  #i18nController: I18nController<this> = new I18nController<this>(this);\n\n  /** Enables internal string values to update for internationalization. */\n  @property({ type: Object }) i18n = this.#i18nController.i18n;\n\n  /** Set the visual prominence of the control */\n  @property({ type: String, reflect: true }) prominence: 'muted';\n\n  get #label() {\n    return this.shadowRoot\n      ?.querySelector<HTMLSlotElement>('slot[name=\"label\"]')\n      ?.assignedElements({ flatten: true })?.[0] as HTMLLabelElement;\n  }\n\n  get #messages() {\n    return (this.shadowRoot\n      ?.querySelector<HTMLSlotElement>('slot[name=\"messages\"]')\n      ?.assignedElements({ flatten: true }) ?? []) as ControlMessage[];\n  }\n\n  #input: HTMLInputElement;\n\n  /** @private */\n  get input(): HTMLInputElement {\n    if (!isServer && !this.#input) {\n      const slotted =\n        this.querySelector('slot')\n          ?.assignedElements()\n          ?.find(i => i.matches(inputQuery)) ??\n        Array.from(this.shadowRoot!.querySelector('slot')?.assignedElements({ flatten: true }) ?? []).find(i =>\n          i.matches(inputQuery)\n        );\n      this.#input = (slotted ? slotted : this.querySelector(inputQuery)) as HTMLInputElement;\n    }\n\n    return this.#input;\n  }\n\n  /** @private */\n  protected get prefixContent(): typeof nothing | TemplateResult {\n    return nothing;\n  }\n\n  /** @private */\n  protected get suffixContent(): typeof nothing | TemplateResult {\n    return nothing;\n  }\n\n  @hostAttr({ attribute: 'nve-control' }) protected nveControl = '';\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  #observers: (MutationObserver | ResizeObserver)[] = [];\n\n  protected _associateDatalist = true;\n\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-control',\n    version: '0.0.0'\n  };\n\n  render() {\n    return this.nveControl !== 'inline'\n      ? html`\n      <div internal-host part=\"_internal-host\">\n        <slot name=\"label\" part=\"_label\"></slot>\n        <div input part=\"_input\">\n          ${this.prefixContent}\n          <slot></slot>\n          ${this.suffixContent}\n        </div>\n        <slot name=\"messages\" part=\"_messages\"></slot>\n      </div>\n    `\n      : html`\n      <div internal-host part=\"_internal-host\">\n        <div input part=\"_input\"><slot interaction-state></slot></div>\n        <slot name=\"label\" part=\"_label\"></slot>\n        <slot name=\"messages\" part=\"_messages\"></slot>\n      </div>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    appendRootNodeStyle(this, globalStyles);\n    this.shadowRoot!.addEventListener('slotchange', this.#onRootSlotchange);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.shadowRoot!.removeEventListener('slotchange', this.#onRootSlotchange);\n    this.shadowRoot!.removeEventListener('slotchange', this.#onInputSlotchange);\n    if (this.fitText && this.input) {\n      this.input.removeEventListener('input', this.#onFitTextUpdate);\n      this.input.removeEventListener('change', this.#onFitTextUpdate);\n    }\n    this.#observers.forEach(observer => observer.disconnect());\n    this.#observers.length = 0;\n  }\n\n  #onRootSlotchange = () => {\n    this.#updateStyleStates();\n\n    if (this.input && this.#observers.length === 0) {\n      this.#setupInput();\n      this.#setupFitText();\n    }\n  };\n\n  /** Resets control value to initial attribute value and clears any active validation rules. */\n  reset() {\n    this.input.value = this.input.getAttribute('value') ?? '';\n    this.requestUpdate();\n    this.dispatchEvent(new CustomEvent('reset', { bubbles: true, composed: true }));\n  }\n\n  #setupInput() {\n    setupControlValidationStates(this, this.#messages);\n\n    this.#observers.push(\n      ...setupControlStates(this),\n      ...setupControlStatusStates(this, this.#messages),\n      setupControlLayoutStates(this),\n      getAttributeListChanges(this, ['hidden', 'status'], () => this.#updateStyleStates())\n    );\n\n    this.#polyfillShowPicker();\n    this.#updateAssociations();\n    this.shadowRoot!.addEventListener('slotchange', this.#onInputSlotchange);\n  }\n\n  #onInputSlotchange = () => {\n    this.#updateStyleStates();\n    this.#updateAssociations();\n  };\n\n  #setupFitText() {\n    if (this.fitText) {\n      this.#getCharacterWidth();\n      this.input.addEventListener('input', this.#onFitTextUpdate);\n      this.input.addEventListener('change', this.#onFitTextUpdate);\n    }\n  }\n\n  #onFitTextUpdate = () => {\n    this.#getCharacterWidth();\n  };\n\n  #getCharacterWidth() {\n    if (this.input.tagName === 'INPUT') {\n      const offset = this.input.type !== 'text' ? 4 : 0;\n      this.style.setProperty('--control-width', `${this.input.value.length + offset}ch`);\n      this.input.style.setProperty('max-width', `${this.input.value.length + 2}ch`, 'important');\n    } else if (this.input.tagName === 'SELECT') {\n      this.style.setProperty(\n        '--control-width',\n        `${(this.input as unknown as HTMLSelectElement).options[(this.input as unknown as HTMLSelectElement).selectedIndex]!.textContent!.length + 4}ch`\n      );\n    }\n  }\n\n  #polyfillShowPicker() {\n    if (!this.input.showPicker) {\n      this.input.showPicker = () => this.input.focus();\n    }\n  }\n\n  #updateStyleStates() {\n    if (this.input) {\n      this.toggleAttribute('multiple', this.input?.multiple);\n      this.input?.hasAttribute('size') ? this.setAttribute('size', '') : this.removeAttribute('size');\n    }\n  }\n\n  #updateAssociations() {\n    this.#assignLabel();\n    associateLabel(this.#label, this.input);\n    associateAriaDescribedBy(Array.from(this.#messages), this.input);\n\n    if (this._associateDatalist) {\n      associateDataList(this.querySelector<HTMLDataListElement>('datalist')!, this.input);\n    }\n  }\n\n  #assignLabel() {\n    const label =\n      this.querySelector('label') ||\n      (this.shadowRoot!.querySelector('slot')!\n        .assignedNodes({ flatten: true })\n        .find((i: Node) => (i as HTMLElement).tagName === 'LABEL') as HTMLLabelElement);\n    if (label) {\n      label.slot = 'label';\n    }\n  }\n\n  protected showPicker() {\n    try {\n      this.input.showPicker();\n    } catch {\n      //\n    }\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"control2.js","names":["#i18nController","#updateStyleStates","#observers","#setupInput","#setupFitText","#updateAssociations","#getCharacterWidth","#label","#messages","#input","#onRootSlotchange","#onInputSlotchange","#onFitTextUpdate","#resetInputValue","#resetSelectValue","#isCheckedInput","#polyfillShowPicker","#assignLabel"],"sources":["../../../src/forms/control/control.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { TemplateResult } from 'lit';\nimport { LitElement, html, nothing, isServer } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport {\n  attachInternals,\n  useStyles,\n  associateLabel,\n  associateAriaDescribedBy,\n  associateDataList,\n  appendRootNodeStyle,\n  getAttributeListChanges,\n  I18nController,\n  hostAttr,\n  typeSSR\n} from '@nvidia-elements/core/internal';\nimport type { ControlMessage } from '../control-message/control-message.js';\nimport {\n  setupControlValidationStates,\n  setupControlStates,\n  setupControlStatusStates,\n  inputQuery,\n  type ControlStateCleanup\n} from '../utils/states.js';\nimport { setupControlLayoutStates } from '../utils/layout.js';\nimport globalStyles from './control.global.css?inline';\nimport styles from './control.css?inline';\n\ninterface ResettableControl {\n  getAttribute: Element['getAttribute'];\n  value: string;\n}\n\ntype ControlInput = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement | ResettableControl;\n\n/**\n * @element nve-control\n * @description Wraps a form input with its associated label and validation messages, managing layout and accessibility associations.\n * @since 0.3.0\n * @entrypoint \\@nvidia-elements/core/forms\n * @slot - Control input element\n * @slot label - Label element\n * @cssprop --cursor\n * @cssprop --accent-color\n * @cssprop --color\n * @cssprop --label-color\n * @cssprop --label-width\n * @cssprop --label-font-weight\n * @cssprop --label-font-size\n * @cssprop --control-width\n * @cssprop --control-height\n\n * @aria https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals\n * @package true\n */\n@typeSSR()\nexport class Control extends LitElement {\n  /** Set current visual state for control. This overrides any validation states active. */\n  @property({ type: String }) status: 'warning' | 'error' | 'success' | 'disabled';\n\n  /** Set current control + label + control message layout. Layouts will collapse based on available container space. */\n  @property({ type: String, reflect: true }) layout:\n    | 'vertical'\n    | 'vertical-inline'\n    | 'horizontal'\n    | 'horizontal-inline';\n\n  /** Sets the input to match the width of the active text content of the control value. Only applicable to vertical input box type controls (input, select) */\n  @property({ type: Boolean, reflect: true, attribute: 'fit-text' }) fitText = false;\n\n  /** Sets the input to match native default content block */\n  @property({ type: Boolean, reflect: true, attribute: 'fit-content' }) fitContent = false;\n\n  #i18nController: I18nController<this> = new I18nController<this>(this);\n\n  /** Enables internal string values to update for internationalization. */\n  @property({ type: Object }) i18n = this.#i18nController.i18n;\n\n  /** Set the visual prominence of the control */\n  @property({ type: String, reflect: true }) prominence: 'muted';\n\n  get #label() {\n    return this.shadowRoot\n      ?.querySelector<HTMLSlotElement>('slot[name=\"label\"]')\n      ?.assignedElements({ flatten: true })?.[0] as HTMLLabelElement;\n  }\n\n  get #messages() {\n    return (this.shadowRoot\n      ?.querySelector<HTMLSlotElement>('slot[name=\"messages\"]')\n      ?.assignedElements({ flatten: true }) ?? []) as ControlMessage[];\n  }\n\n  #input: HTMLInputElement;\n\n  /** @private */\n  get input(): HTMLInputElement {\n    if (!isServer && !this.#input) {\n      const slotted =\n        this.querySelector('slot')\n          ?.assignedElements()\n          ?.find(i => i.matches(inputQuery)) ??\n        Array.from(this.shadowRoot!.querySelector('slot')?.assignedElements({ flatten: true }) ?? []).find(i =>\n          i.matches(inputQuery)\n        );\n      this.#input = (slotted ? slotted : this.querySelector(inputQuery)) as HTMLInputElement;\n    }\n\n    return this.#input;\n  }\n\n  /** @private */\n  protected get prefixContent(): typeof nothing | TemplateResult {\n    return nothing;\n  }\n\n  /** @private */\n  protected get suffixContent(): typeof nothing | TemplateResult {\n    return nothing;\n  }\n\n  @hostAttr({ attribute: 'nve-control' }) protected nveControl = '';\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  #observers: (MutationObserver | ResizeObserver | ControlStateCleanup)[] = [];\n\n  protected _associateDatalist = true;\n\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-control',\n    version: '0.0.0'\n  };\n\n  render() {\n    return this.nveControl !== 'inline'\n      ? html`\n      <div internal-host part=\"_internal-host\">\n        <slot name=\"label\" part=\"_label\"></slot>\n        <div input part=\"_input\">\n          ${this.prefixContent}\n          <slot></slot>\n          ${this.suffixContent}\n        </div>\n        <slot name=\"messages\" part=\"_messages\"></slot>\n      </div>\n    `\n      : html`\n      <div internal-host part=\"_internal-host\">\n        <div input part=\"_input\"><slot interaction-state></slot></div>\n        <slot name=\"label\" part=\"_label\"></slot>\n        <slot name=\"messages\" part=\"_messages\"></slot>\n      </div>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    appendRootNodeStyle(this, globalStyles);\n    this.shadowRoot!.addEventListener('slotchange', this.#onRootSlotchange);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.shadowRoot!.removeEventListener('slotchange', this.#onRootSlotchange);\n    this.shadowRoot!.removeEventListener('slotchange', this.#onInputSlotchange);\n    if (this.fitText && this.input) {\n      this.input.removeEventListener('input', this.#onFitTextUpdate);\n      this.input.removeEventListener('change', this.#onFitTextUpdate);\n    }\n    this.#observers.forEach(observer => observer.disconnect());\n    this.#observers.length = 0;\n  }\n\n  #onRootSlotchange = () => {\n    this.#updateStyleStates();\n\n    if (this.input && this.#observers.length === 0) {\n      this.#setupInput();\n      this.#setupFitText();\n    }\n  };\n\n  /** Resets control value to initial attribute value and clears any active validation rules. */\n  reset() {\n    this.#resetInputValue(this.input as ControlInput);\n    this.requestUpdate();\n    this.dispatchEvent(new CustomEvent('reset', { bubbles: true, composed: true }));\n  }\n\n  #resetInputValue(input: ControlInput) {\n    if (input instanceof HTMLSelectElement) {\n      this.#resetSelectValue(input);\n      return;\n    }\n\n    if (this.#isCheckedInput(input)) {\n      input.checked = input.defaultChecked;\n      input.indeterminate = false;\n      return;\n    }\n\n    input.value =\n      input instanceof HTMLInputElement || input instanceof HTMLTextAreaElement\n        ? input.defaultValue\n        : (input.getAttribute('value') ?? '');\n  }\n\n  #resetSelectValue(input: HTMLSelectElement) {\n    const hasDefaultSelection = Array.from(input.options).some(option => option.defaultSelected);\n    Array.from(input.options).forEach(option => (option.selected = option.defaultSelected));\n    if (!input.multiple && !hasDefaultSelection) input.selectedIndex = 0;\n  }\n\n  #isCheckedInput(input: ControlInput): input is HTMLInputElement {\n    return input instanceof HTMLInputElement && (input.type === 'checkbox' || input.type === 'radio');\n  }\n\n  #setupInput() {\n    this.#observers.push(\n      ...setupControlValidationStates(this, this.#messages),\n      ...setupControlStates(this),\n      ...setupControlStatusStates(this, this.#messages),\n      setupControlLayoutStates(this),\n      getAttributeListChanges(this, ['hidden', 'status'], () => this.#updateStyleStates())\n    );\n\n    this.#polyfillShowPicker();\n    this.#updateAssociations();\n    this.shadowRoot!.addEventListener('slotchange', this.#onInputSlotchange);\n  }\n\n  #onInputSlotchange = () => {\n    this.#updateStyleStates();\n    this.#updateAssociations();\n  };\n\n  #setupFitText() {\n    if (this.fitText) {\n      this.#getCharacterWidth();\n      this.input.addEventListener('input', this.#onFitTextUpdate);\n      this.input.addEventListener('change', this.#onFitTextUpdate);\n    }\n  }\n\n  #onFitTextUpdate = () => {\n    this.#getCharacterWidth();\n  };\n\n  #getCharacterWidth() {\n    if (this.input.tagName === 'INPUT') {\n      const offset = this.input.type !== 'text' ? 4 : 0;\n      this.style.setProperty('--control-width', `${this.input.value.length + offset}ch`);\n      this.input.style.setProperty('max-width', `${this.input.value.length + 2}ch`, 'important');\n    } else if (this.input.tagName === 'SELECT') {\n      this.style.setProperty(\n        '--control-width',\n        `${(this.input as unknown as HTMLSelectElement).options[(this.input as unknown as HTMLSelectElement).selectedIndex]!.textContent!.length + 4}ch`\n      );\n    }\n  }\n\n  #polyfillShowPicker() {\n    if (!this.input.showPicker) {\n      this.input.showPicker = () => this.input.focus();\n    }\n  }\n\n  #updateStyleStates() {\n    if (this.input) {\n      this.toggleAttribute('multiple', this.input?.multiple);\n      this.input?.hasAttribute('size') ? this.setAttribute('size', '') : this.removeAttribute('size');\n    }\n  }\n\n  #updateAssociations() {\n    this.#assignLabel();\n    associateLabel(this.#label, this.input);\n    associateAriaDescribedBy(Array.from(this.#messages), this.input);\n\n    if (this._associateDatalist) {\n      associateDataList(this.querySelector<HTMLDataListElement>('datalist')!, this.input);\n    }\n  }\n\n  #assignLabel() {\n    const label =\n      this.querySelector('label') ||\n      (this.shadowRoot!.querySelector('slot')!\n        .assignedNodes({ flatten: true })\n        .find((i: Node) => (i as HTMLElement).tagName === 'LABEL') as HTMLLabelElement);\n    if (label) {\n      label.slot = 'label';\n    }\n  }\n\n  protected showPicker() {\n    try {\n      this.input.showPicker();\n    } catch {\n      //\n    }\n  }\n}\n"],"mappings":"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"}

package/dist/forms/control-group/control-group.js

@@ -1,5 +1,5 @@
 //#region src/forms/control-group/control-group.css?inline
-var e = ":host{--color: var(--nve-sys-interaction-field-color);--opacity: 1;--label-color: var(--nve-sys-interaction-field-color);--label-text-transform: capitalize;--label-font-weight: var(--nve-ref-font-weight-medium);--label-font-size: var(--nve-ref-font-size-100);--_label-width: var(--label-width, 180px)}[internal-host]{color:var(--color);opacity:var(--opacity)}::slotted(label){font-weight:var(--label-font-weight)!important;font-size:var(--label-font-size)!important;color:var(--label-color)!important;cursor:var(--cursor)!important;text-transform:var(--label-text-transform)!important}:host([layout*=\"horizontal-inline\"]) ::slotted([nve-control]),:host([layout*=\"vertical-inline\"]) ::slotted([nve-control]){--control-height: var(--nve-sys-interaction-field-height)}slot[name=label]{grid-area:label;display:block;align-self:center}slot[name=messages]{grid-area:messages;display:block}.input-slot{grid-area:input;display:flex;flex-flow:column wrap;gap:var(--nve-ref-space-sm) var(--nve-ref-space-md)}:host([layout*=\"-inline\"]) .input-slot{flex-direction:row}[name=messages]:not(:has-slotted),[name=label]:not(:has-slotted){display:none!important}.no-messages{& slot[name=messages]{display:none!important}}.no-label{& slot[name=label]{display:none!important}}[internal-host]{display:grid;gap:var(--nve-ref-space-xs);align-items:start;grid-template-columns:1fr 1fr 1fr;grid-template-rows:auto;grid-template-areas:\"label label label\" \"input input input\" \"messages messages messages\";&.no-messages{grid-template-areas:\"label label label\" \"input input input\"}&.no-label{& slot[name=messages]{grid-template-areas:\"input input input\" \"messages messages messages\"}}&.no-label.no-messages{grid-template-areas:\"input input input\"}}:host([layout=\"vertical-inline\"]) [internal-host]{grid-template-areas:\"label label label\" \"input input input\" \"messages messages messages\"}:host([layout=\"vertical-inline\"]) [internal-host].no-messages{grid-template-areas:\"label label label\" \"input input input\"}:host([layout=\"horizontal\"]) [internal-host]{grid-template-columns:var(--_label-width) minmax(auto,max-content) auto;grid-template-areas:\"label input input\" \". messages messages\"}:host([layout=\"horizontal\"]) [internal-host].no-messages{grid-template-areas:\"label input input\"}:host([layout=\"horizontal-inline\"]) [internal-host]{grid-template-columns:var(--_label-width) minmax(auto,max-content) auto;grid-template-areas:\"label input input\" \". messages messages\"}:host([layout=\"horizontal-inline\"]) [internal-host].no-messages{grid-template-areas:\"label input input\"}:host([layout=\"horizontal\"]) slot[name=label]{align-self:start}:host([layout=\"horizontal\"]) ::slotted(label){align-self:start!important}";
+var e = ":host{--color: var(--nve-sys-interaction-field-color);--opacity: 1;--label-color: var(--nve-sys-interaction-field-color);--label-text-transform: none;--label-font-weight: var(--nve-ref-font-weight-medium);--label-font-size: var(--nve-ref-font-size-100);--_label-width: var(--label-width, 180px)}[internal-host]{color:var(--color);opacity:var(--opacity)}::slotted(label){font-weight:var(--label-font-weight)!important;font-size:var(--label-font-size)!important;color:var(--label-color)!important;cursor:var(--cursor)!important;text-transform:var(--label-text-transform)!important}:host([layout*=\"horizontal-inline\"]) ::slotted([nve-control]),:host([layout*=\"vertical-inline\"]) ::slotted([nve-control]){--control-height: var(--nve-sys-interaction-field-height)}slot[name=label]{grid-area:label;display:block;align-self:center}slot[name=messages]{grid-area:messages;display:block}.input-slot{grid-area:input;display:flex;flex-flow:column wrap;gap:var(--nve-ref-space-sm) var(--nve-ref-space-md)}:host([layout*=\"-inline\"]) .input-slot{flex-direction:row}[name=messages]:not(:has-slotted),[name=label]:not(:has-slotted){display:none!important}.no-messages{& slot[name=messages]{display:none!important}}.no-label{& slot[name=label]{display:none!important}}[internal-host]{display:grid;gap:var(--nve-ref-space-xs);align-items:start;grid-template-columns:1fr 1fr 1fr;grid-template-rows:auto;grid-template-areas:\"label label label\" \"input input input\" \"messages messages messages\";&.no-messages{grid-template-areas:\"label label label\" \"input input input\"}&.no-label{& slot[name=messages]{grid-template-areas:\"input input input\" \"messages messages messages\"}}&.no-label.no-messages{grid-template-areas:\"input input input\"}}:host([layout=\"vertical-inline\"]) [internal-host]{grid-template-areas:\"label label label\" \"input input input\" \"messages messages messages\"}:host([layout=\"vertical-inline\"]) [internal-host].no-messages{grid-template-areas:\"label label label\" \"input input input\"}:host([layout=\"horizontal\"]) [internal-host]{grid-template-columns:var(--_label-width) minmax(auto,max-content) auto;grid-template-areas:\"label input input\" \". messages messages\"}:host([layout=\"horizontal\"]) [internal-host].no-messages{grid-template-areas:\"label input input\"}:host([layout=\"horizontal-inline\"]) [internal-host]{grid-template-columns:var(--_label-width) minmax(auto,max-content) auto;grid-template-areas:\"label input input\" \". messages messages\"}:host([layout=\"horizontal-inline\"]) [internal-host].no-messages{grid-template-areas:\"label input input\"}:host([layout=\"horizontal\"]) slot[name=label]{align-self:start}:host([layout=\"horizontal\"]) ::slotted(label){align-self:start!important}";
 //#endregion
 export { e as default };
 

package/dist/forms/control-group/control-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"control-group.js","names":[],"sources":["../../../src/forms/control-group/control-group.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n:host {\n  --color: var(--nve-sys-interaction-field-color);\n  --opacity: 1;\n  --label-color: var(--nve-sys-interaction-field-color);\n  --label-text-transform: capitalize;\n  --label-font-weight: var(--nve-ref-font-weight-medium);\n  --label-font-size: var(--nve-ref-font-size-100);\n  --_label-width: var(--label-width, 180px);\n}\n\n[internal-host] {\n  color: var(--color);\n  opacity: var(--opacity);\n}\n\n::slotted(label) {\n  font-weight: var(--label-font-weight) !important;\n  font-size: var(--label-font-size) !important;\n  color: var(--label-color) !important;\n  cursor: var(--cursor) !important;\n  text-transform: var(--label-text-transform) !important;\n}\n\n:host([layout*='horizontal-inline']) ::slotted([nve-control]),\n:host([layout*='vertical-inline']) ::slotted([nve-control]) {\n  --control-height: var(--nve-sys-interaction-field-height);\n}\n\nslot[name='label'] {\n  grid-area: label;\n  display: block;\n  align-self: center;\n}\n\nslot[name='messages'] {\n  grid-area: messages;\n  display: block;\n}\n\n.input-slot {\n  grid-area: input;\n  display: flex;\n  flex-flow: column wrap;\n  gap: var(--nve-ref-space-sm) var(--nve-ref-space-md);\n}\n\n:host([layout*='-inline']) .input-slot {\n  flex-direction: row;\n}\n\n[name='messages']:not(:has-slotted),\n[name='label']:not(:has-slotted) {\n  display: none !important;\n}\n\n/* fallback for :has-slotted */\n.no-messages {\n  & slot[name='messages'] {\n    display: none !important;\n  }\n}\n\n/* fallback for :has-slotted */\n.no-label {\n  & slot[name='label'] {\n    display: none !important;\n  }\n}\n\n[internal-host] {\n  display: grid;\n  gap: var(--nve-ref-space-xs);\n  align-items: start;\n  grid-template-columns: 1fr 1fr 1fr;\n  grid-template-rows: auto;\n  grid-template-areas:\n    'label label label'\n    'input input input'\n    'messages messages messages';\n\n  &.no-messages {\n    grid-template-areas:\n      'label label label'\n      'input input input';\n  }\n\n  &.no-label {\n    & slot[name='messages'] {\n      grid-template-areas:\n        'input input input'\n        'messages messages messages';\n    }\n  }\n\n  &.no-label.no-messages {\n    grid-template-areas: 'input input input';\n  }\n}\n\n:host([layout='vertical-inline']) [internal-host] {\n  grid-template-areas:\n    'label label label'\n    'input input input'\n    'messages messages messages';\n}\n\n:host([layout='vertical-inline']) [internal-host].no-messages {\n  grid-template-areas:\n    'label label label'\n    'input input input';\n}\n\n:host([layout='horizontal']) [internal-host] {\n  grid-template-columns: var(--_label-width) minmax(auto, max-content) auto;\n  grid-template-areas:\n    'label input input'\n    '. messages messages';\n}\n\n:host([layout='horizontal']) [internal-host].no-messages {\n  grid-template-areas: 'label input input';\n}\n\n:host([layout='horizontal-inline']) [internal-host] {\n  grid-template-columns: var(--_label-width) minmax(auto, max-content) auto;\n  grid-template-areas:\n    'label input input'\n    '. messages messages';\n}\n\n:host([layout='horizontal-inline']) [internal-host].no-messages {\n  grid-template-areas: 'label input input';\n}\n\n:host([layout='horizontal']) slot[name='label'] {\n  align-self: start;\n}\n\n:host([layout='horizontal']) ::slotted(label) {\n  align-self: start !important;\n}\n"],"mappings":""}
+{"version":3,"file":"control-group.js","names":[],"sources":["../../../src/forms/control-group/control-group.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n:host {\n  --color: var(--nve-sys-interaction-field-color);\n  --opacity: 1;\n  --label-color: var(--nve-sys-interaction-field-color);\n  --label-text-transform: none;\n  --label-font-weight: var(--nve-ref-font-weight-medium);\n  --label-font-size: var(--nve-ref-font-size-100);\n  --_label-width: var(--label-width, 180px);\n}\n\n[internal-host] {\n  color: var(--color);\n  opacity: var(--opacity);\n}\n\n::slotted(label) {\n  font-weight: var(--label-font-weight) !important;\n  font-size: var(--label-font-size) !important;\n  color: var(--label-color) !important;\n  cursor: var(--cursor) !important;\n  text-transform: var(--label-text-transform) !important;\n}\n\n:host([layout*='horizontal-inline']) ::slotted([nve-control]),\n:host([layout*='vertical-inline']) ::slotted([nve-control]) {\n  --control-height: var(--nve-sys-interaction-field-height);\n}\n\nslot[name='label'] {\n  grid-area: label;\n  display: block;\n  align-self: center;\n}\n\nslot[name='messages'] {\n  grid-area: messages;\n  display: block;\n}\n\n.input-slot {\n  grid-area: input;\n  display: flex;\n  flex-flow: column wrap;\n  gap: var(--nve-ref-space-sm) var(--nve-ref-space-md);\n}\n\n:host([layout*='-inline']) .input-slot {\n  flex-direction: row;\n}\n\n[name='messages']:not(:has-slotted),\n[name='label']:not(:has-slotted) {\n  display: none !important;\n}\n\n/* fallback for :has-slotted */\n.no-messages {\n  & slot[name='messages'] {\n    display: none !important;\n  }\n}\n\n/* fallback for :has-slotted */\n.no-label {\n  & slot[name='label'] {\n    display: none !important;\n  }\n}\n\n[internal-host] {\n  display: grid;\n  gap: var(--nve-ref-space-xs);\n  align-items: start;\n  grid-template-columns: 1fr 1fr 1fr;\n  grid-template-rows: auto;\n  grid-template-areas:\n    'label label label'\n    'input input input'\n    'messages messages messages';\n\n  &.no-messages {\n    grid-template-areas:\n      'label label label'\n      'input input input';\n  }\n\n  &.no-label {\n    & slot[name='messages'] {\n      grid-template-areas:\n        'input input input'\n        'messages messages messages';\n    }\n  }\n\n  &.no-label.no-messages {\n    grid-template-areas: 'input input input';\n  }\n}\n\n:host([layout='vertical-inline']) [internal-host] {\n  grid-template-areas:\n    'label label label'\n    'input input input'\n    'messages messages messages';\n}\n\n:host([layout='vertical-inline']) [internal-host].no-messages {\n  grid-template-areas:\n    'label label label'\n    'input input input';\n}\n\n:host([layout='horizontal']) [internal-host] {\n  grid-template-columns: var(--_label-width) minmax(auto, max-content) auto;\n  grid-template-areas:\n    'label input input'\n    '. messages messages';\n}\n\n:host([layout='horizontal']) [internal-host].no-messages {\n  grid-template-areas: 'label input input';\n}\n\n:host([layout='horizontal-inline']) [internal-host] {\n  grid-template-columns: var(--_label-width) minmax(auto, max-content) auto;\n  grid-template-areas:\n    'label input input'\n    '. messages messages';\n}\n\n:host([layout='horizontal-inline']) [internal-host].no-messages {\n  grid-template-areas: 'label input input';\n}\n\n:host([layout='horizontal']) slot[name='label'] {\n  align-self: start;\n}\n\n:host([layout='horizontal']) ::slotted(label) {\n  align-self: start !important;\n}\n"],"mappings":""}

package/dist/forms/control-group/control-group2.js

@@ -1,6 +1,6 @@
 import { associateAriaDescribedBy as e, associateAriaLabel as t, associateControlGroup as n, attachInternals as r } from "../../internal/utils/a11y.js";
 import { useStyles as i } from "../../internal/styles/index.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 { inputQuery as o, setupControlGroupStates as s, setupControlStatusStates as c } from "../utils/states.js";
 import { setupControlLayoutStates as l } from "../utils/layout.js";
 import u from "./control-group.js";
@@ -24,7 +24,7 @@ var m = class extends d {
 	static {
 		this.metadata = {
 			tag: "nve-control-group",
-			version: "2.0.1"
+			version: "2.0.2"
 		};
 	}
 	render() {

package/dist/forms/control-group/control-group2.js.map

@@ -1 +1 @@
-{"version":3,"file":"control-group2.js","names":["#messages","#observers","#updateAssociations","#assignLabel"],"sources":["../../../src/forms/control-group/control-group.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { PropertyValues } from 'lit';\nimport { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport {\n  attachInternals,\n  useStyles,\n  associateAriaLabel,\n  associateAriaDescribedBy,\n  associateControlGroup\n} from '@nvidia-elements/core/internal';\nimport type { ControlMessage } from '../control-message/control-message.js';\nimport { setupControlStatusStates, setupControlGroupStates, inputQuery } from '../utils/states.js';\nimport { setupControlLayoutStates } from '../utils/layout.js';\nimport styles from './control-group.css?inline';\n\n/**\n * @element nve-control-group\n * @description Groups many related form controls under a shared label and validation context for semantically linked inputs.\n * @since 0.3.0\n * @entrypoint \\@nvidia-elements/core/forms\n * @slot - Control input elements\n * @cssprop --color\n * @cssprop --label-color\n * @cssprop --label-text-transform\n * @cssprop --label-font-weight\n * @cssprop --label-font-size\n * @aria https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals\n * @package true\n */\nexport class ControlGroup extends LitElement {\n  /** Set each slotted control + label + control message layout */\n  @property({ type: String, reflect: true }) layout:\n    | 'vertical'\n    | 'vertical-inline'\n    | 'horizontal'\n    | 'horizontal-inline';\n\n  /** Set the visual prominence of the control group */\n  @property({ type: String, reflect: true }) prominence: 'muted';\n\n  get label() {\n    return this.querySelector?.<HTMLLabelElement>('label');\n  }\n\n  get inputs() {\n    return this.querySelectorAll ? Array.from(this.querySelectorAll<HTMLInputElement>(inputQuery)) : [];\n  }\n\n  get #messages() {\n    return this.querySelectorAll ? Array.from(this.querySelectorAll<ControlMessage>('nve-control-message')) : [];\n  }\n\n  #observers: (MutationObserver | ResizeObserver)[] = [];\n\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-control-group',\n    version: '0.0.0'\n  };\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  render() {\n    return html`\n      <div internal-host class=\"${this.#messages.length ? '' : 'no-messages'} ${this.label ? '' : 'no-label'}\">\n        <slot name=\"label\"></slot>\n        <slot class=\"input-slot\"></slot>\n        <slot name=\"messages\"></slot>\n      </div>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    this._internals.role = 'group';\n  }\n\n  firstUpdated(props: PropertyValues<this>) {\n    super.firstUpdated(props);\n    this.#observers = [\n      setupControlGroupStates(this),\n      setupControlLayoutStates(this),\n      ...setupControlStatusStates(this, this.#messages)\n    ];\n    this.#updateAssociations();\n    this.shadowRoot!.addEventListener('slotchange', () => this.#updateAssociations());\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.#observers.forEach(observer => observer.disconnect());\n  }\n\n  #updateAssociations() {\n    this.#assignLabel();\n    associateAriaLabel(this.label as HTMLElement, this);\n    associateAriaDescribedBy(Array.from(this.querySelectorAll<ControlMessage>('nve-control-message')), this);\n    associateControlGroup(Array.from(this.inputs));\n  }\n\n  #assignLabel() {\n    if (this.label) {\n      this.label.slot = 'label';\n    }\n  }\n}\n"],"mappings":";;;;;;;;;AAgCA,IAAa,IAAb,cAAkC,EAAW;CAW3C,IAAI,QAAQ;EACV,OAAO,KAAK,gBAAkC,OAAO;CACvD;CAEA,IAAI,SAAS;EACX,OAAO,KAAK,mBAAmB,MAAM,KAAK,KAAK,iBAAmC,CAAU,CAAC,IAAI,CAAC;CACpG;CAEA,IAAIA,KAAY;EACd,OAAO,KAAK,mBAAmB,MAAM,KAAK,KAAK,iBAAiC,qBAAqB,CAAC,IAAI,CAAC;CAC7G;CAEA,KAAoD,CAAC;;gBAErC,EAAU,CAAC,CAAM,CAAC;;;kBAEP;GACzB,KAAK;GACL,SAAS;EACX;;CAKA,SAAS;EACP,OAAO,CAAI,6BACmB,KAAKA,GAAU,SAAS,KAAK,cAAc,GAAG,KAAK,QAAQ,KAAK,WAAW;CAM3G;CAEA,oBAAoB;EAGlB,AAFA,MAAM,kBAAkB,GACxB,EAAgB,IAAI,GACpB,KAAK,WAAW,OAAO;CACzB;CAEA,aAAa,GAA6B;EAQxC,AAPA,MAAM,aAAa,CAAK,GACxB,KAAKC,KAAa;GAChB,EAAwB,IAAI;GAC5B,EAAyB,IAAI;GAC7B,GAAG,EAAyB,MAAM,KAAKD,EAAS;EAClD,GACA,KAAKE,GAAoB,GACzB,KAAK,WAAY,iBAAiB,oBAAoB,KAAKA,GAAoB,CAAC;CAClF;CAEA,uBAAuB;EAErB,AADA,MAAM,qBAAqB,GAC3B,KAAKD,GAAW,SAAQ,MAAY,EAAS,WAAW,CAAC;CAC3D;CAEA,KAAsB;EAIpB,AAHA,KAAKE,GAAa,GAClB,EAAmB,KAAK,OAAsB,IAAI,GAClD,EAAyB,MAAM,KAAK,KAAK,iBAAiC,qBAAqB,CAAC,GAAG,IAAI,GACvG,EAAsB,MAAM,KAAK,KAAK,MAAM,CAAC;CAC/C;CAEA,KAAe;EACb,AAAI,KAAK,UACP,KAAK,MAAM,OAAO;CAEtB;AACF;GA7EG,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,UAAA,KAAA,CAAA,MAOxC,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,cAAA,KAAA,CAAA"}
+{"version":3,"file":"control-group2.js","names":["#messages","#observers","#updateAssociations","#assignLabel"],"sources":["../../../src/forms/control-group/control-group.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { PropertyValues } from 'lit';\nimport { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport {\n  attachInternals,\n  useStyles,\n  associateAriaLabel,\n  associateAriaDescribedBy,\n  associateControlGroup\n} from '@nvidia-elements/core/internal';\nimport type { ControlMessage } from '../control-message/control-message.js';\nimport {\n  setupControlStatusStates,\n  setupControlGroupStates,\n  inputQuery,\n  type ControlStateCleanup\n} from '../utils/states.js';\nimport { setupControlLayoutStates } from '../utils/layout.js';\nimport styles from './control-group.css?inline';\n\n/**\n * @element nve-control-group\n * @description Groups many related form controls under a shared label and validation context for semantically linked inputs.\n * @since 0.3.0\n * @entrypoint \\@nvidia-elements/core/forms\n * @slot - Control input elements\n * @cssprop --color\n * @cssprop --label-color\n * @cssprop --label-text-transform\n * @cssprop --label-font-weight\n * @cssprop --label-font-size\n * @aria https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals\n * @package true\n */\nexport class ControlGroup extends LitElement {\n  /** Set each slotted control + label + control message layout */\n  @property({ type: String, reflect: true }) layout:\n    | 'vertical'\n    | 'vertical-inline'\n    | 'horizontal'\n    | 'horizontal-inline';\n\n  /** Set the visual prominence of the control group */\n  @property({ type: String, reflect: true }) prominence: 'muted';\n\n  get label() {\n    return this.querySelector?.<HTMLLabelElement>('label');\n  }\n\n  get inputs() {\n    return this.querySelectorAll ? Array.from(this.querySelectorAll<HTMLInputElement>(inputQuery)) : [];\n  }\n\n  get #messages() {\n    return this.querySelectorAll ? Array.from(this.querySelectorAll<ControlMessage>('nve-control-message')) : [];\n  }\n\n  #observers: (MutationObserver | ResizeObserver | ControlStateCleanup)[] = [];\n\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-control-group',\n    version: '0.0.0'\n  };\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  render() {\n    return html`\n      <div internal-host class=\"${this.#messages.length ? '' : 'no-messages'} ${this.label ? '' : 'no-label'}\">\n        <slot name=\"label\"></slot>\n        <slot class=\"input-slot\"></slot>\n        <slot name=\"messages\"></slot>\n      </div>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    this._internals.role = 'group';\n  }\n\n  firstUpdated(props: PropertyValues<this>) {\n    super.firstUpdated(props);\n    this.#observers = [\n      setupControlGroupStates(this),\n      setupControlLayoutStates(this),\n      ...setupControlStatusStates(this, this.#messages)\n    ];\n    this.#updateAssociations();\n    this.shadowRoot!.addEventListener('slotchange', () => this.#updateAssociations());\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.#observers.forEach(observer => observer.disconnect());\n  }\n\n  #updateAssociations() {\n    this.#assignLabel();\n    associateAriaLabel(this.label as HTMLElement, this);\n    associateAriaDescribedBy(Array.from(this.querySelectorAll<ControlMessage>('nve-control-message')), this);\n    associateControlGroup(Array.from(this.inputs));\n  }\n\n  #assignLabel() {\n    if (this.label) {\n      this.label.slot = 'label';\n    }\n  }\n}\n"],"mappings":";;;;;;;;;AAqCA,IAAa,IAAb,cAAkC,EAAW;CAW3C,IAAI,QAAQ;EACV,OAAO,KAAK,gBAAkC,OAAO;CACvD;CAEA,IAAI,SAAS;EACX,OAAO,KAAK,mBAAmB,MAAM,KAAK,KAAK,iBAAmC,CAAU,CAAC,IAAI,CAAC;CACpG;CAEA,IAAIA,KAAY;EACd,OAAO,KAAK,mBAAmB,MAAM,KAAK,KAAK,iBAAiC,qBAAqB,CAAC,IAAI,CAAC;CAC7G;CAEA,KAA0E,CAAC;;gBAE3D,EAAU,CAAC,CAAM,CAAC;;;kBAEP;GACzB,KAAK;GACL,SAAS;EACX;;CAKA,SAAS;EACP,OAAO,CAAI,6BACmB,KAAKA,GAAU,SAAS,KAAK,cAAc,GAAG,KAAK,QAAQ,KAAK,WAAW;CAM3G;CAEA,oBAAoB;EAGlB,AAFA,MAAM,kBAAkB,GACxB,EAAgB,IAAI,GACpB,KAAK,WAAW,OAAO;CACzB;CAEA,aAAa,GAA6B;EAQxC,AAPA,MAAM,aAAa,CAAK,GACxB,KAAKC,KAAa;GAChB,EAAwB,IAAI;GAC5B,EAAyB,IAAI;GAC7B,GAAG,EAAyB,MAAM,KAAKD,EAAS;EAClD,GACA,KAAKE,GAAoB,GACzB,KAAK,WAAY,iBAAiB,oBAAoB,KAAKA,GAAoB,CAAC;CAClF;CAEA,uBAAuB;EAErB,AADA,MAAM,qBAAqB,GAC3B,KAAKD,GAAW,SAAQ,MAAY,EAAS,WAAW,CAAC;CAC3D;CAEA,KAAsB;EAIpB,AAHA,KAAKE,GAAa,GAClB,EAAmB,KAAK,OAAsB,IAAI,GAClD,EAAyB,MAAM,KAAK,KAAK,iBAAiC,qBAAqB,CAAC,GAAG,IAAI,GACvG,EAAsB,MAAM,KAAK,KAAK,MAAM,CAAC;CAC/C;CAEA,KAAe;EACb,AAAI,KAAK,UACP,KAAK,MAAM,OAAO;CAEtB;AACF;GA7EG,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,UAAA,KAAA,CAAA,MAOxC,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,cAAA,KAAA,CAAA"}

package/dist/forms/control-message/control-message2.js

@@ -1,7 +1,7 @@
 import { hostAttr as e } from "../../internal/decorators/host-attr.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 a from "./control-message.js";
 import { LitElement as o, html as s } from "lit";
@@ -23,7 +23,7 @@ var l = {
 	static {
 		this.metadata = {
 			tag: "nve-control-message",
-			version: "2.0.1"
+			version: "2.0.2"
 		};
 	}
 	static {

package/dist/forms/utils/states.d.ts

@@ -2,12 +2,15 @@ import { ControlGroup } from '../control-group/control-group.js';
 import { ControlMessage } from '../control-message/control-message.js';
 import { Control } from '../control/control.js';
 export declare const inputQuery = "input, select, selectmenu, textarea, [nve-control]";
+export interface ControlStateCleanup {
+    disconnect: () => void;
+}
 /**
  * Adds validation states to custom element
  * :state(valid) form control is in a valid state
  * :state(invalid) form control is in a invalid state
  */
-export declare function setupControlValidationStates(control: Control, messages: ControlMessage[]): void;
+export declare function setupControlValidationStates(control: Control, messages: ControlMessage[]): ControlStateCleanup[];
 /**
  * Adds control interaction states to custom element
  * :state(checked) form control is in a checked state
@@ -16,7 +19,7 @@ export declare function setupControlValidationStates(control: Control, messages:
  * :state(touched) form control received focus and then blurred
  * :state(dirty) user modified the form control
  */
-export declare function setupControlStates(control: Control): MutationObserver[];
+export declare function setupControlStates(control: Control): ControlStateCleanup[];
 /**
  * Adds control group interaction states to custom element
  * :state(disabled) any form control within group is in a disabled state
@@ -27,7 +30,7 @@ export declare function setupControlGroupStates(controlGroup: ControlGroup): Mut
  * :state(error) form control is in a error state
  * :state(success) form control is in a success state
  */
-export declare function setupControlStatusStates(control: Control | ControlGroup, messages: ControlMessage[]): MutationObserver[];
+export declare function setupControlStatusStates(control: Control | ControlGroup, messages: ControlMessage[]): ControlStateCleanup[];
 export declare function updateControlStatusState(control: Control | ControlGroup, message: ControlMessage): void;
 export declare function showNonValidationMessages(messages: ControlMessage[]): void;
 export declare function hideAllValidationMessages(messages: ControlMessage[]): void;

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.2"
 		};
 	}
 	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.2"
 		};
 	}
 	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.2"
 		};
 	}
 	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.2",
 			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.2",
 			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.2"
 		};
 	}
 	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.2",
 			children: [a.metadata.tag]
 		};
 	}