@nvidia-elements/core 2.20.1 → 2.20.3

package/dist/select/select.js.map

@@ -1 +1 @@
-{"version":3,"file":"select.js","names":[],"sources":["../../src/select/select.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  --padding: 0 var(--nve-ref-size-800) 0 var(--nve-ref-size-200);\n  --font-size: var(--nve-ref-font-size-100);\n  --height: var(--nve-ref-size-800);\n  --background: var(--nve-sys-interaction-field-background);\n  --color: var(--nve-sys-interaction-field-color);\n  --border-radius: var(--nve-ref-border-radius-sm);\n  --border: var(--nve-ref-border-width-md) solid transparent;\n  --border-bottom: var(--border);\n  --gap: var(--nve-ref-space-xxs);\n  --cursor: pointer;\n  --font-weight: normal;\n  --text-align: start;\n  --scroll-height: 50vh;\n  --width: 100%;\n  --control-width: var(--width);\n  --max-width: 100%;\n  --min-width: fit-content;\n  --_input-background: var(--background);\n  --_icon-color: var(--color);\n  --_gap: var(--gap);\n  --size: 1;\n  --_height: var(--height);\n  contain: initial;\n  width: var(--width);\n  max-width: var(--max-width);\n  min-width: var(--min-width);\n}\n\n:host([fit-text]) {\n  --min-width: initial;\n}\n\n[internal-host] {\n  position: relative;\n}\n\n[input] {\n  scroll-behavior: smooth;\n  scrollbar-color: color-mix(in oklab, var(--nve-sys-scrollbar-thumb-color) 100%, currentColor 20%)\n    var(--nve-sys-scrollbar-track-color);\n  scrollbar-width: var(--nve-sys-scrollbar-width);\n  height: var(--_height);\n  background: var(--background);\n  border: var(--border);\n  border-bottom: var(--border-bottom);\n  border-radius: var(--border-radius);\n  width: var(--control-width);\n  color: var(--color);\n  align-items: center;\n  display: flex;\n  align-content: stretch;\n  position: relative;\n}\n\n[name='caret'] {\n  right: var(--nve-ref-size-300);\n  align-self: center;\n  pointer-events: none;\n  position: absolute;\n  transition: transform var(--nve-ref-animation-duration-200) cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n::slotted(select) {\n  appearance: none !important;\n  color: var(--color) !important;\n  padding: var(--padding) !important;\n  font-size: var(--font-size) !important;\n  cursor: var(--cursor) !important;\n  font-weight: var(--font-weight) !important;\n  text-align: var(--text-align) !important;\n  height: var(--_height) !important;\n  width: 100% !important;\n  border: 0 !important;\n  background: none !important;\n  display: block !important;\n}\n\n[internal-host]:has(nve-menu:focus-within) [input] {\n  outline: 0 !important;\n}\n\n:host(:state(selected)) {\n  --font-weight: var(--nve-ref-font-weight-semibold);\n}\n\n:host([fit-content]:state(multiple)) [internal-host]:has(nve-tag) ::slotted(select) {\n  width: var(--nve-ref-size-1000) !important;\n}\n\n:host(:state(multiple)) {\n  --padding: 0 var(--nve-ref-size-300) 0 var(--nve-ref-size-100);\n}\n\n:host(:state(multiple)) [input] {\n  padding: var(--padding);\n}\n\n:host(:state(multiple)) .tags {\n  width: fit-content;\n  display: flex;\n  gap: var(--gap);\n}\n\n:host(:state(multiple)) .tags-label {\n  padding: 0 var(--nve-ref-size-200);\n  font-size: var(--font-size);\n  cursor: var(--cursor);\n  font-weight: var(--font-weight);\n  position: absolute;\n  left: 0;\n  display: none;\n  pointer-events: none;\n}\n\n:host(:state(multiple-overflow)) .tags,\n:host([multiple-overflow]) .tags {\n  opacity: 0;\n  pointer-events: none;\n  position: absolute;\n}\n\n:host(:state(multiple-overflow)) .tags-label,\n:host([multiple-overflow]) .tags-label,\n.placeholder.tags-label {\n  display: block !important;\n}\n\n:host([size]:state(multiple)) .tags,\n:host([size]:state(multiple)) .tags-label {\n  display: none !important;\n}\n\n:host(:state(multiple)) ::slotted(select[multiple]) {\n  opacity: 0 !important;\n}\n\n:host(:state(size)) {\n  --_row-height: calc(var(--height) * var(--size) + var(--gap) * (var(--size) - 1));\n  --_height: calc(var(--_row-height) + var(--nve-ref-border-width-md) * 2);\n}\n\n:host(:state(size)) [input] {\n  overflow: auto;\n  display: block;\n}\n\n:host(:state(size)) [input] slot:not([name]) {\n  display: none;\n}\n\n:host([layout*='horizontal'][size]) ::slotted(label) {\n  padding-block-start: var(--nve-ref-size-100) !important;\n  align-self: start !important;\n}\n\n:host([layout*='horizontal'][size]) slot[name='label'] {\n  align-self: start;\n}\n\n:host([status='error']),\n:host(:state(invalid)),\n:host(:state(error)) {\n  --border: var(--nve-ref-border-width-md) solid var(--nve-sys-support-danger-emphasis-color);\n}\n\n:host([status='success']),\n:host(:state(success)) {\n  --border: var(--nve-ref-border-width-md) solid var(--nve-sys-support-success-emphasis-color);\n}\n\n:host(:state(disabled)) {\n  --border: var(--nve-ref-border-width-md) solid transparent;\n}\n\nnve-tag {\n  --background: color-mix(in oklab, var(--color) 15%, var(--_input-background));\n  --padding: var(--nve-ref-size-100) var(--nve-ref-size-200);\n  --cursor: pointer !important;\n}\n\n:host(:state(disabled)) nve-tag {\n  pointer-events: none !important;\n  --cursor: not-allowed !important;\n}\n\nnve-dropdown {\n  --padding: var(--nve-ref-size-200);\n}\n\nnve-menu {\n  --max-height: var(--scroll-height);\n  --gap: var(--_gap);\n}\n\nnve-menu-item {\n  --text-transform: initial;\n  contain: content;\n  content-visibility: auto;\n}\n\nnve-menu-item:not(:state(selected)) nve-icon[name='check'] {\n  opacity: 0;\n}\n\nnve-menu-item nve-icon {\n  --color: inherit;\n}\n\nslot:not([name]),\nslot[name*='option-'] {\n  display: contents;\n}\n\n:host([container='flat']) {\n  --background: unset;\n  --border-radius: 0;\n  --box-shadow: none;\n  --border-bottom: var(--nve-ref-border-width-md) solid var(--nve-ref-border-color-muted);\n}\n\n:host([container='flat']) [input] {\n  background: inherit;\n}\n\n:host([container='flat']) nve-tag {\n  --background: var(--nve-sys-interaction-field-background);\n}\n\n:host([container='flat']:focus-within) {\n  --border-bottom: var(--nve-ref-border-width-md) solid var(--nve-ref-border-color-emphasis);\n}\n\n:host([container='flat'][size]) {\n  --border-bottom: 0 !important;\n}\n\n:host([container='flat']:focus-within) [input] {\n  outline: 0 !important;\n}\n\n:host([container='inline']) {\n  --border-radius: 0;\n  --box-shadow: none;\n}\n\n:host([container='inline']) [input] {\n  background: inherit;\n}\n"],"mappings":""}
+{"version":3,"file":"select.js","names":["select_default"],"sources":["../../src/select/select.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  --padding: 0 var(--nve-ref-size-800) 0 var(--nve-ref-size-200);\n  --font-size: var(--nve-ref-font-size-100);\n  --height: var(--nve-ref-size-800);\n  --background: var(--nve-sys-interaction-field-background);\n  --color: var(--nve-sys-interaction-field-color);\n  --border-radius: var(--nve-ref-border-radius-sm);\n  --border: var(--nve-ref-border-width-md) solid transparent;\n  --border-bottom: var(--border);\n  --gap: var(--nve-ref-space-xxs);\n  --cursor: pointer;\n  --font-weight: normal;\n  --text-align: start;\n  --scroll-height: 50vh;\n  --width: 100%;\n  --control-width: var(--width);\n  --max-width: 100%;\n  --min-width: fit-content;\n  --_input-background: var(--background);\n  --_icon-color: var(--color);\n  --_gap: var(--gap);\n  --size: 1;\n  --_height: var(--height);\n  contain: initial;\n  width: var(--width);\n  max-width: var(--max-width);\n  min-width: var(--min-width);\n}\n\n:host([fit-text]) {\n  --min-width: initial;\n}\n\n[internal-host] {\n  position: relative;\n}\n\n[input] {\n  scroll-behavior: smooth;\n  scrollbar-color: color-mix(in oklab, var(--nve-sys-scrollbar-thumb-color) 100%, currentColor 20%)\n    var(--nve-sys-scrollbar-track-color);\n  scrollbar-width: var(--nve-sys-scrollbar-width);\n  height: var(--_height);\n  background: var(--background);\n  border: var(--border);\n  border-bottom: var(--border-bottom);\n  border-radius: var(--border-radius);\n  width: var(--control-width);\n  color: var(--color);\n  align-items: center;\n  display: flex;\n  align-content: stretch;\n  position: relative;\n}\n\n[name='caret'] {\n  right: var(--nve-ref-size-300);\n  align-self: center;\n  pointer-events: none;\n  position: absolute;\n  transition: transform var(--nve-ref-animation-duration-200) cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n::slotted(select) {\n  appearance: none !important;\n  color: var(--color) !important;\n  padding: var(--padding) !important;\n  font-size: var(--font-size) !important;\n  cursor: var(--cursor) !important;\n  font-weight: var(--font-weight) !important;\n  text-align: var(--text-align) !important;\n  height: var(--_height) !important;\n  width: 100% !important;\n  border: 0 !important;\n  background: none !important;\n  display: block !important;\n}\n\n[internal-host]:has(nve-menu:focus-within) [input] {\n  outline: 0 !important;\n}\n\n:host(:state(selected)) {\n  --font-weight: var(--nve-ref-font-weight-semibold);\n}\n\n:host([fit-content]:state(multiple)) [internal-host]:has(nve-tag) ::slotted(select) {\n  width: var(--nve-ref-size-1000) !important;\n}\n\n:host(:state(multiple)) {\n  --padding: 0 var(--nve-ref-size-300) 0 var(--nve-ref-size-100);\n}\n\n:host(:state(multiple)) [input] {\n  padding: var(--padding);\n}\n\n:host(:state(multiple)) .tags {\n  width: fit-content;\n  display: flex;\n  gap: var(--gap);\n}\n\n:host(:state(multiple)) .tags-label {\n  padding: 0 var(--nve-ref-size-200);\n  font-size: var(--font-size);\n  cursor: var(--cursor);\n  font-weight: var(--font-weight);\n  position: absolute;\n  left: 0;\n  display: none;\n  pointer-events: none;\n}\n\n:host(:state(multiple-overflow)) .tags,\n:host([multiple-overflow]) .tags {\n  opacity: 0;\n  pointer-events: none;\n  position: absolute;\n}\n\n:host(:state(multiple-overflow)) .tags-label,\n:host([multiple-overflow]) .tags-label,\n.placeholder.tags-label {\n  display: block !important;\n}\n\n:host([size]:state(multiple)) .tags,\n:host([size]:state(multiple)) .tags-label {\n  display: none !important;\n}\n\n:host(:state(multiple)) ::slotted(select[multiple]) {\n  opacity: 0 !important;\n}\n\n:host(:state(size)) {\n  --_row-height: calc(var(--height) * var(--size) + var(--gap) * (var(--size) - 1));\n  --_height: calc(var(--_row-height) + var(--nve-ref-border-width-md) * 2);\n}\n\n:host(:state(size)) [input] {\n  overflow: auto;\n  display: block;\n}\n\n:host(:state(size)) [input] slot:not([name]) {\n  display: none;\n}\n\n:host([layout*='horizontal'][size]) ::slotted(label) {\n  padding-block-start: var(--nve-ref-size-100) !important;\n  align-self: start !important;\n}\n\n:host([layout*='horizontal'][size]) slot[name='label'] {\n  align-self: start;\n}\n\n:host([status='error']),\n:host(:state(invalid)),\n:host(:state(error)) {\n  --border: var(--nve-ref-border-width-md) solid var(--nve-sys-support-danger-emphasis-color);\n}\n\n:host([status='success']),\n:host(:state(success)) {\n  --border: var(--nve-ref-border-width-md) solid var(--nve-sys-support-success-emphasis-color);\n}\n\n:host(:state(disabled)) {\n  --border: var(--nve-ref-border-width-md) solid transparent;\n}\n\nnve-tag {\n  --background: color-mix(in oklab, var(--color) 15%, var(--_input-background));\n  --padding: var(--nve-ref-size-100) var(--nve-ref-size-200);\n  --cursor: pointer !important;\n}\n\n:host(:state(disabled)) nve-tag {\n  pointer-events: none !important;\n  --cursor: not-allowed !important;\n}\n\nnve-dropdown {\n  --padding: var(--nve-ref-size-200);\n}\n\nnve-menu {\n  --max-height: var(--scroll-height);\n  --gap: var(--_gap);\n}\n\nnve-menu-item {\n  --text-transform: initial;\n  contain: content;\n  content-visibility: auto;\n}\n\nnve-menu-item:not(:state(selected)) nve-icon[name='check'] {\n  opacity: 0;\n}\n\nnve-menu-item nve-icon {\n  --color: inherit;\n}\n\nslot:not([name]),\nslot[name*='option-'] {\n  display: contents;\n}\n\n:host([container='flat']) {\n  --background: unset;\n  --border-radius: 0;\n  --box-shadow: none;\n  --border-bottom: var(--nve-ref-border-width-md) solid var(--nve-ref-border-color-muted);\n}\n\n:host([container='flat']) [input] {\n  background: inherit;\n}\n\n:host([container='flat']) nve-tag {\n  --background: var(--nve-sys-interaction-field-background);\n}\n\n:host([container='flat']:focus-within) {\n  --border-bottom: var(--nve-ref-border-width-md) solid var(--nve-ref-border-color-emphasis);\n}\n\n:host([container='flat'][size]) {\n  --border-bottom: 0 !important;\n}\n\n:host([container='flat']:focus-within) [input] {\n  outline: 0 !important;\n}\n\n:host([container='inline']) {\n  --border-radius: 0;\n  --box-shadow: none;\n}\n\n:host([container='inline']) [input] {\n  background: inherit;\n}\n"],"mappings":""}

