dap-design-system 0.57.1 → 0.57.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/sidenav/sidenav.component.d.ts +1 -0
- package/dist/{components-C2yXmzb-.js → components-Cozi3ruX.js} +673 -658
- package/dist/{components-C2yXmzb-.js.map → components-Cozi3ruX.js.map} +1 -1
- package/dist/components.js +1 -1
- package/dist/dds.js +1 -1
- package/dist/manifest/types/vue/index.d.ts +204 -204
- package/dist/manifest/vscode.html-custom-data.json +139 -139
- package/dist/manifest/web-types.json +411 -411
- package/dist/react/index.d.ts +7 -7
- package/dist/react-types.ts +7 -7
- package/dist/react.js +78 -78
- package/dist/react.js.map +1 -1
- package/package.json +1 -1
|
@@ -113,72 +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
116
|
{
|
|
183
117
|
"name": "dap-ds-avatar",
|
|
184
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.",
|
|
@@ -336,6 +270,132 @@
|
|
|
336
270
|
]
|
|
337
271
|
}
|
|
338
272
|
},
|
|
273
|
+
{
|
|
274
|
+
"name": "dap-ds-anchor-heading",
|
|
275
|
+
"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.",
|
|
276
|
+
"doc-url": "",
|
|
277
|
+
"attributes": [
|
|
278
|
+
{
|
|
279
|
+
"name": "variant",
|
|
280
|
+
"description": "The variant of the heading. Default is `h2`. Can be `h1`, `h2`, `h3`, `h4`, `h5`, or `h6`.",
|
|
281
|
+
"value": { "type": "HeadingVariant" }
|
|
282
|
+
},
|
|
283
|
+
{
|
|
284
|
+
"name": "label",
|
|
285
|
+
"description": "The label of the heading.",
|
|
286
|
+
"value": { "type": "string" }
|
|
287
|
+
}
|
|
288
|
+
],
|
|
289
|
+
"events": [],
|
|
290
|
+
"js": {
|
|
291
|
+
"properties": [
|
|
292
|
+
{ "name": "variant", "type": "HeadingVariant" },
|
|
293
|
+
{ "name": "label", "type": "string" },
|
|
294
|
+
{ "name": "elementId" },
|
|
295
|
+
{ "name": "anchorTitle" }
|
|
296
|
+
],
|
|
297
|
+
"events": []
|
|
298
|
+
}
|
|
299
|
+
},
|
|
300
|
+
{
|
|
301
|
+
"name": "dap-ds-accordion-group",
|
|
302
|
+
"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.",
|
|
303
|
+
"doc-url": "",
|
|
304
|
+
"attributes": [
|
|
305
|
+
{
|
|
306
|
+
"name": "autoClose",
|
|
307
|
+
"description": "Whether to close other accordions when one is opened.",
|
|
308
|
+
"value": { "type": "string", "default": "'true'" }
|
|
309
|
+
},
|
|
310
|
+
{
|
|
311
|
+
"name": "variant",
|
|
312
|
+
"description": "The variant of the accordion",
|
|
313
|
+
"value": {
|
|
314
|
+
"type": "'default' | 'collapsed' | 'clean' | 'clean-collapsed'",
|
|
315
|
+
"default": "'default'"
|
|
316
|
+
}
|
|
317
|
+
}
|
|
318
|
+
],
|
|
319
|
+
"slots": [
|
|
320
|
+
{ "name": "", "description": "The content of the accordion group." }
|
|
321
|
+
],
|
|
322
|
+
"events": [],
|
|
323
|
+
"js": {
|
|
324
|
+
"properties": [
|
|
325
|
+
{
|
|
326
|
+
"name": "autoClose",
|
|
327
|
+
"description": "Whether to close other accordions when one is opened.",
|
|
328
|
+
"type": "string"
|
|
329
|
+
},
|
|
330
|
+
{
|
|
331
|
+
"name": "variant",
|
|
332
|
+
"description": "The variant of the accordion",
|
|
333
|
+
"type": "'default' | 'collapsed' | 'clean' | 'clean-collapsed'"
|
|
334
|
+
}
|
|
335
|
+
],
|
|
336
|
+
"events": []
|
|
337
|
+
}
|
|
338
|
+
},
|
|
339
|
+
{
|
|
340
|
+
"name": "dap-ds-badge",
|
|
341
|
+
"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.",
|
|
342
|
+
"doc-url": "",
|
|
343
|
+
"attributes": [
|
|
344
|
+
{
|
|
345
|
+
"name": "type",
|
|
346
|
+
"description": "The type of the badge",
|
|
347
|
+
"value": {
|
|
348
|
+
"type": "'neutral' | 'brand' | 'info' | 'positive' | 'warning' | 'negative'",
|
|
349
|
+
"default": "'neutral'"
|
|
350
|
+
}
|
|
351
|
+
},
|
|
352
|
+
{
|
|
353
|
+
"name": "icon",
|
|
354
|
+
"description": "The icon of the badge, this is a name of a built in icon",
|
|
355
|
+
"value": { "type": "string | undefined" }
|
|
356
|
+
},
|
|
357
|
+
{
|
|
358
|
+
"name": "live",
|
|
359
|
+
"description": "Whether the badge represents dynamic content that should announce changes",
|
|
360
|
+
"value": { "type": "boolean", "default": "false" }
|
|
361
|
+
}
|
|
362
|
+
],
|
|
363
|
+
"slots": [
|
|
364
|
+
{ "name": "", "description": "The content of the badge." },
|
|
365
|
+
{ "name": "icon", "description": "The icon of the badge." }
|
|
366
|
+
],
|
|
367
|
+
"events": [],
|
|
368
|
+
"js": {
|
|
369
|
+
"properties": [
|
|
370
|
+
{
|
|
371
|
+
"name": "type",
|
|
372
|
+
"description": "The type of the badge",
|
|
373
|
+
"type": "'neutral' | 'brand' | 'info' | 'positive' | 'warning' | 'negative'"
|
|
374
|
+
},
|
|
375
|
+
{
|
|
376
|
+
"name": "icon",
|
|
377
|
+
"description": "The icon of the badge, this is a name of a built in icon",
|
|
378
|
+
"type": "string | undefined"
|
|
379
|
+
},
|
|
380
|
+
{
|
|
381
|
+
"name": "live",
|
|
382
|
+
"description": "Whether the badge represents dynamic content that should announce changes",
|
|
383
|
+
"type": "boolean"
|
|
384
|
+
},
|
|
385
|
+
{
|
|
386
|
+
"name": "size",
|
|
387
|
+
"description": "The size of the badge. Default is `sm`.",
|
|
388
|
+
"type": "'sm' | 'lg'"
|
|
389
|
+
},
|
|
390
|
+
{
|
|
391
|
+
"name": "sizeMap",
|
|
392
|
+
"description": "Responsive size map (e.g. \"md:lg\").",
|
|
393
|
+
"type": "string"
|
|
394
|
+
}
|
|
395
|
+
],
|
|
396
|
+
"events": []
|
|
397
|
+
}
|
|
398
|
+
},
|
|
339
399
|
{
|
|
340
400
|
"name": "dap-ds-avatar-group",
|
|
341
401
|
"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.",
|
|
@@ -435,66 +495,6 @@
|
|
|
435
495
|
]
|
|
436
496
|
}
|
|
437
497
|
},
|
|
438
|
-
{
|
|
439
|
-
"name": "dap-ds-badge",
|
|
440
|
-
"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.",
|
|
441
|
-
"doc-url": "",
|
|
442
|
-
"attributes": [
|
|
443
|
-
{
|
|
444
|
-
"name": "type",
|
|
445
|
-
"description": "The type of the badge",
|
|
446
|
-
"value": {
|
|
447
|
-
"type": "'neutral' | 'brand' | 'info' | 'positive' | 'warning' | 'negative'",
|
|
448
|
-
"default": "'neutral'"
|
|
449
|
-
}
|
|
450
|
-
},
|
|
451
|
-
{
|
|
452
|
-
"name": "icon",
|
|
453
|
-
"description": "The icon of the badge, this is a name of a built in icon",
|
|
454
|
-
"value": { "type": "string | undefined" }
|
|
455
|
-
},
|
|
456
|
-
{
|
|
457
|
-
"name": "live",
|
|
458
|
-
"description": "Whether the badge represents dynamic content that should announce changes",
|
|
459
|
-
"value": { "type": "boolean", "default": "false" }
|
|
460
|
-
}
|
|
461
|
-
],
|
|
462
|
-
"slots": [
|
|
463
|
-
{ "name": "", "description": "The content of the badge." },
|
|
464
|
-
{ "name": "icon", "description": "The icon of the badge." }
|
|
465
|
-
],
|
|
466
|
-
"events": [],
|
|
467
|
-
"js": {
|
|
468
|
-
"properties": [
|
|
469
|
-
{
|
|
470
|
-
"name": "type",
|
|
471
|
-
"description": "The type of the badge",
|
|
472
|
-
"type": "'neutral' | 'brand' | 'info' | 'positive' | 'warning' | 'negative'"
|
|
473
|
-
},
|
|
474
|
-
{
|
|
475
|
-
"name": "icon",
|
|
476
|
-
"description": "The icon of the badge, this is a name of a built in icon",
|
|
477
|
-
"type": "string | undefined"
|
|
478
|
-
},
|
|
479
|
-
{
|
|
480
|
-
"name": "live",
|
|
481
|
-
"description": "Whether the badge represents dynamic content that should announce changes",
|
|
482
|
-
"type": "boolean"
|
|
483
|
-
},
|
|
484
|
-
{
|
|
485
|
-
"name": "size",
|
|
486
|
-
"description": "The size of the badge. Default is `sm`.",
|
|
487
|
-
"type": "'sm' | 'lg'"
|
|
488
|
-
},
|
|
489
|
-
{
|
|
490
|
-
"name": "sizeMap",
|
|
491
|
-
"description": "Responsive size map (e.g. \"md:lg\").",
|
|
492
|
-
"type": "string"
|
|
493
|
-
}
|
|
494
|
-
],
|
|
495
|
-
"events": []
|
|
496
|
-
}
|
|
497
|
-
},
|
|
498
498
|
{
|
|
499
499
|
"name": "dap-ds-banner",
|
|
500
500
|
"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.",
|
|
@@ -1228,203 +1228,8 @@
|
|
|
1228
1228
|
}
|
|
1229
1229
|
},
|
|
1230
1230
|
{
|
|
1231
|
-
"name": "dap-ds-
|
|
1232
|
-
"description": "A
|
|
1233
|
-
"doc-url": "",
|
|
1234
|
-
"attributes": [
|
|
1235
|
-
{
|
|
1236
|
-
"name": "indeterminate",
|
|
1237
|
-
"description": "Whether the checkbox is indeterminate",
|
|
1238
|
-
"value": { "type": "boolean", "default": "false" }
|
|
1239
|
-
},
|
|
1240
|
-
{
|
|
1241
|
-
"name": "preventDefault",
|
|
1242
|
-
"description": "Whether the checkbox should prevent the default action",
|
|
1243
|
-
"value": { "type": "boolean", "default": "false" }
|
|
1244
|
-
},
|
|
1245
|
-
{
|
|
1246
|
-
"name": "border",
|
|
1247
|
-
"description": "This sets up border around the checkbox, when true.",
|
|
1248
|
-
"value": { "type": "boolean", "default": "false" }
|
|
1249
|
-
},
|
|
1250
|
-
{
|
|
1251
|
-
"name": "readonly",
|
|
1252
|
-
"description": "Whether the checkbox is readonly (cannot be changed but value is submitted with form).",
|
|
1253
|
-
"value": { "type": "boolean", "default": "false" }
|
|
1254
|
-
},
|
|
1255
|
-
{
|
|
1256
|
-
"name": "type",
|
|
1257
|
-
"description": "The type of the checkbox",
|
|
1258
|
-
"value": {
|
|
1259
|
-
"type": "'normal' | 'background'",
|
|
1260
|
-
"default": "'normal'"
|
|
1261
|
-
}
|
|
1262
|
-
}
|
|
1263
|
-
],
|
|
1264
|
-
"events": [
|
|
1265
|
-
{
|
|
1266
|
-
"name": "dds-change",
|
|
1267
|
-
"type": "{ checked: boolean, indeterminate: boolean, value: string, disabled: boolean, readonly: boolean, type: 'checkbox' }",
|
|
1268
|
-
"description": "Fired when the checkbox is checked or unchecked."
|
|
1269
|
-
},
|
|
1270
|
-
{
|
|
1271
|
-
"name": "dds-blur",
|
|
1272
|
-
"type": "{ void }",
|
|
1273
|
-
"description": "Emitted when the checkbox loses focus."
|
|
1274
|
-
},
|
|
1275
|
-
{
|
|
1276
|
-
"name": "dds-focus",
|
|
1277
|
-
"type": "{ void }",
|
|
1278
|
-
"description": "Emitted when the checkbox gains focus."
|
|
1279
|
-
},
|
|
1280
|
-
{
|
|
1281
|
-
"name": "dds-input",
|
|
1282
|
-
"type": "{ checked: boolean, indeterminate: boolean, value: string, disabled: boolean, readonly: boolean }",
|
|
1283
|
-
"description": "Emitted when the checkbox receives input."
|
|
1284
|
-
}
|
|
1285
|
-
],
|
|
1286
|
-
"js": {
|
|
1287
|
-
"properties": [
|
|
1288
|
-
{
|
|
1289
|
-
"name": "indeterminate",
|
|
1290
|
-
"description": "Whether the checkbox is indeterminate",
|
|
1291
|
-
"type": "boolean"
|
|
1292
|
-
},
|
|
1293
|
-
{
|
|
1294
|
-
"name": "preventDefault",
|
|
1295
|
-
"description": "Whether the checkbox should prevent the default action",
|
|
1296
|
-
"type": "boolean"
|
|
1297
|
-
},
|
|
1298
|
-
{
|
|
1299
|
-
"name": "border",
|
|
1300
|
-
"description": "This sets up border around the checkbox, when true.",
|
|
1301
|
-
"type": "boolean"
|
|
1302
|
-
},
|
|
1303
|
-
{
|
|
1304
|
-
"name": "readonly",
|
|
1305
|
-
"description": "Whether the checkbox is readonly (cannot be changed but value is submitted with form).",
|
|
1306
|
-
"type": "boolean"
|
|
1307
|
-
},
|
|
1308
|
-
{
|
|
1309
|
-
"name": "type",
|
|
1310
|
-
"description": "The type of the checkbox",
|
|
1311
|
-
"type": "'normal' | 'background'"
|
|
1312
|
-
},
|
|
1313
|
-
{ "name": "focusElement", "type": "HTMLInputElement" },
|
|
1314
|
-
{ "name": "feedbackId" },
|
|
1315
|
-
{
|
|
1316
|
-
"name": "name",
|
|
1317
|
-
"description": "The name of the checkbox.",
|
|
1318
|
-
"type": "string"
|
|
1319
|
-
},
|
|
1320
|
-
{
|
|
1321
|
-
"name": "value",
|
|
1322
|
-
"description": "The value of the checkbox.",
|
|
1323
|
-
"type": "string"
|
|
1324
|
-
},
|
|
1325
|
-
{
|
|
1326
|
-
"name": "checked",
|
|
1327
|
-
"description": "Whether the checkbox is checked.",
|
|
1328
|
-
"type": "boolean"
|
|
1329
|
-
},
|
|
1330
|
-
{
|
|
1331
|
-
"name": "label",
|
|
1332
|
-
"description": "The label of the checkbox.",
|
|
1333
|
-
"type": "string"
|
|
1334
|
-
},
|
|
1335
|
-
{
|
|
1336
|
-
"name": "description",
|
|
1337
|
-
"description": "The description of the checkbox.",
|
|
1338
|
-
"type": "string"
|
|
1339
|
-
},
|
|
1340
|
-
{
|
|
1341
|
-
"name": "disabled",
|
|
1342
|
-
"description": "Whether the checkbox is disabled.",
|
|
1343
|
-
"type": "boolean"
|
|
1344
|
-
},
|
|
1345
|
-
{
|
|
1346
|
-
"name": "required",
|
|
1347
|
-
"description": "Whether the checkbox is required.",
|
|
1348
|
-
"type": "boolean"
|
|
1349
|
-
},
|
|
1350
|
-
{
|
|
1351
|
-
"name": "size",
|
|
1352
|
-
"description": "The size of the checkbox. Default is 'sm'.",
|
|
1353
|
-
"type": "'xs' | 'sm' | 'lg'"
|
|
1354
|
-
},
|
|
1355
|
-
{
|
|
1356
|
-
"name": "sizeMap",
|
|
1357
|
-
"description": "Responsive size map (e.g. \"md:lg\").",
|
|
1358
|
-
"type": "string"
|
|
1359
|
-
},
|
|
1360
|
-
{
|
|
1361
|
-
"name": "labelPlacement",
|
|
1362
|
-
"description": "The placement of the label.",
|
|
1363
|
-
"type": "'left' | 'right'"
|
|
1364
|
-
},
|
|
1365
|
-
{
|
|
1366
|
-
"name": "descriptionPlacement",
|
|
1367
|
-
"description": "The placement of the description.",
|
|
1368
|
-
"type": "'top' | 'bottom'"
|
|
1369
|
-
},
|
|
1370
|
-
{
|
|
1371
|
-
"name": "subtle",
|
|
1372
|
-
"description": "The weight of the label.",
|
|
1373
|
-
"type": "boolean"
|
|
1374
|
-
},
|
|
1375
|
-
{
|
|
1376
|
-
"name": "feedback",
|
|
1377
|
-
"description": "The feedback of the checkbox.",
|
|
1378
|
-
"type": "string"
|
|
1379
|
-
},
|
|
1380
|
-
{
|
|
1381
|
-
"name": "feedbackType",
|
|
1382
|
-
"description": "The feedback type of the checkbox.",
|
|
1383
|
-
"type": "'negative' | 'positive' | 'warning'"
|
|
1384
|
-
},
|
|
1385
|
-
{
|
|
1386
|
-
"name": "invalid",
|
|
1387
|
-
"description": "The invalid state of the checkbox.",
|
|
1388
|
-
"type": "boolean"
|
|
1389
|
-
},
|
|
1390
|
-
{
|
|
1391
|
-
"name": "optional",
|
|
1392
|
-
"description": "The optional state of the checkbox.",
|
|
1393
|
-
"type": "boolean"
|
|
1394
|
-
},
|
|
1395
|
-
{
|
|
1396
|
-
"name": "optionalLabel",
|
|
1397
|
-
"description": "The optional label of the checkbox.",
|
|
1398
|
-
"type": "string"
|
|
1399
|
-
}
|
|
1400
|
-
],
|
|
1401
|
-
"events": [
|
|
1402
|
-
{
|
|
1403
|
-
"name": "dds-change",
|
|
1404
|
-
"type": "{ checked: boolean, indeterminate: boolean, value: string, disabled: boolean, readonly: boolean, type: 'checkbox' }",
|
|
1405
|
-
"description": "Fired when the checkbox is checked or unchecked."
|
|
1406
|
-
},
|
|
1407
|
-
{
|
|
1408
|
-
"name": "dds-blur",
|
|
1409
|
-
"type": "{ void }",
|
|
1410
|
-
"description": "Emitted when the checkbox loses focus."
|
|
1411
|
-
},
|
|
1412
|
-
{
|
|
1413
|
-
"name": "dds-focus",
|
|
1414
|
-
"type": "{ void }",
|
|
1415
|
-
"description": "Emitted when the checkbox gains focus."
|
|
1416
|
-
},
|
|
1417
|
-
{
|
|
1418
|
-
"name": "dds-input",
|
|
1419
|
-
"type": "{ checked: boolean, indeterminate: boolean, value: string, disabled: boolean, readonly: boolean }",
|
|
1420
|
-
"description": "Emitted when the checkbox receives input."
|
|
1421
|
-
}
|
|
1422
|
-
]
|
|
1423
|
-
}
|
|
1424
|
-
},
|
|
1425
|
-
{
|
|
1426
|
-
"name": "dap-ds-card-actions",
|
|
1427
|
-
"description": "A card actions is a container for actions in a card.\n---\n\n\n### **Slots:**\n - _default_ - The content of the card actions.\n\n### **CSS Properties:**\n - **--dds-card-actions-gap** - The gap between items in the card actions. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-card-actions-padding-lg** - The padding for large size card actions. (default: var(--dds-spacing-600)) _(default: undefined)_\n- **--dds-card-actions-padding-md** - The padding for medium size card actions. (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-card-actions-padding-sm** - The padding for small size card actions. (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-card-actions-margin-lg** - The margin for large size card actions spacing. (default: var(--dds-spacing-600)) _(default: undefined)_\n- **--dds-card-actions-margin-md** - The margin for medium size card actions spacing. (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-card-actions-margin-sm** - The margin for small size card actions spacing. (default: var(--dds-spacing-400)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main card actions container.",
|
|
1231
|
+
"name": "dap-ds-card-actions",
|
|
1232
|
+
"description": "A card actions is a container for actions in a card.\n---\n\n\n### **Slots:**\n - _default_ - The content of the card actions.\n\n### **CSS Properties:**\n - **--dds-card-actions-gap** - The gap between items in the card actions. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-card-actions-padding-lg** - The padding for large size card actions. (default: var(--dds-spacing-600)) _(default: undefined)_\n- **--dds-card-actions-padding-md** - The padding for medium size card actions. (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-card-actions-padding-sm** - The padding for small size card actions. (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-card-actions-margin-lg** - The margin for large size card actions spacing. (default: var(--dds-spacing-600)) _(default: undefined)_\n- **--dds-card-actions-margin-md** - The margin for medium size card actions spacing. (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-card-actions-margin-sm** - The margin for small size card actions spacing. (default: var(--dds-spacing-400)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main card actions container.",
|
|
1428
1233
|
"doc-url": "",
|
|
1429
1234
|
"attributes": [],
|
|
1430
1235
|
"slots": [
|
|
@@ -1642,120 +1447,315 @@
|
|
|
1642
1447
|
}
|
|
1643
1448
|
},
|
|
1644
1449
|
{
|
|
1645
|
-
"name": "dap-ds-card",
|
|
1646
|
-
"description": "A card is a container for content, actions, and images in a consistent format.\n---\n\n\n### **Slots:**\n - _default_ - The content of the card.\n\n### **CSS Properties:**\n - **--dds-card-padding** - The padding of the card. (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-card-border-radius** - The border radius of the card. (default: var(--dds-radius-large)) _(default: undefined)_\n- **--dds-card-border-width** - The border width of the card. (default: var(--dds-border-width-base)) _(default: undefined)_\n- **--dds-card-border-color** - The border color of the card. (default: var(--dds-border-neutral-divider)) _(default: undefined)_\n- **--dds-card-background** - The background color of the card. (default: var(--dds-background-neutral-base)) _(default: undefined)_\n- **--dds-card-hover-border-color** - The border color when hovering over the card. (default: var(--dds-border-brand-base)) _(default: undefined)_\n- **--dds-card-active-border-color** - The border color when the card is active. (default: var(--dds-border-brand-medium)) _(default: undefined)_\n- **--dds-card-shadow** - The box shadow of the card. (default: none) _(default: undefined)_\n- **--dds-card-hover-shadow** - The box shadow when hovering over the card. (default: none) _(default: undefined)_\n- **--dds-card-transition-duration** - The duration of the card's transitions. (default: var(--dds-transition-medium)) _(default: undefined)_\n- **--dds-card-transition-timing** - The timing function of the card's transitions. (default: var(--dds-easing-ease-in-out)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main card container.",
|
|
1450
|
+
"name": "dap-ds-card",
|
|
1451
|
+
"description": "A card is a container for content, actions, and images in a consistent format.\n---\n\n\n### **Slots:**\n - _default_ - The content of the card.\n\n### **CSS Properties:**\n - **--dds-card-padding** - The padding of the card. (default: var(--dds-spacing-400)) _(default: undefined)_\n- **--dds-card-border-radius** - The border radius of the card. (default: var(--dds-radius-large)) _(default: undefined)_\n- **--dds-card-border-width** - The border width of the card. (default: var(--dds-border-width-base)) _(default: undefined)_\n- **--dds-card-border-color** - The border color of the card. (default: var(--dds-border-neutral-divider)) _(default: undefined)_\n- **--dds-card-background** - The background color of the card. (default: var(--dds-background-neutral-base)) _(default: undefined)_\n- **--dds-card-hover-border-color** - The border color when hovering over the card. (default: var(--dds-border-brand-base)) _(default: undefined)_\n- **--dds-card-active-border-color** - The border color when the card is active. (default: var(--dds-border-brand-medium)) _(default: undefined)_\n- **--dds-card-shadow** - The box shadow of the card. (default: none) _(default: undefined)_\n- **--dds-card-hover-shadow** - The box shadow when hovering over the card. (default: none) _(default: undefined)_\n- **--dds-card-transition-duration** - The duration of the card's transitions. (default: var(--dds-transition-medium)) _(default: undefined)_\n- **--dds-card-transition-timing** - The timing function of the card's transitions. (default: var(--dds-easing-ease-in-out)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main card container.",
|
|
1452
|
+
"doc-url": "",
|
|
1453
|
+
"attributes": [
|
|
1454
|
+
{
|
|
1455
|
+
"name": "interactive",
|
|
1456
|
+
"description": "Whether the card is interactive. Default is false. If true, the card will be rendered as an anchor element.",
|
|
1457
|
+
"value": { "type": "boolean", "default": "false" }
|
|
1458
|
+
},
|
|
1459
|
+
{
|
|
1460
|
+
"name": "renderAs",
|
|
1461
|
+
"description": "The render as type of the card, only applicable when interactive.",
|
|
1462
|
+
"value": { "type": "'a' | 'button'", "default": "'a'" }
|
|
1463
|
+
},
|
|
1464
|
+
{
|
|
1465
|
+
"name": "disabled",
|
|
1466
|
+
"description": "Whether the card is disabled.",
|
|
1467
|
+
"value": { "type": "boolean", "default": "false" }
|
|
1468
|
+
},
|
|
1469
|
+
{
|
|
1470
|
+
"name": "noBorder",
|
|
1471
|
+
"description": "Removes the border around the card",
|
|
1472
|
+
"value": { "type": "boolean", "default": "false" }
|
|
1473
|
+
},
|
|
1474
|
+
{
|
|
1475
|
+
"name": "noPadding",
|
|
1476
|
+
"description": "Removes the padding around the card",
|
|
1477
|
+
"value": { "type": "boolean", "default": "false" }
|
|
1478
|
+
},
|
|
1479
|
+
{
|
|
1480
|
+
"name": "targetBlankText",
|
|
1481
|
+
"description": "The text for the target blank link, applicable when target is _blank. PRO TIP: Use parenthesis to wrap the text",
|
|
1482
|
+
"value": { "type": "string" }
|
|
1483
|
+
},
|
|
1484
|
+
{
|
|
1485
|
+
"name": "target",
|
|
1486
|
+
"description": "The link target of the card",
|
|
1487
|
+
"value": {
|
|
1488
|
+
"type": "'_blank' | '_self' | '_parent' | '_top'",
|
|
1489
|
+
"default": "'_self'"
|
|
1490
|
+
}
|
|
1491
|
+
},
|
|
1492
|
+
{
|
|
1493
|
+
"name": "href",
|
|
1494
|
+
"description": "The URL of the card.",
|
|
1495
|
+
"value": { "type": "string" }
|
|
1496
|
+
},
|
|
1497
|
+
{
|
|
1498
|
+
"name": "rel",
|
|
1499
|
+
"description": "The rel of the card link.",
|
|
1500
|
+
"value": { "type": "string", "default": "'noreferrer noopener'" }
|
|
1501
|
+
}
|
|
1502
|
+
],
|
|
1503
|
+
"slots": [{ "name": "", "description": "The content of the card." }],
|
|
1504
|
+
"events": [],
|
|
1505
|
+
"js": {
|
|
1506
|
+
"properties": [
|
|
1507
|
+
{
|
|
1508
|
+
"name": "interactive",
|
|
1509
|
+
"description": "Whether the card is interactive. Default is false. If true, the card will be rendered as an anchor element.",
|
|
1510
|
+
"type": "boolean"
|
|
1511
|
+
},
|
|
1512
|
+
{
|
|
1513
|
+
"name": "renderAs",
|
|
1514
|
+
"description": "The render as type of the card, only applicable when interactive.",
|
|
1515
|
+
"type": "'a' | 'button'"
|
|
1516
|
+
},
|
|
1517
|
+
{
|
|
1518
|
+
"name": "disabled",
|
|
1519
|
+
"description": "Whether the card is disabled.",
|
|
1520
|
+
"type": "boolean"
|
|
1521
|
+
},
|
|
1522
|
+
{
|
|
1523
|
+
"name": "noBorder",
|
|
1524
|
+
"description": "Removes the border around the card",
|
|
1525
|
+
"type": "boolean"
|
|
1526
|
+
},
|
|
1527
|
+
{
|
|
1528
|
+
"name": "noPadding",
|
|
1529
|
+
"description": "Removes the padding around the card",
|
|
1530
|
+
"type": "boolean"
|
|
1531
|
+
},
|
|
1532
|
+
{
|
|
1533
|
+
"name": "targetBlankText",
|
|
1534
|
+
"description": "The text for the target blank link, applicable when target is _blank. PRO TIP: Use parenthesis to wrap the text",
|
|
1535
|
+
"type": "string"
|
|
1536
|
+
},
|
|
1537
|
+
{
|
|
1538
|
+
"name": "target",
|
|
1539
|
+
"description": "The link target of the card",
|
|
1540
|
+
"type": "'_blank' | '_self' | '_parent' | '_top'"
|
|
1541
|
+
},
|
|
1542
|
+
{
|
|
1543
|
+
"name": "href",
|
|
1544
|
+
"description": "The URL of the card.",
|
|
1545
|
+
"type": "string"
|
|
1546
|
+
},
|
|
1547
|
+
{
|
|
1548
|
+
"name": "rel",
|
|
1549
|
+
"description": "The rel of the card link.",
|
|
1550
|
+
"type": "string"
|
|
1551
|
+
},
|
|
1552
|
+
{
|
|
1553
|
+
"name": "size",
|
|
1554
|
+
"description": "The size of the card. Default is `sm`.",
|
|
1555
|
+
"type": "'sm' | 'md' | 'lg'"
|
|
1556
|
+
},
|
|
1557
|
+
{
|
|
1558
|
+
"name": "sizeMap",
|
|
1559
|
+
"description": "Responsive size map (e.g. \"md:lg\").",
|
|
1560
|
+
"type": "string"
|
|
1561
|
+
}
|
|
1562
|
+
],
|
|
1563
|
+
"events": []
|
|
1564
|
+
}
|
|
1565
|
+
},
|
|
1566
|
+
{
|
|
1567
|
+
"name": "dap-ds-checkbox",
|
|
1568
|
+
"description": "A checkbox is a form element that allows the user to select one or more options from a set.\n---\n\n\n### **Events:**\n - **dds-change** - Fired when the checkbox is checked or unchecked.\n- **dds-blur** - Emitted when the checkbox loses focus.\n- **dds-focus** - Emitted when the checkbox gains focus.\n- **dds-input** - Emitted when the checkbox receives input.\n\n### **Methods:**\n - **focus(): _void_** - Programmatically focuses the checkbox input element.\n- **blur(): _void_** - Programmatically blurs the checkbox input element.\n\n### **CSS Properties:**\n - **--dds-checkbox-size** - The size of the checkbox. (default: var(--dds-spacing-500)) _(default: undefined)_\n- **--dds-checkbox-border-width** - The border width of the checkbox. (default: var(--dds-border-width-large)) _(default: undefined)_\n- **--dds-checkbox-border-radius** - The border radius of the checkbox. (default: var(--dds-radius-small)) _(default: undefined)_\n- **--dds-checkbox-border-color** - The border color of the checkbox. (default: var(--dds-border-neutral-base)) _(default: undefined)_\n- **--dds-checkbox-background-color** - The background color of the checkbox. (default: transparent) _(default: undefined)_\n- **--dds-checkbox-icon-color** - The color of the checkbox icon. (default: var(--dds-button-primary-icon-enabled)) _(default: undefined)_\n- **--dds-checkbox-hover-border-color** - The border color when hovering over the checkbox. (default: var(--dds-border-neutral-medium)) _(default: undefined)_\n- **--dds-checkbox-hover-background-color** - The background color when hovering over the checkbox. (default: var(--dds-background-neutral-medium)) _(default: undefined)_\n- **--dds-checkbox-active-border-color** - The border color when the checkbox is active. (default: var(--dds-border-neutral-strong)) _(default: undefined)_\n- **--dds-checkbox-active-background-color** - The background color when the checkbox is active. (default: var(--dds-background-neutral-strong)) _(default: undefined)_\n- **--dds-checkbox-checked-border-color** - The border color when the checkbox is checked. (default: var(--dds-background-brand-base-inverted)) _(default: undefined)_\n- **--dds-checkbox-checked-background-color** - The background color when the checkbox is checked. (default: var(--dds-background-brand-base-inverted)) _(default: undefined)_\n- **--dds-checkbox-checked-hover-border-color** - The border color when hovering over a checked checkbox. (default: var(--dds-background-brand-medium-inverted)) _(default: undefined)_\n- **--dds-checkbox-checked-hover-background-color** - The background color when hovering over a checked checkbox. (default: var(--dds-background-brand-medium-inverted)) _(default: undefined)_\n- **--dds-checkbox-checked-active-border-color** - The border color when a checked checkbox is active. (default: var(--dds-background-brand-strong-inverted)) _(default: undefined)_\n- **--dds-checkbox-checked-active-background-color** - The background color when a checked checkbox is active. (default: var(--dds-background-brand-strong-inverted)) _(default: undefined)_\n- **--dds-checkbox-invalid-border-color** - The border color when the checkbox is invalid. (default: var(--dds-border-negative-base)) _(default: undefined)_\n- **--dds-checkbox-invalid-background-color** - The background color when the checkbox is invalid. (default: var(--dds-background-negative-base)) _(default: undefined)_\n- **--dds-checkbox-invalid-hover-border-color** - The border color when hovering over an invalid checkbox. (default: var(--dds-border-negative-medium)) _(default: undefined)_\n- **--dds-checkbox-invalid-hover-background-color** - The background color when hovering over an invalid checkbox. (default: var(--dds-background-negative-medium)) _(default: undefined)_\n- **--dds-checkbox-invalid-active-border-color** - The border color when an invalid checkbox is active. (default: var(--dds-border-negative-strong)) _(default: undefined)_\n- **--dds-checkbox-invalid-active-background-color** - The background color when an invalid checkbox is active. (default: var(--dds-background-negative-strong)) _(default: undefined)_\n- **--dds-checkbox-disabled-border-color** - The border color when the checkbox is disabled. (default: var(--dds-button-primary-background-disabled)) _(default: undefined)_\n- **--dds-checkbox-disabled-background-color** - The background color when the checkbox is disabled. (default: var(--dds-button-primary-background-disabled)) _(default: undefined)_\n- **--dds-checkbox-disabled-icon-color** - The color of the checkbox icon when disabled. (default: var(--dds-button-primary-icon-disabled)) _(default: undefined)_\n- **--dds-checkbox-readonly-border-color** - The border color when the checkbox is readonly. (default: var(--dds-border-neutral-subtle)) _(default: undefined)_\n- **--dds-checkbox-readonly-background-color** - The background color when the checkbox is readonly. (default: var(--dds-background-neutral-subtle)) _(default: undefined)_\n- **--dds-checkbox-readonly-icon-color** - The color of the checkbox icon when readonly. (default: var(--dds-text-neutral-base)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main checkbox container.\n- **label** - The label of the checkbox.\n- **input** - The input of the checkbox.\n- **control** - The control of the checkbox.\n- **icon** - The icon of the checkbox.\n- **icon-base** - The base icon container.\n- **label-container** - The label container of the checkbox.\n- **description** - The description of the checkbox.\n- **readonly** - The readonly state of the checkbox.",
|
|
1647
1569
|
"doc-url": "",
|
|
1648
1570
|
"attributes": [
|
|
1649
1571
|
{
|
|
1650
|
-
"name": "
|
|
1651
|
-
"description": "Whether the
|
|
1572
|
+
"name": "indeterminate",
|
|
1573
|
+
"description": "Whether the checkbox is indeterminate",
|
|
1652
1574
|
"value": { "type": "boolean", "default": "false" }
|
|
1653
1575
|
},
|
|
1654
1576
|
{
|
|
1655
|
-
"name": "
|
|
1656
|
-
"description": "
|
|
1657
|
-
"value": { "type": "'a' | 'button'", "default": "'a'" }
|
|
1658
|
-
},
|
|
1659
|
-
{
|
|
1660
|
-
"name": "disabled",
|
|
1661
|
-
"description": "Whether the card is disabled.",
|
|
1577
|
+
"name": "preventDefault",
|
|
1578
|
+
"description": "Whether the checkbox should prevent the default action",
|
|
1662
1579
|
"value": { "type": "boolean", "default": "false" }
|
|
1663
1580
|
},
|
|
1664
1581
|
{
|
|
1665
|
-
"name": "
|
|
1666
|
-
"description": "
|
|
1582
|
+
"name": "border",
|
|
1583
|
+
"description": "This sets up border around the checkbox, when true.",
|
|
1667
1584
|
"value": { "type": "boolean", "default": "false" }
|
|
1668
1585
|
},
|
|
1669
1586
|
{
|
|
1670
|
-
"name": "
|
|
1671
|
-
"description": "
|
|
1587
|
+
"name": "readonly",
|
|
1588
|
+
"description": "Whether the checkbox is readonly (cannot be changed but value is submitted with form).",
|
|
1672
1589
|
"value": { "type": "boolean", "default": "false" }
|
|
1673
1590
|
},
|
|
1674
1591
|
{
|
|
1675
|
-
"name": "
|
|
1676
|
-
"description": "The
|
|
1677
|
-
"value": { "type": "string" }
|
|
1678
|
-
},
|
|
1679
|
-
{
|
|
1680
|
-
"name": "target",
|
|
1681
|
-
"description": "The link target of the card",
|
|
1592
|
+
"name": "type",
|
|
1593
|
+
"description": "The type of the checkbox",
|
|
1682
1594
|
"value": {
|
|
1683
|
-
"type": "'
|
|
1684
|
-
"default": "'
|
|
1595
|
+
"type": "'normal' | 'background'",
|
|
1596
|
+
"default": "'normal'"
|
|
1685
1597
|
}
|
|
1598
|
+
}
|
|
1599
|
+
],
|
|
1600
|
+
"events": [
|
|
1601
|
+
{
|
|
1602
|
+
"name": "dds-change",
|
|
1603
|
+
"type": "{ checked: boolean, indeterminate: boolean, value: string, disabled: boolean, readonly: boolean, type: 'checkbox' }",
|
|
1604
|
+
"description": "Fired when the checkbox is checked or unchecked."
|
|
1686
1605
|
},
|
|
1687
1606
|
{
|
|
1688
|
-
"name": "
|
|
1689
|
-
"
|
|
1690
|
-
"
|
|
1607
|
+
"name": "dds-blur",
|
|
1608
|
+
"type": "{ void }",
|
|
1609
|
+
"description": "Emitted when the checkbox loses focus."
|
|
1691
1610
|
},
|
|
1692
1611
|
{
|
|
1693
|
-
"name": "
|
|
1694
|
-
"
|
|
1695
|
-
"
|
|
1612
|
+
"name": "dds-focus",
|
|
1613
|
+
"type": "{ void }",
|
|
1614
|
+
"description": "Emitted when the checkbox gains focus."
|
|
1615
|
+
},
|
|
1616
|
+
{
|
|
1617
|
+
"name": "dds-input",
|
|
1618
|
+
"type": "{ checked: boolean, indeterminate: boolean, value: string, disabled: boolean, readonly: boolean }",
|
|
1619
|
+
"description": "Emitted when the checkbox receives input."
|
|
1696
1620
|
}
|
|
1697
1621
|
],
|
|
1698
|
-
"slots": [{ "name": "", "description": "The content of the card." }],
|
|
1699
|
-
"events": [],
|
|
1700
1622
|
"js": {
|
|
1701
1623
|
"properties": [
|
|
1702
1624
|
{
|
|
1703
|
-
"name": "
|
|
1704
|
-
"description": "Whether the
|
|
1625
|
+
"name": "indeterminate",
|
|
1626
|
+
"description": "Whether the checkbox is indeterminate",
|
|
1705
1627
|
"type": "boolean"
|
|
1706
1628
|
},
|
|
1707
1629
|
{
|
|
1708
|
-
"name": "
|
|
1709
|
-
"description": "
|
|
1710
|
-
"type": "
|
|
1630
|
+
"name": "preventDefault",
|
|
1631
|
+
"description": "Whether the checkbox should prevent the default action",
|
|
1632
|
+
"type": "boolean"
|
|
1711
1633
|
},
|
|
1712
1634
|
{
|
|
1713
|
-
"name": "
|
|
1714
|
-
"description": "
|
|
1635
|
+
"name": "border",
|
|
1636
|
+
"description": "This sets up border around the checkbox, when true.",
|
|
1715
1637
|
"type": "boolean"
|
|
1716
1638
|
},
|
|
1717
1639
|
{
|
|
1718
|
-
"name": "
|
|
1719
|
-
"description": "
|
|
1640
|
+
"name": "readonly",
|
|
1641
|
+
"description": "Whether the checkbox is readonly (cannot be changed but value is submitted with form).",
|
|
1720
1642
|
"type": "boolean"
|
|
1721
1643
|
},
|
|
1722
1644
|
{
|
|
1723
|
-
"name": "
|
|
1724
|
-
"description": "
|
|
1725
|
-
"type": "
|
|
1645
|
+
"name": "type",
|
|
1646
|
+
"description": "The type of the checkbox",
|
|
1647
|
+
"type": "'normal' | 'background'"
|
|
1726
1648
|
},
|
|
1649
|
+
{ "name": "focusElement", "type": "HTMLInputElement" },
|
|
1650
|
+
{ "name": "feedbackId" },
|
|
1727
1651
|
{
|
|
1728
|
-
"name": "
|
|
1729
|
-
"description": "The
|
|
1652
|
+
"name": "name",
|
|
1653
|
+
"description": "The name of the checkbox.",
|
|
1730
1654
|
"type": "string"
|
|
1731
1655
|
},
|
|
1732
1656
|
{
|
|
1733
|
-
"name": "
|
|
1734
|
-
"description": "The
|
|
1735
|
-
"type": "
|
|
1657
|
+
"name": "value",
|
|
1658
|
+
"description": "The value of the checkbox.",
|
|
1659
|
+
"type": "string"
|
|
1736
1660
|
},
|
|
1737
1661
|
{
|
|
1738
|
-
"name": "
|
|
1739
|
-
"description": "
|
|
1662
|
+
"name": "checked",
|
|
1663
|
+
"description": "Whether the checkbox is checked.",
|
|
1664
|
+
"type": "boolean"
|
|
1665
|
+
},
|
|
1666
|
+
{
|
|
1667
|
+
"name": "label",
|
|
1668
|
+
"description": "The label of the checkbox.",
|
|
1740
1669
|
"type": "string"
|
|
1741
1670
|
},
|
|
1742
1671
|
{
|
|
1743
|
-
"name": "
|
|
1744
|
-
"description": "The
|
|
1672
|
+
"name": "description",
|
|
1673
|
+
"description": "The description of the checkbox.",
|
|
1745
1674
|
"type": "string"
|
|
1746
1675
|
},
|
|
1676
|
+
{
|
|
1677
|
+
"name": "disabled",
|
|
1678
|
+
"description": "Whether the checkbox is disabled.",
|
|
1679
|
+
"type": "boolean"
|
|
1680
|
+
},
|
|
1681
|
+
{
|
|
1682
|
+
"name": "required",
|
|
1683
|
+
"description": "Whether the checkbox is required.",
|
|
1684
|
+
"type": "boolean"
|
|
1685
|
+
},
|
|
1747
1686
|
{
|
|
1748
1687
|
"name": "size",
|
|
1749
|
-
"description": "The size of the
|
|
1750
|
-
"type": "'
|
|
1688
|
+
"description": "The size of the checkbox. Default is 'sm'.",
|
|
1689
|
+
"type": "'xs' | 'sm' | 'lg'"
|
|
1751
1690
|
},
|
|
1752
1691
|
{
|
|
1753
1692
|
"name": "sizeMap",
|
|
1754
1693
|
"description": "Responsive size map (e.g. \"md:lg\").",
|
|
1755
1694
|
"type": "string"
|
|
1695
|
+
},
|
|
1696
|
+
{
|
|
1697
|
+
"name": "labelPlacement",
|
|
1698
|
+
"description": "The placement of the label.",
|
|
1699
|
+
"type": "'left' | 'right'"
|
|
1700
|
+
},
|
|
1701
|
+
{
|
|
1702
|
+
"name": "descriptionPlacement",
|
|
1703
|
+
"description": "The placement of the description.",
|
|
1704
|
+
"type": "'top' | 'bottom'"
|
|
1705
|
+
},
|
|
1706
|
+
{
|
|
1707
|
+
"name": "subtle",
|
|
1708
|
+
"description": "The weight of the label.",
|
|
1709
|
+
"type": "boolean"
|
|
1710
|
+
},
|
|
1711
|
+
{
|
|
1712
|
+
"name": "feedback",
|
|
1713
|
+
"description": "The feedback of the checkbox.",
|
|
1714
|
+
"type": "string"
|
|
1715
|
+
},
|
|
1716
|
+
{
|
|
1717
|
+
"name": "feedbackType",
|
|
1718
|
+
"description": "The feedback type of the checkbox.",
|
|
1719
|
+
"type": "'negative' | 'positive' | 'warning'"
|
|
1720
|
+
},
|
|
1721
|
+
{
|
|
1722
|
+
"name": "invalid",
|
|
1723
|
+
"description": "The invalid state of the checkbox.",
|
|
1724
|
+
"type": "boolean"
|
|
1725
|
+
},
|
|
1726
|
+
{
|
|
1727
|
+
"name": "optional",
|
|
1728
|
+
"description": "The optional state of the checkbox.",
|
|
1729
|
+
"type": "boolean"
|
|
1730
|
+
},
|
|
1731
|
+
{
|
|
1732
|
+
"name": "optionalLabel",
|
|
1733
|
+
"description": "The optional label of the checkbox.",
|
|
1734
|
+
"type": "string"
|
|
1756
1735
|
}
|
|
1757
1736
|
],
|
|
1758
|
-
"events": [
|
|
1737
|
+
"events": [
|
|
1738
|
+
{
|
|
1739
|
+
"name": "dds-change",
|
|
1740
|
+
"type": "{ checked: boolean, indeterminate: boolean, value: string, disabled: boolean, readonly: boolean, type: 'checkbox' }",
|
|
1741
|
+
"description": "Fired when the checkbox is checked or unchecked."
|
|
1742
|
+
},
|
|
1743
|
+
{
|
|
1744
|
+
"name": "dds-blur",
|
|
1745
|
+
"type": "{ void }",
|
|
1746
|
+
"description": "Emitted when the checkbox loses focus."
|
|
1747
|
+
},
|
|
1748
|
+
{
|
|
1749
|
+
"name": "dds-focus",
|
|
1750
|
+
"type": "{ void }",
|
|
1751
|
+
"description": "Emitted when the checkbox gains focus."
|
|
1752
|
+
},
|
|
1753
|
+
{
|
|
1754
|
+
"name": "dds-input",
|
|
1755
|
+
"type": "{ checked: boolean, indeterminate: boolean, value: string, disabled: boolean, readonly: boolean }",
|
|
1756
|
+
"description": "Emitted when the checkbox receives input."
|
|
1757
|
+
}
|
|
1758
|
+
]
|
|
1759
1759
|
}
|
|
1760
1760
|
},
|
|
1761
1761
|
{
|
|
@@ -9519,6 +9519,34 @@
|
|
|
9519
9519
|
"events": []
|
|
9520
9520
|
}
|
|
9521
9521
|
},
|
|
9522
|
+
{
|
|
9523
|
+
"name": "dap-ds-timeline-item",
|
|
9524
|
+
"description": "A timeline is a graphical representation of a series of events.\n---\n\n\n### **Slots:**\n - _default_ - The default slot for the item content.\n\n### **CSS Properties:**\n - **--dds-timeline-position** - Position of the timeline dot (default: 28px) _(default: undefined)_\n- **--dds-timeline-connector-width** - Width of the timeline connector line (default: 1px) _(default: undefined)_\n- **--dds-timeline-connector-left-position** - Left position of the timeline connector (default: 5.5px) _(default: undefined)_\n- **--dds-timeline-dot-size** - Size of the timeline dot (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-timeline-item-margin-bottom** - Bottom margin of timeline items (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-timeline-item-padding-left** - Left padding of timeline items (default: var(--dds-spacing-400)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main timeline item container.\n- **connector** - The connector element between two timeline items.\n- **content** - The content of the timeline item.",
|
|
9525
|
+
"doc-url": "",
|
|
9526
|
+
"attributes": [],
|
|
9527
|
+
"slots": [
|
|
9528
|
+
{
|
|
9529
|
+
"name": "",
|
|
9530
|
+
"description": "The default slot for the item content."
|
|
9531
|
+
}
|
|
9532
|
+
],
|
|
9533
|
+
"events": [],
|
|
9534
|
+
"js": { "properties": [], "events": [] }
|
|
9535
|
+
},
|
|
9536
|
+
{
|
|
9537
|
+
"name": "dap-ds-timeline",
|
|
9538
|
+
"description": "A timeline is a graphical representation of a series of events.\n---\n\n\n### **Slots:**\n - _default_ - The default slot for the timeline items.\n\n### **CSS Parts:**\n - **base** - The main timeline container.",
|
|
9539
|
+
"doc-url": "",
|
|
9540
|
+
"attributes": [],
|
|
9541
|
+
"slots": [
|
|
9542
|
+
{
|
|
9543
|
+
"name": "",
|
|
9544
|
+
"description": "The default slot for the timeline items."
|
|
9545
|
+
}
|
|
9546
|
+
],
|
|
9547
|
+
"events": [],
|
|
9548
|
+
"js": { "properties": [], "events": [] }
|
|
9549
|
+
},
|
|
9522
9550
|
{
|
|
9523
9551
|
"name": "dap-ds-textarea",
|
|
9524
9552
|
"description": "A textarea is a multi-line text input field.\n---\n\n\n### **Events:**\n - **dds-count-change** - Fires when the count of the textarea changes.\n- **dds-change** - Fired when the textarea value changes.\n- **dds-input** - Fired when the textarea value changes.\n- **dds-keydown** - Fired when a key is pressed down.\n- **dds-blur** - Fired when the textarea loses focus.\n- **dds-focus** - Emitted when the textarea gains focus.\n- **dds-select** - Emitted when select text in textarea.\n\n### **Slots:**\n - **feedback-icon** - The custom icon of the feedback.\n\n### **CSS Properties:**\n - **--dds-textarea-min-rows** - Minimum number of rows in the textarea. (default: 2) _(default: undefined)_\n- **--dds-textarea-spacing** - Gap between elements in the textarea container. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-textarea-gap** - Gap between elements in the textarea container. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-textarea-margin-top** - Top margin of the textarea. (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-textarea-padding** - Padding of the textarea control. (default: var(--dds-spacing-200) var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-textarea-border-width** - Border width of the textarea. (default: var(--dds-border-width-base)) _(default: undefined)_\n- **--dds-textarea-border-color** - Border color of the textarea. (default: var(--dds-border-neutral-base)) _(default: undefined)_\n- **--dds-textarea-background** - Background color of the textarea. (default: var(--dds-fields-background-default)) _(default: undefined)_\n- **--dds-textarea-color** - Text color of the textarea. (default: var(--dds-text-neutral-base)) _(default: undefined)_\n- **--dds-textarea-border-radius** - Border radius of the textarea. (default: var(--dds-radius-base)) _(default: undefined)_\n- **--dds-textarea-disabled-bg** - Background color when disabled. (default: var(--dds-fields-background-disabled)) _(default: undefined)_\n- **--dds-textarea-disabled-color** - Text color when disabled. (default: var(--dds-text-neutral-disabled)) _(default: undefined)_\n- **--dds-textarea-readonly-bg** - Background color when readonly. (default: var(--dds-fields-background-read-only)) _(default: undefined)_\n- **--dds-textarea-readonly-color** - Text color when readonly. (default: var(--dds-text-neutral-subtle)) _(default: undefined)_\n- **--dds-textarea-error-border** - Border color when in error state. (default: var(--dds-border-negative-base)) _(default: undefined)_\n- **--dds-textarea-success-border** - Border color when in success state. (default: var(--dds-border-positive-base)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main textarea container.\n- **input** - The native input of the textarea.\n- **counter** - The counter of the textarea.\n- **counter-base** - The base of the counter.\n- **feedback** - The feedback of the textarea.\n- **feedback-base** - The base of the feedback.\n- **feedback-text** - The text of the feedback.\n- **feedback-icon** - The icon of the feedback.",
|
|
@@ -9762,34 +9790,6 @@
|
|
|
9762
9790
|
]
|
|
9763
9791
|
}
|
|
9764
9792
|
},
|
|
9765
|
-
{
|
|
9766
|
-
"name": "dap-ds-timeline-item",
|
|
9767
|
-
"description": "A timeline is a graphical representation of a series of events.\n---\n\n\n### **Slots:**\n - _default_ - The default slot for the item content.\n\n### **CSS Properties:**\n - **--dds-timeline-position** - Position of the timeline dot (default: 28px) _(default: undefined)_\n- **--dds-timeline-connector-width** - Width of the timeline connector line (default: 1px) _(default: undefined)_\n- **--dds-timeline-connector-left-position** - Left position of the timeline connector (default: 5.5px) _(default: undefined)_\n- **--dds-timeline-dot-size** - Size of the timeline dot (default: var(--dds-spacing-300)) _(default: undefined)_\n- **--dds-timeline-item-margin-bottom** - Bottom margin of timeline items (default: var(--dds-spacing-200)) _(default: undefined)_\n- **--dds-timeline-item-padding-left** - Left padding of timeline items (default: var(--dds-spacing-400)) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The main timeline item container.\n- **connector** - The connector element between two timeline items.\n- **content** - The content of the timeline item.",
|
|
9768
|
-
"doc-url": "",
|
|
9769
|
-
"attributes": [],
|
|
9770
|
-
"slots": [
|
|
9771
|
-
{
|
|
9772
|
-
"name": "",
|
|
9773
|
-
"description": "The default slot for the item content."
|
|
9774
|
-
}
|
|
9775
|
-
],
|
|
9776
|
-
"events": [],
|
|
9777
|
-
"js": { "properties": [], "events": [] }
|
|
9778
|
-
},
|
|
9779
|
-
{
|
|
9780
|
-
"name": "dap-ds-timeline",
|
|
9781
|
-
"description": "A timeline is a graphical representation of a series of events.\n---\n\n\n### **Slots:**\n - _default_ - The default slot for the timeline items.\n\n### **CSS Parts:**\n - **base** - The main timeline container.",
|
|
9782
|
-
"doc-url": "",
|
|
9783
|
-
"attributes": [],
|
|
9784
|
-
"slots": [
|
|
9785
|
-
{
|
|
9786
|
-
"name": "",
|
|
9787
|
-
"description": "The default slot for the timeline items."
|
|
9788
|
-
}
|
|
9789
|
-
],
|
|
9790
|
-
"events": [],
|
|
9791
|
-
"js": { "properties": [], "events": [] }
|
|
9792
|
-
},
|
|
9793
9793
|
{
|
|
9794
9794
|
"name": "dap-ds-time-grid",
|
|
9795
9795
|
"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.",
|
|
@@ -11399,7 +11399,7 @@
|
|
|
11399
11399
|
}
|
|
11400
11400
|
},
|
|
11401
11401
|
{
|
|
11402
|
-
"name": "dap-ds-icon-arrow-left-s-
|
|
11402
|
+
"name": "dap-ds-icon-arrow-left-s-line",
|
|
11403
11403
|
"description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
|
|
11404
11404
|
"doc-url": "",
|
|
11405
11405
|
"attributes": [
|
|
@@ -11452,7 +11452,7 @@
|
|
|
11452
11452
|
}
|
|
11453
11453
|
},
|
|
11454
11454
|
{
|
|
11455
|
-
"name": "dap-ds-icon-arrow-left-s-
|
|
11455
|
+
"name": "dap-ds-icon-arrow-left-s-fill",
|
|
11456
11456
|
"description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
|
|
11457
11457
|
"doc-url": "",
|
|
11458
11458
|
"attributes": [
|
|
@@ -15056,7 +15056,7 @@
|
|
|
15056
15056
|
}
|
|
15057
15057
|
},
|
|
15058
15058
|
{
|
|
15059
|
-
"name": "dap-ds-icon-
|
|
15059
|
+
"name": "dap-ds-icon-share-line",
|
|
15060
15060
|
"description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
|
|
15061
15061
|
"doc-url": "",
|
|
15062
15062
|
"attributes": [
|
|
@@ -15109,7 +15109,7 @@
|
|
|
15109
15109
|
}
|
|
15110
15110
|
},
|
|
15111
15111
|
{
|
|
15112
|
-
"name": "dap-ds-icon-
|
|
15112
|
+
"name": "dap-ds-icon-shield-check-fill",
|
|
15113
15113
|
"description": "An icon\n---\n\n\n### **CSS Parts:**\n - **base** - The main icon container.",
|
|
15114
15114
|
"doc-url": "",
|
|
15115
15115
|
"attributes": [
|