dap-design-system 0.57.6 → 0.57.7

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.
@@ -113,6 +113,105 @@
113
113
  ]
114
114
  }
115
115
  },
116
+ {
117
+ "name": "dap-ds-avatar-group",
118
+ "description": "Avatar group component displays multiple avatars in an organized layout with overflow management.\n---\n\n\n### **Events:**\n - **dds-overflow-click** - Fired when the overflow indicator is clicked.\n\n### **Slots:**\n - _default_ - The avatars to display in the group.\n\n### **CSS Properties:**\n - **--dds-avatar-group-gap** - Gap between avatars in grid layout (default: 0) _(default: undefined)_\n- **--dds-avatar-group-overlap** - Overlap amount for stacked layout (default: -8px) _(default: undefined)_\n- **--dds-avatar-group-border-width** - Border width for avatars (default: var(--dds-border-width-base)) _(default: undefined)_\n- **--dds-avatar-group-border-color** - Border color for avatars (default: var(--dds-border-neutral-divider)) _(default: undefined)_\n- **--dds-avatar-group-overflow-bg** - Background color for overflow indicator (default: var(--dds-neutral-300)) _(default: undefined)_\n- **--dds-avatar-group-overflow-color** - Text color for overflow indicator (default: var(--dds-neutral-700)) _(default: undefined)_\n- **--dds-avatar-group-overflow-border** - Border for overflow indicator (default: var(--dds-avatar-group-border-width) solid var(--dds-avatar-group-border-color)) _(default: undefined)_\n- **--dds-avatar-group-size-lg** - Size for large avatars (default: var(--dds-spacing-2000)) _(default: undefined)_\n- **--dds-avatar-group-size-md** - Size for medium avatars (default: var(--dds-spacing-1600)) _(default: undefined)_\n- **--dds-avatar-group-size-sm** - Size for small avatars (default: var(--dds-spacing-1200)) _(default: undefined)_\n- **--dds-avatar-group-size-xs** - Size for extra small avatars (default: var(--dds-spacing-800)) _(default: undefined)_\n- **--dds-avatar-group-size-xxs** - Size for extra extra small avatars (default: var(--dds-spacing-400)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main container of the avatar group.\n- **avatars** - The container for the visible avatars.\n- **overflow** - The overflow indicator element.",
119
+ "doc-url": "",
120
+ "attributes": [
121
+ {
122
+ "name": "layout",
123
+ "description": "Layout type for the avatar group",
124
+ "value": { "type": "'stack' | 'grid'", "default": "'stack'" }
125
+ },
126
+ {
127
+ "name": "max",
128
+ "description": "Maximum number of avatars to show before showing overflow",
129
+ "value": { "type": "number", "default": "3" }
130
+ },
131
+ {
132
+ "name": "show-total",
133
+ "description": "Whether to show the total count in overflow indicator",
134
+ "value": { "type": "boolean", "default": "false" }
135
+ },
136
+ {
137
+ "name": "interactive-overflow",
138
+ "description": "Interactive overflow indicator",
139
+ "value": { "type": "boolean", "default": "false" }
140
+ },
141
+ {
142
+ "name": "label",
143
+ "description": "Accessible label for the avatar group",
144
+ "value": { "type": "string" }
145
+ },
146
+ {
147
+ "name": "overflow-label",
148
+ "description": "Accessible label for the overflow indicator",
149
+ "value": { "type": "string" }
150
+ }
151
+ ],
152
+ "slots": [
153
+ {
154
+ "name": "",
155
+ "description": "The avatars to display in the group."
156
+ }
157
+ ],
158
+ "events": [
159
+ {
160
+ "name": "dds-overflow-click",
161
+ "description": "Fired when the overflow indicator is clicked."
162
+ }
163
+ ],
164
+ "js": {
165
+ "properties": [
166
+ {
167
+ "name": "layout",
168
+ "description": "Layout type for the avatar group",
169
+ "type": "'stack' | 'grid'"
170
+ },
171
+ {
172
+ "name": "max",
173
+ "description": "Maximum number of avatars to show before showing overflow",
174
+ "type": "number"
175
+ },
176
+ {
177
+ "name": "showTotal",
178
+ "description": "Whether to show the total count in overflow indicator",
179
+ "type": "boolean"
180
+ },
181
+ {
182
+ "name": "interactiveOverflow",
183
+ "description": "Interactive overflow indicator",
184
+ "type": "boolean"
185
+ },
186
+ {
187
+ "name": "label",
188
+ "description": "Accessible label for the avatar group",
189
+ "type": "string"
190
+ },
191
+ {
192
+ "name": "overflowLabel",
193
+ "description": "Accessible label for the overflow indicator",
194
+ "type": "string"
195
+ },
196
+ {
197
+ "name": "size",
198
+ "description": "The size of avatars in the group. Default is `md`. See SizedMixin.",
199
+ "type": "'xxs' | 'xs' | 'sm' | 'md' | 'lg'"
200
+ },
201
+ {
202
+ "name": "sizeMap",
203
+ "description": "Responsive size map (e.g. \"md:lg\"); see SizedMixin.",
204
+ "type": "string"
205
+ }
206
+ ],
207
+ "events": [
208
+ {
209
+ "name": "dds-overflow-click",
210
+ "description": "Fired when the overflow indicator is clicked."
211
+ }
212
+ ]
213
+ }
214
+ },
116
215
  {
117
216
  "name": "dap-ds-avatar",
118
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.",
@@ -270,171 +369,6 @@
270
369
  ]
271
370
  }
272
371
  },
