dap-design-system 0.60.1 → 0.60.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/combobox/comboboxBase.d.ts +8 -0
- package/dist/components/icon-button/icon-button.component.d.ts +1 -0
- package/dist/components/search/search.component.d.ts +2 -0
- package/dist/{components-BgYJ2t-9.js → components-CYRx8ecv.js} +366 -356
- package/dist/components-CYRx8ecv.js.map +1 -0
- package/dist/components.js +1 -1
- package/dist/dds.js +1 -1
- package/dist/manifest/types/vue/index.d.ts +279 -276
- package/dist/manifest/vscode.html-custom-data.json +299 -299
- package/dist/manifest/web-types.json +664 -659
- package/dist/react/dap-ds-icon-button/index.d.ts +1 -0
- package/dist/react/dap-ds-search/index.d.ts +2 -0
- package/dist/react/index.d.ts +7 -7
- package/dist/react-types.ts +7 -7
- package/dist/react.js +88 -88
- package/dist/react.js.map +1 -1
- package/package.json +1 -1
- package/dist/components-BgYJ2t-9.js.map +0 -1
|
@@ -13,48 +13,6 @@
|
|
|
13
13
|
}
|
|
14
14
|
]
|
|
15
15
|
},
|
|
16
|
-
{
|
|
17
|
-
"name": "dap-ds-avatar-group",
|
|
18
|
-
"description": "Avatar group component displays multiple avatars in an organized layout with overflow management.\n---\n\n\n### **Events:**\n - **dds-overflow-click** - Fired when the overflow indicator is clicked.\n\n### **Slots:**\n - _default_ - The avatars to display in the group.\n\n### **CSS Properties:**\n - **--dds-avatar-group-gap** - Gap between avatars in grid layout (default: 0) _(default: undefined)_\n- **--dds-avatar-group-overlap** - Overlap amount for stacked layout (default: -8px) _(default: undefined)_\n- **--dds-avatar-group-border-width** - Border width for avatars (default: var(--dds-border-width-base)) _(default: undefined)_\n- **--dds-avatar-group-border-color** - Border color for avatars (default: var(--dds-border-neutral-divider)) _(default: undefined)_\n- **--dds-avatar-group-overflow-bg** - Background color for overflow indicator (default: var(--dds-neutral-300)) _(default: undefined)_\n- **--dds-avatar-group-overflow-color** - Text color for overflow indicator (default: var(--dds-neutral-700)) _(default: undefined)_\n- **--dds-avatar-group-overflow-border** - Border for overflow indicator (default: var(--dds-avatar-group-border-width) solid var(--dds-avatar-group-border-color)) _(default: undefined)_\n- **--dds-avatar-group-size-lg** - Size for large avatars (default: var(--dds-spacing-2000)) _(default: undefined)_\n- **--dds-avatar-group-size-md** - Size for medium avatars (default: var(--dds-spacing-1600)) _(default: undefined)_\n- **--dds-avatar-group-size-sm** - Size for small avatars (default: var(--dds-spacing-1200)) _(default: undefined)_\n- **--dds-avatar-group-size-xs** - Size for extra small avatars (default: var(--dds-spacing-800)) _(default: undefined)_\n- **--dds-avatar-group-size-xxs** - Size for extra extra small avatars (default: var(--dds-spacing-400)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main container of the avatar group.\n- **avatars** - The container for the visible avatars.\n- **overflow** - The overflow indicator element.",
|
|
19
|
-
"attributes": [
|
|
20
|
-
{
|
|
21
|
-
"name": "layout",
|
|
22
|
-
"description": "Layout type for the avatar group",
|
|
23
|
-
"values": [{ "name": "stack" }, { "name": "grid" }]
|
|
24
|
-
},
|
|
25
|
-
{
|
|
26
|
-
"name": "max",
|
|
27
|
-
"description": "Maximum number of avatars to show before showing overflow",
|
|
28
|
-
"values": []
|
|
29
|
-
},
|
|
30
|
-
{
|
|
31
|
-
"name": "show-total",
|
|
32
|
-
"description": "Whether to show the total count in overflow indicator",
|
|
33
|
-
"values": []
|
|
34
|
-
},
|
|
35
|
-
{
|
|
36
|
-
"name": "interactive-overflow",
|
|
37
|
-
"description": "Interactive overflow indicator",
|
|
38
|
-
"values": []
|
|
39
|
-
},
|
|
40
|
-
{
|
|
41
|
-
"name": "label",
|
|
42
|
-
"description": "Accessible label for the avatar group",
|
|
43
|
-
"values": []
|
|
44
|
-
},
|
|
45
|
-
{
|
|
46
|
-
"name": "overflow-label",
|
|
47
|
-
"description": "Accessible label for the overflow indicator",
|
|
48
|
-
"values": []
|
|
49
|
-
}
|
|
50
|
-
],
|
|
51
|
-
"references": [
|
|
52
|
-
{
|
|
53
|
-
"name": "Documentation",
|
|
54
|
-
"url": "https://shoelace.style/components/avatar-group"
|
|
55
|
-
}
|
|
56
|
-
]
|
|
57
|
-
},
|
|
58
16
|
{
|
|
59
17
|
"name": "dap-ds-avatar",
|
|
60
18
|
"description": "Avatar component can be used to display user profile images, initials, or icons.\n---\n\n\n### **Events:**\n - **dds-load** - Fired when the image loads successfully.\n- **dds-error** - Fired when the image fails to load.\n\n### **Slots:**\n - **icon** - The icon to display when variant is 'icon'.\n- **fallback** - Custom fallback content when image fails to load.\n\n### **CSS Properties:**\n - **--dds-avatar-border-radius** - The border radius of the avatar (default: 50%) _(default: undefined)_\n- **--dds-avatar-background-color** - The background color of the avatar (default: var(--dds-neutral-200)) _(default: undefined)_\n- **--dds-avatar-border-width** - The border width of the avatar (default: 0) _(default: undefined)_\n- **--dds-avatar-border-color** - The color of the avatar's border (default: transparent) _(default: undefined)_\n- **--dds-avatar-border-style** - The style of the avatar's border (default: solid) _(default: undefined)_\n- **--dds-avatar-transition** - The transition property for the avatar (default: all 0.2s ease-in-out) _(default: undefined)_\n- **--dds-avatar-text-color** - The text color for initials (default: var(--dds-text-neutral-strong)) _(default: undefined)_\n- **--dds-avatar-font-weight** - The font weight for initials (default: var(--dds-font-weight-bold)) _(default: undefined)_\n- **--dds-avatar-lg-size** - Size for large avatars (default: var(--dds-avatar-size-lg)) _(default: undefined)_\n- **--dds-avatar-md-size** - Size for medium avatars (default: var(--dds-avatar-size-md)) _(default: undefined)_\n- **--dds-avatar-sm-size** - Size for small avatars (default: var(--dds-avatar-size-sm)) _(default: undefined)_\n- **--dds-avatar-xs-size** - Size for extra small avatars (default: var(--dds-avatar-size-xs)) _(default: undefined)_\n- **--dds-avatar-xxs-size** - Size for extra extra small avatars (default: var(--dds-avatar-size-xxs)) _(default: undefined)_\n- **--dds-avatar-font-size-lg** - Font size for large avatars (default: var(--dds-font-2xl)) _(default: undefined)_\n- **--dds-avatar-font-size-md** - Font size for medium avatars (default: var(--dds-font-lg)) _(default: undefined)_\n- **--dds-avatar-font-size-sm** - Font size for small avatars (default: var(--dds-font-base)) _(default: undefined)_\n- **--dds-avatar-font-size-xs** - Font size for extra small avatars (default: var(--dds-font-sm)) _(default: undefined)_\n- **--dds-avatar-font-size-xxs** - Font size for extra extra small avatars (default: var(--dds-font-xs)) _(default: undefined)_\n- **--dds-avatar-hover-transform** - Transform applied on hover for interactive avatars (default: scale(1.05)) _(default: undefined)_\n- **--dds-avatar-active-transform** - Transform applied when active for interactive avatars (default: scale(0.95)) _(default: undefined)_\n- **--dds-avatar-focus-ring** - Focus ring style for interactive avatars (default: 0 0 0 2px var(--dds-focus-outer-ring)) _(default: undefined)_\n- **--dds-avatar-loading-background** - Background color when loading (default: var(--dds-neutral-100)) _(default: undefined)_\n- **--dds-avatar-error-background** - Background color when image fails to load (default: var(--dds-negative-100)) _(default: undefined)_\n- **--dds-avatar-error-color** - Text color when image fails to load (default: var(--dds-negative-600)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main avatar container.\n- **img** - The avatar image.\n- **initials** - The initials container.\n- **icon** - The icon container.\n- **fallback** - The fallback content container.\n- **loading** - The loading indicator.",
|
|
@@ -126,36 +84,29 @@
|
|
|
126
84
|
]
|
|
127
85
|
},
|
|
128
86
|
{
|
|
129
|
-
"name": "dap-ds-
|
|
130
|
-
"description": "
|
|
87
|
+
"name": "dap-ds-accordion-group",
|
|
88
|
+
"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.",
|
|
131
89
|
"attributes": [
|
|
132
90
|
{
|
|
133
|
-
"name": "
|
|
134
|
-
"description": "
|
|
135
|
-
"values": [
|
|
136
|
-
{ "name": "neutral" },
|
|
137
|
-
{ "name": "brand" },
|
|
138
|
-
{ "name": "info" },
|
|
139
|
-
{ "name": "positive" },
|
|
140
|
-
{ "name": "warning" },
|
|
141
|
-
{ "name": "negative" }
|
|
142
|
-
]
|
|
143
|
-
},
|
|
144
|
-
{
|
|
145
|
-
"name": "icon",
|
|
146
|
-
"description": "The icon of the badge, this is a name of a built in icon",
|
|
91
|
+
"name": "autoClose",
|
|
92
|
+
"description": "Whether to close other accordions when one is opened.",
|
|
147
93
|
"values": []
|
|
148
94
|
},
|
|
149
95
|
{
|
|
150
|
-
"name": "
|
|
151
|
-
"description": "
|
|
152
|
-
"values": [
|
|
96
|
+
"name": "variant",
|
|
97
|
+
"description": "The variant of the accordion",
|
|
98
|
+
"values": [
|
|
99
|
+
{ "name": "default" },
|
|
100
|
+
{ "name": "collapsed" },
|
|
101
|
+
{ "name": "clean" },
|
|
102
|
+
{ "name": "clean-collapsed" }
|
|
103
|
+
]
|
|
153
104
|
}
|
|
154
105
|
],
|
|
155
106
|
"references": [
|
|
156
107
|
{
|
|
157
108
|
"name": "Documentation",
|
|
158
|
-
"url": "https://shoelace.style/components/
|
|
109
|
+
"url": "https://shoelace.style/components/accordion-group"
|
|
159
110
|
}
|
|
160
111
|
]
|
|
161
112
|
},
|
|
@@ -182,29 +133,78 @@
|
|
|
182
133
|
]
|
|
183
134
|
},
|
|
184
135
|
{
|
|
185
|
-
"name": "dap-ds-
|
|
186
|
-
"description": "
|
|
136
|
+
"name": "dap-ds-avatar-group",
|
|
137
|
+
"description": "Avatar group component displays multiple avatars in an organized layout with overflow management.\n---\n\n\n### **Events:**\n - **dds-overflow-click** - Fired when the overflow indicator is clicked.\n\n### **Slots:**\n - _default_ - The avatars to display in the group.\n\n### **CSS Properties:**\n - **--dds-avatar-group-gap** - Gap between avatars in grid layout (default: 0) _(default: undefined)_\n- **--dds-avatar-group-overlap** - Overlap amount for stacked layout (default: -8px) _(default: undefined)_\n- **--dds-avatar-group-border-width** - Border width for avatars (default: var(--dds-border-width-base)) _(default: undefined)_\n- **--dds-avatar-group-border-color** - Border color for avatars (default: var(--dds-border-neutral-divider)) _(default: undefined)_\n- **--dds-avatar-group-overflow-bg** - Background color for overflow indicator (default: var(--dds-neutral-300)) _(default: undefined)_\n- **--dds-avatar-group-overflow-color** - Text color for overflow indicator (default: var(--dds-neutral-700)) _(default: undefined)_\n- **--dds-avatar-group-overflow-border** - Border for overflow indicator (default: var(--dds-avatar-group-border-width) solid var(--dds-avatar-group-border-color)) _(default: undefined)_\n- **--dds-avatar-group-size-lg** - Size for large avatars (default: var(--dds-spacing-2000)) _(default: undefined)_\n- **--dds-avatar-group-size-md** - Size for medium avatars (default: var(--dds-spacing-1600)) _(default: undefined)_\n- **--dds-avatar-group-size-sm** - Size for small avatars (default: var(--dds-spacing-1200)) _(default: undefined)_\n- **--dds-avatar-group-size-xs** - Size for extra small avatars (default: var(--dds-spacing-800)) _(default: undefined)_\n- **--dds-avatar-group-size-xxs** - Size for extra extra small avatars (default: var(--dds-spacing-400)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main container of the avatar group.\n- **avatars** - The container for the visible avatars.\n- **overflow** - The overflow indicator element.",
|
|
187
138
|
"attributes": [
|
|
188
139
|
{
|
|
189
|
-
"name": "
|
|
190
|
-
"description": "
|
|
140
|
+
"name": "layout",
|
|
141
|
+
"description": "Layout type for the avatar group",
|
|
142
|
+
"values": [{ "name": "stack" }, { "name": "grid" }]
|
|
143
|
+
},
|
|
144
|
+
{
|
|
145
|
+
"name": "max",
|
|
146
|
+
"description": "Maximum number of avatars to show before showing overflow",
|
|
191
147
|
"values": []
|
|
192
148
|
},
|
|
193
149
|
{
|
|
194
|
-
"name": "
|
|
195
|
-
"description": "
|
|
150
|
+
"name": "show-total",
|
|
151
|
+
"description": "Whether to show the total count in overflow indicator",
|
|
152
|
+
"values": []
|
|
153
|
+
},
|
|
154
|
+
{
|
|
155
|
+
"name": "interactive-overflow",
|
|
156
|
+
"description": "Interactive overflow indicator",
|
|
157
|
+
"values": []
|
|
158
|
+
},
|
|
159
|
+
{
|
|
160
|
+
"name": "label",
|
|
161
|
+
"description": "Accessible label for the avatar group",
|
|
162
|
+
"values": []
|
|
163
|
+
},
|
|
164
|
+
{
|
|
165
|
+
"name": "overflow-label",
|
|
166
|
+
"description": "Accessible label for the overflow indicator",
|
|
167
|
+
"values": []
|
|
168
|
+
}
|
|
169
|
+
],
|
|
170
|
+
"references": [
|
|
171
|
+
{
|
|
172
|
+
"name": "Documentation",
|
|
173
|
+
"url": "https://shoelace.style/components/avatar-group"
|
|
174
|
+
}
|
|
175
|
+
]
|
|
176
|
+
},
|
|
177
|
+
{
|
|
178
|
+
"name": "dap-ds-badge",
|
|
179
|
+
"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.",
|
|
180
|
+
"attributes": [
|
|
181
|
+
{
|
|
182
|
+
"name": "type",
|
|
183
|
+
"description": "The type of the badge",
|
|
196
184
|
"values": [
|
|
197
|
-
{ "name": "
|
|
198
|
-
{ "name": "
|
|
199
|
-
{ "name": "
|
|
200
|
-
{ "name": "
|
|
185
|
+
{ "name": "neutral" },
|
|
186
|
+
{ "name": "brand" },
|
|
187
|
+
{ "name": "info" },
|
|
188
|
+
{ "name": "positive" },
|
|
189
|
+
{ "name": "warning" },
|
|
190
|
+
{ "name": "negative" }
|
|
201
191
|
]
|
|
192
|
+
},
|
|
193
|
+
{
|
|
194
|
+
"name": "icon",
|
|
195
|
+
"description": "The icon of the badge, this is a name of a built in icon",
|
|
196
|
+
"values": []
|
|
197
|
+
},
|
|
198
|
+
{
|
|
199
|
+
"name": "live",
|
|
200
|
+
"description": "Whether the badge represents dynamic content that should announce changes",
|
|
201
|
+
"values": []
|
|
202
202
|
}
|
|
203
203
|
],
|
|
204
204
|
"references": [
|
|
205
205
|
{
|
|
206
206
|
"name": "Documentation",
|
|
207
|
-
"url": "https://shoelace.style/components/
|
|
207
|
+
"url": "https://shoelace.style/components/badge"
|
|
208
208
|
}
|
|
209
209
|
]
|
|
210
210
|
},
|
|
@@ -426,105 +426,6 @@
|
|
|
426
426
|
}
|
|
427
427
|
]
|
|
428
428
|
},
|
|
429
|
-
{
|
|
430
|
-
"name": "dap-ds-calendar-cell",
|
|
431
|
-
"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.",
|
|
432
|
-
"attributes": [
|
|
433
|
-
{
|
|
434
|
-
"name": "selected",
|
|
435
|
-
"description": "Whether the calendar cell is selected.",
|
|
436
|
-
"values": []
|
|
437
|
-
},
|
|
438
|
-
{
|
|
439
|
-
"name": "disabledDay",
|
|
440
|
-
"description": "Whether the calendar cell is disabled.",
|
|
441
|
-
"values": []
|
|
442
|
-
},
|
|
443
|
-
{
|
|
444
|
-
"name": "today",
|
|
445
|
-
"description": "Whether the calendar cell is today.",
|
|
446
|
-
"values": []
|
|
447
|
-
},
|
|
448
|
-
{
|
|
449
|
-
"name": "outOfRange",
|
|
450
|
-
"description": "Whether the calendar cell is out of range.",
|
|
451
|
-
"values": []
|
|
452
|
-
},
|
|
453
|
-
{
|
|
454
|
-
"name": "header",
|
|
455
|
-
"description": "Whether the calendar cell is a date header.",
|
|
456
|
-
"values": []
|
|
457
|
-
},
|
|
458
|
-
{
|
|
459
|
-
"name": "focused",
|
|
460
|
-
"description": "Whether the calendar cell is focused.",
|
|
461
|
-
"values": []
|
|
462
|
-
},
|
|
463
|
-
{
|
|
464
|
-
"name": "rangestart",
|
|
465
|
-
"description": "Whether the calendar cell is the start of a range.",
|
|
466
|
-
"values": []
|
|
467
|
-
},
|
|
468
|
-
{
|
|
469
|
-
"name": "rangeend",
|
|
470
|
-
"description": "Whether the calendar cell is the end of a range.",
|
|
471
|
-
"values": []
|
|
472
|
-
},
|
|
473
|
-
{
|
|
474
|
-
"name": "inrange",
|
|
475
|
-
"description": "Whether the calendar cell is in the middle of a range.",
|
|
476
|
-
"values": []
|
|
477
|
-
},
|
|
478
|
-
{
|
|
479
|
-
"name": "locale",
|
|
480
|
-
"description": "The locale of the calendar cell.",
|
|
481
|
-
"values": [{ "name": "hu" }, { "name": "en" }, { "name": "de" }]
|
|
482
|
-
}
|
|
483
|
-
],
|
|
484
|
-
"references": [
|
|
485
|
-
{
|
|
486
|
-
"name": "Documentation",
|
|
487
|
-
"url": "https://shoelace.style/components/calendar-cell"
|
|
488
|
-
}
|
|
489
|
-
]
|
|
490
|
-
},
|
|
491
|
-
{
|
|
492
|
-
"name": "dap-ds-calendar",
|
|
493
|
-
"description": "A calendar is a visual representation of dates. It allows users to select a date.\n---\n\n\n### **Events:**\n - **dds-change** - Fired when the calendar value changes.\n\n### **Slots:**\n - _default_ - The content of the calendar.\n\n### **CSS Properties:**\n - **--dds-calendar-display** - The display property of the calendar container (default: flex) _(default: undefined)_\n- **--dds-calendar-isolation** - The isolation property of the calendar (default: isolate) _(default: undefined)_\n- **--dds-calendar-block-display** - The display property of the calendar block (default: block) _(default: undefined)_\n- **--dds-calendar-transition** - The transition property for the calendar (default: all 0.2s ease-in-out) _(default: undefined)_\n- **--dds-calendar-header-display** - The display property of the calendar header (default: grid) _(default: undefined)_\n- **--dds-calendar-header-grid-flow** - The grid-auto-flow property of the calendar header (default: column) _(default: undefined)_\n- **--dds-calendar-header-width** - The width of the calendar header (default: 100%) _(default: undefined)_\n- **--dds-calendar-header-gap** - The gap between header items (default: var(--dds-spacing-100)) _(default: undefined)_\n- **--dds-calendar-select-min-height** - The minimum height of the select trigger (default: auto) _(default: undefined)_\n- **--dds-calendar-select-max-height** - The maximum height of the select trigger (default: 32px) _(default: undefined)_\n- **--dds-calendar-select-padding** - The padding of the select trigger (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-calendar-select-border-radius** - The border radius of the select trigger (default: var(--dds-radius-rounded)) _(default: undefined)_\n- **--dds-calendar-select-border-color** - The border color of the select trigger (default: var(--dds-border-neutral-transparent-interactive)) _(default: undefined)_\n- **--dds-calendar-select-background** - The background color of the select trigger (default: var(--dds-button-subtle-background-enabled)) _(default: undefined)_\n- **--dds-calendar-select-color** - The text color of the select trigger (default: var(--dds-button-subtle-text-enabled)) _(default: undefined)_\n- **--dds-calendar-select-font-size** - The font size of the select trigger (default: var(--dds-font-sm)) _(default: undefined)_\n- **--dds-calendar-select-font-style** - The font style of the select trigger (default: normal) _(default: undefined)_\n- **--dds-calendar-select-font-weight** - The font weight of the select trigger (default: var(--dds-font-weight-bold)) _(default: undefined)_\n- **--dds-calendar-nav-button-margin** - The margin of the navigation buttons (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-calendar-nav-button-color** - The color of the navigation button icons (default: var(--dds-button-subtle-icon-enabled)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main calendar container.\n- **calendar-header** - The header of the calendar.\n- **body** - The body of the calendar.\n- **calendar-grid-header** - The header of the calendar grid.\n- **calendar-grid-header-cell** - The header cell of the calendar grid.\n- **calendar-grid-cell** - The cell of the calendar grid.\n- **calendar-header-button-prev** - The previous month button of the calendar header.\n- **calendar-header-button-next** - The next month button of the calendar header.\n- **calendar-header-year-select** - The year select of the calendar header.\n- **calendar-header-month-select** - The month select of the calendar header.",
|
|
494
|
-
"attributes": [
|
|
495
|
-
{
|
|
496
|
-
"name": "mode",
|
|
497
|
-
"description": "The mode of the calendar - single date or range selection.",
|
|
498
|
-
"values": [{ "name": "single" }, { "name": "range" }]
|
|
499
|
-
},
|
|
500
|
-
{
|
|
501
|
-
"name": "hideAdjacentMonths",
|
|
502
|
-
"description": "Whether to hide dates from adjacent months (previous/next) in the calendar grid. When not explicitly set, defaults to false for single mode and true for range mode.",
|
|
503
|
-
"values": []
|
|
504
|
-
},
|
|
505
|
-
{
|
|
506
|
-
"name": "locale",
|
|
507
|
-
"description": "The locale of the calendar.",
|
|
508
|
-
"values": [{ "name": "hu" }, { "name": "en" }, { "name": "de" }]
|
|
509
|
-
},
|
|
510
|
-
{
|
|
511
|
-
"name": "prevButtonTestId",
|
|
512
|
-
"description": "`data-testid` for the previous-month button.",
|
|
513
|
-
"values": []
|
|
514
|
-
},
|
|
515
|
-
{
|
|
516
|
-
"name": "nextButtonTestId",
|
|
517
|
-
"description": "`data-testid` for the next-month button.",
|
|
518
|
-
"values": []
|
|
519
|
-
}
|
|
520
|
-
],
|
|
521
|
-
"references": [
|
|
522
|
-
{
|
|
523
|
-
"name": "Documentation",
|
|
524
|
-
"url": "https://shoelace.style/components/calendar"
|
|
525
|
-
}
|
|
526
|
-
]
|
|
527
|
-
},
|
|
528
429
|
{
|
|
529
430
|
"name": "dap-ds-callout",
|
|
530
431
|
"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.",
|
|
@@ -736,17 +637,116 @@
|
|
|
736
637
|
{ "name": "_top" }
|
|
737
638
|
]
|
|
738
639
|
},
|
|
739
|
-
{ "name": "href", "description": "The URL of the card.", "values": [] },
|
|
640
|
+
{ "name": "href", "description": "The URL of the card.", "values": [] },
|
|
641
|
+
{
|
|
642
|
+
"name": "rel",
|
|
643
|
+
"description": "The rel of the card link.",
|
|
644
|
+
"values": []
|
|
645
|
+
}
|
|
646
|
+
],
|
|
647
|
+
"references": [
|
|
648
|
+
{
|
|
649
|
+
"name": "Documentation",
|
|
650
|
+
"url": "https://shoelace.style/components/card"
|
|
651
|
+
}
|
|
652
|
+
]
|
|
653
|
+
},
|
|
654
|
+
{
|
|
655
|
+
"name": "dap-ds-calendar-cell",
|
|
656
|
+
"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.",
|
|
657
|
+
"attributes": [
|
|
658
|
+
{
|
|
659
|
+
"name": "selected",
|
|
660
|
+
"description": "Whether the calendar cell is selected.",
|
|
661
|
+
"values": []
|
|
662
|
+
},
|
|
663
|
+
{
|
|
664
|
+
"name": "disabledDay",
|
|
665
|
+
"description": "Whether the calendar cell is disabled.",
|
|
666
|
+
"values": []
|
|
667
|
+
},
|
|
668
|
+
{
|
|
669
|
+
"name": "today",
|
|
670
|
+
"description": "Whether the calendar cell is today.",
|
|
671
|
+
"values": []
|
|
672
|
+
},
|
|
673
|
+
{
|
|
674
|
+
"name": "outOfRange",
|
|
675
|
+
"description": "Whether the calendar cell is out of range.",
|
|
676
|
+
"values": []
|
|
677
|
+
},
|
|
678
|
+
{
|
|
679
|
+
"name": "header",
|
|
680
|
+
"description": "Whether the calendar cell is a date header.",
|
|
681
|
+
"values": []
|
|
682
|
+
},
|
|
683
|
+
{
|
|
684
|
+
"name": "focused",
|
|
685
|
+
"description": "Whether the calendar cell is focused.",
|
|
686
|
+
"values": []
|
|
687
|
+
},
|
|
688
|
+
{
|
|
689
|
+
"name": "rangestart",
|
|
690
|
+
"description": "Whether the calendar cell is the start of a range.",
|
|
691
|
+
"values": []
|
|
692
|
+
},
|
|
693
|
+
{
|
|
694
|
+
"name": "rangeend",
|
|
695
|
+
"description": "Whether the calendar cell is the end of a range.",
|
|
696
|
+
"values": []
|
|
697
|
+
},
|
|
698
|
+
{
|
|
699
|
+
"name": "inrange",
|
|
700
|
+
"description": "Whether the calendar cell is in the middle of a range.",
|
|
701
|
+
"values": []
|
|
702
|
+
},
|
|
703
|
+
{
|
|
704
|
+
"name": "locale",
|
|
705
|
+
"description": "The locale of the calendar cell.",
|
|
706
|
+
"values": [{ "name": "hu" }, { "name": "en" }, { "name": "de" }]
|
|
707
|
+
}
|
|
708
|
+
],
|
|
709
|
+
"references": [
|
|
710
|
+
{
|
|
711
|
+
"name": "Documentation",
|
|
712
|
+
"url": "https://shoelace.style/components/calendar-cell"
|
|
713
|
+
}
|
|
714
|
+
]
|
|
715
|
+
},
|
|
716
|
+
{
|
|
717
|
+
"name": "dap-ds-calendar",
|
|
718
|
+
"description": "A calendar is a visual representation of dates. It allows users to select a date.\n---\n\n\n### **Events:**\n - **dds-change** - Fired when the calendar value changes.\n\n### **Slots:**\n - _default_ - The content of the calendar.\n\n### **CSS Properties:**\n - **--dds-calendar-display** - The display property of the calendar container (default: flex) _(default: undefined)_\n- **--dds-calendar-isolation** - The isolation property of the calendar (default: isolate) _(default: undefined)_\n- **--dds-calendar-block-display** - The display property of the calendar block (default: block) _(default: undefined)_\n- **--dds-calendar-transition** - The transition property for the calendar (default: all 0.2s ease-in-out) _(default: undefined)_\n- **--dds-calendar-header-display** - The display property of the calendar header (default: grid) _(default: undefined)_\n- **--dds-calendar-header-grid-flow** - The grid-auto-flow property of the calendar header (default: column) _(default: undefined)_\n- **--dds-calendar-header-width** - The width of the calendar header (default: 100%) _(default: undefined)_\n- **--dds-calendar-header-gap** - The gap between header items (default: var(--dds-spacing-100)) _(default: undefined)_\n- **--dds-calendar-select-min-height** - The minimum height of the select trigger (default: auto) _(default: undefined)_\n- **--dds-calendar-select-max-height** - The maximum height of the select trigger (default: 32px) _(default: undefined)_\n- **--dds-calendar-select-padding** - The padding of the select trigger (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-calendar-select-border-radius** - The border radius of the select trigger (default: var(--dds-radius-rounded)) _(default: undefined)_\n- **--dds-calendar-select-border-color** - The border color of the select trigger (default: var(--dds-border-neutral-transparent-interactive)) _(default: undefined)_\n- **--dds-calendar-select-background** - The background color of the select trigger (default: var(--dds-button-subtle-background-enabled)) _(default: undefined)_\n- **--dds-calendar-select-color** - The text color of the select trigger (default: var(--dds-button-subtle-text-enabled)) _(default: undefined)_\n- **--dds-calendar-select-font-size** - The font size of the select trigger (default: var(--dds-font-sm)) _(default: undefined)_\n- **--dds-calendar-select-font-style** - The font style of the select trigger (default: normal) _(default: undefined)_\n- **--dds-calendar-select-font-weight** - The font weight of the select trigger (default: var(--dds-font-weight-bold)) _(default: undefined)_\n- **--dds-calendar-nav-button-margin** - The margin of the navigation buttons (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-calendar-nav-button-color** - The color of the navigation button icons (default: var(--dds-button-subtle-icon-enabled)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main calendar container.\n- **calendar-header** - The header of the calendar.\n- **body** - The body of the calendar.\n- **calendar-grid-header** - The header of the calendar grid.\n- **calendar-grid-header-cell** - The header cell of the calendar grid.\n- **calendar-grid-cell** - The cell of the calendar grid.\n- **calendar-header-button-prev** - The previous month button of the calendar header.\n- **calendar-header-button-next** - The next month button of the calendar header.\n- **calendar-header-year-select** - The year select of the calendar header.\n- **calendar-header-month-select** - The month select of the calendar header.",
|
|
719
|
+
"attributes": [
|
|
720
|
+
{
|
|
721
|
+
"name": "mode",
|
|
722
|
+
"description": "The mode of the calendar - single date or range selection.",
|
|
723
|
+
"values": [{ "name": "single" }, { "name": "range" }]
|
|
724
|
+
},
|
|
725
|
+
{
|
|
726
|
+
"name": "hideAdjacentMonths",
|
|
727
|
+
"description": "Whether to hide dates from adjacent months (previous/next) in the calendar grid. When not explicitly set, defaults to false for single mode and true for range mode.",
|
|
728
|
+
"values": []
|
|
729
|
+
},
|
|
730
|
+
{
|
|
731
|
+
"name": "locale",
|
|
732
|
+
"description": "The locale of the calendar.",
|
|
733
|
+
"values": [{ "name": "hu" }, { "name": "en" }, { "name": "de" }]
|
|
734
|
+
},
|
|
740
735
|
{
|
|
741
|
-
"name": "
|
|
742
|
-
"description": "
|
|
736
|
+
"name": "prevButtonTestId",
|
|
737
|
+
"description": "`data-testid` for the previous-month button.",
|
|
738
|
+
"values": []
|
|
739
|
+
},
|
|
740
|
+
{
|
|
741
|
+
"name": "nextButtonTestId",
|
|
742
|
+
"description": "`data-testid` for the next-month button.",
|
|
743
743
|
"values": []
|
|
744
744
|
}
|
|
745
745
|
],
|
|
746
746
|
"references": [
|
|
747
747
|
{
|
|
748
748
|
"name": "Documentation",
|
|
749
|
-
"url": "https://shoelace.style/components/
|
|
749
|
+
"url": "https://shoelace.style/components/calendar"
|
|
750
750
|
}
|
|
751
751
|
]
|
|
752
752
|
},
|
|
@@ -1932,7 +1932,7 @@
|
|
|
1932
1932
|
},
|
|
1933
1933
|
{
|
|
1934
1934
|
"name": "dap-ds-icon-button",
|
|
1935
|
-
"description": "An icon button is a button with an icon.\n---\n\n\n### **Slots:**\n - _default_ - The icon of the button.\n\n### **CSS Properties:**\n - **--dds-icon-button-border-width** - Border width of the icon button (default: var(--dds-border-width-base)) _(default: undefined)_\n- **--dds-icon-button-border-color** - Border color of the icon button (default: var(--dds-border-neutral-transparent-interactive, #fff500)) _(default: undefined)_\n- **--dds-icon-button-border-radius** - Border radius of the icon button (default: var(--dds-radius-rounded)) _(default: undefined)_\n- **--dds-icon-button-hover-border-width** - Border width on hover (default: var(--dds-border-width-large)) _(default: undefined)_\n- **--dds-icon-button-active-border-width** - Border width when active (default: var(--dds-border-width-xlarge)) _(default: undefined)_\n- **--dds-icon-button-transition** - Transition property for the icon button (default: var(--dds-transition-all)) _(default: undefined)_\n- **--dds-icon-button-cursor** - Cursor style for the button (default: pointer) _(default: undefined)_\n- **--dds-icon-button-disabled-cursor** - Cursor style for the disabled button (default: not-allowed) _(default: undefined)_\n- **--dds-icon-button-column-gap** - Column gap between elements (default: var(--dds-spacing-100)) _(default: undefined)_\n- **--dds-icon-button-padding-lg** - Padding for large size (default: var(--dds-spacing-0)) _(default: undefined)_\n- **--dds-icon-button-padding-md** - Padding for medium size (default: var(--dds-spacing-100)) _(default: undefined)_\n- **--dds-icon-button-padding-sm** - Padding for small size (default: var(--dds-spacing-50)) _(default: undefined)_\n- **--dds-icon-button-padding-xs** - Padding for extra small size (default: var(--dds-spacing-25)) _(default: undefined)_\n- **--dds-icon-button-size-lg** - Size for large icon button (default: var(--dds-spacing-800)) _(default: undefined)_\n- **--dds-icon-button-size-md** - Size for medium icon button (default: var(--dds-spacing-600)) _(default: undefined)_\n- **--dds-icon-button-size-sm** - Size for small icon button (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-icon-button-size-xs** - Size for extra small icon button (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-icon-button-neutral-bg** - Background color for neutral variant (default: var(--dds-transparent-black-subtle)) _(default: undefined)_\n- **--dds-icon-button-neutral-color** - Text color for neutral variant (default: var(--dds-icon-neutral-base)) _(default: undefined)_\n- **--dds-icon-button-neutral-hover-bg** - Hover background color for neutral variant (default: var(--dds-transparent-black-base)) _(default: undefined)_\n- **--dds-icon-button-neutral-active-bg** - Active background color for neutral variant (default: var(--dds-transparent-black-medium)) _(default: undefined)_\n- **--dds-icon-button-brand-bg** - Background color for brand variant (default: var(--dds-button-subtle-background-enabled)) _(default: undefined)_\n- **--dds-icon-button-brand-color** - Text color for brand variant (default: var(--dds-button-subtle-icon-enabled)) _(default: undefined)_\n- **--dds-icon-button-brand-hover-bg** - Hover background color for brand variant (default: var(--dds-button-subtle-background-hover)) _(default: undefined)_\n- **--dds-icon-button-brand-active-bg** - Active background color for brand variant (default: var(--dds-button-subtle-background-pressed)) _(default: undefined)_\n- **--dds-icon-button-inverted-bg** - Background color for inverted variant (default: var(--dds-transparent-white-subtle)) _(default: undefined)_\n- **--dds-icon-button-inverted-color** - Text color for inverted variant (default: var(--dds-button-primary-icon-enabled)) _(default: undefined)_\n- **--dds-icon-button-inverted-hover-bg** - Hover background color for inverted variant (default: var(--dds-transparent-white-base)) _(default: undefined)_\n- **--dds-icon-button-inverted-active-bg** - Active background color for inverted variant (default: var(--dds-transparent-white-medium)) _(default: undefined)_\n- **--dds-icon-button-inverted-brand-bg** - Background color for inverted brand variant (default: var(--dds-button-primary-background-enabled)) _(default: undefined)_\n- **--dds-icon-button-inverted-brand-color** - Text color for inverted brand variant (default: var(--dds-button-primary-icon-enabled)) _(default: undefined)_\n- **--dds-icon-button-inverted-brand-hover-bg** - Hover background color for inverted brand variant (default: var(--dds-button-primary-background-enabled)) _(default: undefined)_\n- **--dds-icon-button-inverted-brand-active-bg** - Active background color for inverted brand variant (default: var(--dds-button-primary-background-enabled)) _(default: undefined)_\n- **--dds-icon-button-disabled-color** - Color for disabled state (default: var(--dds-icon-neutral-disabled)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main button container.\n- **content** - The icon of the button.\n- **icon** - The icon of the icon.\n- **icon-base** - The base of the icon.",
|
|
1935
|
+
"description": "An icon button is a button with an icon.\n---\n\n\n### **Slots:**\n - _default_ - The icon of the button.\n\n### **CSS Properties:**\n - **--dds-icon-button-border-width** - Border width of the icon button (default: var(--dds-border-width-base)) _(default: undefined)_\n- **--dds-icon-button-border-color** - Border color of the icon button (default: var(--dds-border-neutral-transparent-interactive, #fff500)) _(default: undefined)_\n- **--dds-icon-button-border-radius** - Border radius of the icon button (default: var(--dds-radius-rounded)) _(default: undefined)_\n- **--dds-icon-button-hover-border-width** - Border width on hover (default: var(--dds-border-width-large)) _(default: undefined)_\n- **--dds-icon-button-active-border-width** - Border width when active (default: var(--dds-border-width-xlarge)) _(default: undefined)_\n- **--dds-icon-button-transition** - Transition property for the icon button (default: var(--dds-transition-all)) _(default: undefined)_\n- **--dds-icon-button-cursor** - Cursor style for the button (default: pointer) _(default: undefined)_\n- **--dds-icon-button-disabled-cursor** - Cursor style for the disabled button (default: not-allowed) _(default: undefined)_\n- **--dds-icon-button-column-gap** - Column gap between elements (default: var(--dds-spacing-100)) _(default: undefined)_\n- **--dds-icon-button-padding-lg** - Padding for large size (default: var(--dds-spacing-0)) _(default: undefined)_\n- **--dds-icon-button-padding-md** - Padding for medium size (default: var(--dds-spacing-100)) _(default: undefined)_\n- **--dds-icon-button-padding-sm** - Padding for small size (default: var(--dds-spacing-50)) _(default: undefined)_\n- **--dds-icon-button-padding-xs** - Padding for extra small size (default: var(--dds-spacing-25)) _(default: undefined)_\n- **--dds-icon-button-size-lg** - Size for large icon button (default: var(--dds-spacing-800)) _(default: undefined)_\n- **--dds-icon-button-size-md** - Size for medium icon button (default: var(--dds-spacing-600)) _(default: undefined)_\n- **--dds-icon-button-size-sm** - Size for small icon button (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-icon-button-size-xs** - Size for extra small icon button (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-icon-button-neutral-bg** - Background color for neutral variant (default: var(--dds-transparent-black-subtle)) _(default: undefined)_\n- **--dds-icon-button-neutral-color** - Text color for neutral variant (default: var(--dds-icon-neutral-base)) _(default: undefined)_\n- **--dds-icon-button-neutral-hover-bg** - Hover background color for neutral variant (default: var(--dds-transparent-black-base)) _(default: undefined)_\n- **--dds-icon-button-neutral-active-bg** - Active background color for neutral variant (default: var(--dds-transparent-black-medium)) _(default: undefined)_\n- **--dds-icon-button-brand-bg** - Background color for brand variant (default: var(--dds-button-subtle-background-enabled)) _(default: undefined)_\n- **--dds-icon-button-brand-color** - Text color for brand variant (default: var(--dds-button-subtle-icon-enabled)) _(default: undefined)_\n- **--dds-icon-button-brand-hover-bg** - Hover background color for brand variant (default: var(--dds-button-subtle-background-hover)) _(default: undefined)_\n- **--dds-icon-button-brand-active-bg** - Active background color for brand variant (default: var(--dds-button-subtle-background-pressed)) _(default: undefined)_\n- **--dds-icon-button-inverted-bg** - Background color for inverted variant (default: var(--dds-transparent-white-subtle)) _(default: undefined)_\n- **--dds-icon-button-inverted-color** - Text color for inverted variant (default: var(--dds-button-primary-icon-enabled)) _(default: undefined)_\n- **--dds-icon-button-inverted-hover-bg** - Hover background color for inverted variant (default: var(--dds-transparent-white-base)) _(default: undefined)_\n- **--dds-icon-button-inverted-active-bg** - Active background color for inverted variant (default: var(--dds-transparent-white-medium)) _(default: undefined)_\n- **--dds-icon-button-inverted-brand-bg** - Background color for inverted brand variant (default: var(--dds-button-primary-background-enabled)) _(default: undefined)_\n- **--dds-icon-button-inverted-brand-color** - Text color for inverted brand variant (default: var(--dds-button-primary-icon-enabled)) _(default: undefined)_\n- **--dds-icon-button-inverted-brand-hover-bg** - Hover background color for inverted brand variant (default: var(--dds-button-primary-background-enabled)) _(default: undefined)_\n- **--dds-icon-button-inverted-brand-active-bg** - Active background color for inverted brand variant (default: var(--dds-button-primary-background-enabled)) _(default: undefined)_\n- **--dds-icon-button-disabled-color** - Color for disabled state (default: var(--dds-icon-neutral-disabled)) _(default: undefined)_\n- **--dds-icon-button-disabled-bg** - Background color for disabled state (default: transparent) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main button container.\n- **content** - The icon of the button.\n- **icon** - The icon of the icon.\n- **icon-base** - The base of the icon.",
|
|
1936
1936
|
"attributes": [
|
|
1937
1937
|
{
|
|
1938
1938
|
"name": "variant",
|
|
@@ -2452,75 +2452,6 @@
|
|
|
2452
2452
|
}
|
|
2453
2453
|
]
|
|
2454
2454
|
},
|
|
2455
|
-
{
|
|
2456
|
-
"name": "dap-ds-notification-badge",
|
|
2457
|
-
"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.",
|
|
2458
|
-
"attributes": [
|
|
2459
|
-
{
|
|
2460
|
-
"name": "badgeContent",
|
|
2461
|
-
"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.",
|
|
2462
|
-
"values": []
|
|
2463
|
-
},
|
|
2464
|
-
{
|
|
2465
|
-
"name": "visible",
|
|
2466
|
-
"description": "This switch decides the visibility of the badge. This property overrides the badge content visibility. Use it for explicit control.",
|
|
2467
|
-
"values": []
|
|
2468
|
-
},
|
|
2469
|
-
{
|
|
2470
|
-
"name": "showZero",
|
|
2471
|
-
"description": "This switch decides whether to show a zero value or not.",
|
|
2472
|
-
"values": []
|
|
2473
|
-
},
|
|
2474
|
-
{
|
|
2475
|
-
"name": "type",
|
|
2476
|
-
"description": "The color scheme of the badge",
|
|
2477
|
-
"values": [
|
|
2478
|
-
{ "name": "neutral" },
|
|
2479
|
-
{ "name": "brand" },
|
|
2480
|
-
{ "name": "info" },
|
|
2481
|
-
{ "name": "positive" },
|
|
2482
|
-
{ "name": "warning" },
|
|
2483
|
-
{ "name": "negative" }
|
|
2484
|
-
]
|
|
2485
|
-
},
|
|
2486
|
-
{
|
|
2487
|
-
"name": "variant",
|
|
2488
|
-
"description": "The variant of the badge.",
|
|
2489
|
-
"values": [{ "name": "round" }, { "name": "dot" }]
|
|
2490
|
-
},
|
|
2491
|
-
{
|
|
2492
|
-
"name": "max",
|
|
2493
|
-
"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.",
|
|
2494
|
-
"values": []
|
|
2495
|
-
},
|
|
2496
|
-
{
|
|
2497
|
-
"name": "placement",
|
|
2498
|
-
"description": "The position of the badge content around the slot content.",
|
|
2499
|
-
"values": [
|
|
2500
|
-
{ "name": "top-start" },
|
|
2501
|
-
{ "name": "top-end" },
|
|
2502
|
-
{ "name": "bottom-start" },
|
|
2503
|
-
{ "name": "bottom-end" }
|
|
2504
|
-
]
|
|
2505
|
-
},
|
|
2506
|
-
{
|
|
2507
|
-
"name": "circular-auto",
|
|
2508
|
-
"description": "Whether to automatically detect circular elements and adjust positioning accordingly",
|
|
2509
|
-
"values": []
|
|
2510
|
-
},
|
|
2511
|
-
{
|
|
2512
|
-
"name": "force-circular",
|
|
2513
|
-
"description": "Override circular positioning detection - forces circular positioning calculation",
|
|
2514
|
-
"values": []
|
|
2515
|
-
}
|
|
2516
|
-
],
|
|
2517
|
-
"references": [
|
|
2518
|
-
{
|
|
2519
|
-
"name": "Documentation",
|
|
2520
|
-
"url": "https://shoelace.style/components/notification-badge"
|
|
2521
|
-
}
|
|
2522
|
-
]
|
|
2523
|
-
},
|
|
2524
2455
|
{
|
|
2525
2456
|
"name": "dap-ds-number-input",
|
|
2526
2457
|
"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.",
|
|
@@ -2611,6 +2542,75 @@
|
|
|
2611
2542
|
}
|
|
2612
2543
|
]
|
|
2613
2544
|
},
|
|
2545
|
+
{
|
|
2546
|
+
"name": "dap-ds-notification-badge",
|
|
2547
|
+
"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.",
|
|
2548
|
+
"attributes": [
|
|
2549
|
+
{
|
|
2550
|
+
"name": "badgeContent",
|
|
2551
|
+
"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.",
|
|
2552
|
+
"values": []
|
|
2553
|
+
},
|
|
2554
|
+
{
|
|
2555
|
+
"name": "visible",
|
|
2556
|
+
"description": "This switch decides the visibility of the badge. This property overrides the badge content visibility. Use it for explicit control.",
|
|
2557
|
+
"values": []
|
|
2558
|
+
},
|
|
2559
|
+
{
|
|
2560
|
+
"name": "showZero",
|
|
2561
|
+
"description": "This switch decides whether to show a zero value or not.",
|
|
2562
|
+
"values": []
|
|
2563
|
+
},
|
|
2564
|
+
{
|
|
2565
|
+
"name": "type",
|
|
2566
|
+
"description": "The color scheme of the badge",
|
|
2567
|
+
"values": [
|
|
2568
|
+
{ "name": "neutral" },
|
|
2569
|
+
{ "name": "brand" },
|
|
2570
|
+
{ "name": "info" },
|
|
2571
|
+
{ "name": "positive" },
|
|
2572
|
+
{ "name": "warning" },
|
|
2573
|
+
{ "name": "negative" }
|
|
2574
|
+
]
|
|
2575
|
+
},
|
|
2576
|
+
{
|
|
2577
|
+
"name": "variant",
|
|
2578
|
+
"description": "The variant of the badge.",
|
|
2579
|
+
"values": [{ "name": "round" }, { "name": "dot" }]
|
|
2580
|
+
},
|
|
2581
|
+
{
|
|
2582
|
+
"name": "max",
|
|
2583
|
+
"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.",
|
|
2584
|
+
"values": []
|
|
2585
|
+
},
|
|
2586
|
+
{
|
|
2587
|
+
"name": "placement",
|
|
2588
|
+
"description": "The position of the badge content around the slot content.",
|
|
2589
|
+
"values": [
|
|
2590
|
+
{ "name": "top-start" },
|
|
2591
|
+
{ "name": "top-end" },
|
|
2592
|
+
{ "name": "bottom-start" },
|
|
2593
|
+
{ "name": "bottom-end" }
|
|
2594
|
+
]
|
|
2595
|
+
},
|
|
2596
|
+
{
|
|
2597
|
+
"name": "circular-auto",
|
|
2598
|
+
"description": "Whether to automatically detect circular elements and adjust positioning accordingly",
|
|
2599
|
+
"values": []
|
|
2600
|
+
},
|
|
2601
|
+
{
|
|
2602
|
+
"name": "force-circular",
|
|
2603
|
+
"description": "Override circular positioning detection - forces circular positioning calculation",
|
|
2604
|
+
"values": []
|
|
2605
|
+
}
|
|
2606
|
+
],
|
|
2607
|
+
"references": [
|
|
2608
|
+
{
|
|
2609
|
+
"name": "Documentation",
|
|
2610
|
+
"url": "https://shoelace.style/components/notification-badge"
|
|
2611
|
+
}
|
|
2612
|
+
]
|
|
2613
|
+
},
|
|
2614
2614
|
{
|
|
2615
2615
|
"name": "dap-ds-option-item",
|
|
2616
2616
|
"description": "An option item is a selectable item in a list of options.\n---\n\n\n### **Slots:**\n - **prefix** - The prefix of the option item.\n- _default_ - The label of the option item.\n- **suffix** - The suffix of the option item.\n\n### **CSS Properties:**\n - **--dds-option-item-padding-vertical** - The vertical padding of the option item (default: var(--dds-spacing-100)) _(default: undefined)_\n- **--dds-option-item-padding-horizontal** - The horizontal padding of the option item (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-option-item-border-radius** - The border radius of the option item (default: var(--dds-radius-small, 4px)) _(default: undefined)_\n- **--dds-option-item-color** - The text color of the option item (default: var(--dds-text-neutral-base)) _(default: undefined)_\n- **--dds-option-item-hover-bg** - The background color of the option item when hovered (default: var(--dds-background-neutral-medium)) _(default: undefined)_\n- **--dds-option-item-active-bg** - The background color of the option item when active (default: var(--dds-background-neutral-strong)) _(default: undefined)_\n- **--dds-option-item-disabled-color** - The text color of the option item when disabled (default: var(--dds-text-neutral-disabled)) _(default: undefined)_\n- **--dds-option-item-high-contrast-border** - The border color of the option item in high contrast mode (default: var(--dds-border-neutral-transparent-interactive, #fff500)) _(default: undefined)_\n- **--dds-option-item-selected-font-weight** - The font weight of the option item when selected (default: var(--dds-font-weight-bold)) _(default: undefined)_\n- **--dds-option-item-xs-font-size** - The font size of the option item in extra small size (default: var(--dds-font-sm)) _(default: undefined)_\n- **--dds-option-item-lg-font-size** - The font size of the option item in large size (default: var(--dds-font-lg)) _(default: undefined)_\n- **--dds-option-item-selected-icon-width** - The width of the selected icon (default: var(--dds-spacing-400)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main option item container.\n- **prefix** - The prefix of the option item.\n- **label** - The label of the option item.\n- **suffix** - The suffix of the option item.",
|
|
@@ -3044,7 +3044,7 @@
|
|
|
3044
3044
|
},
|
|
3045
3045
|
{
|
|
3046
3046
|
"name": "dap-ds-search",
|
|
3047
|
-
"description": "A select is a form element that allows the user to select one option from a set.\n---\n\n\n### **Events:**\n - **dds-change** - Fired when the search value changes.\n- **dds-blur** - Emitted when the search loses focus.\n- **dds-focus** - Emitted when the search gains focus.\n- **dds-clear** - Emitted when the search is cleared.\n- **dds-search** - Emitted when the search input value changes.\n- **dds-input** - Emitted when typing happens in the search input.\n\n### **Slots:**\n - _default_ - The default slot for the options.\n\n### **CSS Properties:**\n - **--dds-combobox-background** - The background color of the combobox. (default: var(--dds-fields-background-default)) _(default: undefined)_\n- **--dds-combobox-border-color** - The border color of the combobox. (default: var(--dds-border-neutral-base)) _(default: undefined)_\n- **--dds-combobox-border-width** - The border width of the combobox. (default: var(--dds-border-width-base, 1px)) _(default: undefined)_\n- **--dds-combobox-border-radius** - The border radius of the combobox. (default: var(--dds-radius-base)) _(default: undefined)_\n- **--dds-combobox-text-color** - The text color of the combobox. (default: var(--dds-text-neutral-base)) _(default: undefined)_\n- **--dds-combobox-placeholder-color** - The placeholder text color. (default: var(--dds-text-neutral-subtle)) _(default: undefined)_\n- **--dds-combobox-disabled-background** - The background color when disabled. (default: var(--dds-background-neutral-stronger)) _(default: undefined)_\n- **--dds-combobox-disabled-text** - The text color when disabled. (default: var(--dds-text-neutral-disabled)) _(default: undefined)_\n- **--dds-combobox-error-border** - The border color for error state. (default: var(--dds-border-negative-base)) _(default: undefined)_\n- **--dds-combobox-success-border** - The border color for success state. (default: var(--dds-border-positive-base)) _(default: undefined)_\n- **--dds-combobox-icon-color** - The color of the icons. (default: var(--dds-text-icon-neutral-subtle)) _(default: undefined)_\n- **--dds-combobox-loading-spinner-color** - The color of the loading spinner. (default: var(--dds-icon-neutral-base)) _(default: undefined)_\n- **--dds-combobox-clear-icon-color** - The color of the clear icon. (default: var(--dds-button-subtle-icon-neutral-enabled)) _(default: undefined)_\n- **--dds-combobox-popup-background** - The background color of the popup. (default: var(--dds-background-neutral-subtle)) _(default: undefined)_\n- **--dds-combobox-popup-shadow** - The box shadow of the popup. (default: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.06)) _(default: undefined)_\n- **--dds-combobox-icon-opened-transform** - The transform of the icon when the combobox is opened (default: rotate(90deg)). _(default: undefined)_\n- **--dds-combobox-padding-xs** - The padding for extra small size. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-combobox-padding-sm** - The padding for small size. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-combobox-padding-lg** - The padding for large size. (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-combobox-padding-horizontal** - The horizontal padding. (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-combobox-padding-vertical** - The vertical padding. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-combobox-gap** - The gap between elements. (default: var(--dds-spacing-100)) _(default: undefined)_\n- **--dds-combobox-icon-gap** - The gap between icons. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-combobox-action-gap** - The gap between action elements. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-combobox-action-padding** - The padding for action elements. (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-combobox-clear-icon-width** - The width of the clear icon. (default: var(--dds-spacing-800)) _(default: undefined)_\n- **--dds-combobox-dropdown-icon-right** - The right position of the dropdown icon. (default: var(--dds-spacing-600)) _(default: undefined)_\n- **--dds-combobox-min-width** - The minimum width of the combobox. (default: 7.5rem) _(default: undefined)_\n- **--dds-combobox-chips-gap** - The gap between chips. (default: var(--dds-spacing-100)) _(default: undefined)_\n- **--dds-combobox-chips-padding** - The padding for chips. (default: var(--dds-spacing-100)) _(default: undefined)_\n- **--dds-combobox-chips-max-height** - The maximum height of the chips. (default: 120px) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main search container.\n- **trigger** - The trigger button of the search.\n- **label** - The label of the search.\n- **description** - The description of the search.\n- **feedback** - The feedback of the search.\n- **tooltip** - The tooltip of the search.\n- **option-list** - The option list of the search.\n- **input** - The input of the search.",
|
|
3047
|
+
"description": "A select is a form element that allows the user to select one option from a set.\n---\n\n\n### **Events:**\n - **dds-change** - Fired when the search value changes.\n- **dds-blur** - Emitted when the search loses focus.\n- **dds-focus** - Emitted when the search gains focus.\n- **dds-clear** - Emitted when the search is cleared.\n- **dds-search** - Emitted when the search input value changes.\n- **dds-input** - Emitted when typing happens in the search input.\n\n### **Slots:**\n - _default_ - The default slot for the options.\n\n### **CSS Properties:**\n - **--dds-combobox-background** - The background color of the combobox. (default: var(--dds-fields-background-default)) _(default: undefined)_\n- **--dds-combobox-border-color** - The border color of the combobox. (default: var(--dds-border-neutral-base)) _(default: undefined)_\n- **--dds-combobox-border-width** - The border width of the combobox. (default: var(--dds-border-width-base, 1px)) _(default: undefined)_\n- **--dds-combobox-border-radius** - The border radius of the combobox. (default: var(--dds-radius-base)) _(default: undefined)_\n- **--dds-combobox-text-color** - The text color of the combobox. (default: var(--dds-text-neutral-base)) _(default: undefined)_\n- **--dds-combobox-placeholder-color** - The placeholder text color. (default: var(--dds-text-neutral-subtle)) _(default: undefined)_\n- **--dds-combobox-disabled-background** - The background color when disabled. (default: var(--dds-background-neutral-stronger)) _(default: undefined)_\n- **--dds-combobox-disabled-text** - The text color when disabled. (default: var(--dds-text-neutral-disabled)) _(default: undefined)_\n- **--dds-combobox-error-border** - The border color for error state. (default: var(--dds-border-negative-base)) _(default: undefined)_\n- **--dds-combobox-success-border** - The border color for success state. (default: var(--dds-border-positive-base)) _(default: undefined)_\n- **--dds-combobox-icon-color** - The color of the icons. (default: var(--dds-text-icon-neutral-subtle)) _(default: undefined)_\n- **--dds-combobox-loading-spinner-color** - The color of the loading spinner. (default: var(--dds-icon-neutral-base)) _(default: undefined)_\n- **--dds-combobox-clear-icon-color** - The color of the clear icon. (default: var(--dds-button-subtle-icon-neutral-enabled)) _(default: undefined)_\n- **--dds-combobox-popup-background** - The background color of the popup. (default: var(--dds-background-neutral-subtle)) _(default: undefined)_\n- **--dds-combobox-popup-shadow** - The box shadow of the popup. (default: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.06)) _(default: undefined)_\n- **--dds-combobox-icon-opened-transform** - The transform of the icon when the combobox is opened (default: rotate(90deg)). _(default: undefined)_\n- **--dds-combobox-padding-xs** - The padding for extra small size. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-combobox-padding-sm** - The padding for small size. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-combobox-padding-lg** - The padding for large size. (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-combobox-padding-horizontal** - The horizontal padding. (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-combobox-padding-vertical** - The vertical padding. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-combobox-gap** - The gap between elements. (default: var(--dds-spacing-100)) _(default: undefined)_\n- **--dds-combobox-icon-gap** - The gap between icons. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-combobox-action-gap** - The gap between action elements. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-combobox-action-padding** - The padding for action elements. (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-combobox-clear-icon-width** - The width of the clear icon. (default: var(--dds-spacing-800)) _(default: undefined)_\n- **--dds-combobox-dropdown-icon-right** - The right position of the dropdown icon. (default: var(--dds-spacing-600)) _(default: undefined)_\n- **--dds-combobox-min-width** - The minimum width of the combobox. (default: 7.5rem) _(default: undefined)_\n- **--dds-combobox-chips-gap** - The gap between chips. (default: var(--dds-spacing-100)) _(default: undefined)_\n- **--dds-combobox-chips-padding** - The padding for chips. (default: var(--dds-spacing-100)) _(default: undefined)_\n- **--dds-combobox-chips-max-height** - The maximum height of the chips. (default: 120px) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main search container.\n- **trigger** - The trigger button of the search.\n- **search-button** - The trailing search icon button.\n- **label** - The label of the search.\n- **description** - The description of the search.\n- **feedback** - The feedback of the search.\n- **tooltip** - The tooltip of the search.\n- **option-list** - The option list of the search.\n- **input** - The input of the search.",
|
|
3048
3048
|
"attributes": [],
|
|
3049
3049
|
"references": [
|
|
3050
3050
|
{
|
|
@@ -3742,6 +3742,58 @@
|
|
|
3742
3742
|
}
|
|
3743
3743
|
]
|
|
3744
3744
|
},
|
|
3745
|
+
{
|
|
3746
|
+
"name": "dap-ds-toc",
|
|
3747
|
+
"description": "A table of contents (TOC) is a list of links that allows users to quickly navigate to sections within a document.\n---\n\n\n### **Events:**\n - **dds-anchor-change** - Event that is triggered when the anchor changes.\n\n### **CSS Properties:**\n - **--dds-toc-border-width** - Width of the TOC border. (default: var(--dds-border-width-base)) _(default: undefined)_\n- **--dds-toc-border-color** - Color of the TOC border. (default: var(--dds-border-neutral-divider)) _(default: undefined)_\n- **--dds-toc-title-color** - Color of the TOC title. (default: var(--dds-text-neutral-strong)) _(default: undefined)_\n- **--dds-toc-title-font-size** - Font size of the TOC title. (default: var(--dds-font-base)) _(default: undefined)_\n- **--dds-toc-title-font-weight** - Font weight of the TOC title. (default: var(--dds-font-weight-bold)) _(default: undefined)_\n- **--dds-toc-title-line-height** - Line height of the TOC title. (default: 1.25) _(default: undefined)_\n- **--dds-toc-link-color** - Color of the TOC links. (default: var(--dds-button-subtle-text-neutral-enabled)) _(default: undefined)_\n- **--dds-toc-link-active-color** - Color of the active TOC link. (default: var(--dds-button-subtle-text-enabled)) _(default: undefined)_\n- **--dds-toc-link-border-color** - Border color of the active TOC link. (default: var(--dds-border-brand-base)) _(default: undefined)_\n- **--dds-toc-link-line-height** - Line height of the TOC links. (default: 1.2) _(default: undefined)_\n- **--dds-toc-link-padding** - Padding of the TOC links. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-toc-indent-level-0** - Indent level of the TOC items. (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-toc-indent-level-1** - Indent level of the TOC items. (default: var(--dds-spacing-800)) _(default: undefined)_\n- **--dds-toc-indent-level-2** - Indent level of the TOC items. (default: var(--dds-spacing-1200)) _(default: undefined)_\n- **--dds-toc-indent-level-3** - Indent level of the TOC items. (default: var(--dds-spacing-1600)) _(default: undefined)_\n- **--dds-toc-indent-level-4** - Indent level of the TOC items. (default: var(--dds-spacing-2000)) _(default: undefined)_\n- **--dds-toc-indent-level-5** - Indent level of the TOC items. (default: var(--dds-spacing-2400)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main container of the toc.",
|
|
3748
|
+
"attributes": [
|
|
3749
|
+
{
|
|
3750
|
+
"name": "root",
|
|
3751
|
+
"description": "The root element to observe [`IntersectionObserver`](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#root)",
|
|
3752
|
+
"values": []
|
|
3753
|
+
},
|
|
3754
|
+
{
|
|
3755
|
+
"name": "rootMargin",
|
|
3756
|
+
"description": "The margin around the root element to observe [`IntersectionObserver`](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin)",
|
|
3757
|
+
"values": []
|
|
3758
|
+
},
|
|
3759
|
+
{
|
|
3760
|
+
"name": "lastAnchorRootMargin",
|
|
3761
|
+
"description": "The margin around the last anchor to observe [`IntersectionObserver`](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin)",
|
|
3762
|
+
"values": []
|
|
3763
|
+
},
|
|
3764
|
+
{
|
|
3765
|
+
"name": "threshold",
|
|
3766
|
+
"description": "The threshold to trigger [`IntersectionObserver`](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#threshold)",
|
|
3767
|
+
"values": [{ "name": "number[]" }]
|
|
3768
|
+
},
|
|
3769
|
+
{
|
|
3770
|
+
"name": "minHeadingLevel",
|
|
3771
|
+
"description": "The minimum heading level to include in the TOC. The default value is `2`.",
|
|
3772
|
+
"values": []
|
|
3773
|
+
},
|
|
3774
|
+
{
|
|
3775
|
+
"name": "maxHeadingLevel",
|
|
3776
|
+
"description": "The maximum heading level to include in the TOC. The default value is `3`.",
|
|
3777
|
+
"values": []
|
|
3778
|
+
},
|
|
3779
|
+
{
|
|
3780
|
+
"name": "noIndent",
|
|
3781
|
+
"description": "Whether to indent the TOC items.",
|
|
3782
|
+
"values": []
|
|
3783
|
+
},
|
|
3784
|
+
{
|
|
3785
|
+
"name": "header",
|
|
3786
|
+
"description": "The header of the TOC.",
|
|
3787
|
+
"values": []
|
|
3788
|
+
}
|
|
3789
|
+
],
|
|
3790
|
+
"references": [
|
|
3791
|
+
{
|
|
3792
|
+
"name": "Documentation",
|
|
3793
|
+
"url": "https://shoelace.style/components/toc"
|
|
3794
|
+
}
|
|
3795
|
+
]
|
|
3796
|
+
},
|
|
3745
3797
|
{
|
|
3746
3798
|
"name": "dap-ds-time-grid",
|
|
3747
3799
|
"description": "A time grid component that allows users to select hours and minutes in two side-by-side scrollable columns.\n---\n\n\n### **Events:**\n - **dds-change** - Fired when time selection changes.\n- **dds-close** - Fired when the time grid should close.\n\n### **CSS Properties:**\n - **--dds-time-grid-gap** - The gap between time sections (default: var(--dds-spacing-400)). _(default: undefined)_\n- **--dds-time-grid-padding** - The padding around the time grid (default: var(--dds-spacing-0)). _(default: undefined)_\n- **--dds-time-grid-column-gap** - The gap between time buttons in columns (default: var(--dds-spacing-200)). _(default: undefined)_\n- **--dds-time-grid-border-radius** - The border radius of the time grid (default: var(--dds-radius-base)). _(default: undefined)_\n- **--dds-time-grid-background** - The background color of the time grid (default: var(--dds-background-neutral-subtle)). _(default: undefined)_\n- **--dds-time-grid-transition** - The transition timing for the time grid (default: all 0.2s ease-in-out). _(default: undefined)_\n- **--dds-time-grid-max-width** - The maximum width of the time grid (default: 400px). _(default: undefined)_\n- **--dds-time-grid-column-max-height** - The maximum height of time columns (default: 240px). _(default: undefined)_\n\n### **CSS Parts:**\n - **time-grid** - The main time grid container.\n- **hour-section** - The hour selection section.\n- **minute-section** - The minute selection section.\n- **time-button** - Individual time selection buttons.\n- **time-button-base** - The base part of the time button.\n- **time-button-content** - The content part of the time button.\n- **time-button-high-contrast** - The high contrast part of the time button.\n- **section-header-title** - The title of the section header.\n- **section-header-divider** - The divider between the section header and the time buttons.\n- **time-column** - The time column container.",
|
|
@@ -3931,58 +3983,6 @@
|
|
|
3931
3983
|
}
|
|
3932
3984
|
]
|
|
3933
3985
|
},
|
|
3934
|
-
{
|
|
3935
|
-
"name": "dap-ds-toc",
|
|
3936
|
-
"description": "A table of contents (TOC) is a list of links that allows users to quickly navigate to sections within a document.\n---\n\n\n### **Events:**\n - **dds-anchor-change** - Event that is triggered when the anchor changes.\n\n### **CSS Properties:**\n - **--dds-toc-border-width** - Width of the TOC border. (default: var(--dds-border-width-base)) _(default: undefined)_\n- **--dds-toc-border-color** - Color of the TOC border. (default: var(--dds-border-neutral-divider)) _(default: undefined)_\n- **--dds-toc-title-color** - Color of the TOC title. (default: var(--dds-text-neutral-strong)) _(default: undefined)_\n- **--dds-toc-title-font-size** - Font size of the TOC title. (default: var(--dds-font-base)) _(default: undefined)_\n- **--dds-toc-title-font-weight** - Font weight of the TOC title. (default: var(--dds-font-weight-bold)) _(default: undefined)_\n- **--dds-toc-title-line-height** - Line height of the TOC title. (default: 1.25) _(default: undefined)_\n- **--dds-toc-link-color** - Color of the TOC links. (default: var(--dds-button-subtle-text-neutral-enabled)) _(default: undefined)_\n- **--dds-toc-link-active-color** - Color of the active TOC link. (default: var(--dds-button-subtle-text-enabled)) _(default: undefined)_\n- **--dds-toc-link-border-color** - Border color of the active TOC link. (default: var(--dds-border-brand-base)) _(default: undefined)_\n- **--dds-toc-link-line-height** - Line height of the TOC links. (default: 1.2) _(default: undefined)_\n- **--dds-toc-link-padding** - Padding of the TOC links. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-toc-indent-level-0** - Indent level of the TOC items. (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-toc-indent-level-1** - Indent level of the TOC items. (default: var(--dds-spacing-800)) _(default: undefined)_\n- **--dds-toc-indent-level-2** - Indent level of the TOC items. (default: var(--dds-spacing-1200)) _(default: undefined)_\n- **--dds-toc-indent-level-3** - Indent level of the TOC items. (default: var(--dds-spacing-1600)) _(default: undefined)_\n- **--dds-toc-indent-level-4** - Indent level of the TOC items. (default: var(--dds-spacing-2000)) _(default: undefined)_\n- **--dds-toc-indent-level-5** - Indent level of the TOC items. (default: var(--dds-spacing-2400)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main container of the toc.",
|
|
3937
|
-
"attributes": [
|
|
3938
|
-
{
|
|
3939
|
-
"name": "root",
|
|
3940
|
-
"description": "The root element to observe [`IntersectionObserver`](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#root)",
|
|
3941
|
-
"values": []
|
|
3942
|
-
},
|
|
3943
|
-
{
|
|
3944
|
-
"name": "rootMargin",
|
|
3945
|
-
"description": "The margin around the root element to observe [`IntersectionObserver`](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin)",
|
|
3946
|
-
"values": []
|
|
3947
|
-
},
|
|
3948
|
-
{
|
|
3949
|
-
"name": "lastAnchorRootMargin",
|
|
3950
|
-
"description": "The margin around the last anchor to observe [`IntersectionObserver`](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin)",
|
|
3951
|
-
"values": []
|
|
3952
|
-
},
|
|
3953
|
-
{
|
|
3954
|
-
"name": "threshold",
|
|
3955
|
-
"description": "The threshold to trigger [`IntersectionObserver`](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#threshold)",
|
|
3956
|
-
"values": [{ "name": "number[]" }]
|
|
3957
|
-
},
|
|
3958
|
-
{
|
|
3959
|
-
"name": "minHeadingLevel",
|
|
3960
|
-
"description": "The minimum heading level to include in the TOC. The default value is `2`.",
|
|
3961
|
-
"values": []
|
|
3962
|
-
},
|
|
3963
|
-
{
|
|
3964
|
-
"name": "maxHeadingLevel",
|
|
3965
|
-
"description": "The maximum heading level to include in the TOC. The default value is `3`.",
|
|
3966
|
-
"values": []
|
|
3967
|
-
},
|
|
3968
|
-
{
|
|
3969
|
-
"name": "noIndent",
|
|
3970
|
-
"description": "Whether to indent the TOC items.",
|
|
3971
|
-
"values": []
|
|
3972
|
-
},
|
|
3973
|
-
{
|
|
3974
|
-
"name": "header",
|
|
3975
|
-
"description": "The header of the TOC.",
|
|
3976
|
-
"values": []
|
|
3977
|
-
}
|
|
3978
|
-
],
|
|
3979
|
-
"references": [
|
|
3980
|
-
{
|
|
3981
|
-
"name": "Documentation",
|
|
3982
|
-
"url": "https://shoelace.style/components/toc"
|
|
3983
|
-
}
|
|
3984
|
-
]
|
|
3985
|
-
},
|
|
3986
3986
|
{
|
|
3987
3987
|
"name": "dap-ds-toggle-button",
|
|
3988
3988
|
"description": "A toggle button is a button that can be toggled on (active) or off (inactive).\n---\n\n\n### **Slots:**\n - _default_ - The content of the toggle button.\n\n### **CSS Properties:**\n - **--dds-toggle-button-min-width-lg** - Minimum width of the large toggle button (default: var(--dds-spacing-2400)) _(default: undefined)_\n- **--dds-toggle-button-min-width-md** - Minimum width of the medium toggle button (default: var(--dds-spacing-2000)) _(default: undefined)_\n- **--dds-toggle-button-min-width-sm** - Minimum width of the small toggle button (default: var(--dds-spacing-1200)) _(default: undefined)_\n- **--dds-toggle-button-min-width-xs** - Minimum width of the extra small toggle button (default: var(--dds-spacing-1200)) _(default: undefined)_\n- **--dds-toggle-button-height-lg** - Height of the large toggle button (default: var(--dds-spacing-1200)) _(default: undefined)_\n- **--dds-toggle-button-height-md** - Height of the medium toggle button (default: var(--dds-spacing-1000)) _(default: undefined)_\n- **--dds-toggle-button-height-sm** - Height of the small toggle button (default: var(--dds-spacing-800)) _(default: undefined)_\n- **--dds-toggle-button-height-xs** - Height of the extra small toggle button (default: var(--dds-spacing-600)) _(default: undefined)_\n- **--dds-toggle-button-padding-lg** - Padding of the large toggle button (default: var(--dds-spacing-300) var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-toggle-button-padding-md** - Padding of the medium toggle button (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-toggle-button-padding-sm** - Padding of the small toggle button (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-toggle-button-padding-xs** - Padding of the extra small toggle button (default: var(--dds-spacing-150) var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-toggle-button-font-size-lg** - Font size of the large toggle button (default: 1.125rem) _(default: undefined)_\n- **--dds-toggle-button-font-size-md** - Font size of the medium toggle button (default: 1rem) _(default: undefined)_\n- **--dds-toggle-button-font-size-sm** - Font size of the small toggle button (default: 0.875rem) _(default: undefined)_\n- **--dds-toggle-button-font-size-xs** - Font size of the extra small toggle button (default: var(--dds-font-xs)) _(default: undefined)_\n- **--dds-toggle-button-border-enabled** - Border color in enabled state (default: var(--dds-button-toggle-border-enabled)) _(default: undefined)_\n- **--dds-toggle-button-background-enabled** - Background color in enabled state (default: var(--dds-button-toggle-background-enabled)) _(default: undefined)_\n- **--dds-toggle-button-content-enabled** - Content/text color in enabled state (default: var(--dds-button-toggle-content-enabled)) _(default: undefined)_\n- **--dds-toggle-button-border-hover** - Border color in hover state (default: var(--dds-button-toggle-border-hover)) _(default: undefined)_\n- **--dds-toggle-button-background-hover** - Background color in hover state (default: var(--dds-button-toggle-background-hover)) _(default: undefined)_\n- **--dds-toggle-button-border-pressed** - Border color in pressed state (default: var(--dds-button-toggle-border-pressed)) _(default: undefined)_\n- **--dds-toggle-button-background-pressed** - Background color in pressed state (default: var(--dds-button-toggle-background-pressed)) _(default: undefined)_\n- **--dds-toggle-button-background-selected-enabled** - Background color in selected enabled state (default: var(--dds-button-toggle-background-selected-enabled)) _(default: undefined)_\n- **--dds-toggle-button-content-selected-enabled** - Content/text color in selected enabled state (default: var(--dds-button-toggle-content-selected-enabled)) _(default: undefined)_\n- **--dds-toggle-button-background-selected-hover** - Background color in selected hover state (default: var(--dds-button-toggle-background-selected-hover)) _(default: undefined)_\n- **--dds-toggle-button-background-selected-pressed** - Background color in selected pressed state (default: var(--dds-button-toggle-background-selected-pressed)) _(default: undefined)_\n- **--dds-toggle-button-border-disabled** - Border color in disabled state (default: var(--dds-button-toggle-border-disabled)) _(default: undefined)_\n- **--dds-toggle-button-background-disabled** - Background color in disabled state (default: var(--dds-button-toggle-background-disabled)) _(default: undefined)_\n- **--dds-toggle-button-content-disabled** - Content/text color in disabled state (default: var(--dds-button-toggle-content-disabled)) _(default: undefined)_\n- **--dds-toggle-button-highcontrast-border** - High contrast border color (default: var(--dds-button-toggle-highcontrast-border)) _(default: undefined)_\n- **--dds-toggle-button-highcontrast-border-hover** - High contrast border color on hover (default: var(--dds-button-toggle-highcontrast-border-hover)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main button container.\n- **high-contrast** - The high contrast part of the button.",
|