@nvidia-elements/core 2.7.3 → 2.8.1

package/dist/radio/radio-group2.js

@@ -1,7 +1,7 @@
 import { audit as e } from "../internal/controllers/audit.controller.js";
 import { typeSSR as t } from "../internal/controllers/type-ssr.controller.js";
 import { useStyles as n } from "../internal/styles/index.js";
-import r from "../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorate.js";
+import r from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js";
 import { ControlGroup as i } from "../forms/control-group/control-group2.js";
 import a from "./radio-group.js";
 //#region src/radio/radio-group.ts
@@ -12,7 +12,7 @@ var o = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-radio-group",
-			version: "2.7.3",
+			version: "2.8.1",
 			children: [
 				"label",
 				"nve-control-message",

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

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

package/dist/radio/radio2.js

@@ -1,7 +1,7 @@
 import { audit as e } from "../internal/controllers/audit.controller.js";
 import { hostAttr as t } from "../internal/decorators/host-attr.js";
 import { useStyles as n } from "../internal/styles/index.js";
-import r from "../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorate.js";
+import r from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js";
 import { Control as i } from "../forms/control/control2.js";
 import a from "./radio.js";
 //#region src/radio/radio.ts
@@ -15,7 +15,7 @@ var o = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-radio",
-			version: "2.7.3",
+			version: "2.8.1",
 			children: [
 				"label",
 				"input",

package/dist/radio/radio2.js.map

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

package/dist/range/range.examples.json

@@ -81,7 +81,7 @@
     {
       "id": "range-custom-styles",
       "name": "CustomStyles",
-      "template": "<nve-range\n  style=\"\n    --background: #76b900;\n    --track-background: red;\n    --track-height: 4px;\n    --track-border-radius: 16px;\n    --thumb-background: black;\n    --thumb-border: inset 0 0 0 2px white;\n    --thumb-width: 14px;\n    --thumb-height: 14px;\n  \"\n>\n  <input type=\"range\" aria-label=\"range\" />\n</nve-range>\n",
+      "template": "<nve-range\n  style=\"--background: #76b900; --track-background: red; --track-height: 4px; --track-border-radius: 16px; --thumb-background: black; --thumb-border: inset 0 0 0 2px white; --thumb-width: 14px; --thumb-height: 14px\"\n>\n  <input type=\"range\" aria-label=\"range\" />\n</nve-range>\n",
       "summary": "Range component can have its visual styles overwritten to achieve custom themes.",
       "description": "",
       "composition": false,

package/dist/range/range2.js

@@ -1,6 +1,6 @@
 import { appendRootNodeStyle as e, getElementUpdate as t } from "../internal/utils/dom.js";
 import { useStyles as n } from "../internal/styles/index.js";
-import r from "../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorate.js";
+import r from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js";
 import { Control as i } from "../forms/control/control2.js";
 import a from "./range.global.js";
 import o from "./range.js";
@@ -17,7 +17,7 @@ var d = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-range",
-			version: "2.7.3"
+			version: "2.8.1"
 		};
 	}
 	connectedCallback() {
@@ -40,8 +40,8 @@ var d = class extends i {
 	#t(e) {
 		let t = Array.from(e.options), n = this.input?.min ? parseFloat(this.input.min) : 0, r = this.input?.max ? parseFloat(this.input.max) : 100;
 		return s`<div class="datalist-labels">${t.map((e) => {
-			let t = parseFloat(e.value), i = (t - n) / (r - n) * 100;
-			return s`<span class="datalist-tick" style="${this.orientation === "vertical" ? `bottom: ${i}%; transform: translateY(${i}%)` : `left: ${i}%; transform: translateX(-${i}%)`}">${e.textContent || t}</span>`;
+			let t = parseFloat(e.value), i = (t - n) / (r - n) * 100, a = this.orientation === "vertical" ? `bottom: ${i}%; transform: translateY(${i}%)` : `left: ${i}%; transform: translateX(-${i}%)`;
+			return s`<span class="datalist-tick" style="${a}">${e.textContent || t}</span>`;
 		})}</div>`;
 	}
 };

package/dist/range/range2.js.map

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

package/dist/resize-handle/resize-handle.examples.json

@@ -23,7 +23,7 @@
     {
       "id": "resize-handle-split-horizontal",
       "name": "SplitHorizontal",
-      "template": "<section\n  id=\"split-horizontal-demo\"\n  style=\"\n    display: grid;\n    width: 250px;\n    height: 250px;\n    grid-template-rows: 1fr auto 1fr;\n    border: 1px solid var(--nve-ref-border-color);\n  \"\n>\n  <div style=\"background: hsla(0, 0%, 65%, 0.1)\"></div>\n  <nve-resize-handle min=\"20\" max=\"230\" value=\"125\" step=\"20\"></nve-resize-handle>\n  <div></div>\n</section>\n<script type=\"module\">\n  const handle = document.querySelector(\"#split-horizontal-demo nve-resize-handle\");\n  const split = document.querySelector(\"#split-horizontal-demo\");\n  handle.addEventListener(\"input\", (e) => (split.style.gridTemplateRows = \"1fr auto \" + e.target.value + \"px\"));\n</script>\n",
+      "template": "<section id=\"split-horizontal-demo\" style=\"display: grid; width: 250px; height: 250px; grid-template-rows: 1fr auto 1fr; border: 1px solid var(--nve-ref-border-color)\">\n  <div style=\"background: hsla(0, 0%, 65%, 0.1)\"></div>\n  <nve-resize-handle min=\"20\" max=\"230\" value=\"125\" step=\"20\"></nve-resize-handle>\n  <div></div>\n</section>\n<script type=\"module\">\n  const handle = document.querySelector(\"#split-horizontal-demo nve-resize-handle\");\n  const split = document.querySelector(\"#split-horizontal-demo\");\n  handle.addEventListener(\"input\", (e) => (split.style.gridTemplateRows = \"1fr auto \" + e.target.value + \"px\"));\n</script>\n",
       "summary": "Horizontal split pane with draggable divider that adjusts top and bottom panel heights.",
       "description": "",
       "composition": false,
@@ -32,7 +32,7 @@
     {
       "id": "resize-handle-split-vertical",
       "name": "SplitVertical",
-      "template": "<section\n  id=\"split-vertical-demo\"\n  style=\"\n    display: grid;\n    width: 250px;\n    height: 250px;\n    grid-template-columns: 1fr auto 1fr;\n    border: 1px solid var(--nve-ref-border-color);\n  \"\n>\n  <div style=\"background: hsla(0, 0%, 65%, 0.1)\"></div>\n  <nve-resize-handle orientation=\"vertical\" min=\"20\" max=\"230\" value=\"125\" step=\"20\"></nve-resize-handle>\n  <div></div>\n</section>\n<script type=\"module\">\n  const handle = document.querySelector(\"#split-vertical-demo nve-resize-handle\");\n  const split = document.querySelector(\"#split-vertical-demo\");\n  handle.addEventListener(\"input\", (e) => (split.style.gridTemplateColumns = e.target.value + \"px auto 1fr\"));\n</script>\n",
+      "template": "<section id=\"split-vertical-demo\" style=\"display: grid; width: 250px; height: 250px; grid-template-columns: 1fr auto 1fr; border: 1px solid var(--nve-ref-border-color)\">\n  <div style=\"background: hsla(0, 0%, 65%, 0.1)\"></div>\n  <nve-resize-handle orientation=\"vertical\" min=\"20\" max=\"230\" value=\"125\" step=\"20\"></nve-resize-handle>\n  <div></div>\n</section>\n<script type=\"module\">\n  const handle = document.querySelector(\"#split-vertical-demo nve-resize-handle\");\n  const split = document.querySelector(\"#split-vertical-demo\");\n  handle.addEventListener(\"input\", (e) => (split.style.gridTemplateColumns = e.target.value + \"px auto 1fr\"));\n</script>\n",
       "summary": "Vertical split pane with draggable divider that adjusts left and right panel widths.",
       "description": "",
       "composition": false,
@@ -41,7 +41,7 @@
     {
       "id": "resize-handle-form",
       "name": "Form",
-      "template": "<form id=\"form-demo\" nve-layout=\"column gap:lg\">\n  <section\n    style=\"\n      display: grid;\n      width: 250px;\n      height: 250px;\n      grid-template-rows: 1fr auto 1fr;\n      border: 1px solid var(--nve-ref-border-color);\n    \"\n  >\n    <div></div>\n    <nve-resize-handle name=\"resize\" min=\"20\" max=\"230\" value=\"125\" step=\"20\"></nve-resize-handle>\n    <div style=\"background: hsla(0, 0%, 65%, 0.1)\"></div>\n  </section>\n  <nve-button>submit</nve-button>\n</form>\n<script type=\"module\">\n  const form = document.querySelector(\"#form-demo\");\n  const split = document.querySelector(\"#form-demo section\");\n  const handle = document.querySelector(\"#form-demo nve-resize-handle\");\n  form.addEventListener(\"submit\", (e) => {\n    e.preventDefault();\n    console.log(Object.fromEntries(new FormData(form)));\n    console.log(handle.form);\n  });\n  handle.addEventListener(\"change\", (e) => {\n    console.log(\"change\", e.target.value);\n  });\n  handle.addEventListener(\"input\", (e) => {\n    console.log(\"input\", e.target.value);\n    split.style.gridTemplateRows = \"1fr auto \" + e.target.value + \"px\";\n  });\n</script>\n",
+      "template": "<form id=\"form-demo\" nve-layout=\"column gap:lg\">\n  <section style=\"display: grid; width: 250px; height: 250px; grid-template-rows: 1fr auto 1fr; border: 1px solid var(--nve-ref-border-color)\">\n    <div></div>\n    <nve-resize-handle name=\"resize\" min=\"20\" max=\"230\" value=\"125\" step=\"20\"></nve-resize-handle>\n    <div style=\"background: hsla(0, 0%, 65%, 0.1)\"></div>\n  </section>\n  <nve-button>submit</nve-button>\n</form>\n<script type=\"module\">\n  const form = document.querySelector(\"#form-demo\");\n  const split = document.querySelector(\"#form-demo section\");\n  const handle = document.querySelector(\"#form-demo nve-resize-handle\");\n  form.addEventListener(\"submit\", (e) => {\n    e.preventDefault();\n    console.log(Object.fromEntries(new FormData(form)));\n    console.log(handle.form);\n  });\n  handle.addEventListener(\"change\", (e) => {\n    console.log(\"change\", e.target.value);\n  });\n  handle.addEventListener(\"input\", (e) => {\n    console.log(\"input\", e.target.value);\n    split.style.gridTemplateRows = \"1fr auto \" + e.target.value + \"px\";\n  });\n</script>\n",
       "summary": "Resize handle as a form control with name attribute for submitting resize values.",
       "description": "",
       "composition": false,
@@ -50,7 +50,7 @@
     {
       "id": "resize-handle-prevent",
       "name": "PreventDefault",
-      "template": "<form id=\"prevent-default-demo\" nve-layout=\"column gap:lg\">\n  <section\n    style=\"\n      display: grid;\n      width: 250px;\n      height: 250px;\n      grid-template-rows: 1fr auto 1fr;\n      border: 1px solid var(--nve-ref-border-color);\n    \"\n  >\n    <div></div>\n    <nve-resize-handle name=\"resize\" min=\"20\" max=\"230\" value=\"125\" step=\"20\"></nve-resize-handle>\n    <div style=\"background: hsla(0, 0%, 65%, 0.1)\"></div>\n  </section>\n</form>\n<script type=\"module\">\n  const split = document.querySelector(\"#prevent-default-demo section\");\n  const handle = document.querySelector(\"#prevent-default-demo nve-resize-handle\");\n  handle.addEventListener(\"toggle\", (e) => {\n    e.preventDefault();\n    console.log(\"toggle defaultPrevented:\", e.defaultPrevented);\n  });\n  handle.addEventListener(\"input\", (e) => {\n    split.style.gridTemplateRows = \"1fr auto \" + e.target.value + \"px\";\n  });\n</script>\n",
+      "template": "<form id=\"prevent-default-demo\" nve-layout=\"column gap:lg\">\n  <section style=\"display: grid; width: 250px; height: 250px; grid-template-rows: 1fr auto 1fr; border: 1px solid var(--nve-ref-border-color)\">\n    <div></div>\n    <nve-resize-handle name=\"resize\" min=\"20\" max=\"230\" value=\"125\" step=\"20\"></nve-resize-handle>\n    <div style=\"background: hsla(0, 0%, 65%, 0.1)\"></div>\n  </section>\n</form>\n<script type=\"module\">\n  const split = document.querySelector(\"#prevent-default-demo section\");\n  const handle = document.querySelector(\"#prevent-default-demo nve-resize-handle\");\n  handle.addEventListener(\"toggle\", (e) => {\n    e.preventDefault();\n    console.log(\"toggle defaultPrevented:\", e.defaultPrevented);\n  });\n  handle.addEventListener(\"input\", (e) => {\n    split.style.gridTemplateRows = \"1fr auto \" + e.target.value + \"px\";\n  });\n</script>\n",
       "summary": "Resize handle with prevented default toggle to disable snap-to-boundary on double-click. Use when the default collapse/expand behavior conflicts with custom resize constraints or when you need full control over toggle logic.",
       "description": "",
       "composition": false,

package/dist/resize-handle/resize-handle2.js

@@ -1,7 +1,7 @@
 import { GestureController as e } from "../internal/controllers/gesture.controller.js";
 import { I18nController as t } from "../internal/controllers/i18n.controller.js";
 import { useStyles as n } from "../internal/styles/index.js";
-import r from "../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorate.js";
+import r from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js";
 import i from "./resize-handle.js";
 import { LitElement as a, html as o } from "lit";
 import { property as s } from "lit/decorators/property.js";
@@ -18,7 +18,7 @@ var u = class extends c(a) {
 	static {
 		this.metadata = {
 			tag: "nve-resize-handle",
-			version: "2.7.3",
+			version: "2.8.1",
 			valueSchema: { type: "number" }
 		};
 	}

package/dist/resize-handle/resize-handle2.js.map

@@ -1 +1 @@
-{"version":3,"file":"resize-handle2.js","names":["#range","#i18nController","#gestureController","#setInput","#setChange","#dragPointerId","#dragStart","#dragEnd","#cancelDrag","#dragMove","#offset","#handleGesture","#handlePointerInput","#toggle","#updateValue"],"sources":["../../src/resize-handle/resize-handle.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 { ifDefined } from 'lit/directives/if-defined.js';\nimport { property } from 'lit/decorators/property.js';\nimport { FormControlMixin } from '@nvidia-elements/forms/mixins';\nimport {\n  GestureController,\n  I18nController,\n  useStyles,\n  type Gesture,\n  type UnhandledPointerInput\n} from '@nvidia-elements/core/internal';\nimport styles from './resize-handle.css?inline';\n\n/**\n * @element nve-resize-handle\n * @description A resize-handle slider is a control that enables users to resize views or panels vertically or horizontally.\n * @documentation https://nvidia.github.io/elements/docs/elements/resize-handle/\n * @since 1.27.0\n * @entrypoint \\@nvidia-elements/core/resize-handle\n * @event toggle - Dispatched when the resize handle is double clicked.\n * @cssprop --background\n * @cssprop --line-width\n * @cssprop --target-size\n * @cssprop --cursor\n\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/slider/\n *\n */\nexport class ResizeHandle extends FormControlMixin<typeof LitElement, number>(LitElement) {\n  /**\n   * Determines the orientation direction of the resize handle.\n   */\n  @property({ type: String, reflect: true }) orientation?: 'horizontal' | 'vertical' = 'horizontal';\n\n  /**\n   * Determines the min resize value.\n   */\n  @property({ type: Number, reflect: true }) min = 0;\n\n  /**\n   * Determines the max resize value.\n   */\n  @property({ type: Number, reflect: true }) max = 100;\n\n  /**\n   * Determines the value step change.\n   */\n  @property({ type: Number, reflect: true }) step = 10;\n\n  static styles = useStyles([styles]);\n\n  get #range() {\n    return this.shadowRoot!.querySelector('input')!;\n  }\n\n  static readonly metadata = {\n    tag: 'nve-resize-handle',\n    version: '0.0.0',\n    valueSchema: {\n      type: 'number' as const\n    }\n  };\n\n  readonly #i18nController: I18nController<this> = new I18nController<this>(this);\n\n  readonly #gestureController: GestureController;\n\n  #dragPointerId?: number;\n\n  /**\n   * Updates internal string values for internationalization.\n   */\n  @property({ type: Object }) i18n = this.#i18nController.i18n;\n\n  #offset = 0;\n\n  render() {\n    return html`\n      <div internal-host>\n        <div class=\"line\" part=\"_line\"></div>\n        <input aria-label=${ifDefined(this.ariaLabel ?? this.i18n.resize)} type=\"range\" min=${this.min} max=${this.max} .valueAsNumber=${this.valueAsNumber} @input=${(e: Event) => this.#setInput((e.target as HTMLInputElement).valueAsNumber)} @change=${(e: Event) => this.#setChange((e.target as HTMLInputElement).valueAsNumber)} step=${this.step} />\n      </div>\n    `;\n  }\n\n  constructor() {\n    super();\n    this.value = this.value ?? 50;\n    this.#offset = this.valueAsNumber;\n    this.#gestureController = new GestureController(this, {\n      getCapabilities: () => ({ drag: true, pan: false, pinch: false, wheel: false })\n    });\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this._internals.role = 'none';\n    this.addEventListener('nve-gesture', this.#handleGesture as EventListener);\n    this.addEventListener('nve-pointer-input', this.#handlePointerInput as EventListener);\n  }\n\n  disconnectedCallback() {\n    this.removeEventListener('nve-gesture', this.#handleGesture as EventListener);\n    this.removeEventListener('nve-pointer-input', this.#handlePointerInput as EventListener);\n    this.#cancelDrag();\n    super.disconnectedCallback();\n  }\n\n  firstUpdated(props: PropertyValues) {\n    super.firstUpdated(props);\n    this.#gestureController.target = this;\n    this.addEventListener('dblclick', () => {\n      if (!this.dispatchEvent(new CustomEvent('toggle', { cancelable: true, bubbles: true, composed: true }))) {\n        return;\n      }\n      this.#toggle();\n    });\n  }\n\n  #toggle() {\n    const value = this.valueAsNumber <= this.max && this.valueAsNumber !== this.min ? this.min : this.max;\n    this.#setInput(value);\n    this.#setChange(value);\n  }\n\n  #handlePointerInput = (event: CustomEvent<UnhandledPointerInput>): void => {\n    if (\n      event.detail.kind === 'pointerdown' &&\n      event.detail.event.button === 0 &&\n      event.detail.event.isPrimary &&\n      this.#dragPointerId === undefined\n    ) {\n      this.#dragStart(event.detail.event.pointerId);\n    }\n    if (event.detail.event.pointerId !== this.#dragPointerId) return;\n    if (event.detail.kind === 'pointerup') this.#dragEnd();\n    if (event.detail.kind === 'pointercancel') this.#cancelDrag();\n  };\n\n  #handleGesture = (event: CustomEvent<Gesture<undefined>>): void => {\n    if (event.detail.kind === 'drag' && event.detail.event.pointerId === this.#dragPointerId) {\n      this.#dragMove(event.detail);\n    }\n  };\n\n  #dragStart(pointerId: number) {\n    this.#dragPointerId = pointerId;\n    this.#range.step = '1';\n    this._internals.states.add('active');\n    this.#offset = this.valueAsNumber;\n  }\n\n  #dragMove(gesture: Extract<Gesture<undefined>, { kind: 'drag' }>) {\n    const offset =\n      (this.orientation === 'vertical' ? gesture.movementX : -gesture.movementY) * (this.dir === 'rtl' ? -1 : 1);\n    this.#offset = Math.max(this.min, Math.min(this.max, this.#offset + offset));\n    this.#setInput(this.#offset);\n  }\n\n  #dragEnd() {\n    this.#offset = this.valueAsNumber;\n    this.#range.step = `${this.step}`;\n    this.#dragPointerId = undefined;\n    this._internals.states.delete('active');\n    this.#setChange(this.#offset);\n  }\n\n  #cancelDrag() {\n    if (this.#dragPointerId === undefined) return;\n    this.#dragPointerId = undefined;\n    this.#range.step = `${this.step}`;\n    this._internals.states.delete('active');\n  }\n\n  #setInput(value: number) {\n    this.#updateValue(value);\n    this.dispatchInputEvent();\n  }\n\n  #setChange(value: number) {\n    this.#updateValue(value);\n    this.dispatchChangeEvent();\n  }\n\n  #updateValue(value: number) {\n    if (value <= this.max && value >= this.min) {\n      this.valueAsNumber = value;\n    }\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"resize-handle2.js","names":[],"sources":["../../src/resize-handle/resize-handle.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 { ifDefined } from 'lit/directives/if-defined.js';\nimport { property } from 'lit/decorators/property.js';\nimport { FormControlMixin } from '@nvidia-elements/forms/mixins';\nimport {\n  GestureController,\n  I18nController,\n  useStyles,\n  type Gesture,\n  type UnhandledPointerInput\n} from '@nvidia-elements/core/internal';\nimport styles from './resize-handle.css?inline';\n\n/**\n * @element nve-resize-handle\n * @description A resize-handle slider is a control that enables users to resize views or panels vertically or horizontally.\n * @documentation https://nvidia.github.io/elements/docs/elements/resize-handle/\n * @since 1.27.0\n * @entrypoint \\@nvidia-elements/core/resize-handle\n * @event toggle - Dispatched when the resize handle is double clicked.\n * @cssprop --background\n * @cssprop --line-width\n * @cssprop --target-size\n * @cssprop --cursor\n\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/slider/\n *\n */\nexport class ResizeHandle extends FormControlMixin<typeof LitElement, number>(LitElement) {\n  /**\n   * Determines the orientation direction of the resize handle.\n   */\n  @property({ type: String, reflect: true }) orientation?: 'horizontal' | 'vertical' = 'horizontal';\n\n  /**\n   * Determines the min resize value.\n   */\n  @property({ type: Number, reflect: true }) min = 0;\n\n  /**\n   * Determines the max resize value.\n   */\n  @property({ type: Number, reflect: true }) max = 100;\n\n  /**\n   * Determines the value step change.\n   */\n  @property({ type: Number, reflect: true }) step = 10;\n\n  static styles = useStyles([styles]);\n\n  get #range() {\n    return this.shadowRoot!.querySelector('input')!;\n  }\n\n  static readonly metadata = {\n    tag: 'nve-resize-handle',\n    version: '0.0.0',\n    valueSchema: {\n      type: 'number' as const\n    }\n  };\n\n  readonly #i18nController: I18nController<this> = new I18nController<this>(this);\n\n  readonly #gestureController: GestureController;\n\n  #dragPointerId?: number;\n\n  /**\n   * Updates internal string values for internationalization.\n   */\n  @property({ type: Object }) i18n = this.#i18nController.i18n;\n\n  #offset = 0;\n\n  render() {\n    return html`\n      <div internal-host>\n        <div class=\"line\" part=\"_line\"></div>\n        <input aria-label=${ifDefined(this.ariaLabel ?? this.i18n.resize)} type=\"range\" min=${this.min} max=${this.max} .valueAsNumber=${this.valueAsNumber} @input=${(e: Event) => this.#setInput((e.target as HTMLInputElement).valueAsNumber)} @change=${(e: Event) => this.#setChange((e.target as HTMLInputElement).valueAsNumber)} step=${this.step} />\n      </div>\n    `;\n  }\n\n  constructor() {\n    super();\n    this.value = this.value ?? 50;\n    this.#offset = this.valueAsNumber;\n    this.#gestureController = new GestureController(this, {\n      getCapabilities: () => ({ drag: true, pan: false, pinch: false, wheel: false })\n    });\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this._internals.role = 'none';\n    this.addEventListener('nve-gesture', this.#handleGesture as EventListener);\n    this.addEventListener('nve-pointer-input', this.#handlePointerInput as EventListener);\n  }\n\n  disconnectedCallback() {\n    this.removeEventListener('nve-gesture', this.#handleGesture as EventListener);\n    this.removeEventListener('nve-pointer-input', this.#handlePointerInput as EventListener);\n    this.#cancelDrag();\n    super.disconnectedCallback();\n  }\n\n  firstUpdated(props: PropertyValues) {\n    super.firstUpdated(props);\n    this.#gestureController.target = this;\n    this.addEventListener('dblclick', () => {\n      if (!this.dispatchEvent(new CustomEvent('toggle', { cancelable: true, bubbles: true, composed: true }))) {\n        return;\n      }\n      this.#toggle();\n    });\n  }\n\n  #toggle() {\n    const value = this.valueAsNumber <= this.max && this.valueAsNumber !== this.min ? this.min : this.max;\n    this.#setInput(value);\n    this.#setChange(value);\n  }\n\n  #handlePointerInput = (event: CustomEvent<UnhandledPointerInput>): void => {\n    if (\n      event.detail.kind === 'pointerdown' &&\n      event.detail.event.button === 0 &&\n      event.detail.event.isPrimary &&\n      this.#dragPointerId === undefined\n    ) {\n      this.#dragStart(event.detail.event.pointerId);\n    }\n    if (event.detail.event.pointerId !== this.#dragPointerId) return;\n    if (event.detail.kind === 'pointerup') this.#dragEnd();\n    if (event.detail.kind === 'pointercancel') this.#cancelDrag();\n  };\n\n  #handleGesture = (event: CustomEvent<Gesture<undefined>>): void => {\n    if (event.detail.kind === 'drag' && event.detail.event.pointerId === this.#dragPointerId) {\n      this.#dragMove(event.detail);\n    }\n  };\n\n  #dragStart(pointerId: number) {\n    this.#dragPointerId = pointerId;\n    this.#range.step = '1';\n    this._internals.states.add('active');\n    this.#offset = this.valueAsNumber;\n  }\n\n  #dragMove(gesture: Extract<Gesture<undefined>, { kind: 'drag' }>) {\n    const offset =\n      (this.orientation === 'vertical' ? gesture.movementX : -gesture.movementY) * (this.dir === 'rtl' ? -1 : 1);\n    this.#offset = Math.max(this.min, Math.min(this.max, this.#offset + offset));\n    this.#setInput(this.#offset);\n  }\n\n  #dragEnd() {\n    this.#offset = this.valueAsNumber;\n    this.#range.step = `${this.step}`;\n    this.#dragPointerId = undefined;\n    this._internals.states.delete('active');\n    this.#setChange(this.#offset);\n  }\n\n  #cancelDrag() {\n    if (this.#dragPointerId === undefined) return;\n    this.#dragPointerId = undefined;\n    this.#range.step = `${this.step}`;\n    this._internals.states.delete('active');\n  }\n\n  #setInput(value: number) {\n    this.#updateValue(value);\n    this.dispatchInputEvent();\n  }\n\n  #setChange(value: number) {\n    this.#updateValue(value);\n    this.dispatchChangeEvent();\n  }\n\n  #updateValue(value: number) {\n    if (value <= this.max && value >= this.min) {\n      this.valueAsNumber = value;\n    }\n  }\n}\n"],"mappings":"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"}

package/dist/search/search2.js

@@ -1,6 +1,6 @@
 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.139.0/helpers/esm/decorate.js";
+import n from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js";
 import { Control as r } from "../forms/control/control2.js";
 import { IconButton as i } from "../icon-button/icon-button2.js";
 import { inputStyles as a } from "../input/input2.js";
@@ -22,7 +22,7 @@ var l = class extends r {
 	static {
 		this.metadata = {
 			tag: "nve-search",
-			version: "2.7.3"
+			version: "2.8.1"
 		};
 	}
 	static {

package/dist/search/search2.js.map

@@ -1 +1 @@
-{"version":3,"file":"search2.js","names":[],"sources":["../../src/search/search.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 { property } from 'lit/decorators/property.js';\nimport type { ContainerElement } from '@nvidia-elements/core/internal';\nimport { scopedRegistry, useStyles } from '@nvidia-elements/core/internal';\nimport { Control } from '@nvidia-elements/core/forms';\nimport { inputStyles } from '@nvidia-elements/core/input';\nimport { IconButton } from '@nvidia-elements/core/icon-button';\nimport styles from './search.css?inline';\n\n/**\n * @element nve-search\n * @description A search is a control that enables users to enter text to search.\n * @documentation https://nvidia.github.io/elements/docs/elements/search/\n * @since 0.3.0\n * @entrypoint \\@nvidia-elements/core/search\n * @cssprop --padding\n * @cssprop --font-size\n * @cssprop --height\n * @cssprop --background\n * @cssprop --border-radius\n * @cssprop --border\n * @cssprop --cursor\n * @csspart icon-button - The icon button element\n * @aria https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/search\n */\n@scopedRegistry()\nexport class Search extends Control implements ContainerElement {\n  /**\n   * Reduces the visual container for a minimal borderless appearance while preserving whitespace bounds.\n   * Use when embedding within another container such as a toolbar.\n   */\n  @property({ type: String, reflect: true }) container?: 'flat';\n\n  /**\n   * Sets the rounded visual style of the input.\n   */\n  @property({ type: Boolean, reflect: true }) rounded = false;\n\n  static styles = useStyles([...Control.styles, inputStyles, styles]);\n\n  static readonly metadata = {\n    tag: 'nve-search',\n    version: '0.0.0'\n  };\n\n  static elementDefinitions = {\n    [IconButton.metadata.tag]: IconButton\n  };\n\n  protected get prefixContent() {\n    return html`<nve-icon-button part=\"icon-button\" icon-name=\"search\" container=\"inline\" aria-hidden=\"true\" readonly></nve-icon-button>`;\n  }\n}\n"],"mappings":";;;;;;;;;;AA6BO,IAAA,IAAA,cAAqB,EAAoC;;8BAUR;;;gBAEtC,EAAU;GAAC,GAAG,EAAQ;GAAQ;GAAa;EAAM,CAAC;;;kBAEvC;GACzB,KAAK;GACL,SAAS;EACX;;;4BAE4B,GACzB,EAAW,SAAS,MAAM,EAC7B;;CAEA,IAAc,gBAAgB;EAC5B,OAAO,CAAI;CACb;AACF;GArBG,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,aAAA,KAAA,CAAA,MAKxC,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,WAAA,KAAA,CAAA,UAX3C,EAAe,CAAA,GAAA,CAAA"}
+{"version":3,"file":"search2.js","names":[],"sources":["../../src/search/search.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 { property } from 'lit/decorators/property.js';\nimport type { ContainerElement } from '@nvidia-elements/core/internal';\nimport { scopedRegistry, useStyles } from '@nvidia-elements/core/internal';\nimport { Control } from '@nvidia-elements/core/forms';\nimport { inputStyles } from '@nvidia-elements/core/input';\nimport { IconButton } from '@nvidia-elements/core/icon-button';\nimport styles from './search.css?inline';\n\n/**\n * @element nve-search\n * @description A search is a control that enables users to enter text to search.\n * @documentation https://nvidia.github.io/elements/docs/elements/search/\n * @since 0.3.0\n * @entrypoint \\@nvidia-elements/core/search\n * @cssprop --padding\n * @cssprop --font-size\n * @cssprop --height\n * @cssprop --background\n * @cssprop --border-radius\n * @cssprop --border\n * @cssprop --cursor\n * @csspart icon-button - The icon button element\n * @aria https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/search\n */\n@scopedRegistry()\nexport class Search extends Control implements ContainerElement {\n  /**\n   * Reduces the visual container for a minimal borderless appearance while preserving whitespace bounds.\n   * Use when embedding within another container such as a toolbar.\n   */\n  @property({ type: String, reflect: true }) container?: 'flat';\n\n  /**\n   * Sets the rounded visual style of the input.\n   */\n  @property({ type: Boolean, reflect: true }) rounded = false;\n\n  static styles = useStyles([...Control.styles, inputStyles, styles]);\n\n  static readonly metadata = {\n    tag: 'nve-search',\n    version: '0.0.0'\n  };\n\n  static elementDefinitions = {\n    [IconButton.metadata.tag]: IconButton\n  };\n\n  protected get prefixContent() {\n    return html`<nve-icon-button part=\"icon-button\" icon-name=\"search\" container=\"inline\" aria-hidden=\"true\" readonly></nve-icon-button>`;\n  }\n}\n"],"mappings":";;;;;;;;;;AA6BO,IAAM,IAAN,cAAqB,EAAoC;;EAUR,aAAA,KAAA,UAAA;;;EAEtC,KAAA,SAAA,EAAU;GAAC,GAAG,EAAQ;GAAQ;GAAa;EAAM,CAAC;;;EAEvC,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;EACX;;;EAE4B,KAAA,qBAAA,GACzB,EAAW,SAAS,MAAM,EAC7B;;CAEA,IAAc,gBAAgB;EAC5B,OAAO,CAAI;CACb;AACF;AArBG,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,aAAA,KAAA,CAAA,GAKxC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,WAAA,KAAA,CAAA,GAX3C,IAAA,EAAA,CAAA,EAAe,CAAA,GAAA,CAAA"}

package/dist/select/select2.js

@@ -4,7 +4,7 @@ import { focusElementTimeout as r, onListboxActivate as i } from "../internal/ut
 import { appendRootNodeStyle as a, getElementUpdate as o } from "../internal/utils/dom.js";
 import { scopedRegistry as s } from "../internal/decorators/scoped-registry.js";
 import { useStyles as c } from "../internal/styles/index.js";
-import l from "../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorate.js";
+import l from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js";
 import { Icon as u } from "../icon/icon2.js";
 import { Control as d } from "../forms/control/control2.js";
 import { Tag as f } from "../tag/tag2.js";
@@ -27,7 +27,7 @@ var S = class extends d {
 	static {
 		this.metadata = {
 			tag: "nve-select",
-			version: "2.7.3"
+			version: "2.8.1"
 		};
 	}
 	static {

package/dist/select/select2.js.map

@@ -1 +1 @@
-{"version":3,"file":"select2.js","names":["#i18nController","#select","#options","#dropdown","#menuItems","#input","#tags","#caret","#placeholderOption","#multipleSelectLabel","#selectValue","#menu","#closeDropdown","#openDropdown","#setupCustomSelectUI","#observers","#syncOptionSelectedStates","#disconnectObservers","#setupOverflowListener","#syncSelectValueStates","#optionObservers","#setupObservers","#updateMultipleOverflow"],"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  i18n,\n  I18nController,\n  onChildListMutation,\n  getElementUpdate,\n  scopedRegistry,\n  appendRootNodeStyle\n} from '@nvidia-elements/core/internal';\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\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);\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":[],"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  i18n,\n  I18nController,\n  onChildListMutation,\n  getElementUpdate,\n  scopedRegistry,\n  appendRootNodeStyle\n} from '@nvidia-elements/core/internal';\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\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);\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/skeleton2.js

@@ -1,6 +1,6 @@
 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.139.0/helpers/esm/decorate.js";
+import n from "../_virtual/_@oxc-project_runtime@0.147.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";
@@ -15,7 +15,7 @@ var s = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-skeleton",
-			version: "2.7.3"
+			version: "2.8.1"
 		};
 	}
 	render() {

package/dist/skeleton/skeleton2.js.map

@@ -1 +1 @@
-{"version":3,"file":"skeleton2.js","names":["#slotchange"],"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;;6BAec;;;gBAdrC,EAAU,CAAC,CAAM,CAAC;;;kBAEP;GACzB,KAAK;GACL,SAAS;EACX;;CAcA,SAAS;EACP,OAAO,CAAI,oEAGa,KAAKA,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;GA9CG,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,UAAA,KAAA,CAAA,MAGxC,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,MAGxC,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,UAAA,KAAA,CAAA"}
+{"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"}

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

@@ -1,7 +1,7 @@
 import { I18nController as e } from "../internal/controllers/i18n.controller.js";
 import { scopedRegistry as t } from "../internal/decorators/scoped-registry.js";
 import { useStyles as n } from "../internal/styles/index.js";
-import r from "../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorate.js";
+import r from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js";
 import { Icon as i } from "../icon/icon2.js";
 import a from "./sort-button.js";
 import { LitElement as o, html as s } from "lit";
@@ -19,7 +19,7 @@ var u = {
 	static {
 		this.metadata = {
 			tag: "nve-sort-button",
-			version: "2.7.3"
+			version: "2.8.1"
 		};
 	}
 	static {

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

@@ -1 +1 @@
-{"version":3,"file":"sort-button2.js","names":["#i18nController","#onClick"],"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, I18nController, scopedRegistry } from '@nvidia-elements/core/internal';\nimport styles from './sort-button.css?inline';\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);\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":";;;;;;;;;;AAUA,IAAM,IAAW;CACf,MAAM;CACN,WAAW;CACX,YAAY;AACd,GAiBO,IAAA,cAAyB,EAAuB,CAAU,CAAC,CAAC;;gBACjD,EAAU,CAAC,CAAM,CAAC;;;kBAEP;GACzB,KAAK;GACL,SAAS;EACX;;;4BAE4B,GACzB,EAAK,SAAS,MAAM,EACvB;;CAOA;CAOA,SAAS;EACP,OAAO,CAAI,gEAEuB,KAAK,SAAS,eAAe,oBAAoB,iBAAiB;CAGtG;CAEA,cAAc;EAEZ,AADA,MAAM,eAlB+E,kBAE/C,IAAI,EAAqB,IAAI,eAKlC,KAAKA,GAAgB,sBA0BvC;GAEf,AADA,KAAK,WAAW,YAAY,GAAG,KAAKA,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,KAAKC,EAAQ;CAC9C;CAEA,uBAAuB;EAErB,AADA,MAAM,qBAAqB,GAC3B,KAAK,oBAAoB,SAAS,KAAKA,EAAQ;CACjD;CAEA;AAUF;GA3CG,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,MAOxC,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,UAvB3B,EAAe,CAAA,GAAA,CAAA"}
+{"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, I18nController, scopedRegistry } from '@nvidia-elements/core/internal';\nimport styles from './sort-button.css?inline';\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);\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":";;;;;;;;;;AAUA,IAAM,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,IAAI,GAKlC,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"}

package/dist/sparkline/sparkline.examples.json

@@ -32,7 +32,7 @@
     {
       "id": "sparkline-inline-with-text",
       "name": "InlineWithText",
-      "template": "<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\"\n    ></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\"\n    ></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\"\n    ></nve-sparkline\n    >.\n  </p>\n</div>\n",
+      "template": "<div nve-layout=\"column gap:lg\">\n  <p nve-text=\"body loose\">\n    This week's lane keeping safety score trend\n    <nve-sparkline mark=\"area\" status=\"success\" data=\"[86, 87, 86, 88, 89, 90, 92, 93]\" 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 mark=\"column\" status=\"accent\" data=\"[16, 14, 15, 13, 12, 11, 10]\" aria-label=\"lane keeping interventions per shift\"></nve-sparkline>, and predominantly successful route outcomes:\n    <nve-sparkline mark=\"winloss\" status=\"success\" data=\"[1, 1, -1, 1, 0, 1, 1]\" aria-label=\"lane keeping route outcomes\"></nve-sparkline>.\n  </p>\n</div>\n",
       "summary": "Sparklines inherit font size and flow inline with surrounding text and metrics.",
       "description": "",
       "composition": false,
@@ -41,7 +41,7 @@
     {
       "id": "sparkline-data-grid",
       "name": "DataGrid",
-      "template": "<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\"\n      ></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\"\n      ></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\"\n      ></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\"\n      ></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\"\n      ></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\"\n      ></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\"\n      ></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\"\n      ></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\"\n      ></nve-sparkline>\n    </nve-grid-cell>\n  </nve-grid-row>\n</nve-grid>\n",
+      "template": "<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 aria-label=\"Lane Keeping 30 day safety score trend\" mark=\"area\" status=\"success\" min=\"0\" max=\"100\" data=\"[86, 87, 86, 88, 89, 90, 92, 93]\" size=\"md\"></nve-sparkline>\n    </nve-grid-cell>\n    <nve-grid-cell>\n      <nve-sparkline aria-label=\"Lane Keeping interventions per shift\" mark=\"column\" status=\"success\" min=\"0\" max=\"50\" data=\"[12, 11, 12, 10, 9, 8, 7, 6]\" size=\"md\"></nve-sparkline>\n    </nve-grid-cell>\n    <nve-grid-cell>\n      <nve-sparkline aria-label=\"Lane Keeping route outcomes\" mark=\"winloss\" data=\"[1, 1, 1, 0, 1, 0, 1, 1]\" 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 aria-label=\"Object Detection 30 day safety score trend\" mark=\"area\" status=\"warning\" min=\"0\" max=\"100\" data=\"[76, 88, 72, 79, 85, 70, 83, 74]\" size=\"md\"></nve-sparkline>\n    </nve-grid-cell>\n    <nve-grid-cell>\n      <nve-sparkline aria-label=\"Object Detection interventions per shift\" mark=\"column\" status=\"warning\" min=\"0\" max=\"50\" data=\"[18, 20, 17, 19, 20, 21, 19, 22]\" size=\"md\"></nve-sparkline>\n    </nve-grid-cell>\n    <nve-grid-cell>\n      <nve-sparkline aria-label=\"Object Detection route outcomes\" mark=\"winloss\" data=\"[1, 0, -1, 1, 0, -1, 0, 1]\" 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 aria-label=\"Path Planning 30 day safety score trend\" mark=\"area\" status=\"danger\" min=\"0\" max=\"100\" data=\"[58, 54, 49, 45, 40, 36, 31, 27]\" size=\"md\"></nve-sparkline>\n    </nve-grid-cell>\n    <nve-grid-cell>\n      <nve-sparkline aria-label=\"Path Planning interventions per shift\" mark=\"column\" status=\"danger\" min=\"0\" max=\"50\" data=\"[24, 26, 29, 31, 34, 36, 39, 42]\" size=\"md\"></nve-sparkline>\n    </nve-grid-cell>\n    <nve-grid-cell>\n      <nve-sparkline aria-label=\"Path Planning route outcomes\" mark=\"winloss\" data=\"[1, -1, 0, -1, -1, -1, 0, -1]\" size=\"md\"></nve-sparkline>\n    </nve-grid-cell>\n  </nve-grid-row>\n</nve-grid>\n",
       "summary": "Embed sparklines in grid cells to add compact trend context to tabular data.",
       "description": "",
       "composition": false,

package/dist/sparkline/sparkline.utils.js

@@ -70,9 +70,7 @@ function f(e, t, n = 100) {
 		case "linear":
 			r = h(e);
 			break;
-		default:
-			r = h(e);
-			break;
+		default: r = h(e);
 	}
 	let i = e[e.length - 1], a = e[0];
 	return r += ` L ${i.x.toFixed(2)} ${n.toFixed(2)}`, r += ` L ${a.x.toFixed(2)} ${n.toFixed(2)} Z`, r;

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

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