@ds-mo/ui 13.6.0 → 13.7.0

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

@@ -1,241 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "card-data-viz",
-  "title": "CardDataViz",
-  "description": "Standard data-visualization card chrome with variant-owned chart and legend composition.",
-  "type": "registry:ui",
-  "meta": {
-    "library": "@ds-mo/ui",
-    "distribution": "npm",
-    "storybook": "https://zainadeel.github.io/compomo/?path=/story/card-data-viz",
-    "source": "src/wc/components/CardDataViz/CardDataViz.tsx",
-    "intentStatus": "complete",
-    "intent": {
-      "audience": "specialized",
-      "status": "experimental",
-      "summary": "Standard data-visualization card chrome with variant-owned chart and legend composition.",
-      "useWhen": [
-        "A chart, legend, metric visualization, or custom data-viz composition needs standard card chrome.",
-        "Bar and line legends should remain static, or a donut and legend should cross-highlight without redundant donut tooltips.",
-        "A data-viz card needs a visible heading, optional filter action, and application-owned chart data."
-      ],
-      "avoidWhen": [
-        "The card contains editable settings; use CardSetting.",
-        "The surface contains ordinary non-visualization content.",
-        "The application needs to replace the card chrome rather than compose its chart and actions."
-      ],
-      "alternatives": [
-        {
-          "when": "The surface contains editable settings.",
-          "component": "component:ds-card-setting",
-          "reason": "CardSetting owns the controlled settings-section workflow."
-        }
-      ],
-      "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; the component renders it as a section heading.",
-        "Slotted actions must provide accessible names and controlled-state semantics.",
-        "Charts retain their own image names and data summaries.",
-        "A visible donut legend owns persistent labels and values, so donut mode suppresses the redundant slice tooltip."
-      ],
-      "states": [
-        "Custom mode provides flexible body chrome and does not mutate chart or legend interaction.",
-        "Bar and line modes keep a slotted legend static by disabling hover emphasis.",
-        "Donut mode synchronizes active labels between chart and legend and shows chart tooltips only when no legend is present.",
-        "showFilter adds the standard filter action and emits dsFilterClick without owning filter state."
-      ],
-      "responsiveBehavior": [
-        "The sm, md, or lg width sets a matching token-based minimum height and remains constrained by its parent.",
-        "The body allocates remaining height to the chart while legends retain content height.",
-        "Parent layouts own wrapping, stacking, and breakpoint-dependent card width."
-      ],
-      "frameworkCaveats": {
-        "customElements": [
-          "Set variant to bar, line, or donut when the component should manage legend interaction; slot chart, legend, actions, and supporting content by name."
-        ],
-        "react": [
-          "Keep chart data in React and pass chart, legend, and action elements through named slots."
-        ],
-        "angular": [
-          "Keep chart data in Angular and project chart, legend, and action elements through named slots."
-        ]
-      },
-      "references": [
-        {
-          "label": "Storybook examples",
-          "path": "src/wc/components/CardDataViz/CardDataViz.stories.ts"
-        }
-      ]
-    },
-    "api": {
-      "props": {
-        "cardWidth": {
-          "type": "CardDataVizWidth",
-          "resolvedType": "\"lg\" | \"md\" | \"sm\"",
-          "attribute": "card-width",
-          "default": "'md'",
-          "required": false,
-          "mutable": false,
-          "description": "Width token with the matching data-visualization card 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": "Data-visualization heading shown in the card header."
-        },
-        "showFilter": {
-          "type": "boolean",
-          "resolvedType": "boolean",
-          "attribute": "show-filter",
-          "default": "false",
-          "required": false,
-          "mutable": false,
-          "description": "Renders the standard filter action before custom actions."
-        },
-        "variant": {
-          "type": "CardDataVizVariant",
-          "resolvedType": "\"bar\" | \"custom\" | \"donut\" | \"line\"",
-          "attribute": "variant",
-          "default": "'custom'",
-          "required": false,
-          "mutable": false,
-          "description": "Chart composition behavior."
-        }
-      },
-      "events": [
-        {
-          "name": "dsFilterClick",
-          "detail": "void",
-          "bubbles": true,
-          "cancelable": true,
-          "composed": true,
-          "description": "Emits when the standard header filter control is activated."
-        }
-      ],
-      "methods": [],
-      "slots": []
-    },
-    "props": {
-      "cardWidth": {
-        "type": "CardDataVizWidth",
-        "resolvedType": "\"lg\" | \"md\" | \"sm\"",
-        "attribute": "card-width",
-        "default": "'md'",
-        "required": false,
-        "mutable": false,
-        "description": "Width token with the matching data-visualization card 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": "Data-visualization heading shown in the card header."
-      },
-      "showFilter": {
-        "type": "boolean",
-        "resolvedType": "boolean",
-        "attribute": "show-filter",
-        "default": "false",
-        "required": false,
-        "mutable": false,
-        "description": "Renders the standard filter action before custom actions."
-      },
-      "variant": {
-        "type": "CardDataVizVariant",
-        "resolvedType": "\"bar\" | \"custom\" | \"donut\" | \"line\"",
-        "attribute": "variant",
-        "default": "'custom'",
-        "required": false,
-        "mutable": false,
-        "description": "Chart composition behavior."
-      }
-    },
-    "events": [
-      {
-        "name": "dsFilterClick",
-        "detail": "void",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "description": "Emits when the standard header filter control is activated."
-      }
-    ],
-    "methods": [],
-    "slots": [],
-    "exports": {
-      "customElement": "ds-card-data-viz",
-      "react": "DsCardDataViz",
-      "angular": "DsCardDataViz"
-    },
-    "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.js';",
-        "example": "<ds-card-data-viz></ds-card-data-viz>"
-      },
-      "react": {
-        "import": "import { DsCardDataViz } from '@ds-mo/ui/react';",
-        "example": "<DsCardDataViz />"
-      },
-      "angular": {
-        "import": "import { DsCardDataViz } from '@ds-mo/ui/angular/ds-card-data-viz';",
-        "example": "<ds-card-data-viz></ds-card-data-viz>"
-      },
-      "peerDependencies": {
-        "required": [
-          "@ds-mo/tokens ^5.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",
-    "text"
-  ],
-  "files": [
-    {
-      "path": "src/wc/components/CardDataViz/CardDataViz.css",
-      "content": "@import '../../utils/chrome-layout.css';\n@import '../../utils/forced-colors.css';\n\n:host {\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  width: var(--_card-data-viz-width);\n  min-height: var(--_card-data-viz-min-height);\n  max-width: 100%;\n  overflow: hidden;\n  border: none;\n  border-radius: var(--dimension-radius-025);\n  background-color: var(--color-background-primary);\n  box-shadow: 0 0 0 var(--dimension-stroke-width-012) var(--color-border-tertiary);\n}\n\n.card-data-viz__header {\n  flex-shrink: 0;\n  justify-content: space-between;\n  height: var(--dimension-size-600);\n  border-bottom: var(--dimension-stroke-width-012) solid var(--color-border-tertiary);\n  background-color: var(--color-background-secondary);\n}\n\nds-text.card-data-viz__title {\n  display: flex;\n  flex: 1 1 auto;\n  align-items: center;\n  box-sizing: border-box;\n  min-width: 0;\n  padding: calc(var(--dimension-space-075) + var(--dimension-space-025));\n  -webkit-user-select: none;\n  user-select: none;\n}\n\n.card-data-viz__actions {\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  gap: var(--dimension-space-100);\n}\n\n.card-data-viz__actions:empty {\n  display: none;\n}\n\n.card-data-viz__body,\n.card-data-viz__layout {\n  display: flex;\n  flex: 1 1 auto;\n  flex-direction: column;\n  box-sizing: border-box;\n  min-height: 0;\n}\n\n.card-data-viz__body {\n  border-radius: 0 0 var(--dimension-radius-025) var(--dimension-radius-025);\n  background-color: var(--color-background-primary);\n}\n\n.card-data-viz__layout {\n  height: 100%;\n  gap: var(--dimension-space-200);\n}\n\n.card-data-viz__chart {\n  display: grid;\n  flex: 1 1 auto;\n  align-items: center;\n  box-sizing: border-box;\n  min-height: 0;\n  padding: var(--dimension-space-400) var(--dimension-space-400) 0\n    var(--dimension-space-400);\n}\n\n.card-data-viz__chart > * {\n  width: 100%;\n  height: 100%;\n  min-width: 0;\n  min-height: 0;\n  max-width: 100%;\n  max-height: 100%;\n}\n\n.card-data-viz__chart--fill > * {\n  height: 100%;\n  min-height: 0;\n  max-height: 100%;\n}\n\n.card-data-viz__legend {\n  flex: 0 0 auto;\n  box-sizing: border-box;\n  padding: 0 var(--dimension-space-100) var(--dimension-space-100)\n    var(--dimension-space-100);\n}\n\n@media (forced-colors: active) {\n  :host {\n    box-shadow: none;\n    outline: var(--dimension-stroke-width-012) solid var(--ds-forced-color-content);\n    outline-offset: calc(-1 * var(--dimension-stroke-width-012));\n  }\n}\n",
-      "type": "registry:ui"
-    },
-    {
-      "path": "src/wc/components/CardDataViz/CardDataViz.tsx",
-      "content": "import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  State,\n} from '@stencil/core';\n\nexport type CardDataVizWidth = 'sm' | 'md' | 'lg';\nexport type CardDataVizVariant = 'custom' | 'bar' | 'line' | 'donut';\n\ntype HoveredDatum = { label: string } | null;\n\ntype ChartSlot = HTMLElement & {\n  activeLabel?: string | null;\n  showTooltip?: boolean;\n};\n\ntype LegendSlot = HTMLElement & {\n  activeLabel?: string | null;\n  highlightOnHover?: boolean;\n};\n\nconst CARD_WIDTH_VARS: Record<CardDataVizWidth, 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<CardDataVizWidth, 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 * Standard data-visualization card chrome and composition. The variant owns\n * only the chart/legend relationship; applications continue to own data.\n */\n@Component({\n  tag: 'ds-card-data-viz',\n  styleUrl: 'CardDataViz.css',\n  scoped: true,\n})\nexport class CardDataViz {\n  @Element() el!: HTMLElement;\n\n  /** Data-visualization heading shown in the card header. */\n  @Prop() heading!: string;\n  /** Chart composition behavior. */\n  @Prop() variant: CardDataVizVariant = 'custom';\n  /** Width token with the matching data-visualization card min-height. */\n  @Prop() cardWidth: CardDataVizWidth = 'md';\n  /** Renders the standard filter action before custom actions. */\n  @Prop() showFilter: boolean = false;\n  @Prop() filterLabel: string = 'Filter';\n\n  /** Emits when the standard 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  componentDidLoad() {\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 ChartSlot | null;\n    const legend = this.el.querySelector(\n      'ds-chart-legend[slot=\"legend\"]'\n    ) as LegendSlot | null;\n\n    if (this.variant === 'donut') {\n      if (chart && 'showTooltip' in chart) {\n        chart.showTooltip = !this.hasLegendSlot;\n      }\n      return;\n    }\n\n    if (\n      (this.variant === 'bar' || this.variant === 'line') &&\n      legend\n    ) {\n      legend.setAttribute('highlight-on-hover', 'false');\n      if ('highlightOnHover' in legend) legend.highlightOnHover = false;\n    }\n  }\n\n  disconnectedCallback() {\n    this.el.removeEventListener('dsSliceHover', this.handleChartHover);\n    this.el.removeEventListener('dsItemHover', this.handleLegendHover);\n  }\n\n  private handleChartHover = (event: Event) => {\n    if (this.variant !== 'donut') return;\n    const legend = this.el.querySelector('[slot=\"legend\"]') as LegendSlot | null;\n    if (!legend || !('activeLabel' in legend)) return;\n    legend.activeLabel =\n      (event as CustomEvent<HoveredDatum>).detail?.label ?? null;\n  };\n\n  private handleLegendHover = (event: Event) => {\n    if (this.variant !== 'donut') return;\n    const chart = this.el.querySelector('[slot=\"chart\"]') as ChartSlot | null;\n    if (!chart || !('activeLabel' in chart)) return;\n    chart.activeLabel =\n      (event as CustomEvent<HoveredDatum>).detail?.label ?? null;\n  };\n\n  private handleFilterClick = () => {\n    this.dsFilterClick.emit();\n  };\n\n  render() {\n    const usesChartLayout = this.variant !== 'custom' || this.hasChartSlot;\n    return (\n      <Host\n        class={{\n          'card-data-viz': true,\n          [`card-data-viz--${this.variant}`]: true,\n        }}\n        style={{\n          '--_card-data-viz-width': CARD_WIDTH_VARS[this.cardWidth],\n          '--_card-data-viz-min-height': CARD_HEIGHT_VARS[this.cardWidth],\n        }}\n      >\n        <header class=\"card-data-viz__header ds-chrome-row ds-chrome-space--md\">\n          <ds-text\n            class=\"card-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-data-viz__actions\">\n            {this.showFilter ? (\n              <ds-button-unfilled\n                variant=\"icon\"\n                type=\"button\"\n                icon=\"Filters\"\n                aria-label={this.filterLabel}\n                onDsClick={this.handleFilterClick}\n              />\n            ) : null}\n            <slot name=\"actions\" />\n          </div>\n        </header>\n        <div class=\"card-data-viz__body\">\n          {usesChartLayout ? (\n            <div class=\"card-data-viz__layout\">\n              {this.hasChartSlot ? (\n                <div\n                  class={{\n                    'card-data-viz__chart': true,\n                    'card-data-viz__chart--fill': this.variant === 'donut',\n                  }}\n                >\n                  <slot name=\"chart\" />\n                </div>\n              ) : null}\n              {this.hasLegendSlot ? (\n                <div class=\"card-data-viz__legend\">\n                  <slot name=\"legend\" />\n                </div>\n              ) : null}\n              <slot />\n            </div>\n          ) : (\n            <slot />\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n",
-      "type": "registry:ui"
-    }
-  ]
-}

