dap-design-system 0.53.21 → 0.54.0

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 (31) hide show
  1. package/dist/common/types.d.ts +1 -0
  2. package/dist/components/icons/system/system-zoom-in-line/system-zoom-in-line.component.d.ts +30 -0
  3. package/dist/components/icons/system/system-zoom-in-line/system-zoom-in-line.d.ts +8 -0
  4. package/dist/components/icons/system/system-zoom-out-line/system-zoom-out-line.component.d.ts +30 -0
  5. package/dist/components/icons/system/system-zoom-out-line/system-zoom-out-line.d.ts +8 -0
  6. package/dist/components/image-zoom/image-zoom.component.d.ts +78 -0
  7. package/dist/{components-Dz0ahnZp.js → components-DA73YE3_.js} +5634 -5428
  8. package/dist/components-DA73YE3_.js.map +1 -0
  9. package/dist/components.d.ts +1 -0
  10. package/dist/components.js +56 -55
  11. package/dist/dap-design-system.d.ts +3 -0
  12. package/dist/dds.js +320 -215
  13. package/dist/dds.js.map +1 -1
  14. package/dist/events/dds-change.d.ts +1 -59
  15. package/dist/events/dds-unzoom.d.ts +6 -0
  16. package/dist/events/dds-zoom.d.ts +6 -0
  17. package/dist/events/events.d.ts +2 -0
  18. package/dist/icons.js +1 -2
  19. package/dist/icons.js.map +1 -1
  20. package/dist/manifest/types/vue/index.d.ts +729 -635
  21. package/dist/manifest/vscode.html-custom-data.json +660 -539
  22. package/dist/manifest/web-types.json +1599 -1362
  23. package/dist/react/dap-ds-icon-zoom-in-line/index.d.ts +18 -0
  24. package/dist/react/dap-ds-icon-zoom-out-line/index.d.ts +18 -0
  25. package/dist/react/dap-ds-image-zoom/index.d.ts +42 -0
  26. package/dist/react/index.d.ts +24 -21
  27. package/dist/react-types.ts +26 -23
  28. package/dist/react.js +729 -705
  29. package/dist/react.js.map +1 -1
  30. package/package.json +1 -1
  31. package/dist/components-Dz0ahnZp.js.map +0 -1
package/dist/manifest/web-types.json CHANGED
@@ -6,359 +6,6 @@
6
6
  "contributions": {
7
7
  "html": {
8
8
  "elements": [
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.",
12
- "doc-url": "",
13
- "attributes": [
14
- {
15
- "name": "autoClose",
16
- "description": "Whether to close other accordions when one is opened.",
17
- "value": { "type": "string", "default": "'true'" }
18
- },
19
- {
20
- "name": "variant",
21
- "description": "The variant of the accordion",
22
- "value": {
23
- "type": "'default' | 'collapsed' | 'clean' | 'clean-collapsed'",
24
- "default": "'default'"
25
- }
26
- }
27
- ],
28
- "slots": [
29
- { "name": "", "description": "The content of the accordion group." }
30
- ],
31
- "events": [],
32
- "js": {
33
- "properties": [
34
- {
35
- "name": "autoClose",
36
- "description": "Whether to close other accordions when one is opened.",
37
- "type": "string"
38
- },
39
- {
40
- "name": "variant",
41
- "description": "The variant of the accordion",
42
- "type": "'default' | 'collapsed' | 'clean' | 'clean-collapsed'"
43
- }
44
- ],
45
- "events": []
46
- }
47
- },
48
- {
49
- "name": "dap-ds-avatar-group",
50
- "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.",
51
- "doc-url": "",
52
- "attributes": [
53
- {
54
- "name": "layout",
55
- "description": "Layout type for the avatar group",
56
- "value": { "type": "'stack' | 'grid'", "default": "'stack'" }
57
- },
58
- {
59
- "name": "max",
60
- "description": "Maximum number of avatars to show before showing overflow",
61
- "value": { "type": "number", "default": "3" }
62
- },
63
- {
64
- "name": "show-total",
65
- "description": "Whether to show the total count in overflow indicator",
66
- "value": { "type": "boolean", "default": "false" }
67
- },
68
- {
69
- "name": "interactive-overflow",
70
- "description": "Interactive overflow indicator",
71
- "value": { "type": "boolean", "default": "false" }
72
- },
73
- {
74
- "name": "label",
75
- "description": "Accessible label for the avatar group",
76
- "value": { "type": "string" }
77
- },
78
- {
79
- "name": "overflow-label",
80
- "description": "Accessible label for the overflow indicator",
81
- "value": { "type": "string" }
82
- }
83
- ],
84
- "slots": [
85
- {
86
- "name": "",
87
- "description": "The avatars to display in the group."
88
- }
89
- ],
90
- "events": [
91
- {
92
- "name": "dds-overflow-click",
93
- "description": "Fired when the overflow indicator is clicked."
94
- }
95
- ],
96
- "js": {
97
- "properties": [
98
- {
99
- "name": "layout",
100
- "description": "Layout type for the avatar group",
101
- "type": "'stack' | 'grid'"
102
- },
103
- {
104
- "name": "max",
105
- "description": "Maximum number of avatars to show before showing overflow",
106
- "type": "number"
107
- },
108
- {
109
- "name": "showTotal",
110
- "description": "Whether to show the total count in overflow indicator",
111
- "type": "boolean"
112
- },
113
- {
114
- "name": "interactiveOverflow",
115
- "description": "Interactive overflow indicator",
116
- "type": "boolean"
117
- },
118
- {
119
- "name": "label",
120
- "description": "Accessible label for the avatar group",
121
- "type": "string"
122
- },
123
- {
124
- "name": "overflowLabel",
125
- "description": "Accessible label for the overflow indicator",
126
- "type": "string"
127
- },
128
- {
129
- "name": "size",
130
- "description": "The size of avatars in the group. Default is `md`. See SizedMixin.",
131
- "type": "'xxs' | 'xs' | 'sm' | 'md' | 'lg'"
132
- },
133
- {
134
- "name": "sizeMap",
135
- "description": "Responsive size map (e.g. \"md:lg\"); see SizedMixin.",
136
- "type": "string"
137
- }
138
- ],
139
- "events": [
140
- {
141
- "name": "dds-overflow-click",
142
- "description": "Fired when the overflow indicator is clicked."
143
- }
144
- ]
145
- }
146
- },
147
- {
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.",
150
- "doc-url": "",
151
- "attributes": [
152
- {
153
- "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" }
156
- },
157
- {
158
- "name": "label",
159
- "description": "The label of the heading.",
160
- "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": [
179
- {
180
- "name": "type",
181
- "description": "The type of the badge",
182
- "value": {
183
- "type": "'neutral' | 'brand' | 'info' | 'positive' | 'warning' | 'negative'",
184
- "default": "'neutral'"
185
- }
186
- },
187
- {
188
- "name": "icon",
189
- "description": "The icon of the badge, this is a name of a built in icon",
190
- "value": { "type": "string | undefined" }
191
- },
192
- {
193
- "name": "live",
194
- "description": "Whether the badge represents dynamic content that should announce changes",
195
- "value": { "type": "boolean", "default": "false" }
196
- }
197
- ],
198
- "slots": [
199
- { "name": "", "description": "The content of the badge." },
200
- { "name": "icon", "description": "The icon of the badge." }
201
- ],
202
- "events": [],
203
- "js": {
204
- "properties": [
205
- {
206
- "name": "type",
207
- "description": "The type of the badge",
208
- "type": "'neutral' | 'brand' | 'info' | 'positive' | 'warning' | 'negative'"
209
- },
210
- {
211
- "name": "icon",
212
- "description": "The icon of the badge, this is a name of a built in icon",
213
- "type": "string | undefined"
214
- },
215
- {
216
- "name": "live",
217
- "description": "Whether the badge represents dynamic content that should announce changes",
218
- "type": "boolean"
219
- },
220
- {
221
- "name": "size",
222
- "description": "The size of the badge. Default is `sm`.",
223
- "type": "'sm' | 'lg'"
224
- },
225
- {
226
- "name": "sizeMap",
227
- "description": "Responsive size map (e.g. \"md:lg\").",
228
- "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",
249
- "description": "Whether the banner is closeable",
250
- "value": { "type": "boolean" }
251
- },
252
- {
253
- "name": "opened",
254
- "description": "State of the banner. If false banner is hidden",
255
- "value": { "type": "string", "default": "'true'" }
256
- },
257
- {
258
- "name": "closeButtonLabel",
259
- "description": "The aria-label for the close button",
260
- "value": { "type": "string", "default": "'close'" }
261
- },
262
- {
263
- "name": "icon",
264
- "description": "The icon of the banner, this is a name of a built icon icon",
265
- "value": { "type": "string" }
266
- }
267
- ],
268
- "slots": [
269
- { "name": "", "description": "The content of the banner." },
270
- { "name": "actions", "description": "Actions of banner" },
271
- { "name": "icon", "description": "The icon of the banner." }
272
- ],
273
- "events": [
274
- {
275
- "name": "dds-close",
276
- "type": "{ void }",
277
- "description": "Event fired when the banner is closed."
278
- }
279
- ],
280
- "js": {
281
- "properties": [
282
- {
283
- "name": "variant",
284
- "description": "The variant of the banner",
285
- "type": "'brand' | 'positive' | 'info' | 'warning' | 'negative'"
286
- },
287
- {
288
- "name": "closeable",
289
- "description": "Whether the banner is closeable",
290
- "type": "boolean"
291
- },
292
- {
293
- "name": "opened",
294
- "description": "State of the banner. If false banner is hidden",
295
- "type": "string"
296
- },
297
- {
298
- "name": "closeButtonLabel",
299
- "description": "The aria-label for the close button",
300
- "type": "string"
301
- },
302
- {
303
- "name": "icon",
304
- "description": "The icon of the banner, this is a name of a built icon icon",
305
- "type": "string"
306
- }
307
- ],
308
- "events": [
309
- {
310
- "name": "dds-close",
311
- "type": "{ void }",
312
- "description": "Event fired when the banner is closed."
313
- }
314
- ]
315
- }
316
- },
317
- {
318
- "name": "dap-ds-breadcrumb",
319
- "description": "A breadcrumb is a secondary navigation scheme that reveals the user's location in a website or Web application.\n---\n\n\n### **Slots:**\n - _default_ - The content of the breadcrumb.\n- **separator** - The separator between breadcrumb items. Default is '/'.\n\n### **CSS Properties:**\n - **--dds-breadcrumb-width** - The width of the breadcrumb container (default: 100%) _(default: undefined)_\n- **--dds-breadcrumb-overflow-x** - The horizontal overflow behavior of the breadcrumb (default: auto) _(default: undefined)_\n- **--dds-breadcrumb-transition** - The transition property for the breadcrumb (default: all 0.2s ease-in-out) _(default: undefined)_\n- **--dds-breadcrumb-list-display** - The display property of the breadcrumb list (default: flex) _(default: undefined)_\n- **--dds-breadcrumb-list-flex-wrap** - The flex-wrap property of the breadcrumb list (default: nowrap) _(default: undefined)_\n- **--dds-breadcrumb-list-align-items** - The align-items property of the breadcrumb list (default: center) _(default: undefined)_\n- **--dds-breadcrumb-list-min-width** - The minimum width of the breadcrumb list (default: max-content) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main breadcrumb container.\n- **separator** - The separator of the breadcrumb.",
320
- "doc-url": "",
321
- "attributes": [
322
- {
323
- "name": "variant",
324
- "value": { "type": "string", "default": "'normal'" }
325
- },
326
- {
327
- "name": "mobile",
328
- "description": "Mobile version of the breadcrumb",
329
- "value": { "type": "boolean", "default": "false" }
330
- },
331
- {
332
- "name": "aria-labelledby",
333
- "description": "The aria-labelledby of the breadcrumb",
334
- "value": { "type": "string | undefined" }
335
- }
336
- ],
337
- "slots": [
338
- { "name": "", "description": "The content of the breadcrumb." },
339
- {
340
- "name": "separator",
341
- "description": "The separator between breadcrumb items. Default is '/'."
342
- }
343
- ],
344
- "events": [],
345
- "js": {
346
- "properties": [
347
- { "name": "variant", "type": "string" },
348
- {
349
- "name": "mobile",
350
- "description": "Mobile version of the breadcrumb",
351
- "type": "boolean"
352
- },
353
- {
354
- "name": "ariaLabelledBy",
355
- "description": "The aria-labelledby of the breadcrumb",
356
- "type": "string | undefined"
357
- }
358
- ],
359
- "events": []
360
- }
361
- },
362
9
  {
363
10
  "name": "dap-ds-accordion",
364
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.",
@@ -466,6 +113,72 @@
466
113
  ]
467
114
  }
468
115
  },
116
+ {
117
+ "name": "dap-ds-accordion-group",
118
+ "description": "An accordion group is a collection of accordion components.\n---\n\n\n### **Slots:**\n - _default_ - The content of the accordion group.\n\n### **CSS Properties:**\n - **--dds-accordion-group-spacing** - Controls the gap between accordion items (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-accordion-group-border-color** - Controls the border color (default: var(--dds-border-neutral-subtle)) _(default: undefined)_\n- **--dds-accordion-group-border-width** - Controls the border width (default: var(--dds-border-width-base)) _(default: undefined)_\n- **--dds-accordion-group-border-radius** - Controls the border radius (default: var(--dds-radius-base)) _(default: undefined)_\n- **--dds-accordion-group-background** - Controls the background color (default: transparent) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main accordion group container.",
119
+ "doc-url": "",
120
+ "attributes": [
121
+ {
122
+ "name": "autoClose",
123
+ "description": "Whether to close other accordions when one is opened.",
124
+ "value": { "type": "string", "default": "'true'" }
125
+ },
126
+ {
127
+ "name": "variant",
128
+ "description": "The variant of the accordion",
129
+ "value": {
130
+ "type": "'default' | 'collapsed' | 'clean' | 'clean-collapsed'",
131
+ "default": "'default'"
132
+ }
133
+ }
134
+ ],
135
+ "slots": [
136
+ { "name": "", "description": "The content of the accordion group." }
137
+ ],
138
+ "events": [],
139
+ "js": {
140
+ "properties": [
141
+ {
142
+ "name": "autoClose",
143
+ "description": "Whether to close other accordions when one is opened.",
144
+ "type": "string"
145
+ },
146
+ {
147
+ "name": "variant",
148
+ "description": "The variant of the accordion",
149
+ "type": "'default' | 'collapsed' | 'clean' | 'clean-collapsed'"
150
+ }
151
+ ],
152
+ "events": []
153
+ }
154
+ },
155
+ {
156
+ "name": "dap-ds-anchor-heading",
157
+ "description": "Anchor heading is a heading with an anchor link.\n---\n\n\n### **CSS Properties:**\n - **--dds-anchor-link-color** - The color of the anchor link (default: var(--dds-color-primary)) _(default: undefined)_\n- **--dds-anchor-link-opacity** - The opacity of the anchor link when not hovered (default: 0) _(default: undefined)_\n- **--dds-anchor-link-hover-opacity** - The opacity of the anchor link when hovered (default: 1) _(default: undefined)_\n- **--dds-anchor-link-transition** - The transition property for the anchor link opacity (default: opacity 0.2s ease-in-out) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main anchor heading container.\n- **link** - The link of the anchor heading. dap-ds-link element.\n- **link-base** - The base of the link part.\n- **text** - The text of the anchor heading.",
158
+ "doc-url": "",
159
+ "attributes": [
160
+ {
161
+ "name": "variant",
162
+ "description": "The variant of the heading. Default is `h2`. Can be `h1`, `h2`, `h3`, `h4`, `h5`, or `h6`.",
163
+ "value": { "type": "HeadingVariant" }
164
+ },
165
+ {
166
+ "name": "label",
167
+ "description": "The label of the heading.",
168
+ "value": { "type": "string" }
169
+ }
170
+ ],
171
+ "events": [],
172
+ "js": {
173
+ "properties": [
174
+ { "name": "variant", "type": "HeadingVariant" },
175
+ { "name": "label", "type": "string" },
176
+ { "name": "elementId" },
177
+ { "name": "anchorTitle" }
178
+ ],
179
+ "events": []
180
+ }
181
+ },
469
182
  {
470
183
  "name": "dap-ds-avatar",
471
184
  "description": "Avatar component can be used to display user profile images, initials, or icons.\n---\n\n\n### **Events:**\n - **dds-load** - Fired when the image loads successfully.\n- **dds-error** - Fired when the image fails to load.\n\n### **Slots:**\n - **icon** - The icon to display when variant is 'icon'.\n- **fallback** - Custom fallback content when image fails to load.\n\n### **CSS Properties:**\n - **--dds-avatar-border-radius** - The border radius of the avatar (default: 50%) _(default: undefined)_\n- **--dds-avatar-background-color** - The background color of the avatar (default: var(--dds-neutral-200)) _(default: undefined)_\n- **--dds-avatar-border-width** - The border width of the avatar (default: 0) _(default: undefined)_\n- **--dds-avatar-border-color** - The color of the avatar's border (default: transparent) _(default: undefined)_\n- **--dds-avatar-border-style** - The style of the avatar's border (default: solid) _(default: undefined)_\n- **--dds-avatar-transition** - The transition property for the avatar (default: all 0.2s ease-in-out) _(default: undefined)_\n- **--dds-avatar-text-color** - The text color for initials (default: var(--dds-text-neutral-strong)) _(default: undefined)_\n- **--dds-avatar-font-weight** - The font weight for initials (default: var(--dds-font-weight-bold)) _(default: undefined)_\n- **--dds-avatar-lg-size** - Size for large avatars (default: var(--dds-avatar-size-lg)) _(default: undefined)_\n- **--dds-avatar-md-size** - Size for medium avatars (default: var(--dds-avatar-size-md)) _(default: undefined)_\n- **--dds-avatar-sm-size** - Size for small avatars (default: var(--dds-avatar-size-sm)) _(default: undefined)_\n- **--dds-avatar-xs-size** - Size for extra small avatars (default: var(--dds-avatar-size-xs)) _(default: undefined)_\n- **--dds-avatar-xxs-size** - Size for extra extra small avatars (default: var(--dds-avatar-size-xxs)) _(default: undefined)_\n- **--dds-avatar-font-size-lg** - Font size for large avatars (default: var(--dds-font-2xl)) _(default: undefined)_\n- **--dds-avatar-font-size-md** - Font size for medium avatars (default: var(--dds-font-lg)) _(default: undefined)_\n- **--dds-avatar-font-size-sm** - Font size for small avatars (default: var(--dds-font-base)) _(default: undefined)_\n- **--dds-avatar-font-size-xs** - Font size for extra small avatars (default: var(--dds-font-sm)) _(default: undefined)_\n- **--dds-avatar-font-size-xxs** - Font size for extra extra small avatars (default: var(--dds-font-xs)) _(default: undefined)_\n- **--dds-avatar-hover-transform** - Transform applied on hover for interactive avatars (default: scale(1.05)) _(default: undefined)_\n- **--dds-avatar-active-transform** - Transform applied when active for interactive avatars (default: scale(0.95)) _(default: undefined)_\n- **--dds-avatar-focus-ring** - Focus ring style for interactive avatars (default: 0 0 0 2px var(--dds-focus-outer-ring)) _(default: undefined)_\n- **--dds-avatar-loading-background** - Background color when loading (default: var(--dds-neutral-100)) _(default: undefined)_\n- **--dds-avatar-error-background** - Background color when image fails to load (default: var(--dds-negative-100)) _(default: undefined)_\n- **--dds-avatar-error-color** - Text color when image fails to load (default: var(--dds-negative-600)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main avatar container.\n- **img** - The avatar image.\n- **initials** - The initials container.\n- **icon** - The icon container.\n- **fallback** - The fallback content container.\n- **loading** - The loading indicator.",
@@ -518,364 +231,472 @@
518
231
  "value": { "type": "boolean", "default": "false" }
519
232
  },
520
233
  {
521
- "name": "width",
522
- "description": "The width of the avatar. This will override the size",
523
- "value": { "type": "number" }
234
+ "name": "width",
235
+ "description": "The width of the avatar. This will override the size",
236
+ "value": { "type": "number" }
237
+ },
238
+ {
239
+ "name": "height",
240
+ "description": "The height of the avatar. This will override the size",
241
+ "value": { "type": "number" }
242
+ }
243
+ ],
244
+ "slots": [
245
+ {
246
+ "name": "icon",
247
+ "description": "The icon to display when variant is 'icon'."
248
+ },
249
+ {
250
+ "name": "fallback",
251
+ "description": "Custom fallback content when image fails to load."
252
+ }
253
+ ],
254
+ "events": [
255
+ {
256
+ "name": "dds-load",
257
+ "description": "Fired when the image loads successfully."
258
+ },
259
+ {
260
+ "name": "dds-error",
261
+ "description": "Fired when the image fails to load."
262
+ }
263
+ ],
264
+ "js": {
265
+ "properties": [
266
+ {
267
+ "name": "shape",
268
+ "description": "The shape of the avatar",
269
+ "type": "'circle' | 'rounded' | 'square'"
270
+ },
271
+ {
272
+ "name": "variant",
273
+ "description": "The variant type of the avatar",
274
+ "type": "'image' | 'initials' | 'icon'"
275
+ },
276
+ {
277
+ "name": "src",
278
+ "description": "The source of the avatar image",
279
+ "type": "string"
280
+ },
281
+ {
282
+ "name": "alt",
283
+ "description": "The alt text of the avatar",
284
+ "type": "string"
285
+ },
286
+ {
287
+ "name": "initials",
288
+ "description": "The initials to display when variant is 'initials'",
289
+ "type": "string"
290
+ },
291
+ {
292
+ "name": "label",
293
+ "description": "Accessible label for the avatar",
294
+ "type": "string"
295
+ },
296
+ {
297
+ "name": "loading",
298
+ "description": "Loading state indicator",
299
+ "type": "boolean"
300
+ },
301
+ {
302
+ "name": "interactive",
303
+ "description": "Whether the avatar is interactive (clickable)",
304
+ "type": "boolean"
305
+ },
306
+ {
307
+ "name": "width",
308
+ "description": "The width of the avatar. This will override the size",
309
+ "type": "number"
310
+ },
311
+ {
312
+ "name": "height",
313
+ "description": "The height of the avatar. This will override the size",
314
+ "type": "number"
315
+ },
316
+ {
317
+ "name": "size",
318
+ "description": "The size of the avatar. Default is `md`.",
319
+ "type": "'xxs' | 'xs' | 'sm' | 'md' | 'lg'"
320
+ },
321
+ {
322
+ "name": "sizeMap",
323
+ "description": "Responsive size map (e.g. \"md:lg\").",
324
+ "type": "string"
325
+ }
326
+ ],
327
+ "events": [
328
+ {
329
+ "name": "dds-load",
330
+ "description": "Fired when the image loads successfully."
331
+ },
332
+ {
333
+ "name": "dds-error",
334
+ "description": "Fired when the image fails to load."
335
+ }
336
+ ]
337
+ }
338
+ },
339
+ {
340
+ "name": "dap-ds-badge",
341
+ "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.",
342
+ "doc-url": "",
343
+ "attributes": [
344
+ {
345
+ "name": "type",
346
+ "description": "The type of the badge",
347
+ "value": {
348
+ "type": "'neutral' | 'brand' | 'info' | 'positive' | 'warning' | 'negative'",
349
+ "default": "'neutral'"
350
+ }
351
+ },
352
+ {
353
+ "name": "icon",
354
+ "description": "The icon of the badge, this is a name of a built in icon",
355
+ "value": { "type": "string | undefined" }
356
+ },
357
+ {
358
+ "name": "live",
359
+ "description": "Whether the badge represents dynamic content that should announce changes",
360
+ "value": { "type": "boolean", "default": "false" }
361
+ }
362
+ ],
363
+ "slots": [
364
+ { "name": "", "description": "The content of the badge." },
365
+ { "name": "icon", "description": "The icon of the badge." }
366
+ ],
367
+ "events": [],
368
+ "js": {
369
+ "properties": [
370
+ {
371
+ "name": "type",
372
+ "description": "The type of the badge",
373
+ "type": "'neutral' | 'brand' | 'info' | 'positive' | 'warning' | 'negative'"
374
+ },
375
+ {
376
+ "name": "icon",
377
+ "description": "The icon of the badge, this is a name of a built in icon",
378
+ "type": "string | undefined"
379
+ },
380
+ {
381
+ "name": "live",
382
+ "description": "Whether the badge represents dynamic content that should announce changes",
383
+ "type": "boolean"
384
+ },
385
+ {
386
+ "name": "size",
387
+ "description": "The size of the badge. Default is `sm`.",
388
+ "type": "'sm' | 'lg'"
389
+ },
390
+ {
391
+ "name": "sizeMap",
392
+ "description": "Responsive size map (e.g. \"md:lg\").",
393
+ "type": "string"
394
+ }
395
+ ],
396
+ "events": []
397
+ }
398
+ },
399
+ {
400
+ "name": "dap-ds-avatar-group",
401
+ "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.",
402
+ "doc-url": "",
403
+ "attributes": [
404
+ {
405
+ "name": "layout",
406
+ "description": "Layout type for the avatar group",
407
+ "value": { "type": "'stack' | 'grid'", "default": "'stack'" }
408
+ },
409
+ {
410
+ "name": "max",
411
+ "description": "Maximum number of avatars to show before showing overflow",
412
+ "value": { "type": "number", "default": "3" }
413
+ },
414
+ {
415
+ "name": "show-total",
416
+ "description": "Whether to show the total count in overflow indicator",
417
+ "value": { "type": "boolean", "default": "false" }
418
+ },
419
+ {
420
+ "name": "interactive-overflow",
421
+ "description": "Interactive overflow indicator",
422
+ "value": { "type": "boolean", "default": "false" }
423
+ },
424
+ {
425
+ "name": "label",
426
+ "description": "Accessible label for the avatar group",
427
+ "value": { "type": "string" }
524
428
  },
525
429
  {
526
- "name": "height",
527
- "description": "The height of the avatar. This will override the size",
528
- "value": { "type": "number" }
430
+ "name": "overflow-label",
431
+ "description": "Accessible label for the overflow indicator",
432
+ "value": { "type": "string" }
529
433
  }
530
434
  ],
531
435
  "slots": [
532
436
  {
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."
437
+ "name": "",
438
+ "description": "The avatars to display in the group."
539
439
  }
540
440
  ],
541
441
  "events": [
542
442
  {
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."
443
+ "name": "dds-overflow-click",
444
+ "description": "Fired when the overflow indicator is clicked."
549
445
  }
550
446
  ],
551
447
  "js": {
552
448
  "properties": [
553
449
  {
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"
450
+ "name": "layout",
451
+ "description": "Layout type for the avatar group",
452
+ "type": "'stack' | 'grid'"
577
453
  },
578
454
  {
579
- "name": "label",
580
- "description": "Accessible label for the avatar",
581
- "type": "string"
455
+ "name": "max",
456
+ "description": "Maximum number of avatars to show before showing overflow",
457
+ "type": "number"
582
458
  },
583
459
  {
584
- "name": "loading",
585
- "description": "Loading state indicator",
460
+ "name": "showTotal",
461
+ "description": "Whether to show the total count in overflow indicator",
586
462
  "type": "boolean"
587
463
  },
588
464
  {
589
- "name": "interactive",
590
- "description": "Whether the avatar is interactive (clickable)",
465
+ "name": "interactiveOverflow",
466
+ "description": "Interactive overflow indicator",
591
467
  "type": "boolean"
592
468
  },
593
469
  {
594
- "name": "width",
595
- "description": "The width of the avatar. This will override the size",
596
- "type": "number"
470
+ "name": "label",
471
+ "description": "Accessible label for the avatar group",
472
+ "type": "string"
597
473
  },
598
474
  {
599
- "name": "height",
600
- "description": "The height of the avatar. This will override the size",
601
- "type": "number"
475
+ "name": "overflowLabel",
476
+ "description": "Accessible label for the overflow indicator",
477
+ "type": "string"
602
478
  },
603
479
  {
604
480
  "name": "size",
605
- "description": "The size of the avatar. Default is `md`.",
481
+ "description": "The size of avatars in the group. Default is `md`. See SizedMixin.",
606
482
  "type": "'xxs' | 'xs' | 'sm' | 'md' | 'lg'"
607
483
  },
608
484
  {
609
485
  "name": "sizeMap",
610
- "description": "Responsive size map (e.g. \"md:lg\").",
486
+ "description": "Responsive size map (e.g. \"md:lg\"); see SizedMixin.",
611
487
  "type": "string"
612
488
  }
613
489
  ],
614
490
  "events": [
615
491
  {
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."
492
+ "name": "dds-overflow-click",
493
+ "description": "Fired when the overflow indicator is clicked."
622
494
  }
623
495
  ]
624
496
  }
625
497
  },