273
- {
274
- "name": "dap-ds-anchor-heading",
275
- "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.",
276
- "doc-url": "",
277
- "attributes": [
278
- {
279
- "name": "variant",
280
- "description": "The variant of the heading. Default is `h2`. Can be `h1`, `h2`, `h3`, `h4`, `h5`, or `h6`.",
281
- "value": { "type": "HeadingVariant" }
282
- },
283
- {
284
- "name": "label",
285
- "description": "The label of the heading.",
286
- "value": { "type": "string" }
287
- }
288
- ],
289
- "events": [],
290
- "js": {
291
- "properties": [
292
- { "name": "variant", "type": "HeadingVariant" },
293
- { "name": "label", "type": "string" },
294
- { "name": "elementId" },
295
- { "name": "anchorTitle" }
296
- ],
297
- "events": []
298
- }
299
- },
300
- {
301
- "name": "dap-ds-accordion-group",
302
- "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.",
303
- "doc-url": "",
304
- "attributes": [
305
- {
306
- "name": "autoClose",
307
- "description": "Whether to close other accordions when one is opened.",
308
- "value": { "type": "string", "default": "'true'" }
309
- },
310
- {
311
- "name": "variant",
312
- "description": "The variant of the accordion",
313
- "value": {
314
- "type": "'default' | 'collapsed' | 'clean' | 'clean-collapsed'",
315
- "default": "'default'"
316
- }
317
- }
318
- ],
319
- "slots": [
320
- { "name": "", "description": "The content of the accordion group." }
321
- ],
322
- "events": [],
323
- "js": {
324
- "properties": [
325
- {
326
- "name": "autoClose",
327
- "description": "Whether to close other accordions when one is opened.",
328
- "type": "string"
329
- },
330
- {
331
- "name": "variant",
332
- "description": "The variant of the accordion",
333
- "type": "'default' | 'collapsed' | 'clean' | 'clean-collapsed'"
334
- }
335
- ],
336
- "events": []
337
- }
338
- },
339
- {
340
- "name": "dap-ds-avatar-group",
341
- "description": "Avatar group component displays multiple avatars in an organized layout with overflow management.\n---\n\n\n### **Events:**\n - **dds-overflow-click** - Fired when the overflow indicator is clicked.\n\n### **Slots:**\n - _default_ - The avatars to display in the group.\n\n### **CSS Properties:**\n - **--dds-avatar-group-gap** - Gap between avatars in grid layout (default: 0) _(default: undefined)_\n- **--dds-avatar-group-overlap** - Overlap amount for stacked layout (default: -8px) _(default: undefined)_\n- **--dds-avatar-group-border-width** - Border width for avatars (default: var(--dds-border-width-base)) _(default: undefined)_\n- **--dds-avatar-group-border-color** - Border color for avatars (default: var(--dds-border-neutral-divider)) _(default: undefined)_\n- **--dds-avatar-group-overflow-bg** - Background color for overflow indicator (default: var(--dds-neutral-300)) _(default: undefined)_\n- **--dds-avatar-group-overflow-color** - Text color for overflow indicator (default: var(--dds-neutral-700)) _(default: undefined)_\n- **--dds-avatar-group-overflow-border** - Border for overflow indicator (default: var(--dds-avatar-group-border-width) solid var(--dds-avatar-group-border-color)) _(default: undefined)_\n- **--dds-avatar-group-size-lg** - Size for large avatars (default: var(--dds-spacing-2000)) _(default: undefined)_\n- **--dds-avatar-group-size-md** - Size for medium avatars (default: var(--dds-spacing-1600)) _(default: undefined)_\n- **--dds-avatar-group-size-sm** - Size for small avatars (default: var(--dds-spacing-1200)) _(default: undefined)_\n- **--dds-avatar-group-size-xs** - Size for extra small avatars (default: var(--dds-spacing-800)) _(default: undefined)_\n- **--dds-avatar-group-size-xxs** - Size for extra extra small avatars (default: var(--dds-spacing-400)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main container of the avatar group.\n- **avatars** - The container for the visible avatars.\n- **overflow** - The overflow indicator element.",
342
- "doc-url": "",
343
- "attributes": [
344
- {
345
- "name": "layout",
346
- "description": "Layout type for the avatar group",
347
- "value": { "type": "'stack' | 'grid'", "default": "'stack'" }
348
- },
349
- {
350
- "name": "max",
351
- "description": "Maximum number of avatars to show before showing overflow",
352
- "value": { "type": "number", "default": "3" }
353
- },
354
- {
355
- "name": "show-total",
356
- "description": "Whether to show the total count in overflow indicator",
357
- "value": { "type": "boolean", "default": "false" }
358
- },
359
- {
360
- "name": "interactive-overflow",
361
- "description": "Interactive overflow indicator",
362
- "value": { "type": "boolean", "default": "false" }
363
- },
364
- {
365
- "name": "label",
366
- "description": "Accessible label for the avatar group",
367
- "value": { "type": "string" }
368
- },
369
- {
370
- "name": "overflow-label",
371
- "description": "Accessible label for the overflow indicator",
372
- "value": { "type": "string" }
373
- }
374
- ],
375
- "slots": [
376
- {
377
- "name": "",
378
- "description": "The avatars to display in the group."
379
- }
380
- ],
381
- "events": [
382
- {
383
- "name": "dds-overflow-click",
384
- "description": "Fired when the overflow indicator is clicked."
385
- }
386
- ],
387
- "js": {
388
- "properties": [
389
- {
390
- "name": "layout",
391
- "description": "Layout type for the avatar group",
392
- "type": "'stack' | 'grid'"
393
- },
394
- {
395
- "name": "max",
396
- "description": "Maximum number of avatars to show before showing overflow",
397
- "type": "number"
398
- },
399
- {
400
- "name": "showTotal",
401
- "description": "Whether to show the total count in overflow indicator",
402
- "type": "boolean"
403
- },
404
- {
405
- "name": "interactiveOverflow",
406
- "description": "Interactive overflow indicator",
407
- "type": "boolean"
408
- },
409
- {
410
- "name": "label",
411
- "description": "Accessible label for the avatar group",
412
- "type": "string"
413
- },
414
- {
415
- "name": "overflowLabel",
416
- "description": "Accessible label for the overflow indicator",
417
- "type": "string"
418
- },
419
- {
420
- "name": "size",
421
- "description": "The size of avatars in the group. Default is `md`. See SizedMixin.",
422
- "type": "'xxs' | 'xs' | 'sm' | 'md' | 'lg'"
423
- },
424
- {
425
- "name": "sizeMap",
426
- "description": "Responsive size map (e.g. \"md:lg\"); see SizedMixin.",
427
- "type": "string"
428
- }
429
- ],
430
- "events": [
431
- {
432
- "name": "dds-overflow-click",
433
- "description": "Fired when the overflow indicator is clicked."
434
- }
435
- ]
436
- }
437
- },
438
372
  {
439
373
  "name": "dap-ds-badge",
440
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.",
@@ -623,6 +557,72 @@
623
557
  "events": []
624
558
  }
625
559
  },
