@ds-mo/ui 12.7.0 → 12.8.0

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

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"
     }
   ]

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

@@ -60,7 +60,8 @@
         "Authored datum colors override the shared categorical palette."
       ],
       "responsiveBehavior": [
-        "The owner supplies dimensions and updates them with its layout; the chart does not measure its container.",
+        "Width and height provide the standalone intrinsic viewport; container constraints are measured and reflow the plot across the available pixels.",
+        "Responsive layout changes bar positions and plot extents without scaling SVG text, strokes, corner radii, or margins.",
         "Limit or pre-format long category labels so they remain legible at the chosen width.",
         "Time labels remain ordered, pre-formatted buckets with equal spacing rather than raw continuous timestamps."
       ],
@@ -69,10 +70,10 @@
           "Assign data as a JavaScript property; arrays are not supported as HTML attributes."
         ],
         "react": [
-          "Pass a stable data array and dimensions derived from the containing layout."
+          "Pass a stable data array; width and height provide standalone intrinsic dimensions while constrained containers reflow automatically."
         ],
         "angular": [
-          "Bind data as a property and update dimensions from the containing layout."
+          "Bind data as a property; width and height provide standalone intrinsic dimensions while constrained containers reflow automatically."
         ]
       },
       "references": [
@@ -98,7 +99,8 @@
           "attribute": "height",
           "default": "240",
           "required": false,
-          "mutable": false
+          "mutable": false,
+          "description": "Standalone intrinsic height. Container constraints reflow the plot at rendered pixel size."
         },
         "width": {
           "type": "number",
@@ -106,7 +108,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": [],
@@ -128,7 +131,8 @@
         "attribute": "height",
         "default": "240",
         "required": false,
-        "mutable": false
+        "mutable": false,
+        "description": "Standalone intrinsic height. Container constraints reflow the plot at rendered pixel size."
       },
       "width": {
         "type": "number",
@@ -136,7 +140,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": [],
@@ -165,7 +170,7 @@
       "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: data.",
       "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."
@@ -180,12 +185,12 @@
   "files": [
     {
       "path": "src/wc/components/ChartBar/ChartBar.css",
-      "content": ":host {\n  display: inline-flex;\n  font-family: var(--typography-font-family);\n}\n\n.chart-bar__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__axis-label {\n  fill: var(--color-foreground-secondary);\n  font-family: var(--typography-font-family);\n  font-size: var(--typography-fontsize-xs);\n  font-weight: var(--typography-weight-medium);\n  letter-spacing: var(--typography-letterspacing-positive);\n  text-transform: uppercase;\n}\n\n.chart-bar__bar--rounded {\n  rx: var(--dimension-radius-025);\n}\n",
+      "content": ":host {\n  display: inline-block;\n  max-width: 100%;\n  font-family: var(--typography-font-family);\n}\n\n.chart-bar__svg {\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n\n.chart-bar__gridline {\n  stroke: var(--color-border-tertiary);\n  stroke-width: var(--dimension-stroke-width-012);\n  vector-effect: non-scaling-stroke;\n}\n\n/* Matches ds-text text-caption regular (SVG cannot host ds-text). */\n.chart-bar__axis-label {\n  fill: var(--color-foreground-secondary);\n  font-family: var(--typography-font-family);\n  font-size: var(--typography-fontsize-xs);\n  font-weight: var(--typography-weight-medium);\n  letter-spacing: var(--typography-letterspacing-positive);\n  text-transform: uppercase;\n}\n\n.chart-bar__bar--rounded {\n  rx: var(--dimension-radius-025);\n}\n",
       "type": "registry:ui"
     },
     {
       "path": "src/wc/components/ChartBar/ChartBar.tsx",
-      "content": "import { Component, Prop, h, Host } from '@stencil/core';\nimport { scaleBand, scaleLinear } from 'd3-scale';\nimport { max } from 'd3-array';\nimport { categoryColor } from '../../utils/chart-colors';\nimport type { ChartDatum } from '../../utils/chart-types';\n\nconst MARGIN = { top: 16, right: 16, bottom: 24, left: 32 };\n\n@Component({\n  tag: 'ds-chart-bar',\n  styleUrl: 'ChartBar.css',\n  scoped: true,\n})\nexport class ChartBar {\n  /** Bars to render. Set as a JS property (not an HTML attribute). */\n  @Prop() data: ChartDatum[] = [];\n  @Prop() width: number = 480;\n  @Prop() height: number = 240;\n\n  render() {\n    const innerWidth = this.width - MARGIN.left - MARGIN.right;\n    const innerHeight = this.height - MARGIN.top - MARGIN.bottom;\n\n    const yMax = max(this.data, d => d.value) ?? 0;\n\n    const xScale = scaleBand()\n      .domain(this.data.map(d => d.label))\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 = yScale.ticks(4);\n\n    return (\n      <Host class=\"chart-bar\">\n        <svg\n          class=\"chart-bar__svg\"\n          viewBox={`0 0 ${this.width} ${this.height}`}\n          width={this.width}\n          height={this.height}\n          role=\"img\"\n          aria-label={this.data.map(d => `${d.label}: ${d.value}`).join(', ')}\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__gridline\" x1={0} x2={innerWidth} />\n                <text class=\"chart-bar__axis-label\" x={-8} text-anchor=\"end\" dominant-baseline=\"middle\">\n                  {tick}\n                </text>\n              </g>\n            ))}\n\n            {this.data.map((d, i) => {\n              const barWidth = xScale.bandwidth();\n              const barX = xScale(d.label) ?? 0;\n              const barY = yScale(d.value);\n              const barHeight = innerHeight - barY;\n              const squareBaseY = barY + barHeight / 2;\n              const squareBaseHeight = barHeight / 2;\n              const fill = d.color ?? categoryColor(i);\n              return (\n                <g key={d.label}>\n                  <rect\n                    class=\"chart-bar__bar chart-bar__bar--rounded\"\n                    x={barX}\n                    y={barY}\n                    width={barWidth}\n                    height={barHeight}\n                    fill={fill}\n                  />\n                  <rect\n                    class=\"chart-bar__bar chart-bar__bar--square-base\"\n                    x={barX}\n                    y={squareBaseY}\n                    width={barWidth}\n                    height={squareBaseHeight}\n                    fill={fill}\n                  />\n                  <text\n                    class=\"chart-bar__axis-label\"\n                    x={barX + barWidth / 2}\n                    y={innerHeight + 16}\n                    text-anchor=\"middle\"\n                  >\n                    {d.label}\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 { max } from 'd3-array';\nimport { categoryColor } from '../../utils/chart-colors';\nimport { resolveCartesianChartLayout } from '../../utils/cartesian-chart-layout';\nimport {\n  ChartViewportController,\n  type ChartViewportSize,\n} from '../../utils/chart-viewport-controller';\nimport type { ChartDatum } from '../../utils/chart-types';\n\n@Component({\n  tag: 'ds-chart-bar',\n  styleUrl: 'ChartBar.css',\n  scoped: true,\n})\nexport class ChartBar {\n  /** Bars to render. Set as a JS property (not an HTML attribute). */\n  @Prop() data: ChartDatum[] = [];\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  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\n    const yMax = max(this.data, d => d.value) ?? 0;\n\n    const xScale = scaleBand()\n      .domain(this.data.map(d => d.label))\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 = yScale.ticks(4);\n\n    return (\n      <Host class=\"chart-bar\">\n        <svg\n          class=\"chart-bar__svg\"\n          ref={element => {\n            this.svgEl = element ?? null;\n          }}\n          width={viewportWidth}\n          height={viewportHeight}\n          role=\"img\"\n          aria-label={this.data.map(d => `${d.label}: ${d.value}`).join(', ')}\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__gridline\" x1={0} x2={innerWidth} />\n                <text\n                  class=\"chart-bar__axis-label\"\n                  x={-axisLabelGap}\n                  text-anchor=\"end\"\n                  dominant-baseline=\"middle\"\n                >\n                  {tick}\n                </text>\n              </g>\n            ))}\n\n            {this.data.map((d, i) => {\n              const barWidth = xScale.bandwidth();\n              const barX = xScale(d.label) ?? 0;\n              const barY = yScale(d.value);\n              const barHeight = innerHeight - barY;\n              const squareBaseY = barY + barHeight / 2;\n              const squareBaseHeight = barHeight / 2;\n              const fill = d.color ?? categoryColor(i);\n              return (\n                <g key={d.label}>\n                  <rect\n                    class=\"chart-bar__bar chart-bar__bar--rounded\"\n                    x={barX}\n                    y={barY}\n                    width={barWidth}\n                    height={barHeight}\n                    fill={fill}\n                  />\n                  <rect\n                    class=\"chart-bar__bar chart-bar__bar--square-base\"\n                    x={barX}\n                    y={squareBaseY}\n                    width={barWidth}\n                    height={squareBaseHeight}\n                    fill={fill}\n                  />\n                  <text\n                    class=\"chart-bar__axis-label\"\n                    x={barX + barWidth / 2}\n                    y={innerHeight + categoryLabelOffset}\n                    text-anchor=\"middle\"\n                  >\n                    {d.label}\n                  </text>\n                </g>\n              );\n            })}\n          </g>\n        </svg>\n      </Host>\n    );\n  }\n}\n",
       "type": "registry:ui"
     }
   ]