package/dist/mcp-data/registry/chart-bar.json

@@ -1,245 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "chart-bar",
-  "title": "ChartBar",
-  "description": "Bar chart for single-series magnitude, additive stacked totals, or normalized 0–100% composition across categories.",
-  "type": "registry:ui",
-  "meta": {
-    "library": "@ds-mo/ui",
-    "distribution": "npm",
-    "storybook": "https://zainadeel.github.io/compomo/?path=/story/chart-bar",
-    "source": "src/wc/components/ChartBar/ChartBar.tsx",
-    "intentStatus": "complete",
-    "intent": {
-      "audience": "specialized",
-      "status": "experimental",
-      "summary": "Bar chart for single-series magnitude, additive stacked totals, or normalized 0–100% composition across categories.",
-      "useWhen": [
-        "Users need to compare one numeric measure across a small set of categories.",
-        "Values are grouped into ordered time buckets such as hours, days, weeks, or months and equal visual spacing is appropriate.",
-        "A data-viz card needs a compact magnitude comparison rather than a continuous trend.",
-        "Several consistent series contribute to each category total or its normalized composition."
-      ],
-      "avoidWhen": [
-        "Timestamp positions must reflect irregular elapsed time; pre-bucket the data or use a future continuous time-scale chart.",
-        "The visualization needs grouped bars or precise comparison of each individual series across categories.",
-        "The interaction requires selection, drill-down, brushing, or zoom.",
-        "The data communicates a part-to-whole relationship."
-      ],
-      "alternatives": [
-        {
-          "when": "Users need to follow one or more trends across ordered categories.",
-          "component": "component:ds-chart-line",
-          "reason": "ChartLine connects ordered observations and supports multiple named series."
-        },
-        {
-          "when": "The data communicates parts of a total.",
-          "component": "component:ds-chart-donut",
-          "reason": "ChartDonut provides the part-to-whole composition and center aggregate."
-        }
-      ],
-      "commonlyComposedWith": [
-        "component:ds-chart-legend",
-        "component:ds-card-data-viz",
-        "component:ds-tooltip-data-viz"
-      ],
-      "accessibility": [
-        "Keep category labels concise and provide an adjacent textual summary when exact values are critical to completing a task.",
-        "Do not rely on bar color alone to communicate category meaning.",
-        "A future interactive tooltip must supplement rather than replace the chart's accessible value representation."
-      ],
-      "states": [
-        "The chart is static without hover, selection, loading, or empty-state policy.",
-        "Single mode reads data. Stacked and percentage modes read aligned series and categories.",
-        "Stacked mode preserves raw totals; percentage mode normalizes every non-empty category to 100%.",
-        "An empty dataset renders no bars; the owning card or product supplies meaningful empty-state messaging.",
-        "Bars use 2px top corner radii while the lower corners touching the zero axis remain square.",
-        "Use one consistent bar color across time buckets when every bar is the same measure at a different interval; categorical color changes are for genuinely distinct categories.",
-        "Authored datum colors override the shared categorical palette."
-      ],
-      "responsiveBehavior": [
-        "Width and height provide the standalone intrinsic viewport; container constraints are measured and reflow the plot across the available pixels.",
-        "Responsive layout changes bar positions and plot extents without scaling SVG text, strokes, corner radii, or margins.",
-        "Limit or pre-format long category labels so they remain legible at the chosen width.",
-        "Time labels remain ordered, pre-formatted buckets with equal spacing rather than raw continuous timestamps."
-      ],
-      "frameworkCaveats": {
-        "customElements": [
-          "Assign data, series, and categories as JavaScript properties; arrays are not supported as HTML attributes."
-        ],
-        "react": [
-          "Pass stable data or series/category arrays; width and height provide standalone intrinsic dimensions while constrained containers reflow automatically."
-        ],
-        "angular": [
-          "Bind data or series/categories as properties; width and height provide standalone intrinsic dimensions while constrained containers reflow automatically."
-        ]
-      },
-      "references": [
-        {
-          "label": "Storybook examples",
-          "path": "src/wc/components/ChartBar/ChartBar.stories.ts"
-        }
-      ]
-    },
-    "api": {
-      "props": {
-        "categories": {
-          "type": "string[]",
-          "resolvedType": "string[]",
-          "default": "[]",
-          "required": false,
-          "mutable": false,
-          "description": "X-axis labels for stacked and percentage variants. Set as a JS property."
-        },
-        "data": {
-          "type": "ChartDatum[]",
-          "resolvedType": "ChartDatum[]",
-          "default": "[]",
-          "required": false,
-          "mutable": false,
-          "description": "Bars to render. Set as a JS property (not an HTML attribute)."
-        },
-        "height": {
-          "type": "number",
-          "resolvedType": "number",
-          "attribute": "height",
-          "default": "240",
-          "required": false,
-          "mutable": false,
-          "description": "Standalone intrinsic height. Container constraints reflow the plot at rendered pixel size."
-        },
-        "series": {
-          "type": "ChartSeries[]",
-          "resolvedType": "ChartSeries[]",
-          "default": "[]",
-          "required": false,
-          "mutable": false,
-          "description": "Ordered stack series for stacked and percentage variants. Set as a JS property."
-        },
-        "variant": {
-          "type": "ChartBarVariant",
-          "resolvedType": "\"percentage\" | \"single\" | \"stacked\"",
-          "attribute": "variant",
-          "default": "'single'",
-          "required": false,
-          "mutable": false,
-          "description": "Rendering model. Single uses `data`; stacked and percentage use `series` and `categories`."
-        },
-        "width": {
-          "type": "number",
-          "resolvedType": "number",
-          "attribute": "width",
-          "default": "480",
-          "required": false,
-          "mutable": false,
-          "description": "Standalone intrinsic width. Container constraints reflow the plot at rendered pixel size."
-        }
-      },
-      "events": [],
-      "methods": [],
-      "slots": []
-    },
-    "props": {
-      "categories": {
-        "type": "string[]",
-        "resolvedType": "string[]",
-        "default": "[]",
-        "required": false,
-        "mutable": false,
-        "description": "X-axis labels for stacked and percentage variants. Set as a JS property."
-      },
-      "data": {
-        "type": "ChartDatum[]",
-        "resolvedType": "ChartDatum[]",
-        "default": "[]",
-        "required": false,
-        "mutable": false,
-        "description": "Bars to render. Set as a JS property (not an HTML attribute)."
-      },
-      "height": {
-        "type": "number",
-        "resolvedType": "number",
-        "attribute": "height",
-        "default": "240",
-        "required": false,
-        "mutable": false,
-        "description": "Standalone intrinsic height. Container constraints reflow the plot at rendered pixel size."
-      },
-      "series": {
-        "type": "ChartSeries[]",
-        "resolvedType": "ChartSeries[]",
-        "default": "[]",
-        "required": false,
-        "mutable": false,
-        "description": "Ordered stack series for stacked and percentage variants. Set as a JS property."
-      },
-      "variant": {
-        "type": "ChartBarVariant",
-        "resolvedType": "\"percentage\" | \"single\" | \"stacked\"",
-        "attribute": "variant",
-        "default": "'single'",
-        "required": false,
-        "mutable": false,
-        "description": "Rendering model. Single uses `data`; stacked and percentage use `series` and `categories`."
-      },
-      "width": {
-        "type": "number",
-        "resolvedType": "number",
-        "attribute": "width",
-        "default": "480",
-        "required": false,
-        "mutable": false,
-        "description": "Standalone intrinsic width. Container constraints reflow the plot at rendered pixel size."
-      }
-    },
-    "events": [],
-    "methods": [],
-    "slots": [],
-    "exports": {
-      "customElement": "ds-chart-bar",
-      "react": "DsChartBar",
-      "angular": "DsChartBar"
-    },
-    "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-chart-bar.js';",
-        "example": "<ds-chart-bar></ds-chart-bar>"
-      },
-      "react": {
-        "import": "import { DsChartBar } from '@ds-mo/ui/react';",
-        "example": "<DsChartBar />"
-      },
-      "angular": {
-        "import": "import { DsChartBar } from '@ds-mo/ui/angular/ds-chart-bar';",
-        "example": "<ds-chart-bar></ds-chart-bar>"
-      },
-      "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: categories, data, series.",
-      "peerDependencies": {
-        "required": [
-          "@ds-mo/tokens ^5.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": [],
-  "files": [
-    {
-      "path": "src/wc/components/ChartBar/ChartBar.css",
-      "content": "@import '../../utils/forced-colors.css';\n\n:host {\n  display: inline-block;\n  max-width: 100%;\n  font-family: var(--typography-font-family);\n}\n\n.chart-bar__svg {\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n\n.chart-bar__gridline {\n  stroke: var(--color-border-tertiary);\n  stroke-width: var(--dimension-stroke-width-012);\n  vector-effect: non-scaling-stroke;\n}\n\n/* Matches ds-text text-caption regular (SVG cannot host ds-text). */\n.chart-bar__axis-label {\n  fill: var(--color-foreground-secondary);\n  font-family: var(--typography-font-family);\n  font-size: var(--typography-fontsize-xs);\n  font-weight: var(--typography-weight-medium);\n  letter-spacing: var(--typography-letterspacing-positive);\n  text-transform: uppercase;\n}\n\n.chart-bar__bar--rounded {\n  rx: var(--dimension-radius-025);\n}\n\n.chart-bar__segment-shape--rounded {\n  rx: var(--dimension-radius-025);\n}\n\n.chart-bar__segment-separator {\n  stroke: var(--color-background-primary);\n  stroke-width: var(--dimension-stroke-width-012);\n  stroke-linecap: butt;\n  vector-effect: non-scaling-stroke;\n}\n\n@media (forced-colors: active) {\n  .chart-bar__bar,\n  .chart-bar__segment-shape,\n  .chart-bar__segment-square-base {\n    forced-color-adjust: none;\n  }\n\n  .chart-bar__segment-separator {\n    stroke: var(--ds-forced-color-surface);\n  }\n}\n",
-      "type": "registry:ui"
-    },
-    {
-      "path": "src/wc/components/ChartBar/ChartBar.tsx",
-      "content": "import { Component, Prop, State, Watch, h, Host } from '@stencil/core';\nimport { scaleBand, scaleLinear } from 'd3-scale';\nimport { max } from 'd3-array';\nimport { categoryColor } from '../../utils/chart-colors';\nimport { formatPercentage } from '../../utils';\nimport { resolveCartesianChartLayout } from '../../utils/cartesian-chart-layout';\nimport {\n  ChartViewportController,\n  type ChartViewportSize,\n} from '../../utils/chart-viewport-controller';\nimport type { ChartDatum, ChartSeries } from '../../utils/chart-types';\n\nexport type ChartBarVariant = 'single' | 'stacked' | 'percentage';\n\nconst PERCENTAGE_TICKS = [0, 25, 50, 75, 100];\n\n@Component({\n  tag: 'ds-chart-bar',\n  styleUrl: 'ChartBar.css',\n  scoped: true,\n})\nexport class ChartBar {\n  /** Rendering model. Single uses `data`; stacked and percentage use `series` and `categories`. */\n  @Prop() variant: ChartBarVariant = 'single';\n  /** Bars to render. Set as a JS property (not an HTML attribute). */\n  @Prop() data: ChartDatum[] = [];\n  /** Ordered stack series for stacked and percentage variants. Set as a JS property. */\n  @Prop() series: ChartSeries[] = [];\n  /** X-axis labels for stacked and percentage variants. Set as a JS property. */\n  @Prop() categories: string[] = [];\n  /** Standalone intrinsic width. Container constraints reflow the plot at rendered pixel size. */\n  @Prop() width: number = 480;\n  /** Standalone intrinsic height. Container constraints reflow the plot at rendered pixel size. */\n  @Prop() height: number = 240;\n\n  @State() private viewport: ChartViewportSize | undefined;\n\n  private viewportController: ChartViewportController | null = null;\n  private svgEl: SVGElement | null = null;\n\n  componentDidLoad() {\n    this.connectViewportController();\n  }\n\n  connectedCallback() {\n    if (this.svgEl && !this.viewportController) this.connectViewportController();\n  }\n\n  componentDidRender() {\n    if (!this.viewportController) this.connectViewportController();\n  }\n\n  private connectViewportController() {\n    if (!this.svgEl) return;\n    this.viewportController = new ChartViewportController(this.svgEl, viewport => {\n      if (\n        viewport.width !== this.viewport?.width ||\n        viewport.height !== this.viewport?.height\n      ) {\n        this.viewport = viewport;\n      }\n    });\n    this.viewportController.connect();\n  }\n\n  disconnectedCallback() {\n    this.viewportController?.disconnect();\n    this.viewportController = null;\n  }\n\n  @Watch('width')\n  @Watch('height')\n  handleIntrinsicSizeChange() {\n    this.viewport = undefined;\n    if (typeof requestAnimationFrame === 'function') {\n      requestAnimationFrame(() => this.viewportController?.measure());\n    }\n  }\n\n  private renderSingle(\n    innerWidth: number,\n    innerHeight: number,\n    axisLabelGap: number,\n    categoryLabelOffset: number\n  ) {\n    const yMax = max(this.data, d => d.value) ?? 0;\n    const xScale = scaleBand()\n      .domain(this.data.map(d => d.label))\n      .range([0, innerWidth])\n      .padding(0.35);\n    const yScale = scaleLinear()\n      .domain([0, yMax || 1])\n      .range([innerHeight, 0])\n      .nice();\n    const yTicks = yScale.ticks(4);\n\n    return (\n      <g>\n        {yTicks.map(tick => (\n          <g key={`grid-${tick}`} transform={`translate(0, ${yScale(tick)})`}>\n            <line class=\"chart-bar__gridline\" x1={0} x2={innerWidth} />\n            <text\n              class=\"chart-bar__axis-label\"\n              x={-axisLabelGap}\n              text-anchor=\"end\"\n              dominant-baseline=\"middle\"\n            >\n              {tick}\n            </text>\n          </g>\n        ))}\n\n        {this.data.map((datum, index) => {\n          const barWidth = xScale.bandwidth();\n          const barX = xScale(datum.label) ?? 0;\n          const barY = yScale(datum.value);\n          const barHeight = innerHeight - barY;\n          const squareBaseY = barY + barHeight / 2;\n          const squareBaseHeight = barHeight / 2;\n          const fill = datum.color ?? categoryColor(index);\n          return (\n            <g key={datum.label}>\n              <rect\n                class=\"chart-bar__bar chart-bar__bar--rounded\"\n                x={barX}\n                y={barY}\n                width={barWidth}\n                height={barHeight}\n                fill={fill}\n              />\n              <rect\n                class=\"chart-bar__bar chart-bar__bar--square-base\"\n                x={barX}\n                y={squareBaseY}\n                width={barWidth}\n                height={squareBaseHeight}\n                fill={fill}\n              />\n              <text\n                class=\"chart-bar__axis-label\"\n                x={barX + barWidth / 2}\n                y={innerHeight + categoryLabelOffset}\n                text-anchor=\"middle\"\n              >\n                {datum.label}\n              </text>\n            </g>\n          );\n        })}\n      </g>\n    );\n  }\n\n  private valuesForCategory(categoryIndex: number) {\n    return this.series.map(series => Math.max(0, series.data[categoryIndex] ?? 0));\n  }\n\n  private stackedAccessibleLabel() {\n    return this.categories\n      .map((category, categoryIndex) => {\n        const values = this.valuesForCategory(categoryIndex);\n        const total = values.reduce((sum, value) => sum + value, 0);\n        const details = this.series\n          .map((series, seriesIndex) => {\n            const value = values[seriesIndex];\n            const visibleValue =\n              this.variant === 'percentage'\n                ? formatPercentage(total ? value / total : 0, 1)\n                : String(value);\n            return `${series.name}: ${visibleValue}`;\n          })\n          .join(', ');\n        return `${category}: ${details}`;\n      })\n      .join('; ');\n  }\n\n  private renderStacked(\n    innerWidth: number,\n    innerHeight: number,\n    axisLabelGap: number,\n    categoryLabelOffset: number\n  ) {\n    const categoryValues = this.categories.map((_, index) =>\n      this.valuesForCategory(index)\n    );\n    const totals = categoryValues.map(values =>\n      values.reduce((sum, value) => sum + value, 0)\n    );\n    const yMax = this.variant === 'percentage' ? 100 : Math.max(0, ...totals);\n    const xScale = scaleBand()\n      .domain(this.categories)\n      .range([0, innerWidth])\n      .padding(0.35);\n    const yScale = scaleLinear()\n      .domain([0, yMax || 1])\n      .range([innerHeight, 0])\n      .nice();\n    const yTicks =\n      this.variant === 'percentage' ? PERCENTAGE_TICKS : yScale.ticks(4);\n\n    return (\n      <g>\n        {yTicks.map(tick => (\n          <g key={`grid-${tick}`} transform={`translate(0, ${yScale(tick)})`}>\n            <line class=\"chart-bar__gridline\" x1={0} x2={innerWidth} />\n            <text\n              class=\"chart-bar__axis-label\"\n              x={-axisLabelGap}\n              text-anchor=\"end\"\n              dominant-baseline=\"middle\"\n            >\n              {this.variant === 'percentage' ? `${tick}%` : tick}\n            </text>\n          </g>\n        ))}\n\n        {this.categories.map((category, categoryIndex) => {\n          const barWidth = xScale.bandwidth();\n          const barX = xScale(category) ?? 0;\n          const values = categoryValues[categoryIndex];\n          const total = totals[categoryIndex];\n          const topSeriesIndex = values.reduce(\n            (topIndex, value, seriesIndex) =>\n              value > 0 ? seriesIndex : topIndex,\n            -1\n          );\n          let cumulativeValue = 0;\n\n          return (\n            <g class=\"chart-bar__stack\" data-category={category} key={category}>\n              {this.series.map((series, seriesIndex) => {\n                const rawValue = values[seriesIndex];\n                const value =\n                  this.variant === 'percentage'\n                    ? total\n                      ? (rawValue / total) * 100\n                      : 0\n                    : rawValue;\n                const segmentStart = cumulativeValue;\n                const segmentEnd = cumulativeValue + value;\n                cumulativeValue = segmentEnd;\n                const segmentY = yScale(segmentEnd);\n                const segmentBottom = yScale(segmentStart);\n                const segmentHeight = Math.max(0, segmentBottom - segmentY);\n                if (!segmentHeight) return null;\n\n                const fill = series.color ?? categoryColor(seriesIndex);\n                const hasRoundedTop =\n                  this.variant === 'stacked' && seriesIndex === topSeriesIndex;\n                const squareBaseY = segmentY + segmentHeight / 2;\n                const squareBaseHeight = segmentHeight / 2;\n\n                return (\n                  <g\n                    class=\"chart-bar__segment\"\n                    data-series={series.name}\n                    key={series.name}\n                  >\n                    <rect\n                      class={{\n                        'chart-bar__segment-shape': true,\n                        'chart-bar__segment-shape--rounded': hasRoundedTop,\n                      }}\n                      x={barX}\n                      y={segmentY}\n                      width={barWidth}\n                      height={segmentHeight}\n                      fill={fill}\n                    />\n                    {hasRoundedTop ? (\n                      <rect\n                        class=\"chart-bar__segment-square-base\"\n                        x={barX}\n                        y={squareBaseY}\n                        width={barWidth}\n                        height={squareBaseHeight}\n                        fill={fill}\n                      />\n                    ) : null}\n                    {segmentStart > 0 ? (\n                      <line\n                        class=\"chart-bar__segment-separator\"\n                        x1={barX}\n                        x2={barX + barWidth}\n                        y1={segmentBottom}\n                        y2={segmentBottom}\n                        vector-effect=\"non-scaling-stroke\"\n                      />\n                    ) : null}\n                  </g>\n                );\n              })}\n              <text\n                class=\"chart-bar__axis-label\"\n                x={barX + barWidth / 2}\n                y={innerHeight + categoryLabelOffset}\n                text-anchor=\"middle\"\n              >\n                {category}\n              </text>\n            </g>\n          );\n        })}\n      </g>\n    );\n  }\n\n  render() {\n    const viewportWidth = this.viewport?.width ?? this.width;\n    const viewportHeight = this.viewport?.height ?? this.height;\n    const { margin, axisLabelGap, categoryLabelOffset } =\n      resolveCartesianChartLayout();\n    const innerWidth = Math.max(0, viewportWidth - margin.left - margin.right);\n    const innerHeight = Math.max(0, viewportHeight - margin.top - margin.bottom);\n    const isSingle = this.variant === 'single';\n    const accessibleLabel = isSingle\n      ? this.data.map(datum => `${datum.label}: ${datum.value}`).join(', ')\n      : this.stackedAccessibleLabel();\n\n    return (\n      <Host\n        class={{\n          'chart-bar': true,\n          [`chart-bar--${this.variant}`]: true,\n        }}\n      >\n        <svg\n          class=\"chart-bar__svg\"\n          ref={element => {\n            this.svgEl = element ?? null;\n          }}\n          width={viewportWidth}\n          height={viewportHeight}\n          role=\"img\"\n          aria-label={accessibleLabel}\n        >\n          <g transform={`translate(${margin.left}, ${margin.top})`}>\n            {isSingle\n              ? this.renderSingle(\n                  innerWidth,\n                  innerHeight,\n                  axisLabelGap,\n                  categoryLabelOffset\n                )\n              : this.renderStacked(\n                  innerWidth,\n                  innerHeight,\n                  axisLabelGap,\n                  categoryLabelOffset\n                )}\n          </g>\n        </svg>\n      </Host>\n    );\n  }\n}\n",
-      "type": "registry:ui"
-    }
-  ]
-}