@ds-mo/ui 12.6.2 → 12.8.0

package/dist/mcp-data/registry/card-data-viz-donut.json

@@ -49,6 +49,7 @@
         "The application owns meaningful loading, empty, and error status copy when either content region is temporarily replaced or absent."
       ],
       "states": [
+        "Bar, Line, and Donut cards share the same fill-chart and content-sized-legend body contract so dashboard card geometry remains aligned across chart types.",
         "The chart region fills remaining card height while the legend remains content-sized.",
         "Chart and legend regions render only when their corresponding slots contain content, allowing the owner to substitute loading, empty, or error presentations without dangling region padding.",
         "Hover synchronization changes highlight only; it never represents selection, filtering, or navigation.",
@@ -56,6 +57,7 @@
       ],
       "responsiveBehavior": [
         "Select the token-based card width appropriate to the parent grid; the matching minimum height preserves the chart region.",
+        "The donut measures the chart region and changes radius within its shared size band while token thickness and typography remain fixed.",
         "The parent dashboard owns wrapping and column changes while the internal chart-over-legend arrangement remains stable."
       ],
       "frameworkCaveats": {
@@ -182,7 +184,7 @@
       },
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^3.1.1",
+          "@ds-mo/tokens ^5.0.0",
           "@ds-mo/icons ^6.4.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Angular 19-22 standalone adapters."
@@ -200,12 +202,12 @@
   "files": [
     {
       "path": "src/wc/components/CardDataVizDonut/CardDataVizDonut.css",
-      "content": ":host {\n  display: contents;\n}\n\n.card-data-viz-donut__layout {\n  display: flex;\n  flex-direction: column;\n  flex: 1 1 auto;\n  min-height: 0;\n  height: 100%;\n  gap: var(--dimension-space-200);\n  box-sizing: border-box;\n}\n\n/*\n * Chart region fills leftover space; legend stays content-sized.\n * Padding is per-region so the body gap isn't doubled at the shared edge.\n */\n.card-data-viz-donut__chart-region {\n  flex: 1 1 auto;\n  min-height: 0;\n  /* Stretch the slotted donut to the full region; the donut centers its own SVG. */\n  display: grid;\n  padding: var(--dimension-space-400) var(--dimension-space-400) 0 var(--dimension-space-400);\n  box-sizing: border-box;\n}\n\n/* Make the slotted donut stretch to the region so ResizeObserver can measure fill size. */\n.card-data-viz-donut__chart-region > * {\n  width: 100%;\n  height: 100%;\n  min-width: 0;\n  min-height: 0;\n  max-width: 100%;\n  max-height: 100%;\n}\n\n.card-data-viz-donut__legend-region {\n  flex: 0 0 auto;\n  padding: 0 var(--dimension-space-100) var(--dimension-space-100) var(--dimension-space-100);\n  box-sizing: border-box;\n}\n",
+      "content": "@import '../../utils/data-viz-card-layout.css';\n\n:host {\n  display: contents;\n}\n",
       "type": "registry:ui"
     },
     {
       "path": "src/wc/components/CardDataVizDonut/CardDataVizDonut.tsx",
-      "content": "import { Component, Element, Event, EventEmitter, State, h, Host, Prop } from '@stencil/core';\nimport type { CardShellDataVizWidth } from '../CardShellDataViz/CardShellDataViz';\n\nexport type CardDataVizDonutWidth = CardShellDataVizWidth;\n\n/** Matches the `dsSliceHover`/`dsItemHover` detail shape emitted by `ds-chart-*` and `ds-chart-legend`. */\ntype HoveredDatum = { label: string } | null;\n\n/** A slotted chart/legend that opts into composition behavior through public props. */\ntype SyncableSlot = HTMLElement & {\n  activeLabel?: string | null;\n  showTooltip?: boolean;\n};\n\n/**\n * Donut data-viz card — dedicated `ds-card-shell-data-viz` chrome with a fill chart region and\n * content-sized legend. Hover sync between chart and legend stays here.\n */\n@Component({\n  tag: 'ds-card-data-viz-donut',\n  styleUrl: 'CardDataVizDonut.css',\n  scoped: true,\n})\nexport class CardDataVizDonut {\n  @Element() el!: HTMLElement;\n\n  /** Widget heading shown in the card header. */\n  @Prop() heading!: string;\n\n  /** Card width token — also sets matching min-height. */\n  @Prop() cardWidth: CardDataVizDonutWidth = 'md';\n  @Prop() filterLabel: string = 'Filter';\n\n  /** Emits when the header filter control is activated. */\n  @Event() dsFilterClick!: EventEmitter<void>;\n\n  // Scoped (light-DOM) components have no native slot projection to detect emptiness from CSS —\n  // check the actual children so an unused region (e.g. no legend) doesn't render a dangling\n  // padded box plus a body gap next to nothing.\n  @State() private hasChartSlot = false;\n  @State() private hasLegendSlot = false;\n\n  componentWillRender() {\n    // Not `:scope >` — Stencil's scoped slot polyfill relocates slotted children into\n    // region wrappers (and here into nested `ds-card-shell-data-viz`), so they may not stay direct\n    // host children across renders.\n    this.hasChartSlot = !!this.el.querySelector('[slot=\"chart\"]');\n    this.hasLegendSlot = !!this.el.querySelector('[slot=\"legend\"]');\n  }\n\n  componentDidLoad() {\n    // Sync the chart's and legend's `activeLabel` from each other's hover events, so any\n    // ds-chart-donut + ds-chart-legend pair cross-highlights without every consumer having to\n    // wire it up by hand. Delegated on the host (rather than bound to the specific slotted\n    // elements) since Stencil events bubble and the slot content can be swapped at runtime.\n    this.el.addEventListener('dsSliceHover', this.handleChartHover);\n    this.el.addEventListener('dsItemHover', this.handleLegendHover);\n  }\n\n  componentDidRender() {\n    const chart = this.el.querySelector('[slot=\"chart\"]') as SyncableSlot | null;\n    if (!chart || !('showTooltip' in chart)) return;\n    chart.showTooltip = !this.hasLegendSlot;\n  }\n\n  disconnectedCallback() {\n    this.el.removeEventListener('dsSliceHover', this.handleChartHover);\n    this.el.removeEventListener('dsItemHover', this.handleLegendHover);\n  }\n\n  private handleChartHover = (e: Event) => {\n    // Not `:scope >` — Stencil's slot polyfill for scoped (non-shadow) components relocates\n    // slotted children into an inner region wrapper on render, so they're no longer direct\n    // children of the host by the time this fires.\n    const legend = this.el.querySelector('[slot=\"legend\"]') as SyncableSlot | null;\n    if (!legend || !('activeLabel' in legend)) return;\n    legend.activeLabel = (e as CustomEvent<HoveredDatum>).detail?.label ?? null;\n  };\n\n  private handleLegendHover = (e: Event) => {\n    const chart = this.el.querySelector('[slot=\"chart\"]') as SyncableSlot | null;\n    if (!chart || !('activeLabel' in chart)) return;\n    chart.activeLabel = (e as CustomEvent<HoveredDatum>).detail?.label ?? null;\n  };\n\n  private handleFilterClick = () => {\n    this.dsFilterClick.emit();\n  };\n\n  render() {\n    return (\n      <Host class=\"card-data-viz-donut\">\n        <ds-card-shell-data-viz heading={this.heading} cardWidth={this.cardWidth}>\n          <ds-button-unfilled\n            slot=\"actions\"\n            variant=\"icon\"\n            type=\"button\"\n            icon=\"Filters\"\n            aria-label={this.filterLabel}\n            onDsClick={this.handleFilterClick}\n          />\n          <div class=\"card-data-viz-donut__layout\">\n            {this.hasChartSlot && (\n              <div class=\"card-data-viz-donut__chart-region\">\n                <slot name=\"chart\" />\n              </div>\n            )}\n            {this.hasLegendSlot && (\n              <div class=\"card-data-viz-donut__legend-region\">\n                <slot name=\"legend\" />\n              </div>\n            )}\n          </div>\n        </ds-card-shell-data-viz>\n      </Host>\n    );\n  }\n}\n",
+      "content": "import { Component, Element, Event, EventEmitter, State, h, Host, Prop } from '@stencil/core';\nimport type { CardShellDataVizWidth } from '../CardShellDataViz/CardShellDataViz';\n\nexport type CardDataVizDonutWidth = CardShellDataVizWidth;\n\n/** Matches the `dsSliceHover`/`dsItemHover` detail shape emitted by `ds-chart-*` and `ds-chart-legend`. */\ntype HoveredDatum = { label: string } | null;\n\n/** A slotted chart/legend that opts into composition behavior through public props. */\ntype SyncableSlot = HTMLElement & {\n  activeLabel?: string | null;\n  showTooltip?: boolean;\n};\n\n/**\n * Donut data-viz card — dedicated `ds-card-shell-data-viz` chrome with a fill chart region and\n * content-sized legend. Hover sync between chart and legend stays here.\n */\n@Component({\n  tag: 'ds-card-data-viz-donut',\n  styleUrl: 'CardDataVizDonut.css',\n  scoped: true,\n})\nexport class CardDataVizDonut {\n  @Element() el!: HTMLElement;\n\n  /** Widget heading shown in the card header. */\n  @Prop() heading!: string;\n\n  /** Card width token — also sets matching min-height. */\n  @Prop() cardWidth: CardDataVizDonutWidth = 'md';\n  @Prop() filterLabel: string = 'Filter';\n\n  /** Emits when the header filter control is activated. */\n  @Event() dsFilterClick!: EventEmitter<void>;\n\n  // Scoped (light-DOM) components have no native slot projection to detect emptiness from CSS —\n  // check the actual children so an unused region (e.g. no legend) doesn't render a dangling\n  // padded box plus a body gap next to nothing.\n  @State() private hasChartSlot = false;\n  @State() private hasLegendSlot = false;\n\n  componentWillRender() {\n    // Not `:scope >` — Stencil's scoped slot polyfill relocates slotted children into\n    // region wrappers (and here into nested `ds-card-shell-data-viz`), so they may not stay direct\n    // host children across renders.\n    this.hasChartSlot = !!this.el.querySelector('[slot=\"chart\"]');\n    this.hasLegendSlot = !!this.el.querySelector('[slot=\"legend\"]');\n  }\n\n  componentDidLoad() {\n    // Sync the chart's and legend's `activeLabel` from each other's hover events, so any\n    // ds-chart-donut + ds-chart-legend pair cross-highlights without every consumer having to\n    // wire it up by hand. Delegated on the host (rather than bound to the specific slotted\n    // elements) since Stencil events bubble and the slot content can be swapped at runtime.\n    this.el.addEventListener('dsSliceHover', this.handleChartHover);\n    this.el.addEventListener('dsItemHover', this.handleLegendHover);\n  }\n\n  componentDidRender() {\n    const chart = this.el.querySelector('[slot=\"chart\"]') as SyncableSlot | null;\n    if (!chart || !('showTooltip' in chart)) return;\n    chart.showTooltip = !this.hasLegendSlot;\n  }\n\n  disconnectedCallback() {\n    this.el.removeEventListener('dsSliceHover', this.handleChartHover);\n    this.el.removeEventListener('dsItemHover', this.handleLegendHover);\n  }\n\n  private handleChartHover = (e: Event) => {\n    // Not `:scope >` — Stencil's slot polyfill for scoped (non-shadow) components relocates\n    // slotted children into an inner region wrapper on render, so they're no longer direct\n    // children of the host by the time this fires.\n    const legend = this.el.querySelector('[slot=\"legend\"]') as SyncableSlot | null;\n    if (!legend || !('activeLabel' in legend)) return;\n    legend.activeLabel = (e as CustomEvent<HoveredDatum>).detail?.label ?? null;\n  };\n\n  private handleLegendHover = (e: Event) => {\n    const chart = this.el.querySelector('[slot=\"chart\"]') as SyncableSlot | null;\n    if (!chart || !('activeLabel' in chart)) return;\n    chart.activeLabel = (e as CustomEvent<HoveredDatum>).detail?.label ?? null;\n  };\n\n  private handleFilterClick = () => {\n    this.dsFilterClick.emit();\n  };\n\n  render() {\n    return (\n      <Host class=\"card-data-viz-donut\">\n        <ds-card-shell-data-viz heading={this.heading} cardWidth={this.cardWidth}>\n          <ds-button-unfilled\n            slot=\"actions\"\n            variant=\"icon\"\n            type=\"button\"\n            icon=\"Filters\"\n            aria-label={this.filterLabel}\n            onDsClick={this.handleFilterClick}\n          />\n          <div class=\"ds-data-viz-card-layout\">\n            {this.hasChartSlot && (\n              <div class=\"ds-data-viz-card-chart ds-data-viz-card-chart--fill\">\n                <slot name=\"chart\" />\n              </div>\n            )}\n            {this.hasLegendSlot && (\n              <div class=\"ds-data-viz-card-legend\">\n                <slot name=\"legend\" />\n              </div>\n            )}\n          </div>\n        </ds-card-shell-data-viz>\n      </Host>\n    );\n  }\n}\n",
       "type": "registry:ui"
     }
   ]

