@nvidia-elements/core 0.0.10 → 0.0.12

package/dist/sparkline/sparkline2.js

@@ -21,7 +21,7 @@ var C = class extends _ {
 	static {
 		this.metadata = {
 			tag: "nve-sparkline",
-			version: "0.0.10"
+			version: "0.0.12"
 		};
 	}
 	render() {
@@ -50,9 +50,17 @@ var C = class extends _ {
 		this.style.setProperty("--_aspect-ratio", i.toFixed(4));
 	}
 	#t(e, t) {
-		let n = a(this.validData, this.min, this.max);
+		let n = a(this.validData, {
+			explicitMin: this.min,
+			explicitMax: this.max
+		});
 		if (!n) return y;
-		let r = h(0, n.min, n.max), i = n.min < 0 && n.max > 0, s = f(this.validData, n.min, n.max, e), l = o(this.validData, this.denoteFirst, this.denoteLast, this.denoteMin, this.denoteMax), p = u(this.interpolation), m = d(s, p, e), g = this.mark === "area" || this.mark === "gradient" ? c(s, p, 100) : "";
+		let r = h(0, n), i = n.min < 0 && n.max > 0, s = f(this.validData, n, { width: e }), l = o(this.validData, {
+			first: this.denoteFirst,
+			last: this.denoteLast,
+			min: this.denoteMin,
+			max: this.denoteMax
+		}), p = u(this.interpolation), m = d(s, p, e), g = this.mark === "area" || this.mark === "gradient" ? c(s, p, 100) : "";
 		return b`<svg viewBox="0 0 ${e} ${t}" preserveAspectRatio="xMidYMid meet" aria-hidden="true">${this.mark === "gradient" ? this.#n(t) : y} ${g.length ? this.mark === "gradient" ? b`<path class="area" d="${g}" style="fill:url(#gradient)"></path>` : b`<path class="area" d="${g}"></path>` : y} ${i ? this.#r(r, e) : y} ${m ? b`<path class="line" d="${m}" vector-effect="non-scaling-stroke"></path>` : y}</svg> ${this.#i(s, l)}`;
 	}
 	#n(e) {
@@ -68,14 +76,21 @@ var C = class extends _ {
 		})}`;
 	}
 	#a(e, t) {
-		let n = a(this.validData, this.min, this.max, !0);
+		let n = a(this.validData, {
+			explicitMin: this.min,
+			explicitMax: this.max,
+			includeZero: !0
+		});
 		if (!n) return y;
-		let r = h(0, n.min, n.max), i = n.min < 0 && n.max > 0, o = l(f(this.validData, n.min, n.max, e), r, e);
+		let r = h(0, n), i = n.min < 0 && n.max > 0, o = l(f(this.validData, n, { width: e }), r, e);
 		return b`<svg viewBox="0 0 ${e} ${t}" preserveAspectRatio="xMidYMid meet" aria-hidden="true">${i ? this.#r(r, e) : y} ${o.map((e) => b`<rect class="column" x="${e.x.toFixed(2)}" y="${e.y.toFixed(2)}" width="${e.width.toFixed(2)}" height="${e.height.toFixed(2)}"></rect>`)}</svg>`;
 	}
 	#o(e, t, n) {
 		if (this.validData.length === 0) return y;
-		let r = m(this.validData, e, t, n);
+		let r = m(this.validData, e, {
+			width: t,
+			height: n
+		});
 		return b`<svg viewBox="0 0 ${t} ${n}" preserveAspectRatio="xMidYMid meet" aria-hidden="true">${this.#r(e, t)} ${r.map((e) => b`<rect class="${e.className}" x="${e.x.toFixed(2)}" y="${e.y.toFixed(2)}" width="${e.width.toFixed(2)}" height="${e.height.toFixed(2)}"></rect>`)}</svg>`;
 	}
 };

package/dist/sparkline/sparkline2.js.map