626
498
  {
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.",
499
+ "name": "dap-ds-banner",
500
+ "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.",
629
501
  "doc-url": "",
630
502
  "attributes": [
631
503
  {
632
- "name": "href",
633
- "description": "The URL of the breadcrumb item.",
634
- "value": { "type": "string | undefined" }
504
+ "name": "variant",
505
+ "description": "The variant of the banner",
506
+ "value": {
507
+ "type": "'brand' | 'positive' | 'info' | 'warning' | 'negative'",
508
+ "default": "'brand'"
509
+ }
635
510
  },
636
511
  {
637
- "name": "target",
638
- "description": "The target of the breadcrumb item.",
639
- "value": { "type": "'_blank' | '_self' | '_parent' | '_top'" }
512
+ "name": "closeable",
513
+ "description": "Whether the banner is closeable",
514
+ "value": { "type": "boolean" }
640
515
  },
641
516
  {
642
- "name": "rel",
643
- "description": "The rel of the breadcrumb item link.",
644
- "value": { "type": "string", "default": "'noreferrer noopener'" }
517
+ "name": "opened",
518
+ "description": "State of the banner. If false banner is hidden",
519
+ "value": { "type": "string", "default": "'true'" }
645
520
  },
646
521
  {
647
- "name": "disabled",
648
- "description": "Whether the breadcrumb item is disabled.",
649
- "value": { "type": "boolean", "default": "false" }
522
+ "name": "closeButtonLabel",
523
+ "description": "The aria-label for the close button",
524
+ "value": { "type": "string", "default": "'close'" }
650
525
  },
651
526
  {
652
- "name": "variant",
653
- "description": "The variant of the breadcrumb item.",
654
- "value": {
655
- "type": "'normal' | 'inverted'",
656
- "default": "'normal'"
657
- }
527
+ "name": "icon",
528
+ "description": "The icon of the banner, this is a name of a built icon icon",
529
+ "value": { "type": "string" }
658
530
  }
659
531
  ],
660
532
  "slots": [
533
+ { "name": "", "description": "The content of the banner." },
534
+ { "name": "actions", "description": "Actions of banner" },
535
+ { "name": "icon", "description": "The icon of the banner." }
536
+ ],
537
+ "events": [
661
538
  {
662
- "name": "",
663
- "description": "The content of the breadcrumb item."
664
- },
665
- {
666
- "name": "separator",
667
- "description": "The separator between breadcrumb items. Default is an arrow-right-s-line icon."
539
+ "name": "dds-close",
540
+ "type": "{ void }",
541
+ "description": "Event fired when the banner is closed."
668
542
  }
669
543
  ],
670
- "events": [],
671
544
  "js": {
672
545
  "properties": [
673
546
  {
674
- "name": "href",
675
- "description": "The URL of the breadcrumb item.",
676
- "type": "string | undefined"
547
+ "name": "variant",
548
+ "description": "The variant of the banner",
549
+ "type": "'brand' | 'positive' | 'info' | 'warning' | 'negative'"
677
550
  },
678
551
  {
679
- "name": "target",
680
- "description": "The target of the breadcrumb item.",
681
- "type": "'_blank' | '_self' | '_parent' | '_top'"
552
+ "name": "closeable",
553
+ "description": "Whether the banner is closeable",
554
+ "type": "boolean"
682
555
  },
683
556
  {
684
- "name": "rel",
685
- "description": "The rel of the breadcrumb item link.",
557
+ "name": "opened",
558
+ "description": "State of the banner. If false banner is hidden",
686
559
  "type": "string"
687
560
  },
688
561
  {
689
- "name": "disabled",
690
- "description": "Whether the breadcrumb item is disabled.",
691
- "type": "boolean"
562
+ "name": "closeButtonLabel",
563
+ "description": "The aria-label for the close button",
564
+ "type": "string"
692
565
  },
693
566
  {
694
- "name": "variant",
695
- "description": "The variant of the breadcrumb item.",
696
- "type": "'normal' | 'inverted'"
567
+ "name": "icon",
568
+ "description": "The icon of the banner, this is a name of a built icon icon",
569
+ "type": "string"
697
570
  }
698
571
  ],
699
- "events": []
572
+ "events": [
573
+ {
574
+ "name": "dds-close",
575
+ "type": "{ void }",
576
+ "description": "Event fired when the banner is closed."
577
+ }
578
+ ]
700
579
  }
701
580
  },