package/dist/mcp-data/registry/card-data-viz-line.json

@@ -46,13 +46,14 @@
         "The card disables decorative legend-row hover; genuine legend links retain native link semantics and affordances."
       ],
       "states": [
+        "Bar, Line, and Donut cards share the same fill-chart and content-sized-legend body contract so dashboard card geometry remains aligned across chart types.",
         "The chart region fills the remaining card body while the legend remains content-sized.",
         "The card disables local hover highlighting on a slotted ChartLegend because the line chart is static.",
         "Chart and legend regions render only when their corresponding slots contain content, avoiding empty region spacing.",
         "The owning product controls data, filtering, loading, empty, and error state; the card emits the filter action only."
       ],
       "responsiveBehavior": [
-        "The selected sm, md, or lg shell size controls the card dimensions while the line chart shrinks within its chart region.",
+        "The selected sm, md, or lg shell size controls the card dimensions while the line chart reflows to the chart region without visually scaling its primitives.",
         "The horizontal legend wraps complete entries when the available width is constrained.",
         "The parent dashboard owns card wrapping and breakpoint changes."
       ],
@@ -176,7 +177,7 @@
       },
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^3.1.1",
+          "@ds-mo/tokens ^5.0.0",
           "@ds-mo/icons ^6.4.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Angular 19-22 standalone adapters."
@@ -194,12 +195,12 @@
   "files": [
     {
       "path": "src/wc/components/CardDataVizLine/CardDataVizLine.css",
-      "content": ":host {\n  display: contents;\n}\n\n.card-data-viz-line__layout {\n  display: flex;\n  flex: 1 1 auto;\n  flex-direction: column;\n  box-sizing: border-box;\n  height: 100%;\n  min-height: 0;\n  gap: var(--dimension-space-200);\n}\n\n.card-data-viz-line__chart-region {\n  display: grid;\n  flex: 1 1 auto;\n  align-items: center;\n  box-sizing: border-box;\n  min-height: 0;\n  padding: var(--dimension-space-400) var(--dimension-space-400) 0\n    var(--dimension-space-400);\n}\n\n.card-data-viz-line__chart-region > * {\n  width: 100%;\n  min-width: 0;\n  max-width: 100%;\n}\n\n.card-data-viz-line__legend-region {\n  flex: 0 0 auto;\n  box-sizing: border-box;\n  padding: 0 var(--dimension-space-100) var(--dimension-space-100)\n    var(--dimension-space-100);\n}\n",
+      "content": "@import '../../utils/data-viz-card-layout.css';\n\n:host {\n  display: contents;\n}\n",
       "type": "registry:ui"
     },
     {
       "path": "src/wc/components/CardDataVizLine/CardDataVizLine.tsx",
-      "content": "import { Component, Element, Event, EventEmitter, h, Host, Prop, State } from '@stencil/core';\nimport type { CardShellDataVizWidth } from '../CardShellDataViz/CardShellDataViz';\n\nexport type CardDataVizLineWidth = CardShellDataVizWidth;\n\ntype StaticLegendSlot = HTMLElement & {\n  highlightOnHover?: boolean;\n};\n\n/**\n * Line-chart data-viz card — dedicated `ds-card-shell-data-viz` chrome with a fill chart\n * region and a content-sized, static legend.\n */\n@Component({\n  tag: 'ds-card-data-viz-line',\n  styleUrl: 'CardDataVizLine.css',\n  scoped: true,\n})\nexport class CardDataVizLine {\n  @Element() el!: HTMLElement;\n\n  /** Widget heading shown in the card header. */\n  @Prop() heading!: string;\n\n  /** Card width token — also sets matching min-height. */\n  @Prop() cardWidth: CardDataVizLineWidth = 'md';\n  @Prop() filterLabel: string = 'Filter';\n\n  /** Emits when the header filter control is activated. */\n  @Event() dsFilterClick!: EventEmitter<void>;\n\n  @State() private hasChartSlot = false;\n  @State() private hasLegendSlot = false;\n\n  componentWillRender() {\n    this.hasChartSlot = !!this.el.querySelector('[slot=\"chart\"]');\n    this.hasLegendSlot = !!this.el.querySelector('[slot=\"legend\"]');\n  }\n\n  componentDidRender() {\n    const legend = this.el.querySelector(\n      'ds-chart-legend[slot=\"legend\"]'\n    ) as StaticLegendSlot | null;\n    if (!legend) return;\n    legend.setAttribute('highlight-on-hover', 'false');\n    if ('highlightOnHover' in legend) legend.highlightOnHover = false;\n  }\n\n  private handleFilterClick = () => {\n    this.dsFilterClick.emit();\n  };\n\n  render() {\n    return (\n      <Host class=\"card-data-viz-line\">\n        <ds-card-shell-data-viz heading={this.heading} cardWidth={this.cardWidth}>\n          <ds-button-unfilled\n            slot=\"actions\"\n            variant=\"icon\"\n            type=\"button\"\n            icon=\"Filters\"\n            aria-label={this.filterLabel}\n            onDsClick={this.handleFilterClick}\n          />\n          <div class=\"card-data-viz-line__layout\">\n            {this.hasChartSlot && (\n              <div class=\"card-data-viz-line__chart-region\">\n                <slot name=\"chart\" />\n              </div>\n            )}\n            {this.hasLegendSlot && (\n              <div class=\"card-data-viz-line__legend-region\">\n                <slot name=\"legend\" />\n              </div>\n            )}\n          </div>\n        </ds-card-shell-data-viz>\n      </Host>\n    );\n  }\n}\n",
+      "content": "import { Component, Element, Event, EventEmitter, h, Host, Prop, State } from '@stencil/core';\nimport type { CardShellDataVizWidth } from '../CardShellDataViz/CardShellDataViz';\n\nexport type CardDataVizLineWidth = CardShellDataVizWidth;\n\ntype StaticLegendSlot = HTMLElement & {\n  highlightOnHover?: boolean;\n};\n\n/**\n * Line-chart data-viz card — dedicated `ds-card-shell-data-viz` chrome with a fill chart\n * region and a content-sized, static legend.\n */\n@Component({\n  tag: 'ds-card-data-viz-line',\n  styleUrl: 'CardDataVizLine.css',\n  scoped: true,\n})\nexport class CardDataVizLine {\n  @Element() el!: HTMLElement;\n\n  /** Widget heading shown in the card header. */\n  @Prop() heading!: string;\n\n  /** Card width token — also sets matching min-height. */\n  @Prop() cardWidth: CardDataVizLineWidth = 'md';\n  @Prop() filterLabel: string = 'Filter';\n\n  /** Emits when the header filter control is activated. */\n  @Event() dsFilterClick!: EventEmitter<void>;\n\n  @State() private hasChartSlot = false;\n  @State() private hasLegendSlot = false;\n\n  componentWillRender() {\n    this.hasChartSlot = !!this.el.querySelector('[slot=\"chart\"]');\n    this.hasLegendSlot = !!this.el.querySelector('[slot=\"legend\"]');\n  }\n\n  componentDidRender() {\n    const legend = this.el.querySelector(\n      'ds-chart-legend[slot=\"legend\"]'\n    ) as StaticLegendSlot | null;\n    if (!legend) return;\n    legend.setAttribute('highlight-on-hover', 'false');\n    if ('highlightOnHover' in legend) legend.highlightOnHover = false;\n  }\n\n  private handleFilterClick = () => {\n    this.dsFilterClick.emit();\n  };\n\n  render() {\n    return (\n      <Host class=\"card-data-viz-line\">\n        <ds-card-shell-data-viz heading={this.heading} cardWidth={this.cardWidth}>\n          <ds-button-unfilled\n            slot=\"actions\"\n            variant=\"icon\"\n            type=\"button\"\n            icon=\"Filters\"\n            aria-label={this.filterLabel}\n            onDsClick={this.handleFilterClick}\n          />\n          <div class=\"ds-data-viz-card-layout\">\n            {this.hasChartSlot && (\n              <div class=\"ds-data-viz-card-chart\">\n                <slot name=\"chart\" />\n              </div>\n            )}\n            {this.hasLegendSlot && (\n              <div class=\"ds-data-viz-card-legend\">\n                <slot name=\"legend\" />\n              </div>\n            )}\n          </div>\n        </ds-card-shell-data-viz>\n      </Host>\n    );\n  }\n}\n",
       "type": "registry:ui"
     }
   ]