@@ -1 +1 @@
-{"version":3,"file":"sparkline2.js","names":["#renderChart","#renderLineVariant","#renderColumn","#renderWinLoss","#renderGradientDef","#renderZeroLine","#renderAccents"],"sources":["../../src/sparkline/sparkline.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { PropertyValues, SVGTemplateResult } from 'lit';\nimport { html, LitElement, nothing, svg } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { state } from 'lit/decorators/state.js';\nimport type {\n  DataElement,\n  Interpolation,\n  Point,\n  SizeExpanded,\n  SparklineMark,\n  SupportStatus,\n  TaskStatus\n} from '@nvidia-elements/core/internal';\nimport { attachInternals, statusStateStyles, supportStateStyles, useStyles } from '@nvidia-elements/core/internal';\nimport {\n  calculateDomain,\n  calculateSymbolIndices,\n  calculateViewBox,\n  PRECISION,\n  toAreaPath,\n  toColumnRects,\n  toInterpolation,\n  toLinePath,\n  toPlotPoints,\n  toValidData,\n  toWinLossRects,\n  valueToY,\n  VIEW_HEIGHT\n} from './sparkline.utils.js';\nimport styles from './sparkline.css?inline';\n\n/**\n * @element nve-sparkline\n * @description A sparkline is a compact, word-sized chart with typographic scale, for data-dense layouts (text, tables, cards, dashboards).\n * @since 0.0.0\n * @entrypoint \\@nvidia-elements/core/sparkline\n * @cssprop --height - Height (defaults to 1em and scales with parent font-size).\n * @cssprop --line-color\n * @cssprop --line-width\n * @cssprop --fill-color - Color used by area and column marks.\n * @cssprop --gradient-max-color\n * @cssprop --gradient-min-color\n * @cssprop --zero-line-color\n * @cssprop --zero-line-width\n * @cssprop --win-color  Color used to represent positive values (wins).\n * @cssprop --loss-color Color used to represent negative values (losses).\n * @cssprop --draw-color Color used to represent zero values (draws / neutral outcomes).\n * @cssprop --symbol-color\n * @cssprop --symbol-border-color\n * @cssprop --symbol-border-width\n * @cssprop --symbol-radius - symbol circle radius in SVG units.\n * @aria https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img\n */\nexport class Sparkline extends LitElement implements DataElement<number[]> {\n  static styles = useStyles([styles, statusStateStyles, supportStateStyles]);\n\n  static readonly metadata = {\n    tag: 'nve-sparkline',\n    version: '0.0.0'\n  };\n\n  /** Numeric values representing a data series. */\n  @property({ type: Array }) data: number[] = [];\n\n  /** Controls the visual representation of data points. */\n  @property({ type: String }) mark: SparklineMark = 'line';\n\n  /** Controls how the chart connects intermediate values between points in a data series. Defaults to `linear`. */\n  @property({ type: String }) interpolation: Interpolation = 'linear';\n\n  /** Applies semantic status colors used across Elements status patterns. */\n  @property({ type: String, reflect: true }) status?: TaskStatus | SupportStatus;\n\n  /** Controls the sparkline size with explicit font-size tokens. Omit to auto-scale with parent font-size (1em). */\n  @property({ type: String, reflect: true }) size?: SizeExpanded;\n\n  /** Denotes the first data point by rendering a symbol at its position. */\n  @property({ type: Boolean, attribute: 'denote-first', reflect: true })\n  denoteFirst = false;\n\n  /** Denotes the last data point by rendering a symbol at its position. */\n  @property({ type: Boolean, attribute: 'denote-last', reflect: true })\n  denoteLast = false;\n\n  /** Denotes all minimum-value data points by rendering symbols at their positions. */\n  @property({ type: Boolean, attribute: 'denote-min', reflect: true })\n  denoteMin = false;\n\n  /** Denotes all maximum-value data points by rendering symbols at their positions. */\n  @property({ type: Boolean, attribute: 'denote-max', reflect: true })\n  denoteMax = false;\n\n  /** Controls spacing between points in a line, in em (1 = chart height). Defaults to `0.6`. */\n  @property({ type: Number, attribute: 'interval-length' }) intervalLength = 0.6;\n\n  /** Lower bound for the y-axis domain. When undefined, derives the bound from data. */\n  @property({ type: Number }) min?: number;\n\n  /** Upper bound for the y-axis domain. When undefined, derives the bound from data. */\n  @property({ type: Number }) max?: number;\n\n  /** Cached valid numeric values derived from data property. */\n  @state() private validData: number[] = [];\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  render() {\n    return html`<div internal-host>${this.#renderChart()}</div>`;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    this._internals.role = 'img';\n  }\n\n  willUpdate(changedProperties: PropertyValues<this>) {\n    super.willUpdate(changedProperties);\n\n    if (changedProperties.has('data')) {\n      this.validData = toValidData(this.data);\n    }\n  }\n\n  #renderChart(): SVGTemplateResult | typeof nothing {\n    const { width, height } = calculateViewBox(this.mark, this.validData.length, this.intervalLength);\n\n    switch (this.mark) {\n      case 'line':\n      case 'area':\n      case 'gradient':\n        return this.#renderLineVariant(width, height);\n      case 'column':\n        return this.#renderColumn(width, height);\n      case 'winloss':\n        return this.#renderWinLoss(VIEW_HEIGHT / 2, width, height);\n      default:\n        const _exhaustiveCheck: never = this.mark;\n        return nothing;\n    }\n  }\n\n  updated(props: PropertyValues<this>) {\n    super.updated(props);\n\n    const { width, height } = calculateViewBox(this.mark, this.validData.length, this.intervalLength);\n    const aspectRatio = width / height;\n    const validAspectRatio = Number.isFinite(aspectRatio) && aspectRatio > 0 ? aspectRatio : 1;\n    this.style.setProperty('--_aspect-ratio', validAspectRatio.toFixed(4));\n  }\n\n  #renderLineVariant(width: number, height: number) {\n    const domain = calculateDomain(this.validData, this.min, this.max);\n    if (!domain) return nothing;\n\n    const baselineY = valueToY(0, domain.min, domain.max);\n    const drawZeroLine = domain.min < 0 && domain.max > 0;\n\n    const plotPoints = toPlotPoints(this.validData, domain.min, domain.max, width);\n    const symbolIndices = calculateSymbolIndices(\n      this.validData,\n      this.denoteFirst,\n      this.denoteLast,\n      this.denoteMin,\n      this.denoteMax\n    );\n    const interpolation = toInterpolation(this.interpolation);\n\n    const linePath = toLinePath(plotPoints, interpolation, width);\n    const drawArea = this.mark === 'area' || this.mark === 'gradient';\n    const areaPath = drawArea ? toAreaPath(plotPoints, interpolation, VIEW_HEIGHT) : '';\n\n    return svg`\n      <svg viewBox=\"0 0 ${width} ${height}\" preserveAspectRatio=\"xMidYMid meet\" aria-hidden=\"true\">\n        ${this.mark === 'gradient' ? this.#renderGradientDef(height) : nothing}\n\n        ${\n          areaPath.length\n            ? this.mark === 'gradient'\n              ? svg`<path class=\"area\" d=${areaPath} style=\"fill: url(#gradient)\"></path>`\n              : svg`<path class=\"area\" d=${areaPath}></path>`\n            : nothing\n        }\n\n        ${drawZeroLine ? this.#renderZeroLine(baselineY, width) : nothing}\n\n        ${linePath ? svg`<path class=\"line\" d=${linePath} vector-effect=\"non-scaling-stroke\"></path>` : nothing}\n      </svg>\n      ${this.#renderAccents(plotPoints, symbolIndices)}\n    `;\n  }\n\n  #renderGradientDef(height: number) {\n    return svg`\n      <defs>\n        <linearGradient id=\"gradient\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"${height}\" gradientUnits=\"userSpaceOnUse\">\n          <stop offset=\"0%\" style=\"stop-color: var(--gradient-max-color)\"></stop>\n          <stop offset=\"100%\" style=\"stop-color: var(--gradient-min-color)\"></stop>\n        </linearGradient>\n      </defs>\n    `;\n  }\n\n  #renderZeroLine(position: number, width: number) {\n    return svg`\n      <line\n        class=\"zero-line\"\n        vector-effect=\"non-scaling-stroke\"\n        x1=\"0\"\n        y1=\"${position.toFixed(PRECISION)}\"\n        x2=\"${width}\"\n        y2=\"${position.toFixed(PRECISION)}\">\n      </line>\n    `;\n  }\n\n  #renderAccents(points: Point[], accentIndices: Set<number>) {\n    if (points.length === 0 || accentIndices.size === 0) return nothing;\n\n    return html`\n      ${Array.from(accentIndices).map(index => {\n        const point = points[index];\n        if (!point) return nothing;\n\n        const style = `--x: ${point.x.toFixed(PRECISION)}; --y: ${point.y.toFixed(PRECISION)}`;\n        return html`\n          <span style=${style} class=\"accent\"></span>\n        `;\n      })}\n    `;\n  }\n\n  #renderColumn(width: number, height: number) {\n    const domain = calculateDomain(this.validData, this.min, this.max, true);\n    if (!domain) return nothing;\n\n    const baselineY = valueToY(0, domain.min, domain.max);\n    const showZeroLine = domain.min < 0 && domain.max > 0;\n    const plotPoints = toPlotPoints(this.validData, domain.min, domain.max, width);\n    const rects = toColumnRects(plotPoints, baselineY, width);\n\n    return svg`\n      <svg viewBox=\"0 0 ${width} ${height}\" preserveAspectRatio=\"xMidYMid meet\" aria-hidden=\"true\">\n        ${showZeroLine ? this.#renderZeroLine(baselineY, width) : nothing}\n\n        ${rects.map(rect => {\n          return svg`<rect class=\"column\" x=\"${rect.x.toFixed(PRECISION)}\" y=\"${rect.y.toFixed(PRECISION)}\" width=\"${rect.width.toFixed(PRECISION)}\" height=\"${rect.height.toFixed(PRECISION)}\"></rect>`;\n        })}\n      </svg>\n    `;\n  }\n\n  #renderWinLoss(baselineY: number, width: number, height: number) {\n    if (this.validData.length === 0) return nothing;\n\n    const rects = toWinLossRects(this.validData, baselineY, width, height);\n\n    return svg`\n      <svg viewBox=\"0 0 ${width} ${height}\" preserveAspectRatio=\"xMidYMid meet\" aria-hidden=\"true\">\n        ${this.#renderZeroLine(baselineY, width)}\n\n        ${rects.map(rect => {\n          return svg`<rect class=\"${rect.className}\" x=\"${rect.x.toFixed(PRECISION)}\" y=\"${rect.y.toFixed(PRECISION)}\" width=\"${rect.width.toFixed(PRECISION)}\" height=\"${rect.height.toFixed(PRECISION)}\"></rect>`;\n        })}\n      </svg>\n    `;\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"sparkline2.js","names":["#renderChart","#renderLineVariant","#renderColumn","#renderWinLoss","#renderGradientDef","#renderZeroLine","#renderAccents"],"sources":["../../src/sparkline/sparkline.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { PropertyValues, SVGTemplateResult } from 'lit';\nimport { html, LitElement, nothing, svg } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { state } from 'lit/decorators/state.js';\nimport type {\n  DataElement,\n  Interpolation,\n  Point,\n  SizeExpanded,\n  SparklineMark,\n  SupportStatus,\n  TaskStatus\n} from '@nvidia-elements/core/internal';\nimport { attachInternals, statusStateStyles, supportStateStyles, useStyles } from '@nvidia-elements/core/internal';\nimport {\n  calculateDomain,\n  calculateSymbolIndices,\n  calculateViewBox,\n  PRECISION,\n  toAreaPath,\n  toColumnRects,\n  toInterpolation,\n  toLinePath,\n  toPlotPoints,\n  toValidData,\n  toWinLossRects,\n  valueToY,\n  VIEW_HEIGHT\n} from './sparkline.utils.js';\nimport styles from './sparkline.css?inline';\n\n/**\n * @element nve-sparkline\n * @description A sparkline is a compact, word-sized chart with typographic scale, for data-dense layouts (text, tables, cards, dashboards).\n * @since 0.0.0\n * @entrypoint \\@nvidia-elements/core/sparkline\n * @cssprop --height - Height (defaults to 1em and scales with parent font-size).\n * @cssprop --line-color\n * @cssprop --line-width\n * @cssprop --fill-color - Color used by area and column marks.\n * @cssprop --gradient-max-color\n * @cssprop --gradient-min-color\n * @cssprop --zero-line-color\n * @cssprop --zero-line-width\n * @cssprop --win-color  Color used to represent positive values (wins).\n * @cssprop --loss-color Color used to represent negative values (losses).\n * @cssprop --draw-color Color used to represent zero values (draws / neutral outcomes).\n * @cssprop --symbol-color\n * @cssprop --symbol-border-color\n * @cssprop --symbol-border-width\n * @cssprop --symbol-radius - symbol circle radius in SVG units.\n * @aria https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img\n */\nexport class Sparkline extends LitElement implements DataElement<number[]> {\n  static styles = useStyles([styles, statusStateStyles, supportStateStyles]);\n\n  static readonly metadata = {\n    tag: 'nve-sparkline',\n    version: '0.0.0'\n  };\n\n  /** Numeric values representing a data series. */\n  @property({ type: Array }) data: number[] = [];\n\n  /** Controls the visual representation of data points. */\n  @property({ type: String }) mark: SparklineMark = 'line';\n\n  /** Controls how the chart connects intermediate values between points in a data series. Defaults to `linear`. */\n  @property({ type: String }) interpolation: Interpolation = 'linear';\n\n  /** Applies semantic status colors used across Elements status patterns. */\n  @property({ type: String, reflect: true }) status?: TaskStatus | SupportStatus;\n\n  /** Controls the sparkline size with explicit font-size tokens. Omit to auto-scale with parent font-size (1em). */\n  @property({ type: String, reflect: true }) size?: SizeExpanded;\n\n  /** Denotes the first data point by rendering a symbol at its position. */\n  @property({ type: Boolean, attribute: 'denote-first', reflect: true })\n  denoteFirst = false;\n\n  /** Denotes the last data point by rendering a symbol at its position. */\n  @property({ type: Boolean, attribute: 'denote-last', reflect: true })\n  denoteLast = false;\n\n  /** Denotes all minimum-value data points by rendering symbols at their positions. */\n  @property({ type: Boolean, attribute: 'denote-min', reflect: true })\n  denoteMin = false;\n\n  /** Denotes all maximum-value data points by rendering symbols at their positions. */\n  @property({ type: Boolean, attribute: 'denote-max', reflect: true })\n  denoteMax = false;\n\n  /** Controls spacing between points in a line, in em (1 = chart height). Defaults to `0.6`. */\n  @property({ type: Number, attribute: 'interval-length' }) intervalLength = 0.6;\n\n  /** Lower bound for the y-axis domain. When undefined, derives the bound from data. */\n  @property({ type: Number }) min?: number;\n\n  /** Upper bound for the y-axis domain. When undefined, derives the bound from data. */\n  @property({ type: Number }) max?: number;\n\n  /** Cached valid numeric values derived from data property. */\n  @state() private validData: number[] = [];\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  render() {\n    return html`<div internal-host>${this.#renderChart()}</div>`;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    this._internals.role = 'img';\n  }\n\n  willUpdate(changedProperties: PropertyValues<this>) {\n    super.willUpdate(changedProperties);\n\n    if (changedProperties.has('data')) {\n      this.validData = toValidData(this.data);\n    }\n  }\n\n  #renderChart(): SVGTemplateResult | typeof nothing {\n    const { width, height } = calculateViewBox(this.mark, this.validData.length, this.intervalLength);\n\n    switch (this.mark) {\n      case 'line':\n      case 'area':\n      case 'gradient':\n        return this.#renderLineVariant(width, height);\n      case 'column':\n        return this.#renderColumn(width, height);\n      case 'winloss':\n        return this.#renderWinLoss(VIEW_HEIGHT / 2, width, height);\n      default:\n        const _exhaustiveCheck: never = this.mark;\n        return nothing;\n    }\n  }\n\n  updated(props: PropertyValues<this>) {\n    super.updated(props);\n\n    const { width, height } = calculateViewBox(this.mark, this.validData.length, this.intervalLength);\n    const aspectRatio = width / height;\n    const validAspectRatio = Number.isFinite(aspectRatio) && aspectRatio > 0 ? aspectRatio : 1;\n    this.style.setProperty('--_aspect-ratio', validAspectRatio.toFixed(4));\n  }\n\n  #renderLineVariant(width: number, height: number) {\n    const domain = calculateDomain(this.validData, { explicitMin: this.min, explicitMax: this.max });\n    if (!domain) return nothing;\n\n    const baselineY = valueToY(0, domain);\n    const drawZeroLine = domain.min < 0 && domain.max > 0;\n\n    const plotPoints = toPlotPoints(this.validData, domain, { width });\n    const symbolIndices = calculateSymbolIndices(this.validData, {\n      first: this.denoteFirst,\n      last: this.denoteLast,\n      min: this.denoteMin,\n      max: this.denoteMax\n    });\n    const interpolation = toInterpolation(this.interpolation);\n\n    const linePath = toLinePath(plotPoints, interpolation, width);\n    const drawArea = this.mark === 'area' || this.mark === 'gradient';\n    const areaPath = drawArea ? toAreaPath(plotPoints, interpolation, VIEW_HEIGHT) : '';\n\n    return svg`\n      <svg viewBox=\"0 0 ${width} ${height}\" preserveAspectRatio=\"xMidYMid meet\" aria-hidden=\"true\">\n        ${this.mark === 'gradient' ? this.#renderGradientDef(height) : nothing}\n\n        ${\n          areaPath.length\n            ? this.mark === 'gradient'\n              ? svg`<path class=\"area\" d=${areaPath} style=\"fill: url(#gradient)\"></path>`\n              : svg`<path class=\"area\" d=${areaPath}></path>`\n            : nothing\n        }\n\n        ${drawZeroLine ? this.#renderZeroLine(baselineY, width) : nothing}\n\n        ${linePath ? svg`<path class=\"line\" d=${linePath} vector-effect=\"non-scaling-stroke\"></path>` : nothing}\n      </svg>\n      ${this.#renderAccents(plotPoints, symbolIndices)}\n    `;\n  }\n\n  #renderGradientDef(height: number) {\n    return svg`\n      <defs>\n        <linearGradient id=\"gradient\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"${height}\" gradientUnits=\"userSpaceOnUse\">\n          <stop offset=\"0%\" style=\"stop-color: var(--gradient-max-color)\"></stop>\n          <stop offset=\"100%\" style=\"stop-color: var(--gradient-min-color)\"></stop>\n        </linearGradient>\n      </defs>\n    `;\n  }\n\n  #renderZeroLine(position: number, width: number) {\n    return svg`\n      <line\n        class=\"zero-line\"\n        vector-effect=\"non-scaling-stroke\"\n        x1=\"0\"\n        y1=\"${position.toFixed(PRECISION)}\"\n        x2=\"${width}\"\n        y2=\"${position.toFixed(PRECISION)}\">\n      </line>\n    `;\n  }\n\n  #renderAccents(points: Point[], accentIndices: Set<number>) {\n    if (points.length === 0 || accentIndices.size === 0) return nothing;\n\n    return html`\n      ${Array.from(accentIndices).map(index => {\n        const point = points[index];\n        if (!point) return nothing;\n\n        const style = `--x: ${point.x.toFixed(PRECISION)}; --y: ${point.y.toFixed(PRECISION)}`;\n        return html`\n          <span style=${style} class=\"accent\"></span>\n        `;\n      })}\n    `;\n  }\n\n  #renderColumn(width: number, height: number) {\n    const domain = calculateDomain(this.validData, {\n      explicitMin: this.min,\n      explicitMax: this.max,\n      includeZero: true\n    });\n    if (!domain) return nothing;\n\n    const baselineY = valueToY(0, domain);\n    const showZeroLine = domain.min < 0 && domain.max > 0;\n    const plotPoints = toPlotPoints(this.validData, domain, { width });\n    const rects = toColumnRects(plotPoints, baselineY, width);\n\n    return svg`\n      <svg viewBox=\"0 0 ${width} ${height}\" preserveAspectRatio=\"xMidYMid meet\" aria-hidden=\"true\">\n        ${showZeroLine ? this.#renderZeroLine(baselineY, width) : nothing}\n\n        ${rects.map(rect => {\n          return svg`<rect class=\"column\" x=\"${rect.x.toFixed(PRECISION)}\" y=\"${rect.y.toFixed(PRECISION)}\" width=\"${rect.width.toFixed(PRECISION)}\" height=\"${rect.height.toFixed(PRECISION)}\"></rect>`;\n        })}\n      </svg>\n    `;\n  }\n\n  #renderWinLoss(baselineY: number, width: number, height: number) {\n    if (this.validData.length === 0) return nothing;\n\n    const rects = toWinLossRects(this.validData, baselineY, { width, height });\n\n    return svg`\n      <svg viewBox=\"0 0 ${width} ${height}\" preserveAspectRatio=\"xMidYMid meet\" aria-hidden=\"true\">\n        ${this.#renderZeroLine(baselineY, width)}\n\n        ${rects.map(rect => {\n          return svg`<rect class=\"${rect.className}\" x=\"${rect.x.toFixed(PRECISION)}\" y=\"${rect.y.toFixed(PRECISION)}\" width=\"${rect.width.toFixed(PRECISION)}\" height=\"${rect.height.toFixed(PRECISION)}\"></rect>`;\n        })}\n      </svg>\n    `;\n  }\n}\n"],"mappings":"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"}

package/dist/star-rating/star-rating.examples.json

@@ -3,7 +3,7 @@
   "entrypoint": "@nvidia-elements/core/star-rating/star-rating.examples.json",
   "items": [
     {
-      "id": "core-star-rating_default",
+      "id": "star-rating",
       "name": "Default",
       "template": "<nve-star-rating>\n  <label>rate this input</label>\n  <input id=\"range\" type=\"range\" max=\"5\" value=\"3\" min=\"0\" />\n  <nve-control-message>message</nve-control-message>\n</nve-star-rating>\n",
       "summary": "Basic star rating using a range input. Use for collecting user feedback, product reviews, or satisfaction scores in forms.",
@@ -12,7 +12,7 @@
       "tags": []
     },
     {
-      "id": "core-star-rating_disabled",
+      "id": "star-rating-disabled",
       "name": "Disabled",
       "template": "<nve-star-rating>\n  <label>disabled</label>\n  <input type=\"range\" max=\"5\" value=\"3\" min=\"0\" disabled />\n  <nve-control-message>message</nve-control-message>\n</nve-star-rating>\n",
       "summary": "Disabled star rating for display-only contexts. Use when showing existing ratings that users cannot change.",
@@ -23,7 +23,7 @@
       ]
     },
     {
-      "id": "core-star-rating_half-star",
+      "id": "star-rating-half-star",
       "name": "HalfStar",
       "template": "<nve-star-rating>\n  <label>Half-star rating</label>\n  <input id=\"half-star-input\" type=\"range\" max=\"5\" value=\"3.5\" min=\"0\" step=\"0.5\" />\n  <nve-control-message>message</nve-control-message>\n</nve-star-rating>\n",
       "summary": "Half-star increments using step=\"0.5\" for more granular ratings. Ideal when detailed feedback requires finer rating precision.",
@@ -32,7 +32,7 @@
       "tags": []
     },
     {
-      "id": "core-star-rating_toggle",
+      "id": "star-rating-toggle",
       "name": "Toggle",
       "template": "<nve-star-rating>\n  <label>toggle/favorite</label>\n  <input type=\"range\" max=\"1\" value=\"0\" min=\"0\" />\n</nve-star-rating>\n<script type=\"module\">\n  const input = document.querySelector(\"#range\");\n  input.addEventListener(\"input\", () => console.log(\"input\", input.valueAsNumber));\n  input.addEventListener(\"change\", () => console.log(\"change\", input.valueAsNumber));\n</script>\n",
       "summary": "Single star toggle for favorite/bookmark functionality. Use with max=\"1\" for binary on/off states like wishlists or bookmarks.",

package/dist/star-rating/star-rating2.js

@@ -18,7 +18,7 @@ var l = class extends a {
 	static {
 		this.metadata = {
 			tag: "nve-star-rating",
-			version: "0.0.10"
+			version: "0.0.12"
 		};
 	}
 	static {

package/dist/steps/steps.examples.json

@@ -3,7 +3,7 @@
   "entrypoint": "@nvidia-elements/core/steps/steps.examples.json",
   "items": [
     {
-      "id": "core-steps_default",
+      "id": "steps",
       "name": "Default",
       "template": "<nve-steps behavior-select>\n  <nve-steps-item status=\"success\">Step 1</nve-steps-item>\n  <nve-steps-item status=\"danger\">Step 2</nve-steps-item>\n  <nve-steps-item selected>Step 3</nve-steps-item>\n  <nve-steps-item status=\"pending\">Step 4</nve-steps-item>\n  <nve-steps-item disabled>Disabled</nve-steps-item>\n</nve-steps>\n",
       "summary": "Interactive step indicator with status colors for multi-step workflows. Use for wizards, onboarding flows, or process tracking where users can navigate between steps.",
@@ -12,7 +12,7 @@
       "tags": []
     },
     {
-      "id": "core-steps_condensed",
+      "id": "steps-condensed",
       "name": "Condensed",
       "template": "<nve-steps behavior-select container=\"condensed\">\n  <nve-steps-item status=\"success\">Step 1</nve-steps-item>\n  <nve-steps-item status=\"danger\">Step 2</nve-steps-item>\n  <nve-steps-item selected>Step 3</nve-steps-item>\n  <nve-steps-item status=\"pending\">Step 4</nve-steps-item>\n  <nve-steps-item disabled>Disabled</nve-steps-item>\n</nve-steps>\n",
       "summary": "Condensed step indicator with reduced visual weight. Ideal for space-constrained layouts or secondary navigation where steps need less prominence.",
@@ -21,7 +21,7 @@
       "tags": []
     },
     {
-      "id": "core-steps_vertical-steps",
+      "id": "steps-vertical-steps",
       "name": "VerticalSteps",
       "template": "<nve-steps vertical behavior-select style=\"width: 150px\">\n  <nve-steps-item selected>Step 1</nve-steps-item>\n  <nve-steps-item>Step 2</nve-steps-item>\n  <nve-steps-item>Step 3</nve-steps-item>\n  <nve-steps-item disabled>Disabled</nve-steps-item>\n  <nve-steps-item>Step 5</nve-steps-item>\n</nve-steps>\n",
       "summary": "Vertical step layout for sidebar navigation or tall containers. Use when horizontal space constrains layout or steps require longer labels.",
@@ -30,7 +30,7 @@
       "tags": []
     },
     {
-      "id": "core-steps_vertical-condensed-steps",
+      "id": "steps-vertical-condensed-steps",
       "name": "VerticalCondensedSteps",
       "template": "<nve-steps vertical container=\"condensed\" behavior-select>\n  <nve-steps-item selected>Step 1</nve-steps-item>\n  <nve-steps-item>Step 2</nve-steps-item>\n  <nve-steps-item>Step 3</nve-steps-item>\n  <nve-steps-item disabled>Disabled</nve-steps-item>\n  <nve-steps-item>Step 5</nve-steps-item>\n</nve-steps>\n",
       "summary": "Vertical condensed steps combining both layout options. Ideal for dense sidebar navigation with minimal visual footprint.",
@@ -39,7 +39,7 @@
       "tags": []
     },
     {
-      "id": "core-steps_stateless-steps",
+      "id": "steps-stateless-steps",
       "name": "StatelessSteps",
       "template": "<nve-steps>\n  <nve-steps-item selected>Step 1</nve-steps-item>\n  <nve-steps-item>Step 2</nve-steps-item>\n  <nve-steps-item>Step 3</nve-steps-item>\n  <nve-steps-item>Step 4</nve-steps-item>\n  <nve-steps-item disabled>Disabled</nve-steps-item>\n</nve-steps>\n",
       "summary": "Display-only steps without interactive selection behavior. Use for showing progress indicators where external logic controls step navigation.",

package/dist/steps/steps2.js

@@ -23,7 +23,7 @@ var v = class extends r {
 	static {
 		this.metadata = {
 			tag: "nve-steps-item",
-			version: "0.0.10",
+			version: "0.0.12",
 			parents: ["nve-steps"]
 		};
 	}
@@ -67,7 +67,7 @@ var y = class extends f {
 	static {
 		this.metadata = {
 			tag: "nve-steps",
-			version: "0.0.10",
+			version: "0.0.12",
 			children: ["nve-steps-item"]
 		};
 	}

package/dist/switch/switch-group2.js

@@ -11,7 +11,7 @@ var a = class extends r {
 	static {
 		this.metadata = {
 			tag: "nve-switch-group",
-			version: "0.0.10",
+			version: "0.0.12",
 			children: [
 				"label",
 				"nve-control-message",

package/dist/switch/switch.examples.json

@@ -3,7 +3,7 @@
   "entrypoint": "@nvidia-elements/core/switch/switch.examples.json",
   "items": [
     {
-      "id": "core-switch_default",
+      "id": "switch",
       "name": "Default",
       "template": "<nve-switch>\n  <label>label</label>\n  <input type=\"checkbox\" />\n</nve-switch>\n",
       "summary": "Basic toggle switch for binary on/off controls and feature activation.",
@@ -12,7 +12,7 @@
       "tags": []
     },
     {
-      "id": "core-switch_size",
+      "id": "switch-size",
       "name": "Size",
       "template": "<nve-switch\n  style=\"\n    --width: var(--nve-ref-size-800);\n    --height: var(--nve-ref-size-400);\n    --anchor-width: calc(var(--nve-ref-size-200) + var(--nve-ref-size-50));\n    --anchor-height: calc(var(--nve-ref-size-200) + var(--nve-ref-size-50));\n  \"\n>\n  <label>label</label>\n  <input type=\"checkbox\" />\n</nve-switch>\n",
       "summary": "Size variants of toggle switches use custom CSS properties.",
@@ -23,7 +23,7 @@
       ]
     },
     {
-      "id": "core-switch_states",
+      "id": "switch-states",
       "name": "States",
       "template": "<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-switch>\n    <label>label</label>\n    <input type=\"checkbox\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-switch>\n  <nve-switch>\n    <label>disabled</label>\n    <input type=\"checkbox\" disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-switch>\n  <nve-switch>\n    <label>success</label>\n    <input type=\"checkbox\" />\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-switch>\n  <nve-switch>\n    <label>error</label>\n    <input type=\"checkbox\" />\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-switch>\n</div>\n",
       "summary": "Toggle switches with different states including default, disabled, success, and error with control messages.",
@@ -32,7 +32,7 @@
       "tags": []
     },
     {
-      "id": "core-switch_vertical-group",
+      "id": "switch-vertical-group",
       "name": "VerticalGroup",
       "template": "<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-switch-group>\n    <label>label</label>\n    <nve-switch>\n      <label>switch 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 3</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-control-message>message</nve-control-message>\n  </nve-switch-group>\n  <nve-switch-group>\n    <label>disabled</label>\n    <nve-switch>\n      <label>switch 1</label>\n      <input type=\"checkbox\" checked disabled />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" disabled />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 3</label>\n      <input type=\"checkbox\" disabled />\n    </nve-switch>\n    <nve-control-message>disabled message</nve-control-message>\n  </nve-switch-group>\n  <nve-switch-group>\n    <label>success</label>\n    <nve-switch>\n      <label>switch 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 3</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-control-message status=\"success\">success message</nve-control-message>\n  </nve-switch-group>\n  <nve-switch-group>\n    <label>error</label>\n    <nve-switch>\n      <label>switch 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 3</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-control-message status=\"error\">error message</nve-control-message>\n  </nve-switch-group>\n</div>\n",
       "summary": "Switch groups with vertical layout for many related toggles stacked in a column with validation states.",
@@ -41,7 +41,7 @@
       "tags": []
     },
     {
-      "id": "core-switch_vertical-inline-group",
+      "id": "switch-vertical-inline-group",
       "name": "VerticalInlineGroup",
       "template": "<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-switch-group layout=\"vertical-inline\">\n    <label>label</label>\n    <nve-switch>\n      <label>switch 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 3</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-control-message>message</nve-control-message>\n  </nve-switch-group>\n  <nve-switch-group layout=\"vertical-inline\">\n    <label>disabled</label>\n    <nve-switch>\n      <label>switch 1</label>\n      <input type=\"checkbox\" checked disabled />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" disabled />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 3</label>\n      <input type=\"checkbox\" disabled />\n    </nve-switch>\n    <nve-control-message>disabled message</nve-control-message>\n  </nve-switch-group>\n  <nve-switch-group layout=\"vertical-inline\">\n    <label>success</label>\n    <nve-switch>\n      <label>switch 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 3</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-control-message status=\"success\">success message</nve-control-message>\n  </nve-switch-group>\n  <nve-switch-group layout=\"vertical-inline\">\n    <label>error</label>\n    <nve-switch>\n      <label>switch 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 3</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-control-message status=\"error\">error message</nve-control-message>\n  </nve-switch-group>\n</div>\n",
       "summary": "Switch groups with vertical inline layout for compact vertical stacking with inline label positioning.",
@@ -52,7 +52,7 @@
       ]
     },
     {
-      "id": "core-switch_horizontal-group",
+      "id": "switch-horizontal-group",
       "name": "HorizontalGroup",
       "template": "<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-switch-group layout=\"horizontal\">\n    <label>label</label>\n    <nve-switch>\n      <label>switch 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 3</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-control-message>message</nve-control-message>\n  </nve-switch-group>\n  <nve-switch-group layout=\"horizontal\">\n    <label>disabled</label>\n    <nve-switch>\n      <label>switch 1</label>\n      <input type=\"checkbox\" checked disabled />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" disabled />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 3</label>\n      <input type=\"checkbox\" disabled />\n    </nve-switch>\n    <nve-control-message>disabled message</nve-control-message>\n  </nve-switch-group>\n  <nve-switch-group layout=\"horizontal\">\n    <label>success</label>\n    <nve-switch>\n      <label>switch 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 3</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-control-message status=\"success\">success message</nve-control-message>\n  </nve-switch-group>\n  <nve-switch-group layout=\"horizontal\">\n    <label>error</label>\n    <nve-switch>\n      <label>switch 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 3</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-control-message status=\"error\">error message</nve-control-message>\n  </nve-switch-group>\n</div>\n",
       "summary": "Switch groups with horizontal layout for many toggles arranged in a row, ideal for limited options.",
@@ -63,7 +63,7 @@
       ]
     },
     {
-      "id": "core-switch_horizontal-inline-group",
+      "id": "switch-horizontal-inline-group",
       "name": "HorizontalInlineGroup",
       "template": "<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-switch-group layout=\"horizontal-inline\">\n    <label>label</label>\n    <nve-switch>\n      <label>switch 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 3</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-control-message>message</nve-control-message>\n  </nve-switch-group>\n  <nve-switch-group layout=\"horizontal-inline\">\n    <label>disabled</label>\n    <nve-switch>\n      <label>switch 1</label>\n      <input type=\"checkbox\" checked disabled />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" disabled />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 3</label>\n      <input type=\"checkbox\" disabled />\n    </nve-switch>\n    <nve-control-message>disabled message</nve-control-message>\n  </nve-switch-group>\n  <nve-switch-group layout=\"horizontal-inline\">\n    <label>success</label>\n    <nve-switch>\n      <label>switch 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 3</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-control-message status=\"success\">success message</nve-control-message>\n  </nve-switch-group>\n  <nve-switch-group layout=\"horizontal-inline\">\n    <label>error</label>\n    <nve-switch>\n      <label>switch 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 3</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-control-message status=\"error\">error message</nve-control-message>\n  </nve-switch-group>\n</div>\n",
       "summary": "Switch groups with horizontal inline layout for space-efficient horizontal arrangement with inline labels.",

package/dist/switch/switch2.js

@@ -15,7 +15,7 @@ var o = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-switch",
-			version: "0.0.10",
+			version: "0.0.12",
 			children: [
 				"label",
 				"input",

package/dist/tabs/tabs-group2.js

@@ -23,7 +23,7 @@ var m, h = class extends l {
 	static {
 		this.metadata = {
 			tag: "nve-tabs-group",
-			version: "0.0.10",
+			version: "0.0.12",
 			children: ["nve-tabs"]
 		};
 	}
@@ -71,7 +71,7 @@ var m, h = class extends l {
 		let t = e.source?.value;
 		if (typeof t != "string" || !t.length) return;
 		let n = this.#d(), r = n.find((e) => this.#p(e) && e.value === t);
-		r && this.#o(n, r, !0);
+		r && this.#o(n, r, { emitEvent: !0 });
 	};
 	#i() {
 		this.#e?.disconnect();
@@ -84,13 +84,16 @@ var m, h = class extends l {
 			e.forEach((e) => e.selected = !1), this.#s(t, "");
 			return;
 		}
-		this.#o(e, r, !1, t);
+		this.#o(e, r, {
+			emitEvent: !1,
+			nextPanelValues: t
+		});
 	}
-	#o(e, t, r, i = n(e.map((e) => e.value))) {
-		let a = this.selectedValue !== t.value || !t.selected || e.some((e) => e !== t && e.selected);
+	#o(e, t, r) {
+		let { emitEvent: i } = r, a = r.nextPanelValues ?? n(e.map((e) => e.value)), o = this.selectedValue !== t.value || !t.selected || e.some((e) => e !== t && e.selected);
 		e.forEach((e) => {
 			e.selected = e === t;
-		}), this.#s(i, t.value), r && a && this.dispatchEvent(new CustomEvent("select", {
+		}), this.#s(a, t.value), i && o && this.dispatchEvent(new CustomEvent("select", {
 			bubbles: !0,
 			composed: !0,
 			detail: { value: t.value }

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

@@ -1 +1 @@
-{"version":3,"file":"tabs-group2.js","names":["#handleDefaultSlotChange","#handlePanelSlotChange","#handleCommand","#syncFromTabs","#tabsObserver","#observeTabs","#syncPanels","#getTabItems","#isSelectableTab","#setActiveTab","#getTabsElement","#resolveSelectedTab","#commitState","#getPanelSlots","#syncPanelSlot"],"sources":["../../src/tabs/tabs-group.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { PropertyValues } from 'lit';\nimport { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { queryAssignedElements } from 'lit/decorators/query-assigned-elements.js';\nimport { state } from 'lit/decorators/state.js';\nimport {\n  attachInternals,\n  audit,\n  generateId,\n  sameOrderedStringArray,\n  uniqueNonEmptyStrings,\n  useStyles\n} from '@nvidia-elements/core/internal';\nimport { Tabs, type TabsItem } from './tabs.js';\nimport styles from './tabs-group.css?inline';\n\n/** Invoker command source for `--toggle` (e.g. `nve-tabs-item` with `value`). */\ntype TabsGroupCommandSource = HTMLElement & {\n  disabled?: boolean;\n  value?: string | null;\n};\n\n/** `command` event from Invoker Commands; `source` is the control that fired. */\ntype TabsGroupCommandEvent = Event & {\n  command?: string;\n  source?: TabsGroupCommandSource | null;\n};\n\n/** Payload for the composed `select` event when the active tab value changes via command. */\ntype TabsGroupSelectDetail = { value: string };\n\n/** Arranges the tab strip and slot-matched panels: stacked column (`top`), or sidebar row with tabs at inline-start (`start`) or inline-end (`end`). */\nexport type TabsGroupAlignment = 'top' | 'start' | 'end';\n\n/**\n * @element nve-tabs-group\n * @description Coordinates tabs with matching panel content using Invoker Commands and slot-matched panels.\n * @since 1.67.0\n * @entrypoint \\@nvidia-elements/core/tabs\n * @command --toggle - Select the matching tab and reveal the panel whose slot matches the invoker value.\n * @event select - Dispatched when the selected tab value changes after an invoker `--toggle` updates selection\n * @slot - Default slot for a single nve-tabs element. Do not use behavior-select on nve-tabs when using this group.\n * @slot {value} - Named panel content where the slot name matches a nve-tabs-item value.\n * @cssprop --padding\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/tabs/\n * @responsive false\n */\n@audit()\nexport class TabsGroup extends LitElement {\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-tabs-group',\n    version: '0.0.0',\n    children: ['nve-tabs']\n  };\n\n  /** Options for observing the slotted `nve-tabs` subtree (tab list / item attribute changes). */\n  protected static readonly subtreeObserverInit = {\n    childList: true,\n    subtree: true,\n    attributes: true,\n    attributeFilter: ['disabled', 'id', 'selected', 'value']\n  } as const satisfies MutationObserverInit;\n\n  @queryAssignedElements({ flatten: true }) private defaultSlotElements!: HTMLElement[];\n\n  /**\n   * Arranges the tab strip relative to slot-matched panels: stacked column (`top`), or sidebar row with tabs at\n   * inline-start (`start`) or inline-end (`end`) beside the panel region.\n   */\n  @property({ type: String, reflect: true }) alignment: TabsGroupAlignment = 'top';\n\n  @state() private panelValues: string[] = [];\n\n  @state() private selectedValue = '';\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  #tabsObserver?: MutationObserver;\n\n  /**\n   * Renders the default slot (single `nve-tabs`) plus one named `<slot name={value}>` per distinct selectable\n   * `nve-tabs-item` value. `#syncPanelSlot` applies panel visibility and ARIA from `selectedValue`.\n   */\n  render() {\n    return html`\n      <div internal-host>\n        <slot @slotchange=${this.#handleDefaultSlotChange}></slot>\n        ${this.panelValues.map(value => html`<slot name=${value} @slotchange=${this.#handlePanelSlotChange}></slot>`)}\n      </div>\n    `;\n  }\n\n  // --- Lifecycle & command ---\n\n  connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    this._internals.role = 'group';\n    this.addEventListener('command', this.#handleCommand as EventListener);\n  }\n\n  firstUpdated() {\n    void this.updateComplete.then(() => {\n      if (!this.isConnected) {\n        return;\n      }\n\n      this.#syncFromTabs();\n    });\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener('command', this.#handleCommand as EventListener);\n    this.#tabsObserver?.disconnect();\n  }\n\n  updated(changedProperties: PropertyValues<this>) {\n    super.updated(changedProperties);\n\n    if (!this.#tabsObserver) {\n      this.#observeTabs();\n    }\n\n    // `@state()` fields are not in `PropertyValues<this>` keys; cast for membership checks.\n    const props = changedProperties as ReadonlyMap<PropertyKey, unknown>;\n    if (props.has('panelValues') || props.has('selectedValue')) {\n      this.#syncPanels();\n    }\n  }\n\n  #handleDefaultSlotChange = (): void => {\n    this.#observeTabs();\n    this.#syncFromTabs();\n  };\n\n  #handlePanelSlotChange = (): void => {\n    this.#syncPanels();\n  };\n\n  /**\n   * Handles Invoker `--toggle` on a tab item: selects the matching `nve-tabs-item` and syncs panels.\n   * Ignores non-toggle commands and invokers without a non-empty string `value`.\n   */\n  #handleCommand = (event: TabsGroupCommandEvent): void => {\n    if (event.command !== '--toggle') {\n      return;\n    }\n\n    const value = event.source?.value;\n    if (typeof value !== 'string' || !value.length) {\n      return;\n    }\n\n    const tabItems = this.#getTabItems();\n    const tabItem = tabItems.find(item => this.#isSelectableTab(item) && item.value === value);\n    if (!tabItem) {\n      return;\n    }\n\n    this.#setActiveTab(tabItems, tabItem, true);\n  };\n\n  // --- Tab strip sync (tabs → state) ---\n\n  /** Attaches a single `MutationObserver` on the slotted `nve-tabs` element to mirror tab list changes into state. */\n  #observeTabs(): void {\n    this.#tabsObserver?.disconnect();\n\n    const tabs = this.#getTabsElement();\n    if (!tabs) {\n      return;\n    }\n\n    this.#tabsObserver = new MutationObserver(() => this.#syncFromTabs());\n    this.#tabsObserver.observe(tabs, TabsGroup.subtreeObserverInit);\n  }\n\n  /**\n   * Reads the current tab items: derives ordered `panelValues` for render, resolves which tab should be active,\n   * and commits selection. Called on slot change, subtree mutations, and after mount.\n   */\n  #syncFromTabs(): void {\n    const tabItems = this.#getTabItems();\n    const nextPanelValues = uniqueNonEmptyStrings(tabItems.map(item => item.value));\n\n    const selectedTab = this.#resolveSelectedTab(tabItems);\n\n    if (!selectedTab) {\n      tabItems.forEach(item => (item.selected = false));\n      this.#commitState(nextPanelValues, '');\n      return;\n    }\n\n    this.#setActiveTab(tabItems, selectedTab, false, nextPanelValues);\n  }\n\n  /**\n   * Sets exactly one selected tab, updates `panelValues` / `selectedValue`, and optionally dispatches `select`.\n   *\n   * @param emitEvent - When true (command path), dispatches `select` if selection actually changed.\n   */\n  #setActiveTab(\n    tabItems: TabsItem[],\n    nextTab: TabsItem,\n    emitEvent: boolean,\n    nextPanelValues: string[] = uniqueNonEmptyStrings(tabItems.map(item => item.value))\n  ): void {\n    // True when the effective selection differs from the prior committed state (value, flags, or multi-select).\n    // `select` is only dispatched when both `emitEvent` (invoker/command path) and `changed` are true.\n    const changed =\n      this.selectedValue !== nextTab.value ||\n      !nextTab.selected ||\n      tabItems.some(item => item !== nextTab && item.selected);\n\n    tabItems.forEach(item => {\n      item.selected = item === nextTab;\n    });\n\n    this.#commitState(nextPanelValues, nextTab.value);\n\n    if (emitEvent && changed) {\n      this.dispatchEvent(\n        new CustomEvent<TabsGroupSelectDetail>('select', {\n          bubbles: true,\n          composed: true,\n          detail: { value: nextTab.value }\n        })\n      );\n    }\n  }\n\n  /** Updates reactive state for panel slot names and the active tab value without touching the tab items. */\n  #commitState(nextPanelValues: string[], nextSelectedValue: string): void {\n    if (!sameOrderedStringArray(this.panelValues, nextPanelValues)) {\n      this.panelValues = nextPanelValues;\n    }\n\n    if (this.selectedValue !== nextSelectedValue) {\n      this.selectedValue = nextSelectedValue;\n    }\n  }\n\n  // --- Panel sync (state → panels & ARIA) ---\n\n  /** For each named panel slot, wires `hidden` and tab↔panel ARIA ids to match `selectedValue`. */\n  #syncPanels(): void {\n    const tabItems = this.#getTabItems();\n    const tabMap = new Map(\n      tabItems.filter(item => this.#isSelectableTab(item)).map(item => [item.value, item] satisfies [string, TabsItem])\n    );\n\n    this.#getPanelSlots().forEach(slot => {\n      this.#syncPanelSlot(slot, tabMap);\n    });\n  }\n\n  /**\n   * If no selectable tab exists for `slot.name`, hides all assigned nodes. Otherwise shows only the panel(s)\n   * for the active value and assigns `role=\"tabpanel\"` / `aria-labelledby` when missing.\n   */\n  #syncPanelSlot(slot: HTMLSlotElement, tabMap: ReadonlyMap<string, TabsItem>): void {\n    const tabItem = tabMap.get(slot.name);\n    const panels = slot.assignedElements({ flatten: true }) as HTMLElement[];\n\n    if (!tabItem) {\n      panels.forEach(panel => {\n        panel.hidden = true;\n      });\n      return;\n    }\n\n    tabItem.id ||= generateId();\n\n    panels.forEach((panel, index) => {\n      panel.id ||= generateId();\n\n      if (!tabItem.hasAttribute('aria-controls') && index === 0) {\n        tabItem.setAttribute('aria-controls', panel.id);\n      }\n\n      if (!panel.hasAttribute('aria-labelledby')) {\n        panel.setAttribute('aria-labelledby', tabItem.id);\n      }\n\n      if (!panel.hasAttribute('role')) {\n        panel.setAttribute('role', 'tabpanel');\n      }\n\n      const isActive = slot.name === this.selectedValue;\n      panel.hidden = !isActive;\n    });\n  }\n\n  // --- DOM queries ---\n\n  /** Resolves the single slotted `nve-tabs` (default slot), with a light-DOM fallback for edge timing. */\n  #getTabsElement(): Tabs | undefined {\n    const el =\n      this.defaultSlotElements.find(element => element.localName === Tabs.metadata.tag) ??\n      this.querySelector(Tabs.metadata.tag);\n    return el instanceof Tabs ? el : undefined;\n  }\n\n  #getTabItems(): TabsItem[] {\n    return Array.from(this.#getTabsElement()?.querySelectorAll<TabsItem>('nve-tabs-item') ?? []);\n  }\n\n  #getPanelSlots(): HTMLSlotElement[] {\n    return Array.from(this.renderRoot.querySelectorAll<HTMLSlotElement>('slot[name]'));\n  }\n\n  /** Selectable tabs have a non-empty `value` and are not `disabled`. */\n  #isSelectableTab(tabItem: TabsItem): tabItem is TabsItem & { value: string } {\n    return typeof tabItem.value === 'string' && tabItem.value.length > 0 && !tabItem.disabled;\n  }\n\n  /** Prefer the selectable tab that is already selected; otherwise the first selectable tab. */\n  #resolveSelectedTab(tabItems: readonly TabsItem[]): TabsItem | undefined {\n    return (\n      tabItems.find(item => this.#isSelectableTab(item) && item.selected) ??\n      tabItems.find(item => this.#isSelectableTab(item))\n    );\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"tabs-group2.js","names":["#handleDefaultSlotChange","#handlePanelSlotChange","#handleCommand","#syncFromTabs","#tabsObserver","#observeTabs","#syncPanels","#getTabItems","#isSelectableTab","#setActiveTab","#getTabsElement","#resolveSelectedTab","#commitState","#getPanelSlots","#syncPanelSlot"],"sources":["../../src/tabs/tabs-group.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { PropertyValues } from 'lit';\nimport { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { queryAssignedElements } from 'lit/decorators/query-assigned-elements.js';\nimport { state } from 'lit/decorators/state.js';\nimport {\n  attachInternals,\n  audit,\n  generateId,\n  sameOrderedStringArray,\n  uniqueNonEmptyStrings,\n  useStyles\n} from '@nvidia-elements/core/internal';\nimport { Tabs, type TabsItem } from './tabs.js';\nimport styles from './tabs-group.css?inline';\n\n/** Invoker command source for `--toggle` (e.g. `nve-tabs-item` with `value`). */\ntype TabsGroupCommandSource = HTMLElement & {\n  disabled?: boolean;\n  value?: string | null;\n};\n\n/** `command` event from Invoker Commands; `source` is the control that fired. */\ntype TabsGroupCommandEvent = Event & {\n  command?: string;\n  source?: TabsGroupCommandSource | null;\n};\n\n/** Payload for the composed `select` event when the active tab value changes via command. */\ntype TabsGroupSelectDetail = { value: string };\n\n/** Arranges the tab strip and slot-matched panels: stacked column (`top`), or sidebar row with tabs at inline-start (`start`) or inline-end (`end`). */\nexport type TabsGroupAlignment = 'top' | 'start' | 'end';\n\n/**\n * @element nve-tabs-group\n * @description Coordinates tabs with matching panel content using Invoker Commands and slot-matched panels.\n * @since 1.67.0\n * @entrypoint \\@nvidia-elements/core/tabs\n * @command --toggle - Select the matching tab and reveal the panel whose slot matches the invoker value.\n * @event select - Dispatched when the selected tab value changes after an invoker `--toggle` updates selection\n * @slot - Default slot for a single nve-tabs element. Do not use behavior-select on nve-tabs when using this group.\n * @slot {value} - Named panel content where the slot name matches a nve-tabs-item value.\n * @cssprop --padding\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/tabs/\n * @responsive false\n */\n@audit()\nexport class TabsGroup extends LitElement {\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-tabs-group',\n    version: '0.0.0',\n    children: ['nve-tabs']\n  };\n\n  /** Options for observing the slotted `nve-tabs` subtree (tab list / item attribute changes). */\n  protected static readonly subtreeObserverInit = {\n    childList: true,\n    subtree: true,\n    attributes: true,\n    attributeFilter: ['disabled', 'id', 'selected', 'value']\n  } as const satisfies MutationObserverInit;\n\n  @queryAssignedElements({ flatten: true }) private defaultSlotElements!: HTMLElement[];\n\n  /**\n   * Arranges the tab strip relative to slot-matched panels: stacked column (`top`), or sidebar row with tabs at\n   * inline-start (`start`) or inline-end (`end`) beside the panel region.\n   */\n  @property({ type: String, reflect: true }) alignment: TabsGroupAlignment = 'top';\n\n  @state() private panelValues: string[] = [];\n\n  @state() private selectedValue = '';\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  #tabsObserver?: MutationObserver;\n\n  /**\n   * Renders the default slot (single `nve-tabs`) plus one named `<slot name={value}>` per distinct selectable\n   * `nve-tabs-item` value. `#syncPanelSlot` applies panel visibility and ARIA from `selectedValue`.\n   */\n  render() {\n    return html`\n      <div internal-host>\n        <slot @slotchange=${this.#handleDefaultSlotChange}></slot>\n        ${this.panelValues.map(value => html`<slot name=${value} @slotchange=${this.#handlePanelSlotChange}></slot>`)}\n      </div>\n    `;\n  }\n\n  // --- Lifecycle & command ---\n\n  connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    this._internals.role = 'group';\n    this.addEventListener('command', this.#handleCommand as EventListener);\n  }\n\n  firstUpdated() {\n    void this.updateComplete.then(() => {\n      if (!this.isConnected) {\n        return;\n      }\n\n      this.#syncFromTabs();\n    });\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener('command', this.#handleCommand as EventListener);\n    this.#tabsObserver?.disconnect();\n  }\n\n  updated(changedProperties: PropertyValues<this>) {\n    super.updated(changedProperties);\n\n    if (!this.#tabsObserver) {\n      this.#observeTabs();\n    }\n\n    // `@state()` fields are not in `PropertyValues<this>` keys; cast for membership checks.\n    const props = changedProperties as ReadonlyMap<PropertyKey, unknown>;\n    if (props.has('panelValues') || props.has('selectedValue')) {\n      this.#syncPanels();\n    }\n  }\n\n  #handleDefaultSlotChange = (): void => {\n    this.#observeTabs();\n    this.#syncFromTabs();\n  };\n\n  #handlePanelSlotChange = (): void => {\n    this.#syncPanels();\n  };\n\n  /**\n   * Handles Invoker `--toggle` on a tab item: selects the matching `nve-tabs-item` and syncs panels.\n   * Ignores non-toggle commands and invokers without a non-empty string `value`.\n   */\n  #handleCommand = (event: TabsGroupCommandEvent): void => {\n    if (event.command !== '--toggle') {\n      return;\n    }\n\n    const value = event.source?.value;\n    if (typeof value !== 'string' || !value.length) {\n      return;\n    }\n\n    const tabItems = this.#getTabItems();\n    const tabItem = tabItems.find(item => this.#isSelectableTab(item) && item.value === value);\n    if (!tabItem) {\n      return;\n    }\n\n    this.#setActiveTab(tabItems, tabItem, { emitEvent: true });\n  };\n\n  // --- Tab strip sync (tabs → state) ---\n\n  /** Attaches a single `MutationObserver` on the slotted `nve-tabs` element to mirror tab list changes into state. */\n  #observeTabs(): void {\n    this.#tabsObserver?.disconnect();\n\n    const tabs = this.#getTabsElement();\n    if (!tabs) {\n      return;\n    }\n\n    this.#tabsObserver = new MutationObserver(() => this.#syncFromTabs());\n    this.#tabsObserver.observe(tabs, TabsGroup.subtreeObserverInit);\n  }\n\n  /**\n   * Reads the current tab items: derives ordered `panelValues` for render, resolves which tab should be active,\n   * and commits selection. Called on slot change, subtree mutations, and after mount.\n   */\n  #syncFromTabs(): void {\n    const tabItems = this.#getTabItems();\n    const nextPanelValues = uniqueNonEmptyStrings(tabItems.map(item => item.value));\n\n    const selectedTab = this.#resolveSelectedTab(tabItems);\n\n    if (!selectedTab) {\n      tabItems.forEach(item => (item.selected = false));\n      this.#commitState(nextPanelValues, '');\n      return;\n    }\n\n    this.#setActiveTab(tabItems, selectedTab, { emitEvent: false, nextPanelValues });\n  }\n\n  /**\n   * Sets exactly one selected tab, updates `panelValues` / `selectedValue`, and optionally dispatches `select`.\n   *\n   * @param emitEvent - When true (command path), dispatches `select` if selection actually changed.\n   */\n  #setActiveTab(\n    tabItems: TabsItem[],\n    nextTab: TabsItem,\n    options: { emitEvent: boolean; nextPanelValues?: string[] }\n  ): void {\n    const { emitEvent } = options;\n    const nextPanelValues = options.nextPanelValues ?? uniqueNonEmptyStrings(tabItems.map(item => item.value));\n    // True when the effective selection differs from the prior committed state (value, flags, or multi-select).\n    // `select` is only dispatched when both `emitEvent` (invoker/command path) and `changed` are true.\n    const changed =\n      this.selectedValue !== nextTab.value ||\n      !nextTab.selected ||\n      tabItems.some(item => item !== nextTab && item.selected);\n\n    tabItems.forEach(item => {\n      item.selected = item === nextTab;\n    });\n\n    this.#commitState(nextPanelValues, nextTab.value);\n\n    if (emitEvent && changed) {\n      this.dispatchEvent(\n        new CustomEvent<TabsGroupSelectDetail>('select', {\n          bubbles: true,\n          composed: true,\n          detail: { value: nextTab.value }\n        })\n      );\n    }\n  }\n\n  /** Updates reactive state for panel slot names and the active tab value without touching the tab items. */\n  #commitState(nextPanelValues: string[], nextSelectedValue: string): void {\n    if (!sameOrderedStringArray(this.panelValues, nextPanelValues)) {\n      this.panelValues = nextPanelValues;\n    }\n\n    if (this.selectedValue !== nextSelectedValue) {\n      this.selectedValue = nextSelectedValue;\n    }\n  }\n\n  // --- Panel sync (state → panels & ARIA) ---\n\n  /** For each named panel slot, wires `hidden` and tab↔panel ARIA ids to match `selectedValue`. */\n  #syncPanels(): void {\n    const tabItems = this.#getTabItems();\n    const tabMap = new Map(\n      tabItems.filter(item => this.#isSelectableTab(item)).map(item => [item.value, item] satisfies [string, TabsItem])\n    );\n\n    this.#getPanelSlots().forEach(slot => {\n      this.#syncPanelSlot(slot, tabMap);\n    });\n  }\n\n  /**\n   * If no selectable tab exists for `slot.name`, hides all assigned nodes. Otherwise shows only the panel(s)\n   * for the active value and assigns `role=\"tabpanel\"` / `aria-labelledby` when missing.\n   */\n  #syncPanelSlot(slot: HTMLSlotElement, tabMap: ReadonlyMap<string, TabsItem>): void {\n    const tabItem = tabMap.get(slot.name);\n    const panels = slot.assignedElements({ flatten: true }) as HTMLElement[];\n\n    if (!tabItem) {\n      panels.forEach(panel => {\n        panel.hidden = true;\n      });\n      return;\n    }\n\n    tabItem.id ||= generateId();\n\n    panels.forEach((panel, index) => {\n      panel.id ||= generateId();\n\n      if (!tabItem.hasAttribute('aria-controls') && index === 0) {\n        tabItem.setAttribute('aria-controls', panel.id);\n      }\n\n      if (!panel.hasAttribute('aria-labelledby')) {\n        panel.setAttribute('aria-labelledby', tabItem.id);\n      }\n\n      if (!panel.hasAttribute('role')) {\n        panel.setAttribute('role', 'tabpanel');\n      }\n\n      const isActive = slot.name === this.selectedValue;\n      panel.hidden = !isActive;\n    });\n  }\n\n  // --- DOM queries ---\n\n  /** Resolves the single slotted `nve-tabs` (default slot), with a light-DOM fallback for edge timing. */\n  #getTabsElement(): Tabs | undefined {\n    const el =\n      this.defaultSlotElements.find(element => element.localName === Tabs.metadata.tag) ??\n      this.querySelector(Tabs.metadata.tag);\n    return el instanceof Tabs ? el : undefined;\n  }\n\n  #getTabItems(): TabsItem[] {\n    return Array.from(this.#getTabsElement()?.querySelectorAll<TabsItem>('nve-tabs-item') ?? []);\n  }\n\n  #getPanelSlots(): HTMLSlotElement[] {\n    return Array.from(this.renderRoot.querySelectorAll<HTMLSlotElement>('slot[name]'));\n  }\n\n  /** Selectable tabs have a non-empty `value` and are not `disabled`. */\n  #isSelectableTab(tabItem: TabsItem): tabItem is TabsItem & { value: string } {\n    return typeof tabItem.value === 'string' && tabItem.value.length > 0 && !tabItem.disabled;\n  }\n\n  /** Prefer the selectable tab that is already selected; otherwise the first selectable tab. */\n  #resolveSelectedTab(tabItems: readonly TabsItem[]): TabsItem | undefined {\n    return (\n      tabItems.find(item => this.#isSelectableTab(item) && item.selected) ??\n      tabItems.find(item => this.#isSelectableTab(item))\n    );\n  }\n}\n"],"mappings":"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"}