dap-design-system 0.53.21 → 0.53.22

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 (13) hide show
  1. package/dist/{components-Dz0ahnZp.js → components-DNV-ln93.js} +30 -30
  2. package/dist/{components-Dz0ahnZp.js.map → components-DNV-ln93.js.map} +1 -1
  3. package/dist/components.js +1 -1
  4. package/dist/dds.js +1 -1
  5. package/dist/events/dds-change.d.ts +1 -59
  6. package/dist/manifest/types/vue/index.d.ts +539 -539
  7. package/dist/manifest/vscode.html-custom-data.json +362 -362
  8. package/dist/manifest/web-types.json +1265 -1265
  9. package/dist/react/index.d.ts +17 -17
  10. package/dist/react-types.ts +17 -17
  11. package/dist/react.js +178 -178
  12. package/dist/react.js.map +1 -1
  13. package/package.json +1 -1
package/dist/manifest/web-types.json CHANGED
@@ -7,42 +7,110 @@
7
7
  "html": {
8
8
  "elements": [
9
9
  {
10
- "name": "dap-ds-accordion-group",
11
- "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.",
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
12
  "doc-url": "",
13
- "attributes": [
13
+ "attributes": [],
14
+ "slots": [
14
15
  {
15
- "name": "autoClose",
16
- "description": "Whether to close other accordions when one is opened.",
17
- "value": { "type": "string", "default": "'true'" }
16
+ "name": "default",
17
+ "description": "The content of the accordion."
18
18
  },
19
19
  {
20
- "name": "variant",
21
- "description": "The variant of the accordion",
22
- "value": {
23
- "type": "'default' | 'collapsed' | 'clean' | 'clean-collapsed'",
24
- "default": "'default'"
25
- }
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."
26
30
  }
27
31
  ],
28
- "slots": [
29
- { "name": "", "description": "The content of the accordion group." }
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
+ }
30
43
  ],
31
- "events": [],
32
44
  "js": {
33
45
  "properties": [
34
46
  {
35
- "name": "autoClose",
36
- "description": "Whether to close other accordions when one is opened.",
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.",
37
59
  "type": "string"
38
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
+ },
39
81
  {
40
82
  "name": "variant",
41
- "description": "The variant of the accordion",
83
+ "description": "The variant of the accordion.",
42
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"
43
100
  }
44
101
  ],
45
- "events": []
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
+ ]
46
114
  }
47
115
  },
48
116
  {
@@ -145,107 +213,237 @@
145
213
  }
146
214
  },
147
215
  {
148
- "name": "dap-ds-anchor-heading",
149
- "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.",
216
+ "name": "dap-ds-avatar",
217
+ "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.",
150
218
  "doc-url": "",
151
219
  "attributes": [
220
+ {
221
+ "name": "shape",
222
+ "description": "The shape of the avatar",
223
+ "value": {
224
+ "type": "'circle' | 'rounded' | 'square'",
225
+ "default": "'circle'"
226
+ }
227
+ },
152
228
  {
153
229
  "name": "variant",
154
- "description": "The variant of the heading. Default is `h2`. Can be `h1`, `h2`, `h3`, `h4`, `h5`, or `h6`.",
155
- "value": { "type": "HeadingVariant" }
230
+ "description": "The variant type of the avatar",
231
+ "value": {
232
+ "type": "'image' | 'initials' | 'icon'",
233
+ "default": "'image'"
234
+ }
156
235
  },
157
236
  {
158
- "name": "label",
159
- "description": "The label of the heading.",
237
+ "name": "src",
238
+ "description": "The source of the avatar image",
160
239
  "value": { "type": "string" }
161
- }
162
- ],
163
- "events": [],
164
- "js": {
165
- "properties": [
166
- { "name": "variant", "type": "HeadingVariant" },
167
- { "name": "label", "type": "string" },
168
- { "name": "elementId" },
169
- { "name": "anchorTitle" }
170
- ],
171
- "events": []
172
- }
173
- },
174
- {
175
- "name": "dap-ds-badge",
176
- "description": "A badge is a small status descriptor for UI elements.\n---\n\n\n### **Slots:**\n - _default_ - The content of the badge.\n- **icon** - The icon of the badge.\n\n### **CSS Properties:**\n - **--dds-badge-border-width** - The width of the badge's border (default: var(--dds-border-width-base)) _(default: undefined)_\n- **--dds-badge-border-style** - The style of the badge's border (default: solid) _(default: undefined)_\n- **--dds-badge-border-radius** - The border radius of the badge (default: var(--dds-radius-base)) _(default: undefined)_\n- **--dds-badge-font-weight** - The font weight of the badge text (default: var(--dds-font-weight-bold)) _(default: undefined)_\n- **--dds-badge-line-height** - The line height of the badge text (default: 1.2) _(default: undefined)_\n- **--dds-badge-transition** - The transition property for the badge (default: all 0.2s ease-in-out) _(default: undefined)_\n- **--dds-badge-padding-sm** - The padding of the small badge (default: var(--dds-spacing-100) var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-badge-padding-lg** - The padding of the large badge (default: var(--dds-spacing-100) var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-badge-font-size-sm** - The font size of the small badge (default: var(--dds-font-xs)) _(default: undefined)_\n- **--dds-badge-font-size-lg** - The font size of the large badge (default: var(--dds-font-sm)) _(default: undefined)_\n- **--dds-badge-neutral-border-color** - The border color of the neutral badge (default: var(--dds-border-neutral-base)) _(default: undefined)_\n- **--dds-badge-neutral-background** - The background color of the neutral badge (default: var(--dds-background-neutral-medium)) _(default: undefined)_\n- **--dds-badge-neutral-color** - The text color of the neutral badge (default: var(--dds-text-neutral-subtle)) _(default: undefined)_\n- **--dds-badge-brand-border-color** - The border color of the brand badge (default: var(--dds-border-brand-base)) _(default: undefined)_\n- **--dds-badge-brand-background** - The background color of the brand badge (default: var(--dds-background-brand-medium)) _(default: undefined)_\n- **--dds-badge-brand-color** - The text color of the brand badge (default: var(--dds-text-brand-subtle)) _(default: undefined)_\n- **--dds-badge-info-border-color** - The border color of the info badge (default: var(--dds-border-informative-base)) _(default: undefined)_\n- **--dds-badge-info-background** - The background color of the info badge (default: var(--dds-background-informative-medium)) _(default: undefined)_\n- **--dds-badge-info-color** - The text color of the info badge (default: var(--dds-text-informative-subtle)) _(default: undefined)_\n- **--dds-badge-positive-border-color** - The border color of the positive badge (default: var(--dds-border-positive-base)) _(default: undefined)_\n- **--dds-badge-positive-background** - The background color of the positive badge (default: var(--dds-background-positive-medium)) _(default: undefined)_\n- **--dds-badge-positive-color** - The text color of the positive badge (default: var(--dds-text-positive-subtle)) _(default: undefined)_\n- **--dds-badge-warning-border-color** - The border color of the warning badge (default: var(--dds-border-warning-subtle)) _(default: undefined)_\n- **--dds-badge-warning-background** - The background color of the warning badge (default: var(--dds-background-warning-medium)) _(default: undefined)_\n- **--dds-badge-warning-color** - The text color of the warning badge (default: var(--dds-text-warning-subtle)) _(default: undefined)_\n- **--dds-badge-negative-border-color** - The border color of the negative badge (default: var(--dds-border-negative-base)) _(default: undefined)_\n- **--dds-badge-negative-background** - The background color of the negative badge (default: var(--dds-background-negative-medium)) _(default: undefined)_\n- **--dds-badge-negative-color** - The text color of the negative badge (default: var(--dds-text-negative-subtle)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main container of the badge.\n- **icon** - The icon of the badge.\n- **content** - The content of the badge.\n- **icon-base** - The base of the icon.",
177
- "doc-url": "",
178
- "attributes": [
240
+ },
179
241
  {
180
- "name": "type",
181
- "description": "The type of the badge",
182
- "value": {
183
- "type": "'neutral' | 'brand' | 'info' | 'positive' | 'warning' | 'negative'",
184
- "default": "'neutral'"
185
- }
242
+ "name": "alt",
243
+ "description": "The alt text of the avatar",
244
+ "value": { "type": "string" }
186
245
  },
187
246
  {
188
- "name": "icon",
189
- "description": "The icon of the badge, this is a name of a built in icon",
190
- "value": { "type": "string | undefined" }
247
+ "name": "initials",
248
+ "description": "The initials to display when variant is 'initials'",
249
+ "value": { "type": "string" }
191
250
  },
192
251
  {
193
- "name": "live",
194
- "description": "Whether the badge represents dynamic content that should announce changes",
252
+ "name": "label",
253
+ "description": "Accessible label for the avatar",
254
+ "value": { "type": "string" }
255
+ },
256
+ {
257
+ "name": "loading",
258
+ "description": "Loading state indicator",
259
+ "value": { "type": "boolean", "default": "false" }
260
+ },
261
+ {
262
+ "name": "interactive",
263
+ "description": "Whether the avatar is interactive (clickable)",
195
264
  "value": { "type": "boolean", "default": "false" }
265
+ },
266
+ {
267
+ "name": "width",
268
+ "description": "The width of the avatar. This will override the size",
269
+ "value": { "type": "number" }
270
+ },
271
+ {
272
+ "name": "height",
273
+ "description": "The height of the avatar. This will override the size",
274
+ "value": { "type": "number" }
196
275
  }
197
276
  ],
198
277
  "slots": [
199
- { "name": "", "description": "The content of the badge." },
200
- { "name": "icon", "description": "The icon of the badge." }
278
+ {
279
+ "name": "icon",
280
+ "description": "The icon to display when variant is 'icon'."
281
+ },
282
+ {
283
+ "name": "fallback",
284
+ "description": "Custom fallback content when image fails to load."
285
+ }
286
+ ],
287
+ "events": [
288
+ {
289
+ "name": "dds-load",
290
+ "description": "Fired when the image loads successfully."
291
+ },
292
+ {
293
+ "name": "dds-error",
294
+ "description": "Fired when the image fails to load."
295
+ }
201
296
  ],
