@nvidia-elements/core 0.0.6 → 0.0.8

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

@@ -1 +1 @@
-{"version":3,"file":"control2.js","names":["#i18nController","#label","#messages","#input","#updateStyleStates","#observers","#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 visaul 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\n    this.shadowRoot!.addEventListener('slotchange', () => {\n      this.#updateStyleStates();\n\n      if (this.input && this.#observers.length === 0) {\n        this.#setupInput();\n        this.#setupFitText();\n      }\n    });\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.#observers.forEach(observer => observer.disconnect());\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', () => {\n      this.#updateStyleStates();\n      this.#updateAssociations();\n    });\n  }\n\n  #setupFitText() {\n    if (this.fitText) {\n      this.#getCharacterWidth();\n      this.input.addEventListener('input', () => this.#getCharacterWidth());\n      this.input.addEventListener('change', () => this.#getCharacterWidth());\n    }\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":"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"}

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.6"
+			version: "0.0.8"
 		};
 	}
 	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.6"
+			version: "0.0.8"
 		};
 	}
 	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 */\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>(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>(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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"}

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.6"
+			version: "0.0.8"
 		};
 	}
 	render() {

package/dist/grid/column/column.d.ts

@@ -48,6 +48,7 @@ export declare class GridColumn extends LitElement {
     _internals: ElementInternals;
     render(): import('lit-html').TemplateResult<1>;
     connectedCallback(): void;
+    disconnectedCallback(): void;
     willUpdate(props: PropertyValues<this>): void;
     updated(props: PropertyValues<this>): Promise<void>;
 }

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,64 +1,70 @@
-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.6"
+			version: "0.0.8"
 		};
 	}
 	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", ((e) => this.ariaSort = e.detail.next));
+		super.connectedCallback(), t(this), this._internals.role = "columnheader", this.addEventListener("sort", this.#t);
 	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this.removeEventListener("sort", this.#t);
+	}
+	#t = (e) => {
+		this.ariaSort = e.detail.next;
+	};
 	willUpdate(e) {
 		e.has("width") && this.width && Number.isFinite(Number(this.width)) && (this.width = `${this.width}px`);
 	}
 	async updated(e) {
-		super.updated(e), e.get("columnAlign") !== this.columnAlign && this.#a(), e.get("position") !== this.position && this.#n(), e.get("ariaColIndex") !== this.ariaColIndex && (this.#n(), this.#a()), e.get("width") !== this.width && this.dispatchEvent(new CustomEvent("nve-grid-column-resize", {
+		super.updated(e), e.get("columnAlign") !== this.columnAlign && this.#o(), e.get("position") !== this.position && this.#r(), e.get("ariaColIndex") !== this.ariaColIndex && (this.#r(), this.#o()), e.get("width") !== this.width && this.dispatchEvent(new CustomEvent("nve-grid-column-resize", {
 			bubbles: !0,
 			composed: !0
 		}));
 	}
-	#t;
-	#n() {
+	#n;
+	#r() {
 		if (this.position !== "fixed") {
-			this.removeAttribute("left"), this.removeAttribute("right"), this.#t?.replaceSync("");
+			this.removeAttribute("left"), this.removeAttribute("right"), this.#n?.replaceSync("");
 			return;
 		}
-		let { side: t, positionStyle: n, borderStyle: r } = this.#r(), i = `${n}\n${r}`;
-		this.#t ? this.#t.replaceSync(i) : this.#t = e(this.#e, i), this.setAttribute(t, "");
+		let { side: t, positionStyle: n, borderStyle: r } = this.#i(), i = `${n}\n${r}`;
+		this.#n ? this.#n.replaceSync(i) : this.#n = e(this.#e, i), this.setAttribute(t, "");
 	}
-	#r() {
-		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}),
+	#i() {
+		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.#i(l, o)
+			borderStyle: this.#a(c, a)
 		};
 	}
-	#i(e, t) {
+	#a(e, t) {
 		let n = t === "left" && this.nextElementSibling?.position !== this.position, r = t === "right" && this.previousElementSibling?.position !== this.position;
 		return !n && !r ? "" : `
         ${e} {
@@ -68,29 +74,29 @@ var l = class r extends o {
         }
       `;
 	}
