@ds-mo/ui 13.6.1 → 13.7.0

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

@@ -1,223 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "chart-line",
-  "title": "ChartLine",
-  "description": "Static single- or multi-series line chart for trends across ordered, evenly spaced categories, including preformatted time-period labels.",
-  "type": "registry:ui",
-  "meta": {
-    "library": "@ds-mo/ui",
-    "distribution": "npm",
-    "storybook": "https://zainadeel.github.io/compomo/?path=/story/chart-line",
-    "source": "src/wc/components/ChartLine/ChartLine.tsx",
-    "intentStatus": "complete",
-    "intent": {
-      "audience": "specialized",
-      "status": "experimental",
-      "summary": "Static single- or multi-series line chart for trends across ordered, evenly spaced categories, including preformatted time-period labels.",
-      "useWhen": [
-        "Users need to follow one or more numeric trends across a shared ordered x-axis.",
-        "Time periods are already grouped into equally spaced labels such as months, weeks, or days.",
-        "A horizontal ChartLegend should identify multiple series."
-      ],
-      "avoidWhen": [
-        "Pixel position must reflect irregular elapsed time or continuous timestamps.",
-        "The primary task is comparing unrelated category magnitudes rather than following a trend.",
-        "The chart needs built-in zoom, brushing, selection, or drill-down.",
-        "Series lengths do not align with the shared category list."
-      ],
-      "alternatives": [
-        {
-          "when": "Users need to compare one measure across discrete categories or time buckets.",
-          "component": "component:ds-chart-bar",
-          "reason": "Bars emphasize independent bucket magnitudes."
-        },
-        {
-          "when": "The data communicates parts of a total.",
-          "component": "component:ds-chart-donut",
-          "reason": "Donut provides the part-to-whole and center-summary treatment."
-        }
-      ],
-      "commonlyComposedWith": [
-        "component:ds-chart-legend",
-        "component:ds-card-data-viz",
-        "component:ds-tooltip-data-viz"
-      ],
-      "accessibility": [
-        "Provide a visible legend or adjacent textual summary when exact series values are important; the chart image name alone is not a complete data table.",
-        "Do not rely on series color alone to communicate meaning.",
-        "A future point tooltip must supplement rather than replace accessible series and value context."
-      ],
-      "states": [
-        "The chart is currently static and does not own hover, selection, loading, or empty-state policy.",
-        "Its standard horizontal legend is a static key with local hover highlighting disabled.",
-        "Point markers may be shown or hidden without changing the underlying series meaning.",
-        "Authored series colors override the shared categorical palette."
-      ],
-      "responsiveBehavior": [
-        "Width and height provide the standalone intrinsic viewport; constrained card regions are measured and reflow both axes to their rendered pixel dimensions.",
-        "Responsive layout changes point positions and plot extents without scaling SVG text, line strokes, point markers, or margins.",
-        "Category positions are always equally spaced, even when labels represent time.",
-        "Reduce or pre-format dense labels before passing them; the chart renders authored labels without a continuous time scale."
-      ],
-      "frameworkCaveats": {
-        "customElements": [
-          "Assign series and categories as JavaScript properties and keep every series aligned to the category count."
-        ],
-        "react": [
-          "Pass stable series and category arrays; width and height provide standalone intrinsic dimensions while constrained containers reflow automatically."
-        ],
-        "angular": [
-          "Bind series and categories as properties; width and height provide standalone intrinsic dimensions while constrained containers reflow automatically."
-        ]
-      },
-      "references": [
-        {
-          "label": "Storybook examples",
-          "path": "src/wc/components/ChartLine/ChartLine.stories.ts"
-        }
-      ]
-    },
-    "api": {
-      "props": {
-        "categories": {
-          "type": "string[]",
-          "resolvedType": "string[]",
-          "default": "[]",
-          "required": false,
-          "mutable": false,
-          "description": "X-axis labels — must match each series' `data` length. Set as a JS property."
-        },
-        "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": "One or more series to plot. Set as a JS property (not an HTML attribute)."
-        },
-        "showPoints": {
-          "type": "boolean",
-          "resolvedType": "boolean",
-          "attribute": "show-points",
-          "default": "true",
-          "required": false,
-          "mutable": false
-        },
-        "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 — must match each series' `data` length. Set as a JS property."
-      },
-      "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": "One or more series to plot. Set as a JS property (not an HTML attribute)."
-      },
-      "showPoints": {
-        "type": "boolean",
-        "resolvedType": "boolean",
-        "attribute": "show-points",
-        "default": "true",
-        "required": false,
-        "mutable": false
-      },
-      "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-line",
-      "react": "DsChartLine",
-      "angular": "DsChartLine"
-    },
-    "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-line.js';",
-        "example": "<ds-chart-line></ds-chart-line>"
-      },
-      "react": {
-        "import": "import { DsChartLine } from '@ds-mo/ui/react';",
-        "example": "<DsChartLine />"
-      },
-      "angular": {
-        "import": "import { DsChartLine } from '@ds-mo/ui/angular/ds-chart-line';",
-        "example": "<ds-chart-line></ds-chart-line>"
-      },
-      "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: categories, 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/ChartLine/ChartLine.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-line__svg {\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n\n.chart-line__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-line__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-line__path {\n  fill: none;\n  stroke-width: var(--dimension-stroke-width-025);\n  vector-effect: non-scaling-stroke;\n}\n\n.chart-line__point {\n  stroke: var(--color-background-primary);\n  stroke-width: var(--dimension-stroke-width-018);\n  r: calc(var(--dimension-size-075) / 2);\n  vector-effect: non-scaling-stroke;\n}\n\n@media (forced-colors: active) {\n  .chart-line__path,\n  .chart-line__point {\n    forced-color-adjust: none;\n  }\n\n  .chart-line__point {\n    stroke: var(--ds-forced-color-surface);\n  }\n}\n",
-      "type": "registry:ui"
-    },
-    {
-      "path": "src/wc/components/ChartLine/ChartLine.tsx",
-      "content": "import { Component, Prop, State, Watch, h, Host } from '@stencil/core';\nimport { line as lineShape } from 'd3-shape';\nimport { scaleLinear, scalePoint } from 'd3-scale';\nimport { max } from 'd3-array';\nimport { categoryColor } from '../../utils/chart-colors';\nimport { resolveCartesianChartLayout } from '../../utils/cartesian-chart-layout';\nimport {\n  ChartViewportController,\n  type ChartViewportSize,\n} from '../../utils/chart-viewport-controller';\nimport type { ChartSeries } from '../../utils/chart-types';\n\n@Component({\n  tag: 'ds-chart-line',\n  styleUrl: 'ChartLine.css',\n  scoped: true,\n})\nexport class ChartLine {\n  /** One or more series to plot. Set as a JS property (not an HTML attribute). */\n  @Prop() series: ChartSeries[] = [];\n  /** X-axis labels — must match each series' `data` length. 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  @Prop() showPoints: boolean = true;\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  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\n    const allValues = this.series.flatMap(s => s.data);\n    const yMax = max(allValues) ?? 0;\n\n    const xScale = scalePoint<number>()\n      .domain(this.categories.map((_, i) => i))\n      .range([0, innerWidth]);\n\n    const yScale = scaleLinear()\n      .domain([0, yMax || 1])\n      .range([innerHeight, 0])\n      .nice();\n\n    const lineGenerator = lineShape<number>()\n      .x((_, i) => xScale(i) ?? 0)\n      .y(d => yScale(d));\n\n    const yTicks = yScale.ticks(4);\n\n    return (\n      <Host class=\"chart-line\">\n        <svg\n          class=\"chart-line__svg\"\n          ref={element => {\n            this.svgEl = element ?? null;\n          }}\n          width={viewportWidth}\n          height={viewportHeight}\n          role=\"img\"\n          aria-label={this.series.map(s => s.name).join(', ')}\n        >\n          <g transform={`translate(${margin.left}, ${margin.top})`}>\n            {yTicks.map(tick => (\n              <g key={`grid-${tick}`} transform={`translate(0, ${yScale(tick)})`}>\n                <line class=\"chart-line__gridline\" x1={0} x2={innerWidth} />\n                <text\n                  class=\"chart-line__axis-label\"\n                  x={-axisLabelGap}\n                  text-anchor=\"end\"\n                  dominant-baseline=\"middle\"\n                >\n                  {tick}\n                </text>\n              </g>\n            ))}\n\n            {this.categories.map((label, i) => (\n              <text\n                key={`x-${label}`}\n                class=\"chart-line__axis-label\"\n                x={xScale(i) ?? 0}\n                y={innerHeight + categoryLabelOffset}\n                text-anchor=\"middle\"\n              >\n                {label}\n              </text>\n            ))}\n\n            {this.series.map((s, si) => {\n              const color = s.color ?? categoryColor(si);\n              return (\n                <g key={s.name}>\n                  <path class=\"chart-line__path\" d={lineGenerator(s.data) ?? undefined} stroke={color} />\n                  {this.showPoints &&\n                    s.data.map((d, i) => (\n                      <circle\n                        key={`${s.name}-${i}`}\n                        class=\"chart-line__point\"\n                        cx={xScale(i) ?? 0}\n                        cy={yScale(d)}\n                        fill={color}\n                      />\n                    ))}\n                </g>\n              );\n            })}\n          </g>\n        </svg>\n      </Host>\n    );\n  }\n}\n",
-      "type": "registry:ui"
-    }
-  ]
-}

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

