@ds-mo/ui 9.0.0 → 9.2.0

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

@@ -0,0 +1,143 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "card-data-viz-donut",
+  "title": "CardDataVizDonut",
+  "description": "Donut data-viz card on dedicated ds-card-shell-data-viz chrome — fill chart region, content-sized legend, header filter action, and chart↔legend hover sync.",
+  "type": "registry:ui",
+  "meta": {
+    "library": "@ds-mo/ui",
+    "distribution": "npm",
+    "storybook": "https://zainadeel.github.io/compomo/?path=/story/card-data-viz-donut",
+    "source": "src/wc/components/CardDataVizDonut/CardDataVizDonut.tsx",
+    "intentStatus": "migration-pending",
+    "intent": null,
+    "api": {
+      "props": {
+        "cardWidth": {
+          "type": "CardDataVizDonutWidth",
+          "resolvedType": "\"lg\" | \"md\" | \"sm\"",
+          "attribute": "card-width",
+          "default": "'md'",
+          "required": false,
+          "mutable": false,
+          "description": "Card width token — also sets matching min-height."
+        },
+        "filterLabel": {
+          "type": "string",
+          "resolvedType": "string",
+          "attribute": "filter-label",
+          "default": "'Filter'",
+          "required": false,
+          "mutable": false
+        },
+        "heading": {
+          "type": "string",
+          "resolvedType": "string",
+          "attribute": "heading",
+          "required": true,
+          "mutable": false,
+          "description": "Widget heading shown in the card header."
+        }
+      },
+      "events": [
+        {
+          "name": "dsFilterClick",
+          "detail": "void",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true,
+          "description": "Emits when the header filter control is activated."
+        }
+      ],
+      "methods": [],
+      "slots": []
+    },
+    "props": {
+      "cardWidth": {
+        "type": "CardDataVizDonutWidth",
+        "resolvedType": "\"lg\" | \"md\" | \"sm\"",
+        "attribute": "card-width",
+        "default": "'md'",
+        "required": false,
+        "mutable": false,
+        "description": "Card width token — also sets matching min-height."
+      },
+      "filterLabel": {
+        "type": "string",
+        "resolvedType": "string",
+        "attribute": "filter-label",
+        "default": "'Filter'",
+        "required": false,
+        "mutable": false
+      },
+      "heading": {
+        "type": "string",
+        "resolvedType": "string",
+        "attribute": "heading",
+        "required": true,
+        "mutable": false,
+        "description": "Widget heading shown in the card header."
+      }
+    },
+    "events": [
+      {
+        "name": "dsFilterClick",
+        "detail": "void",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "description": "Emits when the header filter control is activated."
+      }
+    ],
+    "methods": [],
+    "slots": [],
+    "exports": {
+      "customElement": "ds-card-data-viz-donut",
+      "react": "DsCardDataVizDonut",
+      "angular": "DsCardDataVizDonut"
+    },
+    "consumption": {
+      "install": "npm install @ds-mo/ui @ds-mo/tokens @ds-mo/icons",
+      "cssSetup": "import '@ds-mo/tokens';\nimport '@ds-mo/tokens/reset';\nimport '@ds-mo/tokens/globals';",
+      "customElements": {
+        "import": "import '@ds-mo/ui/dist/components/ds-card-data-viz-donut.js';",
+        "example": "<ds-card-data-viz-donut></ds-card-data-viz-donut>"
+      },
+      "react": {
+        "import": "import { DsCardDataVizDonut } from '@ds-mo/ui/react';",
+        "example": "<DsCardDataVizDonut />"
+      },
+      "angular": {
+        "import": "import { DsCardDataVizDonut } from '@ds-mo/ui/angular/ds-card-data-viz-donut';",
+        "example": "<ds-card-data-viz-donut></ds-card-data-viz-donut>"
+      },
+      "peerDependencies": {
+        "required": [
+          "@ds-mo/tokens ^3.1.1",
+          "@ds-mo/icons ^6.2.0"
+        ],
+        "frameworks": "Custom Elements; React 18/19 wrappers; Angular 19-22 standalone adapters."
+      }
+    }
+  },
+  "dependencies": [
+    "@ds-mo/ui",
+    "@ds-mo/tokens"
+  ],
+  "registryDependencies": [
+    "button-unfilled",
+    "card-shell-data-viz"
+  ],
+  "files": [
+    {
+      "path": "src/wc/components/CardDataVizDonut/CardDataVizDonut.css",
+      "content": ":host {\n  display: contents;\n}\n\n.card-data-viz-donut__layout {\n  display: flex;\n  flex-direction: column;\n  flex: 1 1 auto;\n  min-height: 0;\n  height: 100%;\n  gap: var(--dimension-space-200);\n  box-sizing: border-box;\n}\n\n/*\n * Chart region fills leftover space; legend stays content-sized.\n * Padding is per-region so the body gap isn't doubled at the shared edge.\n */\n.card-data-viz-donut__chart-region {\n  flex: 1 1 auto;\n  min-height: 0;\n  /* Stretch the slotted donut to the full region; the donut centers its own SVG. */\n  display: grid;\n  padding: var(--dimension-space-400) var(--dimension-space-400) 0 var(--dimension-space-400);\n  box-sizing: border-box;\n}\n\n/* Make the slotted donut stretch to the region so ResizeObserver can measure fill size. */\n.card-data-viz-donut__chart-region > * {\n  width: 100%;\n  height: 100%;\n  min-width: 0;\n  min-height: 0;\n  max-width: 100%;\n  max-height: 100%;\n}\n\n.card-data-viz-donut__legend-region {\n  flex: 0 0 auto;\n  padding: 0 var(--dimension-space-100) var(--dimension-space-100) var(--dimension-space-100);\n  box-sizing: border-box;\n}\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/wc/components/CardDataVizDonut/CardDataVizDonut.tsx",
+      "content": "import { Component, Element, Event, EventEmitter, State, h, Host, Prop } from '@stencil/core';\nimport type { CardShellDataVizWidth } from '../CardShellDataViz/CardShellDataViz';\n\nexport type CardDataVizDonutWidth = CardShellDataVizWidth;\n\n/** Matches the `dsSliceHover`/`dsItemHover` detail shape emitted by `ds-chart-*` and `ds-chart-legend`. */\ntype HoveredDatum = { label: string } | null;\n\n/** A slotted chart/legend that opts into hover sync by exposing an `activeLabel` prop. */\ntype SyncableSlot = HTMLElement & { activeLabel?: string | null };\n\n/**\n * Donut data-viz card — dedicated `ds-card-shell-data-viz` chrome with a fill chart region and\n * content-sized legend. Hover sync between chart and legend stays here.\n */\n@Component({\n  tag: 'ds-card-data-viz-donut',\n  styleUrl: 'CardDataVizDonut.css',\n  scoped: true,\n})\nexport class CardDataVizDonut {\n  @Element() el!: HTMLElement;\n\n  /** Widget heading shown in the card header. */\n  @Prop() heading!: string;\n\n  /** Card width token — also sets matching min-height. */\n  @Prop() cardWidth: CardDataVizDonutWidth = 'md';\n  @Prop() filterLabel: string = 'Filter';\n\n  /** Emits when the header filter control is activated. */\n  @Event() dsFilterClick!: EventEmitter<void>;\n\n  // Scoped (light-DOM) components have no native slot projection to detect emptiness from CSS —\n  // check the actual children so an unused region (e.g. no legend) doesn't render a dangling\n  // padded box plus a body gap next to nothing.\n  @State() private hasChartSlot = false;\n  @State() private hasLegendSlot = false;\n\n  componentWillRender() {\n    // Not `:scope >` — Stencil's scoped slot polyfill relocates slotted children into\n    // region wrappers (and here into nested `ds-card`), so they may not stay direct\n    // host children across renders.\n    this.hasChartSlot = !!this.el.querySelector('[slot=\"chart\"]');\n    this.hasLegendSlot = !!this.el.querySelector('[slot=\"legend\"]');\n  }\n\n  componentDidLoad() {\n    // Sync the chart's and legend's `activeLabel` from each other's hover events, so any\n    // ds-chart-donut + ds-chart-legend pair cross-highlights without every consumer having to\n    // wire it up by hand. Delegated on the host (rather than bound to the specific slotted\n    // elements) since Stencil events bubble and the slot content can be swapped at runtime.\n    this.el.addEventListener('dsSliceHover', this.handleChartHover);\n    this.el.addEventListener('dsItemHover', this.handleLegendHover);\n  }\n\n  disconnectedCallback() {\n    this.el.removeEventListener('dsSliceHover', this.handleChartHover);\n    this.el.removeEventListener('dsItemHover', this.handleLegendHover);\n  }\n\n  private handleChartHover = (e: Event) => {\n    // Not `:scope >` — Stencil's slot polyfill for scoped (non-shadow) components relocates\n    // slotted children into an inner region wrapper on render, so they're no longer direct\n    // children of the host by the time this fires.\n    const legend = this.el.querySelector('[slot=\"legend\"]') as SyncableSlot | null;\n    if (!legend || !('activeLabel' in legend)) return;\n    legend.activeLabel = (e as CustomEvent<HoveredDatum>).detail?.label ?? null;\n  };\n\n  private handleLegendHover = (e: Event) => {\n    const chart = this.el.querySelector('[slot=\"chart\"]') as SyncableSlot | null;\n    if (!chart || !('activeLabel' in chart)) return;\n    chart.activeLabel = (e as CustomEvent<HoveredDatum>).detail?.label ?? null;\n  };\n\n  private handleFilterClick = () => {\n    this.dsFilterClick.emit();\n  };\n\n  render() {\n    return (\n      <Host class=\"card-data-viz-donut\">\n        <ds-card-shell-data-viz heading={this.heading} cardWidth={this.cardWidth}>\n          <ds-button-unfilled\n            slot=\"actions\"\n            variant=\"icon\"\n            type=\"button\"\n            icon=\"Filters\"\n            aria-label={this.filterLabel}\n            onDsClick={this.handleFilterClick}\n          />\n          <div class=\"card-data-viz-donut__layout\">\n            {this.hasChartSlot && (\n              <div class=\"card-data-viz-donut__chart-region\">\n                <slot name=\"chart\" />\n              </div>\n            )}\n            {this.hasLegendSlot && (\n              <div class=\"card-data-viz-donut__legend-region\">\n                <slot name=\"legend\" />\n              </div>\n            )}\n          </div>\n        </ds-card-shell-data-viz>\n      </Host>\n    );\n  }\n}\n",
+      "type": "registry:ui"
+    }
+  ]
+}

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