702
581
  {
703
- "name": "dap-ds-button",
704
- "description": "A button is a clickable element that can be used to trigger an action, submit forms, or navigate to other pages.\n---\n\n\n### **Events:**\n - **dds-loading-timeout** - Emitted when the loading timeout is reached\n\n### **Slots:**\n - _default_ - The content of the button. Can contain text, icons, or other elements.\n\n### **CSS Properties:**\n - **--dds-button-padding-x** - Horizontal padding of the button (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-button-padding-y** - Vertical padding of the button (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-button-border-radius** - Border radius of the button (default: var(--dds-radius-rounded)) _(default: undefined)_\n- **--dds-button-font-weight** - Font weight of the button (default: 700) _(default: undefined)_\n- **--dds-button-line-height** - Line height of the button (default: var(--dds-font-line-height-large)) _(default: undefined)_\n- **--dds-button-transition** - Transition property of the button (default: all 0.2s ease-in-out) _(default: undefined)_\n- **--dds-button-disabled-opacity** - Opacity of disabled button (default: 0.5) _(default: undefined)_\n- **--dds-button-size-lg** - Size of large button (default: var(--dds-spacing-1200)) _(default: undefined)_\n- **--dds-button-size-md** - Size of medium button (default: var(--dds-spacing-1000)) _(default: undefined)_\n- **--dds-button-size-sm** - Size of small button (default: var(--dds-spacing-800)) _(default: undefined)_\n- **--dds-button-size-xs** - Size of extra small button (default: var(--dds-spacing-600)) _(default: undefined)_\n- **--dds-button-circle-lg** - Size of large circle button (default: var(--dds-spacing-1200)) _(default: undefined)_\n- **--dds-button-circle-md** - Size of medium circle button (default: var(--dds-spacing-1000)) _(default: undefined)_\n- **--dds-button-circle-sm** - Size of small circle button (default: var(--dds-spacing-800)) _(default: undefined)_\n- **--dds-button-circle-xs** - Size of extra small circle button (default: var(--dds-spacing-600)) Primary button properties: _(default: undefined)_\n- **--dds-button-primary-color-bg** - Background color of primary button (default: var(--dds-button-primary-background-enabled)) _(default: undefined)_\n- **--dds-button-primary-color-bg-hover** - Background color of primary button on hover (default: var(--dds-button-primary-background-hover)) _(default: undefined)_\n- **--dds-button-primary-color-bg-active** - Background color of primary button when active (default: var(--dds-button-primary-background-pressed)) _(default: undefined)_\n- **--dds-button-primary-color-bg-disabled** - Background color of disabled primary button (default: var(--dds-button-primary-background-disabled)) _(default: undefined)_\n- **--dds-button-primary-color-text** - Text color of primary button (default: var(--dds-button-primary-text-enabled)) _(default: undefined)_\n- **--dds-button-primary-color-text-disabled** - Text color of disabled primary button (default: var(--dds-button-primary-text-disabled)) Primary inverted button properties: _(default: undefined)_\n- **--dds-button-primary-inverted-color-bg** - Background color of primary inverted button (default: var(--dds-button-primary-background-inverted-enabled)) _(default: undefined)_\n- **--dds-button-primary-inverted-color-bg-hover** - Background color of primary inverted button on hover (default: var(--dds-button-primary-background-inverted-hover)) _(default: undefined)_\n- **--dds-button-primary-inverted-color-bg-active** - Background color of primary inverted button when active (default: var(--dds-button-primary-background-inverted-pressed)) _(default: undefined)_\n- **--dds-button-primary-inverted-color-bg-disabled** - Background color of disabled primary inverted button (default: var(--dds-button-primary-background-inverted-disabled)) _(default: undefined)_\n- **--dds-button-primary-inverted-color-text** - Text color of primary inverted button (default: var(--dds-button-primary-text-inverted)) _(default: undefined)_\n- **--dds-button-primary-inverted-color-text-disabled** - Text color of disabled primary inverted button (default: var(--dds-button-primary-text-inverted-disabled)) Outline button properties: _(default: undefined)_\n- **--dds-button-outline-color-border** - Border color of outline button (default: var(--dds-button-outline-border-enabled)) _(default: undefined)_\n- **--dds-button-outline-color-border-hover** - Border color of outline button on hover (default: var(--dds-button-outline-border-hover)) _(default: undefined)_\n- **--dds-button-outline-color-border-active** - Border color of outline button when active (default: var(--dds-button-outline-border-pressed)) _(default: undefined)_\n- **--dds-button-outline-color-border-disabled** - Border color of disabled outline button (default: var(--dds-button-outline-border-disabled)) _(default: undefined)_\n- **--dds-button-outline-color-text** - Text color of outline button (default: var(--dds-button-outline-text-enabled)) _(default: undefined)_\n- **--dds-button-outline-color-text-hover** - Text color of outline button on hover (default: var(--dds-button-outline-text-hover)) _(default: undefined)_\n- **--dds-button-outline-color-text-active** - Text color of outline button when active (default: var(--dds-button-outline-text-pressed)) _(default: undefined)_\n- **--dds-button-outline-color-text-disabled** - Text color of disabled outline button (default: var(--dds-button-outline-text-disabled)) Outline inverted button properties: _(default: undefined)_\n- **--dds-button-outline-inverted-color-border** - Border color of outline inverted button (default: var(--dds-button-outline-border-inverted-enabled)) _(default: undefined)_\n- **--dds-button-outline-inverted-color-border-hover** - Border color of outline inverted button on hover (default: var(--dds-button-outline-border-inverted-hover)) _(default: undefined)_\n- **--dds-button-outline-inverted-color-border-active** - Border color of outline inverted button when active (default: var(--dds-button-outline-border-inverted-pressed)) _(default: undefined)_\n- **--dds-button-outline-inverted-color-border-disabled** - Border color of disabled outline inverted button (default: var(--dds-button-outline-border-inverted-disabled)) _(default: undefined)_\n- **--dds-button-outline-inverted-color-text** - Text color of outline inverted button (default: var(--dds-button-outline-text-inverted-enabled)) _(default: undefined)_\n- **--dds-button-outline-inverted-color-text-hover** - Text color of outline inverted button on hover (default: var(--dds-button-outline-text-inverted-hover)) _(default: undefined)_\n- **--dds-button-outline-inverted-color-text-active** - Text color of outline inverted button when active (default: var(--dds-button-outline-text-inverted-pressed)) _(default: undefined)_\n- **--dds-button-outline-inverted-color-text-disabled** - Text color of disabled outline inverted button (default: var(--dds-button-outline-text-inverted-disabled)) Subtle button properties: _(default: undefined)_\n- **--dds-button-subtle-color-bg** - Background color of subtle button (default: var(--dds-button-subtle-background-enabled)) _(default: undefined)_\n- **--dds-button-subtle-color-bg-hover** - Background color of subtle button on hover (default: var(--dds-button-subtle-background-hover)) _(default: undefined)_\n- **--dds-button-subtle-color-bg-active** - Background color of subtle button when active (default: var(--dds-button-subtle-background-pressed)) _(default: undefined)_\n- **--dds-button-subtle-color-bg-disabled** - Background color of disabled subtle button (default: var(--dds-button-subtle-background-disabled)) _(default: undefined)_\n- **--dds-button-subtle-color-border** - Border color of subtle button (default: var(--dds-button-subtle-border-enabled)) _(default: undefined)_\n- **--dds-button-subtle-color-border-hover** - Border color of subtle button on hover (default: var(--dds-button-subtle-border-hover)) _(default: undefined)_\n- **--dds-button-subtle-color-border-active** - Border color of subtle button when active (default: var(--dds-button-subtle-border-pressed)) _(default: undefined)_\n- **--dds-button-subtle-color-border-disabled** - Border color of disabled subtle button (default: var(--dds-button-subtle-border-disabled)) _(default: undefined)_\n- **--dds-button-subtle-color-text** - Text color of subtle button (default: var(--dds-button-subtle-text-enabled)) _(default: undefined)_\n- **--dds-button-subtle-color-text-hover** - Text color of subtle button on hover (default: var(--dds-button-subtle-text-hover)) _(default: undefined)_\n- **--dds-button-subtle-color-text-active** - Text color of subtle button when active (default: var(--dds-button-subtle-text-pressed)) _(default: undefined)_\n- **--dds-button-subtle-color-text-disabled** - Text color of disabled subtle button (default: var(--dds-button-subtle-text-disabled)) Clean button properties: _(default: undefined)_\n- **--dds-button-clean-color-text** - Text color of clean button (default: var(--dds-text-link-base)) _(default: undefined)_\n- **--dds-button-clean-color-text-hover** - Text color of clean button on hover (default: var(--dds-text-link-hover)) _(default: undefined)_\n- **--dds-button-clean-color-text-active** - Text color of clean button when active (default: var(--dds-text-link-pressed)) _(default: undefined)_\n- **--dds-button-clean-color-text-disabled** - Text color of disabled clean button (default: var(--dds-text-neutral-disabled)) Clean inverted button properties: _(default: undefined)_\n- **--dds-button-clean-inverted-color-text** - Text color of clean inverted button (default: var(--dds-button-primary-text-inverted)) _(default: undefined)_\n- **--dds-button-clean-inverted-color-text-hover** - Text color of clean inverted button on hover (default: var(--dds-button-primary-text-inverted)) _(default: undefined)_\n- **--dds-button-clean-inverted-color-text-active** - Text color of clean inverted button when active (default: var(--dds-button-primary-text-inverted)) _(default: undefined)_\n- **--dds-button-clean-inverted-color-text-disabled** - Text color of disabled clean inverted button (default: var(--dds-text-neutral-disabled)) Danger button properties: _(default: undefined)_\n- **--dds-button-danger-color-bg** - Background color of danger button (default: var(--dds-button-primary-background-destructive-enabled)) _(default: undefined)_\n- **--dds-button-danger-color-bg-hover** - Background color of danger button on hover (default: var(--dds-button-primary-background-destructive-hover)) _(default: undefined)_\n- **--dds-button-danger-color-bg-active** - Background color of danger button when active (default: var(--dds-button-primary-background-destructive-pressed)) _(default: undefined)_\n- **--dds-button-danger-color-text** - Text color of danger button (default: var(--dds-button-primary-text-enabled)) _(default: undefined)_\n- **--dds-button-danger-outline-color-border** - Border color of danger outline button (default: var(--dds-button-outline-border-destructive-enabled)) _(default: undefined)_\n- **--dds-button-danger-outline-color-border-hover** - Border color of danger outline button on hover (default: var(--dds-button-outline-border-destructive-hover)) _(default: undefined)_\n- **--dds-button-danger-outline-color-border-active** - Border color of danger outline button when active (default: var(--dds-button-outline-border-destructive-pressed)) _(default: undefined)_\n- **--dds-button-danger-outline-color-text** - Text color of danger outline button (default: var(--dds-button-outline-text-destructive-enabled)) _(default: undefined)_\n- **--dds-button-danger-outline-color-text-hover** - Text color of danger outline button on hover (default: var(--dds-button-outline-text-destructive-hover)) _(default: undefined)_\n- **--dds-button-danger-outline-color-text-active** - Text color of danger outline button when active (default: var(--dds-button-outline-text-destructive-pressed)) _(default: undefined)_\n- **--dds-button-danger-subtle-color-bg** - Background color of danger subtle button (default: var(--dds-button-subtle-background-destructive-enabled)) _(default: undefined)_\n- **--dds-button-danger-subtle-color-bg-hover** - Background color of danger subtle button on hover (default: var(--dds-button-subtle-background-destructive-hover)) _(default: undefined)_\n- **--dds-button-danger-subtle-color-bg-active** - Background color of danger subtle button when active (default: var(--dds-button-subtle-background-destructive-pressed)) _(default: undefined)_\n- **--dds-button-danger-subtle-color-text** - Text color of danger subtle button (default: var(--dds-button-subtle-text-destructive-enabled)) _(default: undefined)_\n- **--dds-button-danger-subtle-color-text-hover** - Text color of danger subtle button on hover (default: var(--dds-button-subtle-text-destructive-hover)) _(default: undefined)_\n- **--dds-button-danger-subtle-color-text-active** - Text color of danger subtle button when active (default: var(--dds-button-subtle-text-destructive-pressed)) _(default: undefined)_\n- **--dds-button-danger-clean-color-text** - Text color of danger clean button (default: var(--dds-text-negative-subtle)) _(default: undefined)_\n- **--dds-button-danger-clean-color-text-hover** - Text color of danger clean button on hover (default: var(--dds-text-negative-base)) _(default: undefined)_\n- **--dds-button-danger-clean-color-text-active** - Text color of danger clean button when active (default: var(--dds-text-negative-strong)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main button container.\n- **high-contrast** - The high contrast part of the button.\n- **content** - The content wrapper inside the button.",
582
+ "name": "dap-ds-breadcrumb",
583
+ "description": "A breadcrumb is a secondary navigation scheme that reveals the user's location in a website or Web application.\n---\n\n\n### **Slots:**\n - _default_ - The content of the breadcrumb.\n- **separator** - The separator between breadcrumb items. Default is '/'.\n\n### **CSS Properties:**\n - **--dds-breadcrumb-width** - The width of the breadcrumb container (default: 100%) _(default: undefined)_\n- **--dds-breadcrumb-overflow-x** - The horizontal overflow behavior of the breadcrumb (default: auto) _(default: undefined)_\n- **--dds-breadcrumb-transition** - The transition property for the breadcrumb (default: all 0.2s ease-in-out) _(default: undefined)_\n- **--dds-breadcrumb-list-display** - The display property of the breadcrumb list (default: flex) _(default: undefined)_\n- **--dds-breadcrumb-list-flex-wrap** - The flex-wrap property of the breadcrumb list (default: nowrap) _(default: undefined)_\n- **--dds-breadcrumb-list-align-items** - The align-items property of the breadcrumb list (default: center) _(default: undefined)_\n- **--dds-breadcrumb-list-min-width** - The minimum width of the breadcrumb list (default: max-content) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main breadcrumb container.\n- **separator** - The separator of the breadcrumb.",
705
584
  "doc-url": "",
706
585
  "attributes": [
707
586
  {
708
587
  "name": "variant",
709
- "description": "The visual style variant of the button",
710
- "value": {
711
- "type": "'primary' | 'outline' | 'subtle' | 'subtle-neutral' | 'subtle-quiet' | 'subtle-quiet-inverted' | 'clean' | 'primary-inverted' | 'outline-inverted' | 'subtle-inverted' | 'clean-inverted' | 'subtle-menu' | 'subtle-menu-item'",
712
- "default": "'primary'"
713
- }
714
- },
715
- {
716
- "name": "size",
717
- "description": "The size of the button affecting padding and font size",
718
- "value": {
719
- "type": "'lg' | 'md' | 'sm' | 'xs'",
720
- "default": "'md'"
721
- }
722
- },
723
- {
724
- "name": "loading",
725
- "description": "Whether the button is in loading state, showing a spinner and disabling interaction",
726
- "value": { "type": "boolean", "default": "false" }
588
+ "value": { "type": "string", "default": "'normal'" }
727
589
  },
728
590
  {
729
- "name": "danger",
730
- "description": "Whether the button represents a destructive action (applies danger styling)",
591
+ "name": "mobile",
592
+ "description": "Mobile version of the breadcrumb",
731
593
  "value": { "type": "boolean", "default": "false" }
732
594
  },
733
595
  {
734
- "name": "shape",
735
- "description": "The shape of the button - use 'circle' for icon-only buttons",
736
- "value": { "type": "'button' | 'circle'", "default": "'button'" }
737
- },
596
+ "name": "aria-labelledby",
597
+ "description": "The aria-labelledby of the breadcrumb",
598
+ "value": { "type": "string | undefined" }
599
+ }
600
+ ],
601
+ "slots": [
602
+ { "name": "", "description": "The content of the breadcrumb." },
738
603
  {
739
- "name": "htmlType",
740
- "description": "The HTML type attribute for form interaction",
741
- "value": {
742
- "type": "'button' | 'submit' | 'reset'",
743
- "default": "'button'"
604
+ "name": "separator",
605
+ "description": "The separator between breadcrumb items. Default is '/'."
606
+ }
607
+ ],
608
+ "events": [],
609
+ "js": {
610
+ "properties": [
611
+ { "name": "variant", "type": "string" },
612
+ {
613
+ "name": "mobile",
614
+ "description": "Mobile version of the breadcrumb",
615
+ "type": "boolean"
616
+ },
617
+ {
618
+ "name": "ariaLabelledBy",
619
+ "description": "The aria-labelledby of the breadcrumb",
620
+ "type": "string | undefined"
744
621
  }
745
- },
622
+ ],
623
+ "events": []
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.",
629
+ "doc-url": "",
630
+ "attributes": [
746
631
  {
747
632
  "name": "href",
748
- "description": "The URL to navigate to. When present, the button renders as an anchor element",
633
+ "description": "The URL of the breadcrumb item.",
749
634
  "value": { "type": "string | undefined" }
750
635
  },
751
636
  {
752
637
  "name": "target",
753
- "description": "The target attribute for link navigation",
754
- "value": {
755
- "type": "'_blank' | '_self' | '_parent' | '_top'",
756
- "default": "'_self'"
757
- }
638
+ "description": "The target of the breadcrumb item.",
639
+ "value": { "type": "'_blank' | '_self' | '_parent' | '_top'" }
758
640
  },
759
641
  {
760
642
  "name": "rel",
761
- "description": "The rel attribute for link security and behavior",
762
- "value": {
763
- "type": "string | undefined",
764
- "default": "'noreferrer noopener'"
765
- }
766
- },
767
- {
768
- "name": "loadingTimeout",
769
- "description": "Controls loading timeout in milliseconds",
770
- "value": { "type": "number", "default": "0" }
643
+ "description": "The rel of the breadcrumb item link.",
644
+ "value": { "type": "string", "default": "'noreferrer noopener'" }
771
645
  },
772
646
  {
773
- "name": "active",
774
- "description": "Whether the button is active",
647
+ "name": "disabled",
648
+ "description": "Whether the breadcrumb item is disabled.",
775
649
  "value": { "type": "boolean", "default": "false" }
776
650
  },
777
651
  {
778
- "name": "targetBlankText",
779
- "description": "The text for the target blank link, applicable when target is _blank. PRO TIP: Use parenthesis to wrap the text",
780
- "value": { "type": "string" }
781
- },
782
- {
783
- "name": "forceRole",
784
- "description": "Overrides the ARIA role on the internal native button/anchor element. Use when the host's semantics must differ from the native element (e.g. role=\"link\" on a button acting as a SPA navigation trigger).",
785
- "value": { "type": "string | undefined" }
652
+ "name": "variant",
653
+ "description": "The variant of the breadcrumb item.",
654
+ "value": {
655
+ "type": "'normal' | 'inverted'",
656
+ "default": "'normal'"
657
+ }
786
658
  }
787
659
  ],
788
660
  "slots": [
789
661
  {
790
662
  "name": "",
791
- "description": "The content of the button. Can contain text, icons, or other elements."
792
- }
793
- ],
794
- "events": [
663
+ "description": "The content of the breadcrumb item."
664
+ },
795
665
  {
796
- "name": "dds-loading-timeout",
797
- "description": "Emitted when the loading timeout is reached"
666
+ "name": "separator",
667
+ "description": "The separator between breadcrumb items. Default is an arrow-right-s-line icon."
798
668
  }
799
669
  ],
670
+ "events": [],
800
671
  "js": {
801
672
  "properties": [
802
- {
803
- "name": "variant",
804
- "description": "The visual style variant of the button",
805
- "type": "'primary' | 'outline' | 'subtle' | 'subtle-neutral' | 'subtle-quiet' | 'subtle-quiet-inverted' | 'clean' | 'primary-inverted' | 'outline-inverted' | 'subtle-inverted' | 'clean-inverted' | 'subtle-menu' | 'subtle-menu-item'"
806
- },
807
- {
808
- "name": "size",
809
- "description": "The size of the button affecting padding and font size",
810
- "type": "'lg' | 'md' | 'sm' | 'xs'"
811
- },
812
- {
813
- "name": "loading",
814
- "description": "Whether the button is in loading state, showing a spinner and disabling interaction",
815
- "type": "boolean"
816
- },
817
- {
818
- "name": "danger",
819
- "description": "Whether the button represents a destructive action (applies danger styling)",
820
- "type": "boolean"
821
- },
822
- {
823
- "name": "shape",
824
- "description": "The shape of the button - use 'circle' for icon-only buttons",
825
- "type": "'button' | 'circle'"
826
- },
827
- {
828
- "name": "htmlType",
829
- "description": "The HTML type attribute for form interaction",
830
- "type": "'button' | 'submit' | 'reset'"
831
- },
832
673
  {
833
674
  "name": "href",
834
- "description": "The URL to navigate to. When present, the button renders as an anchor element",
675
+ "description": "The URL of the breadcrumb item.",
835
676
  "type": "string | undefined"
836
677
  },
837
678
  {
838
679
  "name": "target",
839
- "description": "The target attribute for link navigation",
680
+ "description": "The target of the breadcrumb item.",
840
681
  "type": "'_blank' | '_self' | '_parent' | '_top'"
841
682
  },
842
683
  {
843
684
  "name": "rel",
844
- "description": "The rel attribute for link security and behavior",
845
- "type": "string | undefined"
846
- },
847
- {
848
- "name": "loadingTimeout",
849
- "description": "Controls loading timeout in milliseconds",
850
- "type": "number"
851
- },
852
- {
853
- "name": "active",
854
- "description": "Whether the button is active",
855
- "type": "boolean"
856
- },
857
- {
858
- "name": "targetBlankText",
859
- "description": "The text for the target blank link, applicable when target is _blank. PRO TIP: Use parenthesis to wrap the text",
685
+ "description": "The rel of the breadcrumb item link.",
860
686
  "type": "string"
861
687
  },
862
688
  {
863
- "name": "forceRole",
864
- "description": "Overrides the ARIA role on the internal native button/anchor element. Use when the host's semantics must differ from the native element (e.g. role=\"link\" on a button acting as a SPA navigation trigger).",
865
- "type": "string | undefined"
689
+ "name": "disabled",
690
+ "description": "Whether the breadcrumb item is disabled.",
691
+ "type": "boolean"
866
692
  },
867
693
  {
868
- "name": "sizeMap",
869
- "description": "The size map of the button.",
870
- "type": "string"
694
+ "name": "variant",
695
+ "description": "The variant of the breadcrumb item.",
696
+ "type": "'normal' | 'inverted'"
871
697
  }
872
698
  ],
873
- "events": [
874
- {
875
- "name": "dds-loading-timeout",
876
- "description": "Emitted when the loading timeout is reached"
877
- }
878
- ]
699
+ "events": []
879
700
  }
880
701
  },
