@nvidia-elements/core 2.20.1 → 2.20.2

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

@@ -1 +1 @@
-{"version":3,"file":"progressive-filter-chip2.js","names":[],"sources":["../../src/progressive-filter-chip/progressive-filter-chip.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, LitElement, nothing } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { state } from 'lit/decorators/state.js';\nimport {\n  appendRootNodeStyle,\n  attachInternals,\n  generateId,\n  scopedRegistry,\n  TypeClosableController,\n  typeSSR,\n  useStyles\n} from '@nvidia-elements/core/internal';\nimport { I18nController, type I18nDefaults } from '@nvidia-elements/foundations/internal/i18n';\nimport { Input } from '@nvidia-elements/core/input';\nimport { Select } from '@nvidia-elements/core/select';\nimport { Date } from '@nvidia-elements/core/date';\nimport { IconButton } from '@nvidia-elements/core/icon-button';\nimport globalStyles from './progressive-filter-chip.global.css?inline';\nimport styles from './progressive-filter-chip.css?inline';\n\nconst i18nDefaults = {\n  close: 'close'\n} satisfies I18nDefaults;\n\n/**\n * @element nve-progressive-filter-chip\n * @description A filter chip is a control that enables users to select many options from a set of choices.\n * @documentation https://nvidia.github.io/elements/docs/elements/progressive-filter-chip/\n * @since 0.16.0\n * @entrypoint \\@nvidia-elements/core/progressive-filter-chip\n * @slot - `input`, `select`, `nve-button`, or other `[nve-control]` elements used to build the filter.\n * @event close - Dispatched when the filter chip closes.\n * @cssprop --gap\n * @cssprop --border-radius\n * @cssprop --border\n * @cssprop --background\n * @cssprop --font-weight\n * @cssprop --padding\n * @cssprop --width\n * @csspart select - The select element\n * @csspart date - The date input element\n * @csspart input - The input element\n * @csspart icon-button - The icon button element\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/\n */\n@typeSSR()\n@scopedRegistry()\nexport class ProgressiveFilterChip extends LitElement {\n  static readonly metadata = {\n    tag: 'nve-progressive-filter-chip',\n    version: '0.0.0'\n  };\n\n  static elementDefinitions = {\n    [Input.metadata.tag]: Input,\n    [Select.metadata.tag]: Select,\n    [Date.metadata.tag]: Date,\n    [IconButton.metadata.tag]: IconButton\n  };\n\n  /** Determines if a close button should render within filter chip */\n  @property({ type: Boolean }) closable: boolean;\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  @state() private inputs: Element[] = [];\n\n  static styles = useStyles([styles]);\n\n  #typeClosableController = new TypeClosableController(this);\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  #getControlTemplate(el: Element) {\n    const slot = html`<slot name=${el.slot} @slotchange=${this.#removeItem}></slot>`;\n    if (el.tagName === 'SELECT') {\n      return html`<nve-select part=\"select\" multiple-overflow ?fit-text=${!(el as HTMLSelectElement).multiple}>${slot}</nve-select>`;\n    } else if (el.tagName === 'INPUT' && (el as HTMLInputElement).type === 'date') {\n      return html`<nve-date part=\"date\">${slot}</nve-date>`;\n    } else if (el.tagName === 'INPUT') {\n      return html`<nve-input part=\"input\">${slot}</nve-input>`;\n    } else {\n      return slot;\n    }\n  }\n\n  render() {\n    return html`\n    <div internal-host>\n      ${this.inputs.map(el => this.#getControlTemplate(el))}\n      ${this.closable ? html`<nve-icon-button part=\"icon-button\" exportparts=\"icon:icon-button-icon\" @click=${() => this.#typeClosableController.close()} .ariaLabel=${this.i18n.close} icon-name=\"cancel\"></nve-icon-button>` : nothing}\n    </div>\n    <slot hidden-slot @slotchange=${this.#createItems}></slot>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    this._internals.role = 'toolbar';\n    this.setAttribute('nve-control', '');\n    appendRootNodeStyle(this, globalStyles);\n  }\n\n  #removeItem(e: Event) {\n    if (!(e.target as HTMLSlotElement).assignedElements().length) {\n      this.#resetItems();\n    }\n  }\n\n  #createItems(e: Event) {\n    if (e.target && (e.target as HTMLSlotElement).assignedElements().length) {\n      this.#resetItems();\n      const items = Array.from(\n        this.shadowRoot!.querySelector<HTMLSlotElement>('slot:not([name])')!.assignedElements()\n      ).filter(i => i.matches('input, select, nve-button, [nve-control]'));\n      items.forEach(i => (i.slot = generateId()));\n      this.inputs = items.length ? items : this.inputs;\n    }\n  }\n\n  #resetItems() {\n    Array.from(this.shadowRoot!.querySelectorAll('slot'))\n      .flatMap(i => i.assignedElements())\n      .forEach(i => (i.slot = ''));\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAuBA,IAAM,IAAe,EACnB,OAAO,QACT,GAyBa,IAAN,cAAoC,EAAW;;EAyB1B,aATc,KAAA,KAAA,IAAI,EAAqB,MAAM,CAAY,GAGhD,KAAA,OAAA,KAAK,GAAgB,MAEnB,KAAA,SAAA,CAAC,GAIZ,KAAA,KAAA,IAAI,EAAuB,IAAI;;;EAxB9B,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;EACX;;;EAE4B,KAAA,qBAAA;IACzB,EAAM,SAAS,MAAM;IACrB,EAAO,SAAS,MAAM;IACtB,EAAK,SAAS,MAAM;IACpB,EAAW,SAAS,MAAM;EAC7B;;CAKA;;EAOgB,KAAA,SAAA,EAAU,CAAC,CAAM,CAAC;;CAElC;CAKA,GAAoB,GAAa;EAC/B,IAAM,IAAO,CAAI,eAAc,EAAG,KAAK,iBAAe,KAAK,GAAY;EAQrE,OAPE,EAAG,YAAY,WACV,CAAI,0DAAyD,CAAE,EAAyB,SAAS,IAAG,EAAK,iBACvG,EAAG,YAAY,WAAY,EAAwB,SAAS,SAC9D,CAAI,yBAAyB,EAAK,eAChC,EAAG,YAAY,UACjB,CAAI,2BAA2B,EAAK,gBAEpC;CAEX;CAEA,SAAS;EACP,OAAO,CAAI,sBAEP,KAAK,OAAO,KAAI,MAAM,KAAK,GAAoB,CAAE,CAAC,EAAE,GACpD,KAAK,WAAW,CAAI,yFAAwF,KAAK,GAAwB,MAAM,EAAE,gBAAc,KAAK,KAAK,MAAM,2CAA0C,EAAQ,uCAErM,KAAK,GAAa;CAEpD;CAEA,oBAAoB;EAKlB,AAJA,MAAM,kBAAkB,GACxB,EAAgB,IAAI,GACpB,KAAK,WAAW,OAAO,WACvB,KAAK,aAAa,eAAe,EAAE,GACnC,EAAoB,MAAM,CAAY;CACxC;CAEA,GAAY,GAAU;EACpB,AAAM,EAAE,OAA2B,iBAAiB,CAAC,CAAC,UACpD,KAAK,GAAY;CAErB;CAEA,GAAa,GAAU;EACrB,IAAI,EAAE,UAAW,EAAE,OAA2B,iBAAiB,CAAC,CAAC,QAAQ;GACvE,KAAK,GAAY;GACjB,IAAM,IAAQ,MAAM,KAClB,KAAK,WAAY,cAA+B,kBAAkB,CAAC,CAAE,iBAAiB,CACxF,CAAC,CAAC,QAAO,MAAK,EAAE,QAAQ,0CAA0C,CAAC;GAEnE,AADA,EAAM,SAAQ,MAAM,EAAE,OAAO,EAAW,CAAE,GAC1C,KAAK,SAAS,EAAM,SAAS,IAAQ,KAAK;EAC5C;CACF;CAEA,KAAc;EACZ,MAAM,KAAK,KAAK,WAAY,iBAAiB,MAAM,CAAC,CAAC,CAClD,SAAQ,MAAK,EAAE,iBAAiB,CAAC,CAAC,CAClC,SAAQ,MAAM,EAAE,OAAO,EAAG;CAC/B;AACF;AArEG,EAAA,CAAA,EAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,GAK1B,EAAA,CAAA,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,GAEzB,EAAA,CAAA,EAAM,CAAA,GAAA,EAAA,WAAA,UAAA,KAAA,CAAA,GAvBR,IAAA,EAAA,CAAA,EAAQ,GACR,EAAe,CAAA,GAAA,CAAA"}
+{"version":3,"file":"progressive-filter-chip2.js","names":["styles","globalStyles","_decorate","__decorate","progressive_filter_chip_global_default","progressive_filter_chip_default","i18nDefaults","ProgressiveFilterChip","LitElement","_args","#i18nController","I18nController","#typeClosableController","TypeClosableController","Input","Select","Date","IconButton","useStyles","slot","el","#removeItem","#getControlTemplate","nothing","#createItems","attachInternals","appendRootNodeStyle","#resetItems","items","i","generateId","property","state","typeSSR","scopedRegistry"],"sources":["../../src/progressive-filter-chip/progressive-filter-chip.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, LitElement, nothing } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { state } from 'lit/decorators/state.js';\nimport {\n  appendRootNodeStyle,\n  attachInternals,\n  generateId,\n  scopedRegistry,\n  TypeClosableController,\n  typeSSR,\n  useStyles\n} from '@nvidia-elements/core/internal';\nimport { I18nController, type I18nDefaults } from '@nvidia-elements/foundations/internal/i18n';\nimport { Input } from '@nvidia-elements/core/input';\nimport { Select } from '@nvidia-elements/core/select';\nimport { Date } from '@nvidia-elements/core/date';\nimport { IconButton } from '@nvidia-elements/core/icon-button';\nimport globalStyles from './progressive-filter-chip.global.css?inline';\nimport styles from './progressive-filter-chip.css?inline';\n\nconst i18nDefaults = {\n  close: 'close'\n} satisfies I18nDefaults;\n\n/**\n * @element nve-progressive-filter-chip\n * @description A filter chip is a control that enables users to select many options from a set of choices.\n * @documentation https://nvidia.github.io/elements/docs/elements/progressive-filter-chip/\n * @since 0.16.0\n * @entrypoint \\@nvidia-elements/core/progressive-filter-chip\n * @slot - `input`, `select`, `nve-button`, or other `[nve-control]` elements used to build the filter.\n * @event close - Dispatched when the filter chip closes.\n * @cssprop --gap\n * @cssprop --border-radius\n * @cssprop --border\n * @cssprop --background\n * @cssprop --font-weight\n * @cssprop --padding\n * @cssprop --width\n * @csspart select - The select element\n * @csspart date - The date input element\n * @csspart input - The input element\n * @csspart icon-button - The icon button element\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/\n */\n@typeSSR()\n@scopedRegistry()\nexport class ProgressiveFilterChip extends LitElement {\n  static readonly metadata = {\n    tag: 'nve-progressive-filter-chip',\n    version: '0.0.0'\n  };\n\n  static elementDefinitions = {\n    [Input.metadata.tag]: Input,\n    [Select.metadata.tag]: Select,\n    [Date.metadata.tag]: Date,\n    [IconButton.metadata.tag]: IconButton\n  };\n\n  /** Determines if a close button should render within filter chip */\n  @property({ type: Boolean }) closable: boolean;\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  @state() private inputs: Element[] = [];\n\n  static styles = useStyles([styles]);\n\n  #typeClosableController = new TypeClosableController(this);\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  #getControlTemplate(el: Element) {\n    const slot = html`<slot name=${el.slot} @slotchange=${this.#removeItem}></slot>`;\n    if (el.tagName === 'SELECT') {\n      return html`<nve-select part=\"select\" multiple-overflow ?fit-text=${!(el as HTMLSelectElement).multiple}>${slot}</nve-select>`;\n    } else if (el.tagName === 'INPUT' && (el as HTMLInputElement).type === 'date') {\n      return html`<nve-date part=\"date\">${slot}</nve-date>`;\n    } else if (el.tagName === 'INPUT') {\n      return html`<nve-input part=\"input\">${slot}</nve-input>`;\n    } else {\n      return slot;\n    }\n  }\n\n  render() {\n    return html`\n    <div internal-host>\n      ${this.inputs.map(el => this.#getControlTemplate(el))}\n      ${this.closable ? html`<nve-icon-button part=\"icon-button\" exportparts=\"icon:icon-button-icon\" @click=${() => this.#typeClosableController.close()} .ariaLabel=${this.i18n.close} icon-name=\"cancel\"></nve-icon-button>` : nothing}\n    </div>\n    <slot hidden-slot @slotchange=${this.#createItems}></slot>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    this._internals.role = 'toolbar';\n    this.setAttribute('nve-control', '');\n    appendRootNodeStyle(this, globalStyles);\n  }\n\n  #removeItem(e: Event) {\n    if (!(e.target as HTMLSlotElement).assignedElements().length) {\n      this.#resetItems();\n    }\n  }\n\n  #createItems(e: Event) {\n    if (e.target && (e.target as HTMLSlotElement).assignedElements().length) {\n      this.#resetItems();\n      const items = Array.from(\n        this.shadowRoot!.querySelector<HTMLSlotElement>('slot:not([name])')!.assignedElements()\n      ).filter(i => i.matches('input, select, nve-button, [nve-control]'));\n      items.forEach(i => (i.slot = generateId()));\n      this.inputs = items.length ? items : this.inputs;\n    }\n  }\n\n  #resetItems() {\n    Array.from(this.shadowRoot!.querySelectorAll('slot'))\n      .flatMap(i => i.assignedElements())\n      .forEach(i => (i.slot = ''));\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAuBA,IAAMM,IAAe,EACnB,OAAO,QACT,GAyBaC,IAAN,cAAoCC,EAAW;;EAyB1B,A,aATc,KAAAE,KAAA,IAAIC,EAAqB,MAAML,CAAY,GAGhD,KAAA,OAAA,KAAKI,GAAgB,MAEnB,KAAA,SAAA,CAAC,GAIZ,KAAAE,KAAA,IAAIC,EAAuB,IAAI;;;EAxB9B,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;EACX;;;EAE4B,KAAA,qBAAA;IACzBC,EAAM,SAAS,MAAMA;IACrBC,EAAO,SAAS,MAAMA;IACtBC,EAAK,SAAS,MAAMA;IACpBC,EAAW,SAAS,MAAMA;EAC7B;;CAKA;;EAOgB,KAAA,SAAAC,EAAU,CAAClB,CAAM,CAAC;;CAElC;CAKA,GAAoB,GAAa;EAC/B,IAAMmB,IAAO,CAAI,eAAcC,EAAG,KAAK,iBAAe,KAAKC,GAAY;EAQrE,OAPED,EAAG,YAAY,WACV,CAAI,0DAAyD,CAAEA,EAAyB,SAAS,IAAGD,EAAK,iBACvGC,EAAG,YAAY,WAAYA,EAAwB,SAAS,SAC9D,CAAI,yBAAyBD,EAAK,eAChCC,EAAG,YAAY,UACjB,CAAI,2BAA2BD,EAAK,gBAEpCA;CAEX;CAEA,SAAS;EACP,OAAO,CAAI,sBAEP,KAAK,OAAO,KAAI,MAAM,KAAKG,GAAoBF,CAAE,CAAC,EAAE,GACpD,KAAK,WAAW,CAAI,yFAAwF,KAAKR,GAAwB,MAAM,EAAE,gBAAc,KAAK,KAAK,MAAM,2CAA0CW,EAAQ,uCAErM,KAAKC,GAAa;CAEpD;CAEA,oBAAoB;EAKlB,AAJA,MAAM,kBAAkB,GACxBC,EAAgB,IAAI,GACpB,KAAK,WAAW,OAAO,WACvB,KAAK,aAAa,eAAe,EAAE,GACnCC,EAAoB,MAAMzB,CAAY;CACxC;CAEA,GAAY,GAAU;EACpB,AAAM,EAAE,OAA2B,iBAAiB,CAAC,CAAC,UACpD,KAAK0B,GAAY;CAErB;CAEA,GAAa,GAAU;EACrB,IAAI,EAAE,UAAW,EAAE,OAA2B,iBAAiB,CAAC,CAAC,QAAQ;GACvE,KAAKA,GAAY;GACjB,IAAMC,IAAQ,MAAM,KAClB,KAAK,WAAY,cAA+B,kBAAkB,CAAC,CAAE,iBAAiB,CACxF,CAAC,CAAC,QAAO,MAAKC,EAAE,QAAQ,0CAA0C,CAAC;GAEnE,AADAD,EAAM,SAAQ,MAAM,EAAE,OAAOE,EAAW,CAAE,GAC1C,KAAK,SAASF,EAAM,SAASA,IAAQ,KAAK;EAC5C;CACF;CAEA,KAAc;EACZ,MAAM,KAAK,KAAK,WAAY,iBAAiB,MAAM,CAAC,CAAC,CAClD,SAAQ,MAAKC,EAAE,iBAAiB,CAAC,CAAC,CAClC,SAAQ,MAAM,EAAE,OAAO,EAAG;CAC/B;AACF;AArEG3B,EAAA,CAAA6B,EAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,GAAAxB,EAAA,WAAA,YAAA,KAAA,CAAA,GAK1BL,EAAA,CAAA6B,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAAxB,EAAA,WAAA,QAAA,KAAA,CAAA,GAEzBL,EAAA,CAAA8B,EAAM,CAAA,GAAAzB,EAAA,WAAA,UAAA,KAAA,CAAA,GAvBR,IAAAL,EAAA,CAAA+B,EAAQ,GACRC,EAAe,CAAA,GAAA3B,CAAA"}

package/dist/pulse/define.js

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

package/dist/pulse/define.js.map

@@ -1 +1 @@
-{"version":3,"file":"define.js","names":[],"sources":["../../src/pulse/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 { Pulse } from '@nvidia-elements/core/pulse';\n\ndefine(Pulse);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nve-pulse': Pulse;\n  }\n}\n"],"mappings":";;;AAMA,EAAO,CAAK"}
+{"version":3,"file":"define.js","names":["define","Pulse"],"sources":["../../src/pulse/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 { Pulse } from '@nvidia-elements/core/pulse';\n\ndefine(Pulse);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nve-pulse': Pulse;\n  }\n}\n"],"mappings":";;;AAMAA,EAAOC,CAAK"}

package/dist/pulse/index.js

@@ -1,2 +1 @@
-import { Pulse as e } from "./pulse2.js";
-export { e as Pulse };
+export { Pulse } from "./pulse2.js";

package/dist/pulse/pulse.examples.js

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

package/dist/pulse/pulse.examples.js.map

@@ -1 +1 @@
-{"version":3,"file":"pulse.examples.js","names":[],"sources":["../../src/pulse/pulse.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/pulse/define.js';\n\nexport default {\n  title: 'Elements/Pulse',\n  component: 'nve-pulse',\n};\n\n/**\n * @summary Animated pulse indicator with aria-label for accessibility. Use to draw attention to live updates, active connections, or real-time status.\n */\nexport const Default = {\n  render: () => html`\n    <div nve-layout=\"row align:center\">\n      <nve-pulse aria-label=\"pulse component\"></nve-pulse>\n    </div>\n`};\n\n/**\n * @summary Pulse status variants for different severity levels. Use accent for highlights, warning for caution states, and danger for critical alerts.\n */\nexport const Status = {\n  render: () => html`\n    <div nve-layout=\"row gap:sm pad:md\">\n      <nve-pulse></nve-pulse>\n      <nve-pulse status=\"accent\"></nve-pulse>\n      <nve-pulse status=\"warning\"></nve-pulse>\n      <nve-pulse status=\"danger\"></nve-pulse>\n    </div>\n`};\n\n/**\n * @summary Pulse size variants from extra-small to large. Choose sizes based on context—smaller for inline indicators, larger for prominent status displays.\n * @tags test-case\n */\nexport const Size = {\n  render: () => html`\n    <div nve-layout=\"row align:center\">\n      <nve-pulse size=\"xs\"></nve-pulse>\n      <nve-pulse size=\"sm\"></nve-pulse>\n      <nve-pulse size=\"md\"></nve-pulse>\n      <nve-pulse size=\"lg\"></nve-pulse>\n    </div>\n`};\n\n/**\n * @summary Pulse used inline with text labels. Ideal for status indicators in lists, tables, or headers to show real-time or live states.\n */\nexport const Inline = {\n  render: () => html`\n    <div nve-layout=\"row gap:xs align:center\">\n      <nve-pulse status=\"danger\"></nve-pulse>\n      Live Status\n    </div>\n  `\n}"],"mappings":";AAGA,IAAA,IAAS"}
+{"version":3,"file":"pulse.examples.js","names":["pulse_examples_default"],"sources":["../../src/pulse/pulse.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/pulse/define.js';\n\nexport default {\n  title: 'Elements/Pulse',\n  component: 'nve-pulse',\n};\n\n/**\n * @summary Animated pulse indicator with aria-label for accessibility. Use to draw attention to live updates, active connections, or real-time status.\n */\nexport const Default = {\n  render: () => html`\n    <div nve-layout=\"row align:center\">\n      <nve-pulse aria-label=\"pulse component\"></nve-pulse>\n    </div>\n`};\n\n/**\n * @summary Pulse status variants for different severity levels. Use accent for highlights, warning for caution states, and danger for critical alerts.\n */\nexport const Status = {\n  render: () => html`\n    <div nve-layout=\"row gap:sm pad:md\">\n      <nve-pulse></nve-pulse>\n      <nve-pulse status=\"accent\"></nve-pulse>\n      <nve-pulse status=\"warning\"></nve-pulse>\n      <nve-pulse status=\"danger\"></nve-pulse>\n    </div>\n`};\n\n/**\n * @summary Pulse size variants from extra-small to large. Choose sizes based on context—smaller for inline indicators, larger for prominent status displays.\n * @tags test-case\n */\nexport const Size = {\n  render: () => html`\n    <div nve-layout=\"row align:center\">\n      <nve-pulse size=\"xs\"></nve-pulse>\n      <nve-pulse size=\"sm\"></nve-pulse>\n      <nve-pulse size=\"md\"></nve-pulse>\n      <nve-pulse size=\"lg\"></nve-pulse>\n    </div>\n`};\n\n/**\n * @summary Pulse used inline with text labels. Ideal for status indicators in lists, tables, or headers to show real-time or live states.\n */\nexport const Inline = {\n  render: () => html`\n    <div nve-layout=\"row gap:xs align:center\">\n      <nve-pulse status=\"danger\"></nve-pulse>\n      Live Status\n    </div>\n  `\n}"],"mappings":";AAGA,IAAAA,IAAS"}

package/dist/pulse/pulse.js

@@ -1,6 +1,5 @@
-//#region src/pulse/pulse.css?inline
+// src/pulse/pulse.css?inline
 var e = ":host{--background: var(--nve-ref-color-gray-slate-1100);--width: var(--nve-ref-size-1000);--height: var(--nve-ref-size-1000);--animation-duration: 2s;width:var(--width);height:var(--height)}:host([status=\"accent\"]){--background: var(--nve-ref-color-brand-green-1100)}:host([status=\"warning\"]){--background: var(--nve-sys-support-warning-color)}:host([status=\"danger\"]){--background: var(--nve-sys-support-danger-color)}:host([size=\"xs\"]){--width: var(--nve-ref-size-600);--height: var(--nve-ref-size-600)}:host([size=\"sm\"]){--width: var(--nve-ref-size-800);--height: var(--nve-ref-size-800)}:host([size=\"md\"]){--width: var(--nve-ref-size-1000);--height: var(--nve-ref-size-1000)}:host([size=\"lg\"]){--width: calc(var(--nve-ref-size-1000) * 1.55);--height: calc(var(--nve-ref-size-1000) * 1.55)}[internal-host]{display:flex;place-items:center;place-content:center;height:100%}svg{position:absolute;top:0;left:0;width:100%;height:100%}.circle{fill:var(--background);transform-box:fill-box;transform-origin:center center}.c1,.c2,.c3{opacity:0;animation:pulse 2s ease-out infinite;animation-duration:var(--animation-duration)}.c1{transform:scale(.5);animation-delay:.5s}.c2{animation-delay:1s}.c3{animation-delay:1.5s}@keyframes pulse{0%{transform:scale(.5);opacity:0}50%{opacity:var(--nve-ref-opacity-150)}70%{opacity:calc(var(--nve-ref-opacity-150) * .9)}to{transform:scale(4);opacity:0}}";
-//#endregion
 export { e as default };
 
 //# sourceMappingURL=pulse.js.map

package/dist/pulse/pulse.js.map

@@ -1 +1 @@
-{"version":3,"file":"pulse.js","names":[],"sources":["../../src/pulse/pulse.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: var(--nve-ref-color-gray-slate-1100);\n  --width: var(--nve-ref-size-1000);\n  --height: var(--nve-ref-size-1000);\n  --animation-duration: 2s;\n  width: var(--width);\n  height: var(--height);\n}\n\n:host([status='accent']) {\n  --background: var(--nve-ref-color-brand-green-1100);\n}\n\n:host([status='warning']) {\n  --background: var(--nve-sys-support-warning-color);\n}\n\n:host([status='danger']) {\n  --background: var(--nve-sys-support-danger-color);\n}\n\n:host([size='xs']) {\n  --width: var(--nve-ref-size-600);\n  --height: var(--nve-ref-size-600);\n}\n\n:host([size='sm']) {\n  --width: var(--nve-ref-size-800);\n  --height: var(--nve-ref-size-800);\n}\n\n:host([size='md']) {\n  --width: var(--nve-ref-size-1000);\n  --height: var(--nve-ref-size-1000);\n}\n\n:host([size='lg']) {\n  --width: calc(var(--nve-ref-size-1000) * 1.55);\n  --height: calc(var(--nve-ref-size-1000) * 1.55);\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\n.circle {\n  fill: var(--background);\n  transform-box: fill-box;\n  transform-origin: center center;\n}\n\n.c1,\n.c2,\n.c3 {\n  opacity: 0;\n  animation: pulse 2s ease-out infinite;\n  animation-duration: var(--animation-duration);\n}\n\n.c1 {\n  transform: scale(0.5);\n  animation-delay: 0.5s;\n}\n\n.c2 {\n  animation-delay: 1s;\n}\n\n.c3 {\n  animation-delay: 1.5s;\n}\n\n@keyframes pulse {\n  0% {\n    transform: scale(0.5);\n    opacity: 0;\n  }\n\n  50% {\n    opacity: var(--nve-ref-opacity-150);\n  }\n\n  70% {\n    opacity: calc(var(--nve-ref-opacity-150) * 0.9);\n  }\n\n  100% {\n    transform: scale(4);\n    opacity: 0;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"pulse.js","names":["pulse_default"],"sources":["../../src/pulse/pulse.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: var(--nve-ref-color-gray-slate-1100);\n  --width: var(--nve-ref-size-1000);\n  --height: var(--nve-ref-size-1000);\n  --animation-duration: 2s;\n  width: var(--width);\n  height: var(--height);\n}\n\n:host([status='accent']) {\n  --background: var(--nve-ref-color-brand-green-1100);\n}\n\n:host([status='warning']) {\n  --background: var(--nve-sys-support-warning-color);\n}\n\n:host([status='danger']) {\n  --background: var(--nve-sys-support-danger-color);\n}\n\n:host([size='xs']) {\n  --width: var(--nve-ref-size-600);\n  --height: var(--nve-ref-size-600);\n}\n\n:host([size='sm']) {\n  --width: var(--nve-ref-size-800);\n  --height: var(--nve-ref-size-800);\n}\n\n:host([size='md']) {\n  --width: var(--nve-ref-size-1000);\n  --height: var(--nve-ref-size-1000);\n}\n\n:host([size='lg']) {\n  --width: calc(var(--nve-ref-size-1000) * 1.55);\n  --height: calc(var(--nve-ref-size-1000) * 1.55);\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\n.circle {\n  fill: var(--background);\n  transform-box: fill-box;\n  transform-origin: center center;\n}\n\n.c1,\n.c2,\n.c3 {\n  opacity: 0;\n  animation: pulse 2s ease-out infinite;\n  animation-duration: var(--animation-duration);\n}\n\n.c1 {\n  transform: scale(0.5);\n  animation-delay: 0.5s;\n}\n\n.c2 {\n  animation-delay: 1s;\n}\n\n.c3 {\n  animation-delay: 1.5s;\n}\n\n@keyframes pulse {\n  0% {\n    transform: scale(0.5);\n    opacity: 0;\n  }\n\n  50% {\n    opacity: var(--nve-ref-opacity-150);\n  }\n\n  70% {\n    opacity: calc(var(--nve-ref-opacity-150) * 0.9);\n  }\n\n  100% {\n    transform: scale(4);\n    opacity: 0;\n  }\n}\n"],"mappings":""}

package/dist/pulse/pulse2.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 { Icon as r } from "../icon/icon2.js";
 import i from "./pulse.js";
 import { LitElement as a, html as o } from "lit";
 import { property as s } from "lit/decorators/property.js";
-//#region src/pulse/pulse.ts
+// src/pulse/pulse.ts
 var c = class extends a {
 	static {
 		this.styles = t([i]);
@@ -13,7 +13,7 @@ var c = class extends a {
 	static {
 		this.metadata = {
 			tag: "nve-pulse",
-			version: "2.20.1"
+			version: "2.20.2"
 		};
 	}
 	static {
@@ -33,7 +33,6 @@ n([s({
 	type: String,
 	reflect: !0
 })], c.prototype, "status", void 0);
-//#endregion
 export { c as Pulse };
 
 //# sourceMappingURL=pulse2.js.map

package/dist/pulse/pulse2.js.map

@@ -1 +1 @@
-{"version":3,"file":"pulse2.js","names":[],"sources":["../../src/pulse/pulse.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport type { Size } from '@nvidia-elements/core/internal';\nimport { useStyles, attachInternals } from '@nvidia-elements/core/internal';\nimport { Icon } from '@nvidia-elements/core/icon';\nimport styles from './pulse.css?inline';\n\n/**\n * @element nve-pulse\n * @description Pulse component signals attention for a particular area of a UI. This helps with tutorial/getting started guides for new users.\n * @documentation https://nvidia.github.io/elements/docs/elements/pulse/\n * @since 1.16.3\n * @entrypoint \\@nvidia-elements/core/pulse\n * @cssprop --background\n * @cssprop --width\n * @cssprop --height\n * @cssprop --animation-duration\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/alert/\n *\n */\nexport class Pulse extends LitElement {\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-pulse',\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  connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    this._internals.role = 'alert';\n  }\n\n  /** Sets size of the pulse component. You can also update size using the `width + height` css props. */\n  @property({ type: String, reflect: true }) size?: Size | 'xs';\n\n  /** These visual treatments represent the `status` of different tasks. When `status` changes to `accent`, `warning` or `danger`, the component embeds appropriate colors. */\n  @property({ type: String, reflect: true }) status?: 'accent' | 'warning' | 'danger';\n\n  render() {\n    return html`\n    <svg internal-host width=\"100%\" height=\"100%\" viewBox=\"0 0 200 200\">\n      <circle class=\"circle\" cx=\"100\" cy=\"100\" r=\"25\"></circle>\n      <circle class=\"circle c1\" cx=\"100\" cy=\"100\" r=\"25\"></circle>\n      <circle class=\"circle c2\" cx=\"100\" cy=\"100\" r=\"25\"></circle> \n      <circle class=\"circle c3\" cx=\"100\" cy=\"100\" r=\"25\"></circle>\n    </svg>\n  `;\n  }\n}\n"],"mappings":";;;;;;;;AAuBA,IAAa,IAAb,cAA2B,EAAW;;EACpB,KAAA,SAAA,EAAU,CAAC,CAAM,CAAC;;;EAEP,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;EACX;;;EAE4B,KAAA,qBAAA,GACzB,EAAK,SAAS,MAAM,EACvB;;CAKA,oBAAoB;EAGlB,AAFA,MAAM,kBAAkB,GACxB,EAAgB,IAAI,GACpB,KAAK,WAAW,OAAO;CACzB;CAQA,SAAS;EACP,OAAO,CAAI;CAQb;AACF;AAfG,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,GAGxC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,UAAA,KAAA,CAAA"}
+{"version":3,"file":"pulse2.js","names":["styles","_decorate","__decorate","pulse_default","Pulse","LitElement","useStyles","Icon","attachInternals","property"],"sources":["../../src/pulse/pulse.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport type { Size } from '@nvidia-elements/core/internal';\nimport { useStyles, attachInternals } from '@nvidia-elements/core/internal';\nimport { Icon } from '@nvidia-elements/core/icon';\nimport styles from './pulse.css?inline';\n\n/**\n * @element nve-pulse\n * @description Pulse component signals attention for a particular area of a UI. This helps with tutorial/getting started guides for new users.\n * @documentation https://nvidia.github.io/elements/docs/elements/pulse/\n * @since 1.16.3\n * @entrypoint \\@nvidia-elements/core/pulse\n * @cssprop --background\n * @cssprop --width\n * @cssprop --height\n * @cssprop --animation-duration\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/alert/\n *\n */\nexport class Pulse extends LitElement {\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-pulse',\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  connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    this._internals.role = 'alert';\n  }\n\n  /** Sets size of the pulse component. You can also update size using the `width + height` css props. */\n  @property({ type: String, reflect: true }) size?: Size | 'xs';\n\n  /** These visual treatments represent the `status` of different tasks. When `status` changes to `accent`, `warning` or `danger`, the component embeds appropriate colors. */\n  @property({ type: String, reflect: true }) status?: 'accent' | 'warning' | 'danger';\n\n  render() {\n    return html`\n    <svg internal-host width=\"100%\" height=\"100%\" viewBox=\"0 0 200 200\">\n      <circle class=\"circle\" cx=\"100\" cy=\"100\" r=\"25\"></circle>\n      <circle class=\"circle c1\" cx=\"100\" cy=\"100\" r=\"25\"></circle>\n      <circle class=\"circle c2\" cx=\"100\" cy=\"100\" r=\"25\"></circle> \n      <circle class=\"circle c3\" cx=\"100\" cy=\"100\" r=\"25\"></circle>\n    </svg>\n  `;\n  }\n}\n"],"mappings":";;;;;;;;AAuBA,IAAaI,IAAb,cAA2BC,EAAW;;EACpB,KAAA,SAAAC,EAAU,CAACN,CAAM,CAAC;;;EAEP,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;EACX;;;EAE4B,KAAA,qBAAA,GACzBO,EAAK,SAAS,MAAMA,EACvB;;CAKA,oBAAoB;EAGlB,AAFA,MAAM,kBAAkB,GACxBC,EAAgB,IAAI,GACpB,KAAK,WAAW,OAAO;CACzB;CAQA,SAAS;EACP,OAAO,CAAI;CAQb;AACF;AAfGP,EAAA,CAAAQ,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAAL,EAAA,WAAA,QAAA,KAAA,CAAA,GAGxCH,EAAA,CAAAQ,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAAL,EAAA,WAAA,UAAA,KAAA,CAAA"}

package/dist/radio/define.js

@@ -5,6 +5,5 @@ import { Radio as r } from "./radio2.js";
 import { RadioGroup as i } from "./radio-group2.js";
 import { define as a } from "@nvidia-elements/foundations/internal/define";
 a(r), a(i), a(t), a(n), a(e);
-//#endregion
 
 //# sourceMappingURL=define.js.map

package/dist/radio/define.js.map

@@ -1 +1 @@
-{"version":3,"file":"define.js","names":[],"sources":["../../src/radio/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 { Radio, RadioGroup } from '@nvidia-elements/core/radio';\nimport { Control, ControlGroup, ControlMessage } from '@nvidia-elements/core/forms';\n\ndefine(Radio);\ndefine(RadioGroup);\ndefine(Control);\ndefine(ControlGroup);\ndefine(ControlMessage);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nve-radio': Radio;\n    'nve-radio-group': RadioGroup;\n  }\n}\n"],"mappings":";;;;;;AAOA,EAAO,CAAK,GACZ,EAAO,CAAU,GACjB,EAAO,CAAO,GACd,EAAO,CAAY,GACnB,EAAO,CAAc"}
+{"version":3,"file":"define.js","names":["define","Radio","RadioGroup","Control","ControlGroup","ControlMessage"],"sources":["../../src/radio/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 { Radio, RadioGroup } from '@nvidia-elements/core/radio';\nimport { Control, ControlGroup, ControlMessage } from '@nvidia-elements/core/forms';\n\ndefine(Radio);\ndefine(RadioGroup);\ndefine(Control);\ndefine(ControlGroup);\ndefine(ControlMessage);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nve-radio': Radio;\n    'nve-radio-group': RadioGroup;\n  }\n}\n"],"mappings":";;;;;;AAOAA,EAAOC,CAAK,GACZD,EAAOE,CAAU,GACjBF,EAAOG,CAAO,GACdH,EAAOI,CAAY,GACnBJ,EAAOK,CAAc"}

package/dist/radio/radio-group.js

@@ -1,6 +1,5 @@
-//#region src/radio/radio-group.css?inline
+// src/radio/radio-group.css?inline
 var e = ":host{width:100%}";
-//#endregion
 export { e as default };
 
 //# sourceMappingURL=radio-group.js.map

package/dist/radio/radio-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio-group.js","names":[],"sources":["../../src/radio/radio-group.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n:host {\n  width: 100%;\n}\n"],"mappings":""}
+{"version":3,"file":"radio-group.js","names":["radio_group_default"],"sources":["../../src/radio/radio-group.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n:host {\n  width: 100%;\n}\n"],"mappings":""}

package/dist/radio/radio-group2.js

@@ -1,10 +1,10 @@
 import { audit as e } from "../internal/controllers/audit.controller.js";
 import { typeSSR as t } from "../internal/controllers/type-ssr.controller.js";
 import { useStyles as n } from "../internal/styles/index.js";
-import r from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js";
+import r from "../_virtual/_@oxc-project_runtime@0.155.0/helpers/esm/decorate.js";
 import { ControlGroup as i } from "../forms/control-group/control-group2.js";
 import a from "./radio-group.js";
-//#region src/radio/radio-group.ts
+// src/radio/radio-group.ts
 var o = class extends i {
 	static {
 		this.styles = n([...i.styles, a]);
@@ -12,7 +12,7 @@ var o = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-radio-group",
-			version: "2.20.1",
+			version: "2.20.2",
 			children: [
 				"label",
 				"nve-control-message",
@@ -22,7 +22,6 @@ var o = class extends i {
 	}
 };
 o = r([e(), t()], o);
-//#endregion
 export { o as RadioGroup };
 
 //# sourceMappingURL=radio-group2.js.map

package/dist/radio/radio-group2.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio-group2.js","names":[],"sources":["../../src/radio/radio-group.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { CSSResult } from 'lit';\nimport { audit, typeSSR, useStyles } from '@nvidia-elements/core/internal';\nimport { ControlGroup } from '@nvidia-elements/core/forms';\nimport styles from './radio-group.css?inline';\n\n/**\n * @element nve-radio-group\n * @description Groups related radio buttons together with a shared label and validation messaging for single-select form inputs.\n * @since 0.3.0\n * @entrypoint \\@nvidia-elements/core/radio\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/radio/\n */\n@audit()\n@typeSSR()\nexport class RadioGroup extends ControlGroup {\n  static styles: CSSResult[] = useStyles([...ControlGroup.styles, styles]);\n\n  static readonly metadata = {\n    tag: 'nve-radio-group',\n    version: '0.0.0',\n    children: ['label', 'nve-control-message', 'nve-radio']\n  };\n}\n"],"mappings":";;;;;;;AAiBO,IAAM,IAAN,cAAyB,EAAa;;EACd,KAAA,SAAA,EAAU,CAAC,GAAG,EAAa,QAAQ,CAAM,CAAC;;;EAE5C,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;GACT,UAAU;IAAC;IAAS;IAAuB;GAAW;EACxD;;AACF;AAVC,IAAA,EAAA,CAAA,EAAM,GACN,EAAQ,CAAA,GAAA,CAAA"}
+{"version":3,"file":"radio-group2.js","names":["styles","_decorate","__decorate","radio_group_default","RadioGroup","ControlGroup","useStyles","audit","typeSSR"],"sources":["../../src/radio/radio-group.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { CSSResult } from 'lit';\nimport { audit, typeSSR, useStyles } from '@nvidia-elements/core/internal';\nimport { ControlGroup } from '@nvidia-elements/core/forms';\nimport styles from './radio-group.css?inline';\n\n/**\n * @element nve-radio-group\n * @description Groups related radio buttons together with a shared label and validation messaging for single-select form inputs.\n * @since 0.3.0\n * @entrypoint \\@nvidia-elements/core/radio\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/radio/\n */\n@audit()\n@typeSSR()\nexport class RadioGroup extends ControlGroup {\n  static styles: CSSResult[] = useStyles([...ControlGroup.styles, styles]);\n\n  static readonly metadata = {\n    tag: 'nve-radio-group',\n    version: '0.0.0',\n    children: ['label', 'nve-control-message', 'nve-radio']\n  };\n}\n"],"mappings":";;;;;;;AAiBO,IAAMI,IAAN,cAAyBC,EAAa;;EACd,KAAA,SAAAC,EAAU,CAAC,GAAGD,EAAa,QAAQL,CAAM,CAAC;;;EAE5C,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;GACT,UAAU;IAAC;IAAS;IAAuB;GAAW;EACxD;;AACF;AAVC,IAAAC,EAAA,CAAAM,EAAM,GACNC,EAAQ,CAAA,GAAAJ,CAAA"}

package/dist/radio/radio.examples.js

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

package/dist/radio/radio.examples.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio.examples.js","names":[],"sources":["../../src/radio/radio.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/forms/define.js';\nimport '@nvidia-elements/core/radio/define.js';\n\nexport default {\n  title: 'Elements/Radio',\n  component: 'nve-radio',\n};\n\n/**\n * @summary Basic radio button group for mutually exclusive single-choice selection from many options.\n */\nexport const Default = {\n  render: () => html`\n  <nve-radio-group>\n    <label>label</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-control-message>message</nve-control-message>\n  </nve-radio-group>\n  `\n}\n\n/**\n * @summary Radio groups with vertical layout including validation states for disabled, success, and error.\n */\nexport const VerticalGroup = {\n  render: () => html`\n<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-radio-group>\n    <label>label</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-control-message>message</nve-control-message>\n  </nve-radio-group>\n\n  <nve-radio-group>\n    <label>disabled</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked disabled />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" disabled />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" disabled />\n    </nve-radio>\n    <nve-control-message>disabled message</nve-control-message>\n  </nve-radio-group>\n\n  <nve-radio-group>\n    <label>success</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-control-message status=\"success\">success message</nve-control-message>\n  </nve-radio-group>\n\n  <nve-radio-group>\n    <label>error</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-control-message status=\"error\">error message</nve-control-message>\n  </nve-radio-group>\n</div>\n`\n};\n\n/**\n * @summary Radio groups with vertical inline layout for compact vertical stacking with inline label positioning.\n * @tags test-case\n */\nexport const VerticalInlineGroup = {\n  render: () => html`\n<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-radio-group layout=\"vertical-inline\">\n    <label>label</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-control-message>message</nve-control-message>\n  </nve-radio-group>\n\n  <nve-radio-group layout=\"vertical-inline\">\n    <label>disabled</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked disabled />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" disabled />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" disabled />\n    </nve-radio>\n    <nve-control-message>disabled message</nve-control-message>\n  </nve-radio-group>\n\n  <nve-radio-group layout=\"vertical-inline\">\n    <label>success</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-control-message status=\"success\">success message</nve-control-message>\n  </nve-radio-group>\n\n  <nve-radio-group layout=\"vertical-inline\">\n    <label>error</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-control-message status=\"error\">error message</nve-control-message>\n  </nve-radio-group>\n</div>\n`\n};\n\n/**\n * @summary Radio groups with horizontal layout for options arranged in a row, ideal for limited choices.\n * @tags test-case\n */\nexport const HorizontalGroup = {\n  render: () => html`\n<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-radio-group layout=\"horizontal\">\n    <label>label</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-control-message>message</nve-control-message>\n  </nve-radio-group>\n\n  <nve-radio-group layout=\"horizontal\">\n    <label>disabled</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked disabled />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" disabled />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" disabled />\n    </nve-radio>\n    <nve-control-message>disabled message</nve-control-message>\n  </nve-radio-group>\n\n  <nve-radio-group layout=\"horizontal\">\n    <label>success</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-control-message status=\"success\">success message</nve-control-message>\n  </nve-radio-group>\n\n  <nve-radio-group layout=\"horizontal\">\n    <label>error</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-control-message status=\"error\">error message</nve-control-message>\n  </nve-radio-group>\n</div>\n`\n};\n\n/**\n * @summary Radio groups with horizontal inline layout for space-efficient horizontal arrangement with inline labels.\n * @tags test-case\n */\nexport const HorizontalInlineGroup = {\n  render: () => html`\n<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-radio-group layout=\"horizontal-inline\">\n    <label>label</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-control-message>message</nve-control-message>\n  </nve-radio-group>\n\n  <nve-radio-group layout=\"horizontal-inline\">\n    <label>disabled</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked disabled />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" disabled />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" disabled />\n    </nve-radio>\n    <nve-control-message>disabled message</nve-control-message>\n  </nve-radio-group>\n\n  <nve-radio-group layout=\"horizontal-inline\">\n    <label>success</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-control-message status=\"success\">success message</nve-control-message>\n  </nve-radio-group>\n\n  <nve-radio-group layout=\"horizontal-inline\">\n    <label>error</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-control-message status=\"error\">error message</nve-control-message>\n  </nve-radio-group>\n</div>\n`\n};\n"],"mappings":";AAGA,IAAA,IAAS"}
+{"version":3,"file":"radio.examples.js","names":["radio_examples_default"],"sources":["../../src/radio/radio.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/forms/define.js';\nimport '@nvidia-elements/core/radio/define.js';\n\nexport default {\n  title: 'Elements/Radio',\n  component: 'nve-radio',\n};\n\n/**\n * @summary Basic radio button group for mutually exclusive single-choice selection from many options.\n */\nexport const Default = {\n  render: () => html`\n  <nve-radio-group>\n    <label>label</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-control-message>message</nve-control-message>\n  </nve-radio-group>\n  `\n}\n\n/**\n * @summary Radio groups with vertical layout including validation states for disabled, success, and error.\n */\nexport const VerticalGroup = {\n  render: () => html`\n<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-radio-group>\n    <label>label</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-control-message>message</nve-control-message>\n  </nve-radio-group>\n\n  <nve-radio-group>\n    <label>disabled</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked disabled />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" disabled />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" disabled />\n    </nve-radio>\n    <nve-control-message>disabled message</nve-control-message>\n  </nve-radio-group>\n\n  <nve-radio-group>\n    <label>success</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-control-message status=\"success\">success message</nve-control-message>\n  </nve-radio-group>\n\n  <nve-radio-group>\n    <label>error</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-control-message status=\"error\">error message</nve-control-message>\n  </nve-radio-group>\n</div>\n`\n};\n\n/**\n * @summary Radio groups with vertical inline layout for compact vertical stacking with inline label positioning.\n * @tags test-case\n */\nexport const VerticalInlineGroup = {\n  render: () => html`\n<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-radio-group layout=\"vertical-inline\">\n    <label>label</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-control-message>message</nve-control-message>\n  </nve-radio-group>\n\n  <nve-radio-group layout=\"vertical-inline\">\n    <label>disabled</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked disabled />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" disabled />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" disabled />\n    </nve-radio>\n    <nve-control-message>disabled message</nve-control-message>\n  </nve-radio-group>\n\n  <nve-radio-group layout=\"vertical-inline\">\n    <label>success</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-control-message status=\"success\">success message</nve-control-message>\n  </nve-radio-group>\n\n  <nve-radio-group layout=\"vertical-inline\">\n    <label>error</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-control-message status=\"error\">error message</nve-control-message>\n  </nve-radio-group>\n</div>\n`\n};\n\n/**\n * @summary Radio groups with horizontal layout for options arranged in a row, ideal for limited choices.\n * @tags test-case\n */\nexport const HorizontalGroup = {\n  render: () => html`\n<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-radio-group layout=\"horizontal\">\n    <label>label</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-control-message>message</nve-control-message>\n  </nve-radio-group>\n\n  <nve-radio-group layout=\"horizontal\">\n    <label>disabled</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked disabled />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" disabled />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" disabled />\n    </nve-radio>\n    <nve-control-message>disabled message</nve-control-message>\n  </nve-radio-group>\n\n  <nve-radio-group layout=\"horizontal\">\n    <label>success</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-control-message status=\"success\">success message</nve-control-message>\n  </nve-radio-group>\n\n  <nve-radio-group layout=\"horizontal\">\n    <label>error</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-control-message status=\"error\">error message</nve-control-message>\n  </nve-radio-group>\n</div>\n`\n};\n\n/**\n * @summary Radio groups with horizontal inline layout for space-efficient horizontal arrangement with inline labels.\n * @tags test-case\n */\nexport const HorizontalInlineGroup = {\n  render: () => html`\n<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-radio-group layout=\"horizontal-inline\">\n    <label>label</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-control-message>message</nve-control-message>\n  </nve-radio-group>\n\n  <nve-radio-group layout=\"horizontal-inline\">\n    <label>disabled</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked disabled />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" disabled />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" disabled />\n    </nve-radio>\n    <nve-control-message>disabled message</nve-control-message>\n  </nve-radio-group>\n\n  <nve-radio-group layout=\"horizontal-inline\">\n    <label>success</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-control-message status=\"success\">success message</nve-control-message>\n  </nve-radio-group>\n\n  <nve-radio-group layout=\"horizontal-inline\">\n    <label>error</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-control-message status=\"error\">error message</nve-control-message>\n  </nve-radio-group>\n</div>\n`\n};\n"],"mappings":";AAGA,IAAAA,IAAS"}

package/dist/radio/radio.js

@@ -1,6 +1,5 @@
-//#region src/radio/radio.css?inline
+// src/radio/radio.css?inline
 var e = ":host{--cursor: pointer;--width: var(--nve-ref-size-400);--height: var(--nve-ref-size-400);--border-width: var(--nve-ref-border-width-md);--border-radius: var(--nve-ref-border-radius-full);--border-color: var(--nve-ref-border-color);--radio-color: var(--border-color);--background: transparent;display:inline-block;contain:layout;will-change:transform,border-color}::slotted(input){width:var(--width)!important;height:var(--height)!important;cursor:var(--cursor)!important;margin:0!important;position:absolute!important;border-radius:var(--border-radius)!important;opacity:0!important;inset:0!important}[input]{align-items:center;position:relative}@keyframes radio-select-pop{0%{transform:scale(.8)}50%{transform:scale(1.1)}to{transform:scale(1)}}[input] slot{width:var(--width);height:var(--height);border:var(--border-width) solid var(--border-color);background:var(--background);border-radius:var(--border-radius);display:flex;align-items:center;justify-content:center;transition:transform var(--nve-ref-animation-duration-200) cubic-bezier(.12,.32,.54,2),border-color var(--nve-ref-animation-duration-150) ease;will-change:transform,border-color}[input] slot:before{content:\"\";width:calc(var(--width) / 2);height:calc(var(--height) / 2);border-radius:var(--border-radius);transform:scale(0);opacity:0;transition:transform var(--nve-ref-animation-duration-250) ease,opacity var(--nve-ref-animation-duration-200) ease,background-color var(--nve-ref-animation-duration-150) ease}:host(:state(checked):state(dirty)) [input] slot{animation:radio-select-pop var(--nve-ref-animation-duration-200) ease-out}:host(:state(checked)) [input] slot:before{background:var(--radio-color);transform:scale(1);opacity:1}:host(:state(checked)){--border-color: var(--accent-color)}:host(:state(disabled)){--border-color: var(--nve-sys-interaction-disabled-background)}";
-//#endregion
 export { e as default };
 
 //# sourceMappingURL=radio.js.map

package/dist/radio/radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio.js","names":[],"sources":["../../src/radio/radio.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n:host {\n  --cursor: pointer;\n  --width: var(--nve-ref-size-400);\n  --height: var(--nve-ref-size-400);\n  --border-width: var(--nve-ref-border-width-md);\n  --border-radius: var(--nve-ref-border-radius-full);\n  --border-color: var(--nve-ref-border-color);\n  --radio-color: var(--border-color);\n  --background: transparent;\n  display: inline-block;\n  contain: layout;\n  will-change: transform, border-color;\n}\n\n::slotted(input) {\n  width: var(--width) !important;\n  height: var(--height) !important;\n  cursor: var(--cursor) !important;\n  margin: 0 !important;\n  position: absolute !important;\n  border-radius: var(--border-radius) !important;\n  opacity: 0 !important;\n  inset: 0 !important;\n}\n\n[input] {\n  align-items: center;\n  position: relative;\n}\n\n@keyframes radio-select-pop {\n  0% {\n    transform: scale(0.8);\n  }\n\n  50% {\n    transform: scale(1.1);\n  }\n\n  100% {\n    transform: scale(1);\n  }\n}\n\n[input] slot {\n  width: var(--width);\n  height: var(--height);\n  border: var(--border-width) solid var(--border-color);\n  background: var(--background);\n  border-radius: var(--border-radius);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition:\n    transform var(--nve-ref-animation-duration-200) cubic-bezier(0.12, 0.32, 0.54, 2),\n    border-color var(--nve-ref-animation-duration-150) ease;\n  will-change: transform, border-color;\n}\n\n[input] slot::before {\n  content: '';\n  width: calc(var(--width) / 2);\n  height: calc(var(--height) / 2);\n  border-radius: var(--border-radius);\n  transform: scale(0);\n  opacity: 0;\n  transition:\n    transform var(--nve-ref-animation-duration-250) ease,\n    opacity var(--nve-ref-animation-duration-200) ease,\n    background-color var(--nve-ref-animation-duration-150) ease;\n}\n\n:host(:state(checked):state(dirty)) [input] slot {\n  animation: radio-select-pop var(--nve-ref-animation-duration-200) ease-out;\n}\n\n:host(:state(checked)) [input] slot::before {\n  background: var(--radio-color);\n  transform: scale(1);\n  opacity: 1;\n}\n\n:host(:state(checked)) {\n  --border-color: var(--accent-color);\n}\n\n:host(:state(disabled)) {\n  --border-color: var(--nve-sys-interaction-disabled-background);\n}\n"],"mappings":""}
+{"version":3,"file":"radio.js","names":["radio_default"],"sources":["../../src/radio/radio.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n:host {\n  --cursor: pointer;\n  --width: var(--nve-ref-size-400);\n  --height: var(--nve-ref-size-400);\n  --border-width: var(--nve-ref-border-width-md);\n  --border-radius: var(--nve-ref-border-radius-full);\n  --border-color: var(--nve-ref-border-color);\n  --radio-color: var(--border-color);\n  --background: transparent;\n  display: inline-block;\n  contain: layout;\n  will-change: transform, border-color;\n}\n\n::slotted(input) {\n  width: var(--width) !important;\n  height: var(--height) !important;\n  cursor: var(--cursor) !important;\n  margin: 0 !important;\n  position: absolute !important;\n  border-radius: var(--border-radius) !important;\n  opacity: 0 !important;\n  inset: 0 !important;\n}\n\n[input] {\n  align-items: center;\n  position: relative;\n}\n\n@keyframes radio-select-pop {\n  0% {\n    transform: scale(0.8);\n  }\n\n  50% {\n    transform: scale(1.1);\n  }\n\n  100% {\n    transform: scale(1);\n  }\n}\n\n[input] slot {\n  width: var(--width);\n  height: var(--height);\n  border: var(--border-width) solid var(--border-color);\n  background: var(--background);\n  border-radius: var(--border-radius);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition:\n    transform var(--nve-ref-animation-duration-200) cubic-bezier(0.12, 0.32, 0.54, 2),\n    border-color var(--nve-ref-animation-duration-150) ease;\n  will-change: transform, border-color;\n}\n\n[input] slot::before {\n  content: '';\n  width: calc(var(--width) / 2);\n  height: calc(var(--height) / 2);\n  border-radius: var(--border-radius);\n  transform: scale(0);\n  opacity: 0;\n  transition:\n    transform var(--nve-ref-animation-duration-250) ease,\n    opacity var(--nve-ref-animation-duration-200) ease,\n    background-color var(--nve-ref-animation-duration-150) ease;\n}\n\n:host(:state(checked):state(dirty)) [input] slot {\n  animation: radio-select-pop var(--nve-ref-animation-duration-200) ease-out;\n}\n\n:host(:state(checked)) [input] slot::before {\n  background: var(--radio-color);\n  transform: scale(1);\n  opacity: 1;\n}\n\n:host(:state(checked)) {\n  --border-color: var(--accent-color);\n}\n\n:host(:state(disabled)) {\n  --border-color: var(--nve-sys-interaction-disabled-background);\n}\n"],"mappings":""}

package/dist/radio/radio2.js

@@ -1,10 +1,10 @@
 import { audit as e } from "../internal/controllers/audit.controller.js";
 import { hostAttr as t } from "../internal/decorators/host-attr.js";
 import { useStyles as n } from "../internal/styles/index.js";
-import r from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js";
+import r from "../_virtual/_@oxc-project_runtime@0.155.0/helpers/esm/decorate.js";
 import { Control as i } from "../forms/control/control2.js";
 import a from "./radio.js";
-//#region src/radio/radio.ts
+// src/radio/radio.ts
 var o = class extends i {
 	constructor(...e) {
 		super(...e), this.nveControl = "inline";
@@ -15,7 +15,7 @@ var o = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-radio",
-			version: "2.20.1",
+			version: "2.20.2",
 			children: [
 				"label",
 				"input",
@@ -25,7 +25,6 @@ var o = class extends i {
 	}
 };
 r([t({ attribute: "nve-control" })], o.prototype, "nveControl", void 0), o = r([e()], o);
-//#endregion
 export { o as Radio };
 
 //# sourceMappingURL=radio2.js.map

package/dist/radio/radio2.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio2.js","names":[],"sources":["../../src/radio/radio.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { CSSResult } from 'lit';\nimport { audit, hostAttr, useStyles } from '@nvidia-elements/core/internal';\nimport { Control } from '@nvidia-elements/core/forms';\nimport styles from './radio.css?inline';\n\n/**\n * @element nve-radio\n * @description A radio button is a control that enables users to choose one option from a list of mutually exclusive options.\n * @documentation https://nvidia.github.io/elements/docs/elements/radio/\n * @since 0.3.0\n * @entrypoint \\@nvidia-elements/core/radio\n * @cssprop --cursor\n * @cssprop --width\n * @cssprop --height\n * @cssprop --border-width\n * @cssprop --border-radius\n * @cssprop --border-color\n * @cssprop --radio-color\n * @cssprop --background\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/radio/\n */\n@audit()\nexport class Radio extends Control {\n  @hostAttr({ attribute: 'nve-control' }) protected nveControl = 'inline';\n\n  /** @private - disable for inline control */\n  declare fitText: boolean;\n\n  /** @private - disable for inline control */\n  declare fitContent: boolean;\n\n  static styles: CSSResult[] = useStyles([...Control.styles, styles]);\n\n  static readonly metadata = {\n    tag: 'nve-radio',\n    version: '0.0.0',\n    children: ['label', 'input', 'nve-control-message']\n  };\n}\n"],"mappings":";;;;;;;AAyBO,IAAM,IAAN,cAAoB,EAAQ;;EAC8B,aAAA,KAAA,aAAA;;;EAQlC,KAAA,SAAA,EAAU,CAAC,GAAG,EAAQ,QAAQ,CAAM,CAAC;;;EAEvC,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;GACT,UAAU;IAAC;IAAS;IAAS;GAAqB;EACpD;;AACF;AAfG,EAAA,CAAA,EAAS,EAAE,WAAW,cAAc,CAAC,CAAA,GAAA,EAAA,WAAA,cAAA,KAAA,CAAA,GAFvC,IAAA,EAAA,CAAA,EAAM,CAAA,GAAA,CAAA"}
+{"version":3,"file":"radio2.js","names":["styles","_decorate","__decorate","radio_default","Radio","Control","_args","useStyles","hostAttr","audit"],"sources":["../../src/radio/radio.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { CSSResult } from 'lit';\nimport { audit, hostAttr, useStyles } from '@nvidia-elements/core/internal';\nimport { Control } from '@nvidia-elements/core/forms';\nimport styles from './radio.css?inline';\n\n/**\n * @element nve-radio\n * @description A radio button is a control that enables users to choose one option from a list of mutually exclusive options.\n * @documentation https://nvidia.github.io/elements/docs/elements/radio/\n * @since 0.3.0\n * @entrypoint \\@nvidia-elements/core/radio\n * @cssprop --cursor\n * @cssprop --width\n * @cssprop --height\n * @cssprop --border-width\n * @cssprop --border-radius\n * @cssprop --border-color\n * @cssprop --radio-color\n * @cssprop --background\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/radio/\n */\n@audit()\nexport class Radio extends Control {\n  @hostAttr({ attribute: 'nve-control' }) protected nveControl = 'inline';\n\n  /** @private - disable for inline control */\n  declare fitText: boolean;\n\n  /** @private - disable for inline control */\n  declare fitContent: boolean;\n\n  static styles: CSSResult[] = useStyles([...Control.styles, styles]);\n\n  static readonly metadata = {\n    tag: 'nve-radio',\n    version: '0.0.0',\n    children: ['label', 'input', 'nve-control-message']\n  };\n}\n"],"mappings":";;;;;;;AAyBO,IAAMI,IAAN,cAAoBC,EAAQ;;EAC8B,A,aAAA,KAAA,aAAA;;;EAQlC,KAAA,SAAAE,EAAU,CAAC,GAAGF,EAAQ,QAAQL,CAAM,CAAC;;;EAEvC,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;GACT,UAAU;IAAC;IAAS;IAAS;GAAqB;EACpD;;AACF;AAfGC,EAAA,CAAAO,EAAS,EAAE,WAAW,cAAc,CAAC,CAAA,GAAAJ,EAAA,WAAA,cAAA,KAAA,CAAA,GAFvC,IAAAH,EAAA,CAAAQ,EAAM,CAAA,GAAAL,CAAA"}

package/dist/range/define.js

@@ -4,6 +4,5 @@ import { ControlGroup as n } from "../forms/control-group/control-group2.js";
 import { Range as r } from "./range2.js";
 import { define as i } from "@nvidia-elements/foundations/internal/define";
 i(r), i(t), i(n), i(e);
-//#endregion
 
 //# sourceMappingURL=define.js.map

package/dist/range/define.js.map

@@ -1 +1 @@
-{"version":3,"file":"define.js","names":[],"sources":["../../src/range/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 { Range } from '@nvidia-elements/core/range';\nimport { Control, ControlGroup, ControlMessage } from '@nvidia-elements/core/forms';\n\ndefine(Range);\ndefine(Control);\ndefine(ControlGroup);\ndefine(ControlMessage);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nve-range': Range;\n  }\n}\n"],"mappings":";;;;;AAOA,EAAO,CAAK,GACZ,EAAO,CAAO,GACd,EAAO,CAAY,GACnB,EAAO,CAAc"}
+{"version":3,"file":"define.js","names":["define","Range","Control","ControlGroup","ControlMessage"],"sources":["../../src/range/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 { Range } from '@nvidia-elements/core/range';\nimport { Control, ControlGroup, ControlMessage } from '@nvidia-elements/core/forms';\n\ndefine(Range);\ndefine(Control);\ndefine(ControlGroup);\ndefine(ControlMessage);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nve-range': Range;\n  }\n}\n"],"mappings":";;;;;AAOAA,EAAOC,CAAK,GACZD,EAAOE,CAAO,GACdF,EAAOG,CAAY,GACnBH,EAAOI,CAAc"}

package/dist/range/index.js

@@ -1,2 +1 @@
-import { Range as e } from "./range2.js";
-export { e as Range };
+export { Range } from "./range2.js";

package/dist/range/range.examples.js

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

package/dist/range/range.examples.js.map

@@ -1 +1 @@
-{"version":3,"file":"range.examples.js","names":[],"sources":["../../src/range/range.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/forms/define.js';\nimport '@nvidia-elements/core/range/define.js';\n\nexport default {\n  title: 'Elements/Range',\n  component: 'nve-range',\n};\n\n/**\n * @summary Basic range component for numeric value selection, providing a simple slider interface for adjusting values within a defined range.\n */\nexport const Default = {\n  render: () => html`\n<nve-range>\n  <label>label</label>\n  <input type=\"range\" />\n  <nve-control-message>message</nve-control-message>\n</nve-range>`\n};\n\n/**\n * @summary Range with datalist for visual tick marks and labeled values, enabling users to see available options and precisely select predetermined values.\n */\nexport const Datalist = {\n  render: () => html`\n<nve-range>\n<label>label</label>\n  <input type=\"range\" />\n  <nve-control-message>message</nve-control-message>\n  <datalist>\n    <option value=\"0\">0</option>\n    <option value=\"25\"></option>\n    <option value=\"50\"></option>\n    <option value=\"75\"></option>\n    <option value=\"100\"></option>\n  </datalist>\n</nve-range>\n  `\n}\n\n/**\n * @summary Range with combined step increments and datalist labels, ensuring precise value selection with clear visual indicators at each valid step position.\n */\nexport const DatalistWithSteps = {\n  render: () => html`\n<nve-range>\n<label>label</label>\n  <input type=\"range\" min=\"0\" max=\"100\" step=\"10\" />\n  <datalist>\n    <option value=\"0\">0</option>\n    <option value=\"10\">10</option>\n    <option value=\"20\">20</option>\n    <option value=\"30\">30</option>\n    <option value=\"40\">40</option>\n    <option value=\"50\">50</option>\n    <option value=\"60\">60</option>\n    <option value=\"70\">70</option>\n    <option value=\"80\">80</option>\n    <option value=\"90\">90</option>\n    <option value=\"100\">100</option>\n  </datalist>\n</nve-range>\n  `\n}\n\n/**\n * @summary Range with defined step increments for discrete value selection, constraining the slider to specific intervals for controlled input precision.\n */\nexport const Step = {\n  render: () => html`\n<nve-range>\n  <label>label</label>\n  <input type=\"range\" min=\"0\" max=\"100\" step=\"20\" />\n  <nve-control-message>message</nve-control-message>\n</nve-range>\n  `\n}\n\n/**\n * @summary Vertical layout configuration for stacked form arrangements, displaying label, slider, and message in a column format with support for states including disabled, success, and error feedback.\n * @tags test-case\n */\nexport const Vertical = {\n  render: () => html`\n<div nve-layout=\"column gap:lg full\">\n  <nve-range>\n    <label>label</label>\n    <input type=\"range\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-range>\n\n  <nve-range>\n    <label>disabled</label>\n    <input type=\"range\" disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-range>\n\n  <nve-range>\n    <label>success</label>\n    <input type=\"range\" />\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-range>\n\n  <nve-range>\n    <label>error</label>\n    <input type=\"range\" />\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-range>\n</div>`\n};\n\n/**\n * @summary Horizontal layout configuration for inline form arrangements, positioning label and slider side-by-side for compact displays with support for states including disabled, success, and error feedback.\n * @tags test-case\n */\nexport const Horizontal = {\n  render: () => html`\n<div nve-layout=\"column gap:lg full\">\n  <nve-range layout=\"horizontal\">\n    <label>label</label>\n    <input type=\"range\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-range>\n\n  <nve-range layout=\"horizontal\">\n    <label>disabled</label>\n    <input type=\"range\" disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-range>\n\n  <nve-range layout=\"horizontal\">\n    <label>success</label>\n    <input type=\"range\" />\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-range>\n\n  <nve-range layout=\"horizontal\">\n    <label>error</label>\n    <input type=\"range\" />\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-range>\n</div>`\n};\n\n/**\n * @summary Vertical range slider for space-constrained layouts or controls where bottom-to-top value selection is intuitive, such as volume or equalizer adjustments.\n */\nexport const OrientationVertical = {\n  render: () => html`\n<div style=\"height: 200px\">\n  <nve-range orientation=\"vertical\">\n    <label>label</label>\n    <input type=\"range\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-range>\n</div>`\n};\n\n/**\n * @summary Vertical range slider with datalist tick marks and labeled values for precise value selection in vertical layouts.\n */\nexport const OrientationVerticalDatalist = {\n  render: () => html`\n<div style=\"height: 250px\">\n  <nve-range orientation=\"vertical\">\n    <label>label</label>\n    <input type=\"range\" />\n    <datalist>\n      <option value=\"0\">0</option>\n      <option value=\"25\">25</option>\n      <option value=\"50\">50</option>\n      <option value=\"75\">75</option>\n      <option value=\"100\">100</option>\n    </datalist>\n  </nve-range>\n</div>`\n};\n\n/**\n * @summary Range component can have its visual styles overwritten to achieve custom themes.\n * @tags test-case\n */\nexport const CustomStyles = {\n  render: () => html`\n<nve-range style=\"\n--background: #76b900;\n--track-background: red;\n--track-height: 4px;\n--track-border-radius: 16px;\n--thumb-background: black;\n--thumb-border: inset 0 0 0 2px white;\n--thumb-width: 14px;\n--thumb-height: 14px;\">\n  <input type=\"range\" aria-label=\"range\" />\n</nve-range>`\n};"],"mappings":";AAGA,IAAA,IAAS"}
+{"version":3,"file":"range.examples.js","names":["range_examples_default"],"sources":["../../src/range/range.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/forms/define.js';\nimport '@nvidia-elements/core/range/define.js';\n\nexport default {\n  title: 'Elements/Range',\n  component: 'nve-range',\n};\n\n/**\n * @summary Basic range component for numeric value selection, providing a simple slider interface for adjusting values within a defined range.\n */\nexport const Default = {\n  render: () => html`\n<nve-range>\n  <label>label</label>\n  <input type=\"range\" />\n  <nve-control-message>message</nve-control-message>\n</nve-range>`\n};\n\n/**\n * @summary Range with datalist for visual tick marks and labeled values, enabling users to see available options and precisely select predetermined values.\n */\nexport const Datalist = {\n  render: () => html`\n<nve-range>\n<label>label</label>\n  <input type=\"range\" />\n  <nve-control-message>message</nve-control-message>\n  <datalist>\n    <option value=\"0\">0</option>\n    <option value=\"25\"></option>\n    <option value=\"50\"></option>\n    <option value=\"75\"></option>\n    <option value=\"100\"></option>\n  </datalist>\n</nve-range>\n  `\n}\n\n/**\n * @summary Range with combined step increments and datalist labels, ensuring precise value selection with clear visual indicators at each valid step position.\n */\nexport const DatalistWithSteps = {\n  render: () => html`\n<nve-range>\n<label>label</label>\n  <input type=\"range\" min=\"0\" max=\"100\" step=\"10\" />\n  <datalist>\n    <option value=\"0\">0</option>\n    <option value=\"10\">10</option>\n    <option value=\"20\">20</option>\n    <option value=\"30\">30</option>\n    <option value=\"40\">40</option>\n    <option value=\"50\">50</option>\n    <option value=\"60\">60</option>\n    <option value=\"70\">70</option>\n    <option value=\"80\">80</option>\n    <option value=\"90\">90</option>\n    <option value=\"100\">100</option>\n  </datalist>\n</nve-range>\n  `\n}\n\n/**\n * @summary Range with defined step increments for discrete value selection, constraining the slider to specific intervals for controlled input precision.\n */\nexport const Step = {\n  render: () => html`\n<nve-range>\n  <label>label</label>\n  <input type=\"range\" min=\"0\" max=\"100\" step=\"20\" />\n  <nve-control-message>message</nve-control-message>\n</nve-range>\n  `\n}\n\n/**\n * @summary Vertical layout configuration for stacked form arrangements, displaying label, slider, and message in a column format with support for states including disabled, success, and error feedback.\n * @tags test-case\n */\nexport const Vertical = {\n  render: () => html`\n<div nve-layout=\"column gap:lg full\">\n  <nve-range>\n    <label>label</label>\n    <input type=\"range\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-range>\n\n  <nve-range>\n    <label>disabled</label>\n    <input type=\"range\" disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-range>\n\n  <nve-range>\n    <label>success</label>\n    <input type=\"range\" />\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-range>\n\n  <nve-range>\n    <label>error</label>\n    <input type=\"range\" />\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-range>\n</div>`\n};\n\n/**\n * @summary Horizontal layout configuration for inline form arrangements, positioning label and slider side-by-side for compact displays with support for states including disabled, success, and error feedback.\n * @tags test-case\n */\nexport const Horizontal = {\n  render: () => html`\n<div nve-layout=\"column gap:lg full\">\n  <nve-range layout=\"horizontal\">\n    <label>label</label>\n    <input type=\"range\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-range>\n\n  <nve-range layout=\"horizontal\">\n    <label>disabled</label>\n    <input type=\"range\" disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-range>\n\n  <nve-range layout=\"horizontal\">\n    <label>success</label>\n    <input type=\"range\" />\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-range>\n\n  <nve-range layout=\"horizontal\">\n    <label>error</label>\n    <input type=\"range\" />\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-range>\n</div>`\n};\n\n/**\n * @summary Vertical range slider for space-constrained layouts or controls where bottom-to-top value selection is intuitive, such as volume or equalizer adjustments.\n */\nexport const OrientationVertical = {\n  render: () => html`\n<div style=\"height: 200px\">\n  <nve-range orientation=\"vertical\">\n    <label>label</label>\n    <input type=\"range\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-range>\n</div>`\n};\n\n/**\n * @summary Vertical range slider with datalist tick marks and labeled values for precise value selection in vertical layouts.\n */\nexport const OrientationVerticalDatalist = {\n  render: () => html`\n<div style=\"height: 250px\">\n  <nve-range orientation=\"vertical\">\n    <label>label</label>\n    <input type=\"range\" />\n    <datalist>\n      <option value=\"0\">0</option>\n      <option value=\"25\">25</option>\n      <option value=\"50\">50</option>\n      <option value=\"75\">75</option>\n      <option value=\"100\">100</option>\n    </datalist>\n  </nve-range>\n</div>`\n};\n\n/**\n * @summary Range component can have its visual styles overwritten to achieve custom themes.\n * @tags test-case\n */\nexport const CustomStyles = {\n  render: () => html`\n<nve-range style=\"\n--background: #76b900;\n--track-background: red;\n--track-height: 4px;\n--track-border-radius: 16px;\n--thumb-background: black;\n--thumb-border: inset 0 0 0 2px white;\n--thumb-width: 14px;\n--thumb-height: 14px;\">\n  <input type=\"range\" aria-label=\"range\" />\n</nve-range>`\n};"],"mappings":";AAGA,IAAAA,IAAS"}

package/dist/range/range.global.js

@@ -1,6 +1,5 @@
-//#region src/range/range.global.css?inline
+// src/range/range.global.css?inline
 var e = "nve-range input[type=range]::-webkit-slider-thumb{width:var(--thumb-width);height:var(--thumb-height);background:var(--thumb-background);border-radius:50%;box-shadow:var(--thumb-border);margin-block-start:calc((var(--track-height) - var(--thumb-height)) / 2);appearance:var(--_appearance);filter:var(--filter)}nve-range input[type=range]::-webkit-slider-runnable-track{background:transparent;height:var(--track-height);border-radius:var(--nve-ref-border-radius-lg);align-self:center}nve-range:has(datalist) input[type=range]::-webkit-slider-container{min-block-size:auto}nve-range[orientation=vertical] input[type=range]::-webkit-slider-container{display:flex;align-items:center;overflow:visible}nve-range[orientation=vertical] input[type=range]::-webkit-slider-runnable-track{width:100%;height:100%}nve-range[orientation=vertical] input[type=range]::-webkit-slider-thumb{margin:0}";
-//#endregion
 export { e as default };
 
 //# sourceMappingURL=range.global.js.map

package/dist/range/range.global.js.map

@@ -1 +1 @@
-{"version":3,"file":"range.global.js","names":[],"sources":["../../src/range/range.global.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\nnve-range input[type='range']::-webkit-slider-thumb {\n  width: var(--thumb-width);\n  height: var(--thumb-height);\n  background: var(--thumb-background);\n  border-radius: 50%;\n  box-shadow: var(--thumb-border);\n  margin-block-start: calc((var(--track-height) - var(--thumb-height)) / 2);\n  appearance: var(--_appearance);\n  filter: var(--filter);\n}\n\nnve-range input[type='range']::-webkit-slider-runnable-track {\n  background: transparent;\n  height: var(--track-height);\n  border-radius: var(--nve-ref-border-radius-lg);\n  align-self: center;\n}\n\nnve-range:has(datalist) input[type='range']::-webkit-slider-container {\n  min-block-size: auto;\n}\n\nnve-range[orientation='vertical'] input[type='range']::-webkit-slider-container {\n  display: flex;\n  align-items: center;\n  overflow: visible;\n}\n\nnve-range[orientation='vertical'] input[type='range']::-webkit-slider-runnable-track {\n  width: 100%;\n  height: 100%;\n}\n\nnve-range[orientation='vertical'] input[type='range']::-webkit-slider-thumb {\n  margin: 0;\n}\n"],"mappings":""}
+{"version":3,"file":"range.global.js","names":["range_global_default"],"sources":["../../src/range/range.global.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\nnve-range input[type='range']::-webkit-slider-thumb {\n  width: var(--thumb-width);\n  height: var(--thumb-height);\n  background: var(--thumb-background);\n  border-radius: 50%;\n  box-shadow: var(--thumb-border);\n  margin-block-start: calc((var(--track-height) - var(--thumb-height)) / 2);\n  appearance: var(--_appearance);\n  filter: var(--filter);\n}\n\nnve-range input[type='range']::-webkit-slider-runnable-track {\n  background: transparent;\n  height: var(--track-height);\n  border-radius: var(--nve-ref-border-radius-lg);\n  align-self: center;\n}\n\nnve-range:has(datalist) input[type='range']::-webkit-slider-container {\n  min-block-size: auto;\n}\n\nnve-range[orientation='vertical'] input[type='range']::-webkit-slider-container {\n  display: flex;\n  align-items: center;\n  overflow: visible;\n}\n\nnve-range[orientation='vertical'] input[type='range']::-webkit-slider-runnable-track {\n  width: 100%;\n  height: 100%;\n}\n\nnve-range[orientation='vertical'] input[type='range']::-webkit-slider-thumb {\n  margin: 0;\n}\n"],"mappings":""}

package/dist/range/range.js

@@ -1,6 +1,5 @@
-//#region src/range/range.css?inline
+// src/range/range.css?inline
 var e = ":host{--background: var(--accent-color);--control-height: var(--nve-sys-interaction-field-height);--cursor: pointer;--track-width: .5;--track-height: var(--nve-ref-size-150);--track-border-radius: var(--nve-ref-border-radius-md);--track-background: var(--nve-sys-interaction-background);--thumb-width: var(--nve-ref-size-400);--thumb-height: var(--nve-ref-size-400);--thumb-background: var(--nve-sys-text-muted-color);--thumb-border: 0 0 0 2px var(--nve-sys-layer-canvas-background);width:100%;contain:layout}:host(:state(disabled)){--background: var(--nve-sys-interaction-disabled-background)}:host([prominence=\"muted\"]){--filter: grayscale(90%)}:host(:not(:state(disabled)):hover) [input]{--filter: brightness(1.1)}:host([prominence=\"muted\"]:not(:state(disabled)):hover) [input]{--filter: grayscale(90%) brightness(1.1)}::slotted(input){accent-color:var(--accent-color)!important;height:calc(var(--track-height) * 3)!important;cursor:var(--cursor)!important;margin:0!important;width:var(--control-width)!important;background:transparent;align-self:center;appearance:var(--_appearance);position:relative;z-index:2}[input]{position:relative;filter:none}[input]:before{content:\"\";display:block;width:100%;height:var(--track-height);background:var(--track-background);border-radius:var(--track-border-radius);filter:var(--filter);position:absolute;pointer-events:none;align-self:center;z-index:0;left:0}[input]:after{content:\"\";display:block;width:calc(var(--track-width) * 100% - var(--track-width) * var(--thumb-width) / 2);height:var(--track-height);background:var(--background);border-top-left-radius:var(--track-border-radius);border-bottom-left-radius:var(--track-border-radius);filter:var(--filter);position:absolute;pointer-events:none;align-self:center;z-index:1;left:0}[input]:has(.datalist-labels){flex-direction:column}[input]:has(.datalist-labels):before{margin-block-start:var(--track-height)}[input]:has(.datalist-labels):after{margin-block-start:var(--track-height)}.datalist-labels{display:flex;cursor:auto;position:relative;min-height:calc(var(--nve-ref-size-150) + var(--nve-ref-space-md) + 1em)}.datalist-tick{display:flex;flex-direction:column;align-items:center;gap:var(--nve-ref-space-xxs);transform:translate(-50%);font-size:var(--nve-ref-font-size-100);color:var(--nve-sys-text-muted-color);position:absolute}.datalist-tick:before{content:\"\";width:var(--nve-ref-size-100);height:var(--nve-ref-size-150);border-radius:var(--nve-ref-border-radius-md);background:var(--nve-sys-interaction-background)}:host([orientation=\"vertical\"]){width:fit-content;height:100%;contain:layout}:host([orientation=\"vertical\"]) [internal-host]{height:100%}:host([orientation=\"vertical\"]) [input]{height:100%}:host([orientation=\"vertical\"]) ::slotted(input){writing-mode:vertical-lr!important;direction:rtl!important;width:var(--thumb-width)!important;height:calc(100% - var(--track-height) * 2)!important;margin:var(--track-height) auto!important;align-self:auto!important}:host([orientation=\"vertical\"]) [input]:before{width:var(--track-height);height:calc(100% - var(--track-height) * 2);left:50%;top:var(--track-height);transform:translate(-50%);align-self:auto}:host([orientation=\"vertical\"]) [input]:after{width:var(--track-height);height:calc(var(--track-width) * (100% - var(--track-height) * 2) - var(--track-width) * var(--thumb-height) / 2);left:50%;top:auto;bottom:var(--track-height);transform:translate(-50%);align-self:auto;border-radius:var(--nve-ref-border-radius-none) var(--nve-ref-border-radius-none) var(--track-border-radius) var(--track-border-radius)}:host([orientation=\"vertical\"]) [input]:has(.datalist-labels){flex-direction:row}:host([orientation=\"vertical\"]) [input]:has(.datalist-labels):before,:host([orientation=\"vertical\"]) [input]:has(.datalist-labels):after{margin-block-start:0}:host([orientation=\"vertical\"]) .datalist-labels{flex-direction:column;height:calc(100% - var(--track-height) * 2);margin-block:var(--track-height);position:absolute;left:calc(50% + var(--thumb-width) / 2 + var(--nve-ref-space-xxs) / 2)}:host([orientation=\"vertical\"]) .datalist-tick{flex-direction:row;transform:none}:host([orientation=\"vertical\"]) .datalist-tick:before{width:var(--nve-ref-size-150);height:var(--nve-ref-size-100)}";
-//#endregion
 export { e as default };
 
 //# sourceMappingURL=range.js.map

package/dist/range/range.js.map

@@ -1 +1 @@
-{"version":3,"file":"range.js","names":[],"sources":["../../src/range/range.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: var(--accent-color);\n  --control-height: var(--nve-sys-interaction-field-height);\n  --cursor: pointer;\n  --track-width: 0.5;\n  --track-height: var(--nve-ref-size-150);\n  --track-border-radius: var(--nve-ref-border-radius-md);\n  --track-background: var(--nve-sys-interaction-background);\n  --thumb-width: var(--nve-ref-size-400);\n  --thumb-height: var(--nve-ref-size-400);\n  --thumb-background: var(--nve-sys-text-muted-color);\n  --thumb-border: 0 0 0 2px var(--nve-sys-layer-canvas-background);\n  width: 100%;\n  contain: layout;\n}\n\n:host(:state(disabled)) {\n  --background: var(--nve-sys-interaction-disabled-background);\n}\n\n:host([prominence='muted']) {\n  --filter: grayscale(90%);\n}\n\n:host(:not(:state(disabled)):hover) [input] {\n  --filter: brightness(1.1);\n}\n\n:host([prominence='muted']:not(:state(disabled)):hover) [input] {\n  --filter: grayscale(90%) brightness(1.1);\n}\n\n::slotted(input) {\n  /* https://web.dev/accent-color/#guaranteeing-contrast */\n  accent-color: var(--accent-color) !important;\n  height: calc(var(--track-height) * 3) !important;\n  cursor: var(--cursor) !important;\n  margin: 0 !important;\n  width: var(--control-width) !important;\n  background: transparent;\n  align-self: center;\n  appearance: var(--_appearance);\n  position: relative;\n  z-index: 2;\n}\n\n[input] {\n  position: relative;\n  filter: none;\n}\n\n[input]::before {\n  content: '';\n  display: block;\n  width: 100%;\n  height: var(--track-height);\n  background: var(--track-background);\n  border-radius: var(--track-border-radius);\n  filter: var(--filter);\n  position: absolute;\n  pointer-events: none;\n  align-self: center;\n  z-index: 0;\n  left: 0;\n}\n\n[input]::after {\n  content: '';\n  display: block;\n  width: calc(var(--track-width) * 100% - var(--track-width) * var(--thumb-width) / 2);\n  height: var(--track-height);\n  background: var(--background);\n  border-top-left-radius: var(--track-border-radius);\n  border-bottom-left-radius: var(--track-border-radius);\n  filter: var(--filter);\n  position: absolute;\n  pointer-events: none;\n  align-self: center;\n  z-index: 1;\n  left: 0;\n}\n\n[input]:has(.datalist-labels) {\n  flex-direction: column;\n}\n\n[input]:has(.datalist-labels)::before {\n  margin-block-start: var(--track-height);\n}\n\n[input]:has(.datalist-labels)::after {\n  margin-block-start: var(--track-height);\n}\n\n.datalist-labels {\n  display: flex;\n  cursor: auto;\n  position: relative;\n  min-height: calc(var(--nve-ref-size-150) + var(--nve-ref-space-md) + 1em);\n}\n\n.datalist-tick {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: var(--nve-ref-space-xxs);\n  transform: translateX(-50%);\n  font-size: var(--nve-ref-font-size-100);\n  color: var(--nve-sys-text-muted-color);\n  position: absolute;\n}\n\n.datalist-tick::before {\n  content: '';\n  width: var(--nve-ref-size-100);\n  height: var(--nve-ref-size-150);\n  border-radius: var(--nve-ref-border-radius-md);\n  background: var(--nve-sys-interaction-background);\n}\n\n:host([orientation='vertical']) {\n  width: fit-content;\n  height: 100%;\n  contain: layout;\n}\n\n:host([orientation='vertical']) [internal-host] {\n  height: 100%;\n}\n\n:host([orientation='vertical']) [input] {\n  height: 100%;\n}\n\n:host([orientation='vertical']) ::slotted(input) {\n  writing-mode: vertical-lr !important;\n  direction: rtl !important;\n  width: var(--thumb-width) !important;\n  height: calc(100% - var(--track-height) * 2) !important;\n  margin: var(--track-height) auto !important;\n  align-self: auto !important;\n}\n\n:host([orientation='vertical']) [input]::before {\n  width: var(--track-height);\n  height: calc(100% - var(--track-height) * 2);\n  left: 50%;\n  top: var(--track-height);\n  transform: translateX(-50%);\n  align-self: auto;\n}\n\n:host([orientation='vertical']) [input]::after {\n  width: var(--track-height);\n  height: calc(var(--track-width) * (100% - var(--track-height) * 2) - var(--track-width) * var(--thumb-height) / 2);\n  left: 50%;\n  top: auto;\n  bottom: var(--track-height);\n  transform: translateX(-50%);\n  align-self: auto;\n  border-radius: var(--nve-ref-border-radius-none) var(--nve-ref-border-radius-none) var(--track-border-radius)\n    var(--track-border-radius);\n}\n\n:host([orientation='vertical']) [input]:has(.datalist-labels) {\n  flex-direction: row;\n}\n\n:host([orientation='vertical']) [input]:has(.datalist-labels)::before,\n:host([orientation='vertical']) [input]:has(.datalist-labels)::after {\n  margin-block-start: 0;\n}\n\n:host([orientation='vertical']) .datalist-labels {\n  flex-direction: column;\n  height: calc(100% - var(--track-height) * 2);\n  margin-block: var(--track-height);\n  position: absolute;\n  left: calc(50% + var(--thumb-width) / 2 + var(--nve-ref-space-xxs) / 2);\n}\n\n:host([orientation='vertical']) .datalist-tick {\n  flex-direction: row;\n  transform: none;\n}\n\n:host([orientation='vertical']) .datalist-tick::before {\n  width: var(--nve-ref-size-150);\n  height: var(--nve-ref-size-100);\n}\n"],"mappings":""}
+{"version":3,"file":"range.js","names":["range_default"],"sources":["../../src/range/range.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: var(--accent-color);\n  --control-height: var(--nve-sys-interaction-field-height);\n  --cursor: pointer;\n  --track-width: 0.5;\n  --track-height: var(--nve-ref-size-150);\n  --track-border-radius: var(--nve-ref-border-radius-md);\n  --track-background: var(--nve-sys-interaction-background);\n  --thumb-width: var(--nve-ref-size-400);\n  --thumb-height: var(--nve-ref-size-400);\n  --thumb-background: var(--nve-sys-text-muted-color);\n  --thumb-border: 0 0 0 2px var(--nve-sys-layer-canvas-background);\n  width: 100%;\n  contain: layout;\n}\n\n:host(:state(disabled)) {\n  --background: var(--nve-sys-interaction-disabled-background);\n}\n\n:host([prominence='muted']) {\n  --filter: grayscale(90%);\n}\n\n:host(:not(:state(disabled)):hover) [input] {\n  --filter: brightness(1.1);\n}\n\n:host([prominence='muted']:not(:state(disabled)):hover) [input] {\n  --filter: grayscale(90%) brightness(1.1);\n}\n\n::slotted(input) {\n  /* https://web.dev/accent-color/#guaranteeing-contrast */\n  accent-color: var(--accent-color) !important;\n  height: calc(var(--track-height) * 3) !important;\n  cursor: var(--cursor) !important;\n  margin: 0 !important;\n  width: var(--control-width) !important;\n  background: transparent;\n  align-self: center;\n  appearance: var(--_appearance);\n  position: relative;\n  z-index: 2;\n}\n\n[input] {\n  position: relative;\n  filter: none;\n}\n\n[input]::before {\n  content: '';\n  display: block;\n  width: 100%;\n  height: var(--track-height);\n  background: var(--track-background);\n  border-radius: var(--track-border-radius);\n  filter: var(--filter);\n  position: absolute;\n  pointer-events: none;\n  align-self: center;\n  z-index: 0;\n  left: 0;\n}\n\n[input]::after {\n  content: '';\n  display: block;\n  width: calc(var(--track-width) * 100% - var(--track-width) * var(--thumb-width) / 2);\n  height: var(--track-height);\n  background: var(--background);\n  border-top-left-radius: var(--track-border-radius);\n  border-bottom-left-radius: var(--track-border-radius);\n  filter: var(--filter);\n  position: absolute;\n  pointer-events: none;\n  align-self: center;\n  z-index: 1;\n  left: 0;\n}\n\n[input]:has(.datalist-labels) {\n  flex-direction: column;\n}\n\n[input]:has(.datalist-labels)::before {\n  margin-block-start: var(--track-height);\n}\n\n[input]:has(.datalist-labels)::after {\n  margin-block-start: var(--track-height);\n}\n\n.datalist-labels {\n  display: flex;\n  cursor: auto;\n  position: relative;\n  min-height: calc(var(--nve-ref-size-150) + var(--nve-ref-space-md) + 1em);\n}\n\n.datalist-tick {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: var(--nve-ref-space-xxs);\n  transform: translateX(-50%);\n  font-size: var(--nve-ref-font-size-100);\n  color: var(--nve-sys-text-muted-color);\n  position: absolute;\n}\n\n.datalist-tick::before {\n  content: '';\n  width: var(--nve-ref-size-100);\n  height: var(--nve-ref-size-150);\n  border-radius: var(--nve-ref-border-radius-md);\n  background: var(--nve-sys-interaction-background);\n}\n\n:host([orientation='vertical']) {\n  width: fit-content;\n  height: 100%;\n  contain: layout;\n}\n\n:host([orientation='vertical']) [internal-host] {\n  height: 100%;\n}\n\n:host([orientation='vertical']) [input] {\n  height: 100%;\n}\n\n:host([orientation='vertical']) ::slotted(input) {\n  writing-mode: vertical-lr !important;\n  direction: rtl !important;\n  width: var(--thumb-width) !important;\n  height: calc(100% - var(--track-height) * 2) !important;\n  margin: var(--track-height) auto !important;\n  align-self: auto !important;\n}\n\n:host([orientation='vertical']) [input]::before {\n  width: var(--track-height);\n  height: calc(100% - var(--track-height) * 2);\n  left: 50%;\n  top: var(--track-height);\n  transform: translateX(-50%);\n  align-self: auto;\n}\n\n:host([orientation='vertical']) [input]::after {\n  width: var(--track-height);\n  height: calc(var(--track-width) * (100% - var(--track-height) * 2) - var(--track-width) * var(--thumb-height) / 2);\n  left: 50%;\n  top: auto;\n  bottom: var(--track-height);\n  transform: translateX(-50%);\n  align-self: auto;\n  border-radius: var(--nve-ref-border-radius-none) var(--nve-ref-border-radius-none) var(--track-border-radius)\n    var(--track-border-radius);\n}\n\n:host([orientation='vertical']) [input]:has(.datalist-labels) {\n  flex-direction: row;\n}\n\n:host([orientation='vertical']) [input]:has(.datalist-labels)::before,\n:host([orientation='vertical']) [input]:has(.datalist-labels)::after {\n  margin-block-start: 0;\n}\n\n:host([orientation='vertical']) .datalist-labels {\n  flex-direction: column;\n  height: calc(100% - var(--track-height) * 2);\n  margin-block: var(--track-height);\n  position: absolute;\n  left: calc(50% + var(--thumb-width) / 2 + var(--nve-ref-space-xxs) / 2);\n}\n\n:host([orientation='vertical']) .datalist-tick {\n  flex-direction: row;\n  transform: none;\n}\n\n:host([orientation='vertical']) .datalist-tick::before {\n  width: var(--nve-ref-size-150);\n  height: var(--nve-ref-size-100);\n}\n"],"mappings":""}

package/dist/range/range2.js

@@ -1,12 +1,12 @@
 import { appendRootNodeStyle as e, getElementUpdate as t } from "../internal/utils/dom.js";
 import { useStyles as n } from "../internal/styles/index.js";
-import r from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js";
+import r from "../_virtual/_@oxc-project_runtime@0.155.0/helpers/esm/decorate.js";
 import { Control as i } from "../forms/control/control2.js";
 import a from "./range.global.js";
 import o from "./range.js";
 import { html as s, isServer as c, nothing as l } from "lit";
 import { property as u } from "lit/decorators/property.js";
-//#region src/range/range.ts
+// src/range/range.ts
 var d = class extends i {
 	constructor(...e) {
 		super(...e), this.orientation = "horizontal";
@@ -17,7 +17,7 @@ var d = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-range",
-			version: "2.20.1"
+			version: "2.20.2"
 		};
 	}
 	connectedCallback() {
@@ -49,7 +49,6 @@ r([u({
 	type: String,
 	reflect: !0
 })], d.prototype, "orientation", void 0);
-//#endregion
 export { d as Range };
 
 //# sourceMappingURL=range2.js.map

package/dist/range/range2.js.map

@@ -1 +1 @@
-{"version":3,"file":"range2.js","names":[],"sources":["../../src/range/range.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { appendRootNodeStyle, getElementUpdate, useStyles } from '@nvidia-elements/core/internal';\nimport { Control } from '@nvidia-elements/core/forms';\nimport { property } from 'lit/decorators/property.js';\nimport globalStyles from './range.global.css?inline';\nimport styles from './range.css?inline';\nimport type { PropertyValues } from 'lit';\nimport { html, nothing, isServer } from 'lit';\n/**\n * @element nve-range\n * @description A range slider is a control that enables users to choose a value from a continuous range of values.\n * @documentation https://nvidia.github.io/elements/docs/elements/range/\n * @since 0.3.0\n * @entrypoint \\@nvidia-elements/core/range\n * @cssprop --background\n * @cssprop --control-height\n * @cssprop --cursor\n * @cssprop --track-width\n * @cssprop --track-height\n * @cssprop --track-border-radius\n * @cssprop --track-background\n * @cssprop --thumb-width\n * @cssprop --thumb-height\n * @cssprop --thumb-background\n * @cssprop --thumb-border\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/slider/\n */\nexport class Range extends Control {\n  static styles = useStyles([...Control.styles, styles]);\n\n  static readonly metadata = {\n    tag: 'nve-range',\n    version: '0.0.0'\n  };\n\n  /** Determines the orientation of the range slider. */\n  @property({ type: String, reflect: true }) orientation: 'vertical' | 'horizontal' = 'horizontal';\n\n  connectedCallback() {\n    super.connectedCallback();\n    appendRootNodeStyle(this, globalStyles);\n    this._internals.ariaOrientation = this.orientation;\n  }\n\n  firstUpdated(props: PropertyValues<this>) {\n    super.firstUpdated(props);\n    this.#setTrackWidth();\n    this.input.addEventListener('input', () => this.#setTrackWidth());\n    getElementUpdate(this.input, 'value', (value: unknown) => this.#setTrackWidth(value as number));\n  }\n\n  updated(props: PropertyValues<this>) {\n    super.updated(props);\n    if (props.has('orientation')) {\n      this._internals.ariaOrientation = this.orientation;\n    }\n  }\n\n  #setTrackWidth(val?: number) {\n    const value = val ?? this.input.valueAsNumber;\n    const min = this.input.min ? parseFloat(this.input.min) : 0;\n    const max = this.input.max ? parseFloat(this.input.max) : 100;\n    this.style.setProperty('--track-width', `${Math.floor(((value - min) / (max - min)) * 100) / 100}`);\n  }\n\n  protected get suffixContent() {\n    const datalist = !isServer ? this.querySelector<HTMLDataListElement>('datalist') : null;\n    return datalist ? this.#renderDatalistTicks(datalist) : nothing;\n  }\n\n  #renderDatalistTicks(datalist: HTMLDataListElement) {\n    const options = Array.from(datalist.options);\n    const min = this.input?.min ? parseFloat(this.input.min) : 0;\n    const max = this.input?.max ? parseFloat(this.input.max) : 100;\n\n    return html`<div class=\"datalist-labels\">\n      ${options.map(option => {\n        const value = parseFloat(option.value);\n        const position = ((value - min) / (max - min)) * 100;\n        const style =\n          this.orientation === 'vertical'\n            ? `bottom: ${position}%; transform: translateY(${position}%)`\n            : `left: ${position}%; transform: translateX(-${position}%)`;\n        return html`<span class=\"datalist-tick\" style=${style}>${option.textContent || value}</span>`;\n      })}\n    </div>`;\n  }\n}\n"],"mappings":";;;;;;;;;AA6BA,IAAa,IAAb,cAA2B,EAAQ;;EASmD,aAAA,KAAA,cAAA;;;EARpE,KAAA,SAAA,EAAU,CAAC,GAAG,EAAQ,QAAQ,CAAM,CAAC;;;EAE1B,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;EACX;;CAKA,oBAAoB;EAGlB,AAFA,MAAM,kBAAkB,GACxB,EAAoB,MAAM,CAAY,GACtC,KAAK,WAAW,kBAAkB,KAAK;CACzC;CAEA,aAAa,GAA6B;EAIxC,AAHA,MAAM,aAAa,CAAK,GACxB,KAAK,GAAe,GACpB,KAAK,MAAM,iBAAiB,eAAe,KAAK,GAAe,CAAC,GAChE,EAAiB,KAAK,OAAO,UAAU,MAAmB,KAAK,GAAe,CAAe,CAAC;CAChG;CAEA,QAAQ,GAA6B;EAEnC,AADA,MAAM,QAAQ,CAAK,GACf,EAAM,IAAI,aAAa,MACzB,KAAK,WAAW,kBAAkB,KAAK;CAE3C;CAEA,GAAe,GAAc;EAC3B,IAAM,IAAQ,KAAO,KAAK,MAAM,eAC1B,IAAM,KAAK,MAAM,MAAM,WAAW,KAAK,MAAM,GAAG,IAAI,GACpD,IAAM,KAAK,MAAM,MAAM,WAAW,KAAK,MAAM,GAAG,IAAI;EAC1D,KAAK,MAAM,YAAY,iBAAiB,GAAG,KAAK,OAAQ,IAAQ,MAAQ,IAAM,KAAQ,GAAG,IAAI,KAAK;CACpG;CAEA,IAAc,gBAAgB;EAC5B,IAAM,IAAY,IAAiE,OAAtD,KAAK,cAAmC,UAAU;EAC/E,OAAO,IAAW,KAAK,GAAqB,CAAQ,IAAI;CAC1D;CAEA,GAAqB,GAA+B;EAClD,IAAM,IAAU,MAAM,KAAK,EAAS,OAAO,GACrC,IAAM,KAAK,OAAO,MAAM,WAAW,KAAK,MAAM,GAAG,IAAI,GACrD,IAAM,KAAK,OAAO,MAAM,WAAW,KAAK,MAAM,GAAG,IAAI;EAE3D,OAAO,CAAI,gCACP,EAAQ,KAAI,MAAU;GACtB,IAAM,IAAQ,WAAW,EAAO,KAAK,GAC/B,KAAa,IAAQ,MAAQ,IAAM,KAAQ,KAC3C,IACJ,KAAK,gBAAgB,aACjB,WAAW,EAAS,2BAA2B,EAAS,MACxD,SAAS,EAAS,4BAA4B,EAAS;GAC7D,OAAO,CAAI,sCAAqC,EAAM,IAAG,EAAO,eAAe,EAAM;EACvF,CAAC,EAAE;CAEP;AACF;AAnDG,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,eAAA,KAAA,CAAA"}
+{"version":3,"file":"range2.js","names":["styles","globalStyles","_decorate","__decorate","range_global_default","range_default","Range","Control","_args","useStyles","appendRootNodeStyle","props","#setTrackWidth","getElementUpdate","value","val","min","max","datalist","isServer","#renderDatalistTicks","nothing","options","option","position","style","property"],"sources":["../../src/range/range.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { appendRootNodeStyle, getElementUpdate, useStyles } from '@nvidia-elements/core/internal';\nimport { Control } from '@nvidia-elements/core/forms';\nimport { property } from 'lit/decorators/property.js';\nimport globalStyles from './range.global.css?inline';\nimport styles from './range.css?inline';\nimport type { PropertyValues } from 'lit';\nimport { html, nothing, isServer } from 'lit';\n/**\n * @element nve-range\n * @description A range slider is a control that enables users to choose a value from a continuous range of values.\n * @documentation https://nvidia.github.io/elements/docs/elements/range/\n * @since 0.3.0\n * @entrypoint \\@nvidia-elements/core/range\n * @cssprop --background\n * @cssprop --control-height\n * @cssprop --cursor\n * @cssprop --track-width\n * @cssprop --track-height\n * @cssprop --track-border-radius\n * @cssprop --track-background\n * @cssprop --thumb-width\n * @cssprop --thumb-height\n * @cssprop --thumb-background\n * @cssprop --thumb-border\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/slider/\n */\nexport class Range extends Control {\n  static styles = useStyles([...Control.styles, styles]);\n\n  static readonly metadata = {\n    tag: 'nve-range',\n    version: '0.0.0'\n  };\n\n  /** Determines the orientation of the range slider. */\n  @property({ type: String, reflect: true }) orientation: 'vertical' | 'horizontal' = 'horizontal';\n\n  connectedCallback() {\n    super.connectedCallback();\n    appendRootNodeStyle(this, globalStyles);\n    this._internals.ariaOrientation = this.orientation;\n  }\n\n  firstUpdated(props: PropertyValues<this>) {\n    super.firstUpdated(props);\n    this.#setTrackWidth();\n    this.input.addEventListener('input', () => this.#setTrackWidth());\n    getElementUpdate(this.input, 'value', (value: unknown) => this.#setTrackWidth(value as number));\n  }\n\n  updated(props: PropertyValues<this>) {\n    super.updated(props);\n    if (props.has('orientation')) {\n      this._internals.ariaOrientation = this.orientation;\n    }\n  }\n\n  #setTrackWidth(val?: number) {\n    const value = val ?? this.input.valueAsNumber;\n    const min = this.input.min ? parseFloat(this.input.min) : 0;\n    const max = this.input.max ? parseFloat(this.input.max) : 100;\n    this.style.setProperty('--track-width', `${Math.floor(((value - min) / (max - min)) * 100) / 100}`);\n  }\n\n  protected get suffixContent() {\n    const datalist = !isServer ? this.querySelector<HTMLDataListElement>('datalist') : null;\n    return datalist ? this.#renderDatalistTicks(datalist) : nothing;\n  }\n\n  #renderDatalistTicks(datalist: HTMLDataListElement) {\n    const options = Array.from(datalist.options);\n    const min = this.input?.min ? parseFloat(this.input.min) : 0;\n    const max = this.input?.max ? parseFloat(this.input.max) : 100;\n\n    return html`<div class=\"datalist-labels\">\n      ${options.map(option => {\n        const value = parseFloat(option.value);\n        const position = ((value - min) / (max - min)) * 100;\n        const style =\n          this.orientation === 'vertical'\n            ? `bottom: ${position}%; transform: translateY(${position}%)`\n            : `left: ${position}%; transform: translateX(-${position}%)`;\n        return html`<span class=\"datalist-tick\" style=${style}>${option.textContent || value}</span>`;\n      })}\n    </div>`;\n  }\n}\n"],"mappings":";;;;;;;;;AA6BA,IAAaM,IAAb,cAA2BC,EAAQ;;EASmD,A,aAAA,KAAA,cAAA;;;EARpE,KAAA,SAAAE,EAAU,CAAC,GAAGF,EAAQ,QAAQP,CAAM,CAAC;;;EAE1B,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;EACX;;CAKA,oBAAoB;EAGlB,AAFA,MAAM,kBAAkB,GACxBU,EAAoB,MAAMT,CAAY,GACtC,KAAK,WAAW,kBAAkB,KAAK;CACzC;CAEA,aAAa,GAA6B;EAIxC,AAHA,MAAM,aAAaU,CAAK,GACxB,KAAKC,GAAe,GACpB,KAAK,MAAM,iBAAiB,eAAe,KAAKA,GAAe,CAAC,GAChEC,EAAiB,KAAK,OAAO,UAAU,MAAmB,KAAKD,GAAeE,CAAe,CAAC;CAChG;CAEA,QAAQ,GAA6B;EAEnC,AADA,MAAM,QAAQH,CAAK,GACfA,EAAM,IAAI,aAAa,MACzB,KAAK,WAAW,kBAAkB,KAAK;CAE3C;CAEA,GAAe,GAAc;EAC3B,IAAMG,IAAQC,KAAO,KAAK,MAAM,eAC1BC,IAAM,KAAK,MAAM,MAAM,WAAW,KAAK,MAAM,GAAG,IAAI,GACpDC,IAAM,KAAK,MAAM,MAAM,WAAW,KAAK,MAAM,GAAG,IAAI;EAC1D,KAAK,MAAM,YAAY,iBAAiB,GAAG,KAAK,OAAQH,IAAQE,MAAQC,IAAMD,KAAQ,GAAG,IAAI,KAAK;CACpG;CAEA,IAAc,gBAAgB;EAC5B,IAAME,IAAYC,IAAiE,OAAtD,KAAK,cAAmC,UAAU;EAC/E,OAAOD,IAAW,KAAKE,GAAqBF,CAAQ,IAAIG;CAC1D;CAEA,GAAqB,GAA+B;EAClD,IAAMC,IAAU,MAAM,KAAKJ,EAAS,OAAO,GACrCF,IAAM,KAAK,OAAO,MAAM,WAAW,KAAK,MAAM,GAAG,IAAI,GACrDC,IAAM,KAAK,OAAO,MAAM,WAAW,KAAK,MAAM,GAAG,IAAI;EAE3D,OAAO,CAAI,gCACPK,EAAQ,KAAI,MAAU;GACtB,IAAMR,IAAQ,WAAWS,EAAO,KAAK,GAC/BC,KAAaV,IAAQE,MAAQC,IAAMD,KAAQ,KAC3CS,IACJ,KAAK,gBAAgB,aACjB,WAAWD,EAAS,2BAA2BA,EAAS,MACxD,SAASA,EAAS,4BAA4BA,EAAS;GAC7D,OAAO,CAAI,sCAAqCC,EAAM,IAAGF,EAAO,eAAeT,EAAM;EACvF,CAAC,EAAE;CAEP;AACF;AAnDGZ,EAAA,CAAAwB,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAApB,EAAA,WAAA,eAAA,KAAA,CAAA"}