@@ -1,224 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "tooltip-data-viz",
-  "title": "TooltipDataViz",
-  "description": "Chart-owned, non-interactive label and value callout positioned from pointer or focused-mark coordinates inside a visualization wrapper.",
-  "type": "registry:ui",
-  "meta": {
-    "library": "@ds-mo/ui",
-    "distribution": "npm",
-    "storybook": "https://zainadeel.github.io/compomo/?path=/story/tooltip-data-viz",
-    "source": "src/wc/components/TooltipDataViz/TooltipDataViz.tsx",
-    "intentStatus": "complete",
-    "intent": {
-      "audience": "specialized",
-      "status": "experimental",
-      "summary": "Chart-owned, non-interactive label and value callout positioned from pointer or focused-mark coordinates inside a visualization wrapper.",
-      "useWhen": [
-        "A chart needs immediate visual value feedback for a genuinely hovered or keyboard-focused mark.",
-        "The anchor lives inside SVG or chart coordinates rather than on a slotted HTML trigger.",
-        "The owning chart can mount the callout for one interaction session and update its coordinates while tracking."
-      ],
-      "avoidWhen": [
-        "A normal control or text trigger needs supplemental explanation; use Tooltip.",
-        "The content needs links, actions, focus, or touch-primary disclosure.",
-        "An externally synchronized highlight has no genuine local pointer or keyboard interaction.",
-        "The callout would be the only accessible source of an essential value."
-      ],
-      "alternatives": [
-        {
-          "when": "A slotted control or text trigger needs a conventional tooltip.",
-          "component": "component:ds-tooltip",
-          "reason": "Tooltip owns trigger semantics, focus behavior, and anchored overlay lifecycle."
-        },
-        {
-          "when": "Donut details should remain continuously visible beside the chart.",
-          "component": "component:ds-chart-legend",
-          "reason": "A visible legend avoids redundant transient slice callouts."
-        }
-      ],
-      "commonlyComposedWith": [
-        "component:ds-chart-bar",
-        "component:ds-chart-line",
-        "component:ds-chart-donut"
-      ],
-      "accessibility": [
-        "The callout is presentation-only and never replaces the owning chart mark's accessible label or an adjacent data summary.",
-        "Keyboard-focused marks receive the same visual feedback as pointer-hovered marks.",
-        "The callout never receives focus or contains interactive descendants."
-      ],
-      "states": [
-        "The owning chart mounts the callout when a local interaction starts and unmounts it when that interaction ends.",
-        "Coordinate updates track within one mounted interaction session without restarting the show delay.",
-        "Placement flips horizontally or vertically when the rendered callout approaches a viewport edge.",
-        "Placement is chosen as a quadrant rather than computed as coordinates: the component measures its own rendered rect and flips its side and align props, which CSS consumes. It therefore does not use the shared anchored-position utilities, which resolve an anchor element into x and y.",
-        "This separation is deliberate. The callout follows the pointer instead of an element, so it has no anchor rect to resolve; adopting the shared geometry would mean rewriting its CSS to consume coordinates for no behavioral gain.",
-        "Reduced motion preserves the final visible state without an opacity transition."
-      ],
-      "responsiveBehavior": [
-        "Render inside a positioned chart wrapper and pass coordinates relative to that wrapper.",
-        "Keep labels concise enough for the single-line callout; persistent or long explanations belong outside the chart."
-      ],
-      "frameworkCaveats": {
-        "customElements": [
-          "The owning chart computes coordinates and conditionally mounts the component; applications should not use it as a standalone overlay."
-        ],
-        "react": [
-          "Keep callout lifecycle and coordinates inside the chart wrapper rather than application-global tooltip state."
-        ],
-        "angular": [
-          "Keep callout lifecycle and coordinates inside the chart wrapper rather than application-global tooltip state."
-        ]
-      },
-      "references": [
-        {
-          "label": "Storybook example",
-          "path": "src/wc/components/TooltipDataViz/TooltipDataViz.stories.ts"
-        }
-      ]
-    },
-    "api": {
-      "props": {
-        "delay": {
-          "type": "number | string",
-          "resolvedType": "number | string",
-          "attribute": "delay",
-          "default": "TOKEN_DEFAULTS.animationDelayInstant",
-          "required": false,
-          "mutable": false,
-          "description": "Show delay after mount before the callout appears.\nDefault: `--effect-animation-delay-instant` (0ms). Accepts a number (ms)\nor a TokoMo time token / `var(--effect-animation-delay-*)`. Charts need\nimmediate feedback while scrubbing; prefer the default. Mount once per\nhover session so any non-zero delay runs once, then track `x`/`y` instantly."
-        },
-        "label": {
-          "type": "string",
-          "resolvedType": "string",
-          "attribute": "label",
-          "default": "''",
-          "required": false,
-          "mutable": false
-        },
-        "value": {
-          "type": "string | number",
-          "resolvedType": "number | string",
-          "attribute": "value",
-          "default": "''",
-          "required": false,
-          "mutable": false
-        },
-        "x": {
-          "type": "number",
-          "resolvedType": "number",
-          "attribute": "x",
-          "default": "0",
-          "required": false,
-          "mutable": false,
-          "description": "Anchor point in px, relative to the nearest `position: relative` ancestor — e.g. the cursor."
-        },
-        "y": {
-          "type": "number",
-          "resolvedType": "number",
-          "attribute": "y",
-          "default": "0",
-          "required": false,
-          "mutable": false
-        }
-      },
-      "events": [],
-      "methods": [],
-      "slots": []
-    },
-    "props": {
-      "delay": {
-        "type": "number | string",
-        "resolvedType": "number | string",
-        "attribute": "delay",
-        "default": "TOKEN_DEFAULTS.animationDelayInstant",
-        "required": false,
-        "mutable": false,
-        "description": "Show delay after mount before the callout appears.\nDefault: `--effect-animation-delay-instant` (0ms). Accepts a number (ms)\nor a TokoMo time token / `var(--effect-animation-delay-*)`. Charts need\nimmediate feedback while scrubbing; prefer the default. Mount once per\nhover session so any non-zero delay runs once, then track `x`/`y` instantly."
-      },
-      "label": {
-        "type": "string",
-        "resolvedType": "string",
-        "attribute": "label",
-        "default": "''",
-        "required": false,
-        "mutable": false
-      },
-      "value": {
-        "type": "string | number",
-        "resolvedType": "number | string",
-        "attribute": "value",
-        "default": "''",
-        "required": false,
-        "mutable": false
-      },
-      "x": {
-        "type": "number",
-        "resolvedType": "number",
-        "attribute": "x",
-        "default": "0",
-        "required": false,
-        "mutable": false,
-        "description": "Anchor point in px, relative to the nearest `position: relative` ancestor — e.g. the cursor."
-      },
-      "y": {
-        "type": "number",
-        "resolvedType": "number",
-        "attribute": "y",
-        "default": "0",
-        "required": false,
-        "mutable": false
-      }
-    },
-    "events": [],
-    "methods": [],
-    "slots": [],
-    "exports": {
-      "customElement": "ds-tooltip-data-viz",
-      "react": "DsTooltipDataViz",
-      "angular": "DsTooltipDataViz"
-    },
-    "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-tooltip-data-viz.js';",
-        "example": "<ds-tooltip-data-viz></ds-tooltip-data-viz>"
-      },
-      "react": {
-        "import": "import { DsTooltipDataViz } from '@ds-mo/ui/react';",
-        "example": "<DsTooltipDataViz />"
-      },
-      "angular": {
-        "import": "import { DsTooltipDataViz } from '@ds-mo/ui/angular/ds-tooltip-data-viz';",
-        "example": "<ds-tooltip-data-viz></ds-tooltip-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": [
-    "text"
-  ],
-  "files": [
-    {
-      "path": "src/wc/components/TooltipDataViz/TooltipDataViz.css",
-      "content": "@import '../../utils/control-density.css';\n@import '../../utils/forced-colors.css';\n\n/* No padding here — the item div below owns all the spacing, so there's exactly one padding\n   box instead of stacking the host's padding on top of the item's. */\n:host {\n  position: absolute;\n  z-index: var(--dimension-z-index-tooltip);\n  display: block;\n  box-sizing: border-box;\n  background-color: var(--color-translucent-translucent);\n  backdrop-filter: blur(var(--effect-blur-md));\n  -webkit-backdrop-filter: blur(var(--effect-blur-md));\n  border-radius: var(--ds-control-radius, var(--dimension-radius-025));\n  box-shadow: var(--effect-elevation-elevated-floating);\n  white-space: nowrap;\n  pointer-events: none;\n  opacity: 0;\n}\n\n:host(.tooltip-data-viz--visible) {\n  animation: tooltip-data-viz-fade-in var(--effect-motion-short-2) forwards;\n}\n\n/* Density: md control recipe (height / pad / label inset) — non-interactive, no interaction-fill. */\n.tooltip-data-viz__item {\n  box-sizing: border-box;\n  height: var(--ds-control-height, var(--dimension-size-400));\n  display: flex;\n  align-items: center;\n  gap: var(--dimension-space-025);\n  padding: 0 var(--ds-control-padding-inline, var(--dimension-space-075));\n}\n\n.tooltip-data-viz__label,\n.tooltip-data-viz__value {\n  padding: 0 var(--ds-control-label-inset, var(--dimension-space-025));\n}\n\n@keyframes tooltip-data-viz-fade-in {\n  from { opacity: 0; }\n  to   { opacity: 1; }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :host(.tooltip-data-viz--visible) {\n    animation: none;\n    opacity: 1;\n  }\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/TooltipDataViz/TooltipDataViz.tsx",
-      "content": "import { Component, Prop, State, Element, Watch, h, Host } from '@stencil/core';\nimport { resolveCssTimeMs, TOKEN_DEFAULTS } from '../../utils';\n\nconst CURSOR_OFFSET_PX = 12;\nconst VIEWPORT_PAD_PX = 8;\n\nexport type TooltipDataVizSide = 'left' | 'right';\nexport type TooltipDataVizAlign = 'top' | 'bottom';\n\n/**\n * Positioned value/label callout for chart hover interactions (bar, line point,\n * standalone donut slice, …). Donut compositions suppress it when a visible\n * legend already surfaces the hovered slice.\n * Unlike `ds-tooltip`, this doesn't bind to a slotted anchor element —\n * charts hover-highlight data that lives inside an SVG, so the chart itself computes\n * the anchor point (e.g. the cursor position while hovering) and passes it in as `x`/`y`.\n *\n * Renders `position: absolute` — place inside a `position: relative` chart wrapper,\n * with `x`/`y` as pixel coordinates within that wrapper. Defaults to sitting below-right\n * of the anchor (matching cursor-following tooltips), flipping to whichever side/edge\n * keeps it on-screen.\n *\n * Mount (or remount) when a hover session starts so `delay` applies once per hover;\n * keep the instance mounted while the cursor moves so tracking stays instant.\n */\n@Component({\n  tag: 'ds-tooltip-data-viz',\n  styleUrl: 'TooltipDataViz.css',\n  scoped: true,\n})\nexport class TooltipDataViz {\n  @Element() el!: HTMLElement;\n\n  @Prop() value: string | number = '';\n  @Prop() label: string = '';\n  /** Anchor point in px, relative to the nearest `position: relative` ancestor — e.g. the cursor. */\n  @Prop() x: number = 0;\n  @Prop() y: number = 0;\n\n  /**\n   * Show delay after mount before the callout appears.\n   * Default: `--effect-animation-delay-instant` (0ms). Accepts a number (ms)\n   * or a TokoMo time token / `var(--effect-animation-delay-*)`. Charts need\n   * immediate feedback while scrubbing; prefer the default. Mount once per\n   * hover session so any non-zero delay runs once, then track `x`/`y` instantly.\n   */\n  @Prop() delay: number | string = TOKEN_DEFAULTS.animationDelayInstant;\n\n  @State() private side: TooltipDataVizSide = 'right';\n  @State() private align: TooltipDataVizAlign = 'bottom';\n  @State() private visible: boolean = false;\n\n  private delayTimer: ReturnType<typeof setTimeout> | null = null;\n\n  componentDidLoad() {\n    this.scheduleShow();\n    this.calculatePlacement();\n  }\n\n  disconnectedCallback() {\n    this.clearDelayTimer();\n  }\n\n  @Watch('x')\n  @Watch('y')\n  onAnchorChange() {\n    requestAnimationFrame(() => this.calculatePlacement());\n  }\n\n  @Watch('delay')\n  onDelayChange() {\n    if (!this.visible) this.scheduleShow();\n  }\n\n  private get showDelayMs(): number {\n    return resolveCssTimeMs(this.delay, TOKEN_DEFAULTS.animationDelayInstant);\n  }\n\n  private clearDelayTimer() {\n    if (this.delayTimer) {\n      clearTimeout(this.delayTimer);\n      this.delayTimer = null;\n    }\n  }\n\n  private scheduleShow() {\n    this.clearDelayTimer();\n    this.visible = false;\n    const ms = this.showDelayMs;\n    if (ms <= 0) {\n      this.visible = true;\n      return;\n    }\n    this.delayTimer = setTimeout(() => {\n      this.delayTimer = null;\n      this.visible = true;\n      requestAnimationFrame(() => this.calculatePlacement());\n    }, ms);\n  }\n\n  private calculatePlacement() {\n    const rect = this.el.getBoundingClientRect();\n    if (!rect.width || !rect.height) return;\n\n    const nextSide: TooltipDataVizSide = rect.right > window.innerWidth - VIEWPORT_PAD_PX ? 'left' : 'right';\n    const nextAlign: TooltipDataVizAlign = rect.bottom > window.innerHeight - VIEWPORT_PAD_PX ? 'top' : 'bottom';\n\n    if (nextSide !== this.side) this.side = nextSide;\n    if (nextAlign !== this.align) this.align = nextAlign;\n  }\n\n  render() {\n    const translateX = this.side === 'right' ? `${CURSOR_OFFSET_PX}px` : `calc(-100% - ${CURSOR_OFFSET_PX}px)`;\n    const translateY = this.align === 'bottom' ? `${CURSOR_OFFSET_PX}px` : `calc(-100% - ${CURSOR_OFFSET_PX}px)`;\n\n    return (\n      <Host\n        class={{\n          'tooltip-data-viz': true,\n          'tooltip-data-viz--visible': this.visible,\n        }}\n        style={{ left: `${this.x}px`, top: `${this.y}px`, transform: `translate(${translateX}, ${translateY})` }}\n      >\n        <div class=\"tooltip-data-viz__item ds-control--md\">\n          <ds-text\n            class=\"tooltip-data-viz__label\"\n            as=\"span\"\n            variant=\"text-body-medium\"\n            color=\"var(--color-translucent-foreground-secondary)\"\n          >\n            {this.label}\n          </ds-text>\n          <ds-text\n            class=\"tooltip-data-viz__value\"\n            as=\"span\"\n            variant=\"text-body-medium\"\n            emphasis\n            color=\"var(--color-translucent-foreground-primary)\"\n          >\n            {this.value}\n          </ds-text>\n        </div>\n      </Host>\n    );\n  }\n}\n",
-      "type": "registry:ui"
-    }
-  ]
-}