881
702
  {
@@ -1010,95 +831,274 @@
1010
831
  "doc-url": "",
1011
832
  "attributes": [
1012
833
  {
1013
- "name": "mode",
1014
- "description": "The mode of the calendar - single date or range selection.",
1015
- "value": { "type": "'single' | 'range'", "default": "'single'" }
834
+ "name": "mode",
835
+ "description": "The mode of the calendar - single date or range selection.",
836
+ "value": { "type": "'single' | 'range'", "default": "'single'" }
837
+ },
838
+ {
839
+ "name": "hideAdjacentMonths",
840
+ "description": "Whether to hide dates from adjacent months (previous/next) in the calendar grid. When not explicitly set, defaults to false for single mode and true for range mode.",
841
+ "value": { "type": "boolean", "default": "false" }
842
+ },
843
+ {
844
+ "name": "locale",
845
+ "description": "The locale of the calendar.",
846
+ "value": {
847
+ "type": "'hu' | 'en' | 'de'",
848
+ "default": "dayjs.locale()"
849
+ }
850
+ }
851
+ ],
852
+ "slots": [
853
+ { "name": "", "description": "The content of the calendar." }
854
+ ],
855
+ "events": [
856
+ {
857
+ "name": "dds-change",
858
+ "type": "{ value: Dayjs }",
859
+ "description": "Fired when the calendar value changes."
860
+ }
861
+ ],
862
+ "js": {
863
+ "properties": [
864
+ {
865
+ "name": "mode",
866
+ "description": "The mode of the calendar - single date or range selection.",
867
+ "type": "'single' | 'range'"
868
+ },
869
+ {
870
+ "name": "hideAdjacentMonths",
871
+ "description": "Whether to hide dates from adjacent months (previous/next) in the calendar grid. When not explicitly set, defaults to false for single mode and true for range mode.",
872
+ "type": "boolean"
873
+ },
874
+ {
875
+ "name": "value",
876
+ "description": "The value of the calendar.",
877
+ "type": "Dayjs"
878
+ },
879
+ {
880
+ "name": "rangeStart",
881
+ "description": "The start date of the range selection (only used in range mode).",
882
+ "type": "Dayjs"
883
+ },
884
+ {
885
+ "name": "rangeEnd",
886
+ "description": "The end date of the range selection (only used in range mode).",
887
+ "type": "Dayjs"
888
+ },
889
+ {
890
+ "name": "currentDate",
891
+ "description": "The current visible date of the calendar. Only the month and year are considered.",
892
+ "type": "Dayjs"
893
+ },
894
+ {
895
+ "name": "minDate",
896
+ "description": "The minimum date of the calendar. Only the month and year are considered.",
897
+ "type": "Dayjs"
898
+ },
899
+ {
900
+ "name": "maxDate",
901
+ "description": "The maximum date of the calendar. Only the month and year are considered.",
902
+ "type": "Dayjs"
903
+ },
904
+ {
905
+ "name": "disabledDate",
906
+ "description": "The function to determine if the date is disabled.",
907
+ "type": "Function"
908
+ },
909
+ {
910
+ "name": "locale",
911
+ "description": "The locale of the calendar.",
912
+ "type": "'hu' | 'en' | 'de'"
913
+ },
914
+ { "name": "startDate" },
915
+ { "name": "endDate" },
916
+ { "name": "shouldHideAdjacentMonths" }
917
+ ],
918
+ "events": [
919
+ {
920
+ "name": "dds-change",
921
+ "type": "{ value: Dayjs }",
922
+ "description": "Fired when the calendar value changes."
923
+ }
924
+ ]
925
+ }
926
+ },
927
+ {
928
+ "name": "dap-ds-button",
929
+ "description": "A button is a clickable element that can be used to trigger an action, submit forms, or navigate to other pages.\n---\n\n\n### **Events:**\n - **dds-loading-timeout** - Emitted when the loading timeout is reached\n\n### **Slots:**\n - _default_ - The content of the button. Can contain text, icons, or other elements.\n\n### **CSS Properties:**\n - **--dds-button-padding-x** - Horizontal padding of the button (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-button-padding-y** - Vertical padding of the button (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-button-border-radius** - Border radius of the button (default: var(--dds-radius-rounded)) _(default: undefined)_\n- **--dds-button-font-weight** - Font weight of the button (default: 700) _(default: undefined)_\n- **--dds-button-line-height** - Line height of the button (default: var(--dds-font-line-height-large)) _(default: undefined)_\n- **--dds-button-transition** - Transition property of the button (default: all 0.2s ease-in-out) _(default: undefined)_\n- **--dds-button-disabled-opacity** - Opacity of disabled button (default: 0.5) _(default: undefined)_\n- **--dds-button-size-lg** - Size of large button (default: var(--dds-spacing-1200)) _(default: undefined)_\n- **--dds-button-size-md** - Size of medium button (default: var(--dds-spacing-1000)) _(default: undefined)_\n- **--dds-button-size-sm** - Size of small button (default: var(--dds-spacing-800)) _(default: undefined)_\n- **--dds-button-size-xs** - Size of extra small button (default: var(--dds-spacing-600)) _(default: undefined)_\n- **--dds-button-circle-lg** - Size of large circle button (default: var(--dds-spacing-1200)) _(default: undefined)_\n- **--dds-button-circle-md** - Size of medium circle button (default: var(--dds-spacing-1000)) _(default: undefined)_\n- **--dds-button-circle-sm** - Size of small circle button (default: var(--dds-spacing-800)) _(default: undefined)_\n- **--dds-button-circle-xs** - Size of extra small circle button (default: var(--dds-spacing-600)) Primary button properties: _(default: undefined)_\n- **--dds-button-primary-color-bg** - Background color of primary button (default: var(--dds-button-primary-background-enabled)) _(default: undefined)_\n- **--dds-button-primary-color-bg-hover** - Background color of primary button on hover (default: var(--dds-button-primary-background-hover)) _(default: undefined)_\n- **--dds-button-primary-color-bg-active** - Background color of primary button when active (default: var(--dds-button-primary-background-pressed)) _(default: undefined)_\n- **--dds-button-primary-color-bg-disabled** - Background color of disabled primary button (default: var(--dds-button-primary-background-disabled)) _(default: undefined)_\n- **--dds-button-primary-color-text** - Text color of primary button (default: var(--dds-button-primary-text-enabled)) _(default: undefined)_\n- **--dds-button-primary-color-text-disabled** - Text color of disabled primary button (default: var(--dds-button-primary-text-disabled)) Primary inverted button properties: _(default: undefined)_\n- **--dds-button-primary-inverted-color-bg** - Background color of primary inverted button (default: var(--dds-button-primary-background-inverted-enabled)) _(default: undefined)_\n- **--dds-button-primary-inverted-color-bg-hover** - Background color of primary inverted button on hover (default: var(--dds-button-primary-background-inverted-hover)) _(default: undefined)_\n- **--dds-button-primary-inverted-color-bg-active** - Background color of primary inverted button when active (default: var(--dds-button-primary-background-inverted-pressed)) _(default: undefined)_\n- **--dds-button-primary-inverted-color-bg-disabled** - Background color of disabled primary inverted button (default: var(--dds-button-primary-background-inverted-disabled)) _(default: undefined)_\n- **--dds-button-primary-inverted-color-text** - Text color of primary inverted button (default: var(--dds-button-primary-text-inverted)) _(default: undefined)_\n- **--dds-button-primary-inverted-color-text-disabled** - Text color of disabled primary inverted button (default: var(--dds-button-primary-text-inverted-disabled)) Outline button properties: _(default: undefined)_\n- **--dds-button-outline-color-border** - Border color of outline button (default: var(--dds-button-outline-border-enabled)) _(default: undefined)_\n- **--dds-button-outline-color-border-hover** - Border color of outline button on hover (default: var(--dds-button-outline-border-hover)) _(default: undefined)_\n- **--dds-button-outline-color-border-active** - Border color of outline button when active (default: var(--dds-button-outline-border-pressed)) _(default: undefined)_\n- **--dds-button-outline-color-border-disabled** - Border color of disabled outline button (default: var(--dds-button-outline-border-disabled)) _(default: undefined)_\n- **--dds-button-outline-color-text** - Text color of outline button (default: var(--dds-button-outline-text-enabled)) _(default: undefined)_\n- **--dds-button-outline-color-text-hover** - Text color of outline button on hover (default: var(--dds-button-outline-text-hover)) _(default: undefined)_\n- **--dds-button-outline-color-text-active** - Text color of outline button when active (default: var(--dds-button-outline-text-pressed)) _(default: undefined)_\n- **--dds-button-outline-color-text-disabled** - Text color of disabled outline button (default: var(--dds-button-outline-text-disabled)) Outline inverted button properties: _(default: undefined)_\n- **--dds-button-outline-inverted-color-border** - Border color of outline inverted button (default: var(--dds-button-outline-border-inverted-enabled)) _(default: undefined)_\n- **--dds-button-outline-inverted-color-border-hover** - Border color of outline inverted button on hover (default: var(--dds-button-outline-border-inverted-hover)) _(default: undefined)_\n- **--dds-button-outline-inverted-color-border-active** - Border color of outline inverted button when active (default: var(--dds-button-outline-border-inverted-pressed)) _(default: undefined)_\n- **--dds-button-outline-inverted-color-border-disabled** - Border color of disabled outline inverted button (default: var(--dds-button-outline-border-inverted-disabled)) _(default: undefined)_\n- **--dds-button-outline-inverted-color-text** - Text color of outline inverted button (default: var(--dds-button-outline-text-inverted-enabled)) _(default: undefined)_\n- **--dds-button-outline-inverted-color-text-hover** - Text color of outline inverted button on hover (default: var(--dds-button-outline-text-inverted-hover)) _(default: undefined)_\n- **--dds-button-outline-inverted-color-text-active** - Text color of outline inverted button when active (default: var(--dds-button-outline-text-inverted-pressed)) _(default: undefined)_\n- **--dds-button-outline-inverted-color-text-disabled** - Text color of disabled outline inverted button (default: var(--dds-button-outline-text-inverted-disabled)) Subtle button properties: _(default: undefined)_\n- **--dds-button-subtle-color-bg** - Background color of subtle button (default: var(--dds-button-subtle-background-enabled)) _(default: undefined)_\n- **--dds-button-subtle-color-bg-hover** - Background color of subtle button on hover (default: var(--dds-button-subtle-background-hover)) _(default: undefined)_\n- **--dds-button-subtle-color-bg-active** - Background color of subtle button when active (default: var(--dds-button-subtle-background-pressed)) _(default: undefined)_\n- **--dds-button-subtle-color-bg-disabled** - Background color of disabled subtle button (default: var(--dds-button-subtle-background-disabled)) _(default: undefined)_\n- **--dds-button-subtle-color-border** - Border color of subtle button (default: var(--dds-button-subtle-border-enabled)) _(default: undefined)_\n- **--dds-button-subtle-color-border-hover** - Border color of subtle button on hover (default: var(--dds-button-subtle-border-hover)) _(default: undefined)_\n- **--dds-button-subtle-color-border-active** - Border color of subtle button when active (default: var(--dds-button-subtle-border-pressed)) _(default: undefined)_\n- **--dds-button-subtle-color-border-disabled** - Border color of disabled subtle button (default: var(--dds-button-subtle-border-disabled)) _(default: undefined)_\n- **--dds-button-subtle-color-text** - Text color of subtle button (default: var(--dds-button-subtle-text-enabled)) _(default: undefined)_\n- **--dds-button-subtle-color-text-hover** - Text color of subtle button on hover (default: var(--dds-button-subtle-text-hover)) _(default: undefined)_\n- **--dds-button-subtle-color-text-active** - Text color of subtle button when active (default: var(--dds-button-subtle-text-pressed)) _(default: undefined)_\n- **--dds-button-subtle-color-text-disabled** - Text color of disabled subtle button (default: var(--dds-button-subtle-text-disabled)) Clean button properties: _(default: undefined)_\n- **--dds-button-clean-color-text** - Text color of clean button (default: var(--dds-text-link-base)) _(default: undefined)_\n- **--dds-button-clean-color-text-hover** - Text color of clean button on hover (default: var(--dds-text-link-hover)) _(default: undefined)_\n- **--dds-button-clean-color-text-active** - Text color of clean button when active (default: var(--dds-text-link-pressed)) _(default: undefined)_\n- **--dds-button-clean-color-text-disabled** - Text color of disabled clean button (default: var(--dds-text-neutral-disabled)) Clean inverted button properties: _(default: undefined)_\n- **--dds-button-clean-inverted-color-text** - Text color of clean inverted button (default: var(--dds-button-primary-text-inverted)) _(default: undefined)_\n- **--dds-button-clean-inverted-color-text-hover** - Text color of clean inverted button on hover (default: var(--dds-button-primary-text-inverted)) _(default: undefined)_\n- **--dds-button-clean-inverted-color-text-active** - Text color of clean inverted button when active (default: var(--dds-button-primary-text-inverted)) _(default: undefined)_\n- **--dds-button-clean-inverted-color-text-disabled** - Text color of disabled clean inverted button (default: var(--dds-text-neutral-disabled)) Danger button properties: _(default: undefined)_\n- **--dds-button-danger-color-bg** - Background color of danger button (default: var(--dds-button-primary-background-destructive-enabled)) _(default: undefined)_\n- **--dds-button-danger-color-bg-hover** - Background color of danger button on hover (default: var(--dds-button-primary-background-destructive-hover)) _(default: undefined)_\n- **--dds-button-danger-color-bg-active** - Background color of danger button when active (default: var(--dds-button-primary-background-destructive-pressed)) _(default: undefined)_\n- **--dds-button-danger-color-text** - Text color of danger button (default: var(--dds-button-primary-text-enabled)) _(default: undefined)_\n- **--dds-button-danger-outline-color-border** - Border color of danger outline button (default: var(--dds-button-outline-border-destructive-enabled)) _(default: undefined)_\n- **--dds-button-danger-outline-color-border-hover** - Border color of danger outline button on hover (default: var(--dds-button-outline-border-destructive-hover)) _(default: undefined)_\n- **--dds-button-danger-outline-color-border-active** - Border color of danger outline button when active (default: var(--dds-button-outline-border-destructive-pressed)) _(default: undefined)_\n- **--dds-button-danger-outline-color-text** - Text color of danger outline button (default: var(--dds-button-outline-text-destructive-enabled)) _(default: undefined)_\n- **--dds-button-danger-outline-color-text-hover** - Text color of danger outline button on hover (default: var(--dds-button-outline-text-destructive-hover)) _(default: undefined)_\n- **--dds-button-danger-outline-color-text-active** - Text color of danger outline button when active (default: var(--dds-button-outline-text-destructive-pressed)) _(default: undefined)_\n- **--dds-button-danger-subtle-color-bg** - Background color of danger subtle button (default: var(--dds-button-subtle-background-destructive-enabled)) _(default: undefined)_\n- **--dds-button-danger-subtle-color-bg-hover** - Background color of danger subtle button on hover (default: var(--dds-button-subtle-background-destructive-hover)) _(default: undefined)_\n- **--dds-button-danger-subtle-color-bg-active** - Background color of danger subtle button when active (default: var(--dds-button-subtle-background-destructive-pressed)) _(default: undefined)_\n- **--dds-button-danger-subtle-color-text** - Text color of danger subtle button (default: var(--dds-button-subtle-text-destructive-enabled)) _(default: undefined)_\n- **--dds-button-danger-subtle-color-text-hover** - Text color of danger subtle button on hover (default: var(--dds-button-subtle-text-destructive-hover)) _(default: undefined)_\n- **--dds-button-danger-subtle-color-text-active** - Text color of danger subtle button when active (default: var(--dds-button-subtle-text-destructive-pressed)) _(default: undefined)_\n- **--dds-button-danger-clean-color-text** - Text color of danger clean button (default: var(--dds-text-negative-subtle)) _(default: undefined)_\n- **--dds-button-danger-clean-color-text-hover** - Text color of danger clean button on hover (default: var(--dds-text-negative-base)) _(default: undefined)_\n- **--dds-button-danger-clean-color-text-active** - Text color of danger clean button when active (default: var(--dds-text-negative-strong)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main button container.\n- **high-contrast** - The high contrast part of the button.\n- **content** - The content wrapper inside the button.",
930
+ "doc-url": "",
931
+ "attributes": [
932
+ {
933
+ "name": "variant",
934
+ "description": "The visual style variant of the button",
935
+ "value": {
936
+ "type": "'primary' | 'outline' | 'subtle' | 'subtle-neutral' | 'subtle-quiet' | 'subtle-quiet-inverted' | 'clean' | 'primary-inverted' | 'outline-inverted' | 'subtle-inverted' | 'clean-inverted' | 'subtle-menu' | 'subtle-menu-item'",
937
+ "default": "'primary'"
938
+ }
939
+ },
940
+ {
941
+ "name": "size",
942
+ "description": "The size of the button affecting padding and font size",
943
+ "value": {
944
+ "type": "'lg' | 'md' | 'sm' | 'xs'",
945
+ "default": "'md'"
946
+ }
947
+ },
948
+ {
949
+ "name": "loading",
950
+ "description": "Whether the button is in loading state, showing a spinner and disabling interaction",
951
+ "value": { "type": "boolean", "default": "false" }
952
+ },
953
+ {
954
+ "name": "danger",
955
+ "description": "Whether the button represents a destructive action (applies danger styling)",
956
+ "value": { "type": "boolean", "default": "false" }
957
+ },
958
+ {
959
+ "name": "shape",
960
+ "description": "The shape of the button - use 'circle' for icon-only buttons",
961
+ "value": { "type": "'button' | 'circle'", "default": "'button'" }
962
+ },
963
+ {
964
+ "name": "htmlType",
965
+ "description": "The HTML type attribute for form interaction",
966
+ "value": {
967
+ "type": "'button' | 'submit' | 'reset'",
968
+ "default": "'button'"
969
+ }
970
+ },
971
+ {
972
+ "name": "href",
973
+ "description": "The URL to navigate to. When present, the button renders as an anchor element",
974
+ "value": { "type": "string | undefined" }
1016
975
  },
1017
976
  {
1018
- "name": "hideAdjacentMonths",
1019
- "description": "Whether to hide dates from adjacent months (previous/next) in the calendar grid. When not explicitly set, defaults to false for single mode and true for range mode.",
1020
- "value": { "type": "boolean", "default": "false" }
977
+ "name": "target",
978
+ "description": "The target attribute for link navigation",
979
+ "value": {
980
+ "type": "'_blank' | '_self' | '_parent' | '_top'",
981
+ "default": "'_self'"
982
+ }
1021
983
  },
1022
984
  {
1023
- "name": "locale",
1024
- "description": "The locale of the calendar.",
985
+ "name": "rel",
986
+ "description": "The rel attribute for link security and behavior",
1025
987
  "value": {
1026
- "type": "'hu' | 'en' | 'de'",
1027
- "default": "dayjs.locale()"
988
+ "type": "string | undefined",
989
+ "default": "'noreferrer noopener'"
1028
990
  }
991
+ },
992
+ {
993
+ "name": "loadingTimeout",
994
+ "description": "Controls loading timeout in milliseconds",
995
+ "value": { "type": "number", "default": "0" }
996
+ },
997
+ {
998
+ "name": "active",
999
+ "description": "Whether the button is active",
1000
+ "value": { "type": "boolean", "default": "false" }
1001
+ },
1002
+ {
1003
+ "name": "targetBlankText",
1004
+ "description": "The text for the target blank link, applicable when target is _blank. PRO TIP: Use parenthesis to wrap the text",
1005
+ "value": { "type": "string" }
1006
+ },
1007
+ {
1008
+ "name": "forceRole",
1009
+ "description": "Overrides the ARIA role on the internal native button/anchor element. Use when the host's semantics must differ from the native element (e.g. role=\"link\" on a button acting as a SPA navigation trigger).",
1010
+ "value": { "type": "string | undefined" }
1029
1011
  }
1030
1012
  ],
1031
1013
  "slots": [
1032
- { "name": "", "description": "The content of the calendar." }
1014
+ {
1015
+ "name": "",
1016
+ "description": "The content of the button. Can contain text, icons, or other elements."
1017
+ }
1033
1018
  ],
1034
1019
  "events": [
1035
1020
  {
1036
- "name": "dds-change",
1037
- "type": "{ value: Dayjs }",
1038
- "description": "Fired when the calendar value changes."
1021
+ "name": "dds-loading-timeout",
1022
+ "description": "Emitted when the loading timeout is reached"
1039
1023
  }
1040
1024
  ],
1041
1025
  "js": {
1042
1026
  "properties": [
1043
1027
  {
1044
- "name": "mode",
1045
- "description": "The mode of the calendar - single date or range selection.",
1046
- "type": "'single' | 'range'"
1028
+ "name": "variant",
1029
+ "description": "The visual style variant of the button",
1030
+ "type": "'primary' | 'outline' | 'subtle' | 'subtle-neutral' | 'subtle-quiet' | 'subtle-quiet-inverted' | 'clean' | 'primary-inverted' | 'outline-inverted' | 'subtle-inverted' | 'clean-inverted' | 'subtle-menu' | 'subtle-menu-item'"
1047
1031
  },
1048
1032
  {
1049
- "name": "hideAdjacentMonths",
1050
- "description": "Whether to hide dates from adjacent months (previous/next) in the calendar grid. When not explicitly set, defaults to false for single mode and true for range mode.",
1033
+ "name": "size",
1034
+ "description": "The size of the button affecting padding and font size",
1035
+ "type": "'lg' | 'md' | 'sm' | 'xs'"
1036
+ },
1037
+ {
1038
+ "name": "loading",
1039
+ "description": "Whether the button is in loading state, showing a spinner and disabling interaction",
1051
1040
  "type": "boolean"
1052
1041
  },
1053
1042
  {
1054
- "name": "value",
1055
- "description": "The value of the calendar.",
1056
- "type": "Dayjs"
1043
+ "name": "danger",
1044
+ "description": "Whether the button represents a destructive action (applies danger styling)",
1045
+ "type": "boolean"
1057
1046
  },
1058
1047
  {
1059
- "name": "rangeStart",
1060
- "description": "The start date of the range selection (only used in range mode).",
1061
- "type": "Dayjs"
1048
+ "name": "shape",
1049
+ "description": "The shape of the button - use 'circle' for icon-only buttons",
1050
+ "type": "'button' | 'circle'"
1062
1051
  },
1063
1052
  {
1064
- "name": "rangeEnd",
1065
- "description": "The end date of the range selection (only used in range mode).",
1066
- "type": "Dayjs"
1053
+ "name": "htmlType",
1054
+ "description": "The HTML type attribute for form interaction",
1055
+ "type": "'button' | 'submit' | 'reset'"
1067
1056
  },
1068
1057
  {
1069
- "name": "currentDate",
1070
- "description": "The current visible date of the calendar. Only the month and year are considered.",
1071
- "type": "Dayjs"
1058
+ "name": "href",
1059
+ "description": "The URL to navigate to. When present, the button renders as an anchor element",
1060
+ "type": "string | undefined"
1072
1061
  },
1073
1062
  {
1074
- "name": "minDate",
1075
- "description": "The minimum date of the calendar. Only the month and year are considered.",
1076
- "type": "Dayjs"
1063
+ "name": "target",
1064
+ "description": "The target attribute for link navigation",
1065
+ "type": "'_blank' | '_self' | '_parent' | '_top'"
1077
1066
  },
1078
1067
  {
1079
- "name": "maxDate",
1080
- "description": "The maximum date of the calendar. Only the month and year are considered.",
1081
- "type": "Dayjs"
1068
+ "name": "rel",
1069
+ "description": "The rel attribute for link security and behavior",
1070
+ "type": "string | undefined"
1082
1071
  },
1083
1072
  {
1084
- "name": "disabledDate",
1085
- "description": "The function to determine if the date is disabled.",
1086
- "type": "Function"
1073
+ "name": "loadingTimeout",
1074
+ "description": "Controls loading timeout in milliseconds",
1075
+ "type": "number"
1087
1076
  },
1088
1077
  {
1089
- "name": "locale",
1090
- "description": "The locale of the calendar.",
1091
- "type": "'hu' | 'en' | 'de'"
1078
+ "name": "active",
1079
+ "description": "Whether the button is active",
1080
+ "type": "boolean"
1092
1081
  },
1093
- { "name": "startDate" },
1094
- { "name": "endDate" },
1095
- { "name": "shouldHideAdjacentMonths" }
1082
+ {
1083
+ "name": "targetBlankText",
1084
+ "description": "The text for the target blank link, applicable when target is _blank. PRO TIP: Use parenthesis to wrap the text",
1085
+ "type": "string"
1086
+ },
1087
+ {
1088
+ "name": "forceRole",
1089
+ "description": "Overrides the ARIA role on the internal native button/anchor element. Use when the host's semantics must differ from the native element (e.g. role=\"link\" on a button acting as a SPA navigation trigger).",
1090
+ "type": "string | undefined"
1091
+ },
1092
+ {
1093
+ "name": "sizeMap",
1094
+ "description": "The size map of the button.",
1095
+ "type": "string"
1096
+ }
1096
1097
  ],
1097
1098
  "events": [
1098
1099
  {
1099
- "name": "dds-change",
1100
- "type": "{ value: Dayjs }",
1101
- "description": "Fired when the calendar value changes."
1100
+ "name": "dds-loading-timeout",
1101
+ "description": "Emitted when the loading timeout is reached"
1102
1102
  }
1103
1103
  ]
1104
1104
  }
@@ -1493,160 +1493,66 @@
1493
1493
  "name": "href",
1494
1494
  "description": "The URL of the card.",
1495
1495
  "value": { "type": "string" }
1496
- },
1497
- {
1498
- "name": "rel",
1499
- "description": "The rel of the card link.",
1500
- "value": { "type": "string", "default": "'noreferrer noopener'" }
1501
- }
1502
- ],
1503
- "slots": [{ "name": "", "description": "The content of the card." }],
1504
- "events": [],
1505
- "js": {
1506
- "properties": [
1507
- {
1508
- "name": "interactive",
1509
- "description": "Whether the card is interactive. Default is false. If true, the card will be rendered as an anchor element.",
1510
- "type": "boolean"
1511
- },
1512
- {
1513
- "name": "renderAs",
1514
- "description": "The render as type of the card, only applicable when interactive.",
1515
- "type": "'a' | 'button'"
1516
- },
1517
- {
1518
- "name": "disabled",
1519
- "description": "Whether the card is disabled.",
1520
- "type": "boolean"
1521
- },
1522
- {
1523
- "name": "noBorder",
1524
- "description": "Removes the border around the card",
1525
- "type": "boolean"
1526
- },
1527
- {
1528
- "name": "noPadding",
1529
- "description": "Removes the padding around the card",
1530
- "type": "boolean"
1531
- },
1532
- {
1533
- "name": "targetBlankText",
1534
- "description": "The text for the target blank link, applicable when target is _blank. PRO TIP: Use parenthesis to wrap the text",
1535
- "type": "string"
1536
- },
1537
- {
1538
- "name": "target",
1539
- "description": "The link target of the card",
1540
- "type": "'_blank' | '_self' | '_parent' | '_top'"
1541
- },
1542
- {
1543
- "name": "href",
1544
- "description": "The URL of the card.",
1545
- "type": "string"
1546
- },
1547
- {
1548
- "name": "rel",
1549
- "description": "The rel of the card link.",
1550
- "type": "string"
1551
- },
1552
- {
1553
- "name": "size",
1554
- "description": "The size of the card. Default is `sm`.",
1555
- "type": "'sm' | 'md' | 'lg'"
1556
- },
1557
- {
1558
- "name": "sizeMap",
1559
- "description": "Responsive size map (e.g. \"md:lg\").",
1560
- "type": "string"
1561
- }
1562
- ],
1563
- "events": []
1564
- }
1565
- },
1566
- {
1567
- "name": "dap-ds-chip",
1568
- "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",
1569
- "doc-url": "",
1570
- "attributes": [
1571
- {
1572
- "name": "removeable",
1573
- "description": "Whether the chip is removeable",
1574
- "value": { "type": "boolean", "default": "false" }
1575
- },
1576
- {
1577
- "name": "selectable",
1578
- "description": "Whether the chip is selectable",
1579
- "value": { "type": "boolean", "default": "false" }
1580
- },
1581
- {
1582
- "name": "selected",
1583
- "description": "Whether the chip is selected",
1584
- "value": { "type": "boolean", "default": "false" }
1585
- },
1586
- {
1587
- "name": "disabled",
1588
- "description": "Whether the chip is disabled",
1589
- "value": { "type": "boolean", "default": "false" }
1590
- },
1591
- {
1592
- "name": "value",
1593
- "description": "The value of the chip",
1594
- "value": { "type": "string | undefined" }
1595
- },
1596
- {
1597
- "name": "deleteAriaLabel",
1598
- "description": "The aria label for the delete button",
1599
- "value": { "type": "string | undefined" }
1600
- }
1601
- ],
1602
- "events": [
1603
- {
1604
- "name": "dds-remove",
1605
- "type": "{ value: string }",
1606
- "description": "Fired when the chip is removed"
1607
- },
1608
- {
1609
- "name": "dds-select",
1610
- "type": "{ value?: string, selected: boolean }",
1611
- "description": "Fired when the chip is selected"
1496
+ },
1497
+ {
1498
+ "name": "rel",
1499
+ "description": "The rel of the card link.",
1500
+ "value": { "type": "string", "default": "'noreferrer noopener'" }
1612
1501
  }
1613
1502
  ],
1503
+ "slots": [{ "name": "", "description": "The content of the card." }],
1504
+ "events": [],
1614
1505
  "js": {
1615
1506
  "properties": [
1616
1507
  {
1617
- "name": "removeable",
1618
- "description": "Whether the chip is removeable",
1508
+ "name": "interactive",
1509
+ "description": "Whether the card is interactive. Default is false. If true, the card will be rendered as an anchor element.",
1619
1510
  "type": "boolean"
1620
1511
  },
1621
1512
  {
1622
- "name": "selectable",
1623
- "description": "Whether the chip is selectable",
1513
+ "name": "renderAs",
1514
+ "description": "The render as type of the card, only applicable when interactive.",
1515
+ "type": "'a' | 'button'"
1516
+ },
1517
+ {
1518
+ "name": "disabled",
1519
+ "description": "Whether the card is disabled.",
1624
1520
  "type": "boolean"
1625
1521
  },
1626
1522
  {
1627
- "name": "selected",
1628
- "description": "Whether the chip is selected",
1523
+ "name": "noBorder",
1524
+ "description": "Removes the border around the card",
1629
1525
  "type": "boolean"
1630
1526
  },
1631
1527
  {
1632
- "name": "disabled",
1633
- "description": "Whether the chip is disabled",
1528
+ "name": "noPadding",
1529
+ "description": "Removes the padding around the card",
1634
1530
  "type": "boolean"
1635
1531
  },
1636
1532
  {
1637
- "name": "value",
1638
- "description": "The value of the chip",
1639
- "type": "string | undefined"
1533
+ "name": "targetBlankText",
1534
+ "description": "The text for the target blank link, applicable when target is _blank. PRO TIP: Use parenthesis to wrap the text",
1535
+ "type": "string"
1640
1536
  },
1641
1537
  {
1642
- "name": "deleteAriaLabel",
1643
- "description": "The aria label for the delete button",
1644
- "type": "string | undefined"
1538
+ "name": "target",
1539
+ "description": "The link target of the card",
1540
+ "type": "'_blank' | '_self' | '_parent' | '_top'"
1541
+ },
1542
+ {
1543
+ "name": "href",
1544
+ "description": "The URL of the card.",
1545
+ "type": "string"
1546
+ },
1547
+ {
1548
+ "name": "rel",
1549
+ "description": "The rel of the card link.",
1550
+ "type": "string"
1645
1551
  },
1646
1552
  {
1647
1553
  "name": "size",
1648
- "description": "The size of the chip. Default is `sm`.",
1649
- "type": "'sm' | 'lg'"
1554
+ "description": "The size of the card. Default is `sm`.",
1555
+ "type": "'sm' | 'md' | 'lg'"
1650
1556
  },
1651
1557
  {
1652
1558
  "name": "sizeMap",
@@ -1654,18 +1560,7 @@
1654
1560
  "type": "string"
1655
1561
  }
1656
1562
  ],
1657
- "events": [
1658
- {
1659
- "name": "dds-remove",
1660
- "type": "{ value: string }",
1661
- "description": "Fired when the chip is removed"
1662
- },
1663
- {
1664
- "name": "dds-select",
1665
- "type": "{ value?: string, selected: boolean }",
1666
- "description": "Fired when the chip is selected"
1667
- }
1668
- ]
1563
+ "events": []
1669
1564
  }
1670
1565
  },