560
+ {
561
+ "name": "dap-ds-accordion-group",
562
+ "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.",
563
+ "doc-url": "",
564
+ "attributes": [
565
+ {
566
+ "name": "autoClose",
567
+ "description": "Whether to close other accordions when one is opened.",
568
+ "value": { "type": "string", "default": "'true'" }
569
+ },
570
+ {
571
+ "name": "variant",
572
+ "description": "The variant of the accordion",
573
+ "value": {
574
+ "type": "'default' | 'collapsed' | 'clean' | 'clean-collapsed'",
575
+ "default": "'default'"
576
+ }
577
+ }
578
+ ],
579
+ "slots": [
580
+ { "name": "", "description": "The content of the accordion group." }
581
+ ],
582
+ "events": [],
583
+ "js": {
584
+ "properties": [
585
+ {
586
+ "name": "autoClose",
587
+ "description": "Whether to close other accordions when one is opened.",
588
+ "type": "string"
589
+ },
590
+ {
591
+ "name": "variant",
592
+ "description": "The variant of the accordion",
593
+ "type": "'default' | 'collapsed' | 'clean' | 'clean-collapsed'"
594
+ }
595
+ ],
596
+ "events": []
597
+ }
598
+ },
599
+ {
600
+ "name": "dap-ds-anchor-heading",
601
+ "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.",
602
+ "doc-url": "",
603
+ "attributes": [
604
+ {
605
+ "name": "variant",
606
+ "description": "The variant of the heading. Default is `h2`. Can be `h1`, `h2`, `h3`, `h4`, `h5`, or `h6`.",
607
+ "value": { "type": "HeadingVariant" }
608
+ },
609
+ {
610
+ "name": "label",
611
+ "description": "The label of the heading.",
612
+ "value": { "type": "string" }
613
+ }
614
+ ],
615
+ "events": [],
616
+ "js": {
617
+ "properties": [
618
+ { "name": "variant", "type": "HeadingVariant" },
619
+ { "name": "label", "type": "string" },
620
+ { "name": "elementId" },
621
+ { "name": "anchorTitle" }
622
+ ],
623
+ "events": []
624
+ }
625
+ },
626
626
  {
627
627
  "name": "dap-ds-breadcrumb-item",
628
628
  "description": "A breadcrumb item is a secondary navigation scheme that reveals the user's location in a website or Web application.\n---\n\n\n### **Slots:**\n - _default_ - The content of the breadcrumb item.\n- **separator** - The separator between breadcrumb items. Default is an arrow-right-s-line icon.\n\n### **CSS Properties:**\n - **--dds-breadcrumb-item-display** - The display property of the breadcrumb item (default: inline-flex) _(default: undefined)_\n- **--dds-breadcrumb-item-flex-wrap** - The flex-wrap property of the breadcrumb item (default: nowrap) _(default: undefined)_\n- **--dds-breadcrumb-item-align-items** - The align-items property of the breadcrumb item (default: center) _(default: undefined)_\n- **--dds-breadcrumb-item-color** - The text color of the breadcrumb item (default: var(--dds-text-neutral-base)) _(default: undefined)_\n- **--dds-breadcrumb-item-transition** - The transition property for the breadcrumb item (default: all 0.2s ease-in-out) _(default: undefined)_\n- **--dds-breadcrumb-item-gap** - The gap between the breadcrumb item and the separator (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-breadcrumb-item-padding** - The padding of the breadcrumb item (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-breadcrumb-item-font-size** - The font size of the breadcrumb item (default: var(--dds-font-sm)) _(default: undefined)_\n- **--dds-breadcrumb-item-font-weight** - The font weight of the breadcrumb item (default: var(--dds-font-weight-medium)) _(default: undefined)_\n- **--dds-breadcrumb-item-font-weight-bold** - The bold font weight of the breadcrumb item (default: var(--dds-font-weight-bold)) _(default: undefined)_\n- **--dds-breadcrumb-item-separator-color** - The color of the separator (default: var(--dds-text-neutral-disabled)) _(default: undefined)_\n- **--dds-breadcrumb-item-link-color** - The color of the link (default: var(--dds-link-neutral-enabled)) _(default: undefined)_\n- **--dds-breadcrumb-item-inverted-color** - The text color when inverted (default: var(--dds-text-neutral-inverted)) _(default: undefined)_\n- **--dds-breadcrumb-item-inverted-link-color** - The link color when inverted (default: var(--dds-text-neutral-inverted)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main breadcrumb item container. The li element.\n- **link** - The link of the breadcrumb item. The dds-link component.\n- **link-base** - The base part of the link part. The dds-link components base part.\n- **item-nolink** - The item of the breadcrumb item without a link. The span element.\n- **separator** - The separator of the breadcrumb item.",
@@ -1208,21 +1208,216 @@
1208
1208
  "type": "string"
1209
1209
  },