@@ -0,0 +1,194 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "card-setting",
+  "title": "CardSetting",
+  "description": "Settings page section shell composed on ds-card with view/edit header actions. Edit state is controlled by the parent.",
+  "type": "registry:ui",
+  "meta": {
+    "library": "@ds-mo/ui",
+    "distribution": "npm",
+    "storybook": "https://zainadeel.github.io/compomo/?path=/story/card-setting",
+    "source": "src/wc/components/CardSetting/CardSetting.tsx",
+    "intentStatus": "migration-pending",
+    "intent": null,
+    "api": {
+      "props": {
+        "cancelLabel": {
+          "type": "string",
+          "resolvedType": "string",
+          "attribute": "cancel-label",
+          "default": "'Cancel'",
+          "required": false,
+          "mutable": false
+        },
+        "cardWidth": {
+          "type": "CardSettingWidth",
+          "resolvedType": "\"lg\" | \"md\" | \"sm\"",
+          "attribute": "card-width",
+          "default": "'md'",
+          "required": false,
+          "mutable": false,
+          "description": "Card width token (`sm` / `md` / `lg`). Also sets host `min-height` to the\nmatching `--dimension-card-height-*` so the body fills available space\neven when the slot is empty."
+        },
+        "editLabel": {
+          "type": "string",
+          "resolvedType": "string",
+          "attribute": "edit-label",
+          "default": "'Edit'",
+          "required": false,
+          "mutable": false
+        },
+        "editing": {
+          "type": "boolean",
+          "resolvedType": "boolean",
+          "attribute": "editing",
+          "default": "false",
+          "required": false,
+          "mutable": false,
+          "description": "Controlled edit state — parent owns single-edit orchestration."
+        },
+        "heading": {
+          "type": "string",
+          "resolvedType": "string",
+          "attribute": "heading",
+          "required": true,
+          "mutable": false,
+          "description": "Section heading shown in the card header."
+        },
+        "saveLabel": {
+          "type": "string",
+          "resolvedType": "string",
+          "attribute": "save-label",
+          "default": "'Save'",
+          "required": false,
+          "mutable": false
+        }
+      },
+      "events": [
+        {
+          "name": "dsEditingChange",
+          "detail": "boolean",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true,
+          "description": "Emits when the user enters or exits edit mode."
+        }
+      ],
+      "methods": [],
+      "slots": []
+    },
+    "props": {
+      "cancelLabel": {
+        "type": "string",
+        "resolvedType": "string",
+        "attribute": "cancel-label",
+        "default": "'Cancel'",
+        "required": false,
+        "mutable": false
+      },
+      "cardWidth": {
+        "type": "CardSettingWidth",
+        "resolvedType": "\"lg\" | \"md\" | \"sm\"",
+        "attribute": "card-width",
+        "default": "'md'",
+        "required": false,
+        "mutable": false,
+        "description": "Card width token (`sm` / `md` / `lg`). Also sets host `min-height` to the\nmatching `--dimension-card-height-*` so the body fills available space\neven when the slot is empty."
+      },
+      "editLabel": {
+        "type": "string",
+        "resolvedType": "string",
+        "attribute": "edit-label",
+        "default": "'Edit'",
+        "required": false,
+        "mutable": false
+      },
+      "editing": {
+        "type": "boolean",
+        "resolvedType": "boolean",
+        "attribute": "editing",
+        "default": "false",
+        "required": false,
+        "mutable": false,
+        "description": "Controlled edit state — parent owns single-edit orchestration."
+      },
+      "heading": {
+        "type": "string",
+        "resolvedType": "string",
+        "attribute": "heading",
+        "required": true,
+        "mutable": false,
+        "description": "Section heading shown in the card header."
+      },
+      "saveLabel": {
+        "type": "string",
+        "resolvedType": "string",
+        "attribute": "save-label",
+        "default": "'Save'",
+        "required": false,
+        "mutable": false
+      }
+    },
+    "events": [
+      {
+        "name": "dsEditingChange",
+        "detail": "boolean",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "description": "Emits when the user enters or exits edit mode."
+      }
+    ],
+    "methods": [],
+    "slots": [],
+    "exports": {
+      "customElement": "ds-card-setting",
+      "react": "DsCardSetting",
+      "angular": "DsCardSetting"
+    },
+    "consumption": {
+      "install": "npm install @ds-mo/ui @ds-mo/tokens @ds-mo/icons",
+      "cssSetup": "import '@ds-mo/tokens';\nimport '@ds-mo/tokens/reset';\nimport '@ds-mo/tokens/globals';",
+      "customElements": {
+        "import": "import '@ds-mo/ui/dist/components/ds-card-setting.js';",
+        "example": "<ds-card-setting></ds-card-setting>"
+      },
+      "react": {
+        "import": "import { DsCardSetting } from '@ds-mo/ui/react';",
+        "example": "<DsCardSetting />"
+      },
+      "angular": {
+        "import": "import { DsCardSetting } from '@ds-mo/ui/angular/ds-card-setting';",
+        "example": "<ds-card-setting></ds-card-setting>"
+      },
+      "peerDependencies": {
+        "required": [
+          "@ds-mo/tokens ^3.1.1",
+          "@ds-mo/icons ^6.2.0"
+        ],
+        "frameworks": "Custom Elements; React 18/19 wrappers; Angular 19-22 standalone adapters."
+      }
+    }
+  },
+  "dependencies": [
+    "@ds-mo/ui",
+    "@ds-mo/tokens"
+  ],
+  "registryDependencies": [
+    "button-filled",
+    "button-unfilled",
+    "card"
+  ],
+  "files": [
+    {
+      "path": "src/wc/components/CardSetting/CardSetting.css",
+      "content": ":host {\n  display: contents;\n}\n\n.card-setting__actions {\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  gap: var(--dimension-space-100);\n}\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/wc/components/CardSetting/CardSetting.tsx",
+      "content": "import { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\nimport type { CardWidth } from '../Card/Card';\n\nexport type CardSettingWidth = CardWidth;\n\n@Component({\n  tag: 'ds-card-setting',\n  styleUrl: 'CardSetting.css',\n  scoped: true,\n})\nexport class CardSetting {\n  /** Section heading shown in the card header. */\n  @Prop() heading!: string;\n\n  /**\n   * Card width token (`sm` / `md` / `lg`). Also sets host `min-height` to the\n   * matching `--dimension-card-height-*` so the body fills available space\n   * even when the slot is empty.\n   */\n  @Prop() cardWidth: CardSettingWidth = 'md';\n\n  /** Controlled edit state — parent owns single-edit orchestration. */\n  @Prop() editing = false;\n  @Prop() editLabel: string = 'Edit';\n  @Prop() cancelLabel: string = 'Cancel';\n  @Prop() saveLabel: string = 'Save';\n\n  /** Emits when the user enters or exits edit mode. */\n  @Event() dsEditingChange!: EventEmitter<boolean>;\n\n  private enterEdit = () => {\n    this.dsEditingChange.emit(true);\n  };\n\n  private exitEdit = () => {\n    this.dsEditingChange.emit(false);\n  };\n\n  render() {\n    const editing = this.editing;\n\n    return (\n      <Host class=\"card-setting\">\n        <ds-card\n          heading={this.heading}\n          cardWidth={this.cardWidth}\n          appearance={editing ? 'editing' : 'default'}\n        >\n          {!editing ? (\n            <ds-button-unfilled\n              slot=\"actions\"\n              variant=\"icon\"\n              type=\"button\"\n              icon=\"Pencil\"\n              aria-label={this.editLabel}\n              onDsClick={this.enterEdit}\n            />\n          ) : (\n            <div slot=\"actions\" class=\"card-setting__actions\">\n              <ds-button-unfilled\n                variant=\"icon\"\n                type=\"button\"\n                icon=\"Cross\"\n                background=\"bold\"\n                aria-label={this.cancelLabel}\n                onDsClick={this.exitEdit}\n              />\n              <ds-button-filled\n                variant=\"icon\"\n                type=\"button\"\n                icon=\"Check\"\n                intent=\"brand\"\n                contrast=\"faint\"\n                aria-label={this.saveLabel}\n                onDsClick={this.exitEdit}\n              />\n            </div>\n          )}\n          <slot />\n        </ds-card>\n      </Host>\n    );\n  }\n}\n",
+      "type": "registry:ui"
+    }
+  ]
+}

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

