dap-design-system 0.55.3 → 0.55.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-NHQTi00b.js → components-CUgS-U9o.js} +29 -28
- package/dist/components-CUgS-U9o.js.map +1 -0
- package/dist/components.js +1 -1
- package/dist/dds.js +1 -1
- package/dist/manifest/types/vue/index.d.ts +376 -376
- package/dist/manifest/vscode.html-custom-data.json +187 -187
- package/dist/manifest/web-types.json +634 -634
- package/dist/react/index.d.ts +12 -12
- package/dist/react-types.ts +12 -12
- package/dist/react.js +147 -147
- package/dist/react.js.map +1 -1
- package/package.json +1 -1
- package/dist/components-NHQTi00b.js.map +0 -1
|
@@ -33,6 +33,113 @@
|
|
|
33
33
|
"events": []
|
|
34
34
|
}
|
|
35
35
|
},
|
|
36
|
+
{
|
|
37
|
+
"name": "dap-ds-accordion",
|
|
38
|
+
"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.",
|
|
39
|
+
"doc-url": "",
|
|
40
|
+
"attributes": [],
|
|
41
|
+
"slots": [
|
|
42
|
+
{
|
|
43
|
+
"name": "default",
|
|
44
|
+
"description": "The content of the accordion."
|
|
45
|
+
},
|
|
46
|
+
{
|
|
47
|
+
"name": "heading",
|
|
48
|
+
"description": "The heading of the accordion."
|
|
49
|
+
},
|
|
50
|
+
{
|
|
51
|
+
"name": "icon-opened",
|
|
52
|
+
"description": "The icon when the accordion is opened."
|
|
53
|
+
},
|
|
54
|
+
{
|
|
55
|
+
"name": "icon-closed",
|
|
56
|
+
"description": "The icon when the accordion is closed."
|
|
57
|
+
}
|
|
58
|
+
],
|
|
59
|
+
"events": [
|
|
60
|
+
{
|
|
61
|
+
"name": "dds-opened",
|
|
62
|
+
"type": "{ open: boolean, item: AccordionBaseElement }",
|
|
63
|
+
"description": "Event fired when the accordion is opened."
|
|
64
|
+
},
|
|
65
|
+
{
|
|
66
|
+
"name": "dds-closed",
|
|
67
|
+
"type": "{ open: boolean, item: AccordionBaseElement }",
|
|
68
|
+
"description": "Event fired when the accordion is closed."
|
|
69
|
+
}
|
|
70
|
+
],
|
|
71
|
+
"js": {
|
|
72
|
+
"properties": [
|
|
73
|
+
{
|
|
74
|
+
"name": "size",
|
|
75
|
+
"description": "The size of the accordion. Default is `sm`. Visual variants are sm and lg (other sizes map to sm).",
|
|
76
|
+
"type": "'xxs' | 'xs' | 'sm' | 'md' | 'lg'"
|
|
77
|
+
},
|
|
78
|
+
{
|
|
79
|
+
"name": "sizeMap",
|
|
80
|
+
"description": "Responsive size map (e.g. \"md:lg\")",
|
|
81
|
+
"type": "string"
|
|
82
|
+
},
|
|
83
|
+
{
|
|
84
|
+
"name": "parentSized",
|
|
85
|
+
"description": "When \"true\", size is taken from the parent card if present.",
|
|
86
|
+
"type": "string"
|
|
87
|
+
},
|
|
88
|
+
{
|
|
89
|
+
"name": "heading",
|
|
90
|
+
"description": "The heading text of the accordion, this will be used as the aria label of the heading also if ariaLabel is not provided",
|
|
91
|
+
"type": "string"
|
|
92
|
+
},
|
|
93
|
+
{
|
|
94
|
+
"name": "headingLevel",
|
|
95
|
+
"description": "The heading level of the accordion. Default is `4`.",
|
|
96
|
+
"type": "1 | 2 | 3 | 4 | 5 | 6"
|
|
97
|
+
},
|
|
98
|
+
{
|
|
99
|
+
"name": "opened",
|
|
100
|
+
"description": "Whether the accordion is opened. Default is `false`.",
|
|
101
|
+
"type": "boolean"
|
|
102
|
+
},
|
|
103
|
+
{
|
|
104
|
+
"name": "iconLocation",
|
|
105
|
+
"description": "The location of the icon. Default is `right`.",
|
|
106
|
+
"type": "'left' | 'right'"
|
|
107
|
+
},
|
|
108
|
+
{
|
|
109
|
+
"name": "variant",
|
|
110
|
+
"description": "The variant of the accordion.",
|
|
111
|
+
"type": "'default' | 'collapsed' | 'clean' | 'clean-collapsed'"
|
|
112
|
+
},
|
|
113
|
+
{
|
|
114
|
+
"name": "lastItem",
|
|
115
|
+
"description": "Whether the accordion is the last item.",
|
|
116
|
+
"type": "boolean"
|
|
117
|
+
},
|
|
118
|
+
{
|
|
119
|
+
"name": "disabled",
|
|
120
|
+
"description": "Whether the accordion is disabled.",
|
|
121
|
+
"type": "boolean"
|
|
122
|
+
},
|
|
123
|
+
{
|
|
124
|
+
"name": "loading",
|
|
125
|
+
"description": "Whether the accordion is in loading state.",
|
|
126
|
+
"type": "boolean"
|
|
127
|
+
}
|
|
128
|
+
],
|
|
129
|
+
"events": [
|
|
130
|
+
{
|
|
131
|
+
"name": "dds-opened",
|
|
132
|
+
"type": "{ open: boolean, item: AccordionBaseElement }",
|
|
133
|
+
"description": "Event fired when the accordion is opened."
|
|
134
|
+
},
|
|
135
|
+
{
|
|
136
|
+
"name": "dds-closed",
|
|
137
|
+
"type": "{ open: boolean, item: AccordionBaseElement }",
|
|
138
|
+
"description": "Event fired when the accordion is closed."
|
|
139
|
+
}
|
|
140
|
+
]
|
|
141
|
+
}
|
|
142
|
+
},
|
|
36
143
|
{
|
|
37
144
|
"name": "dap-ds-avatar-group",
|
|
38
145
|
"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.",
|
|
@@ -321,110 +428,42 @@
|
|
|
321
428
|
}
|
|
322
429
|
},
|
|
323
430
|
{
|
|
324
|
-
"name": "dap-ds-accordion",
|
|
325
|
-
"description": "An accordion is a
|
|
431
|
+
"name": "dap-ds-accordion-group",
|
|
432
|
+
"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.",
|
|
326
433
|
"doc-url": "",
|
|
327
|
-
"attributes": [
|
|
328
|
-
"slots": [
|
|
329
|
-
{
|
|
330
|
-
"name": "default",
|
|
331
|
-
"description": "The content of the accordion."
|
|
332
|
-
},
|
|
333
|
-
{
|
|
334
|
-
"name": "heading",
|
|
335
|
-
"description": "The heading of the accordion."
|
|
336
|
-
},
|
|
434
|
+
"attributes": [
|
|
337
435
|
{
|
|
338
|
-
"name": "
|
|
339
|
-
"description": "
|
|
436
|
+
"name": "autoClose",
|
|
437
|
+
"description": "Whether to close other accordions when one is opened.",
|
|
438
|
+
"value": { "type": "string", "default": "'true'" }
|
|
340
439
|
},
|
|
341
440
|
{
|
|
342
|
-
"name": "
|
|
343
|
-
"description": "The
|
|
441
|
+
"name": "variant",
|
|
442
|
+
"description": "The variant of the accordion",
|
|
443
|
+
"value": {
|
|
444
|
+
"type": "'default' | 'collapsed' | 'clean' | 'clean-collapsed'",
|
|
445
|
+
"default": "'default'"
|
|
446
|
+
}
|
|
344
447
|
}
|
|
345
448
|
],
|
|
346
|
-
"
|
|
347
|
-
{
|
|
348
|
-
"name": "dds-opened",
|
|
349
|
-
"type": "{ open: boolean, item: AccordionBaseElement }",
|
|
350
|
-
"description": "Event fired when the accordion is opened."
|
|
351
|
-
},
|
|
352
|
-
{
|
|
353
|
-
"name": "dds-closed",
|
|
354
|
-
"type": "{ open: boolean, item: AccordionBaseElement }",
|
|
355
|
-
"description": "Event fired when the accordion is closed."
|
|
356
|
-
}
|
|
449
|
+
"slots": [
|
|
450
|
+
{ "name": "", "description": "The content of the accordion group." }
|
|
357
451
|
],
|
|
452
|
+
"events": [],
|
|
358
453
|
"js": {
|
|
359
454
|
"properties": [
|
|
360
455
|
{
|
|
361
|
-
"name": "
|
|
362
|
-
"description": "
|
|
363
|
-
"type": "'xxs' | 'xs' | 'sm' | 'md' | 'lg'"
|
|
364
|
-
},
|
|
365
|
-
{
|
|
366
|
-
"name": "sizeMap",
|
|
367
|
-
"description": "Responsive size map (e.g. \"md:lg\")",
|
|
368
|
-
"type": "string"
|
|
369
|
-
},
|
|
370
|
-
{
|
|
371
|
-
"name": "parentSized",
|
|
372
|
-
"description": "When \"true\", size is taken from the parent card if present.",
|
|
373
|
-
"type": "string"
|
|
374
|
-
},
|
|
375
|
-
{
|
|
376
|
-
"name": "heading",
|
|
377
|
-
"description": "The heading text of the accordion, this will be used as the aria label of the heading also if ariaLabel is not provided",
|
|
456
|
+
"name": "autoClose",
|
|
457
|
+
"description": "Whether to close other accordions when one is opened.",
|
|
378
458
|
"type": "string"
|
|
379
459
|
},
|
|
380
|
-
{
|
|
381
|
-
"name": "headingLevel",
|
|
382
|
-
"description": "The heading level of the accordion. Default is `4`.",
|
|
383
|
-
"type": "1 | 2 | 3 | 4 | 5 | 6"
|
|
384
|
-
},
|
|
385
|
-
{
|
|
386
|
-
"name": "opened",
|
|
387
|
-
"description": "Whether the accordion is opened. Default is `false`.",
|
|
388
|
-
"type": "boolean"
|
|
389
|
-
},
|
|
390
|
-
{
|
|
391
|
-
"name": "iconLocation",
|
|
392
|
-
"description": "The location of the icon. Default is `right`.",
|
|
393
|
-
"type": "'left' | 'right'"
|
|
394
|
-
},
|
|
395
460
|
{
|
|
396
461
|
"name": "variant",
|
|
397
|
-
"description": "The variant of the accordion
|
|
462
|
+
"description": "The variant of the accordion",
|
|
398
463
|
"type": "'default' | 'collapsed' | 'clean' | 'clean-collapsed'"
|
|
399
|
-
},
|
|
400
|
-
{
|
|
401
|
-
"name": "lastItem",
|
|
402
|
-
"description": "Whether the accordion is the last item.",
|
|
403
|
-
"type": "boolean"
|
|
404
|
-
},
|
|
405
|
-
{
|
|
406
|
-
"name": "disabled",
|
|
407
|
-
"description": "Whether the accordion is disabled.",
|
|
408
|
-
"type": "boolean"
|
|
409
|
-
},
|
|
410
|
-
{
|
|
411
|
-
"name": "loading",
|
|
412
|
-
"description": "Whether the accordion is in loading state.",
|
|
413
|
-
"type": "boolean"
|
|
414
464
|
}
|
|
415
465
|
],
|
|
416
|
-
"events": [
|
|
417
|
-
{
|
|
418
|
-
"name": "dds-opened",
|
|
419
|
-
"type": "{ open: boolean, item: AccordionBaseElement }",
|
|
420
|
-
"description": "Event fired when the accordion is opened."
|
|
421
|
-
},
|
|
422
|
-
{
|
|
423
|
-
"name": "dds-closed",
|
|
424
|
-
"type": "{ open: boolean, item: AccordionBaseElement }",
|
|
425
|
-
"description": "Event fired when the accordion is closed."
|
|
426
|
-
}
|
|
427
|
-
]
|
|
466
|
+
"events": []
|
|
428
467
|
}
|
|
429
468
|
},
|
|
430
469
|
{
|
|
@@ -584,45 +623,6 @@
|
|
|
584
623
|
]
|
|
585
624
|
}
|
|
586
625
|
},
|
|
587
|
-
{
|
|
588
|
-
"name": "dap-ds-accordion-group",
|
|
589
|
-
"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.",
|
|
590
|
-
"doc-url": "",
|
|
591
|
-
"attributes": [
|
|
592
|
-
{
|
|
593
|
-
"name": "autoClose",
|
|
594
|
-
"description": "Whether to close other accordions when one is opened.",
|
|
595
|
-
"value": { "type": "string", "default": "'true'" }
|
|
596
|
-
},
|
|
597
|
-
{
|
|
598
|
-
"name": "variant",
|
|
599
|
-
"description": "The variant of the accordion",
|
|
600
|
-
"value": {
|
|
601
|
-
"type": "'default' | 'collapsed' | 'clean' | 'clean-collapsed'",
|
|
602
|
-
"default": "'default'"
|
|
603
|
-
}
|
|
604
|
-
}
|
|
605
|
-
],
|
|
606
|
-
"slots": [
|
|
607
|
-
{ "name": "", "description": "The content of the accordion group." }
|
|
608
|
-
],
|
|
609
|
-
"events": [],
|
|
610
|
-
"js": {
|
|
611
|
-
"properties": [
|
|
612
|
-
{
|
|
613
|
-
"name": "autoClose",
|
|
614
|
-
"description": "Whether to close other accordions when one is opened.",
|
|
615
|
-
"type": "string"
|
|
616
|
-
},
|
|
617
|
-
{
|
|
618
|
-
"name": "variant",
|
|
619
|
-
"description": "The variant of the accordion",
|
|
620
|
-
"type": "'default' | 'collapsed' | 'clean' | 'clean-collapsed'"
|
|
621
|
-
}
|
|
622
|
-
],
|
|
623
|
-
"events": []
|
|
624
|
-
}
|
|
625
|
-
},
|
|
626
626
|
{
|
|
627
627
|
"name": "dap-ds-breadcrumb-item",
|
|
628
628
|
"description": "A breadcrumb item 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 item.\n- **separator** - The separator between breadcrumb items. Default is an arrow-right-s-line icon.\n\n### **CSS Properties:**\n - **--dds-breadcrumb-item-display** - The display property of the breadcrumb item (default: inline-flex) _(default: undefined)_\n- **--dds-breadcrumb-item-flex-wrap** - The flex-wrap property of the breadcrumb item (default: nowrap) _(default: undefined)_\n- **--dds-breadcrumb-item-align-items** - The align-items property of the breadcrumb item (default: center) _(default: undefined)_\n- **--dds-breadcrumb-item-color** - The text color of the breadcrumb item (default: var(--dds-text-neutral-base)) _(default: undefined)_\n- **--dds-breadcrumb-item-transition** - The transition property for the breadcrumb item (default: all 0.2s ease-in-out) _(default: undefined)_\n- **--dds-breadcrumb-item-gap** - The gap between the breadcrumb item and the separator (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-breadcrumb-item-padding** - The padding of the breadcrumb item (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-breadcrumb-item-font-size** - The font size of the breadcrumb item (default: var(--dds-font-sm)) _(default: undefined)_\n- **--dds-breadcrumb-item-font-weight** - The font weight of the breadcrumb item (default: var(--dds-font-weight-medium)) _(default: undefined)_\n- **--dds-breadcrumb-item-font-weight-bold** - The bold font weight of the breadcrumb item (default: var(--dds-font-weight-bold)) _(default: undefined)_\n- **--dds-breadcrumb-item-separator-color** - The color of the separator (default: var(--dds-text-neutral-disabled)) _(default: undefined)_\n- **--dds-breadcrumb-item-link-color** - The color of the link (default: var(--dds-link-neutral-enabled)) _(default: undefined)_\n- **--dds-breadcrumb-item-inverted-color** - The text color when inverted (default: var(--dds-text-neutral-inverted)) _(default: undefined)_\n- **--dds-breadcrumb-item-inverted-link-color** - The link color when inverted (default: var(--dds-text-neutral-inverted)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main breadcrumb item container. The li element.\n- **link** - The link of the breadcrumb item. The dds-link component.\n- **link-base** - The base part of the link part. The dds-link components base part.\n- **item-nolink** - The item of the breadcrumb item without a link. The span element.\n- **separator** - The separator of the breadcrumb item.",
|
|
@@ -700,8 +700,132 @@
|
|
|
700
700
|
}
|
|
701
701
|
},
|
|
702
702
|
{
|
|
703
|
-
"name": "dap-ds-
|
|
704
|
-
"description": "A button is a clickable element that can be used to trigger an action, submit forms, or navigate to other pages.\n---\n\n\n### **Events:**\n - **dds-loading-timeout** - Emitted when the loading timeout is reached\n\n### **Slots:**\n - _default_ - The content of the button. Can contain text, icons, or other elements.\n\n### **CSS Properties:**\n - **--dds-button-padding-x** - Horizontal padding of the button (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-button-padding-y** - Vertical padding of the button (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-button-border-radius** - Border radius of the button (default: var(--dds-radius-rounded)) _(default: undefined)_\n- **--dds-button-font-weight** - Font weight of the button (default: 700) _(default: undefined)_\n- **--dds-button-line-height** - Line height of the button (default: var(--dds-font-line-height-large)) _(default: undefined)_\n- **--dds-button-transition** - Transition property of the button (default: all 0.2s ease-in-out) _(default: undefined)_\n- **--dds-button-disabled-opacity** - Opacity of disabled button (default: 0.5) _(default: undefined)_\n- **--dds-button-size-lg** - Size of large button (default: var(--dds-spacing-1200)) _(default: undefined)_\n- **--dds-button-size-md** - Size of medium button (default: var(--dds-spacing-1000)) _(default: undefined)_\n- **--dds-button-size-sm** - Size of small button (default: var(--dds-spacing-800)) _(default: undefined)_\n- **--dds-button-size-xs** - Size of extra small button (default: var(--dds-spacing-600)) _(default: undefined)_\n- **--dds-button-circle-lg** - Size of large circle button (default: var(--dds-spacing-1200)) _(default: undefined)_\n- **--dds-button-circle-md** - Size of medium circle button (default: var(--dds-spacing-1000)) _(default: undefined)_\n- **--dds-button-circle-sm** - Size of small circle button (default: var(--dds-spacing-800)) _(default: undefined)_\n- **--dds-button-circle-xs** - Size of extra small circle button (default: var(--dds-spacing-600)) Primary button properties: _(default: undefined)_\n- **--dds-button-primary-color-bg** - Background color of primary button (default: var(--dds-button-primary-background-enabled)) _(default: undefined)_\n- **--dds-button-primary-color-bg-hover** - Background color of primary button on hover (default: var(--dds-button-primary-background-hover)) _(default: undefined)_\n- **--dds-button-primary-color-bg-active** - Background color of primary button when active (default: var(--dds-button-primary-background-pressed)) _(default: undefined)_\n- **--dds-button-primary-color-bg-disabled** - Background color of disabled primary button (default: var(--dds-button-primary-background-disabled)) _(default: undefined)_\n- **--dds-button-primary-color-text** - Text color of primary button (default: var(--dds-button-primary-text-enabled)) _(default: undefined)_\n- **--dds-button-primary-color-text-disabled** - Text color of disabled primary button (default: var(--dds-button-primary-text-disabled)) Primary inverted button properties: _(default: undefined)_\n- **--dds-button-primary-inverted-color-bg** - Background color of primary inverted button (default: var(--dds-button-primary-background-inverted-enabled)) _(default: undefined)_\n- **--dds-button-primary-inverted-color-bg-hover** - Background color of primary inverted button on hover (default: var(--dds-button-primary-background-inverted-hover)) _(default: undefined)_\n- **--dds-button-primary-inverted-color-bg-active** - Background color of primary inverted button when active (default: var(--dds-button-primary-background-inverted-pressed)) _(default: undefined)_\n- **--dds-button-primary-inverted-color-bg-disabled** - Background color of disabled primary inverted button (default: var(--dds-button-primary-background-inverted-disabled)) _(default: undefined)_\n- **--dds-button-primary-inverted-color-text** - Text color of primary inverted button (default: var(--dds-button-primary-text-inverted)) _(default: undefined)_\n- **--dds-button-primary-inverted-color-text-disabled** - Text color of disabled primary inverted button (default: var(--dds-button-primary-text-inverted-disabled)) Outline button properties: _(default: undefined)_\n- **--dds-button-outline-color-border** - Border color of outline button (default: var(--dds-button-outline-border-enabled)) _(default: undefined)_\n- **--dds-button-outline-color-border-hover** - Border color of outline button on hover (default: var(--dds-button-outline-border-hover)) _(default: undefined)_\n- **--dds-button-outline-color-border-active** - Border color of outline button when active (default: var(--dds-button-outline-border-pressed)) _(default: undefined)_\n- **--dds-button-outline-color-border-disabled** - Border color of disabled outline button (default: var(--dds-button-outline-border-disabled)) _(default: undefined)_\n- **--dds-button-outline-color-text** - Text color of outline button (default: var(--dds-button-outline-text-enabled)) _(default: undefined)_\n- **--dds-button-outline-color-text-hover** - Text color of outline button on hover (default: var(--dds-button-outline-text-hover)) _(default: undefined)_\n- **--dds-button-outline-color-text-active** - Text color of outline button when active (default: var(--dds-button-outline-text-pressed)) _(default: undefined)_\n- **--dds-button-outline-color-text-disabled** - Text color of disabled outline button (default: var(--dds-button-outline-text-disabled)) Outline inverted button properties: _(default: undefined)_\n- **--dds-button-outline-inverted-color-border** - Border color of outline inverted button (default: var(--dds-button-outline-border-inverted-enabled)) _(default: undefined)_\n- **--dds-button-outline-inverted-color-border-hover** - Border color of outline inverted button on hover (default: var(--dds-button-outline-border-inverted-hover)) _(default: undefined)_\n- **--dds-button-outline-inverted-color-border-active** - Border color of outline inverted button when active (default: var(--dds-button-outline-border-inverted-pressed)) _(default: undefined)_\n- **--dds-button-outline-inverted-color-border-disabled** - Border color of disabled outline inverted button (default: var(--dds-button-outline-border-inverted-disabled)) _(default: undefined)_\n- **--dds-button-outline-inverted-color-text** - Text color of outline inverted button (default: var(--dds-button-outline-text-inverted-enabled)) _(default: undefined)_\n- **--dds-button-outline-inverted-color-text-hover** - Text color of outline inverted button on hover (default: var(--dds-button-outline-text-inverted-hover)) _(default: undefined)_\n- **--dds-button-outline-inverted-color-text-active** - Text color of outline inverted button when active (default: var(--dds-button-outline-text-inverted-pressed)) _(default: undefined)_\n- **--dds-button-outline-inverted-color-text-disabled** - Text color of disabled outline inverted button (default: var(--dds-button-outline-text-inverted-disabled)) Subtle button properties: _(default: undefined)_\n- **--dds-button-subtle-color-bg** - Background color of subtle button (default: var(--dds-button-subtle-background-enabled)) _(default: undefined)_\n- **--dds-button-subtle-color-bg-hover** - Background color of subtle button on hover (default: var(--dds-button-subtle-background-hover)) _(default: undefined)_\n- **--dds-button-subtle-color-bg-active** - Background color of subtle button when active (default: var(--dds-button-subtle-background-pressed)) _(default: undefined)_\n- **--dds-button-subtle-color-bg-disabled** - Background color of disabled subtle button (default: var(--dds-button-subtle-background-disabled)) _(default: undefined)_\n- **--dds-button-subtle-color-border** - Border color of subtle button (default: var(--dds-button-subtle-border-enabled)) _(default: undefined)_\n- **--dds-button-subtle-color-border-hover** - Border color of subtle button on hover (default: var(--dds-button-subtle-border-hover)) _(default: undefined)_\n- **--dds-button-subtle-color-border-active** - Border color of subtle button when active (default: var(--dds-button-subtle-border-pressed)) _(default: undefined)_\n- **--dds-button-subtle-color-border-disabled** - Border color of disabled subtle button (default: var(--dds-button-subtle-border-disabled)) _(default: undefined)_\n- **--dds-button-subtle-color-text** - Text color of subtle button (default: var(--dds-button-subtle-text-enabled)) _(default: undefined)_\n- **--dds-button-subtle-color-text-hover** - Text color of subtle button on hover (default: var(--dds-button-subtle-text-hover)) _(default: undefined)_\n- **--dds-button-subtle-color-text-active** - Text color of subtle button when active (default: var(--dds-button-subtle-text-pressed)) _(default: undefined)_\n- **--dds-button-subtle-color-text-disabled** - Text color of disabled subtle button (default: var(--dds-button-subtle-text-disabled)) Clean button properties: _(default: undefined)_\n- **--dds-button-clean-color-text** - Text color of clean button (default: var(--dds-text-link-base)) _(default: undefined)_\n- **--dds-button-clean-color-text-hover** - Text color of clean button on hover (default: var(--dds-text-link-hover)) _(default: undefined)_\n- **--dds-button-clean-color-text-active** - Text color of clean button when active (default: var(--dds-text-link-pressed)) _(default: undefined)_\n- **--dds-button-clean-color-text-disabled** - Text color of disabled clean button (default: var(--dds-text-neutral-disabled)) Clean inverted button properties: _(default: undefined)_\n- **--dds-button-clean-inverted-color-text** - Text color of clean inverted button (default: var(--dds-button-primary-text-inverted)) _(default: undefined)_\n- **--dds-button-clean-inverted-color-text-hover** - Text color of clean inverted button on hover (default: var(--dds-button-primary-text-inverted)) _(default: undefined)_\n- **--dds-button-clean-inverted-color-text-active** - Text color of clean inverted button when active (default: var(--dds-button-primary-text-inverted)) _(default: undefined)_\n- **--dds-button-clean-inverted-color-text-disabled** - Text color of disabled clean inverted button (default: var(--dds-text-neutral-disabled)) Danger button properties: _(default: undefined)_\n- **--dds-button-danger-color-bg** - Background color of danger button (default: var(--dds-button-primary-background-destructive-enabled)) _(default: undefined)_\n- **--dds-button-danger-color-bg-hover** - Background color of danger button on hover (default: var(--dds-button-primary-background-destructive-hover)) _(default: undefined)_\n- **--dds-button-danger-color-bg-active** - Background color of danger button when active (default: var(--dds-button-primary-background-destructive-pressed)) _(default: undefined)_\n- **--dds-button-danger-color-text** - Text color of danger button (default: var(--dds-button-primary-text-enabled)) _(default: undefined)_\n- **--dds-button-danger-outline-color-border** - Border color of danger outline button (default: var(--dds-button-outline-border-destructive-enabled)) _(default: undefined)_\n- **--dds-button-danger-outline-color-border-hover** - Border color of danger outline button on hover (default: var(--dds-button-outline-border-destructive-hover)) _(default: undefined)_\n- **--dds-button-danger-outline-color-border-active** - Border color of danger outline button when active (default: var(--dds-button-outline-border-destructive-pressed)) _(default: undefined)_\n- **--dds-button-danger-outline-color-text** - Text color of danger outline button (default: var(--dds-button-outline-text-destructive-enabled)) _(default: undefined)_\n- **--dds-button-danger-outline-color-text-hover** - Text color of danger outline button on hover (default: var(--dds-button-outline-text-destructive-hover)) _(default: undefined)_\n- **--dds-button-danger-outline-color-text-active** - Text color of danger outline button when active (default: var(--dds-button-outline-text-destructive-pressed)) _(default: undefined)_\n- **--dds-button-danger-subtle-color-bg** - Background color of danger subtle button (default: var(--dds-button-subtle-background-destructive-enabled)) _(default: undefined)_\n- **--dds-button-danger-subtle-color-bg-hover** - Background color of danger subtle button on hover (default: var(--dds-button-subtle-background-destructive-hover)) _(default: undefined)_\n- **--dds-button-danger-subtle-color-bg-active** - Background color of danger subtle button when active (default: var(--dds-button-subtle-background-destructive-pressed)) _(default: undefined)_\n- **--dds-button-danger-subtle-color-text** - Text color of danger subtle button (default: var(--dds-button-subtle-text-destructive-enabled)) _(default: undefined)_\n- **--dds-button-danger-subtle-color-text-hover** - Text color of danger subtle button on hover (default: var(--dds-button-subtle-text-destructive-hover)) _(default: undefined)_\n- **--dds-button-danger-subtle-color-text-active** - Text color of danger subtle button when active (default: var(--dds-button-subtle-text-destructive-pressed)) _(default: undefined)_\n- **--dds-button-danger-clean-color-text** - Text color of danger clean button (default: var(--dds-text-negative-subtle)) _(default: undefined)_\n- **--dds-button-danger-clean-color-text-hover** - Text color of danger clean button on hover (default: var(--dds-text-negative-base)) _(default: undefined)_\n- **--dds-button-danger-clean-color-text-active** - Text color of danger clean button when active (default: var(--dds-text-negative-strong)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main button container.\n- **high-contrast** - The high contrast part of the button.\n- **content** - The content wrapper inside the button.",
|
|
703
|
+
"name": "dap-ds-callout",
|
|
704
|
+
"description": "`dap-ds-callout` is a custom callout component.\n---\n\n\n### **Events:**\n - **dds-close** - Fired when the close button is clicked.\n\n### **Slots:**\n - _default_ - The content of the callout.\n- **title** - The title of the callout.\n- **icon** - The icon of the callout.\n- **actions** - The actions of the callout.\n- **close** - The close button of the callout.\n\n### **CSS Properties:**\n - **--dds-callout-padding** - Padding of the callout content. (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-callout-gap** - Gap between elements in horizontal layout. (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-callout-icon-size** - Size of the icon. (default: var(--dds-spacing-600)) _(default: undefined)_\n- **--dds-callout-title-color** - Color of the title text. (default: var(--dds-text-neutral-strong)) _(default: undefined)_\n- **--dds-callout-description-color** - Color of the description text. (default: var(--dds-text-neutral-base)) _(default: undefined)_\n- **--dds-callout-title-font-size** - Font size of the title. (default: var(--dds-font-base)) _(default: undefined)_\n- **--dds-callout-description-font-size** - Font size of the description. (default: var(--dds-font-base)) _(default: undefined)_\n- **--dds-callout-title-font-weight** - Font weight of the title. (default: var(--dds-font-weight-bold)) _(default: undefined)_\n- **--dds-callout-description-font-weight** - Font weight of the description. (default: var(--dds-font-weight-medium)) _(default: undefined)_\n- **--dds-callout-actions-font-weight** - Font weight of the actions. (default: var(--dds-font-weight-bold)) _(default: undefined)_\n- **--dds-callout-actions-gap** - Gap between action items. (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-callout-content-gap** - Gap between content elements. (default: var(--dds-spacing-100)) _(default: undefined)_\n- **--dds-callout-border-radius** - Border radius of the callout. (default: var(--dds-radius-base)) _(default: undefined)_\n- **--dds-callout-brand-background** - Brand variant background color. (default: var(--dds-background-brand-base)) _(default: undefined)_\n- **--dds-callout-brand-background-subtle** - Brand variant subtle background color. (default: var(--dds-background-brand-subtle)) _(default: undefined)_\n- **--dds-callout-brand-background-medium** - Brand variant medium background color. (default: var(--dds-background-brand-medium)) _(default: undefined)_\n- **--dds-callout-brand-background-strong** - Brand variant strong background color. (default: var(--dds-background-brand-strong)) _(default: undefined)_\n- **--dds-callout-brand-icon** - Brand variant icon color. (default: var(--dds-icon-brand-subtle)) _(default: undefined)_\n- **--dds-callout-brand-border** - Brand variant border color. (default: var(--dds-border-brand-subtle)) _(default: undefined)_\n- **--dds-callout-info-background** - Info variant background color. (default: var(--dds-background-informative-base)) _(default: undefined)_\n- **--dds-callout-info-background-subtle** - Info variant subtle background color. (default: var(--dds-background-informative-subtle)) _(default: undefined)_\n- **--dds-callout-info-background-medium** - Info variant medium background color. (default: var(--dds-background-informative-medium)) _(default: undefined)_\n- **--dds-callout-info-background-strong** - Info variant strong background color. (default: var(--dds-background-informative-strong)) _(default: undefined)_\n- **--dds-callout-info-icon** - Info variant icon color. (default: var(--dds-icon-informative-subtle)) _(default: undefined)_\n- **--dds-callout-info-border** - Info variant border color. (default: var(--dds-border-informative-subtle)) _(default: undefined)_\n- **--dds-callout-positive-background** - Positive variant background color. (default: var(--dds-background-positive-base)) _(default: undefined)_\n- **--dds-callout-positive-background-subtle** - Positive variant subtle background color. (default: var(--dds-background-positive-subtle)) _(default: undefined)_\n- **--dds-callout-positive-background-medium** - Positive variant medium background color. (default: var(--dds-background-positive-medium)) _(default: undefined)_\n- **--dds-callout-positive-background-strong** - Positive variant strong background color. (default: var(--dds-background-positive-strong)) _(default: undefined)_\n- **--dds-callout-positive-icon** - Positive variant icon color. (default: var(--dds-icon-positive-subtle)) _(default: undefined)_\n- **--dds-callout-positive-border** - Positive variant border color. (default: var(--dds-border-positive-subtle)) _(default: undefined)_\n- **--dds-callout-warning-background** - Warning variant background color. (default: var(--dds-background-warning-base)) _(default: undefined)_\n- **--dds-callout-warning-background-subtle** - Warning variant subtle background color. (default: var(--dds-background-warning-subtle)) _(default: undefined)_\n- **--dds-callout-warning-background-medium** - Warning variant medium background color. (default: var(--dds-background-warning-medium)) _(default: undefined)_\n- **--dds-callout-warning-background-strong** - Warning variant strong background color. (default: var(--dds-background-warning-strong)) _(default: undefined)_\n- **--dds-callout-warning-icon** - Warning variant icon color. (default: var(--dds-icon-neutral-strong)) _(default: undefined)_\n- **--dds-callout-warning-border** - Warning variant border color. (default: var(--dds-border-warning-subtle)) _(default: undefined)_\n- **--dds-callout-negative-background** - Negative variant background color. (default: var(--dds-background-negative-base)) _(default: undefined)_\n- **--dds-callout-negative-background-subtle** - Negative variant subtle background color. (default: var(--dds-background-negative-subtle)) _(default: undefined)_\n- **--dds-callout-negative-background-medium** - Negative variant medium background color. (default: var(--dds-background-negative-medium)) _(default: undefined)_\n- **--dds-callout-negative-background-strong** - Negative variant strong background color. (default: var(--dds-background-negative-strong)) _(default: undefined)_\n- **--dds-callout-negative-icon** - Negative variant icon color. (default: var(--dds-icon-negative-subtle)) _(default: undefined)_\n- **--dds-callout-negative-border** - Negative variant border color. (default: var(--dds-border-negative-subtle)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main callout container.\n- **content** - The content of the callout.\n- **card-content** - The content of the card.\n- **icon** - The icon of the callout.\n- **title** - The title of the callout.\n- **description** - The description of the callout.\n- **actions** - The actions of the callout.\n- **close** - The close button of the callout.",
|
|
705
|
+
"doc-url": "",
|
|
706
|
+
"attributes": [
|
|
707
|
+
{
|
|
708
|
+
"name": "variant",
|
|
709
|
+
"description": "The variant of the callout",
|
|
710
|
+
"value": {
|
|
711
|
+
"type": "'brand' | 'positive' | 'info' | 'warning' | 'negative'",
|
|
712
|
+
"default": "'brand'"
|
|
713
|
+
}
|
|
714
|
+
},
|
|
715
|
+
{
|
|
716
|
+
"name": "alignment",
|
|
717
|
+
"description": "The alignment of the callout. Can be `vertical` or `horizontal`.",
|
|
718
|
+
"value": {
|
|
719
|
+
"type": "'vertical' | 'horizontal'",
|
|
720
|
+
"default": "'horizontal'"
|
|
721
|
+
}
|
|
722
|
+
},
|
|
723
|
+
{
|
|
724
|
+
"name": "shade",
|
|
725
|
+
"description": "The strongness of the callout colors. Can be `subtle`, `base`, `medium`, or `strong`.",
|
|
726
|
+
"value": {
|
|
727
|
+
"type": "'subtle' | 'base' | 'medium' | 'strong'",
|
|
728
|
+
"default": "'base'"
|
|
729
|
+
}
|
|
730
|
+
},
|
|
731
|
+
{
|
|
732
|
+
"name": "noBorder",
|
|
733
|
+
"description": "If the callout has a border",
|
|
734
|
+
"value": { "type": "string", "default": "'true'" }
|
|
735
|
+
},
|
|
736
|
+
{
|
|
737
|
+
"name": "closeable",
|
|
738
|
+
"description": "If the callout has a close button",
|
|
739
|
+
"value": { "type": "boolean", "default": "false" }
|
|
740
|
+
},
|
|
741
|
+
{
|
|
742
|
+
"name": "title",
|
|
743
|
+
"description": "The header of the callout",
|
|
744
|
+
"value": { "type": "string" }
|
|
745
|
+
},
|
|
746
|
+
{
|
|
747
|
+
"name": "closeButtonLabel",
|
|
748
|
+
"description": "The label of the close button",
|
|
749
|
+
"value": { "type": "string" }
|
|
750
|
+
},
|
|
751
|
+
{
|
|
752
|
+
"name": "opened",
|
|
753
|
+
"description": "If the callout is opened",
|
|
754
|
+
"value": { "type": "string", "default": "'true'" }
|
|
755
|
+
}
|
|
756
|
+
],
|
|
757
|
+
"slots": [
|
|
758
|
+
{ "name": "", "description": "The content of the callout." },
|
|
759
|
+
{ "name": "title", "description": "The title of the callout." },
|
|
760
|
+
{ "name": "icon", "description": "The icon of the callout." },
|
|
761
|
+
{ "name": "actions", "description": "The actions of the callout." },
|
|
762
|
+
{
|
|
763
|
+
"name": "close",
|
|
764
|
+
"description": "The close button of the callout."
|
|
765
|
+
}
|
|
766
|
+
],
|
|
767
|
+
"events": [
|
|
768
|
+
{
|
|
769
|
+
"name": "dds-close",
|
|
770
|
+
"type": "{ void }",
|
|
771
|
+
"description": "Fired when the close button is clicked."
|
|
772
|
+
}
|
|
773
|
+
],
|
|
774
|
+
"js": {
|
|
775
|
+
"properties": [
|
|
776
|
+
{
|
|
777
|
+
"name": "variant",
|
|
778
|
+
"description": "The variant of the callout",
|
|
779
|
+
"type": "'brand' | 'positive' | 'info' | 'warning' | 'negative'"
|
|
780
|
+
},
|
|
781
|
+
{
|
|
782
|
+
"name": "alignment",
|
|
783
|
+
"description": "The alignment of the callout. Can be `vertical` or `horizontal`.",
|
|
784
|
+
"type": "'vertical' | 'horizontal'"
|
|
785
|
+
},
|
|
786
|
+
{
|
|
787
|
+
"name": "shade",
|
|
788
|
+
"description": "The strongness of the callout colors. Can be `subtle`, `base`, `medium`, or `strong`.",
|
|
789
|
+
"type": "'subtle' | 'base' | 'medium' | 'strong'"
|
|
790
|
+
},
|
|
791
|
+
{
|
|
792
|
+
"name": "noBorder",
|
|
793
|
+
"description": "If the callout has a border",
|
|
794
|
+
"type": "string"
|
|
795
|
+
},
|
|
796
|
+
{
|
|
797
|
+
"name": "closeable",
|
|
798
|
+
"description": "If the callout has a close button",
|
|
799
|
+
"type": "boolean"
|
|
800
|
+
},
|
|
801
|
+
{
|
|
802
|
+
"name": "title",
|
|
803
|
+
"description": "The header of the callout",
|
|
804
|
+
"type": "string"
|
|
805
|
+
},
|
|
806
|
+
{
|
|
807
|
+
"name": "closeButtonLabel",
|
|
808
|
+
"description": "The label of the close button",
|
|
809
|
+
"type": "string"
|
|
810
|
+
},
|
|
811
|
+
{
|
|
812
|
+
"name": "opened",
|
|
813
|
+
"description": "If the callout is opened",
|
|
814
|
+
"type": "string"
|
|
815
|
+
}
|
|
816
|
+
],
|
|
817
|
+
"events": [
|
|
818
|
+
{
|
|
819
|
+
"name": "dds-close",
|
|
820
|
+
"type": "{ void }",
|
|
821
|
+
"description": "Fired when the close button is clicked."
|
|
822
|
+
}
|
|
823
|
+
]
|
|
824
|
+
}
|
|
825
|
+
},
|
|
826
|
+
{
|
|
827
|
+
"name": "dap-ds-button",
|
|
828
|
+
"description": "A button is a clickable element that can be used to trigger an action, submit forms, or navigate to other pages.\n---\n\n\n### **Events:**\n - **dds-loading-timeout** - Emitted when the loading timeout is reached\n\n### **Slots:**\n - _default_ - The content of the button. Can contain text, icons, or other elements.\n\n### **CSS Properties:**\n - **--dds-button-padding-x** - Horizontal padding of the button (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-button-padding-y** - Vertical padding of the button (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-button-border-radius** - Border radius of the button (default: var(--dds-radius-rounded)) _(default: undefined)_\n- **--dds-button-font-weight** - Font weight of the button (default: 700) _(default: undefined)_\n- **--dds-button-line-height** - Line height of the button (default: var(--dds-font-line-height-large)) _(default: undefined)_\n- **--dds-button-transition** - Transition property of the button (default: all 0.2s ease-in-out) _(default: undefined)_\n- **--dds-button-disabled-opacity** - Opacity of disabled button (default: 0.5) _(default: undefined)_\n- **--dds-button-size-lg** - Size of large button (default: var(--dds-spacing-1200)) _(default: undefined)_\n- **--dds-button-size-md** - Size of medium button (default: var(--dds-spacing-1000)) _(default: undefined)_\n- **--dds-button-size-sm** - Size of small button (default: var(--dds-spacing-800)) _(default: undefined)_\n- **--dds-button-size-xs** - Size of extra small button (default: var(--dds-spacing-600)) _(default: undefined)_\n- **--dds-button-circle-lg** - Size of large circle button (default: var(--dds-spacing-1200)) _(default: undefined)_\n- **--dds-button-circle-md** - Size of medium circle button (default: var(--dds-spacing-1000)) _(default: undefined)_\n- **--dds-button-circle-sm** - Size of small circle button (default: var(--dds-spacing-800)) _(default: undefined)_\n- **--dds-button-circle-xs** - Size of extra small circle button (default: var(--dds-spacing-600)) Primary button properties: _(default: undefined)_\n- **--dds-button-primary-color-bg** - Background color of primary button (default: var(--dds-button-primary-background-enabled)) _(default: undefined)_\n- **--dds-button-primary-color-bg-hover** - Background color of primary button on hover (default: var(--dds-button-primary-background-hover)) _(default: undefined)_\n- **--dds-button-primary-color-bg-active** - Background color of primary button when active (default: var(--dds-button-primary-background-pressed)) _(default: undefined)_\n- **--dds-button-primary-color-bg-disabled** - Background color of disabled primary button (default: var(--dds-button-primary-background-disabled)) _(default: undefined)_\n- **--dds-button-primary-color-text** - Text color of primary button (default: var(--dds-button-primary-text-enabled)) _(default: undefined)_\n- **--dds-button-primary-color-text-disabled** - Text color of disabled primary button (default: var(--dds-button-primary-text-disabled)) Primary inverted button properties: _(default: undefined)_\n- **--dds-button-primary-inverted-color-bg** - Background color of primary inverted button (default: var(--dds-button-primary-background-inverted-enabled)) _(default: undefined)_\n- **--dds-button-primary-inverted-color-bg-hover** - Background color of primary inverted button on hover (default: var(--dds-button-primary-background-inverted-hover)) _(default: undefined)_\n- **--dds-button-primary-inverted-color-bg-active** - Background color of primary inverted button when active (default: var(--dds-button-primary-background-inverted-pressed)) _(default: undefined)_\n- **--dds-button-primary-inverted-color-bg-disabled** - Background color of disabled primary inverted button (default: var(--dds-button-primary-background-inverted-disabled)) _(default: undefined)_\n- **--dds-button-primary-inverted-color-text** - Text color of primary inverted button (default: var(--dds-button-primary-text-inverted)) _(default: undefined)_\n- **--dds-button-primary-inverted-color-text-disabled** - Text color of disabled primary inverted button (default: var(--dds-button-primary-text-inverted-disabled)) Outline button properties: _(default: undefined)_\n- **--dds-button-outline-color-border** - Border color of outline button (default: var(--dds-button-outline-border-enabled)) _(default: undefined)_\n- **--dds-button-outline-color-border-hover** - Border color of outline button on hover (default: var(--dds-button-outline-border-hover)) _(default: undefined)_\n- **--dds-button-outline-color-border-active** - Border color of outline button when active (default: var(--dds-button-outline-border-pressed)) _(default: undefined)_\n- **--dds-button-outline-color-border-disabled** - Border color of disabled outline button (default: var(--dds-button-outline-border-disabled)) _(default: undefined)_\n- **--dds-button-outline-color-text** - Text color of outline button (default: var(--dds-button-outline-text-enabled)) _(default: undefined)_\n- **--dds-button-outline-color-text-hover** - Text color of outline button on hover (default: var(--dds-button-outline-text-hover)) _(default: undefined)_\n- **--dds-button-outline-color-text-active** - Text color of outline button when active (default: var(--dds-button-outline-text-pressed)) _(default: undefined)_\n- **--dds-button-outline-color-text-disabled** - Text color of disabled outline button (default: var(--dds-button-outline-text-disabled)) Outline inverted button properties: _(default: undefined)_\n- **--dds-button-outline-inverted-color-border** - Border color of outline inverted button (default: var(--dds-button-outline-border-inverted-enabled)) _(default: undefined)_\n- **--dds-button-outline-inverted-color-border-hover** - Border color of outline inverted button on hover (default: var(--dds-button-outline-border-inverted-hover)) _(default: undefined)_\n- **--dds-button-outline-inverted-color-border-active** - Border color of outline inverted button when active (default: var(--dds-button-outline-border-inverted-pressed)) _(default: undefined)_\n- **--dds-button-outline-inverted-color-border-disabled** - Border color of disabled outline inverted button (default: var(--dds-button-outline-border-inverted-disabled)) _(default: undefined)_\n- **--dds-button-outline-inverted-color-text** - Text color of outline inverted button (default: var(--dds-button-outline-text-inverted-enabled)) _(default: undefined)_\n- **--dds-button-outline-inverted-color-text-hover** - Text color of outline inverted button on hover (default: var(--dds-button-outline-text-inverted-hover)) _(default: undefined)_\n- **--dds-button-outline-inverted-color-text-active** - Text color of outline inverted button when active (default: var(--dds-button-outline-text-inverted-pressed)) _(default: undefined)_\n- **--dds-button-outline-inverted-color-text-disabled** - Text color of disabled outline inverted button (default: var(--dds-button-outline-text-inverted-disabled)) Subtle button properties: _(default: undefined)_\n- **--dds-button-subtle-color-bg** - Background color of subtle button (default: var(--dds-button-subtle-background-enabled)) _(default: undefined)_\n- **--dds-button-subtle-color-bg-hover** - Background color of subtle button on hover (default: var(--dds-button-subtle-background-hover)) _(default: undefined)_\n- **--dds-button-subtle-color-bg-active** - Background color of subtle button when active (default: var(--dds-button-subtle-background-pressed)) _(default: undefined)_\n- **--dds-button-subtle-color-bg-disabled** - Background color of disabled subtle button (default: var(--dds-button-subtle-background-disabled)) _(default: undefined)_\n- **--dds-button-subtle-color-border** - Border color of subtle button (default: var(--dds-button-subtle-border-enabled)) _(default: undefined)_\n- **--dds-button-subtle-color-border-hover** - Border color of subtle button on hover (default: var(--dds-button-subtle-border-hover)) _(default: undefined)_\n- **--dds-button-subtle-color-border-active** - Border color of subtle button when active (default: var(--dds-button-subtle-border-pressed)) _(default: undefined)_\n- **--dds-button-subtle-color-border-disabled** - Border color of disabled subtle button (default: var(--dds-button-subtle-border-disabled)) _(default: undefined)_\n- **--dds-button-subtle-color-text** - Text color of subtle button (default: var(--dds-button-subtle-text-enabled)) _(default: undefined)_\n- **--dds-button-subtle-color-text-hover** - Text color of subtle button on hover (default: var(--dds-button-subtle-text-hover)) _(default: undefined)_\n- **--dds-button-subtle-color-text-active** - Text color of subtle button when active (default: var(--dds-button-subtle-text-pressed)) _(default: undefined)_\n- **--dds-button-subtle-color-text-disabled** - Text color of disabled subtle button (default: var(--dds-button-subtle-text-disabled)) Clean button properties: _(default: undefined)_\n- **--dds-button-clean-color-text** - Text color of clean button (default: var(--dds-text-link-base)) _(default: undefined)_\n- **--dds-button-clean-color-text-hover** - Text color of clean button on hover (default: var(--dds-text-link-hover)) _(default: undefined)_\n- **--dds-button-clean-color-text-active** - Text color of clean button when active (default: var(--dds-text-link-pressed)) _(default: undefined)_\n- **--dds-button-clean-color-text-disabled** - Text color of disabled clean button (default: var(--dds-text-neutral-disabled)) Clean inverted button properties: _(default: undefined)_\n- **--dds-button-clean-inverted-color-text** - Text color of clean inverted button (default: var(--dds-button-primary-text-inverted)) _(default: undefined)_\n- **--dds-button-clean-inverted-color-text-hover** - Text color of clean inverted button on hover (default: var(--dds-button-primary-text-inverted)) _(default: undefined)_\n- **--dds-button-clean-inverted-color-text-active** - Text color of clean inverted button when active (default: var(--dds-button-primary-text-inverted)) _(default: undefined)_\n- **--dds-button-clean-inverted-color-text-disabled** - Text color of disabled clean inverted button (default: var(--dds-text-neutral-disabled)) Danger button properties: _(default: undefined)_\n- **--dds-button-danger-color-bg** - Background color of danger button (default: var(--dds-button-primary-background-destructive-enabled)) _(default: undefined)_\n- **--dds-button-danger-color-bg-hover** - Background color of danger button on hover (default: var(--dds-button-primary-background-destructive-hover)) _(default: undefined)_\n- **--dds-button-danger-color-bg-active** - Background color of danger button when active (default: var(--dds-button-primary-background-destructive-pressed)) _(default: undefined)_\n- **--dds-button-danger-color-text** - Text color of danger button (default: var(--dds-button-primary-text-enabled)) _(default: undefined)_\n- **--dds-button-danger-outline-color-border** - Border color of danger outline button (default: var(--dds-button-outline-border-destructive-enabled)) _(default: undefined)_\n- **--dds-button-danger-outline-color-border-hover** - Border color of danger outline button on hover (default: var(--dds-button-outline-border-destructive-hover)) _(default: undefined)_\n- **--dds-button-danger-outline-color-border-active** - Border color of danger outline button when active (default: var(--dds-button-outline-border-destructive-pressed)) _(default: undefined)_\n- **--dds-button-danger-outline-color-text** - Text color of danger outline button (default: var(--dds-button-outline-text-destructive-enabled)) _(default: undefined)_\n- **--dds-button-danger-outline-color-text-hover** - Text color of danger outline button on hover (default: var(--dds-button-outline-text-destructive-hover)) _(default: undefined)_\n- **--dds-button-danger-outline-color-text-active** - Text color of danger outline button when active (default: var(--dds-button-outline-text-destructive-pressed)) _(default: undefined)_\n- **--dds-button-danger-subtle-color-bg** - Background color of danger subtle button (default: var(--dds-button-subtle-background-destructive-enabled)) _(default: undefined)_\n- **--dds-button-danger-subtle-color-bg-hover** - Background color of danger subtle button on hover (default: var(--dds-button-subtle-background-destructive-hover)) _(default: undefined)_\n- **--dds-button-danger-subtle-color-bg-active** - Background color of danger subtle button when active (default: var(--dds-button-subtle-background-destructive-pressed)) _(default: undefined)_\n- **--dds-button-danger-subtle-color-text** - Text color of danger subtle button (default: var(--dds-button-subtle-text-destructive-enabled)) _(default: undefined)_\n- **--dds-button-danger-subtle-color-text-hover** - Text color of danger subtle button on hover (default: var(--dds-button-subtle-text-destructive-hover)) _(default: undefined)_\n- **--dds-button-danger-subtle-color-text-active** - Text color of danger subtle button when active (default: var(--dds-button-subtle-text-destructive-pressed)) _(default: undefined)_\n- **--dds-button-danger-clean-color-text** - Text color of danger clean button (default: var(--dds-text-negative-subtle)) _(default: undefined)_\n- **--dds-button-danger-clean-color-text-hover** - Text color of danger clean button on hover (default: var(--dds-text-negative-base)) _(default: undefined)_\n- **--dds-button-danger-clean-color-text-active** - Text color of danger clean button when active (default: var(--dds-text-negative-strong)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main button container.\n- **high-contrast** - The high contrast part of the button.\n- **content** - The content wrapper inside the button.",
|
|
705
829
|
"doc-url": "",
|
|
706
830
|
"attributes": [
|
|
707
831
|
{
|
|
@@ -1104,125 +1228,196 @@
|
|
|
1104
1228
|
}
|
|
1105
1229
|
},
|
|
1106
1230
|
{
|
|
1107
|
-
"name": "dap-ds-
|
|
1108
|
-
"description": "
|
|
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.",
|
|
1109
1233
|
"doc-url": "",
|
|
1110
1234
|
"attributes": [
|
|
1111
1235
|
{
|
|
1112
|
-
"name": "
|
|
1113
|
-
"description": "
|
|
1114
|
-
"value": {
|
|
1115
|
-
"type": "'brand' | 'positive' | 'info' | 'warning' | 'negative'",
|
|
1116
|
-
"default": "'brand'"
|
|
1117
|
-
}
|
|
1118
|
-
},
|
|
1119
|
-
{
|
|
1120
|
-
"name": "alignment",
|
|
1121
|
-
"description": "The alignment of the callout. Can be `vertical` or `horizontal`.",
|
|
1122
|
-
"value": {
|
|
1123
|
-
"type": "'vertical' | 'horizontal'",
|
|
1124
|
-
"default": "'horizontal'"
|
|
1125
|
-
}
|
|
1126
|
-
},
|
|
1127
|
-
{
|
|
1128
|
-
"name": "shade",
|
|
1129
|
-
"description": "The strongness of the callout colors. Can be `subtle`, `base`, `medium`, or `strong`.",
|
|
1130
|
-
"value": {
|
|
1131
|
-
"type": "'subtle' | 'base' | 'medium' | 'strong'",
|
|
1132
|
-
"default": "'base'"
|
|
1133
|
-
}
|
|
1134
|
-
},
|
|
1135
|
-
{
|
|
1136
|
-
"name": "noBorder",
|
|
1137
|
-
"description": "If the callout has a border",
|
|
1138
|
-
"value": { "type": "string", "default": "'true'" }
|
|
1236
|
+
"name": "indeterminate",
|
|
1237
|
+
"description": "Whether the checkbox is indeterminate",
|
|
1238
|
+
"value": { "type": "boolean", "default": "false" }
|
|
1139
1239
|
},
|
|
1140
1240
|
{
|
|
1141
|
-
"name": "
|
|
1142
|
-
"description": "
|
|
1241
|
+
"name": "preventDefault",
|
|
1242
|
+
"description": "Whether the checkbox should prevent the default action",
|
|
1143
1243
|
"value": { "type": "boolean", "default": "false" }
|
|
1144
1244
|
},
|
|
1145
1245
|
{
|
|
1146
|
-
"name": "
|
|
1147
|
-
"description": "
|
|
1148
|
-
"value": { "type": "
|
|
1246
|
+
"name": "border",
|
|
1247
|
+
"description": "This sets up border around the checkbox, when true.",
|
|
1248
|
+
"value": { "type": "boolean", "default": "false" }
|
|
1149
1249
|
},
|
|
1150
1250
|
{
|
|
1151
|
-
"name": "
|
|
1152
|
-
"description": "
|
|
1153
|
-
"value": { "type": "
|
|
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" }
|
|
1154
1254
|
},
|
|
1155
1255
|
{
|
|
1156
|
-
"name": "
|
|
1157
|
-
"description": "
|
|
1158
|
-
"value": {
|
|
1159
|
-
|
|
1160
|
-
|
|
1161
|
-
|
|
1162
|
-
{ "name": "", "description": "The content of the callout." },
|
|
1163
|
-
{ "name": "title", "description": "The title of the callout." },
|
|
1164
|
-
{ "name": "icon", "description": "The icon of the callout." },
|
|
1165
|
-
{ "name": "actions", "description": "The actions of the callout." },
|
|
1166
|
-
{
|
|
1167
|
-
"name": "close",
|
|
1168
|
-
"description": "The close button of the callout."
|
|
1256
|
+
"name": "type",
|
|
1257
|
+
"description": "The type of the checkbox",
|
|
1258
|
+
"value": {
|
|
1259
|
+
"type": "'normal' | 'background'",
|
|
1260
|
+
"default": "'normal'"
|
|
1261
|
+
}
|
|
1169
1262
|
}
|
|
1170
1263
|
],
|
|
1171
1264
|
"events": [
|
|
1172
1265
|
{
|
|
1173
|
-
"name": "dds-
|
|
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",
|
|
1174
1272
|
"type": "{ void }",
|
|
1175
|
-
"description": "
|
|
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."
|
|
1176
1284
|
}
|
|
1177
1285
|
],
|
|
1178
1286
|
"js": {
|
|
1179
1287
|
"properties": [
|
|
1180
1288
|
{
|
|
1181
|
-
"name": "
|
|
1182
|
-
"description": "
|
|
1183
|
-
"type": "
|
|
1289
|
+
"name": "indeterminate",
|
|
1290
|
+
"description": "Whether the checkbox is indeterminate",
|
|
1291
|
+
"type": "boolean"
|
|
1184
1292
|
},
|
|
1185
1293
|
{
|
|
1186
|
-
"name": "
|
|
1187
|
-
"description": "
|
|
1188
|
-
"type": "
|
|
1294
|
+
"name": "preventDefault",
|
|
1295
|
+
"description": "Whether the checkbox should prevent the default action",
|
|
1296
|
+
"type": "boolean"
|
|
1189
1297
|
},
|
|
1190
1298
|
{
|
|
1191
|
-
"name": "
|
|
1192
|
-
"description": "
|
|
1193
|
-
"type": "
|
|
1299
|
+
"name": "border",
|
|
1300
|
+
"description": "This sets up border around the checkbox, when true.",
|
|
1301
|
+
"type": "boolean"
|
|
1194
1302
|
},
|
|
1195
1303
|
{
|
|
1196
|
-
"name": "
|
|
1197
|
-
"description": "
|
|
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.",
|
|
1198
1318
|
"type": "string"
|
|
1199
1319
|
},
|
|
1200
1320
|
{
|
|
1201
|
-
"name": "
|
|
1202
|
-
"description": "
|
|
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.",
|
|
1203
1328
|
"type": "boolean"
|
|
1204
1329
|
},
|
|
1205
1330
|
{
|
|
1206
|
-
"name": "
|
|
1207
|
-
"description": "The
|
|
1331
|
+
"name": "label",
|
|
1332
|
+
"description": "The label of the checkbox.",
|
|
1208
1333
|
"type": "string"
|
|
1209
1334
|
},
|
|
1210
1335
|
{
|
|
1211
|
-
"name": "
|
|
1212
|
-
"description": "The
|
|
1336
|
+
"name": "description",
|
|
1337
|
+
"description": "The description of the checkbox.",
|
|
1213
1338
|
"type": "string"
|
|
1214
1339
|
},
|
|
1215
1340
|
{
|
|
1216
|
-
"name": "
|
|
1217
|
-
"description": "
|
|
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.",
|
|
1218
1398
|
"type": "string"
|
|
1219
1399
|
}
|
|
1220
1400
|
],
|
|
1221
1401
|
"events": [
|
|
1222
1402
|
{
|
|
1223
|
-
"name": "dds-
|
|
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",
|
|
1224
1409
|
"type": "{ void }",
|
|
1225
|
-
"description": "
|
|
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."
|
|
1226
1421
|
}
|
|
1227
1422
|
]
|
|
1228
1423
|
}
|
|
@@ -1499,263 +1694,68 @@
|
|
|
1499
1694
|
"description": "The rel of the card link.",
|
|
1500
1695
|
"value": { "type": "string", "default": "'noreferrer noopener'" }
|
|
1501
1696
|
}
|
|
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.",
|
|
1569
|
-
"doc-url": "",
|
|
1570
|
-
"attributes": [
|
|
1571
|
-
{
|
|
1572
|
-
"name": "indeterminate",
|
|
1573
|
-
"description": "Whether the checkbox is indeterminate",
|
|
1574
|
-
"value": { "type": "boolean", "default": "false" }
|
|
1575
|
-
},
|
|
1576
|
-
{
|
|
1577
|
-
"name": "preventDefault",
|
|
1578
|
-
"description": "Whether the checkbox should prevent the default action",
|
|
1579
|
-
"value": { "type": "boolean", "default": "false" }
|
|
1580
|
-
},
|
|
1581
|
-
{
|
|
1582
|
-
"name": "border",
|
|
1583
|
-
"description": "This sets up border around the checkbox, when true.",
|
|
1584
|
-
"value": { "type": "boolean", "default": "false" }
|
|
1585
|
-
},
|
|
1586
|
-
{
|
|
1587
|
-
"name": "readonly",
|
|
1588
|
-
"description": "Whether the checkbox is readonly (cannot be changed but value is submitted with form).",
|
|
1589
|
-
"value": { "type": "boolean", "default": "false" }
|
|
1590
|
-
},
|
|
1591
|
-
{
|
|
1592
|
-
"name": "type",
|
|
1593
|
-
"description": "The type of the checkbox",
|
|
1594
|
-
"value": {
|
|
1595
|
-
"type": "'normal' | 'background'",
|
|
1596
|
-
"default": "'normal'"
|
|
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."
|
|
1605
|
-
},
|
|
1606
|
-
{
|
|
1607
|
-
"name": "dds-blur",
|
|
1608
|
-
"type": "{ void }",
|
|
1609
|
-
"description": "Emitted when the checkbox loses focus."
|
|
1610
|
-
},
|
|
1611
|
-
{
|
|
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."
|
|
1620
|
-
}
|
|
1621
|
-
],
|
|
1622
|
-
"js": {
|
|
1623
|
-
"properties": [
|
|
1624
|
-
{
|
|
1625
|
-
"name": "indeterminate",
|
|
1626
|
-
"description": "Whether the checkbox is indeterminate",
|
|
1627
|
-
"type": "boolean"
|
|
1628
|
-
},
|
|
1629
|
-
{
|
|
1630
|
-
"name": "preventDefault",
|
|
1631
|
-
"description": "Whether the checkbox should prevent the default action",
|
|
1632
|
-
"type": "boolean"
|
|
1633
|
-
},
|
|
1634
|
-
{
|
|
1635
|
-
"name": "border",
|
|
1636
|
-
"description": "This sets up border around the checkbox, when true.",
|
|
1637
|
-
"type": "boolean"
|
|
1638
|
-
},
|
|
1639
|
-
{
|
|
1640
|
-
"name": "readonly",
|
|
1641
|
-
"description": "Whether the checkbox is readonly (cannot be changed but value is submitted with form).",
|
|
1642
|
-
"type": "boolean"
|
|
1643
|
-
},
|
|
1644
|
-
{
|
|
1645
|
-
"name": "type",
|
|
1646
|
-
"description": "The type of the checkbox",
|
|
1647
|
-
"type": "'normal' | 'background'"
|
|
1648
|
-
},
|
|
1649
|
-
{ "name": "focusElement", "type": "HTMLInputElement" },
|
|
1650
|
-
{ "name": "feedbackId" },
|
|
1651
|
-
{
|
|
1652
|
-
"name": "name",
|
|
1653
|
-
"description": "The name of the checkbox.",
|
|
1654
|
-
"type": "string"
|
|
1655
|
-
},
|
|
1656
|
-
{
|
|
1657
|
-
"name": "value",
|
|
1658
|
-
"description": "The value of the checkbox.",
|
|
1659
|
-
"type": "string"
|
|
1660
|
-
},
|
|
1697
|
+
],
|
|
1698
|
+
"slots": [{ "name": "", "description": "The content of the card." }],
|
|
1699
|
+
"events": [],
|
|
1700
|
+
"js": {
|
|
1701
|
+
"properties": [
|
|
1661
1702
|
{
|
|
1662
|
-
"name": "
|
|
1663
|
-
"description": "Whether the
|
|
1703
|
+
"name": "interactive",
|
|
1704
|
+
"description": "Whether the card is interactive. Default is false. If true, the card will be rendered as an anchor element.",
|
|
1664
1705
|
"type": "boolean"
|
|
1665
1706
|
},
|
|
1666
1707
|
{
|
|
1667
|
-
"name": "
|
|
1668
|
-
"description": "The
|
|
1669
|
-
"type": "
|
|
1670
|
-
},
|
|
1671
|
-
{
|
|
1672
|
-
"name": "description",
|
|
1673
|
-
"description": "The description of the checkbox.",
|
|
1674
|
-
"type": "string"
|
|
1708
|
+
"name": "renderAs",
|
|
1709
|
+
"description": "The render as type of the card, only applicable when interactive.",
|
|
1710
|
+
"type": "'a' | 'button'"
|
|
1675
1711
|
},
|
|
1676
1712
|
{
|
|
1677
1713
|
"name": "disabled",
|
|
1678
|
-
"description": "Whether the
|
|
1714
|
+
"description": "Whether the card is disabled.",
|
|
1679
1715
|
"type": "boolean"
|
|
1680
1716
|
},
|
|
1681
1717
|
{
|
|
1682
|
-
"name": "
|
|
1683
|
-
"description": "
|
|
1718
|
+
"name": "noBorder",
|
|
1719
|
+
"description": "Removes the border around the card",
|
|
1684
1720
|
"type": "boolean"
|
|
1685
1721
|
},
|
|
1686
1722
|
{
|
|
1687
|
-
"name": "
|
|
1688
|
-
"description": "
|
|
1689
|
-
"type": "
|
|
1723
|
+
"name": "noPadding",
|
|
1724
|
+
"description": "Removes the padding around the card",
|
|
1725
|
+
"type": "boolean"
|
|
1690
1726
|
},
|
|
1691
1727
|
{
|
|
1692
|
-
"name": "
|
|
1693
|
-
"description": "
|
|
1728
|
+
"name": "targetBlankText",
|
|
1729
|
+
"description": "The text for the target blank link, applicable when target is _blank. PRO TIP: Use parenthesis to wrap the text",
|
|
1694
1730
|
"type": "string"
|
|
1695
1731
|
},
|
|
1696
1732
|
{
|
|
1697
|
-
"name": "
|
|
1698
|
-
"description": "The
|
|
1699
|
-
"type": "'
|
|
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"
|
|
1733
|
+
"name": "target",
|
|
1734
|
+
"description": "The link target of the card",
|
|
1735
|
+
"type": "'_blank' | '_self' | '_parent' | '_top'"
|
|
1710
1736
|
},
|
|
1711
1737
|
{
|
|
1712
|
-
"name": "
|
|
1713
|
-
"description": "The
|
|
1738
|
+
"name": "href",
|
|
1739
|
+
"description": "The URL of the card.",
|
|
1714
1740
|
"type": "string"
|
|
1715
1741
|
},
|
|
1716
1742
|
{
|
|
1717
|
-
"name": "
|
|
1718
|
-
"description": "The
|
|
1719
|
-
"type": "
|
|
1720
|
-
},
|
|
1721
|
-
{
|
|
1722
|
-
"name": "invalid",
|
|
1723
|
-
"description": "The invalid state of the checkbox.",
|
|
1724
|
-
"type": "boolean"
|
|
1743
|
+
"name": "rel",
|
|
1744
|
+
"description": "The rel of the card link.",
|
|
1745
|
+
"type": "string"
|
|
1725
1746
|
},
|
|
1726
1747
|
{
|
|
1727
|
-
"name": "
|
|
1728
|
-
"description": "The
|
|
1729
|
-
"type": "
|
|
1748
|
+
"name": "size",
|
|
1749
|
+
"description": "The size of the card. Default is `sm`.",
|
|
1750
|
+
"type": "'sm' | 'md' | 'lg'"
|
|
1730
1751
|
},
|
|
1731
1752
|
{
|
|
1732
|
-
"name": "
|
|
1733
|
-
"description": "
|
|
1753
|
+
"name": "sizeMap",
|
|
1754
|
+
"description": "Responsive size map (e.g. \"md:lg\").",
|
|
1734
1755
|
"type": "string"
|
|
1735
1756
|
}
|
|
1736
1757
|
],
|
|
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
|
-
]
|
|
1758
|
+
"events": []
|
|
1759
1759
|
}
|
|
1760
1760
|
},
|
|
1761
1761
|
{
|
|
@@ -2673,43 +2673,6 @@
|
|
|
2673
2673
|
]
|
|
2674
2674
|
}
|
|
2675
2675
|
},
|
|
2676
|
-
{
|
|
2677
|
-
"name": "dap-ds-dap-badge",
|
|
2678
|
-
"description": "A DÁP badge is a brand element showing the use of this system design library.\n---\n\n\n### **Slots:**\n - _default_ - Description of badge *\n\n### **CSS Properties:**\n - **--dds-badge-padding-sm** - Custom padding for the small badge (default: var(--dds-spacing-200) var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-badge-padding-lg** - Custom padding for the large badge (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-badge-border-width** - Custom border width for the badge (default: var(--dds-border-width-base)) _(default: undefined)_\n- **--dds-badge-border-color** - Custom border color for the badge (default: var(--dds-border-neutral-divider)) _(default: undefined)_\n- **--dds-badge-border-radius** - Custom border radius for the badge (default: var(--dds-radius-base)) _(default: undefined)_\n- **--dds-badge-color** - Custom text color for the badge (default: var(--dds-text-neutral-base)) _(default: undefined)_\n- **--dds-badge-gap** - Custom gap between icon and text (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-badge-font-size-sm** - Custom font size for the small badge (default: var(--dds-font-xs)) _(default: undefined)_\n- **--dds-badge-font-size-lg** - Custom font size for the large badge (default: var(--dds-font-xs)) _(default: undefined)_\n- **--dds-badge-font-weight** - Custom font weight for the badge (default: var(--dds-font-weight-medium)) _(default: undefined)_\n- **--dds-badge-line-height** - Custom line height for the badge (default: var(--dds-font-line-height-large)) _(default: undefined)_\n- **--dds-badge-border-color-normal** - Custom border color for the normal variant (default: var(--dds-transparent-black-medium)) _(default: undefined)_\n- **--dds-badge-background-color-normal** - Custom background color for the normal variant (default: var(--dds-background-brand-subtle)) _(default: undefined)_\n- **--dds-badge-color-normal** - Custom text color for the normal variant (default: var(--dds-text-brand-subtle)) _(default: undefined)_\n- **--dds-badge-border-color-inverted** - Custom border color for the inverted variant (default: var(--dds-transparent-white-medium)) _(default: undefined)_\n- **--dds-badge-background-color-inverted** - Custom background color for the inverted variant (default: var(--dds-background-brand-base-inverted)) _(default: undefined)_\n- **--dds-badge-color-inverted** - Custom text color for the inverted variant (default: var(--dds-text-neutral-inverted)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - Main badge container\n- **icon** - Badge icon\n- **text** - Badge text",
|
|
2679
|
-
"doc-url": "",
|
|
2680
|
-
"attributes": [
|
|
2681
|
-
{
|
|
2682
|
-
"name": "variant",
|
|
2683
|
-
"description": "The variant of the DÁP badge",
|
|
2684
|
-
"value": {
|
|
2685
|
-
"type": "'normal' | 'inverted'",
|
|
2686
|
-
"default": "'normal'"
|
|
2687
|
-
}
|
|
2688
|
-
}
|
|
2689
|
-
],
|
|
2690
|
-
"slots": [{ "name": "", "description": "Description of badge *" }],
|
|
2691
|
-
"events": [],
|
|
2692
|
-
"js": {
|
|
2693
|
-
"properties": [
|
|
2694
|
-
{
|
|
2695
|
-
"name": "variant",
|
|
2696
|
-
"description": "The variant of the DÁP badge",
|
|
2697
|
-
"type": "'normal' | 'inverted'"
|
|
2698
|
-
},
|
|
2699
|
-
{
|
|
2700
|
-
"name": "size",
|
|
2701
|
-
"description": "The size of the DÁP badge. Default is `sm`.",
|
|
2702
|
-
"type": "'sm' | 'lg'"
|
|
2703
|
-
},
|
|
2704
|
-
{
|
|
2705
|
-
"name": "sizeMap",
|
|
2706
|
-
"description": "Responsive size map (e.g. \"md:lg\").",
|
|
2707
|
-
"type": "string"
|
|
2708
|
-
}
|
|
2709
|
-
],
|
|
2710
|
-
"events": []
|
|
2711
|
-
}
|
|
2712
|
-
},
|
|
2713
2676
|
{
|
|
2714
2677
|
"name": "dap-ds-copybox-input",
|
|
2715
2678
|
"description": "A copybox input is a field for copying an input value.\n---\n\n\n### **Events:**\n - **dds-copy** - Fired when the user clicks on the copy button.\n- **dds-change** - Fired when the input value changes.\n- **dds-input** - Fired when the input value changes.\n- **dds-keydown** - Fired when a key is pressed down.\n- **dds-blur** - Fired when the input loses focus.\n- **dds-focus** - Emitted when the input gains focus.\n- **dds-not-allowed** - Emitted when the value cannot be copied.\n\n### **CSS Properties:**\n - **--dds-input-height-xs** - The height of the extra small input. (default: var(--dds-spacing-800)) _(default: undefined)_\n- **--dds-input-height-sm** - The height of the small input. (default: var(--dds-spacing-1000)) _(default: undefined)_\n- **--dds-input-height-lg** - The height of the large input. (default: var(--dds-spacing-1200)) _(default: undefined)_\n- **--dds-input-padding-xs** - The padding of the extra small input. (default: 0 var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-input-padding-sm** - The padding of the small input. (default: 0 var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-input-padding-lg** - The padding of the large input. (default: 0 var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-input-font-size-xs** - The font size of the extra small input. (default: var(--dds-font-sm)) _(default: undefined)_\n- **--dds-input-font-size-sm** - The font size of the small input. (default: var(--dds-font-base)) _(default: undefined)_\n- **--dds-input-font-size-lg** - The font size of the large input. (default: var(--dds-font-lg)) _(default: undefined)_\n- **--dds-input-border** - The border of the input. (default: var(--dds-border-width-base) solid var(--dds-border-neutral-base)) _(default: undefined)_\n- **--dds-input-background** - The background color of the input. (default: var(--dds-fields-background-default)) _(default: undefined)_\n- **--dds-input-text-color** - The text color of the input. (default: var(--dds-text-neutral-base)) _(default: undefined)_\n- **--dds-input-border-radius** - The border radius of the input. (default: var(--dds-radius-base)) _(default: undefined)_\n- **--dds-input-disabled-border** - The border of the disabled input. (default: 0 solid var(--dds-border-neutral-disabled)) _(default: undefined)_\n- **--dds-input-disabled-background** - The background color of the disabled input. (default: var(--dds-fields-background-disabled)) _(default: undefined)_\n- **--dds-input-disabled-text** - The text color of the disabled input. (default: var(--dds-text-neutral-disabled)) _(default: undefined)_\n- **--dds-input-readonly-border** - The border of the readonly input. (default: 0 solid var(--dds-border-neutral-subtle)) _(default: undefined)_\n- **--dds-input-readonly-background** - The background color of the readonly input. (default: var(--dds-fields-background-read-only)) _(default: undefined)_\n- **--dds-input-readonly-text** - The text color of the readonly input. (default: var(--dds-text-neutral-subtle)) _(default: undefined)_\n- **--dds-input-success-border** - The border of the success input. (default: var(--dds-border-width-base) solid var(--dds-border-positive-base)) _(default: undefined)_\n- **--dds-input-error-border** - The border of the error input. (default: var(--dds-border-width-base) solid var(--dds-border-negative-base)) _(default: undefined)_\n- **--dds-input-addon-background** - The background color of the input addon. (default: var(--dds-fields-background-default)) _(default: undefined)_\n- **--dds-input-addon-success-background** - The background color of the success input addon. (default: var(--dds-fields-background-default)) _(default: undefined)_\n- **--dds-input-addon-error-background** - The background color of the error input addon. (default: var(--dds-fields-background-default)) _(default: undefined)_\n- **--dds-input-addon-border-before** - The border of the addon before the input. (default: var(--dds-border-width-base) solid var(--dds-border-neutral-base)) _(default: undefined)_\n- **--dds-input-addon-border-after** - The border of the addon after the input. (default: var(--dds-border-width-base) solid var(--dds-border-neutral-base)) _(default: undefined)_\n- **--dds-input-addon-border-width-before** - The border width of the addon before the input. (default: var(--dds-border-width-base) 0 var(--dds-border-width-base) var(--dds-border-width-base)) _(default: undefined)_\n- **--dds-input-addon-border-width-after** - The border width of the addon after the input. (default: var(--dds-border-width-base) var(--dds-border-width-base) var(--dds-border-width-base) 0) _(default: undefined)_\n- **--dds-input-addon-success-border** - The border of the success addon. (default: var(--dds-border-width-base) solid var(--dds-border-positive-base)) _(default: undefined)_\n- **--dds-input-addon-success-border-before** - The border of the success addon before the input. (default: var(--dds-border-width-base) solid var(--dds-border-positive-base)) _(default: undefined)_\n- **--dds-input-addon-success-border-after** - The border of the success addon after the input. (default: var(--dds-border-width-base) solid var(--dds-border-positive-base)) _(default: undefined)_\n- **--dds-input-addon-success-border-width-before** - The border width of the success addon before the input. (default: var(--dds-border-width-base) 0 var(--dds-border-width-base) var(--dds-border-width-base)) _(default: undefined)_\n- **--dds-input-addon-success-border-width-after** - The border width of the success addon after the input. (default: var(--dds-border-width-base) var(--dds-border-width-base) var(--dds-border-width-base) 0) _(default: undefined)_\n- **--dds-input-addon-error-border-before** - The border of the error addon before the input. (default: var(--dds-border-width-base) solid var(--dds-border-negative-base)) _(default: undefined)_\n- **--dds-input-addon-error-border-after** - The border of the error addon after the input. (default: var(--dds-border-width-base) solid var(--dds-border-negative-base)) _(default: undefined)_\n- **--dds-input-addon-error-border-width-before** - The border width of the error addon before the input. (default: var(--dds-border-width-base) 0 var(--dds-border-width-base) var(--dds-border-width-base)) _(default: undefined)_\n- **--dds-input-addon-error-border-width-after** - The border width of the error addon after the input. (default: var(--dds-border-width-base) var(--dds-border-width-base) var(--dds-border-width-base) 0) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The base container of the component.\n- **postfix** - The inner postfix icon part of the component.\n- **button** - The button of the component.\n- **copy-button-base** - The base of the copy button.\n- **copy-button-content** - The content of the copy button.\n- **copy-icon** - The copy icon of the component.\n- **copy-icon-base** - The base of the copy icon.",
|
|
@@ -2901,6 +2864,43 @@
|
|
|
2901
2864
|
]
|
|
2902
2865
|
}
|
|
2903
2866
|
},
|
|
2867
|
+
{
|
|
2868
|
+
"name": "dap-ds-dap-badge",
|
|
2869
|
+
"description": "A DÁP badge is a brand element showing the use of this system design library.\n---\n\n\n### **Slots:**\n - _default_ - Description of badge *\n\n### **CSS Properties:**\n - **--dds-badge-padding-sm** - Custom padding for the small badge (default: var(--dds-spacing-200) var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-badge-padding-lg** - Custom padding for the large badge (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-badge-border-width** - Custom border width for the badge (default: var(--dds-border-width-base)) _(default: undefined)_\n- **--dds-badge-border-color** - Custom border color for the badge (default: var(--dds-border-neutral-divider)) _(default: undefined)_\n- **--dds-badge-border-radius** - Custom border radius for the badge (default: var(--dds-radius-base)) _(default: undefined)_\n- **--dds-badge-color** - Custom text color for the badge (default: var(--dds-text-neutral-base)) _(default: undefined)_\n- **--dds-badge-gap** - Custom gap between icon and text (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-badge-font-size-sm** - Custom font size for the small badge (default: var(--dds-font-xs)) _(default: undefined)_\n- **--dds-badge-font-size-lg** - Custom font size for the large badge (default: var(--dds-font-xs)) _(default: undefined)_\n- **--dds-badge-font-weight** - Custom font weight for the badge (default: var(--dds-font-weight-medium)) _(default: undefined)_\n- **--dds-badge-line-height** - Custom line height for the badge (default: var(--dds-font-line-height-large)) _(default: undefined)_\n- **--dds-badge-border-color-normal** - Custom border color for the normal variant (default: var(--dds-transparent-black-medium)) _(default: undefined)_\n- **--dds-badge-background-color-normal** - Custom background color for the normal variant (default: var(--dds-background-brand-subtle)) _(default: undefined)_\n- **--dds-badge-color-normal** - Custom text color for the normal variant (default: var(--dds-text-brand-subtle)) _(default: undefined)_\n- **--dds-badge-border-color-inverted** - Custom border color for the inverted variant (default: var(--dds-transparent-white-medium)) _(default: undefined)_\n- **--dds-badge-background-color-inverted** - Custom background color for the inverted variant (default: var(--dds-background-brand-base-inverted)) _(default: undefined)_\n- **--dds-badge-color-inverted** - Custom text color for the inverted variant (default: var(--dds-text-neutral-inverted)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - Main badge container\n- **icon** - Badge icon\n- **text** - Badge text",
|
|
2870
|
+
"doc-url": "",
|
|
2871
|
+
"attributes": [
|
|
2872
|
+
{
|
|
2873
|
+
"name": "variant",
|
|
2874
|
+
"description": "The variant of the DÁP badge",
|
|
2875
|
+
"value": {
|
|
2876
|
+
"type": "'normal' | 'inverted'",
|
|
2877
|
+
"default": "'normal'"
|
|
2878
|
+
}
|
|
2879
|
+
}
|
|
2880
|
+
],
|
|
2881
|
+
"slots": [{ "name": "", "description": "Description of badge *" }],
|
|
2882
|
+
"events": [],
|
|
2883
|
+
"js": {
|
|
2884
|
+
"properties": [
|
|
2885
|
+
{
|
|
2886
|
+
"name": "variant",
|
|
2887
|
+
"description": "The variant of the DÁP badge",
|
|
2888
|
+
"type": "'normal' | 'inverted'"
|
|
2889
|
+
},
|
|
2890
|
+
{
|
|
2891
|
+
"name": "size",
|
|
2892
|
+
"description": "The size of the DÁP badge. Default is `sm`.",
|
|
2893
|
+
"type": "'sm' | 'lg'"
|
|
2894
|
+
},
|
|
2895
|
+
{
|
|
2896
|
+
"name": "sizeMap",
|
|
2897
|
+
"description": "Responsive size map (e.g. \"md:lg\").",
|
|
2898
|
+
"type": "string"
|
|
2899
|
+
}
|
|
2900
|
+
],
|
|
2901
|
+
"events": []
|
|
2902
|
+
}
|
|
2903
|
+
},
|
|
2904
2904
|
{
|
|
2905
2905
|
"name": "dap-ds-datatable",
|
|
2906
2906
|
"description": "A data table is a component that displays data in a tabular format.\n---\n\n\n### **Events:**\n - **dds-sorting-change** - Fired when the sorting of the table changes.\n- **dds-selection-change** - Fired when the selection of the table changes.\n- **dds-pagination-change** - Fired when the pagination of the table changes.\n- **dds-row-click** - Fired when a row is clicked.\n\n### **Slots:**\n - **loading** - The loading content of the table.\n- **empty** - The empty content of the table.\n\n### **CSS Properties:**\n - **--dds-datatable-bg-color** - Background color of the table. (default: var(--dds-background-neutral-subtle)). _(default: undefined)_\n- **--dds-datatable-border-color** - Border color of the table cells. (default: var(--dds-border-neutral-divider)) _(default: undefined)_\n- **--dds-datatable-header-bg-color** - Background color of the table header. (default: var(--dds-background-neutral-subtle)) _(default: undefined)_\n- **--dds-datatable-header-text-color** - Text color of the table header. (default: var(--dds-text-neutral-strong)) _(default: undefined)_\n- **--dds-datatable-row-hover-bg-color** - Background color of hovered rows. (default: var(--dds-background-brand-strong)) _(default: undefined)_\n- **--dds-datatable-row-selected-bg-color** - Background color of selected rows. (default: var(--dds-background-brand-strong)) _(default: undefined)_\n- **--dds-datatable-cell-padding** - Padding of table cells. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-datatable-header-padding** - Padding of header cells. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-datatable-last-column-padding** - Padding of the last column. (default: var(--dds-spacing-500)) _(default: undefined)_\n- **--dds-datatable-first-column-padding** - Padding of the first column. (default: var(--dds-spacing-500)) _(default: undefined)_\n- **--dds-datatable-border-width** - Width of table borders. (default: var(--dds-border-width-base)) _(default: undefined)_\n- **--dds-datatable-stripe-color** - Background color for striped rows. (default: var(--dds-background-neutral-base)) _(default: undefined)_\n- **--dds-datatable-border-radius** - Border radius of the table. (default: var(--dds-radius-base)) _(default: undefined)_\n- **--dds-datatable-shadow** - Box shadow of the table. (default: none) _(default: undefined)_\n- **--dds-datatable-transition-duration** - Duration of hover/selection transitions. (default: 0.2s) _(default: undefined)_\n- **--dds-datatable-z-index** - Z-index of the table. (default: 1) _(default: undefined)_\n- **--dds-datatable-min-height** - Minimum height of the table. (default: auto) _(default: undefined)_\n- **--dds-datatable-max-height** - Maximum height of the table. (default: none) _(default: undefined)_\n- **--dds-datatable-overflow-x** - Horizontal overflow behavior. (default: auto) _(default: undefined)_\n- **--dds-datatable-overflow-y** - Vertical overflow behavior. (default: auto) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main table container.\n- **header** - The header of the table.\n- **header-row** - The header row of the table.\n- **header-cell** - All cells of the header.\n- **body** - The body of the table.\n- **empty** - The empty content of the table.\n- **loading** - The loading content of the table.\n- **row** - All rows of the table.\n- **cell** - All cells of the table.\n- **pager** - The pager of the table.\n- **pager-base** - The base of the pager.\n- **pager-first** - The first button of the pager.\n- **pager-previous** - The previous button of the pager.\n- **pager-next** - The next button of the pager.\n- **pager-last** - The last button of the pager.\n- **pager-page-size-select** - The page size select of the pager.",
|
|
@@ -6371,117 +6371,30 @@
|
|
|
6371
6371
|
{
|
|
6372
6372
|
"name": "variant",
|
|
6373
6373
|
"description": "The variant of the badge.",
|
|
6374
|
-
"type": "'round' | 'dot'"
|
|
6375
|
-
},
|
|
6376
|
-
{
|
|
6377
|
-
"name": "max",
|
|
6378
|
-
"description": "The cap value of badge content, if the badge content is greater than the max value, it will be displayed as `[number]+`. Zero means no cap.",
|
|
6379
|
-
"type": "number"
|
|
6380
|
-
},
|
|
6381
|
-
{
|
|
6382
|
-
"name": "placement",
|
|
6383
|
-
"description": "The position of the badge content around the slot content.",
|
|
6384
|
-
"type": "'top-start' | 'top-end' | 'bottom-start' | 'bottom-end'"
|
|
6385
|
-
},
|
|
6386
|
-
{
|
|
6387
|
-
"name": "circularAuto",
|
|
6388
|
-
"description": "Whether to automatically detect circular elements and adjust positioning accordingly",
|
|
6389
|
-
"type": "boolean"
|
|
6390
|
-
},
|
|
6391
|
-
{
|
|
6392
|
-
"name": "forceCircular",
|
|
6393
|
-
"description": "Override circular positioning detection - forces circular positioning calculation",
|
|
6394
|
-
"type": "boolean"
|
|
6395
|
-
}
|
|
6396
|
-
],
|
|
6397
|
-
"events": []
|
|
6398
|
-
}
|
|
6399
|
-
},
|
|
6400
|
-
{
|
|
6401
|
-
"name": "dap-ds-official-website-banner",
|
|
6402
|
-
"description": "An official website banner is a banner that displays that the website is an official website.\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-official-banner-background-color** - The background color of the official website banner (default: var(--dds-background-brand-medium-inverted)) _(default: undefined)_\n- **--dds-official-banner-text-color** - The text color of the official website banner (default: var(--dds-text-neutral-on-inverted)) _(default: undefined)_\n- **--dds-official-banner-heading-hover-color** - The heading hover color of the official website banner (default: var(--dds-background-brand-medium-inverted)) _(default: undefined)_\n- **--dds-official-banner-border-radius** - The border radius of the official website banner (default: 0) _(default: undefined)_\n- **--dds-official-banner-icon-color** - The icon color of the official website banner (default: var(--dds-text-neutral-on-inverted)) _(default: undefined)_\n- **--dds-official-banner-icon-color-hover** - The icon hover color of the opener icon official website banner (default: var(--dds-text-neutral-on-inverted)) _(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.",
|
|
6403
|
-
"doc-url": "",
|
|
6404
|
-
"attributes": [],
|
|
6405
|
-
"slots": [
|
|
6406
|
-
{
|
|
6407
|
-
"name": "default",
|
|
6408
|
-
"description": "The content of the accordion."
|
|
6409
|
-
},
|
|
6410
|
-
{
|
|
6411
|
-
"name": "heading",
|
|
6412
|
-
"description": "The heading of the accordion."
|
|
6413
|
-
},
|
|
6414
|
-
{
|
|
6415
|
-
"name": "icon-opened",
|
|
6416
|
-
"description": "The icon when the accordion is opened."
|
|
6417
|
-
},
|
|
6418
|
-
{
|
|
6419
|
-
"name": "icon-closed",
|
|
6420
|
-
"description": "The icon when the accordion is closed."
|
|
6421
|
-
}
|
|
6422
|
-
],
|
|
6423
|
-
"events": [
|
|
6424
|
-
{
|
|
6425
|
-
"name": "dds-opened",
|
|
6426
|
-
"type": "{ void }",
|
|
6427
|
-
"description": "Event fired when the accordion is opened."
|
|
6428
|
-
},
|
|
6429
|
-
{
|
|
6430
|
-
"name": "dds-closed",
|
|
6431
|
-
"type": "{ void }",
|
|
6432
|
-
"description": "Event fired when the accordion is closed."
|
|
6433
|
-
}
|
|
6434
|
-
],
|
|
6435
|
-
"js": {
|
|
6436
|
-
"properties": [
|
|
6437
|
-
{
|
|
6438
|
-
"name": "size",
|
|
6439
|
-
"description": "The size of the official website banner. Default is `sm`.",
|
|
6440
|
-
"type": "'sm' | 'lg'"
|
|
6441
|
-
},
|
|
6442
|
-
{
|
|
6443
|
-
"name": "heading",
|
|
6444
|
-
"description": "The heading text of the accordion, this will be used as the aria label of the heading also if ariaLabel is not provided",
|
|
6445
|
-
"type": "string"
|
|
6446
|
-
},
|
|
6447
|
-
{
|
|
6448
|
-
"name": "headingLevel",
|
|
6449
|
-
"description": "The heading level of the accordion. Default is `4`.",
|
|
6450
|
-
"type": "1 | 2 | 3 | 4 | 5 | 6"
|
|
6451
|
-
},
|
|
6452
|
-
{
|
|
6453
|
-
"name": "opened",
|
|
6454
|
-
"description": "Whether the accordion is opened. Default is `false`.",
|
|
6455
|
-
"type": "boolean"
|
|
6374
|
+
"type": "'round' | 'dot'"
|
|
6456
6375
|
},
|
|
6457
6376
|
{
|
|
6458
|
-
"name": "
|
|
6459
|
-
"description": "The
|
|
6460
|
-
"type": "
|
|
6377
|
+
"name": "max",
|
|
6378
|
+
"description": "The cap value of badge content, if the badge content is greater than the max value, it will be displayed as `[number]+`. Zero means no cap.",
|
|
6379
|
+
"type": "number"
|
|
6461
6380
|
},
|
|
6462
6381
|
{
|
|
6463
|
-
"name": "
|
|
6464
|
-
"description": "The
|
|
6465
|
-
"type": "'
|
|
6382
|
+
"name": "placement",
|
|
6383
|
+
"description": "The position of the badge content around the slot content.",
|
|
6384
|
+
"type": "'top-start' | 'top-end' | 'bottom-start' | 'bottom-end'"
|
|
6466
6385
|
},
|
|
6467
6386
|
{
|
|
6468
|
-
"name": "
|
|
6469
|
-
"description": "Whether
|
|
6387
|
+
"name": "circularAuto",
|
|
6388
|
+
"description": "Whether to automatically detect circular elements and adjust positioning accordingly",
|
|
6470
6389
|
"type": "boolean"
|
|
6471
|
-
}
|
|
6472
|
-
],
|
|
6473
|
-
"events": [
|
|
6474
|
-
{
|
|
6475
|
-
"name": "dds-opened",
|
|
6476
|
-
"type": "{ void }",
|
|
6477
|
-
"description": "Event fired when the accordion is opened."
|
|
6478
6390
|
},
|
|
6479
6391
|
{
|
|
6480
|
-
"name": "
|
|
6481
|
-
"
|
|
6482
|
-
"
|
|
6392
|
+
"name": "forceCircular",
|
|
6393
|
+
"description": "Override circular positioning detection - forces circular positioning calculation",
|
|
6394
|
+
"type": "boolean"
|
|
6483
6395
|
}
|
|
6484
|
-
]
|
|
6396
|
+
],
|
|
6397
|
+
"events": []
|
|
6485
6398
|
}
|
|
6486
6399
|
},
|
|
6487
6400
|
{
|
|
@@ -6743,6 +6656,93 @@
|
|
|
6743
6656
|
]
|
|
6744
6657
|
}
|
|
6745
6658
|
},
|
|
6659
|
+
{
|
|
6660
|
+
"name": "dap-ds-official-website-banner",
|
|
6661
|
+
"description": "An official website banner is a banner that displays that the website is an official website.\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-official-banner-background-color** - The background color of the official website banner (default: var(--dds-background-brand-medium-inverted)) _(default: undefined)_\n- **--dds-official-banner-text-color** - The text color of the official website banner (default: var(--dds-text-neutral-on-inverted)) _(default: undefined)_\n- **--dds-official-banner-heading-hover-color** - The heading hover color of the official website banner (default: var(--dds-background-brand-medium-inverted)) _(default: undefined)_\n- **--dds-official-banner-border-radius** - The border radius of the official website banner (default: 0) _(default: undefined)_\n- **--dds-official-banner-icon-color** - The icon color of the official website banner (default: var(--dds-text-neutral-on-inverted)) _(default: undefined)_\n- **--dds-official-banner-icon-color-hover** - The icon hover color of the opener icon official website banner (default: var(--dds-text-neutral-on-inverted)) _(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.",
|
|
6662
|
+
"doc-url": "",
|
|
6663
|
+
"attributes": [],
|
|
6664
|
+
"slots": [
|
|
6665
|
+
{
|
|
6666
|
+
"name": "default",
|
|
6667
|
+
"description": "The content of the accordion."
|
|
6668
|
+
},
|
|
6669
|
+
{
|
|
6670
|
+
"name": "heading",
|
|
6671
|
+
"description": "The heading of the accordion."
|
|
6672
|
+
},
|
|
6673
|
+
{
|
|
6674
|
+
"name": "icon-opened",
|
|
6675
|
+
"description": "The icon when the accordion is opened."
|
|
6676
|
+
},
|
|
6677
|
+
{
|
|
6678
|
+
"name": "icon-closed",
|
|
6679
|
+
"description": "The icon when the accordion is closed."
|
|
6680
|
+
}
|
|
6681
|
+
],
|
|
6682
|
+
"events": [
|
|
6683
|
+
{
|
|
6684
|
+
"name": "dds-opened",
|
|
6685
|
+
"type": "{ void }",
|
|
6686
|
+
"description": "Event fired when the accordion is opened."
|
|
6687
|
+
},
|
|
6688
|
+
{
|
|
6689
|
+
"name": "dds-closed",
|
|
6690
|
+
"type": "{ void }",
|
|
6691
|
+
"description": "Event fired when the accordion is closed."
|
|
6692
|
+
}
|
|
6693
|
+
],
|
|
6694
|
+
"js": {
|
|
6695
|
+
"properties": [
|
|
6696
|
+
{
|
|
6697
|
+
"name": "size",
|
|
6698
|
+
"description": "The size of the official website banner. Default is `sm`.",
|
|
6699
|
+
"type": "'sm' | 'lg'"
|
|
6700
|
+
},
|
|
6701
|
+
{
|
|
6702
|
+
"name": "heading",
|
|
6703
|
+
"description": "The heading text of the accordion, this will be used as the aria label of the heading also if ariaLabel is not provided",
|
|
6704
|
+
"type": "string"
|
|
6705
|
+
},
|
|
6706
|
+
{
|
|
6707
|
+
"name": "headingLevel",
|
|
6708
|
+
"description": "The heading level of the accordion. Default is `4`.",
|
|
6709
|
+
"type": "1 | 2 | 3 | 4 | 5 | 6"
|
|
6710
|
+
},
|
|
6711
|
+
{
|
|
6712
|
+
"name": "opened",
|
|
6713
|
+
"description": "Whether the accordion is opened. Default is `false`.",
|
|
6714
|
+
"type": "boolean"
|
|
6715
|
+
},
|
|
6716
|
+
{
|
|
6717
|
+
"name": "iconLocation",
|
|
6718
|
+
"description": "The location of the icon. Default is `right`.",
|
|
6719
|
+
"type": "'left' | 'right'"
|
|
6720
|
+
},
|
|
6721
|
+
{
|
|
6722
|
+
"name": "variant",
|
|
6723
|
+
"description": "The variant of the accordion.",
|
|
6724
|
+
"type": "'default' | 'collapsed' | 'clean' | 'clean-collapsed'"
|
|
6725
|
+
},
|
|
6726
|
+
{
|
|
6727
|
+
"name": "lastItem",
|
|
6728
|
+
"description": "Whether the accordion is the last item.",
|
|
6729
|
+
"type": "boolean"
|
|
6730
|
+
}
|
|
6731
|
+
],
|
|
6732
|
+
"events": [
|
|
6733
|
+
{
|
|
6734
|
+
"name": "dds-opened",
|
|
6735
|
+
"type": "{ void }",
|
|
6736
|
+
"description": "Event fired when the accordion is opened."
|
|
6737
|
+
},
|
|
6738
|
+
{
|
|
6739
|
+
"name": "dds-closed",
|
|
6740
|
+
"type": "{ void }",
|
|
6741
|
+
"description": "Event fired when the accordion is closed."
|
|
6742
|
+
}
|
|
6743
|
+
]
|
|
6744
|
+
}
|
|
6745
|
+
},
|
|
6746
6746
|
{
|
|
6747
6747
|
"name": "dap-ds-option-group",
|
|
6748
6748
|
"description": "An option group is a container for grouping related option items.\nUsed with dap-ds-select to create grouped options that render as native optgroup elements.\n---\n\n\n### **Slots:**\n - _default_ - The option items in this group.\n\n### **CSS Parts:**\n - **base** - The main option group container.\n- **label** - The label of the option group.",
|
|
@@ -8652,62 +8652,6 @@
|
|
|
8652
8652
|
]
|
|
8653
8653
|
}
|
|
8654
8654
|
},
|
|
8655
|
-
{
|
|
8656
|
-
"name": "dap-ds-skip-link",
|
|
8657
|
-
"description": "A skip link is a link that allows keyboard users to skip to the main content of a page.\n---\n\n\n### **Slots:**\n - _default_ - The content of the skip link.\n\n### **CSS Properties:**\n - **--dds-skip-link-border-color** - Border color for the high contrast outline (default: var(--dds-border-neutral-transparent-interactive, #fff500)) _(default: undefined)_\n- **--dds-skip-link-border-width** - Border width for the high contrast outline (default: var(--dds-border-width-large)) _(default: undefined)_\n- **--dds-skip-link-border-width-active** - Border width for the active state (default: var(--dds-border-width-xlarge)) _(default: undefined)_\n- **--dds-skip-link-border-radius** - Border radius of the skip link (default: var(--dds-radius-small)) _(default: undefined)_\n- **--dds-skip-link-padding-sm** - Padding for small size variant (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-skip-link-padding-lg** - Padding for large size variant (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-skip-link-text-underline-offset** - Underline offset for the text (default: 3px) _(default: undefined)_\n- **--dds-skip-link-z-index** - Z-index of the skip link (default: var(--dds-z-index-100)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main skip link container.\n- **text** - The text container of the skip link.\n- **high-contrast** - The high contrast outline container.",
|
|
8658
|
-
"doc-url": "",
|
|
8659
|
-
"attributes": [
|
|
8660
|
-
{
|
|
8661
|
-
"name": "placement",
|
|
8662
|
-
"description": "The placement of the skip link.",
|
|
8663
|
-
"value": { "type": "'left' | 'center'" }
|
|
8664
|
-
},
|
|
8665
|
-
{
|
|
8666
|
-
"name": "href",
|
|
8667
|
-
"description": "The href of the skip link",
|
|
8668
|
-
"value": { "type": "string", "default": "'#'" }
|
|
8669
|
-
},
|
|
8670
|
-
{
|
|
8671
|
-
"name": "size",
|
|
8672
|
-
"description": "The size of the skip link",
|
|
8673
|
-
"value": { "type": "'sm' | 'lg'", "default": "'sm'" }
|
|
8674
|
-
},
|
|
8675
|
-
{
|
|
8676
|
-
"name": "noUnderline",
|
|
8677
|
-
"description": "Whether the skip link should have an underline",
|
|
8678
|
-
"value": { "type": "boolean", "default": "false" }
|
|
8679
|
-
}
|
|
8680
|
-
],
|
|
8681
|
-
"slots": [
|
|
8682
|
-
{ "name": "", "description": "The content of the skip link." }
|
|
8683
|
-
],
|
|
8684
|
-
"events": [],
|
|
8685
|
-
"js": {
|
|
8686
|
-
"properties": [
|
|
8687
|
-
{
|
|
8688
|
-
"name": "placement",
|
|
8689
|
-
"description": "The placement of the skip link.",
|
|
8690
|
-
"type": "'left' | 'center'"
|
|
8691
|
-
},
|
|
8692
|
-
{
|
|
8693
|
-
"name": "href",
|
|
8694
|
-
"description": "The href of the skip link",
|
|
8695
|
-
"type": "string"
|
|
8696
|
-
},
|
|
8697
|
-
{
|
|
8698
|
-
"name": "size",
|
|
8699
|
-
"description": "The size of the skip link",
|
|
8700
|
-
"type": "'sm' | 'lg'"
|
|
8701
|
-
},
|
|
8702
|
-
{
|
|
8703
|
-
"name": "noUnderline",
|
|
8704
|
-
"description": "Whether the skip link should have an underline",
|
|
8705
|
-
"type": "boolean"
|
|
8706
|
-
}
|
|
8707
|
-
],
|
|
8708
|
-
"events": []
|
|
8709
|
-
}
|
|
8710
|
-
},
|
|
8711
8655
|
{
|
|
8712
8656
|
"name": "dap-ds-skeleton",
|
|
8713
8657
|
"description": "A skeleton loader component for displaying placeholder content while loading.\n---\n\n\n### **CSS Properties:**\n - **--dds-skeleton-color** - The base color of the skeleton (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.",
|
|
@@ -8787,6 +8731,62 @@
|
|
|
8787
8731
|
"events": []
|
|
8788
8732
|
}
|
|
8789
8733
|
},
|
|
8734
|
+
{
|
|
8735
|
+
"name": "dap-ds-skip-link",
|
|
8736
|
+
"description": "A skip link is a link that allows keyboard users to skip to the main content of a page.\n---\n\n\n### **Slots:**\n - _default_ - The content of the skip link.\n\n### **CSS Properties:**\n - **--dds-skip-link-border-color** - Border color for the high contrast outline (default: var(--dds-border-neutral-transparent-interactive, #fff500)) _(default: undefined)_\n- **--dds-skip-link-border-width** - Border width for the high contrast outline (default: var(--dds-border-width-large)) _(default: undefined)_\n- **--dds-skip-link-border-width-active** - Border width for the active state (default: var(--dds-border-width-xlarge)) _(default: undefined)_\n- **--dds-skip-link-border-radius** - Border radius of the skip link (default: var(--dds-radius-small)) _(default: undefined)_\n- **--dds-skip-link-padding-sm** - Padding for small size variant (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-skip-link-padding-lg** - Padding for large size variant (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-skip-link-text-underline-offset** - Underline offset for the text (default: 3px) _(default: undefined)_\n- **--dds-skip-link-z-index** - Z-index of the skip link (default: var(--dds-z-index-100)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main skip link container.\n- **text** - The text container of the skip link.\n- **high-contrast** - The high contrast outline container.",
|
|
8737
|
+
"doc-url": "",
|
|
8738
|
+
"attributes": [
|
|
8739
|
+
{
|
|
8740
|
+
"name": "placement",
|
|
8741
|
+
"description": "The placement of the skip link.",
|
|
8742
|
+
"value": { "type": "'left' | 'center'" }
|
|
8743
|
+
},
|
|
8744
|
+
{
|
|
8745
|
+
"name": "href",
|
|
8746
|
+
"description": "The href of the skip link",
|
|
8747
|
+
"value": { "type": "string", "default": "'#'" }
|
|
8748
|
+
},
|
|
8749
|
+
{
|
|
8750
|
+
"name": "size",
|
|
8751
|
+
"description": "The size of the skip link",
|
|
8752
|
+
"value": { "type": "'sm' | 'lg'", "default": "'sm'" }
|
|
8753
|
+
},
|
|
8754
|
+
{
|
|
8755
|
+
"name": "noUnderline",
|
|
8756
|
+
"description": "Whether the skip link should have an underline",
|
|
8757
|
+
"value": { "type": "boolean", "default": "false" }
|
|
8758
|
+
}
|
|
8759
|
+
],
|
|
8760
|
+
"slots": [
|
|
8761
|
+
{ "name": "", "description": "The content of the skip link." }
|
|
8762
|
+
],
|
|
8763
|
+
"events": [],
|
|
8764
|
+
"js": {
|
|
8765
|
+
"properties": [
|
|
8766
|
+
{
|
|
8767
|
+
"name": "placement",
|
|
8768
|
+
"description": "The placement of the skip link.",
|
|
8769
|
+
"type": "'left' | 'center'"
|
|
8770
|
+
},
|
|
8771
|
+
{
|
|
8772
|
+
"name": "href",
|
|
8773
|
+
"description": "The href of the skip link",
|
|
8774
|
+
"type": "string"
|
|
8775
|
+
},
|
|
8776
|
+
{
|
|
8777
|
+
"name": "size",
|
|
8778
|
+
"description": "The size of the skip link",
|
|
8779
|
+
"type": "'sm' | 'lg'"
|
|
8780
|
+
},
|
|
8781
|
+
{
|
|
8782
|
+
"name": "noUnderline",
|
|
8783
|
+
"description": "Whether the skip link should have an underline",
|
|
8784
|
+
"type": "boolean"
|
|
8785
|
+
}
|
|
8786
|
+
],
|
|
8787
|
+
"events": []
|
|
8788
|
+
}
|
|
8789
|
+
},
|
|
8790
8790
|
{
|
|
8791
8791
|
"name": "dap-ds-snackbar-message",
|
|
8792
8792
|
"description": "The Snackbar component shows a sliding message to the user.\n---\n\n\n### **Events:**\n - **dds-close** - Fires when the snackbar closes.\n\n### **Slots:**\n - **default** - The content of the snackbar.\n\n### **CSS Properties:**\n - **--dds-snackbar-width** - Width of the snackbar (default: clamp(var(--dds-spacing-6000), 20vw, var(--dds-containers-xsmall))) _(default: undefined)_\n- **--dds-snackbar-gap** - Gap between snackbar elements (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-snackbar-padding** - Padding inside the snackbar (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-snackbar-margin-bottom** - Bottom margin of the snackbar (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-snackbar-transition** - Transition property for the snackbar (default: transform var(--dds-transition-slow) var(--dds-easing-ease-out)allow-discrete, opacity var(--dds-transition-slow) var(--dds-easing-ease-out) allow-discrete, margin var(--dds-transition-slow) var(--dds-easing-ease-out) allow-discrete, box-shadow var(--dds-transition-slow) var(--dds-easing-ease-out) allow-discrete) _(default: undefined)_\n- **--dds-snackbar-border-radius** - Border radius of the snackbar (default: var(--dds-radius-base)) _(default: undefined)_\n- **--dds-snackbar-font-size** - Font size used in the snackbar (default: var(--dds-font-sm)) _(default: undefined)_\n- **--dds-snackbar-background** - Background color of the snackbar (default: var(--dds-snackbar-error-background)) _(default: undefined)_\n- **--dds-snackbar-border** - Border color of the snackbar (default: var(--dds-snackbar-error-border)) _(default: undefined)_\n- **--dds-snackbar-text** - Text color of the snackbar (default: var(--dds-snackbar-variant-text)) _(default: undefined)_\n- **--dds-snackbar-icon** - Icon color of the snackbar (default: var(--dds-snackbar-variant-icon)) _(default: undefined)_\n- **--dds-snackbar-link** - Link color of the snackbar (default: var(--dds-snackbar-variant-link)) _(default: undefined)_\n- **--dds-snackbar-information-background** - Background color for information variant (default: var(--dds-background-informative-medium)) _(default: undefined)_\n- **--dds-snackbar-information-border** - Border color for information variant (default: var(--dds-border-width-base) solidvar(--dds-border-informative-subtle)) _(default: undefined)_\n- **--dds-snackbar-information-icon** - Icon color for information variant (default: var(--dds-icon-informative-subtle)) _(default: undefined)_\n- **--dds-snackbar-success-background** - Background color for success variant (default: var(--dds-background-positive-medium)) _(default: undefined)_\n- **--dds-snackbar-success-border** - Border color for success variant (default: var(--dds-border-width-base) solidvar(--dds-border-positive-subtle)) _(default: undefined)_\n- **--dds-snackbar-success-icon** - Icon color for success variant (default: var(--dds-icon-positive-subtle)) _(default: undefined)_\n- **--dds-snackbar-error-background** - Background color for error variant (default: var(--dds-background-negative-medium)) _(default: undefined)_\n- **--dds-snackbar-error-border** - Border color for error variant (default: var(--dds-border-width-base) solidvar(--dds-border-negative-subtle)) _(default: undefined)_\n- **--dds-snackbar-error-icon** - Icon color for error variant (default: var(--dds-icon-negative-subtle)) _(default: undefined)_\n- **--dds-snackbar-variant-text** - Text color for information, success, and error variants (default: var(--dds-text-neutral-base)) _(default: undefined)_\n- **--dds-snackbar-variant-icon** - Icon color for information, success, and error variants (default: var(--dds-text-neutral-base)) _(default: undefined)_\n- **--dds-snackbar-variant-link** - Link color for information, success, and error variants (default: var(--dds-text-neutral-base)) _(default: undefined)_\n- **--dds-snackbar-animation-duration** - Duration of entrance animations (default: 0.3s) _(default: undefined)_\n- **--dds-snackbar-animation-timing** - Timing function for animations (default: ease-out) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - Main snackbar container.\n- **text** - The text part of the snackbar.\n- **closebutton** - The close button part of the component.\n- **icon** - The icon part of the close button.",
|
|
@@ -11113,7 +11113,7 @@
|
|
|
11113
11113
|
}
|
|
11114
11114
|
},
|
|
11115
11115
|
{
|
|
11116
|
-
"name": "dap-ds-icon-arrow-down-
|
|
11116
|
+
"name": "dap-ds-icon-arrow-down-s-fill",
|
|
11117
11117
|
"description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
|
|
11118
11118
|
"doc-url": "",
|
|
11119
11119
|
"attributes": [
|
|
@@ -11166,7 +11166,7 @@
|
|
|
11166
11166
|
}
|
|
11167
11167
|
},
|
|
11168
11168
|
{
|
|
11169
|
-
"name": "dap-ds-icon-arrow-down-
|
|
11169
|
+
"name": "dap-ds-icon-arrow-down-line",
|
|
11170
11170
|
"description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
|
|
11171
11171
|
"doc-url": "",
|
|
11172
11172
|
"attributes": [
|
|
@@ -11484,7 +11484,7 @@
|
|
|
11484
11484
|
}
|
|
11485
11485
|
},
|
|
11486
11486
|
{
|
|
11487
|
-
"name": "dap-ds-icon-arrow-
|
|
11487
|
+
"name": "dap-ds-icon-arrow-right-down-line",
|
|
11488
11488
|
"description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
|
|
11489
11489
|
"doc-url": "",
|
|
11490
11490
|
"attributes": [
|
|
@@ -11537,7 +11537,7 @@
|
|
|
11537
11537
|
}
|
|
11538
11538
|
},
|
|
11539
11539
|
{
|
|
11540
|
-
"name": "dap-ds-icon-arrow-
|
|
11540
|
+
"name": "dap-ds-icon-arrow-left-s-line",
|
|
11541
11541
|
"description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
|
|
11542
11542
|
"doc-url": "",
|
|
11543
11543
|
"attributes": [
|
|
@@ -11749,7 +11749,7 @@
|
|
|
11749
11749
|
}
|
|
11750
11750
|
},
|
|
11751
11751
|
{
|
|
11752
|
-
"name": "dap-ds-icon-arrow-right-s-
|
|
11752
|
+
"name": "dap-ds-icon-arrow-right-s-fill",
|
|
11753
11753
|
"description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
|
|
11754
11754
|
"doc-url": "",
|
|
11755
11755
|
"attributes": [
|
|
@@ -11802,7 +11802,7 @@
|
|
|
11802
11802
|
}
|
|
11803
11803
|
},
|
|
11804
11804
|
{
|
|
11805
|
-
"name": "dap-ds-icon-arrow-right-
|
|
11805
|
+
"name": "dap-ds-icon-arrow-right-s-line",
|
|
11806
11806
|
"description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
|
|
11807
11807
|
"doc-url": "",
|
|
11808
11808
|
"attributes": [
|
|
@@ -11855,7 +11855,7 @@
|
|
|
11855
11855
|
}
|
|
11856
11856
|
},
|
|
11857
11857
|
{
|
|
11858
|
-
"name": "dap-ds-icon-arrow-right-
|
|
11858
|
+
"name": "dap-ds-icon-arrow-right-up-line",
|
|
11859
11859
|
"description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
|
|
11860
11860
|
"doc-url": "",
|
|
11861
11861
|
"attributes": [
|
|
@@ -12756,7 +12756,7 @@
|
|
|
12756
12756
|
}
|
|
12757
12757
|
},
|
|
12758
12758
|
{
|
|
12759
|
-
"name": "dap-ds-icon-
|
|
12759
|
+
"name": "dap-ds-icon-heart-fill",
|
|
12760
12760
|
"description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
|
|
12761
12761
|
"doc-url": "",
|
|
12762
12762
|
"attributes": [
|
|
@@ -12809,7 +12809,7 @@
|
|
|
12809
12809
|
}
|
|
12810
12810
|
},
|
|
12811
12811
|
{
|
|
12812
|
-
"name": "dap-ds-icon-heart-
|
|
12812
|
+
"name": "dap-ds-icon-heart-line",
|
|
12813
12813
|
"description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
|
|
12814
12814
|
"doc-url": "",
|
|
12815
12815
|
"attributes": [
|
|
@@ -12862,7 +12862,7 @@
|
|
|
12862
12862
|
}
|
|
12863
12863
|
},
|
|
12864
12864
|
{
|
|
12865
|
-
"name": "dap-ds-icon-
|
|
12865
|
+
"name": "dap-ds-icon-separator",
|
|
12866
12866
|
"description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
|
|
12867
12867
|
"doc-url": "",
|
|
12868
12868
|
"attributes": [
|
|
@@ -14876,7 +14876,7 @@
|
|
|
14876
14876
|
}
|
|
14877
14877
|
},
|
|
14878
14878
|
{
|
|
14879
|
-
"name": "dap-ds-icon-more-line",
|
|
14879
|
+
"name": "dap-ds-icon-more-2-line",
|
|
14880
14880
|
"description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
|
|
14881
14881
|
"doc-url": "",
|
|
14882
14882
|
"attributes": [
|
|
@@ -14929,7 +14929,7 @@
|
|
|
14929
14929
|
}
|
|
14930
14930
|
},
|
|
14931
14931
|
{
|
|
14932
|
-
"name": "dap-ds-icon-more-
|
|
14932
|
+
"name": "dap-ds-icon-more-line",
|
|
14933
14933
|
"description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
|
|
14934
14934
|
"doc-url": "",
|
|
14935
14935
|
"attributes": [
|