1210
1210
  {
1211
- "name": "closeButtonLabel",
1212
- "description": "The label of the close button",
1213
- "type": "string"
1211
+ "name": "closeButtonLabel",
1212
+ "description": "The label of the close button",
1213
+ "type": "string"
1214
+ },
1215
+ {
1216
+ "name": "opened",
1217
+ "description": "If the callout is opened",
1218
+ "type": "string"
1219
+ }
1220
+ ],
1221
+ "events": [
1222
+ {
1223
+ "name": "dds-close",
1224
+ "type": "{ void }",
1225
+ "description": "Fired when the close button is clicked."
1226
+ }
1227
+ ]
1228
+ }
1229
+ },
1230
+ {
1231
+ "name": "dap-ds-checkbox",
1232
+ "description": "A checkbox is a form element that allows the user to select one or more options from a set.\n---\n\n\n### **Events:**\n - **dds-change** - Fired when the checkbox is checked or unchecked.\n- **dds-blur** - Emitted when the checkbox loses focus.\n- **dds-focus** - Emitted when the checkbox gains focus.\n- **dds-input** - Emitted when the checkbox receives input.\n\n### **Methods:**\n - **focus(): _void_** - Programmatically focuses the checkbox input element.\n- **blur(): _void_** - Programmatically blurs the checkbox input element.\n\n### **CSS Properties:**\n - **--dds-checkbox-size** - The size of the checkbox. (default: var(--dds-spacing-500)) _(default: undefined)_\n- **--dds-checkbox-border-width** - The border width of the checkbox. (default: var(--dds-border-width-large)) _(default: undefined)_\n- **--dds-checkbox-border-radius** - The border radius of the checkbox. (default: var(--dds-radius-small)) _(default: undefined)_\n- **--dds-checkbox-border-color** - The border color of the checkbox. (default: var(--dds-border-neutral-base)) _(default: undefined)_\n- **--dds-checkbox-background-color** - The background color of the checkbox. (default: transparent) _(default: undefined)_\n- **--dds-checkbox-icon-color** - The color of the checkbox icon. (default: var(--dds-button-primary-icon-enabled)) _(default: undefined)_\n- **--dds-checkbox-hover-border-color** - The border color when hovering over the checkbox. (default: var(--dds-border-neutral-medium)) _(default: undefined)_\n- **--dds-checkbox-hover-background-color** - The background color when hovering over the checkbox. (default: var(--dds-background-neutral-medium)) _(default: undefined)_\n- **--dds-checkbox-active-border-color** - The border color when the checkbox is active. (default: var(--dds-border-neutral-strong)) _(default: undefined)_\n- **--dds-checkbox-active-background-color** - The background color when the checkbox is active. (default: var(--dds-background-neutral-strong)) _(default: undefined)_\n- **--dds-checkbox-checked-border-color** - The border color when the checkbox is checked. (default: var(--dds-background-brand-base-inverted)) _(default: undefined)_\n- **--dds-checkbox-checked-background-color** - The background color when the checkbox is checked. (default: var(--dds-background-brand-base-inverted)) _(default: undefined)_\n- **--dds-checkbox-checked-hover-border-color** - The border color when hovering over a checked checkbox. (default: var(--dds-background-brand-medium-inverted)) _(default: undefined)_\n- **--dds-checkbox-checked-hover-background-color** - The background color when hovering over a checked checkbox. (default: var(--dds-background-brand-medium-inverted)) _(default: undefined)_\n- **--dds-checkbox-checked-active-border-color** - The border color when a checked checkbox is active. (default: var(--dds-background-brand-strong-inverted)) _(default: undefined)_\n- **--dds-checkbox-checked-active-background-color** - The background color when a checked checkbox is active. (default: var(--dds-background-brand-strong-inverted)) _(default: undefined)_\n- **--dds-checkbox-invalid-border-color** - The border color when the checkbox is invalid. (default: var(--dds-border-negative-base)) _(default: undefined)_\n- **--dds-checkbox-invalid-background-color** - The background color when the checkbox is invalid. (default: var(--dds-background-negative-base)) _(default: undefined)_\n- **--dds-checkbox-invalid-hover-border-color** - The border color when hovering over an invalid checkbox. (default: var(--dds-border-negative-medium)) _(default: undefined)_\n- **--dds-checkbox-invalid-hover-background-color** - The background color when hovering over an invalid checkbox. (default: var(--dds-background-negative-medium)) _(default: undefined)_\n- **--dds-checkbox-invalid-active-border-color** - The border color when an invalid checkbox is active. (default: var(--dds-border-negative-strong)) _(default: undefined)_\n- **--dds-checkbox-invalid-active-background-color** - The background color when an invalid checkbox is active. (default: var(--dds-background-negative-strong)) _(default: undefined)_\n- **--dds-checkbox-disabled-border-color** - The border color when the checkbox is disabled. (default: var(--dds-button-primary-background-disabled)) _(default: undefined)_\n- **--dds-checkbox-disabled-background-color** - The background color when the checkbox is disabled. (default: var(--dds-button-primary-background-disabled)) _(default: undefined)_\n- **--dds-checkbox-disabled-icon-color** - The color of the checkbox icon when disabled. (default: var(--dds-button-primary-icon-disabled)) _(default: undefined)_\n- **--dds-checkbox-readonly-border-color** - The border color when the checkbox is readonly. (default: var(--dds-border-neutral-subtle)) _(default: undefined)_\n- **--dds-checkbox-readonly-background-color** - The background color when the checkbox is readonly. (default: var(--dds-background-neutral-subtle)) _(default: undefined)_\n- **--dds-checkbox-readonly-icon-color** - The color of the checkbox icon when readonly. (default: var(--dds-text-neutral-base)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main checkbox container.\n- **label** - The label of the checkbox.\n- **input** - The input of the checkbox.\n- **control** - The control of the checkbox.\n- **icon** - The icon of the checkbox.\n- **icon-base** - The base icon container.\n- **label-container** - The label container of the checkbox.\n- **description** - The description of the checkbox.\n- **readonly** - The readonly state of the checkbox.",
1233
+ "doc-url": "",
1234
+ "attributes": [
1235
+ {
1236
+ "name": "indeterminate",
1237
+ "description": "Whether the checkbox is indeterminate",
1238
+ "value": { "type": "boolean", "default": "false" }
1239
+ },
1240
+ {
1241
+ "name": "preventDefault",
1242
+ "description": "Whether the checkbox should prevent the default action",
1243
+ "value": { "type": "boolean", "default": "false" }
1244
+ },
1245
+ {
1246
+ "name": "border",
1247
+ "description": "This sets up border around the checkbox, when true.",
1248
+ "value": { "type": "boolean", "default": "false" }
1249
+ },
1250
+ {
1251
+ "name": "readonly",
1252
+ "description": "Whether the checkbox is readonly (cannot be changed but value is submitted with form).",
1253
+ "value": { "type": "boolean", "default": "false" }
1254
+ },
1255
+ {
1256
+ "name": "type",
1257
+ "description": "The type of the checkbox",
1258
+ "value": {
1259
+ "type": "'normal' | 'background'",
1260
+ "default": "'normal'"
1261
+ }
1262
+ }
1263
+ ],
1264
+ "events": [
1265
+ {
1266
+ "name": "dds-change",
1267
+ "type": "{ checked: boolean, indeterminate: boolean, value: string, disabled: boolean, readonly: boolean, type: 'checkbox' }",
1268
+ "description": "Fired when the checkbox is checked or unchecked."
1269
+ },
1270
+ {
1271
+ "name": "dds-blur",
1272
+ "type": "{ void }",
1273
+ "description": "Emitted when the checkbox loses focus."
1274
+ },
1275
+ {
1276
+ "name": "dds-focus",
1277
+ "type": "{ void }",
1278
+ "description": "Emitted when the checkbox gains focus."
1279
+ },
1280
+ {
1281
+ "name": "dds-input",
1282
+ "type": "{ checked: boolean, indeterminate: boolean, value: string, disabled: boolean, readonly: boolean }",
1283
+ "description": "Emitted when the checkbox receives input."
1284
+ }
1285
+ ],
1286
+ "js": {
1287
+ "properties": [
1288
+ {
1289
+ "name": "indeterminate",
1290
+ "description": "Whether the checkbox is indeterminate",
1291
+ "type": "boolean"
1292
+ },
1293
+ {
1294
+ "name": "preventDefault",
1295
+ "description": "Whether the checkbox should prevent the default action",
1296
+ "type": "boolean"
1297
+ },
1298
+ {
1299
+ "name": "border",
1300
+ "description": "This sets up border around the checkbox, when true.",
1301
+ "type": "boolean"
1302
+ },
1303
+ {
1304
+ "name": "readonly",
1305
+ "description": "Whether the checkbox is readonly (cannot be changed but value is submitted with form).",
1306
+ "type": "boolean"
1307
+ },
1308
+ {
1309
+ "name": "type",
1310
+ "description": "The type of the checkbox",
1311
+ "type": "'normal' | 'background'"
1312
+ },
1313
+ { "name": "focusElement", "type": "HTMLInputElement" },
1314
+ { "name": "feedbackId" },
1315
+ {
1316
+ "name": "name",
1317
+ "description": "The name of the checkbox.",
1318
+ "type": "string"
1319
+ },
1320
+ {
1321
+ "name": "value",
1322
+ "description": "The value of the checkbox.",
1323
+ "type": "string"
1324
+ },
1325
+ {
1326
+ "name": "checked",
1327
+ "description": "Whether the checkbox is checked.",
1328
+ "type": "boolean"
1329
+ },
1330
+ {
1331
+ "name": "label",
1332
+ "description": "The label of the checkbox.",
1333
+ "type": "string"
1334
+ },
1335
+ {
1336
+ "name": "description",
1337
+ "description": "The description of the checkbox.",
1338
+ "type": "string"
1339
+ },
1340
+ {
1341
+ "name": "disabled",
1342
+ "description": "Whether the checkbox is disabled.",
1343
+ "type": "boolean"
1344
+ },
1345
+ {
1346
+ "name": "required",
1347
+ "description": "Whether the checkbox is required.",
1348
+ "type": "boolean"
1349
+ },
1350
+ {
1351
+ "name": "size",
1352
+ "description": "The size of the checkbox. Default is 'sm'.",
1353
+ "type": "'xs' | 'sm' | 'lg'"
1354
+ },
1355
+ {
1356
+ "name": "sizeMap",
1357
+ "description": "Responsive size map (e.g. \"md:lg\").",
1358
+ "type": "string"
1359
+ },
1360
+ {
1361
+ "name": "labelPlacement",
1362
+ "description": "The placement of the label.",
1363
+ "type": "'left' | 'right'"
1364
+ },
1365
+ {
1366
+ "name": "descriptionPlacement",
1367
+ "description": "The placement of the description.",
1368
+ "type": "'top' | 'bottom'"
1369
+ },
1370
+ {
1371
+ "name": "subtle",
1372
+ "description": "The weight of the label.",
1373
+ "type": "boolean"
1374
+ },
1375
+ {
1376
+ "name": "feedback",
1377
+ "description": "The feedback of the checkbox.",
1378
+ "type": "string"
1379
+ },
1380
+ {
1381
+ "name": "feedbackType",
1382
+ "description": "The feedback type of the checkbox.",
1383
+ "type": "'negative' | 'positive' | 'warning'"
1384
+ },
1385
+ {
1386
+ "name": "invalid",
1387
+ "description": "The invalid state of the checkbox.",
1388
+ "type": "boolean"
1389
+ },
1390
+ {
1391
+ "name": "optional",
1392
+ "description": "The optional state of the checkbox.",
1393
+ "type": "boolean"
1214
1394
  },
1215
1395
  {
1216
- "name": "opened",
1217
- "description": "If the callout is opened",
1396
+ "name": "optionalLabel",
1397
+ "description": "The optional label of the checkbox.",
1218
1398
  "type": "string"
1219
1399
  }
1220
1400
  ],
1221
1401
  "events": [
1222
1402
  {
1223
- "name": "dds-close",
1403
+ "name": "dds-change",
1404
+ "type": "{ checked: boolean, indeterminate: boolean, value: string, disabled: boolean, readonly: boolean, type: 'checkbox' }",
1405
+ "description": "Fired when the checkbox is checked or unchecked."
1406
+ },
1407
+ {
1408
+ "name": "dds-blur",
1224
1409
  "type": "{ void }",
1225
- "description": "Fired when the close button is clicked."
1410
+ "description": "Emitted when the checkbox loses focus."
1411
+ },
1412
+ {
1413
+ "name": "dds-focus",
1414
+ "type": "{ void }",
1415
+ "description": "Emitted when the checkbox gains focus."
1416
+ },
1417
+ {
1418
+ "name": "dds-input",
1419
+ "type": "{ checked: boolean, indeterminate: boolean, value: string, disabled: boolean, readonly: boolean }",
1420
+ "description": "Emitted when the checkbox receives input."
1226
1421
  }
1227
1422
  ]
1228
1423
  }
@@ -1563,201 +1758,6 @@
1563
1758
  "events": []
1564
1759
  }
