dap-design-system 0.55.2 → 0.55.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/dist/components/file-input/file-input.component.d.ts +7 -0
  2. package/dist/{components-ChK1mSip.js → components-NHQTi00b.js} +110 -107
  3. package/dist/components-NHQTi00b.js.map +1 -0
  4. package/dist/components.js +1 -1
  5. package/dist/dds.js +1 -1
  6. package/dist/manifest/types/vue/index.d.ts +406 -404
  7. package/dist/manifest/vscode.html-custom-data.json +303 -298
  8. package/dist/manifest/web-types.json +755 -745
  9. package/dist/react/dap-ds-file-input/index.d.ts +1 -0
  10. package/dist/react/index.d.ts +13 -13
  11. package/dist/react-types.ts +13 -13
  12. package/dist/react.js +130 -130
  13. package/dist/react.js.map +1 -1
  14. package/package.json +1 -1
  15. package/dist/components-ChK1mSip.js.map +0 -1
package/dist/manifest/vscode.html-custom-data.json CHANGED
@@ -24,87 +24,6 @@
24
24
  }
25
25
  ]
26
26
  },
27
- {
28
- "name": "dap-ds-accordion",
29
- "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.",
30
- "attributes": [],
31
- "references": [
32
- {
33
- "name": "Documentation",
34
- "url": "https://shoelace.style/components/accordion"
35
- }
36
- ]
37
- },
38
- {
39
- "name": "dap-ds-avatar",
40
- "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.",
41
- "attributes": [
42
- {
43
- "name": "shape",
44
- "description": "The shape of the avatar",
45
- "values": [
46
- { "name": "circle" },
47
- { "name": "rounded" },
48
- { "name": "square" }
49
- ]
50
- },
51
- {
52
- "name": "variant",
53
- "description": "The variant type of the avatar",
54
- "values": [
55
- { "name": "image" },
56
- { "name": "initials" },
57
- { "name": "icon" }
58
- ]
59
- },
60
- {
61
- "name": "src",
62
- "description": "The source of the avatar image",
63
- "values": []
64
- },
65
- {
66
- "name": "alt",
67
- "description": "The alt text of the avatar",
68
- "values": []
69
- },
70
- {
71
- "name": "initials",
72
- "description": "The initials to display when variant is 'initials'",
73
- "values": []
74
- },
75
- {
76
- "name": "label",
77
- "description": "Accessible label for the avatar",
78
- "values": []
79
- },
80
- {
81
- "name": "loading",
82
- "description": "Loading state indicator",
83
- "values": []
84
- },
85
- {
86
- "name": "interactive",
87
- "description": "Whether the avatar is interactive (clickable)",
88
- "values": []
89
- },
90
- {
91
- "name": "width",
92
- "description": "The width of the avatar. This will override the size",
93
- "values": []
94
- },
95
- {
96
- "name": "height",
97
- "description": "The height of the avatar. This will override the size",
98
- "values": []
99
- }
100
- ],
101
- "references": [
102
- {
103
- "name": "Documentation",
104
- "url": "https://shoelace.style/components/avatar"
105
- }
106
- ]
107
- },
108
27
  {
109
28
  "name": "dap-ds-avatar-group",
110
29
  "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.",
@@ -147,29 +66,6 @@
147
66
  }
148
67
  ]
149
68
  },
150
- {
151
- "name": "dap-ds-breadcrumb",
152
- "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.",
153
- "attributes": [
154
- { "name": "variant", "values": [] },
155
- {
156
- "name": "mobile",
157
- "description": "Mobile version of the breadcrumb",
158
- "values": []
159
- },
160
- {
161
- "name": "aria-labelledby",
162
- "description": "The aria-labelledby of the breadcrumb",
163
- "values": []
164
- }
165
- ],
166
- "references": [
167
- {
168
- "name": "Documentation",
169
- "url": "https://shoelace.style/components/breadcrumb"
170
- }
171
- ]
172
- },
173
69
  {
174
70
  "name": "dap-ds-badge",
175
71
  "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.",
@@ -248,134 +144,133 @@
248
144
  ]
249
145
  },
250
146
  {
251
- "name": "dap-ds-accordion-group",
252
- "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.",
147
+ "name": "dap-ds-breadcrumb",
148
+ "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.",
253
149
  "attributes": [
150
+ { "name": "variant", "values": [] },
254
151
  {
255
- "name": "autoClose",
256
- "description": "Whether to close other accordions when one is opened.",
152
+ "name": "mobile",
153
+ "description": "Mobile version of the breadcrumb",
257
154
  "values": []
258
155
  },
259
156
  {
260
- "name": "variant",
261
- "description": "The variant of the accordion",
262
- "values": [
263
- { "name": "default" },
264
- { "name": "collapsed" },
265
- { "name": "clean" },
266
- { "name": "clean-collapsed" }
267
- ]
157
+ "name": "aria-labelledby",
158
+ "description": "The aria-labelledby of the breadcrumb",
159
+ "values": []
268
160
  }
269
161
  ],
270
162
  "references": [
271
163
  {
272
164
  "name": "Documentation",
273
- "url": "https://shoelace.style/components/accordion-group"
165
+ "url": "https://shoelace.style/components/breadcrumb"
274
166
  }
275
167
  ]
276
168
  },
277
169
  {
278
- "name": "dap-ds-button",
279
- "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.",
170
+ "name": "dap-ds-accordion",
171
+ "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.",
172
+ "attributes": [],
173
+ "references": [
174
+ {
175
+ "name": "Documentation",
176
+ "url": "https://shoelace.style/components/accordion"
177
+ }
178
+ ]
179
+ },
180
+ {
181
+ "name": "dap-ds-avatar",
182
+ "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.",
280
183
  "attributes": [
281
184
  {
282
- "name": "variant",
283
- "description": "The visual style variant of the button",
185
+ "name": "shape",
186
+ "description": "The shape of the avatar",
284
187
  "values": [
285
- { "name": "primary" },
286
- { "name": "outline" },
287
- { "name": "subtle" },
288
- { "name": "subtle-neutral" },
289
- { "name": "subtle-quiet" },
290
- { "name": "subtle-quiet-inverted" },
291
- { "name": "clean" },
292
- { "name": "primary-inverted" },
293
- { "name": "outline-inverted" },
294
- { "name": "subtle-inverted" },
295
- { "name": "clean-inverted" },
296
- { "name": "subtle-menu" },
297
- { "name": "subtle-menu-item" }
188
+ { "name": "circle" },
189
+ { "name": "rounded" },
190
+ { "name": "square" }
298
191
  ]
299
192
  },
300
193
  {
301
- "name": "size",
302
- "description": "The size of the button affecting padding and font size",
194
+ "name": "variant",
195
+ "description": "The variant type of the avatar",
303
196
  "values": [
304
- { "name": "lg" },
305
- { "name": "md" },
306
- { "name": "sm" },
307
- { "name": "xs" }
197
+ { "name": "image" },
198
+ { "name": "initials" },
199
+ { "name": "icon" }
308
200
  ]
309
201
  },
310
202
  {
311
- "name": "loading",
312
- "description": "Whether the button is in loading state, showing a spinner and disabling interaction",
203
+ "name": "src",
204
+ "description": "The source of the avatar image",
313
205
  "values": []
314
206
  },
315
207
  {
316
- "name": "danger",
317
- "description": "Whether the button represents a destructive action (applies danger styling)",
208
+ "name": "alt",
209
+ "description": "The alt text of the avatar",
318
210
  "values": []
319
211
  },
320
212
  {
321
- "name": "shape",
322
- "description": "The shape of the button - use 'circle' for icon-only buttons",
323
- "values": [{ "name": "button" }, { "name": "circle" }]
324
- },
325
- {
326
- "name": "htmlType",
327
- "description": "The HTML type attribute for form interaction",
328
- "values": [
329
- { "name": "button" },
330
- { "name": "submit" },
331
- { "name": "reset" }
332
- ]
213
+ "name": "initials",
214
+ "description": "The initials to display when variant is 'initials'",
215
+ "values": []
333
216
  },
334
217
  {
335
- "name": "href",
336
- "description": "The URL to navigate to. When present, the button renders as an anchor element",
218
+ "name": "label",
219
+ "description": "Accessible label for the avatar",
337
220
  "values": []
338
221
  },
339
222
  {
340
- "name": "target",
341
- "description": "The target attribute for link navigation",
342
- "values": [
343
- { "name": "_blank" },
344
- { "name": "_self" },
345
- { "name": "_parent" },
346
- { "name": "_top" }
347
- ]
223
+ "name": "loading",
224
+ "description": "Loading state indicator",
225
+ "values": []
348
226
  },
349
227
  {
350
- "name": "rel",
351
- "description": "The rel attribute for link security and behavior",
228
+ "name": "interactive",
229
+ "description": "Whether the avatar is interactive (clickable)",
352
230
  "values": []
353
231
  },
354
232
  {
355
- "name": "loadingTimeout",
356
- "description": "Controls loading timeout in milliseconds",
233
+ "name": "width",
234
+ "description": "The width of the avatar. This will override the size",
357
235
  "values": []
358
236
  },
359
237
  {
360
- "name": "active",
361
- "description": "Whether the button is active",
238
+ "name": "height",
239
+ "description": "The height of the avatar. This will override the size",
362
240
  "values": []
363
- },
241
+ }
242
+ ],
243
+ "references": [
364
244
  {
365
- "name": "targetBlankText",
366
- "description": "The text for the target blank link, applicable when target is _blank. PRO TIP: Use parenthesis to wrap the text",
245
+ "name": "Documentation",
246
+ "url": "https://shoelace.style/components/avatar"
247
+ }
248
+ ]
249
+ },
250
+ {
251
+ "name": "dap-ds-accordion-group",
252
+ "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.",
253
+ "attributes": [
254
+ {
255
+ "name": "autoClose",
256
+ "description": "Whether to close other accordions when one is opened.",
367
257
  "values": []
368
258
  },
369
259
  {
370
- "name": "forceRole",
371
- "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).",
372
- "values": []
260
+ "name": "variant",
261
+ "description": "The variant of the accordion",
262
+ "values": [
263
+ { "name": "default" },
264
+ { "name": "collapsed" },
265
+ { "name": "clean" },
266
+ { "name": "clean-collapsed" }
267
+ ]
373
268
  }
374
269
  ],
375
270
  "references": [
376
271
  {
377
272
  "name": "Documentation",
378
- "url": "https://shoelace.style/components/button"
273
+ "url": "https://shoelace.style/components/accordion-group"
379
274
  }
380
275
  ]
381
276
  },
