@ds-mo/ui 13.2.0 → 13.4.0

package/dist/docs/components.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2026-07-31T02:45:23",
+  "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/badge.json

@@ -277,7 +277,7 @@
   "files": [
     {
       "path": "src/wc/components/Badge/Badge.css",
-      "content": "@import '../../utils/visually-hidden.css';\n\n:host {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  pointer-events: none;\n  vertical-align: middle;\n\n  --_badge-bg: var(--color-background-bold-brand);\n  --_badge-fg: var(--color-foreground-on-bold-background-primary);\n  --_badge-ring: var(--color-background-secondary);\n  --_badge-ring-width: var(--dimension-stroke-width-018);\n}\n\n.badge__mark {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  box-sizing: border-box;\n  color: var(--_badge-fg);\n  background: var(--_badge-bg);\n  box-shadow: 0 0 0 var(--_badge-ring-width) var(--_badge-ring);\n  white-space: nowrap;\n}\n\n:host(.badge--no-ring) {\n  --_badge-ring-width: 0;\n}\n\n\n:host(.badge--dot) .badge__mark {\n  width: var(--dimension-size-075);\n  height: var(--dimension-size-075);\n  border-radius: var(--dimension-radius-half);\n}\n\n:host(.badge--counter) .badge__mark {\n  width: auto;\n  min-width: var(--dimension-size-150);\n  height: var(--dimension-size-150);\n  padding: 0 var(--dimension-space-025);\n  border-radius: var(--dimension-radius-half);\n}\n\n/* Shell gradient ring — base fill + wash donut (option 3). */\n:host(.badge--on-gradient-background) .badge__mark {\n  position: relative;\n  z-index: 0;\n  box-shadow: none;\n  isolation: isolate;\n}\n\n:host(.badge--on-gradient-background) .badge__mark::before,\n:host(.badge--on-gradient-background) .badge__mark::after {\n  content: '';\n  position: absolute;\n  inset: calc(-1 * var(--_badge-ring-width));\n  border-radius: inherit;\n  box-sizing: border-box;\n  padding: var(--_badge-ring-width);\n  pointer-events: none;\n  /* stylelint-disable color-no-hex -- mask luminance stops for ring cutout, not theme colors */\n  -webkit-mask:\n    linear-gradient(#fff 0 0) content-box,\n    linear-gradient(#fff 0 0);\n  -webkit-mask-composite: xor;\n  mask:\n    linear-gradient(#fff 0 0) content-box,\n    linear-gradient(#fff 0 0);\n  /* stylelint-enable color-no-hex */\n  mask-composite: exclude;\n}\n\n:host(.badge--on-gradient-background) .badge__mark::before {\n  z-index: -2;\n  background-color: var(--_badge-ring);\n}\n\n:host(.badge--on-gradient-background) .badge__mark::after {\n  z-index: -1;\n  background-image: var(--ds-shell-gradient-image, none);\n  background-size: var(--ds-shell-gradient-size, auto);\n  background-position: 0 0;\n  background-repeat: no-repeat;\n  background-attachment: fixed;\n  opacity: var(--ds-shell-gradient-opacity, 1);\n}\n",
+      "content": "@import '../../utils/visually-hidden.css';\n@import '../../utils/forced-colors.css';\n\n:host {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  pointer-events: none;\n  vertical-align: middle;\n\n  --_badge-bg: var(--color-background-bold-brand);\n  --_badge-fg: var(--color-foreground-on-bold-background-primary);\n  --_badge-ring: var(--color-background-secondary);\n  --_badge-ring-width: var(--dimension-stroke-width-018);\n}\n\n.badge__mark {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  box-sizing: border-box;\n  color: var(--_badge-fg);\n  background: var(--_badge-bg);\n  box-shadow: 0 0 0 var(--_badge-ring-width) var(--_badge-ring);\n  white-space: nowrap;\n}\n\n:host(.badge--no-ring) {\n  --_badge-ring-width: 0;\n}\n\n\n:host(.badge--dot) .badge__mark {\n  width: var(--dimension-size-075);\n  height: var(--dimension-size-075);\n  border-radius: var(--dimension-radius-half);\n}\n\n:host(.badge--counter) .badge__mark {\n  width: auto;\n  min-width: var(--dimension-size-150);\n  height: var(--dimension-size-150);\n  padding: 0 var(--dimension-space-025);\n  border-radius: var(--dimension-radius-half);\n}\n\n/* Shell gradient ring — base fill + wash donut (option 3). */\n:host(.badge--on-gradient-background) .badge__mark {\n  position: relative;\n  z-index: 0;\n  box-shadow: none;\n  isolation: isolate;\n}\n\n:host(.badge--on-gradient-background) .badge__mark::before,\n:host(.badge--on-gradient-background) .badge__mark::after {\n  content: '';\n  position: absolute;\n  inset: calc(-1 * var(--_badge-ring-width));\n  border-radius: inherit;\n  box-sizing: border-box;\n  padding: var(--_badge-ring-width);\n  pointer-events: none;\n  /* stylelint-disable color-no-hex -- mask luminance stops for ring cutout, not theme colors */\n  -webkit-mask:\n    linear-gradient(#fff 0 0) content-box,\n    linear-gradient(#fff 0 0);\n  -webkit-mask-composite: xor;\n  mask:\n    linear-gradient(#fff 0 0) content-box,\n    linear-gradient(#fff 0 0);\n  /* stylelint-enable color-no-hex */\n  mask-composite: exclude;\n}\n\n:host(.badge--on-gradient-background) .badge__mark::before {\n  z-index: -2;\n  background-color: var(--_badge-ring);\n}\n\n:host(.badge--on-gradient-background) .badge__mark::after {\n  z-index: -1;\n  background-image: var(--ds-shell-gradient-image, none);\n  background-size: var(--ds-shell-gradient-size, auto);\n  background-position: 0 0;\n  background-repeat: no-repeat;\n  background-attachment: fixed;\n  opacity: var(--ds-shell-gradient-opacity, 1);\n}\n\n@media (forced-colors: active) {\n  .badge__mark {\n    color: var(--ds-forced-color-on-selected);\n    background: var(--ds-forced-color-selected);\n    box-shadow: none;\n    outline: var(--_badge-ring-width) solid var(--ds-forced-color-surface);\n  }\n\n  :host(.badge--on-gradient-background) .badge__mark::before,\n  :host(.badge--on-gradient-background) .badge__mark::after {\n    display: none;\n  }\n}\n",
       "type": "registry:ui"
     },
     {

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

@@ -229,7 +229,7 @@
   "files": [
     {
       "path": "src/wc/components/CardDataViz/CardDataViz.css",
-      "content": "@import '../../utils/chrome-layout.css';\n\n:host {\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  width: var(--_card-data-viz-width);\n  min-height: var(--_card-data-viz-min-height);\n  max-width: 100%;\n  overflow: hidden;\n  border: none;\n  border-radius: var(--dimension-radius-025);\n  background-color: var(--color-background-primary);\n  box-shadow: 0 0 0 var(--dimension-stroke-width-012) var(--color-border-tertiary);\n}\n\n.card-data-viz__header {\n  flex-shrink: 0;\n  justify-content: space-between;\n  height: var(--dimension-size-600);\n  border-bottom: var(--dimension-stroke-width-012) solid var(--color-border-tertiary);\n  background-color: var(--color-background-secondary);\n}\n\nds-text.card-data-viz__title {\n  display: flex;\n  flex: 1 1 auto;\n  align-items: center;\n  box-sizing: border-box;\n  min-width: 0;\n  padding: calc(var(--dimension-space-075) + var(--dimension-space-025));\n  -webkit-user-select: none;\n  user-select: none;\n}\n\n.card-data-viz__actions {\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  gap: var(--dimension-space-100);\n}\n\n.card-data-viz__actions:empty {\n  display: none;\n}\n\n.card-data-viz__body,\n.card-data-viz__layout {\n  display: flex;\n  flex: 1 1 auto;\n  flex-direction: column;\n  box-sizing: border-box;\n  min-height: 0;\n}\n\n.card-data-viz__body {\n  border-radius: 0 0 var(--dimension-radius-025) var(--dimension-radius-025);\n  background-color: var(--color-background-primary);\n}\n\n.card-data-viz__layout {\n  height: 100%;\n  gap: var(--dimension-space-200);\n}\n\n.card-data-viz__chart {\n  display: grid;\n  flex: 1 1 auto;\n  align-items: center;\n  box-sizing: border-box;\n  min-height: 0;\n  padding: var(--dimension-space-400) var(--dimension-space-400) 0\n    var(--dimension-space-400);\n}\n\n.card-data-viz__chart > * {\n  width: 100%;\n  height: 100%;\n  min-width: 0;\n  min-height: 0;\n  max-width: 100%;\n  max-height: 100%;\n}\n\n.card-data-viz__chart--fill > * {\n  height: 100%;\n  min-height: 0;\n  max-height: 100%;\n}\n\n.card-data-viz__legend {\n  flex: 0 0 auto;\n  box-sizing: border-box;\n  padding: 0 var(--dimension-space-100) var(--dimension-space-100)\n    var(--dimension-space-100);\n}\n",
+      "content": "@import '../../utils/chrome-layout.css';\n@import '../../utils/forced-colors.css';\n\n:host {\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  width: var(--_card-data-viz-width);\n  min-height: var(--_card-data-viz-min-height);\n  max-width: 100%;\n  overflow: hidden;\n  border: none;\n  border-radius: var(--dimension-radius-025);\n  background-color: var(--color-background-primary);\n  box-shadow: 0 0 0 var(--dimension-stroke-width-012) var(--color-border-tertiary);\n}\n\n.card-data-viz__header {\n  flex-shrink: 0;\n  justify-content: space-between;\n  height: var(--dimension-size-600);\n  border-bottom: var(--dimension-stroke-width-012) solid var(--color-border-tertiary);\n  background-color: var(--color-background-secondary);\n}\n\nds-text.card-data-viz__title {\n  display: flex;\n  flex: 1 1 auto;\n  align-items: center;\n  box-sizing: border-box;\n  min-width: 0;\n  padding: calc(var(--dimension-space-075) + var(--dimension-space-025));\n  -webkit-user-select: none;\n  user-select: none;\n}\n\n.card-data-viz__actions {\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  gap: var(--dimension-space-100);\n}\n\n.card-data-viz__actions:empty {\n  display: none;\n}\n\n.card-data-viz__body,\n.card-data-viz__layout {\n  display: flex;\n  flex: 1 1 auto;\n  flex-direction: column;\n  box-sizing: border-box;\n  min-height: 0;\n}\n\n.card-data-viz__body {\n  border-radius: 0 0 var(--dimension-radius-025) var(--dimension-radius-025);\n  background-color: var(--color-background-primary);\n}\n\n.card-data-viz__layout {\n  height: 100%;\n  gap: var(--dimension-space-200);\n}\n\n.card-data-viz__chart {\n  display: grid;\n  flex: 1 1 auto;\n  align-items: center;\n  box-sizing: border-box;\n  min-height: 0;\n  padding: var(--dimension-space-400) var(--dimension-space-400) 0\n    var(--dimension-space-400);\n}\n\n.card-data-viz__chart > * {\n  width: 100%;\n  height: 100%;\n  min-width: 0;\n  min-height: 0;\n  max-width: 100%;\n  max-height: 100%;\n}\n\n.card-data-viz__chart--fill > * {\n  height: 100%;\n  min-height: 0;\n  max-height: 100%;\n}\n\n.card-data-viz__legend {\n  flex: 0 0 auto;\n  box-sizing: border-box;\n  padding: 0 var(--dimension-space-100) var(--dimension-space-100)\n    var(--dimension-space-100);\n}\n\n@media (forced-colors: active) {\n  :host {\n    box-shadow: none;\n    outline: var(--dimension-stroke-width-012) solid var(--ds-forced-color-content);\n    outline-offset: calc(-1 * var(--dimension-stroke-width-012));\n  }\n}\n",
       "type": "registry:ui"
     },
     {