package/dist/react/ds-card-data-viz.d.ts

@@ -1,12 +0,0 @@
-/**
- * This file was automatically generated by the Stencil React Output Target.
- * Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
- */
-import type { EventName, StencilReactComponent } from './react-runtime.js';
-import { type DsCardDataVizCustomEvent } from "@ds-mo/ui";
-import type { Components } from "@ds-mo/ui/dist/components";
-import { DsCardDataViz as DsCardDataVizElement } from "@ds-mo/ui/dist/components/ds-card-data-viz.js";
-export type DsCardDataVizEvents = {
-    onDsFilterClick: EventName<DsCardDataVizCustomEvent<void>>;
-};
-export declare const DsCardDataViz: StencilReactComponent<DsCardDataVizElement, DsCardDataVizEvents, Components.DsCardDataViz, 'heading'>;

package/dist/react/ds-card-data-viz.js

@@ -1,12 +0,0 @@
-'use client';
-import { createComponent } from './react-runtime.js';
-import React from 'react';
-import { DsCardDataViz as DsCardDataVizElement, defineCustomElement as defineDsCardDataViz } from "@ds-mo/ui/dist/components/ds-card-data-viz.js";
-export const DsCardDataViz = /*@__PURE__*/ createComponent({
-    tagName: 'ds-card-data-viz',
-    elementClass: DsCardDataVizElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: { onDsFilterClick: 'dsFilterClick' },
-    defineCustomElement: defineDsCardDataViz
-});