@@ -0,0 +1,173 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "card-shell-data-viz",
+  "title": "CardShellDataViz",
+  "description": "Dedicated header, action, sizing, and body chrome for data-visualization cards whose layouts will evolve independently from general and settings cards.",
+  "type": "registry:ui",
+  "meta": {
+    "library": "@ds-mo/ui",
+    "distribution": "npm",
+    "storybook": "https://zainadeel.github.io/compomo/?path=/story/card-shell-data-viz",
+    "source": "src/wc/components/CardShellDataViz/CardShellDataViz.tsx",
+    "intentStatus": "complete",
+    "intent": {
+      "audience": "specialized",
+      "status": "experimental",
+      "summary": "Dedicated header, action, sizing, and body chrome for data-visualization cards whose layouts will evolve independently from general and settings cards.",
+      "useWhen": [
+        "A card contains a chart, data-visualization legend, metric visualization, or a specialized data-viz composition.",
+        "A data-visualization card needs a heading and optional header actions while retaining a flexible body for its composing component.",
+        "Several chart-specific cards need one shell boundary that can evolve without changing general or settings cards."
+      ],
+      "avoidWhen": [
+        "The card contains settings or editable form content; use the settings card composition.",
+        "The surface is ordinary content without data visualization; use the general card shell.",
+        "The shell would own chart-specific layout, hover synchronization, legends, or empty-state policy; keep those in the composing data-viz card."
+      ],
+      "alternatives": [
+        {
+          "when": "The card contains general content rather than data visualization.",
+          "component": "component:ds-card",
+          "reason": "Card owns the existing general and settings-compatible chrome contract."
+        },
+        {
+          "when": "The composition is the standard donut chart plus synchronized legend.",
+          "component": "component:ds-card-data-viz-donut",
+          "reason": "CardDataVizDonut composes this shell with donut-specific regions and hover synchronization."
+        }
+      ],
+      "commonlyComposedWith": [
+        "component:ds-chart-bar",
+        "component:ds-chart-donut",
+        "component:ds-chart-line",
+        "component:ds-chart-legend",
+        "component:ds-button-unfilled"
+      ],
+      "accessibility": [
+        "Provide a concise visible heading that identifies the visualization; the shell renders it as a section heading.",
+        "Header actions must provide their own accessible names and communicate any controlled state or popup relationship.",
+        "The shell does not add landmark or chart semantics; composing charts retain their own accessible names and descriptions.",
+        "Do not duplicate chart data in the heading. Provide an accessible summary through the chart or adjacent composition when visual encoding alone is insufficient."
+      ],
+      "states": [
+        "The shell owns default data-visualization surface chrome only; loading, empty, error, selected, and interactive states belong to the composing card or chart.",
+        "The actions slot collapses when empty so headings retain the available header width."
+      ],
+      "responsiveBehavior": [
+        "The selected sm, md, or lg width sets the matching token-based minimum height while max-width prevents overflow from a narrower parent.",
+        "The parent layout chooses card width, wrapping, stacking, and breakpoint changes; the shell does not switch sizes automatically.",
+        "The body is a flexible column so specialized data-viz cards can allocate remaining height between charts, legends, and supporting content."
+      ],
+      "frameworkCaveats": {
+        "customElements": [
+          "Place header controls in the actions slot and data-visualization composition in the default slot."
+        ],
+        "react": [
+          "Pass header controls with slot=\"actions\" and keep chart state in the composing React component."
+        ],
+        "angular": [
+          "Project header controls with slot=\"actions\" and keep chart state in the composing Angular component."
+        ]
+      },
+      "references": [
+        {
+          "label": "Storybook examples",
+          "path": "src/wc/components/CardShellDataViz/CardShellDataViz.stories.ts"
+        }
+      ]
+    },
+    "api": {
+      "props": {
+        "cardWidth": {
+          "type": "CardShellDataVizWidth",
+          "resolvedType": "\"lg\" | \"md\" | \"sm\"",
+          "attribute": "card-width",
+          "default": "'md'",
+          "required": false,
+          "mutable": false,
+          "description": "Width token with the matching data-visualization shell min-height."
+        },
+        "heading": {
+          "type": "string",
+          "resolvedType": "string",
+          "attribute": "heading",
+          "required": true,
+          "mutable": false,
+          "description": "Data-visualization heading shown in the shell header."
+        }
+      },
+      "events": [],
+      "methods": [],
+      "slots": []
+    },
+    "props": {
+      "cardWidth": {
+        "type": "CardShellDataVizWidth",
+        "resolvedType": "\"lg\" | \"md\" | \"sm\"",
+        "attribute": "card-width",
+        "default": "'md'",
+        "required": false,
+        "mutable": false,
+        "description": "Width token with the matching data-visualization shell min-height."
+      },
+      "heading": {
+        "type": "string",
+        "resolvedType": "string",
+        "attribute": "heading",
+        "required": true,
+        "mutable": false,
+        "description": "Data-visualization heading shown in the shell header."
+      }
+    },
+    "events": [],
+    "methods": [],
+    "slots": [],
+    "exports": {
+      "customElement": "ds-card-shell-data-viz",
+      "react": "DsCardShellDataViz",
+      "angular": "DsCardShellDataViz"
+    },
+    "consumption": {
+      "install": "npm install @ds-mo/ui @ds-mo/tokens @ds-mo/icons",
+      "cssSetup": "import '@ds-mo/tokens';\nimport '@ds-mo/tokens/reset';\nimport '@ds-mo/tokens/globals';",
+      "customElements": {
+        "import": "import '@ds-mo/ui/dist/components/ds-card-shell-data-viz.js';",
+        "example": "<ds-card-shell-data-viz></ds-card-shell-data-viz>"
+      },
+      "react": {
+        "import": "import { DsCardShellDataViz } from '@ds-mo/ui/react';",
+        "example": "<DsCardShellDataViz />"
+      },
+      "angular": {
+        "import": "import { DsCardShellDataViz } from '@ds-mo/ui/angular/ds-card-shell-data-viz';",
+        "example": "<ds-card-shell-data-viz></ds-card-shell-data-viz>"
+      },
+      "peerDependencies": {
+        "required": [
+          "@ds-mo/tokens ^3.1.1",
+          "@ds-mo/icons ^6.2.0"
+        ],
+        "frameworks": "Custom Elements; React 18/19 wrappers; Angular 19-22 standalone adapters."
+      }
+    }
+  },
+  "dependencies": [
+    "@ds-mo/ui",
+    "@ds-mo/tokens"
+  ],
+  "registryDependencies": [
+    "text"
+  ],
+  "files": [
+    {
+      "path": "src/wc/components/CardShellDataViz/CardShellDataViz.css",
+      "content": ":host {\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  width: var(--_card-shell-data-viz-width);\n  min-height: var(--_card-shell-data-viz-min-height);\n  max-width: 100%;\n  overflow: hidden;\n  border: none;\n  border-radius: var(--dimension-radius-025);\n  background-color: var(--color-background-primary);\n  box-shadow: 0 0 0 var(--dimension-stroke-width-012) var(--color-border-tertiary);\n}\n\n.card-shell-data-viz__header {\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: space-between;\n  box-sizing: border-box;\n  height: var(--dimension-size-600);\n  padding: var(--dimension-space-100);\n  gap: var(--dimension-space-100);\n  border-bottom: var(--dimension-stroke-width-012) solid var(--color-border-tertiary);\n  background-color: var(--color-background-secondary);\n}\n\nds-text.card-shell-data-viz__title {\n  display: flex;\n  flex: 1 1 auto;\n  align-items: center;\n  box-sizing: border-box;\n  min-width: 0;\n  padding: calc(var(--dimension-space-075) + var(--dimension-space-025));\n  -webkit-user-select: none;\n  user-select: none;\n}\n\n.card-shell-data-viz__actions {\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  gap: var(--dimension-space-100);\n}\n\n.card-shell-data-viz__actions:empty {\n  display: none;\n}\n\n.card-shell-data-viz__body {\n  display: flex;\n  flex: 1 1 auto;\n  flex-direction: column;\n  box-sizing: border-box;\n  min-height: 0;\n  border-radius: 0 0 var(--dimension-radius-025) var(--dimension-radius-025);\n  background-color: var(--color-background-primary);\n}\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/wc/components/CardShellDataViz/CardShellDataViz.tsx",
+      "content": "import { Component, h, Host, Prop } from '@stencil/core';\n\nexport type CardShellDataVizWidth = 'sm' | 'md' | 'lg';\n\nconst CARD_WIDTH_VARS: Record<CardShellDataVizWidth, string> = {\n  sm: 'var(--dimension-card-width-sm)',\n  md: 'var(--dimension-card-width-md)',\n  lg: 'var(--dimension-card-width-lg)',\n};\n\nconst CARD_HEIGHT_VARS: Record<CardShellDataVizWidth, string> = {\n  sm: 'var(--dimension-card-height-sm)',\n  md: 'var(--dimension-card-height-md)',\n  lg: 'var(--dimension-card-height-lg)',\n};\n\n/**\n * Dedicated shell chrome for data-visualization cards. Chart-specific layout,\n * legends, hover synchronization, and empty states belong to composing cards.\n */\n@Component({\n  tag: 'ds-card-shell-data-viz',\n  styleUrl: 'CardShellDataViz.css',\n  scoped: true,\n})\nexport class CardShellDataViz {\n  /** Data-visualization heading shown in the shell header. */\n  @Prop() heading!: string;\n\n  /** Width token with the matching data-visualization shell min-height. */\n  @Prop() cardWidth: CardShellDataVizWidth = 'md';\n\n  render() {\n    return (\n      <Host\n        class=\"card-shell-data-viz\"\n        style={{\n          '--_card-shell-data-viz-width': CARD_WIDTH_VARS[this.cardWidth],\n          '--_card-shell-data-viz-min-height': CARD_HEIGHT_VARS[this.cardWidth],\n        }}\n      >\n        <header class=\"card-shell-data-viz__header\">\n          <ds-text\n            class=\"card-shell-data-viz__title\"\n            variant=\"text-title-small\"\n            emphasis\n            color=\"primary\"\n            as=\"h2\"\n          >\n            {this.heading}\n          </ds-text>\n          <div class=\"card-shell-data-viz__actions\">\n            <slot name=\"actions\" />\n          </div>\n        </header>\n        <div class=\"card-shell-data-viz__body\">\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n",
+      "type": "registry:ui"
+    }
+  ]
+}

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