1565
1760
  },
1566
- {
1567
- "name": "dap-ds-checkbox",
1568
- "description": "A checkbox is a form element that allows the user to select one or more options from a set.\n---\n\n\n### **Events:**\n - **dds-change** - Fired when the checkbox is checked or unchecked.\n- **dds-blur** - Emitted when the checkbox loses focus.\n- **dds-focus** - Emitted when the checkbox gains focus.\n- **dds-input** - Emitted when the checkbox receives input.\n\n### **Methods:**\n - **focus(): _void_** - Programmatically focuses the checkbox input element.\n- **blur(): _void_** - Programmatically blurs the checkbox input element.\n\n### **CSS Properties:**\n - **--dds-checkbox-size** - The size of the checkbox. (default: var(--dds-spacing-500)) _(default: undefined)_\n- **--dds-checkbox-border-width** - The border width of the checkbox. (default: var(--dds-border-width-large)) _(default: undefined)_\n- **--dds-checkbox-border-radius** - The border radius of the checkbox. (default: var(--dds-radius-small)) _(default: undefined)_\n- **--dds-checkbox-border-color** - The border color of the checkbox. (default: var(--dds-border-neutral-base)) _(default: undefined)_\n- **--dds-checkbox-background-color** - The background color of the checkbox. (default: transparent) _(default: undefined)_\n- **--dds-checkbox-icon-color** - The color of the checkbox icon. (default: var(--dds-button-primary-icon-enabled)) _(default: undefined)_\n- **--dds-checkbox-hover-border-color** - The border color when hovering over the checkbox. (default: var(--dds-border-neutral-medium)) _(default: undefined)_\n- **--dds-checkbox-hover-background-color** - The background color when hovering over the checkbox. (default: var(--dds-background-neutral-medium)) _(default: undefined)_\n- **--dds-checkbox-active-border-color** - The border color when the checkbox is active. (default: var(--dds-border-neutral-strong)) _(default: undefined)_\n- **--dds-checkbox-active-background-color** - The background color when the checkbox is active. (default: var(--dds-background-neutral-strong)) _(default: undefined)_\n- **--dds-checkbox-checked-border-color** - The border color when the checkbox is checked. (default: var(--dds-background-brand-base-inverted)) _(default: undefined)_\n- **--dds-checkbox-checked-background-color** - The background color when the checkbox is checked. (default: var(--dds-background-brand-base-inverted)) _(default: undefined)_\n- **--dds-checkbox-checked-hover-border-color** - The border color when hovering over a checked checkbox. (default: var(--dds-background-brand-medium-inverted)) _(default: undefined)_\n- **--dds-checkbox-checked-hover-background-color** - The background color when hovering over a checked checkbox. (default: var(--dds-background-brand-medium-inverted)) _(default: undefined)_\n- **--dds-checkbox-checked-active-border-color** - The border color when a checked checkbox is active. (default: var(--dds-background-brand-strong-inverted)) _(default: undefined)_\n- **--dds-checkbox-checked-active-background-color** - The background color when a checked checkbox is active. (default: var(--dds-background-brand-strong-inverted)) _(default: undefined)_\n- **--dds-checkbox-invalid-border-color** - The border color when the checkbox is invalid. (default: var(--dds-border-negative-base)) _(default: undefined)_\n- **--dds-checkbox-invalid-background-color** - The background color when the checkbox is invalid. (default: var(--dds-background-negative-base)) _(default: undefined)_\n- **--dds-checkbox-invalid-hover-border-color** - The border color when hovering over an invalid checkbox. (default: var(--dds-border-negative-medium)) _(default: undefined)_\n- **--dds-checkbox-invalid-hover-background-color** - The background color when hovering over an invalid checkbox. (default: var(--dds-background-negative-medium)) _(default: undefined)_\n- **--dds-checkbox-invalid-active-border-color** - The border color when an invalid checkbox is active. (default: var(--dds-border-negative-strong)) _(default: undefined)_\n- **--dds-checkbox-invalid-active-background-color** - The background color when an invalid checkbox is active. (default: var(--dds-background-negative-strong)) _(default: undefined)_\n- **--dds-checkbox-disabled-border-color** - The border color when the checkbox is disabled. (default: var(--dds-button-primary-background-disabled)) _(default: undefined)_\n- **--dds-checkbox-disabled-background-color** - The background color when the checkbox is disabled. (default: var(--dds-button-primary-background-disabled)) _(default: undefined)_\n- **--dds-checkbox-disabled-icon-color** - The color of the checkbox icon when disabled. (default: var(--dds-button-primary-icon-disabled)) _(default: undefined)_\n- **--dds-checkbox-readonly-border-color** - The border color when the checkbox is readonly. (default: var(--dds-border-neutral-subtle)) _(default: undefined)_\n- **--dds-checkbox-readonly-background-color** - The background color when the checkbox is readonly. (default: var(--dds-background-neutral-subtle)) _(default: undefined)_\n- **--dds-checkbox-readonly-icon-color** - The color of the checkbox icon when readonly. (default: var(--dds-text-neutral-base)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main checkbox container.\n- **label** - The label of the checkbox.\n- **input** - The input of the checkbox.\n- **control** - The control of the checkbox.\n- **icon** - The icon of the checkbox.\n- **icon-base** - The base icon container.\n- **label-container** - The label container of the checkbox.\n- **description** - The description of the checkbox.\n- **readonly** - The readonly state of the checkbox.",
1569
- "doc-url": "",
1570
- "attributes": [
1571
- {
1572
- "name": "indeterminate",
1573
- "description": "Whether the checkbox is indeterminate",
1574
- "value": { "type": "boolean", "default": "false" }
1575
- },
1576
- {
1577
- "name": "preventDefault",
1578
- "description": "Whether the checkbox should prevent the default action",
1579
- "value": { "type": "boolean", "default": "false" }
1580
- },
1581
- {
1582
- "name": "border",
1583
- "description": "This sets up border around the checkbox, when true.",
1584
- "value": { "type": "boolean", "default": "false" }
1585
- },
1586
- {
1587
- "name": "readonly",
1588
- "description": "Whether the checkbox is readonly (cannot be changed but value is submitted with form).",
1589
- "value": { "type": "boolean", "default": "false" }
1590
- },
1591
- {
1592
- "name": "type",
1593
- "description": "The type of the checkbox",
1594
- "value": {
1595
- "type": "'normal' | 'background'",
1596
- "default": "'normal'"
1597
- }
1598
- }
1599
- ],
1600
- "events": [
1601
- {
1602
- "name": "dds-change",
1603
- "type": "{ checked: boolean, indeterminate: boolean, value: string, disabled: boolean, readonly: boolean, type: 'checkbox' }",
1604
- "description": "Fired when the checkbox is checked or unchecked."
1605
- },
1606
- {
1607
- "name": "dds-blur",
1608
- "type": "{ void }",
1609
- "description": "Emitted when the checkbox loses focus."
1610
- },
1611
- {
1612
- "name": "dds-focus",
1613
- "type": "{ void }",
1614
- "description": "Emitted when the checkbox gains focus."
1615
- },
1616
- {
1617
- "name": "dds-input",
1618
- "type": "{ checked: boolean, indeterminate: boolean, value: string, disabled: boolean, readonly: boolean }",
1619
- "description": "Emitted when the checkbox receives input."
1620
- }
1621
- ],
1622
- "js": {
1623
- "properties": [
1624
- {
1625
- "name": "indeterminate",
1626
- "description": "Whether the checkbox is indeterminate",
1627
- "type": "boolean"
1628
- },
1629
- {
1630
- "name": "preventDefault",
1631
- "description": "Whether the checkbox should prevent the default action",
1632
- "type": "boolean"
1633
- },
1634
- {
1635
- "name": "border",
1636
- "description": "This sets up border around the checkbox, when true.",
1637
- "type": "boolean"
1638
- },
1639
- {
1640
- "name": "readonly",
1641
- "description": "Whether the checkbox is readonly (cannot be changed but value is submitted with form).",
1642
- "type": "boolean"
1643
- },
1644
- {
1645
- "name": "type",
1646
- "description": "The type of the checkbox",
1647
- "type": "'normal' | 'background'"
1648
- },
1649
- { "name": "focusElement", "type": "HTMLInputElement" },
1650
- { "name": "feedbackId" },
1651
- {
1652
- "name": "name",
1653
- "description": "The name of the checkbox.",
1654
- "type": "string"
1655
- },
1656
- {
1657
- "name": "value",
1658
- "description": "The value of the checkbox.",
1659
- "type": "string"
1660
- },
1661
- {
1662
- "name": "checked",
1663
- "description": "Whether the checkbox is checked.",
1664
- "type": "boolean"
1665
- },
1666
- {
1667
- "name": "label",
1668
- "description": "The label of the checkbox.",
1669
- "type": "string"
1670
- },
1671
- {
1672
- "name": "description",
1673
- "description": "The description of the checkbox.",
1674
- "type": "string"
1675
- },
1676
- {
1677
- "name": "disabled",
1678
- "description": "Whether the checkbox is disabled.",
1679
- "type": "boolean"
1680
- },
1681
- {
1682
- "name": "required",
1683
- "description": "Whether the checkbox is required.",
1684
- "type": "boolean"
1685
- },
1686
- {
1687
- "name": "size",
1688
- "description": "The size of the checkbox. Default is 'sm'.",
1689
- "type": "'xs' | 'sm' | 'lg'"
1690
- },
1691
- {
1692
- "name": "sizeMap",
1693
- "description": "Responsive size map (e.g. \"md:lg\").",
1694
- "type": "string"
1695
- },
1696
- {
1697
- "name": "labelPlacement",
1698
- "description": "The placement of the label.",
1699
- "type": "'left' | 'right'"
1700
- },
1701
- {
1702
- "name": "descriptionPlacement",
1703
- "description": "The placement of the description.",
1704
- "type": "'top' | 'bottom'"
1705
- },
1706
- {
1707
- "name": "subtle",
1708
- "description": "The weight of the label.",
1709
- "type": "boolean"
1710
- },
1711
- {
1712
- "name": "feedback",
1713
- "description": "The feedback of the checkbox.",
1714
- "type": "string"
1715
- },
1716
- {
1717
- "name": "feedbackType",
1718
- "description": "The feedback type of the checkbox.",
1719
- "type": "'negative' | 'positive' | 'warning'"
1720
- },
1721
- {
1722
- "name": "invalid",
1723
- "description": "The invalid state of the checkbox.",
1724
- "type": "boolean"
1725
- },
1726
- {
1727
- "name": "optional",
1728
- "description": "The optional state of the checkbox.",
1729
- "type": "boolean"
1730
- },
1731
- {
1732
- "name": "optionalLabel",
1733
- "description": "The optional label of the checkbox.",
1734
- "type": "string"
1735
- }
1736
- ],
1737
- "events": [
1738
- {
1739
- "name": "dds-change",
1740
- "type": "{ checked: boolean, indeterminate: boolean, value: string, disabled: boolean, readonly: boolean, type: 'checkbox' }",
1741
- "description": "Fired when the checkbox is checked or unchecked."
1742
- },
1743
- {
1744
- "name": "dds-blur",
1745
- "type": "{ void }",
1746
- "description": "Emitted when the checkbox loses focus."
1747
- },
1748
- {
1749
- "name": "dds-focus",
1750
- "type": "{ void }",
1751
- "description": "Emitted when the checkbox gains focus."
1752
- },
1753
- {
1754
- "name": "dds-input",
1755
- "type": "{ checked: boolean, indeterminate: boolean, value: string, disabled: boolean, readonly: boolean }",
1756
- "description": "Emitted when the checkbox receives input."
1757
- }
1758
- ]
1759
- }
1760
- },
1761
1761
  {
1762
1762
  "name": "dap-ds-chip",
1763
1763
  "description": "A chip is a small status descriptor for UI elements.\n---\n\n\n### **Events:**\n - **dds-remove** - Fired when the chip is removed\n- **dds-select** - Fired when the chip is selected\n\n### **CSS Properties:**\n - **--dds-chip-border** - Border of the chip (default: var(--dds-border-width-base) solid var(--dds-transparent-black-base)) _(default: undefined)_\n- **--dds-chip-border-radius** - Border radius of the chip (default: var(--dds-radius-small)) _(default: undefined)_\n- **--dds-chip-font-weight** - Font weight of the chip (default: var(--dds-font-weight-bold)) _(default: undefined)_\n- **--dds-chip-line-height** - Line height of the chip (default: 1.5) _(default: undefined)_\n- **--dds-chip-transition** - Transition timing for chip interactions (default: all 0.2s ease-in-out) _(default: undefined)_\n- **--dds-chip-padding-sm** - Padding for small chip size (default: var(--dds-spacing-100) var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-chip-padding-lg** - Padding for large chip size (default: var(--dds-spacing-200) var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-chip-font-size-sm** - Font size for small chip size (default: var(--dds-font-xs)) _(default: undefined)_\n- **--dds-chip-font-size-lg** - Font size for large chip size (default: var(--dds-font-xs)) _(default: undefined)_\n- **--dds-chip-background-color** - Background color of the chip (default: var(--dds-background-neutral-base)) _(default: undefined)_\n- **--dds-chip-text-color** - Text color of the chip (default: var(--dds-text-neutral-base)) _(default: undefined)_\n- **--dds-chip-hover-background-color** - Background color of the chip on hover (default: var(--dds-background-neutral-medium)) _(default: undefined)_\n- **--dds-chip-active-background-color** - Background color of the chip when active (default: var(--dds-background-neutral-strong)) _(default: undefined)_\n- **--dds-chip-selected-background-color** - Background color of the selected chip (default: var(--dds-background-brand-medium)) _(default: undefined)_\n- **--dds-chip-selected-text-color** - Text color of the selected chip (default: var(--dds-text-brand-subtle)) _(default: undefined)_\n- **--dds-chip-selected-border-color** - Border color of the selected chip (default: var(--dds-border-brand-base)) _(default: undefined)_\n- **--dds-chip-disabled-background-color** - Background color of the disabled chip (default: var(--dds-background-neutral-medium)) _(default: undefined)_\n- **--dds-chip-disabled-text-color** - Text color of the disabled chip (default: var(--dds-text-neutral-subtle)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The base part\n- **content-container** - The container for the content\n- **remove-button** - The remove button\n- **remove-icon** - The icon of the remove icon\n- **remove-icon-base** - The base of the remove icon\n- **remove-icon-base-base** - The base of the remove icon base",
@@ -11518,7 +11518,7 @@
11518
11518
  }