package/dist/mcp-data/registry/card-overview.json

@@ -0,0 +1,317 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "card-overview",
+  "title": "CardOverview",
+  "description": "Page-level summary bar pairing one headline score with a reporting period, an application-owned period control, and a responsive grid of comparable measures.",
+  "type": "registry:ui",
+  "meta": {
+    "library": "@ds-mo/ui",
+    "distribution": "npm",
+    "storybook": "https://zainadeel.github.io/compomo/?path=/story/card-overview",
+    "source": "src/wc/components/CardOverview/CardOverview.tsx",
+    "intentStatus": "complete",
+    "intent": {
+      "audience": "general",
+      "status": "experimental",
+      "summary": "Page-level summary bar pairing one headline score with a reporting period, an application-owned period control, and a responsive grid of comparable measures.",
+      "useWhen": [
+        "A page opens with one headline figure that the surrounding measures explain.",
+        "Every measure is compared against the same period, so one caption describes the comparison for all of them.",
+        "The measures are read together at a glance rather than explored individually."
+      ],
+      "avoidWhen": [
+        "There is no headline figure and the measures are unrelated; use the matching card surface for each one.",
+        "A measure needs a chart, sparkline, or other visualization; the grid presents values and change only.",
+        "The measures each require their own comparison period or their own filter control.",
+        "The content is a settings section or a general read-only card."
+      ],
+      "alternatives": [
+        {
+          "when": "A measure needs a chart or other data visualization.",
+          "component": "component:ds-card-shell-data-viz",
+          "reason": "CardShellDataViz owns the data-visualization shell contract; the overview grid presents values and change only."
+        },
+        {
+          "when": "The surface is a settings section with an edit workflow.",
+          "component": "component:ds-card-setting",
+          "reason": "CardSetting owns the controlled view and edit chrome."
+        }
+      ],
+      "commonlyComposedWith": [
+        "component:ds-select",
+        "component:ds-button-unfilled",
+        "component:ds-text",
+        "component:ds-tooltip"
+      ],
+      "accessibility": [
+        "The bar is a labelled region; set overviewLabel to name what is being summarised, such as Safety summary.",
+        "Trend arrows are decorative and hidden from assistive technology, so the formatted change value must read correctly on its own.",
+        "Colour never carries the trend meaning alone; the arrow direction and the value are both present.",
+        "Measures become selectable only when they are not inactive. Selectable measures form one roving tab stop, so the grid is a single stop and arrow keys move between measures.",
+        "Set labelTooltip when a measure's label needs qualifying rather than shortening the label into something ambiguous.",
+        "While loading, the region exposes a busy state and renders skeletons whose type metrics match the resolved content."
+      ],
+      "states": [
+        "Score and measures are supplied as data; the component owns their type treatment so summary bars stay consistent across pages.",
+        "Trend is supplied already resolved as a direction, a formatted value, and a tone. Whether a rise reads well is a product decision, so the component never infers tone from the numbers. Derive it with resolveMetricTrend.",
+        "Omit a trend when there is nothing to report; resolveMetricTrend returns null in that case so no zero change is rendered.",
+        "Omit score to render the bar without a headline figure. Set scoreErrorMessage to report that the figure could not be resolved while the measures remain readable.",
+        "Loading replaces the score and the measures with skeletons and does not alter the slotted period control.",
+        "The period control is slotted rather than owned, because the choice of stepper, select, or date range varies by product surface."
+      ],
+      "responsiveBehavior": [
+        "The measure grid reflows to fewer columns and finally stacks, driven by the minimum measure width alone. There is no measurement and no horizontal scrolling.",
+        "Set metricMinWidth to change the width a measure may shrink to before the grid drops a column.",
+        "The score block hugs its content and never shrinks, so the headline figure holds its size while the grid absorbs the remaining width.",
+        "The score moves above the body once the bar can no longer fit both side by side."
+      ],
+      "frameworkCaveats": {
+        "customElements": [
+          "Assign score and metrics as JavaScript properties; both are objects and cannot be expressed as HTML attributes.",
+          "Place the period control in the filter slot; the component reserves space for it but never renders one."
+        ],
+        "react": [
+          "Pass score and metrics as props and read the selected measure from the onDsMetricSelect event detail.",
+          "Derive each trend with resolveMetricTrend so tone stays an explicit product decision."
+        ],
+        "angular": [
+          "Bind [score] and [metrics] as properties and read the selected measure from $event.detail on (dsMetricSelect).",
+          "Derive each trend with resolveMetricTrend so tone stays an explicit product decision."
+        ]
+      },
+      "references": [
+        {
+          "label": "Storybook structural examples",
+          "path": "src/wc/components/CardOverview/CardOverview.stories.ts"
+        },
+        {
+          "label": "Trend resolution unit coverage",
+          "path": "tests/metric-change.test.ts"
+        }
+      ]
+    },
+    "api": {
+      "props": {
+        "comparisonLabel": {
+          "type": "string",
+          "resolvedType": "string",
+          "attribute": "comparison-label",
+          "default": "''",
+          "required": false,
+          "mutable": false,
+          "description": "Comparison caption, for example `vs. previous score period`."
+        },
+        "isLoading": {
+          "type": "boolean",
+          "resolvedType": "boolean",
+          "attribute": "is-loading",
+          "default": "false",
+          "required": false,
+          "mutable": false,
+          "description": "Replace the score and metrics with skeletons while data resolves."
+        },
+        "metricMinWidth": {
+          "type": "string",
+          "resolvedType": "string",
+          "attribute": "metric-min-width",
+          "default": "'var(--dimension-menu-width-xs)'",
+          "required": false,
+          "mutable": false,
+          "description": "Width a metric cell may shrink to before the grid drops a column. The grid\nreflows and then stacks from this alone, so no measurement is required."
+        },
+        "metrics": {
+          "type": "OverviewMetric[]",
+          "resolvedType": "OverviewMetric[]",
+          "default": "[]",
+          "required": false,
+          "mutable": false,
+          "description": "Measures rendered in the responsive grid."
+        },
+        "overviewLabel": {
+          "type": "string",
+          "resolvedType": "string",
+          "attribute": "overview-label",
+          "default": "'Overview'",
+          "required": false,
+          "mutable": false,
+          "description": "Accessible name for the region."
+        },
+        "periodLabel": {
+          "type": "string",
+          "resolvedType": "string",
+          "attribute": "period-label",
+          "default": "''",
+          "required": false,
+          "mutable": false,
+          "description": "Current reporting period, for example `Jun 29, 2026 – Jul 26, 2026`."
+        },
+        "score": {
+          "type": "OverviewScore | undefined",
+          "resolvedType": "OverviewScore | undefined",
+          "required": false,
+          "mutable": false,
+          "description": "Leading summary block. Omit to render the bar without a headline figure."
+        },
+        "scoreErrorMessage": {
+          "type": "string | undefined",
+          "resolvedType": "string | undefined",
+          "attribute": "score-error-message",
+          "required": false,
+          "mutable": false,
+          "description": "Message shown in place of the score when its figure cannot be resolved."
+        }
+      },
+      "events": [
+        {
+          "name": "dsMetricSelect",
+          "detail": "OverviewMetric",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true,
+          "description": "Emitted when a metric that is not inactive is activated."
+        }
+      ],
+      "methods": [],
+      "slots": []
+    },
+    "props": {
+      "comparisonLabel": {
+        "type": "string",
+        "resolvedType": "string",
+        "attribute": "comparison-label",
+        "default": "''",
+        "required": false,
+        "mutable": false,
+        "description": "Comparison caption, for example `vs. previous score period`."
+      },
+      "isLoading": {
+        "type": "boolean",
+        "resolvedType": "boolean",
+        "attribute": "is-loading",
+        "default": "false",
+        "required": false,
+        "mutable": false,
+        "description": "Replace the score and metrics with skeletons while data resolves."
+      },
+      "metricMinWidth": {
+        "type": "string",
+        "resolvedType": "string",
+        "attribute": "metric-min-width",
+        "default": "'var(--dimension-menu-width-xs)'",
+        "required": false,
+        "mutable": false,
+        "description": "Width a metric cell may shrink to before the grid drops a column. The grid\nreflows and then stacks from this alone, so no measurement is required."
+      },
+      "metrics": {
+        "type": "OverviewMetric[]",
+        "resolvedType": "OverviewMetric[]",
+        "default": "[]",
+        "required": false,
+        "mutable": false,
+        "description": "Measures rendered in the responsive grid."
+      },
+      "overviewLabel": {
+        "type": "string",
+        "resolvedType": "string",
+        "attribute": "overview-label",
+        "default": "'Overview'",
+        "required": false,
+        "mutable": false,
+        "description": "Accessible name for the region."
+      },
+      "periodLabel": {
+        "type": "string",
+        "resolvedType": "string",
+        "attribute": "period-label",
+        "default": "''",
+        "required": false,
+        "mutable": false,
+        "description": "Current reporting period, for example `Jun 29, 2026 – Jul 26, 2026`."
+      },
+      "score": {
+        "type": "OverviewScore | undefined",
+        "resolvedType": "OverviewScore | undefined",
+        "required": false,
+        "mutable": false,
+        "description": "Leading summary block. Omit to render the bar without a headline figure."
+      },
+      "scoreErrorMessage": {
+        "type": "string | undefined",
+        "resolvedType": "string | undefined",
+        "attribute": "score-error-message",
+        "required": false,
+        "mutable": false,
+        "description": "Message shown in place of the score when its figure cannot be resolved."
+      }
+    },
+    "events": [
+      {
+        "name": "dsMetricSelect",
+        "detail": "OverviewMetric",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "description": "Emitted when a metric that is not inactive is activated."
+      }
+    ],
+    "methods": [],
+    "slots": [],
+    "exports": {
+      "customElement": "ds-card-overview",
+      "react": "DsCardOverview",
+      "angular": "DsCardOverview"
+    },
+    "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-card-overview.js';",
+        "example": "<ds-card-overview></ds-card-overview>"
+      },
+      "react": {
+        "import": "import { DsCardOverview } from '@ds-mo/ui/react';",
+        "example": "<DsCardOverview />"
+      },
+      "angular": {
+        "import": "import { DsCardOverview } from '@ds-mo/ui/angular/ds-card-overview';",
+        "example": "<ds-card-overview></ds-card-overview>"
+      },
+      "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: metrics, score.",
+      "peerDependencies": {
+        "required": [
+          "@ds-mo/tokens ^5.0.0",
+          "@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",
+    "@ds-mo/icons"
+  ],
+  "registryDependencies": [
+    "icon",
+    "skeleton",
+    "text",
+    "tooltip"
+  ],
+  "files": [
+    {
+      "path": "src/wc/components/CardOverview/CardOverview.css",
+      "content": "@import '../../utils/interaction-fill.css';\n@import '../../utils/focus-ring.css';\n@import '../../utils/control-density.css';\n@import '../../utils/control-parts.css';\n@import '../../styles/control-elevation.css';\n\n/*\n * A permanently dark surface, independent of the page theme, so the summary bar\n * reads the same on every product surface. Every foreground, border, and\n * interaction token below therefore comes from the always-dark family rather\n * than the theme-reactive one.\n */\n\n:host {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: stretch;\n  box-sizing: border-box;\n  /* Drives the narrow layout below from the card's own width, not the viewport's. */\n  container-type: inline-size;\n  /* A summary is read, not copied; stray selection while clicking cells is noise. */\n  -webkit-user-select: none;\n  user-select: none;\n  /* Width a metric may shrink to before the grid drops a column. */\n  --ds-card-overview-metric-min: calc(var(--dimension-size-400) * 5);\n  --ds-card-overview-divider: var(--dimension-stroke-width-012) solid\n    var(--color-always-dark-border-tertiary);\n  border-radius: var(--dimension-radius-050);\n  background: var(--color-always-dark-background);\n  color: var(--color-always-dark-foreground-primary);\n  /*\n   * Clips the square-cornered metric washes to the card radius. The outer\n   * elevation shadow is painted outside the border box and is unaffected, and\n   * the inset highlight is meant to sit exactly on this edge.\n   */\n  overflow: hidden;\n}\n\n/* ── Score ────────────────────────────────────────────────────────────────── */\n\n/*\n * Hugs its content and never shrinks, so the headline figure keeps its size and\n * the metric grid absorbs the remaining width.\n */\n/*\n * Top aligned rather than centred, and padded to match the header, so the score\n * label sits in the same 32px box at the same offset as the period text beside\n * it. Both use the same type variant, so their baselines land together.\n */\n.card-overview__score {\n  display: flex;\n  flex: 0 0 auto;\n  flex-direction: column;\n  gap: 0;\n  min-width: 0;\n  padding: var(--dimension-space-100) var(--dimension-space-200);\n  border-inline-end: var(--ds-card-overview-divider);\n}\n\n/* The control-height box that aligns this label with the period text. */\n.card-overview__score-label-row {\n  display: flex;\n  align-items: center;\n  min-height: var(--ds-control-height);\n}\n\n.card-overview__score-label {\n  color: var(--color-always-dark-foreground-secondary);\n}\n\n/*\n * The score is its own column, so its rows cannot baseline-align with the measure\n * rows through flex or grid — those only align items that share a line. These two\n * offsets pull the column onto the measure baselines instead.\n *\n * They are compensation for how much lower a display-scale figure sits in its line\n * box than the body text it aligns to, so they are coupled to the type pairing:\n * change the score or measure variants and both need re-measuring.\n */\n.card-overview__score-figure {\n  display: flex;\n  align-items: baseline;\n  gap: var(--dimension-space-050);\n  min-width: 0;\n  margin-block-start: calc(-1 * (var(--dimension-space-150) + var(--dimension-space-012)));\n}\n\n/* Second half of the baseline compensation described above the score figure. */\n.card-overview__score-band {\n  margin-block-start: calc(-1 * var(--dimension-space-025));\n  color: var(--color-always-dark-foreground-secondary);\n}\n\n/*\n * A skeleton bar is a solid block, so in a baseline-aligned row it aligns on its\n * bottom edge while the text it stands in for aligns on its baseline. Next to a\n * display-scale figure that difference is the descent under the figure's\n * baseline, which drops the bar below where the resolved trend sits.\n *\n * The offset is applied with relative positioning rather than a margin: a margin\n * is not part of a synthesized baseline, so it grows the figure instead of moving\n * the bar, which then pushes the band below it out of place.\n *\n * Only needed beside the score figure; the measure rows pair body variants whose\n * bottom edge and baseline already agree.\n */\n.card-overview__skeleton-baseline {\n  position: relative;\n  inset-block-start: calc(-1 * var(--dimension-space-150));\n}\n\n.card-overview__score--error {\n  flex-direction: row;\n  align-items: center;\n  gap: var(--dimension-space-050);\n  color: var(--color-always-dark-foreground-negative);\n}\n\n/* ── Body ─────────────────────────────────────────────────────────────────── */\n\n/*\n * Takes the remaining inline space. The minimum is what makes the host wrap: once\n * the score and roughly two measure columns no longer fit side by side, the body\n * drops below the score instead of squeezing it. `min()` keeps that from becoming\n * an overflow floor on very narrow viewports.\n */\n.card-overview__body {\n  display: flex;\n  flex: 1 1 0;\n  flex-direction: column;\n  min-width: min(100%, calc(var(--ds-card-overview-metric-min) * 2));\n}\n\n/*\n * One control row: 8px of padding on every side around a 32px md control, so the\n * bar is 8 + 32 + 8. Both ends of the bar are control-shaped boxes — the period\n * text on the left and the slotted control on the right — so the row reads\n * balanced rather than text on one side and a control on the other.\n */\n.card-overview__header {\n  display: flex;\n  align-items: center;\n  gap: var(--dimension-space-100);\n  min-width: 0;\n  padding: var(--dimension-space-100);\n  border-block-end: var(--ds-card-overview-divider);\n  box-sizing: border-box;\n}\n\n/*\n * Matches the control's box on the opposite end, including its inline padding, so\n * the text lands at the same optical inset the slotted control does:\n * 8 from the bar + 6 from this box + 2 from the label inset = 16.\n *\n * Nowrap keeps the row at the control height; the period truncates rather than\n * growing the bar to two lines.\n */\n.card-overview__period {\n  display: flex;\n  flex: 1 1 auto;\n  align-items: center;\n  gap: var(--dimension-space-050);\n  min-height: var(--ds-control-height);\n  min-width: 0;\n  padding-inline: var(--ds-control-padding-inline);\n  overflow: hidden;\n  white-space: nowrap;\n}\n\n.card-overview__period-current {\n  color: var(--color-always-dark-foreground-primary);\n}\n\n.card-overview__period-comparison {\n  color: var(--color-always-dark-foreground-secondary);\n}\n\n/* The period control is slotted, so only reserve space for it. */\n.card-overview__filter {\n  display: flex;\n  flex: 0 0 auto;\n  align-items: center;\n}\n\n/* ── Metrics ──────────────────────────────────────────────────────────────── */\n\n/*\n * Reflows to fewer columns and finally stacks from `auto-fit` alone. No observer\n * and no horizontal scroll: a metric never compresses past its minimum, it moves\n * to the next row instead.\n */\n/*\n * Wrapping flex rather than an auto-fit grid, because a grid gives the final row's\n * items their column width and leaves a gap. Flex lets the last row's items grow\n * to fill, so a measure left on its own spans the full width.\n *\n * Dividers are trailing, not leading: a leading divider on the first cell would\n * land exactly on the score's own trailing border and paint it twice. The two\n * negative margins pull the final column's and final row's dividers past the card\n * edge, where the card's `overflow: hidden` clips them, so separators appear\n * between cells without needing to detect which cell ends a row.\n *\n * `flex: 1 1 auto` on the container makes it absorb whatever height the body has\n * left, so cells reach the card bottom and their hover wash has no dead strip.\n */\n.card-overview__metrics {\n  display: flex;\n  flex: 1 1 auto;\n  flex-wrap: wrap;\n  align-content: flex-start;\n  min-width: 0;\n  margin-inline-end: calc(-1 * var(--dimension-stroke-width-012));\n  margin-block-end: calc(-1 * var(--dimension-stroke-width-012));\n}\n\n/*\n * Square by design. Cells tile edge to edge against their dividers, so a radius\n * would break the seam; the card's own radius clips the outer corners instead.\n *\n * Padding is plain rather than control-derived: a cell is a block of content, not\n * a control box that has to optically match something on the far side.\n */\n.card-overview__metric {\n  display: flex;\n  position: relative;\n  flex: 1 1 var(--ds-card-overview-metric-min);\n  flex-direction: column;\n  gap: var(--dimension-space-050);\n  min-width: 0;\n  padding: var(--dimension-space-175) var(--dimension-space-200);\n  border-radius: 0;\n  border-inline-end: var(--ds-card-overview-divider);\n  border-block-end: var(--ds-card-overview-divider);\n}\n\n.card-overview__metric[role='button'] {\n  cursor: default;\n  -webkit-user-select: none;\n  user-select: none;\n}\n\n.card-overview__metric-label {\n  min-width: 0;\n  color: var(--color-always-dark-foreground-secondary);\n}\n\n.card-overview__metric-value {\n  color: var(--color-always-dark-foreground-primary);\n}\n\n.card-overview__metric-figure {\n  display: flex;\n  align-items: baseline;\n  gap: var(--dimension-space-100);\n  min-width: 0;\n}\n\n/* ── Trend ────────────────────────────────────────────────────────────────── */\n\n/*\n * Tone arrives resolved from the caller: the arrow direction and the sentiment\n * are independent, so a falling metric can read positive or neutral. The arrow is\n * a glyph inside this text node, so it always matches the surrounding weight.\n */\n.card-overview__trend {\n  flex: 0 0 auto;\n  white-space: nowrap;\n}\n\n.card-overview__trend--positive {\n  color: var(--color-always-dark-foreground-positive);\n}\n\n.card-overview__trend--negative {\n  color: var(--color-always-dark-foreground-negative);\n}\n\n/*\n * Secondary rather than tertiary: the change value is content, not decoration,\n * and tertiary does not hold a readable contrast at this size.\n */\n.card-overview__trend--neutral {\n  color: var(--color-always-dark-foreground-secondary);\n}\n\n/* ── Narrow layout ────────────────────────────────────────────────────────── */\n\n/*\n * Below roughly two measure columns the card stops being a bar with a leading\n * score and becomes a stack. The score turns into its own full-width row reading\n * left to right, so its divider moves from the trailing edge to the underside and\n * the period bar spans the full width beneath it.\n */\n/*\n * Selectors are host-qualified purely for specificity: the compiled sheet places\n * these rules ahead of the base ones, so a plain class here would only ever add\n * properties and never override them.\n */\n@container (max-width: 480px) {\n  :host .card-overview__score {\n    flex-direction: row;\n    align-items: baseline;\n    gap: var(--dimension-space-100);\n    width: 100%;\n    padding-block: var(--dimension-space-150);\n    border-inline-end: none;\n    border-block-end: var(--ds-card-overview-divider);\n  }\n\n  /* Pushes the figure and band to the trailing edge, opposite the label. */\n  :host .card-overview__score-label-row {\n    flex: 1 1 auto;\n    min-height: 0;\n  }\n\n  /* The vertical rhythm that aligned these to the measure rows no longer applies. */\n  :host .card-overview__score-band,\n  :host .card-overview__score-figure {\n    margin-block-start: 0;\n  }\n\n  /*\n   * Here the band joins the baseline-aligned row, so the band skeleton needs the\n   * same lift the trend skeleton gets: a solid bar synthesizes its baseline from\n   * its bottom edge and would otherwise hang below the figure's baseline. The\n   * column layout aligns the band by margin instead, so this is narrow-only.\n   */\n  :host .card-overview__score-band--loading {\n    position: relative;\n    inset-block-start: calc(-1 * (var(--dimension-space-150) + var(--dimension-space-012)));\n  }\n\n  /*\n   * The period gets a full-width row of its own here, but not enough of it for\n   * both parts on one line. Wrapping keeps the comparison readable; holding the\n   * single-line rule instead collides the two runs of text.\n   */\n  :host .card-overview__header {\n    align-items: flex-start;\n  }\n\n  :host .card-overview__period {\n    flex-wrap: wrap;\n    min-height: 0;\n    overflow: visible;\n    white-space: normal;\n  }\n}\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/wc/components/CardOverview/CardOverview.tsx",
+      "content": "import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  State,\n} from '@stencil/core';\nimport type { TextVariant } from '../Text/text-types';\nimport type { MetricTrend } from '../../utils/metric-change';\nimport type { OverviewMetric, OverviewScore } from './card-overview-types';\n\n/** Metric cells below this width drop a grid column rather than compress further. */\nconst DEFAULT_METRIC_MIN_WIDTH = 'var(--dimension-menu-width-xs)';\n\n/** Skeleton cells rendered while loading with no metrics supplied yet. */\nconst LOADING_PLACEHOLDER_COUNT = 4;\n\n@Component({\n  tag: 'ds-card-overview',\n  styleUrl: 'CardOverview.css',\n  scoped: true,\n})\nexport class CardOverview {\n  @Element() el!: HTMLElement;\n\n  /** Leading summary block. Omit to render the bar without a headline figure. */\n  @Prop() score: OverviewScore | undefined;\n\n  /** Current reporting period, for example `Jun 29, 2026 – Jul 26, 2026`. */\n  @Prop() periodLabel: string = '';\n\n  /** Comparison caption, for example `vs. previous score period`. */\n  @Prop() comparisonLabel: string = '';\n\n  /** Measures rendered in the responsive grid. */\n  @Prop() metrics: OverviewMetric[] = [];\n\n  /**\n   * Width a metric cell may shrink to before the grid drops a column. The grid\n   * reflows and then stacks from this alone, so no measurement is required.\n   */\n  @Prop() metricMinWidth: string = DEFAULT_METRIC_MIN_WIDTH;\n\n  /** Replace the score and metrics with skeletons while data resolves. */\n  @Prop() isLoading: boolean = false;\n\n  /** Message shown in place of the score when its figure cannot be resolved. */\n  @Prop() scoreErrorMessage: string | undefined;\n\n  /** Accessible name for the region. */\n  @Prop() overviewLabel: string = 'Overview';\n\n  /** Emitted when a metric that is not inactive is activated. */\n  @Event() dsMetricSelect!: EventEmitter<OverviewMetric>;\n\n  /** Roving tab stop across selectable metrics. */\n  @State() private focusedMetricIndex: number = 0;\n\n  private get hasScore(): boolean {\n    return this.score !== undefined || this.scoreErrorMessage !== undefined || this.isLoading;\n  }\n\n  /** Index of the roving tab stop, skipping inactive metrics. */\n  private get rovingIndex(): number {\n    const first = this.metrics.findIndex(metric => !metric.isInactive);\n    if (first < 0) return -1;\n    const current = this.metrics[this.focusedMetricIndex];\n    return current && !current.isInactive ? this.focusedMetricIndex : first;\n  }\n\n  private selectMetric(metric: OverviewMetric, index: number) {\n    if (metric.isInactive) return;\n    this.focusedMetricIndex = index;\n    this.dsMetricSelect.emit(metric);\n  }\n\n  /** Move the roving tab stop, wrapping and skipping inactive metrics. */\n  private moveFocus(from: number, step: number) {\n    const count = this.metrics.length;\n    if (count === 0) return;\n\n    for (let offset = 1; offset <= count; offset += 1) {\n      // Positive modulo so a backwards step from the first metric wraps to the last.\n      const next = (((from + step * offset) % count) + count) % count;\n      if (this.metrics[next]?.isInactive) continue;\n\n      this.focusedMetricIndex = next;\n      const cells = this.el.querySelectorAll<HTMLElement>('.card-overview__metric');\n      cells[next]?.focus();\n      return;\n    }\n  }\n\n  private handleMetricKeyDown = (event: KeyboardEvent, index: number) => {\n    switch (event.key) {\n      case 'ArrowRight':\n      case 'ArrowDown':\n        event.preventDefault();\n        this.moveFocus(index, 1);\n        break;\n      case 'ArrowLeft':\n      case 'ArrowUp':\n        event.preventDefault();\n        this.moveFocus(index, -1);\n        break;\n      default:\n        break;\n    }\n  };\n\n  /**\n   * A skeleton bar matching the type metrics of the text it stands in for, so the\n   * loading state holds the same shape and rhythm as the resolved content.\n   *\n   * `background` is always passed: the default base is the theme's quaternary\n   * foreground, which is black and therefore invisible on this permanently dark\n   * surface.\n   */\n  private bar(textVariant: TextVariant, width: string, className?: string) {\n    return (\n      <ds-skeleton\n        class={className}\n        variant=\"text\"\n        textVariant={textVariant}\n        width={width}\n        background=\"always-dark\"\n      />\n    );\n  }\n\n  /**\n   * Arrow and change in one text node.\n   *\n   * The arrow is a typeface glyph rather than an icon so it inherits the exact\n   * size, weight, and baseline of the value beside it; an icon would need its\n   * own size scale and would drift whenever the type scale changed.\n   *\n   * Tone is supplied by the caller and never inferred here.\n   */\n  private renderTrend(trend: MetricTrend | undefined, variant: TextVariant, emphasis = false) {\n    if (!trend) return null;\n    return (\n      <ds-text\n        as=\"span\"\n        class={{\n          'card-overview__trend': true,\n          [`card-overview__trend--${trend.tone}`]: true,\n        }}\n        variant={variant}\n        emphasis={emphasis}\n        color=\"inherit\"\n        fontFeature=\"tabular-nums\"\n      >\n        {trend.direction === 'up' ? '↑' : '↓'} {trend.value}\n      </ds-text>\n    );\n  }\n\n  private renderScore() {\n    if (this.isLoading) {\n      return (\n        <div class=\"card-overview__score ds-control--md\" part=\"score\">\n          {/*\n            * The label row is kept but left empty. It carries the control-height\n            * box that aligns the score block with the period control, so dropping\n            * it would shift the whole block up; a bar inside it would collide with\n            * the figure, which sits under the label by design.\n            */}\n          <div class=\"card-overview__score-label-row\" />\n          <div class=\"card-overview__score-figure\">\n            {this.bar('text-display-medium', '56px')}\n            {this.bar('text-body-small', '24px', 'card-overview__skeleton-baseline')}\n          </div>\n          {/*\n            * Class goes on the skeleton itself, matching the resolved band. In a\n            * wrapper the bar picks up inline leading and drops below the resolved\n            * band position.\n            */}\n          {this.bar('text-caption', '80px', 'card-overview__score-band card-overview__score-band--loading')}\n        </div>\n      );\n    }\n\n    if (this.scoreErrorMessage) {\n      return (\n        <div class=\"card-overview__score card-overview__score--error\" part=\"score\" role=\"alert\">\n          <ds-icon name=\"CircleExclamation\" size=\"sm\" color=\"inherit\" aria-hidden=\"true\" />\n          <ds-text as=\"span\" variant=\"text-body-medium\" color=\"inherit\">\n            {this.scoreErrorMessage}\n          </ds-text>\n        </div>\n      );\n    }\n\n    const score = this.score;\n    if (!score) return null;\n\n    return (\n      <div class=\"card-overview__score ds-control--md\" part=\"score\">\n        <div class=\"card-overview__score-label-row\">\n          <ds-text\n            as=\"span\"\n            class=\"card-overview__score-label\"\n            variant=\"text-body-medium\"\n            emphasis\n            color=\"inherit\"\n          >\n            {score.label}\n          </ds-text>\n        </div>\n        <div class=\"card-overview__score-figure\">\n          <ds-text as=\"span\" variant=\"text-display-medium\" emphasis color=\"inherit\" fontFeature=\"tabular-nums\">\n            {score.value}\n          </ds-text>\n          {this.renderTrend(score.trend, 'text-body-small', true)}\n        </div>\n        {score.band && (\n          <ds-text as=\"span\" class=\"card-overview__score-band\" variant=\"text-caption\" color=\"inherit\">\n            {score.band}\n          </ds-text>\n        )}\n      </div>\n    );\n  }\n\n  private renderMetric(metric: OverviewMetric, index: number) {\n    const selectable = !metric.isInactive;\n    const label = (\n      <ds-text as=\"span\" class=\"card-overview__metric-label\" variant=\"text-body-small\" color=\"inherit\">\n        {metric.label}\n      </ds-text>\n    );\n\n    return (\n      <div\n        class={{\n          'card-overview__metric': true,\n          'card-overview__metric--inactive': !selectable,\n          // Selection targets get the shared wash; press scaling is not used here\n          // so the grid keeps its columns aligned. See docs/control-press-policy.md.\n          'ds-interaction-fill': selectable,\n          // The card is permanently dark, so interaction tokens come from that family.\n          'ds-interaction-fill--on-always-dark': selectable,\n          'ds-focus-ring-inset': selectable,\n        }}\n        part=\"metric\"\n        role={selectable ? 'button' : undefined}\n        tabIndex={selectable && index === this.rovingIndex ? 0 : -1}\n        onClick={() => this.selectMetric(metric, index)}\n        onKeyDown={event => this.handleMetricKeyDown(event, index)}\n        onFocusin={() => {\n          if (selectable) this.focusedMetricIndex = index;\n        }}\n      >\n        {metric.labelTooltip\n          ? <ds-tooltip label={metric.labelTooltip} side=\"top\" size=\"sm\">{label}</ds-tooltip>\n          : label}\n        <div class=\"card-overview__metric-figure\">\n          <ds-text as=\"span\" class=\"card-overview__metric-value\" variant=\"text-body-medium\" color=\"inherit\" fontFeature=\"tabular-nums\">\n            {metric.value}\n          </ds-text>\n          {this.renderTrend(metric.trend, 'text-body-medium')}\n        </div>\n      </div>\n    );\n  }\n\n  private renderMetrics() {\n    if (this.isLoading && this.metrics.length === 0) {\n      return Array.from({ length: LOADING_PLACEHOLDER_COUNT }, (_, index) => (\n        <div class=\"card-overview__metric\" key={`loading-${index}`}>\n          {this.bar('text-body-small', '70%', 'card-overview__metric-label')}\n          <div class=\"card-overview__metric-figure\">\n            {this.bar('text-body-medium', '36px')}\n            {/* text-body-medium, matching renderTrend for a metric — a smaller\n              * variant here leaves the trend bar short of the value beside it. */}\n            {this.bar('text-body-medium', '40px')}\n          </div>\n        </div>\n      ));\n    }\n\n    return this.metrics.map((metric, index) => this.renderMetric(metric, index));\n  }\n\n  render() {\n    const hasHeader = Boolean(this.periodLabel || this.comparisonLabel);\n\n    return (\n      <Host\n        class={{\n          'card-overview': true,\n          'card-overview--has-score': this.hasScore,\n          // Split shadow and inset highlight, so the opaque surface cannot cover\n          // the highlight the way a combined elevation shadow would.\n          'ds-control-elevation': true,\n          'ds-control-elevation--sm': true,\n        }}\n        role=\"region\"\n        aria-label={this.overviewLabel}\n        aria-busy={this.isLoading ? 'true' : undefined}\n        style={{ '--ds-card-overview-metric-min': this.metricMinWidth }}\n      >\n        {this.hasScore && this.renderScore()}\n\n        <div class=\"card-overview__body\">\n          {/* `ds-control--md` supplies the 32px height and the label inset below. */}\n          <div class=\"card-overview__header ds-control--md\">\n            {this.isLoading ? (\n              <div class=\"card-overview__period ds-control-label-box\">\n                {this.bar('text-body-medium', '184px')}\n                {this.bar('text-body-medium', '248px')}\n              </div>\n            ) : hasHeader && (\n              <div class=\"card-overview__period ds-control-label-box\">\n                {this.periodLabel && (\n                  <ds-text as=\"span\" class=\"card-overview__period-current ds-control-label-box\" variant=\"text-body-medium\" emphasis color=\"inherit\">\n                    {this.periodLabel}\n                  </ds-text>\n                )}\n                {this.comparisonLabel && (\n                  <ds-text as=\"span\" class=\"card-overview__period-comparison ds-control-label-box\" variant=\"text-body-medium\" color=\"inherit\">\n                    {this.comparisonLabel}\n                  </ds-text>\n                )}\n              </div>\n            )}\n            <div class=\"card-overview__filter\">\n              {/*\n                Period control is application owned: it varies by product surface.\n                While loading it is stood in for by a control-shaped skeleton so the\n                header keeps its resolved proportions.\n              */}\n              {this.isLoading\n                ? <ds-skeleton variant=\"control\" controlSize=\"md\" width=\"128px\" background=\"always-dark\" />\n                : <slot name=\"filter\" />}\n            </div>\n          </div>\n\n          <div class=\"card-overview__metrics\" part=\"metrics\">\n            {this.renderMetrics()}\n          </div>\n\n          <slot name=\"footer\" />\n        </div>\n      </Host>\n    );\n  }\n}\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/wc/components/CardOverview/card-overview-types.ts",
+      "content": "import type { MetricTrend } from '../../utils/metric-change';\n\n/**\n * Leading summary block — the headline figure the rest of the bar contextualises.\n *\n * Derive `trend` with `resolveMetricTrend` so whether a rise reads well stays a\n * product decision rather than a design-system one.\n */\nexport interface OverviewScore {\n  /** Category above the figure, for example `Safety score`. */\n  label: string;\n  /** Display-ready headline figure. */\n  value: string | number;\n  /** Change against the comparison period. Omit when there is nothing to report. */\n  trend?: MetricTrend;\n  /** Qualitative band beneath the figure, for example `Good (67–83)`. */\n  band?: string;\n}\n\n/** One measure in the overview grid. */\nexport interface OverviewMetric {\n  /** Stable identity for keyed rendering and selection events. */\n  id: string;\n  label: string;\n  /** Display-ready value; format compactly before passing it in. */\n  value: string | number;\n  /** Change against the comparison period. Omit when there is nothing to report. */\n  trend?: MetricTrend;\n  /** Present the measure without making it selectable. */\n  isInactive?: boolean;\n  /** Supplementary explanation for the label. */\n  labelTooltip?: string;\n}\n",
+      "type": "registry:ui"
+    }
+  ]
+}