1671
1566
  {
@@ -1863,6 +1758,111 @@
1863
1758
  ]
1864
1759
  }
1865
1760
  },
1761
+ {
1762
+ "name": "dap-ds-chip",
1763
+ "description": "A chip is a small status descriptor for UI elements.\n---\n\n\n### **Events:**\n - **dds-remove** - Fired when the chip is removed\n- **dds-select** - Fired when the chip is selected\n\n### **CSS Properties:**\n - **--dds-chip-border** - Border of the chip (default: var(--dds-border-width-base) solid var(--dds-transparent-black-base)) _(default: undefined)_\n- **--dds-chip-border-radius** - Border radius of the chip (default: var(--dds-radius-small)) _(default: undefined)_\n- **--dds-chip-font-weight** - Font weight of the chip (default: var(--dds-font-weight-bold)) _(default: undefined)_\n- **--dds-chip-line-height** - Line height of the chip (default: 1.5) _(default: undefined)_\n- **--dds-chip-transition** - Transition timing for chip interactions (default: all 0.2s ease-in-out) _(default: undefined)_\n- **--dds-chip-padding-sm** - Padding for small chip size (default: var(--dds-spacing-100) var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-chip-padding-lg** - Padding for large chip size (default: var(--dds-spacing-200) var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-chip-font-size-sm** - Font size for small chip size (default: var(--dds-font-xs)) _(default: undefined)_\n- **--dds-chip-font-size-lg** - Font size for large chip size (default: var(--dds-font-xs)) _(default: undefined)_\n- **--dds-chip-background-color** - Background color of the chip (default: var(--dds-background-neutral-base)) _(default: undefined)_\n- **--dds-chip-text-color** - Text color of the chip (default: var(--dds-text-neutral-base)) _(default: undefined)_\n- **--dds-chip-hover-background-color** - Background color of the chip on hover (default: var(--dds-background-neutral-medium)) _(default: undefined)_\n- **--dds-chip-active-background-color** - Background color of the chip when active (default: var(--dds-background-neutral-strong)) _(default: undefined)_\n- **--dds-chip-selected-background-color** - Background color of the selected chip (default: var(--dds-background-brand-medium)) _(default: undefined)_\n- **--dds-chip-selected-text-color** - Text color of the selected chip (default: var(--dds-text-brand-subtle)) _(default: undefined)_\n- **--dds-chip-selected-border-color** - Border color of the selected chip (default: var(--dds-border-brand-base)) _(default: undefined)_\n- **--dds-chip-disabled-background-color** - Background color of the disabled chip (default: var(--dds-background-neutral-medium)) _(default: undefined)_\n- **--dds-chip-disabled-text-color** - Text color of the disabled chip (default: var(--dds-text-neutral-subtle)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The base part\n- **content-container** - The container for the content\n- **remove-button** - The remove button\n- **remove-icon** - The icon of the remove icon\n- **remove-icon-base** - The base of the remove icon\n- **remove-icon-base-base** - The base of the remove icon base",
1764
+ "doc-url": "",
1765
+ "attributes": [
1766
+ {
1767
+ "name": "removeable",
1768
+ "description": "Whether the chip is removeable",
1769
+ "value": { "type": "boolean", "default": "false" }
1770
+ },
1771
+ {
1772
+ "name": "selectable",
1773
+ "description": "Whether the chip is selectable",
1774
+ "value": { "type": "boolean", "default": "false" }
1775
+ },
1776
+ {
1777
+ "name": "selected",
1778
+ "description": "Whether the chip is selected",
1779
+ "value": { "type": "boolean", "default": "false" }
1780
+ },
1781
+ {
1782
+ "name": "disabled",
1783
+ "description": "Whether the chip is disabled",
1784
+ "value": { "type": "boolean", "default": "false" }
1785
+ },
1786
+ {
1787
+ "name": "value",
1788
+ "description": "The value of the chip",
1789
+ "value": { "type": "string | undefined" }
1790
+ },
1791
+ {
1792
+ "name": "deleteAriaLabel",
1793
+ "description": "The aria label for the delete button",
1794
+ "value": { "type": "string | undefined" }
1795
+ }
1796
+ ],
1797
+ "events": [
1798
+ {
1799
+ "name": "dds-remove",
1800
+ "type": "{ value: string }",
1801
+ "description": "Fired when the chip is removed"
1802
+ },
1803
+ {
1804
+ "name": "dds-select",
1805
+ "type": "{ value?: string, selected: boolean }",
1806
+ "description": "Fired when the chip is selected"
1807
+ }
1808
+ ],
1809
+ "js": {
1810
+ "properties": [
1811
+ {
1812
+ "name": "removeable",
1813
+ "description": "Whether the chip is removeable",
1814
+ "type": "boolean"
1815
+ },
1816
+ {
1817
+ "name": "selectable",
1818
+ "description": "Whether the chip is selectable",
1819
+ "type": "boolean"
1820
+ },
1821
+ {
1822
+ "name": "selected",
1823
+ "description": "Whether the chip is selected",
1824
+ "type": "boolean"
1825
+ },
1826
+ {
1827
+ "name": "disabled",
1828
+ "description": "Whether the chip is disabled",
1829
+ "type": "boolean"
1830
+ },
1831
+ {
1832
+ "name": "value",
1833
+ "description": "The value of the chip",
1834
+ "type": "string | undefined"
1835
+ },
1836
+ {
1837
+ "name": "deleteAriaLabel",
1838
+ "description": "The aria label for the delete button",
1839
+ "type": "string | undefined"
1840
+ },
1841
+ {
1842
+ "name": "size",
1843
+ "description": "The size of the chip. Default is `sm`.",
1844
+ "type": "'sm' | 'lg'"
1845
+ },
1846
+ {
1847
+ "name": "sizeMap",
1848
+ "description": "Responsive size map (e.g. \"md:lg\").",
1849
+ "type": "string"
1850
+ }
1851
+ ],
1852
+ "events": [
1853
+ {
1854
+ "name": "dds-remove",
1855
+ "type": "{ value: string }",
1856
+ "description": "Fired when the chip is removed"
1857
+ },
1858
+ {
1859
+ "name": "dds-select",
1860
+ "type": "{ value?: string, selected: boolean }",
1861
+ "description": "Fired when the chip is selected"
1862
+ }
1863
+ ]
1864
+ }
1865
+ },
1866
1866
  {
1867
1867
  "name": "dap-ds-code-puncher-slot",
1868
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.",
@@ -4871,8 +4871,139 @@
4871
4871
  "description": "The aria label of the button.",
4872
4872
  "type": "string"
4873
4873
  }
4874
- ],
4875
- "events": []
4874
+ ],
4875
+ "events": []
4876
+ }
4877
+ },
4878
+ {
4879
+ "name": "dap-ds-image-zoom",
4880
+ "description": "An image zoom component that provides a Medium.com-style zoom experience. Click an image to expand it to fill the viewport with a smooth animation.\n---\n\n\n### **Events:**\n - **dds-zoom** - Fires when the image is about to zoom. Cancelable via event.preventDefault().\n- **dds-unzoom** - Fires after the image has unzoomed.\n\n### **Methods:**\n - **zoom(): _void_** - Programmatically zoom the image.\n- **unzoom(): _void_** - Programmatically unzoom the image.\n\n### **Slots:**\n - _default_ - The image or content element to zoom. Should contain an <img> element.\n\n### **CSS Properties:**\n - **--dds-image-zoom-overlay-bg** - Overlay background color (default: rgba(0, 0, 0, 0.8)). _(default: undefined)_\n- **--dds-image-zoom-transition-speed** - Animation duration (default: 300ms). _(default: undefined)_\n- **--dds-image-zoom-transition-timing** - Animation timing function (default: var(--dds-easing-ease-in-out, ease-in-out)). _(default: undefined)_\n\n### **CSS Parts:**\n - **trigger** - The zoom trigger wrapper element.\n- **dialog** - The zoom dialog element.\n- **overlay** - The backdrop overlay element.\n- **zoomed-image** - The zoomed image element.\n- **unzoom-button** - The button to close the zoomed view.\n- **expand-button** - The button to expand the image.",
4881
+ "doc-url": "",
4882
+ "attributes": [
4883
+ {
4884
+ "name": "open",
4885
+ "description": "The open/zoomed state. Can be used for controlled mode.",
4886
+ "value": { "type": "boolean", "default": "false" }
4887
+ },
4888
+ {
4889
+ "name": "isDisabled",
4890
+ "description": "Disables zoom functionality.",
4891
+ "value": { "type": "boolean", "default": "false" }
4892
+ },
4893
+ {
4894
+ "name": "zoomMargin",
4895
+ "description": "Margin in pixels from viewport edges when zoomed. Default is 0.",
4896
+ "value": { "type": "number", "default": "0" }
4897
+ },
4898
+ {
4899
+ "name": "expandButtonAriaLabel",
4900
+ "description": "Accessible label for the zoom trigger. Default is 'Expand image'.",
4901
+ "value": { "type": "string", "default": "null" }
4902
+ },
4903
+ {
4904
+ "name": "unzoomButtonAriaLabel",
4905
+ "description": "Accessible label for the unzoom button. Default is 'Minimize image'.",
4906
+ "value": { "type": "string", "default": "null" }
4907
+ },
4908
+ {
4909
+ "name": "canSwipeToUnzoom",
4910
+ "description": "Enables swipe gesture to close when zoomed. Default is true.",
4911
+ "value": { "type": "boolean", "default": "true" }
4912
+ },
4913
+ {
4914
+ "name": "swipeToUnzoomThreshold",
4915
+ "description": "Swipe distance in pixels required to trigger unzoom. Default is 10.",
4916
+ "value": { "type": "number", "default": "10" }
4917
+ },
4918
+ {
4919
+ "name": "zoomSrc",
4920
+ "description": "URL of a higher quality image to display when zoomed. Falls back to the slotted image src.",
4921
+ "value": { "type": "string" }
4922
+ },
4923
+ {
4924
+ "name": "hideButtons",
4925
+ "description": "Hides the expand and unzoom buttons. Default is false.",
4926
+ "value": { "type": "boolean", "default": "false" }
4927
+ }
4928
+ ],
4929
+ "slots": [
4930
+ {
4931
+ "name": "",
4932
+ "description": "The image or content element to zoom. Should contain an <img> element."
4933
+ }
4934
+ ],
4935
+ "events": [
4936
+ {
4937
+ "name": "dds-zoom",
4938
+ "type": "CustomEvent",
4939
+ "description": "Fires when the image is about to zoom. Cancelable via event.preventDefault()."
4940
+ },
4941
+ {
4942
+ "name": "dds-unzoom",
4943
+ "type": "CustomEvent",
4944
+ "description": "Fires after the image has unzoomed."
4945
+ }
4946
+ ],
4947
+ "js": {
4948
+ "properties": [
4949
+ {
4950
+ "name": "open",
4951
+ "description": "The open/zoomed state. Can be used for controlled mode.",
4952
+ "type": "boolean"
4953
+ },
4954
+ {
4955
+ "name": "isDisabled",
4956
+ "description": "Disables zoom functionality.",
4957
+ "type": "boolean"
4958
+ },
4959
+ {
4960
+ "name": "zoomMargin",
4961
+ "description": "Margin in pixels from viewport edges when zoomed. Default is 0.",
4962
+ "type": "number"
4963
+ },
4964
+ {
4965
+ "name": "expandButtonAriaLabel",
4966
+ "description": "Accessible label for the zoom trigger. Default is 'Expand image'.",
4967
+ "type": "string"
4968
+ },
4969
+ {
4970
+ "name": "unzoomButtonAriaLabel",
4971
+ "description": "Accessible label for the unzoom button. Default is 'Minimize image'.",
4972
+ "type": "string"
4973
+ },
4974
+ {
4975
+ "name": "canSwipeToUnzoom",
4976
+ "description": "Enables swipe gesture to close when zoomed. Default is true.",
4977
+ "type": "boolean"
4978
+ },
4979
+ {
4980
+ "name": "swipeToUnzoomThreshold",
4981
+ "description": "Swipe distance in pixels required to trigger unzoom. Default is 10.",
4982
+ "type": "number"
4983
+ },
4984
+ {
4985
+ "name": "zoomSrc",
4986
+ "description": "URL of a higher quality image to display when zoomed. Falls back to the slotted image src.",
4987
+ "type": "string"
4988
+ },
4989
+ {
4990
+ "name": "hideButtons",
4991
+ "description": "Hides the expand and unzoom buttons. Default is false.",
4992
+ "type": "boolean"
4993
+ }
4994
+ ],
4995
+ "events": [
4996
+ {
4997
+ "name": "dds-zoom",
4998
+ "type": "CustomEvent",
4999
+ "description": "Fires when the image is about to zoom. Cancelable via event.preventDefault()."
5000
+ },
5001
+ {
5002
+ "name": "dds-unzoom",
5003
+ "type": "CustomEvent",
5004
+ "description": "Fires after the image has unzoomed."
5005
+ }
5006
+ ]
4876
5007
  }
4877
5008
  },
4878
5009
  {
@@ -7913,279 +8044,75 @@
7913
8044
  "type": "boolean"
7914
8045
  },
