@ds-mo/ui 11.0.0 → 11.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (96) hide show
  1. package/dist/.build-stamp +1 -1
  2. package/dist/agent-patterns.json +1 -1
  3. package/dist/agent.json +433 -20
  4. package/dist/angular/ds-button-filled.d.ts +1 -1
  5. package/dist/angular/ds-button-filled.js +3 -3
  6. package/dist/angular/ds-chart-donut.d.ts +1 -1
  7. package/dist/angular/ds-chart-donut.js +3 -3
  8. package/dist/components/ds-agent-response.js +1 -1
  9. package/dist/components/ds-bar-nav.js +1 -1
  10. package/dist/components/ds-button-filled.js +1 -1
  11. package/dist/components/ds-card-data-viz-donut.js +1 -1
  12. package/dist/components/ds-card-data-viz-donut.js.map +1 -1
  13. package/dist/components/ds-card-setting.js +1 -1
  14. package/dist/components/ds-chart-donut.js +1 -1
  15. package/dist/components/ds-chart-donut.js.map +1 -1
  16. package/dist/components/ds-chart-line.js +1 -1
  17. package/dist/components/ds-code-block.js +1 -1
  18. package/dist/components/ds-conversation-list-item.js +1 -1
  19. package/dist/components/ds-conversation-list-section.js +1 -1
  20. package/dist/components/ds-conversation-list.js +1 -1
  21. package/dist/components/ds-empty-state.js +1 -1
  22. package/dist/components/ds-field.js +1 -1
  23. package/dist/components/ds-markdown.js +1 -1
  24. package/dist/components/ds-menu.js +1 -1
  25. package/dist/components/ds-message-composer.js +1 -1
  26. package/dist/components/ds-message-composer.js.map +1 -1
  27. package/dist/components/ds-message-scroller.js +1 -1
  28. package/dist/components/ds-message.js +1 -1
  29. package/dist/components/ds-modal.js +1 -1
  30. package/dist/components/ds-modal.js.map +1 -1
  31. package/dist/components/ds-panel-nav.js +1 -1
  32. package/dist/components/ds-panel-tool-header.js +1 -1
  33. package/dist/components/ds-panel-tool-search.js +1 -1
  34. package/dist/components/ds-panel-tools.js +1 -1
  35. package/dist/components/ds-select-multi.js +1 -1
  36. package/dist/components/ds-select-multi.js.map +1 -1
  37. package/dist/components/ds-select.js +1 -1
  38. package/dist/components/ds-select.js.map +1 -1
  39. package/dist/components/ds-shell-gradient-picker.js +1 -1
  40. package/dist/components/ds-shell-gradient-picker.js.map +1 -1
  41. package/dist/components/ds-shell-gradient-swatch.js +1 -1
  42. package/dist/components/ds-swatch-picker.js +1 -1
  43. package/dist/components/ds-toast.js +1 -1
  44. package/dist/components/ds-toast.js.map +1 -1
  45. package/dist/components/ds-tooltip-data-viz.js +1 -1
  46. package/dist/components/ds-tooltip-data-viz.js.map +1 -1
  47. package/dist/components/ds-tooltip.js +1 -1
  48. package/dist/components/ds-typing-indicator.js +1 -1
  49. package/dist/components/p-BCCt2eT_.js +2 -0
  50. package/dist/components/{p-BMwnjAIq.js.map → p-BCCt2eT_.js.map} +1 -1
  51. package/dist/components/{p-CbckeueL.js → p-B_qVPsEU.js} +2 -2
  52. package/dist/components/p-BaZRP4Oo.js +2 -0
  53. package/dist/components/p-BaZRP4Oo.js.map +1 -0
  54. package/dist/components/p-Bet_UjML.js +2 -0
  55. package/dist/components/{p-C8e2A66f.js.map → p-Bet_UjML.js.map} +1 -1
  56. package/dist/components/p-BsnezUUC.js +2 -0
  57. package/dist/components/{p-C3nDIMX5.js.map → p-BsnezUUC.js.map} +1 -1
  58. package/dist/components/{p-Hw-HMjCk.js → p-C1K5QGUZ.js} +2 -2
  59. package/dist/components/p-CrwU83-g.js +2 -0
  60. package/dist/components/{p-C_0Q8Cnp.js.map → p-CrwU83-g.js.map} +1 -1
  61. package/dist/components/{p-M5pt9I13.js → p-CyoHRqy6.js} +2 -2
  62. package/dist/components/{p-bDx_rlLm.js → p-P_4vE1ub.js} +2 -2
  63. package/dist/components/p-ZTugT4as.js +2 -0
  64. package/dist/components/{p-DirD-b2y.js.map → p-ZTugT4as.js.map} +1 -1
  65. package/dist/components/p-bNpFhP5L.js +2 -0
  66. package/dist/components/p-bNpFhP5L.js.map +1 -0
  67. package/dist/docs/components.json +144 -6
  68. package/dist/mcp/cli.js +8 -12
  69. package/dist/mcp-data/registry/button-filled.json +38 -2
  70. package/dist/mcp-data/registry/card-data-viz-donut.json +73 -4
  71. package/dist/mcp-data/registry/chart-bar.json +67 -3
  72. package/dist/mcp-data/registry/chart-donut.json +94 -8
  73. package/dist/mcp-data/registry/chart-legend.json +73 -3
  74. package/dist/mcp-data/registry/chart-line.json +67 -3
  75. package/dist/mcp-data/registry/registry.json +432 -19
  76. package/dist/mcp-data/registry/tooltip-data-viz.json +68 -4
  77. package/dist/types/components/ButtonFilled/ButtonFilled.d.ts +9 -0
  78. package/dist/types/components/ButtonFilled/index.d.ts +1 -1
  79. package/dist/types/components/CardDataVizDonut/CardDataVizDonut.d.ts +1 -0
  80. package/dist/types/components/ChartDonut/ChartDonut.d.ts +12 -2
  81. package/dist/types/components/TooltipDataViz/TooltipDataViz.d.ts +3 -2
  82. package/dist/types/components.d.ts +47 -12
  83. package/package.json +1 -1
  84. package/dist/components/p-BHtg1fh3.js +0 -2
  85. package/dist/components/p-BHtg1fh3.js.map +0 -1
  86. package/dist/components/p-BMwnjAIq.js +0 -2
  87. package/dist/components/p-C3nDIMX5.js +0 -2
  88. package/dist/components/p-C8e2A66f.js +0 -2
  89. package/dist/components/p-CTFBf97-.js +0 -2
  90. package/dist/components/p-CTFBf97-.js.map +0 -1
  91. package/dist/components/p-C_0Q8Cnp.js +0 -2
  92. package/dist/components/p-DirD-b2y.js +0 -2
  93. /package/dist/components/{p-CbckeueL.js.map → p-B_qVPsEU.js.map} +0 -0
  94. /package/dist/components/{p-Hw-HMjCk.js.map → p-C1K5QGUZ.js.map} +0 -0
  95. /package/dist/components/{p-M5pt9I13.js.map → p-CyoHRqy6.js.map} +0 -0
  96. /package/dist/components/{p-bDx_rlLm.js.map → p-P_4vE1ub.js.map} +0 -0