package/dist/mcp-data/registry/card-setting.json

@@ -249,7 +249,7 @@
       },
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^3.1.1",
+          "@ds-mo/tokens ^5.0.0",
           "@ds-mo/icons ^6.4.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Angular 19-22 standalone adapters."
@@ -268,12 +268,12 @@
   "files": [
     {
       "path": "src/wc/components/CardSetting/CardSetting.css",
-      "content": ":host {\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  width: var(--_card-setting-width);\n  min-height: var(--_card-setting-min-height);\n  max-width: 100%;\n  overflow: hidden;\n  background-color: var(--color-background-primary);\n  border: none;\n  border-radius: var(--dimension-radius-025);\n  box-shadow: 0 0 0 var(--dimension-stroke-width-012) var(--color-border-tertiary);\n}\n\n:host(.card-setting--editing) {\n  background-color: var(--color-background-bold-brand);\n  box-shadow: 0 0 0 var(--dimension-stroke-width-025) var(--color-border-bold-brand);\n}\n\n.card-setting__header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--dimension-space-100);\n  height: var(--dimension-size-600);\n  padding: var(--dimension-space-100);\n  flex: 0 0 auto;\n  box-sizing: border-box;\n  background-color: var(--color-background-secondary);\n  border-bottom: var(--dimension-stroke-width-012) solid var(--color-border-tertiary);\n}\n\n:host(.card-setting--editing) .card-setting__header {\n  background-color: transparent;\n  border-bottom-color: transparent;\n}\n\nds-text.card-setting__title {\n  display: flex;\n  flex: 1 1 auto;\n  align-items: center;\n  min-width: 0;\n  padding: calc(var(--dimension-space-075) + var(--dimension-space-025));\n  box-sizing: border-box;\n  -webkit-user-select: none;\n  user-select: none;\n}\n\n.card-setting__actions {\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  gap: var(--dimension-space-100);\n}\n\n.card-setting__body {\n  display: flex;\n  flex: 1 1 auto;\n  flex-direction: column;\n  min-height: 0;\n  box-sizing: border-box;\n  background-color: var(--color-background-primary);\n  border-radius: 0 0 var(--dimension-radius-025) var(--dimension-radius-025);\n}\n\n:host(.card-setting--editing) .card-setting__body {\n  border-radius: var(--dimension-radius-025);\n}\n",
+      "content": "@import '../../utils/chrome-layout.css';\n\n:host {\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  width: var(--_card-setting-width);\n  min-height: var(--_card-setting-min-height);\n  max-width: 100%;\n  overflow: hidden;\n  background-color: var(--color-background-primary);\n  border: none;\n  border-radius: var(--dimension-radius-025);\n  box-shadow: 0 0 0 var(--dimension-stroke-width-012) var(--color-border-tertiary);\n}\n\n:host(.card-setting--editing) {\n  background-color: var(--color-background-bold-brand);\n  box-shadow: 0 0 0 var(--dimension-stroke-width-025) var(--color-border-bold-brand);\n}\n\n.card-setting__header {\n  justify-content: space-between;\n  height: var(--dimension-size-600);\n  flex: 0 0 auto;\n  background-color: var(--color-background-secondary);\n  border-bottom: var(--dimension-stroke-width-012) solid var(--color-border-tertiary);\n}\n\n:host(.card-setting--editing) .card-setting__header {\n  background-color: transparent;\n  border-bottom-color: transparent;\n}\n\nds-text.card-setting__title {\n  display: flex;\n  flex: 1 1 auto;\n  align-items: center;\n  min-width: 0;\n  padding: calc(var(--dimension-space-075) + var(--dimension-space-025));\n  box-sizing: border-box;\n  -webkit-user-select: none;\n  user-select: none;\n}\n\n.card-setting__actions {\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  gap: var(--dimension-space-100);\n}\n\n.card-setting__body {\n  display: flex;\n  flex: 1 1 auto;\n  flex-direction: column;\n  min-height: 0;\n  box-sizing: border-box;\n  background-color: var(--color-background-primary);\n  border-radius: 0 0 var(--dimension-radius-025) var(--dimension-radius-025);\n}\n\n:host(.card-setting--editing) .card-setting__body {\n  border-radius: var(--dimension-radius-025);\n}\n",
       "type": "registry:ui"
     },
     {
       "path": "src/wc/components/CardSetting/CardSetting.tsx",
-      "content": "import { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\n\nexport type CardSettingWidth = 'sm' | 'md' | 'lg';\nexport type CardSettingAction = 'edit' | 'save' | 'cancel';\n\nexport interface CardSettingActionDetail {\n  action: CardSettingAction;\n  originalEvent: MouseEvent;\n}\n\nconst CARD_WIDTH_VARS: Record<CardSettingWidth, string> = {\n  sm: 'var(--dimension-card-width-sm)',\n  md: 'var(--dimension-card-width-md)',\n  lg: 'var(--dimension-card-width-lg)',\n};\n\nconst CARD_HEIGHT_VARS: Record<CardSettingWidth, string> = {\n  sm: 'var(--dimension-card-height-sm)',\n  md: 'var(--dimension-card-height-md)',\n  lg: 'var(--dimension-card-height-lg)',\n};\n\nconst FAINT_BRAND_TITLE_COLOR = 'var(--color-foreground-faint-brand)';\n\n@Component({\n  tag: 'ds-card-setting',\n  styleUrl: 'CardSetting.css',\n  scoped: true,\n})\nexport class CardSetting {\n  /** Section heading shown in the card header. */\n  @Prop() heading!: string;\n\n  /**\n   * Card width token (`sm` / `md` / `lg`). Also sets host `min-height` to the\n   * matching `--dimension-card-height-*` so the body fills available space\n   * even when the slot is empty.\n   */\n  @Prop() cardWidth: CardSettingWidth = 'md';\n\n  /** Controlled edit state — parent owns single-edit orchestration. */\n  @Prop() editing = false;\n  @Prop() editLabel: string = 'Edit';\n  @Prop() cancelLabel: string = 'Cancel';\n  @Prop() saveLabel: string = 'Save';\n\n  /** Emits a controlled edit, save, or cancel request. */\n  @Event() dsAction!: EventEmitter<CardSettingActionDetail>;\n\n  private emitAction(action: CardSettingAction, originalEvent: MouseEvent) {\n    this.dsAction.emit({ action, originalEvent });\n  }\n\n  render() {\n    const editing = this.editing;\n\n    return (\n      <Host\n        class={{\n          'card-setting': true,\n          'card-setting--editing': editing,\n        }}\n        style={{\n          '--_card-setting-width': CARD_WIDTH_VARS[this.cardWidth],\n          '--_card-setting-min-height': CARD_HEIGHT_VARS[this.cardWidth],\n        }}\n      >\n        <header class=\"card-setting__header\">\n          <ds-text\n            class=\"card-setting__title\"\n            variant=\"text-title-small\"\n            emphasis\n            color={editing ? FAINT_BRAND_TITLE_COLOR : 'primary'}\n            as=\"h2\"\n          >\n            {this.heading}\n          </ds-text>\n          <div class=\"card-setting__actions\">\n          {!editing ? (\n            <ds-button-unfilled\n              variant=\"icon\"\n              type=\"button\"\n              icon=\"Pencil\"\n              aria-label={this.editLabel}\n              onDsClick={(event: CustomEvent<MouseEvent>) =>\n                this.emitAction('edit', event.detail)\n              }\n            />\n          ) : (\n            [\n              <ds-button-unfilled\n                key=\"cancel\"\n                variant=\"icon\"\n                type=\"button\"\n                icon=\"Cross\"\n                background=\"bold\"\n                aria-label={this.cancelLabel}\n                onDsClick={(event: CustomEvent<MouseEvent>) =>\n                  this.emitAction('cancel', event.detail)\n                }\n              />,\n              <ds-button-filled\n                key=\"save\"\n                variant=\"icon\"\n                type=\"button\"\n                icon=\"Check\"\n                intent=\"brand\"\n                contrast=\"faint\"\n                aria-label={this.saveLabel}\n                onDsClick={(event: CustomEvent<MouseEvent>) =>\n                  this.emitAction('save', event.detail)\n                }\n              />,\n            ]\n          )}\n          </div>\n        </header>\n        <div class=\"card-setting__body\">\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n",
+      "content": "import { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\n\nexport type CardSettingWidth = 'sm' | 'md' | 'lg';\nexport type CardSettingAction = 'edit' | 'save' | 'cancel';\n\nexport interface CardSettingActionDetail {\n  action: CardSettingAction;\n  originalEvent: MouseEvent;\n}\n\nconst CARD_WIDTH_VARS: Record<CardSettingWidth, string> = {\n  sm: 'var(--dimension-card-width-sm)',\n  md: 'var(--dimension-card-width-md)',\n  lg: 'var(--dimension-card-width-lg)',\n};\n\nconst CARD_HEIGHT_VARS: Record<CardSettingWidth, string> = {\n  sm: 'var(--dimension-card-height-sm)',\n  md: 'var(--dimension-card-height-md)',\n  lg: 'var(--dimension-card-height-lg)',\n};\n\nconst FAINT_BRAND_TITLE_COLOR = 'var(--color-foreground-faint-brand)';\n\n@Component({\n  tag: 'ds-card-setting',\n  styleUrl: 'CardSetting.css',\n  scoped: true,\n})\nexport class CardSetting {\n  /** Section heading shown in the card header. */\n  @Prop() heading!: string;\n\n  /**\n   * Card width token (`sm` / `md` / `lg`). Also sets host `min-height` to the\n   * matching `--dimension-card-height-*` so the body fills available space\n   * even when the slot is empty.\n   */\n  @Prop() cardWidth: CardSettingWidth = 'md';\n\n  /** Controlled edit state — parent owns single-edit orchestration. */\n  @Prop() editing = false;\n  @Prop() editLabel: string = 'Edit';\n  @Prop() cancelLabel: string = 'Cancel';\n  @Prop() saveLabel: string = 'Save';\n\n  /** Emits a controlled edit, save, or cancel request. */\n  @Event() dsAction!: EventEmitter<CardSettingActionDetail>;\n\n  private emitAction(action: CardSettingAction, originalEvent: MouseEvent) {\n    this.dsAction.emit({ action, originalEvent });\n  }\n\n  render() {\n    const editing = this.editing;\n\n    return (\n      <Host\n        class={{\n          'card-setting': true,\n          'card-setting--editing': editing,\n        }}\n        style={{\n          '--_card-setting-width': CARD_WIDTH_VARS[this.cardWidth],\n          '--_card-setting-min-height': CARD_HEIGHT_VARS[this.cardWidth],\n        }}\n      >\n        <header class=\"card-setting__header ds-chrome-row ds-chrome-space--md\">\n          <ds-text\n            class=\"card-setting__title\"\n            variant=\"text-title-small\"\n            emphasis\n            color={editing ? FAINT_BRAND_TITLE_COLOR : 'primary'}\n            as=\"h2\"\n          >\n            {this.heading}\n          </ds-text>\n          <div class=\"card-setting__actions\">\n          {!editing ? (\n            <ds-button-unfilled\n              variant=\"icon\"\n              type=\"button\"\n              icon=\"Pencil\"\n              aria-label={this.editLabel}\n              onDsClick={(event: CustomEvent<MouseEvent>) =>\n                this.emitAction('edit', event.detail)\n              }\n            />\n          ) : (\n            [\n              <ds-button-unfilled\n                key=\"cancel\"\n                variant=\"icon\"\n                type=\"button\"\n                icon=\"Cross\"\n                background=\"bold\"\n                aria-label={this.cancelLabel}\n                onDsClick={(event: CustomEvent<MouseEvent>) =>\n                  this.emitAction('cancel', event.detail)\n                }\n              />,\n              <ds-button-filled\n                key=\"save\"\n                variant=\"icon\"\n                type=\"button\"\n                icon=\"Check\"\n                intent=\"brand\"\n                contrast=\"faint\"\n                aria-label={this.saveLabel}\n                onDsClick={(event: CustomEvent<MouseEvent>) =>\n                  this.emitAction('save', event.detail)\n                }\n              />,\n            ]\n          )}\n          </div>\n        </header>\n        <div class=\"card-setting__body\">\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n",
       "type": "registry:ui"
     }
   ]