@@ -422,65 +317,107 @@
422
317
  ]
423
318
  },
424
319
  {
425
- "name": "dap-ds-callout",
426
- "description": "`dap-ds-callout` is a custom callout component.\n---\n\n\n### **Events:**\n - **dds-close** - Fired when the close button is clicked.\n\n### **Slots:**\n - _default_ - The content of the callout.\n- **title** - The title of the callout.\n- **icon** - The icon of the callout.\n- **actions** - The actions of the callout.\n- **close** - The close button of the callout.\n\n### **CSS Properties:**\n - **--dds-callout-padding** - Padding of the callout content. (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-callout-gap** - Gap between elements in horizontal layout. (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-callout-icon-size** - Size of the icon. (default: var(--dds-spacing-600)) _(default: undefined)_\n- **--dds-callout-title-color** - Color of the title text. (default: var(--dds-text-neutral-strong)) _(default: undefined)_\n- **--dds-callout-description-color** - Color of the description text. (default: var(--dds-text-neutral-base)) _(default: undefined)_\n- **--dds-callout-title-font-size** - Font size of the title. (default: var(--dds-font-base)) _(default: undefined)_\n- **--dds-callout-description-font-size** - Font size of the description. (default: var(--dds-font-base)) _(default: undefined)_\n- **--dds-callout-title-font-weight** - Font weight of the title. (default: var(--dds-font-weight-bold)) _(default: undefined)_\n- **--dds-callout-description-font-weight** - Font weight of the description. (default: var(--dds-font-weight-medium)) _(default: undefined)_\n- **--dds-callout-actions-font-weight** - Font weight of the actions. (default: var(--dds-font-weight-bold)) _(default: undefined)_\n- **--dds-callout-actions-gap** - Gap between action items. (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-callout-content-gap** - Gap between content elements. (default: var(--dds-spacing-100)) _(default: undefined)_\n- **--dds-callout-border-radius** - Border radius of the callout. (default: var(--dds-radius-base)) _(default: undefined)_\n- **--dds-callout-brand-background** - Brand variant background color. (default: var(--dds-background-brand-base)) _(default: undefined)_\n- **--dds-callout-brand-background-subtle** - Brand variant subtle background color. (default: var(--dds-background-brand-subtle)) _(default: undefined)_\n- **--dds-callout-brand-background-medium** - Brand variant medium background color. (default: var(--dds-background-brand-medium)) _(default: undefined)_\n- **--dds-callout-brand-background-strong** - Brand variant strong background color. (default: var(--dds-background-brand-strong)) _(default: undefined)_\n- **--dds-callout-brand-icon** - Brand variant icon color. (default: var(--dds-icon-brand-subtle)) _(default: undefined)_\n- **--dds-callout-brand-border** - Brand variant border color. (default: var(--dds-border-brand-subtle)) _(default: undefined)_\n- **--dds-callout-info-background** - Info variant background color. (default: var(--dds-background-informative-base)) _(default: undefined)_\n- **--dds-callout-info-background-subtle** - Info variant subtle background color. (default: var(--dds-background-informative-subtle)) _(default: undefined)_\n- **--dds-callout-info-background-medium** - Info variant medium background color. (default: var(--dds-background-informative-medium)) _(default: undefined)_\n- **--dds-callout-info-background-strong** - Info variant strong background color. (default: var(--dds-background-informative-strong)) _(default: undefined)_\n- **--dds-callout-info-icon** - Info variant icon color. (default: var(--dds-icon-informative-subtle)) _(default: undefined)_\n- **--dds-callout-info-border** - Info variant border color. (default: var(--dds-border-informative-subtle)) _(default: undefined)_\n- **--dds-callout-positive-background** - Positive variant background color. (default: var(--dds-background-positive-base)) _(default: undefined)_\n- **--dds-callout-positive-background-subtle** - Positive variant subtle background color. (default: var(--dds-background-positive-subtle)) _(default: undefined)_\n- **--dds-callout-positive-background-medium** - Positive variant medium background color. (default: var(--dds-background-positive-medium)) _(default: undefined)_\n- **--dds-callout-positive-background-strong** - Positive variant strong background color. (default: var(--dds-background-positive-strong)) _(default: undefined)_\n- **--dds-callout-positive-icon** - Positive variant icon color. (default: var(--dds-icon-positive-subtle)) _(default: undefined)_\n- **--dds-callout-positive-border** - Positive variant border color. (default: var(--dds-border-positive-subtle)) _(default: undefined)_\n- **--dds-callout-warning-background** - Warning variant background color. (default: var(--dds-background-warning-base)) _(default: undefined)_\n- **--dds-callout-warning-background-subtle** - Warning variant subtle background color. (default: var(--dds-background-warning-subtle)) _(default: undefined)_\n- **--dds-callout-warning-background-medium** - Warning variant medium background color. (default: var(--dds-background-warning-medium)) _(default: undefined)_\n- **--dds-callout-warning-background-strong** - Warning variant strong background color. (default: var(--dds-background-warning-strong)) _(default: undefined)_\n- **--dds-callout-warning-icon** - Warning variant icon color. (default: var(--dds-icon-neutral-strong)) _(default: undefined)_\n- **--dds-callout-warning-border** - Warning variant border color. (default: var(--dds-border-warning-subtle)) _(default: undefined)_\n- **--dds-callout-negative-background** - Negative variant background color. (default: var(--dds-background-negative-base)) _(default: undefined)_\n- **--dds-callout-negative-background-subtle** - Negative variant subtle background color. (default: var(--dds-background-negative-subtle)) _(default: undefined)_\n- **--dds-callout-negative-background-medium** - Negative variant medium background color. (default: var(--dds-background-negative-medium)) _(default: undefined)_\n- **--dds-callout-negative-background-strong** - Negative variant strong background color. (default: var(--dds-background-negative-strong)) _(default: undefined)_\n- **--dds-callout-negative-icon** - Negative variant icon color. (default: var(--dds-icon-negative-subtle)) _(default: undefined)_\n- **--dds-callout-negative-border** - Negative variant border color. (default: var(--dds-border-negative-subtle)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main callout container.\n- **content** - The content of the callout.\n- **card-content** - The content of the card.\n- **icon** - The icon of the callout.\n- **title** - The title of the callout.\n- **description** - The description of the callout.\n- **actions** - The actions of the callout.\n- **close** - The close button of the callout.",
320
+ "name": "dap-ds-button",
321
+ "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.",
427
322
  "attributes": [
428
323
  {
429
324
  "name": "variant",
430
- "description": "The variant of the callout",
325
+ "description": "The visual style variant of the button",
431
326
  "values": [
432
- { "name": "brand" },
433
- { "name": "positive" },
434
- { "name": "info" },
435
- { "name": "warning" },
436
- { "name": "negative" }
327
+ { "name": "primary" },
328
+ { "name": "outline" },
329
+ { "name": "subtle" },
330
+ { "name": "subtle-neutral" },
331
+ { "name": "subtle-quiet" },
332
+ { "name": "subtle-quiet-inverted" },
333
+ { "name": "clean" },
334
+ { "name": "primary-inverted" },
335
+ { "name": "outline-inverted" },
336
+ { "name": "subtle-inverted" },
337
+ { "name": "clean-inverted" },
338
+ { "name": "subtle-menu" },
339
+ { "name": "subtle-menu-item" }
437
340
  ]
438
341
  },
439
342
  {
440
- "name": "alignment",
441
- "description": "The alignment of the callout. Can be `vertical` or `horizontal`.",
442
- "values": [{ "name": "vertical" }, { "name": "horizontal" }]
343
+ "name": "size",
344
+ "description": "The size of the button affecting padding and font size",
345
+ "values": [
346
+ { "name": "lg" },
347
+ { "name": "md" },
348
+ { "name": "sm" },
349
+ { "name": "xs" }
350
+ ]
443
351
  },
444
352
  {
445
- "name": "shade",
446
- "description": "The strongness of the callout colors. Can be `subtle`, `base`, `medium`, or `strong`.",
353
+ "name": "loading",
354
+ "description": "Whether the button is in loading state, showing a spinner and disabling interaction",
355
+ "values": []
356
+ },
357
+ {
358
+ "name": "danger",
359
+ "description": "Whether the button represents a destructive action (applies danger styling)",
360
+ "values": []
361
+ },
362
+ {
363
+ "name": "shape",
364
+ "description": "The shape of the button - use 'circle' for icon-only buttons",
365
+ "values": [{ "name": "button" }, { "name": "circle" }]
366
+ },
367
+ {
368
+ "name": "htmlType",
369
+ "description": "The HTML type attribute for form interaction",
447
370
  "values": [
448
- { "name": "subtle" },
449
- { "name": "base" },
450
- { "name": "medium" },
451
- { "name": "strong" }
371
+ { "name": "button" },
372
+ { "name": "submit" },
373
+ { "name": "reset" }
452
374
  ]
453
375
  },
454
376
  {
455
- "name": "noBorder",
456
- "description": "If the callout has a border",
377
+ "name": "href",
378
+ "description": "The URL to navigate to. When present, the button renders as an anchor element",
457
379
  "values": []
458
380
  },
459
381
  {
460
- "name": "closeable",
461
- "description": "If the callout has a close button",
382
+ "name": "target",
383
+ "description": "The target attribute for link navigation",
384
+ "values": [
385
+ { "name": "_blank" },
386
+ { "name": "_self" },
387
+ { "name": "_parent" },
388
+ { "name": "_top" }
389
+ ]
390
+ },
391
+ {
392
+ "name": "rel",
393
+ "description": "The rel attribute for link security and behavior",
462
394
  "values": []
463
395
  },
464
396
  {
465
- "name": "title",
466
- "description": "The header of the callout",
397
+ "name": "loadingTimeout",
398
+ "description": "Controls loading timeout in milliseconds",
467
399
  "values": []
468
400
  },
469
401
  {
470
- "name": "closeButtonLabel",
471
- "description": "The label of the close button",
402
+ "name": "active",
403
+ "description": "Whether the button is active",
404
+ "values": []
405
+ },
406
+ {
407
+ "name": "targetBlankText",
408
+ "description": "The text for the target blank link, applicable when target is _blank. PRO TIP: Use parenthesis to wrap the text",
472
409
  "values": []
473
410
  },
474
411
  {
475
- "name": "opened",
476
- "description": "If the callout is opened",
412
+ "name": "forceRole",
413
+ "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).",
477
414
  "values": []
478
415
  }
479
416
  ],
480
417
  "references": [
481
418
  {
482
419
  "name": "Documentation",
483
- "url": "https://shoelace.style/components/callout"
420
+ "url": "https://shoelace.style/components/button"
484
421
  }
485
422
  ]
486
423
  },
