@nvidia-elements/core 2.1.0 → 2.1.1

package/dist/dropzone/dropzone2.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropzone2.js","names":["#i18nController","#preventDefaults","#toggleHighlighted","#addFiles","#handleClick","#handleDragEnter","#handleDragOver","#handleDragLeave","#handleDrop","#removeEmptyNodes","#formatFileTypeSpecifiers","#handleFileInputChange"],"sources":["../../src/dropzone/dropzone.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { query } from 'lit/decorators/query.js';\nimport {\n  formatFileSize,\n  useStyles,\n  removeEmptyTextNode,\n  I18nController,\n  scopedRegistry\n} from '@nvidia-elements/core/internal';\nimport { Icon } from '@nvidia-elements/core/icon';\nimport styles from './dropzone.css?inline';\nimport { FormControlMixin } from '@nvidia-elements/forms/mixins';\nimport { fileTypeValidator, fileSizeValidator, getFileTypeSpecifiers } from './dropzone.util';\n\n/**\n * @element nve-dropzone\n * @description A dropzone form control that enables users to drag and drop files onto it.\n * @since 1.29.0\n * @entrypoint \\@nvidia-elements/core/dropzone\n * @event change - Dispatched when the value has changed (files located in event.target)\n * @slot - use only when custom messaging requires it\n * @cssprop --background\n * @cssprop --border-color\n * @cssprop --border-radius\n * @cssprop --padding\n * @cssprop --min-height\n * @cssprop --color\n * @slot icon - default slot for icon\n * @slot content - default slot for content\n * @csspart icon - The upload icon element\n * @aria https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file\n */\n@scopedRegistry()\nexport class Dropzone extends FormControlMixin<typeof LitElement, File[]>(LitElement) {\n  @property()\n  accept: string = `image/gif, image/jpeg, image/png, image/svg+xml`;\n\n  @property({ attribute: 'max-file-size', type: Number })\n  maxFileSize: number = 2 * 1024 ** 2;\n\n  #i18nController: I18nController<this> = new I18nController<this>(this);\n\n  /**\n   * Enables internal string values to update for internationalization.\n   */\n  @property({ type: Object }) i18n = this.#i18nController.i18n;\n\n  @query('#dropzone-input')\n  private fileInput: HTMLInputElement;\n\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-dropzone',\n    version: '0.0.0',\n    validators: [fileTypeValidator, fileSizeValidator],\n    valueSchema: {\n      type: 'array' as const,\n      items: {\n        type: 'object' as const,\n        properties: {\n          name: { type: 'string' as const },\n          size: { type: 'number' as const },\n          type: { type: 'string' as const }\n        }\n      }\n    }\n  };\n\n  static elementDefinitions = {\n    [Icon.metadata.tag]: Icon\n  };\n\n  formResetCallback() {\n    this.value = [];\n    this.requestUpdate();\n  }\n\n  constructor() {\n    super();\n    this.value = [];\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.setAttribute('nve-control', '');\n    globalThis.document.addEventListener('dragover', this.#preventDefaults);\n    globalThis.document.addEventListener('drop', this.#preventDefaults);\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    globalThis.document.removeEventListener('dragover', this.#preventDefaults);\n    globalThis.document.removeEventListener('drop', this.#preventDefaults);\n  }\n\n  #preventDefaults(event: Event) {\n    event.preventDefault();\n    event.stopPropagation();\n  }\n\n  #handleClick() {\n    this.fileInput.click();\n  }\n\n  #handleDragEnter(event: DragEvent) {\n    this.#preventDefaults(event);\n    this.#toggleHighlighted(true);\n  }\n\n  #handleDragOver(event: DragEvent) {\n    this.#preventDefaults(event);\n    this.#toggleHighlighted(true);\n  }\n\n  #handleDragLeave(event: DragEvent) {\n    this.#preventDefaults(event);\n    this.#toggleHighlighted(false);\n  }\n\n  #handleDrop(event: DragEvent) {\n    this.#preventDefaults(event);\n    this.#toggleHighlighted(false);\n\n    const files = Array.from(event.dataTransfer!.files);\n    this.#addFiles(files);\n  }\n\n  #handleFileInputChange(event: Event) {\n    this.#preventDefaults(event);\n\n    const files = Array.from(this.fileInput.files!);\n    this.#addFiles(files);\n\n    this.fileInput.value = '';\n  }\n\n  #addFiles(files: File[]) {\n    this.value = [...(this.value ?? []), ...files];\n    this.dispatchChangeEvent();\n  }\n\n  #formatFileTypeSpecifiers(acceptTypes: string) {\n    const types = getFileTypeSpecifiers(acceptTypes);\n\n    if (types.length === 1) {\n      return types[0]!.toUpperCase();\n    }\n\n    const lastType = types.pop();\n    return `${types.join(', ').toUpperCase()} or ${lastType!.toUpperCase()}`;\n  }\n\n  #toggleHighlighted(highlighted: boolean) {\n    this.toggleAttribute('highlighted', highlighted);\n  }\n\n  #removeEmptyNodes(e: Event) {\n    (e.target as HTMLSlotElement).assignedNodes().forEach((node: Node) => removeEmptyTextNode(node));\n  }\n\n  render() {\n    return html`<div internal-host>\n      <div class=\"container\"\n        @click=${this.#handleClick} \n        @dragenter=${this.#handleDragEnter}\n        @dragover=${this.#handleDragOver}\n        @dragleave=${this.#handleDragLeave}\n        @drop=${this.#handleDrop}>\n        <svg class=\"border\" width=\"100%\" height=\"100%\" xmlns=\"http://www.w3.org/2000/svg\">\n          <rect width=\"100%\" height=\"100%\" fill=\"none\" rx=\"4\" ry=\"4\" stroke=\"currentColor\" stroke-width=\"2\" stroke-dasharray=\"6,6\" stroke-dashoffset=\"0\" stroke-linecap=\"square\" />\n        </svg>\n        <slot name=\"icon\"><nve-icon part=\"icon\" class=\"icon\" name=\"upload\"></nve-icon></slot>\n        <slot @slotchange=${this.#removeEmptyNodes}>\n          <div class=\"text-center\">\n            <div class=\"text-bold\">${this.i18n.dragAndDrop} ${this.i18n.files} ${this.i18n.or} <span class=\"text-emphasized\">${this.i18n.browseFiles}</span></div>\n            <div class=\"text-muted\">${this.#formatFileTypeSpecifiers(this.accept)} &mdash; ${this.i18n.maxFileSize} ${formatFileSize(this.maxFileSize)}</div>\n          </div>\n        </slot>\n        <input id=\"dropzone-input\" type=\"file\" accept=${this.accept} @change=${this.#handleFileInputChange} multiple hidden></input>\n      </div>\n    </div>`;\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"dropzone2.js","names":["#i18nController","#preventDefaults","#toggleHighlighted","#addFiles","#handleClick","#handleDragEnter","#handleDragOver","#handleDragLeave","#handleDrop","#removeEmptyNodes","#formatFileTypeSpecifiers","#handleFileInputChange"],"sources":["../../src/dropzone/dropzone.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { query } from 'lit/decorators/query.js';\nimport {\n  formatFileSize,\n  useStyles,\n  removeEmptyTextNode,\n  I18nController,\n  scopedRegistry\n} from '@nvidia-elements/core/internal';\nimport { Icon } from '@nvidia-elements/core/icon';\nimport styles from './dropzone.css?inline';\nimport { FormControlMixin } from '@nvidia-elements/forms/mixins';\nimport { fileTypeValidator, fileSizeValidator, getFileTypeSpecifiers } from './dropzone.util';\n\n/**\n * @element nve-dropzone\n * @description A dropzone form control that enables users to drag and drop files onto it.\n * @documentation https://nvidia.github.io/elements/docs/elements/dropzone/\n * @since 1.29.0\n * @entrypoint \\@nvidia-elements/core/dropzone\n * @event change - Dispatched when the value has changed (files located in event.target)\n * @slot - use only when custom messaging requires it\n * @cssprop --background\n * @cssprop --border-color\n * @cssprop --border-radius\n * @cssprop --padding\n * @cssprop --min-height\n * @cssprop --color\n * @slot icon - default slot for icon\n * @slot content - default slot for content\n * @csspart icon - The upload icon element\n * @aria https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file\n */\n@scopedRegistry()\nexport class Dropzone extends FormControlMixin<typeof LitElement, File[]>(LitElement) {\n  @property()\n  accept: string = `image/gif, image/jpeg, image/png, image/svg+xml`;\n\n  @property({ attribute: 'max-file-size', type: Number })\n  maxFileSize: number = 2 * 1024 ** 2;\n\n  #i18nController: I18nController<this> = new I18nController<this>(this);\n\n  /**\n   * Enables internal string values to update for internationalization.\n   */\n  @property({ type: Object }) i18n = this.#i18nController.i18n;\n\n  @query('#dropzone-input')\n  private fileInput: HTMLInputElement;\n\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-dropzone',\n    version: '0.0.0',\n    validators: [fileTypeValidator, fileSizeValidator],\n    valueSchema: {\n      type: 'array' as const,\n      items: {\n        type: 'object' as const,\n        properties: {\n          name: { type: 'string' as const },\n          size: { type: 'number' as const },\n          type: { type: 'string' as const }\n        }\n      }\n    }\n  };\n\n  static elementDefinitions = {\n    [Icon.metadata.tag]: Icon\n  };\n\n  formResetCallback() {\n    this.value = [];\n    this.requestUpdate();\n  }\n\n  constructor() {\n    super();\n    this.value = [];\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.setAttribute('nve-control', '');\n    globalThis.document.addEventListener('dragover', this.#preventDefaults);\n    globalThis.document.addEventListener('drop', this.#preventDefaults);\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    globalThis.document.removeEventListener('dragover', this.#preventDefaults);\n    globalThis.document.removeEventListener('drop', this.#preventDefaults);\n  }\n\n  #preventDefaults(event: Event) {\n    event.preventDefault();\n    event.stopPropagation();\n  }\n\n  #handleClick() {\n    this.fileInput.click();\n  }\n\n  #handleDragEnter(event: DragEvent) {\n    this.#preventDefaults(event);\n    this.#toggleHighlighted(true);\n  }\n\n  #handleDragOver(event: DragEvent) {\n    this.#preventDefaults(event);\n    this.#toggleHighlighted(true);\n  }\n\n  #handleDragLeave(event: DragEvent) {\n    this.#preventDefaults(event);\n    this.#toggleHighlighted(false);\n  }\n\n  #handleDrop(event: DragEvent) {\n    this.#preventDefaults(event);\n    this.#toggleHighlighted(false);\n\n    const files = Array.from(event.dataTransfer!.files);\n    this.#addFiles(files);\n  }\n\n  #handleFileInputChange(event: Event) {\n    this.#preventDefaults(event);\n\n    const files = Array.from(this.fileInput.files!);\n    this.#addFiles(files);\n\n    this.fileInput.value = '';\n  }\n\n  #addFiles(files: File[]) {\n    this.value = [...(this.value ?? []), ...files];\n    this.dispatchChangeEvent();\n  }\n\n  #formatFileTypeSpecifiers(acceptTypes: string) {\n    const types = getFileTypeSpecifiers(acceptTypes);\n\n    if (types.length === 1) {\n      return types[0]!.toUpperCase();\n    }\n\n    const lastType = types.pop();\n    return `${types.join(', ').toUpperCase()} or ${lastType!.toUpperCase()}`;\n  }\n\n  #toggleHighlighted(highlighted: boolean) {\n    this.toggleAttribute('highlighted', highlighted);\n  }\n\n  #removeEmptyNodes(e: Event) {\n    (e.target as HTMLSlotElement).assignedNodes().forEach((node: Node) => removeEmptyTextNode(node));\n  }\n\n  render() {\n    return html`<div internal-host>\n      <div class=\"container\"\n        @click=${this.#handleClick} \n        @dragenter=${this.#handleDragEnter}\n        @dragover=${this.#handleDragOver}\n        @dragleave=${this.#handleDragLeave}\n        @drop=${this.#handleDrop}>\n        <svg class=\"border\" width=\"100%\" height=\"100%\" xmlns=\"http://www.w3.org/2000/svg\">\n          <rect width=\"100%\" height=\"100%\" fill=\"none\" rx=\"4\" ry=\"4\" stroke=\"currentColor\" stroke-width=\"2\" stroke-dasharray=\"6,6\" stroke-dashoffset=\"0\" stroke-linecap=\"square\" />\n        </svg>\n        <slot name=\"icon\"><nve-icon part=\"icon\" class=\"icon\" name=\"upload\"></nve-icon></slot>\n        <slot @slotchange=${this.#removeEmptyNodes}>\n          <div class=\"text-center\">\n            <div class=\"text-bold\">${this.i18n.dragAndDrop} ${this.i18n.files} ${this.i18n.or} <span class=\"text-emphasized\">${this.i18n.browseFiles}</span></div>\n            <div class=\"text-muted\">${this.#formatFileTypeSpecifiers(this.accept)} &mdash; ${this.i18n.maxFileSize} ${formatFileSize(this.maxFileSize)}</div>\n          </div>\n        </slot>\n        <input id=\"dropzone-input\" type=\"file\" accept=${this.accept} @change=${this.#handleFileInputChange} multiple hidden></input>\n      </div>\n    </div>`;\n  }\n}\n"],"mappings":"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"}

