@ds-mo/ui 12.7.0 → 12.9.0

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

@@ -0,0 +1,360 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "card-overview",
+  "title": "CardOverview",
+  "description": "Page-level summary card pairing one headline score with a reporting period, an application-owned period control, and a responsive grid of comparable measures, with an optional compact 48px presentation.",
+  "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 card pairing one headline score with a reporting period, an application-owned period control, and a responsive grid of comparable measures, with an optional compact 48px presentation.",
+      "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.",
+        "At most six measures are shown. Keep larger collections outside the summary bar rather than turning it into a dense dashboard.",
+        "The period control is slotted rather than owned, because the choice of stepper, select, or date range varies by product surface.",
+        "compact is exactly 48px high and keeps only the score label, score value, trend, reporting copy, and slotted period control. It omits the score band, measures, and footer."
+      ],
+      "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.",
+        "Every occupied grid track has the same width. When a final row is incomplete, its measures keep the same width as the row above and the unused tracks remain empty.",
+        "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.",
+        "Once the card reaches its narrow stacked state, one summary block holds the score label, score, trend, score band, reporting period, and the application-owned period control above the single-column measures.",
+        "In that stacked summary, the score and trend share one line at the start, while the score band is hidden to preserve space. The period control stays at the upper end, while the current period and comparison sit on separate right-aligned lines beside the score.",
+        "Every measure occupies a full-width row in the stacked state.",
+        "Set layout to stacked when the owning page shell enters a responsive mode before the card's own container reaches its narrow threshold.",
+        "CardOverview does not observe scroll or choose its own presentation. The page owner may use compact as sticky summary chrome on supported breakpoints."
+      ],
+      "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 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."
+        },
+        "layout": {
+          "type": "CardOverviewLayout",
+          "resolvedType": "\"auto\" | \"stacked\"",
+          "attribute": "layout",
+          "default": "'auto'",
+          "required": false,
+          "mutable": false,
+          "description": "Intrinsic responsive layout, or a page-owned single-column stack."
+        },
+        "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. Only the first six are shown."
+        },
+        "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."
+        },
+        "variant": {
+          "type": "CardOverviewVariant",
+          "resolvedType": "\"compact\" | \"default\"",
+          "attribute": "variant",
+          "default": "'default'",
+          "required": false,
+          "mutable": false,
+          "description": "Full summary card, or the condensed 48px summary bar."
+        }
+      },
+      "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 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."
+      },
+      "layout": {
+        "type": "CardOverviewLayout",
+        "resolvedType": "\"auto\" | \"stacked\"",
+        "attribute": "layout",
+        "default": "'auto'",
+        "required": false,
+        "mutable": false,
+        "description": "Intrinsic responsive layout, or a page-owned single-column stack."
+      },
+      "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. Only the first six are shown."
+      },
+      "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."
+      },
+      "variant": {
+        "type": "CardOverviewVariant",
+        "resolvedType": "\"compact\" | \"default\"",
+        "attribute": "variant",
+        "default": "'default'",
+        "required": false,
+        "mutable": false,
+        "description": "Full summary card, or the condensed 48px summary bar."
+      }
+    },
+    "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: block;\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-width: var(--dimension-stroke-width-012);\n  --ds-card-overview-divider-color: var(--color-always-dark-border-tertiary);\n  --ds-card-overview-divider: var(--ds-card-overview-divider-width) solid\n    var(--ds-card-overview-divider-color);\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.card-overview__layout {\n  display: grid;\n  grid-template-rows: auto minmax(0, 1fr);\n  grid-template-columns: minmax(0, 1fr);\n  align-items: stretch;\n  min-width: 0;\n}\n\n.card-overview__layout--has-score {\n  grid-template-columns: auto minmax(0, 1fr);\n}\n\n/*\n * Transparent at regular widths so the score and header participate in the\n * inner layout grid directly. At the narrow breakpoint it becomes the unified\n * summary block above the metrics.\n */\n.card-overview__summary {\n  display: contents;\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  grid-row: 1 / span 2;\n  grid-column: 1;\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.card-overview__score--resolved {\n  min-inline-size: max-content;\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/*\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.card-overview__score-value {\n  flex: 0 0 auto;\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}\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  grid-row: 2;\n  grid-column: 1;\n  flex-direction: column;\n  min-width: 0;\n}\n\n.card-overview__body--has-score {\n  grid-column: 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  grid-row: 1;\n  grid-column: 1;\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.card-overview__header--has-score {\n  grid-column: 2;\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/* 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 * `auto-fit` gives every occupied track an equal share while all metrics fit on\n * one row. Once wrapping creates another row, its cells stay on those same\n * tracks, so a partial final row leaves empty space instead of stretching one\n * measure wider than its peers.\n *\n * Dividers are painted outward from each cell and clipped by this grid. That\n * leaves only the lines between cells: anything emitted from the final column or\n * final row lands outside the grid and is clipped without needing to detect the\n * number of tracks.\n *\n * `flex: 1 1 auto` makes the grid 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: grid;\n  flex: 1 1 auto;\n  grid-template-columns: repeat(\n    auto-fit,\n    minmax(min(100%, var(--ds-card-overview-metric-min)), 1fr)\n  );\n  align-content: stretch;\n  min-width: 0;\n  overflow: clip;\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-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  box-shadow:\n    var(--ds-card-overview-divider-width) 0 0 0 var(--ds-card-overview-divider-color),\n    0 var(--ds-card-overview-divider-width) 0 0 var(--ds-card-overview-divider-color);\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}\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/* ── Narrow layout ────────────────────────────────────────────────────────── */\n\n/*\n * Below roughly two measure columns the card becomes a full stack. The summary\n * wrapper owns one block above the metrics: score label, figure, and trend stay\n * together at the start; the period control sits at the upper end; and the period\n * copy follows the score instead of becoming a separate divided row.\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__layout {\n    grid-template-rows: auto minmax(0, 1fr);\n    grid-template-columns: minmax(0, 1fr);\n  }\n\n  :host .card-overview__summary {\n    display: grid;\n    grid-row: 1;\n    grid-column: 1;\n    grid-template-columns: minmax(0, 1fr) auto;\n    grid-template-rows: auto;\n    border-block-end: var(--ds-card-overview-divider);\n  }\n\n  :host .card-overview__score {\n    display: grid;\n    grid-row: 1;\n    grid-column: 1;\n    grid-template-rows: auto auto;\n    grid-template-columns: auto auto;\n    justify-content: start;\n    column-gap: var(--dimension-space-100);\n    width: auto;\n    padding-block-end: var(--dimension-space-100);\n    padding-inline-end: var(--dimension-space-100);\n    border-inline-end: none;\n  }\n\n  :host .card-overview__score-label-row {\n    grid-row: 1;\n    grid-column: 1 / -1;\n    min-height: var(--ds-control-height);\n  }\n\n  /*\n   * The wide score uses optical offsets to meet the neighbouring metric\n   * baselines. In the stacked summary those neighbours are gone, so natural\n   * document flow keeps the label, figure, band, and period clearly ordered.\n   */\n  :host .card-overview__score-band,\n  :host .card-overview__score-figure {\n    grid-row: 2;\n    margin-block-start: 0;\n  }\n\n  :host .card-overview__score-figure {\n    grid-column: 1;\n    align-self: baseline;\n    gap: var(--dimension-space-100);\n  }\n\n  :host .card-overview__score-band {\n    grid-column: 2;\n    align-self: baseline;\n    display: none;\n  }\n\n  :host .card-overview__header {\n    display: grid;\n    grid-row: 1;\n    grid-column: 2;\n    grid-template-rows: auto auto;\n    align-content: start;\n    gap: 0;\n    padding: 0;\n    border-block-end: none;\n  }\n\n  :host .card-overview__filter {\n    grid-row: 1;\n    grid-column: 1;\n    align-self: start;\n    justify-self: end;\n    padding: var(--dimension-space-100) var(--dimension-space-100) 0 0;\n  }\n\n  :host .card-overview__period {\n    grid-row: 2;\n    grid-column: 1;\n    flex-direction: column;\n    align-items: flex-end;\n    justify-self: stretch;\n    gap: 0;\n    min-height: 0;\n    padding-block: var(--dimension-space-150) var(--dimension-space-100);\n    padding-inline: var(--dimension-space-100) var(--dimension-space-200);\n    overflow: visible;\n    text-align: end;\n    white-space: nowrap;\n  }\n\n  :host .card-overview__body {\n    grid-row: 2;\n    grid-column: 1;\n  }\n}\n\n/*\n * Page shells may enter a responsive mode before this card itself becomes\n * narrow. The explicit stacked layout applies the same composition without\n * coupling CardOverview to a viewport breakpoint.\n */\n:host(.card-overview--stacked) .card-overview__layout {\n  grid-template-rows: auto minmax(0, 1fr);\n  grid-template-columns: minmax(0, 1fr);\n}\n\n:host(.card-overview--stacked) .card-overview__summary {\n  display: grid;\n  grid-row: 1;\n  grid-column: 1;\n  grid-template-columns: minmax(0, 1fr) auto;\n  grid-template-rows: auto;\n  border-block-end: var(--ds-card-overview-divider);\n}\n\n:host(.card-overview--stacked) .card-overview__score {\n  display: grid;\n  grid-row: 1;\n  grid-column: 1;\n  grid-template-rows: auto auto;\n  grid-template-columns: auto auto;\n  justify-content: start;\n  column-gap: var(--dimension-space-100);\n  width: auto;\n  padding-block-end: var(--dimension-space-100);\n  padding-inline-end: var(--dimension-space-100);\n  border-inline-end: none;\n}\n\n:host(.card-overview--stacked) .card-overview__score-label-row {\n  grid-row: 1;\n  grid-column: 1 / -1;\n  min-height: var(--ds-control-height);\n}\n\n:host(.card-overview--stacked) .card-overview__score-band,\n:host(.card-overview--stacked) .card-overview__score-figure {\n  grid-row: 2;\n  margin-block-start: 0;\n}\n\n:host(.card-overview--stacked) .card-overview__score-figure {\n  grid-column: 1;\n  align-self: baseline;\n  gap: var(--dimension-space-100);\n}\n\n:host(.card-overview--stacked) .card-overview__score-band {\n  grid-column: 2;\n  align-self: baseline;\n  display: none;\n}\n\n:host(.card-overview--stacked) .card-overview__header {\n  display: grid;\n  grid-row: 1;\n  grid-column: 2;\n  grid-template-rows: auto auto;\n  align-content: start;\n  gap: 0;\n  padding: 0;\n  border-block-end: none;\n}\n\n:host(.card-overview--stacked) .card-overview__filter {\n  grid-row: 1;\n  grid-column: 1;\n  align-self: start;\n  justify-self: end;\n  padding: var(--dimension-space-100) var(--dimension-space-100) 0 0;\n}\n\n:host(.card-overview--stacked) .card-overview__period {\n  grid-row: 2;\n  grid-column: 1;\n  flex-direction: column;\n  align-items: flex-end;\n  justify-self: stretch;\n  gap: 0;\n  min-height: 0;\n  padding-block: var(--dimension-space-150) var(--dimension-space-100);\n  padding-inline: var(--dimension-space-100) var(--dimension-space-200);\n  overflow: visible;\n  text-align: end;\n  white-space: nowrap;\n}\n\n:host(.card-overview--stacked) .card-overview__body {\n  grid-row: 2;\n  grid-column: 1;\n}\n\n:host(.card-overview--stacked) .card-overview__metrics {\n  grid-template-columns: minmax(0, 1fr);\n}\n\n/* ── Compact presentation ───────────────────────────────────────────────── */\n\n/*\n * Matches the shared 48px bar contract: one 32px control row with 8px above\n * and below. The score remains a distinct leading cell, while reporting copy\n * absorbs the available width and the application-owned control never shrinks.\n */\n:host(.card-overview--compact) {\n  height: var(--dimension-size-600);\n  min-height: var(--dimension-size-600);\n}\n\n:host(.card-overview--compact) .card-overview__layout,\n:host(.card-overview--compact) .card-overview__summary {\n  display: flex;\n  width: 100%;\n  height: 100%;\n  min-width: 0;\n}\n\n:host(.card-overview--compact) .card-overview__score {\n  display: flex;\n  flex: 0 0 auto;\n  flex-direction: row;\n  align-items: center;\n  gap: var(--dimension-space-100);\n  width: auto;\n  height: 100%;\n  min-width: 0;\n  padding: var(--dimension-space-100) var(--dimension-space-200);\n  border-inline-end: var(--ds-card-overview-divider);\n  box-sizing: border-box;\n}\n\n:host(.card-overview--compact) .card-overview__score-label-row {\n  display: contents;\n  min-height: 0;\n}\n\n:host(.card-overview--compact) .card-overview__score-label,\n:host(.card-overview--compact) .card-overview__score-figure,\n:host(.card-overview--compact) .card-overview__trend {\n  flex: 0 0 auto;\n}\n\n:host(.card-overview--compact) .card-overview__score-figure {\n  display: flex;\n  align-self: center;\n  align-items: baseline;\n  gap: var(--dimension-space-050);\n  margin-block-start: 0;\n}\n\n:host(.card-overview--compact) .card-overview__score-band {\n  display: none;\n}\n\n:host(.card-overview--compact) .card-overview__header {\n  display: flex;\n  flex: 1 1 auto;\n  grid-row: auto;\n  grid-column: auto;\n  align-items: center;\n  gap: var(--dimension-space-100);\n  height: 100%;\n  min-width: 0;\n  padding: var(--dimension-space-100);\n  border-block-end: none;\n  box-sizing: border-box;\n}\n\n:host(.card-overview--compact) .card-overview__period {\n  display: flex;\n  flex: 1 1 auto;\n  flex-direction: row;\n  align-items: center;\n  gap: var(--dimension-space-050);\n  min-width: 0;\n  min-height: var(--ds-control-height);\n  padding-inline: var(--ds-control-padding-inline);\n  overflow: hidden;\n  text-align: start;\n  white-space: nowrap;\n}\n\n:host(.card-overview--compact) .card-overview__period-current,\n:host(.card-overview--compact) .card-overview__period-comparison {\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n:host(.card-overview--compact) .card-overview__period-current {\n  flex: 0 1 auto;\n}\n\n:host(.card-overview--compact) .card-overview__period-comparison {\n  flex: 1 1 auto;\n}\n\n:host(.card-overview--compact) .card-overview__filter {\n  display: flex;\n  flex: 0 0 auto;\n  align-items: center;\n  padding: 0;\n}\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/wc/components/CardOverview/CardOverview.tsx",
+      "content": "import { Component, Element, Event, EventEmitter, h, Host, Prop, State } from '@stencil/core';\nimport type { TextColor, TextVariant } from '../Text/text-types';\nimport type { MetricTrend } from '../../utils/metric-change';\nimport type {\n  CardOverviewLayout,\n  CardOverviewVariant,\n  OverviewMetric,\n  OverviewScore,\n} 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/** Maximum number of comparable measures the summary bar presents at once. */\nconst MAX_METRIC_COUNT = 6;\n\nconst TREND_COLORS: Record<MetricTrend['tone'], TextColor> = {\n  positive: 'var(--color-always-dark-foreground-positive)',\n  negative: 'var(--color-always-dark-foreground-negative)',\n  neutral: 'var(--color-always-dark-foreground-secondary)',\n};\n\nconst ALWAYS_DARK_PRIMARY: TextColor = 'var(--color-always-dark-foreground-primary)';\nconst ALWAYS_DARK_SECONDARY: TextColor = 'var(--color-always-dark-foreground-secondary)';\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  /** Full summary card, or the condensed 48px summary bar. */\n  @Prop() variant: CardOverviewVariant = 'default';\n\n  /** Intrinsic responsive layout, or a page-owned single-column stack. */\n  @Prop() layout: CardOverviewLayout = 'auto';\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 period`. */\n  @Prop() comparisonLabel: string = '';\n\n  /** Measures rendered in the responsive grid. Only the first six are shown. */\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  private get visibleMetrics(): OverviewMetric[] {\n    return this.metrics.slice(0, MAX_METRIC_COUNT);\n  }\n\n  /** Index of the roving tab stop, skipping inactive metrics. */\n  private get rovingIndex(): number {\n    const first = this.visibleMetrics.findIndex(metric => !metric.isInactive);\n    if (first < 0) return -1;\n    const current = this.visibleMetrics[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 metrics = this.visibleMetrics;\n    const count = 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 (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={TREND_COLORS[trend.tone]}\n        fontFeature=\"tabular-nums\"\n      >\n        {trend.direction === 'up' ? '↑' : '↓'} {trend.value}\n      </ds-text>\n    );\n  }\n\n  private renderScore(compact: boolean) {\n    if (this.isLoading) {\n      if (compact) {\n        return (\n          <div class=\"card-overview__score ds-control--md\" part=\"score\">\n            {this.bar('text-body-medium', '40px', 'card-overview__score-label')}\n            <div class=\"card-overview__score-figure\">\n              {this.bar('text-body-medium', '24px')}\n              {this.bar('text-body-medium', '32px')}\n            </div>\n          </div>\n        );\n      }\n\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(\n            'text-caption',\n            '80px',\n            'card-overview__score-band card-overview__score-band--loading'\n          )}\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 card-overview__score--resolved 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={!compact}\n            color={ALWAYS_DARK_SECONDARY}\n          >\n            {score.label}\n          </ds-text>\n        </div>\n        <div class=\"card-overview__score-figure\">\n          <ds-text\n            as=\"span\"\n            class=\"card-overview__score-value\"\n            variant={compact ? 'text-body-medium' : 'text-display-medium'}\n            emphasis\n            color={ALWAYS_DARK_PRIMARY}\n            fontFeature=\"tabular-nums\"\n          >\n            {score.value}\n          </ds-text>\n          {this.renderTrend(\n            score.trend,\n            compact ? 'text-body-medium' : 'text-body-small',\n            !compact\n          )}\n        </div>\n        {score.band && !compact && (\n          <ds-text\n            as=\"span\"\n            class=\"card-overview__score-band\"\n            variant=\"text-caption\"\n            color={ALWAYS_DARK_SECONDARY}\n          >\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\n        as=\"span\"\n        class=\"card-overview__metric-label\"\n        variant=\"text-body-small\"\n        color={ALWAYS_DARK_SECONDARY}\n      >\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\">\n            {label}\n          </ds-tooltip>\n        ) : (\n          label\n        )}\n        <div class=\"card-overview__metric-figure\">\n          <ds-text\n            as=\"span\"\n            class=\"card-overview__metric-value\"\n            variant=\"text-body-medium\"\n            color={ALWAYS_DARK_PRIMARY}\n            fontFeature=\"tabular-nums\"\n          >\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.visibleMetrics.map((metric, index) => this.renderMetric(metric, index));\n  }\n\n  render() {\n    const hasHeader = Boolean(this.periodLabel || this.comparisonLabel);\n    const compact = this.variant === 'compact';\n\n    return (\n      <Host\n        class={{\n          'card-overview': true,\n          'card-overview--has-score': this.hasScore,\n          'card-overview--compact': compact,\n          'card-overview--stacked': !compact && this.layout === 'stacked',\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': !compact,\n          'ds-control-elevation--floating': compact,\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        <div\n          class={{\n            'card-overview__layout': true,\n            'card-overview__layout--has-score': this.hasScore,\n          }}\n        >\n          <div class=\"card-overview__summary\">\n            {this.hasScore && this.renderScore(compact)}\n\n            {/* `ds-control--md` supplies the 32px height and the label inset below. */}\n            <div\n              class={{\n                'card-overview__header': true,\n                'card-overview__header--has-score': this.hasScore,\n                'ds-control--md': true,\n              }}\n            >\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              ) : (\n                hasHeader && (\n                  <div class=\"card-overview__period ds-control-label-box\">\n                    {this.periodLabel && (\n                      <ds-text\n                        as=\"span\"\n                        class=\"card-overview__period-current ds-control-label-box\"\n                        variant=\"text-body-medium\"\n                        emphasis\n                        color={ALWAYS_DARK_PRIMARY}\n                      >\n                        {this.periodLabel}\n                      </ds-text>\n                    )}\n                    {this.comparisonLabel && (\n                      <ds-text\n                        as=\"span\"\n                        class=\"card-overview__period-comparison ds-control-label-box\"\n                        variant=\"text-body-medium\"\n                        color={ALWAYS_DARK_SECONDARY}\n                      >\n                        {this.comparisonLabel}\n                      </ds-text>\n                    )}\n                  </div>\n                )\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\n                    variant=\"control\"\n                    controlSize=\"md\"\n                    width=\"128px\"\n                    background=\"always-dark\"\n                  />\n                ) : (\n                  <slot name=\"filter\" />\n                )}\n              </div>\n            </div>\n          </div>\n\n          {!compact && (\n            <div\n              class={{\n                'card-overview__body': true,\n                'card-overview__body--has-score': this.hasScore,\n              }}\n            >\n              <div class=\"card-overview__metrics\" part=\"metrics\">\n                {this.renderMetrics()}\n              </div>\n\n              <slot name=\"footer\" />\n            </div>\n          )}\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\nexport type CardOverviewVariant = 'default' | 'compact';\nexport type CardOverviewLayout = 'auto' | 'stacked';\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."

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."

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