@@ -573,6 +510,69 @@
573
510
  }
574
511
  ]
575
512
  },
513
+ {
514
+ "name": "dap-ds-callout",
515
+ "description": "`dap-ds-callout` is a custom callout component.\n---\n\n\n### **Events:**\n - **dds-close** - Fired when the close button is clicked.\n\n### **Slots:**\n - _default_ - The content of the callout.\n- **title** - The title of the callout.\n- **icon** - The icon of the callout.\n- **actions** - The actions of the callout.\n- **close** - The close button of the callout.\n\n### **CSS Properties:**\n - **--dds-callout-padding** - Padding of the callout content. (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-callout-gap** - Gap between elements in horizontal layout. (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-callout-icon-size** - Size of the icon. (default: var(--dds-spacing-600)) _(default: undefined)_\n- **--dds-callout-title-color** - Color of the title text. (default: var(--dds-text-neutral-strong)) _(default: undefined)_\n- **--dds-callout-description-color** - Color of the description text. (default: var(--dds-text-neutral-base)) _(default: undefined)_\n- **--dds-callout-title-font-size** - Font size of the title. (default: var(--dds-font-base)) _(default: undefined)_\n- **--dds-callout-description-font-size** - Font size of the description. (default: var(--dds-font-base)) _(default: undefined)_\n- **--dds-callout-title-font-weight** - Font weight of the title. (default: var(--dds-font-weight-bold)) _(default: undefined)_\n- **--dds-callout-description-font-weight** - Font weight of the description. (default: var(--dds-font-weight-medium)) _(default: undefined)_\n- **--dds-callout-actions-font-weight** - Font weight of the actions. (default: var(--dds-font-weight-bold)) _(default: undefined)_\n- **--dds-callout-actions-gap** - Gap between action items. (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-callout-content-gap** - Gap between content elements. (default: var(--dds-spacing-100)) _(default: undefined)_\n- **--dds-callout-border-radius** - Border radius of the callout. (default: var(--dds-radius-base)) _(default: undefined)_\n- **--dds-callout-brand-background** - Brand variant background color. (default: var(--dds-background-brand-base)) _(default: undefined)_\n- **--dds-callout-brand-background-subtle** - Brand variant subtle background color. (default: var(--dds-background-brand-subtle)) _(default: undefined)_\n- **--dds-callout-brand-background-medium** - Brand variant medium background color. (default: var(--dds-background-brand-medium)) _(default: undefined)_\n- **--dds-callout-brand-background-strong** - Brand variant strong background color. (default: var(--dds-background-brand-strong)) _(default: undefined)_\n- **--dds-callout-brand-icon** - Brand variant icon color. (default: var(--dds-icon-brand-subtle)) _(default: undefined)_\n- **--dds-callout-brand-border** - Brand variant border color. (default: var(--dds-border-brand-subtle)) _(default: undefined)_\n- **--dds-callout-info-background** - Info variant background color. (default: var(--dds-background-informative-base)) _(default: undefined)_\n- **--dds-callout-info-background-subtle** - Info variant subtle background color. (default: var(--dds-background-informative-subtle)) _(default: undefined)_\n- **--dds-callout-info-background-medium** - Info variant medium background color. (default: var(--dds-background-informative-medium)) _(default: undefined)_\n- **--dds-callout-info-background-strong** - Info variant strong background color. (default: var(--dds-background-informative-strong)) _(default: undefined)_\n- **--dds-callout-info-icon** - Info variant icon color. (default: var(--dds-icon-informative-subtle)) _(default: undefined)_\n- **--dds-callout-info-border** - Info variant border color. (default: var(--dds-border-informative-subtle)) _(default: undefined)_\n- **--dds-callout-positive-background** - Positive variant background color. (default: var(--dds-background-positive-base)) _(default: undefined)_\n- **--dds-callout-positive-background-subtle** - Positive variant subtle background color. (default: var(--dds-background-positive-subtle)) _(default: undefined)_\n- **--dds-callout-positive-background-medium** - Positive variant medium background color. (default: var(--dds-background-positive-medium)) _(default: undefined)_\n- **--dds-callout-positive-background-strong** - Positive variant strong background color. (default: var(--dds-background-positive-strong)) _(default: undefined)_\n- **--dds-callout-positive-icon** - Positive variant icon color. (default: var(--dds-icon-positive-subtle)) _(default: undefined)_\n- **--dds-callout-positive-border** - Positive variant border color. (default: var(--dds-border-positive-subtle)) _(default: undefined)_\n- **--dds-callout-warning-background** - Warning variant background color. (default: var(--dds-background-warning-base)) _(default: undefined)_\n- **--dds-callout-warning-background-subtle** - Warning variant subtle background color. (default: var(--dds-background-warning-subtle)) _(default: undefined)_\n- **--dds-callout-warning-background-medium** - Warning variant medium background color. (default: var(--dds-background-warning-medium)) _(default: undefined)_\n- **--dds-callout-warning-background-strong** - Warning variant strong background color. (default: var(--dds-background-warning-strong)) _(default: undefined)_\n- **--dds-callout-warning-icon** - Warning variant icon color. (default: var(--dds-icon-neutral-strong)) _(default: undefined)_\n- **--dds-callout-warning-border** - Warning variant border color. (default: var(--dds-border-warning-subtle)) _(default: undefined)_\n- **--dds-callout-negative-background** - Negative variant background color. (default: var(--dds-background-negative-base)) _(default: undefined)_\n- **--dds-callout-negative-background-subtle** - Negative variant subtle background color. (default: var(--dds-background-negative-subtle)) _(default: undefined)_\n- **--dds-callout-negative-background-medium** - Negative variant medium background color. (default: var(--dds-background-negative-medium)) _(default: undefined)_\n- **--dds-callout-negative-background-strong** - Negative variant strong background color. (default: var(--dds-background-negative-strong)) _(default: undefined)_\n- **--dds-callout-negative-icon** - Negative variant icon color. (default: var(--dds-icon-negative-subtle)) _(default: undefined)_\n- **--dds-callout-negative-border** - Negative variant border color. (default: var(--dds-border-negative-subtle)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main callout container.\n- **content** - The content of the callout.\n- **card-content** - The content of the card.\n- **icon** - The icon of the callout.\n- **title** - The title of the callout.\n- **description** - The description of the callout.\n- **actions** - The actions of the callout.\n- **close** - The close button of the callout.",
516
+ "attributes": [
517
+ {
518
+ "name": "variant",
519
+ "description": "The variant of the callout",
520
+ "values": [
521
+ { "name": "brand" },
522
+ { "name": "positive" },
523
+ { "name": "info" },
524
+ { "name": "warning" },
525
+ { "name": "negative" }
526
+ ]
527
+ },
528
+ {
529
+ "name": "alignment",
530
+ "description": "The alignment of the callout. Can be `vertical` or `horizontal`.",
531
+ "values": [{ "name": "vertical" }, { "name": "horizontal" }]
532
+ },
533
+ {
534
+ "name": "shade",
535
+ "description": "The strongness of the callout colors. Can be `subtle`, `base`, `medium`, or `strong`.",
536
+ "values": [
537
+ { "name": "subtle" },
538
+ { "name": "base" },
539
+ { "name": "medium" },
540
+ { "name": "strong" }
541
+ ]
542
+ },
543
+ {
544
+ "name": "noBorder",
545
+ "description": "If the callout has a border",
546
+ "values": []
547
+ },
548
+ {
549
+ "name": "closeable",
550
+ "description": "If the callout has a close button",
551
+ "values": []
552
+ },
553
+ {
554
+ "name": "title",
555
+ "description": "The header of the callout",
556
+ "values": []
557
+ },
558
+ {
559
+ "name": "closeButtonLabel",
560
+ "description": "The label of the close button",
561
+ "values": []
562
+ },
563
+ {
564
+ "name": "opened",
565
+ "description": "If the callout is opened",
566
+ "values": []
567
+ }
568
+ ],
569
+ "references": [
570
+ {
571
+ "name": "Documentation",
572
+ "url": "https://shoelace.style/components/callout"
573
+ }
574
+ ]
575
+ },
576
576
  {
577
577
  "name": "dap-ds-card-actions",
578
578
  "description": "A card actions is a container for actions in a card.\n---\n\n\n### **Slots:**\n - _default_ - The content of the card actions.\n\n### **CSS Properties:**\n - **--dds-card-actions-gap** - The gap between items in the card actions. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-card-actions-padding-lg** - The padding for large size card actions. (default: var(--dds-spacing-600)) _(default: undefined)_\n- **--dds-card-actions-padding-md** - The padding for medium size card actions. (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-card-actions-padding-sm** - The padding for small size card actions. (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-card-actions-margin-lg** - The margin for large size card actions spacing. (default: var(--dds-spacing-600)) _(default: undefined)_\n- **--dds-card-actions-margin-md** - The margin for medium size card actions spacing. (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-card-actions-margin-sm** - The margin for small size card actions spacing. (default: var(--dds-spacing-400)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main card actions container.",
@@ -1029,36 +1029,36 @@
1029
1029
  ]