202
- "events": [],
203
297
  "js": {
204
298
  "properties": [
205
299
  {
206
- "name": "type",
207
- "description": "The type of the badge",
208
- "type": "'neutral' | 'brand' | 'info' | 'positive' | 'warning' | 'negative'"
300
+ "name": "shape",
301
+ "description": "The shape of the avatar",
302
+ "type": "'circle' | 'rounded' | 'square'"
209
303
  },
210
304
  {
211
- "name": "icon",
212
- "description": "The icon of the badge, this is a name of a built in icon",
213
- "type": "string | undefined"
305
+ "name": "variant",
306
+ "description": "The variant type of the avatar",
307
+ "type": "'image' | 'initials' | 'icon'"
214
308
  },
215
309
  {
216
- "name": "live",
217
- "description": "Whether the badge represents dynamic content that should announce changes",
218
- "type": "boolean"
310
+ "name": "src",
311
+ "description": "The source of the avatar image",
312
+ "type": "string"
219
313
  },
220
314
  {
221
- "name": "size",
222
- "description": "The size of the badge. Default is `sm`.",
223
- "type": "'sm' | 'lg'"
315
+ "name": "alt",
316
+ "description": "The alt text of the avatar",
317
+ "type": "string"
224
318
  },
225
319
  {
226
- "name": "sizeMap",
227
- "description": "Responsive size map (e.g. \"md:lg\").",
320
+ "name": "initials",
321
+ "description": "The initials to display when variant is 'initials'",
228
322
  "type": "string"
229
- }
230
- ],
231
- "events": []
232
- }
233
- },
234
- {
235
- "name": "dap-ds-banner",
236
- "description": "A banner is a message displayed at the top of the page to provide important information to the user.\n---\n\n\n### **Events:**\n - **dds-close** - Event fired when the banner is closed.\n\n### **Slots:**\n - _default_ - The content of the banner.\n- **actions** - Actions of banner\n- **icon** - The icon of the banner.\n\n### **CSS Properties:**\n - **--dds-banner-gap** - The gap between banner elements (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-banner-line-height** - The line height of the banner text (default: var(--dds-font-line-height-xlarge)) _(default: undefined)_\n- **--dds-banner-transition** - The transition property for the banner (default: all 0.2s ease-in-out) _(default: undefined)_\n- **--dds-banner-brand-background** - The background color of the brand banner (default: var(--dds-banner-background-brand)) _(default: undefined)_\n- **--dds-banner-brand-icon-color** - The color of the brand banner icon (default: var(--dds-banner-icon-brand)) _(default: undefined)_\n- **--dds-banner-brand-text-color** - The text color of the brand banner (default: var(--dds-banner-text-brand)) _(default: undefined)_\n- **--dds-banner-brand-action-color** - The color of the brand banner actions (default: var(--dds-banner-action-enabled)) _(default: undefined)_\n- **--dds-banner-info-background** - The background color of the info banner (default: var(--dds-banner-background-informative)) _(default: undefined)_\n- **--dds-banner-info-icon-color** - The color of the info banner icon (default: var(--dds-banner-icon-informative)) _(default: undefined)_\n- **--dds-banner-info-text-color** - The text color of the info banner (default: var(--dds-banner-text-informative)) _(default: undefined)_\n- **--dds-banner-info-action-color** - The color of the info banner actions (default: var(--dds-banner-action-enabled)) _(default: undefined)_\n- **--dds-banner-positive-background** - The background color of the positive banner (default: var(--dds-banner-background-positive)) _(default: undefined)_\n- **--dds-banner-positive-icon-color** - The color of the positive banner icon (default: var(--dds-banner-icon-positive)) _(default: undefined)_\n- **--dds-banner-positive-text-color** - The text color of the positive banner (default: var(--dds-banner-text-positive)) _(default: undefined)_\n- **--dds-banner-positive-action-color** - The color of the positive banner actions (default: var(--dds-banner-action-enabled)) _(default: undefined)_\n- **--dds-banner-warning-background** - The background color of the warning banner (default: var(--dds-banner-background-warning)) _(default: undefined)_\n- **--dds-banner-warning-icon-color** - The color of the warning banner icon (default: var(--dds-banner-icon-warning)) _(default: undefined)_\n- **--dds-banner-warning-text-color** - The text color of the warning banner (default: var(--dds-banner-text-warning)) _(default: undefined)_\n- **--dds-banner-warning-action-color** - The color of the warning banner actions (default: var(--dds-banner-action-inverted-enabled)) _(default: undefined)_\n- **--dds-banner-negative-background** - The background color of the negative banner (default: var(--dds-banner-background-negative)) _(default: undefined)_\n- **--dds-banner-negative-icon-color** - The color of the negative banner icon (default: var(--dds-banner-icon-negative)) _(default: undefined)_\n- **--dds-banner-negative-text-color** - The text color of the negative banner (default: var(--dds-banner-text-negative)) _(default: undefined)_\n- **--dds-banner-negative-action-color** - The color of the negative banner actions (default: var(--dds-banner-action-inverted-enabled)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main banner container.\n- **card-base** - The wrapper card container.\n- **icon** - The icon of the banner.\n- **icon-element** - The icon element of the banner.\n- **icon-base** - The base of the icon.\n- **closebutton** - The close button of the banner.\n- **close-icon-element** - The icon element of the close button.\n- **close-icon-base** - The base of the close button icon.\n- **actions** - The actions of the banner.\n- **title** - The title of the banner.",
237
- "doc-url": "",
238
- "attributes": [
239
- {
240
- "name": "variant",
241
- "description": "The variant of the banner",
242
- "value": {
243
- "type": "'brand' | 'positive' | 'info' | 'warning' | 'negative'",
244
- "default": "'brand'"
245
- }
246
- },
247
- {
248
- "name": "closeable",
323
+ },
324
+ {
325
+ "name": "label",
326
+ "description": "Accessible label for the avatar",
327
+ "type": "string"
328
+ },
329
+ {
330
+ "name": "loading",
331
+ "description": "Loading state indicator",
332
+ "type": "boolean"
333
+ },
334
+ {
335
+ "name": "interactive",
336
+ "description": "Whether the avatar is interactive (clickable)",
337
+ "type": "boolean"
338
+ },
339
+ {
340
+ "name": "width",
341
+ "description": "The width of the avatar. This will override the size",
342
+ "type": "number"
343
+ },
344
+ {
345
+ "name": "height",
346
+ "description": "The height of the avatar. This will override the size",
347
+ "type": "number"
348
+ },
349
+ {
350
+ "name": "size",
351
+ "description": "The size of the avatar. Default is `md`.",
352
+ "type": "'xxs' | 'xs' | 'sm' | 'md' | 'lg'"
353
+ },
354
+ {
355
+ "name": "sizeMap",
356
+ "description": "Responsive size map (e.g. \"md:lg\").",
357
+ "type": "string"
358
+ }
359
+ ],
360
+ "events": [
361
+ {
362
+ "name": "dds-load",
363
+ "description": "Fired when the image loads successfully."
364
+ },
365
+ {
366
+ "name": "dds-error",
367
+ "description": "Fired when the image fails to load."
368
+ }
369
+ ]
370
+ }
371
+ },
372
+ {
373
+ "name": "dap-ds-badge",
374
+ "description": "A badge is a small status descriptor for UI elements.\n---\n\n\n### **Slots:**\n - _default_ - The content of the badge.\n- **icon** - The icon of the badge.\n\n### **CSS Properties:**\n - **--dds-badge-border-width** - The width of the badge's border (default: var(--dds-border-width-base)) _(default: undefined)_\n- **--dds-badge-border-style** - The style of the badge's border (default: solid) _(default: undefined)_\n- **--dds-badge-border-radius** - The border radius of the badge (default: var(--dds-radius-base)) _(default: undefined)_\n- **--dds-badge-font-weight** - The font weight of the badge text (default: var(--dds-font-weight-bold)) _(default: undefined)_\n- **--dds-badge-line-height** - The line height of the badge text (default: 1.2) _(default: undefined)_\n- **--dds-badge-transition** - The transition property for the badge (default: all 0.2s ease-in-out) _(default: undefined)_\n- **--dds-badge-padding-sm** - The padding of the small badge (default: var(--dds-spacing-100) var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-badge-padding-lg** - The padding of the large badge (default: var(--dds-spacing-100) var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-badge-font-size-sm** - The font size of the small badge (default: var(--dds-font-xs)) _(default: undefined)_\n- **--dds-badge-font-size-lg** - The font size of the large badge (default: var(--dds-font-sm)) _(default: undefined)_\n- **--dds-badge-neutral-border-color** - The border color of the neutral badge (default: var(--dds-border-neutral-base)) _(default: undefined)_\n- **--dds-badge-neutral-background** - The background color of the neutral badge (default: var(--dds-background-neutral-medium)) _(default: undefined)_\n- **--dds-badge-neutral-color** - The text color of the neutral badge (default: var(--dds-text-neutral-subtle)) _(default: undefined)_\n- **--dds-badge-brand-border-color** - The border color of the brand badge (default: var(--dds-border-brand-base)) _(default: undefined)_\n- **--dds-badge-brand-background** - The background color of the brand badge (default: var(--dds-background-brand-medium)) _(default: undefined)_\n- **--dds-badge-brand-color** - The text color of the brand badge (default: var(--dds-text-brand-subtle)) _(default: undefined)_\n- **--dds-badge-info-border-color** - The border color of the info badge (default: var(--dds-border-informative-base)) _(default: undefined)_\n- **--dds-badge-info-background** - The background color of the info badge (default: var(--dds-background-informative-medium)) _(default: undefined)_\n- **--dds-badge-info-color** - The text color of the info badge (default: var(--dds-text-informative-subtle)) _(default: undefined)_\n- **--dds-badge-positive-border-color** - The border color of the positive badge (default: var(--dds-border-positive-base)) _(default: undefined)_\n- **--dds-badge-positive-background** - The background color of the positive badge (default: var(--dds-background-positive-medium)) _(default: undefined)_\n- **--dds-badge-positive-color** - The text color of the positive badge (default: var(--dds-text-positive-subtle)) _(default: undefined)_\n- **--dds-badge-warning-border-color** - The border color of the warning badge (default: var(--dds-border-warning-subtle)) _(default: undefined)_\n- **--dds-badge-warning-background** - The background color of the warning badge (default: var(--dds-background-warning-medium)) _(default: undefined)_\n- **--dds-badge-warning-color** - The text color of the warning badge (default: var(--dds-text-warning-subtle)) _(default: undefined)_\n- **--dds-badge-negative-border-color** - The border color of the negative badge (default: var(--dds-border-negative-base)) _(default: undefined)_\n- **--dds-badge-negative-background** - The background color of the negative badge (default: var(--dds-background-negative-medium)) _(default: undefined)_\n- **--dds-badge-negative-color** - The text color of the negative badge (default: var(--dds-text-negative-subtle)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main container of the badge.\n- **icon** - The icon of the badge.\n- **content** - The content of the badge.\n- **icon-base** - The base of the icon.",
375
+ "doc-url": "",
376
+ "attributes": [
377
+ {
378
+ "name": "type",
379
+ "description": "The type of the badge",
380
+ "value": {
381
+ "type": "'neutral' | 'brand' | 'info' | 'positive' | 'warning' | 'negative'",
382
+ "default": "'neutral'"
383
+ }
384
+ },
385
+ {
386
+ "name": "icon",
387
+ "description": "The icon of the badge, this is a name of a built in icon",
388
+ "value": { "type": "string | undefined" }
389
+ },
390
+ {
391
+ "name": "live",
392
+ "description": "Whether the badge represents dynamic content that should announce changes",
393
+ "value": { "type": "boolean", "default": "false" }
394
+ }
395
+ ],
396
+ "slots": [
397
+ { "name": "", "description": "The content of the badge." },
398
+ { "name": "icon", "description": "The icon of the badge." }
399
+ ],
400
+ "events": [],
401
+ "js": {
402
+ "properties": [
403
+ {
404
+ "name": "type",
405
+ "description": "The type of the badge",
406
+ "type": "'neutral' | 'brand' | 'info' | 'positive' | 'warning' | 'negative'"
407
+ },
408
+ {
409
+ "name": "icon",
410
+ "description": "The icon of the badge, this is a name of a built in icon",
411
+ "type": "string | undefined"
412
+ },
413
+ {
414
+ "name": "live",
415
+ "description": "Whether the badge represents dynamic content that should announce changes",
416
+ "type": "boolean"
417
+ },
418
+ {
419
+ "name": "size",
420
+ "description": "The size of the badge. Default is `sm`.",
421
+ "type": "'sm' | 'lg'"
422
+ },
423
+ {
424
+ "name": "sizeMap",
425
+ "description": "Responsive size map (e.g. \"md:lg\").",
426
+ "type": "string"
427
+ }
428
+ ],
429
+ "events": []
430
+ }
431
+ },
432
+ {
433
+ "name": "dap-ds-banner",
434
+ "description": "A banner is a message displayed at the top of the page to provide important information to the user.\n---\n\n\n### **Events:**\n - **dds-close** - Event fired when the banner is closed.\n\n### **Slots:**\n - _default_ - The content of the banner.\n- **actions** - Actions of banner\n- **icon** - The icon of the banner.\n\n### **CSS Properties:**\n - **--dds-banner-gap** - The gap between banner elements (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-banner-line-height** - The line height of the banner text (default: var(--dds-font-line-height-xlarge)) _(default: undefined)_\n- **--dds-banner-transition** - The transition property for the banner (default: all 0.2s ease-in-out) _(default: undefined)_\n- **--dds-banner-brand-background** - The background color of the brand banner (default: var(--dds-banner-background-brand)) _(default: undefined)_\n- **--dds-banner-brand-icon-color** - The color of the brand banner icon (default: var(--dds-banner-icon-brand)) _(default: undefined)_\n- **--dds-banner-brand-text-color** - The text color of the brand banner (default: var(--dds-banner-text-brand)) _(default: undefined)_\n- **--dds-banner-brand-action-color** - The color of the brand banner actions (default: var(--dds-banner-action-enabled)) _(default: undefined)_\n- **--dds-banner-info-background** - The background color of the info banner (default: var(--dds-banner-background-informative)) _(default: undefined)_\n- **--dds-banner-info-icon-color** - The color of the info banner icon (default: var(--dds-banner-icon-informative)) _(default: undefined)_\n- **--dds-banner-info-text-color** - The text color of the info banner (default: var(--dds-banner-text-informative)) _(default: undefined)_\n- **--dds-banner-info-action-color** - The color of the info banner actions (default: var(--dds-banner-action-enabled)) _(default: undefined)_\n- **--dds-banner-positive-background** - The background color of the positive banner (default: var(--dds-banner-background-positive)) _(default: undefined)_\n- **--dds-banner-positive-icon-color** - The color of the positive banner icon (default: var(--dds-banner-icon-positive)) _(default: undefined)_\n- **--dds-banner-positive-text-color** - The text color of the positive banner (default: var(--dds-banner-text-positive)) _(default: undefined)_\n- **--dds-banner-positive-action-color** - The color of the positive banner actions (default: var(--dds-banner-action-enabled)) _(default: undefined)_\n- **--dds-banner-warning-background** - The background color of the warning banner (default: var(--dds-banner-background-warning)) _(default: undefined)_\n- **--dds-banner-warning-icon-color** - The color of the warning banner icon (default: var(--dds-banner-icon-warning)) _(default: undefined)_\n- **--dds-banner-warning-text-color** - The text color of the warning banner (default: var(--dds-banner-text-warning)) _(default: undefined)_\n- **--dds-banner-warning-action-color** - The color of the warning banner actions (default: var(--dds-banner-action-inverted-enabled)) _(default: undefined)_\n- **--dds-banner-negative-background** - The background color of the negative banner (default: var(--dds-banner-background-negative)) _(default: undefined)_\n- **--dds-banner-negative-icon-color** - The color of the negative banner icon (default: var(--dds-banner-icon-negative)) _(default: undefined)_\n- **--dds-banner-negative-text-color** - The text color of the negative banner (default: var(--dds-banner-text-negative)) _(default: undefined)_\n- **--dds-banner-negative-action-color** - The color of the negative banner actions (default: var(--dds-banner-action-inverted-enabled)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main banner container.\n- **card-base** - The wrapper card container.\n- **icon** - The icon of the banner.\n- **icon-element** - The icon element of the banner.\n- **icon-base** - The base of the icon.\n- **closebutton** - The close button of the banner.\n- **close-icon-element** - The icon element of the close button.\n- **close-icon-base** - The base of the close button icon.\n- **actions** - The actions of the banner.\n- **title** - The title of the banner.",
435
+ "doc-url": "",
436
+ "attributes": [
437
+ {
438
+ "name": "variant",
439
+ "description": "The variant of the banner",
440
+ "value": {
441
+ "type": "'brand' | 'positive' | 'info' | 'warning' | 'negative'",
442
+ "default": "'brand'"
443
+ }
444
+ },
445
+ {
446
+ "name": "closeable",
249
447
  "description": "Whether the banner is closeable",
250
448
  "value": { "type": "boolean" }
251
449
  },
@@ -360,272 +558,74 @@
360
558
  }
361
559
  },
