@ds-mo/ui 13.6.1 → 13.8.0

package/dist/docs/components.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2026-08-02T03:35:24",
+  "timestamp": "2026-08-05T00:20:49",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.43.5",
@@ -4997,7 +4997,7 @@
         "ds-bar-nav",
         "ds-bar-title",
         "ds-bar-workflow",
-        "ds-card-data-viz",
+        "ds-card-chart",
         "ds-card-setting",
         "ds-code-block",
         "ds-input",
@@ -5043,7 +5043,7 @@
         "ds-bar-workflow": [
           "ds-button-unfilled"
         ],
-        "ds-card-data-viz": [
+        "ds-card-chart": [
           "ds-button-unfilled"
         ],
         "ds-card-setting": [
@@ -5097,10 +5097,10 @@
       }
     },
     {
-      "filePath": "src/wc/components/CardDataViz/CardDataViz.tsx",
+      "filePath": "src/wc/components/CardChart/CardChart.tsx",
       "encapsulation": "scoped",
-      "tag": "ds-card-data-viz",
-      "docs": "Standard data-visualization card chrome and composition. The variant owns\nonly the chart/legend relationship; applications continue to own data.",
+      "tag": "ds-card-chart",
+      "docs": "Standard chart card chrome and composition. The variant owns\nonly the chart/legend relationship; applications continue to own data.",
       "docsTags": [],
       "usage": {},
       "props": [
@@ -5108,20 +5108,20 @@
           "name": "cardWidth",
           "type": "\"lg\" | \"md\" | \"sm\"",
           "complexType": {
-            "original": "CardDataVizWidth",
+            "original": "CardChartWidth",
             "resolved": "\"lg\" | \"md\" | \"sm\"",
             "references": {
-              "CardDataVizWidth": {
+              "CardChartWidth": {
                 "location": "local",
-                "path": "/home/runner/work/compomo/compomo/src/wc/components/CardDataViz/CardDataViz.tsx",
-                "id": "src/wc/components/CardDataViz/CardDataViz.tsx::CardDataVizWidth"
+                "path": "/home/runner/work/compomo/compomo/src/wc/components/CardChart/CardChart.tsx",
+                "id": "src/wc/components/CardChart/CardChart.tsx::CardChartWidth"
               }
             }
           },
           "mutable": false,
           "attr": "card-width",
           "reflectToAttr": false,
-          "docs": "Width token with the matching data-visualization card min-height.",
+          "docs": "Width token with the matching chart-card min-height.",
           "docsTags": [
             {
               "name": "default",
@@ -5188,7 +5188,7 @@
           "mutable": false,
           "attr": "heading",
           "reflectToAttr": false,
-          "docs": "Data-visualization heading shown in the card header.",
+          "docs": "Chart heading shown in the card header.",
           "docsTags": [],
           "values": [
             {
@@ -5231,15 +5231,15 @@
         },
         {
           "name": "variant",
-          "type": "\"bar\" | \"custom\" | \"donut\" | \"line\"",
+          "type": "\"chart\" | \"custom\"",
           "complexType": {
-            "original": "CardDataVizVariant",
-            "resolved": "\"bar\" | \"custom\" | \"donut\" | \"line\"",
+            "original": "CardChartVariant",
+            "resolved": "\"chart\" | \"custom\"",
             "references": {
-              "CardDataVizVariant": {
+              "CardChartVariant": {
                 "location": "local",
-                "path": "/home/runner/work/compomo/compomo/src/wc/components/CardDataViz/CardDataViz.tsx",
-                "id": "src/wc/components/CardDataViz/CardDataViz.tsx::CardDataVizVariant"
+                "path": "/home/runner/work/compomo/compomo/src/wc/components/CardChart/CardChart.tsx",
+                "id": "src/wc/components/CardChart/CardChart.tsx::CardChartVariant"
               }
             }
           },
@@ -5256,20 +5256,12 @@
           "default": "'custom'",
           "values": [
             {
-              "value": "bar",
+              "value": "chart",
               "type": "string"
             },
             {
               "value": "custom",
               "type": "string"
-            },
-            {
-              "value": "donut",
-              "type": "string"
-            },
-            {
-              "value": "line",
-              "type": "string"
             }
           ],
           "optional": false,
@@ -5306,7 +5298,7 @@
         "ds-button-unfilled"
       ],
       "dependencyGraph": {
-        "ds-card-data-viz": [
+        "ds-card-chart": [
           "ds-text",
           "ds-button-unfilled"
         ],
@@ -5988,303 +5980,80 @@
       }
     },
     {
-      "filePath": "src/wc/components/ChartBar/ChartBar.tsx",
+      "filePath": "src/wc/components/Chart/Chart.tsx",
       "encapsulation": "scoped",
-      "tag": "ds-chart-bar",
+      "tag": "ds-chart",
       "docs": "",
       "docsTags": [],
       "usage": {},
       "props": [
         {
-          "name": "categories",
-          "type": "string[]",
-          "complexType": {
-            "original": "string[]",
-            "resolved": "string[]",
-            "references": {}
-          },
-          "mutable": false,
-          "reflectToAttr": false,
-          "docs": "X-axis labels for stacked and percentage variants. Set as a JS property.",
-          "docsTags": [
-            {
-              "name": "default",
-              "text": "[]"
-            }
-          ],
-          "default": "[]",
-          "values": [
-            {
-              "type": "string[]"
-            }
-          ],
-          "optional": false,
-          "required": false,
-          "getter": false,
-          "setter": false
-        },
-        {
-          "name": "data",
-          "type": "ChartDatum[]",
-          "complexType": {
-            "original": "ChartDatum[]",
-            "resolved": "ChartDatum[]",
-            "references": {
-              "ChartDatum": {
-                "location": "import",
-                "path": "../../utils/chart-types",
-                "id": "src/wc/utils/chart-types.ts::ChartDatum",
-                "referenceLocation": "ChartDatum"
-              }
-            }
-          },
-          "mutable": false,
-          "reflectToAttr": false,
-          "docs": "Bars to render. Set as a JS property (not an HTML attribute).",
-          "docsTags": [
-            {
-              "name": "default",
-              "text": "[]"
-            }
-          ],
-          "default": "[]",
-          "values": [
-            {
-              "type": "ChartDatum[]"
-            }
-          ],
-          "optional": false,
-          "required": false,
-          "getter": false,
-          "setter": false
-        },
-        {
-          "name": "height",
-          "type": "number",
+          "name": "aspectRatio",
+          "type": "number | undefined",
           "complexType": {
             "original": "number",
-            "resolved": "number",
+            "resolved": "number | undefined",
             "references": {}
           },
           "mutable": false,
-          "attr": "height",
+          "attr": "aspect-ratio",
           "reflectToAttr": false,
-          "docs": "Standalone intrinsic height. Container constraints reflow the plot at rendered pixel size.",
-          "docsTags": [
-            {
-              "name": "default",
-              "text": "240"
-            }
-          ],
-          "default": "240",
+          "docs": "Derives height from the current width when height is not supplied.",
+          "docsTags": [],
           "values": [
             {
               "type": "number"
-            }
-          ],
-          "optional": false,
-          "required": false,
-          "getter": false,
-          "setter": false
-        },
-        {
-          "name": "series",
-          "type": "ChartSeries[]",
-          "complexType": {
-            "original": "ChartSeries[]",
-            "resolved": "ChartSeries[]",
-            "references": {
-              "ChartSeries": {
-                "location": "import",
-                "path": "../../utils/chart-types",
-                "id": "src/wc/utils/chart-types.ts::ChartSeries",
-                "referenceLocation": "ChartSeries"
-              }
-            }
-          },
-          "mutable": false,
-          "reflectToAttr": false,
-          "docs": "Ordered stack series for stacked and percentage variants. Set as a JS property.",
-          "docsTags": [
-            {
-              "name": "default",
-              "text": "[]"
-            }
-          ],
-          "default": "[]",
-          "values": [
+            },
             {
-              "type": "ChartSeries[]"
+              "type": "undefined"
             }
           ],
-          "optional": false,
+          "optional": true,
           "required": false,
           "getter": false,
           "setter": false
         },
         {
-          "name": "variant",
-          "type": "\"percentage\" | \"single\" | \"stacked\"",
+          "name": "definition",
+          "type": "ChartDefinition<unknown>",
           "complexType": {
-            "original": "ChartBarVariant",
-            "resolved": "\"percentage\" | \"single\" | \"stacked\"",
+            "original": "ChartDefinition",
+            "resolved": "ChartDefinition<unknown>",
             "references": {
-              "ChartBarVariant": {
-                "location": "local",
-                "path": "/home/runner/work/compomo/compomo/src/wc/components/ChartBar/ChartBar.tsx",
-                "id": "src/wc/components/ChartBar/ChartBar.tsx::ChartBarVariant"
+              "ChartDefinition": {
+                "location": "import",
+                "path": "../../utils/chart-grammar",
+                "id": "src/wc/utils/chart-grammar.ts::ChartDefinition",
+                "referenceLocation": "ChartDefinition"
               }
             }
           },
           "mutable": false,
-          "attr": "variant",
           "reflectToAttr": false,
-          "docs": "Rendering model. Single uses `data`; stacked and percentage use `series` and `categories`.",
-          "docsTags": [
-            {
-              "name": "default",
-              "text": "'single'"
-            }
-          ],
-          "default": "'single'",
-          "values": [
-            {
-              "value": "percentage",
-              "type": "string"
-            },
-            {
-              "value": "single",
-              "type": "string"
-            },
-            {
-              "value": "stacked",
-              "type": "string"
-            }
-          ],
-          "optional": false,
-          "required": false,
-          "getter": false,
-          "setter": false
-        },
-        {
-          "name": "width",
-          "type": "number",
-          "complexType": {
-            "original": "number",
-            "resolved": "number",
-            "references": {}
-          },
-          "mutable": false,
-          "attr": "width",
-          "reflectToAttr": false,
-          "docs": "Standalone intrinsic width. Container constraints reflow the plot at rendered pixel size.",
-          "docsTags": [
-            {
-              "name": "default",
-              "text": "480"
-            }
-          ],
-          "default": "480",
-          "values": [
-            {
-              "type": "number"
-            }
-          ],
-          "optional": false,
-          "required": false,
-          "getter": false,
-          "setter": false
-        }
-      ],
-      "methods": [],
-      "events": [],
-      "listeners": [],
-      "styles": [],
-      "slots": [],
-      "parts": [],
-      "states": [],
-      "dependents": [],
-      "dependencies": [],
-      "dependencyGraph": {}
-    },
-    {
-      "filePath": "src/wc/components/ChartDonut/ChartDonut.tsx",
-      "encapsulation": "scoped",
-      "tag": "ds-chart-donut",
-      "docs": "",
-      "docsTags": [],
-      "usage": {},
-      "props": [
-        {
-          "name": "activeLabel",
-          "type": "null | string",
-          "complexType": {
-            "original": "string | null",
-            "resolved": "null | string",
-            "references": {}
-          },
-          "mutable": false,
-          "attr": "active-label",
-          "reflectToAttr": false,
-          "docs": "Externally controlled highlight, matched by `label` — e.g. drive this from a sibling\n`ds-chart-legend`'s `dsItemHover` event to keep chart and legend hover in sync.\nFalls back to this component's own pointer/focus hover when unset.\nSlice hover dims peer slices and emits `dsSliceHover` for legend sync. External\nhighlight never opens the local tooltip.",
-          "docsTags": [
-            {
-              "name": "default",
-              "text": "null"
-            }
-          ],
-          "default": "null",
-          "values": [
-            {
-              "type": "null"
-            },
-            {
-              "type": "string"
-            }
-          ],
-          "optional": false,
-          "required": false,
-          "getter": false,
-          "setter": false
-        },
-        {
-          "name": "centerCaption",
-          "type": "string | undefined",
-          "complexType": {
-            "original": "string | undefined",
-            "resolved": "string | undefined",
-            "references": {}
-          },
-          "mutable": false,
-          "attr": "center-caption",
-          "reflectToAttr": false,
-          "docs": "Secondary caption below the center value (e.g. \"Total\", \"Normal\"). Rendered uppercase.",
+          "docs": "Typed chart definition. Set as a JavaScript property, not an HTML attribute.",
           "docsTags": [],
           "values": [
             {
-              "type": "string"
-            },
-            {
-              "type": "undefined"
+              "type": "ChartDefinition<unknown>"
             }
           ],
           "optional": false,
-          "required": false,
+          "required": true,
           "getter": false,
           "setter": false
         },
         {
-          "name": "centerValue",
+          "name": "description",
           "type": "string | undefined",
           "complexType": {
-            "original": "string | undefined",
+            "original": "string",
             "resolved": "string | undefined",
             "references": {}
           },
           "mutable": false,
-          "attr": "center-value",
+          "attr": "description",
           "reflectToAttr": false,
-          "docs": "Primary center value; defaults to the sum of `data` values (e.g. \"187\", \"40.9%\").",
+          "docs": "Optional longer accessible description.",
           "docsTags": [],
           "values": [
             {
@@ -6294,245 +6063,108 @@
               "type": "undefined"
             }
           ],
-          "optional": false,
-          "required": false,
-          "getter": false,
-          "setter": false
-        },
-        {
-          "name": "cornerRadius",
-          "type": "number | string",
-          "complexType": {
-            "original": "number | string",
-            "resolved": "number | string",
-            "references": {}
-          },
-          "mutable": false,
-          "attr": "corner-radius",
-          "reflectToAttr": false,
-          "docs": "Corner radius on each slice — number (px) or TokoMo length. Defaults to `--dimension-radius-025` (2px).",
-          "docsTags": [
-            {
-              "name": "default",
-              "text": "TOKEN_DEFAULTS.radius025"
-            }
-          ],
-          "default": "TOKEN_DEFAULTS.radius025",
-          "values": [
-            {
-              "type": "number"
-            },
-            {
-              "type": "string"
-            }
-          ],
-          "optional": false,
-          "required": false,
-          "getter": false,
-          "setter": false
-        },
-        {
-          "name": "data",
-          "type": "ChartDatum[]",
-          "complexType": {
-            "original": "ChartDatum[]",
-            "resolved": "ChartDatum[]",
-            "references": {
-              "ChartDatum": {
-                "location": "import",
-                "path": "../../utils/chart-types",
-                "id": "src/wc/utils/chart-types.ts::ChartDatum",
-                "referenceLocation": "ChartDatum"
-              }
-            }
-          },
-          "mutable": false,
-          "reflectToAttr": false,
-          "docs": "Slices to render. Set as a JS property (not an HTML attribute).",
-          "docsTags": [
-            {
-              "name": "default",
-              "text": "[]"
-            }
-          ],
-          "default": "[]",
-          "values": [
-            {
-              "type": "ChartDatum[]"
-            }
-          ],
-          "optional": false,
+          "optional": true,
           "required": false,
           "getter": false,
           "setter": false
         },
         {
-          "name": "gap",
-          "type": "number",
+          "name": "height",
+          "type": "number | undefined",
           "complexType": {
             "original": "number",
-            "resolved": "number",
-            "references": {}
-          },
-          "mutable": false,
-          "attr": "gap",
-          "reflectToAttr": false,
-          "docs": "Gap between slices, in degrees.",
-          "docsTags": [
-            {
-              "name": "default",
-              "text": "1"
-            }
-          ],
-          "default": "1",
-          "values": [
-            {
-              "type": "number"
-            }
-          ],
-          "optional": false,
-          "required": false,
-          "getter": false,
-          "setter": false
-        },
-        {
-          "name": "locale",
-          "type": "string | undefined",
-          "complexType": {
-            "original": "string | undefined",
-            "resolved": "string | undefined",
+            "resolved": "number | undefined",
             "references": {}
           },
           "mutable": false,
-          "attr": "locale",
+          "attr": "height",
           "reflectToAttr": false,
-          "docs": "",
+          "docs": "Product-owned surface height. Wins over aspectRatio.",
           "docsTags": [],
           "values": [
             {
-              "type": "string"
+              "type": "number"
             },
             {
               "type": "undefined"
             }
           ],
-          "optional": false,
-          "required": false,
-          "getter": false,
-          "setter": false
-        },
-        {
-          "name": "noDataLabel",
-          "type": "string",
-          "complexType": {
-            "original": "string",
-            "resolved": "string",
-            "references": {}
-          },
-          "mutable": false,
-          "attr": "no-data-label",
-          "reflectToAttr": false,
-          "docs": "",
-          "docsTags": [
-            {
-              "name": "default",
-              "text": "'No data'"
-            }
-          ],
-          "default": "'No data'",
-          "values": [
-            {
-              "type": "string"
-            }
-          ],
-          "optional": false,
+          "optional": true,
           "required": false,
           "getter": false,
           "setter": false
         },
         {
-          "name": "showTooltip",
-          "type": "boolean",
+          "name": "label",
+          "type": "string",
           "complexType": {
-            "original": "boolean",
-            "resolved": "boolean",
+            "original": "string",
+            "resolved": "string",
             "references": {}
           },
           "mutable": false,
-          "attr": "show-tooltip",
+          "attr": "label",
           "reflectToAttr": false,
-          "docs": "Show a chart-owned value callout for genuine pointer or keyboard focus.\nDisable when a visible legend already owns persistent label and value detail.",
-          "docsTags": [
-            {
-              "name": "default",
-              "text": "true"
-            }
-          ],
-          "default": "true",
+          "docs": "Required accessible name for the visualization.",
+          "docsTags": [],
           "values": [
             {
-              "type": "boolean"
+              "type": "string"
             }
           ],
           "optional": false,
-          "required": false,
+          "required": true,
           "getter": false,
           "setter": false
         },
         {
-          "name": "size",
-          "type": "number | undefined",
+          "name": "locale",
+          "type": "string | undefined",
           "complexType": {
-            "original": "number | undefined",
-            "resolved": "number | undefined",
+            "original": "string",
+            "resolved": "string | undefined",
             "references": {}
           },
           "mutable": false,
-          "attr": "size",
+          "attr": "locale",
           "reflectToAttr": false,
-          "docs": "Explicit diameter in px. When unset, the donut sizes to its container\n(ResizeObserver) clamped between `--dimension-size-base * 16` (128px) and\n`* 24` (192px), and stays centered in the leftover space. Prefer unset\ninside card layouts.",
+          "docs": "Locale used by axes and default tooltip formatters.",
           "docsTags": [],
           "values": [
             {
-              "type": "number"
+              "type": "string"
             },
             {
               "type": "undefined"
             }
           ],
-          "optional": false,
+          "optional": true,
           "required": false,
           "getter": false,
           "setter": false
         },
         {
-          "name": "thickness",
-          "type": "number | string",
+          "name": "width",
+          "type": "number | undefined",
           "complexType": {
-            "original": "number | string",
-            "resolved": "number | string",
+            "original": "number",
+            "resolved": "number | undefined",
             "references": {}
           },
           "mutable": false,
-          "attr": "thickness",
+          "attr": "width",
           "reflectToAttr": false,
-          "docs": "Ring thickness — number (px) or TokoMo length. Defaults to `--dimension-size-200` (16px).",
-          "docsTags": [
-            {
-              "name": "default",
-              "text": "TOKEN_DEFAULTS.size200"
-            }
-          ],
-          "default": "TOKEN_DEFAULTS.size200",
+          "docs": "Fixed surface width. Otherwise the chart observes its container.",
+          "docsTags": [],
           "values": [
             {
               "type": "number"
             },
             {
-              "type": "string"
+              "type": "undefined"
             }
           ],
-          "optional": false,
+          "optional": true,
           "required": false,
           "getter": false,
           "setter": false
@@ -6541,24 +6173,23 @@
       "methods": [],
       "events": [
         {
-          "event": "dsSliceHover",
-          "detail": "ChartDatum | null",
+          "event": "dsChartFocusChange",
+          "detail": "ChartFocusChangeDetail",
           "bubbles": true,
           "complexType": {
-            "original": "ChartDatum | null",
-            "resolved": "ChartDatum | null",
+            "original": "ChartFocusChangeDetail",
+            "resolved": "ChartFocusChangeDetail",
             "references": {
-              "ChartDatum": {
-                "location": "import",
-                "path": "../../utils/chart-types",
-                "id": "src/wc/utils/chart-types.ts::ChartDatum",
-                "referenceLocation": "ChartDatum"
+              "ChartFocusChangeDetail": {
+                "location": "local",
+                "path": "/home/runner/work/compomo/compomo/src/wc/components/Chart/Chart.tsx",
+                "id": "src/wc/components/Chart/Chart.tsx::ChartFocusChangeDetail"
               }
             }
           },
           "cancelable": true,
           "composed": true,
-          "docs": "Fires with the hovered/focused slice's datum, or `null` on leave/blur.",
+          "docs": "Fires whenever pointer or keyboard focus resolves to semantic chart points.",
           "docsTags": []
         }
       ],
@@ -6569,13 +6200,13 @@
       "states": [],
       "dependents": [],
       "dependencies": [
-        "ds-tooltip-data-viz"
+        "ds-tooltip-chart"
       ],
       "dependencyGraph": {
-        "ds-chart-donut": [
-          "ds-tooltip-data-viz"
+        "ds-chart": [
+          "ds-tooltip-chart"
         ],
-        "ds-tooltip-data-viz": [
+        "ds-tooltip-chart": [
           "ds-text"
         ]
       }
@@ -6584,7 +6215,7 @@
       "filePath": "src/wc/components/ChartLegend/ChartLegend.tsx",
       "encapsulation": "scoped",
       "tag": "ds-chart-legend",
-      "docs": "Base legend for `ds-chart-*` components. Webapp's Overview widgets each style\nlegends differently (list w/ values, compact chips, bare swatches, external\nstat callouts) — this covers the common \"swatch + label + optional value\" case.\nConsumers who need a different treatment skip this component entirely and\nrender their own markup against the same `ChartDatum[]` data.",
+      "docs": "Base legend for `ds-chart-*` components. Webapp's Overview widgets each style\nlegends differently (list w/ values, compact chips, bare swatches, external\nstat callouts) — this covers the common \"swatch + label + optional value\" case.\nConsumers who need a different treatment skip this component entirely and\nrender their own markup against the same `ChartLegendItem[]` data.",
       "docsTags": [],
       "usage": {},
       "props": [
@@ -6884,176 +6515,6 @@
         ]
       }
     },
-    {
-      "filePath": "src/wc/components/ChartLine/ChartLine.tsx",
-      "encapsulation": "scoped",
-      "tag": "ds-chart-line",
-      "docs": "",
-      "docsTags": [],
-      "usage": {},
-      "props": [
-        {
-          "name": "categories",
-          "type": "string[]",
-          "complexType": {
-            "original": "string[]",
-            "resolved": "string[]",
-            "references": {}
-          },
-          "mutable": false,
-          "reflectToAttr": false,
-          "docs": "X-axis labels — must match each series' `data` length. Set as a JS property.",
-          "docsTags": [
-            {
-              "name": "default",
-              "text": "[]"
-            }
-          ],
-          "default": "[]",
-          "values": [
-            {
-              "type": "string[]"
-            }
-          ],
-          "optional": false,
-          "required": false,
-          "getter": false,
-          "setter": false
-        },
-        {
-          "name": "height",
-          "type": "number",
-          "complexType": {
-            "original": "number",
-            "resolved": "number",
-            "references": {}
-          },
-          "mutable": false,
-          "attr": "height",
-          "reflectToAttr": false,
-          "docs": "Standalone intrinsic height. Container constraints reflow the plot at rendered pixel size.",
-          "docsTags": [
-            {
-              "name": "default",
-              "text": "240"
-            }
-          ],
-          "default": "240",
-          "values": [
-            {
-              "type": "number"
-            }
-          ],
-          "optional": false,
-          "required": false,
-          "getter": false,
-          "setter": false
-        },
-        {
-          "name": "series",
-          "type": "ChartSeries[]",
-          "complexType": {
-            "original": "ChartSeries[]",
-            "resolved": "ChartSeries[]",
-            "references": {
-              "ChartSeries": {
-                "location": "import",
-                "path": "../../utils/chart-types",
-                "id": "src/wc/utils/chart-types.ts::ChartSeries",
-                "referenceLocation": "ChartSeries"
-              }
-            }
-          },
-          "mutable": false,
-          "reflectToAttr": false,
-          "docs": "One or more series to plot. Set as a JS property (not an HTML attribute).",
-          "docsTags": [
-            {
-              "name": "default",
-              "text": "[]"
-            }
-          ],
-          "default": "[]",
-          "values": [
-            {
-              "type": "ChartSeries[]"
-            }
-          ],
-          "optional": false,
-          "required": false,
-          "getter": false,
-          "setter": false
-        },
-        {
-          "name": "showPoints",
-          "type": "boolean",
-          "complexType": {
-            "original": "boolean",
-            "resolved": "boolean",
-            "references": {}
-          },
-          "mutable": false,
-          "attr": "show-points",
-          "reflectToAttr": false,
-          "docs": "",
-          "docsTags": [
-            {
-              "name": "default",
-              "text": "true"
-            }
-          ],
-          "default": "true",
-          "values": [
-            {
-              "type": "boolean"
-            }
-          ],
-          "optional": false,
-          "required": false,
-          "getter": false,
-          "setter": false
-        },
-        {
-          "name": "width",
-          "type": "number",
-          "complexType": {
-            "original": "number",
-            "resolved": "number",
-            "references": {}
-          },
-          "mutable": false,
-          "attr": "width",
-          "reflectToAttr": false,
-          "docs": "Standalone intrinsic width. Container constraints reflow the plot at rendered pixel size.",
-          "docsTags": [
-            {
-              "name": "default",
-              "text": "480"
-            }
-          ],
-          "default": "480",
-          "values": [
-            {
-              "type": "number"
-            }
-          ],
-          "optional": false,
-          "required": false,
-          "getter": false,
-          "setter": false
-        }
-      ],
-      "methods": [],
-      "events": [],
-      "listeners": [],
-      "styles": [],
-      "slots": [],
-      "parts": [],
-      "states": [],
-      "dependents": [],
-      "dependencies": [],
-      "dependencyGraph": {}
-    },
     {
       "filePath": "src/wc/components/Checkbox/Checkbox.tsx",
       "encapsulation": "scoped",
@@ -23225,7 +22686,7 @@
         "ds-breadcrumb",
         "ds-button-filled",
         "ds-button-unfilled",
-        "ds-card-data-viz",
+        "ds-card-chart",
         "ds-card-overview",
         "ds-card-setting",
         "ds-chart-legend",
@@ -23254,7 +22715,7 @@
         "ds-tag",
         "ds-toast",
         "ds-tooltip",
-        "ds-tooltip-data-viz",
+        "ds-tooltip-chart",
         "ds-typing-indicator"
       ],
       "dependencies": [],
@@ -23295,7 +22756,7 @@
         "ds-button-unfilled": [
           "ds-text"
         ],
-        "ds-card-data-viz": [
+        "ds-card-chart": [
           "ds-text"
         ],
         "ds-card-overview": [
@@ -23382,7 +22843,7 @@
         "ds-tooltip": [
           "ds-text"
         ],
-        "ds-tooltip-data-viz": [
+        "ds-tooltip-chart": [
           "ds-text"
         ],
         "ds-typing-indicator": [
@@ -24125,10 +23586,10 @@
       }
     },
     {
-      "filePath": "src/wc/components/TooltipDataViz/TooltipDataViz.tsx",
+      "filePath": "src/wc/components/TooltipChart/TooltipChart.tsx",
       "encapsulation": "scoped",
-      "tag": "ds-tooltip-data-viz",
-      "docs": "Positioned value/label callout for chart hover interactions (bar, line point,\nstandalone donut slice, …). Donut compositions suppress it when a visible\nlegend already surfaces the hovered slice.\nUnlike `ds-tooltip`, this doesn't bind to a slotted anchor element —\ncharts hover-highlight data that lives inside an SVG, so the chart itself computes\nthe anchor point (e.g. the cursor position while hovering) and passes it in as `x`/`y`.\n\nRenders `position: absolute` — place inside a `position: relative` chart wrapper,\nwith `x`/`y` as pixel coordinates within that wrapper. Defaults to sitting below-right\nof the anchor (matching cursor-following tooltips), flipping to whichever side/edge\nkeeps it on-screen.\n\nMount (or remount) when a hover session starts so `delay` applies once per hover;\nkeep the instance mounted while the cursor moves so tracking stays instant.",
+      "tag": "ds-tooltip-chart",
+      "docs": "Positioned value/label callout for chart hover interactions (bar, line point,\npolar arc, …). A composition may suppress it when a visible legend already\nsurfaces the same value.\nUnlike `ds-tooltip`, this doesn't bind to a slotted anchor element —\ncharts hover-highlight data that lives inside an SVG, so the chart itself computes\nthe anchor point (e.g. the cursor position while hovering) and passes it in as `x`/`y`.\n\nRenders `position: absolute` — place inside a `position: relative` chart wrapper,\nwith `x`/`y` as pixel coordinates within that wrapper. Defaults to sitting below-right\nof the anchor (matching cursor-following tooltips), flipping to whichever side/edge\nkeeps it on-screen.\n\nMount (or remount) when a hover session starts so `delay` applies once per hover;\nkeep the instance mounted while the cursor moves so tracking stays instant.",
       "docsTags": [],
       "usage": {},
       "props": [
@@ -24164,6 +23625,63 @@
           "getter": false,
           "setter": false
         },
+        {
+          "name": "heading",
+          "type": "string | undefined",
+          "complexType": {
+            "original": "string",
+            "resolved": "string | undefined",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "heading",
+          "reflectToAttr": false,
+          "docs": "Optional heading for grouped chart focus.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            },
+            {
+              "type": "undefined"
+            }
+          ],
+          "optional": true,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "items",
+          "type": "TooltipChartItem[] | undefined",
+          "complexType": {
+            "original": "TooltipChartItem[]",
+            "resolved": "TooltipChartItem[] | undefined",
+            "references": {
+              "TooltipChartItem": {
+                "location": "local",
+                "path": "/home/runner/work/compomo/compomo/src/wc/components/TooltipChart/TooltipChart.tsx",
+                "id": "src/wc/components/TooltipChart/TooltipChart.tsx::TooltipChartItem"
+              }
+            }
+          },
+          "mutable": false,
+          "reflectToAttr": false,
+          "docs": "Multi-row content. When supplied, this replaces the legacy label/value row.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "TooltipChartItem[]"
+            },
+            {
+              "type": "undefined"
+            }
+          ],
+          "optional": true,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
         {
           "name": "label",
           "type": "string",
@@ -24292,17 +23810,17 @@
       "parts": [],
       "states": [],
       "dependents": [
-        "ds-chart-donut"
+        "ds-chart"
       ],
       "dependencies": [
         "ds-text"
       ],
       "dependencyGraph": {
-        "ds-tooltip-data-viz": [
+        "ds-tooltip-chart": [
           "ds-text"
         ],
-        "ds-chart-donut": [
-          "ds-tooltip-data-viz"
+        "ds-chart": [
+          "ds-tooltip-chart"
         ]
       }
     },
@@ -24468,15 +23986,15 @@
       "docstring": "",
       "path": "src/wc/components/ButtonUnfilled/ButtonUnfilled.tsx"
     },
-    "src/wc/components/CardDataViz/CardDataViz.tsx::CardDataVizVariant": {
-      "declaration": "export type CardDataVizVariant = 'custom' | 'bar' | 'line' | 'donut';",
+    "src/wc/components/CardChart/CardChart.tsx::CardChartVariant": {
+      "declaration": "export type CardChartVariant = 'custom' | 'chart';",
       "docstring": "",
-      "path": "src/wc/components/CardDataViz/CardDataViz.tsx"
+      "path": "src/wc/components/CardChart/CardChart.tsx"
     },
-    "src/wc/components/CardDataViz/CardDataViz.tsx::CardDataVizWidth": {
-      "declaration": "export type CardDataVizWidth = 'sm' | 'md' | 'lg';",
+    "src/wc/components/CardChart/CardChart.tsx::CardChartWidth": {
+      "declaration": "export type CardChartWidth = 'sm' | 'md' | 'lg';",
       "docstring": "",
-      "path": "src/wc/components/CardDataViz/CardDataViz.tsx"
+      "path": "src/wc/components/CardChart/CardChart.tsx"
     },
     "src/wc/components/CardSetting/CardSetting.tsx::CardSettingWidth": {
       "declaration": "export type CardSettingWidth = 'sm' | 'md' | 'lg';",
@@ -24488,20 +24006,15 @@
       "docstring": "",
       "path": "src/wc/components/CardSetting/CardSetting.tsx"
     },
-    "src/wc/components/ChartBar/ChartBar.tsx::ChartBarVariant": {
-      "declaration": "export type ChartBarVariant = 'single' | 'stacked' | 'percentage';",
+    "src/wc/utils/chart-grammar.ts::ChartDefinition": {
+      "declaration": "export interface ChartDefinition<TDatum = unknown> {\n  chart: ChartSpec<TDatum> | ChartSpecBuilder<TDatum>;\n}",
       "docstring": "",
-      "path": "src/wc/components/ChartBar/ChartBar.tsx"
-    },
-    "src/wc/utils/chart-types.ts::ChartDatum": {
-      "declaration": "export interface ChartDatum {\n  label: string;\n  value: number;\n  /** CSS color override; defaults to the next `--color-data-category-*` token. */\n  color?: string;\n}",
-      "docstring": "Shared data shapes for `ds-chart-*` components — kept minimal for the initial scaffold, expect these to grow per component once design is finalized.",
-      "path": "src/wc/utils/chart-types.ts"
+      "path": "src/wc/utils/chart-grammar.ts"
     },
-    "src/wc/utils/chart-types.ts::ChartSeries": {
-      "declaration": "export interface ChartSeries {\n  name: string;\n  data: number[];\n  /** CSS color override; defaults to the next `--color-data-category-*` token. */\n  color?: string;\n}",
+    "src/wc/components/Chart/Chart.tsx::ChartFocusChangeDetail": {
+      "declaration": "export interface ChartFocusChangeDetail {\n  primary: ChartPoint | null;\n  points: readonly ChartPoint[];\n  source: ChartFocusSource;\n}",
       "docstring": "",
-      "path": "src/wc/utils/chart-types.ts"
+      "path": "src/wc/components/Chart/Chart.tsx"
     },
     "src/wc/utils/chart-types.ts::ChartLegendItem": {
       "declaration": "export interface ChartLegendItem {\n  label: string;\n  value?: number;\n  /** CSS color override; defaults to the next `--color-data-category-*` token. */\n  color?: string;\n  /** When set, the row renders as a link (e.g. to a filtered list page for this segment). */\n  href?: string;\n}",
@@ -24808,6 +24321,11 @@
       "docstring": "",
       "path": "src/wc/components/Tooltip/Tooltip.tsx"
     },
+    "src/wc/components/TooltipChart/TooltipChart.tsx::TooltipChartItem": {
+      "declaration": "export interface TooltipChartItem {\n  label: string;\n  value: string | number;\n  color?: string;\n}",
+      "docstring": "",
+      "path": "src/wc/components/TooltipChart/TooltipChart.tsx"
+    },
     "src/wc/components/conversation-types.ts::AgentActivityItem": {
       "declaration": "export interface AgentActivityItem {\n  id: string;\n  label: string;\n  detail?: string;\n  state: AgentActivityState;\n}",
       "docstring": "",