@ds-mo/ui 12.9.0 → 13.1.0

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

@@ -1,213 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "card-data-viz-bar",
-  "title": "CardDataVizBar",
-  "description": "Canonical bar-chart dashboard card with shared data-viz chrome, a filter action, a fill chart region, and an optional static legend.",
-  "type": "registry:ui",
-  "meta": {
-    "library": "@ds-mo/ui",
-    "distribution": "npm",
-    "storybook": "https://zainadeel.github.io/compomo/?path=/story/card-data-viz-bar",
-    "source": "src/wc/components/CardDataVizBar/CardDataVizBar.tsx",
-    "intentStatus": "complete",
-    "intent": {
-      "audience": "specialized",
-      "status": "experimental",
-      "summary": "Canonical bar-chart dashboard card with shared data-viz chrome, a filter action, a fill chart region, and an optional static legend.",
-      "useWhen": [
-        "A dashboard widget needs a regular, stacked, or percentage bar chart in the standard data-viz card.",
-        "A stacked bar chart needs a visible static series key beneath the chart."
-      ],
-      "avoidWhen": [
-        "The visualization needs selectable legend rows or chart-to-legend hover synchronization.",
-        "The product needs supporting metrics or an alternate chart layout beyond the chart and optional legend."
-      ],
-      "alternatives": [
-        {
-          "when": "The bar chart needs a custom layout without card chrome.",
-          "component": "component:ds-chart-bar",
-          "reason": "Compose ChartBar directly in the product-owned layout."
-        },
-        {
-          "when": "The visualization communicates change as continuous lines.",
-          "component": "component:ds-card-data-viz-line",
-          "reason": "CardDataVizLine owns the canonical line-chart card layout."
-        },
-        {
-          "when": "The visualization communicates parts of one total with synchronized slice emphasis.",
-          "component": "component:ds-card-data-viz-donut",
-          "reason": "CardDataVizDonut owns the donut layout and bidirectional hover synchronization."
-        }
-      ],
-      "commonlyComposedWith": [
-        "component:ds-card-shell-data-viz",
-        "component:ds-chart-bar",
-        "component:ds-chart-bar-stacked",
-        "component:ds-chart-legend",
-        "component:ds-button-unfilled"
-      ],
-      "accessibility": [
-        "Provide a concise heading that identifies the measure and meaningful visible labels for every legend entry.",
-        "Keep essential series and value context available textually rather than relying on bar color alone.",
-        "The card disables decorative legend-row hover; genuine legend links retain native link semantics and affordances."
-      ],
-      "states": [
-        "Bar, Line, and Donut cards share the same fill-chart and content-sized-legend body contract so dashboard card geometry remains aligned across chart types.",
-        "The chart region fills the remaining card body while an optional legend remains content-sized.",
-        "The card disables local hover highlighting on a slotted ChartLegend because bar legends are static keys.",
-        "Chart and legend regions render only when their corresponding slots contain content, avoiding empty region spacing.",
-        "The owning product controls data, filtering, loading, empty, and error state; the card emits the filter action only."
-      ],
-      "responsiveBehavior": [
-        "The selected sm, md, or lg shell size controls the card dimensions while the bar chart reflows to the chart region without visually scaling its primitives.",
-        "The horizontal legend wraps complete entries when the available width is constrained.",
-        "The parent dashboard owns card wrapping and breakpoint changes."
-      ],
-      "frameworkCaveats": {
-        "customElements": [
-          "Assign data or series and categories as JavaScript properties, then place the bar chart and optional legend in their named slots."
-        ],
-        "react": [
-          "Keep filter and dataset state in the owner; pass the chart and optional legend with chart and legend slot attributes."
-        ],
-        "angular": [
-          "Keep filter and dataset state in the owner; project the chart and optional legend into the chart and legend slots."
-        ]
-      },
-      "references": [
-        {
-          "label": "Storybook examples",
-          "path": "src/wc/components/CardDataVizBar/CardDataVizBar.stories.ts"
-        }
-      ]
-    },
-    "api": {
-      "props": {
-        "cardWidth": {
-          "type": "CardDataVizBarWidth",
-          "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": "CardDataVizBarWidth",
-        "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-bar",
-      "react": "DsCardDataVizBar",
-      "angular": "DsCardDataVizBar"
-    },
-    "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-bar.js';",
-        "example": "<ds-card-data-viz-bar></ds-card-data-viz-bar>"
-      },
-      "react": {
-        "import": "import { DsCardDataVizBar } from '@ds-mo/ui/react';",
-        "example": "<DsCardDataVizBar />"
-      },
-      "angular": {
-        "import": "import { DsCardDataVizBar } from '@ds-mo/ui/angular/ds-card-data-viz-bar';",
-        "example": "<ds-card-data-viz-bar></ds-card-data-viz-bar>"
-      },
-      "peerDependencies": {
-        "required": [
-          "@ds-mo/tokens ^5.0.0",
-          "@ds-mo/icons ^6.4.0"
-        ],
-        "frameworks": "Custom Elements; React 18/19 wrappers; Angular 19-22 standalone adapters."
-      }
-    }
-  },
-  "dependencies": [
-    "@ds-mo/ui",
-    "@ds-mo/tokens"
-  ],
-  "registryDependencies": [
-    "button-unfilled",
-    "card-shell-data-viz"
-  ],
-  "files": [
-    {
-      "path": "src/wc/components/CardDataVizBar/CardDataVizBar.css",
-      "content": "@import '../../utils/data-viz-card-layout.css';\n\n:host {\n  display: contents;\n}\n",
-      "type": "registry:ui"
-    },
-    {
-      "path": "src/wc/components/CardDataVizBar/CardDataVizBar.tsx",
-      "content": "import { Component, Element, Event, EventEmitter, h, Host, Prop, State } from '@stencil/core';\nimport type { CardShellDataVizWidth } from '../CardShellDataViz/CardShellDataViz';\n\nexport type CardDataVizBarWidth = CardShellDataVizWidth;\n\ntype StaticLegendSlot = HTMLElement & {\n  highlightOnHover?: boolean;\n};\n\n/**\n * Bar-chart data-viz card — dedicated `ds-card-shell-data-viz` chrome with a fill chart\n * region and an optional, content-sized static legend.\n */\n@Component({\n  tag: 'ds-card-data-viz-bar',\n  styleUrl: 'CardDataVizBar.css',\n  scoped: true,\n})\nexport class CardDataVizBar {\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: CardDataVizBarWidth = 'md';\n  @Prop() filterLabel: string = 'Filter';\n\n  /** Emits when the header filter control is activated. */\n  @Event() dsFilterClick!: EventEmitter<void>;\n\n  @State() private hasChartSlot = false;\n  @State() private hasLegendSlot = false;\n\n  componentWillRender() {\n    this.hasChartSlot = !!this.el.querySelector('[slot=\"chart\"]');\n    this.hasLegendSlot = !!this.el.querySelector('[slot=\"legend\"]');\n  }\n\n  componentDidRender() {\n    const legend = this.el.querySelector(\n      'ds-chart-legend[slot=\"legend\"]'\n    ) as StaticLegendSlot | null;\n    if (!legend) return;\n    legend.setAttribute('highlight-on-hover', 'false');\n    if ('highlightOnHover' in legend) legend.highlightOnHover = false;\n  }\n\n  private handleFilterClick = () => {\n    this.dsFilterClick.emit();\n  };\n\n  render() {\n    return (\n      <Host class=\"card-data-viz-bar\">\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=\"ds-data-viz-card-layout\">\n            {this.hasChartSlot && (\n              <div class=\"ds-data-viz-card-chart\">\n                <slot name=\"chart\" />\n              </div>\n            )}\n            {this.hasLegendSlot && (\n              <div class=\"ds-data-viz-card-legend\">\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-data-viz-donut.json

@@ -1,214 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "card-data-viz-donut",
-  "title": "CardDataVizDonut",
-  "description": "Canonical donut-plus-legend dashboard card with shared data-viz chrome, a filter action, fill chart region, content-sized legend, and built-in hover synchronization.",
-  "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": "complete",
-    "intent": {
-      "audience": "specialized",
-      "status": "experimental",
-      "summary": "Canonical donut-plus-legend dashboard card with shared data-viz chrome, a filter action, fill chart region, content-sized legend, and built-in hover synchronization.",
-      "useWhen": [
-        "A dashboard widget needs the standard donut and visible legend composition in one data-viz card.",
-        "Chart slices and legend rows should cross-highlight without application hover wiring.",
-        "The card needs the shared header filter action while the application owns filter state and menu content."
-      ],
-      "avoidWhen": [
-        "The visualization is a bar, line, metric, or custom chart; compose CardShellDataViz directly.",
-        "The product needs a custom legend treatment such as chips, external stat callouts, or selectable filters.",
-        "The surface is a settings section or generic content card."
-      ],
-      "alternatives": [
-        {
-          "when": "The visualization needs shared data-viz chrome without the canonical donut layout.",
-          "component": "component:ds-card-shell-data-viz",
-          "reason": "CardShellDataViz owns only the header, actions, width, and body boundary."
-        },
-        {
-          "when": "A donut and legend need a custom layout without card chrome.",
-          "component": "component:ds-chart-donut",
-          "reason": "Compose the chart and ChartLegend directly and own their layout and hover synchronization."
-        }
-      ],
-      "commonlyComposedWith": [
-        "component:ds-card-shell-data-viz",
-        "component:ds-chart-donut",
-        "component:ds-chart-legend",
-        "component:ds-empty-state",
-        "component:ds-skeleton"
-      ],
-      "accessibility": [
-        "Provide a concise card heading and a localized filter label for the icon-only header action.",
-        "Keep essential values available through the chart and visible legend rather than encoding meaning through slice color alone.",
-        "The application owns meaningful loading, empty, and error status copy when either content region is temporarily replaced or absent."
-      ],
-      "states": [
-        "Bar, Line, and Donut cards share the same fill-chart and content-sized-legend body contract so dashboard card geometry remains aligned across chart types.",
-        "The chart region fills remaining card height while the legend remains content-sized.",
-        "Chart and legend regions render only when their corresponding slots contain content, allowing the owner to substitute loading, empty, or error presentations without dangling region padding.",
-        "Hover synchronization changes highlight only; it never represents selection, filtering, or navigation.",
-        "The filter action emits intent while the parent owns popup content, applied constraints, and data updates."
-      ],
-      "responsiveBehavior": [
-        "Select the token-based card width appropriate to the parent grid; the matching minimum height preserves the chart region.",
-        "The donut measures the chart region and changes radius within its shared size band while token thickness and typography remain fixed.",
-        "The parent dashboard owns wrapping and column changes while the internal chart-over-legend arrangement remains stable."
-      ],
-      "frameworkCaveats": {
-        "customElements": [
-          "Assign chart data and legend items as JavaScript properties and place the components in the chart and legend slots."
-        ],
-        "react": [
-          "Keep filter and dataset state in the owner; the card handles hover synchronization for the canonical slotted pair."
-        ],
-        "angular": [
-          "Keep filter and dataset state in the owner; the card handles hover synchronization for the canonical slotted pair."
-        ]
-      },
-      "references": [
-        {
-          "label": "Storybook examples",
-          "path": "src/wc/components/CardDataVizDonut/CardDataVizDonut.stories.ts"
-        },
-        {
-          "label": "Dashboard review examples",
-          "path": "src/wc/stories/DataViz/OverviewReview.stories.ts"
-        }
-      ]
-    },
-    "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 ^5.0.0",
-          "@ds-mo/icons ^6.4.0"
-        ],
-        "frameworks": "Custom Elements; React 18/19 wrappers; Angular 19-22 standalone adapters."
-      }
-    }
-  },
-  "dependencies": [
-    "@ds-mo/ui",
-    "@ds-mo/tokens"
-  ],
-  "registryDependencies": [
-    "button-unfilled",
-    "card-shell-data-viz"
-  ],
-  "files": [
-    {
-      "path": "src/wc/components/CardDataVizDonut/CardDataVizDonut.css",
-      "content": "@import '../../utils/data-viz-card-layout.css';\n\n:host {\n  display: contents;\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 composition behavior through public props. */\ntype SyncableSlot = HTMLElement & {\n  activeLabel?: string | null;\n  showTooltip?: boolean;\n};\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-shell-data-viz`), 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  componentDidRender() {\n    const chart = this.el.querySelector('[slot=\"chart\"]') as SyncableSlot | null;\n    if (!chart || !('showTooltip' in chart)) return;\n    chart.showTooltip = !this.hasLegendSlot;\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=\"ds-data-viz-card-layout\">\n            {this.hasChartSlot && (\n              <div class=\"ds-data-viz-card-chart ds-data-viz-card-chart--fill\">\n                <slot name=\"chart\" />\n              </div>\n            )}\n            {this.hasLegendSlot && (\n              <div class=\"ds-data-viz-card-legend\">\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-data-viz-line.json

@@ -1,207 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "card-data-viz-line",
-  "title": "CardDataVizLine",
-  "description": "Canonical line-chart dashboard card with shared data-viz chrome, a filter action, fill chart region, and a static horizontal legend.",
-  "type": "registry:ui",
-  "meta": {
-    "library": "@ds-mo/ui",
-    "distribution": "npm",
-    "storybook": "https://zainadeel.github.io/compomo/?path=/story/card-data-viz-line",
-    "source": "src/wc/components/CardDataVizLine/CardDataVizLine.tsx",
-    "intentStatus": "complete",
-    "intent": {
-      "audience": "specialized",
-      "status": "experimental",
-      "summary": "Canonical line-chart dashboard card with shared data-viz chrome, a filter action, fill chart region, and a static horizontal legend.",
-      "useWhen": [
-        "A dashboard widget needs the standard line chart and visible series key in one data-viz card.",
-        "The legend identifies static line series and should not highlight or dim rows on hover."
-      ],
-      "avoidWhen": [
-        "The visualization needs chart-to-legend hover synchronization or selectable series controls.",
-        "The product needs a custom legend treatment, supporting metrics, or an alternate chart layout."
-      ],
-      "alternatives": [
-        {
-          "when": "The line chart and legend need a custom layout without card chrome.",
-          "component": "component:ds-chart-line",
-          "reason": "Compose ChartLine and a static ChartLegend directly in the product-owned layout."
-        },
-        {
-          "when": "The visualization communicates parts of a total with synchronized slice emphasis.",
-          "component": "component:ds-card-data-viz-donut",
-          "reason": "CardDataVizDonut owns the donut layout and bidirectional hover synchronization."
-        }
-      ],
-      "commonlyComposedWith": [
-        "component:ds-card-shell-data-viz",
-        "component:ds-chart-line",
-        "component:ds-chart-legend",
-        "component:ds-button-unfilled"
-      ],
-      "accessibility": [
-        "Provide a concise heading that identifies the trend and meaningful visible labels for every legend entry.",
-        "Keep essential series and value context available textually rather than relying on line color alone.",
-        "The card disables decorative legend-row hover; genuine legend links retain native link semantics and affordances."
-      ],
-      "states": [
-        "Bar, Line, and Donut cards share the same fill-chart and content-sized-legend body contract so dashboard card geometry remains aligned across chart types.",
-        "The chart region fills the remaining card body while the legend remains content-sized.",
-        "The card disables local hover highlighting on a slotted ChartLegend because the line chart is static.",
-        "Chart and legend regions render only when their corresponding slots contain content, avoiding empty region spacing.",
-        "The owning product controls data, filtering, loading, empty, and error state; the card emits the filter action only."
-      ],
-      "responsiveBehavior": [
-        "The selected sm, md, or lg shell size controls the card dimensions while the line chart reflows to the chart region without visually scaling its primitives.",
-        "The horizontal legend wraps complete entries when the available width is constrained.",
-        "The parent dashboard owns card wrapping and breakpoint changes."
-      ],
-      "frameworkCaveats": {
-        "customElements": [
-          "Assign series, categories, and legend items as JavaScript properties, then place the chart and legend in their named slots."
-        ],
-        "react": [
-          "Keep filter and dataset state in the owner; pass the chart and legend with chart and legend slot attributes."
-        ],
-        "angular": [
-          "Keep filter and dataset state in the owner; project the chart and legend into the chart and legend slots."
-        ]
-      },
-      "references": [
-        {
-          "label": "Storybook examples",
-          "path": "src/wc/components/CardDataVizLine/CardDataVizLine.stories.ts"
-        }
-      ]
-    },
-    "api": {
-      "props": {
-        "cardWidth": {
-          "type": "CardDataVizLineWidth",
-          "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": "CardDataVizLineWidth",
-        "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-line",
-      "react": "DsCardDataVizLine",
-      "angular": "DsCardDataVizLine"
-    },
-    "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-line.js';",
-        "example": "<ds-card-data-viz-line></ds-card-data-viz-line>"
-      },
-      "react": {
-        "import": "import { DsCardDataVizLine } from '@ds-mo/ui/react';",
-        "example": "<DsCardDataVizLine />"
-      },
-      "angular": {
-        "import": "import { DsCardDataVizLine } from '@ds-mo/ui/angular/ds-card-data-viz-line';",
-        "example": "<ds-card-data-viz-line></ds-card-data-viz-line>"
-      },
-      "peerDependencies": {
-        "required": [
-          "@ds-mo/tokens ^5.0.0",
-          "@ds-mo/icons ^6.4.0"
-        ],
-        "frameworks": "Custom Elements; React 18/19 wrappers; Angular 19-22 standalone adapters."
-      }
-    }
-  },
-  "dependencies": [
-    "@ds-mo/ui",
-    "@ds-mo/tokens"
-  ],
-  "registryDependencies": [
-    "button-unfilled",
-    "card-shell-data-viz"
-  ],
-  "files": [
-    {
-      "path": "src/wc/components/CardDataVizLine/CardDataVizLine.css",
-      "content": "@import '../../utils/data-viz-card-layout.css';\n\n:host {\n  display: contents;\n}\n",
-      "type": "registry:ui"
-    },
-    {
-      "path": "src/wc/components/CardDataVizLine/CardDataVizLine.tsx",
-      "content": "import { Component, Element, Event, EventEmitter, h, Host, Prop, State } from '@stencil/core';\nimport type { CardShellDataVizWidth } from '../CardShellDataViz/CardShellDataViz';\n\nexport type CardDataVizLineWidth = CardShellDataVizWidth;\n\ntype StaticLegendSlot = HTMLElement & {\n  highlightOnHover?: boolean;\n};\n\n/**\n * Line-chart data-viz card — dedicated `ds-card-shell-data-viz` chrome with a fill chart\n * region and a content-sized, static legend.\n */\n@Component({\n  tag: 'ds-card-data-viz-line',\n  styleUrl: 'CardDataVizLine.css',\n  scoped: true,\n})\nexport class CardDataVizLine {\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: CardDataVizLineWidth = 'md';\n  @Prop() filterLabel: string = 'Filter';\n\n  /** Emits when the header filter control is activated. */\n  @Event() dsFilterClick!: EventEmitter<void>;\n\n  @State() private hasChartSlot = false;\n  @State() private hasLegendSlot = false;\n\n  componentWillRender() {\n    this.hasChartSlot = !!this.el.querySelector('[slot=\"chart\"]');\n    this.hasLegendSlot = !!this.el.querySelector('[slot=\"legend\"]');\n  }\n\n  componentDidRender() {\n    const legend = this.el.querySelector(\n      'ds-chart-legend[slot=\"legend\"]'\n    ) as StaticLegendSlot | null;\n    if (!legend) return;\n    legend.setAttribute('highlight-on-hover', 'false');\n    if ('highlightOnHover' in legend) legend.highlightOnHover = false;\n  }\n\n  private handleFilterClick = () => {\n    this.dsFilterClick.emit();\n  };\n\n  render() {\n    return (\n      <Host class=\"card-data-viz-line\">\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=\"ds-data-viz-card-layout\">\n            {this.hasChartSlot && (\n              <div class=\"ds-data-viz-card-chart\">\n                <slot name=\"chart\" />\n              </div>\n            )}\n            {this.hasLegendSlot && (\n              <div class=\"ds-data-viz-card-legend\">\n                <slot name=\"legend\" />\n              </div>\n            )}\n          </div>\n        </ds-card-shell-data-viz>\n      </Host>\n    );\n  }\n}\n",
-      "type": "registry:ui"
-    }
-  ]
-}