package/dist/file/file.d.ts

@@ -3,6 +3,7 @@ import { Control } from '@nvidia-elements/core/forms';
 /**
  * @element nve-file
  * @description A file picker is a control that enables users to choose a file value.
+ * @documentation https://nvidia.github.io/elements/docs/elements/file/
  * @since 0.3.0
  * @entrypoint \@nvidia-elements/core/file
  * @cssprop --background

package/dist/file/file2.js

@@ -11,7 +11,7 @@ var a = class extends n {
 	static {
 		this.metadata = {
 			tag: "nve-file",
-			version: "2.1.0"
+			version: "2.1.1"
 		};
 	}
 	connectedCallback() {

package/dist/file/file2.js.map

@@ -1 +1 @@
-{"version":3,"file":"file2.js","names":[],"sources":["../../src/file/file.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { CSSResult } from 'lit';\nimport { appendRootNodeStyle, useStyles } from '@nvidia-elements/core/internal';\nimport { Control } from '@nvidia-elements/core/forms';\nimport styles from './file.css?inline';\nimport globalStyles from './file.global.css?inline';\n\n/**\n * @element nve-file\n * @description A file picker is a control that enables users to choose a file value.\n * @since 0.3.0\n * @entrypoint \\@nvidia-elements/core/file\n * @cssprop --background\n * @cssprop --padding\n * @cssprop --border-radius\n * @cssprop --border\n * @cssprop --font-weight\n * @cssprop --font-size\n * @cssprop --text-decoration\n * @cssprop --cursor\n * @cssprop --gap\n * @cssprop --height\n * @aria https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file\n */\nexport class File extends Control {\n  static styles: CSSResult[] = useStyles([...Control.styles, styles]);\n\n  static readonly metadata = {\n    tag: 'nve-file',\n    version: '0.0.0'\n  };\n\n  connectedCallback() {\n    super.connectedCallback();\n    appendRootNodeStyle(this, globalStyles);\n  }\n}\n"],"mappings":";;;;;;AA0BA,IAAa,IAAb,cAA0B,EAAQ;;gBACH,EAAU,CAAC,GAAG,EAAQ,QAAQ,CAAM,CAAC;;;kBAEvC;GACzB,KAAK;GACL,SAAS;EACX;;CAEA,oBAAoB;EAElB,AADA,MAAM,kBAAkB,GACxB,EAAoB,MAAM,CAAY;CACxC;AACF"}
+{"version":3,"file":"file2.js","names":[],"sources":["../../src/file/file.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { CSSResult } from 'lit';\nimport { appendRootNodeStyle, useStyles } from '@nvidia-elements/core/internal';\nimport { Control } from '@nvidia-elements/core/forms';\nimport styles from './file.css?inline';\nimport globalStyles from './file.global.css?inline';\n\n/**\n * @element nve-file\n * @description A file picker is a control that enables users to choose a file value.\n * @documentation https://nvidia.github.io/elements/docs/elements/file/\n * @since 0.3.0\n * @entrypoint \\@nvidia-elements/core/file\n * @cssprop --background\n * @cssprop --padding\n * @cssprop --border-radius\n * @cssprop --border\n * @cssprop --font-weight\n * @cssprop --font-size\n * @cssprop --text-decoration\n * @cssprop --cursor\n * @cssprop --gap\n * @cssprop --height\n * @aria https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file\n */\nexport class File extends Control {\n  static styles: CSSResult[] = useStyles([...Control.styles, styles]);\n\n  static readonly metadata = {\n    tag: 'nve-file',\n    version: '0.0.0'\n  };\n\n  connectedCallback() {\n    super.connectedCallback();\n    appendRootNodeStyle(this, globalStyles);\n  }\n}\n"],"mappings":";;;;;;AA2BA,IAAa,IAAb,cAA0B,EAAQ;;gBACH,EAAU,CAAC,GAAG,EAAQ,QAAQ,CAAM,CAAC;;;kBAEvC;GACzB,KAAK;GACL,SAAS;EACX;;CAEA,oBAAoB;EAElB,AADA,MAAM,kBAAkB,GACxB,EAAoB,MAAM,CAAY;CACxC;AACF"}

package/dist/format-datetime/format-datetime.d.ts

@@ -3,6 +3,7 @@ import { LitElement } from 'lit';
  * @element nve-format-datetime
  * @description Formats a date/time value as localized text using the Intl.DateTimeFormat API. Renders inside a semantic time element.
  * Granular options (weekday, year, month, day, hour, minute, second) mirror the Intl.DateTimeFormat API. 'numeric' omits zero-padding, '2-digit' zero-pads.
+ * @documentation https://nvidia.github.io/elements/docs/elements/format-datetime/
  * @since 0.0.0
  * @entrypoint \@nvidia-elements/core/format-datetime
  * @slot - Date string to format (such as 2023-07-28T04:20:17.434Z). Serves as fallback before hydration.

package/dist/format-datetime/format-datetime2.js