362
560
  {
363
- "name": "dap-ds-accordion",
364
- "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.",
561
+ "name": "dap-ds-anchor-heading",
562
+ "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.",
365
563
  "doc-url": "",
366
- "attributes": [],
367
- "slots": [
368
- {
369
- "name": "default",
370
- "description": "The content of the accordion."
371
- },
372
- {
373
- "name": "heading",
374
- "description": "The heading of the accordion."
375
- },
564
+ "attributes": [
376
565
  {
377
- "name": "icon-opened",
378
- "description": "The icon when the accordion is opened."
566
+ "name": "variant",
567
+ "description": "The variant of the heading. Default is `h2`. Can be `h1`, `h2`, `h3`, `h4`, `h5`, or `h6`.",
568
+ "value": { "type": "HeadingVariant" }
379
569
  },
380
570
  {
381
- "name": "icon-closed",
382
- "description": "The icon when the accordion is closed."
571
+ "name": "label",
572
+ "description": "The label of the heading.",
573
+ "value": { "type": "string" }
383
574
  }
384
575
  ],
385
- "events": [
576
+ "events": [],
577
+ "js": {
578
+ "properties": [
579
+ { "name": "variant", "type": "HeadingVariant" },
580
+ { "name": "label", "type": "string" },
581
+ { "name": "elementId" },
582
+ { "name": "anchorTitle" }
583
+ ],
584
+ "events": []
585
+ }
586
+ },
587
+ {
588
+ "name": "dap-ds-accordion-group",
589
+ "description": "An accordion group is a collection of accordion components.\n---\n\n\n### **Slots:**\n - _default_ - The content of the accordion group.\n\n### **CSS Properties:**\n - **--dds-accordion-group-spacing** - Controls the gap between accordion items (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-accordion-group-border-color** - Controls the border color (default: var(--dds-border-neutral-subtle)) _(default: undefined)_\n- **--dds-accordion-group-border-width** - Controls the border width (default: var(--dds-border-width-base)) _(default: undefined)_\n- **--dds-accordion-group-border-radius** - Controls the border radius (default: var(--dds-radius-base)) _(default: undefined)_\n- **--dds-accordion-group-background** - Controls the background color (default: transparent) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main accordion group container.",
590
+ "doc-url": "",
591
+ "attributes": [
386
592
  {
387
- "name": "dds-opened",
388
- "type": "{ open: boolean, item: AccordionBaseElement }",
389
- "description": "Event fired when the accordion is opened."
593
+ "name": "autoClose",
594
+ "description": "Whether to close other accordions when one is opened.",
595
+ "value": { "type": "string", "default": "'true'" }
390
596
  },
391
597
  {
392
- "name": "dds-closed",
393
- "type": "{ open: boolean, item: AccordionBaseElement }",
394
- "description": "Event fired when the accordion is closed."
598
+ "name": "variant",
599
+ "description": "The variant of the accordion",
600
+ "value": {
601
+ "type": "'default' | 'collapsed' | 'clean' | 'clean-collapsed'",
602
+ "default": "'default'"
603
+ }
395
604
  }
396
605
  ],
606
+ "slots": [
607
+ { "name": "", "description": "The content of the accordion group." }
608
+ ],
609
+ "events": [],
397
610
  "js": {
398
611
  "properties": [
399
612
  {
400
- "name": "size",
401
- "description": "The size of the accordion. Default is `sm`. Visual variants are sm and lg (other sizes map to sm).",
402
- "type": "'xxs' | 'xs' | 'sm' | 'md' | 'lg'"
403
- },
404
- {
405
- "name": "sizeMap",
406
- "description": "Responsive size map (e.g. \"md:lg\")",
407
- "type": "string"
408
- },
409
- {
410
- "name": "parentSized",
411
- "description": "When \"true\", size is taken from the parent card if present.",
412
- "type": "string"
413
- },
414
- {
415
- "name": "heading",
416
- "description": "The heading text of the accordion, this will be used as the aria label of the heading also if ariaLabel is not provided",
613
+ "name": "autoClose",
614
+ "description": "Whether to close other accordions when one is opened.",
417
615
  "type": "string"
418
616
  },
419
- {
420
- "name": "headingLevel",
421
- "description": "The heading level of the accordion. Default is `4`.",
422
- "type": "1 | 2 | 3 | 4 | 5 | 6"
423
- },
424
- {
425
- "name": "opened",
426
- "description": "Whether the accordion is opened. Default is `false`.",
427
- "type": "boolean"
428
- },
429
- {
430
- "name": "iconLocation",
431
- "description": "The location of the icon. Default is `right`.",
432
- "type": "'left' | 'right'"
433
- },
434
617
  {
435
618
  "name": "variant",
436
- "description": "The variant of the accordion.",
619
+ "description": "The variant of the accordion",
437
620
  "type": "'default' | 'collapsed' | 'clean' | 'clean-collapsed'"
438
- },
439
- {
440
- "name": "lastItem",
441
- "description": "Whether the accordion is the last item.",
442
- "type": "boolean"
443
- },
444
- {
445
- "name": "disabled",
446
- "description": "Whether the accordion is disabled.",
447
- "type": "boolean"
448
- },
449
- {
450
- "name": "loading",
451
- "description": "Whether the accordion is in loading state.",
452
- "type": "boolean"
453
621
  }
454
622
  ],
455
- "events": [
456
- {
457
- "name": "dds-opened",
458
- "type": "{ open: boolean, item: AccordionBaseElement }",
459
- "description": "Event fired when the accordion is opened."
460
- },
461
- {
462
- "name": "dds-closed",
463
- "type": "{ open: boolean, item: AccordionBaseElement }",
464
- "description": "Event fired when the accordion is closed."
465
- }
466
- ]
623
+ "events": []
467
624
  }
468
625
  },
469
626
  {
470
- "name": "dap-ds-avatar",
471
- "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.",
472
- "doc-url": "",
473
- "attributes": [
474
- {
475
- "name": "shape",
476
- "description": "The shape of the avatar",
477
- "value": {
478
- "type": "'circle' | 'rounded' | 'square'",
479
- "default": "'circle'"
480
- }
481
- },
482
- {
483
- "name": "variant",
484
- "description": "The variant type of the avatar",
485
- "value": {
486
- "type": "'image' | 'initials' | 'icon'",
487
- "default": "'image'"
488
- }
489
- },
490
- {
491
- "name": "src",
492
- "description": "The source of the avatar image",
493
- "value": { "type": "string" }
494
- },
495
- {
496
- "name": "alt",
497
- "description": "The alt text of the avatar",
498
- "value": { "type": "string" }
499
- },
500
- {
501
- "name": "initials",
502
- "description": "The initials to display when variant is 'initials'",
503
- "value": { "type": "string" }
504
- },
505
- {
506
- "name": "label",
507
- "description": "Accessible label for the avatar",
508
- "value": { "type": "string" }
509
- },
510
- {
511
- "name": "loading",
512
- "description": "Loading state indicator",
513
- "value": { "type": "boolean", "default": "false" }
514
- },
515
- {
516
- "name": "interactive",
517
- "description": "Whether the avatar is interactive (clickable)",
518
- "value": { "type": "boolean", "default": "false" }
519
- },
520
- {
521
- "name": "width",
522
- "description": "The width of the avatar. This will override the size",
523
- "value": { "type": "number" }
524
- },
525
- {
526
- "name": "height",
527
- "description": "The height of the avatar. This will override the size",
528
- "value": { "type": "number" }
529
- }
530
- ],
531
- "slots": [
532
- {
533
- "name": "icon",
534
- "description": "The icon to display when variant is 'icon'."
535
- },
536
- {
537
- "name": "fallback",
538
- "description": "Custom fallback content when image fails to load."
539
- }
540
- ],
541
- "events": [
542
- {
543
- "name": "dds-load",
544
- "description": "Fired when the image loads successfully."
545
- },
546
- {
547
- "name": "dds-error",
548
- "description": "Fired when the image fails to load."
549
- }
550
- ],
551
- "js": {
552
- "properties": [
553
- {
554
- "name": "shape",
555
- "description": "The shape of the avatar",
556
- "type": "'circle' | 'rounded' | 'square'"
557
- },
558
- {
559
- "name": "variant",
560
- "description": "The variant type of the avatar",
561
- "type": "'image' | 'initials' | 'icon'"
562
- },
563
- {
564
- "name": "src",
565
- "description": "The source of the avatar image",
566
- "type": "string"
567
- },
568
- {
569
- "name": "alt",
570
- "description": "The alt text of the avatar",
571
- "type": "string"
572
- },
573
- {
574
- "name": "initials",
575
- "description": "The initials to display when variant is 'initials'",
576
- "type": "string"
577
- },
578
- {
579
- "name": "label",
580
- "description": "Accessible label for the avatar",
581
- "type": "string"
582
- },
583
- {
584
- "name": "loading",
585
- "description": "Loading state indicator",
586
- "type": "boolean"
587
- },
588
- {
589
- "name": "interactive",
590
- "description": "Whether the avatar is interactive (clickable)",
591
- "type": "boolean"
592
- },
593
- {
594
- "name": "width",
595
- "description": "The width of the avatar. This will override the size",
596
- "type": "number"
597
- },
598
- {
599
- "name": "height",
600
- "description": "The height of the avatar. This will override the size",
601
- "type": "number"
602
- },
603
- {
604
- "name": "size",
605
- "description": "The size of the avatar. Default is `md`.",
606
- "type": "'xxs' | 'xs' | 'sm' | 'md' | 'lg'"
607
- },
608
- {
609
- "name": "sizeMap",
610
- "description": "Responsive size map (e.g. \"md:lg\").",
611
- "type": "string"
612
- }
613
- ],
614
- "events": [
615
- {
616
- "name": "dds-load",
617
- "description": "Fired when the image loads successfully."
618
- },
619
- {
620
- "name": "dds-error",
621
- "description": "Fired when the image fails to load."
622
- }
623
- ]
624
- }
625
- },
626
- {
627
- "name": "dap-ds-breadcrumb-item",
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.",
627
+ "name": "dap-ds-breadcrumb-item",
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.",
629
629
  "doc-url": "",
630
630
  "attributes": [
631
631
  {
@@ -1228,66 +1228,261 @@
1228
1228
  }
1229
1229
  },
1230
1230
  {
1231
- "name": "dap-ds-card-actions",
1232
- "description": "A card actions is a container for actions in a card.\n---\n\n\n### **Slots:**\n - _default_ - The content of the card actions.\n\n### **CSS Properties:**\n - **--dds-card-actions-gap** - The gap between items in the card actions. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-card-actions-padding-lg** - The padding for large size card actions. (default: var(--dds-spacing-600)) _(default: undefined)_\n- **--dds-card-actions-padding-md** - The padding for medium size card actions. (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-card-actions-padding-sm** - The padding for small size card actions. (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-card-actions-margin-lg** - The margin for large size card actions spacing. (default: var(--dds-spacing-600)) _(default: undefined)_\n- **--dds-card-actions-margin-md** - The margin for medium size card actions spacing. (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-card-actions-margin-sm** - The margin for small size card actions spacing. (default: var(--dds-spacing-400)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main card actions container.",
1233
- "doc-url": "",
1234
- "attributes": [],
1235
- "slots": [
1236
- { "name": "", "description": "The content of the card actions." }
1237
- ],
1238
- "events": [],
1239
- "js": {
1240
- "properties": [
1241
- {
1242
- "name": "spacing",
1243
- "description": "The spacing of the card actions. This adds a margin to the card actions. Default is `bottom`.",
1244
- "type": "'top' | 'bottom' | 'both' | 'none'"
1245
- },
1246
- { "name": "parentSized", "type": "string" },
1247
- {
1248
- "name": "size",
1249
- "description": "The size of the card actions. Default is `sm`.",
1250
- "type": "'sm' | 'md' | 'lg'"
1251
- },
1252
- {
1253
- "name": "sizeMap",
1254
- "description": "Responsive size map (e.g. \"md:lg\").",
1255
- "type": "string"
1256
- }
1257
- ],
1258
- "events": []
1259
- }
1260
- },
1261
- {
1262
- "name": "dap-ds-card-content",
1263
- "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.",
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.",
1264
1233
  "doc-url": "",
1265
1234
  "attributes": [
1266
1235
  {
1267
- "name": "renderAs",
1268
- "description": "The base rendered root tag of the card content.",
1269
- "value": { "type": "string", "default": "'div'" }
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
+ }
1270
1262
  }
1271
1263
  ],
1272
- "slots": [
1273
- { "name": "", "description": "The content of the card-content." }
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
+ }
1274
1285
  ],
1275
- "events": [],
1276
1286
  "js": {
1277
1287
  "properties": [
1278
1288
  {
1279
- "name": "renderAs",
1280
- "description": "The base rendered root tag of the card content.",
1281
- "type": "string"
1289
+ "name": "indeterminate",
1290
+ "description": "Whether the checkbox is indeterminate",
1291
+ "type": "boolean"
1282
1292
  },
1283
1293
  {
1284
- "name": "spacing",
1285
- "description": "The spacing of the card content. This adds a margin to the card subtitle. Default is `bottom`.",
1286
- "type": "'top' | 'bottom' | 'both' | 'none'"
1294
+ "name": "preventDefault",
1295
+ "description": "Whether the checkbox should prevent the default action",
1296
+ "type": "boolean"
1287
1297
  },
1288
- { "name": "parentSized", "type": "string" },
1289
1298
  {
1290
- "name": "size",
1299
+ "name": "border",
1300
+ "description": "This sets up border around the checkbox, when true.",
1301
+ "type": "boolean"
1302
+ },
1303
+ {
1304
+ "name": "readonly",
1305
+ "description": "Whether the checkbox is readonly (cannot be changed but value is submitted with form).",
1306
+ "type": "boolean"
1307
+ },
1308
+ {
1309
+ "name": "type",
1310
+ "description": "The type of the checkbox",
1311
+ "type": "'normal' | 'background'"
1312
+ },
1313
+ { "name": "focusElement", "type": "HTMLInputElement" },
1314
+ { "name": "feedbackId" },
1315
+ {
1316
+ "name": "name",
1317
+ "description": "The name of the checkbox.",
1318
+ "type": "string"
1319
+ },
1320
+ {
1321
+ "name": "value",
1322
+ "description": "The value of the checkbox.",
1323
+ "type": "string"
1324
+ },
1325
+ {
1326
+ "name": "checked",
1327
+ "description": "Whether the checkbox is checked.",
1328
+ "type": "boolean"
1329
+ },
1330
+ {
1331
+ "name": "label",
1332
+ "description": "The label of the checkbox.",
1333
+ "type": "string"
1334
+ },
1335
+ {
1336
+ "name": "description",
1337
+ "description": "The description of the checkbox.",
1338
+ "type": "string"
1339
+ },
1340
+ {
1341
+ "name": "disabled",
1342
+ "description": "Whether the checkbox is disabled.",
1343
+ "type": "boolean"
1344
+ },
1345
+ {
1346
+ "name": "required",
1347
+ "description": "Whether the checkbox is required.",
1348
+ "type": "boolean"
1349
+ },
1350
+ {
1351
+ "name": "size",
1352
+ "description": "The size of the checkbox. Default is 'sm'.",
1353
+ "type": "'xs' | 'sm' | 'lg'"
1354
+ },
1355
+ {
1356
+ "name": "sizeMap",
1357
+ "description": "Responsive size map (e.g. \"md:lg\").",
1358
+ "type": "string"
1359
+ },
1360
+ {
1361
+ "name": "labelPlacement",
1362
+ "description": "The placement of the label.",
1363
+ "type": "'left' | 'right'"
1364
+ },
1365
+ {
1366
+ "name": "descriptionPlacement",
1367
+ "description": "The placement of the description.",
1368
+ "type": "'top' | 'bottom'"
1369
+ },
1370
+ {
1371
+ "name": "subtle",
1372
+ "description": "The weight of the label.",
1373
+ "type": "boolean"
1374
+ },
1375
+ {
1376
+ "name": "feedback",
1377
+ "description": "The feedback of the checkbox.",
1378
+ "type": "string"
1379
+ },
1380
+ {
1381
+ "name": "feedbackType",
1382
+ "description": "The feedback type of the checkbox.",
1383
+ "type": "'negative' | 'positive' | 'warning'"
1384
+ },
1385
+ {
1386
+ "name": "invalid",
1387
+ "description": "The invalid state of the checkbox.",
1388
+ "type": "boolean"
1389
+ },
1390
+ {
1391
+ "name": "optional",
1392
+ "description": "The optional state of the checkbox.",
1393
+ "type": "boolean"
1394
+ },
1395
+ {
1396
+ "name": "optionalLabel",
1397
+ "description": "The optional label of the checkbox.",
1398
+ "type": "string"
1399
+ }
1400
+ ],
1401
+ "events": [
1402
+ {
1403
+ "name": "dds-change",
1404
+ "type": "{ checked: boolean, indeterminate: boolean, value: string, disabled: boolean, readonly: boolean, type: 'checkbox' }",
1405
+ "description": "Fired when the checkbox is checked or unchecked."
1406
+ },
1407
+ {
1408
+ "name": "dds-blur",
1409
+ "type": "{ void }",
1410
+ "description": "Emitted when the checkbox loses focus."
1411
+ },
1412
+ {
1413
+ "name": "dds-focus",
1414
+ "type": "{ void }",
1415
+ "description": "Emitted when the checkbox gains focus."
1416
+ },
1417
+ {
1418
+ "name": "dds-input",
1419
+ "type": "{ checked: boolean, indeterminate: boolean, value: string, disabled: boolean, readonly: boolean }",
1420
+ "description": "Emitted when the checkbox receives input."
1421
+ }
1422
+ ]
1423
+ }
1424
+ },
1425
+ {
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",
1291
1486
  "description": "The size of the card subtitle. Default is `sm`.",
1292
1487
  "type": "'sm' | 'md' | 'lg'"
1293
1488
  },
@@ -1669,262 +1864,67 @@
1669
1864
  }
1670
1865
  },
1671
1866
  {
1672
- "name": "dap-ds-checkbox",
1673
- "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.",
1867
+ "name": "dap-ds-code-puncher-slot",
1868
+ "description": "Individual digit input slot for code puncher.\n---\n\n\n### **CSS Parts:**\n - **base** - The slot container.\n- **input** - The input element.",
1869
+ "doc-url": "",
1870
+ "attributes": [],
1871
+ "events": [],
1872
+ "js": {
1873
+ "properties": [
1874
+ { "name": "disabled", "type": "boolean" },
1875
+ { "name": "readonly", "type": "boolean" },
1876
+ { "name": "size", "type": "'xs' | 'sm' | 'lg'" }
1877
+ ],
1878
+ "events": []
1879
+ }
1880
+ },
1881
+ {
1882
+ "name": "dap-ds-code-puncher",
1883
+ "description": "A composable PIN/OTP input component for entering verification codes.\n---\n\n\n### **Events:**\n - **dds-input** - Fires on each digit input.\n- **dds-change** - Fires when value changes.\n- **dds-complete** - Fires when all slots are filled.\n- **dds-focus** - Fires when component gains focus.\n- **dds-blur** - Fires when component loses focus.\n\n### **Slots:**\n - **default** - Slot for code-puncher-group, code-puncher-slot, and code-puncher-separator elements.\n\n### **CSS Parts:**\n - **base** - The main container.\n- **slots** - The slots container.\n- **label** - The label element.\n- **description** - The description element.\n- **feedback** - The feedback element.",
1674
1884
  "doc-url": "",
1675
1885
  "attributes": [
1676
1886
  {
1677
- "name": "indeterminate",
1678
- "description": "Whether the checkbox is indeterminate",
1887
+ "name": "mask",
1888
+ "description": "Mask input like password. Default is false.",
1679
1889
  "value": { "type": "boolean", "default": "false" }
1680
1890
  },
1681
1891
  {
1682
- "name": "preventDefault",
1683
- "description": "Whether the checkbox should prevent the default action",
1684
- "value": { "type": "boolean", "default": "false" }
1892
+ "name": "pattern",
1893
+ "description": "Regex pattern for allowed characters. Default is '[0-9]'.",
1894
+ "value": { "type": "string", "default": "'[0-9]'" }
1685
1895
  },
1686
1896
  {
1687
- "name": "border",
1688
- "description": "This sets up border around the checkbox, when true.",
1689
- "value": { "type": "boolean", "default": "false" }
1897
+ "name": "placeholder",
1898
+ "description": "Placeholder character for empty slots.",
1899
+ "value": { "type": "string", "default": "''" }
1690
1900
  },
1691
1901
  {
1692
- "name": "readonly",
1693
- "description": "Whether the checkbox is readonly (cannot be changed but value is submitted with form).",
1694
- "value": { "type": "boolean", "default": "false" }
1695
- },
1902
+ "name": "autocomplete",
1903
+ "description": "Autocomplete hint. Default is 'one-time-code'.",
1904
+ "value": { "type": "string", "default": "'one-time-code'" }
1905
+ }
1906
+ ],
1907
+ "slots": [
1696
1908
  {
1697
- "name": "type",
1698
- "description": "The type of the checkbox",
1699
- "value": {
1700
- "type": "'normal' | 'background'",
1701
- "default": "'normal'"
1702
- }
1909
+ "name": "default",
1910
+ "description": "Slot for code-puncher-group, code-puncher-slot, and code-puncher-separator elements."
1703
1911
  }
1704
1912
  ],
