dap-design-system 0.57.1 → 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/sidenav/sidenav.component.d.ts +1 -0
- package/dist/{components-C2yXmzb-.js → components-I_1pevVu.js} +48 -27
- package/dist/{components-C2yXmzb-.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 +165 -165
- package/dist/manifest/vscode.html-custom-data.json +113 -113
- package/dist/manifest/web-types.json +363 -363
- package/dist/react/index.d.ts +5 -5
- package/dist/react-types.ts +5 -5
- package/dist/react.js +65 -65
- package/dist/react.js.map +1 -1
- package/package.json +1 -1
|
@@ -14,51 +14,44 @@
|
|
|
14
14
|
]
|
|
15
15
|
},
|
|
16
16
|
{
|
|
17
|
-
"name": "dap-ds-
|
|
18
|
-
"description": "
|
|
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
19
|
"attributes": [
|
|
20
20
|
{
|
|
21
|
-
"name": "
|
|
22
|
-
"description": "
|
|
23
|
-
"values": []
|
|
21
|
+
"name": "layout",
|
|
22
|
+
"description": "Layout type for the avatar group",
|
|
23
|
+
"values": [{ "name": "stack" }, { "name": "grid" }]
|
|
24
24
|
},
|
|
25
25
|
{
|
|
26
|
-
"name": "
|
|
27
|
-
"description": "
|
|
28
|
-
"values": [
|
|
29
|
-
|
|
30
|
-
{ "name": "collapsed" },
|
|
31
|
-
{ "name": "clean" },
|
|
32
|
-
{ "name": "clean-collapsed" }
|
|
33
|
-
]
|
|
34
|
-
}
|
|
35
|
-
],
|
|
36
|
-
"references": [
|
|
26
|
+
"name": "max",
|
|
27
|
+
"description": "Maximum number of avatars to show before showing overflow",
|
|
28
|
+
"values": []
|
|
29
|
+
},
|
|
37
30
|
{
|
|
38
|
-
"name": "
|
|
39
|
-
"
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
},
|
|
43
|
-
{
|
|
44
|
-
"name": "dap-ds-anchor-heading",
|
|
45
|
-
"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.",
|
|
46
|
-
"attributes": [
|
|
31
|
+
"name": "show-total",
|
|
32
|
+
"description": "Whether to show the total count in overflow indicator",
|
|
33
|
+
"values": []
|
|
34
|
+
},
|
|
47
35
|
{
|
|
48
|
-
"name": "
|
|
49
|
-
"description": "
|
|
50
|
-
"values": [
|
|
36
|
+
"name": "interactive-overflow",
|
|
37
|
+
"description": "Interactive overflow indicator",
|
|
38
|
+
"values": []
|
|
51
39
|
},
|
|
52
40
|
{
|
|
53
41
|
"name": "label",
|
|
54
|
-
"description": "
|
|
42
|
+
"description": "Accessible label for the avatar group",
|
|
43
|
+
"values": []
|
|
44
|
+
},
|
|
45
|
+
{
|
|
46
|
+
"name": "overflow-label",
|
|
47
|
+
"description": "Accessible label for the overflow indicator",
|
|
55
48
|
"values": []
|
|
56
49
|
}
|
|
57
50
|
],
|
|
58
51
|
"references": [
|
|
59
52
|
{
|
|
60
53
|
"name": "Documentation",
|
|
61
|
-
"url": "https://shoelace.style/components/
|
|
54
|
+
"url": "https://shoelace.style/components/avatar-group"
|
|
62
55
|
}
|
|
63
56
|
]
|
|
64
57
|
},
|
|
@@ -132,48 +125,6 @@
|
|
|
132
125
|
}
|
|
133
126
|
]
|
|
134
127
|
},
|
|
135
|
-
{
|
|
136
|
-
"name": "dap-ds-avatar-group",
|
|
137
|
-
"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.",
|
|
138
|
-
"attributes": [
|
|
139
|
-
{
|
|
140
|
-
"name": "layout",
|
|
141
|
-
"description": "Layout type for the avatar group",
|
|
142
|
-
"values": [{ "name": "stack" }, { "name": "grid" }]
|
|
143
|
-
},
|
|
144
|
-
{
|
|
145
|
-
"name": "max",
|
|
146
|
-
"description": "Maximum number of avatars to show before showing overflow",
|
|
147
|
-
"values": []
|
|
148
|
-
},
|
|
149
|
-
{
|
|
150
|
-
"name": "show-total",
|
|
151
|
-
"description": "Whether to show the total count in overflow indicator",
|
|
152
|
-
"values": []
|
|
153
|
-
},
|
|
154
|
-
{
|
|
155
|
-
"name": "interactive-overflow",
|
|
156
|
-
"description": "Interactive overflow indicator",
|
|
157
|
-
"values": []
|
|
158
|
-
},
|
|
159
|
-
{
|
|
160
|
-
"name": "label",
|
|
161
|
-
"description": "Accessible label for the avatar group",
|
|
162
|
-
"values": []
|
|
163
|
-
},
|
|
164
|
-
{
|
|
165
|
-
"name": "overflow-label",
|
|
166
|
-
"description": "Accessible label for the overflow indicator",
|
|
167
|
-
"values": []
|
|
168
|
-
}
|
|
169
|
-
],
|
|
170
|
-
"references": [
|
|
171
|
-
{
|
|
172
|
-
"name": "Documentation",
|
|
173
|
-
"url": "https://shoelace.style/components/avatar-group"
|
|
174
|
-
}
|
|
175
|
-
]
|
|
176
|
-
},
|
|
177
128
|
{
|
|
178
129
|
"name": "dap-ds-badge",
|
|
179
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.",
|
|
@@ -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.",
|
|
@@ -573,43 +573,6 @@
|
|
|
573
573
|
}
|
|
574
574
|
]
|
|
575
575
|
},
|
|
576
|
-
{
|
|
577
|
-
"name": "dap-ds-checkbox",
|
|
578
|
-
"description": "A checkbox is a form element that allows the user to select one or more options from a set.\n---\n\n\n### **Events:**\n - **dds-change** - Fired when the checkbox is checked or unchecked.\n- **dds-blur** - Emitted when the checkbox loses focus.\n- **dds-focus** - Emitted when the checkbox gains focus.\n- **dds-input** - Emitted when the checkbox receives input.\n\n### **Methods:**\n - **focus(): _void_** - Programmatically focuses the checkbox input element.\n- **blur(): _void_** - Programmatically blurs the checkbox input element.\n\n### **CSS Properties:**\n - **--dds-checkbox-size** - The size of the checkbox. (default: var(--dds-spacing-500)) _(default: undefined)_\n- **--dds-checkbox-border-width** - The border width of the checkbox. (default: var(--dds-border-width-large)) _(default: undefined)_\n- **--dds-checkbox-border-radius** - The border radius of the checkbox. (default: var(--dds-radius-small)) _(default: undefined)_\n- **--dds-checkbox-border-color** - The border color of the checkbox. (default: var(--dds-border-neutral-base)) _(default: undefined)_\n- **--dds-checkbox-background-color** - The background color of the checkbox. (default: transparent) _(default: undefined)_\n- **--dds-checkbox-icon-color** - The color of the checkbox icon. (default: var(--dds-button-primary-icon-enabled)) _(default: undefined)_\n- **--dds-checkbox-hover-border-color** - The border color when hovering over the checkbox. (default: var(--dds-border-neutral-medium)) _(default: undefined)_\n- **--dds-checkbox-hover-background-color** - The background color when hovering over the checkbox. (default: var(--dds-background-neutral-medium)) _(default: undefined)_\n- **--dds-checkbox-active-border-color** - The border color when the checkbox is active. (default: var(--dds-border-neutral-strong)) _(default: undefined)_\n- **--dds-checkbox-active-background-color** - The background color when the checkbox is active. (default: var(--dds-background-neutral-strong)) _(default: undefined)_\n- **--dds-checkbox-checked-border-color** - The border color when the checkbox is checked. (default: var(--dds-background-brand-base-inverted)) _(default: undefined)_\n- **--dds-checkbox-checked-background-color** - The background color when the checkbox is checked. (default: var(--dds-background-brand-base-inverted)) _(default: undefined)_\n- **--dds-checkbox-checked-hover-border-color** - The border color when hovering over a checked checkbox. (default: var(--dds-background-brand-medium-inverted)) _(default: undefined)_\n- **--dds-checkbox-checked-hover-background-color** - The background color when hovering over a checked checkbox. (default: var(--dds-background-brand-medium-inverted)) _(default: undefined)_\n- **--dds-checkbox-checked-active-border-color** - The border color when a checked checkbox is active. (default: var(--dds-background-brand-strong-inverted)) _(default: undefined)_\n- **--dds-checkbox-checked-active-background-color** - The background color when a checked checkbox is active. (default: var(--dds-background-brand-strong-inverted)) _(default: undefined)_\n- **--dds-checkbox-invalid-border-color** - The border color when the checkbox is invalid. (default: var(--dds-border-negative-base)) _(default: undefined)_\n- **--dds-checkbox-invalid-background-color** - The background color when the checkbox is invalid. (default: var(--dds-background-negative-base)) _(default: undefined)_\n- **--dds-checkbox-invalid-hover-border-color** - The border color when hovering over an invalid checkbox. (default: var(--dds-border-negative-medium)) _(default: undefined)_\n- **--dds-checkbox-invalid-hover-background-color** - The background color when hovering over an invalid checkbox. (default: var(--dds-background-negative-medium)) _(default: undefined)_\n- **--dds-checkbox-invalid-active-border-color** - The border color when an invalid checkbox is active. (default: var(--dds-border-negative-strong)) _(default: undefined)_\n- **--dds-checkbox-invalid-active-background-color** - The background color when an invalid checkbox is active. (default: var(--dds-background-negative-strong)) _(default: undefined)_\n- **--dds-checkbox-disabled-border-color** - The border color when the checkbox is disabled. (default: var(--dds-button-primary-background-disabled)) _(default: undefined)_\n- **--dds-checkbox-disabled-background-color** - The background color when the checkbox is disabled. (default: var(--dds-button-primary-background-disabled)) _(default: undefined)_\n- **--dds-checkbox-disabled-icon-color** - The color of the checkbox icon when disabled. (default: var(--dds-button-primary-icon-disabled)) _(default: undefined)_\n- **--dds-checkbox-readonly-border-color** - The border color when the checkbox is readonly. (default: var(--dds-border-neutral-subtle)) _(default: undefined)_\n- **--dds-checkbox-readonly-background-color** - The background color when the checkbox is readonly. (default: var(--dds-background-neutral-subtle)) _(default: undefined)_\n- **--dds-checkbox-readonly-icon-color** - The color of the checkbox icon when readonly. (default: var(--dds-text-neutral-base)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main checkbox container.\n- **label** - The label of the checkbox.\n- **input** - The input of the checkbox.\n- **control** - The control of the checkbox.\n- **icon** - The icon of the checkbox.\n- **icon-base** - The base icon container.\n- **label-container** - The label container of the checkbox.\n- **description** - The description of the checkbox.\n- **readonly** - The readonly state of the checkbox.",
|
|
579
|
-
"attributes": [
|
|
580
|
-
{
|
|
581
|
-
"name": "indeterminate",
|
|
582
|
-
"description": "Whether the checkbox is indeterminate",
|
|
583
|
-
"values": []
|
|
584
|
-
},
|
|
585
|
-
{
|
|
586
|
-
"name": "preventDefault",
|
|
587
|
-
"description": "Whether the checkbox should prevent the default action",
|
|
588
|
-
"values": []
|
|
589
|
-
},
|
|
590
|
-
{
|
|
591
|
-
"name": "border",
|
|
592
|
-
"description": "This sets up border around the checkbox, when true.",
|
|
593
|
-
"values": []
|
|
594
|
-
},
|
|
595
|
-
{
|
|
596
|
-
"name": "readonly",
|
|
597
|
-
"description": "Whether the checkbox is readonly (cannot be changed but value is submitted with form).",
|
|
598
|
-
"values": []
|
|
599
|
-
},
|
|
600
|
-
{
|
|
601
|
-
"name": "type",
|
|
602
|
-
"description": "The type of the checkbox",
|
|
603
|
-
"values": [{ "name": "normal" }, { "name": "background" }]
|
|
604
|
-
}
|
|
605
|
-
],
|
|
606
|
-
"references": [
|
|
607
|
-
{
|
|
608
|
-
"name": "Documentation",
|
|
609
|
-
"url": "https://shoelace.style/components/checkbox"
|
|
610
|
-
}
|
|
611
|
-
]
|
|
612
|
-
},
|
|
613
576
|
{
|
|
614
577
|
"name": "dap-ds-card-actions",
|
|
615
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.",
|
|
@@ -767,6 +730,43 @@
|
|
|
767
730
|
}
|
|
768
731
|
]
|
|
769
732
|
},
|
|
733
|
+
{
|
|
734
|
+
"name": "dap-ds-checkbox",
|
|
735
|
+
"description": "A checkbox is a form element that allows the user to select one or more options from a set.\n---\n\n\n### **Events:**\n - **dds-change** - Fired when the checkbox is checked or unchecked.\n- **dds-blur** - Emitted when the checkbox loses focus.\n- **dds-focus** - Emitted when the checkbox gains focus.\n- **dds-input** - Emitted when the checkbox receives input.\n\n### **Methods:**\n - **focus(): _void_** - Programmatically focuses the checkbox input element.\n- **blur(): _void_** - Programmatically blurs the checkbox input element.\n\n### **CSS Properties:**\n - **--dds-checkbox-size** - The size of the checkbox. (default: var(--dds-spacing-500)) _(default: undefined)_\n- **--dds-checkbox-border-width** - The border width of the checkbox. (default: var(--dds-border-width-large)) _(default: undefined)_\n- **--dds-checkbox-border-radius** - The border radius of the checkbox. (default: var(--dds-radius-small)) _(default: undefined)_\n- **--dds-checkbox-border-color** - The border color of the checkbox. (default: var(--dds-border-neutral-base)) _(default: undefined)_\n- **--dds-checkbox-background-color** - The background color of the checkbox. (default: transparent) _(default: undefined)_\n- **--dds-checkbox-icon-color** - The color of the checkbox icon. (default: var(--dds-button-primary-icon-enabled)) _(default: undefined)_\n- **--dds-checkbox-hover-border-color** - The border color when hovering over the checkbox. (default: var(--dds-border-neutral-medium)) _(default: undefined)_\n- **--dds-checkbox-hover-background-color** - The background color when hovering over the checkbox. (default: var(--dds-background-neutral-medium)) _(default: undefined)_\n- **--dds-checkbox-active-border-color** - The border color when the checkbox is active. (default: var(--dds-border-neutral-strong)) _(default: undefined)_\n- **--dds-checkbox-active-background-color** - The background color when the checkbox is active. (default: var(--dds-background-neutral-strong)) _(default: undefined)_\n- **--dds-checkbox-checked-border-color** - The border color when the checkbox is checked. (default: var(--dds-background-brand-base-inverted)) _(default: undefined)_\n- **--dds-checkbox-checked-background-color** - The background color when the checkbox is checked. (default: var(--dds-background-brand-base-inverted)) _(default: undefined)_\n- **--dds-checkbox-checked-hover-border-color** - The border color when hovering over a checked checkbox. (default: var(--dds-background-brand-medium-inverted)) _(default: undefined)_\n- **--dds-checkbox-checked-hover-background-color** - The background color when hovering over a checked checkbox. (default: var(--dds-background-brand-medium-inverted)) _(default: undefined)_\n- **--dds-checkbox-checked-active-border-color** - The border color when a checked checkbox is active. (default: var(--dds-background-brand-strong-inverted)) _(default: undefined)_\n- **--dds-checkbox-checked-active-background-color** - The background color when a checked checkbox is active. (default: var(--dds-background-brand-strong-inverted)) _(default: undefined)_\n- **--dds-checkbox-invalid-border-color** - The border color when the checkbox is invalid. (default: var(--dds-border-negative-base)) _(default: undefined)_\n- **--dds-checkbox-invalid-background-color** - The background color when the checkbox is invalid. (default: var(--dds-background-negative-base)) _(default: undefined)_\n- **--dds-checkbox-invalid-hover-border-color** - The border color when hovering over an invalid checkbox. (default: var(--dds-border-negative-medium)) _(default: undefined)_\n- **--dds-checkbox-invalid-hover-background-color** - The background color when hovering over an invalid checkbox. (default: var(--dds-background-negative-medium)) _(default: undefined)_\n- **--dds-checkbox-invalid-active-border-color** - The border color when an invalid checkbox is active. (default: var(--dds-border-negative-strong)) _(default: undefined)_\n- **--dds-checkbox-invalid-active-background-color** - The background color when an invalid checkbox is active. (default: var(--dds-background-negative-strong)) _(default: undefined)_\n- **--dds-checkbox-disabled-border-color** - The border color when the checkbox is disabled. (default: var(--dds-button-primary-background-disabled)) _(default: undefined)_\n- **--dds-checkbox-disabled-background-color** - The background color when the checkbox is disabled. (default: var(--dds-button-primary-background-disabled)) _(default: undefined)_\n- **--dds-checkbox-disabled-icon-color** - The color of the checkbox icon when disabled. (default: var(--dds-button-primary-icon-disabled)) _(default: undefined)_\n- **--dds-checkbox-readonly-border-color** - The border color when the checkbox is readonly. (default: var(--dds-border-neutral-subtle)) _(default: undefined)_\n- **--dds-checkbox-readonly-background-color** - The background color when the checkbox is readonly. (default: var(--dds-background-neutral-subtle)) _(default: undefined)_\n- **--dds-checkbox-readonly-icon-color** - The color of the checkbox icon when readonly. (default: var(--dds-text-neutral-base)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main checkbox container.\n- **label** - The label of the checkbox.\n- **input** - The input of the checkbox.\n- **control** - The control of the checkbox.\n- **icon** - The icon of the checkbox.\n- **icon-base** - The base icon container.\n- **label-container** - The label container of the checkbox.\n- **description** - The description of the checkbox.\n- **readonly** - The readonly state of the checkbox.",
|
|
736
|
+
"attributes": [
|
|
737
|
+
{
|
|
738
|
+
"name": "indeterminate",
|
|
739
|
+
"description": "Whether the checkbox is indeterminate",
|
|
740
|
+
"values": []
|
|
741
|
+
},
|
|
742
|
+
{
|
|
743
|
+
"name": "preventDefault",
|
|
744
|
+
"description": "Whether the checkbox should prevent the default action",
|
|
745
|
+
"values": []
|
|
746
|
+
},
|
|
747
|
+
{
|
|
748
|
+
"name": "border",
|
|
749
|
+
"description": "This sets up border around the checkbox, when true.",
|
|
750
|
+
"values": []
|
|
751
|
+
},
|
|
752
|
+
{
|
|
753
|
+
"name": "readonly",
|
|
754
|
+
"description": "Whether the checkbox is readonly (cannot be changed but value is submitted with form).",
|
|
755
|
+
"values": []
|
|
756
|
+
},
|
|
757
|
+
{
|
|
758
|
+
"name": "type",
|
|
759
|
+
"description": "The type of the checkbox",
|
|
760
|
+
"values": [{ "name": "normal" }, { "name": "background" }]
|
|
761
|
+
}
|
|
762
|
+
],
|
|
763
|
+
"references": [
|
|
764
|
+
{
|
|
765
|
+
"name": "Documentation",
|
|
766
|
+
"url": "https://shoelace.style/components/checkbox"
|
|
767
|
+
}
|
|
768
|
+
]
|
|
769
|
+
},
|
|
770
770
|
{
|
|
771
771
|
"name": "dap-ds-chip",
|
|
772
772
|
"description": "A chip is a small status descriptor for UI elements.\n---\n\n\n### **Events:**\n - **dds-remove** - Fired when the chip is removed\n- **dds-select** - Fired when the chip is selected\n\n### **CSS Properties:**\n - **--dds-chip-border** - Border of the chip (default: var(--dds-border-width-base) solid var(--dds-transparent-black-base)) _(default: undefined)_\n- **--dds-chip-border-radius** - Border radius of the chip (default: var(--dds-radius-small)) _(default: undefined)_\n- **--dds-chip-font-weight** - Font weight of the chip (default: var(--dds-font-weight-bold)) _(default: undefined)_\n- **--dds-chip-line-height** - Line height of the chip (default: 1.5) _(default: undefined)_\n- **--dds-chip-transition** - Transition timing for chip interactions (default: all 0.2s ease-in-out) _(default: undefined)_\n- **--dds-chip-padding-sm** - Padding for small chip size (default: var(--dds-spacing-100) var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-chip-padding-lg** - Padding for large chip size (default: var(--dds-spacing-200) var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-chip-font-size-sm** - Font size for small chip size (default: var(--dds-font-xs)) _(default: undefined)_\n- **--dds-chip-font-size-lg** - Font size for large chip size (default: var(--dds-font-xs)) _(default: undefined)_\n- **--dds-chip-background-color** - Background color of the chip (default: var(--dds-background-neutral-base)) _(default: undefined)_\n- **--dds-chip-text-color** - Text color of the chip (default: var(--dds-text-neutral-base)) _(default: undefined)_\n- **--dds-chip-hover-background-color** - Background color of the chip on hover (default: var(--dds-background-neutral-medium)) _(default: undefined)_\n- **--dds-chip-active-background-color** - Background color of the chip when active (default: var(--dds-background-neutral-strong)) _(default: undefined)_\n- **--dds-chip-selected-background-color** - Background color of the selected chip (default: var(--dds-background-brand-medium)) _(default: undefined)_\n- **--dds-chip-selected-text-color** - Text color of the selected chip (default: var(--dds-text-brand-subtle)) _(default: undefined)_\n- **--dds-chip-selected-border-color** - Border color of the selected chip (default: var(--dds-border-brand-base)) _(default: undefined)_\n- **--dds-chip-disabled-background-color** - Background color of the disabled chip (default: var(--dds-background-neutral-medium)) _(default: undefined)_\n- **--dds-chip-disabled-text-color** - Text color of the disabled chip (default: var(--dds-text-neutral-subtle)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The base part\n- **content-container** - The container for the content\n- **remove-button** - The remove button\n- **remove-icon** - The icon of the remove icon\n- **remove-icon-base** - The base of the remove icon\n- **remove-icon-base-base** - The base of the remove icon base",
|
|
@@ -6432,7 +6432,7 @@
|
|
|
6432
6432
|
]
|
|
6433
6433
|
},
|
|
6434
6434
|
{
|
|
6435
|
-
"name": "dap-ds-icon-
|
|
6435
|
+
"name": "dap-ds-icon-share-line",
|
|
6436
6436
|
"description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
|
|
6437
6437
|
"attributes": [
|
|
6438
6438
|
{
|
|
@@ -6459,12 +6459,12 @@
|
|
|
6459
6459
|
"references": [
|
|
6460
6460
|
{
|
|
6461
6461
|
"name": "Documentation",
|
|
6462
|
-
"url": "https://shoelace.style/components/icon-
|
|
6462
|
+
"url": "https://shoelace.style/components/icon-share-line"
|
|
6463
6463
|
}
|
|
6464
6464
|
]
|
|
6465
6465
|
},
|
|
6466
6466
|
{
|
|
6467
|
-
"name": "dap-ds-icon-
|
|
6467
|
+
"name": "dap-ds-icon-shield-check-fill",
|
|
6468
6468
|
"description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
|
|
6469
6469
|
"attributes": [
|
|
6470
6470
|
{
|
|
@@ -6491,7 +6491,7 @@
|
|
|
6491
6491
|
"references": [
|
|
6492
6492
|
{
|
|
6493
6493
|
"name": "Documentation",
|
|
6494
|
-
"url": "https://shoelace.style/components/icon-
|
|
6494
|
+
"url": "https://shoelace.style/components/icon-shield-check-fill"
|
|
6495
6495
|
}
|
|
6496
6496
|
]
|
|
6497
6497
|
},
|