package/dist/react/ds-chart-bar.js

@@ -1,12 +0,0 @@
-'use client';
-import { createComponent } from './react-runtime.js';
-import React from 'react';
-import { DsChartBar as DsChartBarElement, defineCustomElement as defineDsChartBar } from "@ds-mo/ui/dist/components/ds-chart-bar.js";
-export const DsChartBar = /*@__PURE__*/ createComponent({
-    tagName: 'ds-chart-bar',
-    elementClass: DsChartBarElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {},
-    defineCustomElement: defineDsChartBar
-});

package/dist/react/ds-chart-donut.d.ts

@@ -1,12 +0,0 @@
-/**
- * This file was automatically generated by the Stencil React Output Target.
- * Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
- */
-import type { EventName, StencilReactComponent } from './react-runtime.js';
-import { type ChartDatum, type DsChartDonutCustomEvent } from "@ds-mo/ui";
-import type { Components } from "@ds-mo/ui/dist/components";
-import { DsChartDonut as DsChartDonutElement } from "@ds-mo/ui/dist/components/ds-chart-donut.js";
-export type DsChartDonutEvents = {
-    onDsSliceHover: EventName<DsChartDonutCustomEvent<ChartDatum | null>>;
-};
-export declare const DsChartDonut: StencilReactComponent<DsChartDonutElement, DsChartDonutEvents, Components.DsChartDonut>;