package/dist/select/select2.js

@@ -3,7 +3,7 @@ import { focusElementTimeout as t, onListboxActivate as n } from "../internal/ut
 import { appendRootNodeStyle as r, getElementUpdate as i } from "../internal/utils/dom.js";
 import { scopedRegistry as a } from "../internal/decorators/scoped-registry.js";
 import { useStyles as o } from "../internal/styles/index.js";
-import s from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js";
+import s from "../_virtual/_@oxc-project_runtime@0.155.0/helpers/esm/decorate.js";
 import { Icon as c } from "../icon/icon2.js";
 import { Control as l } from "../forms/control/control2.js";
 import { Tag as u } from "../tag/tag2.js";
@@ -16,7 +16,7 @@ import { html as g, nothing as _ } from "lit";
 import { property as v } from "lit/decorators/property.js";
 import { I18nController as y, i18n as b } from "@nvidia-elements/foundations/internal/i18n";
 import { ifDefined as x } from "lit/directives/if-defined.js";
-//#region src/select/select.ts
+// src/select/select.ts
 var S = {
 	select: "select",
 	selected: "selected"
@@ -30,7 +30,7 @@ var S = {
 	static {
 		this.metadata = {
 			tag: "nve-select",
-			version: "2.20.1"
+			version: "2.20.3"
 		};
 	}
 	static {
@@ -146,7 +146,6 @@ s([v({
 	type: String,
 	reflect: !0
 })], C.prototype, "container", void 0), s([v({ type: Object })], C.prototype, "i18n", void 0), C = s([b(), a()], C);
-//#endregion
 export { C as Select };
 
 //# sourceMappingURL=select2.js.map

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.3"
 		};
 	}
 	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.3"
 		};
 	}
 	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