1705
1913
  "events": [
1914
+ {
1915
+ "name": "dds-input",
1916
+ "type": "{ value: string, index: number }",
1917
+ "description": "Fires on each digit input."
1918
+ },
1706
1919
  {
1707
1920
  "name": "dds-change",
1708
- "type": "{ checked: boolean, indeterminate: boolean, value: string, disabled: boolean, readonly: boolean, type: 'checkbox' }",
1709
- "description": "Fired when the checkbox is checked or unchecked."
1921
+ "type": "{ value: string }",
1922
+ "description": "Fires when value changes."
1710
1923
  },
1711
1924
  {
1712
- "name": "dds-blur",
1713
- "type": "{ void }",
1714
- "description": "Emitted when the checkbox loses focus."
1715
- },
1716
- {
1717
- "name": "dds-focus",
1718
- "type": "{ void }",
1719
- "description": "Emitted when the checkbox gains focus."
1720
- },
1721
- {
1722
- "name": "dds-input",
1723
- "type": "{ checked: boolean, indeterminate: boolean, value: string, disabled: boolean, readonly: boolean }",
1724
- "description": "Emitted when the checkbox receives input."
1725
- }
1726
- ],
1727
- "js": {
1728
- "properties": [
1729
- {
1730
- "name": "indeterminate",
1731
- "description": "Whether the checkbox is indeterminate",
1732
- "type": "boolean"
1733
- },
1734
- {
1735
- "name": "preventDefault",
1736
- "description": "Whether the checkbox should prevent the default action",
1737
- "type": "boolean"
1738
- },
1739
- {
1740
- "name": "border",
1741
- "description": "This sets up border around the checkbox, when true.",
1742
- "type": "boolean"
1743
- },
1744
- {
1745
- "name": "readonly",
1746
- "description": "Whether the checkbox is readonly (cannot be changed but value is submitted with form).",
1747
- "type": "boolean"
1748
- },
1749
- {
1750
- "name": "type",
1751
- "description": "The type of the checkbox",
1752
- "type": "'normal' | 'background'"
1753
- },
1754
- { "name": "focusElement", "type": "HTMLInputElement" },
1755
- { "name": "feedbackId" },
1756
- {
1757
- "name": "name",
1758
- "description": "The name of the checkbox.",
1759
- "type": "string"
1760
- },
1761
- {
1762
- "name": "value",
1763
- "description": "The value of the checkbox.",
1764
- "type": "string"
1765
- },
1766
- {
1767
- "name": "checked",
1768
- "description": "Whether the checkbox is checked.",
1769
- "type": "boolean"
1770
- },
1771
- {
1772
- "name": "label",
1773
- "description": "The label of the checkbox.",
1774
- "type": "string"
1775
- },
1776
- {
1777
- "name": "description",
1778
- "description": "The description of the checkbox.",
1779
- "type": "string"
1780
- },
1781
- {
1782
- "name": "disabled",
1783
- "description": "Whether the checkbox is disabled.",
1784
- "type": "boolean"
1785
- },
1786
- {
1787
- "name": "required",
1788
- "description": "Whether the checkbox is required.",
1789
- "type": "boolean"
1790
- },
1791
- {
1792
- "name": "size",
1793
- "description": "The size of the checkbox. Default is 'sm'.",
1794
- "type": "'xs' | 'sm' | 'lg'"
1795
- },
1796
- {
1797
- "name": "sizeMap",
1798
- "description": "Responsive size map (e.g. \"md:lg\").",
1799
- "type": "string"
1800
- },
1801
- {
1802
- "name": "labelPlacement",
1803
- "description": "The placement of the label.",
1804
- "type": "'left' | 'right'"
1805
- },
1806
- {
1807
- "name": "descriptionPlacement",
1808
- "description": "The placement of the description.",
1809
- "type": "'top' | 'bottom'"
1810
- },
1811
- {
1812
- "name": "subtle",
1813
- "description": "The weight of the label.",
1814
- "type": "boolean"
1815
- },
1816
- {
1817
- "name": "feedback",
1818
- "description": "The feedback of the checkbox.",
1819
- "type": "string"
1820
- },
1821
- {
1822
- "name": "feedbackType",
1823
- "description": "The feedback type of the checkbox.",
1824
- "type": "'negative' | 'positive' | 'warning'"
1825
- },
1826
- {
1827
- "name": "invalid",
1828
- "description": "The invalid state of the checkbox.",
1829
- "type": "boolean"
1830
- },
1831
- {
1832
- "name": "optional",
1833
- "description": "The optional state of the checkbox.",
1834
- "type": "boolean"
1835
- },
1836
- {
1837
- "name": "optionalLabel",
1838
- "description": "The optional label of the checkbox.",
1839
- "type": "string"
1840
- }
1841
- ],
1842
- "events": [
1843
- {
1844
- "name": "dds-change",
1845
- "type": "{ checked: boolean, indeterminate: boolean, value: string, disabled: boolean, readonly: boolean, type: 'checkbox' }",
1846
- "description": "Fired when the checkbox is checked or unchecked."
1847
- },
1848
- {
1849
- "name": "dds-blur",
1850
- "type": "{ void }",
1851
- "description": "Emitted when the checkbox loses focus."
1852
- },
1853
- {
1854
- "name": "dds-focus",
1855
- "type": "{ void }",
1856
- "description": "Emitted when the checkbox gains focus."
1857
- },
1858
- {
1859
- "name": "dds-input",
1860
- "type": "{ checked: boolean, indeterminate: boolean, value: string, disabled: boolean, readonly: boolean }",
1861
- "description": "Emitted when the checkbox receives input."
1862
- }
1863
- ]
1864
- }
1865
- },
1866
- {
1867
- "name": "dap-ds-code-puncher-slot",
1868
- "description": "Individual digit input slot for code puncher.\n---\n\n\n### **CSS Parts:**\n - **base** - The slot container.\n- **input** - The input element.",
1869
- "doc-url": "",
1870
- "attributes": [],
1871
- "events": [],
1872
- "js": {
1873
- "properties": [
1874
- { "name": "disabled", "type": "boolean" },
1875
- { "name": "readonly", "type": "boolean" },
1876
- { "name": "size", "type": "'xs' | 'sm' | 'lg'" }
1877
- ],
1878
- "events": []
1879
- }
1880
- },
1881
- {
1882
- "name": "dap-ds-code-puncher",
1883
- "description": "A composable PIN/OTP input component for entering verification codes.\n---\n\n\n### **Events:**\n - **dds-input** - Fires on each digit input.\n- **dds-change** - Fires when value changes.\n- **dds-complete** - Fires when all slots are filled.\n- **dds-focus** - Fires when component gains focus.\n- **dds-blur** - Fires when component loses focus.\n\n### **Slots:**\n - **default** - Slot for code-puncher-group, code-puncher-slot, and code-puncher-separator elements.\n\n### **CSS Parts:**\n - **base** - The main container.\n- **slots** - The slots container.\n- **label** - The label element.\n- **description** - The description element.\n- **feedback** - The feedback element.",
1884
- "doc-url": "",
1885
- "attributes": [
1886
- {
1887
- "name": "mask",
1888
- "description": "Mask input like password. Default is false.",
1889
- "value": { "type": "boolean", "default": "false" }
1890
- },
1891
- {
1892
- "name": "pattern",
1893
- "description": "Regex pattern for allowed characters. Default is '[0-9]'.",
1894
- "value": { "type": "string", "default": "'[0-9]'" }
1895
- },
1896
- {
1897
- "name": "placeholder",
1898
- "description": "Placeholder character for empty slots.",
1899
- "value": { "type": "string", "default": "''" }
1900
- },
1901
- {
1902
- "name": "autocomplete",
1903
- "description": "Autocomplete hint. Default is 'one-time-code'.",
1904
- "value": { "type": "string", "default": "'one-time-code'" }
1905
- }
1906
- ],
1907
- "slots": [
1908
- {
1909
- "name": "default",
1910
- "description": "Slot for code-puncher-group, code-puncher-slot, and code-puncher-separator elements."
1911
- }
1912
- ],
1913
- "events": [
1914
- {
1915
- "name": "dds-input",
1916
- "type": "{ value: string, index: number }",
1917
- "description": "Fires on each digit input."
1918
- },
1919
- {
1920
- "name": "dds-change",
1921
- "type": "{ value: string }",
1922
- "description": "Fires when value changes."
1923
- },
1924
- {
1925
- "name": "dds-complete",
1926
- "type": "{ value: string }",
1927
- "description": "Fires when all slots are filled."
1925
+ "name": "dds-complete",
1926
+ "type": "{ value: string }",
1927
+ "description": "Fires when all slots are filled."
1928
1928
  },
1929
1929
  {
1930
1930
  "name": "dds-focus",
@@ -7924,64 +7924,330 @@
7924
7924
  },
7925
7925
  {
7926
7926
  "name": "feedback",
7927
- "description": "The feedback content of the search.",
7927
+ "description": "The feedback content of the search.",
7928
+ "type": "string"
7929
+ },
7930
+ {
7931
+ "name": "feedbackType",
7932
+ "description": "The feedback type of the search.",
7933
+ "type": "'negative' | 'positive' | 'warning' | 'info'"
7934
+ },
7935
+ {
7936
+ "name": "allowManualInput",
7937
+ "description": "Whether the search allows manual input, or free text.",
7938
+ "type": "boolean"
7939
+ },
7940
+ {
7941
+ "name": "searchForText",
7942
+ "description": "Whether the search should search for the selected item text.",
7943
+ "type": "boolean"
7944
+ },
7945
+ {
7946
+ "name": "searchButtonAriaLabel",
7947
+ "description": "The aria label of the search button.",
7948
+ "type": "string"
7949
+ },
7950
+ {
7951
+ "name": "openOnEmpty",
7952
+ "description": "Whether the search should open on empty results.",
7953
+ "type": "boolean"
7954
+ },
7955
+ {
7956
+ "name": "subtle",
7957
+ "description": "Subtle color version",
7958
+ "type": "boolean"
7959
+ }
7960
+ ],
7961
+ "events": [
7962
+ {
7963
+ "name": "dds-change",
7964
+ "description": "Fired when the search value changes."
7965
+ },
7966
+ {
7967
+ "name": "dds-blur",
7968
+ "description": "Emitted when the search loses focus."
7969
+ },
7970
+ {
7971
+ "name": "dds-focus",
7972
+ "description": "Emitted when the search gains focus."
7973
+ },
7974
+ {
7975
+ "name": "dds-clear",
7976
+ "description": "Emitted when the search is cleared."
7977
+ },
7978
+ {
7979
+ "name": "dds-search",
7980
+ "description": "Emitted when the search input value changes."
7981
+ },
7982
+ {
7983
+ "name": "dds-input",
7984
+ "description": "Emitted when typing happens in the search input."
7985
+ }
7986
+ ]
7987
+ }
7988
+ },
7989
+ {
7990
+ "name": "dap-ds-select",
7991
+ "description": "A select is a form element that allows the user to select one option from a set.\n---\n\n\n### **Events:**\n - **dds-change** - Fired when the select value changes.\n- **dds-blur** - Emitted when the select loses focus.\n- **dds-focus** - Emitted when the select gains focus.\n- **dds-opened** - Emitted when the select dropdown is opened.\n- **dds-closed** - Emitted when the select dropdown is closed.\n\n### **Methods:**\n - **getActiveDescendant()** - Get the active descendant element for aria-activedescendant\nReturns the currently focused option when dropdown is open, otherwise null\n\n### **Slots:**\n - _default_ - The option list of the select.\n- **indicator-icon** - The indicator icon of the select.\n\n### **CSS Properties:**\n - **--dds-select-min-height** - Minimum height of the select component (default: var(--dds-spacing-1000)) _(default: undefined)_\n- **--dds-select-padding** - Padding of the select component (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-select-column-gap** - Column gap of the select component (default: var(--dds-spacing-100)) _(default: undefined)_\n- **--dds-select-border-color** - Border color of the select component (default: var(--dds-border-neutral-base)) _(default: undefined)_\n- **--dds-select-border-radius** - Border radius of the select component (default: var(--dds-radius-base)) _(default: undefined)_\n- **--dds-select-bg-color** - Background color of the select component (default: var(--dds-background-neutral-subtle)) _(default: undefined)_\n- **--dds-select-text-color** - Text color of the select component (default: var(--dds-text-neutral-base)) _(default: undefined)_\n- **--dds-select-icon-right** - Right position of the icon (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-select-icon-color** - Color of the icon (default: var(--dds-icon-neutral-subtle)) _(default: undefined)_\n- **--dds-select-text-margin-right** - Right margin of the text (default: var(--dds-spacing-600)) _(default: undefined)_\n- **--dds-select-disabled-border-color** - Border color when disabled (default: var(--dds-background-neutral-stronger)) _(default: undefined)_\n- **--dds-select-disabled-bg-color** - Background color when disabled (default: var(--dds-background-neutral-stronger)) _(default: undefined)_\n- **--dds-select-disabled-text-color** - Text color when disabled (default: var(--dds-text-neutral-disabled)) _(default: undefined)_\n- **--dds-select-error-border-color** - Border color in error state (default: var(--dds-border-negative-base)) _(default: undefined)_\n- **--dds-select-success-border-color** - Border color in success state (default: var(--dds-border-positive-base)) _(default: undefined)_\n- **--dds-select-xs-min-height** - Minimum height for extra small size (default: var(--dds-spacing-800)) _(default: undefined)_\n- **--dds-select-xs-padding** - Padding for extra small size (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-select-xs-font-size** - Font size for extra small size (default: var(--dds-font-sm)) _(default: undefined)_\n- **--dds-select-lg-min-height** - Minimum height for large size (default: var(--dds-spacing-1200)) _(default: undefined)_\n- **--dds-select-lg-padding** - Padding for large size (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-select-lg-font-size** - Font size for large size (default: var(--dds-font-lg)) _(default: undefined)_\n- **--dds-select-lg-icon-right** - Right position of the icon for large size (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-select-lg-icon-color** - Color of the icon for large size (default: var(--dds-text-icon-neutral-subtle)) _(default: undefined)_\n- **--dds-select-popup-bg-color** - Background color of the popup (default: var(--dds-background-neutral-subtle)) _(default: undefined)_\n- **--dds-select-icon-opened-transform** - Transform of the icon when the select is opened (default: rotate(90deg)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main select container.\n- **trigger** - The trigger button of the select.\n- **label** - The label of the select.\n- **description** - The description of the select.\n- **feedback** - The feedback of the select.\n- **tooltip** - The tooltip of the select.\n- **popup-base** - The base of the popup.\n- **option-list** - The option list of the select.\n- **option-item** - The option item of the select.\n- **option-item-base** - The base of the option item.\n- **option-item-label** - The label of the option item.\n- **option-item-prefix** - The prefix of the option item.\n- **option-item-suffix** - The suffix of the option item.\n- **indicator-icon** - The indicator icon of the select.\n- **mobile-tray** - The mobile tray of the select.\n- **mobile-content** - The mobile content of the select.\n- **mobile-body** - The mobile body of the select.\n- **mobile-header** - The mobile header of the select.\n- **mobile-footer** - The mobile footer of the select.",
7992
+ "doc-url": "",
7993
+ "attributes": [
7994
+ {
7995
+ "name": "placement",
7996
+ "description": "The popup placement of the select",
7997
+ "value": {
7998
+ "type": "'top' | 'top-start' | 'top-end' | 'right' | 'right-start'| 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end'",
7999
+ "default": "'bottom-start'"
8000
+ }
8001
+ },
8002
+ {
8003
+ "name": "opened",
8004
+ "description": "Whether the select dropdown is opened.",
8005
+ "value": { "type": "boolean", "default": "false" }
8006
+ },
8007
+ {
8008
+ "name": "placeholder",
8009
+ "description": "The placeholder of the select.",
8010
+ "value": { "type": "string | null" }
8011
+ },
8012
+ {
8013
+ "name": "sync",
8014
+ "description": "The sync size of the select dropdown",
8015
+ "value": { "type": "boolean | undefined" }
8016
+ },
8017
+ {
8018
+ "name": "isMobile",
8019
+ "description": "Whether the select is in mobile mode.",
8020
+ "value": { "type": "boolean | undefined", "default": "false" }
8021
+ },
8022
+ {
8023
+ "name": "native",
8024
+ "description": "Whether to render a native HTML select element for mobile-friendly option selection.",
8025
+ "value": { "type": "boolean | undefined", "default": "false" }
8026
+ },
8027
+ {
8028
+ "name": "loading",
8029
+ "description": "The loading state of the select.",
8030
+ "value": { "type": "boolean | undefined", "default": "false" }
8031
+ },
8032
+ {
8033
+ "name": "maxHeight",
8034
+ "description": "The max heigth of the select dropdown.",
8035
+ "value": { "type": "number | undefined" }
8036
+ },
8037
+ {
8038
+ "name": "noAnimation",
8039
+ "description": "Whether the select dropdown indicator is animated or not",
8040
+ "value": { "type": "boolean | undefined", "default": "false" }
8041
+ },
8042
+ {
8043
+ "name": "floatingStrategy",
8044
+ "description": "The floating strategy of the select dropdown",
8045
+ "value": {
8046
+ "type": "'absolute' | 'fixed'",
8047
+ "default": "'absolute'"
8048
+ }
8049
+ }
8050
+ ],
8051
+ "slots": [
8052
+ { "name": "", "description": "The option list of the select." },
8053
+ {
8054
+ "name": "indicator-icon",
8055
+ "description": "The indicator icon of the select."
8056
+ }
8057
+ ],
8058
+ "events": [
8059
+ {
8060
+ "name": "dds-change",
8061
+ "type": "{ value: string }",
8062
+ "description": "Fired when the select value changes."
8063
+ },
8064
+ {
8065
+ "name": "dds-blur",
8066
+ "type": "{ void }",
8067
+ "description": "Emitted when the select loses focus."
8068
+ },
8069
+ {
8070
+ "name": "dds-focus",
8071
+ "type": "{ void }",
8072
+ "description": "Emitted when the select gains focus."
8073
+ },
8074
+ {
8075
+ "name": "dds-opened",
8076
+ "type": "{ void }",
8077
+ "description": "Emitted when the select dropdown is opened."
8078
+ },
8079
+ {
8080
+ "name": "dds-closed",
8081
+ "type": "{ void }",
8082
+ "description": "Emitted when the select dropdown is closed."
8083
+ }
8084
+ ],
8085
+ "js": {
8086
+ "properties": [
8087
+ {
8088
+ "name": "placement",
8089
+ "description": "The popup placement of the select",
8090
+ "type": "'top' | 'top-start' | 'top-end' | 'right' | 'right-start'| 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end'"
8091
+ },
8092
+ {
8093
+ "name": "opened",
8094
+ "description": "Whether the select dropdown is opened.",
8095
+ "type": "boolean"
8096
+ },
8097
+ {
8098
+ "name": "placeholder",
8099
+ "description": "The placeholder of the select.",
8100
+ "type": "string | null"
8101
+ },
8102
+ {
8103
+ "name": "sync",
8104
+ "description": "The sync size of the select dropdown",
8105
+ "type": "boolean | undefined"
8106
+ },
8107
+ {
8108
+ "name": "isMobile",
8109
+ "description": "Whether the select is in mobile mode.",
8110
+ "type": "boolean | undefined"
8111
+ },
8112
+ {
8113
+ "name": "native",
8114
+ "description": "Whether to render a native HTML select element for mobile-friendly option selection.",
8115
+ "type": "boolean | undefined"
8116
+ },
8117
+ {
8118
+ "name": "loading",
8119
+ "description": "The loading state of the select.",
8120
+ "type": "boolean | undefined"
8121
+ },
8122
+ {
8123
+ "name": "maxHeight",
8124
+ "description": "The max heigth of the select dropdown.",
8125
+ "type": "number | undefined"
8126
+ },
8127
+ {
8128
+ "name": "noAnimation",
8129
+ "description": "Whether the select dropdown indicator is animated or not",
8130
+ "type": "boolean | undefined"
8131
+ },
8132
+ {
8133
+ "name": "floatingStrategy",
8134
+ "description": "The floating strategy of the select dropdown",
8135
+ "type": "'absolute' | 'fixed'"
8136
+ },
8137
+ { "name": "focusElement" },
8138
+ { "name": "validity", "type": "ValidityState" },
8139
+ { "name": "validationMessage", "type": "string" },
8140
+ {
8141
+ "name": "selectedDisplayText",
8142
+ "description": "Get the current display text for the selected item, dynamically fetching from the option",
8143
+ "type": "string | null"
8144
+ },
8145
+ {
8146
+ "name": "value",
8147
+ "description": "The value of the select.",
8148
+ "type": "string"
8149
+ },
8150
+ {
8151
+ "name": "label",
8152
+ "description": "The label of the select.",
8153
+ "type": "string"
8154
+ },
8155
+ {
8156
+ "name": "description",
8157
+ "description": "The description of the select.",
8158
+ "type": "string"
8159
+ },
8160
+ {
8161
+ "name": "tooltip",
8162
+ "description": "The tooltip of the select.",
8163
+ "type": "string"
8164
+ },
8165
+ {
8166
+ "name": "tooltipPlacement",
8167
+ "description": "The tooltip placement of the select.",
8168
+ "type": "'top' | 'right' | 'bottom' | 'left'"
8169
+ },
8170
+ {
8171
+ "name": "size",
8172
+ "description": "The size of the select. Default is `sm`.",
8173
+ "type": "'xs' | 'sm' | 'lg'"
8174
+ },
8175
+ {
8176
+ "name": "disabled",
8177
+ "description": "Whether the select is disabled.",
8178
+ "type": "boolean"
8179
+ },
8180
+ {
8181
+ "name": "required",
8182
+ "description": "Whether the select is required.",
8183
+ "type": "boolean"
8184
+ },
8185
+ {
8186
+ "name": "readonly",
8187
+ "description": "Whether the select is readonly.",
8188
+ "type": "boolean"
8189
+ },
8190
+ {
8191
+ "name": "autofocus",
8192
+ "description": "Whether the select is autofocus.",
8193
+ "type": "boolean"
8194
+ },
8195
+ {
8196
+ "name": "feedback",
8197
+ "description": "The feedback of the select.",
7928
8198
  "type": "string"
7929
8199
  },
7930
8200
  {
7931
8201
  "name": "feedbackType",
7932
- "description": "The feedback type of the search.",
7933
- "type": "'negative' | 'positive' | 'warning' | 'info'"
8202
+ "description": "The feedback type of the select. Can be `negative`, `positive`, or `warning`.",
8203
+ "type": "negative | positive | warning"
7934
8204
  },
7935
8205
  {
7936
- "name": "allowManualInput",
7937
- "description": "Whether the search allows manual input, or free text.",
7938
- "type": "boolean"
8206
+ "name": "status",
8207
+ "description": "The status of the select. Can be `success` or `error`.",
8208
+ "type": "string"
7939
8209
  },
7940
8210
  {
7941
- "name": "searchForText",
7942
- "description": "Whether the search should search for the selected item text.",
8211
+ "name": "optional",
8212
+ "description": "The optional state of the select.",
7943
8213
  "type": "boolean"
7944
8214
  },
7945
8215
  {
7946
- "name": "searchButtonAriaLabel",
7947
- "description": "The aria label of the search button.",
8216
+ "name": "optionalLabel",
8217
+ "description": "The optional label of the select.",
7948
8218
  "type": "string"
7949
8219
  },
7950
- {
7951
- "name": "openOnEmpty",
7952
- "description": "Whether the search should open on empty results.",
7953
- "type": "boolean"
7954
- },
7955
8220
  {
7956
8221
  "name": "subtle",
7957
- "description": "Subtle color version",
8222
+ "description": "The weight of the label. Default is `false`",
7958
8223
  "type": "boolean"
7959
8224
  }
7960
8225
  ],
7961
8226
  "events": [
7962
8227
  {
7963
8228
  "name": "dds-change",
7964
- "description": "Fired when the search value changes."
8229
+ "type": "{ value: string }",
8230
+ "description": "Fired when the select value changes."
7965
8231
  },
7966
8232
  {
7967
8233
  "name": "dds-blur",
7968
- "description": "Emitted when the search loses focus."
8234
+ "type": "{ void }",
8235
+ "description": "Emitted when the select loses focus."
7969
8236
  },
7970
8237
  {
7971
8238
  "name": "dds-focus",
7972
- "description": "Emitted when the search gains focus."
7973
- },
7974
- {
7975
- "name": "dds-clear",
7976
- "description": "Emitted when the search is cleared."
8239
+ "type": "{ void }",
8240
+ "description": "Emitted when the select gains focus."
7977
8241
  },
7978
8242
  {
7979
- "name": "dds-search",
7980
- "description": "Emitted when the search input value changes."
8243
+ "name": "dds-opened",
8244
+ "type": "{ void }",
8245
+ "description": "Emitted when the select dropdown is opened."
7981
8246
  },
7982
8247
  {
7983
- "name": "dds-input",
7984
- "description": "Emitted when typing happens in the search input."
8248
+ "name": "dds-closed",
8249
+ "type": "{ void }",
8250
+ "description": "Emitted when the select dropdown is closed."
7985
8251
  }
7986
8252
  ]
7987
8253
  }
@@ -8191,269 +8457,82 @@
8191
8457
  }
