@ds-mo/ui 12.2.0 → 12.4.0

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

@@ -0,0 +1,205 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "breadcrumb",
+  "title": "Breadcrumb",
+  "description": "Compact hierarchical page navigation with native links or application-owned selection, optional current-page semantics, and slash separators.",
+  "type": "registry:ui",
+  "meta": {
+    "library": "@ds-mo/ui",
+    "distribution": "npm",
+    "storybook": "https://zainadeel.github.io/compomo/?path=/story/breadcrumb",
+    "source": "src/wc/components/Breadcrumb/Breadcrumb.tsx",
+    "intentStatus": "complete",
+    "intent": {
+      "audience": "general",
+      "status": "stable",
+      "summary": "Compact hierarchical page navigation with native links or application-owned selection, optional current-page semantics, and slash separators.",
+      "useWhen": [
+        "A page needs to expose its hierarchical ancestors above the current page title.",
+        "Users need to move directly to a broader page in the current route hierarchy.",
+        "BarTitle expanded presentation needs an ancestor path instead of a directional Back button."
+      ],
+      "avoidWhen": [
+        "The navigation represents primary application destinations; use PanelNav or BarNav.",
+        "The choices switch peer views within the current page; use TabGroup or the BarTitle section selector.",
+        "Only a directional return command is needed in compact chrome; use the owning header's Back action.",
+        "The path would repeat the same current-page label already communicated by a nearby h1 without adding useful ancestors."
+      ],
+      "alternatives": [
+        {
+          "when": "The title and breadcrumb belong to responsive page chrome with page-level actions.",
+          "component": "component:ds-bar-title",
+          "reason": "BarTitle composes Breadcrumb in expanded mode and preserves compact Back behavior."
+        },
+        {
+          "when": "A small set of peer content views should remain directly selectable.",
+          "component": "component:ds-tab-group",
+          "reason": "TabGroup communicates peer selection rather than route ancestry."
+        }
+      ],
+      "commonlyComposedWith": [
+        "component:ds-bar-title",
+        "component:ds-text",
+        "component:ds-shell-page"
+      ],
+      "accessibility": [
+        "The component renders a named navigation landmark containing an ordered list.",
+        "Provide href for native navigation or handle dsSelect when the application router owns navigation.",
+        "Mark at most one item current; it renders without interaction and exposes aria-current=page.",
+        "Visible caption labels use secondary foreground and slash separators are decorative and hidden from assistive technology.",
+        "Every interactive item remains keyboard reachable and receives the shared focus ring."
+      ],
+      "states": [
+        "Items with href render native anchors; items without href render buttons and emit the same dsSelect detail.",
+        "Preventing dsSelect cancels native anchor navigation.",
+        "A current item is static text and never emits selection.",
+        "Links have no resting underline and add a quaternary-foreground solid underline on hover; focus remains communicated by the shared focus ring."
+      ],
+      "responsiveBehavior": [
+        "The path stays on one caption line and truncates long labels within the available width.",
+        "Width is protected newest-to-oldest: the oldest ancestor collapses to a literal ellipsis before the next ancestor yields width, and the current location truncates only after every ancestor reaches its minimum.",
+        "A fully collapsed item keeps its complete label available to assistive technology while rendering only the literal ellipsis visually.",
+        "Separators remain visible while labels yield width."
+      ],
+      "frameworkCaveats": {
+        "customElements": [
+          "Assign items as a JavaScript property and replace its array identity when the route changes.",
+          "Use relative or absolute href values for native navigation; omit href when the host router handles dsSelect."
+        ],
+        "react": [
+          "Pass items to DsBreadcrumb and handle onDsSelect when navigation is application-owned."
+        ],
+        "angular": [
+          "Bind items on the standalone DsBreadcrumb adapter and handle dsSelect when navigation is application-owned."
+        ]
+      },
+      "references": [
+        {
+          "label": "Storybook examples",
+          "path": "src/wc/components/Breadcrumb/Breadcrumb.stories.ts"
+        },
+        {
+          "label": "Expanded page-header composition",
+          "path": "src/wc/components/BarTitle/BarTitle.tsx"
+        }
+      ]
+    },
+    "api": {
+      "props": {
+        "ariaLabel": {
+          "type": "string",
+          "resolvedType": "string",
+          "attribute": "aria-label",
+          "default": "'Breadcrumb'",
+          "required": false,
+          "mutable": false,
+          "description": "Accessible name for the breadcrumb navigation landmark."
+        },
+        "items": {
+          "type": "BreadcrumbItem[]",
+          "resolvedType": "BreadcrumbItem[]",
+          "default": "[]",
+          "required": false,
+          "mutable": false,
+          "description": "Ordered path from the broadest ancestor to the nearest page."
+        }
+      },
+      "events": [
+        {
+          "name": "dsSelect",
+          "detail": "BreadcrumbSelectDetail",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true,
+          "description": "Emitted when an interactive breadcrumb item is activated. Prevent to cancel native navigation."
+        }
+      ],
+      "methods": [],
+      "slots": []
+    },
+    "props": {
+      "ariaLabel": {
+        "type": "string",
+        "resolvedType": "string",
+        "attribute": "aria-label",
+        "default": "'Breadcrumb'",
+        "required": false,
+        "mutable": false,
+        "description": "Accessible name for the breadcrumb navigation landmark."
+      },
+      "items": {
+        "type": "BreadcrumbItem[]",
+        "resolvedType": "BreadcrumbItem[]",
+        "default": "[]",
+        "required": false,
+        "mutable": false,
+        "description": "Ordered path from the broadest ancestor to the nearest page."
+      }
+    },
+    "events": [
+      {
+        "name": "dsSelect",
+        "detail": "BreadcrumbSelectDetail",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "description": "Emitted when an interactive breadcrumb item is activated. Prevent to cancel native navigation."
+      }
+    ],
+    "methods": [],
+    "slots": [],
+    "exports": {
+      "customElement": "ds-breadcrumb",
+      "react": "DsBreadcrumb",
+      "angular": "DsBreadcrumb"
+    },
+    "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-breadcrumb.js';",
+        "example": "<ds-breadcrumb></ds-breadcrumb>"
+      },
+      "react": {
+        "import": "import { DsBreadcrumb } from '@ds-mo/ui/react';",
+        "example": "<DsBreadcrumb />"
+      },
+      "angular": {
+        "import": "import { DsBreadcrumb } from '@ds-mo/ui/angular/ds-breadcrumb';",
+        "example": "<ds-breadcrumb></ds-breadcrumb>"
+      },
+      "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: items.",
+      "peerDependencies": {
+        "required": [
+          "@ds-mo/tokens ^3.1.1",
+          "@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": [
+    "text"
+  ],
+  "files": [
+    {
+      "path": "src/wc/components/Breadcrumb/Breadcrumb.css",
+      "content": "@import '../../utils/focus-ring.css';\n\n:host {\n  position: relative;\n  display: block;\n  min-width: 0;\n  box-sizing: border-box;\n}\n\n.breadcrumb {\n  inline-size: 100%;\n  min-width: 0;\n}\n\n.breadcrumb__list {\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  inline-size: 100%;\n  min-width: 0;\n  margin: 0;\n  padding: 0;\n  overflow: hidden;\n  list-style: none;\n}\n\n.breadcrumb__item {\n  display: flex;\n  flex: 0 0 auto;\n  align-items: center;\n  min-width: 0;\n}\n\n.breadcrumb__separator {\n  flex: 0 0 auto;\n  margin-inline: var(--dimension-space-050);\n  user-select: none;\n}\n\n.breadcrumb__link,\n.breadcrumb__current {\n  display: inline-flex;\n  flex: 0 0 auto;\n  min-width: 0;\n  overflow: hidden;\n  padding: 0;\n  border: 0;\n  border-radius: var(--dimension-radius-025);\n  background: transparent;\n  color: var(--color-foreground-secondary);\n  font: inherit;\n  text-decoration: none;\n}\n\n.breadcrumb__link {\n  cursor: pointer;\n}\n\n.breadcrumb__link:hover .breadcrumb__label {\n  text-decoration: underline;\n  text-decoration-color: var(--color-foreground-quaternary);\n  text-underline-offset: var(--dimension-space-025);\n  text-decoration-thickness: var(--dimension-stroke-width-012);\n}\n\n.breadcrumb__label {\n  display: inline-block;\n  inline-size: var(--breadcrumb-label-width, auto);\n  min-width: 0;\n}\n\n.breadcrumb__measurements {\n  position: absolute;\n  inset: 0 auto auto 0;\n  visibility: hidden;\n  pointer-events: none;\n  white-space: nowrap;\n}\n\n.breadcrumb__measurement {\n  display: inline-block;\n  inline-size: max-content;\n  max-inline-size: none;\n}\n\n.breadcrumb__accessible-label {\n  position: absolute;\n  /* stylelint-disable declaration-property-value-disallowed-list -- classic visually-hidden clip pattern */\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n  /* stylelint-enable declaration-property-value-disallowed-list */\n}\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/wc/components/Breadcrumb/Breadcrumb.tsx",
+      "content": "import { Component, Event, EventEmitter, h, Host, Prop, State, Watch } from '@stencil/core';\nimport type { BreadcrumbItem, BreadcrumbSelectDetail } from './breadcrumb-types';\n\n@Component({\n  tag: 'ds-breadcrumb',\n  styleUrl: 'Breadcrumb.css',\n  scoped: true,\n})\nexport class Breadcrumb {\n  /** Ordered path from the broadest ancestor to the nearest page. */\n  @Prop() items: BreadcrumbItem[] = [];\n\n  /** Accessible name for the breadcrumb navigation landmark. */\n  @Prop() ariaLabel: string = 'Breadcrumb';\n\n  /** Emitted when an interactive breadcrumb item is activated. Prevent to cancel native navigation. */\n  @Event({ cancelable: true }) dsSelect!: EventEmitter<BreadcrumbSelectDetail>;\n\n  @State() private labelWidths: number[] = [];\n  @State() private collapsedLabels: boolean[] = [];\n\n  private navElement?: HTMLElement;\n  private listElement?: HTMLOListElement;\n  private measurementElements: HTMLElement[] = [];\n  private separatorElements: HTMLElement[] = [];\n  private ellipsisMeasurement?: HTMLElement;\n  private resizeObserver?: ResizeObserver;\n  private observedElement?: HTMLElement;\n  private measurementFrame?: number;\n\n  componentDidLoad() {\n    this.observeContainer();\n    this.scheduleMeasurement();\n    void document.fonts?.ready.then(() => this.scheduleMeasurement());\n  }\n\n  componentDidRender() {\n    this.observeContainer();\n    this.scheduleMeasurement();\n  }\n\n  disconnectedCallback() {\n    this.resizeObserver?.disconnect();\n    this.observedElement = undefined;\n    if (this.measurementFrame !== undefined) cancelAnimationFrame(this.measurementFrame);\n  }\n\n  @Watch('items')\n  handleItemsChange() {\n    this.labelWidths = [];\n    this.collapsedLabels = [];\n    this.scheduleMeasurement();\n  }\n\n  private observeContainer() {\n    if (!this.navElement || this.observedElement === this.navElement) return;\n    this.resizeObserver ??= new ResizeObserver(() => this.scheduleMeasurement());\n    this.resizeObserver.disconnect();\n    this.resizeObserver.observe(this.navElement);\n    this.observedElement = this.navElement;\n  }\n\n  private scheduleMeasurement() {\n    if (this.measurementFrame !== undefined) return;\n    this.measurementFrame = requestAnimationFrame(() => {\n      this.measurementFrame = undefined;\n      this.measureLabels();\n    });\n  }\n\n  private measureLabels() {\n    if (\n      !this.navElement ||\n      !this.listElement ||\n      !this.ellipsisMeasurement ||\n      this.items.length === 0\n    ) return;\n\n    const naturalWidths = this.items.map(\n      (_, index) => this.measurementElements[index]?.getBoundingClientRect().width ?? 0\n    );\n    const ellipsisWidth = this.ellipsisMeasurement.getBoundingClientRect().width;\n    if (naturalWidths.some(width => width === 0) || ellipsisWidth === 0) return;\n\n    const separatorWidth = this.separatorElements.reduce((total, separator) => {\n      const styles = getComputedStyle(separator);\n      return (\n        total +\n        separator.getBoundingClientRect().width +\n        Number.parseFloat(styles.marginInlineStart) +\n        Number.parseFloat(styles.marginInlineEnd)\n      );\n    }, 0);\n    const availableWidth = Math.max(0, this.navElement.clientWidth - separatorWidth);\n    const minimumWidths = naturalWidths.map(width => Math.min(width, ellipsisWidth));\n    const nextWidths = [...minimumWidths];\n    let remainingWidth = Math.max(\n      0,\n      availableWidth - minimumWidths.reduce((total, width) => total + width, 0)\n    );\n\n    // Protect the current/newest location. Extra width is granted newest-to-oldest,\n    // so ancestors collapse in path order as the available space decreases.\n    for (let index = naturalWidths.length - 1; index >= 0 && remainingWidth > 0; index -= 1) {\n      const extraWidth = Math.min(\n        remainingWidth,\n        naturalWidths[index] - minimumWidths[index]\n      );\n      nextWidths[index] += extraWidth;\n      remainingWidth -= extraWidth;\n    }\n\n    const widthsChanged =\n      nextWidths.length !== this.labelWidths.length ||\n      nextWidths.some(\n        (width, index) => Math.abs(width - (this.labelWidths[index] ?? 0)) > 0.25\n      );\n    const nextCollapsedLabels = nextWidths.map(\n      (width, index) =>\n        naturalWidths[index] > minimumWidths[index] &&\n        Math.abs(width - minimumWidths[index]) <= 0.25\n    );\n    const collapsedLabelsChanged =\n      nextCollapsedLabels.length !== this.collapsedLabels.length ||\n      nextCollapsedLabels.some(\n        (isCollapsed, index) => isCollapsed !== this.collapsedLabels[index]\n      );\n    if (widthsChanged) this.labelWidths = nextWidths;\n    if (collapsedLabelsChanged) this.collapsedLabels = nextCollapsedLabels;\n  }\n\n  private handleSelect(item: BreadcrumbItem, originalEvent: MouseEvent) {\n    const event = this.dsSelect.emit({ item, originalEvent });\n    if (event.defaultPrevented) originalEvent.preventDefault();\n  }\n\n  private renderItem(item: BreadcrumbItem, index: number) {\n    const allocatedWidth = this.labelWidths[index];\n    const isCollapsed = this.collapsedLabels[index] ?? false;\n    const label = (\n      [\n        <ds-text\n          class=\"breadcrumb__label\"\n          as=\"span\"\n          variant=\"text-caption\"\n          color=\"inherit\"\n          lineTruncation={isCollapsed ? 'none' : 1}\n          aria-hidden={isCollapsed ? 'true' : undefined}\n          style={\n            allocatedWidth === undefined\n              ? undefined\n              : { '--breadcrumb-label-width': `${allocatedWidth}px` }\n          }\n        >\n          {isCollapsed ? '…' : item.label}\n        </ds-text>,\n        isCollapsed ? <span class=\"breadcrumb__accessible-label\">{item.label}</span> : null,\n      ]\n    );\n\n    if (item.isCurrent) {\n      return (\n        <span class=\"breadcrumb__current\" aria-current=\"page\" aria-label={item.ariaLabel}>\n          {label}\n        </span>\n      );\n    }\n\n    if (item.href) {\n      return (\n        <a\n          class=\"breadcrumb__link ds-focus-ring\"\n          href={item.href}\n          aria-label={item.ariaLabel}\n          onClick={(event: MouseEvent) => this.handleSelect(item, event)}\n        >\n          {label}\n        </a>\n      );\n    }\n\n    return (\n      <button\n        class=\"breadcrumb__link ds-focus-ring\"\n        type=\"button\"\n        aria-label={item.ariaLabel}\n        onClick={(event: MouseEvent) => this.handleSelect(item, event)}\n      >\n        {label}\n      </button>\n    );\n  }\n\n  render() {\n    if (this.items.length === 0) return null;\n\n    this.measurementElements = [];\n    this.separatorElements = [];\n\n    return (\n      <Host>\n        <nav\n          class=\"breadcrumb\"\n          aria-label={this.ariaLabel}\n          ref={element => {\n            this.navElement = element;\n          }}\n        >\n          <div class=\"breadcrumb__measurements\" aria-hidden=\"true\">\n            {this.items.map((item, index) => (\n              <ds-text\n                class=\"breadcrumb__measurement\"\n                as=\"span\"\n                variant=\"text-caption\"\n                color=\"inherit\"\n                ref={element => {\n                  if (element) this.measurementElements[index] = element;\n                }}\n              >\n                {item.label}\n              </ds-text>\n            ))}\n            <ds-text\n              class=\"breadcrumb__measurement\"\n              as=\"span\"\n              variant=\"text-caption\"\n              color=\"inherit\"\n              ref={element => {\n                this.ellipsisMeasurement = element;\n              }}\n            >\n              …\n            </ds-text>\n          </div>\n          <ol\n            class=\"breadcrumb__list\"\n            ref={element => {\n              this.listElement = element;\n            }}\n          >\n            {this.items.map((item, index) => (\n              <li class=\"breadcrumb__item\" key={item.id}>\n                {index > 0 ? (\n                  <ds-text\n                    class=\"breadcrumb__separator\"\n                    as=\"span\"\n                    variant=\"text-caption\"\n                    color=\"tertiary\"\n                    aria-hidden=\"true\"\n                    ref={element => {\n                      if (element) this.separatorElements[index - 1] = element;\n                    }}\n                  >\n                    /\n                  </ds-text>\n                ) : null}\n                {this.renderItem(item, index)}\n              </li>\n            ))}\n          </ol>\n        </nav>\n      </Host>\n    );\n  }\n}\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/wc/components/Breadcrumb/breadcrumb-types.ts",
+      "content": "export interface BreadcrumbItem {\n  /** Stable value returned from dsSelect. */\n  id: string;\n  /** Visible caption label. */\n  label: string;\n  /** Optional accessible name when the visible label is not destination-specific enough. */\n  ariaLabel?: string;\n  /** Native destination. Omit when the route owner handles dsSelect. */\n  href?: string;\n  /** Marks this item as the current page and removes its interaction. */\n  isCurrent?: boolean;\n}\n\nexport interface BreadcrumbSelectDetail {\n  item: BreadcrumbItem;\n  originalEvent: MouseEvent;\n}\n",
+      "type": "registry:ui"
+    }
+  ]
+}

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

@@ -0,0 +1,212 @@
+{
+  "$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": [
+        "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 shrinks within its chart region.",
+        "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 ^3.1.1",
+          "@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": ":host {\n  display: contents;\n}\n\n.card-data-viz-bar__layout {\n  display: flex;\n  flex: 1 1 auto;\n  flex-direction: column;\n  box-sizing: border-box;\n  height: 100%;\n  min-height: 0;\n  gap: var(--dimension-space-200);\n}\n\n.card-data-viz-bar__chart-region {\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-bar__chart-region > * {\n  width: 100%;\n  min-width: 0;\n  max-width: 100%;\n}\n\n.card-data-viz-bar__legend-region {\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",
+      "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=\"card-data-viz-bar__layout\">\n            {this.hasChartSlot && (\n              <div class=\"card-data-viz-bar__chart-region\">\n                <slot name=\"chart\" />\n              </div>\n            )}\n            {this.hasLegendSlot && (\n              <div class=\"card-data-viz-bar__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-data-viz-line.json

@@ -0,0 +1,206 @@
+{
+  "$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": [
+        "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 shrinks within its chart region.",
+        "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 ^3.1.1",
+          "@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": ":host {\n  display: contents;\n}\n\n.card-data-viz-line__layout {\n  display: flex;\n  flex: 1 1 auto;\n  flex-direction: column;\n  box-sizing: border-box;\n  height: 100%;\n  min-height: 0;\n  gap: var(--dimension-space-200);\n}\n\n.card-data-viz-line__chart-region {\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-line__chart-region > * {\n  width: 100%;\n  min-width: 0;\n  max-width: 100%;\n}\n\n.card-data-viz-line__legend-region {\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",
+      "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=\"card-data-viz-line__layout\">\n            {this.hasChartSlot && (\n              <div class=\"card-data-viz-line__chart-region\">\n                <slot name=\"chart\" />\n              </div>\n            )}\n            {this.hasLegendSlot && (\n              <div class=\"card-data-viz-line__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"
+    }
+  ]
+}