dap-design-system 0.35.11 → 0.35.13
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/dark.theme.css +2 -2
- package/dist/dds.d.ts +169 -0
- package/dist/dds.js +3274 -3054
- package/dist/dds.js.map +1 -1
- package/dist/high-contrast.theme.css +2 -2
- package/dist/light.theme.css +2 -2
- package/dist/manifest/types/vue/index.d.ts +231 -129
- package/dist/manifest/vscode.html-custom-data.json +239 -91
- package/dist/manifest/web-types.json +415 -153
- package/dist/react-types.ts +10 -6
- package/dist/react.d.ts +391 -146
- package/dist/react.js +465 -435
- package/dist/react.js.map +1 -1
- package/dist/variables/variables-dark.css +2 -1
- package/dist/variables/variables-high-contrast.css +2 -1
- package/dist/variables/variables-light.css +2 -1
- package/package.json +1 -1
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import type { DefineComponent } from "vue";
|
|
2
2
|
|
|
3
|
+
import type { DapDSAnchorHeading } from "../../components/anchor-heading/anchor-heading.component.js";
|
|
3
4
|
import type { DapDSAccordion } from "../../components/accordion/accordion.component.js";
|
|
4
|
-
import type { DapDSAvatar } from "../../components/avatar/avatar.component.js";
|
|
5
5
|
import type { DapDSBadge } from "../../components/badge/badge.component.js";
|
|
6
|
-
import type { DapDSAnchorHeading } from "../../components/anchor-heading/anchor-heading.component.js";
|
|
7
|
-
import type { DapDSAccordionGroup } from "../../components/accordion-group/accordion-group.component.js";
|
|
8
|
-
import type { DapDSBanner } from "../../components/banner/banner.component.js";
|
|
9
6
|
import type { DapDSBreadcrumb } from "../../components/breadcrumb/breadcrumb.component.js";
|
|
7
|
+
import type { DapDSBanner } from "../../components/banner/banner.component.js";
|
|
8
|
+
import type { DapDSAvatar } from "../../components/avatar/avatar.component.js";
|
|
10
9
|
import type { DapDSBreadcrumbItem } from "../../components/breadcrumb-item/breadcrumb-item.component.js";
|
|
10
|
+
import type { DapDSAccordionGroup } from "../../components/accordion-group/accordion-group.component.js";
|
|
11
11
|
import type { DapDSButton } from "../../components/button/button.component.js";
|
|
12
12
|
import type { DapDSCalendarCell } from "../../components/calendar-cell/calendar-cell.component.js";
|
|
13
13
|
import type { DapDSCalendar } from "../../components/calendar/calendar.component.js";
|
|
@@ -130,12 +130,27 @@ import type { SystemInformationFill } from "../../components/icon-information-fi
|
|
|
130
130
|
import type { SystemInformationLine } from "../../components/icon-information-line/icon-information-line.component.js";
|
|
131
131
|
import type { SystemLightbulbFill } from "../../components/icon-lightbulb-fill/icon-lightbulb-fill.component.js";
|
|
132
132
|
import type { SystemLoadingSpinner } from "../../components/icon-loading-spinner/icon-loading-spinner.component.js";
|
|
133
|
+
import type { SystemLockFill } from "../../components/icon-lock-fill/icon-lock-fill.component.js";
|
|
134
|
+
import type { SystemLockLine } from "../../components/icon-lock-line/icon-lock-line.component.js";
|
|
133
135
|
import type { SystemMenuLine } from "../../components/icon-menu-line/icon-menu-line.component.js";
|
|
134
136
|
import type { SystemMenuLineS } from "../../components/icon-menu-line-s/icon-menu-line-s.component.js";
|
|
135
137
|
import type { SystemSearchLine } from "../../components/icon-search-line/icon-search-line.component.js";
|
|
138
|
+
import type { SystemShieldCheckFill } from "../../components/icon-shield-check-fill/icon-shield-check-fill.component.js";
|
|
139
|
+
import type { SystemShieldCheckLine } from "../../components/icon-shield-check-line/icon-shield-check-line.component.js";
|
|
136
140
|
import type { SystemStarFill } from "../../components/icon-star-fill/icon-star-fill.component.js";
|
|
137
|
-
import type { SystemSubtractLine } from "../../components/icon-subtract-line/icon-subtract-line.component.js";
|
|
138
141
|
import type { SystemSubtractLine2 } from "../../components/icon-subtract-line2/icon-subtract-line2.component.js";
|
|
142
|
+
import type { SystemSubtractLine } from "../../components/icon-subtract-line/icon-subtract-line.component.js";
|
|
143
|
+
|
|
144
|
+
type DapDSAnchorHeadingProps = {
|
|
145
|
+
/** The variant of the heading. Default is `h2`. Can be `h1`, `h2`, `h3`, `h4`, `h5`, or `h6`. */
|
|
146
|
+
variant?: DapDSAnchorHeading["variant"];
|
|
147
|
+
/** The label of the heading. */
|
|
148
|
+
label?: DapDSAnchorHeading["label"];
|
|
149
|
+
/** */
|
|
150
|
+
elementId?: DapDSAnchorHeading["elementId"];
|
|
151
|
+
/** */
|
|
152
|
+
anchorTitle?: DapDSAnchorHeading["anchorTitle"];
|
|
153
|
+
};
|
|
139
154
|
|
|
140
155
|
type DapDSAccordionProps = {
|
|
141
156
|
/** The size of the accordion */
|
|
@@ -157,19 +172,6 @@ type DapDSAccordionProps = {
|
|
|
157
172
|
"ondds-closed"?: (e: CustomEvent<never>) => void;
|
|
158
173
|
};
|
|
159
174
|
|
|
160
|
-
type DapDSAvatarProps = {
|
|
161
|
-
/** The size of the avatar */
|
|
162
|
-
size?: DapDSAvatar["size"];
|
|
163
|
-
/** The source of the avatar. */
|
|
164
|
-
src?: DapDSAvatar["src"];
|
|
165
|
-
/** The alt text of the avatar. */
|
|
166
|
-
alt?: DapDSAvatar["alt"];
|
|
167
|
-
/** The width of the avatar. This will override the size. */
|
|
168
|
-
width?: DapDSAvatar["width"];
|
|
169
|
-
/** The height of the avatar. This will override the size. */
|
|
170
|
-
height?: DapDSAvatar["height"];
|
|
171
|
-
};
|
|
172
|
-
|
|
173
175
|
type DapDSBadgeProps = {
|
|
174
176
|
/** The type of the badge */
|
|
175
177
|
type?: DapDSBadge["type"];
|
|
@@ -179,25 +181,15 @@ type DapDSBadgeProps = {
|
|
|
179
181
|
icon?: DapDSBadge["icon"];
|
|
180
182
|
};
|
|
181
183
|
|
|
182
|
-
type
|
|
183
|
-
/**
|
|
184
|
-
|
|
185
|
-
/** The label of the heading. */
|
|
186
|
-
label?: DapDSAnchorHeading["label"];
|
|
187
|
-
/** */
|
|
188
|
-
elementId?: DapDSAnchorHeading["elementId"];
|
|
184
|
+
type DapDSBreadcrumbProps = {
|
|
185
|
+
/** @deprecated true - Inverted color style */
|
|
186
|
+
inverted?: DapDSBreadcrumb["inverted"];
|
|
189
187
|
/** */
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
autoClose?: DapDSAccordionGroup["autoClose"];
|
|
196
|
-
/** The variant of the accordion */
|
|
197
|
-
variant?: DapDSAccordionGroup["variant"];
|
|
198
|
-
|
|
199
|
-
/** Event fired when an accordion is opened or closed. */
|
|
200
|
-
"ondds-change"?: (e: CustomEvent<never>) => void;
|
|
188
|
+
variant?: DapDSBreadcrumb["variant"];
|
|
189
|
+
/** Mobile version of the breadcrumb */
|
|
190
|
+
mobile?: DapDSBreadcrumb["mobile"];
|
|
191
|
+
/** The aria-labelledby of the breadcrumb */
|
|
192
|
+
"aria-labelledby"?: DapDSBreadcrumb["ariaLabelledBy"];
|
|
201
193
|
};
|
|
202
194
|
|
|
203
195
|
type DapDSBannerProps = {
|
|
@@ -216,15 +208,17 @@ type DapDSBannerProps = {
|
|
|
216
208
|
"ondds-close"?: (e: CustomEvent<never>) => void;
|
|
217
209
|
};
|
|
218
210
|
|
|
219
|
-
type
|
|
220
|
-
/**
|
|
221
|
-
|
|
222
|
-
/**
|
|
223
|
-
|
|
224
|
-
/**
|
|
225
|
-
|
|
226
|
-
/** The
|
|
227
|
-
|
|
211
|
+
type DapDSAvatarProps = {
|
|
212
|
+
/** The size of the avatar */
|
|
213
|
+
size?: DapDSAvatar["size"];
|
|
214
|
+
/** The source of the avatar. */
|
|
215
|
+
src?: DapDSAvatar["src"];
|
|
216
|
+
/** The alt text of the avatar. */
|
|
217
|
+
alt?: DapDSAvatar["alt"];
|
|
218
|
+
/** The width of the avatar. This will override the size. */
|
|
219
|
+
width?: DapDSAvatar["width"];
|
|
220
|
+
/** The height of the avatar. This will override the size. */
|
|
221
|
+
height?: DapDSAvatar["height"];
|
|
228
222
|
};
|
|
229
223
|
|
|
230
224
|
type DapDSBreadcrumbItemProps = {
|
|
@@ -242,6 +236,16 @@ type DapDSBreadcrumbItemProps = {
|
|
|
242
236
|
variant?: DapDSBreadcrumbItem["variant"];
|
|
243
237
|
};
|
|
244
238
|
|
|
239
|
+
type DapDSAccordionGroupProps = {
|
|
240
|
+
/** Whether to close other accordions when one is opened. */
|
|
241
|
+
autoClose?: DapDSAccordionGroup["autoClose"];
|
|
242
|
+
/** The variant of the accordion */
|
|
243
|
+
variant?: DapDSAccordionGroup["variant"];
|
|
244
|
+
|
|
245
|
+
/** Event fired when an accordion is opened or closed. */
|
|
246
|
+
"ondds-change"?: (e: CustomEvent<never>) => void;
|
|
247
|
+
};
|
|
248
|
+
|
|
245
249
|
type DapDSButtonProps = {
|
|
246
250
|
/** The variant of the button */
|
|
247
251
|
variant?: DapDSButton["variant"];
|
|
@@ -1112,6 +1116,9 @@ type DapDSLinkProps = {
|
|
|
1112
1116
|
rel?: DapDSLink["rel"];
|
|
1113
1117
|
/** The download attribute of the link */
|
|
1114
1118
|
download?: DapDSLink["download"];
|
|
1119
|
+
|
|
1120
|
+
/** Emitted when the link is clicked. */
|
|
1121
|
+
"ondds-click"?: (e: CustomEvent<never>) => void;
|
|
1115
1122
|
};
|
|
1116
1123
|
|
|
1117
1124
|
type DapDSListItemProps = {
|
|
@@ -2773,6 +2780,32 @@ type SystemLoadingSpinnerProps = {
|
|
|
2773
2780
|
focusable?: SystemLoadingSpinner["focusable"];
|
|
2774
2781
|
};
|
|
2775
2782
|
|
|
2783
|
+
type SystemLockFillProps = {
|
|
2784
|
+
/** (optional) The width and height in pixels */
|
|
2785
|
+
size?: SystemLockFill["size"];
|
|
2786
|
+
/** (optional) Sets the icon color via the `fill` attribute */
|
|
2787
|
+
selected?: SystemLockFill["selected"];
|
|
2788
|
+
/** (optional) If `true` the SVG element will get `aria-hidden="true"` */
|
|
2789
|
+
decorative?: SystemLockFill["decorative"];
|
|
2790
|
+
/** (optional) When using the icon standalone, make it meaningful for accessibility */
|
|
2791
|
+
accessibilityTitle?: SystemLockFill["accessibilityTitle"];
|
|
2792
|
+
/** (optional) If `true` the icon can receive focus */
|
|
2793
|
+
focusable?: SystemLockFill["focusable"];
|
|
2794
|
+
};
|
|
2795
|
+
|
|
2796
|
+
type SystemLockLineProps = {
|
|
2797
|
+
/** (optional) The width and height in pixels */
|
|
2798
|
+
size?: SystemLockLine["size"];
|
|
2799
|
+
/** (optional) Sets the icon color via the `fill` attribute */
|
|
2800
|
+
selected?: SystemLockLine["selected"];
|
|
2801
|
+
/** (optional) If `true` the SVG element will get `aria-hidden="true"` */
|
|
2802
|
+
decorative?: SystemLockLine["decorative"];
|
|
2803
|
+
/** (optional) When using the icon standalone, make it meaningful for accessibility */
|
|
2804
|
+
accessibilityTitle?: SystemLockLine["accessibilityTitle"];
|
|
2805
|
+
/** (optional) If `true` the icon can receive focus */
|
|
2806
|
+
focusable?: SystemLockLine["focusable"];
|
|
2807
|
+
};
|
|
2808
|
+
|
|
2776
2809
|
type SystemMenuLineProps = {
|
|
2777
2810
|
/** (optional) The width and height in pixels */
|
|
2778
2811
|
size?: SystemMenuLine["size"];
|
|
@@ -2812,30 +2845,43 @@ type SystemSearchLineProps = {
|
|
|
2812
2845
|
focusable?: SystemSearchLine["focusable"];
|
|
2813
2846
|
};
|
|
2814
2847
|
|
|
2815
|
-
type
|
|
2848
|
+
type SystemShieldCheckFillProps = {
|
|
2816
2849
|
/** (optional) The width and height in pixels */
|
|
2817
|
-
size?:
|
|
2850
|
+
size?: SystemShieldCheckFill["size"];
|
|
2818
2851
|
/** (optional) Sets the icon color via the `fill` attribute */
|
|
2819
|
-
selected?:
|
|
2852
|
+
selected?: SystemShieldCheckFill["selected"];
|
|
2820
2853
|
/** (optional) If `true` the SVG element will get `aria-hidden="true"` */
|
|
2821
|
-
decorative?:
|
|
2854
|
+
decorative?: SystemShieldCheckFill["decorative"];
|
|
2822
2855
|
/** (optional) When using the icon standalone, make it meaningful for accessibility */
|
|
2823
|
-
accessibilityTitle?:
|
|
2856
|
+
accessibilityTitle?: SystemShieldCheckFill["accessibilityTitle"];
|
|
2824
2857
|
/** (optional) If `true` the icon can receive focus */
|
|
2825
|
-
focusable?:
|
|
2858
|
+
focusable?: SystemShieldCheckFill["focusable"];
|
|
2826
2859
|
};
|
|
2827
2860
|
|
|
2828
|
-
type
|
|
2861
|
+
type SystemShieldCheckLineProps = {
|
|
2829
2862
|
/** (optional) The width and height in pixels */
|
|
2830
|
-
size?:
|
|
2863
|
+
size?: SystemShieldCheckLine["size"];
|
|
2831
2864
|
/** (optional) Sets the icon color via the `fill` attribute */
|
|
2832
|
-
selected?:
|
|
2865
|
+
selected?: SystemShieldCheckLine["selected"];
|
|
2833
2866
|
/** (optional) If `true` the SVG element will get `aria-hidden="true"` */
|
|
2834
|
-
decorative?:
|
|
2867
|
+
decorative?: SystemShieldCheckLine["decorative"];
|
|
2835
2868
|
/** (optional) When using the icon standalone, make it meaningful for accessibility */
|
|
2836
|
-
accessibilityTitle?:
|
|
2869
|
+
accessibilityTitle?: SystemShieldCheckLine["accessibilityTitle"];
|
|
2837
2870
|
/** (optional) If `true` the icon can receive focus */
|
|
2838
|
-
focusable?:
|
|
2871
|
+
focusable?: SystemShieldCheckLine["focusable"];
|
|
2872
|
+
};
|
|
2873
|
+
|
|
2874
|
+
type SystemStarFillProps = {
|
|
2875
|
+
/** (optional) The width and height in pixels */
|
|
2876
|
+
size?: SystemStarFill["size"];
|
|
2877
|
+
/** (optional) Sets the icon color via the `fill` attribute */
|
|
2878
|
+
selected?: SystemStarFill["selected"];
|
|
2879
|
+
/** (optional) If `true` the SVG element will get `aria-hidden="true"` */
|
|
2880
|
+
decorative?: SystemStarFill["decorative"];
|
|
2881
|
+
/** (optional) When using the icon standalone, make it meaningful for accessibility */
|
|
2882
|
+
accessibilityTitle?: SystemStarFill["accessibilityTitle"];
|
|
2883
|
+
/** (optional) If `true` the icon can receive focus */
|
|
2884
|
+
focusable?: SystemStarFill["focusable"];
|
|
2839
2885
|
};
|
|
2840
2886
|
|
|
2841
2887
|
type SystemSubtractLine2Props = {
|
|
@@ -2851,7 +2897,39 @@ type SystemSubtractLine2Props = {
|
|
|
2851
2897
|
focusable?: SystemSubtractLine2["focusable"];
|
|
2852
2898
|
};
|
|
2853
2899
|
|
|
2900
|
+
type SystemSubtractLineProps = {
|
|
2901
|
+
/** (optional) The width and height in pixels */
|
|
2902
|
+
size?: SystemSubtractLine["size"];
|
|
2903
|
+
/** (optional) Sets the icon color via the `fill` attribute */
|
|
2904
|
+
selected?: SystemSubtractLine["selected"];
|
|
2905
|
+
/** (optional) If `true` the SVG element will get `aria-hidden="true"` */
|
|
2906
|
+
decorative?: SystemSubtractLine["decorative"];
|
|
2907
|
+
/** (optional) When using the icon standalone, make it meaningful for accessibility */
|
|
2908
|
+
accessibilityTitle?: SystemSubtractLine["accessibilityTitle"];
|
|
2909
|
+
/** (optional) If `true` the icon can receive focus */
|
|
2910
|
+
focusable?: SystemSubtractLine["focusable"];
|
|
2911
|
+
};
|
|
2912
|
+
|
|
2854
2913
|
export type CustomElements = {
|
|
2914
|
+
/**
|
|
2915
|
+
* Anchor heading is a heading with an anchor link.
|
|
2916
|
+
* ---
|
|
2917
|
+
*
|
|
2918
|
+
*
|
|
2919
|
+
* ### **CSS Properties:**
|
|
2920
|
+
* - **--dds-anchor-link-color** - The color of the anchor link. Default is the primary color. _(default: undefined)_
|
|
2921
|
+
* - **--dds-anchor-link-opacity** - The opacity of the anchor link when not hovered. Default is 0. _(default: undefined)_
|
|
2922
|
+
* - **--dds-anchor-link-hover-opacity** - The opacity of the anchor link when hovered. Default is 1. _(default: undefined)_
|
|
2923
|
+
* - **--dds-anchor-link-transition** - The transition property for the anchor link opacity. Default is 'opacity 0.2s ease-in-out'. _(default: undefined)_
|
|
2924
|
+
*
|
|
2925
|
+
* ### **CSS Parts:**
|
|
2926
|
+
* - **base** - The main anchor heading container.
|
|
2927
|
+
* - **link** - The link of the anchor heading. dap-ds-link element.
|
|
2928
|
+
* - **link-base** - The base of the link part.
|
|
2929
|
+
* - **text** - The text of the anchor heading.
|
|
2930
|
+
*/
|
|
2931
|
+
"dap-ds-anchor-heading": DefineComponent<DapDSAnchorHeadingProps>;
|
|
2932
|
+
|
|
2855
2933
|
/**
|
|
2856
2934
|
* An accordion is a vertically stacked list of interactive items that can be expanded or collapsed to reveal or hide content.
|
|
2857
2935
|
* ---
|
|
@@ -2900,30 +2978,6 @@ export type CustomElements = {
|
|
|
2900
2978
|
*/
|
|
2901
2979
|
"dap-ds-accordion": DefineComponent<DapDSAccordionProps>;
|
|
2902
2980
|
|
|
2903
|
-
/**
|
|
2904
|
-
* Avatar component can be used to display user profile images or icons, or illustrations.
|
|
2905
|
-
* ---
|
|
2906
|
-
*
|
|
2907
|
-
*
|
|
2908
|
-
* ### **CSS Properties:**
|
|
2909
|
-
* - **--dds-avatar-border-radius** - The border radius of the avatar. Default is the design system's rounded radius. _(default: undefined)_
|
|
2910
|
-
* - **--dds-avatar-background-color** - The background color of the avatar. Default is transparent. _(default: undefined)_
|
|
2911
|
-
* - **--dds-avatar-border-width** - The width of the avatar's border. Default is 0. _(default: undefined)_
|
|
2912
|
-
* - **--dds-avatar-border-color** - The color of the avatar's border. Default is transparent. _(default: undefined)_
|
|
2913
|
-
* - **--dds-avatar-border-style** - The style of the avatar's border. Default is solid. _(default: undefined)_
|
|
2914
|
-
* - **--dds-avatar-transition** - The transition property for the avatar. Default is 'all 0.2s ease-in-out'. _(default: undefined)_
|
|
2915
|
-
* - **--dds-avatar-size-lg** - The size of the large avatar. Default is the design system's spacing-2000. _(default: undefined)_
|
|
2916
|
-
* - **--dds-avatar-size-md** - The size of the medium avatar. Default is the design system's spacing-1600. _(default: undefined)_
|
|
2917
|
-
* - **--dds-avatar-size-sm** - The size of the small avatar. Default is the design system's spacing-1200. _(default: undefined)_
|
|
2918
|
-
* - **--dds-avatar-size-xs** - The size of the extra small avatar. Default is the design system's spacing-800. _(default: undefined)_
|
|
2919
|
-
* - **--dds-avatar-size-xxs** - The size of the extra extra small avatar. Default is the design system's spacing-600. _(default: undefined)_
|
|
2920
|
-
*
|
|
2921
|
-
* ### **CSS Parts:**
|
|
2922
|
-
* - **base** - The main avatar image container.
|
|
2923
|
-
* - **img** - The avatar image.
|
|
2924
|
-
*/
|
|
2925
|
-
"dap-ds-avatar": DefineComponent<DapDSAvatarProps>;
|
|
2926
|
-
|
|
2927
2981
|
/**
|
|
2928
2982
|
* A badge is a small status descriptor for UI elements.
|
|
2929
2983
|
* ---
|
|
@@ -2972,46 +3026,28 @@ export type CustomElements = {
|
|
|
2972
3026
|
"dap-ds-badge": DefineComponent<DapDSBadgeProps>;
|
|
2973
3027
|
|
|
2974
3028
|
/**
|
|
2975
|
-
*
|
|
2976
|
-
* ---
|
|
2977
|
-
*
|
|
2978
|
-
*
|
|
2979
|
-
* ### **CSS Properties:**
|
|
2980
|
-
* - **--dds-anchor-link-color** - The color of the anchor link. Default is the primary color. _(default: undefined)_
|
|
2981
|
-
* - **--dds-anchor-link-opacity** - The opacity of the anchor link when not hovered. Default is 0. _(default: undefined)_
|
|
2982
|
-
* - **--dds-anchor-link-hover-opacity** - The opacity of the anchor link when hovered. Default is 1. _(default: undefined)_
|
|
2983
|
-
* - **--dds-anchor-link-transition** - The transition property for the anchor link opacity. Default is 'opacity 0.2s ease-in-out'. _(default: undefined)_
|
|
2984
|
-
*
|
|
2985
|
-
* ### **CSS Parts:**
|
|
2986
|
-
* - **base** - The main anchor heading container.
|
|
2987
|
-
* - **link** - The link of the anchor heading. dap-ds-link element.
|
|
2988
|
-
* - **link-base** - The base of the link part.
|
|
2989
|
-
* - **text** - The text of the anchor heading.
|
|
2990
|
-
*/
|
|
2991
|
-
"dap-ds-anchor-heading": DefineComponent<DapDSAnchorHeadingProps>;
|
|
2992
|
-
|
|
2993
|
-
/**
|
|
2994
|
-
* An accordion group is a collection of accordion components.
|
|
3029
|
+
* A breadcrumb is a secondary navigation scheme that reveals the user's location in a website or Web application.
|
|
2995
3030
|
* ---
|
|
2996
3031
|
*
|
|
2997
3032
|
*
|
|
2998
|
-
* ### **Events:**
|
|
2999
|
-
* - **dds-change** - Event fired when an accordion is opened or closed.
|
|
3000
|
-
*
|
|
3001
3033
|
* ### **Slots:**
|
|
3002
|
-
* - _default_ - The content of the
|
|
3034
|
+
* - _default_ - The content of the breadcrumb.
|
|
3035
|
+
* - **separator** - The separator between breadcrumb items. Default is '/'.
|
|
3003
3036
|
*
|
|
3004
3037
|
* ### **CSS Properties:**
|
|
3005
|
-
* - **--dds-
|
|
3006
|
-
* - **--dds-
|
|
3007
|
-
* - **--dds-
|
|
3008
|
-
* - **--dds-
|
|
3009
|
-
* - **--dds-
|
|
3038
|
+
* - **--dds-breadcrumb-width** - The width of the breadcrumb container. Default is 100%. _(default: undefined)_
|
|
3039
|
+
* - **--dds-breadcrumb-overflow-x** - The horizontal overflow behavior of the breadcrumb. Default is auto. _(default: undefined)_
|
|
3040
|
+
* - **--dds-breadcrumb-transition** - The transition property for the breadcrumb. Default is 'all 0.2s ease-in-out'. _(default: undefined)_
|
|
3041
|
+
* - **--dds-breadcrumb-list-display** - The display property of the breadcrumb list. Default is flex. _(default: undefined)_
|
|
3042
|
+
* - **--dds-breadcrumb-list-flex-wrap** - The flex-wrap property of the breadcrumb list. Default is nowrap. _(default: undefined)_
|
|
3043
|
+
* - **--dds-breadcrumb-list-align-items** - The align-items property of the breadcrumb list. Default is center. _(default: undefined)_
|
|
3044
|
+
* - **--dds-breadcrumb-list-min-width** - The minimum width of the breadcrumb list. Default is max-content. _(default: undefined)_
|
|
3010
3045
|
*
|
|
3011
3046
|
* ### **CSS Parts:**
|
|
3012
|
-
* - **base** - The main
|
|
3047
|
+
* - **base** - The main breadcrumb container.
|
|
3048
|
+
* - **separator** - The separator of the breadcrumb.
|
|
3013
3049
|
*/
|
|
3014
|
-
"dap-ds-
|
|
3050
|
+
"dap-ds-breadcrumb": DefineComponent<DapDSBreadcrumbProps>;
|
|
3015
3051
|
|
|
3016
3052
|
/**
|
|
3017
3053
|
* A banner is a message displayed at the top of the page to provide important information to the user.
|
|
@@ -3066,28 +3102,28 @@ export type CustomElements = {
|
|
|
3066
3102
|
"dap-ds-banner": DefineComponent<DapDSBannerProps>;
|
|
3067
3103
|
|
|
3068
3104
|
/**
|
|
3069
|
-
*
|
|
3105
|
+
* Avatar component can be used to display user profile images or icons, or illustrations.
|
|
3070
3106
|
* ---
|
|
3071
3107
|
*
|
|
3072
3108
|
*
|
|
3073
|
-
* ### **Slots:**
|
|
3074
|
-
* - _default_ - The content of the breadcrumb.
|
|
3075
|
-
* - **separator** - The separator between breadcrumb items. Default is '/'.
|
|
3076
|
-
*
|
|
3077
3109
|
* ### **CSS Properties:**
|
|
3078
|
-
* - **--dds-
|
|
3079
|
-
* - **--dds-
|
|
3080
|
-
* - **--dds-
|
|
3081
|
-
* - **--dds-
|
|
3082
|
-
* - **--dds-
|
|
3083
|
-
* - **--dds-
|
|
3084
|
-
* - **--dds-
|
|
3110
|
+
* - **--dds-avatar-border-radius** - The border radius of the avatar. Default is the design system's rounded radius. _(default: undefined)_
|
|
3111
|
+
* - **--dds-avatar-background-color** - The background color of the avatar. Default is transparent. _(default: undefined)_
|
|
3112
|
+
* - **--dds-avatar-border-width** - The width of the avatar's border. Default is 0. _(default: undefined)_
|
|
3113
|
+
* - **--dds-avatar-border-color** - The color of the avatar's border. Default is transparent. _(default: undefined)_
|
|
3114
|
+
* - **--dds-avatar-border-style** - The style of the avatar's border. Default is solid. _(default: undefined)_
|
|
3115
|
+
* - **--dds-avatar-transition** - The transition property for the avatar. Default is 'all 0.2s ease-in-out'. _(default: undefined)_
|
|
3116
|
+
* - **--dds-avatar-size-lg** - The size of the large avatar. Default is the design system's spacing-2000. _(default: undefined)_
|
|
3117
|
+
* - **--dds-avatar-size-md** - The size of the medium avatar. Default is the design system's spacing-1600. _(default: undefined)_
|
|
3118
|
+
* - **--dds-avatar-size-sm** - The size of the small avatar. Default is the design system's spacing-1200. _(default: undefined)_
|
|
3119
|
+
* - **--dds-avatar-size-xs** - The size of the extra small avatar. Default is the design system's spacing-800. _(default: undefined)_
|
|
3120
|
+
* - **--dds-avatar-size-xxs** - The size of the extra extra small avatar. Default is the design system's spacing-600. _(default: undefined)_
|
|
3085
3121
|
*
|
|
3086
3122
|
* ### **CSS Parts:**
|
|
3087
|
-
* - **base** - The main
|
|
3088
|
-
* - **
|
|
3123
|
+
* - **base** - The main avatar image container.
|
|
3124
|
+
* - **img** - The avatar image.
|
|
3089
3125
|
*/
|
|
3090
|
-
"dap-ds-
|
|
3126
|
+
"dap-ds-avatar": DefineComponent<DapDSAvatarProps>;
|
|
3091
3127
|
|
|
3092
3128
|
/**
|
|
3093
3129
|
* A breadcrumb item is a secondary navigation scheme that reveals the user's location in a website or Web application.
|
|
@@ -3122,6 +3158,29 @@ export type CustomElements = {
|
|
|
3122
3158
|
*/
|
|
3123
3159
|
"dap-ds-breadcrumb-item": DefineComponent<DapDSBreadcrumbItemProps>;
|
|
3124
3160
|
|
|
3161
|
+
/**
|
|
3162
|
+
* An accordion group is a collection of accordion components.
|
|
3163
|
+
* ---
|
|
3164
|
+
*
|
|
3165
|
+
*
|
|
3166
|
+
* ### **Events:**
|
|
3167
|
+
* - **dds-change** - Event fired when an accordion is opened or closed.
|
|
3168
|
+
*
|
|
3169
|
+
* ### **Slots:**
|
|
3170
|
+
* - _default_ - The content of the accordion group.
|
|
3171
|
+
*
|
|
3172
|
+
* ### **CSS Properties:**
|
|
3173
|
+
* - **--dds-accordion-group-spacing** - Controls the gap between accordion items (default: var(--dds-spacing-300)) _(default: undefined)_
|
|
3174
|
+
* - **--dds-accordion-group-border-color** - Controls the border color (default: var(--dds-border-neutral-subtle)) _(default: undefined)_
|
|
3175
|
+
* - **--dds-accordion-group-border-width** - Controls the border width (default: var(--dds-border-width-base)) _(default: undefined)_
|
|
3176
|
+
* - **--dds-accordion-group-border-radius** - Controls the border radius (default: var(--dds-radius-base)) _(default: undefined)_
|
|
3177
|
+
* - **--dds-accordion-group-background** - Controls the background color (default: transparent) _(default: undefined)_
|
|
3178
|
+
*
|
|
3179
|
+
* ### **CSS Parts:**
|
|
3180
|
+
* - **base** - The main accordion group container.
|
|
3181
|
+
*/
|
|
3182
|
+
"dap-ds-accordion-group": DefineComponent<DapDSAccordionGroupProps>;
|
|
3183
|
+
|
|
3125
3184
|
/**
|
|
3126
3185
|
* A button is a clickable element that can be used to trigger an action.
|
|
3127
3186
|
* ---
|
|
@@ -4139,6 +4198,9 @@ export type CustomElements = {
|
|
|
4139
4198
|
* ---
|
|
4140
4199
|
*
|
|
4141
4200
|
*
|
|
4201
|
+
* ### **Events:**
|
|
4202
|
+
* - **dds-click** - Emitted when the link is clicked.
|
|
4203
|
+
*
|
|
4142
4204
|
* ### **Slots:**
|
|
4143
4205
|
* - _default_ - The text of the link.
|
|
4144
4206
|
*
|
|
@@ -5862,6 +5924,26 @@ export type CustomElements = {
|
|
|
5862
5924
|
*/
|
|
5863
5925
|
"dap-ds-icon-loading-spinner": DefineComponent<SystemLoadingSpinnerProps>;
|
|
5864
5926
|
|
|
5927
|
+
/**
|
|
5928
|
+
* An icon
|
|
5929
|
+
* ---
|
|
5930
|
+
*
|
|
5931
|
+
*
|
|
5932
|
+
* ### **CSS Parts:**
|
|
5933
|
+
* - **base** - The main icon container.
|
|
5934
|
+
*/
|
|
5935
|
+
"dap-ds-icon-lock-fill": DefineComponent<SystemLockFillProps>;
|
|
5936
|
+
|
|
5937
|
+
/**
|
|
5938
|
+
* An icon
|
|
5939
|
+
* ---
|
|
5940
|
+
*
|
|
5941
|
+
*
|
|
5942
|
+
* ### **CSS Parts:**
|
|
5943
|
+
* - **base** - The main icon container.
|
|
5944
|
+
*/
|
|
5945
|
+
"dap-ds-icon-lock-line": DefineComponent<SystemLockLineProps>;
|
|
5946
|
+
|
|
5865
5947
|
/**
|
|
5866
5948
|
* An icon
|
|
5867
5949
|
* ---
|
|
@@ -5900,7 +5982,7 @@ export type CustomElements = {
|
|
|
5900
5982
|
* ### **CSS Parts:**
|
|
5901
5983
|
* - **base** - The main icon container.
|
|
5902
5984
|
*/
|
|
5903
|
-
"dap-ds-icon-
|
|
5985
|
+
"dap-ds-icon-shield-check-fill": DefineComponent<SystemShieldCheckFillProps>;
|
|
5904
5986
|
|
|
5905
5987
|
/**
|
|
5906
5988
|
* An icon
|
|
@@ -5910,7 +5992,17 @@ export type CustomElements = {
|
|
|
5910
5992
|
* ### **CSS Parts:**
|
|
5911
5993
|
* - **base** - The main icon container.
|
|
5912
5994
|
*/
|
|
5913
|
-
"dap-ds-icon-
|
|
5995
|
+
"dap-ds-icon-shield-check-line": DefineComponent<SystemShieldCheckLineProps>;
|
|
5996
|
+
|
|
5997
|
+
/**
|
|
5998
|
+
* An icon
|
|
5999
|
+
* ---
|
|
6000
|
+
*
|
|
6001
|
+
*
|
|
6002
|
+
* ### **CSS Parts:**
|
|
6003
|
+
* - **base** - The main icon container.
|
|
6004
|
+
*/
|
|
6005
|
+
"dap-ds-icon-star-fill": DefineComponent<SystemStarFillProps>;
|
|
5914
6006
|
|
|
5915
6007
|
/**
|
|
5916
6008
|
* An icon
|
|
@@ -5921,6 +6013,16 @@ export type CustomElements = {
|
|
|
5921
6013
|
* - **base** - The main icon container.
|
|
5922
6014
|
*/
|
|
5923
6015
|
"dap-ds-icon-subtract-line2": DefineComponent<SystemSubtractLine2Props>;
|
|
6016
|
+
|
|
6017
|
+
/**
|
|
6018
|
+
* An icon
|
|
6019
|
+
* ---
|
|
6020
|
+
*
|
|
6021
|
+
*
|
|
6022
|
+
* ### **CSS Parts:**
|
|
6023
|
+
* - **base** - The main icon container.
|
|
6024
|
+
*/
|
|
6025
|
+
"dap-ds-icon-subtract-line": DefineComponent<SystemSubtractLineProps>;
|
|
5924
6026
|
};
|
|
5925
6027
|
|
|
5926
6028
|
declare module "vue" {
|