@ds-mo/ui 13.3.0 → 13.4.0

package/dist/docs/components.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2026-07-31T03:23:14",
+  "timestamp": "2026-07-31T05:26:45",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.43.5",
@@ -200,6 +200,47 @@
           "getter": false,
           "setter": false
         },
+        {
+          "name": "metadataVisibility",
+          "type": "\"always\" | \"hover\"",
+          "complexType": {
+            "original": "MessageMetadataVisibility",
+            "resolved": "\"always\" | \"hover\"",
+            "references": {
+              "MessageMetadataVisibility": {
+                "location": "import",
+                "path": "../conversation-types",
+                "id": "src/wc/components/conversation-types.ts::MessageMetadataVisibility",
+                "referenceLocation": "MessageMetadataVisibility"
+              }
+            }
+          },
+          "mutable": false,
+          "attr": "metadata-visibility",
+          "reflectToAttr": false,
+          "docs": "Controls whether the complete message metadata footer is persistent or revealed through hover/focus.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "'always'"
+            }
+          ],
+          "default": "'always'",
+          "values": [
+            {
+              "value": "always",
+              "type": "string"
+            },
+            {
+              "value": "hover",
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
         {
           "name": "parts",
           "type": "AgentResponsePart[]",
@@ -4585,6 +4626,7 @@
         "ds-card-setting",
         "ds-code-block",
         "ds-input",
+        "ds-message-actions",
         "ds-message-composer",
         "ds-message-scroller",
         "ds-mobile-sheet-nav",
@@ -4635,6 +4677,9 @@
         "ds-input": [
           "ds-button-unfilled"
         ],
+        "ds-message-actions": [
+          "ds-button-unfilled"
+        ],
         "ds-message-composer": [
           "ds-button-unfilled"
         ],
@@ -11051,6 +11096,47 @@
           "getter": false,
           "setter": false
         },
+        {
+          "name": "metadataVisibility",
+          "type": "\"always\" | \"hover\"",
+          "complexType": {
+            "original": "MessageMetadataVisibility",
+            "resolved": "\"always\" | \"hover\"",
+            "references": {
+              "MessageMetadataVisibility": {
+                "location": "import",
+                "path": "../conversation-types",
+                "id": "src/wc/components/conversation-types.ts::MessageMetadataVisibility",
+                "referenceLocation": "MessageMetadataVisibility"
+              }
+            }
+          },
+          "mutable": false,
+          "attr": "metadata-visibility",
+          "reflectToAttr": false,
+          "docs": "Controls whether the complete metadata footer is persistent or revealed through hover/focus.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "'always'"
+            }
+          ],
+          "default": "'always'",
+          "values": [
+            {
+              "value": "always",
+              "type": "string"
+            },
+            {
+              "value": "hover",
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
         {
           "name": "scrollAnchor",
           "type": "boolean",
@@ -11190,6 +11276,182 @@
         ]
       }
     },
+    {
+      "filePath": "src/wc/components/MessageActions/MessageActions.tsx",
+      "encapsulation": "scoped",
+      "tag": "ds-message-actions",
+      "docs": "",
+      "docsTags": [],
+      "usage": {},
+      "props": [
+        {
+          "name": "copyText",
+          "type": "string | undefined",
+          "complexType": {
+            "original": "string | undefined",
+            "resolved": "string | undefined",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "copy-text",
+          "reflectToAttr": false,
+          "docs": "",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            },
+            {
+              "type": "undefined"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "feedback",
+          "type": "\"negative\" | \"positive\" | undefined",
+          "complexType": {
+            "original": "MessageFeedback | undefined",
+            "resolved": "\"negative\" | \"positive\" | undefined",
+            "references": {
+              "MessageFeedback": {
+                "location": "import",
+                "path": "../conversation-types",
+                "id": "src/wc/components/conversation-types.ts::MessageFeedback",
+                "referenceLocation": "MessageFeedback"
+              }
+            }
+          },
+          "mutable": false,
+          "attr": "feedback",
+          "reflectToAttr": false,
+          "docs": "",
+          "docsTags": [],
+          "values": [
+            {
+              "value": "negative",
+              "type": "string"
+            },
+            {
+              "value": "positive",
+              "type": "string"
+            },
+            {
+              "type": "undefined"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "feedbackEnabled",
+          "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "feedback-enabled",
+          "reflectToAttr": false,
+          "docs": "",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "false"
+            }
+          ],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        }
+      ],
+      "methods": [],
+      "events": [
+        {
+          "event": "dsCopyResult",
+          "detail": "MessageCopyResultEventDetail",
+          "bubbles": true,
+          "complexType": {
+            "original": "MessageCopyResultEventDetail",
+            "resolved": "MessageCopyResultEventDetail",
+            "references": {
+              "MessageCopyResultEventDetail": {
+                "location": "import",
+                "path": "../conversation-types",
+                "id": "src/wc/components/conversation-types.ts::MessageCopyResultEventDetail",
+                "referenceLocation": "MessageCopyResultEventDetail"
+              }
+            }
+          },
+          "cancelable": true,
+          "composed": true,
+          "docs": "",
+          "docsTags": []
+        },
+        {
+          "event": "dsFeedbackChange",
+          "detail": "\"negative\" | \"positive\" | undefined",
+          "bubbles": true,
+          "complexType": {
+            "original": "MessageFeedback | undefined",
+            "resolved": "\"negative\" | \"positive\" | undefined",
+            "references": {
+              "MessageFeedback": {
+                "location": "import",
+                "path": "../conversation-types",
+                "id": "src/wc/components/conversation-types.ts::MessageFeedback",
+                "referenceLocation": "MessageFeedback"
+              }
+            }
+          },
+          "cancelable": true,
+          "composed": true,
+          "docs": "",
+          "docsTags": []
+        }
+      ],
+      "listeners": [],
+      "styles": [],
+      "slots": [],
+      "parts": [],
+      "states": [],
+      "dependents": [],
+      "dependencies": [
+        "ds-tooltip",
+        "ds-button-unfilled"
+      ],
+      "dependencyGraph": {
+        "ds-message-actions": [
+          "ds-tooltip",
+          "ds-button-unfilled"
+        ],
+        "ds-tooltip": [
+          "ds-text"
+        ],
+        "ds-button-unfilled": [
+          "ds-loader",
+          "ds-icon",
+          "ds-badge",
+          "ds-text"
+        ],
+        "ds-badge": [
+          "ds-text"
+        ]
+      }
+    },
     {
       "filePath": "src/wc/components/MessageBubble/MessageBubble.tsx",
       "encapsulation": "scoped",
@@ -23383,6 +23645,7 @@
         "ds-bar-workflow",
         "ds-card-overview",
         "ds-code-block",
+        "ds-message-actions",
         "ds-message-composer",
         "ds-message-scroller",
         "ds-mobile-sheet-nav",
@@ -23414,6 +23677,9 @@
         "ds-code-block": [
           "ds-tooltip"
         ],
+        "ds-message-actions": [
+          "ds-tooltip"
+        ],
         "ds-message-composer": [
           "ds-tooltip"
         ],
@@ -24123,6 +24389,11 @@
       "docstring": "",
       "path": "src/wc/components/conversation-types.ts"
     },
+    "src/wc/components/conversation-types.ts::MessageMetadataVisibility": {
+      "declaration": "export type MessageMetadataVisibility = 'always' | 'hover';",
+      "docstring": "",
+      "path": "src/wc/components/conversation-types.ts"
+    },
     "src/wc/components/conversation-types.ts::AgentSource": {
       "declaration": "export interface AgentSource {\n  id: string;\n  title: string;\n  url: string;\n  description?: string;\n}",
       "docstring": "",
@@ -24233,6 +24504,16 @@
       "docstring": "",
       "path": "src/wc/components/conversation-types.ts"
     },
+    "src/wc/components/conversation-types.ts::MessageFeedback": {
+      "declaration": "export type MessageFeedback = 'positive' | 'negative';",
+      "docstring": "",
+      "path": "src/wc/components/conversation-types.ts"
+    },
+    "src/wc/components/conversation-types.ts::MessageCopyResultEventDetail": {
+      "declaration": "export interface MessageCopyResultEventDetail {\n  status: 'success' | 'error';\n}",
+      "docstring": "",
+      "path": "src/wc/components/conversation-types.ts"
+    },
     "src/wc/components/conversation-types.ts::MessageComposerStatus": {
       "declaration": "export type MessageComposerStatus = 'ready' | 'submitted' | 'streaming' | 'error';",
       "docstring": "",

package/dist/mcp-data/registry/agent-response.json

@@ -22,6 +22,7 @@
       ],
       "commonlyComposedWith": [
         "component:ds-message",
+        "component:ds-message-actions",
         "component:ds-markdown",
         "component:ds-agent-activity",
         "component:ds-agent-tool-call",
@@ -32,12 +33,14 @@
       ],
       "accessibility": [
         "Part order matches authored reading order and remains inside generic message semantics.",
-        "Streaming state supplements rather than replaces meaningful textual status."
+        "Streaming state supplements rather than replaces meaningful textual status.",
+        "Forwarded metadata actions retain Message ordering, keyboard reveal, and touch visibility."
       ],
       "states": [
         "The owner replaces immutable part arrays as scripted or live output changes.",
         "AgentResponse renders directly in Message without borrowing a plain MessageBubble surface.",
-        "Markdown parts use the optional safe renderer; prose CSS owns only semantic-tree styling and never response ordering or streaming state."
+        "Markdown parts use the optional safe renderer; prose CSS owns only semantic-tree styling and never response ordering or streaming state.",
+        "The application may compose MessageActions for completed-response Copy and controlled feedback while retaining persistent retry or recovery controls in the separate actions slot."
       ],
       "responsiveBehavior": [
         "Rich content uses the available transcript width while respecting readable measure and local overflow constraints."
@@ -71,6 +74,15 @@
           "required": false,
           "mutable": false
         },
+        "metadataVisibility": {
+          "type": "MessageMetadataVisibility",
+          "resolvedType": "\"always\" | \"hover\"",
+          "attribute": "metadata-visibility",
+          "default": "'always'",
+          "required": false,
+          "mutable": false,
+          "description": "Controls whether the complete message metadata footer is persistent or revealed through hover/focus."
+        },
         "parts": {
           "type": "AgentResponsePart[]",
           "resolvedType": "AgentResponsePart[]",
@@ -124,6 +136,15 @@
         "required": false,
         "mutable": false
       },
+      "metadataVisibility": {
+        "type": "MessageMetadataVisibility",
+        "resolvedType": "\"always\" | \"hover\"",
+        "attribute": "metadata-visibility",
+        "default": "'always'",
+        "required": false,
+        "mutable": false,
+        "description": "Controls whether the complete message metadata footer is persistent or revealed through hover/focus."
+      },
       "parts": {
         "type": "AgentResponsePart[]",
         "resolvedType": "AgentResponsePart[]",
@@ -209,7 +230,7 @@
     },
     {
       "path": "src/wc/components/AgentResponse/AgentResponse.tsx",
-      "content": "import { Component, Prop, h, Host } from '@stencil/core';\nimport type { AgentResponsePart } from '../conversation-types';\n\n@Component({ tag: 'ds-agent-response', styleUrl: 'AgentResponse.css', scoped: true })\nexport class AgentResponse {\n  @Prop() messageId: string = '';\n  @Prop() author: string = '';\n  @Prop() showAuthor: boolean = true;\n  @Prop() timestamp: string = '';\n  @Prop() parts: AgentResponsePart[] = [];\n  @Prop() streaming: boolean = false;\n\n  private renderPart(part: AgentResponsePart) {\n    switch (part.type) {\n      case 'markdown':\n        return (\n          <ds-markdown\n            key={part.id}\n            content={part.content}\n            streaming={part.state === 'streaming'}\n          />\n        );\n      case 'activity':\n        return <ds-agent-activity key={part.id} items={part.items} />;\n      case 'tool':\n        return (\n          <ds-agent-tool-call\n            key={part.id}\n            name={part.name}\n            label={part.label}\n            state={part.state}\n            input={part.input}\n            output={part.output}\n            error={part.error}\n          />\n        );\n      case 'attachments':\n        return <ds-attachment-list key={part.id} items={part.items} />;\n      case 'sources':\n        return <ds-agent-source-list key={part.id} items={part.items} />;\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <ds-message\n          messageId={this.messageId}\n          direction=\"incoming\"\n          author={this.author}\n          showAuthor={this.showAuthor}\n          timestamp={this.timestamp}\n          streaming={this.streaming}\n        >\n          <div class=\"agent-response\">{this.parts.map(part => this.renderPart(part))}</div>\n          <slot name=\"footer\" slot=\"footer\" />\n          <slot name=\"actions\" slot=\"actions\" />\n        </ds-message>\n      </Host>\n    );\n  }\n}\n",
+      "content": "import { Component, Prop, h, Host } from '@stencil/core';\nimport type {\n  AgentResponsePart,\n  MessageMetadataVisibility,\n} from '../conversation-types';\n\n@Component({ tag: 'ds-agent-response', styleUrl: 'AgentResponse.css', scoped: true })\nexport class AgentResponse {\n  @Prop() messageId: string = '';\n  @Prop() author: string = '';\n  @Prop() showAuthor: boolean = true;\n  @Prop() timestamp: string = '';\n  @Prop() parts: AgentResponsePart[] = [];\n  @Prop() streaming: boolean = false;\n  /** Controls whether the complete message metadata footer is persistent or revealed through hover/focus. */\n  @Prop() metadataVisibility: MessageMetadataVisibility = 'always';\n\n  private renderPart(part: AgentResponsePart) {\n    switch (part.type) {\n      case 'markdown':\n        return (\n          <ds-markdown\n            key={part.id}\n            content={part.content}\n            streaming={part.state === 'streaming'}\n          />\n        );\n      case 'activity':\n        return <ds-agent-activity key={part.id} items={part.items} />;\n      case 'tool':\n        return (\n          <ds-agent-tool-call\n            key={part.id}\n            name={part.name}\n            label={part.label}\n            state={part.state}\n            input={part.input}\n            output={part.output}\n            error={part.error}\n          />\n        );\n      case 'attachments':\n        return <ds-attachment-list key={part.id} items={part.items} />;\n      case 'sources':\n        return <ds-agent-source-list key={part.id} items={part.items} />;\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <ds-message\n          messageId={this.messageId}\n          direction=\"incoming\"\n          author={this.author}\n          showAuthor={this.showAuthor}\n          timestamp={this.timestamp}\n          streaming={this.streaming}\n          metadataVisibility={this.metadataVisibility}\n        >\n          <div class=\"agent-response\">{this.parts.map(part => this.renderPart(part))}</div>\n          <slot name=\"footer\" slot=\"footer\" />\n          <slot name=\"metadata-actions\" slot=\"metadata-actions\" />\n          <slot name=\"actions\" slot=\"actions\" />\n        </ds-message>\n      </Host>\n    );\n  }\n}\n",
       "type": "registry:ui"
     }
   ]

package/dist/mcp-data/registry/avatar.json

@@ -12,7 +12,7 @@
     "intentStatus": "complete",
     "intent": {
       "audience": "general",
-      "status": "experimental",
+      "status": "stable",
       "summary": "Compact icon avatar for visually identifying a person, group, channel, or conversation type.",
       "useWhen": [
         "A list or message composition needs a consistent circular identity marker represented by an icon at md, sm, or xs control density."

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

@@ -366,12 +366,12 @@
   "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/* The summary bar follows the theme-reactive inverted sub-theme. */\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-inverted-border-tertiary);\n  --ds-card-overview-divider: var(--ds-card-overview-divider-width) solid\n    var(--ds-card-overview-divider-color);\n  color: var(--color-inverted-foreground-primary);\n}\n\n.card-overview__surface {\n  width: 100%;\n  min-width: 0;\n  box-sizing: border-box;\n  border-radius: var(--dimension-radius-050);\n  background: var(--color-inverted-background);\n  color: var(--color-inverted-foreground-primary);\n  overflow-anchor: none;\n}\n\n/*\n * The visual surface owns elevation outside this clipping viewport. Keeping\n * those layers separate lets a page shrink the surface while content moves and\n * clips inside it without cutting off the shadow or inset highlight.\n */\n.card-overview__clip {\n  height: 100%;\n  min-width: 0;\n  border-radius: inherit;\n  background: inherit;\n  overflow: hidden;\n}\n\n:host(.card-overview--scroll-collapsing) {\n  height: var(--ds-card-overview-expanded-height);\n  pointer-events: none;\n}\n\n:host(.card-overview--scroll-collapsing) .card-overview__surface {\n  height: var(--ds-card-overview-visible-height);\n  pointer-events: auto;\n  will-change: height;\n}\n\n:host(.card-overview--scroll-collapsing) .card-overview__layout {\n  transform: translateY(calc(-1 * var(--ds-card-overview-content-offset)));\n  will-change: transform;\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-inverted-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__surface {\n  height: 100%;\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",
+      "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/* The summary bar follows the always-dark sub-theme. */\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  color: var(--color-always-dark-foreground-primary);\n}\n\n.card-overview__surface {\n  width: 100%;\n  min-width: 0;\n  box-sizing: border-box;\n  border-radius: var(--dimension-radius-050);\n  background: var(--color-always-dark-background);\n  color: var(--color-always-dark-foreground-primary);\n  overflow-anchor: none;\n}\n\n/*\n * The visual surface owns elevation outside this clipping viewport. Keeping\n * those layers separate lets a page shrink the surface while content moves and\n * clips inside it without cutting off the shadow or inset highlight.\n */\n.card-overview__clip {\n  height: 100%;\n  min-width: 0;\n  border-radius: inherit;\n  background: inherit;\n  overflow: hidden;\n}\n\n:host(.card-overview--scroll-collapsing) {\n  height: var(--ds-card-overview-expanded-height);\n  pointer-events: none;\n}\n\n:host(.card-overview--scroll-collapsing) .card-overview__surface {\n  height: var(--ds-card-overview-visible-height);\n  pointer-events: auto;\n  will-change: height;\n}\n\n:host(.card-overview--scroll-collapsing) .card-overview__layout {\n  transform: translateY(calc(-1 * var(--ds-card-overview-content-offset)));\n  will-change: transform;\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__surface {\n  height: 100%;\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 { resolveCssLengthPx, TOKEN_DEFAULTS } from '../../utils';\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';\nimport {\n  findNextOverviewMetricIndex,\n  resolveCardOverviewCollapseGeometry,\n  resolveOverviewRovingIndex,\n} from './card-overview-controller';\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-inverted-foreground-positive)',\n  negative: 'var(--color-inverted-foreground-negative)',\n  neutral: 'var(--color-inverted-foreground-secondary)',\n};\n\nconst INVERTED_PRIMARY: TextColor = 'var(--color-inverted-foreground-primary)';\nconst INVERTED_SECONDARY: TextColor = 'var(--color-inverted-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  /**\n   * Page-controlled visual collapse from the full card (`0`) toward its 48px\n   * compact handoff height (`1`). The component preserves its expanded flow\n   * height, keeps elevation on the shrinking surface, and clips translated\n   * content internally. The page still owns sticky positioning and the final\n   * swap to `variant=\"compact\"`.\n   */\n  @Prop() scrollCollapseProgress: number = 0;\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  @State() private expandedHeight: number = 0;\n\n  private layoutEl?: HTMLElement;\n  private layoutResizeObserver: ResizeObserver | null = null;\n\n  componentDidLoad() {\n    this.observeLayout();\n  }\n\n  componentDidRender() {\n    // Re-bind after HMR when DidLoad's observer was dropped.\n    if (!this.layoutResizeObserver) this.observeLayout();\n  }\n\n  disconnectedCallback() {\n    this.layoutResizeObserver?.disconnect();\n    this.layoutResizeObserver = null;\n  }\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  private get resolvedScrollCollapseProgress(): number {\n    if (this.variant === 'compact' || !Number.isFinite(this.scrollCollapseProgress)) return 0;\n    return Math.min(1, Math.max(0, this.scrollCollapseProgress));\n  }\n\n  private get scrollCollapseGeometry() {\n    const compactHeight = resolveCssLengthPx(TOKEN_DEFAULTS.size600, 48);\n    return resolveCardOverviewCollapseGeometry({\n      variant: this.variant,\n      progress: this.resolvedScrollCollapseProgress,\n      expandedHeight: this.expandedHeight,\n      compactHeight,\n    });\n  }\n\n  private observeLayout() {\n    const layout = this.layoutEl;\n    if (!layout) return;\n\n    const updateHeight = (height: number) => {\n      if (height > 0 && Math.abs(height - this.expandedHeight) >= 0.5) {\n        this.expandedHeight = height;\n      }\n    };\n\n    updateHeight(layout.getBoundingClientRect().height);\n    if (typeof ResizeObserver === 'undefined') return;\n\n    this.layoutResizeObserver?.disconnect();\n    this.layoutResizeObserver = new ResizeObserver(entries => {\n      const height = entries[0]?.contentRect.height;\n      if (height !== undefined) updateHeight(height);\n    });\n    this.layoutResizeObserver.observe(layout);\n  }\n\n  /** Index of the roving tab stop, skipping inactive metrics. */\n  private get rovingIndex(): number {\n    return resolveOverviewRovingIndex(this.visibleMetrics, this.focusedMetricIndex);\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 next = findNextOverviewMetricIndex(metrics, from, step < 0 ? -1 : 1);\n    if (next < 0) return;\n\n    this.focusedMetricIndex = next;\n    const cells = this.el.querySelectorAll<HTMLElement>('.card-overview__metric');\n    cells[next]?.focus();\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 so the base and shimmer follow the card's\n   * inverted surface in both themes.\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=\"inverted\"\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        {/* The row owns cross-layout baseline geometry and becomes display: contents in compact mode. */}\n        {/* eslint-disable-next-line local/prefer-direct-ds-text */}\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={INVERTED_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={INVERTED_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={INVERTED_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={INVERTED_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          'ds-interaction-fill--on-inverted': 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={INVERTED_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    const collapse = this.scrollCollapseGeometry;\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          'card-overview--scroll-collapsing': collapse.active,\n        }}\n        role=\"region\"\n        aria-label={this.overviewLabel}\n        aria-busy={this.isLoading ? 'true' : undefined}\n        style={{\n          '--ds-card-overview-metric-min': this.metricMinWidth,\n          '--ds-card-overview-expanded-height': collapse.active\n            ? `${collapse.expandedHeight}px`\n            : undefined,\n          '--ds-card-overview-visible-height': collapse.active\n            ? `${collapse.visibleHeight}px`\n            : undefined,\n          '--ds-card-overview-content-offset': collapse.active\n            ? `${collapse.offset}px`\n            : undefined,\n        }}\n      >\n        <div\n          class={{\n            'card-overview__surface': true,\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        >\n          <div class=\"card-overview__clip\">\n            <div\n              ref={element => {\n                this.layoutEl = (element as HTMLElement) ?? undefined;\n              }}\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={INVERTED_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={INVERTED_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=\"inverted\"\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          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n",
+      "content": "import { Component, Element, Event, EventEmitter, h, Host, Prop, State } from '@stencil/core';\nimport { resolveCssLengthPx, TOKEN_DEFAULTS } from '../../utils';\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';\nimport {\n  findNextOverviewMetricIndex,\n  resolveCardOverviewCollapseGeometry,\n  resolveOverviewRovingIndex,\n} from './card-overview-controller';\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  /**\n   * Page-controlled visual collapse from the full card (`0`) toward its 48px\n   * compact handoff height (`1`). The component preserves its expanded flow\n   * height, keeps elevation on the shrinking surface, and clips translated\n   * content internally. The page still owns sticky positioning and the final\n   * swap to `variant=\"compact\"`.\n   */\n  @Prop() scrollCollapseProgress: number = 0;\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  @State() private expandedHeight: number = 0;\n\n  private layoutEl?: HTMLElement;\n  private layoutResizeObserver: ResizeObserver | null = null;\n\n  componentDidLoad() {\n    this.observeLayout();\n  }\n\n  componentDidRender() {\n    // Re-bind after HMR when DidLoad's observer was dropped.\n    if (!this.layoutResizeObserver) this.observeLayout();\n  }\n\n  disconnectedCallback() {\n    this.layoutResizeObserver?.disconnect();\n    this.layoutResizeObserver = null;\n  }\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  private get resolvedScrollCollapseProgress(): number {\n    if (this.variant === 'compact' || !Number.isFinite(this.scrollCollapseProgress)) return 0;\n    return Math.min(1, Math.max(0, this.scrollCollapseProgress));\n  }\n\n  private get scrollCollapseGeometry() {\n    const compactHeight = resolveCssLengthPx(TOKEN_DEFAULTS.size600, 48);\n    return resolveCardOverviewCollapseGeometry({\n      variant: this.variant,\n      progress: this.resolvedScrollCollapseProgress,\n      expandedHeight: this.expandedHeight,\n      compactHeight,\n    });\n  }\n\n  private observeLayout() {\n    const layout = this.layoutEl;\n    if (!layout) return;\n\n    const updateHeight = (height: number) => {\n      if (height > 0 && Math.abs(height - this.expandedHeight) >= 0.5) {\n        this.expandedHeight = height;\n      }\n    };\n\n    updateHeight(layout.getBoundingClientRect().height);\n    if (typeof ResizeObserver === 'undefined') return;\n\n    this.layoutResizeObserver?.disconnect();\n    this.layoutResizeObserver = new ResizeObserver(entries => {\n      const height = entries[0]?.contentRect.height;\n      if (height !== undefined) updateHeight(height);\n    });\n    this.layoutResizeObserver.observe(layout);\n  }\n\n  /** Index of the roving tab stop, skipping inactive metrics. */\n  private get rovingIndex(): number {\n    return resolveOverviewRovingIndex(this.visibleMetrics, this.focusedMetricIndex);\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 next = findNextOverviewMetricIndex(metrics, from, step < 0 ? -1 : 1);\n    if (next < 0) return;\n\n    this.focusedMetricIndex = next;\n    const cells = this.el.querySelectorAll<HTMLElement>('.card-overview__metric');\n    cells[next]?.focus();\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 so the base and shimmer follow the card's\n   * permanently dark surface in both themes.\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        {/* The row owns cross-layout baseline geometry and becomes display: contents in compact mode. */}\n        {/* eslint-disable-next-line local/prefer-direct-ds-text */}\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          '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    const collapse = this.scrollCollapseGeometry;\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          'card-overview--scroll-collapsing': collapse.active,\n        }}\n        role=\"region\"\n        aria-label={this.overviewLabel}\n        aria-busy={this.isLoading ? 'true' : undefined}\n        style={{\n          '--ds-card-overview-metric-min': this.metricMinWidth,\n          '--ds-card-overview-expanded-height': collapse.active\n            ? `${collapse.expandedHeight}px`\n            : undefined,\n          '--ds-card-overview-visible-height': collapse.active\n            ? `${collapse.visibleHeight}px`\n            : undefined,\n          '--ds-card-overview-content-offset': collapse.active\n            ? `${collapse.offset}px`\n            : undefined,\n        }}\n      >\n        <div\n          class={{\n            'card-overview__surface': true,\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        >\n          <div class=\"card-overview__clip\">\n            <div\n              ref={element => {\n                this.layoutEl = (element as HTMLElement) ?? undefined;\n              }}\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          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n",
       "type": "registry:ui"
     },
     {