7915
8046
  {
7916
- "name": "autofocus",
7917
- "description": "Whether the search is autofocus.",
7918
- "type": "boolean"
7919
- },
7920
- {
7921
- "name": "clearButton",
7922
- "description": "Whether the search is clearable. Default is 'true'.",
7923
- "type": "string"
7924
- },
7925
- {
7926
- "name": "feedback",
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-sidenav-group",
7991
- "description": "Side navigation group\n---\n\n\n### **Slots:**\n - _default_ - The content of the side navigation group.\n- **submenu** - The submenu of the side navigation group.\n- **suffix** - The suffix of the side navigation group.\n\n### **CSS Properties:**\n - **--dds-sidenav-group-margin-bottom** - Default bottom margin of the sidenav group (default: var(--dds-spacing-100)) _(default: undefined)_\n- **--dds-sidenav-group-border-radius** - Border radius of the sidenav group (default: var(--dds-radius-base)) _(default: undefined)_\n- **--dds-sidenav-group-spacing-margin** - Margin used for spacing variants (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-sidenav-group-item-min-height-xs** - Minimum height of the sidenav group item (default: var(--dds-spacing-800)) _(default: undefined)_\n- **--dds-sidenav-group-item-min-height-sm** - Minimum height of the sidenav group item (default: var(--dds-spacing-1000)) _(default: undefined)_\n- **--dds-sidenav-group-item-min-height-lg** - Minimum height of the sidenav group item (default: var(--dds-spacing-1200)) _(default: undefined)_\n- **--dds-sidenav-group-item-padding-xs** - Padding of the sidenav group item (default: var(--dds-spacing-100) var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-sidenav-group-item-padding-sm** - Padding of the sidenav group item (default: var(--dds-spacing-200) var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-sidenav-group-item-padding-lg** - Padding of the sidenav group item (default: var(--dds-spacing-300) var(--dds-spacing-500)) _(default: undefined)_\n- **--dds-sidenav-group-item-color** - Text color of the sidenav group item (default: var(--dds-text-neutral-base)) _(default: undefined)_\n- **--dds-sidenav-group-item-font-size-xs** - Font size of the sidenav group item (default: var(--dds-font-sm)) _(default: undefined)_\n- **--dds-sidenav-group-item-font-size-sm** - Font size of the sidenav group item (default: var(--dds-font-base)) _(default: undefined)_\n- **--dds-sidenav-group-item-font-size-lg** - Font size of the sidenav group item (default: var(--dds-font-lg)) _(default: undefined)_\n- **--dds-sidenav-group-item-font-weight** - Font weight of the sidenav group item (default: var(--dds-font-weight-medium)) _(default: undefined)_\n- **--dds-sidenav-group-item-bg-active** - Background color when the item is active (default: var(--dds-transparent-black-subtle)) _(default: undefined)_\n- **--dds-sidenav-group-item-bg-hover** - Background color on hover and active states (default: var(--dds-transparent-black-base)) _(default: undefined)_\n- **--dds-sidenav-group-toggle-margin** - Margin for the toggle button (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-sidenav-group-submenu-padding** - Padding for the submenu (default: var(--dds-spacing-300) 0) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main side navigation group container.\n- **title** - The title of the side navigation group.\n- **link** - The link of the side navigation group.\n- **toggle** - The toggle button of the side navigation group.\n- **submenu** - The submenu of the side navigation group.",
7992
- "doc-url": "",
7993
- "attributes": [
7994
- {
7995
- "name": "href",
7996
- "description": "The href of the side navigation item",
7997
- "value": { "type": "string" }
7998
- },
7999
- {
8000
- "name": "active",
8001
- "description": "Whether the side navigation item is active",
8002
- "value": { "type": "boolean", "default": "false" }
8003
- },
8004
- {
8005
- "name": "spacing",
8006
- "description": "The spacing of the side navigation item",
8007
- "value": {
8008
- "type": "'top' | 'bottom' | 'both' | 'none'",
8009
- "default": "'none'"
8010
- }
8011
- },
8012
- {
8013
- "name": "open",
8014
- "description": "Whether the side navigation group is open",
8015
- "value": { "type": "boolean", "default": "false" }
8016
- },
8017
- {
8018
- "name": "size",
8019
- "description": "The size of the side navigation group",
8020
- "value": { "type": "'xs' | 'sm' | 'lg'", "default": "'xs'" }
8021
- }
8022
- ],
8023
- "slots": [
8024
- {
8025
- "name": "",
8026
- "description": "The content of the side navigation group."
8027
- },
8028
- {
8029
- "name": "submenu",
8030
- "description": "The submenu of the side navigation group."
8031
- },
8032
- {
8033
- "name": "suffix",
8034
- "description": "The suffix of the side navigation group."
8035
- }
8036
- ],
8037
- "events": [],
8038
- "js": {
8039
- "properties": [
8040
- {
8041
- "name": "href",
8042
- "description": "The href of the side navigation item",
8043
- "type": "string"
8044
- },
8045
- {
8046
- "name": "active",
8047
- "description": "Whether the side navigation item is active",
8048
- "type": "boolean"
8049
- },
8050
- {
8051
- "name": "spacing",
8052
- "description": "The spacing of the side navigation item",
8053
- "type": "'top' | 'bottom' | 'both' | 'none'"
8054
- },
8055
- {
8056
- "name": "open",
8057
- "description": "Whether the side navigation group is open",
8058
- "type": "boolean"
8059
- },
8060
- {
8061
- "name": "size",
8062
- "description": "The size of the side navigation group",
8063
- "type": "'xs' | 'sm' | 'lg'"
8064
- }
8065
- ],
8066
- "events": []
8067
- }
8068
- },
8069
- {
8070
- "name": "dap-ds-sidenav-item",
8071
- "description": "Side navigation item\n---\n\n\n### **Slots:**\n - _default_ - The content of the side navigation item.\n- **suffix** - The suffix of the side navigation item.\n\n### **CSS Properties:**\n - **--dds-sidenav-item-min-height-xs** - Minimum height of the sidenav item (default: var(--dds-spacing-800)) _(default: undefined)_\n- **--dds-sidenav-item-min-height-sm** - Minimum height of the sidenav item (default: var(--dds-spacing-1000)) _(default: undefined)_\n- **--dds-sidenav-item-min-height-lg** - Minimum height of the sidenav item (default: var(--dds-spacing-1200)) _(default: undefined)_\n- **--dds-sidenav-item-margin-bottom** - Default bottom margin of the sidenav item (default: var(--dds-spacing-100)) _(default: undefined)_\n- **--dds-sidenav-item-padding-xs** - Padding of the sidenav item (default: var(--dds-spacing-100) var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-sidenav-item-padding-sm** - Padding of the sidenav item (default: var(--dds-spacing-200) var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-sidenav-item-padding-lg** - Padding of the sidenav item (default: var(--dds-spacing-300) var(--dds-spacing-500)) _(default: undefined)_\n- **--dds-sidenav-item-radius** - Border radius of the sidenav item (default: var(--dds-radius-base)) _(default: undefined)_\n- **--dds-sidenav-item-color** - Text color of the sidenav item (default: var(--dds-text-neutral-base)) _(default: undefined)_\n- **--dds-sidenav-item-font-size-xs** - Font size of the sidenav item (default: var(--dds-font-sm)) _(default: undefined)_\n- **--dds-sidenav-item-font-size-sm** - Font size of the sidenav item (default: var(--dds-font-base)) _(default: undefined)_\n- **--dds-sidenav-item-font-size-lg** - Font size of the sidenav item (default: var(--dds-font-lg)) _(default: undefined)_\n- **--dds-sidenav-item-font-weight** - Font weight of the sidenav item (default: var(--dds-font-weight-medium)) _(default: undefined)_\n- **--dds-sidenav-item-spacing-margin** - Margin used for spacing variants (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-sidenav-item-bg-active** - Background color when the item is active (default: var(--dds-transparent-black-subtle)) _(default: undefined)_\n- **--dds-sidenav-item-bg-hover** - Background color on hover and active states (default: var(--dds-transparent-black-base)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main side navigation item container.\n- **link** - The link of the side navigation item.",
8072
- "doc-url": "",
8073
- "attributes": [
8074
- {
8075
- "name": "href",
8076
- "description": "The href of the side navigation item",
8077
- "value": { "type": "string" }
8078
- },
8079
- {
8080
- "name": "active",
8081
- "description": "Whether the side navigation item is active",
8082
- "value": { "type": "boolean", "default": "false" }
8083
- },
8084
- {
8085
- "name": "spacing",
8086
- "description": "The spacing of the side navigation item",
8087
- "value": {
8088
- "type": "'top' | 'bottom' | 'both' | 'none'",
8089
- "default": "'none'"
8090
- }
8091
- },
8092
- {
8093
- "name": "size",
8094
- "description": "The size of the side navigation item",
8095
- "value": { "type": "'xs' | 'sm' | 'lg'", "default": "'xs'" }
8096
- }
8097
- ],
8098
- "slots": [
8099
- {
8100
- "name": "",
8101
- "description": "The content of the side navigation item."
8102
- },
8103
- {
8104
- "name": "suffix",
8105
- "description": "The suffix of the side navigation item."
8106
- }
8107
- ],
8108
- "events": [],
8109
- "js": {
8110
- "properties": [
8111
- {
8112
- "name": "href",
8113
- "description": "The href of the side navigation item",
8114
- "type": "string"
8115
- },
8116
- {
8117
- "name": "active",
8118
- "description": "Whether the side navigation item is active",
8119
- "type": "boolean"
8120
- },
8121
- {
8122
- "name": "spacing",
8123
- "description": "The spacing of the side navigation item",
8124
- "type": "'top' | 'bottom' | 'both' | 'none'"
8125
- },
8126
- {
8127
- "name": "size",
8128
- "description": "The size of the side navigation item",
8129
- "type": "'xs' | 'sm' | 'lg'"
8130
- }
8131
- ],
8132
- "events": []
8133
- }
8134
- },
8135
- {
8136
- "name": "dap-ds-sidenav",
8137
- "description": "Side navigation is a list of links that are used to navigate to different sections of a page.\n---\n\n\n### **Events:**\n - **dds-item-click** - Event fired when the side navigation item is clicked.\n\n### **Slots:**\n - _default_ - The content of the side navigation.\n\n### **CSS Parts:**\n - **base** - The main side navigation container.\n- **menu** - The menu of the side navigation.",
8138
- "doc-url": "",
8139
- "attributes": [
8140
- {
8141
- "name": "label",
8142
- "description": "The label of the side navigation, if aria label is not provided, it will be used as aria label",
8143
- "value": { "type": "string" }
8144
- },
8145
- {
8146
- "name": "activeHref",
8147
- "description": "The active href of the side navigation, to explicitly set the active item, if not provided, it will be set based on the current location",
8148
- "value": { "type": "string" }
8149
- },
8150
- {
8151
- "name": "size",
8152
- "description": "The size of the side navigation",
8153
- "value": { "type": "'xs' | 'sm' | 'lg'", "default": "'xs'" }
8154
- }
8155
- ],
8156
- "slots": [
8157
- { "name": "", "description": "The content of the side navigation." }
8158
- ],
8159
- "events": [
8160
- {
8161
- "name": "dds-item-click",
8162
- "type": "{ href: string, event: Event }",
8163
- "description": "Event fired when the side navigation item is clicked."
8164
- }
8165
- ],
8166
- "js": {
8167
- "properties": [
8047
+ "name": "autofocus",
8048
+ "description": "Whether the search is autofocus.",
8049
+ "type": "boolean"
8050
+ },
8168
8051
  {
8169
- "name": "label",
8170
- "description": "The label of the side navigation, if aria label is not provided, it will be used as aria label",
8052
+ "name": "clearButton",
8053
+ "description": "Whether the search is clearable. Default is 'true'.",
8171
8054
  "type": "string"
8172
8055
  },
8173
8056
  {
8174
- "name": "activeHref",
8175
- "description": "The active href of the side navigation, to explicitly set the active item, if not provided, it will be set based on the current location",
8057
+ "name": "feedback",
8058
+ "description": "The feedback content of the search.",
8176
8059
  "type": "string"
8177
8060
  },
8178
8061
  {
8179
- "name": "size",
8180
- "description": "The size of the side navigation",
8181
- "type": "'xs' | 'sm' | 'lg'"
8062
+ "name": "feedbackType",
8063
+ "description": "The feedback type of the search.",
8064
+ "type": "'negative' | 'positive' | 'warning' | 'info'"
8065
+ },
8066
+ {
8067
+ "name": "allowManualInput",
8068
+ "description": "Whether the search allows manual input, or free text.",
8069
+ "type": "boolean"
8070
+ },
8071
+ {
8072
+ "name": "searchForText",
8073
+ "description": "Whether the search should search for the selected item text.",
8074
+ "type": "boolean"
8075
+ },
8076
+ {
8077
+ "name": "searchButtonAriaLabel",
8078
+ "description": "The aria label of the search button.",
8079
+ "type": "string"
8080
+ },
8081
+ {
8082
+ "name": "openOnEmpty",
8083
+ "description": "Whether the search should open on empty results.",
8084
+ "type": "boolean"
8085
+ },
8086
+ {
8087
+ "name": "subtle",
8088
+ "description": "Subtle color version",
8089
+ "type": "boolean"
8182
8090
  }
8183
8091
  ],
8184
8092
  "events": [
8185
8093
  {
8186
- "name": "dds-item-click",
8187
- "type": "{ href: string, event: Event }",
8188
- "description": "Event fired when the side navigation item is clicked."
8094
+ "name": "dds-change",
8095
+ "description": "Fired when the search value changes."
8096
+ },
8097
+ {
8098
+ "name": "dds-blur",
8099
+ "description": "Emitted when the search loses focus."
8100
+ },
8101
+ {
8102
+ "name": "dds-focus",
8103
+ "description": "Emitted when the search gains focus."
8104
+ },
8105
+ {
8106
+ "name": "dds-clear",
8107
+ "description": "Emitted when the search is cleared."
8108
+ },
8109
+ {
8110
+ "name": "dds-search",
8111
+ "description": "Emitted when the search input value changes."
8112
+ },
8113
+ {
8114
+ "name": "dds-input",
8115
+ "description": "Emitted when typing happens in the search input."
8189
8116
  }
8190
8117
  ]
8191
8118
  }
@@ -8387,73 +8314,356 @@
8387
8314
  "type": "boolean"
8388
8315
  },
