@nvidia-elements/core 0.0.7 → 0.0.9

package/dist/format-relative-time/format-relative-time2.js

@@ -16,7 +16,7 @@ var c = class extends a {
 	static {
 		this.metadata = {
 			tag: "nve-format-relative-time",
-			version: "0.0.7"
+			version: "0.0.9"
 		};
 	}
 	#e;

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

@@ -1 +1 @@
-{"version":3,"file":"control.js","names":[],"sources":["../../../src/forms/control/control.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  --cursor: pointer;\n  --accent-color: var(--nve-sys-accent-secondary-background);\n  --color: var(--nve-sys-interaction-field-color);\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  --control-width: 100%;\n  --control-height: var(--nve-sys-interaction-field-height);\n  --_label-width: var(--label-width, 180px);\n  --nve-sys-interaction-state-base: var(--background, var(--nve-sys-layer-canvas-background));\n  --opacity: 1;\n  --filter: none;\n  contain: content;\n}\n\n:host([nve-control='inline']) {\n  --control-height: auto;\n}\n\n::slotted(*) {\n  color-scheme: var(--nve-sys-color-scheme);\n  font-family: inherit;\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  display: inline-block !important;\n  line-height: 1em !important;\n  align-self: center !important;\n}\n\n::slotted(label::first-letter) {\n  text-transform: capitalize;\n}\n\n:host(:state(disabled)),\n:host(:state(disabled)) ::slotted(nve-control-message:not([status])),\n:host(:state(disabled)) ::slotted(nve-control-message:not([status])) {\n  --cursor: not-allowed;\n}\n\n:host(:state(disabled)) {\n  --opacity: var(--nve-ref-opacity-500);\n}\n\n:host(:state(invalid)) ::slotted(nve-control-message:not([error], [status])) {\n  display: none;\n}\n\n:host([fit-content]) {\n  --control-width: fit-content;\n  --label-width: fit-content;\n  --width: fit-content;\n}\n\n:host([nve-control]) ::slotted(input:focus),\n:host([nve-control]) ::slotted(select:focus),\n:host([nve-control]) ::slotted(textarea:focus),\n:host([nve-control]:focus-within) [internal-host]:has(nve-icon-button:focus) [input],\n:host([nve-control]:focus-within) [internal-host]:has(nve-icon-button:focus) [input],\n[internal-host]:has(nve-icon-button),\n[internal-host]:has(nve-icon-button) {\n  outline: 0 !important;\n}\n\n@container style(--control-type: custom) {\n  [input] {\n    outline: 0 !important;\n  }\n}\n\n::slotted(nve-button[nve-control]),\n::slotted(nve-button[nve-control]),\n::slotted(nve-button[nve-control]),\n::slotted(nve-button[nve-control]) {\n  width: 100%;\n}\n\n[input] {\n  cursor: var(--cursor);\n  min-height: var(--control-height);\n  opacity: var(--opacity);\n  filter: var(--filter);\n  grid-area: input;\n  display: flex;\n  line-height: 1;\n}\n\n:host([nve-control='inline']) {\n  [internal-host] {\n    min-height: var(--control-height);\n  }\n\n  [input] {\n    min-height: min-content;\n  }\n}\n\nslot {\n  line-height: 1;\n  width: 100%;\n}\n\nslot[name='label'] {\n  grid-area: label;\n  display: inline-flex;\n  align-self: center;\n}\n\nslot[name='messages'] {\n  grid-area: messages;\n  display: inline-flex;\n}\n\n[name='messages']:not(:has-slotted),\n[name='label']:not(:has-slotted) {\n  display: none !important;\n}\n\n[internal-host] {\n  display: grid;\n  width: 100%;\n  gap: var(--nve-ref-space-xs);\n  grid-template-columns: 1fr 1fr 1fr;\n  grid-template-rows: auto;\n  grid-template-areas: 'input input input';\n}\n\n:host([nve-control='inline']) [internal-host] {\n  align-items: center;\n  grid-template-columns: auto 1fr 1fr;\n\n  slot[name='label'],\n  slot[name='messages'] {\n    align-items: center;\n  }\n\n  & ::slotted(label) {\n    font-weight: var(--nve-ref-font-weight-regular) !important;\n    color: var(--color) !important;\n    width: 100%;\n  }\n\n  slot[name='label'] {\n    line-height: 1;\n    width: 100%;\n  }\n}\n\n:host([layout='horizontal']) [internal-host],\n:host([layout='horizontal-inline']) [internal-host] {\n  grid-template-columns: var(--_label-width) 1fr minmax(0, var(--_label-width));\n}\n\n/** block controls */\n[internal-host] {\n  &:has([name='label']:has-slotted) {\n    grid-template-areas:\n      'label label label'\n      'input input input';\n  }\n\n  &:has([name='messages']:has-slotted) {\n    grid-template-areas:\n      'input input input'\n      'messages messages messages';\n  }\n\n  &:has([name='label']:has-slotted):has([name='messages']:has-slotted) {\n    grid-template-areas:\n      'label label label'\n      'input input input'\n      'messages messages messages';\n  }\n}\n\n:host([layout='horizontal']),\n:host([layout='horizontal-inline']) {\n  [internal-host] {\n    &:has([name='messages']:has-slotted) {\n      grid-template-areas:\n        'label input input'\n        '. messages messages';\n    }\n\n    &:not(:has([name='messages']:has-slotted)) {\n      grid-template-areas: 'label input input';\n    }\n  }\n}\n\n/** inline controls */\n:host([nve-control='inline']) {\n  [internal-host] {\n    grid-template-areas: 'input input input';\n\n    &:has([name='label']:has-slotted) {\n      grid-template-areas: 'input label label';\n    }\n\n    &:has([name='messages']:has-slotted) {\n      grid-template-areas:\n        'input input input'\n        'messages messages messages';\n    }\n\n    &:has([name='label']:has-slotted):has([name='messages']:has-slotted) {\n      grid-template-areas:\n        'input label label'\n        'messages messages messages';\n    }\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"control.js","names":[],"sources":["../../../src/forms/control/control.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  --cursor: pointer;\n  --accent-color: var(--nve-sys-accent-secondary-background);\n  --color: var(--nve-sys-interaction-field-color);\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  --control-width: 100%;\n  --control-height: var(--nve-sys-interaction-field-height);\n  --_label-width: var(--label-width, 180px);\n  --nve-sys-interaction-state-base: var(--background, var(--nve-sys-layer-canvas-background));\n  --opacity: 1;\n  --filter: none;\n  contain: content;\n}\n\n:host([nve-control='inline']) {\n  --control-height: auto;\n}\n\n::slotted(*) {\n  color-scheme: var(--nve-sys-color-scheme);\n  font-family: inherit;\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  display: inline-block !important;\n  line-height: 1em !important;\n  align-self: center !important;\n}\n\n::slotted(label::first-letter) {\n  text-transform: capitalize;\n}\n\n:host(:state(disabled)),\n:host(:state(disabled)) ::slotted(nve-control-message:not([status])) {\n  --cursor: not-allowed;\n}\n\n:host(:state(disabled)) {\n  --opacity: var(--nve-ref-opacity-500);\n}\n\n:host(:state(invalid)) ::slotted(nve-control-message:not([error], [status])) {\n  display: none;\n}\n\n:host([fit-content]) {\n  --control-width: fit-content;\n  --label-width: fit-content;\n  --width: fit-content;\n}\n\n:host([nve-control]) ::slotted(input:focus),\n:host([nve-control]) ::slotted(select:focus),\n:host([nve-control]) ::slotted(textarea:focus),\n:host([nve-control]:focus-within) [internal-host]:has(nve-icon-button:focus) [input],\n[internal-host]:has(nve-icon-button) {\n  outline: 0 !important;\n}\n\n@container style(--control-type: custom) {\n  [input] {\n    outline: 0 !important;\n  }\n}\n\n::slotted(nve-button[nve-control]) {\n  width: 100%;\n}\n\n[input] {\n  cursor: var(--cursor);\n  min-height: var(--control-height);\n  opacity: var(--opacity);\n  filter: var(--filter);\n  grid-area: input;\n  display: flex;\n  line-height: 1;\n}\n\n:host([nve-control='inline']) {\n  [internal-host] {\n    min-height: var(--control-height);\n  }\n\n  [input] {\n    min-height: min-content;\n  }\n}\n\nslot {\n  line-height: 1;\n  width: 100%;\n}\n\nslot[name='label'] {\n  grid-area: label;\n  display: inline-flex;\n  align-self: center;\n}\n\nslot[name='messages'] {\n  grid-area: messages;\n  display: inline-flex;\n}\n\n[name='messages']:not(:has-slotted),\n[name='label']:not(:has-slotted) {\n  display: none !important;\n}\n\n[internal-host] {\n  display: grid;\n  width: 100%;\n  gap: var(--nve-ref-space-xs);\n  grid-template-columns: 1fr 1fr 1fr;\n  grid-template-rows: auto;\n  grid-template-areas: 'input input input';\n}\n\n:host([nve-control='inline']) [internal-host] {\n  align-items: center;\n  grid-template-columns: auto 1fr 1fr;\n\n  slot[name='label'],\n  slot[name='messages'] {\n    align-items: center;\n  }\n\n  & ::slotted(label) {\n    font-weight: var(--nve-ref-font-weight-regular) !important;\n    color: var(--color) !important;\n    width: 100%;\n  }\n\n  slot[name='label'] {\n    line-height: 1;\n    width: 100%;\n  }\n}\n\n:host([layout='horizontal']) [internal-host],\n:host([layout='horizontal-inline']) [internal-host] {\n  grid-template-columns: var(--_label-width) 1fr minmax(0, var(--_label-width));\n}\n\n/** block controls */\n[internal-host] {\n  &:has([name='label']:has-slotted) {\n    grid-template-areas:\n      'label label label'\n      'input input input';\n  }\n\n  &:has([name='messages']:has-slotted) {\n    grid-template-areas:\n      'input input input'\n      'messages messages messages';\n  }\n\n  &:has([name='label']:has-slotted):has([name='messages']:has-slotted) {\n    grid-template-areas:\n      'label label label'\n      'input input input'\n      'messages messages messages';\n  }\n}\n\n:host([layout='horizontal']),\n:host([layout='horizontal-inline']) {\n  [internal-host] {\n    &:has([name='messages']:has-slotted) {\n      grid-template-areas:\n        'label input input'\n        '. messages messages';\n    }\n\n    &:not(:has([name='messages']:has-slotted)) {\n      grid-template-areas: 'label input input';\n    }\n  }\n}\n\n/** inline controls */\n:host([nve-control='inline']) {\n  [internal-host] {\n    grid-template-areas: 'input input input';\n\n    &:has([name='label']:has-slotted) {\n      grid-template-areas: 'input label label';\n    }\n\n    &:has([name='messages']:has-slotted) {\n      grid-template-areas:\n        'input input input'\n        'messages messages messages';\n    }\n\n    &:has([name='label']:has-slotted):has([name='messages']:has-slotted) {\n      grid-template-areas:\n        'input label label'\n        'messages messages messages';\n    }\n  }\n}\n"],"mappings":""}

package/dist/forms/control/control2.js

@@ -25,7 +25,7 @@ var C = class extends v {
 	}
 	#r;
 	get input() {
-		return !b && !this.#r && (this.#r = (this.querySelector("slot")?.assignedElements()?.find((e) => e.matches("input, select, selectmenu, textarea, [nve-control], [nve-control]")) ?? Array.from(this.shadowRoot.querySelector("slot")?.assignedElements({ flatten: !0 }) ?? []).find((e) => e.matches("input, select, selectmenu, textarea, [nve-control], [nve-control]"))) || this.querySelector(d)), this.#r;
+		return !b && !this.#r && (this.#r = (this.querySelector("slot")?.assignedElements()?.find((e) => e.matches("input, select, selectmenu, textarea, [nve-control]")) ?? Array.from(this.shadowRoot.querySelector("slot")?.assignedElements({ flatten: !0 }) ?? []).find((e) => e.matches("input, select, selectmenu, textarea, [nve-control]"))) || this.querySelector(d)), this.#r;
 	}
 	get prefixContent() {
 		return x;
@@ -40,7 +40,7 @@ var C = class extends v {
 	static {
 		this.metadata = {
 			tag: "nve-control",
-			version: "0.0.7"
+			version: "0.0.9"
 		};
 	}
 	render() {

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

@@ -1 +1 @@
-{"version":3,"file":"control2.js","names":["#i18nController","#label","#messages","#input","#onRootSlotchange","#onInputSlotchange","#onFitTextUpdate","#observers","#updateStyleStates","#setupInput","#setupFitText","#polyfillShowPicker","#updateAssociations","#getCharacterWidth","#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","#label","#messages","#input","#onRootSlotchange","#onInputSlotchange","#onFitTextUpdate","#observers","#updateStyleStates","#setupInput","#setupFitText","#polyfillShowPicker","#updateAssociations","#getCharacterWidth","#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":";;;;;;;;;;;;;;AAkDO,IAAA,IAAA,cAAsB,EAAW;;8BAYuC,sBAGM,gBAKhD,MAAA,EAAqB,wBA6CO,8BAOhC;;CAvD/B,KAAwC,IAAI,EAAqB,KAAK;CAQtE,KAAA,IAAa;AACX,SAAO,KAAK,YACR,cAA+B,uBAAqB,EACpD,iBAAiB,EAAE,SAAS,IAAM,CAAC,GAAG;;CAG5C,KAAA,IAAgB;AACd,SAAQ,KAAK,YACT,cAA+B,0BAAwB,EACvD,iBAAiB,EAAE,SAAS,IAAM,CAAC,IAAI,EAAE;;CAG/C;CAGA,IAAI,QAA0B;AAY5B,SAXI,CAAC,KAAY,CAAC,MAAA,MAQhB,MAAA,KANE,KAAK,cAAc,OAAO,EACtB,kBAAkB,EAClB,MAAK,MAAK,EAAE,QAAA,qDAAmB,CAAC,IACpC,MAAM,KAAK,KAAK,WAAY,cAAc,OAAO,EAAE,iBAAiB,EAAE,SAAS,IAAM,CAAC,IAAI,EAAE,CAAC,CAAC,MAAK,MACjG,EAAE,QAAA,qDAAmB,CACtB,KACgC,KAAK,cAAc,EAAW,GAG5D,MAAA;;CAIT,IAAc,gBAAiD;AAC7D,SAAO;;CAIT,IAAc,gBAAiD;AAC7D,SAAO;;CAQT,KAAoD,EAAE;;gBAItC,EAAU,CAAC,EAAO,CAAC;;;kBAER;GACzB,KAAK;GACL,SAAS;GACV;;CAED,SAAS;AACP,SAAO,KAAK,eAAe,WAYvB,CAAI,wMAXJ,CAAI,6GAIA,KAAK,cAAc,eAEnB,KAAK,cAAc;;CAc7B,oBAAoB;AAIlB,EAHA,MAAM,mBAAmB,EACzB,EAAgB,KAAK,EACrB,EAAoB,MAAM,EAAa,EACvC,KAAK,WAAY,iBAAiB,cAAc,MAAA,EAAuB;;CAGzE,uBAAuB;AASrB,EARA,MAAM,sBAAsB,EAC5B,KAAK,WAAY,oBAAoB,cAAc,MAAA,EAAuB,EAC1E,KAAK,WAAY,oBAAoB,cAAc,MAAA,EAAwB,EACvE,KAAK,WAAW,KAAK,UACvB,KAAK,MAAM,oBAAoB,SAAS,MAAA,EAAsB,EAC9D,KAAK,MAAM,oBAAoB,UAAU,MAAA,EAAsB,GAEjE,MAAA,EAAgB,SAAQ,MAAY,EAAS,YAAY,CAAC,EAC1D,MAAA,EAAgB,SAAS;;CAG3B,WAA0B;AAGxB,EAFA,MAAA,GAAyB,EAErB,KAAK,SAAS,MAAA,EAAgB,WAAW,MAC3C,MAAA,GAAkB,EAClB,MAAA,GAAoB;;CAKxB,QAAQ;AAGN,EAFA,KAAK,MAAM,QAAQ,KAAK,MAAM,aAAa,QAAQ,IAAI,IACvD,KAAK,eAAe,EACpB,KAAK,cAAc,IAAI,YAAY,SAAS;GAAE,SAAS;GAAM,UAAU;GAAM,CAAC,CAAC;;CAGjF,KAAc;AAYZ,EAXA,EAA6B,MAAM,MAAA,EAAe,EAElD,MAAA,EAAgB,KACd,GAAG,EAAmB,KAAK,EAC3B,GAAG,EAAyB,MAAM,MAAA,EAAe,EACjD,EAAyB,KAAK,EAC9B,EAAwB,MAAM,CAAC,UAAU,SAAS,QAAQ,MAAA,GAAyB,CAAC,CACrF,EAED,MAAA,GAA0B,EAC1B,MAAA,GAA0B,EAC1B,KAAK,WAAY,iBAAiB,cAAc,MAAA,EAAwB;;CAG1E,WAA2B;AAEzB,EADA,MAAA,GAAyB,EACzB,MAAA,GAA0B;;CAG5B,KAAgB;AACd,EAAI,KAAK,YACP,MAAA,GAAyB,EACzB,KAAK,MAAM,iBAAiB,SAAS,MAAA,EAAsB,EAC3D,KAAK,MAAM,iBAAiB,UAAU,MAAA,EAAsB;;CAIhE,WAAyB;AACvB,QAAA,GAAyB;;CAG3B,KAAqB;AACnB,MAAI,KAAK,MAAM,YAAY,SAAS;GAClC,IAAM,IAAS,KAAK,MAAM,SAAS,SAAa,IAAJ;AAE5C,GADA,KAAK,MAAM,YAAY,mBAAmB,GAAG,KAAK,MAAM,MAAM,SAAS,EAAO,IAAI,EAClF,KAAK,MAAM,MAAM,YAAY,aAAa,GAAG,KAAK,MAAM,MAAM,SAAS,EAAE,KAAK,YAAY;SACjF,KAAK,MAAM,YAAY,YAChC,KAAK,MAAM,YACT,mBACA,GAAI,KAAK,MAAuC,QAAS,KAAK,MAAuC,eAAgB,YAAa,SAAS,EAAE,IAC9I;;CAIL,KAAsB;AACpB,EAAK,KAAK,MAAM,eACd,KAAK,MAAM,mBAAmB,KAAK,MAAM,OAAO;;CAIpD,KAAqB;AACnB,EAAI,KAAK,UACP,KAAK,gBAAgB,YAAY,KAAK,OAAO,SAAS,EACtD,KAAK,OAAO,aAAa,OAAO,GAAG,KAAK,aAAa,QAAQ,GAAG,GAAG,KAAK,gBAAgB,OAAO;;CAInG,KAAsB;AAKpB,EAJA,MAAA,GAAmB,EACnB,EAAe,MAAA,GAAa,KAAK,MAAM,EACvC,EAAyB,MAAM,KAAK,MAAA,EAAe,EAAE,KAAK,MAAM,EAE5D,KAAK,sBACP,EAAkB,KAAK,cAAmC,WAAW,EAAG,KAAK,MAAM;;CAIvF,KAAe;EACb,IAAM,IACJ,KAAK,cAAc,QAAQ,IAC1B,KAAK,WAAY,cAAc,OAAO,CACpC,cAAc,EAAE,SAAS,IAAM,CAAC,CAChC,MAAM,MAAa,EAAkB,YAAY,QAAQ;AAC9D,EAAI,MACF,EAAM,OAAO;;CAIjB,aAAuB;AACrB,MAAI;AACF,QAAK,MAAM,YAAY;UACjB;;;GA1NT,EAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,EAAA,EAAA,WAAA,UAAA,KAAA,EAAA,KAG1B,EAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,CAAC,CAAA,EAAA,EAAA,WAAA,UAAA,KAAA,EAAA,KAOzC,EAAS;CAAE,MAAM;CAAS,SAAS;CAAM,WAAW;CAAY,CAAC,CAAA,EAAA,EAAA,WAAA,WAAA,KAAA,EAAA,KAGjE,EAAS;CAAE,MAAM;CAAS,SAAS;CAAM,WAAW;CAAe,CAAC,CAAA,EAAA,EAAA,WAAA,cAAA,KAAA,EAAA,KAKpE,EAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,EAAA,EAAA,WAAA,QAAA,KAAA,EAAA,KAG1B,EAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,CAAC,CAAA,EAAA,EAAA,WAAA,cAAA,KAAA,EAAA,KA0CzC,EAAS,EAAE,WAAW,eAAe,CAAC,CAAA,EAAA,EAAA,WAAA,cAAA,KAAA,EAAA,SAlExC,GAAS,CAAA,EAAA,EAAA"}

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: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  width: fit-content;\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: 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  width: fit-content;\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,64 +1,63 @@
-import { tagSelector as e } from "../../internal/utils/dom.js";
-import { associateAriaDescribedBy as t, associateAriaLabel as n, associateControlGroup as r, attachInternals as i } from "../../internal/utils/a11y.js";
-import { __decorate as a } from "../../_virtual/_@oxc-project_runtime@0.123.0/helpers/decorate.js";
-import { useStyles as o } from "../../internal/styles/index.js";
-import { inputQuery as s, setupControlGroupStates as c, setupControlStatusStates as l } from "../utils/states.js";
-import { setupControlLayoutStates as u } from "../utils/layout.js";
-import d from "./control-group.js";
-import { LitElement as f, html as p } from "lit";
-import { property as m } from "lit/decorators/property.js";
+import { associateAriaDescribedBy as e, associateAriaLabel as t, associateControlGroup as n, attachInternals as r } from "../../internal/utils/a11y.js";
+import { __decorate as i } from "../../_virtual/_@oxc-project_runtime@0.123.0/helpers/decorate.js";
+import { useStyles as a } from "../../internal/styles/index.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";
+import { LitElement as d, html as f } from "lit";
+import { property as p } from "lit/decorators/property.js";
 //#region src/forms/control-group/control-group.ts
-var h = class extends f {
+var m = class extends d {
 	get label() {
 		return this.querySelector?.("label");
 	}
 	get inputs() {
-		return this.querySelectorAll ? Array.from(this.querySelectorAll(s)) : [];
+		return this.querySelectorAll ? Array.from(this.querySelectorAll(o)) : [];
 	}
 	get #e() {
-		return this.querySelectorAll ? Array.from(this.querySelectorAll(e("nve-control-message"))) : [];
+		return this.querySelectorAll ? Array.from(this.querySelectorAll("nve-control-message")) : [];
 	}
 	#t = [];
 	static {
-		this.styles = o([d]);
+		this.styles = a([u]);
 	}
 	static {
 		this.metadata = {
 			tag: "nve-control-group",
-			version: "0.0.7"
+			version: "0.0.9"
 		};
 	}
 	render() {
-		return p`<div internal-host class="${this.#e.length ? "" : "no-messages"} ${this.label ? "" : "no-label"}"><slot name="label"></slot><slot class="input-slot"></slot><slot name="messages"></slot></div>`;
+		return f`<div internal-host class="${this.#e.length ? "" : "no-messages"} ${this.label ? "" : "no-label"}"><slot name="label"></slot><slot class="input-slot"></slot><slot name="messages"></slot></div>`;
 	}
 	connectedCallback() {
-		super.connectedCallback(), i(this), this._internals.role = "group";
+		super.connectedCallback(), r(this), this._internals.role = "group";
 	}
 	firstUpdated(e) {
 		super.firstUpdated(e), this.#t = [
-			c(this),
-			u(this),
-			...l(this, this.#e)
+			s(this),
+			l(this),
+			...c(this, this.#e)
 		], this.#n(), this.shadowRoot.addEventListener("slotchange", () => this.#n());
 	}
 	disconnectedCallback() {
 		super.disconnectedCallback(), this.#t.forEach((e) => e.disconnect());
 	}
 	#n() {
-		this.#r(), n(this.label, this), t(Array.from(this.querySelectorAll(e("nve-control-message"))), this), r(Array.from(this.inputs));
+		this.#r(), t(this.label, this), e(Array.from(this.querySelectorAll("nve-control-message")), this), n(Array.from(this.inputs));
 	}
 	#r() {
 		this.label && (this.label.slot = "label");
 	}
 };
-a([m({
+i([p({
 	type: String,
 	reflect: !0
-})], h.prototype, "layout", void 0), a([m({
+})], m.prototype, "layout", void 0), i([p({
 	type: String,
 	reflect: !0
-})], h.prototype, "prominence", void 0);
+})], m.prototype, "prominence", void 0);
 //#endregion
-export { h as ControlGroup };
+export { m as ControlGroup };
 
 //# sourceMappingURL=control-group2.js.map

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  tagSelector\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\n      ? Array.from(this.querySelectorAll<ControlMessage>(tagSelector('nve-control-message')))\n      : [];\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(\n      Array.from(this.querySelectorAll<ControlMessage>(tagSelector('nve-control-message'))),\n      this\n    );\n    associateControlGroup(Array.from(this.inputs));\n  }\n\n  #assignLabel() {\n    if (this.label) {\n      this.label.slot = 'label';\n    }\n  }\n}\n"],"mappings":";;;;;;;;;;AAiCA,IAAa,IAAb,cAAkC,EAAW;CAW3C,IAAI,QAAQ;AACV,SAAO,KAAK,gBAAkC,QAAQ;;CAGxD,IAAI,SAAS;AACX,SAAO,KAAK,mBAAmB,MAAM,KAAK,KAAK,iBAAmC,EAAW,CAAC,GAAG,EAAE;;CAGrG,KAAA,IAAgB;AACd,SAAO,KAAK,mBACR,MAAM,KAAK,KAAK,iBAAiC,EAAY,sBAAsB,CAAC,CAAC,GACrF,EAAE;;CAGR,KAAoD,EAAE;;gBAEtC,EAAU,CAAC,EAAO,CAAC;;;kBAER;GACzB,KAAK;GACL,SAAS;GACV;;CAKD,SAAS;AACP,SAAO,CAAI,6BACmB,MAAA,EAAe,SAAS,KAAK,cAAc,GAAG,KAAK,QAAQ,KAAK,WAAW;;CAQ3G,oBAAoB;AAGlB,EAFA,MAAM,mBAAmB,EACzB,EAAgB,KAAK,EACrB,KAAK,WAAW,OAAO;;CAGzB,aAAa,GAA6B;AAQxC,EAPA,MAAM,aAAa,EAAM,EACzB,MAAA,IAAkB;GAChB,EAAwB,KAAK;GAC7B,EAAyB,KAAK;GAC9B,GAAG,EAAyB,MAAM,MAAA,EAAKA;GACxC,EACD,MAAA,GAA0B,EAC1B,KAAK,WAAY,iBAAiB,oBAAoB,MAAA,GAA0B,CAAC;;CAGnF,uBAAuB;AAErB,EADA,MAAM,sBAAsB,EAC5B,MAAA,EAAgB,SAAQ,MAAY,EAAS,YAAY,CAAC;;CAG5D,KAAsB;AAOpB,EANA,MAAA,GAAmB,EACnB,EAAmB,KAAK,OAAsB,KAAK,EACnD,EACE,MAAM,KAAK,KAAK,iBAAiC,EAAY,sBAAsB,CAAC,CAAC,EACrF,KACD,EACD,EAAsB,MAAM,KAAK,KAAK,OAAO,CAAC;;CAGhD,KAAe;AACb,EAAI,KAAK,UACP,KAAK,MAAM,OAAO;;;GA/ErB,EAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,CAAC,CAAA,EAAA,EAAA,WAAA,UAAA,KAAA,EAAA,KAOzC,EAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,CAAC,CAAA,EAAA,EAAA,WAAA,cAAA,KAAA,EAAA"}
+{"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;AACV,SAAO,KAAK,gBAAkC,QAAQ;;CAGxD,IAAI,SAAS;AACX,SAAO,KAAK,mBAAmB,MAAM,KAAK,KAAK,iBAAmC,EAAW,CAAC,GAAG,EAAE;;CAGrG,KAAA,IAAgB;AACd,SAAO,KAAK,mBAAmB,MAAM,KAAK,KAAK,iBAAiC,sBAAsB,CAAC,GAAG,EAAE;;CAG9G,KAAoD,EAAE;;gBAEtC,EAAU,CAAC,EAAO,CAAC;;;kBAER;GACzB,KAAK;GACL,SAAS;GACV;;CAKD,SAAS;AACP,SAAO,CAAI,6BACmB,MAAA,EAAe,SAAS,KAAK,cAAc,GAAG,KAAK,QAAQ,KAAK,WAAW;;CAQ3G,oBAAoB;AAGlB,EAFA,MAAM,mBAAmB,EACzB,EAAgB,KAAK,EACrB,KAAK,WAAW,OAAO;;CAGzB,aAAa,GAA6B;AAQxC,EAPA,MAAM,aAAa,EAAM,EACzB,MAAA,IAAkB;GAChB,EAAwB,KAAK;GAC7B,EAAyB,KAAK;GAC9B,GAAG,EAAyB,MAAM,MAAA,EAAKA;GACxC,EACD,MAAA,GAA0B,EAC1B,KAAK,WAAY,iBAAiB,oBAAoB,MAAA,GAA0B,CAAC;;CAGnF,uBAAuB;AAErB,EADA,MAAM,sBAAsB,EAC5B,MAAA,EAAgB,SAAQ,MAAY,EAAS,YAAY,CAAC;;CAG5D,KAAsB;AAIpB,EAHA,MAAA,GAAmB,EACnB,EAAmB,KAAK,OAAsB,KAAK,EACnD,EAAyB,MAAM,KAAK,KAAK,iBAAiC,sBAAsB,CAAC,EAAE,KAAK,EACxG,EAAsB,MAAM,KAAK,KAAK,OAAO,CAAC;;CAGhD,KAAe;AACb,EAAI,KAAK,UACP,KAAK,MAAM,OAAO;;;GA1ErB,EAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,CAAC,CAAA,EAAA,EAAA,WAAA,UAAA,KAAA,EAAA,KAOzC,EAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,CAAC,CAAA,EAAA,EAAA,WAAA,cAAA,KAAA,EAAA"}

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

@@ -23,7 +23,7 @@ var l = {
 	static {
 		this.metadata = {
 			tag: "nve-control-message",
-			version: "0.0.7"
+			version: "0.0.9"
 		};
 	}
 	static {

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

@@ -1,7 +1,7 @@
 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], [nve-control]";
+export declare const inputQuery = "input, select, selectmenu, textarea, [nve-control]";
 /**
  * Adds validation states to custom element
  * :state(valid) form control is in a valid state

package/dist/forms/utils/states.js

@@ -1,29 +1,29 @@
-import { getAttributeChanges as e, getAttributeListChanges as t, getElementUpdate as n, matchesElementName as r, tagSelector as i } from "../../internal/utils/dom.js";
-import { ControlMessage as a } from "../control-message/control-message2.js";
+import { getAttributeChanges as e, getAttributeListChanges as t, getElementUpdate as n, matchesElementName as r } from "../../internal/utils/dom.js";
+import { ControlMessage as i } from "../control-message/control-message2.js";
 //#region src/forms/utils/states.ts
-var o = "input, select, selectmenu, textarea, [nve-control], [nve-control]";
-function s(e, t) {
+var a = "input, select, selectmenu, textarea, [nve-control]";
+function o(e, t) {
 	if (!e.input.form?.noValidate && !e.input.formNoValidate && !e.input.hasAttribute("formnovalidate")) {
-		p(t);
+		f(t);
 		let n = () => {
-			e.input.validity?.valid && (e._internals.states.delete("invalid"), e._internals.states.add("valid"), e.status = null), h(e, t);
+			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"), p(t);
+			e.status = null, e._internals.states.delete("valid"), e._internals.states.delete("invalid"), f(t);
 		};
 		e.input.addEventListener("blur", () => {
 			e.input.checkValidity(), n();
 		}), e.input.addEventListener("input", () => {
 			n();
 		}), e.input.addEventListener("invalid", () => {
-			t.find((e) => e.error) && (p(t), m(e, t)), e.status = "error", e._internals.states.delete("valid"), e._internals.states.add("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());
 	}
 	e.shadowRoot.addEventListener("slotchange", () => {
-		let t = Array.from(e.querySelectorAll(i(a.metadata.tag)));
+		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");
 	});
 }
-function c(e) {
+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", () => {
 		e._internals.states.add("touched"), e._internals.states.delete("focus");
@@ -33,36 +33,36 @@ function c(e) {
 		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;
 }
-function l(t) {
-	return u(t), e(t, "disabled", () => u(t));
+function c(t) {
+	return l(t), e(t, "disabled", () => l(t));
 }
-function u(e) {
+function l(e) {
 	Array.from(e.inputs).find((e) => e.disabled) ? e._internals.states.add("disabled") : e._internals.states.delete("disabled");
 }
-function d(e, n) {
-	f(e, n.find((e) => !e.hidden));
-	let o = [];
-	return o.push(t(e, ["hidden", "status"], (t) => {
+function u(e, n) {
+	d(e, n.find((e) => !e.hidden));
+	let a = [];
+	return a.push(t(e, ["hidden", "status"], (t) => {
 		let n = t.target;
-		r(n, a) && f(e, n);
+		r(n, i) && d(e, n);
 	})), e.shadowRoot.addEventListener("slotchange", () => {
-		let t = Array.from(e.querySelectorAll(i(a.metadata.tag))).find((e) => e.status && !e.hidden);
+		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);
-	}), o;
+	}), a;
 }
-function f(e, t) {
+function d(e, t) {
 	e._internals.states.delete("error"), e._internals.states.delete("success"), t?.status?.length && !t?.hidden && e._internals.states.add(t.status);
 }
-function p(e) {
+function f(e) {
 	e.filter((e) => e.hasAttribute("error")).forEach((e) => e.setAttribute("hidden", ""));
 }
-function m(e, t) {
+function p(e, t) {
 	t.find((t) => t.error && e.input.validity[t.error])?.removeAttribute("hidden");
 }
-function h(e, t) {
+function m(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 { o as inputQuery, l as setupControlGroupStates, c as setupControlStates, d as setupControlStatusStates, s as setupControlValidationStates };
+export { a as inputQuery, c as setupControlGroupStates, s as setupControlStates, u 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  tagSelector\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], [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 */\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 messages = Array.from(control.querySelectorAll<ControlMessage>(tagSelector(ControlMessage.metadata.tag)));\n    control._internals.states.delete('valid');\n    control._internals.states.delete('invalid');\n    if (messages.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\nexport function 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 messages = Array.from(control.querySelectorAll<ControlMessage>(tagSelector(ControlMessage.metadata.tag)));\n    const message = messages.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]';\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\nexport function 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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"}

package/dist/grid/cell/cell2.js

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

package/dist/grid/column/column.js.map

@@ -1 +1 @@
-{"version":3,"file":"column.js","names":[],"sources":["../../../src/grid/column/column.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  --nve-sys-interaction-background: var(--nve-sys-interaction-background-200);\n  --nve-sys-interaction-field-background: var(--nve-sys-interaction-background-200);\n  --color: var(--nve-sys-text-muted-color);\n  --padding: var(--nve-ref-size-200) var(--nve-ref-size-500);\n  --font-weight: var(--nve-ref-font-weight-semibold);\n  --font-size: var(--nve-ref-font-size-100);\n  --height: var(--nve-ref-size-1000);\n  --min-width: var(--nve-ref-size-1000);\n  --justify-content: start;\n  --border-left: 0;\n  --border-right: 0;\n  transition: box-shadow 300ms ease-in-out;\n}\n\n[internal-host] {\n  background: var(--background);\n  color: var(--color);\n  padding: var(--padding);\n  height: var(--height);\n  font-size: var(--font-size);\n  font-weight: var(--font-weight);\n  min-width: var(--min-width);\n  border-left: var(--border-left);\n  border-right: var(--border-right);\n  justify-content: var(--justify-content);\n  display: flex;\n  align-items: center;\n  outline-offset: -5px;\n  white-space: nowrap;\n}\n\n:host([width='max-content']) {\n  --padding: var(--nve-ref-size-300);\n}\n\n::slotted(nve-sort-button),\n::slotted(nve-icon-button),\n::slotted(nve-sort-button),\n::slotted(nve-icon-button) {\n  margin-inline-start: auto;\n}\n\n@media (hover: hover) {\n  ::slotted(nve-sort-button),\n  ::slotted(nve-sort-button) {\n    opacity: 0;\n  }\n\n  ::slotted(nve-sort-button[sort='ascending']),\n  ::slotted(nve-sort-button[sort='descending']),\n  ::slotted(nve-sort-button[sort='ascending']),\n  ::slotted(nve-sort-button[sort='descending']),\n  :host(:focus-within) ::slotted(nve-sort-button),\n  :host(:hover) ::slotted(nve-sort-button),\n  :host(:focus-within) ::slotted(nve-sort-button),\n  :host(:hover) ::slotted(nve-sort-button) {\n    opacity: 1;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"column.js","names":[],"sources":["../../../src/grid/column/column.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  --nve-sys-interaction-background: var(--nve-sys-interaction-background-200);\n  --nve-sys-interaction-field-background: var(--nve-sys-interaction-background-200);\n  --color: var(--nve-sys-text-muted-color);\n  --padding: var(--nve-ref-size-200) var(--nve-ref-size-500);\n  --font-weight: var(--nve-ref-font-weight-semibold);\n  --font-size: var(--nve-ref-font-size-100);\n  --height: var(--nve-ref-size-1000);\n  --min-width: var(--nve-ref-size-1000);\n  --justify-content: start;\n  --border-left: 0;\n  --border-right: 0;\n  transition: box-shadow 300ms ease-in-out;\n}\n\n[internal-host] {\n  background: var(--background);\n  color: var(--color);\n  padding: var(--padding);\n  height: var(--height);\n  font-size: var(--font-size);\n  font-weight: var(--font-weight);\n  min-width: var(--min-width);\n  border-left: var(--border-left);\n  border-right: var(--border-right);\n  justify-content: var(--justify-content);\n  display: flex;\n  align-items: center;\n  outline-offset: -5px;\n  white-space: nowrap;\n}\n\n:host([width='max-content']) {\n  --padding: var(--nve-ref-size-300);\n}\n\n::slotted(nve-sort-button),\n::slotted(nve-icon-button) {\n  margin-inline-start: auto;\n}\n\n@media (hover: hover) {\n  ::slotted(nve-sort-button) {\n    opacity: 0;\n  }\n\n  ::slotted(nve-sort-button[sort='ascending']),\n  ::slotted(nve-sort-button[sort='descending']),\n  :host(:focus-within) ::slotted(nve-sort-button),\n  :host(:hover) ::slotted(nve-sort-button) {\n    opacity: 1;\n  }\n}\n"],"mappings":""}

package/dist/grid/column/column2.js

@@ -1,29 +1,29 @@
-import { appendRootNodeStyle as e, tagSelector as t } from "../../internal/utils/dom.js";
-import { attachInternals as n } from "../../internal/utils/a11y.js";
-import { __decorate as r } from "../../_virtual/_@oxc-project_runtime@0.123.0/helpers/decorate.js";
-import { useStyles as i } from "../../internal/styles/index.js";
-import a from "./column.js";
-import { LitElement as o, html as s } from "lit";
-import { property as c } from "lit/decorators/property.js";
+import { appendRootNodeStyle as e } from "../../internal/utils/dom.js";
+import { attachInternals as t } from "../../internal/utils/a11y.js";
+import { __decorate as n } from "../../_virtual/_@oxc-project_runtime@0.123.0/helpers/decorate.js";
+import { useStyles as r } from "../../internal/styles/index.js";
+import i from "./column.js";
+import { LitElement as a, html as o } from "lit";
+import { property as s } from "lit/decorators/property.js";
 //#region src/grid/column/column.ts
-var l = class r extends o {
+var c = class n extends a {
 	static {
-		this.styles = i([a]);
+		this.styles = r([i]);
 	}
 	static {
 		this.metadata = {
 			tag: "nve-grid-column",
-			version: "0.0.7"
+			version: "0.0.9"
 		};
 	}
 	get #e() {
 		return this.parentElement.parentElement;
 	}
 	render() {
-		return s`<div internal-host focusable="active"><slot></slot><slot name="actions"></slot></div>`;
+		return o`<div internal-host focusable="active"><slot></slot><slot name="actions"></slot></div>`;
 	}
 	connectedCallback() {
-		super.connectedCallback(), n(this), this._internals.role = "columnheader", this.addEventListener("sort", this.#t);
+		super.connectedCallback(), t(this), this._internals.role = "columnheader", this.addEventListener("sort", this.#t);
 	}
 	disconnectedCallback() {
 		super.disconnectedCallback(), this.removeEventListener("sort", this.#t);
@@ -50,18 +50,18 @@ var l = class r extends o {
 		this.#n ? this.#n.replaceSync(i) : this.#n = e(this.#e, i), this.setAttribute(t, "");
 	}
 	#i() {
-		let e = Array.from(this.parentElement.querySelectorAll(t(r.metadata.tag))), n = e.slice(e.indexOf(this) + 1, e.length), i = this.getBoundingClientRect(), a = this.#e.getBoundingClientRect(), o = this.offsetLeft < a.width / 2 ? "left" : "right", s = i.left - a.left, c = n.reduce((e, t) => e + t.getBoundingClientRect().width, 0), l = `[id='${this.#e.id}'] nve-grid-column:nth-of-type(${this.ariaColIndex}),
+		let e = Array.from(this.parentElement.querySelectorAll(n.metadata.tag)), t = e.slice(e.indexOf(this) + 1, e.length), r = this.getBoundingClientRect(), i = this.#e.getBoundingClientRect(), a = this.offsetLeft < i.width / 2 ? "left" : "right", o = r.left - i.left, s = t.reduce((e, t) => e + t.getBoundingClientRect().width, 0), c = `[id='${this.#e.id}'] nve-grid-column:nth-of-type(${this.ariaColIndex}),
         [id='${this.#e.id}'] nve-grid-cell:nth-of-type(${this.ariaColIndex})`;
 		return {
-			side: o,
+			side: a,
 			positionStyle: `
-        ${l} {
+        ${c} {
           position: sticky;
           z-index: 99;
-          ${o === "left" ? `left: ${s}px;` : `right: ${c}px;`}
+          ${a === "left" ? `left: ${o}px;` : `right: ${s}px;`}
         }
       `,
-			borderStyle: this.#a(l, o)
+			borderStyle: this.#a(c, a)
 		};
 	}
 	#a(e, t) {
@@ -81,22 +81,22 @@ var l = class r extends o {
         }`);
 	}
 };
-r([c({
+n([s({
 	type: String,
 	reflect: !0
-})], l.prototype, "width", void 0), r([c({
+})], c.prototype, "width", void 0), n([s({
 	type: String,
 	reflect: !0
-})], l.prototype, "position", void 0), r([c({
+})], c.prototype, "position", void 0), n([s({
 	type: String,
 	reflect: !0,
 	attribute: "column-align"
-})], l.prototype, "columnAlign", void 0), r([c({
+})], c.prototype, "columnAlign", void 0), n([s({
 	type: String,
 	reflect: !0,
 	attribute: "aria-colindex"
-})], l.prototype, "ariaColIndex", void 0);
+})], c.prototype, "ariaColIndex", void 0);
 //#endregion
-export { l as GridColumn };
+export { c as GridColumn };
 
 //# sourceMappingURL=column2.js.map