dap-design-system 0.53.0 → 0.53.2

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.
@@ -114,249 +114,323 @@
114
114
  }
115
115
  },
116
116
  {
117
- "name": "dap-ds-anchor-heading",
118
- "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.",
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
119
  "doc-url": "",
120
120
  "attributes": [
121
121
  {
122
- "name": "variant",
123
- "description": "The variant of the heading. Default is `h2`. Can be `h1`, `h2`, `h3`, `h4`, `h5`, or `h6`.",
124
- "value": { "type": "HeadingVariant" }
122
+ "name": "autoClose",
123
+ "description": "Whether to close other accordions when one is opened.",
124
+ "value": { "type": "string", "default": "'true'" }
125
125
  },
126
126
  {
127
- "name": "label",
128
- "description": "The label of the heading.",
129
- "value": { "type": "string" }
127
+ "name": "variant",
128
+ "description": "The variant of the accordion",
129
+ "value": {
130
+ "type": "'default' | 'collapsed' | 'clean' | 'clean-collapsed'",
131
+ "default": "'default'"
132
+ }
130
133
  }
131
134
  ],
135
+ "slots": [
136
+ { "name": "", "description": "The content of the accordion group." }
137
+ ],
132
138
  "events": [],
133
139
  "js": {
134
140
  "properties": [
135
- { "name": "variant", "type": "HeadingVariant" },
136
- { "name": "label", "type": "string" },
137
- { "name": "elementId" },
138
- { "name": "anchorTitle" }
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
+ }
139
151
  ],
140
152
  "events": []
141
153
  }
142
154
  },
143
155
  {
144
- "name": "dap-ds-avatar-group",
145
- "description": "Avatar group component displays multiple avatars in an organized layout with overflow management.\n---\n\n\n### **Events:**\n - **dds-overflow-click** - Fired when the overflow indicator is clicked.\n\n### **Slots:**\n - _default_ - The avatars to display in the group.\n\n### **CSS Properties:**\n - **--dds-avatar-group-gap** - Gap between avatars in grid layout (default: 0) _(default: undefined)_\n- **--dds-avatar-group-overlap** - Overlap amount for stacked layout (default: -8px) _(default: undefined)_\n- **--dds-avatar-group-border-width** - Border width for avatars (default: var(--dds-border-width-base)) _(default: undefined)_\n- **--dds-avatar-group-border-color** - Border color for avatars (default: var(--dds-border-neutral-divider)) _(default: undefined)_\n- **--dds-avatar-group-overflow-bg** - Background color for overflow indicator (default: var(--dds-neutral-300)) _(default: undefined)_\n- **--dds-avatar-group-overflow-color** - Text color for overflow indicator (default: var(--dds-neutral-700)) _(default: undefined)_\n- **--dds-avatar-group-overflow-border** - Border for overflow indicator (default: var(--dds-avatar-group-border-width) solid var(--dds-avatar-group-border-color)) _(default: undefined)_\n- **--dds-avatar-group-size-lg** - Size for large avatars (default: var(--dds-spacing-2000)) _(default: undefined)_\n- **--dds-avatar-group-size-md** - Size for medium avatars (default: var(--dds-spacing-1600)) _(default: undefined)_\n- **--dds-avatar-group-size-sm** - Size for small avatars (default: var(--dds-spacing-1200)) _(default: undefined)_\n- **--dds-avatar-group-size-xs** - Size for extra small avatars (default: var(--dds-spacing-800)) _(default: undefined)_\n- **--dds-avatar-group-size-xxs** - Size for extra extra small avatars (default: var(--dds-spacing-400)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main container of the avatar group.\n- **avatars** - The container for the visible avatars.\n- **overflow** - The overflow indicator element.",
156
+ "name": "dap-ds-avatar",
157
+ "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.",
146
158
  "doc-url": "",
147
159
  "attributes": [
148
160
  {
149
- "name": "layout",
150
- "description": "Layout type for the avatar group",
151
- "value": { "type": "'stack' | 'grid'", "default": "'stack'" }
161
+ "name": "shape",
162
+ "description": "The shape of the avatar",
163
+ "value": {
164
+ "type": "'circle' | 'rounded' | 'square'",
165
+ "default": "'circle'"
166
+ }
152
167
  },
153
168
  {
154
- "name": "max",
155
- "description": "Maximum number of avatars to show before showing overflow",
156
- "value": { "type": "number", "default": "3" }
169
+ "name": "variant",
170
+ "description": "The variant type of the avatar",
171
+ "value": {
172
+ "type": "'image' | 'initials' | 'icon'",
173
+ "default": "'image'"
174
+ }
157
175
  },
158
176
  {
159
- "name": "show-total",
160
- "description": "Whether to show the total count in overflow indicator",
161
- "value": { "type": "boolean", "default": "false" }
177
+ "name": "src",
178
+ "description": "The source of the avatar image",
179
+ "value": { "type": "string" }
162
180
  },
163
181
  {
164
- "name": "interactive-overflow",
165
- "description": "Interactive overflow indicator",
166
- "value": { "type": "boolean", "default": "false" }
182
+ "name": "alt",
183
+ "description": "The alt text of the avatar",
184
+ "value": { "type": "string" }
167
185
  },
168
186
  {
169
- "name": "label",
170
- "description": "Accessible label for the avatar group",
187
+ "name": "initials",
188
+ "description": "The initials to display when variant is 'initials'",
171
189
  "value": { "type": "string" }
172
190
  },
173
191
  {
174
- "name": "overflow-label",
175
- "description": "Accessible label for the overflow indicator",
192
+ "name": "label",
193
+ "description": "Accessible label for the avatar",
176
194
  "value": { "type": "string" }
195
+ },
196
+ {
197
+ "name": "loading",
198
+ "description": "Loading state indicator",
199
+ "value": { "type": "boolean", "default": "false" }
200
+ },
201
+ {
202
+ "name": "interactive",
203
+ "description": "Whether the avatar is interactive (clickable)",
204
+ "value": { "type": "boolean", "default": "false" }
205
+ },
206
+ {
207
+ "name": "width",
208
+ "description": "The width of the avatar. This will override the size",
209
+ "value": { "type": "number" }
210
+ },
211
+ {
212
+ "name": "height",
213
+ "description": "The height of the avatar. This will override the size",
214
+ "value": { "type": "number" }
177
215
  }
178
216
  ],
179
217
  "slots": [
180
218
  {
181
- "name": "",
182
- "description": "The avatars to display in the group."
219
+ "name": "icon",
220
+ "description": "The icon to display when variant is 'icon'."
221
+ },
222
+ {
223
+ "name": "fallback",
224
+ "description": "Custom fallback content when image fails to load."
183
225
  }
184
226
  ],
185
227
  "events": [
186
228
  {
187
- "name": "dds-overflow-click",
188
- "description": "Fired when the overflow indicator is clicked."
229
+ "name": "dds-load",
230
+ "description": "Fired when the image loads successfully."
231
+ },
232
+ {
233
+ "name": "dds-error",
234
+ "description": "Fired when the image fails to load."
189
235
  }
190
236
  ],
191
237
  "js": {
192
238
  "properties": [
193
239
  {
194
- "name": "layout",
195
- "description": "Layout type for the avatar group",
196
- "type": "'stack' | 'grid'"
240
+ "name": "shape",
241
+ "description": "The shape of the avatar",
242
+ "type": "'circle' | 'rounded' | 'square'"
197
243
  },
198
244
  {
199
- "name": "max",
200
- "description": "Maximum number of avatars to show before showing overflow",
201
- "type": "number"
245
+ "name": "variant",
246
+ "description": "The variant type of the avatar",
247
+ "type": "'image' | 'initials' | 'icon'"
202
248
  },
203
249
  {
204
- "name": "showTotal",
205
- "description": "Whether to show the total count in overflow indicator",
206
- "type": "boolean"
250
+ "name": "src",
251
+ "description": "The source of the avatar image",
252
+ "type": "string"
207
253
  },
208
254
  {
209
- "name": "interactiveOverflow",
210
- "description": "Interactive overflow indicator",
211
- "type": "boolean"
255
+ "name": "alt",
256
+ "description": "The alt text of the avatar",
257
+ "type": "string"
212
258
  },
213
259
  {
214
- "name": "label",
215
- "description": "Accessible label for the avatar group",
260
+ "name": "initials",
261
+ "description": "The initials to display when variant is 'initials'",
216
262
  "type": "string"
217
263
  },
218
264
  {
219
- "name": "overflowLabel",
220
- "description": "Accessible label for the overflow indicator",
265
+ "name": "label",
266
+ "description": "Accessible label for the avatar",
221
267
  "type": "string"
222
268
  },
269
+ {
270
+ "name": "loading",
271
+ "description": "Loading state indicator",
272
+ "type": "boolean"
273
+ },
274
+ {
275
+ "name": "interactive",
276
+ "description": "Whether the avatar is interactive (clickable)",
277
+ "type": "boolean"
278
+ },
279
+ {
280
+ "name": "width",
281
+ "description": "The width of the avatar. This will override the size",
282
+ "type": "number"
283
+ },
284
+ {
285
+ "name": "height",
286
+ "description": "The height of the avatar. This will override the size",
287
+ "type": "number"
288
+ },
223
289
  {
224
290
  "name": "size",
225
- "description": "The size of avatars in the group. Default is `md`. See SizedMixin.",
291
+ "description": "The size of the avatar. Default is `md`.",
226
292
  "type": "'xxs' | 'xs' | 'sm' | 'md' | 'lg'"
227
293
  },
228
294
  {
229
295
  "name": "sizeMap",
230
- "description": "Responsive size map (e.g. \"md:lg\"); see SizedMixin.",
296
+ "description": "Responsive size map (e.g. \"md:lg\").",
231
297
  "type": "string"
232
298
  }
233
299
  ],
234
300
  "events": [
235
301
  {
236
- "name": "dds-overflow-click",
237
- "description": "Fired when the overflow indicator is clicked."
302
+ "name": "dds-load",
303
+ "description": "Fired when the image loads successfully."
304
+ },
305
+ {
306
+ "name": "dds-error",
307
+ "description": "Fired when the image fails to load."
238
308
  }
239
309
  ]
240
310
  }
241
311
  },