1030
1030
  },
1031
1031
  {
1032
- "name": "dap-ds-copybox-input",
1033
- "description": "A copybox input is a field for copying an input value.\n---\n\n\n### **Events:**\n - **dds-copy** - Fired when the user clicks on the copy button.\n- **dds-change** - Fired when the input value changes.\n- **dds-input** - Fired when the input value changes.\n- **dds-keydown** - Fired when a key is pressed down.\n- **dds-blur** - Fired when the input loses focus.\n- **dds-focus** - Emitted when the input gains focus.\n- **dds-not-allowed** - Emitted when the value cannot be copied.\n\n### **CSS Properties:**\n - **--dds-input-height-xs** - The height of the extra small input. (default: var(--dds-spacing-800)) _(default: undefined)_\n- **--dds-input-height-sm** - The height of the small input. (default: var(--dds-spacing-1000)) _(default: undefined)_\n- **--dds-input-height-lg** - The height of the large input. (default: var(--dds-spacing-1200)) _(default: undefined)_\n- **--dds-input-padding-xs** - The padding of the extra small input. (default: 0 var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-input-padding-sm** - The padding of the small input. (default: 0 var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-input-padding-lg** - The padding of the large input. (default: 0 var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-input-font-size-xs** - The font size of the extra small input. (default: var(--dds-font-sm)) _(default: undefined)_\n- **--dds-input-font-size-sm** - The font size of the small input. (default: var(--dds-font-base)) _(default: undefined)_\n- **--dds-input-font-size-lg** - The font size of the large input. (default: var(--dds-font-lg)) _(default: undefined)_\n- **--dds-input-border** - The border of the input. (default: var(--dds-border-width-base) solid var(--dds-border-neutral-base)) _(default: undefined)_\n- **--dds-input-background** - The background color of the input. (default: var(--dds-fields-background-default)) _(default: undefined)_\n- **--dds-input-text-color** - The text color of the input. (default: var(--dds-text-neutral-base)) _(default: undefined)_\n- **--dds-input-border-radius** - The border radius of the input. (default: var(--dds-radius-base)) _(default: undefined)_\n- **--dds-input-disabled-border** - The border of the disabled input. (default: 0 solid var(--dds-border-neutral-disabled)) _(default: undefined)_\n- **--dds-input-disabled-background** - The background color of the disabled input. (default: var(--dds-fields-background-disabled)) _(default: undefined)_\n- **--dds-input-disabled-text** - The text color of the disabled input. (default: var(--dds-text-neutral-disabled)) _(default: undefined)_\n- **--dds-input-readonly-border** - The border of the readonly input. (default: 0 solid var(--dds-border-neutral-subtle)) _(default: undefined)_\n- **--dds-input-readonly-background** - The background color of the readonly input. (default: var(--dds-fields-background-read-only)) _(default: undefined)_\n- **--dds-input-readonly-text** - The text color of the readonly input. (default: var(--dds-text-neutral-subtle)) _(default: undefined)_\n- **--dds-input-success-border** - The border of the success input. (default: var(--dds-border-width-base) solid var(--dds-border-positive-base)) _(default: undefined)_\n- **--dds-input-error-border** - The border of the error input. (default: var(--dds-border-width-base) solid var(--dds-border-negative-base)) _(default: undefined)_\n- **--dds-input-addon-background** - The background color of the input addon. (default: var(--dds-fields-background-default)) _(default: undefined)_\n- **--dds-input-addon-success-background** - The background color of the success input addon. (default: var(--dds-fields-background-default)) _(default: undefined)_\n- **--dds-input-addon-error-background** - The background color of the error input addon. (default: var(--dds-fields-background-default)) _(default: undefined)_\n- **--dds-input-addon-border-before** - The border of the addon before the input. (default: var(--dds-border-width-base) solid var(--dds-border-neutral-base)) _(default: undefined)_\n- **--dds-input-addon-border-after** - The border of the addon after the input. (default: var(--dds-border-width-base) solid var(--dds-border-neutral-base)) _(default: undefined)_\n- **--dds-input-addon-border-width-before** - The border width of the addon before the input. (default: var(--dds-border-width-base) 0 var(--dds-border-width-base) var(--dds-border-width-base)) _(default: undefined)_\n- **--dds-input-addon-border-width-after** - The border width of the addon after the input. (default: var(--dds-border-width-base) var(--dds-border-width-base) var(--dds-border-width-base) 0) _(default: undefined)_\n- **--dds-input-addon-success-border** - The border of the success addon. (default: var(--dds-border-width-base) solid var(--dds-border-positive-base)) _(default: undefined)_\n- **--dds-input-addon-success-border-before** - The border of the success addon before the input. (default: var(--dds-border-width-base) solid var(--dds-border-positive-base)) _(default: undefined)_\n- **--dds-input-addon-success-border-after** - The border of the success addon after the input. (default: var(--dds-border-width-base) solid var(--dds-border-positive-base)) _(default: undefined)_\n- **--dds-input-addon-success-border-width-before** - The border width of the success addon before the input. (default: var(--dds-border-width-base) 0 var(--dds-border-width-base) var(--dds-border-width-base)) _(default: undefined)_\n- **--dds-input-addon-success-border-width-after** - The border width of the success addon after the input. (default: var(--dds-border-width-base) var(--dds-border-width-base) var(--dds-border-width-base) 0) _(default: undefined)_\n- **--dds-input-addon-error-border-before** - The border of the error addon before the input. (default: var(--dds-border-width-base) solid var(--dds-border-negative-base)) _(default: undefined)_\n- **--dds-input-addon-error-border-after** - The border of the error addon after the input. (default: var(--dds-border-width-base) solid var(--dds-border-negative-base)) _(default: undefined)_\n- **--dds-input-addon-error-border-width-before** - The border width of the error addon before the input. (default: var(--dds-border-width-base) 0 var(--dds-border-width-base) var(--dds-border-width-base)) _(default: undefined)_\n- **--dds-input-addon-error-border-width-after** - The border width of the error addon after the input. (default: var(--dds-border-width-base) var(--dds-border-width-base) var(--dds-border-width-base) 0) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The base container of the component.\n- **postfix** - The inner postfix icon part of the component.\n- **button** - The button of the component.\n- **copy-button-base** - The base of the copy button.\n- **copy-button-content** - The content of the copy button.\n- **copy-icon** - The copy icon of the component.\n- **copy-icon-base** - The base of the copy icon.",
1032
+ "name": "dap-ds-dap-badge",
1033
+ "description": "A DÁP badge is a brand element showing the use of this system design library.\n---\n\n\n### **Slots:**\n - _default_ - Description of badge *\n\n### **CSS Properties:**\n - **--dds-badge-padding-sm** - Custom padding for the small badge (default: var(--dds-spacing-200) var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-badge-padding-lg** - Custom padding for the large badge (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-badge-border-width** - Custom border width for the badge (default: var(--dds-border-width-base)) _(default: undefined)_\n- **--dds-badge-border-color** - Custom border color for the badge (default: var(--dds-border-neutral-divider)) _(default: undefined)_\n- **--dds-badge-border-radius** - Custom border radius for the badge (default: var(--dds-radius-base)) _(default: undefined)_\n- **--dds-badge-color** - Custom text color for the badge (default: var(--dds-text-neutral-base)) _(default: undefined)_\n- **--dds-badge-gap** - Custom gap between icon and text (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-badge-font-size-sm** - Custom font size for the small badge (default: var(--dds-font-xs)) _(default: undefined)_\n- **--dds-badge-font-size-lg** - Custom font size for the large badge (default: var(--dds-font-xs)) _(default: undefined)_\n- **--dds-badge-font-weight** - Custom font weight for the badge (default: var(--dds-font-weight-medium)) _(default: undefined)_\n- **--dds-badge-line-height** - Custom line height for the badge (default: var(--dds-font-line-height-large)) _(default: undefined)_\n- **--dds-badge-border-color-normal** - Custom border color for the normal variant (default: var(--dds-transparent-black-medium)) _(default: undefined)_\n- **--dds-badge-background-color-normal** - Custom background color for the normal variant (default: var(--dds-background-brand-subtle)) _(default: undefined)_\n- **--dds-badge-color-normal** - Custom text color for the normal variant (default: var(--dds-text-brand-subtle)) _(default: undefined)_\n- **--dds-badge-border-color-inverted** - Custom border color for the inverted variant (default: var(--dds-transparent-white-medium)) _(default: undefined)_\n- **--dds-badge-background-color-inverted** - Custom background color for the inverted variant (default: var(--dds-background-brand-base-inverted)) _(default: undefined)_\n- **--dds-badge-color-inverted** - Custom text color for the inverted variant (default: var(--dds-text-neutral-inverted)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - Main badge container\n- **icon** - Badge icon\n- **text** - Badge text",
1034
1034
  "attributes": [
1035
1035
  {
1036
- "name": "copyButtonAriaLabel",
1037
- "description": "The aria label of the copy button.",
1038
- "values": []
1036
+ "name": "variant",
1037
+ "description": "The variant of the DÁP badge",
1038
+ "values": [{ "name": "normal" }, { "name": "inverted" }]
1039
1039
  }
1040
1040
  ],
1041
1041
  "references": [
1042
1042
  {
1043
1043
  "name": "Documentation",
1044
- "url": "https://shoelace.style/components/copybox-input"
1044
+ "url": "https://shoelace.style/components/dap-badge"
1045
1045
  }
1046
1046
  ]
1047
1047
  },