8389
8316
  {
8390
- "name": "readonly",
8391
- "description": "Whether the select is readonly.",
8392
- "type": "boolean"
8317
+ "name": "readonly",
8318
+ "description": "Whether the select is readonly.",
8319
+ "type": "boolean"
8320
+ },
8321
+ {
8322
+ "name": "autofocus",
8323
+ "description": "Whether the select is autofocus.",
8324
+ "type": "boolean"
8325
+ },
8326
+ {
8327
+ "name": "feedback",
8328
+ "description": "The feedback of the select.",
8329
+ "type": "string"
8330
+ },
8331
+ {
8332
+ "name": "feedbackType",
8333
+ "description": "The feedback type of the select. Can be `negative`, `positive`, or `warning`.",
8334
+ "type": "negative | positive | warning"
8335
+ },
8336
+ {
8337
+ "name": "status",
8338
+ "description": "The status of the select. Can be `success` or `error`.",
8339
+ "type": "string"
8340
+ },
8341
+ {
8342
+ "name": "optional",
8343
+ "description": "The optional state of the select.",
8344
+ "type": "boolean"
8345
+ },
8346
+ {
8347
+ "name": "optionalLabel",
8348
+ "description": "The optional label of the select.",
8349
+ "type": "string"
8350
+ },
8351
+ {
8352
+ "name": "subtle",
8353
+ "description": "The weight of the label. Default is `false`",
8354
+ "type": "boolean"
8355
+ }
8356
+ ],
8357
+ "events": [
8358
+ {
8359
+ "name": "dds-change",
8360
+ "type": "{ value: string }",
8361
+ "description": "Fired when the select value changes."
8362
+ },
8363
+ {
8364
+ "name": "dds-blur",
8365
+ "type": "{ void }",
8366
+ "description": "Emitted when the select loses focus."
8367
+ },
8368
+ {
8369
+ "name": "dds-focus",
8370
+ "type": "{ void }",
8371
+ "description": "Emitted when the select gains focus."
8372
+ },
8373
+ {
8374
+ "name": "dds-opened",
8375
+ "type": "{ void }",
8376
+ "description": "Emitted when the select dropdown is opened."
8377
+ },
8378
+ {
8379
+ "name": "dds-closed",
8380
+ "type": "{ void }",
8381
+ "description": "Emitted when the select dropdown is closed."
8382
+ }
8383
+ ]
8384
+ }
8385
+ },
8386
+ {
8387
+ "name": "dap-ds-sidenav-group",
8388
+ "description": "Side navigation group\n---\n\n\n### **Slots:**\n - _default_ - The content of the side navigation group.\n- **submenu** - The submenu of the side navigation group.\n- **suffix** - The suffix of the side navigation group.\n\n### **CSS Properties:**\n - **--dds-sidenav-group-margin-bottom** - Default bottom margin of the sidenav group (default: var(--dds-spacing-100)) _(default: undefined)_\n- **--dds-sidenav-group-border-radius** - Border radius of the sidenav group (default: var(--dds-radius-base)) _(default: undefined)_\n- **--dds-sidenav-group-spacing-margin** - Margin used for spacing variants (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-sidenav-group-item-min-height-xs** - Minimum height of the sidenav group item (default: var(--dds-spacing-800)) _(default: undefined)_\n- **--dds-sidenav-group-item-min-height-sm** - Minimum height of the sidenav group item (default: var(--dds-spacing-1000)) _(default: undefined)_\n- **--dds-sidenav-group-item-min-height-lg** - Minimum height of the sidenav group item (default: var(--dds-spacing-1200)) _(default: undefined)_\n- **--dds-sidenav-group-item-padding-xs** - Padding of the sidenav group item (default: var(--dds-spacing-100) var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-sidenav-group-item-padding-sm** - Padding of the sidenav group item (default: var(--dds-spacing-200) var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-sidenav-group-item-padding-lg** - Padding of the sidenav group item (default: var(--dds-spacing-300) var(--dds-spacing-500)) _(default: undefined)_\n- **--dds-sidenav-group-item-color** - Text color of the sidenav group item (default: var(--dds-text-neutral-base)) _(default: undefined)_\n- **--dds-sidenav-group-item-font-size-xs** - Font size of the sidenav group item (default: var(--dds-font-sm)) _(default: undefined)_\n- **--dds-sidenav-group-item-font-size-sm** - Font size of the sidenav group item (default: var(--dds-font-base)) _(default: undefined)_\n- **--dds-sidenav-group-item-font-size-lg** - Font size of the sidenav group item (default: var(--dds-font-lg)) _(default: undefined)_\n- **--dds-sidenav-group-item-font-weight** - Font weight of the sidenav group item (default: var(--dds-font-weight-medium)) _(default: undefined)_\n- **--dds-sidenav-group-item-bg-active** - Background color when the item is active (default: var(--dds-transparent-black-subtle)) _(default: undefined)_\n- **--dds-sidenav-group-item-bg-hover** - Background color on hover and active states (default: var(--dds-transparent-black-base)) _(default: undefined)_\n- **--dds-sidenav-group-toggle-margin** - Margin for the toggle button (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-sidenav-group-submenu-padding** - Padding for the submenu (default: var(--dds-spacing-300) 0) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main side navigation group container.\n- **title** - The title of the side navigation group.\n- **link** - The link of the side navigation group.\n- **toggle** - The toggle button of the side navigation group.\n- **submenu** - The submenu of the side navigation group.",
8389
+ "doc-url": "",
8390
+ "attributes": [
8391
+ {
8392
+ "name": "href",
8393
+ "description": "The href of the side navigation item",
8394
+ "value": { "type": "string" }
8395
+ },
8396
+ {
8397
+ "name": "active",
8398
+ "description": "Whether the side navigation item is active",
8399
+ "value": { "type": "boolean", "default": "false" }
8400
+ },
8401
+ {
8402
+ "name": "spacing",
8403
+ "description": "The spacing of the side navigation item",
8404
+ "value": {
8405
+ "type": "'top' | 'bottom' | 'both' | 'none'",
8406
+ "default": "'none'"
8407
+ }
8408
+ },
8409
+ {
8410
+ "name": "open",
8411
+ "description": "Whether the side navigation group is open",
8412
+ "value": { "type": "boolean", "default": "false" }
8413
+ },
8414
+ {
8415
+ "name": "size",
8416
+ "description": "The size of the side navigation group",
8417
+ "value": { "type": "'xs' | 'sm' | 'lg'", "default": "'xs'" }
8418
+ }
8419
+ ],
8420
+ "slots": [
8421
+ {
8422
+ "name": "",
8423
+ "description": "The content of the side navigation group."
8424
+ },
8425
+ {
8426
+ "name": "submenu",
8427
+ "description": "The submenu of the side navigation group."
8428
+ },
8429
+ {
8430
+ "name": "suffix",
8431
+ "description": "The suffix of the side navigation group."
8432
+ }
8433
+ ],
8434
+ "events": [],
8435
+ "js": {
8436
+ "properties": [
8437
+ {
8438
+ "name": "href",
8439
+ "description": "The href of the side navigation item",
8440
+ "type": "string"
8441
+ },
8442
+ {
8443
+ "name": "active",
8444
+ "description": "Whether the side navigation item is active",
8445
+ "type": "boolean"
8446
+ },
8447
+ {
8448
+ "name": "spacing",
8449
+ "description": "The spacing of the side navigation item",
8450
+ "type": "'top' | 'bottom' | 'both' | 'none'"
8451
+ },
8452
+ {
8453
+ "name": "open",
8454
+ "description": "Whether the side navigation group is open",
8455
+ "type": "boolean"
8456
+ },
8457
+ {
8458
+ "name": "size",
8459
+ "description": "The size of the side navigation group",
8460
+ "type": "'xs' | 'sm' | 'lg'"
8461
+ }
8462
+ ],
8463
+ "events": []
8464
+ }
8465
+ },
8466
+ {
8467
+ "name": "dap-ds-sidenav-item",
8468
+ "description": "Side navigation item\n---\n\n\n### **Slots:**\n - _default_ - The content of the side navigation item.\n- **suffix** - The suffix of the side navigation item.\n\n### **CSS Properties:**\n - **--dds-sidenav-item-min-height-xs** - Minimum height of the sidenav item (default: var(--dds-spacing-800)) _(default: undefined)_\n- **--dds-sidenav-item-min-height-sm** - Minimum height of the sidenav item (default: var(--dds-spacing-1000)) _(default: undefined)_\n- **--dds-sidenav-item-min-height-lg** - Minimum height of the sidenav item (default: var(--dds-spacing-1200)) _(default: undefined)_\n- **--dds-sidenav-item-margin-bottom** - Default bottom margin of the sidenav item (default: var(--dds-spacing-100)) _(default: undefined)_\n- **--dds-sidenav-item-padding-xs** - Padding of the sidenav item (default: var(--dds-spacing-100) var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-sidenav-item-padding-sm** - Padding of the sidenav item (default: var(--dds-spacing-200) var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-sidenav-item-padding-lg** - Padding of the sidenav item (default: var(--dds-spacing-300) var(--dds-spacing-500)) _(default: undefined)_\n- **--dds-sidenav-item-radius** - Border radius of the sidenav item (default: var(--dds-radius-base)) _(default: undefined)_\n- **--dds-sidenav-item-color** - Text color of the sidenav item (default: var(--dds-text-neutral-base)) _(default: undefined)_\n- **--dds-sidenav-item-font-size-xs** - Font size of the sidenav item (default: var(--dds-font-sm)) _(default: undefined)_\n- **--dds-sidenav-item-font-size-sm** - Font size of the sidenav item (default: var(--dds-font-base)) _(default: undefined)_\n- **--dds-sidenav-item-font-size-lg** - Font size of the sidenav item (default: var(--dds-font-lg)) _(default: undefined)_\n- **--dds-sidenav-item-font-weight** - Font weight of the sidenav item (default: var(--dds-font-weight-medium)) _(default: undefined)_\n- **--dds-sidenav-item-spacing-margin** - Margin used for spacing variants (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-sidenav-item-bg-active** - Background color when the item is active (default: var(--dds-transparent-black-subtle)) _(default: undefined)_\n- **--dds-sidenav-item-bg-hover** - Background color on hover and active states (default: var(--dds-transparent-black-base)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main side navigation item container.\n- **link** - The link of the side navigation item.",
8469
+ "doc-url": "",
8470
+ "attributes": [
8471
+ {
8472
+ "name": "href",
8473
+ "description": "The href of the side navigation item",
8474
+ "value": { "type": "string" }
8475
+ },
8476
+ {
8477
+ "name": "active",
8478
+ "description": "Whether the side navigation item is active",
8479
+ "value": { "type": "boolean", "default": "false" }
8480
+ },
8481
+ {
8482
+ "name": "spacing",
8483
+ "description": "The spacing of the side navigation item",
8484
+ "value": {
8485
+ "type": "'top' | 'bottom' | 'both' | 'none'",
8486
+ "default": "'none'"
8487
+ }
8488
+ },
8489
+ {
8490
+ "name": "size",
8491
+ "description": "The size of the side navigation item",
8492
+ "value": { "type": "'xs' | 'sm' | 'lg'", "default": "'xs'" }
8493
+ }
8494
+ ],
8495
+ "slots": [
8496
+ {
8497
+ "name": "",
8498
+ "description": "The content of the side navigation item."
8499
+ },
8500
+ {
8501
+ "name": "suffix",
8502
+ "description": "The suffix of the side navigation item."
8503
+ }
8504
+ ],
8505
+ "events": [],
8506
+ "js": {
8507
+ "properties": [
8508
+ {
8509
+ "name": "href",
8510
+ "description": "The href of the side navigation item",
8511
+ "type": "string"
8393
8512
  },
8394
8513
  {
8395
- "name": "autofocus",
8396
- "description": "Whether the select is autofocus.",
8514
+ "name": "active",
8515
+ "description": "Whether the side navigation item is active",
8397
8516
  "type": "boolean"
8398
8517
  },
8399
8518
  {
8400
- "name": "feedback",
8401
- "description": "The feedback of the select.",
8402
- "type": "string"
8519
+ "name": "spacing",
8520
+ "description": "The spacing of the side navigation item",
8521
+ "type": "'top' | 'bottom' | 'both' | 'none'"
8403
8522
  },
8404
8523
  {
8405
- "name": "feedbackType",
8406
- "description": "The feedback type of the select. Can be `negative`, `positive`, or `warning`.",
8407
- "type": "negative | positive | warning"
8408
- },
8524
+ "name": "size",
8525
+ "description": "The size of the side navigation item",
8526
+ "type": "'xs' | 'sm' | 'lg'"
8527
+ }
8528
+ ],
8529
+ "events": []
8530
+ }
8531
+ },
8532
+ {
8533
+ "name": "dap-ds-sidenav",
8534
+ "description": "Side navigation is a list of links that are used to navigate to different sections of a page.\n---\n\n\n### **Events:**\n - **dds-item-click** - Event fired when the side navigation item is clicked.\n\n### **Slots:**\n - _default_ - The content of the side navigation.\n\n### **CSS Parts:**\n - **base** - The main side navigation container.\n- **menu** - The menu of the side navigation.",
8535
+ "doc-url": "",
8536
+ "attributes": [
8537
+ {
8538
+ "name": "label",
8539
+ "description": "The label of the side navigation, if aria label is not provided, it will be used as aria label",
8540
+ "value": { "type": "string" }
8541
+ },
8542
+ {
8543
+ "name": "activeHref",
8544
+ "description": "The active href of the side navigation, to explicitly set the active item, if not provided, it will be set based on the current location",
8545
+ "value": { "type": "string" }
8546
+ },
8547
+ {
8548
+ "name": "size",
8549
+ "description": "The size of the side navigation",
8550
+ "value": { "type": "'xs' | 'sm' | 'lg'", "default": "'xs'" }
8551
+ }
8552
+ ],
8553
+ "slots": [
8554
+ { "name": "", "description": "The content of the side navigation." }
8555
+ ],
8556
+ "events": [
8557
+ {
8558
+ "name": "dds-item-click",
8559
+ "type": "{ href: string, event: Event }",
8560
+ "description": "Event fired when the side navigation item is clicked."
8561
+ }
8562
+ ],
8563
+ "js": {
8564
+ "properties": [
8409
8565
  {
8410
- "name": "status",
8411
- "description": "The status of the select. Can be `success` or `error`.",
8566
+ "name": "label",
8567
+ "description": "The label of the side navigation, if aria label is not provided, it will be used as aria label",
8412
8568
  "type": "string"
8413
8569
  },
8414
8570
  {
8415
- "name": "optional",
8416
- "description": "The optional state of the select.",
8417
- "type": "boolean"
8418
- },
8419
- {
8420
- "name": "optionalLabel",
8421
- "description": "The optional label of the select.",
8571
+ "name": "activeHref",
8572
+ "description": "The active href of the side navigation, to explicitly set the active item, if not provided, it will be set based on the current location",
8422
8573
  "type": "string"
8423
8574
  },
8424
8575
  {
8425
- "name": "subtle",
8426
- "description": "The weight of the label. Default is `false`",
8427
- "type": "boolean"
8576
+ "name": "size",
8577
+ "description": "The size of the side navigation",
8578
+ "type": "'xs' | 'sm' | 'lg'"
8428
8579
  }
8429
8580
  ],
8430
8581
  "events": [
8431
8582
  {
8432
- "name": "dds-change",
8433
- "type": "{ value: string }",
8434
- "description": "Fired when the select value changes."
8583
+ "name": "dds-item-click",
8584
+ "type": "{ href: string, event: Event }",
8585
+ "description": "Event fired when the side navigation item is clicked."
8586
+ }
8587
+ ]
8588
+ }
8589
+ },
8590
+ {
8591
+ "name": "dap-ds-skeleton",
8592
+ "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.",
8593
+ "doc-url": "",
8594
+ "attributes": [
8595
+ {
8596
+ "name": "variant",
8597
+ "description": "The variant of the skeleton.",
8598
+ "value": {
8599
+ "type": "\"text\" | \"circular\" | \"rectangular\"",
8600
+ "default": "'text'"
8601
+ }
8602
+ },
8603
+ {
8604
+ "name": "width",
8605
+ "description": "The width of the skeleton. Can be any valid CSS width value.",
8606
+ "value": { "type": "string | undefined" }
8607
+ },
8608
+ {
8609
+ "name": "height",
8610
+ "description": "The height of the skeleton. Can be any valid CSS height value.",
8611
+ "value": { "type": "string | undefined" }
8612
+ },
8613
+ {
8614
+ "name": "noAnimation",
8615
+ "description": "Whether to animate the skeleton.",
8616
+ "value": { "type": "boolean", "default": "false" }
8617
+ },
8618
+ {
8619
+ "name": "animation",
8620
+ "description": "The animation type for the skeleton.",
8621
+ "value": {
8622
+ "type": "\"wave\" | \"pulse\" | \"custom\"",
8623
+ "default": "'wave'"
8624
+ }
8625
+ },
8626
+ {
8627
+ "name": "custom-keyframes",
8628
+ "description": "Custom keyframes for the animation when animation=\"custom\".\nShould be a valid CSS keyframes string without the",
8629
+ "value": { "type": "string | undefined" }
8630
+ }
8631
+ ],
8632
+ "events": [],
8633
+ "js": {
8634
+ "properties": [
8635
+ {
8636
+ "name": "variant",
8637
+ "description": "The variant of the skeleton.",
8638
+ "type": "\"text\" | \"circular\" | \"rectangular\""
8435
8639
  },
8436
8640
  {
8437
- "name": "dds-blur",
8438
- "type": "{ void }",
8439
- "description": "Emitted when the select loses focus."
8641
+ "name": "width",
8642
+ "description": "The width of the skeleton. Can be any valid CSS width value.",
8643
+ "type": "string | undefined"
8440
8644
  },
8441
8645
  {
8442
- "name": "dds-focus",
8443
- "type": "{ void }",
8444
- "description": "Emitted when the select gains focus."
8646
+ "name": "height",
8647
+ "description": "The height of the skeleton. Can be any valid CSS height value.",
8648
+ "type": "string | undefined"
8445
8649
  },
8446
8650
  {
8447
- "name": "dds-opened",
8448
- "type": "{ void }",
8449
- "description": "Emitted when the select dropdown is opened."
8651
+ "name": "noAnimation",
8652
+ "description": "Whether to animate the skeleton.",
8653
+ "type": "boolean"
8450
8654
  },
8451
8655
  {
8452
- "name": "dds-closed",
8453
- "type": "{ void }",
8454
- "description": "Emitted when the select dropdown is closed."
8656
+ "name": "animation",
8657
+ "description": "The animation type for the skeleton.",
8658
+ "type": "\"wave\" | \"pulse\" | \"custom\""
8659
+ },
8660
+ {
8661
+ "name": "customKeyframes",
8662
+ "description": "Custom keyframes for the animation when animation=\"custom\".\nShould be a valid CSS keyframes string without the",
8663
+ "type": "string | undefined"
8455
8664
  }
8456
- ]
8665
+ ],
8666
+ "events": []
8457
8667
  }
8458
8668
  },
8459
8669
  {
@@ -8652,87 +8862,8 @@
8652
8862
  },
8653
8863
  {
8654
8864
  "name": "announceMessages",
8655
- "description": "Whether the snackbar should announce new messages to screen readers",
8656
- "type": "boolean"
8657
- }
8658
- ],
8659
- "events": []
8660
- }
8661
- },
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"
8865
+ "description": "Whether the snackbar should announce new messages to screen readers",
8866
+ "type": "boolean"
8736
8867
  }
8737
8868
  ],
8738
8869
  "events": []
@@ -9060,6 +9191,97 @@
9060
9191
  ]
9061
9192
  }
9062
9193
  },
9194
+ {
9195
+ "name": "dap-ds-tab-group",
9196
+ "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.",
9197
+ "doc-url": "",
9198
+ "attributes": [
9199
+ {
9200
+ "name": "selectedTabId",
9201
+ "description": "The selected tab id.",
9202
+ "value": { "type": "string" }
9203
+ },
9204
+ {
9205
+ "name": "size",
9206
+ "description": "The size of the tab buttons. Default is `sm`. Can be `sm` or `lg`.",
9207
+ "value": { "type": "'sm' | 'lg'", "default": "'sm'" }
9208
+ },
9209
+ {
9210
+ "name": "mobile",
9211
+ "description": "If true, the tab group will be displayed in mobile mode.",
9212
+ "value": { "type": "boolean", "default": "false" }
9213
+ }
9214
+ ],
9215
+ "slots": [{ "name": "", "description": "The tab items." }],
9216
+ "events": [
9217
+ {
9218
+ "name": "dds-tab-select",
9219
+ "description": "Fired when select a new tab."
9220
+ }
9221
+ ],
9222
+ "js": {
9223
+ "properties": [
9224
+ {
9225
+ "name": "selectedTabId",
9226
+ "description": "The selected tab id.",
9227
+ "type": "string"
9228
+ },
9229
+ {
9230
+ "name": "size",
9231
+ "description": "The size of the tab buttons. Default is `sm`. Can be `sm` or `lg`.",
9232
+ "type": "'sm' | 'lg'"
9233
+ },
9234
+ {
9235
+ "name": "mobile",
9236
+ "description": "If true, the tab group will be displayed in mobile mode.",
9237
+ "type": "boolean"
9238
+ }
9239
+ ],
9240
+ "events": [
9241
+ {
9242
+ "name": "dds-tab-select",
9243
+ "description": "Fired when select a new tab."
9244
+ }
9245
+ ]
9246
+ }
9247
+ },
9248
+ {
9249
+ "name": "dap-ds-tab",
9250
+ "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.",
9251
+ "doc-url": "",
9252
+ "attributes": [
9253
+ {
9254
+ "name": "tabId",
9255
+ "description": "The tab id. Required",
9256
+ "value": { "type": "string" }
9257
+ },
9258
+ {
9259
+ "name": "disabled",
9260
+ "description": "The disabled state of the tab.",
9261
+ "value": { "type": "boolean", "default": "false" }
9262
+ }
9263
+ ],
9264
+ "slots": [
9265
+ { "name": "", "description": "The tab title template." },
9266
+ { "name": "content", "description": "The tab content." }
9267
+ ],
9268
+ "events": [],
9269
+ "js": {
9270
+ "properties": [
9271
+ {
9272
+ "name": "tabId",
9273
+ "description": "The tab id. Required",
9274
+ "type": "string"
9275
+ },
9276
+ {
9277
+ "name": "disabled",
9278
+ "description": "The disabled state of the tab.",
9279
+ "type": "boolean"
9280
+ }
9281
+ ],
9282
+ "events": []
9283
+ }
9284
+ },
9063
9285
  {
9064
9286
  "name": "dap-ds-table-cell",
9065
9287
  "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.",
@@ -9454,6 +9676,34 @@
9454
9676
  ]
9455
9677
  }
9456
9678
  },
9679
+ {
9680
+ "name": "dap-ds-timeline-item",
9681
+ "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.",
9682
+ "doc-url": "",
9683
+ "attributes": [],
9684
+ "slots": [
9685
+ {
9686
+ "name": "",
9687
+ "description": "The default slot for the item content."
9688
+ }
9689
+ ],
9690
+ "events": [],
9691
+ "js": { "properties": [], "events": [] }
9692
+ },
9693
+ {
9694
+ "name": "dap-ds-timeline",
9695
+ "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.",
9696
+ "doc-url": "",
9697
+ "attributes": [],
9698
+ "slots": [
9699
+ {
9700
+ "name": "",
9701
+ "description": "The default slot for the timeline items."
9702
+ }
9703
+ ],
9704
+ "events": [],
9705
+ "js": { "properties": [], "events": [] }
9706
+ },
9457
9707
  {
9458
9708
  "name": "dap-ds-time-grid",
9459
9709
  "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.",
@@ -9911,153 +10161,34 @@
9911
10161
  {
9912
10162
  "name": "dds-input",
9913
10163
  "type": "{ value: string }",
9914
- "description": "Fired when the timepicker input value changes."
9915
- },
9916
- {
9917
- "name": "dds-valid-time",
9918
- "type": "{ value: Dayjs | string, hour: number, minute: number, second?: number }",
9919
- "description": "Fired when the timepicker input value is valid. Happens on manual input typing."
9920
- },
9921
- {
9922
- "name": "dds-invalid-time",
9923
- "type": "{ value: Dayjs | string, hour: number, minute: number, second?: number, type: 'invalid' | 'out-of-range' }",
9924
- "description": "Fired when the timepicker input value is invalid. Happens on manual input typing."
9925
- },
9926
- {
9927
- "name": "dds-clear",
9928
- "type": "{ void }",
9929
- "description": "Fired when the timepicker is cleared."
9930
- },
9931
- {
9932
- "name": "dds-focus",
9933
- "type": "{ void }",
9934
- "description": "Emitted when the timepicker gains focus."
9935
- },
9936
- {
9937
- "name": "dds-blur",
9938
- "type": "{ void }",
9939
- "description": "Emitted when the timepicker loses focus."
9940
- }
9941
- ]
9942
- }
9943
- },
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": [
10164
+ "description": "Fired when the timepicker input value changes."
10165
+ },
10049
10166
  {
10050
- "name": "tabId",
10051
- "description": "The tab id. Required",
10052
- "type": "string"
10167
+ "name": "dds-valid-time",
10168
+ "type": "{ value: Dayjs | string, hour: number, minute: number, second?: number }",
10169
+ "description": "Fired when the timepicker input value is valid. Happens on manual input typing."
10053
10170
  },
10054
10171
  {
10055
- "name": "disabled",
10056
- "description": "The disabled state of the tab.",
10057
- "type": "boolean"
10172
+ "name": "dds-invalid-time",
10173
+ "type": "{ value: Dayjs | string, hour: number, minute: number, second?: number, type: 'invalid' | 'out-of-range' }",
10174
+ "description": "Fired when the timepicker input value is invalid. Happens on manual input typing."
10175
+ },
10176
+ {
10177
+ "name": "dds-clear",
10178
+ "type": "{ void }",
10179
+ "description": "Fired when the timepicker is cleared."
10180
+ },
10181
+ {
10182
+ "name": "dds-focus",
10183
+ "type": "{ void }",
10184
+ "description": "Emitted when the timepicker gains focus."
10185
+ },
10186
+ {
10187
+ "name": "dds-blur",
10188
+ "type": "{ void }",
10189
+ "description": "Emitted when the timepicker loses focus."
10058
10190
  }
10059
- ],
10060
- "events": []
10191
+ ]
10061
10192
  }
10062
10193
  },
10063
10194
  {
@@ -11056,7 +11187,7 @@
11056
11187
  }
11057
11188
  },
11058
11189
  {
11059
- "name": "dap-ds-icon-arrow-left-line",
11190
+ "name": "dap-ds-icon-arrow-left-l-line",
11060
11191
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
11061
11192
  "doc-url": "",
11062
11193
  "attributes": [
@@ -11109,7 +11240,7 @@
11109
11240
  }
11110
11241
  },
11111
11242
  {
11112
- "name": "dap-ds-icon-arrow-left-l-line",
11243
+ "name": "dap-ds-icon-arrow-left-line",
11113
11244
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
11114
11245
  "doc-url": "",
11115
11246
  "attributes": [
@@ -11480,7 +11611,7 @@
11480
11611
  }
11481
11612
  },
11482
11613
  {
11483
- "name": "dap-ds-icon-arrow-right-s-line",
11614
+ "name": "dap-ds-icon-arrow-right-s-fill",
11484
11615
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
11485
11616
  "doc-url": "",
11486
11617
  "attributes": [
@@ -11533,7 +11664,7 @@
11533
11664
  }
11534
11665
  },
11535
11666
  {
11536
- "name": "dap-ds-icon-arrow-right-s-fill",
11667
+ "name": "dap-ds-icon-arrow-right-s-line",
11537
11668
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
11538
11669
  "doc-url": "",
11539
11670
  "attributes": [
@@ -11639,7 +11770,7 @@
11639
11770
  }
11640
11771
  },
11641
11772
  {
11642
- "name": "dap-ds-icon-arrow-up-line",
11773
+ "name": "dap-ds-icon-arrow-up-s-fill",
11643
11774
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
11644
11775
  "doc-url": "",
11645
11776
  "attributes": [
@@ -11692,7 +11823,7 @@
11692
11823
  }
11693
11824
  },
11694
11825
  {
11695
- "name": "dap-ds-icon-arrow-up-s-fill",
11826
+ "name": "dap-ds-icon-arrow-up-line",
11696
11827
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
11697
11828
  "doc-url": "",
11698
11829
  "attributes": [
@@ -11851,7 +11982,7 @@
11851
11982
  }
11852
11983
  },
11853
11984
  {
11854
- "name": "dap-ds-icon-calendar-line",
11985
+ "name": "dap-ds-icon-home-6-line",
11855
11986
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
11856
11987
  "doc-url": "",
11857
11988
  "attributes": [
@@ -11904,7 +12035,7 @@
11904
12035
  }
11905
12036
  },