11519
11519
  },
11520
11520
  {
11521
- "name": "dap-ds-icon-arrow-left-up-line",
11521
+ "name": "dap-ds-icon-arrow-right-down-line",
11522
11522
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
11523
11523
  "doc-url": "",
11524
11524
  "attributes": [
@@ -11571,7 +11571,7 @@
11571
11571
  }
11572
11572
  },
11573
11573
  {
11574
- "name": "dap-ds-icon-arrow-right-down-line",
11574
+ "name": "dap-ds-icon-arrow-left-up-line",
11575
11575
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
11576
11576
  "doc-url": "",
11577
11577
  "attributes": [
@@ -11624,7 +11624,7 @@
11624
11624
  }
11625
11625
  },
11626
11626
  {
11627
- "name": "dap-ds-icon-arrow-right-l-line",
11627
+ "name": "dap-ds-icon-arrow-right-line",
11628
11628
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
11629
11629
  "doc-url": "",
11630
11630
  "attributes": [
@@ -11677,7 +11677,7 @@
11677
11677
  }
11678
11678
  },
11679
11679
  {
11680
- "name": "dap-ds-icon-arrow-right-line",
11680
+ "name": "dap-ds-icon-arrow-right-l-line",
11681
11681
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
11682
11682
  "doc-url": "",
11683
11683
  "attributes": [
@@ -12366,7 +12366,7 @@
12366
12366
  }
12367
12367
  },
