@ds-mo/ui 13.6.1 → 13.7.0

package/dist/mcp-data/registry/chart-bar.json

@@ -1,245 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "chart-bar",
-  "title": "ChartBar",
-  "description": "Bar chart for single-series magnitude, additive stacked totals, or normalized 0–100% composition across categories.",
-  "type": "registry:ui",
-  "meta": {
-    "library": "@ds-mo/ui",
-    "distribution": "npm",
-    "storybook": "https://zainadeel.github.io/compomo/?path=/story/chart-bar",
-    "source": "src/wc/components/ChartBar/ChartBar.tsx",
-    "intentStatus": "complete",
-    "intent": {
-      "audience": "specialized",
-      "status": "experimental",
-      "summary": "Bar chart for single-series magnitude, additive stacked totals, or normalized 0–100% composition across categories.",
-      "useWhen": [
-        "Users need to compare one numeric measure across a small set of categories.",
-        "Values are grouped into ordered time buckets such as hours, days, weeks, or months and equal visual spacing is appropriate.",
-        "A data-viz card needs a compact magnitude comparison rather than a continuous trend.",
-        "Several consistent series contribute to each category total or its normalized composition."
-      ],
-      "avoidWhen": [
-        "Timestamp positions must reflect irregular elapsed time; pre-bucket the data or use a future continuous time-scale chart.",
-        "The visualization needs grouped bars or precise comparison of each individual series across categories.",
-        "The interaction requires selection, drill-down, brushing, or zoom.",
-        "The data communicates a part-to-whole relationship."
-      ],
-      "alternatives": [
-        {
-          "when": "Users need to follow one or more trends across ordered categories.",
-          "component": "component:ds-chart-line",
-          "reason": "ChartLine connects ordered observations and supports multiple named series."
-        },
-        {
-          "when": "The data communicates parts of a total.",
-          "component": "component:ds-chart-donut",
-          "reason": "ChartDonut provides the part-to-whole composition and center aggregate."
-        }
-      ],
-      "commonlyComposedWith": [
-        "component:ds-chart-legend",
-        "component:ds-card-data-viz",
-        "component:ds-tooltip-data-viz"
-      ],
-      "accessibility": [
-        "Keep category labels concise and provide an adjacent textual summary when exact values are critical to completing a task.",
-        "Do not rely on bar color alone to communicate category meaning.",
-        "A future interactive tooltip must supplement rather than replace the chart's accessible value representation."
-      ],
-      "states": [
-        "The chart is static without hover, selection, loading, or empty-state policy.",
-        "Single mode reads data. Stacked and percentage modes read aligned series and categories.",
-        "Stacked mode preserves raw totals; percentage mode normalizes every non-empty category to 100%.",
-        "An empty dataset renders no bars; the owning card or product supplies meaningful empty-state messaging.",
-        "Bars use 2px top corner radii while the lower corners touching the zero axis remain square.",
-        "Use one consistent bar color across time buckets when every bar is the same measure at a different interval; categorical color changes are for genuinely distinct categories.",
-        "Authored datum colors override the shared categorical palette."
-      ],
-      "responsiveBehavior": [
-        "Width and height provide the standalone intrinsic viewport; container constraints are measured and reflow the plot across the available pixels.",
-        "Responsive layout changes bar positions and plot extents without scaling SVG text, strokes, corner radii, or margins.",
-        "Limit or pre-format long category labels so they remain legible at the chosen width.",
-        "Time labels remain ordered, pre-formatted buckets with equal spacing rather than raw continuous timestamps."
-      ],
-      "frameworkCaveats": {
-        "customElements": [
-          "Assign data, series, and categories as JavaScript properties; arrays are not supported as HTML attributes."
-        ],
-        "react": [
-          "Pass stable data or series/category arrays; width and height provide standalone intrinsic dimensions while constrained containers reflow automatically."
-        ],
-        "angular": [
-          "Bind data or series/categories as properties; width and height provide standalone intrinsic dimensions while constrained containers reflow automatically."
-        ]
-      },
-      "references": [
-        {
-          "label": "Storybook examples",
-          "path": "src/wc/components/ChartBar/ChartBar.stories.ts"
-        }
-      ]
-    },
-    "api": {
-      "props": {
-        "categories": {
-          "type": "string[]",
-          "resolvedType": "string[]",
-          "default": "[]",
-          "required": false,
-          "mutable": false,
-          "description": "X-axis labels for stacked and percentage variants. Set as a JS property."
-        },
-        "data": {
-          "type": "ChartDatum[]",
-          "resolvedType": "ChartDatum[]",
-          "default": "[]",
-          "required": false,
-          "mutable": false,
-          "description": "Bars to render. Set as a JS property (not an HTML attribute)."
-        },
-        "height": {
-          "type": "number",
-          "resolvedType": "number",
-          "attribute": "height",
-          "default": "240",
-          "required": false,
-          "mutable": false,
-          "description": "Standalone intrinsic height. Container constraints reflow the plot at rendered pixel size."
-        },
-        "series": {
-          "type": "ChartSeries[]",
-          "resolvedType": "ChartSeries[]",
-          "default": "[]",
-          "required": false,
-          "mutable": false,
-          "description": "Ordered stack series for stacked and percentage variants. Set as a JS property."
-        },
-        "variant": {
-          "type": "ChartBarVariant",
-          "resolvedType": "\"percentage\" | \"single\" | \"stacked\"",
-          "attribute": "variant",
-          "default": "'single'",
-          "required": false,
-          "mutable": false,
-          "description": "Rendering model. Single uses `data`; stacked and percentage use `series` and `categories`."
-        },
-        "width": {
-          "type": "number",
-          "resolvedType": "number",
-          "attribute": "width",
-          "default": "480",
-          "required": false,
-          "mutable": false,
-          "description": "Standalone intrinsic width. Container constraints reflow the plot at rendered pixel size."
-        }
-      },
-      "events": [],
-      "methods": [],
-      "slots": []
-    },
-    "props": {
-      "categories": {
-        "type": "string[]",
-        "resolvedType": "string[]",
-        "default": "[]",
-        "required": false,
-        "mutable": false,
-        "description": "X-axis labels for stacked and percentage variants. Set as a JS property."
-      },
-      "data": {
-        "type": "ChartDatum[]",
-        "resolvedType": "ChartDatum[]",
-        "default": "[]",
-        "required": false,
-        "mutable": false,
-        "description": "Bars to render. Set as a JS property (not an HTML attribute)."
-      },
-      "height": {
-        "type": "number",
-        "resolvedType": "number",
-        "attribute": "height",
-        "default": "240",
-        "required": false,
-        "mutable": false,
-        "description": "Standalone intrinsic height. Container constraints reflow the plot at rendered pixel size."
-      },
-      "series": {
-        "type": "ChartSeries[]",
-        "resolvedType": "ChartSeries[]",
-        "default": "[]",
-        "required": false,
-        "mutable": false,
-        "description": "Ordered stack series for stacked and percentage variants. Set as a JS property."
-      },
-      "variant": {
-        "type": "ChartBarVariant",
-        "resolvedType": "\"percentage\" | \"single\" | \"stacked\"",
-        "attribute": "variant",
-        "default": "'single'",
-        "required": false,
-        "mutable": false,
-        "description": "Rendering model. Single uses `data`; stacked and percentage use `series` and `categories`."
-      },
-      "width": {
-        "type": "number",
-        "resolvedType": "number",
-        "attribute": "width",
-        "default": "480",
-        "required": false,
-        "mutable": false,
-        "description": "Standalone intrinsic width. Container constraints reflow the plot at rendered pixel size."
-      }
-    },
-    "events": [],
-    "methods": [],
-    "slots": [],
-    "exports": {
-      "customElement": "ds-chart-bar",
-      "react": "DsChartBar",
-      "angular": "DsChartBar"
-    },
-    "consumption": {
-      "install": "npm install @ds-mo/ui @ds-mo/tokens @ds-mo/icons",
-      "cssSetup": "import '@ds-mo/tokens';\nimport '@ds-mo/tokens/reset';\nimport '@ds-mo/tokens/globals';",
-      "customElements": {
-        "import": "import '@ds-mo/ui/dist/components/ds-chart-bar.js';",
-        "example": "<ds-chart-bar></ds-chart-bar>"
-      },
-      "react": {
-        "import": "import { DsChartBar } from '@ds-mo/ui/react';",
-        "example": "<DsChartBar />"
-      },
-      "angular": {
-        "import": "import { DsChartBar } from '@ds-mo/ui/angular/ds-chart-bar';",
-        "example": "<ds-chart-bar></ds-chart-bar>"
-      },
-      "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: categories, data, series.",
-      "peerDependencies": {
-        "required": [
-          "@ds-mo/tokens ^5.1.1",
-          "@ds-mo/icons ^6.4.0"
-        ],
-        "frameworks": "Custom Elements; React 18/19 wrappers; Angular 19-22 standalone adapters."
-      }
-    }
-  },
-  "dependencies": [
-    "@ds-mo/ui",
-    "@ds-mo/tokens"
-  ],
-  "registryDependencies": [],
-  "files": [
-    {
-      "path": "src/wc/components/ChartBar/ChartBar.css",
-      "content": "@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",
-      "type": "registry:ui"
-    },
-    {
-      "path": "src/wc/components/ChartBar/ChartBar.tsx",
-      "content": "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",
-      "type": "registry:ui"
-    }
-  ]
-}