8192
8458
  },
8193
8459
  {
8194
- "name": "dap-ds-select",
8195
- "description": "A select is a form element that allows the user to select one option from a set.\n---\n\n\n### **Events:**\n - **dds-change** - Fired when the select value changes.\n- **dds-blur** - Emitted when the select loses focus.\n- **dds-focus** - Emitted when the select gains focus.\n- **dds-opened** - Emitted when the select dropdown is opened.\n- **dds-closed** - Emitted when the select dropdown is closed.\n\n### **Methods:**\n - **getActiveDescendant()** - Get the active descendant element for aria-activedescendant\nReturns the currently focused option when dropdown is open, otherwise null\n\n### **Slots:**\n - _default_ - The option list of the select.\n- **indicator-icon** - The indicator icon of the select.\n\n### **CSS Properties:**\n - **--dds-select-min-height** - Minimum height of the select component (default: var(--dds-spacing-1000)) _(default: undefined)_\n- **--dds-select-padding** - Padding of the select component (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-select-column-gap** - Column gap of the select component (default: var(--dds-spacing-100)) _(default: undefined)_\n- **--dds-select-border-color** - Border color of the select component (default: var(--dds-border-neutral-base)) _(default: undefined)_\n- **--dds-select-border-radius** - Border radius of the select component (default: var(--dds-radius-base)) _(default: undefined)_\n- **--dds-select-bg-color** - Background color of the select component (default: var(--dds-background-neutral-subtle)) _(default: undefined)_\n- **--dds-select-text-color** - Text color of the select component (default: var(--dds-text-neutral-base)) _(default: undefined)_\n- **--dds-select-icon-right** - Right position of the icon (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-select-icon-color** - Color of the icon (default: var(--dds-icon-neutral-subtle)) _(default: undefined)_\n- **--dds-select-text-margin-right** - Right margin of the text (default: var(--dds-spacing-600)) _(default: undefined)_\n- **--dds-select-disabled-border-color** - Border color when disabled (default: var(--dds-background-neutral-stronger)) _(default: undefined)_\n- **--dds-select-disabled-bg-color** - Background color when disabled (default: var(--dds-background-neutral-stronger)) _(default: undefined)_\n- **--dds-select-disabled-text-color** - Text color when disabled (default: var(--dds-text-neutral-disabled)) _(default: undefined)_\n- **--dds-select-error-border-color** - Border color in error state (default: var(--dds-border-negative-base)) _(default: undefined)_\n- **--dds-select-success-border-color** - Border color in success state (default: var(--dds-border-positive-base)) _(default: undefined)_\n- **--dds-select-xs-min-height** - Minimum height for extra small size (default: var(--dds-spacing-800)) _(default: undefined)_\n- **--dds-select-xs-padding** - Padding for extra small size (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-select-xs-font-size** - Font size for extra small size (default: var(--dds-font-sm)) _(default: undefined)_\n- **--dds-select-lg-min-height** - Minimum height for large size (default: var(--dds-spacing-1200)) _(default: undefined)_\n- **--dds-select-lg-padding** - Padding for large size (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-select-lg-font-size** - Font size for large size (default: var(--dds-font-lg)) _(default: undefined)_\n- **--dds-select-lg-icon-right** - Right position of the icon for large size (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-select-lg-icon-color** - Color of the icon for large size (default: var(--dds-text-icon-neutral-subtle)) _(default: undefined)_\n- **--dds-select-popup-bg-color** - Background color of the popup (default: var(--dds-background-neutral-subtle)) _(default: undefined)_\n- **--dds-select-icon-opened-transform** - Transform of the icon when the select is opened (default: rotate(90deg)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main select container.\n- **trigger** - The trigger button of the select.\n- **label** - The label of the select.\n- **description** - The description of the select.\n- **feedback** - The feedback of the select.\n- **tooltip** - The tooltip of the select.\n- **popup-base** - The base of the popup.\n- **option-list** - The option list of the select.\n- **option-item** - The option item of the select.\n- **option-item-base** - The base of the option item.\n- **option-item-label** - The label of the option item.\n- **option-item-prefix** - The prefix of the option item.\n- **option-item-suffix** - The suffix of the option item.\n- **indicator-icon** - The indicator icon of the select.\n- **mobile-tray** - The mobile tray of the select.\n- **mobile-content** - The mobile content of the select.\n- **mobile-body** - The mobile body of the select.\n- **mobile-header** - The mobile header of the select.\n- **mobile-footer** - The mobile footer of the select.",
8460
+ "name": "dap-ds-skeleton",
8461
+ "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.",
8196
8462
  "doc-url": "",
8197
8463
  "attributes": [
8198
8464
  {
8199
- "name": "placement",
8200
- "description": "The popup placement of the select",
8201
- "value": {
8202
- "type": "'top' | 'top-start' | 'top-end' | 'right' | 'right-start'| 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end'",
8203
- "default": "'bottom-start'"
8204
- }
8205
- },
8206
- {
8207
- "name": "opened",
8208
- "description": "Whether the select dropdown is opened.",
8209
- "value": { "type": "boolean", "default": "false" }
8210
- },
8211
- {
8212
- "name": "placeholder",
8213
- "description": "The placeholder of the select.",
8214
- "value": { "type": "string | null" }
8215
- },
8216
- {
8217
- "name": "sync",
8218
- "description": "The sync size of the select dropdown",
8219
- "value": { "type": "boolean | undefined" }
8220
- },
8221
- {
8222
- "name": "isMobile",
8223
- "description": "Whether the select is in mobile mode.",
8224
- "value": { "type": "boolean | undefined", "default": "false" }
8225
- },
8226
- {
8227
- "name": "native",
8228
- "description": "Whether to render a native HTML select element for mobile-friendly option selection.",
8229
- "value": { "type": "boolean | undefined", "default": "false" }
8230
- },
8231
- {
8232
- "name": "loading",
8233
- "description": "The loading state of the select.",
8234
- "value": { "type": "boolean | undefined", "default": "false" }
8235
- },
8236
- {
8237
- "name": "maxHeight",
8238
- "description": "The max heigth of the select dropdown.",
8239
- "value": { "type": "number | undefined" }
8240
- },
8241
- {
8242
- "name": "noAnimation",
8243
- "description": "Whether the select dropdown indicator is animated or not",
8244
- "value": { "type": "boolean | undefined", "default": "false" }
8245
- },
8246
- {
8247
- "name": "floatingStrategy",
8248
- "description": "The floating strategy of the select dropdown",
8465
+ "name": "variant",
8466
+ "description": "The variant of the skeleton.",
8249
8467
  "value": {
8250
- "type": "'absolute' | 'fixed'",
8251
- "default": "'absolute'"
8468
+ "type": "\"text\" | \"circular\" | \"rectangular\"",
8469
+ "default": "'text'"
8252
8470
  }
8253
- }
8254
- ],
8255
- "slots": [
8256
- { "name": "", "description": "The option list of the select." },
8257
- {
8258
- "name": "indicator-icon",
8259
- "description": "The indicator icon of the select."
8260
- }
8261
- ],
8262
- "events": [
8263
- {
8264
- "name": "dds-change",
8265
- "type": "{ value: string }",
8266
- "description": "Fired when the select value changes."
8267
- },
8268
- {
8269
- "name": "dds-blur",
8270
- "type": "{ void }",
8271
- "description": "Emitted when the select loses focus."
8272
- },
8273
- {
8274
- "name": "dds-focus",
8275
- "type": "{ void }",
8276
- "description": "Emitted when the select gains focus."
8277
8471
  },
8278
8472
  {
8279
- "name": "dds-opened",
8280
- "type": "{ void }",
8281
- "description": "Emitted when the select dropdown is opened."
8473
+ "name": "width",
8474
+ "description": "The width of the skeleton. Can be any valid CSS width value.",
8475
+ "value": { "type": "string | undefined" }
8282
8476
  },
8283
8477
  {
8284
- "name": "dds-closed",
8285
- "type": "{ void }",
8286
- "description": "Emitted when the select dropdown is closed."
8287
- }
8288
- ],
8289
- "js": {
8290
- "properties": [
8291
- {
8292
- "name": "placement",
8293
- "description": "The popup placement of the select",
8294
- "type": "'top' | 'top-start' | 'top-end' | 'right' | 'right-start'| 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end'"
8295
- },
8296
- {
8297
- "name": "opened",
8298
- "description": "Whether the select dropdown is opened.",
8299
- "type": "boolean"
8300
- },
8301
- {
8302
- "name": "placeholder",
8303
- "description": "The placeholder of the select.",
8304
- "type": "string | null"
8305
- },
8306
- {
8307
- "name": "sync",
8308
- "description": "The sync size of the select dropdown",
8309
- "type": "boolean | undefined"
8310
- },
8311
- {
8312
- "name": "isMobile",
8313
- "description": "Whether the select is in mobile mode.",
8314
- "type": "boolean | undefined"
8315
- },
8316
- {
8317
- "name": "native",
8318
- "description": "Whether to render a native HTML select element for mobile-friendly option selection.",
8319
- "type": "boolean | undefined"
8320
- },
8321
- {
8322
- "name": "loading",
8323
- "description": "The loading state of the select.",
8324
- "type": "boolean | undefined"
8325
- },
8326
- {
8327
- "name": "maxHeight",
8328
- "description": "The max heigth of the select dropdown.",
8329
- "type": "number | undefined"
8330
- },
8331
- {
8332
- "name": "noAnimation",
8333
- "description": "Whether the select dropdown indicator is animated or not",
8334
- "type": "boolean | undefined"
8335
- },
8336
- {
8337
- "name": "floatingStrategy",
8338
- "description": "The floating strategy of the select dropdown",
8339
- "type": "'absolute' | 'fixed'"
8340
- },
8341
- { "name": "focusElement" },
8342
- { "name": "validity", "type": "ValidityState" },
8343
- { "name": "validationMessage", "type": "string" },
8344
- {
8345
- "name": "selectedDisplayText",
8346
- "description": "Get the current display text for the selected item, dynamically fetching from the option",
8347
- "type": "string | null"
8348
- },
8349
- {
8350
- "name": "value",
8351
- "description": "The value of the select.",
8352
- "type": "string"
8353
- },
8354
- {
8355
- "name": "label",
8356
- "description": "The label of the select.",
8357
- "type": "string"
8358
- },
8359
- {
8360
- "name": "description",
8361
- "description": "The description of the select.",
8362
- "type": "string"
8363
- },
8364
- {
8365
- "name": "tooltip",
8366
- "description": "The tooltip of the select.",
8367
- "type": "string"
8368
- },
8369
- {
8370
- "name": "tooltipPlacement",
8371
- "description": "The tooltip placement of the select.",
8372
- "type": "'top' | 'right' | 'bottom' | 'left'"
8373
- },
8374
- {
8375
- "name": "size",
8376
- "description": "The size of the select. Default is `sm`.",
8377
- "type": "'xs' | 'sm' | 'lg'"
8378
- },
8379
- {
8380
- "name": "disabled",
8381
- "description": "Whether the select is disabled.",
8382
- "type": "boolean"
8383
- },
8384
- {
8385
- "name": "required",
8386
- "description": "Whether the select is required.",
8387
- "type": "boolean"
8388
- },
8389
- {
8390
- "name": "readonly",
8391
- "description": "Whether the select is readonly.",
8392
- "type": "boolean"
8393
- },
8394
- {
8395
- "name": "autofocus",
8396
- "description": "Whether the select is autofocus.",
8397
- "type": "boolean"
8398
- },
8478
+ "name": "height",
8479
+ "description": "The height of the skeleton. Can be any valid CSS height value.",
8480
+ "value": { "type": "string | undefined" }
8481
+ },
8482
+ {
8483
+ "name": "noAnimation",
8484
+ "description": "Whether to animate the skeleton.",
8485
+ "value": { "type": "boolean", "default": "false" }
8486
+ },
8487
+ {
8488
+ "name": "animation",
8489
+ "description": "The animation type for the skeleton.",
8490
+ "value": {
8491
+ "type": "\"wave\" | \"pulse\" | \"custom\"",
8492
+ "default": "'wave'"
8493
+ }
8494
+ },
8495
+ {
8496
+ "name": "custom-keyframes",
8497
+ "description": "Custom keyframes for the animation when animation=\"custom\".\nShould be a valid CSS keyframes string without the",
8498
+ "value": { "type": "string | undefined" }
8499
+ }
8500
+ ],
8501
+ "events": [],
8502
+ "js": {
8503
+ "properties": [
8399
8504
  {
8400
- "name": "feedback",
8401
- "description": "The feedback of the select.",
8402
- "type": "string"
8505
+ "name": "variant",
8506
+ "description": "The variant of the skeleton.",
8507
+ "type": "\"text\" | \"circular\" | \"rectangular\""
8403
8508
  },
8404
8509
  {
8405
- "name": "feedbackType",
8406
- "description": "The feedback type of the select. Can be `negative`, `positive`, or `warning`.",
8407
- "type": "negative | positive | warning"
8510
+ "name": "width",
8511
+ "description": "The width of the skeleton. Can be any valid CSS width value.",
8512
+ "type": "string | undefined"
8408
8513
  },
8409
8514
  {
8410
- "name": "status",
8411
- "description": "The status of the select. Can be `success` or `error`.",
8412
- "type": "string"
8515
+ "name": "height",
8516
+ "description": "The height of the skeleton. Can be any valid CSS height value.",
8517
+ "type": "string | undefined"
8413
8518
  },
8414
8519
  {
8415
- "name": "optional",
8416
- "description": "The optional state of the select.",
8520
+ "name": "noAnimation",
8521
+ "description": "Whether to animate the skeleton.",
8417
8522
  "type": "boolean"
8418
8523
  },
8419
8524
  {
8420
- "name": "optionalLabel",
8421
- "description": "The optional label of the select.",
8422
- "type": "string"
8525
+ "name": "animation",
8526
+ "description": "The animation type for the skeleton.",
8527
+ "type": "\"wave\" | \"pulse\" | \"custom\""
8423
8528
  },
8424
8529
  {
8425
- "name": "subtle",
8426
- "description": "The weight of the label. Default is `false`",
8427
- "type": "boolean"
8530
+ "name": "customKeyframes",
8531
+ "description": "Custom keyframes for the animation when animation=\"custom\".\nShould be a valid CSS keyframes string without the",
8532
+ "type": "string | undefined"
8428
8533
  }
8429
8534
  ],
8430
- "events": [
8431
- {
8432
- "name": "dds-change",
8433
- "type": "{ value: string }",
8434
- "description": "Fired when the select value changes."
8435
- },
8436
- {
8437
- "name": "dds-blur",
8438
- "type": "{ void }",
8439
- "description": "Emitted when the select loses focus."
8440
- },
8441
- {
8442
- "name": "dds-focus",
8443
- "type": "{ void }",
8444
- "description": "Emitted when the select gains focus."
8445
- },
8446
- {
8447
- "name": "dds-opened",
8448
- "type": "{ void }",
8449
- "description": "Emitted when the select dropdown is opened."
8450
- },
8451
- {
8452
- "name": "dds-closed",
8453
- "type": "{ void }",
8454
- "description": "Emitted when the select dropdown is closed."
8455
- }
8456
- ]
8535
+ "events": []
8457
8536
  }
8458
8537
  },