@@ -0,0 +1,126 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "card",
+  "title": "Card",
+  "description": "General and settings-compatible card chrome — width + matching min-height tokens, header (title + actions slot), and a flex body that fills leftover space.",
+  "type": "registry:ui",
+  "meta": {
+    "library": "@ds-mo/ui",
+    "distribution": "npm",
+    "storybook": "https://zainadeel.github.io/compomo/?path=/story/card",
+    "source": "src/wc/components/Card/Card.tsx",
+    "intentStatus": "migration-pending",
+    "intent": null,
+    "api": {
+      "props": {
+        "appearance": {
+          "type": "CardAppearance",
+          "resolvedType": "\"default\" | \"editing\"",
+          "attribute": "appearance",
+          "default": "'default'",
+          "required": false,
+          "mutable": false,
+          "description": "Chrome recipe — `editing` applies the settings edit wash."
+        },
+        "cardWidth": {
+          "type": "CardWidth",
+          "resolvedType": "\"lg\" | \"md\" | \"sm\"",
+          "attribute": "card-width",
+          "default": "'md'",
+          "required": false,
+          "mutable": false,
+          "description": "Card width token (`sm` / `md` / `lg`). Also sets host `min-height` to the\nmatching `--dimension-card-height-*` so empty bodies still fill the card."
+        },
+        "heading": {
+          "type": "string",
+          "resolvedType": "string",
+          "attribute": "heading",
+          "required": true,
+          "mutable": false,
+          "description": "Section heading shown in the card header."
+        }
+      },
+      "events": [],
+      "methods": [],
+      "slots": []
+    },
+    "props": {
+      "appearance": {
+        "type": "CardAppearance",
+        "resolvedType": "\"default\" | \"editing\"",
+        "attribute": "appearance",
+        "default": "'default'",
+        "required": false,
+        "mutable": false,
+        "description": "Chrome recipe — `editing` applies the settings edit wash."
+      },
+      "cardWidth": {
+        "type": "CardWidth",
+        "resolvedType": "\"lg\" | \"md\" | \"sm\"",
+        "attribute": "card-width",
+        "default": "'md'",
+        "required": false,
+        "mutable": false,
+        "description": "Card width token (`sm` / `md` / `lg`). Also sets host `min-height` to the\nmatching `--dimension-card-height-*` so empty bodies still fill the card."
+      },
+      "heading": {
+        "type": "string",
+        "resolvedType": "string",
+        "attribute": "heading",
+        "required": true,
+        "mutable": false,
+        "description": "Section heading shown in the card header."
+      }
+    },
+    "events": [],
+    "methods": [],
+    "slots": [],
+    "exports": {
+      "customElement": "ds-card",
+      "react": "DsCard",
+      "angular": "DsCard"
+    },
+    "consumption": {
+      "install": "npm install @ds-mo/ui @ds-mo/tokens @ds-mo/icons",
+      "cssSetup": "import '@ds-mo/tokens';\nimport '@ds-mo/tokens/reset';\nimport '@ds-mo/tokens/globals';",
+      "customElements": {
+        "import": "import '@ds-mo/ui/dist/components/ds-card.js';",
+        "example": "<ds-card></ds-card>"
+      },
+      "react": {
+        "import": "import { DsCard } from '@ds-mo/ui/react';",
+        "example": "<DsCard />"
+      },
+      "angular": {
+        "import": "import { DsCard } from '@ds-mo/ui/angular/ds-card';",
+        "example": "<ds-card></ds-card>"
+      },
+      "peerDependencies": {
+        "required": [
+          "@ds-mo/tokens ^3.1.1",
+          "@ds-mo/icons ^6.2.0"
+        ],
+        "frameworks": "Custom Elements; React 18/19 wrappers; Angular 19-22 standalone adapters."
+      }
+    }
+  },
+  "dependencies": [
+    "@ds-mo/ui",
+    "@ds-mo/tokens"
+  ],
+  "registryDependencies": [
+    "text"
+  ],
+  "files": [
+    {
+      "path": "src/wc/components/Card/Card.css",
+      "content": ":host {\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  width: var(--_card-width);\n  min-height: var(--_card-min-height);\n  max-width: 100%;\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  overflow: hidden;\n}\n\n:host(.card--editing) {\n  background-color: var(--color-background-bold-brand);\n  box-shadow: 0 0 0 var(--dimension-stroke-width-025) var(--color-border-bold-brand);\n}\n\n.card__header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--dimension-space-100);\n  height: var(--dimension-size-600);\n  flex-shrink: 0;\n  padding: var(--dimension-space-100);\n  background-color: var(--color-background-secondary);\n  border-bottom: var(--dimension-stroke-width-012) solid var(--color-border-tertiary);\n  box-sizing: border-box;\n}\n\n:host(.card--editing) .card__header {\n  background-color: transparent;\n  border-bottom-color: transparent;\n}\n\n/* Title owns wrap + label inset (was nested wrap 075 + title 025 before metric-box).\n   Beat Text’s block/inline-box display so flex centering still applies. */\nds-text.card__title {\n  flex: 1 1 auto;\n  min-width: 0;\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  padding: calc(\n    var(--dimension-space-075) + var(--dimension-space-025)\n  );\n  -webkit-user-select: none;\n  user-select: none;\n}\n\n.card__actions {\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  gap: var(--dimension-space-100);\n}\n\n.card__actions:empty {\n  display: none;\n}\n\n.card__body {\n  flex: 1 1 auto;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n  border-radius: 0 0 var(--dimension-radius-025) var(--dimension-radius-025);\n  background-color: var(--color-background-primary);\n  box-sizing: border-box;\n}\n\n:host(.card--editing) .card__body {\n  border-radius: var(--dimension-radius-025);\n}\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/wc/components/Card/Card.tsx",
+      "content": "import { Component, h, Host, Prop } from '@stencil/core';\n\nexport type CardWidth = 'sm' | 'md' | 'lg';\n\n/** Visual chrome recipe — default app surface, or settings edit wash. */\nexport type CardAppearance = 'default' | 'editing';\n\nconst CARD_WIDTH_VARS: Record<CardWidth, string> = {\n  sm: 'var(--dimension-card-width-sm)',\n  md: 'var(--dimension-card-width-md)',\n  lg: 'var(--dimension-card-width-lg)',\n};\n\nconst CARD_HEIGHT_VARS: Record<CardWidth, string> = {\n  sm: 'var(--dimension-card-height-sm)',\n  md: 'var(--dimension-card-height-md)',\n  lg: 'var(--dimension-card-height-lg)',\n};\n\nconst FAINT_BRAND_TITLE_COLOR = 'var(--color-foreground-faint-brand)';\n\n/**\n * Shared card chrome — width + matching min-height tokens, header (title + actions),\n * and a flex body that fills leftover space. Data-visualization cards use their\n * dedicated `ds-card-shell-data-viz` boundary instead.\n */\n@Component({\n  tag: 'ds-card',\n  styleUrl: 'Card.css',\n  scoped: true,\n})\nexport class Card {\n  /** Section heading shown in the card header. */\n  @Prop() heading!: string;\n\n  /**\n   * Card width token (`sm` / `md` / `lg`). Also sets host `min-height` to the\n   * matching `--dimension-card-height-*` so empty bodies still fill the card.\n   */\n  @Prop() cardWidth: CardWidth = 'md';\n\n  /** Chrome recipe — `editing` applies the settings edit wash. */\n  @Prop() appearance: CardAppearance = 'default';\n\n  render() {\n    const editing = this.appearance === 'editing';\n\n    return (\n      <Host\n        class={{\n          card: true,\n          'card--editing': editing,\n        }}\n        style={{\n          '--_card-width': CARD_WIDTH_VARS[this.cardWidth],\n          '--_card-min-height': CARD_HEIGHT_VARS[this.cardWidth],\n        }}\n      >\n        <header class=\"card__header\">\n          <ds-text\n            class=\"card__title\"\n            variant=\"text-title-small\"\n            emphasis\n            color={editing ? FAINT_BRAND_TITLE_COLOR : 'primary'}\n            as=\"h2\"\n          >\n            {this.heading}\n          </ds-text>\n          <div class=\"card__actions\">\n            <slot name=\"actions\" />\n          </div>\n        </header>\n        <div class=\"card__body\">\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n",
+      "type": "registry:ui"
+    }
+  ]
+}