@ds-mo/ui 10.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.
- package/dist/.build-stamp +1 -1
- package/dist/agent-patterns.json +15 -9
- package/dist/agent.json +523 -36
- package/dist/angular/ds-button-filled.d.ts +1 -1
- package/dist/angular/ds-button-filled.js +3 -3
- package/dist/angular/ds-chart-donut.d.ts +1 -1
- package/dist/angular/ds-chart-donut.js +3 -3
- package/dist/angular/ds-typing-indicator.d.ts +12 -0
- package/dist/angular/ds-typing-indicator.js +38 -0
- package/dist/angular/index.d.ts +1 -1
- package/dist/angular/index.js +2 -1
- package/dist/angular/proxies.d.ts +1 -0
- package/dist/angular/proxies.js +1 -0
- package/dist/components/ds-agent-response.js +1 -1
- package/dist/components/ds-agent-response.js.map +1 -1
- package/dist/components/ds-agent-tool-call.js +1 -1
- package/dist/components/ds-app-shell.js +1 -1
- package/dist/components/ds-attachment-list.js +1 -1
- package/dist/components/ds-avatar.js +1 -1
- package/dist/components/ds-avatar.js.map +1 -1
- package/dist/components/ds-bar-nav.js +1 -1
- package/dist/components/ds-bar-nav.js.map +1 -1
- package/dist/components/ds-button-filled.js +1 -1
- package/dist/components/ds-button-unfilled.js +1 -1
- package/dist/components/ds-card-data-viz-donut.js +1 -1
- package/dist/components/ds-card-data-viz-donut.js.map +1 -1
- package/dist/components/ds-card-setting.js +1 -1
- package/dist/components/ds-chart-bar.js +1 -1
- package/dist/components/ds-chart-donut.js +1 -1
- package/dist/components/ds-chart-donut.js.map +1 -1
- package/dist/components/ds-chart-legend.js +1 -1
- package/dist/components/ds-chart-legend.js.map +1 -1
- package/dist/components/ds-checkbox.js +1 -1
- package/dist/components/ds-chip.js +1 -1
- package/dist/components/ds-chip.js.map +1 -1
- package/dist/components/ds-code-block.js +1 -1
- package/dist/components/ds-conversation-list-item.js +1 -1
- package/dist/components/ds-conversation-list-item.js.map +1 -1
- package/dist/components/ds-input.js +1 -1
- package/dist/components/ds-input.js.map +1 -1
- package/dist/components/ds-markdown.js +1 -1
- package/dist/components/ds-menu.js +1 -1
- package/dist/components/ds-message-bubble.js +1 -1
- package/dist/components/ds-message-bubble.js.map +1 -1
- package/dist/components/ds-message-composer.js +1 -1
- package/dist/components/ds-message-composer.js.map +1 -1
- package/dist/components/ds-message-scroller.js +1 -1
- package/dist/components/ds-modal.js +1 -1
- package/dist/components/ds-modal.js.map +1 -1
- package/dist/components/ds-panel-nav.js +1 -1
- package/dist/components/ds-panel-nav.js.map +1 -1
- package/dist/components/ds-panel-sub-nav.js +1 -1
- package/dist/components/ds-panel-sub-nav.js.map +1 -1
- package/dist/components/ds-panel-tool-header.js +1 -1
- package/dist/components/ds-panel-tool-search.js +1 -1
- package/dist/components/ds-panel-tool-search.js.map +1 -1
- package/dist/components/ds-panel-tools.js +1 -1
- package/dist/components/ds-panel-tools.js.map +1 -1
- package/dist/components/ds-radio.js +1 -1
- package/dist/components/ds-radio.js.map +1 -1
- package/dist/components/ds-select-multi.js +1 -1
- package/dist/components/ds-select-multi.js.map +1 -1
- package/dist/components/ds-select.js +1 -1
- package/dist/components/ds-select.js.map +1 -1
- package/dist/components/ds-skeleton.js +1 -1
- package/dist/components/ds-skeleton.js.map +1 -1
- package/dist/components/ds-tab-group.js +1 -1
- package/dist/components/ds-tab-group.js.map +1 -1
- package/dist/components/ds-tag.js +1 -1
- package/dist/components/ds-tag.js.map +1 -1
- package/dist/components/ds-toast.js +1 -1
- package/dist/components/ds-toast.js.map +1 -1
- package/dist/components/ds-tooltip-data-viz.js +1 -1
- package/dist/components/ds-tooltip-data-viz.js.map +1 -1
- package/dist/components/ds-tooltip.js +1 -1
- package/dist/components/ds-typing-indicator.d.ts +11 -0
- package/dist/components/ds-typing-indicator.js +2 -0
- package/dist/components/ds-typing-indicator.js.map +1 -0
- package/dist/components/p-BCCt2eT_.js +2 -0
- package/dist/components/{p-DM-95BX1.js.map → p-BCCt2eT_.js.map} +1 -1
- package/dist/components/{p-CxyjoTN1.js → p-BEWtqFX7.js} +2 -2
- package/dist/components/{p-DZAtgSZo.js → p-B_qVPsEU.js} +2 -2
- package/dist/components/p-BaZRP4Oo.js +2 -0
- package/dist/components/p-BaZRP4Oo.js.map +1 -0
- package/dist/components/p-BsnezUUC.js +2 -0
- package/dist/components/{p-DhsO0939.js.map → p-BsnezUUC.js.map} +1 -1
- package/dist/components/{p-B4RQoNmL.js → p-C1K5QGUZ.js} +2 -2
- package/dist/components/p-CjP8sYlo.js +2 -0
- package/dist/components/{p-CS12e52R.js.map → p-CjP8sYlo.js.map} +1 -1
- package/dist/components/p-CrwU83-g.js +2 -0
- package/dist/components/{p-C_0Q8Cnp.js.map → p-CrwU83-g.js.map} +1 -1
- package/dist/components/{p-BTo4pNdp.js → p-DJ78wdNv.js} +2 -2
- package/dist/components/p-DTqCBjUj.js +2 -0
- package/dist/components/{p-CKnoWZd9.js.map → p-DTqCBjUj.js.map} +1 -1
- package/dist/components/p-ZTugT4as.js +2 -0
- package/dist/components/{p-BJUcsBHt.js.map → p-ZTugT4as.js.map} +1 -1
- package/dist/components/p-bNpFhP5L.js +2 -0
- package/dist/components/p-bNpFhP5L.js.map +1 -0
- package/dist/docs/components.json +215 -30
- package/dist/mcp/cli.js +8 -12
- package/dist/mcp-data/registry/agent-response.json +5 -5
- package/dist/mcp-data/registry/button-filled.json +38 -2
- package/dist/mcp-data/registry/card-data-viz-donut.json +73 -4
- package/dist/mcp-data/registry/chart-bar.json +67 -3
- package/dist/mcp-data/registry/chart-donut.json +94 -8
- package/dist/mcp-data/registry/chart-legend.json +73 -3
- package/dist/mcp-data/registry/chart-line.json +67 -3
- package/dist/mcp-data/registry/conversation-list-item.json +2 -2
- package/dist/mcp-data/registry/message-bubble.json +19 -14
- package/dist/mcp-data/registry/message-composer.json +5 -3
- package/dist/mcp-data/registry/message-scroller.json +1 -1
- package/dist/mcp-data/registry/panel-nav.json +3 -2
- package/dist/mcp-data/registry/registry.json +525 -35
- package/dist/mcp-data/registry/skeleton.json +2 -2
- package/dist/mcp-data/registry/tooltip-data-viz.json +68 -4
- package/dist/mcp-data/registry/typing-indicator.json +127 -0
- package/dist/react/components.d.ts +1 -0
- package/dist/react/components.js +1 -0
- package/dist/react/ds-typing-indicator.d.ts +9 -0
- package/dist/react/ds-typing-indicator.js +12 -0
- package/dist/types/components/ButtonFilled/ButtonFilled.d.ts +9 -0
- package/dist/types/components/ButtonFilled/index.d.ts +1 -1
- package/dist/types/components/CardDataVizDonut/CardDataVizDonut.d.ts +1 -0
- package/dist/types/components/ChartDonut/ChartDonut.d.ts +12 -2
- package/dist/types/components/MessageBubble/MessageBubble.d.ts +1 -1
- package/dist/types/components/TooltipDataViz/TooltipDataViz.d.ts +3 -2
- package/dist/types/components/TypingIndicator/TypingIndicator.d.ts +6 -0
- package/dist/types/components.d.ts +75 -14
- package/package.json +1 -1
- package/dist/components/p-BHtg1fh3.js +0 -2
- package/dist/components/p-BHtg1fh3.js.map +0 -1
- package/dist/components/p-BJUcsBHt.js +0 -2
- package/dist/components/p-CKnoWZd9.js +0 -2
- package/dist/components/p-CS12e52R.js +0 -2
- package/dist/components/p-C_0Q8Cnp.js +0 -2
- package/dist/components/p-DBJ2I3mH.js +0 -2
- package/dist/components/p-DBJ2I3mH.js.map +0 -1
- package/dist/components/p-DM-95BX1.js +0 -2
- package/dist/components/p-DhsO0939.js +0 -2
- package/dist/components/p-DsbhBb5F.js +0 -2
- package/dist/components/p-DsbhBb5F.js.map +0 -1
- /package/dist/components/{p-CxyjoTN1.js.map → p-BEWtqFX7.js.map} +0 -0
- /package/dist/components/{p-DZAtgSZo.js.map → p-B_qVPsEU.js.map} +0 -0
- /package/dist/components/{p-B4RQoNmL.js.map → p-C1K5QGUZ.js.map} +0 -0
- /package/dist/components/{p-BTo4pNdp.js.map → p-DJ78wdNv.js.map} +0 -0
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": "
|
|
4
|
+
"packageVersion": "11.1.0",
|
|
5
5
|
"kind": "components",
|
|
6
6
|
"entries": [
|
|
7
7
|
{
|
|
@@ -112,10 +112,11 @@
|
|
|
112
112
|
"Streaming state supplements rather than replaces meaningful textual status."
|
|
113
113
|
],
|
|
114
114
|
"states": [
|
|
115
|
-
"The owner replaces immutable part arrays as scripted or live output changes."
|
|
115
|
+
"The owner replaces immutable part arrays as scripted or live output changes.",
|
|
116
|
+
"AgentResponse renders directly in Message without borrowing a plain MessageBubble surface."
|
|
116
117
|
],
|
|
117
118
|
"responsiveBehavior": [
|
|
118
|
-
"Rich content uses the
|
|
119
|
+
"Rich content uses the available transcript width while respecting readable measure and overflow constraints."
|
|
119
120
|
],
|
|
120
121
|
"references": [
|
|
121
122
|
{
|
|
@@ -169,8 +170,7 @@
|
|
|
169
170
|
"agent-tool-call",
|
|
170
171
|
"attachment-list",
|
|
171
172
|
"markdown",
|
|
172
|
-
"message"
|
|
173
|
-
"message-bubble"
|
|
173
|
+
"message"
|
|
174
174
|
]
|
|
175
175
|
},
|
|
176
176
|
{
|
|
@@ -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": "
|
|
1241
|
-
"intentStatus": "
|
|
1242
|
-
"intent":
|
|
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": "
|
|
1530
|
-
"intentStatus": "
|
|
1531
|
-
"intent":
|
|
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": "
|
|
1567
|
-
"intentStatus": "
|
|
1568
|
-
"intent":
|
|
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": "
|
|
1637
|
-
"intentStatus": "
|
|
1638
|
-
"intent":
|
|
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": "
|
|
1697
|
-
"intentStatus": "
|
|
1698
|
-
"intent":
|
|
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": {
|
|
@@ -2174,7 +2523,7 @@
|
|
|
2174
2523
|
"Busy and error are generic channel-neutral states; the owning product supplies suitable status wording. A busy row pairs its body-small status with the sm 16px Loader at an 8px gap.",
|
|
2175
2524
|
"Any positive unreadCount renders one dot on the title row rather than a visible counter; the accessible row name may still announce the exact unread quantity.",
|
|
2176
2525
|
"Hover and press use the shared interaction hover and pressed overlays. Only the selected conversation uses the persistent active fill.",
|
|
2177
|
-
"The title uses body-medium
|
|
2526
|
+
"The title uses body-medium, not title-small, and the body-small preview truncates after one line. Unread titles use emphasis with primary foreground; read titles use regular weight with secondary foreground.",
|
|
2178
2527
|
"The actions slot overlays the row at an 8px right inset without changing title or preview measure, and paints above the row interaction wash while that wash remains active."
|
|
2179
2528
|
],
|
|
2180
2529
|
"responsiveBehavior": [
|
|
@@ -3460,23 +3809,23 @@
|
|
|
3460
3809
|
"tag": "ds-message-bubble",
|
|
3461
3810
|
"name": "message-bubble",
|
|
3462
3811
|
"title": "MessageBubble",
|
|
3463
|
-
"summary": "Visible message
|
|
3812
|
+
"summary": "Visible plain-message surface with a body-medium default, separated from message-row direction and metadata.",
|
|
3464
3813
|
"intentStatus": "complete",
|
|
3465
3814
|
"intent": {
|
|
3466
3815
|
"audience": "general",
|
|
3467
3816
|
"status": "experimental",
|
|
3468
|
-
"summary": "Visible message
|
|
3817
|
+
"summary": "Visible plain-message surface with a body-medium default, separated from message-row direction and metadata.",
|
|
3469
3818
|
"useWhen": [
|
|
3470
|
-
"
|
|
3471
|
-
"Plain
|
|
3819
|
+
"Plain user-sent or received person-to-person message copy needs a visible surface within a Message row.",
|
|
3820
|
+
"Plain conversation copy should use the shared body-medium regular typography recipe without application styling."
|
|
3472
3821
|
],
|
|
3473
3822
|
"avoidWhen": [
|
|
3474
3823
|
"The surface is a general card, callout, or form container.",
|
|
3475
|
-
"The
|
|
3824
|
+
"The content is a rich agent response; compose AgentResponse directly in Message.",
|
|
3825
|
+
"The state only indicates that another participant is typing; use TypingIndicator."
|
|
3476
3826
|
],
|
|
3477
3827
|
"commonlyComposedWith": [
|
|
3478
|
-
"component:ds-message"
|
|
3479
|
-
"component:ds-markdown"
|
|
3828
|
+
"component:ds-message"
|
|
3480
3829
|
],
|
|
3481
3830
|
"patterns": [
|
|
3482
3831
|
"pattern:conversation"
|
|
@@ -3484,8 +3833,13 @@
|
|
|
3484
3833
|
"accessibility": [
|
|
3485
3834
|
"Surface styling does not add semantics; failed delivery belongs in Message metadata below the unchanged bubble rather than in an error bubble treatment."
|
|
3486
3835
|
],
|
|
3836
|
+
"states": [
|
|
3837
|
+
"The user variant represents user-sent copy in agent and person-to-person channels and uses secondary foreground.",
|
|
3838
|
+
"The received variant represents ordinary incoming person-to-person copy.",
|
|
3839
|
+
"Typing and rich agent output are not MessageBubble variants."
|
|
3840
|
+
],
|
|
3487
3841
|
"responsiveBehavior": [
|
|
3488
|
-
"The bubble wraps
|
|
3842
|
+
"The bubble wraps plain message copy within the transcript width."
|
|
3489
3843
|
],
|
|
3490
3844
|
"references": [
|
|
3491
3845
|
{
|
|
@@ -3547,7 +3901,9 @@
|
|
|
3547
3901
|
],
|
|
3548
3902
|
"states": [
|
|
3549
3903
|
"The owner controls draft value and transport state; the composer emits intent without performing transport.",
|
|
3550
|
-
"Use the tools slot for leading actions such as add and the actions slot for trailing actions such as dictation; the built-in submit or stop action remains last.",
|
|
3904
|
+
"Use the tools slot for leading actions such as add and the actions slot for trailing actions such as dictation; the built-in submit or stop action remains last with an 8px gap from the preceding action. These icon buttons use the standard non-rounded control radius.",
|
|
3905
|
+
"The composer surface uses the 10px --dimension-radius-125 token.",
|
|
3906
|
+
"Mouse or keyboard focus on the textarea gives the complete composer surface the same bold-brand inset stroke width and color as an active Input; the native textarea never draws a separate outline.",
|
|
3551
3907
|
"The submit action defaults to brand for both agent and person-to-person conversations; change submitIntent only when the action consequence has a different semantic intent."
|
|
3552
3908
|
],
|
|
3553
3909
|
"responsiveBehavior": [
|
|
@@ -3653,7 +4009,7 @@
|
|
|
3653
4009
|
"Selection and transcript interaction release automatic following.",
|
|
3654
4010
|
"Opening saved history, message jumps, and prepended history preserve deliberate position.",
|
|
3655
4011
|
"The scroll-to-latest action is absent at the live edge, appears only after the reader moves away, and disappears again after returning to the newest message.",
|
|
3656
|
-
"Place a composer container in the overlay slot so messages scroll behind it; the scroller measures its live height, reserves matching transcript clearance, and keeps scroll-to-latest above it."
|
|
4012
|
+
"Place a composer container with 8px padding on every side in the overlay slot so messages scroll behind it; the scroller measures its live height, reserves matching transcript clearance, and keeps scroll-to-latest above it."
|
|
3657
4013
|
],
|
|
3658
4014
|
"responsiveBehavior": [
|
|
3659
4015
|
"Transcript width is readable while the scroll region fills available height."
|
|
@@ -3920,6 +4276,7 @@
|
|
|
3920
4276
|
"Dashboard presents day-to-day operational destinations; Settings presents administrative and configuration destinations.",
|
|
3921
4277
|
"The standard footer switches the entire destination collection and navStyle between Dashboard and Settings and exposes the user/account entry.",
|
|
3922
4278
|
"The host owns the external user menu opened from dsNavUserAction.",
|
|
4279
|
+
"Item and header controls inherit the shared md control radius while local shell geometry continues to own collapsed layout and footer animation positioning.",
|
|
3923
4280
|
"On desktop, allow user-controlled expand and collapse and persist the preference with storageKey when cross-session persistence is appropriate."
|
|
3924
4281
|
],
|
|
3925
4282
|
"responsiveBehavior": [
|
|
@@ -5611,7 +5968,7 @@
|
|
|
5611
5968
|
"The owner preserves focus and meaningful reading order when replacing placeholders with real content."
|
|
5612
5969
|
],
|
|
5613
5970
|
"states": [
|
|
5614
|
-
"Text, icon, and control variants are atomic metric canvases aligned to their corresponding design-system recipes.",
|
|
5971
|
+
"Text, icon, and control variants are atomic metric canvases aligned to their corresponding design-system recipes; control atoms inherit the selected control density's default radius.",
|
|
5615
5972
|
"Compose approximate line count, hierarchy, widths, and control placement without simulating actual values.",
|
|
5616
5973
|
"Shimmer is on by default and may be disabled for a static placeholder. Reduced motion always produces the static final shape.",
|
|
5617
5974
|
"Rounded is an optional visual treatment for icon and control atoms rather than a semantic state.",
|
|
@@ -6945,9 +7302,73 @@
|
|
|
6945
7302
|
"tag": "ds-tooltip-data-viz",
|
|
6946
7303
|
"name": "tooltip-data-viz",
|
|
6947
7304
|
"title": "TooltipDataViz",
|
|
6948
|
-
"summary": "
|
|
6949
|
-
"intentStatus": "
|
|
6950
|
-
"intent":
|
|
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
|
+
},
|
|
6951
7372
|
"api": {
|
|
6952
7373
|
"props": {
|
|
6953
7374
|
"delay": {
|
|
@@ -6986,6 +7407,72 @@
|
|
|
6986
7407
|
"componentDependencies": [
|
|
6987
7408
|
"text"
|
|
6988
7409
|
]
|
|
7410
|
+
},
|
|
7411
|
+
{
|
|
7412
|
+
"id": "component:ds-typing-indicator",
|
|
7413
|
+
"tag": "ds-typing-indicator",
|
|
7414
|
+
"name": "typing-indicator",
|
|
7415
|
+
"title": "TypingIndicator",
|
|
7416
|
+
"summary": "Dedicated transient status for another participant actively composing a message.",
|
|
7417
|
+
"intentStatus": "complete",
|
|
7418
|
+
"intent": {
|
|
7419
|
+
"audience": "general",
|
|
7420
|
+
"status": "experimental",
|
|
7421
|
+
"summary": "Dedicated transient status for another participant actively composing a message.",
|
|
7422
|
+
"useWhen": [
|
|
7423
|
+
"An agent or person-to-person conversation needs to show that another participant is currently typing."
|
|
7424
|
+
],
|
|
7425
|
+
"avoidWhen": [
|
|
7426
|
+
"An operation is loading or streaming a response; use Loader or the owning region's busy state.",
|
|
7427
|
+
"The status represents persisted message content; use Message and MessageBubble."
|
|
7428
|
+
],
|
|
7429
|
+
"commonlyComposedWith": [
|
|
7430
|
+
"component:ds-message",
|
|
7431
|
+
"component:ds-message-scroller"
|
|
7432
|
+
],
|
|
7433
|
+
"patterns": [
|
|
7434
|
+
"pattern:conversation"
|
|
7435
|
+
],
|
|
7436
|
+
"accessibility": [
|
|
7437
|
+
"Provide concise localized status text that names the participant when that context is not otherwise clear.",
|
|
7438
|
+
"The polite atomic status announces typing without representing it as a message bubble."
|
|
7439
|
+
],
|
|
7440
|
+
"states": [
|
|
7441
|
+
"TypingIndicator is transient conversation status, never persisted message content.",
|
|
7442
|
+
"Its body-small secondary text may shimmer, while reduced-motion preferences retain a static readable status."
|
|
7443
|
+
],
|
|
7444
|
+
"responsiveBehavior": [
|
|
7445
|
+
"The indicator fills the message content width and wraps only when localized status text requires it."
|
|
7446
|
+
],
|
|
7447
|
+
"references": [
|
|
7448
|
+
{
|
|
7449
|
+
"label": "Storybook example",
|
|
7450
|
+
"path": "src/wc/components/TypingIndicator/TypingIndicator.stories.ts"
|
|
7451
|
+
}
|
|
7452
|
+
]
|
|
7453
|
+
},
|
|
7454
|
+
"api": {
|
|
7455
|
+
"props": {
|
|
7456
|
+
"label": {
|
|
7457
|
+
"type": "string",
|
|
7458
|
+
"required": false
|
|
7459
|
+
}
|
|
7460
|
+
},
|
|
7461
|
+
"events": [],
|
|
7462
|
+
"slots": []
|
|
7463
|
+
},
|
|
7464
|
+
"exports": {
|
|
7465
|
+
"customElement": "ds-typing-indicator",
|
|
7466
|
+
"react": "DsTypingIndicator",
|
|
7467
|
+
"angular": "DsTypingIndicator"
|
|
7468
|
+
},
|
|
7469
|
+
"dependencies": [
|
|
7470
|
+
"@ds-mo/ui",
|
|
7471
|
+
"@ds-mo/tokens"
|
|
7472
|
+
],
|
|
7473
|
+
"componentDependencies": [
|
|
7474
|
+
"text"
|
|
7475
|
+
]
|
|
6989
7476
|
}
|
|
6990
7477
|
]
|
|
6991
7478
|
}
|