dap-design-system 0.59.2 → 0.60.0
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/datatable/datatable.component.d.ts +14 -0
- package/dist/{components-BQQTd9Dz.js → components-DU5UQYWN.js} +684 -650
- package/dist/components-DU5UQYWN.js.map +1 -0
- package/dist/components.js +1 -1
- package/dist/dds.js +1 -1
- package/dist/manifest/types/vue/index.d.ts +107 -104
- package/dist/manifest/vscode.html-custom-data.json +100 -95
- package/dist/manifest/web-types.json +214 -204
- package/dist/react/index.d.ts +4 -4
- package/dist/react-types.ts +4 -4
- package/dist/react.js +28 -28
- package/dist/react.js.map +1 -1
- package/package.json +1 -1
- package/dist/components-BQQTd9Dz.js.map +0 -1
|
@@ -113,171 +113,6 @@
|
|
|
113
113
|
]
|
|
114
114
|
}
|
|
115
115
|
},
|
|
116
|
-
{
|
|
117
|
-
"name": "dap-ds-accordion-group",
|
|
118
|
-
"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.",
|
|
119
|
-
"doc-url": "",
|
|
120
|
-
"attributes": [
|
|
121
|
-
{
|
|
122
|
-
"name": "autoClose",
|
|
123
|
-
"description": "Whether to close other accordions when one is opened.",
|
|
124
|
-
"value": { "type": "string", "default": "'true'" }
|
|
125
|
-
},
|
|
126
|
-
{
|
|
127
|
-
"name": "variant",
|
|
128
|
-
"description": "The variant of the accordion",
|
|
129
|
-
"value": {
|
|
130
|
-
"type": "'default' | 'collapsed' | 'clean' | 'clean-collapsed'",
|
|
131
|
-
"default": "'default'"
|
|
132
|
-
}
|
|
133
|
-
}
|
|
134
|
-
],
|
|
135
|
-
"slots": [
|
|
136
|
-
{ "name": "", "description": "The content of the accordion group." }
|
|
137
|
-
],
|
|
138
|
-
"events": [],
|
|
139
|
-
"js": {
|
|
140
|
-
"properties": [
|
|
141
|
-
{
|
|
142
|
-
"name": "autoClose",
|
|
143
|
-
"description": "Whether to close other accordions when one is opened.",
|
|
144
|
-
"type": "string"
|
|
145
|
-
},
|
|
146
|
-
{
|
|
147
|
-
"name": "variant",
|
|
148
|
-
"description": "The variant of the accordion",
|
|
149
|
-
"type": "'default' | 'collapsed' | 'clean' | 'clean-collapsed'"
|
|
150
|
-
}
|
|
151
|
-
],
|
|
152
|
-
"events": []
|
|
153
|
-
}
|
|
154
|
-
},
|
|
155
|
-
{
|
|
156
|
-
"name": "dap-ds-anchor-heading",
|
|
157
|
-
"description": "Anchor heading is a heading with an anchor link.\n---\n\n\n### **CSS Properties:**\n - **--dds-anchor-link-color** - The color of the anchor link (default: var(--dds-color-primary)) _(default: undefined)_\n- **--dds-anchor-link-opacity** - The opacity of the anchor link when not hovered (default: 0) _(default: undefined)_\n- **--dds-anchor-link-hover-opacity** - The opacity of the anchor link when hovered (default: 1) _(default: undefined)_\n- **--dds-anchor-link-transition** - The transition property for the anchor link opacity (default: opacity 0.2s ease-in-out) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main anchor heading container.\n- **link** - The link of the anchor heading. dap-ds-link element.\n- **link-base** - The base of the link part.\n- **text** - The text of the anchor heading.",
|
|
158
|
-
"doc-url": "",
|
|
159
|
-
"attributes": [
|
|
160
|
-
{
|
|
161
|
-
"name": "variant",
|
|
162
|
-
"description": "The variant of the heading. Default is `h2`. Can be `h1`, `h2`, `h3`, `h4`, `h5`, or `h6`.",
|
|
163
|
-
"value": { "type": "HeadingVariant" }
|
|
164
|
-
},
|
|
165
|
-
{
|
|
166
|
-
"name": "label",
|
|
167
|
-
"description": "The label of the heading.",
|
|
168
|
-
"value": { "type": "string" }
|
|
169
|
-
}
|
|
170
|
-
],
|
|
171
|
-
"events": [],
|
|
172
|
-
"js": {
|
|
173
|
-
"properties": [
|
|
174
|
-
{ "name": "variant", "type": "HeadingVariant" },
|
|
175
|
-
{ "name": "label", "type": "string" },
|
|
176
|
-
{ "name": "elementId" },
|
|
177
|
-
{ "name": "anchorTitle" }
|
|
178
|
-
],
|
|
179
|
-
"events": []
|
|
180
|
-
}
|
|
181
|
-
},
|
|
182
|
-
{
|
|
183
|
-
"name": "dap-ds-avatar-group",
|
|
184
|
-
"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.",
|
|
185
|
-
"doc-url": "",
|
|
186
|
-
"attributes": [
|
|
187
|
-
{
|
|
188
|
-
"name": "layout",
|
|
189
|
-
"description": "Layout type for the avatar group",
|
|
190
|
-
"value": { "type": "'stack' | 'grid'", "default": "'stack'" }
|
|
191
|
-
},
|
|
192
|
-
{
|
|
193
|
-
"name": "max",
|
|
194
|
-
"description": "Maximum number of avatars to show before showing overflow",
|
|
195
|
-
"value": { "type": "number", "default": "3" }
|
|
196
|
-
},
|
|
197
|
-
{
|
|
198
|
-
"name": "show-total",
|
|
199
|
-
"description": "Whether to show the total count in overflow indicator",
|
|
200
|
-
"value": { "type": "boolean", "default": "false" }
|
|
201
|
-
},
|
|
202
|
-
{
|
|
203
|
-
"name": "interactive-overflow",
|
|
204
|
-
"description": "Interactive overflow indicator",
|
|
205
|
-
"value": { "type": "boolean", "default": "false" }
|
|
206
|
-
},
|
|
207
|
-
{
|
|
208
|
-
"name": "label",
|
|
209
|
-
"description": "Accessible label for the avatar group",
|
|
210
|
-
"value": { "type": "string" }
|
|
211
|
-
},
|
|
212
|
-
{
|
|
213
|
-
"name": "overflow-label",
|
|
214
|
-
"description": "Accessible label for the overflow indicator",
|
|
215
|
-
"value": { "type": "string" }
|
|
216
|
-
}
|
|
217
|
-
],
|
|
218
|
-
"slots": [
|
|
219
|
-
{
|
|
220
|
-
"name": "",
|
|
221
|
-
"description": "The avatars to display in the group."
|
|
222
|
-
}
|
|
223
|
-
],
|
|
224
|
-
"events": [
|
|
225
|
-
{
|
|
226
|
-
"name": "dds-overflow-click",
|
|
227
|
-
"description": "Fired when the overflow indicator is clicked."
|
|
228
|
-
}
|
|
229
|
-
],
|
|
230
|
-
"js": {
|
|
231
|
-
"properties": [
|
|
232
|
-
{
|
|
233
|
-
"name": "layout",
|
|
234
|
-
"description": "Layout type for the avatar group",
|
|
235
|
-
"type": "'stack' | 'grid'"
|
|
236
|
-
},
|
|
237
|
-
{
|
|
238
|
-
"name": "max",
|
|
239
|
-
"description": "Maximum number of avatars to show before showing overflow",
|
|
240
|
-
"type": "number"
|
|
241
|
-
},
|
|
242
|
-
{
|
|
243
|
-
"name": "showTotal",
|
|
244
|
-
"description": "Whether to show the total count in overflow indicator",
|
|
245
|
-
"type": "boolean"
|
|
246
|
-
},
|
|
247
|
-
{
|
|
248
|
-
"name": "interactiveOverflow",
|
|
249
|
-
"description": "Interactive overflow indicator",
|
|
250
|
-
"type": "boolean"
|
|
251
|
-
},
|
|
252
|
-
{
|
|
253
|
-
"name": "label",
|
|
254
|
-
"description": "Accessible label for the avatar group",
|
|
255
|
-
"type": "string"
|
|
256
|
-
},
|
|
257
|
-
{
|
|
258
|
-
"name": "overflowLabel",
|
|
259
|
-
"description": "Accessible label for the overflow indicator",
|
|
260
|
-
"type": "string"
|
|
261
|
-
},
|
|
262
|
-
{
|
|
263
|
-
"name": "size",
|
|
264
|
-
"description": "The size of avatars in the group. Default is `md`. See SizedMixin.",
|
|
265
|
-
"type": "'xxs' | 'xs' | 'sm' | 'md' | 'lg'"
|
|
266
|
-
},
|
|
267
|
-
{
|
|
268
|
-
"name": "sizeMap",
|
|
269
|
-
"description": "Responsive size map (e.g. \"md:lg\"); see SizedMixin.",
|
|
270
|
-
"type": "string"
|
|
271
|
-
}
|
|
272
|
-
],
|
|
273
|
-
"events": [
|
|
274
|
-
{
|
|
275
|
-
"name": "dds-overflow-click",
|
|
276
|
-
"description": "Fired when the overflow indicator is clicked."
|
|
277
|
-
}
|
|
278
|
-
]
|
|
279
|
-
}
|
|
280
|
-
},
|
|
281
116
|
{
|
|
282
117
|
"name": "dap-ds-avatar",
|
|
283
118
|
"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.",
|
|
@@ -435,6 +270,165 @@
|
|
|
435
270
|
]
|
|
436
271
|
}
|
|
437
272
|
},
|
|
273
|
+
{
|
|
274
|
+
"name": "dap-ds-avatar-group",
|
|
275
|
+
"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.",
|
|
276
|
+
"doc-url": "",
|
|
277
|
+
"attributes": [
|
|
278
|
+
{
|
|
279
|
+
"name": "layout",
|
|
280
|
+
"description": "Layout type for the avatar group",
|
|
281
|
+
"value": { "type": "'stack' | 'grid'", "default": "'stack'" }
|
|
282
|
+
},
|
|
283
|
+
{
|
|
284
|
+
"name": "max",
|
|
285
|
+
"description": "Maximum number of avatars to show before showing overflow",
|
|
286
|
+
"value": { "type": "number", "default": "3" }
|
|
287
|
+
},
|
|
288
|
+
{
|
|
289
|
+
"name": "show-total",
|
|
290
|
+
"description": "Whether to show the total count in overflow indicator",
|
|
291
|
+
"value": { "type": "boolean", "default": "false" }
|
|
292
|
+
},
|
|
293
|
+
{
|
|
294
|
+
"name": "interactive-overflow",
|
|
295
|
+
"description": "Interactive overflow indicator",
|
|
296
|
+
"value": { "type": "boolean", "default": "false" }
|
|
297
|
+
},
|
|
298
|
+
{
|
|
299
|
+
"name": "label",
|
|
300
|
+
"description": "Accessible label for the avatar group",
|
|
301
|
+
"value": { "type": "string" }
|
|
302
|
+
},
|
|
303
|
+
{
|
|
304
|
+
"name": "overflow-label",
|
|
305
|
+
"description": "Accessible label for the overflow indicator",
|
|
306
|
+
"value": { "type": "string" }
|
|
307
|
+
}
|
|
308
|
+
],
|
|
309
|
+
"slots": [
|
|
310
|
+
{
|
|
311
|
+
"name": "",
|
|
312
|
+
"description": "The avatars to display in the group."
|
|
313
|
+
}
|
|
314
|
+
],
|
|
315
|
+
"events": [
|
|
316
|
+
{
|
|
317
|
+
"name": "dds-overflow-click",
|
|
318
|
+
"description": "Fired when the overflow indicator is clicked."
|
|
319
|
+
}
|
|
320
|
+
],
|
|
321
|
+
"js": {
|
|
322
|
+
"properties": [
|
|
323
|
+
{
|
|
324
|
+
"name": "layout",
|
|
325
|
+
"description": "Layout type for the avatar group",
|
|
326
|
+
"type": "'stack' | 'grid'"
|
|
327
|
+
},
|
|
328
|
+
{
|
|
329
|
+
"name": "max",
|
|
330
|
+
"description": "Maximum number of avatars to show before showing overflow",
|
|
331
|
+
"type": "number"
|
|
332
|
+
},
|
|
333
|
+
{
|
|
334
|
+
"name": "showTotal",
|
|
335
|
+
"description": "Whether to show the total count in overflow indicator",
|
|
336
|
+
"type": "boolean"
|
|
337
|
+
},
|
|
338
|
+
{
|
|
339
|
+
"name": "interactiveOverflow",
|
|
340
|
+
"description": "Interactive overflow indicator",
|
|
341
|
+
"type": "boolean"
|
|
342
|
+
},
|
|
343
|
+
{
|
|
344
|
+
"name": "label",
|
|
345
|
+
"description": "Accessible label for the avatar group",
|
|
346
|
+
"type": "string"
|
|
347
|
+
},
|
|
348
|
+
{
|
|
349
|
+
"name": "overflowLabel",
|
|
350
|
+
"description": "Accessible label for the overflow indicator",
|
|
351
|
+
"type": "string"
|
|
352
|
+
},
|
|
353
|
+
{
|
|
354
|
+
"name": "size",
|
|
355
|
+
"description": "The size of avatars in the group. Default is `md`. See SizedMixin.",
|
|
356
|
+
"type": "'xxs' | 'xs' | 'sm' | 'md' | 'lg'"
|
|
357
|
+
},
|
|
358
|
+
{
|
|
359
|
+
"name": "sizeMap",
|
|
360
|
+
"description": "Responsive size map (e.g. \"md:lg\"); see SizedMixin.",
|
|
361
|
+
"type": "string"
|
|
362
|
+
}
|
|
363
|
+
],
|
|
364
|
+
"events": [
|
|
365
|
+
{
|
|
366
|
+
"name": "dds-overflow-click",
|
|
367
|
+
"description": "Fired when the overflow indicator is clicked."
|
|
368
|
+
}
|
|
369
|
+
]
|
|
370
|
+
}
|
|
371
|
+
},
|
|
372
|
+
{
|
|
373
|
+
"name": "dap-ds-badge",
|
|
374
|
+
"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.",
|
|
375
|
+
"doc-url": "",
|
|
376
|
+
"attributes": [
|
|
377
|
+
{
|
|
378
|
+
"name": "type",
|
|
379
|
+
"description": "The type of the badge",
|
|
380
|
+
"value": {
|
|
381
|
+
"type": "'neutral' | 'brand' | 'info' | 'positive' | 'warning' | 'negative'",
|
|
382
|
+
"default": "'neutral'"
|
|
383
|
+
}
|
|
384
|
+
},
|
|
385
|
+
{
|
|
386
|
+
"name": "icon",
|
|
387
|
+
"description": "The icon of the badge, this is a name of a built in icon",
|
|
388
|
+
"value": { "type": "string | undefined" }
|
|
389
|
+
},
|
|
390
|
+
{
|
|
391
|
+
"name": "live",
|
|
392
|
+
"description": "Whether the badge represents dynamic content that should announce changes",
|
|
393
|
+
"value": { "type": "boolean", "default": "false" }
|
|
394
|
+
}
|
|
395
|
+
],
|
|
396
|
+
"slots": [
|
|
397
|
+
{ "name": "", "description": "The content of the badge." },
|
|
398
|
+
{ "name": "icon", "description": "The icon of the badge." }
|
|
399
|
+
],
|
|
400
|
+
"events": [],
|
|
401
|
+
"js": {
|
|
402
|
+
"properties": [
|
|
403
|
+
{
|
|
404
|
+
"name": "type",
|
|
405
|
+
"description": "The type of the badge",
|
|
406
|
+
"type": "'neutral' | 'brand' | 'info' | 'positive' | 'warning' | 'negative'"
|
|
407
|
+
},
|
|
408
|
+
{
|
|
409
|
+
"name": "icon",
|
|
410
|
+
"description": "The icon of the badge, this is a name of a built in icon",
|
|
411
|
+
"type": "string | undefined"
|
|
412
|
+
},
|
|
413
|
+
{
|
|
414
|
+
"name": "live",
|
|
415
|
+
"description": "Whether the badge represents dynamic content that should announce changes",
|
|
416
|
+
"type": "boolean"
|
|
417
|
+
},
|
|
418
|
+
{
|
|
419
|
+
"name": "size",
|
|
420
|
+
"description": "The size of the badge. Default is `sm`.",
|
|
421
|
+
"type": "'sm' | 'lg'"
|
|
422
|
+
},
|
|
423
|
+
{
|
|
424
|
+
"name": "sizeMap",
|
|
425
|
+
"description": "Responsive size map (e.g. \"md:lg\").",
|
|
426
|
+
"type": "string"
|
|
427
|
+
}
|
|
428
|
+
],
|
|
429
|
+
"events": []
|
|
430
|
+
}
|
|
431
|
+
},
|
|
438
432
|
{
|
|
439
433
|
"name": "dap-ds-banner",
|
|
440
434
|
"description": "A banner is a message displayed at the top of the page to provide important information to the user.\n---\n\n\n### **Events:**\n - **dds-close** - Event fired when the banner is closed.\n\n### **Slots:**\n - _default_ - The content of the banner.\n- **actions** - Actions of banner\n- **icon** - The icon of the banner.\n\n### **CSS Properties:**\n - **--dds-banner-gap** - The gap between banner elements (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-banner-line-height** - The line height of the banner text (default: var(--dds-font-line-height-xlarge)) _(default: undefined)_\n- **--dds-banner-transition** - The transition property for the banner (default: all 0.2s ease-in-out) _(default: undefined)_\n- **--dds-banner-brand-background** - The background color of the brand banner (default: var(--dds-banner-background-brand)) _(default: undefined)_\n- **--dds-banner-brand-icon-color** - The color of the brand banner icon (default: var(--dds-banner-icon-brand)) _(default: undefined)_\n- **--dds-banner-brand-text-color** - The text color of the brand banner (default: var(--dds-banner-text-brand)) _(default: undefined)_\n- **--dds-banner-brand-action-color** - The color of the brand banner actions (default: var(--dds-banner-action-enabled)) _(default: undefined)_\n- **--dds-banner-info-background** - The background color of the info banner (default: var(--dds-banner-background-informative)) _(default: undefined)_\n- **--dds-banner-info-icon-color** - The color of the info banner icon (default: var(--dds-banner-icon-informative)) _(default: undefined)_\n- **--dds-banner-info-text-color** - The text color of the info banner (default: var(--dds-banner-text-informative)) _(default: undefined)_\n- **--dds-banner-info-action-color** - The color of the info banner actions (default: var(--dds-banner-action-enabled)) _(default: undefined)_\n- **--dds-banner-positive-background** - The background color of the positive banner (default: var(--dds-banner-background-positive)) _(default: undefined)_\n- **--dds-banner-positive-icon-color** - The color of the positive banner icon (default: var(--dds-banner-icon-positive)) _(default: undefined)_\n- **--dds-banner-positive-text-color** - The text color of the positive banner (default: var(--dds-banner-text-positive)) _(default: undefined)_\n- **--dds-banner-positive-action-color** - The color of the positive banner actions (default: var(--dds-banner-action-enabled)) _(default: undefined)_\n- **--dds-banner-warning-background** - The background color of the warning banner (default: var(--dds-banner-background-warning)) _(default: undefined)_\n- **--dds-banner-warning-icon-color** - The color of the warning banner icon (default: var(--dds-banner-icon-warning)) _(default: undefined)_\n- **--dds-banner-warning-text-color** - The text color of the warning banner (default: var(--dds-banner-text-warning)) _(default: undefined)_\n- **--dds-banner-warning-action-color** - The color of the warning banner actions (default: var(--dds-banner-action-inverted-enabled)) _(default: undefined)_\n- **--dds-banner-negative-background** - The background color of the negative banner (default: var(--dds-banner-background-negative)) _(default: undefined)_\n- **--dds-banner-negative-icon-color** - The color of the negative banner icon (default: var(--dds-banner-icon-negative)) _(default: undefined)_\n- **--dds-banner-negative-text-color** - The text color of the negative banner (default: var(--dds-banner-text-negative)) _(default: undefined)_\n- **--dds-banner-negative-action-color** - The color of the negative banner actions (default: var(--dds-banner-action-inverted-enabled)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main banner container.\n- **card-base** - The wrapper card container.\n- **icon** - The icon of the banner.\n- **icon-element** - The icon element of the banner.\n- **icon-base** - The base of the icon.\n- **closebutton** - The close button of the banner.\n- **close-icon-element** - The icon element of the close button.\n- **close-icon-base** - The base of the close button icon.\n- **actions** - The actions of the banner.\n- **title** - The title of the banner.",
|
|
@@ -529,65 +523,71 @@
|
|
|
529
523
|
}
|
|
530
524
|
},
|
|
531
525
|
{
|
|
532
|
-
"name": "dap-ds-
|
|
533
|
-
"description": "
|
|
526
|
+
"name": "dap-ds-accordion-group",
|
|
527
|
+
"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.",
|
|
534
528
|
"doc-url": "",
|
|
535
529
|
"attributes": [
|
|
536
530
|
{
|
|
537
|
-
"name": "
|
|
538
|
-
"description": "
|
|
539
|
-
"value": {
|
|
540
|
-
"type": "'neutral' | 'brand' | 'info' | 'positive' | 'warning' | 'negative'",
|
|
541
|
-
"default": "'neutral'"
|
|
542
|
-
}
|
|
543
|
-
},
|
|
544
|
-
{
|
|
545
|
-
"name": "icon",
|
|
546
|
-
"description": "The icon of the badge, this is a name of a built in icon",
|
|
547
|
-
"value": { "type": "string | undefined" }
|
|
531
|
+
"name": "autoClose",
|
|
532
|
+
"description": "Whether to close other accordions when one is opened.",
|
|
533
|
+
"value": { "type": "string", "default": "'true'" }
|
|
548
534
|
},
|
|
549
535
|
{
|
|
550
|
-
"name": "
|
|
551
|
-
"description": "
|
|
552
|
-
"value": {
|
|
536
|
+
"name": "variant",
|
|
537
|
+
"description": "The variant of the accordion",
|
|
538
|
+
"value": {
|
|
539
|
+
"type": "'default' | 'collapsed' | 'clean' | 'clean-collapsed'",
|
|
540
|
+
"default": "'default'"
|
|
541
|
+
}
|
|
553
542
|
}
|
|
554
543
|
],
|
|
555
544
|
"slots": [
|
|
556
|
-
{ "name": "", "description": "The content of the
|
|
557
|
-
{ "name": "icon", "description": "The icon of the badge." }
|
|
545
|
+
{ "name": "", "description": "The content of the accordion group." }
|
|
558
546
|
],
|
|
559
547
|
"events": [],
|
|
560
548
|
"js": {
|
|
561
549
|
"properties": [
|
|
562
550
|
{
|
|
563
|
-
"name": "
|
|
564
|
-
"description": "
|
|
565
|
-
"type": "
|
|
566
|
-
},
|
|
567
|
-
{
|
|
568
|
-
"name": "icon",
|
|
569
|
-
"description": "The icon of the badge, this is a name of a built in icon",
|
|
570
|
-
"type": "string | undefined"
|
|
571
|
-
},
|
|
572
|
-
{
|
|
573
|
-
"name": "live",
|
|
574
|
-
"description": "Whether the badge represents dynamic content that should announce changes",
|
|
575
|
-
"type": "boolean"
|
|
576
|
-
},
|
|
577
|
-
{
|
|
578
|
-
"name": "size",
|
|
579
|
-
"description": "The size of the badge. Default is `sm`.",
|
|
580
|
-
"type": "'sm' | 'lg'"
|
|
551
|
+
"name": "autoClose",
|
|
552
|
+
"description": "Whether to close other accordions when one is opened.",
|
|
553
|
+
"type": "string"
|
|
581
554
|
},
|
|
582
555
|
{
|
|
583
|
-
"name": "
|
|
584
|
-
"description": "
|
|
585
|
-
"type": "
|
|
556
|
+
"name": "variant",
|
|
557
|
+
"description": "The variant of the accordion",
|
|
558
|
+
"type": "'default' | 'collapsed' | 'clean' | 'clean-collapsed'"
|
|
586
559
|
}
|
|
587
560
|
],
|
|
588
561
|
"events": []
|
|
589
562
|
}
|
|
590
563
|
},
|
|
564
|
+
{
|
|
565
|
+
"name": "dap-ds-anchor-heading",
|
|
566
|
+
"description": "Anchor heading is a heading with an anchor link.\n---\n\n\n### **CSS Properties:**\n - **--dds-anchor-link-color** - The color of the anchor link (default: var(--dds-color-primary)) _(default: undefined)_\n- **--dds-anchor-link-opacity** - The opacity of the anchor link when not hovered (default: 0) _(default: undefined)_\n- **--dds-anchor-link-hover-opacity** - The opacity of the anchor link when hovered (default: 1) _(default: undefined)_\n- **--dds-anchor-link-transition** - The transition property for the anchor link opacity (default: opacity 0.2s ease-in-out) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main anchor heading container.\n- **link** - The link of the anchor heading. dap-ds-link element.\n- **link-base** - The base of the link part.\n- **text** - The text of the anchor heading.",
|
|
567
|
+
"doc-url": "",
|
|
568
|
+
"attributes": [
|
|
569
|
+
{
|
|
570
|
+
"name": "variant",
|
|
571
|
+
"description": "The variant of the heading. Default is `h2`. Can be `h1`, `h2`, `h3`, `h4`, `h5`, or `h6`.",
|
|
572
|
+
"value": { "type": "HeadingVariant" }
|
|
573
|
+
},
|
|
574
|
+
{
|
|
575
|
+
"name": "label",
|
|
576
|
+
"description": "The label of the heading.",
|
|
577
|
+
"value": { "type": "string" }
|
|
578
|
+
}
|
|
579
|
+
],
|
|
580
|
+
"events": [],
|
|
581
|
+
"js": {
|
|
582
|
+
"properties": [
|
|
583
|
+
{ "name": "variant", "type": "HeadingVariant" },
|
|
584
|
+
{ "name": "label", "type": "string" },
|
|
585
|
+
{ "name": "elementId" },
|
|
586
|
+
{ "name": "anchorTitle" }
|
|
587
|
+
],
|
|
588
|
+
"events": []
|
|
589
|
+
}
|
|
590
|
+
},
|
|
591
591
|
{
|
|
592
592
|
"name": "dap-ds-breadcrumb",
|
|
593
593
|
"description": "A breadcrumb is a secondary navigation scheme that reveals the user's location in a website or Web application.\n---\n\n\n### **Slots:**\n - _default_ - The content of the breadcrumb.\n- **separator** - The separator between breadcrumb items. Default is '/'.\n\n### **CSS Properties:**\n - **--dds-breadcrumb-width** - The width of the breadcrumb container (default: 100%) _(default: undefined)_\n- **--dds-breadcrumb-overflow-x** - The horizontal overflow behavior of the breadcrumb (default: auto) _(default: undefined)_\n- **--dds-breadcrumb-transition** - The transition property for the breadcrumb (default: all 0.2s ease-in-out) _(default: undefined)_\n- **--dds-breadcrumb-list-display** - The display property of the breadcrumb list (default: flex) _(default: undefined)_\n- **--dds-breadcrumb-list-flex-wrap** - The flex-wrap property of the breadcrumb list (default: nowrap) _(default: undefined)_\n- **--dds-breadcrumb-list-align-items** - The align-items property of the breadcrumb list (default: center) _(default: undefined)_\n- **--dds-breadcrumb-list-min-width** - The minimum width of the breadcrumb list (default: max-content) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main breadcrumb container.\n- **separator** - The separator of the breadcrumb.",
|
|
@@ -3009,6 +3009,11 @@
|
|
|
3009
3009
|
"default": "false"
|
|
3010
3010
|
}
|
|
3011
3011
|
},
|
|
3012
|
+
{
|
|
3013
|
+
"name": "stickySelectionColumn",
|
|
3014
|
+
"description": "Pin the built-in row-selection (checkbox) column to the left edge, so it\nstays visible while the other columns scroll horizontally under it.",
|
|
3015
|
+
"value": { "type": "boolean", "default": "false" }
|
|
3016
|
+
},
|
|
3012
3017
|
{
|
|
3013
3018
|
"name": "enableSorting",
|
|
3014
3019
|
"description": "Enable sorting on the table",
|
|
@@ -3266,6 +3271,11 @@
|
|
|
3266
3271
|
"description": "Enable row selection on the table, can be a boolean or a function that returns a boolean",
|
|
3267
3272
|
"type": "boolean | ((row: Row<T>) => boolean)"
|
|
3268
3273
|
},
|
|
3274
|
+
{
|
|
3275
|
+
"name": "stickySelectionColumn",
|
|
3276
|
+
"description": "Pin the built-in row-selection (checkbox) column to the left edge, so it\nstays visible while the other columns scroll horizontally under it.",
|
|
3277
|
+
"type": "boolean"
|
|
3278
|
+
},
|
|
3269
3279
|
{
|
|
3270
3280
|
"name": "enableSorting",
|
|
3271
3281
|
"description": "Enable sorting on the table",
|
package/dist/react/index.d.ts
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
export { default as DapDSAccordionReact } from './dap-ds-accordion/index.js';
|
|
2
|
-
export { default as DapDSAccordionGroupReact } from './dap-ds-accordion-group/index.js';
|
|
3
|
-
export { default as DapDSAnchorHeadingReact } from './dap-ds-anchor-heading/index.js';
|
|
4
|
-
export { default as DapDSAvatarGroupReact } from './dap-ds-avatar-group/index.js';
|
|
5
2
|
export { default as DapDSAvatarReact } from './dap-ds-avatar/index.js';
|
|
6
|
-
export { default as
|
|
3
|
+
export { default as DapDSAvatarGroupReact } from './dap-ds-avatar-group/index.js';
|
|
7
4
|
export { default as DapDSBadgeReact } from './dap-ds-badge/index.js';
|
|
5
|
+
export { default as DapDSBannerReact } from './dap-ds-banner/index.js';
|
|
6
|
+
export { default as DapDSAccordionGroupReact } from './dap-ds-accordion-group/index.js';
|
|
7
|
+
export { default as DapDSAnchorHeadingReact } from './dap-ds-anchor-heading/index.js';
|
|
8
8
|
export { default as DapDSBreadcrumbReact } from './dap-ds-breadcrumb/index.js';
|
|
9
9
|
export { default as DapDSBreadcrumbItemReact } from './dap-ds-breadcrumb-item/index.js';
|
|
10
10
|
export { default as DapDSButtonReact } from './dap-ds-button/index.js';
|
package/dist/react-types.ts
CHANGED
|
@@ -4,12 +4,12 @@ type HtmlType = { children?: React.ReactNode | Element, class?: string, ref?: Re
|
|
|
4
4
|
style?: Partial<CSSStyleDeclaration>, id?: string, onClick?: (e: React.MouseEvent) => void, onChange?: (e: React.ChangeEvent) => void}
|
|
5
5
|
|
|
6
6
|
export type DapDSAccordionType = HtmlType & Partial<Omit<DDS.DapDSAccordion, 'children' | 'style'>> & { "ondds-opened"?: (e: DdsOpenedEvent) => void, "ondds-closed"?: (e: DdsClosedEvent) => void }
|
|
7
|
-
export type DapDSAccordionGroupType = HtmlType & Partial<Omit<DDS.DapDSAccordionGroup, 'children' | 'style'>>
|
|
8
|
-
export type DapDSAnchorHeadingType = HtmlType & Partial<Omit<DDS.DapDSAnchorHeading, 'children' | 'style'>>
|
|
9
|
-
export type DapDSAvatarGroupType = HtmlType & Partial<Omit<DDS.DapDSAvatarGroup, 'children' | 'style'>> & { "ondds-overflow-click"?: (e: DdsOverflowClickEvent) => void }
|
|
10
7
|
export type DapDSAvatarType = HtmlType & Partial<Omit<DDS.DapDSAvatar, 'children' | 'style'>> & { "ondds-load"?: (e: DdsLoadEvent) => void, "ondds-error"?: (e: DdsErrorEvent) => void }
|
|
11
|
-
export type
|
|
8
|
+
export type DapDSAvatarGroupType = HtmlType & Partial<Omit<DDS.DapDSAvatarGroup, 'children' | 'style'>> & { "ondds-overflow-click"?: (e: DdsOverflowClickEvent) => void }
|
|
12
9
|
export type DapDSBadgeType = HtmlType & Partial<Omit<DDS.DapDSBadge, 'children' | 'style'>>
|
|
10
|
+
export type DapDSBannerType = HtmlType & Partial<Omit<DDS.DapDSBanner, 'children' | 'style'>> & { "ondds-close"?: (e: DdsCloseEvent) => void }
|
|
11
|
+
export type DapDSAccordionGroupType = HtmlType & Partial<Omit<DDS.DapDSAccordionGroup, 'children' | 'style'>>
|
|
12
|
+
export type DapDSAnchorHeadingType = HtmlType & Partial<Omit<DDS.DapDSAnchorHeading, 'children' | 'style'>>
|
|
13
13
|
export type DapDSBreadcrumbType = HtmlType & Partial<Omit<DDS.DapDSBreadcrumb, 'children' | 'style'>>
|
|
14
14
|
export type DapDSBreadcrumbItemType = HtmlType & Partial<Omit<DDS.DapDSBreadcrumbItem, 'children' | 'style'>>
|
|
15
15
|
export type DapDSButtonType = HtmlType & Partial<Omit<DDS.DapDSButton, 'children' | 'style'>> & { "ondds-loading-timeout"?: (e: DdsLoadingTimeoutEvent) => void }
|