12368
12368
  {
12369
- "name": "dap-ds-icon-clipboard-line",
12369
+ "name": "dap-ds-icon-separator",
12370
12370
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
12371
12371
  "doc-url": "",
12372
12372
  "attributes": [
@@ -12419,7 +12419,7 @@
12419
12419
  }
12420
12420
  },
12421
12421
  {
12422
- "name": "dap-ds-icon-file-copy-line",
12422
+ "name": "dap-ds-icon-clipboard-line",
12423
12423
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
12424
12424
  "doc-url": "",
12425
12425
  "attributes": [
@@ -12472,7 +12472,7 @@
12472
12472
  }
12473
12473
  },
12474
12474
  {
12475
- "name": "dap-ds-icon-file-image-line",
12475
+ "name": "dap-ds-icon-file-copy-line",
12476
12476
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
12477
12477
  "doc-url": "",
12478
12478
  "attributes": [
@@ -12525,7 +12525,7 @@
12525
12525
  }
12526
12526
  },
12527
12527
  {
12528
- "name": "dap-ds-icon-file-music-line",
12528
+ "name": "dap-ds-icon-file-image-line",
12529
12529
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
12530
12530
  "doc-url": "",
12531
12531
  "attributes": [
@@ -12578,7 +12578,7 @@
12578
12578
  }
12579
12579
  },