8459
8538
  {
@@ -8659,85 +8738,6 @@
8659
8738
  "events": []
8660
8739
  }
8661
8740
  },
8662
- {
8663
- "name": "dap-ds-skeleton",
8664
- "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.",
8665
- "doc-url": "",
8666
- "attributes": [
8667
- {
8668
- "name": "variant",
8669
- "description": "The variant of the skeleton.",
8670
- "value": {
8671
- "type": "\"text\" | \"circular\" | \"rectangular\"",
8672
- "default": "'text'"
8673
- }
8674
- },
8675
- {
8676
- "name": "width",
8677
- "description": "The width of the skeleton. Can be any valid CSS width value.",
8678
- "value": { "type": "string | undefined" }
8679
- },
8680
- {
8681
- "name": "height",
8682
- "description": "The height of the skeleton. Can be any valid CSS height value.",
8683
- "value": { "type": "string | undefined" }
8684
- },
8685
- {
8686
- "name": "noAnimation",
8687
- "description": "Whether to animate the skeleton.",
8688
- "value": { "type": "boolean", "default": "false" }
8689
- },
8690
- {
8691
- "name": "animation",
8692
- "description": "The animation type for the skeleton.",
8693
- "value": {
8694
- "type": "\"wave\" | \"pulse\" | \"custom\"",
8695
- "default": "'wave'"
8696
- }
8697
- },
8698
- {
8699
- "name": "custom-keyframes",
8700
- "description": "Custom keyframes for the animation when animation=\"custom\".\nShould be a valid CSS keyframes string without the",
8701
- "value": { "type": "string | undefined" }
8702
- }
8703
- ],
8704
- "events": [],
8705
- "js": {
8706
- "properties": [
8707
- {
8708
- "name": "variant",
8709
- "description": "The variant of the skeleton.",
8710
- "type": "\"text\" | \"circular\" | \"rectangular\""
8711
- },
8712
- {
8713
- "name": "width",
8714
- "description": "The width of the skeleton. Can be any valid CSS width value.",
8715
- "type": "string | undefined"
8716
- },
8717
- {
8718
- "name": "height",
8719
- "description": "The height of the skeleton. Can be any valid CSS height value.",
8720
- "type": "string | undefined"
8721
- },
8722
- {
8723
- "name": "noAnimation",
8724
- "description": "Whether to animate the skeleton.",
8725
- "type": "boolean"
8726
- },
8727
- {
8728
- "name": "animation",
8729
- "description": "The animation type for the skeleton.",
8730
- "type": "\"wave\" | \"pulse\" | \"custom\""
8731
- },
8732
- {
8733
- "name": "customKeyframes",
8734
- "description": "Custom keyframes for the animation when animation=\"custom\".\nShould be a valid CSS keyframes string without the",
8735
- "type": "string | undefined"
8736
- }
8737
- ],
8738
- "events": []
8739
- }
8740
- },
8741
8741
  {
8742
8742
  "name": "dap-ds-spinner",
8743
8743
  "description": "Loading spinner component.\n---\n\n\n### **Slots:**\n - _default_ - The loading text content.\n- **icon** - The loading icon content.\n\n### **CSS Properties:**\n - **--dds-spinner-icon-color-neutral** - Color for neutral spinner icons (default: var(--dds-icon-neutral-base)) _(default: undefined)_\n- **--dds-spinner-icon-color-brand** - Color for brand spinner icons (default: var(--dds-icon-brand-subtle)) _(default: undefined)_\n- **--dds-spinner-icon-color-negative** - Color for negative spinner icons (default: var(--dds-icon-negative-subtle)) _(default: undefined)_\n- **--dds-spinner-icon-color-positive** - Color for positive spinner icons (default: var(--dds-icon-positive-subtle)) _(default: undefined)_\n- **--dds-spinner-icon-color-inverted** - Color for inverted spinner icons (default: var(--dds-icon-neutral-inverted)) _(default: undefined)_\n- **--dds-spinner-text-spacing** - Spacing between spinner and text (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-spinner-animation-duration** - Duration of the spinner animation (default: 1s) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main spinner container.\n- **icon** - The loading icon element.\n- **icon-base** - The base of the loading icon.\n- **icon-content** - The content of the loading icon.\n- **text** - The loading text element.",
@@ -9027,185 +9027,125 @@
9027
9027
  },
9028
9028
  {
9029
9029
  "name": "optional",
9030
- "description": "The optional state of the switch.",
9031
- "type": "boolean"
9032
- },
9033
- {
9034
- "name": "optionalLabel",
9035
- "description": "The optional label of the switch.",
9036
- "type": "string"
9037
- }
9038
- ],
9039
- "events": [
9040
- {
9041
- "name": "dds-change",
9042
- "type": "{ value: string }",
9043
- "description": "Fired when the input value changes."
9044
- },
9045
- {
9046
- "name": "dds-blur",
9047
- "type": "{ void }",
9048
- "description": "Emitted when the input loses focus."
9049
- },
9050
- {
9051
- "name": "dds-focus",
9052
- "type": "{ void }",
9053
- "description": "Emitted when the input gains focus."
9054
- },
9055
- {
9056
- "name": "dds-input",
9057
- "type": "{ value: string }",
9058
- "description": "Emitted when the input receives input."
9059
- }
9060
- ]
9061
- }
9062
- },
9063
- {
9064
- "name": "dap-ds-table-cell",
9065
- "description": "Table cell component.\n---\n\n\n### **Slots:**\n - _default_ - The default slot.\n\n### **CSS Properties:**\n - **--dds-table-cell-padding-block** - Padding for the top and bottom of the cell. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-table-cell-padding-inline-start** - Padding for the start (left in LTR) of the cell. (default: var(--dds-spacing-500)) _(default: undefined)_\n- **--dds-table-cell-padding-inline-end** - Padding for the end (right in LTR) of the cell. (default: var(--dds-spacing-500)) _(default: undefined)_\n- **--dds-table-cell-border-width** - Width of the cell's bottom border. (default: var(--dds-border-width-base)) _(default: undefined)_\n- **--dds-table-cell-border-color** - Color of the cell's bottom border. (default: var(--dds-border-neutral-subtle)) _(default: undefined)_\n- **--dds-table-cell-text-color** - Text color of the cell. (default: var(--dds-text-neutral-base)) _(default: undefined)_\n- **--dds-table-cell-line-height** - Line height of the cell text. (default: 1.5) _(default: undefined)_\n- **--dds-table-cell-text-align** - Text alignment in the cell. (default: left) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main cell container.",
9066
- "doc-url": "",
9067
- "attributes": [
9068
- {
9069
- "name": "last",
9070
- "description": "If the cell is the last one.",
9071
- "value": { "type": "boolean" }
9072
- },
9073
- {
9074
- "name": "role",
9075
- "description": "The html role of the cell",
9076
- "value": { "type": "string", "default": "'cell'" }
9077
- }
9078
- ],
9079
- "slots": [{ "name": "", "description": "The default slot." }],
9080
- "events": [],
9081
- "js": {
9082
- "properties": [
9083
- {
9084
- "name": "last",
9085
- "description": "If the cell is the last one.",
9086
- "type": "boolean"
9087
- },
9088
- {
9089
- "name": "role",
9090
- "description": "The html role of the cell",
9091
- "type": "string"
9092
- }
9093
- ],
9094
- "events": []
9095
- }
9096
- },
9097
- {
9098
- "name": "dap-ds-table-header",
9099
- "description": "Table header cell component.\n---\n\n\n### **Slots:**\n - _default_ - The default slot.\n\n### **CSS Properties:**\n - **--dds-table-header-padding-block** - Padding for the top and bottom of the header cell. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-table-header-padding-inline-start** - Padding for the start (left in LTR) of the header cell. (default: var(--dds-spacing-500)) _(default: undefined)_\n- **--dds-table-header-padding-inline-end** - Padding for the end (right in LTR) of the header cell. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-table-header-border-width** - Width of the header cell's bottom border. (default: var(--dds-border-width-base)) _(default: undefined)_\n- **--dds-table-header-border-color** - Color of the header cell's bottom border. (default: var(--dds-border-neutral-subtle)) _(default: undefined)_\n- **--dds-table-header-text-color** - Text color of the header cell. (default: var(--dds-text-neutral-strong)) _(default: undefined)_\n- **--dds-table-header-font-weight** - Font weight of the header cell text. (default: var(--dds-font-weight-bold)) _(default: undefined)_\n- **--dds-table-header-line-height** - Line height of the header cell text. (default: var(--dds-font-line-height-xlarge)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main header cell container.",
9100
- "doc-url": "",
9101
- "attributes": [
9102
- {
9103
- "name": "last",
9104
- "description": "If the header cell is the last one.",
9105
- "value": { "type": "boolean" }
9106
- },
9107
- {
9108
- "name": "role",
9109
- "description": "The html role of the header cell",
9110
- "value": { "type": "string", "default": "'columnheader'" }
9111
- }
9112
- ],
9113
- "slots": [{ "name": "", "description": "The default slot." }],
9114
- "events": [],
9115
- "js": {
9116
- "properties": [
9117
- {
9118
- "name": "last",
9119
- "description": "If the header cell is the last one.",
9030
+ "description": "The optional state of the switch.",
9120
9031
  "type": "boolean"
9121
9032
  },
9122
9033
  {
9123
- "name": "role",
9124
- "description": "The html role of the header cell",
9034
+ "name": "optionalLabel",
9035
+ "description": "The optional label of the switch.",
9125
9036
  "type": "string"
9126
9037
  }
9127
9038
  ],
9128
- "events": []
9039
+ "events": [
9040
+ {
9041
+ "name": "dds-change",
9042
+ "type": "{ value: string }",
9043
+ "description": "Fired when the input value changes."
9044
+ },
9045
+ {
9046
+ "name": "dds-blur",
9047
+ "type": "{ void }",
9048
+ "description": "Emitted when the input loses focus."
9049
+ },
9050
+ {
9051
+ "name": "dds-focus",
9052
+ "type": "{ void }",
9053
+ "description": "Emitted when the input gains focus."
9054
+ },
9055
+ {
9056
+ "name": "dds-input",
9057
+ "type": "{ value: string }",
9058
+ "description": "Emitted when the input receives input."
9059
+ }
9060
+ ]
9129
9061
  }
9130
9062
  },
