dap-design-system 0.56.2 → 0.56.4
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/components/skeleton/skeleton.component.d.ts +2 -1
- package/dist/{components-DtNvQM0v.js → components-B3TPbxBv.js} +19 -17
- package/dist/components-B3TPbxBv.js.map +1 -0
- package/dist/components.js +1 -1
- package/dist/dds.js +1 -1
- package/dist/light.theme.css +20 -2
- package/dist/manifest/types/vue/index.d.ts +277 -277
- package/dist/manifest/vscode.html-custom-data.json +152 -152
- package/dist/manifest/web-types.json +475 -475
- package/dist/react/dap-ds-skeleton/index.d.ts +2 -1
- package/dist/react/index.d.ts +10 -10
- package/dist/react-types.ts +10 -10
- package/dist/react.js +163 -163
- package/dist/react.js.map +1 -1
- package/dist/scss/variables-light.scss +886 -886
- package/dist/scss/variables-teal.scss +886 -886
- package/dist/teal.theme.css +2 -2
- package/dist/variables/variables-light.css +32 -13
- package/dist/variables/variables-teal.css +5 -4
- package/package.json +1 -1
- package/dist/components-DtNvQM0v.js.map +0 -1
|
@@ -6,6 +6,113 @@
|
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
8
8
|
"elements": [
|
|
9
|
+
{
|
|
10
|
+
"name": "dap-ds-accordion",
|
|
11
|
+
"description": "An accordion is a vertically stacked list of interactive items that can be expanded or collapsed to reveal or hide content.\n---\n\n\n### **Events:**\n - **dds-opened** - Event fired when the accordion is opened.\n- **dds-closed** - Event fired when the accordion is closed.\n\n### **Slots:**\n - **default** - The content of the accordion.\n- **heading** - The heading of the accordion.\n- **icon-opened** - The icon when the accordion is opened.\n- **icon-closed** - The icon when the accordion is closed.\n\n### **CSS Properties:**\n - **--dds-accordion-border-width** - The width of the accordion border (default: var(--dds-border-width-base)) _(default: undefined)_\n- **--dds-accordion-border-style** - The style of the accordion border (default: solid) _(default: undefined)_\n- **--dds-accordion-border-radius** - The border radius of the accordion (default: var(--dds-radius-base)) _(default: undefined)_\n- **--dds-accordion-border-color** - The color of the accordion border (default: var(--dds-border-neutral-divider)) _(default: undefined)_\n- **--dds-accordion-background-color** - The background color of the accordion (default: var(--dds-background-neutral-subtle)) _(default: undefined)_\n- **--dds-accordion-text-color** - The text color of the accordion (default: var(--dds-text-neutral-strong)) _(default: undefined)_\n- **--dds-accordion-hover-background** - The background color when hovering over the accordion (default: var(--dds-background-neutral-base)) _(default: undefined)_\n- **--dds-accordion-active-background** - The background color when the accordion is active (default: var(--dds-background-neutral-medium)) _(default: undefined)_\n- **--dds-accordion-icon-background** - The background color of the accordion icon (default: var(--dds-transparent-black-subtle)) _(default: undefined)_\n- **--dds-accordion-icon-color** - The color of the accordion icon (default: var(--dds-icon-neutral-base)) _(default: undefined)_\n- **--dds-accordion-icon-hover-background** - The background color of the accordion icon when hovered (default: var(--dds-transparent-black-base)) _(default: undefined)_\n- **--dds-accordion-icon-active-background** - The background color of the accordion icon when active (default: var(--dds-transparent-black-strong)) _(default: undefined)_\n- **--dds-accordion-icon-hover-color** - The color of the accordion icon when hovered (default: var(--dds-icon-neutral-strong)) _(default: undefined)_\n- **--dds-accordion-icon-active-color** - The color of the accordion icon when active (default: var(--dds-icon-neutral-strong)) _(default: undefined)_\n- **--dds-accordion-content-color** - The color of the accordion content (default: var(--dds-text-text-neutral)) _(default: undefined)_\n- **--dds-accordion-transition-duration** - The duration of the accordion transitions (default: var(--dds-transition-fast)) _(default: undefined)_\n- **--dds-accordion-transition-timing** - The timing function of the accordion transitions (default: var(--dds-easing-ease-in-out)) _(default: undefined)_\n- **--dds-accordion-divider-color** - The color of the divider between accordion items (default: var(--dds-border-neutral-divider)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main accordion container.\n- **heading** - The heading of the accordion.\n- **button** - The button of the accordion.\n- **content** - The content of the accordion.\n- **content-container** - The container of the accordion content.\n- **icon-wrapper** - The icon wrapper of the accordion.\n- **open-icon** - The icon when the accordion is opened.\n- **open-icon-base** - The base of the icon when the accordion is opened.\n- **close-icon** - The icon when the accordion is closed.\n- **close-icon-base** - The base of the icon when the accordion is closed.",
|
|
12
|
+
"doc-url": "",
|
|
13
|
+
"attributes": [],
|
|
14
|
+
"slots": [
|
|
15
|
+
{
|
|
16
|
+
"name": "default",
|
|
17
|
+
"description": "The content of the accordion."
|
|
18
|
+
},
|
|
19
|
+
{
|
|
20
|
+
"name": "heading",
|
|
21
|
+
"description": "The heading of the accordion."
|
|
22
|
+
},
|
|
23
|
+
{
|
|
24
|
+
"name": "icon-opened",
|
|
25
|
+
"description": "The icon when the accordion is opened."
|
|
26
|
+
},
|
|
27
|
+
{
|
|
28
|
+
"name": "icon-closed",
|
|
29
|
+
"description": "The icon when the accordion is closed."
|
|
30
|
+
}
|
|
31
|
+
],
|
|
32
|
+
"events": [
|
|
33
|
+
{
|
|
34
|
+
"name": "dds-opened",
|
|
35
|
+
"type": "{ open: boolean, item: AccordionBaseElement }",
|
|
36
|
+
"description": "Event fired when the accordion is opened."
|
|
37
|
+
},
|
|
38
|
+
{
|
|
39
|
+
"name": "dds-closed",
|
|
40
|
+
"type": "{ open: boolean, item: AccordionBaseElement }",
|
|
41
|
+
"description": "Event fired when the accordion is closed."
|
|
42
|
+
}
|
|
43
|
+
],
|
|
44
|
+
"js": {
|
|
45
|
+
"properties": [
|
|
46
|
+
{
|
|
47
|
+
"name": "size",
|
|
48
|
+
"description": "The size of the accordion. Default is `sm`. Visual variants are sm and lg (other sizes map to sm).",
|
|
49
|
+
"type": "'xxs' | 'xs' | 'sm' | 'md' | 'lg'"
|
|
50
|
+
},
|
|
51
|
+
{
|
|
52
|
+
"name": "sizeMap",
|
|
53
|
+
"description": "Responsive size map (e.g. \"md:lg\")",
|
|
54
|
+
"type": "string"
|
|
55
|
+
},
|
|
56
|
+
{
|
|
57
|
+
"name": "parentSized",
|
|
58
|
+
"description": "When \"true\", size is taken from the parent card if present.",
|
|
59
|
+
"type": "string"
|
|
60
|
+
},
|
|
61
|
+
{
|
|
62
|
+
"name": "heading",
|
|
63
|
+
"description": "The heading text of the accordion, this will be used as the aria label of the heading also if ariaLabel is not provided",
|
|
64
|
+
"type": "string"
|
|
65
|
+
},
|
|
66
|
+
{
|
|
67
|
+
"name": "headingLevel",
|
|
68
|
+
"description": "The heading level of the accordion. Default is `4`.",
|
|
69
|
+
"type": "1 | 2 | 3 | 4 | 5 | 6"
|
|
70
|
+
},
|
|
71
|
+
{
|
|
72
|
+
"name": "opened",
|
|
73
|
+
"description": "Whether the accordion is opened. Default is `false`.",
|
|
74
|
+
"type": "boolean"
|
|
75
|
+
},
|
|
76
|
+
{
|
|
77
|
+
"name": "iconLocation",
|
|
78
|
+
"description": "The location of the icon. Default is `right`.",
|
|
79
|
+
"type": "'left' | 'right'"
|
|
80
|
+
},
|
|
81
|
+
{
|
|
82
|
+
"name": "variant",
|
|
83
|
+
"description": "The variant of the accordion.",
|
|
84
|
+
"type": "'default' | 'collapsed' | 'clean' | 'clean-collapsed'"
|
|
85
|
+
},
|
|
86
|
+
{
|
|
87
|
+
"name": "lastItem",
|
|
88
|
+
"description": "Whether the accordion is the last item.",
|
|
89
|
+
"type": "boolean"
|
|
90
|
+
},
|
|
91
|
+
{
|
|
92
|
+
"name": "disabled",
|
|
93
|
+
"description": "Whether the accordion is disabled.",
|
|
94
|
+
"type": "boolean"
|
|
95
|
+
},
|
|
96
|
+
{
|
|
97
|
+
"name": "loading",
|
|
98
|
+
"description": "Whether the accordion is in loading state.",
|
|
99
|
+
"type": "boolean"
|
|
100
|
+
}
|
|
101
|
+
],
|
|
102
|
+
"events": [
|
|
103
|
+
{
|
|
104
|
+
"name": "dds-opened",
|
|
105
|
+
"type": "{ open: boolean, item: AccordionBaseElement }",
|
|
106
|
+
"description": "Event fired when the accordion is opened."
|
|
107
|
+
},
|
|
108
|
+
{
|
|
109
|
+
"name": "dds-closed",
|
|
110
|
+
"type": "{ open: boolean, item: AccordionBaseElement }",
|
|
111
|
+
"description": "Event fired when the accordion is closed."
|
|
112
|
+
}
|
|
113
|
+
]
|
|
114
|
+
}
|
|
115
|
+
},
|
|
9
116
|
{
|
|
10
117
|
"name": "dap-ds-accordion-group",
|
|
11
118
|
"description": "An accordion group is a collection of accordion components.\n---\n\n\n### **Slots:**\n - _default_ - The content of the accordion group.\n\n### **CSS Properties:**\n - **--dds-accordion-group-spacing** - Controls the gap between accordion items (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-accordion-group-border-color** - Controls the border color (default: var(--dds-border-neutral-subtle)) _(default: undefined)_\n- **--dds-accordion-group-border-width** - Controls the border width (default: var(--dds-border-width-base)) _(default: undefined)_\n- **--dds-accordion-group-border-radius** - Controls the border radius (default: var(--dds-radius-base)) _(default: undefined)_\n- **--dds-accordion-group-background** - Controls the background color (default: transparent) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main accordion group container.",
|
|
@@ -203,108 +310,100 @@
|
|
|
203
310
|
}
|
|
204
311
|
},
|
|
205
312
|
{
|
|
206
|
-
"name": "dap-ds-
|
|
207
|
-
"description": "
|
|
313
|
+
"name": "dap-ds-avatar-group",
|
|
314
|
+
"description": "Avatar group component displays multiple avatars in an organized layout with overflow management.\n---\n\n\n### **Events:**\n - **dds-overflow-click** - Fired when the overflow indicator is clicked.\n\n### **Slots:**\n - _default_ - The avatars to display in the group.\n\n### **CSS Properties:**\n - **--dds-avatar-group-gap** - Gap between avatars in grid layout (default: 0) _(default: undefined)_\n- **--dds-avatar-group-overlap** - Overlap amount for stacked layout (default: -8px) _(default: undefined)_\n- **--dds-avatar-group-border-width** - Border width for avatars (default: var(--dds-border-width-base)) _(default: undefined)_\n- **--dds-avatar-group-border-color** - Border color for avatars (default: var(--dds-border-neutral-divider)) _(default: undefined)_\n- **--dds-avatar-group-overflow-bg** - Background color for overflow indicator (default: var(--dds-neutral-300)) _(default: undefined)_\n- **--dds-avatar-group-overflow-color** - Text color for overflow indicator (default: var(--dds-neutral-700)) _(default: undefined)_\n- **--dds-avatar-group-overflow-border** - Border for overflow indicator (default: var(--dds-avatar-group-border-width) solid var(--dds-avatar-group-border-color)) _(default: undefined)_\n- **--dds-avatar-group-size-lg** - Size for large avatars (default: var(--dds-spacing-2000)) _(default: undefined)_\n- **--dds-avatar-group-size-md** - Size for medium avatars (default: var(--dds-spacing-1600)) _(default: undefined)_\n- **--dds-avatar-group-size-sm** - Size for small avatars (default: var(--dds-spacing-1200)) _(default: undefined)_\n- **--dds-avatar-group-size-xs** - Size for extra small avatars (default: var(--dds-spacing-800)) _(default: undefined)_\n- **--dds-avatar-group-size-xxs** - Size for extra extra small avatars (default: var(--dds-spacing-400)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main container of the avatar group.\n- **avatars** - The container for the visible avatars.\n- **overflow** - The overflow indicator element.",
|
|
208
315
|
"doc-url": "",
|
|
209
|
-
"attributes": [
|
|
210
|
-
"slots": [
|
|
316
|
+
"attributes": [
|
|
211
317
|
{
|
|
212
|
-
"name": "
|
|
213
|
-
"description": "
|
|
318
|
+
"name": "layout",
|
|
319
|
+
"description": "Layout type for the avatar group",
|
|
320
|
+
"value": { "type": "'stack' | 'grid'", "default": "'stack'" }
|
|
214
321
|
},
|
|
215
322
|
{
|
|
216
|
-
"name": "
|
|
217
|
-
"description": "
|
|
323
|
+
"name": "max",
|
|
324
|
+
"description": "Maximum number of avatars to show before showing overflow",
|
|
325
|
+
"value": { "type": "number", "default": "3" }
|
|
218
326
|
},
|
|
219
327
|
{
|
|
220
|
-
"name": "
|
|
221
|
-
"description": "
|
|
328
|
+
"name": "show-total",
|
|
329
|
+
"description": "Whether to show the total count in overflow indicator",
|
|
330
|
+
"value": { "type": "boolean", "default": "false" }
|
|
222
331
|
},
|
|
223
332
|
{
|
|
224
|
-
"name": "
|
|
225
|
-
"description": "
|
|
333
|
+
"name": "interactive-overflow",
|
|
334
|
+
"description": "Interactive overflow indicator",
|
|
335
|
+
"value": { "type": "boolean", "default": "false" }
|
|
336
|
+
},
|
|
337
|
+
{
|
|
338
|
+
"name": "label",
|
|
339
|
+
"description": "Accessible label for the avatar group",
|
|
340
|
+
"value": { "type": "string" }
|
|
341
|
+
},
|
|
342
|
+
{
|
|
343
|
+
"name": "overflow-label",
|
|
344
|
+
"description": "Accessible label for the overflow indicator",
|
|
345
|
+
"value": { "type": "string" }
|
|
226
346
|
}
|
|
227
347
|
],
|
|
228
|
-
"
|
|
348
|
+
"slots": [
|
|
229
349
|
{
|
|
230
|
-
"name": "
|
|
231
|
-
"
|
|
232
|
-
|
|
233
|
-
|
|
350
|
+
"name": "",
|
|
351
|
+
"description": "The avatars to display in the group."
|
|
352
|
+
}
|
|
353
|
+
],
|
|
354
|
+
"events": [
|
|
234
355
|
{
|
|
235
|
-
"name": "dds-
|
|
236
|
-
"
|
|
237
|
-
"description": "Event fired when the accordion is closed."
|
|
356
|
+
"name": "dds-overflow-click",
|
|
357
|
+
"description": "Fired when the overflow indicator is clicked."
|
|
238
358
|
}
|
|
239
359
|
],
|
|
240
360
|
"js": {
|
|
241
361
|
"properties": [
|
|
242
362
|
{
|
|
243
|
-
"name": "
|
|
244
|
-
"description": "
|
|
245
|
-
"type": "'
|
|
246
|
-
},
|
|
247
|
-
{
|
|
248
|
-
"name": "sizeMap",
|
|
249
|
-
"description": "Responsive size map (e.g. \"md:lg\")",
|
|
250
|
-
"type": "string"
|
|
251
|
-
},
|
|
252
|
-
{
|
|
253
|
-
"name": "parentSized",
|
|
254
|
-
"description": "When \"true\", size is taken from the parent card if present.",
|
|
255
|
-
"type": "string"
|
|
256
|
-
},
|
|
257
|
-
{
|
|
258
|
-
"name": "heading",
|
|
259
|
-
"description": "The heading text of the accordion, this will be used as the aria label of the heading also if ariaLabel is not provided",
|
|
260
|
-
"type": "string"
|
|
363
|
+
"name": "layout",
|
|
364
|
+
"description": "Layout type for the avatar group",
|
|
365
|
+
"type": "'stack' | 'grid'"
|
|
261
366
|
},
|
|
262
367
|
{
|
|
263
|
-
"name": "
|
|
264
|
-
"description": "
|
|
265
|
-
"type": "
|
|
368
|
+
"name": "max",
|
|
369
|
+
"description": "Maximum number of avatars to show before showing overflow",
|
|
370
|
+
"type": "number"
|
|
266
371
|
},
|
|
267
372
|
{
|
|
268
|
-
"name": "
|
|
269
|
-
"description": "Whether the
|
|
373
|
+
"name": "showTotal",
|
|
374
|
+
"description": "Whether to show the total count in overflow indicator",
|
|
270
375
|
"type": "boolean"
|
|
271
376
|
},
|
|
272
377
|
{
|
|
273
|
-
"name": "
|
|
274
|
-
"description": "
|
|
275
|
-
"type": "
|
|
378
|
+
"name": "interactiveOverflow",
|
|
379
|
+
"description": "Interactive overflow indicator",
|
|
380
|
+
"type": "boolean"
|
|
276
381
|
},
|
|
277
382
|
{
|
|
278
|
-
"name": "
|
|
279
|
-
"description": "
|
|
280
|
-
"type": "
|
|
383
|
+
"name": "label",
|
|
384
|
+
"description": "Accessible label for the avatar group",
|
|
385
|
+
"type": "string"
|
|
281
386
|
},
|
|
282
387
|
{
|
|
283
|
-
"name": "
|
|
284
|
-
"description": "
|
|
285
|
-
"type": "
|
|
388
|
+
"name": "overflowLabel",
|
|
389
|
+
"description": "Accessible label for the overflow indicator",
|
|
390
|
+
"type": "string"
|
|
286
391
|
},
|
|
287
392
|
{
|
|
288
|
-
"name": "
|
|
289
|
-
"description": "
|
|
290
|
-
"type": "
|
|
393
|
+
"name": "size",
|
|
394
|
+
"description": "The size of avatars in the group. Default is `md`. See SizedMixin.",
|
|
395
|
+
"type": "'xxs' | 'xs' | 'sm' | 'md' | 'lg'"
|
|
291
396
|
},
|
|
292
397
|
{
|
|
293
|
-
"name": "
|
|
294
|
-
"description": "
|
|
295
|
-
"type": "
|
|
398
|
+
"name": "sizeMap",
|
|
399
|
+
"description": "Responsive size map (e.g. \"md:lg\"); see SizedMixin.",
|
|
400
|
+
"type": "string"
|
|
296
401
|
}
|
|
297
402
|
],
|
|
298
403
|
"events": [
|
|
299
404
|
{
|
|
300
|
-
"name": "dds-
|
|
301
|
-
"
|
|
302
|
-
"description": "Event fired when the accordion is opened."
|
|
303
|
-
},
|
|
304
|
-
{
|
|
305
|
-
"name": "dds-closed",
|
|
306
|
-
"type": "{ open: boolean, item: AccordionBaseElement }",
|
|
307
|
-
"description": "Event fired when the accordion is closed."
|
|
405
|
+
"name": "dds-overflow-click",
|
|
406
|
+
"description": "Fired when the overflow indicator is clicked."
|
|
308
407
|
}
|
|
309
408
|
]
|
|
310
409
|
}
|
|
@@ -453,64 +552,19 @@
|
|
|
453
552
|
}
|
|
454
553
|
},
|
|
455
554
|
{
|
|
456
|
-
"name": "dap-ds-
|
|
457
|
-
"description": "
|
|
555
|
+
"name": "dap-ds-anchor-heading",
|
|
556
|
+
"description": "Anchor heading is a heading with an anchor link.\n---\n\n\n### **CSS Properties:**\n - **--dds-anchor-link-color** - The color of the anchor link (default: var(--dds-color-primary)) _(default: undefined)_\n- **--dds-anchor-link-opacity** - The opacity of the anchor link when not hovered (default: 0) _(default: undefined)_\n- **--dds-anchor-link-hover-opacity** - The opacity of the anchor link when hovered (default: 1) _(default: undefined)_\n- **--dds-anchor-link-transition** - The transition property for the anchor link opacity (default: opacity 0.2s ease-in-out) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main anchor heading container.\n- **link** - The link of the anchor heading. dap-ds-link element.\n- **link-base** - The base of the link part.\n- **text** - The text of the anchor heading.",
|
|
458
557
|
"doc-url": "",
|
|
459
558
|
"attributes": [
|
|
460
559
|
{
|
|
461
560
|
"name": "variant",
|
|
462
|
-
"
|
|
463
|
-
|
|
464
|
-
{
|
|
465
|
-
"name": "mobile",
|
|
466
|
-
"description": "Mobile version of the breadcrumb",
|
|
467
|
-
"value": { "type": "boolean", "default": "false" }
|
|
561
|
+
"description": "The variant of the heading. Default is `h2`. Can be `h1`, `h2`, `h3`, `h4`, `h5`, or `h6`.",
|
|
562
|
+
"value": { "type": "HeadingVariant" }
|
|
468
563
|
},
|
|
469
564
|
{
|
|
470
|
-
"name": "
|
|
471
|
-
"description": "The
|
|
472
|
-
"value": { "type": "string
|
|
473
|
-
}
|
|
474
|
-
],
|
|
475
|
-
"slots": [
|
|
476
|
-
{ "name": "", "description": "The content of the breadcrumb." },
|
|
477
|
-
{
|
|
478
|
-
"name": "separator",
|
|
479
|
-
"description": "The separator between breadcrumb items. Default is '/'."
|
|
480
|
-
}
|
|
481
|
-
],
|
|
482
|
-
"events": [],
|
|
483
|
-
"js": {
|
|
484
|
-
"properties": [
|
|
485
|
-
{ "name": "variant", "type": "string" },
|
|
486
|
-
{
|
|
487
|
-
"name": "mobile",
|
|
488
|
-
"description": "Mobile version of the breadcrumb",
|
|
489
|
-
"type": "boolean"
|
|
490
|
-
},
|
|
491
|
-
{
|
|
492
|
-
"name": "ariaLabelledBy",
|
|
493
|
-
"description": "The aria-labelledby of the breadcrumb",
|
|
494
|
-
"type": "string | undefined"
|
|
495
|
-
}
|
|
496
|
-
],
|
|
497
|
-
"events": []
|
|
498
|
-
}
|
|
499
|
-
},
|
|
500
|
-
{
|
|
501
|
-
"name": "dap-ds-anchor-heading",
|
|
502
|
-
"description": "Anchor heading is a heading with an anchor link.\n---\n\n\n### **CSS Properties:**\n - **--dds-anchor-link-color** - The color of the anchor link (default: var(--dds-color-primary)) _(default: undefined)_\n- **--dds-anchor-link-opacity** - The opacity of the anchor link when not hovered (default: 0) _(default: undefined)_\n- **--dds-anchor-link-hover-opacity** - The opacity of the anchor link when hovered (default: 1) _(default: undefined)_\n- **--dds-anchor-link-transition** - The transition property for the anchor link opacity (default: opacity 0.2s ease-in-out) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main anchor heading container.\n- **link** - The link of the anchor heading. dap-ds-link element.\n- **link-base** - The base of the link part.\n- **text** - The text of the anchor heading.",
|
|
503
|
-
"doc-url": "",
|
|
504
|
-
"attributes": [
|
|
505
|
-
{
|
|
506
|
-
"name": "variant",
|
|
507
|
-
"description": "The variant of the heading. Default is `h2`. Can be `h1`, `h2`, `h3`, `h4`, `h5`, or `h6`.",
|
|
508
|
-
"value": { "type": "HeadingVariant" }
|
|
509
|
-
},
|
|
510
|
-
{
|
|
511
|
-
"name": "label",
|
|
512
|
-
"description": "The label of the heading.",
|
|
513
|
-
"value": { "type": "string" }
|
|
565
|
+
"name": "label",
|
|
566
|
+
"description": "The label of the heading.",
|
|
567
|
+
"value": { "type": "string" }
|
|
514
568
|
}
|
|
515
569
|
],
|
|
516
570
|
"events": [],
|
|
@@ -525,102 +579,48 @@
|
|
|
525
579
|
}
|
|
526
580
|
},
|
|
527
581
|
{
|
|
528
|
-
"name": "dap-ds-
|
|
529
|
-
"description": "
|
|
582
|
+
"name": "dap-ds-breadcrumb",
|
|
583
|
+
"description": "A breadcrumb is a secondary navigation scheme that reveals the user's location in a website or Web application.\n---\n\n\n### **Slots:**\n - _default_ - The content of the breadcrumb.\n- **separator** - The separator between breadcrumb items. Default is '/'.\n\n### **CSS Properties:**\n - **--dds-breadcrumb-width** - The width of the breadcrumb container (default: 100%) _(default: undefined)_\n- **--dds-breadcrumb-overflow-x** - The horizontal overflow behavior of the breadcrumb (default: auto) _(default: undefined)_\n- **--dds-breadcrumb-transition** - The transition property for the breadcrumb (default: all 0.2s ease-in-out) _(default: undefined)_\n- **--dds-breadcrumb-list-display** - The display property of the breadcrumb list (default: flex) _(default: undefined)_\n- **--dds-breadcrumb-list-flex-wrap** - The flex-wrap property of the breadcrumb list (default: nowrap) _(default: undefined)_\n- **--dds-breadcrumb-list-align-items** - The align-items property of the breadcrumb list (default: center) _(default: undefined)_\n- **--dds-breadcrumb-list-min-width** - The minimum width of the breadcrumb list (default: max-content) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main breadcrumb container.\n- **separator** - The separator of the breadcrumb.",
|
|
530
584
|
"doc-url": "",
|
|
531
585
|
"attributes": [
|
|
532
586
|
{
|
|
533
|
-
"name": "
|
|
534
|
-
"
|
|
535
|
-
"value": { "type": "'stack' | 'grid'", "default": "'stack'" }
|
|
536
|
-
},
|
|
537
|
-
{
|
|
538
|
-
"name": "max",
|
|
539
|
-
"description": "Maximum number of avatars to show before showing overflow",
|
|
540
|
-
"value": { "type": "number", "default": "3" }
|
|
541
|
-
},
|
|
542
|
-
{
|
|
543
|
-
"name": "show-total",
|
|
544
|
-
"description": "Whether to show the total count in overflow indicator",
|
|
545
|
-
"value": { "type": "boolean", "default": "false" }
|
|
587
|
+
"name": "variant",
|
|
588
|
+
"value": { "type": "string", "default": "'normal'" }
|
|
546
589
|
},
|
|
547
590
|
{
|
|
548
|
-
"name": "
|
|
549
|
-
"description": "
|
|
591
|
+
"name": "mobile",
|
|
592
|
+
"description": "Mobile version of the breadcrumb",
|
|
550
593
|
"value": { "type": "boolean", "default": "false" }
|
|
551
594
|
},
|
|
552
595
|
{
|
|
553
|
-
"name": "
|
|
554
|
-
"description": "
|
|
555
|
-
"value": { "type": "string" }
|
|
556
|
-
},
|
|
557
|
-
{
|
|
558
|
-
"name": "overflow-label",
|
|
559
|
-
"description": "Accessible label for the overflow indicator",
|
|
560
|
-
"value": { "type": "string" }
|
|
596
|
+
"name": "aria-labelledby",
|
|
597
|
+
"description": "The aria-labelledby of the breadcrumb",
|
|
598
|
+
"value": { "type": "string | undefined" }
|
|
561
599
|
}
|
|
562
600
|
],
|
|
563
601
|
"slots": [
|
|
602
|
+
{ "name": "", "description": "The content of the breadcrumb." },
|
|
564
603
|
{
|
|
565
|
-
"name": "",
|
|
566
|
-
"description": "The
|
|
567
|
-
}
|
|
568
|
-
],
|
|
569
|
-
"events": [
|
|
570
|
-
{
|
|
571
|
-
"name": "dds-overflow-click",
|
|
572
|
-
"description": "Fired when the overflow indicator is clicked."
|
|
604
|
+
"name": "separator",
|
|
605
|
+
"description": "The separator between breadcrumb items. Default is '/'."
|
|
573
606
|
}
|
|
574
607
|
],
|
|
608
|
+
"events": [],
|
|
575
609
|
"js": {
|
|
576
610
|
"properties": [
|
|
611
|
+
{ "name": "variant", "type": "string" },
|
|
577
612
|
{
|
|
578
|
-
"name": "
|
|
579
|
-
"description": "
|
|
580
|
-
"type": "'stack' | 'grid'"
|
|
581
|
-
},
|
|
582
|
-
{
|
|
583
|
-
"name": "max",
|
|
584
|
-
"description": "Maximum number of avatars to show before showing overflow",
|
|
585
|
-
"type": "number"
|
|
586
|
-
},
|
|
587
|
-
{
|
|
588
|
-
"name": "showTotal",
|
|
589
|
-
"description": "Whether to show the total count in overflow indicator",
|
|
590
|
-
"type": "boolean"
|
|
591
|
-
},
|
|
592
|
-
{
|
|
593
|
-
"name": "interactiveOverflow",
|
|
594
|
-
"description": "Interactive overflow indicator",
|
|
613
|
+
"name": "mobile",
|
|
614
|
+
"description": "Mobile version of the breadcrumb",
|
|
595
615
|
"type": "boolean"
|
|
596
616
|
},
|
|
597
617
|
{
|
|
598
|
-
"name": "
|
|
599
|
-
"description": "
|
|
600
|
-
"type": "string"
|
|
601
|
-
},
|
|
602
|
-
{
|
|
603
|
-
"name": "overflowLabel",
|
|
604
|
-
"description": "Accessible label for the overflow indicator",
|
|
605
|
-
"type": "string"
|
|
606
|
-
},
|
|
607
|
-
{
|
|
608
|
-
"name": "size",
|
|
609
|
-
"description": "The size of avatars in the group. Default is `md`. See SizedMixin.",
|
|
610
|
-
"type": "'xxs' | 'xs' | 'sm' | 'md' | 'lg'"
|
|
611
|
-
},
|
|
612
|
-
{
|
|
613
|
-
"name": "sizeMap",
|
|
614
|
-
"description": "Responsive size map (e.g. \"md:lg\"); see SizedMixin.",
|
|
615
|
-
"type": "string"
|
|
618
|
+
"name": "ariaLabelledBy",
|
|
619
|
+
"description": "The aria-labelledby of the breadcrumb",
|
|
620
|
+
"type": "string | undefined"
|
|
616
621
|
}
|
|
617
622
|
],
|
|
618
|
-
"events": [
|
|
619
|
-
{
|
|
620
|
-
"name": "dds-overflow-click",
|
|
621
|
-
"description": "Fired when the overflow indicator is clicked."
|
|
622
|
-
}
|
|
623
|
-
]
|
|
623
|
+
"events": []
|
|
624
624
|
}
|
|
625
625
|
},
|
|
626
626
|
{
|
|
@@ -1227,201 +1227,6 @@
|
|
|
1227
1227
|
]
|
|
1228
1228
|
}
|
|
1229
1229
|
},
|
|
1230
|
-
{
|
|
1231
|
-
"name": "dap-ds-checkbox",
|
|
1232
|
-
"description": "A checkbox is a form element that allows the user to select one or more options from a set.\n---\n\n\n### **Events:**\n - **dds-change** - Fired when the checkbox is checked or unchecked.\n- **dds-blur** - Emitted when the checkbox loses focus.\n- **dds-focus** - Emitted when the checkbox gains focus.\n- **dds-input** - Emitted when the checkbox receives input.\n\n### **Methods:**\n - **focus(): _void_** - Programmatically focuses the checkbox input element.\n- **blur(): _void_** - Programmatically blurs the checkbox input element.\n\n### **CSS Properties:**\n - **--dds-checkbox-size** - The size of the checkbox. (default: var(--dds-spacing-500)) _(default: undefined)_\n- **--dds-checkbox-border-width** - The border width of the checkbox. (default: var(--dds-border-width-large)) _(default: undefined)_\n- **--dds-checkbox-border-radius** - The border radius of the checkbox. (default: var(--dds-radius-small)) _(default: undefined)_\n- **--dds-checkbox-border-color** - The border color of the checkbox. (default: var(--dds-border-neutral-base)) _(default: undefined)_\n- **--dds-checkbox-background-color** - The background color of the checkbox. (default: transparent) _(default: undefined)_\n- **--dds-checkbox-icon-color** - The color of the checkbox icon. (default: var(--dds-button-primary-icon-enabled)) _(default: undefined)_\n- **--dds-checkbox-hover-border-color** - The border color when hovering over the checkbox. (default: var(--dds-border-neutral-medium)) _(default: undefined)_\n- **--dds-checkbox-hover-background-color** - The background color when hovering over the checkbox. (default: var(--dds-background-neutral-medium)) _(default: undefined)_\n- **--dds-checkbox-active-border-color** - The border color when the checkbox is active. (default: var(--dds-border-neutral-strong)) _(default: undefined)_\n- **--dds-checkbox-active-background-color** - The background color when the checkbox is active. (default: var(--dds-background-neutral-strong)) _(default: undefined)_\n- **--dds-checkbox-checked-border-color** - The border color when the checkbox is checked. (default: var(--dds-background-brand-base-inverted)) _(default: undefined)_\n- **--dds-checkbox-checked-background-color** - The background color when the checkbox is checked. (default: var(--dds-background-brand-base-inverted)) _(default: undefined)_\n- **--dds-checkbox-checked-hover-border-color** - The border color when hovering over a checked checkbox. (default: var(--dds-background-brand-medium-inverted)) _(default: undefined)_\n- **--dds-checkbox-checked-hover-background-color** - The background color when hovering over a checked checkbox. (default: var(--dds-background-brand-medium-inverted)) _(default: undefined)_\n- **--dds-checkbox-checked-active-border-color** - The border color when a checked checkbox is active. (default: var(--dds-background-brand-strong-inverted)) _(default: undefined)_\n- **--dds-checkbox-checked-active-background-color** - The background color when a checked checkbox is active. (default: var(--dds-background-brand-strong-inverted)) _(default: undefined)_\n- **--dds-checkbox-invalid-border-color** - The border color when the checkbox is invalid. (default: var(--dds-border-negative-base)) _(default: undefined)_\n- **--dds-checkbox-invalid-background-color** - The background color when the checkbox is invalid. (default: var(--dds-background-negative-base)) _(default: undefined)_\n- **--dds-checkbox-invalid-hover-border-color** - The border color when hovering over an invalid checkbox. (default: var(--dds-border-negative-medium)) _(default: undefined)_\n- **--dds-checkbox-invalid-hover-background-color** - The background color when hovering over an invalid checkbox. (default: var(--dds-background-negative-medium)) _(default: undefined)_\n- **--dds-checkbox-invalid-active-border-color** - The border color when an invalid checkbox is active. (default: var(--dds-border-negative-strong)) _(default: undefined)_\n- **--dds-checkbox-invalid-active-background-color** - The background color when an invalid checkbox is active. (default: var(--dds-background-negative-strong)) _(default: undefined)_\n- **--dds-checkbox-disabled-border-color** - The border color when the checkbox is disabled. (default: var(--dds-button-primary-background-disabled)) _(default: undefined)_\n- **--dds-checkbox-disabled-background-color** - The background color when the checkbox is disabled. (default: var(--dds-button-primary-background-disabled)) _(default: undefined)_\n- **--dds-checkbox-disabled-icon-color** - The color of the checkbox icon when disabled. (default: var(--dds-button-primary-icon-disabled)) _(default: undefined)_\n- **--dds-checkbox-readonly-border-color** - The border color when the checkbox is readonly. (default: var(--dds-border-neutral-subtle)) _(default: undefined)_\n- **--dds-checkbox-readonly-background-color** - The background color when the checkbox is readonly. (default: var(--dds-background-neutral-subtle)) _(default: undefined)_\n- **--dds-checkbox-readonly-icon-color** - The color of the checkbox icon when readonly. (default: var(--dds-text-neutral-base)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main checkbox container.\n- **label** - The label of the checkbox.\n- **input** - The input of the checkbox.\n- **control** - The control of the checkbox.\n- **icon** - The icon of the checkbox.\n- **icon-base** - The base icon container.\n- **label-container** - The label container of the checkbox.\n- **description** - The description of the checkbox.\n- **readonly** - The readonly state of the checkbox.",
|
|
1233
|
-
"doc-url": "",
|
|
1234
|
-
"attributes": [
|
|
1235
|
-
{
|
|
1236
|
-
"name": "indeterminate",
|
|
1237
|
-
"description": "Whether the checkbox is indeterminate",
|
|
1238
|
-
"value": { "type": "boolean", "default": "false" }
|
|
1239
|
-
},
|
|
1240
|
-
{
|
|
1241
|
-
"name": "preventDefault",
|
|
1242
|
-
"description": "Whether the checkbox should prevent the default action",
|
|
1243
|
-
"value": { "type": "boolean", "default": "false" }
|
|
1244
|
-
},
|
|
1245
|
-
{
|
|
1246
|
-
"name": "border",
|
|
1247
|
-
"description": "This sets up border around the checkbox, when true.",
|
|
1248
|
-
"value": { "type": "boolean", "default": "false" }
|
|
1249
|
-
},
|
|
1250
|
-
{
|
|
1251
|
-
"name": "readonly",
|
|
1252
|
-
"description": "Whether the checkbox is readonly (cannot be changed but value is submitted with form).",
|
|
1253
|
-
"value": { "type": "boolean", "default": "false" }
|
|
1254
|
-
},
|
|
1255
|
-
{
|
|
1256
|
-
"name": "type",
|
|
1257
|
-
"description": "The type of the checkbox",
|
|
1258
|
-
"value": {
|
|
1259
|
-
"type": "'normal' | 'background'",
|
|
1260
|
-
"default": "'normal'"
|
|
1261
|
-
}
|
|
1262
|
-
}
|
|
1263
|
-
],
|
|
1264
|
-
"events": [
|
|
1265
|
-
{
|
|
1266
|
-
"name": "dds-change",
|
|
1267
|
-
"type": "{ checked: boolean, indeterminate: boolean, value: string, disabled: boolean, readonly: boolean, type: 'checkbox' }",
|
|
1268
|
-
"description": "Fired when the checkbox is checked or unchecked."
|
|
1269
|
-
},
|
|
1270
|
-
{
|
|
1271
|
-
"name": "dds-blur",
|
|
1272
|
-
"type": "{ void }",
|
|
1273
|
-
"description": "Emitted when the checkbox loses focus."
|
|
1274
|
-
},
|
|
1275
|
-
{
|
|
1276
|
-
"name": "dds-focus",
|
|
1277
|
-
"type": "{ void }",
|
|
1278
|
-
"description": "Emitted when the checkbox gains focus."
|
|
1279
|
-
},
|
|
1280
|
-
{
|
|
1281
|
-
"name": "dds-input",
|
|
1282
|
-
"type": "{ checked: boolean, indeterminate: boolean, value: string, disabled: boolean, readonly: boolean }",
|
|
1283
|
-
"description": "Emitted when the checkbox receives input."
|
|
1284
|
-
}
|
|
1285
|
-
],
|
|
1286
|
-
"js": {
|
|
1287
|
-
"properties": [
|
|
1288
|
-
{
|
|
1289
|
-
"name": "indeterminate",
|
|
1290
|
-
"description": "Whether the checkbox is indeterminate",
|
|
1291
|
-
"type": "boolean"
|
|
1292
|
-
},
|
|
1293
|
-
{
|
|
1294
|
-
"name": "preventDefault",
|
|
1295
|
-
"description": "Whether the checkbox should prevent the default action",
|
|
1296
|
-
"type": "boolean"
|
|
1297
|
-
},
|
|
1298
|
-
{
|
|
1299
|
-
"name": "border",
|
|
1300
|
-
"description": "This sets up border around the checkbox, when true.",
|
|
1301
|
-
"type": "boolean"
|
|
1302
|
-
},
|
|
1303
|
-
{
|
|
1304
|
-
"name": "readonly",
|
|
1305
|
-
"description": "Whether the checkbox is readonly (cannot be changed but value is submitted with form).",
|
|
1306
|
-
"type": "boolean"
|
|
1307
|
-
},
|
|
1308
|
-
{
|
|
1309
|
-
"name": "type",
|
|
1310
|
-
"description": "The type of the checkbox",
|
|
1311
|
-
"type": "'normal' | 'background'"
|
|
1312
|
-
},
|
|
1313
|
-
{ "name": "focusElement", "type": "HTMLInputElement" },
|
|
1314
|
-
{ "name": "feedbackId" },
|
|
1315
|
-
{
|
|
1316
|
-
"name": "name",
|
|
1317
|
-
"description": "The name of the checkbox.",
|
|
1318
|
-
"type": "string"
|
|
1319
|
-
},
|
|
1320
|
-
{
|
|
1321
|
-
"name": "value",
|
|
1322
|
-
"description": "The value of the checkbox.",
|
|
1323
|
-
"type": "string"
|
|
1324
|
-
},
|
|
1325
|
-
{
|
|
1326
|
-
"name": "checked",
|
|
1327
|
-
"description": "Whether the checkbox is checked.",
|
|
1328
|
-
"type": "boolean"
|
|
1329
|
-
},
|
|
1330
|
-
{
|
|
1331
|
-
"name": "label",
|
|
1332
|
-
"description": "The label of the checkbox.",
|
|
1333
|
-
"type": "string"
|
|
1334
|
-
},
|
|
1335
|
-
{
|
|
1336
|
-
"name": "description",
|
|
1337
|
-
"description": "The description of the checkbox.",
|
|
1338
|
-
"type": "string"
|
|
1339
|
-
},
|
|
1340
|
-
{
|
|
1341
|
-
"name": "disabled",
|
|
1342
|
-
"description": "Whether the checkbox is disabled.",
|
|
1343
|
-
"type": "boolean"
|
|
1344
|
-
},
|
|
1345
|
-
{
|
|
1346
|
-
"name": "required",
|
|
1347
|
-
"description": "Whether the checkbox is required.",
|
|
1348
|
-
"type": "boolean"
|
|
1349
|
-
},
|
|
1350
|
-
{
|
|
1351
|
-
"name": "size",
|
|
1352
|
-
"description": "The size of the checkbox. Default is 'sm'.",
|
|
1353
|
-
"type": "'xs' | 'sm' | 'lg'"
|
|
1354
|
-
},
|
|
1355
|
-
{
|
|
1356
|
-
"name": "sizeMap",
|
|
1357
|
-
"description": "Responsive size map (e.g. \"md:lg\").",
|
|
1358
|
-
"type": "string"
|
|
1359
|
-
},
|
|
1360
|
-
{
|
|
1361
|
-
"name": "labelPlacement",
|
|
1362
|
-
"description": "The placement of the label.",
|
|
1363
|
-
"type": "'left' | 'right'"
|
|
1364
|
-
},
|
|
1365
|
-
{
|
|
1366
|
-
"name": "descriptionPlacement",
|
|
1367
|
-
"description": "The placement of the description.",
|
|
1368
|
-
"type": "'top' | 'bottom'"
|
|
1369
|
-
},
|
|
1370
|
-
{
|
|
1371
|
-
"name": "subtle",
|
|
1372
|
-
"description": "The weight of the label.",
|
|
1373
|
-
"type": "boolean"
|
|
1374
|
-
},
|
|
1375
|
-
{
|
|
1376
|
-
"name": "feedback",
|
|
1377
|
-
"description": "The feedback of the checkbox.",
|
|
1378
|
-
"type": "string"
|
|
1379
|
-
},
|
|
1380
|
-
{
|
|
1381
|
-
"name": "feedbackType",
|
|
1382
|
-
"description": "The feedback type of the checkbox.",
|
|
1383
|
-
"type": "'negative' | 'positive' | 'warning'"
|
|
1384
|
-
},
|
|
1385
|
-
{
|
|
1386
|
-
"name": "invalid",
|
|
1387
|
-
"description": "The invalid state of the checkbox.",
|
|
1388
|
-
"type": "boolean"
|
|
1389
|
-
},
|
|
1390
|
-
{
|
|
1391
|
-
"name": "optional",
|
|
1392
|
-
"description": "The optional state of the checkbox.",
|
|
1393
|
-
"type": "boolean"
|
|
1394
|
-
},
|
|
1395
|
-
{
|
|
1396
|
-
"name": "optionalLabel",
|
|
1397
|
-
"description": "The optional label of the checkbox.",
|
|
1398
|
-
"type": "string"
|
|
1399
|
-
}
|
|
1400
|
-
],
|
|
1401
|
-
"events": [
|
|
1402
|
-
{
|
|
1403
|
-
"name": "dds-change",
|
|
1404
|
-
"type": "{ checked: boolean, indeterminate: boolean, value: string, disabled: boolean, readonly: boolean, type: 'checkbox' }",
|
|
1405
|
-
"description": "Fired when the checkbox is checked or unchecked."
|
|
1406
|
-
},
|
|
1407
|
-
{
|
|
1408
|
-
"name": "dds-blur",
|
|
1409
|
-
"type": "{ void }",
|
|
1410
|
-
"description": "Emitted when the checkbox loses focus."
|
|
1411
|
-
},
|
|
1412
|
-
{
|
|
1413
|
-
"name": "dds-focus",
|
|
1414
|
-
"type": "{ void }",
|
|
1415
|
-
"description": "Emitted when the checkbox gains focus."
|
|
1416
|
-
},
|
|
1417
|
-
{
|
|
1418
|
-
"name": "dds-input",
|
|
1419
|
-
"type": "{ checked: boolean, indeterminate: boolean, value: string, disabled: boolean, readonly: boolean }",
|
|
1420
|
-
"description": "Emitted when the checkbox receives input."
|
|
1421
|
-
}
|
|
1422
|
-
]
|
|
1423
|
-
}
|
|
1424
|
-
},
|
|
1425
1230
|
{
|
|
1426
1231
|
"name": "dap-ds-card-actions",
|
|
1427
1232
|
"description": "A card actions is a container for actions in a card.\n---\n\n\n### **Slots:**\n - _default_ - The content of the card actions.\n\n### **CSS Properties:**\n - **--dds-card-actions-gap** - The gap between items in the card actions. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-card-actions-padding-lg** - The padding for large size card actions. (default: var(--dds-spacing-600)) _(default: undefined)_\n- **--dds-card-actions-padding-md** - The padding for medium size card actions. (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-card-actions-padding-sm** - The padding for small size card actions. (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-card-actions-margin-lg** - The margin for large size card actions spacing. (default: var(--dds-spacing-600)) _(default: undefined)_\n- **--dds-card-actions-margin-md** - The margin for medium size card actions spacing. (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-card-actions-margin-sm** - The margin for small size card actions spacing. (default: var(--dds-spacing-400)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main card actions container.",
|
|
@@ -1642,120 +1447,315 @@
|
|
|
1642
1447
|
}
|
|
1643
1448
|
},
|
|
1644
1449
|
{
|
|
1645
|
-
"name": "dap-ds-card",
|
|
1646
|
-
"description": "A card is a container for content, actions, and images in a consistent format.\n---\n\n\n### **Slots:**\n - _default_ - The content of the card.\n\n### **CSS Properties:**\n - **--dds-card-padding** - The padding of the card. (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-card-border-radius** - The border radius of the card. (default: var(--dds-radius-large)) _(default: undefined)_\n- **--dds-card-border-width** - The border width of the card. (default: var(--dds-border-width-base)) _(default: undefined)_\n- **--dds-card-border-color** - The border color of the card. (default: var(--dds-border-neutral-divider)) _(default: undefined)_\n- **--dds-card-background** - The background color of the card. (default: var(--dds-background-neutral-base)) _(default: undefined)_\n- **--dds-card-hover-border-color** - The border color when hovering over the card. (default: var(--dds-border-brand-base)) _(default: undefined)_\n- **--dds-card-active-border-color** - The border color when the card is active. (default: var(--dds-border-brand-medium)) _(default: undefined)_\n- **--dds-card-shadow** - The box shadow of the card. (default: none) _(default: undefined)_\n- **--dds-card-hover-shadow** - The box shadow when hovering over the card. (default: none) _(default: undefined)_\n- **--dds-card-transition-duration** - The duration of the card's transitions. (default: var(--dds-transition-medium)) _(default: undefined)_\n- **--dds-card-transition-timing** - The timing function of the card's transitions. (default: var(--dds-easing-ease-in-out)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main card container.",
|
|
1450
|
+
"name": "dap-ds-card",
|
|
1451
|
+
"description": "A card is a container for content, actions, and images in a consistent format.\n---\n\n\n### **Slots:**\n - _default_ - The content of the card.\n\n### **CSS Properties:**\n - **--dds-card-padding** - The padding of the card. (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-card-border-radius** - The border radius of the card. (default: var(--dds-radius-large)) _(default: undefined)_\n- **--dds-card-border-width** - The border width of the card. (default: var(--dds-border-width-base)) _(default: undefined)_\n- **--dds-card-border-color** - The border color of the card. (default: var(--dds-border-neutral-divider)) _(default: undefined)_\n- **--dds-card-background** - The background color of the card. (default: var(--dds-background-neutral-base)) _(default: undefined)_\n- **--dds-card-hover-border-color** - The border color when hovering over the card. (default: var(--dds-border-brand-base)) _(default: undefined)_\n- **--dds-card-active-border-color** - The border color when the card is active. (default: var(--dds-border-brand-medium)) _(default: undefined)_\n- **--dds-card-shadow** - The box shadow of the card. (default: none) _(default: undefined)_\n- **--dds-card-hover-shadow** - The box shadow when hovering over the card. (default: none) _(default: undefined)_\n- **--dds-card-transition-duration** - The duration of the card's transitions. (default: var(--dds-transition-medium)) _(default: undefined)_\n- **--dds-card-transition-timing** - The timing function of the card's transitions. (default: var(--dds-easing-ease-in-out)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main card container.",
|
|
1452
|
+
"doc-url": "",
|
|
1453
|
+
"attributes": [
|
|
1454
|
+
{
|
|
1455
|
+
"name": "interactive",
|
|
1456
|
+
"description": "Whether the card is interactive. Default is false. If true, the card will be rendered as an anchor element.",
|
|
1457
|
+
"value": { "type": "boolean", "default": "false" }
|
|
1458
|
+
},
|
|
1459
|
+
{
|
|
1460
|
+
"name": "renderAs",
|
|
1461
|
+
"description": "The render as type of the card, only applicable when interactive.",
|
|
1462
|
+
"value": { "type": "'a' | 'button'", "default": "'a'" }
|
|
1463
|
+
},
|
|
1464
|
+
{
|
|
1465
|
+
"name": "disabled",
|
|
1466
|
+
"description": "Whether the card is disabled.",
|
|
1467
|
+
"value": { "type": "boolean", "default": "false" }
|
|
1468
|
+
},
|
|
1469
|
+
{
|
|
1470
|
+
"name": "noBorder",
|
|
1471
|
+
"description": "Removes the border around the card",
|
|
1472
|
+
"value": { "type": "boolean", "default": "false" }
|
|
1473
|
+
},
|
|
1474
|
+
{
|
|
1475
|
+
"name": "noPadding",
|
|
1476
|
+
"description": "Removes the padding around the card",
|
|
1477
|
+
"value": { "type": "boolean", "default": "false" }
|
|
1478
|
+
},
|
|
1479
|
+
{
|
|
1480
|
+
"name": "targetBlankText",
|
|
1481
|
+
"description": "The text for the target blank link, applicable when target is _blank. PRO TIP: Use parenthesis to wrap the text",
|
|
1482
|
+
"value": { "type": "string" }
|
|
1483
|
+
},
|
|
1484
|
+
{
|
|
1485
|
+
"name": "target",
|
|
1486
|
+
"description": "The link target of the card",
|
|
1487
|
+
"value": {
|
|
1488
|
+
"type": "'_blank' | '_self' | '_parent' | '_top'",
|
|
1489
|
+
"default": "'_self'"
|
|
1490
|
+
}
|
|
1491
|
+
},
|
|
1492
|
+
{
|
|
1493
|
+
"name": "href",
|
|
1494
|
+
"description": "The URL of the card.",
|
|
1495
|
+
"value": { "type": "string" }
|
|
1496
|
+
},
|
|
1497
|
+
{
|
|
1498
|
+
"name": "rel",
|
|
1499
|
+
"description": "The rel of the card link.",
|
|
1500
|
+
"value": { "type": "string", "default": "'noreferrer noopener'" }
|
|
1501
|
+
}
|
|
1502
|
+
],
|
|
1503
|
+
"slots": [{ "name": "", "description": "The content of the card." }],
|
|
1504
|
+
"events": [],
|
|
1505
|
+
"js": {
|
|
1506
|
+
"properties": [
|
|
1507
|
+
{
|
|
1508
|
+
"name": "interactive",
|
|
1509
|
+
"description": "Whether the card is interactive. Default is false. If true, the card will be rendered as an anchor element.",
|
|
1510
|
+
"type": "boolean"
|
|
1511
|
+
},
|
|
1512
|
+
{
|
|
1513
|
+
"name": "renderAs",
|
|
1514
|
+
"description": "The render as type of the card, only applicable when interactive.",
|
|
1515
|
+
"type": "'a' | 'button'"
|
|
1516
|
+
},
|
|
1517
|
+
{
|
|
1518
|
+
"name": "disabled",
|
|
1519
|
+
"description": "Whether the card is disabled.",
|
|
1520
|
+
"type": "boolean"
|
|
1521
|
+
},
|
|
1522
|
+
{
|
|
1523
|
+
"name": "noBorder",
|
|
1524
|
+
"description": "Removes the border around the card",
|
|
1525
|
+
"type": "boolean"
|
|
1526
|
+
},
|
|
1527
|
+
{
|
|
1528
|
+
"name": "noPadding",
|
|
1529
|
+
"description": "Removes the padding around the card",
|
|
1530
|
+
"type": "boolean"
|
|
1531
|
+
},
|
|
1532
|
+
{
|
|
1533
|
+
"name": "targetBlankText",
|
|
1534
|
+
"description": "The text for the target blank link, applicable when target is _blank. PRO TIP: Use parenthesis to wrap the text",
|
|
1535
|
+
"type": "string"
|
|
1536
|
+
},
|
|
1537
|
+
{
|
|
1538
|
+
"name": "target",
|
|
1539
|
+
"description": "The link target of the card",
|
|
1540
|
+
"type": "'_blank' | '_self' | '_parent' | '_top'"
|
|
1541
|
+
},
|
|
1542
|
+
{
|
|
1543
|
+
"name": "href",
|
|
1544
|
+
"description": "The URL of the card.",
|
|
1545
|
+
"type": "string"
|
|
1546
|
+
},
|
|
1547
|
+
{
|
|
1548
|
+
"name": "rel",
|
|
1549
|
+
"description": "The rel of the card link.",
|
|
1550
|
+
"type": "string"
|
|
1551
|
+
},
|
|
1552
|
+
{
|
|
1553
|
+
"name": "size",
|
|
1554
|
+
"description": "The size of the card. Default is `sm`.",
|
|
1555
|
+
"type": "'sm' | 'md' | 'lg'"
|
|
1556
|
+
},
|
|
1557
|
+
{
|
|
1558
|
+
"name": "sizeMap",
|
|
1559
|
+
"description": "Responsive size map (e.g. \"md:lg\").",
|
|
1560
|
+
"type": "string"
|
|
1561
|
+
}
|
|
1562
|
+
],
|
|
1563
|
+
"events": []
|
|
1564
|
+
}
|
|
1565
|
+
},
|
|
1566
|
+
{
|
|
1567
|
+
"name": "dap-ds-checkbox",
|
|
1568
|
+
"description": "A checkbox is a form element that allows the user to select one or more options from a set.\n---\n\n\n### **Events:**\n - **dds-change** - Fired when the checkbox is checked or unchecked.\n- **dds-blur** - Emitted when the checkbox loses focus.\n- **dds-focus** - Emitted when the checkbox gains focus.\n- **dds-input** - Emitted when the checkbox receives input.\n\n### **Methods:**\n - **focus(): _void_** - Programmatically focuses the checkbox input element.\n- **blur(): _void_** - Programmatically blurs the checkbox input element.\n\n### **CSS Properties:**\n - **--dds-checkbox-size** - The size of the checkbox. (default: var(--dds-spacing-500)) _(default: undefined)_\n- **--dds-checkbox-border-width** - The border width of the checkbox. (default: var(--dds-border-width-large)) _(default: undefined)_\n- **--dds-checkbox-border-radius** - The border radius of the checkbox. (default: var(--dds-radius-small)) _(default: undefined)_\n- **--dds-checkbox-border-color** - The border color of the checkbox. (default: var(--dds-border-neutral-base)) _(default: undefined)_\n- **--dds-checkbox-background-color** - The background color of the checkbox. (default: transparent) _(default: undefined)_\n- **--dds-checkbox-icon-color** - The color of the checkbox icon. (default: var(--dds-button-primary-icon-enabled)) _(default: undefined)_\n- **--dds-checkbox-hover-border-color** - The border color when hovering over the checkbox. (default: var(--dds-border-neutral-medium)) _(default: undefined)_\n- **--dds-checkbox-hover-background-color** - The background color when hovering over the checkbox. (default: var(--dds-background-neutral-medium)) _(default: undefined)_\n- **--dds-checkbox-active-border-color** - The border color when the checkbox is active. (default: var(--dds-border-neutral-strong)) _(default: undefined)_\n- **--dds-checkbox-active-background-color** - The background color when the checkbox is active. (default: var(--dds-background-neutral-strong)) _(default: undefined)_\n- **--dds-checkbox-checked-border-color** - The border color when the checkbox is checked. (default: var(--dds-background-brand-base-inverted)) _(default: undefined)_\n- **--dds-checkbox-checked-background-color** - The background color when the checkbox is checked. (default: var(--dds-background-brand-base-inverted)) _(default: undefined)_\n- **--dds-checkbox-checked-hover-border-color** - The border color when hovering over a checked checkbox. (default: var(--dds-background-brand-medium-inverted)) _(default: undefined)_\n- **--dds-checkbox-checked-hover-background-color** - The background color when hovering over a checked checkbox. (default: var(--dds-background-brand-medium-inverted)) _(default: undefined)_\n- **--dds-checkbox-checked-active-border-color** - The border color when a checked checkbox is active. (default: var(--dds-background-brand-strong-inverted)) _(default: undefined)_\n- **--dds-checkbox-checked-active-background-color** - The background color when a checked checkbox is active. (default: var(--dds-background-brand-strong-inverted)) _(default: undefined)_\n- **--dds-checkbox-invalid-border-color** - The border color when the checkbox is invalid. (default: var(--dds-border-negative-base)) _(default: undefined)_\n- **--dds-checkbox-invalid-background-color** - The background color when the checkbox is invalid. (default: var(--dds-background-negative-base)) _(default: undefined)_\n- **--dds-checkbox-invalid-hover-border-color** - The border color when hovering over an invalid checkbox. (default: var(--dds-border-negative-medium)) _(default: undefined)_\n- **--dds-checkbox-invalid-hover-background-color** - The background color when hovering over an invalid checkbox. (default: var(--dds-background-negative-medium)) _(default: undefined)_\n- **--dds-checkbox-invalid-active-border-color** - The border color when an invalid checkbox is active. (default: var(--dds-border-negative-strong)) _(default: undefined)_\n- **--dds-checkbox-invalid-active-background-color** - The background color when an invalid checkbox is active. (default: var(--dds-background-negative-strong)) _(default: undefined)_\n- **--dds-checkbox-disabled-border-color** - The border color when the checkbox is disabled. (default: var(--dds-button-primary-background-disabled)) _(default: undefined)_\n- **--dds-checkbox-disabled-background-color** - The background color when the checkbox is disabled. (default: var(--dds-button-primary-background-disabled)) _(default: undefined)_\n- **--dds-checkbox-disabled-icon-color** - The color of the checkbox icon when disabled. (default: var(--dds-button-primary-icon-disabled)) _(default: undefined)_\n- **--dds-checkbox-readonly-border-color** - The border color when the checkbox is readonly. (default: var(--dds-border-neutral-subtle)) _(default: undefined)_\n- **--dds-checkbox-readonly-background-color** - The background color when the checkbox is readonly. (default: var(--dds-background-neutral-subtle)) _(default: undefined)_\n- **--dds-checkbox-readonly-icon-color** - The color of the checkbox icon when readonly. (default: var(--dds-text-neutral-base)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main checkbox container.\n- **label** - The label of the checkbox.\n- **input** - The input of the checkbox.\n- **control** - The control of the checkbox.\n- **icon** - The icon of the checkbox.\n- **icon-base** - The base icon container.\n- **label-container** - The label container of the checkbox.\n- **description** - The description of the checkbox.\n- **readonly** - The readonly state of the checkbox.",
|
|
1647
1569
|
"doc-url": "",
|
|
1648
1570
|
"attributes": [
|
|
1649
1571
|
{
|
|
1650
|
-
"name": "
|
|
1651
|
-
"description": "Whether the
|
|
1572
|
+
"name": "indeterminate",
|
|
1573
|
+
"description": "Whether the checkbox is indeterminate",
|
|
1652
1574
|
"value": { "type": "boolean", "default": "false" }
|
|
1653
1575
|
},
|
|
1654
1576
|
{
|
|
1655
|
-
"name": "
|
|
1656
|
-
"description": "
|
|
1657
|
-
"value": { "type": "'a' | 'button'", "default": "'a'" }
|
|
1658
|
-
},
|
|
1659
|
-
{
|
|
1660
|
-
"name": "disabled",
|
|
1661
|
-
"description": "Whether the card is disabled.",
|
|
1577
|
+
"name": "preventDefault",
|
|
1578
|
+
"description": "Whether the checkbox should prevent the default action",
|
|
1662
1579
|
"value": { "type": "boolean", "default": "false" }
|
|
1663
1580
|
},
|
|
1664
1581
|
{
|
|
1665
|
-
"name": "
|
|
1666
|
-
"description": "
|
|
1582
|
+
"name": "border",
|
|
1583
|
+
"description": "This sets up border around the checkbox, when true.",
|
|
1667
1584
|
"value": { "type": "boolean", "default": "false" }
|
|
1668
1585
|
},
|
|
1669
1586
|
{
|
|
1670
|
-
"name": "
|
|
1671
|
-
"description": "
|
|
1587
|
+
"name": "readonly",
|
|
1588
|
+
"description": "Whether the checkbox is readonly (cannot be changed but value is submitted with form).",
|
|
1672
1589
|
"value": { "type": "boolean", "default": "false" }
|
|
1673
1590
|
},
|
|
1674
1591
|
{
|
|
1675
|
-
"name": "
|
|
1676
|
-
"description": "The
|
|
1677
|
-
"value": { "type": "string" }
|
|
1678
|
-
},
|
|
1679
|
-
{
|
|
1680
|
-
"name": "target",
|
|
1681
|
-
"description": "The link target of the card",
|
|
1592
|
+
"name": "type",
|
|
1593
|
+
"description": "The type of the checkbox",
|
|
1682
1594
|
"value": {
|
|
1683
|
-
"type": "'
|
|
1684
|
-
"default": "'
|
|
1595
|
+
"type": "'normal' | 'background'",
|
|
1596
|
+
"default": "'normal'"
|
|
1685
1597
|
}
|
|
1598
|
+
}
|
|
1599
|
+
],
|
|
1600
|
+
"events": [
|
|
1601
|
+
{
|
|
1602
|
+
"name": "dds-change",
|
|
1603
|
+
"type": "{ checked: boolean, indeterminate: boolean, value: string, disabled: boolean, readonly: boolean, type: 'checkbox' }",
|
|
1604
|
+
"description": "Fired when the checkbox is checked or unchecked."
|
|
1686
1605
|
},
|
|
1687
1606
|
{
|
|
1688
|
-
"name": "
|
|
1689
|
-
"
|
|
1690
|
-
"
|
|
1607
|
+
"name": "dds-blur",
|
|
1608
|
+
"type": "{ void }",
|
|
1609
|
+
"description": "Emitted when the checkbox loses focus."
|
|
1691
1610
|
},
|
|
1692
1611
|
{
|
|
1693
|
-
"name": "
|
|
1694
|
-
"
|
|
1695
|
-
"
|
|
1612
|
+
"name": "dds-focus",
|
|
1613
|
+
"type": "{ void }",
|
|
1614
|
+
"description": "Emitted when the checkbox gains focus."
|
|
1615
|
+
},
|
|
1616
|
+
{
|
|
1617
|
+
"name": "dds-input",
|
|
1618
|
+
"type": "{ checked: boolean, indeterminate: boolean, value: string, disabled: boolean, readonly: boolean }",
|
|
1619
|
+
"description": "Emitted when the checkbox receives input."
|
|
1696
1620
|
}
|
|
1697
1621
|
],
|
|
1698
|
-
"slots": [{ "name": "", "description": "The content of the card." }],
|
|
1699
|
-
"events": [],
|
|
1700
1622
|
"js": {
|
|
1701
1623
|
"properties": [
|
|
1702
1624
|
{
|
|
1703
|
-
"name": "
|
|
1704
|
-
"description": "Whether the
|
|
1625
|
+
"name": "indeterminate",
|
|
1626
|
+
"description": "Whether the checkbox is indeterminate",
|
|
1705
1627
|
"type": "boolean"
|
|
1706
1628
|
},
|
|
1707
1629
|
{
|
|
1708
|
-
"name": "
|
|
1709
|
-
"description": "
|
|
1710
|
-
"type": "
|
|
1630
|
+
"name": "preventDefault",
|
|
1631
|
+
"description": "Whether the checkbox should prevent the default action",
|
|
1632
|
+
"type": "boolean"
|
|
1711
1633
|
},
|
|
1712
1634
|
{
|
|
1713
|
-
"name": "
|
|
1714
|
-
"description": "
|
|
1635
|
+
"name": "border",
|
|
1636
|
+
"description": "This sets up border around the checkbox, when true.",
|
|
1715
1637
|
"type": "boolean"
|
|
1716
1638
|
},
|
|
1717
1639
|
{
|
|
1718
|
-
"name": "
|
|
1719
|
-
"description": "
|
|
1640
|
+
"name": "readonly",
|
|
1641
|
+
"description": "Whether the checkbox is readonly (cannot be changed but value is submitted with form).",
|
|
1720
1642
|
"type": "boolean"
|
|
1721
1643
|
},
|
|
1722
1644
|
{
|
|
1723
|
-
"name": "
|
|
1724
|
-
"description": "
|
|
1725
|
-
"type": "
|
|
1645
|
+
"name": "type",
|
|
1646
|
+
"description": "The type of the checkbox",
|
|
1647
|
+
"type": "'normal' | 'background'"
|
|
1726
1648
|
},
|
|
1649
|
+
{ "name": "focusElement", "type": "HTMLInputElement" },
|
|
1650
|
+
{ "name": "feedbackId" },
|
|
1727
1651
|
{
|
|
1728
|
-
"name": "
|
|
1729
|
-
"description": "The
|
|
1652
|
+
"name": "name",
|
|
1653
|
+
"description": "The name of the checkbox.",
|
|
1730
1654
|
"type": "string"
|
|
1731
1655
|
},
|
|
1732
1656
|
{
|
|
1733
|
-
"name": "
|
|
1734
|
-
"description": "The
|
|
1735
|
-
"type": "
|
|
1657
|
+
"name": "value",
|
|
1658
|
+
"description": "The value of the checkbox.",
|
|
1659
|
+
"type": "string"
|
|
1736
1660
|
},
|
|
1737
1661
|
{
|
|
1738
|
-
"name": "
|
|
1739
|
-
"description": "
|
|
1662
|
+
"name": "checked",
|
|
1663
|
+
"description": "Whether the checkbox is checked.",
|
|
1664
|
+
"type": "boolean"
|
|
1665
|
+
},
|
|
1666
|
+
{
|
|
1667
|
+
"name": "label",
|
|
1668
|
+
"description": "The label of the checkbox.",
|
|
1740
1669
|
"type": "string"
|
|
1741
1670
|
},
|
|
1742
1671
|
{
|
|
1743
|
-
"name": "
|
|
1744
|
-
"description": "The
|
|
1672
|
+
"name": "description",
|
|
1673
|
+
"description": "The description of the checkbox.",
|
|
1745
1674
|
"type": "string"
|
|
1746
1675
|
},
|
|
1676
|
+
{
|
|
1677
|
+
"name": "disabled",
|
|
1678
|
+
"description": "Whether the checkbox is disabled.",
|
|
1679
|
+
"type": "boolean"
|
|
1680
|
+
},
|
|
1681
|
+
{
|
|
1682
|
+
"name": "required",
|
|
1683
|
+
"description": "Whether the checkbox is required.",
|
|
1684
|
+
"type": "boolean"
|
|
1685
|
+
},
|
|
1747
1686
|
{
|
|
1748
1687
|
"name": "size",
|
|
1749
|
-
"description": "The size of the
|
|
1750
|
-
"type": "'
|
|
1688
|
+
"description": "The size of the checkbox. Default is 'sm'.",
|
|
1689
|
+
"type": "'xs' | 'sm' | 'lg'"
|
|
1751
1690
|
},
|
|
1752
1691
|
{
|
|
1753
1692
|
"name": "sizeMap",
|
|
1754
1693
|
"description": "Responsive size map (e.g. \"md:lg\").",
|
|
1755
1694
|
"type": "string"
|
|
1695
|
+
},
|
|
1696
|
+
{
|
|
1697
|
+
"name": "labelPlacement",
|
|
1698
|
+
"description": "The placement of the label.",
|
|
1699
|
+
"type": "'left' | 'right'"
|
|
1700
|
+
},
|
|
1701
|
+
{
|
|
1702
|
+
"name": "descriptionPlacement",
|
|
1703
|
+
"description": "The placement of the description.",
|
|
1704
|
+
"type": "'top' | 'bottom'"
|
|
1705
|
+
},
|
|
1706
|
+
{
|
|
1707
|
+
"name": "subtle",
|
|
1708
|
+
"description": "The weight of the label.",
|
|
1709
|
+
"type": "boolean"
|
|
1710
|
+
},
|
|
1711
|
+
{
|
|
1712
|
+
"name": "feedback",
|
|
1713
|
+
"description": "The feedback of the checkbox.",
|
|
1714
|
+
"type": "string"
|
|
1715
|
+
},
|
|
1716
|
+
{
|
|
1717
|
+
"name": "feedbackType",
|
|
1718
|
+
"description": "The feedback type of the checkbox.",
|
|
1719
|
+
"type": "'negative' | 'positive' | 'warning'"
|
|
1720
|
+
},
|
|
1721
|
+
{
|
|
1722
|
+
"name": "invalid",
|
|
1723
|
+
"description": "The invalid state of the checkbox.",
|
|
1724
|
+
"type": "boolean"
|
|
1725
|
+
},
|
|
1726
|
+
{
|
|
1727
|
+
"name": "optional",
|
|
1728
|
+
"description": "The optional state of the checkbox.",
|
|
1729
|
+
"type": "boolean"
|
|
1730
|
+
},
|
|
1731
|
+
{
|
|
1732
|
+
"name": "optionalLabel",
|
|
1733
|
+
"description": "The optional label of the checkbox.",
|
|
1734
|
+
"type": "string"
|
|
1756
1735
|
}
|
|
1757
1736
|
],
|
|
1758
|
-
"events": [
|
|
1737
|
+
"events": [
|
|
1738
|
+
{
|
|
1739
|
+
"name": "dds-change",
|
|
1740
|
+
"type": "{ checked: boolean, indeterminate: boolean, value: string, disabled: boolean, readonly: boolean, type: 'checkbox' }",
|
|
1741
|
+
"description": "Fired when the checkbox is checked or unchecked."
|
|
1742
|
+
},
|
|
1743
|
+
{
|
|
1744
|
+
"name": "dds-blur",
|
|
1745
|
+
"type": "{ void }",
|
|
1746
|
+
"description": "Emitted when the checkbox loses focus."
|
|
1747
|
+
},
|
|
1748
|
+
{
|
|
1749
|
+
"name": "dds-focus",
|
|
1750
|
+
"type": "{ void }",
|
|
1751
|
+
"description": "Emitted when the checkbox gains focus."
|
|
1752
|
+
},
|
|
1753
|
+
{
|
|
1754
|
+
"name": "dds-input",
|
|
1755
|
+
"type": "{ checked: boolean, indeterminate: boolean, value: string, disabled: boolean, readonly: boolean }",
|
|
1756
|
+
"description": "Emitted when the checkbox receives input."
|
|
1757
|
+
}
|
|
1758
|
+
]
|
|
1759
1759
|
}
|
|
1760
1760
|
},
|
|
1761
1761
|
{
|
|
@@ -8675,7 +8675,7 @@
|
|
|
8675
8675
|
},
|
|
8676
8676
|
{
|
|
8677
8677
|
"name": "dap-ds-skeleton",
|
|
8678
|
-
"description": "A skeleton loader component for displaying placeholder content while loading.\n---\n\n\n### **CSS Properties:**\n - **--dds-skeleton-color** -
|
|
8678
|
+
"description": "A skeleton loader component for displaying placeholder content while loading.\n---\n\n\n### **CSS Properties:**\n - **--dds-skeleton-base-color** - Solid background color always visible (default: rgb(0 0 0 / 11%)); shown as a static block when prefers-reduced-motion is active _(default: undefined)_\n- **--dds-skeleton-color** - The shimmer overlay gradient (default: linear-gradient(90deg, transparent, rgb(0 0 0 / 10%), transparent)) _(default: undefined)_\n- **--dds-skeleton-animation-duration** - Duration of the loading animation (default: 1.5s) _(default: undefined)_\n- **--dds-skeleton-border-radius** - Border radius for rectangular skeletons (default: var(--dds-radius-small)) _(default: undefined)_\n- **--dds-skeleton-text-spacing** - Spacing between text lines in text variant (default: var(--dds-spacing-100)) _(default: undefined)_\n- **--dds-skeleton-animation-timing-function** - Timing function for the loading animation (default: ease-in-out) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main skeleton container.",
|
|
8679
8679
|
"doc-url": "",
|
|
8680
8680
|
"attributes": [
|
|
8681
8681
|
{
|
|
@@ -11081,7 +11081,7 @@
|
|
|
11081
11081
|
}
|
|
11082
11082
|
},
|
|
11083
11083
|
{
|
|
11084
|
-
"name": "dap-ds-icon-
|
|
11084
|
+
"name": "dap-ds-icon-home-6-line",
|
|
11085
11085
|
"description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
|
|
11086
11086
|
"doc-url": "",
|
|
11087
11087
|
"attributes": [
|
|
@@ -11134,7 +11134,7 @@
|
|
|
11134
11134
|
}
|
|
11135
11135
|
},
|
|
11136
11136
|
{
|
|
11137
|
-
"name": "dap-ds-icon-arrow-down-
|
|
11137
|
+
"name": "dap-ds-icon-arrow-down-line",
|
|
11138
11138
|
"description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
|
|
11139
11139
|
"doc-url": "",
|
|
11140
11140
|
"attributes": [
|
|
@@ -11187,7 +11187,7 @@
|
|
|
11187
11187
|
}
|
|
11188
11188
|
},
|
|
11189
11189
|
{
|
|
11190
|
-
"name": "dap-ds-icon-arrow-down-s-
|
|
11190
|
+
"name": "dap-ds-icon-arrow-down-s-fill",
|
|
11191
11191
|
"description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
|
|
11192
11192
|
"doc-url": "",
|
|
11193
11193
|
"attributes": [
|
|
@@ -11240,7 +11240,7 @@
|
|
|
11240
11240
|
}
|
|
11241
11241
|
},
|
|
11242
11242
|
{
|
|
11243
|
-
"name": "dap-ds-icon-arrow-
|
|
11243
|
+
"name": "dap-ds-icon-arrow-down-s-line",
|
|
11244
11244
|
"description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
|
|
11245
11245
|
"doc-url": "",
|
|
11246
11246
|
"attributes": [
|
|
@@ -11293,7 +11293,7 @@
|
|
|
11293
11293
|
}
|
|
11294
11294
|
},
|
|
11295
11295
|
{
|
|
11296
|
-
"name": "dap-ds-icon-arrow-left-
|
|
11296
|
+
"name": "dap-ds-icon-arrow-left-down-line",
|
|
11297
11297
|
"description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
|
|
11298
11298
|
"doc-url": "",
|
|
11299
11299
|
"attributes": [
|
|
@@ -11346,7 +11346,7 @@
|
|
|
11346
11346
|
}
|
|
11347
11347
|
},
|
|
11348
11348
|
{
|
|
11349
|
-
"name": "dap-ds-icon-arrow-left-line",
|
|
11349
|
+
"name": "dap-ds-icon-arrow-left-l-line",
|
|
11350
11350
|
"description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
|
|
11351
11351
|
"doc-url": "",
|
|
11352
11352
|
"attributes": [
|
|
@@ -11399,7 +11399,7 @@
|
|
|
11399
11399
|
}
|
|
11400
11400
|
},
|
|
11401
11401
|
{
|
|
11402
|
-
"name": "dap-ds-icon-arrow-left-
|
|
11402
|
+
"name": "dap-ds-icon-arrow-left-line",
|
|
11403
11403
|
"description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
|
|
11404
11404
|
"doc-url": "",
|
|
11405
11405
|
"attributes": [
|
|
@@ -11505,7 +11505,7 @@
|
|
|
11505
11505
|
}
|
|
11506
11506
|
},
|
|
11507
11507
|
{
|
|
11508
|
-
"name": "dap-ds-icon-arrow-left-
|
|
11508
|
+
"name": "dap-ds-icon-arrow-left-s-fill",
|
|
11509
11509
|
"description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
|
|
11510
11510
|
"doc-url": "",
|
|
11511
11511
|
"attributes": [
|
|
@@ -11558,7 +11558,7 @@
|
|
|
11558
11558
|
}
|
|
11559
11559
|
},
|
|
11560
11560
|
{
|
|
11561
|
-
"name": "dap-ds-icon-arrow-
|
|
11561
|
+
"name": "dap-ds-icon-arrow-left-up-line",
|
|
11562
11562
|
"description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
|
|
11563
11563
|
"doc-url": "",
|
|
11564
11564
|
"attributes": [
|
|
@@ -11611,7 +11611,7 @@
|
|
|
11611
11611
|
}
|
|
11612
11612
|
},
|
|
11613
11613
|
{
|
|
11614
|
-
"name": "dap-ds-icon-arrow-right-
|
|
11614
|
+
"name": "dap-ds-icon-arrow-right-down-line",
|
|
11615
11615
|
"description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
|
|
11616
11616
|
"doc-url": "",
|
|
11617
11617
|
"attributes": [
|
|
@@ -11664,7 +11664,7 @@
|
|
|
11664
11664
|
}
|
|
11665
11665
|
},
|
|
11666
11666
|
{
|
|
11667
|
-
"name": "dap-ds-icon-arrow-right-line",
|
|
11667
|
+
"name": "dap-ds-icon-arrow-right-l-line",
|
|
11668
11668
|
"description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
|
|
11669
11669
|
"doc-url": "",
|
|
11670
11670
|
"attributes": [
|
|
@@ -11717,7 +11717,7 @@
|
|
|
11717
11717
|
}
|
|
11718
11718
|
},
|
|
11719
11719
|
{
|
|
11720
|
-
"name": "dap-ds-icon-arrow-right-
|
|
11720
|
+
"name": "dap-ds-icon-arrow-right-line",
|
|
11721
11721
|
"description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
|
|
11722
11722
|
"doc-url": "",
|
|
11723
11723
|
"attributes": [
|
|
@@ -11770,7 +11770,7 @@
|
|
|
11770
11770
|
}
|
|
11771
11771
|
},
|
|
11772
11772
|
{
|
|
11773
|
-
"name": "dap-ds-icon-arrow-right-s-
|
|
11773
|
+
"name": "dap-ds-icon-arrow-right-s-fill",
|
|
11774
11774
|
"description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
|
|
11775
11775
|
"doc-url": "",
|
|
11776
11776
|
"attributes": [
|
|
@@ -11823,7 +11823,7 @@
|
|
|
11823
11823
|
}
|
|
11824
11824
|
},
|
|
11825
11825
|
{
|
|
11826
|
-
"name": "dap-ds-icon-arrow-right-
|
|
11826
|
+
"name": "dap-ds-icon-arrow-right-s-line",
|
|
11827
11827
|
"description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
|
|
11828
11828
|
"doc-url": "",
|
|
11829
11829
|
"attributes": [
|
|
@@ -11876,7 +11876,7 @@
|
|
|
11876
11876
|
}
|
|
11877
11877
|
},
|
|
11878
11878
|
{
|
|
11879
|
-
"name": "dap-ds-icon-arrow-up-line",
|
|
11879
|
+
"name": "dap-ds-icon-arrow-right-up-line",
|
|
11880
11880
|
"description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
|
|
11881
11881
|
"doc-url": "",
|
|
11882
11882
|
"attributes": [
|
|
@@ -11929,7 +11929,7 @@
|
|
|
11929
11929
|
}
|
|
11930
11930
|
},
|
|
11931
11931
|
{
|
|
11932
|
-
"name": "dap-ds-icon-arrow-up-
|
|
11932
|
+
"name": "dap-ds-icon-arrow-up-line",
|
|
11933
11933
|
"description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
|
|
11934
11934
|
"doc-url": "",
|
|
11935
11935
|
"attributes": [
|
|
@@ -11982,7 +11982,7 @@
|
|
|
11982
11982
|
}
|
|
11983
11983
|
},
|
|
11984
11984
|
{
|
|
11985
|
-
"name": "dap-ds-icon-arrow-up-s-
|
|
11985
|
+
"name": "dap-ds-icon-arrow-up-s-fill",
|
|
11986
11986
|
"description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
|
|
11987
11987
|
"doc-url": "",
|
|
11988
11988
|
"attributes": [
|
|
@@ -12035,7 +12035,7 @@
|
|
|
12035
12035
|
}
|
|
12036
12036
|
},
|
|
12037
12037
|
{
|
|
12038
|
-
"name": "dap-ds-icon-
|
|
12038
|
+
"name": "dap-ds-icon-arrow-up-s-line",
|
|
12039
12039
|
"description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
|
|
12040
12040
|
"doc-url": "",
|
|
12041
12041
|
"attributes": [
|
|
@@ -12088,7 +12088,7 @@
|
|
|
12088
12088
|
}
|
|
12089
12089
|
},
|
|
12090
12090
|
{
|
|
12091
|
-
"name": "dap-ds-icon-
|
|
12091
|
+
"name": "dap-ds-icon-expand-up-down-fill",
|
|
12092
12092
|
"description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
|
|
12093
12093
|
"doc-url": "",
|
|
12094
12094
|
"attributes": [
|
|
@@ -12353,7 +12353,7 @@
|
|
|
12353
12353
|
}
|
|
12354
12354
|
},
|
|
12355
12355
|
{
|
|
12356
|
-
"name": "dap-ds-icon-
|
|
12356
|
+
"name": "dap-ds-icon-clipboard-line",
|
|
12357
12357
|
"description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
|
|
12358
12358
|
"doc-url": "",
|
|
12359
12359
|
"attributes": [
|
|
@@ -12406,7 +12406,7 @@
|
|
|
12406
12406
|
}
|
|
12407
12407
|
},
|
|
12408
12408
|
{
|
|
12409
|
-
"name": "dap-ds-icon-
|
|
12409
|
+
"name": "dap-ds-icon-file-image-line",
|
|
12410
12410
|
"description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
|
|
12411
12411
|
"doc-url": "",
|
|
12412
12412
|
"attributes": [
|
|
@@ -12512,7 +12512,7 @@
|
|
|
12512
12512
|
}
|
|
12513
12513
|
},
|
|
12514
12514
|
{
|
|
12515
|
-
"name": "dap-ds-icon-file-
|
|
12515
|
+
"name": "dap-ds-icon-file-music-line",
|
|
12516
12516
|
"description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
|
|
12517
12517
|
"doc-url": "",
|
|
12518
12518
|
"attributes": [
|
|
@@ -12565,7 +12565,7 @@
|
|
|
12565
12565
|
}
|
|
12566
12566
|
},
|
|
12567
12567
|
{
|
|
12568
|
-
"name": "dap-ds-icon-file-
|
|
12568
|
+
"name": "dap-ds-icon-file-text-line",
|
|
12569
12569
|
"description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
|
|
12570
12570
|
"doc-url": "",
|
|
12571
12571
|
"attributes": [
|
|
@@ -12618,7 +12618,7 @@
|
|
|
12618
12618
|
}
|
|
12619
12619
|
},
|
|
12620
12620
|
{
|
|
12621
|
-
"name": "dap-ds-icon-file-
|
|
12621
|
+
"name": "dap-ds-icon-file-video-line",
|
|
12622
12622
|
"description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
|
|
12623
12623
|
"doc-url": "",
|
|
12624
12624
|
"attributes": [
|
|
@@ -12671,7 +12671,7 @@
|
|
|
12671
12671
|
}
|
|
12672
12672
|
},
|
|
12673
12673
|
{
|
|
12674
|
-
"name": "dap-ds-icon-
|
|
12674
|
+
"name": "dap-ds-icon-folder-line",
|
|
12675
12675
|
"description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
|
|
12676
12676
|
"doc-url": "",
|
|
12677
12677
|
"attributes": [
|
|
@@ -12724,7 +12724,7 @@
|
|
|
12724
12724
|
}
|
|
12725
12725
|
},
|
|
12726
12726
|
{
|
|
12727
|
-
"name": "dap-ds-icon-folder-line",
|
|
12727
|
+
"name": "dap-ds-icon-folder-open-line",
|
|
12728
12728
|
"description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
|
|
12729
12729
|
"doc-url": "",
|
|
12730
12730
|
"attributes": [
|
|
@@ -12777,7 +12777,7 @@
|
|
|
12777
12777
|
}
|
|
12778
12778
|
},
|
|
12779
12779
|
{
|
|
12780
|
-
"name": "dap-ds-icon-
|
|
12780
|
+
"name": "dap-ds-icon-separator",
|
|
12781
12781
|
"description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
|
|
12782
12782
|
"doc-url": "",
|
|
12783
12783
|
"attributes": [
|
|
@@ -14049,7 +14049,7 @@
|
|
|
14049
14049
|
}
|
|
14050
14050
|
},
|
|
14051
14051
|
{
|
|
14052
|
-
"name": "dap-ds-icon-
|
|
14052
|
+
"name": "dap-ds-icon-error-warning-fill",
|
|
14053
14053
|
"description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
|
|
14054
14054
|
"doc-url": "",
|
|
14055
14055
|
"attributes": [
|
|
@@ -14102,7 +14102,7 @@
|
|
|
14102
14102
|
}
|
|
14103
14103
|
},
|
|
14104
14104
|
{
|
|
14105
|
-
"name": "dap-ds-icon-
|
|
14105
|
+
"name": "dap-ds-icon-download-line",
|
|
14106
14106
|
"description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
|
|
14107
14107
|
"doc-url": "",
|
|
14108
14108
|
"attributes": [
|
|
@@ -14155,7 +14155,7 @@
|
|
|
14155
14155
|
}
|
|
14156
14156
|
},
|
|
14157
14157
|
{
|
|
14158
|
-
"name": "dap-ds-icon-
|
|
14158
|
+
"name": "dap-ds-icon-error-warning-line",
|
|
14159
14159
|
"description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
|
|
14160
14160
|
"doc-url": "",
|
|
14161
14161
|
"attributes": [
|
|
@@ -14208,7 +14208,7 @@
|
|
|
14208
14208
|
}
|
|
14209
14209
|
},
|
|
14210
14210
|
{
|
|
14211
|
-
"name": "dap-ds-icon-
|
|
14211
|
+
"name": "dap-ds-icon-external-link-line",
|
|
14212
14212
|
"description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
|
|
14213
14213
|
"doc-url": "",
|
|
14214
14214
|
"attributes": [
|