1048
1048
  {
1049
- "name": "dap-ds-dap-badge",
1050
- "description": "A DÁP badge is a brand element showing the use of this system design library.\n---\n\n\n### **Slots:**\n - _default_ - Description of badge *\n\n### **CSS Properties:**\n - **--dds-badge-padding-sm** - Custom padding for the small badge (default: var(--dds-spacing-200) var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-badge-padding-lg** - Custom padding for the large badge (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-badge-border-width** - Custom border width for the badge (default: var(--dds-border-width-base)) _(default: undefined)_\n- **--dds-badge-border-color** - Custom border color for the badge (default: var(--dds-border-neutral-divider)) _(default: undefined)_\n- **--dds-badge-border-radius** - Custom border radius for the badge (default: var(--dds-radius-base)) _(default: undefined)_\n- **--dds-badge-color** - Custom text color for the badge (default: var(--dds-text-neutral-base)) _(default: undefined)_\n- **--dds-badge-gap** - Custom gap between icon and text (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-badge-font-size-sm** - Custom font size for the small badge (default: var(--dds-font-xs)) _(default: undefined)_\n- **--dds-badge-font-size-lg** - Custom font size for the large badge (default: var(--dds-font-xs)) _(default: undefined)_\n- **--dds-badge-font-weight** - Custom font weight for the badge (default: var(--dds-font-weight-medium)) _(default: undefined)_\n- **--dds-badge-line-height** - Custom line height for the badge (default: var(--dds-font-line-height-large)) _(default: undefined)_\n- **--dds-badge-border-color-normal** - Custom border color for the normal variant (default: var(--dds-transparent-black-medium)) _(default: undefined)_\n- **--dds-badge-background-color-normal** - Custom background color for the normal variant (default: var(--dds-background-brand-subtle)) _(default: undefined)_\n- **--dds-badge-color-normal** - Custom text color for the normal variant (default: var(--dds-text-brand-subtle)) _(default: undefined)_\n- **--dds-badge-border-color-inverted** - Custom border color for the inverted variant (default: var(--dds-transparent-white-medium)) _(default: undefined)_\n- **--dds-badge-background-color-inverted** - Custom background color for the inverted variant (default: var(--dds-background-brand-base-inverted)) _(default: undefined)_\n- **--dds-badge-color-inverted** - Custom text color for the inverted variant (default: var(--dds-text-neutral-inverted)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - Main badge container\n- **icon** - Badge icon\n- **text** - Badge text",
1049
+ "name": "dap-ds-copybox-input",
1050
+ "description": "A copybox input is a field for copying an input value.\n---\n\n\n### **Events:**\n - **dds-copy** - Fired when the user clicks on the copy button.\n- **dds-change** - Fired when the input value changes.\n- **dds-input** - Fired when the input value changes.\n- **dds-keydown** - Fired when a key is pressed down.\n- **dds-blur** - Fired when the input loses focus.\n- **dds-focus** - Emitted when the input gains focus.\n- **dds-not-allowed** - Emitted when the value cannot be copied.\n\n### **CSS Properties:**\n - **--dds-input-height-xs** - The height of the extra small input. (default: var(--dds-spacing-800)) _(default: undefined)_\n- **--dds-input-height-sm** - The height of the small input. (default: var(--dds-spacing-1000)) _(default: undefined)_\n- **--dds-input-height-lg** - The height of the large input. (default: var(--dds-spacing-1200)) _(default: undefined)_\n- **--dds-input-padding-xs** - The padding of the extra small input. (default: 0 var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-input-padding-sm** - The padding of the small input. (default: 0 var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-input-padding-lg** - The padding of the large input. (default: 0 var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-input-font-size-xs** - The font size of the extra small input. (default: var(--dds-font-sm)) _(default: undefined)_\n- **--dds-input-font-size-sm** - The font size of the small input. (default: var(--dds-font-base)) _(default: undefined)_\n- **--dds-input-font-size-lg** - The font size of the large input. (default: var(--dds-font-lg)) _(default: undefined)_\n- **--dds-input-border** - The border of the input. (default: var(--dds-border-width-base) solid var(--dds-border-neutral-base)) _(default: undefined)_\n- **--dds-input-background** - The background color of the input. (default: var(--dds-fields-background-default)) _(default: undefined)_\n- **--dds-input-text-color** - The text color of the input. (default: var(--dds-text-neutral-base)) _(default: undefined)_\n- **--dds-input-border-radius** - The border radius of the input. (default: var(--dds-radius-base)) _(default: undefined)_\n- **--dds-input-disabled-border** - The border of the disabled input. (default: 0 solid var(--dds-border-neutral-disabled)) _(default: undefined)_\n- **--dds-input-disabled-background** - The background color of the disabled input. (default: var(--dds-fields-background-disabled)) _(default: undefined)_\n- **--dds-input-disabled-text** - The text color of the disabled input. (default: var(--dds-text-neutral-disabled)) _(default: undefined)_\n- **--dds-input-readonly-border** - The border of the readonly input. (default: 0 solid var(--dds-border-neutral-subtle)) _(default: undefined)_\n- **--dds-input-readonly-background** - The background color of the readonly input. (default: var(--dds-fields-background-read-only)) _(default: undefined)_\n- **--dds-input-readonly-text** - The text color of the readonly input. (default: var(--dds-text-neutral-subtle)) _(default: undefined)_\n- **--dds-input-success-border** - The border of the success input. (default: var(--dds-border-width-base) solid var(--dds-border-positive-base)) _(default: undefined)_\n- **--dds-input-error-border** - The border of the error input. (default: var(--dds-border-width-base) solid var(--dds-border-negative-base)) _(default: undefined)_\n- **--dds-input-addon-background** - The background color of the input addon. (default: var(--dds-fields-background-default)) _(default: undefined)_\n- **--dds-input-addon-success-background** - The background color of the success input addon. (default: var(--dds-fields-background-default)) _(default: undefined)_\n- **--dds-input-addon-error-background** - The background color of the error input addon. (default: var(--dds-fields-background-default)) _(default: undefined)_\n- **--dds-input-addon-border-before** - The border of the addon before the input. (default: var(--dds-border-width-base) solid var(--dds-border-neutral-base)) _(default: undefined)_\n- **--dds-input-addon-border-after** - The border of the addon after the input. (default: var(--dds-border-width-base) solid var(--dds-border-neutral-base)) _(default: undefined)_\n- **--dds-input-addon-border-width-before** - The border width of the addon before the input. (default: var(--dds-border-width-base) 0 var(--dds-border-width-base) var(--dds-border-width-base)) _(default: undefined)_\n- **--dds-input-addon-border-width-after** - The border width of the addon after the input. (default: var(--dds-border-width-base) var(--dds-border-width-base) var(--dds-border-width-base) 0) _(default: undefined)_\n- **--dds-input-addon-success-border** - The border of the success addon. (default: var(--dds-border-width-base) solid var(--dds-border-positive-base)) _(default: undefined)_\n- **--dds-input-addon-success-border-before** - The border of the success addon before the input. (default: var(--dds-border-width-base) solid var(--dds-border-positive-base)) _(default: undefined)_\n- **--dds-input-addon-success-border-after** - The border of the success addon after the input. (default: var(--dds-border-width-base) solid var(--dds-border-positive-base)) _(default: undefined)_\n- **--dds-input-addon-success-border-width-before** - The border width of the success addon before the input. (default: var(--dds-border-width-base) 0 var(--dds-border-width-base) var(--dds-border-width-base)) _(default: undefined)_\n- **--dds-input-addon-success-border-width-after** - The border width of the success addon after the input. (default: var(--dds-border-width-base) var(--dds-border-width-base) var(--dds-border-width-base) 0) _(default: undefined)_\n- **--dds-input-addon-error-border-before** - The border of the error addon before the input. (default: var(--dds-border-width-base) solid var(--dds-border-negative-base)) _(default: undefined)_\n- **--dds-input-addon-error-border-after** - The border of the error addon after the input. (default: var(--dds-border-width-base) solid var(--dds-border-negative-base)) _(default: undefined)_\n- **--dds-input-addon-error-border-width-before** - The border width of the error addon before the input. (default: var(--dds-border-width-base) 0 var(--dds-border-width-base) var(--dds-border-width-base)) _(default: undefined)_\n- **--dds-input-addon-error-border-width-after** - The border width of the error addon after the input. (default: var(--dds-border-width-base) var(--dds-border-width-base) var(--dds-border-width-base) 0) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The base container of the component.\n- **postfix** - The inner postfix icon part of the component.\n- **button** - The button of the component.\n- **copy-button-base** - The base of the copy button.\n- **copy-button-content** - The content of the copy button.\n- **copy-icon** - The copy icon of the component.\n- **copy-icon-base** - The base of the copy icon.",
1051
1051
  "attributes": [
1052
1052
  {
1053
- "name": "variant",
1054
- "description": "The variant of the DÁP badge",
1055
- "values": [{ "name": "normal" }, { "name": "inverted" }]
1053
+ "name": "copyButtonAriaLabel",
1054
+ "description": "The aria label of the copy button.",
1055
+ "values": []
1056
1056
  }
1057
1057
  ],
1058
1058
  "references": [
1059
1059
  {
1060
1060
  "name": "Documentation",
1061
- "url": "https://shoelace.style/components/dap-badge"
1061
+ "url": "https://shoelace.style/components/copybox-input"
1062
1062
  }
1063
1063
  ]
1064
1064
  },
@@ -1796,6 +1796,11 @@
1796
1796
  "description": "Aria label for the dropzone.",
1797
1797
  "values": []
1798
1798
  },
1799
+ {
1800
+ "name": "dropzoneFocusable",
1801
+ "description": "Whether the dropzone is in the tab order and exposes button keyboard behavior (default: true).",
1802
+ "values": []
1803
+ },
1799
1804
  {
1800
1805
  "name": "thumbnailSize",
1801
1806
  "description": "Size of the thumbnail preview in the built-in file list",
@@ -2423,6 +2428,17 @@
2423
2428
  }
2424
2429
  ]
2425
2430
  },
