@nvidia-elements/core 2.1.0 → 2.1.1

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

@@ -1 +1 @@
-{"version":3,"file":"sort-button2.js","names":["#i18nController","#onClick"],"sources":["../../src/sort-button/sort-button.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { ButtonFormControlMixin } from '@nvidia-elements/forms/mixins';\nimport { Icon } from '@nvidia-elements/core/icon';\nimport { useStyles, I18nController, scopedRegistry } from '@nvidia-elements/core/internal';\nimport styles from './sort-button.css?inline';\n\nconst nextSort = {\n  none: 'ascending',\n  ascending: 'descending',\n  descending: 'none'\n};\n\n/**\n * @element nve-sort-button\n * @description A sort button is a control that enables users to sort a list of items in ascending or descending order.\n * @since 0.11.0\n * @entrypoint \\@nvidia-elements/core/sort-button\n * @event sort - Dispatched on sort button click, returns the current sort value and the next sort value.\n * @cssprop --width\n * @cssprop --height\n * @cssprop --border-radius\n * @cssprop --color\n * @csspart icon - The icon element\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/spinbutton/\n */\n@scopedRegistry()\nexport class SortButton extends ButtonFormControlMixin(LitElement) {\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-sort-button',\n    version: '0.0.0'\n  };\n\n  static elementDefinitions = {\n    [Icon.metadata.tag]: Icon\n  };\n\n  /**\n   * The current sort value, can be ascending, descending, or none.\n   */\n  @property({ type: String, reflect: true }) sort: 'ascending' | 'descending' | 'none' = 'none';\n\n  #i18nController: I18nController<this> = new I18nController<this>(this);\n\n  /**\n   * Updates internal string values for internationalization.\n   */\n  @property({ type: Object }) i18n = this.#i18nController.i18n;\n\n  render() {\n    return html`\n      <div internal-host focus-within>\n        <nve-icon part=\"icon\" .name=${this.sort === 'descending' ? 'sort-descending' : 'sort-ascending'} aria-hidden=\"true\"></nve-icon>\n      </div>\n    `;\n  }\n\n  constructor() {\n    super();\n    this.type = 'button';\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this._internals.role = 'spinbutton';\n    this.addEventListener('click', this.#onClick);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener('click', this.#onClick);\n  }\n\n  #onClick = () => {\n    this._internals.ariaLabel = `${this.#i18nController.i18n.sort} ${nextSort[this.sort]}`;\n    this.dispatchEvent(\n      new CustomEvent('sort', {\n        detail: { value: this.sort, next: nextSort[this.sort] },\n        bubbles: true,\n        composed: true\n      })\n    );\n  };\n}\n"],"mappings":";;;;;;;;;;AAUA,IAAM,IAAW;CACf,MAAM;CACN,WAAW;CACX,YAAY;AACd,GAgBO,IAAA,cAAyB,EAAuB,CAAU,CAAC,CAAC;;gBACjD,EAAU,CAAC,CAAM,CAAC;;;kBAEP;GACzB,KAAK;GACL,SAAS;EACX;;;4BAE4B,GACzB,EAAK,SAAS,MAAM,EACvB;;CAOA;CAOA,SAAS;EACP,OAAO,CAAI,gEAEuB,KAAK,SAAS,eAAe,oBAAoB,iBAAiB;CAGtG;CAEA,cAAc;EAEZ,AADA,MAAM,eAlB+E,kBAE/C,IAAI,EAAqB,IAAI,eAKlC,KAAKA,GAAgB,sBA0BvC;GAEf,AADA,KAAK,WAAW,YAAY,GAAG,KAAKA,GAAgB,KAAK,KAAK,GAAG,EAAS,KAAK,SAC/E,KAAK,cACH,IAAI,YAAY,QAAQ;IACtB,QAAQ;KAAE,OAAO,KAAK;KAAM,MAAM,EAAS,KAAK;IAAM;IACtD,SAAS;IACT,UAAU;GACZ,CAAC,CACH;EACF,GAvBE,KAAK,OAAO;CACd;CAEA,oBAAoB;EAGlB,AAFA,MAAM,kBAAkB,GACxB,KAAK,WAAW,OAAO,cACvB,KAAK,iBAAiB,SAAS,KAAKC,EAAQ;CAC9C;CAEA,uBAAuB;EAErB,AADA,MAAM,qBAAqB,GAC3B,KAAK,oBAAoB,SAAS,KAAKA,EAAQ;CACjD;CAEA;AAUF;GA3CG,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,MAOxC,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,UAvB3B,EAAe,CAAA,GAAA,CAAA"}
+{"version":3,"file":"sort-button2.js","names":["#i18nController","#onClick"],"sources":["../../src/sort-button/sort-button.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { ButtonFormControlMixin } from '@nvidia-elements/forms/mixins';\nimport { Icon } from '@nvidia-elements/core/icon';\nimport { useStyles, I18nController, scopedRegistry } from '@nvidia-elements/core/internal';\nimport styles from './sort-button.css?inline';\n\nconst nextSort = {\n  none: 'ascending',\n  ascending: 'descending',\n  descending: 'none'\n};\n\n/**\n * @element nve-sort-button\n * @description A sort button is a control that enables users to sort a list of items in ascending or descending order.\n * @documentation https://nvidia.github.io/elements/docs/elements/sort-button/\n * @since 0.11.0\n * @entrypoint \\@nvidia-elements/core/sort-button\n * @event sort - Dispatched on sort button click, returns the current sort value and the next sort value.\n * @cssprop --width\n * @cssprop --height\n * @cssprop --border-radius\n * @cssprop --color\n * @csspart icon - The icon element\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/spinbutton/\n */\n@scopedRegistry()\nexport class SortButton extends ButtonFormControlMixin(LitElement) {\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-sort-button',\n    version: '0.0.0'\n  };\n\n  static elementDefinitions = {\n    [Icon.metadata.tag]: Icon\n  };\n\n  /**\n   * The current sort value, can be ascending, descending, or none.\n   */\n  @property({ type: String, reflect: true }) sort: 'ascending' | 'descending' | 'none' = 'none';\n\n  #i18nController: I18nController<this> = new I18nController<this>(this);\n\n  /**\n   * Updates internal string values for internationalization.\n   */\n  @property({ type: Object }) i18n = this.#i18nController.i18n;\n\n  render() {\n    return html`\n      <div internal-host focus-within>\n        <nve-icon part=\"icon\" .name=${this.sort === 'descending' ? 'sort-descending' : 'sort-ascending'} aria-hidden=\"true\"></nve-icon>\n      </div>\n    `;\n  }\n\n  constructor() {\n    super();\n    this.type = 'button';\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this._internals.role = 'spinbutton';\n    this.addEventListener('click', this.#onClick);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener('click', this.#onClick);\n  }\n\n  #onClick = () => {\n    this._internals.ariaLabel = `${this.#i18nController.i18n.sort} ${nextSort[this.sort]}`;\n    this.dispatchEvent(\n      new CustomEvent('sort', {\n        detail: { value: this.sort, next: nextSort[this.sort] },\n        bubbles: true,\n        composed: true\n      })\n    );\n  };\n}\n"],"mappings":";;;;;;;;;;AAUA,IAAM,IAAW;CACf,MAAM;CACN,WAAW;CACX,YAAY;AACd,GAiBO,IAAA,cAAyB,EAAuB,CAAU,CAAC,CAAC;;gBACjD,EAAU,CAAC,CAAM,CAAC;;;kBAEP;GACzB,KAAK;GACL,SAAS;EACX;;;4BAE4B,GACzB,EAAK,SAAS,MAAM,EACvB;;CAOA;CAOA,SAAS;EACP,OAAO,CAAI,gEAEuB,KAAK,SAAS,eAAe,oBAAoB,iBAAiB;CAGtG;CAEA,cAAc;EAEZ,AADA,MAAM,eAlB+E,kBAE/C,IAAI,EAAqB,IAAI,eAKlC,KAAKA,GAAgB,sBA0BvC;GAEf,AADA,KAAK,WAAW,YAAY,GAAG,KAAKA,GAAgB,KAAK,KAAK,GAAG,EAAS,KAAK,SAC/E,KAAK,cACH,IAAI,YAAY,QAAQ;IACtB,QAAQ;KAAE,OAAO,KAAK;KAAM,MAAM,EAAS,KAAK;IAAM;IACtD,SAAS;IACT,UAAU;GACZ,CAAC,CACH;EACF,GAvBE,KAAK,OAAO;CACd;CAEA,oBAAoB;EAGlB,AAFA,MAAM,kBAAkB,GACxB,KAAK,WAAW,OAAO,cACvB,KAAK,iBAAiB,SAAS,KAAKC,EAAQ;CAC9C;CAEA,uBAAuB;EAErB,AADA,MAAM,qBAAqB,GAC3B,KAAK,oBAAoB,SAAS,KAAKA,EAAQ;CACjD;CAEA;AAUF;GA3CG,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,MAOxC,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,UAvB3B,EAAe,CAAA,GAAA,CAAA"}

