dap-design-system 0.57.2 → 0.57.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.
- package/dist/components/number-input/number-input.component.d.ts +1 -0
- package/dist/{components-Cozi3ruX.js → components-I_1pevVu.js} +671 -665
- package/dist/{components-Cozi3ruX.js.map → components-I_1pevVu.js.map} +1 -1
- package/dist/components.js +1 -1
- package/dist/dds.js +1 -1
- package/dist/manifest/types/vue/index.d.ts +139 -139
- package/dist/manifest/vscode.html-custom-data.json +117 -117
- package/dist/manifest/web-types.json +195 -195
- package/dist/react/index.d.ts +5 -5
- package/dist/react-types.ts +5 -5
- package/dist/react.js +55 -55
- package/dist/react.js.map +1 -1
- package/package.json +1 -1
|
@@ -13,6 +13,48 @@
|
|
|
13
13
|
}
|
|
14
14
|
]
|
|
15
15
|
},
|
|
16
|
+
{
|
|
17
|
+
"name": "dap-ds-avatar-group",
|
|
18
|
+
"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.",
|
|
19
|
+
"attributes": [
|
|
20
|
+
{
|
|
21
|
+
"name": "layout",
|
|
22
|
+
"description": "Layout type for the avatar group",
|
|
23
|
+
"values": [{ "name": "stack" }, { "name": "grid" }]
|
|
24
|
+
},
|
|
25
|
+
{
|
|
26
|
+
"name": "max",
|
|
27
|
+
"description": "Maximum number of avatars to show before showing overflow",
|
|
28
|
+
"values": []
|
|
29
|
+
},
|
|
30
|
+
{
|
|
31
|
+
"name": "show-total",
|
|
32
|
+
"description": "Whether to show the total count in overflow indicator",
|
|
33
|
+
"values": []
|
|
34
|
+
},
|
|
35
|
+
{
|
|
36
|
+
"name": "interactive-overflow",
|
|
37
|
+
"description": "Interactive overflow indicator",
|
|
38
|
+
"values": []
|
|
39
|
+
},
|
|
40
|
+
{
|
|
41
|
+
"name": "label",
|
|
42
|
+
"description": "Accessible label for the avatar group",
|
|
43
|
+
"values": []
|
|
44
|
+
},
|
|
45
|
+
{
|
|
46
|
+
"name": "overflow-label",
|
|
47
|
+
"description": "Accessible label for the overflow indicator",
|
|
48
|
+
"values": []
|
|
49
|
+
}
|
|
50
|
+
],
|
|
51
|
+
"references": [
|
|
52
|
+
{
|
|
53
|
+
"name": "Documentation",
|
|
54
|
+
"url": "https://shoelace.style/components/avatar-group"
|
|
55
|
+
}
|
|
56
|
+
]
|
|
57
|
+
},
|
|
16
58
|
{
|
|
17
59
|
"name": "dap-ds-avatar",
|
|
18
60
|
"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.",
|
|
@@ -83,55 +125,6 @@
|
|
|
83
125
|
}
|
|
84
126
|
]
|
|
85
127
|
},
|
|
86
|
-
{
|
|
87
|
-
"name": "dap-ds-anchor-heading",
|
|
88
|
-
"description": "Anchor heading is a heading with an anchor link.\n---\n\n\n### **CSS Properties:**\n - **--dds-anchor-link-color** - The color of the anchor link (default: var(--dds-color-primary)) _(default: undefined)_\n- **--dds-anchor-link-opacity** - The opacity of the anchor link when not hovered (default: 0) _(default: undefined)_\n- **--dds-anchor-link-hover-opacity** - The opacity of the anchor link when hovered (default: 1) _(default: undefined)_\n- **--dds-anchor-link-transition** - The transition property for the anchor link opacity (default: opacity 0.2s ease-in-out) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main anchor heading container.\n- **link** - The link of the anchor heading. dap-ds-link element.\n- **link-base** - The base of the link part.\n- **text** - The text of the anchor heading.",
|
|
89
|
-
"attributes": [
|
|
90
|
-
{
|
|
91
|
-
"name": "variant",
|
|
92
|
-
"description": "The variant of the heading. Default is `h2`. Can be `h1`, `h2`, `h3`, `h4`, `h5`, or `h6`.",
|
|
93
|
-
"values": [{ "name": "HeadingVariant" }]
|
|
94
|
-
},
|
|
95
|
-
{
|
|
96
|
-
"name": "label",
|
|
97
|
-
"description": "The label of the heading.",
|
|
98
|
-
"values": []
|
|
99
|
-
}
|
|
100
|
-
],
|
|
101
|
-
"references": [
|
|
102
|
-
{
|
|
103
|
-
"name": "Documentation",
|
|
104
|
-
"url": "https://shoelace.style/components/anchor-heading"
|
|
105
|
-
}
|
|
106
|
-
]
|
|
107
|
-
},
|
|
108
|
-
{
|
|
109
|
-
"name": "dap-ds-accordion-group",
|
|
110
|
-
"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.",
|
|
111
|
-
"attributes": [
|
|
112
|
-
{
|
|
113
|
-
"name": "autoClose",
|
|
114
|
-
"description": "Whether to close other accordions when one is opened.",
|
|
115
|
-
"values": []
|
|
116
|
-
},
|
|
117
|
-
{
|
|
118
|
-
"name": "variant",
|
|
119
|
-
"description": "The variant of the accordion",
|
|
120
|
-
"values": [
|
|
121
|
-
{ "name": "default" },
|
|
122
|
-
{ "name": "collapsed" },
|
|
123
|
-
{ "name": "clean" },
|
|
124
|
-
{ "name": "clean-collapsed" }
|
|
125
|
-
]
|
|
126
|
-
}
|
|
127
|
-
],
|
|
128
|
-
"references": [
|
|
129
|
-
{
|
|
130
|
-
"name": "Documentation",
|
|
131
|
-
"url": "https://shoelace.style/components/accordion-group"
|
|
132
|
-
}
|
|
133
|
-
]
|
|
134
|
-
},
|
|
135
128
|
{
|
|
136
129
|
"name": "dap-ds-badge",
|
|
137
130
|
"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.",
|
|
@@ -166,48 +159,6 @@
|
|
|
166
159
|
}
|
|
167
160
|
]
|
|
168
161
|
},
|
|
169
|
-
{
|
|
170
|
-
"name": "dap-ds-avatar-group",
|
|
171
|
-
"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.",
|
|
172
|
-
"attributes": [
|
|
173
|
-
{
|
|
174
|
-
"name": "layout",
|
|
175
|
-
"description": "Layout type for the avatar group",
|
|
176
|
-
"values": [{ "name": "stack" }, { "name": "grid" }]
|
|
177
|
-
},
|
|
178
|
-
{
|
|
179
|
-
"name": "max",
|
|
180
|
-
"description": "Maximum number of avatars to show before showing overflow",
|
|
181
|
-
"values": []
|
|
182
|
-
},
|
|
183
|
-
{
|
|
184
|
-
"name": "show-total",
|
|
185
|
-
"description": "Whether to show the total count in overflow indicator",
|
|
186
|
-
"values": []
|
|
187
|
-
},
|
|
188
|
-
{
|
|
189
|
-
"name": "interactive-overflow",
|
|
190
|
-
"description": "Interactive overflow indicator",
|
|
191
|
-
"values": []
|
|
192
|
-
},
|
|
193
|
-
{
|
|
194
|
-
"name": "label",
|
|
195
|
-
"description": "Accessible label for the avatar group",
|
|
196
|
-
"values": []
|
|
197
|
-
},
|
|
198
|
-
{
|
|
199
|
-
"name": "overflow-label",
|
|
200
|
-
"description": "Accessible label for the overflow indicator",
|
|
201
|
-
"values": []
|
|
202
|
-
}
|
|
203
|
-
],
|
|
204
|
-
"references": [
|
|
205
|
-
{
|
|
206
|
-
"name": "Documentation",
|
|
207
|
-
"url": "https://shoelace.style/components/avatar-group"
|
|
208
|
-
}
|
|
209
|
-
]
|
|
210
|
-
},
|
|
211
162
|
{
|
|
212
163
|
"name": "dap-ds-banner",
|
|
213
164
|
"description": "A banner is a message displayed at the top of the page to provide important information to the user.\n---\n\n\n### **Events:**\n - **dds-close** - Event fired when the banner is closed.\n\n### **Slots:**\n - _default_ - The content of the banner.\n- **actions** - Actions of banner\n- **icon** - The icon of the banner.\n\n### **CSS Properties:**\n - **--dds-banner-gap** - The gap between banner elements (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-banner-line-height** - The line height of the banner text (default: var(--dds-font-line-height-xlarge)) _(default: undefined)_\n- **--dds-banner-transition** - The transition property for the banner (default: all 0.2s ease-in-out) _(default: undefined)_\n- **--dds-banner-brand-background** - The background color of the brand banner (default: var(--dds-banner-background-brand)) _(default: undefined)_\n- **--dds-banner-brand-icon-color** - The color of the brand banner icon (default: var(--dds-banner-icon-brand)) _(default: undefined)_\n- **--dds-banner-brand-text-color** - The text color of the brand banner (default: var(--dds-banner-text-brand)) _(default: undefined)_\n- **--dds-banner-brand-action-color** - The color of the brand banner actions (default: var(--dds-banner-action-enabled)) _(default: undefined)_\n- **--dds-banner-info-background** - The background color of the info banner (default: var(--dds-banner-background-informative)) _(default: undefined)_\n- **--dds-banner-info-icon-color** - The color of the info banner icon (default: var(--dds-banner-icon-informative)) _(default: undefined)_\n- **--dds-banner-info-text-color** - The text color of the info banner (default: var(--dds-banner-text-informative)) _(default: undefined)_\n- **--dds-banner-info-action-color** - The color of the info banner actions (default: var(--dds-banner-action-enabled)) _(default: undefined)_\n- **--dds-banner-positive-background** - The background color of the positive banner (default: var(--dds-banner-background-positive)) _(default: undefined)_\n- **--dds-banner-positive-icon-color** - The color of the positive banner icon (default: var(--dds-banner-icon-positive)) _(default: undefined)_\n- **--dds-banner-positive-text-color** - The text color of the positive banner (default: var(--dds-banner-text-positive)) _(default: undefined)_\n- **--dds-banner-positive-action-color** - The color of the positive banner actions (default: var(--dds-banner-action-enabled)) _(default: undefined)_\n- **--dds-banner-warning-background** - The background color of the warning banner (default: var(--dds-banner-background-warning)) _(default: undefined)_\n- **--dds-banner-warning-icon-color** - The color of the warning banner icon (default: var(--dds-banner-icon-warning)) _(default: undefined)_\n- **--dds-banner-warning-text-color** - The text color of the warning banner (default: var(--dds-banner-text-warning)) _(default: undefined)_\n- **--dds-banner-warning-action-color** - The color of the warning banner actions (default: var(--dds-banner-action-inverted-enabled)) _(default: undefined)_\n- **--dds-banner-negative-background** - The background color of the negative banner (default: var(--dds-banner-background-negative)) _(default: undefined)_\n- **--dds-banner-negative-icon-color** - The color of the negative banner icon (default: var(--dds-banner-icon-negative)) _(default: undefined)_\n- **--dds-banner-negative-text-color** - The text color of the negative banner (default: var(--dds-banner-text-negative)) _(default: undefined)_\n- **--dds-banner-negative-action-color** - The color of the negative banner actions (default: var(--dds-banner-action-inverted-enabled)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main banner container.\n- **card-base** - The wrapper card container.\n- **icon** - The icon of the banner.\n- **icon-element** - The icon element of the banner.\n- **icon-base** - The base of the icon.\n- **closebutton** - The close button of the banner.\n- **close-icon-element** - The icon element of the close button.\n- **close-icon-base** - The base of the close button icon.\n- **actions** - The actions of the banner.\n- **title** - The title of the banner.",
|
|
@@ -251,6 +202,33 @@
|
|
|
251
202
|
}
|
|
252
203
|
]
|
|
253
204
|
},
|
|
205
|
+
{
|
|
206
|
+
"name": "dap-ds-accordion-group",
|
|
207
|
+
"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.",
|
|
208
|
+
"attributes": [
|
|
209
|
+
{
|
|
210
|
+
"name": "autoClose",
|
|
211
|
+
"description": "Whether to close other accordions when one is opened.",
|
|
212
|
+
"values": []
|
|
213
|
+
},
|
|
214
|
+
{
|
|
215
|
+
"name": "variant",
|
|
216
|
+
"description": "The variant of the accordion",
|
|
217
|
+
"values": [
|
|
218
|
+
{ "name": "default" },
|
|
219
|
+
{ "name": "collapsed" },
|
|
220
|
+
{ "name": "clean" },
|
|
221
|
+
{ "name": "clean-collapsed" }
|
|
222
|
+
]
|
|
223
|
+
}
|
|
224
|
+
],
|
|
225
|
+
"references": [
|
|
226
|
+
{
|
|
227
|
+
"name": "Documentation",
|
|
228
|
+
"url": "https://shoelace.style/components/accordion-group"
|
|
229
|
+
}
|
|
230
|
+
]
|
|
231
|
+
},
|
|
254
232
|
{
|
|
255
233
|
"name": "dap-ds-breadcrumb",
|
|
256
234
|
"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.",
|
|
@@ -274,6 +252,28 @@
|
|
|
274
252
|
}
|
|
275
253
|
]
|
|
276
254
|
},
|
|
255
|
+
{
|
|
256
|
+
"name": "dap-ds-anchor-heading",
|
|
257
|
+
"description": "Anchor heading is a heading with an anchor link.\n---\n\n\n### **CSS Properties:**\n - **--dds-anchor-link-color** - The color of the anchor link (default: var(--dds-color-primary)) _(default: undefined)_\n- **--dds-anchor-link-opacity** - The opacity of the anchor link when not hovered (default: 0) _(default: undefined)_\n- **--dds-anchor-link-hover-opacity** - The opacity of the anchor link when hovered (default: 1) _(default: undefined)_\n- **--dds-anchor-link-transition** - The transition property for the anchor link opacity (default: opacity 0.2s ease-in-out) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main anchor heading container.\n- **link** - The link of the anchor heading. dap-ds-link element.\n- **link-base** - The base of the link part.\n- **text** - The text of the anchor heading.",
|
|
258
|
+
"attributes": [
|
|
259
|
+
{
|
|
260
|
+
"name": "variant",
|
|
261
|
+
"description": "The variant of the heading. Default is `h2`. Can be `h1`, `h2`, `h3`, `h4`, `h5`, or `h6`.",
|
|
262
|
+
"values": [{ "name": "HeadingVariant" }]
|
|
263
|
+
},
|
|
264
|
+
{
|
|
265
|
+
"name": "label",
|
|
266
|
+
"description": "The label of the heading.",
|
|
267
|
+
"values": []
|
|
268
|
+
}
|
|
269
|
+
],
|
|
270
|
+
"references": [
|
|
271
|
+
{
|
|
272
|
+
"name": "Documentation",
|
|
273
|
+
"url": "https://shoelace.style/components/anchor-heading"
|
|
274
|
+
}
|
|
275
|
+
]
|
|
276
|
+
},
|
|
277
277
|
{
|
|
278
278
|
"name": "dap-ds-breadcrumb-item",
|
|
279
279
|
"description": "A breadcrumb item is a secondary navigation scheme that reveals the user's location in a website or Web application.\n---\n\n\n### **Slots:**\n - _default_ - The content of the breadcrumb item.\n- **separator** - The separator between breadcrumb items. Default is an arrow-right-s-line icon.\n\n### **CSS Properties:**\n - **--dds-breadcrumb-item-display** - The display property of the breadcrumb item (default: inline-flex) _(default: undefined)_\n- **--dds-breadcrumb-item-flex-wrap** - The flex-wrap property of the breadcrumb item (default: nowrap) _(default: undefined)_\n- **--dds-breadcrumb-item-align-items** - The align-items property of the breadcrumb item (default: center) _(default: undefined)_\n- **--dds-breadcrumb-item-color** - The text color of the breadcrumb item (default: var(--dds-text-neutral-base)) _(default: undefined)_\n- **--dds-breadcrumb-item-transition** - The transition property for the breadcrumb item (default: all 0.2s ease-in-out) _(default: undefined)_\n- **--dds-breadcrumb-item-gap** - The gap between the breadcrumb item and the separator (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-breadcrumb-item-padding** - The padding of the breadcrumb item (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-breadcrumb-item-font-size** - The font size of the breadcrumb item (default: var(--dds-font-sm)) _(default: undefined)_\n- **--dds-breadcrumb-item-font-weight** - The font weight of the breadcrumb item (default: var(--dds-font-weight-medium)) _(default: undefined)_\n- **--dds-breadcrumb-item-font-weight-bold** - The bold font weight of the breadcrumb item (default: var(--dds-font-weight-bold)) _(default: undefined)_\n- **--dds-breadcrumb-item-separator-color** - The color of the separator (default: var(--dds-text-neutral-disabled)) _(default: undefined)_\n- **--dds-breadcrumb-item-link-color** - The color of the link (default: var(--dds-link-neutral-enabled)) _(default: undefined)_\n- **--dds-breadcrumb-item-inverted-color** - The text color when inverted (default: var(--dds-text-neutral-inverted)) _(default: undefined)_\n- **--dds-breadcrumb-item-inverted-link-color** - The link color when inverted (default: var(--dds-text-neutral-inverted)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main breadcrumb item container. The li element.\n- **link** - The link of the breadcrumb item. The dds-link component.\n- **link-base** - The base part of the link part. The dds-link components base part.\n- **item-nolink** - The item of the breadcrumb item without a link. The span element.\n- **separator** - The separator of the breadcrumb item.",
|
|
@@ -3527,28 +3527,6 @@
|
|
|
3527
3527
|
}
|
|
3528
3528
|
]
|
|
3529
3529
|
},
|
|
3530
|
-
{
|
|
3531
|
-
"name": "dap-ds-timeline-item",
|
|
3532
|
-
"description": "A timeline is a graphical representation of a series of events.\n---\n\n\n### **Slots:**\n - _default_ - The default slot for the item content.\n\n### **CSS Properties:**\n - **--dds-timeline-position** - Position of the timeline dot (default: 28px) _(default: undefined)_\n- **--dds-timeline-connector-width** - Width of the timeline connector line (default: 1px) _(default: undefined)_\n- **--dds-timeline-connector-left-position** - Left position of the timeline connector (default: 5.5px) _(default: undefined)_\n- **--dds-timeline-dot-size** - Size of the timeline dot (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-timeline-item-margin-bottom** - Bottom margin of timeline items (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-timeline-item-padding-left** - Left padding of timeline items (default: var(--dds-spacing-400)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main timeline item container.\n- **connector** - The connector element between two timeline items.\n- **content** - The content of the timeline item.",
|
|
3533
|
-
"attributes": [],
|
|
3534
|
-
"references": [
|
|
3535
|
-
{
|
|
3536
|
-
"name": "Documentation",
|
|
3537
|
-
"url": "https://shoelace.style/components/timeline-item"
|
|
3538
|
-
}
|
|
3539
|
-
]
|
|
3540
|
-
},
|
|
3541
|
-
{
|
|
3542
|
-
"name": "dap-ds-timeline",
|
|
3543
|
-
"description": "A timeline is a graphical representation of a series of events.\n---\n\n\n### **Slots:**\n - _default_ - The default slot for the timeline items.\n\n### **CSS Parts:**\n - **base** - The main timeline container.",
|
|
3544
|
-
"attributes": [],
|
|
3545
|
-
"references": [
|
|
3546
|
-
{
|
|
3547
|
-
"name": "Documentation",
|
|
3548
|
-
"url": "https://shoelace.style/components/timeline"
|
|
3549
|
-
}
|
|
3550
|
-
]
|
|
3551
|
-
},
|
|
3552
3530
|
{
|
|
3553
3531
|
"name": "dap-ds-textarea",
|
|
3554
3532
|
"description": "A textarea is a multi-line text input field.\n---\n\n\n### **Events:**\n - **dds-count-change** - Fires when the count of the textarea changes.\n- **dds-change** - Fired when the textarea value changes.\n- **dds-input** - Fired when the textarea value changes.\n- **dds-keydown** - Fired when a key is pressed down.\n- **dds-blur** - Fired when the textarea loses focus.\n- **dds-focus** - Emitted when the textarea gains focus.\n- **dds-select** - Emitted when select text in textarea.\n\n### **Slots:**\n - **feedback-icon** - The custom icon of the feedback.\n\n### **CSS Properties:**\n - **--dds-textarea-min-rows** - Minimum number of rows in the textarea. (default: 2) _(default: undefined)_\n- **--dds-textarea-spacing** - Gap between elements in the textarea container. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-textarea-gap** - Gap between elements in the textarea container. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-textarea-margin-top** - Top margin of the textarea. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-textarea-padding** - Padding of the textarea control. (default: var(--dds-spacing-200) var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-textarea-border-width** - Border width of the textarea. (default: var(--dds-border-width-base)) _(default: undefined)_\n- **--dds-textarea-border-color** - Border color of the textarea. (default: var(--dds-border-neutral-base)) _(default: undefined)_\n- **--dds-textarea-background** - Background color of the textarea. (default: var(--dds-fields-background-default)) _(default: undefined)_\n- **--dds-textarea-color** - Text color of the textarea. (default: var(--dds-text-neutral-base)) _(default: undefined)_\n- **--dds-textarea-border-radius** - Border radius of the textarea. (default: var(--dds-radius-base)) _(default: undefined)_\n- **--dds-textarea-disabled-bg** - Background color when disabled. (default: var(--dds-fields-background-disabled)) _(default: undefined)_\n- **--dds-textarea-disabled-color** - Text color when disabled. (default: var(--dds-text-neutral-disabled)) _(default: undefined)_\n- **--dds-textarea-readonly-bg** - Background color when readonly. (default: var(--dds-fields-background-read-only)) _(default: undefined)_\n- **--dds-textarea-readonly-color** - Text color when readonly. (default: var(--dds-text-neutral-subtle)) _(default: undefined)_\n- **--dds-textarea-error-border** - Border color when in error state. (default: var(--dds-border-negative-base)) _(default: undefined)_\n- **--dds-textarea-success-border** - Border color when in success state. (default: var(--dds-border-positive-base)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main textarea container.\n- **input** - The native input of the textarea.\n- **counter** - The counter of the textarea.\n- **counter-base** - The base of the counter.\n- **feedback** - The feedback of the textarea.\n- **feedback-base** - The base of the feedback.\n- **feedback-text** - The text of the feedback.\n- **feedback-icon** - The icon of the feedback.",
|
|
@@ -3596,6 +3574,28 @@
|
|
|
3596
3574
|
}
|
|
3597
3575
|
]
|
|
3598
3576
|
},
|
|
3577
|
+
{
|
|
3578
|
+
"name": "dap-ds-timeline-item",
|
|
3579
|
+
"description": "A timeline is a graphical representation of a series of events.\n---\n\n\n### **Slots:**\n - _default_ - The default slot for the item content.\n\n### **CSS Properties:**\n - **--dds-timeline-position** - Position of the timeline dot (default: 28px) _(default: undefined)_\n- **--dds-timeline-connector-width** - Width of the timeline connector line (default: 1px) _(default: undefined)_\n- **--dds-timeline-connector-left-position** - Left position of the timeline connector (default: 5.5px) _(default: undefined)_\n- **--dds-timeline-dot-size** - Size of the timeline dot (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-timeline-item-margin-bottom** - Bottom margin of timeline items (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-timeline-item-padding-left** - Left padding of timeline items (default: var(--dds-spacing-400)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main timeline item container.\n- **connector** - The connector element between two timeline items.\n- **content** - The content of the timeline item.",
|
|
3580
|
+
"attributes": [],
|
|
3581
|
+
"references": [
|
|
3582
|
+
{
|
|
3583
|
+
"name": "Documentation",
|
|
3584
|
+
"url": "https://shoelace.style/components/timeline-item"
|
|
3585
|
+
}
|
|
3586
|
+
]
|
|
3587
|
+
},
|
|
3588
|
+
{
|
|
3589
|
+
"name": "dap-ds-timeline",
|
|
3590
|
+
"description": "A timeline is a graphical representation of a series of events.\n---\n\n\n### **Slots:**\n - _default_ - The default slot for the timeline items.\n\n### **CSS Parts:**\n - **base** - The main timeline container.",
|
|
3591
|
+
"attributes": [],
|
|
3592
|
+
"references": [
|
|
3593
|
+
{
|
|
3594
|
+
"name": "Documentation",
|
|
3595
|
+
"url": "https://shoelace.style/components/timeline"
|
|
3596
|
+
}
|
|
3597
|
+
]
|
|
3598
|
+
},
|
|
3599
3599
|
{
|
|
3600
3600
|
"name": "dap-ds-time-grid",
|
|
3601
3601
|
"description": "A time grid component that allows users to select hours and minutes in two side-by-side scrollable columns.\n---\n\n\n### **Events:**\n - **dds-change** - Fired when time selection changes.\n- **dds-close** - Fired when the time grid should close.\n\n### **CSS Properties:**\n - **--dds-time-grid-gap** - The gap between time sections (default: var(--dds-spacing-400)). _(default: undefined)_\n- **--dds-time-grid-padding** - The padding around the time grid (default: var(--dds-spacing-0)). _(default: undefined)_\n- **--dds-time-grid-column-gap** - The gap between time buttons in columns (default: var(--dds-spacing-200)). _(default: undefined)_\n- **--dds-time-grid-border-radius** - The border radius of the time grid (default: var(--dds-radius-base)). _(default: undefined)_\n- **--dds-time-grid-background** - The background color of the time grid (default: var(--dds-background-neutral-subtle)). _(default: undefined)_\n- **--dds-time-grid-transition** - The transition timing for the time grid (default: all 0.2s ease-in-out). _(default: undefined)_\n- **--dds-time-grid-max-width** - The maximum width of the time grid (default: 400px). _(default: undefined)_\n- **--dds-time-grid-column-max-height** - The maximum height of time columns (default: 240px). _(default: undefined)_\n\n### **CSS Parts:**\n - **time-grid** - The main time grid container.\n- **hour-section** - The hour selection section.\n- **minute-section** - The minute selection section.\n- **time-button** - Individual time selection buttons.\n- **time-button-base** - The base part of the time button.\n- **time-button-content** - The content part of the time button.\n- **time-button-high-contrast** - The high contrast part of the time button.\n- **section-header-title** - The title of the section header.\n- **section-header-divider** - The divider between the section header and the time buttons.\n- **time-column** - The time column container.",
|
|
@@ -4224,7 +4224,7 @@
|
|
|
4224
4224
|
]
|
|
4225
4225
|
},
|
|
4226
4226
|
{
|
|
4227
|
-
"name": "dap-ds-icon-arrow-left-s-
|
|
4227
|
+
"name": "dap-ds-icon-arrow-left-s-fill",
|
|
4228
4228
|
"description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
|
|
4229
4229
|
"attributes": [
|
|
4230
4230
|
{
|
|
@@ -4251,12 +4251,12 @@
|
|
|
4251
4251
|
"references": [
|
|
4252
4252
|
{
|
|
4253
4253
|
"name": "Documentation",
|
|
4254
|
-
"url": "https://shoelace.style/components/icon-arrow-left-s-
|
|
4254
|
+
"url": "https://shoelace.style/components/icon-arrow-left-s-fill"
|
|
4255
4255
|
}
|
|
4256
4256
|
]
|
|
4257
4257
|
},
|
|
4258
4258
|
{
|
|
4259
|
-
"name": "dap-ds-icon-arrow-left-s-
|
|
4259
|
+
"name": "dap-ds-icon-arrow-left-s-line",
|
|
4260
4260
|
"description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
|
|
4261
4261
|
"attributes": [
|
|
4262
4262
|
{
|
|
@@ -4283,7 +4283,7 @@
|
|
|
4283
4283
|
"references": [
|
|
4284
4284
|
{
|
|
4285
4285
|
"name": "Documentation",
|
|
4286
|
-
"url": "https://shoelace.style/components/icon-arrow-left-s-
|
|
4286
|
+
"url": "https://shoelace.style/components/icon-arrow-left-s-line"
|
|
4287
4287
|
}
|
|
4288
4288
|
]
|
|
4289
4289
|
},
|