242
312
  {
243
- "name": "dap-ds-accordion-group",
244
- "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.",
313
+ "name": "dap-ds-anchor-heading",
314
+ "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.",
245
315
  "doc-url": "",
246
316
  "attributes": [
247
317
  {
248
- "name": "autoClose",
249
- "description": "Whether to close other accordions when one is opened.",
250
- "value": { "type": "string", "default": "'true'" }
318
+ "name": "variant",
319
+ "description": "The variant of the heading. Default is `h2`. Can be `h1`, `h2`, `h3`, `h4`, `h5`, or `h6`.",
320
+ "value": { "type": "HeadingVariant" }
251
321
  },
252
322
  {
253
- "name": "variant",
254
- "description": "The variant of the accordion",
255
- "value": {
256
- "type": "'default' | 'collapsed' | 'clean' | 'clean-collapsed'",
257
- "default": "'default'"
258
- }
323
+ "name": "label",
324
+ "description": "The label of the heading.",
325
+ "value": { "type": "string" }
259
326
  }
260
327
  ],
261
- "slots": [
262
- { "name": "", "description": "The content of the accordion group." }
263
- ],
264
328
  "events": [],
265
329
  "js": {
266
330
  "properties": [
267
- {
268
- "name": "autoClose",
269
- "description": "Whether to close other accordions when one is opened.",
270
- "type": "string"
271
- },
272
- {
273
- "name": "variant",
274
- "description": "The variant of the accordion",
275
- "type": "'default' | 'collapsed' | 'clean' | 'clean-collapsed'"
276
- }
331
+ { "name": "variant", "type": "HeadingVariant" },
332
+ { "name": "label", "type": "string" },
333
+ { "name": "elementId" },
334
+ { "name": "anchorTitle" }
277
335
  ],
278
336
  "events": []
279
337
  }
280
338
  },
