dap-design-system 0.60.1 → 0.60.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -217,11 +217,6 @@ export interface DapDSAccordionEvents {
217
217
  onDdsClosed?: (event: CustomEvent<{ open: boolean, item: AccordionBaseElement }>) => 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 DapDSAvatarEvents {
226
221
  /** Fired when the image loads successfully. */
227
222
  onDdsLoad?: (event: CustomEvent) => void
@@ -229,6 +224,11 @@ export interface DapDSAvatarEvents {
229
224
  onDdsError?: (event: CustomEvent) => 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 DapDSCalendarEvents {
243
- /** Fired when the calendar value changes. */
244
- onDdsChange?: (event: CustomEvent<{ value: Dayjs }>) => void
245
- }
246
-
247
242
  export interface DapDSCalloutEvents {
248
243
  /** Fired when the close button is clicked. */
249
244
  onDdsClose?: (event: CustomEvent) => void
250
245
  }
251
246
 
247
+ export interface DapDSCalendarEvents {
248
+ /** Fired when the calendar value changes. */
249
+ onDdsChange?: (event: CustomEvent<{ value: Dayjs }>) => 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
@@ -604,6 +604,11 @@ export interface DapDSTextareaEvents {
604
604
  onDdsSelect?: (event: CustomEvent<{ value: string }>) => void
605
605
  }
606
606
 
607
+ export interface DapDSTOCEvents {
608
+ /** Event that is triggered when the anchor changes. */
609
+ onDdsAnchorChange?: (event: CustomEvent<{ selectedItem: HTMLAnchorElement, anchorElement: IntersectionObserverEntry | HTMLElement }>) => void
610
+ }
611
+
607
612
  export interface DapDSTimeGridEvents {
608
613
  /** Fired when time selection changes. */
609
614
  onDdsChange?: (event: CustomEvent<{ detail: TimeSelection }>) => void
@@ -628,11 +633,6 @@ export interface DapDSTimePickerEvents {
628
633
  onDdsBlur?: (event: CustomEvent) => void
629
634
  }
630
635
 
631
- export interface DapDSTOCEvents {
632
- /** Event that is triggered when the anchor changes. */
633
- onDdsAnchorChange?: (event: CustomEvent<{ selectedItem: HTMLAnchorElement, anchorElement: IntersectionObserverEntry | HTMLElement }>) => void
634
- }
635
-
636
636
  export interface DapDSTrayEvents {
637
637
  /** Fires before the tray opens. */
638
638
  onDdsBeforeOpen?: (event: CustomEvent) => void
@@ -666,11 +666,6 @@ export interface DapDSAccordionSlots {
666
666
  'icon-closed'?: () => any
667
667
  }
668
668
 
669
- export interface DapDSAvatarGroupSlots {
670
- /** The avatars to display in the group. */
671
- default?: () => any
672
- }
673
-
674
669
  export interface DapDSAvatarSlots {
675
670
  /** The icon to display when variant is 'icon'. */
676
671
  'icon'?: () => any
@@ -678,6 +673,16 @@ export interface DapDSAvatarSlots {
678
673
  'fallback'?: () => any
679
674
  }
680
675
 
676
+ export interface DapDSAccordionGroupSlots {
677
+ /** The content of the accordion group. */
678
+ default?: () => any
679
+ }
680
+
681
+ export interface DapDSAvatarGroupSlots {
682
+ /** The avatars to display in the group. */
683
+ default?: () => any
684
+ }
685
+
681
686
  export interface DapDSBadgeSlots {
682
687
  /** The content of the badge. */
683
688
  default?: () => any
@@ -685,11 +690,6 @@ export interface DapDSBadgeSlots {
685
690
  'icon'?: () => any
686
691
  }
687
692
 
688
- export interface DapDSAccordionGroupSlots {
689
- /** The content of the accordion group. */
690
- default?: () => any
691
- }
692
-
693
693
  export interface DapDSBannerSlots {
694
694
  /** The content of the banner. */
695
695
  default?: () => any
@@ -718,16 +718,6 @@ 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
-
731
721
  export interface DapDSCalloutSlots {
732
722
  /** The content of the callout. */
733
723
  default?: () => any
@@ -771,6 +761,16 @@ export interface DapDSCardSlots {
771
761
  default?: () => any
772
762
  }
773
763
 
764
+ export interface DapDSCalendarCellSlots {
765
+ /** The content of the calendar cell. */
766
+ default?: () => any
767
+ }
768
+
769
+ export interface DapDSCalendarSlots {
770
+ /** The content of the calendar. */
771
+ default?: () => any
772
+ }
773
+
774
774
  export interface DapDSCodePuncherSlots {
775
775
  /** Slot for code-puncher-group, code-puncher-slot, and code-puncher-separator elements. */
776
776
  default?: () => any
@@ -919,11 +919,6 @@ export interface DapDSNavigationMenuSlots {
919
919
  default?: () => any
920
920
  }
921
921
 
922
- export interface DapDSNotificationBadgeSlots {
923
- /** The content of the notification badge. */
924
- default?: () => any
925
- }
926
-
927
922
  export interface DapDSNumberInputSlots {
928
923
  /** The custom icon of the feedback. */
929
924
  'feedback-icon'?: () => any
@@ -945,6 +940,11 @@ export interface DapDSOptionGroupSlots {
945
940
  default?: () => any
946
941
  }
947
942
 
943
+ export interface DapDSNotificationBadgeSlots {
944
+ /** The content of the notification badge. */
945
+ default?: () => any
946
+ }
947
+
948
948
  export interface DapDSOptionItemSlots {
949
949
  /** The prefix of the option item. */
950
950
  'prefix'?: () => any
@@ -1148,25 +1148,6 @@ export type DapDSAccordionProps = {
1148
1148
  loading?: DapDSAccordion["loading"]
1149
1149
  }
1150
1150
 
1151
- export type DapDSAvatarGroupProps = {
1152
- /** Layout type for the avatar group */
1153
- layout?: DapDSAvatarGroup["layout"]
1154
- /** Maximum number of avatars to show before showing overflow */
1155
- max?: DapDSAvatarGroup["max"]
1156
- /** Whether to show the total count in overflow indicator */
1157
- "show-total"?: DapDSAvatarGroup["showTotal"]
1158
- /** Interactive overflow indicator */
1159
- "interactive-overflow"?: DapDSAvatarGroup["interactiveOverflow"]
1160
- /** Accessible label for the avatar group */
1161
- label?: DapDSAvatarGroup["label"]
1162
- /** Accessible label for the overflow indicator */
1163
- "overflow-label"?: DapDSAvatarGroup["overflowLabel"]
1164
- /** The size of avatars in the group. Default is `md`. See SizedMixin. */
1165
- size?: DapDSAvatarGroup["size"]
1166
- /** Responsive size map (e.g. "md:lg"); see SizedMixin. */
1167
- sizeMap?: DapDSAvatarGroup["sizeMap"]
1168
- }
1169
-
1170
1151
  export type DapDSAvatarProps = {
1171
1152
  /** The shape of the avatar */
1172
1153
  shape?: DapDSAvatar["shape"]
@@ -1194,17 +1175,11 @@ export type DapDSAvatarProps = {
1194
1175
  sizeMap?: DapDSAvatar["sizeMap"]
1195
1176
  }
1196
1177
 
1197
- export type DapDSBadgeProps = {
1198
- /** The type of the badge */
1199
- type?: DapDSBadge["type"]
1200
- /** The icon of the badge, this is a name of a built in icon */
1201
- icon?: DapDSBadge["icon"]
1202
- /** Whether the badge represents dynamic content that should announce changes */
1203
- live?: DapDSBadge["live"]
1204
- /** The size of the badge. Default is `sm`. */
1205
- size?: DapDSBadge["size"]
1206
- /** Responsive size map (e.g. "md:lg"). */
1207
- sizeMap?: DapDSBadge["sizeMap"]
1178
+ export type DapDSAccordionGroupProps = {
1179
+ /** Whether to close other accordions when one is opened. */
1180
+ autoClose?: DapDSAccordionGroup["autoClose"]
1181
+ /** The variant of the accordion */
1182
+ variant?: DapDSAccordionGroup["variant"]
1208
1183
  }
1209
1184
 
1210
1185
  export type DapDSAnchorHeadingProps = {
@@ -1218,11 +1193,36 @@ export type DapDSAnchorHeadingProps = {
1218
1193
  anchorTitle?: DapDSAnchorHeading["anchorTitle"]
1219
1194
  }
1220
1195
 
1221
- export type DapDSAccordionGroupProps = {
1222
- /** Whether to close other accordions when one is opened. */
1223
- autoClose?: DapDSAccordionGroup["autoClose"]
1224
- /** The variant of the accordion */
1225
- variant?: DapDSAccordionGroup["variant"]
1196
+ export type DapDSAvatarGroupProps = {
1197
+ /** Layout type for the avatar group */
1198
+ layout?: DapDSAvatarGroup["layout"]
1199
+ /** Maximum number of avatars to show before showing overflow */
1200
+ max?: DapDSAvatarGroup["max"]
1201
+ /** Whether to show the total count in overflow indicator */
1202
+ "show-total"?: DapDSAvatarGroup["showTotal"]
1203
+ /** Interactive overflow indicator */
1204
+ "interactive-overflow"?: DapDSAvatarGroup["interactiveOverflow"]
1205
+ /** Accessible label for the avatar group */
1206
+ label?: DapDSAvatarGroup["label"]
1207
+ /** Accessible label for the overflow indicator */
1208
+ "overflow-label"?: DapDSAvatarGroup["overflowLabel"]
1209
+ /** The size of avatars in the group. Default is `md`. See SizedMixin. */
1210
+ size?: DapDSAvatarGroup["size"]
1211
+ /** Responsive size map (e.g. "md:lg"); see SizedMixin. */
1212
+ sizeMap?: DapDSAvatarGroup["sizeMap"]
1213
+ }
1214
+
1215
+ export type DapDSBadgeProps = {
1216
+ /** The type of the badge */
1217
+ type?: DapDSBadge["type"]
1218
+ /** The icon of the badge, this is a name of a built in icon */
1219
+ icon?: DapDSBadge["icon"]
1220
+ /** Whether the badge represents dynamic content that should announce changes */
1221
+ live?: DapDSBadge["live"]
1222
+ /** The size of the badge. Default is `sm`. */
1223
+ size?: DapDSBadge["size"]
1224
+ /** Responsive size map (e.g. "md:lg"). */
1225
+ sizeMap?: DapDSBadge["sizeMap"]
1226
1226
  }
1227
1227
 
1228
1228
  export type DapDSBannerProps = {
@@ -1293,68 +1293,6 @@ export type DapDSButtonProps = {
1293
1293
  sizeMap?: DapDSButton["sizeMap"]
1294
1294
  }
1295
1295
 
1296
- export type DapDSCalendarCellProps = {
1297
- /** Whether the calendar cell is selected. */
1298
- selected?: DapDSCalendarCell["selected"]
1299
- /** Whether the calendar cell is disabled. */
1300
- disabledDay?: DapDSCalendarCell["disabledDay"]
1301
- /** Whether the calendar cell is today. */
1302
- today?: DapDSCalendarCell["today"]
1303
- /** Whether the calendar cell is out of range. */
1304
- outOfRange?: DapDSCalendarCell["outOfRange"]
1305
- /** Whether the calendar cell is a date header. */
1306
- header?: DapDSCalendarCell["header"]
1307
- /** Whether the calendar cell is focused. */
1308
- focused?: DapDSCalendarCell["focused"]
1309
- /** Whether the calendar cell is the start of a range. */
1310
- rangestart?: DapDSCalendarCell["rangestart"]
1311
- /** Whether the calendar cell is the end of a range. */
1312
- rangeend?: DapDSCalendarCell["rangeend"]
1313
- /** Whether the calendar cell is in the middle of a range. */
1314
- inrange?: DapDSCalendarCell["inrange"]
1315
- /** The locale of the calendar cell. */
1316
- locale?: DapDSCalendarCell["locale"]
1317
- /** The value of the calendar cell. */
1318
- value?: DapDSCalendarCell["value"]
1319
- /** */
1320
- label?: DapDSCalendarCell["label"]
1321
- /** */
1322
- focusElement?: DapDSCalendarCell["focusElement"]
1323
- }
1324
-
1325
- export type DapDSCalendarProps = {
1326
- /** The mode of the calendar - single date or range selection. */
1327
- mode?: DapDSCalendar["mode"]
1328
- /** Whether to hide dates from adjacent months (previous/next) in the calendar grid. When not explicitly set, defaults to false for single mode and true for range mode. */
1329
- hideAdjacentMonths?: DapDSCalendar["hideAdjacentMonths"]
1330
- /** The locale of the calendar. */
1331
- locale?: DapDSCalendar["locale"]
1332
- /** `data-testid` for the previous-month button. */
1333
- prevButtonTestId?: DapDSCalendar["prevButtonTestId"]
1334
- /** `data-testid` for the next-month button. */
1335
- nextButtonTestId?: DapDSCalendar["nextButtonTestId"]
1336
- /** The value of the calendar. */
1337
- value?: DapDSCalendar["value"]
1338
- /** The start date of the range selection (only used in range mode). */
1339
- rangeStart?: DapDSCalendar["rangeStart"]
1340
- /** The end date of the range selection (only used in range mode). */
1341
- rangeEnd?: DapDSCalendar["rangeEnd"]
1342
- /** The current visible date of the calendar. Only the month and year are considered. */
1343
- currentDate?: DapDSCalendar["currentDate"]
1344
- /** The minimum date of the calendar. Only the month and year are considered. */
1345
- minDate?: DapDSCalendar["minDate"]
1346
- /** The maximum date of the calendar. Only the month and year are considered. */
1347
- maxDate?: DapDSCalendar["maxDate"]
1348
- /** The function to determine if the date is disabled. */
1349
- disabledDate?: DapDSCalendar["disabledDate"]
1350
- /** */
1351
- startDate?: DapDSCalendar["startDate"]
1352
- /** */
1353
- endDate?: DapDSCalendar["endDate"]
1354
- /** */
1355
- shouldHideAdjacentMonths?: DapDSCalendar["shouldHideAdjacentMonths"]
1356
- }
1357
-
1358
1296
  export type DapDSCalloutProps = {
1359
1297
  /** The variant of the callout */
1360
1298
  variant?: DapDSCallout["variant"]
@@ -1462,6 +1400,68 @@ export type DapDSCardProps = {
1462
1400
  sizeMap?: DapDSCard["sizeMap"]
1463
1401
  }
1464
1402
 
1403
+ export type DapDSCalendarCellProps = {
1404
+ /** Whether the calendar cell is selected. */
1405
+ selected?: DapDSCalendarCell["selected"]
1406
+ /** Whether the calendar cell is disabled. */
1407
+ disabledDay?: DapDSCalendarCell["disabledDay"]
1408
+ /** Whether the calendar cell is today. */
1409
+ today?: DapDSCalendarCell["today"]
1410
+ /** Whether the calendar cell is out of range. */
1411
+ outOfRange?: DapDSCalendarCell["outOfRange"]
1412
+ /** Whether the calendar cell is a date header. */
1413
+ header?: DapDSCalendarCell["header"]
1414
+ /** Whether the calendar cell is focused. */
1415
+ focused?: DapDSCalendarCell["focused"]
1416
+ /** Whether the calendar cell is the start of a range. */
1417
+ rangestart?: DapDSCalendarCell["rangestart"]
1418
+ /** Whether the calendar cell is the end of a range. */
1419
+ rangeend?: DapDSCalendarCell["rangeend"]
1420
+ /** Whether the calendar cell is in the middle of a range. */
1421
+ inrange?: DapDSCalendarCell["inrange"]
1422
+ /** The locale of the calendar cell. */
1423
+ locale?: DapDSCalendarCell["locale"]
1424
+ /** The value of the calendar cell. */
1425
+ value?: DapDSCalendarCell["value"]
1426
+ /** */
1427
+ label?: DapDSCalendarCell["label"]
1428
+ /** */
1429
+ focusElement?: DapDSCalendarCell["focusElement"]
1430
+ }
1431
+
1432
+ export type DapDSCalendarProps = {
1433
+ /** The mode of the calendar - single date or range selection. */
1434
+ mode?: DapDSCalendar["mode"]
1435
+ /** Whether to hide dates from adjacent months (previous/next) in the calendar grid. When not explicitly set, defaults to false for single mode and true for range mode. */
1436
+ hideAdjacentMonths?: DapDSCalendar["hideAdjacentMonths"]
1437
+ /** The locale of the calendar. */
1438
+ locale?: DapDSCalendar["locale"]
1439
+ /** `data-testid` for the previous-month button. */
1440
+ prevButtonTestId?: DapDSCalendar["prevButtonTestId"]
1441
+ /** `data-testid` for the next-month button. */
1442
+ nextButtonTestId?: DapDSCalendar["nextButtonTestId"]
1443
+ /** The value of the calendar. */
1444
+ value?: DapDSCalendar["value"]
1445
+ /** The start date of the range selection (only used in range mode). */
1446
+ rangeStart?: DapDSCalendar["rangeStart"]
1447
+ /** The end date of the range selection (only used in range mode). */
1448
+ rangeEnd?: DapDSCalendar["rangeEnd"]
1449
+ /** The current visible date of the calendar. Only the month and year are considered. */
1450
+ currentDate?: DapDSCalendar["currentDate"]
1451
+ /** The minimum date of the calendar. Only the month and year are considered. */
1452
+ minDate?: DapDSCalendar["minDate"]
1453
+ /** The maximum date of the calendar. Only the month and year are considered. */
1454
+ maxDate?: DapDSCalendar["maxDate"]
1455
+ /** The function to determine if the date is disabled. */
1456
+ disabledDate?: DapDSCalendar["disabledDate"]
1457
+ /** */
1458
+ startDate?: DapDSCalendar["startDate"]
1459
+ /** */
1460
+ endDate?: DapDSCalendar["endDate"]
1461
+ /** */
1462
+ shouldHideAdjacentMonths?: DapDSCalendar["shouldHideAdjacentMonths"]
1463
+ }
1464
+
1465
1465
  export type DapDSCheckboxProps = {
1466
1466
  /** Whether the checkbox is indeterminate */
1467
1467
  indeterminate?: DapDSCheckbox["indeterminate"]
@@ -2517,28 +2517,7 @@ export type DapDSNavigationMenuProps = {
2517
2517
  /** Whether multiple dropdown branches can stay open simultaneously (accordion mode). Default is true. */
2518
2518
  allowMultipleOpen?: DapDSNavigationMenu["allowMultipleOpen"]
2519
2519
  /** Controls how Tab key navigates through top-level items. Default is 'group'. Group mode will have the first item in the tab order, and items mode will have all items in the tab order. */
2520
- tabMode?: DapDSNavigationMenu["tabMode"]
2521
- }
2522
-
2523
- export type DapDSNotificationBadgeProps = {
2524
- /** The content of the badge, it can be a number or a string. Content tried to be parsed as a number, if it's not a number, it will be displayed as a string. */
2525
- badgeContent?: DapDSNotificationBadge["badgeContent"]
2526
- /** This switch decides the visibility of the badge. This property overrides the badge content visibility. Use it for explicit control. */
2527
- visible?: DapDSNotificationBadge["visible"]
2528
- /** This switch decides whether to show a zero value or not. */
2529
- showZero?: DapDSNotificationBadge["showZero"]
2530
- /** The color scheme of the badge */
2531
- type?: DapDSNotificationBadge["type"]
2532
- /** The variant of the badge. */
2533
- variant?: DapDSNotificationBadge["variant"]
2534
- /** The cap value of badge content, if the badge content is greater than the max value, it will be displayed as `[number]+`. Zero means no cap. */
2535
- max?: DapDSNotificationBadge["max"]
2536
- /** The position of the badge content around the slot content. */
2537
- placement?: DapDSNotificationBadge["placement"]
2538
- /** Whether to automatically detect circular elements and adjust positioning accordingly */
2539
- "circular-auto"?: DapDSNotificationBadge["circularAuto"]
2540
- /** Override circular positioning detection - forces circular positioning calculation */
2541
- "force-circular"?: DapDSNotificationBadge["forceCircular"]
2520
+ tabMode?: DapDSNavigationMenu["tabMode"]
2542
2521
  }
2543
2522
 
2544
2523
  export type DapDSNumberInputProps = {
@@ -2642,6 +2621,27 @@ export type DapDSOptionGroupProps = {
2642
2621
  disabled?: DapDSOptionGroup["disabled"]
2643
2622
  }
2644
2623
 
2624
+ export type DapDSNotificationBadgeProps = {
2625
+ /** The content of the badge, it can be a number or a string. Content tried to be parsed as a number, if it's not a number, it will be displayed as a string. */
2626
+ badgeContent?: DapDSNotificationBadge["badgeContent"]
2627
+ /** This switch decides the visibility of the badge. This property overrides the badge content visibility. Use it for explicit control. */
2628
+ visible?: DapDSNotificationBadge["visible"]
2629
+ /** This switch decides whether to show a zero value or not. */
2630
+ showZero?: DapDSNotificationBadge["showZero"]
2631
+ /** The color scheme of the badge */
2632
+ type?: DapDSNotificationBadge["type"]
2633
+ /** The variant of the badge. */
2634
+ variant?: DapDSNotificationBadge["variant"]
2635
+ /** The cap value of badge content, if the badge content is greater than the max value, it will be displayed as `[number]+`. Zero means no cap. */
2636
+ max?: DapDSNotificationBadge["max"]
2637
+ /** The position of the badge content around the slot content. */
2638
+ placement?: DapDSNotificationBadge["placement"]
2639
+ /** Whether to automatically detect circular elements and adjust positioning accordingly */
2640
+ "circular-auto"?: DapDSNotificationBadge["circularAuto"]
2641
+ /** Override circular positioning detection - forces circular positioning calculation */
2642
+ "force-circular"?: DapDSNotificationBadge["forceCircular"]
2643
+ }
2644
+
2645
2645
  export type DapDSOptionItemProps = {
2646
2646
  /** The selected state of the option item */
2647
2647
  selected?: DapDSOptionItem["selected"]
@@ -2986,6 +2986,8 @@ export type DapDSSearchProps = {
2986
2986
  searchForText?: DapDSSearch["searchForText"]
2987
2987
  /** The aria label of the search button. */
2988
2988
  searchButtonAriaLabel?: DapDSSearch["searchButtonAriaLabel"]
2989
+ /** When true, the search button is automatically disabled while the input is empty and re-enabled once the user types. Default is false. */
2990
+ disableSearchWhenEmpty?: DapDSSearch["disableSearchWhenEmpty"]
2989
2991
  /** Whether the search should open on empty results. */
2990
2992
  openOnEmpty?: DapDSSearch["openOnEmpty"]
2991
2993
  /** Subtle color version */
@@ -3356,6 +3358,35 @@ export type DapDSTimelineProps = {
3356
3358
 
3357
3359
  }
3358
3360
 
3361
+ export type DapDSTOCProps = {
3362
+ /** The root element to observe [`IntersectionObserver`](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#root) */
3363
+ root?: DapDSTOC["root"]
3364
+ /** The margin around the root element to observe [`IntersectionObserver`](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) */
3365
+ rootMargin?: DapDSTOC["rootMargin"]
3366
+ /** The margin around the last anchor to observe [`IntersectionObserver`](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) */
3367
+ lastAnchorRootMargin?: DapDSTOC["lastAnchorRootMargin"]
3368
+ /** The threshold to trigger [`IntersectionObserver`](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#threshold) */
3369
+ threshold?: DapDSTOC["threshold"]
3370
+ /** The minimum heading level to include in the TOC. The default value is `2`. */
3371
+ minHeadingLevel?: DapDSTOC["minHeadingLevel"]
3372
+ /** The maximum heading level to include in the TOC. The default value is `3`. */
3373
+ maxHeadingLevel?: DapDSTOC["maxHeadingLevel"]
3374
+ /** Whether to indent the TOC items. */
3375
+ noIndent?: DapDSTOC["noIndent"]
3376
+ /** The header of the TOC. */
3377
+ header?: DapDSTOC["header"]
3378
+ /** */
3379
+ activeAnchor?: DapDSTOC["activeAnchor"]
3380
+ /** */
3381
+ anchors?: DapDSTOC["anchors"]
3382
+ /** */
3383
+ items?: DapDSTOC["items"]
3384
+ /** The size of the TOC. Default is `lg. */
3385
+ size?: DapDSTOC["size"]
3386
+ /** Responsive size map (e.g. "md:lg"). */
3387
+ sizeMap?: DapDSTOC["sizeMap"]
3388
+ }
3389
+
3359
3390
  export type DapDSTimeGridProps = {
3360
3391
  /** The currently selected hour (0-23). */
3361
3392
  selectedHour?: DapDSTimeGrid["selectedHour"]
@@ -3482,35 +3513,6 @@ export type DapDSTimePickerProps = {
3482
3513
  autocomplete?: DapDSTimePicker["autocomplete"]
3483
3514
  }
3484
3515
 
3485
- export type DapDSTOCProps = {
3486
- /** The root element to observe [`IntersectionObserver`](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#root) */
3487
- root?: DapDSTOC["root"]
3488
- /** The margin around the root element to observe [`IntersectionObserver`](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) */
3489
- rootMargin?: DapDSTOC["rootMargin"]
3490
- /** The margin around the last anchor to observe [`IntersectionObserver`](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) */
3491
- lastAnchorRootMargin?: DapDSTOC["lastAnchorRootMargin"]
3492
- /** The threshold to trigger [`IntersectionObserver`](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#threshold) */
3493
- threshold?: DapDSTOC["threshold"]
3494
- /** The minimum heading level to include in the TOC. The default value is `2`. */
3495
- minHeadingLevel?: DapDSTOC["minHeadingLevel"]
3496
- /** The maximum heading level to include in the TOC. The default value is `3`. */
3497
- maxHeadingLevel?: DapDSTOC["maxHeadingLevel"]
3498
- /** Whether to indent the TOC items. */
3499
- noIndent?: DapDSTOC["noIndent"]
3500
- /** The header of the TOC. */
3501
- header?: DapDSTOC["header"]
3502
- /** */
3503
- activeAnchor?: DapDSTOC["activeAnchor"]
3504
- /** */
3505
- anchors?: DapDSTOC["anchors"]
3506
- /** */
3507
- items?: DapDSTOC["items"]
3508
- /** The size of the TOC. Default is `lg. */
3509
- size?: DapDSTOC["size"]
3510
- /** Responsive size map (e.g. "md:lg"). */
3511
- sizeMap?: DapDSTOC["sizeMap"]
3512
- }
3513
-
3514
3516
  export type DapDSToggleButtonProps = {
3515
3517
  /** Whether the button is active. */
3516
3518
  active?: DapDSToggleButton["active"]
@@ -4685,21 +4687,6 @@ declare module 'vue' {
4685
4687
  * - **close-icon-base** - The base of the icon when the accordion is closed.
4686
4688
  */
4687
4689
  'dap-ds-accordion': DefineCustomElement<DapDSAccordion, DapDSAccordionProps, DapDSAccordionEvents>
4688
- /**
4689
- * Avatar group component displays multiple avatars in an organized layout with overflow management.
4690
- *
4691
- * ### Events:
4692
- * - **dds-overflow-click** - Fired when the overflow indicator is clicked.
4693
- *
4694
- * ### Slots:
4695
- * - **default** - The avatars to display in the group.
4696
- *
4697
- * ### CSS Parts:
4698
- * - **base** - The main container of the avatar group.
4699
- * - **avatars** - The container for the visible avatars.
4700
- * - **overflow** - The overflow indicator element.
4701
- */
4702
- 'dap-ds-avatar-group': DefineCustomElement<DapDSAvatarGroup, DapDSAvatarGroupProps, DapDSAvatarGroupEvents>
4703
4690
  /**
4704
4691
  * Avatar component can be used to display user profile images, initials, or icons.
4705
4692
  *
@@ -4721,19 +4708,15 @@ declare module 'vue' {
4721
4708
  */
4722
4709
  'dap-ds-avatar': DefineCustomElement<DapDSAvatar, DapDSAvatarProps, DapDSAvatarEvents>
4723
4710
  /**
4724
- * A badge is a small status descriptor for UI elements.
4711
+ * An accordion group is a collection of accordion components.
4725
4712
  *
4726
4713
  * ### Slots:
4727
- * - **default** - The content of the badge.
4728
- * - **icon** - The icon of the badge.
4714
+ * - **default** - The content of the accordion group.
4729
4715
  *
4730
4716
  * ### CSS Parts:
4731
- * - **base** - The main container of the badge.
4732
- * - **icon** - The icon of the badge.
4733
- * - **content** - The content of the badge.
4734
- * - **icon-base** - The base of the icon.
4717
+ * - **base** - The main accordion group container.
4735
4718
  */
4736
- 'dap-ds-badge': DefineCustomElement<DapDSBadge, DapDSBadgeProps, {}>
4719
+ 'dap-ds-accordion-group': DefineCustomElement<DapDSAccordionGroup, DapDSAccordionGroupProps, {}>
4737
4720
  /**
4738
4721
  * Anchor heading is a heading with an anchor link.
4739
4722
  *
@@ -4745,15 +4728,34 @@ declare module 'vue' {
4745
4728
  */
4746
4729
  'dap-ds-anchor-heading': DefineCustomElement<DapDSAnchorHeading, DapDSAnchorHeadingProps, {}>
4747
4730
  /**
4748
- * An accordion group is a collection of accordion components.
4731
+ * Avatar group component displays multiple avatars in an organized layout with overflow management.
4732
+ *
4733
+ * ### Events:
4734
+ * - **dds-overflow-click** - Fired when the overflow indicator is clicked.
4749
4735
  *
4750
4736
  * ### Slots:
4751
- * - **default** - The content of the accordion group.
4737
+ * - **default** - The avatars to display in the group.
4752
4738
  *
4753
4739
  * ### CSS Parts:
4754
- * - **base** - The main accordion group container.
4740
+ * - **base** - The main container of the avatar group.
4741
+ * - **avatars** - The container for the visible avatars.
4742
+ * - **overflow** - The overflow indicator element.
4755
4743
  */
4756
- 'dap-ds-accordion-group': DefineCustomElement<DapDSAccordionGroup, DapDSAccordionGroupProps, {}>
4744
+ 'dap-ds-avatar-group': DefineCustomElement<DapDSAvatarGroup, DapDSAvatarGroupProps, DapDSAvatarGroupEvents>
4745
+ /**
4746
+ * A badge is a small status descriptor for UI elements.
4747
+ *
4748
+ * ### Slots:
4749
+ * - **default** - The content of the badge.
4750
+ * - **icon** - The icon of the badge.
4751
+ *
4752
+ * ### CSS Parts:
4753
+ * - **base** - The main container of the badge.
4754
+ * - **icon** - The icon of the badge.
4755
+ * - **content** - The content of the badge.
4756
+ * - **icon-base** - The base of the icon.
4757
+ */
4758
+ 'dap-ds-badge': DefineCustomElement<DapDSBadge, DapDSBadgeProps, {}>
4757
4759
  /**
4758
4760
  * A banner is a message displayed at the top of the page to provide important information to the user.
4759
4761
  *
@@ -4820,39 +4822,6 @@ declare module 'vue' {
4820
4822
  * - **content** - The content wrapper inside the button.
4821
4823
  */
4822
4824
  'dap-ds-button': DefineCustomElement<DapDSButton, DapDSButtonProps, DapDSButtonEvents>
4823
- /**
4824
- * Calendar cell represents a single cell in the calendar.
4825
- *
4826
- * ### Slots:
4827
- * - **default** - The content of the calendar cell.
4828
- *
4829
- * ### CSS Parts:
4830
- * - **base** - The main calendar cell container.
4831
- * - **today-mark** - The today mark of the calendar cell.
4832
- */
4833
- 'dap-ds-calendar-cell': DefineCustomElement<DapDSCalendarCell, DapDSCalendarCellProps, {}>
4834
- /**
4835
- * A calendar is a visual representation of dates. It allows users to select a date.
4836
- *
4837
- * ### Events:
4838
- * - **dds-change** - Fired when the calendar value changes.
4839
- *
4840
- * ### Slots:
4841
- * - **default** - The content of the calendar.
4842
- *
4843
- * ### CSS Parts:
4844
- * - **base** - The main calendar container.
4845
- * - **calendar-header** - The header of the calendar.
4846
- * - **body** - The body of the calendar.
4847
- * - **calendar-grid-header** - The header of the calendar grid.
4848
- * - **calendar-grid-header-cell** - The header cell of the calendar grid.
4849
- * - **calendar-grid-cell** - The cell of the calendar grid.
4850
- * - **calendar-header-button-prev** - The previous month button of the calendar header.
4851
- * - **calendar-header-button-next** - The next month button of the calendar header.
4852
- * - **calendar-header-year-select** - The year select of the calendar header.
4853
- * - **calendar-header-month-select** - The month select of the calendar header.
4854
- */
4855
- 'dap-ds-calendar': DefineCustomElement<DapDSCalendar, DapDSCalendarProps, DapDSCalendarEvents>
4856
4825
  /**
4857
4826
  *
4858
4827
  *
@@ -4937,6 +4906,39 @@ declare module 'vue' {
4937
4906
  * - **base** - The main card container.
4938
4907
  */
4939
4908
  'dap-ds-card': DefineCustomElement<DapDSCard, DapDSCardProps, {}>
4909
+ /**
4910
+ * Calendar cell represents a single cell in the calendar.
4911
+ *
4912
+ * ### Slots:
4913
+ * - **default** - The content of the calendar cell.
4914
+ *
4915
+ * ### CSS Parts:
4916
+ * - **base** - The main calendar cell container.
4917
+ * - **today-mark** - The today mark of the calendar cell.
4918
+ */
4919
+ 'dap-ds-calendar-cell': DefineCustomElement<DapDSCalendarCell, DapDSCalendarCellProps, {}>
4920
+ /**
4921
+ * A calendar is a visual representation of dates. It allows users to select a date.
4922
+ *
4923
+ * ### Events:
4924
+ * - **dds-change** - Fired when the calendar value changes.
4925
+ *
4926
+ * ### Slots:
4927
+ * - **default** - The content of the calendar.
4928
+ *
4929
+ * ### CSS Parts:
4930
+ * - **base** - The main calendar container.
4931
+ * - **calendar-header** - The header of the calendar.
4932
+ * - **body** - The body of the calendar.
4933
+ * - **calendar-grid-header** - The header of the calendar grid.
4934
+ * - **calendar-grid-header-cell** - The header cell of the calendar grid.
4935
+ * - **calendar-grid-cell** - The cell of the calendar grid.
4936
+ * - **calendar-header-button-prev** - The previous month button of the calendar header.
4937
+ * - **calendar-header-button-next** - The next month button of the calendar header.
4938
+ * - **calendar-header-year-select** - The year select of the calendar header.
4939
+ * - **calendar-header-month-select** - The month select of the calendar header.
4940
+ */
4941
+ 'dap-ds-calendar': DefineCustomElement<DapDSCalendar, DapDSCalendarProps, DapDSCalendarEvents>
4940
4942
  /**
4941
4943
  * A checkbox is a form element that allows the user to select one or more options from a set.
4942
4944
  *
@@ -5481,17 +5483,6 @@ Uses semantic HTML (`<nav>`) and proper navigation ARIA attributes.
5481
5483
  * - **base** - The main navigation menu container (nav element).
5482
5484
  */
5483
5485
  'dap-ds-navigation-menu': DefineCustomElement<DapDSNavigationMenu, DapDSNavigationMenuProps, DapDSNavigationMenuEvents>
5484
- /**
5485
- * A notification badge component is a user interface element that visually indicates the presence of new information or updates, often displaying a numeric count of unread notifications, messages, or items requiring attention.
5486
- *
5487
- * ### Slots:
5488
- * - **default** - The content of the notification badge.
5489
- *
5490
- * ### CSS Parts:
5491
- * - **base** - The main container of the notification badge.
5492
- * - **noty** - The notification badge container.
5493
- */
5494
- 'dap-ds-notification-badge': DefineCustomElement<DapDSNotificationBadge, DapDSNotificationBadgeProps, {}>
5495
5486
  /**
5496
5487
  * A number input component.
5497
5488
  *
@@ -5562,6 +5553,17 @@ Used with dap-ds-select to create grouped options that render as native optgroup
5562
5553
  * - **label** - The label of the option group.
5563
5554
  */
5564
5555
  'dap-ds-option-group': DefineCustomElement<DapDSOptionGroup, DapDSOptionGroupProps, {}>
5556
+ /**
5557
+ * A notification badge component is a user interface element that visually indicates the presence of new information or updates, often displaying a numeric count of unread notifications, messages, or items requiring attention.
5558
+ *
5559
+ * ### Slots:
5560
+ * - **default** - The content of the notification badge.
5561
+ *
5562
+ * ### CSS Parts:
5563
+ * - **base** - The main container of the notification badge.
5564
+ * - **noty** - The notification badge container.
5565
+ */
5566
+ 'dap-ds-notification-badge': DefineCustomElement<DapDSNotificationBadge, DapDSNotificationBadgeProps, {}>
5565
5567
  /**
5566
5568
  * An option item is a selectable item in a list of options.
5567
5569
  *
@@ -5775,6 +5777,7 @@ Used with dap-ds-select to create grouped options that render as native optgroup
5775
5777
  * ### CSS Parts:
5776
5778
  * - **base** - The main search container.
5777
5779
  * - **trigger** - The trigger button of the search.
5780
+ * - **search-button** - The trailing search icon button.
5778
5781
  * - **label** - The label of the search.
5779
5782
  * - **description** - The description of the search.
5780
5783
  * - **feedback** - The feedback of the search.
@@ -6060,6 +6063,16 @@ Used with dap-ds-select to create grouped options that render as native optgroup
6060
6063
  * - **base** - The main timeline container.
6061
6064
  */
6062
6065
  'dap-ds-timeline': DefineCustomElement<DapDSTimeline, DapDSTimelineProps, {}>
6066
+ /**
6067
+ * A table of contents (TOC) is a list of links that allows users to quickly navigate to sections within a document.
6068
+ *
6069
+ * ### Events:
6070
+ * - **dds-anchor-change** - Event that is triggered when the anchor changes.
6071
+ *
6072
+ * ### CSS Parts:
6073
+ * - **base** - The main container of the toc.
6074
+ */
6075
+ 'dap-ds-toc': DefineCustomElement<DapDSTOC, DapDSTOCProps, DapDSTOCEvents>
6063
6076
  /**
6064
6077
  * A time grid component that allows users to select hours and minutes in two side-by-side scrollable columns.
6065
6078
  *
@@ -6103,16 +6116,6 @@ Used with dap-ds-select to create grouped options that render as native optgroup
6103
6116
  * - **clear-button** - The clear button of the timepicker.
6104
6117
  */
6105
6118
  'dap-ds-timepicker': DefineCustomElement<DapDSTimePicker, DapDSTimePickerProps, DapDSTimePickerEvents>
6106
- /**
6107
- * A table of contents (TOC) is a list of links that allows users to quickly navigate to sections within a document.
6108
- *
6109
- * ### Events:
6110
- * - **dds-anchor-change** - Event that is triggered when the anchor changes.
6111
- *
6112
- * ### CSS Parts:
6113
- * - **base** - The main container of the toc.
6114
- */
6115
- 'dap-ds-toc': DefineCustomElement<DapDSTOC, DapDSTOCProps, DapDSTOCEvents>
6116
6119
  /**
6117
6120
  * A toggle button is a button that can be toggled on (active) or off (inactive).
6118
6121
  *
@@ -6839,17 +6842,15 @@ declare global {
6839
6842
  namespace JSX {
6840
6843
  interface IntrinsicElements {
6841
6844
  'dap-ds-accordion': DapDSAccordionProps & DapDSAccordionEvents & DapDSAccordionSlots
6842
- 'dap-ds-avatar-group': DapDSAvatarGroupProps & DapDSAvatarGroupEvents & DapDSAvatarGroupSlots
6843
6845
  'dap-ds-avatar': DapDSAvatarProps & DapDSAvatarEvents & DapDSAvatarSlots
6844
- 'dap-ds-badge': DapDSBadgeProps & DapDSBadgeSlots
6845
- 'dap-ds-anchor-heading': DapDSAnchorHeadingProps
6846
6846
  'dap-ds-accordion-group': DapDSAccordionGroupProps & DapDSAccordionGroupSlots
6847
+ 'dap-ds-anchor-heading': DapDSAnchorHeadingProps
6848
+ 'dap-ds-avatar-group': DapDSAvatarGroupProps & DapDSAvatarGroupEvents & DapDSAvatarGroupSlots
6849
+ 'dap-ds-badge': DapDSBadgeProps & DapDSBadgeSlots
6847
6850
  'dap-ds-banner': DapDSBannerProps & DapDSBannerEvents & DapDSBannerSlots
6848
6851
  'dap-ds-breadcrumb': DapDSBreadcrumbProps & DapDSBreadcrumbSlots
6849
6852
  'dap-ds-breadcrumb-item': DapDSBreadcrumbItemProps & DapDSBreadcrumbItemSlots
6850
6853
  'dap-ds-button': DapDSButtonProps & DapDSButtonEvents & DapDSButtonSlots
6851
- 'dap-ds-calendar-cell': DapDSCalendarCellProps & DapDSCalendarCellSlots
6852
- 'dap-ds-calendar': DapDSCalendarProps & DapDSCalendarEvents & DapDSCalendarSlots
6853
6854
  'dap-ds-callout': DapDSCalloutProps & DapDSCalloutEvents & DapDSCalloutSlots
6854
6855
  'dap-ds-card-actions': DapDSCardActionsProps & DapDSCardActionsSlots
6855
6856
  'dap-ds-card-content': DapDSCardContentProps & DapDSCardContentSlots
@@ -6857,6 +6858,8 @@ declare global {
6857
6858
  'dap-ds-card-subtitle': DapDSCardSubtitleProps & DapDSCardSubtitleSlots
6858
6859
  'dap-ds-card-title': DapDSCardTitleProps & DapDSCardTitleSlots
6859
6860
  'dap-ds-card': DapDSCardProps & DapDSCardSlots
6861
+ 'dap-ds-calendar-cell': DapDSCalendarCellProps & DapDSCalendarCellSlots
6862
+ 'dap-ds-calendar': DapDSCalendarProps & DapDSCalendarEvents & DapDSCalendarSlots
6860
6863
  'dap-ds-checkbox': DapDSCheckboxProps & DapDSCheckboxEvents
6861
6864
  'dap-ds-chip': DapDSChipProps & DapDSChipEvents
6862
6865
  'dap-ds-code-puncher-slot': DapDSCodePuncherSlotProps
@@ -6886,10 +6889,10 @@ declare global {
6886
6889
  'dap-ds-modal': DapDSModalProps & DapDSModalEvents & DapDSModalSlots
6887
6890
  'dap-ds-navigation-menu-item': DapDSNavigationMenuItemProps & DapDSNavigationMenuItemEvents & DapDSNavigationMenuItemSlots
6888
6891
  'dap-ds-navigation-menu': DapDSNavigationMenuProps & DapDSNavigationMenuEvents & DapDSNavigationMenuSlots
6889
- 'dap-ds-notification-badge': DapDSNotificationBadgeProps & DapDSNotificationBadgeSlots
6890
6892
  'dap-ds-number-input': DapDSNumberInputProps & DapDSNumberInputEvents & DapDSNumberInputSlots
6891
6893
  'dap-ds-official-website-banner': DapDSOfficialWebsiteBannerProps & DapDSOfficialWebsiteBannerEvents & DapDSOfficialWebsiteBannerSlots
6892
6894
  'dap-ds-option-group': DapDSOptionGroupProps & DapDSOptionGroupSlots
6895
+ 'dap-ds-notification-badge': DapDSNotificationBadgeProps & DapDSNotificationBadgeSlots
6893
6896
  'dap-ds-option-item': DapDSOptionItemProps & DapDSOptionItemSlots
6894
6897
  'dap-ds-option-list': DapDSOptionListProps & DapDSOptionListEvents & DapDSOptionListSlots
6895
6898
  'dap-ds-overlay': DapDSOverlayProps & DapDSOverlayEvents & DapDSOverlaySlots
@@ -6922,9 +6925,9 @@ declare global {
6922
6925
  'dap-ds-textarea': DapDSTextareaProps & DapDSTextareaEvents & DapDSTextareaSlots
6923
6926
  'dap-ds-timeline-item': DapDSTimelineItemProps & DapDSTimelineItemSlots
6924
6927
  'dap-ds-timeline': DapDSTimelineProps & DapDSTimelineSlots
6928
+ 'dap-ds-toc': DapDSTOCProps & DapDSTOCEvents
6925
6929
  'dap-ds-time-grid': DapDSTimeGridProps & DapDSTimeGridEvents
6926
6930
  'dap-ds-timepicker': DapDSTimePickerProps & DapDSTimePickerEvents
6927
- 'dap-ds-toc': DapDSTOCProps & DapDSTOCEvents
6928
6931
  'dap-ds-toggle-button': DapDSToggleButtonProps & DapDSToggleButtonSlots
6929
6932
  'dap-ds-tooltip': DapDSTooltipProps & DapDSTooltipSlots
6930
6933
  'dap-ds-tray': DapDSTrayProps & DapDSTrayEvents & DapDSTraySlots