@@ -61,8 +61,9 @@
         "Negative values are unsupported and render as zero; the owning product supplies loading, empty, and error states."
       ],
       "responsiveBehavior": [
-        "The SVG preserves its authored aspect ratio while shrinking to fit a narrower parent.",
-        "The parent supplies dimensions and chooses how many time buckets remain legible at each width.",
+        "Width and height provide the standalone intrinsic viewport; constrained card regions are measured and reflow both axes to their rendered pixel dimensions.",
+        "Responsive layout changes stack positions and plot extents without scaling SVG text, strokes, separators, corner radii, or margins.",
+        "The parent chooses how many time buckets remain legible at each width.",
         "Pre-format category labels and reduce bucket count before rendering when horizontal space becomes constrained."
       ],
       "frameworkCaveats": {
@@ -99,7 +100,8 @@
           "attribute": "height",
           "default": "240",
           "required": false,
-          "mutable": false
+          "mutable": false,
+          "description": "Standalone intrinsic height. Container constraints reflow the plot at rendered pixel size."
         },
         "series": {
           "type": "ChartSeries[]",
@@ -123,7 +125,8 @@
           "attribute": "width",
           "default": "480",
           "required": false,
-          "mutable": false
+          "mutable": false,
+          "description": "Standalone intrinsic width. Container constraints reflow the plot at rendered pixel size."
         }
       },
       "events": [],