package/dist/mcp-data/registry/card-shell-data-viz.json

@@ -151,7 +151,7 @@
       },
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^3.1.1",
+          "@ds-mo/tokens ^5.0.0",
           "@ds-mo/icons ^6.4.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Angular 19-22 standalone adapters."
@@ -168,12 +168,12 @@
   "files": [
     {
       "path": "src/wc/components/CardShellDataViz/CardShellDataViz.css",
-      "content": ":host {\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  width: var(--_card-shell-data-viz-width);\n  min-height: var(--_card-shell-data-viz-min-height);\n  max-width: 100%;\n  overflow: hidden;\n  border: none;\n  border-radius: var(--dimension-radius-025);\n  background-color: var(--color-background-primary);\n  box-shadow: 0 0 0 var(--dimension-stroke-width-012) var(--color-border-tertiary);\n}\n\n.card-shell-data-viz__header {\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: space-between;\n  box-sizing: border-box;\n  height: var(--dimension-size-600);\n  padding: var(--dimension-space-100);\n  gap: var(--dimension-space-100);\n  border-bottom: var(--dimension-stroke-width-012) solid var(--color-border-tertiary);\n  background-color: var(--color-background-secondary);\n}\n\nds-text.card-shell-data-viz__title {\n  display: flex;\n  flex: 1 1 auto;\n  align-items: center;\n  box-sizing: border-box;\n  min-width: 0;\n  padding: calc(var(--dimension-space-075) + var(--dimension-space-025));\n  -webkit-user-select: none;\n  user-select: none;\n}\n\n.card-shell-data-viz__actions {\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  gap: var(--dimension-space-100);\n}\n\n.card-shell-data-viz__actions:empty {\n  display: none;\n}\n\n.card-shell-data-viz__body {\n  display: flex;\n  flex: 1 1 auto;\n  flex-direction: column;\n  box-sizing: border-box;\n  min-height: 0;\n  border-radius: 0 0 var(--dimension-radius-025) var(--dimension-radius-025);\n  background-color: var(--color-background-primary);\n}\n",
+      "content": "@import '../../utils/chrome-layout.css';\n\n:host {\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  width: var(--_card-shell-data-viz-width);\n  min-height: var(--_card-shell-data-viz-min-height);\n  max-width: 100%;\n  overflow: hidden;\n  border: none;\n  border-radius: var(--dimension-radius-025);\n  background-color: var(--color-background-primary);\n  box-shadow: 0 0 0 var(--dimension-stroke-width-012) var(--color-border-tertiary);\n}\n\n.card-shell-data-viz__header {\n  flex-shrink: 0;\n  justify-content: space-between;\n  height: var(--dimension-size-600);\n  border-bottom: var(--dimension-stroke-width-012) solid var(--color-border-tertiary);\n  background-color: var(--color-background-secondary);\n}\n\nds-text.card-shell-data-viz__title {\n  display: flex;\n  flex: 1 1 auto;\n  align-items: center;\n  box-sizing: border-box;\n  min-width: 0;\n  padding: calc(var(--dimension-space-075) + var(--dimension-space-025));\n  -webkit-user-select: none;\n  user-select: none;\n}\n\n.card-shell-data-viz__actions {\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  gap: var(--dimension-space-100);\n}\n\n.card-shell-data-viz__actions:empty {\n  display: none;\n}\n\n.card-shell-data-viz__body {\n  display: flex;\n  flex: 1 1 auto;\n  flex-direction: column;\n  box-sizing: border-box;\n  min-height: 0;\n  border-radius: 0 0 var(--dimension-radius-025) var(--dimension-radius-025);\n  background-color: var(--color-background-primary);\n}\n",
       "type": "registry:ui"
     },
     {
       "path": "src/wc/components/CardShellDataViz/CardShellDataViz.tsx",
-      "content": "import { Component, h, Host, Prop } from '@stencil/core';\n\nexport type CardShellDataVizWidth = 'sm' | 'md' | 'lg';\n\nconst CARD_WIDTH_VARS: Record<CardShellDataVizWidth, string> = {\n  sm: 'var(--dimension-card-width-sm)',\n  md: 'var(--dimension-card-width-md)',\n  lg: 'var(--dimension-card-width-lg)',\n};\n\nconst CARD_HEIGHT_VARS: Record<CardShellDataVizWidth, string> = {\n  sm: 'var(--dimension-card-height-sm)',\n  md: 'var(--dimension-card-height-md)',\n  lg: 'var(--dimension-card-height-lg)',\n};\n\n/**\n * Dedicated shell chrome for data-visualization cards. Chart-specific layout,\n * legends, hover synchronization, and empty states belong to composing cards.\n */\n@Component({\n  tag: 'ds-card-shell-data-viz',\n  styleUrl: 'CardShellDataViz.css',\n  scoped: true,\n})\nexport class CardShellDataViz {\n  /** Data-visualization heading shown in the shell header. */\n  @Prop() heading!: string;\n\n  /** Width token with the matching data-visualization shell min-height. */\n  @Prop() cardWidth: CardShellDataVizWidth = 'md';\n\n  render() {\n    return (\n      <Host\n        class=\"card-shell-data-viz\"\n        style={{\n          '--_card-shell-data-viz-width': CARD_WIDTH_VARS[this.cardWidth],\n          '--_card-shell-data-viz-min-height': CARD_HEIGHT_VARS[this.cardWidth],\n        }}\n      >\n        <header class=\"card-shell-data-viz__header\">\n          <ds-text\n            class=\"card-shell-data-viz__title\"\n            variant=\"text-title-small\"\n            emphasis\n            color=\"primary\"\n            as=\"h2\"\n          >\n            {this.heading}\n          </ds-text>\n          <div class=\"card-shell-data-viz__actions\">\n            <slot name=\"actions\" />\n          </div>\n        </header>\n        <div class=\"card-shell-data-viz__body\">\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n",
+      "content": "import { Component, h, Host, Prop } from '@stencil/core';\n\nexport type CardShellDataVizWidth = 'sm' | 'md' | 'lg';\n\nconst CARD_WIDTH_VARS: Record<CardShellDataVizWidth, string> = {\n  sm: 'var(--dimension-card-width-sm)',\n  md: 'var(--dimension-card-width-md)',\n  lg: 'var(--dimension-card-width-lg)',\n};\n\nconst CARD_HEIGHT_VARS: Record<CardShellDataVizWidth, string> = {\n  sm: 'var(--dimension-card-height-sm)',\n  md: 'var(--dimension-card-height-md)',\n  lg: 'var(--dimension-card-height-lg)',\n};\n\n/**\n * Dedicated shell chrome for data-visualization cards. Chart-specific layout,\n * legends, hover synchronization, and empty states belong to composing cards.\n */\n@Component({\n  tag: 'ds-card-shell-data-viz',\n  styleUrl: 'CardShellDataViz.css',\n  scoped: true,\n})\nexport class CardShellDataViz {\n  /** Data-visualization heading shown in the shell header. */\n  @Prop() heading!: string;\n\n  /** Width token with the matching data-visualization shell min-height. */\n  @Prop() cardWidth: CardShellDataVizWidth = 'md';\n\n  render() {\n    return (\n      <Host\n        class=\"card-shell-data-viz\"\n        style={{\n          '--_card-shell-data-viz-width': CARD_WIDTH_VARS[this.cardWidth],\n          '--_card-shell-data-viz-min-height': CARD_HEIGHT_VARS[this.cardWidth],\n        }}\n      >\n        <header class=\"card-shell-data-viz__header ds-chrome-row ds-chrome-space--md\">\n          <ds-text\n            class=\"card-shell-data-viz__title\"\n            variant=\"text-title-small\"\n            emphasis\n            color=\"primary\"\n            as=\"h2\"\n          >\n            {this.heading}\n          </ds-text>\n          <div class=\"card-shell-data-viz__actions\">\n            <slot name=\"actions\" />\n          </div>\n        </header>\n        <div class=\"card-shell-data-viz__body\">\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n",
       "type": "registry:ui"
     }
   ]