dap-design-system 0.63.0 → 0.63.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/datepicker/datepicker.component.d.ts +3 -0
- package/dist/components/datepicker/datepicker.component.js +29 -17
- package/dist/components/datepicker/datepicker.component.js.map +1 -1
- package/dist/components/file-input/file-input.component.d.ts +3 -0
- package/dist/components/file-input/file-input.component.js +89 -87
- package/dist/components/file-input/file-input.component.js.map +1 -1
- package/dist/components/timepicker/timepicker.component.d.ts +2 -0
- package/dist/components/timepicker/timepicker.component.js +20 -17
- package/dist/components/timepicker/timepicker.component.js.map +1 -1
- package/dist/internal/mixin/formElementMixin.d.ts +1 -0
- package/dist/internal/mixin/formElementMixin.js.map +1 -1
- package/dist/localization/locales/de.json.js +11 -11
- package/dist/localization/locales/en.json.js +10 -10
- package/dist/localization/locales/hu.json.js +11 -11
- package/dist/manifest/types/vue/index.d.ts +569 -567
- package/dist/manifest/vscode.html-custom-data.json +382 -377
- package/dist/manifest/web-types.json +1302 -1292
- package/dist/react/dap-ds-file-input/index.d.ts +1 -0
- package/dist/react/dap-ds-file-input/index.js.map +1 -1
- package/dist/react/index.d.ts +15 -15
- package/dist/react-types.ts +15 -15
- package/dist/react.js +68 -68
- package/package.json +1 -1
|
@@ -2,17 +2,6 @@
|
|
|
2
2
|
"$schema": "https://raw.githubusercontent.com/microsoft/vscode-html-languageservice/main/docs/customData.schema.json",
|
|
3
3
|
"version": 1.1,
|
|
4
4
|
"tags": [
|
|
5
|
-
{
|
|
6
|
-
"name": "dap-ds-accordion",
|
|
7
|
-
"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.\n- **heading-text** - The text of the heading.",
|
|
8
|
-
"attributes": [],
|
|
9
|
-
"references": [
|
|
10
|
-
{
|
|
11
|
-
"name": "Documentation",
|
|
12
|
-
"url": "https://shoelace.style/components/accordion"
|
|
13
|
-
}
|
|
14
|
-
]
|
|
15
|
-
},
|
|
16
5
|
{
|
|
17
6
|
"name": "dap-ds-anchor-heading",
|
|
18
7
|
"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.\n- **link-text** - Alias of the text part.",
|
|
@@ -36,36 +25,13 @@
|
|
|
36
25
|
]
|
|
37
26
|
},
|
|
38
27
|
{
|
|
39
|
-
"name": "dap-ds-
|
|
40
|
-
"description": "
|
|
41
|
-
"attributes": [
|
|
42
|
-
{
|
|
43
|
-
"name": "type",
|
|
44
|
-
"description": "The type of the badge",
|
|
45
|
-
"values": [
|
|
46
|
-
{ "name": "neutral" },
|
|
47
|
-
{ "name": "brand" },
|
|
48
|
-
{ "name": "info" },
|
|
49
|
-
{ "name": "positive" },
|
|
50
|
-
{ "name": "warning" },
|
|
51
|
-
{ "name": "negative" }
|
|
52
|
-
]
|
|
53
|
-
},
|
|
54
|
-
{
|
|
55
|
-
"name": "icon",
|
|
56
|
-
"description": "The icon of the badge, this is a name of a built in icon",
|
|
57
|
-
"values": []
|
|
58
|
-
},
|
|
59
|
-
{
|
|
60
|
-
"name": "live",
|
|
61
|
-
"description": "Whether the badge represents dynamic content that should announce changes",
|
|
62
|
-
"values": []
|
|
63
|
-
}
|
|
64
|
-
],
|
|
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.\n- **heading-text** - The text of the heading.",
|
|
30
|
+
"attributes": [],
|
|
65
31
|
"references": [
|
|
66
32
|
{
|
|
67
33
|
"name": "Documentation",
|
|
68
|
-
"url": "https://shoelace.style/components/
|
|
34
|
+
"url": "https://shoelace.style/components/accordion"
|
|
69
35
|
}
|
|
70
36
|
]
|
|
71
37
|
},
|
|
@@ -140,29 +106,78 @@
|
|
|
140
106
|
]
|
|
141
107
|
},
|
|
142
108
|
{
|
|
143
|
-
"name": "dap-ds-
|
|
144
|
-
"description": "
|
|
109
|
+
"name": "dap-ds-avatar-group",
|
|
110
|
+
"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.",
|
|
145
111
|
"attributes": [
|
|
146
112
|
{
|
|
147
|
-
"name": "
|
|
148
|
-
"description": "
|
|
113
|
+
"name": "layout",
|
|
114
|
+
"description": "Layout type for the avatar group",
|
|
115
|
+
"values": [{ "name": "stack" }, { "name": "grid" }]
|
|
116
|
+
},
|
|
117
|
+
{
|
|
118
|
+
"name": "max",
|
|
119
|
+
"description": "Maximum number of avatars to show before showing overflow",
|
|
149
120
|
"values": []
|
|
150
121
|
},
|
|
151
122
|
{
|
|
152
|
-
"name": "
|
|
153
|
-
"description": "
|
|
123
|
+
"name": "show-total",
|
|
124
|
+
"description": "Whether to show the total count in overflow indicator",
|
|
125
|
+
"values": []
|
|
126
|
+
},
|
|
127
|
+
{
|
|
128
|
+
"name": "interactive-overflow",
|
|
129
|
+
"description": "Interactive overflow indicator",
|
|
130
|
+
"values": []
|
|
131
|
+
},
|
|
132
|
+
{
|
|
133
|
+
"name": "label",
|
|
134
|
+
"description": "Accessible label for the avatar group",
|
|
135
|
+
"values": []
|
|
136
|
+
},
|
|
137
|
+
{
|
|
138
|
+
"name": "overflow-label",
|
|
139
|
+
"description": "Accessible label for the overflow indicator",
|
|
140
|
+
"values": []
|
|
141
|
+
}
|
|
142
|
+
],
|
|
143
|
+
"references": [
|
|
144
|
+
{
|
|
145
|
+
"name": "Documentation",
|
|
146
|
+
"url": "https://shoelace.style/components/avatar-group"
|
|
147
|
+
}
|
|
148
|
+
]
|
|
149
|
+
},
|
|
150
|
+
{
|
|
151
|
+
"name": "dap-ds-badge",
|
|
152
|
+
"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.",
|
|
153
|
+
"attributes": [
|
|
154
|
+
{
|
|
155
|
+
"name": "type",
|
|
156
|
+
"description": "The type of the badge",
|
|
154
157
|
"values": [
|
|
155
|
-
{ "name": "
|
|
156
|
-
{ "name": "
|
|
157
|
-
{ "name": "
|
|
158
|
-
{ "name": "
|
|
158
|
+
{ "name": "neutral" },
|
|
159
|
+
{ "name": "brand" },
|
|
160
|
+
{ "name": "info" },
|
|
161
|
+
{ "name": "positive" },
|
|
162
|
+
{ "name": "warning" },
|
|
163
|
+
{ "name": "negative" }
|
|
159
164
|
]
|
|
165
|
+
},
|
|
166
|
+
{
|
|
167
|
+
"name": "icon",
|
|
168
|
+
"description": "The icon of the badge, this is a name of a built in icon",
|
|
169
|
+
"values": []
|
|
170
|
+
},
|
|
171
|
+
{
|
|
172
|
+
"name": "live",
|
|
173
|
+
"description": "Whether the badge represents dynamic content that should announce changes",
|
|
174
|
+
"values": []
|
|
160
175
|
}
|
|
161
176
|
],
|
|
162
177
|
"references": [
|
|
163
178
|
{
|
|
164
179
|
"name": "Documentation",
|
|
165
|
-
"url": "https://shoelace.style/components/
|
|
180
|
+
"url": "https://shoelace.style/components/badge"
|
|
166
181
|
}
|
|
167
182
|
]
|
|
168
183
|
},
|
|
@@ -238,44 +253,29 @@
|
|
|
238
253
|
]
|
|
239
254
|
},
|
|
240
255
|
{
|
|
241
|
-
"name": "dap-ds-
|
|
242
|
-
"description": "
|
|
256
|
+
"name": "dap-ds-accordion-group",
|
|
257
|
+
"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.",
|
|
243
258
|
"attributes": [
|
|
244
259
|
{
|
|
245
|
-
"name": "
|
|
246
|
-
"description": "
|
|
247
|
-
"values": [{ "name": "stack" }, { "name": "grid" }]
|
|
248
|
-
},
|
|
249
|
-
{
|
|
250
|
-
"name": "max",
|
|
251
|
-
"description": "Maximum number of avatars to show before showing overflow",
|
|
252
|
-
"values": []
|
|
253
|
-
},
|
|
254
|
-
{
|
|
255
|
-
"name": "show-total",
|
|
256
|
-
"description": "Whether to show the total count in overflow indicator",
|
|
257
|
-
"values": []
|
|
258
|
-
},
|
|
259
|
-
{
|
|
260
|
-
"name": "interactive-overflow",
|
|
261
|
-
"description": "Interactive overflow indicator",
|
|
262
|
-
"values": []
|
|
263
|
-
},
|
|
264
|
-
{
|
|
265
|
-
"name": "label",
|
|
266
|
-
"description": "Accessible label for the avatar group",
|
|
260
|
+
"name": "autoClose",
|
|
261
|
+
"description": "Whether to close other accordions when one is opened.",
|
|
267
262
|
"values": []
|
|
268
263
|
},
|
|
269
264
|
{
|
|
270
|
-
"name": "
|
|
271
|
-
"description": "
|
|
272
|
-
"values": [
|
|
265
|
+
"name": "variant",
|
|
266
|
+
"description": "The variant of the accordion",
|
|
267
|
+
"values": [
|
|
268
|
+
{ "name": "default" },
|
|
269
|
+
{ "name": "collapsed" },
|
|
270
|
+
{ "name": "clean" },
|
|
271
|
+
{ "name": "clean-collapsed" }
|
|
272
|
+
]
|
|
273
273
|
}
|
|
274
274
|
],
|
|
275
275
|
"references": [
|
|
276
276
|
{
|
|
277
277
|
"name": "Documentation",
|
|
278
|
-
"url": "https://shoelace.style/components/
|
|
278
|
+
"url": "https://shoelace.style/components/accordion-group"
|
|
279
279
|
}
|
|
280
280
|
]
|
|
281
281
|
},
|
|
@@ -426,6 +426,45 @@
|
|
|
426
426
|
}
|
|
427
427
|
]
|
|
428
428
|
},
|
|
429
|
+
{
|
|
430
|
+
"name": "dap-ds-button-group-separator",
|
|
431
|
+
"description": "A visual divider between items in a button group.\n---\n\n\n### **CSS Properties:**\n - **--dds-button-group-separator-color** - Color of the separator line (default: var(--dds-border-neutral-divider)) _(default: undefined)_\n- **--dds-button-group-separator-size** - Thickness of the separator line (default: var(--dds-border-width-base)) _(default: undefined)_",
|
|
432
|
+
"attributes": [],
|
|
433
|
+
"references": [
|
|
434
|
+
{
|
|
435
|
+
"name": "Documentation",
|
|
436
|
+
"url": "https://shoelace.style/components/button-group-separator"
|
|
437
|
+
}
|
|
438
|
+
]
|
|
439
|
+
},
|
|
440
|
+
{
|
|
441
|
+
"name": "dap-ds-button-group-text",
|
|
442
|
+
"description": "Non-interactive text displayed inside a button group.\n---\n\n\n### **Slots:**\n - _default_ - The text content. Can also hold an icon or a `<label>` for a grouped input.\n\n### **CSS Properties:**\n - **--dds-button-group-text-background** - Background color (default: var(--dds-background-neutral-subtle)) _(default: undefined)_\n- **--dds-button-group-text-border-color** - Border color (default: var(--dds-border-neutral-subtle)) _(default: undefined)_\n- **--dds-button-group-text-color** - Text color (default: var(--dds-text-neutral-strong)) _(default: undefined)_\n- **--dds-button-group-text-padding-x** - Horizontal padding (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-button-group-text-border-radius** - Corner radius outside a group (default: var(--dds-radius-rounded)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The text container.",
|
|
443
|
+
"attributes": [],
|
|
444
|
+
"references": [
|
|
445
|
+
{
|
|
446
|
+
"name": "Documentation",
|
|
447
|
+
"url": "https://shoelace.style/components/button-group-text"
|
|
448
|
+
}
|
|
449
|
+
]
|
|
450
|
+
},
|
|
451
|
+
{
|
|
452
|
+
"name": "dap-ds-button-group",
|
|
453
|
+
"description": "A container that groups related buttons with consistent, connected styling.\n---\n\n\n### **Slots:**\n - _default_ - The grouped items: `dap-ds-button`, `dap-ds-icon-button`, `dap-ds-button-group-text`, `dap-ds-button-group-separator` or nested `dap-ds-button-group` elements.\n\n### **CSS Properties:**\n - **--dds-button-group-gap** - Spacing between nested button groups (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-button-group-overlap** - How much adjacent items overlap so their borders collapse into one (default: var(--dds-border-width-large)) _(default: undefined)_\n- **--dds-button-group-start-start-radius** - Set on grouped items to square off their start-start corner. Read by `dap-ds-button`, `dap-ds-icon-button` and `dap-ds-button-group-text`. _(default: undefined)_\n- **--dds-button-group-start-end-radius** - Set on grouped items to square off their start-end corner. _(default: undefined)_\n- **--dds-button-group-end-start-radius** - Set on grouped items to square off their end-start corner. _(default: undefined)_\n- **--dds-button-group-end-end-radius** - Set on grouped items to square off their end-end corner. _(default: undefined)_",
|
|
454
|
+
"attributes": [
|
|
455
|
+
{
|
|
456
|
+
"name": "orientation",
|
|
457
|
+
"description": "The layout direction of the group",
|
|
458
|
+
"values": [{ "name": "ButtonGroupOrientation" }]
|
|
459
|
+
}
|
|
460
|
+
],
|
|
461
|
+
"references": [
|
|
462
|
+
{
|
|
463
|
+
"name": "Documentation",
|
|
464
|
+
"url": "https://shoelace.style/components/button-group"
|
|
465
|
+
}
|
|
466
|
+
]
|
|
467
|
+
},
|
|
429
468
|
{
|
|
430
469
|
"name": "dap-ds-calendar-cell",
|
|
431
470
|
"description": "Calendar cell represents a single cell in the calendar.\n---\n\n\n### **Slots:**\n - _default_ - The content of the calendar cell.\n\n### **CSS Properties:**\n - **--dds-calendar-cell-display** - The display property of the calendar cell host (default: flex) _(default: undefined)_\n- **--dds-calendar-cell-position** - The position property of the calendar cell host (default: relative) _(default: undefined)_\n- **--dds-calendar-cell-border-radius** - The border radius of the calendar cell (default: var(--dds-radius-rounded)) _(default: undefined)_\n- **--dds-calendar-cell-min-width** - The minimum width of the calendar cell (default: var(--dds-spacing-1000)) _(default: undefined)_\n- **--dds-calendar-cell-height** - The height of the calendar cell (default: var(--dds-spacing-1000)) _(default: undefined)_\n- **--dds-calendar-cell-min-height** - The minimum height of the calendar cell (default: var(--dds-spacing-1000)) _(default: undefined)_\n- **--dds-calendar-cell-color** - The text color of the calendar cell (default: var(--dds-button-subtle-text-neutral-enabled)) _(default: undefined)_\n- **--dds-calendar-cell-font-size** - The font size of the calendar cell (default: var(--dds-font-sm)) _(default: undefined)_\n- **--dds-calendar-cell-font-weight** - The font weight of the calendar cell (default: var(--dds-font-weight-medium)) _(default: undefined)_\n- **--dds-calendar-cell-text-align** - The text alignment of the calendar cell (default: center) _(default: undefined)_\n- **--dds-calendar-cell-cursor** - The cursor style of the calendar cell (default: pointer) _(default: undefined)_\n- **--dds-calendar-cell-background-hover** - The background color of the calendar cell on hover (default: var(--dds-background-neutral-medium)) _(default: undefined)_\n- **--dds-calendar-cell-background-active** - The background color of the calendar cell when active (default: var(--dds-background-neutral-strong)) _(default: undefined)_\n- **--dds-calendar-cell-selected-background** - The background color of the selected calendar cell (default: var(--dds-button-primary-background-enabled)) _(default: undefined)_\n- **--dds-calendar-cell-selected-color** - The text color of the selected calendar cell (default: var(--dds-button-primary-text-enabled)) _(default: undefined)_\n- **--dds-calendar-cell-selected-background-hover** - The background color of the selected calendar cell on hover (default: var(--dds-button-primary-background-hover)) _(default: undefined)_\n- **--dds-calendar-cell-selected-background-pressed** - The background color of the selected calendar cell when pressed (default: var(--dds-button-primary-background-pressed)) _(default: undefined)_\n- **--dds-calendar-cell-selected-today-mark-background** - The background color of the today mark in selected calendar cell (default: var(--dds-text-neutral-on-inverted)) _(default: undefined)_\n- **--dds-calendar-cell-disabled-color** - The text color of the disabled calendar cell (default: var(--dds-text-neutral-disabled)) _(default: undefined)_\n- **--dds-calendar-cell-disabled-cursor** - The cursor style of the disabled calendar cell (default: not-allowed) _(default: undefined)_\n- **--dds-calendar-cell-out-of-range-color** - The text color of the out-of-range calendar cell (default: var(--dds-text-neutral-placeholder)) _(default: undefined)_\n- **--dds-calendar-cell-today-font-weight** - The font weight of the today calendar cell (default: var(--dds-font-weight-bold)) _(default: undefined)_\n- **--dds-calendar-cell-header-background** - The background color of the header calendar cell (default: transparent) _(default: undefined)_\n- **--dds-calendar-cell-header-color** - The text color of the header calendar cell (default: var(--dds-text-neutral-base)) _(default: undefined)_\n- **--dds-calendar-cell-header-text-transform** - The text transform of the header calendar cell (default: capitalize) _(default: undefined)_\n- **--dds-calendar-cell-header-cursor** - The cursor style of the header calendar cell (default: default) _(default: undefined)_\n- **--dds-calendar-cell-in-range-color** - The text color of the in-range calendar cell (default: var(--dds-button-primary-text-enabled)) _(default: undefined)_\n- **--dds-calendar-cell-in-range-background-hover** - The background color of the in-range calendar cell on hover (default: var(--dds-button-primary-background-hover)) _(default: undefined)_\n- **--dds-calendar-cell-in-range-background-pressed** - The background color of the in-range calendar cell when pressed (default: var(--dds-button-primary-background-pressed)) _(default: undefined)_\n- **--dds-calendar-cell-range-background** - The background color of the range start/end calendar cell (default: var(--dds-button-primary-background-enabled)) _(default: undefined)_\n- **--dds-calendar-cell-range-color** - The text color of the range start/end calendar cell (default: var(--dds-button-primary-text-enabled)) _(default: undefined)_\n- **--dds-calendar-cell-range-today-mark-background** - The background color of the today mark in range start/end calendar cell (default: var(--dds-text-neutral-on-inverted)) _(default: undefined)_\n- **--dds-calendar-cell-today-mark-bottom** - The bottom position of the today mark (default: var(--dds-spacing-100)) _(default: undefined)_\n- **--dds-calendar-cell-today-mark-width** - The width of the today mark (default: 5px) _(default: undefined)_\n- **--dds-calendar-cell-today-mark-height** - The height of the today mark (default: 5px) _(default: undefined)_\n- **--dds-calendar-cell-today-mark-stroke** - The stroke color of the today mark (default: var(--dds-border-neutral-transparent)) _(default: undefined)_\n- **--dds-calendar-cell-today-mark-background** - The background color of the today mark (default: var(--dds-background-neutral-medium-inverted)) _(default: undefined)_\n- **--dds-calendar-cell-today-mark-fill** - The fill color of the today mark (default: var(--dds-background-neutral-medium-inverted)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main calendar cell container.\n- **today-mark** - The today mark of the calendar cell.",
|
|
@@ -525,45 +564,6 @@
|
|
|
525
564
|
}
|
|
526
565
|
]
|
|
527
566
|
},
|
|
528
|
-
{
|
|
529
|
-
"name": "dap-ds-button-group-separator",
|
|
530
|
-
"description": "A visual divider between items in a button group.\n---\n\n\n### **CSS Properties:**\n - **--dds-button-group-separator-color** - Color of the separator line (default: var(--dds-border-neutral-divider)) _(default: undefined)_\n- **--dds-button-group-separator-size** - Thickness of the separator line (default: var(--dds-border-width-base)) _(default: undefined)_",
|
|
531
|
-
"attributes": [],
|
|
532
|
-
"references": [
|
|
533
|
-
{
|
|
534
|
-
"name": "Documentation",
|
|
535
|
-
"url": "https://shoelace.style/components/button-group-separator"
|
|
536
|
-
}
|
|
537
|
-
]
|
|
538
|
-
},
|
|
539
|
-
{
|
|
540
|
-
"name": "dap-ds-button-group-text",
|
|
541
|
-
"description": "Non-interactive text displayed inside a button group.\n---\n\n\n### **Slots:**\n - _default_ - The text content. Can also hold an icon or a `<label>` for a grouped input.\n\n### **CSS Properties:**\n - **--dds-button-group-text-background** - Background color (default: var(--dds-background-neutral-subtle)) _(default: undefined)_\n- **--dds-button-group-text-border-color** - Border color (default: var(--dds-border-neutral-subtle)) _(default: undefined)_\n- **--dds-button-group-text-color** - Text color (default: var(--dds-text-neutral-strong)) _(default: undefined)_\n- **--dds-button-group-text-padding-x** - Horizontal padding (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-button-group-text-border-radius** - Corner radius outside a group (default: var(--dds-radius-rounded)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The text container.",
|
|
542
|
-
"attributes": [],
|
|
543
|
-
"references": [
|
|
544
|
-
{
|
|
545
|
-
"name": "Documentation",
|
|
546
|
-
"url": "https://shoelace.style/components/button-group-text"
|
|
547
|
-
}
|
|
548
|
-
]
|
|
549
|
-
},
|
|
550
|
-
{
|
|
551
|
-
"name": "dap-ds-button-group",
|
|
552
|
-
"description": "A container that groups related buttons with consistent, connected styling.\n---\n\n\n### **Slots:**\n - _default_ - The grouped items: `dap-ds-button`, `dap-ds-icon-button`, `dap-ds-button-group-text`, `dap-ds-button-group-separator` or nested `dap-ds-button-group` elements.\n\n### **CSS Properties:**\n - **--dds-button-group-gap** - Spacing between nested button groups (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-button-group-overlap** - How much adjacent items overlap so their borders collapse into one (default: var(--dds-border-width-large)) _(default: undefined)_\n- **--dds-button-group-start-start-radius** - Set on grouped items to square off their start-start corner. Read by `dap-ds-button`, `dap-ds-icon-button` and `dap-ds-button-group-text`. _(default: undefined)_\n- **--dds-button-group-start-end-radius** - Set on grouped items to square off their start-end corner. _(default: undefined)_\n- **--dds-button-group-end-start-radius** - Set on grouped items to square off their end-start corner. _(default: undefined)_\n- **--dds-button-group-end-end-radius** - Set on grouped items to square off their end-end corner. _(default: undefined)_",
|
|
553
|
-
"attributes": [
|
|
554
|
-
{
|
|
555
|
-
"name": "orientation",
|
|
556
|
-
"description": "The layout direction of the group",
|
|
557
|
-
"values": [{ "name": "ButtonGroupOrientation" }]
|
|
558
|
-
}
|
|
559
|
-
],
|
|
560
|
-
"references": [
|
|
561
|
-
{
|
|
562
|
-
"name": "Documentation",
|
|
563
|
-
"url": "https://shoelace.style/components/button-group"
|
|
564
|
-
}
|
|
565
|
-
]
|
|
566
|
-
},
|
|
567
567
|
{
|
|
568
568
|
"name": "dap-ds-callout",
|
|
569
569
|
"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.\n- **icon-base** - The base of the icon.",
|
|
@@ -1915,6 +1915,11 @@
|
|
|
1915
1915
|
"description": "Aria label for the dropzone.",
|
|
1916
1916
|
"values": []
|
|
1917
1917
|
},
|
|
1918
|
+
{
|
|
1919
|
+
"name": "regionAriaLabel",
|
|
1920
|
+
"description": "Accessible name of the file upload region landmark. Defaults to the localized \"File upload area\" text.",
|
|
1921
|
+
"values": []
|
|
1922
|
+
},
|
|
1918
1923
|
{
|
|
1919
1924
|
"name": "dropzoneFocusable",
|
|
1920
1925
|
"description": "Whether the dropzone is in the tab order and exposes button keyboard behavior (default: true).",
|
|
@@ -2102,24 +2107,24 @@
|
|
|
2102
2107
|
]
|
|
2103
2108
|
},
|
|
2104
2109
|
{
|
|
2105
|
-
"name": "dap-ds-
|
|
2106
|
-
"description": "
|
|
2110
|
+
"name": "dap-ds-label",
|
|
2111
|
+
"description": "A label is a container for labels intended for general use. It contains a label text, description, and tooltip.\n---\n\n\n### **CSS Properties:**\n - **--dds-label-background** - The background color of the label container. (default: var(--dds-background-neutral-subtle)). _(default: undefined)_\n- **--dds-label-border-color** - The border color of the label container. (default: var(--dds-border-neutral-subtle)). _(default: undefined)_\n- **--dds-label-border-width** - The border width of the label container. (default: var(--dds-border-width-base)). _(default: undefined)_\n- **--dds-label-border-radius** - The border radius of the label container. (default: var(--dds-radius-base)). _(default: undefined)_\n- **--dds-label-padding** - The padding of the label container. (default: var(--dds-spacing-400)). _(default: undefined)_\n- **--dds-label-disabled-background** - The background color of the label container when disabled. (default: var(--dds-background-neutral-disabled-inverted)). _(default: undefined)_\n- **--dds-label-checked-border-color** - The border color of the label container when checked. (default: var(--dds-background-brand-base-inverted)). _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main label container.\n- **label** - Tha main label container. dap-ds-form-label element.\n- **label-base** - The label text.\n- **label-required** - The required indicator of the label.\n- **label-optional** - The optional indicator of the label.\n- **tooltip** - The tooltip of the label. dap-ds-tooltip element.\n- **description** - The description of the label.",
|
|
2107
2112
|
"attributes": [],
|
|
2108
2113
|
"references": [
|
|
2109
2114
|
{
|
|
2110
2115
|
"name": "Documentation",
|
|
2111
|
-
"url": "https://shoelace.style/components/
|
|
2116
|
+
"url": "https://shoelace.style/components/label"
|
|
2112
2117
|
}
|
|
2113
2118
|
]
|
|
2114
2119
|
},
|
|
2115
2120
|
{
|
|
2116
|
-
"name": "dap-ds-
|
|
2117
|
-
"description": "
|
|
2121
|
+
"name": "dap-ds-input",
|
|
2122
|
+
"description": "An input is a field used to collect user input.\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 - **postfix** - The postfix of the input.\n- **prefix** - The prefix of the input.\n- **addon-before** - The addon before the input.\n- **addon-after** - The addon after the input.\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 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.",
|
|
2118
2123
|
"attributes": [],
|
|
2119
2124
|
"references": [
|
|
2120
2125
|
{
|
|
2121
2126
|
"name": "Documentation",
|
|
2122
|
-
"url": "https://shoelace.style/components/
|
|
2127
|
+
"url": "https://shoelace.style/components/input"
|
|
2123
2128
|
}
|
|
2124
2129
|
]
|
|
2125
2130
|
},
|
|
@@ -2309,6 +2314,132 @@
|
|
|
2309
2314
|
}
|
|
2310
2315
|
]
|
|
2311
2316
|
},
|
|
2317
|
+
{
|
|
2318
|
+
"name": "dap-ds-number-input",
|
|
2319
|
+
"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.\n- **decrement-icon** - The icon of the decrement button.\n- **decrement-icon-base** - The base of the decrement icon.\n- **increment-icon** - The icon of the increment button.\n- **increment-icon-base** - The base of the increment icon.\n- **label-base** - The base of the label.\n- **label-required** - The required indicator of the label.\n- **label-optional** - The optional indicator of the label.",
|
|
2320
|
+
"attributes": [
|
|
2321
|
+
{
|
|
2322
|
+
"name": "thousandSeparator",
|
|
2323
|
+
"description": "The thousand separator of the input.",
|
|
2324
|
+
"values": []
|
|
2325
|
+
},
|
|
2326
|
+
{
|
|
2327
|
+
"name": "decimalSeparator",
|
|
2328
|
+
"description": "The decimal separator of the input.",
|
|
2329
|
+
"values": []
|
|
2330
|
+
},
|
|
2331
|
+
{
|
|
2332
|
+
"name": "decimalScale",
|
|
2333
|
+
"description": "The decimal scale of the input.",
|
|
2334
|
+
"values": []
|
|
2335
|
+
},
|
|
2336
|
+
{
|
|
2337
|
+
"name": "allowNegative",
|
|
2338
|
+
"description": "The allow negative state of the input.",
|
|
2339
|
+
"values": []
|
|
2340
|
+
},
|
|
2341
|
+
{
|
|
2342
|
+
"name": "allowDecimal",
|
|
2343
|
+
"description": "The allow decimal state of the input.",
|
|
2344
|
+
"values": []
|
|
2345
|
+
},
|
|
2346
|
+
{
|
|
2347
|
+
"name": "hideControls",
|
|
2348
|
+
"description": "Hides the increment and decrement buttons.",
|
|
2349
|
+
"values": []
|
|
2350
|
+
},
|
|
2351
|
+
{
|
|
2352
|
+
"name": "padStart",
|
|
2353
|
+
"description": "The number of leading zeros to add to the input.",
|
|
2354
|
+
"values": []
|
|
2355
|
+
},
|
|
2356
|
+
{
|
|
2357
|
+
"name": "decrementButtonTestId",
|
|
2358
|
+
"description": "`data-testid` for the decrement stepper button.",
|
|
2359
|
+
"values": []
|
|
2360
|
+
},
|
|
2361
|
+
{
|
|
2362
|
+
"name": "incrementButtonTestId",
|
|
2363
|
+
"description": "`data-testid` for the increment stepper button.",
|
|
2364
|
+
"values": []
|
|
2365
|
+
}
|
|
2366
|
+
],
|
|
2367
|
+
"references": [
|
|
2368
|
+
{
|
|
2369
|
+
"name": "Documentation",
|
|
2370
|
+
"url": "https://shoelace.style/components/number-input"
|
|
2371
|
+
}
|
|
2372
|
+
]
|
|
2373
|
+
},
|
|
2374
|
+
{
|
|
2375
|
+
"name": "dap-ds-notification-badge",
|
|
2376
|
+
"description": "A notification badge component is a user interface element that visually indicates the presence of new information or updates, often displaying a numeric count of unread notifications, messages, or items requiring attention.\n---\n\n\n### **Slots:**\n - _default_ - The content of the notification badge.\n\n### **CSS Properties:**\n - **--dds-notification-badge-size** - Controls the overall size of the notification badge (default: var(--dds-spacing-500)) _(default: undefined)_\n- **--dds-notification-badge-min-width** - Minimum width of the notification badge (default: var(--dds-spacing-500)) _(default: undefined)_\n- **--dds-notification-badge-height** - Height of the notification badge (default: var(--dds-spacing-500)) _(default: undefined)_\n- **--dds-notification-badge-padding** - Padding inside the notification badge (default: 0 var(--dds-spacing-150)) _(default: undefined)_\n- **--dds-notification-badge-border-radius** - Border radius of the notification badge (default: var(--dds-radius-base)) _(default: undefined)_\n- **--dds-notification-badge-font-size** - Font size of the notification badge text (default: var(--dds-font-xs)) _(default: undefined)_\n- **--dds-notification-badge-dot-size** - Size of the dot variant (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-notification-badge-color** - Text color of the notification badge (default: var(--dds-background-neutral-medium)) _(default: undefined)_\n- **--dds-notification-badge-neutral-bg** - Background color for neutral type (default: var(--dds-text-neutral-subtle)) _(default: undefined)_\n- **--dds-notification-badge-brand-bg** - Background color for brand type (default: var(--dds-text-brand-subtle)) _(default: undefined)_\n- **--dds-notification-badge-info-bg** - Background color for info type (default: var(--dds-text-informative-subtle)) _(default: undefined)_\n- **--dds-notification-badge-positive-bg** - Background color for positive type (default: var(--dds-text-positive-subtle)) _(default: undefined)_\n- **--dds-notification-badge-warning-bg** - Background color for warning type (default: var(--dds-text-warning-subtle)) _(default: undefined)_\n- **--dds-notification-badge-negative-bg** - Background color for negative type (default: var(--dds-text-negative-subtle)) _(default: undefined)_\n- **--dds-notification-badge-circular-offset-x** - Horizontal offset for circular positioning (default: 20px) _(default: undefined)_\n- **--dds-notification-badge-circular-offset-y** - Vertical offset for circular positioning (default: -20px) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main container of the notification badge.\n- **noty** - The notification badge container.",
|
|
2377
|
+
"attributes": [
|
|
2378
|
+
{
|
|
2379
|
+
"name": "badgeContent",
|
|
2380
|
+
"description": "The content of the badge, it can be a number or a string. Content tried to be parsed as a number, if it's not a number, it will be displayed as a string.",
|
|
2381
|
+
"values": []
|
|
2382
|
+
},
|
|
2383
|
+
{
|
|
2384
|
+
"name": "visible",
|
|
2385
|
+
"description": "This switch decides the visibility of the badge. This property overrides the badge content visibility. Use it for explicit control.",
|
|
2386
|
+
"values": []
|
|
2387
|
+
},
|
|
2388
|
+
{
|
|
2389
|
+
"name": "showZero",
|
|
2390
|
+
"description": "This switch decides whether to show a zero value or not.",
|
|
2391
|
+
"values": []
|
|
2392
|
+
},
|
|
2393
|
+
{
|
|
2394
|
+
"name": "type",
|
|
2395
|
+
"description": "The color scheme of the badge",
|
|
2396
|
+
"values": [
|
|
2397
|
+
{ "name": "neutral" },
|
|
2398
|
+
{ "name": "brand" },
|
|
2399
|
+
{ "name": "info" },
|
|
2400
|
+
{ "name": "positive" },
|
|
2401
|
+
{ "name": "warning" },
|
|
2402
|
+
{ "name": "negative" }
|
|
2403
|
+
]
|
|
2404
|
+
},
|
|
2405
|
+
{
|
|
2406
|
+
"name": "variant",
|
|
2407
|
+
"description": "The variant of the badge.",
|
|
2408
|
+
"values": [{ "name": "round" }, { "name": "dot" }]
|
|
2409
|
+
},
|
|
2410
|
+
{
|
|
2411
|
+
"name": "max",
|
|
2412
|
+
"description": "The cap value of badge content, if the badge content is greater than the max value, it will be displayed as `[number]+`. Zero means no cap.",
|
|
2413
|
+
"values": []
|
|
2414
|
+
},
|
|
2415
|
+
{
|
|
2416
|
+
"name": "placement",
|
|
2417
|
+
"description": "The position of the badge content around the slot content.",
|
|
2418
|
+
"values": [
|
|
2419
|
+
{ "name": "top-start" },
|
|
2420
|
+
{ "name": "top-end" },
|
|
2421
|
+
{ "name": "bottom-start" },
|
|
2422
|
+
{ "name": "bottom-end" }
|
|
2423
|
+
]
|
|
2424
|
+
},
|
|
2425
|
+
{
|
|
2426
|
+
"name": "circular-auto",
|
|
2427
|
+
"description": "Whether to automatically detect circular elements and adjust positioning accordingly",
|
|
2428
|
+
"values": []
|
|
2429
|
+
},
|
|
2430
|
+
{
|
|
2431
|
+
"name": "force-circular",
|
|
2432
|
+
"description": "Override circular positioning detection - forces circular positioning calculation",
|
|
2433
|
+
"values": []
|
|
2434
|
+
}
|
|
2435
|
+
],
|
|
2436
|
+
"references": [
|
|
2437
|
+
{
|
|
2438
|
+
"name": "Documentation",
|
|
2439
|
+
"url": "https://shoelace.style/components/notification-badge"
|
|
2440
|
+
}
|
|
2441
|
+
]
|
|
2442
|
+
},
|
|
2312
2443
|
{
|
|
2313
2444
|
"name": "dap-ds-navigation-menu-item",
|
|
2314
2445
|
"description": "A navigation menu item that can contain either a simple link or dropdown content.\nSupports nested items with cascading flyout behavior. Part of the navigation menu system.\nThis is for NAVIGATION (website menus), not application menus.\n---\n\n\n### **Events:**\n - **dds-navigation-item-click** - Fired when a navigation item is clicked.\n- **dds-navigation-dropdown-open** - Fired when a navigation dropdown is opened.\n\n### **Methods:**\n - **activateTrigger()** - Activate the trigger the way a mouse click would. Custom element triggers\n-- including the default `dap-ds-button` -- keep the real interactive\nelement inside their shadow root, so clicking the host alone does nothing.\n- **updatePosition()** - Update popup position using Floating UI.\n- **setRovingTabIndex(active: _boolean_)** - Sets this item as the active (or inactive) roving tabindex target.\nOnly the active item's trigger is in the sequential tab order (tabindex=\"0\").\nAll others are removed (tabindex=\"-1\") so Tab exits the whole nav in one step.\n- **focusFirstDropdownChild()** - Focus the first focusable element in the dropdown (supports both nested nav items and mega menu content).\n- **focusLastDropdownChild()** - Focus the last focusable element in the dropdown (supports both nested nav items and mega menu content).\n- **_handleTriggerSlotChangeCallback()** - Update trigger element attributes and properties.\n\n### **Slots:**\n - **trigger** - The trigger element (link, button, etc.) for this navigation item.\n- **title** - The title of the navigation item.\n- **indicator** - The expand indicator icon (defaults to arrow icon based on orientation and level).\n- **link** - A router link element (e.g. Next.js Link) used for SPA navigation. Rendered outside the popup so it is always accessible to programmatic clicks.\n- _default_ - The dropdown content (can contain nested dap-ds-navigation-menu-item elements).\n\n### **CSS Properties:**\n - **--dds-navigation-menu-item-spacing** - The padding/spacing of the navigation menu item content. (default: var(--dds-spacing-200)). _(default: undefined)_\n- **--dds-navigation-menu-item-border-width** - The border width of the navigation menu item content. (default: var(--dds-border-width-base)). _(default: undefined)_\n- **--dds-navigation-menu-item-border-color** - The border color of the navigation menu item content. (default: var(--dds-border-neutral-subtle)). _(default: undefined)_\n- **--dds-navigation-menu-item-border-radius** - The border radius of the navigation menu item content. (default: var(--dds-radius-base)). _(default: undefined)_\n- **--dds-navigation-menu-item-background** - The background color of the navigation menu item content. (default: var(--dds-background-neutral-base)). _(default: undefined)_\n- **--dds-navigation-menu-item-shadow** - The box shadow of the navigation menu item content. (default: var(--dds-shadow-base)). _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The base part of the navigation item.\n- **trigger** - The trigger element part.\n- **trigger-base** - The base part of the trigger button (from dap-ds-button).\n- **trigger-content** - The content part of the trigger button (from dap-ds-button).\n- **trigger-high-contrast** - The high contrast part of the trigger button (from dap-ds-button).\n- **trigger-stack-base** - The base part of the trigger stack (from dap-ds-stack).\n- **title** - The title slot wrapper.\n- **indicator** - The expand indicator container.\n- **indicator-icon** - The expand indicator icon part.\n- **indicator-icon-base** - The base part of the indicator icon (from dap-ds-icon).\n- **indicator-icon-icon** - The icon part of the indicator icon (from dap-ds-icon).\n- **popup** - The dropdown popup container.\n- **content** - The dropdown content wrapper (default slot).\n- **arrow** - The dropdown arrow part.",
|
|
@@ -2461,164 +2592,38 @@
|
|
|
2461
2592
|
},
|
|
2462
2593
|
{
|
|
2463
2594
|
"name": "dap-ds-navigation-menu",
|
|
2464
|
-
"description": "A navigation menu for website/application navigation. Supports nested dropdowns with unlimited depth.\nThis is a NAVIGATION component, not an application menu (like dropdowns or context menus).\nUses semantic HTML (`<nav>`) and proper navigation ARIA attributes.\n---\n\n\n### **Events:**\n - **dds-navigation-item-click** - Fired when a navigation item is clicked.\n\n### **Methods:**\n - **getAllItems()** - Gets all slotted menu items, ignoring disabled elements\n- **getCurrentItem()** - Gets the current menu item (the one marked with `data-nav-current`).\nThe menu item may or may not have focus, but for keyboard interaction purposes it's considered the \"active\" item.\n- **setCurrentItem(item: _DapDSNavigationMenuItem_)** - Sets the current menu item. In 'group' mode (default), applies roving tabindex so only the\nactive item's trigger is in the sequential tab order (tabindex=\"0\"). In 'items' mode, all\ntop-level items remain in the tab order — only the data-nav-current marker is updated.\n\n### **Slots:**\n - _default_ - The navigation menu list and items.\n\n### **CSS Properties:**\n - **--dds-navigation-menu-item-gap** - The gap between navigation menu items. (default: var(--dds-spacing-100)). _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main navigation menu container (nav element).",
|
|
2465
|
-
"attributes": [
|
|
2466
|
-
{
|
|
2467
|
-
"name": "activeHref",
|
|
2468
|
-
"description": "The currently active href for highlighting active navigation items with aria-current=\"page\". Defaults to window.location.pathname if not provided.",
|
|
2469
|
-
"values": []
|
|
2470
|
-
},
|
|
2471
|
-
{
|
|
2472
|
-
"name": "orientation",
|
|
2473
|
-
"description": "The orientation of the navigation menu. Default is 'horizontal'.",
|
|
2474
|
-
"values": [{ "name": "horizontal" }, { "name": "vertical" }]
|
|
2475
|
-
},
|
|
2476
|
-
{
|
|
2477
|
-
"name": "fullWidth",
|
|
2478
|
-
"description": "Whether the navigation menu should take full width of the screen. Default is false.",
|
|
2479
|
-
"values": []
|
|
2480
|
-
},
|
|
2481
|
-
{
|
|
2482
|
-
"name": "allowMultipleOpen",
|
|
2483
|
-
"description": "Whether multiple dropdown branches can stay open simultaneously (accordion mode). Default is true.",
|
|
2484
|
-
"values": []
|
|
2485
|
-
},
|
|
2486
|
-
{
|
|
2487
|
-
"name": "tabMode",
|
|
2488
|
-
"description": "Controls how Tab key navigates through top-level items. Default is 'group'. Group mode will have the first item in the tab order, and items mode will have all items in the tab order.",
|
|
2489
|
-
"values": [{ "name": "group" }, { "name": "items" }]
|
|
2490
|
-
}
|
|
2491
|
-
],
|
|
2492
|
-
"references": [
|
|
2493
|
-
{
|
|
2494
|
-
"name": "Documentation",
|
|
2495
|
-
"url": "https://shoelace.style/components/navigation-menu"
|
|
2496
|
-
}
|
|
2497
|
-
]
|
|
2498
|
-
},
|
|
2499
|
-
{
|
|
2500
|
-
"name": "dap-ds-notification-badge",
|
|
2501
|
-
"description": "A notification badge component is a user interface element that visually indicates the presence of new information or updates, often displaying a numeric count of unread notifications, messages, or items requiring attention.\n---\n\n\n### **Slots:**\n - _default_ - The content of the notification badge.\n\n### **CSS Properties:**\n - **--dds-notification-badge-size** - Controls the overall size of the notification badge (default: var(--dds-spacing-500)) _(default: undefined)_\n- **--dds-notification-badge-min-width** - Minimum width of the notification badge (default: var(--dds-spacing-500)) _(default: undefined)_\n- **--dds-notification-badge-height** - Height of the notification badge (default: var(--dds-spacing-500)) _(default: undefined)_\n- **--dds-notification-badge-padding** - Padding inside the notification badge (default: 0 var(--dds-spacing-150)) _(default: undefined)_\n- **--dds-notification-badge-border-radius** - Border radius of the notification badge (default: var(--dds-radius-base)) _(default: undefined)_\n- **--dds-notification-badge-font-size** - Font size of the notification badge text (default: var(--dds-font-xs)) _(default: undefined)_\n- **--dds-notification-badge-dot-size** - Size of the dot variant (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-notification-badge-color** - Text color of the notification badge (default: var(--dds-background-neutral-medium)) _(default: undefined)_\n- **--dds-notification-badge-neutral-bg** - Background color for neutral type (default: var(--dds-text-neutral-subtle)) _(default: undefined)_\n- **--dds-notification-badge-brand-bg** - Background color for brand type (default: var(--dds-text-brand-subtle)) _(default: undefined)_\n- **--dds-notification-badge-info-bg** - Background color for info type (default: var(--dds-text-informative-subtle)) _(default: undefined)_\n- **--dds-notification-badge-positive-bg** - Background color for positive type (default: var(--dds-text-positive-subtle)) _(default: undefined)_\n- **--dds-notification-badge-warning-bg** - Background color for warning type (default: var(--dds-text-warning-subtle)) _(default: undefined)_\n- **--dds-notification-badge-negative-bg** - Background color for negative type (default: var(--dds-text-negative-subtle)) _(default: undefined)_\n- **--dds-notification-badge-circular-offset-x** - Horizontal offset for circular positioning (default: 20px) _(default: undefined)_\n- **--dds-notification-badge-circular-offset-y** - Vertical offset for circular positioning (default: -20px) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main container of the notification badge.\n- **noty** - The notification badge container.",
|
|
2502
|
-
"attributes": [
|
|
2503
|
-
{
|
|
2504
|
-
"name": "badgeContent",
|
|
2505
|
-
"description": "The content of the badge, it can be a number or a string. Content tried to be parsed as a number, if it's not a number, it will be displayed as a string.",
|
|
2506
|
-
"values": []
|
|
2507
|
-
},
|
|
2508
|
-
{
|
|
2509
|
-
"name": "visible",
|
|
2510
|
-
"description": "This switch decides the visibility of the badge. This property overrides the badge content visibility. Use it for explicit control.",
|
|
2511
|
-
"values": []
|
|
2512
|
-
},
|
|
2513
|
-
{
|
|
2514
|
-
"name": "showZero",
|
|
2515
|
-
"description": "This switch decides whether to show a zero value or not.",
|
|
2516
|
-
"values": []
|
|
2517
|
-
},
|
|
2518
|
-
{
|
|
2519
|
-
"name": "type",
|
|
2520
|
-
"description": "The color scheme of the badge",
|
|
2521
|
-
"values": [
|
|
2522
|
-
{ "name": "neutral" },
|
|
2523
|
-
{ "name": "brand" },
|
|
2524
|
-
{ "name": "info" },
|
|
2525
|
-
{ "name": "positive" },
|
|
2526
|
-
{ "name": "warning" },
|
|
2527
|
-
{ "name": "negative" }
|
|
2528
|
-
]
|
|
2529
|
-
},
|
|
2530
|
-
{
|
|
2531
|
-
"name": "variant",
|
|
2532
|
-
"description": "The variant of the badge.",
|
|
2533
|
-
"values": [{ "name": "round" }, { "name": "dot" }]
|
|
2534
|
-
},
|
|
2535
|
-
{
|
|
2536
|
-
"name": "max",
|
|
2537
|
-
"description": "The cap value of badge content, if the badge content is greater than the max value, it will be displayed as `[number]+`. Zero means no cap.",
|
|
2538
|
-
"values": []
|
|
2539
|
-
},
|
|
2540
|
-
{
|
|
2541
|
-
"name": "placement",
|
|
2542
|
-
"description": "The position of the badge content around the slot content.",
|
|
2543
|
-
"values": [
|
|
2544
|
-
{ "name": "top-start" },
|
|
2545
|
-
{ "name": "top-end" },
|
|
2546
|
-
{ "name": "bottom-start" },
|
|
2547
|
-
{ "name": "bottom-end" }
|
|
2548
|
-
]
|
|
2549
|
-
},
|
|
2550
|
-
{
|
|
2551
|
-
"name": "circular-auto",
|
|
2552
|
-
"description": "Whether to automatically detect circular elements and adjust positioning accordingly",
|
|
2553
|
-
"values": []
|
|
2554
|
-
},
|
|
2555
|
-
{
|
|
2556
|
-
"name": "force-circular",
|
|
2557
|
-
"description": "Override circular positioning detection - forces circular positioning calculation",
|
|
2558
|
-
"values": []
|
|
2559
|
-
}
|
|
2560
|
-
],
|
|
2561
|
-
"references": [
|
|
2562
|
-
{
|
|
2563
|
-
"name": "Documentation",
|
|
2564
|
-
"url": "https://shoelace.style/components/notification-badge"
|
|
2565
|
-
}
|
|
2566
|
-
]
|
|
2567
|
-
},
|
|
2568
|
-
{
|
|
2569
|
-
"name": "dap-ds-number-input",
|
|
2570
|
-
"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.\n- **decrement-icon** - The icon of the decrement button.\n- **decrement-icon-base** - The base of the decrement icon.\n- **increment-icon** - The icon of the increment button.\n- **increment-icon-base** - The base of the increment icon.\n- **label-base** - The base of the label.\n- **label-required** - The required indicator of the label.\n- **label-optional** - The optional indicator of the label.",
|
|
2571
|
-
"attributes": [
|
|
2572
|
-
{
|
|
2573
|
-
"name": "thousandSeparator",
|
|
2574
|
-
"description": "The thousand separator of the input.",
|
|
2575
|
-
"values": []
|
|
2576
|
-
},
|
|
2577
|
-
{
|
|
2578
|
-
"name": "decimalSeparator",
|
|
2579
|
-
"description": "The decimal separator of the input.",
|
|
2580
|
-
"values": []
|
|
2581
|
-
},
|
|
2582
|
-
{
|
|
2583
|
-
"name": "decimalScale",
|
|
2584
|
-
"description": "The decimal scale of the input.",
|
|
2585
|
-
"values": []
|
|
2586
|
-
},
|
|
2587
|
-
{
|
|
2588
|
-
"name": "allowNegative",
|
|
2589
|
-
"description": "The allow negative state of the input.",
|
|
2590
|
-
"values": []
|
|
2591
|
-
},
|
|
2595
|
+
"description": "A navigation menu for website/application navigation. Supports nested dropdowns with unlimited depth.\nThis is a NAVIGATION component, not an application menu (like dropdowns or context menus).\nUses semantic HTML (`<nav>`) and proper navigation ARIA attributes.\n---\n\n\n### **Events:**\n - **dds-navigation-item-click** - Fired when a navigation item is clicked.\n\n### **Methods:**\n - **getAllItems()** - Gets all slotted menu items, ignoring disabled elements\n- **getCurrentItem()** - Gets the current menu item (the one marked with `data-nav-current`).\nThe menu item may or may not have focus, but for keyboard interaction purposes it's considered the \"active\" item.\n- **setCurrentItem(item: _DapDSNavigationMenuItem_)** - Sets the current menu item. In 'group' mode (default), applies roving tabindex so only the\nactive item's trigger is in the sequential tab order (tabindex=\"0\"). In 'items' mode, all\ntop-level items remain in the tab order — only the data-nav-current marker is updated.\n\n### **Slots:**\n - _default_ - The navigation menu list and items.\n\n### **CSS Properties:**\n - **--dds-navigation-menu-item-gap** - The gap between navigation menu items. (default: var(--dds-spacing-100)). _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main navigation menu container (nav element).",
|
|
2596
|
+
"attributes": [
|
|
2592
2597
|
{
|
|
2593
|
-
"name": "
|
|
2594
|
-
"description": "The
|
|
2598
|
+
"name": "activeHref",
|
|
2599
|
+
"description": "The currently active href for highlighting active navigation items with aria-current=\"page\". Defaults to window.location.pathname if not provided.",
|
|
2595
2600
|
"values": []
|
|
2596
2601
|
},
|
|
2597
2602
|
{
|
|
2598
|
-
"name": "
|
|
2599
|
-
"description": "
|
|
2600
|
-
"values": []
|
|
2603
|
+
"name": "orientation",
|
|
2604
|
+
"description": "The orientation of the navigation menu. Default is 'horizontal'.",
|
|
2605
|
+
"values": [{ "name": "horizontal" }, { "name": "vertical" }]
|
|
2601
2606
|
},
|
|
2602
2607
|
{
|
|
2603
|
-
"name": "
|
|
2604
|
-
"description": "
|
|
2608
|
+
"name": "fullWidth",
|
|
2609
|
+
"description": "Whether the navigation menu should take full width of the screen. Default is false.",
|
|
2605
2610
|
"values": []
|
|
2606
2611
|
},
|
|
2607
2612
|
{
|
|
2608
|
-
"name": "
|
|
2609
|
-
"description": "
|
|
2613
|
+
"name": "allowMultipleOpen",
|
|
2614
|
+
"description": "Whether multiple dropdown branches can stay open simultaneously (accordion mode). Default is true.",
|
|
2610
2615
|
"values": []
|
|
2611
2616
|
},
|
|
2612
2617
|
{
|
|
2613
|
-
"name": "
|
|
2614
|
-
"description": "
|
|
2615
|
-
"values": []
|
|
2618
|
+
"name": "tabMode",
|
|
2619
|
+
"description": "Controls how Tab key navigates through top-level items. Default is 'group'. Group mode will have the first item in the tab order, and items mode will have all items in the tab order.",
|
|
2620
|
+
"values": [{ "name": "group" }, { "name": "items" }]
|
|
2616
2621
|
}
|
|
2617
2622
|
],
|
|
2618
2623
|
"references": [
|
|
2619
2624
|
{
|
|
2620
2625
|
"name": "Documentation",
|
|
2621
|
-
"url": "https://shoelace.style/components/
|
|
2626
|
+
"url": "https://shoelace.style/components/navigation-menu"
|
|
2622
2627
|
}
|
|
2623
2628
|
]
|
|
2624
2629
|
},
|
|
@@ -2916,53 +2921,6 @@
|
|
|
2916
2921
|
}
|
|
2917
2922
|
]
|
|
2918
2923
|
},
|
|
2919
|
-
{
|
|
2920
|
-
"name": "dap-ds-radio-button",
|
|
2921
|
-
"description": "A radio button is a graphical control element that allows the user to choose only one of a predefined set of mutually exclusive options.\n---\n\n\n### **Events:**\n - **dds-change** - Fired when the radio button is checked.\n- **dds-blur** - Emitted when the radio button loses focus.\n- **dds-focus** - Emitted when the radio button gains focus.\n- **dds-input** - Emitted when the radio button receives input.\n\n### **CSS Properties:**\n - **--dds-radio-size** - Sets the size of the radio button. (default: var(--dds-spacing-600)) _(default: undefined)_\n- **--dds-radio-border-width** - Sets the border width of the radio button. (default: var(--dds-border-width-large)) _(default: undefined)_\n- **--dds-radio-border-radius** - Sets the border radius of the radio button. (default: var(--dds-radius-rounded)) _(default: undefined)_\n- **--dds-radio-border-color** - Sets the border color of the radio button. (default: var(--dds-border-neutral-base)) _(default: undefined)_\n- **--dds-radio-background-color** - Sets the background color of the radio button. (default: var(--dds-background-neutral-base)) _(default: undefined)_\n- **--dds-radio-hover-border-color** - Sets the border color of the radio button on hover. (default: var(--dds-border-neutral-medium)) _(default: undefined)_\n- **--dds-radio-hover-background-color** - Sets the background color of the radio button on hover. (default: var(--dds-background-neutral-medium)) _(default: undefined)_\n- **--dds-radio-active-border-color** - Sets the border color of the radio button when active. (default: var(--dds-border-neutral-strong)) _(default: undefined)_\n- **--dds-radio-active-background-color** - Sets the background color of the radio button when active. (default: var(--dds-background-neutral-strong)) _(default: undefined)_\n- **--dds-radio-checked-background-color** - Sets the background color of the checked radio button. (default: var(--dds-background-brand-base-inverted)) _(default: undefined)_\n- **--dds-radio-checked-hover-background-color** - Sets the background color of the checked radio button on hover. (default: var(--dds-background-brand-medium-inverted)) _(default: undefined)_\n- **--dds-radio-checked-active-background-color** - Sets the background color of the checked radio button when active. (default: var(--dds-background-brand-strong-inverted)) _(default: undefined)_\n- **--dds-radio-disabled-background-color** - Sets the background color of the disabled radio button. (default: var(--dds-background-neutral-disabled)) _(default: undefined)_\n- **--dds-radio-icon-background-color** - Sets the background color of the radio button icon. (default: var(--dds-transparent-white-strong-static)) _(default: undefined)_\n- **--dds-radio-disabled-icon-background-color** - Sets the background color of the disabled radio button icon. (default: var(--dds-background-neutral-stronger)) _(default: undefined)_\n- **--dds-radio-invalid-border-color** - Sets the border color of the invalid radio button. (default: var(--dds-border-negative-base)) _(default: undefined)_\n- **--dds-radio-invalid-background-color** - Sets the background color of the invalid radio button. (default: var(--dds-background-negative-base)) _(default: undefined)_\n- **--dds-radio-invalid-hover-border-color** - Sets the border color of the invalid radio button on hover. (default: var(--dds-border-negative-medium)) _(default: undefined)_\n- **--dds-radio-invalid-hover-background-color** - Sets the background color of the invalid radio button on hover. (default: var(--dds-background-negative-medium)) _(default: undefined)_\n- **--dds-radio-invalid-active-border-color** - Sets the border color of the invalid radio button when active. (default: var(--dds-border-negative-strong)) _(default: undefined)_\n- **--dds-radio-invalid-active-background-color** - Sets the background color of the invalid radio button when active. (default: var(--dds-background-negative-strong)) _(default: undefined)_\n- **--dds-radio-invalid-checked-background-color** - Sets the background color of the invalid checked radio button. (default: var(--dds-background-negative-base-inverted)) _(default: undefined)_\n- **--dds-radio-invalid-checked-hover-background-color** - Sets the background color of the invalid checked radio button on hover. (default: var(--dds-background-negative-medium-inverted)) _(default: undefined)_\n- **--dds-radio-invalid-checked-active-background-color** - Sets the background color of the invalid checked radio button when active. (default: var(--dds-background-negative-strong-inverted)) _(default: undefined)_\n- **--dds-radio-icon-size** - Sets the size of the radio button icon. (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-radio-readonly-border-color** - Sets the border color when the radio button is readonly. (default: var(--dds-border-neutral-subtle)) _(default: undefined)_\n- **--dds-radio-readonly-background-color** - Sets the background color when the radio button is readonly. (default: var(--dds-background-neutral-subtle)) _(default: undefined)_\n- **--dds-radio-readonly-icon-color** - Sets the color of the radio button icon when readonly. (default: var(--dds-text-neutral-base)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main radio button container.\n- **wrapper** - The wrapper of the radio button.\n- **base-label** - The main label container.\n- **label** - The label of the radio button.\n- **input** - The native input of the radio button.\n- **control** - The control of the radio button.\n- **label-container** - The label container of the radio button.\n- **description** - The description of the radio button.\n- **feedback** - The feedback of the radio button.\n- **high-contrast** - The high contrast indicator of the radio button.\n- **label-base** - The base of the label.\n- **label-required** - The required indicator of the label.\n- **label-optional** - The optional indicator of the label.",
|
|
2922
|
-
"attributes": [
|
|
2923
|
-
{
|
|
2924
|
-
"name": "focusable",
|
|
2925
|
-
"description": "Whether the radio button is focusable.",
|
|
2926
|
-
"values": []
|
|
2927
|
-
},
|
|
2928
|
-
{
|
|
2929
|
-
"name": "posInSet",
|
|
2930
|
-
"description": "Position in set — set by radio-group for correct screen reader counting",
|
|
2931
|
-
"values": []
|
|
2932
|
-
},
|
|
2933
|
-
{
|
|
2934
|
-
"name": "setSize",
|
|
2935
|
-
"description": "Set size — set by radio-group for correct screen reader counting",
|
|
2936
|
-
"values": []
|
|
2937
|
-
},
|
|
2938
|
-
{
|
|
2939
|
-
"name": "preventDefault",
|
|
2940
|
-
"description": "Whether the radio button should prevent the default action.",
|
|
2941
|
-
"values": []
|
|
2942
|
-
},
|
|
2943
|
-
{
|
|
2944
|
-
"name": "readonly",
|
|
2945
|
-
"description": "Whether the radio button is readonly (cannot be changed but value is submitted with form).",
|
|
2946
|
-
"values": []
|
|
2947
|
-
},
|
|
2948
|
-
{
|
|
2949
|
-
"name": "border",
|
|
2950
|
-
"description": "This sets up a border around the radio button, when true.",
|
|
2951
|
-
"values": []
|
|
2952
|
-
},
|
|
2953
|
-
{
|
|
2954
|
-
"name": "type",
|
|
2955
|
-
"description": "The type of the radio button.",
|
|
2956
|
-
"values": [{ "name": "normal" }, { "name": "background" }]
|
|
2957
|
-
}
|
|
2958
|
-
],
|
|
2959
|
-
"references": [
|
|
2960
|
-
{
|
|
2961
|
-
"name": "Documentation",
|
|
2962
|
-
"url": "https://shoelace.style/components/radio-button"
|
|
2963
|
-
}
|
|
2964
|
-
]
|
|
2965
|
-
},
|
|
2966
2924
|
{
|
|
2967
2925
|
"name": "dap-ds-progress",
|
|
2968
2926
|
"description": "Progress indicator component with linear and circular variants.\n---\n\n\n### **Slots:**\n - **label** - Custom label content for the progress indicator.\n\n### **CSS Properties:**\n - **--dds-progress-track-color** - Background color of the progress track (default: var(--dds-neutral-200)) _(default: undefined)_\n- **--dds-progress-fill-color-neutral** - Fill color for neutral variant (default: var(--dds-icon-neutral-base)) _(default: undefined)_\n- **--dds-progress-fill-color-brand** - Fill color for brand variant (default: var(--dds-icon-brand-subtle)) _(default: undefined)_\n- **--dds-progress-fill-color-negative** - Fill color for negative variant (default: var(--dds-icon-negative-subtle)) _(default: undefined)_\n- **--dds-progress-fill-color-positive** - Fill color for positive variant (default: var(--dds-icon-positive-subtle)) _(default: undefined)_\n- **--dds-progress-fill-color-inverted** - Fill color for inverted variant (default: var(--dds-icon-neutral-inverted)) _(default: undefined)_\n- **--dds-progress-height-xs** - Height for extra small linear progress (default: var(--dds-spacing-50)) _(default: undefined)_\n- **--dds-progress-height-sm** - Height for small linear progress (default: var(--dds-spacing-100)) _(default: undefined)_\n- **--dds-progress-height-md** - Height for medium linear progress (default: var(--dds-spacing-150)) _(default: undefined)_\n- **--dds-progress-height-lg** - Height for large linear progress (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-progress-height-xl** - Height for extra large linear progress (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-progress-height-xxl** - Height for extra extra large linear progress (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-progress-diameter-xs** - Diameter for extra small circular progress (default: var(--dds-spacing-600)) _(default: undefined)_\n- **--dds-progress-diameter-sm** - Diameter for small circular progress (default: var(--dds-spacing-800)) _(default: undefined)_\n- **--dds-progress-diameter-md** - Diameter for medium circular progress (default: var(--dds-spacing-1200)) _(default: undefined)_\n- **--dds-progress-diameter-lg** - Diameter for large circular progress (default: var(--dds-spacing-1600)) _(default: undefined)_\n- **--dds-progress-diameter-xl** - Diameter for extra large circular progress (default: var(--dds-spacing-2000)) _(default: undefined)_\n- **--dds-progress-diameter-xxl** - Diameter for extra extra large circular progress (default: var(--dds-spacing-2400)) _(default: undefined)_\n- **--dds-progress-stroke-width** - Stroke width for circular progress (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-progress-animation-duration** - Duration of indeterminate animation (default: 1.5s) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main progress container.\n- **track** - The progress track (background).\n- **fill** - The progress fill (bar for linear, circle for circular).\n- **label** - The progress label text.\n- **percentage** - The percentage text (circular variant only).\n- **background** - The background circle (circular variant only).",
|
|
@@ -3025,6 +2983,53 @@
|
|
|
3025
2983
|
}
|
|
3026
2984
|
]
|
|
3027
2985
|
},
|
|
2986
|
+
{
|
|
2987
|
+
"name": "dap-ds-radio-button",
|
|
2988
|
+
"description": "A radio button is a graphical control element that allows the user to choose only one of a predefined set of mutually exclusive options.\n---\n\n\n### **Events:**\n - **dds-change** - Fired when the radio button is checked.\n- **dds-blur** - Emitted when the radio button loses focus.\n- **dds-focus** - Emitted when the radio button gains focus.\n- **dds-input** - Emitted when the radio button receives input.\n\n### **CSS Properties:**\n - **--dds-radio-size** - Sets the size of the radio button. (default: var(--dds-spacing-600)) _(default: undefined)_\n- **--dds-radio-border-width** - Sets the border width of the radio button. (default: var(--dds-border-width-large)) _(default: undefined)_\n- **--dds-radio-border-radius** - Sets the border radius of the radio button. (default: var(--dds-radius-rounded)) _(default: undefined)_\n- **--dds-radio-border-color** - Sets the border color of the radio button. (default: var(--dds-border-neutral-base)) _(default: undefined)_\n- **--dds-radio-background-color** - Sets the background color of the radio button. (default: var(--dds-background-neutral-base)) _(default: undefined)_\n- **--dds-radio-hover-border-color** - Sets the border color of the radio button on hover. (default: var(--dds-border-neutral-medium)) _(default: undefined)_\n- **--dds-radio-hover-background-color** - Sets the background color of the radio button on hover. (default: var(--dds-background-neutral-medium)) _(default: undefined)_\n- **--dds-radio-active-border-color** - Sets the border color of the radio button when active. (default: var(--dds-border-neutral-strong)) _(default: undefined)_\n- **--dds-radio-active-background-color** - Sets the background color of the radio button when active. (default: var(--dds-background-neutral-strong)) _(default: undefined)_\n- **--dds-radio-checked-background-color** - Sets the background color of the checked radio button. (default: var(--dds-background-brand-base-inverted)) _(default: undefined)_\n- **--dds-radio-checked-hover-background-color** - Sets the background color of the checked radio button on hover. (default: var(--dds-background-brand-medium-inverted)) _(default: undefined)_\n- **--dds-radio-checked-active-background-color** - Sets the background color of the checked radio button when active. (default: var(--dds-background-brand-strong-inverted)) _(default: undefined)_\n- **--dds-radio-disabled-background-color** - Sets the background color of the disabled radio button. (default: var(--dds-background-neutral-disabled)) _(default: undefined)_\n- **--dds-radio-icon-background-color** - Sets the background color of the radio button icon. (default: var(--dds-transparent-white-strong-static)) _(default: undefined)_\n- **--dds-radio-disabled-icon-background-color** - Sets the background color of the disabled radio button icon. (default: var(--dds-background-neutral-stronger)) _(default: undefined)_\n- **--dds-radio-invalid-border-color** - Sets the border color of the invalid radio button. (default: var(--dds-border-negative-base)) _(default: undefined)_\n- **--dds-radio-invalid-background-color** - Sets the background color of the invalid radio button. (default: var(--dds-background-negative-base)) _(default: undefined)_\n- **--dds-radio-invalid-hover-border-color** - Sets the border color of the invalid radio button on hover. (default: var(--dds-border-negative-medium)) _(default: undefined)_\n- **--dds-radio-invalid-hover-background-color** - Sets the background color of the invalid radio button on hover. (default: var(--dds-background-negative-medium)) _(default: undefined)_\n- **--dds-radio-invalid-active-border-color** - Sets the border color of the invalid radio button when active. (default: var(--dds-border-negative-strong)) _(default: undefined)_\n- **--dds-radio-invalid-active-background-color** - Sets the background color of the invalid radio button when active. (default: var(--dds-background-negative-strong)) _(default: undefined)_\n- **--dds-radio-invalid-checked-background-color** - Sets the background color of the invalid checked radio button. (default: var(--dds-background-negative-base-inverted)) _(default: undefined)_\n- **--dds-radio-invalid-checked-hover-background-color** - Sets the background color of the invalid checked radio button on hover. (default: var(--dds-background-negative-medium-inverted)) _(default: undefined)_\n- **--dds-radio-invalid-checked-active-background-color** - Sets the background color of the invalid checked radio button when active. (default: var(--dds-background-negative-strong-inverted)) _(default: undefined)_\n- **--dds-radio-icon-size** - Sets the size of the radio button icon. (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-radio-readonly-border-color** - Sets the border color when the radio button is readonly. (default: var(--dds-border-neutral-subtle)) _(default: undefined)_\n- **--dds-radio-readonly-background-color** - Sets the background color when the radio button is readonly. (default: var(--dds-background-neutral-subtle)) _(default: undefined)_\n- **--dds-radio-readonly-icon-color** - Sets the color of the radio button icon when readonly. (default: var(--dds-text-neutral-base)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main radio button container.\n- **wrapper** - The wrapper of the radio button.\n- **base-label** - The main label container.\n- **label** - The label of the radio button.\n- **input** - The native input of the radio button.\n- **control** - The control of the radio button.\n- **label-container** - The label container of the radio button.\n- **description** - The description of the radio button.\n- **feedback** - The feedback of the radio button.\n- **high-contrast** - The high contrast indicator of the radio button.\n- **label-base** - The base of the label.\n- **label-required** - The required indicator of the label.\n- **label-optional** - The optional indicator of the label.",
|
|
2989
|
+
"attributes": [
|
|
2990
|
+
{
|
|
2991
|
+
"name": "focusable",
|
|
2992
|
+
"description": "Whether the radio button is focusable.",
|
|
2993
|
+
"values": []
|
|
2994
|
+
},
|
|
2995
|
+
{
|
|
2996
|
+
"name": "posInSet",
|
|
2997
|
+
"description": "Position in set — set by radio-group for correct screen reader counting",
|
|
2998
|
+
"values": []
|
|
2999
|
+
},
|
|
3000
|
+
{
|
|
3001
|
+
"name": "setSize",
|
|
3002
|
+
"description": "Set size — set by radio-group for correct screen reader counting",
|
|
3003
|
+
"values": []
|
|
3004
|
+
},
|
|
3005
|
+
{
|
|
3006
|
+
"name": "preventDefault",
|
|
3007
|
+
"description": "Whether the radio button should prevent the default action.",
|
|
3008
|
+
"values": []
|
|
3009
|
+
},
|
|
3010
|
+
{
|
|
3011
|
+
"name": "readonly",
|
|
3012
|
+
"description": "Whether the radio button is readonly (cannot be changed but value is submitted with form).",
|
|
3013
|
+
"values": []
|
|
3014
|
+
},
|
|
3015
|
+
{
|
|
3016
|
+
"name": "border",
|
|
3017
|
+
"description": "This sets up a border around the radio button, when true.",
|
|
3018
|
+
"values": []
|
|
3019
|
+
},
|
|
3020
|
+
{
|
|
3021
|
+
"name": "type",
|
|
3022
|
+
"description": "The type of the radio button.",
|
|
3023
|
+
"values": [{ "name": "normal" }, { "name": "background" }]
|
|
3024
|
+
}
|
|
3025
|
+
],
|
|
3026
|
+
"references": [
|
|
3027
|
+
{
|
|
3028
|
+
"name": "Documentation",
|
|
3029
|
+
"url": "https://shoelace.style/components/radio-button"
|
|
3030
|
+
}
|
|
3031
|
+
]
|
|
3032
|
+
},
|
|
3028
3033
|
{
|
|
3029
3034
|
"name": "dap-ds-rating",
|
|
3030
3035
|
"description": "Rating is a component that allows users to rate a product or service.\n---\n\n\n### **Events:**\n - **dds-change** - Event fired when the rating value changes.\n\n### **Methods:**\n - **_announceRating()** - Announce the current rating to screen readers\n\n### **CSS Parts:**\n - **base** - The main rating container.\n- **star** - The star element.\n- **stars-container** - The container of the stars.\n- **icon** - The icon of the star.",
|
|
@@ -3669,6 +3674,53 @@
|
|
|
3669
3674
|
}
|
|
3670
3675
|
]
|
|
3671
3676
|
},
|
|
3677
|
+
{
|
|
3678
|
+
"name": "dap-ds-textarea",
|
|
3679
|
+
"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.\n- **footer** - The footer of the textarea holding the feedback and counter.\n- **counter-container** - The container of the counter.",
|
|
3680
|
+
"attributes": [
|
|
3681
|
+
{
|
|
3682
|
+
"name": "hideCounter",
|
|
3683
|
+
"description": "Hide character counter.",
|
|
3684
|
+
"values": []
|
|
3685
|
+
},
|
|
3686
|
+
{
|
|
3687
|
+
"name": "minlength",
|
|
3688
|
+
"description": "The minimum length of the textarea.",
|
|
3689
|
+
"values": []
|
|
3690
|
+
},
|
|
3691
|
+
{
|
|
3692
|
+
"name": "maxlength",
|
|
3693
|
+
"description": "The maximum length of the textarea.",
|
|
3694
|
+
"values": []
|
|
3695
|
+
},
|
|
3696
|
+
{
|
|
3697
|
+
"name": "rows",
|
|
3698
|
+
"description": "The number of rows in the textarea.",
|
|
3699
|
+
"values": []
|
|
3700
|
+
},
|
|
3701
|
+
{
|
|
3702
|
+
"name": "cols",
|
|
3703
|
+
"description": "The number of columns in the textarea.",
|
|
3704
|
+
"values": []
|
|
3705
|
+
},
|
|
3706
|
+
{
|
|
3707
|
+
"name": "placeholder",
|
|
3708
|
+
"description": "The placeholder of the textarea.",
|
|
3709
|
+
"values": []
|
|
3710
|
+
},
|
|
3711
|
+
{
|
|
3712
|
+
"name": "wrap",
|
|
3713
|
+
"description": "Indicates how the control should wrap the value for form submission.",
|
|
3714
|
+
"values": [{ "name": "hard" }, { "name": "soft" }]
|
|
3715
|
+
}
|
|
3716
|
+
],
|
|
3717
|
+
"references": [
|
|
3718
|
+
{
|
|
3719
|
+
"name": "Documentation",
|
|
3720
|
+
"url": "https://shoelace.style/components/textarea"
|
|
3721
|
+
}
|
|
3722
|
+
]
|
|
3723
|
+
},
|
|
3672
3724
|
{
|
|
3673
3725
|
"name": "dap-ds-table-cell",
|
|
3674
3726
|
"description": "Table cell component.\n---\n\n\n### **Slots:**\n - _default_ - The default slot.\n\n### **CSS Properties:**\n - **--dds-table-cell-padding-block** - Padding for the top and bottom of the cell. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-table-cell-padding-inline-start** - Padding for the start (left in LTR) of the cell. (default: var(--dds-spacing-500)) _(default: undefined)_\n- **--dds-table-cell-padding-inline-end** - Padding for the end (right in LTR) of the cell. (default: var(--dds-spacing-500)) _(default: undefined)_\n- **--dds-table-cell-border-width** - Width of the cell's bottom border. (default: var(--dds-border-width-base)) _(default: undefined)_\n- **--dds-table-cell-border-color** - Color of the cell's bottom border. (default: var(--dds-border-neutral-subtle)) _(default: undefined)_\n- **--dds-table-cell-text-color** - Text color of the cell. (default: var(--dds-text-neutral-base)) _(default: undefined)_\n- **--dds-table-cell-line-height** - Line height of the cell text. (default: 1.5) _(default: undefined)_\n- **--dds-table-cell-text-align** - Text alignment in the cell. (default: left) _(default: undefined)_",
|
|
@@ -3767,53 +3819,6 @@
|
|
|
3767
3819
|
}
|
|
3768
3820
|
]
|
|
3769
3821
|
},
|
|
3770
|
-
{
|
|
3771
|
-
"name": "dap-ds-textarea",
|
|
3772
|
-
"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.\n- **footer** - The footer of the textarea holding the feedback and counter.\n- **counter-container** - The container of the counter.",
|
|
3773
|
-
"attributes": [
|
|
3774
|
-
{
|
|
3775
|
-
"name": "hideCounter",
|
|
3776
|
-
"description": "Hide character counter.",
|
|
3777
|
-
"values": []
|
|
3778
|
-
},
|
|
3779
|
-
{
|
|
3780
|
-
"name": "minlength",
|
|
3781
|
-
"description": "The minimum length of the textarea.",
|
|
3782
|
-
"values": []
|
|
3783
|
-
},
|
|
3784
|
-
{
|
|
3785
|
-
"name": "maxlength",
|
|
3786
|
-
"description": "The maximum length of the textarea.",
|
|
3787
|
-
"values": []
|
|
3788
|
-
},
|
|
3789
|
-
{
|
|
3790
|
-
"name": "rows",
|
|
3791
|
-
"description": "The number of rows in the textarea.",
|
|
3792
|
-
"values": []
|
|
3793
|
-
},
|
|
3794
|
-
{
|
|
3795
|
-
"name": "cols",
|
|
3796
|
-
"description": "The number of columns in the textarea.",
|
|
3797
|
-
"values": []
|
|
3798
|
-
},
|
|
3799
|
-
{
|
|
3800
|
-
"name": "placeholder",
|
|
3801
|
-
"description": "The placeholder of the textarea.",
|
|
3802
|
-
"values": []
|
|
3803
|
-
},
|
|
3804
|
-
{
|
|
3805
|
-
"name": "wrap",
|
|
3806
|
-
"description": "Indicates how the control should wrap the value for form submission.",
|
|
3807
|
-
"values": [{ "name": "hard" }, { "name": "soft" }]
|
|
3808
|
-
}
|
|
3809
|
-
],
|
|
3810
|
-
"references": [
|
|
3811
|
-
{
|
|
3812
|
-
"name": "Documentation",
|
|
3813
|
-
"url": "https://shoelace.style/components/textarea"
|
|
3814
|
-
}
|
|
3815
|
-
]
|
|
3816
|
-
},
|
|
3817
3822
|
{
|
|
3818
3823
|
"name": "dap-ds-timeline-item",
|
|
3819
3824
|
"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.",
|
|
@@ -4910,7 +4915,7 @@
|
|
|
4910
4915
|
]
|
|
4911
4916
|
},
|
|
4912
4917
|
{
|
|
4913
|
-
"name": "dap-ds-icon-
|
|
4918
|
+
"name": "dap-ds-icon-home-6-line",
|
|
4914
4919
|
"description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
|
|
4915
4920
|
"attributes": [
|
|
4916
4921
|
{
|
|
@@ -4937,12 +4942,12 @@
|
|
|
4937
4942
|
"references": [
|
|
4938
4943
|
{
|
|
4939
4944
|
"name": "Documentation",
|
|
4940
|
-
"url": "https://shoelace.style/components/icon-
|
|
4945
|
+
"url": "https://shoelace.style/components/icon-home-6-line"
|
|
4941
4946
|
}
|
|
4942
4947
|
]
|
|
4943
4948
|
},
|
|
4944
4949
|
{
|
|
4945
|
-
"name": "dap-ds-icon-
|
|
4950
|
+
"name": "dap-ds-icon-calendar-line",
|
|
4946
4951
|
"description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
|
|
4947
4952
|
"attributes": [
|
|
4948
4953
|
{
|
|
@@ -4969,12 +4974,12 @@
|
|
|
4969
4974
|
"references": [
|
|
4970
4975
|
{
|
|
4971
4976
|
"name": "Documentation",
|
|
4972
|
-
"url": "https://shoelace.style/components/icon-
|
|
4977
|
+
"url": "https://shoelace.style/components/icon-calendar-line"
|
|
4973
4978
|
}
|
|
4974
4979
|
]
|
|
4975
4980
|
},
|
|
4976
4981
|
{
|
|
4977
|
-
"name": "dap-ds-icon-
|
|
4982
|
+
"name": "dap-ds-icon-edit-line",
|
|
4978
4983
|
"description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
|
|
4979
4984
|
"attributes": [
|
|
4980
4985
|
{
|
|
@@ -5001,12 +5006,12 @@
|
|
|
5001
5006
|
"references": [
|
|
5002
5007
|
{
|
|
5003
5008
|
"name": "Documentation",
|
|
5004
|
-
"url": "https://shoelace.style/components/icon-
|
|
5009
|
+
"url": "https://shoelace.style/components/icon-edit-line"
|
|
5005
5010
|
}
|
|
5006
5011
|
]
|
|
5007
5012
|
},
|
|
5008
5013
|
{
|
|
5009
|
-
"name": "dap-ds-icon-
|
|
5014
|
+
"name": "dap-ds-icon-tools-line",
|
|
5010
5015
|
"description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
|
|
5011
5016
|
"attributes": [
|
|
5012
5017
|
{
|
|
@@ -5033,7 +5038,7 @@
|
|
|
5033
5038
|
"references": [
|
|
5034
5039
|
{
|
|
5035
5040
|
"name": "Documentation",
|
|
5036
|
-
"url": "https://shoelace.style/components/icon-
|
|
5041
|
+
"url": "https://shoelace.style/components/icon-tools-line"
|
|
5037
5042
|
}
|
|
5038
5043
|
]
|
|
5039
5044
|
},
|
|
@@ -5742,7 +5747,7 @@
|
|
|
5742
5747
|
]
|
|
5743
5748
|
},
|
|
5744
5749
|
{
|
|
5745
|
-
"name": "dap-ds-icon-checkbox-blank-circle-fill",
|
|
5750
|
+
"name": "dap-ds-icon-checkbox-blank-circle-fill-check",
|
|
5746
5751
|
"description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
|
|
5747
5752
|
"attributes": [
|
|
5748
5753
|
{
|
|
@@ -5769,12 +5774,12 @@
|
|
|
5769
5774
|
"references": [
|
|
5770
5775
|
{
|
|
5771
5776
|
"name": "Documentation",
|
|
5772
|
-
"url": "https://shoelace.style/components/icon-checkbox-blank-circle-fill"
|
|
5777
|
+
"url": "https://shoelace.style/components/icon-checkbox-blank-circle-fill-check"
|
|
5773
5778
|
}
|
|
5774
5779
|
]
|
|
5775
5780
|
},
|
|
5776
5781
|
{
|
|
5777
|
-
"name": "dap-ds-icon-checkbox-blank-circle-fill
|
|
5782
|
+
"name": "dap-ds-icon-checkbox-blank-circle-fill",
|
|
5778
5783
|
"description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
|
|
5779
5784
|
"attributes": [
|
|
5780
5785
|
{
|
|
@@ -5801,7 +5806,7 @@
|
|
|
5801
5806
|
"references": [
|
|
5802
5807
|
{
|
|
5803
5808
|
"name": "Documentation",
|
|
5804
|
-
"url": "https://shoelace.style/components/icon-checkbox-blank-circle-fill
|
|
5809
|
+
"url": "https://shoelace.style/components/icon-checkbox-blank-circle-fill"
|
|
5805
5810
|
}
|
|
5806
5811
|
]
|
|
5807
5812
|
},
|
|
@@ -5838,7 +5843,7 @@
|
|
|
5838
5843
|
]
|
|
5839
5844
|
},
|
|
5840
5845
|
{
|
|
5841
|
-
"name": "dap-ds-icon-checkbox-circle-
|
|
5846
|
+
"name": "dap-ds-icon-checkbox-circle-line",
|
|
5842
5847
|
"description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
|
|
5843
5848
|
"attributes": [
|
|
5844
5849
|
{
|
|
@@ -5865,12 +5870,12 @@
|
|
|
5865
5870
|
"references": [
|
|
5866
5871
|
{
|
|
5867
5872
|
"name": "Documentation",
|
|
5868
|
-
"url": "https://shoelace.style/components/icon-checkbox-circle-
|
|
5873
|
+
"url": "https://shoelace.style/components/icon-checkbox-circle-line"
|
|
5869
5874
|
}
|
|
5870
5875
|
]
|
|
5871
5876
|
},
|
|
5872
5877
|
{
|
|
5873
|
-
"name": "dap-ds-icon-checkbox-circle-
|
|
5878
|
+
"name": "dap-ds-icon-checkbox-circle-fill",
|
|
5874
5879
|
"description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
|
|
5875
5880
|
"attributes": [
|
|
5876
5881
|
{
|
|
@@ -5897,7 +5902,7 @@
|
|
|
5897
5902
|
"references": [
|
|
5898
5903
|
{
|
|
5899
5904
|
"name": "Documentation",
|
|
5900
|
-
"url": "https://shoelace.style/components/icon-checkbox-circle-
|
|
5905
|
+
"url": "https://shoelace.style/components/icon-checkbox-circle-fill"
|
|
5901
5906
|
}
|
|
5902
5907
|
]
|
|
5903
5908
|
},
|
|
@@ -6478,7 +6483,7 @@
|
|
|
6478
6483
|
]
|
|
6479
6484
|
},
|
|
6480
6485
|
{
|
|
6481
|
-
"name": "dap-ds-icon-lock-
|
|
6486
|
+
"name": "dap-ds-icon-lock-fill",
|
|
6482
6487
|
"description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
|
|
6483
6488
|
"attributes": [
|
|
6484
6489
|
{
|
|
@@ -6505,12 +6510,12 @@
|
|
|
6505
6510
|
"references": [
|
|
6506
6511
|
{
|
|
6507
6512
|
"name": "Documentation",
|
|
6508
|
-
"url": "https://shoelace.style/components/icon-lock-
|
|
6513
|
+
"url": "https://shoelace.style/components/icon-lock-fill"
|
|
6509
6514
|
}
|
|
6510
6515
|
]
|
|
6511
6516
|
},
|
|
6512
6517
|
{
|
|
6513
|
-
"name": "dap-ds-icon-lock-
|
|
6518
|
+
"name": "dap-ds-icon-lock-line",
|
|
6514
6519
|
"description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
|
|
6515
6520
|
"attributes": [
|
|
6516
6521
|
{
|
|
@@ -6537,7 +6542,7 @@
|
|
|
6537
6542
|
"references": [
|
|
6538
6543
|
{
|
|
6539
6544
|
"name": "Documentation",
|
|
6540
|
-
"url": "https://shoelace.style/components/icon-lock-
|
|
6545
|
+
"url": "https://shoelace.style/components/icon-lock-line"
|
|
6541
6546
|
}
|
|
6542
6547
|
]
|
|
6543
6548
|
},
|