12580
12580
  {
12581
- "name": "dap-ds-icon-file-text-line",
12581
+ "name": "dap-ds-icon-file-music-line",
12582
12582
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
12583
12583
  "doc-url": "",
12584
12584
  "attributes": [
@@ -12631,7 +12631,7 @@
12631
12631
  }
12632
12632
  },
12633
12633
  {
12634
- "name": "dap-ds-icon-file-video-line",
12634
+ "name": "dap-ds-icon-file-text-line",
12635
12635
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
12636
12636
  "doc-url": "",
12637
12637
  "attributes": [
@@ -12684,7 +12684,7 @@
12684
12684
  }
12685
12685
  },
12686
12686
  {
12687
- "name": "dap-ds-icon-folder-line",
12687
+ "name": "dap-ds-icon-file-video-line",
12688
12688
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
12689
12689
  "doc-url": "",
12690
12690
  "attributes": [
@@ -12737,7 +12737,7 @@
12737
12737
  }
12738
12738
  },
12739
12739
  {
12740
- "name": "dap-ds-icon-folder-open-line",
12740
+ "name": "dap-ds-icon-folder-line",
12741
12741
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
12742
12742
  "doc-url": "",
12743
12743
  "attributes": [
@@ -12790,7 +12790,7 @@
12790
12790
  }
12791
12791
  },
12792
12792
  {
12793
- "name": "dap-ds-icon-separator",
12793
+ "name": "dap-ds-icon-folder-open-line",
12794
12794
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
12795
12795
  "doc-url": "",
12796
12796
  "attributes": [
@@ -14168,7 +14168,7 @@
14168
14168
  }
14169
14169
  },
14170
14170
  {
14171
- "name": "dap-ds-icon-external-link-line",
14171
+ "name": "dap-ds-icon-error-warning-line",
14172
14172
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
14173
14173
  "doc-url": "",
14174
14174
  "attributes": [
@@ -14221,7 +14221,7 @@
14221
14221
  }
14222
14222
  },
14223
14223
  {
14224
- "name": "dap-ds-icon-eye-line",
14224
+ "name": "dap-ds-icon-external-link-line",
14225
14225
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
14226
14226
  "doc-url": "",
14227
14227
  "attributes": [
@@ -14274,7 +14274,7 @@
14274
14274
  }
14275
14275
  },
14276
14276
  {
14277
- "name": "dap-ds-icon-error-warning-line",
14277
+ "name": "dap-ds-icon-eye-line",
14278
14278
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
14279
14279
  "doc-url": "",
14280
14280
  "attributes": [