2431
+ {
2432
+ "name": "dap-ds-official-website-banner",
2433
+ "description": "An official website banner is a banner that displays that the website is an official website.\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-official-banner-background-color** - The background color of the official website banner (default: var(--dds-background-brand-medium-inverted)) _(default: undefined)_\n- **--dds-official-banner-text-color** - The text color of the official website banner (default: var(--dds-text-neutral-on-inverted)) _(default: undefined)_\n- **--dds-official-banner-heading-hover-color** - The heading hover color of the official website banner (default: var(--dds-background-brand-medium-inverted)) _(default: undefined)_\n- **--dds-official-banner-border-radius** - The border radius of the official website banner (default: 0) _(default: undefined)_\n- **--dds-official-banner-icon-color** - The icon color of the official website banner (default: var(--dds-text-neutral-on-inverted)) _(default: undefined)_\n- **--dds-official-banner-icon-color-hover** - The icon hover color of the opener icon official website banner (default: var(--dds-text-neutral-on-inverted)) _(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.",
2434
+ "attributes": [],
2435
+ "references": [
2436
+ {
2437
+ "name": "Documentation",
2438
+ "url": "https://shoelace.style/components/official-website-banner"
2439
+ }
2440
+ ]
2441
+ },
2426
2442
  {
2427
2443
  "name": "dap-ds-number-input",
2428
2444
  "description": "A number input component.\n---\n\n\n### **Events:**\n - **dds-change** - Fired when the input value changes.\n- **dds-input** - Fired when the input value changes.\n- **dds-keydown** - Fired when a key is pressed down.\n- **dds-blur** - Fired when the input loses focus.\n- **dds-focus** - Emitted when the input gains focus.\n\n### **Slots:**\n - **feedback-icon** - The custom icon of the feedback.\n\n### **CSS Properties:**\n - **--dds-input-height-xs** - The height of the extra small input. (default: var(--dds-spacing-800) ). _(default: undefined)_\n- **--dds-input-height-sm** - The height of the small input. (default: var(--dds-spacing-1000)). _(default: undefined)_\n- **--dds-input-height-lg** - The height of the large input. (default: var(--dds-spacing-1200)). _(default: undefined)_\n- **--dds-input-padding-xs** - The padding of the extra small input. (default: 0 var(--dds-spacing-200)). _(default: undefined)_\n- **--dds-input-padding-sm** - The padding of the small input. (default: 0 var(--dds-spacing-300)). _(default: undefined)_\n- **--dds-input-padding-lg** - The padding of the large input. (default: 0 var(--dds-spacing-400)). _(default: undefined)_\n- **--dds-input-font-size-xs** - The font size of the extra small input. (default: var(--dds-font-sm)). _(default: undefined)_\n- **--dds-input-font-size-sm** - The font size of the small input. (default: var(--dds-font-base)). _(default: undefined)_\n- **--dds-input-font-size-lg** - The font size of the large input. (default: var(--dds-font-lg)). _(default: undefined)_\n- **--dds-input-border** - The border of the input. (default: var(--dds-border-width-base) solid var(--dds-border-neutral-base)). _(default: undefined)_\n- **--dds-input-background** - The background color of the input. (default: var(--dds-fields-background-default)). _(default: undefined)_\n- **--dds-input-text-color** - The text color of the input. (default: var(--dds-text-neutral-base)). _(default: undefined)_\n- **--dds-input-border-radius** - The border radius of the input. (default: var(--dds-radius-base)). _(default: undefined)_\n- **--dds-input-disabled-border** - The border of the disabled input. (default: 0 solid var(--dds-border-neutral-disabled)). _(default: undefined)_\n- **--dds-input-disabled-background** - The background color of the disabled input. (default: var(--dds-fields-background-disabled)). _(default: undefined)_\n- **--dds-input-disabled-text** - The text color of the disabled input. (default: var(--dds-text-neutral-disabled)). _(default: undefined)_\n- **--dds-input-readonly-border** - The border of the readonly input. (default: 0 solid var(--dds-border-neutral-subtle)). _(default: undefined)_\n- **--dds-input-readonly-background** - The background color of the readonly input. (default: var(--dds-fields-background-read-only)). _(default: undefined)_\n- **--dds-input-readonly-text** - The text color of the readonly input. (default: var(--dds-text-neutral-subtle)). _(default: undefined)_\n- **--dds-input-success-border** - The border of the success input. (default: var(--dds-border-width-base) solid var(--dds-border-positive-base)). _(default: undefined)_\n- **--dds-input-error-border** - The border of the error input. (default: var(--dds-border-width-base) solid var(--dds-border-negative-base)). _(default: undefined)_\n- **--dds-input-addon-background** - The background color of the input addon. (default: var(--dds-fields-background-default)). _(default: undefined)_\n- **--dds-input-addon-success-background** - The background color of the success input addon. (default: var(--dds-fields-background-default)). _(default: undefined)_\n- **--dds-input-addon-error-background** - The background color of the error input addon. (default: var(--dds-fields-background-default)). _(default: undefined)_\n- **--dds-input-addon-border-before** - The border of the addon before the input. (default: var(--dds-border-width-base) solid var(--dds-border-neutral-base)). _(default: undefined)_\n- **--dds-input-addon-border-after** - The border of the addon after the input. (default: var(--dds-border-width-base) solid var(--dds-border-neutral-base)). _(default: undefined)_\n- **--dds-input-addon-border-width-before** - The border width of the addon before the input. (default: var(--dds-border-width-base) 0 var(--dds-border-width-base) var(--dds-border-width-base)). _(default: undefined)_\n- **--dds-input-addon-border-width-after** - The border width of the addon after the input. (default: var(--dds-border-width-base) var(--dds-border-width-base) var(--dds-border-width-base) 0). _(default: undefined)_\n- **--dds-input-addon-success-border** - The border of the success addon. (default: var(--dds-border-width-base) solid var(--dds-border-positive-base)). _(default: undefined)_\n- **--dds-input-addon-success-border-before** - The border of the success addon before the input. (default: var(--dds-border-width-base) solid var(--dds-border-positive-base)). _(default: undefined)_\n- **--dds-input-addon-success-border-after** - The border of the success addon after the input. (default: var(--dds-border-width-base) solid var(--dds-border-positive-base)). _(default: undefined)_\n- **--dds-input-addon-success-border-width-before** - The border width of the success addon before the input. (default: var(--dds-border-width-base) 0 var(--dds-border-width-base) var(--dds-border-width-base)). _(default: undefined)_\n- **--dds-input-addon-success-border-width-after** - The border width of the success addon after the input. (default: var(--dds-border-width-base) var(--dds-border-width-base) var(--dds-border-width-base) 0). _(default: undefined)_\n- **--dds-input-addon-error-border-before** - The border of the error addon before the input. (default: var(--dds-border-width-base) solid var(--dds-border-negative-base)). _(default: undefined)_\n- **--dds-input-addon-error-border-after** - The border of the error addon after the input. (default: var(--dds-border-width-base) solid var(--dds-border-negative-base)). _(default: undefined)_\n- **--dds-input-addon-error-border-width-before** - The border width of the error addon before the input. (default: var(--dds-border-width-base) 0 var(--dds-border-width-base) var(--dds-border-width-base)). _(default: undefined)_\n- **--dds-input-addon-error-border-width-after** - The border width of the error addon after the input. (default: var(--dds-border-width-base) var(--dds-border-width-base) var(--dds-border-width-base) 0). _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main number input container.\n- **input** - The input element.\n- **label** - The label of the input.\n- **description** - The description of the input.\n- **feedback** - The feedback of the input.\n- **tooltip** - The tooltip of the input.\n- **addon-before** - The addon before the input.\n- **addon-after** - The addon after the input.\n- **prefix** - The prefix of the input.\n- **postfix** - The postfix of the input.\n- **decrement-button** - The decrement button of the input.\n- **increment-button** - The increment button of the input.\n- **decrement-button-base** - The base of the decrement button.\n- **increment-button-base** - The base of the increment button.\n- **decrement-button-content** - The content of the decrement button.\n- **increment-button-content** - The content of the increment button.",
@@ -2470,17 +2486,6 @@
2470
2486
  }
2471
2487
  ]
2472
2488
  },
2473
- {
2474
- "name": "dap-ds-official-website-banner",
2475
- "description": "An official website banner is a banner that displays that the website is an official website.\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-official-banner-background-color** - The background color of the official website banner (default: var(--dds-background-brand-medium-inverted)) _(default: undefined)_\n- **--dds-official-banner-text-color** - The text color of the official website banner (default: var(--dds-text-neutral-on-inverted)) _(default: undefined)_\n- **--dds-official-banner-heading-hover-color** - The heading hover color of the official website banner (default: var(--dds-background-brand-medium-inverted)) _(default: undefined)_\n- **--dds-official-banner-border-radius** - The border radius of the official website banner (default: 0) _(default: undefined)_\n- **--dds-official-banner-icon-color** - The icon color of the official website banner (default: var(--dds-text-neutral-on-inverted)) _(default: undefined)_\n- **--dds-official-banner-icon-color-hover** - The icon hover color of the opener icon official website banner (default: var(--dds-text-neutral-on-inverted)) _(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.",
2476
- "attributes": [],
2477
- "references": [
2478
- {
2479
- "name": "Documentation",
2480
- "url": "https://shoelace.style/components/official-website-banner"
2481
- }
2482
- ]
2483
- },
2484
2489
  {
2485
2490
  "name": "dap-ds-option-group",
2486
2491
  "description": "An option group is a container for grouping related option items.\nUsed with dap-ds-select to create grouped options that render as native optgroup elements.\n---\n\n\n### **Slots:**\n - _default_ - The option items in this group.\n\n### **CSS Parts:**\n - **base** - The main option group container.\n- **label** - The label of the option group.",
@@ -3100,6 +3105,38 @@
3100
3105
  }
3101
3106
  ]
3102
3107
  },