@@ -13,7 +13,7 @@ var c = class extends a {
 	static {
 		this.metadata = {
 			tag: "nve-format-datetime",
-			version: "2.1.0"
+			version: "2.1.1"
 		};
 	}
 	get #e() {

package/dist/format-datetime/format-datetime2.js.map

@@ -1 +1 @@
-{"version":3,"file":"format-datetime2.js","names":["#dateValue","#resolvedLocale","#formattedDate","#parseDate","#formatOptions","#hasPresetStyle","#presetFormatOptions","#granularFormatOptions","#onSlotChange"],"sources":["../../src/format-datetime/format-datetime.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { useStyles, typeSSR, LogService } from '@nvidia-elements/core/internal';\nimport styles from './format-datetime.css?inline';\n\n/**\n * @element nve-format-datetime\n * @description Formats a date/time value as localized text using the Intl.DateTimeFormat API. Renders inside a semantic time element.\n * Granular options (weekday, year, month, day, hour, minute, second) mirror the Intl.DateTimeFormat API. 'numeric' omits zero-padding, '2-digit' zero-pads.\n * @since 0.0.0\n * @entrypoint \\@nvidia-elements/core/format-datetime\n * @slot - Date string to format (such as 2023-07-28T04:20:17.434Z). Serves as fallback before hydration.\n * @aria https://developer.mozilla.org/en-US/docs/Web/HTML/Element/time\n */\n@typeSSR()\nexport class FormatDatetime extends LitElement {\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-format-datetime',\n    version: '0.0.0'\n  };\n\n  /**\n   * Optional date string for values supplied by JavaScript or bound data.\n   * By default, the component formats the element's text content, which also serves as the SSR fallback.\n   * When both are present, this property takes precedence.\n   */\n  @property({ type: String }) date?: string;\n\n  /**\n   * Language tag (such as en-US, de-DE). Defaults to document.documentElement.lang or browser default.\n   */\n  @property({ type: String }) locale?: string;\n\n  /**\n   * Weekday representation: 'long' | 'short' | 'narrow'.\n   */\n  @property({ type: String }) weekday?: 'long' | 'short' | 'narrow';\n\n  /**\n   * Year representation: 'numeric' | '2-digit'.\n   */\n  @property({ type: String }) year?: 'numeric' | '2-digit';\n\n  /**\n   * Month representation: 'numeric' | '2-digit' | 'long' | 'short' | 'narrow'.\n   */\n  @property({ type: String }) month?: 'numeric' | '2-digit' | 'long' | 'short' | 'narrow';\n\n  /**\n   * Day representation: 'numeric' | '2-digit'.\n   */\n  @property({ type: String }) day?: 'numeric' | '2-digit';\n\n  /**\n   * Hour representation: 'numeric' | '2-digit'.\n   */\n  @property({ type: String }) hour?: 'numeric' | '2-digit';\n\n  /**\n   * Minute representation: 'numeric' | '2-digit'.\n   */\n  @property({ type: String }) minute?: 'numeric' | '2-digit';\n\n  /**\n   * Second representation: 'numeric' | '2-digit'.\n   */\n  @property({ type: String }) second?: 'numeric' | '2-digit';\n\n  /**\n   * Preset date formatting style: 'full' | 'long' | 'medium' | 'short'.\n   * Preset styles take precedence over granular date and time part options.\n   */\n  @property({ type: String, attribute: 'date-style' }) dateStyle?: 'full' | 'long' | 'medium' | 'short';\n\n  /**\n   * Preset time formatting style: 'full' | 'long' | 'medium' | 'short'.\n   * Preset styles take precedence over granular date and time part options.\n   */\n  @property({ type: String, attribute: 'time-style' }) timeStyle?: 'full' | 'long' | 'medium' | 'short';\n\n  /**\n   * Time zone name display: 'long' | 'short'. Use it with granular options only; preset styles ignore it.\n   */\n  @property({ type: String, attribute: 'time-zone-name' }) timeZoneName?: 'long' | 'short';\n\n  /**\n   * IANA time zone identifier (such as 'America/New_York', 'UTC').\n   */\n  @property({ type: String, attribute: 'time-zone' }) timeZone?: string;\n\n  get #dateValue(): string {\n    return this.date ?? this.textContent?.trim() ?? '';\n  }\n\n  get #resolvedLocale(): string | undefined {\n    return this.locale ?? (globalThis.document?.documentElement?.lang || undefined);\n  }\n\n  get #formattedDate(): string {\n    const iso = this.#dateValue;\n    if (!iso) return '';\n\n    const date = this.#parseDate(iso);\n    if (!date) return iso;\n\n    try {\n      return new Intl.DateTimeFormat(this.#resolvedLocale, this.#formatOptions).format(date);\n    } catch (e) {\n      LogService.warn(`format-datetime: ${(e as Error).message}`);\n      return iso;\n    }\n  }\n\n  get #formatOptions(): Intl.DateTimeFormatOptions {\n    return this.#hasPresetStyle ? this.#presetFormatOptions : this.#granularFormatOptions;\n  }\n\n  get #hasPresetStyle(): boolean {\n    return this.dateStyle !== undefined || this.timeStyle !== undefined;\n  }\n\n  get #presetFormatOptions(): Intl.DateTimeFormatOptions {\n    const options: Intl.DateTimeFormatOptions = {};\n\n    if (this.dateStyle) options.dateStyle = this.dateStyle;\n    if (this.timeStyle) options.timeStyle = this.timeStyle;\n    if (this.timeZone) options.timeZone = this.timeZone;\n\n    return options;\n  }\n\n  get #granularFormatOptions(): Intl.DateTimeFormatOptions {\n    const options: Intl.DateTimeFormatOptions = {};\n\n    if (this.weekday) options.weekday = this.weekday;\n    if (this.year) options.year = this.year;\n    if (this.month) options.month = this.month;\n    if (this.day) options.day = this.day;\n    if (this.hour) options.hour = this.hour;\n    if (this.minute) options.minute = this.minute;\n    if (this.second) options.second = this.second;\n    if (this.timeZoneName) options.timeZoneName = this.timeZoneName;\n    if (this.timeZone) options.timeZone = this.timeZone;\n\n    return options;\n  }\n\n  #parseDate(iso: string): Date | null {\n    const date = new Date(iso);\n    if (!isNaN(date.getTime())) return date;\n\n    LogService.warn(`format-datetime: invalid date value \"${iso}\"`);\n    return null;\n  }\n\n  render() {\n    return html`<time internal-host datetime=${this.#dateValue}>${this.#formattedDate}<slot @slotchange=${this.#onSlotChange} hidden></slot></time>`;\n  }\n\n  #onSlotChange() {\n    this.requestUpdate();\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"format-datetime2.js","names":["#dateValue","#resolvedLocale","#formattedDate","#parseDate","#formatOptions","#hasPresetStyle","#presetFormatOptions","#granularFormatOptions","#onSlotChange"],"sources":["../../src/format-datetime/format-datetime.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { useStyles, typeSSR, LogService } from '@nvidia-elements/core/internal';\nimport styles from './format-datetime.css?inline';\n\n/**\n * @element nve-format-datetime\n * @description Formats a date/time value as localized text using the Intl.DateTimeFormat API. Renders inside a semantic time element.\n * Granular options (weekday, year, month, day, hour, minute, second) mirror the Intl.DateTimeFormat API. 'numeric' omits zero-padding, '2-digit' zero-pads.\n * @documentation https://nvidia.github.io/elements/docs/elements/format-datetime/\n * @since 0.0.0\n * @entrypoint \\@nvidia-elements/core/format-datetime\n * @slot - Date string to format (such as 2023-07-28T04:20:17.434Z). Serves as fallback before hydration.\n * @aria https://developer.mozilla.org/en-US/docs/Web/HTML/Element/time\n */\n@typeSSR()\nexport class FormatDatetime extends LitElement {\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-format-datetime',\n    version: '0.0.0'\n  };\n\n  /**\n   * Optional date string for values supplied by JavaScript or bound data.\n   * By default, the component formats the element's text content, which also serves as the SSR fallback.\n   * When both are present, this property takes precedence.\n   */\n  @property({ type: String }) date?: string;\n\n  /**\n   * Language tag (such as en-US, de-DE). Defaults to document.documentElement.lang or browser default.\n   */\n  @property({ type: String }) locale?: string;\n\n  /**\n   * Weekday representation: 'long' | 'short' | 'narrow'.\n   */\n  @property({ type: String }) weekday?: 'long' | 'short' | 'narrow';\n\n  /**\n   * Year representation: 'numeric' | '2-digit'.\n   */\n  @property({ type: String }) year?: 'numeric' | '2-digit';\n\n  /**\n   * Month representation: 'numeric' | '2-digit' | 'long' | 'short' | 'narrow'.\n   */\n  @property({ type: String }) month?: 'numeric' | '2-digit' | 'long' | 'short' | 'narrow';\n\n  /**\n   * Day representation: 'numeric' | '2-digit'.\n   */\n  @property({ type: String }) day?: 'numeric' | '2-digit';\n\n  /**\n   * Hour representation: 'numeric' | '2-digit'.\n   */\n  @property({ type: String }) hour?: 'numeric' | '2-digit';\n\n  /**\n   * Minute representation: 'numeric' | '2-digit'.\n   */\n  @property({ type: String }) minute?: 'numeric' | '2-digit';\n\n  /**\n   * Second representation: 'numeric' | '2-digit'.\n   */\n  @property({ type: String }) second?: 'numeric' | '2-digit';\n\n  /**\n   * Preset date formatting style: 'full' | 'long' | 'medium' | 'short'.\n   * Preset styles take precedence over granular date and time part options.\n   */\n  @property({ type: String, attribute: 'date-style' }) dateStyle?: 'full' | 'long' | 'medium' | 'short';\n\n  /**\n   * Preset time formatting style: 'full' | 'long' | 'medium' | 'short'.\n   * Preset styles take precedence over granular date and time part options.\n   */\n  @property({ type: String, attribute: 'time-style' }) timeStyle?: 'full' | 'long' | 'medium' | 'short';\n\n  /**\n   * Time zone name display: 'long' | 'short'. Use it with granular options only; preset styles ignore it.\n   */\n  @property({ type: String, attribute: 'time-zone-name' }) timeZoneName?: 'long' | 'short';\n\n  /**\n   * IANA time zone identifier (such as 'America/New_York', 'UTC').\n   */\n  @property({ type: String, attribute: 'time-zone' }) timeZone?: string;\n\n  get #dateValue(): string {\n    return this.date ?? this.textContent?.trim() ?? '';\n  }\n\n  get #resolvedLocale(): string | undefined {\n    return this.locale ?? (globalThis.document?.documentElement?.lang || undefined);\n  }\n\n  get #formattedDate(): string {\n    const iso = this.#dateValue;\n    if (!iso) return '';\n\n    const date = this.#parseDate(iso);\n    if (!date) return iso;\n\n    try {\n      return new Intl.DateTimeFormat(this.#resolvedLocale, this.#formatOptions).format(date);\n    } catch (e) {\n      LogService.warn(`format-datetime: ${(e as Error).message}`);\n      return iso;\n    }\n  }\n\n  get #formatOptions(): Intl.DateTimeFormatOptions {\n    return this.#hasPresetStyle ? this.#presetFormatOptions : this.#granularFormatOptions;\n  }\n\n  get #hasPresetStyle(): boolean {\n    return this.dateStyle !== undefined || this.timeStyle !== undefined;\n  }\n\n  get #presetFormatOptions(): Intl.DateTimeFormatOptions {\n    const options: Intl.DateTimeFormatOptions = {};\n\n    if (this.dateStyle) options.dateStyle = this.dateStyle;\n    if (this.timeStyle) options.timeStyle = this.timeStyle;\n    if (this.timeZone) options.timeZone = this.timeZone;\n\n    return options;\n  }\n\n  get #granularFormatOptions(): Intl.DateTimeFormatOptions {\n    const options: Intl.DateTimeFormatOptions = {};\n\n    if (this.weekday) options.weekday = this.weekday;\n    if (this.year) options.year = this.year;\n    if (this.month) options.month = this.month;\n    if (this.day) options.day = this.day;\n    if (this.hour) options.hour = this.hour;\n    if (this.minute) options.minute = this.minute;\n    if (this.second) options.second = this.second;\n    if (this.timeZoneName) options.timeZoneName = this.timeZoneName;\n    if (this.timeZone) options.timeZone = this.timeZone;\n\n    return options;\n  }\n\n  #parseDate(iso: string): Date | null {\n    const date = new Date(iso);\n    if (!isNaN(date.getTime())) return date;\n\n    LogService.warn(`format-datetime: invalid date value \"${iso}\"`);\n    return null;\n  }\n\n  render() {\n    return html`<time internal-host datetime=${this.#dateValue}>${this.#formattedDate}<slot @slotchange=${this.#onSlotChange} hidden></slot></time>`;\n  }\n\n  #onSlotChange() {\n    this.requestUpdate();\n  }\n}\n"],"mappings":"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"}

package/dist/format-number/format-number.d.ts

@@ -10,6 +10,7 @@ export type SignDisplayOption = 'auto' | 'never' | 'always' | 'exceptZero';
  * @element nve-format-number
  * @description A localized number formatter for currencies, percentages, units, and compact notation, backed by Intl.NumberFormat.
  * Provide a `currency` attribute when `formatStyle` is `currency`, and a `unit` attribute when `formatStyle` is `unit`.
+ * @documentation https://nvidia.github.io/elements/docs/elements/format-number/
  * @since 0.0.0
  * @entrypoint \@nvidia-elements/core/format-number
  * @slot - Numeric string to format (such as 1234567 or 1234.56). Serves as fallback before hydration.

package/dist/format-number/format-number2.js

@@ -29,7 +29,7 @@ var c = [
 	static {
 		this.metadata = {
 			tag: "nve-format-number",
-			version: "2.1.0"
+			version: "2.1.1"
 		};
 	}
 	get #e() {

package/dist/format-number/format-number2.js.map

@@ -1 +1 @@
-{"version":3,"file":"format-number2.js","names":["#rawValue","#resolvedLocale","#parsedNumber","#formatOptions","#formattedNumber","#onSlotChange"],"sources":["../../src/format-number/format-number.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { useStyles, typeSSR, LogService } from '@nvidia-elements/core/internal';\nimport styles from './format-number.css?inline';\n\nexport type FormatNumberStyle = 'decimal' | 'currency' | 'percent' | 'unit';\nexport type CurrencyDisplayOption = 'symbol' | 'code' | 'name' | 'narrowSymbol';\nexport type CurrencySignOption = 'standard' | 'accounting';\nexport type NotationOption = 'standard' | 'scientific' | 'engineering' | 'compact';\nexport type CompactDisplayOption = 'short' | 'long';\nexport type UnitDisplayOption = 'short' | 'long' | 'narrow';\nexport type SignDisplayOption = 'auto' | 'never' | 'always' | 'exceptZero';\n\nconst STRING_KEYS: [keyof FormatNumber, string][] = [\n  ['currency', 'currency'],\n  ['currencyDisplay', 'currencyDisplay'],\n  ['currencySign', 'currencySign'],\n  ['notation', 'notation'],\n  ['compactDisplay', 'compactDisplay'],\n  ['unit', 'unit'],\n  ['unitDisplay', 'unitDisplay'],\n  ['signDisplay', 'signDisplay']\n];\n\nconst NUMBER_KEYS: [keyof FormatNumber, string][] = [\n  ['minimumFractionDigits', 'minimumFractionDigits'],\n  ['maximumFractionDigits', 'maximumFractionDigits'],\n  ['minimumIntegerDigits', 'minimumIntegerDigits']\n];\n\n/**\n * @element nve-format-number\n * @description A localized number formatter for currencies, percentages, units, and compact notation, backed by Intl.NumberFormat.\n * Provide a `currency` attribute when `formatStyle` is `currency`, and a `unit` attribute when `formatStyle` is `unit`.\n * @since 0.0.0\n * @entrypoint \\@nvidia-elements/core/format-number\n * @slot - Numeric string to format (such as 1234567 or 1234.56). Serves as fallback before hydration.\n * @aria https://developer.mozilla.org/en-US/docs/Web/HTML/Element/data\n */\n@typeSSR()\nexport class FormatNumber extends LitElement {\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-format-number',\n    version: '0.0.0'\n  };\n\n  /**\n   * Optional numeric string for values supplied by JavaScript or bound data.\n   * By default, the component formats the element's text content, which also serves as the SSR fallback.\n   * When both are present, this property takes precedence.\n   */\n  @property({ type: String }) number?: string;\n\n  /**\n   * Language tag (such as en-US, de-DE). Defaults to document.documentElement.lang or browser default.\n   */\n  @property({ type: String }) locale?: string;\n\n  /**\n   * Formatting style: 'decimal' | 'currency' | 'percent' | 'unit'.\n   */\n  @property({ type: String, attribute: 'format-style' }) formatStyle: FormatNumberStyle = 'decimal';\n\n  /**\n   * ISO 4217 currency code (such as USD or EUR). Required when formatStyle is currency.\n   */\n  @property({ type: String }) currency?: string;\n\n  /**\n   * Currency sign style: 'standard' | 'accounting'.\n   */\n  @property({ type: String, attribute: 'currency-sign' }) currencySign?: CurrencySignOption;\n\n  /**\n   * Currency display style: 'symbol' | 'code' | 'name' | 'narrowSymbol'.\n   */\n  @property({ type: String, attribute: 'currency-display' }) currencyDisplay?: CurrencyDisplayOption;\n\n  /**\n   * Unit identifier (such as kilometer or byte). Required when formatStyle is unit.\n   */\n  @property({ type: String }) unit?: string;\n\n  /**\n   * Unit display style: 'short' | 'long' | 'narrow'.\n   */\n  @property({ type: String, attribute: 'unit-display' }) unitDisplay?: UnitDisplayOption;\n\n  /**\n   * Number notation: 'standard' | 'scientific' | 'engineering' | 'compact'.\n   */\n  @property({ type: String }) notation?: NotationOption;\n\n  /**\n   * Compact notation display: 'short' | 'long'. Only applies when notation is compact.\n   */\n  @property({ type: String, attribute: 'compact-display' }) compactDisplay?: CompactDisplayOption;\n\n  /**\n   * Sign display: 'auto' | 'never' | 'always' | 'exceptZero'.\n   */\n  @property({ type: String, attribute: 'sign-display' }) signDisplay?: SignDisplayOption;\n\n  /**\n   * Grouping separators: 'auto' | 'always' | 'min2' | 'true' | 'false'.\n   */\n  @property({ type: String, attribute: 'use-grouping' }) useGrouping?: string;\n\n  /**\n   * Pad fraction output to at least this many digits (0-20).\n   */\n  @property({ type: Number, attribute: 'minimum-fraction-digits' }) minimumFractionDigits?: number;\n\n  /**\n   * Round fraction output to at most this many digits (0-20).\n   */\n  @property({ type: Number, attribute: 'maximum-fraction-digits' }) maximumFractionDigits?: number;\n\n  /**\n   * Pad integer output to at least this many digits (1-21).\n   */\n  @property({ type: Number, attribute: 'minimum-integer-digits' }) minimumIntegerDigits?: number;\n\n  get #rawValue(): string {\n    return this.number ?? this.textContent?.trim() ?? '';\n  }\n\n  get #resolvedLocale(): string | undefined {\n    return this.locale ?? (globalThis.document?.documentElement?.lang || undefined);\n  }\n\n  get #parsedNumber(): number | null {\n    const raw = this.#rawValue;\n    if (!raw) return null;\n\n    const numericValue = Number(raw);\n    if (Number.isFinite(numericValue)) return numericValue;\n\n    LogService.warn(`format-number: invalid numeric value \"${raw}\"`);\n    return null;\n  }\n\n  get #formatOptions(): Intl.NumberFormatOptions {\n    const options: Intl.NumberFormatOptions = { style: this.formatStyle };\n\n    for (const [prop, key] of STRING_KEYS) {\n      const value = this[prop] as string | undefined;\n      if (value !== undefined) (options as Record<string, unknown>)[key] = value;\n    }\n\n    for (const [prop, key] of NUMBER_KEYS) {\n      const value = this[prop] as number | undefined;\n      if (value !== undefined) (options as Record<string, unknown>)[key] = value;\n    }\n\n    if (this.useGrouping !== undefined) {\n      const grouping = this.useGrouping === 'false' ? false : this.useGrouping === 'true' ? true : this.useGrouping;\n      (options as Record<string, unknown>).useGrouping = grouping;\n    }\n\n    return options;\n  }\n\n  get #formattedNumber(): string {\n    const raw = this.#rawValue;\n    if (!raw) return '';\n\n    const numericValue = this.#parsedNumber;\n    if (numericValue === null) return raw;\n\n    try {\n      return new Intl.NumberFormat(this.#resolvedLocale, this.#formatOptions).format(numericValue);\n    } catch (e) {\n      LogService.warn(`format-number: ${(e as Error).message}`);\n      return raw;\n    }\n  }\n\n  render() {\n    return html`<data internal-host value=${this.#rawValue}>${this.#formattedNumber}<slot @slotchange=${this.#onSlotChange} hidden></slot></data>`;\n  }\n\n  #onSlotChange() {\n    this.requestUpdate();\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"format-number2.js","names":["#rawValue","#resolvedLocale","#parsedNumber","#formatOptions","#formattedNumber","#onSlotChange"],"sources":["../../src/format-number/format-number.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { useStyles, typeSSR, LogService } from '@nvidia-elements/core/internal';\nimport styles from './format-number.css?inline';\n\nexport type FormatNumberStyle = 'decimal' | 'currency' | 'percent' | 'unit';\nexport type CurrencyDisplayOption = 'symbol' | 'code' | 'name' | 'narrowSymbol';\nexport type CurrencySignOption = 'standard' | 'accounting';\nexport type NotationOption = 'standard' | 'scientific' | 'engineering' | 'compact';\nexport type CompactDisplayOption = 'short' | 'long';\nexport type UnitDisplayOption = 'short' | 'long' | 'narrow';\nexport type SignDisplayOption = 'auto' | 'never' | 'always' | 'exceptZero';\n\nconst STRING_KEYS: [keyof FormatNumber, string][] = [\n  ['currency', 'currency'],\n  ['currencyDisplay', 'currencyDisplay'],\n  ['currencySign', 'currencySign'],\n  ['notation', 'notation'],\n  ['compactDisplay', 'compactDisplay'],\n  ['unit', 'unit'],\n  ['unitDisplay', 'unitDisplay'],\n  ['signDisplay', 'signDisplay']\n];\n\nconst NUMBER_KEYS: [keyof FormatNumber, string][] = [\n  ['minimumFractionDigits', 'minimumFractionDigits'],\n  ['maximumFractionDigits', 'maximumFractionDigits'],\n  ['minimumIntegerDigits', 'minimumIntegerDigits']\n];\n\n/**\n * @element nve-format-number\n * @description A localized number formatter for currencies, percentages, units, and compact notation, backed by Intl.NumberFormat.\n * Provide a `currency` attribute when `formatStyle` is `currency`, and a `unit` attribute when `formatStyle` is `unit`.\n * @documentation https://nvidia.github.io/elements/docs/elements/format-number/\n * @since 0.0.0\n * @entrypoint \\@nvidia-elements/core/format-number\n * @slot - Numeric string to format (such as 1234567 or 1234.56). Serves as fallback before hydration.\n * @aria https://developer.mozilla.org/en-US/docs/Web/HTML/Element/data\n */\n@typeSSR()\nexport class FormatNumber extends LitElement {\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-format-number',\n    version: '0.0.0'\n  };\n\n  /**\n   * Optional numeric string for values supplied by JavaScript or bound data.\n   * By default, the component formats the element's text content, which also serves as the SSR fallback.\n   * When both are present, this property takes precedence.\n   */\n  @property({ type: String }) number?: string;\n\n  /**\n   * Language tag (such as en-US, de-DE). Defaults to document.documentElement.lang or browser default.\n   */\n  @property({ type: String }) locale?: string;\n\n  /**\n   * Formatting style: 'decimal' | 'currency' | 'percent' | 'unit'.\n   */\n  @property({ type: String, attribute: 'format-style' }) formatStyle: FormatNumberStyle = 'decimal';\n\n  /**\n   * ISO 4217 currency code (such as USD or EUR). Required when formatStyle is currency.\n   */\n  @property({ type: String }) currency?: string;\n\n  /**\n   * Currency sign style: 'standard' | 'accounting'.\n   */\n  @property({ type: String, attribute: 'currency-sign' }) currencySign?: CurrencySignOption;\n\n  /**\n   * Currency display style: 'symbol' | 'code' | 'name' | 'narrowSymbol'.\n   */\n  @property({ type: String, attribute: 'currency-display' }) currencyDisplay?: CurrencyDisplayOption;\n\n  /**\n   * Unit identifier (such as kilometer or byte). Required when formatStyle is unit.\n   */\n  @property({ type: String }) unit?: string;\n\n  /**\n   * Unit display style: 'short' | 'long' | 'narrow'.\n   */\n  @property({ type: String, attribute: 'unit-display' }) unitDisplay?: UnitDisplayOption;\n\n  /**\n   * Number notation: 'standard' | 'scientific' | 'engineering' | 'compact'.\n   */\n  @property({ type: String }) notation?: NotationOption;\n\n  /**\n   * Compact notation display: 'short' | 'long'. Only applies when notation is compact.\n   */\n  @property({ type: String, attribute: 'compact-display' }) compactDisplay?: CompactDisplayOption;\n\n  /**\n   * Sign display: 'auto' | 'never' | 'always' | 'exceptZero'.\n   */\n  @property({ type: String, attribute: 'sign-display' }) signDisplay?: SignDisplayOption;\n\n  /**\n   * Grouping separators: 'auto' | 'always' | 'min2' | 'true' | 'false'.\n   */\n  @property({ type: String, attribute: 'use-grouping' }) useGrouping?: string;\n\n  /**\n   * Pad fraction output to at least this many digits (0-20).\n   */\n  @property({ type: Number, attribute: 'minimum-fraction-digits' }) minimumFractionDigits?: number;\n\n  /**\n   * Round fraction output to at most this many digits (0-20).\n   */\n  @property({ type: Number, attribute: 'maximum-fraction-digits' }) maximumFractionDigits?: number;\n\n  /**\n   * Pad integer output to at least this many digits (1-21).\n   */\n  @property({ type: Number, attribute: 'minimum-integer-digits' }) minimumIntegerDigits?: number;\n\n  get #rawValue(): string {\n    return this.number ?? this.textContent?.trim() ?? '';\n  }\n\n  get #resolvedLocale(): string | undefined {\n    return this.locale ?? (globalThis.document?.documentElement?.lang || undefined);\n  }\n\n  get #parsedNumber(): number | null {\n    const raw = this.#rawValue;\n    if (!raw) return null;\n\n    const numericValue = Number(raw);\n    if (Number.isFinite(numericValue)) return numericValue;\n\n    LogService.warn(`format-number: invalid numeric value \"${raw}\"`);\n    return null;\n  }\n\n  get #formatOptions(): Intl.NumberFormatOptions {\n    const options: Intl.NumberFormatOptions = { style: this.formatStyle };\n\n    for (const [prop, key] of STRING_KEYS) {\n      const value = this[prop] as string | undefined;\n      if (value !== undefined) (options as Record<string, unknown>)[key] = value;\n    }\n\n    for (const [prop, key] of NUMBER_KEYS) {\n      const value = this[prop] as number | undefined;\n      if (value !== undefined) (options as Record<string, unknown>)[key] = value;\n    }\n\n    if (this.useGrouping !== undefined) {\n      const grouping = this.useGrouping === 'false' ? false : this.useGrouping === 'true' ? true : this.useGrouping;\n      (options as Record<string, unknown>).useGrouping = grouping;\n    }\n\n    return options;\n  }\n\n  get #formattedNumber(): string {\n    const raw = this.#rawValue;\n    if (!raw) return '';\n\n    const numericValue = this.#parsedNumber;\n    if (numericValue === null) return raw;\n\n    try {\n      return new Intl.NumberFormat(this.#resolvedLocale, this.#formatOptions).format(numericValue);\n    } catch (e) {\n      LogService.warn(`format-number: ${(e as Error).message}`);\n      return raw;\n    }\n  }\n\n  render() {\n    return html`<data internal-host value=${this.#rawValue}>${this.#formattedNumber}<slot @slotchange=${this.#onSlotChange} hidden></slot></data>`;\n  }\n\n  #onSlotChange() {\n    this.requestUpdate();\n  }\n}\n"],"mappings":"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"}

package/dist/format-relative-time/format-relative-time.d.ts

@@ -3,6 +3,7 @@ import { LitElement } from 'lit';
  * @element nve-format-relative-time
  * @description Formats a date/time value as localized relative text using the Intl.RelativeTimeFormat API. Renders inside a semantic time element.
  * Options mirror the Intl.RelativeTimeFormat API. When unit is 'auto', the component selects the best unit based on the time difference.
+ * @documentation https://nvidia.github.io/elements/docs/elements/format-relative-time/
  * @since 0.0.0
  * @entrypoint \@nvidia-elements/core/format-relative-time
  * @slot - Date string to format (such as 2023-07-28T04:20:17.434Z). Serves as fallback before hydration.

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

@@ -53,7 +53,7 @@ var c = {
 	static {
 		this.metadata = {
 			tag: "nve-format-relative-time",
-			version: "2.1.0"
+			version: "2.1.1"
 		};
 	}
 	#e;

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

@@ -1 +1 @@
-{"version":3,"file":"format-relative-time2.js","names":["#dateValue","#resolvedLocale","#computeUnit","#computeExplicitUnit","#formattedRelativeTime","#resolveValueAndUnit","#stopSync","#timer","#startSync","#getSyncInterval","#onSlotChange"],"sources":["../../src/format-relative-time/format-relative-time.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { useStyles, typeSSR, LogService } from '@nvidia-elements/core/internal';\nimport styles from './format-relative-time.css?inline';\n\ntype TimeUnitOption = 'second' | 'minute' | 'hour' | 'day' | 'week' | 'month' | 'year';\n\nconst UNIT_DIVISORS: Record<TimeUnitOption, number> = {\n  second: 1000,\n  minute: 60000,\n  hour: 3600000,\n  day: 86400000,\n  week: 604800000,\n  month: 2592000000,\n  year: 31536000000\n};\n\nconst THRESHOLDS: { unit: TimeUnitOption; max: number }[] = [\n  { unit: 'second', max: 60 },\n  { unit: 'minute', max: 60 },\n  { unit: 'hour', max: 24 },\n  { unit: 'day', max: 7 },\n  { unit: 'week', max: 4 },\n  { unit: 'month', max: 12 },\n  { unit: 'year', max: Number.POSITIVE_INFINITY }\n];\n\n/**\n * @element nve-format-relative-time\n * @description Formats a date/time value as localized relative text using the Intl.RelativeTimeFormat API. Renders inside a semantic time element.\n * Options mirror the Intl.RelativeTimeFormat API. When unit is 'auto', the component selects the best unit based on the time difference.\n * @since 0.0.0\n * @entrypoint \\@nvidia-elements/core/format-relative-time\n * @slot - Date string to format (such as 2023-07-28T04:20:17.434Z). Serves as fallback before hydration.\n * @aria https://developer.mozilla.org/en-US/docs/Web/HTML/Element/time\n */\n@typeSSR()\nexport class FormatRelativeTime extends LitElement {\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-format-relative-time',\n    version: '0.0.0'\n  };\n\n  /**\n   * Optional date string for values supplied by JavaScript or bound data.\n   * By default, the component formats the element's text content, which also serves as the SSR fallback.\n   * When both are present, this property takes precedence.\n   */\n  @property({ type: String }) date?: string;\n\n  /**\n   * Language tag (such as en-US, de-DE). Defaults to document.documentElement.lang or browser default.\n   */\n  @property({ type: String }) locale?: string;\n\n  /**\n   * Numeric formatting: 'always' | 'auto'. When 'auto', enables natural language forms such as 'yesterday' instead of '1 day ago'.\n   */\n  @property({ type: String }) numeric: 'always' | 'auto' = 'always';\n\n  /**\n   * Formatting length: 'long' | 'short' | 'narrow'. Controls verbosity (such as '3 days ago' vs '3d ago'). Maps to Intl.RelativeTimeFormat style option.\n   */\n  @property({ type: String, attribute: 'format-style' }) formatStyle: 'long' | 'short' | 'narrow' = 'long';\n\n  /**\n   * Time unit: 'second' | 'minute' | 'hour' | 'day' | 'week' | 'month' | 'year' | 'auto'. Use 'auto' to let the component select the most appropriate unit based on the time difference.\n   */\n  @property({ type: String }) unit: 'second' | 'minute' | 'hour' | 'day' | 'week' | 'month' | 'year' | 'auto' = 'auto';\n\n  /**\n   * When present, auto-updates the displayed relative time at appropriate intervals.\n   */\n  @property({ type: Boolean }) sync = false;\n\n  #timer?: ReturnType<typeof setTimeout>;\n\n  get #dateValue(): string {\n    return this.date ?? this.textContent?.trim() ?? '';\n  }\n\n  get #resolvedLocale(): string | undefined {\n    return this.locale ?? (globalThis.document?.documentElement?.lang || undefined);\n  }\n\n  #computeUnit(diffMs: number): { value: number; unit: Intl.RelativeTimeFormatUnit } {\n    const absDiff = Math.abs(diffMs);\n    const sign = diffMs < 0 ? -1 : 1;\n\n    for (const { unit, max } of THRESHOLDS) {\n      const value = Math.round(absDiff / UNIT_DIVISORS[unit]);\n      if (value < max) return { value: sign * value, unit };\n    }\n    return { value: sign * Math.round(absDiff / UNIT_DIVISORS.year), unit: 'year' };\n  }\n\n  #computeExplicitUnit(diffMs: number, unit: TimeUnitOption): number {\n    return Math.round(diffMs / UNIT_DIVISORS[unit]);\n  }\n\n  #resolveValueAndUnit(diffMs: number): { value: number; unit: Intl.RelativeTimeFormatUnit } {\n    if (this.unit === 'auto') {\n      return this.#computeUnit(diffMs);\n    }\n    return { unit: this.unit, value: this.#computeExplicitUnit(diffMs, this.unit) };\n  }\n\n  get #formattedRelativeTime(): string {\n    const iso = this.#dateValue;\n    if (!iso) return '';\n\n    const target = new Date(iso);\n    if (isNaN(target.getTime())) {\n      LogService.warn(`format-relative-time: invalid date value \"${iso}\"`);\n      return iso;\n    }\n\n    const { value, unit: resolvedUnit } = this.#resolveValueAndUnit(target.getTime() - Date.now());\n\n    try {\n      return new Intl.RelativeTimeFormat(this.#resolvedLocale, {\n        numeric: this.numeric,\n        style: this.formatStyle\n      }).format(value, resolvedUnit);\n    } catch (e) {\n      LogService.warn(`format-relative-time: ${(e as Error).message}`);\n      return iso;\n    }\n  }\n\n  #getSyncInterval(): number {\n    const iso = this.#dateValue;\n    if (!iso) return 60000;\n\n    const absDiff = Math.abs(new Date(iso).getTime() - Date.now());\n    if (absDiff < 60000) return 10000;\n    if (absDiff < 3600000) return 30000;\n    if (absDiff < 86400000) return 300000;\n    return 3600000;\n  }\n\n  #startSync() {\n    this.#stopSync();\n    if (!this.sync) return;\n\n    this.#timer = setTimeout(() => {\n      this.requestUpdate();\n      this.#startSync();\n    }, this.#getSyncInterval());\n  }\n\n  #stopSync() {\n    if (this.#timer !== undefined) {\n      clearTimeout(this.#timer);\n      this.#timer = undefined;\n    }\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    if (this.sync) this.#startSync();\n  }\n\n  disconnectedCallback() {\n    this.#stopSync();\n    super.disconnectedCallback();\n  }\n\n  updated(changed: Map<string, unknown>) {\n    if (changed.has('sync')) {\n      if (this.sync) {\n        this.#startSync();\n      } else {\n        this.#stopSync();\n      }\n    }\n  }\n\n  render() {\n    return html`<time internal-host datetime=${this.#dateValue}>${this.#formattedRelativeTime}<slot @slotchange=${this.#onSlotChange} hidden></slot></time>`;\n  }\n\n  #onSlotChange() {\n    this.requestUpdate();\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"format-relative-time2.js","names":["#dateValue","#resolvedLocale","#computeUnit","#computeExplicitUnit","#formattedRelativeTime","#resolveValueAndUnit","#stopSync","#timer","#startSync","#getSyncInterval","#onSlotChange"],"sources":["../../src/format-relative-time/format-relative-time.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { useStyles, typeSSR, LogService } from '@nvidia-elements/core/internal';\nimport styles from './format-relative-time.css?inline';\n\ntype TimeUnitOption = 'second' | 'minute' | 'hour' | 'day' | 'week' | 'month' | 'year';\n\nconst UNIT_DIVISORS: Record<TimeUnitOption, number> = {\n  second: 1000,\n  minute: 60000,\n  hour: 3600000,\n  day: 86400000,\n  week: 604800000,\n  month: 2592000000,\n  year: 31536000000\n};\n\nconst THRESHOLDS: { unit: TimeUnitOption; max: number }[] = [\n  { unit: 'second', max: 60 },\n  { unit: 'minute', max: 60 },\n  { unit: 'hour', max: 24 },\n  { unit: 'day', max: 7 },\n  { unit: 'week', max: 4 },\n  { unit: 'month', max: 12 },\n  { unit: 'year', max: Number.POSITIVE_INFINITY }\n];\n\n/**\n * @element nve-format-relative-time\n * @description Formats a date/time value as localized relative text using the Intl.RelativeTimeFormat API. Renders inside a semantic time element.\n * Options mirror the Intl.RelativeTimeFormat API. When unit is 'auto', the component selects the best unit based on the time difference.\n * @documentation https://nvidia.github.io/elements/docs/elements/format-relative-time/\n * @since 0.0.0\n * @entrypoint \\@nvidia-elements/core/format-relative-time\n * @slot - Date string to format (such as 2023-07-28T04:20:17.434Z). Serves as fallback before hydration.\n * @aria https://developer.mozilla.org/en-US/docs/Web/HTML/Element/time\n */\n@typeSSR()\nexport class FormatRelativeTime extends LitElement {\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-format-relative-time',\n    version: '0.0.0'\n  };\n\n  /**\n   * Optional date string for values supplied by JavaScript or bound data.\n   * By default, the component formats the element's text content, which also serves as the SSR fallback.\n   * When both are present, this property takes precedence.\n   */\n  @property({ type: String }) date?: string;\n\n  /**\n   * Language tag (such as en-US, de-DE). Defaults to document.documentElement.lang or browser default.\n   */\n  @property({ type: String }) locale?: string;\n\n  /**\n   * Numeric formatting: 'always' | 'auto'. When 'auto', enables natural language forms such as 'yesterday' instead of '1 day ago'.\n   */\n  @property({ type: String }) numeric: 'always' | 'auto' = 'always';\n\n  /**\n   * Formatting length: 'long' | 'short' | 'narrow'. Controls verbosity (such as '3 days ago' vs '3d ago'). Maps to Intl.RelativeTimeFormat style option.\n   */\n  @property({ type: String, attribute: 'format-style' }) formatStyle: 'long' | 'short' | 'narrow' = 'long';\n\n  /**\n   * Time unit: 'second' | 'minute' | 'hour' | 'day' | 'week' | 'month' | 'year' | 'auto'. Use 'auto' to let the component select the most appropriate unit based on the time difference.\n   */\n  @property({ type: String }) unit: 'second' | 'minute' | 'hour' | 'day' | 'week' | 'month' | 'year' | 'auto' = 'auto';\n\n  /**\n   * When present, auto-updates the displayed relative time at appropriate intervals.\n   */\n  @property({ type: Boolean }) sync = false;\n\n  #timer?: ReturnType<typeof setTimeout>;\n\n  get #dateValue(): string {\n    return this.date ?? this.textContent?.trim() ?? '';\n  }\n\n  get #resolvedLocale(): string | undefined {\n    return this.locale ?? (globalThis.document?.documentElement?.lang || undefined);\n  }\n\n  #computeUnit(diffMs: number): { value: number; unit: Intl.RelativeTimeFormatUnit } {\n    const absDiff = Math.abs(diffMs);\n    const sign = diffMs < 0 ? -1 : 1;\n\n    for (const { unit, max } of THRESHOLDS) {\n      const value = Math.round(absDiff / UNIT_DIVISORS[unit]);\n      if (value < max) return { value: sign * value, unit };\n    }\n    return { value: sign * Math.round(absDiff / UNIT_DIVISORS.year), unit: 'year' };\n  }\n\n  #computeExplicitUnit(diffMs: number, unit: TimeUnitOption): number {\n    return Math.round(diffMs / UNIT_DIVISORS[unit]);\n  }\n\n  #resolveValueAndUnit(diffMs: number): { value: number; unit: Intl.RelativeTimeFormatUnit } {\n    if (this.unit === 'auto') {\n      return this.#computeUnit(diffMs);\n    }\n    return { unit: this.unit, value: this.#computeExplicitUnit(diffMs, this.unit) };\n  }\n\n  get #formattedRelativeTime(): string {\n    const iso = this.#dateValue;\n    if (!iso) return '';\n\n    const target = new Date(iso);\n    if (isNaN(target.getTime())) {\n      LogService.warn(`format-relative-time: invalid date value \"${iso}\"`);\n      return iso;\n    }\n\n    const { value, unit: resolvedUnit } = this.#resolveValueAndUnit(target.getTime() - Date.now());\n\n    try {\n      return new Intl.RelativeTimeFormat(this.#resolvedLocale, {\n        numeric: this.numeric,\n        style: this.formatStyle\n      }).format(value, resolvedUnit);\n    } catch (e) {\n      LogService.warn(`format-relative-time: ${(e as Error).message}`);\n      return iso;\n    }\n  }\n\n  #getSyncInterval(): number {\n    const iso = this.#dateValue;\n    if (!iso) return 60000;\n\n    const absDiff = Math.abs(new Date(iso).getTime() - Date.now());\n    if (absDiff < 60000) return 10000;\n    if (absDiff < 3600000) return 30000;\n    if (absDiff < 86400000) return 300000;\n    return 3600000;\n  }\n\n  #startSync() {\n    this.#stopSync();\n    if (!this.sync) return;\n\n    this.#timer = setTimeout(() => {\n      this.requestUpdate();\n      this.#startSync();\n    }, this.#getSyncInterval());\n  }\n\n  #stopSync() {\n    if (this.#timer !== undefined) {\n      clearTimeout(this.#timer);\n      this.#timer = undefined;\n    }\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    if (this.sync) this.#startSync();\n  }\n\n  disconnectedCallback() {\n    this.#stopSync();\n    super.disconnectedCallback();\n  }\n\n  updated(changed: Map<string, unknown>) {\n    if (changed.has('sync')) {\n      if (this.sync) {\n        this.#startSync();\n      } else {\n        this.#stopSync();\n      }\n    }\n  }\n\n  render() {\n    return html`<time internal-host datetime=${this.#dateValue}>${this.#formattedRelativeTime}<slot @slotchange=${this.#onSlotChange} hidden></slot></time>`;\n  }\n\n  #onSlotChange() {\n    this.requestUpdate();\n  }\n}\n"],"mappings":";;;;;;;;AAUA,IAAM,IAAgD;CACpD,QAAQ;CACR,QAAQ;CACR,MAAM;CACN,KAAK;CACL,MAAM;CACN,OAAO;CACP,MAAM;AACR,GAEM,IAAsD;CAC1D;EAAE,MAAM;EAAU,KAAK;CAAG;CAC1B;EAAE,MAAM;EAAU,KAAK;CAAG;CAC1B;EAAE,MAAM;EAAQ,KAAK;CAAG;CACxB;EAAE,MAAM;EAAO,KAAK;CAAE;CACtB;EAAE,MAAM;EAAQ,KAAK;CAAE;CACvB;EAAE,MAAM;EAAS,KAAK;CAAG;CACzB;EAAE,MAAM;EAAQ,KAAK;CAAyB;AAChD,GAaO,IAAA,cAAiC,EAAW;;8BAuBQ,6BAKyC,oBAKY,oBAK1E;;;gBArCpB,EAAU,CAAC,CAAM,CAAC;;;kBAEP;GACzB,KAAK;GACL,SAAS;EACX;;CAkCA;CAEA,IAAIA,KAAqB;EACvB,OAAO,KAAK,QAAQ,KAAK,aAAa,KAAK,KAAK;CAClD;CAEA,IAAIC,KAAsC;EACxC,OAAO,KAAK,WAAW,WAAW,UAAU,iBAAiB,QAAQ,KAAA;CACvE;CAEA,GAAa,GAAsE;EACjF,IAAM,IAAU,KAAK,IAAI,CAAM,GACzB,IAAO,IAAS,IAAI,KAAK;EAE/B,KAAK,IAAM,EAAE,SAAM,YAAS,GAAY;GACtC,IAAM,IAAQ,KAAK,MAAM,IAAU,EAAc,EAAK;GACtD,IAAI,IAAQ,GAAK,OAAO;IAAE,OAAO,IAAO;IAAO;GAAK;EACtD;EACA,OAAO;GAAE,OAAO,IAAO,KAAK,MAAM,IAAU,EAAc,IAAI;GAAG,MAAM;EAAO;CAChF;CAEA,GAAqB,GAAgB,GAA8B;EACjE,OAAO,KAAK,MAAM,IAAS,EAAc,EAAK;CAChD;CAEA,GAAqB,GAAsE;EAIzF,OAHI,KAAK,SAAS,SACT,KAAKC,GAAa,CAAM,IAE1B;GAAE,MAAM,KAAK;GAAM,OAAO,KAAKC,GAAqB,GAAQ,KAAK,IAAI;EAAE;CAChF;CAEA,IAAIC,KAAiC;EACnC,IAAM,IAAM,KAAKJ;EACjB,IAAI,CAAC,GAAK,OAAO;EAEjB,IAAM,IAAS,IAAI,KAAK,CAAG;EAC3B,IAAI,MAAM,EAAO,QAAQ,CAAC,GAExB,OADA,EAAW,KAAK,6CAA6C,EAAI,EAAE,GAC5D;EAGT,IAAM,EAAE,UAAO,MAAM,MAAiB,KAAKK,GAAqB,EAAO,QAAQ,IAAI,KAAK,IAAI,CAAC;EAE7F,IAAI;GACF,OAAO,IAAI,KAAK,mBAAmB,KAAKJ,IAAiB;IACvD,SAAS,KAAK;IACd,OAAO,KAAK;GACd,CAAC,CAAC,CAAC,OAAO,GAAO,CAAY;EAC/B,SAAS,GAAG;GAEV,OADA,EAAW,KAAK,yBAA0B,EAAY,SAAS,GACxD;EACT;CACF;CAEA,KAA2B;EACzB,IAAM,IAAM,KAAKD;EACjB,IAAI,CAAC,GAAK,OAAO;EAEjB,IAAM,IAAU,KAAK,IAAI,IAAI,KAAK,CAAG,CAAC,CAAC,QAAQ,IAAI,KAAK,IAAI,CAAC;EAI7D,OAHI,IAAU,MAAc,MACxB,IAAU,OAAgB,MAC1B,IAAU,QAAiB,MACxB;CACT;CAEA,KAAa;EACX,KAAKM,GAAU,GACV,KAAK,SAEV,KAAKC,KAAS,iBAAiB;GAE7B,AADA,KAAK,cAAc,GACnB,KAAKC,GAAW;EAClB,GAAG,KAAKC,GAAiB,CAAC;CAC5B;CAEA,KAAY;EACV,AAAI,KAAKF,OAAW,KAAA,MAClB,aAAa,KAAKA,EAAM,GACxB,KAAKA,KAAS,KAAA;CAElB;CAEA,oBAAoB;EAElB,AADA,MAAM,kBAAkB,GACpB,KAAK,QAAM,KAAKC,GAAW;CACjC;CAEA,uBAAuB;EAErB,AADA,KAAKF,GAAU,GACf,MAAM,qBAAqB;CAC7B;CAEA,QAAQ,GAA+B;EACrC,AAAI,EAAQ,IAAI,MAAM,MAChB,KAAK,OACP,KAAKE,GAAW,IAEhB,KAAKF,GAAU;CAGrB;CAEA,SAAS;EACP,OAAO,CAAI,iCAAgC,KAAKN,GAAW,IAAG,KAAKI,GAAuB,qBAAoB,KAAKM,GAAc;CACnI;CAEA,KAAgB;EACd,KAAK,cAAc;CACrB;AACF;GAzIG,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,MAKzB,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,UAAA,KAAA,CAAA,MAKzB,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,WAAA,KAAA,CAAA,MAKzB,EAAS;CAAE,MAAM;CAAQ,WAAW;AAAe,CAAC,CAAA,GAAA,EAAA,WAAA,eAAA,KAAA,CAAA,MAKpD,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,MAKzB,EAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,UAvC5B,EAAQ,CAAA,GAAA,CAAA"}

package/dist/forms/control/control.d.ts

@@ -3,6 +3,7 @@ import { LitElement, nothing } from 'lit';
 /**
  * @element nve-control
  * @description Wraps a form input with its associated label and validation messages, managing layout and accessibility associations.
+ * @documentation https://nvidia.github.io/elements/docs/elements/control/
  * @since 0.3.0
  * @entrypoint \@nvidia-elements/core/forms
  * @slot - Control input element

package/dist/forms/control/control2.js

@@ -50,7 +50,7 @@ var C = class extends v {
 	static {
 		this.metadata = {
 			tag: "nve-control",
-			version: "2.1.0"
+			version: "2.1.1"
 		};
 	}
 	render() {

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

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

package/dist/forms/control-group/control-group.d.ts

@@ -3,6 +3,7 @@ import { LitElement } from 'lit';
 /**
  * @element nve-control-group
  * @description Groups many related form controls under a shared label and validation context for semantically linked inputs.
+ * @documentation https://nvidia.github.io/elements/docs/elements/control/
  * @since 0.3.0
  * @entrypoint \@nvidia-elements/core/forms
  * @slot - Control input elements

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

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

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

package/dist/forms/control-message/control-message.d.ts

@@ -4,6 +4,7 @@ import { type ValidityStateError } from '../utils/types.js';
 /**
  * @element nve-control-message
  * @description Defining a Validity State on a control-message allows messages to show conditionally based on the current HTML5 validity state.
+ * @documentation https://nvidia.github.io/elements/docs/elements/control/
  * @since 0.3.0
  * @entrypoint \@nvidia-elements/core/forms
  * @slot - default slot for content

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"control-message2.js","names":[],"sources":["../../../src/forms/control-message/control-message.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { hostAttr, scopedRegistry, useStyles } from '@nvidia-elements/core/internal';\nimport { Icon } from '@nvidia-elements/core/icon';\nimport { type ValidityStateError } from '../utils/types.js';\nimport styles from './control-message.css?inline';\n\nconst statusIcons = {\n  undefined: 'information-circle-stroke',\n  disabled: 'information-circle-stroke',\n  warning: 'exclamation-triangle',\n  success: 'checkmark-circle',\n  error: 'exclamation-circle'\n} as const;\n\n/**\n * @element nve-control-message\n * @description Defining a Validity State on a control-message allows messages to show conditionally based on the current HTML5 validity state.\n * @since 0.3.0\n * @entrypoint \\@nvidia-elements/core/forms\n * @slot - default slot for content\n * @cssprop --color\n * @cssprop --font-weight\n * @cssprop --font-size\n * @csspart icon - The icon element\n * @aria https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals\n * @package true\n */\n@scopedRegistry()\nexport class ControlMessage extends LitElement {\n  /**\n   * Visual treatment for current form control validation status\n   */\n  @property({ type: String, reflect: true }) status?: 'warning' | 'error' | 'success' | 'disabled';\n\n  /**\n   * Validation error code for current form control\n   * https://developer.mozilla.org/en-US/docs/Web/API/ValidityState\n   */\n  @property({ type: String, reflect: true }) error: ValidityStateError | null = null;\n\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-control-message',\n    version: '0.0.0'\n  };\n\n  static elementDefinitions = {\n    [Icon.metadata.tag]: Icon\n  };\n\n  @hostAttr() slot = 'messages';\n\n  render() {\n    return html`\n      <div internal-host>\n        <slot name=\"icon\"><nve-icon part=\"icon\" name=${this.error ? statusIcons.error : statusIcons[this.status!]}></nve-icon></slot>\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n"],"mappings":";;;;;;;;;AAUA,IAAM,IAAc;CAClB,WAAW;CACX,UAAU;CACV,SAAS;CACT,SAAS;CACT,OAAO;AACT,GAgBO,IAAA,cAA6B,EAAW;;4BAUiC,kBAa3D;;;gBAXH,EAAU,CAAC,CAAM,CAAC;;;kBAEP;GACzB,KAAK;GACL,SAAS;EACX;;;4BAE4B,GACzB,EAAK,SAAS,MAAM,EACvB;;CAIA,SAAS;EACP,OAAO,CAAI,oEAEwC,KAAK,QAAQ,EAAY,QAAQ,EAAY,KAAK,QAAS;CAIhH;AACF;GA7BG,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,UAAA,KAAA,CAAA,MAMxC,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,MAaxC,EAAS,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,UAxBX,EAAe,CAAA,GAAA,CAAA"}
+{"version":3,"file":"control-message2.js","names":[],"sources":["../../../src/forms/control-message/control-message.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { hostAttr, scopedRegistry, useStyles } from '@nvidia-elements/core/internal';\nimport { Icon } from '@nvidia-elements/core/icon';\nimport { type ValidityStateError } from '../utils/types.js';\nimport styles from './control-message.css?inline';\n\nconst statusIcons = {\n  undefined: 'information-circle-stroke',\n  disabled: 'information-circle-stroke',\n  warning: 'exclamation-triangle',\n  success: 'checkmark-circle',\n  error: 'exclamation-circle'\n} as const;\n\n/**\n * @element nve-control-message\n * @description Defining a Validity State on a control-message allows messages to show conditionally based on the current HTML5 validity state.\n * @documentation https://nvidia.github.io/elements/docs/elements/control/\n * @since 0.3.0\n * @entrypoint \\@nvidia-elements/core/forms\n * @slot - default slot for content\n * @cssprop --color\n * @cssprop --font-weight\n * @cssprop --font-size\n * @csspart icon - The icon element\n * @aria https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals\n * @package true\n */\n@scopedRegistry()\nexport class ControlMessage extends LitElement {\n  /**\n   * Visual treatment for current form control validation status\n   */\n  @property({ type: String, reflect: true }) status?: 'warning' | 'error' | 'success' | 'disabled';\n\n  /**\n   * Validation error code for current form control\n   * https://developer.mozilla.org/en-US/docs/Web/API/ValidityState\n   */\n  @property({ type: String, reflect: true }) error: ValidityStateError | null = null;\n\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-control-message',\n    version: '0.0.0'\n  };\n\n  static elementDefinitions = {\n    [Icon.metadata.tag]: Icon\n  };\n\n  @hostAttr() slot = 'messages';\n\n  render() {\n    return html`\n      <div internal-host>\n        <slot name=\"icon\"><nve-icon part=\"icon\" name=${this.error ? statusIcons.error : statusIcons[this.status!]}></nve-icon></slot>\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n"],"mappings":";;;;;;;;;AAUA,IAAM,IAAc;CAClB,WAAW;CACX,UAAU;CACV,SAAS;CACT,SAAS;CACT,OAAO;AACT,GAiBO,IAAA,cAA6B,EAAW;;4BAUiC,kBAa3D;;;gBAXH,EAAU,CAAC,CAAM,CAAC;;;kBAEP;GACzB,KAAK;GACL,SAAS;EACX;;;4BAE4B,GACzB,EAAK,SAAS,MAAM,EACvB;;CAIA,SAAS;EACP,OAAO,CAAI,oEAEwC,KAAK,QAAQ,EAAY,QAAQ,EAAY,KAAK,QAAS;CAIhH;AACF;GA7BG,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,UAAA,KAAA,CAAA,MAMxC,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,MAaxC,EAAS,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,UAxBX,EAAe,CAAA,GAAA,CAAA"}

package/dist/gauge/gauge.d.ts

@@ -4,6 +4,7 @@ import type { Size, SupportStatus } from '@nvidia-elements/core/internal';
 /**
  * @element nve-gauge
  * @description Use a gauge to show system resource usage.
+ * @documentation https://nvidia.github.io/elements/docs/elements/gauge/
  * @since 2.0.4
  * @entrypoint \@nvidia-elements/core/gauge
  * @slot - Content to display in the gauge center.

package/dist/gauge/gauge2.js

@@ -52,7 +52,7 @@ var l = 200, u = 100 / 110.93, d = {
 	static {
 		this.metadata = {
 			tag: "nve-gauge",
-			version: "2.1.0"
+			version: "2.1.1"
 		};
 	}
 	#e;

package/dist/gauge/gauge2.js.map

@@ -1 +1 @@
-{"version":3,"file":"gauge2.js","names":["#i18nController","#geometry","#normalizedValues","#normalizedThumb","#angleAtProgress"],"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_DASH_GAP = 200;\nconst GAUGE_DASH_SCALE = 100 / 110.93;\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    start: { x: 27.23, y: 100.77 },\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    start: { x: 12, y: 64 },\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 fillMaskStyle = (progress: number) => ({\n  '--_progress': progress,\n  '--_dash-progress': `${progress * GAUGE_DASH_SCALE}cqw`,\n  '--_dash-gap': `${GAUGE_DASH_GAP * GAUGE_DASH_SCALE}cqw`\n});\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 * @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  #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 { value, max } = this.#normalizedValues();\n    const progress = (value / max) * 100;\n    const thumb = this.#normalizedThumb();\n    const progressAngle = this.#angleAtProgress(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 pathLength=\"100\" 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 pathLength=\"100\" d=${geometry.path} class=\"gauge\"\n                ?empty=${progress <= 0}\n                style=${styleMap(fillMaskStyle(progress))}\n                stroke-dasharray=${`${progress} ${GAUGE_DASH_GAP}`}>\n              </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)\" ?hidden=${!showFill}>\n            <div xmlns=\"http://www.w3.org/1999/xhtml\" class=\"fill-surface\"></div>\n          </foreignObject>\n          <circle class=\"fill-dot-start\" cx=${geometry.start.x} cy=${geometry.start.y} ?hidden=${!(showFill && progress > 0)}></circle>\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  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  #angleAtProgress(geometry: GaugeGeometry, progress: number) {\n    return geometry.startAngle + geometry.sweepAngle * (progress / 100);\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":["#i18nController","#geometry","#normalizedValues","#normalizedThumb","#angleAtProgress"],"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_DASH_GAP = 200;\nconst GAUGE_DASH_SCALE = 100 / 110.93;\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    start: { x: 27.23, y: 100.77 },\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    start: { x: 12, y: 64 },\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 fillMaskStyle = (progress: number) => ({\n  '--_progress': progress,\n  '--_dash-progress': `${progress * GAUGE_DASH_SCALE}cqw`,\n  '--_dash-gap': `${GAUGE_DASH_GAP * GAUGE_DASH_SCALE}cqw`\n});\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  #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 { value, max } = this.#normalizedValues();\n    const progress = (value / max) * 100;\n    const thumb = this.#normalizedThumb();\n    const progressAngle = this.#angleAtProgress(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 pathLength=\"100\" 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 pathLength=\"100\" d=${geometry.path} class=\"gauge\"\n                ?empty=${progress <= 0}\n                style=${styleMap(fillMaskStyle(progress))}\n                stroke-dasharray=${`${progress} ${GAUGE_DASH_GAP}`}>\n              </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)\" ?hidden=${!showFill}>\n            <div xmlns=\"http://www.w3.org/1999/xhtml\" class=\"fill-surface\"></div>\n          </foreignObject>\n          <circle class=\"fill-dot-start\" cx=${geometry.start.x} cy=${geometry.start.y} ?hidden=${!(showFill && progress > 0)}></circle>\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  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  #angleAtProgress(geometry: GaugeGeometry, progress: number) {\n    return geometry.startAngle + geometry.sweepAngle * (progress / 100);\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/cell.d.ts

@@ -2,6 +2,7 @@ import { LitElement } from 'lit';
 /**
  * @element nve-grid-cell
  * @description Represents an individual data cell within a grid row, displaying content aligned to its parent column.
+ * @documentation https://nvidia.github.io/elements/docs/elements/data-grid/
  * @since 0.11.0
  * @entrypoint \@nvidia-elements/core/grid
  * @slot - default slot for content

package/dist/grid/cell/cell2.js

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

package/dist/grid/cell/cell2.js.map

@@ -1 +1 @@
-{"version":3,"file":"cell2.js","names":[],"sources":["../../../src/grid/cell/cell.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, LitElement } from 'lit';\nimport { useStyles, attachInternals } from '@nvidia-elements/core/internal';\nimport styles from './cell.css?inline';\n\n/**\n * @element nve-grid-cell\n * @description Represents an individual data cell within a grid row, displaying content aligned to its parent column.\n * @since 0.11.0\n * @entrypoint \\@nvidia-elements/core/grid\n * @slot - default slot for content\n * @cssprop --background\n * @cssprop --color\n * @cssprop --padding\n * @cssprop --min-height\n * @cssprop --min-width\n * @cssprop --font-weight\n * @cssprop --font-size\n * @cssprop --height\n * @cssprop --border-left\n * @cssprop --border-right\n * @cssprop --justify-content\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/grid/\n */\nexport class GridCell extends LitElement {\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-grid-cell',\n    version: '0.0.0'\n  };\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  render() {\n    return html`\n      <div internal-host focusable=\"active\">\n        <slot></slot>\n      </div>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    this._internals.role = 'gridcell';\n  }\n}\n"],"mappings":";;;;;AA0BA,IAAa,IAAb,cAA8B,EAAW;;gBACvB,EAAU,CAAC,CAAM,CAAC;;;kBAEP;GACzB,KAAK;GACL,SAAS;EACX;;CAKA,SAAS;EACP,OAAO,CAAI;CAKb;CAEA,oBAAoB;EAGlB,AAFA,MAAM,kBAAkB,GACxB,EAAgB,IAAI,GACpB,KAAK,WAAW,OAAO;CACzB;AACF"}
+{"version":3,"file":"cell2.js","names":[],"sources":["../../../src/grid/cell/cell.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, LitElement } from 'lit';\nimport { useStyles, attachInternals } from '@nvidia-elements/core/internal';\nimport styles from './cell.css?inline';\n\n/**\n * @element nve-grid-cell\n * @description Represents an individual data cell within a grid row, displaying content aligned to its parent column.\n * @documentation https://nvidia.github.io/elements/docs/elements/data-grid/\n * @since 0.11.0\n * @entrypoint \\@nvidia-elements/core/grid\n * @slot - default slot for content\n * @cssprop --background\n * @cssprop --color\n * @cssprop --padding\n * @cssprop --min-height\n * @cssprop --min-width\n * @cssprop --font-weight\n * @cssprop --font-size\n * @cssprop --height\n * @cssprop --border-left\n * @cssprop --border-right\n * @cssprop --justify-content\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/grid/\n */\nexport class GridCell extends LitElement {\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-grid-cell',\n    version: '0.0.0'\n  };\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  render() {\n    return html`\n      <div internal-host focusable=\"active\">\n        <slot></slot>\n      </div>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    this._internals.role = 'gridcell';\n  }\n}\n"],"mappings":";;;;;AA2BA,IAAa,IAAb,cAA8B,EAAW;;gBACvB,EAAU,CAAC,CAAM,CAAC;;;kBAEP;GACzB,KAAK;GACL,SAAS;EACX;;CAKA,SAAS;EACP,OAAO,CAAI;CAKb;CAEA,oBAAoB;EAGlB,AAFA,MAAM,kBAAkB,GACxB,EAAgB,IAAI,GACpB,KAAK,WAAW,OAAO;CACzB;AACF"}

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

@@ -3,6 +3,7 @@ import { LitElement } from 'lit';
 /**
  * @element nve-grid-column
  * @description Defines a column header within a grid, specifying the column's label, width, and alignment for all cells beneath it.
+ * @documentation https://nvidia.github.io/elements/docs/elements/data-grid/
  * @since 0.11.0
  * @entrypoint \@nvidia-elements/core/grid
  * @slot - default slot for content