-	#a() {
+	#o() {
 		this.columnAlign !== void 0 && e(this.#e, `[id='${this.#e.id}'] nve-grid-column:nth-of-type(${this.ariaColIndex}),
         [id='${this.#e.id}'] nve-grid-cell:nth-of-type(${this.ariaColIndex}) {
           --justify-content: ${this.columnAlign}
         }`);
 	}
 };
-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

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

@@ -1 +1 @@
-{"version":3,"file":"column2.js","names":["#grid","#computeColumnAlignment","#computeColumnPositions","#positionStylesheet","#buildFixedStyles","#buildBorderStyle"],"sources":["../../../src/grid/column/column.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 { useStyles, attachInternals, appendRootNodeStyle, tagSelector } from '@nvidia-elements/core/internal';\nimport type { Grid } from '@nvidia-elements/core/grid';\nimport styles from './column.css?inline';\n\n/**\n * @element nve-grid-column\n * @description Defines a column header within a grid, specifying the column's label, width, and alignment for all cells beneath it.\n * @since 0.11.0\n * @entrypoint \\@nvidia-elements/core/grid\n * @slot - default slot for content\n * @slot actions - slot for column actions\n * @cssprop --color\n * @cssprop --padding\n * @cssprop --font-weight\n * @cssprop --font-size\n * @cssprop --height\n * @cssprop --min-width\n * @cssprop --justify-content\n * @cssprop --border-left\n * @cssprop --border-right\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/grid/\n */\nexport class GridColumn extends LitElement {\n  /**\n   * Only set a fixed px width when you know the grid width. Most cases this should remain unset.\n   * If the total width of all columns is less than the grid width then the last column fills the remaining space.\n   * By default column widths are evenly divided unless width is explicitly provided.\n   */\n  @property({ type: String, reflect: true }) width: string;\n\n  /**\n   * Set the `position` property or attribute to `fixed` or `sticky` to make the column fixed or sticky.\n   * Fixed columns do not scroll horizontally with the grid. Sticky columns scroll horizontally with the grid\n   * until the column reaches the edge of the grid.\n   */\n  @property({ type: String, reflect: true }) position: 'fixed' | 'sticky' | '';\n\n  /**\n   * Control the content alignment within a given column.\n   */\n  @property({ type: String, reflect: true, attribute: 'column-align' }) columnAlign: 'start' | 'center' | 'end';\n\n  /**\n   * @private\n   */\n  @property({ type: String, reflect: true, attribute: 'aria-colindex' }) ariaColIndex: string; // eslint-disable-line local/reserved-property-names\n\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-grid-column',\n    version: '0.0.0'\n  };\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  get #grid() {\n    return this.parentElement!.parentElement as Grid;\n  }\n\n  render() {\n    return html`\n      <div internal-host focusable=\"active\">\n        <slot></slot>\n        <slot name=\"actions\"></slot>\n      </div>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    this._internals.role = 'columnheader';\n    this.addEventListener('sort', ((e: CustomEvent) => (this.ariaSort = e.detail.next)) as EventListener);\n  }\n\n  willUpdate(props: PropertyValues<this>) {\n    if (props.has('width') && this.width && Number.isFinite(Number(this.width))) {\n      this.width = `${this.width}px`; // eslint-disable-line local/stateless-property\n    }\n  }\n\n  async updated(props: PropertyValues<this>) {\n    super.updated(props);\n\n    if (props.get('columnAlign') !== this.columnAlign) {\n      this.#computeColumnAlignment();\n    }\n\n    if (props.get('position') !== this.position) {\n      this.#computeColumnPositions();\n    }\n\n    if (props.get('ariaColIndex') !== this.ariaColIndex) {\n      this.#computeColumnPositions();\n      this.#computeColumnAlignment();\n    }\n\n    if (props.get('width') !== this.width) {\n      this.dispatchEvent(new CustomEvent('nve-grid-column-resize', { bubbles: true, composed: true }));\n    }\n  }\n\n  #positionStylesheet: CSSStyleSheet;\n\n  #computeColumnPositions() {\n    if (this.position !== 'fixed') {\n      this.removeAttribute('left');\n      this.removeAttribute('right');\n      this.#positionStylesheet?.replaceSync('');\n      return;\n    }\n\n    const { side, positionStyle, borderStyle } = this.#buildFixedStyles();\n    const combinedStyle = `${positionStyle}\\n${borderStyle}`;\n\n    if (this.#positionStylesheet) {\n      this.#positionStylesheet.replaceSync(combinedStyle);\n    } else {\n      this.#positionStylesheet = appendRootNodeStyle(this.#grid, combinedStyle);\n    }\n\n    this.setAttribute(side, '');\n  }\n\n  #buildFixedStyles() {\n    const columns = Array.from(this.parentElement!.querySelectorAll<GridColumn>(tagSelector(GridColumn.metadata.tag)));\n    const rightColumns = columns.slice(columns.indexOf(this) + 1, columns.length);\n    const position = this.getBoundingClientRect();\n    const gridPosition = this.#grid.getBoundingClientRect();\n    const side = this.offsetLeft < gridPosition.width / 2 ? 'left' : 'right';\n    const leftStyle = position.left - gridPosition.left;\n    const rightStyle = rightColumns.reduce((width, c) => width + c.getBoundingClientRect().width, 0);\n    const selector = `[id='${this.#grid.id}'] nve-grid-column:nth-of-type(${this.ariaColIndex}),\n        [id='${this.#grid.id}'] nve-grid-cell:nth-of-type(${this.ariaColIndex})`;\n\n    const positionStyle = `\n        ${selector} {\n          position: sticky;\n          z-index: 99;\n          ${side === 'left' ? `left: ${leftStyle}px;` : `right: ${rightStyle}px;`}\n        }\n      `;\n\n    const borderStyle = this.#buildBorderStyle(selector, side);\n    return { side, positionStyle, borderStyle };\n  }\n\n  #buildBorderStyle(selector: string, side: 'left' | 'right') {\n    const isLastLeft = side === 'left' && (this.nextElementSibling as GridColumn)?.position !== this.position;\n    const isLastRight = side === 'right' && (this.previousElementSibling as GridColumn)?.position !== this.position;\n\n    if (!isLastLeft && !isLastRight) {\n      return '';\n    }\n\n    return `\n        ${selector} {\n          box-shadow: var(--scroll-shadow);\n          clip-path: inset(0px ${isLastLeft ? '-4px' : '0'} 0px ${isLastRight ? '-4px' : '0'});\n          --border-${side === 'right' ? 'left' : 'right'}: var(--nve-ref-border-width-sm) solid var(--nve-ref-border-color-muted);\n        }\n      `;\n  }\n\n  #computeColumnAlignment() {\n    if (this.columnAlign !== undefined) {\n      appendRootNodeStyle(\n        this.#grid,\n        `[id='${this.#grid.id}'] nve-grid-column:nth-of-type(${this.ariaColIndex}),\n        [id='${this.#grid.id}'] nve-grid-cell:nth-of-type(${this.ariaColIndex}) {\n          --justify-content: ${this.columnAlign}\n        }`\n      );\n    }\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"column2.js","names":["#grid","#onSort","#computeColumnAlignment","#computeColumnPositions","#positionStylesheet","#buildFixedStyles","#buildBorderStyle"],"sources":["../../../src/grid/column/column.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 { useStyles, attachInternals, appendRootNodeStyle } from '@nvidia-elements/core/internal';\nimport type { Grid } from '@nvidia-elements/core/grid';\nimport styles from './column.css?inline';\n\n/**\n * @element nve-grid-column\n * @description Defines a column header within a grid, specifying the column's label, width, and alignment for all cells beneath it.\n * @since 0.11.0\n * @entrypoint \\@nvidia-elements/core/grid\n * @slot - default slot for content\n * @slot actions - slot for column actions\n * @cssprop --color\n * @cssprop --padding\n * @cssprop --font-weight\n * @cssprop --font-size\n * @cssprop --height\n * @cssprop --min-width\n * @cssprop --justify-content\n * @cssprop --border-left\n * @cssprop --border-right\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/grid/\n */\nexport class GridColumn extends LitElement {\n  /**\n   * Only set a fixed px width when you know the grid width. Most cases this should remain unset.\n   * If the total width of all columns is less than the grid width then the last column fills the remaining space.\n   * By default column widths are evenly divided unless width is explicitly provided.\n   */\n  @property({ type: String, reflect: true }) width: string;\n\n  /**\n   * Set the `position` property or attribute to `fixed` or `sticky` to make the column fixed or sticky.\n   * Fixed columns do not scroll horizontally with the grid. Sticky columns scroll horizontally with the grid\n   * until the column reaches the edge of the grid.\n   */\n  @property({ type: String, reflect: true }) position: 'fixed' | 'sticky' | '';\n\n  /**\n   * Control the content alignment within a given column.\n   */\n  @property({ type: String, reflect: true, attribute: 'column-align' }) columnAlign: 'start' | 'center' | 'end';\n\n  /**\n   * @private\n   */\n  @property({ type: String, reflect: true, attribute: 'aria-colindex' }) ariaColIndex: string; // eslint-disable-line local/reserved-property-names\n\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-grid-column',\n    version: '0.0.0'\n  };\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  get #grid() {\n    return this.parentElement!.parentElement as Grid;\n  }\n\n  render() {\n    return html`\n      <div internal-host focusable=\"active\">\n        <slot></slot>\n        <slot name=\"actions\"></slot>\n      </div>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    this._internals.role = 'columnheader';\n    this.addEventListener('sort', this.#onSort);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener('sort', this.#onSort);\n  }\n\n  #onSort = (e: Event) => {\n    this.ariaSort = (e as CustomEvent<{ next: string }>).detail.next;\n  };\n\n  willUpdate(props: PropertyValues<this>) {\n    if (props.has('width') && this.width && Number.isFinite(Number(this.width))) {\n      this.width = `${this.width}px`; // eslint-disable-line local/stateless-property\n    }\n  }\n\n  async updated(props: PropertyValues<this>) {\n    super.updated(props);\n\n    if (props.get('columnAlign') !== this.columnAlign) {\n      this.#computeColumnAlignment();\n    }\n\n    if (props.get('position') !== this.position) {\n      this.#computeColumnPositions();\n    }\n\n    if (props.get('ariaColIndex') !== this.ariaColIndex) {\n      this.#computeColumnPositions();\n      this.#computeColumnAlignment();\n    }\n\n    if (props.get('width') !== this.width) {\n      this.dispatchEvent(new CustomEvent('nve-grid-column-resize', { bubbles: true, composed: true }));\n    }\n  }\n\n  #positionStylesheet: CSSStyleSheet;\n\n  #computeColumnPositions() {\n    if (this.position !== 'fixed') {\n      this.removeAttribute('left');\n      this.removeAttribute('right');\n      this.#positionStylesheet?.replaceSync('');\n      return;\n    }\n\n    const { side, positionStyle, borderStyle } = this.#buildFixedStyles();\n    const combinedStyle = `${positionStyle}\\n${borderStyle}`;\n\n    if (this.#positionStylesheet) {\n      this.#positionStylesheet.replaceSync(combinedStyle);\n    } else {\n      this.#positionStylesheet = appendRootNodeStyle(this.#grid, combinedStyle);\n    }\n\n    this.setAttribute(side, '');\n  }\n\n  #buildFixedStyles() {\n    const columns = Array.from(this.parentElement!.querySelectorAll<GridColumn>(GridColumn.metadata.tag));\n    const rightColumns = columns.slice(columns.indexOf(this) + 1, columns.length);\n    const position = this.getBoundingClientRect();\n    const gridPosition = this.#grid.getBoundingClientRect();\n    const side = this.offsetLeft < gridPosition.width / 2 ? 'left' : 'right';\n    const leftStyle = position.left - gridPosition.left;\n    const rightStyle = rightColumns.reduce((width, c) => width + c.getBoundingClientRect().width, 0);\n    const selector = `[id='${this.#grid.id}'] nve-grid-column:nth-of-type(${this.ariaColIndex}),\n        [id='${this.#grid.id}'] nve-grid-cell:nth-of-type(${this.ariaColIndex})`;\n\n    const positionStyle = `\n        ${selector} {\n          position: sticky;\n          z-index: 99;\n          ${side === 'left' ? `left: ${leftStyle}px;` : `right: ${rightStyle}px;`}\n        }\n      `;\n\n    const borderStyle = this.#buildBorderStyle(selector, side);\n    return { side, positionStyle, borderStyle };\n  }\n\n  #buildBorderStyle(selector: string, side: 'left' | 'right') {\n    const isLastLeft = side === 'left' && (this.nextElementSibling as GridColumn)?.position !== this.position;\n    const isLastRight = side === 'right' && (this.previousElementSibling as GridColumn)?.position !== this.position;\n\n    if (!isLastLeft && !isLastRight) {\n      return '';\n    }\n\n    return `\n        ${selector} {\n          box-shadow: var(--scroll-shadow);\n          clip-path: inset(0px ${isLastLeft ? '-4px' : '0'} 0px ${isLastRight ? '-4px' : '0'});\n          --border-${side === 'right' ? 'left' : 'right'}: var(--nve-ref-border-width-sm) solid var(--nve-ref-border-color-muted);\n        }\n      `;\n  }\n\n  #computeColumnAlignment() {\n    if (this.columnAlign !== undefined) {\n      appendRootNodeStyle(\n        this.#grid,\n        `[id='${this.#grid.id}'] nve-grid-column:nth-of-type(${this.ariaColIndex}),\n        [id='${this.#grid.id}'] nve-grid-cell:nth-of-type(${this.ariaColIndex}) {\n          --justify-content: ${this.columnAlign}\n        }`\n      );\n    }\n  }\n}\n"],"mappings":"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"}

package/dist/grid/define.js.map

@@ -1 +1 @@
-{"version":3,"file":"define.js","names":[],"sources":["../../src/grid/define.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { define } from '@nvidia-elements/core/internal';\nimport { Grid, GridColumn, GridRow, GridCell, GridFooter, GridHeader, GridPlaceholder } from '@nvidia-elements/core/grid';\n\ndefine(Grid);\ndefine(GridColumn);\ndefine(GridRow);\ndefine(GridCell);\ndefine(GridFooter);\ndefine(GridHeader);\ndefine(GridPlaceholder);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nve-grid': Grid;\n    'nve-grid-column': GridColumn;\n    'nve-grid-row': GridRow;\n    'nve-grid-cell': GridCell;\n    'nve-grid-footer': GridFooter;\n    'nve-grid-header': GridHeader;\n    'nve-grid-placeholder': GridPlaceholder;\n  }\n}\n"],"mappings":";;;;;;;;AAMA,EAAO,EAAK,EACZ,EAAO,EAAW,EAClB,EAAO,EAAQ,EACf,EAAO,EAAS,EAChB,EAAO,EAAW,EAClB,EAAO,EAAW,EAClB,EAAO,EAAgB"}
+{"version":3,"file":"define.js","names":[],"sources":["../../src/grid/define.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { define } from '@nvidia-elements/core/internal';\nimport {\n  Grid,\n  GridColumn,\n  GridRow,\n  GridCell,\n  GridFooter,\n  GridHeader,\n  GridPlaceholder\n} from '@nvidia-elements/core/grid';\n\ndefine(Grid);\ndefine(GridColumn);\ndefine(GridRow);\ndefine(GridCell);\ndefine(GridFooter);\ndefine(GridHeader);\ndefine(GridPlaceholder);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nve-grid': Grid;\n    'nve-grid-column': GridColumn;\n    'nve-grid-row': GridRow;\n    'nve-grid-cell': GridCell;\n    'nve-grid-footer': GridFooter;\n    'nve-grid-header': GridHeader;\n    'nve-grid-placeholder': GridPlaceholder;\n  }\n}\n"],"mappings":";;;;;;;;AAcA,EAAO,EAAK,EACZ,EAAO,EAAW,EAClB,EAAO,EAAQ,EACf,EAAO,EAAS,EAChB,EAAO,EAAW,EAClB,EAAO,EAAW,EAClB,EAAO,EAAgB"}