@nvidia-elements/core 2.20.1 → 2.20.3

package/dist/preferences-input/preferences-input2.js.map

@@ -1 +1 @@
-{"version":3,"file":"preferences-input2.js","names":[],"sources":["../../src/preferences-input/preferences-input.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, isServer, LitElement } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { scopedRegistry, useStyles } from '@nvidia-elements/core/internal';\nimport { I18nController, type I18nDefaults } from '@nvidia-elements/foundations/internal/i18n';\nimport { state } from 'lit/decorators/state.js';\nimport { FormControlMixin } from '@nvidia-elements/forms/mixins';\nimport { type IconName, Icon } from '@nvidia-elements/core/icon';\nimport { Control } from '@nvidia-elements/core/forms';\nimport { Divider } from '@nvidia-elements/core/divider';\nimport { Menu, MenuItem } from '@nvidia-elements/core/menu';\nimport { Switch } from '@nvidia-elements/core/switch';\nimport styles from './preferences-input.css?inline';\n\n/* eslint-disable jsdoc/no-types */\n// Explicit JSDoc types because the CEM analyzer loses the inherited generic specialization.\n\nexport type ColorScheme = 'auto' | 'light' | 'dark' | 'high-contrast';\nexport type Scale = 'default' | 'compact' | 'relaxed';\nexport type Variant = 'reduced-motion';\n\nconst colorSchemes: ColorScheme[] = ['auto', 'light', 'dark', 'high-contrast'];\nconst scales: Scale[] = ['default', 'compact'];\nconst i18nDefaults = {\n  theme: 'theme',\n  scale: 'scale',\n  reducedMotion: 'reduced motion',\n  colorScheme: 'color scheme'\n} satisfies I18nDefaults;\nconst colorSchemesIcons = {\n  auto: 'computer',\n  light: 'sun',\n  dark: 'moon',\n  'high-contrast': 'circle-half'\n} satisfies Record<ColorScheme, IconName>;\n\nfunction getActivePreferences(element = globalThis.document.documentElement) {\n  const computedStyle = getComputedStyle(element);\n\n  return {\n    light: computedStyle.getPropertyValue('--nve-config-color-scheme-light') === 'true',\n    dark: computedStyle.getPropertyValue('--nve-config-color-scheme-dark') === 'true',\n    'high-contrast': computedStyle.getPropertyValue('--nve-config-color-scheme-high-contrast') === 'true',\n    compact: computedStyle.getPropertyValue('--nve-config-scale-compact') === 'true',\n    'reduced-motion': computedStyle.getPropertyValue('--nve-config-reduced-motion') === 'true'\n  } satisfies Partial<Record<ColorScheme | Scale | Variant, boolean>>;\n}\n\nexport interface PreferencesInputValue {\n  'color-scheme'?: ColorScheme | string;\n  scale?: Scale | string;\n  'reduced-motion'?: boolean;\n}\n\n/**\n * @element nve-preferences-input\n * @description A preferences input is a widget for controlling apperance. Stylesheets register to the preferences input by including a css-property, see Standard for an example.\n * @documentation https://nvidia.github.io/elements/docs/elements/preferences-input/\n * @since 1.23.7\n * @entrypoint \\@nvidia-elements/core/preferences-input\n * @property {PreferencesInputValue} value - Contains the current color scheme, scale, and reduced motion preferences. Assign an object through JavaScript or provide its JSON serialization in the HTML `value` attribute.\n * @attribute {string} value - JSON object parsed as `PreferencesInputValue`.\n * @event input - Dispatched when the value has changed\n * @event change - Dispatched when the value has changed\n * @cssprop --color\n * @cssprop --width\n * @csspart control - The control wrapper elements that contain the labels and menus\n * @csspart menu - The menu elements that display color scheme and scale options\n * @csspart menu-item - The individual menu item elements for each selectable option\n * @csspart icon - The icon element displayed next to color scheme options\n * @csspart divider - The divider elements that separate preference sections\n * @csspart switch - The switch element for the reduced motion toggle\n *\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/listbox/\n *\n */\n@scopedRegistry()\nexport class PreferencesInput extends FormControlMixin<typeof LitElement, PreferencesInputValue>(LitElement) {\n  #i18nController: I18nController<this> = new I18nController<this>(this, i18nDefaults);\n\n  /**\n   * Enables updating internal string values for internationalization.\n   */\n  @property({ type: Object }) i18n = this.#i18nController.i18n;\n\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-preferences-input',\n    version: '0.0.0',\n    valueSchema: {\n      type: 'object' as const,\n      properties: {\n        'color-scheme': { type: 'string' as const },\n        scale: { type: 'string' as const },\n        'reduced-motion': { type: 'boolean' as const }\n      }\n    }\n  };\n\n  static elementDefinitions = {\n    [Control.metadata.tag]: Control,\n    [Divider.metadata.tag]: Divider,\n    [Icon.metadata.tag]: Icon,\n    [Menu.metadata.tag]: Menu,\n    [MenuItem.metadata.tag]: MenuItem,\n    [Switch.metadata.tag]: Switch\n  };\n\n  @state() private activePreferences: ReturnType<typeof getActivePreferences> = {\n    light: false,\n    dark: false,\n    'high-contrast': false,\n    compact: false,\n    'reduced-motion': false\n  };\n\n  // eslint-disable-next-line max-lines-per-function\n  render() {\n    return html`\n      <div internal-host>\n        <nve-control part=\"control\">\n          <label>${this.i18n.colorScheme}</label>\n          <nve-menu part=\"menu\" nve-control>\n          ${colorSchemes.map(\n            value => html`\n            <nve-menu-item part=\"menu-item\"\n              .selected=${this.value?.['color-scheme'] === value}\n              .value=${value}\n              @click=${() => this.#setColorScheme(value)}\n            >\n              <nve-icon part=\"icon\" name=${colorSchemesIcons[value]}></nve-icon> ${value}\n            </nve-menu-item>\n            `\n          )}\n          </nve-menu>\n        </nve-control>\n        ${\n          this.activePreferences['compact']\n            ? html`\n        <nve-divider part=\"divider\"></nve-divider>\n        <nve-control part=\"control\">\n          <label>${this.i18n.scale}</label>\n          <nve-menu part=\"menu\" nve-control>\n          ${scales.map(\n            value => html`\n            <nve-menu-item part=\"menu-item\"\n              .selected=${this.value?.['scale'] === value}\n              .value=${value}\n              @click=${() => this.#setScale(value)}\n            >\n              ${value}\n            </nve-menu-item>\n            `\n          )}\n          </nve-menu>\n        </nve-control>\n          `\n            : ''\n        }\n        ${\n          this.activePreferences['reduced-motion']\n            ? html`\n        <nve-divider part=\"divider\"></nve-divider>\n        <nve-switch part=\"switch\">\n          <label>${this.i18n.reducedMotion}</label>\n          <input\n            type=\"checkbox\"\n            value=\"reduced-motion\"\n            .checked=${this.value?.['reduced-motion']}\n            @change=${(e: { target: HTMLInputElement }) => this.#setReducedMotion(e.target.checked)}\n          />\n        </nve-switch>`\n            : ''\n        }\n      </div>\n    `;\n  }\n\n  constructor() {\n    super();\n    this.value = {\n      'color-scheme': 'auto',\n      'reduced-motion': false,\n      scale: 'default'\n    };\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute('nve-control', '');\n    this.#updatePreferences();\n  }\n\n  /** @private */\n  updateValue(value: PreferencesInputValue) {\n    super.updateValue({ ...this.value, ...value });\n    this.#updatePreferences();\n  }\n\n  #updatePreferences() {\n    /* istanbul ignore else -- Lit SSR mode is not reachable in browser unit tests. */\n    if (!isServer) {\n      const preferences = getActivePreferences();\n      if (JSON.stringify(this.activePreferences) !== JSON.stringify(preferences)) {\n        this.activePreferences = preferences;\n      }\n    }\n  }\n\n  #setColorScheme(value: ColorScheme) {\n    this.value = { ...this.value, 'color-scheme': value };\n    this.#update();\n  }\n\n  #setScale(value: Scale) {\n    this.value = { ...this.value, scale: value };\n    this.#update();\n  }\n\n  #setReducedMotion(value: boolean) {\n    this.value = { ...this.value, 'reduced-motion': value };\n    this.#update();\n  }\n\n  #update() {\n    this.dispatchInputEvent();\n    this.dispatchChangeEvent();\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAuBA,IAAM,IAA8B;CAAC;CAAQ;CAAS;CAAQ;AAAe,GACvE,IAAkB,CAAC,WAAW,SAAS,GACvC,IAAe;CACnB,OAAO;CACP,OAAO;CACP,eAAe;CACf,aAAa;AACf,GACM,IAAoB;CACxB,MAAM;CACN,OAAO;CACP,MAAM;CACN,iBAAiB;AACnB;AAEA,SAAS,EAAqB,IAAU,WAAW,SAAS,iBAAiB;CAC3E,IAAM,IAAgB,iBAAiB,CAAO;CAE9C,OAAO;EACL,OAAO,EAAc,iBAAiB,iCAAiC,MAAM;EAC7E,MAAM,EAAc,iBAAiB,gCAAgC,MAAM;EAC3E,iBAAiB,EAAc,iBAAiB,yCAAyC,MAAM;EAC/F,SAAS,EAAc,iBAAiB,4BAA4B,MAAM;EAC1E,kBAAkB,EAAc,iBAAiB,6BAA6B,MAAM;CACtF;AACF;AA+BO,IAAM,IAAN,cAA+B,EAA2D,CAAU,CAAC,CAAC;CAC3G;;EAOgB,KAAA,SAAA,EAAU,CAAC,CAAM,CAAC;;;EAEP,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;GACT,aAAa;IACX,MAAM;IACN,YAAY;KACV,gBAAgB,EAAE,MAAM,SAAkB;KAC1C,OAAO,EAAE,MAAM,SAAkB;KACjC,kBAAkB,EAAE,MAAM,UAAmB;IAC/C;GACF;EACF;;;EAE4B,KAAA,qBAAA;IACzB,EAAQ,SAAS,MAAM;IACvB,EAAQ,SAAS,MAAM;IACvB,EAAK,SAAS,MAAM;IACpB,EAAK,SAAS,MAAM;IACpB,EAAS,SAAS,MAAM;IACxB,EAAO,SAAS,MAAM;EACzB;;CAWA,SAAS;EACP,OAAO,CAAI,yDAGI,KAAK,KAAK,YAAY,4CAE7B,EAAa,KACb,MAAS,CAAI,8CAEC,KAAK,QAAQ,oBAAoB,EAAM,YAC1C,EAAM,kBACA,KAAK,GAAgB,CAAK,EAAE,gCAEd,EAAkB,GAAO,eAAe,EAAM,iBAG/E,EAAE,2BAIF,KAAK,kBAAkB,UACnB,CAAI,gFAGC,KAAK,KAAK,MAAM,4CAEvB,EAAO,KACP,MAAS,CAAI,8CAEC,KAAK,OAAQ,UAAa,EAAM,YACnC,EAAM,kBACA,KAAK,GAAU,CAAK,EAAE,IAEnC,EAAM,iBAGZ,EAAE,6BAIE,GACL,GAEC,KAAK,kBAAkB,oBACnB,CAAI,8EAGC,KAAK,KAAK,cAAc,mEAIpB,KAAK,QAAQ,kBAAkB,cAC/B,MAAoC,KAAK,GAAkB,EAAE,OAAO,OAAO,EAAE,mBAGtF,GACL;CAGP;CAEA,cAAc;EAEZ,AADA,MAAM,GAtGgC,KAAA,KAAA,IAAI,EAAqB,MAAM,CAAY,GAKhD,KAAA,OAAA,KAAK,GAAgB,MA0BsB,KAAA,oBAAA;GAC5E,OAAO;GACP,MAAM;GACN,iBAAiB;GACjB,SAAS;GACT,kBAAkB;EACpB,GAkEE,KAAK,QAAQ;GACX,gBAAgB;GAChB,kBAAkB;GAClB,OAAO;EACT;CACF;CAEA,oBAAoB;EAGlB,AAFA,MAAM,kBAAkB,GACxB,KAAK,aAAa,eAAe,EAAE,GACnC,KAAK,GAAmB;CAC1B;CAGA,YAAY,GAA8B;EAExC,AADA,MAAM,YAAY;GAAE,GAAG,KAAK;GAAO,GAAG;EAAM,CAAC,GAC7C,KAAK,GAAmB;CAC1B;CAEA,KAAqB;;EAEnB,IAAI,CAAC,GAAU;GACb,IAAM,IAAc,EAAqB;GACzC,AAAI,KAAK,UAAU,KAAK,iBAAiB,MAAM,KAAK,UAAU,CAAW,MACvE,KAAK,oBAAoB;EAE7B;CACF;CAEA,GAAgB,GAAoB;EAElC,AADA,KAAK,QAAQ;GAAE,GAAG,KAAK;GAAO,gBAAgB;EAAM,GACpD,KAAK,GAAQ;CACf;CAEA,GAAU,GAAc;EAEtB,AADA,KAAK,QAAQ;GAAE,GAAG,KAAK;GAAO,OAAO;EAAM,GAC3C,KAAK,GAAQ;CACf;CAEA,GAAkB,GAAgB;EAEhC,AADA,KAAK,QAAQ;GAAE,GAAG,KAAK;GAAO,kBAAkB;EAAM,GACtD,KAAK,GAAQ;CACf;CAEA,KAAU;EAER,AADA,KAAK,mBAAmB,GACxB,KAAK,oBAAoB;CAC3B;AACF;AAlJG,EAAA,CAAA,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,GA0BzB,EAAA,CAAA,EAAM,CAAA,GAAA,EAAA,WAAA,qBAAA,KAAA,CAAA,GAjCR,IAAA,EAAA,CAAA,EAAe,CAAA,GAAA,CAAA"}
+{"version":3,"file":"preferences-input2.js","names":["styles","_decorate","__decorate","preferences_input_default","colorSchemes","scales","i18nDefaults","colorSchemesIcons","getActivePreferences","computedStyle","element","PreferencesInput","FormControlMixin","LitElement","useStyles","Control","Divider","Icon","Menu","MenuItem","Switch","value","#setColorScheme","\"compact\"","\"scale\"","#setScale","#setReducedMotion","#i18nController","I18nController","#updatePreferences","isServer","preferences","#update","property","state","scopedRegistry"],"sources":["../../src/preferences-input/preferences-input.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, isServer, LitElement } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { scopedRegistry, useStyles } from '@nvidia-elements/core/internal';\nimport { I18nController, type I18nDefaults } from '@nvidia-elements/foundations/internal/i18n';\nimport { state } from 'lit/decorators/state.js';\nimport { FormControlMixin } from '@nvidia-elements/forms/mixins';\nimport { type IconName, Icon } from '@nvidia-elements/core/icon';\nimport { Control } from '@nvidia-elements/core/forms';\nimport { Divider } from '@nvidia-elements/core/divider';\nimport { Menu, MenuItem } from '@nvidia-elements/core/menu';\nimport { Switch } from '@nvidia-elements/core/switch';\nimport styles from './preferences-input.css?inline';\n\n/* eslint-disable jsdoc/no-types */\n// Explicit JSDoc types because the CEM analyzer loses the inherited generic specialization.\n\nexport type ColorScheme = 'auto' | 'light' | 'dark' | 'high-contrast';\nexport type Scale = 'default' | 'compact' | 'relaxed';\nexport type Variant = 'reduced-motion';\n\nconst colorSchemes: ColorScheme[] = ['auto', 'light', 'dark', 'high-contrast'];\nconst scales: Scale[] = ['default', 'compact'];\nconst i18nDefaults = {\n  theme: 'theme',\n  scale: 'scale',\n  reducedMotion: 'reduced motion',\n  colorScheme: 'color scheme'\n} satisfies I18nDefaults;\nconst colorSchemesIcons = {\n  auto: 'computer',\n  light: 'sun',\n  dark: 'moon',\n  'high-contrast': 'circle-half'\n} satisfies Record<ColorScheme, IconName>;\n\nfunction getActivePreferences(element = globalThis.document.documentElement) {\n  const computedStyle = getComputedStyle(element);\n\n  return {\n    light: computedStyle.getPropertyValue('--nve-config-color-scheme-light') === 'true',\n    dark: computedStyle.getPropertyValue('--nve-config-color-scheme-dark') === 'true',\n    'high-contrast': computedStyle.getPropertyValue('--nve-config-color-scheme-high-contrast') === 'true',\n    compact: computedStyle.getPropertyValue('--nve-config-scale-compact') === 'true',\n    'reduced-motion': computedStyle.getPropertyValue('--nve-config-reduced-motion') === 'true'\n  } satisfies Partial<Record<ColorScheme | Scale | Variant, boolean>>;\n}\n\nexport interface PreferencesInputValue {\n  'color-scheme'?: ColorScheme | string;\n  scale?: Scale | string;\n  'reduced-motion'?: boolean;\n}\n\n/**\n * @element nve-preferences-input\n * @description A preferences input is a widget for controlling apperance. Stylesheets register to the preferences input by including a css-property, see Standard for an example.\n * @documentation https://nvidia.github.io/elements/docs/elements/preferences-input/\n * @since 1.23.7\n * @entrypoint \\@nvidia-elements/core/preferences-input\n * @property {PreferencesInputValue} value - Contains the current color scheme, scale, and reduced motion preferences. Assign an object through JavaScript or provide its JSON serialization in the HTML `value` attribute.\n * @attribute {string} value - JSON object parsed as `PreferencesInputValue`.\n * @event input - Dispatched when the value has changed\n * @event change - Dispatched when the value has changed\n * @cssprop --color\n * @cssprop --width\n * @csspart control - The control wrapper elements that contain the labels and menus\n * @csspart menu - The menu elements that display color scheme and scale options\n * @csspart menu-item - The individual menu item elements for each selectable option\n * @csspart icon - The icon element displayed next to color scheme options\n * @csspart divider - The divider elements that separate preference sections\n * @csspart switch - The switch element for the reduced motion toggle\n *\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/listbox/\n *\n */\n@scopedRegistry()\nexport class PreferencesInput extends FormControlMixin<typeof LitElement, PreferencesInputValue>(LitElement) {\n  #i18nController: I18nController<this> = new I18nController<this>(this, i18nDefaults);\n\n  /**\n   * Enables updating internal string values for internationalization.\n   */\n  @property({ type: Object }) i18n = this.#i18nController.i18n;\n\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-preferences-input',\n    version: '0.0.0',\n    valueSchema: {\n      type: 'object' as const,\n      properties: {\n        'color-scheme': { type: 'string' as const },\n        scale: { type: 'string' as const },\n        'reduced-motion': { type: 'boolean' as const }\n      }\n    }\n  };\n\n  static elementDefinitions = {\n    [Control.metadata.tag]: Control,\n    [Divider.metadata.tag]: Divider,\n    [Icon.metadata.tag]: Icon,\n    [Menu.metadata.tag]: Menu,\n    [MenuItem.metadata.tag]: MenuItem,\n    [Switch.metadata.tag]: Switch\n  };\n\n  @state() private activePreferences: ReturnType<typeof getActivePreferences> = {\n    light: false,\n    dark: false,\n    'high-contrast': false,\n    compact: false,\n    'reduced-motion': false\n  };\n\n  // eslint-disable-next-line max-lines-per-function\n  render() {\n    return html`\n      <div internal-host>\n        <nve-control part=\"control\">\n          <label>${this.i18n.colorScheme}</label>\n          <nve-menu part=\"menu\" nve-control>\n          ${colorSchemes.map(\n            value => html`\n            <nve-menu-item part=\"menu-item\"\n              .selected=${this.value?.['color-scheme'] === value}\n              .value=${value}\n              @click=${() => this.#setColorScheme(value)}\n            >\n              <nve-icon part=\"icon\" name=${colorSchemesIcons[value]}></nve-icon> ${value}\n            </nve-menu-item>\n            `\n          )}\n          </nve-menu>\n        </nve-control>\n        ${\n          this.activePreferences['compact']\n            ? html`\n        <nve-divider part=\"divider\"></nve-divider>\n        <nve-control part=\"control\">\n          <label>${this.i18n.scale}</label>\n          <nve-menu part=\"menu\" nve-control>\n          ${scales.map(\n            value => html`\n            <nve-menu-item part=\"menu-item\"\n              .selected=${this.value?.['scale'] === value}\n              .value=${value}\n              @click=${() => this.#setScale(value)}\n            >\n              ${value}\n            </nve-menu-item>\n            `\n          )}\n          </nve-menu>\n        </nve-control>\n          `\n            : ''\n        }\n        ${\n          this.activePreferences['reduced-motion']\n            ? html`\n        <nve-divider part=\"divider\"></nve-divider>\n        <nve-switch part=\"switch\">\n          <label>${this.i18n.reducedMotion}</label>\n          <input\n            type=\"checkbox\"\n            value=\"reduced-motion\"\n            .checked=${this.value?.['reduced-motion']}\n            @change=${(e: { target: HTMLInputElement }) => this.#setReducedMotion(e.target.checked)}\n          />\n        </nve-switch>`\n            : ''\n        }\n      </div>\n    `;\n  }\n\n  constructor() {\n    super();\n    this.value = {\n      'color-scheme': 'auto',\n      'reduced-motion': false,\n      scale: 'default'\n    };\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute('nve-control', '');\n    this.#updatePreferences();\n  }\n\n  /** @private */\n  updateValue(value: PreferencesInputValue) {\n    super.updateValue({ ...this.value, ...value });\n    this.#updatePreferences();\n  }\n\n  #updatePreferences() {\n    /* istanbul ignore else -- Lit SSR mode is not reachable in browser unit tests. */\n    if (!isServer) {\n      const preferences = getActivePreferences();\n      if (JSON.stringify(this.activePreferences) !== JSON.stringify(preferences)) {\n        this.activePreferences = preferences;\n      }\n    }\n  }\n\n  #setColorScheme(value: ColorScheme) {\n    this.value = { ...this.value, 'color-scheme': value };\n    this.#update();\n  }\n\n  #setScale(value: Scale) {\n    this.value = { ...this.value, scale: value };\n    this.#update();\n  }\n\n  #setReducedMotion(value: boolean) {\n    this.value = { ...this.value, 'reduced-motion': value };\n    this.#update();\n  }\n\n  #update() {\n    this.dispatchInputEvent();\n    this.dispatchChangeEvent();\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAuBA,IAAMI,IAA8B;CAAC;CAAQ;CAAS;CAAQ;AAAe,GACvEC,IAAkB,CAAC,WAAW,SAAS,GACvCC,IAAe;CACnB,OAAO;CACP,OAAO;CACP,eAAe;CACf,aAAa;AACf,GACMC,IAAoB;CACxB,MAAM;CACN,OAAO;CACP,MAAM;CACN,iBAAiB;AACnB;AAEA,SAASC,EAAqB,IAAU,WAAW,SAAS,iBAAiB;CAC3E,IAAMC,IAAgB,iBAAiBC,CAAO;CAE9C,OAAO;EACL,OAAOD,EAAc,iBAAiB,iCAAiC,MAAM;EAC7E,MAAMA,EAAc,iBAAiB,gCAAgC,MAAM;EAC3E,iBAAiBA,EAAc,iBAAiB,yCAAyC,MAAM;EAC/F,SAASA,EAAc,iBAAiB,4BAA4B,MAAM;EAC1E,kBAAkBA,EAAc,iBAAiB,6BAA6B,MAAM;CACtF;AACF;AA+BO,IAAME,IAAN,cAA+BC,EAA2DC,CAAU,CAAC,CAAC;CAC3G;;EAOgB,KAAA,SAAAC,EAAU,CAACd,CAAM,CAAC;;;EAEP,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;GACT,aAAa;IACX,MAAM;IACN,YAAY;KACV,gBAAgB,EAAE,MAAM,SAAkB;KAC1C,OAAO,EAAE,MAAM,SAAkB;KACjC,kBAAkB,EAAE,MAAM,UAAmB;IAC/C;GACF;EACF;;;EAE4B,KAAA,qBAAA;IACzBe,EAAQ,SAAS,MAAMA;IACvBC,EAAQ,SAAS,MAAMA;IACvBC,EAAK,SAAS,MAAMA;IACpBC,EAAK,SAAS,MAAMA;IACpBC,EAAS,SAAS,MAAMA;IACxBC,EAAO,SAAS,MAAMA;EACzB;;CAWA,SAAS;EACP,OAAO,CAAI,yDAGI,KAAK,KAAK,YAAY,4CAE7BhB,EAAa,KACb,MAAS,CAAI,8CAEC,KAAK,QAAQ,oBAAoBiB,EAAM,YAC1CA,EAAM,kBACA,KAAKC,GAAgBD,CAAK,EAAE,gCAEdd,EAAkBc,GAAO,eAAeA,EAAM,iBAG/E,EAAE,2BAIF,KAAK,kBAAkBE,UACnB,CAAI,gFAGC,KAAK,KAAK,MAAM,4CAEvBlB,EAAO,KACP,MAAS,CAAI,8CAEC,KAAK,OAAQmB,UAAaH,EAAM,YACnCA,EAAM,kBACA,KAAKI,GAAUJ,CAAK,EAAE,IAEnCA,EAAM,iBAGZ,EAAE,6BAIE,GACL,GAEC,KAAK,kBAAkB,oBACnB,CAAI,8EAGC,KAAK,KAAK,cAAc,mEAIpB,KAAK,QAAQ,kBAAkB,cAC/B,MAAoC,KAAKK,GAAkB,EAAE,OAAO,OAAO,EAAE,mBAGtF,GACL;CAGP;CAEA,cAAc;EAEZ,AADA,MAAM,GAtGgC,KAAAC,KAAA,IAAIC,EAAqB,MAAMtB,CAAY,GAKhD,KAAA,OAAA,KAAKqB,GAAgB,MA0BsB,KAAA,oBAAA;GAC5E,OAAO;GACP,MAAM;GACN,iBAAiB;GACjB,SAAS;GACT,kBAAkB;EACpB,GAkEE,KAAK,QAAQ;GACX,gBAAgB;GAChB,kBAAkB;GAClB,OAAO;EACT;CACF;CAEA,oBAAoB;EAGlB,AAFA,MAAM,kBAAkB,GACxB,KAAK,aAAa,eAAe,EAAE,GACnC,KAAKE,GAAmB;CAC1B;CAGA,YAAY,GAA8B;EAExC,AADA,MAAM,YAAY;GAAE,GAAG,KAAK;GAAO,GAAGR;EAAM,CAAC,GAC7C,KAAKQ,GAAmB;CAC1B;CAEA,KAAqB;;EAEnB,IAAI,CAACC,GAAU;GACb,IAAMC,IAAcvB,EAAqB;GACzC,AAAI,KAAK,UAAU,KAAK,iBAAiB,MAAM,KAAK,UAAUuB,CAAW,MACvE,KAAK,oBAAoBA;EAE7B;CACF;CAEA,GAAgB,GAAoB;EAElC,AADA,KAAK,QAAQ;GAAE,GAAG,KAAK;GAAO,gBAAgBV;EAAM,GACpD,KAAKW,GAAQ;CACf;CAEA,GAAU,GAAc;EAEtB,AADA,KAAK,QAAQ;GAAE,GAAG,KAAK;GAAO,OAAOX;EAAM,GAC3C,KAAKW,GAAQ;CACf;CAEA,GAAkB,GAAgB;EAEhC,AADA,KAAK,QAAQ;GAAE,GAAG,KAAK;GAAO,kBAAkBX;EAAM,GACtD,KAAKW,GAAQ;CACf;CAEA,KAAU;EAER,AADA,KAAK,mBAAmB,GACxB,KAAK,oBAAoB;CAC3B;AACF;AAlJG/B,EAAA,CAAAgC,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAAtB,EAAA,WAAA,QAAA,KAAA,CAAA,GA0BzBV,EAAA,CAAAiC,EAAM,CAAA,GAAAvB,EAAA,WAAA,qBAAA,KAAA,CAAA,GAjCR,IAAAV,EAAA,CAAAkC,EAAe,CAAA,GAAAxB,CAAA"}

package/dist/progress-bar/define.js

@@ -1,7 +1,6 @@
 import { ProgressBar as e } from "./progress-bar2.js";
 import { define as t } from "@nvidia-elements/foundations/internal/define";
-//#region src/progress-bar/define.ts
+// src/progress-bar/define.ts
 t(e);
-//#endregion
 
 //# sourceMappingURL=define.js.map

package/dist/progress-bar/define.js.map

@@ -1 +1 @@
-{"version":3,"file":"define.js","names":[],"sources":["../../src/progress-bar/define.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { define } from '@nvidia-elements/foundations/internal/define';\nimport { ProgressBar } from '@nvidia-elements/core/progress-bar';\n\ndefine(ProgressBar);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nve-progress-bar': ProgressBar;\n  }\n}\n"],"mappings":";;;AAMA,EAAO,CAAW"}
+{"version":3,"file":"define.js","names":["define","ProgressBar"],"sources":["../../src/progress-bar/define.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { define } from '@nvidia-elements/foundations/internal/define';\nimport { ProgressBar } from '@nvidia-elements/core/progress-bar';\n\ndefine(ProgressBar);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nve-progress-bar': ProgressBar;\n  }\n}\n"],"mappings":";;;AAMAA,EAAOC,CAAW"}

package/dist/progress-bar/index.js

@@ -1,2 +1 @@
-import { ProgressBar as e } from "./progress-bar2.js";
-export { e as ProgressBar };
+export { ProgressBar } from "./progress-bar2.js";

package/dist/progress-bar/progress-bar.examples.js

@@ -1,6 +1,5 @@
-//#region src/progress-bar/progress-bar.examples.ts
+// src/progress-bar/progress-bar.examples.ts
 var e = "";
-//#endregion
 export { e as default };
 
 //# sourceMappingURL=progress-bar.examples.js.map

package/dist/progress-bar/progress-bar.examples.js.map

@@ -1 +1 @@
-{"version":3,"file":"progress-bar.examples.js","names":[],"sources":["../../src/progress-bar/progress-bar.examples.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html } from 'lit';\nimport '@nvidia-elements/core/progress-bar/define.js';\n\nexport default {\n  title: 'Elements/Progress Bar',\n  component: 'nve-progress-bar',\n};\n\n/**\n * @summary Standard progress bar for representing completion levels from 0% to 100% for task tracking.\n */\nexport const Default = {\n  render: () => html`\n<nve-progress-bar value=\"50\"></nve-progress-bar>`\n};\n\n/**\n * @summary Progress bars with different status colors showing completion levels from 0% to 100% for task tracking.\n * @tags test-case\n */\nexport const Status = {\n  render: () => html`\n<div nve-layout=\"column gap:md pad:lg full\">\n  <nve-progress-bar value=\"0\"></nve-progress-bar>\n  <nve-progress-bar value=\"10\"></nve-progress-bar>\n  <nve-progress-bar status=\"accent\" value=\"25\"></nve-progress-bar>\n  <nve-progress-bar status=\"success\" value=\"50\"></nve-progress-bar>\n  <nve-progress-bar status=\"warning\" value=\"75\"></nve-progress-bar>\n  <nve-progress-bar status=\"danger\" value=\"100\"></nve-progress-bar>\n</div>`\n};\n\n/**\n * @summary Progress bars with custom max values for representing non-percentage based progress like file counts or steps.\n * @tags test-case\n */\nexport const Max = {\n  render: () => html`\n<div nve-layout=\"column gap:md pad:lg full\">\n  <nve-progress-bar status=\"accent\" value=\"25\" max=\"50\"></nve-progress-bar>\n  <nve-progress-bar status=\"accent\" value=\"45\" max=\"50\"></nve-progress-bar>\n</div>\n  `\n};\n\n/**\n * @summary Use a labeled progress bar with percentage display to communicate upload or task status.\n * @tags pattern\n */\nexport const Labeled = {\n  render: () => html`\n<div nve-layout=\"column gap:xs pad:lg align:horizontal-stretch full\">\n  <div nve-layout=\"row align:space-between\">\n    <p nve-text=\"label sm\">Upload Status</p>\n    <p nve-text=\"label emphasis sm\">80%</p>\n  </div>\n  <nve-progress-bar status=\"accent\" value=\"80\"></nve-progress-bar>\n</div>\n  `\n};\n\n/**\n * @summary Indeterminate progress bar for showing activity when completion time is unknown, like loading or processing.\n */\nexport const Indeterminate = {\n  render: () => html`\n<nve-progress-bar></nve-progress-bar>`\n};\n\n/**\n * @summary Progress bars display as an animated loading indicator when no `value` attribute exists.\n * @tags test-case\n */\nexport const IndeterminateStatusColors = {\n  render: () => html`\n<div nve-layout=\"column gap:md full\">\n  <nve-progress-bar status=\"accent\"></nve-progress-bar>\n  <nve-progress-bar status=\"warning\"></nve-progress-bar>\n  <nve-progress-bar status=\"danger\"></nve-progress-bar>\n</div>`\n};\n\n/**\n * @summary Indeterminate progress bar with custom color, height, and opacity for brand-specific styling and visual emphasis.\n * @tags test-case\n */\nexport const IndeterminateCustomColor = {\n  render: () => html`\n<nve-progress-bar style=\"--accent-color: var(--nve-sys-accent-primary-background); --height: var(--nve-ref-size-150); --opacity: 1;\"></nve-progress-bar>`\n};\n\n/**\n * @summary Progress bars with custom heights for different visual prominence levels and layout requirements.\n * @tags test-case\n * @description The progress bar's height accepts customization through the `--height` CSS custom property. This allows you to create progress bars that match your application's visual hierarchy and emphasis needs. For consistency and theming, use design system tokens, but any value that suits your layout also works.\n */\nexport const CustomHeights = {\n  render: () => html`\n<div nve-layout=\"column gap:md full\">\n  <nve-progress-bar style=\"--height: var(--nve-ref-size-100);\"></nve-progress-bar>\n  <nve-progress-bar style=\"--height: var(--nve-ref-size-200);\"></nve-progress-bar>\n  <nve-progress-bar style=\"--height: var(--nve-ref-size-300);\"></nve-progress-bar>\n</div>`\n};\n"],"mappings":";AAGA,IAAA,IAAS"}
+{"version":3,"file":"progress-bar.examples.js","names":["progress_bar_examples_default"],"sources":["../../src/progress-bar/progress-bar.examples.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html } from 'lit';\nimport '@nvidia-elements/core/progress-bar/define.js';\n\nexport default {\n  title: 'Elements/Progress Bar',\n  component: 'nve-progress-bar',\n};\n\n/**\n * @summary Standard progress bar for representing completion levels from 0% to 100% for task tracking.\n */\nexport const Default = {\n  render: () => html`\n<nve-progress-bar value=\"50\"></nve-progress-bar>`\n};\n\n/**\n * @summary Progress bars with different status colors showing completion levels from 0% to 100% for task tracking.\n * @tags test-case\n */\nexport const Status = {\n  render: () => html`\n<div nve-layout=\"column gap:md pad:lg full\">\n  <nve-progress-bar value=\"0\"></nve-progress-bar>\n  <nve-progress-bar value=\"10\"></nve-progress-bar>\n  <nve-progress-bar status=\"accent\" value=\"25\"></nve-progress-bar>\n  <nve-progress-bar status=\"success\" value=\"50\"></nve-progress-bar>\n  <nve-progress-bar status=\"warning\" value=\"75\"></nve-progress-bar>\n  <nve-progress-bar status=\"danger\" value=\"100\"></nve-progress-bar>\n</div>`\n};\n\n/**\n * @summary Progress bars with custom max values for representing non-percentage based progress like file counts or steps.\n * @tags test-case\n */\nexport const Max = {\n  render: () => html`\n<div nve-layout=\"column gap:md pad:lg full\">\n  <nve-progress-bar status=\"accent\" value=\"25\" max=\"50\"></nve-progress-bar>\n  <nve-progress-bar status=\"accent\" value=\"45\" max=\"50\"></nve-progress-bar>\n</div>\n  `\n};\n\n/**\n * @summary Use a labeled progress bar with percentage display to communicate upload or task status.\n * @tags pattern\n */\nexport const Labeled = {\n  render: () => html`\n<div nve-layout=\"column gap:xs pad:lg align:horizontal-stretch full\">\n  <div nve-layout=\"row align:space-between\">\n    <p nve-text=\"label sm\">Upload Status</p>\n    <p nve-text=\"label emphasis sm\">80%</p>\n  </div>\n  <nve-progress-bar status=\"accent\" value=\"80\"></nve-progress-bar>\n</div>\n  `\n};\n\n/**\n * @summary Indeterminate progress bar for showing activity when completion time is unknown, like loading or processing.\n */\nexport const Indeterminate = {\n  render: () => html`\n<nve-progress-bar></nve-progress-bar>`\n};\n\n/**\n * @summary Progress bars display as an animated loading indicator when no `value` attribute exists.\n * @tags test-case\n */\nexport const IndeterminateStatusColors = {\n  render: () => html`\n<div nve-layout=\"column gap:md full\">\n  <nve-progress-bar status=\"accent\"></nve-progress-bar>\n  <nve-progress-bar status=\"warning\"></nve-progress-bar>\n  <nve-progress-bar status=\"danger\"></nve-progress-bar>\n</div>`\n};\n\n/**\n * @summary Indeterminate progress bar with custom color, height, and opacity for brand-specific styling and visual emphasis.\n * @tags test-case\n */\nexport const IndeterminateCustomColor = {\n  render: () => html`\n<nve-progress-bar style=\"--accent-color: var(--nve-sys-accent-primary-background); --height: var(--nve-ref-size-150); --opacity: 1;\"></nve-progress-bar>`\n};\n\n/**\n * @summary Progress bars with custom heights for different visual prominence levels and layout requirements.\n * @tags test-case\n * @description The progress bar's height accepts customization through the `--height` CSS custom property. This allows you to create progress bars that match your application's visual hierarchy and emphasis needs. For consistency and theming, use design system tokens, but any value that suits your layout also works.\n */\nexport const CustomHeights = {\n  render: () => html`\n<div nve-layout=\"column gap:md full\">\n  <nve-progress-bar style=\"--height: var(--nve-ref-size-100);\"></nve-progress-bar>\n  <nve-progress-bar style=\"--height: var(--nve-ref-size-200);\"></nve-progress-bar>\n  <nve-progress-bar style=\"--height: var(--nve-ref-size-300);\"></nve-progress-bar>\n</div>`\n};\n"],"mappings":";AAGA,IAAAA,IAAS"}

package/dist/progress-bar/progress-bar.js

@@ -1,6 +1,5 @@
-//#region src/progress-bar/progress-bar.css?inline
+// src/progress-bar/progress-bar.css?inline
 var e = ":host{display:flex;width:100%;line-height:0;--height: var(--nve-ref-size-200);--opacity: 1;--accent-color: var(--nve-sys-interaction-color);--background: var(--nve-sys-interaction-background)}:host([status=\"accent\"]){--accent-color: var(--nve-sys-accent-secondary-background)}:host([status=\"success\"]){--accent-color: var(--nve-sys-support-success-color)}:host([status=\"warning\"]){--accent-color: var(--nve-sys-support-warning-color)}:host([status=\"danger\"]){--accent-color: var(--nve-sys-support-danger-color)}progress{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--background);border-radius:var(--nve-ref-border-radius-full);height:var(--height);opacity:var(--opacity);width:100%}progress[value]::-webkit-progress-bar{background-color:inherit;border-radius:var(--nve-ref-border-radius-full)}progress[value]::-webkit-progress-value{border-radius:var(--nve-ref-border-radius-full);border-top-right-radius:0;border-bottom-right-radius:0;background-color:var(--accent-color)}progress[value].full::-webkit-progress-value{border-top-right-radius:var(--nve-ref-border-radius-full);border-bottom-right-radius:var(--nve-ref-border-radius-full)}progress[value].min-width::-webkit-progress-value{min-width:5px}progress[value]::-moz-progress-bar{border-radius:var(--nve-ref-border-radius-full);border-top-right-radius:0;border-bottom-right-radius:0;background-color:var(--accent-color)}:host(:not([value])){--height: var(--nve-ref-size-100);--opacity: .75}progress.indeterminate{--accent-color-faded: color-mix(in srgb, var(--accent-color), transparent 90%);--indeterminate-gradient: linear-gradient(to right, var(--accent-color-faded) 10%, var(--accent-color));--indeterminate-gradient-reverse: linear-gradient(to left, var(--accent-color-faded) 10%, var(--accent-color));will-change:transform;background-image:var(--indeterminate-gradient);animation:indeterminate-animation calc(var(--nve-ref-animation-duration-400) * 3) infinite cubic-bezier(.645,.045,.355,1)}progress[value].indeterminate::-webkit-progress-value{border-radius:var(--nve-ref-border-radius-none);background-color:transparent!important}@keyframes indeterminate-animation{0%{transform:scaleX(.015);transform-origin:0% 0%}25%{transform:scaleX(.4)}50%{transform:scaleX(.015);transform-origin:100% 0%;background-image:var(--indeterminate-gradient)}50.1%{transform:scaleX(.015);transform-origin:100% 0%;background-image:var(--indeterminate-gradient-reverse)}75%{transform:scaleX(.4)}to{transform:scaleX(.015);transform-origin:0% 0%;background-image:var(--indeterminate-gradient-reverse)}}";
-//#endregion
 export { e as default };
 
 //# sourceMappingURL=progress-bar.js.map

package/dist/progress-bar/progress-bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"progress-bar.js","names":[],"sources":["../../src/progress-bar/progress-bar.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n:host {\n  display: flex;\n  width: 100%;\n  line-height: 0;\n  --height: var(--nve-ref-size-200);\n  --opacity: 1;\n  --accent-color: var(--nve-sys-interaction-color);\n  --background: var(--nve-sys-interaction-background);\n}\n\n:host([status='accent']) {\n  --accent-color: var(--nve-sys-accent-secondary-background);\n}\n\n:host([status='success']) {\n  --accent-color: var(--nve-sys-support-success-color);\n}\n\n:host([status='warning']) {\n  --accent-color: var(--nve-sys-support-warning-color);\n}\n\n:host([status='danger']) {\n  --accent-color: var(--nve-sys-support-danger-color);\n}\n\nprogress {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  background: var(--background);\n  border-radius: var(--nve-ref-border-radius-full);\n  height: var(--height);\n  opacity: var(--opacity);\n  width: 100%;\n}\n\nprogress[value]::-webkit-progress-bar {\n  background-color: inherit;\n  border-radius: var(--nve-ref-border-radius-full);\n}\n\nprogress[value]::-webkit-progress-value {\n  border-radius: var(--nve-ref-border-radius-full);\n  border-top-right-radius: 0;\n  border-bottom-right-radius: 0;\n  background-color: var(--accent-color);\n}\n\nprogress[value].full::-webkit-progress-value {\n  border-top-right-radius: var(--nve-ref-border-radius-full);\n  border-bottom-right-radius: var(--nve-ref-border-radius-full);\n}\n\nprogress[value].min-width::-webkit-progress-value {\n  min-width: 5px;\n}\n\nprogress[value]::-moz-progress-bar {\n  border-radius: var(--nve-ref-border-radius-full);\n  border-top-right-radius: 0;\n  border-bottom-right-radius: 0;\n  background-color: var(--accent-color);\n}\n\n:host(:not([value])) {\n  --height: var(--nve-ref-size-100);\n  --opacity: 0.75;\n}\n\nprogress.indeterminate {\n  --accent-color-faded: color-mix(in srgb, var(--accent-color), transparent 90%);\n  --indeterminate-gradient: linear-gradient(to right, var(--accent-color-faded) 10%, var(--accent-color));\n  --indeterminate-gradient-reverse: linear-gradient(to left, var(--accent-color-faded) 10%, var(--accent-color));\n  will-change: transform;\n  background-image: var(--indeterminate-gradient);\n  animation: indeterminate-animation calc(var(--nve-ref-animation-duration-400) * 3) infinite\n    cubic-bezier(0.645, 0.045, 0.355, 1);\n}\n\nprogress[value].indeterminate::-webkit-progress-value {\n  border-radius: var(--nve-ref-border-radius-none);\n  background-color: transparent !important;\n}\n\n@keyframes indeterminate-animation {\n  0% {\n    transform: scaleX(0.015);\n    transform-origin: 0% 0%;\n  }\n\n  25% {\n    transform: scaleX(0.4);\n  }\n\n  50% {\n    transform: scaleX(0.015);\n    transform-origin: 100% 0%;\n    background-image: var(--indeterminate-gradient);\n  }\n\n  50.1% {\n    transform: scaleX(0.015);\n    transform-origin: 100% 0%;\n    background-image: var(--indeterminate-gradient-reverse);\n  }\n\n  75% {\n    transform: scaleX(0.4);\n  }\n\n  100% {\n    transform: scaleX(0.015);\n    transform-origin: 0% 0%;\n    background-image: var(--indeterminate-gradient-reverse);\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"progress-bar.js","names":["progress_bar_default"],"sources":["../../src/progress-bar/progress-bar.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n:host {\n  display: flex;\n  width: 100%;\n  line-height: 0;\n  --height: var(--nve-ref-size-200);\n  --opacity: 1;\n  --accent-color: var(--nve-sys-interaction-color);\n  --background: var(--nve-sys-interaction-background);\n}\n\n:host([status='accent']) {\n  --accent-color: var(--nve-sys-accent-secondary-background);\n}\n\n:host([status='success']) {\n  --accent-color: var(--nve-sys-support-success-color);\n}\n\n:host([status='warning']) {\n  --accent-color: var(--nve-sys-support-warning-color);\n}\n\n:host([status='danger']) {\n  --accent-color: var(--nve-sys-support-danger-color);\n}\n\nprogress {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  background: var(--background);\n  border-radius: var(--nve-ref-border-radius-full);\n  height: var(--height);\n  opacity: var(--opacity);\n  width: 100%;\n}\n\nprogress[value]::-webkit-progress-bar {\n  background-color: inherit;\n  border-radius: var(--nve-ref-border-radius-full);\n}\n\nprogress[value]::-webkit-progress-value {\n  border-radius: var(--nve-ref-border-radius-full);\n  border-top-right-radius: 0;\n  border-bottom-right-radius: 0;\n  background-color: var(--accent-color);\n}\n\nprogress[value].full::-webkit-progress-value {\n  border-top-right-radius: var(--nve-ref-border-radius-full);\n  border-bottom-right-radius: var(--nve-ref-border-radius-full);\n}\n\nprogress[value].min-width::-webkit-progress-value {\n  min-width: 5px;\n}\n\nprogress[value]::-moz-progress-bar {\n  border-radius: var(--nve-ref-border-radius-full);\n  border-top-right-radius: 0;\n  border-bottom-right-radius: 0;\n  background-color: var(--accent-color);\n}\n\n:host(:not([value])) {\n  --height: var(--nve-ref-size-100);\n  --opacity: 0.75;\n}\n\nprogress.indeterminate {\n  --accent-color-faded: color-mix(in srgb, var(--accent-color), transparent 90%);\n  --indeterminate-gradient: linear-gradient(to right, var(--accent-color-faded) 10%, var(--accent-color));\n  --indeterminate-gradient-reverse: linear-gradient(to left, var(--accent-color-faded) 10%, var(--accent-color));\n  will-change: transform;\n  background-image: var(--indeterminate-gradient);\n  animation: indeterminate-animation calc(var(--nve-ref-animation-duration-400) * 3) infinite\n    cubic-bezier(0.645, 0.045, 0.355, 1);\n}\n\nprogress[value].indeterminate::-webkit-progress-value {\n  border-radius: var(--nve-ref-border-radius-none);\n  background-color: transparent !important;\n}\n\n@keyframes indeterminate-animation {\n  0% {\n    transform: scaleX(0.015);\n    transform-origin: 0% 0%;\n  }\n\n  25% {\n    transform: scaleX(0.4);\n  }\n\n  50% {\n    transform: scaleX(0.015);\n    transform-origin: 100% 0%;\n    background-image: var(--indeterminate-gradient);\n  }\n\n  50.1% {\n    transform: scaleX(0.015);\n    transform-origin: 100% 0%;\n    background-image: var(--indeterminate-gradient-reverse);\n  }\n\n  75% {\n    transform: scaleX(0.4);\n  }\n\n  100% {\n    transform: scaleX(0.015);\n    transform-origin: 0% 0%;\n    background-image: var(--indeterminate-gradient-reverse);\n  }\n}\n"],"mappings":""}

package/dist/progress-bar/progress-bar2.js

@@ -1,11 +1,11 @@
 import { scopedRegistry as e } from "../internal/decorators/scoped-registry.js";
 import { useStyles as t } from "../internal/styles/index.js";
-import n from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js";
+import n from "../_virtual/_@oxc-project_runtime@0.155.0/helpers/esm/decorate.js";
 import r from "./progress-bar.js";
 import { LitElement as i, html as a } from "lit";
 import { property as o } from "lit/decorators/property.js";
 import { classMap as s } from "lit/directives/class-map.js";
-//#region src/progress-bar/progress-bar.ts
+// src/progress-bar/progress-bar.ts
 var c = class extends i {
 	constructor(...e) {
 		super(...e), this.max = 100;
@@ -16,7 +16,7 @@ var c = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-progress-bar",
-			version: "2.20.1"
+			version: "2.20.3"
 		};
 	}
 	render() {
@@ -35,7 +35,6 @@ n([o({
 	type: String,
 	reflect: !0
 })], c.prototype, "status", void 0), c = n([e()], c);
-//#endregion
 export { c as ProgressBar };
 
 //# sourceMappingURL=progress-bar2.js.map

package/dist/progress-bar/progress-bar2.js.map

@@ -1 +1 @@
-{"version":3,"file":"progress-bar2.js","names":[],"sources":["../../src/progress-bar/progress-bar.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 type { SupportStatus } from '@nvidia-elements/core/internal';\nimport { scopedRegistry, useStyles } from '@nvidia-elements/core/internal';\nimport { property } from 'lit/decorators/property.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport styles from './progress-bar.css?inline';\n\n/**\n * @element nve-progress-bar\n * @description A progress bar is a visual indicator of the status of a running task. Under the hood, the component uses the native HTML `progress` element to achieve proper a11y concerns.\n * @documentation https://nvidia.github.io/elements/docs/elements/progress-bar/\n * @since 0.16.0\n * @entrypoint \\@nvidia-elements/core/progress-bar\n * @cssprop --height\n * @cssprop --opacity\n * @cssprop --background\n * @cssprop --accent-color\n * @cssprop --indeterminate-gradient - Gradient used for indeterminate state animation\n * @aria https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/progressbar_role\n */\n@scopedRegistry()\nexport class ProgressBar extends LitElement {\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-progress-bar',\n    version: '0.0.0'\n  };\n\n  /** The current `value` of the progress indicator, set to the native HTML progress element. */\n  @property({ type: Number, reflect: true }) value?: number;\n\n  /** The `max` property sets the highest value that `value` scales to. */\n  @property({ type: Number }) max? = 100;\n\n  /** Defines visual treatment to represent a ongoing task or support status. */\n  @property({ type: String, reflect: true }) status: SupportStatus;\n\n  render() {\n    const classes = {\n      full: this.value === this.max,\n      'min-width': this.value !== undefined && this.value > 0,\n      indeterminate: this.value === undefined\n    };\n\n    return html`\n      <progress internal-host .max=${this.max as number} .value=${this.value === undefined ? (100 as number) : (this.value as number)} class=${classMap(classes)}></progress>\n    `;\n  }\n}\n"],"mappings":";;;;;;;;AAwBO,IAAM,IAAN,cAA0B,EAAW;;EAYP,aAAA,KAAA,MAAA;;;EAXnB,KAAA,SAAA,EAAU,CAAC,CAAM,CAAC;;;EAEP,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;EACX;;CAWA,SAAS;EACP,IAAM,IAAU;GACd,MAAM,KAAK,UAAU,KAAK;GAC1B,aAAa,KAAK,UAAU,KAAA,KAAa,KAAK,QAAQ;GACtD,eAAe,KAAK,UAAU,KAAA;EAChC;EAEA,OAAO,CAAI,iCACsB,KAAK,IAAc,YAAU,KAAK,UAAU,KAAA,IAAa,MAAkB,KAAK,MAAiB,WAAS,EAAS,CAAO,EAAE;CAE/J;AACF;AAnBG,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,GAGxC,EAAA,CAAA,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,OAAA,KAAA,CAAA,GAGzB,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,UAAA,KAAA,CAAA,GAhB1C,IAAA,EAAA,CAAA,EAAe,CAAA,GAAA,CAAA"}
+{"version":3,"file":"progress-bar2.js","names":["styles","_decorate","__decorate","progress_bar_default","ProgressBar","LitElement","_args","useStyles","classes","classMap","property","scopedRegistry"],"sources":["../../src/progress-bar/progress-bar.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 type { SupportStatus } from '@nvidia-elements/core/internal';\nimport { scopedRegistry, useStyles } from '@nvidia-elements/core/internal';\nimport { property } from 'lit/decorators/property.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport styles from './progress-bar.css?inline';\n\n/**\n * @element nve-progress-bar\n * @description A progress bar is a visual indicator of the status of a running task. Under the hood, the component uses the native HTML `progress` element to achieve proper a11y concerns.\n * @documentation https://nvidia.github.io/elements/docs/elements/progress-bar/\n * @since 0.16.0\n * @entrypoint \\@nvidia-elements/core/progress-bar\n * @cssprop --height\n * @cssprop --opacity\n * @cssprop --background\n * @cssprop --accent-color\n * @cssprop --indeterminate-gradient - Gradient used for indeterminate state animation\n * @aria https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/progressbar_role\n */\n@scopedRegistry()\nexport class ProgressBar extends LitElement {\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-progress-bar',\n    version: '0.0.0'\n  };\n\n  /** The current `value` of the progress indicator, set to the native HTML progress element. */\n  @property({ type: Number, reflect: true }) value?: number;\n\n  /** The `max` property sets the highest value that `value` scales to. */\n  @property({ type: Number }) max? = 100;\n\n  /** Defines visual treatment to represent a ongoing task or support status. */\n  @property({ type: String, reflect: true }) status: SupportStatus;\n\n  render() {\n    const classes = {\n      full: this.value === this.max,\n      'min-width': this.value !== undefined && this.value > 0,\n      indeterminate: this.value === undefined\n    };\n\n    return html`\n      <progress internal-host .max=${this.max as number} .value=${this.value === undefined ? (100 as number) : (this.value as number)} class=${classMap(classes)}></progress>\n    `;\n  }\n}\n"],"mappings":";;;;;;;;AAwBO,IAAMI,IAAN,cAA0BC,EAAW;;EAYP,A,aAAA,KAAA,MAAA;;;EAXnB,KAAA,SAAAE,EAAU,CAACP,CAAM,CAAC;;;EAEP,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;EACX;;CAWA,SAAS;EACP,IAAMQ,IAAU;GACd,MAAM,KAAK,UAAU,KAAK;GAC1B,aAAa,KAAK,UAAU,KAAA,KAAa,KAAK,QAAQ;GACtD,eAAe,KAAK,UAAU,KAAA;EAChC;EAEA,OAAO,CAAI,iCACsB,KAAK,IAAc,YAAU,KAAK,UAAU,KAAA,IAAa,MAAkB,KAAK,MAAiB,WAASC,EAASD,CAAO,EAAE;CAE/J;AACF;AAnBGP,EAAA,CAAAS,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAAN,EAAA,WAAA,SAAA,KAAA,CAAA,GAGxCH,EAAA,CAAAS,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAAN,EAAA,WAAA,OAAA,KAAA,CAAA,GAGzBH,EAAA,CAAAS,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAAN,EAAA,WAAA,UAAA,KAAA,CAAA,GAhB1C,IAAAH,EAAA,CAAAU,EAAe,CAAA,GAAAP,CAAA"}

package/dist/progress-dot/define.js

@@ -1,7 +1,6 @@
 import { ProgressDot as e } from "./progress-dot2.js";
 import { define as t } from "@nvidia-elements/foundations/internal/define";
-//#region src/progress-dot/define.ts
+// src/progress-dot/define.ts
 t(e);
-//#endregion
 
 //# sourceMappingURL=define.js.map

package/dist/progress-dot/define.js.map

@@ -1 +1 @@
-{"version":3,"file":"define.js","names":[],"sources":["../../src/progress-dot/define.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { define } from '@nvidia-elements/foundations/internal/define';\nimport { ProgressDot } from '@nvidia-elements/core/progress-dot';\n\ndefine(ProgressDot);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nve-progress-dot': ProgressDot;\n  }\n}\n"],"mappings":";;;AAMA,EAAO,CAAW"}
+{"version":3,"file":"define.js","names":["define","ProgressDot"],"sources":["../../src/progress-dot/define.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { define } from '@nvidia-elements/foundations/internal/define';\nimport { ProgressDot } from '@nvidia-elements/core/progress-dot';\n\ndefine(ProgressDot);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nve-progress-dot': ProgressDot;\n  }\n}\n"],"mappings":";;;AAMAA,EAAOC,CAAW"}

package/dist/progress-dot/index.js

@@ -1,2 +1 @@
-import { ProgressDot as e } from "./progress-dot2.js";
-export { e as ProgressDot };
+export { ProgressDot } from "./progress-dot2.js";

package/dist/progress-dot/progress-dot.examples.js

@@ -1,6 +1,5 @@
-//#region src/progress-dot/progress-dot.examples.ts
+// src/progress-dot/progress-dot.examples.ts
 var e = "";
-//#endregion
 export { e as default };
 
 //# sourceMappingURL=progress-dot.examples.js.map

package/dist/progress-dot/progress-dot.examples.js.map

@@ -1 +1 @@
-{"version":3,"file":"progress-dot.examples.js","names":[],"sources":["../../src/progress-dot/progress-dot.examples.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html } from 'lit';\nimport '@nvidia-elements/core/progress-dot/define.js';\n\nexport default {\n  title: 'Elements/Progress Dot',\n  component: 'nve-progress-dot'\n};\n\n/**\n * @summary Indeterminate dots communicate ongoing work when a completion percentage is unavailable.\n */\nexport const Default = {\n  render: () => html`<nve-progress-dot aria-label=\"Loading results\"></nve-progress-dot>`\n};\n\n/**\n * @summary Three indicator sizes fit loading feedback into compact rows or spacious panels.\n */\nexport const Size = {\n  render: () => html`\n    <div nve-layout=\"row gap:sm align:vertical-center\">\n      <nve-progress-dot size=\"sm\" aria-label=\"Loading results\"></nve-progress-dot>\n      <nve-progress-dot size=\"md\" aria-label=\"Loading results\"></nve-progress-dot>\n      <nve-progress-dot size=\"lg\" aria-label=\"Loading results\"></nve-progress-dot>\n    </div>\n  `\n};\n\n/**\n * @summary An adjacent label describes the pending task and supplies the indicator's accessible name.\n */\nexport const WithText = {\n  render: () => html`\n    <div nve-layout=\"row gap:xs\">\n      <span id=\"progress-dot-label\" nve-text=\"body sm muted\">Thinking</span><nve-progress-dot size=\"sm\" aria-labelledby=\"progress-dot-label\"></nve-progress-dot>\n    </div>\n  `\n};\n\n/**\n * @summary Button indicators inherit text color to keep loading feedback visible across button treatments.\n */\nexport const WithButton = {\n  render: () => html`\n    <div nve-layout=\"row gap:sm\">\n      <nve-button disabled aria-busy=\"true\">\n        <nve-progress-dot size=\"sm\" aria-hidden=\"true\"></nve-progress-dot>\n        Saving…\n      </nve-button>\n      <nve-button interaction=\"emphasis\" disabled aria-busy=\"true\">\n        <nve-progress-dot size=\"sm\" aria-hidden=\"true\"></nve-progress-dot>\n        Saving…\n      </nve-button>\n    </div>\n  `\n};\n\n/**\n * @summary Custom color, dimensions, and timing adapt loading feedback to its surrounding interface.\n * @tags theme\n */\nexport const CustomStyles = {\n  render: () => html`\n    <nve-progress-dot\n      aria-label=\"Loading results\"\n      style=\"--color: var(--nve-sys-support-accent-color); --width: var(--nve-ref-size-1000); --height: var(--nve-ref-size-600); --animation-duration: 2s\"\n    ></nve-progress-dot>\n  `\n};\n\n/**\n * @summary Static dots keep loading feedback visible when animation is unnecessary or distracting.\n * @tags test-case\n */\nexport const Static = {\n  render: () => html`\n    <nve-progress-dot aria-label=\"Loading results\" style=\"--animation-duration: 0s\"></nve-progress-dot>\n  `\n};\n"],"mappings":";AAGA,IAAA,IAAS"}
+{"version":3,"file":"progress-dot.examples.js","names":["progress_dot_examples_default"],"sources":["../../src/progress-dot/progress-dot.examples.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html } from 'lit';\nimport '@nvidia-elements/core/progress-dot/define.js';\n\nexport default {\n  title: 'Elements/Progress Dot',\n  component: 'nve-progress-dot'\n};\n\n/**\n * @summary Indeterminate dots communicate ongoing work when a completion percentage is unavailable.\n */\nexport const Default = {\n  render: () => html`<nve-progress-dot aria-label=\"Loading results\"></nve-progress-dot>`\n};\n\n/**\n * @summary Three indicator sizes fit loading feedback into compact rows or spacious panels.\n */\nexport const Size = {\n  render: () => html`\n    <div nve-layout=\"row gap:sm align:vertical-center\">\n      <nve-progress-dot size=\"sm\" aria-label=\"Loading results\"></nve-progress-dot>\n      <nve-progress-dot size=\"md\" aria-label=\"Loading results\"></nve-progress-dot>\n      <nve-progress-dot size=\"lg\" aria-label=\"Loading results\"></nve-progress-dot>\n    </div>\n  `\n};\n\n/**\n * @summary An adjacent label describes the pending task and supplies the indicator's accessible name.\n */\nexport const WithText = {\n  render: () => html`\n    <div nve-layout=\"row gap:xs\">\n      <span id=\"progress-dot-label\" nve-text=\"body sm muted\">Thinking</span><nve-progress-dot size=\"sm\" aria-labelledby=\"progress-dot-label\"></nve-progress-dot>\n    </div>\n  `\n};\n\n/**\n * @summary Button indicators inherit text color to keep loading feedback visible across button treatments.\n */\nexport const WithButton = {\n  render: () => html`\n    <div nve-layout=\"row gap:sm\">\n      <nve-button disabled aria-busy=\"true\">\n        <nve-progress-dot size=\"sm\" aria-hidden=\"true\"></nve-progress-dot>\n        Saving…\n      </nve-button>\n      <nve-button interaction=\"emphasis\" disabled aria-busy=\"true\">\n        <nve-progress-dot size=\"sm\" aria-hidden=\"true\"></nve-progress-dot>\n        Saving…\n      </nve-button>\n    </div>\n  `\n};\n\n/**\n * @summary Custom color, dimensions, and timing adapt loading feedback to its surrounding interface.\n * @tags theme\n */\nexport const CustomStyles = {\n  render: () => html`\n    <nve-progress-dot\n      aria-label=\"Loading results\"\n      style=\"--color: var(--nve-sys-support-accent-color); --width: var(--nve-ref-size-1000); --height: var(--nve-ref-size-600); --animation-duration: 2s\"\n    ></nve-progress-dot>\n  `\n};\n\n/**\n * @summary Static dots keep loading feedback visible when animation is unnecessary or distracting.\n * @tags test-case\n */\nexport const Static = {\n  render: () => html`\n    <nve-progress-dot aria-label=\"Loading results\" style=\"--animation-duration: 0s\"></nve-progress-dot>\n  `\n};\n"],"mappings":";AAGA,IAAAA,IAAS"}

package/dist/progress-dot/progress-dot.js

@@ -1,6 +1,5 @@
-//#region src/progress-dot/progress-dot.css?inline
+// src/progress-dot/progress-dot.css?inline
 var e = ":host{--color: currentColor;--width: var(--nve-ref-size-500);--height: var(--nve-ref-size-500);--animation-duration: calc(var(--nve-ref-animation-duration-400) * 1.5);display:inline-flex;color:inherit}:host([size=\"sm\"]){--width: var(--nve-ref-size-400);--height: var(--nve-ref-size-400)}:host([size=\"lg\"]){--width: var(--nve-ref-size-600);--height: var(--nve-ref-size-600)}[internal-host]{width:var(--width);height:var(--height);display:flex;align-items:center;justify-content:center}svg{width:100%;height:100%;fill:var(--color)}circle{opacity:1;transform-box:fill-box;transform-origin:center;animation:breathe var(--animation-duration) ease-in-out infinite}circle:nth-child(2){animation-delay:calc(var(--animation-duration) * 2 / 15)}circle:nth-child(3){animation-delay:calc(var(--animation-duration) * 4 / 15)}@keyframes breathe{0%,60%,to{opacity:var(--nve-ref-opacity-300);transform:scale(.7)}30%{opacity:1;transform:scale(1)}}@media(prefers-reduced-motion:reduce){circle{animation:none}}@container style(--nve-ref-animation-duration-150: 0){circle{animation:none}}";
-//#endregion
 export { e as default };
 
 //# sourceMappingURL=progress-dot.js.map

package/dist/progress-dot/progress-dot.js.map

@@ -1 +1 @@
-{"version":3,"file":"progress-dot.js","names":[],"sources":["../../src/progress-dot/progress-dot.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n:host {\n  --color: currentColor;\n  --width: var(--nve-ref-size-500);\n  --height: var(--nve-ref-size-500);\n  --animation-duration: calc(var(--nve-ref-animation-duration-400) * 1.5);\n  display: inline-flex;\n  color: inherit;\n}\n\n:host([size='sm']) {\n  --width: var(--nve-ref-size-400);\n  --height: var(--nve-ref-size-400);\n}\n\n:host([size='lg']) {\n  --width: var(--nve-ref-size-600);\n  --height: var(--nve-ref-size-600);\n}\n\n[internal-host] {\n  width: var(--width);\n  height: var(--height);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\nsvg {\n  width: 100%;\n  height: 100%;\n  fill: var(--color);\n}\n\ncircle {\n  opacity: 1;\n  transform-box: fill-box;\n  transform-origin: center;\n  animation: breathe var(--animation-duration) ease-in-out infinite;\n}\n\ncircle:nth-child(2) {\n  animation-delay: calc(var(--animation-duration) * 2 / 15);\n}\n\ncircle:nth-child(3) {\n  animation-delay: calc(var(--animation-duration) * 4 / 15);\n}\n\n@keyframes breathe {\n  0%,\n  60%,\n  100% {\n    opacity: var(--nve-ref-opacity-300);\n    transform: scale(0.7);\n  }\n\n  30% {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  circle {\n    animation: none;\n  }\n}\n\n/* A zero short-duration token means the active theme suppresses motion. */\n@container style(--nve-ref-animation-duration-150: 0) {\n  circle {\n    animation: none;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"progress-dot.js","names":["progress_dot_default"],"sources":["../../src/progress-dot/progress-dot.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n:host {\n  --color: currentColor;\n  --width: var(--nve-ref-size-500);\n  --height: var(--nve-ref-size-500);\n  --animation-duration: calc(var(--nve-ref-animation-duration-400) * 1.5);\n  display: inline-flex;\n  color: inherit;\n}\n\n:host([size='sm']) {\n  --width: var(--nve-ref-size-400);\n  --height: var(--nve-ref-size-400);\n}\n\n:host([size='lg']) {\n  --width: var(--nve-ref-size-600);\n  --height: var(--nve-ref-size-600);\n}\n\n[internal-host] {\n  width: var(--width);\n  height: var(--height);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\nsvg {\n  width: 100%;\n  height: 100%;\n  fill: var(--color);\n}\n\ncircle {\n  opacity: 1;\n  transform-box: fill-box;\n  transform-origin: center;\n  animation: breathe var(--animation-duration) ease-in-out infinite;\n}\n\ncircle:nth-child(2) {\n  animation-delay: calc(var(--animation-duration) * 2 / 15);\n}\n\ncircle:nth-child(3) {\n  animation-delay: calc(var(--animation-duration) * 4 / 15);\n}\n\n@keyframes breathe {\n  0%,\n  60%,\n  100% {\n    opacity: var(--nve-ref-opacity-300);\n    transform: scale(0.7);\n  }\n\n  30% {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  circle {\n    animation: none;\n  }\n}\n\n/* A zero short-duration token means the active theme suppresses motion. */\n@container style(--nve-ref-animation-duration-150: 0) {\n  circle {\n    animation: none;\n  }\n}\n"],"mappings":""}

package/dist/progress-dot/progress-dot2.js

@@ -1,11 +1,11 @@
 import { attachInternals as e } from "../internal/utils/a11y.js";
 import { useStyles as t } from "../internal/styles/index.js";
-import n from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js";
+import n from "../_virtual/_@oxc-project_runtime@0.155.0/helpers/esm/decorate.js";
 import r from "./progress-dot.js";
 import { LitElement as i, html as a } from "lit";
 import { property as o } from "lit/decorators/property.js";
 import { I18nController as s } from "@nvidia-elements/foundations/internal/i18n";
-//#region src/progress-dot/progress-dot.ts
+// src/progress-dot/progress-dot.ts
 var c = { loading: "loading" }, l = class extends i {
 	constructor(...e) {
 		super(...e), this.size = "md", this.#e = new s(this, c), this.i18n = this.#e.i18n;
@@ -16,7 +16,7 @@ var c = { loading: "loading" }, l = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-progress-dot",
-			version: "2.20.1"
+			version: "2.20.3"
 		};
 	}
 	#e;
@@ -34,7 +34,6 @@ n([o({
 	type: String,
 	reflect: !0
 })], l.prototype, "size", void 0), n([o({ type: Object })], l.prototype, "i18n", void 0);
-//#endregion
 export { l as ProgressDot };
 
 //# sourceMappingURL=progress-dot2.js.map

package/dist/progress-dot/progress-dot2.js.map

@@ -1 +1 @@
-{"version":3,"file":"progress-dot2.js","names":[],"sources":["../../src/progress-dot/progress-dot.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, LitElement, type PropertyValues } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport type { Size } from '@nvidia-elements/core/internal';\nimport { attachInternals, useStyles } from '@nvidia-elements/core/internal';\nimport { I18nController, type I18nDefaults } from '@nvidia-elements/foundations/internal/i18n';\nimport styles from './progress-dot.css?inline';\n\nconst i18nDefaults = {\n  loading: 'loading'\n} satisfies I18nDefaults;\n\n/**\n * @element nve-progress-dot\n * @description An inline visual indicator that shows the progress of an ongoing task with an unknown completion percentage.\n * @documentation https://nvidia.github.io/elements/docs/elements/progress-dot/\n * @since 0.0.0\n * @entrypoint \\@nvidia-elements/core/progress-dot\n * @cssprop --color - Dot color. Defaults to the inherited text color.\n * @cssprop --width - Indicator width.\n * @cssprop --height - Indicator height.\n * @cssprop --animation-duration - Duration of one animation cycle. Set to 0s for static dots.\n * @aria https://www.w3.org/TR/wai-aria-1.2/#progressbar\n */\nexport class ProgressDot extends LitElement {\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-progress-dot',\n    version: '0.0.0'\n  };\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  /** Controls the indicator size. */\n  @property({ type: String, reflect: true }) size: Size = 'md';\n\n  #i18nController: I18nController<this> = new I18nController<this>(this, i18nDefaults);\n\n  /** Enables updating the default loading label for internationalization. */\n  @property({ type: Object }) i18n = this.#i18nController.i18n;\n\n  render() {\n    return html`\n      <div internal-host>\n        <svg viewBox=\"0 0 36 36\" aria-hidden=\"true\">\n          <circle cx=\"5\" cy=\"18\" r=\"3\"></circle>\n          <circle cx=\"18\" cy=\"18\" r=\"3\"></circle>\n          <circle cx=\"31\" cy=\"18\" r=\"3\"></circle>\n        </svg>\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    this._internals.ariaLabel = this.i18n.loading ?? null;\n  }\n}\n"],"mappings":";;;;;;;;AAUA,IAAM,IAAe,EACnB,SAAS,UACX,GAca,IAAb,cAAiC,EAAW;;EAiBP,aALqB,KAAA,OAAA,MAEhB,KAAA,KAAA,IAAI,EAAqB,MAAM,CAAY,GAGhD,KAAA,OAAA,KAAK,GAAgB;;;EAhBxC,KAAA,SAAA,EAAU,CAAC,CAAM,CAAC;;;EAEP,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;EACX;;CAQA;CAKA,SAAS;EACP,OAAO,CAAI;CASb;CAEA,oBAAoB;EAGlB,AAFA,MAAM,kBAAkB,GACxB,EAAgB,IAAI,GACpB,KAAK,WAAW,OAAO;CACzB;CAEA,QAAQ,GAA6B;EAEnC,AADA,MAAM,QAAQ,CAAK,GACnB,KAAK,WAAW,YAAY,KAAK,KAAK,WAAW;CACnD;AACF;AA7BG,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,GAKxC,EAAA,CAAA,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA"}
+{"version":3,"file":"progress-dot2.js","names":["styles","_decorate","__decorate","progress_dot_default","i18nDefaults","ProgressDot","LitElement","_args","#i18nController","I18nController","useStyles","attachInternals","props","property"],"sources":["../../src/progress-dot/progress-dot.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, LitElement, type PropertyValues } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport type { Size } from '@nvidia-elements/core/internal';\nimport { attachInternals, useStyles } from '@nvidia-elements/core/internal';\nimport { I18nController, type I18nDefaults } from '@nvidia-elements/foundations/internal/i18n';\nimport styles from './progress-dot.css?inline';\n\nconst i18nDefaults = {\n  loading: 'loading'\n} satisfies I18nDefaults;\n\n/**\n * @element nve-progress-dot\n * @description An inline visual indicator that shows the progress of an ongoing task with an unknown completion percentage.\n * @documentation https://nvidia.github.io/elements/docs/elements/progress-dot/\n * @since 0.0.0\n * @entrypoint \\@nvidia-elements/core/progress-dot\n * @cssprop --color - Dot color. Defaults to the inherited text color.\n * @cssprop --width - Indicator width.\n * @cssprop --height - Indicator height.\n * @cssprop --animation-duration - Duration of one animation cycle. Set to 0s for static dots.\n * @aria https://www.w3.org/TR/wai-aria-1.2/#progressbar\n */\nexport class ProgressDot extends LitElement {\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-progress-dot',\n    version: '0.0.0'\n  };\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  /** Controls the indicator size. */\n  @property({ type: String, reflect: true }) size: Size = 'md';\n\n  #i18nController: I18nController<this> = new I18nController<this>(this, i18nDefaults);\n\n  /** Enables updating the default loading label for internationalization. */\n  @property({ type: Object }) i18n = this.#i18nController.i18n;\n\n  render() {\n    return html`\n      <div internal-host>\n        <svg viewBox=\"0 0 36 36\" aria-hidden=\"true\">\n          <circle cx=\"5\" cy=\"18\" r=\"3\"></circle>\n          <circle cx=\"18\" cy=\"18\" r=\"3\"></circle>\n          <circle cx=\"31\" cy=\"18\" r=\"3\"></circle>\n        </svg>\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    this._internals.ariaLabel = this.i18n.loading ?? null;\n  }\n}\n"],"mappings":";;;;;;;;AAUA,IAAMI,IAAe,EACnB,SAAS,UACX,GAcaC,IAAb,cAAiCC,EAAW;;EAiBP,A,aALqB,KAAA,OAAA,MAEhB,KAAAE,KAAA,IAAIC,EAAqB,MAAML,CAAY,GAGhD,KAAA,OAAA,KAAKI,GAAgB;;;EAhBxC,KAAA,SAAAE,EAAU,CAACV,CAAM,CAAC;;;EAEP,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;EACX;;CAQA;CAKA,SAAS;EACP,OAAO,CAAI;CASb;CAEA,oBAAoB;EAGlB,AAFA,MAAM,kBAAkB,GACxBW,EAAgB,IAAI,GACpB,KAAK,WAAW,OAAO;CACzB;CAEA,QAAQ,GAA6B;EAEnC,AADA,MAAM,QAAQC,CAAK,GACnB,KAAK,WAAW,YAAY,KAAK,KAAK,WAAW;CACnD;AACF;AA7BGX,EAAA,CAAAY,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAAR,EAAA,WAAA,QAAA,KAAA,CAAA,GAKxCJ,EAAA,CAAAY,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAAR,EAAA,WAAA,QAAA,KAAA,CAAA"}

package/dist/progress-ring/define.js

@@ -1,7 +1,6 @@
 import { ProgressRing as e } from "./progress-ring2.js";
 import { define as t } from "@nvidia-elements/foundations/internal/define";
-//#region src/progress-ring/define.ts
+// src/progress-ring/define.ts
 t(e);
-//#endregion
 
 //# sourceMappingURL=define.js.map

package/dist/progress-ring/define.js.map

@@ -1 +1 @@
-{"version":3,"file":"define.js","names":[],"sources":["../../src/progress-ring/define.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { define } from '@nvidia-elements/foundations/internal/define';\nimport { ProgressRing } from '@nvidia-elements/core/progress-ring';\n\ndefine(ProgressRing);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nve-progress-ring': ProgressRing;\n  }\n}\n"],"mappings":";;;AAMA,EAAO,CAAY"}
+{"version":3,"file":"define.js","names":["define","ProgressRing"],"sources":["../../src/progress-ring/define.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { define } from '@nvidia-elements/foundations/internal/define';\nimport { ProgressRing } from '@nvidia-elements/core/progress-ring';\n\ndefine(ProgressRing);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nve-progress-ring': ProgressRing;\n  }\n}\n"],"mappings":";;;AAMAA,EAAOC,CAAY"}

package/dist/progress-ring/index.js

@@ -1,2 +1 @@
-import { ProgressRing as e } from "./progress-ring2.js";
-export { e as ProgressRing };
+export { ProgressRing } from "./progress-ring2.js";

package/dist/progress-ring/progress-ring.examples.js

@@ -1,6 +1,5 @@
-//#region src/progress-ring/progress-ring.examples.ts
+// src/progress-ring/progress-ring.examples.ts
 var e = "";
-//#endregion
 export { e as default };
 
 //# sourceMappingURL=progress-ring.examples.js.map

package/dist/progress-ring/progress-ring.examples.js.map

@@ -1 +1 @@
-{"version":3,"file":"progress-ring.examples.js","names":[],"sources":["../../src/progress-ring/progress-ring.examples.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html } from 'lit';\nimport '@nvidia-elements/core/progress-ring/define.js';\n\nexport default {\n  title: 'Elements/Progress Ring',\n  component: 'nve-progress-ring',\n};\n\n/**\n * @summary Circular progress indicators showing indeterminate loading state and determinate completion progress.\n */\nexport const Default = {\n  render: () => html`\n    <div nve-layout=\"row gap:sm\">\n      <nve-progress-ring status=\"accent\"></nve-progress-ring>\n  \n      <nve-progress-ring status=\"accent\" value=\"66\"></nve-progress-ring>\n    </div>\n`};\n\n/**\n * @summary Progress rings displaying completion percentages from indeterminate to 0%, 33%, 66%, and 100%.\n * @tags test-case\n */\nexport const Values = {\n  render: () => html`\n    <div nve-layout=\"row gap:sm\">\n      <nve-progress-ring status=\"accent\"></nve-progress-ring>\n\n      <nve-progress-ring status=\"accent\" value=\"0\"></nve-progress-ring>\n\n      <nve-progress-ring status=\"accent\" value=\"33\"></nve-progress-ring>\n\n      <nve-progress-ring status=\"accent\" value=\"66\"></nve-progress-ring>\n\n      <nve-progress-ring status=\"accent\" value=\"100\"></nve-progress-ring>\n    </div>\n`};\n\n/**\n * @summary Progress rings with custom max values for proportional progress within a defined scale.\n * @tags test-case\n */\nexport const Max = {\n  render: () => html`\n    <div nve-layout=\"row gap:sm\">\n      <nve-progress-ring status=\"accent\" max=\"20\" value=\"5\"></nve-progress-ring>\n\n      <nve-progress-ring status=\"accent\" max=\"20\" value=\"10\"></nve-progress-ring>\n      \n      <nve-progress-ring status=\"accent\" max=\"20\" value=\"15\"></nve-progress-ring>\n    </div>\n`};\n\n/**\n * @summary Progress rings with warning and danger status colors for indicating critical or cautionary states.\n */\nexport const Status = {\n  render: () => html`\n    <div nve-layout=\"row gap:sm\">\n      <nve-progress-ring status=\"warning\" value=\"75\"></nve-progress-ring>\n\n      <nve-progress-ring status=\"danger\" value=\"75\"></nve-progress-ring>\n\n      <nve-progress-ring status=\"warning\"></nve-progress-ring>\n\n      <nve-progress-ring status=\"danger\"></nve-progress-ring>\n    </div>\n`};\n\n/**\n * @summary Progress ring paired inline with descriptive text label for communicating loading state.\n */\nexport const WithText = {\n  render: () => html`\n    <div nve-layout=\"row gap:xs align:vertical-center\" nve-text=\"medium\">\n      <nve-progress-ring status=\"accent\" size=\"xs\" aria-labelledby=\"processing-label\"></nve-progress-ring>\n      <span id=\"processing-label\">Processing...</span>\n    </div>\n`};\n\n/**\n * @summary Progress ring with custom status icon slotted in the center for enhanced visual communication.\n * @tags test-case\n */\nexport const SlottedIcon = {\n  render: () => html`\n    <div nve-layout=\"row gap:sm\">\n      <nve-progress-ring status=\"accent\">\n        <nve-icon name=\"pause\" status=\"accent\"></nve-icon>\n      </nve-progress-ring>\n    </div>\n`};\n\n/**\n * @summary Progress rings in many sizes from extra-extra-small to extra-large for different UI contexts.\n * @tags test-case\n */\nexport const Sizing = {\n  render: () => html`\n    <div nve-layout=\"row gap:sm pad:md\">\n      <nve-progress-ring status=\"accent\" size=\"xxs\"></nve-progress-ring>\n      <nve-progress-ring status=\"accent\" size=\"xs\"></nve-progress-ring>\n      <nve-progress-ring status=\"accent\" size=\"sm\"></nve-progress-ring>\n      <nve-progress-ring status=\"accent\" size=\"md\"></nve-progress-ring>\n      <nve-progress-ring status=\"accent\" size=\"lg\"></nve-progress-ring>\n      <nve-progress-ring status=\"accent\" size=\"xl\"></nve-progress-ring>\n    </div>\n\n    <div nve-layout=\"row gap:sm pad:md\">\n      <nve-progress-ring status=\"danger\" size=\"xxs\"></nve-progress-ring>\n      <nve-progress-ring status=\"danger\" size=\"xs\"></nve-progress-ring>\n      <nve-progress-ring status=\"danger\" size=\"sm\"></nve-progress-ring>\n      <nve-progress-ring status=\"danger\" size=\"md\"></nve-progress-ring>\n      <nve-progress-ring status=\"danger\" size=\"lg\"></nve-progress-ring>\n    </div>\n`};\n\n/**\n * @summary Progress rings integrated within buttons to show loading states during actions and operations.\n */\nexport const WithButton = {\n  render: () => html`\n    <div nve-layout=\"row gap:sm\">\n      <nve-button>\n        <nve-progress-ring status=\"neutral\" size=\"xxs\"></nve-progress-ring>\n        Button\n      </nve-button>\n\n      <nve-button interaction=\"emphasis\">\n        <nve-progress-ring status=\"neutral\" size=\"xxs\"></nve-progress-ring>\n        Button\n      </nve-button>\n\n      <nve-button interaction=\"destructive\">\n        <nve-progress-ring status=\"neutral\" size=\"xxs\"></nve-progress-ring>\n        Button\n      </nve-button>\n\n      <nve-button>\n        <nve-progress-ring status=\"neutral\" size=\"xxs\" value=\"33\"></nve-progress-ring>\n        Button\n      </nve-button>\n\n      <nve-button interaction=\"emphasis\">\n        <nve-progress-ring status=\"neutral\" size=\"xxs\" value=\"33\"></nve-progress-ring>\n        Button\n      </nve-button>\n\n      <nve-button interaction=\"destructive\">\n        <nve-progress-ring status=\"neutral\" size=\"xxs\" value=\"33\"></nve-progress-ring>\n        Button\n      </nve-button>\n    </div>\n`};"],"mappings":";AAGA,IAAA,IAAS"}
+{"version":3,"file":"progress-ring.examples.js","names":["progress_ring_examples_default"],"sources":["../../src/progress-ring/progress-ring.examples.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html } from 'lit';\nimport '@nvidia-elements/core/progress-ring/define.js';\n\nexport default {\n  title: 'Elements/Progress Ring',\n  component: 'nve-progress-ring',\n};\n\n/**\n * @summary Circular progress indicators showing indeterminate loading state and determinate completion progress.\n */\nexport const Default = {\n  render: () => html`\n    <div nve-layout=\"row gap:sm\">\n      <nve-progress-ring status=\"accent\"></nve-progress-ring>\n  \n      <nve-progress-ring status=\"accent\" value=\"66\"></nve-progress-ring>\n    </div>\n`};\n\n/**\n * @summary Progress rings displaying completion percentages from indeterminate to 0%, 33%, 66%, and 100%.\n * @tags test-case\n */\nexport const Values = {\n  render: () => html`\n    <div nve-layout=\"row gap:sm\">\n      <nve-progress-ring status=\"accent\"></nve-progress-ring>\n\n      <nve-progress-ring status=\"accent\" value=\"0\"></nve-progress-ring>\n\n      <nve-progress-ring status=\"accent\" value=\"33\"></nve-progress-ring>\n\n      <nve-progress-ring status=\"accent\" value=\"66\"></nve-progress-ring>\n\n      <nve-progress-ring status=\"accent\" value=\"100\"></nve-progress-ring>\n    </div>\n`};\n\n/**\n * @summary Progress rings with custom max values for proportional progress within a defined scale.\n * @tags test-case\n */\nexport const Max = {\n  render: () => html`\n    <div nve-layout=\"row gap:sm\">\n      <nve-progress-ring status=\"accent\" max=\"20\" value=\"5\"></nve-progress-ring>\n\n      <nve-progress-ring status=\"accent\" max=\"20\" value=\"10\"></nve-progress-ring>\n      \n      <nve-progress-ring status=\"accent\" max=\"20\" value=\"15\"></nve-progress-ring>\n    </div>\n`};\n\n/**\n * @summary Progress rings with warning and danger status colors for indicating critical or cautionary states.\n */\nexport const Status = {\n  render: () => html`\n    <div nve-layout=\"row gap:sm\">\n      <nve-progress-ring status=\"warning\" value=\"75\"></nve-progress-ring>\n\n      <nve-progress-ring status=\"danger\" value=\"75\"></nve-progress-ring>\n\n      <nve-progress-ring status=\"warning\"></nve-progress-ring>\n\n      <nve-progress-ring status=\"danger\"></nve-progress-ring>\n    </div>\n`};\n\n/**\n * @summary Progress ring paired inline with descriptive text label for communicating loading state.\n */\nexport const WithText = {\n  render: () => html`\n    <div nve-layout=\"row gap:xs align:vertical-center\" nve-text=\"medium\">\n      <nve-progress-ring status=\"accent\" size=\"xs\" aria-labelledby=\"processing-label\"></nve-progress-ring>\n      <span id=\"processing-label\">Processing...</span>\n    </div>\n`};\n\n/**\n * @summary Progress ring with custom status icon slotted in the center for enhanced visual communication.\n * @tags test-case\n */\nexport const SlottedIcon = {\n  render: () => html`\n    <div nve-layout=\"row gap:sm\">\n      <nve-progress-ring status=\"accent\">\n        <nve-icon name=\"pause\" status=\"accent\"></nve-icon>\n      </nve-progress-ring>\n    </div>\n`};\n\n/**\n * @summary Progress rings in many sizes from extra-extra-small to extra-large for different UI contexts.\n * @tags test-case\n */\nexport const Sizing = {\n  render: () => html`\n    <div nve-layout=\"row gap:sm pad:md\">\n      <nve-progress-ring status=\"accent\" size=\"xxs\"></nve-progress-ring>\n      <nve-progress-ring status=\"accent\" size=\"xs\"></nve-progress-ring>\n      <nve-progress-ring status=\"accent\" size=\"sm\"></nve-progress-ring>\n      <nve-progress-ring status=\"accent\" size=\"md\"></nve-progress-ring>\n      <nve-progress-ring status=\"accent\" size=\"lg\"></nve-progress-ring>\n      <nve-progress-ring status=\"accent\" size=\"xl\"></nve-progress-ring>\n    </div>\n\n    <div nve-layout=\"row gap:sm pad:md\">\n      <nve-progress-ring status=\"danger\" size=\"xxs\"></nve-progress-ring>\n      <nve-progress-ring status=\"danger\" size=\"xs\"></nve-progress-ring>\n      <nve-progress-ring status=\"danger\" size=\"sm\"></nve-progress-ring>\n      <nve-progress-ring status=\"danger\" size=\"md\"></nve-progress-ring>\n      <nve-progress-ring status=\"danger\" size=\"lg\"></nve-progress-ring>\n    </div>\n`};\n\n/**\n * @summary Progress rings integrated within buttons to show loading states during actions and operations.\n */\nexport const WithButton = {\n  render: () => html`\n    <div nve-layout=\"row gap:sm\">\n      <nve-button>\n        <nve-progress-ring status=\"neutral\" size=\"xxs\"></nve-progress-ring>\n        Button\n      </nve-button>\n\n      <nve-button interaction=\"emphasis\">\n        <nve-progress-ring status=\"neutral\" size=\"xxs\"></nve-progress-ring>\n        Button\n      </nve-button>\n\n      <nve-button interaction=\"destructive\">\n        <nve-progress-ring status=\"neutral\" size=\"xxs\"></nve-progress-ring>\n        Button\n      </nve-button>\n\n      <nve-button>\n        <nve-progress-ring status=\"neutral\" size=\"xxs\" value=\"33\"></nve-progress-ring>\n        Button\n      </nve-button>\n\n      <nve-button interaction=\"emphasis\">\n        <nve-progress-ring status=\"neutral\" size=\"xxs\" value=\"33\"></nve-progress-ring>\n        Button\n      </nve-button>\n\n      <nve-button interaction=\"destructive\">\n        <nve-progress-ring status=\"neutral\" size=\"xxs\" value=\"33\"></nve-progress-ring>\n        Button\n      </nve-button>\n    </div>\n`};"],"mappings":";AAGA,IAAAA,IAAS"}

package/dist/progress-ring/progress-ring.js

@@ -1,6 +1,5 @@
-//#region src/progress-ring/progress-ring.css?inline
+// src/progress-ring/progress-ring.css?inline
 var e = ":host{--background-color: var(--nve-sys-interaction-background);--ring-color: var(--nve-sys-accent-secondary-background);--ring-background-opacity: 1;--ring-width: 2px;--width: var(--nve-ref-size-800);--height: var(--nve-ref-size-800);--animation-duration: calc(var(--nve-ref-animation-duration-400) * 2.5);width:var(--width);height:var(--height);container-type:size}:host([size=\"xxs\"]){--ring-width: 3px;--width: var(--nve-ref-size-300);--height: var(--nve-ref-size-300)}:host([size=\"xs\"]){--ring-width: 3px;--width: var(--nve-ref-size-400);--height: var(--nve-ref-size-400)}:host([size=\"sm\"]){--ring-width: 2.5px;--width: var(--nve-ref-size-600);--height: var(--nve-ref-size-600)}:host([size=\"lg\"]){--width: var(--nve-ref-size-1000);--height: var(--nve-ref-size-1000)}:host([size=\"xl\"]){--ring-width: 1px;--width: calc(2 * var(--nve-ref-space-xxxl));--height: calc(2 * var(--nve-ref-space-xxxl))}[internal-host]{display:flex;place-items:center;place-content:center;height:100%}svg{position:absolute;top:0;left:0;width:100%;height:100%}circle.background{fill:var(--background-color);opacity:var(--ring-background-opacity);stroke:none}circle.progress-ring-circle{fill:none;stroke:var(--ring-color);stroke-width:var(--ring-width);stroke-linecap:round;transform-origin:50% 50%;transform:rotate(-90deg);transition:all .2s ease-in-out 0s}:host([status=\"success\"]){--ring-color: var(--nve-sys-support-success-emphasis-color);--background-color: var(--nve-sys-support-success-muted-color)}:host([status=\"warning\"]){--ring-color: var(--nve-sys-support-warning-emphasis-color);--background-color: var(--nve-sys-support-warning-muted-color)}:host([status=\"danger\"]){--ring-color: var(--nve-sys-support-danger-emphasis-color);--background-color: var(--nve-sys-support-danger-muted-color)}:host([status=\"neutral\"]){--ring-background-opacity: .5;--ring-color: var(--color, var(--nve-sys-interaction-color));--background-color: var(--color, var(--nve-sys-interaction-color))}:host([status=\"accent\"]) [internal-host]:not([indeterminate]) circle.background{stroke:var(--background-color);fill:none;stroke-width:var(--ring-width)}:host([status=\"accent\"]) [internal-host][indeterminate] circle.background{display:none}:host([status=\"neutral\"]) [internal-host]:not([indeterminate]) circle.background{stroke:var(--background-color);fill:none;stroke-width:var(--ring-width)}:host([status=\"neutral\"]) [internal-host][indeterminate] circle.background{display:none}[internal-host][indeterminate] circle.progress-ring-circle{animation:var(--animation-duration) linear 0s infinite normal none running spin-infinite}::slotted(nve-icon),nve-icon{--width: 50cqw;--height: 50cqh;--color: var(--ring-color)}@keyframes spin-infinite{0%{stroke-dasharray:.01px,43.97px;transform:rotate(0)}50%{stroke-dasharray:21.99px,21.99px;transform:rotate(450deg)}to{stroke-dasharray:.01px,43.97px;transform:rotate(1080deg)}}";
-//#endregion
 export { e as default };
 
 //# sourceMappingURL=progress-ring.js.map

package/dist/progress-ring/progress-ring.js.map

@@ -1 +1 @@
-{"version":3,"file":"progress-ring.js","names":[],"sources":["../../src/progress-ring/progress-ring.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n:host {\n  --background-color: var(--nve-sys-interaction-background);\n  --ring-color: var(--nve-sys-accent-secondary-background);\n  --ring-background-opacity: 1;\n  --ring-width: 2px;\n  --width: var(--nve-ref-size-800);\n  --height: var(--nve-ref-size-800);\n  --animation-duration: calc(var(--nve-ref-animation-duration-400) * 2.5);\n\n  width: var(--width);\n  height: var(--height);\n  container-type: size;\n}\n\n:host([size='xxs']) {\n  --ring-width: 3px;\n  --width: var(--nve-ref-size-300);\n  --height: var(--nve-ref-size-300);\n}\n\n:host([size='xs']) {\n  --ring-width: 3px;\n  --width: var(--nve-ref-size-400);\n  --height: var(--nve-ref-size-400);\n}\n\n:host([size='sm']) {\n  --ring-width: 2.5px;\n  --width: var(--nve-ref-size-600);\n  --height: var(--nve-ref-size-600);\n}\n\n:host([size='lg']) {\n  --width: var(--nve-ref-size-1000);\n  --height: var(--nve-ref-size-1000);\n}\n\n:host([size='xl']) {\n  --ring-width: 1px;\n  --width: calc(2 * var(--nve-ref-space-xxxl));\n  --height: calc(2 * var(--nve-ref-space-xxxl));\n}\n\n[internal-host] {\n  display: flex;\n  place-items: center;\n  place-content: center;\n  height: 100%;\n}\n\nsvg {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n}\n\ncircle.background {\n  fill: var(--background-color);\n  opacity: var(--ring-background-opacity);\n  stroke: none;\n}\n\ncircle.progress-ring-circle {\n  fill: none;\n  stroke: var(--ring-color);\n  stroke-width: var(--ring-width);\n  stroke-linecap: round;\n  transform-origin: 50% 50%;\n  transform: rotate(-90deg);\n  transition: all 0.2s ease-in-out 0s;\n}\n\n:host([status='success']) {\n  --ring-color: var(--nve-sys-support-success-emphasis-color);\n  --background-color: var(--nve-sys-support-success-muted-color);\n}\n\n:host([status='warning']) {\n  --ring-color: var(--nve-sys-support-warning-emphasis-color);\n  --background-color: var(--nve-sys-support-warning-muted-color);\n}\n\n:host([status='danger']) {\n  --ring-color: var(--nve-sys-support-danger-emphasis-color);\n  --background-color: var(--nve-sys-support-danger-muted-color);\n}\n\n:host([status='neutral']) {\n  --ring-background-opacity: 0.5;\n  --ring-color: var(--color, var(--nve-sys-interaction-color));\n  --background-color: var(--color, var(--nve-sys-interaction-color));\n}\n\n:host([status='accent']) [internal-host]:not([indeterminate]) circle.background {\n  stroke: var(--background-color);\n  fill: none;\n  stroke-width: var(--ring-width);\n}\n\n:host([status='accent']) [internal-host][indeterminate] circle.background {\n  display: none;\n}\n\n:host([status='neutral']) [internal-host]:not([indeterminate]) circle.background {\n  stroke: var(--background-color);\n  fill: none;\n  stroke-width: var(--ring-width);\n}\n\n:host([status='neutral']) [internal-host][indeterminate] circle.background {\n  display: none;\n}\n\n[internal-host][indeterminate] circle.progress-ring-circle {\n  animation: var(--animation-duration) linear 0s infinite normal none running spin-infinite;\n}\n\n::slotted(nve-icon),\nnve-icon {\n  --width: 50cqw;\n  --height: 50cqh;\n  --color: var(--ring-color);\n}\n\n@keyframes spin-infinite {\n  0% {\n    stroke-dasharray: 0.01px, 43.97px;\n    transform: rotate(0deg);\n  }\n\n  50% {\n    stroke-dasharray: 21.99px, 21.99px;\n    transform: rotate(450deg);\n  }\n\n  100% {\n    stroke-dasharray: 0.01px, 43.97px;\n    transform: rotate(1080deg);\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"progress-ring.js","names":["progress_ring_default"],"sources":["../../src/progress-ring/progress-ring.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n:host {\n  --background-color: var(--nve-sys-interaction-background);\n  --ring-color: var(--nve-sys-accent-secondary-background);\n  --ring-background-opacity: 1;\n  --ring-width: 2px;\n  --width: var(--nve-ref-size-800);\n  --height: var(--nve-ref-size-800);\n  --animation-duration: calc(var(--nve-ref-animation-duration-400) * 2.5);\n\n  width: var(--width);\n  height: var(--height);\n  container-type: size;\n}\n\n:host([size='xxs']) {\n  --ring-width: 3px;\n  --width: var(--nve-ref-size-300);\n  --height: var(--nve-ref-size-300);\n}\n\n:host([size='xs']) {\n  --ring-width: 3px;\n  --width: var(--nve-ref-size-400);\n  --height: var(--nve-ref-size-400);\n}\n\n:host([size='sm']) {\n  --ring-width: 2.5px;\n  --width: var(--nve-ref-size-600);\n  --height: var(--nve-ref-size-600);\n}\n\n:host([size='lg']) {\n  --width: var(--nve-ref-size-1000);\n  --height: var(--nve-ref-size-1000);\n}\n\n:host([size='xl']) {\n  --ring-width: 1px;\n  --width: calc(2 * var(--nve-ref-space-xxxl));\n  --height: calc(2 * var(--nve-ref-space-xxxl));\n}\n\n[internal-host] {\n  display: flex;\n  place-items: center;\n  place-content: center;\n  height: 100%;\n}\n\nsvg {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n}\n\ncircle.background {\n  fill: var(--background-color);\n  opacity: var(--ring-background-opacity);\n  stroke: none;\n}\n\ncircle.progress-ring-circle {\n  fill: none;\n  stroke: var(--ring-color);\n  stroke-width: var(--ring-width);\n  stroke-linecap: round;\n  transform-origin: 50% 50%;\n  transform: rotate(-90deg);\n  transition: all 0.2s ease-in-out 0s;\n}\n\n:host([status='success']) {\n  --ring-color: var(--nve-sys-support-success-emphasis-color);\n  --background-color: var(--nve-sys-support-success-muted-color);\n}\n\n:host([status='warning']) {\n  --ring-color: var(--nve-sys-support-warning-emphasis-color);\n  --background-color: var(--nve-sys-support-warning-muted-color);\n}\n\n:host([status='danger']) {\n  --ring-color: var(--nve-sys-support-danger-emphasis-color);\n  --background-color: var(--nve-sys-support-danger-muted-color);\n}\n\n:host([status='neutral']) {\n  --ring-background-opacity: 0.5;\n  --ring-color: var(--color, var(--nve-sys-interaction-color));\n  --background-color: var(--color, var(--nve-sys-interaction-color));\n}\n\n:host([status='accent']) [internal-host]:not([indeterminate]) circle.background {\n  stroke: var(--background-color);\n  fill: none;\n  stroke-width: var(--ring-width);\n}\n\n:host([status='accent']) [internal-host][indeterminate] circle.background {\n  display: none;\n}\n\n:host([status='neutral']) [internal-host]:not([indeterminate]) circle.background {\n  stroke: var(--background-color);\n  fill: none;\n  stroke-width: var(--ring-width);\n}\n\n:host([status='neutral']) [internal-host][indeterminate] circle.background {\n  display: none;\n}\n\n[internal-host][indeterminate] circle.progress-ring-circle {\n  animation: var(--animation-duration) linear 0s infinite normal none running spin-infinite;\n}\n\n::slotted(nve-icon),\nnve-icon {\n  --width: 50cqw;\n  --height: 50cqh;\n  --color: var(--ring-color);\n}\n\n@keyframes spin-infinite {\n  0% {\n    stroke-dasharray: 0.01px, 43.97px;\n    transform: rotate(0deg);\n  }\n\n  50% {\n    stroke-dasharray: 21.99px, 21.99px;\n    transform: rotate(450deg);\n  }\n\n  100% {\n    stroke-dasharray: 0.01px, 43.97px;\n    transform: rotate(1080deg);\n  }\n}\n"],"mappings":""}

package/dist/progress-ring/progress-ring2.js

@@ -2,13 +2,13 @@ import { attachInternals as e } from "../internal/utils/a11y.js";
 import { scopedRegistry as t } from "../internal/decorators/scoped-registry.js";
 import { useStyles as n } from "../internal/styles/index.js";
 import { statusIcons as r } from "../internal/types/index.js";
-import i from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js";
+import i from "../_virtual/_@oxc-project_runtime@0.155.0/helpers/esm/decorate.js";
 import { Icon as a } from "../icon/icon2.js";
 import o from "./progress-ring.js";
 import { LitElement as s, html as c } from "lit";
 import { property as l } from "lit/decorators/property.js";
 import { I18nController as u } from "@nvidia-elements/foundations/internal/i18n";
-//#region src/progress-ring/progress-ring.ts
+// src/progress-ring/progress-ring.ts
 var d = {
 	danger: "danger",
 	information: "information",
@@ -24,7 +24,7 @@ var d = {
 	static {
 		this.metadata = {
 			tag: "nve-progress-ring",
-			version: "2.20.1"
+			version: "2.20.3"
 		};
 	}
 	static {
@@ -50,7 +50,6 @@ i([l({ type: Number })], f.prototype, "value", void 0), i([l({ type: Number })],
 	type: String,
 	reflect: !0
 })], f.prototype, "size", void 0), i([l({ type: Object })], f.prototype, "i18n", void 0), f = i([t()], f);
-//#endregion
 export { f as ProgressRing };
 
 //# sourceMappingURL=progress-ring2.js.map

package/dist/progress-ring/progress-ring2.js.map

@@ -1 +1 @@
-{"version":3,"file":"progress-ring2.js","names":[],"sources":["../../src/progress-ring/progress-ring.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 type { Size, SupportStatus } from '@nvidia-elements/core/internal';\nimport { attachInternals, scopedRegistry, statusIcons, useStyles } from '@nvidia-elements/core/internal';\nimport { I18nController, type I18nDefaults } from '@nvidia-elements/foundations/internal/i18n';\nimport { Icon } from '@nvidia-elements/core/icon';\nimport styles from './progress-ring.css?inline';\n\nconst i18nDefaults = {\n  danger: 'danger',\n  information: 'information',\n  success: 'success',\n  warning: 'warning'\n} satisfies I18nDefaults;\n\n/**\n * @element nve-progress-ring\n * @description The `progress-ring` component shows the status of a pending task. It also serves the basis of the page loading element.\n * @documentation https://nvidia.github.io/elements/docs/elements/progress-ring/\n * @since 0.17.0\n * @entrypoint \\@nvidia-elements/core/progress-ring\n * @slot - Content to display in the ring center. Defaults to a status icon.\n * @cssprop --background-color\n * @cssprop --ring-color\n * @cssprop --ring-background-opacity\n * @cssprop --ring-width\n * @cssprop --width\n * @cssprop --height\n * @cssprop --animation-duration\n * @cssprop --color\n * @csspart icon - The icon element\n * @aria https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/progressbar_role\n */\n@scopedRegistry()\nexport class ProgressRing extends LitElement {\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-progress-ring',\n    version: '0.0.0'\n  };\n\n  static elementDefinitions = {\n    [Icon.metadata.tag]: Icon\n  };\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  /** The current `value` of the progress ring. When not set, an indeterminate animation will show. */\n  @property({ type: Number }) value?: number;\n\n  /** The `max` value of the progress ring that the `value` is proportionally scaled to. */\n  @property({ type: Number }) max? = 100;\n\n  /** Four visual treatments represent the `status` of tasks. When `status` changes to `warning`, `success`, or `danger`, the component embeds appropriate icons. */\n  @property({ type: String, reflect: true }) status?: SupportStatus | 'neutral' = 'neutral';\n\n  /** T-shirt `size` of the progress indicator, used to scale the ring. */\n  @property({ type: String, reflect: true }) size?: Size | 'xxs' | 'xs' | 'xl';\n\n  #i18nController: I18nController<this> = new I18nController<this>(this, i18nDefaults);\n\n  /** Enables updating internal string values for internationalization. */\n  @property({ type: Object }) i18n = this.#i18nController.i18n;\n\n  render() {\n    return html`\n      <div internal-host ?indeterminate=${this.value === undefined}>\n        <svg viewBox=\"0 0 16 16\" role=\"presentation\">\n          <circle cx=\"8px\" cy=\"8px\" r=\"6.5px\" class=\"background\"></circle>\n          <circle cx=\"8px\" cy=\"8px\" r=\"6.5px\" class=\"progress-ring-circle\"\n            stroke-dasharray=${`${((this.value ?? 0) / (this.max ?? 100)) * 44}px 44px`}>\n          </circle>\n        </svg>\n        <slot>\n          ${\n            this.status !== 'accent'\n              ? html`<nve-icon part=\"icon\" .name=${this.status ? statusIcons[this.status] : undefined} .status=${this.status as SupportStatus} aria-hidden=\"true\"></nve-icon>`\n              : ''\n          }\n        </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    this._internals.ariaValueNow = `${this.value === undefined ? '' : this.value}`;\n    this._internals.ariaValueMax = `${this.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"],"mappings":";;;;;;;;;;;AAYA,IAAM,IAAe;CACnB,QAAQ;CACR,aAAa;CACb,SAAS;CACT,SAAS;AACX,GAqBa,IAAN,cAA2B,EAAW;;EA8BR,aAXA,KAAA,MAAA,KAG6C,KAAA,SAAA,WAKxC,KAAA,KAAA,IAAI,EAAqB,MAAM,CAAY,GAGhD,KAAA,OAAA,KAAK,GAAgB;;;EA7BxC,KAAA,SAAA,EAAU,CAAC,CAAM,CAAC;;;EAEP,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;EACX;;;EAE4B,KAAA,qBAAA,GACzB,EAAK,SAAS,MAAM,EACvB;;CAiBA;CAKA,SAAS;EACP,OAAO,CAAI,sCAC2B,KAAK,UAAU,KAAA,EAAU,oMAIpC,IAAK,KAAK,SAAS,MAAM,KAAK,OAAO,OAAQ,GAAG,SAAS,yBAK5E,KAAK,WAAW,WAEZ,KADA,CAAI,gCAA+B,KAAK,SAAS,EAAY,KAAK,UAAU,KAAA,EAAU,aAAW,KAAK,OAAwB,kCAEnI;CAIT;CAEA,oBAAoB;EAGlB,AAFA,MAAM,kBAAkB,GACxB,EAAgB,IAAI,GACpB,KAAK,WAAW,OAAO;CACzB;CAEA,QAAQ,GAA6B;EAGnC,AAFA,MAAM,QAAQ,CAAK,GACnB,KAAK,WAAW,eAAe,GAAG,KAAK,UAAU,KAAA,IAAY,KAAK,KAAK,SACvE,KAAK,WAAW,eAAe,GAAG,KAAK;EACvC,IAAM,EAAE,cAAW,MACb,IACJ,MAAW,KAAA,KAAa,MAAW,aAAa,MAAW,WAAW,KAAK,KAAK,KAAU,KAAA;EAC5F,KAAK,WAAW,YAAY,KAAe,KAAK,KAAK,eAAe;CACtE;AACF;AAnDG,EAAA,CAAA,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,GAGzB,EAAA,CAAA,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,OAAA,KAAA,CAAA,GAGzB,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,UAAA,KAAA,CAAA,GAGxC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,GAKxC,EAAA,CAAA,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,GA/B3B,IAAA,EAAA,CAAA,EAAe,CAAA,GAAA,CAAA"}
+{"version":3,"file":"progress-ring2.js","names":["styles","_decorate","__decorate","progress_ring_default","i18nDefaults","ProgressRing","LitElement","_args","#i18nController","I18nController","useStyles","Icon","statusIcons","attachInternals","props","statusLabel","status","property","scopedRegistry"],"sources":["../../src/progress-ring/progress-ring.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 type { Size, SupportStatus } from '@nvidia-elements/core/internal';\nimport { attachInternals, scopedRegistry, statusIcons, useStyles } from '@nvidia-elements/core/internal';\nimport { I18nController, type I18nDefaults } from '@nvidia-elements/foundations/internal/i18n';\nimport { Icon } from '@nvidia-elements/core/icon';\nimport styles from './progress-ring.css?inline';\n\nconst i18nDefaults = {\n  danger: 'danger',\n  information: 'information',\n  success: 'success',\n  warning: 'warning'\n} satisfies I18nDefaults;\n\n/**\n * @element nve-progress-ring\n * @description The `progress-ring` component shows the status of a pending task. It also serves the basis of the page loading element.\n * @documentation https://nvidia.github.io/elements/docs/elements/progress-ring/\n * @since 0.17.0\n * @entrypoint \\@nvidia-elements/core/progress-ring\n * @slot - Content to display in the ring center. Defaults to a status icon.\n * @cssprop --background-color\n * @cssprop --ring-color\n * @cssprop --ring-background-opacity\n * @cssprop --ring-width\n * @cssprop --width\n * @cssprop --height\n * @cssprop --animation-duration\n * @cssprop --color\n * @csspart icon - The icon element\n * @aria https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/progressbar_role\n */\n@scopedRegistry()\nexport class ProgressRing extends LitElement {\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-progress-ring',\n    version: '0.0.0'\n  };\n\n  static elementDefinitions = {\n    [Icon.metadata.tag]: Icon\n  };\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  /** The current `value` of the progress ring. When not set, an indeterminate animation will show. */\n  @property({ type: Number }) value?: number;\n\n  /** The `max` value of the progress ring that the `value` is proportionally scaled to. */\n  @property({ type: Number }) max? = 100;\n\n  /** Four visual treatments represent the `status` of tasks. When `status` changes to `warning`, `success`, or `danger`, the component embeds appropriate icons. */\n  @property({ type: String, reflect: true }) status?: SupportStatus | 'neutral' = 'neutral';\n\n  /** T-shirt `size` of the progress indicator, used to scale the ring. */\n  @property({ type: String, reflect: true }) size?: Size | 'xxs' | 'xs' | 'xl';\n\n  #i18nController: I18nController<this> = new I18nController<this>(this, i18nDefaults);\n\n  /** Enables updating internal string values for internationalization. */\n  @property({ type: Object }) i18n = this.#i18nController.i18n;\n\n  render() {\n    return html`\n      <div internal-host ?indeterminate=${this.value === undefined}>\n        <svg viewBox=\"0 0 16 16\" role=\"presentation\">\n          <circle cx=\"8px\" cy=\"8px\" r=\"6.5px\" class=\"background\"></circle>\n          <circle cx=\"8px\" cy=\"8px\" r=\"6.5px\" class=\"progress-ring-circle\"\n            stroke-dasharray=${`${((this.value ?? 0) / (this.max ?? 100)) * 44}px 44px`}>\n          </circle>\n        </svg>\n        <slot>\n          ${\n            this.status !== 'accent'\n              ? html`<nve-icon part=\"icon\" .name=${this.status ? statusIcons[this.status] : undefined} .status=${this.status as SupportStatus} aria-hidden=\"true\"></nve-icon>`\n              : ''\n          }\n        </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    this._internals.ariaValueNow = `${this.value === undefined ? '' : this.value}`;\n    this._internals.ariaValueMax = `${this.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"],"mappings":";;;;;;;;;;;AAYA,IAAMI,IAAe;CACnB,QAAQ;CACR,aAAa;CACb,SAAS;CACT,SAAS;AACX,GAqBaC,IAAN,cAA2BC,EAAW;;EA8BR,A,aAXA,KAAA,MAAA,KAG6C,KAAA,SAAA,WAKxC,KAAAE,KAAA,IAAIC,EAAqB,MAAML,CAAY,GAGhD,KAAA,OAAA,KAAKI,GAAgB;;;EA7BxC,KAAA,SAAAE,EAAU,CAACV,CAAM,CAAC;;;EAEP,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;EACX;;;EAE4B,KAAA,qBAAA,GACzBW,EAAK,SAAS,MAAMA,EACvB;;CAiBA;CAKA,SAAS;EACP,OAAO,CAAI,sCAC2B,KAAK,UAAU,KAAA,EAAU,oMAIpC,IAAK,KAAK,SAAS,MAAM,KAAK,OAAO,OAAQ,GAAG,SAAS,yBAK5E,KAAK,WAAW,WAEZ,KADA,CAAI,gCAA+B,KAAK,SAASC,EAAY,KAAK,UAAU,KAAA,EAAU,aAAW,KAAK,OAAwB,kCAEnI;CAIT;CAEA,oBAAoB;EAGlB,AAFA,MAAM,kBAAkB,GACxBC,EAAgB,IAAI,GACpB,KAAK,WAAW,OAAO;CACzB;CAEA,QAAQ,GAA6B;EAGnC,AAFA,MAAM,QAAQC,CAAK,GACnB,KAAK,WAAW,eAAe,GAAG,KAAK,UAAU,KAAA,IAAY,KAAK,KAAK,SACvE,KAAK,WAAW,eAAe,GAAG,KAAK;EACvC,IAAM,EAAE,cAAW,MACbC,IACJC,MAAW,KAAA,KAAaA,MAAW,aAAaA,MAAW,WAAW,KAAK,KAAKA,KAAU,KAAA;EAC5F,KAAK,WAAW,YAAYD,KAAe,KAAK,KAAK,eAAe;CACtE;AACF;AAnDGd,EAAA,CAAAgB,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAAZ,EAAA,WAAA,SAAA,KAAA,CAAA,GAGzBJ,EAAA,CAAAgB,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAAZ,EAAA,WAAA,OAAA,KAAA,CAAA,GAGzBJ,EAAA,CAAAgB,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAAZ,EAAA,WAAA,UAAA,KAAA,CAAA,GAGxCJ,EAAA,CAAAgB,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAAZ,EAAA,WAAA,QAAA,KAAA,CAAA,GAKxCJ,EAAA,CAAAgB,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAAZ,EAAA,WAAA,QAAA,KAAA,CAAA,GA/B3B,IAAAJ,EAAA,CAAAiB,EAAe,CAAA,GAAAb,CAAA"}

package/dist/progressive-filter-chip/define.js

@@ -1,7 +1,6 @@
 import { ProgressiveFilterChip as e } from "./progressive-filter-chip2.js";
 import { define as t } from "@nvidia-elements/foundations/internal/define";
-//#region src/progressive-filter-chip/define.ts
+// src/progressive-filter-chip/define.ts
 t(e);
-//#endregion
 
 //# sourceMappingURL=define.js.map

package/dist/progressive-filter-chip/define.js.map

@@ -1 +1 @@
-{"version":3,"file":"define.js","names":[],"sources":["../../src/progressive-filter-chip/define.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { define } from '@nvidia-elements/foundations/internal/define';\nimport { ProgressiveFilterChip } from '@nvidia-elements/core/progressive-filter-chip';\n\ndefine(ProgressiveFilterChip);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nve-progressive-filter-chip': ProgressiveFilterChip;\n  }\n}\n"],"mappings":";;;AAMA,EAAO,CAAqB"}
+{"version":3,"file":"define.js","names":["define","ProgressiveFilterChip"],"sources":["../../src/progressive-filter-chip/define.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { define } from '@nvidia-elements/foundations/internal/define';\nimport { ProgressiveFilterChip } from '@nvidia-elements/core/progressive-filter-chip';\n\ndefine(ProgressiveFilterChip);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nve-progressive-filter-chip': ProgressiveFilterChip;\n  }\n}\n"],"mappings":";;;AAMAA,EAAOC,CAAqB"}

package/dist/progressive-filter-chip/index.js

@@ -1,2 +1 @@
-import { ProgressiveFilterChip as e } from "./progressive-filter-chip2.js";
-export { e as ProgressiveFilterChip };
+export { ProgressiveFilterChip } from "./progressive-filter-chip2.js";

package/dist/progressive-filter-chip/progressive-filter-chip.examples.js

@@ -1,6 +1,5 @@
-//#region src/progressive-filter-chip/progressive-filter-chip.examples.ts
+// src/progressive-filter-chip/progressive-filter-chip.examples.ts
 var e = "";
-//#endregion
 export { e as default };
 
 //# sourceMappingURL=progressive-filter-chip.examples.js.map

package/dist/progressive-filter-chip/progressive-filter-chip.examples.js.map

@@ -1 +1 @@
-{"version":3,"file":"progressive-filter-chip.examples.js","names":[],"sources":["../../src/progressive-filter-chip/progressive-filter-chip.examples.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html } from 'lit';\nimport '@nvidia-elements/core/progressive-filter-chip/define.js';\nimport '@nvidia-elements/core/input/define.js';\nimport '@nvidia-elements/core/card/define.js';\nimport '@nvidia-elements/core/select/define.js';\n\nexport default {\n  title: 'Elements/Progressive Filter Chip',\n  component: 'nve-progressive-filter-chip',\n};\n\n/**\n * @summary Basic progressive filter chip with cascading select dropdowns for multi-criteria filtering.\n */\nexport const Default = {\n  render: () => html`\n    <nve-progressive-filter-chip closable>\n      <nve-select>\n        <select aria-label=\"dataset\">\n          <option>workload</option>\n          <option selected>instance</option>\n        </select>\n      </nve-select>\n      <nve-select>\n        <select aria-label=\"condition\">\n          <option>sort by</option>\n          <option selected>filter by</option>\n        </select>\n      </nve-select>\n      <nve-select>\n        <select aria-label=\"filter\">\n          <option selected>utilization</option>\n          <option>status</option>\n        </select>\n      </nve-select>\n    </nve-progressive-filter-chip>\n  `\n}\n\n/**\n * @summary Progressive filter chip with proper layer stacking within dropdown contexts.\n */\nexport const Layer = {\n  render: () => html`\n    <nve-progressive-filter-chip closable>\n      <nve-select>\n        <select aria-label=\"dataset\">\n          <option>workload</option>\n          <option selected>instance</option>\n        </select>\n      </nve-select>\n      <nve-select>\n        <select aria-label=\"condition\">\n          <option>sort by</option>\n          <option selected>filter by</option>\n        </select>\n      </nve-select>\n      <nve-select>\n        <select aria-label=\"filter\">\n          <option selected>utilization</option>\n          <option>status</option>\n        </select>\n      </nve-select>\n    </nve-progressive-filter-chip>\n  `\n}\n\n/**\n * @summary Progressive filter chip with multi-select dropdown for filtering by many values simultaneously.\n */\nexport const Multiple = {\nrender: () => html`\n    <nve-progressive-filter-chip closable>\n      <nve-select>\n        <select aria-label=\"dataset\">\n          <option selected>status</option>\n          <option>workload</option>\n        </select>\n      </nve-select>\n      <nve-select>\n        <select aria-label=\"condition\">\n          <option selected>filter by</option>\n          <option>sort by</option>\n        </select>\n      </nve-select>\n      <nve-select>\n        <select multiple aria-label=\"filter\">\n          <option selected>progress</option>\n          <option>pending</option>\n          <option>success</option>\n          <option>failed</option>\n        </select>\n      </nve-select>\n    </nve-progressive-filter-chip>\n  `\n}\n\n/**\n * @summary Progressive filter chip with numeric text input for threshold-based filtering (greater than, less than).\n */\nexport const TextInput = {\n  render: () => html`\n    <nve-progressive-filter-chip closable>\n      <nve-select>\n        <select aria-label=\"dataset\">\n          <option selected>memory</option>\n          <option>CPU</option>\n        </select>\n      </nve-select>\n      <nve-select>\n        <select aria-label=\"condition\">\n          <option selected>greater than</option>\n          <option>less than</option>\n          <option>equal to</option>\n        </select>\n      </nve-select>\n      <nve-input>\n        <input type=\"number\" min=\"0\" max=\"100\" value=\"50\" aria-label=\"filter\" />\n      </nve-input>\n    </nve-progressive-filter-chip>\n  `\n}\n\n/**\n * @summary Progressive filter chip with date picker inputs for filtering by date range criteria.\n */\nexport const DateRange = {\n  render: () => html`\n    <nve-progressive-filter-chip>\n      <nve-select>\n        <select aria-label=\"date type\">\n          <option>recording date</option>\n          <option>process date</option>\n        </select>\n      </nve-select>\n      <nve-date>\n        <input type=\"date\" value=\"2022-05-11\" aria-label=\"start date\" />\n      </nve-date>\n      <nve-date>\n        <input type=\"date\" value=\"2022-12-07\" aria-label=\"end date\" />\n      </nve-date>\n    </nve-progressive-filter-chip>\n    `\n}\n\n/**\n * @summary Progressive filter chip with custom button trigger opening a map coordinate picker dropdown.\n */\nexport const Custom = {\n  render: () => html`\n    <nve-progressive-filter-chip closable>\n      <nve-select>\n        <select aria-label=\"dataset\">\n          <option>GPS</option>\n          <option selected>Cellular</option>\n        </select>\n      </nve-select>\n      <nve-select>\n        <select aria-label=\"condition\">\n          <option>contains</option>\n          <option>excludes</option>\n        </select>\n      </nve-select>\n      <nve-button style=\"width: 190px\" popovertarget=\"map-dropdown\">37.3706254,-121.9671894</nve-button>\n    </nve-progressive-filter-chip>\n    <nve-dropdown id=\"map-dropdown\">\n      <nve-input>\n        <nve-icon-button icon-name=\"map-pin\" readonly></nve-icon-button>\n        <input value=\"37.3706254,-121.9671894\" disabled aria-label=\"map coordinates\" />\n      </nve-input>\n      <img src=\"/static/images/test-map-2.webp\" width=\"300px\" alt=\"non-interactive demo map\" />\n    </nve-dropdown>\n  `\n}\n\n/**\n * @summary Progressive filter chip with input validation states showing required field and error styling.\n */\nexport const Validation = {\n  render: () => html`\n<div nve-layout=\"column gap:lg\">\n  <nve-progressive-filter-chip closable>\n    <nve-input>\n      <input type=\"text\" value=\"validation\" required aria-label=\"validation\" />\n      <nve-control-message error=\"valueMissing\">required</nve-control-message>\n    </nve-input>\n    <nve-input>\n      <input type=\"text\" aria-label=\"validation\" />\n    </nve-input>\n  </nve-progressive-filter-chip>\n\n  <nve-progressive-filter-chip closable>\n    <nve-input status=\"error\">\n      <input type=\"text\" value=\"manual validation\" formnovalidate aria-label=\"manual validation\" />\n    </nve-input>\n    <nve-input>\n      <input type=\"text\" aria-label=\"validation\" />\n    </nve-input>\n  </nve-progressive-filter-chip>\n</div>\n  `\n}\n"],"mappings":";AAGA,IAAA,IAAS"}
+{"version":3,"file":"progressive-filter-chip.examples.js","names":["progressive_filter_chip_examples_default"],"sources":["../../src/progressive-filter-chip/progressive-filter-chip.examples.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html } from 'lit';\nimport '@nvidia-elements/core/progressive-filter-chip/define.js';\nimport '@nvidia-elements/core/input/define.js';\nimport '@nvidia-elements/core/card/define.js';\nimport '@nvidia-elements/core/select/define.js';\n\nexport default {\n  title: 'Elements/Progressive Filter Chip',\n  component: 'nve-progressive-filter-chip',\n};\n\n/**\n * @summary Basic progressive filter chip with cascading select dropdowns for multi-criteria filtering.\n */\nexport const Default = {\n  render: () => html`\n    <nve-progressive-filter-chip closable>\n      <nve-select>\n        <select aria-label=\"dataset\">\n          <option>workload</option>\n          <option selected>instance</option>\n        </select>\n      </nve-select>\n      <nve-select>\n        <select aria-label=\"condition\">\n          <option>sort by</option>\n          <option selected>filter by</option>\n        </select>\n      </nve-select>\n      <nve-select>\n        <select aria-label=\"filter\">\n          <option selected>utilization</option>\n          <option>status</option>\n        </select>\n      </nve-select>\n    </nve-progressive-filter-chip>\n  `\n}\n\n/**\n * @summary Progressive filter chip with proper layer stacking within dropdown contexts.\n */\nexport const Layer = {\n  render: () => html`\n    <nve-progressive-filter-chip closable>\n      <nve-select>\n        <select aria-label=\"dataset\">\n          <option>workload</option>\n          <option selected>instance</option>\n        </select>\n      </nve-select>\n      <nve-select>\n        <select aria-label=\"condition\">\n          <option>sort by</option>\n          <option selected>filter by</option>\n        </select>\n      </nve-select>\n      <nve-select>\n        <select aria-label=\"filter\">\n          <option selected>utilization</option>\n          <option>status</option>\n        </select>\n      </nve-select>\n    </nve-progressive-filter-chip>\n  `\n}\n\n/**\n * @summary Progressive filter chip with multi-select dropdown for filtering by many values simultaneously.\n */\nexport const Multiple = {\nrender: () => html`\n    <nve-progressive-filter-chip closable>\n      <nve-select>\n        <select aria-label=\"dataset\">\n          <option selected>status</option>\n          <option>workload</option>\n        </select>\n      </nve-select>\n      <nve-select>\n        <select aria-label=\"condition\">\n          <option selected>filter by</option>\n          <option>sort by</option>\n        </select>\n      </nve-select>\n      <nve-select>\n        <select multiple aria-label=\"filter\">\n          <option selected>progress</option>\n          <option>pending</option>\n          <option>success</option>\n          <option>failed</option>\n        </select>\n      </nve-select>\n    </nve-progressive-filter-chip>\n  `\n}\n\n/**\n * @summary Progressive filter chip with numeric text input for threshold-based filtering (greater than, less than).\n */\nexport const TextInput = {\n  render: () => html`\n    <nve-progressive-filter-chip closable>\n      <nve-select>\n        <select aria-label=\"dataset\">\n          <option selected>memory</option>\n          <option>CPU</option>\n        </select>\n      </nve-select>\n      <nve-select>\n        <select aria-label=\"condition\">\n          <option selected>greater than</option>\n          <option>less than</option>\n          <option>equal to</option>\n        </select>\n      </nve-select>\n      <nve-input>\n        <input type=\"number\" min=\"0\" max=\"100\" value=\"50\" aria-label=\"filter\" />\n      </nve-input>\n    </nve-progressive-filter-chip>\n  `\n}\n\n/**\n * @summary Progressive filter chip with date picker inputs for filtering by date range criteria.\n */\nexport const DateRange = {\n  render: () => html`\n    <nve-progressive-filter-chip>\n      <nve-select>\n        <select aria-label=\"date type\">\n          <option>recording date</option>\n          <option>process date</option>\n        </select>\n      </nve-select>\n      <nve-date>\n        <input type=\"date\" value=\"2022-05-11\" aria-label=\"start date\" />\n      </nve-date>\n      <nve-date>\n        <input type=\"date\" value=\"2022-12-07\" aria-label=\"end date\" />\n      </nve-date>\n    </nve-progressive-filter-chip>\n    `\n}\n\n/**\n * @summary Progressive filter chip with custom button trigger opening a map coordinate picker dropdown.\n */\nexport const Custom = {\n  render: () => html`\n    <nve-progressive-filter-chip closable>\n      <nve-select>\n        <select aria-label=\"dataset\">\n          <option>GPS</option>\n          <option selected>Cellular</option>\n        </select>\n      </nve-select>\n      <nve-select>\n        <select aria-label=\"condition\">\n          <option>contains</option>\n          <option>excludes</option>\n        </select>\n      </nve-select>\n      <nve-button style=\"width: 190px\" popovertarget=\"map-dropdown\">37.3706254,-121.9671894</nve-button>\n    </nve-progressive-filter-chip>\n    <nve-dropdown id=\"map-dropdown\">\n      <nve-input>\n        <nve-icon-button icon-name=\"map-pin\" readonly></nve-icon-button>\n        <input value=\"37.3706254,-121.9671894\" disabled aria-label=\"map coordinates\" />\n      </nve-input>\n      <img src=\"/static/images/test-map-2.webp\" width=\"300px\" alt=\"non-interactive demo map\" />\n    </nve-dropdown>\n  `\n}\n\n/**\n * @summary Progressive filter chip with input validation states showing required field and error styling.\n */\nexport const Validation = {\n  render: () => html`\n<div nve-layout=\"column gap:lg\">\n  <nve-progressive-filter-chip closable>\n    <nve-input>\n      <input type=\"text\" value=\"validation\" required aria-label=\"validation\" />\n      <nve-control-message error=\"valueMissing\">required</nve-control-message>\n    </nve-input>\n    <nve-input>\n      <input type=\"text\" aria-label=\"validation\" />\n    </nve-input>\n  </nve-progressive-filter-chip>\n\n  <nve-progressive-filter-chip closable>\n    <nve-input status=\"error\">\n      <input type=\"text\" value=\"manual validation\" formnovalidate aria-label=\"manual validation\" />\n    </nve-input>\n    <nve-input>\n      <input type=\"text\" aria-label=\"validation\" />\n    </nve-input>\n  </nve-progressive-filter-chip>\n</div>\n  `\n}\n"],"mappings":";AAGA,IAAAA,IAAS"}