11906
12037
  {
11907
- "name": "dap-ds-icon-home-6-line",
12038
+ "name": "dap-ds-icon-calendar-line",
11908
12039
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
11909
12040
  "doc-url": "",
11910
12041
  "attributes": [
@@ -12540,7 +12671,7 @@
12540
12671
  }
12541
12672
  },
12542
12673
  {
12543
- "name": "dap-ds-icon-heart-fill",
12674
+ "name": "dap-ds-icon-separator",
12544
12675
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
12545
12676
  "doc-url": "",
12546
12677
  "attributes": [
@@ -12593,7 +12724,7 @@
12593
12724
  }
12594
12725
  },
12595
12726
  {
12596
- "name": "dap-ds-icon-separator",
12727
+ "name": "dap-ds-icon-heart-fill",
12597
12728
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
12598
12729
  "doc-url": "",
12599
12730
  "attributes": [
@@ -12752,7 +12883,7 @@
12752
12883
  }
12753
12884
  },
12754
12885
  {
12755
- "name": "dap-ds-icon-account-circle-fill",
12886
+ "name": "dap-ds-icon-add-line",
12756
12887
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
12757
12888
  "doc-url": "",
12758
12889
  "attributes": [
@@ -12805,7 +12936,7 @@
12805
12936
  }
12806
12937
  },
12807
12938
  {
12808
- "name": "dap-ds-icon-account-circle-line",
12939
+ "name": "dap-ds-icon-alert-fill",
12809
12940
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
12810
12941
  "doc-url": "",
12811
12942
  "attributes": [
@@ -12858,7 +12989,7 @@
12858
12989
  }
12859
12990
  },
12860
12991
  {
12861
- "name": "dap-ds-icon-user-fill",
12992
+ "name": "dap-ds-icon-alert-line",
12862
12993
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
12863
12994
  "doc-url": "",
12864
12995
  "attributes": [
@@ -12911,7 +13042,7 @@
12911
13042
  }
12912
13043
  },
12913
13044
  {
12914
- "name": "dap-ds-icon-user-line",
13045
+ "name": "dap-ds-icon-check-line",
12915
13046
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
12916
13047
  "doc-url": "",
12917
13048
  "attributes": [
@@ -12964,7 +13095,7 @@
12964
13095
  }
12965
13096
  },
12966
13097
  {
12967
- "name": "dap-ds-icon-add-line",
13098
+ "name": "dap-ds-icon-check-line2",
12968
13099
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
12969
13100
  "doc-url": "",
12970
13101
  "attributes": [
@@ -13017,7 +13148,7 @@
13017
13148
  }
13018
13149
  },
13019
13150
  {
13020
- "name": "dap-ds-icon-alert-fill",
13151
+ "name": "dap-ds-icon-checkbox-blank-circle-fill",
13021
13152
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
13022
13153
  "doc-url": "",
13023
13154
  "attributes": [
@@ -13070,7 +13201,7 @@
13070
13201
  }
13071
13202
  },
13072
13203
  {
13073
- "name": "dap-ds-icon-alert-line",
13204
+ "name": "dap-ds-icon-checkbox-blank-circle-fill-check",
13074
13205
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
13075
13206
  "doc-url": "",
13076
13207
  "attributes": [
@@ -13123,7 +13254,7 @@
13123
13254
  }
13124
13255
  },
13125
13256
  {
13126
- "name": "dap-ds-icon-check-line",
13257
+ "name": "dap-ds-icon-checkbox-blank-circle-line",
13127
13258
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
13128
13259
  "doc-url": "",
13129
13260
  "attributes": [
@@ -13176,7 +13307,7 @@
13176
13307
  }
13177
13308
  },
13178
13309
  {
13179
- "name": "dap-ds-icon-check-line2",
13310
+ "name": "dap-ds-icon-checkbox-circle-fill",
13180
13311
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
13181
13312
  "doc-url": "",
13182
13313
  "attributes": [
@@ -13229,7 +13360,7 @@
13229
13360
  }
13230
13361
  },
13231
13362
  {
13232
- "name": "dap-ds-icon-checkbox-blank-circle-fill",
13363
+ "name": "dap-ds-icon-checkbox-circle-line",
13233
13364
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
13234
13365
  "doc-url": "",
13235
13366
  "attributes": [
@@ -13282,7 +13413,7 @@
13282
13413
  }
13283
13414
  },
13284
13415
  {
13285
- "name": "dap-ds-icon-checkbox-blank-circle-fill-check",
13416
+ "name": "dap-ds-icon-close-circle-fill",
13286
13417
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
13287
13418
  "doc-url": "",
13288
13419
  "attributes": [
@@ -13335,7 +13466,7 @@
13335
13466
  }
13336
13467
  },
13337
13468
  {
13338
- "name": "dap-ds-icon-checkbox-blank-circle-line",
13469
+ "name": "dap-ds-icon-close-fill",
13339
13470
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
13340
13471
  "doc-url": "",
13341
13472
  "attributes": [
@@ -13388,7 +13519,7 @@
13388
13519
  }
13389
13520
  },
13390
13521
  {
13391
- "name": "dap-ds-icon-checkbox-circle-fill",
13522
+ "name": "dap-ds-icon-close-circle-line",
13392
13523
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
13393
13524
  "doc-url": "",
13394
13525
  "attributes": [
@@ -13441,7 +13572,7 @@
13441
13572
  }
13442
13573
  },
13443
13574
  {
13444
- "name": "dap-ds-icon-checkbox-circle-line",
13575
+ "name": "dap-ds-icon-close-line",
13445
13576
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
13446
13577
  "doc-url": "",
13447
13578
  "attributes": [
@@ -13494,7 +13625,7 @@
13494
13625
  }
13495
13626
  },
13496
13627
  {
13497
- "name": "dap-ds-icon-close-circle-fill",
13628
+ "name": "dap-ds-icon-delete-bin-fill",
13498
13629
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
13499
13630
  "doc-url": "",
13500
13631
  "attributes": [
@@ -13547,7 +13678,7 @@
13547
13678
  }
13548
13679
  },
13549
13680
  {
13550
- "name": "dap-ds-icon-close-circle-line",
13681
+ "name": "dap-ds-icon-delete-bin-line",
13551
13682
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
13552
13683
  "doc-url": "",
13553
13684
  "attributes": [
@@ -13600,7 +13731,7 @@
13600
13731
  }
13601
13732
  },
13602
13733
  {
13603
- "name": "dap-ds-icon-close-fill",
13734
+ "name": "dap-ds-icon-download-line",
13604
13735
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
13605
13736
  "doc-url": "",
13606
13737
  "attributes": [
@@ -13653,7 +13784,7 @@
13653
13784
  }
13654
13785
  },
13655
13786
  {
13656
- "name": "dap-ds-icon-close-line",
13787
+ "name": "dap-ds-icon-error-warning-fill",
13657
13788
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
13658
13789
  "doc-url": "",
13659
13790
  "attributes": [
@@ -13706,7 +13837,7 @@
13706
13837
  }
13707
13838
  },
13708
13839
  {
13709
- "name": "dap-ds-icon-delete-bin-fill",
13840
+ "name": "dap-ds-icon-error-warning-line",
13710
13841
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
13711
13842
  "doc-url": "",
13712
13843
  "attributes": [
@@ -13759,7 +13890,7 @@
13759
13890
  }
13760
13891
  },
13761
13892
  {
13762
- "name": "dap-ds-icon-delete-bin-line",
13893
+ "name": "dap-ds-icon-external-link-line",
13763
13894
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
13764
13895
  "doc-url": "",
13765
13896
  "attributes": [
@@ -13812,7 +13943,7 @@
13812
13943
  }
13813
13944
  },
13814
13945
  {
13815
- "name": "dap-ds-icon-download-line",
13946
+ "name": "dap-ds-icon-eye-line",
13816
13947
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
13817
13948
  "doc-url": "",
13818
13949
  "attributes": [
@@ -13865,7 +13996,7 @@
13865
13996
  }
13866
13997
  },
13867
13998
  {
13868
- "name": "dap-ds-icon-error-warning-fill",
13999
+ "name": "dap-ds-icon-eye-off-line",
13869
14000
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
13870
14001
  "doc-url": "",
13871
14002
  "attributes": [
@@ -13918,7 +14049,7 @@
13918
14049
  }
13919
14050
  },
13920
14051
  {
13921
- "name": "dap-ds-icon-error-warning-line",
14052
+ "name": "dap-ds-icon-forbid-fill",
13922
14053
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
13923
14054
  "doc-url": "",
13924
14055
  "attributes": [
@@ -13971,7 +14102,7 @@
13971
14102
  }
13972
14103
  },
13973
14104
  {
13974
- "name": "dap-ds-icon-external-link-line",
14105
+ "name": "dap-ds-icon-information-2-fill",
13975
14106
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
13976
14107
  "doc-url": "",
13977
14108
  "attributes": [
@@ -14024,7 +14155,7 @@
14024
14155
  }
14025
14156
  },
14026
14157
  {
14027
- "name": "dap-ds-icon-eye-line",
14158
+ "name": "dap-ds-icon-information-fill",
14028
14159
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
14029
14160
  "doc-url": "",
14030
14161
  "attributes": [
@@ -14077,7 +14208,7 @@
14077
14208
  }
14078
14209
  },
14079
14210
  {
14080
- "name": "dap-ds-icon-eye-off-line",
14211
+ "name": "dap-ds-icon-information-line",
14081
14212
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
14082
14213
  "doc-url": "",
14083
14214
  "attributes": [
@@ -14130,7 +14261,7 @@
14130
14261
  }
14131
14262
  },
14132
14263
  {
14133
- "name": "dap-ds-icon-forbid-fill",
14264
+ "name": "dap-ds-icon-lightbulb-fill",
14134
14265
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
14135
14266
  "doc-url": "",
14136
14267
  "attributes": [
@@ -14183,7 +14314,7 @@
14183
14314
  }
14184
14315
  },
14185
14316
  {
14186
- "name": "dap-ds-icon-information-2-fill",
14317
+ "name": "dap-ds-icon-loading-spinner",
14187
14318
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
14188
14319
  "doc-url": "",
14189
14320
  "attributes": [
@@ -14236,7 +14367,7 @@
14236
14367
  }
14237
14368
  },
14238
14369
  {
14239
- "name": "dap-ds-icon-information-fill",
14370
+ "name": "dap-ds-icon-lock-fill",
14240
14371
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
14241
14372
  "doc-url": "",
14242
14373
  "attributes": [
@@ -14289,7 +14420,7 @@
14289
14420
  }
14290
14421
  },
14291
14422
  {
14292
- "name": "dap-ds-icon-information-line",
14423
+ "name": "dap-ds-icon-lock-line",
14293
14424
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
14294
14425
  "doc-url": "",
14295
14426
  "attributes": [
@@ -14342,7 +14473,7 @@
14342
14473
  }
14343
14474
  },
14344
14475
  {
14345
- "name": "dap-ds-icon-lightbulb-fill",
14476
+ "name": "dap-ds-icon-menu-line",
14346
14477
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
14347
14478
  "doc-url": "",
14348
14479
  "attributes": [
@@ -14395,7 +14526,7 @@
14395
14526
  }
14396
14527
  },
14397
14528
  {
14398
- "name": "dap-ds-icon-loading-spinner",
14529
+ "name": "dap-ds-icon-menu-line-s",
14399
14530
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
14400
14531
  "doc-url": "",
14401
14532
  "attributes": [
@@ -14448,7 +14579,7 @@
14448
14579
  }
14449
14580
  },
14450
14581
  {
14451
- "name": "dap-ds-icon-lock-fill",
14582
+ "name": "dap-ds-icon-more-2-line",
14452
14583
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
14453
14584
  "doc-url": "",
14454
14585
  "attributes": [
@@ -14501,7 +14632,7 @@
14501
14632
  }
14502
14633
  },
14503
14634
  {
14504
- "name": "dap-ds-icon-lock-line",
14635
+ "name": "dap-ds-icon-more-line",
14505
14636
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
14506
14637
  "doc-url": "",
14507
14638
  "attributes": [
@@ -14554,7 +14685,7 @@
14554
14685
  }
14555
14686
  },
14556
14687
  {
14557
- "name": "dap-ds-icon-menu-line",
14688
+ "name": "dap-ds-icon-search-line",
14558
14689
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
14559
14690
  "doc-url": "",
14560
14691
  "attributes": [
@@ -14607,7 +14738,7 @@
14607
14738
  }
14608
14739
  },
14609
14740
  {
14610
- "name": "dap-ds-icon-menu-line-s",
14741
+ "name": "dap-ds-icon-share-line",
14611
14742
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
14612
14743
  "doc-url": "",
14613
14744
  "attributes": [
@@ -14660,7 +14791,7 @@
14660
14791
  }
14661
14792
  },
14662
14793
  {
14663
- "name": "dap-ds-icon-more-2-line",
14794
+ "name": "dap-ds-icon-shield-check-fill",
14664
14795
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
14665
14796
  "doc-url": "",
14666
14797
  "attributes": [
@@ -14713,7 +14844,7 @@
14713
14844
  }
14714
14845
  },
14715
14846
  {
14716
- "name": "dap-ds-icon-more-line",
14847
+ "name": "dap-ds-icon-shield-check-line",
14717
14848
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
14718
14849
  "doc-url": "",
14719
14850
  "attributes": [
@@ -14766,7 +14897,7 @@
14766
14897
  }
14767
14898
  },
14768
14899
  {
14769
- "name": "dap-ds-icon-search-line",
14900
+ "name": "dap-ds-icon-star-fill",
14770
14901
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
14771
14902
  "doc-url": "",
14772
14903
  "attributes": [
@@ -14819,7 +14950,7 @@
14819
14950
  }
14820
14951
  },
14821
14952
  {
14822
- "name": "dap-ds-icon-share-line",
14953
+ "name": "dap-ds-icon-subtract-line",
14823
14954
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
14824
14955
  "doc-url": "",
14825
14956
  "attributes": [
@@ -14872,7 +15003,7 @@
14872
15003
  }
14873
15004
  },
14874
15005
  {
14875
- "name": "dap-ds-icon-shield-check-fill",
15006
+ "name": "dap-ds-icon-subtract-line2",
14876
15007
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
14877
15008
  "doc-url": "",
14878
15009
  "attributes": [
@@ -14925,7 +15056,7 @@
14925
15056
  }
14926
15057
  },
14927
15058
  {
14928
- "name": "dap-ds-icon-shield-check-line",
15059
+ "name": "dap-ds-icon-time-fill",
14929
15060
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
14930
15061
  "doc-url": "",
14931
15062
  "attributes": [
@@ -14978,7 +15109,7 @@
14978
15109
  }
14979
15110
  },
14980
15111
  {
14981
- "name": "dap-ds-icon-star-fill",
15112
+ "name": "dap-ds-icon-time-line",
14982
15113
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
14983
15114
  "doc-url": "",
14984
15115
  "attributes": [
@@ -15031,7 +15162,7 @@
15031
15162
  }
15032
15163
  },
15033
15164
  {
15034
- "name": "dap-ds-icon-subtract-line",
15165
+ "name": "dap-ds-icon-upload-2-fill",
15035
15166
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
15036
15167
  "doc-url": "",
15037
15168
  "attributes": [
@@ -15084,7 +15215,7 @@
15084
15215
  }
15085
15216
  },
15086
15217
  {
15087
- "name": "dap-ds-icon-subtract-line2",
15218
+ "name": "dap-ds-icon-upload-2-line",
15088
15219
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
15089
15220
  "doc-url": "",
15090
15221
  "attributes": [
@@ -15137,7 +15268,7 @@
15137
15268
  }
15138
15269
  },
15139
15270
  {
15140
- "name": "dap-ds-icon-time-fill",
15271
+ "name": "dap-ds-icon-upload-line",
15141
15272
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
15142
15273
  "doc-url": "",
15143
15274
  "attributes": [
@@ -15190,7 +15321,7 @@
15190
15321
  }
15191
15322
  },
15192
15323
  {
15193
- "name": "dap-ds-icon-time-line",
15324
+ "name": "dap-ds-icon-zoom-in-line",
15194
15325
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
15195
15326
  "doc-url": "",
15196
15327
  "attributes": [
@@ -15243,7 +15374,7 @@
15243
15374
  }
15244
15375
  },
15245
15376
  {
15246
- "name": "dap-ds-icon-upload-2-fill",
15377
+ "name": "dap-ds-icon-zoom-out-line",
15247
15378
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
15248
15379
  "doc-url": "",
15249
15380
  "attributes": [
@@ -15296,7 +15427,7 @@
15296
15427
  }
15297
15428
  },
15298
15429
  {
15299
- "name": "dap-ds-icon-upload-2-line",
15430
+ "name": "dap-ds-icon-account-circle-fill",
15300
15431
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
15301
15432
  "doc-url": "",
15302
15433
  "attributes": [
@@ -15349,7 +15480,113 @@
15349
15480
  }
15350
15481
  },
15351
15482
  {
15352
- "name": "dap-ds-icon-upload-line",
15483
+ "name": "dap-ds-icon-account-circle-line",
15484
+ "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
15485
+ "doc-url": "",
15486
+ "attributes": [
15487
+ {
15488
+ "name": "size",
15489
+ "description": "(optional) The width and height in pixels",
15490
+ "value": { "type": "number", "default": "24" }
15491
+ },
15492
+ {
15493
+ "name": "selected",
15494
+ "description": "(optional) Sets the icon color via the `fill` attribute",
15495
+ "value": { "type": "boolean | undefined", "default": "false" }
15496
+ },
15497
+ {
15498
+ "name": "accessibilityTitle",
15499
+ "description": "(optional) When using the icon standalone, make it meaningful for accessibility",
15500
+ "value": { "type": "string | undefined" }
15501
+ },
15502
+ {
15503
+ "name": "focusable",
15504
+ "description": "(optional) If `true` the icon can receive focus",
15505
+ "value": { "type": "boolean | undefined", "default": "false" }
15506
+ }
15507
+ ],
15508
+ "events": [],
15509
+ "js": {
15510
+ "properties": [
15511
+ {
15512
+ "name": "size",
15513
+ "description": "(optional) The width and height in pixels",
15514
+ "type": "number"
15515
+ },
15516
+ {
15517
+ "name": "selected",
15518
+ "description": "(optional) Sets the icon color via the `fill` attribute",
15519
+ "type": "boolean | undefined"
15520
+ },
15521
+ {
15522
+ "name": "accessibilityTitle",
15523
+ "description": "(optional) When using the icon standalone, make it meaningful for accessibility",
15524
+ "type": "string | undefined"
15525
+ },
15526
+ {
15527
+ "name": "focusable",
15528
+ "description": "(optional) If `true` the icon can receive focus",
15529
+ "type": "boolean | undefined"
15530
+ }
15531
+ ],
15532
+ "events": []
15533
+ }
15534
+ },
15535
+ {
15536
+ "name": "dap-ds-icon-user-fill",
15537
+ "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
15538
+ "doc-url": "",
15539
+ "attributes": [
15540
+ {
15541
+ "name": "size",
15542
+ "description": "(optional) The width and height in pixels",
15543
+ "value": { "type": "number", "default": "24" }
15544
+ },
15545
+ {
15546
+ "name": "selected",
15547
+ "description": "(optional) Sets the icon color via the `fill` attribute",
15548
+ "value": { "type": "boolean | undefined", "default": "false" }
15549
+ },
15550
+ {
15551
+ "name": "accessibilityTitle",
15552
+ "description": "(optional) When using the icon standalone, make it meaningful for accessibility",
15553
+ "value": { "type": "string | undefined" }
15554
+ },
15555
+ {
15556
+ "name": "focusable",
15557
+ "description": "(optional) If `true` the icon can receive focus",
15558
+ "value": { "type": "boolean | undefined", "default": "false" }
15559
+ }
15560
+ ],
15561
+ "events": [],
15562
+ "js": {
15563
+ "properties": [
15564
+ {
15565
+ "name": "size",
15566
+ "description": "(optional) The width and height in pixels",
15567
+ "type": "number"
15568
+ },
15569
+ {
15570
+ "name": "selected",
15571
+ "description": "(optional) Sets the icon color via the `fill` attribute",
15572
+ "type": "boolean | undefined"
15573
+ },
15574
+ {
15575
+ "name": "accessibilityTitle",
15576
+ "description": "(optional) When using the icon standalone, make it meaningful for accessibility",
15577
+ "type": "string | undefined"
15578
+ },
15579
+ {
15580
+ "name": "focusable",
15581
+ "description": "(optional) If `true` the icon can receive focus",
15582
+ "type": "boolean | undefined"
15583
+ }
15584
+ ],
15585
+ "events": []
15586
+ }
15587
+ },
15588
+ {
15589
+ "name": "dap-ds-icon-user-line",
15353
15590
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
15354
15591
  "doc-url": "",
15355
15592
  "attributes": [