dap-design-system 0.59.0 → 0.59.1

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.
@@ -217,11 +217,6 @@ export interface DapDSAvatarEvents {
217
217
  onDdsError?: (event: CustomEvent) => void
218
218
  }
219
219
 
220
- export interface DapDSAvatarGroupEvents {
221
- /** Fired when the overflow indicator is clicked. */
222
- onDdsOverflowClick?: (event: CustomEvent) => void
223
- }
224
-
225
220
  export interface DapDSAccordionEvents {
226
221
  /** Event fired when the accordion is opened. */
227
222
  onDdsOpened?: (event: CustomEvent<{ open: boolean, item: AccordionBaseElement }>) => void
@@ -229,6 +224,11 @@ export interface DapDSAccordionEvents {
229
224
  onDdsClosed?: (event: CustomEvent<{ open: boolean, item: AccordionBaseElement }>) => void
230
225
  }
231
226
 
227
+ export interface DapDSAvatarGroupEvents {
228
+ /** Fired when the overflow indicator is clicked. */
229
+ onDdsOverflowClick?: (event: CustomEvent) => void
230
+ }
231
+
232
232
  export interface DapDSBannerEvents {
233
233
  /** Event fired when the banner is closed. */
234
234
  onDdsClose?: (event: CustomEvent) => void
@@ -239,16 +239,16 @@ export interface DapDSButtonEvents {
239
239
  onDdsLoadingTimeout?: (event: CustomEvent) => void
240
240
  }
241
241
 
242
- export interface DapDSCalloutEvents {
243
- /** Fired when the close button is clicked. */
244
- onDdsClose?: (event: CustomEvent) => void
245
- }
246
-
247
242
  export interface DapDSCalendarEvents {
248
243
  /** Fired when the calendar value changes. */
249
244
  onDdsChange?: (event: CustomEvent<{ value: Dayjs }>) => void
250
245
  }
251
246
 
247
+ export interface DapDSCalloutEvents {
248
+ /** Fired when the close button is clicked. */
249
+ onDdsClose?: (event: CustomEvent) => void
250
+ }
251
+
252
252
  export interface DapDSCheckboxEvents {
253
253
  /** Fired when the checkbox is checked or unchecked. */
254
254
  onDdsChange?: (event: CustomEvent<{ checked: boolean, indeterminate: boolean, value: string, disabled: boolean, readonly: boolean, type: 'checkbox' }>) => void
@@ -561,6 +561,11 @@ export interface DapDSSelectEvents {
561
561
  onDdsClosed?: (event: CustomEvent) => void
562
562
  }
563
563
 
564
+ export interface DapDSSideNavEvents {
565
+ /** Event fired when the side navigation item is clicked. */
566
+ onDdsItemClick?: (event: CustomEvent<{ href: string, event: Event }>) => void
567
+ }
568
+
564
569
  export interface DapDSSnackbarMessageEvents {
565
570
  /** Fires when the snackbar closes. */
566
571
  onDdsClose?: (event: CustomEvent<{ id: string }>) => void
@@ -582,11 +587,6 @@ export interface DapDSTabGroupEvents {
582
587
  onDdsTabSelect?: (event: CustomEvent) => void
583
588
  }
584
589
 
585
- export interface DapDSSideNavEvents {
586
- /** Event fired when the side navigation item is clicked. */
587
- onDdsItemClick?: (event: CustomEvent<{ href: string, event: Event }>) => void
588
- }
589
-
590
590
  export interface DapDSTextareaEvents {
591
591
  /** Fires when the count of the textarea changes. */
592
592
  onDdsCountChange?: (event: CustomEvent<{ value: number }>) => void
@@ -655,11 +655,6 @@ export interface DapDSRadioGroupEvents {
655
655
  onDdsFocus?: (event: CustomEvent) => void
656
656
  }
657
657
 
658
- export interface DapDSAccordionGroupSlots {
659
- /** The content of the accordion group. */
660
- default?: () => any
661
- }
662
-
663
658
  export interface DapDSAvatarSlots {
664
659
  /** The icon to display when variant is 'icon'. */
665
660
  'icon'?: () => any
@@ -667,11 +662,6 @@ export interface DapDSAvatarSlots {
667
662
  'fallback'?: () => any
668
663
  }
669
664
 
670
- export interface DapDSAvatarGroupSlots {
671
- /** The avatars to display in the group. */
672
- default?: () => any
673
- }
674
-
675
665
  export interface DapDSAccordionSlots {
676
666
  /** The content of the accordion. */
677
667
  default?: () => any
@@ -683,6 +673,20 @@ export interface DapDSAccordionSlots {
683
673
  'icon-closed'?: () => any
684
674
  }
685
675
 
676
+ export interface DapDSAvatarGroupSlots {
677
+ /** The avatars to display in the group. */
678
+ default?: () => any
679
+ }
680
+
681
+ export interface DapDSBannerSlots {
682
+ /** The content of the banner. */
683
+ default?: () => any
684
+ /** Actions of banner */
685
+ 'actions'?: () => any
686
+ /** The icon of the banner. */
687
+ 'icon'?: () => any
688
+ }
689
+
686
690
  export interface DapDSBadgeSlots {
687
691
  /** The content of the badge. */
688
692
  default?: () => any
@@ -697,13 +701,9 @@ export interface DapDSBreadcrumbSlots {
697
701
  'separator'?: () => any
698
702
  }
699
703
 
700
- export interface DapDSBannerSlots {
701
- /** The content of the banner. */
704
+ export interface DapDSAccordionGroupSlots {
705
+ /** The content of the accordion group. */
702
706
  default?: () => any
703
- /** Actions of banner */
704
- 'actions'?: () => any
705
- /** The icon of the banner. */
706
- 'icon'?: () => any
707
707
  }
708
708
 
709
709
  export interface DapDSBreadcrumbItemSlots {
@@ -718,6 +718,16 @@ export interface DapDSButtonSlots {
718
718
  default?: () => any
719
719
  }
720
720
 
721
+ export interface DapDSCalendarCellSlots {
722
+ /** The content of the calendar cell. */
723
+ default?: () => any
724
+ }
725
+
726
+ export interface DapDSCalendarSlots {
727
+ /** The content of the calendar. */
728
+ default?: () => any
729
+ }
730
+
721
731
  export interface DapDSCalloutSlots {
722
732
  /** The content of the callout. */
723
733
  default?: () => any
@@ -731,16 +741,6 @@ export interface DapDSCalloutSlots {
731
741
  'close'?: () => any
732
742
  }
733
743
 
734
- export interface DapDSCalendarCellSlots {
735
- /** The content of the calendar cell. */
736
- default?: () => any
737
- }
738
-
739
- export interface DapDSCalendarSlots {
740
- /** The content of the calendar. */
741
- default?: () => any
742
- }
743
-
744
744
  export interface DapDSCardActionsSlots {
745
745
  /** The content of the card actions. */
746
746
  default?: () => any
@@ -993,6 +993,27 @@ export interface DapDSSelectSlots {
993
993
  'indicator-icon'?: () => any
994
994
  }
995
995
 
996
+ export interface DapDSSideNavGroupSlots {
997
+ /** The content of the side navigation group. */
998
+ default?: () => any
999
+ /** The submenu of the side navigation group. */
1000
+ 'submenu'?: () => any
1001
+ /** The suffix of the side navigation group. */
1002
+ 'suffix'?: () => any
1003
+ }
1004
+
1005
+ export interface DapDSSideNavItemSlots {
1006
+ /** The content of the side navigation item. */
1007
+ default?: () => any
1008
+ /** The suffix of the side navigation item. */
1009
+ 'suffix'?: () => any
1010
+ }
1011
+
1012
+ export interface DapDSSideNavSlots {
1013
+ /** The content of the side navigation. */
1014
+ default?: () => any
1015
+ }
1016
+
996
1017
  export interface DapDSSkipLinkSlots {
997
1018
  /** The content of the skip link. */
998
1019
  default?: () => any
@@ -1047,27 +1068,6 @@ export interface DapDSTableSlots {
1047
1068
  default?: () => any
1048
1069
  }
1049
1070
 
1050
- export interface DapDSSideNavGroupSlots {
1051
- /** The content of the side navigation group. */
1052
- default?: () => any
1053
- /** The submenu of the side navigation group. */
1054
- 'submenu'?: () => any
1055
- /** The suffix of the side navigation group. */
1056
- 'suffix'?: () => any
1057
- }
1058
-
1059
- export interface DapDSSideNavItemSlots {
1060
- /** The content of the side navigation item. */
1061
- default?: () => any
1062
- /** The suffix of the side navigation item. */
1063
- 'suffix'?: () => any
1064
- }
1065
-
1066
- export interface DapDSSideNavSlots {
1067
- /** The content of the side navigation. */
1068
- default?: () => any
1069
- }
1070
-
1071
1071
  export interface DapDSTextareaSlots {
1072
1072
  /** The custom icon of the feedback. */
1073
1073
  'feedback-icon'?: () => any
@@ -1109,38 +1109,20 @@ export interface DapDSTypographySlots {
1109
1109
  default?: () => any
1110
1110
  }
1111
1111
 
1112
- export interface DapDSRadioGroupSlots {
1113
- /** The content of the radio group. */
1112
+ export interface DapDSInputGroupSlots {
1113
+ /** The content of the input group items. */
1114
1114
  default?: () => any
1115
1115
  /** The custom icon of the feedback. */
1116
1116
  'feedback-icon'?: () => any
1117
1117
  }
1118
1118
 
1119
- export interface DapDSInputGroupSlots {
1120
- /** The content of the input group items. */
1119
+ export interface DapDSRadioGroupSlots {
1120
+ /** The content of the radio group. */
1121
1121
  default?: () => any
1122
1122
  /** The custom icon of the feedback. */
1123
1123
  'feedback-icon'?: () => any
1124
1124
  }
1125
1125
 
1126
- export type DapDSAccordionGroupProps = {
1127
- /** Whether to close other accordions when one is opened. */
1128
- autoClose?: DapDSAccordionGroup["autoClose"]
1129
- /** The variant of the accordion */
1130
- variant?: DapDSAccordionGroup["variant"]
1131
- }
1132
-
1133
- export type DapDSAnchorHeadingProps = {
1134
- /** The variant of the heading. Default is `h2`. Can be `h1`, `h2`, `h3`, `h4`, `h5`, or `h6`. */
1135
- variant?: DapDSAnchorHeading["variant"]
1136
- /** The label of the heading. */
1137
- label?: DapDSAnchorHeading["label"]
1138
- /** */
1139
- elementId?: DapDSAnchorHeading["elementId"]
1140
- /** */
1141
- anchorTitle?: DapDSAnchorHeading["anchorTitle"]
1142
- }
1143
-
1144
1126
  export type DapDSAvatarProps = {
1145
1127
  /** The shape of the avatar */
1146
1128
  shape?: DapDSAvatar["shape"]
@@ -1168,25 +1150,6 @@ export type DapDSAvatarProps = {
1168
1150
  sizeMap?: DapDSAvatar["sizeMap"]
1169
1151
  }
1170
1152
 
1171
- export type DapDSAvatarGroupProps = {
1172
- /** Layout type for the avatar group */
1173
- layout?: DapDSAvatarGroup["layout"]
1174
- /** Maximum number of avatars to show before showing overflow */
1175
- max?: DapDSAvatarGroup["max"]
1176
- /** Whether to show the total count in overflow indicator */
1177
- "show-total"?: DapDSAvatarGroup["showTotal"]
1178
- /** Interactive overflow indicator */
1179
- "interactive-overflow"?: DapDSAvatarGroup["interactiveOverflow"]
1180
- /** Accessible label for the avatar group */
1181
- label?: DapDSAvatarGroup["label"]
1182
- /** Accessible label for the overflow indicator */
1183
- "overflow-label"?: DapDSAvatarGroup["overflowLabel"]
1184
- /** The size of avatars in the group. Default is `md`. See SizedMixin. */
1185
- size?: DapDSAvatarGroup["size"]
1186
- /** Responsive size map (e.g. "md:lg"); see SizedMixin. */
1187
- sizeMap?: DapDSAvatarGroup["sizeMap"]
1188
- }
1189
-
1190
1153
  export type DapDSAccordionProps = {
1191
1154
  /** The size of the accordion. Default is `sm`. Visual variants are sm and lg (other sizes map to sm). */
1192
1155
  size?: DapDSAccordion["size"]
@@ -1212,6 +1175,40 @@ export type DapDSAccordionProps = {
1212
1175
  loading?: DapDSAccordion["loading"]
1213
1176
  }
1214
1177
 
1178
+ export type DapDSAvatarGroupProps = {
1179
+ /** Layout type for the avatar group */
1180
+ layout?: DapDSAvatarGroup["layout"]
1181
+ /** Maximum number of avatars to show before showing overflow */
1182
+ max?: DapDSAvatarGroup["max"]
1183
+ /** Whether to show the total count in overflow indicator */
1184
+ "show-total"?: DapDSAvatarGroup["showTotal"]
1185
+ /** Interactive overflow indicator */
1186
+ "interactive-overflow"?: DapDSAvatarGroup["interactiveOverflow"]
1187
+ /** Accessible label for the avatar group */
1188
+ label?: DapDSAvatarGroup["label"]
1189
+ /** Accessible label for the overflow indicator */
1190
+ "overflow-label"?: DapDSAvatarGroup["overflowLabel"]
1191
+ /** The size of avatars in the group. Default is `md`. See SizedMixin. */
1192
+ size?: DapDSAvatarGroup["size"]
1193
+ /** Responsive size map (e.g. "md:lg"); see SizedMixin. */
1194
+ sizeMap?: DapDSAvatarGroup["sizeMap"]
1195
+ }
1196
+
1197
+ export type DapDSBannerProps = {
1198
+ /** The variant of the banner */
1199
+ variant?: DapDSBanner["variant"]
1200
+ /** Whether the banner is closeable */
1201
+ closeable?: DapDSBanner["closeable"]
1202
+ /** State of the banner. If false banner is hidden */
1203
+ opened?: DapDSBanner["opened"]
1204
+ /** The aria-label for the close button */
1205
+ closeButtonLabel?: DapDSBanner["closeButtonLabel"]
1206
+ /** `data-testid` for the close button. */
1207
+ closeButtonTestId?: DapDSBanner["closeButtonTestId"]
1208
+ /** The icon of the banner, this is a name of a built icon icon */
1209
+ icon?: DapDSBanner["icon"]
1210
+ }
1211
+
1215
1212
  export type DapDSBadgeProps = {
1216
1213
  /** The type of the badge */
1217
1214
  type?: DapDSBadge["type"]
@@ -1234,19 +1231,22 @@ export type DapDSBreadcrumbProps = {
1234
1231
  "aria-labelledby"?: DapDSBreadcrumb["ariaLabelledBy"]
1235
1232
  }
1236
1233
 
1237
- export type DapDSBannerProps = {
1238
- /** The variant of the banner */
1239
- variant?: DapDSBanner["variant"]
1240
- /** Whether the banner is closeable */
1241
- closeable?: DapDSBanner["closeable"]
1242
- /** State of the banner. If false banner is hidden */
1243
- opened?: DapDSBanner["opened"]
1244
- /** The aria-label for the close button */
1245
- closeButtonLabel?: DapDSBanner["closeButtonLabel"]
1246
- /** `data-testid` for the close button. */
1247
- closeButtonTestId?: DapDSBanner["closeButtonTestId"]
1248
- /** The icon of the banner, this is a name of a built icon icon */
1249
- icon?: DapDSBanner["icon"]
1234
+ export type DapDSAnchorHeadingProps = {
1235
+ /** The variant of the heading. Default is `h2`. Can be `h1`, `h2`, `h3`, `h4`, `h5`, or `h6`. */
1236
+ variant?: DapDSAnchorHeading["variant"]
1237
+ /** The label of the heading. */
1238
+ label?: DapDSAnchorHeading["label"]
1239
+ /** */
1240
+ elementId?: DapDSAnchorHeading["elementId"]
1241
+ /** */
1242
+ anchorTitle?: DapDSAnchorHeading["anchorTitle"]
1243
+ }
1244
+
1245
+ export type DapDSAccordionGroupProps = {
1246
+ /** Whether to close other accordions when one is opened. */
1247
+ autoClose?: DapDSAccordionGroup["autoClose"]
1248
+ /** The variant of the accordion */
1249
+ variant?: DapDSAccordionGroup["variant"]
1250
1250
  }
1251
1251
 
1252
1252
  export type DapDSBreadcrumbItemProps = {
@@ -1293,27 +1293,6 @@ export type DapDSButtonProps = {
1293
1293
  sizeMap?: DapDSButton["sizeMap"]
1294
1294
  }
1295
1295
 
1296
- export type DapDSCalloutProps = {
1297
- /** The variant of the callout */
1298
- variant?: DapDSCallout["variant"]
1299
- /** The alignment of the callout. Can be `vertical` or `horizontal`. */
1300
- alignment?: DapDSCallout["alignment"]
1301
- /** The strongness of the callout colors. Can be `subtle`, `base`, `medium`, or `strong`. */
1302
- shade?: DapDSCallout["shade"]
1303
- /** If the callout has a border */
1304
- noBorder?: DapDSCallout["noBorder"]
1305
- /** If the callout has a close button */
1306
- closeable?: DapDSCallout["closeable"]
1307
- /** The header of the callout */
1308
- title?: DapDSCallout["title"]
1309
- /** The label of the close button */
1310
- closeButtonLabel?: DapDSCallout["closeButtonLabel"]
1311
- /** `data-testid` for the default close button. */
1312
- closeButtonTestId?: DapDSCallout["closeButtonTestId"]
1313
- /** If the callout is opened */
1314
- opened?: DapDSCallout["opened"]
1315
- }
1316
-
1317
1296
  export type DapDSCalendarCellProps = {
1318
1297
  /** Whether the calendar cell is selected. */
1319
1298
  selected?: DapDSCalendarCell["selected"]
@@ -1376,9 +1355,30 @@ export type DapDSCalendarProps = {
1376
1355
  shouldHideAdjacentMonths?: DapDSCalendar["shouldHideAdjacentMonths"]
1377
1356
  }
1378
1357
 
1379
- export type DapDSCardActionsProps = {
1380
- /** The spacing of the card actions. This adds a margin to the card actions. Default is `bottom`. */
1381
- spacing?: DapDSCardActions["spacing"]
1358
+ export type DapDSCalloutProps = {
1359
+ /** The variant of the callout */
1360
+ variant?: DapDSCallout["variant"]
1361
+ /** The alignment of the callout. Can be `vertical` or `horizontal`. */
1362
+ alignment?: DapDSCallout["alignment"]
1363
+ /** The strongness of the callout colors. Can be `subtle`, `base`, `medium`, or `strong`. */
1364
+ shade?: DapDSCallout["shade"]
1365
+ /** If the callout has a border */
1366
+ noBorder?: DapDSCallout["noBorder"]
1367
+ /** If the callout has a close button */
1368
+ closeable?: DapDSCallout["closeable"]
1369
+ /** The header of the callout */
1370
+ title?: DapDSCallout["title"]
1371
+ /** The label of the close button */
1372
+ closeButtonLabel?: DapDSCallout["closeButtonLabel"]
1373
+ /** `data-testid` for the default close button. */
1374
+ closeButtonTestId?: DapDSCallout["closeButtonTestId"]
1375
+ /** If the callout is opened */
1376
+ opened?: DapDSCallout["opened"]
1377
+ }
1378
+
1379
+ export type DapDSCardActionsProps = {
1380
+ /** The spacing of the card actions. This adds a margin to the card actions. Default is `bottom`. */
1381
+ spacing?: DapDSCardActions["spacing"]
1382
1382
  /** */
1383
1383
  parentSized?: DapDSCardActions["parentSized"]
1384
1384
  /** The size of the card actions. Default is `sm`. */
@@ -3058,6 +3058,55 @@ export type DapDSSelectProps = {
3058
3058
  subtle?: DapDSSelect["subtle"]
3059
3059
  }
3060
3060
 
3061
+ export type DapDSSideNavGroupProps = {
3062
+ /** The href of the side navigation item */
3063
+ href?: DapDSSideNavGroup["href"]
3064
+ /** Whether the side navigation item is active */
3065
+ active?: DapDSSideNavGroup["active"]
3066
+ /** The spacing of the side navigation item */
3067
+ spacing?: DapDSSideNavGroup["spacing"]
3068
+ /** Whether the side navigation group is open */
3069
+ open?: DapDSSideNavGroup["open"]
3070
+ /** The size of the side navigation group */
3071
+ size?: DapDSSideNavGroup["size"]
3072
+ }
3073
+
3074
+ export type DapDSSideNavItemProps = {
3075
+ /** The href of the side navigation item */
3076
+ href?: DapDSSideNavItem["href"]
3077
+ /** Whether the side navigation item is active */
3078
+ active?: DapDSSideNavItem["active"]
3079
+ /** Which `aria-current` token to expose on the link when `active` is set.
3080
+
3081
+ `aria-current` has to sit on the anchor that assistive technology actually
3082
+ exposes. Setting it on this host does nothing: the host is a role-less custom
3083
+ element, so the attribute is stranded there and screen-reader users cannot tell
3084
+ which item is current. Use `current="step"` inside a stepper. */
3085
+ current?: DapDSSideNavItem["current"]
3086
+ /** The spacing of the side navigation item */
3087
+ spacing?: DapDSSideNavItem["spacing"]
3088
+ /** The size of the side navigation item */
3089
+ size?: DapDSSideNavItem["size"]
3090
+ }
3091
+
3092
+ export type DapDSSideNavProps = {
3093
+ /** The label of the side navigation, if aria label is not provided, it will be used as aria label */
3094
+ label?: DapDSSideNav["label"]
3095
+ /** The active href of the side navigation, to explicitly set the active item, if not provided, it will be set based on the current location */
3096
+ activeHref?: DapDSSideNav["activeHref"]
3097
+ /** The size of the side navigation */
3098
+ size?: DapDSSideNav["size"]
3099
+ /** The landmark element to render. `aside` exposes a complementary landmark; `nav`
3100
+ exposes a navigation landmark, so the sidenav is listed when a screen-reader user
3101
+ asks for the page's navigation.
3102
+
3103
+ Defaults to `aside` because that is what this component has always rendered, and
3104
+ changing the landmark of every existing sidenav is not this component's call: a
3105
+ sidenav that is genuinely a sidebar should stay complementary. Set `nav` when the
3106
+ sidenav is the primary way to move around the view. */
3107
+ landmark?: DapDSSideNav["landmark"]
3108
+ }
3109
+
3061
3110
  export type DapDSSkeletonProps = {
3062
3111
  /** The variant of the skeleton. */
3063
3112
  variant?: DapDSSkeleton["variant"]
@@ -3239,55 +3288,6 @@ export type DapDSTableProps = {
3239
3288
  caption?: DapDSTable["caption"]
3240
3289
  }
3241
3290
 
3242
- export type DapDSSideNavGroupProps = {
3243
- /** The href of the side navigation item */
3244
- href?: DapDSSideNavGroup["href"]
3245
- /** Whether the side navigation item is active */
3246
- active?: DapDSSideNavGroup["active"]
3247
- /** The spacing of the side navigation item */
3248
- spacing?: DapDSSideNavGroup["spacing"]
3249
- /** Whether the side navigation group is open */
3250
- open?: DapDSSideNavGroup["open"]
3251
- /** The size of the side navigation group */
3252
- size?: DapDSSideNavGroup["size"]
3253
- }
3254
-
3255
- export type DapDSSideNavItemProps = {
3256
- /** The href of the side navigation item */
3257
- href?: DapDSSideNavItem["href"]
3258
- /** Whether the side navigation item is active */
3259
- active?: DapDSSideNavItem["active"]
3260
- /** Which `aria-current` token to expose on the link when `active` is set.
3261
-
3262
- `aria-current` has to sit on the anchor that assistive technology actually
3263
- exposes. Setting it on this host does nothing: the host is a role-less custom
3264
- element, so the attribute is stranded there and screen-reader users cannot tell
3265
- which item is current. Use `current="step"` inside a stepper. */
3266
- current?: DapDSSideNavItem["current"]
3267
- /** The spacing of the side navigation item */
3268
- spacing?: DapDSSideNavItem["spacing"]
3269
- /** The size of the side navigation item */
3270
- size?: DapDSSideNavItem["size"]
3271
- }
3272
-
3273
- export type DapDSSideNavProps = {
3274
- /** The label of the side navigation, if aria label is not provided, it will be used as aria label */
3275
- label?: DapDSSideNav["label"]
3276
- /** The active href of the side navigation, to explicitly set the active item, if not provided, it will be set based on the current location */
3277
- activeHref?: DapDSSideNav["activeHref"]
3278
- /** The size of the side navigation */
3279
- size?: DapDSSideNav["size"]
3280
- /** The landmark element to render. `aside` exposes a complementary landmark; `nav`
3281
- exposes a navigation landmark, so the sidenav is listed when a screen-reader user
3282
- asks for the page's navigation.
3283
-
3284
- Defaults to `aside` because that is what this component has always rendered, and
3285
- changing the landmark of every existing sidenav is not this component's call: a
3286
- sidenav that is genuinely a sidebar should stay complementary. Set `nav` when the
3287
- sidenav is the primary way to move around the view. */
3288
- landmark?: DapDSSideNav["landmark"]
3289
- }
3290
-
3291
3291
  export type DapDSTextareaProps = {
3292
3292
  /** Hide character counter. */
3293
3293
  hideCounter?: DapDSTextarea["hideCounter"]
@@ -3609,6 +3609,41 @@ export type DapDSFormLabelProps = {
3609
3609
  hideLabel?: DapDSFormLabel["hideLabel"]
3610
3610
  }
3611
3611
 
3612
+ export type DapDSInputGroupProps = {
3613
+ /** */
3614
+ allInputs?: DapDSInputGroup["allInputs"]
3615
+ /** The label of the input group. */
3616
+ label?: DapDSInputGroup["label"]
3617
+ /** Visually hides the label while keeping it available to assistive technology. (default: false) */
3618
+ hideLabel?: DapDSInputGroup["hideLabel"]
3619
+ /** The description of the input group. */
3620
+ description?: DapDSInputGroup["description"]
3621
+ /** The tooltip of the input group. */
3622
+ tooltip?: DapDSInputGroup["tooltip"]
3623
+ /** The tooltip placement of the input group. */
3624
+ tooltipPlacement?: DapDSInputGroup["tooltipPlacement"]
3625
+ /** The aria label of the tooltip. */
3626
+ tooltipAriaLabel?: DapDSInputGroup["tooltipAriaLabel"]
3627
+ /** The label of the input group when it is optional. */
3628
+ optionalLabel?: DapDSInputGroup["optionalLabel"]
3629
+ /** The indicator of the input group when it is required. (default: '*') */
3630
+ requiredLabel?: DapDSInputGroup["requiredLabel"]
3631
+ /** Whether the input group is disabled. */
3632
+ disabled?: DapDSInputGroup["disabled"]
3633
+ /** The size of the input group. Default is `sm`. */
3634
+ size?: DapDSInputGroup["size"]
3635
+ /** Whether the input group is required. */
3636
+ required?: DapDSInputGroup["required"]
3637
+ /** Whether the input group is optional. */
3638
+ optional?: DapDSInputGroup["optional"]
3639
+ /** The feedback of the input. */
3640
+ feedback?: DapDSInputGroup["feedback"]
3641
+ /** The type of the feedback. */
3642
+ feedbackType?: DapDSInputGroup["feedbackType"]
3643
+ /** Whether the input group label is subtle. */
3644
+ subtle?: DapDSInputGroup["subtle"]
3645
+ }
3646
+
3612
3647
  export type DapDSRadioGroupProps = {
3613
3648
  /** The tooltip placement of the radio group. */
3614
3649
  tooltipPlacement?: DapDSRadioGroup["tooltipPlacement"]
@@ -3650,41 +3685,6 @@ export type DapDSRadioGroupProps = {
3650
3685
  size?: DapDSRadioGroup["size"]
3651
3686
  }
3652
3687
 
3653
- export type DapDSInputGroupProps = {
3654
- /** */
3655
- allInputs?: DapDSInputGroup["allInputs"]
3656
- /** The label of the input group. */
3657
- label?: DapDSInputGroup["label"]
3658
- /** Visually hides the label while keeping it available to assistive technology. (default: false) */
3659
- hideLabel?: DapDSInputGroup["hideLabel"]
3660
- /** The description of the input group. */
3661
- description?: DapDSInputGroup["description"]
3662
- /** The tooltip of the input group. */
3663
- tooltip?: DapDSInputGroup["tooltip"]
3664
- /** The tooltip placement of the input group. */
3665
- tooltipPlacement?: DapDSInputGroup["tooltipPlacement"]
3666
- /** The aria label of the tooltip. */
3667
- tooltipAriaLabel?: DapDSInputGroup["tooltipAriaLabel"]
3668
- /** The label of the input group when it is optional. */
3669
- optionalLabel?: DapDSInputGroup["optionalLabel"]
3670
- /** The indicator of the input group when it is required. (default: '*') */
3671
- requiredLabel?: DapDSInputGroup["requiredLabel"]
3672
- /** Whether the input group is disabled. */
3673
- disabled?: DapDSInputGroup["disabled"]
3674
- /** The size of the input group. Default is `sm`. */
3675
- size?: DapDSInputGroup["size"]
3676
- /** Whether the input group is required. */
3677
- required?: DapDSInputGroup["required"]
3678
- /** Whether the input group is optional. */
3679
- optional?: DapDSInputGroup["optional"]
3680
- /** The feedback of the input. */
3681
- feedback?: DapDSInputGroup["feedback"]
3682
- /** The type of the feedback. */
3683
- feedbackType?: DapDSInputGroup["feedbackType"]
3684
- /** Whether the input group label is subtle. */
3685
- subtle?: DapDSInputGroup["subtle"]
3686
- }
3687
-
3688
3688
  export type ArrowsArrowDownLineProps = {
3689
3689
  /** (optional) The width and height in pixels */
3690
3690
  size?: ArrowsArrowDownLine["size"]
@@ -3740,26 +3740,26 @@ export type ArrowsArrowLeftLLineProps = {
3740
3740
  focusable?: ArrowsArrowLeftLLine["focusable"]
3741
3741
  }
3742
3742
 
3743
- export type ArrowsArrowLeftSFillProps = {
3743
+ export type ArrowsArrowLeftLineProps = {
3744
3744
  /** (optional) The width and height in pixels */
3745
- size?: ArrowsArrowLeftSFill["size"]
3745
+ size?: ArrowsArrowLeftLine["size"]
3746
3746
  /** (optional) Sets the icon color via the `fill` attribute */
3747
- selected?: ArrowsArrowLeftSFill["selected"]
3747
+ selected?: ArrowsArrowLeftLine["selected"]
3748
3748
  /** (optional) When using the icon standalone, make it meaningful for accessibility */
3749
- accessibilityTitle?: ArrowsArrowLeftSFill["accessibilityTitle"]
3749
+ accessibilityTitle?: ArrowsArrowLeftLine["accessibilityTitle"]
3750
3750
  /** (optional) If `true` the icon can receive focus */
3751
- focusable?: ArrowsArrowLeftSFill["focusable"]
3751
+ focusable?: ArrowsArrowLeftLine["focusable"]
3752
3752
  }
3753
3753
 
3754
- export type ArrowsArrowLeftLineProps = {
3754
+ export type ArrowsArrowLeftSFillProps = {
3755
3755
  /** (optional) The width and height in pixels */
3756
- size?: ArrowsArrowLeftLine["size"]
3756
+ size?: ArrowsArrowLeftSFill["size"]
3757
3757
  /** (optional) Sets the icon color via the `fill` attribute */
3758
- selected?: ArrowsArrowLeftLine["selected"]
3758
+ selected?: ArrowsArrowLeftSFill["selected"]
3759
3759
  /** (optional) When using the icon standalone, make it meaningful for accessibility */
3760
- accessibilityTitle?: ArrowsArrowLeftLine["accessibilityTitle"]
3760
+ accessibilityTitle?: ArrowsArrowLeftSFill["accessibilityTitle"]
3761
3761
  /** (optional) If `true` the icon can receive focus */
3762
- focusable?: ArrowsArrowLeftLine["focusable"]
3762
+ focusable?: ArrowsArrowLeftSFill["focusable"]
3763
3763
  }
3764
3764
 
3765
3765
  export type ArrowsArrowLeftSLineProps = {
@@ -3773,6 +3773,17 @@ export type ArrowsArrowLeftSLineProps = {
3773
3773
  focusable?: ArrowsArrowLeftSLine["focusable"]
3774
3774
  }
3775
3775
 
3776
+ export type ArrowsArrowLeftUpLineProps = {
3777
+ /** (optional) The width and height in pixels */
3778
+ size?: ArrowsArrowLeftUpLine["size"]
3779
+ /** (optional) Sets the icon color via the `fill` attribute */
3780
+ selected?: ArrowsArrowLeftUpLine["selected"]
3781
+ /** (optional) When using the icon standalone, make it meaningful for accessibility */
3782
+ accessibilityTitle?: ArrowsArrowLeftUpLine["accessibilityTitle"]
3783
+ /** (optional) If `true` the icon can receive focus */
3784
+ focusable?: ArrowsArrowLeftUpLine["focusable"]
3785
+ }
3786
+
3776
3787
  export type ArrowsArrowRightDownLineProps = {
3777
3788
  /** (optional) The width and height in pixels */
3778
3789
  size?: ArrowsArrowRightDownLine["size"]
@@ -3795,17 +3806,6 @@ export type ArrowsArrowRightLLineProps = {
3795
3806
  focusable?: ArrowsArrowRightLLine["focusable"]
3796
3807
  }
3797
3808
 
3798
- export type ArrowsArrowLeftUpLineProps = {
3799
- /** (optional) The width and height in pixels */
3800
- size?: ArrowsArrowLeftUpLine["size"]
3801
- /** (optional) Sets the icon color via the `fill` attribute */
3802
- selected?: ArrowsArrowLeftUpLine["selected"]
3803
- /** (optional) When using the icon standalone, make it meaningful for accessibility */
3804
- accessibilityTitle?: ArrowsArrowLeftUpLine["accessibilityTitle"]
3805
- /** (optional) If `true` the icon can receive focus */
3806
- focusable?: ArrowsArrowLeftUpLine["focusable"]
3807
- }
3808
-
3809
3809
  export type ArrowsArrowRightLineProps = {
3810
3810
  /** (optional) The width and height in pixels */
3811
3811
  size?: ArrowsArrowRightLine["size"]
@@ -4070,26 +4070,70 @@ export type HealthHeartLineProps = {
4070
4070
  focusable?: HealthHeartLine["focusable"]
4071
4071
  }
4072
4072
 
4073
- export type SystemAddLineProps = {
4073
+ export type OthersCookieLineProps = {
4074
4074
  /** (optional) The width and height in pixels */
4075
- size?: SystemAddLine["size"]
4075
+ size?: OthersCookieLine["size"]
4076
4076
  /** (optional) Sets the icon color via the `fill` attribute */
4077
- selected?: SystemAddLine["selected"]
4077
+ selected?: OthersCookieLine["selected"]
4078
4078
  /** (optional) When using the icon standalone, make it meaningful for accessibility */
4079
- accessibilityTitle?: SystemAddLine["accessibilityTitle"]
4079
+ accessibilityTitle?: OthersCookieLine["accessibilityTitle"]
4080
4080
  /** (optional) If `true` the icon can receive focus */
4081
- focusable?: SystemAddLine["focusable"]
4081
+ focusable?: OthersCookieLine["focusable"]
4082
4082
  }
4083
4083
 
4084
- export type OthersCookieLineProps = {
4084
+ export type UserAccountCircleFillProps = {
4085
4085
  /** (optional) The width and height in pixels */
4086
- size?: OthersCookieLine["size"]
4086
+ size?: UserAccountCircleFill["size"]
4087
4087
  /** (optional) Sets the icon color via the `fill` attribute */
4088
- selected?: OthersCookieLine["selected"]
4088
+ selected?: UserAccountCircleFill["selected"]
4089
4089
  /** (optional) When using the icon standalone, make it meaningful for accessibility */
4090
- accessibilityTitle?: OthersCookieLine["accessibilityTitle"]
4090
+ accessibilityTitle?: UserAccountCircleFill["accessibilityTitle"]
4091
4091
  /** (optional) If `true` the icon can receive focus */
4092
- focusable?: OthersCookieLine["focusable"]
4092
+ focusable?: UserAccountCircleFill["focusable"]
4093
+ }
4094
+
4095
+ export type UserAccountCircleLineProps = {
4096
+ /** (optional) The width and height in pixels */
4097
+ size?: UserAccountCircleLine["size"]
4098
+ /** (optional) Sets the icon color via the `fill` attribute */
4099
+ selected?: UserAccountCircleLine["selected"]
4100
+ /** (optional) When using the icon standalone, make it meaningful for accessibility */
4101
+ accessibilityTitle?: UserAccountCircleLine["accessibilityTitle"]
4102
+ /** (optional) If `true` the icon can receive focus */
4103
+ focusable?: UserAccountCircleLine["focusable"]
4104
+ }
4105
+
4106
+ export type UserUserFillProps = {
4107
+ /** (optional) The width and height in pixels */
4108
+ size?: UserUserFill["size"]
4109
+ /** (optional) Sets the icon color via the `fill` attribute */
4110
+ selected?: UserUserFill["selected"]
4111
+ /** (optional) When using the icon standalone, make it meaningful for accessibility */
4112
+ accessibilityTitle?: UserUserFill["accessibilityTitle"]
4113
+ /** (optional) If `true` the icon can receive focus */
4114
+ focusable?: UserUserFill["focusable"]
4115
+ }
4116
+
4117
+ export type UserUserLineProps = {
4118
+ /** (optional) The width and height in pixels */
4119
+ size?: UserUserLine["size"]
4120
+ /** (optional) Sets the icon color via the `fill` attribute */
4121
+ selected?: UserUserLine["selected"]
4122
+ /** (optional) When using the icon standalone, make it meaningful for accessibility */
4123
+ accessibilityTitle?: UserUserLine["accessibilityTitle"]
4124
+ /** (optional) If `true` the icon can receive focus */
4125
+ focusable?: UserUserLine["focusable"]
4126
+ }
4127
+
4128
+ export type SystemAddLineProps = {
4129
+ /** (optional) The width and height in pixels */
4130
+ size?: SystemAddLine["size"]
4131
+ /** (optional) Sets the icon color via the `fill` attribute */
4132
+ selected?: SystemAddLine["selected"]
4133
+ /** (optional) When using the icon standalone, make it meaningful for accessibility */
4134
+ accessibilityTitle?: SystemAddLine["accessibilityTitle"]
4135
+ /** (optional) If `true` the icon can receive focus */
4136
+ focusable?: SystemAddLine["focusable"]
4093
4137
  }
4094
4138
 
4095
4139
  export type SystemAlertFillProps = {
@@ -4609,73 +4653,9 @@ export type SystemZoomOutLineProps = {
4609
4653
  focusable?: SystemZoomOutLine["focusable"]
4610
4654
  }
4611
4655
 
4612
- export type UserAccountCircleFillProps = {
4613
- /** (optional) The width and height in pixels */
4614
- size?: UserAccountCircleFill["size"]
4615
- /** (optional) Sets the icon color via the `fill` attribute */
4616
- selected?: UserAccountCircleFill["selected"]
4617
- /** (optional) When using the icon standalone, make it meaningful for accessibility */
4618
- accessibilityTitle?: UserAccountCircleFill["accessibilityTitle"]
4619
- /** (optional) If `true` the icon can receive focus */
4620
- focusable?: UserAccountCircleFill["focusable"]
4621
- }
4622
-
4623
- export type UserAccountCircleLineProps = {
4624
- /** (optional) The width and height in pixels */
4625
- size?: UserAccountCircleLine["size"]
4626
- /** (optional) Sets the icon color via the `fill` attribute */
4627
- selected?: UserAccountCircleLine["selected"]
4628
- /** (optional) When using the icon standalone, make it meaningful for accessibility */
4629
- accessibilityTitle?: UserAccountCircleLine["accessibilityTitle"]
4630
- /** (optional) If `true` the icon can receive focus */
4631
- focusable?: UserAccountCircleLine["focusable"]
4632
- }
4633
-
4634
- export type UserUserFillProps = {
4635
- /** (optional) The width and height in pixels */
4636
- size?: UserUserFill["size"]
4637
- /** (optional) Sets the icon color via the `fill` attribute */
4638
- selected?: UserUserFill["selected"]
4639
- /** (optional) When using the icon standalone, make it meaningful for accessibility */
4640
- accessibilityTitle?: UserUserFill["accessibilityTitle"]
4641
- /** (optional) If `true` the icon can receive focus */
4642
- focusable?: UserUserFill["focusable"]
4643
- }
4644
-
4645
- export type UserUserLineProps = {
4646
- /** (optional) The width and height in pixels */
4647
- size?: UserUserLine["size"]
4648
- /** (optional) Sets the icon color via the `fill` attribute */
4649
- selected?: UserUserLine["selected"]
4650
- /** (optional) When using the icon standalone, make it meaningful for accessibility */
4651
- accessibilityTitle?: UserUserLine["accessibilityTitle"]
4652
- /** (optional) If `true` the icon can receive focus */
4653
- focusable?: UserUserLine["focusable"]
4654
- }
4655
-
4656
4656
  // Augment Vue's GlobalComponents interface
4657
4657
  declare module 'vue' {
4658
4658
  interface GlobalComponents {
4659
- /**
4660
- * An accordion group is a collection of accordion components.
4661
- *
4662
- * ### Slots:
4663
- * - **default** - The content of the accordion group.
4664
- *
4665
- * ### CSS Parts:
4666
- * - **base** - The main accordion group container.
4667
- */
4668
- 'dap-ds-accordion-group': DefineCustomElement<DapDSAccordionGroup, DapDSAccordionGroupProps, {}>
4669
- /**
4670
- * Anchor heading is a heading with an anchor link.
4671
- *
4672
- * ### CSS Parts:
4673
- * - **base** - The main anchor heading container.
4674
- * - **link** - The link of the anchor heading. dap-ds-link element.
4675
- * - **link-base** - The base of the link part.
4676
- * - **text** - The text of the anchor heading.
4677
- */
4678
- 'dap-ds-anchor-heading': DefineCustomElement<DapDSAnchorHeading, DapDSAnchorHeadingProps, {}>
4679
4659
  /**
4680
4660
  * Avatar component can be used to display user profile images, initials, or icons.
4681
4661
  *
@@ -4696,21 +4676,6 @@ declare module 'vue' {
4696
4676
  * - **loading** - The loading indicator.
4697
4677
  */
4698
4678
  'dap-ds-avatar': DefineCustomElement<DapDSAvatar, DapDSAvatarProps, DapDSAvatarEvents>
4699
- /**
4700
- * Avatar group component displays multiple avatars in an organized layout with overflow management.
4701
- *
4702
- * ### Events:
4703
- * - **dds-overflow-click** - Fired when the overflow indicator is clicked.
4704
- *
4705
- * ### Slots:
4706
- * - **default** - The avatars to display in the group.
4707
- *
4708
- * ### CSS Parts:
4709
- * - **base** - The main container of the avatar group.
4710
- * - **avatars** - The container for the visible avatars.
4711
- * - **overflow** - The overflow indicator element.
4712
- */
4713
- 'dap-ds-avatar-group': DefineCustomElement<DapDSAvatarGroup, DapDSAvatarGroupProps, DapDSAvatarGroupEvents>
4714
4679
  /**
4715
4680
  * An accordion is a vertically stacked list of interactive items that can be expanded or collapsed to reveal or hide content.
4716
4681
  *
@@ -4737,6 +4702,45 @@ declare module 'vue' {
4737
4702
  * - **close-icon-base** - The base of the icon when the accordion is closed.
4738
4703
  */
4739
4704
  'dap-ds-accordion': DefineCustomElement<DapDSAccordion, DapDSAccordionProps, DapDSAccordionEvents>
4705
+ /**
4706
+ * Avatar group component displays multiple avatars in an organized layout with overflow management.
4707
+ *
4708
+ * ### Events:
4709
+ * - **dds-overflow-click** - Fired when the overflow indicator is clicked.
4710
+ *
4711
+ * ### Slots:
4712
+ * - **default** - The avatars to display in the group.
4713
+ *
4714
+ * ### CSS Parts:
4715
+ * - **base** - The main container of the avatar group.
4716
+ * - **avatars** - The container for the visible avatars.
4717
+ * - **overflow** - The overflow indicator element.
4718
+ */
4719
+ 'dap-ds-avatar-group': DefineCustomElement<DapDSAvatarGroup, DapDSAvatarGroupProps, DapDSAvatarGroupEvents>
4720
+ /**
4721
+ * A banner is a message displayed at the top of the page to provide important information to the user.
4722
+ *
4723
+ * ### Events:
4724
+ * - **dds-close** - Event fired when the banner is closed.
4725
+ *
4726
+ * ### Slots:
4727
+ * - **default** - The content of the banner.
4728
+ * - **actions** - Actions of banner
4729
+ * - **icon** - The icon of the banner.
4730
+ *
4731
+ * ### CSS Parts:
4732
+ * - **base** - The main banner container.
4733
+ * - **card-base** - The wrapper card container.
4734
+ * - **icon** - The icon of the banner.
4735
+ * - **icon-element** - The icon element of the banner.
4736
+ * - **icon-base** - The base of the icon.
4737
+ * - **closebutton** - The close button of the banner.
4738
+ * - **close-icon-element** - The icon element of the close button.
4739
+ * - **close-icon-base** - The base of the close button icon.
4740
+ * - **actions** - The actions of the banner.
4741
+ * - **title** - The title of the banner.
4742
+ */
4743
+ 'dap-ds-banner': DefineCustomElement<DapDSBanner, DapDSBannerProps, DapDSBannerEvents>
4740
4744
  /**
4741
4745
  * A badge is a small status descriptor for UI elements.
4742
4746
  *
@@ -4764,29 +4768,25 @@ declare module 'vue' {
4764
4768
  */
4765
4769
  'dap-ds-breadcrumb': DefineCustomElement<DapDSBreadcrumb, DapDSBreadcrumbProps, {}>
4766
4770
  /**
4767
- * A banner is a message displayed at the top of the page to provide important information to the user.
4771
+ * Anchor heading is a heading with an anchor link.
4768
4772
  *
4769
- * ### Events:
4770
- * - **dds-close** - Event fired when the banner is closed.
4773
+ * ### CSS Parts:
4774
+ * - **base** - The main anchor heading container.
4775
+ * - **link** - The link of the anchor heading. dap-ds-link element.
4776
+ * - **link-base** - The base of the link part.
4777
+ * - **text** - The text of the anchor heading.
4778
+ */
4779
+ 'dap-ds-anchor-heading': DefineCustomElement<DapDSAnchorHeading, DapDSAnchorHeadingProps, {}>
4780
+ /**
4781
+ * An accordion group is a collection of accordion components.
4771
4782
  *
4772
4783
  * ### Slots:
4773
- * - **default** - The content of the banner.
4774
- * - **actions** - Actions of banner
4775
- * - **icon** - The icon of the banner.
4784
+ * - **default** - The content of the accordion group.
4776
4785
  *
4777
4786
  * ### CSS Parts:
4778
- * - **base** - The main banner container.
4779
- * - **card-base** - The wrapper card container.
4780
- * - **icon** - The icon of the banner.
4781
- * - **icon-element** - The icon element of the banner.
4782
- * - **icon-base** - The base of the icon.
4783
- * - **closebutton** - The close button of the banner.
4784
- * - **close-icon-element** - The icon element of the close button.
4785
- * - **close-icon-base** - The base of the close button icon.
4786
- * - **actions** - The actions of the banner.
4787
- * - **title** - The title of the banner.
4787
+ * - **base** - The main accordion group container.
4788
4788
  */
4789
- 'dap-ds-banner': DefineCustomElement<DapDSBanner, DapDSBannerProps, DapDSBannerEvents>
4789
+ 'dap-ds-accordion-group': DefineCustomElement<DapDSAccordionGroup, DapDSAccordionGroupProps, {}>
4790
4790
  /**
4791
4791
  * A breadcrumb item is a secondary navigation scheme that reveals the user's location in a website or Web application.
4792
4792
  *
@@ -4808,39 +4808,15 @@ declare module 'vue' {
4808
4808
  * ### Events:
4809
4809
  * - **dds-loading-timeout** - Emitted when the loading timeout is reached
4810
4810
  *
4811
- * ### Slots:
4812
- * - **default** - The content of the button. Can contain text, icons, or other elements.
4813
- *
4814
- * ### CSS Parts:
4815
- * - **base** - The main button container.
4816
- * - **high-contrast** - The high contrast part of the button.
4817
- * - **content** - The content wrapper inside the button.
4818
- */
4819
- 'dap-ds-button': DefineCustomElement<DapDSButton, DapDSButtonProps, DapDSButtonEvents>
4820
- /**
4821
- *
4822
- *
4823
- * ### Events:
4824
- * - **dds-close** - Fired when the close button is clicked.
4825
- *
4826
- * ### Slots:
4827
- * - **default** - The content of the callout.
4828
- * - **title** - The title of the callout.
4829
- * - **icon** - The icon of the callout.
4830
- * - **actions** - The actions of the callout.
4831
- * - **close** - The close button of the callout.
4832
- *
4811
+ * ### Slots:
4812
+ * - **default** - The content of the button. Can contain text, icons, or other elements.
4813
+ *
4833
4814
  * ### CSS Parts:
4834
- * - **base** - The main callout container.
4835
- * - **content** - The content of the callout.
4836
- * - **card-content** - The content of the card.
4837
- * - **icon** - The icon of the callout.
4838
- * - **title** - The title of the callout.
4839
- * - **description** - The description of the callout.
4840
- * - **actions** - The actions of the callout.
4841
- * - **close** - The close button of the callout.
4815
+ * - **base** - The main button container.
4816
+ * - **high-contrast** - The high contrast part of the button.
4817
+ * - **content** - The content wrapper inside the button.
4842
4818
  */
4843
- 'dap-ds-callout': DefineCustomElement<DapDSCallout, DapDSCalloutProps, DapDSCalloutEvents>
4819
+ 'dap-ds-button': DefineCustomElement<DapDSButton, DapDSButtonProps, DapDSButtonEvents>
4844
4820
  /**
4845
4821
  * Calendar cell represents a single cell in the calendar.
4846
4822
  *
@@ -4874,6 +4850,30 @@ declare module 'vue' {
4874
4850
  * - **calendar-header-month-select** - The month select of the calendar header.
4875
4851
  */
4876
4852
  'dap-ds-calendar': DefineCustomElement<DapDSCalendar, DapDSCalendarProps, DapDSCalendarEvents>
4853
+ /**
4854
+ *
4855
+ *
4856
+ * ### Events:
4857
+ * - **dds-close** - Fired when the close button is clicked.
4858
+ *
4859
+ * ### Slots:
4860
+ * - **default** - The content of the callout.
4861
+ * - **title** - The title of the callout.
4862
+ * - **icon** - The icon of the callout.
4863
+ * - **actions** - The actions of the callout.
4864
+ * - **close** - The close button of the callout.
4865
+ *
4866
+ * ### CSS Parts:
4867
+ * - **base** - The main callout container.
4868
+ * - **content** - The content of the callout.
4869
+ * - **card-content** - The content of the card.
4870
+ * - **icon** - The icon of the callout.
4871
+ * - **title** - The title of the callout.
4872
+ * - **description** - The description of the callout.
4873
+ * - **actions** - The actions of the callout.
4874
+ * - **close** - The close button of the callout.
4875
+ */
4876
+ 'dap-ds-callout': DefineCustomElement<DapDSCallout, DapDSCalloutProps, DapDSCalloutEvents>
4877
4877
  /**
4878
4878
  * A card actions is a container for actions in a card.
4879
4879
  *
@@ -5816,6 +5816,48 @@ Used with dap-ds-select to create grouped options that render as native optgroup
5816
5816
  * - **mobile-footer** - The mobile footer of the select.
5817
5817
  */
5818
5818
  'dap-ds-select': DefineCustomElement<DapDSSelect, DapDSSelectProps, DapDSSelectEvents>
5819
+ /**
5820
+ * Side navigation group
5821
+ *
5822
+ * ### Slots:
5823
+ * - **default** - The content of the side navigation group.
5824
+ * - **submenu** - The submenu of the side navigation group.
5825
+ * - **suffix** - The suffix of the side navigation group.
5826
+ *
5827
+ * ### CSS Parts:
5828
+ * - **base** - The main side navigation group container.
5829
+ * - **title** - The title of the side navigation group.
5830
+ * - **link** - The link of the side navigation group.
5831
+ * - **toggle** - The toggle button of the side navigation group.
5832
+ * - **submenu** - The submenu of the side navigation group.
5833
+ */
5834
+ 'dap-ds-sidenav-group': DefineCustomElement<DapDSSideNavGroup, DapDSSideNavGroupProps, {}>
5835
+ /**
5836
+ * Side navigation item
5837
+ *
5838
+ * ### Slots:
5839
+ * - **default** - The content of the side navigation item.
5840
+ * - **suffix** - The suffix of the side navigation item.
5841
+ *
5842
+ * ### CSS Parts:
5843
+ * - **base** - The main side navigation item container.
5844
+ * - **link** - The link of the side navigation item.
5845
+ */
5846
+ 'dap-ds-sidenav-item': DefineCustomElement<DapDSSideNavItem, DapDSSideNavItemProps, {}>
5847
+ /**
5848
+ * Side navigation is a list of links that are used to navigate to different sections of a page.
5849
+ *
5850
+ * ### Events:
5851
+ * - **dds-item-click** - Event fired when the side navigation item is clicked.
5852
+ *
5853
+ * ### Slots:
5854
+ * - **default** - The content of the side navigation.
5855
+ *
5856
+ * ### CSS Parts:
5857
+ * - **base** - The main side navigation container.
5858
+ * - **menu** - The menu of the side navigation.
5859
+ */
5860
+ 'dap-ds-sidenav': DefineCustomElement<DapDSSideNav, DapDSSideNavProps, DapDSSideNavEvents>
5819
5861
  /**
5820
5862
  * A skeleton loader component for displaying placeholder content while loading.
5821
5863
  *
@@ -5967,48 +6009,6 @@ Used with dap-ds-select to create grouped options that render as native optgroup
5967
6009
  * - **default** - The default slot. Accepts `dap-ds-table-row` elements.
5968
6010
  */
5969
6011
  'dap-ds-table': DefineCustomElement<DapDSTable, DapDSTableProps, {}>
5970
- /**
5971
- * Side navigation group
5972
- *
5973
- * ### Slots:
5974
- * - **default** - The content of the side navigation group.
5975
- * - **submenu** - The submenu of the side navigation group.
5976
- * - **suffix** - The suffix of the side navigation group.
5977
- *
5978
- * ### CSS Parts:
5979
- * - **base** - The main side navigation group container.
5980
- * - **title** - The title of the side navigation group.
5981
- * - **link** - The link of the side navigation group.
5982
- * - **toggle** - The toggle button of the side navigation group.
5983
- * - **submenu** - The submenu of the side navigation group.
5984
- */
5985
- 'dap-ds-sidenav-group': DefineCustomElement<DapDSSideNavGroup, DapDSSideNavGroupProps, {}>
5986
- /**
5987
- * Side navigation item
5988
- *
5989
- * ### Slots:
5990
- * - **default** - The content of the side navigation item.
5991
- * - **suffix** - The suffix of the side navigation item.
5992
- *
5993
- * ### CSS Parts:
5994
- * - **base** - The main side navigation item container.
5995
- * - **link** - The link of the side navigation item.
5996
- */
5997
- 'dap-ds-sidenav-item': DefineCustomElement<DapDSSideNavItem, DapDSSideNavItemProps, {}>
5998
- /**
5999
- * Side navigation is a list of links that are used to navigate to different sections of a page.
6000
- *
6001
- * ### Events:
6002
- * - **dds-item-click** - Event fired when the side navigation item is clicked.
6003
- *
6004
- * ### Slots:
6005
- * - **default** - The content of the side navigation.
6006
- *
6007
- * ### CSS Parts:
6008
- * - **base** - The main side navigation container.
6009
- * - **menu** - The menu of the side navigation.
6010
- */
6011
- 'dap-ds-sidenav': DefineCustomElement<DapDSSideNav, DapDSSideNavProps, DapDSSideNavEvents>
6012
6012
  /**
6013
6013
  * A textarea is a multi-line text input field.
6014
6014
  *
@@ -6178,6 +6178,21 @@ Used with dap-ds-select to create grouped options that render as native optgroup
6178
6178
  * - **optional** - The optional indicator of the form label.
6179
6179
  */
6180
6180
  'dap-ds-form-label': DefineCustomElement<DapDSFormLabel, DapDSFormLabelProps, {}>
6181
+ /**
6182
+ * An input group is a container for inputs.
6183
+ *
6184
+ * ### Slots:
6185
+ * - **default** - The content of the input group items.
6186
+ * - **feedback-icon** - The custom icon of the feedback.
6187
+ *
6188
+ * ### CSS Parts:
6189
+ * - **base** - The main input group container.
6190
+ * - **label** - The label of the input group.
6191
+ * - **description** - The description of the input group.
6192
+ * - **tooltip** - The tooltip of the input group.
6193
+ * - **container** - The container of the input group items.
6194
+ */
6195
+ 'dap-ds-input-group': DefineCustomElement<DapDSInputGroup, DapDSInputGroupProps, {}>
6181
6196
  /**
6182
6197
  * A radio group is a form element that allows the user to select one option from a set.
6183
6198
  *
@@ -6197,21 +6212,6 @@ Used with dap-ds-select to create grouped options that render as native optgroup
6197
6212
  * - **container** - The container of the radio group items.
6198
6213
  */
6199
6214
  'dap-ds-radio-group': DefineCustomElement<DapDSRadioGroup, DapDSRadioGroupProps, DapDSRadioGroupEvents>
6200
- /**
6201
- * An input group is a container for inputs.
6202
- *
6203
- * ### Slots:
6204
- * - **default** - The content of the input group items.
6205
- * - **feedback-icon** - The custom icon of the feedback.
6206
- *
6207
- * ### CSS Parts:
6208
- * - **base** - The main input group container.
6209
- * - **label** - The label of the input group.
6210
- * - **description** - The description of the input group.
6211
- * - **tooltip** - The tooltip of the input group.
6212
- * - **container** - The container of the input group items.
6213
- */
6214
- 'dap-ds-input-group': DefineCustomElement<DapDSInputGroup, DapDSInputGroupProps, {}>
6215
6215
  /**
6216
6216
  * An icon
6217
6217
  *
@@ -6253,14 +6253,14 @@ Used with dap-ds-select to create grouped options that render as native optgroup
6253
6253
  * ### CSS Parts:
6254
6254
  * - **base** - The main icon container.
6255
6255
  */
6256
- 'dap-ds-icon-arrow-left-s-fill': DefineCustomElement<ArrowsArrowLeftSFill, ArrowsArrowLeftSFillProps, {}>
6256
+ 'dap-ds-icon-arrow-left-line': DefineCustomElement<ArrowsArrowLeftLine, ArrowsArrowLeftLineProps, {}>
6257
6257
  /**
6258
6258
  * An icon
6259
6259
  *
6260
6260
  * ### CSS Parts:
6261
6261
  * - **base** - The main icon container.
6262
6262
  */
6263
- 'dap-ds-icon-arrow-left-line': DefineCustomElement<ArrowsArrowLeftLine, ArrowsArrowLeftLineProps, {}>
6263
+ 'dap-ds-icon-arrow-left-s-fill': DefineCustomElement<ArrowsArrowLeftSFill, ArrowsArrowLeftSFillProps, {}>
6264
6264
  /**
6265
6265
  * An icon
6266
6266
  *
@@ -6274,21 +6274,21 @@ Used with dap-ds-select to create grouped options that render as native optgroup
6274
6274
  * ### CSS Parts:
6275
6275
  * - **base** - The main icon container.
6276
6276
  */
6277
- 'dap-ds-icon-arrow-right-down-line': DefineCustomElement<ArrowsArrowRightDownLine, ArrowsArrowRightDownLineProps, {}>
6277
+ 'dap-ds-icon-arrow-left-up-line': DefineCustomElement<ArrowsArrowLeftUpLine, ArrowsArrowLeftUpLineProps, {}>
6278
6278
  /**
6279
6279
  * An icon
6280
6280
  *
6281
6281
  * ### CSS Parts:
6282
6282
  * - **base** - The main icon container.
6283
6283
  */
6284
- 'dap-ds-icon-arrow-right-l-line': DefineCustomElement<ArrowsArrowRightLLine, ArrowsArrowRightLLineProps, {}>
6284
+ 'dap-ds-icon-arrow-right-down-line': DefineCustomElement<ArrowsArrowRightDownLine, ArrowsArrowRightDownLineProps, {}>
6285
6285
  /**
6286
6286
  * An icon
6287
6287
  *
6288
6288
  * ### CSS Parts:
6289
6289
  * - **base** - The main icon container.
6290
6290
  */
6291
- 'dap-ds-icon-arrow-left-up-line': DefineCustomElement<ArrowsArrowLeftUpLine, ArrowsArrowLeftUpLineProps, {}>
6291
+ 'dap-ds-icon-arrow-right-l-line': DefineCustomElement<ArrowsArrowRightLLine, ArrowsArrowRightLLineProps, {}>
6292
6292
  /**
6293
6293
  * An icon
6294
6294
  *
@@ -6463,14 +6463,42 @@ Used with dap-ds-select to create grouped options that render as native optgroup
6463
6463
  * ### CSS Parts:
6464
6464
  * - **base** - The main icon container.
6465
6465
  */
6466
- 'dap-ds-icon-add-line': DefineCustomElement<SystemAddLine, SystemAddLineProps, {}>
6466
+ 'dap-ds-icon-cookie-line': DefineCustomElement<OthersCookieLine, OthersCookieLineProps, {}>
6467
6467
  /**
6468
6468
  * An icon
6469
6469
  *
6470
6470
  * ### CSS Parts:
6471
6471
  * - **base** - The main icon container.
6472
6472
  */
6473
- 'dap-ds-icon-cookie-line': DefineCustomElement<OthersCookieLine, OthersCookieLineProps, {}>
6473
+ 'dap-ds-icon-account-circle-fill': DefineCustomElement<UserAccountCircleFill, UserAccountCircleFillProps, {}>
6474
+ /**
6475
+ * An icon
6476
+ *
6477
+ * ### CSS Parts:
6478
+ * - **base** - The main icon container.
6479
+ */
6480
+ 'dap-ds-icon-account-circle-line': DefineCustomElement<UserAccountCircleLine, UserAccountCircleLineProps, {}>
6481
+ /**
6482
+ * An icon
6483
+ *
6484
+ * ### CSS Parts:
6485
+ * - **base** - The main icon container.
6486
+ */
6487
+ 'dap-ds-icon-user-fill': DefineCustomElement<UserUserFill, UserUserFillProps, {}>
6488
+ /**
6489
+ * An icon
6490
+ *
6491
+ * ### CSS Parts:
6492
+ * - **base** - The main icon container.
6493
+ */
6494
+ 'dap-ds-icon-user-line': DefineCustomElement<UserUserLine, UserUserLineProps, {}>
6495
+ /**
6496
+ * An icon
6497
+ *
6498
+ * ### CSS Parts:
6499
+ * - **base** - The main icon container.
6500
+ */
6501
+ 'dap-ds-icon-add-line': DefineCustomElement<SystemAddLine, SystemAddLineProps, {}>
6474
6502
  /**
6475
6503
  * An icon
6476
6504
  *
@@ -6800,34 +6828,6 @@ Used with dap-ds-select to create grouped options that render as native optgroup
6800
6828
  * - **base** - The main icon container.
6801
6829
  */
6802
6830
  'dap-ds-icon-zoom-out-line': DefineCustomElement<SystemZoomOutLine, SystemZoomOutLineProps, {}>
6803
- /**
6804
- * An icon
6805
- *
6806
- * ### CSS Parts:
6807
- * - **base** - The main icon container.
6808
- */
6809
- 'dap-ds-icon-account-circle-fill': DefineCustomElement<UserAccountCircleFill, UserAccountCircleFillProps, {}>
6810
- /**
6811
- * An icon
6812
- *
6813
- * ### CSS Parts:
6814
- * - **base** - The main icon container.
6815
- */
6816
- 'dap-ds-icon-account-circle-line': DefineCustomElement<UserAccountCircleLine, UserAccountCircleLineProps, {}>
6817
- /**
6818
- * An icon
6819
- *
6820
- * ### CSS Parts:
6821
- * - **base** - The main icon container.
6822
- */
6823
- 'dap-ds-icon-user-fill': DefineCustomElement<UserUserFill, UserUserFillProps, {}>
6824
- /**
6825
- * An icon
6826
- *
6827
- * ### CSS Parts:
6828
- * - **base** - The main icon container.
6829
- */
6830
- 'dap-ds-icon-user-line': DefineCustomElement<UserUserLine, UserUserLineProps, {}>
6831
6831
  }
6832
6832
  }
6833
6833
 
@@ -6835,19 +6835,19 @@ Used with dap-ds-select to create grouped options that render as native optgroup
6835
6835
  declare global {
6836
6836
  namespace JSX {
6837
6837
  interface IntrinsicElements {
6838
- 'dap-ds-accordion-group': DapDSAccordionGroupProps & DapDSAccordionGroupSlots
6839
- 'dap-ds-anchor-heading': DapDSAnchorHeadingProps
6840
6838
  'dap-ds-avatar': DapDSAvatarProps & DapDSAvatarEvents & DapDSAvatarSlots
6841
- 'dap-ds-avatar-group': DapDSAvatarGroupProps & DapDSAvatarGroupEvents & DapDSAvatarGroupSlots
6842
6839
  'dap-ds-accordion': DapDSAccordionProps & DapDSAccordionEvents & DapDSAccordionSlots
6840
+ 'dap-ds-avatar-group': DapDSAvatarGroupProps & DapDSAvatarGroupEvents & DapDSAvatarGroupSlots
6841
+ 'dap-ds-banner': DapDSBannerProps & DapDSBannerEvents & DapDSBannerSlots
6843
6842
  'dap-ds-badge': DapDSBadgeProps & DapDSBadgeSlots
6844
6843
  'dap-ds-breadcrumb': DapDSBreadcrumbProps & DapDSBreadcrumbSlots
6845
- 'dap-ds-banner': DapDSBannerProps & DapDSBannerEvents & DapDSBannerSlots
6844
+ 'dap-ds-anchor-heading': DapDSAnchorHeadingProps
6845
+ 'dap-ds-accordion-group': DapDSAccordionGroupProps & DapDSAccordionGroupSlots
6846
6846
  'dap-ds-breadcrumb-item': DapDSBreadcrumbItemProps & DapDSBreadcrumbItemSlots
6847
6847
  'dap-ds-button': DapDSButtonProps & DapDSButtonEvents & DapDSButtonSlots
6848
- 'dap-ds-callout': DapDSCalloutProps & DapDSCalloutEvents & DapDSCalloutSlots
6849
6848
  'dap-ds-calendar-cell': DapDSCalendarCellProps & DapDSCalendarCellSlots
6850
6849
  'dap-ds-calendar': DapDSCalendarProps & DapDSCalendarEvents & DapDSCalendarSlots
6850
+ 'dap-ds-callout': DapDSCalloutProps & DapDSCalloutEvents & DapDSCalloutSlots
6851
6851
  'dap-ds-card-actions': DapDSCardActionsProps & DapDSCardActionsSlots
6852
6852
  'dap-ds-card-content': DapDSCardContentProps & DapDSCardContentSlots
6853
6853
  'dap-ds-card-image': DapDSCardImageProps & DapDSCardImageSlots
@@ -6900,6 +6900,9 @@ declare global {
6900
6900
  'dap-ds-scroll-progress': DapDSScrollProgressProps
6901
6901
  'dap-ds-search': DapDSSearchProps & DapDSSearchEvents & DapDSSearchSlots
6902
6902
  'dap-ds-select': DapDSSelectProps & DapDSSelectEvents & DapDSSelectSlots
6903
+ 'dap-ds-sidenav-group': DapDSSideNavGroupProps & DapDSSideNavGroupSlots
6904
+ 'dap-ds-sidenav-item': DapDSSideNavItemProps & DapDSSideNavItemSlots
6905
+ 'dap-ds-sidenav': DapDSSideNavProps & DapDSSideNavEvents & DapDSSideNavSlots
6903
6906
  'dap-ds-skeleton': DapDSSkeletonProps
6904
6907
  'dap-ds-skip-link': DapDSSkipLinkProps & DapDSSkipLinkSlots
6905
6908
  'dap-ds-snackbar-message': DapDSSnackbarMessageProps & DapDSSnackbarMessageEvents & DapDSSnackbarMessageSlots
@@ -6913,9 +6916,6 @@ declare global {
6913
6916
  'dap-ds-table-header': DapDSTableHeaderProps & DapDSTableHeaderSlots
6914
6917
  'dap-ds-table-row': DapDSTableRowProps & DapDSTableRowSlots
6915
6918
  'dap-ds-table': DapDSTableProps & DapDSTableSlots
6916
- 'dap-ds-sidenav-group': DapDSSideNavGroupProps & DapDSSideNavGroupSlots
6917
- 'dap-ds-sidenav-item': DapDSSideNavItemProps & DapDSSideNavItemSlots
6918
- 'dap-ds-sidenav': DapDSSideNavProps & DapDSSideNavEvents & DapDSSideNavSlots
6919
6919
  'dap-ds-textarea': DapDSTextareaProps & DapDSTextareaEvents & DapDSTextareaSlots
6920
6920
  'dap-ds-timeline-item': DapDSTimelineItemProps & DapDSTimelineItemSlots
6921
6921
  'dap-ds-timeline': DapDSTimelineProps & DapDSTimelineSlots
@@ -6927,19 +6927,19 @@ declare global {
6927
6927
  'dap-ds-tray': DapDSTrayProps & DapDSTrayEvents & DapDSTraySlots
6928
6928
  'dap-ds-typography': DapDSTypographyProps & DapDSTypographySlots
6929
6929
  'dap-ds-form-label': DapDSFormLabelProps
6930
- 'dap-ds-radio-group': DapDSRadioGroupProps & DapDSRadioGroupEvents & DapDSRadioGroupSlots
6931
6930
  'dap-ds-input-group': DapDSInputGroupProps & DapDSInputGroupSlots
6931
+ 'dap-ds-radio-group': DapDSRadioGroupProps & DapDSRadioGroupEvents & DapDSRadioGroupSlots
6932
6932
  'dap-ds-icon-arrow-down-line': ArrowsArrowDownLineProps
6933
6933
  'dap-ds-icon-arrow-down-s-fill': ArrowsArrowDownSFillProps
6934
6934
  'dap-ds-icon-arrow-down-s-line': ArrowsArrowDownSLineProps
6935
6935
  'dap-ds-icon-arrow-left-down-line': ArrowsArrowLeftDownLineProps
6936
6936
  'dap-ds-icon-arrow-left-l-line': ArrowsArrowLeftLLineProps
6937
- 'dap-ds-icon-arrow-left-s-fill': ArrowsArrowLeftSFillProps
6938
6937
  'dap-ds-icon-arrow-left-line': ArrowsArrowLeftLineProps
6938
+ 'dap-ds-icon-arrow-left-s-fill': ArrowsArrowLeftSFillProps
6939
6939
  'dap-ds-icon-arrow-left-s-line': ArrowsArrowLeftSLineProps
6940
+ 'dap-ds-icon-arrow-left-up-line': ArrowsArrowLeftUpLineProps
6940
6941
  'dap-ds-icon-arrow-right-down-line': ArrowsArrowRightDownLineProps
6941
6942
  'dap-ds-icon-arrow-right-l-line': ArrowsArrowRightLLineProps
6942
- 'dap-ds-icon-arrow-left-up-line': ArrowsArrowLeftUpLineProps
6943
6943
  'dap-ds-icon-arrow-right-line': ArrowsArrowRightLineProps
6944
6944
  'dap-ds-icon-arrow-right-s-fill': ArrowsArrowRightSFillProps
6945
6945
  'dap-ds-icon-arrow-right-s-line': ArrowsArrowRightSLineProps
@@ -6964,8 +6964,12 @@ declare global {
6964
6964
  'dap-ds-icon-separator': EditorSeparatorProps
6965
6965
  'dap-ds-icon-heart-fill': HealthHeartFillProps
6966
6966
  'dap-ds-icon-heart-line': HealthHeartLineProps
6967
- 'dap-ds-icon-add-line': SystemAddLineProps
6968
6967
  'dap-ds-icon-cookie-line': OthersCookieLineProps
6968
+ 'dap-ds-icon-account-circle-fill': UserAccountCircleFillProps
6969
+ 'dap-ds-icon-account-circle-line': UserAccountCircleLineProps
6970
+ 'dap-ds-icon-user-fill': UserUserFillProps
6971
+ 'dap-ds-icon-user-line': UserUserLineProps
6972
+ 'dap-ds-icon-add-line': SystemAddLineProps
6969
6973
  'dap-ds-icon-alert-fill': SystemAlertFillProps
6970
6974
  'dap-ds-icon-alert-line': SystemAlertLineProps
6971
6975
  'dap-ds-icon-check-line': SystemCheckLineProps
@@ -7013,10 +7017,6 @@ declare global {
7013
7017
  'dap-ds-icon-upload-line': SystemUploadLineProps
7014
7018
  'dap-ds-icon-zoom-in-line': SystemZoomInLineProps
7015
7019
  'dap-ds-icon-zoom-out-line': SystemZoomOutLineProps
7016
- 'dap-ds-icon-account-circle-fill': UserAccountCircleFillProps
7017
- 'dap-ds-icon-account-circle-line': UserAccountCircleLineProps
7018
- 'dap-ds-icon-user-fill': UserUserFillProps
7019
- 'dap-ds-icon-user-line': UserUserLineProps
7020
7020
  }
7021
7021
  }
7022
7022
  }