package/dist/react/ds-chart-donut.js

@@ -1,12 +0,0 @@
-'use client';
-import { createComponent } from './react-runtime.js';
-import React from 'react';
-import { DsChartDonut as DsChartDonutElement, defineCustomElement as defineDsChartDonut } from "@ds-mo/ui/dist/components/ds-chart-donut.js";
-export const DsChartDonut = /*@__PURE__*/ createComponent({
-    tagName: 'ds-chart-donut',
-    elementClass: DsChartDonutElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: { onDsSliceHover: 'dsSliceHover' },
-    defineCustomElement: defineDsChartDonut
-});

package/dist/react/ds-chart-line.d.ts

@@ -1,9 +0,0 @@
-/**
- * This file was automatically generated by the Stencil React Output Target.
- * Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
- */
-import type { StencilReactComponent } from './react-runtime.js';
-import type { Components } from "@ds-mo/ui/dist/components";
-import { DsChartLine as DsChartLineElement } from "@ds-mo/ui/dist/components/ds-chart-line.js";
-export type DsChartLineEvents = NonNullable<unknown>;
-export declare const DsChartLine: StencilReactComponent<DsChartLineElement, DsChartLineEvents, Components.DsChartLine>;

package/dist/react/ds-chart-line.js

@@ -1,12 +0,0 @@
-'use client';
-import { createComponent } from './react-runtime.js';
-import React from 'react';
-import { DsChartLine as DsChartLineElement, defineCustomElement as defineDsChartLine } from "@ds-mo/ui/dist/components/ds-chart-line.js";
-export const DsChartLine = /*@__PURE__*/ createComponent({
-    tagName: 'ds-chart-line',
-    elementClass: DsChartLineElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {},
-    defineCustomElement: defineDsChartLine
-});