package/dist/mcp-data/registry/chart-donut.json

@@ -1,344 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "chart-donut",
-  "title": "ChartDonut",
-  "description": "Part-to-whole donut chart with a center aggregate, responsive fill sizing, local slice tooltip feedback, and externally controlled legend highlighting.",
-  "type": "registry:ui",
-  "meta": {
-    "library": "@ds-mo/ui",
-    "distribution": "npm",
-    "storybook": "https://zainadeel.github.io/compomo/?path=/story/chart-donut",
-    "source": "src/wc/components/ChartDonut/ChartDonut.tsx",
-    "intentStatus": "complete",
-    "intent": {
-      "audience": "specialized",
-      "status": "experimental",
-      "summary": "Part-to-whole donut chart with a center aggregate, responsive fill sizing, local slice tooltip feedback, and externally controlled legend highlighting.",
-      "useWhen": [
-        "Users need to understand a small part-to-whole breakdown with a prominent total or status in the center.",
-        "A standalone donut needs pointer and keyboard-focus value feedback through a chart-owned data-viz tooltip.",
-        "A donut and visible ChartLegend should cross-highlight by matching stable labels."
-      ],
-      "avoidWhen": [
-        "The data is a trend, time sequence, or independent magnitude comparison.",
-        "The category count creates slices too small to understand reliably.",
-        "Hover is intended to select, filter, or navigate rather than temporarily highlight data."
-      ],
-      "alternatives": [
-        {
-          "when": "The product needs the canonical card, filter action, visible legend, and built-in hover synchronization.",
-          "component": "component:ds-card-data-viz",
-          "reason": "The donut card variant owns that complete composition and suppresses redundant slice tooltips."
-        },
-        {
-          "when": "Users need to compare independent category magnitudes.",
-          "component": "component:ds-chart-bar",
-          "reason": "Bars make category magnitude differences easier to compare."
-        }
-      ],
-      "commonlyComposedWith": [
-        "component:ds-chart-legend",
-        "component:ds-tooltip-data-viz",
-        "component:ds-card-data-viz"
-      ],
-      "accessibility": [
-        "Every non-empty slice remains keyboard focusable and exposes its label and value without depending on the visual tooltip.",
-        "Use a visible legend when the full set of labels, values, or percentages must remain continuously available.",
-        "Provide localized no-data text for the neutral empty ring.",
-        "Center text is a visual summary and must not be the only source of essential category detail."
-      ],
-      "states": [
-        "Genuine local pointer or keyboard focus may show a chart-owned tooltip; externally synchronized highlight never opens it.",
-        "When a visible legend already owns label and value detail, suppress the redundant donut tooltip. CardDataViz donut mode does this automatically.",
-        "Local hover and external highlight remain separate while both may dim non-matching slices.",
-        "Zero or negative totals render a neutral empty ring without interactive slices.",
-        "Center value and caption truncate when they exceed the safe inner-circle measure."
-      ],
-      "responsiveBehavior": [
-        "Prefer container-fill sizing inside data-viz cards and explicit sizing only in layouts that own a stable diameter.",
-        "Fill sizing remains centered and constrained to the shared donut size band.",
-        "Changing the measured diameter changes the ring radius without scaling its token-based thickness, typography, focus stroke, or corner treatment.",
-        "The owner adapts category count and legend placement for available space."
-      ],
-      "frameworkCaveats": {
-        "customElements": [
-          "Assign data as a JavaScript property and wire slice-hover detail to a sibling legend only when not using CardDataViz donut mode."
-        ],
-        "react": [
-          "Keep synchronized highlight controlled by the composition and disable slice tooltips when a sibling legend continuously shows the same details."
-        ],
-        "angular": [
-          "Keep synchronized highlight controlled by the composition and disable slice tooltips when a sibling legend continuously shows the same details."
-        ]
-      },
-      "references": [
-        {
-          "label": "Storybook examples",
-          "path": "src/wc/components/ChartDonut/ChartDonut.stories.ts"
-        }
-      ]
-    },
-    "api": {
-      "props": {
-        "activeLabel": {
-          "type": "string | null",
-          "resolvedType": "null | string",
-          "attribute": "active-label",
-          "default": "null",
-          "required": false,
-          "mutable": false,
-          "description": "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.\nFalls back to this component's own pointer/focus hover when unset.\nSlice hover dims peer slices and emits `dsSliceHover` for legend sync. External\nhighlight never opens the local tooltip."
-        },
-        "centerCaption": {
-          "type": "string | undefined",
-          "resolvedType": "string | undefined",
-          "attribute": "center-caption",
-          "required": false,
-          "mutable": false,
-          "description": "Secondary caption below the center value (e.g. \"Total\", \"Normal\"). Rendered uppercase."
-        },
-        "centerValue": {
-          "type": "string | undefined",
-          "resolvedType": "string | undefined",
-          "attribute": "center-value",
-          "required": false,
-          "mutable": false,
-          "description": "Primary center value; defaults to the sum of `data` values (e.g. \"187\", \"40.9%\")."
-        },
-        "cornerRadius": {
-          "type": "number | string",
-          "resolvedType": "number | string",
-          "attribute": "corner-radius",
-          "default": "TOKEN_DEFAULTS.radius025",
-          "required": false,
-          "mutable": false,
-          "description": "Corner radius on each slice — number (px) or TokoMo length. Defaults to `--dimension-radius-025` (2px)."
-        },
-        "data": {
-          "type": "ChartDatum[]",
-          "resolvedType": "ChartDatum[]",
-          "default": "[]",
-          "required": false,
-          "mutable": false,
-          "description": "Slices to render. Set as a JS property (not an HTML attribute)."
-        },
-        "gap": {
-          "type": "number",
-          "resolvedType": "number",
-          "attribute": "gap",
-          "default": "1",
-          "required": false,
-          "mutable": false,
-          "description": "Gap between slices, in degrees."
-        },
-        "locale": {
-          "type": "string | undefined",
-          "resolvedType": "string | undefined",
-          "attribute": "locale",
-          "required": false,
-          "mutable": false
-        },
-        "noDataLabel": {
-          "type": "string",
-          "resolvedType": "string",
-          "attribute": "no-data-label",
-          "default": "'No data'",
-          "required": false,
-          "mutable": false
-        },
-        "showTooltip": {
-          "type": "boolean",
-          "resolvedType": "boolean",
-          "attribute": "show-tooltip",
-          "default": "true",
-          "required": false,
-          "mutable": false,
-          "description": "Show a chart-owned value callout for genuine pointer or keyboard focus.\nDisable when a visible legend already owns persistent label and value detail."
-        },
-        "size": {
-          "type": "number | undefined",
-          "resolvedType": "number | undefined",
-          "attribute": "size",
-          "required": false,
-          "mutable": false,
-          "description": "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\ninside card layouts."
-        },
-        "thickness": {
-          "type": "number | string",
-          "resolvedType": "number | string",
-          "attribute": "thickness",
-          "default": "TOKEN_DEFAULTS.size200",
-          "required": false,
-          "mutable": false,
-          "description": "Ring thickness — number (px) or TokoMo length. Defaults to `--dimension-size-200` (16px)."
-        }
-      },
-      "events": [
-        {
-          "name": "dsSliceHover",
-          "detail": "ChartDatum | null",
-          "bubbles": true,
-          "cancelable": true,
-          "composed": true,
-          "description": "Fires with the hovered/focused slice's datum, or `null` on leave/blur."
-        }
-      ],
-      "methods": [],
-      "slots": []
-    },
-    "props": {
-      "activeLabel": {
-        "type": "string | null",
-        "resolvedType": "null | string",
-        "attribute": "active-label",
-        "default": "null",
-        "required": false,
-        "mutable": false,
-        "description": "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.\nFalls back to this component's own pointer/focus hover when unset.\nSlice hover dims peer slices and emits `dsSliceHover` for legend sync. External\nhighlight never opens the local tooltip."
-      },
-      "centerCaption": {
-        "type": "string | undefined",
-        "resolvedType": "string | undefined",
-        "attribute": "center-caption",
-        "required": false,
-        "mutable": false,
-        "description": "Secondary caption below the center value (e.g. \"Total\", \"Normal\"). Rendered uppercase."
-      },
-      "centerValue": {
-        "type": "string | undefined",
-        "resolvedType": "string | undefined",
-        "attribute": "center-value",
-        "required": false,
-        "mutable": false,
-        "description": "Primary center value; defaults to the sum of `data` values (e.g. \"187\", \"40.9%\")."
-      },
-      "cornerRadius": {
-        "type": "number | string",
-        "resolvedType": "number | string",
-        "attribute": "corner-radius",
-        "default": "TOKEN_DEFAULTS.radius025",
-        "required": false,
-        "mutable": false,
-        "description": "Corner radius on each slice — number (px) or TokoMo length. Defaults to `--dimension-radius-025` (2px)."
-      },
-      "data": {
-        "type": "ChartDatum[]",
-        "resolvedType": "ChartDatum[]",
-        "default": "[]",
-        "required": false,
-        "mutable": false,
-        "description": "Slices to render. Set as a JS property (not an HTML attribute)."
-      },
-      "gap": {
-        "type": "number",
-        "resolvedType": "number",
-        "attribute": "gap",
-        "default": "1",
-        "required": false,
-        "mutable": false,
-        "description": "Gap between slices, in degrees."
-      },
-      "locale": {
-        "type": "string | undefined",
-        "resolvedType": "string | undefined",
-        "attribute": "locale",
-        "required": false,
-        "mutable": false
-      },
-      "noDataLabel": {
-        "type": "string",
-        "resolvedType": "string",
-        "attribute": "no-data-label",
-        "default": "'No data'",
-        "required": false,
-        "mutable": false
-      },
-      "showTooltip": {
-        "type": "boolean",
-        "resolvedType": "boolean",
-        "attribute": "show-tooltip",
-        "default": "true",
-        "required": false,
-        "mutable": false,
-        "description": "Show a chart-owned value callout for genuine pointer or keyboard focus.\nDisable when a visible legend already owns persistent label and value detail."
-      },
-      "size": {
-        "type": "number | undefined",
-        "resolvedType": "number | undefined",
-        "attribute": "size",
-        "required": false,
-        "mutable": false,
-        "description": "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\ninside card layouts."
-      },
-      "thickness": {
-        "type": "number | string",
-        "resolvedType": "number | string",
-        "attribute": "thickness",
-        "default": "TOKEN_DEFAULTS.size200",
-        "required": false,
-        "mutable": false,
-        "description": "Ring thickness — number (px) or TokoMo length. Defaults to `--dimension-size-200` (16px)."
-      }
-    },
-    "events": [
-      {
-        "name": "dsSliceHover",
-        "detail": "ChartDatum | null",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "description": "Fires with the hovered/focused slice's datum, or `null` on leave/blur."
-      }
-    ],
-    "methods": [],
-    "slots": [],
-    "exports": {
-      "customElement": "ds-chart-donut",
-      "react": "DsChartDonut",
-      "angular": "DsChartDonut"
-    },
-    "consumption": {
-      "install": "npm install @ds-mo/ui @ds-mo/tokens @ds-mo/icons",
-      "cssSetup": "import '@ds-mo/tokens';\nimport '@ds-mo/tokens/reset';\nimport '@ds-mo/tokens/globals';",
-      "customElements": {
-        "import": "import '@ds-mo/ui/dist/components/ds-chart-donut.js';",
-        "example": "<ds-chart-donut></ds-chart-donut>"
-      },
-      "react": {
-        "import": "import { DsChartDonut } from '@ds-mo/ui/react';",
-        "example": "<DsChartDonut />"
-      },
-      "angular": {
-        "import": "import { DsChartDonut } from '@ds-mo/ui/angular/ds-chart-donut';",
-        "example": "<ds-chart-donut></ds-chart-donut>"
-      },
-      "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: data.",
-      "peerDependencies": {
-        "required": [
-          "@ds-mo/tokens ^5.1.1",
-          "@ds-mo/icons ^6.4.0"
-        ],
-        "frameworks": "Custom Elements; React 18/19 wrappers; Angular 19-22 standalone adapters."
-      }
-    }
-  },
-  "dependencies": [
-    "@ds-mo/ui",
-    "@ds-mo/tokens"
-  ],
-  "registryDependencies": [
-    "tooltip-data-viz"
-  ],
-  "files": [
-    {
-      "path": "src/wc/components/ChartDonut/ChartDonut.css",
-      "content": "@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",
-      "type": "registry:ui"
-    },
-    {
-      "path": "src/wc/components/ChartDonut/ChartDonut.tsx",
-      "content": "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",
-      "type": "registry:ui"
-    }
-  ]
-}