dap-design-system 0.56.2 → 0.56.3

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.
Files changed (14) hide show
  1. package/dist/components/skeleton/skeleton.component.d.ts +2 -1
  2. package/dist/{components-DtNvQM0v.js → components-BGZgdmkY.js} +24 -23
  3. package/dist/{components-DtNvQM0v.js.map → components-BGZgdmkY.js.map} +1 -1
  4. package/dist/components.js +1 -1
  5. package/dist/dds.js +1 -1
  6. package/dist/manifest/types/vue/index.d.ts +384 -384
  7. package/dist/manifest/vscode.html-custom-data.json +463 -463
  8. package/dist/manifest/web-types.json +778 -778
  9. package/dist/react/dap-ds-skeleton/index.d.ts +2 -1
  10. package/dist/react/index.d.ts +13 -13
  11. package/dist/react-types.ts +14 -14
  12. package/dist/react.js +304 -304
  13. package/dist/react.js.map +1 -1
  14. package/package.json +1 -1
package/dist/manifest/web-types.json CHANGED
@@ -6,6 +6,113 @@
6
6
  "contributions": {
7
7
  "html": {
8
8
  "elements": [
9
+ {
10
+ "name": "dap-ds-accordion",
11
+ "description": "An accordion is a vertically stacked list of interactive items that can be expanded or collapsed to reveal or hide content.\n---\n\n\n### **Events:**\n - **dds-opened** - Event fired when the accordion is opened.\n- **dds-closed** - Event fired when the accordion is closed.\n\n### **Slots:**\n - **default** - The content of the accordion.\n- **heading** - The heading of the accordion.\n- **icon-opened** - The icon when the accordion is opened.\n- **icon-closed** - The icon when the accordion is closed.\n\n### **CSS Properties:**\n - **--dds-accordion-border-width** - The width of the accordion border (default: var(--dds-border-width-base)) _(default: undefined)_\n- **--dds-accordion-border-style** - The style of the accordion border (default: solid) _(default: undefined)_\n- **--dds-accordion-border-radius** - The border radius of the accordion (default: var(--dds-radius-base)) _(default: undefined)_\n- **--dds-accordion-border-color** - The color of the accordion border (default: var(--dds-border-neutral-divider)) _(default: undefined)_\n- **--dds-accordion-background-color** - The background color of the accordion (default: var(--dds-background-neutral-subtle)) _(default: undefined)_\n- **--dds-accordion-text-color** - The text color of the accordion (default: var(--dds-text-neutral-strong)) _(default: undefined)_\n- **--dds-accordion-hover-background** - The background color when hovering over the accordion (default: var(--dds-background-neutral-base)) _(default: undefined)_\n- **--dds-accordion-active-background** - The background color when the accordion is active (default: var(--dds-background-neutral-medium)) _(default: undefined)_\n- **--dds-accordion-icon-background** - The background color of the accordion icon (default: var(--dds-transparent-black-subtle)) _(default: undefined)_\n- **--dds-accordion-icon-color** - The color of the accordion icon (default: var(--dds-icon-neutral-base)) _(default: undefined)_\n- **--dds-accordion-icon-hover-background** - The background color of the accordion icon when hovered (default: var(--dds-transparent-black-base)) _(default: undefined)_\n- **--dds-accordion-icon-active-background** - The background color of the accordion icon when active (default: var(--dds-transparent-black-strong)) _(default: undefined)_\n- **--dds-accordion-icon-hover-color** - The color of the accordion icon when hovered (default: var(--dds-icon-neutral-strong)) _(default: undefined)_\n- **--dds-accordion-icon-active-color** - The color of the accordion icon when active (default: var(--dds-icon-neutral-strong)) _(default: undefined)_\n- **--dds-accordion-content-color** - The color of the accordion content (default: var(--dds-text-text-neutral)) _(default: undefined)_\n- **--dds-accordion-transition-duration** - The duration of the accordion transitions (default: var(--dds-transition-fast)) _(default: undefined)_\n- **--dds-accordion-transition-timing** - The timing function of the accordion transitions (default: var(--dds-easing-ease-in-out)) _(default: undefined)_\n- **--dds-accordion-divider-color** - The color of the divider between accordion items (default: var(--dds-border-neutral-divider)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main accordion container.\n- **heading** - The heading of the accordion.\n- **button** - The button of the accordion.\n- **content** - The content of the accordion.\n- **content-container** - The container of the accordion content.\n- **icon-wrapper** - The icon wrapper of the accordion.\n- **open-icon** - The icon when the accordion is opened.\n- **open-icon-base** - The base of the icon when the accordion is opened.\n- **close-icon** - The icon when the accordion is closed.\n- **close-icon-base** - The base of the icon when the accordion is closed.",
12
+ "doc-url": "",
13
+ "attributes": [],
14
+ "slots": [
15
+ {
16
+ "name": "default",
17
+ "description": "The content of the accordion."
18
+ },
19
+ {
20
+ "name": "heading",
21
+ "description": "The heading of the accordion."
22
+ },
23
+ {
24
+ "name": "icon-opened",
25
+ "description": "The icon when the accordion is opened."
26
+ },
27
+ {
28
+ "name": "icon-closed",
29
+ "description": "The icon when the accordion is closed."
30
+ }
31
+ ],
32
+ "events": [
33
+ {
34
+ "name": "dds-opened",
35
+ "type": "{ open: boolean, item: AccordionBaseElement }",
36
+ "description": "Event fired when the accordion is opened."
37
+ },
38
+ {
39
+ "name": "dds-closed",
40
+ "type": "{ open: boolean, item: AccordionBaseElement }",
41
+ "description": "Event fired when the accordion is closed."
42
+ }
43
+ ],
44
+ "js": {
45
+ "properties": [
46
+ {
47
+ "name": "size",
48
+ "description": "The size of the accordion. Default is `sm`. Visual variants are sm and lg (other sizes map to sm).",
49
+ "type": "'xxs' | 'xs' | 'sm' | 'md' | 'lg'"
50
+ },
51
+ {
52
+ "name": "sizeMap",
53
+ "description": "Responsive size map (e.g. \"md:lg\")",
54
+ "type": "string"
55
+ },
56
+ {
57
+ "name": "parentSized",
58
+ "description": "When \"true\", size is taken from the parent card if present.",
59
+ "type": "string"
60
+ },
61
+ {
62
+ "name": "heading",
63
+ "description": "The heading text of the accordion, this will be used as the aria label of the heading also if ariaLabel is not provided",
64
+ "type": "string"
65
+ },
66
+ {
67
+ "name": "headingLevel",
68
+ "description": "The heading level of the accordion. Default is `4`.",
69
+ "type": "1 | 2 | 3 | 4 | 5 | 6"
70
+ },
71
+ {
72
+ "name": "opened",
73
+ "description": "Whether the accordion is opened. Default is `false`.",
74
+ "type": "boolean"
75
+ },
76
+ {
77
+ "name": "iconLocation",
78
+ "description": "The location of the icon. Default is `right`.",
79
+ "type": "'left' | 'right'"
80
+ },
81
+ {
82
+ "name": "variant",
83
+ "description": "The variant of the accordion.",
84
+ "type": "'default' | 'collapsed' | 'clean' | 'clean-collapsed'"
85
+ },
86
+ {
87
+ "name": "lastItem",
88
+ "description": "Whether the accordion is the last item.",
89
+ "type": "boolean"
90
+ },
91
+ {
92
+ "name": "disabled",
93
+ "description": "Whether the accordion is disabled.",
94
+ "type": "boolean"
95
+ },
96
+ {
97
+ "name": "loading",
98
+ "description": "Whether the accordion is in loading state.",
99
+ "type": "boolean"
100
+ }
101
+ ],
102
+ "events": [
103
+ {
104
+ "name": "dds-opened",
105
+ "type": "{ open: boolean, item: AccordionBaseElement }",
106
+ "description": "Event fired when the accordion is opened."
107
+ },
108
+ {
109
+ "name": "dds-closed",
110
+ "type": "{ open: boolean, item: AccordionBaseElement }",
111
+ "description": "Event fired when the accordion is closed."
112
+ }
113
+ ]
114
+ }
115
+ },
9
116
  {
10
117
  "name": "dap-ds-accordion-group",
11
118
  "description": "An accordion group is a collection of accordion components.\n---\n\n\n### **Slots:**\n - _default_ - The content of the accordion group.\n\n### **CSS Properties:**\n - **--dds-accordion-group-spacing** - Controls the gap between accordion items (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-accordion-group-border-color** - Controls the border color (default: var(--dds-border-neutral-subtle)) _(default: undefined)_\n- **--dds-accordion-group-border-width** - Controls the border width (default: var(--dds-border-width-base)) _(default: undefined)_\n- **--dds-accordion-group-border-radius** - Controls the border radius (default: var(--dds-radius-base)) _(default: undefined)_\n- **--dds-accordion-group-background** - Controls the background color (default: transparent) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main accordion group container.",
@@ -45,6 +152,33 @@
45
152
  "events": []
46
153
  }
47
154
  },
155
+ {
156
+ "name": "dap-ds-anchor-heading",
157
+ "description": "Anchor heading is a heading with an anchor link.\n---\n\n\n### **CSS Properties:**\n - **--dds-anchor-link-color** - The color of the anchor link (default: var(--dds-color-primary)) _(default: undefined)_\n- **--dds-anchor-link-opacity** - The opacity of the anchor link when not hovered (default: 0) _(default: undefined)_\n- **--dds-anchor-link-hover-opacity** - The opacity of the anchor link when hovered (default: 1) _(default: undefined)_\n- **--dds-anchor-link-transition** - The transition property for the anchor link opacity (default: opacity 0.2s ease-in-out) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main anchor heading container.\n- **link** - The link of the anchor heading. dap-ds-link element.\n- **link-base** - The base of the link part.\n- **text** - The text of the anchor heading.",
158
+ "doc-url": "",
159
+ "attributes": [
160
+ {
161
+ "name": "variant",
162
+ "description": "The variant of the heading. Default is `h2`. Can be `h1`, `h2`, `h3`, `h4`, `h5`, or `h6`.",
163
+ "value": { "type": "HeadingVariant" }
164
+ },
165
+ {
166
+ "name": "label",
167
+ "description": "The label of the heading.",
168
+ "value": { "type": "string" }
169
+ }
170
+ ],
171
+ "events": [],
172
+ "js": {
173
+ "properties": [
174
+ { "name": "variant", "type": "HeadingVariant" },
175
+ { "name": "label", "type": "string" },
176
+ { "name": "elementId" },
177
+ { "name": "anchorTitle" }
178
+ ],
179
+ "events": []
180
+ }
181
+ },
48
182
  {
49
183
  "name": "dap-ds-avatar",
50
184
  "description": "Avatar component can be used to display user profile images, initials, or icons.\n---\n\n\n### **Events:**\n - **dds-load** - Fired when the image loads successfully.\n- **dds-error** - Fired when the image fails to load.\n\n### **Slots:**\n - **icon** - The icon to display when variant is 'icon'.\n- **fallback** - Custom fallback content when image fails to load.\n\n### **CSS Properties:**\n - **--dds-avatar-border-radius** - The border radius of the avatar (default: 50%) _(default: undefined)_\n- **--dds-avatar-background-color** - The background color of the avatar (default: var(--dds-neutral-200)) _(default: undefined)_\n- **--dds-avatar-border-width** - The border width of the avatar (default: 0) _(default: undefined)_\n- **--dds-avatar-border-color** - The color of the avatar's border (default: transparent) _(default: undefined)_\n- **--dds-avatar-border-style** - The style of the avatar's border (default: solid) _(default: undefined)_\n- **--dds-avatar-transition** - The transition property for the avatar (default: all 0.2s ease-in-out) _(default: undefined)_\n- **--dds-avatar-text-color** - The text color for initials (default: var(--dds-text-neutral-strong)) _(default: undefined)_\n- **--dds-avatar-font-weight** - The font weight for initials (default: var(--dds-font-weight-bold)) _(default: undefined)_\n- **--dds-avatar-lg-size** - Size for large avatars (default: var(--dds-avatar-size-lg)) _(default: undefined)_\n- **--dds-avatar-md-size** - Size for medium avatars (default: var(--dds-avatar-size-md)) _(default: undefined)_\n- **--dds-avatar-sm-size** - Size for small avatars (default: var(--dds-avatar-size-sm)) _(default: undefined)_\n- **--dds-avatar-xs-size** - Size for extra small avatars (default: var(--dds-avatar-size-xs)) _(default: undefined)_\n- **--dds-avatar-xxs-size** - Size for extra extra small avatars (default: var(--dds-avatar-size-xxs)) _(default: undefined)_\n- **--dds-avatar-font-size-lg** - Font size for large avatars (default: var(--dds-font-2xl)) _(default: undefined)_\n- **--dds-avatar-font-size-md** - Font size for medium avatars (default: var(--dds-font-lg)) _(default: undefined)_\n- **--dds-avatar-font-size-sm** - Font size for small avatars (default: var(--dds-font-base)) _(default: undefined)_\n- **--dds-avatar-font-size-xs** - Font size for extra small avatars (default: var(--dds-font-sm)) _(default: undefined)_\n- **--dds-avatar-font-size-xxs** - Font size for extra extra small avatars (default: var(--dds-font-xs)) _(default: undefined)_\n- **--dds-avatar-hover-transform** - Transform applied on hover for interactive avatars (default: scale(1.05)) _(default: undefined)_\n- **--dds-avatar-active-transform** - Transform applied when active for interactive avatars (default: scale(0.95)) _(default: undefined)_\n- **--dds-avatar-focus-ring** - Focus ring style for interactive avatars (default: 0 0 0 2px var(--dds-focus-outer-ring)) _(default: undefined)_\n- **--dds-avatar-loading-background** - Background color when loading (default: var(--dds-neutral-100)) _(default: undefined)_\n- **--dds-avatar-error-background** - Background color when image fails to load (default: var(--dds-negative-100)) _(default: undefined)_\n- **--dds-avatar-error-color** - Text color when image fails to load (default: var(--dds-negative-600)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main avatar container.\n- **img** - The avatar image.\n- **initials** - The initials container.\n- **icon** - The icon container.\n- **fallback** - The fallback content container.\n- **loading** - The loading indicator.",
@@ -203,108 +337,100 @@
203
337
  }
204
338
  },
205
339
  {
206
- "name": "dap-ds-accordion",
207
- "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.",
340
+ "name": "dap-ds-avatar-group",
341
+ "description": "Avatar group component displays multiple avatars in an organized layout with overflow management.\n---\n\n\n### **Events:**\n - **dds-overflow-click** - Fired when the overflow indicator is clicked.\n\n### **Slots:**\n - _default_ - The avatars to display in the group.\n\n### **CSS Properties:**\n - **--dds-avatar-group-gap** - Gap between avatars in grid layout (default: 0) _(default: undefined)_\n- **--dds-avatar-group-overlap** - Overlap amount for stacked layout (default: -8px) _(default: undefined)_\n- **--dds-avatar-group-border-width** - Border width for avatars (default: var(--dds-border-width-base)) _(default: undefined)_\n- **--dds-avatar-group-border-color** - Border color for avatars (default: var(--dds-border-neutral-divider)) _(default: undefined)_\n- **--dds-avatar-group-overflow-bg** - Background color for overflow indicator (default: var(--dds-neutral-300)) _(default: undefined)_\n- **--dds-avatar-group-overflow-color** - Text color for overflow indicator (default: var(--dds-neutral-700)) _(default: undefined)_\n- **--dds-avatar-group-overflow-border** - Border for overflow indicator (default: var(--dds-avatar-group-border-width) solid var(--dds-avatar-group-border-color)) _(default: undefined)_\n- **--dds-avatar-group-size-lg** - Size for large avatars (default: var(--dds-spacing-2000)) _(default: undefined)_\n- **--dds-avatar-group-size-md** - Size for medium avatars (default: var(--dds-spacing-1600)) _(default: undefined)_\n- **--dds-avatar-group-size-sm** - Size for small avatars (default: var(--dds-spacing-1200)) _(default: undefined)_\n- **--dds-avatar-group-size-xs** - Size for extra small avatars (default: var(--dds-spacing-800)) _(default: undefined)_\n- **--dds-avatar-group-size-xxs** - Size for extra extra small avatars (default: var(--dds-spacing-400)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main container of the avatar group.\n- **avatars** - The container for the visible avatars.\n- **overflow** - The overflow indicator element.",
208
342
  "doc-url": "",
209
- "attributes": [],
210
- "slots": [
343
+ "attributes": [
211
344
  {
212
- "name": "default",
213
- "description": "The content of the accordion."
345
+ "name": "layout",
346
+ "description": "Layout type for the avatar group",
347
+ "value": { "type": "'stack' | 'grid'", "default": "'stack'" }
214
348
  },
215
349
  {
216
- "name": "heading",
217
- "description": "The heading of the accordion."
350
+ "name": "max",
351
+ "description": "Maximum number of avatars to show before showing overflow",
352
+ "value": { "type": "number", "default": "3" }
218
353
  },
219
354
  {
220
- "name": "icon-opened",
221
- "description": "The icon when the accordion is opened."
355
+ "name": "show-total",
356
+ "description": "Whether to show the total count in overflow indicator",
357
+ "value": { "type": "boolean", "default": "false" }
222
358
  },
223
359
  {
224
- "name": "icon-closed",
225
- "description": "The icon when the accordion is closed."
360
+ "name": "interactive-overflow",
361
+ "description": "Interactive overflow indicator",
362
+ "value": { "type": "boolean", "default": "false" }
363
+ },
364
+ {
365
+ "name": "label",
366
+ "description": "Accessible label for the avatar group",
367
+ "value": { "type": "string" }
368
+ },
369
+ {
370
+ "name": "overflow-label",
371
+ "description": "Accessible label for the overflow indicator",
372
+ "value": { "type": "string" }
226
373
  }
227
374
  ],
228
- "events": [
375
+ "slots": [
229
376
  {
230
- "name": "dds-opened",
231
- "type": "{ open: boolean, item: AccordionBaseElement }",
232
- "description": "Event fired when the accordion is opened."
233
- },
377
+ "name": "",
378
+ "description": "The avatars to display in the group."
379
+ }
380
+ ],
381
+ "events": [
234
382
  {
235
- "name": "dds-closed",
236
- "type": "{ open: boolean, item: AccordionBaseElement }",
237
- "description": "Event fired when the accordion is closed."
383
+ "name": "dds-overflow-click",
384
+ "description": "Fired when the overflow indicator is clicked."
238
385
  }
239
386
  ],
240
387
  "js": {
241
388
  "properties": [
242
389
  {
243
- "name": "size",
244
- "description": "The size of the accordion. Default is `sm`. Visual variants are sm and lg (other sizes map to sm).",
245
- "type": "'xxs' | 'xs' | 'sm' | 'md' | 'lg'"
246
- },
247
- {
248
- "name": "sizeMap",
249
- "description": "Responsive size map (e.g. \"md:lg\")",
250
- "type": "string"
251
- },
252
- {
253
- "name": "parentSized",
254
- "description": "When \"true\", size is taken from the parent card if present.",
255
- "type": "string"
256
- },
257
- {
258
- "name": "heading",
259
- "description": "The heading text of the accordion, this will be used as the aria label of the heading also if ariaLabel is not provided",
260
- "type": "string"
390
+ "name": "layout",
391
+ "description": "Layout type for the avatar group",
392
+ "type": "'stack' | 'grid'"
261
393
  },
262
394
  {
263
- "name": "headingLevel",
264
- "description": "The heading level of the accordion. Default is `4`.",
265
- "type": "1 | 2 | 3 | 4 | 5 | 6"
395
+ "name": "max",
396
+ "description": "Maximum number of avatars to show before showing overflow",
397
+ "type": "number"
266
398
  },
267
399
  {
268
- "name": "opened",
269
- "description": "Whether the accordion is opened. Default is `false`.",
400
+ "name": "showTotal",
401
+ "description": "Whether to show the total count in overflow indicator",
270
402
  "type": "boolean"
271
403
  },
272
404
  {
273
- "name": "iconLocation",
274
- "description": "The location of the icon. Default is `right`.",
275
- "type": "'left' | 'right'"
405
+ "name": "interactiveOverflow",
406
+ "description": "Interactive overflow indicator",
407
+ "type": "boolean"
276
408
  },
277
409
  {
278
- "name": "variant",
279
- "description": "The variant of the accordion.",
280
- "type": "'default' | 'collapsed' | 'clean' | 'clean-collapsed'"
410
+ "name": "label",
411
+ "description": "Accessible label for the avatar group",
412
+ "type": "string"
281
413
  },
282
414
  {
283
- "name": "lastItem",
284
- "description": "Whether the accordion is the last item.",
285
- "type": "boolean"
415
+ "name": "overflowLabel",
416
+ "description": "Accessible label for the overflow indicator",
417
+ "type": "string"
286
418
  },
287
419
  {
288
- "name": "disabled",
289
- "description": "Whether the accordion is disabled.",
290
- "type": "boolean"
420
+ "name": "size",
421
+ "description": "The size of avatars in the group. Default is `md`. See SizedMixin.",
422
+ "type": "'xxs' | 'xs' | 'sm' | 'md' | 'lg'"
291
423
  },
292
424
  {
293
- "name": "loading",
294
- "description": "Whether the accordion is in loading state.",
295
- "type": "boolean"
425
+ "name": "sizeMap",
426
+ "description": "Responsive size map (e.g. \"md:lg\"); see SizedMixin.",
427
+ "type": "string"
296
428
  }
297
429
  ],
298
430
  "events": [
299
431
  {
300
- "name": "dds-opened",
301
- "type": "{ open: boolean, item: AccordionBaseElement }",
302
- "description": "Event fired when the accordion is opened."
303
- },
304
- {
305
- "name": "dds-closed",
306
- "type": "{ open: boolean, item: AccordionBaseElement }",
307
- "description": "Event fired when the accordion is closed."
432
+ "name": "dds-overflow-click",
433
+ "description": "Fired when the overflow indicator is clicked."
308
434
  }
309
435
  ]
310
436
  }
@@ -497,132 +623,6 @@
497
623
  "events": []
498
624
  }
499
625
  },
500
- {
501
- "name": "dap-ds-anchor-heading",
502
- "description": "Anchor heading is a heading with an anchor link.\n---\n\n\n### **CSS Properties:**\n - **--dds-anchor-link-color** - The color of the anchor link (default: var(--dds-color-primary)) _(default: undefined)_\n- **--dds-anchor-link-opacity** - The opacity of the anchor link when not hovered (default: 0) _(default: undefined)_\n- **--dds-anchor-link-hover-opacity** - The opacity of the anchor link when hovered (default: 1) _(default: undefined)_\n- **--dds-anchor-link-transition** - The transition property for the anchor link opacity (default: opacity 0.2s ease-in-out) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main anchor heading container.\n- **link** - The link of the anchor heading. dap-ds-link element.\n- **link-base** - The base of the link part.\n- **text** - The text of the anchor heading.",
503
- "doc-url": "",
504
- "attributes": [
505
- {
506
- "name": "variant",
507
- "description": "The variant of the heading. Default is `h2`. Can be `h1`, `h2`, `h3`, `h4`, `h5`, or `h6`.",
508
- "value": { "type": "HeadingVariant" }
509
- },
510
- {
511
- "name": "label",
512
- "description": "The label of the heading.",
513
- "value": { "type": "string" }
514
- }
515
- ],
516
- "events": [],
517
- "js": {
518
- "properties": [
519
- { "name": "variant", "type": "HeadingVariant" },
520
- { "name": "label", "type": "string" },
521
- { "name": "elementId" },
522
- { "name": "anchorTitle" }
523
- ],
524
- "events": []
525
- }
526
- },
527
- {
528
- "name": "dap-ds-avatar-group",
529
- "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.",
530
- "doc-url": "",
531
- "attributes": [
532
- {
533
- "name": "layout",
534
- "description": "Layout type for the avatar group",
535
- "value": { "type": "'stack' | 'grid'", "default": "'stack'" }
536
- },
537
- {
538
- "name": "max",
539
- "description": "Maximum number of avatars to show before showing overflow",
540
- "value": { "type": "number", "default": "3" }
541
- },
542
- {
543
- "name": "show-total",
544
- "description": "Whether to show the total count in overflow indicator",
545
- "value": { "type": "boolean", "default": "false" }
546
- },
547
- {
548
- "name": "interactive-overflow",
549
- "description": "Interactive overflow indicator",
550
- "value": { "type": "boolean", "default": "false" }
551
- },
552
- {
553
- "name": "label",
554
- "description": "Accessible label for the avatar group",
555
- "value": { "type": "string" }
556
- },
557
- {
558
- "name": "overflow-label",
559
- "description": "Accessible label for the overflow indicator",
560
- "value": { "type": "string" }
561
- }
562
- ],
563
- "slots": [
564
- {
565
- "name": "",
566
- "description": "The avatars to display in the group."
567
- }
568
- ],
569
- "events": [
570
- {
571
- "name": "dds-overflow-click",
572
- "description": "Fired when the overflow indicator is clicked."
573
- }
574
- ],
575
- "js": {
576
- "properties": [
577
- {
578
- "name": "layout",
579
- "description": "Layout type for the avatar group",
580
- "type": "'stack' | 'grid'"
581
- },
582
- {
583
- "name": "max",
584
- "description": "Maximum number of avatars to show before showing overflow",
585
- "type": "number"
586
- },
587
- {
588
- "name": "showTotal",
589
- "description": "Whether to show the total count in overflow indicator",
590
- "type": "boolean"
591
- },
592
- {
593
- "name": "interactiveOverflow",
594
- "description": "Interactive overflow indicator",
595
- "type": "boolean"
596
- },
597
- {
598
- "name": "label",
599
- "description": "Accessible label for the avatar group",
600
- "type": "string"
601
- },
602
- {
603
- "name": "overflowLabel",
604
- "description": "Accessible label for the overflow indicator",
605
- "type": "string"
606
- },
607
- {
608
- "name": "size",
609
- "description": "The size of avatars in the group. Default is `md`. See SizedMixin.",
610
- "type": "'xxs' | 'xs' | 'sm' | 'md' | 'lg'"
611
- },
612
- {
613
- "name": "sizeMap",
614
- "description": "Responsive size map (e.g. \"md:lg\"); see SizedMixin.",
615
- "type": "string"
616
- }
617
- ],
618
- "events": [
619
- {
620
- "name": "dds-overflow-click",
621
- "description": "Fired when the overflow indicator is clicked."
622
- }
623
- ]
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,268 +700,89 @@
700
700
  }
701
701
  },
702
702
  {
703
- "name": "dap-ds-button",
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-calendar-cell",
704
+ "description": "Calendar cell represents a single cell in the calendar.\n---\n\n\n### **Slots:**\n - _default_ - The content of the calendar cell.\n\n### **CSS Properties:**\n - **--dds-calendar-cell-display** - The display property of the calendar cell host (default: flex) _(default: undefined)_\n- **--dds-calendar-cell-position** - The position property of the calendar cell host (default: relative) _(default: undefined)_\n- **--dds-calendar-cell-border-radius** - The border radius of the calendar cell (default: var(--dds-radius-rounded)) _(default: undefined)_\n- **--dds-calendar-cell-min-width** - The minimum width of the calendar cell (default: var(--dds-spacing-1000)) _(default: undefined)_\n- **--dds-calendar-cell-height** - The height of the calendar cell (default: var(--dds-spacing-1000)) _(default: undefined)_\n- **--dds-calendar-cell-min-height** - The minimum height of the calendar cell (default: var(--dds-spacing-1000)) _(default: undefined)_\n- **--dds-calendar-cell-color** - The text color of the calendar cell (default: var(--dds-button-subtle-text-neutral-enabled)) _(default: undefined)_\n- **--dds-calendar-cell-font-size** - The font size of the calendar cell (default: var(--dds-font-sm)) _(default: undefined)_\n- **--dds-calendar-cell-font-weight** - The font weight of the calendar cell (default: var(--dds-font-weight-medium)) _(default: undefined)_\n- **--dds-calendar-cell-text-align** - The text alignment of the calendar cell (default: center) _(default: undefined)_\n- **--dds-calendar-cell-cursor** - The cursor style of the calendar cell (default: pointer) _(default: undefined)_\n- **--dds-calendar-cell-background-hover** - The background color of the calendar cell on hover (default: var(--dds-background-neutral-medium)) _(default: undefined)_\n- **--dds-calendar-cell-background-active** - The background color of the calendar cell when active (default: var(--dds-background-neutral-strong)) _(default: undefined)_\n- **--dds-calendar-cell-selected-background** - The background color of the selected calendar cell (default: var(--dds-button-primary-background-enabled)) _(default: undefined)_\n- **--dds-calendar-cell-selected-color** - The text color of the selected calendar cell (default: var(--dds-button-primary-text-enabled)) _(default: undefined)_\n- **--dds-calendar-cell-selected-background-hover** - The background color of the selected calendar cell on hover (default: var(--dds-button-primary-background-hover)) _(default: undefined)_\n- **--dds-calendar-cell-selected-background-pressed** - The background color of the selected calendar cell when pressed (default: var(--dds-button-primary-background-pressed)) _(default: undefined)_\n- **--dds-calendar-cell-selected-today-mark-background** - The background color of the today mark in selected calendar cell (default: var(--dds-text-neutral-on-inverted)) _(default: undefined)_\n- **--dds-calendar-cell-disabled-color** - The text color of the disabled calendar cell (default: var(--dds-text-neutral-disabled)) _(default: undefined)_\n- **--dds-calendar-cell-disabled-cursor** - The cursor style of the disabled calendar cell (default: not-allowed) _(default: undefined)_\n- **--dds-calendar-cell-out-of-range-color** - The text color of the out-of-range calendar cell (default: var(--dds-text-neutral-placeholder)) _(default: undefined)_\n- **--dds-calendar-cell-today-font-weight** - The font weight of the today calendar cell (default: var(--dds-font-weight-bold)) _(default: undefined)_\n- **--dds-calendar-cell-header-background** - The background color of the header calendar cell (default: transparent) _(default: undefined)_\n- **--dds-calendar-cell-header-color** - The text color of the header calendar cell (default: var(--dds-text-neutral-base)) _(default: undefined)_\n- **--dds-calendar-cell-header-text-transform** - The text transform of the header calendar cell (default: capitalize) _(default: undefined)_\n- **--dds-calendar-cell-header-cursor** - The cursor style of the header calendar cell (default: default) _(default: undefined)_\n- **--dds-calendar-cell-in-range-color** - The text color of the in-range calendar cell (default: var(--dds-button-primary-text-enabled)) _(default: undefined)_\n- **--dds-calendar-cell-in-range-background-hover** - The background color of the in-range calendar cell on hover (default: var(--dds-button-primary-background-hover)) _(default: undefined)_\n- **--dds-calendar-cell-in-range-background-pressed** - The background color of the in-range calendar cell when pressed (default: var(--dds-button-primary-background-pressed)) _(default: undefined)_\n- **--dds-calendar-cell-range-background** - The background color of the range start/end calendar cell (default: var(--dds-button-primary-background-enabled)) _(default: undefined)_\n- **--dds-calendar-cell-range-color** - The text color of the range start/end calendar cell (default: var(--dds-button-primary-text-enabled)) _(default: undefined)_\n- **--dds-calendar-cell-range-today-mark-background** - The background color of the today mark in range start/end calendar cell (default: var(--dds-text-neutral-on-inverted)) _(default: undefined)_\n- **--dds-calendar-cell-today-mark-bottom** - The bottom position of the today mark (default: var(--dds-spacing-100)) _(default: undefined)_\n- **--dds-calendar-cell-today-mark-width** - The width of the today mark (default: 5px) _(default: undefined)_\n- **--dds-calendar-cell-today-mark-height** - The height of the today mark (default: 5px) _(default: undefined)_\n- **--dds-calendar-cell-today-mark-stroke** - The stroke color of the today mark (default: var(--dds-border-neutral-transparent)) _(default: undefined)_\n- **--dds-calendar-cell-today-mark-background** - The background color of the today mark (default: var(--dds-background-neutral-medium-inverted)) _(default: undefined)_\n- **--dds-calendar-cell-today-mark-fill** - The fill color of the today mark (default: var(--dds-background-neutral-medium-inverted)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main calendar cell container.\n- **today-mark** - The today mark of the calendar cell.",
705
705
  "doc-url": "",
706
706
  "attributes": [
707
707
  {
708
- "name": "variant",
709
- "description": "The visual style variant of the button",
710
- "value": {
711
- "type": "'primary' | 'outline' | 'subtle' | 'subtle-neutral' | 'subtle-quiet' | 'subtle-quiet-inverted' | 'clean' | 'primary-inverted' | 'outline-inverted' | 'subtle-inverted' | 'clean-inverted' | 'subtle-menu' | 'subtle-menu-item'",
712
- "default": "'primary'"
713
- }
714
- },
715
- {
716
- "name": "size",
717
- "description": "The size of the button affecting padding and font size",
718
- "value": {
719
- "type": "'lg' | 'md' | 'sm' | 'xs'",
720
- "default": "'md'"
721
- }
722
- },
723
- {
724
- "name": "loading",
725
- "description": "Whether the button is in loading state, showing a spinner and disabling interaction",
708
+ "name": "selected",
709
+ "description": "Whether the calendar cell is selected.",
726
710
  "value": { "type": "boolean", "default": "false" }
727
711
  },
728
712
  {
729
- "name": "danger",
730
- "description": "Whether the button represents a destructive action (applies danger styling)",
713
+ "name": "disabledDay",
714
+ "description": "Whether the calendar cell is disabled.",
731
715
  "value": { "type": "boolean", "default": "false" }
732
716
  },
733
717
  {
734
- "name": "shape",
735
- "description": "The shape of the button - use 'circle' for icon-only buttons",
736
- "value": { "type": "'button' | 'circle'", "default": "'button'" }
737
- },
738
- {
739
- "name": "htmlType",
740
- "description": "The HTML type attribute for form interaction",
741
- "value": {
742
- "type": "'button' | 'submit' | 'reset'",
743
- "default": "'button'"
744
- }
718
+ "name": "today",
719
+ "description": "Whether the calendar cell is today.",
720
+ "value": { "type": "boolean", "default": "false" }
745
721
  },
746
722
  {
747
- "name": "href",
748
- "description": "The URL to navigate to. When present, the button renders as an anchor element",
749
- "value": { "type": "string | undefined" }
723
+ "name": "outOfRange",
724
+ "description": "Whether the calendar cell is out of range.",
725
+ "value": { "type": "boolean", "default": "false" }
750
726
  },
751
727
  {
752
- "name": "target",
753
- "description": "The target attribute for link navigation",
754
- "value": {
755
- "type": "'_blank' | '_self' | '_parent' | '_top'",
756
- "default": "'_self'"
757
- }
728
+ "name": "header",
729
+ "description": "Whether the calendar cell is a date header.",
730
+ "value": { "type": "boolean", "default": "false" }
758
731
  },
759
732
  {
760
- "name": "rel",
761
- "description": "The rel attribute for link security and behavior",
762
- "value": {
763
- "type": "string | undefined",
764
- "default": "'noreferrer noopener'"
765
- }
733
+ "name": "focused",
734
+ "description": "Whether the calendar cell is focused.",
735
+ "value": { "type": "boolean", "default": "false" }
766
736
  },
767
737
  {
768
- "name": "loadingTimeout",
769
- "description": "Controls loading timeout in milliseconds",
770
- "value": { "type": "number", "default": "0" }
738
+ "name": "rangestart",
739
+ "description": "Whether the calendar cell is the start of a range.",
740
+ "value": { "type": "boolean", "default": "false" }
771
741
  },
772
742
  {
773
- "name": "active",
774
- "description": "Whether the button is active",
743
+ "name": "rangeend",
744
+ "description": "Whether the calendar cell is the end of a range.",
775
745
  "value": { "type": "boolean", "default": "false" }
776
746
  },
777
747
  {
778
- "name": "targetBlankText",
779
- "description": "The text for the target blank link, applicable when target is _blank. PRO TIP: Use parenthesis to wrap the text",
780
- "value": { "type": "string" }
748
+ "name": "inrange",
749
+ "description": "Whether the calendar cell is in the middle of a range.",
750
+ "value": { "type": "boolean", "default": "false" }
781
751
  },
782
752
  {
783
- "name": "forceRole",
784
- "description": "Overrides the ARIA role on the internal native button/anchor element. Use when the host's semantics must differ from the native element (e.g. role=\"link\" on a button acting as a SPA navigation trigger).",
785
- "value": { "type": "string | undefined" }
753
+ "name": "locale",
754
+ "description": "The locale of the calendar cell.",
755
+ "value": {
756
+ "type": "'hu' | 'en' | 'de'",
757
+ "default": "dayjs.locale()"
758
+ }
786
759
  }
787
760
  ],
788
761
  "slots": [
789
- {
790
- "name": "",
791
- "description": "The content of the button. Can contain text, icons, or other elements."
792
- }
793
- ],
794
- "events": [
795
- {
796
- "name": "dds-loading-timeout",
797
- "description": "Emitted when the loading timeout is reached"
798
- }
762
+ { "name": "", "description": "The content of the calendar cell." }
799
763
  ],
764
+ "events": [],
800
765
  "js": {
801
766
  "properties": [
802
767
  {
803
- "name": "variant",
804
- "description": "The visual style variant of the button",
805
- "type": "'primary' | 'outline' | 'subtle' | 'subtle-neutral' | 'subtle-quiet' | 'subtle-quiet-inverted' | 'clean' | 'primary-inverted' | 'outline-inverted' | 'subtle-inverted' | 'clean-inverted' | 'subtle-menu' | 'subtle-menu-item'"
806
- },
807
- {
808
- "name": "size",
809
- "description": "The size of the button affecting padding and font size",
810
- "type": "'lg' | 'md' | 'sm' | 'xs'"
768
+ "name": "value",
769
+ "description": "The value of the calendar cell.",
770
+ "type": "Dayjs"
811
771
  },
812
772
  {
813
- "name": "loading",
814
- "description": "Whether the button is in loading state, showing a spinner and disabling interaction",
773
+ "name": "selected",
774
+ "description": "Whether the calendar cell is selected.",
815
775
  "type": "boolean"
816
776
  },
817
777
  {
818
- "name": "danger",
819
- "description": "Whether the button represents a destructive action (applies danger styling)",
778
+ "name": "disabledDay",
779
+ "description": "Whether the calendar cell is disabled.",
820
780
  "type": "boolean"
821
781
  },
822
782
  {
823
- "name": "shape",
824
- "description": "The shape of the button - use 'circle' for icon-only buttons",
825
- "type": "'button' | 'circle'"
826
- },
827
- {
828
- "name": "htmlType",
829
- "description": "The HTML type attribute for form interaction",
830
- "type": "'button' | 'submit' | 'reset'"
831
- },
832
- {
833
- "name": "href",
834
- "description": "The URL to navigate to. When present, the button renders as an anchor element",
835
- "type": "string | undefined"
836
- },
837
- {
838
- "name": "target",
839
- "description": "The target attribute for link navigation",
840
- "type": "'_blank' | '_self' | '_parent' | '_top'"
841
- },
842
- {
843
- "name": "rel",
844
- "description": "The rel attribute for link security and behavior",
845
- "type": "string | undefined"
846
- },
847
- {
848
- "name": "loadingTimeout",
849
- "description": "Controls loading timeout in milliseconds",
850
- "type": "number"
851
- },
852
- {
853
- "name": "active",
854
- "description": "Whether the button is active",
855
- "type": "boolean"
856
- },
857
- {
858
- "name": "targetBlankText",
859
- "description": "The text for the target blank link, applicable when target is _blank. PRO TIP: Use parenthesis to wrap the text",
860
- "type": "string"
861
- },
862
- {
863
- "name": "forceRole",
864
- "description": "Overrides the ARIA role on the internal native button/anchor element. Use when the host's semantics must differ from the native element (e.g. role=\"link\" on a button acting as a SPA navigation trigger).",
865
- "type": "string | undefined"
866
- },
867
- {
868
- "name": "sizeMap",
869
- "description": "The size map of the button.",
870
- "type": "string"
871
- }
872
- ],
873
- "events": [
874
- {
875
- "name": "dds-loading-timeout",
876
- "description": "Emitted when the loading timeout is reached"
877
- }
878
- ]
879
- }
880
- },
881
- {
882
- "name": "dap-ds-calendar-cell",
883
- "description": "Calendar cell represents a single cell in the calendar.\n---\n\n\n### **Slots:**\n - _default_ - The content of the calendar cell.\n\n### **CSS Properties:**\n - **--dds-calendar-cell-display** - The display property of the calendar cell host (default: flex) _(default: undefined)_\n- **--dds-calendar-cell-position** - The position property of the calendar cell host (default: relative) _(default: undefined)_\n- **--dds-calendar-cell-border-radius** - The border radius of the calendar cell (default: var(--dds-radius-rounded)) _(default: undefined)_\n- **--dds-calendar-cell-min-width** - The minimum width of the calendar cell (default: var(--dds-spacing-1000)) _(default: undefined)_\n- **--dds-calendar-cell-height** - The height of the calendar cell (default: var(--dds-spacing-1000)) _(default: undefined)_\n- **--dds-calendar-cell-min-height** - The minimum height of the calendar cell (default: var(--dds-spacing-1000)) _(default: undefined)_\n- **--dds-calendar-cell-color** - The text color of the calendar cell (default: var(--dds-button-subtle-text-neutral-enabled)) _(default: undefined)_\n- **--dds-calendar-cell-font-size** - The font size of the calendar cell (default: var(--dds-font-sm)) _(default: undefined)_\n- **--dds-calendar-cell-font-weight** - The font weight of the calendar cell (default: var(--dds-font-weight-medium)) _(default: undefined)_\n- **--dds-calendar-cell-text-align** - The text alignment of the calendar cell (default: center) _(default: undefined)_\n- **--dds-calendar-cell-cursor** - The cursor style of the calendar cell (default: pointer) _(default: undefined)_\n- **--dds-calendar-cell-background-hover** - The background color of the calendar cell on hover (default: var(--dds-background-neutral-medium)) _(default: undefined)_\n- **--dds-calendar-cell-background-active** - The background color of the calendar cell when active (default: var(--dds-background-neutral-strong)) _(default: undefined)_\n- **--dds-calendar-cell-selected-background** - The background color of the selected calendar cell (default: var(--dds-button-primary-background-enabled)) _(default: undefined)_\n- **--dds-calendar-cell-selected-color** - The text color of the selected calendar cell (default: var(--dds-button-primary-text-enabled)) _(default: undefined)_\n- **--dds-calendar-cell-selected-background-hover** - The background color of the selected calendar cell on hover (default: var(--dds-button-primary-background-hover)) _(default: undefined)_\n- **--dds-calendar-cell-selected-background-pressed** - The background color of the selected calendar cell when pressed (default: var(--dds-button-primary-background-pressed)) _(default: undefined)_\n- **--dds-calendar-cell-selected-today-mark-background** - The background color of the today mark in selected calendar cell (default: var(--dds-text-neutral-on-inverted)) _(default: undefined)_\n- **--dds-calendar-cell-disabled-color** - The text color of the disabled calendar cell (default: var(--dds-text-neutral-disabled)) _(default: undefined)_\n- **--dds-calendar-cell-disabled-cursor** - The cursor style of the disabled calendar cell (default: not-allowed) _(default: undefined)_\n- **--dds-calendar-cell-out-of-range-color** - The text color of the out-of-range calendar cell (default: var(--dds-text-neutral-placeholder)) _(default: undefined)_\n- **--dds-calendar-cell-today-font-weight** - The font weight of the today calendar cell (default: var(--dds-font-weight-bold)) _(default: undefined)_\n- **--dds-calendar-cell-header-background** - The background color of the header calendar cell (default: transparent) _(default: undefined)_\n- **--dds-calendar-cell-header-color** - The text color of the header calendar cell (default: var(--dds-text-neutral-base)) _(default: undefined)_\n- **--dds-calendar-cell-header-text-transform** - The text transform of the header calendar cell (default: capitalize) _(default: undefined)_\n- **--dds-calendar-cell-header-cursor** - The cursor style of the header calendar cell (default: default) _(default: undefined)_\n- **--dds-calendar-cell-in-range-color** - The text color of the in-range calendar cell (default: var(--dds-button-primary-text-enabled)) _(default: undefined)_\n- **--dds-calendar-cell-in-range-background-hover** - The background color of the in-range calendar cell on hover (default: var(--dds-button-primary-background-hover)) _(default: undefined)_\n- **--dds-calendar-cell-in-range-background-pressed** - The background color of the in-range calendar cell when pressed (default: var(--dds-button-primary-background-pressed)) _(default: undefined)_\n- **--dds-calendar-cell-range-background** - The background color of the range start/end calendar cell (default: var(--dds-button-primary-background-enabled)) _(default: undefined)_\n- **--dds-calendar-cell-range-color** - The text color of the range start/end calendar cell (default: var(--dds-button-primary-text-enabled)) _(default: undefined)_\n- **--dds-calendar-cell-range-today-mark-background** - The background color of the today mark in range start/end calendar cell (default: var(--dds-text-neutral-on-inverted)) _(default: undefined)_\n- **--dds-calendar-cell-today-mark-bottom** - The bottom position of the today mark (default: var(--dds-spacing-100)) _(default: undefined)_\n- **--dds-calendar-cell-today-mark-width** - The width of the today mark (default: 5px) _(default: undefined)_\n- **--dds-calendar-cell-today-mark-height** - The height of the today mark (default: 5px) _(default: undefined)_\n- **--dds-calendar-cell-today-mark-stroke** - The stroke color of the today mark (default: var(--dds-border-neutral-transparent)) _(default: undefined)_\n- **--dds-calendar-cell-today-mark-background** - The background color of the today mark (default: var(--dds-background-neutral-medium-inverted)) _(default: undefined)_\n- **--dds-calendar-cell-today-mark-fill** - The fill color of the today mark (default: var(--dds-background-neutral-medium-inverted)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main calendar cell container.\n- **today-mark** - The today mark of the calendar cell.",
884
- "doc-url": "",
885
- "attributes": [
886
- {
887
- "name": "selected",
888
- "description": "Whether the calendar cell is selected.",
889
- "value": { "type": "boolean", "default": "false" }
890
- },
891
- {
892
- "name": "disabledDay",
893
- "description": "Whether the calendar cell is disabled.",
894
- "value": { "type": "boolean", "default": "false" }
895
- },
896
- {
897
- "name": "today",
898
- "description": "Whether the calendar cell is today.",
899
- "value": { "type": "boolean", "default": "false" }
900
- },
901
- {
902
- "name": "outOfRange",
903
- "description": "Whether the calendar cell is out of range.",
904
- "value": { "type": "boolean", "default": "false" }
905
- },
906
- {
907
- "name": "header",
908
- "description": "Whether the calendar cell is a date header.",
909
- "value": { "type": "boolean", "default": "false" }
910
- },
911
- {
912
- "name": "focused",
913
- "description": "Whether the calendar cell is focused.",
914
- "value": { "type": "boolean", "default": "false" }
915
- },
916
- {
917
- "name": "rangestart",
918
- "description": "Whether the calendar cell is the start of a range.",
919
- "value": { "type": "boolean", "default": "false" }
920
- },
921
- {
922
- "name": "rangeend",
923
- "description": "Whether the calendar cell is the end of a range.",
924
- "value": { "type": "boolean", "default": "false" }
925
- },
926
- {
927
- "name": "inrange",
928
- "description": "Whether the calendar cell is in the middle of a range.",
929
- "value": { "type": "boolean", "default": "false" }
930
- },
931
- {
932
- "name": "locale",
933
- "description": "The locale of the calendar cell.",
934
- "value": {
935
- "type": "'hu' | 'en' | 'de'",
936
- "default": "dayjs.locale()"
937
- }
938
- }
939
- ],
940
- "slots": [
941
- { "name": "", "description": "The content of the calendar cell." }
942
- ],
943
- "events": [],
944
- "js": {
945
- "properties": [
946
- {
947
- "name": "value",
948
- "description": "The value of the calendar cell.",
949
- "type": "Dayjs"
950
- },
951
- {
952
- "name": "selected",
953
- "description": "Whether the calendar cell is selected.",
954
- "type": "boolean"
955
- },
956
- {
957
- "name": "disabledDay",
958
- "description": "Whether the calendar cell is disabled.",
959
- "type": "boolean"
960
- },
961
- {
962
- "name": "today",
963
- "description": "Whether the calendar cell is today.",
964
- "type": "boolean"
783
+ "name": "today",
784
+ "description": "Whether the calendar cell is today.",
785
+ "type": "boolean"
965
786
  },
966
787
  {
967
788
  "name": "outOfRange",
@@ -1228,263 +1049,68 @@
1228
1049
  }
1229
1050
  },
1230
1051
  {
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.",
1052
+ "name": "dap-ds-card-actions",
1053
+ "description": "A card actions is a container for actions in a card.\n---\n\n\n### **Slots:**\n - _default_ - The content of the card actions.\n\n### **CSS Properties:**\n - **--dds-card-actions-gap** - The gap between items in the card actions. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-card-actions-padding-lg** - The padding for large size card actions. (default: var(--dds-spacing-600)) _(default: undefined)_\n- **--dds-card-actions-padding-md** - The padding for medium size card actions. (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-card-actions-padding-sm** - The padding for small size card actions. (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-card-actions-margin-lg** - The margin for large size card actions spacing. (default: var(--dds-spacing-600)) _(default: undefined)_\n- **--dds-card-actions-margin-md** - The margin for medium size card actions spacing. (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-card-actions-margin-sm** - The margin for small size card actions spacing. (default: var(--dds-spacing-400)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main card actions container.",
1054
+ "doc-url": "",
1055
+ "attributes": [],
1056
+ "slots": [
1057
+ { "name": "", "description": "The content of the card actions." }
1058
+ ],
1059
+ "events": [],
1060
+ "js": {
1061
+ "properties": [
1062
+ {
1063
+ "name": "spacing",
1064
+ "description": "The spacing of the card actions. This adds a margin to the card actions. Default is `bottom`.",
1065
+ "type": "'top' | 'bottom' | 'both' | 'none'"
1066
+ },
1067
+ { "name": "parentSized", "type": "string" },
1068
+ {
1069
+ "name": "size",
1070
+ "description": "The size of the card actions. Default is `sm`.",
1071
+ "type": "'sm' | 'md' | 'lg'"
1072
+ },
1073
+ {
1074
+ "name": "sizeMap",
1075
+ "description": "Responsive size map (e.g. \"md:lg\").",
1076
+ "type": "string"
1077
+ }
1078
+ ],
1079
+ "events": []
1080
+ }
1081
+ },
1082
+ {
1083
+ "name": "dap-ds-card-content",
1084
+ "description": "A card content is a container for content in a card.\n---\n\n\n### **Slots:**\n - _default_ - The content of the card-content.\n\n### **CSS Properties:**\n - **--dds-card-content-padding** - The padding of the card content. (default: 0) _(default: undefined)_\n- **--dds-card-content-margin** - The margin of the card content. (default: 0) _(default: undefined)_\n- **--dds-card-content-font-size** - The font size of the card content. (default: var(--dds-font-base)) _(default: undefined)_\n- **--dds-card-content-line-height** - The line height of the card content. (default: var(--dds-font-line-height-xlarge)) _(default: undefined)_\n- **--dds-card-content-spacing-lg** - The large spacing value. (default: var(--dds-spacing-600)) _(default: undefined)_\n- **--dds-card-content-spacing-md** - The medium spacing value. (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-card-content-spacing-sm** - The small spacing value. (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-card-content-spacing-top** - The top spacing value. (default: 0) _(default: undefined)_\n- **--dds-card-content-spacing-bottom** - The bottom spacing value. (default: 0) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main card content container.",
1233
1085
  "doc-url": "",
1234
1086
  "attributes": [
1235
1087
  {
1236
- "name": "indeterminate",
1237
- "description": "Whether the checkbox is indeterminate",
1238
- "value": { "type": "boolean", "default": "false" }
1239
- },
1240
- {
1241
- "name": "preventDefault",
1242
- "description": "Whether the checkbox should prevent the default action",
1243
- "value": { "type": "boolean", "default": "false" }
1244
- },
1245
- {
1246
- "name": "border",
1247
- "description": "This sets up border around the checkbox, when true.",
1248
- "value": { "type": "boolean", "default": "false" }
1249
- },
1250
- {
1251
- "name": "readonly",
1252
- "description": "Whether the checkbox is readonly (cannot be changed but value is submitted with form).",
1253
- "value": { "type": "boolean", "default": "false" }
1254
- },
1255
- {
1256
- "name": "type",
1257
- "description": "The type of the checkbox",
1258
- "value": {
1259
- "type": "'normal' | 'background'",
1260
- "default": "'normal'"
1261
- }
1088
+ "name": "renderAs",
1089
+ "description": "The base rendered root tag of the card content.",
1090
+ "value": { "type": "string", "default": "'div'" }
1262
1091
  }
1263
1092
  ],
1264
- "events": [
1265
- {
1266
- "name": "dds-change",
1267
- "type": "{ checked: boolean, indeterminate: boolean, value: string, disabled: boolean, readonly: boolean, type: 'checkbox' }",
1268
- "description": "Fired when the checkbox is checked or unchecked."
1269
- },
1270
- {
1271
- "name": "dds-blur",
1272
- "type": "{ void }",
1273
- "description": "Emitted when the checkbox loses focus."
1274
- },
1275
- {
1276
- "name": "dds-focus",
1277
- "type": "{ void }",
1278
- "description": "Emitted when the checkbox gains focus."
1279
- },
1280
- {
1281
- "name": "dds-input",
1282
- "type": "{ checked: boolean, indeterminate: boolean, value: string, disabled: boolean, readonly: boolean }",
1283
- "description": "Emitted when the checkbox receives input."
1284
- }
1093
+ "slots": [
1094
+ { "name": "", "description": "The content of the card-content." }
1285
1095
  ],
1096
+ "events": [],
1286
1097
  "js": {
1287
1098
  "properties": [
1288
1099
  {
1289
- "name": "indeterminate",
1290
- "description": "Whether the checkbox is indeterminate",
1291
- "type": "boolean"
1292
- },
1293
- {
1294
- "name": "preventDefault",
1295
- "description": "Whether the checkbox should prevent the default action",
1296
- "type": "boolean"
1100
+ "name": "renderAs",
1101
+ "description": "The base rendered root tag of the card content.",
1102
+ "type": "string"
1297
1103
  },
1298
1104
  {
1299
- "name": "border",
1300
- "description": "This sets up border around the checkbox, when true.",
1301
- "type": "boolean"
1105
+ "name": "spacing",
1106
+ "description": "The spacing of the card content. This adds a margin to the card subtitle. Default is `bottom`.",
1107
+ "type": "'top' | 'bottom' | 'both' | 'none'"
1302
1108
  },
1109
+ { "name": "parentSized", "type": "string" },
1303
1110
  {
1304
- "name": "readonly",
1305
- "description": "Whether the checkbox is readonly (cannot be changed but value is submitted with form).",
1306
- "type": "boolean"
1307
- },
1308
- {
1309
- "name": "type",
1310
- "description": "The type of the checkbox",
1311
- "type": "'normal' | 'background'"
1312
- },
1313
- { "name": "focusElement", "type": "HTMLInputElement" },
1314
- { "name": "feedbackId" },
1315
- {
1316
- "name": "name",
1317
- "description": "The name of the checkbox.",
1318
- "type": "string"
1319
- },
1320
- {
1321
- "name": "value",
1322
- "description": "The value of the checkbox.",
1323
- "type": "string"
1324
- },
1325
- {
1326
- "name": "checked",
1327
- "description": "Whether the checkbox is checked.",
1328
- "type": "boolean"
1329
- },
1330
- {
1331
- "name": "label",
1332
- "description": "The label of the checkbox.",
1333
- "type": "string"
1334
- },
1335
- {
1336
- "name": "description",
1337
- "description": "The description of the checkbox.",
1338
- "type": "string"
1339
- },
1340
- {
1341
- "name": "disabled",
1342
- "description": "Whether the checkbox is disabled.",
1343
- "type": "boolean"
1344
- },
1345
- {
1346
- "name": "required",
1347
- "description": "Whether the checkbox is required.",
1348
- "type": "boolean"
1349
- },
1350
- {
1351
- "name": "size",
1352
- "description": "The size of the checkbox. Default is 'sm'.",
1353
- "type": "'xs' | 'sm' | 'lg'"
1354
- },
1355
- {
1356
- "name": "sizeMap",
1357
- "description": "Responsive size map (e.g. \"md:lg\").",
1358
- "type": "string"
1359
- },
1360
- {
1361
- "name": "labelPlacement",
1362
- "description": "The placement of the label.",
1363
- "type": "'left' | 'right'"
1364
- },
1365
- {
1366
- "name": "descriptionPlacement",
1367
- "description": "The placement of the description.",
1368
- "type": "'top' | 'bottom'"
1369
- },
1370
- {
1371
- "name": "subtle",
1372
- "description": "The weight of the label.",
1373
- "type": "boolean"
1374
- },
1375
- {
1376
- "name": "feedback",
1377
- "description": "The feedback of the checkbox.",
1378
- "type": "string"
1379
- },
1380
- {
1381
- "name": "feedbackType",
1382
- "description": "The feedback type of the checkbox.",
1383
- "type": "'negative' | 'positive' | 'warning'"
1384
- },
1385
- {
1386
- "name": "invalid",
1387
- "description": "The invalid state of the checkbox.",
1388
- "type": "boolean"
1389
- },
1390
- {
1391
- "name": "optional",
1392
- "description": "The optional state of the checkbox.",
1393
- "type": "boolean"
1394
- },
1395
- {
1396
- "name": "optionalLabel",
1397
- "description": "The optional label of the checkbox.",
1398
- "type": "string"
1399
- }
1400
- ],
1401
- "events": [
1402
- {
1403
- "name": "dds-change",
1404
- "type": "{ checked: boolean, indeterminate: boolean, value: string, disabled: boolean, readonly: boolean, type: 'checkbox' }",
1405
- "description": "Fired when the checkbox is checked or unchecked."
1406
- },
1407
- {
1408
- "name": "dds-blur",
1409
- "type": "{ void }",
1410
- "description": "Emitted when the checkbox loses focus."
1411
- },
1412
- {
1413
- "name": "dds-focus",
1414
- "type": "{ void }",
1415
- "description": "Emitted when the checkbox gains focus."
1416
- },
1417
- {
1418
- "name": "dds-input",
1419
- "type": "{ checked: boolean, indeterminate: boolean, value: string, disabled: boolean, readonly: boolean }",
1420
- "description": "Emitted when the checkbox receives input."
1421
- }
1422
- ]
1423
- }
1424
- },
1425
- {
1426
- "name": "dap-ds-card-actions",
1427
- "description": "A card actions is a container for actions in a card.\n---\n\n\n### **Slots:**\n - _default_ - The content of the card actions.\n\n### **CSS Properties:**\n - **--dds-card-actions-gap** - The gap between items in the card actions. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-card-actions-padding-lg** - The padding for large size card actions. (default: var(--dds-spacing-600)) _(default: undefined)_\n- **--dds-card-actions-padding-md** - The padding for medium size card actions. (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-card-actions-padding-sm** - The padding for small size card actions. (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-card-actions-margin-lg** - The margin for large size card actions spacing. (default: var(--dds-spacing-600)) _(default: undefined)_\n- **--dds-card-actions-margin-md** - The margin for medium size card actions spacing. (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-card-actions-margin-sm** - The margin for small size card actions spacing. (default: var(--dds-spacing-400)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main card actions container.",
1428
- "doc-url": "",
1429
- "attributes": [],
1430
- "slots": [
1431
- { "name": "", "description": "The content of the card actions." }
1432
- ],
1433
- "events": [],
1434
- "js": {
1435
- "properties": [
1436
- {
1437
- "name": "spacing",
1438
- "description": "The spacing of the card actions. This adds a margin to the card actions. Default is `bottom`.",
1439
- "type": "'top' | 'bottom' | 'both' | 'none'"
1440
- },
1441
- { "name": "parentSized", "type": "string" },
1442
- {
1443
- "name": "size",
1444
- "description": "The size of the card actions. Default is `sm`.",
1445
- "type": "'sm' | 'md' | 'lg'"
1446
- },
1447
- {
1448
- "name": "sizeMap",
1449
- "description": "Responsive size map (e.g. \"md:lg\").",
1450
- "type": "string"
1451
- }
1452
- ],
1453
- "events": []
1454
- }
1455
- },
1456
- {
1457
- "name": "dap-ds-card-content",
1458
- "description": "A card content is a container for content in a card.\n---\n\n\n### **Slots:**\n - _default_ - The content of the card-content.\n\n### **CSS Properties:**\n - **--dds-card-content-padding** - The padding of the card content. (default: 0) _(default: undefined)_\n- **--dds-card-content-margin** - The margin of the card content. (default: 0) _(default: undefined)_\n- **--dds-card-content-font-size** - The font size of the card content. (default: var(--dds-font-base)) _(default: undefined)_\n- **--dds-card-content-line-height** - The line height of the card content. (default: var(--dds-font-line-height-xlarge)) _(default: undefined)_\n- **--dds-card-content-spacing-lg** - The large spacing value. (default: var(--dds-spacing-600)) _(default: undefined)_\n- **--dds-card-content-spacing-md** - The medium spacing value. (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-card-content-spacing-sm** - The small spacing value. (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-card-content-spacing-top** - The top spacing value. (default: 0) _(default: undefined)_\n- **--dds-card-content-spacing-bottom** - The bottom spacing value. (default: 0) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main card content container.",
1459
- "doc-url": "",
1460
- "attributes": [
1461
- {
1462
- "name": "renderAs",
1463
- "description": "The base rendered root tag of the card content.",
1464
- "value": { "type": "string", "default": "'div'" }
1465
- }
1466
- ],
1467
- "slots": [
1468
- { "name": "", "description": "The content of the card-content." }
1469
- ],
1470
- "events": [],
1471
- "js": {
1472
- "properties": [
1473
- {
1474
- "name": "renderAs",
1475
- "description": "The base rendered root tag of the card content.",
1476
- "type": "string"
1477
- },
1478
- {
1479
- "name": "spacing",
1480
- "description": "The spacing of the card content. This adds a margin to the card subtitle. Default is `bottom`.",
1481
- "type": "'top' | 'bottom' | 'both' | 'none'"
1482
- },
1483
- { "name": "parentSized", "type": "string" },
1484
- {
1485
- "name": "size",
1486
- "description": "The size of the card subtitle. Default is `sm`.",
1487
- "type": "'sm' | 'md' | 'lg'"
1111
+ "name": "size",
1112
+ "description": "The size of the card subtitle. Default is `sm`.",
1113
+ "type": "'sm' | 'md' | 'lg'"
1488
1114
  },
1489
1115
  {
1490
1116
  "name": "sizeMap",
@@ -1759,106 +1385,480 @@
1759
1385
  }
1760
1386
  },
1761
1387
  {
1762
- "name": "dap-ds-chip",
1763
- "description": "A chip is a small status descriptor for UI elements.\n---\n\n\n### **Events:**\n - **dds-remove** - Fired when the chip is removed\n- **dds-select** - Fired when the chip is selected\n\n### **CSS Properties:**\n - **--dds-chip-border** - Border of the chip (default: var(--dds-border-width-base) solid var(--dds-transparent-black-base)) _(default: undefined)_\n- **--dds-chip-border-radius** - Border radius of the chip (default: var(--dds-radius-small)) _(default: undefined)_\n- **--dds-chip-font-weight** - Font weight of the chip (default: var(--dds-font-weight-bold)) _(default: undefined)_\n- **--dds-chip-line-height** - Line height of the chip (default: 1.5) _(default: undefined)_\n- **--dds-chip-transition** - Transition timing for chip interactions (default: all 0.2s ease-in-out) _(default: undefined)_\n- **--dds-chip-padding-sm** - Padding for small chip size (default: var(--dds-spacing-100) var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-chip-padding-lg** - Padding for large chip size (default: var(--dds-spacing-200) var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-chip-font-size-sm** - Font size for small chip size (default: var(--dds-font-xs)) _(default: undefined)_\n- **--dds-chip-font-size-lg** - Font size for large chip size (default: var(--dds-font-xs)) _(default: undefined)_\n- **--dds-chip-background-color** - Background color of the chip (default: var(--dds-background-neutral-base)) _(default: undefined)_\n- **--dds-chip-text-color** - Text color of the chip (default: var(--dds-text-neutral-base)) _(default: undefined)_\n- **--dds-chip-hover-background-color** - Background color of the chip on hover (default: var(--dds-background-neutral-medium)) _(default: undefined)_\n- **--dds-chip-active-background-color** - Background color of the chip when active (default: var(--dds-background-neutral-strong)) _(default: undefined)_\n- **--dds-chip-selected-background-color** - Background color of the selected chip (default: var(--dds-background-brand-medium)) _(default: undefined)_\n- **--dds-chip-selected-text-color** - Text color of the selected chip (default: var(--dds-text-brand-subtle)) _(default: undefined)_\n- **--dds-chip-selected-border-color** - Border color of the selected chip (default: var(--dds-border-brand-base)) _(default: undefined)_\n- **--dds-chip-disabled-background-color** - Background color of the disabled chip (default: var(--dds-background-neutral-medium)) _(default: undefined)_\n- **--dds-chip-disabled-text-color** - Text color of the disabled chip (default: var(--dds-text-neutral-subtle)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The base part\n- **content-container** - The container for the content\n- **remove-button** - The remove button\n- **remove-icon** - The icon of the remove icon\n- **remove-icon-base** - The base of the remove icon\n- **remove-icon-base-base** - The base of the remove icon base",
1388
+ "name": "dap-ds-checkbox",
1389
+ "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.",
1764
1390
  "doc-url": "",
1765
1391
  "attributes": [
1766
1392
  {
1767
- "name": "removeable",
1768
- "description": "Whether the chip is removeable",
1393
+ "name": "indeterminate",
1394
+ "description": "Whether the checkbox is indeterminate",
1395
+ "value": { "type": "boolean", "default": "false" }
1396
+ },
1397
+ {
1398
+ "name": "preventDefault",
1399
+ "description": "Whether the checkbox should prevent the default action",
1400
+ "value": { "type": "boolean", "default": "false" }
1401
+ },
1402
+ {
1403
+ "name": "border",
1404
+ "description": "This sets up border around the checkbox, when true.",
1405
+ "value": { "type": "boolean", "default": "false" }
1406
+ },
1407
+ {
1408
+ "name": "readonly",
1409
+ "description": "Whether the checkbox is readonly (cannot be changed but value is submitted with form).",
1769
1410
  "value": { "type": "boolean", "default": "false" }
1770
1411
  },
1771
1412
  {
1772
- "name": "selectable",
1773
- "description": "Whether the chip is selectable",
1774
- "value": { "type": "boolean", "default": "false" }
1413
+ "name": "type",
1414
+ "description": "The type of the checkbox",
1415
+ "value": {
1416
+ "type": "'normal' | 'background'",
1417
+ "default": "'normal'"
1418
+ }
1419
+ }
1420
+ ],
1421
+ "events": [
1422
+ {
1423
+ "name": "dds-change",
1424
+ "type": "{ checked: boolean, indeterminate: boolean, value: string, disabled: boolean, readonly: boolean, type: 'checkbox' }",
1425
+ "description": "Fired when the checkbox is checked or unchecked."
1426
+ },
1427
+ {
1428
+ "name": "dds-blur",
1429
+ "type": "{ void }",
1430
+ "description": "Emitted when the checkbox loses focus."
1431
+ },
1432
+ {
1433
+ "name": "dds-focus",
1434
+ "type": "{ void }",
1435
+ "description": "Emitted when the checkbox gains focus."
1436
+ },
1437
+ {
1438
+ "name": "dds-input",
1439
+ "type": "{ checked: boolean, indeterminate: boolean, value: string, disabled: boolean, readonly: boolean }",
1440
+ "description": "Emitted when the checkbox receives input."
1441
+ }
1442
+ ],
1443
+ "js": {
1444
+ "properties": [
1445
+ {
1446
+ "name": "indeterminate",
1447
+ "description": "Whether the checkbox is indeterminate",
1448
+ "type": "boolean"
1449
+ },
1450
+ {
1451
+ "name": "preventDefault",
1452
+ "description": "Whether the checkbox should prevent the default action",
1453
+ "type": "boolean"
1454
+ },
1455
+ {
1456
+ "name": "border",
1457
+ "description": "This sets up border around the checkbox, when true.",
1458
+ "type": "boolean"
1459
+ },
1460
+ {
1461
+ "name": "readonly",
1462
+ "description": "Whether the checkbox is readonly (cannot be changed but value is submitted with form).",
1463
+ "type": "boolean"
1464
+ },
1465
+ {
1466
+ "name": "type",
1467
+ "description": "The type of the checkbox",
1468
+ "type": "'normal' | 'background'"
1469
+ },
1470
+ { "name": "focusElement", "type": "HTMLInputElement" },
1471
+ { "name": "feedbackId" },
1472
+ {
1473
+ "name": "name",
1474
+ "description": "The name of the checkbox.",
1475
+ "type": "string"
1476
+ },
1477
+ {
1478
+ "name": "value",
1479
+ "description": "The value of the checkbox.",
1480
+ "type": "string"
1481
+ },
1482
+ {
1483
+ "name": "checked",
1484
+ "description": "Whether the checkbox is checked.",
1485
+ "type": "boolean"
1486
+ },
1487
+ {
1488
+ "name": "label",
1489
+ "description": "The label of the checkbox.",
1490
+ "type": "string"
1491
+ },
1492
+ {
1493
+ "name": "description",
1494
+ "description": "The description of the checkbox.",
1495
+ "type": "string"
1496
+ },
1497
+ {
1498
+ "name": "disabled",
1499
+ "description": "Whether the checkbox is disabled.",
1500
+ "type": "boolean"
1501
+ },
1502
+ {
1503
+ "name": "required",
1504
+ "description": "Whether the checkbox is required.",
1505
+ "type": "boolean"
1506
+ },
1507
+ {
1508
+ "name": "size",
1509
+ "description": "The size of the checkbox. Default is 'sm'.",
1510
+ "type": "'xs' | 'sm' | 'lg'"
1511
+ },
1512
+ {
1513
+ "name": "sizeMap",
1514
+ "description": "Responsive size map (e.g. \"md:lg\").",
1515
+ "type": "string"
1516
+ },
1517
+ {
1518
+ "name": "labelPlacement",
1519
+ "description": "The placement of the label.",
1520
+ "type": "'left' | 'right'"
1521
+ },
1522
+ {
1523
+ "name": "descriptionPlacement",
1524
+ "description": "The placement of the description.",
1525
+ "type": "'top' | 'bottom'"
1526
+ },
1527
+ {
1528
+ "name": "subtle",
1529
+ "description": "The weight of the label.",
1530
+ "type": "boolean"
1531
+ },
1532
+ {
1533
+ "name": "feedback",
1534
+ "description": "The feedback of the checkbox.",
1535
+ "type": "string"
1536
+ },
1537
+ {
1538
+ "name": "feedbackType",
1539
+ "description": "The feedback type of the checkbox.",
1540
+ "type": "'negative' | 'positive' | 'warning'"
1541
+ },
1542
+ {
1543
+ "name": "invalid",
1544
+ "description": "The invalid state of the checkbox.",
1545
+ "type": "boolean"
1546
+ },
1547
+ {
1548
+ "name": "optional",
1549
+ "description": "The optional state of the checkbox.",
1550
+ "type": "boolean"
1551
+ },
1552
+ {
1553
+ "name": "optionalLabel",
1554
+ "description": "The optional label of the checkbox.",
1555
+ "type": "string"
1556
+ }
1557
+ ],
1558
+ "events": [
1559
+ {
1560
+ "name": "dds-change",
1561
+ "type": "{ checked: boolean, indeterminate: boolean, value: string, disabled: boolean, readonly: boolean, type: 'checkbox' }",
1562
+ "description": "Fired when the checkbox is checked or unchecked."
1563
+ },
1564
+ {
1565
+ "name": "dds-blur",
1566
+ "type": "{ void }",
1567
+ "description": "Emitted when the checkbox loses focus."
1568
+ },
1569
+ {
1570
+ "name": "dds-focus",
1571
+ "type": "{ void }",
1572
+ "description": "Emitted when the checkbox gains focus."
1573
+ },
1574
+ {
1575
+ "name": "dds-input",
1576
+ "type": "{ checked: boolean, indeterminate: boolean, value: string, disabled: boolean, readonly: boolean }",
1577
+ "description": "Emitted when the checkbox receives input."
1578
+ }
1579
+ ]
1580
+ }
1581
+ },
1582
+ {
1583
+ "name": "dap-ds-chip",
1584
+ "description": "A chip is a small status descriptor for UI elements.\n---\n\n\n### **Events:**\n - **dds-remove** - Fired when the chip is removed\n- **dds-select** - Fired when the chip is selected\n\n### **CSS Properties:**\n - **--dds-chip-border** - Border of the chip (default: var(--dds-border-width-base) solid var(--dds-transparent-black-base)) _(default: undefined)_\n- **--dds-chip-border-radius** - Border radius of the chip (default: var(--dds-radius-small)) _(default: undefined)_\n- **--dds-chip-font-weight** - Font weight of the chip (default: var(--dds-font-weight-bold)) _(default: undefined)_\n- **--dds-chip-line-height** - Line height of the chip (default: 1.5) _(default: undefined)_\n- **--dds-chip-transition** - Transition timing for chip interactions (default: all 0.2s ease-in-out) _(default: undefined)_\n- **--dds-chip-padding-sm** - Padding for small chip size (default: var(--dds-spacing-100) var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-chip-padding-lg** - Padding for large chip size (default: var(--dds-spacing-200) var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-chip-font-size-sm** - Font size for small chip size (default: var(--dds-font-xs)) _(default: undefined)_\n- **--dds-chip-font-size-lg** - Font size for large chip size (default: var(--dds-font-xs)) _(default: undefined)_\n- **--dds-chip-background-color** - Background color of the chip (default: var(--dds-background-neutral-base)) _(default: undefined)_\n- **--dds-chip-text-color** - Text color of the chip (default: var(--dds-text-neutral-base)) _(default: undefined)_\n- **--dds-chip-hover-background-color** - Background color of the chip on hover (default: var(--dds-background-neutral-medium)) _(default: undefined)_\n- **--dds-chip-active-background-color** - Background color of the chip when active (default: var(--dds-background-neutral-strong)) _(default: undefined)_\n- **--dds-chip-selected-background-color** - Background color of the selected chip (default: var(--dds-background-brand-medium)) _(default: undefined)_\n- **--dds-chip-selected-text-color** - Text color of the selected chip (default: var(--dds-text-brand-subtle)) _(default: undefined)_\n- **--dds-chip-selected-border-color** - Border color of the selected chip (default: var(--dds-border-brand-base)) _(default: undefined)_\n- **--dds-chip-disabled-background-color** - Background color of the disabled chip (default: var(--dds-background-neutral-medium)) _(default: undefined)_\n- **--dds-chip-disabled-text-color** - Text color of the disabled chip (default: var(--dds-text-neutral-subtle)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The base part\n- **content-container** - The container for the content\n- **remove-button** - The remove button\n- **remove-icon** - The icon of the remove icon\n- **remove-icon-base** - The base of the remove icon\n- **remove-icon-base-base** - The base of the remove icon base",
1585
+ "doc-url": "",
1586
+ "attributes": [
1587
+ {
1588
+ "name": "removeable",
1589
+ "description": "Whether the chip is removeable",
1590
+ "value": { "type": "boolean", "default": "false" }
1591
+ },
1592
+ {
1593
+ "name": "selectable",
1594
+ "description": "Whether the chip is selectable",
1595
+ "value": { "type": "boolean", "default": "false" }
1596
+ },
1597
+ {
1598
+ "name": "selected",
1599
+ "description": "Whether the chip is selected",
1600
+ "value": { "type": "boolean", "default": "false" }
1601
+ },
1602
+ {
1603
+ "name": "disabled",
1604
+ "description": "Whether the chip is disabled",
1605
+ "value": { "type": "boolean", "default": "false" }
1606
+ },
1607
+ {
1608
+ "name": "value",
1609
+ "description": "The value of the chip",
1610
+ "value": { "type": "string | undefined" }
1611
+ },
1612
+ {
1613
+ "name": "deleteAriaLabel",
1614
+ "description": "The aria label for the delete button",
1615
+ "value": { "type": "string | undefined" }
1616
+ }
1617
+ ],
1618
+ "events": [
1619
+ {
1620
+ "name": "dds-remove",
1621
+ "type": "{ value: string }",
1622
+ "description": "Fired when the chip is removed"
1623
+ },
1624
+ {
1625
+ "name": "dds-select",
1626
+ "type": "{ value?: string, selected: boolean }",
1627
+ "description": "Fired when the chip is selected"
1628
+ }
1629
+ ],
1630
+ "js": {
1631
+ "properties": [
1632
+ {
1633
+ "name": "removeable",
1634
+ "description": "Whether the chip is removeable",
1635
+ "type": "boolean"
1636
+ },
1637
+ {
1638
+ "name": "selectable",
1639
+ "description": "Whether the chip is selectable",
1640
+ "type": "boolean"
1641
+ },
1642
+ {
1643
+ "name": "selected",
1644
+ "description": "Whether the chip is selected",
1645
+ "type": "boolean"
1646
+ },
1647
+ {
1648
+ "name": "disabled",
1649
+ "description": "Whether the chip is disabled",
1650
+ "type": "boolean"
1651
+ },
1652
+ {
1653
+ "name": "value",
1654
+ "description": "The value of the chip",
1655
+ "type": "string | undefined"
1656
+ },
1657
+ {
1658
+ "name": "deleteAriaLabel",
1659
+ "description": "The aria label for the delete button",
1660
+ "type": "string | undefined"
1661
+ },
1662
+ {
1663
+ "name": "size",
1664
+ "description": "The size of the chip. Default is `sm`.",
1665
+ "type": "'sm' | 'lg'"
1666
+ },
1667
+ {
1668
+ "name": "sizeMap",
1669
+ "description": "Responsive size map (e.g. \"md:lg\").",
1670
+ "type": "string"
1671
+ }
1672
+ ],
1673
+ "events": [
1674
+ {
1675
+ "name": "dds-remove",
1676
+ "type": "{ value: string }",
1677
+ "description": "Fired when the chip is removed"
1678
+ },
1679
+ {
1680
+ "name": "dds-select",
1681
+ "type": "{ value?: string, selected: boolean }",
1682
+ "description": "Fired when the chip is selected"
1683
+ }
1684
+ ]
1685
+ }
1686
+ },
1687
+ {
1688
+ "name": "dap-ds-button",
1689
+ "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.",
1690
+ "doc-url": "",
1691
+ "attributes": [
1692
+ {
1693
+ "name": "variant",
1694
+ "description": "The visual style variant of the button",
1695
+ "value": {
1696
+ "type": "'primary' | 'outline' | 'subtle' | 'subtle-neutral' | 'subtle-quiet' | 'subtle-quiet-inverted' | 'clean' | 'primary-inverted' | 'outline-inverted' | 'subtle-inverted' | 'clean-inverted' | 'subtle-menu' | 'subtle-menu-item'",
1697
+ "default": "'primary'"
1698
+ }
1699
+ },
1700
+ {
1701
+ "name": "size",
1702
+ "description": "The size of the button affecting padding and font size",
1703
+ "value": {
1704
+ "type": "'lg' | 'md' | 'sm' | 'xs'",
1705
+ "default": "'md'"
1706
+ }
1707
+ },
1708
+ {
1709
+ "name": "loading",
1710
+ "description": "Whether the button is in loading state, showing a spinner and disabling interaction",
1711
+ "value": { "type": "boolean", "default": "false" }
1712
+ },
1713
+ {
1714
+ "name": "danger",
1715
+ "description": "Whether the button represents a destructive action (applies danger styling)",
1716
+ "value": { "type": "boolean", "default": "false" }
1717
+ },
1718
+ {
1719
+ "name": "shape",
1720
+ "description": "The shape of the button - use 'circle' for icon-only buttons",
1721
+ "value": { "type": "'button' | 'circle'", "default": "'button'" }
1722
+ },
1723
+ {
1724
+ "name": "htmlType",
1725
+ "description": "The HTML type attribute for form interaction",
1726
+ "value": {
1727
+ "type": "'button' | 'submit' | 'reset'",
1728
+ "default": "'button'"
1729
+ }
1730
+ },
1731
+ {
1732
+ "name": "href",
1733
+ "description": "The URL to navigate to. When present, the button renders as an anchor element",
1734
+ "value": { "type": "string | undefined" }
1735
+ },
1736
+ {
1737
+ "name": "target",
1738
+ "description": "The target attribute for link navigation",
1739
+ "value": {
1740
+ "type": "'_blank' | '_self' | '_parent' | '_top'",
1741
+ "default": "'_self'"
1742
+ }
1743
+ },
1744
+ {
1745
+ "name": "rel",
1746
+ "description": "The rel attribute for link security and behavior",
1747
+ "value": {
1748
+ "type": "string | undefined",
1749
+ "default": "'noreferrer noopener'"
1750
+ }
1775
1751
  },
1776
1752
  {
1777
- "name": "selected",
1778
- "description": "Whether the chip is selected",
1779
- "value": { "type": "boolean", "default": "false" }
1753
+ "name": "loadingTimeout",
1754
+ "description": "Controls loading timeout in milliseconds",
1755
+ "value": { "type": "number", "default": "0" }
1780
1756
  },
1781
1757
  {
1782
- "name": "disabled",
1783
- "description": "Whether the chip is disabled",
1758
+ "name": "active",
1759
+ "description": "Whether the button is active",
1784
1760
  "value": { "type": "boolean", "default": "false" }
1785
1761
  },
1786
1762
  {
1787
- "name": "value",
1788
- "description": "The value of the chip",
1789
- "value": { "type": "string | undefined" }
1763
+ "name": "targetBlankText",
1764
+ "description": "The text for the target blank link, applicable when target is _blank. PRO TIP: Use parenthesis to wrap the text",
1765
+ "value": { "type": "string" }
1790
1766
  },
1791
1767
  {
1792
- "name": "deleteAriaLabel",
1793
- "description": "The aria label for the delete button",
1768
+ "name": "forceRole",
1769
+ "description": "Overrides the ARIA role on the internal native button/anchor element. Use when the host's semantics must differ from the native element (e.g. role=\"link\" on a button acting as a SPA navigation trigger).",
1794
1770
  "value": { "type": "string | undefined" }
1795
1771
  }
1796
1772
  ],
1797
- "events": [
1773
+ "slots": [
1798
1774
  {
1799
- "name": "dds-remove",
1800
- "type": "{ value: string }",
1801
- "description": "Fired when the chip is removed"
1802
- },
1775
+ "name": "",
1776
+ "description": "The content of the button. Can contain text, icons, or other elements."
1777
+ }
1778
+ ],
1779
+ "events": [
1803
1780
  {
1804
- "name": "dds-select",
1805
- "type": "{ value?: string, selected: boolean }",
1806
- "description": "Fired when the chip is selected"
1781
+ "name": "dds-loading-timeout",
1782
+ "description": "Emitted when the loading timeout is reached"
1807
1783
  }
1808
1784
  ],
1809
1785
  "js": {
1810
1786
  "properties": [
1811
1787
  {
1812
- "name": "removeable",
1813
- "description": "Whether the chip is removeable",
1814
- "type": "boolean"
1788
+ "name": "variant",
1789
+ "description": "The visual style variant of the button",
1790
+ "type": "'primary' | 'outline' | 'subtle' | 'subtle-neutral' | 'subtle-quiet' | 'subtle-quiet-inverted' | 'clean' | 'primary-inverted' | 'outline-inverted' | 'subtle-inverted' | 'clean-inverted' | 'subtle-menu' | 'subtle-menu-item'"
1815
1791
  },
1816
1792
  {
1817
- "name": "selectable",
1818
- "description": "Whether the chip is selectable",
1819
- "type": "boolean"
1793
+ "name": "size",
1794
+ "description": "The size of the button affecting padding and font size",
1795
+ "type": "'lg' | 'md' | 'sm' | 'xs'"
1820
1796
  },
1821
1797
  {
1822
- "name": "selected",
1823
- "description": "Whether the chip is selected",
1798
+ "name": "loading",
1799
+ "description": "Whether the button is in loading state, showing a spinner and disabling interaction",
1824
1800
  "type": "boolean"
1825
1801
  },
1826
1802
  {
1827
- "name": "disabled",
1828
- "description": "Whether the chip is disabled",
1803
+ "name": "danger",
1804
+ "description": "Whether the button represents a destructive action (applies danger styling)",
1829
1805
  "type": "boolean"
1830
1806
  },
1831
1807
  {
1832
- "name": "value",
1833
- "description": "The value of the chip",
1808
+ "name": "shape",
1809
+ "description": "The shape of the button - use 'circle' for icon-only buttons",
1810
+ "type": "'button' | 'circle'"
1811
+ },
1812
+ {
1813
+ "name": "htmlType",
1814
+ "description": "The HTML type attribute for form interaction",
1815
+ "type": "'button' | 'submit' | 'reset'"
1816
+ },
1817
+ {
1818
+ "name": "href",
1819
+ "description": "The URL to navigate to. When present, the button renders as an anchor element",
1834
1820
  "type": "string | undefined"
1835
1821
  },
1836
1822
  {
1837
- "name": "deleteAriaLabel",
1838
- "description": "The aria label for the delete button",
1823
+ "name": "target",
1824
+ "description": "The target attribute for link navigation",
1825
+ "type": "'_blank' | '_self' | '_parent' | '_top'"
1826
+ },
1827
+ {
1828
+ "name": "rel",
1829
+ "description": "The rel attribute for link security and behavior",
1839
1830
  "type": "string | undefined"
1840
1831
  },
1841
1832
  {
1842
- "name": "size",
1843
- "description": "The size of the chip. Default is `sm`.",
1844
- "type": "'sm' | 'lg'"
1833
+ "name": "loadingTimeout",
1834
+ "description": "Controls loading timeout in milliseconds",
1835
+ "type": "number"
1836
+ },
1837
+ {
1838
+ "name": "active",
1839
+ "description": "Whether the button is active",
1840
+ "type": "boolean"
1841
+ },
1842
+ {
1843
+ "name": "targetBlankText",
1844
+ "description": "The text for the target blank link, applicable when target is _blank. PRO TIP: Use parenthesis to wrap the text",
1845
+ "type": "string"
1846
+ },
1847
+ {
1848
+ "name": "forceRole",
1849
+ "description": "Overrides the ARIA role on the internal native button/anchor element. Use when the host's semantics must differ from the native element (e.g. role=\"link\" on a button acting as a SPA navigation trigger).",
1850
+ "type": "string | undefined"
1845
1851
  },
1846
1852
  {
1847
1853
  "name": "sizeMap",
1848
- "description": "Responsive size map (e.g. \"md:lg\").",
1854
+ "description": "The size map of the button.",
1849
1855
  "type": "string"
1850
1856
  }
1851
1857
  ],
1852
1858
  "events": [
1853
1859
  {
1854
- "name": "dds-remove",
1855
- "type": "{ value: string }",
1856
- "description": "Fired when the chip is removed"
1857
- },
1858
- {
1859
- "name": "dds-select",
1860
- "type": "{ value?: string, selected: boolean }",
1861
- "description": "Fired when the chip is selected"
1860
+ "name": "dds-loading-timeout",
1861
+ "description": "Emitted when the loading timeout is reached"
1862
1862
  }
1863
1863
  ]
1864
1864
  }
@@ -8675,7 +8675,7 @@
8675
8675
  },
8676
8676
  {
8677
8677
  "name": "dap-ds-skeleton",
8678
- "description": "A skeleton loader component for displaying placeholder content while loading.\n---\n\n\n### **CSS Properties:**\n - **--dds-skeleton-color** - 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.",
8678
+ "description": "A skeleton loader component for displaying placeholder content while loading.\n---\n\n\n### **CSS Properties:**\n - **--dds-skeleton-base-color** - Solid background color always visible (default: rgb(0 0 0 / 11%)); shown as a static block when prefers-reduced-motion is active _(default: undefined)_\n- **--dds-skeleton-color** - The shimmer overlay gradient (default: linear-gradient(90deg, transparent, rgb(0 0 0 / 10%), transparent)) _(default: undefined)_\n- **--dds-skeleton-animation-duration** - Duration of the loading animation (default: 1.5s) _(default: undefined)_\n- **--dds-skeleton-border-radius** - Border radius for rectangular skeletons (default: var(--dds-radius-small)) _(default: undefined)_\n- **--dds-skeleton-text-spacing** - Spacing between text lines in text variant (default: var(--dds-spacing-100)) _(default: undefined)_\n- **--dds-skeleton-animation-timing-function** - Timing function for the loading animation (default: ease-in-out) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main skeleton container.",
8679
8679
  "doc-url": "",
8680
8680
  "attributes": [
8681
8681
  {
@@ -11134,7 +11134,7 @@
11134
11134
  }
11135
11135
  },
11136
11136
  {
11137
- "name": "dap-ds-icon-arrow-down-s-fill",
11137
+ "name": "dap-ds-icon-arrow-down-s-line",
11138
11138
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
11139
11139
  "doc-url": "",
11140
11140
  "attributes": [
@@ -11187,7 +11187,7 @@
11187
11187
  }
11188
11188
  },
11189
11189
  {
11190
- "name": "dap-ds-icon-arrow-down-s-line",
11190
+ "name": "dap-ds-icon-arrow-down-s-fill",
11191
11191
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
11192
11192
  "doc-url": "",
11193
11193
  "attributes": [
@@ -11611,7 +11611,7 @@
11611
11611
  }
11612
11612
  },
11613
11613
  {
11614
- "name": "dap-ds-icon-arrow-right-l-line",
11614
+ "name": "dap-ds-icon-arrow-right-line",
11615
11615
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
11616
11616
  "doc-url": "",
11617
11617
  "attributes": [
@@ -11664,7 +11664,7 @@
11664
11664
  }
11665
11665
  },
11666
11666
  {
11667
- "name": "dap-ds-icon-arrow-right-line",
11667
+ "name": "dap-ds-icon-arrow-right-s-fill",
11668
11668
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
11669
11669
  "doc-url": "",
11670
11670
  "attributes": [
@@ -11717,7 +11717,7 @@
11717
11717
  }
11718
11718
  },
11719
11719
  {
11720
- "name": "dap-ds-icon-arrow-right-s-fill",
11720
+ "name": "dap-ds-icon-arrow-right-s-line",
11721
11721
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
11722
11722
  "doc-url": "",
11723
11723
  "attributes": [
@@ -11770,7 +11770,7 @@
11770
11770
  }
11771
11771
  },
11772
11772
  {
11773
- "name": "dap-ds-icon-arrow-right-s-line",
11773
+ "name": "dap-ds-icon-arrow-right-l-line",
11774
11774
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
11775
11775
  "doc-url": "",
11776
11776
  "attributes": [
@@ -12353,7 +12353,7 @@
12353
12353
  }
12354
12354
  },
12355
12355
  {
12356
- "name": "dap-ds-icon-separator",
12356
+ "name": "dap-ds-icon-clipboard-line",
12357
12357
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
12358
12358
  "doc-url": "",
12359
12359
  "attributes": [
@@ -12406,7 +12406,7 @@
12406
12406
  }
12407
12407
  },
12408
12408
  {
12409
- "name": "dap-ds-icon-clipboard-line",
12409
+ "name": "dap-ds-icon-file-copy-line",
12410
12410
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
12411
12411
  "doc-url": "",
12412
12412
  "attributes": [
@@ -12459,7 +12459,7 @@
12459
12459
  }
12460
12460
  },
12461
12461
  {
12462
- "name": "dap-ds-icon-file-copy-line",
12462
+ "name": "dap-ds-icon-file-image-line",
12463
12463
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
12464
12464
  "doc-url": "",
12465
12465
  "attributes": [
@@ -12512,7 +12512,7 @@
12512
12512
  }
12513
12513
  },
12514
12514
  {
12515
- "name": "dap-ds-icon-file-image-line",
12515
+ "name": "dap-ds-icon-file-music-line",
12516
12516
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
12517
12517
  "doc-url": "",
12518
12518
  "attributes": [
@@ -12565,7 +12565,7 @@
12565
12565
  }
12566
12566
  },
12567
12567
  {
12568
- "name": "dap-ds-icon-file-music-line",
12568
+ "name": "dap-ds-icon-file-text-line",
12569
12569
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
12570
12570
  "doc-url": "",
12571
12571
  "attributes": [
@@ -12618,7 +12618,7 @@
12618
12618
  }
12619
12619
  },
12620
12620
  {
12621
- "name": "dap-ds-icon-file-text-line",
12621
+ "name": "dap-ds-icon-file-video-line",
12622
12622
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
12623
12623
  "doc-url": "",
12624
12624
  "attributes": [
@@ -12671,7 +12671,7 @@
12671
12671
  }
12672
12672
  },
12673
12673
  {
12674
- "name": "dap-ds-icon-file-video-line",
12674
+ "name": "dap-ds-icon-folder-line",
12675
12675
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
12676
12676
  "doc-url": "",
12677
12677
  "attributes": [
@@ -12724,7 +12724,7 @@
12724
12724
  }
12725
12725
  },
12726
12726
  {
12727
- "name": "dap-ds-icon-folder-line",
12727
+ "name": "dap-ds-icon-folder-open-line",
12728
12728
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
12729
12729
  "doc-url": "",
12730
12730
  "attributes": [
@@ -12777,7 +12777,7 @@
12777
12777
  }
12778
12778
  },
12779
12779
  {
12780
- "name": "dap-ds-icon-folder-open-line",
12780
+ "name": "dap-ds-icon-separator",
12781
12781
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
12782
12782
  "doc-url": "",
12783
12783
  "attributes": [
@@ -12989,7 +12989,7 @@
12989
12989
  }
12990
12990
  },
12991
12991
  {
12992
- "name": "dap-ds-icon-account-circle-fill",
12992
+ "name": "dap-ds-icon-add-line",
12993
12993
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
12994
12994
  "doc-url": "",
12995
12995
  "attributes": [
@@ -13042,7 +13042,7 @@
13042
13042
  }
13043
13043
  },
13044
13044
  {
13045
- "name": "dap-ds-icon-account-circle-line",
13045
+ "name": "dap-ds-icon-alert-fill",
13046
13046
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
13047
13047
  "doc-url": "",
13048
13048
  "attributes": [
@@ -13095,7 +13095,7 @@
13095
13095
  }
13096
13096
  },
13097
13097
  {
13098
- "name": "dap-ds-icon-user-fill",
13098
+ "name": "dap-ds-icon-alert-line",
13099
13099
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
13100
13100
  "doc-url": "",
13101
13101
  "attributes": [
@@ -13148,7 +13148,7 @@
13148
13148
  }
13149
13149
  },
13150
13150
  {
13151
- "name": "dap-ds-icon-user-line",
13151
+ "name": "dap-ds-icon-check-line",
13152
13152
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
13153
13153
  "doc-url": "",
13154
13154
  "attributes": [
@@ -13201,7 +13201,7 @@
13201
13201
  }
13202
13202
  },
13203
13203
  {
13204
- "name": "dap-ds-icon-add-line",
13204
+ "name": "dap-ds-icon-check-line2",
13205
13205
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
13206
13206
  "doc-url": "",
13207
13207
  "attributes": [
@@ -13254,7 +13254,7 @@
13254
13254
  }
13255
13255
  },
13256
13256
  {
13257
- "name": "dap-ds-icon-alert-fill",
13257
+ "name": "dap-ds-icon-checkbox-blank-circle-fill",
13258
13258
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
13259
13259
  "doc-url": "",
13260
13260
  "attributes": [
@@ -13307,7 +13307,7 @@
13307
13307
  }
13308
13308
  },
13309
13309
  {
13310
- "name": "dap-ds-icon-alert-line",
13310
+ "name": "dap-ds-icon-checkbox-blank-circle-fill-check",
13311
13311
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
13312
13312
  "doc-url": "",
13313
13313
  "attributes": [
@@ -13360,7 +13360,7 @@
13360
13360
  }
13361
13361
  },
13362
13362
  {
13363
- "name": "dap-ds-icon-check-line",
13363
+ "name": "dap-ds-icon-checkbox-blank-circle-line",
13364
13364
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
13365
13365
  "doc-url": "",
13366
13366
  "attributes": [
@@ -13413,7 +13413,7 @@
13413
13413
  }
13414
13414
  },
13415
13415
  {
13416
- "name": "dap-ds-icon-check-line2",
13416
+ "name": "dap-ds-icon-checkbox-circle-fill",
13417
13417
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
13418
13418
  "doc-url": "",
13419
13419
  "attributes": [
@@ -13466,7 +13466,7 @@
13466
13466
  }
13467
13467
  },
13468
13468
  {
13469
- "name": "dap-ds-icon-checkbox-blank-circle-fill",
13469
+ "name": "dap-ds-icon-checkbox-circle-line",
13470
13470
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
13471
13471
  "doc-url": "",
13472
13472
  "attributes": [
@@ -13519,7 +13519,7 @@
13519
13519
  }
13520
13520
  },
13521
13521
  {
13522
- "name": "dap-ds-icon-checkbox-blank-circle-fill-check",
13522
+ "name": "dap-ds-icon-close-circle-fill",
13523
13523
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
13524
13524
  "doc-url": "",
13525
13525
  "attributes": [
@@ -13572,7 +13572,7 @@
13572
13572
  }
13573
13573
  },
13574
13574
  {
13575
- "name": "dap-ds-icon-checkbox-blank-circle-line",
13575
+ "name": "dap-ds-icon-close-circle-line",
13576
13576
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
13577
13577
  "doc-url": "",
13578
13578
  "attributes": [
@@ -13625,7 +13625,7 @@
13625
13625
  }
13626
13626
  },
13627
13627
  {
13628
- "name": "dap-ds-icon-checkbox-circle-fill",
13628
+ "name": "dap-ds-icon-close-fill",
13629
13629
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
13630
13630
  "doc-url": "",
13631
13631
  "attributes": [
@@ -13678,7 +13678,7 @@
13678
13678
  }
13679
13679
  },
13680
13680
  {
13681
- "name": "dap-ds-icon-checkbox-circle-line",
13681
+ "name": "dap-ds-icon-close-line",
13682
13682
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
13683
13683
  "doc-url": "",
13684
13684
  "attributes": [
@@ -13731,7 +13731,7 @@
13731
13731
  }
13732
13732
  },
13733
13733
  {
13734
- "name": "dap-ds-icon-close-circle-fill",
13734
+ "name": "dap-ds-icon-delete-bin-fill",
13735
13735
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
13736
13736
  "doc-url": "",
13737
13737
  "attributes": [
@@ -13784,7 +13784,7 @@
13784
13784
  }
13785
13785
  },
13786
13786
  {
13787
- "name": "dap-ds-icon-close-circle-line",
13787
+ "name": "dap-ds-icon-delete-bin-line",
13788
13788
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
13789
13789
  "doc-url": "",
13790
13790
  "attributes": [
@@ -13837,7 +13837,7 @@
13837
13837
  }
13838
13838
  },
13839
13839
  {
13840
- "name": "dap-ds-icon-close-fill",
13840
+ "name": "dap-ds-icon-download-line",
13841
13841
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
13842
13842
  "doc-url": "",
13843
13843
  "attributes": [
@@ -13890,7 +13890,7 @@
13890
13890
  }
13891
13891
  },
13892
13892
  {
13893
- "name": "dap-ds-icon-close-line",
13893
+ "name": "dap-ds-icon-error-warning-fill",
13894
13894
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
13895
13895
  "doc-url": "",
13896
13896
  "attributes": [
@@ -13943,7 +13943,7 @@
13943
13943
  }
13944
13944
  },
13945
13945
  {
13946
- "name": "dap-ds-icon-delete-bin-fill",
13946
+ "name": "dap-ds-icon-error-warning-line",
13947
13947
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
13948
13948
  "doc-url": "",
13949
13949
  "attributes": [
@@ -13996,7 +13996,7 @@
13996
13996
  }
13997
13997
  },
13998
13998
  {
13999
- "name": "dap-ds-icon-delete-bin-line",
13999
+ "name": "dap-ds-icon-external-link-line",
14000
14000
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
14001
14001
  "doc-url": "",
14002
14002
  "attributes": [
@@ -14049,7 +14049,7 @@
14049
14049
  }
14050
14050
  },
14051
14051
  {
14052
- "name": "dap-ds-icon-download-line",
14052
+ "name": "dap-ds-icon-eye-line",
14053
14053
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
14054
14054
  "doc-url": "",
14055
14055
  "attributes": [
@@ -14102,7 +14102,7 @@
14102
14102
  }
14103
14103
  },
14104
14104
  {
14105
- "name": "dap-ds-icon-error-warning-fill",
14105
+ "name": "dap-ds-icon-eye-off-line",
14106
14106
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
14107
14107
  "doc-url": "",
14108
14108
  "attributes": [
@@ -14155,7 +14155,7 @@
14155
14155
  }
14156
14156
  },
14157
14157
  {
14158
- "name": "dap-ds-icon-external-link-line",
14158
+ "name": "dap-ds-icon-forbid-fill",
14159
14159
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
14160
14160
  "doc-url": "",
14161
14161
  "attributes": [
@@ -14208,7 +14208,7 @@
14208
14208
  }
14209
14209
  },
14210
14210
  {
14211
- "name": "dap-ds-icon-error-warning-line",
14211
+ "name": "dap-ds-icon-information-2-fill",
14212
14212
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
14213
14213
  "doc-url": "",
14214
14214
  "attributes": [
@@ -14261,7 +14261,7 @@
14261
14261
  }
14262
14262
  },
14263
14263
  {
14264
- "name": "dap-ds-icon-eye-line",
14264
+ "name": "dap-ds-icon-information-fill",
14265
14265
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
14266
14266
  "doc-url": "",
14267
14267
  "attributes": [
@@ -14314,7 +14314,7 @@
14314
14314
  }
14315
14315
  },
14316
14316
  {
14317
- "name": "dap-ds-icon-eye-off-line",
14317
+ "name": "dap-ds-icon-information-line",
14318
14318
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
14319
14319
  "doc-url": "",
14320
14320
  "attributes": [
@@ -14367,7 +14367,7 @@
14367
14367
  }
14368
14368
  },
14369
14369
  {
14370
- "name": "dap-ds-icon-forbid-fill",
14370
+ "name": "dap-ds-icon-lightbulb-fill",
14371
14371
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
14372
14372
  "doc-url": "",
14373
14373
  "attributes": [
@@ -14420,7 +14420,7 @@
14420
14420
  }
14421
14421
  },
14422
14422
  {
14423
- "name": "dap-ds-icon-information-2-fill",
14423
+ "name": "dap-ds-icon-loading-spinner",
14424
14424
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
14425
14425
  "doc-url": "",
14426
14426
  "attributes": [
@@ -14473,7 +14473,7 @@
14473
14473
  }
14474
14474
  },
14475
14475
  {
14476
- "name": "dap-ds-icon-information-fill",
14476
+ "name": "dap-ds-icon-lock-fill",
14477
14477
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
14478
14478
  "doc-url": "",
14479
14479
  "attributes": [
@@ -14526,7 +14526,7 @@
14526
14526
  }
14527
14527
  },
14528
14528
  {
14529
- "name": "dap-ds-icon-information-line",
14529
+ "name": "dap-ds-icon-lock-line",
14530
14530
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
14531
14531
  "doc-url": "",
14532
14532
  "attributes": [
@@ -14579,7 +14579,7 @@
14579
14579
  }
14580
14580
  },
14581
14581
  {
14582
- "name": "dap-ds-icon-lightbulb-fill",
14582
+ "name": "dap-ds-icon-menu-line",
14583
14583
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
14584
14584
  "doc-url": "",
14585
14585
  "attributes": [
@@ -14632,7 +14632,7 @@
14632
14632
  }
14633
14633
  },
14634
14634
  {
14635
- "name": "dap-ds-icon-loading-spinner",
14635
+ "name": "dap-ds-icon-menu-line-s",
14636
14636
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
14637
14637
  "doc-url": "",
14638
14638
  "attributes": [
@@ -14685,7 +14685,7 @@
14685
14685
  }
14686
14686
  },
14687
14687
  {
14688
- "name": "dap-ds-icon-lock-fill",
14688
+ "name": "dap-ds-icon-more-2-line",
14689
14689
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
14690
14690
  "doc-url": "",
14691
14691
  "attributes": [
@@ -14738,7 +14738,7 @@
14738
14738
  }
14739
14739
  },
14740
14740
  {
14741
- "name": "dap-ds-icon-lock-line",
14741
+ "name": "dap-ds-icon-more-line",
14742
14742
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
14743
14743
  "doc-url": "",
14744
14744
  "attributes": [
@@ -14791,7 +14791,7 @@
14791
14791
  }
14792
14792
  },
14793
14793
  {
14794
- "name": "dap-ds-icon-menu-line",
14794
+ "name": "dap-ds-icon-search-line",
14795
14795
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
14796
14796
  "doc-url": "",
14797
14797
  "attributes": [
@@ -14844,7 +14844,7 @@
14844
14844
  }
14845
14845
  },
14846
14846
  {
14847
- "name": "dap-ds-icon-menu-line-s",
14847
+ "name": "dap-ds-icon-share-line",
14848
14848
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
14849
14849
  "doc-url": "",
14850
14850
  "attributes": [
@@ -14897,7 +14897,7 @@
14897
14897
  }
14898
14898
  },
14899
14899
  {
14900
- "name": "dap-ds-icon-more-2-line",
14900
+ "name": "dap-ds-icon-shield-check-fill",
14901
14901
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
14902
14902
  "doc-url": "",
14903
14903
  "attributes": [
@@ -14950,7 +14950,7 @@
14950
14950
  }
14951
14951
  },
14952
14952
  {
14953
- "name": "dap-ds-icon-more-line",
14953
+ "name": "dap-ds-icon-shield-check-line",
14954
14954
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
14955
14955
  "doc-url": "",
14956
14956
  "attributes": [
@@ -15003,7 +15003,7 @@
15003
15003
  }
15004
15004
  },
15005
15005
  {
15006
- "name": "dap-ds-icon-search-line",
15006
+ "name": "dap-ds-icon-star-fill",
15007
15007
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
15008
15008
  "doc-url": "",
15009
15009
  "attributes": [
@@ -15056,7 +15056,7 @@
15056
15056
  }
15057
15057
  },
15058
15058
  {
15059
- "name": "dap-ds-icon-share-line",
15059
+ "name": "dap-ds-icon-subtract-line",
15060
15060
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
15061
15061
  "doc-url": "",
15062
15062
  "attributes": [
@@ -15109,7 +15109,7 @@
15109
15109
  }
15110
15110
  },
15111
15111
  {
15112
- "name": "dap-ds-icon-shield-check-fill",
15112
+ "name": "dap-ds-icon-subtract-line2",
15113
15113
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
15114
15114
  "doc-url": "",
15115
15115
  "attributes": [
@@ -15162,7 +15162,7 @@
15162
15162
  }
15163
15163
  },
15164
15164
  {
15165
- "name": "dap-ds-icon-shield-check-line",
15165
+ "name": "dap-ds-icon-time-fill",
15166
15166
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
15167
15167
  "doc-url": "",
15168
15168
  "attributes": [
@@ -15215,7 +15215,7 @@
15215
15215
  }
15216
15216
  },
15217
15217
  {
15218
- "name": "dap-ds-icon-star-fill",
15218
+ "name": "dap-ds-icon-time-line",
15219
15219
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
15220
15220
  "doc-url": "",
15221
15221
  "attributes": [
@@ -15268,7 +15268,7 @@
15268
15268
  }
15269
15269
  },
15270
15270
  {
15271
- "name": "dap-ds-icon-subtract-line",
15271
+ "name": "dap-ds-icon-upload-2-fill",
15272
15272
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
15273
15273
  "doc-url": "",
15274
15274
  "attributes": [
@@ -15321,7 +15321,7 @@
15321
15321
  }
15322
15322
  },
15323
15323
  {
15324
- "name": "dap-ds-icon-subtract-line2",
15324
+ "name": "dap-ds-icon-upload-2-line",
15325
15325
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
15326
15326
  "doc-url": "",
15327
15327
  "attributes": [
@@ -15374,7 +15374,7 @@
15374
15374
  }
15375
15375
  },
15376
15376
  {
15377
- "name": "dap-ds-icon-time-fill",
15377
+ "name": "dap-ds-icon-upload-line",
15378
15378
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
15379
15379
  "doc-url": "",
15380
15380
  "attributes": [
@@ -15427,7 +15427,7 @@
15427
15427
  }
15428
15428
  },
15429
15429
  {
15430
- "name": "dap-ds-icon-time-line",
15430
+ "name": "dap-ds-icon-zoom-in-line",
15431
15431
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
15432
15432
  "doc-url": "",
15433
15433
  "attributes": [
@@ -15480,7 +15480,7 @@
15480
15480
  }
15481
15481
  },
15482
15482
  {
15483
- "name": "dap-ds-icon-upload-2-fill",
15483
+ "name": "dap-ds-icon-zoom-out-line",
15484
15484
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
15485
15485
  "doc-url": "",
15486
15486
  "attributes": [
@@ -15533,7 +15533,7 @@
15533
15533
  }
15534
15534
  },
15535
15535
  {
15536
- "name": "dap-ds-icon-upload-2-line",
15536
+ "name": "dap-ds-icon-account-circle-fill",
15537
15537
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
15538
15538
  "doc-url": "",
15539
15539
  "attributes": [
@@ -15586,7 +15586,7 @@
15586
15586
  }
15587
15587
  },
15588
15588
  {
15589
- "name": "dap-ds-icon-upload-line",
15589
+ "name": "dap-ds-icon-account-circle-line",
15590
15590
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
15591
15591
  "doc-url": "",
15592
15592
  "attributes": [
@@ -15639,7 +15639,7 @@
15639
15639
  }
15640
15640
  },
15641
15641
  {
15642
- "name": "dap-ds-icon-zoom-in-line",
15642
+ "name": "dap-ds-icon-user-fill",
15643
15643
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
15644
15644
  "doc-url": "",
15645
15645
  "attributes": [
@@ -15692,7 +15692,7 @@
15692
15692
  }
15693
15693
  },
15694
15694
  {
15695
- "name": "dap-ds-icon-zoom-out-line",
15695
+ "name": "dap-ds-icon-user-line",
15696
15696
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
15697
15697
  "doc-url": "",
15698
15698
  "attributes": [