package/dist/sparkline/sparkline.d.ts

@@ -4,6 +4,7 @@ import type { DataElement, Interpolation, SizeExpanded, SparklineMark, SupportSt
 /**
  * @element nve-sparkline
  * @description A sparkline is a compact, word-sized chart with typographic scale, for data-dense layouts (text, tables, cards, dashboards).
+ * @documentation https://nvidia.github.io/elements/docs/elements/sparkline/
  * @since 0.0.0
  * @entrypoint \@nvidia-elements/core/sparkline
  * @cssprop --height - Height (defaults to 1em and scales with parent font-size).

package/dist/sparkline/sparkline2.js

@@ -21,7 +21,7 @@ var C = class extends _ {
 	static {
 		this.metadata = {
 			tag: "nve-sparkline",
-			version: "2.1.0"
+			version: "2.1.1"
 		};
 	}
 	render() {

package/dist/sparkline/sparkline2.js.map

@@ -1 +1 @@
-{"version":3,"file":"sparkline2.js","names":["#renderChart","#renderLineVariant","#renderColumn","#renderWinLoss","#renderGradientDef","#renderZeroLine","#renderAccents"],"sources":["../../src/sparkline/sparkline.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { PropertyValues, SVGTemplateResult } from 'lit';\nimport { html, LitElement, nothing, svg } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { state } from 'lit/decorators/state.js';\nimport type {\n  DataElement,\n  Interpolation,\n  Point,\n  SizeExpanded,\n  SparklineMark,\n  SupportStatus,\n  TaskStatus\n} from '@nvidia-elements/core/internal';\nimport { attachInternals, statusStateStyles, supportStateStyles, useStyles } from '@nvidia-elements/core/internal';\nimport {\n  calculateDomain,\n  calculateSymbolIndices,\n  calculateViewBox,\n  PRECISION,\n  toAreaPath,\n  toColumnRects,\n  toInterpolation,\n  toLinePath,\n  toPlotPoints,\n  toValidData,\n  toWinLossRects,\n  valueToY,\n  VIEW_HEIGHT\n} from './sparkline.utils.js';\nimport styles from './sparkline.css?inline';\n\n/**\n * @element nve-sparkline\n * @description A sparkline is a compact, word-sized chart with typographic scale, for data-dense layouts (text, tables, cards, dashboards).\n * @since 0.0.0\n * @entrypoint \\@nvidia-elements/core/sparkline\n * @cssprop --height - Height (defaults to 1em and scales with parent font-size).\n * @cssprop --line-color\n * @cssprop --line-width\n * @cssprop --fill-color - Color used by area and column marks.\n * @cssprop --gradient-max-color\n * @cssprop --gradient-min-color\n * @cssprop --zero-line-color\n * @cssprop --zero-line-width\n * @cssprop --win-color  Color used to represent positive values (wins).\n * @cssprop --loss-color Color used to represent negative values (losses).\n * @cssprop --draw-color Color used to represent zero values (draws / neutral outcomes).\n * @cssprop --symbol-color\n * @cssprop --symbol-border-color\n * @cssprop --symbol-border-width\n * @cssprop --symbol-radius - symbol circle radius in SVG units.\n * @aria https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img\n */\nexport class Sparkline extends LitElement implements DataElement<number[]> {\n  static styles = useStyles([styles, statusStateStyles, supportStateStyles]);\n\n  static readonly metadata = {\n    tag: 'nve-sparkline',\n    version: '0.0.0'\n  };\n\n  /** Numeric values representing a data series. */\n  @property({ type: Array }) data: number[] = [];\n\n  /** Controls the visual representation of data points. */\n  @property({ type: String }) mark: SparklineMark = 'line';\n\n  /** Controls how the chart connects intermediate values between points in a data series. Defaults to `linear`. */\n  @property({ type: String }) interpolation: Interpolation = 'linear';\n\n  /** Applies semantic status colors used across Elements status patterns. */\n  @property({ type: String, reflect: true }) status?: TaskStatus | SupportStatus;\n\n  /** Controls the sparkline size with explicit font-size tokens. Omit to auto-scale with parent font-size (1em). */\n  @property({ type: String, reflect: true }) size?: SizeExpanded;\n\n  /** Denotes the first data point by rendering a symbol at its position. */\n  @property({ type: Boolean, attribute: 'denote-first', reflect: true })\n  denoteFirst = false;\n\n  /** Denotes the last data point by rendering a symbol at its position. */\n  @property({ type: Boolean, attribute: 'denote-last', reflect: true })\n  denoteLast = false;\n\n  /** Denotes all minimum-value data points by rendering symbols at their positions. */\n  @property({ type: Boolean, attribute: 'denote-min', reflect: true })\n  denoteMin = false;\n\n  /** Denotes all maximum-value data points by rendering symbols at their positions. */\n  @property({ type: Boolean, attribute: 'denote-max', reflect: true })\n  denoteMax = false;\n\n  /** Controls spacing between points in a line, in em (1 = chart height). Defaults to `0.6`. */\n  @property({ type: Number, attribute: 'interval-length' }) intervalLength = 0.6;\n\n  /** Lower bound for the y-axis domain. When undefined, derives the bound from data. */\n  @property({ type: Number }) min?: number;\n\n  /** Upper bound for the y-axis domain. When undefined, derives the bound from data. */\n  @property({ type: Number }) max?: number;\n\n  /** Cached valid numeric values derived from data property. */\n  @state() private validData: number[] = [];\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  render() {\n    return html`<div internal-host>${this.#renderChart()}</div>`;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    this._internals.role = 'img';\n  }\n\n  willUpdate(changedProperties: PropertyValues<this>) {\n    super.willUpdate(changedProperties);\n\n    if (changedProperties.has('data')) {\n      this.validData = toValidData(this.data);\n    }\n  }\n\n  #renderChart(): SVGTemplateResult | typeof nothing {\n    const { width, height } = calculateViewBox(this.mark, this.validData.length, this.intervalLength);\n\n    switch (this.mark) {\n      case 'line':\n      case 'area':\n      case 'gradient':\n        return this.#renderLineVariant(width, height);\n      case 'column':\n        return this.#renderColumn(width, height);\n      case 'winloss':\n        return this.#renderWinLoss(VIEW_HEIGHT / 2, width, height);\n      default:\n        const _exhaustiveCheck: never = this.mark;\n        return nothing;\n    }\n  }\n\n  updated(props: PropertyValues<this>) {\n    super.updated(props);\n\n    const { width, height } = calculateViewBox(this.mark, this.validData.length, this.intervalLength);\n    const aspectRatio = width / height;\n    const validAspectRatio = Number.isFinite(aspectRatio) && aspectRatio > 0 ? aspectRatio : 1;\n    this.style.setProperty('--_aspect-ratio', validAspectRatio.toFixed(4));\n  }\n\n  #renderLineVariant(width: number, height: number) {\n    const domain = calculateDomain(this.validData, { 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":";;;;;;;;;AAwDA,IAAa,IAAb,cAA+B,EAA4C;;2BAS7B,CAAC,eAGK,6BAGS,6BAU7C,sBAID,qBAID,qBAIA,0BAG+D,qBASpC,CAAC;;;gBAhDxB,EAAU;GAAC;GAAQ;GAAmB;EAAkB,CAAC;;;kBAE9C;GACzB,KAAK;GACL,SAAS;EACX;;CAgDA,SAAS;EACP,OAAO,CAAI,sBAAsB,KAAKA,GAAa,EAAE;CACvD;CAEA,oBAAoB;EAGlB,AAFA,MAAM,kBAAkB,GACxB,EAAgB,IAAI,GACpB,KAAK,WAAW,OAAO;CACzB;CAEA,WAAW,GAAyC;EAGlD,AAFA,MAAM,WAAW,CAAiB,GAE9B,EAAkB,IAAI,MAAM,MAC9B,KAAK,YAAY,EAAY,KAAK,IAAI;CAE1C;CAEA,KAAmD;EACjD,IAAM,EAAE,UAAO,cAAW,EAAiB,KAAK,MAAM,KAAK,UAAU,QAAQ,KAAK,cAAc;EAEhG,QAAQ,KAAK,MAAb;GACE,KAAK;GACL,KAAK;GACL,KAAK,YACH,OAAO,KAAKC,GAAmB,GAAO,CAAM;GAC9C,KAAK,UACH,OAAO,KAAKC,GAAc,GAAO,CAAM;GACzC,KAAK,WACH,OAAO,KAAKC,GAAAA,MAA6B,GAAG,GAAO,CAAM;GAC3D,SAEE,OADgC,KAAK,MAC9B;EACX;CACF;CAEA,QAAQ,GAA6B;EACnC,MAAM,QAAQ,CAAK;EAEnB,IAAM,EAAE,UAAO,cAAW,EAAiB,KAAK,MAAM,KAAK,UAAU,QAAQ,KAAK,cAAc,GAC1F,IAAc,IAAQ,GACtB,IAAmB,OAAO,SAAS,CAAW,KAAK,IAAc,IAAI,IAAc;EACzF,KAAK,MAAM,YAAY,mBAAmB,EAAiB,QAAQ,CAAC,CAAC;CACvE;CAEA,GAAmB,GAAe,GAAgB;EAChD,IAAM,IAAS,EAAgB,KAAK,WAAW;GAAE,aAAa,KAAK;GAAK,aAAa,KAAK;EAAI,CAAC;EAC/F,IAAI,CAAC,GAAQ,OAAO;EAEpB,IAAM,IAAY,EAAS,GAAG,CAAM,GAC9B,IAAe,EAAO,MAAM,KAAK,EAAO,MAAM,GAE9C,IAAa,EAAa,KAAK,WAAW,GAAQ,EAAE,SAAM,CAAC,GAC3D,IAAgB,EAAuB,KAAK,WAAW;GAC3D,OAAO,KAAK;GACZ,MAAM,KAAK;GACX,KAAK,KAAK;GACV,KAAK,KAAK;EACZ,CAAC,GACK,IAAgB,EAAgB,KAAK,aAAa,GAElD,IAAW,EAAW,GAAY,GAAe,CAAK,GAEtD,IADW,KAAK,SAAS,UAAU,KAAK,SAAS,aAC3B,EAAW,GAAY,GAAA,GAA0B,IAAI;EAEjF,OAAO,CAAG,qBACY,EAAM,GAAG,EAAO,2DAChC,KAAK,SAAS,aAAa,KAAKC,GAAmB,CAAM,IAAI,EAAQ,GAGrE,EAAS,SACL,KAAK,SAAS,aACZ,CAAG,yBAAwB,EAAS,yCACpC,CAAG,yBAAwB,EAAS,aACtC,EACL,GAEC,IAAe,KAAKC,GAAgB,GAAW,CAAK,IAAI,EAAQ,GAEhE,IAAW,CAAG,yBAAwB,EAAS,gDAA+C,EAAQ,SAExG,KAAKC,GAAe,GAAY,CAAa;CAEnD;CAEA,GAAmB,GAAgB;EACjC,OAAO,CAAG,gEAEmD,EAAO;CAMtE;CAEA,GAAgB,GAAkB,GAAe;EAC/C,OAAO,CAAG,yEAKA,EAAS,QAAA,CAAiB,EAAE,QAC5B,EAAM,QACN,EAAS,QAAA,CAAiB,EAAE;CAGxC;CAEA,GAAe,GAAiB,GAA4B;EAG1D,OAFI,EAAO,WAAW,KAAK,EAAc,SAAS,IAAU,IAErD,CAAI,GACP,MAAM,KAAK,CAAa,CAAC,CAAC,KAAI,MAAS;GACvC,IAAM,IAAQ,EAAO;GAIrB,OAHK,IAGE,CAAI,gBACK,QAFM,EAAM,EAAE,QAAA,CAAiB,EAAE,SAAS,EAAM,EAAE,QAAA,CAAiB,IAE7D,4BAJH;EAMrB,CAAC;CAEL;CAEA,GAAc,GAAe,GAAgB;EAC3C,IAAM,IAAS,EAAgB,KAAK,WAAW;GAC7C,aAAa,KAAK;GAClB,aAAa,KAAK;GAClB,aAAa;EACf,CAAC;EACD,IAAI,CAAC,GAAQ,OAAO;EAEpB,IAAM,IAAY,EAAS,GAAG,CAAM,GAC9B,IAAe,EAAO,MAAM,KAAK,EAAO,MAAM,GAE9C,IAAQ,EADK,EAAa,KAAK,WAAW,GAAQ,EAAE,SAAM,CACpC,GAAY,GAAW,CAAK;EAExD,OAAO,CAAG,qBACY,EAAM,GAAG,EAAO,2DAChC,IAAe,KAAKD,GAAgB,GAAW,CAAK,IAAI,EAAQ,GAEhE,EAAM,KAAI,MACH,CAAG,2BAA2B,EAAK,EAAE,QAAA,CAAiB,EAAE,OAAO,EAAK,EAAE,QAAA,CAAiB,EAAE,WAAW,EAAK,MAAM,QAAA,CAAiB,EAAE,YAAY,EAAK,OAAO,QAAA,CAAiB,EAAE,UACrL,EAAE;CAGT;CAEA,GAAe,GAAmB,GAAe,GAAgB;EAC/D,IAAI,KAAK,UAAU,WAAW,GAAG,OAAO;EAExC,IAAM,IAAQ,EAAe,KAAK,WAAW,GAAW;GAAE;GAAO;EAAO,CAAC;EAEzE,OAAO,CAAG,qBACY,EAAM,GAAG,EAAO,2DAChC,KAAKA,GAAgB,GAAW,CAAK,EAAE,GAEvC,EAAM,KAAI,MACH,CAAG,gBAAgB,EAAK,UAAU,OAAO,EAAK,EAAE,QAAA,CAAiB,EAAE,OAAO,EAAK,EAAE,QAAA,CAAiB,EAAE,WAAW,EAAK,MAAM,QAAA,CAAiB,EAAE,YAAY,EAAK,OAAO,QAAA,CAAiB,EAAE,UAChM,EAAE;CAGT;AACF;GAjNG,EAAS,EAAE,MAAM,MAAM,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,MAGxB,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,MAGzB,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,iBAAA,KAAA,CAAA,MAGzB,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,UAAA,KAAA,CAAA,MAGxC,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,MAGxC,EAAS;CAAE,MAAM;CAAS,WAAW;CAAgB,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,eAAA,KAAA,CAAA,MAIpE,EAAS;CAAE,MAAM;CAAS,WAAW;CAAe,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,cAAA,KAAA,CAAA,MAInE,EAAS;CAAE,MAAM;CAAS,WAAW;CAAc,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,aAAA,KAAA,CAAA,MAIlE,EAAS;CAAE,MAAM;CAAS,WAAW;CAAc,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,aAAA,KAAA,CAAA,MAIlE,EAAS;CAAE,MAAM;CAAQ,WAAW;AAAkB,CAAC,CAAA,GAAA,EAAA,WAAA,kBAAA,KAAA,CAAA,MAGvD,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,OAAA,KAAA,CAAA,MAGzB,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,OAAA,KAAA,CAAA,MAGzB,EAAM,CAAA,GAAA,EAAA,WAAA,aAAA,KAAA,CAAA"}
+{"version":3,"file":"sparkline2.js","names":["#renderChart","#renderLineVariant","#renderColumn","#renderWinLoss","#renderGradientDef","#renderZeroLine","#renderAccents"],"sources":["../../src/sparkline/sparkline.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { PropertyValues, SVGTemplateResult } from 'lit';\nimport { html, LitElement, nothing, svg } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { state } from 'lit/decorators/state.js';\nimport type {\n  DataElement,\n  Interpolation,\n  Point,\n  SizeExpanded,\n  SparklineMark,\n  SupportStatus,\n  TaskStatus\n} from '@nvidia-elements/core/internal';\nimport { attachInternals, statusStateStyles, supportStateStyles, useStyles } from '@nvidia-elements/core/internal';\nimport {\n  calculateDomain,\n  calculateSymbolIndices,\n  calculateViewBox,\n  PRECISION,\n  toAreaPath,\n  toColumnRects,\n  toInterpolation,\n  toLinePath,\n  toPlotPoints,\n  toValidData,\n  toWinLossRects,\n  valueToY,\n  VIEW_HEIGHT\n} from './sparkline.utils.js';\nimport styles from './sparkline.css?inline';\n\n/**\n * @element nve-sparkline\n * @description A sparkline is a compact, word-sized chart with typographic scale, for data-dense layouts (text, tables, cards, dashboards).\n * @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/star-rating.d.ts

@@ -4,6 +4,7 @@ import { Icon } from '@nvidia-elements/core/icon';
 /**
  * @element nve-star-rating
  * @description A star rating component lets users rate something using stars, providing a quick visual representation of feedback
+ * @documentation https://nvidia.github.io/elements/docs/elements/star-rating/
  * @since 1.23.1
  * @entrypoint \@nvidia-elements/core/star-rating
  * @cssprop --star-size

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"star-rating2.js","names":["#setValue","#getStepValue","#handleMouseMove"],"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 * @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":";;;;;;;;;;AA0BO,IAAA,IAAA,cAAyB,EAAQ;;0BAYf,cACA,gBACE,iBACC,oBACG;;;gBAfb,EAAU,CAAC,GAAG,EAAQ,QAAQ,CAAM,CAAC;;;kBAE1B;GACzB,KAAK;GACL,SAAS;EACX;;;4BAE4B,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,KAAKA,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,KAAKA,GAAU,KAAKC,GAAc,GAAG,CAAS,CAAC,EAAE,iBAClD,MAAkB,KAAKC,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;GAhFG,EAAM,CAAA,GAAA,EAAA,WAAA,OAAA,KAAA,CAAA,MACN,EAAM,CAAA,GAAA,EAAA,WAAA,OAAA,KAAA,CAAA,MACN,EAAM,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,MACN,EAAM,CAAA,GAAA,EAAA,WAAA,UAAA,KAAA,CAAA,MACN,EAAM,CAAA,GAAA,EAAA,WAAA,aAAA,KAAA,CAAA,UAjBR,EAAe,CAAA,GAAA,CAAA"}
+{"version":3,"file":"star-rating2.js","names":["#setValue","#getStepValue","#handleMouseMove"],"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,IAAA,IAAA,cAAyB,EAAQ;;0BAYf,cACA,gBACE,iBACC,oBACG;;;gBAfb,EAAU,CAAC,GAAG,EAAQ,QAAQ,CAAM,CAAC;;;kBAE1B;GACzB,KAAK;GACL,SAAS;EACX;;;4BAE4B,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,KAAKA,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,KAAKA,GAAU,KAAKC,GAAc,GAAG,CAAS,CAAC,EAAE,iBAClD,MAAkB,KAAKC,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;GAhFG,EAAM,CAAA,GAAA,EAAA,WAAA,OAAA,KAAA,CAAA,MACN,EAAM,CAAA,GAAA,EAAA,WAAA,OAAA,KAAA,CAAA,MACN,EAAM,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,MACN,EAAM,CAAA,GAAA,EAAA,WAAA,UAAA,KAAA,CAAA,MACN,EAAM,CAAA,GAAA,EAAA,WAAA,aAAA,KAAA,CAAA,UAjBR,EAAe,CAAA,GAAA,CAAA"}

package/dist/steps/steps.d.ts

@@ -7,6 +7,7 @@ declare const StepsItem_base: import("@nvidia-elements/forms/mixins").ButtonForm
 /**
  * @element nve-steps-item
  * @description Represents an individual step within a multi-step workflow, displaying its status and enabling navigation within the parent steps component.
+ * @documentation https://nvidia.github.io/elements/docs/elements/steps/
  * @since 0.30.0
  * @entrypoint \@nvidia-elements/core/steps
  * @slot - default slot for step text
@@ -54,6 +55,7 @@ export declare class StepsItem extends StepsItem_base {
 /**
  * @element nve-steps
  * @description Steps enables a multi-step workflow allowing a user to complete a goal in a specific sequence.
+ * @documentation https://nvidia.github.io/elements/docs/elements/steps/
  * @since 0.30.0
  * @entrypoint \@nvidia-elements/core/steps
  * @slot - default slot for steps-item

package/dist/steps/steps2.js

@@ -23,7 +23,7 @@ var v = class extends h(d) {
 	static {
 		this.metadata = {
 			tag: "nve-steps-item",
-			version: "2.1.0",
+			version: "2.1.1",
 			parents: ["nve-steps"]
 		};
 	}
@@ -69,7 +69,7 @@ var y = class extends d {
 	static {
 		this.metadata = {
 			tag: "nve-steps",
-			version: "2.1.0",
+			version: "2.1.1",
 			children: ["nve-steps-item"]
 		};
 	}

package/dist/steps/steps2.js.map

@@ -1 +1 @@
-{"version":3,"file":"steps2.js","names":["#selectTab","#syncChildSteps","#onClick"],"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, Container } 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 * @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   * Four visual treatments represent the `status` of tasks. When `status` has a value of `warning`, `success`, or `danger`, the component embeds appropriate icons.\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?: Extract<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 * @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?: Extract<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":["#selectTab","#syncChildSteps","#onClick"],"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, Container } 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   * Four visual treatments represent the `status` of tasks. When `status` has a value of `warning`, `success`, or `danger`, the component embeds appropriate icons.\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?: Extract<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?: Extract<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/switch-group2.js

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

package/dist/switch/switch.d.ts

@@ -3,6 +3,7 @@ import { Control } from '@nvidia-elements/core/forms';
 /**
  * @element nve-switch
  * @description A switch is a control that enables users to switch between two mutually exclusive options (on or off, checked or unchecked) through a single click or tap.
+ * @documentation https://nvidia.github.io/elements/docs/elements/switch/
  * @since 0.3.0
  * @entrypoint \@nvidia-elements/core/switch
  * @cssprop --cursor

package/dist/switch/switch2.js

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

package/dist/switch/switch2.js.map

@@ -1 +1 @@
-{"version":3,"file":"switch2.js","names":[],"sources":["../../src/switch/switch.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { CSSResult } from 'lit';\nimport { audit, hostAttr, useStyles } from '@nvidia-elements/core/internal';\nimport { Control } from '@nvidia-elements/core/forms';\nimport styles from './switch.css?inline';\n\n/**\n * @element nve-switch\n * @description A switch is a control that enables users to switch between two mutually exclusive options (on or off, checked or unchecked) through a single click or tap.\n * @since 0.3.0\n * @entrypoint \\@nvidia-elements/core/switch\n * @cssprop --cursor\n * @cssprop --border-radius\n * @cssprop --border-width\n * @cssprop --border\n * @cssprop --background\n * @cssprop --width\n * @cssprop --height\n * @cssprop --anchor-width\n * @cssprop --anchor-height\n * @cssprop --anchor-border-radius\n * @cssprop --anchor-background\n * @cssprop --padding\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/switch/\n */\n@audit()\nexport class Switch extends Control {\n  @hostAttr({ attribute: 'nve-control' }) protected nveControl = 'inline';\n\n  static styles: CSSResult[] = useStyles([...Control.styles, styles]);\n\n  static readonly metadata = {\n    tag: 'nve-switch',\n    version: '0.0.0',\n    children: ['label', 'input', 'nve-control-message']\n  };\n}\n"],"mappings":";;;;;;;AA4BO,IAAA,IAAA,cAAqB,EAAQ;;iCAC6B;;;gBAElC,EAAU,CAAC,GAAG,EAAQ,QAAQ,CAAM,CAAC;;;kBAEvC;GACzB,KAAK;GACL,SAAS;GACT,UAAU;IAAC;IAAS;IAAS;GAAqB;EACpD;;AACF;GATG,EAAS,EAAE,WAAW,cAAc,CAAC,CAAA,GAAA,EAAA,WAAA,cAAA,KAAA,CAAA,UAFvC,EAAM,CAAA,GAAA,CAAA"}
+{"version":3,"file":"switch2.js","names":[],"sources":["../../src/switch/switch.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { CSSResult } from 'lit';\nimport { audit, hostAttr, useStyles } from '@nvidia-elements/core/internal';\nimport { Control } from '@nvidia-elements/core/forms';\nimport styles from './switch.css?inline';\n\n/**\n * @element nve-switch\n * @description A switch is a control that enables users to switch between two mutually exclusive options (on or off, checked or unchecked) through a single click or tap.\n * @documentation https://nvidia.github.io/elements/docs/elements/switch/\n * @since 0.3.0\n * @entrypoint \\@nvidia-elements/core/switch\n * @cssprop --cursor\n * @cssprop --border-radius\n * @cssprop --border-width\n * @cssprop --border\n * @cssprop --background\n * @cssprop --width\n * @cssprop --height\n * @cssprop --anchor-width\n * @cssprop --anchor-height\n * @cssprop --anchor-border-radius\n * @cssprop --anchor-background\n * @cssprop --padding\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/switch/\n */\n@audit()\nexport class Switch extends Control {\n  @hostAttr({ attribute: 'nve-control' }) protected nveControl = 'inline';\n\n  static styles: CSSResult[] = useStyles([...Control.styles, styles]);\n\n  static readonly metadata = {\n    tag: 'nve-switch',\n    version: '0.0.0',\n    children: ['label', 'input', 'nve-control-message']\n  };\n}\n"],"mappings":";;;;;;;AA6BO,IAAA,IAAA,cAAqB,EAAQ;;iCAC6B;;;gBAElC,EAAU,CAAC,GAAG,EAAQ,QAAQ,CAAM,CAAC;;;kBAEvC;GACzB,KAAK;GACL,SAAS;GACT,UAAU;IAAC;IAAS;IAAS;GAAqB;EACpD;;AACF;GATG,EAAS,EAAE,WAAW,cAAc,CAAC,CAAA,GAAA,EAAA,WAAA,cAAA,KAAA,CAAA,UAFvC,EAAM,CAAA,GAAA,CAAA"}

package/dist/tabs/tabs-group.d.ts

@@ -5,6 +5,7 @@ export type TabsGroupAlignment = 'top' | 'start' | 'end';
 /**
  * @element nve-tabs-group
  * @description Coordinates tabs with matching panel content using Invoker Commands and slot-matched panels.
+ * @documentation https://nvidia.github.io/elements/docs/elements/tabs/
  * @since 1.67.0
  * @entrypoint \@nvidia-elements/core/tabs
  * @command --toggle - Select the matching tab and reveal the panel whose slot matches the invoker value.

package/dist/tabs/tabs-group2.js

@@ -33,7 +33,7 @@ var m, h = class extends l {
 	static {
 		this.metadata = {
 			tag: "nve-tabs-group",
-			version: "2.1.0",
+			version: "2.1.1",
 			children: ["nve-tabs"]
 		};
 	}

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

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

package/dist/tabs/tabs.d.ts

@@ -5,6 +5,7 @@ declare const TabsItem_base: import("@nvidia-elements/forms/mixins").ButtonFormC
 /**
  * @element nve-tabs-item
  * @description Represents an individual tab within a tablist, providing a selectable button for switching between content views.
+ * @documentation https://nvidia.github.io/elements/docs/elements/tabs/
  * @since 0.10.0
  * @entrypoint \@nvidia-elements/core/tabs
  * @slot - default slot for content
@@ -40,6 +41,7 @@ export declare class TabsItem extends TabsItem_base {
 /**
  * @element nve-tabs
  * @description Tabs provide a selection UX, typically used for swapping content shown on a page, or within a navigation context.
+ * @documentation https://nvidia.github.io/elements/docs/elements/tabs/
  * @since 0.10.0
  * @entrypoint \@nvidia-elements/core/tabs
  * @slot - default slot for tab-item

package/dist/tabs/tabs2.js

@@ -20,7 +20,7 @@ var _ = class extends h(f) {
 	static {
 		this.metadata = {
 			tag: "nve-tabs-item",
-			version: "2.1.0",
+			version: "2.1.1",
 			parents: ["nve-tabs"]
 		};
 	}
@@ -53,7 +53,7 @@ var v = class extends f {
 	static {
 		this.metadata = {
 			tag: "nve-tabs",
-			version: "2.1.0",
+			version: "2.1.1",
 			children: ["nve-tabs-item"]
 		};
 	}

package/dist/tabs/tabs2.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs2.js","names":["#selectTab","#onClick"],"sources":["../../src/tabs/tabs.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { PropertyValues } from 'lit';\nimport { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { queryAssignedElements } from 'lit/decorators/query-assigned-elements.js';\nimport { 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  appendRootNodeStyle,\n  appendAnchorName,\n  removeAnchorName\n} from '@nvidia-elements/core/internal';\nimport globalStyles from './tabs.global.css?inline';\nimport tabsItemStyleSheet from './tabs-item.css?inline';\nimport tabsStyleSheet from './tabs.css?inline';\n\n/**\n * @element nve-tabs-item\n * @description Represents an individual tab within a tablist, providing a selectable button for switching between content views.\n * @since 0.10.0\n * @entrypoint \\@nvidia-elements/core/tabs\n * @slot - default slot for content\n * @cssprop --font-size\n * @cssprop --width\n * @cssprop --padding\n * @cssprop --font-size\n * @cssprop --font-weight\n * @cssprop --border-radius\n * @cssprop --color\n * @cssprop --height\n * @cssprop --cursor\n * @cssprop --text-transform\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/tabs/\n * @responsive false\n */\n@audit()\n@stateSelected<TabsItem>()\nexport class TabsItem extends ButtonFormControlMixin(LitElement) {\n  /**\n   * Determines which tab item the user selects, defaults to false.\n   */\n  @property({ type: Boolean, reflect: true }) selected = false;\n\n  static styles = useStyles([tabsItemStyleSheet]);\n\n  static readonly metadata = {\n    tag: 'nve-tabs-item',\n    version: '0.0.0',\n    parents: ['nve-tabs']\n  };\n\n  render() {\n    return html`\n      <div internal-host focus-within>\n        <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  updated(props: PropertyValues<this>) {\n    super.updated(props);\n\n    if (props.has('selected')) {\n      if (this.selected) {\n        appendAnchorName(this, '--selected');\n      } else {\n        removeAnchorName(this, '--selected');\n      }\n    }\n  }\n}\n\n/**\n * @element nve-tabs\n * @description Tabs provide a selection UX, typically used for swapping content shown on a page, or within a navigation context.\n * @since 0.10.0\n * @entrypoint \\@nvidia-elements/core/tabs\n * @slot - default slot for tab-item\n * @cssprop --gap\n * @cssprop --indicator-background\n * @cssprop --indicator-border-radius\n * @cssprop --indicator-height\n * @cssprop --border-inset\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/tabs/\n * @responsive false\n */\n@audit()\n@keyNavigationList<Tabs>()\nexport class Tabs extends LitElement {\n  /**\n   * Determines whether the tabs 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 tabs should display a border on selected items vs. defaults to show border.\n   */\n  @property({ type: Boolean, reflect: true }) borderless = false;\n\n  /**\n   * Determines whether the tabs should handle selection behavior vs. defaults to off.\n   */\n  @property({ type: Boolean, attribute: 'behavior-select' }) behaviorSelect = false;\n\n  static styles = useStyles([tabsStyleSheet]);\n\n  static readonly metadata = {\n    tag: 'nve-tabs',\n    version: '0.0.0',\n    children: ['nve-tabs-item']\n  };\n\n  /** @private */\n  get keynavListConfig(): KeynavListConfig {\n    return {\n      items: this.items,\n      layout: this.vertical ? 'vertical' : 'horizontal'\n    };\n  }\n\n  @queryAssignedElements() private items!: TabsItem[];\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  #selectTab(tabItem: HTMLElement & { matches: Element['matches']; disabled?: boolean; selected?: boolean }) {\n    if (!this.behaviorSelect || !tabItem.matches('nve-tabs-item') || tabItem.disabled) {\n      return;\n    }\n\n    this.keynavListConfig.items.forEach((i: HTMLElement) => ((i as TabsItem).selected = false));\n    tabItem.selected = true;\n  }\n\n  render() {\n    return html`\n      <div internal-host>\n        <slot></slot>\n      </div>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    appendRootNodeStyle(this, globalStyles);\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    this._internals.ariaOrientation = this.vertical ? 'vertical' : 'horizontal';\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;AA4CO,IAAA,IAAA,cAAuB,EAAuB,CAAU,CAAC,CAAC;;gBAM/C,EAAU,CAAC,CAAkB,CAAC;;;kBAEnB;GACzB,KAAK;GACL,SAAS;GACT,SAAS,CAAC,UAAU;EACtB;;CAEA,SAAS;EACP,OAAO,CAAI;CAKb;CAEA,cAAc;EAEZ,AADA,MAAM,mBAnB+C,IAoBrD,KAAK,OAAO;CACd;CAEA,oBAAoB;EAElB,AADA,MAAM,kBAAkB,GACxB,KAAK,WAAW,OAAO;CACzB;CAEA,QAAQ,GAA6B;EAGnC,AAFA,MAAM,QAAQ,CAAK,GAEf,EAAM,IAAI,UAAU,MAClB,KAAK,WACP,EAAiB,MAAM,YAAY,IAEnC,EAAiB,MAAM,YAAY;CAGzC;AACF;GAvCG,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,UAN3C,EAAM,GACN,EAAwB,CAAA,GAAA,CAAA;AA8DlB,IAAA,IAAA,cAAmB,EAAW;;+BAIoB,sBAKE,0BAKmB,eAqDhE,MAAa;GACvB,KAAKA,GAAW,EAAE,MAA+F;EACnH;;;gBArDgB,EAAU,CAAC,CAAc,CAAC;;;kBAEf;GACzB,KAAK;GACL,SAAS;GACT,UAAU,CAAC,eAAe;EAC5B;;CAGA,IAAI,mBAAqC;EACvC,OAAO;GACL,OAAO,KAAK;GACZ,QAAQ,KAAK,WAAW,aAAa;EACvC;CACF;CAOA,GAAW,GAAgG;EACrG,CAAC,KAAK,kBAAkB,CAAC,EAAQ,QAAQ,eAAe,KAAK,EAAQ,aAIzE,KAAK,iBAAiB,MAAM,SAAS,MAAoB,EAAgB,WAAW,EAAM,GAC1F,EAAQ,WAAW;CACrB;CAEA,SAAS;EACP,OAAO,CAAI;CAKb;CAEA,oBAAoB;EAKlB,AAJA,MAAM,kBAAkB,GACxB,EAAoB,MAAM,CAAY,GACtC,EAAgB,IAAI,GACpB,KAAK,WAAW,OAAO,WACvB,KAAK,iBAAiB,SAAS,KAAKC,EAAQ;CAC9C;CAEA,uBAAuB;EAErB,AADA,MAAM,qBAAqB,GAC3B,KAAK,oBAAoB,SAAS,KAAKA,EAAQ;CACjD;CAEA;CAIA,QAAQ,GAA6B;EAEnC,AADA,MAAM,QAAQ,CAAK,GACnB,KAAK,WAAW,kBAAkB,KAAK,WAAW,aAAa;CACjE;AACF;GAvEG,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,MAKzC,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,cAAA,KAAA,CAAA,MAKzC,EAAS;CAAE,MAAM;CAAS,WAAW;AAAkB,CAAC,CAAA,GAAA,EAAA,WAAA,kBAAA,KAAA,CAAA,MAkBxD,EAAsB,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,UAlCxB,EAAM,GACN,EAAwB,CAAA,GAAA,CAAA"}
+{"version":3,"file":"tabs2.js","names":["#selectTab","#onClick"],"sources":["../../src/tabs/tabs.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { PropertyValues } from 'lit';\nimport { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { queryAssignedElements } from 'lit/decorators/query-assigned-elements.js';\nimport { 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  appendRootNodeStyle,\n  appendAnchorName,\n  removeAnchorName\n} from '@nvidia-elements/core/internal';\nimport globalStyles from './tabs.global.css?inline';\nimport tabsItemStyleSheet from './tabs-item.css?inline';\nimport tabsStyleSheet from './tabs.css?inline';\n\n/**\n * @element nve-tabs-item\n * @description Represents an individual tab within a tablist, providing a selectable button for switching between content views.\n * @documentation https://nvidia.github.io/elements/docs/elements/tabs/\n * @since 0.10.0\n * @entrypoint \\@nvidia-elements/core/tabs\n * @slot - default slot for content\n * @cssprop --font-size\n * @cssprop --width\n * @cssprop --padding\n * @cssprop --font-size\n * @cssprop --font-weight\n * @cssprop --border-radius\n * @cssprop --color\n * @cssprop --height\n * @cssprop --cursor\n * @cssprop --text-transform\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/tabs/\n * @responsive false\n */\n@audit()\n@stateSelected<TabsItem>()\nexport class TabsItem extends ButtonFormControlMixin(LitElement) {\n  /**\n   * Determines which tab item the user selects, defaults to false.\n   */\n  @property({ type: Boolean, reflect: true }) selected = false;\n\n  static styles = useStyles([tabsItemStyleSheet]);\n\n  static readonly metadata = {\n    tag: 'nve-tabs-item',\n    version: '0.0.0',\n    parents: ['nve-tabs']\n  };\n\n  render() {\n    return html`\n      <div internal-host focus-within>\n        <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  updated(props: PropertyValues<this>) {\n    super.updated(props);\n\n    if (props.has('selected')) {\n      if (this.selected) {\n        appendAnchorName(this, '--selected');\n      } else {\n        removeAnchorName(this, '--selected');\n      }\n    }\n  }\n}\n\n/**\n * @element nve-tabs\n * @description Tabs provide a selection UX, typically used for swapping content shown on a page, or within a navigation context.\n * @documentation https://nvidia.github.io/elements/docs/elements/tabs/\n * @since 0.10.0\n * @entrypoint \\@nvidia-elements/core/tabs\n * @slot - default slot for tab-item\n * @cssprop --gap\n * @cssprop --indicator-background\n * @cssprop --indicator-border-radius\n * @cssprop --indicator-height\n * @cssprop --border-inset\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/tabs/\n * @responsive false\n */\n@audit()\n@keyNavigationList<Tabs>()\nexport class Tabs extends LitElement {\n  /**\n   * Determines whether the tabs 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 tabs should display a border on selected items vs. defaults to show border.\n   */\n  @property({ type: Boolean, reflect: true }) borderless = false;\n\n  /**\n   * Determines whether the tabs should handle selection behavior vs. defaults to off.\n   */\n  @property({ type: Boolean, attribute: 'behavior-select' }) behaviorSelect = false;\n\n  static styles = useStyles([tabsStyleSheet]);\n\n  static readonly metadata = {\n    tag: 'nve-tabs',\n    version: '0.0.0',\n    children: ['nve-tabs-item']\n  };\n\n  /** @private */\n  get keynavListConfig(): KeynavListConfig {\n    return {\n      items: this.items,\n      layout: this.vertical ? 'vertical' : 'horizontal'\n    };\n  }\n\n  @queryAssignedElements() private items!: TabsItem[];\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  #selectTab(tabItem: HTMLElement & { matches: Element['matches']; disabled?: boolean; selected?: boolean }) {\n    if (!this.behaviorSelect || !tabItem.matches('nve-tabs-item') || tabItem.disabled) {\n      return;\n    }\n\n    this.keynavListConfig.items.forEach((i: HTMLElement) => ((i as TabsItem).selected = false));\n    tabItem.selected = true;\n  }\n\n  render() {\n    return html`\n      <div internal-host>\n        <slot></slot>\n      </div>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    appendRootNodeStyle(this, globalStyles);\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    this._internals.ariaOrientation = this.vertical ? 'vertical' : 'horizontal';\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;AA6CO,IAAA,IAAA,cAAuB,EAAuB,CAAU,CAAC,CAAC;;gBAM/C,EAAU,CAAC,CAAkB,CAAC;;;kBAEnB;GACzB,KAAK;GACL,SAAS;GACT,SAAS,CAAC,UAAU;EACtB;;CAEA,SAAS;EACP,OAAO,CAAI;CAKb;CAEA,cAAc;EAEZ,AADA,MAAM,mBAnB+C,IAoBrD,KAAK,OAAO;CACd;CAEA,oBAAoB;EAElB,AADA,MAAM,kBAAkB,GACxB,KAAK,WAAW,OAAO;CACzB;CAEA,QAAQ,GAA6B;EAGnC,AAFA,MAAM,QAAQ,CAAK,GAEf,EAAM,IAAI,UAAU,MAClB,KAAK,WACP,EAAiB,MAAM,YAAY,IAEnC,EAAiB,MAAM,YAAY;CAGzC;AACF;GAvCG,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,UAN3C,EAAM,GACN,EAAwB,CAAA,GAAA,CAAA;AA+DlB,IAAA,IAAA,cAAmB,EAAW;;+BAIoB,sBAKE,0BAKmB,eAqDhE,MAAa;GACvB,KAAKA,GAAW,EAAE,MAA+F;EACnH;;;gBArDgB,EAAU,CAAC,CAAc,CAAC;;;kBAEf;GACzB,KAAK;GACL,SAAS;GACT,UAAU,CAAC,eAAe;EAC5B;;CAGA,IAAI,mBAAqC;EACvC,OAAO;GACL,OAAO,KAAK;GACZ,QAAQ,KAAK,WAAW,aAAa;EACvC;CACF;CAOA,GAAW,GAAgG;EACrG,CAAC,KAAK,kBAAkB,CAAC,EAAQ,QAAQ,eAAe,KAAK,EAAQ,aAIzE,KAAK,iBAAiB,MAAM,SAAS,MAAoB,EAAgB,WAAW,EAAM,GAC1F,EAAQ,WAAW;CACrB;CAEA,SAAS;EACP,OAAO,CAAI;CAKb;CAEA,oBAAoB;EAKlB,AAJA,MAAM,kBAAkB,GACxB,EAAoB,MAAM,CAAY,GACtC,EAAgB,IAAI,GACpB,KAAK,WAAW,OAAO,WACvB,KAAK,iBAAiB,SAAS,KAAKC,EAAQ;CAC9C;CAEA,uBAAuB;EAErB,AADA,MAAM,qBAAqB,GAC3B,KAAK,oBAAoB,SAAS,KAAKA,EAAQ;CACjD;CAEA;CAIA,QAAQ,GAA6B;EAEnC,AADA,MAAM,QAAQ,CAAK,GACnB,KAAK,WAAW,kBAAkB,KAAK,WAAW,aAAa;CACjE;AACF;GAvEG,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,MAKzC,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,cAAA,KAAA,CAAA,MAKzC,EAAS;CAAE,MAAM;CAAS,WAAW;AAAkB,CAAC,CAAA,GAAA,EAAA,WAAA,kBAAA,KAAA,CAAA,MAkBxD,EAAsB,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,UAlCxB,EAAM,GACN,EAAwB,CAAA,GAAA,CAAA"}

package/dist/tag/tag.d.ts

@@ -5,6 +5,7 @@ declare const Tag_base: import("@nvidia-elements/forms/mixins").ButtonFormContro
 /**
  * @element nve-tag
  * @description A interactive element that represents a category or group of content. Typically used to filter or organize content for one to many relations.
+ * @documentation https://nvidia.github.io/elements/docs/elements/tag/
  * @since 0.10.0
  * @entrypoint \@nvidia-elements/core/tag
  * @slot - default slot for content

package/dist/tag/tag2.js

@@ -17,7 +17,7 @@ var p = class extends d(c) {
 	static {
 		this.metadata = {
 			tag: "nve-tag",
-			version: "2.1.0"
+			version: "2.1.1"
 		};
 	}
 	static {

package/dist/tag/tag2.js.map

@@ -1 +1 @@
-{"version":3,"file":"tag2.js","names":["#typeClosableController","#i18nController"],"sources":["../../src/tag/tag.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { ButtonFormControlMixin } from '@nvidia-elements/forms/mixins';\nimport type { Color, Prominence } from '@nvidia-elements/core/internal';\nimport {\n  I18nController,\n  TypeClosableController,\n  useStyles,\n  colorStateStyles,\n  scopedRegistry\n} from '@nvidia-elements/core/internal';\nimport { Icon } from '@nvidia-elements/core/icon';\nimport styles from './tag.css?inline';\n\n/**\n * @element nve-tag\n * @description A interactive element that represents a category or group of content. Typically used to filter or organize content for one to many relations.\n * @since 0.10.0\n * @entrypoint \\@nvidia-elements/core/tag\n * @slot - default slot for content\n * @cssprop --background\n * @cssprop --color\n * @cssprop --gap\n * @cssprop --font-size\n * @cssprop --padding\n * @cssprop --border\n * @cssprop --border-radius\n * @cssprop --font-weight\n * @cssprop --cursor\n * @cssprop --height\n * @cssprop --width\n * @cssprop --max-width\n * @cssprop --text-decoration\n * @csspart icon - The icon element\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/button/\n */\n@scopedRegistry()\nexport class Tag extends ButtonFormControlMixin(LitElement) {\n  static styles = useStyles([colorStateStyles, styles]);\n\n  static readonly metadata = {\n    tag: 'nve-tag',\n    version: '0.0.0'\n  };\n\n  static elementDefinitions = {\n    [Icon.metadata.tag]: Icon\n  };\n\n  /** Determines if tag is closable, if true, the component renders a close icon. */\n  @property({ type: Boolean }) closable = false;\n\n  /** Determines the color of the tag. */\n  @property({ type: String, reflect: true }) color: Color;\n\n  /** Determines the visual prominence or weight */\n  @property({ type: String, reflect: true }) prominence?: Extract<Prominence, 'emphasis'>;\n\n  #i18nController: I18nController<this> = new I18nController<this>(this);\n\n  /** Updates internal string values for internationalization. */\n  @property({ type: Object }) i18n = this.#i18nController.i18n;\n\n  #typeClosableController = new TypeClosableController(this);\n\n  render() {\n    return html`\n      <div internal-host interaction-state focus-within>\n        <slot></slot>\n        ${this.closable ? html`<nve-icon part=\"icon\" @click=${() => this.#typeClosableController.close()} container=\"flat\" name=\"cancel\" size=\"sm\" role=\"img\" aria-label=${ifDefined(this.i18n.close)}></nve-icon>` : ''}\n      </div>\n    `;\n  }\n\n  constructor() {\n    super();\n    this.type = 'button';\n  }\n}\n"],"mappings":";;;;;;;;;;;;AAyCO,IAAA,IAAA,cAAkB,EAAuB,CAAU,CAAC,CAAC;;gBAC1C,EAAU,CAAC,GAAkB,CAAM,CAAC;;;kBAEzB;GACzB,KAAK;GACL,SAAS;EACX;;;4BAE4B,GACzB,EAAK,SAAS,MAAM,EACvB;;CAWA;CAKA;CAEA,SAAS;EACP,OAAO,CAAI,kEAGL,KAAK,WAAW,CAAI,uCAAsC,KAAKA,GAAwB,MAAM,EAAE,oEAAkE,EAAU,KAAK,KAAK,KAAK,EAAE,iBAAgB,GAAG;CAGvN;CAEA,cAAc;EAEZ,AADA,MAAM,mBAzBgC,cAQA,IAAI,EAAqB,IAAI,eAGlC,KAAKC,GAAgB,gBAE9B,IAAI,EAAuB,IAAI,GAavD,KAAK,OAAO;CACd;AACF;GA5BG,EAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,MAG1B,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,MAGxC,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,cAAA,KAAA,CAAA,MAKxC,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,UAzB3B,EAAe,CAAA,GAAA,CAAA"}
+{"version":3,"file":"tag2.js","names":["#typeClosableController","#i18nController"],"sources":["../../src/tag/tag.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { ButtonFormControlMixin } from '@nvidia-elements/forms/mixins';\nimport type { Color, Prominence } from '@nvidia-elements/core/internal';\nimport {\n  I18nController,\n  TypeClosableController,\n  useStyles,\n  colorStateStyles,\n  scopedRegistry\n} from '@nvidia-elements/core/internal';\nimport { Icon } from '@nvidia-elements/core/icon';\nimport styles from './tag.css?inline';\n\n/**\n * @element nve-tag\n * @description A interactive element that represents a category or group of content. Typically used to filter or organize content for one to many relations.\n * @documentation https://nvidia.github.io/elements/docs/elements/tag/\n * @since 0.10.0\n * @entrypoint \\@nvidia-elements/core/tag\n * @slot - default slot for content\n * @cssprop --background\n * @cssprop --color\n * @cssprop --gap\n * @cssprop --font-size\n * @cssprop --padding\n * @cssprop --border\n * @cssprop --border-radius\n * @cssprop --font-weight\n * @cssprop --cursor\n * @cssprop --height\n * @cssprop --width\n * @cssprop --max-width\n * @cssprop --text-decoration\n * @csspart icon - The icon element\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/button/\n */\n@scopedRegistry()\nexport class Tag extends ButtonFormControlMixin(LitElement) {\n  static styles = useStyles([colorStateStyles, styles]);\n\n  static readonly metadata = {\n    tag: 'nve-tag',\n    version: '0.0.0'\n  };\n\n  static elementDefinitions = {\n    [Icon.metadata.tag]: Icon\n  };\n\n  /** Determines if tag is closable, if true, the component renders a close icon. */\n  @property({ type: Boolean }) closable = false;\n\n  /** Determines the color of the tag. */\n  @property({ type: String, reflect: true }) color: Color;\n\n  /** Determines the visual prominence or weight */\n  @property({ type: String, reflect: true }) prominence?: Extract<Prominence, 'emphasis'>;\n\n  #i18nController: I18nController<this> = new I18nController<this>(this);\n\n  /** Updates internal string values for internationalization. */\n  @property({ type: Object }) i18n = this.#i18nController.i18n;\n\n  #typeClosableController = new TypeClosableController(this);\n\n  render() {\n    return html`\n      <div internal-host interaction-state focus-within>\n        <slot></slot>\n        ${this.closable ? html`<nve-icon part=\"icon\" @click=${() => this.#typeClosableController.close()} container=\"flat\" name=\"cancel\" size=\"sm\" role=\"img\" aria-label=${ifDefined(this.i18n.close)}></nve-icon>` : ''}\n      </div>\n    `;\n  }\n\n  constructor() {\n    super();\n    this.type = 'button';\n  }\n}\n"],"mappings":";;;;;;;;;;;;AA0CO,IAAA,IAAA,cAAkB,EAAuB,CAAU,CAAC,CAAC;;gBAC1C,EAAU,CAAC,GAAkB,CAAM,CAAC;;;kBAEzB;GACzB,KAAK;GACL,SAAS;EACX;;;4BAE4B,GACzB,EAAK,SAAS,MAAM,EACvB;;CAWA;CAKA;CAEA,SAAS;EACP,OAAO,CAAI,kEAGL,KAAK,WAAW,CAAI,uCAAsC,KAAKA,GAAwB,MAAM,EAAE,oEAAkE,EAAU,KAAK,KAAK,KAAK,EAAE,iBAAgB,GAAG;CAGvN;CAEA,cAAc;EAEZ,AADA,MAAM,mBAzBgC,cAQA,IAAI,EAAqB,IAAI,eAGlC,KAAKC,GAAgB,gBAE9B,IAAI,EAAuB,IAAI,GAavD,KAAK,OAAO;CACd;AACF;GA5BG,EAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,MAG1B,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,MAGxC,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,cAAA,KAAA,CAAA,MAKxC,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,UAzB3B,EAAe,CAAA,GAAA,CAAA"}

package/dist/textarea/textarea.d.ts

@@ -3,6 +3,7 @@ import { Control } from '@nvidia-elements/core/forms';
 /**
  * @element nve-textarea
  * @description A textarea is a control that enables users to enter and edit text.
+ * @documentation https://nvidia.github.io/elements/docs/elements/textarea/
  * @since 0.3.0
  * @entrypoint \@nvidia-elements/core/textarea
  * @cssprop --padding

package/dist/textarea/textarea2.js

@@ -9,7 +9,7 @@ var r = class extends t {
 	static {
 		this.metadata = {
 			tag: "nve-textarea",
-			version: "2.1.0"
+			version: "2.1.1"
 		};
 	}
 };

package/dist/textarea/textarea2.js.map

@@ -1 +1 @@
-{"version":3,"file":"textarea2.js","names":[],"sources":["../../src/textarea/textarea.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 { useStyles } from '@nvidia-elements/core/internal';\nimport { Control } from '@nvidia-elements/core/forms';\nimport styles from './textarea.css?inline';\n\n/**\n * @element nve-textarea\n * @description A textarea is a control that enables users to enter and edit text.\n * @since 0.3.0\n * @entrypoint \\@nvidia-elements/core/textarea\n * @cssprop --padding\n * @cssprop --font-size\n * @cssprop --height\n * @cssprop --width\n * @cssprop --min-height\n * @cssprop --background\n * @cssprop --border-radius\n * @cssprop --cursor\n * @cssprop --border\n * @cssprop --color\n * @aria https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea\n */\nexport class Textarea extends Control {\n  static styles: CSSResult[] = useStyles([...Control.styles, styles]);\n\n  static readonly metadata = {\n    tag: 'nve-textarea',\n    version: '0.0.0'\n  };\n}\n"],"mappings":";;;;AAyBA,IAAa,IAAb,cAA8B,EAAQ;;gBACP,EAAU,CAAC,GAAG,EAAQ,QAAQ,CAAM,CAAC;;;kBAEvC;GACzB,KAAK;GACL,SAAS;EACX;;AACF"}
+{"version":3,"file":"textarea2.js","names":[],"sources":["../../src/textarea/textarea.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 { useStyles } from '@nvidia-elements/core/internal';\nimport { Control } from '@nvidia-elements/core/forms';\nimport styles from './textarea.css?inline';\n\n/**\n * @element nve-textarea\n * @description A textarea is a control that enables users to enter and edit text.\n * @documentation https://nvidia.github.io/elements/docs/elements/textarea/\n * @since 0.3.0\n * @entrypoint \\@nvidia-elements/core/textarea\n * @cssprop --padding\n * @cssprop --font-size\n * @cssprop --height\n * @cssprop --width\n * @cssprop --min-height\n * @cssprop --background\n * @cssprop --border-radius\n * @cssprop --cursor\n * @cssprop --border\n * @cssprop --color\n * @aria https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea\n */\nexport class Textarea extends Control {\n  static styles: CSSResult[] = useStyles([...Control.styles, styles]);\n\n  static readonly metadata = {\n    tag: 'nve-textarea',\n    version: '0.0.0'\n  };\n}\n"],"mappings":";;;;AA0BA,IAAa,IAAb,cAA8B,EAAQ;;gBACP,EAAU,CAAC,GAAG,EAAQ,QAAQ,CAAM,CAAC;;;kBAEvC;GACzB,KAAK;GACL,SAAS;EACX;;AACF"}

package/dist/time/time.d.ts

@@ -4,6 +4,7 @@ import { IconButton } from '@nvidia-elements/core/icon-button';
 /**
  * @element nve-time
  * @description A time picker is a control that enables users to choose a time value.
+ * @documentation https://nvidia.github.io/elements/docs/elements/time/
  * @since 0.3.0
  * @entrypoint \@nvidia-elements/core/time
  * @cssprop --padding

package/dist/time/time2.js

@@ -19,7 +19,7 @@ var l = class extends r {
 	static {
 		this.metadata = {
 			tag: "nve-time",
-			version: "2.1.0"
+			version: "2.1.1"
 		};
 	}
 	static {

package/dist/time/time2.js.map

@@ -1 +1 @@
-{"version":3,"file":"time2.js","names":[],"sources":["../../src/time/time.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport type { ContainerElement } from '@nvidia-elements/core/internal';\nimport { scopedRegistry, useStyles } from '@nvidia-elements/core/internal';\nimport { Control } from '@nvidia-elements/core/forms';\nimport { IconButton } from '@nvidia-elements/core/icon-button';\nimport { inputStyles } from '@nvidia-elements/core/input';\nimport styles from './time.css?inline';\n\n/**\n * @element nve-time\n * @description A time picker is a control that enables users to choose a time value.\n * @since 0.3.0\n * @entrypoint \\@nvidia-elements/core/time\n * @cssprop --padding\n * @cssprop --font-size\n * @cssprop --height\n * @cssprop --background\n * @cssprop --border-radius\n * @cssprop --border\n * @cssprop --cursor\n * @csspart icon-button - The clock icon button element\n * @aria https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/time\n */\n@scopedRegistry()\nexport class Time extends Control implements ContainerElement {\n  /**\n   * Reduces the visual container for a minimal borderless appearance while preserving whitespace bounds.\n   * Use when embedding within another container such as a toolbar.\n   */\n  @property({ type: String, reflect: true }) container?: 'flat';\n\n  static styles = useStyles([...Control.styles, inputStyles, styles]);\n\n  static readonly metadata = {\n    tag: 'nve-time',\n    version: '0.0.0'\n  };\n\n  static elementDefinitions = {\n    [IconButton.metadata.tag]: IconButton\n  };\n\n  protected get suffixContent() {\n    return html`<nve-icon-button part=\"icon-button\" .ariaLabel=${this.i18n.expand} icon-name=\"clock\" container=\"inline\" @click=${this.showPicker}></nve-icon-button>`;\n  }\n}\n"],"mappings":";;;;;;;;;;AA4BO,IAAA,IAAA,cAAmB,EAAoC;;gBAO5C,EAAU;GAAC,GAAG,EAAQ;GAAQ;GAAa;EAAM,CAAC;;;kBAEvC;GACzB,KAAK;GACL,SAAS;EACX;;;4BAE4B,GACzB,EAAW,SAAS,MAAM,EAC7B;;CAEA,IAAc,gBAAgB;EAC5B,OAAO,CAAI,mDAAkD,KAAK,KAAK,OAAO,iDAA+C,KAAK,WAAW;CAC/I;AACF;GAhBG,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,aAAA,KAAA,CAAA,UAN1C,EAAe,CAAA,GAAA,CAAA"}
+{"version":3,"file":"time2.js","names":[],"sources":["../../src/time/time.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport type { ContainerElement } from '@nvidia-elements/core/internal';\nimport { scopedRegistry, useStyles } from '@nvidia-elements/core/internal';\nimport { Control } from '@nvidia-elements/core/forms';\nimport { IconButton } from '@nvidia-elements/core/icon-button';\nimport { inputStyles } from '@nvidia-elements/core/input';\nimport styles from './time.css?inline';\n\n/**\n * @element nve-time\n * @description A time picker is a control that enables users to choose a time value.\n * @documentation https://nvidia.github.io/elements/docs/elements/time/\n * @since 0.3.0\n * @entrypoint \\@nvidia-elements/core/time\n * @cssprop --padding\n * @cssprop --font-size\n * @cssprop --height\n * @cssprop --background\n * @cssprop --border-radius\n * @cssprop --border\n * @cssprop --cursor\n * @csspart icon-button - The clock icon button element\n * @aria https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/time\n */\n@scopedRegistry()\nexport class Time extends Control implements ContainerElement {\n  /**\n   * Reduces the visual container for a minimal borderless appearance while preserving whitespace bounds.\n   * Use when embedding within another container such as a toolbar.\n   */\n  @property({ type: String, reflect: true }) container?: 'flat';\n\n  static styles = useStyles([...Control.styles, inputStyles, styles]);\n\n  static readonly metadata = {\n    tag: 'nve-time',\n    version: '0.0.0'\n  };\n\n  static elementDefinitions = {\n    [IconButton.metadata.tag]: IconButton\n  };\n\n  protected get suffixContent() {\n    return html`<nve-icon-button part=\"icon-button\" .ariaLabel=${this.i18n.expand} icon-name=\"clock\" container=\"inline\" @click=${this.showPicker}></nve-icon-button>`;\n  }\n}\n"],"mappings":";;;;;;;;;;AA6BO,IAAA,IAAA,cAAmB,EAAoC;;gBAO5C,EAAU;GAAC,GAAG,EAAQ;GAAQ;GAAa;EAAM,CAAC;;;kBAEvC;GACzB,KAAK;GACL,SAAS;EACX;;;4BAE4B,GACzB,EAAW,SAAS,MAAM,EAC7B;;CAEA,IAAc,gBAAgB;EAC5B,OAAO,CAAI,mDAAkD,KAAK,KAAK,OAAO,iDAA+C,KAAK,WAAW;CAC/I;AACF;GAhBG,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,aAAA,KAAA,CAAA,UAN1C,EAAe,CAAA,GAAA,CAAA"}

package/dist/toast/toast.d.ts

@@ -6,6 +6,7 @@ import { Icon } from '@nvidia-elements/core/icon';
 /**
  * @element nve-toast
  * @description A contextual popup that displays a status. Toasts are [triggered](https://w3c.github.io/aria/#tooltip) by clicking, focusing, or tapping an element and cannot have interactive elements within them. [MDN Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API)
+ * @documentation https://nvidia.github.io/elements/docs/elements/toast/
  * @since 0.6.0
  * @entrypoint \@nvidia-elements/core/toast
  * @event beforetoggle - Dispatched on a popover just before showing or hiding. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/beforetoggle_event)

package/dist/toast/toast2.js

@@ -23,7 +23,7 @@ var g = class extends f {
 	static {
 		this.metadata = {
 			tag: "nve-toast",
-			version: "2.1.0"
+			version: "2.1.1"
 		};
 	}
 	static {