3108
+ {
3109
+ "name": "dap-ds-skip-link",
3110
+ "description": "A skip link is a link that allows keyboard users to skip to the main content of a page.\n---\n\n\n### **Slots:**\n - _default_ - The content of the skip link.\n\n### **CSS Properties:**\n - **--dds-skip-link-border-color** - Border color for the high contrast outline (default: var(--dds-border-neutral-transparent-interactive, #fff500)) _(default: undefined)_\n- **--dds-skip-link-border-width** - Border width for the high contrast outline (default: var(--dds-border-width-large)) _(default: undefined)_\n- **--dds-skip-link-border-width-active** - Border width for the active state (default: var(--dds-border-width-xlarge)) _(default: undefined)_\n- **--dds-skip-link-border-radius** - Border radius of the skip link (default: var(--dds-radius-small)) _(default: undefined)_\n- **--dds-skip-link-padding-sm** - Padding for small size variant (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-skip-link-padding-lg** - Padding for large size variant (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-skip-link-text-underline-offset** - Underline offset for the text (default: 3px) _(default: undefined)_\n- **--dds-skip-link-z-index** - Z-index of the skip link (default: var(--dds-z-index-100)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main skip link container.\n- **text** - The text container of the skip link.\n- **high-contrast** - The high contrast outline container.",
3111
+ "attributes": [
3112
+ {
3113
+ "name": "placement",
3114
+ "description": "The placement of the skip link.",
3115
+ "values": [{ "name": "left" }, { "name": "center" }]
3116
+ },
3117
+ {
3118
+ "name": "href",
3119
+ "description": "The href of the skip link",
3120
+ "values": []
3121
+ },
3122
+ {
3123
+ "name": "size",
3124
+ "description": "The size of the skip link",
3125
+ "values": [{ "name": "sm" }, { "name": "lg" }]
3126
+ },
3127
+ {
3128
+ "name": "noUnderline",
3129
+ "description": "Whether the skip link should have an underline",
3130
+ "values": []
3131
+ }
3132
+ ],
3133
+ "references": [
3134
+ {
3135
+ "name": "Documentation",
3136
+ "url": "https://shoelace.style/components/skip-link"
3137
+ }
3138
+ ]
3139
+ },
3103
3140
  {
3104
3141
  "name": "dap-ds-skeleton",
3105
3142
  "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.",
@@ -3150,38 +3187,6 @@
3150
3187
  }
3151
3188
  ]
3152
3189
  },
3153
- {
3154
- "name": "dap-ds-skip-link",
3155
- "description": "A skip link is a link that allows keyboard users to skip to the main content of a page.\n---\n\n\n### **Slots:**\n - _default_ - The content of the skip link.\n\n### **CSS Properties:**\n - **--dds-skip-link-border-color** - Border color for the high contrast outline (default: var(--dds-border-neutral-transparent-interactive, #fff500)) _(default: undefined)_\n- **--dds-skip-link-border-width** - Border width for the high contrast outline (default: var(--dds-border-width-large)) _(default: undefined)_\n- **--dds-skip-link-border-width-active** - Border width for the active state (default: var(--dds-border-width-xlarge)) _(default: undefined)_\n- **--dds-skip-link-border-radius** - Border radius of the skip link (default: var(--dds-radius-small)) _(default: undefined)_\n- **--dds-skip-link-padding-sm** - Padding for small size variant (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-skip-link-padding-lg** - Padding for large size variant (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-skip-link-text-underline-offset** - Underline offset for the text (default: 3px) _(default: undefined)_\n- **--dds-skip-link-z-index** - Z-index of the skip link (default: var(--dds-z-index-100)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main skip link container.\n- **text** - The text container of the skip link.\n- **high-contrast** - The high contrast outline container.",
3156
- "attributes": [
3157
- {
3158
- "name": "placement",
3159
- "description": "The placement of the skip link.",
3160
- "values": [{ "name": "left" }, { "name": "center" }]
3161
- },
3162
- {
3163
- "name": "href",
3164
- "description": "The href of the skip link",
3165
- "values": []
3166
- },
3167
- {
3168
- "name": "size",
3169
- "description": "The size of the skip link",
3170
- "values": [{ "name": "sm" }, { "name": "lg" }]
3171
- },
3172
- {
3173
- "name": "noUnderline",
3174
- "description": "Whether the skip link should have an underline",
3175
- "values": []
3176
- }
3177
- ],
3178
- "references": [
3179
- {
3180
- "name": "Documentation",
3181
- "url": "https://shoelace.style/components/skip-link"
3182
- }
3183
- ]
3184
- },
3185
3190
  {
3186
3191
  "name": "dap-ds-snackbar-message",
3187
3192
  "description": "The Snackbar component shows a sliding message to the user.\n---\n\n\n### **Events:**\n - **dds-close** - Fires when the snackbar closes.\n\n### **Slots:**\n - **default** - The content of the snackbar.\n\n### **CSS Properties:**\n - **--dds-snackbar-width** - Width of the snackbar (default: clamp(var(--dds-spacing-6000), 20vw, var(--dds-containers-xsmall))) _(default: undefined)_\n- **--dds-snackbar-gap** - Gap between snackbar elements (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-snackbar-padding** - Padding inside the snackbar (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-snackbar-margin-bottom** - Bottom margin of the snackbar (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-snackbar-transition** - Transition property for the snackbar (default: transform var(--dds-transition-slow) var(--dds-easing-ease-out)allow-discrete, opacity var(--dds-transition-slow) var(--dds-easing-ease-out) allow-discrete, margin var(--dds-transition-slow) var(--dds-easing-ease-out) allow-discrete, box-shadow var(--dds-transition-slow) var(--dds-easing-ease-out) allow-discrete) _(default: undefined)_\n- **--dds-snackbar-border-radius** - Border radius of the snackbar (default: var(--dds-radius-base)) _(default: undefined)_\n- **--dds-snackbar-font-size** - Font size used in the snackbar (default: var(--dds-font-sm)) _(default: undefined)_\n- **--dds-snackbar-background** - Background color of the snackbar (default: var(--dds-snackbar-error-background)) _(default: undefined)_\n- **--dds-snackbar-border** - Border color of the snackbar (default: var(--dds-snackbar-error-border)) _(default: undefined)_\n- **--dds-snackbar-text** - Text color of the snackbar (default: var(--dds-snackbar-variant-text)) _(default: undefined)_\n- **--dds-snackbar-icon** - Icon color of the snackbar (default: var(--dds-snackbar-variant-icon)) _(default: undefined)_\n- **--dds-snackbar-link** - Link color of the snackbar (default: var(--dds-snackbar-variant-link)) _(default: undefined)_\n- **--dds-snackbar-information-background** - Background color for information variant (default: var(--dds-background-informative-medium)) _(default: undefined)_\n- **--dds-snackbar-information-border** - Border color for information variant (default: var(--dds-border-width-base) solidvar(--dds-border-informative-subtle)) _(default: undefined)_\n- **--dds-snackbar-information-icon** - Icon color for information variant (default: var(--dds-icon-informative-subtle)) _(default: undefined)_\n- **--dds-snackbar-success-background** - Background color for success variant (default: var(--dds-background-positive-medium)) _(default: undefined)_\n- **--dds-snackbar-success-border** - Border color for success variant (default: var(--dds-border-width-base) solidvar(--dds-border-positive-subtle)) _(default: undefined)_\n- **--dds-snackbar-success-icon** - Icon color for success variant (default: var(--dds-icon-positive-subtle)) _(default: undefined)_\n- **--dds-snackbar-error-background** - Background color for error variant (default: var(--dds-background-negative-medium)) _(default: undefined)_\n- **--dds-snackbar-error-border** - Border color for error variant (default: var(--dds-border-width-base) solidvar(--dds-border-negative-subtle)) _(default: undefined)_\n- **--dds-snackbar-error-icon** - Icon color for error variant (default: var(--dds-icon-negative-subtle)) _(default: undefined)_\n- **--dds-snackbar-variant-text** - Text color for information, success, and error variants (default: var(--dds-text-neutral-base)) _(default: undefined)_\n- **--dds-snackbar-variant-icon** - Icon color for information, success, and error variants (default: var(--dds-text-neutral-base)) _(default: undefined)_\n- **--dds-snackbar-variant-link** - Link color for information, success, and error variants (default: var(--dds-text-neutral-base)) _(default: undefined)_\n- **--dds-snackbar-animation-duration** - Duration of entrance animations (default: 0.3s) _(default: undefined)_\n- **--dds-snackbar-animation-timing** - Timing function for animations (default: ease-out) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - Main snackbar container.\n- **text** - The text part of the snackbar.\n- **closebutton** - The close button part of the component.\n- **icon** - The icon part of the close button.",
@@ -4012,7 +4017,7 @@
4012
4017
  ]
4013
4018
  },
