@ds-mo/ui 13.2.0 → 13.4.0

package/dist/components/ds-chart-bar.js.map

@@ -1 +1 @@
-{"version":3,"names":["chartBarCss","PERCENTAGE_TICKS","ChartBar","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","variant","data","series","categories","width","height","viewportController","svgEl","componentDidLoad","connectViewportController","connectedCallback","componentDidRender","ChartViewportController","viewport","connect","disconnectedCallback","disconnect","handleIntrinsicSizeChange","undefined","requestAnimationFrame","measure","renderSingle","innerWidth","innerHeight","axisLabelGap","categoryLabelOffset","yMax","max","d","value","xScale","scaleBand","domain","map","label","range","padding","yScale","scaleLinear","nice","yTicks","ticks","h","tick","key","transform","class","x1","x2","x","datum","index","barWidth","bandwidth","barX","barY","barHeight","squareBaseY","squareBaseHeight","fill","color","categoryColor","y","valuesForCategory","categoryIndex","Math","stackedAccessibleLabel","category","values","total","reduce","sum","details","seriesIndex","visibleValue","formatPercentage","String","name","join","renderStacked","categoryValues","_","totals","topSeriesIndex","topIndex","cumulativeValue","rawValue","segmentStart","segmentEnd","segmentY","segmentBottom","segmentHeight","hasRoundedTop","y1","y2","render","viewportWidth","viewportHeight","margin","resolveCartesianChartLayout","left","right","top","bottom","isSingle","accessibleLabel","Host","ref","element","role"],"sources":["src/wc/components/ChartBar/ChartBar.css?tag=ds-chart-bar&encapsulation=scoped","src/wc/components/ChartBar/ChartBar.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n  max-width: 100%;\n  font-family: var(--typography-font-family);\n}\n\n.chart-bar__svg {\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n\n.chart-bar__gridline {\n  stroke: var(--color-border-tertiary);\n  stroke-width: var(--dimension-stroke-width-012);\n  vector-effect: non-scaling-stroke;\n}\n\n/* Matches ds-text text-caption regular (SVG cannot host ds-text). */\n.chart-bar__axis-label {\n  fill: var(--color-foreground-secondary);\n  font-family: var(--typography-font-family);\n  font-size: var(--typography-fontsize-xs);\n  font-weight: var(--typography-weight-medium);\n  letter-spacing: var(--typography-letterspacing-positive);\n  text-transform: uppercase;\n}\n\n.chart-bar__bar--rounded {\n  rx: var(--dimension-radius-025);\n}\n\n.chart-bar__segment-shape--rounded {\n  rx: var(--dimension-radius-025);\n}\n\n.chart-bar__segment-separator {\n  stroke: var(--color-background-primary);\n  stroke-width: var(--dimension-stroke-width-012);\n  stroke-linecap: butt;\n  vector-effect: non-scaling-stroke;\n}\n","import { Component, Prop, State, Watch, h, Host } from '@stencil/core';\nimport { scaleBand, scaleLinear } from 'd3-scale';\nimport { max } from 'd3-array';\nimport { categoryColor } from '../../utils/chart-colors';\nimport { formatPercentage } from '../../utils';\nimport { resolveCartesianChartLayout } from '../../utils/cartesian-chart-layout';\nimport {\n  ChartViewportController,\n  type ChartViewportSize,\n} from '../../utils/chart-viewport-controller';\nimport type { ChartDatum, ChartSeries } from '../../utils/chart-types';\n\nexport type ChartBarVariant = 'single' | 'stacked' | 'percentage';\n\nconst PERCENTAGE_TICKS = [0, 25, 50, 75, 100];\n\n@Component({\n  tag: 'ds-chart-bar',\n  styleUrl: 'ChartBar.css',\n  scoped: true,\n})\nexport class ChartBar {\n  /** Rendering model. Single uses `data`; stacked and percentage use `series` and `categories`. */\n  @Prop() variant: ChartBarVariant = 'single';\n  /** Bars to render. Set as a JS property (not an HTML attribute). */\n  @Prop() data: ChartDatum[] = [];\n  /** Ordered stack series for stacked and percentage variants. Set as a JS property. */\n  @Prop() series: ChartSeries[] = [];\n  /** X-axis labels for stacked and percentage variants. Set as a JS property. */\n  @Prop() categories: string[] = [];\n  /** Standalone intrinsic width. Container constraints reflow the plot at rendered pixel size. */\n  @Prop() width: number = 480;\n  /** Standalone intrinsic height. Container constraints reflow the plot at rendered pixel size. */\n  @Prop() height: number = 240;\n\n  @State() private viewport: ChartViewportSize | undefined;\n\n  private viewportController: ChartViewportController | null = null;\n  private svgEl: SVGElement | null = null;\n\n  componentDidLoad() {\n    this.connectViewportController();\n  }\n\n  connectedCallback() {\n    if (this.svgEl && !this.viewportController) this.connectViewportController();\n  }\n\n  componentDidRender() {\n    if (!this.viewportController) this.connectViewportController();\n  }\n\n  private connectViewportController() {\n    if (!this.svgEl) return;\n    this.viewportController = new ChartViewportController(this.svgEl, viewport => {\n      if (\n        viewport.width !== this.viewport?.width ||\n        viewport.height !== this.viewport?.height\n      ) {\n        this.viewport = viewport;\n      }\n    });\n    this.viewportController.connect();\n  }\n\n  disconnectedCallback() {\n    this.viewportController?.disconnect();\n    this.viewportController = null;\n  }\n\n  @Watch('width')\n  @Watch('height')\n  handleIntrinsicSizeChange() {\n    this.viewport = undefined;\n    if (typeof requestAnimationFrame === 'function') {\n      requestAnimationFrame(() => this.viewportController?.measure());\n    }\n  }\n\n  private renderSingle(\n    innerWidth: number,\n    innerHeight: number,\n    axisLabelGap: number,\n    categoryLabelOffset: number\n  ) {\n    const yMax = max(this.data, d => d.value) ?? 0;\n    const xScale = scaleBand()\n      .domain(this.data.map(d => d.label))\n      .range([0, innerWidth])\n      .padding(0.35);\n    const yScale = scaleLinear()\n      .domain([0, yMax || 1])\n      .range([innerHeight, 0])\n      .nice();\n    const yTicks = yScale.ticks(4);\n\n    return (\n      <g>\n        {yTicks.map(tick => (\n          <g key={`grid-${tick}`} transform={`translate(0, ${yScale(tick)})`}>\n            <line class=\"chart-bar__gridline\" x1={0} x2={innerWidth} />\n            <text\n              class=\"chart-bar__axis-label\"\n              x={-axisLabelGap}\n              text-anchor=\"end\"\n              dominant-baseline=\"middle\"\n            >\n              {tick}\n            </text>\n          </g>\n        ))}\n\n        {this.data.map((datum, index) => {\n          const barWidth = xScale.bandwidth();\n          const barX = xScale(datum.label) ?? 0;\n          const barY = yScale(datum.value);\n          const barHeight = innerHeight - barY;\n          const squareBaseY = barY + barHeight / 2;\n          const squareBaseHeight = barHeight / 2;\n          const fill = datum.color ?? categoryColor(index);\n          return (\n            <g key={datum.label}>\n              <rect\n                class=\"chart-bar__bar chart-bar__bar--rounded\"\n                x={barX}\n                y={barY}\n                width={barWidth}\n                height={barHeight}\n                fill={fill}\n              />\n              <rect\n                class=\"chart-bar__bar chart-bar__bar--square-base\"\n                x={barX}\n                y={squareBaseY}\n                width={barWidth}\n                height={squareBaseHeight}\n                fill={fill}\n              />\n              <text\n                class=\"chart-bar__axis-label\"\n                x={barX + barWidth / 2}\n                y={innerHeight + categoryLabelOffset}\n                text-anchor=\"middle\"\n              >\n                {datum.label}\n              </text>\n            </g>\n          );\n        })}\n      </g>\n    );\n  }\n\n  private valuesForCategory(categoryIndex: number) {\n    return this.series.map(series => Math.max(0, series.data[categoryIndex] ?? 0));\n  }\n\n  private stackedAccessibleLabel() {\n    return this.categories\n      .map((category, categoryIndex) => {\n        const values = this.valuesForCategory(categoryIndex);\n        const total = values.reduce((sum, value) => sum + value, 0);\n        const details = this.series\n          .map((series, seriesIndex) => {\n            const value = values[seriesIndex];\n            const visibleValue =\n              this.variant === 'percentage'\n                ? formatPercentage(total ? value / total : 0, 1)\n                : String(value);\n            return `${series.name}: ${visibleValue}`;\n          })\n          .join(', ');\n        return `${category}: ${details}`;\n      })\n      .join('; ');\n  }\n\n  private renderStacked(\n    innerWidth: number,\n    innerHeight: number,\n    axisLabelGap: number,\n    categoryLabelOffset: number\n  ) {\n    const categoryValues = this.categories.map((_, index) =>\n      this.valuesForCategory(index)\n    );\n    const totals = categoryValues.map(values =>\n      values.reduce((sum, value) => sum + value, 0)\n    );\n    const yMax = this.variant === 'percentage' ? 100 : Math.max(0, ...totals);\n    const xScale = scaleBand()\n      .domain(this.categories)\n      .range([0, innerWidth])\n      .padding(0.35);\n    const yScale = scaleLinear()\n      .domain([0, yMax || 1])\n      .range([innerHeight, 0])\n      .nice();\n    const yTicks =\n      this.variant === 'percentage' ? PERCENTAGE_TICKS : yScale.ticks(4);\n\n    return (\n      <g>\n        {yTicks.map(tick => (\n          <g key={`grid-${tick}`} transform={`translate(0, ${yScale(tick)})`}>\n            <line class=\"chart-bar__gridline\" x1={0} x2={innerWidth} />\n            <text\n              class=\"chart-bar__axis-label\"\n              x={-axisLabelGap}\n              text-anchor=\"end\"\n              dominant-baseline=\"middle\"\n            >\n              {this.variant === 'percentage' ? `${tick}%` : tick}\n            </text>\n          </g>\n        ))}\n\n        {this.categories.map((category, categoryIndex) => {\n          const barWidth = xScale.bandwidth();\n          const barX = xScale(category) ?? 0;\n          const values = categoryValues[categoryIndex];\n          const total = totals[categoryIndex];\n          const topSeriesIndex = values.reduce(\n            (topIndex, value, seriesIndex) =>\n              value > 0 ? seriesIndex : topIndex,\n            -1\n          );\n          let cumulativeValue = 0;\n\n          return (\n            <g class=\"chart-bar__stack\" data-category={category} key={category}>\n              {this.series.map((series, seriesIndex) => {\n                const rawValue = values[seriesIndex];\n                const value =\n                  this.variant === 'percentage'\n                    ? total\n                      ? (rawValue / total) * 100\n                      : 0\n                    : rawValue;\n                const segmentStart = cumulativeValue;\n                const segmentEnd = cumulativeValue + value;\n                cumulativeValue = segmentEnd;\n                const segmentY = yScale(segmentEnd);\n                const segmentBottom = yScale(segmentStart);\n                const segmentHeight = Math.max(0, segmentBottom - segmentY);\n                if (!segmentHeight) return null;\n\n                const fill = series.color ?? categoryColor(seriesIndex);\n                const hasRoundedTop =\n                  this.variant === 'stacked' && seriesIndex === topSeriesIndex;\n                const squareBaseY = segmentY + segmentHeight / 2;\n                const squareBaseHeight = segmentHeight / 2;\n\n                return (\n                  <g\n                    class=\"chart-bar__segment\"\n                    data-series={series.name}\n                    key={series.name}\n                  >\n                    <rect\n                      class={{\n                        'chart-bar__segment-shape': true,\n                        'chart-bar__segment-shape--rounded': hasRoundedTop,\n                      }}\n                      x={barX}\n                      y={segmentY}\n                      width={barWidth}\n                      height={segmentHeight}\n                      fill={fill}\n                    />\n                    {hasRoundedTop ? (\n                      <rect\n                        class=\"chart-bar__segment-square-base\"\n                        x={barX}\n                        y={squareBaseY}\n                        width={barWidth}\n                        height={squareBaseHeight}\n                        fill={fill}\n                      />\n                    ) : null}\n                    {segmentStart > 0 ? (\n                      <line\n                        class=\"chart-bar__segment-separator\"\n                        x1={barX}\n                        x2={barX + barWidth}\n                        y1={segmentBottom}\n                        y2={segmentBottom}\n                        vector-effect=\"non-scaling-stroke\"\n                      />\n                    ) : null}\n                  </g>\n                );\n              })}\n              <text\n                class=\"chart-bar__axis-label\"\n                x={barX + barWidth / 2}\n                y={innerHeight + categoryLabelOffset}\n                text-anchor=\"middle\"\n              >\n                {category}\n              </text>\n            </g>\n          );\n        })}\n      </g>\n    );\n  }\n\n  render() {\n    const viewportWidth = this.viewport?.width ?? this.width;\n    const viewportHeight = this.viewport?.height ?? this.height;\n    const { margin, axisLabelGap, categoryLabelOffset } =\n      resolveCartesianChartLayout();\n    const innerWidth = Math.max(0, viewportWidth - margin.left - margin.right);\n    const innerHeight = Math.max(0, viewportHeight - margin.top - margin.bottom);\n    const isSingle = this.variant === 'single';\n    const accessibleLabel = isSingle\n      ? this.data.map(datum => `${datum.label}: ${datum.value}`).join(', ')\n      : this.stackedAccessibleLabel();\n\n    return (\n      <Host\n        class={{\n          'chart-bar': true,\n          [`chart-bar--${this.variant}`]: true,\n        }}\n      >\n        <svg\n          class=\"chart-bar__svg\"\n          ref={element => {\n            this.svgEl = element ?? null;\n          }}\n          width={viewportWidth}\n          height={viewportHeight}\n          role=\"img\"\n          aria-label={accessibleLabel}\n        >\n          <g transform={`translate(${margin.left}, ${margin.top})`}>\n            {isSingle\n              ? this.renderSingle(\n                  innerWidth,\n                  innerHeight,\n                  axisLabelGap,\n                  categoryLabelOffset\n                )\n              : this.renderStacked(\n                  innerWidth,\n                  innerHeight,\n                  axisLabelGap,\n                  categoryLabelOffset\n                )}\n          </g>\n        </svg>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["chartBarCss","PERCENTAGE_TICKS","ChartBar","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","variant","data","series","categories","width","height","viewportController","svgEl","componentDidLoad","connectViewportController","connectedCallback","componentDidRender","ChartViewportController","viewport","connect","disconnectedCallback","disconnect","handleIntrinsicSizeChange","undefined","requestAnimationFrame","measure","renderSingle","innerWidth","innerHeight","axisLabelGap","categoryLabelOffset","yMax","max","d","value","xScale","scaleBand","domain","map","label","range","padding","yScale","scaleLinear","nice","yTicks","ticks","h","tick","key","transform","class","x1","x2","x","datum","index","barWidth","bandwidth","barX","barY","barHeight","squareBaseY","squareBaseHeight","fill","color","categoryColor","y","valuesForCategory","categoryIndex","Math","stackedAccessibleLabel","category","values","total","reduce","sum","details","seriesIndex","visibleValue","formatPercentage","String","name","join","renderStacked","categoryValues","_","totals","topSeriesIndex","topIndex","cumulativeValue","rawValue","segmentStart","segmentEnd","segmentY","segmentBottom","segmentHeight","hasRoundedTop","y1","y2","render","viewportWidth","viewportHeight","margin","resolveCartesianChartLayout","left","right","top","bottom","isSingle","accessibleLabel","Host","ref","element","role"],"sources":["src/wc/components/ChartBar/ChartBar.css?tag=ds-chart-bar&encapsulation=scoped","src/wc/components/ChartBar/ChartBar.tsx"],"sourcesContent":["@import '../../utils/forced-colors.css';\n\n:host {\n  display: inline-block;\n  max-width: 100%;\n  font-family: var(--typography-font-family);\n}\n\n.chart-bar__svg {\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n\n.chart-bar__gridline {\n  stroke: var(--color-border-tertiary);\n  stroke-width: var(--dimension-stroke-width-012);\n  vector-effect: non-scaling-stroke;\n}\n\n/* Matches ds-text text-caption regular (SVG cannot host ds-text). */\n.chart-bar__axis-label {\n  fill: var(--color-foreground-secondary);\n  font-family: var(--typography-font-family);\n  font-size: var(--typography-fontsize-xs);\n  font-weight: var(--typography-weight-medium);\n  letter-spacing: var(--typography-letterspacing-positive);\n  text-transform: uppercase;\n}\n\n.chart-bar__bar--rounded {\n  rx: var(--dimension-radius-025);\n}\n\n.chart-bar__segment-shape--rounded {\n  rx: var(--dimension-radius-025);\n}\n\n.chart-bar__segment-separator {\n  stroke: var(--color-background-primary);\n  stroke-width: var(--dimension-stroke-width-012);\n  stroke-linecap: butt;\n  vector-effect: non-scaling-stroke;\n}\n\n@media (forced-colors: active) {\n  .chart-bar__bar,\n  .chart-bar__segment-shape,\n  .chart-bar__segment-square-base {\n    forced-color-adjust: none;\n  }\n\n  .chart-bar__segment-separator {\n    stroke: var(--ds-forced-color-surface);\n  }\n}\n","import { Component, Prop, State, Watch, h, Host } from '@stencil/core';\nimport { scaleBand, scaleLinear } from 'd3-scale';\nimport { max } from 'd3-array';\nimport { categoryColor } from '../../utils/chart-colors';\nimport { formatPercentage } from '../../utils';\nimport { resolveCartesianChartLayout } from '../../utils/cartesian-chart-layout';\nimport {\n  ChartViewportController,\n  type ChartViewportSize,\n} from '../../utils/chart-viewport-controller';\nimport type { ChartDatum, ChartSeries } from '../../utils/chart-types';\n\nexport type ChartBarVariant = 'single' | 'stacked' | 'percentage';\n\nconst PERCENTAGE_TICKS = [0, 25, 50, 75, 100];\n\n@Component({\n  tag: 'ds-chart-bar',\n  styleUrl: 'ChartBar.css',\n  scoped: true,\n})\nexport class ChartBar {\n  /** Rendering model. Single uses `data`; stacked and percentage use `series` and `categories`. */\n  @Prop() variant: ChartBarVariant = 'single';\n  /** Bars to render. Set as a JS property (not an HTML attribute). */\n  @Prop() data: ChartDatum[] = [];\n  /** Ordered stack series for stacked and percentage variants. Set as a JS property. */\n  @Prop() series: ChartSeries[] = [];\n  /** X-axis labels for stacked and percentage variants. Set as a JS property. */\n  @Prop() categories: string[] = [];\n  /** Standalone intrinsic width. Container constraints reflow the plot at rendered pixel size. */\n  @Prop() width: number = 480;\n  /** Standalone intrinsic height. Container constraints reflow the plot at rendered pixel size. */\n  @Prop() height: number = 240;\n\n  @State() private viewport: ChartViewportSize | undefined;\n\n  private viewportController: ChartViewportController | null = null;\n  private svgEl: SVGElement | null = null;\n\n  componentDidLoad() {\n    this.connectViewportController();\n  }\n\n  connectedCallback() {\n    if (this.svgEl && !this.viewportController) this.connectViewportController();\n  }\n\n  componentDidRender() {\n    if (!this.viewportController) this.connectViewportController();\n  }\n\n  private connectViewportController() {\n    if (!this.svgEl) return;\n    this.viewportController = new ChartViewportController(this.svgEl, viewport => {\n      if (\n        viewport.width !== this.viewport?.width ||\n        viewport.height !== this.viewport?.height\n      ) {\n        this.viewport = viewport;\n      }\n    });\n    this.viewportController.connect();\n  }\n\n  disconnectedCallback() {\n    this.viewportController?.disconnect();\n    this.viewportController = null;\n  }\n\n  @Watch('width')\n  @Watch('height')\n  handleIntrinsicSizeChange() {\n    this.viewport = undefined;\n    if (typeof requestAnimationFrame === 'function') {\n      requestAnimationFrame(() => this.viewportController?.measure());\n    }\n  }\n\n  private renderSingle(\n    innerWidth: number,\n    innerHeight: number,\n    axisLabelGap: number,\n    categoryLabelOffset: number\n  ) {\n    const yMax = max(this.data, d => d.value) ?? 0;\n    const xScale = scaleBand()\n      .domain(this.data.map(d => d.label))\n      .range([0, innerWidth])\n      .padding(0.35);\n    const yScale = scaleLinear()\n      .domain([0, yMax || 1])\n      .range([innerHeight, 0])\n      .nice();\n    const yTicks = yScale.ticks(4);\n\n    return (\n      <g>\n        {yTicks.map(tick => (\n          <g key={`grid-${tick}`} transform={`translate(0, ${yScale(tick)})`}>\n            <line class=\"chart-bar__gridline\" x1={0} x2={innerWidth} />\n            <text\n              class=\"chart-bar__axis-label\"\n              x={-axisLabelGap}\n              text-anchor=\"end\"\n              dominant-baseline=\"middle\"\n            >\n              {tick}\n            </text>\n          </g>\n        ))}\n\n        {this.data.map((datum, index) => {\n          const barWidth = xScale.bandwidth();\n          const barX = xScale(datum.label) ?? 0;\n          const barY = yScale(datum.value);\n          const barHeight = innerHeight - barY;\n          const squareBaseY = barY + barHeight / 2;\n          const squareBaseHeight = barHeight / 2;\n          const fill = datum.color ?? categoryColor(index);\n          return (\n            <g key={datum.label}>\n              <rect\n                class=\"chart-bar__bar chart-bar__bar--rounded\"\n                x={barX}\n                y={barY}\n                width={barWidth}\n                height={barHeight}\n                fill={fill}\n              />\n              <rect\n                class=\"chart-bar__bar chart-bar__bar--square-base\"\n                x={barX}\n                y={squareBaseY}\n                width={barWidth}\n                height={squareBaseHeight}\n                fill={fill}\n              />\n              <text\n                class=\"chart-bar__axis-label\"\n                x={barX + barWidth / 2}\n                y={innerHeight + categoryLabelOffset}\n                text-anchor=\"middle\"\n              >\n                {datum.label}\n              </text>\n            </g>\n          );\n        })}\n      </g>\n    );\n  }\n\n  private valuesForCategory(categoryIndex: number) {\n    return this.series.map(series => Math.max(0, series.data[categoryIndex] ?? 0));\n  }\n\n  private stackedAccessibleLabel() {\n    return this.categories\n      .map((category, categoryIndex) => {\n        const values = this.valuesForCategory(categoryIndex);\n        const total = values.reduce((sum, value) => sum + value, 0);\n        const details = this.series\n          .map((series, seriesIndex) => {\n            const value = values[seriesIndex];\n            const visibleValue =\n              this.variant === 'percentage'\n                ? formatPercentage(total ? value / total : 0, 1)\n                : String(value);\n            return `${series.name}: ${visibleValue}`;\n          })\n          .join(', ');\n        return `${category}: ${details}`;\n      })\n      .join('; ');\n  }\n\n  private renderStacked(\n    innerWidth: number,\n    innerHeight: number,\n    axisLabelGap: number,\n    categoryLabelOffset: number\n  ) {\n    const categoryValues = this.categories.map((_, index) =>\n      this.valuesForCategory(index)\n    );\n    const totals = categoryValues.map(values =>\n      values.reduce((sum, value) => sum + value, 0)\n    );\n    const yMax = this.variant === 'percentage' ? 100 : Math.max(0, ...totals);\n    const xScale = scaleBand()\n      .domain(this.categories)\n      .range([0, innerWidth])\n      .padding(0.35);\n    const yScale = scaleLinear()\n      .domain([0, yMax || 1])\n      .range([innerHeight, 0])\n      .nice();\n    const yTicks =\n      this.variant === 'percentage' ? PERCENTAGE_TICKS : yScale.ticks(4);\n\n    return (\n      <g>\n        {yTicks.map(tick => (\n          <g key={`grid-${tick}`} transform={`translate(0, ${yScale(tick)})`}>\n            <line class=\"chart-bar__gridline\" x1={0} x2={innerWidth} />\n            <text\n              class=\"chart-bar__axis-label\"\n              x={-axisLabelGap}\n              text-anchor=\"end\"\n              dominant-baseline=\"middle\"\n            >\n              {this.variant === 'percentage' ? `${tick}%` : tick}\n            </text>\n          </g>\n        ))}\n\n        {this.categories.map((category, categoryIndex) => {\n          const barWidth = xScale.bandwidth();\n          const barX = xScale(category) ?? 0;\n          const values = categoryValues[categoryIndex];\n          const total = totals[categoryIndex];\n          const topSeriesIndex = values.reduce(\n            (topIndex, value, seriesIndex) =>\n              value > 0 ? seriesIndex : topIndex,\n            -1\n          );\n          let cumulativeValue = 0;\n\n          return (\n            <g class=\"chart-bar__stack\" data-category={category} key={category}>\n              {this.series.map((series, seriesIndex) => {\n                const rawValue = values[seriesIndex];\n                const value =\n                  this.variant === 'percentage'\n                    ? total\n                      ? (rawValue / total) * 100\n                      : 0\n                    : rawValue;\n                const segmentStart = cumulativeValue;\n                const segmentEnd = cumulativeValue + value;\n                cumulativeValue = segmentEnd;\n                const segmentY = yScale(segmentEnd);\n                const segmentBottom = yScale(segmentStart);\n                const segmentHeight = Math.max(0, segmentBottom - segmentY);\n                if (!segmentHeight) return null;\n\n                const fill = series.color ?? categoryColor(seriesIndex);\n                const hasRoundedTop =\n                  this.variant === 'stacked' && seriesIndex === topSeriesIndex;\n                const squareBaseY = segmentY + segmentHeight / 2;\n                const squareBaseHeight = segmentHeight / 2;\n\n                return (\n                  <g\n                    class=\"chart-bar__segment\"\n                    data-series={series.name}\n                    key={series.name}\n                  >\n                    <rect\n                      class={{\n                        'chart-bar__segment-shape': true,\n                        'chart-bar__segment-shape--rounded': hasRoundedTop,\n                      }}\n                      x={barX}\n                      y={segmentY}\n                      width={barWidth}\n                      height={segmentHeight}\n                      fill={fill}\n                    />\n                    {hasRoundedTop ? (\n                      <rect\n                        class=\"chart-bar__segment-square-base\"\n                        x={barX}\n                        y={squareBaseY}\n                        width={barWidth}\n                        height={squareBaseHeight}\n                        fill={fill}\n                      />\n                    ) : null}\n                    {segmentStart > 0 ? (\n                      <line\n                        class=\"chart-bar__segment-separator\"\n                        x1={barX}\n                        x2={barX + barWidth}\n                        y1={segmentBottom}\n                        y2={segmentBottom}\n                        vector-effect=\"non-scaling-stroke\"\n                      />\n                    ) : null}\n                  </g>\n                );\n              })}\n              <text\n                class=\"chart-bar__axis-label\"\n                x={barX + barWidth / 2}\n                y={innerHeight + categoryLabelOffset}\n                text-anchor=\"middle\"\n              >\n                {category}\n              </text>\n            </g>\n          );\n        })}\n      </g>\n    );\n  }\n\n  render() {\n    const viewportWidth = this.viewport?.width ?? this.width;\n    const viewportHeight = this.viewport?.height ?? this.height;\n    const { margin, axisLabelGap, categoryLabelOffset } =\n      resolveCartesianChartLayout();\n    const innerWidth = Math.max(0, viewportWidth - margin.left - margin.right);\n    const innerHeight = Math.max(0, viewportHeight - margin.top - margin.bottom);\n    const isSingle = this.variant === 'single';\n    const accessibleLabel = isSingle\n      ? this.data.map(datum => `${datum.label}: ${datum.value}`).join(', ')\n      : this.stackedAccessibleLabel();\n\n    return (\n      <Host\n        class={{\n          'chart-bar': true,\n          [`chart-bar--${this.variant}`]: true,\n        }}\n      >\n        <svg\n          class=\"chart-bar__svg\"\n          ref={element => {\n            this.svgEl = element ?? null;\n          }}\n          width={viewportWidth}\n          height={viewportHeight}\n          role=\"img\"\n          aria-label={accessibleLabel}\n        >\n          <g transform={`translate(${margin.left}, ${margin.top})`}>\n            {isSingle\n              ? this.renderSingle(\n                  innerWidth,\n                  innerHeight,\n                  axisLabelGap,\n                  categoryLabelOffset\n                )\n              : this.renderStacked(\n                  innerWidth,\n                  innerHeight,\n                  axisLabelGap,\n                  categoryLabelOffset\n                )}\n          </g>\n        </svg>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/components/ds-chart-donut.js

@@ -1,2 +1,2 @@
-import{p as t,H as n,c as e,h as i,a as s,t as r}from"./index.js";import{c as o}from"./p-CMv_7vFs.js";import{d as a}from"./p-Ay1AX7Ql.js";import{d as c}from"./p-BroVnDzE.js";import{T as h}from"./p-C4uYvyq6.js";import{r as u}from"./p-BJMRBHKW.js";import{f as l}from"./p-BBpASejH.js";import{w as f,c as d,a as p}from"./p-CrCGIx8s.js";function y(t,n,e){t.textContent=n;if(e<=0||t.getComputedTextLength()<=e)return n;let i=0;let s=n.length;while(i<s){const r=Math.ceil((i+s)/2);t.textContent=`${n.slice(0,r)}…`;if(t.getComputedTextLength()<=e){i=r}else{s=r-1}}return i>0?`${n.slice(0,i)}…`:"…"}const v=Math.abs;const m=Math.atan2;const g=Math.cos;const b=Math.max;const x=Math.min;const M=Math.sin;const _=Math.sqrt;const w=1e-12;const z=Math.PI;const k=z/2;const $=2*z;function A(t){return t>1?0:t<-1?z:Math.acos(t)}function j(t){return t>=1?k:t<=-1?-k:Math.asin(t)}function C(t){return t.innerRadius}function S(t){return t.outerRadius}function B(t){return t.startAngle}function E(t){return t.endAngle}function P(t){return t&&t.padAngle}function R(t,n,e,i,s,r,o,a){var c=e-t,h=i-n,u=o-s,l=a-r,f=l*c-u*h;if(f*f<w)return;f=(u*(n-r)-l*(t-s))/f;return[t+f*c,n+f*h]}function F(t,n,e,i,s,r,o){var a=t-e,c=n-i,h=(o?r:-r)/_(a*a+c*c),u=h*c,l=-h*a,f=t+u,d=n+l,p=e+u,y=i+l,v=(f+p)/2,m=(d+y)/2,g=p-f,x=y-d,M=g*g+x*x,w=s-r,z=f*y-p*d,k=(x<0?-1:1)*_(b(0,w*w*M-z*z)),$=(z*x-g*k)/M,A=(-z*g-x*k)/M,j=(z*x+g*k)/M,C=(-z*g+x*k)/M,S=$-v,B=A-m,E=j-v,P=C-m;if(S*S+B*B>E*E+P*P)$=j,A=C;return{cx:$,cy:A,x01:-u,y01:-l,x11:$*(s/w-1),y11:A*(s/w-1)}}function T(){var t=C,n=S,e=d(0),i=null,s=B,r=E,o=P,a=null,c=f(h);function h(){var h,u,l=+t.apply(this,arguments),f=+n.apply(this,arguments),d=s.apply(this,arguments)-k,p=r.apply(this,arguments)-k,y=v(p-d),b=p>d;if(!a)a=h=c();if(f<l)u=f,f=l,l=u;if(!(f>w))a.moveTo(0,0);else if(y>$-w){a.moveTo(f*g(d),f*M(d));a.arc(0,0,f,d,p,!b);if(l>w){a.moveTo(l*g(p),l*M(p));a.arc(0,0,l,p,d,b)}}else{var C=d,S=p,B=d,E=p,P=y,T=y,D=o.apply(this,arguments)/2,H=D>w&&(i?+i.apply(this,arguments):_(l*l+f*f)),L=x(v(f-l)/2,+e.apply(this,arguments)),N=L,O=L,V,X;if(H>w){var Y=j(H/l*M(D)),q=j(H/f*M(D));if((P-=Y*2)>w)Y*=b?1:-1,B+=Y,E-=Y;else P=0,B=E=(d+p)/2;if((T-=q*2)>w)q*=b?1:-1,C+=q,S-=q;else T=0,C=S=(d+p)/2}var G=f*g(C),I=f*M(C),J=l*g(E),K=l*M(E);if(L>w){var Q=f*g(S),W=f*M(S),U=l*g(B),Z=l*M(B),tt;if(y<z){if(tt=R(G,I,U,Z,Q,W,J,K)){var nt=G-tt[0],et=I-tt[1],it=Q-tt[0],st=W-tt[1],rt=1/M(A((nt*it+et*st)/(_(nt*nt+et*et)*_(it*it+st*st)))/2),ot=_(tt[0]*tt[0]+tt[1]*tt[1]);N=x(L,(l-ot)/(rt-1));O=x(L,(f-ot)/(rt+1))}else{N=O=0}}}if(!(T>w))a.moveTo(G,I);else if(O>w){V=F(U,Z,G,I,f,O,b);X=F(Q,W,J,K,f,O,b);a.moveTo(V.cx+V.x01,V.cy+V.y01);if(O<L)a.arc(V.cx,V.cy,O,m(V.y01,V.x01),m(X.y01,X.x01),!b);else{a.arc(V.cx,V.cy,O,m(V.y01,V.x01),m(V.y11,V.x11),!b);a.arc(0,0,f,m(V.cy+V.y11,V.cx+V.x11),m(X.cy+X.y11,X.cx+X.x11),!b);a.arc(X.cx,X.cy,O,m(X.y11,X.x11),m(X.y01,X.x01),!b)}}else a.moveTo(G,I),a.arc(0,0,f,C,S,!b);if(!(l>w)||!(P>w))a.lineTo(J,K);else if(N>w){V=F(J,K,Q,W,l,-N,b);X=F(G,I,U,Z,l,-N,b);a.lineTo(V.cx+V.x01,V.cy+V.y01);if(N<L)a.arc(V.cx,V.cy,N,m(V.y01,V.x01),m(X.y01,X.x01),!b);else{a.arc(V.cx,V.cy,N,m(V.y01,V.x01),m(V.y11,V.x11),!b);a.arc(0,0,l,m(V.cy+V.y11,V.cx+V.x11),m(X.cy+X.y11,X.cx+X.x11),b);a.arc(X.cx,X.cy,N,m(X.y11,X.x11),m(X.y01,X.x01),!b)}}else a.arc(0,0,l,E,B,b)}a.closePath();if(h)return a=null,h+""||null}h.centroid=function(){var e=(+t.apply(this,arguments)+ +n.apply(this,arguments))/2,i=(+s.apply(this,arguments)+ +r.apply(this,arguments))/2-z/2;return[g(i)*e,M(i)*e]};h.innerRadius=function(n){return arguments.length?(t=typeof n==="function"?n:d(+n),h):t};h.outerRadius=function(t){return arguments.length?(n=typeof t==="function"?t:d(+t),h):n};h.cornerRadius=function(t){return arguments.length?(e=typeof t==="function"?t:d(+t),h):e};h.padRadius=function(t){return arguments.length?(i=t==null?null:typeof t==="function"?t:d(+t),h):i};h.startAngle=function(t){return arguments.length?(s=typeof t==="function"?t:d(+t),h):s};h.endAngle=function(t){return arguments.length?(r=typeof t==="function"?t:d(+t),h):r};h.padAngle=function(t){return arguments.length?(o=typeof t==="function"?t:d(+t),h):o};h.context=function(t){return arguments.length?(a=t==null?null:t,h):a};return h}function D(t,n){return n<t?-1:n>t?1:n>=t?0:NaN}function H(t){return t}function L(){var t=H,n=D,e=null,i=d(0),s=d($),r=d(0);function o(o){var a,c=(o=p(o)).length,h,u,l=0,f=new Array(c),d=new Array(c),y=+i.apply(this,arguments),v=Math.min($,Math.max(-$,s.apply(this,arguments)-y)),m,g=Math.min(Math.abs(v)/c,r.apply(this,arguments)),b=g*(v<0?-1:1),x;for(a=0;a<c;++a){if((x=d[f[a]=a]=+t(o[a],a,o))>0){l+=x}}if(n!=null)f.sort((function(t,e){return n(d[t],d[e])}));else if(e!=null)f.sort((function(t,n){return e(o[t],o[n])}));for(a=0,u=l?(v-c*b)/l:0;a<c;++a,y=m){h=f[a],x=d[h],m=y+(x>0?x*u:0)+b,d[h]={data:o[h],index:a,value:x,startAngle:y,endAngle:m,padAngle:g}}return d}o.value=function(n){return arguments.length?(t=typeof n==="function"?n:d(+n),o):t};o.sortValues=function(t){return arguments.length?(n=t,e=null,o):n};o.sort=function(t){return arguments.length?(e=t,n=null,o):e};o.startAngle=function(t){return arguments.length?(i=typeof t==="function"?t:d(+t),o):i};o.endAngle=function(t){return arguments.length?(s=typeof t==="function"?t:d(+t),o):s};o.padAngle=function(t){return arguments.length?(r=typeof t==="function"?t:d(+t),o):r};return o}const N=()=>`.sc-ds-chart-donut-h{display:inline-block;font-family:var(--typography-font-family);user-select:none}.chart-donut--fill.sc-ds-chart-donut-h{display:block;width:100%;height:100%;min-width:0;min-height:0}.chart-donut__wrapper.sc-ds-chart-donut{position:relative;overflow:visible}.chart-donut--fill.sc-ds-chart-donut-h .chart-donut__wrapper.sc-ds-chart-donut{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.chart-donut__svg.sc-ds-chart-donut path.sc-ds-chart-donut{cursor:default;transition:opacity var(--effect-motion-short-2)}.chart-donut__slice--dimmed.sc-ds-chart-donut{opacity:var(--effect-opacity-medium)}@media (prefers-reduced-motion: reduce){.chart-donut__svg.sc-ds-chart-donut path.sc-ds-chart-donut{transition:none}}.chart-donut__svg.sc-ds-chart-donut path.sc-ds-chart-donut:focus-visible{outline:none;stroke:var(--color-interaction-focus);stroke-width:var(--dimension-stroke-width-025);vector-effect:non-scaling-stroke}.chart-donut__center-value.sc-ds-chart-donut{fill:var(--color-foreground-primary);font-family:var(--typography-font-family);font-size:var(--typography-fontsize-xl);line-height:var(--typography-lineheight-xl);font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-negative-double);cursor:default;pointer-events:none}.chart-donut__center-caption.sc-ds-chart-donut{fill:var(--color-foreground-secondary);font-family:var(--typography-font-family);font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md);font-weight:var(--typography-weight-regular);letter-spacing:var(--typography-letterspacing-negative-half);cursor:default;pointer-events:none}`;const O=0;const V=.82;const X=128;const Y=t(class t extends n{constructor(t){super();if(t!==false){this.__registerHost()}this.dsSliceHover=e(this,"dsSliceHover");this.noDataLabel="No data";this.data=[];this.thickness=h.size200;this.cornerRadius=h.radius025;this.gap=1;this.showTooltip=true;this.activeLabel=null;this.hoveredLabel=null;this.displayedValueText="";this.displayedCaptionText="";this.measuredSize=X;this.tooltipX=0;this.tooltipY=0;this.resizeObserver=null}get isFillMode(){return this.size==null||!Number.isFinite(this.size)||this.size<=0}get fillMinPx(){return u(h.donutFillMin,X)}get fillMaxPx(){return u(h.donutFillMax,192)}clampFillSize(t){const n=this.fillMinPx;const e=this.fillMaxPx;if(!(t>0))return n;return Math.round(Math.min(e,Math.max(n,t)))}get resolvedSize(){if(!this.isFillMode)return this.size;return this.clampFillSize(this.measuredSize)}componentDidLoad(){this.syncResizeObserver()}onSizePropChange(){this.syncResizeObserver()}disconnectedCallback(){this.teardownResizeObserver()}syncResizeObserver(){this.teardownResizeObserver();if(!this.isFillMode)return;const t=this.el;if(!t||typeof ResizeObserver==="undefined")return;this.resizeObserver=new ResizeObserver((t=>{const n=t[0];if(!n)return;this.applyAvailableSize(n.contentRect.width,n.contentRect.height)}));this.resizeObserver.observe(t);this.measureHost()}measureHost(){const t=this.el.getBoundingClientRect();this.applyAvailableSize(t.width,t.height)}applyAvailableSize(t,n){const e=Math.floor(Math.min(t,n));if(e>0&&e!==this.measuredSize){this.measuredSize=e}}teardownResizeObserver(){this.resizeObserver?.disconnect();this.resizeObserver=null}handleHover(t){this.hoveredLabel=t?.label??null;this.dsSliceHover.emit(t)}get tooltipDatum(){if(!this.showTooltip||this.hoveredLabel==null)return null;return this.data.find((t=>t.label===this.hoveredLabel))??null}updateTooltipFromPointer(t){if(!this.showTooltip)return;const n=this.el.querySelector(".chart-donut__wrapper");if(!n)return;const e=n.getBoundingClientRect();this.tooltipX=t.clientX-e.left;this.tooltipY=t.clientY-e.top}updateTooltipFromSvgPoint(t,n,e,i){if(!this.showTooltip)return;const s=this.el.querySelector(".chart-donut__wrapper");const r=t.ownerSVGElement;if(!s||!r)return;const o=s.getBoundingClientRect();const a=r.getBoundingClientRect();this.tooltipX=a.left-o.left+n*(a.width/i);this.tooltipY=a.top-o.top+e*(a.height/i)}componentDidRender(){if(this.isFillMode&&!this.resizeObserver){this.syncResizeObserver()}const t=this.resolvedSize;const n=t/2;const e=u(this.thickness,h.size200);const i=n-e;const s=i*2*V;const r=this.data.reduce(((t,n)=>t+n.value),0);const o=this.centerValue??l(r,this.locale);if(this.valueTextEl){const t=y(this.valueTextEl,o,s);if(t!==this.displayedValueText)this.displayedValueText=t;else this.valueTextEl.textContent=t}const a=this.centerCaption??"";if(this.captionTextEl&&a){const t=y(this.captionTextEl,a,s);if(t!==this.displayedCaptionText)this.displayedCaptionText=t;else this.captionTextEl.textContent=t}}render(){const t=this.resolvedSize;const n=t/2;const e=u(this.thickness,h.size200);const r=u(this.cornerRadius,h.radius025);const a=n-e;const c=this.data.reduce(((t,n)=>t+n.value),0);const f=c<=0;const d=this.activeLabel??this.hoveredLabel;const p=T().innerRadius(a).outerRadius(n).cornerRadius(r).padAngle(this.gap*Math.PI/180);const y=f?[]:L().value((t=>t.value)).sort(null)(this.data);const v=f?T().innerRadius(a).outerRadius(n)({startAngle:0,endAngle:Math.PI*2}):null;const m=u(h.lineheightXl,32);const g=u(h.lineheightMd,20);const b=this.centerCaption?n-(O+g)/2:n;const x=n+(m+O)/2;const M=this.centerValue??l(c,this.locale);const _=this.centerCaption??"";const w=this.isFillMode;return i(s,{key:"8b61d0e0a38d8ffed727b338930b346e26df2e1e",class:{"chart-donut":true,"chart-donut--fill":w,"chart-donut--fixed":!w},style:!w?{width:`${t}px`,height:`${t}px`}:undefined},i("div",{key:"147a30532a7708ac6c43259bc9f0b40b516e4da5",class:"chart-donut__wrapper",style:!w?{width:`${t}px`,height:`${t}px`}:undefined},i("svg",{key:"2c1116b89b360af9e68e1519616614e8532eac03",class:"chart-donut__svg",viewBox:`0 0 ${t} ${t}`,width:t,height:t,role:f?"img":undefined,"aria-label":f?this.noDataLabel:undefined},i("g",{key:"6d0fd6cf88429c254bec9ab0f257952a3a2aab52",transform:`translate(${n}, ${n})`},f?i("path",{d:v??undefined,fill:"var(--color-background-faint-neutral)","aria-hidden":"true"}):y.map(((e,s)=>{const r=this.data[s];const a=d!=null&&r.label!==d;const[c,h]=p.centroid(e);return i("path",{key:r.label,class:{"chart-donut__slice--dimmed":a},d:p(e)??undefined,fill:r.color??o(s),tabindex:0,role:"img","aria-label":`${r.label}: ${r.value}`,onMouseEnter:t=>{this.updateTooltipFromPointer(t);this.handleHover(r)},onMouseMove:t=>this.updateTooltipFromPointer(t),onMouseLeave:()=>this.handleHover(null),onFocus:e=>{this.updateTooltipFromSvgPoint(e.currentTarget,n+c,n+h,t);this.handleHover(r)},onBlur:()=>this.handleHover(null)})}))),i("text",{key:"7501cdbda44378ec4c758c672c73ea230ca68c3b",class:"chart-donut__center-value",x:n,y:b,"text-anchor":"middle","dominant-baseline":"central",ref:t=>{this.valueTextEl=t??undefined}},this.displayedValueText||M),_&&i("text",{key:"f806109ff70c58381d439ddbfbb885531c751036",class:"chart-donut__center-caption",x:n,y:x,"text-anchor":"middle","dominant-baseline":"central",ref:t=>{this.captionTextEl=t??undefined}},this.displayedCaptionText||_)),this.tooltipDatum&&i("ds-tooltip-data-viz",{key:"ecc27ee6ab17b398712a78fa9e9a49ea0a8c4032",label:this.tooltipDatum.label,value:l(this.tooltipDatum.value,this.locale),x:this.tooltipX,y:this.tooltipY})))}get el(){return this}static get watchers(){return{size:[{onSizePropChange:0}]}}static get style(){return N()}},[2,"ds-chart-donut",{locale:[1],noDataLabel:[1,"no-data-label"],data:[16],size:[2],thickness:[8],cornerRadius:[8,"corner-radius"],gap:[2],showTooltip:[4,"show-tooltip"],centerValue:[1,"center-value"],centerCaption:[1,"center-caption"],activeLabel:[1,"active-label"],hoveredLabel:[32],displayedValueText:[32],displayedCaptionText:[32],measuredSize:[32],tooltipX:[32],tooltipY:[32]},undefined,{size:[{onSizePropChange:0}]}]);function q(){if(typeof customElements==="undefined"){return}const t=["ds-chart-donut","ds-text","ds-tooltip-data-viz"];t.forEach((t=>{switch(t){case"ds-chart-donut":if(!customElements.get(r(t))){customElements.define(r(t),Y)}break;case"ds-text":if(!customElements.get(r(t))){a()}break;case"ds-tooltip-data-viz":if(!customElements.get(r(t))){c()}break}}))}q();const G=Y;const I=q;export{G as DsChartDonut,I as defineCustomElement};
+import{p as t,H as e,c as n,h as s,a as i,t as o}from"./index.js";import{c as r}from"./p-CMv_7vFs.js";import{d as a}from"./p-w2kKeG_h.js";import{d as c}from"./p-RT1mts9U.js";import{T as h}from"./p-C4uYvyq6.js";import{r as u}from"./p-BJMRBHKW.js";import{f as l}from"./p-BBpASejH.js";import{w as d,c as f,a as p}from"./p-CrCGIx8s.js";function v(t,e,n){t.textContent=e;if(n<=0||t.getComputedTextLength()<=n)return e;let s=0;let i=e.length;while(s<i){const o=Math.ceil((s+i)/2);t.textContent=`${e.slice(0,o)}…`;if(t.getComputedTextLength()<=n){s=o}else{i=o-1}}return s>0?`${e.slice(0,s)}…`:"…"}const y=Math.abs;const g=Math.atan2;const m=Math.cos;const b=Math.max;const x=Math.min;const _=Math.sin;const M=Math.sqrt;const w=1e-12;const k=Math.PI;const z=k/2;const C=2*k;function $(t){return t>1?0:t<-1?k:Math.acos(t)}function j(t){return t>=1?z:t<=-1?-z:Math.asin(t)}function T(t){return t.innerRadius}function S(t){return t.outerRadius}function A(t){return t.startAngle}function R(t){return t.endAngle}function B(t){return t&&t.padAngle}function H(t,e,n,s,i,o,r,a){var c=n-t,h=s-e,u=r-i,l=a-o,d=l*c-u*h;if(d*d<w)return;d=(u*(e-o)-l*(t-i))/d;return[t+d*c,e+d*h]}function P(t,e,n,s,i,o,r){var a=t-n,c=e-s,h=(r?o:-o)/M(a*a+c*c),u=h*c,l=-h*a,d=t+u,f=e+l,p=n+u,v=s+l,y=(d+p)/2,g=(f+v)/2,m=p-d,x=v-f,_=m*m+x*x,w=i-o,k=d*v-p*f,z=(x<0?-1:1)*M(b(0,w*w*_-k*k)),C=(k*x-m*z)/_,$=(-k*m-x*z)/_,j=(k*x+m*z)/_,T=(-k*m+x*z)/_,S=C-y,A=$-g,R=j-y,B=T-g;if(S*S+A*A>R*R+B*B)C=j,$=T;return{cx:C,cy:$,x01:-u,y01:-l,x11:C*(i/w-1),y11:$*(i/w-1)}}function E(){var t=T,e=S,n=f(0),s=null,i=A,o=R,r=B,a=null,c=d(h);function h(){var h,u,l=+t.apply(this,arguments),d=+e.apply(this,arguments),f=i.apply(this,arguments)-z,p=o.apply(this,arguments)-z,v=y(p-f),b=p>f;if(!a)a=h=c();if(d<l)u=d,d=l,l=u;if(!(d>w))a.moveTo(0,0);else if(v>C-w){a.moveTo(d*m(f),d*_(f));a.arc(0,0,d,f,p,!b);if(l>w){a.moveTo(l*m(p),l*_(p));a.arc(0,0,l,p,f,b)}}else{var T=f,S=p,A=f,R=p,B=v,E=v,F=r.apply(this,arguments)/2,L=F>w&&(s?+s.apply(this,arguments):M(l*l+d*d)),D=x(y(d-l)/2,+n.apply(this,arguments)),N=D,O=D,G,K;if(L>w){var V=j(L/l*_(F)),Y=j(L/d*_(F));if((B-=V*2)>w)V*=b?1:-1,A+=V,R-=V;else B=0,A=R=(f+p)/2;if((E-=Y*2)>w)Y*=b?1:-1,T+=Y,S-=Y;else E=0,T=S=(f+p)/2}var q=d*m(T),I=d*_(T),J=l*m(R),U=l*_(R);if(D>w){var W=d*m(S),X=d*_(S),Q=l*m(A),Z=l*_(A),tt;if(v<k){if(tt=H(q,I,Q,Z,W,X,J,U)){var et=q-tt[0],nt=I-tt[1],st=W-tt[0],it=X-tt[1],ot=1/_($((et*st+nt*it)/(M(et*et+nt*nt)*M(st*st+it*it)))/2),rt=M(tt[0]*tt[0]+tt[1]*tt[1]);N=x(D,(l-rt)/(ot-1));O=x(D,(d-rt)/(ot+1))}else{N=O=0}}}if(!(E>w))a.moveTo(q,I);else if(O>w){G=P(Q,Z,q,I,d,O,b);K=P(W,X,J,U,d,O,b);a.moveTo(G.cx+G.x01,G.cy+G.y01);if(O<D)a.arc(G.cx,G.cy,O,g(G.y01,G.x01),g(K.y01,K.x01),!b);else{a.arc(G.cx,G.cy,O,g(G.y01,G.x01),g(G.y11,G.x11),!b);a.arc(0,0,d,g(G.cy+G.y11,G.cx+G.x11),g(K.cy+K.y11,K.cx+K.x11),!b);a.arc(K.cx,K.cy,O,g(K.y11,K.x11),g(K.y01,K.x01),!b)}}else a.moveTo(q,I),a.arc(0,0,d,T,S,!b);if(!(l>w)||!(B>w))a.lineTo(J,U);else if(N>w){G=P(J,U,W,X,l,-N,b);K=P(q,I,Q,Z,l,-N,b);a.lineTo(G.cx+G.x01,G.cy+G.y01);if(N<D)a.arc(G.cx,G.cy,N,g(G.y01,G.x01),g(K.y01,K.x01),!b);else{a.arc(G.cx,G.cy,N,g(G.y01,G.x01),g(G.y11,G.x11),!b);a.arc(0,0,l,g(G.cy+G.y11,G.cx+G.x11),g(K.cy+K.y11,K.cx+K.x11),b);a.arc(K.cx,K.cy,N,g(K.y11,K.x11),g(K.y01,K.x01),!b)}}else a.arc(0,0,l,R,A,b)}a.closePath();if(h)return a=null,h+""||null}h.centroid=function(){var n=(+t.apply(this,arguments)+ +e.apply(this,arguments))/2,s=(+i.apply(this,arguments)+ +o.apply(this,arguments))/2-k/2;return[m(s)*n,_(s)*n]};h.innerRadius=function(e){return arguments.length?(t=typeof e==="function"?e:f(+e),h):t};h.outerRadius=function(t){return arguments.length?(e=typeof t==="function"?t:f(+t),h):e};h.cornerRadius=function(t){return arguments.length?(n=typeof t==="function"?t:f(+t),h):n};h.padRadius=function(t){return arguments.length?(s=t==null?null:typeof t==="function"?t:f(+t),h):s};h.startAngle=function(t){return arguments.length?(i=typeof t==="function"?t:f(+t),h):i};h.endAngle=function(t){return arguments.length?(o=typeof t==="function"?t:f(+t),h):o};h.padAngle=function(t){return arguments.length?(r=typeof t==="function"?t:f(+t),h):r};h.context=function(t){return arguments.length?(a=t==null?null:t,h):a};return h}function F(t,e){return e<t?-1:e>t?1:e>=t?0:NaN}function L(t){return t}function D(){var t=L,e=F,n=null,s=f(0),i=f(C),o=f(0);function r(r){var a,c=(r=p(r)).length,h,u,l=0,d=new Array(c),f=new Array(c),v=+s.apply(this,arguments),y=Math.min(C,Math.max(-C,i.apply(this,arguments)-v)),g,m=Math.min(Math.abs(y)/c,o.apply(this,arguments)),b=m*(y<0?-1:1),x;for(a=0;a<c;++a){if((x=f[d[a]=a]=+t(r[a],a,r))>0){l+=x}}if(e!=null)d.sort((function(t,n){return e(f[t],f[n])}));else if(n!=null)d.sort((function(t,e){return n(r[t],r[e])}));for(a=0,u=l?(y-c*b)/l:0;a<c;++a,v=g){h=d[a],x=f[h],g=v+(x>0?x*u:0)+b,f[h]={data:r[h],index:a,value:x,startAngle:v,endAngle:g,padAngle:m}}return f}r.value=function(e){return arguments.length?(t=typeof e==="function"?e:f(+e),r):t};r.sortValues=function(t){return arguments.length?(e=t,n=null,r):e};r.sort=function(t){return arguments.length?(n=t,e=null,r):n};r.startAngle=function(t){return arguments.length?(s=typeof t==="function"?t:f(+t),r):s};r.endAngle=function(t){return arguments.length?(i=typeof t==="function"?t:f(+t),r):i};r.padAngle=function(t){return arguments.length?(o=typeof t==="function"?t:f(+t),r):o};return r}const N=()=>`@media (forced-colors: active){.sc-ds-chart-donut:root,.sc-ds-chart-donut-h,.ds-forced-colors-scope.sc-ds-chart-donut{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.sc-ds-chart-donut-h{display:inline-block;font-family:var(--typography-font-family);user-select:none}.chart-donut--fill.sc-ds-chart-donut-h{display:block;width:100%;height:100%;min-width:0;min-height:0}.chart-donut__wrapper.sc-ds-chart-donut{position:relative;overflow:visible}.chart-donut--fill.sc-ds-chart-donut-h .chart-donut__wrapper.sc-ds-chart-donut{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.chart-donut__svg.sc-ds-chart-donut path.sc-ds-chart-donut{cursor:default;transition:opacity var(--effect-motion-short-2)}.chart-donut__slice--dimmed.sc-ds-chart-donut{opacity:var(--effect-opacity-medium)}@media (prefers-reduced-motion: reduce){.chart-donut__svg.sc-ds-chart-donut path.sc-ds-chart-donut{transition:none}}.chart-donut__svg.sc-ds-chart-donut path.sc-ds-chart-donut:focus-visible{outline:none;stroke:var(--color-interaction-focus);stroke-width:var(--dimension-stroke-width-025);vector-effect:non-scaling-stroke}.chart-donut__center-value.sc-ds-chart-donut{fill:var(--color-foreground-primary);font-family:var(--typography-font-family);font-size:var(--typography-fontsize-xl);line-height:var(--typography-lineheight-xl);font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-negative-double);cursor:default;pointer-events:none}.chart-donut__center-caption.sc-ds-chart-donut{fill:var(--color-foreground-secondary);font-family:var(--typography-font-family);font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md);font-weight:var(--typography-weight-regular);letter-spacing:var(--typography-letterspacing-negative-half);cursor:default;pointer-events:none}@media (forced-colors: active){.chart-donut__svg.sc-ds-chart-donut path.sc-ds-chart-donut{forced-color-adjust:none}.chart-donut__svg.sc-ds-chart-donut path.sc-ds-chart-donut:focus-visible{stroke:var(--ds-forced-color-selected)}}`;const O=0;const G=.82;const K=128;const V=t(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}this.dsSliceHover=n(this,"dsSliceHover");this.noDataLabel="No data";this.data=[];this.thickness=h.size200;this.cornerRadius=h.radius025;this.gap=1;this.showTooltip=true;this.activeLabel=null;this.hoveredLabel=null;this.displayedValueText="";this.displayedCaptionText="";this.measuredSize=K;this.tooltipX=0;this.tooltipY=0;this.resizeObserver=null}get isFillMode(){return this.size==null||!Number.isFinite(this.size)||this.size<=0}get fillMinPx(){return u(h.donutFillMin,K)}get fillMaxPx(){return u(h.donutFillMax,192)}clampFillSize(t){const e=this.fillMinPx;const n=this.fillMaxPx;if(!(t>0))return e;return Math.round(Math.min(n,Math.max(e,t)))}get resolvedSize(){if(!this.isFillMode)return this.size;return this.clampFillSize(this.measuredSize)}componentDidLoad(){this.syncResizeObserver()}onSizePropChange(){this.syncResizeObserver()}disconnectedCallback(){this.teardownResizeObserver()}syncResizeObserver(){this.teardownResizeObserver();if(!this.isFillMode)return;const t=this.el;if(!t||typeof ResizeObserver==="undefined")return;this.resizeObserver=new ResizeObserver((t=>{const e=t[0];if(!e)return;this.applyAvailableSize(e.contentRect.width,e.contentRect.height)}));this.resizeObserver.observe(t);this.measureHost()}measureHost(){const t=this.el.getBoundingClientRect();this.applyAvailableSize(t.width,t.height)}applyAvailableSize(t,e){const n=Math.floor(Math.min(t,e));if(n>0&&n!==this.measuredSize){this.measuredSize=n}}teardownResizeObserver(){this.resizeObserver?.disconnect();this.resizeObserver=null}handleHover(t){this.hoveredLabel=t?.label??null;this.dsSliceHover.emit(t)}get tooltipDatum(){if(!this.showTooltip||this.hoveredLabel==null)return null;return this.data.find((t=>t.label===this.hoveredLabel))??null}updateTooltipFromPointer(t){if(!this.showTooltip)return;const e=this.el.querySelector(".chart-donut__wrapper");if(!e)return;const n=e.getBoundingClientRect();this.tooltipX=t.clientX-n.left;this.tooltipY=t.clientY-n.top}updateTooltipFromSvgPoint(t,e,n,s){if(!this.showTooltip)return;const i=this.el.querySelector(".chart-donut__wrapper");const o=t.ownerSVGElement;if(!i||!o)return;const r=i.getBoundingClientRect();const a=o.getBoundingClientRect();this.tooltipX=a.left-r.left+e*(a.width/s);this.tooltipY=a.top-r.top+n*(a.height/s)}componentDidRender(){if(this.isFillMode&&!this.resizeObserver){this.syncResizeObserver()}const t=this.resolvedSize;const e=t/2;const n=u(this.thickness,h.size200);const s=e-n;const i=s*2*G;const o=this.data.reduce(((t,e)=>t+e.value),0);const r=this.centerValue??l(o,this.locale);if(this.valueTextEl){const t=v(this.valueTextEl,r,i);if(t!==this.displayedValueText)this.displayedValueText=t;else this.valueTextEl.textContent=t}const a=this.centerCaption??"";if(this.captionTextEl&&a){const t=v(this.captionTextEl,a,i);if(t!==this.displayedCaptionText)this.displayedCaptionText=t;else this.captionTextEl.textContent=t}}render(){const t=this.resolvedSize;const e=t/2;const n=u(this.thickness,h.size200);const o=u(this.cornerRadius,h.radius025);const a=e-n;const c=this.data.reduce(((t,e)=>t+e.value),0);const d=c<=0;const f=this.activeLabel??this.hoveredLabel;const p=E().innerRadius(a).outerRadius(e).cornerRadius(o).padAngle(this.gap*Math.PI/180);const v=d?[]:D().value((t=>t.value)).sort(null)(this.data);const y=d?E().innerRadius(a).outerRadius(e)({startAngle:0,endAngle:Math.PI*2}):null;const g=u(h.lineheightXl,32);const m=u(h.lineheightMd,20);const b=this.centerCaption?e-(O+m)/2:e;const x=e+(g+O)/2;const _=this.centerValue??l(c,this.locale);const M=this.centerCaption??"";const w=this.isFillMode;return s(i,{key:"34932019fbc0ddbb3c696831c66e8c45eb71847a",class:{"chart-donut":true,"chart-donut--fill":w,"chart-donut--fixed":!w},style:!w?{width:`${t}px`,height:`${t}px`}:undefined},s("div",{key:"9e69474dfca77a5ea83bb3628abdc8d6110b05fc",class:"chart-donut__wrapper",style:!w?{width:`${t}px`,height:`${t}px`}:undefined},s("svg",{key:"5bf722efba962b1237beae1c416da5ab2114882c",class:"chart-donut__svg",viewBox:`0 0 ${t} ${t}`,width:t,height:t,role:d?"img":undefined,"aria-label":d?this.noDataLabel:undefined},s("g",{key:"0648f10a26120b2b97a61355b39d2c09aa007002",transform:`translate(${e}, ${e})`},d?s("path",{d:y??undefined,fill:"var(--color-background-faint-neutral)","aria-hidden":"true"}):v.map(((n,i)=>{const o=this.data[i];const a=f!=null&&o.label!==f;const[c,h]=p.centroid(n);return s("path",{key:o.label,class:{"chart-donut__slice--dimmed":a},d:p(n)??undefined,fill:o.color??r(i),tabindex:0,role:"img","aria-label":`${o.label}: ${o.value}`,onMouseEnter:t=>{this.updateTooltipFromPointer(t);this.handleHover(o)},onMouseMove:t=>this.updateTooltipFromPointer(t),onMouseLeave:()=>this.handleHover(null),onFocus:n=>{this.updateTooltipFromSvgPoint(n.currentTarget,e+c,e+h,t);this.handleHover(o)},onBlur:()=>this.handleHover(null)})}))),s("text",{key:"a9fc55be17efe297ff286bbd1f23813ce5091ff7",class:"chart-donut__center-value",x:e,y:b,"text-anchor":"middle","dominant-baseline":"central",ref:t=>{this.valueTextEl=t??undefined}},this.displayedValueText||_),M&&s("text",{key:"9c6cba0b3151fe9ba47a7a5b62b31a4a81352401",class:"chart-donut__center-caption",x:e,y:x,"text-anchor":"middle","dominant-baseline":"central",ref:t=>{this.captionTextEl=t??undefined}},this.displayedCaptionText||M)),this.tooltipDatum&&s("ds-tooltip-data-viz",{key:"301537599f870238e7a033a8e5b1e296ac11f422",label:this.tooltipDatum.label,value:l(this.tooltipDatum.value,this.locale),x:this.tooltipX,y:this.tooltipY})))}get el(){return this}static get watchers(){return{size:[{onSizePropChange:0}]}}static get style(){return N()}},[2,"ds-chart-donut",{locale:[1],noDataLabel:[1,"no-data-label"],data:[16],size:[2],thickness:[8],cornerRadius:[8,"corner-radius"],gap:[2],showTooltip:[4,"show-tooltip"],centerValue:[1,"center-value"],centerCaption:[1,"center-caption"],activeLabel:[1,"active-label"],hoveredLabel:[32],displayedValueText:[32],displayedCaptionText:[32],measuredSize:[32],tooltipX:[32],tooltipY:[32]},undefined,{size:[{onSizePropChange:0}]}]);function Y(){if(typeof customElements==="undefined"){return}const t=["ds-chart-donut","ds-text","ds-tooltip-data-viz"];t.forEach((t=>{switch(t){case"ds-chart-donut":if(!customElements.get(o(t))){customElements.define(o(t),V)}break;case"ds-text":if(!customElements.get(o(t))){a()}break;case"ds-tooltip-data-viz":if(!customElements.get(o(t))){c()}break}}))}Y();const q=V;const I=Y;export{q as DsChartDonut,I as defineCustomElement};
 //# sourceMappingURL=ds-chart-donut.js.map

package/dist/components/ds-chart-donut.js.map

@@ -1 +1 @@
-{"version":3,"names":["truncateSvgTextToWidth","el","text","maxWidth","textContent","getComputedTextLength","lo","hi","length","mid","Math","ceil","slice","abs","atan2","cos","max","min","sin","sqrt","epsilon","pi","PI","halfPi","tau","acos","x","asin","arcInnerRadius","d","innerRadius","arcOuterRadius","outerRadius","arcStartAngle","startAngle","arcEndAngle","endAngle","arcPadAngle","padAngle","intersect","x0","y0","x1","y1","x2","y2","x3","y3","x10","y10","x32","y32","t","cornerTangents","r1","rc","cw","x01","y01","ox","oy","x11","y11","x00","y00","dx","dy","d2","r","D","cx0","cy0","cx1","cy1","dx0","dy0","dx1","dy1","cx","cy","arc","cornerRadius","constant","padRadius","context","path","withPath","buffer","r0","apply","this","arguments","a0","a1","da","moveTo","a01","a11","a00","a10","da0","da1","ap","rp","rc0","rc1","t0","t1","p0","p1","oc","ax","ay","bx","by","kc","lc","lineTo","closePath","centroid","a","_","descending","b","NaN","identity","pie","value","sortValues","sort","data","i","n","array","j","k","sum","index","Array","arcs","p","pa","v","chartDonutCss","CENTER_GAP_PX","CENTER_TEXT_SAFE_WIDTH_RATIO","FILL_FALLBACK_PX","ChartDonut","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","noDataLabel","thickness","TOKEN_DEFAULTS","size200","radius025","gap","showTooltip","activeLabel","hoveredLabel","displayedValueText","displayedCaptionText","measuredSize","tooltipX","tooltipY","resizeObserver","isFillMode","size","Number","isFinite","fillMinPx","resolveCssLengthPx","donutFillMin","fillMaxPx","donutFillMax","clampFillSize","availablePx","minPx","maxPx","round","resolvedSize","componentDidLoad","syncResizeObserver","onSizePropChange","disconnectedCallback","teardownResizeObserver","target","ResizeObserver","entries","entry","applyAvailableSize","contentRect","width","height","observe","measureHost","rect","getBoundingClientRect","available","floor","disconnect","handleHover","datum","label","dsSliceHover","emit","tooltipDatum","find","updateTooltipFromPointer","event","wrapper","querySelector","clientX","left","clientY","top","updateTooltipFromSvgPoint","svgX","svgY","viewBoxSize","svg","ownerSVGElement","wrapperRect","svgRect","componentDidRender","radius","thicknessPx","total","reduce","fullValueText","centerValue","formatCompactNumber","locale","valueTextEl","truncated","fullCaptionText","centerCaption","captionTextEl","render","cornerRadiusPx","isEmpty","highlightLabel","arcGenerator","slices","emptyRingPath","valueLineHeight","lineheightXl","captionLineHeight","lineheightMd","centerValueY","centerCaptionY","fill","h","Host","key","class","style","undefined","viewBox","role","transform","map","isDimmed","centroidX","centroidY","color","categoryColor","tabindex","onMouseEnter","onMouseMove","onMouseLeave","onFocus","currentTarget","onBlur","y","ref"],"sources":["src/wc/utils/truncate-svg-text.ts","node_modules/d3-shape/src/math.js","node_modules/d3-shape/src/arc.js","node_modules/d3-shape/src/descending.js","node_modules/d3-shape/src/identity.js","node_modules/d3-shape/src/pie.js","src/wc/components/ChartDonut/ChartDonut.css?tag=ds-chart-donut&encapsulation=scoped","src/wc/components/ChartDonut/ChartDonut.tsx"],"sourcesContent":["/**\n * Binary-searches the longest prefix of `text` (plus an ellipsis) that fits within `maxWidth`\n * px when rendered by `el`, using the SVG `getComputedTextLength()` API for exact measurement —\n * `text-overflow: ellipsis` doesn't apply to raw SVG `<text>` nodes.\n *\n * Mutates `el.textContent` during measurement; the caller's next render (driven by the\n * returned string going into state) overwrites it with the final value.\n */\nexport function truncateSvgTextToWidth(el: SVGTextElement, text: string, maxWidth: number): string {\n  el.textContent = text;\n  if (maxWidth <= 0 || el.getComputedTextLength() <= maxWidth) return text;\n\n  let lo = 0;\n  let hi = text.length;\n  while (lo < hi) {\n    const mid = Math.ceil((lo + hi) / 2);\n    el.textContent = `${text.slice(0, mid)}…`;\n    if (el.getComputedTextLength() <= maxWidth) {\n      lo = mid;\n    } else {\n      hi = mid - 1;\n    }\n  }\n  return lo > 0 ? `${text.slice(0, lo)}…` : '…';\n}\n","export const abs = Math.abs;\nexport const atan2 = Math.atan2;\nexport const cos = Math.cos;\nexport const max = Math.max;\nexport const min = Math.min;\nexport const sin = Math.sin;\nexport const sqrt = Math.sqrt;\n\nexport const epsilon = 1e-12;\nexport const pi = Math.PI;\nexport const halfPi = pi / 2;\nexport const tau = 2 * pi;\n\nexport function acos(x) {\n  return x > 1 ? 0 : x < -1 ? pi : Math.acos(x);\n}\n\nexport function asin(x) {\n  return x >= 1 ? halfPi : x <= -1 ? -halfPi : Math.asin(x);\n}\n","import constant from \"./constant.js\";\nimport {abs, acos, asin, atan2, cos, epsilon, halfPi, max, min, pi, sin, sqrt, tau} from \"./math.js\";\nimport {withPath} from \"./path.js\";\n\nfunction arcInnerRadius(d) {\n  return d.innerRadius;\n}\n\nfunction arcOuterRadius(d) {\n  return d.outerRadius;\n}\n\nfunction arcStartAngle(d) {\n  return d.startAngle;\n}\n\nfunction arcEndAngle(d) {\n  return d.endAngle;\n}\n\nfunction arcPadAngle(d) {\n  return d && d.padAngle; // Note: optional!\n}\n\nfunction intersect(x0, y0, x1, y1, x2, y2, x3, y3) {\n  var x10 = x1 - x0, y10 = y1 - y0,\n      x32 = x3 - x2, y32 = y3 - y2,\n      t = y32 * x10 - x32 * y10;\n  if (t * t < epsilon) return;\n  t = (x32 * (y0 - y2) - y32 * (x0 - x2)) / t;\n  return [x0 + t * x10, y0 + t * y10];\n}\n\n// Compute perpendicular offset line of length rc.\n// http://mathworld.wolfram.com/Circle-LineIntersection.html\nfunction cornerTangents(x0, y0, x1, y1, r1, rc, cw) {\n  var x01 = x0 - x1,\n      y01 = y0 - y1,\n      lo = (cw ? rc : -rc) / sqrt(x01 * x01 + y01 * y01),\n      ox = lo * y01,\n      oy = -lo * x01,\n      x11 = x0 + ox,\n      y11 = y0 + oy,\n      x10 = x1 + ox,\n      y10 = y1 + oy,\n      x00 = (x11 + x10) / 2,\n      y00 = (y11 + y10) / 2,\n      dx = x10 - x11,\n      dy = y10 - y11,\n      d2 = dx * dx + dy * dy,\n      r = r1 - rc,\n      D = x11 * y10 - x10 * y11,\n      d = (dy < 0 ? -1 : 1) * sqrt(max(0, r * r * d2 - D * D)),\n      cx0 = (D * dy - dx * d) / d2,\n      cy0 = (-D * dx - dy * d) / d2,\n      cx1 = (D * dy + dx * d) / d2,\n      cy1 = (-D * dx + dy * d) / d2,\n      dx0 = cx0 - x00,\n      dy0 = cy0 - y00,\n      dx1 = cx1 - x00,\n      dy1 = cy1 - y00;\n\n  // Pick the closer of the two intersection points.\n  // TODO Is there a faster way to determine which intersection to use?\n  if (dx0 * dx0 + dy0 * dy0 > dx1 * dx1 + dy1 * dy1) cx0 = cx1, cy0 = cy1;\n\n  return {\n    cx: cx0,\n    cy: cy0,\n    x01: -ox,\n    y01: -oy,\n    x11: cx0 * (r1 / r - 1),\n    y11: cy0 * (r1 / r - 1)\n  };\n}\n\nexport default function() {\n  var innerRadius = arcInnerRadius,\n      outerRadius = arcOuterRadius,\n      cornerRadius = constant(0),\n      padRadius = null,\n      startAngle = arcStartAngle,\n      endAngle = arcEndAngle,\n      padAngle = arcPadAngle,\n      context = null,\n      path = withPath(arc);\n\n  function arc() {\n    var buffer,\n        r,\n        r0 = +innerRadius.apply(this, arguments),\n        r1 = +outerRadius.apply(this, arguments),\n        a0 = startAngle.apply(this, arguments) - halfPi,\n        a1 = endAngle.apply(this, arguments) - halfPi,\n        da = abs(a1 - a0),\n        cw = a1 > a0;\n\n    if (!context) context = buffer = path();\n\n    // Ensure that the outer radius is always larger than the inner radius.\n    if (r1 < r0) r = r1, r1 = r0, r0 = r;\n\n    // Is it a point?\n    if (!(r1 > epsilon)) context.moveTo(0, 0);\n\n    // Or is it a circle or annulus?\n    else if (da > tau - epsilon) {\n      context.moveTo(r1 * cos(a0), r1 * sin(a0));\n      context.arc(0, 0, r1, a0, a1, !cw);\n      if (r0 > epsilon) {\n        context.moveTo(r0 * cos(a1), r0 * sin(a1));\n        context.arc(0, 0, r0, a1, a0, cw);\n      }\n    }\n\n    // Or is it a circular or annular sector?\n    else {\n      var a01 = a0,\n          a11 = a1,\n          a00 = a0,\n          a10 = a1,\n          da0 = da,\n          da1 = da,\n          ap = padAngle.apply(this, arguments) / 2,\n          rp = (ap > epsilon) && (padRadius ? +padRadius.apply(this, arguments) : sqrt(r0 * r0 + r1 * r1)),\n          rc = min(abs(r1 - r0) / 2, +cornerRadius.apply(this, arguments)),\n          rc0 = rc,\n          rc1 = rc,\n          t0,\n          t1;\n\n      // Apply padding? Note that since r1 ≥ r0, da1 ≥ da0.\n      if (rp > epsilon) {\n        var p0 = asin(rp / r0 * sin(ap)),\n            p1 = asin(rp / r1 * sin(ap));\n        if ((da0 -= p0 * 2) > epsilon) p0 *= (cw ? 1 : -1), a00 += p0, a10 -= p0;\n        else da0 = 0, a00 = a10 = (a0 + a1) / 2;\n        if ((da1 -= p1 * 2) > epsilon) p1 *= (cw ? 1 : -1), a01 += p1, a11 -= p1;\n        else da1 = 0, a01 = a11 = (a0 + a1) / 2;\n      }\n\n      var x01 = r1 * cos(a01),\n          y01 = r1 * sin(a01),\n          x10 = r0 * cos(a10),\n          y10 = r0 * sin(a10);\n\n      // Apply rounded corners?\n      if (rc > epsilon) {\n        var x11 = r1 * cos(a11),\n            y11 = r1 * sin(a11),\n            x00 = r0 * cos(a00),\n            y00 = r0 * sin(a00),\n            oc;\n\n        // Restrict the corner radius according to the sector angle. If this\n        // intersection fails, it’s probably because the arc is too small, so\n        // disable the corner radius entirely.\n        if (da < pi) {\n          if (oc = intersect(x01, y01, x00, y00, x11, y11, x10, y10)) {\n            var ax = x01 - oc[0],\n                ay = y01 - oc[1],\n                bx = x11 - oc[0],\n                by = y11 - oc[1],\n                kc = 1 / sin(acos((ax * bx + ay * by) / (sqrt(ax * ax + ay * ay) * sqrt(bx * bx + by * by))) / 2),\n                lc = sqrt(oc[0] * oc[0] + oc[1] * oc[1]);\n            rc0 = min(rc, (r0 - lc) / (kc - 1));\n            rc1 = min(rc, (r1 - lc) / (kc + 1));\n          } else {\n            rc0 = rc1 = 0;\n          }\n        }\n      }\n\n      // Is the sector collapsed to a line?\n      if (!(da1 > epsilon)) context.moveTo(x01, y01);\n\n      // Does the sector’s outer ring have rounded corners?\n      else if (rc1 > epsilon) {\n        t0 = cornerTangents(x00, y00, x01, y01, r1, rc1, cw);\n        t1 = cornerTangents(x11, y11, x10, y10, r1, rc1, cw);\n\n        context.moveTo(t0.cx + t0.x01, t0.cy + t0.y01);\n\n        // Have the corners merged?\n        if (rc1 < rc) context.arc(t0.cx, t0.cy, rc1, atan2(t0.y01, t0.x01), atan2(t1.y01, t1.x01), !cw);\n\n        // Otherwise, draw the two corners and the ring.\n        else {\n          context.arc(t0.cx, t0.cy, rc1, atan2(t0.y01, t0.x01), atan2(t0.y11, t0.x11), !cw);\n          context.arc(0, 0, r1, atan2(t0.cy + t0.y11, t0.cx + t0.x11), atan2(t1.cy + t1.y11, t1.cx + t1.x11), !cw);\n          context.arc(t1.cx, t1.cy, rc1, atan2(t1.y11, t1.x11), atan2(t1.y01, t1.x01), !cw);\n        }\n      }\n\n      // Or is the outer ring just a circular arc?\n      else context.moveTo(x01, y01), context.arc(0, 0, r1, a01, a11, !cw);\n\n      // Is there no inner ring, and it’s a circular sector?\n      // Or perhaps it’s an annular sector collapsed due to padding?\n      if (!(r0 > epsilon) || !(da0 > epsilon)) context.lineTo(x10, y10);\n\n      // Does the sector’s inner ring (or point) have rounded corners?\n      else if (rc0 > epsilon) {\n        t0 = cornerTangents(x10, y10, x11, y11, r0, -rc0, cw);\n        t1 = cornerTangents(x01, y01, x00, y00, r0, -rc0, cw);\n\n        context.lineTo(t0.cx + t0.x01, t0.cy + t0.y01);\n\n        // Have the corners merged?\n        if (rc0 < rc) context.arc(t0.cx, t0.cy, rc0, atan2(t0.y01, t0.x01), atan2(t1.y01, t1.x01), !cw);\n\n        // Otherwise, draw the two corners and the ring.\n        else {\n          context.arc(t0.cx, t0.cy, rc0, atan2(t0.y01, t0.x01), atan2(t0.y11, t0.x11), !cw);\n          context.arc(0, 0, r0, atan2(t0.cy + t0.y11, t0.cx + t0.x11), atan2(t1.cy + t1.y11, t1.cx + t1.x11), cw);\n          context.arc(t1.cx, t1.cy, rc0, atan2(t1.y11, t1.x11), atan2(t1.y01, t1.x01), !cw);\n        }\n      }\n\n      // Or is the inner ring just a circular arc?\n      else context.arc(0, 0, r0, a10, a00, cw);\n    }\n\n    context.closePath();\n\n    if (buffer) return context = null, buffer + \"\" || null;\n  }\n\n  arc.centroid = function() {\n    var r = (+innerRadius.apply(this, arguments) + +outerRadius.apply(this, arguments)) / 2,\n        a = (+startAngle.apply(this, arguments) + +endAngle.apply(this, arguments)) / 2 - pi / 2;\n    return [cos(a) * r, sin(a) * r];\n  };\n\n  arc.innerRadius = function(_) {\n    return arguments.length ? (innerRadius = typeof _ === \"function\" ? _ : constant(+_), arc) : innerRadius;\n  };\n\n  arc.outerRadius = function(_) {\n    return arguments.length ? (outerRadius = typeof _ === \"function\" ? _ : constant(+_), arc) : outerRadius;\n  };\n\n  arc.cornerRadius = function(_) {\n    return arguments.length ? (cornerRadius = typeof _ === \"function\" ? _ : constant(+_), arc) : cornerRadius;\n  };\n\n  arc.padRadius = function(_) {\n    return arguments.length ? (padRadius = _ == null ? null : typeof _ === \"function\" ? _ : constant(+_), arc) : padRadius;\n  };\n\n  arc.startAngle = function(_) {\n    return arguments.length ? (startAngle = typeof _ === \"function\" ? _ : constant(+_), arc) : startAngle;\n  };\n\n  arc.endAngle = function(_) {\n    return arguments.length ? (endAngle = typeof _ === \"function\" ? _ : constant(+_), arc) : endAngle;\n  };\n\n  arc.padAngle = function(_) {\n    return arguments.length ? (padAngle = typeof _ === \"function\" ? _ : constant(+_), arc) : padAngle;\n  };\n\n  arc.context = function(_) {\n    return arguments.length ? ((context = _ == null ? null : _), arc) : context;\n  };\n\n  return arc;\n}\n","export default function(a, b) {\n  return b < a ? -1 : b > a ? 1 : b >= a ? 0 : NaN;\n}\n","export default function(d) {\n  return d;\n}\n","import array from \"./array.js\";\nimport constant from \"./constant.js\";\nimport descending from \"./descending.js\";\nimport identity from \"./identity.js\";\nimport {tau} from \"./math.js\";\n\nexport default function() {\n  var value = identity,\n      sortValues = descending,\n      sort = null,\n      startAngle = constant(0),\n      endAngle = constant(tau),\n      padAngle = constant(0);\n\n  function pie(data) {\n    var i,\n        n = (data = array(data)).length,\n        j,\n        k,\n        sum = 0,\n        index = new Array(n),\n        arcs = new Array(n),\n        a0 = +startAngle.apply(this, arguments),\n        da = Math.min(tau, Math.max(-tau, endAngle.apply(this, arguments) - a0)),\n        a1,\n        p = Math.min(Math.abs(da) / n, padAngle.apply(this, arguments)),\n        pa = p * (da < 0 ? -1 : 1),\n        v;\n\n    for (i = 0; i < n; ++i) {\n      if ((v = arcs[index[i] = i] = +value(data[i], i, data)) > 0) {\n        sum += v;\n      }\n    }\n\n    // Optionally sort the arcs by previously-computed values or by data.\n    if (sortValues != null) index.sort(function(i, j) { return sortValues(arcs[i], arcs[j]); });\n    else if (sort != null) index.sort(function(i, j) { return sort(data[i], data[j]); });\n\n    // Compute the arcs! They are stored in the original data's order.\n    for (i = 0, k = sum ? (da - n * pa) / sum : 0; i < n; ++i, a0 = a1) {\n      j = index[i], v = arcs[j], a1 = a0 + (v > 0 ? v * k : 0) + pa, arcs[j] = {\n        data: data[j],\n        index: i,\n        value: v,\n        startAngle: a0,\n        endAngle: a1,\n        padAngle: p\n      };\n    }\n\n    return arcs;\n  }\n\n  pie.value = function(_) {\n    return arguments.length ? (value = typeof _ === \"function\" ? _ : constant(+_), pie) : value;\n  };\n\n  pie.sortValues = function(_) {\n    return arguments.length ? (sortValues = _, sort = null, pie) : sortValues;\n  };\n\n  pie.sort = function(_) {\n    return arguments.length ? (sort = _, sortValues = null, pie) : sort;\n  };\n\n  pie.startAngle = function(_) {\n    return arguments.length ? (startAngle = typeof _ === \"function\" ? _ : constant(+_), pie) : startAngle;\n  };\n\n  pie.endAngle = function(_) {\n    return arguments.length ? (endAngle = typeof _ === \"function\" ? _ : constant(+_), pie) : endAngle;\n  };\n\n  pie.padAngle = function(_) {\n    return arguments.length ? (padAngle = typeof _ === \"function\" ? _ : constant(+_), pie) : padAngle;\n  };\n\n  return pie;\n}\n",":host {\n  display: inline-block;\n  font-family: var(--typography-font-family);\n  user-select: none;\n}\n\n:host(.chart-donut--fill) {\n  display: block;\n  width: 100%;\n  height: 100%;\n  min-width: 0;\n  min-height: 0;\n}\n\n.chart-donut__wrapper {\n  position: relative;\n  overflow: visible;\n}\n\n:host(.chart-donut--fill) .chart-donut__wrapper {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.chart-donut__svg path {\n  cursor: default;\n  transition: opacity var(--effect-motion-short-2);\n}\n\n.chart-donut__slice--dimmed {\n  opacity: var(--effect-opacity-medium);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .chart-donut__svg path {\n    transition: none;\n  }\n}\n\n.chart-donut__svg path:focus-visible {\n  outline: none;\n  stroke: var(--color-interaction-focus);\n  stroke-width: var(--dimension-stroke-width-025);\n  vector-effect: non-scaling-stroke;\n}\n\n/* Matches ds-text text-title-large + emphasis (SVG cannot host ds-text). */\n.chart-donut__center-value {\n  fill: var(--color-foreground-primary);\n  font-family: var(--typography-font-family);\n  font-size: var(--typography-fontsize-xl);\n  line-height: var(--typography-lineheight-xl);\n  font-weight: var(--typography-weight-semibold);\n  letter-spacing: var(--typography-letterspacing-negative-double);\n  cursor: default;\n  pointer-events: none;\n}\n\n/* Matches ds-text text-body-medium regular. */\n.chart-donut__center-caption {\n  fill: var(--color-foreground-secondary);\n  font-family: var(--typography-font-family);\n  font-size: var(--typography-fontsize-md);\n  line-height: var(--typography-lineheight-md);\n  font-weight: var(--typography-weight-regular);\n  letter-spacing: var(--typography-letterspacing-negative-half);\n  cursor: default;\n  pointer-events: none;\n}\n","import { Component, Prop, State, Event, EventEmitter, Element, Watch, h, Host } from '@stencil/core';\nimport { arc, pie } from 'd3-shape';\nimport { categoryColor } from '../../utils/chart-colors';\nimport { formatCompactNumber, resolveCssLengthPx, truncateSvgTextToWidth, TOKEN_DEFAULTS } from '../../utils';\nimport type { ChartDatum } from '../../utils/chart-types';\n\n/** Gap between the center value and caption line boxes. */\nconst CENTER_GAP_PX = 0;\n/** Fraction of the inner-circle diameter center text is allowed to use before truncating. */\nconst CENTER_TEXT_SAFE_WIDTH_RATIO = 0.82;\n/** Fallback when filling before the first ResizeObserver measurement (matches fill min). */\nconst FILL_FALLBACK_PX = 128;\n\n@Component({\n  tag: 'ds-chart-donut',\n  styleUrl: 'ChartDonut.css',\n  scoped: true,\n})\nexport class ChartDonut {\n  @Prop() locale: string | undefined;\n  @Prop() noDataLabel: string = 'No data';\n  @Element() el!: HTMLElement;\n\n  /** Slices to render. Set as a JS property (not an HTML attribute). */\n  @Prop() data: ChartDatum[] = [];\n  /**\n   * Explicit diameter in px. When unset, the donut sizes to its container\n   * (ResizeObserver) clamped between `--dimension-size-base * 16` (128px) and\n   * `* 24` (192px), and stays centered in the leftover space. Prefer unset\n   * inside card layouts.\n   */\n  @Prop() size: number | undefined;\n  /** Ring thickness — number (px) or TokoMo length. Defaults to `--dimension-size-200` (16px). */\n  @Prop() thickness: number | string = TOKEN_DEFAULTS.size200;\n  /** Corner radius on each slice — number (px) or TokoMo length. Defaults to `--dimension-radius-025` (2px). */\n  @Prop() cornerRadius: number | string = TOKEN_DEFAULTS.radius025;\n  /** Gap between slices, in degrees. */\n  @Prop() gap: number = 1;\n  /**\n   * Show a chart-owned value callout for genuine pointer or keyboard focus.\n   * Disable when a visible legend already owns persistent label and value detail.\n   */\n  @Prop() showTooltip: boolean = true;\n  /** Primary center value; defaults to the sum of `data` values (e.g. \"187\", \"40.9%\"). */\n  @Prop() centerValue: string | undefined;\n  /** Secondary caption below the center value (e.g. \"Total\", \"Normal\"). Rendered uppercase. */\n  @Prop() centerCaption: string | undefined;\n  /**\n   * Externally controlled highlight, matched by `label` — e.g. drive this from a sibling\n   * `ds-chart-legend`'s `dsItemHover` event to keep chart and legend hover in sync.\n   * Falls back to this component's own pointer/focus hover when unset.\n   * Slice hover dims peer slices and emits `dsSliceHover` for legend sync. External\n   * highlight never opens the local tooltip.\n   */\n  @Prop() activeLabel: string | null = null;\n\n  @State() private hoveredLabel: string | null = null;\n  /** Center text, truncated with an ellipsis if it doesn't fit inside the inner circle. */\n  @State() private displayedValueText: string = '';\n  @State() private displayedCaptionText: string = '';\n  /** Measured fill diameter when `size` is unset. */\n  @State() private measuredSize: number = FILL_FALLBACK_PX;\n  @State() private tooltipX: number = 0;\n  @State() private tooltipY: number = 0;\n\n  /** Fires with the hovered/focused slice's datum, or `null` on leave/blur. */\n  @Event() dsSliceHover!: EventEmitter<ChartDatum | null>;\n\n  private valueTextEl?: SVGTextElement;\n  private captionTextEl?: SVGTextElement;\n  private resizeObserver: ResizeObserver | null = null;\n\n  private get isFillMode(): boolean {\n    return this.size == null || !Number.isFinite(this.size) || this.size <= 0;\n  }\n\n  private get fillMinPx(): number {\n    return resolveCssLengthPx(TOKEN_DEFAULTS.donutFillMin, FILL_FALLBACK_PX);\n  }\n\n  private get fillMaxPx(): number {\n    return resolveCssLengthPx(TOKEN_DEFAULTS.donutFillMax, 192);\n  }\n\n  /** Clamp available square side into the fill min/max band. */\n  private clampFillSize(availablePx: number): number {\n    const minPx = this.fillMinPx;\n    const maxPx = this.fillMaxPx;\n    if (!(availablePx > 0)) return minPx;\n    return Math.round(Math.min(maxPx, Math.max(minPx, availablePx)));\n  }\n\n  private get resolvedSize(): number {\n    if (!this.isFillMode) return this.size as number;\n    return this.clampFillSize(this.measuredSize);\n  }\n\n  componentDidLoad() {\n    this.syncResizeObserver();\n  }\n\n  @Watch('size')\n  onSizePropChange() {\n    this.syncResizeObserver();\n  }\n\n  disconnectedCallback() {\n    this.teardownResizeObserver();\n  }\n\n  private syncResizeObserver() {\n    this.teardownResizeObserver();\n    if (!this.isFillMode) return;\n    // Observe the host (which fills its parent), not the wrapper — the wrapper\n    // only wraps the SVG and would collapse to the clamped size, locking fill at min.\n    const target = this.el;\n    if (!target || typeof ResizeObserver === 'undefined') return;\n\n    this.resizeObserver = new ResizeObserver(entries => {\n      const entry = entries[0];\n      if (!entry) return;\n      this.applyAvailableSize(entry.contentRect.width, entry.contentRect.height);\n    });\n    this.resizeObserver.observe(target);\n    this.measureHost();\n  }\n\n  private measureHost() {\n    const rect = this.el.getBoundingClientRect();\n    this.applyAvailableSize(rect.width, rect.height);\n  }\n\n  private applyAvailableSize(width: number, height: number) {\n    const available = Math.floor(Math.min(width, height));\n    if (available > 0 && available !== this.measuredSize) {\n      this.measuredSize = available;\n    }\n  }\n\n  private teardownResizeObserver() {\n    this.resizeObserver?.disconnect();\n    this.resizeObserver = null;\n  }\n\n  private handleHover(datum: ChartDatum | null) {\n    this.hoveredLabel = datum?.label ?? null;\n    this.dsSliceHover.emit(datum);\n  }\n\n  private get tooltipDatum(): ChartDatum | null {\n    if (!this.showTooltip || this.hoveredLabel == null) return null;\n    return this.data.find(datum => datum.label === this.hoveredLabel) ?? null;\n  }\n\n  private updateTooltipFromPointer(event: MouseEvent) {\n    if (!this.showTooltip) return;\n    const wrapper = this.el.querySelector<HTMLElement>('.chart-donut__wrapper');\n    if (!wrapper) return;\n    const rect = wrapper.getBoundingClientRect();\n    this.tooltipX = event.clientX - rect.left;\n    this.tooltipY = event.clientY - rect.top;\n  }\n\n  private updateTooltipFromSvgPoint(\n    path: SVGPathElement,\n    svgX: number,\n    svgY: number,\n    viewBoxSize: number,\n  ) {\n    if (!this.showTooltip) return;\n    const wrapper = this.el.querySelector<HTMLElement>('.chart-donut__wrapper');\n    const svg = path.ownerSVGElement;\n    if (!wrapper || !svg) return;\n    const wrapperRect = wrapper.getBoundingClientRect();\n    const svgRect = svg.getBoundingClientRect();\n    this.tooltipX = svgRect.left - wrapperRect.left + svgX * (svgRect.width / viewBoxSize);\n    this.tooltipY = svgRect.top - wrapperRect.top + svgY * (svgRect.height / viewBoxSize);\n  }\n\n  componentDidRender() {\n    // Re-bind after HMR when DidLoad's observer was dropped.\n    if (this.isFillMode && !this.resizeObserver) {\n      this.syncResizeObserver();\n    }\n\n    const size = this.resolvedSize;\n    const radius = size / 2;\n    const thicknessPx = resolveCssLengthPx(this.thickness, TOKEN_DEFAULTS.size200);\n    const innerRadius = radius - thicknessPx;\n    const maxWidth = innerRadius * 2 * CENTER_TEXT_SAFE_WIDTH_RATIO;\n    const total = this.data.reduce((sum, d) => sum + d.value, 0);\n\n    const fullValueText = this.centerValue ?? formatCompactNumber(total, this.locale);\n    if (this.valueTextEl) {\n      const truncated = truncateSvgTextToWidth(this.valueTextEl, fullValueText, maxWidth);\n      if (truncated !== this.displayedValueText) this.displayedValueText = truncated;\n      else this.valueTextEl.textContent = truncated;\n    }\n\n    const fullCaptionText = this.centerCaption ?? '';\n    if (this.captionTextEl && fullCaptionText) {\n      const truncated = truncateSvgTextToWidth(this.captionTextEl, fullCaptionText, maxWidth);\n      if (truncated !== this.displayedCaptionText) this.displayedCaptionText = truncated;\n      else this.captionTextEl.textContent = truncated;\n    }\n  }\n\n  render() {\n    const size = this.resolvedSize;\n    const radius = size / 2;\n    const thicknessPx = resolveCssLengthPx(this.thickness, TOKEN_DEFAULTS.size200);\n    const cornerRadiusPx = resolveCssLengthPx(this.cornerRadius, TOKEN_DEFAULTS.radius025);\n    const innerRadius = radius - thicknessPx;\n    const total = this.data.reduce((sum, d) => sum + d.value, 0);\n    // d3's pie() divides each value by the total to get an angle — with an all-zero total\n    // that's 0/0, producing NaN angles and broken paths. Render a flat neutral ring instead.\n    const isEmpty = total <= 0;\n    // Highlight/dim from either this component's own hover or an externally-synced label\n    // (e.g. a sibling ds-chart-legend row).\n    const highlightLabel = this.activeLabel ?? this.hoveredLabel;\n\n    const arcGenerator = arc<{ startAngle: number; endAngle: number }>()\n      .innerRadius(innerRadius)\n      .outerRadius(radius)\n      .cornerRadius(cornerRadiusPx)\n      .padAngle((this.gap * Math.PI) / 180);\n\n    const slices = isEmpty\n      ? []\n      : pie<ChartDatum>()\n          .value(d => d.value)\n          .sort(null)(this.data);\n\n    const emptyRingPath = isEmpty\n      ? arc<{ startAngle: number; endAngle: number }>()\n          .innerRadius(innerRadius)\n          .outerRadius(radius)({ startAngle: 0, endAngle: Math.PI * 2 })\n      : null;\n\n    // Precise vertical centering for the two-line center text, using the real line-height of\n    // text-title-large (value) and text-body-medium (caption) rather than eyeballed em offsets.\n    const valueLineHeight = resolveCssLengthPx(TOKEN_DEFAULTS.lineheightXl, 32);\n    const captionLineHeight = resolveCssLengthPx(TOKEN_DEFAULTS.lineheightMd, 20);\n    const centerValueY = this.centerCaption ? radius - (CENTER_GAP_PX + captionLineHeight) / 2 : radius;\n    const centerCaptionY = radius + (valueLineHeight + CENTER_GAP_PX) / 2;\n\n    // Show the full text before the post-render truncation pass has measured it (avoids a blank first paint).\n    const fullValueText = this.centerValue ?? formatCompactNumber(total, this.locale);\n    const fullCaptionText = this.centerCaption ?? '';\n    const fill = this.isFillMode;\n\n    return (\n      <Host\n        class={{\n          'chart-donut': true,\n          'chart-donut--fill': fill,\n          'chart-donut--fixed': !fill,\n        }}\n        style={!fill ? { width: `${size}px`, height: `${size}px` } : undefined}\n      >\n        <div\n          class=\"chart-donut__wrapper\"\n          style={!fill ? { width: `${size}px`, height: `${size}px` } : undefined}\n        >\n          <svg\n            class=\"chart-donut__svg\"\n            viewBox={`0 0 ${size} ${size}`}\n            width={size}\n            height={size}\n            role={isEmpty ? 'img' : undefined}\n            aria-label={isEmpty ? this.noDataLabel : undefined}\n          >\n            <g transform={`translate(${radius}, ${radius})`}>\n              {isEmpty ? (\n                <path d={emptyRingPath ?? undefined} fill=\"var(--color-background-faint-neutral)\" aria-hidden=\"true\" />\n              ) : (\n                slices.map((slice, i) => {\n                  const datum = this.data[i];\n                  const isDimmed = highlightLabel != null && datum.label !== highlightLabel;\n                  const [centroidX, centroidY] = arcGenerator.centroid(slice);\n                  return (\n                    <path\n                      key={datum.label}\n                      class={{ 'chart-donut__slice--dimmed': isDimmed }}\n                      d={arcGenerator(slice) ?? undefined}\n                      fill={datum.color ?? categoryColor(i)}\n                      tabindex={0}\n                      role=\"img\"\n                      aria-label={`${datum.label}: ${datum.value}`}\n                      onMouseEnter={(event: MouseEvent) => {\n                        this.updateTooltipFromPointer(event);\n                        this.handleHover(datum);\n                      }}\n                      onMouseMove={(event: MouseEvent) => this.updateTooltipFromPointer(event)}\n                      onMouseLeave={() => this.handleHover(null)}\n                      onFocus={(event: FocusEvent) => {\n                        this.updateTooltipFromSvgPoint(\n                          event.currentTarget as SVGPathElement,\n                          radius + centroidX,\n                          radius + centroidY,\n                          size,\n                        );\n                        this.handleHover(datum);\n                      }}\n                      onBlur={() => this.handleHover(null)}\n                    />\n                  );\n                })\n              )}\n            </g>\n            <text\n              class=\"chart-donut__center-value\"\n              x={radius}\n              y={centerValueY}\n              text-anchor=\"middle\"\n              dominant-baseline=\"central\"\n              ref={el => {\n                this.valueTextEl = (el as SVGTextElement) ?? undefined;\n              }}\n            >\n              {this.displayedValueText || fullValueText}\n            </text>\n            {fullCaptionText && (\n              <text\n                class=\"chart-donut__center-caption\"\n                x={radius}\n                y={centerCaptionY}\n                text-anchor=\"middle\"\n                dominant-baseline=\"central\"\n                ref={el => {\n                  this.captionTextEl = (el as SVGTextElement) ?? undefined;\n                }}\n              >\n                {this.displayedCaptionText || fullCaptionText}\n              </text>\n            )}\n          </svg>\n          {this.tooltipDatum && (\n            <ds-tooltip-data-viz\n              label={this.tooltipDatum.label}\n              value={formatCompactNumber(this.tooltipDatum.value, this.locale)}\n              x={this.tooltipX}\n              y={this.tooltipY}\n            />\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["truncateSvgTextToWidth","el","text","maxWidth","textContent","getComputedTextLength","lo","hi","length","mid","Math","ceil","slice","abs","atan2","cos","max","min","sin","sqrt","epsilon","pi","PI","halfPi","tau","acos","x","asin","arcInnerRadius","d","innerRadius","arcOuterRadius","outerRadius","arcStartAngle","startAngle","arcEndAngle","endAngle","arcPadAngle","padAngle","intersect","x0","y0","x1","y1","x2","y2","x3","y3","x10","y10","x32","y32","t","cornerTangents","r1","rc","cw","x01","y01","ox","oy","x11","y11","x00","y00","dx","dy","d2","r","D","cx0","cy0","cx1","cy1","dx0","dy0","dx1","dy1","cx","cy","arc","cornerRadius","constant","padRadius","context","path","withPath","buffer","r0","apply","this","arguments","a0","a1","da","moveTo","a01","a11","a00","a10","da0","da1","ap","rp","rc0","rc1","t0","t1","p0","p1","oc","ax","ay","bx","by","kc","lc","lineTo","closePath","centroid","a","_","descending","b","NaN","identity","pie","value","sortValues","sort","data","i","n","array","j","k","sum","index","Array","arcs","p","pa","v","chartDonutCss","CENTER_GAP_PX","CENTER_TEXT_SAFE_WIDTH_RATIO","FILL_FALLBACK_PX","ChartDonut","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","noDataLabel","thickness","TOKEN_DEFAULTS","size200","radius025","gap","showTooltip","activeLabel","hoveredLabel","displayedValueText","displayedCaptionText","measuredSize","tooltipX","tooltipY","resizeObserver","isFillMode","size","Number","isFinite","fillMinPx","resolveCssLengthPx","donutFillMin","fillMaxPx","donutFillMax","clampFillSize","availablePx","minPx","maxPx","round","resolvedSize","componentDidLoad","syncResizeObserver","onSizePropChange","disconnectedCallback","teardownResizeObserver","target","ResizeObserver","entries","entry","applyAvailableSize","contentRect","width","height","observe","measureHost","rect","getBoundingClientRect","available","floor","disconnect","handleHover","datum","label","dsSliceHover","emit","tooltipDatum","find","updateTooltipFromPointer","event","wrapper","querySelector","clientX","left","clientY","top","updateTooltipFromSvgPoint","svgX","svgY","viewBoxSize","svg","ownerSVGElement","wrapperRect","svgRect","componentDidRender","radius","thicknessPx","total","reduce","fullValueText","centerValue","formatCompactNumber","locale","valueTextEl","truncated","fullCaptionText","centerCaption","captionTextEl","render","cornerRadiusPx","isEmpty","highlightLabel","arcGenerator","slices","emptyRingPath","valueLineHeight","lineheightXl","captionLineHeight","lineheightMd","centerValueY","centerCaptionY","fill","h","Host","key","class","style","undefined","viewBox","role","transform","map","isDimmed","centroidX","centroidY","color","categoryColor","tabindex","onMouseEnter","onMouseMove","onMouseLeave","onFocus","currentTarget","onBlur","y","ref"],"sources":["src/wc/utils/truncate-svg-text.ts","node_modules/d3-shape/src/math.js","node_modules/d3-shape/src/arc.js","node_modules/d3-shape/src/descending.js","node_modules/d3-shape/src/identity.js","node_modules/d3-shape/src/pie.js","src/wc/components/ChartDonut/ChartDonut.css?tag=ds-chart-donut&encapsulation=scoped","src/wc/components/ChartDonut/ChartDonut.tsx"],"sourcesContent":["/**\n * Binary-searches the longest prefix of `text` (plus an ellipsis) that fits within `maxWidth`\n * px when rendered by `el`, using the SVG `getComputedTextLength()` API for exact measurement —\n * `text-overflow: ellipsis` doesn't apply to raw SVG `<text>` nodes.\n *\n * Mutates `el.textContent` during measurement; the caller's next render (driven by the\n * returned string going into state) overwrites it with the final value.\n */\nexport function truncateSvgTextToWidth(el: SVGTextElement, text: string, maxWidth: number): string {\n  el.textContent = text;\n  if (maxWidth <= 0 || el.getComputedTextLength() <= maxWidth) return text;\n\n  let lo = 0;\n  let hi = text.length;\n  while (lo < hi) {\n    const mid = Math.ceil((lo + hi) / 2);\n    el.textContent = `${text.slice(0, mid)}…`;\n    if (el.getComputedTextLength() <= maxWidth) {\n      lo = mid;\n    } else {\n      hi = mid - 1;\n    }\n  }\n  return lo > 0 ? `${text.slice(0, lo)}…` : '…';\n}\n","export const abs = Math.abs;\nexport const atan2 = Math.atan2;\nexport const cos = Math.cos;\nexport const max = Math.max;\nexport const min = Math.min;\nexport const sin = Math.sin;\nexport const sqrt = Math.sqrt;\n\nexport const epsilon = 1e-12;\nexport const pi = Math.PI;\nexport const halfPi = pi / 2;\nexport const tau = 2 * pi;\n\nexport function acos(x) {\n  return x > 1 ? 0 : x < -1 ? pi : Math.acos(x);\n}\n\nexport function asin(x) {\n  return x >= 1 ? halfPi : x <= -1 ? -halfPi : Math.asin(x);\n}\n","import constant from \"./constant.js\";\nimport {abs, acos, asin, atan2, cos, epsilon, halfPi, max, min, pi, sin, sqrt, tau} from \"./math.js\";\nimport {withPath} from \"./path.js\";\n\nfunction arcInnerRadius(d) {\n  return d.innerRadius;\n}\n\nfunction arcOuterRadius(d) {\n  return d.outerRadius;\n}\n\nfunction arcStartAngle(d) {\n  return d.startAngle;\n}\n\nfunction arcEndAngle(d) {\n  return d.endAngle;\n}\n\nfunction arcPadAngle(d) {\n  return d && d.padAngle; // Note: optional!\n}\n\nfunction intersect(x0, y0, x1, y1, x2, y2, x3, y3) {\n  var x10 = x1 - x0, y10 = y1 - y0,\n      x32 = x3 - x2, y32 = y3 - y2,\n      t = y32 * x10 - x32 * y10;\n  if (t * t < epsilon) return;\n  t = (x32 * (y0 - y2) - y32 * (x0 - x2)) / t;\n  return [x0 + t * x10, y0 + t * y10];\n}\n\n// Compute perpendicular offset line of length rc.\n// http://mathworld.wolfram.com/Circle-LineIntersection.html\nfunction cornerTangents(x0, y0, x1, y1, r1, rc, cw) {\n  var x01 = x0 - x1,\n      y01 = y0 - y1,\n      lo = (cw ? rc : -rc) / sqrt(x01 * x01 + y01 * y01),\n      ox = lo * y01,\n      oy = -lo * x01,\n      x11 = x0 + ox,\n      y11 = y0 + oy,\n      x10 = x1 + ox,\n      y10 = y1 + oy,\n      x00 = (x11 + x10) / 2,\n      y00 = (y11 + y10) / 2,\n      dx = x10 - x11,\n      dy = y10 - y11,\n      d2 = dx * dx + dy * dy,\n      r = r1 - rc,\n      D = x11 * y10 - x10 * y11,\n      d = (dy < 0 ? -1 : 1) * sqrt(max(0, r * r * d2 - D * D)),\n      cx0 = (D * dy - dx * d) / d2,\n      cy0 = (-D * dx - dy * d) / d2,\n      cx1 = (D * dy + dx * d) / d2,\n      cy1 = (-D * dx + dy * d) / d2,\n      dx0 = cx0 - x00,\n      dy0 = cy0 - y00,\n      dx1 = cx1 - x00,\n      dy1 = cy1 - y00;\n\n  // Pick the closer of the two intersection points.\n  // TODO Is there a faster way to determine which intersection to use?\n  if (dx0 * dx0 + dy0 * dy0 > dx1 * dx1 + dy1 * dy1) cx0 = cx1, cy0 = cy1;\n\n  return {\n    cx: cx0,\n    cy: cy0,\n    x01: -ox,\n    y01: -oy,\n    x11: cx0 * (r1 / r - 1),\n    y11: cy0 * (r1 / r - 1)\n  };\n}\n\nexport default function() {\n  var innerRadius = arcInnerRadius,\n      outerRadius = arcOuterRadius,\n      cornerRadius = constant(0),\n      padRadius = null,\n      startAngle = arcStartAngle,\n      endAngle = arcEndAngle,\n      padAngle = arcPadAngle,\n      context = null,\n      path = withPath(arc);\n\n  function arc() {\n    var buffer,\n        r,\n        r0 = +innerRadius.apply(this, arguments),\n        r1 = +outerRadius.apply(this, arguments),\n        a0 = startAngle.apply(this, arguments) - halfPi,\n        a1 = endAngle.apply(this, arguments) - halfPi,\n        da = abs(a1 - a0),\n        cw = a1 > a0;\n\n    if (!context) context = buffer = path();\n\n    // Ensure that the outer radius is always larger than the inner radius.\n    if (r1 < r0) r = r1, r1 = r0, r0 = r;\n\n    // Is it a point?\n    if (!(r1 > epsilon)) context.moveTo(0, 0);\n\n    // Or is it a circle or annulus?\n    else if (da > tau - epsilon) {\n      context.moveTo(r1 * cos(a0), r1 * sin(a0));\n      context.arc(0, 0, r1, a0, a1, !cw);\n      if (r0 > epsilon) {\n        context.moveTo(r0 * cos(a1), r0 * sin(a1));\n        context.arc(0, 0, r0, a1, a0, cw);\n      }\n    }\n\n    // Or is it a circular or annular sector?\n    else {\n      var a01 = a0,\n          a11 = a1,\n          a00 = a0,\n          a10 = a1,\n          da0 = da,\n          da1 = da,\n          ap = padAngle.apply(this, arguments) / 2,\n          rp = (ap > epsilon) && (padRadius ? +padRadius.apply(this, arguments) : sqrt(r0 * r0 + r1 * r1)),\n          rc = min(abs(r1 - r0) / 2, +cornerRadius.apply(this, arguments)),\n          rc0 = rc,\n          rc1 = rc,\n          t0,\n          t1;\n\n      // Apply padding? Note that since r1 ≥ r0, da1 ≥ da0.\n      if (rp > epsilon) {\n        var p0 = asin(rp / r0 * sin(ap)),\n            p1 = asin(rp / r1 * sin(ap));\n        if ((da0 -= p0 * 2) > epsilon) p0 *= (cw ? 1 : -1), a00 += p0, a10 -= p0;\n        else da0 = 0, a00 = a10 = (a0 + a1) / 2;\n        if ((da1 -= p1 * 2) > epsilon) p1 *= (cw ? 1 : -1), a01 += p1, a11 -= p1;\n        else da1 = 0, a01 = a11 = (a0 + a1) / 2;\n      }\n\n      var x01 = r1 * cos(a01),\n          y01 = r1 * sin(a01),\n          x10 = r0 * cos(a10),\n          y10 = r0 * sin(a10);\n\n      // Apply rounded corners?\n      if (rc > epsilon) {\n        var x11 = r1 * cos(a11),\n            y11 = r1 * sin(a11),\n            x00 = r0 * cos(a00),\n            y00 = r0 * sin(a00),\n            oc;\n\n        // Restrict the corner radius according to the sector angle. If this\n        // intersection fails, it’s probably because the arc is too small, so\n        // disable the corner radius entirely.\n        if (da < pi) {\n          if (oc = intersect(x01, y01, x00, y00, x11, y11, x10, y10)) {\n            var ax = x01 - oc[0],\n                ay = y01 - oc[1],\n                bx = x11 - oc[0],\n                by = y11 - oc[1],\n                kc = 1 / sin(acos((ax * bx + ay * by) / (sqrt(ax * ax + ay * ay) * sqrt(bx * bx + by * by))) / 2),\n                lc = sqrt(oc[0] * oc[0] + oc[1] * oc[1]);\n            rc0 = min(rc, (r0 - lc) / (kc - 1));\n            rc1 = min(rc, (r1 - lc) / (kc + 1));\n          } else {\n            rc0 = rc1 = 0;\n          }\n        }\n      }\n\n      // Is the sector collapsed to a line?\n      if (!(da1 > epsilon)) context.moveTo(x01, y01);\n\n      // Does the sector’s outer ring have rounded corners?\n      else if (rc1 > epsilon) {\n        t0 = cornerTangents(x00, y00, x01, y01, r1, rc1, cw);\n        t1 = cornerTangents(x11, y11, x10, y10, r1, rc1, cw);\n\n        context.moveTo(t0.cx + t0.x01, t0.cy + t0.y01);\n\n        // Have the corners merged?\n        if (rc1 < rc) context.arc(t0.cx, t0.cy, rc1, atan2(t0.y01, t0.x01), atan2(t1.y01, t1.x01), !cw);\n\n        // Otherwise, draw the two corners and the ring.\n        else {\n          context.arc(t0.cx, t0.cy, rc1, atan2(t0.y01, t0.x01), atan2(t0.y11, t0.x11), !cw);\n          context.arc(0, 0, r1, atan2(t0.cy + t0.y11, t0.cx + t0.x11), atan2(t1.cy + t1.y11, t1.cx + t1.x11), !cw);\n          context.arc(t1.cx, t1.cy, rc1, atan2(t1.y11, t1.x11), atan2(t1.y01, t1.x01), !cw);\n        }\n      }\n\n      // Or is the outer ring just a circular arc?\n      else context.moveTo(x01, y01), context.arc(0, 0, r1, a01, a11, !cw);\n\n      // Is there no inner ring, and it’s a circular sector?\n      // Or perhaps it’s an annular sector collapsed due to padding?\n      if (!(r0 > epsilon) || !(da0 > epsilon)) context.lineTo(x10, y10);\n\n      // Does the sector’s inner ring (or point) have rounded corners?\n      else if (rc0 > epsilon) {\n        t0 = cornerTangents(x10, y10, x11, y11, r0, -rc0, cw);\n        t1 = cornerTangents(x01, y01, x00, y00, r0, -rc0, cw);\n\n        context.lineTo(t0.cx + t0.x01, t0.cy + t0.y01);\n\n        // Have the corners merged?\n        if (rc0 < rc) context.arc(t0.cx, t0.cy, rc0, atan2(t0.y01, t0.x01), atan2(t1.y01, t1.x01), !cw);\n\n        // Otherwise, draw the two corners and the ring.\n        else {\n          context.arc(t0.cx, t0.cy, rc0, atan2(t0.y01, t0.x01), atan2(t0.y11, t0.x11), !cw);\n          context.arc(0, 0, r0, atan2(t0.cy + t0.y11, t0.cx + t0.x11), atan2(t1.cy + t1.y11, t1.cx + t1.x11), cw);\n          context.arc(t1.cx, t1.cy, rc0, atan2(t1.y11, t1.x11), atan2(t1.y01, t1.x01), !cw);\n        }\n      }\n\n      // Or is the inner ring just a circular arc?\n      else context.arc(0, 0, r0, a10, a00, cw);\n    }\n\n    context.closePath();\n\n    if (buffer) return context = null, buffer + \"\" || null;\n  }\n\n  arc.centroid = function() {\n    var r = (+innerRadius.apply(this, arguments) + +outerRadius.apply(this, arguments)) / 2,\n        a = (+startAngle.apply(this, arguments) + +endAngle.apply(this, arguments)) / 2 - pi / 2;\n    return [cos(a) * r, sin(a) * r];\n  };\n\n  arc.innerRadius = function(_) {\n    return arguments.length ? (innerRadius = typeof _ === \"function\" ? _ : constant(+_), arc) : innerRadius;\n  };\n\n  arc.outerRadius = function(_) {\n    return arguments.length ? (outerRadius = typeof _ === \"function\" ? _ : constant(+_), arc) : outerRadius;\n  };\n\n  arc.cornerRadius = function(_) {\n    return arguments.length ? (cornerRadius = typeof _ === \"function\" ? _ : constant(+_), arc) : cornerRadius;\n  };\n\n  arc.padRadius = function(_) {\n    return arguments.length ? (padRadius = _ == null ? null : typeof _ === \"function\" ? _ : constant(+_), arc) : padRadius;\n  };\n\n  arc.startAngle = function(_) {\n    return arguments.length ? (startAngle = typeof _ === \"function\" ? _ : constant(+_), arc) : startAngle;\n  };\n\n  arc.endAngle = function(_) {\n    return arguments.length ? (endAngle = typeof _ === \"function\" ? _ : constant(+_), arc) : endAngle;\n  };\n\n  arc.padAngle = function(_) {\n    return arguments.length ? (padAngle = typeof _ === \"function\" ? _ : constant(+_), arc) : padAngle;\n  };\n\n  arc.context = function(_) {\n    return arguments.length ? ((context = _ == null ? null : _), arc) : context;\n  };\n\n  return arc;\n}\n","export default function(a, b) {\n  return b < a ? -1 : b > a ? 1 : b >= a ? 0 : NaN;\n}\n","export default function(d) {\n  return d;\n}\n","import array from \"./array.js\";\nimport constant from \"./constant.js\";\nimport descending from \"./descending.js\";\nimport identity from \"./identity.js\";\nimport {tau} from \"./math.js\";\n\nexport default function() {\n  var value = identity,\n      sortValues = descending,\n      sort = null,\n      startAngle = constant(0),\n      endAngle = constant(tau),\n      padAngle = constant(0);\n\n  function pie(data) {\n    var i,\n        n = (data = array(data)).length,\n        j,\n        k,\n        sum = 0,\n        index = new Array(n),\n        arcs = new Array(n),\n        a0 = +startAngle.apply(this, arguments),\n        da = Math.min(tau, Math.max(-tau, endAngle.apply(this, arguments) - a0)),\n        a1,\n        p = Math.min(Math.abs(da) / n, padAngle.apply(this, arguments)),\n        pa = p * (da < 0 ? -1 : 1),\n        v;\n\n    for (i = 0; i < n; ++i) {\n      if ((v = arcs[index[i] = i] = +value(data[i], i, data)) > 0) {\n        sum += v;\n      }\n    }\n\n    // Optionally sort the arcs by previously-computed values or by data.\n    if (sortValues != null) index.sort(function(i, j) { return sortValues(arcs[i], arcs[j]); });\n    else if (sort != null) index.sort(function(i, j) { return sort(data[i], data[j]); });\n\n    // Compute the arcs! They are stored in the original data's order.\n    for (i = 0, k = sum ? (da - n * pa) / sum : 0; i < n; ++i, a0 = a1) {\n      j = index[i], v = arcs[j], a1 = a0 + (v > 0 ? v * k : 0) + pa, arcs[j] = {\n        data: data[j],\n        index: i,\n        value: v,\n        startAngle: a0,\n        endAngle: a1,\n        padAngle: p\n      };\n    }\n\n    return arcs;\n  }\n\n  pie.value = function(_) {\n    return arguments.length ? (value = typeof _ === \"function\" ? _ : constant(+_), pie) : value;\n  };\n\n  pie.sortValues = function(_) {\n    return arguments.length ? (sortValues = _, sort = null, pie) : sortValues;\n  };\n\n  pie.sort = function(_) {\n    return arguments.length ? (sort = _, sortValues = null, pie) : sort;\n  };\n\n  pie.startAngle = function(_) {\n    return arguments.length ? (startAngle = typeof _ === \"function\" ? _ : constant(+_), pie) : startAngle;\n  };\n\n  pie.endAngle = function(_) {\n    return arguments.length ? (endAngle = typeof _ === \"function\" ? _ : constant(+_), pie) : endAngle;\n  };\n\n  pie.padAngle = function(_) {\n    return arguments.length ? (padAngle = typeof _ === \"function\" ? _ : constant(+_), pie) : padAngle;\n  };\n\n  return pie;\n}\n","@import '../../utils/forced-colors.css';\n\n:host {\n  display: inline-block;\n  font-family: var(--typography-font-family);\n  user-select: none;\n}\n\n:host(.chart-donut--fill) {\n  display: block;\n  width: 100%;\n  height: 100%;\n  min-width: 0;\n  min-height: 0;\n}\n\n.chart-donut__wrapper {\n  position: relative;\n  overflow: visible;\n}\n\n:host(.chart-donut--fill) .chart-donut__wrapper {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.chart-donut__svg path {\n  cursor: default;\n  transition: opacity var(--effect-motion-short-2);\n}\n\n.chart-donut__slice--dimmed {\n  opacity: var(--effect-opacity-medium);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .chart-donut__svg path {\n    transition: none;\n  }\n}\n\n.chart-donut__svg path:focus-visible {\n  outline: none;\n  stroke: var(--color-interaction-focus);\n  stroke-width: var(--dimension-stroke-width-025);\n  vector-effect: non-scaling-stroke;\n}\n\n/* Matches ds-text text-title-large + emphasis (SVG cannot host ds-text). */\n.chart-donut__center-value {\n  fill: var(--color-foreground-primary);\n  font-family: var(--typography-font-family);\n  font-size: var(--typography-fontsize-xl);\n  line-height: var(--typography-lineheight-xl);\n  font-weight: var(--typography-weight-semibold);\n  letter-spacing: var(--typography-letterspacing-negative-double);\n  cursor: default;\n  pointer-events: none;\n}\n\n/* Matches ds-text text-body-medium regular. */\n.chart-donut__center-caption {\n  fill: var(--color-foreground-secondary);\n  font-family: var(--typography-font-family);\n  font-size: var(--typography-fontsize-md);\n  line-height: var(--typography-lineheight-md);\n  font-weight: var(--typography-weight-regular);\n  letter-spacing: var(--typography-letterspacing-negative-half);\n  cursor: default;\n  pointer-events: none;\n}\n\n@media (forced-colors: active) {\n  .chart-donut__svg path {\n    forced-color-adjust: none;\n  }\n\n  .chart-donut__svg path:focus-visible {\n    stroke: var(--ds-forced-color-selected);\n  }\n}\n","import { Component, Prop, State, Event, EventEmitter, Element, Watch, h, Host } from '@stencil/core';\nimport { arc, pie } from 'd3-shape';\nimport { categoryColor } from '../../utils/chart-colors';\nimport { formatCompactNumber, resolveCssLengthPx, truncateSvgTextToWidth, TOKEN_DEFAULTS } from '../../utils';\nimport type { ChartDatum } from '../../utils/chart-types';\n\n/** Gap between the center value and caption line boxes. */\nconst CENTER_GAP_PX = 0;\n/** Fraction of the inner-circle diameter center text is allowed to use before truncating. */\nconst CENTER_TEXT_SAFE_WIDTH_RATIO = 0.82;\n/** Fallback when filling before the first ResizeObserver measurement (matches fill min). */\nconst FILL_FALLBACK_PX = 128;\n\n@Component({\n  tag: 'ds-chart-donut',\n  styleUrl: 'ChartDonut.css',\n  scoped: true,\n})\nexport class ChartDonut {\n  @Prop() locale: string | undefined;\n  @Prop() noDataLabel: string = 'No data';\n  @Element() el!: HTMLElement;\n\n  /** Slices to render. Set as a JS property (not an HTML attribute). */\n  @Prop() data: ChartDatum[] = [];\n  /**\n   * Explicit diameter in px. When unset, the donut sizes to its container\n   * (ResizeObserver) clamped between `--dimension-size-base * 16` (128px) and\n   * `* 24` (192px), and stays centered in the leftover space. Prefer unset\n   * inside card layouts.\n   */\n  @Prop() size: number | undefined;\n  /** Ring thickness — number (px) or TokoMo length. Defaults to `--dimension-size-200` (16px). */\n  @Prop() thickness: number | string = TOKEN_DEFAULTS.size200;\n  /** Corner radius on each slice — number (px) or TokoMo length. Defaults to `--dimension-radius-025` (2px). */\n  @Prop() cornerRadius: number | string = TOKEN_DEFAULTS.radius025;\n  /** Gap between slices, in degrees. */\n  @Prop() gap: number = 1;\n  /**\n   * Show a chart-owned value callout for genuine pointer or keyboard focus.\n   * Disable when a visible legend already owns persistent label and value detail.\n   */\n  @Prop() showTooltip: boolean = true;\n  /** Primary center value; defaults to the sum of `data` values (e.g. \"187\", \"40.9%\"). */\n  @Prop() centerValue: string | undefined;\n  /** Secondary caption below the center value (e.g. \"Total\", \"Normal\"). Rendered uppercase. */\n  @Prop() centerCaption: string | undefined;\n  /**\n   * Externally controlled highlight, matched by `label` — e.g. drive this from a sibling\n   * `ds-chart-legend`'s `dsItemHover` event to keep chart and legend hover in sync.\n   * Falls back to this component's own pointer/focus hover when unset.\n   * Slice hover dims peer slices and emits `dsSliceHover` for legend sync. External\n   * highlight never opens the local tooltip.\n   */\n  @Prop() activeLabel: string | null = null;\n\n  @State() private hoveredLabel: string | null = null;\n  /** Center text, truncated with an ellipsis if it doesn't fit inside the inner circle. */\n  @State() private displayedValueText: string = '';\n  @State() private displayedCaptionText: string = '';\n  /** Measured fill diameter when `size` is unset. */\n  @State() private measuredSize: number = FILL_FALLBACK_PX;\n  @State() private tooltipX: number = 0;\n  @State() private tooltipY: number = 0;\n\n  /** Fires with the hovered/focused slice's datum, or `null` on leave/blur. */\n  @Event() dsSliceHover!: EventEmitter<ChartDatum | null>;\n\n  private valueTextEl?: SVGTextElement;\n  private captionTextEl?: SVGTextElement;\n  private resizeObserver: ResizeObserver | null = null;\n\n  private get isFillMode(): boolean {\n    return this.size == null || !Number.isFinite(this.size) || this.size <= 0;\n  }\n\n  private get fillMinPx(): number {\n    return resolveCssLengthPx(TOKEN_DEFAULTS.donutFillMin, FILL_FALLBACK_PX);\n  }\n\n  private get fillMaxPx(): number {\n    return resolveCssLengthPx(TOKEN_DEFAULTS.donutFillMax, 192);\n  }\n\n  /** Clamp available square side into the fill min/max band. */\n  private clampFillSize(availablePx: number): number {\n    const minPx = this.fillMinPx;\n    const maxPx = this.fillMaxPx;\n    if (!(availablePx > 0)) return minPx;\n    return Math.round(Math.min(maxPx, Math.max(minPx, availablePx)));\n  }\n\n  private get resolvedSize(): number {\n    if (!this.isFillMode) return this.size as number;\n    return this.clampFillSize(this.measuredSize);\n  }\n\n  componentDidLoad() {\n    this.syncResizeObserver();\n  }\n\n  @Watch('size')\n  onSizePropChange() {\n    this.syncResizeObserver();\n  }\n\n  disconnectedCallback() {\n    this.teardownResizeObserver();\n  }\n\n  private syncResizeObserver() {\n    this.teardownResizeObserver();\n    if (!this.isFillMode) return;\n    // Observe the host (which fills its parent), not the wrapper — the wrapper\n    // only wraps the SVG and would collapse to the clamped size, locking fill at min.\n    const target = this.el;\n    if (!target || typeof ResizeObserver === 'undefined') return;\n\n    this.resizeObserver = new ResizeObserver(entries => {\n      const entry = entries[0];\n      if (!entry) return;\n      this.applyAvailableSize(entry.contentRect.width, entry.contentRect.height);\n    });\n    this.resizeObserver.observe(target);\n    this.measureHost();\n  }\n\n  private measureHost() {\n    const rect = this.el.getBoundingClientRect();\n    this.applyAvailableSize(rect.width, rect.height);\n  }\n\n  private applyAvailableSize(width: number, height: number) {\n    const available = Math.floor(Math.min(width, height));\n    if (available > 0 && available !== this.measuredSize) {\n      this.measuredSize = available;\n    }\n  }\n\n  private teardownResizeObserver() {\n    this.resizeObserver?.disconnect();\n    this.resizeObserver = null;\n  }\n\n  private handleHover(datum: ChartDatum | null) {\n    this.hoveredLabel = datum?.label ?? null;\n    this.dsSliceHover.emit(datum);\n  }\n\n  private get tooltipDatum(): ChartDatum | null {\n    if (!this.showTooltip || this.hoveredLabel == null) return null;\n    return this.data.find(datum => datum.label === this.hoveredLabel) ?? null;\n  }\n\n  private updateTooltipFromPointer(event: MouseEvent) {\n    if (!this.showTooltip) return;\n    const wrapper = this.el.querySelector<HTMLElement>('.chart-donut__wrapper');\n    if (!wrapper) return;\n    const rect = wrapper.getBoundingClientRect();\n    this.tooltipX = event.clientX - rect.left;\n    this.tooltipY = event.clientY - rect.top;\n  }\n\n  private updateTooltipFromSvgPoint(\n    path: SVGPathElement,\n    svgX: number,\n    svgY: number,\n    viewBoxSize: number,\n  ) {\n    if (!this.showTooltip) return;\n    const wrapper = this.el.querySelector<HTMLElement>('.chart-donut__wrapper');\n    const svg = path.ownerSVGElement;\n    if (!wrapper || !svg) return;\n    const wrapperRect = wrapper.getBoundingClientRect();\n    const svgRect = svg.getBoundingClientRect();\n    this.tooltipX = svgRect.left - wrapperRect.left + svgX * (svgRect.width / viewBoxSize);\n    this.tooltipY = svgRect.top - wrapperRect.top + svgY * (svgRect.height / viewBoxSize);\n  }\n\n  componentDidRender() {\n    // Re-bind after HMR when DidLoad's observer was dropped.\n    if (this.isFillMode && !this.resizeObserver) {\n      this.syncResizeObserver();\n    }\n\n    const size = this.resolvedSize;\n    const radius = size / 2;\n    const thicknessPx = resolveCssLengthPx(this.thickness, TOKEN_DEFAULTS.size200);\n    const innerRadius = radius - thicknessPx;\n    const maxWidth = innerRadius * 2 * CENTER_TEXT_SAFE_WIDTH_RATIO;\n    const total = this.data.reduce((sum, d) => sum + d.value, 0);\n\n    const fullValueText = this.centerValue ?? formatCompactNumber(total, this.locale);\n    if (this.valueTextEl) {\n      const truncated = truncateSvgTextToWidth(this.valueTextEl, fullValueText, maxWidth);\n      if (truncated !== this.displayedValueText) this.displayedValueText = truncated;\n      else this.valueTextEl.textContent = truncated;\n    }\n\n    const fullCaptionText = this.centerCaption ?? '';\n    if (this.captionTextEl && fullCaptionText) {\n      const truncated = truncateSvgTextToWidth(this.captionTextEl, fullCaptionText, maxWidth);\n      if (truncated !== this.displayedCaptionText) this.displayedCaptionText = truncated;\n      else this.captionTextEl.textContent = truncated;\n    }\n  }\n\n  render() {\n    const size = this.resolvedSize;\n    const radius = size / 2;\n    const thicknessPx = resolveCssLengthPx(this.thickness, TOKEN_DEFAULTS.size200);\n    const cornerRadiusPx = resolveCssLengthPx(this.cornerRadius, TOKEN_DEFAULTS.radius025);\n    const innerRadius = radius - thicknessPx;\n    const total = this.data.reduce((sum, d) => sum + d.value, 0);\n    // d3's pie() divides each value by the total to get an angle — with an all-zero total\n    // that's 0/0, producing NaN angles and broken paths. Render a flat neutral ring instead.\n    const isEmpty = total <= 0;\n    // Highlight/dim from either this component's own hover or an externally-synced label\n    // (e.g. a sibling ds-chart-legend row).\n    const highlightLabel = this.activeLabel ?? this.hoveredLabel;\n\n    const arcGenerator = arc<{ startAngle: number; endAngle: number }>()\n      .innerRadius(innerRadius)\n      .outerRadius(radius)\n      .cornerRadius(cornerRadiusPx)\n      .padAngle((this.gap * Math.PI) / 180);\n\n    const slices = isEmpty\n      ? []\n      : pie<ChartDatum>()\n          .value(d => d.value)\n          .sort(null)(this.data);\n\n    const emptyRingPath = isEmpty\n      ? arc<{ startAngle: number; endAngle: number }>()\n          .innerRadius(innerRadius)\n          .outerRadius(radius)({ startAngle: 0, endAngle: Math.PI * 2 })\n      : null;\n\n    // Precise vertical centering for the two-line center text, using the real line-height of\n    // text-title-large (value) and text-body-medium (caption) rather than eyeballed em offsets.\n    const valueLineHeight = resolveCssLengthPx(TOKEN_DEFAULTS.lineheightXl, 32);\n    const captionLineHeight = resolveCssLengthPx(TOKEN_DEFAULTS.lineheightMd, 20);\n    const centerValueY = this.centerCaption ? radius - (CENTER_GAP_PX + captionLineHeight) / 2 : radius;\n    const centerCaptionY = radius + (valueLineHeight + CENTER_GAP_PX) / 2;\n\n    // Show the full text before the post-render truncation pass has measured it (avoids a blank first paint).\n    const fullValueText = this.centerValue ?? formatCompactNumber(total, this.locale);\n    const fullCaptionText = this.centerCaption ?? '';\n    const fill = this.isFillMode;\n\n    return (\n      <Host\n        class={{\n          'chart-donut': true,\n          'chart-donut--fill': fill,\n          'chart-donut--fixed': !fill,\n        }}\n        style={!fill ? { width: `${size}px`, height: `${size}px` } : undefined}\n      >\n        <div\n          class=\"chart-donut__wrapper\"\n          style={!fill ? { width: `${size}px`, height: `${size}px` } : undefined}\n        >\n          <svg\n            class=\"chart-donut__svg\"\n            viewBox={`0 0 ${size} ${size}`}\n            width={size}\n            height={size}\n            role={isEmpty ? 'img' : undefined}\n            aria-label={isEmpty ? this.noDataLabel : undefined}\n          >\n            <g transform={`translate(${radius}, ${radius})`}>\n              {isEmpty ? (\n                <path d={emptyRingPath ?? undefined} fill=\"var(--color-background-faint-neutral)\" aria-hidden=\"true\" />\n              ) : (\n                slices.map((slice, i) => {\n                  const datum = this.data[i];\n                  const isDimmed = highlightLabel != null && datum.label !== highlightLabel;\n                  const [centroidX, centroidY] = arcGenerator.centroid(slice);\n                  return (\n                    <path\n                      key={datum.label}\n                      class={{ 'chart-donut__slice--dimmed': isDimmed }}\n                      d={arcGenerator(slice) ?? undefined}\n                      fill={datum.color ?? categoryColor(i)}\n                      tabindex={0}\n                      role=\"img\"\n                      aria-label={`${datum.label}: ${datum.value}`}\n                      onMouseEnter={(event: MouseEvent) => {\n                        this.updateTooltipFromPointer(event);\n                        this.handleHover(datum);\n                      }}\n                      onMouseMove={(event: MouseEvent) => this.updateTooltipFromPointer(event)}\n                      onMouseLeave={() => this.handleHover(null)}\n                      onFocus={(event: FocusEvent) => {\n                        this.updateTooltipFromSvgPoint(\n                          event.currentTarget as SVGPathElement,\n                          radius + centroidX,\n                          radius + centroidY,\n                          size,\n                        );\n                        this.handleHover(datum);\n                      }}\n                      onBlur={() => this.handleHover(null)}\n                    />\n                  );\n                })\n              )}\n            </g>\n            <text\n              class=\"chart-donut__center-value\"\n              x={radius}\n              y={centerValueY}\n              text-anchor=\"middle\"\n              dominant-baseline=\"central\"\n              ref={el => {\n                this.valueTextEl = (el as SVGTextElement) ?? undefined;\n              }}\n            >\n              {this.displayedValueText || fullValueText}\n            </text>\n            {fullCaptionText && (\n              <text\n                class=\"chart-donut__center-caption\"\n                x={radius}\n                y={centerCaptionY}\n                text-anchor=\"middle\"\n                dominant-baseline=\"central\"\n                ref={el => {\n                  this.captionTextEl = (el as SVGTextElement) ?? undefined;\n                }}\n              >\n                {this.displayedCaptionText || fullCaptionText}\n              </text>\n            )}\n          </svg>\n          {this.tooltipDatum && (\n            <ds-tooltip-data-viz\n              label={this.tooltipDatum.label}\n              value={formatCompactNumber(this.tooltipDatum.value, this.locale)}\n              x={this.tooltipX}\n              y={this.tooltipY}\n            />\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/components/ds-chart-legend.js

@@ -1,2 +1,2 @@
-import{p as e,H as n,c as t,h as i,a as s,t as r}from"./index.js";import{c as o}from"./p-CMv_7vFs.js";import{d as c}from"./p-Ay1AX7Ql.js";import{r as d}from"./p-C-vRkDyn.js";import{f as a}from"./p-DXewjzkM.js";import{f as l}from"./p-BBpASejH.js";const h=()=>`.ds-control--lg.sc-ds-chart-legend,.ds-control--lg.sc-ds-chart-legend-h,.ds-control--md.sc-ds-chart-legend-h,.ds-control--md.sc-ds-chart-legend,.ds-control--sm.sc-ds-chart-legend-h,.ds-control--sm.sc-ds-chart-legend,.ds-control--xs.sc-ds-chart-legend-h,.ds-control--xs.sc-ds-chart-legend{--ds-control-radius:var(--dimension-radius-025)}.ds-control--lg.sc-ds-chart-legend-h,.ds-control--lg.sc-ds-chart-legend{--ds-control-height:var(--dimension-size-500);--ds-control-icon:var(--dimension-iconography-lg);--ds-control-padding-inline:var(--dimension-space-100);--ds-control-label-inset:var(--dimension-space-050);--ds-control-gap:var(--dimension-space-050)}.ds-control--md.sc-ds-chart-legend-h,.ds-control--md.sc-ds-chart-legend{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050)}.ds-control--sm.sc-ds-chart-legend-h,.ds-control--sm.sc-ds-chart-legend{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025)}.ds-control--xs.sc-ds-chart-legend-h,.ds-control--xs.sc-ds-chart-legend{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0}.ds-interaction-fill.sc-ds-chart-legend-h,.ds-interaction-fill.sc-ds-chart-legend{position:relative;z-index:0;cursor:default;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active-brand);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent}.ds-interaction-fill.sc-ds-chart-legend-h::before,.ds-interaction-fill.sc-ds-chart-legend::before,.ds-interaction-fill.sc-ds-chart-legend-h::after,.ds-interaction-fill.sc-ds-chart-legend::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;cursor:inherit;transition:none}.ds-interaction-fill.sc-ds-chart-legend-h::before,.ds-interaction-fill.sc-ds-chart-legend::before{z-index:1}.ds-interaction-fill.sc-ds-chart-legend-h::after,.ds-interaction-fill.sc-ds-chart-legend::after{z-index:3;box-shadow:inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-interaction-fill--bordered.sc-ds-chart-legend-h,.ds-interaction-fill--bordered.sc-ds-chart-legend{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-chart-legend-h::before,.ds-interaction-fill--selected.sc-ds-chart-legend::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-chart-legend-h,.ds-interaction-fill--selected.sc-ds-chart-legend{--ds-interaction-dot-ring:var(--ds-interaction-active)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-chart-legend-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-chart-legend:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}}.ds-interaction-fill.sc-ds-chart-legend-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-chart-legend:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill.sc-ds-chart-legend-h>.ds-interaction-fill__content.sc-ds-chart-legend,.ds-interaction-fill.sc-ds-chart-legend>.ds-interaction-fill__content.sc-ds-chart-legend,.ds-interaction-fill__content.sc-ds-chart-legend{position:relative;z-index:2;cursor:inherit}.ds-interaction-fill--on-faint.sc-ds-chart-legend-h,.ds-interaction-fill--on-faint.sc-ds-chart-legend{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-chart-legend-h,.ds-interaction-fill--on-medium.sc-ds-chart-legend{--ds-interaction-hover:var(--color-interaction-on-medium-background-hover);--ds-interaction-pressed:var(--color-interaction-on-medium-background-pressed);--ds-interaction-active:var(--color-interaction-on-medium-background-active);--ds-focus-ring-color:var(--color-interaction-on-medium-background-focus)}.ds-interaction-fill--on-bold.sc-ds-chart-legend-h,.ds-interaction-fill--on-bold.sc-ds-chart-legend{--ds-interaction-hover:var(--color-interaction-on-bold-background-hover);--ds-interaction-pressed:var(--color-interaction-on-bold-background-pressed);--ds-interaction-active:var(--color-interaction-on-bold-background-active);--ds-focus-ring-color:var(--color-interaction-on-bold-background-focus)}.ds-interaction-fill--on-strong.sc-ds-chart-legend-h,.ds-interaction-fill--on-strong.sc-ds-chart-legend{--ds-interaction-hover:var(--color-interaction-on-strong-background-hover);--ds-interaction-pressed:var(--color-interaction-on-strong-background-pressed);--ds-interaction-active:var(--color-interaction-on-strong-background-active);--ds-focus-ring-color:var(--color-interaction-on-strong-background-focus)}.ds-interaction-fill--on-translucent.sc-ds-chart-legend-h,.ds-interaction-fill--on-translucent.sc-ds-chart-legend{--ds-interaction-hover:var(--color-translucent-interaction-hover);--ds-interaction-pressed:var(--color-translucent-interaction-pressed);--ds-interaction-active:var(--color-translucent-interaction-active);--ds-focus-ring-color:var(--color-translucent-interaction-focus)}.ds-interaction-fill--on-inverted.sc-ds-chart-legend-h,.ds-interaction-fill--on-inverted.sc-ds-chart-legend{--ds-interaction-hover:var(--color-inverted-interaction-hover);--ds-interaction-pressed:var(--color-inverted-interaction-pressed);--ds-interaction-active:var(--color-inverted-interaction-active);--ds-focus-ring-color:var(--color-inverted-interaction-focus)}.ds-interaction-fill--on-media.sc-ds-chart-legend-h,.ds-interaction-fill--on-media.sc-ds-chart-legend{--ds-interaction-hover:var(--color-media-interaction-hover);--ds-interaction-pressed:var(--color-media-interaction-pressed);--ds-interaction-active:var(--color-media-interaction-active);--ds-focus-ring-color:var(--color-media-interaction-focus)}.ds-interaction-fill--on-always-dark.sc-ds-chart-legend-h,.ds-interaction-fill--on-always-dark.sc-ds-chart-legend{--ds-interaction-hover:var(--color-always-dark-interaction-hover);--ds-interaction-pressed:var(--color-always-dark-interaction-pressed);--ds-interaction-active:var(--color-always-dark-interaction-active);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.ds-interaction-fill--on-navigation.sc-ds-chart-legend-h,.ds-interaction-fill--on-navigation.sc-ds-chart-legend{--ds-interaction-hover:var(--color-navigation-interaction-hover);--ds-interaction-pressed:var(--color-navigation-interaction-pressed);--ds-interaction-active:var(--color-navigation-interaction-active);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}.sc-ds-chart-legend-h{--ds-focus-ring-width:var(--dimension-stroke-width-025, 2px);--ds-focus-ring-offset:var(--dimension-space-025, 2px);--ds-focus-ring-color:var(--color-interaction-focus)}.ds-focus-ring.sc-ds-chart-legend-h,.ds-focus-ring.sc-ds-chart-legend,.ds-focus-ring-inset.sc-ds-chart-legend-h,.ds-focus-ring-inset.sc-ds-chart-legend{outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.ds-focus-ring.sc-ds-chart-legend-h:focus-visible,.ds-focus-ring.sc-ds-chart-legend:focus-visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring.ds-focus-ring--visible.sc-ds-chart-legend-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-chart-legend{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring-inset.sc-ds-chart-legend-h:focus-visible,.ds-focus-ring-inset.sc-ds-chart-legend:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-chart-legend-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-chart-legend:focus-visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-chart-legend-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-chart-legend{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-chart-legend-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-chart-legend::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.sc-ds-chart-legend-h{display:block;font-family:var(--typography-font-family);user-select:none}.chart-legend__list.sc-ds-chart-legend{margin:0;padding:0;list-style:none}.chart-legend__list-item.sc-ds-chart-legend{display:contents}.chart-legend--vertical.sc-ds-chart-legend-h .chart-legend__list.sc-ds-chart-legend{display:grid;grid-template-columns:auto minmax(0, 1fr) var(--dimension-size-600);column-gap:var(--dimension-space-075);row-gap:var(--dimension-space-050)}.chart-legend--vertical.chart-legend--show-percentage.sc-ds-chart-legend-h .chart-legend__list.sc-ds-chart-legend{grid-template-columns:auto minmax(0, 1fr) var(--dimension-size-600) var(--dimension-size-800)}.chart-legend--vertical.sc-ds-chart-legend-h .chart-legend__item.sc-ds-chart-legend{grid-column:1 / -1;display:grid;grid-template-columns:subgrid}.chart-legend--horizontal.sc-ds-chart-legend-h .chart-legend__list.sc-ds-chart-legend{display:flex;flex-wrap:wrap;gap:var(--dimension-space-200)}.chart-legend--horizontal.sc-ds-chart-legend-h .chart-legend__item.sc-ds-chart-legend{display:flex;gap:var(--dimension-space-100)}.chart-legend__item.sc-ds-chart-legend{box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));align-items:center;padding:0 var(--ds-control-padding-inline, var(--dimension-space-075));border-radius:var(--ds-control-radius, var(--dimension-radius-025));text-decoration:none;color:inherit;transition:opacity var(--effect-motion-short-2)}.chart-legend__item--dimmed.sc-ds-chart-legend{opacity:var(--effect-opacity-medium)}@media (prefers-reduced-motion: reduce){.chart-legend__item.sc-ds-chart-legend{transition:none}}.chart-legend__item--interactive.sc-ds-chart-legend{cursor:pointer}.chart-legend__item.sc-ds-chart-legend>*.sc-ds-chart-legend{position:relative;z-index:2}.chart-legend__swatch-box.sc-ds-chart-legend{width:var(--dimension-size-250);height:var(--dimension-size-250);display:flex;align-items:center;justify-content:center;flex-shrink:0}.chart-legend__swatch.sc-ds-chart-legend{width:var(--dimension-space-150);height:var(--dimension-space-150);border-radius:var(--dimension-radius-025);flex-shrink:0}.chart-legend__label.sc-ds-chart-legend{min-width:0}.chart-legend__percentage.sc-ds-chart-legend{width:100%;min-width:0;text-align:right}.chart-legend__value.sc-ds-chart-legend{width:100%;text-align:right;min-width:0}`;const g=e(class e extends n{constructor(e){super();if(e!==false){this.__registerHost()}this.dsItemHover=t(this,"dsItemHover");this.dsItemClick=t(this,"dsItemClick");this.items=[];this.direction="vertical";this.showPercentage=true;this.percentageDecimals=1;this.highlightOnHover=true;this.activeLabel=null;this.hoveredLabel=null;this.handleClick=(e,n)=>{this.dsItemClick.emit({item:e,originalEvent:n})}}handleHighlightOnHoverChange(e){if(!e)this.hoveredLabel=null}handleHover(e){this.hoveredLabel=e?.label??null;this.dsItemHover.emit(e)}render(){const e=this.items.reduce(((e,n)=>e+(n.value??0)),0);const n=this.activeLabel??(this.highlightOnHover?this.hoveredLabel:null);return i(s,{key:"56768db4666c6250db91d3e21bbba23387335982",class:{"chart-legend":true,[`chart-legend--${this.direction}`]:true,"chart-legend--show-percentage":this.showPercentage}},i("ul",{key:"a2419dd08afef5debc882dc83541458851ab9354",class:"chart-legend__list",onMouseLeave:this.highlightOnHover?()=>this.handleHover(null):undefined},this.items.map(((t,s)=>{const r=n!=null&&t.label!==n;const c=d(t.href);const h=c?"a":"div";const g=t.value!=null?a(e?t.value/e:0,this.percentageDecimals,this.locale):"";return i("li",{class:"chart-legend__list-item",key:t.label},i(h,{class:{"chart-legend__item":true,"chart-legend__item--interactive":!!c,"chart-legend__item--dimmed":r,"ds-control--md":true,"ds-interaction-fill":this.highlightOnHover||!!c,"ds-focus-ring-inset":!!c},href:c,onClick:c?e=>this.handleClick(t,e):undefined,onMouseEnter:this.highlightOnHover?()=>this.handleHover(t):undefined,onFocus:this.highlightOnHover?()=>this.handleHover(t):undefined,onBlur:this.highlightOnHover?()=>this.handleHover(null):undefined},i("span",{class:"chart-legend__swatch-box"},i("span",{class:"chart-legend__swatch",style:{backgroundColor:t.color??o(s)}})),i("ds-text",{class:"chart-legend__label",as:"span",variant:"text-body-medium",color:"secondary",lineTruncation:1,title:t.label},t.label),t.value!=null&&i("ds-text",{class:"chart-legend__value",as:"span",variant:"text-body-medium",color:"primary",lineTruncation:1,align:"right",fontFeature:"tabular-nums",title:String(t.value)},l(t.value,this.locale)),t.value!=null&&this.showPercentage&&i("ds-text",{class:"chart-legend__percentage",as:"span",variant:"text-body-medium",color:"primary",lineTruncation:1,align:"right",fontFeature:"tabular-nums",title:g},g)))}))))}static get watchers(){return{highlightOnHover:[{handleHighlightOnHoverChange:0}]}}static get style(){return h()}},[2,"ds-chart-legend",{locale:[1],items:[16],direction:[1],showPercentage:[4,"show-percentage"],percentageDecimals:[2,"percentage-decimals"],highlightOnHover:[4,"highlight-on-hover"],activeLabel:[1,"active-label"],hoveredLabel:[32]},undefined,{highlightOnHover:[{handleHighlightOnHoverChange:0}]}]);function v(){if(typeof customElements==="undefined"){return}const e=["ds-chart-legend","ds-text"];e.forEach((e=>{switch(e){case"ds-chart-legend":if(!customElements.get(r(e))){customElements.define(r(e),g)}break;case"ds-text":if(!customElements.get(r(e))){c()}break}}))}v();const f=g;const u=v;export{f as DsChartLegend,u as defineCustomElement};
+import{p as e,H as n,c as t,h as s,a as r,t as i}from"./index.js";import{c as o}from"./p-CMv_7vFs.js";import{d as c}from"./p-w2kKeG_h.js";import{r as d}from"./p-C-vRkDyn.js";import{f as a}from"./p-DXewjzkM.js";import{f as l}from"./p-BBpASejH.js";const h=()=>`.ds-control--lg.sc-ds-chart-legend,.ds-control--lg.sc-ds-chart-legend-h,.ds-control--md.sc-ds-chart-legend-h,.ds-control--md.sc-ds-chart-legend,.ds-control--sm.sc-ds-chart-legend-h,.ds-control--sm.sc-ds-chart-legend,.ds-control--xs.sc-ds-chart-legend-h,.ds-control--xs.sc-ds-chart-legend{--ds-control-radius:var(--dimension-radius-025)}.ds-control--lg.sc-ds-chart-legend-h,.ds-control--lg.sc-ds-chart-legend{--ds-control-height:var(--dimension-size-500);--ds-control-icon:var(--dimension-iconography-lg);--ds-control-padding-inline:var(--dimension-space-100);--ds-control-label-inset:var(--dimension-space-050);--ds-control-gap:var(--dimension-space-050)}.ds-control--md.sc-ds-chart-legend-h,.ds-control--md.sc-ds-chart-legend{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050)}.ds-control--sm.sc-ds-chart-legend-h,.ds-control--sm.sc-ds-chart-legend{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025)}.ds-control--xs.sc-ds-chart-legend-h,.ds-control--xs.sc-ds-chart-legend{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0}@media (forced-colors: active){.sc-ds-chart-legend:root,.sc-ds-chart-legend-h,.ds-forced-colors-scope.sc-ds-chart-legend{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.ds-interaction-fill.sc-ds-chart-legend-h,.ds-interaction-fill.sc-ds-chart-legend{position:relative;z-index:0;cursor:default;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active-brand);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent}.ds-interaction-fill.sc-ds-chart-legend-h::before,.ds-interaction-fill.sc-ds-chart-legend::before,.ds-interaction-fill.sc-ds-chart-legend-h::after,.ds-interaction-fill.sc-ds-chart-legend::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;cursor:inherit;transition:none}.ds-interaction-fill.sc-ds-chart-legend-h::before,.ds-interaction-fill.sc-ds-chart-legend::before{z-index:1}.ds-interaction-fill.sc-ds-chart-legend-h::after,.ds-interaction-fill.sc-ds-chart-legend::after{z-index:3;box-shadow:inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-interaction-fill--bordered.sc-ds-chart-legend-h,.ds-interaction-fill--bordered.sc-ds-chart-legend{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-chart-legend-h::before,.ds-interaction-fill--selected.sc-ds-chart-legend::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-chart-legend-h,.ds-interaction-fill--selected.sc-ds-chart-legend{--ds-interaction-dot-ring:var(--ds-interaction-active)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-chart-legend-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-chart-legend:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}}.ds-interaction-fill.sc-ds-chart-legend-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-chart-legend:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill.sc-ds-chart-legend-h>.ds-interaction-fill__content.sc-ds-chart-legend,.ds-interaction-fill.sc-ds-chart-legend>.ds-interaction-fill__content.sc-ds-chart-legend,.ds-interaction-fill__content.sc-ds-chart-legend{position:relative;z-index:2;cursor:inherit}.ds-interaction-fill--on-faint.sc-ds-chart-legend-h,.ds-interaction-fill--on-faint.sc-ds-chart-legend{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-chart-legend-h,.ds-interaction-fill--on-medium.sc-ds-chart-legend{--ds-interaction-hover:var(--color-interaction-on-medium-background-hover);--ds-interaction-pressed:var(--color-interaction-on-medium-background-pressed);--ds-interaction-active:var(--color-interaction-on-medium-background-active);--ds-focus-ring-color:var(--color-interaction-on-medium-background-focus)}.ds-interaction-fill--on-bold.sc-ds-chart-legend-h,.ds-interaction-fill--on-bold.sc-ds-chart-legend{--ds-interaction-hover:var(--color-interaction-on-bold-background-hover);--ds-interaction-pressed:var(--color-interaction-on-bold-background-pressed);--ds-interaction-active:var(--color-interaction-on-bold-background-active);--ds-focus-ring-color:var(--color-interaction-on-bold-background-focus)}.ds-interaction-fill--on-strong.sc-ds-chart-legend-h,.ds-interaction-fill--on-strong.sc-ds-chart-legend{--ds-interaction-hover:var(--color-interaction-on-strong-background-hover);--ds-interaction-pressed:var(--color-interaction-on-strong-background-pressed);--ds-interaction-active:var(--color-interaction-on-strong-background-active);--ds-focus-ring-color:var(--color-interaction-on-strong-background-focus)}.ds-interaction-fill--on-translucent.sc-ds-chart-legend-h,.ds-interaction-fill--on-translucent.sc-ds-chart-legend{--ds-interaction-hover:var(--color-translucent-interaction-hover);--ds-interaction-pressed:var(--color-translucent-interaction-pressed);--ds-interaction-active:var(--color-translucent-interaction-active);--ds-focus-ring-color:var(--color-translucent-interaction-focus)}.ds-interaction-fill--on-inverted.sc-ds-chart-legend-h,.ds-interaction-fill--on-inverted.sc-ds-chart-legend{--ds-interaction-hover:var(--color-inverted-interaction-hover);--ds-interaction-pressed:var(--color-inverted-interaction-pressed);--ds-interaction-active:var(--color-inverted-interaction-active);--ds-focus-ring-color:var(--color-inverted-interaction-focus)}.ds-interaction-fill--on-media.sc-ds-chart-legend-h,.ds-interaction-fill--on-media.sc-ds-chart-legend{--ds-interaction-hover:var(--color-media-interaction-hover);--ds-interaction-pressed:var(--color-media-interaction-pressed);--ds-interaction-active:var(--color-media-interaction-active);--ds-focus-ring-color:var(--color-media-interaction-focus)}.ds-interaction-fill--on-always-dark.sc-ds-chart-legend-h,.ds-interaction-fill--on-always-dark.sc-ds-chart-legend{--ds-interaction-hover:var(--color-always-dark-interaction-hover);--ds-interaction-pressed:var(--color-always-dark-interaction-pressed);--ds-interaction-active:var(--color-always-dark-interaction-active);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.ds-interaction-fill--on-navigation.sc-ds-chart-legend-h,.ds-interaction-fill--on-navigation.sc-ds-chart-legend{--ds-interaction-hover:var(--color-navigation-interaction-hover);--ds-interaction-pressed:var(--color-navigation-interaction-pressed);--ds-interaction-active:var(--color-navigation-interaction-active);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}@media (forced-colors: active){.ds-interaction-fill.sc-ds-chart-legend-h::after,.ds-interaction-fill.sc-ds-chart-legend::after{box-shadow:none;outline:var(--ds-interaction-border-width) solid       var(--ds-forced-color-control-boundary);outline-offset:calc(-1 * var(--ds-interaction-border-width))}.ds-interaction-fill--selected.sc-ds-chart-legend-h::before,.ds-interaction-fill--selected.sc-ds-chart-legend::before{background:transparent;outline:var(--dimension-stroke-width-025) solid var(--ds-forced-color-selected);outline-offset:calc(-1 * var(--dimension-stroke-width-025))}}@media (forced-colors: active) and (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-chart-legend-h:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after,.ds-interaction-fill.sc-ds-chart-legend:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after{outline-color:var(--ds-forced-color-selected);outline-width:var(--dimension-stroke-width-012)}}@media (forced-colors: active){.sc-ds-chart-legend:root,.sc-ds-chart-legend-h,.ds-forced-colors-scope.sc-ds-chart-legend{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.sc-ds-chart-legend-h{--ds-focus-ring-width:var(--dimension-stroke-width-025, 2px);--ds-focus-ring-offset:var(--dimension-space-025, 2px);--ds-focus-ring-color:var(--color-interaction-focus)}.ds-focus-ring.sc-ds-chart-legend-h,.ds-focus-ring.sc-ds-chart-legend,.ds-focus-ring-inset.sc-ds-chart-legend-h,.ds-focus-ring-inset.sc-ds-chart-legend{outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.ds-focus-ring.sc-ds-chart-legend-h:focus-visible,.ds-focus-ring.sc-ds-chart-legend:focus-visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring.ds-focus-ring--visible.sc-ds-chart-legend-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-chart-legend{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring-inset.sc-ds-chart-legend-h:focus-visible,.ds-focus-ring-inset.sc-ds-chart-legend:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-chart-legend-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-chart-legend:focus-visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-chart-legend-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-chart-legend{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-chart-legend-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-chart-legend::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}@media (forced-colors: active){.sc-ds-chart-legend-h{--ds-focus-ring-color:var(--ds-forced-color-selected)}}@media (forced-colors: active){.sc-ds-chart-legend:root,.sc-ds-chart-legend-h,.ds-forced-colors-scope.sc-ds-chart-legend{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.sc-ds-chart-legend-h{display:block;font-family:var(--typography-font-family);user-select:none}.chart-legend__list.sc-ds-chart-legend{margin:0;padding:0;list-style:none}.chart-legend__list-item.sc-ds-chart-legend{display:contents}.chart-legend--vertical.sc-ds-chart-legend-h .chart-legend__list.sc-ds-chart-legend{display:grid;grid-template-columns:auto minmax(0, 1fr) var(--dimension-size-600);column-gap:var(--dimension-space-075);row-gap:var(--dimension-space-050)}.chart-legend--vertical.chart-legend--show-percentage.sc-ds-chart-legend-h .chart-legend__list.sc-ds-chart-legend{grid-template-columns:auto minmax(0, 1fr) var(--dimension-size-600) var(--dimension-size-800)}.chart-legend--vertical.sc-ds-chart-legend-h .chart-legend__item.sc-ds-chart-legend{grid-column:1 / -1;display:grid;grid-template-columns:subgrid}.chart-legend--horizontal.sc-ds-chart-legend-h .chart-legend__list.sc-ds-chart-legend{display:flex;flex-wrap:wrap;gap:var(--dimension-space-200)}.chart-legend--horizontal.sc-ds-chart-legend-h .chart-legend__item.sc-ds-chart-legend{display:flex;gap:var(--dimension-space-100)}.chart-legend__item.sc-ds-chart-legend{box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));align-items:center;padding:0 var(--ds-control-padding-inline, var(--dimension-space-075));border-radius:var(--ds-control-radius, var(--dimension-radius-025));text-decoration:none;color:inherit;transition:opacity var(--effect-motion-short-2)}.chart-legend__item--dimmed.sc-ds-chart-legend{opacity:var(--effect-opacity-medium)}@media (prefers-reduced-motion: reduce){.chart-legend__item.sc-ds-chart-legend{transition:none}}.chart-legend__item--interactive.sc-ds-chart-legend{cursor:pointer}.chart-legend__item.sc-ds-chart-legend>*.sc-ds-chart-legend{position:relative;z-index:2}.chart-legend__swatch-box.sc-ds-chart-legend{width:var(--dimension-size-250);height:var(--dimension-size-250);display:flex;align-items:center;justify-content:center;flex-shrink:0}.chart-legend__swatch.sc-ds-chart-legend{width:var(--dimension-space-150);height:var(--dimension-space-150);border-radius:var(--dimension-radius-025);flex-shrink:0}.chart-legend__label.sc-ds-chart-legend{min-width:0}.chart-legend__percentage.sc-ds-chart-legend{width:100%;min-width:0;text-align:right}.chart-legend__value.sc-ds-chart-legend{width:100%;text-align:right;min-width:0}@media (forced-colors: active){.chart-legend__swatch.sc-ds-chart-legend{forced-color-adjust:none;outline:var(--dimension-stroke-width-012) solid var(--ds-forced-color-content)}}`;const g=e(class e extends n{constructor(e){super();if(e!==false){this.__registerHost()}this.dsItemHover=t(this,"dsItemHover");this.dsItemClick=t(this,"dsItemClick");this.items=[];this.direction="vertical";this.showPercentage=true;this.percentageDecimals=1;this.highlightOnHover=true;this.activeLabel=null;this.hoveredLabel=null;this.handleClick=(e,n)=>{this.dsItemClick.emit({item:e,originalEvent:n})}}handleHighlightOnHoverChange(e){if(!e)this.hoveredLabel=null}handleHover(e){this.hoveredLabel=e?.label??null;this.dsItemHover.emit(e)}render(){const e=this.items.reduce(((e,n)=>e+(n.value??0)),0);const n=this.activeLabel??(this.highlightOnHover?this.hoveredLabel:null);return s(r,{key:"56768db4666c6250db91d3e21bbba23387335982",class:{"chart-legend":true,[`chart-legend--${this.direction}`]:true,"chart-legend--show-percentage":this.showPercentage}},s("ul",{key:"a2419dd08afef5debc882dc83541458851ab9354",class:"chart-legend__list",onMouseLeave:this.highlightOnHover?()=>this.handleHover(null):undefined},this.items.map(((t,r)=>{const i=n!=null&&t.label!==n;const c=d(t.href);const h=c?"a":"div";const g=t.value!=null?a(e?t.value/e:0,this.percentageDecimals,this.locale):"";return s("li",{class:"chart-legend__list-item",key:t.label},s(h,{class:{"chart-legend__item":true,"chart-legend__item--interactive":!!c,"chart-legend__item--dimmed":i,"ds-control--md":true,"ds-interaction-fill":this.highlightOnHover||!!c,"ds-focus-ring-inset":!!c},href:c,onClick:c?e=>this.handleClick(t,e):undefined,onMouseEnter:this.highlightOnHover?()=>this.handleHover(t):undefined,onFocus:this.highlightOnHover?()=>this.handleHover(t):undefined,onBlur:this.highlightOnHover?()=>this.handleHover(null):undefined},s("span",{class:"chart-legend__swatch-box"},s("span",{class:"chart-legend__swatch",style:{backgroundColor:t.color??o(r)}})),s("ds-text",{class:"chart-legend__label",as:"span",variant:"text-body-medium",color:"secondary",lineTruncation:1,title:t.label},t.label),t.value!=null&&s("ds-text",{class:"chart-legend__value",as:"span",variant:"text-body-medium",color:"primary",lineTruncation:1,align:"right",fontFeature:"tabular-nums",title:String(t.value)},l(t.value,this.locale)),t.value!=null&&this.showPercentage&&s("ds-text",{class:"chart-legend__percentage",as:"span",variant:"text-body-medium",color:"primary",lineTruncation:1,align:"right",fontFeature:"tabular-nums",title:g},g)))}))))}static get watchers(){return{highlightOnHover:[{handleHighlightOnHoverChange:0}]}}static get style(){return h()}},[2,"ds-chart-legend",{locale:[1],items:[16],direction:[1],showPercentage:[4,"show-percentage"],percentageDecimals:[2,"percentage-decimals"],highlightOnHover:[4,"highlight-on-hover"],activeLabel:[1,"active-label"],hoveredLabel:[32]},undefined,{highlightOnHover:[{handleHighlightOnHoverChange:0}]}]);function f(){if(typeof customElements==="undefined"){return}const e=["ds-chart-legend","ds-text"];e.forEach((e=>{switch(e){case"ds-chart-legend":if(!customElements.get(i(e))){customElements.define(i(e),g)}break;case"ds-text":if(!customElements.get(i(e))){c()}break}}))}f();const v=g;const u=f;export{v as DsChartLegend,u as defineCustomElement};
 //# sourceMappingURL=ds-chart-legend.js.map

package/dist/components/ds-chart-legend.js.map

@@ -1 +1 @@
-{"version":3,"names":["chartLegendCss","ChartLegend","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","items","direction","showPercentage","percentageDecimals","highlightOnHover","activeLabel","hoveredLabel","handleClick","item","originalEvent","dsItemClick","emit","handleHighlightOnHoverChange","enabled","handleHover","label","dsItemHover","render","total","reduce","sum","value","highlightLabel","h","Host","key","class","onMouseLeave","undefined","map","i","isDimmed","href","resolveSafeUrl","RowTag","percentage","formatPercentage","locale","onClick","e","onMouseEnter","onFocus","onBlur","style","backgroundColor","color","categoryColor","as","variant","lineTruncation","title","align","fontFeature","String","formatCompactNumber"],"sources":["src/wc/components/ChartLegend/ChartLegend.css?tag=ds-chart-legend&encapsulation=scoped","src/wc/components/ChartLegend/ChartLegend.tsx"],"sourcesContent":["@import '../../utils/control-density.css';\n@import '../../utils/interaction-fill.css';\n@import '../../utils/focus-ring.css';\n\n:host {\n  display: block;\n  font-family: var(--typography-font-family);\n  user-select: none;\n}\n\n.chart-legend__list {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n/* Non-visual wrapper — the real box is .chart-legend__item so optional highlight/link\n   affordances cover the whole row while children align to the shared grid columns. */\n.chart-legend__list-item {\n  display: contents;\n}\n\n:host(.chart-legend--vertical) .chart-legend__list {\n  display: grid;\n  grid-template-columns: auto minmax(0, 1fr) var(--dimension-size-600);\n  column-gap: var(--dimension-space-075);\n  row-gap: var(--dimension-space-050);\n}\n\n:host(.chart-legend--vertical.chart-legend--show-percentage) .chart-legend__list {\n  grid-template-columns: auto minmax(0, 1fr) var(--dimension-size-600) var(--dimension-size-800);\n}\n\n:host(.chart-legend--vertical) .chart-legend__item {\n  grid-column: 1 / -1;\n  display: grid;\n  grid-template-columns: subgrid;\n}\n\n:host(.chart-legend--horizontal) .chart-legend__list {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--dimension-space-200);\n}\n\n:host(.chart-legend--horizontal) .chart-legend__item {\n  display: flex;\n  gap: var(--dimension-space-100);\n}\n\n/*\n * Density: md control recipe (height / pad / radius / label inset).\n * Hover/press: `.ds-interaction-fill` (token overlay on ::after).\n */\n.chart-legend__item {\n  box-sizing: border-box;\n  height: var(--ds-control-height, var(--dimension-size-400));\n  align-items: center;\n  padding: 0 var(--ds-control-padding-inline, var(--dimension-space-075));\n  border-radius: var(--ds-control-radius, var(--dimension-radius-025));\n  text-decoration: none;\n  color: inherit;\n  transition: opacity var(--effect-motion-short-2);\n}\n\n.chart-legend__item--dimmed {\n  opacity: var(--effect-opacity-medium);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .chart-legend__item {\n    transition: none;\n  }\n}\n\n.chart-legend__item--interactive {\n  cursor: pointer;\n}\n\n/* Raise row content above interaction fills (positive z-index on util layers). */\n.chart-legend__item > * {\n  position: relative;\n  z-index: 2;\n}\n\n.chart-legend__swatch-box {\n  width: var(--dimension-size-250);\n  height: var(--dimension-size-250);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.chart-legend__swatch {\n  width: var(--dimension-space-150);\n  height: var(--dimension-space-150);\n  border-radius: var(--dimension-radius-025);\n  flex-shrink: 0;\n}\n\n.chart-legend__label {\n  min-width: 0;\n}\n\n.chart-legend__percentage {\n  width: 100%;\n  min-width: 0;\n  text-align: right;\n}\n\n.chart-legend__value {\n  width: 100%;\n  text-align: right;\n  min-width: 0;\n}\n","import { Component, Prop, State, Event, EventEmitter, h, Host, Watch } from '@stencil/core';\nimport { categoryColor } from '../../utils/chart-colors';\nimport { formatCompactNumber, formatPercentage, resolveSafeUrl } from '../../utils';\nimport type { ChartLegendItem } from '../../utils/chart-types';\n\nexport type ChartLegendDirection = 'vertical' | 'horizontal';\nexport type ChartLegendPercentageDecimals = 1 | 2;\n\n/**\n * Base legend for `ds-chart-*` components. Webapp's Overview widgets each style\n * legends differently (list w/ values, compact chips, bare swatches, external\n * stat callouts) — this covers the common \"swatch + label + optional value\" case.\n * Consumers who need a different treatment skip this component entirely and\n * render their own markup against the same `ChartDatum[]` data.\n */\n@Component({\n  tag: 'ds-chart-legend',\n  styleUrl: 'ChartLegend.css',\n  scoped: true,\n})\nexport class ChartLegend {\n  @Prop() locale: string | undefined;\n  /** Legend entries. Set as a JS property (not an HTML attribute). */\n  @Prop() items: ChartLegendItem[] = [];\n  @Prop() direction: ChartLegendDirection = 'vertical';\n  /** Show each item's share of the total (of items with a `value`) alongside its count. */\n  @Prop() showPercentage: boolean = true;\n  /** Fixed number of decimal places shown for percentages. */\n  @Prop() percentageDecimals: ChartLegendPercentageDecimals = 1;\n  /** Let local pointer/focus movement highlight one item and emit `dsItemHover`. */\n  @Prop() highlightOnHover: boolean = true;\n  /**\n   * Externally controlled highlight, matched by `label` — e.g. drive this from a sibling\n   * chart's `dsSliceHover` event to keep chart and legend hover in sync. Only dims the other\n   * rows' opacity (like a chart dimming its other slices) — it never shows the hover-fill,\n   * since that's reserved for a real pointer/keyboard interaction on this row.\n   */\n  @Prop() activeLabel: string | null = null;\n\n  /** Own pointer/focus hover, kept separate from `activeLabel` so the hover-fill (a \"you can\n   * click here\" affordance) never shows just because an external row was synced in. */\n  @State() private hoveredLabel: string | null = null;\n\n  /** Fires on row hover/focus with the item, or `null` on leave/blur. */\n  @Event() dsItemHover!: EventEmitter<ChartLegendItem | null>;\n  /** Fires when a deep-linkable row (`item.href` set) is activated. */\n  @Event() dsItemClick!: EventEmitter<{ item: ChartLegendItem; originalEvent: MouseEvent }>;\n\n  @Watch('highlightOnHover')\n  handleHighlightOnHoverChange(enabled: boolean) {\n    if (!enabled) this.hoveredLabel = null;\n  }\n\n  private handleHover(item: ChartLegendItem | null) {\n    this.hoveredLabel = item?.label ?? null;\n    this.dsItemHover.emit(item);\n  }\n\n  private handleClick = (item: ChartLegendItem, originalEvent: MouseEvent) => {\n    this.dsItemClick.emit({ item, originalEvent });\n  };\n\n  render() {\n    const total = this.items.reduce((sum, item) => sum + (item.value ?? 0), 0);\n    // Highlight/dim from either this component's own hover or an externally-synced label\n    // (e.g. a sibling ds-chart-donut slice) — same mechanism ds-chart-donut uses for its slices.\n    const highlightLabel = this.activeLabel ?? (this.highlightOnHover ? this.hoveredLabel : null);\n\n    return (\n      <Host\n        class={{\n          'chart-legend': true,\n          [`chart-legend--${this.direction}`]: true,\n          'chart-legend--show-percentage': this.showPercentage,\n        }}\n      >\n        {/* mouseleave lives on the list, not each row — the row-gap between items is still\n            inside the list's box, so crossing it while moving between rows never fires this.\n            Only actually leaving the whole list does, and that clears with no delay. */}\n        <ul\n          class=\"chart-legend__list\"\n          onMouseLeave={this.highlightOnHover ? () => this.handleHover(null) : undefined}\n        >\n          {this.items.map((item, i) => {\n            const isDimmed = highlightLabel != null && item.label !== highlightLabel;\n            const href = resolveSafeUrl(item.href);\n            const RowTag = href ? 'a' : 'div';\n            const percentage = item.value != null\n              ? formatPercentage(total ? item.value / total : 0, this.percentageDecimals, this.locale)\n              : '';\n\n            return (\n              <li class=\"chart-legend__list-item\" key={item.label}>\n                <RowTag\n                  class={{\n                    'chart-legend__item': true,\n                    'chart-legend__item--interactive': !!href,\n                    'chart-legend__item--dimmed': isDimmed,\n                    'ds-control--md': true,\n                    'ds-interaction-fill': this.highlightOnHover || !!href,\n                    'ds-focus-ring-inset': !!href,\n                  }}\n                  href={href}\n                  onClick={href ? (e: MouseEvent) => this.handleClick(item, e) : undefined}\n                  onMouseEnter={\n                    this.highlightOnHover ? () => this.handleHover(item) : undefined\n                  }\n                  onFocus={this.highlightOnHover ? () => this.handleHover(item) : undefined}\n                  onBlur={this.highlightOnHover ? () => this.handleHover(null) : undefined}\n                >\n                  <span class=\"chart-legend__swatch-box\">\n                    <span class=\"chart-legend__swatch\" style={{ backgroundColor: item.color ?? categoryColor(i) }} />\n                  </span>\n                  <ds-text\n                    class=\"chart-legend__label\"\n                    as=\"span\"\n                    variant=\"text-body-medium\"\n                    color=\"secondary\"\n                    lineTruncation={1}\n                    title={item.label}\n                  >\n                    {item.label}\n                  </ds-text>\n                  {item.value != null && (\n                    <ds-text\n                      class=\"chart-legend__value\"\n                      as=\"span\"\n                      variant=\"text-body-medium\"\n                      color=\"primary\"\n                      lineTruncation={1}\n                      align=\"right\"\n                      fontFeature=\"tabular-nums\"\n                      title={String(item.value)}\n                    >\n                      {formatCompactNumber(item.value, this.locale)}\n                    </ds-text>\n                  )}\n                  {item.value != null && this.showPercentage && (\n                    <ds-text\n                      class=\"chart-legend__percentage\"\n                      as=\"span\"\n                      variant=\"text-body-medium\"\n                      color=\"primary\"\n                      lineTruncation={1}\n                      align=\"right\"\n                      fontFeature=\"tabular-nums\"\n                      title={percentage}\n                    >\n                      {percentage}\n                    </ds-text>\n                  )}\n                </RowTag>\n              </li>\n            );\n          })}\n        </ul>\n      </Host>\n    );\n  }\n}\n"],"mappings":"sPAAA,MAAMA,EAAiB,IAAM,gxV,MCoBhBC,EAAWC,EAAA,MAAAD,UAAAE,EALxB,WAAAC,CAAAC,G,0HAQUC,KAAAC,MAA2B,GAC3BD,KAAAE,UAAkC,WAElCF,KAAAG,eAA0B,KAE1BH,KAAAI,mBAAoD,EAEpDJ,KAAAK,iBAA4B,KAO5BL,KAAAM,YAA6B,KAIpBN,KAAAO,aAA8B,KAiBvCP,KAAAQ,YAAc,CAACC,EAAuBC,KAC5CV,KAAKW,YAAYC,KAAK,CAAEH,OAAMC,iBAAgB,CAoGjD,CA9GC,4BAAAG,CAA6BC,GAC3B,IAAKA,EAASd,KAAKO,aAAe,I,CAG5B,WAAAQ,CAAYN,GAClBT,KAAKO,aAAeE,GAAMO,OAAS,KACnChB,KAAKiB,YAAYL,KAAKH,E,CAOxB,MAAAS,GACE,MAAMC,EAAQnB,KAAKC,MAAMmB,QAAO,CAACC,EAAKZ,IAASY,GAAOZ,EAAKa,OAAS,IAAI,GAGxE,MAAMC,EAAiBvB,KAAKM,cAAgBN,KAAKK,iBAAmBL,KAAKO,aAAe,MAExF,OACEiB,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAO,CACL,eAAgB,KAChB,CAAC,iBAAiB3B,KAAKE,aAAc,KACrC,gCAAiCF,KAAKG,iBAMxCqB,EAAA,MAAAE,IAAA,2CACEC,MAAM,qBACNC,aAAc5B,KAAKK,iBAAmB,IAAML,KAAKe,YAAY,MAAQc,WAEpE7B,KAAKC,MAAM6B,KAAI,CAACrB,EAAMsB,KACrB,MAAMC,EAAWT,GAAkB,MAAQd,EAAKO,QAAUO,EAC1D,MAAMU,EAAOC,EAAezB,EAAKwB,MACjC,MAAME,EAASF,EAAO,IAAM,MAC5B,MAAMG,EAAa3B,EAAKa,OAAS,KAC7Be,EAAiBlB,EAAQV,EAAKa,MAAQH,EAAQ,EAAGnB,KAAKI,mBAAoBJ,KAAKsC,QAC/E,GAEJ,OACEd,EAAA,MAAIG,MAAM,0BAA0BD,IAAKjB,EAAKO,OAC5CQ,EAACW,EAAM,CACLR,MAAO,CACL,qBAAsB,KACtB,oCAAqCM,EACrC,6BAA8BD,EAC9B,iBAAkB,KAClB,sBAAuBhC,KAAKK,oBAAsB4B,EAClD,wBAAyBA,GAE3BA,KAAMA,EACNM,QAASN,EAAQO,GAAkBxC,KAAKQ,YAAYC,EAAM+B,GAAKX,UAC/DY,aACEzC,KAAKK,iBAAmB,IAAML,KAAKe,YAAYN,GAAQoB,UAEzDa,QAAS1C,KAAKK,iBAAmB,IAAML,KAAKe,YAAYN,GAAQoB,UAChEc,OAAQ3C,KAAKK,iBAAmB,IAAML,KAAKe,YAAY,MAAQc,WAE/DL,EAAA,QAAMG,MAAM,4BACVH,EAAA,QAAMG,MAAM,uBAAuBiB,MAAO,CAAEC,gBAAiBpC,EAAKqC,OAASC,EAAchB,OAE3FP,EAAA,WACEG,MAAM,sBACNqB,GAAG,OACHC,QAAQ,mBACRH,MAAM,YACNI,eAAgB,EAChBC,MAAO1C,EAAKO,OAEXP,EAAKO,OAEPP,EAAKa,OAAS,MACbE,EAAA,WACEG,MAAM,sBACNqB,GAAG,OACHC,QAAQ,mBACRH,MAAM,UACNI,eAAgB,EAChBE,MAAM,QACNC,YAAY,eACZF,MAAOG,OAAO7C,EAAKa,QAElBiC,EAAoB9C,EAAKa,MAAOtB,KAAKsC,SAGzC7B,EAAKa,OAAS,MAAQtB,KAAKG,gBAC1BqB,EAAA,WACEG,MAAM,2BACNqB,GAAG,OACHC,QAAQ,mBACRH,MAAM,UACNI,eAAgB,EAChBE,MAAM,QACNC,YAAY,eACZF,MAAOf,GAENA,IAIJ,K","ignoreList":[]}
+{"version":3,"names":["chartLegendCss","ChartLegend","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","items","direction","showPercentage","percentageDecimals","highlightOnHover","activeLabel","hoveredLabel","handleClick","item","originalEvent","dsItemClick","emit","handleHighlightOnHoverChange","enabled","handleHover","label","dsItemHover","render","total","reduce","sum","value","highlightLabel","h","Host","key","class","onMouseLeave","undefined","map","i","isDimmed","href","resolveSafeUrl","RowTag","percentage","formatPercentage","locale","onClick","e","onMouseEnter","onFocus","onBlur","style","backgroundColor","color","categoryColor","as","variant","lineTruncation","title","align","fontFeature","String","formatCompactNumber"],"sources":["src/wc/components/ChartLegend/ChartLegend.css?tag=ds-chart-legend&encapsulation=scoped","src/wc/components/ChartLegend/ChartLegend.tsx"],"sourcesContent":["@import '../../utils/control-density.css';\n@import '../../utils/interaction-fill.css';\n@import '../../utils/focus-ring.css';\n@import '../../utils/forced-colors.css';\n\n:host {\n  display: block;\n  font-family: var(--typography-font-family);\n  user-select: none;\n}\n\n.chart-legend__list {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n/* Non-visual wrapper — the real box is .chart-legend__item so optional highlight/link\n   affordances cover the whole row while children align to the shared grid columns. */\n.chart-legend__list-item {\n  display: contents;\n}\n\n:host(.chart-legend--vertical) .chart-legend__list {\n  display: grid;\n  grid-template-columns: auto minmax(0, 1fr) var(--dimension-size-600);\n  column-gap: var(--dimension-space-075);\n  row-gap: var(--dimension-space-050);\n}\n\n:host(.chart-legend--vertical.chart-legend--show-percentage) .chart-legend__list {\n  grid-template-columns: auto minmax(0, 1fr) var(--dimension-size-600) var(--dimension-size-800);\n}\n\n:host(.chart-legend--vertical) .chart-legend__item {\n  grid-column: 1 / -1;\n  display: grid;\n  grid-template-columns: subgrid;\n}\n\n:host(.chart-legend--horizontal) .chart-legend__list {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--dimension-space-200);\n}\n\n:host(.chart-legend--horizontal) .chart-legend__item {\n  display: flex;\n  gap: var(--dimension-space-100);\n}\n\n/*\n * Density: md control recipe (height / pad / radius / label inset).\n * Hover/press: `.ds-interaction-fill` (token overlay on ::after).\n */\n.chart-legend__item {\n  box-sizing: border-box;\n  height: var(--ds-control-height, var(--dimension-size-400));\n  align-items: center;\n  padding: 0 var(--ds-control-padding-inline, var(--dimension-space-075));\n  border-radius: var(--ds-control-radius, var(--dimension-radius-025));\n  text-decoration: none;\n  color: inherit;\n  transition: opacity var(--effect-motion-short-2);\n}\n\n.chart-legend__item--dimmed {\n  opacity: var(--effect-opacity-medium);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .chart-legend__item {\n    transition: none;\n  }\n}\n\n.chart-legend__item--interactive {\n  cursor: pointer;\n}\n\n/* Raise row content above interaction fills (positive z-index on util layers). */\n.chart-legend__item > * {\n  position: relative;\n  z-index: 2;\n}\n\n.chart-legend__swatch-box {\n  width: var(--dimension-size-250);\n  height: var(--dimension-size-250);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.chart-legend__swatch {\n  width: var(--dimension-space-150);\n  height: var(--dimension-space-150);\n  border-radius: var(--dimension-radius-025);\n  flex-shrink: 0;\n}\n\n.chart-legend__label {\n  min-width: 0;\n}\n\n.chart-legend__percentage {\n  width: 100%;\n  min-width: 0;\n  text-align: right;\n}\n\n.chart-legend__value {\n  width: 100%;\n  text-align: right;\n  min-width: 0;\n}\n\n@media (forced-colors: active) {\n  .chart-legend__swatch {\n    forced-color-adjust: none;\n    outline: var(--dimension-stroke-width-012) solid var(--ds-forced-color-content);\n  }\n}\n","import { Component, Prop, State, Event, EventEmitter, h, Host, Watch } from '@stencil/core';\nimport { categoryColor } from '../../utils/chart-colors';\nimport { formatCompactNumber, formatPercentage, resolveSafeUrl } from '../../utils';\nimport type { ChartLegendItem } from '../../utils/chart-types';\n\nexport type ChartLegendDirection = 'vertical' | 'horizontal';\nexport type ChartLegendPercentageDecimals = 1 | 2;\n\n/**\n * Base legend for `ds-chart-*` components. Webapp's Overview widgets each style\n * legends differently (list w/ values, compact chips, bare swatches, external\n * stat callouts) — this covers the common \"swatch + label + optional value\" case.\n * Consumers who need a different treatment skip this component entirely and\n * render their own markup against the same `ChartDatum[]` data.\n */\n@Component({\n  tag: 'ds-chart-legend',\n  styleUrl: 'ChartLegend.css',\n  scoped: true,\n})\nexport class ChartLegend {\n  @Prop() locale: string | undefined;\n  /** Legend entries. Set as a JS property (not an HTML attribute). */\n  @Prop() items: ChartLegendItem[] = [];\n  @Prop() direction: ChartLegendDirection = 'vertical';\n  /** Show each item's share of the total (of items with a `value`) alongside its count. */\n  @Prop() showPercentage: boolean = true;\n  /** Fixed number of decimal places shown for percentages. */\n  @Prop() percentageDecimals: ChartLegendPercentageDecimals = 1;\n  /** Let local pointer/focus movement highlight one item and emit `dsItemHover`. */\n  @Prop() highlightOnHover: boolean = true;\n  /**\n   * Externally controlled highlight, matched by `label` — e.g. drive this from a sibling\n   * chart's `dsSliceHover` event to keep chart and legend hover in sync. Only dims the other\n   * rows' opacity (like a chart dimming its other slices) — it never shows the hover-fill,\n   * since that's reserved for a real pointer/keyboard interaction on this row.\n   */\n  @Prop() activeLabel: string | null = null;\n\n  /** Own pointer/focus hover, kept separate from `activeLabel` so the hover-fill (a \"you can\n   * click here\" affordance) never shows just because an external row was synced in. */\n  @State() private hoveredLabel: string | null = null;\n\n  /** Fires on row hover/focus with the item, or `null` on leave/blur. */\n  @Event() dsItemHover!: EventEmitter<ChartLegendItem | null>;\n  /** Fires when a deep-linkable row (`item.href` set) is activated. */\n  @Event() dsItemClick!: EventEmitter<{ item: ChartLegendItem; originalEvent: MouseEvent }>;\n\n  @Watch('highlightOnHover')\n  handleHighlightOnHoverChange(enabled: boolean) {\n    if (!enabled) this.hoveredLabel = null;\n  }\n\n  private handleHover(item: ChartLegendItem | null) {\n    this.hoveredLabel = item?.label ?? null;\n    this.dsItemHover.emit(item);\n  }\n\n  private handleClick = (item: ChartLegendItem, originalEvent: MouseEvent) => {\n    this.dsItemClick.emit({ item, originalEvent });\n  };\n\n  render() {\n    const total = this.items.reduce((sum, item) => sum + (item.value ?? 0), 0);\n    // Highlight/dim from either this component's own hover or an externally-synced label\n    // (e.g. a sibling ds-chart-donut slice) — same mechanism ds-chart-donut uses for its slices.\n    const highlightLabel = this.activeLabel ?? (this.highlightOnHover ? this.hoveredLabel : null);\n\n    return (\n      <Host\n        class={{\n          'chart-legend': true,\n          [`chart-legend--${this.direction}`]: true,\n          'chart-legend--show-percentage': this.showPercentage,\n        }}\n      >\n        {/* mouseleave lives on the list, not each row — the row-gap between items is still\n            inside the list's box, so crossing it while moving between rows never fires this.\n            Only actually leaving the whole list does, and that clears with no delay. */}\n        <ul\n          class=\"chart-legend__list\"\n          onMouseLeave={this.highlightOnHover ? () => this.handleHover(null) : undefined}\n        >\n          {this.items.map((item, i) => {\n            const isDimmed = highlightLabel != null && item.label !== highlightLabel;\n            const href = resolveSafeUrl(item.href);\n            const RowTag = href ? 'a' : 'div';\n            const percentage = item.value != null\n              ? formatPercentage(total ? item.value / total : 0, this.percentageDecimals, this.locale)\n              : '';\n\n            return (\n              <li class=\"chart-legend__list-item\" key={item.label}>\n                <RowTag\n                  class={{\n                    'chart-legend__item': true,\n                    'chart-legend__item--interactive': !!href,\n                    'chart-legend__item--dimmed': isDimmed,\n                    'ds-control--md': true,\n                    'ds-interaction-fill': this.highlightOnHover || !!href,\n                    'ds-focus-ring-inset': !!href,\n                  }}\n                  href={href}\n                  onClick={href ? (e: MouseEvent) => this.handleClick(item, e) : undefined}\n                  onMouseEnter={\n                    this.highlightOnHover ? () => this.handleHover(item) : undefined\n                  }\n                  onFocus={this.highlightOnHover ? () => this.handleHover(item) : undefined}\n                  onBlur={this.highlightOnHover ? () => this.handleHover(null) : undefined}\n                >\n                  <span class=\"chart-legend__swatch-box\">\n                    <span class=\"chart-legend__swatch\" style={{ backgroundColor: item.color ?? categoryColor(i) }} />\n                  </span>\n                  <ds-text\n                    class=\"chart-legend__label\"\n                    as=\"span\"\n                    variant=\"text-body-medium\"\n                    color=\"secondary\"\n                    lineTruncation={1}\n                    title={item.label}\n                  >\n                    {item.label}\n                  </ds-text>\n                  {item.value != null && (\n                    <ds-text\n                      class=\"chart-legend__value\"\n                      as=\"span\"\n                      variant=\"text-body-medium\"\n                      color=\"primary\"\n                      lineTruncation={1}\n                      align=\"right\"\n                      fontFeature=\"tabular-nums\"\n                      title={String(item.value)}\n                    >\n                      {formatCompactNumber(item.value, this.locale)}\n                    </ds-text>\n                  )}\n                  {item.value != null && this.showPercentage && (\n                    <ds-text\n                      class=\"chart-legend__percentage\"\n                      as=\"span\"\n                      variant=\"text-body-medium\"\n                      color=\"primary\"\n                      lineTruncation={1}\n                      align=\"right\"\n                      fontFeature=\"tabular-nums\"\n                      title={percentage}\n                    >\n                      {percentage}\n                    </ds-text>\n                  )}\n                </RowTag>\n              </li>\n            );\n          })}\n        </ul>\n      </Host>\n    );\n  }\n}\n"],"mappings":"sPAAA,MAAMA,EAAiB,IAAM,kla,MCoBhBC,EAAWC,EAAA,MAAAD,UAAAE,EALxB,WAAAC,CAAAC,G,0HAQUC,KAAAC,MAA2B,GAC3BD,KAAAE,UAAkC,WAElCF,KAAAG,eAA0B,KAE1BH,KAAAI,mBAAoD,EAEpDJ,KAAAK,iBAA4B,KAO5BL,KAAAM,YAA6B,KAIpBN,KAAAO,aAA8B,KAiBvCP,KAAAQ,YAAc,CAACC,EAAuBC,KAC5CV,KAAKW,YAAYC,KAAK,CAAEH,OAAMC,iBAAgB,CAoGjD,CA9GC,4BAAAG,CAA6BC,GAC3B,IAAKA,EAASd,KAAKO,aAAe,I,CAG5B,WAAAQ,CAAYN,GAClBT,KAAKO,aAAeE,GAAMO,OAAS,KACnChB,KAAKiB,YAAYL,KAAKH,E,CAOxB,MAAAS,GACE,MAAMC,EAAQnB,KAAKC,MAAMmB,QAAO,CAACC,EAAKZ,IAASY,GAAOZ,EAAKa,OAAS,IAAI,GAGxE,MAAMC,EAAiBvB,KAAKM,cAAgBN,KAAKK,iBAAmBL,KAAKO,aAAe,MAExF,OACEiB,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAO,CACL,eAAgB,KAChB,CAAC,iBAAiB3B,KAAKE,aAAc,KACrC,gCAAiCF,KAAKG,iBAMxCqB,EAAA,MAAAE,IAAA,2CACEC,MAAM,qBACNC,aAAc5B,KAAKK,iBAAmB,IAAML,KAAKe,YAAY,MAAQc,WAEpE7B,KAAKC,MAAM6B,KAAI,CAACrB,EAAMsB,KACrB,MAAMC,EAAWT,GAAkB,MAAQd,EAAKO,QAAUO,EAC1D,MAAMU,EAAOC,EAAezB,EAAKwB,MACjC,MAAME,EAASF,EAAO,IAAM,MAC5B,MAAMG,EAAa3B,EAAKa,OAAS,KAC7Be,EAAiBlB,EAAQV,EAAKa,MAAQH,EAAQ,EAAGnB,KAAKI,mBAAoBJ,KAAKsC,QAC/E,GAEJ,OACEd,EAAA,MAAIG,MAAM,0BAA0BD,IAAKjB,EAAKO,OAC5CQ,EAACW,EAAM,CACLR,MAAO,CACL,qBAAsB,KACtB,oCAAqCM,EACrC,6BAA8BD,EAC9B,iBAAkB,KAClB,sBAAuBhC,KAAKK,oBAAsB4B,EAClD,wBAAyBA,GAE3BA,KAAMA,EACNM,QAASN,EAAQO,GAAkBxC,KAAKQ,YAAYC,EAAM+B,GAAKX,UAC/DY,aACEzC,KAAKK,iBAAmB,IAAML,KAAKe,YAAYN,GAAQoB,UAEzDa,QAAS1C,KAAKK,iBAAmB,IAAML,KAAKe,YAAYN,GAAQoB,UAChEc,OAAQ3C,KAAKK,iBAAmB,IAAML,KAAKe,YAAY,MAAQc,WAE/DL,EAAA,QAAMG,MAAM,4BACVH,EAAA,QAAMG,MAAM,uBAAuBiB,MAAO,CAAEC,gBAAiBpC,EAAKqC,OAASC,EAAchB,OAE3FP,EAAA,WACEG,MAAM,sBACNqB,GAAG,OACHC,QAAQ,mBACRH,MAAM,YACNI,eAAgB,EAChBC,MAAO1C,EAAKO,OAEXP,EAAKO,OAEPP,EAAKa,OAAS,MACbE,EAAA,WACEG,MAAM,sBACNqB,GAAG,OACHC,QAAQ,mBACRH,MAAM,UACNI,eAAgB,EAChBE,MAAM,QACNC,YAAY,eACZF,MAAOG,OAAO7C,EAAKa,QAElBiC,EAAoB9C,EAAKa,MAAOtB,KAAKsC,SAGzC7B,EAAKa,OAAS,MAAQtB,KAAKG,gBAC1BqB,EAAA,WACEG,MAAM,2BACNqB,GAAG,OACHC,QAAQ,mBACRH,MAAM,UACNI,eAAgB,EAChBE,MAAM,QACNC,YAAY,eACZF,MAAOf,GAENA,IAIJ,K","ignoreList":[]}