package/dist/react/ds-tooltip-data-viz.d.ts

@@ -1,9 +0,0 @@
-/**
- * This file was automatically generated by the Stencil React Output Target.
- * Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
- */
-import type { StencilReactComponent } from './react-runtime.js';
-import type { Components } from "@ds-mo/ui/dist/components";
-import { DsTooltipDataViz as DsTooltipDataVizElement } from "@ds-mo/ui/dist/components/ds-tooltip-data-viz.js";
-export type DsTooltipDataVizEvents = NonNullable<unknown>;
-export declare const DsTooltipDataViz: StencilReactComponent<DsTooltipDataVizElement, DsTooltipDataVizEvents, Components.DsTooltipDataViz>;

package/dist/react/ds-tooltip-data-viz.js

@@ -1,12 +0,0 @@
-'use client';
-import { createComponent } from './react-runtime.js';
-import React from 'react';
-import { DsTooltipDataViz as DsTooltipDataVizElement, defineCustomElement as defineDsTooltipDataViz } from "@ds-mo/ui/dist/components/ds-tooltip-data-viz.js";
-export const DsTooltipDataViz = /*@__PURE__*/ createComponent({
-    tagName: 'ds-tooltip-data-viz',
-    elementClass: DsTooltipDataVizElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {},
-    defineCustomElement: defineDsTooltipDataViz
-});