4014
4019
  {
4015
- "name": "dap-ds-icon-arrow-down-line",
4020
+ "name": "dap-ds-icon-home-6-line",
4016
4021
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
4017
4022
  "attributes": [
4018
4023
  {
@@ -4039,12 +4044,12 @@
4039
4044
  "references": [
4040
4045
  {
4041
4046
  "name": "Documentation",
4042
- "url": "https://shoelace.style/components/icon-arrow-down-line"
4047
+ "url": "https://shoelace.style/components/icon-home-6-line"
4043
4048
  }
4044
4049
  ]
4045
4050
  },
4046
4051
  {
4047
- "name": "dap-ds-icon-arrow-down-s-fill",
4052
+ "name": "dap-ds-icon-arrow-down-line",
4048
4053
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
4049
4054
  "attributes": [
4050
4055
  {
@@ -4071,12 +4076,12 @@
4071
4076
  "references": [
4072
4077
  {
4073
4078
  "name": "Documentation",
4074
- "url": "https://shoelace.style/components/icon-arrow-down-s-fill"
4079
+ "url": "https://shoelace.style/components/icon-arrow-down-line"
4075
4080
  }
4076
4081
  ]
4077
4082
  },
4078
4083
  {
4079
- "name": "dap-ds-icon-arrow-down-s-line",
4084
+ "name": "dap-ds-icon-arrow-down-s-fill",
4080
4085
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
4081
4086
  "attributes": [
4082
4087
  {
@@ -4103,12 +4108,12 @@
4103
4108
  "references": [
4104
4109
  {
4105
4110
  "name": "Documentation",
4106
- "url": "https://shoelace.style/components/icon-arrow-down-s-line"
4111
+ "url": "https://shoelace.style/components/icon-arrow-down-s-fill"
4107
4112
  }
4108
4113
  ]
4109
4114
  },
4110
4115
  {
4111
- "name": "dap-ds-icon-arrow-left-down-line",
4116
+ "name": "dap-ds-icon-arrow-down-s-line",
4112
4117
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
4113
4118
  "attributes": [
4114
4119
  {
@@ -4135,12 +4140,12 @@
4135
4140
  "references": [
4136
4141
  {
4137
4142
  "name": "Documentation",
4138
- "url": "https://shoelace.style/components/icon-arrow-left-down-line"
4143
+ "url": "https://shoelace.style/components/icon-arrow-down-s-line"
4139
4144
  }
4140
4145
  ]
4141
4146
  },
4142
4147
  {
4143
- "name": "dap-ds-icon-arrow-left-l-line",
4148
+ "name": "dap-ds-icon-arrow-left-down-line",
4144
4149
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
4145
4150
  "attributes": [
4146
4151
  {
@@ -4167,12 +4172,12 @@
4167
4172
  "references": [
4168
4173
  {
4169
4174
  "name": "Documentation",
4170
- "url": "https://shoelace.style/components/icon-arrow-left-l-line"
4175
+ "url": "https://shoelace.style/components/icon-arrow-left-down-line"
4171
4176
  }
4172
4177
  ]
4173
4178
  },
4174
4179
  {
4175
- "name": "dap-ds-icon-arrow-left-line",
4180
+ "name": "dap-ds-icon-arrow-left-l-line",
4176
4181
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
4177
4182
  "attributes": [
4178
4183
  {
@@ -4199,12 +4204,12 @@
4199
4204
  "references": [
4200
4205
  {
4201
4206
  "name": "Documentation",
4202
- "url": "https://shoelace.style/components/icon-arrow-left-line"
4207
+ "url": "https://shoelace.style/components/icon-arrow-left-l-line"
4203
4208
  }
4204
4209
  ]
4205
4210
  },
4206
4211
  {
4207
- "name": "dap-ds-icon-arrow-left-s-line",
4212
+ "name": "dap-ds-icon-arrow-left-line",
4208
4213
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
4209
4214
  "attributes": [
4210
4215
  {
@@ -4231,7 +4236,7 @@
4231
4236
  "references": [
4232
4237
  {
4233
4238
  "name": "Documentation",
4234
- "url": "https://shoelace.style/components/icon-arrow-left-s-line"
4239
+ "url": "https://shoelace.style/components/icon-arrow-left-line"
4235
4240
  }
4236
4241
  ]
4237
4242
  },
@@ -4268,7 +4273,7 @@
4268
4273
  ]
4269
4274
  },
4270
4275
  {
4271
- "name": "dap-ds-icon-arrow-left-up-line",
4276
+ "name": "dap-ds-icon-arrow-left-s-line",
4272
4277
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
4273
4278
  "attributes": [
4274
4279
  {
@@ -4295,7 +4300,7 @@
4295
4300
  "references": [
4296
4301
  {
4297
4302
  "name": "Documentation",
4298
- "url": "https://shoelace.style/components/icon-arrow-left-up-line"
4303
+ "url": "https://shoelace.style/components/icon-arrow-left-s-line"
4299
4304
  }
4300
4305
  ]
4301
4306
  },
@@ -4332,7 +4337,7 @@
4332
4337
  ]
4333
4338
  },
4334
4339
  {
4335
- "name": "dap-ds-icon-arrow-right-l-line",
4340
+ "name": "dap-ds-icon-arrow-left-up-line",
4336
4341
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
4337
4342
  "attributes": [
4338
4343
  {
@@ -4359,12 +4364,12 @@
4359
4364
  "references": [
4360
4365
  {
4361
4366
  "name": "Documentation",
4362
- "url": "https://shoelace.style/components/icon-arrow-right-l-line"
4367
+ "url": "https://shoelace.style/components/icon-arrow-left-up-line"
4363
4368
  }
4364
4369
  ]
4365
4370
  },
4366
4371
  {
4367
- "name": "dap-ds-icon-arrow-right-line",
4372
+ "name": "dap-ds-icon-arrow-right-l-line",
4368
4373
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
4369
4374
  "attributes": [
4370
4375
  {
@@ -4391,12 +4396,12 @@
4391
4396
  "references": [
4392
4397
  {
4393
4398
  "name": "Documentation",
4394
- "url": "https://shoelace.style/components/icon-arrow-right-line"
4399
+ "url": "https://shoelace.style/components/icon-arrow-right-l-line"
4395
4400
  }
4396
4401
  ]
4397
4402
  },
4398
4403
  {
4399
- "name": "dap-ds-icon-arrow-right-s-fill",
4404
+ "name": "dap-ds-icon-arrow-right-line",
4400
4405
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
4401
4406
  "attributes": [
4402
4407
  {
@@ -4423,7 +4428,7 @@
4423
4428
  "references": [
4424
4429
  {
4425
4430
  "name": "Documentation",
4426
- "url": "https://shoelace.style/components/icon-arrow-right-s-fill"
4431
+ "url": "https://shoelace.style/components/icon-arrow-right-line"
4427
4432
  }
4428
4433
  ]
4429
4434
  },
@@ -4492,7 +4497,7 @@
4492
4497
  ]
4493
4498
  },
4494
4499
  {
4495
- "name": "dap-ds-icon-arrow-up-line",
4500
+ "name": "dap-ds-icon-arrow-right-s-fill",
4496
4501
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
4497
4502
  "attributes": [
4498
4503
  {
@@ -4519,12 +4524,12 @@
4519
4524
  "references": [
4520
4525
  {
4521
4526
  "name": "Documentation",
4522
- "url": "https://shoelace.style/components/icon-arrow-up-line"
4527
+ "url": "https://shoelace.style/components/icon-arrow-right-s-fill"
4523
4528
  }
4524
4529
  ]
4525
4530
  },
4526
4531
  {
4527
- "name": "dap-ds-icon-arrow-up-s-fill",
4532
+ "name": "dap-ds-icon-arrow-up-line",
4528
4533
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
4529
4534
  "attributes": [
4530
4535
  {
@@ -4551,12 +4556,12 @@
4551
4556
  "references": [
4552
4557
  {
4553
4558
  "name": "Documentation",
4554
- "url": "https://shoelace.style/components/icon-arrow-up-s-fill"
4559
+ "url": "https://shoelace.style/components/icon-arrow-up-line"
4555
4560
  }
4556
4561
  ]
4557
4562
  },
4558
4563
  {
4559
- "name": "dap-ds-icon-arrow-up-s-line",
4564
+ "name": "dap-ds-icon-arrow-up-s-fill",
4560
4565
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
4561
4566
  "attributes": [
4562
4567
  {
@@ -4583,12 +4588,12 @@
4583
4588
  "references": [
4584
4589
  {
4585
4590
  "name": "Documentation",
4586
- "url": "https://shoelace.style/components/icon-arrow-up-s-line"
4591
+ "url": "https://shoelace.style/components/icon-arrow-up-s-fill"
4587
4592
  }
4588
4593
  ]
4589
4594
  },
4590
4595
  {
4591
- "name": "dap-ds-icon-expand-up-down-fill",
4596
+ "name": "dap-ds-icon-arrow-up-s-line",
4592
4597
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
4593
4598
  "attributes": [
4594
4599
  {
@@ -4615,12 +4620,12 @@
4615
4620
  "references": [
4616
4621
  {
4617
4622
  "name": "Documentation",
4618
- "url": "https://shoelace.style/components/icon-expand-up-down-fill"
4623
+ "url": "https://shoelace.style/components/icon-arrow-up-s-line"
4619
4624
  }
4620
4625
  ]
4621
4626
  },
4622
4627
  {
4623
- "name": "dap-ds-icon-home-6-line",
4628
+ "name": "dap-ds-icon-expand-up-down-fill",
4624
4629
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
4625
4630
  "attributes": [
4626
4631
  {
@@ -4647,7 +4652,7 @@
4647
4652
  "references": [
4648
4653
  {
4649
4654
  "name": "Documentation",
4650
- "url": "https://shoelace.style/components/icon-home-6-line"
4655
+ "url": "https://shoelace.style/components/icon-expand-up-down-fill"
4651
4656
  }
4652
4657
  ]
4653
4658
  },
@@ -6316,7 +6321,7 @@
6316
6321
  ]
6317
6322
  },
6318
6323
  {
6319
- "name": "dap-ds-icon-more-2-line",
6324
+ "name": "dap-ds-icon-more-line",
6320
6325
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
6321
6326
  "attributes": [
6322
6327
  {
@@ -6343,12 +6348,12 @@
6343
6348
  "references": [
6344
6349
  {
6345
6350
  "name": "Documentation",
6346
- "url": "https://shoelace.style/components/icon-more-2-line"
6351
+ "url": "https://shoelace.style/components/icon-more-line"
6347
6352
  }
6348
6353
  ]
6349
6354
  },
6350
6355
  {
6351
- "name": "dap-ds-icon-more-line",
6356
+ "name": "dap-ds-icon-more-2-line",
6352
6357
  "description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
6353
6358
  "attributes": [
6354
6359
  {
@@ -6375,7 +6380,7 @@
6375
6380
  "references": [
6376
6381
  {
6377
6382
  "name": "Documentation",
6378
- "url": "https://shoelace.style/components/icon-more-line"
6383
+ "url": "https://shoelace.style/components/icon-more-2-line"
6379
6384
  }
6380
6385
  ]
6381
6386
  },