9131
9063
  {
9132
- "name": "dap-ds-table-row",
9133
- "description": "Table row component.\n---\n\n\n### **Slots:**\n - _default_ - The default slot. Accepts `dap-ds-table-cell` and `dap-ds-table-header` elements.\n\n### **CSS Properties:**\n - **--dds-table-row-padding-right** - Padding right for the last table header, (default: var(--dds-spacing-500)) _(default: undefined)_\n- **--dds-table-row-padding-top** - Padding top for table headers in mobile view, (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-table-row-padding-bottom** - Padding bottom for the last table cell in mobile view, (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-table-row-border-color** - Border color for table cells and headers, (default: transparent) _(default: undefined)_",
9064
+ "name": "dap-ds-tab-group",
9065
+ "description": "A tab group component. It is used with dap-ds-tab component to create a tab group.\n---\n\n\n### **Events:**\n - **dds-tab-select** - Fired when select a new tab.\n\n### **Slots:**\n - _default_ - The tab items.\n\n### **CSS Properties:**\n - **--dds-tab-group-border-radius** - Border radius of the tab group container (default: var(--dds-radius-base)) _(default: undefined)_\n- **--dds-tab-border-radius** - Border radius for tab items (default: var(--dds-radius-base) var(--dds-radius-base) 0 0) _(default: undefined)_\n- **--dds-tab-group-border-width** - Border width of the tab navigation (default: var(--dds-border-width-base)) _(default: undefined)_\n- **--dds-tab-group-border-color** - Border color of the tab navigation (default: var(--dds-border-neutral-subtle)) _(default: undefined)_\n- **--dds-tab-height-sm** - Height of small tabs (default: 40px) _(default: undefined)_\n- **--dds-tab-height-lg** - Height of large tabs (default: 50px) _(default: undefined)_\n- **--dds-tab-font-size-sm** - Font size of small tabs (default: var(--dds-font-base)) _(default: undefined)_\n- **--dds-tab-font-size-lg** - Font size of large tabs (default: var(--dds-font-lg)) _(default: undefined)_\n- **--dds-tab-padding** - Padding of the tab buttons (default: 0 var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-tab-border-width** - Border width for tabs (default: var(--dds-border-width-large)) _(default: undefined)_\n- **--dds-tab-selected-border-color** - Border color for selected tabs (default: var(--dds-border-brand-base)) _(default: undefined)_\n- **--dds-tab-text-color** - Text color for tabs (default: var(--dds-button-subtle-text-neutral-enabled)) _(default: undefined)_\n- **--dds-tab-hover-text-color** - Text color for tabs on hover (default: var(--dds-text-brand-subtle)) _(default: undefined)_\n- **--dds-tab-disabled-text-color** - Text color for disabled tabs (default: var(--dds-text-neutral-disabled)) _(default: undefined)_\n- **--dds-tab-hover-background** - Background color for tabs on hover (default: var(--dds-transparent-black-subtle)) _(default: undefined)_\n- **--dds-tab-active-background** - Background color for active tabs (default: var(--dds-transparent-black-base)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main container.\n- **tab-nav** - The tab navigation container.\n- **tab-content** - The tab content container.",
9134
9066
  "doc-url": "",
9135
9067
  "attributes": [
9136
9068
  {
9137
- "name": "role",
9138
- "description": "The html role of the row",
9139
- "value": { "type": "string", "default": "'row'" }
9069
+ "name": "selectedTabId",
9070
+ "description": "The selected tab id.",
9071
+ "value": { "type": "string" }
9072
+ },
9073
+ {
9074
+ "name": "size",
9075
+ "description": "The size of the tab buttons. Default is `sm`. Can be `sm` or `lg`.",
9076
+ "value": { "type": "'sm' | 'lg'", "default": "'sm'" }
9140
9077
  },
9141
9078
  {
9142
9079
  "name": "mobile",
9143
- "description": "If the row is mobile design",
9080
+ "description": "If true, the tab group will be displayed in mobile mode.",
9144
9081
  "value": { "type": "boolean", "default": "false" }
9145
9082
  }
9146
9083
  ],
9147
- "slots": [
9084
+ "slots": [{ "name": "", "description": "The tab items." }],
9085
+ "events": [
9148
9086
  {
9149
- "name": "",
9150
- "description": "The default slot. Accepts `dap-ds-table-cell` and `dap-ds-table-header` elements."
9087
+ "name": "dds-tab-select",
9088
+ "description": "Fired when select a new tab."
9151
9089
  }
9152
9090
  ],
9153
- "events": [],
9154
9091
  "js": {
9155
9092
  "properties": [
9156
9093
  {
9157
- "name": "role",
9158
- "description": "The html role of the row",
9094
+ "name": "selectedTabId",
9095
+ "description": "The selected tab id.",
9159
9096
  "type": "string"
9160
9097
  },
9098
+ {
9099
+ "name": "size",
9100
+ "description": "The size of the tab buttons. Default is `sm`. Can be `sm` or `lg`.",
9101
+ "type": "'sm' | 'lg'"
9102
+ },
9161
9103
  {
9162
9104
  "name": "mobile",
9163
- "description": "If the row is mobile design",
9105
+ "description": "If true, the tab group will be displayed in mobile mode.",
9164
9106
  "type": "boolean"
9165
9107
  }
9166
9108
  ],
9167
- "events": []
9109
+ "events": [
9110
+ {
9111
+ "name": "dds-tab-select",
9112
+ "description": "Fired when select a new tab."
9113
+ }
9114
+ ]
9168
9115
  }
9169
9116
  },
9170
9117
  {
9171
- "name": "dap-ds-table",
9172
- "description": "Data table component.\n---\n\n\n### **Slots:**\n - _default_ - The default slot. Accepts `dap-ds-table-row` elements.\n\n### **CSS Properties:**\n - **--dds-table-border-width** - Width of the table border. (default: var(--dds-border-width-base, 1px)) _(default: undefined)_\n- **--dds-table-border-color** - Color of the table border. (default: var(--dds-border-neutral-subtle)) _(default: undefined)_\n- **--dds-table-border-radius** - Border radius of the table. (default: var(--dds-radius-small, 4px)) _(default: undefined)_\n- **--dds-table-row-divider-color** - Color of the divider between rows in mobile view. (default: var(--dds-border-neutral-subtle)) _(default: undefined)_",
9118
+ "name": "dap-ds-tab",
9119
+ "description": "A tab item component. It is used in dap-ds-tab-group component slot to create a tab item.\n---\n\n\n### **Slots:**\n - _default_ - The tab title template.\n- **content** - The tab content.\n\n### **CSS Parts:**\n - **base** - The main tab content container.",
9173
9120
  "doc-url": "",
9174
9121
  "attributes": [
9175
9122
  {
9176
- "name": "role",
9177
- "value": { "type": "string", "default": "'grid'" }
9123
+ "name": "tabId",
9124
+ "description": "The tab id. Required",
9125
+ "value": { "type": "string" }
9178
9126
  },
9179
9127
  {
9180
- "name": "mobile",
9181
- "description": "If the table has mobile design",
9128
+ "name": "disabled",
9129
+ "description": "The disabled state of the tab.",
9182
9130
  "value": { "type": "boolean", "default": "false" }
9183
- },
9184
- {
9185
- "name": "caption",
9186
- "description": "The caption of the table",
9187
- "value": { "type": "string", "default": "''" }
9188
9131
  }
9189
9132
  ],
9190
9133
  "slots": [
9191
- {
9192
- "name": "",
9193
- "description": "The default slot. Accepts `dap-ds-table-row` elements."
9194
- }
9134
+ { "name": "", "description": "The tab title template." },
9135
+ { "name": "content", "description": "The tab content." }
9195
9136
  ],
9196
9137
  "events": [],
9197
9138
  "js": {
9198
9139
  "properties": [
9199
- { "name": "role", "type": "string" },
9200
9140
  {
9201
- "name": "mobile",
9202
- "description": "If the table has mobile design",
9203
- "type": "boolean"
9141
+ "name": "tabId",
9142
+ "description": "The tab id. Required",
9143
+ "type": "string"
9204
9144
  },
9205
9145
  {
9206
- "name": "caption",
9207
- "description": "The caption of the table",
9208
- "type": "string"
9146
+ "name": "disabled",
9147
+ "description": "The disabled state of the tab.",
9148
+ "type": "boolean"
9209
9149
  }
9210
9150
  ],
9211
9151
  "events": []
@@ -9400,60 +9340,239 @@
9400
9340
  "type": "boolean"
9401
9341
  },
9402
9342
  {
9403
- "name": "optionalLabel",
9404
- "description": "The optional label of the textarea.",
9343
+ "name": "optionalLabel",
9344
+ "description": "The optional label of the textarea.",
9345
+ "type": "string"
9346
+ },
9347
+ {
9348
+ "name": "subtle",
9349
+ "description": "The weight of the label. Default is `false`",
9350
+ "type": "boolean"
9351
+ },
9352
+ {
9353
+ "name": "autofocus",
9354
+ "description": "The autofocus state of the textarea.",
9355
+ "type": "boolean"
9356
+ }
9357
+ ],
9358
+ "events": [
9359
+ {
9360
+ "name": "dds-count-change",
9361
+ "type": "{ value: number }",
9362
+ "description": "Fires when the count of the textarea changes."
9363
+ },
9364
+ {
9365
+ "name": "dds-change",
9366
+ "type": "{ value: string }",
9367
+ "description": "Fired when the textarea value changes."
9368
+ },
9369
+ {
9370
+ "name": "dds-input",
9371
+ "type": "{ value: string }",
9372
+ "description": "Fired when the textarea value changes."
9373
+ },
9374
+ {
9375
+ "name": "dds-keydown",
9376
+ "type": "{ value: string, originalEvent: Event }",
9377
+ "description": "Fired when a key is pressed down."
9378
+ },
9379
+ {
9380
+ "name": "dds-blur",
9381
+ "type": "{ void }",
9382
+ "description": "Fired when the textarea loses focus."
9383
+ },
9384
+ {
9385
+ "name": "dds-focus",
9386
+ "type": "{ void }",
9387
+ "description": "Emitted when the textarea gains focus."
9388
+ },
9389
+ {
9390
+ "name": "dds-select",
9391
+ "type": "{ value: string }",
9392
+ "description": "Emitted when select text in textarea."
9393
+ }
9394
+ ]
9395
+ }
9396
+ },
9397
+ {
9398
+ "name": "dap-ds-table-cell",
9399
+ "description": "Table cell component.\n---\n\n\n### **Slots:**\n - _default_ - The default slot.\n\n### **CSS Properties:**\n - **--dds-table-cell-padding-block** - Padding for the top and bottom of the cell. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-table-cell-padding-inline-start** - Padding for the start (left in LTR) of the cell. (default: var(--dds-spacing-500)) _(default: undefined)_\n- **--dds-table-cell-padding-inline-end** - Padding for the end (right in LTR) of the cell. (default: var(--dds-spacing-500)) _(default: undefined)_\n- **--dds-table-cell-border-width** - Width of the cell's bottom border. (default: var(--dds-border-width-base)) _(default: undefined)_\n- **--dds-table-cell-border-color** - Color of the cell's bottom border. (default: var(--dds-border-neutral-subtle)) _(default: undefined)_\n- **--dds-table-cell-text-color** - Text color of the cell. (default: var(--dds-text-neutral-base)) _(default: undefined)_\n- **--dds-table-cell-line-height** - Line height of the cell text. (default: 1.5) _(default: undefined)_\n- **--dds-table-cell-text-align** - Text alignment in the cell. (default: left) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main cell container.",
9400
+ "doc-url": "",
9401
+ "attributes": [
9402
+ {
9403
+ "name": "last",
9404
+ "description": "If the cell is the last one.",
9405
+ "value": { "type": "boolean" }
9406
+ },
9407
+ {
9408
+ "name": "role",
9409
+ "description": "The html role of the cell",
9410
+ "value": { "type": "string", "default": "'cell'" }
9411
+ }
9412
+ ],
9413
+ "slots": [{ "name": "", "description": "The default slot." }],
9414
+ "events": [],
9415
+ "js": {
9416
+ "properties": [
9417
+ {
9418
+ "name": "last",
9419
+ "description": "If the cell is the last one.",
9420
+ "type": "boolean"
9421
+ },
9422
+ {
9423
+ "name": "role",
9424
+ "description": "The html role of the cell",
9425
+ "type": "string"
9426
+ }
9427
+ ],
9428
+ "events": []
9429
+ }
9430
+ },
9431
+ {
9432
+ "name": "dap-ds-table-header",
9433
+ "description": "Table header cell component.\n---\n\n\n### **Slots:**\n - _default_ - The default slot.\n\n### **CSS Properties:**\n - **--dds-table-header-padding-block** - Padding for the top and bottom of the header cell. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-table-header-padding-inline-start** - Padding for the start (left in LTR) of the header cell. (default: var(--dds-spacing-500)) _(default: undefined)_\n- **--dds-table-header-padding-inline-end** - Padding for the end (right in LTR) of the header cell. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-table-header-border-width** - Width of the header cell's bottom border. (default: var(--dds-border-width-base)) _(default: undefined)_\n- **--dds-table-header-border-color** - Color of the header cell's bottom border. (default: var(--dds-border-neutral-subtle)) _(default: undefined)_\n- **--dds-table-header-text-color** - Text color of the header cell. (default: var(--dds-text-neutral-strong)) _(default: undefined)_\n- **--dds-table-header-font-weight** - Font weight of the header cell text. (default: var(--dds-font-weight-bold)) _(default: undefined)_\n- **--dds-table-header-line-height** - Line height of the header cell text. (default: var(--dds-font-line-height-xlarge)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main header cell container.",
9434
+ "doc-url": "",
9435
+ "attributes": [
9436
+ {
9437
+ "name": "last",
9438
+ "description": "If the header cell is the last one.",
9439
+ "value": { "type": "boolean" }
9440
+ },
9441
+ {
9442
+ "name": "role",
9443
+ "description": "The html role of the header cell",
9444
+ "value": { "type": "string", "default": "'columnheader'" }
9445
+ }
9446
+ ],
9447
+ "slots": [{ "name": "", "description": "The default slot." }],
9448
+ "events": [],
9449
+ "js": {
9450
+ "properties": [
9451
+ {
9452
+ "name": "last",
9453
+ "description": "If the header cell is the last one.",
9454
+ "type": "boolean"
9455
+ },
9456
+ {
9457
+ "name": "role",
9458
+ "description": "The html role of the header cell",
9459
+ "type": "string"
9460
+ }
9461
+ ],
9462
+ "events": []
9463
+ }
9464
+ },
9465
+ {
9466
+ "name": "dap-ds-table-row",
9467
+ "description": "Table row component.\n---\n\n\n### **Slots:**\n - _default_ - The default slot. Accepts `dap-ds-table-cell` and `dap-ds-table-header` elements.\n\n### **CSS Properties:**\n - **--dds-table-row-padding-right** - Padding right for the last table header, (default: var(--dds-spacing-500)) _(default: undefined)_\n- **--dds-table-row-padding-top** - Padding top for table headers in mobile view, (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-table-row-padding-bottom** - Padding bottom for the last table cell in mobile view, (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-table-row-border-color** - Border color for table cells and headers, (default: transparent) _(default: undefined)_",
9468
+ "doc-url": "",
9469
+ "attributes": [
9470
+ {
9471
+ "name": "role",
9472
+ "description": "The html role of the row",
9473
+ "value": { "type": "string", "default": "'row'" }
9474
+ },
9475
+ {
9476
+ "name": "mobile",
9477
+ "description": "If the row is mobile design",
9478
+ "value": { "type": "boolean", "default": "false" }
9479
+ }
9480
+ ],
9481
+ "slots": [
9482
+ {
9483
+ "name": "",
9484
+ "description": "The default slot. Accepts `dap-ds-table-cell` and `dap-ds-table-header` elements."
9485
+ }
9486
+ ],
9487
+ "events": [],
9488
+ "js": {
9489
+ "properties": [
9490
+ {
9491
+ "name": "role",
9492
+ "description": "The html role of the row",
9405
9493
  "type": "string"
9406
9494
  },
9407
9495
  {
9408
- "name": "subtle",
9409
- "description": "The weight of the label. Default is `false`",
9410
- "type": "boolean"
9411
- },
9412
- {
9413
- "name": "autofocus",
9414
- "description": "The autofocus state of the textarea.",
9496
+ "name": "mobile",
9497
+ "description": "If the row is mobile design",
9415
9498
  "type": "boolean"
9416
9499
  }
9417
9500
  ],
9418
- "events": [
9419
- {
9420
- "name": "dds-count-change",
9421
- "type": "{ value: number }",
9422
- "description": "Fires when the count of the textarea changes."
9423
- },
9424
- {
9425
- "name": "dds-change",
9426
- "type": "{ value: string }",
9427
- "description": "Fired when the textarea value changes."
9428
- },
9429
- {
9430
- "name": "dds-input",
9431
- "type": "{ value: string }",
9432
- "description": "Fired when the textarea value changes."
9433
- },
9434
- {
9435
- "name": "dds-keydown",
9436
- "type": "{ value: string, originalEvent: Event }",
9437
- "description": "Fired when a key is pressed down."
9438
- },
9439
- {
9440
- "name": "dds-blur",
9441
- "type": "{ void }",
9442
- "description": "Fired when the textarea loses focus."
9443
- },
9501
+ "events": []
9502
+ }
9503
+ },
9504
+ {
9505
+ "name": "dap-ds-table",
9506
+ "description": "Data table component.\n---\n\n\n### **Slots:**\n - _default_ - The default slot. Accepts `dap-ds-table-row` elements.\n\n### **CSS Properties:**\n - **--dds-table-border-width** - Width of the table border. (default: var(--dds-border-width-base, 1px)) _(default: undefined)_\n- **--dds-table-border-color** - Color of the table border. (default: var(--dds-border-neutral-subtle)) _(default: undefined)_\n- **--dds-table-border-radius** - Border radius of the table. (default: var(--dds-radius-small, 4px)) _(default: undefined)_\n- **--dds-table-row-divider-color** - Color of the divider between rows in mobile view. (default: var(--dds-border-neutral-subtle)) _(default: undefined)_",
9507
+ "doc-url": "",
9508
+ "attributes": [
9509
+ {
9510
+ "name": "role",
9511
+ "value": { "type": "string", "default": "'grid'" }
9512
+ },
9513
+ {
9514
+ "name": "mobile",
9515
+ "description": "If the table has mobile design",
9516
+ "value": { "type": "boolean", "default": "false" }
9517
+ },
9518
+ {
9519
+ "name": "caption",
9520
+ "description": "The caption of the table",
9521
+ "value": { "type": "string", "default": "''" }
9522
+ }
9523
+ ],
9524
+ "slots": [
9525
+ {
9526
+ "name": "",
9527
+ "description": "The default slot. Accepts `dap-ds-table-row` elements."
9528
+ }
9529
+ ],
9530
+ "events": [],
9531
+ "js": {
9532
+ "properties": [
9533
+ { "name": "role", "type": "string" },
9444
9534
  {
9445
- "name": "dds-focus",
9446
- "type": "{ void }",
9447
- "description": "Emitted when the textarea gains focus."
9535
+ "name": "mobile",
9536
+ "description": "If the table has mobile design",
9537
+ "type": "boolean"
9448
9538
  },
9449
9539
  {
9450
- "name": "dds-select",
9451
- "type": "{ value: string }",
9452
- "description": "Emitted when select text in textarea."
9540
+ "name": "caption",
9541
+ "description": "The caption of the table",
9542
+ "type": "string"
9453
9543
  }
9454
- ]
9544
+ ],
9545
+ "events": []
9455
9546
  }
9456
9547
  },