package/dist/types/components/CardDataViz/index.d.ts

@@ -1,2 +0,0 @@
-export type { CardDataVizVariant, CardDataVizWidth } from './CardDataViz';
-//# sourceMappingURL=index.d.ts.map

package/dist/types/components/ChartBar/ChartBar.d.ts

@@ -1,31 +0,0 @@
-import type { ChartDatum, ChartSeries } from '../../utils/chart-types';
-export type ChartBarVariant = 'single' | 'stacked' | 'percentage';
-export declare class ChartBar {
-    /** Rendering model. Single uses `data`; stacked and percentage use `series` and `categories`. */
-    variant: ChartBarVariant;
-    /** Bars to render. Set as a JS property (not an HTML attribute). */
-    data: ChartDatum[];
-    /** Ordered stack series for stacked and percentage variants. Set as a JS property. */
-    series: ChartSeries[];
-    /** X-axis labels for stacked and percentage variants. Set as a JS property. */
-    categories: string[];
-    /** Standalone intrinsic width. Container constraints reflow the plot at rendered pixel size. */
-    width: number;
-    /** Standalone intrinsic height. Container constraints reflow the plot at rendered pixel size. */
-    height: number;
-    private viewport;
-    private viewportController;
-    private svgEl;
-    componentDidLoad(): void;
-    connectedCallback(): void;
-    componentDidRender(): void;
-    private connectViewportController;
-    disconnectedCallback(): void;
-    handleIntrinsicSizeChange(): void;
-    private renderSingle;
-    private valuesForCategory;
-    private stackedAccessibleLabel;
-    private renderStacked;
-    render(): any;
-}
-//# sourceMappingURL=ChartBar.d.ts.map

package/dist/types/components/ChartBar/index.d.ts

@@ -1,3 +0,0 @@
-export type { ChartDatum, ChartSeries } from '../../utils/chart-types';
-export type { ChartBarVariant } from './ChartBar';
-//# sourceMappingURL=index.d.ts.map