@nvidia-elements/core 2.20.1 → 2.20.2

package/dist/select/select2.js.map

@@ -1 +1 @@
-{"version":3,"file":"select2.js","names":[],"sources":["../../src/select/select.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { PropertyValues } from 'lit';\nimport { html, nothing } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport {\n  focusElementTimeout,\n  onListboxActivate,\n  useStyles,\n  onChildListMutation,\n  getElementUpdate,\n  scopedRegistry,\n  appendRootNodeStyle\n} from '@nvidia-elements/core/internal';\nimport { i18n, I18nController, type I18nDefaults } from '@nvidia-elements/foundations/internal/i18n';\nimport { Control } from '@nvidia-elements/core/forms';\nimport { Icon } from '@nvidia-elements/core/icon';\nimport { Menu, MenuItem } from '@nvidia-elements/core/menu';\nimport { Dropdown } from '@nvidia-elements/core/dropdown';\nimport { Tag } from '@nvidia-elements/core/tag';\nimport styles from './select.css?inline';\nimport globalStyles from './select.global.css?inline';\n\nconst i18nDefaults = {\n  select: 'select',\n  selected: 'selected'\n} satisfies I18nDefaults;\n\n/**\n * @element nve-select\n * @description A select is a control that enables users to select an option from a list of options.\n * @documentation https://nvidia.github.io/elements/docs/elements/select/\n * @since 0.3.0\n * @entrypoint \\@nvidia-elements/core/select\n * @cssprop --padding\n * @cssprop --font-size\n * @cssprop --height\n * @cssprop --background\n * @cssprop --color\n * @cssprop --border-radius\n * @cssprop --border\n * @cssprop --border-bottom\n * @cssprop --cursor\n * @cssprop --font-weight\n * @cssprop --text-align\n * @cssprop --scroll-height\n * @cssprop --width\n * @cssprop --control-width\n * @cssprop --max-width\n * @cssprop --min-width\n * @cssprop --box-shadow\n * @cssprop --max-height\n * @cssprop --text-transform\n * @csspart tag\n * @csspart menu - The dropdown menu element\n * @csspart menu-item - The menu item elements\n * @csspart icon - The icon element\n * @csspart caret - The caret/chevron icon element\n * @csspart dropdown - The dropdown popup element\n * @slot - Select input element\n * @aria https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select\n */\n@i18n<Select>()\n@scopedRegistry()\nexport class Select extends Control {\n  static styles = useStyles([...Control.styles, styles]);\n\n  static readonly metadata = {\n    tag: 'nve-select',\n    version: '0.0.0'\n  };\n\n  static elementDefinitions = {\n    [Icon.metadata.tag]: Icon,\n    [Dropdown.metadata.tag]: Dropdown,\n    [Menu.metadata.tag]: Menu,\n    [MenuItem.metadata.tag]: MenuItem,\n    [Tag.metadata.tag]: Tag\n  };\n\n  /** Flat container option applies when embedding the component within another containing element */\n  @property({ type: String, reflect: true }) container?: 'flat' | 'inline';\n\n  #i18nController: I18nController<this> = new I18nController<this>(this, i18nDefaults);\n\n  /** Updates internal string values for internationalization. */\n  @property({ type: Object }) i18n = this.#i18nController.i18n;\n\n  get #select() {\n    return this.input as unknown as HTMLSelectElement;\n  }\n\n  get #options() {\n    return Array.from(this.#select?.options ? this.#select.options : []);\n  }\n\n  get #dropdown() {\n    return this.shadowRoot!.querySelector<Dropdown>(Dropdown.metadata.tag);\n  }\n\n  get #menuItems() {\n    return this.shadowRoot!.querySelectorAll<MenuItem>(MenuItem.metadata.tag);\n  }\n\n  get #input() {\n    return this.shadowRoot!.querySelector<HTMLElement>('[input]');\n  }\n\n  get #tags() {\n    return this.shadowRoot!.querySelector('.tags');\n  }\n\n  get #caret() {\n    return this.shadowRoot!.querySelector<Icon>('[name=\"caret\"]');\n  }\n\n  get #placeholderOption() {\n    return this.#options.find(o => o.selected && o.hidden && o.disabled);\n  }\n\n  #observers: (MutationObserver | ResizeObserver)[] = [];\n\n  get #multipleSelectLabel() {\n    const option = this.#placeholderOption;\n    const label = option ? option.innerText : `${this.#select.selectedOptions.length} ${this.i18n.selected}`;\n    return html`<div class=\"tags-label ${option ? 'placeholder' : ''}\" aria-hidden=\"true\">${label}</div>`;\n  }\n\n  protected get prefixContent() {\n    return this.#select?.multiple && this.#select?.size === 0\n      ? html`\n    ${this.#multipleSelectLabel}\n    <div class=\"tags\">\n      ${this.#options\n        .filter(o => o.selected && o !== this.#placeholderOption)\n        .map(\n          o => html`\n      <nve-tag part=\"tag\" readonly color=\"gray-slate\" closable .value=${o.value} @click=${() => this.#selectValue(o, false)}>${o.textContent}</nve-tag>`\n        )}\n    </div>`\n      : nothing;\n  }\n\n  get #menu() {\n    return html`\n    <nve-menu part=\"menu\" role=\"listbox\" style=\"--width: 100%; --min-width: fit-content\" aria-label=${ifDefined(this.i18n.select)}>\n      ${this.#options\n        .filter(o => o !== this.#placeholderOption)\n        .map(\n          (o, i) => html`\n      <nve-menu-item part=\"menu-item\" role=\"option\" @click=${() => this.#selectValue(o, !o.selected)} ?selected=${o.selected} ?disabled=${o.disabled} ?hidden=${!!o.hidden} aria-selected=${o.selected}>\n        <slot name=\"option-${i + 1}\">\n          <nve-icon part=\"icon\" name=\"check\" size=\"sm\" aria-hidden=\"true\"></nve-icon> ${o.innerText}\n        </slot>\n      </nve-menu-item>`\n        )}\n    </nve-menu>`;\n  }\n\n  protected get suffixContent() {\n    return this.#select?.size === 0\n      ? html`\n      <nve-icon name=\"caret\" part=\"caret\" direction=\"down\" size=\"sm\" aria-hidden=\"true\"></nve-icon>\n      <nve-dropdown part=\"dropdown\" @close=${this.#closeDropdown} @open=${this.#openDropdown} hidden .anchor=${this.#input as HTMLElement} position=\"bottom\">\n        ${this.#menu}\n      </nve-dropdown>`\n      : this.#menu;\n  }\n\n  async firstUpdated(props: PropertyValues<this>) {\n    super.firstUpdated(props);\n    await this.updateComplete;\n    this.#setupCustomSelectUI();\n  }\n\n  #syncSelectValueStates() {\n    this.#observers.push(\n      getElementUpdate(this.#select, 'value', () => this.requestUpdate()),\n      onChildListMutation(this.#select, () => this.requestUpdate(), { attributes: true, subtree: true }),\n      onChildListMutation(this.#select, () => this.#syncOptionSelectedStates(), { subtree: true })\n    );\n  }\n\n  #optionObservers = new Map<HTMLOptionElement, MutationObserver>();\n\n  #setupObservers() {\n    this.#disconnectObservers();\n    this.#setupOverflowListener();\n    this.#syncSelectValueStates();\n    this.#syncOptionSelectedStates();\n  }\n\n  #disconnectObservers() {\n    this.#observers.forEach(observer => observer.disconnect());\n    this.#observers = [];\n    this.#optionObservers.clear();\n  }\n\n  #syncOptionSelectedStates() {\n    const options = new Set(this.#options);\n\n    this.#optionObservers.forEach((observer, option) => {\n      if (!options.has(option)) {\n        observer.disconnect();\n        this.#optionObservers.delete(option);\n        this.#observers = this.#observers.filter(o => o !== observer);\n      }\n    });\n\n    this.#options.forEach(o => {\n      if (!this.#optionObservers.has(o)) {\n        const observer = getElementUpdate(o, 'selected', () => this.requestUpdate());\n        this.#optionObservers.set(o, observer);\n        this.#observers.push(observer);\n      }\n    });\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    appendRootNodeStyle(this, globalStyles);\n    void this.updateComplete.then(() => {\n      if (this.isConnected) {\n        this.#setupObservers();\n      }\n    });\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.#disconnectObservers();\n  }\n\n  async updated(props: PropertyValues<this>) {\n    super.updated(props);\n    if (this.#select?.size && this.#select?.size !== 0) {\n      this._internals.states.add('size');\n      this.style.setProperty('--size', `${this.#select.size}`);\n    } else {\n      this._internals.states.delete('size');\n      this.style.removeProperty('--size');\n    }\n\n    if (this.#select?.multiple && this.#select?.size === 0) {\n      this._internals.states.add('multiple');\n    } else {\n      this._internals.states.delete('multiple');\n    }\n  }\n\n  #setupCustomSelectUI() {\n    if (this.#select?.size === 0) {\n      onListboxActivate(this.#select, () => {\n        this.requestUpdate(); // update menu items\n        this.#dropdown!.style.setProperty('--min-width', `${this.#input!.getBoundingClientRect().width}px`);\n        this.#dropdown!.showPopover();\n        focusElementTimeout(this.#menuItems[0] as HTMLElement);\n      });\n    }\n  }\n\n  #openDropdown() {\n    this.#dropdown!.hidden = false;\n    this.#caret!.direction = 'up';\n  }\n\n  #closeDropdown() {\n    this.#dropdown!.hidden = true;\n    this.#caret!.direction = 'down';\n  }\n\n  #setupOverflowListener() {\n    const observer = new ResizeObserver(entries => this.#updateMultipleOverflow(entries[0]!.contentRect.width));\n    this.#observers.push(observer);\n    observer.observe(this.#input!);\n  }\n\n  async #selectValue(option: HTMLOptionElement, selected: boolean) {\n    if (this.#select.multiple || (!this.#select.multiple && option.value !== this.#select.value)) {\n      option.selected = selected;\n    }\n\n    // native select only the first selected option determines the select input value\n    if (this.#select.selectedOptions.length < 1) {\n      this.#select.value = selected ? option.value : '';\n    }\n\n    this.#select.dispatchEvent(new Event('input', { bubbles: true }));\n    this.#select.dispatchEvent(new Event('change', { bubbles: true }));\n    this.requestUpdate();\n\n    if (!this.#select.multiple && this.#dropdown) {\n      this.#dropdown.hidePopover();\n    } else {\n      await this.updateComplete;\n      this.#updateMultipleOverflow(this.#input!.getBoundingClientRect().width);\n    }\n  }\n\n  #updateMultipleOverflow(width: number) {\n    const tags = this.#tags;\n    if (this.#select?.multiple && tags && tags.getBoundingClientRect().width > width - 48) {\n      this._internals.states.add('multiple-overflow');\n    } else {\n      this._internals.states.delete('multiple-overflow');\n    }\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"select2.js","names":["styles","globalStyles","_decorate","__decorate","select_default","select_global_default","i18nDefaults","Select","Control","_args","#i18nController","I18nController","#observers","#optionObservers","useStyles","Icon","Dropdown","Menu","MenuItem","Tag","#select","#options","#dropdown","#menuItems","#input","#tags","#caret","#placeholderOption","o","#multipleSelectLabel","option","label","#selectValue","nothing","#menu","ifDefined","i","#closeDropdown","#openDropdown","props","#setupCustomSelectUI","getElementUpdate","onChildListMutation","#syncOptionSelectedStates","#disconnectObservers","#setupOverflowListener","#syncSelectValueStates","observer","options","appendRootNodeStyle","#setupObservers","onListboxActivate","focusElementTimeout","#updateMultipleOverflow","entries","selected","tags","width","property","i18n","scopedRegistry"],"sources":["../../src/select/select.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { PropertyValues } from 'lit';\nimport { html, nothing } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport {\n  focusElementTimeout,\n  onListboxActivate,\n  useStyles,\n  onChildListMutation,\n  getElementUpdate,\n  scopedRegistry,\n  appendRootNodeStyle\n} from '@nvidia-elements/core/internal';\nimport { i18n, I18nController, type I18nDefaults } from '@nvidia-elements/foundations/internal/i18n';\nimport { Control } from '@nvidia-elements/core/forms';\nimport { Icon } from '@nvidia-elements/core/icon';\nimport { Menu, MenuItem } from '@nvidia-elements/core/menu';\nimport { Dropdown } from '@nvidia-elements/core/dropdown';\nimport { Tag } from '@nvidia-elements/core/tag';\nimport styles from './select.css?inline';\nimport globalStyles from './select.global.css?inline';\n\nconst i18nDefaults = {\n  select: 'select',\n  selected: 'selected'\n} satisfies I18nDefaults;\n\n/**\n * @element nve-select\n * @description A select is a control that enables users to select an option from a list of options.\n * @documentation https://nvidia.github.io/elements/docs/elements/select/\n * @since 0.3.0\n * @entrypoint \\@nvidia-elements/core/select\n * @cssprop --padding\n * @cssprop --font-size\n * @cssprop --height\n * @cssprop --background\n * @cssprop --color\n * @cssprop --border-radius\n * @cssprop --border\n * @cssprop --border-bottom\n * @cssprop --cursor\n * @cssprop --font-weight\n * @cssprop --text-align\n * @cssprop --scroll-height\n * @cssprop --width\n * @cssprop --control-width\n * @cssprop --max-width\n * @cssprop --min-width\n * @cssprop --box-shadow\n * @cssprop --max-height\n * @cssprop --text-transform\n * @csspart tag\n * @csspart menu - The dropdown menu element\n * @csspart menu-item - The menu item elements\n * @csspart icon - The icon element\n * @csspart caret - The caret/chevron icon element\n * @csspart dropdown - The dropdown popup element\n * @slot - Select input element\n * @aria https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select\n */\n@i18n<Select>()\n@scopedRegistry()\nexport class Select extends Control {\n  static styles = useStyles([...Control.styles, styles]);\n\n  static readonly metadata = {\n    tag: 'nve-select',\n    version: '0.0.0'\n  };\n\n  static elementDefinitions = {\n    [Icon.metadata.tag]: Icon,\n    [Dropdown.metadata.tag]: Dropdown,\n    [Menu.metadata.tag]: Menu,\n    [MenuItem.metadata.tag]: MenuItem,\n    [Tag.metadata.tag]: Tag\n  };\n\n  /** Flat container option applies when embedding the component within another containing element */\n  @property({ type: String, reflect: true }) container?: 'flat' | 'inline';\n\n  #i18nController: I18nController<this> = new I18nController<this>(this, i18nDefaults);\n\n  /** Updates internal string values for internationalization. */\n  @property({ type: Object }) i18n = this.#i18nController.i18n;\n\n  get #select() {\n    return this.input as unknown as HTMLSelectElement;\n  }\n\n  get #options() {\n    return Array.from(this.#select?.options ? this.#select.options : []);\n  }\n\n  get #dropdown() {\n    return this.shadowRoot!.querySelector<Dropdown>(Dropdown.metadata.tag);\n  }\n\n  get #menuItems() {\n    return this.shadowRoot!.querySelectorAll<MenuItem>(MenuItem.metadata.tag);\n  }\n\n  get #input() {\n    return this.shadowRoot!.querySelector<HTMLElement>('[input]');\n  }\n\n  get #tags() {\n    return this.shadowRoot!.querySelector('.tags');\n  }\n\n  get #caret() {\n    return this.shadowRoot!.querySelector<Icon>('[name=\"caret\"]');\n  }\n\n  get #placeholderOption() {\n    return this.#options.find(o => o.selected && o.hidden && o.disabled);\n  }\n\n  #observers: (MutationObserver | ResizeObserver)[] = [];\n\n  get #multipleSelectLabel() {\n    const option = this.#placeholderOption;\n    const label = option ? option.innerText : `${this.#select.selectedOptions.length} ${this.i18n.selected}`;\n    return html`<div class=\"tags-label ${option ? 'placeholder' : ''}\" aria-hidden=\"true\">${label}</div>`;\n  }\n\n  protected get prefixContent() {\n    return this.#select?.multiple && this.#select?.size === 0\n      ? html`\n    ${this.#multipleSelectLabel}\n    <div class=\"tags\">\n      ${this.#options\n        .filter(o => o.selected && o !== this.#placeholderOption)\n        .map(\n          o => html`\n      <nve-tag part=\"tag\" readonly color=\"gray-slate\" closable .value=${o.value} @click=${() => this.#selectValue(o, false)}>${o.textContent}</nve-tag>`\n        )}\n    </div>`\n      : nothing;\n  }\n\n  get #menu() {\n    return html`\n    <nve-menu part=\"menu\" role=\"listbox\" style=\"--width: 100%; --min-width: fit-content\" aria-label=${ifDefined(this.i18n.select)}>\n      ${this.#options\n        .filter(o => o !== this.#placeholderOption)\n        .map(\n          (o, i) => html`\n      <nve-menu-item part=\"menu-item\" role=\"option\" @click=${() => this.#selectValue(o, !o.selected)} ?selected=${o.selected} ?disabled=${o.disabled} ?hidden=${!!o.hidden} aria-selected=${o.selected}>\n        <slot name=\"option-${i + 1}\">\n          <nve-icon part=\"icon\" name=\"check\" size=\"sm\" aria-hidden=\"true\"></nve-icon> ${o.innerText}\n        </slot>\n      </nve-menu-item>`\n        )}\n    </nve-menu>`;\n  }\n\n  protected get suffixContent() {\n    return this.#select?.size === 0\n      ? html`\n      <nve-icon name=\"caret\" part=\"caret\" direction=\"down\" size=\"sm\" aria-hidden=\"true\"></nve-icon>\n      <nve-dropdown part=\"dropdown\" @close=${this.#closeDropdown} @open=${this.#openDropdown} hidden .anchor=${this.#input as HTMLElement} position=\"bottom\">\n        ${this.#menu}\n      </nve-dropdown>`\n      : this.#menu;\n  }\n\n  async firstUpdated(props: PropertyValues<this>) {\n    super.firstUpdated(props);\n    await this.updateComplete;\n    this.#setupCustomSelectUI();\n  }\n\n  #syncSelectValueStates() {\n    this.#observers.push(\n      getElementUpdate(this.#select, 'value', () => this.requestUpdate()),\n      onChildListMutation(this.#select, () => this.requestUpdate(), { attributes: true, subtree: true }),\n      onChildListMutation(this.#select, () => this.#syncOptionSelectedStates(), { subtree: true })\n    );\n  }\n\n  #optionObservers = new Map<HTMLOptionElement, MutationObserver>();\n\n  #setupObservers() {\n    this.#disconnectObservers();\n    this.#setupOverflowListener();\n    this.#syncSelectValueStates();\n    this.#syncOptionSelectedStates();\n  }\n\n  #disconnectObservers() {\n    this.#observers.forEach(observer => observer.disconnect());\n    this.#observers = [];\n    this.#optionObservers.clear();\n  }\n\n  #syncOptionSelectedStates() {\n    const options = new Set(this.#options);\n\n    this.#optionObservers.forEach((observer, option) => {\n      if (!options.has(option)) {\n        observer.disconnect();\n        this.#optionObservers.delete(option);\n        this.#observers = this.#observers.filter(o => o !== observer);\n      }\n    });\n\n    this.#options.forEach(o => {\n      if (!this.#optionObservers.has(o)) {\n        const observer = getElementUpdate(o, 'selected', () => this.requestUpdate());\n        this.#optionObservers.set(o, observer);\n        this.#observers.push(observer);\n      }\n    });\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    appendRootNodeStyle(this, globalStyles);\n    void this.updateComplete.then(() => {\n      if (this.isConnected) {\n        this.#setupObservers();\n      }\n    });\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.#disconnectObservers();\n  }\n\n  async updated(props: PropertyValues<this>) {\n    super.updated(props);\n    if (this.#select?.size && this.#select?.size !== 0) {\n      this._internals.states.add('size');\n      this.style.setProperty('--size', `${this.#select.size}`);\n    } else {\n      this._internals.states.delete('size');\n      this.style.removeProperty('--size');\n    }\n\n    if (this.#select?.multiple && this.#select?.size === 0) {\n      this._internals.states.add('multiple');\n    } else {\n      this._internals.states.delete('multiple');\n    }\n  }\n\n  #setupCustomSelectUI() {\n    if (this.#select?.size === 0) {\n      onListboxActivate(this.#select, () => {\n        this.requestUpdate(); // update menu items\n        this.#dropdown!.style.setProperty('--min-width', `${this.#input!.getBoundingClientRect().width}px`);\n        this.#dropdown!.showPopover();\n        focusElementTimeout(this.#menuItems[0] as HTMLElement);\n      });\n    }\n  }\n\n  #openDropdown() {\n    this.#dropdown!.hidden = false;\n    this.#caret!.direction = 'up';\n  }\n\n  #closeDropdown() {\n    this.#dropdown!.hidden = true;\n    this.#caret!.direction = 'down';\n  }\n\n  #setupOverflowListener() {\n    const observer = new ResizeObserver(entries => this.#updateMultipleOverflow(entries[0]!.contentRect.width));\n    this.#observers.push(observer);\n    observer.observe(this.#input!);\n  }\n\n  async #selectValue(option: HTMLOptionElement, selected: boolean) {\n    if (this.#select.multiple || (!this.#select.multiple && option.value !== this.#select.value)) {\n      option.selected = selected;\n    }\n\n    // native select only the first selected option determines the select input value\n    if (this.#select.selectedOptions.length < 1) {\n      this.#select.value = selected ? option.value : '';\n    }\n\n    this.#select.dispatchEvent(new Event('input', { bubbles: true }));\n    this.#select.dispatchEvent(new Event('change', { bubbles: true }));\n    this.requestUpdate();\n\n    if (!this.#select.multiple && this.#dropdown) {\n      this.#dropdown.hidePopover();\n    } else {\n      await this.updateComplete;\n      this.#updateMultipleOverflow(this.#input!.getBoundingClientRect().width);\n    }\n  }\n\n  #updateMultipleOverflow(width: number) {\n    const tags = this.#tags;\n    if (this.#select?.multiple && tags && tags.getBoundingClientRect().width > width - 48) {\n      this._internals.states.add('multiple-overflow');\n    } else {\n      this._internals.states.delete('multiple-overflow');\n    }\n  }\n}\n"],"mappings":"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"}

package/dist/skeleton/define.js

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

package/dist/skeleton/define.js.map

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

package/dist/skeleton/index.js

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

package/dist/skeleton/skeleton.examples.js

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

package/dist/skeleton/skeleton.examples.js.map

@@ -1 +1 @@
-{"version":3,"file":"skeleton.examples.js","names":[],"sources":["../../src/skeleton/skeleton.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/skeleton/define.js';\n\nexport default {\n  title: 'Elements/Skeleton',\n  component: 'nve-skeleton',\n};\n\n/**\n * @summary Basic skeleton component for text content. Placeholder lines appear while content loads.\n */\nexport const Default = {\n  render: () => html`\n<div nve-layout=\"column gap:xs align:stretch\">\n  <nve-skeleton></nve-skeleton>\n  <nve-skeleton style=\"width: 90%\"></nve-skeleton>\n  <nve-skeleton style=\"width: 80%\"></nve-skeleton>\n</div>`\n};\n\n/**\n * @summary Skeleton loading effects including pulse and shimmer animations. Use pulse for subtle breathing motion or shimmer for a scanning highlight that conveys active content loading.\n */\nexport const Effect = {\n  render: () => html`\n<div nve-layout=\"column gap:xs align:stretch\">\n  <nve-skeleton></nve-skeleton>\n  <nve-skeleton effect=\"pulse\"></nve-skeleton>\n  <nve-skeleton effect=\"shimmer\"></nve-skeleton>\n</div>`\n}\n\n/**\n * @summary Skeleton shape variants including default rectangle, pill, and round. Use pill for button or tag placeholders and round for avatar or icon placeholders to match the final content shape.\n * @tags theme\n */\nexport const Shape = {\n  render: () => html`\n<div nve-layout=\"column gap:xs align:stretch\">\n  <nve-skeleton></nve-skeleton>\n  <nve-skeleton shape=\"pill\"></nve-skeleton>\n  <nve-skeleton shape=\"round\" style=\"width: 40px; height: 40px;\"></nve-skeleton>\n</div>`\n}\n\n/**\n * @summary Skeleton with slotted content that automatically hides the placeholder when real content arrives. Use to wrap lazy-loaded content so the skeleton disappears once data loads without manual state management.\n */\nexport const Slotted = {\n  render: () => html`\n<div nve-layout=\"column gap:xs align:stretch\">\n  <nve-skeleton></nve-skeleton>\n  <nve-skeleton effect=\"shimmer\">slotting content will hide the skeleton</nve-skeleton>\n  <nve-skeleton effect=\"shimmer\">  </nve-skeleton>\n</div>`\n}\n"],"mappings":";AAGA,IAAA,IAAS"}
+{"version":3,"file":"skeleton.examples.js","names":["skeleton_examples_default"],"sources":["../../src/skeleton/skeleton.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/skeleton/define.js';\n\nexport default {\n  title: 'Elements/Skeleton',\n  component: 'nve-skeleton',\n};\n\n/**\n * @summary Basic skeleton component for text content. Placeholder lines appear while content loads.\n */\nexport const Default = {\n  render: () => html`\n<div nve-layout=\"column gap:xs align:stretch\">\n  <nve-skeleton></nve-skeleton>\n  <nve-skeleton style=\"width: 90%\"></nve-skeleton>\n  <nve-skeleton style=\"width: 80%\"></nve-skeleton>\n</div>`\n};\n\n/**\n * @summary Skeleton loading effects including pulse and shimmer animations. Use pulse for subtle breathing motion or shimmer for a scanning highlight that conveys active content loading.\n */\nexport const Effect = {\n  render: () => html`\n<div nve-layout=\"column gap:xs align:stretch\">\n  <nve-skeleton></nve-skeleton>\n  <nve-skeleton effect=\"pulse\"></nve-skeleton>\n  <nve-skeleton effect=\"shimmer\"></nve-skeleton>\n</div>`\n}\n\n/**\n * @summary Skeleton shape variants including default rectangle, pill, and round. Use pill for button or tag placeholders and round for avatar or icon placeholders to match the final content shape.\n * @tags theme\n */\nexport const Shape = {\n  render: () => html`\n<div nve-layout=\"column gap:xs align:stretch\">\n  <nve-skeleton></nve-skeleton>\n  <nve-skeleton shape=\"pill\"></nve-skeleton>\n  <nve-skeleton shape=\"round\" style=\"width: 40px; height: 40px;\"></nve-skeleton>\n</div>`\n}\n\n/**\n * @summary Skeleton with slotted content that automatically hides the placeholder when real content arrives. Use to wrap lazy-loaded content so the skeleton disappears once data loads without manual state management.\n */\nexport const Slotted = {\n  render: () => html`\n<div nve-layout=\"column gap:xs align:stretch\">\n  <nve-skeleton></nve-skeleton>\n  <nve-skeleton effect=\"shimmer\">slotting content will hide the skeleton</nve-skeleton>\n  <nve-skeleton effect=\"shimmer\">  </nve-skeleton>\n</div>`\n}\n"],"mappings":";AAGA,IAAAA,IAAS"}

package/dist/skeleton/skeleton.js

@@ -1,6 +1,5 @@
-//#region src/skeleton/skeleton.css?inline
+// src/skeleton/skeleton.css?inline
 var e = ":host{--background: var(--nve-sys-layer-container-background);--min-height: var(--nve-ref-size-400);--border-radius: var(--nve-ref-border-radius-xs);display:block;width:100%;height:100%;position:relative}[internal-host]{background:var(--background);min-height:var(--min-height);border-radius:var(--border-radius);height:100%;width:100%}:host([shape=\"round\"]){--border-radius: var(--nve-ref-border-radius-full)}:host([shape=\"pill\"]){--border-radius: var(--nve-ref-border-radius-lg)}:host([effect=\"shimmer\"]) [internal-host]{animation:shimmer calc(var(--nve-ref-animation-duration-400) * 4);animation-iteration-count:infinite;background:linear-gradient(to right,var(--background) 5%,color-mix(in srgb,var(--background),var(--nve-sys-interaction-state-mix) 5%) 25%,var(--background) 35%);background-size:1000px 100%}@keyframes shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}:host([effect=\"pulse\"]) [internal-host]{animation:calc(var(--nve-ref-animation-duration-400) * 2) ease-in-out var(--nve-ref-animation-duration-300) infinite normal none running pulse}@keyframes pulse{0%{opacity:1}50%{opacity:var(--nve-ref-opacity-500)}to{opacity:1}}:host(:state(slotted)){display:contents}:host(:state(slotted)) [internal-host]{display:contents;background:none;min-height:0;animation:none}:host(:state(slotted)) .animate{display:none}";
-//#endregion
 export { e as default };
 
 //# sourceMappingURL=skeleton.js.map

package/dist/skeleton/skeleton.js.map

@@ -1 +1 @@
-{"version":3,"file":"skeleton.js","names":[],"sources":["../../src/skeleton/skeleton.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-sys-layer-container-background);\n  --min-height: var(--nve-ref-size-400);\n  --border-radius: var(--nve-ref-border-radius-xs);\n  display: block;\n  width: 100%;\n  height: 100%;\n  position: relative;\n}\n\n[internal-host] {\n  background: var(--background);\n  min-height: var(--min-height);\n  border-radius: var(--border-radius);\n  height: 100%;\n  width: 100%;\n}\n\n:host([shape='round']) {\n  --border-radius: var(--nve-ref-border-radius-full);\n}\n\n:host([shape='pill']) {\n  --border-radius: var(--nve-ref-border-radius-lg);\n}\n\n:host([effect='shimmer']) [internal-host] {\n  animation: shimmer calc(var(--nve-ref-animation-duration-400) * 4);\n  animation-iteration-count: infinite;\n  background: linear-gradient(\n    to right,\n    var(--background) 5%,\n    color-mix(in srgb, var(--background), var(--nve-sys-interaction-state-mix) 5%) 25%,\n    var(--background) 35%\n  );\n  background-size: 1000px 100%;\n}\n\n@keyframes shimmer {\n  from {\n    background-position: -1000px 0;\n  }\n\n  to {\n    background-position: 1000px 0;\n  }\n}\n\n:host([effect='pulse']) [internal-host] {\n  animation: calc(var(--nve-ref-animation-duration-400) * 2) ease-in-out var(--nve-ref-animation-duration-300) infinite\n    normal none running pulse;\n}\n\n@keyframes pulse {\n  0% {\n    opacity: 1;\n  }\n\n  50% {\n    opacity: var(--nve-ref-opacity-500);\n  }\n\n  100% {\n    opacity: 1;\n  }\n}\n\n/* if slotted content is provided hide the skeleton */\n:host(:state(slotted)) {\n  display: contents;\n}\n\n:host(:state(slotted)) [internal-host] {\n  display: contents;\n  background: none;\n  min-height: 0;\n  animation: none;\n}\n\n:host(:state(slotted)) .animate {\n  display: none;\n}\n"],"mappings":""}
+{"version":3,"file":"skeleton.js","names":["skeleton_default"],"sources":["../../src/skeleton/skeleton.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-sys-layer-container-background);\n  --min-height: var(--nve-ref-size-400);\n  --border-radius: var(--nve-ref-border-radius-xs);\n  display: block;\n  width: 100%;\n  height: 100%;\n  position: relative;\n}\n\n[internal-host] {\n  background: var(--background);\n  min-height: var(--min-height);\n  border-radius: var(--border-radius);\n  height: 100%;\n  width: 100%;\n}\n\n:host([shape='round']) {\n  --border-radius: var(--nve-ref-border-radius-full);\n}\n\n:host([shape='pill']) {\n  --border-radius: var(--nve-ref-border-radius-lg);\n}\n\n:host([effect='shimmer']) [internal-host] {\n  animation: shimmer calc(var(--nve-ref-animation-duration-400) * 4);\n  animation-iteration-count: infinite;\n  background: linear-gradient(\n    to right,\n    var(--background) 5%,\n    color-mix(in srgb, var(--background), var(--nve-sys-interaction-state-mix) 5%) 25%,\n    var(--background) 35%\n  );\n  background-size: 1000px 100%;\n}\n\n@keyframes shimmer {\n  from {\n    background-position: -1000px 0;\n  }\n\n  to {\n    background-position: 1000px 0;\n  }\n}\n\n:host([effect='pulse']) [internal-host] {\n  animation: calc(var(--nve-ref-animation-duration-400) * 2) ease-in-out var(--nve-ref-animation-duration-300) infinite\n    normal none running pulse;\n}\n\n@keyframes pulse {\n  0% {\n    opacity: 1;\n  }\n\n  50% {\n    opacity: var(--nve-ref-opacity-500);\n  }\n\n  100% {\n    opacity: 1;\n  }\n}\n\n/* if slotted content is provided hide the skeleton */\n:host(:state(slotted)) {\n  display: contents;\n}\n\n:host(:state(slotted)) [internal-host] {\n  display: contents;\n  background: none;\n  min-height: 0;\n  animation: none;\n}\n\n:host(:state(slotted)) .animate {\n  display: none;\n}\n"],"mappings":""}

package/dist/skeleton/skeleton2.js

@@ -1,10 +1,10 @@
 import { attachInternals as e } from "../internal/utils/a11y.js";
 import { useStyles as t } from "../internal/styles/index.js";
-import n from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js";
+import n from "../_virtual/_@oxc-project_runtime@0.155.0/helpers/esm/decorate.js";
 import r from "./skeleton.js";
 import { LitElement as i, html as a } from "lit";
 import { property as o } from "lit/decorators/property.js";
-//#region src/skeleton/skeleton.ts
+// src/skeleton/skeleton.ts
 var s = class extends i {
 	constructor(...e) {
 		super(...e), this.hidden = !1;
@@ -15,7 +15,7 @@ var s = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-skeleton",
-			version: "2.20.1"
+			version: "2.20.2"
 		};
 	}
 	render() {
@@ -41,7 +41,6 @@ n([o({
 	type: Boolean,
 	reflect: !0
 })], s.prototype, "hidden", void 0);
-//#endregion
 export { s as Skeleton };
 
 //# sourceMappingURL=skeleton2.js.map

package/dist/skeleton/skeleton2.js.map

@@ -1 +1 @@
-{"version":3,"file":"skeleton2.js","names":[],"sources":["../../src/skeleton/skeleton.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, LitElement, type PropertyValues } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { attachInternals, useStyles } from '@nvidia-elements/core/internal';\nimport styles from './skeleton.css?inline';\n\n/**\n * @element nve-skeleton\n * @description A loading placeholder component that displays animated placeholder shapes while content loads.\n * @documentation https://nvidia.github.io/elements/docs/elements/skeleton/\n * @since 1.44.0\n * @entrypoint \\@nvidia-elements/core/skeleton\n * @slot - Loaded content that replaces the placeholder when provided.\n * @cssprop --background\n * @cssprop --border-radius\n * @cssprop --min-height\n * @aria https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-live\n */\nexport class Skeleton extends LitElement {\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-skeleton',\n    version: '0.0.0'\n  };\n\n  /** Visual animation style shown while content loads. */\n  @property({ type: String, reflect: true }) effect: 'shimmer' | 'pulse';\n\n  /** Geometry of the placeholder — rounded corners or a full pill outline. */\n  @property({ type: String, reflect: true }) shape: 'round' | 'pill';\n\n  /** Hides the skeleton host when `true` and sets `aria-busy` to the inverse visibility state. */\n  @property({ type: Boolean, reflect: true }) hidden = false;\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  render() {\n    return html`\n      <div internal-host>\n        <div class=\"animate\"></div>\n        <slot @slotchange=${this.#slotchange}></slot>\n      </div>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    this._internals.ariaBusy = 'true';\n  }\n\n  updated(props: PropertyValues<this>) {\n    super.updated(props);\n    this._internals.ariaBusy = `${!this.hidden}`;\n  }\n\n  #slotchange(event: Event) {\n    const target = event.target as HTMLSlotElement;\n    const hasContent = target\n      .assignedNodes()\n      .some(\n        node =>\n          node.nodeType === Node.ELEMENT_NODE || (node.nodeType === Node.TEXT_NODE && node.textContent?.trim() !== '')\n      );\n\n    if (hasContent) {\n      this._internals.states.add('slotted');\n    } else {\n      this._internals.states.delete('slotted');\n    }\n  }\n}\n"],"mappings":";;;;;;;AAoBA,IAAa,IAAb,cAA8B,EAAW;;EAec,aAAA,KAAA,SAAA;;;EAdrC,KAAA,SAAA,EAAU,CAAC,CAAM,CAAC;;;EAEP,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;EACX;;CAcA,SAAS;EACP,OAAO,CAAI,oEAGa,KAAK,GAAY;CAG3C;CAEA,oBAAoB;EAGlB,AAFA,MAAM,kBAAkB,GACxB,EAAgB,IAAI,GACpB,KAAK,WAAW,WAAW;CAC7B;CAEA,QAAQ,GAA6B;EAEnC,AADA,MAAM,QAAQ,CAAK,GACnB,KAAK,WAAW,WAAW,GAAG,CAAC,KAAK;CACtC;CAEA,GAAY,GAAc;EASxB,AARe,EAAM,OAElB,cAAc,CAAC,CACf,MACC,MACE,EAAK,aAAa,KAAK,gBAAiB,EAAK,aAAa,KAAK,aAAa,EAAK,aAAa,KAAK,MAAM,EAG3G,IACF,KAAK,WAAW,OAAO,IAAI,SAAS,IAEpC,KAAK,WAAW,OAAO,OAAO,SAAS;CAE3C;AACF;AA9CG,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,UAAA,KAAA,CAAA,GAGxC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,GAGxC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,UAAA,KAAA,CAAA"}
+{"version":3,"file":"skeleton2.js","names":["styles","_decorate","__decorate","skeleton_default","Skeleton","LitElement","_args","useStyles","#slotchange","attachInternals","props","event","node","property"],"sources":["../../src/skeleton/skeleton.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, LitElement, type PropertyValues } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { attachInternals, useStyles } from '@nvidia-elements/core/internal';\nimport styles from './skeleton.css?inline';\n\n/**\n * @element nve-skeleton\n * @description A loading placeholder component that displays animated placeholder shapes while content loads.\n * @documentation https://nvidia.github.io/elements/docs/elements/skeleton/\n * @since 1.44.0\n * @entrypoint \\@nvidia-elements/core/skeleton\n * @slot - Loaded content that replaces the placeholder when provided.\n * @cssprop --background\n * @cssprop --border-radius\n * @cssprop --min-height\n * @aria https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-live\n */\nexport class Skeleton extends LitElement {\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-skeleton',\n    version: '0.0.0'\n  };\n\n  /** Visual animation style shown while content loads. */\n  @property({ type: String, reflect: true }) effect: 'shimmer' | 'pulse';\n\n  /** Geometry of the placeholder — rounded corners or a full pill outline. */\n  @property({ type: String, reflect: true }) shape: 'round' | 'pill';\n\n  /** Hides the skeleton host when `true` and sets `aria-busy` to the inverse visibility state. */\n  @property({ type: Boolean, reflect: true }) hidden = false;\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  render() {\n    return html`\n      <div internal-host>\n        <div class=\"animate\"></div>\n        <slot @slotchange=${this.#slotchange}></slot>\n      </div>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    this._internals.ariaBusy = 'true';\n  }\n\n  updated(props: PropertyValues<this>) {\n    super.updated(props);\n    this._internals.ariaBusy = `${!this.hidden}`;\n  }\n\n  #slotchange(event: Event) {\n    const target = event.target as HTMLSlotElement;\n    const hasContent = target\n      .assignedNodes()\n      .some(\n        node =>\n          node.nodeType === Node.ELEMENT_NODE || (node.nodeType === Node.TEXT_NODE && node.textContent?.trim() !== '')\n      );\n\n    if (hasContent) {\n      this._internals.states.add('slotted');\n    } else {\n      this._internals.states.delete('slotted');\n    }\n  }\n}\n"],"mappings":";;;;;;;AAoBA,IAAaI,IAAb,cAA8BC,EAAW;;EAec,A,aAAA,KAAA,SAAA;;;EAdrC,KAAA,SAAAE,EAAU,CAACP,CAAM,CAAC;;;EAEP,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;EACX;;CAcA,SAAS;EACP,OAAO,CAAI,oEAGa,KAAKQ,GAAY;CAG3C;CAEA,oBAAoB;EAGlB,AAFA,MAAM,kBAAkB,GACxBC,EAAgB,IAAI,GACpB,KAAK,WAAW,WAAW;CAC7B;CAEA,QAAQ,GAA6B;EAEnC,AADA,MAAM,QAAQC,CAAK,GACnB,KAAK,WAAW,WAAW,GAAG,CAAC,KAAK;CACtC;CAEA,GAAY,GAAc;EASxB,AAReC,EAAM,OAElB,cAAc,CAAC,CACf,MACC,MACEC,EAAK,aAAa,KAAK,gBAAiBA,EAAK,aAAa,KAAK,aAAaA,EAAK,aAAa,KAAK,MAAM,EAG3G,IACF,KAAK,WAAW,OAAO,IAAI,SAAS,IAEpC,KAAK,WAAW,OAAO,OAAO,SAAS;CAE3C;AACF;AA9CGX,EAAA,CAAAY,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAAT,EAAA,WAAA,UAAA,KAAA,CAAA,GAGxCH,EAAA,CAAAY,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAAT,EAAA,WAAA,SAAA,KAAA,CAAA,GAGxCH,EAAA,CAAAY,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAAT,EAAA,WAAA,UAAA,KAAA,CAAA"}

package/dist/sort-button/define.js

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

package/dist/sort-button/define.js.map

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

package/dist/sort-button/index.js

@@ -1,2 +1 @@
-import { SortButton as e } from "./sort-button2.js";
-export { e as SortButton };
+export { SortButton } from "./sort-button2.js";

package/dist/sort-button/sort-button.examples.js

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

package/dist/sort-button/sort-button.examples.js.map

@@ -1 +1 @@
-{"version":3,"file":"sort-button.examples.js","names":[],"sources":["../../src/sort-button/sort-button.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/sort-button/define.js';\n\nexport default {\n  title: 'Elements/Sort Button',\n  component: 'nve-sort-button',\n};\n\n/**\n * @summary Basic sort button in its default unsorted state for column header sorting controls.\n */\nexport const Default = {\n  render: () => html`\n<nve-sort-button></nve-sort-button>`\n};\n\n/**\n * @summary Sort button states (unsorted, ascending, descending) displayed on light theme background.\n * @tags test-case\n */\nexport const LightTheme = {\n  render: () => html`\n<div nve-theme=\"root light\" nve-layout=\"row gap:md pad:md align:wrap\">\n  <nve-sort-button></nve-sort-button>\n  <nve-sort-button sort=\"ascending\"></nve-sort-button>\n  <nve-sort-button sort=\"descending\"></nve-sort-button>\n</div>\n  `\n}\n\n/**\n * @summary Sort button states (unsorted, ascending, descending) displayed on dark theme background.\n * @tags test-case\n */\nexport const DarkTheme = {\n  render: () => html`\n<div nve-theme=\"root dark\" nve-layout=\"row gap:md pad:md align:wrap\">\n  <nve-sort-button></nve-sort-button>\n  <nve-sort-button sort=\"ascending\"></nve-sort-button>\n  <nve-sort-button sort=\"descending\"></nve-sort-button>\n</div>\n  `\n}"],"mappings":";AAGA,IAAA,IAAS"}
+{"version":3,"file":"sort-button.examples.js","names":["sort_button_examples_default"],"sources":["../../src/sort-button/sort-button.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/sort-button/define.js';\n\nexport default {\n  title: 'Elements/Sort Button',\n  component: 'nve-sort-button',\n};\n\n/**\n * @summary Basic sort button in its default unsorted state for column header sorting controls.\n */\nexport const Default = {\n  render: () => html`\n<nve-sort-button></nve-sort-button>`\n};\n\n/**\n * @summary Sort button states (unsorted, ascending, descending) displayed on light theme background.\n * @tags test-case\n */\nexport const LightTheme = {\n  render: () => html`\n<div nve-theme=\"root light\" nve-layout=\"row gap:md pad:md align:wrap\">\n  <nve-sort-button></nve-sort-button>\n  <nve-sort-button sort=\"ascending\"></nve-sort-button>\n  <nve-sort-button sort=\"descending\"></nve-sort-button>\n</div>\n  `\n}\n\n/**\n * @summary Sort button states (unsorted, ascending, descending) displayed on dark theme background.\n * @tags test-case\n */\nexport const DarkTheme = {\n  render: () => html`\n<div nve-theme=\"root dark\" nve-layout=\"row gap:md pad:md align:wrap\">\n  <nve-sort-button></nve-sort-button>\n  <nve-sort-button sort=\"ascending\"></nve-sort-button>\n  <nve-sort-button sort=\"descending\"></nve-sort-button>\n</div>\n  `\n}"],"mappings":";AAGA,IAAAA,IAAS"}

package/dist/sort-button/sort-button.js

@@ -1,6 +1,5 @@
-//#region src/sort-button/sort-button.css?inline
+// src/sort-button/sort-button.css?inline
 var e = ":host{--width: var(--nve-ref-size-800);--height: var(--nve-ref-size-800);--border-radius: var(--nve-ref-border-radius-full)}[internal-host]{width:var(--width);height:var(--height);border-radius:var(--border-radius);background:transparent;border:0;display:flex;flex-direction:column;cursor:pointer;place-items:center;place-content:center;padding:0;position:relative;outline:0;overflow:hidden}nve-icon{--color: var(--nve-sys-text-placeholder-color);cursor:pointer}:host([sort=\"ascending\"]) nve-icon,:host([sort=\"descending\"]) nve-icon{--color: var(--nve-sys-text-emphasis-color)}";
-//#endregion
 export { e as default };
 
 //# sourceMappingURL=sort-button.js.map

package/dist/sort-button/sort-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"sort-button.js","names":[],"sources":["../../src/sort-button/sort-button.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: var(--nve-ref-size-800);\n  --height: var(--nve-ref-size-800);\n  --border-radius: var(--nve-ref-border-radius-full);\n}\n\n[internal-host] {\n  width: var(--width);\n  height: var(--height);\n  border-radius: var(--border-radius);\n  background: transparent;\n  border: 0;\n  display: flex;\n  flex-direction: column;\n  cursor: pointer;\n  place-items: center;\n  place-content: center;\n  padding: 0;\n  position: relative;\n  outline: 0;\n  overflow: hidden;\n}\n\nnve-icon {\n  --color: var(--nve-sys-text-placeholder-color);\n  cursor: pointer;\n}\n\n:host([sort='ascending']) nve-icon,\n:host([sort='descending']) nve-icon {\n  --color: var(--nve-sys-text-emphasis-color);\n}\n"],"mappings":""}
+{"version":3,"file":"sort-button.js","names":["sort_button_default"],"sources":["../../src/sort-button/sort-button.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: var(--nve-ref-size-800);\n  --height: var(--nve-ref-size-800);\n  --border-radius: var(--nve-ref-border-radius-full);\n}\n\n[internal-host] {\n  width: var(--width);\n  height: var(--height);\n  border-radius: var(--border-radius);\n  background: transparent;\n  border: 0;\n  display: flex;\n  flex-direction: column;\n  cursor: pointer;\n  place-items: center;\n  place-content: center;\n  padding: 0;\n  position: relative;\n  outline: 0;\n  overflow: hidden;\n}\n\nnve-icon {\n  --color: var(--nve-sys-text-placeholder-color);\n  cursor: pointer;\n}\n\n:host([sort='ascending']) nve-icon,\n:host([sort='descending']) nve-icon {\n  --color: var(--nve-sys-text-emphasis-color);\n}\n"],"mappings":""}

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

@@ -1,13 +1,13 @@
 import { scopedRegistry as e } from "../internal/decorators/scoped-registry.js";
 import { useStyles as t } from "../internal/styles/index.js";
-import n from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js";
+import n from "../_virtual/_@oxc-project_runtime@0.155.0/helpers/esm/decorate.js";
 import { Icon as r } from "../icon/icon2.js";
 import i from "./sort-button.js";
 import { LitElement as a, html as o } from "lit";
 import { property as s } from "lit/decorators/property.js";
 import { I18nController as c } from "@nvidia-elements/foundations/internal/i18n";
 import { ButtonFormControlMixin as l } from "@nvidia-elements/forms/mixins";
-//#region src/sort-button/sort-button.ts
+// src/sort-button/sort-button.ts
 var u = { sort: "sort" }, d = {
 	none: "ascending",
 	ascending: "descending",
@@ -19,7 +19,7 @@ var u = { sort: "sort" }, d = {
 	static {
 		this.metadata = {
 			tag: "nve-sort-button",
-			version: "2.20.1"
+			version: "2.20.2"
 		};
 	}
 	static {
@@ -53,7 +53,6 @@ n([s({
 	type: String,
 	reflect: !0
 })], f.prototype, "sort", void 0), n([s({ type: Object })], f.prototype, "i18n", void 0), f = n([e()], f);
-//#endregion
 export { f as SortButton };
 
 //# sourceMappingURL=sort-button2.js.map

package/dist/sort-button/sort-button2.js.map

@@ -1 +1 @@
-{"version":3,"file":"sort-button2.js","names":[],"sources":["../../src/sort-button/sort-button.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { ButtonFormControlMixin } from '@nvidia-elements/forms/mixins';\nimport { Icon } from '@nvidia-elements/core/icon';\nimport { useStyles, scopedRegistry } from '@nvidia-elements/core/internal';\nimport { I18nController, type I18nDefaults } from '@nvidia-elements/foundations/internal/i18n';\nimport styles from './sort-button.css?inline';\n\nconst i18nDefaults = {\n  sort: 'sort'\n} satisfies I18nDefaults;\n\nconst nextSort = {\n  none: 'ascending',\n  ascending: 'descending',\n  descending: 'none'\n};\n\n/**\n * @element nve-sort-button\n * @description A sort button is a control that enables users to sort a list of items in ascending or descending order.\n * @documentation https://nvidia.github.io/elements/docs/elements/sort-button/\n * @since 0.11.0\n * @entrypoint \\@nvidia-elements/core/sort-button\n * @event sort - Dispatched on activation with `detail: { value, next }`, where `value` is the current sort and `next` follows the cycle `none` → `ascending` → `descending` → `none`.\n * @cssprop --width\n * @cssprop --height\n * @cssprop --border-radius\n * @cssprop --color\n * @csspart icon - The icon element\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/spinbutton/\n */\n@scopedRegistry()\nexport class SortButton extends ButtonFormControlMixin(LitElement) {\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-sort-button',\n    version: '0.0.0'\n  };\n\n  static elementDefinitions = {\n    [Icon.metadata.tag]: Icon\n  };\n\n  /**\n   * The current sort value, can be ascending, descending, or none.\n   */\n  @property({ type: String, reflect: true }) sort: 'ascending' | 'descending' | 'none' = 'none';\n\n  #i18nController: I18nController<this> = new I18nController<this>(this, i18nDefaults);\n\n  /**\n   * Updates internal string values for internationalization.\n   */\n  @property({ type: Object }) i18n = this.#i18nController.i18n;\n\n  render() {\n    return html`\n      <div internal-host focus-within>\n        <nve-icon part=\"icon\" .name=${this.sort === 'descending' ? 'sort-descending' : 'sort-ascending'} aria-hidden=\"true\"></nve-icon>\n      </div>\n    `;\n  }\n\n  constructor() {\n    super();\n    this.type = 'button';\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this._internals.role = 'spinbutton';\n    this.addEventListener('click', this.#onClick);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener('click', this.#onClick);\n  }\n\n  #onClick = () => {\n    this._internals.ariaLabel = `${this.#i18nController.i18n.sort} ${nextSort[this.sort]}`;\n    this.dispatchEvent(\n      new CustomEvent('sort', {\n        detail: { value: this.sort, next: nextSort[this.sort] },\n        bubbles: true,\n        composed: true\n      })\n    );\n  };\n}\n"],"mappings":";;;;;;;;;;AAWA,IAAM,IAAe,EACnB,MAAM,OACR,GAEM,IAAW;CACf,MAAM;CACN,WAAW;CACX,YAAY;AACd,GAiBa,IAAN,cAAyB,EAAuB,CAAU,CAAC,CAAC;;EACjD,KAAA,SAAA,EAAU,CAAC,CAAM,CAAC;;;EAEP,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;EACX;;;EAE4B,KAAA,qBAAA,GACzB,EAAK,SAAS,MAAM,EACvB;;CAOA;CAOA,SAAS;EACP,OAAO,CAAI,gEAEuB,KAAK,SAAS,eAAe,oBAAoB,iBAAiB;CAGtG;CAEA,cAAc;EAEZ,AADA,MAAM,GAlB+E,KAAA,OAAA,QAE/C,KAAA,KAAA,IAAI,EAAqB,MAAM,CAAY,GAKhD,KAAA,OAAA,KAAK,GAAgB,MA0BvC,KAAA,WAAA;GAEf,AADA,KAAK,WAAW,YAAY,GAAG,KAAK,GAAgB,KAAK,KAAK,GAAG,EAAS,KAAK,SAC/E,KAAK,cACH,IAAI,YAAY,QAAQ;IACtB,QAAQ;KAAE,OAAO,KAAK;KAAM,MAAM,EAAS,KAAK;IAAM;IACtD,SAAS;IACT,UAAU;GACZ,CAAC,CACH;EACF,GAvBE,KAAK,OAAO;CACd;CAEA,oBAAoB;EAGlB,AAFA,MAAM,kBAAkB,GACxB,KAAK,WAAW,OAAO,cACvB,KAAK,iBAAiB,SAAS,KAAK,EAAQ;CAC9C;CAEA,uBAAuB;EAErB,AADA,MAAM,qBAAqB,GAC3B,KAAK,oBAAoB,SAAS,KAAK,EAAQ;CACjD;CAEA;AAUF;AA3CG,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,GAOxC,EAAA,CAAA,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,GAvB3B,IAAA,EAAA,CAAA,EAAe,CAAA,GAAA,CAAA"}
+{"version":3,"file":"sort-button2.js","names":["styles","_decorate","__decorate","sort_button_default","i18nDefaults","nextSort","SortButton","ButtonFormControlMixin","LitElement","useStyles","Icon","#i18nController","I18nController","#onClick","property","scopedRegistry"],"sources":["../../src/sort-button/sort-button.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { ButtonFormControlMixin } from '@nvidia-elements/forms/mixins';\nimport { Icon } from '@nvidia-elements/core/icon';\nimport { useStyles, scopedRegistry } from '@nvidia-elements/core/internal';\nimport { I18nController, type I18nDefaults } from '@nvidia-elements/foundations/internal/i18n';\nimport styles from './sort-button.css?inline';\n\nconst i18nDefaults = {\n  sort: 'sort'\n} satisfies I18nDefaults;\n\nconst nextSort = {\n  none: 'ascending',\n  ascending: 'descending',\n  descending: 'none'\n};\n\n/**\n * @element nve-sort-button\n * @description A sort button is a control that enables users to sort a list of items in ascending or descending order.\n * @documentation https://nvidia.github.io/elements/docs/elements/sort-button/\n * @since 0.11.0\n * @entrypoint \\@nvidia-elements/core/sort-button\n * @event sort - Dispatched on activation with `detail: { value, next }`, where `value` is the current sort and `next` follows the cycle `none` → `ascending` → `descending` → `none`.\n * @cssprop --width\n * @cssprop --height\n * @cssprop --border-radius\n * @cssprop --color\n * @csspart icon - The icon element\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/spinbutton/\n */\n@scopedRegistry()\nexport class SortButton extends ButtonFormControlMixin(LitElement) {\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-sort-button',\n    version: '0.0.0'\n  };\n\n  static elementDefinitions = {\n    [Icon.metadata.tag]: Icon\n  };\n\n  /**\n   * The current sort value, can be ascending, descending, or none.\n   */\n  @property({ type: String, reflect: true }) sort: 'ascending' | 'descending' | 'none' = 'none';\n\n  #i18nController: I18nController<this> = new I18nController<this>(this, i18nDefaults);\n\n  /**\n   * Updates internal string values for internationalization.\n   */\n  @property({ type: Object }) i18n = this.#i18nController.i18n;\n\n  render() {\n    return html`\n      <div internal-host focus-within>\n        <nve-icon part=\"icon\" .name=${this.sort === 'descending' ? 'sort-descending' : 'sort-ascending'} aria-hidden=\"true\"></nve-icon>\n      </div>\n    `;\n  }\n\n  constructor() {\n    super();\n    this.type = 'button';\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this._internals.role = 'spinbutton';\n    this.addEventListener('click', this.#onClick);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener('click', this.#onClick);\n  }\n\n  #onClick = () => {\n    this._internals.ariaLabel = `${this.#i18nController.i18n.sort} ${nextSort[this.sort]}`;\n    this.dispatchEvent(\n      new CustomEvent('sort', {\n        detail: { value: this.sort, next: nextSort[this.sort] },\n        bubbles: true,\n        composed: true\n      })\n    );\n  };\n}\n"],"mappings":";;;;;;;;;;AAWA,IAAMI,IAAe,EACnB,MAAM,OACR,GAEMC,IAAW;CACf,MAAM;CACN,WAAW;CACX,YAAY;AACd,GAiBaC,IAAN,cAAyBC,EAAuBC,CAAU,CAAC,CAAC;;EACjD,KAAA,SAAAC,EAAU,CAACT,CAAM,CAAC;;;EAEP,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;EACX;;;EAE4B,KAAA,qBAAA,GACzBU,EAAK,SAAS,MAAMA,EACvB;;CAOA;CAOA,SAAS;EACP,OAAO,CAAI,gEAEuB,KAAK,SAAS,eAAe,oBAAoB,iBAAiB;CAGtG;CAEA,cAAc;EAEZ,AADA,MAAM,GAlB+E,KAAA,OAAA,QAE/C,KAAAC,KAAA,IAAIC,EAAqB,MAAMR,CAAY,GAKhD,KAAA,OAAA,KAAKO,GAAgB,MA0BvC,KAAAE,WAAA;GAEf,AADA,KAAK,WAAW,YAAY,GAAG,KAAKF,GAAgB,KAAK,KAAK,GAAGN,EAAS,KAAK,SAC/E,KAAK,cACH,IAAI,YAAY,QAAQ;IACtB,QAAQ;KAAE,OAAO,KAAK;KAAM,MAAMA,EAAS,KAAK;IAAM;IACtD,SAAS;IACT,UAAU;GACZ,CAAC,CACH;EACF,GAvBE,KAAK,OAAO;CACd;CAEA,oBAAoB;EAGlB,AAFA,MAAM,kBAAkB,GACxB,KAAK,WAAW,OAAO,cACvB,KAAK,iBAAiB,SAAS,KAAKQ,EAAQ;CAC9C;CAEA,uBAAuB;EAErB,AADA,MAAM,qBAAqB,GAC3B,KAAK,oBAAoB,SAAS,KAAKA,EAAQ;CACjD;CAEA;AAUF;AA3CGZ,EAAA,CAAAa,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAAR,EAAA,WAAA,QAAA,KAAA,CAAA,GAOxCL,EAAA,CAAAa,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAAR,EAAA,WAAA,QAAA,KAAA,CAAA,GAvB3B,IAAAL,EAAA,CAAAc,EAAe,CAAA,GAAAT,CAAA"}

package/dist/sparkline/define.js

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

package/dist/sparkline/define.js.map

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

package/dist/sparkline/index.js

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

package/dist/sparkline/sparkline.examples.js

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

package/dist/sparkline/sparkline.examples.js.map

@@ -1 +1 @@
-{"version":3,"file":"sparkline.examples.js","names":[],"sources":["../../src/sparkline/sparkline.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/sparkline/define.js';\nimport '@nvidia-elements/core/grid/define.js';\nimport '@nvidia-elements/core/range/define.js';\n\nexport default {\n  title: 'Elements/Sparkline',\n  component: 'nve-sparkline',\n};\n\n/**\n * @summary Basic sparkline from numeric array values. Use as a compact trend indicator.\n */\nexport const Default = {\n  render: () => html`\n    <nve-sparkline id=\"default\"></nve-sparkline>\n    <script type=\"module\">\n      const sparkline = document.querySelector('nve-sparkline#default');\n      sparkline.data = [18, 22, 20, 24, 19, 28, 25, 30];\n    </script>\n  `\n};\n\n/**\n * @summary Mark variants include line, area, gradient, column, and winloss to support trend and outcome signals.\n */\nexport const Marks = {\n  render: () => html`\n    <div nve-layout=\"row gap:md\">\n      <nve-sparkline data=\"[14, 18, 17, 20, 19, 24, 21]\"></nve-sparkline>\n      <nve-sparkline mark=\"area\" data=\"[14, 18, 17, 20, 19, 24, 21]\"></nve-sparkline>\n      <nve-sparkline mark=\"gradient\" data=\"[14, 18, 17, 20, 19, 24, 21]\"></nve-sparkline>\n      <nve-sparkline mark=\"column\" data=\"[6, 10, 8, 16, 13, 18, 15]\"></nve-sparkline>\n      <nve-sparkline mark=\"winloss\" data=\"[5, -3, 2, -1, 4, 0, 3]\"></nve-sparkline>\n    </div>\n  `\n};\n\n/**\n * @summary Semantic statuses apply task, support, and trend color mappings.\n */\nexport const Status = {\n  render: () => html`\n    <div nve-layout=\"row gap:md\">\n      <nve-sparkline status=\"accent\" mark=\"area\" data=\"[3, 2, 10, 8, 4, 6, 9]\"></nve-sparkline>\n      <nve-sparkline status=\"danger\" mark=\"area\" data=\"[15, 14, 12, 9, 8, 7, 5]\"></nve-sparkline>\n      <nve-sparkline status=\"warning\" mark=\"area\" data=\"[8, 9, 7, 10, 9, 8, 9]\"></nve-sparkline>\n      <nve-sparkline status=\"success\" mark=\"area\" data=\"[5, 7, 8, 9, 12, 14, 15]\"></nve-sparkline>\n    </div>\n  `\n};\n\n/**\n * @summary Sparklines inherit font size and flow inline with surrounding text and metrics.\n */\nexport const InlineWithText = {\n  render: () => html`\n    <div nve-layout=\"column gap:lg\">\n      <p nve-text=\"body loose\">\n        This week's lane keeping safety score trend \n        <nve-sparkline\n          mark=\"area\"\n          status=\"success\"\n          data=\"[86, 87, 86, 88, 89, 90, 92, 93]\"\n          aria-label=\"lane keeping safety score trend\"></nve-sparkline>\n        shows a steady rise after an early dip, with decreasing interventions per shift: \n        <nve-sparkline\n          mark=\"column\"\n          status=\"accent\"\n          data=\"[16, 14, 15, 13, 12, 11, 10]\"\n          aria-label=\"lane keeping interventions per shift\"></nve-sparkline>, \n        and predominantly successful route outcomes: \n        <nve-sparkline\n          mark=\"winloss\"\n          status=\"success\"\n          data=\"[1, 1, -1, 1, 0, 1, 1]\"\n          aria-label=\"lane keeping route outcomes\"></nve-sparkline>.\n      </p>\n    </div>\n  `\n};\n\n/**\n * @summary Embed sparklines in grid cells to add compact trend context to tabular data.\n */\nexport const DataGrid = {\n  render: () => html`\n    <nve-grid>\n      <nve-grid-header>\n        <nve-grid-column>Autonomy Service</nve-grid-column>\n        <nve-grid-column>Safety Score</nve-grid-column>\n        <nve-grid-column>Interventions / Shift</nve-grid-column>\n        <nve-grid-column>Route Outcome</nve-grid-column>\n      </nve-grid-header>\n      <nve-grid-row>\n        <nve-grid-cell>Lane Keeping</nve-grid-cell>\n        <nve-grid-cell>\n          <nve-sparkline\n            aria-label=\"Lane Keeping 30 day safety score trend\"\n            mark=\"area\"\n            status=\"success\"\n            min=\"0\"\n            max=\"100\"\n            data=\"[86, 87, 86, 88, 89, 90, 92, 93]\"\n            size=\"md\"></nve-sparkline>\n        </nve-grid-cell>\n        <nve-grid-cell>\n          <nve-sparkline\n            aria-label=\"Lane Keeping interventions per shift\"\n            mark=\"column\"\n            status=\"success\"\n            min=\"0\"\n            max=\"50\"\n            data=\"[12, 11, 12, 10, 9, 8, 7, 6]\"\n            size=\"md\"></nve-sparkline>\n        </nve-grid-cell>\n        <nve-grid-cell>\n          <nve-sparkline\n            aria-label=\"Lane Keeping route outcomes\"\n            mark=\"winloss\"\n            data=\"[1, 1, 1, 0, 1, 0, 1, 1]\"\n            size=\"md\"></nve-sparkline>\n        </nve-grid-cell>\n      </nve-grid-row>\n      <nve-grid-row>\n        <nve-grid-cell>Object Detection</nve-grid-cell>\n        <nve-grid-cell>\n          <nve-sparkline\n            aria-label=\"Object Detection 30 day safety score trend\"\n            mark=\"area\"\n            status=\"warning\"\n            min=\"0\"\n            max=\"100\"\n            data=\"[76, 88, 72, 79, 85, 70, 83, 74]\"\n            size=\"md\"></nve-sparkline>\n        </nve-grid-cell>\n        <nve-grid-cell>\n          <nve-sparkline\n            aria-label=\"Object Detection interventions per shift\"\n            mark=\"column\"\n            status=\"warning\"\n            min=\"0\"\n            max=\"50\"\n            data=\"[18, 20, 17, 19, 20, 21, 19, 22]\"\n            size=\"md\"></nve-sparkline>\n        </nve-grid-cell>\n        <nve-grid-cell>\n          <nve-sparkline\n            aria-label=\"Object Detection route outcomes\"\n            mark=\"winloss\"\n            data=\"[1, 0, -1, 1, 0, -1, 0, 1]\"\n            size=\"md\"></nve-sparkline>\n        </nve-grid-cell>\n      </nve-grid-row>\n      <nve-grid-row>\n        <nve-grid-cell>Path Planning</nve-grid-cell>\n        <nve-grid-cell>\n          <nve-sparkline\n            aria-label=\"Path Planning 30 day safety score trend\"\n            mark=\"area\"\n            status=\"danger\"\n            min=\"0\"\n            max=\"100\"\n            data=\"[58, 54, 49, 45, 40, 36, 31, 27]\"\n            size=\"md\"></nve-sparkline>\n        </nve-grid-cell>\n        <nve-grid-cell>\n          <nve-sparkline\n            aria-label=\"Path Planning interventions per shift\"\n            mark=\"column\"\n            status=\"danger\"\n            min=\"0\"\n            max=\"50\"\n            data=\"[24, 26, 29, 31, 34, 36, 39, 42]\"\n            size=\"md\"></nve-sparkline>\n        </nve-grid-cell>\n        <nve-grid-cell>\n          <nve-sparkline\n            aria-label=\"Path Planning route outcomes\"\n            mark=\"winloss\"\n            data=\"[1, -1, 0, -1, -1, -1, 0, -1]\"\n            size=\"md\"></nve-sparkline>\n        </nve-grid-cell>\n      </nve-grid-row>\n    </nve-grid>\n  `\n};\n\n/**\n * @summary Explicit size tokens set fixed sparkline height independent of text context.\n */\nexport const ExplicitSize = {\n  render: () => html`\n    <div id=\"sparkline-sizes\" nve-layout=\"row gap:md\">\n      <nve-sparkline size=\"xs\"></nve-sparkline>\n      <nve-sparkline size=\"sm\"></nve-sparkline>\n      <nve-sparkline size=\"md\"></nve-sparkline>\n      <nve-sparkline size=\"lg\"></nve-sparkline>\n      <nve-sparkline size=\"xl\"></nve-sparkline>\n    </div>\n    <script type=\"module\">\n      const sparklines = document.querySelectorAll('#sparkline-sizes > nve-sparkline');\n      for (const sparkline of sparklines) {\n        sparkline.data = [9, 12, 11, 13, 15, 14, 16];\n      }\n    </script>\n  `\n};\n\n/**\n * @summary Without a size attribute, height scales with the parent text size for typographic alignment.\n */\nexport const DefaultSize = {\n  render: () => html`\n    <div id=\"inline-sparkline-sizes\" nve-layout=\"column gap:md\">\n      <div nve-layout=\"row gap:sm\" nve-text=\"heading\">\n        <span>heading</span>\n        <nve-sparkline></nve-sparkline>\n      </div>\n      <div nve-layout=\"row gap:sm\" nve-text=\"body\">\n        <span>body</span>\n        <nve-sparkline></nve-sparkline>\n      </div>\n      <div nve-layout=\"row gap:sm\" nve-text=\"label sm\">\n        <span>label sm</span>\n        <nve-sparkline></nve-sparkline>\n      </div>\n    </div>\n    <script type=\"module\">\n      const sparklines = document.querySelectorAll('#inline-sparkline-sizes > div[nve-text] > nve-sparkline');\n      for (const sparkline of sparklines) {\n        sparkline.data = [9, 12, 11, 13, 15, 14, 16];\n      }\n    </script>\n  `\n};\n\n/**\n * @summary Interpolation controls linear, smooth, or step transitions between points.\n */\nexport const Interpolation = {\n  render: () => html`\n    <div id=\"sparkline-interpolations\" nve-layout=\"row gap:md\">\n      <nve-sparkline mark=\"area\" interpolation=\"linear\"></nve-sparkline>\n      <nve-sparkline mark=\"area\" interpolation=\"smooth\"></nve-sparkline>\n      <nve-sparkline mark=\"area\" interpolation=\"step\"></nve-sparkline>\n    </div>\n    <script type=\"module\">\n      const sparklines = document.querySelectorAll('#sparkline-interpolations > nve-sparkline');\n      for (const sparkline of sparklines) {\n        sparkline.data = [6, 10, 8, 16, 13, 18, 15];\n      }\n    </script>\n  `\n};\n\n/**\n * @summary Symbols denote specific data points in line, area, and gradient marks.\n */\nexport const Symbols = {\n  render: () => html`\n    <div id=\"sparkline-symbols\" nve-layout=\"row gap:md\">\n      <nve-sparkline denote-last></nve-sparkline>\n      <nve-sparkline denote-first denote-last></nve-sparkline>\n      <nve-sparkline denote-min denote-max></nve-sparkline>\n    </div>\n    <script type=\"module\">\n      const sparklines = document.querySelectorAll('#sparkline-symbols > nve-sparkline');\n      for (const sparkline of sparklines) {\n        sparkline.data = [12, 8, 15, 10, 18, 14, 11];\n      }\n    </script>\n  `\n};\n\n/**\n * @summary Fixed min and max values define a shared vertical domain to ensure comparability across adjacent sparklines.\n */\nexport const FixedDataDomain = {\n  render: () => html`\n    <div nve-layout=\"column gap:md align:left\" nve-text=\"body lg\">\n      <nve-sparkline min=\"0\" max=\"100\" mark=\"area\" status=\"accent\" data=\"[80, 85, 90, 95, 100]\"></nve-sparkline>\n      <nve-sparkline min=\"0\" max=\"100\" mark=\"area\" status=\"accent\" data=\"[40, 45, 50, 55, 60]\"></nve-sparkline>\n      <nve-sparkline min=\"0\" max=\"100\" mark=\"area\" status=\"accent\" data=\"[0, 5, 10, 15, 20]\"></nve-sparkline>\n    </div>\n  `\n};\n\n/**\n * @summary The chart renders a zero baseline when the data includes both positive and negative values.\n */\nexport const ZeroLine = {\n  render: () => html`\n    <div nve-layout=\"row gap:md\">\n      <nve-sparkline aria-label=\"mixed values\" mark=\"area\" data=\"[-3, 2, 5, -1, 3, -2, 4]\"></nve-sparkline>\n      <nve-sparkline aria-label=\"mostly negative values\" mark=\"gradient\" data=\"[-8, -5, -2, 1, -3, -6, -4]\"></nve-sparkline>\n      <nve-sparkline aria-label=\"mixed values column\" mark=\"column\" data=\"[-3, 2, 5, -1, 3, -2, 4]\"></nve-sparkline>\n    </div>\n  `\n};\n\n/**\n * @summary Interval length adjusts spacing between points for line marks, from compact to spacious.\n */\nexport const IntervalLength = {\n  render: () => html`\n    <div id=\"sparkline-intervals\" nve-layout=\"row gap:md\">\n      <nve-sparkline interval-length=\"0.3\"></nve-sparkline>\n      <nve-sparkline interval-length=\"0.6\"></nve-sparkline>\n      <nve-sparkline interval-length=\"2.0\"></nve-sparkline>\n    </div>\n    <script type=\"module\">\n      const sparklines = document.querySelectorAll('#sparkline-intervals > nve-sparkline');\n      for (const sparkline of sparklines) {\n        sparkline.data = [10, 20, 15, 25, 18];\n      }\n    </script>\n  `\n};\n\n/**\n * @summary CSS custom properties are available to adjust dimensions and visual styling.\n * @tags theme\n */\nexport const CustomStyling = {\n  render: () => html`\n    <nve-sparkline\n      aria-label=\"custom sparkline\"\n      mark=\"gradient\"\n      interpolation=\"smooth\"\n      data=\"[8, 14, 9, 17, 13, 21, 16]\"\n      denote-last\n      style=\"\n        --height: 120px;\n        --accent-color: var(--nve-sys-layer-canvas-background);\n        --accent-radius: 5px;\n        --accent-border-width: 3px;\n        --line-width: 2.5px;\n        --line-color: var(--nve-ref-color-blue-cobalt-1100);\n        --gradient-max-color: color-mix(in oklab, var(--nve-ref-color-blue-cobalt-1100) 45%, transparent);\n        --gradient-min-color: color-mix(in oklab, var(--nve-ref-color-blue-cobalt-1100), transparent 90%);\n      \"\n    ></nve-sparkline>\n  `\n};\n"],"mappings":";AAGA,IAAA,IAAS"}
+{"version":3,"file":"sparkline.examples.js","names":["sparkline_examples_default"],"sources":["../../src/sparkline/sparkline.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/sparkline/define.js';\nimport '@nvidia-elements/core/grid/define.js';\nimport '@nvidia-elements/core/range/define.js';\n\nexport default {\n  title: 'Elements/Sparkline',\n  component: 'nve-sparkline',\n};\n\n/**\n * @summary Basic sparkline from numeric array values. Use as a compact trend indicator.\n */\nexport const Default = {\n  render: () => html`\n    <nve-sparkline id=\"default\"></nve-sparkline>\n    <script type=\"module\">\n      const sparkline = document.querySelector('nve-sparkline#default');\n      sparkline.data = [18, 22, 20, 24, 19, 28, 25, 30];\n    </script>\n  `\n};\n\n/**\n * @summary Mark variants include line, area, gradient, column, and winloss to support trend and outcome signals.\n */\nexport const Marks = {\n  render: () => html`\n    <div nve-layout=\"row gap:md\">\n      <nve-sparkline data=\"[14, 18, 17, 20, 19, 24, 21]\"></nve-sparkline>\n      <nve-sparkline mark=\"area\" data=\"[14, 18, 17, 20, 19, 24, 21]\"></nve-sparkline>\n      <nve-sparkline mark=\"gradient\" data=\"[14, 18, 17, 20, 19, 24, 21]\"></nve-sparkline>\n      <nve-sparkline mark=\"column\" data=\"[6, 10, 8, 16, 13, 18, 15]\"></nve-sparkline>\n      <nve-sparkline mark=\"winloss\" data=\"[5, -3, 2, -1, 4, 0, 3]\"></nve-sparkline>\n    </div>\n  `\n};\n\n/**\n * @summary Semantic statuses apply task, support, and trend color mappings.\n */\nexport const Status = {\n  render: () => html`\n    <div nve-layout=\"row gap:md\">\n      <nve-sparkline status=\"accent\" mark=\"area\" data=\"[3, 2, 10, 8, 4, 6, 9]\"></nve-sparkline>\n      <nve-sparkline status=\"danger\" mark=\"area\" data=\"[15, 14, 12, 9, 8, 7, 5]\"></nve-sparkline>\n      <nve-sparkline status=\"warning\" mark=\"area\" data=\"[8, 9, 7, 10, 9, 8, 9]\"></nve-sparkline>\n      <nve-sparkline status=\"success\" mark=\"area\" data=\"[5, 7, 8, 9, 12, 14, 15]\"></nve-sparkline>\n    </div>\n  `\n};\n\n/**\n * @summary Sparklines inherit font size and flow inline with surrounding text and metrics.\n */\nexport const InlineWithText = {\n  render: () => html`\n    <div nve-layout=\"column gap:lg\">\n      <p nve-text=\"body loose\">\n        This week's lane keeping safety score trend \n        <nve-sparkline\n          mark=\"area\"\n          status=\"success\"\n          data=\"[86, 87, 86, 88, 89, 90, 92, 93]\"\n          aria-label=\"lane keeping safety score trend\"></nve-sparkline>\n        shows a steady rise after an early dip, with decreasing interventions per shift: \n        <nve-sparkline\n          mark=\"column\"\n          status=\"accent\"\n          data=\"[16, 14, 15, 13, 12, 11, 10]\"\n          aria-label=\"lane keeping interventions per shift\"></nve-sparkline>, \n        and predominantly successful route outcomes: \n        <nve-sparkline\n          mark=\"winloss\"\n          status=\"success\"\n          data=\"[1, 1, -1, 1, 0, 1, 1]\"\n          aria-label=\"lane keeping route outcomes\"></nve-sparkline>.\n      </p>\n    </div>\n  `\n};\n\n/**\n * @summary Embed sparklines in grid cells to add compact trend context to tabular data.\n */\nexport const DataGrid = {\n  render: () => html`\n    <nve-grid>\n      <nve-grid-header>\n        <nve-grid-column>Autonomy Service</nve-grid-column>\n        <nve-grid-column>Safety Score</nve-grid-column>\n        <nve-grid-column>Interventions / Shift</nve-grid-column>\n        <nve-grid-column>Route Outcome</nve-grid-column>\n      </nve-grid-header>\n      <nve-grid-row>\n        <nve-grid-cell>Lane Keeping</nve-grid-cell>\n        <nve-grid-cell>\n          <nve-sparkline\n            aria-label=\"Lane Keeping 30 day safety score trend\"\n            mark=\"area\"\n            status=\"success\"\n            min=\"0\"\n            max=\"100\"\n            data=\"[86, 87, 86, 88, 89, 90, 92, 93]\"\n            size=\"md\"></nve-sparkline>\n        </nve-grid-cell>\n        <nve-grid-cell>\n          <nve-sparkline\n            aria-label=\"Lane Keeping interventions per shift\"\n            mark=\"column\"\n            status=\"success\"\n            min=\"0\"\n            max=\"50\"\n            data=\"[12, 11, 12, 10, 9, 8, 7, 6]\"\n            size=\"md\"></nve-sparkline>\n        </nve-grid-cell>\n        <nve-grid-cell>\n          <nve-sparkline\n            aria-label=\"Lane Keeping route outcomes\"\n            mark=\"winloss\"\n            data=\"[1, 1, 1, 0, 1, 0, 1, 1]\"\n            size=\"md\"></nve-sparkline>\n        </nve-grid-cell>\n      </nve-grid-row>\n      <nve-grid-row>\n        <nve-grid-cell>Object Detection</nve-grid-cell>\n        <nve-grid-cell>\n          <nve-sparkline\n            aria-label=\"Object Detection 30 day safety score trend\"\n            mark=\"area\"\n            status=\"warning\"\n            min=\"0\"\n            max=\"100\"\n            data=\"[76, 88, 72, 79, 85, 70, 83, 74]\"\n            size=\"md\"></nve-sparkline>\n        </nve-grid-cell>\n        <nve-grid-cell>\n          <nve-sparkline\n            aria-label=\"Object Detection interventions per shift\"\n            mark=\"column\"\n            status=\"warning\"\n            min=\"0\"\n            max=\"50\"\n            data=\"[18, 20, 17, 19, 20, 21, 19, 22]\"\n            size=\"md\"></nve-sparkline>\n        </nve-grid-cell>\n        <nve-grid-cell>\n          <nve-sparkline\n            aria-label=\"Object Detection route outcomes\"\n            mark=\"winloss\"\n            data=\"[1, 0, -1, 1, 0, -1, 0, 1]\"\n            size=\"md\"></nve-sparkline>\n        </nve-grid-cell>\n      </nve-grid-row>\n      <nve-grid-row>\n        <nve-grid-cell>Path Planning</nve-grid-cell>\n        <nve-grid-cell>\n          <nve-sparkline\n            aria-label=\"Path Planning 30 day safety score trend\"\n            mark=\"area\"\n            status=\"danger\"\n            min=\"0\"\n            max=\"100\"\n            data=\"[58, 54, 49, 45, 40, 36, 31, 27]\"\n            size=\"md\"></nve-sparkline>\n        </nve-grid-cell>\n        <nve-grid-cell>\n          <nve-sparkline\n            aria-label=\"Path Planning interventions per shift\"\n            mark=\"column\"\n            status=\"danger\"\n            min=\"0\"\n            max=\"50\"\n            data=\"[24, 26, 29, 31, 34, 36, 39, 42]\"\n            size=\"md\"></nve-sparkline>\n        </nve-grid-cell>\n        <nve-grid-cell>\n          <nve-sparkline\n            aria-label=\"Path Planning route outcomes\"\n            mark=\"winloss\"\n            data=\"[1, -1, 0, -1, -1, -1, 0, -1]\"\n            size=\"md\"></nve-sparkline>\n        </nve-grid-cell>\n      </nve-grid-row>\n    </nve-grid>\n  `\n};\n\n/**\n * @summary Explicit size tokens set fixed sparkline height independent of text context.\n */\nexport const ExplicitSize = {\n  render: () => html`\n    <div id=\"sparkline-sizes\" nve-layout=\"row gap:md\">\n      <nve-sparkline size=\"xs\"></nve-sparkline>\n      <nve-sparkline size=\"sm\"></nve-sparkline>\n      <nve-sparkline size=\"md\"></nve-sparkline>\n      <nve-sparkline size=\"lg\"></nve-sparkline>\n      <nve-sparkline size=\"xl\"></nve-sparkline>\n    </div>\n    <script type=\"module\">\n      const sparklines = document.querySelectorAll('#sparkline-sizes > nve-sparkline');\n      for (const sparkline of sparklines) {\n        sparkline.data = [9, 12, 11, 13, 15, 14, 16];\n      }\n    </script>\n  `\n};\n\n/**\n * @summary Without a size attribute, height scales with the parent text size for typographic alignment.\n */\nexport const DefaultSize = {\n  render: () => html`\n    <div id=\"inline-sparkline-sizes\" nve-layout=\"column gap:md\">\n      <div nve-layout=\"row gap:sm\" nve-text=\"heading\">\n        <span>heading</span>\n        <nve-sparkline></nve-sparkline>\n      </div>\n      <div nve-layout=\"row gap:sm\" nve-text=\"body\">\n        <span>body</span>\n        <nve-sparkline></nve-sparkline>\n      </div>\n      <div nve-layout=\"row gap:sm\" nve-text=\"label sm\">\n        <span>label sm</span>\n        <nve-sparkline></nve-sparkline>\n      </div>\n    </div>\n    <script type=\"module\">\n      const sparklines = document.querySelectorAll('#inline-sparkline-sizes > div[nve-text] > nve-sparkline');\n      for (const sparkline of sparklines) {\n        sparkline.data = [9, 12, 11, 13, 15, 14, 16];\n      }\n    </script>\n  `\n};\n\n/**\n * @summary Interpolation controls linear, smooth, or step transitions between points.\n */\nexport const Interpolation = {\n  render: () => html`\n    <div id=\"sparkline-interpolations\" nve-layout=\"row gap:md\">\n      <nve-sparkline mark=\"area\" interpolation=\"linear\"></nve-sparkline>\n      <nve-sparkline mark=\"area\" interpolation=\"smooth\"></nve-sparkline>\n      <nve-sparkline mark=\"area\" interpolation=\"step\"></nve-sparkline>\n    </div>\n    <script type=\"module\">\n      const sparklines = document.querySelectorAll('#sparkline-interpolations > nve-sparkline');\n      for (const sparkline of sparklines) {\n        sparkline.data = [6, 10, 8, 16, 13, 18, 15];\n      }\n    </script>\n  `\n};\n\n/**\n * @summary Symbols denote specific data points in line, area, and gradient marks.\n */\nexport const Symbols = {\n  render: () => html`\n    <div id=\"sparkline-symbols\" nve-layout=\"row gap:md\">\n      <nve-sparkline denote-last></nve-sparkline>\n      <nve-sparkline denote-first denote-last></nve-sparkline>\n      <nve-sparkline denote-min denote-max></nve-sparkline>\n    </div>\n    <script type=\"module\">\n      const sparklines = document.querySelectorAll('#sparkline-symbols > nve-sparkline');\n      for (const sparkline of sparklines) {\n        sparkline.data = [12, 8, 15, 10, 18, 14, 11];\n      }\n    </script>\n  `\n};\n\n/**\n * @summary Fixed min and max values define a shared vertical domain to ensure comparability across adjacent sparklines.\n */\nexport const FixedDataDomain = {\n  render: () => html`\n    <div nve-layout=\"column gap:md align:left\" nve-text=\"body lg\">\n      <nve-sparkline min=\"0\" max=\"100\" mark=\"area\" status=\"accent\" data=\"[80, 85, 90, 95, 100]\"></nve-sparkline>\n      <nve-sparkline min=\"0\" max=\"100\" mark=\"area\" status=\"accent\" data=\"[40, 45, 50, 55, 60]\"></nve-sparkline>\n      <nve-sparkline min=\"0\" max=\"100\" mark=\"area\" status=\"accent\" data=\"[0, 5, 10, 15, 20]\"></nve-sparkline>\n    </div>\n  `\n};\n\n/**\n * @summary The chart renders a zero baseline when the data includes both positive and negative values.\n */\nexport const ZeroLine = {\n  render: () => html`\n    <div nve-layout=\"row gap:md\">\n      <nve-sparkline aria-label=\"mixed values\" mark=\"area\" data=\"[-3, 2, 5, -1, 3, -2, 4]\"></nve-sparkline>\n      <nve-sparkline aria-label=\"mostly negative values\" mark=\"gradient\" data=\"[-8, -5, -2, 1, -3, -6, -4]\"></nve-sparkline>\n      <nve-sparkline aria-label=\"mixed values column\" mark=\"column\" data=\"[-3, 2, 5, -1, 3, -2, 4]\"></nve-sparkline>\n    </div>\n  `\n};\n\n/**\n * @summary Interval length adjusts spacing between points for line marks, from compact to spacious.\n */\nexport const IntervalLength = {\n  render: () => html`\n    <div id=\"sparkline-intervals\" nve-layout=\"row gap:md\">\n      <nve-sparkline interval-length=\"0.3\"></nve-sparkline>\n      <nve-sparkline interval-length=\"0.6\"></nve-sparkline>\n      <nve-sparkline interval-length=\"2.0\"></nve-sparkline>\n    </div>\n    <script type=\"module\">\n      const sparklines = document.querySelectorAll('#sparkline-intervals > nve-sparkline');\n      for (const sparkline of sparklines) {\n        sparkline.data = [10, 20, 15, 25, 18];\n      }\n    </script>\n  `\n};\n\n/**\n * @summary CSS custom properties are available to adjust dimensions and visual styling.\n * @tags theme\n */\nexport const CustomStyling = {\n  render: () => html`\n    <nve-sparkline\n      aria-label=\"custom sparkline\"\n      mark=\"gradient\"\n      interpolation=\"smooth\"\n      data=\"[8, 14, 9, 17, 13, 21, 16]\"\n      denote-last\n      style=\"\n        --height: 120px;\n        --accent-color: var(--nve-sys-layer-canvas-background);\n        --accent-radius: 5px;\n        --accent-border-width: 3px;\n        --line-width: 2.5px;\n        --line-color: var(--nve-ref-color-blue-cobalt-1100);\n        --gradient-max-color: color-mix(in oklab, var(--nve-ref-color-blue-cobalt-1100) 45%, transparent);\n        --gradient-min-color: color-mix(in oklab, var(--nve-ref-color-blue-cobalt-1100), transparent 90%);\n      \"\n    ></nve-sparkline>\n  `\n};\n"],"mappings":";AAGA,IAAAA,IAAS"}

package/dist/sparkline/sparkline.js

@@ -1,6 +1,5 @@
-//#region src/sparkline/sparkline.css?inline
+// src/sparkline/sparkline.css?inline
 var e = ":host{--height: 1em;--line-color: var(--status-color);--line-width: 1.5px;--fill-color: var(--status-color);--gradient-max-color: color-mix(in oklab, var(--line-color), transparent 35%);--gradient-min-color: color-mix(in oklab, var(--line-color), transparent 95%);--zero-line-color: var(--line-color);--zero-line-width: 1.5px;--win-color: var(--nve-sys-status-finished-color);--loss-color: var(--nve-sys-status-failed-color);--draw-color: var(--nve-sys-status-pending-color);--accent-radius: 3px;--accent-color: var(--nve-sys-support-accent-emphasis-color);--accent-border-color: var(--nve-sys-support-accent-emphasis-color);--accent-border-width: 1;--_aspect-ratio: 1;display:inline-flex;height:var(--height);aspect-ratio:var(--_aspect-ratio);max-width:100%;contain:layout style}:host([size=\"xs\"]){--height: var(--nve-ref-size-200)}:host([size=\"sm\"]){--height: var(--nve-ref-size-300)}:host([size=\"md\"]){--height: var(--nve-ref-size-400)}:host([size=\"lg\"]){--height: var(--nve-ref-size-500)}:host([size=\"xl\"]){--height: var(--nve-ref-size-600)}[internal-host]{position:relative;container-type:size;width:100%;height:100%;--_vbw: calc(100 * var(--_aspect-ratio));--_vbh: 100;--_svg-unit-size: min(calc(100cqw / var(--_vbw)), calc(100cqh / var(--_vbh)));--_svg-origin-x: calc((100cqw - (var(--_vbw) * var(--_svg-unit-size))) / 2);--_svg-origin-y: calc((100cqh - (var(--_vbh) * var(--_svg-unit-size))) / 2)}svg{width:100%;height:100%;overflow:visible}.line{stroke:var(--line-color);stroke-width:var(--line-width);fill:none;stroke-linejoin:round;stroke-linecap:round}.area{fill:color-mix(in oklab,var(--fill-color) 20%,transparent);stroke:none}.zero-line{stroke:var(--zero-line-color);stroke-width:var(--zero-line-width)}.column{fill:var(--fill-color);stroke:none}.win{fill:var(--win-color);stroke:none}.loss{fill:var(--loss-color);stroke:none}.draw{fill:var(--draw-color);stroke:none}.accent{position:absolute;box-sizing:content-box;left:calc(var(--_svg-origin-x) + (var(--x) * var(--_svg-unit-size)));top:calc(var(--_svg-origin-y) + (var(--y) * var(--_svg-unit-size)));width:calc(2 * var(--accent-radius));height:calc(2 * var(--accent-radius));transform:translate(-50%,-50%);background:var(--accent-color);border:var(--accent-border-width) solid var(--accent-border-color);border-radius:50%;user-select:none}";
-//#endregion
 export { e as default };
 
 //# sourceMappingURL=sparkline.js.map

package/dist/sparkline/sparkline.js.map

@@ -1 +1 @@
-{"version":3,"file":"sparkline.js","names":[],"sources":["../../src/sparkline/sparkline.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  --height: 1em;\n  --line-color: var(--status-color);\n  --line-width: 1.5px;\n  --fill-color: var(--status-color);\n  --gradient-max-color: color-mix(in oklab, var(--line-color), transparent 35%);\n  --gradient-min-color: color-mix(in oklab, var(--line-color), transparent 95%);\n  --zero-line-color: var(--line-color);\n  --zero-line-width: 1.5px;\n  --win-color: var(--nve-sys-status-finished-color);\n  --loss-color: var(--nve-sys-status-failed-color);\n  --draw-color: var(--nve-sys-status-pending-color);\n  --accent-radius: 3px;\n  --accent-color: var(--nve-sys-support-accent-emphasis-color);\n  --accent-border-color: var(--nve-sys-support-accent-emphasis-color);\n  --accent-border-width: 1;\n  --_aspect-ratio: 1;\n  display: inline-flex;\n  height: var(--height);\n  aspect-ratio: var(--_aspect-ratio);\n  max-width: 100%;\n  contain: layout style;\n}\n\n:host([size='xs']) {\n  --height: var(--nve-ref-size-200);\n}\n\n:host([size='sm']) {\n  --height: var(--nve-ref-size-300);\n}\n\n:host([size='md']) {\n  --height: var(--nve-ref-size-400);\n}\n\n:host([size='lg']) {\n  --height: var(--nve-ref-size-500);\n}\n\n:host([size='xl']) {\n  --height: var(--nve-ref-size-600);\n}\n\n[internal-host] {\n  position: relative;\n  container-type: size;\n  width: 100%;\n  height: 100%;\n\n  --_vbw: calc(100 * var(--_aspect-ratio));\n  --_vbh: 100;\n  --_svg-unit-size: min(calc(100cqw / var(--_vbw)), calc(100cqh / var(--_vbh)));\n  --_svg-origin-x: calc((100cqw - (var(--_vbw) * var(--_svg-unit-size))) / 2);\n  --_svg-origin-y: calc((100cqh - (var(--_vbh) * var(--_svg-unit-size))) / 2);\n}\n\nsvg {\n  width: 100%;\n  height: 100%;\n  overflow: visible;\n}\n\n.line {\n  stroke: var(--line-color);\n  stroke-width: var(--line-width);\n  fill: none;\n  stroke-linejoin: round;\n  stroke-linecap: round;\n}\n\n.area {\n  fill: color-mix(in oklab, var(--fill-color) 20%, transparent);\n  stroke: none;\n}\n\n.zero-line {\n  stroke: var(--zero-line-color);\n  stroke-width: var(--zero-line-width);\n}\n\n.column {\n  fill: var(--fill-color);\n  stroke: none;\n}\n\n.win {\n  fill: var(--win-color);\n  stroke: none;\n}\n\n.loss {\n  fill: var(--loss-color);\n  stroke: none;\n}\n\n.draw {\n  fill: var(--draw-color);\n  stroke: none;\n}\n\n.accent {\n  position: absolute;\n  box-sizing: content-box;\n  left: calc(var(--_svg-origin-x) + (var(--x) * var(--_svg-unit-size)));\n  top: calc(var(--_svg-origin-y) + (var(--y) * var(--_svg-unit-size)));\n  width: calc(2 * var(--accent-radius));\n  height: calc(2 * var(--accent-radius));\n  transform: translate(-50%, -50%);\n  background: var(--accent-color);\n  border: var(--accent-border-width) solid var(--accent-border-color);\n  border-radius: 50%;\n  user-select: none;\n}\n"],"mappings":""}
+{"version":3,"file":"sparkline.js","names":["sparkline_default"],"sources":["../../src/sparkline/sparkline.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  --height: 1em;\n  --line-color: var(--status-color);\n  --line-width: 1.5px;\n  --fill-color: var(--status-color);\n  --gradient-max-color: color-mix(in oklab, var(--line-color), transparent 35%);\n  --gradient-min-color: color-mix(in oklab, var(--line-color), transparent 95%);\n  --zero-line-color: var(--line-color);\n  --zero-line-width: 1.5px;\n  --win-color: var(--nve-sys-status-finished-color);\n  --loss-color: var(--nve-sys-status-failed-color);\n  --draw-color: var(--nve-sys-status-pending-color);\n  --accent-radius: 3px;\n  --accent-color: var(--nve-sys-support-accent-emphasis-color);\n  --accent-border-color: var(--nve-sys-support-accent-emphasis-color);\n  --accent-border-width: 1;\n  --_aspect-ratio: 1;\n  display: inline-flex;\n  height: var(--height);\n  aspect-ratio: var(--_aspect-ratio);\n  max-width: 100%;\n  contain: layout style;\n}\n\n:host([size='xs']) {\n  --height: var(--nve-ref-size-200);\n}\n\n:host([size='sm']) {\n  --height: var(--nve-ref-size-300);\n}\n\n:host([size='md']) {\n  --height: var(--nve-ref-size-400);\n}\n\n:host([size='lg']) {\n  --height: var(--nve-ref-size-500);\n}\n\n:host([size='xl']) {\n  --height: var(--nve-ref-size-600);\n}\n\n[internal-host] {\n  position: relative;\n  container-type: size;\n  width: 100%;\n  height: 100%;\n\n  --_vbw: calc(100 * var(--_aspect-ratio));\n  --_vbh: 100;\n  --_svg-unit-size: min(calc(100cqw / var(--_vbw)), calc(100cqh / var(--_vbh)));\n  --_svg-origin-x: calc((100cqw - (var(--_vbw) * var(--_svg-unit-size))) / 2);\n  --_svg-origin-y: calc((100cqh - (var(--_vbh) * var(--_svg-unit-size))) / 2);\n}\n\nsvg {\n  width: 100%;\n  height: 100%;\n  overflow: visible;\n}\n\n.line {\n  stroke: var(--line-color);\n  stroke-width: var(--line-width);\n  fill: none;\n  stroke-linejoin: round;\n  stroke-linecap: round;\n}\n\n.area {\n  fill: color-mix(in oklab, var(--fill-color) 20%, transparent);\n  stroke: none;\n}\n\n.zero-line {\n  stroke: var(--zero-line-color);\n  stroke-width: var(--zero-line-width);\n}\n\n.column {\n  fill: var(--fill-color);\n  stroke: none;\n}\n\n.win {\n  fill: var(--win-color);\n  stroke: none;\n}\n\n.loss {\n  fill: var(--loss-color);\n  stroke: none;\n}\n\n.draw {\n  fill: var(--draw-color);\n  stroke: none;\n}\n\n.accent {\n  position: absolute;\n  box-sizing: content-box;\n  left: calc(var(--_svg-origin-x) + (var(--x) * var(--_svg-unit-size)));\n  top: calc(var(--_svg-origin-y) + (var(--y) * var(--_svg-unit-size)));\n  width: calc(2 * var(--accent-radius));\n  height: calc(2 * var(--accent-radius));\n  transform: translate(-50%, -50%);\n  background: var(--accent-color);\n  border: var(--accent-border-width) solid var(--accent-border-color);\n  border-radius: 50%;\n  user-select: none;\n}\n"],"mappings":""}

package/dist/sparkline/sparkline.utils.js

@@ -141,7 +141,6 @@ function v(e, t, n) {
 		stepSize: r
 	};
 }
-//#endregion
 export { o as calculateDomain, l as calculateSymbolIndices, a as calculateViewBox, f as toAreaPath, p as toColumnRects, u as toInterpolation, d as toLinePath, c as toPlotPoints, i as toValidData, m as toWinLossRects, s as valueToY };
 
 //# sourceMappingURL=sparkline.utils.js.map

package/dist/sparkline/sparkline.utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"sparkline.utils.js","names":[],"sources":["../../src/sparkline/sparkline.utils.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { Dimensions, Interpolation, Point, Rect, Scale, SparklineMark } from '@nvidia-elements/core/internal';\n\nexport const PRECISION = 2;\nexport const VIEW_HEIGHT = 100;\nconst DEFAULT_INTERVAL_LENGTH_EM = 0.6;\n\nconst HORIZONTAL_UNIT_WIDTH = VIEW_HEIGHT * DEFAULT_INTERVAL_LENGTH_EM;\nconst COLUMN_GAP_RATIO = 0.7;\nconst WINLOSS_GAP_RATIO = 0.85;\n\nexport function toValidData(data: unknown): number[] {\n  if (!Array.isArray(data)) return [];\n  return data.filter(Number.isFinite);\n}\n\nexport function calculateViewBox(\n  mark: SparklineMark,\n  pointCount: number,\n  intervalLength = DEFAULT_INTERVAL_LENGTH_EM\n): Dimensions {\n  const isIntervalBased = mark === 'line' || mark === 'area' || mark === 'gradient';\n  const widthUnitCount = isIntervalBased ? Math.max(pointCount - 1, 1) : pointCount;\n  const normalizedIntervalLength =\n    Number.isFinite(intervalLength) && intervalLength > 0 ? intervalLength : DEFAULT_INTERVAL_LENGTH_EM;\n  const width =\n    mark === 'line' ? widthUnitCount * VIEW_HEIGHT * normalizedIntervalLength : widthUnitCount * HORIZONTAL_UNIT_WIDTH;\n\n  return {\n    width,\n    height: VIEW_HEIGHT\n  };\n}\n\nexport function calculateDomain(\n  values: number[],\n  options: { explicitMin?: number; explicitMax?: number; includeZero?: boolean } = {}\n): Scale | undefined {\n  if (values.length === 0) return undefined;\n  const { explicitMin, explicitMax, includeZero = false } = options;\n\n  const dataMinimum = Math.min(...values);\n  const dataMaximum = Math.max(...values);\n\n  return {\n    min: explicitMin ?? (includeZero ? Math.min(dataMinimum, 0) : dataMinimum),\n    max: explicitMax ?? (includeZero ? Math.max(dataMaximum, 0) : dataMaximum)\n  };\n}\n\nexport function valueToY(value: number, range: { min: number; max: number }, viewHeight = VIEW_HEIGHT): number {\n  const span = range.max - range.min;\n  if (span === 0) return viewHeight / 2;\n  return viewHeight - ((value - range.min) / span) * viewHeight;\n}\n\nexport function toPlotPoints(\n  values: number[],\n  range: { min: number; max: number },\n  view: { width: number; height?: number }\n): Point[] {\n  const viewHeight = view.height ?? VIEW_HEIGHT;\n  const stepX = values.length > 1 ? view.width / (values.length - 1) : 0;\n  return values.map((value, index) => ({\n    x: index * stepX,\n    y: valueToY(value, range, viewHeight)\n  }));\n}\n\nexport function calculateSymbolIndices(\n  values: number[],\n  denote: { first: boolean; last: boolean; min: boolean; max: boolean }\n): Set<number> {\n  const indices = new Set<number>();\n  if (values.length === 0) return indices;\n\n  if (denote.first) indices.add(0);\n  if (denote.last) indices.add(values.length - 1);\n\n  const needsExtrema = denote.min || denote.max;\n  if (!needsExtrema) return indices;\n\n  const min = Math.min(...values);\n  const max = Math.max(...values);\n\n  values.forEach((value, index) => {\n    if (denote.min && value === min) indices.add(index);\n    if (denote.max && value === max) indices.add(index);\n  });\n\n  return indices;\n}\n\nexport function toInterpolation(interpolation: unknown): Interpolation {\n  switch (interpolation) {\n    case 'linear':\n      return 'linear';\n    case 'smooth':\n      return 'smooth';\n    case 'step':\n      return 'step';\n    default: {\n      return 'linear';\n    }\n  }\n}\n\nexport function toLinePath(points: Point[], interpolation: Interpolation, viewWidth: number): string {\n  if (points.length === 0) return '';\n  if (points.length === 1) {\n    const y = points[0]!.y.toFixed(PRECISION);\n    return `M 0 ${y} L ${viewWidth.toFixed(PRECISION)} ${y}`;\n  }\n\n  switch (interpolation) {\n    case 'step':\n      return toStepOpenPath(points);\n    case 'smooth':\n      return toSmoothOpenPath(points);\n    case 'linear':\n      return toLinearOpenPath(points);\n    default:\n      return toLinearOpenPath(points);\n  }\n}\n\nexport function toAreaPath(points: Point[], interpolation: Interpolation, viewHeight = VIEW_HEIGHT): string {\n  if (points.length === 0) return '';\n\n  let openPath = '';\n  switch (interpolation) {\n    case 'step':\n      openPath = toStepOpenPath(points);\n      break;\n    case 'smooth':\n      openPath = toSmoothOpenPath(points);\n      break;\n    case 'linear':\n      openPath = toLinearOpenPath(points);\n      break;\n    default:\n      openPath = toLinearOpenPath(points);\n      break;\n  }\n\n  const last = points[points.length - 1]!;\n  const first = points[0]!;\n  openPath += ` L ${last.x.toFixed(PRECISION)} ${viewHeight.toFixed(PRECISION)}`;\n  openPath += ` L ${first.x.toFixed(PRECISION)} ${viewHeight.toFixed(PRECISION)} Z`;\n  return openPath;\n}\n\nexport function toColumnRects(points: Point[], baselineY: number, width: number): Rect[] {\n  const { bandSize: bandWidth, stepSize: stepX } = calculateBandSizing(points.length, width, COLUMN_GAP_RATIO);\n\n  return points.map((point, index) => {\n    const x = index * stepX + (stepX - bandWidth) / 2;\n    const height = Math.abs(point.y - baselineY);\n    const y = Math.min(point.y, baselineY);\n    return { x, y, width: bandWidth, height };\n  });\n}\n\nexport function toWinLossRects(\n  values: number[],\n  baselineY: number,\n  dimensions: { width: number; height: number }\n): (Rect & { className: 'win' | 'loss' | 'draw' })[] {\n  const { bandSize: bandWidth, stepSize: stepX } = calculateBandSizing(\n    values.length,\n    dimensions.width,\n    WINLOSS_GAP_RATIO\n  );\n  const barHeight = dimensions.height / 2;\n\n  return values.map((value, index) => {\n    const x = index * stepX + (stepX - bandWidth) / 2;\n\n    if (value > 0) {\n      return { className: 'win', x, y: baselineY - barHeight, width: bandWidth, height: barHeight };\n    }\n\n    if (value < 0) {\n      return { className: 'loss', x, y: baselineY, width: bandWidth, height: barHeight };\n    }\n\n    return {\n      className: 'draw',\n      x,\n      y: baselineY - barHeight / 4,\n      width: bandWidth,\n      height: barHeight / 2\n    };\n  });\n}\n\nfunction toLinearOpenPath(points: Point[]): string {\n  return points.reduce((path, point, index) => {\n    if (index === 0) {\n      return `M ${point.x.toFixed(PRECISION)} ${point.y.toFixed(PRECISION)}`;\n    }\n    return `${path} L ${point.x.toFixed(PRECISION)} ${point.y.toFixed(PRECISION)}`;\n  }, '');\n}\n\nfunction toSmoothOpenPath(points: Point[]): string {\n  const segments = points.map((point, index) => {\n    if (index === 0) {\n      return `M ${point.x.toFixed(PRECISION)} ${point.y.toFixed(PRECISION)}`;\n    }\n    const previous = points[index - 1]!;\n    const deltaX = (point.x - previous.x) / 3;\n    const p = PRECISION;\n    return `C ${(previous.x + deltaX).toFixed(p)} ${previous.y.toFixed(p)} ${(point.x - deltaX).toFixed(p)} ${point.y.toFixed(p)} ${point.x.toFixed(p)} ${point.y.toFixed(p)}`;\n  });\n  return segments.join(' ');\n}\n\nfunction toStepOpenPath(points: Point[]): string {\n  let path = `M ${points[0]!.x.toFixed(PRECISION)} ${points[0]!.y.toFixed(PRECISION)}`;\n  for (let index = 1; index < points.length; index++) {\n    const point = points[index]!;\n    path += ` H ${point.x.toFixed(PRECISION)} V ${point.y.toFixed(PRECISION)}`;\n  }\n  return path;\n}\n\nfunction calculateBandSizing(count: number, viewDimension: number, gapRatio: number) {\n  if (count <= 0) return { bandSize: 0, stepSize: 0 };\n\n  const stepSize = viewDimension / count;\n  const bandSize = stepSize * gapRatio;\n  return { bandSize, stepSize };\n}\n"],"mappings":"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"}
+{"version":3,"file":"sparkline.utils.js","names":["DEFAULT_INTERVAL_LENGTH_EM","HORIZONTAL_UNIT_WIDTH","COLUMN_GAP_RATIO","WINLOSS_GAP_RATIO","toValidData","data","calculateViewBox","widthUnitCount","mark","pointCount","normalizedIntervalLength","intervalLength","calculateDomain","values","options","dataMinimum","dataMaximum","explicitMin","includeZero","explicitMax","valueToY","span","range","viewHeight","value","toPlotPoints","view","stepX","index","calculateSymbolIndices","indices","denote","min","max","toInterpolation","interpolation","toLinePath","points","y","viewWidth","toStepOpenPath","toSmoothOpenPath","toLinearOpenPath","toAreaPath","openPath","last","first","toColumnRects","bandWidth","calculateBandSizing","width","x","height","point","baselineY","toWinLossRects","dimensions","barHeight","path","previous","deltaX","count","stepSize","viewDimension","gapRatio"],"sources":["../../src/sparkline/sparkline.utils.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { Dimensions, Interpolation, Point, Rect, Scale, SparklineMark } from '@nvidia-elements/core/internal';\n\nexport const PRECISION = 2;\nexport const VIEW_HEIGHT = 100;\nconst DEFAULT_INTERVAL_LENGTH_EM = 0.6;\n\nconst HORIZONTAL_UNIT_WIDTH = VIEW_HEIGHT * DEFAULT_INTERVAL_LENGTH_EM;\nconst COLUMN_GAP_RATIO = 0.7;\nconst WINLOSS_GAP_RATIO = 0.85;\n\nexport function toValidData(data: unknown): number[] {\n  if (!Array.isArray(data)) return [];\n  return data.filter(Number.isFinite);\n}\n\nexport function calculateViewBox(\n  mark: SparklineMark,\n  pointCount: number,\n  intervalLength = DEFAULT_INTERVAL_LENGTH_EM\n): Dimensions {\n  const isIntervalBased = mark === 'line' || mark === 'area' || mark === 'gradient';\n  const widthUnitCount = isIntervalBased ? Math.max(pointCount - 1, 1) : pointCount;\n  const normalizedIntervalLength =\n    Number.isFinite(intervalLength) && intervalLength > 0 ? intervalLength : DEFAULT_INTERVAL_LENGTH_EM;\n  const width =\n    mark === 'line' ? widthUnitCount * VIEW_HEIGHT * normalizedIntervalLength : widthUnitCount * HORIZONTAL_UNIT_WIDTH;\n\n  return {\n    width,\n    height: VIEW_HEIGHT\n  };\n}\n\nexport function calculateDomain(\n  values: number[],\n  options: { explicitMin?: number; explicitMax?: number; includeZero?: boolean } = {}\n): Scale | undefined {\n  if (values.length === 0) return undefined;\n  const { explicitMin, explicitMax, includeZero = false } = options;\n\n  const dataMinimum = Math.min(...values);\n  const dataMaximum = Math.max(...values);\n\n  return {\n    min: explicitMin ?? (includeZero ? Math.min(dataMinimum, 0) : dataMinimum),\n    max: explicitMax ?? (includeZero ? Math.max(dataMaximum, 0) : dataMaximum)\n  };\n}\n\nexport function valueToY(value: number, range: { min: number; max: number }, viewHeight = VIEW_HEIGHT): number {\n  const span = range.max - range.min;\n  if (span === 0) return viewHeight / 2;\n  return viewHeight - ((value - range.min) / span) * viewHeight;\n}\n\nexport function toPlotPoints(\n  values: number[],\n  range: { min: number; max: number },\n  view: { width: number; height?: number }\n): Point[] {\n  const viewHeight = view.height ?? VIEW_HEIGHT;\n  const stepX = values.length > 1 ? view.width / (values.length - 1) : 0;\n  return values.map((value, index) => ({\n    x: index * stepX,\n    y: valueToY(value, range, viewHeight)\n  }));\n}\n\nexport function calculateSymbolIndices(\n  values: number[],\n  denote: { first: boolean; last: boolean; min: boolean; max: boolean }\n): Set<number> {\n  const indices = new Set<number>();\n  if (values.length === 0) return indices;\n\n  if (denote.first) indices.add(0);\n  if (denote.last) indices.add(values.length - 1);\n\n  const needsExtrema = denote.min || denote.max;\n  if (!needsExtrema) return indices;\n\n  const min = Math.min(...values);\n  const max = Math.max(...values);\n\n  values.forEach((value, index) => {\n    if (denote.min && value === min) indices.add(index);\n    if (denote.max && value === max) indices.add(index);\n  });\n\n  return indices;\n}\n\nexport function toInterpolation(interpolation: unknown): Interpolation {\n  switch (interpolation) {\n    case 'linear':\n      return 'linear';\n    case 'smooth':\n      return 'smooth';\n    case 'step':\n      return 'step';\n    default: {\n      return 'linear';\n    }\n  }\n}\n\nexport function toLinePath(points: Point[], interpolation: Interpolation, viewWidth: number): string {\n  if (points.length === 0) return '';\n  if (points.length === 1) {\n    const y = points[0]!.y.toFixed(PRECISION);\n    return `M 0 ${y} L ${viewWidth.toFixed(PRECISION)} ${y}`;\n  }\n\n  switch (interpolation) {\n    case 'step':\n      return toStepOpenPath(points);\n    case 'smooth':\n      return toSmoothOpenPath(points);\n    case 'linear':\n      return toLinearOpenPath(points);\n    default:\n      return toLinearOpenPath(points);\n  }\n}\n\nexport function toAreaPath(points: Point[], interpolation: Interpolation, viewHeight = VIEW_HEIGHT): string {\n  if (points.length === 0) return '';\n\n  let openPath = '';\n  switch (interpolation) {\n    case 'step':\n      openPath = toStepOpenPath(points);\n      break;\n    case 'smooth':\n      openPath = toSmoothOpenPath(points);\n      break;\n    case 'linear':\n      openPath = toLinearOpenPath(points);\n      break;\n    default:\n      openPath = toLinearOpenPath(points);\n      break;\n  }\n\n  const last = points[points.length - 1]!;\n  const first = points[0]!;\n  openPath += ` L ${last.x.toFixed(PRECISION)} ${viewHeight.toFixed(PRECISION)}`;\n  openPath += ` L ${first.x.toFixed(PRECISION)} ${viewHeight.toFixed(PRECISION)} Z`;\n  return openPath;\n}\n\nexport function toColumnRects(points: Point[], baselineY: number, width: number): Rect[] {\n  const { bandSize: bandWidth, stepSize: stepX } = calculateBandSizing(points.length, width, COLUMN_GAP_RATIO);\n\n  return points.map((point, index) => {\n    const x = index * stepX + (stepX - bandWidth) / 2;\n    const height = Math.abs(point.y - baselineY);\n    const y = Math.min(point.y, baselineY);\n    return { x, y, width: bandWidth, height };\n  });\n}\n\nexport function toWinLossRects(\n  values: number[],\n  baselineY: number,\n  dimensions: { width: number; height: number }\n): (Rect & { className: 'win' | 'loss' | 'draw' })[] {\n  const { bandSize: bandWidth, stepSize: stepX } = calculateBandSizing(\n    values.length,\n    dimensions.width,\n    WINLOSS_GAP_RATIO\n  );\n  const barHeight = dimensions.height / 2;\n\n  return values.map((value, index) => {\n    const x = index * stepX + (stepX - bandWidth) / 2;\n\n    if (value > 0) {\n      return { className: 'win', x, y: baselineY - barHeight, width: bandWidth, height: barHeight };\n    }\n\n    if (value < 0) {\n      return { className: 'loss', x, y: baselineY, width: bandWidth, height: barHeight };\n    }\n\n    return {\n      className: 'draw',\n      x,\n      y: baselineY - barHeight / 4,\n      width: bandWidth,\n      height: barHeight / 2\n    };\n  });\n}\n\nfunction toLinearOpenPath(points: Point[]): string {\n  return points.reduce((path, point, index) => {\n    if (index === 0) {\n      return `M ${point.x.toFixed(PRECISION)} ${point.y.toFixed(PRECISION)}`;\n    }\n    return `${path} L ${point.x.toFixed(PRECISION)} ${point.y.toFixed(PRECISION)}`;\n  }, '');\n}\n\nfunction toSmoothOpenPath(points: Point[]): string {\n  const segments = points.map((point, index) => {\n    if (index === 0) {\n      return `M ${point.x.toFixed(PRECISION)} ${point.y.toFixed(PRECISION)}`;\n    }\n    const previous = points[index - 1]!;\n    const deltaX = (point.x - previous.x) / 3;\n    const p = PRECISION;\n    return `C ${(previous.x + deltaX).toFixed(p)} ${previous.y.toFixed(p)} ${(point.x - deltaX).toFixed(p)} ${point.y.toFixed(p)} ${point.x.toFixed(p)} ${point.y.toFixed(p)}`;\n  });\n  return segments.join(' ');\n}\n\nfunction toStepOpenPath(points: Point[]): string {\n  let path = `M ${points[0]!.x.toFixed(PRECISION)} ${points[0]!.y.toFixed(PRECISION)}`;\n  for (let index = 1; index < points.length; index++) {\n    const point = points[index]!;\n    path += ` H ${point.x.toFixed(PRECISION)} V ${point.y.toFixed(PRECISION)}`;\n  }\n  return path;\n}\n\nfunction calculateBandSizing(count: number, viewDimension: number, gapRatio: number) {\n  if (count <= 0) return { bandSize: 0, stepSize: 0 };\n\n  const stepSize = viewDimension / count;\n  const bandSize = stepSize * gapRatio;\n  return { bandSize, stepSize };\n}\n"],"mappings":"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"}

package/dist/sparkline/sparkline2.js

@@ -1,12 +1,12 @@
 import { attachInternals as e } from "../internal/utils/a11y.js";
 import { statusStateStyles as t, supportStateStyles as n, useStyles as r } from "../internal/styles/index.js";
-import i from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js";
+import i from "../_virtual/_@oxc-project_runtime@0.155.0/helpers/esm/decorate.js";
 import { calculateDomain as a, calculateSymbolIndices as o, calculateViewBox as s, toAreaPath as c, toColumnRects as l, toInterpolation as u, toLinePath as d, toPlotPoints as f, toValidData as p, toWinLossRects as m, valueToY as h } from "./sparkline.utils.js";
 import g from "./sparkline.js";
 import { LitElement as _, html as v, nothing as y, svg as b } from "lit";
 import { property as x } from "lit/decorators/property.js";
 import { state as S } from "lit/decorators/state.js";
-//#region src/sparkline/sparkline.ts
+// src/sparkline/sparkline.ts
 var C = class extends _ {
 	constructor(...e) {
 		super(...e), this.data = [], this.mark = "line", this.interpolation = "linear", this.denoteFirst = !1, this.denoteLast = !1, this.denoteMin = !1, this.denoteMax = !1, this.intervalLength = .6, this.validData = [];
@@ -21,7 +21,7 @@ var C = class extends _ {
 	static {
 		this.metadata = {
 			tag: "nve-sparkline",
-			version: "2.20.1"
+			version: "2.20.2"
 		};
 	}
 	render() {
@@ -122,7 +122,6 @@ i([x({ type: Array })], C.prototype, "data", void 0), i([x({ type: String })], C
 	type: Number,
 	attribute: "interval-length"
 })], C.prototype, "intervalLength", void 0), i([x({ type: Number })], C.prototype, "min", void 0), i([x({ type: Number })], C.prototype, "max", void 0), i([S()], C.prototype, "validData", void 0);
-//#endregion
 export { C as Sparkline };
 
 //# sourceMappingURL=sparkline2.js.map