@@ -145,7 +148,8 @@
         "attribute": "height",
         "default": "240",
         "required": false,
-        "mutable": false
+        "mutable": false,
+        "description": "Standalone intrinsic height. Container constraints reflow the plot at rendered pixel size."
       },
       "series": {
         "type": "ChartSeries[]",
@@ -169,7 +173,8 @@
         "attribute": "width",
         "default": "480",
         "required": false,
-        "mutable": false
+        "mutable": false,
+        "description": "Standalone intrinsic width. Container constraints reflow the plot at rendered pixel size."
       }
     },
     "events": [],
@@ -198,7 +203,7 @@
       "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: categories, series.",
       "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."
@@ -213,12 +218,12 @@
   "files": [
     {
       "path": "src/wc/components/ChartBarStacked/ChartBarStacked.css",
-      "content": ":host {\n  display: inline-flex;\n  max-width: 100%;\n  font-family: var(--typography-font-family);\n}\n\n.chart-bar-stacked__svg {\n  display: block;\n  max-width: 100%;\n  height: auto;\n}\n\n.chart-bar-stacked__gridline {\n  stroke: var(--color-border-tertiary);\n  stroke-width: 1;\n}\n\n/* Matches ds-text text-caption regular (SVG cannot host ds-text). */\n.chart-bar-stacked__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-stacked__segment-shape--rounded {\n  rx: var(--dimension-radius-025);\n}\n\n.chart-bar-stacked__segment-separator {\n  stroke: var(--color-background-primary);\n  stroke-width: var(--dimension-stroke-width-012);\n  stroke-linecap: butt;\n}\n",
+      "content": ":host {\n  display: inline-flex;\n  max-width: 100%;\n  font-family: var(--typography-font-family);\n}\n\n.chart-bar-stacked__svg {\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n\n.chart-bar-stacked__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-stacked__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-stacked__segment-shape--rounded {\n  rx: var(--dimension-radius-025);\n}\n\n.chart-bar-stacked__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",
       "type": "registry:ui"
     },
     {
       "path": "src/wc/components/ChartBarStacked/ChartBarStacked.tsx",
-      "content": "import { Component, Prop, h, Host } from '@stencil/core';\nimport { scaleBand, scaleLinear } from 'd3-scale';\nimport { categoryColor } from '../../utils/chart-colors';\nimport { formatPercentage } from '../../utils';\nimport type { ChartSeries } from '../../utils/chart-types';\n\nexport type ChartBarStackedVariant = 'stacked' | 'percentage';\n\nconst MARGIN = { top: 16, right: 16, bottom: 24, left: 32 };\nconst PERCENTAGE_TICKS = [0, 25, 50, 75, 100];\n\n@Component({\n  tag: 'ds-chart-bar-stacked',\n  styleUrl: 'ChartBarStacked.css',\n  scoped: true,\n})\nexport class ChartBarStacked {\n  /** Ordered stack series. Set as a JS property (not an HTML attribute). */\n  @Prop() series: ChartSeries[] = [];\n  /** X-axis labels — must match each series' `data` length. Set as a JS property. */\n  @Prop() categories: string[] = [];\n  @Prop() variant: ChartBarStackedVariant = 'stacked';\n  @Prop() width: number = 480;\n  @Prop() height: number = 240;\n\n  private valuesForCategory(categoryIndex: number) {\n    return this.series.map(series => Math.max(0, series.data[categoryIndex] ?? 0));\n  }\n\n  private accessibleLabel() {\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 = 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  render() {\n    const innerWidth = this.width - MARGIN.left - MARGIN.right;\n    const innerHeight = this.height - MARGIN.top - MARGIN.bottom;\n    const categoryValues = this.categories.map((_, index) => this.valuesForCategory(index));\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\n    const xScale = scaleBand()\n      .domain(this.categories)\n      .range([0, innerWidth])\n      .padding(0.35);\n\n    const yScale = scaleLinear()\n      .domain([0, yMax || 1])\n      .range([innerHeight, 0])\n      .nice();\n\n    const yTicks = this.variant === 'percentage' ? PERCENTAGE_TICKS : yScale.ticks(4);\n\n    return (\n      <Host class=\"chart-bar-stacked\">\n        <svg\n          class=\"chart-bar-stacked__svg\"\n          viewBox={`0 0 ${this.width} ${this.height}`}\n          width={this.width}\n          height={this.height}\n          role=\"img\"\n          aria-label={this.accessibleLabel()}\n        >\n          <g transform={`translate(${MARGIN.left}, ${MARGIN.top})`}>\n            {yTicks.map(tick => (\n              <g key={`grid-${tick}`} transform={`translate(0, ${yScale(tick)})`}>\n                <line class=\"chart-bar-stacked__gridline\" x1={0} x2={innerWidth} />\n                <text\n                  class=\"chart-bar-stacked__axis-label\"\n                  x={-8}\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) => (value > 0 ? seriesIndex : topIndex),\n                -1\n              );\n              let cumulativeValue = 0;\n\n              return (\n                <g class=\"chart-bar-stacked__stack\" data-category={category} key={category}>\n                  {this.series.map((series, seriesIndex) => {\n                    const rawValue = values[seriesIndex];\n                    const value = 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\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 isTopSegment = seriesIndex === topSeriesIndex;\n                    const hasRoundedTop =\n                      this.variant === 'stacked' && isTopSegment;\n                    const squareBaseY = segmentY + segmentHeight / 2;\n                    const squareBaseHeight = segmentHeight / 2;\n\n                    return (\n                      <g\n                        class=\"chart-bar-stacked__segment\"\n                        data-series={series.name}\n                        key={series.name}\n                      >\n                        <rect\n                          class={{\n                            'chart-bar-stacked__segment-shape': true,\n                            'chart-bar-stacked__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-stacked__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-stacked__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-stacked__axis-label\"\n                    x={barX + barWidth / 2}\n                    y={innerHeight + 16}\n                    text-anchor=\"middle\"\n                  >\n                    {category}\n                  </text>\n                </g>\n              );\n            })}\n          </g>\n        </svg>\n      </Host>\n    );\n  }\n}\n",
+      "content": "import { Component, Prop, State, Watch, h, Host } from '@stencil/core';\nimport { scaleBand, scaleLinear } from 'd3-scale';\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 { ChartSeries } from '../../utils/chart-types';\n\nexport type ChartBarStackedVariant = 'stacked' | 'percentage';\n\nconst PERCENTAGE_TICKS = [0, 25, 50, 75, 100];\n\n@Component({\n  tag: 'ds-chart-bar-stacked',\n  styleUrl: 'ChartBarStacked.css',\n  scoped: true,\n})\nexport class ChartBarStacked {\n  /** Ordered stack series. Set as a JS property (not an HTML attribute). */\n  @Prop() series: ChartSeries[] = [];\n  /** X-axis labels — must match each series' `data` length. Set as a JS property. */\n  @Prop() categories: string[] = [];\n  @Prop() variant: ChartBarStackedVariant = 'stacked';\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 valuesForCategory(categoryIndex: number) {\n    return this.series.map(series => Math.max(0, series.data[categoryIndex] ?? 0));\n  }\n\n  private accessibleLabel() {\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 = 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  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 categoryValues = this.categories.map((_, index) => this.valuesForCategory(index));\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\n    const xScale = scaleBand()\n      .domain(this.categories)\n      .range([0, innerWidth])\n      .padding(0.35);\n\n    const yScale = scaleLinear()\n      .domain([0, yMax || 1])\n      .range([innerHeight, 0])\n      .nice();\n\n    const yTicks = this.variant === 'percentage' ? PERCENTAGE_TICKS : yScale.ticks(4);\n\n    return (\n      <Host class=\"chart-bar-stacked\">\n        <svg\n          class=\"chart-bar-stacked__svg\"\n          ref={element => {\n            this.svgEl = element ?? null;\n          }}\n          width={viewportWidth}\n          height={viewportHeight}\n          role=\"img\"\n          aria-label={this.accessibleLabel()}\n        >\n          <g transform={`translate(${margin.left}, ${margin.top})`}>\n            {yTicks.map(tick => (\n              <g key={`grid-${tick}`} transform={`translate(0, ${yScale(tick)})`}>\n                <line class=\"chart-bar-stacked__gridline\" x1={0} x2={innerWidth} />\n                <text\n                  class=\"chart-bar-stacked__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) => (value > 0 ? seriesIndex : topIndex),\n                -1\n              );\n              let cumulativeValue = 0;\n\n              return (\n                <g class=\"chart-bar-stacked__stack\" data-category={category} key={category}>\n                  {this.series.map((series, seriesIndex) => {\n                    const rawValue = values[seriesIndex];\n                    const value = 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\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 isTopSegment = seriesIndex === topSeriesIndex;\n                    const hasRoundedTop =\n                      this.variant === 'stacked' && isTopSegment;\n                    const squareBaseY = segmentY + segmentHeight / 2;\n                    const squareBaseHeight = segmentHeight / 2;\n\n                    return (\n                      <g\n                        class=\"chart-bar-stacked__segment\"\n                        data-series={series.name}\n                        key={series.name}\n                      >\n                        <rect\n                          class={{\n                            'chart-bar-stacked__segment-shape': true,\n                            'chart-bar-stacked__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-stacked__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-stacked__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-stacked__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        </svg>\n      </Host>\n    );\n  }\n}\n",
       "type": "registry:ui"
     }
   ]