281
339
  {
282
- "name": "dap-ds-banner",
283
- "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.",
340
+ "name": "dap-ds-avatar-group",
341
+ "description": "Avatar group component displays multiple avatars in an organized layout with overflow management.\n---\n\n\n### **Events:**\n - **dds-overflow-click** - Fired when the overflow indicator is clicked.\n\n### **Slots:**\n - _default_ - The avatars to display in the group.\n\n### **CSS Properties:**\n - **--dds-avatar-group-gap** - Gap between avatars in grid layout (default: 0) _(default: undefined)_\n- **--dds-avatar-group-overlap** - Overlap amount for stacked layout (default: -8px) _(default: undefined)_\n- **--dds-avatar-group-border-width** - Border width for avatars (default: var(--dds-border-width-base)) _(default: undefined)_\n- **--dds-avatar-group-border-color** - Border color for avatars (default: var(--dds-border-neutral-divider)) _(default: undefined)_\n- **--dds-avatar-group-overflow-bg** - Background color for overflow indicator (default: var(--dds-neutral-300)) _(default: undefined)_\n- **--dds-avatar-group-overflow-color** - Text color for overflow indicator (default: var(--dds-neutral-700)) _(default: undefined)_\n- **--dds-avatar-group-overflow-border** - Border for overflow indicator (default: var(--dds-avatar-group-border-width) solid var(--dds-avatar-group-border-color)) _(default: undefined)_\n- **--dds-avatar-group-size-lg** - Size for large avatars (default: var(--dds-spacing-2000)) _(default: undefined)_\n- **--dds-avatar-group-size-md** - Size for medium avatars (default: var(--dds-spacing-1600)) _(default: undefined)_\n- **--dds-avatar-group-size-sm** - Size for small avatars (default: var(--dds-spacing-1200)) _(default: undefined)_\n- **--dds-avatar-group-size-xs** - Size for extra small avatars (default: var(--dds-spacing-800)) _(default: undefined)_\n- **--dds-avatar-group-size-xxs** - Size for extra extra small avatars (default: var(--dds-spacing-400)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main container of the avatar group.\n- **avatars** - The container for the visible avatars.\n- **overflow** - The overflow indicator element.",
284
342
  "doc-url": "",
285
343
  "attributes": [
286
344
  {
287
- "name": "variant",
288
- "description": "The variant of the banner",
289
- "value": {
290
- "type": "'brand' | 'positive' | 'info' | 'warning' | 'negative'",
291
- "default": "'brand'"
292
- }
345
+ "name": "layout",
346
+ "description": "Layout type for the avatar group",
347
+ "value": { "type": "'stack' | 'grid'", "default": "'stack'" }
293
348
  },
294
349
  {
295
- "name": "closeable",
296
- "description": "Whether the banner is closeable",
297
- "value": { "type": "boolean" }
350
+ "name": "max",
351
+ "description": "Maximum number of avatars to show before showing overflow",
352
+ "value": { "type": "number", "default": "3" }
298
353
  },
299
354
  {
300
- "name": "opened",
301
- "description": "State of the banner. If false banner is hidden",
302
- "value": { "type": "string", "default": "'true'" }
355
+ "name": "show-total",
356
+ "description": "Whether to show the total count in overflow indicator",
357
+ "value": { "type": "boolean", "default": "false" }
303
358
  },
304
359
  {
305
- "name": "closeButtonLabel",
306
- "description": "The aria-label for the close button",
307
- "value": { "type": "string", "default": "'close'" }
360
+ "name": "interactive-overflow",
361
+ "description": "Interactive overflow indicator",
362
+ "value": { "type": "boolean", "default": "false" }
308
363
  },
309
364
  {
310
- "name": "icon",
311
- "description": "The icon of the banner, this is a name of a built icon icon",
365
+ "name": "label",
366
+ "description": "Accessible label for the avatar group",
367
+ "value": { "type": "string" }
368
+ },
369
+ {
370
+ "name": "overflow-label",
371
+ "description": "Accessible label for the overflow indicator",
312
372
  "value": { "type": "string" }
313
373
  }
314
374
  ],
315
375
  "slots": [
316
- { "name": "", "description": "The content of the banner." },
317
- { "name": "actions", "description": "Actions of banner" },
318
- { "name": "icon", "description": "The icon of the banner." }
376
+ {
377
+ "name": "",
378
+ "description": "The avatars to display in the group."
379
+ }
319
380
  ],
320
381
  "events": [
321
382
  {
322
- "name": "dds-close",
323
- "type": "{ void }",
324
- "description": "Event fired when the banner is closed."
383
+ "name": "dds-overflow-click",
384
+ "description": "Fired when the overflow indicator is clicked."
325
385
  }
326
386
  ],
327
387
  "js": {
328
388
  "properties": [
329
389
  {
330
- "name": "variant",
331
- "description": "The variant of the banner",
332
- "type": "'brand' | 'positive' | 'info' | 'warning' | 'negative'"
390
+ "name": "layout",
391
+ "description": "Layout type for the avatar group",
392
+ "type": "'stack' | 'grid'"
333
393
  },
334
394
  {
335
- "name": "closeable",
336
- "description": "Whether the banner is closeable",
395
+ "name": "max",
396
+ "description": "Maximum number of avatars to show before showing overflow",
397
+ "type": "number"
398
+ },
399
+ {
400
+ "name": "showTotal",
401
+ "description": "Whether to show the total count in overflow indicator",
337
402
  "type": "boolean"
338
403
  },
339
404
  {
340
- "name": "opened",
341
- "description": "State of the banner. If false banner is hidden",
405
+ "name": "interactiveOverflow",
406
+ "description": "Interactive overflow indicator",
407
+ "type": "boolean"
408
+ },
409
+ {
410
+ "name": "label",
411
+ "description": "Accessible label for the avatar group",
342
412
  "type": "string"
343
413
  },
344
414
  {
345
- "name": "closeButtonLabel",
346
- "description": "The aria-label for the close button",
415
+ "name": "overflowLabel",
416
+ "description": "Accessible label for the overflow indicator",
347
417
  "type": "string"
348
418
  },
349
419
  {
350
- "name": "icon",
351
- "description": "The icon of the banner, this is a name of a built icon icon",
420
+ "name": "size",
421
+ "description": "The size of avatars in the group. Default is `md`. See SizedMixin.",
422
+ "type": "'xxs' | 'xs' | 'sm' | 'md' | 'lg'"
423
+ },
424
+ {
425
+ "name": "sizeMap",
426
+ "description": "Responsive size map (e.g. \"md:lg\"); see SizedMixin.",
352
427
  "type": "string"
353
428
  }
354
429
  ],
355
430
  "events": [
356
431
  {
357
- "name": "dds-close",
358
- "type": "{ void }",
359
- "description": "Event fired when the banner is closed."
432
+ "name": "dds-overflow-click",
433
+ "description": "Fired when the overflow indicator is clicked."
360
434
  }
361
435
  ]
362
436
  }
@@ -422,158 +496,84 @@
422
496
  }
