@ds-mo/ui 3.1.1 → 3.2.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.json +2664 -0
- package/dist/docs/components.d.ts +480 -0
- package/dist/docs/components.json +13005 -0
- package/package.json +4 -3
package/dist/agent.json
ADDED
|
@@ -0,0 +1,2664 @@
|
|
|
1
|
+
{
|
|
2
|
+
"schemaVersion": "1.0.0",
|
|
3
|
+
"package": "@ds-mo/ui",
|
|
4
|
+
"packageVersion": "3.2.0",
|
|
5
|
+
"kind": "components",
|
|
6
|
+
"entries": [
|
|
7
|
+
{
|
|
8
|
+
"id": "component:ds-app-shell",
|
|
9
|
+
"tag": "ds-app-shell",
|
|
10
|
+
"name": "app-shell",
|
|
11
|
+
"title": "AppShell",
|
|
12
|
+
"summary": "Workspace layout primitive coordinating panel navigation, top navigation, tools, content, shared chrome, and shell shortcuts.",
|
|
13
|
+
"intentStatus": "complete",
|
|
14
|
+
"intent": {
|
|
15
|
+
"audience": "specialized",
|
|
16
|
+
"status": "stable",
|
|
17
|
+
"summary": "Workspace layout primitive coordinating panel navigation, top navigation, tools, content, shared chrome, and shell shortcuts.",
|
|
18
|
+
"useWhen": [
|
|
19
|
+
"Building a dashboard-style workspace with coordinated left navigation, top navigation, tools, and content.",
|
|
20
|
+
"Navigation chrome needs shared styling, gradient alignment, collapse behavior, and keyboard shortcuts."
|
|
21
|
+
],
|
|
22
|
+
"avoidWhen": [
|
|
23
|
+
"The page is a standalone marketing, authentication, or single-purpose layout.",
|
|
24
|
+
"The interface does not use the coordinated CompoMo navigation surfaces."
|
|
25
|
+
],
|
|
26
|
+
"alternatives": [
|
|
27
|
+
{
|
|
28
|
+
"when": "Only a top-level section tab row is needed.",
|
|
29
|
+
"component": "component:ds-bar-nav",
|
|
30
|
+
"reason": "BarNav can be used without the complete workspace shell."
|
|
31
|
+
},
|
|
32
|
+
{
|
|
33
|
+
"when": "Only persistent left-side destination navigation is needed.",
|
|
34
|
+
"component": "component:ds-panel-nav",
|
|
35
|
+
"reason": "PanelNav owns left navigation without requiring the full shell composition."
|
|
36
|
+
}
|
|
37
|
+
],
|
|
38
|
+
"commonlyComposedWith": [
|
|
39
|
+
"component:ds-panel-nav",
|
|
40
|
+
"component:ds-bar-nav",
|
|
41
|
+
"component:ds-panel-tools"
|
|
42
|
+
],
|
|
43
|
+
"patterns": [
|
|
44
|
+
"pattern:application-shell"
|
|
45
|
+
],
|
|
46
|
+
"accessibility": [
|
|
47
|
+
"Keep destination navigation in PanelNav and section navigation in BarNav.",
|
|
48
|
+
"Do not override browser keyboard chords when enabling shell shortcuts.",
|
|
49
|
+
"Ensure the default slot contains the page main-content landmark."
|
|
50
|
+
],
|
|
51
|
+
"states": [
|
|
52
|
+
"The shell coordinates chrome but the host application owns active destinations, active tools, and route state.",
|
|
53
|
+
"Use one AppShell as the workspace root rather than nesting shells."
|
|
54
|
+
],
|
|
55
|
+
"responsiveBehavior": [
|
|
56
|
+
"The host and shell must fill the viewport for chrome clipping and synchronized gradient sizing.",
|
|
57
|
+
"Panel collapse and tool-drawer behavior should preserve the main content region rather than introducing a second page shell."
|
|
58
|
+
],
|
|
59
|
+
"frameworkCaveats": {
|
|
60
|
+
"customElements": [
|
|
61
|
+
"Assign complex navigation item collections as element properties."
|
|
62
|
+
],
|
|
63
|
+
"react": [
|
|
64
|
+
"Use generated wrappers but preserve native slot names on slotted navigation children."
|
|
65
|
+
],
|
|
66
|
+
"angular": [
|
|
67
|
+
"Bind complex inputs after the generated custom elements are registered and preserve slot attributes in templates."
|
|
68
|
+
]
|
|
69
|
+
},
|
|
70
|
+
"references": [
|
|
71
|
+
{
|
|
72
|
+
"label": "Component guide",
|
|
73
|
+
"path": "src/wc/components/AppShell/AppShell.mdx"
|
|
74
|
+
},
|
|
75
|
+
{
|
|
76
|
+
"label": "Executable Storybook composition",
|
|
77
|
+
"path": "src/wc/components/AppShell/AppShell.stories.ts"
|
|
78
|
+
},
|
|
79
|
+
{
|
|
80
|
+
"label": "Framework integration",
|
|
81
|
+
"path": "docs/framework-integration.md"
|
|
82
|
+
}
|
|
83
|
+
]
|
|
84
|
+
},
|
|
85
|
+
"api": {
|
|
86
|
+
"props": {
|
|
87
|
+
"gradient": {
|
|
88
|
+
"type": "boolean",
|
|
89
|
+
"required": false
|
|
90
|
+
},
|
|
91
|
+
"gradientPreset": {
|
|
92
|
+
"type": "ShellGradientPreset",
|
|
93
|
+
"required": false
|
|
94
|
+
},
|
|
95
|
+
"gradientSrc": {
|
|
96
|
+
"type": "string",
|
|
97
|
+
"required": false
|
|
98
|
+
},
|
|
99
|
+
"navStyle": {
|
|
100
|
+
"type": "NavChromeStyle",
|
|
101
|
+
"required": false
|
|
102
|
+
},
|
|
103
|
+
"shortcutsEnabled": {
|
|
104
|
+
"type": "boolean",
|
|
105
|
+
"required": false
|
|
106
|
+
}
|
|
107
|
+
},
|
|
108
|
+
"events": [],
|
|
109
|
+
"slots": []
|
|
110
|
+
},
|
|
111
|
+
"exports": {
|
|
112
|
+
"customElement": "ds-app-shell",
|
|
113
|
+
"react": "DsAppShell",
|
|
114
|
+
"angular": "DsAppShell"
|
|
115
|
+
},
|
|
116
|
+
"dependencies": [
|
|
117
|
+
"@ds-mo/ui",
|
|
118
|
+
"@ds-mo/tokens"
|
|
119
|
+
],
|
|
120
|
+
"componentDependencies": []
|
|
121
|
+
},
|
|
122
|
+
{
|
|
123
|
+
"id": "component:ds-badge",
|
|
124
|
+
"tag": "ds-badge",
|
|
125
|
+
"name": "badge",
|
|
126
|
+
"title": "Badge",
|
|
127
|
+
"summary": "Compact counter or notification dot for status and unread indicators.",
|
|
128
|
+
"intentStatus": "migration-pending",
|
|
129
|
+
"intent": null,
|
|
130
|
+
"api": {
|
|
131
|
+
"props": {
|
|
132
|
+
"background": {
|
|
133
|
+
"type": "string | undefined",
|
|
134
|
+
"required": false
|
|
135
|
+
},
|
|
136
|
+
"count": {
|
|
137
|
+
"type": "number",
|
|
138
|
+
"required": false
|
|
139
|
+
},
|
|
140
|
+
"gradientBackground": {
|
|
141
|
+
"type": "boolean",
|
|
142
|
+
"required": false
|
|
143
|
+
},
|
|
144
|
+
"isSelected": {
|
|
145
|
+
"type": "boolean",
|
|
146
|
+
"required": false
|
|
147
|
+
},
|
|
148
|
+
"label": {
|
|
149
|
+
"type": "string | undefined",
|
|
150
|
+
"required": false
|
|
151
|
+
},
|
|
152
|
+
"max": {
|
|
153
|
+
"type": "number",
|
|
154
|
+
"required": false
|
|
155
|
+
},
|
|
156
|
+
"surface": {
|
|
157
|
+
"type": "BadgeSurface",
|
|
158
|
+
"required": false
|
|
159
|
+
},
|
|
160
|
+
"variant": {
|
|
161
|
+
"type": "BadgeVariant",
|
|
162
|
+
"required": false
|
|
163
|
+
}
|
|
164
|
+
},
|
|
165
|
+
"events": [],
|
|
166
|
+
"slots": []
|
|
167
|
+
},
|
|
168
|
+
"exports": {
|
|
169
|
+
"customElement": "ds-badge",
|
|
170
|
+
"react": "DsBadge",
|
|
171
|
+
"angular": "DsBadge"
|
|
172
|
+
},
|
|
173
|
+
"dependencies": [
|
|
174
|
+
"@ds-mo/ui",
|
|
175
|
+
"@ds-mo/tokens"
|
|
176
|
+
],
|
|
177
|
+
"componentDependencies": [
|
|
178
|
+
"text"
|
|
179
|
+
]
|
|
180
|
+
},
|
|
181
|
+
{
|
|
182
|
+
"id": "component:ds-banner",
|
|
183
|
+
"tag": "ds-banner",
|
|
184
|
+
"name": "banner",
|
|
185
|
+
"title": "Banner",
|
|
186
|
+
"summary": "Intent-colored message bar. Supports floating toast mode with auto-dismiss and fade-out animation.",
|
|
187
|
+
"intentStatus": "migration-pending",
|
|
188
|
+
"intent": null,
|
|
189
|
+
"api": {
|
|
190
|
+
"props": {
|
|
191
|
+
"contrast": {
|
|
192
|
+
"type": "BannerContrast",
|
|
193
|
+
"required": false
|
|
194
|
+
},
|
|
195
|
+
"dismissLabel": {
|
|
196
|
+
"type": "string",
|
|
197
|
+
"required": false
|
|
198
|
+
},
|
|
199
|
+
"floating": {
|
|
200
|
+
"type": "boolean",
|
|
201
|
+
"required": false
|
|
202
|
+
},
|
|
203
|
+
"header": {
|
|
204
|
+
"type": "boolean",
|
|
205
|
+
"required": false
|
|
206
|
+
},
|
|
207
|
+
"intent": {
|
|
208
|
+
"type": "BannerIntent",
|
|
209
|
+
"required": false
|
|
210
|
+
},
|
|
211
|
+
"message": {
|
|
212
|
+
"type": "string",
|
|
213
|
+
"required": false
|
|
214
|
+
},
|
|
215
|
+
"showDismiss": {
|
|
216
|
+
"type": "boolean",
|
|
217
|
+
"required": false
|
|
218
|
+
}
|
|
219
|
+
},
|
|
220
|
+
"events": [
|
|
221
|
+
{
|
|
222
|
+
"name": "dsDismiss",
|
|
223
|
+
"detail": "void"
|
|
224
|
+
}
|
|
225
|
+
],
|
|
226
|
+
"slots": []
|
|
227
|
+
},
|
|
228
|
+
"exports": {
|
|
229
|
+
"customElement": "ds-banner",
|
|
230
|
+
"react": "DsBanner",
|
|
231
|
+
"angular": "DsBanner"
|
|
232
|
+
},
|
|
233
|
+
"dependencies": [
|
|
234
|
+
"@ds-mo/ui",
|
|
235
|
+
"@ds-mo/tokens"
|
|
236
|
+
],
|
|
237
|
+
"componentDependencies": [
|
|
238
|
+
"text"
|
|
239
|
+
]
|
|
240
|
+
},
|
|
241
|
+
{
|
|
242
|
+
"id": "component:ds-bar-nav",
|
|
243
|
+
"tag": "ds-bar-nav",
|
|
244
|
+
"name": "bar-nav",
|
|
245
|
+
"title": "BarNav",
|
|
246
|
+
"summary": "BarNav component from @ds-mo/ui.",
|
|
247
|
+
"intentStatus": "migration-pending",
|
|
248
|
+
"intent": null,
|
|
249
|
+
"api": {
|
|
250
|
+
"props": {
|
|
251
|
+
"basePath": {
|
|
252
|
+
"type": "string",
|
|
253
|
+
"required": false
|
|
254
|
+
},
|
|
255
|
+
"currentUrl": {
|
|
256
|
+
"type": "string",
|
|
257
|
+
"required": false
|
|
258
|
+
},
|
|
259
|
+
"heading": {
|
|
260
|
+
"type": "string | undefined",
|
|
261
|
+
"required": false
|
|
262
|
+
},
|
|
263
|
+
"moreTabsLabel": {
|
|
264
|
+
"type": "string",
|
|
265
|
+
"required": false
|
|
266
|
+
},
|
|
267
|
+
"navStyle": {
|
|
268
|
+
"type": "NavChromeStyle",
|
|
269
|
+
"required": false
|
|
270
|
+
},
|
|
271
|
+
"tabs": {
|
|
272
|
+
"type": "BarNavTab[]",
|
|
273
|
+
"required": false
|
|
274
|
+
},
|
|
275
|
+
"tabsJson": {
|
|
276
|
+
"type": "string",
|
|
277
|
+
"required": false
|
|
278
|
+
},
|
|
279
|
+
"value": {
|
|
280
|
+
"type": "string",
|
|
281
|
+
"required": false
|
|
282
|
+
}
|
|
283
|
+
},
|
|
284
|
+
"events": [
|
|
285
|
+
{
|
|
286
|
+
"name": "dsTabChange",
|
|
287
|
+
"detail": "string"
|
|
288
|
+
}
|
|
289
|
+
],
|
|
290
|
+
"slots": []
|
|
291
|
+
},
|
|
292
|
+
"exports": {
|
|
293
|
+
"customElement": "ds-bar-nav",
|
|
294
|
+
"react": "DsBarNav",
|
|
295
|
+
"angular": "DsBarNav"
|
|
296
|
+
},
|
|
297
|
+
"dependencies": [
|
|
298
|
+
"@ds-mo/ui",
|
|
299
|
+
"@ds-mo/tokens"
|
|
300
|
+
],
|
|
301
|
+
"componentDependencies": [
|
|
302
|
+
"button-unfilled",
|
|
303
|
+
"menu",
|
|
304
|
+
"tab-group-nav",
|
|
305
|
+
"text"
|
|
306
|
+
]
|
|
307
|
+
},
|
|
308
|
+
{
|
|
309
|
+
"id": "component:ds-button-filled",
|
|
310
|
+
"tag": "ds-button-filled",
|
|
311
|
+
"name": "button-filled",
|
|
312
|
+
"title": "ButtonFilled",
|
|
313
|
+
"summary": "Emphasized command button for primary, confirming, or semantically important actions.",
|
|
314
|
+
"intentStatus": "complete",
|
|
315
|
+
"intent": {
|
|
316
|
+
"audience": "general",
|
|
317
|
+
"status": "stable",
|
|
318
|
+
"summary": "Emphasized command button for primary, confirming, or semantically important actions.",
|
|
319
|
+
"useWhen": [
|
|
320
|
+
"The user initiates a primary or emphasized command.",
|
|
321
|
+
"An action needs a semantic intent such as positive, negative, warning, or AI."
|
|
322
|
+
],
|
|
323
|
+
"avoidWhen": [
|
|
324
|
+
"The action is unfilled icon-only shell or navigation chrome.",
|
|
325
|
+
"The element represents navigation rather than a command.",
|
|
326
|
+
"The content is a persistent selected state rather than an action."
|
|
327
|
+
],
|
|
328
|
+
"alternatives": [
|
|
329
|
+
{
|
|
330
|
+
"when": "The action is icon-only shell, navigation, overflow, or tool-rail chrome.",
|
|
331
|
+
"component": "component:ds-button-unfilled",
|
|
332
|
+
"reason": "Unfilled buttons provide the correct active, border, and surface-aware interaction states for chrome."
|
|
333
|
+
},
|
|
334
|
+
{
|
|
335
|
+
"when": "The user is choosing a destination in application navigation.",
|
|
336
|
+
"component": "component:ds-panel-nav",
|
|
337
|
+
"reason": "Navigation components own destination selection, active state, and navigation semantics."
|
|
338
|
+
}
|
|
339
|
+
],
|
|
340
|
+
"commonlyComposedWith": [
|
|
341
|
+
"component:ds-modal",
|
|
342
|
+
"component:ds-field"
|
|
343
|
+
],
|
|
344
|
+
"accessibility": [
|
|
345
|
+
"Provide an explicit accessible name for icon-only buttons.",
|
|
346
|
+
"Use inactive state only when the action must remain visible but unavailable.",
|
|
347
|
+
"Do not encode the action meaning through color alone."
|
|
348
|
+
],
|
|
349
|
+
"states": [
|
|
350
|
+
"Choose one primary filled action per local decision area when possible.",
|
|
351
|
+
"Use semantic intent for meaning and contrast for emphasis; do not use contrast as a substitute for state."
|
|
352
|
+
],
|
|
353
|
+
"responsiveBehavior": [
|
|
354
|
+
"Use fill width only when the parent layout calls for a full-width action, commonly on narrow form layouts."
|
|
355
|
+
],
|
|
356
|
+
"references": [
|
|
357
|
+
{
|
|
358
|
+
"label": "Storybook examples",
|
|
359
|
+
"path": "src/wc/components/ButtonFilled/ButtonFilled.stories.ts"
|
|
360
|
+
}
|
|
361
|
+
]
|
|
362
|
+
},
|
|
363
|
+
"api": {
|
|
364
|
+
"props": {
|
|
365
|
+
"ariaLabel": {
|
|
366
|
+
"type": "string | null",
|
|
367
|
+
"required": false
|
|
368
|
+
},
|
|
369
|
+
"contrast": {
|
|
370
|
+
"type": "ButtonFilledContrast",
|
|
371
|
+
"required": false
|
|
372
|
+
},
|
|
373
|
+
"icon": {
|
|
374
|
+
"type": "string",
|
|
375
|
+
"required": false
|
|
376
|
+
},
|
|
377
|
+
"intent": {
|
|
378
|
+
"type": "ButtonFilledIntent",
|
|
379
|
+
"required": false
|
|
380
|
+
},
|
|
381
|
+
"isInactive": {
|
|
382
|
+
"type": "boolean",
|
|
383
|
+
"required": false
|
|
384
|
+
},
|
|
385
|
+
"label": {
|
|
386
|
+
"type": "string",
|
|
387
|
+
"required": false
|
|
388
|
+
},
|
|
389
|
+
"size": {
|
|
390
|
+
"type": "ButtonFilledSize",
|
|
391
|
+
"required": false
|
|
392
|
+
},
|
|
393
|
+
"type": {
|
|
394
|
+
"type": "'button' | 'submit' | 'reset'",
|
|
395
|
+
"required": false
|
|
396
|
+
},
|
|
397
|
+
"variant": {
|
|
398
|
+
"type": "ButtonFilledVariant",
|
|
399
|
+
"required": false
|
|
400
|
+
},
|
|
401
|
+
"width": {
|
|
402
|
+
"type": "ButtonFilledWidth",
|
|
403
|
+
"required": false
|
|
404
|
+
}
|
|
405
|
+
},
|
|
406
|
+
"events": [
|
|
407
|
+
{
|
|
408
|
+
"name": "dsClick",
|
|
409
|
+
"detail": "MouseEvent"
|
|
410
|
+
}
|
|
411
|
+
],
|
|
412
|
+
"slots": []
|
|
413
|
+
},
|
|
414
|
+
"exports": {
|
|
415
|
+
"customElement": "ds-button-filled",
|
|
416
|
+
"react": "DsButtonFilled",
|
|
417
|
+
"angular": "DsButtonFilled"
|
|
418
|
+
},
|
|
419
|
+
"dependencies": [
|
|
420
|
+
"@ds-mo/ui",
|
|
421
|
+
"@ds-mo/tokens",
|
|
422
|
+
"@ds-mo/icons"
|
|
423
|
+
],
|
|
424
|
+
"componentDependencies": [
|
|
425
|
+
"icon",
|
|
426
|
+
"text"
|
|
427
|
+
]
|
|
428
|
+
},
|
|
429
|
+
{
|
|
430
|
+
"id": "component:ds-button-unfilled",
|
|
431
|
+
"tag": "ds-button-unfilled",
|
|
432
|
+
"name": "button-unfilled",
|
|
433
|
+
"title": "ButtonUnfilled",
|
|
434
|
+
"summary": "Unfilled button with variant (label / icon / icon-label), control-density sizes, width hug/fill, active/border/dot, and surface-aware interaction states.",
|
|
435
|
+
"intentStatus": "migration-pending",
|
|
436
|
+
"intent": null,
|
|
437
|
+
"api": {
|
|
438
|
+
"props": {
|
|
439
|
+
"activeFill": {
|
|
440
|
+
"type": "boolean",
|
|
441
|
+
"required": false
|
|
442
|
+
},
|
|
443
|
+
"ariaLabel": {
|
|
444
|
+
"type": "string | null",
|
|
445
|
+
"required": false
|
|
446
|
+
},
|
|
447
|
+
"background": {
|
|
448
|
+
"type": "ButtonUnfilledBackground | undefined",
|
|
449
|
+
"required": false
|
|
450
|
+
},
|
|
451
|
+
"backgroundContrast": {
|
|
452
|
+
"type": "ButtonUnfilledOnBackgroundContrast",
|
|
453
|
+
"required": false
|
|
454
|
+
},
|
|
455
|
+
"controls": {
|
|
456
|
+
"type": "string | undefined",
|
|
457
|
+
"required": false
|
|
458
|
+
},
|
|
459
|
+
"dot": {
|
|
460
|
+
"type": "boolean",
|
|
461
|
+
"required": false
|
|
462
|
+
},
|
|
463
|
+
"expanded": {
|
|
464
|
+
"type": "boolean | undefined",
|
|
465
|
+
"required": false
|
|
466
|
+
},
|
|
467
|
+
"focusTabIndex": {
|
|
468
|
+
"type": "number",
|
|
469
|
+
"required": false
|
|
470
|
+
},
|
|
471
|
+
"hasBorder": {
|
|
472
|
+
"type": "boolean",
|
|
473
|
+
"required": false
|
|
474
|
+
},
|
|
475
|
+
"haspopup": {
|
|
476
|
+
"type": "string | undefined",
|
|
477
|
+
"required": false
|
|
478
|
+
},
|
|
479
|
+
"icon": {
|
|
480
|
+
"type": "string",
|
|
481
|
+
"required": false
|
|
482
|
+
},
|
|
483
|
+
"isActive": {
|
|
484
|
+
"type": "boolean",
|
|
485
|
+
"required": false
|
|
486
|
+
},
|
|
487
|
+
"isInactive": {
|
|
488
|
+
"type": "boolean",
|
|
489
|
+
"required": false
|
|
490
|
+
},
|
|
491
|
+
"label": {
|
|
492
|
+
"type": "string",
|
|
493
|
+
"required": false
|
|
494
|
+
},
|
|
495
|
+
"pressed": {
|
|
496
|
+
"type": "boolean | undefined",
|
|
497
|
+
"required": false
|
|
498
|
+
},
|
|
499
|
+
"size": {
|
|
500
|
+
"type": "ButtonUnfilledSize",
|
|
501
|
+
"required": false
|
|
502
|
+
},
|
|
503
|
+
"type": {
|
|
504
|
+
"type": "'button' | 'submit' | 'reset'",
|
|
505
|
+
"required": false
|
|
506
|
+
},
|
|
507
|
+
"variant": {
|
|
508
|
+
"type": "ButtonUnfilledVariant",
|
|
509
|
+
"required": false
|
|
510
|
+
},
|
|
511
|
+
"width": {
|
|
512
|
+
"type": "ButtonUnfilledWidth",
|
|
513
|
+
"required": false
|
|
514
|
+
}
|
|
515
|
+
},
|
|
516
|
+
"events": [
|
|
517
|
+
{
|
|
518
|
+
"name": "dsChange",
|
|
519
|
+
"detail": "boolean"
|
|
520
|
+
},
|
|
521
|
+
{
|
|
522
|
+
"name": "dsClick",
|
|
523
|
+
"detail": "MouseEvent"
|
|
524
|
+
}
|
|
525
|
+
],
|
|
526
|
+
"slots": []
|
|
527
|
+
},
|
|
528
|
+
"exports": {
|
|
529
|
+
"customElement": "ds-button-unfilled",
|
|
530
|
+
"react": "DsButtonUnfilled",
|
|
531
|
+
"angular": "DsButtonUnfilled"
|
|
532
|
+
},
|
|
533
|
+
"dependencies": [
|
|
534
|
+
"@ds-mo/ui",
|
|
535
|
+
"@ds-mo/tokens",
|
|
536
|
+
"@ds-mo/icons"
|
|
537
|
+
],
|
|
538
|
+
"componentDependencies": [
|
|
539
|
+
"badge",
|
|
540
|
+
"icon",
|
|
541
|
+
"text"
|
|
542
|
+
]
|
|
543
|
+
},
|
|
544
|
+
{
|
|
545
|
+
"id": "component:ds-card",
|
|
546
|
+
"tag": "ds-card",
|
|
547
|
+
"name": "card",
|
|
548
|
+
"title": "Card",
|
|
549
|
+
"summary": "Shared card chrome — width + matching min-height tokens, header (title + actions slot), and a flex body that fills leftover space. Compose from settings and data-viz cards.",
|
|
550
|
+
"intentStatus": "migration-pending",
|
|
551
|
+
"intent": null,
|
|
552
|
+
"api": {
|
|
553
|
+
"props": {
|
|
554
|
+
"appearance": {
|
|
555
|
+
"type": "CardAppearance",
|
|
556
|
+
"required": false
|
|
557
|
+
},
|
|
558
|
+
"cardWidth": {
|
|
559
|
+
"type": "CardWidth",
|
|
560
|
+
"required": false
|
|
561
|
+
},
|
|
562
|
+
"heading": {
|
|
563
|
+
"type": "string",
|
|
564
|
+
"required": true
|
|
565
|
+
}
|
|
566
|
+
},
|
|
567
|
+
"events": [],
|
|
568
|
+
"slots": []
|
|
569
|
+
},
|
|
570
|
+
"exports": {
|
|
571
|
+
"customElement": "ds-card",
|
|
572
|
+
"react": "DsCard",
|
|
573
|
+
"angular": "DsCard"
|
|
574
|
+
},
|
|
575
|
+
"dependencies": [
|
|
576
|
+
"@ds-mo/ui",
|
|
577
|
+
"@ds-mo/tokens"
|
|
578
|
+
],
|
|
579
|
+
"componentDependencies": [
|
|
580
|
+
"text"
|
|
581
|
+
]
|
|
582
|
+
},
|
|
583
|
+
{
|
|
584
|
+
"id": "component:ds-card-data-viz-donut",
|
|
585
|
+
"tag": "ds-card-data-viz-donut",
|
|
586
|
+
"name": "card-data-viz-donut",
|
|
587
|
+
"title": "CardDataVizDonut",
|
|
588
|
+
"summary": "Donut data-viz card on shared ds-card chrome — fill chart region, content-sized legend, header filter action, and chart↔legend hover sync.",
|
|
589
|
+
"intentStatus": "migration-pending",
|
|
590
|
+
"intent": null,
|
|
591
|
+
"api": {
|
|
592
|
+
"props": {
|
|
593
|
+
"cardWidth": {
|
|
594
|
+
"type": "CardDataVizDonutWidth",
|
|
595
|
+
"required": false
|
|
596
|
+
},
|
|
597
|
+
"filterLabel": {
|
|
598
|
+
"type": "string",
|
|
599
|
+
"required": false
|
|
600
|
+
},
|
|
601
|
+
"heading": {
|
|
602
|
+
"type": "string",
|
|
603
|
+
"required": true
|
|
604
|
+
}
|
|
605
|
+
},
|
|
606
|
+
"events": [
|
|
607
|
+
{
|
|
608
|
+
"name": "dsFilterClick",
|
|
609
|
+
"detail": "void"
|
|
610
|
+
}
|
|
611
|
+
],
|
|
612
|
+
"slots": []
|
|
613
|
+
},
|
|
614
|
+
"exports": {
|
|
615
|
+
"customElement": "ds-card-data-viz-donut",
|
|
616
|
+
"react": "DsCardDataVizDonut",
|
|
617
|
+
"angular": "DsCardDataVizDonut"
|
|
618
|
+
},
|
|
619
|
+
"dependencies": [
|
|
620
|
+
"@ds-mo/ui",
|
|
621
|
+
"@ds-mo/tokens"
|
|
622
|
+
],
|
|
623
|
+
"componentDependencies": [
|
|
624
|
+
"button-unfilled",
|
|
625
|
+
"card"
|
|
626
|
+
]
|
|
627
|
+
},
|
|
628
|
+
{
|
|
629
|
+
"id": "component:ds-card-setting",
|
|
630
|
+
"tag": "ds-card-setting",
|
|
631
|
+
"name": "card-setting",
|
|
632
|
+
"title": "CardSetting",
|
|
633
|
+
"summary": "Settings page section shell composed on ds-card with view/edit header actions. Edit state is controlled by the parent.",
|
|
634
|
+
"intentStatus": "migration-pending",
|
|
635
|
+
"intent": null,
|
|
636
|
+
"api": {
|
|
637
|
+
"props": {
|
|
638
|
+
"cancelLabel": {
|
|
639
|
+
"type": "string",
|
|
640
|
+
"required": false
|
|
641
|
+
},
|
|
642
|
+
"cardWidth": {
|
|
643
|
+
"type": "CardSettingWidth",
|
|
644
|
+
"required": false
|
|
645
|
+
},
|
|
646
|
+
"editLabel": {
|
|
647
|
+
"type": "string",
|
|
648
|
+
"required": false
|
|
649
|
+
},
|
|
650
|
+
"editing": {
|
|
651
|
+
"type": "boolean",
|
|
652
|
+
"required": false
|
|
653
|
+
},
|
|
654
|
+
"heading": {
|
|
655
|
+
"type": "string",
|
|
656
|
+
"required": true
|
|
657
|
+
},
|
|
658
|
+
"saveLabel": {
|
|
659
|
+
"type": "string",
|
|
660
|
+
"required": false
|
|
661
|
+
}
|
|
662
|
+
},
|
|
663
|
+
"events": [
|
|
664
|
+
{
|
|
665
|
+
"name": "dsEditingChange",
|
|
666
|
+
"detail": "boolean"
|
|
667
|
+
}
|
|
668
|
+
],
|
|
669
|
+
"slots": []
|
|
670
|
+
},
|
|
671
|
+
"exports": {
|
|
672
|
+
"customElement": "ds-card-setting",
|
|
673
|
+
"react": "DsCardSetting",
|
|
674
|
+
"angular": "DsCardSetting"
|
|
675
|
+
},
|
|
676
|
+
"dependencies": [
|
|
677
|
+
"@ds-mo/ui",
|
|
678
|
+
"@ds-mo/tokens"
|
|
679
|
+
],
|
|
680
|
+
"componentDependencies": [
|
|
681
|
+
"button-filled",
|
|
682
|
+
"button-unfilled",
|
|
683
|
+
"card"
|
|
684
|
+
]
|
|
685
|
+
},
|
|
686
|
+
{
|
|
687
|
+
"id": "component:ds-chart-bar",
|
|
688
|
+
"tag": "ds-chart-bar",
|
|
689
|
+
"name": "chart-bar",
|
|
690
|
+
"title": "ChartBar",
|
|
691
|
+
"summary": "ChartBar component from @ds-mo/ui.",
|
|
692
|
+
"intentStatus": "migration-pending",
|
|
693
|
+
"intent": null,
|
|
694
|
+
"api": {
|
|
695
|
+
"props": {
|
|
696
|
+
"data": {
|
|
697
|
+
"type": "ChartDatum[]",
|
|
698
|
+
"required": false
|
|
699
|
+
},
|
|
700
|
+
"height": {
|
|
701
|
+
"type": "number",
|
|
702
|
+
"required": false
|
|
703
|
+
},
|
|
704
|
+
"width": {
|
|
705
|
+
"type": "number",
|
|
706
|
+
"required": false
|
|
707
|
+
}
|
|
708
|
+
},
|
|
709
|
+
"events": [],
|
|
710
|
+
"slots": []
|
|
711
|
+
},
|
|
712
|
+
"exports": {
|
|
713
|
+
"customElement": "ds-chart-bar",
|
|
714
|
+
"react": "DsChartBar",
|
|
715
|
+
"angular": "DsChartBar"
|
|
716
|
+
},
|
|
717
|
+
"dependencies": [
|
|
718
|
+
"@ds-mo/ui",
|
|
719
|
+
"@ds-mo/tokens"
|
|
720
|
+
],
|
|
721
|
+
"componentDependencies": []
|
|
722
|
+
},
|
|
723
|
+
{
|
|
724
|
+
"id": "component:ds-chart-donut",
|
|
725
|
+
"tag": "ds-chart-donut",
|
|
726
|
+
"name": "chart-donut",
|
|
727
|
+
"title": "ChartDonut",
|
|
728
|
+
"summary": "ChartDonut component from @ds-mo/ui.",
|
|
729
|
+
"intentStatus": "migration-pending",
|
|
730
|
+
"intent": null,
|
|
731
|
+
"api": {
|
|
732
|
+
"props": {
|
|
733
|
+
"activeLabel": {
|
|
734
|
+
"type": "string | null",
|
|
735
|
+
"required": false
|
|
736
|
+
},
|
|
737
|
+
"centerCaption": {
|
|
738
|
+
"type": "string | undefined",
|
|
739
|
+
"required": false
|
|
740
|
+
},
|
|
741
|
+
"centerValue": {
|
|
742
|
+
"type": "string | undefined",
|
|
743
|
+
"required": false
|
|
744
|
+
},
|
|
745
|
+
"cornerRadius": {
|
|
746
|
+
"type": "number | string",
|
|
747
|
+
"required": false
|
|
748
|
+
},
|
|
749
|
+
"data": {
|
|
750
|
+
"type": "ChartDatum[]",
|
|
751
|
+
"required": false
|
|
752
|
+
},
|
|
753
|
+
"gap": {
|
|
754
|
+
"type": "number",
|
|
755
|
+
"required": false
|
|
756
|
+
},
|
|
757
|
+
"locale": {
|
|
758
|
+
"type": "string | undefined",
|
|
759
|
+
"required": false
|
|
760
|
+
},
|
|
761
|
+
"noDataLabel": {
|
|
762
|
+
"type": "string",
|
|
763
|
+
"required": false
|
|
764
|
+
},
|
|
765
|
+
"size": {
|
|
766
|
+
"type": "number | undefined",
|
|
767
|
+
"required": false
|
|
768
|
+
},
|
|
769
|
+
"thickness": {
|
|
770
|
+
"type": "number | string",
|
|
771
|
+
"required": false
|
|
772
|
+
}
|
|
773
|
+
},
|
|
774
|
+
"events": [
|
|
775
|
+
{
|
|
776
|
+
"name": "dsSliceHover",
|
|
777
|
+
"detail": "ChartDatum | null"
|
|
778
|
+
}
|
|
779
|
+
],
|
|
780
|
+
"slots": []
|
|
781
|
+
},
|
|
782
|
+
"exports": {
|
|
783
|
+
"customElement": "ds-chart-donut",
|
|
784
|
+
"react": "DsChartDonut",
|
|
785
|
+
"angular": "DsChartDonut"
|
|
786
|
+
},
|
|
787
|
+
"dependencies": [
|
|
788
|
+
"@ds-mo/ui",
|
|
789
|
+
"@ds-mo/tokens"
|
|
790
|
+
],
|
|
791
|
+
"componentDependencies": []
|
|
792
|
+
},
|
|
793
|
+
{
|
|
794
|
+
"id": "component:ds-chart-legend",
|
|
795
|
+
"tag": "ds-chart-legend",
|
|
796
|
+
"name": "chart-legend",
|
|
797
|
+
"title": "ChartLegend",
|
|
798
|
+
"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.",
|
|
799
|
+
"intentStatus": "migration-pending",
|
|
800
|
+
"intent": null,
|
|
801
|
+
"api": {
|
|
802
|
+
"props": {
|
|
803
|
+
"activeLabel": {
|
|
804
|
+
"type": "string | null",
|
|
805
|
+
"required": false
|
|
806
|
+
},
|
|
807
|
+
"direction": {
|
|
808
|
+
"type": "ChartLegendDirection",
|
|
809
|
+
"required": false
|
|
810
|
+
},
|
|
811
|
+
"items": {
|
|
812
|
+
"type": "ChartLegendItem[]",
|
|
813
|
+
"required": false
|
|
814
|
+
},
|
|
815
|
+
"locale": {
|
|
816
|
+
"type": "string | undefined",
|
|
817
|
+
"required": false
|
|
818
|
+
},
|
|
819
|
+
"showPercentage": {
|
|
820
|
+
"type": "boolean",
|
|
821
|
+
"required": false
|
|
822
|
+
}
|
|
823
|
+
},
|
|
824
|
+
"events": [
|
|
825
|
+
{
|
|
826
|
+
"name": "dsItemClick",
|
|
827
|
+
"detail": "{ item: ChartLegendItem; originalEvent: MouseEvent }"
|
|
828
|
+
},
|
|
829
|
+
{
|
|
830
|
+
"name": "dsItemHover",
|
|
831
|
+
"detail": "ChartLegendItem | null"
|
|
832
|
+
}
|
|
833
|
+
],
|
|
834
|
+
"slots": []
|
|
835
|
+
},
|
|
836
|
+
"exports": {
|
|
837
|
+
"customElement": "ds-chart-legend",
|
|
838
|
+
"react": "DsChartLegend",
|
|
839
|
+
"angular": "DsChartLegend"
|
|
840
|
+
},
|
|
841
|
+
"dependencies": [
|
|
842
|
+
"@ds-mo/ui",
|
|
843
|
+
"@ds-mo/tokens"
|
|
844
|
+
],
|
|
845
|
+
"componentDependencies": [
|
|
846
|
+
"text"
|
|
847
|
+
]
|
|
848
|
+
},
|
|
849
|
+
{
|
|
850
|
+
"id": "component:ds-chart-line",
|
|
851
|
+
"tag": "ds-chart-line",
|
|
852
|
+
"name": "chart-line",
|
|
853
|
+
"title": "ChartLine",
|
|
854
|
+
"summary": "ChartLine component from @ds-mo/ui.",
|
|
855
|
+
"intentStatus": "migration-pending",
|
|
856
|
+
"intent": null,
|
|
857
|
+
"api": {
|
|
858
|
+
"props": {
|
|
859
|
+
"categories": {
|
|
860
|
+
"type": "string[]",
|
|
861
|
+
"required": false
|
|
862
|
+
},
|
|
863
|
+
"height": {
|
|
864
|
+
"type": "number",
|
|
865
|
+
"required": false
|
|
866
|
+
},
|
|
867
|
+
"series": {
|
|
868
|
+
"type": "ChartSeries[]",
|
|
869
|
+
"required": false
|
|
870
|
+
},
|
|
871
|
+
"showPoints": {
|
|
872
|
+
"type": "boolean",
|
|
873
|
+
"required": false
|
|
874
|
+
},
|
|
875
|
+
"width": {
|
|
876
|
+
"type": "number",
|
|
877
|
+
"required": false
|
|
878
|
+
}
|
|
879
|
+
},
|
|
880
|
+
"events": [],
|
|
881
|
+
"slots": []
|
|
882
|
+
},
|
|
883
|
+
"exports": {
|
|
884
|
+
"customElement": "ds-chart-line",
|
|
885
|
+
"react": "DsChartLine",
|
|
886
|
+
"angular": "DsChartLine"
|
|
887
|
+
},
|
|
888
|
+
"dependencies": [
|
|
889
|
+
"@ds-mo/ui",
|
|
890
|
+
"@ds-mo/tokens"
|
|
891
|
+
],
|
|
892
|
+
"componentDependencies": []
|
|
893
|
+
},
|
|
894
|
+
{
|
|
895
|
+
"id": "component:ds-checkbox",
|
|
896
|
+
"tag": "ds-checkbox",
|
|
897
|
+
"name": "checkbox",
|
|
898
|
+
"title": "Checkbox",
|
|
899
|
+
"summary": "Three-state checkbox (checked, unchecked, indeterminate) with keyboard support and custom icon slots.",
|
|
900
|
+
"intentStatus": "migration-pending",
|
|
901
|
+
"intent": null,
|
|
902
|
+
"api": {
|
|
903
|
+
"props": {
|
|
904
|
+
"checked": {
|
|
905
|
+
"type": "boolean",
|
|
906
|
+
"required": false
|
|
907
|
+
},
|
|
908
|
+
"disabled": {
|
|
909
|
+
"type": "boolean",
|
|
910
|
+
"required": false
|
|
911
|
+
},
|
|
912
|
+
"indeterminate": {
|
|
913
|
+
"type": "boolean",
|
|
914
|
+
"required": false
|
|
915
|
+
},
|
|
916
|
+
"isInactive": {
|
|
917
|
+
"type": "boolean",
|
|
918
|
+
"required": false
|
|
919
|
+
},
|
|
920
|
+
"label": {
|
|
921
|
+
"type": "string",
|
|
922
|
+
"required": true
|
|
923
|
+
},
|
|
924
|
+
"name": {
|
|
925
|
+
"type": "string | undefined",
|
|
926
|
+
"required": false
|
|
927
|
+
},
|
|
928
|
+
"required": {
|
|
929
|
+
"type": "boolean",
|
|
930
|
+
"required": false
|
|
931
|
+
},
|
|
932
|
+
"requiredMessage": {
|
|
933
|
+
"type": "string",
|
|
934
|
+
"required": false
|
|
935
|
+
},
|
|
936
|
+
"value": {
|
|
937
|
+
"type": "string",
|
|
938
|
+
"required": false
|
|
939
|
+
}
|
|
940
|
+
},
|
|
941
|
+
"events": [
|
|
942
|
+
{
|
|
943
|
+
"name": "dsChange",
|
|
944
|
+
"detail": "boolean"
|
|
945
|
+
}
|
|
946
|
+
],
|
|
947
|
+
"slots": []
|
|
948
|
+
},
|
|
949
|
+
"exports": {
|
|
950
|
+
"customElement": "ds-checkbox",
|
|
951
|
+
"react": "DsCheckbox",
|
|
952
|
+
"angular": "DsCheckbox"
|
|
953
|
+
},
|
|
954
|
+
"dependencies": [
|
|
955
|
+
"@ds-mo/ui",
|
|
956
|
+
"@ds-mo/tokens"
|
|
957
|
+
],
|
|
958
|
+
"componentDependencies": [
|
|
959
|
+
"text"
|
|
960
|
+
]
|
|
961
|
+
},
|
|
962
|
+
{
|
|
963
|
+
"id": "component:ds-chip",
|
|
964
|
+
"tag": "ds-chip",
|
|
965
|
+
"name": "chip",
|
|
966
|
+
"title": "Chip",
|
|
967
|
+
"summary": "Removable metadata chip — same control-density recipe as Tag, colored by semantic state (default / active / error / caution). Not a toggle/select control.",
|
|
968
|
+
"intentStatus": "migration-pending",
|
|
969
|
+
"intent": null,
|
|
970
|
+
"api": {
|
|
971
|
+
"props": {
|
|
972
|
+
"background": {
|
|
973
|
+
"type": "ChipBackground | undefined",
|
|
974
|
+
"required": false
|
|
975
|
+
},
|
|
976
|
+
"isInactive": {
|
|
977
|
+
"type": "boolean",
|
|
978
|
+
"required": false
|
|
979
|
+
},
|
|
980
|
+
"label": {
|
|
981
|
+
"type": "string",
|
|
982
|
+
"required": true
|
|
983
|
+
},
|
|
984
|
+
"maxWidth": {
|
|
985
|
+
"type": "string | number | undefined",
|
|
986
|
+
"required": false
|
|
987
|
+
},
|
|
988
|
+
"removable": {
|
|
989
|
+
"type": "boolean",
|
|
990
|
+
"required": false
|
|
991
|
+
},
|
|
992
|
+
"removeLabel": {
|
|
993
|
+
"type": "string",
|
|
994
|
+
"required": false
|
|
995
|
+
},
|
|
996
|
+
"rounded": {
|
|
997
|
+
"type": "boolean",
|
|
998
|
+
"required": false
|
|
999
|
+
},
|
|
1000
|
+
"size": {
|
|
1001
|
+
"type": "ChipSize",
|
|
1002
|
+
"required": false
|
|
1003
|
+
},
|
|
1004
|
+
"state": {
|
|
1005
|
+
"type": "ChipState",
|
|
1006
|
+
"required": false
|
|
1007
|
+
}
|
|
1008
|
+
},
|
|
1009
|
+
"events": [
|
|
1010
|
+
{
|
|
1011
|
+
"name": "dsRemove",
|
|
1012
|
+
"detail": "void"
|
|
1013
|
+
}
|
|
1014
|
+
],
|
|
1015
|
+
"slots": []
|
|
1016
|
+
},
|
|
1017
|
+
"exports": {
|
|
1018
|
+
"customElement": "ds-chip",
|
|
1019
|
+
"react": "DsChip",
|
|
1020
|
+
"angular": "DsChip"
|
|
1021
|
+
},
|
|
1022
|
+
"dependencies": [
|
|
1023
|
+
"@ds-mo/ui",
|
|
1024
|
+
"@ds-mo/tokens",
|
|
1025
|
+
"@ds-mo/icons"
|
|
1026
|
+
],
|
|
1027
|
+
"componentDependencies": [
|
|
1028
|
+
"icon",
|
|
1029
|
+
"text"
|
|
1030
|
+
]
|
|
1031
|
+
},
|
|
1032
|
+
{
|
|
1033
|
+
"id": "component:ds-divider",
|
|
1034
|
+
"tag": "ds-divider",
|
|
1035
|
+
"name": "divider",
|
|
1036
|
+
"title": "Divider",
|
|
1037
|
+
"summary": "Decorative horizontal or vertical visual separator for non-edge-to-edge separation. Supports surface-aware divider tokens, inset, and custom line length.",
|
|
1038
|
+
"intentStatus": "migration-pending",
|
|
1039
|
+
"intent": null,
|
|
1040
|
+
"api": {
|
|
1041
|
+
"props": {
|
|
1042
|
+
"inset": {
|
|
1043
|
+
"type": "DividerInset",
|
|
1044
|
+
"required": false
|
|
1045
|
+
},
|
|
1046
|
+
"length": {
|
|
1047
|
+
"type": "DividerLength",
|
|
1048
|
+
"required": false
|
|
1049
|
+
},
|
|
1050
|
+
"orientation": {
|
|
1051
|
+
"type": "DividerOrientation",
|
|
1052
|
+
"required": false
|
|
1053
|
+
},
|
|
1054
|
+
"semantic": {
|
|
1055
|
+
"type": "boolean",
|
|
1056
|
+
"required": false
|
|
1057
|
+
},
|
|
1058
|
+
"surface": {
|
|
1059
|
+
"type": "DividerSurface",
|
|
1060
|
+
"required": false
|
|
1061
|
+
}
|
|
1062
|
+
},
|
|
1063
|
+
"events": [],
|
|
1064
|
+
"slots": []
|
|
1065
|
+
},
|
|
1066
|
+
"exports": {
|
|
1067
|
+
"customElement": "ds-divider",
|
|
1068
|
+
"react": "DsDivider",
|
|
1069
|
+
"angular": "DsDivider"
|
|
1070
|
+
},
|
|
1071
|
+
"dependencies": [
|
|
1072
|
+
"@ds-mo/ui",
|
|
1073
|
+
"@ds-mo/tokens"
|
|
1074
|
+
],
|
|
1075
|
+
"componentDependencies": []
|
|
1076
|
+
},
|
|
1077
|
+
{
|
|
1078
|
+
"id": "component:ds-empty-state",
|
|
1079
|
+
"tag": "ds-empty-state",
|
|
1080
|
+
"name": "empty-state",
|
|
1081
|
+
"title": "EmptyState",
|
|
1082
|
+
"summary": "Centered placeholder for empty content, no results, or no access states.",
|
|
1083
|
+
"intentStatus": "migration-pending",
|
|
1084
|
+
"intent": null,
|
|
1085
|
+
"api": {
|
|
1086
|
+
"props": {
|
|
1087
|
+
"message": {
|
|
1088
|
+
"type": "string | undefined",
|
|
1089
|
+
"required": false
|
|
1090
|
+
},
|
|
1091
|
+
"messages": {
|
|
1092
|
+
"type": "Partial<Record<EmptyStateType, string>>",
|
|
1093
|
+
"required": false
|
|
1094
|
+
},
|
|
1095
|
+
"type": {
|
|
1096
|
+
"type": "EmptyStateType",
|
|
1097
|
+
"required": false
|
|
1098
|
+
}
|
|
1099
|
+
},
|
|
1100
|
+
"events": [],
|
|
1101
|
+
"slots": []
|
|
1102
|
+
},
|
|
1103
|
+
"exports": {
|
|
1104
|
+
"customElement": "ds-empty-state",
|
|
1105
|
+
"react": "DsEmptyState",
|
|
1106
|
+
"angular": "DsEmptyState"
|
|
1107
|
+
},
|
|
1108
|
+
"dependencies": [
|
|
1109
|
+
"@ds-mo/ui",
|
|
1110
|
+
"@ds-mo/tokens"
|
|
1111
|
+
],
|
|
1112
|
+
"componentDependencies": [
|
|
1113
|
+
"text"
|
|
1114
|
+
]
|
|
1115
|
+
},
|
|
1116
|
+
{
|
|
1117
|
+
"id": "component:ds-field",
|
|
1118
|
+
"tag": "ds-field",
|
|
1119
|
+
"name": "field",
|
|
1120
|
+
"title": "Field",
|
|
1121
|
+
"summary": "Simple label wrapper that links to child input via htmlFor.",
|
|
1122
|
+
"intentStatus": "migration-pending",
|
|
1123
|
+
"intent": null,
|
|
1124
|
+
"api": {
|
|
1125
|
+
"props": {
|
|
1126
|
+
"fieldId": {
|
|
1127
|
+
"type": "string | undefined",
|
|
1128
|
+
"required": false
|
|
1129
|
+
},
|
|
1130
|
+
"label": {
|
|
1131
|
+
"type": "string",
|
|
1132
|
+
"required": true
|
|
1133
|
+
}
|
|
1134
|
+
},
|
|
1135
|
+
"events": [],
|
|
1136
|
+
"slots": []
|
|
1137
|
+
},
|
|
1138
|
+
"exports": {
|
|
1139
|
+
"customElement": "ds-field",
|
|
1140
|
+
"react": "DsField",
|
|
1141
|
+
"angular": "DsField"
|
|
1142
|
+
},
|
|
1143
|
+
"dependencies": [
|
|
1144
|
+
"@ds-mo/ui",
|
|
1145
|
+
"@ds-mo/tokens"
|
|
1146
|
+
],
|
|
1147
|
+
"componentDependencies": [
|
|
1148
|
+
"text"
|
|
1149
|
+
]
|
|
1150
|
+
},
|
|
1151
|
+
{
|
|
1152
|
+
"id": "component:ds-icon",
|
|
1153
|
+
"tag": "ds-icon",
|
|
1154
|
+
"name": "icon",
|
|
1155
|
+
"title": "Icon",
|
|
1156
|
+
"summary": "Icon component from @ds-mo/ui.",
|
|
1157
|
+
"intentStatus": "migration-pending",
|
|
1158
|
+
"intent": null,
|
|
1159
|
+
"api": {
|
|
1160
|
+
"props": {
|
|
1161
|
+
"color": {
|
|
1162
|
+
"type": "IconColor | undefined",
|
|
1163
|
+
"required": false
|
|
1164
|
+
},
|
|
1165
|
+
"flag": {
|
|
1166
|
+
"type": "boolean",
|
|
1167
|
+
"required": false
|
|
1168
|
+
},
|
|
1169
|
+
"label": {
|
|
1170
|
+
"type": "string | undefined",
|
|
1171
|
+
"required": false
|
|
1172
|
+
},
|
|
1173
|
+
"name": {
|
|
1174
|
+
"type": "string",
|
|
1175
|
+
"required": false
|
|
1176
|
+
},
|
|
1177
|
+
"size": {
|
|
1178
|
+
"type": "IconSize",
|
|
1179
|
+
"required": false
|
|
1180
|
+
}
|
|
1181
|
+
},
|
|
1182
|
+
"events": [],
|
|
1183
|
+
"slots": []
|
|
1184
|
+
},
|
|
1185
|
+
"exports": {
|
|
1186
|
+
"customElement": "ds-icon",
|
|
1187
|
+
"react": "DsIcon",
|
|
1188
|
+
"angular": "DsIcon"
|
|
1189
|
+
},
|
|
1190
|
+
"dependencies": [
|
|
1191
|
+
"@ds-mo/ui",
|
|
1192
|
+
"@ds-mo/tokens",
|
|
1193
|
+
"@ds-mo/icons"
|
|
1194
|
+
],
|
|
1195
|
+
"componentDependencies": []
|
|
1196
|
+
},
|
|
1197
|
+
{
|
|
1198
|
+
"id": "component:ds-input",
|
|
1199
|
+
"tag": "ds-input",
|
|
1200
|
+
"name": "input",
|
|
1201
|
+
"title": "Input",
|
|
1202
|
+
"summary": "Text input supporting text, email, tel, url, search, and password types. Search type includes auto clear button.",
|
|
1203
|
+
"intentStatus": "migration-pending",
|
|
1204
|
+
"intent": null,
|
|
1205
|
+
"api": {
|
|
1206
|
+
"props": {
|
|
1207
|
+
"ariaDescribedby": {
|
|
1208
|
+
"type": "string | undefined",
|
|
1209
|
+
"required": false
|
|
1210
|
+
},
|
|
1211
|
+
"ariaLabel": {
|
|
1212
|
+
"type": "string | null",
|
|
1213
|
+
"required": false
|
|
1214
|
+
},
|
|
1215
|
+
"ariaLabelledby": {
|
|
1216
|
+
"type": "string | undefined",
|
|
1217
|
+
"required": false
|
|
1218
|
+
},
|
|
1219
|
+
"autoFocus": {
|
|
1220
|
+
"type": "boolean",
|
|
1221
|
+
"required": false
|
|
1222
|
+
},
|
|
1223
|
+
"clearLabel": {
|
|
1224
|
+
"type": "string",
|
|
1225
|
+
"required": false
|
|
1226
|
+
},
|
|
1227
|
+
"disabled": {
|
|
1228
|
+
"type": "boolean",
|
|
1229
|
+
"required": false
|
|
1230
|
+
},
|
|
1231
|
+
"error": {
|
|
1232
|
+
"type": "boolean",
|
|
1233
|
+
"required": false
|
|
1234
|
+
},
|
|
1235
|
+
"errorMessage": {
|
|
1236
|
+
"type": "string | undefined",
|
|
1237
|
+
"required": false
|
|
1238
|
+
},
|
|
1239
|
+
"inputId": {
|
|
1240
|
+
"type": "string | undefined",
|
|
1241
|
+
"required": false
|
|
1242
|
+
},
|
|
1243
|
+
"isInactive": {
|
|
1244
|
+
"type": "boolean",
|
|
1245
|
+
"required": false
|
|
1246
|
+
},
|
|
1247
|
+
"name": {
|
|
1248
|
+
"type": "string | undefined",
|
|
1249
|
+
"required": false
|
|
1250
|
+
},
|
|
1251
|
+
"placeholder": {
|
|
1252
|
+
"type": "string | undefined",
|
|
1253
|
+
"required": false
|
|
1254
|
+
},
|
|
1255
|
+
"required": {
|
|
1256
|
+
"type": "boolean",
|
|
1257
|
+
"required": false
|
|
1258
|
+
},
|
|
1259
|
+
"requiredMessage": {
|
|
1260
|
+
"type": "string",
|
|
1261
|
+
"required": false
|
|
1262
|
+
},
|
|
1263
|
+
"type": {
|
|
1264
|
+
"type": "InputType",
|
|
1265
|
+
"required": false
|
|
1266
|
+
},
|
|
1267
|
+
"value": {
|
|
1268
|
+
"type": "string",
|
|
1269
|
+
"required": false
|
|
1270
|
+
}
|
|
1271
|
+
},
|
|
1272
|
+
"events": [
|
|
1273
|
+
{
|
|
1274
|
+
"name": "dsChange",
|
|
1275
|
+
"detail": "string"
|
|
1276
|
+
},
|
|
1277
|
+
{
|
|
1278
|
+
"name": "dsClear",
|
|
1279
|
+
"detail": "void"
|
|
1280
|
+
}
|
|
1281
|
+
],
|
|
1282
|
+
"slots": []
|
|
1283
|
+
},
|
|
1284
|
+
"exports": {
|
|
1285
|
+
"customElement": "ds-input",
|
|
1286
|
+
"react": "DsInput",
|
|
1287
|
+
"angular": "DsInput"
|
|
1288
|
+
},
|
|
1289
|
+
"dependencies": [
|
|
1290
|
+
"@ds-mo/ui",
|
|
1291
|
+
"@ds-mo/tokens"
|
|
1292
|
+
],
|
|
1293
|
+
"componentDependencies": [
|
|
1294
|
+
"text"
|
|
1295
|
+
]
|
|
1296
|
+
},
|
|
1297
|
+
{
|
|
1298
|
+
"id": "component:ds-loader",
|
|
1299
|
+
"tag": "ds-loader",
|
|
1300
|
+
"name": "loader",
|
|
1301
|
+
"title": "Loader",
|
|
1302
|
+
"summary": "Anti-clockwise SVG spinner matching ds-icon size/color tokens.",
|
|
1303
|
+
"intentStatus": "migration-pending",
|
|
1304
|
+
"intent": null,
|
|
1305
|
+
"api": {
|
|
1306
|
+
"props": {
|
|
1307
|
+
"color": {
|
|
1308
|
+
"type": "LoaderColor | undefined",
|
|
1309
|
+
"required": false
|
|
1310
|
+
},
|
|
1311
|
+
"label": {
|
|
1312
|
+
"type": "string | undefined",
|
|
1313
|
+
"required": false
|
|
1314
|
+
},
|
|
1315
|
+
"size": {
|
|
1316
|
+
"type": "LoaderSize",
|
|
1317
|
+
"required": false
|
|
1318
|
+
}
|
|
1319
|
+
},
|
|
1320
|
+
"events": [],
|
|
1321
|
+
"slots": []
|
|
1322
|
+
},
|
|
1323
|
+
"exports": {
|
|
1324
|
+
"customElement": "ds-loader",
|
|
1325
|
+
"react": "DsLoader",
|
|
1326
|
+
"angular": "DsLoader"
|
|
1327
|
+
},
|
|
1328
|
+
"dependencies": [
|
|
1329
|
+
"@ds-mo/ui",
|
|
1330
|
+
"@ds-mo/tokens"
|
|
1331
|
+
],
|
|
1332
|
+
"componentDependencies": []
|
|
1333
|
+
},
|
|
1334
|
+
{
|
|
1335
|
+
"id": "component:ds-menu",
|
|
1336
|
+
"tag": "ds-menu",
|
|
1337
|
+
"name": "menu",
|
|
1338
|
+
"title": "Menu",
|
|
1339
|
+
"summary": "Anchored action or option menu with flat items, grouped sections, selection, toggles, and destructive actions.",
|
|
1340
|
+
"intentStatus": "complete",
|
|
1341
|
+
"intent": {
|
|
1342
|
+
"audience": "general",
|
|
1343
|
+
"status": "stable",
|
|
1344
|
+
"summary": "Anchored action or option menu with flat items, grouped sections, selection, toggles, and destructive actions.",
|
|
1345
|
+
"useWhen": [
|
|
1346
|
+
"A trigger reveals a short contextual list of commands or options.",
|
|
1347
|
+
"Options need grouping, selected state, toggle rows, or destructive treatment."
|
|
1348
|
+
],
|
|
1349
|
+
"avoidWhen": [
|
|
1350
|
+
"The user is selecting a value for a form field.",
|
|
1351
|
+
"The content requires rich dialog interaction or a multi-step workflow.",
|
|
1352
|
+
"The actions should remain persistently visible."
|
|
1353
|
+
],
|
|
1354
|
+
"alternatives": [
|
|
1355
|
+
{
|
|
1356
|
+
"when": "The choice is a form value with a label, validation, and submitted value.",
|
|
1357
|
+
"component": "component:ds-select",
|
|
1358
|
+
"reason": "Select provides form-control semantics and value ownership."
|
|
1359
|
+
},
|
|
1360
|
+
{
|
|
1361
|
+
"when": "The interaction needs substantial content, confirmation, or a form.",
|
|
1362
|
+
"component": "component:ds-modal",
|
|
1363
|
+
"reason": "Modal owns focus containment and dialog-level interaction."
|
|
1364
|
+
}
|
|
1365
|
+
],
|
|
1366
|
+
"commonlyComposedWith": [
|
|
1367
|
+
"component:ds-button-unfilled",
|
|
1368
|
+
"component:ds-panel-nav",
|
|
1369
|
+
"component:ds-shell-gradient-picker"
|
|
1370
|
+
],
|
|
1371
|
+
"accessibility": [
|
|
1372
|
+
"Anchor the menu to the control that opens it and return focus to that control when the menu closes.",
|
|
1373
|
+
"Open with visible initial focus only when the trigger was activated from the keyboard.",
|
|
1374
|
+
"Keep disabled items discoverable only when their unavailable state is meaningful."
|
|
1375
|
+
],
|
|
1376
|
+
"states": [
|
|
1377
|
+
"The host owns open state and responds to selection and close events.",
|
|
1378
|
+
"Use either flat items or sections, not both.",
|
|
1379
|
+
"Arrays, objects, and element anchors must be assigned as JavaScript properties."
|
|
1380
|
+
],
|
|
1381
|
+
"responsiveBehavior": [
|
|
1382
|
+
"Choose placement relative to the trigger and allow the component to clamp the popup to the viewport.",
|
|
1383
|
+
"Avoid fixed widths that exceed narrow viewports."
|
|
1384
|
+
],
|
|
1385
|
+
"frameworkCaveats": {
|
|
1386
|
+
"customElements": [
|
|
1387
|
+
"Assign items, sections, and HTMLElement anchors as properties after the element is defined."
|
|
1388
|
+
],
|
|
1389
|
+
"react": [
|
|
1390
|
+
"Pass arrays and objects as wrapper props and handle generated onDsSelect and onDsClose event props."
|
|
1391
|
+
],
|
|
1392
|
+
"angular": [
|
|
1393
|
+
"Use property bindings for arrays, objects, and anchors and event bindings for dsSelect and dsClose."
|
|
1394
|
+
]
|
|
1395
|
+
},
|
|
1396
|
+
"references": [
|
|
1397
|
+
{
|
|
1398
|
+
"label": "Storybook examples",
|
|
1399
|
+
"path": "src/wc/components/Menu/Menu.stories.ts"
|
|
1400
|
+
},
|
|
1401
|
+
{
|
|
1402
|
+
"label": "Framework integration",
|
|
1403
|
+
"path": "docs/framework-integration.md"
|
|
1404
|
+
}
|
|
1405
|
+
]
|
|
1406
|
+
},
|
|
1407
|
+
"api": {
|
|
1408
|
+
"props": {
|
|
1409
|
+
"align": {
|
|
1410
|
+
"type": "MenuAlign",
|
|
1411
|
+
"required": false
|
|
1412
|
+
},
|
|
1413
|
+
"alignOffset": {
|
|
1414
|
+
"type": "number | string",
|
|
1415
|
+
"required": false
|
|
1416
|
+
},
|
|
1417
|
+
"anchor": {
|
|
1418
|
+
"type": "HTMLElement | undefined",
|
|
1419
|
+
"required": false
|
|
1420
|
+
},
|
|
1421
|
+
"anchorId": {
|
|
1422
|
+
"type": "string | undefined",
|
|
1423
|
+
"required": false
|
|
1424
|
+
},
|
|
1425
|
+
"initialFocusVisible": {
|
|
1426
|
+
"type": "boolean",
|
|
1427
|
+
"required": false
|
|
1428
|
+
},
|
|
1429
|
+
"items": {
|
|
1430
|
+
"type": "MenuItemData[]",
|
|
1431
|
+
"required": false
|
|
1432
|
+
},
|
|
1433
|
+
"menuLabel": {
|
|
1434
|
+
"type": "string",
|
|
1435
|
+
"required": false
|
|
1436
|
+
},
|
|
1437
|
+
"menuWidth": {
|
|
1438
|
+
"type": "string | undefined",
|
|
1439
|
+
"required": false
|
|
1440
|
+
},
|
|
1441
|
+
"minWidth": {
|
|
1442
|
+
"type": "string | undefined",
|
|
1443
|
+
"required": false
|
|
1444
|
+
},
|
|
1445
|
+
"open": {
|
|
1446
|
+
"type": "boolean",
|
|
1447
|
+
"required": false
|
|
1448
|
+
},
|
|
1449
|
+
"sections": {
|
|
1450
|
+
"type": "MenuSection[]",
|
|
1451
|
+
"required": false
|
|
1452
|
+
},
|
|
1453
|
+
"side": {
|
|
1454
|
+
"type": "MenuSide",
|
|
1455
|
+
"required": false
|
|
1456
|
+
},
|
|
1457
|
+
"sideOffset": {
|
|
1458
|
+
"type": "number | string",
|
|
1459
|
+
"required": false
|
|
1460
|
+
}
|
|
1461
|
+
},
|
|
1462
|
+
"events": [
|
|
1463
|
+
{
|
|
1464
|
+
"name": "dsClose",
|
|
1465
|
+
"detail": "void"
|
|
1466
|
+
},
|
|
1467
|
+
{
|
|
1468
|
+
"name": "dsGradientSelect",
|
|
1469
|
+
"detail": "ShellGradientPreset"
|
|
1470
|
+
},
|
|
1471
|
+
{
|
|
1472
|
+
"name": "dsSelect",
|
|
1473
|
+
"detail": "MenuItemData"
|
|
1474
|
+
}
|
|
1475
|
+
],
|
|
1476
|
+
"slots": []
|
|
1477
|
+
},
|
|
1478
|
+
"exports": {
|
|
1479
|
+
"customElement": "ds-menu",
|
|
1480
|
+
"react": "DsMenu",
|
|
1481
|
+
"angular": "DsMenu"
|
|
1482
|
+
},
|
|
1483
|
+
"dependencies": [
|
|
1484
|
+
"@ds-mo/ui",
|
|
1485
|
+
"@ds-mo/tokens"
|
|
1486
|
+
],
|
|
1487
|
+
"componentDependencies": [
|
|
1488
|
+
"shell-gradient-picker",
|
|
1489
|
+
"text"
|
|
1490
|
+
]
|
|
1491
|
+
},
|
|
1492
|
+
{
|
|
1493
|
+
"id": "component:ds-modal",
|
|
1494
|
+
"tag": "ds-modal",
|
|
1495
|
+
"name": "modal",
|
|
1496
|
+
"title": "Modal",
|
|
1497
|
+
"summary": "Dialog overlay with portal rendering, escape-to-close, backdrop click, focus management, and entry/exit animations.",
|
|
1498
|
+
"intentStatus": "migration-pending",
|
|
1499
|
+
"intent": null,
|
|
1500
|
+
"api": {
|
|
1501
|
+
"props": {
|
|
1502
|
+
"heading": {
|
|
1503
|
+
"type": "string",
|
|
1504
|
+
"required": true
|
|
1505
|
+
},
|
|
1506
|
+
"modalWidth": {
|
|
1507
|
+
"type": "ModalWidth | string",
|
|
1508
|
+
"required": false
|
|
1509
|
+
},
|
|
1510
|
+
"open": {
|
|
1511
|
+
"type": "boolean",
|
|
1512
|
+
"required": false
|
|
1513
|
+
},
|
|
1514
|
+
"subtitle": {
|
|
1515
|
+
"type": "string | undefined",
|
|
1516
|
+
"required": false
|
|
1517
|
+
}
|
|
1518
|
+
},
|
|
1519
|
+
"events": [
|
|
1520
|
+
{
|
|
1521
|
+
"name": "dsClose",
|
|
1522
|
+
"detail": "void"
|
|
1523
|
+
}
|
|
1524
|
+
],
|
|
1525
|
+
"slots": []
|
|
1526
|
+
},
|
|
1527
|
+
"exports": {
|
|
1528
|
+
"customElement": "ds-modal",
|
|
1529
|
+
"react": "DsModal",
|
|
1530
|
+
"angular": "DsModal"
|
|
1531
|
+
},
|
|
1532
|
+
"dependencies": [
|
|
1533
|
+
"@ds-mo/ui",
|
|
1534
|
+
"@ds-mo/tokens"
|
|
1535
|
+
],
|
|
1536
|
+
"componentDependencies": [
|
|
1537
|
+
"text"
|
|
1538
|
+
]
|
|
1539
|
+
},
|
|
1540
|
+
{
|
|
1541
|
+
"id": "component:ds-pagination",
|
|
1542
|
+
"tag": "ds-pagination",
|
|
1543
|
+
"name": "pagination",
|
|
1544
|
+
"title": "Pagination",
|
|
1545
|
+
"summary": "Standalone page navigation with ellipsis for large ranges, sibling count control, and keyboard-accessible buttons.",
|
|
1546
|
+
"intentStatus": "migration-pending",
|
|
1547
|
+
"intent": null,
|
|
1548
|
+
"api": {
|
|
1549
|
+
"props": {
|
|
1550
|
+
"isInactive": {
|
|
1551
|
+
"type": "boolean",
|
|
1552
|
+
"required": false
|
|
1553
|
+
},
|
|
1554
|
+
"nextPageLabel": {
|
|
1555
|
+
"type": "string",
|
|
1556
|
+
"required": false
|
|
1557
|
+
},
|
|
1558
|
+
"page": {
|
|
1559
|
+
"type": "number",
|
|
1560
|
+
"required": false
|
|
1561
|
+
},
|
|
1562
|
+
"paginationLabel": {
|
|
1563
|
+
"type": "string",
|
|
1564
|
+
"required": false
|
|
1565
|
+
},
|
|
1566
|
+
"previousPageLabel": {
|
|
1567
|
+
"type": "string",
|
|
1568
|
+
"required": false
|
|
1569
|
+
},
|
|
1570
|
+
"siblingCount": {
|
|
1571
|
+
"type": "number",
|
|
1572
|
+
"required": false
|
|
1573
|
+
},
|
|
1574
|
+
"totalPages": {
|
|
1575
|
+
"type": "number",
|
|
1576
|
+
"required": false
|
|
1577
|
+
}
|
|
1578
|
+
},
|
|
1579
|
+
"events": [
|
|
1580
|
+
{
|
|
1581
|
+
"name": "dsPageChange",
|
|
1582
|
+
"detail": "number"
|
|
1583
|
+
}
|
|
1584
|
+
],
|
|
1585
|
+
"slots": []
|
|
1586
|
+
},
|
|
1587
|
+
"exports": {
|
|
1588
|
+
"customElement": "ds-pagination",
|
|
1589
|
+
"react": "DsPagination",
|
|
1590
|
+
"angular": "DsPagination"
|
|
1591
|
+
},
|
|
1592
|
+
"dependencies": [
|
|
1593
|
+
"@ds-mo/ui",
|
|
1594
|
+
"@ds-mo/tokens"
|
|
1595
|
+
],
|
|
1596
|
+
"componentDependencies": [
|
|
1597
|
+
"text"
|
|
1598
|
+
]
|
|
1599
|
+
},
|
|
1600
|
+
{
|
|
1601
|
+
"id": "component:ds-panel-nav",
|
|
1602
|
+
"tag": "ds-panel-nav",
|
|
1603
|
+
"name": "panel-nav",
|
|
1604
|
+
"title": "PanelNav",
|
|
1605
|
+
"summary": "PanelNav component from @ds-mo/ui.",
|
|
1606
|
+
"intentStatus": "migration-pending",
|
|
1607
|
+
"intent": null,
|
|
1608
|
+
"api": {
|
|
1609
|
+
"props": {
|
|
1610
|
+
"accountLabel": {
|
|
1611
|
+
"type": "string",
|
|
1612
|
+
"required": false
|
|
1613
|
+
},
|
|
1614
|
+
"activeId": {
|
|
1615
|
+
"type": "string",
|
|
1616
|
+
"required": false
|
|
1617
|
+
},
|
|
1618
|
+
"breakpoint": {
|
|
1619
|
+
"type": "number",
|
|
1620
|
+
"required": false
|
|
1621
|
+
},
|
|
1622
|
+
"collapseNavigationLabel": {
|
|
1623
|
+
"type": "string",
|
|
1624
|
+
"required": false
|
|
1625
|
+
},
|
|
1626
|
+
"collapsed": {
|
|
1627
|
+
"type": "boolean",
|
|
1628
|
+
"required": false
|
|
1629
|
+
},
|
|
1630
|
+
"currentUrl": {
|
|
1631
|
+
"type": "string",
|
|
1632
|
+
"required": false
|
|
1633
|
+
},
|
|
1634
|
+
"dashboardLabel": {
|
|
1635
|
+
"type": "string",
|
|
1636
|
+
"required": false
|
|
1637
|
+
},
|
|
1638
|
+
"dashboardNavigationLabel": {
|
|
1639
|
+
"type": "string",
|
|
1640
|
+
"required": false
|
|
1641
|
+
},
|
|
1642
|
+
"disableViewTransition": {
|
|
1643
|
+
"type": "boolean",
|
|
1644
|
+
"required": false
|
|
1645
|
+
},
|
|
1646
|
+
"expandNavigationLabel": {
|
|
1647
|
+
"type": "string",
|
|
1648
|
+
"required": false
|
|
1649
|
+
},
|
|
1650
|
+
"groups": {
|
|
1651
|
+
"type": "string | PanelNavGroup[]",
|
|
1652
|
+
"required": false
|
|
1653
|
+
},
|
|
1654
|
+
"navStyle": {
|
|
1655
|
+
"type": "NavChromeStyle",
|
|
1656
|
+
"required": false
|
|
1657
|
+
},
|
|
1658
|
+
"routerMode": {
|
|
1659
|
+
"type": "PanelNavRouterMode",
|
|
1660
|
+
"required": false
|
|
1661
|
+
},
|
|
1662
|
+
"settingsLabel": {
|
|
1663
|
+
"type": "string",
|
|
1664
|
+
"required": false
|
|
1665
|
+
},
|
|
1666
|
+
"settingsNavigationLabel": {
|
|
1667
|
+
"type": "string",
|
|
1668
|
+
"required": false
|
|
1669
|
+
},
|
|
1670
|
+
"storageKey": {
|
|
1671
|
+
"type": "string",
|
|
1672
|
+
"required": false
|
|
1673
|
+
},
|
|
1674
|
+
"userInitial": {
|
|
1675
|
+
"type": "string",
|
|
1676
|
+
"required": false
|
|
1677
|
+
},
|
|
1678
|
+
"userName": {
|
|
1679
|
+
"type": "string",
|
|
1680
|
+
"required": false
|
|
1681
|
+
}
|
|
1682
|
+
},
|
|
1683
|
+
"events": [
|
|
1684
|
+
{
|
|
1685
|
+
"name": "dsChromeTransitionEnd",
|
|
1686
|
+
"detail": "ChromeTransitionDetail"
|
|
1687
|
+
},
|
|
1688
|
+
{
|
|
1689
|
+
"name": "dsChromeTransitionStart",
|
|
1690
|
+
"detail": "ChromeTransitionDetail"
|
|
1691
|
+
},
|
|
1692
|
+
{
|
|
1693
|
+
"name": "dsNavFooterAction",
|
|
1694
|
+
"detail": "void"
|
|
1695
|
+
},
|
|
1696
|
+
{
|
|
1697
|
+
"name": "dsNavSelect",
|
|
1698
|
+
"detail": "string"
|
|
1699
|
+
},
|
|
1700
|
+
{
|
|
1701
|
+
"name": "dsNavToggle",
|
|
1702
|
+
"detail": "boolean"
|
|
1703
|
+
},
|
|
1704
|
+
{
|
|
1705
|
+
"name": "dsNavUserAction",
|
|
1706
|
+
"detail": "PanelNavUserActionDetail"
|
|
1707
|
+
}
|
|
1708
|
+
],
|
|
1709
|
+
"slots": []
|
|
1710
|
+
},
|
|
1711
|
+
"exports": {
|
|
1712
|
+
"customElement": "ds-panel-nav",
|
|
1713
|
+
"react": "DsPanelNav",
|
|
1714
|
+
"angular": "DsPanelNav"
|
|
1715
|
+
},
|
|
1716
|
+
"dependencies": [
|
|
1717
|
+
"@ds-mo/ui",
|
|
1718
|
+
"@ds-mo/tokens",
|
|
1719
|
+
"@ds-mo/icons"
|
|
1720
|
+
],
|
|
1721
|
+
"componentDependencies": [
|
|
1722
|
+
"badge",
|
|
1723
|
+
"button-unfilled",
|
|
1724
|
+
"icon",
|
|
1725
|
+
"text",
|
|
1726
|
+
"tooltip"
|
|
1727
|
+
]
|
|
1728
|
+
},
|
|
1729
|
+
{
|
|
1730
|
+
"id": "component:ds-panel-tools",
|
|
1731
|
+
"tag": "ds-panel-tools",
|
|
1732
|
+
"name": "panel-tools",
|
|
1733
|
+
"title": "PanelTools",
|
|
1734
|
+
"summary": "PanelTools component from @ds-mo/ui.",
|
|
1735
|
+
"intentStatus": "migration-pending",
|
|
1736
|
+
"intent": null,
|
|
1737
|
+
"api": {
|
|
1738
|
+
"props": {
|
|
1739
|
+
"activeTool": {
|
|
1740
|
+
"type": "PanelToolsToolId | ''",
|
|
1741
|
+
"required": false
|
|
1742
|
+
},
|
|
1743
|
+
"items": {
|
|
1744
|
+
"type": "PanelToolsItem[]",
|
|
1745
|
+
"required": false
|
|
1746
|
+
},
|
|
1747
|
+
"itemsJson": {
|
|
1748
|
+
"type": "string",
|
|
1749
|
+
"required": false
|
|
1750
|
+
},
|
|
1751
|
+
"open": {
|
|
1752
|
+
"type": "boolean",
|
|
1753
|
+
"required": false
|
|
1754
|
+
},
|
|
1755
|
+
"toolShortcutsLabel": {
|
|
1756
|
+
"type": "string",
|
|
1757
|
+
"required": false
|
|
1758
|
+
},
|
|
1759
|
+
"toolsLabel": {
|
|
1760
|
+
"type": "string",
|
|
1761
|
+
"required": false
|
|
1762
|
+
}
|
|
1763
|
+
},
|
|
1764
|
+
"events": [
|
|
1765
|
+
{
|
|
1766
|
+
"name": "dsChromeTransitionEnd",
|
|
1767
|
+
"detail": "ChromeTransitionDetail"
|
|
1768
|
+
},
|
|
1769
|
+
{
|
|
1770
|
+
"name": "dsChromeTransitionStart",
|
|
1771
|
+
"detail": "ChromeTransitionDetail"
|
|
1772
|
+
},
|
|
1773
|
+
{
|
|
1774
|
+
"name": "dsToolChange",
|
|
1775
|
+
"detail": "{\n id: PanelToolsToolId;\n selected: boolean;\n }"
|
|
1776
|
+
}
|
|
1777
|
+
],
|
|
1778
|
+
"slots": []
|
|
1779
|
+
},
|
|
1780
|
+
"exports": {
|
|
1781
|
+
"customElement": "ds-panel-tools",
|
|
1782
|
+
"react": "DsPanelTools",
|
|
1783
|
+
"angular": "DsPanelTools"
|
|
1784
|
+
},
|
|
1785
|
+
"dependencies": [
|
|
1786
|
+
"@ds-mo/ui",
|
|
1787
|
+
"@ds-mo/tokens"
|
|
1788
|
+
],
|
|
1789
|
+
"componentDependencies": [
|
|
1790
|
+
"button-unfilled",
|
|
1791
|
+
"text",
|
|
1792
|
+
"tooltip"
|
|
1793
|
+
]
|
|
1794
|
+
},
|
|
1795
|
+
{
|
|
1796
|
+
"id": "component:ds-radio-group",
|
|
1797
|
+
"tag": "ds-radio-group",
|
|
1798
|
+
"name": "radio-group",
|
|
1799
|
+
"title": "RadioGroup",
|
|
1800
|
+
"summary": "Radio selection group with vertical/horizontal layout, per-option inactive state, and keyboard navigation.",
|
|
1801
|
+
"intentStatus": "migration-pending",
|
|
1802
|
+
"intent": null,
|
|
1803
|
+
"api": {
|
|
1804
|
+
"props": {
|
|
1805
|
+
"ariaLabel": {
|
|
1806
|
+
"type": "string | null",
|
|
1807
|
+
"required": false
|
|
1808
|
+
},
|
|
1809
|
+
"ariaLabelledby": {
|
|
1810
|
+
"type": "string | undefined",
|
|
1811
|
+
"required": false
|
|
1812
|
+
},
|
|
1813
|
+
"direction": {
|
|
1814
|
+
"type": "'vertical' | 'horizontal'",
|
|
1815
|
+
"required": false
|
|
1816
|
+
},
|
|
1817
|
+
"disabled": {
|
|
1818
|
+
"type": "boolean",
|
|
1819
|
+
"required": false
|
|
1820
|
+
},
|
|
1821
|
+
"isInactive": {
|
|
1822
|
+
"type": "boolean",
|
|
1823
|
+
"required": false
|
|
1824
|
+
},
|
|
1825
|
+
"name": {
|
|
1826
|
+
"type": "string | undefined",
|
|
1827
|
+
"required": false
|
|
1828
|
+
},
|
|
1829
|
+
"options": {
|
|
1830
|
+
"type": "RadioOption[]",
|
|
1831
|
+
"required": false
|
|
1832
|
+
},
|
|
1833
|
+
"required": {
|
|
1834
|
+
"type": "boolean",
|
|
1835
|
+
"required": false
|
|
1836
|
+
},
|
|
1837
|
+
"requiredMessage": {
|
|
1838
|
+
"type": "string",
|
|
1839
|
+
"required": false
|
|
1840
|
+
},
|
|
1841
|
+
"value": {
|
|
1842
|
+
"type": "string",
|
|
1843
|
+
"required": false
|
|
1844
|
+
}
|
|
1845
|
+
},
|
|
1846
|
+
"events": [
|
|
1847
|
+
{
|
|
1848
|
+
"name": "dsChange",
|
|
1849
|
+
"detail": "string"
|
|
1850
|
+
}
|
|
1851
|
+
],
|
|
1852
|
+
"slots": []
|
|
1853
|
+
},
|
|
1854
|
+
"exports": {
|
|
1855
|
+
"customElement": "ds-radio-group",
|
|
1856
|
+
"react": "DsRadioGroup",
|
|
1857
|
+
"angular": "DsRadioGroup"
|
|
1858
|
+
},
|
|
1859
|
+
"dependencies": [
|
|
1860
|
+
"@ds-mo/ui",
|
|
1861
|
+
"@ds-mo/tokens"
|
|
1862
|
+
],
|
|
1863
|
+
"componentDependencies": [
|
|
1864
|
+
"text"
|
|
1865
|
+
]
|
|
1866
|
+
},
|
|
1867
|
+
{
|
|
1868
|
+
"id": "component:ds-select",
|
|
1869
|
+
"tag": "ds-select",
|
|
1870
|
+
"name": "select",
|
|
1871
|
+
"title": "Select",
|
|
1872
|
+
"summary": "Dropdown select with unfilled-button chrome in control-density sizes and width hug/fill. Uses ds-menu for the option list.",
|
|
1873
|
+
"intentStatus": "migration-pending",
|
|
1874
|
+
"intent": null,
|
|
1875
|
+
"api": {
|
|
1876
|
+
"props": {
|
|
1877
|
+
"activeFill": {
|
|
1878
|
+
"type": "boolean",
|
|
1879
|
+
"required": false
|
|
1880
|
+
},
|
|
1881
|
+
"ariaLabel": {
|
|
1882
|
+
"type": "string | null",
|
|
1883
|
+
"required": false
|
|
1884
|
+
},
|
|
1885
|
+
"ariaLabelledby": {
|
|
1886
|
+
"type": "string | undefined",
|
|
1887
|
+
"required": false
|
|
1888
|
+
},
|
|
1889
|
+
"disabled": {
|
|
1890
|
+
"type": "boolean",
|
|
1891
|
+
"required": false
|
|
1892
|
+
},
|
|
1893
|
+
"hasBorder": {
|
|
1894
|
+
"type": "boolean",
|
|
1895
|
+
"required": false
|
|
1896
|
+
},
|
|
1897
|
+
"isInactive": {
|
|
1898
|
+
"type": "boolean",
|
|
1899
|
+
"required": false
|
|
1900
|
+
},
|
|
1901
|
+
"name": {
|
|
1902
|
+
"type": "string | undefined",
|
|
1903
|
+
"required": false
|
|
1904
|
+
},
|
|
1905
|
+
"options": {
|
|
1906
|
+
"type": "SelectOption[]",
|
|
1907
|
+
"required": false
|
|
1908
|
+
},
|
|
1909
|
+
"placeholder": {
|
|
1910
|
+
"type": "string",
|
|
1911
|
+
"required": false
|
|
1912
|
+
},
|
|
1913
|
+
"required": {
|
|
1914
|
+
"type": "boolean",
|
|
1915
|
+
"required": false
|
|
1916
|
+
},
|
|
1917
|
+
"requiredMessage": {
|
|
1918
|
+
"type": "string",
|
|
1919
|
+
"required": false
|
|
1920
|
+
},
|
|
1921
|
+
"size": {
|
|
1922
|
+
"type": "SelectSize",
|
|
1923
|
+
"required": false
|
|
1924
|
+
},
|
|
1925
|
+
"value": {
|
|
1926
|
+
"type": "string",
|
|
1927
|
+
"required": false
|
|
1928
|
+
},
|
|
1929
|
+
"width": {
|
|
1930
|
+
"type": "SelectWidth",
|
|
1931
|
+
"required": false
|
|
1932
|
+
}
|
|
1933
|
+
},
|
|
1934
|
+
"events": [
|
|
1935
|
+
{
|
|
1936
|
+
"name": "dsChange",
|
|
1937
|
+
"detail": "string"
|
|
1938
|
+
}
|
|
1939
|
+
],
|
|
1940
|
+
"slots": []
|
|
1941
|
+
},
|
|
1942
|
+
"exports": {
|
|
1943
|
+
"customElement": "ds-select",
|
|
1944
|
+
"react": "DsSelect",
|
|
1945
|
+
"angular": "DsSelect"
|
|
1946
|
+
},
|
|
1947
|
+
"dependencies": [
|
|
1948
|
+
"@ds-mo/ui",
|
|
1949
|
+
"@ds-mo/tokens",
|
|
1950
|
+
"@ds-mo/icons"
|
|
1951
|
+
],
|
|
1952
|
+
"componentDependencies": [
|
|
1953
|
+
"icon",
|
|
1954
|
+
"menu",
|
|
1955
|
+
"text"
|
|
1956
|
+
]
|
|
1957
|
+
},
|
|
1958
|
+
{
|
|
1959
|
+
"id": "component:ds-shell-gradient-picker",
|
|
1960
|
+
"tag": "ds-shell-gradient-picker",
|
|
1961
|
+
"name": "shell-gradient-picker",
|
|
1962
|
+
"title": "ShellGradientPicker",
|
|
1963
|
+
"summary": "ShellGradientPicker component from @ds-mo/ui.",
|
|
1964
|
+
"intentStatus": "migration-pending",
|
|
1965
|
+
"intent": null,
|
|
1966
|
+
"api": {
|
|
1967
|
+
"props": {
|
|
1968
|
+
"groupLabel": {
|
|
1969
|
+
"type": "string",
|
|
1970
|
+
"required": false
|
|
1971
|
+
},
|
|
1972
|
+
"value": {
|
|
1973
|
+
"type": "ShellGradientPreset",
|
|
1974
|
+
"required": false
|
|
1975
|
+
}
|
|
1976
|
+
},
|
|
1977
|
+
"events": [
|
|
1978
|
+
{
|
|
1979
|
+
"name": "dsChange",
|
|
1980
|
+
"detail": "ShellGradientPreset"
|
|
1981
|
+
}
|
|
1982
|
+
],
|
|
1983
|
+
"slots": []
|
|
1984
|
+
},
|
|
1985
|
+
"exports": {
|
|
1986
|
+
"customElement": "ds-shell-gradient-picker",
|
|
1987
|
+
"react": "DsShellGradientPicker",
|
|
1988
|
+
"angular": "DsShellGradientPicker"
|
|
1989
|
+
},
|
|
1990
|
+
"dependencies": [
|
|
1991
|
+
"@ds-mo/ui",
|
|
1992
|
+
"@ds-mo/tokens"
|
|
1993
|
+
],
|
|
1994
|
+
"componentDependencies": [
|
|
1995
|
+
"shell-gradient-swatch"
|
|
1996
|
+
]
|
|
1997
|
+
},
|
|
1998
|
+
{
|
|
1999
|
+
"id": "component:ds-shell-gradient-swatch",
|
|
2000
|
+
"tag": "ds-shell-gradient-swatch",
|
|
2001
|
+
"name": "shell-gradient-swatch",
|
|
2002
|
+
"title": "ShellGradientSwatch",
|
|
2003
|
+
"summary": "ShellGradientSwatch component from @ds-mo/ui.",
|
|
2004
|
+
"intentStatus": "migration-pending",
|
|
2005
|
+
"intent": null,
|
|
2006
|
+
"api": {
|
|
2007
|
+
"props": {
|
|
2008
|
+
"ariaLabel": {
|
|
2009
|
+
"type": "string | null",
|
|
2010
|
+
"required": false
|
|
2011
|
+
},
|
|
2012
|
+
"isInactive": {
|
|
2013
|
+
"type": "boolean",
|
|
2014
|
+
"required": false
|
|
2015
|
+
},
|
|
2016
|
+
"preset": {
|
|
2017
|
+
"type": "ShellGradientPreset",
|
|
2018
|
+
"required": false
|
|
2019
|
+
},
|
|
2020
|
+
"selected": {
|
|
2021
|
+
"type": "boolean",
|
|
2022
|
+
"required": false
|
|
2023
|
+
}
|
|
2024
|
+
},
|
|
2025
|
+
"events": [
|
|
2026
|
+
{
|
|
2027
|
+
"name": "dsSelect",
|
|
2028
|
+
"detail": "ShellGradientPreset"
|
|
2029
|
+
}
|
|
2030
|
+
],
|
|
2031
|
+
"slots": []
|
|
2032
|
+
},
|
|
2033
|
+
"exports": {
|
|
2034
|
+
"customElement": "ds-shell-gradient-swatch",
|
|
2035
|
+
"react": "DsShellGradientSwatch",
|
|
2036
|
+
"angular": "DsShellGradientSwatch"
|
|
2037
|
+
},
|
|
2038
|
+
"dependencies": [
|
|
2039
|
+
"@ds-mo/ui",
|
|
2040
|
+
"@ds-mo/tokens"
|
|
2041
|
+
],
|
|
2042
|
+
"componentDependencies": []
|
|
2043
|
+
},
|
|
2044
|
+
{
|
|
2045
|
+
"id": "component:ds-skeleton",
|
|
2046
|
+
"tag": "ds-skeleton",
|
|
2047
|
+
"name": "skeleton",
|
|
2048
|
+
"title": "Skeleton",
|
|
2049
|
+
"summary": "Loading placeholder with text, circular, and rectangular variants. Supports multi-line text and shimmer animation.",
|
|
2050
|
+
"intentStatus": "migration-pending",
|
|
2051
|
+
"intent": null,
|
|
2052
|
+
"api": {
|
|
2053
|
+
"props": {
|
|
2054
|
+
"height": {
|
|
2055
|
+
"type": "string | number | undefined",
|
|
2056
|
+
"required": false
|
|
2057
|
+
},
|
|
2058
|
+
"lines": {
|
|
2059
|
+
"type": "number",
|
|
2060
|
+
"required": false
|
|
2061
|
+
},
|
|
2062
|
+
"shimmer": {
|
|
2063
|
+
"type": "boolean",
|
|
2064
|
+
"required": false
|
|
2065
|
+
},
|
|
2066
|
+
"variant": {
|
|
2067
|
+
"type": "SkeletonVariant",
|
|
2068
|
+
"required": false
|
|
2069
|
+
},
|
|
2070
|
+
"width": {
|
|
2071
|
+
"type": "string | number | undefined",
|
|
2072
|
+
"required": false
|
|
2073
|
+
}
|
|
2074
|
+
},
|
|
2075
|
+
"events": [],
|
|
2076
|
+
"slots": []
|
|
2077
|
+
},
|
|
2078
|
+
"exports": {
|
|
2079
|
+
"customElement": "ds-skeleton",
|
|
2080
|
+
"react": "DsSkeleton",
|
|
2081
|
+
"angular": "DsSkeleton"
|
|
2082
|
+
},
|
|
2083
|
+
"dependencies": [
|
|
2084
|
+
"@ds-mo/ui",
|
|
2085
|
+
"@ds-mo/tokens"
|
|
2086
|
+
],
|
|
2087
|
+
"componentDependencies": []
|
|
2088
|
+
},
|
|
2089
|
+
{
|
|
2090
|
+
"id": "component:ds-slider",
|
|
2091
|
+
"tag": "ds-slider",
|
|
2092
|
+
"name": "slider",
|
|
2093
|
+
"title": "Slider",
|
|
2094
|
+
"summary": "Range input with visual fill track, label, and current value display.",
|
|
2095
|
+
"intentStatus": "migration-pending",
|
|
2096
|
+
"intent": null,
|
|
2097
|
+
"api": {
|
|
2098
|
+
"props": {
|
|
2099
|
+
"inputId": {
|
|
2100
|
+
"type": "string | undefined",
|
|
2101
|
+
"required": false
|
|
2102
|
+
},
|
|
2103
|
+
"isInactive": {
|
|
2104
|
+
"type": "boolean",
|
|
2105
|
+
"required": false
|
|
2106
|
+
},
|
|
2107
|
+
"label": {
|
|
2108
|
+
"type": "string",
|
|
2109
|
+
"required": true
|
|
2110
|
+
},
|
|
2111
|
+
"max": {
|
|
2112
|
+
"type": "number",
|
|
2113
|
+
"required": false
|
|
2114
|
+
},
|
|
2115
|
+
"min": {
|
|
2116
|
+
"type": "number",
|
|
2117
|
+
"required": false
|
|
2118
|
+
},
|
|
2119
|
+
"step": {
|
|
2120
|
+
"type": "number",
|
|
2121
|
+
"required": false
|
|
2122
|
+
},
|
|
2123
|
+
"value": {
|
|
2124
|
+
"type": "number",
|
|
2125
|
+
"required": false
|
|
2126
|
+
},
|
|
2127
|
+
"valueText": {
|
|
2128
|
+
"type": "string | undefined",
|
|
2129
|
+
"required": false
|
|
2130
|
+
}
|
|
2131
|
+
},
|
|
2132
|
+
"events": [
|
|
2133
|
+
{
|
|
2134
|
+
"name": "dsChange",
|
|
2135
|
+
"detail": "number"
|
|
2136
|
+
}
|
|
2137
|
+
],
|
|
2138
|
+
"slots": []
|
|
2139
|
+
},
|
|
2140
|
+
"exports": {
|
|
2141
|
+
"customElement": "ds-slider",
|
|
2142
|
+
"react": "DsSlider",
|
|
2143
|
+
"angular": "DsSlider"
|
|
2144
|
+
},
|
|
2145
|
+
"dependencies": [
|
|
2146
|
+
"@ds-mo/ui",
|
|
2147
|
+
"@ds-mo/tokens"
|
|
2148
|
+
],
|
|
2149
|
+
"componentDependencies": [
|
|
2150
|
+
"text"
|
|
2151
|
+
]
|
|
2152
|
+
},
|
|
2153
|
+
{
|
|
2154
|
+
"id": "component:ds-tab-group",
|
|
2155
|
+
"tag": "ds-tab-group",
|
|
2156
|
+
"name": "tab-group",
|
|
2157
|
+
"title": "TabGroup",
|
|
2158
|
+
"summary": "Horizontal or vertical tab list with roving keyboard focus and optional dividers between tab groups.",
|
|
2159
|
+
"intentStatus": "migration-pending",
|
|
2160
|
+
"intent": null,
|
|
2161
|
+
"api": {
|
|
2162
|
+
"props": {
|
|
2163
|
+
"ariaLabel": {
|
|
2164
|
+
"type": "string | null",
|
|
2165
|
+
"required": false
|
|
2166
|
+
},
|
|
2167
|
+
"ariaLabelledby": {
|
|
2168
|
+
"type": "string | undefined",
|
|
2169
|
+
"required": false
|
|
2170
|
+
},
|
|
2171
|
+
"background": {
|
|
2172
|
+
"type": "TabBackground | undefined",
|
|
2173
|
+
"required": false
|
|
2174
|
+
},
|
|
2175
|
+
"orientation": {
|
|
2176
|
+
"type": "'horizontal' | 'vertical'",
|
|
2177
|
+
"required": false
|
|
2178
|
+
},
|
|
2179
|
+
"tabs": {
|
|
2180
|
+
"type": "TabItem[]",
|
|
2181
|
+
"required": false
|
|
2182
|
+
},
|
|
2183
|
+
"value": {
|
|
2184
|
+
"type": "string",
|
|
2185
|
+
"required": false
|
|
2186
|
+
}
|
|
2187
|
+
},
|
|
2188
|
+
"events": [
|
|
2189
|
+
{
|
|
2190
|
+
"name": "dsChange",
|
|
2191
|
+
"detail": "string"
|
|
2192
|
+
}
|
|
2193
|
+
],
|
|
2194
|
+
"slots": []
|
|
2195
|
+
},
|
|
2196
|
+
"exports": {
|
|
2197
|
+
"customElement": "ds-tab-group",
|
|
2198
|
+
"react": "DsTabGroup",
|
|
2199
|
+
"angular": "DsTabGroup"
|
|
2200
|
+
},
|
|
2201
|
+
"dependencies": [
|
|
2202
|
+
"@ds-mo/ui",
|
|
2203
|
+
"@ds-mo/tokens"
|
|
2204
|
+
],
|
|
2205
|
+
"componentDependencies": [
|
|
2206
|
+
"badge",
|
|
2207
|
+
"text"
|
|
2208
|
+
]
|
|
2209
|
+
},
|
|
2210
|
+
{
|
|
2211
|
+
"id": "component:ds-tab-group-nav",
|
|
2212
|
+
"tag": "ds-tab-group-nav",
|
|
2213
|
+
"name": "tab-group-nav",
|
|
2214
|
+
"title": "TabGroupNav",
|
|
2215
|
+
"summary": "Navigation-style tab list for primary and secondary navigation surfaces.",
|
|
2216
|
+
"intentStatus": "migration-pending",
|
|
2217
|
+
"intent": null,
|
|
2218
|
+
"api": {
|
|
2219
|
+
"props": {
|
|
2220
|
+
"ariaLabel": {
|
|
2221
|
+
"type": "string | null",
|
|
2222
|
+
"required": false
|
|
2223
|
+
},
|
|
2224
|
+
"ariaLabelledby": {
|
|
2225
|
+
"type": "string | undefined",
|
|
2226
|
+
"required": false
|
|
2227
|
+
},
|
|
2228
|
+
"background": {
|
|
2229
|
+
"type": "TabGroupNavBackground | undefined",
|
|
2230
|
+
"required": false
|
|
2231
|
+
},
|
|
2232
|
+
"orientation": {
|
|
2233
|
+
"type": "'horizontal' | 'vertical'",
|
|
2234
|
+
"required": false
|
|
2235
|
+
},
|
|
2236
|
+
"rovingEnabled": {
|
|
2237
|
+
"type": "boolean",
|
|
2238
|
+
"required": false
|
|
2239
|
+
},
|
|
2240
|
+
"selectionFollowsFocus": {
|
|
2241
|
+
"type": "boolean",
|
|
2242
|
+
"required": false
|
|
2243
|
+
},
|
|
2244
|
+
"tabs": {
|
|
2245
|
+
"type": "TabItem[]",
|
|
2246
|
+
"required": false
|
|
2247
|
+
},
|
|
2248
|
+
"value": {
|
|
2249
|
+
"type": "string",
|
|
2250
|
+
"required": false
|
|
2251
|
+
}
|
|
2252
|
+
},
|
|
2253
|
+
"events": [
|
|
2254
|
+
{
|
|
2255
|
+
"name": "dsChange",
|
|
2256
|
+
"detail": "string"
|
|
2257
|
+
},
|
|
2258
|
+
{
|
|
2259
|
+
"name": "dsRovingExit",
|
|
2260
|
+
"detail": "'start' | 'end'"
|
|
2261
|
+
}
|
|
2262
|
+
],
|
|
2263
|
+
"slots": []
|
|
2264
|
+
},
|
|
2265
|
+
"exports": {
|
|
2266
|
+
"customElement": "ds-tab-group-nav",
|
|
2267
|
+
"react": "DsTabGroupNav",
|
|
2268
|
+
"angular": "DsTabGroupNav"
|
|
2269
|
+
},
|
|
2270
|
+
"dependencies": [
|
|
2271
|
+
"@ds-mo/ui",
|
|
2272
|
+
"@ds-mo/tokens"
|
|
2273
|
+
],
|
|
2274
|
+
"componentDependencies": [
|
|
2275
|
+
"badge",
|
|
2276
|
+
"text"
|
|
2277
|
+
]
|
|
2278
|
+
},
|
|
2279
|
+
{
|
|
2280
|
+
"id": "component:ds-table",
|
|
2281
|
+
"tag": "ds-table",
|
|
2282
|
+
"name": "table",
|
|
2283
|
+
"title": "Table",
|
|
2284
|
+
"summary": "Data table with CSS grid layout, sorting, pagination, loading skeleton, row selection, and custom cell rendering.",
|
|
2285
|
+
"intentStatus": "migration-pending",
|
|
2286
|
+
"intent": null,
|
|
2287
|
+
"api": {
|
|
2288
|
+
"props": {
|
|
2289
|
+
"columns": {
|
|
2290
|
+
"type": "TableColumn[]",
|
|
2291
|
+
"required": false
|
|
2292
|
+
},
|
|
2293
|
+
"data": {
|
|
2294
|
+
"type": "unknown[]",
|
|
2295
|
+
"required": false
|
|
2296
|
+
},
|
|
2297
|
+
"emptyMessage": {
|
|
2298
|
+
"type": "string",
|
|
2299
|
+
"required": false
|
|
2300
|
+
},
|
|
2301
|
+
"loading": {
|
|
2302
|
+
"type": "boolean",
|
|
2303
|
+
"required": false
|
|
2304
|
+
},
|
|
2305
|
+
"loadingLabel": {
|
|
2306
|
+
"type": "string",
|
|
2307
|
+
"required": false
|
|
2308
|
+
},
|
|
2309
|
+
"locale": {
|
|
2310
|
+
"type": "string | undefined",
|
|
2311
|
+
"required": false
|
|
2312
|
+
},
|
|
2313
|
+
"nextPageLabel": {
|
|
2314
|
+
"type": "string",
|
|
2315
|
+
"required": false
|
|
2316
|
+
},
|
|
2317
|
+
"pageIndex": {
|
|
2318
|
+
"type": "number | undefined",
|
|
2319
|
+
"required": false
|
|
2320
|
+
},
|
|
2321
|
+
"pageSize": {
|
|
2322
|
+
"type": "number",
|
|
2323
|
+
"required": false
|
|
2324
|
+
},
|
|
2325
|
+
"pageStatusLabel": {
|
|
2326
|
+
"type": "string",
|
|
2327
|
+
"required": false
|
|
2328
|
+
},
|
|
2329
|
+
"previousPageLabel": {
|
|
2330
|
+
"type": "string",
|
|
2331
|
+
"required": false
|
|
2332
|
+
},
|
|
2333
|
+
"selectedRows": {
|
|
2334
|
+
"type": "string",
|
|
2335
|
+
"required": false
|
|
2336
|
+
},
|
|
2337
|
+
"sortState": {
|
|
2338
|
+
"type": "SortState | undefined",
|
|
2339
|
+
"required": false
|
|
2340
|
+
}
|
|
2341
|
+
},
|
|
2342
|
+
"events": [
|
|
2343
|
+
{
|
|
2344
|
+
"name": "dsPageChange",
|
|
2345
|
+
"detail": "{ pageIndex: number }"
|
|
2346
|
+
},
|
|
2347
|
+
{
|
|
2348
|
+
"name": "dsRowClick",
|
|
2349
|
+
"detail": "{ row: unknown; rowIndex: number }"
|
|
2350
|
+
},
|
|
2351
|
+
{
|
|
2352
|
+
"name": "dsSort",
|
|
2353
|
+
"detail": "{ columnId: string }"
|
|
2354
|
+
}
|
|
2355
|
+
],
|
|
2356
|
+
"slots": []
|
|
2357
|
+
},
|
|
2358
|
+
"exports": {
|
|
2359
|
+
"customElement": "ds-table",
|
|
2360
|
+
"react": "DsTable",
|
|
2361
|
+
"angular": "DsTable"
|
|
2362
|
+
},
|
|
2363
|
+
"dependencies": [
|
|
2364
|
+
"@ds-mo/ui",
|
|
2365
|
+
"@ds-mo/tokens"
|
|
2366
|
+
],
|
|
2367
|
+
"componentDependencies": [
|
|
2368
|
+
"text"
|
|
2369
|
+
]
|
|
2370
|
+
},
|
|
2371
|
+
{
|
|
2372
|
+
"id": "component:ds-tag",
|
|
2373
|
+
"tag": "ds-tag",
|
|
2374
|
+
"name": "tag",
|
|
2375
|
+
"title": "Tag",
|
|
2376
|
+
"summary": "Static metadata label with intent coloring and optional icon support. Uses control-density recipes for md/sm/xs.",
|
|
2377
|
+
"intentStatus": "migration-pending",
|
|
2378
|
+
"intent": null,
|
|
2379
|
+
"api": {
|
|
2380
|
+
"props": {
|
|
2381
|
+
"contrast": {
|
|
2382
|
+
"type": "TagContrast",
|
|
2383
|
+
"required": false
|
|
2384
|
+
},
|
|
2385
|
+
"intent": {
|
|
2386
|
+
"type": "TagIntent",
|
|
2387
|
+
"required": false
|
|
2388
|
+
},
|
|
2389
|
+
"label": {
|
|
2390
|
+
"type": "string",
|
|
2391
|
+
"required": true
|
|
2392
|
+
},
|
|
2393
|
+
"maxWidth": {
|
|
2394
|
+
"type": "string | number | undefined",
|
|
2395
|
+
"required": false
|
|
2396
|
+
},
|
|
2397
|
+
"rounded": {
|
|
2398
|
+
"type": "boolean",
|
|
2399
|
+
"required": false
|
|
2400
|
+
},
|
|
2401
|
+
"size": {
|
|
2402
|
+
"type": "TagSize",
|
|
2403
|
+
"required": false
|
|
2404
|
+
}
|
|
2405
|
+
},
|
|
2406
|
+
"events": [],
|
|
2407
|
+
"slots": []
|
|
2408
|
+
},
|
|
2409
|
+
"exports": {
|
|
2410
|
+
"customElement": "ds-tag",
|
|
2411
|
+
"react": "DsTag",
|
|
2412
|
+
"angular": "DsTag"
|
|
2413
|
+
},
|
|
2414
|
+
"dependencies": [
|
|
2415
|
+
"@ds-mo/ui",
|
|
2416
|
+
"@ds-mo/tokens"
|
|
2417
|
+
],
|
|
2418
|
+
"componentDependencies": [
|
|
2419
|
+
"text"
|
|
2420
|
+
]
|
|
2421
|
+
},
|
|
2422
|
+
{
|
|
2423
|
+
"id": "component:ds-text",
|
|
2424
|
+
"tag": "ds-text",
|
|
2425
|
+
"name": "text",
|
|
2426
|
+
"title": "Text",
|
|
2427
|
+
"summary": "Typography primitive supporting all design-system text variants, colors, truncation, and wrapping.",
|
|
2428
|
+
"intentStatus": "migration-pending",
|
|
2429
|
+
"intent": null,
|
|
2430
|
+
"api": {
|
|
2431
|
+
"props": {
|
|
2432
|
+
"align": {
|
|
2433
|
+
"type": "TextAlign | undefined",
|
|
2434
|
+
"required": false
|
|
2435
|
+
},
|
|
2436
|
+
"as": {
|
|
2437
|
+
"type": "TextElement",
|
|
2438
|
+
"required": false
|
|
2439
|
+
},
|
|
2440
|
+
"color": {
|
|
2441
|
+
"type": "TextColor | undefined",
|
|
2442
|
+
"required": false
|
|
2443
|
+
},
|
|
2444
|
+
"decoration": {
|
|
2445
|
+
"type": "TextDecoration | undefined",
|
|
2446
|
+
"required": false
|
|
2447
|
+
},
|
|
2448
|
+
"emphasis": {
|
|
2449
|
+
"type": "boolean",
|
|
2450
|
+
"required": false
|
|
2451
|
+
},
|
|
2452
|
+
"fontFeature": {
|
|
2453
|
+
"type": "TextFontFeature",
|
|
2454
|
+
"required": false
|
|
2455
|
+
},
|
|
2456
|
+
"for": {
|
|
2457
|
+
"type": "string | undefined",
|
|
2458
|
+
"required": false
|
|
2459
|
+
},
|
|
2460
|
+
"italic": {
|
|
2461
|
+
"type": "boolean",
|
|
2462
|
+
"required": false
|
|
2463
|
+
},
|
|
2464
|
+
"lineTruncation": {
|
|
2465
|
+
"type": "LineTruncation",
|
|
2466
|
+
"required": false
|
|
2467
|
+
},
|
|
2468
|
+
"textId": {
|
|
2469
|
+
"type": "string | undefined",
|
|
2470
|
+
"required": false
|
|
2471
|
+
},
|
|
2472
|
+
"variant": {
|
|
2473
|
+
"type": "TextVariant",
|
|
2474
|
+
"required": false
|
|
2475
|
+
},
|
|
2476
|
+
"wrap": {
|
|
2477
|
+
"type": "TextWrap | undefined",
|
|
2478
|
+
"required": false
|
|
2479
|
+
}
|
|
2480
|
+
},
|
|
2481
|
+
"events": [],
|
|
2482
|
+
"slots": []
|
|
2483
|
+
},
|
|
2484
|
+
"exports": {
|
|
2485
|
+
"customElement": "ds-text",
|
|
2486
|
+
"react": "DsText",
|
|
2487
|
+
"angular": "DsText"
|
|
2488
|
+
},
|
|
2489
|
+
"dependencies": [
|
|
2490
|
+
"@ds-mo/ui",
|
|
2491
|
+
"@ds-mo/tokens"
|
|
2492
|
+
],
|
|
2493
|
+
"componentDependencies": []
|
|
2494
|
+
},
|
|
2495
|
+
{
|
|
2496
|
+
"id": "component:ds-toggle",
|
|
2497
|
+
"tag": "ds-toggle",
|
|
2498
|
+
"name": "toggle",
|
|
2499
|
+
"title": "Toggle",
|
|
2500
|
+
"summary": "Switch control with on/off state and accessible switch semantics.",
|
|
2501
|
+
"intentStatus": "migration-pending",
|
|
2502
|
+
"intent": null,
|
|
2503
|
+
"api": {
|
|
2504
|
+
"props": {
|
|
2505
|
+
"checked": {
|
|
2506
|
+
"type": "boolean",
|
|
2507
|
+
"required": false
|
|
2508
|
+
},
|
|
2509
|
+
"disabled": {
|
|
2510
|
+
"type": "boolean",
|
|
2511
|
+
"required": false
|
|
2512
|
+
},
|
|
2513
|
+
"isInactive": {
|
|
2514
|
+
"type": "boolean",
|
|
2515
|
+
"required": false
|
|
2516
|
+
},
|
|
2517
|
+
"name": {
|
|
2518
|
+
"type": "string | undefined",
|
|
2519
|
+
"required": false
|
|
2520
|
+
},
|
|
2521
|
+
"required": {
|
|
2522
|
+
"type": "boolean",
|
|
2523
|
+
"required": false
|
|
2524
|
+
},
|
|
2525
|
+
"requiredMessage": {
|
|
2526
|
+
"type": "string",
|
|
2527
|
+
"required": false
|
|
2528
|
+
},
|
|
2529
|
+
"value": {
|
|
2530
|
+
"type": "string",
|
|
2531
|
+
"required": false
|
|
2532
|
+
}
|
|
2533
|
+
},
|
|
2534
|
+
"events": [
|
|
2535
|
+
{
|
|
2536
|
+
"name": "dsChange",
|
|
2537
|
+
"detail": "boolean"
|
|
2538
|
+
}
|
|
2539
|
+
],
|
|
2540
|
+
"slots": []
|
|
2541
|
+
},
|
|
2542
|
+
"exports": {
|
|
2543
|
+
"customElement": "ds-toggle",
|
|
2544
|
+
"react": "DsToggle",
|
|
2545
|
+
"angular": "DsToggle"
|
|
2546
|
+
},
|
|
2547
|
+
"dependencies": [
|
|
2548
|
+
"@ds-mo/ui",
|
|
2549
|
+
"@ds-mo/tokens"
|
|
2550
|
+
],
|
|
2551
|
+
"componentDependencies": []
|
|
2552
|
+
},
|
|
2553
|
+
{
|
|
2554
|
+
"id": "component:ds-tooltip",
|
|
2555
|
+
"tag": "ds-tooltip",
|
|
2556
|
+
"name": "tooltip",
|
|
2557
|
+
"title": "Tooltip",
|
|
2558
|
+
"summary": "Positioned tooltip with control-density sizes, delay, keyboard shortcut display, and viewport clamping.",
|
|
2559
|
+
"intentStatus": "migration-pending",
|
|
2560
|
+
"intent": null,
|
|
2561
|
+
"api": {
|
|
2562
|
+
"props": {
|
|
2563
|
+
"align": {
|
|
2564
|
+
"type": "TooltipAlign",
|
|
2565
|
+
"required": false
|
|
2566
|
+
},
|
|
2567
|
+
"alignOffset": {
|
|
2568
|
+
"type": "number | string",
|
|
2569
|
+
"required": false
|
|
2570
|
+
},
|
|
2571
|
+
"delay": {
|
|
2572
|
+
"type": "number | string",
|
|
2573
|
+
"required": false
|
|
2574
|
+
},
|
|
2575
|
+
"label": {
|
|
2576
|
+
"type": "string",
|
|
2577
|
+
"required": true
|
|
2578
|
+
},
|
|
2579
|
+
"shortcutKey": {
|
|
2580
|
+
"type": "string | undefined",
|
|
2581
|
+
"required": false
|
|
2582
|
+
},
|
|
2583
|
+
"shortcutKeyPosition": {
|
|
2584
|
+
"type": "'start' | 'end'",
|
|
2585
|
+
"required": false
|
|
2586
|
+
},
|
|
2587
|
+
"side": {
|
|
2588
|
+
"type": "TooltipSide",
|
|
2589
|
+
"required": false
|
|
2590
|
+
},
|
|
2591
|
+
"sideOffset": {
|
|
2592
|
+
"type": "number | string",
|
|
2593
|
+
"required": false
|
|
2594
|
+
},
|
|
2595
|
+
"size": {
|
|
2596
|
+
"type": "TooltipSize",
|
|
2597
|
+
"required": false
|
|
2598
|
+
}
|
|
2599
|
+
},
|
|
2600
|
+
"events": [],
|
|
2601
|
+
"slots": []
|
|
2602
|
+
},
|
|
2603
|
+
"exports": {
|
|
2604
|
+
"customElement": "ds-tooltip",
|
|
2605
|
+
"react": "DsTooltip",
|
|
2606
|
+
"angular": "DsTooltip"
|
|
2607
|
+
},
|
|
2608
|
+
"dependencies": [
|
|
2609
|
+
"@ds-mo/ui",
|
|
2610
|
+
"@ds-mo/tokens"
|
|
2611
|
+
],
|
|
2612
|
+
"componentDependencies": [
|
|
2613
|
+
"text"
|
|
2614
|
+
]
|
|
2615
|
+
},
|
|
2616
|
+
{
|
|
2617
|
+
"id": "component:ds-tooltip-data-viz",
|
|
2618
|
+
"tag": "ds-tooltip-data-viz",
|
|
2619
|
+
"name": "tooltip-data-viz",
|
|
2620
|
+
"title": "TooltipDataViz",
|
|
2621
|
+
"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.",
|
|
2622
|
+
"intentStatus": "migration-pending",
|
|
2623
|
+
"intent": null,
|
|
2624
|
+
"api": {
|
|
2625
|
+
"props": {
|
|
2626
|
+
"delay": {
|
|
2627
|
+
"type": "number | string",
|
|
2628
|
+
"required": false
|
|
2629
|
+
},
|
|
2630
|
+
"label": {
|
|
2631
|
+
"type": "string",
|
|
2632
|
+
"required": false
|
|
2633
|
+
},
|
|
2634
|
+
"value": {
|
|
2635
|
+
"type": "string | number",
|
|
2636
|
+
"required": false
|
|
2637
|
+
},
|
|
2638
|
+
"x": {
|
|
2639
|
+
"type": "number",
|
|
2640
|
+
"required": false
|
|
2641
|
+
},
|
|
2642
|
+
"y": {
|
|
2643
|
+
"type": "number",
|
|
2644
|
+
"required": false
|
|
2645
|
+
}
|
|
2646
|
+
},
|
|
2647
|
+
"events": [],
|
|
2648
|
+
"slots": []
|
|
2649
|
+
},
|
|
2650
|
+
"exports": {
|
|
2651
|
+
"customElement": "ds-tooltip-data-viz",
|
|
2652
|
+
"react": "DsTooltipDataViz",
|
|
2653
|
+
"angular": "DsTooltipDataViz"
|
|
2654
|
+
},
|
|
2655
|
+
"dependencies": [
|
|
2656
|
+
"@ds-mo/ui",
|
|
2657
|
+
"@ds-mo/tokens"
|
|
2658
|
+
],
|
|
2659
|
+
"componentDependencies": [
|
|
2660
|
+
"text"
|
|
2661
|
+
]
|
|
2662
|
+
}
|
|
2663
|
+
]
|
|
2664
|
+
}
|