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