@nvidia-elements/core 2.19.0 → 2.20.0

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

@@ -1 +1 @@
-{"version":3,"file":"control2.js","names":[],"sources":["../../../src/forms/control/control.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { TemplateResult } from 'lit';\nimport { LitElement, html, nothing, isServer } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport {\n  attachInternals,\n  useStyles,\n  associateLabel,\n  associateAriaDescribedBy,\n  associateDataList,\n  appendRootNodeStyle,\n  getAttributeListChanges,\n  I18nController,\n  hostAttr,\n  typeSSR\n} from '@nvidia-elements/core/internal';\nimport type { ControlMessage } from '../control-message/control-message.js';\nimport {\n  setupControlValidationStates,\n  setupControlStates,\n  setupControlStatusStates,\n  inputQuery,\n  type ControlStateCleanup\n} from '../utils/states.js';\nimport { setupControlLayoutStates } from '../utils/layout.js';\nimport globalStyles from './control.global.css?inline';\nimport styles from './control.css?inline';\n\ninterface ResettableControl {\n  getAttribute: Element['getAttribute'];\n  value: string;\n}\n\ntype ControlInput = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement | ResettableControl;\n\n/**\n * @element nve-control\n * @description Wraps a form input with its associated label and validation messages, managing layout and accessibility associations.\n * @documentation https://nvidia.github.io/elements/docs/elements/control/\n * @since 0.3.0\n * @entrypoint \\@nvidia-elements/core/forms\n * @slot - Control input element\n * @slot label - Label element\n * @cssprop --cursor\n * @cssprop --accent-color\n * @cssprop --color\n * @cssprop --label-color\n * @cssprop --label-width\n * @cssprop --label-font-weight\n * @cssprop --label-font-size\n * @cssprop --control-width\n * @cssprop --control-height\n\n * @aria https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals\n * @package true\n */\n@typeSSR()\nexport class Control extends LitElement {\n  /** Set current visual state for control. This overrides any validation states active. */\n  @property({ type: String }) status: 'warning' | 'error' | 'success' | 'disabled';\n\n  /** Set current control + label + control message layout. Layouts will collapse based on available container space. */\n  @property({ type: String, reflect: true }) layout:\n    | 'vertical'\n    | 'vertical-inline'\n    | 'horizontal'\n    | 'horizontal-inline';\n\n  /** Sets the input to match the width of the active text content of the control value. Only applicable to vertical input box type controls (input, select) */\n  @property({ type: Boolean, reflect: true, attribute: 'fit-text' }) fitText = false;\n\n  /** Sets the input to match native default content block */\n  @property({ type: Boolean, reflect: true, attribute: 'fit-content' }) fitContent = false;\n\n  #i18nController: I18nController<this> = new I18nController<this>(this);\n\n  /** Enables internal string values to update for internationalization. */\n  @property({ type: Object }) i18n = this.#i18nController.i18n;\n\n  /** Set the visual prominence of the control */\n  @property({ type: String, reflect: true }) prominence: 'muted';\n\n  get #label() {\n    return this.shadowRoot\n      ?.querySelector<HTMLSlotElement>('slot[name=\"label\"]')\n      ?.assignedElements({ flatten: true })?.[0] as HTMLLabelElement;\n  }\n\n  get #messages() {\n    return (this.shadowRoot\n      ?.querySelector<HTMLSlotElement>('slot[name=\"messages\"]')\n      ?.assignedElements({ flatten: true }) ?? []) as ControlMessage[];\n  }\n\n  #input: HTMLInputElement;\n\n  /** @private */\n  get input(): HTMLInputElement {\n    if (!isServer && !this.#input) {\n      const slotted =\n        this.querySelector('slot')\n          ?.assignedElements()\n          ?.find(i => i.matches(inputQuery)) ??\n        Array.from(this.shadowRoot!.querySelector('slot')?.assignedElements({ flatten: true }) ?? []).find(i =>\n          i.matches(inputQuery)\n        );\n      this.#input = (slotted ? slotted : this.querySelector(inputQuery)) as HTMLInputElement;\n    }\n\n    return this.#input;\n  }\n\n  /** @private */\n  protected get prefixContent(): typeof nothing | TemplateResult {\n    return nothing;\n  }\n\n  /** @private */\n  protected get suffixContent(): typeof nothing | TemplateResult {\n    return nothing;\n  }\n\n  @hostAttr({ attribute: 'nve-control' }) protected nveControl = '';\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  #observers: (MutationObserver | ResizeObserver | ControlStateCleanup)[] = [];\n\n  protected _associateDatalist = true;\n\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-control',\n    version: '0.0.0'\n  };\n\n  render() {\n    return this.nveControl !== 'inline'\n      ? html`\n      <div internal-host part=\"_internal-host\">\n        <slot name=\"label\" part=\"_label\"></slot>\n        <div input part=\"_input\">\n          ${this.prefixContent}\n          <slot></slot>\n          ${this.suffixContent}\n        </div>\n        <slot name=\"messages\" part=\"_messages\"></slot>\n      </div>\n    `\n      : html`\n      <div internal-host part=\"_internal-host\">\n        <div input part=\"_input\"><slot interaction-state></slot></div>\n        <slot name=\"label\" part=\"_label\"></slot>\n        <slot name=\"messages\" part=\"_messages\"></slot>\n      </div>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    appendRootNodeStyle(this, globalStyles);\n    this.shadowRoot!.addEventListener('slotchange', this.#onRootSlotchange);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.shadowRoot!.removeEventListener('slotchange', this.#onRootSlotchange);\n    this.shadowRoot!.removeEventListener('slotchange', this.#onInputSlotchange);\n    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    }\n  };\n\n  /** Resets control value to initial attribute value and clears any active validation rules. */\n  reset() {\n    this.#resetInputValue(this.input);\n    this.requestUpdate();\n    this.dispatchEvent(new CustomEvent('reset', { bubbles: true, composed: true }));\n  }\n\n  #resetInputValue(input: ControlInput) {\n    if (input instanceof HTMLSelectElement) {\n      this.#resetSelectValue(input);\n      return;\n    }\n\n    if (this.#isCheckedInput(input)) {\n      input.checked = input.defaultChecked;\n      input.indeterminate = false;\n      return;\n    }\n\n    input.value =\n      input instanceof HTMLInputElement || input instanceof HTMLTextAreaElement\n        ? input.defaultValue\n        : (input.getAttribute('value') ?? '');\n  }\n\n  #resetSelectValue(input: HTMLSelectElement) {\n    const hasDefaultSelection = Array.from(input.options).some(option => option.defaultSelected);\n    Array.from(input.options).forEach(option => (option.selected = option.defaultSelected));\n    if (!input.multiple && !hasDefaultSelection) input.selectedIndex = 0;\n  }\n\n  #isCheckedInput(input: ControlInput): input is HTMLInputElement {\n    return input instanceof HTMLInputElement && (input.type === 'checkbox' || input.type === 'radio');\n  }\n\n  #setupInput() {\n    this.#observers.push(\n      ...setupControlValidationStates(this, this.#messages),\n      ...setupControlStates(this),\n      ...setupControlStatusStates(this, this.#messages),\n      setupControlLayoutStates(this),\n      getAttributeListChanges(this, ['hidden', 'status'], () => this.#updateStyleStates())\n    );\n\n    this.#polyfillShowPicker();\n    this.#updateAssociations();\n    this.shadowRoot!.addEventListener('slotchange', this.#onInputSlotchange);\n  }\n\n  #onInputSlotchange = () => {\n    this.#updateStyleStates();\n    this.#updateAssociations();\n  };\n\n  #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":";;;;;;;;;;;;;;AA2DO,IAAM,IAAN,cAAsB,EAAW;;EA+KX,aAnKkD,KAAA,UAAA,IAGM,KAAA,aAAA,IAE3C,KAAA,KAAA,IAAI,EAAqB,IAAI,GAGlC,KAAA,OAAA,KAAK,GAAgB,MA6CO,KAAA,aAAA,IAKW,KAAA,KAAA,CAAC,GAE5C,KAAA,qBAAA,IA8CL,KAAA,WAAA;GAGxB,AAFA,KAAK,GAAmB,GAEpB,KAAK,SAAS,KAAK,GAAW,WAAW,KAC3C,KAAK,GAAY;EAErB,GAmD2B,KAAA,WAAA;GAEzB,AADA,KAAK,GAAmB,GACxB,KAAK,GAAoB;EAC3B;;CAjKA;CAQA,IAAI,KAAS;EACX,OAAO,KAAK,YACR,cAA+B,sBAAoB,CAAC,EACpD,iBAAiB,EAAE,SAAS,GAAK,CAAC,CAAC,GAAG;CAC5C;CAEA,IAAI,KAAY;EACd,OAAQ,KAAK,YACT,cAA+B,yBAAuB,CAAC,EACvD,iBAAiB,EAAE,SAAS,GAAK,CAAC,KAAK,CAAC;CAC9C;CAEA;CAGA,IAAI,QAA0B;EAC5B,IAAI,CAAC,KAAY,CAAC,KAAK,IAAQ;GAC7B,IAAM,IACJ,KAAK,cAAc,MAAM,CAAC,EACtB,iBAAiB,CAAC,EAClB,MAAK,MAAK,EAAE,QAAA,oDAAkB,CAAC,KACnC,MAAM,KAAK,KAAK,WAAY,cAAc,MAAM,CAAC,EAAE,iBAAiB,EAAE,SAAS,GAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,MAAK,MACjG,EAAE,QAAA,oDAAkB,CACtB;GACF,KAAK,KAAU,KAAoB,KAAK,cAAc,CAAU;EAClE;EAEA,OAAO,KAAK;CACd;CAGA,IAAc,gBAAiD;EAC7D,OAAO;CACT;CAGA,IAAc,gBAAiD;EAC7D,OAAO;CACT;CAOA;;EAIgB,KAAA,SAAA,EAAU,CAAC,CAAM,CAAC;;;EAEP,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;EACX;;CAEA,SAAS;EACP,OAAO,KAAK,eAAe,WAYvB,CAAI,wMAXJ,CAAI,6GAIA,KAAK,cAAc,eAEnB,KAAK,cAAc;CAY7B;CAEA,oBAAoB;EAIlB,AAHA,MAAM,kBAAkB,GACxB,EAAgB,IAAI,GACpB,EAAoB,MAAM,CAAY,GACtC,KAAK,WAAY,iBAAiB,cAAc,KAAK,EAAiB;CACxE;CAEA,uBAAuB;EAKrB,AAJA,MAAM,qBAAqB,GAC3B,KAAK,WAAY,oBAAoB,cAAc,KAAK,EAAiB,GACzE,KAAK,WAAY,oBAAoB,cAAc,KAAK,EAAkB,GAC1E,KAAK,GAAW,SAAQ,MAAY,EAAS,WAAW,CAAC,GACzD,KAAK,GAAW,SAAS;CAC3B;CAEA;CASA,QAAQ;EAGN,AAFA,KAAK,GAAiB,KAAK,KAAK,GAChC,KAAK,cAAc,GACnB,KAAK,cAAc,IAAI,YAAY,SAAS;GAAE,SAAS;GAAM,UAAU;EAAK,CAAC,CAAC;CAChF;CAEA,GAAiB,GAAqB;EACpC,IAAI,aAAiB,mBAAmB;GACtC,KAAK,GAAkB,CAAK;GAC5B;EACF;EAEA,IAAI,KAAK,GAAgB,CAAK,GAAG;GAE/B,AADA,EAAM,UAAU,EAAM,gBACtB,EAAM,gBAAgB;GACtB;EACF;EAEA,EAAM,QACJ,aAAiB,oBAAoB,aAAiB,sBAClD,EAAM,eACL,EAAM,aAAa,OAAO,KAAK;CACxC;CAEA,GAAkB,GAA0B;EAC1C,IAAM,IAAsB,MAAM,KAAK,EAAM,OAAO,CAAC,CAAC,MAAK,MAAU,EAAO,eAAe;EAE3F,AADA,MAAM,KAAK,EAAM,OAAO,CAAC,CAAC,SAAQ,MAAW,EAAO,WAAW,EAAO,eAAgB,GAClF,CAAC,EAAM,YAAY,CAAC,MAAqB,EAAM,gBAAgB;CACrE;CAEA,GAAgB,GAAgD;EAC9D,OAAO,aAAiB,qBAAqB,EAAM,SAAS,cAAc,EAAM,SAAS;CAC3F;CAEA,KAAc;EAWZ,AAVA,KAAK,GAAW,KACd,GAAG,EAA6B,MAAM,KAAK,EAAS,GACpD,GAAG,EAAmB,IAAI,GAC1B,GAAG,EAAyB,MAAM,KAAK,EAAS,GAChD,EAAyB,IAAI,GAC7B,EAAwB,MAAM,CAAC,UAAU,QAAQ,SAAS,KAAK,GAAmB,CAAC,CACrF,GAEA,KAAK,GAAoB,GACzB,KAAK,GAAoB,GACzB,KAAK,WAAY,iBAAiB,cAAc,KAAK,EAAkB;CACzE;CAEA;CAKA,KAAsB;EACpB,AAAK,KAAK,MAAM,eACd,KAAK,MAAM,mBAAmB,KAAK,MAAM,MAAM;CAEnD;CAEA,KAAqB;EACnB,AAAI,KAAK,UACP,KAAK,gBAAgB,YAAY,KAAK,OAAO,QAAQ,GACrD,KAAK,OAAO,aAAa,MAAM,IAAI,KAAK,aAAa,QAAQ,EAAE,IAAI,KAAK,gBAAgB,MAAM;CAElG;CAEA,KAAsB;EAKpB,AAJA,KAAK,GAAa,GAClB,EAAe,KAAK,IAAQ,KAAK,KAAK,GACtC,EAAyB,MAAM,KAAK,KAAK,EAAS,GAAG,KAAK,KAAK,GAE3D,KAAK,sBACP,EAAkB,KAAK,cAAmC,UAAU,GAAI,KAAK,KAAK;CAEtF;CAEA,KAAe;EACb,IAAM,IACJ,KAAK,cAAc,OAAO,KACzB,KAAK,WAAY,cAAc,MAAM,CAAC,CACpC,cAAc,EAAE,SAAS,GAAK,CAAC,CAAC,CAChC,MAAM,MAAa,EAAkB,YAAY,OAAO;EAC7D,AAAI,MACF,EAAM,OAAO;CAEjB;CAEA,aAAuB;EACrB,IAAI;GACF,KAAK,MAAM,WAAW;EACxB,QAAQ,CAER;CACF;AACF;AA3NG,EAAA,CAAA,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,UAAA,KAAA,CAAA,GAGzB,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,UAAA,KAAA,CAAA,GAOxC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,SAAS;CAAM,WAAW;AAAW,CAAC,CAAA,GAAA,EAAA,WAAA,WAAA,KAAA,CAAA,GAGhE,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,SAAS;CAAM,WAAW;AAAc,CAAC,CAAA,GAAA,EAAA,WAAA,cAAA,KAAA,CAAA,GAKnE,EAAA,CAAA,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,GAGzB,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,cAAA,KAAA,CAAA,GA0CxC,EAAA,CAAA,EAAS,EAAE,WAAW,cAAc,CAAC,CAAA,GAAA,EAAA,WAAA,cAAA,KAAA,CAAA,GAlEvC,IAAA,EAAA,CAAA,EAAQ,CAAA,GAAA,CAAA"}
+{"version":3,"file":"control2.js","names":[],"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  hostAttr,\n  typeSSR\n} from '@nvidia-elements/core/internal';\nimport { I18nController, type I18nDefaults } from '@nvidia-elements/foundations/internal/i18n';\nimport type { ControlMessage } from '../control-message/control-message.js';\nimport {\n  setupControlValidationStates,\n  setupControlStates,\n  setupControlStatusStates,\n  inputQuery,\n  type ControlStateCleanup\n} from '../utils/states.js';\nimport { setupControlLayoutStates } from '../utils/layout.js';\nimport globalStyles from './control.global.css?inline';\nimport styles from './control.css?inline';\n\ninterface ResettableControl {\n  getAttribute: Element['getAttribute'];\n  value: string;\n}\n\ntype ControlInput = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement | ResettableControl;\n\n/**\n * @element nve-control\n * @description Wraps a form input with its associated label and validation messages, managing layout and accessibility associations.\n * @documentation https://nvidia.github.io/elements/docs/elements/control/\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  /** Component-specific defaults supplied by a derived control. */\n  protected get i18nDefaults(): I18nDefaults {\n    return {};\n  }\n\n  #i18nController: I18nController<this> = new I18nController<this>(this, this.i18nDefaults);\n\n  /** Enables internal string values to update for internationalization. */\n  @property({ type: Object }) i18n = this.#i18nController.i18n;\n\n  /** Set the visual prominence of the control */\n  @property({ type: String, reflect: true }) prominence: 'muted';\n\n  get #label() {\n    return this.shadowRoot\n      ?.querySelector<HTMLSlotElement>('slot[name=\"label\"]')\n      ?.assignedElements({ flatten: true })?.[0] as HTMLLabelElement;\n  }\n\n  get #messages() {\n    return (this.shadowRoot\n      ?.querySelector<HTMLSlotElement>('slot[name=\"messages\"]')\n      ?.assignedElements({ flatten: true }) ?? []) as ControlMessage[];\n  }\n\n  #input: HTMLInputElement;\n\n  /** @private */\n  get input(): HTMLInputElement {\n    if (!isServer && !this.#input) {\n      const slotted =\n        this.querySelector('slot')\n          ?.assignedElements()\n          ?.find(i => i.matches(inputQuery)) ??\n        Array.from(this.shadowRoot!.querySelector('slot')?.assignedElements({ flatten: true }) ?? []).find(i =>\n          i.matches(inputQuery)\n        );\n      this.#input = (slotted ? slotted : this.querySelector(inputQuery)) as HTMLInputElement;\n    }\n\n    return this.#input;\n  }\n\n  /** @private */\n  protected get prefixContent(): typeof nothing | TemplateResult {\n    return nothing;\n  }\n\n  /** @private */\n  protected get suffixContent(): typeof nothing | TemplateResult {\n    return nothing;\n  }\n\n  @hostAttr({ attribute: 'nve-control' }) protected nveControl = '';\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  #observers: (MutationObserver | ResizeObserver | ControlStateCleanup)[] = [];\n\n  protected _associateDatalist = true;\n\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-control',\n    version: '0.0.0'\n  };\n\n  render() {\n    return this.nveControl !== 'inline'\n      ? html`\n      <div internal-host part=\"_internal-host\">\n        <slot name=\"label\" part=\"_label\"></slot>\n        <div input part=\"_input\">\n          ${this.prefixContent}\n          <slot></slot>\n          ${this.suffixContent}\n        </div>\n        <slot name=\"messages\" part=\"_messages\"></slot>\n      </div>\n    `\n      : html`\n      <div internal-host part=\"_internal-host\">\n        <div input part=\"_input\"><slot interaction-state></slot></div>\n        <slot name=\"label\" part=\"_label\"></slot>\n        <slot name=\"messages\" part=\"_messages\"></slot>\n      </div>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    appendRootNodeStyle(this, globalStyles);\n    this.shadowRoot!.addEventListener('slotchange', this.#onRootSlotchange);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.shadowRoot!.removeEventListener('slotchange', this.#onRootSlotchange);\n    this.shadowRoot!.removeEventListener('slotchange', this.#onInputSlotchange);\n    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    }\n  };\n\n  /** Resets control value to initial attribute value and clears any active validation rules. */\n  reset() {\n    this.#resetInputValue(this.input);\n    this.requestUpdate();\n    this.dispatchEvent(new CustomEvent('reset', { bubbles: true, composed: true }));\n  }\n\n  #resetInputValue(input: ControlInput) {\n    if (input instanceof HTMLSelectElement) {\n      this.#resetSelectValue(input);\n      return;\n    }\n\n    if (this.#isCheckedInput(input)) {\n      input.checked = input.defaultChecked;\n      input.indeterminate = false;\n      return;\n    }\n\n    input.value =\n      input instanceof HTMLInputElement || input instanceof HTMLTextAreaElement\n        ? input.defaultValue\n        : (input.getAttribute('value') ?? '');\n  }\n\n  #resetSelectValue(input: HTMLSelectElement) {\n    const hasDefaultSelection = Array.from(input.options).some(option => option.defaultSelected);\n    Array.from(input.options).forEach(option => (option.selected = option.defaultSelected));\n    if (!input.multiple && !hasDefaultSelection) input.selectedIndex = 0;\n  }\n\n  #isCheckedInput(input: ControlInput): input is HTMLInputElement {\n    return input instanceof HTMLInputElement && (input.type === 'checkbox' || input.type === 'radio');\n  }\n\n  #setupInput() {\n    this.#observers.push(\n      ...setupControlValidationStates(this, this.#messages),\n      ...setupControlStates(this),\n      ...setupControlStatusStates(this, this.#messages),\n      setupControlLayoutStates(this),\n      getAttributeListChanges(this, ['hidden', 'status'], () => this.#updateStyleStates())\n    );\n\n    this.#polyfillShowPicker();\n    this.#updateAssociations();\n    this.shadowRoot!.addEventListener('slotchange', this.#onInputSlotchange);\n  }\n\n  #onInputSlotchange = () => {\n    this.#updateStyleStates();\n    this.#updateAssociations();\n  };\n\n  #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-group2.js

@@ -24,7 +24,7 @@ var m = class extends d {
 	static {
 		this.metadata = {
 			tag: "nve-control-group",
-			version: "2.19.0"
+			version: "2.20.0"
 		};
 	}
 	render() {

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

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

package/dist/gauge/gauge2.js

@@ -1,10 +1,10 @@
-import { I18nController as e } from "../internal/controllers/i18n.controller.js";
-import { attachInternals as t } from "../internal/utils/a11y.js";
-import { useStyles as n } from "../internal/styles/index.js";
-import r from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js";
-import i from "./gauge.js";
-import { LitElement as a, html as o } from "lit";
-import { property as s } from "lit/decorators/property.js";
+import { attachInternals as e } from "../internal/utils/a11y.js";
+import { useStyles as t } from "../internal/styles/index.js";
+import n from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js";
+import r from "./gauge.js";
+import { LitElement as i, html as a } from "lit";
+import { property as o } from "lit/decorators/property.js";
+import { I18nController as s } from "@nvidia-elements/foundations/internal/i18n";
 import { styleMap as c } from "lit/directives/style-map.js";
 //#region src/gauge/gauge.ts
 var l = {
@@ -30,17 +30,22 @@ var l = {
 	[`--_${e}-angle`]: `${t}deg`,
 	[`--_${e}-origin`]: `${n.center}px ${n.center}px`,
 	[`--_${e}-start-angle`]: `${n.startAngle}deg`
-}), d = class extends a {
-	constructor(...t) {
-		super(...t), this.value = 0, this.max = 100, this.status = "neutral", this.thumb = "fill", this.#e = new e(this), this.i18n = this.#e.i18n, this.#t = 0, this.#r = 0;
+}), d = {
+	danger: "danger",
+	information: "information",
+	success: "success",
+	warning: "warning"
+}, f = class extends i {
+	constructor(...e) {
+		super(...e), this.value = 0, this.max = 100, this.status = "neutral", this.thumb = "fill", this.#e = new s(this, d), this.i18n = this.#e.i18n, this.#t = 0, this.#r = 0;
 	}
 	static {
-		this.styles = n([i]);
+		this.styles = t([r]);
 	}
 	static {
 		this.metadata = {
 			tag: "nve-gauge",
-			version: "2.19.0"
+			version: "2.20.0"
 		};
 	}
 	#e;
@@ -55,11 +60,11 @@ var l = {
 		};
 	}
 	render() {
-		let e = this.#f(), t = this.#t, n = this.#p(), r = this.#l(e, t), i = this.#u(e, t), a = n === "fill", s = t > 0 && (n === "fill" || n === "dot");
-		return o`<div internal-host><svg viewBox="${e.viewBox}" role="presentation" aria-hidden="true"><defs><mask id="background-mask" maskUnits="userSpaceOnUse" x="0" y="0" width="128" height="${e.surfaceHeight}"><path d="${e.path}" class="background"></path></mask><mask id="fill-mask" maskUnits="userSpaceOnUse" x="0" y="0" width="128" height="${e.surfaceHeight}"><path d="${i}" class="gauge" ?empty="${t <= 0}"></path></mask></defs><foreignObject width="128" height="${e.surfaceHeight}" mask="url(#background-mask)"><div xmlns="http://www.w3.org/1999/xhtml" class="background-surface"></div></foreignObject><foreignObject class="fill-layer" width="128" height="${e.surfaceHeight}" mask="url(#fill-mask)" ?hidden="${!a || t <= 0}"><div xmlns="http://www.w3.org/1999/xhtml" class="fill-surface"></div></foreignObject><circle class="fill-dot-end" cx="${e.center + e.radius}" cy="${e.center}" ?hidden="${!s}" style="${c(u("dot", r, e))}"></circle><g class="needle" ?hidden="${n !== "needle"}" style="${c(u("needle", r, e))}"><line class="needle-line" x1="${e.center}" y1="${e.center}" x2="${e.center + 40}" y2="${e.center}"></line><circle class="needle-hub" cx="${e.center}" cy="${e.center}"></circle></g></svg><slot></slot></div>`;
+		let e = this.#f(), t = this.#t, n = this.#p(), r = this.#l(e, t), i = this.#u(e, t), o = n === "fill", s = t > 0 && (n === "fill" || n === "dot");
+		return a`<div internal-host><svg viewBox="${e.viewBox}" role="presentation" aria-hidden="true"><defs><mask id="background-mask" maskUnits="userSpaceOnUse" x="0" y="0" width="128" height="${e.surfaceHeight}"><path d="${e.path}" class="background"></path></mask><mask id="fill-mask" maskUnits="userSpaceOnUse" x="0" y="0" width="128" height="${e.surfaceHeight}"><path d="${i}" class="gauge" ?empty="${t <= 0}"></path></mask></defs><foreignObject width="128" height="${e.surfaceHeight}" mask="url(#background-mask)"><div xmlns="http://www.w3.org/1999/xhtml" class="background-surface"></div></foreignObject><foreignObject class="fill-layer" width="128" height="${e.surfaceHeight}" mask="url(#fill-mask)" ?hidden="${!o || t <= 0}"><div xmlns="http://www.w3.org/1999/xhtml" class="fill-surface"></div></foreignObject><circle class="fill-dot-end" cx="${e.center + e.radius}" cy="${e.center}" ?hidden="${!s}" style="${c(u("dot", r, e))}"></circle><g class="needle" ?hidden="${n !== "needle"}" style="${c(u("needle", r, e))}"><line class="needle-line" x1="${e.center}" y1="${e.center}" x2="${e.center + 40}" y2="${e.center}"></line><circle class="needle-hub" cx="${e.center}" cy="${e.center}"></circle></g></svg><slot></slot></div>`;
 	}
 	connectedCallback() {
-		super.connectedCallback(), t(this), this._internals.role = "progressbar";
+		super.connectedCallback(), e(this), this._internals.role = "progressbar";
 	}
 	disconnectedCallback() {
 		super.disconnectedCallback(), this.#n && (this.#s(), this.#t = this.#a(), this.requestUpdate());
@@ -124,20 +129,20 @@ var l = {
 		return this.thumb === "dot" || this.thumb === "needle" ? this.thumb : "fill";
 	}
 };
-r([s({ type: Number })], d.prototype, "value", void 0), r([s({ type: Number })], d.prototype, "max", void 0), r([s({
+n([o({ type: Number })], f.prototype, "value", void 0), n([o({ type: Number })], f.prototype, "max", void 0), n([o({
 	type: String,
 	reflect: !0
-})], d.prototype, "status", void 0), r([s({
+})], f.prototype, "status", void 0), n([o({
 	type: String,
 	reflect: !0
-})], d.prototype, "shape", void 0), r([s({
+})], f.prototype, "shape", void 0), n([o({
 	type: String,
 	reflect: !0
-})], d.prototype, "thumb", void 0), r([s({
+})], f.prototype, "thumb", void 0), n([o({
 	type: String,
 	reflect: !0
-})], d.prototype, "size", void 0), r([s({ type: Object })], d.prototype, "i18n", void 0);
+})], f.prototype, "size", void 0), n([o({ type: Object })], f.prototype, "i18n", void 0);
 //#endregion
-export { d as Gauge };
+export { f as Gauge };
 
 //# sourceMappingURL=gauge2.js.map

package/dist/gauge/gauge2.js.map

@@ -1 +1 @@
-{"version":3,"file":"gauge2.js","names":[],"sources":["../../src/gauge/gauge.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 { styleMap } from 'lit/directives/style-map.js';\nimport type { Size, SupportStatus } from '@nvidia-elements/core/internal';\nimport { attachInternals, I18nController, useStyles } from '@nvidia-elements/core/internal';\nimport styles from './gauge.css?inline';\n\nconst GAUGE_GEOMETRY = {\n  default: {\n    center: 64,\n    path: 'M 27.23 100.77 A 52 52 0 1 1 100.77 100.77',\n    radius: 52,\n    startAngle: 135,\n    sweepAngle: 270,\n    surfaceHeight: 128,\n    viewBox: '8.53 8.53 110.93 95.7'\n  },\n  half: {\n    center: 64,\n    path: 'M 12 64 A 52 52 0 0 1 116 64',\n    radius: 52,\n    startAngle: 180,\n    sweepAngle: 180,\n    surfaceHeight: 64,\n    viewBox: '8.53 8.53 110.93 58.93'\n  }\n} as const;\n\ntype GaugeGeometry = (typeof GAUGE_GEOMETRY)[keyof typeof GAUGE_GEOMETRY];\n\nconst thumbStyle = (thumb: 'dot' | 'needle', progressAngle: number, geometry: GaugeGeometry) => ({\n  [`--_${thumb}-angle`]: `${progressAngle}deg`,\n  [`--_${thumb}-origin`]: `${geometry.center}px ${geometry.center}px`,\n  [`--_${thumb}-start-angle`]: `${geometry.startAngle}deg`\n});\n\n/**\n * @element nve-gauge\n * @description Use a gauge to show system resource usage.\n * @documentation https://nvidia.github.io/elements/docs/elements/gauge/\n * @since 2.0.4\n * @entrypoint \\@nvidia-elements/core/gauge\n * @slot - Content to display in the gauge center.\n * @cssprop --track-width\n * @cssprop --accent-color\n * @cssprop --background\n * @cssprop --needle-background\n * @cssprop --track-background\n * @cssprop --thumb-background\n * @cssprop --color\n * @cssprop --width\n * @cssprop --height\n * @cssprop --font-size\n * @cssprop --gap\n * @aria https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/progressbar_role\n * @stable false\n */\nexport class Gauge extends LitElement {\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-gauge',\n    version: '0.0.0'\n  };\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  /** The current `value` of the gauge. */\n  @property({ type: Number }) value = 0;\n\n  /** The `max` value of the gauge that the `value` is proportionally scaled to. */\n  @property({ type: Number }) max? = 100;\n\n  /** Four visual treatments represent the `status` of tasks. */\n  @property({ type: String, reflect: true }) status?: SupportStatus | 'neutral' = 'neutral';\n\n  /** Determines the gauge shape. Set `half` for a compact semi-circular arc. */\n  @property({ type: String, reflect: true }) shape?: 'half';\n\n  /** Controls the value indicator. Set `dot` for only the end dot or `needle` for a pointer. */\n  @property({ type: String, reflect: true }) thumb: 'fill' | 'dot' | 'needle' = 'fill';\n\n  /** T-shirt `size` of the gauge. */\n  @property({ type: String, reflect: true }) size?: Size;\n\n  #i18nController: I18nController<this> = new I18nController<this>(this);\n\n  /** Enables updating internal string values for internationalization. */\n  @property({ type: Object }) i18n = this.#i18nController.i18n;\n\n  /** Progress the gauge paints, which eases toward the value instead of jumping to it. */\n  #paintedProgress = 0;\n\n  #progressAnimation?: Animation;\n\n  #progressFrame = 0;\n\n  #normalizedValues() {\n    const sourceMax = this.max;\n    const max = sourceMax !== undefined && Number.isFinite(sourceMax) && sourceMax > 0 ? sourceMax : 100;\n    const value = Number.isFinite(this.value) ? Math.min(Math.max(this.value, 0), max) : 0;\n    return { value, max };\n  }\n\n  render() {\n    const geometry = this.#geometry();\n    const progress = this.#paintedProgress;\n    const thumb = this.#normalizedThumb();\n    const progressAngle = this.#angleAtProgress(geometry, progress);\n    const fillPath = this.#pathAtProgress(geometry, progress);\n    const showFill = thumb === 'fill';\n    const showDot = progress > 0 && (thumb === 'fill' || thumb === 'dot');\n\n    return html`\n      <div internal-host>\n        <svg viewBox=${geometry.viewBox} role=\"presentation\" aria-hidden=\"true\">\n          <defs>\n            <mask id=\"background-mask\" maskUnits=\"userSpaceOnUse\" x=\"0\" y=\"0\" width=\"128\" height=${geometry.surfaceHeight}>\n              <path d=${geometry.path} class=\"background\"></path>\n            </mask>\n            <mask id=\"fill-mask\" maskUnits=\"userSpaceOnUse\" x=\"0\" y=\"0\" width=\"128\" height=${geometry.surfaceHeight}>\n              <path d=${fillPath} class=\"gauge\" ?empty=${progress <= 0}></path>\n            </mask>\n          </defs>\n          <foreignObject width=\"128\" height=${geometry.surfaceHeight} mask=\"url(#background-mask)\">\n            <div xmlns=\"http://www.w3.org/1999/xhtml\" class=\"background-surface\"></div>\n          </foreignObject>\n          <foreignObject class=\"fill-layer\" width=\"128\" height=${geometry.surfaceHeight} mask=\"url(#fill-mask)\"\n            ?hidden=${!showFill || progress <= 0}>\n            <div xmlns=\"http://www.w3.org/1999/xhtml\" class=\"fill-surface\"></div>\n          </foreignObject>\n          <circle class=\"fill-dot-end\" cx=${geometry.center + geometry.radius} cy=${geometry.center}\n            ?hidden=${!showDot}\n            style=${styleMap(thumbStyle('dot', progressAngle, geometry))}>\n          </circle>\n          <g class=\"needle\"\n            ?hidden=${thumb !== 'needle'}\n            style=${styleMap(thumbStyle('needle', progressAngle, geometry))}>\n            <line class=\"needle-line\" x1=${geometry.center} y1=${geometry.center} x2=${geometry.center + 40} y2=${geometry.center}></line>\n            <circle class=\"needle-hub\" cx=${geometry.center} cy=${geometry.center}></circle>\n          </g>\n        </svg>\n        <slot></slot>\n      </div>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    this._internals.role = 'progressbar';\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n\n    // settle the value, otherwise reattaching paints the frame where the animation stopped\n    if (this.#progressAnimation) {\n      this.#stopProgressAnimation();\n      this.#paintedProgress = this.#targetProgress();\n      this.requestUpdate();\n    }\n  }\n\n  willUpdate(props: PropertyValues<this>) {\n    super.willUpdate(props);\n\n    if (props.has('value') || props.has('max')) {\n      this.#animateProgress();\n    }\n  }\n\n  updated(props: PropertyValues<this>) {\n    super.updated(props);\n    const { value, max } = this.#normalizedValues();\n    this._internals.ariaValueNow = `${value}`;\n    this._internals.ariaValueMax = `${max}`;\n    const { status } = this;\n    const statusLabel =\n      status !== undefined && status !== 'neutral' && status !== 'accent' ? this.i18n[status] : undefined;\n    this._internals.ariaLabel = statusLabel ?? this.i18n.information ?? null;\n  }\n\n  #targetProgress() {\n    const { value, max } = this.#normalizedValues();\n    return (value / max) * 100;\n  }\n\n  /**\n   * Eases the painted progress toward the value with the duration and easing declared in css, so\n   * that `prefers-reduced-motion` and a `--_animation-duration` override both settle immediately.\n   */\n  #animateProgress() {\n    const target = this.#targetProgress();\n    const timing = this.hasUpdated ? this.#animationTiming() : undefined;\n\n    this.#stopProgressAnimation();\n\n    if (!timing || target === this.#paintedProgress) {\n      this.#paintedProgress = target;\n      return;\n    }\n\n    const from = this.#paintedProgress;\n    // keyframeless animations only keep time, leaving every painted frame to `render`\n    const animation = this.animate(null, timing);\n    const paint = (progress: number) => {\n      this.#paintedProgress = from + (target - from) * progress;\n      this.requestUpdate();\n    };\n    const paintFrame = () => {\n      paint(animation.effect?.getComputedTiming().progress ?? 0);\n\n      if (animation.playState === 'running') {\n        this.#progressFrame = requestAnimationFrame(paintFrame);\n      }\n    };\n\n    animation.finished.then(\n      () => {\n        // a value that changes on the frame this settles already started the next animation\n        if (this.#progressAnimation === animation) {\n          this.#stopProgressAnimation();\n          paint(1);\n        }\n      },\n      () => undefined\n    );\n\n    this.#progressAnimation = animation;\n    this.#progressFrame = requestAnimationFrame(paintFrame);\n  }\n\n  #stopProgressAnimation() {\n    // only a browser render starts an animation, so server rendering never reaches these apis\n    if (this.#progressAnimation) {\n      cancelAnimationFrame(this.#progressFrame);\n      this.#progressAnimation.cancel();\n      this.#progressAnimation = undefined;\n    }\n  }\n\n  #animationTiming() {\n    const gaugeStyles = getComputedStyle(this);\n    const duration = gaugeStyles.getPropertyValue('--_animation-duration').trim();\n    const milliseconds = parseFloat(duration) * (duration.endsWith('ms') ? 1 : 1000);\n    const easing = gaugeStyles.getPropertyValue('--nve-ref-animation-easing-100').trim();\n\n    return milliseconds > 0 ? { duration: milliseconds, easing: easing || 'linear' } : undefined;\n  }\n\n  #angleAtProgress(geometry: GaugeGeometry, progress: number) {\n    return geometry.startAngle + geometry.sweepAngle * (progress / 100);\n  }\n\n  #pathAtProgress(geometry: GaugeGeometry, progress: number) {\n    const start = this.#pointAtAngle(geometry, geometry.startAngle);\n    const sweepAngle = geometry.sweepAngle * (progress / 100);\n    const end = this.#pointAtAngle(geometry, geometry.startAngle + sweepAngle);\n    const largeArcFlag = sweepAngle > 180 ? 1 : 0;\n    return `M ${start.x} ${start.y} A ${geometry.radius} ${geometry.radius} 0 ${largeArcFlag} 1 ${end.x} ${end.y}`;\n  }\n\n  #pointAtAngle(geometry: GaugeGeometry, angle: number) {\n    const radians = (angle * Math.PI) / 180;\n    return {\n      x: geometry.center + geometry.radius * Math.cos(radians),\n      y: geometry.center + geometry.radius * Math.sin(radians)\n    };\n  }\n\n  #geometry() {\n    return this.shape === 'half' ? GAUGE_GEOMETRY.half : GAUGE_GEOMETRY.default;\n  }\n\n  #normalizedThumb() {\n    return this.thumb === 'dot' || this.thumb === 'needle' ? this.thumb : 'fill';\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"gauge2.js","names":[],"sources":["../../src/gauge/gauge.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 { styleMap } from 'lit/directives/style-map.js';\nimport type { Size, SupportStatus } from '@nvidia-elements/core/internal';\nimport { attachInternals, useStyles } from '@nvidia-elements/core/internal';\nimport { I18nController, type I18nDefaults } from '@nvidia-elements/foundations/internal/i18n';\nimport styles from './gauge.css?inline';\n\nconst GAUGE_GEOMETRY = {\n  default: {\n    center: 64,\n    path: 'M 27.23 100.77 A 52 52 0 1 1 100.77 100.77',\n    radius: 52,\n    startAngle: 135,\n    sweepAngle: 270,\n    surfaceHeight: 128,\n    viewBox: '8.53 8.53 110.93 95.7'\n  },\n  half: {\n    center: 64,\n    path: 'M 12 64 A 52 52 0 0 1 116 64',\n    radius: 52,\n    startAngle: 180,\n    sweepAngle: 180,\n    surfaceHeight: 64,\n    viewBox: '8.53 8.53 110.93 58.93'\n  }\n} as const;\n\ntype GaugeGeometry = (typeof GAUGE_GEOMETRY)[keyof typeof GAUGE_GEOMETRY];\n\nconst thumbStyle = (thumb: 'dot' | 'needle', progressAngle: number, geometry: GaugeGeometry) => ({\n  [`--_${thumb}-angle`]: `${progressAngle}deg`,\n  [`--_${thumb}-origin`]: `${geometry.center}px ${geometry.center}px`,\n  [`--_${thumb}-start-angle`]: `${geometry.startAngle}deg`\n});\n\nconst i18nDefaults = {\n  danger: 'danger',\n  information: 'information',\n  success: 'success',\n  warning: 'warning'\n} satisfies I18nDefaults;\n\n/**\n * @element nve-gauge\n * @description Use a gauge to show system resource usage.\n * @documentation https://nvidia.github.io/elements/docs/elements/gauge/\n * @since 2.0.4\n * @entrypoint \\@nvidia-elements/core/gauge\n * @slot - Content to display in the gauge center.\n * @cssprop --track-width\n * @cssprop --accent-color\n * @cssprop --background\n * @cssprop --needle-background\n * @cssprop --track-background\n * @cssprop --thumb-background\n * @cssprop --color\n * @cssprop --width\n * @cssprop --height\n * @cssprop --font-size\n * @cssprop --gap\n * @aria https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/progressbar_role\n * @stable false\n */\nexport class Gauge extends LitElement {\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-gauge',\n    version: '0.0.0'\n  };\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  /** The current `value` of the gauge. */\n  @property({ type: Number }) value = 0;\n\n  /** The `max` value of the gauge that the `value` is proportionally scaled to. */\n  @property({ type: Number }) max? = 100;\n\n  /** Four visual treatments represent the `status` of tasks. */\n  @property({ type: String, reflect: true }) status?: SupportStatus | 'neutral' = 'neutral';\n\n  /** Determines the gauge shape. Set `half` for a compact semi-circular arc. */\n  @property({ type: String, reflect: true }) shape?: 'half';\n\n  /** Controls the value indicator. Set `dot` for only the end dot or `needle` for a pointer. */\n  @property({ type: String, reflect: true }) thumb: 'fill' | 'dot' | 'needle' = 'fill';\n\n  /** T-shirt `size` of the gauge. */\n  @property({ type: String, reflect: true }) size?: Size;\n\n  #i18nController: I18nController<this> = new I18nController<this>(this, i18nDefaults);\n\n  /** Enables updating internal string values for internationalization. */\n  @property({ type: Object }) i18n = this.#i18nController.i18n;\n\n  /** Progress the gauge paints, which eases toward the value instead of jumping to it. */\n  #paintedProgress = 0;\n\n  #progressAnimation?: Animation;\n\n  #progressFrame = 0;\n\n  #normalizedValues() {\n    const sourceMax = this.max;\n    const max = sourceMax !== undefined && Number.isFinite(sourceMax) && sourceMax > 0 ? sourceMax : 100;\n    const value = Number.isFinite(this.value) ? Math.min(Math.max(this.value, 0), max) : 0;\n    return { value, max };\n  }\n\n  render() {\n    const geometry = this.#geometry();\n    const progress = this.#paintedProgress;\n    const thumb = this.#normalizedThumb();\n    const progressAngle = this.#angleAtProgress(geometry, progress);\n    const fillPath = this.#pathAtProgress(geometry, progress);\n    const showFill = thumb === 'fill';\n    const showDot = progress > 0 && (thumb === 'fill' || thumb === 'dot');\n\n    return html`\n      <div internal-host>\n        <svg viewBox=${geometry.viewBox} role=\"presentation\" aria-hidden=\"true\">\n          <defs>\n            <mask id=\"background-mask\" maskUnits=\"userSpaceOnUse\" x=\"0\" y=\"0\" width=\"128\" height=${geometry.surfaceHeight}>\n              <path d=${geometry.path} class=\"background\"></path>\n            </mask>\n            <mask id=\"fill-mask\" maskUnits=\"userSpaceOnUse\" x=\"0\" y=\"0\" width=\"128\" height=${geometry.surfaceHeight}>\n              <path d=${fillPath} class=\"gauge\" ?empty=${progress <= 0}></path>\n            </mask>\n          </defs>\n          <foreignObject width=\"128\" height=${geometry.surfaceHeight} mask=\"url(#background-mask)\">\n            <div xmlns=\"http://www.w3.org/1999/xhtml\" class=\"background-surface\"></div>\n          </foreignObject>\n          <foreignObject class=\"fill-layer\" width=\"128\" height=${geometry.surfaceHeight} mask=\"url(#fill-mask)\"\n            ?hidden=${!showFill || progress <= 0}>\n            <div xmlns=\"http://www.w3.org/1999/xhtml\" class=\"fill-surface\"></div>\n          </foreignObject>\n          <circle class=\"fill-dot-end\" cx=${geometry.center + geometry.radius} cy=${geometry.center}\n            ?hidden=${!showDot}\n            style=${styleMap(thumbStyle('dot', progressAngle, geometry))}>\n          </circle>\n          <g class=\"needle\"\n            ?hidden=${thumb !== 'needle'}\n            style=${styleMap(thumbStyle('needle', progressAngle, geometry))}>\n            <line class=\"needle-line\" x1=${geometry.center} y1=${geometry.center} x2=${geometry.center + 40} y2=${geometry.center}></line>\n            <circle class=\"needle-hub\" cx=${geometry.center} cy=${geometry.center}></circle>\n          </g>\n        </svg>\n        <slot></slot>\n      </div>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    this._internals.role = 'progressbar';\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n\n    // settle the value, otherwise reattaching paints the frame where the animation stopped\n    if (this.#progressAnimation) {\n      this.#stopProgressAnimation();\n      this.#paintedProgress = this.#targetProgress();\n      this.requestUpdate();\n    }\n  }\n\n  willUpdate(props: PropertyValues<this>) {\n    super.willUpdate(props);\n\n    if (props.has('value') || props.has('max')) {\n      this.#animateProgress();\n    }\n  }\n\n  updated(props: PropertyValues<this>) {\n    super.updated(props);\n    const { value, max } = this.#normalizedValues();\n    this._internals.ariaValueNow = `${value}`;\n    this._internals.ariaValueMax = `${max}`;\n    const { status } = this;\n    const statusLabel =\n      status !== undefined && status !== 'neutral' && status !== 'accent' ? this.i18n[status] : undefined;\n    this._internals.ariaLabel = statusLabel ?? this.i18n.information ?? null;\n  }\n\n  #targetProgress() {\n    const { value, max } = this.#normalizedValues();\n    return (value / max) * 100;\n  }\n\n  /**\n   * Eases the painted progress toward the value with the duration and easing declared in css, so\n   * that `prefers-reduced-motion` and a `--_animation-duration` override both settle immediately.\n   */\n  #animateProgress() {\n    const target = this.#targetProgress();\n    const timing = this.hasUpdated ? this.#animationTiming() : undefined;\n\n    this.#stopProgressAnimation();\n\n    if (!timing || target === this.#paintedProgress) {\n      this.#paintedProgress = target;\n      return;\n    }\n\n    const from = this.#paintedProgress;\n    // keyframeless animations only keep time, leaving every painted frame to `render`\n    const animation = this.animate(null, timing);\n    const paint = (progress: number) => {\n      this.#paintedProgress = from + (target - from) * progress;\n      this.requestUpdate();\n    };\n    const paintFrame = () => {\n      paint(animation.effect?.getComputedTiming().progress ?? 0);\n\n      if (animation.playState === 'running') {\n        this.#progressFrame = requestAnimationFrame(paintFrame);\n      }\n    };\n\n    animation.finished.then(\n      () => {\n        // a value that changes on the frame this settles already started the next animation\n        if (this.#progressAnimation === animation) {\n          this.#stopProgressAnimation();\n          paint(1);\n        }\n      },\n      () => undefined\n    );\n\n    this.#progressAnimation = animation;\n    this.#progressFrame = requestAnimationFrame(paintFrame);\n  }\n\n  #stopProgressAnimation() {\n    // only a browser render starts an animation, so server rendering never reaches these apis\n    if (this.#progressAnimation) {\n      cancelAnimationFrame(this.#progressFrame);\n      this.#progressAnimation.cancel();\n      this.#progressAnimation = undefined;\n    }\n  }\n\n  #animationTiming() {\n    const gaugeStyles = getComputedStyle(this);\n    const duration = gaugeStyles.getPropertyValue('--_animation-duration').trim();\n    const milliseconds = parseFloat(duration) * (duration.endsWith('ms') ? 1 : 1000);\n    const easing = gaugeStyles.getPropertyValue('--nve-ref-animation-easing-100').trim();\n\n    return milliseconds > 0 ? { duration: milliseconds, easing: easing || 'linear' } : undefined;\n  }\n\n  #angleAtProgress(geometry: GaugeGeometry, progress: number) {\n    return geometry.startAngle + geometry.sweepAngle * (progress / 100);\n  }\n\n  #pathAtProgress(geometry: GaugeGeometry, progress: number) {\n    const start = this.#pointAtAngle(geometry, geometry.startAngle);\n    const sweepAngle = geometry.sweepAngle * (progress / 100);\n    const end = this.#pointAtAngle(geometry, geometry.startAngle + sweepAngle);\n    const largeArcFlag = sweepAngle > 180 ? 1 : 0;\n    return `M ${start.x} ${start.y} A ${geometry.radius} ${geometry.radius} 0 ${largeArcFlag} 1 ${end.x} ${end.y}`;\n  }\n\n  #pointAtAngle(geometry: GaugeGeometry, angle: number) {\n    const radians = (angle * Math.PI) / 180;\n    return {\n      x: geometry.center + geometry.radius * Math.cos(radians),\n      y: geometry.center + geometry.radius * Math.sin(radians)\n    };\n  }\n\n  #geometry() {\n    return this.shape === 'half' ? GAUGE_GEOMETRY.half : GAUGE_GEOMETRY.default;\n  }\n\n  #normalizedThumb() {\n    return this.thumb === 'dot' || this.thumb === 'needle' ? this.thumb : 'fill';\n  }\n}\n"],"mappings":"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"}

package/dist/grid/cell/cell2.js

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

package/dist/grid/column/column2.js

@@ -13,7 +13,7 @@ var c = class r extends a {
 	static {
 		this.metadata = {
 			tag: "nve-grid-column",
-			version: "2.19.0"
+			version: "2.20.0"
 		};
 	}
 	get #e() {

package/dist/grid/footer/footer2.js

@@ -15,7 +15,7 @@ var s = class extends a {
 	static {
 		this.metadata = {
 			tag: "nve-grid-footer",
-			version: "2.19.0"
+			version: "2.20.0"
 		};
 	}
 	static {

package/dist/grid/grid2.js

@@ -23,7 +23,7 @@ var y = class extends g {
 	static {
 		this.metadata = {
 			tag: "nve-grid",
-			version: "2.19.0",
+			version: "2.20.0",
 			children: [
 				d.metadata.tag,
 				f.metadata.tag,

package/dist/grid/header/header2.js

@@ -19,7 +19,7 @@ var m = class extends d {
 	static {
 		this.metadata = {
 			tag: "nve-grid-header",
-			version: "2.19.0",
+			version: "2.20.0",
 			children: [s.metadata.tag]
 		};
 	}

package/dist/grid/placeholder/placeholder2.js

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

package/dist/grid/row/row2.js

@@ -15,7 +15,7 @@ var u = class extends s {
 	static {
 		this.metadata = {
 			tag: "nve-grid-row",
-			version: "2.19.0",
+			version: "2.20.0",
 			children: [a.metadata.tag]
 		};
 	}

package/dist/icon/icon2.js

@@ -16,7 +16,7 @@ var f = class n extends o {
 	static {
 		this.metadata = {
 			tag: "nve-icon",
-			version: "2.19.0"
+			version: "2.20.0"
 		};
 	}
 	static {
@@ -103,7 +103,7 @@ a([l({
 })], f.prototype, "name", void 0), a([d()], f.prototype, "svg", void 0);
 function p(e) {
 	if (typeof globalThis.customElements?.get == "function") {
-		let t = n(e.metadata.version), i = n("2.19.0");
+		let t = n(e.metadata.version), i = n("2.20.0");
 		t.minor <= i.minor && t.major <= i.major && (e._icons = {
 			...e._icons,
 			...r

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

@@ -15,7 +15,7 @@ var l = class extends a {
 	static {
 		this.metadata = {
 			tag: "nve-icon-button",
-			version: "2.19.0"
+			version: "2.20.0"
 		};
 	}
 	static {

package/dist/iframe/iframe2.js

@@ -61,7 +61,7 @@ var a = (e) => `
 	static {
 		this.metadata = {
 			tag: "nve-iframe",
-			version: "2.19.0"
+			version: "2.20.0"
 		};
 	}
 	static get observedAttributes() {

package/dist/index.js

@@ -1,9 +1,8 @@
-import { I18nService as e } from "./internal/services/i18n.service.js";
-import { getThemeTokens as t } from "./internal/utils/dom.js";
-import { statusIcons as n } from "./internal/types/index.js";
+import { getThemeTokens as e } from "./internal/utils/dom.js";
+import { statusIcons as t } from "./internal/types/index.js";
+import { internal_exports as n } from "./internal/index.js";
 //#region src/index.ts
-var r = "2.19.0", i = "@nvidia-elements";
-//#endregion
-export { e as I18nService, i as SCOPE, r as VERSION, t as getThemeTokens, n as statusIcons };
+var r = "2.20.0", i = "@nvidia-elements", a = n.I18nService;
+export { a as I18nService, i as SCOPE, r as VERSION, e as getThemeTokens, t as statusIcons };
 
 //# sourceMappingURL=index.js.map

package/dist/input/input-group2.js

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

package/dist/input/input2.js

@@ -14,7 +14,7 @@ var a = r, o = class extends n {
 	static {
 		this.metadata = {
 			tag: "nve-input",
-			version: "2.19.0"
+			version: "2.20.0"
 		};
 	}
 };

package/dist/internal/index.d.ts

@@ -3,7 +3,6 @@
  */
 export * from './controllers/audit.controller.js';
 export * from './controllers/gesture.controller.js';
-export * from './controllers/i18n.controller.js';
 export * from './controllers/key-state.controller.js';
 export * from './controllers/keynav-grid.controller.js';
 export * from './controllers/keynav-list.controller.js';
@@ -22,7 +21,7 @@ export * from './decorators/host-attr.js';
 export * from './decorators/scoped-registry.js';
 export * from './styles/index.js';
 export * from './styles/popover.js';
-export * from './services/i18n.service.js';
+export * from '@nvidia-elements/foundations/internal/i18n';
 export * from './services/log.service.js';
 export * from './services/transition.service.js';
 export * from './types/index.js';