423
497
  },
424
498
  {
425
- "name": "dap-ds-avatar",
426
- "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.",
427
- "doc-url": "",
428
- "attributes": [
429
- {
430
- "name": "shape",
431
- "description": "The shape of the avatar",
432
- "value": {
433
- "type": "'circle' | 'rounded' | 'square'",
434
- "default": "'circle'"
435
- }
436
- },
437
- {
438
- "name": "variant",
439
- "description": "The variant type of the avatar",
440
- "value": {
441
- "type": "'image' | 'initials' | 'icon'",
442
- "default": "'image'"
443
- }
444
- },
445
- {
446
- "name": "src",
447
- "description": "The source of the avatar image",
448
- "value": { "type": "string" }
449
- },
450
- {
451
- "name": "alt",
452
- "description": "The alt text of the avatar",
453
- "value": { "type": "string" }
454
- },
455
- {
456
- "name": "initials",
457
- "description": "The initials to display when variant is 'initials'",
458
- "value": { "type": "string" }
459
- },
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.",
501
+ "doc-url": "",
502
+ "attributes": [
460
503
  {
461
- "name": "label",
462
- "description": "Accessible label for the avatar",
463
- "value": { "type": "string" }
504
+ "name": "variant",
505
+ "description": "The variant of the banner",
506
+ "value": {
507
+ "type": "'brand' | 'positive' | 'info' | 'warning' | 'negative'",
508
+ "default": "'brand'"
509
+ }
464
510
  },
465
511
  {
466
- "name": "loading",
467
- "description": "Loading state indicator",
468
- "value": { "type": "boolean", "default": "false" }
512
+ "name": "closeable",
513
+ "description": "Whether the banner is closeable",
514
+ "value": { "type": "boolean" }
469
515
  },
470
516
  {
471
- "name": "interactive",
472
- "description": "Whether the avatar is interactive (clickable)",
473
- "value": { "type": "boolean", "default": "false" }
517
+ "name": "opened",
518
+ "description": "State of the banner. If false banner is hidden",
519
+ "value": { "type": "string", "default": "'true'" }
474
520
  },
475
521
  {
476
- "name": "width",
477
- "description": "The width of the avatar. This will override the size",
478
- "value": { "type": "number" }
522
+ "name": "closeButtonLabel",
523
+ "description": "The aria-label for the close button",
524
+ "value": { "type": "string", "default": "'close'" }
479
525
  },
480
526
  {
481
- "name": "height",
482
- "description": "The height of the avatar. This will override the size",
483
- "value": { "type": "number" }
527
+ "name": "icon",
528
+ "description": "The icon of the banner, this is a name of a built icon icon",
529
+ "value": { "type": "string" }
484
530
  }
485
531
  ],
486
532
  "slots": [
487
- {
488
- "name": "icon",
489
- "description": "The icon to display when variant is 'icon'."
490
- },
491
- {
492
- "name": "fallback",
493
- "description": "Custom fallback content when image fails to load."
494
- }
533
+ { "name": "", "description": "The content of the banner." },
534
+ { "name": "actions", "description": "Actions of banner" },
535
+ { "name": "icon", "description": "The icon of the banner." }
495
536
  ],
496
537
  "events": [
497
538
  {
498
- "name": "dds-load",
499
- "description": "Fired when the image loads successfully."
500
- },
501
- {
502
- "name": "dds-error",
503
- "description": "Fired when the image fails to load."
539
+ "name": "dds-close",
540
+ "type": "{ void }",
541
+ "description": "Event fired when the banner is closed."
504
542
  }
505
543
  ],
506
544
  "js": {
507
545
  "properties": [
508
- {
509
- "name": "shape",
510
- "description": "The shape of the avatar",
511
- "type": "'circle' | 'rounded' | 'square'"
512
- },
513
546
  {
514
547
  "name": "variant",
515
- "description": "The variant type of the avatar",
516
- "type": "'image' | 'initials' | 'icon'"
517
- },
518
- {
519
- "name": "src",
520
- "description": "The source of the avatar image",
521
- "type": "string"
548
+ "description": "The variant of the banner",
549
+ "type": "'brand' | 'positive' | 'info' | 'warning' | 'negative'"
522
550
  },
523
551
  {
524
- "name": "alt",
525
- "description": "The alt text of the avatar",
526
- "type": "string"
552
+ "name": "closeable",
553
+ "description": "Whether the banner is closeable",
554
+ "type": "boolean"
527
555
  },
528
556
  {
529
- "name": "initials",
530
- "description": "The initials to display when variant is 'initials'",
557
+ "name": "opened",
558
+ "description": "State of the banner. If false banner is hidden",
531
559
  "type": "string"
532
560
  },
533
561
  {
534
- "name": "label",
535
- "description": "Accessible label for the avatar",
562
+ "name": "closeButtonLabel",
563
+ "description": "The aria-label for the close button",
536
564
  "type": "string"
537
565
  },
538
566
  {
539
- "name": "loading",
540
- "description": "Loading state indicator",
541
- "type": "boolean"
542
- },
543
- {
544
- "name": "interactive",
545
- "description": "Whether the avatar is interactive (clickable)",
546
- "type": "boolean"
547
- },
548
- {
549
- "name": "width",
550
- "description": "The width of the avatar. This will override the size",
551
- "type": "number"
552
- },
553
- {
554
- "name": "height",
555
- "description": "The height of the avatar. This will override the size",
556
- "type": "number"
557
- },
558
- {
559
- "name": "size",
560
- "description": "The size of the avatar. Default is `md`.",
561
- "type": "'xxs' | 'xs' | 'sm' | 'md' | 'lg'"
562
- },
563
- {
564
- "name": "sizeMap",
565
- "description": "Responsive size map (e.g. \"md:lg\").",
567
+ "name": "icon",
568
+ "description": "The icon of the banner, this is a name of a built icon icon",
566
569
  "type": "string"
567
570
  }
568
571
  ],
569
572
  "events": [
570
573
  {
571
- "name": "dds-load",
572
- "description": "Fired when the image loads successfully."
573
- },
574
- {
575
- "name": "dds-error",
576
- "description": "Fired when the image fails to load."
574
+ "name": "dds-close",
575
+ "type": "{ void }",
576
+ "description": "Event fired when the banner is closed."
577
577
  }
578
578
  ]
579
579
  }
@@ -3353,11 +3353,47 @@
3353
3353
  "description": "A datepicker is a graphical user interface widget that allows the user to select a date from a calendar and/or time from a time range.\n---\n\n\n### **Events:**\n - **dds-change** - Fired when the datepicker value changes.\n- **dds-input** - Fired when the datepicker input value changes.\n- **dds-valid-date** - Fired when the datepicker input value is valid. Happens on manual input typing.\n- **dds-invalid-date** - Fired when the datepicker input value is invalid. Happens on manual input typing.\n- **dds-clear** - Fired when the datepicker is cleared.\n- **dds-focus** - Emitted when the datepicker gains focus.\n- **dds-blur** - Emitted when the datepicker loses focus.\n\n### **CSS Properties:**\n - **--dds-combobox-background** - The background color of the combobox. (default: var(--dds-fields-background-default)) _(default: undefined)_\n- **--dds-combobox-border-color** - The border color of the combobox. (default: var(--dds-border-neutral-base)) _(default: undefined)_\n- **--dds-combobox-border-width** - The border width of the combobox. (default: var(--dds-border-width-base, 1px)) _(default: undefined)_\n- **--dds-combobox-border-radius** - The border radius of the combobox. (default: var(--dds-radius-base)) _(default: undefined)_\n- **--dds-combobox-text-color** - The text color of the combobox. (default: var(--dds-text-neutral-base)) _(default: undefined)_\n- **--dds-combobox-placeholder-color** - The placeholder text color. (default: var(--dds-text-neutral-subtle)) _(default: undefined)_\n- **--dds-combobox-disabled-background** - The background color when disabled. (default: var(--dds-background-neutral-stronger)) _(default: undefined)_\n- **--dds-combobox-disabled-text** - The text color when disabled. (default: var(--dds-text-neutral-disabled)) _(default: undefined)_\n- **--dds-combobox-error-border** - The border color for error state. (default: var(--dds-border-negative-base)) _(default: undefined)_\n- **--dds-combobox-success-border** - The border color for success state. (default: var(--dds-border-positive-base)) _(default: undefined)_\n- **--dds-combobox-icon-color** - The color of the icons. (default: var(--dds-text-icon-neutral-subtle)) _(default: undefined)_\n- **--dds-combobox-clear-icon-color** - The color of the clear icon. (default: var(--dds-button-subtle-icon-neutral-enabled)) _(default: undefined)_\n- **--dds-combobox-popup-background** - The background color of the popup. (default: var(--dds-background-neutral-subtle)) _(default: undefined)_\n- **--dds-combobox-popup-shadow** - The box shadow of the popup. (default: 0 4px 6px -1px rgb(0 0 0 / 8%), 0 2px 4px -1px rgb(0 0 0 / 6%)) _(default: undefined)_\n- **--dds-combobox-padding-xs** - The padding for extra small size. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-combobox-padding-sm** - The padding for small size. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-combobox-padding-lg** - The padding for large size. (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-combobox-padding-horizontal** - The horizontal padding. (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-combobox-padding-vertical** - The vertical padding. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-combobox-gap** - The gap between elements. (default: var(--dds-spacing-100)) _(default: undefined)_\n- **--dds-combobox-icon-gap** - The gap between icons. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-combobox-action-gap** - The gap between action elements. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-combobox-action-padding** - The padding for action elements. (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-combobox-clear-icon-width** - The width of the clear icon. (default: var(--dds-spacing-800)) _(default: undefined)_\n- **--dds-combobox-dropdown-icon-right** - The right position of the dropdown icon. (default: var(--dds-spacing-600)) _(default: undefined)_\n- **--dds-combobox-min-width** - The minimum width of the combobox. (default: 7.5rem) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main datepicker container.\n- **calendar** - The calendar of the datepicker.\n- **trigger** - The trigger button of the datepicker.\n- **label** - The label of the datepicker.\n- **description** - The description of the datepicker.\n- **feedback** - The feedback of the datepicker.\n- **tooltip** - The tooltip of the datepicker.\n- **input** - The input of the datepicker.\n- **clear-button** - The clear button of the datepicker.\n- **calendar-grid-cell-base** - The base of the calendar grid cell.\n- **calendar-grid-cell** - The cell of the calendar grid.\n- **calendar-grid-header-cell-base** - The base of the calendar grid header cell.\n- **calendar-grid-header-cell** - The header cell of the calendar grid.\n- **calendar-grid-cell-today-mark** - The today mark of the calendar grid cell.",
3354
3354
  "doc-url": "",
3355
3355
  "attributes": [
3356
+ {
3357
+ "name": "value",
3358
+ "description": "The value of the datepicker.",
3359
+ "value": { "type": "Dayjs" }
3360
+ },
3356
3361
  {
3357
3362
  "name": "mode",
3358
3363
  "description": "The mode of the datepicker - single date or range selection.",
3359
3364
  "value": { "type": "'single' | 'range'", "default": "'single'" }
3360
3365
  },
3366
+ {
3367
+ "name": "currentDate",
3368
+ "description": "The current visible date (month and year) of the calendar. Only the month and year are considered.",
3369
+ "value": { "type": "Dayjs | string | Date", "default": "dayjs()" }
3370
+ },
3371
+ {
3372
+ "name": "minDate",
3373
+ "description": "The minimum date (month and year) of the datepicker. Only the month and year are considered.",
3374
+ "value": {
3375
+ "type": "Dayjs | string | Date",
3376
+ "default": "dayjs('1901-01-01')"
3377
+ }
3378
+ },
3379
+ {
3380
+ "name": "maxDate",
3381
+ "description": "The maximum date (month and year) of the datepicker. Only the month and year are considered.",
3382
+ "value": {
3383
+ "type": "Dayjs | string | Date",
3384
+ "default": "dayjs('2099-12-31')"
3385
+ }
3386
+ },
3387
+ {
3388
+ "name": "rangeStart",
3389
+ "description": "The start date of the range selection (only used in range mode).",
3390
+ "value": { "type": "Dayjs | string | Date" }
3391
+ },
3392
+ {
3393
+ "name": "rangeEnd",
3394
+ "description": "The end date of the range selection (only used in range mode).",
3395
+ "value": { "type": "Dayjs | string | Date" }
3396
+ },
3361
3397
  {
3362
3398
  "name": "placement",
3363
3399
  "description": "The placement of the dropdown of the datepicker.",
@@ -8635,14 +8671,6 @@
8635
8671
  "default": "'neutral'"
8636
8672
  }
8637
8673
  },
8638
- {
8639
- "name": "size",
8640
- "description": "The size of the spinner. Default is `lg`. See SizedMixin.",
8641
- "value": {
8642
- "type": "'xxs' | 'xs' | 'sm' | 'md' | 'lg'",
8643
- "default": "'lg'"
8644
- }
8645
- },
8646
8674
  {
8647
8675
  "name": "staticSize",
8648
8676
  "description": "The size of the spinner in pixels. This overrides the size attribute",
@@ -8692,11 +8720,6 @@
8692
8720
  "description": "The variant of the spinner.",
8693
8721
  "type": "\"neutral\" | \"brand\" | \"negative\" | \"positive\" | \"inverted\""
8694
8722
  },
8695
- {
8696
- "name": "size",
8697
- "description": "The size of the spinner. Default is `lg`. See SizedMixin.",
8698
- "type": "'xxs' | 'xs' | 'sm' | 'md' | 'lg'"
8699
- },
8700
8723
  {
8701
8724
  "name": "staticSize",
8702
8725
  "description": "The size of the spinner in pixels. This overrides the size attribute",
@@ -8727,6 +8750,11 @@
8727
8750
  "description": "Delay in milliseconds before showing the spinner.\nPrevents flash for quick operations.",
8728
8751
  "type": "number"
8729
8752
  },
8753
+ {
8754
+ "name": "size",
8755
+ "description": "The size of the spinner. Default is `lg`. See SizedMixin.",
8756
+ "type": "'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'"
8757
+ },
8730
8758
  {
8731
8759
  "name": "sizeMap",
8732
8760
  "description": "Responsive size map (e.g. \"md:lg\"); see SizedMixin.",
@@ -12634,7 +12662,7 @@
12634
12662
  }
12635
12663
  },
12636
12664
  {
12637
- "name": "dap-ds-icon-account-circle-fill",
12665
+ "name": "dap-ds-icon-add-line",
12638
12666
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
12639
12667
  "doc-url": "",
12640
12668
  "attributes": [
@@ -12687,7 +12715,7 @@
12687
12715
  }
12688
12716
  },
12689
12717
  {
12690
- "name": "dap-ds-icon-account-circle-line",
12718
+ "name": "dap-ds-icon-alert-fill",
12691
12719
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
12692
12720
  "doc-url": "",
12693
12721
  "attributes": [
@@ -12740,7 +12768,7 @@
12740
12768
  }
12741
12769
  },
12742
12770
  {
12743
- "name": "dap-ds-icon-user-line",
12771
+ "name": "dap-ds-icon-alert-line",
12744
12772
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
12745
12773
  "doc-url": "",
12746
12774
  "attributes": [
@@ -12793,7 +12821,7 @@
12793
12821
  }
12794
12822
  },
12795
12823
  {
12796
- "name": "dap-ds-icon-user-fill",
12824
+ "name": "dap-ds-icon-check-line",
12797
12825
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
12798
12826
  "doc-url": "",
12799
12827
  "attributes": [
@@ -12846,7 +12874,7 @@
12846
12874
  }
12847
12875
  },
12848
12876
  {
12849
- "name": "dap-ds-icon-add-line",
12877
+ "name": "dap-ds-icon-check-line2",
12850
12878
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
12851
12879
  "doc-url": "",
12852
12880
  "attributes": [
@@ -12899,7 +12927,7 @@
12899
12927
  }
12900
12928
  },
12901
12929
  {
12902
- "name": "dap-ds-icon-alert-fill",
12930
+ "name": "dap-ds-icon-checkbox-blank-circle-fill",
12903
12931
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
12904
12932
  "doc-url": "",
12905
12933
  "attributes": [
@@ -12952,7 +12980,7 @@
12952
12980
  }
12953
12981
  },
12954
12982
  {
12955
- "name": "dap-ds-icon-alert-line",
12983
+ "name": "dap-ds-icon-checkbox-blank-circle-fill-check",
12956
12984
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
12957
12985
  "doc-url": "",
12958
12986
  "attributes": [
@@ -13005,7 +13033,7 @@
13005
13033
  }
13006
13034
  },
13007
13035
  {
13008
- "name": "dap-ds-icon-check-line",
13036
+ "name": "dap-ds-icon-checkbox-blank-circle-line",
13009
13037
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
13010
13038
  "doc-url": "",
13011
13039
  "attributes": [
@@ -13058,7 +13086,7 @@
13058
13086
  }
13059
13087
  },
13060
13088
  {
13061
- "name": "dap-ds-icon-check-line2",
13089
+ "name": "dap-ds-icon-checkbox-circle-fill",
13062
13090
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
13063
13091
  "doc-url": "",
13064
13092
  "attributes": [
@@ -13111,7 +13139,7 @@
13111
13139
  }
13112
13140
  },
13113
13141
  {
13114
- "name": "dap-ds-icon-checkbox-blank-circle-fill",
13142
+ "name": "dap-ds-icon-checkbox-circle-line",
13115
13143
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
13116
13144
  "doc-url": "",
13117
13145
  "attributes": [
@@ -13164,7 +13192,7 @@
13164
13192
  }
13165
13193
  },
13166
13194
  {
13167
- "name": "dap-ds-icon-checkbox-blank-circle-fill-check",
13195
+ "name": "dap-ds-icon-close-circle-fill",
13168
13196
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
13169
13197
  "doc-url": "",
13170
13198
  "attributes": [
@@ -13217,7 +13245,7 @@
13217
13245
  }
13218
13246
  },
13219
13247
  {
13220
- "name": "dap-ds-icon-checkbox-blank-circle-line",
13248
+ "name": "dap-ds-icon-close-circle-line",
13221
13249
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
13222
13250
  "doc-url": "",
13223
13251
  "attributes": [
@@ -13270,7 +13298,7 @@
13270
13298
  }
13271
13299
  },
13272
13300
  {
13273
- "name": "dap-ds-icon-checkbox-circle-fill",
13301
+ "name": "dap-ds-icon-close-fill",
13274
13302
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
13275
13303
  "doc-url": "",
13276
13304
  "attributes": [
@@ -13323,7 +13351,7 @@
13323
13351
  }
13324
13352
  },
13325
13353
  {
13326
- "name": "dap-ds-icon-checkbox-circle-line",
13354
+ "name": "dap-ds-icon-close-line",
13327
13355
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
13328
13356
  "doc-url": "",
13329
13357
  "attributes": [
@@ -13376,7 +13404,7 @@
13376
13404
  }
13377
13405
  },
13378
13406
  {
13379
- "name": "dap-ds-icon-close-circle-fill",
13407
+ "name": "dap-ds-icon-delete-bin-fill",
13380
13408
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
13381
13409
  "doc-url": "",
13382
13410
  "attributes": [
@@ -13429,7 +13457,7 @@
13429
13457
  }
13430
13458
  },
13431
13459
  {
13432
- "name": "dap-ds-icon-close-circle-line",
13460
+ "name": "dap-ds-icon-delete-bin-line",
13433
13461
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
13434
13462
  "doc-url": "",
13435
13463
  "attributes": [
@@ -13482,7 +13510,7 @@
13482
13510
  }
13483
13511
  },
13484
13512
  {
13485
- "name": "dap-ds-icon-close-fill",
13513
+ "name": "dap-ds-icon-download-line",
13486
13514
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
13487
13515
  "doc-url": "",
13488
13516
  "attributes": [
@@ -13535,7 +13563,7 @@
13535
13563
  }
13536
13564
  },
13537
13565
  {
13538
- "name": "dap-ds-icon-close-line",
13566
+ "name": "dap-ds-icon-error-warning-fill",
13539
13567
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
13540
13568
  "doc-url": "",
13541
13569
  "attributes": [
@@ -13588,7 +13616,7 @@
13588
13616
  }
13589
13617
  },
13590
13618
  {
13591
- "name": "dap-ds-icon-delete-bin-fill",
13619
+ "name": "dap-ds-icon-error-warning-line",
13592
13620
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
13593
13621
  "doc-url": "",
13594
13622
  "attributes": [
@@ -13641,7 +13669,7 @@
13641
13669
  }
13642
13670
  },
13643
13671
  {
13644
- "name": "dap-ds-icon-delete-bin-line",
13672
+ "name": "dap-ds-icon-external-link-line",
13645
13673
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
13646
13674
  "doc-url": "",
13647
13675
  "attributes": [
@@ -13694,7 +13722,7 @@
13694
13722
  }
13695
13723
  },
13696
13724
  {
13697
- "name": "dap-ds-icon-download-line",
13725
+ "name": "dap-ds-icon-eye-line",
13698
13726
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
13699
13727
  "doc-url": "",
13700
13728
  "attributes": [
@@ -13747,7 +13775,7 @@
13747
13775
  }
13748
13776
  },
13749
13777
  {
13750
- "name": "dap-ds-icon-error-warning-fill",
13778
+ "name": "dap-ds-icon-eye-off-line",
13751
13779
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
13752
13780
  "doc-url": "",
13753
13781
  "attributes": [
@@ -13800,7 +13828,7 @@
13800
13828
  }
13801
13829
  },
13802
13830
  {
13803
- "name": "dap-ds-icon-error-warning-line",
13831
+ "name": "dap-ds-icon-forbid-fill",
13804
13832
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
13805
13833
  "doc-url": "",
13806
13834
  "attributes": [
@@ -13853,7 +13881,7 @@
13853
13881
  }
13854
13882
  },
13855
13883
  {
13856
- "name": "dap-ds-icon-external-link-line",
13884
+ "name": "dap-ds-icon-information-2-fill",
13857
13885
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
13858
13886
  "doc-url": "",
13859
13887
  "attributes": [
@@ -13906,7 +13934,7 @@
13906
13934
  }
13907
13935
  },
13908
13936
  {
13909
- "name": "dap-ds-icon-eye-line",
13937
+ "name": "dap-ds-icon-information-fill",
13910
13938
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
13911
13939
  "doc-url": "",
13912
13940
  "attributes": [
@@ -13959,7 +13987,7 @@
13959
13987
  }
13960
13988
  },
13961
13989
  {
13962
- "name": "dap-ds-icon-eye-off-line",
13990
+ "name": "dap-ds-icon-information-line",
13963
13991
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
13964
13992
  "doc-url": "",
13965
13993
  "attributes": [
@@ -14012,7 +14040,7 @@
14012
14040
  }
14013
14041
  },
14014
14042
  {
14015
- "name": "dap-ds-icon-forbid-fill",
14043
+ "name": "dap-ds-icon-lightbulb-fill",
14016
14044
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
14017
14045
  "doc-url": "",
14018
14046
  "attributes": [
@@ -14065,7 +14093,7 @@
14065
14093
  }
14066
14094
  },
14067
14095
  {
14068
- "name": "dap-ds-icon-information-2-fill",
14096
+ "name": "dap-ds-icon-loading-spinner",
14069
14097
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
14070
14098
  "doc-url": "",
14071
14099
  "attributes": [
@@ -14118,7 +14146,7 @@
14118
14146
  }
14119
14147
  },
14120
14148
  {
14121
- "name": "dap-ds-icon-information-fill",
14149
+ "name": "dap-ds-icon-lock-fill",
14122
14150
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
14123
14151
  "doc-url": "",
14124
14152
  "attributes": [
@@ -14171,7 +14199,7 @@
14171
14199
  }
14172
14200
  },
14173
14201
  {
14174
- "name": "dap-ds-icon-information-line",
14202
+ "name": "dap-ds-icon-lock-line",
14175
14203
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
14176
14204
  "doc-url": "",
14177
14205
  "attributes": [
@@ -14224,7 +14252,7 @@
14224
14252
  }
14225
14253
  },
14226
14254
  {
14227
- "name": "dap-ds-icon-lightbulb-fill",
14255
+ "name": "dap-ds-icon-menu-line",
14228
14256
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
14229
14257
  "doc-url": "",
14230
14258
  "attributes": [
@@ -14277,7 +14305,7 @@
14277
14305
  }
14278
14306
  },
14279
14307
  {
14280
- "name": "dap-ds-icon-loading-spinner",
14308
+ "name": "dap-ds-icon-menu-line-s",
14281
14309
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
14282
14310
  "doc-url": "",
14283
14311
  "attributes": [
@@ -14330,7 +14358,7 @@
14330
14358
  }
14331
14359
  },
14332
14360
  {
14333
- "name": "dap-ds-icon-lock-fill",
14361
+ "name": "dap-ds-icon-more-2-line",
14334
14362
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
14335
14363
  "doc-url": "",
14336
14364
  "attributes": [
@@ -14383,7 +14411,7 @@
14383
14411
  }
14384
14412
  },
14385
14413
  {
14386
- "name": "dap-ds-icon-lock-line",
14414
+ "name": "dap-ds-icon-more-line",
14387
14415
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
14388
14416
  "doc-url": "",
14389
14417
  "attributes": [
@@ -14436,7 +14464,7 @@
14436
14464
  }
14437
14465
  },
14438
14466
  {
14439
- "name": "dap-ds-icon-menu-line",
14467
+ "name": "dap-ds-icon-search-line",
14440
14468
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
14441
14469
  "doc-url": "",
14442
14470
  "attributes": [
@@ -14489,7 +14517,7 @@
14489
14517
  }
14490
14518
  },
14491
14519
  {
14492
- "name": "dap-ds-icon-menu-line-s",
14520
+ "name": "dap-ds-icon-share-line",
14493
14521
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
14494
14522
  "doc-url": "",
14495
14523
  "attributes": [
@@ -14542,7 +14570,7 @@
14542
14570
  }
14543
14571
  },
14544
14572
  {
14545
- "name": "dap-ds-icon-more-2-line",
14573
+ "name": "dap-ds-icon-shield-check-fill",
14546
14574
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
14547
14575
  "doc-url": "",
14548
14576
  "attributes": [
@@ -14595,7 +14623,7 @@
14595
14623
  }
14596
14624
  },
14597
14625
  {
14598
- "name": "dap-ds-icon-more-line",
14626
+ "name": "dap-ds-icon-shield-check-line",
14599
14627
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
14600
14628
  "doc-url": "",
14601
14629
  "attributes": [
@@ -14648,7 +14676,7 @@
14648
14676
  }
14649
14677
  },
14650
14678
  {
14651
- "name": "dap-ds-icon-search-line",
14679
+ "name": "dap-ds-icon-star-fill",
14652
14680
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
14653
14681
  "doc-url": "",
14654
14682
  "attributes": [
@@ -14701,7 +14729,7 @@
14701
14729
  }
14702
14730
  },
14703
14731
  {
14704
- "name": "dap-ds-icon-share-line",
14732
+ "name": "dap-ds-icon-subtract-line",
14705
14733
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
14706
14734
  "doc-url": "",
14707
14735
  "attributes": [
@@ -14754,7 +14782,7 @@
14754
14782
  }
14755
14783
  },
14756
14784
  {
14757
- "name": "dap-ds-icon-shield-check-fill",
14785
+ "name": "dap-ds-icon-subtract-line2",
14758
14786
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
14759
14787
  "doc-url": "",
14760
14788
  "attributes": [
@@ -14807,7 +14835,7 @@
14807
14835
  }
14808
14836
  },
14809
14837
  {
14810
- "name": "dap-ds-icon-shield-check-line",
14838
+ "name": "dap-ds-icon-time-fill",
14811
14839
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
14812
14840
  "doc-url": "",
14813
14841
  "attributes": [
@@ -14860,7 +14888,7 @@
14860
14888
  }
14861
14889
  },
14862
14890
  {
14863
- "name": "dap-ds-icon-star-fill",
14891
+ "name": "dap-ds-icon-time-line",
14864
14892
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
14865
14893
  "doc-url": "",
14866
14894
  "attributes": [
@@ -14913,7 +14941,7 @@
14913
14941
  }
14914
14942
  },
14915
14943
  {
14916
- "name": "dap-ds-icon-subtract-line2",
14944
+ "name": "dap-ds-icon-upload-2-fill",
14917
14945
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
14918
14946
  "doc-url": "",
14919
14947
  "attributes": [
@@ -14966,7 +14994,7 @@
14966
14994
  }
14967
14995
  },
14968
14996
  {
14969
- "name": "dap-ds-icon-subtract-line",
14997
+ "name": "dap-ds-icon-upload-2-line",
14970
14998
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
14971
14999
  "doc-url": "",
14972
15000
  "attributes": [
@@ -15019,7 +15047,7 @@
15019
15047
  }
15020
15048
  },
15021
15049
  {
15022
- "name": "dap-ds-icon-time-fill",
15050
+ "name": "dap-ds-icon-upload-line",
15023
15051
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
15024
15052
  "doc-url": "",
15025
15053
  "attributes": [
@@ -15072,7 +15100,7 @@
15072
15100
  }
15073
15101
  },
15074
15102
  {
15075
- "name": "dap-ds-icon-time-line",
15103
+ "name": "dap-ds-icon-account-circle-fill",
15076
15104
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
15077
15105
  "doc-url": "",
15078
15106
  "attributes": [
@@ -15125,7 +15153,7 @@
15125
15153
  }
15126
15154
  },
15127
15155
  {
15128
- "name": "dap-ds-icon-upload-2-fill",
15156
+ "name": "dap-ds-icon-account-circle-line",
15129
15157
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
15130
15158
  "doc-url": "",
15131
15159
  "attributes": [
@@ -15178,7 +15206,7 @@
15178
15206
  }
15179
15207
  },
15180
15208
  {
15181
- "name": "dap-ds-icon-upload-2-line",
15209
+ "name": "dap-ds-icon-user-fill",
15182
15210
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
15183
15211
  "doc-url": "",
15184
15212
  "attributes": [
@@ -15231,7 +15259,7 @@
15231
15259
  }
15232
15260
  },
15233
15261
  {
15234
- "name": "dap-ds-icon-upload-line",
15262
+ "name": "dap-ds-icon-user-line",
15235
15263
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
15236
15264
  "doc-url": "",
15237
15265
  "attributes": [