package/dist/.build-stamp CHANGED
@@ -1 +1 @@
1
- 1784673452141
1
+ 1784676301937
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "schemaVersion": "1.0.0",
3
3
  "package": "@ds-mo/ui",
4
- "packageVersion": "11.0.0",
4
+ "packageVersion": "11.1.0",
5
5
  "kind": "patterns",
6
6
  "entries": [
7
7
  {
package/dist/agent.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "schemaVersion": "1.0.0",
3
3
  "package": "@ds-mo/ui",
4
- "packageVersion": "11.0.0",
4
+ "packageVersion": "11.1.0",
5
5
  "kind": "components",
6
6
  "entries": [
7
7
  {
@@ -933,6 +933,8 @@
933
933
  "Use only one filled action per local decision area; render all secondary actions with ButtonUnfilled.",
934
934
  "Choose brand or neutral for general commands. Reserve positive, negative, warning, and caution for matching action consequences, and AI, guide, or walkthrough for actions that enter those feature experiences.",
935
935
  "Contrast serves both surface adaptation and hierarchy, but never permits a second filled action in the same decision area.",
936
+ "The optional inset border is off by default. Enable it only when the filled action needs an explicit edge against its parent surface.",
937
+ "Parent surface context changes only the optional inset border color. Contrast continues to own the button fill, foreground, hover, pressed, and focus treatments; never use surface context to change action hierarchy.",
936
938
  "Rounded changes only the control radius to the half-radius treatment; it does not change hierarchy, size, variant, intent, or interaction semantics.",
937
939
  "Loading prevents duplicate activation without applying inactive opacity or removing the current keyboard focus.",
938
940
  "Icon and icon-label loading replace the icon in place. Label-only loading centers the loader while preserving the button's measured width."
@@ -964,10 +966,18 @@
964
966
  "type": "string | null",
965
967
  "required": false
966
968
  },
969
+ "background": {
970
+ "type": "ButtonFilledBackground | undefined",
971
+ "required": false
972
+ },
967
973
  "contrast": {
968
974
  "type": "ButtonFilledContrast",
969
975
  "required": false
970
976
  },
977
+ "hasBorder": {
978
+ "type": "boolean",
979
+ "required": false
980
+ },
971
981
  "icon": {
972
982
  "type": "string",
973
983
  "required": false
@@ -1237,9 +1247,78 @@
1237
1247
  "tag": "ds-card-data-viz-donut",
1238
1248
  "name": "card-data-viz-donut",
1239
1249
  "title": "CardDataVizDonut",
1240
- "summary": "Donut data-viz card on dedicated ds-card-shell-data-viz chrome fill chart region, content-sized legend, header filter action, and chart↔legend hover sync.",
1241
- "intentStatus": "migration-pending",
1242
- "intent": null,
1250
+ "summary": "Canonical donut-plus-legend dashboard card with shared data-viz chrome, a filter action, fill chart region, content-sized legend, and built-in hover synchronization.",
1251
+ "intentStatus": "complete",
1252
+ "intent": {
1253
+ "audience": "specialized",
1254
+ "status": "experimental",
1255
+ "summary": "Canonical donut-plus-legend dashboard card with shared data-viz chrome, a filter action, fill chart region, content-sized legend, and built-in hover synchronization.",
1256
+ "useWhen": [
1257
+ "A dashboard widget needs the standard donut and visible legend composition in one data-viz card.",
1258
+ "Chart slices and legend rows should cross-highlight without application hover wiring.",
1259
+ "The card needs the shared header filter action while the application owns filter state and menu content."
1260
+ ],
1261
+ "avoidWhen": [
1262
+ "The visualization is a bar, line, metric, or custom chart; compose CardShellDataViz directly.",
1263
+ "The product needs a custom legend treatment such as chips, external stat callouts, or selectable filters.",
1264
+ "The surface is a settings section or generic content card."
1265
+ ],
1266
+ "alternatives": [
1267
+ {
1268
+ "when": "The visualization needs shared data-viz chrome without the canonical donut layout.",
1269
+ "component": "component:ds-card-shell-data-viz",
1270
+ "reason": "CardShellDataViz owns only the header, actions, width, and body boundary."
1271
+ },
1272
+ {
1273
+ "when": "A donut and legend need a custom layout without card chrome.",
1274
+ "component": "component:ds-chart-donut",
1275
+ "reason": "Compose the chart and ChartLegend directly and own their layout and hover synchronization."
1276
+ }
1277
+ ],
1278
+ "commonlyComposedWith": [
1279
+ "component:ds-card-shell-data-viz",
1280
+ "component:ds-chart-donut",
1281
+ "component:ds-chart-legend",
1282
+ "component:ds-empty-state",
1283
+ "component:ds-skeleton"
1284
+ ],
1285
+ "accessibility": [
1286
+ "Provide a concise card heading and a localized filter label for the icon-only header action.",
1287
+ "Keep essential values available through the chart and visible legend rather than encoding meaning through slice color alone.",
1288
+ "The application owns meaningful loading, empty, and error status copy when either content region is temporarily replaced or absent."
1289
+ ],
1290
+ "states": [
1291
+ "The chart region fills remaining card height while the legend remains content-sized.",
1292
+ "Chart and legend regions render only when their corresponding slots contain content, allowing the owner to substitute loading, empty, or error presentations without dangling region padding.",
1293
+ "Hover synchronization changes highlight only; it never represents selection, filtering, or navigation.",
1294
+ "The filter action emits intent while the parent owns popup content, applied constraints, and data updates."
1295
+ ],
1296
+ "responsiveBehavior": [
1297
+ "Select the token-based card width appropriate to the parent grid; the matching minimum height preserves the chart region.",
1298
+ "The parent dashboard owns wrapping and column changes while the internal chart-over-legend arrangement remains stable."
1299
+ ],
1300
+ "frameworkCaveats": {
1301
+ "customElements": [
1302
+ "Assign chart data and legend items as JavaScript properties and place the components in the chart and legend slots."
1303
+ ],
1304
+ "react": [
1305
+ "Keep filter and dataset state in the owner; the card handles hover synchronization for the canonical slotted pair."
1306
+ ],
1307
+ "angular": [
1308
+ "Keep filter and dataset state in the owner; the card handles hover synchronization for the canonical slotted pair."
1309
+ ]
1310
+ },
1311
+ "references": [
1312
+ {
1313
+ "label": "Storybook examples",
1314
+ "path": "src/wc/components/CardDataVizDonut/CardDataVizDonut.stories.ts"
1315
+ },
1316
+ {
1317
+ "label": "Dashboard review examples",
1318
+ "path": "src/wc/stories/DataViz/OverviewReview.stories.ts"
1319
+ }
1320
+ ]
1321
+ },
1243
1322
  "api": {
1244
1323
  "props": {
1245
1324
  "cardWidth": {
@@ -1526,9 +1605,73 @@
1526
1605
  "tag": "ds-chart-bar",
1527
1606
  "name": "chart-bar",
1528
1607
  "title": "ChartBar",
1529
- "summary": "ChartBar component from @ds-mo/ui.",
1530
- "intentStatus": "migration-pending",
1531
- "intent": null,
1608
+ "summary": "Single-series bar chart for comparing discrete categories or evenly spaced time buckets on a band-scaled axis.",
1609
+ "intentStatus": "complete",
1610
+ "intent": {
1611
+ "audience": "specialized",
1612
+ "status": "experimental",
1613
+ "summary": "Single-series bar chart for comparing discrete categories or evenly spaced time buckets on a band-scaled axis.",
1614
+ "useWhen": [
1615
+ "Users need to compare one numeric measure across a small set of categories.",
1616
+ "Values are grouped into ordered time buckets such as hours, days, weeks, or months and equal visual spacing is appropriate.",
1617
+ "A data-viz card needs a compact magnitude comparison rather than a continuous trend."
1618
+ ],
1619
+ "avoidWhen": [
1620
+ "Timestamp positions must reflect irregular elapsed time; pre-bucket the data or use a future continuous time-scale chart.",
1621
+ "The visualization needs stacked, grouped, or multi-series bars.",
1622
+ "The interaction requires selection, drill-down, brushing, or zoom.",
1623
+ "The data communicates a part-to-whole relationship."
1624
+ ],
1625
+ "alternatives": [
1626
+ {
1627
+ "when": "Users need to follow one or more trends across ordered categories.",
1628
+ "component": "component:ds-chart-line",
1629
+ "reason": "ChartLine connects ordered observations and supports multiple named series."
1630
+ },
1631
+ {
1632
+ "when": "The data communicates parts of a total.",
1633
+ "component": "component:ds-chart-donut",
1634
+ "reason": "ChartDonut provides the part-to-whole composition and center aggregate."
1635
+ }
1636
+ ],
1637
+ "commonlyComposedWith": [
1638
+ "component:ds-card-shell-data-viz",
1639
+ "component:ds-tooltip-data-viz"
1640
+ ],
1641
+ "accessibility": [
1642
+ "Keep category labels concise and provide an adjacent textual summary when exact values are critical to completing a task.",
1643
+ "Do not rely on bar color alone to communicate category meaning.",
1644
+ "A future interactive tooltip must supplement rather than replace the chart's accessible value representation."
1645
+ ],
1646
+ "states": [
1647
+ "The chart is currently a static single-series rendering without hover, selection, loading, or empty-state policy.",
1648
+ "An empty dataset renders no bars; the owning card or product supplies meaningful empty-state messaging.",
1649
+ "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.",
1650
+ "Authored datum colors override the shared categorical palette."
1651
+ ],
1652
+ "responsiveBehavior": [
1653
+ "The owner supplies dimensions and updates them with its layout; the chart does not measure its container.",
1654
+ "Limit or pre-format long category labels so they remain legible at the chosen width.",
1655
+ "Time labels remain ordered, pre-formatted buckets with equal spacing rather than raw continuous timestamps."
1656
+ ],
1657
+ "frameworkCaveats": {
1658
+ "customElements": [
1659
+ "Assign data as a JavaScript property; arrays are not supported as HTML attributes."
1660
+ ],
1661
+ "react": [
1662
+ "Pass a stable data array and dimensions derived from the containing layout."
1663
+ ],
1664
+ "angular": [
1665
+ "Bind data as a property and update dimensions from the containing layout."
1666
+ ]
1667
+ },
1668
+ "references": [
1669
+ {
1670
+ "label": "Storybook examples",
1671
+ "path": "src/wc/components/ChartBar/ChartBar.stories.ts"
1672
+ }
1673
+ ]
1674
+ },
1532
1675
  "api": {
1533
1676
  "props": {
1534
1677
  "data": {
@@ -1563,9 +1706,75 @@
1563
1706
  "tag": "ds-chart-donut",
1564
1707
  "name": "chart-donut",
1565
1708
  "title": "ChartDonut",
1566
- "summary": "ChartDonut component from @ds-mo/ui.",
1567
- "intentStatus": "migration-pending",
1568
- "intent": null,
1709
+ "summary": "Part-to-whole donut chart with a center aggregate, responsive fill sizing, local slice tooltip feedback, and externally controlled legend highlighting.",
1710
+ "intentStatus": "complete",
1711
+ "intent": {
1712
+ "audience": "specialized",
1713
+ "status": "experimental",
1714
+ "summary": "Part-to-whole donut chart with a center aggregate, responsive fill sizing, local slice tooltip feedback, and externally controlled legend highlighting.",
1715
+ "useWhen": [
1716
+ "Users need to understand a small part-to-whole breakdown with a prominent total or status in the center.",
1717
+ "A standalone donut needs pointer and keyboard-focus value feedback through a chart-owned data-viz tooltip.",
1718
+ "A donut and visible ChartLegend should cross-highlight by matching stable labels."
1719
+ ],
1720
+ "avoidWhen": [
1721
+ "The data is a trend, time sequence, or independent magnitude comparison.",
1722
+ "The category count creates slices too small to understand reliably.",
1723
+ "Hover is intended to select, filter, or navigate rather than temporarily highlight data."
1724
+ ],
1725
+ "alternatives": [
1726
+ {
1727
+ "when": "The product needs the canonical card, filter action, visible legend, and built-in hover synchronization.",
1728
+ "component": "component:ds-card-data-viz-donut",
1729
+ "reason": "The dedicated card owns that complete composition and suppresses redundant slice tooltips."
1730
+ },
1731
+ {
1732
+ "when": "Users need to compare independent category magnitudes.",
1733
+ "component": "component:ds-chart-bar",
1734
+ "reason": "Bars make category magnitude differences easier to compare."
1735
+ }
1736
+ ],
1737
+ "commonlyComposedWith": [
1738
+ "component:ds-chart-legend",
1739
+ "component:ds-tooltip-data-viz",
1740
+ "component:ds-card-data-viz-donut"
1741
+ ],
1742
+ "accessibility": [
1743
+ "Every non-empty slice remains keyboard focusable and exposes its label and value without depending on the visual tooltip.",
1744
+ "Use a visible legend when the full set of labels, values, or percentages must remain continuously available.",
1745
+ "Provide localized no-data text for the neutral empty ring.",
1746
+ "Center text is a visual summary and must not be the only source of essential category detail."
1747
+ ],
1748
+ "states": [
1749
+ "Genuine local pointer or keyboard focus may show a chart-owned tooltip; externally synchronized highlight never opens it.",
1750
+ "When a visible legend already owns label and value detail, suppress the redundant donut tooltip. CardDataVizDonut does this automatically.",
1751
+ "Local hover and external highlight remain separate while both may dim non-matching slices.",
1752
+ "Zero or negative totals render a neutral empty ring without interactive slices.",
1753
+ "Center value and caption truncate when they exceed the safe inner-circle measure."
1754
+ ],
1755
+ "responsiveBehavior": [
1756
+ "Prefer container-fill sizing inside data-viz cards and explicit sizing only in layouts that own a stable diameter.",
1757
+ "Fill sizing remains centered and constrained to the shared donut size band.",
1758
+ "The owner adapts category count and legend placement for available space."
1759
+ ],
1760
+ "frameworkCaveats": {
1761
+ "customElements": [
1762
+ "Assign data as a JavaScript property and wire slice-hover detail to a sibling legend only when not using CardDataVizDonut."
1763
+ ],
1764
+ "react": [
1765
+ "Keep synchronized highlight controlled by the composition and disable slice tooltips when a sibling legend continuously shows the same details."
1766
+ ],
1767
+ "angular": [
1768
+ "Keep synchronized highlight controlled by the composition and disable slice tooltips when a sibling legend continuously shows the same details."
1769
+ ]
1770
+ },
1771
+ "references": [
1772
+ {
1773
+ "label": "Storybook examples",
1774
+ "path": "src/wc/components/ChartDonut/ChartDonut.stories.ts"
1775
+ }
1776
+ ]
1777
+ },
1569
1778
  "api": {
1570
1779
  "props": {
1571
1780
  "activeLabel": {
@@ -1600,6 +1809,10 @@
1600
1809
  "type": "string",
1601
1810
  "required": false
1602
1811
  },
1812
+ "showTooltip": {
1813
+ "type": "boolean",
1814
+ "required": false
1815
+ },
1603
1816
  "size": {
1604
1817
  "type": "number | undefined",
1605
1818
  "required": false
@@ -1626,16 +1839,88 @@
1626
1839
  "@ds-mo/ui",
1627
1840
  "@ds-mo/tokens"
1628
1841
  ],
1629
- "componentDependencies": []
1842
+ "componentDependencies": [
1843
+ "tooltip-data-viz"
1844
+ ]
1630
1845
  },
1631
1846
  {
1632
1847
  "id": "component:ds-chart-legend",
1633
1848
  "tag": "ds-chart-legend",
1634
1849
  "name": "chart-legend",
1635
1850
  "title": "ChartLegend",
1636
- "summary": "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.",
1637
- "intentStatus": "migration-pending",
1638
- "intent": null,
1851
+ "summary": "Display-first chart legend with swatches, labels, optional values and percentages, explicit deep links, and highlight-only chart synchronization.",
1852
+ "intentStatus": "complete",
1853
+ "intent": {
1854
+ "audience": "specialized",
1855
+ "status": "experimental",
1856
+ "summary": "Display-first chart legend with swatches, labels, optional values and percentages, explicit deep links, and highlight-only chart synchronization.",
1857
+ "useWhen": [
1858
+ "A chart needs the standard swatch, label, and optional numeric-detail legend.",
1859
+ "Donut slices or line series need a continuously visible key beside or below the visualization.",
1860
+ "A category has an explicit deep-link destination and should render as an accessible link."
1861
+ ],
1862
+ "avoidWhen": [
1863
+ "The design calls for chips, bare swatches, external stat callouts, or another custom legend treatment.",
1864
+ "Rows need to toggle visibility, filter data, or represent selection.",
1865
+ "The content is a command menu or navigation list unrelated to chart data."
1866
+ ],
1867
+ "alternatives": [
1868
+ {
1869
+ "when": "The product needs a nonstandard legend treatment.",
1870
+ "component": "component:ds-text",
1871
+ "reason": "Compose product-owned semantic markup from the same chart data rather than forcing it into this row recipe."
1872
+ },
1873
+ {
1874
+ "when": "The donut belongs in the canonical dashboard card.",
1875
+ "component": "component:ds-card-data-viz-donut",
1876
+ "reason": "The dedicated card places the legend and handles bidirectional highlight synchronization."
1877
+ }
1878
+ ],
1879
+ "commonlyComposedWith": [
1880
+ "component:ds-chart-donut",
1881
+ "component:ds-chart-line",
1882
+ "component:ds-card-data-viz-donut",
1883
+ "component:ds-card-shell-data-viz"
1884
+ ],
1885
+ "accessibility": [
1886
+ "Rows remain non-interactive unless the item supplies an actual link destination.",
1887
+ "Synced highlight changes opacity only and never moves focus or announces selection.",
1888
+ "Keep full labels available when visible text truncates, and retain stable tabular numeric columns.",
1889
+ "Do not rely on swatch color alone; every entry requires a meaningful visible label."
1890
+ ],
1891
+ "states": [
1892
+ "Local pointer or focus interaction and external chart highlight remain separate; both may dim peers, but only a real link row receives interactive affordances.",
1893
+ "Hover synchronization is temporary emphasis, never filtering, toggling, or selected state.",
1894
+ "Percentage values use one consistent precision across the complete legend.",
1895
+ "The list owns pointer leave so moving across row gaps does not clear and reapply highlight."
1896
+ ],
1897
+ "responsiveBehavior": [
1898
+ "Vertical legends let the label yield width and truncate before right-aligned value and percentage columns.",
1899
+ "Horizontal legends wrap complete entries and suit compact series keys below a chart.",
1900
+ "The parent constrains width and decides when a custom condensed treatment is necessary."
1901
+ ],
1902
+ "frameworkCaveats": {
1903
+ "customElements": [
1904
+ "Assign items as a JavaScript property and set href only for genuine navigation."
1905
+ ],
1906
+ "react": [
1907
+ "Intercept the item-click event only when application routing must replace native link navigation."
1908
+ ],
1909
+ "angular": [
1910
+ "Intercept the item-click event only when application routing must replace native link navigation."
1911
+ ]
1912
+ },
1913
+ "references": [
1914
+ {
1915
+ "label": "Storybook examples",
1916
+ "path": "src/wc/components/ChartLegend/ChartLegend.stories.ts"
1917
+ },
1918
+ {
1919
+ "label": "Rendered interaction tests",
1920
+ "path": "tests/e2e/chart-legend.spec.ts"
1921
+ }
1922
+ ]
1923
+ },
1639
1924
  "api": {
1640
1925
  "props": {
1641
1926
  "activeLabel": {
@@ -1693,9 +1978,73 @@
1693
1978
  "tag": "ds-chart-line",
1694
1979
  "name": "chart-line",
1695
1980
  "title": "ChartLine",
1696
- "summary": "ChartLine component from @ds-mo/ui.",
1697
- "intentStatus": "migration-pending",
1698
- "intent": null,
1981
+ "summary": "Static single- or multi-series line chart for trends across ordered, evenly spaced categories, including preformatted time-period labels.",
1982
+ "intentStatus": "complete",
1983
+ "intent": {
1984
+ "audience": "specialized",
1985
+ "status": "experimental",
1986
+ "summary": "Static single- or multi-series line chart for trends across ordered, evenly spaced categories, including preformatted time-period labels.",
1987
+ "useWhen": [
1988
+ "Users need to follow one or more numeric trends across a shared ordered x-axis.",
1989
+ "Time periods are already grouped into equally spaced labels such as months, weeks, or days.",
1990
+ "A horizontal ChartLegend should identify multiple series."
1991
+ ],
1992
+ "avoidWhen": [
1993
+ "Pixel position must reflect irregular elapsed time or continuous timestamps.",
1994
+ "The primary task is comparing unrelated category magnitudes rather than following a trend.",
1995
+ "The chart needs built-in zoom, brushing, selection, or drill-down.",
1996
+ "Series lengths do not align with the shared category list."
1997
+ ],
1998
+ "alternatives": [
1999
+ {
2000
+ "when": "Users need to compare one measure across discrete categories or time buckets.",
2001
+ "component": "component:ds-chart-bar",
2002
+ "reason": "Bars emphasize independent bucket magnitudes."
2003
+ },
2004
+ {
2005
+ "when": "The data communicates parts of a total.",
2006
+ "component": "component:ds-chart-donut",
2007
+ "reason": "Donut provides the part-to-whole and center-summary treatment."
2008
+ }
2009
+ ],
2010
+ "commonlyComposedWith": [
2011
+ "component:ds-chart-legend",
2012
+ "component:ds-card-shell-data-viz",
2013
+ "component:ds-tooltip-data-viz"
2014
+ ],
2015
+ "accessibility": [
2016
+ "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.",
2017
+ "Do not rely on series color alone to communicate meaning.",
2018
+ "A future point tooltip must supplement rather than replace accessible series and value context."
2019
+ ],
2020
+ "states": [
2021
+ "The chart is currently static and does not own hover, selection, loading, or empty-state policy.",
2022
+ "Point markers may be shown or hidden without changing the underlying series meaning.",
2023
+ "Authored series colors override the shared categorical palette."
2024
+ ],
2025
+ "responsiveBehavior": [
2026
+ "The owner supplies dimensions and updates them when its layout changes.",
2027
+ "Category positions are always equally spaced, even when labels represent time.",
2028
+ "Reduce or pre-format dense labels before passing them; the chart renders authored labels without a continuous time scale."
2029
+ ],
2030
+ "frameworkCaveats": {
2031
+ "customElements": [
2032
+ "Assign series and categories as JavaScript properties and keep every series aligned to the category count."
2033
+ ],
2034
+ "react": [
2035
+ "Pass stable series and category arrays with dimensions derived from the containing layout."
2036
+ ],
2037
+ "angular": [
2038
+ "Bind series and categories as properties with dimensions derived from the containing layout."
2039
+ ]
2040
+ },
2041
+ "references": [
2042
+ {
2043
+ "label": "Storybook examples",
2044
+ "path": "src/wc/components/ChartLine/ChartLine.stories.ts"
2045
+ }
2046
+ ]
2047
+ },
1699
2048
  "api": {
1700
2049
  "props": {
1701
2050
  "categories": {
@@ -6953,9 +7302,73 @@
6953
7302
  "tag": "ds-tooltip-data-viz",
6954
7303
  "name": "tooltip-data-viz",
6955
7304
  "title": "TooltipDataViz",
6956
- "summary": "Positioned value/label callout for chart hover interactions (bar, line point, …).\nDonut charts skip this — legend sync 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.",
6957
- "intentStatus": "migration-pending",
6958
- "intent": null,
7305
+ "summary": "Chart-owned, non-interactive label and value callout positioned from pointer or focused-mark coordinates inside a visualization wrapper.",
7306
+ "intentStatus": "complete",
7307
+ "intent": {
7308
+ "audience": "specialized",
7309
+ "status": "experimental",
7310
+ "summary": "Chart-owned, non-interactive label and value callout positioned from pointer or focused-mark coordinates inside a visualization wrapper.",
7311
+ "useWhen": [
7312
+ "A chart needs immediate visual value feedback for a genuinely hovered or keyboard-focused mark.",
7313
+ "The anchor lives inside SVG or chart coordinates rather than on a slotted HTML trigger.",
7314
+ "The owning chart can mount the callout for one interaction session and update its coordinates while tracking."
7315
+ ],
7316
+ "avoidWhen": [
7317
+ "A normal control or text trigger needs supplemental explanation; use Tooltip.",
7318
+ "The content needs links, actions, focus, or touch-primary disclosure.",
7319
+ "An externally synchronized highlight has no genuine local pointer or keyboard interaction.",
7320
+ "The callout would be the only accessible source of an essential value."
7321
+ ],
7322
+ "alternatives": [
7323
+ {
7324
+ "when": "A slotted control or text trigger needs a conventional tooltip.",
7325
+ "component": "component:ds-tooltip",
7326
+ "reason": "Tooltip owns trigger semantics, focus behavior, and anchored overlay lifecycle."
7327
+ },
7328
+ {
7329
+ "when": "Donut details should remain continuously visible beside the chart.",
7330
+ "component": "component:ds-chart-legend",
7331
+ "reason": "A visible legend avoids redundant transient slice callouts."
7332
+ }
7333
+ ],
7334
+ "commonlyComposedWith": [
7335
+ "component:ds-chart-bar",
7336
+ "component:ds-chart-line",
7337
+ "component:ds-chart-donut"
7338
+ ],
7339
+ "accessibility": [
7340
+ "The callout is presentation-only and never replaces the owning chart mark's accessible label or an adjacent data summary.",
7341
+ "Keyboard-focused marks receive the same visual feedback as pointer-hovered marks.",
7342
+ "The callout never receives focus or contains interactive descendants."
7343
+ ],
7344
+ "states": [
7345
+ "The owning chart mounts the callout when a local interaction starts and unmounts it when that interaction ends.",
7346
+ "Coordinate updates track within one mounted interaction session without restarting the show delay.",
7347
+ "Placement flips horizontally or vertically when the rendered callout approaches a viewport edge.",
7348
+ "Reduced motion preserves the final visible state without an opacity transition."
7349
+ ],
7350
+ "responsiveBehavior": [
7351
+ "Render inside a positioned chart wrapper and pass coordinates relative to that wrapper.",
7352
+ "Keep labels concise enough for the single-line callout; persistent or long explanations belong outside the chart."
7353
+ ],
7354
+ "frameworkCaveats": {
7355
+ "customElements": [
7356
+ "The owning chart computes coordinates and conditionally mounts the component; applications should not use it as a standalone overlay."
7357
+ ],
7358
+ "react": [
7359
+ "Keep callout lifecycle and coordinates inside the chart wrapper rather than application-global tooltip state."
7360
+ ],
7361
+ "angular": [
7362
+ "Keep callout lifecycle and coordinates inside the chart wrapper rather than application-global tooltip state."
7363
+ ]
7364
+ },
7365
+ "references": [
7366
+ {
7367
+ "label": "Storybook example",
7368
+ "path": "src/wc/components/TooltipDataViz/TooltipDataViz.stories.ts"
7369
+ }
7370
+ ]
7371
+ },
6959
7372
  "api": {
6960
7373
  "props": {
6961
7374
  "delay": {
@@ -8,7 +8,7 @@ export declare class DsButtonFilled {
8
8
  dsClick: EventEmitter<DsButtonFilledCustomEvent<MouseEvent>>;
9
9
  constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
10
10
  static ɵfac: i0.ɵɵFactoryDeclaration<DsButtonFilled, never>;
11
- static ɵcmp: i0.ɵɵComponentDeclaration<DsButtonFilled, "ds-button-filled", never, { "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "contrast": { "alias": "contrast"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "intent": { "alias": "intent"; "required": false; }; "isInactive": { "alias": "isInactive"; "required": false; }; "isLoading": { "alias": "isLoading"; "required": false; }; "label": { "alias": "label"; "required": false; }; "rounded": { "alias": "rounded"; "required": false; }; "size": { "alias": "size"; "required": false; }; "type": { "alias": "type"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "width": { "alias": "width"; "required": false; }; }, { "dsClick": "dsClick"; }, never, ["*"], true, never>;
11
+ static ɵcmp: i0.ɵɵComponentDeclaration<DsButtonFilled, "ds-button-filled", never, { "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "background": { "alias": "background"; "required": false; }; "contrast": { "alias": "contrast"; "required": false; }; "hasBorder": { "alias": "hasBorder"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "intent": { "alias": "intent"; "required": false; }; "isInactive": { "alias": "isInactive"; "required": false; }; "isLoading": { "alias": "isLoading"; "required": false; }; "label": { "alias": "label"; "required": false; }; "rounded": { "alias": "rounded"; "required": false; }; "size": { "alias": "size"; "required": false; }; "type": { "alias": "type"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "width": { "alias": "width"; "required": false; }; }, { "dsClick": "dsClick"; }, never, ["*"], true, never>;
12
12
  }
13
13
  export declare interface DsButtonFilled extends Components.DsButtonFilled {
14
14
  dsClick: EventEmitter<DsButtonFilledCustomEvent<MouseEvent>>;
@@ -18,12 +18,12 @@ let DsButtonFilled = class DsButtonFilled {
18
18
  this.el = r.nativeElement;
19
19
  }
20
20
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: DsButtonFilled, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
21
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.7", type: DsButtonFilled, isStandalone: true, selector: "ds-button-filled", inputs: { ariaLabel: "ariaLabel", contrast: "contrast", icon: "icon", intent: "intent", isInactive: "isInactive", isLoading: "isLoading", label: "label", rounded: "rounded", size: "size", type: "type", variant: "variant", width: "width" }, outputs: { dsClick: "dsClick" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
21
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.7", type: DsButtonFilled, isStandalone: true, selector: "ds-button-filled", inputs: { ariaLabel: "ariaLabel", background: "background", contrast: "contrast", hasBorder: "hasBorder", icon: "icon", intent: "intent", isInactive: "isInactive", isLoading: "isLoading", label: "label", rounded: "rounded", size: "size", type: "type", variant: "variant", width: "width" }, outputs: { dsClick: "dsClick" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
22
22
  };
23
23
  DsButtonFilled = __decorate([
24
24
  ProxyCmp({
25
25
  defineCustomElementFn: defineDsButtonFilled,
26
- inputs: ['ariaLabel', 'contrast', 'icon', 'intent', 'isInactive', 'isLoading', 'label', 'rounded', 'size', 'type', 'variant', 'width'],
26
+ inputs: ['ariaLabel', 'background', 'contrast', 'hasBorder', 'icon', 'intent', 'isInactive', 'isLoading', 'label', 'rounded', 'size', 'type', 'variant', 'width'],
27
27
  methods: ['setFocus']
28
28
  })
29
29
  ], DsButtonFilled);
@@ -35,7 +35,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
35
35
  changeDetection: ChangeDetectionStrategy.OnPush,
36
36
  template: '<ng-content></ng-content>',
37
37
  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
38
- inputs: ['ariaLabel', 'contrast', 'icon', 'intent', 'isInactive', 'isLoading', 'label', 'rounded', 'size', 'type', 'variant', 'width'],
38
+ inputs: ['ariaLabel', 'background', 'contrast', 'hasBorder', 'icon', 'intent', 'isInactive', 'isLoading', 'label', 'rounded', 'size', 'type', 'variant', 'width'],
39
39
  outputs: ['dsClick'],
40
40
  }]
41
41
  }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { dsClick: [{
@@ -9,7 +9,7 @@ export declare class DsChartDonut {
9
9
  dsSliceHover: EventEmitter<DsChartDonutCustomEvent<IDsChartDonutChartDatum | null>>;
10
10
  constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
11
11
  static ɵfac: i0.ɵɵFactoryDeclaration<DsChartDonut, never>;
12
- static ɵcmp: i0.ɵɵComponentDeclaration<DsChartDonut, "ds-chart-donut", never, { "activeLabel": { "alias": "activeLabel"; "required": false; }; "centerCaption": { "alias": "centerCaption"; "required": false; }; "centerValue": { "alias": "centerValue"; "required": false; }; "cornerRadius": { "alias": "cornerRadius"; "required": false; }; "data": { "alias": "data"; "required": false; }; "gap": { "alias": "gap"; "required": false; }; "locale": { "alias": "locale"; "required": false; }; "noDataLabel": { "alias": "noDataLabel"; "required": false; }; "size": { "alias": "size"; "required": false; }; "thickness": { "alias": "thickness"; "required": false; }; }, { "dsSliceHover": "dsSliceHover"; }, never, ["*"], true, never>;
12
+ static ɵcmp: i0.ɵɵComponentDeclaration<DsChartDonut, "ds-chart-donut", never, { "activeLabel": { "alias": "activeLabel"; "required": false; }; "centerCaption": { "alias": "centerCaption"; "required": false; }; "centerValue": { "alias": "centerValue"; "required": false; }; "cornerRadius": { "alias": "cornerRadius"; "required": false; }; "data": { "alias": "data"; "required": false; }; "gap": { "alias": "gap"; "required": false; }; "locale": { "alias": "locale"; "required": false; }; "noDataLabel": { "alias": "noDataLabel"; "required": false; }; "showTooltip": { "alias": "showTooltip"; "required": false; }; "size": { "alias": "size"; "required": false; }; "thickness": { "alias": "thickness"; "required": false; }; }, { "dsSliceHover": "dsSliceHover"; }, never, ["*"], true, never>;
13
13
  }
14
14
  export declare interface DsChartDonut extends Components.DsChartDonut {
15
15
  /**
@@ -18,12 +18,12 @@ let DsChartDonut = class DsChartDonut {
18
18
  this.el = r.nativeElement;
19
19
  }
20
20
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: DsChartDonut, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
21
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.7", type: DsChartDonut, isStandalone: true, selector: "ds-chart-donut", inputs: { activeLabel: "activeLabel", centerCaption: "centerCaption", centerValue: "centerValue", cornerRadius: "cornerRadius", data: "data", gap: "gap", locale: "locale", noDataLabel: "noDataLabel", size: "size", thickness: "thickness" }, outputs: { dsSliceHover: "dsSliceHover" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
21
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.7", type: DsChartDonut, isStandalone: true, selector: "ds-chart-donut", inputs: { activeLabel: "activeLabel", centerCaption: "centerCaption", centerValue: "centerValue", cornerRadius: "cornerRadius", data: "data", gap: "gap", locale: "locale", noDataLabel: "noDataLabel", showTooltip: "showTooltip", size: "size", thickness: "thickness" }, outputs: { dsSliceHover: "dsSliceHover" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
22
22
  };
23
23
  DsChartDonut = __decorate([
24
24
  ProxyCmp({
25
25
  defineCustomElementFn: defineDsChartDonut,
26
- inputs: ['activeLabel', 'centerCaption', 'centerValue', 'cornerRadius', 'data', 'gap', 'locale', 'noDataLabel', 'size', 'thickness']
26
+ inputs: ['activeLabel', 'centerCaption', 'centerValue', 'cornerRadius', 'data', 'gap', 'locale', 'noDataLabel', 'showTooltip', 'size', 'thickness']
27
27
  })
28
28
  ], DsChartDonut);
29
29
  export { DsChartDonut };
@@ -34,7 +34,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
34
34
  changeDetection: ChangeDetectionStrategy.OnPush,
35
35
  template: '<ng-content></ng-content>',
36
36
  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
37
- inputs: ['activeLabel', 'centerCaption', 'centerValue', 'cornerRadius', 'data', 'gap', 'locale', 'noDataLabel', 'size', 'thickness'],
37
+ inputs: ['activeLabel', 'centerCaption', 'centerValue', 'cornerRadius', 'data', 'gap', 'locale', 'noDataLabel', 'showTooltip', 'size', 'thickness'],
38
38
  outputs: ['dsSliceHover'],
39
39
  }]
40
40
  }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { dsSliceHover: [{