@nvidia-elements/core 2.20.0 → 2.20.2

package/dist/sparkline/sparkline2.js.map

@@ -1 +1 @@
-{"version":3,"file":"sparkline2.js","names":[],"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 * @documentation https://nvidia.github.io/elements/docs/elements/sparkline/\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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"}
+{"version":3,"file":"sparkline2.js","names":["styles","_decorate","__decorate","sparkline_default","Sparkline","LitElement","_args","useStyles","statusStateStyles","supportStateStyles","#renderChart","attachInternals","changedProperties","toValidData","calculateViewBox","#renderLineVariant","width","height","#renderColumn","#renderWinLoss","nothing","props","aspectRatio","validAspectRatio","domain","calculateDomain","baselineY","valueToY","drawZeroLine","plotPoints","toPlotPoints","symbolIndices","calculateSymbolIndices","interpolation","toInterpolation","linePath","toLinePath","areaPath","toAreaPath","#renderGradientDef","#renderZeroLine","#renderAccents","position","points","accentIndices","point","index","style","showZeroLine","rects","toColumnRects","rect","toWinLossRects","property","state"],"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 * @documentation https://nvidia.github.io/elements/docs/elements/sparkline/\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/define.js

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

package/dist/star-rating/define.js.map

@@ -1 +1 @@
-{"version":3,"file":"define.js","names":[],"sources":["../../src/star-rating/define.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { define } from '@nvidia-elements/foundations/internal/define';\nimport { StarRating } from '@nvidia-elements/core/star-rating';\nimport { Control, ControlGroup, ControlMessage } from '@nvidia-elements/core/forms';\n\ndefine(StarRating);\ndefine(Control);\ndefine(ControlGroup);\ndefine(ControlMessage);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nve-star-rating': StarRating;\n  }\n}\n"],"mappings":";;;;;AAOA,EAAO,CAAU,GACjB,EAAO,CAAO,GACd,EAAO,CAAY,GACnB,EAAO,CAAc"}
+{"version":3,"file":"define.js","names":["define","StarRating","Control","ControlGroup","ControlMessage"],"sources":["../../src/star-rating/define.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { define } from '@nvidia-elements/foundations/internal/define';\nimport { StarRating } from '@nvidia-elements/core/star-rating';\nimport { Control, ControlGroup, ControlMessage } from '@nvidia-elements/core/forms';\n\ndefine(StarRating);\ndefine(Control);\ndefine(ControlGroup);\ndefine(ControlMessage);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nve-star-rating': StarRating;\n  }\n}\n"],"mappings":";;;;;AAOAA,EAAOC,CAAU,GACjBD,EAAOE,CAAO,GACdF,EAAOG,CAAY,GACnBH,EAAOI,CAAc"}

package/dist/star-rating/index.js

@@ -1,2 +1 @@
-import { StarRating as e } from "./star-rating2.js";
-export { e as StarRating };
+export { StarRating } from "./star-rating2.js";

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

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

package/dist/star-rating/star-rating.examples.js.map

@@ -1 +1 @@
-{"version":3,"file":"star-rating.examples.js","names":[],"sources":["../../src/star-rating/star-rating.examples.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html } from 'lit';\nimport '@nvidia-elements/core/star-rating/define.js';\nimport '@nvidia-elements/core/forms/define.js';\n\nexport default {\n  title: 'Elements/Star Rating',\n  component: 'nve-star-rating'\n};\n\n/**\n * @summary Basic star rating using a range input. Use for collecting user feedback, product reviews, or satisfaction scores in forms.\n */\nexport const Default = {\n  render: () => html`\n<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};\n\n/**\n * @summary Disabled star rating for display-only contexts. Use when showing existing ratings that users cannot change.\n * @tags test-case\n */\nexport const Disabled = {\n  render: () => html`\n<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};\n\n/**\n * @summary Half-star increments using step=\"0.5\" for more granular ratings. Ideal when detailed feedback requires finer rating precision.\n */\nexport const HalfStar = {\n  render: () => html`\n<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};\n\n/**\n * @summary Single star toggle for favorite/bookmark functionality. Use with max=\"1\" for binary on/off states like wishlists or bookmarks.\n */\nexport const Toggle = {\n  render: () => html`\n<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};\n"],"mappings":";AAGA,IAAA,IAAS"}
+{"version":3,"file":"star-rating.examples.js","names":["star_rating_examples_default"],"sources":["../../src/star-rating/star-rating.examples.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html } from 'lit';\nimport '@nvidia-elements/core/star-rating/define.js';\nimport '@nvidia-elements/core/forms/define.js';\n\nexport default {\n  title: 'Elements/Star Rating',\n  component: 'nve-star-rating'\n};\n\n/**\n * @summary Basic star rating using a range input. Use for collecting user feedback, product reviews, or satisfaction scores in forms.\n */\nexport const Default = {\n  render: () => html`\n<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};\n\n/**\n * @summary Disabled star rating for display-only contexts. Use when showing existing ratings that users cannot change.\n * @tags test-case\n */\nexport const Disabled = {\n  render: () => html`\n<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};\n\n/**\n * @summary Half-star increments using step=\"0.5\" for more granular ratings. Ideal when detailed feedback requires finer rating precision.\n */\nexport const HalfStar = {\n  render: () => html`\n<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};\n\n/**\n * @summary Single star toggle for favorite/bookmark functionality. Use with max=\"1\" for binary on/off states like wishlists or bookmarks.\n */\nexport const Toggle = {\n  render: () => html`\n<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};\n"],"mappings":";AAGA,IAAAA,IAAS"}

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

@@ -1,6 +1,5 @@
-//#region src/star-rating/star-rating.css?inline
+// src/star-rating/star-rating.css?inline
 var e = ":host{--star-size: 20px}:host(:state(disabled)) .stars{pointer-events:none}[input]{position:relative}[name=star]{--color: var(--nve-ref-color-yellow-amber-900)}[name=star-half]{--color: var(--nve-ref-color-yellow-amber-900);--stroke-color: var(--nve-ref-border-color-emphasis)}[name=star-stroke]{--color: var(--nve-ref-border-color-emphasis)}nve-icon{--width: var(--star-size);--height: var(--star-size)}.stars{display:flex;gap:var(--nve-ref-space-xxxs);height:var(--nve-ref-size-800)}::slotted(input){opacity:0;position:absolute;inset:0;z-index:-1;margin:0}";
-//#endregion
 export { e as default };
 
 //# sourceMappingURL=star-rating.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"star-rating.js","names":[],"sources":["../../src/star-rating/star-rating.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n:host {\n  --star-size: 20px;\n}\n\n:host(:state(disabled)) .stars {\n  pointer-events: none;\n}\n\n[input] {\n  position: relative;\n}\n\n[name='star'] {\n  --color: var(--nve-ref-color-yellow-amber-900);\n}\n\n[name='star-half'] {\n  --color: var(--nve-ref-color-yellow-amber-900);\n  --stroke-color: var(--nve-ref-border-color-emphasis);\n}\n\n[name='star-stroke'] {\n  --color: var(--nve-ref-border-color-emphasis);\n}\n\nnve-icon {\n  --width: var(--star-size);\n  --height: var(--star-size);\n}\n\n.stars {\n  display: flex;\n  gap: var(--nve-ref-space-xxxs);\n  height: var(--nve-ref-size-800);\n}\n\n::slotted(input) {\n  opacity: 0;\n  position: absolute;\n  inset: 0;\n  z-index: -1;\n  margin: 0;\n}\n"],"mappings":""}
+{"version":3,"file":"star-rating.js","names":["star_rating_default"],"sources":["../../src/star-rating/star-rating.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n:host {\n  --star-size: 20px;\n}\n\n:host(:state(disabled)) .stars {\n  pointer-events: none;\n}\n\n[input] {\n  position: relative;\n}\n\n[name='star'] {\n  --color: var(--nve-ref-color-yellow-amber-900);\n}\n\n[name='star-half'] {\n  --color: var(--nve-ref-color-yellow-amber-900);\n  --stroke-color: var(--nve-ref-border-color-emphasis);\n}\n\n[name='star-stroke'] {\n  --color: var(--nve-ref-border-color-emphasis);\n}\n\nnve-icon {\n  --width: var(--star-size);\n  --height: var(--star-size);\n}\n\n.stars {\n  display: flex;\n  gap: var(--nve-ref-space-xxxs);\n  height: var(--nve-ref-size-800);\n}\n\n::slotted(input) {\n  opacity: 0;\n  position: absolute;\n  inset: 0;\n  z-index: -1;\n  margin: 0;\n}\n"],"mappings":""}

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

@@ -1,13 +1,13 @@
 import { getElementUpdate as e } from "../internal/utils/dom.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.147.0/helpers/esm/decorate.js";
+import r from "../_virtual/_@oxc-project_runtime@0.155.0/helpers/esm/decorate.js";
 import { Icon as i } from "../icon/icon2.js";
 import { Control as a } from "../forms/control/control2.js";
 import o from "./star-rating.js";
 import { html as s } from "lit";
 import { state as c } from "lit/decorators/state.js";
-//#region src/star-rating/star-rating.ts
+// src/star-rating/star-rating.ts
 var l = class extends a {
 	constructor(...e) {
 		super(...e), this.min = 0, this.max = 5, this.value = 0, this.active = 0, this.precision = .5;
@@ -18,7 +18,7 @@ var l = class extends a {
 	static {
 		this.metadata = {
 			tag: "nve-star-rating",
-			version: "2.20.0"
+			version: "2.20.2"
 		};
 	}
 	static {
@@ -51,7 +51,6 @@ var l = class extends a {
 	}
 };
 r([c()], l.prototype, "min", void 0), r([c()], l.prototype, "max", void 0), r([c()], l.prototype, "value", void 0), r([c()], l.prototype, "active", void 0), r([c()], l.prototype, "precision", void 0), l = r([t()], l);
-//#endregion
 export { l as StarRating };
 
 //# sourceMappingURL=star-rating2.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"star-rating2.js","names":[],"sources":["../../src/star-rating/star-rating.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 type { PropertyValues } from 'lit';\nimport { state } from 'lit/decorators/state.js';\nimport { useStyles, getElementUpdate, scopedRegistry } from '@nvidia-elements/core/internal';\nimport { Control } from '@nvidia-elements/core/forms';\nimport { Icon } from '@nvidia-elements/core/icon';\nimport styles from './star-rating.css?inline';\n\n/**\n * @element nve-star-rating\n * @description A star rating component lets users rate something using stars, providing a quick visual representation of feedback\n * @documentation https://nvidia.github.io/elements/docs/elements/star-rating/\n * @since 1.23.1\n * @entrypoint \\@nvidia-elements/core/star-rating\n * @cssprop --star-size\n * @cssprop --color\n * @cssprop --stroke-color\n * @cssprop --width\n * @cssprop --height\n * @csspart icon - The icon element\n * @aria https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range\n *\n */\n@scopedRegistry()\nexport class StarRating extends Control {\n  static styles = useStyles([...Control.styles, styles]);\n\n  static readonly metadata = {\n    tag: 'nve-star-rating',\n    version: '0.0.0'\n  };\n\n  static elementDefinitions = {\n    [Icon.metadata.tag]: Icon\n  };\n\n  @state() private min = 0;\n  @state() private max = 5;\n  @state() private value = 0;\n  @state() private active = 0;\n  @state() private precision = 0.5;\n\n  firstUpdated(props: PropertyValues<this>) {\n    super.firstUpdated(props);\n\n    getElementUpdate(this.input, 'max', (max: unknown) => {\n      if (max) {\n        this.max = parseInt(max as string);\n      }\n    });\n\n    getElementUpdate(this.input, 'min', (min: unknown) => {\n      if (min) {\n        this.min = parseInt(min as string);\n      }\n    });\n\n    getElementUpdate(this.input, 'value', (value: unknown) => {\n      this.#setValue(value ? parseFloat(value as string) : this.input.valueAsNumber);\n    });\n\n    this.input.addEventListener('input', () => (this.value = this.input.valueAsNumber));\n\n    this.value = this.input.valueAsNumber;\n  }\n\n  protected get prefixContent() {\n    return html`\n    <div aria-hidden=\"true\" class=\"stars\" @mouseleave=${() => (this.active = 0)}>\n      ${new Array(this.max).fill('').map((_, i) => {\n        const starValue = i + 1;\n        const currentValue = this.active || this.value;\n        const diff = currentValue - i;\n\n        const iconName = diff >= 1 ? 'star' : diff >= 0.5 ? 'star-half' : 'star-stroke';\n\n        return html`\n        <nve-icon part=\"icon\"\n          @click=${() => this.#setValue(this.#getStepValue(i, starValue))}\n          @mousemove=${(e: MouseEvent) => this.#handleMouseMove(e, i, starValue)}\n          name=${iconName}\n        ></nve-icon>\n      `;\n      })}\n    </div>\n    `;\n  }\n\n  #handleMouseMove(e: MouseEvent, index: number, starValue: number) {\n    const target = e.currentTarget as HTMLElement;\n    const rect = target.getBoundingClientRect();\n    const position = (e.clientX - rect.left) / rect.width;\n\n    this.active = position <= 0.5 ? index + 0.5 : starValue;\n  }\n\n  #getStepValue(index: number, starValue: number) {\n    // If hovering (active has a value), use that value\n    if (this.active > 0) {\n      return this.active;\n    }\n\n    // If clicking on the current value, toggle it off\n    if (this.value === starValue || this.value === index + 0.5) {\n      return 0;\n    }\n\n    // Otherwise, return the star value\n    return starValue;\n  }\n\n  #setValue(value: number) {\n    this.input.valueAsNumber = value === this.value ? 0 : value;\n    this.input.dispatchEvent(new Event('input', { bubbles: true }));\n    this.input.dispatchEvent(new Event('change', { bubbles: true }));\n  }\n}\n"],"mappings":";;;;;;;;;;AA2BO,IAAM,IAAN,cAAyB,EAAQ;;EAgBT,aAJN,KAAA,MAAA,GACA,KAAA,MAAA,GACE,KAAA,QAAA,GACC,KAAA,SAAA,GACG,KAAA,YAAA;;;EAfb,KAAA,SAAA,EAAU,CAAC,GAAG,EAAQ,QAAQ,CAAM,CAAC;;;EAE1B,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;EACX;;;EAE4B,KAAA,qBAAA,GACzB,EAAK,SAAS,MAAM,EACvB;;CAQA,aAAa,GAA6B;EAqBxC,AApBA,MAAM,aAAa,CAAK,GAExB,EAAiB,KAAK,OAAO,QAAQ,MAAiB;GACpD,AAAI,MACF,KAAK,MAAM,SAAS,CAAa;EAErC,CAAC,GAED,EAAiB,KAAK,OAAO,QAAQ,MAAiB;GACpD,AAAI,MACF,KAAK,MAAM,SAAS,CAAa;EAErC,CAAC,GAED,EAAiB,KAAK,OAAO,UAAU,MAAmB;GACxD,KAAK,GAAU,IAAQ,WAAW,CAAe,IAAI,KAAK,MAAM,aAAa;EAC/E,CAAC,GAED,KAAK,MAAM,iBAAiB,eAAgB,KAAK,QAAQ,KAAK,MAAM,aAAc,GAElF,KAAK,QAAQ,KAAK,MAAM;CAC1B;CAEA,IAAc,gBAAgB;EAC5B,OAAO,CAAI,4DACgD,KAAK,SAAS,EAAG,IACpE,MAAM,KAAK,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC,KAAK,GAAG,MAAM;GAC3C,IAAM,IAAY,IAAI,GAEhB,KADe,KAAK,UAAU,KAAK,SACb;GAI5B,OAAO,CAAI,uCAEM,KAAK,GAAU,KAAK,GAAc,GAAG,CAAS,CAAC,EAAE,iBAClD,MAAkB,KAAK,GAAiB,GAAG,GAAG,CAAS,EAAE,UALxD,KAAQ,IAAI,SAAS,KAAQ,KAAM,cAAc,cAMhD;EAGpB,CAAC,EAAE;CAGP;CAEA,GAAiB,GAAe,GAAe,GAAmB;EAEhE,IAAM,IADS,EAAE,cACG,sBAAsB,GACpC,KAAY,EAAE,UAAU,EAAK,QAAQ,EAAK;EAEhD,KAAK,SAAS,KAAY,KAAM,IAAQ,KAAM;CAChD;CAEA,GAAc,GAAe,GAAmB;EAY9C,OAVI,KAAK,SAAS,IACT,KAAK,SAIV,KAAK,UAAU,KAAa,KAAK,UAAU,IAAQ,KAC9C,IAIF;CACT;CAEA,GAAU,GAAe;EAGvB,AAFA,KAAK,MAAM,gBAAgB,MAAU,KAAK,QAAQ,IAAI,GACtD,KAAK,MAAM,cAAc,IAAI,MAAM,SAAS,EAAE,SAAS,GAAK,CAAC,CAAC,GAC9D,KAAK,MAAM,cAAc,IAAI,MAAM,UAAU,EAAE,SAAS,GAAK,CAAC,CAAC;CACjE;AACF;AAhFG,EAAA,CAAA,EAAM,CAAA,GAAA,EAAA,WAAA,OAAA,KAAA,CAAA,GACN,EAAA,CAAA,EAAM,CAAA,GAAA,EAAA,WAAA,OAAA,KAAA,CAAA,GACN,EAAA,CAAA,EAAM,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,GACN,EAAA,CAAA,EAAM,CAAA,GAAA,EAAA,WAAA,UAAA,KAAA,CAAA,GACN,EAAA,CAAA,EAAM,CAAA,GAAA,EAAA,WAAA,aAAA,KAAA,CAAA,GAjBR,IAAA,EAAA,CAAA,EAAe,CAAA,GAAA,CAAA"}
+{"version":3,"file":"star-rating2.js","names":["styles","_decorate","__decorate","star_rating_default","StarRating","Control","_args","useStyles","Icon","props","getElementUpdate","max","min","#setValue","value","starValue","i","diff","#getStepValue","#handleMouseMove","rect","position","index","state","scopedRegistry"],"sources":["../../src/star-rating/star-rating.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 type { PropertyValues } from 'lit';\nimport { state } from 'lit/decorators/state.js';\nimport { useStyles, getElementUpdate, scopedRegistry } from '@nvidia-elements/core/internal';\nimport { Control } from '@nvidia-elements/core/forms';\nimport { Icon } from '@nvidia-elements/core/icon';\nimport styles from './star-rating.css?inline';\n\n/**\n * @element nve-star-rating\n * @description A star rating component lets users rate something using stars, providing a quick visual representation of feedback\n * @documentation https://nvidia.github.io/elements/docs/elements/star-rating/\n * @since 1.23.1\n * @entrypoint \\@nvidia-elements/core/star-rating\n * @cssprop --star-size\n * @cssprop --color\n * @cssprop --stroke-color\n * @cssprop --width\n * @cssprop --height\n * @csspart icon - The icon element\n * @aria https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range\n *\n */\n@scopedRegistry()\nexport class StarRating extends Control {\n  static styles = useStyles([...Control.styles, styles]);\n\n  static readonly metadata = {\n    tag: 'nve-star-rating',\n    version: '0.0.0'\n  };\n\n  static elementDefinitions = {\n    [Icon.metadata.tag]: Icon\n  };\n\n  @state() private min = 0;\n  @state() private max = 5;\n  @state() private value = 0;\n  @state() private active = 0;\n  @state() private precision = 0.5;\n\n  firstUpdated(props: PropertyValues<this>) {\n    super.firstUpdated(props);\n\n    getElementUpdate(this.input, 'max', (max: unknown) => {\n      if (max) {\n        this.max = parseInt(max as string);\n      }\n    });\n\n    getElementUpdate(this.input, 'min', (min: unknown) => {\n      if (min) {\n        this.min = parseInt(min as string);\n      }\n    });\n\n    getElementUpdate(this.input, 'value', (value: unknown) => {\n      this.#setValue(value ? parseFloat(value as string) : this.input.valueAsNumber);\n    });\n\n    this.input.addEventListener('input', () => (this.value = this.input.valueAsNumber));\n\n    this.value = this.input.valueAsNumber;\n  }\n\n  protected get prefixContent() {\n    return html`\n    <div aria-hidden=\"true\" class=\"stars\" @mouseleave=${() => (this.active = 0)}>\n      ${new Array(this.max).fill('').map((_, i) => {\n        const starValue = i + 1;\n        const currentValue = this.active || this.value;\n        const diff = currentValue - i;\n\n        const iconName = diff >= 1 ? 'star' : diff >= 0.5 ? 'star-half' : 'star-stroke';\n\n        return html`\n        <nve-icon part=\"icon\"\n          @click=${() => this.#setValue(this.#getStepValue(i, starValue))}\n          @mousemove=${(e: MouseEvent) => this.#handleMouseMove(e, i, starValue)}\n          name=${iconName}\n        ></nve-icon>\n      `;\n      })}\n    </div>\n    `;\n  }\n\n  #handleMouseMove(e: MouseEvent, index: number, starValue: number) {\n    const target = e.currentTarget as HTMLElement;\n    const rect = target.getBoundingClientRect();\n    const position = (e.clientX - rect.left) / rect.width;\n\n    this.active = position <= 0.5 ? index + 0.5 : starValue;\n  }\n\n  #getStepValue(index: number, starValue: number) {\n    // If hovering (active has a value), use that value\n    if (this.active > 0) {\n      return this.active;\n    }\n\n    // If clicking on the current value, toggle it off\n    if (this.value === starValue || this.value === index + 0.5) {\n      return 0;\n    }\n\n    // Otherwise, return the star value\n    return starValue;\n  }\n\n  #setValue(value: number) {\n    this.input.valueAsNumber = value === this.value ? 0 : value;\n    this.input.dispatchEvent(new Event('input', { bubbles: true }));\n    this.input.dispatchEvent(new Event('change', { bubbles: true }));\n  }\n}\n"],"mappings":";;;;;;;;;;AA2BO,IAAMI,IAAN,cAAyBC,EAAQ;;EAgBT,A,aAJN,KAAA,MAAA,GACA,KAAA,MAAA,GACE,KAAA,QAAA,GACC,KAAA,SAAA,GACG,KAAA,YAAA;;;EAfb,KAAA,SAAAE,EAAU,CAAC,GAAGF,EAAQ,QAAQL,CAAM,CAAC;;;EAE1B,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;EACX;;;EAE4B,KAAA,qBAAA,GACzBQ,EAAK,SAAS,MAAMA,EACvB;;CAQA,aAAa,GAA6B;EAqBxC,AApBA,MAAM,aAAaC,CAAK,GAExBC,EAAiB,KAAK,OAAO,QAAQ,MAAiB;GACpD,AAAIC,MACF,KAAK,MAAM,SAASA,CAAa;EAErC,CAAC,GAEDD,EAAiB,KAAK,OAAO,QAAQ,MAAiB;GACpD,AAAIE,MACF,KAAK,MAAM,SAASA,CAAa;EAErC,CAAC,GAEDF,EAAiB,KAAK,OAAO,UAAU,MAAmB;GACxD,KAAKG,GAAUC,IAAQ,WAAWA,CAAe,IAAI,KAAK,MAAM,aAAa;EAC/E,CAAC,GAED,KAAK,MAAM,iBAAiB,eAAgB,KAAK,QAAQ,KAAK,MAAM,aAAc,GAElF,KAAK,QAAQ,KAAK,MAAM;CAC1B;CAEA,IAAc,gBAAgB;EAC5B,OAAO,CAAI,4DACgD,KAAK,SAAS,EAAG,IACpE,MAAM,KAAK,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC,KAAK,GAAG,MAAM;GAC3C,IAAMC,IAAYC,IAAI,GAEhBC,KADe,KAAK,UAAU,KAAK,SACbD;GAI5B,OAAO,CAAI,uCAEM,KAAKH,GAAU,KAAKK,GAAcF,GAAGD,CAAS,CAAC,EAAE,iBAClD,MAAkB,KAAKI,GAAiB,GAAGH,GAAGD,CAAS,EAAE,UALxDE,KAAQ,IAAI,SAASA,KAAQ,KAAM,cAAc,cAMhD;EAGpB,CAAC,EAAE;CAGP;CAEA,GAAiB,GAAe,GAAe,GAAmB;EAEhE,IAAMG,IADS,EAAE,cACG,sBAAsB,GACpCC,KAAY,EAAE,UAAUD,EAAK,QAAQA,EAAK;EAEhD,KAAK,SAASC,KAAY,KAAMC,IAAQ,KAAMP;CAChD;CAEA,GAAc,GAAe,GAAmB;EAY9C,OAVI,KAAK,SAAS,IACT,KAAK,SAIV,KAAK,UAAUA,KAAa,KAAK,UAAUO,IAAQ,KAC9C,IAIFP;CACT;CAEA,GAAU,GAAe;EAGvB,AAFA,KAAK,MAAM,gBAAgBD,MAAU,KAAK,QAAQ,IAAIA,GACtD,KAAK,MAAM,cAAc,IAAI,MAAM,SAAS,EAAE,SAAS,GAAK,CAAC,CAAC,GAC9D,KAAK,MAAM,cAAc,IAAI,MAAM,UAAU,EAAE,SAAS,GAAK,CAAC,CAAC;CACjE;AACF;AAhFGb,EAAA,CAAAsB,EAAM,CAAA,GAAAnB,EAAA,WAAA,OAAA,KAAA,CAAA,GACNH,EAAA,CAAAsB,EAAM,CAAA,GAAAnB,EAAA,WAAA,OAAA,KAAA,CAAA,GACNH,EAAA,CAAAsB,EAAM,CAAA,GAAAnB,EAAA,WAAA,SAAA,KAAA,CAAA,GACNH,EAAA,CAAAsB,EAAM,CAAA,GAAAnB,EAAA,WAAA,UAAA,KAAA,CAAA,GACNH,EAAA,CAAAsB,EAAM,CAAA,GAAAnB,EAAA,WAAA,aAAA,KAAA,CAAA,GAjBR,IAAAH,EAAA,CAAAuB,EAAe,CAAA,GAAApB,CAAA"}

package/dist/steps/define.js

@@ -1,6 +1,5 @@
 import { Steps as e, StepsItem as t } from "./steps2.js";
 import { define as n } from "@nvidia-elements/foundations/internal/define";
 n(t), n(e);
-//#endregion
 
 //# sourceMappingURL=define.js.map

package/dist/steps/define.js.map

@@ -1 +1 @@
-{"version":3,"file":"define.js","names":[],"sources":["../../src/steps/define.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { define } from '@nvidia-elements/foundations/internal/define';\nimport { StepsItem, Steps } from '@nvidia-elements/core/steps';\n\ndefine(StepsItem);\ndefine(Steps);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nve-steps-item': StepsItem;\n    'nve-steps': Steps;\n  }\n}\n"],"mappings":";;AAMA,EAAO,CAAS,GAChB,EAAO,CAAK"}
+{"version":3,"file":"define.js","names":["define","StepsItem","Steps"],"sources":["../../src/steps/define.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { define } from '@nvidia-elements/foundations/internal/define';\nimport { StepsItem, Steps } from '@nvidia-elements/core/steps';\n\ndefine(StepsItem);\ndefine(Steps);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nve-steps-item': StepsItem;\n    'nve-steps': Steps;\n  }\n}\n"],"mappings":";;AAMAA,EAAOC,CAAS,GAChBD,EAAOE,CAAK"}

package/dist/steps/index.js

@@ -1,2 +1 @@
-import { Steps as e, StepsItem as t } from "./steps2.js";
-export { e as Steps, t as StepsItem };
+export { Steps, StepsItem } from "./steps2.js";

package/dist/steps/steps-item.js

@@ -1,6 +1,5 @@
-//#region src/steps/steps-item.css?inline
+// src/steps/steps-item.css?inline
 var e = ":host{--width: auto;--font-size: var(--nve-ref-font-size-100);--font-weight: var(--nve-ref-font-weight-semibold);--border-radius: var(--nve-ref-border-radius-xl);--color: var(--nve-sys-text-muted-color);--cursor: pointer;--text-transform: capitalize;--nve-sys-interaction-state-ratio: 0}[internal-host]{--_icon-button-color: var(--color);width:var(--width);gap:var(--nve-ref-space-xs);padding:var(--nve-ref-size-200) var(--nve-ref-size-300) var(--nve-ref-size-200) var(--nve-ref-size-200);color:var(--color);font-weight:var(--font-weight);font-size:var(--font-size);line-height:var(--nve-ref-font-size-500);background-image:linear-gradient(color-mix(in oklab,var(--nve-sys-interaction-state-base) 100%,var(--nve-sys-interaction-state-mix) var(--nve-sys-interaction-state-ratio)) 0 0)!important;border-radius:var(--border-radius);cursor:var(--cursor);text-transform:var(--text-transform);display:inline-flex;align-items:center;border:0;position:relative}nve-progress-ring,nve-icon-button{--height: var(--nve-ref-size-700);--width: var(--nve-ref-size-700);cursor:pointer}nve-icon-button#number-icon{box-sizing:content-box;border:var(--nve-ref-border-width-md) solid var(--nve-ref-border-color-emphasis);border-radius:100%;--color: var(--_icon-button-color);--height: var(--nve-ref-size-600);--width: var(--nve-ref-size-600);--background: transparent}nve-icon-button[interaction=emphasis]{--background: var(--nve-sys-support-success-color);--color: var(--nve-sys-text-white-color)}:host(:state(selected)){--color: var(--nve-sys-text-emphasis-color);--font-weight: var(--nve-ref-font-weight-semibold);--nve-sys-interaction-state-ratio: var(--nve-sys-interaction-state-ratio-hover)}:host(:state(disabled)){--color: var(--nve-sys-interaction-disabled-color);--cursor: not-allowed}:host(:hover:not(:state(disabled),:state(selected))){--nve-sys-interaction-state-ratio: var(--nve-sys-interaction-state-ratio-hover)}:host([container=\"condensed\"]) div{padding:var(--nve-ref-size-200)}";
-//#endregion
 export { e as default };
 
 //# sourceMappingURL=steps-item.js.map

package/dist/steps/steps-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"steps-item.js","names":[],"sources":["../../src/steps/steps-item.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n:host {\n  --width: auto;\n  --font-size: var(--nve-ref-font-size-100);\n  --font-weight: var(--nve-ref-font-weight-semibold);\n  --border-radius: var(--nve-ref-border-radius-xl);\n  --color: var(--nve-sys-text-muted-color);\n  --cursor: pointer;\n  --text-transform: capitalize;\n  --nve-sys-interaction-state-ratio: 0;\n}\n\n[internal-host] {\n  --_icon-button-color: var(--color);\n  width: var(--width);\n  gap: var(--nve-ref-space-xs);\n  padding: var(--nve-ref-size-200) var(--nve-ref-size-300) var(--nve-ref-size-200) var(--nve-ref-size-200);\n  color: var(--color);\n  font-weight: var(--font-weight);\n  font-size: var(--font-size);\n  line-height: var(--nve-ref-font-size-500);\n  background-image: linear-gradient(\n    color-mix(\n        in oklab,\n        var(--nve-sys-interaction-state-base) 100%,\n        var(--nve-sys-interaction-state-mix) var(--nve-sys-interaction-state-ratio)\n      )\n      0 0\n  ) !important;\n  border-radius: var(--border-radius);\n  cursor: var(--cursor);\n  text-transform: var(--text-transform);\n  display: inline-flex;\n  align-items: center;\n  border: 0;\n  position: relative;\n}\n\nnve-progress-ring,\nnve-icon-button {\n  --height: var(--nve-ref-size-700);\n  --width: var(--nve-ref-size-700);\n  cursor: pointer;\n}\n\nnve-icon-button#number-icon {\n  box-sizing: content-box;\n  border: var(--nve-ref-border-width-md) solid var(--nve-ref-border-color-emphasis);\n  border-radius: 100%;\n  --color: var(--_icon-button-color);\n  --height: var(--nve-ref-size-600);\n  --width: var(--nve-ref-size-600);\n  --background: transparent;\n}\n\nnve-icon-button[interaction='emphasis'] {\n  --background: var(--nve-sys-support-success-color);\n  --color: var(--nve-sys-text-white-color);\n}\n\n:host(:state(selected)) {\n  --color: var(--nve-sys-text-emphasis-color);\n  --font-weight: var(--nve-ref-font-weight-semibold);\n  --nve-sys-interaction-state-ratio: var(--nve-sys-interaction-state-ratio-hover);\n}\n\n:host(:state(disabled)) {\n  --color: var(--nve-sys-interaction-disabled-color);\n  --cursor: not-allowed;\n}\n\n:host(:hover:not(:state(disabled), :state(selected))) {\n  --nve-sys-interaction-state-ratio: var(--nve-sys-interaction-state-ratio-hover);\n}\n\n:host([container='condensed']) div {\n  padding: var(--nve-ref-size-200);\n}\n"],"mappings":""}
+{"version":3,"file":"steps-item.js","names":["steps_item_default"],"sources":["../../src/steps/steps-item.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n:host {\n  --width: auto;\n  --font-size: var(--nve-ref-font-size-100);\n  --font-weight: var(--nve-ref-font-weight-semibold);\n  --border-radius: var(--nve-ref-border-radius-xl);\n  --color: var(--nve-sys-text-muted-color);\n  --cursor: pointer;\n  --text-transform: capitalize;\n  --nve-sys-interaction-state-ratio: 0;\n}\n\n[internal-host] {\n  --_icon-button-color: var(--color);\n  width: var(--width);\n  gap: var(--nve-ref-space-xs);\n  padding: var(--nve-ref-size-200) var(--nve-ref-size-300) var(--nve-ref-size-200) var(--nve-ref-size-200);\n  color: var(--color);\n  font-weight: var(--font-weight);\n  font-size: var(--font-size);\n  line-height: var(--nve-ref-font-size-500);\n  background-image: linear-gradient(\n    color-mix(\n        in oklab,\n        var(--nve-sys-interaction-state-base) 100%,\n        var(--nve-sys-interaction-state-mix) var(--nve-sys-interaction-state-ratio)\n      )\n      0 0\n  ) !important;\n  border-radius: var(--border-radius);\n  cursor: var(--cursor);\n  text-transform: var(--text-transform);\n  display: inline-flex;\n  align-items: center;\n  border: 0;\n  position: relative;\n}\n\nnve-progress-ring,\nnve-icon-button {\n  --height: var(--nve-ref-size-700);\n  --width: var(--nve-ref-size-700);\n  cursor: pointer;\n}\n\nnve-icon-button#number-icon {\n  box-sizing: content-box;\n  border: var(--nve-ref-border-width-md) solid var(--nve-ref-border-color-emphasis);\n  border-radius: 100%;\n  --color: var(--_icon-button-color);\n  --height: var(--nve-ref-size-600);\n  --width: var(--nve-ref-size-600);\n  --background: transparent;\n}\n\nnve-icon-button[interaction='emphasis'] {\n  --background: var(--nve-sys-support-success-color);\n  --color: var(--nve-sys-text-white-color);\n}\n\n:host(:state(selected)) {\n  --color: var(--nve-sys-text-emphasis-color);\n  --font-weight: var(--nve-ref-font-weight-semibold);\n  --nve-sys-interaction-state-ratio: var(--nve-sys-interaction-state-ratio-hover);\n}\n\n:host(:state(disabled)) {\n  --color: var(--nve-sys-interaction-disabled-color);\n  --cursor: not-allowed;\n}\n\n:host(:hover:not(:state(disabled), :state(selected))) {\n  --nve-sys-interaction-state-ratio: var(--nve-sys-interaction-state-ratio-hover);\n}\n\n:host([container='condensed']) div {\n  padding: var(--nve-ref-size-200);\n}\n"],"mappings":""}

package/dist/steps/steps.examples.js

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

package/dist/steps/steps.examples.js.map

@@ -1 +1 @@
-{"version":3,"file":"steps.examples.js","names":[],"sources":["../../src/steps/steps.examples.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html } from 'lit';\nimport '@nvidia-elements/core/steps/define.js';\nimport '@nvidia-elements/core/card/define.js';\nimport '@nvidia-elements/core/dot/define.js';\nimport '@nvidia-elements/core/icon/define.js';\n\nexport default {\n  title: 'Elements/Steps',\n  component: 'nve-steps',\n};\n\n/**\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.\n */\nexport const Default = {\n  render: () => html`\n  <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  `\n};\n\n/**\n * @summary Condensed step indicator with reduced visual weight. Ideal for space-constrained layouts or secondary navigation where steps need less prominence.\n */\nexport const Condensed = {\n  render: () => html`\n  <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  `\n};\n\n/**\n * @summary Vertical step layout for sidebar navigation or tall containers. Use when horizontal space constrains layout or steps require longer labels.\n */\nexport const VerticalSteps = {\n  render: () => html`\n  <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  `\n};\n\n/**\n * @summary Vertical condensed steps combining both layout options. Ideal for dense sidebar navigation with minimal visual footprint.\n */\nexport const VerticalCondensedSteps = {\n  render: () => html`\n  <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  `\n};\n\n/**\n * @summary Display-only steps without interactive selection behavior. Use for showing progress indicators where external logic controls step navigation.\n */\nexport const StatelessSteps = {\n  render: () => html`\n  <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  `\n};\n"],"mappings":";AAGA,IAAA,IAAS"}
+{"version":3,"file":"steps.examples.js","names":["steps_examples_default"],"sources":["../../src/steps/steps.examples.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html } from 'lit';\nimport '@nvidia-elements/core/steps/define.js';\nimport '@nvidia-elements/core/card/define.js';\nimport '@nvidia-elements/core/dot/define.js';\nimport '@nvidia-elements/core/icon/define.js';\n\nexport default {\n  title: 'Elements/Steps',\n  component: 'nve-steps',\n};\n\n/**\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.\n */\nexport const Default = {\n  render: () => html`\n  <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  `\n};\n\n/**\n * @summary Condensed step indicator with reduced visual weight. Ideal for space-constrained layouts or secondary navigation where steps need less prominence.\n */\nexport const Condensed = {\n  render: () => html`\n  <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  `\n};\n\n/**\n * @summary Vertical step layout for sidebar navigation or tall containers. Use when horizontal space constrains layout or steps require longer labels.\n */\nexport const VerticalSteps = {\n  render: () => html`\n  <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  `\n};\n\n/**\n * @summary Vertical condensed steps combining both layout options. Ideal for dense sidebar navigation with minimal visual footprint.\n */\nexport const VerticalCondensedSteps = {\n  render: () => html`\n  <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  `\n};\n\n/**\n * @summary Display-only steps without interactive selection behavior. Use for showing progress indicators where external logic controls step navigation.\n */\nexport const StatelessSteps = {\n  render: () => html`\n  <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  `\n};\n"],"mappings":";AAGA,IAAAA,IAAS"}

package/dist/steps/steps.js

@@ -1,6 +1,5 @@
-//#region src/steps/steps.css?inline
+// src/steps/steps.css?inline
 var e = ":host{--gap: var(--nve-ref-space-lg)}[internal-host]{position:relative;display:flex;flex-direction:row;gap:var(--gap)}:host([vertical]) [internal-host]{flex-direction:column}:host(:not([vertical])) ::slotted(nve-steps-item:not(:last-child)):after{content:\"\";position:absolute;width:var(--gap);top:50%;border:var(--nve-ref-border-width-sm) dashed var(--nve-ref-border-color)}:host([vertical]) ::slotted(nve-steps-item:not(:last-child)):after{content:\"\";position:absolute;height:var(--gap);left:var(--nve-ref-size-500);top:100%;border:var(--nve-ref-border-width-sm) dashed var(--nve-ref-border-color)}:host([vertical]:not([container=\"condensed\"])) ::slotted(nve-steps-item){--width: 100%}";
-//#endregion
 export { e as default };
 
 //# sourceMappingURL=steps.js.map

package/dist/steps/steps.js.map

@@ -1 +1 @@
-{"version":3,"file":"steps.js","names":[],"sources":["../../src/steps/steps.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n:host {\n  --gap: var(--nve-ref-space-lg);\n}\n\n[internal-host] {\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  gap: var(--gap);\n}\n\n:host([vertical]) [internal-host] {\n  flex-direction: column;\n}\n\n:host(:not([vertical])) ::slotted(nve-steps-item:not(:last-child))::after {\n  content: '';\n  position: absolute;\n  width: var(--gap);\n  top: 50%;\n  border: var(--nve-ref-border-width-sm) dashed var(--nve-ref-border-color);\n}\n\n:host([vertical]) ::slotted(nve-steps-item:not(:last-child))::after {\n  content: '';\n  position: absolute;\n  height: var(--gap);\n  left: var(--nve-ref-size-500);\n  top: 100%;\n  border: var(--nve-ref-border-width-sm) dashed var(--nve-ref-border-color);\n}\n\n:host([vertical]:not([container='condensed'])) ::slotted(nve-steps-item) {\n  --width: 100%;\n}\n"],"mappings":""}
+{"version":3,"file":"steps.js","names":["steps_default"],"sources":["../../src/steps/steps.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n:host {\n  --gap: var(--nve-ref-space-lg);\n}\n\n[internal-host] {\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  gap: var(--gap);\n}\n\n:host([vertical]) [internal-host] {\n  flex-direction: column;\n}\n\n:host(:not([vertical])) ::slotted(nve-steps-item:not(:last-child))::after {\n  content: '';\n  position: absolute;\n  width: var(--gap);\n  top: 50%;\n  border: var(--nve-ref-border-width-sm) dashed var(--nve-ref-border-color);\n}\n\n:host([vertical]) ::slotted(nve-steps-item:not(:last-child))::after {\n  content: '';\n  position: absolute;\n  height: var(--gap);\n  left: var(--nve-ref-size-500);\n  top: 100%;\n  border: var(--nve-ref-border-width-sm) dashed var(--nve-ref-border-color);\n}\n\n:host([vertical]:not([container='condensed'])) ::slotted(nve-steps-item) {\n  --width: 100%;\n}\n"],"mappings":""}

package/dist/steps/steps2.js

@@ -4,7 +4,7 @@ import { attachInternals as n } from "../internal/utils/a11y.js";
 import { stateSelected as r } from "../internal/controllers/state-selected.controller.js";
 import { scopedRegistry as i } from "../internal/decorators/scoped-registry.js";
 import { useStyles as a } from "../internal/styles/index.js";
-import o from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js";
+import o from "../_virtual/_@oxc-project_runtime@0.155.0/helpers/esm/decorate.js";
 import { IconButton as s } from "../icon-button/icon-button2.js";
 import c from "./steps-item.js";
 import l from "./steps.js";
@@ -15,7 +15,7 @@ import { state as m } from "lit/decorators/state.js";
 import { ButtonFormControlMixin as h } from "@nvidia-elements/forms/mixins";
 import { queryAssignedElements as g } from "lit/decorators/query-assigned-elements.js";
 import { when as _ } from "lit/directives/when.js";
-//#region src/steps/steps.ts
+// src/steps/steps.ts
 var v = class extends h(d) {
 	static {
 		this.styles = a([c]);
@@ -23,7 +23,7 @@ var v = class extends h(d) {
 	static {
 		this.metadata = {
 			tag: "nve-steps-item",
-			version: "2.20.0",
+			version: "2.20.2",
 			parents: ["nve-steps"]
 		};
 	}
@@ -69,7 +69,7 @@ var y = class extends d {
 	static {
 		this.metadata = {
 			tag: "nve-steps",
-			version: "2.20.0",
+			version: "2.20.2",
 			children: ["nve-steps-item"]
 		};
 	}
@@ -80,7 +80,7 @@ var y = class extends d {
 		};
 	}
 	#e(e) {
-		!this.behaviorSelect || !e.matches("nve-steps-item") || e.disabled || (this.steps.forEach((e) => e.selected = !1), e.selected = !0);
+		this.behaviorSelect && e.matches("nve-steps-item") && !e.disabled && (this.steps.forEach((e) => e.selected = !1), e.selected = !0);
 	}
 	render() {
 		return f`<div internal-host><slot @slotchange="${this.#n}"></slot></div>`;
@@ -111,7 +111,6 @@ o([p({
 	type: Boolean,
 	attribute: "behavior-select"
 })], y.prototype, "behaviorSelect", void 0), o([g({ selector: "nve-steps-item" })], y.prototype, "steps", void 0), y = o([e(), t()], y);
-//#endregion
 export { y as Steps, v as StepsItem };
 
 //# sourceMappingURL=steps2.js.map

package/dist/steps/steps2.js.map

@@ -1 +1 @@
-{"version":3,"file":"steps2.js","names":[],"sources":["../../src/steps/steps.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 { state } from 'lit/decorators/state.js';\nimport { when } from 'lit/directives/when.js';\nimport { queryAssignedElements } from 'lit/decorators/query-assigned-elements.js';\nimport { ButtonFormControlMixin } from '@nvidia-elements/forms/mixins';\nimport type { KeynavListConfig } from '@nvidia-elements/core/internal';\nimport {\n  stateSelected,\n  useStyles,\n  keyNavigationList,\n  attachInternals,\n  audit,\n  scopedRegistry\n} from '@nvidia-elements/core/internal';\nimport stepsItemStyleSheet from './steps-item.css?inline';\nimport stepsStyleSheet from './steps.css?inline';\nimport { IconButton } from '@nvidia-elements/core/icon-button';\nimport { ProgressRing } from '@nvidia-elements/core/progress-ring';\n\n/**\n * @element nve-steps-item\n * @description Represents an individual step within a multi-step workflow, displaying its status and enabling navigation within the parent steps component.\n * @documentation https://nvidia.github.io/elements/docs/elements/steps/\n * @since 0.30.0\n * @entrypoint \\@nvidia-elements/core/steps\n * @slot - default slot for step text\n * @slot status-icon - custom slotted step icon\n * @cssprop --font-size\n * @cssprop --border-top\n * @cssprop --width\n * @cssprop --font-weight\n * @cssprop --border-radius\n * @cssprop --color\n * @cssprop --text-transform\n * @csspart icon-button - The icon button element\n * @csspart progress-ring - The progress ring element\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/tabs/\n */\n@audit()\n@scopedRegistry()\n@stateSelected<StepsItem>()\nexport class StepsItem extends ButtonFormControlMixin(LitElement) {\n  /**\n   * Determines which item the user selects, defaults to false.\n   */\n  @property({ type: Boolean, reflect: true }) selected = false;\n\n  /**\n   * Controls the step status. `accent` has no default status icon, `danger` displays an alert icon, `success` displays a check icon, and `pending` displays a progress indicator. Omit the property to display the step number.\n   */\n  @property({ type: String, reflect: true }) status?: 'accent' | 'danger' | 'success' | 'pending';\n\n  /**\n   * Determines whether the steps should display in condensed format with no text labels.\n   */\n  @property({ type: String, reflect: true }) container?: 'condensed';\n\n  /** @private */\n  @state() index: number = 0;\n\n  static styles = useStyles([stepsItemStyleSheet]);\n\n  static readonly metadata = {\n    tag: 'nve-steps-item',\n    version: '0.0.0',\n    parents: ['nve-steps']\n  };\n\n  static elementDefinitions = {\n    [IconButton.metadata.tag]: IconButton,\n    [ProgressRing.metadata.tag]: ProgressRing\n  };\n\n  render() {\n    return html`\n      <div internal-host focus-within>\n        <slot name=\"status-icon\">\n          ${!this.status ? html`<nve-icon-button part=\"icon-button\" readonly id=\"number-icon\" .disabled=${this.disabled}>${this.index}</nve-icon-button>` : ''}\n          ${this.status === 'success' ? html`<nve-icon-button part=\"icon-button\" readonly size=\"sm\" interaction=\"emphasis\" icon-name=\"check\"></nve-icon-button>` : ''}\n          ${this.status === 'danger' ? html`<nve-icon-button part=\"icon-button\" readonly size=\"sm\" interaction=\"destructive\" icon-name=\"exclamation-circle\"></nve-icon-button>` : ''}\n          ${this.status === 'pending' ? html`<nve-progress-ring part=\"progress-ring\" status=\"accent\" size=\"sm\"></nve-progress-ring>` : ''}\n        </slot>\n        ${when(this.container !== 'condensed', () => html`<slot></slot>`)}\n      </div>\n    `;\n  }\n\n  constructor() {\n    super();\n    this.type = 'button';\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this._internals.role = 'tab';\n  }\n}\n\n/**\n * @element nve-steps\n * @description Steps enables a multi-step workflow allowing a user to complete a goal in a specific sequence.\n * @documentation https://nvidia.github.io/elements/docs/elements/steps/\n * @since 0.30.0\n * @entrypoint \\@nvidia-elements/core/steps\n * @slot - default slot for steps-item\n * @cssprop --gap\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/tabs/\n */\n@audit()\n@keyNavigationList<Steps>()\nexport class Steps extends LitElement {\n  /**\n   * Determines whether the steps should display in a vertical layout vs. defaulting to horizontal.\n   */\n  @property({ type: Boolean, reflect: true }) vertical = false;\n\n  /**\n   * Determines whether the steps should display in condensed format with no text labels.\n   */\n  @property({ type: String, reflect: true }) container?: 'condensed';\n\n  /**\n   * Determines whether the steps should handle selection behavior vs. defaults to off.\n   */\n  @property({ type: Boolean, attribute: 'behavior-select' }) behaviorSelect = false;\n\n  static styles = useStyles([stepsStyleSheet]);\n\n  static readonly metadata = {\n    tag: 'nve-steps',\n    version: '0.0.0',\n    children: ['nve-steps-item']\n  };\n\n  /** @private */\n  get keynavListConfig(): KeynavListConfig {\n    return {\n      items: this.steps,\n      layout: this.vertical ? 'vertical' : 'horizontal'\n    };\n  }\n\n  @queryAssignedElements({ selector: 'nve-steps-item' }) private steps!: StepsItem[];\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  #selectTab(stepsItem: HTMLElement & { matches: Element['matches']; disabled?: boolean; selected?: boolean }) {\n    if (!this.behaviorSelect || !stepsItem.matches('nve-steps-item') || stepsItem.disabled) {\n      return;\n    }\n\n    this.steps.forEach(i => (i.selected = false));\n    stepsItem.selected = true;\n  }\n\n  render() {\n    return html`\n      <div internal-host>\n        <slot @slotchange=${this.#syncChildSteps}></slot>\n      </div>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    this._internals.role = 'tablist';\n    this.addEventListener('click', this.#onClick);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener('click', this.#onClick);\n  }\n\n  #onClick = (e: Event) => {\n    this.#selectTab(e.target as HTMLElement & { matches: Element['matches']; disabled?: boolean; selected?: boolean });\n  };\n\n  updated(props: PropertyValues<this>) {\n    super.updated(props);\n    if (props.has('container') || props.has('vertical')) {\n      this.#syncChildSteps();\n    }\n  }\n\n  #syncChildSteps() {\n    this._internals.ariaOrientation = this.vertical ? 'vertical' : 'horizontal';\n    this.steps.forEach((item, i) => {\n      item.index = i + 1;\n      item.container = this.container;\n    });\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"steps2.js","names":["stepsItemStyleSheet","_decorate","stepsStyleSheet","__decorate","steps_item_default","steps_default","StepsItem","ButtonFormControlMixin","LitElement","useStyles","IconButton","ProgressRing","when","property","state","audit","scopedRegistry","stateSelected","Steps","_args","#onClick","#selectTab","stepsItem","#syncChildSteps","attachInternals","props","i","queryAssignedElements","keyNavigationList"],"sources":["../../src/steps/steps.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 { state } from 'lit/decorators/state.js';\nimport { when } from 'lit/directives/when.js';\nimport { queryAssignedElements } from 'lit/decorators/query-assigned-elements.js';\nimport { ButtonFormControlMixin } from '@nvidia-elements/forms/mixins';\nimport type { KeynavListConfig } from '@nvidia-elements/core/internal';\nimport {\n  stateSelected,\n  useStyles,\n  keyNavigationList,\n  attachInternals,\n  audit,\n  scopedRegistry\n} from '@nvidia-elements/core/internal';\nimport stepsItemStyleSheet from './steps-item.css?inline';\nimport stepsStyleSheet from './steps.css?inline';\nimport { IconButton } from '@nvidia-elements/core/icon-button';\nimport { ProgressRing } from '@nvidia-elements/core/progress-ring';\n\n/**\n * @element nve-steps-item\n * @description Represents an individual step within a multi-step workflow, displaying its status and enabling navigation within the parent steps component.\n * @documentation https://nvidia.github.io/elements/docs/elements/steps/\n * @since 0.30.0\n * @entrypoint \\@nvidia-elements/core/steps\n * @slot - default slot for step text\n * @slot status-icon - custom slotted step icon\n * @cssprop --font-size\n * @cssprop --border-top\n * @cssprop --width\n * @cssprop --font-weight\n * @cssprop --border-radius\n * @cssprop --color\n * @cssprop --text-transform\n * @csspart icon-button - The icon button element\n * @csspart progress-ring - The progress ring element\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/tabs/\n */\n@audit()\n@scopedRegistry()\n@stateSelected<StepsItem>()\nexport class StepsItem extends ButtonFormControlMixin(LitElement) {\n  /**\n   * Determines which item the user selects, defaults to false.\n   */\n  @property({ type: Boolean, reflect: true }) selected = false;\n\n  /**\n   * Controls the step status. `accent` has no default status icon, `danger` displays an alert icon, `success` displays a check icon, and `pending` displays a progress indicator. Omit the property to display the step number.\n   */\n  @property({ type: String, reflect: true }) status?: 'accent' | 'danger' | 'success' | 'pending';\n\n  /**\n   * Determines whether the steps should display in condensed format with no text labels.\n   */\n  @property({ type: String, reflect: true }) container?: 'condensed';\n\n  /** @private */\n  @state() index: number = 0;\n\n  static styles = useStyles([stepsItemStyleSheet]);\n\n  static readonly metadata = {\n    tag: 'nve-steps-item',\n    version: '0.0.0',\n    parents: ['nve-steps']\n  };\n\n  static elementDefinitions = {\n    [IconButton.metadata.tag]: IconButton,\n    [ProgressRing.metadata.tag]: ProgressRing\n  };\n\n  render() {\n    return html`\n      <div internal-host focus-within>\n        <slot name=\"status-icon\">\n          ${!this.status ? html`<nve-icon-button part=\"icon-button\" readonly id=\"number-icon\" .disabled=${this.disabled}>${this.index}</nve-icon-button>` : ''}\n          ${this.status === 'success' ? html`<nve-icon-button part=\"icon-button\" readonly size=\"sm\" interaction=\"emphasis\" icon-name=\"check\"></nve-icon-button>` : ''}\n          ${this.status === 'danger' ? html`<nve-icon-button part=\"icon-button\" readonly size=\"sm\" interaction=\"destructive\" icon-name=\"exclamation-circle\"></nve-icon-button>` : ''}\n          ${this.status === 'pending' ? html`<nve-progress-ring part=\"progress-ring\" status=\"accent\" size=\"sm\"></nve-progress-ring>` : ''}\n        </slot>\n        ${when(this.container !== 'condensed', () => html`<slot></slot>`)}\n      </div>\n    `;\n  }\n\n  constructor() {\n    super();\n    this.type = 'button';\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this._internals.role = 'tab';\n  }\n}\n\n/**\n * @element nve-steps\n * @description Steps enables a multi-step workflow allowing a user to complete a goal in a specific sequence.\n * @documentation https://nvidia.github.io/elements/docs/elements/steps/\n * @since 0.30.0\n * @entrypoint \\@nvidia-elements/core/steps\n * @slot - default slot for steps-item\n * @cssprop --gap\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/tabs/\n */\n@audit()\n@keyNavigationList<Steps>()\nexport class Steps extends LitElement {\n  /**\n   * Determines whether the steps should display in a vertical layout vs. defaulting to horizontal.\n   */\n  @property({ type: Boolean, reflect: true }) vertical = false;\n\n  /**\n   * Determines whether the steps should display in condensed format with no text labels.\n   */\n  @property({ type: String, reflect: true }) container?: 'condensed';\n\n  /**\n   * Determines whether the steps should handle selection behavior vs. defaults to off.\n   */\n  @property({ type: Boolean, attribute: 'behavior-select' }) behaviorSelect = false;\n\n  static styles = useStyles([stepsStyleSheet]);\n\n  static readonly metadata = {\n    tag: 'nve-steps',\n    version: '0.0.0',\n    children: ['nve-steps-item']\n  };\n\n  /** @private */\n  get keynavListConfig(): KeynavListConfig {\n    return {\n      items: this.steps,\n      layout: this.vertical ? 'vertical' : 'horizontal'\n    };\n  }\n\n  @queryAssignedElements({ selector: 'nve-steps-item' }) private steps!: StepsItem[];\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  #selectTab(stepsItem: HTMLElement & { matches: Element['matches']; disabled?: boolean; selected?: boolean }) {\n    if (!this.behaviorSelect || !stepsItem.matches('nve-steps-item') || stepsItem.disabled) {\n      return;\n    }\n\n    this.steps.forEach(i => (i.selected = false));\n    stepsItem.selected = true;\n  }\n\n  render() {\n    return html`\n      <div internal-host>\n        <slot @slotchange=${this.#syncChildSteps}></slot>\n      </div>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    this._internals.role = 'tablist';\n    this.addEventListener('click', this.#onClick);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener('click', this.#onClick);\n  }\n\n  #onClick = (e: Event) => {\n    this.#selectTab(e.target as HTMLElement & { matches: Element['matches']; disabled?: boolean; selected?: boolean });\n  };\n\n  updated(props: PropertyValues<this>) {\n    super.updated(props);\n    if (props.has('container') || props.has('vertical')) {\n      this.#syncChildSteps();\n    }\n  }\n\n  #syncChildSteps() {\n    this._internals.ariaOrientation = this.vertical ? 'vertical' : 'horizontal';\n    this.steps.forEach((item, i) => {\n      item.index = i + 1;\n      item.container = this.container;\n    });\n  }\n}\n"],"mappings":"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"}

package/dist/switch/define.js

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

package/dist/switch/define.js.map

@@ -1 +1 @@
-{"version":3,"file":"define.js","names":[],"sources":["../../src/switch/define.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { define } from '@nvidia-elements/foundations/internal/define';\nimport { Switch, SwitchGroup } from '@nvidia-elements/core/switch';\nimport { Control, ControlGroup, ControlMessage } from '@nvidia-elements/core/forms';\n\ndefine(Switch);\ndefine(SwitchGroup);\ndefine(Control);\ndefine(ControlGroup);\ndefine(ControlMessage);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nve-switch': Switch;\n    'nve-switch-group': SwitchGroup;\n  }\n}\n"],"mappings":";;;;;;AAOA,EAAO,CAAM,GACb,EAAO,CAAW,GAClB,EAAO,CAAO,GACd,EAAO,CAAY,GACnB,EAAO,CAAc"}
+{"version":3,"file":"define.js","names":["define","Switch","SwitchGroup","Control","ControlGroup","ControlMessage"],"sources":["../../src/switch/define.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { define } from '@nvidia-elements/foundations/internal/define';\nimport { Switch, SwitchGroup } from '@nvidia-elements/core/switch';\nimport { Control, ControlGroup, ControlMessage } from '@nvidia-elements/core/forms';\n\ndefine(Switch);\ndefine(SwitchGroup);\ndefine(Control);\ndefine(ControlGroup);\ndefine(ControlMessage);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nve-switch': Switch;\n    'nve-switch-group': SwitchGroup;\n  }\n}\n"],"mappings":";;;;;;AAOAA,EAAOC,CAAM,GACbD,EAAOE,CAAW,GAClBF,EAAOG,CAAO,GACdH,EAAOI,CAAY,GACnBJ,EAAOK,CAAc"}

package/dist/switch/switch-group.js

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

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

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

package/dist/switch/switch-group2.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"switch-group2.js","names":[],"sources":["../../src/switch/switch-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, useStyles } from '@nvidia-elements/core/internal';\nimport { ControlGroup } from '@nvidia-elements/core/forms';\nimport styles from './switch-group.css?inline';\n\n/**\n * @element nve-switch-group\n * @description A switch group is a container for a group of switches.\n * @since 0.3.0\n * @entrypoint \\@nvidia-elements/core/switch\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/switch/\n */\n@audit()\nexport class SwitchGroup extends ControlGroup {\n  static styles: CSSResult[] = useStyles([...ControlGroup.styles, styles]);\n\n  static readonly metadata = {\n    tag: 'nve-switch-group',\n    version: '0.0.0',\n    children: ['label', 'nve-control-message', 'nve-switch']\n  };\n}\n"],"mappings":";;;;;;AAgBO,IAAM,IAAN,cAA0B,EAAa;;EACf,KAAA,SAAA,EAAU,CAAC,GAAG,EAAa,QAAQ,CAAM,CAAC;;;EAE5C,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;GACT,UAAU;IAAC;IAAS;IAAuB;GAAY;EACzD;;AACF;AATC,IAAA,EAAA,CAAA,EAAM,CAAA,GAAA,CAAA"}
+{"version":3,"file":"switch-group2.js","names":["styles","_decorate","__decorate","switch_group_default","SwitchGroup","ControlGroup","useStyles","audit"],"sources":["../../src/switch/switch-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, useStyles } from '@nvidia-elements/core/internal';\nimport { ControlGroup } from '@nvidia-elements/core/forms';\nimport styles from './switch-group.css?inline';\n\n/**\n * @element nve-switch-group\n * @description A switch group is a container for a group of switches.\n * @since 0.3.0\n * @entrypoint \\@nvidia-elements/core/switch\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/switch/\n */\n@audit()\nexport class SwitchGroup extends ControlGroup {\n  static styles: CSSResult[] = useStyles([...ControlGroup.styles, styles]);\n\n  static readonly metadata = {\n    tag: 'nve-switch-group',\n    version: '0.0.0',\n    children: ['label', 'nve-control-message', 'nve-switch']\n  };\n}\n"],"mappings":";;;;;;AAgBO,IAAMI,IAAN,cAA0BC,EAAa;;EACf,KAAA,SAAAC,EAAU,CAAC,GAAGD,EAAa,QAAQL,CAAM,CAAC;;;EAE5C,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;GACT,UAAU;IAAC;IAAS;IAAuB;GAAY;EACzD;;AACF;AATC,IAAAC,EAAA,CAAAM,EAAM,CAAA,GAAAH,CAAA"}

package/dist/switch/switch.examples.js

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

package/dist/switch/switch.examples.js.map

@@ -1 +1 @@
-{"version":3,"file":"switch.examples.js","names":[],"sources":["../../src/switch/switch.examples.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html } from 'lit';\nimport '@nvidia-elements/core/forms/define.js';\nimport '@nvidia-elements/core/switch/define.js';\n\nexport default {\n  title: 'Elements/Switch',\n  component: 'nve-switch',\n};\n\n/**\n * @summary Basic toggle switch for binary on/off controls and feature activation.\n */\nexport const Default = {\n  render: () => html`\n<nve-switch>\n  <label>label</label>\n  <input type=\"checkbox\" />\n</nve-switch>`\n};\n\n\n/**\n * @summary Size variants of toggle switches use custom CSS properties.\n * @tags test-case\n */\nexport const Size = {\n  render: () => html`\n<nve-switch 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  <label>label</label>\n  <input type=\"checkbox\" />\n</nve-switch>`\n};\n\n/**\n * @summary Toggle switches with different states including default, disabled, success, and error with control messages.\n */\nexport const States = {\n  render: () => html`\n<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\n  <nve-switch>\n    <label>disabled</label>\n    <input type=\"checkbox\" disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-switch>\n\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\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};\n\n/**\n * @summary Switch groups with vertical layout for many related toggles stacked in a column with validation states.\n */\nexport const VerticalGroup = {\n  render: () => html`\n<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\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n\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\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\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" disabled />\n    </nve-switch>\n\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\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\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n\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\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\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n\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`\n};\n\n/**\n * @summary Switch groups with vertical inline layout for compact vertical stacking with inline label positioning.\n * @tags test-case\n */\nexport const VerticalInlineGroup = {\n  render: () => html`\n<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-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\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n\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\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\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" disabled />\n    </nve-switch>\n\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\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\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n\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\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\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n\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`\n};\n\n/**\n * @summary Switch groups with horizontal layout for many toggles arranged in a row, ideal for limited options.\n * @tags test-case\n */\nexport const HorizontalGroup = {\n  render: () => html`\n<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\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n\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\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\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" disabled />\n    </nve-switch>\n\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\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\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n\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\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\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n\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`\n};\n\n/**\n * @summary Switch groups with horizontal inline layout for space-efficient horizontal arrangement with inline labels.\n * @tags test-case\n */\nexport const HorizontalInlineGroup = {\n  render: () => html`\n<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-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\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n\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\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\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" disabled />\n    </nve-switch>\n\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\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\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n\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\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\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n\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`\n};\n"],"mappings":";AAGA,IAAA,IAAS"}
+{"version":3,"file":"switch.examples.js","names":["switch_examples_default"],"sources":["../../src/switch/switch.examples.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html } from 'lit';\nimport '@nvidia-elements/core/forms/define.js';\nimport '@nvidia-elements/core/switch/define.js';\n\nexport default {\n  title: 'Elements/Switch',\n  component: 'nve-switch',\n};\n\n/**\n * @summary Basic toggle switch for binary on/off controls and feature activation.\n */\nexport const Default = {\n  render: () => html`\n<nve-switch>\n  <label>label</label>\n  <input type=\"checkbox\" />\n</nve-switch>`\n};\n\n\n/**\n * @summary Size variants of toggle switches use custom CSS properties.\n * @tags test-case\n */\nexport const Size = {\n  render: () => html`\n<nve-switch 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  <label>label</label>\n  <input type=\"checkbox\" />\n</nve-switch>`\n};\n\n/**\n * @summary Toggle switches with different states including default, disabled, success, and error with control messages.\n */\nexport const States = {\n  render: () => html`\n<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\n  <nve-switch>\n    <label>disabled</label>\n    <input type=\"checkbox\" disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-switch>\n\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\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};\n\n/**\n * @summary Switch groups with vertical layout for many related toggles stacked in a column with validation states.\n */\nexport const VerticalGroup = {\n  render: () => html`\n<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\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n\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\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\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" disabled />\n    </nve-switch>\n\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\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\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n\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\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\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n\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`\n};\n\n/**\n * @summary Switch groups with vertical inline layout for compact vertical stacking with inline label positioning.\n * @tags test-case\n */\nexport const VerticalInlineGroup = {\n  render: () => html`\n<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-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\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n\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\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\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" disabled />\n    </nve-switch>\n\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\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\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n\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\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\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n\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`\n};\n\n/**\n * @summary Switch groups with horizontal layout for many toggles arranged in a row, ideal for limited options.\n * @tags test-case\n */\nexport const HorizontalGroup = {\n  render: () => html`\n<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\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n\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\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\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" disabled />\n    </nve-switch>\n\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\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\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n\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\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\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n\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`\n};\n\n/**\n * @summary Switch groups with horizontal inline layout for space-efficient horizontal arrangement with inline labels.\n * @tags test-case\n */\nexport const HorizontalInlineGroup = {\n  render: () => html`\n<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-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\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n\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\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\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" disabled />\n    </nve-switch>\n\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\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\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n\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\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\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n\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`\n};\n"],"mappings":";AAGA,IAAAA,IAAS"}