9548
+ {
9549
+ "name": "dap-ds-timeline-item",
9550
+ "description": "A timeline is a graphical representation of a series of events.\n---\n\n\n### **Slots:**\n - _default_ - The default slot for the item content.\n\n### **CSS Properties:**\n - **--dds-timeline-position** - Position of the timeline dot (default: 28px) _(default: undefined)_\n- **--dds-timeline-connector-width** - Width of the timeline connector line (default: 1px) _(default: undefined)_\n- **--dds-timeline-connector-left-position** - Left position of the timeline connector (default: 5.5px) _(default: undefined)_\n- **--dds-timeline-dot-size** - Size of the timeline dot (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-timeline-item-margin-bottom** - Bottom margin of timeline items (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-timeline-item-padding-left** - Left padding of timeline items (default: var(--dds-spacing-400)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main timeline item container.\n- **connector** - The connector element between two timeline items.\n- **content** - The content of the timeline item.",
9551
+ "doc-url": "",
9552
+ "attributes": [],
9553
+ "slots": [
9554
+ {
9555
+ "name": "",
9556
+ "description": "The default slot for the item content."
9557
+ }
9558
+ ],
9559
+ "events": [],
9560
+ "js": { "properties": [], "events": [] }
9561
+ },
9562
+ {
9563
+ "name": "dap-ds-timeline",
9564
+ "description": "A timeline is a graphical representation of a series of events.\n---\n\n\n### **Slots:**\n - _default_ - The default slot for the timeline items.\n\n### **CSS Parts:**\n - **base** - The main timeline container.",
9565
+ "doc-url": "",
9566
+ "attributes": [],
9567
+ "slots": [
9568
+ {
9569
+ "name": "",
9570
+ "description": "The default slot for the timeline items."
9571
+ }
9572
+ ],
9573
+ "events": [],
9574
+ "js": { "properties": [], "events": [] }
9575
+ },
9457
9576
  {
9458
9577
  "name": "dap-ds-time-grid",
9459
9578
  "description": "A time grid component that allows users to select hours and minutes in two side-by-side scrollable columns.\n---\n\n\n### **Events:**\n - **dds-change** - Fired when time selection changes.\n- **dds-close** - Fired when the time grid should close.\n\n### **CSS Properties:**\n - **--dds-time-grid-gap** - The gap between time sections (default: var(--dds-spacing-400)). _(default: undefined)_\n- **--dds-time-grid-padding** - The padding around the time grid (default: var(--dds-spacing-0)). _(default: undefined)_\n- **--dds-time-grid-column-gap** - The gap between time buttons in columns (default: var(--dds-spacing-200)). _(default: undefined)_\n- **--dds-time-grid-border-radius** - The border radius of the time grid (default: var(--dds-radius-base)). _(default: undefined)_\n- **--dds-time-grid-background** - The background color of the time grid (default: var(--dds-background-neutral-subtle)). _(default: undefined)_\n- **--dds-time-grid-transition** - The transition timing for the time grid (default: all 0.2s ease-in-out). _(default: undefined)_\n- **--dds-time-grid-max-width** - The maximum width of the time grid (default: 400px). _(default: undefined)_\n- **--dds-time-grid-column-max-height** - The maximum height of time columns (default: 240px). _(default: undefined)_\n\n### **CSS Parts:**\n - **time-grid** - The main time grid container.\n- **hour-section** - The hour selection section.\n- **minute-section** - The minute selection section.\n- **time-button** - Individual time selection buttons.\n- **time-button-base** - The base part of the time button.\n- **time-button-content** - The content part of the time button.\n- **time-button-high-contrast** - The high contrast part of the time button.\n- **section-header-title** - The title of the section header.\n- **section-header-divider** - The divider between the section header and the time buttons.\n- **time-column** - The time column container.",
@@ -9941,125 +10060,6 @@
9941
10060
  ]
9942
10061
  }
9943
10062
  },
9944
- {
9945
- "name": "dap-ds-timeline-item",
9946
- "description": "A timeline is a graphical representation of a series of events.\n---\n\n\n### **Slots:**\n - _default_ - The default slot for the item content.\n\n### **CSS Properties:**\n - **--dds-timeline-position** - Position of the timeline dot (default: 28px) _(default: undefined)_\n- **--dds-timeline-connector-width** - Width of the timeline connector line (default: 1px) _(default: undefined)_\n- **--dds-timeline-connector-left-position** - Left position of the timeline connector (default: 5.5px) _(default: undefined)_\n- **--dds-timeline-dot-size** - Size of the timeline dot (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-timeline-item-margin-bottom** - Bottom margin of timeline items (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-timeline-item-padding-left** - Left padding of timeline items (default: var(--dds-spacing-400)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main timeline item container.\n- **connector** - The connector element between two timeline items.\n- **content** - The content of the timeline item.",
9947
- "doc-url": "",
9948
- "attributes": [],
9949
- "slots": [
9950
- {
9951
- "name": "",
9952
- "description": "The default slot for the item content."
9953
- }
9954
- ],
9955
- "events": [],
9956
- "js": { "properties": [], "events": [] }
9957
- },
9958
- {
9959
- "name": "dap-ds-timeline",
9960
- "description": "A timeline is a graphical representation of a series of events.\n---\n\n\n### **Slots:**\n - _default_ - The default slot for the timeline items.\n\n### **CSS Parts:**\n - **base** - The main timeline container.",
9961
- "doc-url": "",
9962
- "attributes": [],
9963
- "slots": [
9964
- {
9965
- "name": "",
9966
- "description": "The default slot for the timeline items."
9967
- }
9968
- ],
9969
- "events": [],
9970
- "js": { "properties": [], "events": [] }
9971
- },
9972
- {
9973
- "name": "dap-ds-tab-group",
9974
- "description": "A tab group component. It is used with dap-ds-tab component to create a tab group.\n---\n\n\n### **Events:**\n - **dds-tab-select** - Fired when select a new tab.\n\n### **Slots:**\n - _default_ - The tab items.\n\n### **CSS Properties:**\n - **--dds-tab-group-border-radius** - Border radius of the tab group container (default: var(--dds-radius-base)) _(default: undefined)_\n- **--dds-tab-border-radius** - Border radius for tab items (default: var(--dds-radius-base) var(--dds-radius-base) 0 0) _(default: undefined)_\n- **--dds-tab-group-border-width** - Border width of the tab navigation (default: var(--dds-border-width-base)) _(default: undefined)_\n- **--dds-tab-group-border-color** - Border color of the tab navigation (default: var(--dds-border-neutral-subtle)) _(default: undefined)_\n- **--dds-tab-height-sm** - Height of small tabs (default: 40px) _(default: undefined)_\n- **--dds-tab-height-lg** - Height of large tabs (default: 50px) _(default: undefined)_\n- **--dds-tab-font-size-sm** - Font size of small tabs (default: var(--dds-font-base)) _(default: undefined)_\n- **--dds-tab-font-size-lg** - Font size of large tabs (default: var(--dds-font-lg)) _(default: undefined)_\n- **--dds-tab-padding** - Padding of the tab buttons (default: 0 var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-tab-border-width** - Border width for tabs (default: var(--dds-border-width-large)) _(default: undefined)_\n- **--dds-tab-selected-border-color** - Border color for selected tabs (default: var(--dds-border-brand-base)) _(default: undefined)_\n- **--dds-tab-text-color** - Text color for tabs (default: var(--dds-button-subtle-text-neutral-enabled)) _(default: undefined)_\n- **--dds-tab-hover-text-color** - Text color for tabs on hover (default: var(--dds-text-brand-subtle)) _(default: undefined)_\n- **--dds-tab-disabled-text-color** - Text color for disabled tabs (default: var(--dds-text-neutral-disabled)) _(default: undefined)_\n- **--dds-tab-hover-background** - Background color for tabs on hover (default: var(--dds-transparent-black-subtle)) _(default: undefined)_\n- **--dds-tab-active-background** - Background color for active tabs (default: var(--dds-transparent-black-base)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main container.\n- **tab-nav** - The tab navigation container.\n- **tab-content** - The tab content container.",
9975
- "doc-url": "",
9976
- "attributes": [
9977
- {
9978
- "name": "selectedTabId",
9979
- "description": "The selected tab id.",
9980
- "value": { "type": "string" }
9981
- },
9982
- {
9983
- "name": "size",
9984
- "description": "The size of the tab buttons. Default is `sm`. Can be `sm` or `lg`.",
9985
- "value": { "type": "'sm' | 'lg'", "default": "'sm'" }
9986
- },
9987
- {
9988
- "name": "mobile",
9989
- "description": "If true, the tab group will be displayed in mobile mode.",
9990
- "value": { "type": "boolean", "default": "false" }
9991
- }
9992
- ],
9993
- "slots": [{ "name": "", "description": "The tab items." }],
9994
- "events": [
9995
- {
9996
- "name": "dds-tab-select",
9997
- "description": "Fired when select a new tab."
9998
- }
9999
- ],
10000
- "js": {
10001
- "properties": [
10002
- {
10003
- "name": "selectedTabId",
10004
- "description": "The selected tab id.",
10005
- "type": "string"
10006
- },
10007
- {
10008
- "name": "size",
10009
- "description": "The size of the tab buttons. Default is `sm`. Can be `sm` or `lg`.",
10010
- "type": "'sm' | 'lg'"
10011
- },
10012
- {
10013
- "name": "mobile",
10014
- "description": "If true, the tab group will be displayed in mobile mode.",
10015
- "type": "boolean"
10016
- }
10017
- ],
10018
- "events": [
10019
- {
10020
- "name": "dds-tab-select",
10021
- "description": "Fired when select a new tab."
10022
- }
10023
- ]
10024
- }
10025
- },
10026
- {
10027
- "name": "dap-ds-tab",
10028
- "description": "A tab item component. It is used in dap-ds-tab-group component slot to create a tab item.\n---\n\n\n### **Slots:**\n - _default_ - The tab title template.\n- **content** - The tab content.\n\n### **CSS Parts:**\n - **base** - The main tab content container.",
10029
- "doc-url": "",
10030
- "attributes": [
10031
- {
10032
- "name": "tabId",
10033
- "description": "The tab id. Required",
10034
- "value": { "type": "string" }
10035
- },
10036
- {
10037
- "name": "disabled",
10038
- "description": "The disabled state of the tab.",
10039
- "value": { "type": "boolean", "default": "false" }
10040
- }
10041
- ],
10042
- "slots": [
10043
- { "name": "", "description": "The tab title template." },
10044
- { "name": "content", "description": "The tab content." }
10045
- ],
10046
- "events": [],
10047
- "js": {
10048
- "properties": [
10049
- {
10050
- "name": "tabId",
10051
- "description": "The tab id. Required",
10052
- "type": "string"
10053
- },
10054
- {
10055
- "name": "disabled",
10056
- "description": "The disabled state of the tab.",
10057
- "type": "boolean"
10058
- }
10059
- ],
10060
- "events": []
10061
- }
10062
- },
10063
10063
  {
10064
10064
  "name": "dap-ds-toc",
10065
10065
  "description": "A table of contents (TOC) is a list of links that allows users to quickly navigate to sections within a document.\n---\n\n\n### **Events:**\n - **dds-anchor-change** - Event that is triggered when the anchor changes.\n\n### **CSS Properties:**\n - **--dds-toc-border-width** - Width of the TOC border. (default: var(--dds-border-width-base)) _(default: undefined)_\n- **--dds-toc-border-color** - Color of the TOC border. (default: var(--dds-border-neutral-divider)) _(default: undefined)_\n- **--dds-toc-title-color** - Color of the TOC title. (default: var(--dds-text-neutral-strong)) _(default: undefined)_\n- **--dds-toc-title-font-size** - Font size of the TOC title. (default: var(--dds-font-base)) _(default: undefined)_\n- **--dds-toc-title-font-weight** - Font weight of the TOC title. (default: var(--dds-font-weight-bold)) _(default: undefined)_\n- **--dds-toc-title-line-height** - Line height of the TOC title. (default: 1.25) _(default: undefined)_\n- **--dds-toc-link-color** - Color of the TOC links. (default: var(--dds-button-subtle-text-neutral-enabled)) _(default: undefined)_\n- **--dds-toc-link-active-color** - Color of the active TOC link. (default: var(--dds-button-subtle-text-enabled)) _(default: undefined)_\n- **--dds-toc-link-border-color** - Border color of the active TOC link. (default: var(--dds-border-brand-base)) _(default: undefined)_\n- **--dds-toc-link-line-height** - Line height of the TOC links. (default: 1.2) _(default: undefined)_\n- **--dds-toc-link-padding** - Padding of the TOC links. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-toc-indent-level-0** - Indent level of the TOC items. (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-toc-indent-level-1** - Indent level of the TOC items. (default: var(--dds-spacing-800)) _(default: undefined)_\n- **--dds-toc-indent-level-2** - Indent level of the TOC items. (default: var(--dds-spacing-1200)) _(default: undefined)_\n- **--dds-toc-indent-level-3** - Indent level of the TOC items. (default: var(--dds-spacing-1600)) _(default: undefined)_\n- **--dds-toc-indent-level-4** - Indent level of the TOC items. (default: var(--dds-spacing-2000)) _(default: undefined)_\n- **--dds-toc-indent-level-5** - Indent level of the TOC items. (default: var(--dds-spacing-2400)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main container of the toc.",
@@ -10897,7 +10897,7 @@
10897
10897
  }
10898
10898
  },
10899
10899
  {
10900
- "name": "dap-ds-icon-arrow-down-s-fill",
10900
+ "name": "dap-ds-icon-arrow-down-s-line",
10901
10901
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
10902
10902
  "doc-url": "",
10903
10903
  "attributes": [
@@ -10950,7 +10950,7 @@
10950
10950
  }
10951
10951
  },
10952
10952
  {
10953
- "name": "dap-ds-icon-arrow-down-s-line",
10953
+ "name": "dap-ds-icon-arrow-left-down-line",
10954
10954
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
10955
10955
  "doc-url": "",
10956
10956
  "attributes": [
@@ -11003,7 +11003,7 @@
11003
11003
  }
11004
11004
  },
11005
11005
  {
11006
- "name": "dap-ds-icon-arrow-left-down-line",
11006
+ "name": "dap-ds-icon-arrow-left-l-line",
11007
11007
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
11008
11008
  "doc-url": "",
11009
11009
  "attributes": [
@@ -11056,7 +11056,7 @@
11056
11056
  }
11057
11057
  },
11058
11058
  {
11059
- "name": "dap-ds-icon-arrow-left-line",
11059
+ "name": "dap-ds-icon-arrow-down-s-fill",
11060
11060
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
11061
11061
  "doc-url": "",
11062
11062
  "attributes": [
@@ -11109,7 +11109,7 @@
11109
11109
  }
11110
11110
  },
11111
11111
  {
11112
- "name": "dap-ds-icon-arrow-left-l-line",
11112
+ "name": "dap-ds-icon-arrow-left-line",
11113
11113
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
11114
11114
  "doc-url": "",
11115
11115
  "attributes": [
@@ -11480,7 +11480,7 @@
11480
11480
  }
11481
11481
  },
11482
11482
  {
11483
- "name": "dap-ds-icon-arrow-right-s-line",
11483
+ "name": "dap-ds-icon-arrow-right-s-fill",
11484
11484
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
11485
11485
  "doc-url": "",
11486
11486
  "attributes": [
@@ -11533,7 +11533,7 @@
11533
11533
  }
11534
11534
  },
11535
11535
  {
11536
- "name": "dap-ds-icon-arrow-right-s-fill",
11536
+ "name": "dap-ds-icon-arrow-right-s-line",
11537
11537
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
11538
11538
  "doc-url": "",
11539
11539
  "attributes": [
@@ -11851,7 +11851,7 @@
11851
11851
  }
11852
11852
  },
11853
11853
  {
11854
- "name": "dap-ds-icon-calendar-line",
11854
+ "name": "dap-ds-icon-home-6-line",
11855
11855
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
11856
11856
  "doc-url": "",
11857
11857
  "attributes": [
@@ -11904,7 +11904,7 @@
11904
11904
  }
11905
11905
  },
11906
11906
  {
11907
- "name": "dap-ds-icon-home-6-line",
11907
+ "name": "dap-ds-icon-calendar-line",
11908
11908
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
11909
11909
  "doc-url": "",
11910
11910
  "attributes": [
@@ -12540,7 +12540,7 @@
12540
12540
  }
12541
12541
  },
12542
12542
  {
12543
- "name": "dap-ds-icon-heart-fill",
12543
+ "name": "dap-ds-icon-separator",
12544
12544
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
12545
12545
  "doc-url": "",
12546
12546
  "attributes": [
@@ -12593,7 +12593,7 @@
12593
12593
  }
12594
12594
  },
12595
12595
  {
12596
- "name": "dap-ds-icon-separator",
12596
+ "name": "dap-ds-icon-heart-fill",
12597
12597
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
12598
12598
  "doc-url": "",
12599
12599
  "attributes": [