dap-design-system 0.58.3 → 0.59.0

package/dist/manifest/types/vue/index.d.ts

@@ -217,6 +217,11 @@ export interface DapDSAvatarEvents {
   onDdsError?: (event: CustomEvent) => void
 }
 
+export interface DapDSAvatarGroupEvents {
+  /** Fired when the overflow indicator is clicked. */
+  onDdsOverflowClick?: (event: CustomEvent) => void
+}
+
 export interface DapDSAccordionEvents {
   /** Event fired when the accordion is opened. */
   onDdsOpened?: (event: CustomEvent<{ open: boolean, item: AccordionBaseElement }>) => void
@@ -224,11 +229,6 @@ export interface DapDSAccordionEvents {
   onDdsClosed?: (event: CustomEvent<{ open: boolean, item: AccordionBaseElement }>) => void
 }
 
-export interface DapDSAvatarGroupEvents {
-  /** Fired when the overflow indicator is clicked. */
-  onDdsOverflowClick?: (event: CustomEvent) => void
-}
-
 export interface DapDSBannerEvents {
   /** Event fired when the banner is closed. */
   onDdsClose?: (event: CustomEvent) => void
@@ -239,16 +239,16 @@ export interface DapDSButtonEvents {
   onDdsLoadingTimeout?: (event: CustomEvent) => void
 }
 
-export interface DapDSCalendarEvents {
-  /** Fired when the calendar value changes. */
-  onDdsChange?: (event: CustomEvent<{ value: Dayjs }>) => void
-}
-
 export interface DapDSCalloutEvents {
   /** Fired when the close button is clicked. */
   onDdsClose?: (event: CustomEvent) => void
 }
 
+export interface DapDSCalendarEvents {
+  /** Fired when the calendar value changes. */
+  onDdsChange?: (event: CustomEvent<{ value: Dayjs }>) => void
+}
+
 export interface DapDSCheckboxEvents {
   /** Fired when the checkbox is checked or unchecked. */
   onDdsChange?: (event: CustomEvent<{ checked: boolean, indeterminate: boolean, value: string, disabled: boolean, readonly: boolean, type: 'checkbox' }>) => void
@@ -561,11 +561,6 @@ export interface DapDSSelectEvents {
   onDdsClosed?: (event: CustomEvent) => void
 }
 
-export interface DapDSSideNavEvents {
-  /** Event fired when the side navigation item is clicked. */
-  onDdsItemClick?: (event: CustomEvent<{ href: string, event: Event }>) => void
-}
-
 export interface DapDSSnackbarMessageEvents {
   /** Fires when the snackbar closes. */
   onDdsClose?: (event: CustomEvent<{ id: string }>) => void
@@ -587,6 +582,11 @@ export interface DapDSTabGroupEvents {
   onDdsTabSelect?: (event: CustomEvent) => void
 }
 
+export interface DapDSSideNavEvents {
+  /** Event fired when the side navigation item is clicked. */
+  onDdsItemClick?: (event: CustomEvent<{ href: string, event: Event }>) => void
+}
+
 export interface DapDSTextareaEvents {
   /** Fires when the count of the textarea changes. */
   onDdsCountChange?: (event: CustomEvent<{ value: number }>) => void
@@ -667,6 +667,11 @@ export interface DapDSAvatarSlots {
   'fallback'?: () => any
 }
 
+export interface DapDSAvatarGroupSlots {
+  /** The avatars to display in the group. */
+  default?: () => any
+}
+
 export interface DapDSAccordionSlots {
   /** The content of the accordion. */
   default?: () => any
@@ -678,9 +683,11 @@ export interface DapDSAccordionSlots {
   'icon-closed'?: () => any
 }
 
-export interface DapDSAvatarGroupSlots {
-  /** The avatars to display in the group. */
+export interface DapDSBadgeSlots {
+  /** The content of the badge. */
   default?: () => any
+  /** The icon of the badge. */
+  'icon'?: () => any
 }
 
 export interface DapDSBreadcrumbSlots {
@@ -699,13 +706,6 @@ export interface DapDSBannerSlots {
   'icon'?: () => any
 }
 
-export interface DapDSBadgeSlots {
-  /** The content of the badge. */
-  default?: () => any
-  /** The icon of the badge. */
-  'icon'?: () => any
-}
-
 export interface DapDSBreadcrumbItemSlots {
   /** The content of the breadcrumb item. */
   default?: () => any
@@ -718,16 +718,6 @@ export interface DapDSButtonSlots {
   default?: () => any
 }
 
-export interface DapDSCalendarCellSlots {
-  /** The content of the calendar cell. */
-  default?: () => any
-}
-
-export interface DapDSCalendarSlots {
-  /** The content of the calendar. */
-  default?: () => any
-}
-
 export interface DapDSCalloutSlots {
   /** The content of the callout. */
   default?: () => any
@@ -741,6 +731,16 @@ export interface DapDSCalloutSlots {
   'close'?: () => any
 }
 
+export interface DapDSCalendarCellSlots {
+  /** The content of the calendar cell. */
+  default?: () => any
+}
+
+export interface DapDSCalendarSlots {
+  /** The content of the calendar. */
+  default?: () => any
+}
+
 export interface DapDSCardActionsSlots {
   /** The content of the card actions. */
   default?: () => any
@@ -993,27 +993,6 @@ export interface DapDSSelectSlots {
   'indicator-icon'?: () => any
 }
 
-export interface DapDSSideNavGroupSlots {
-  /** The content of the side navigation group. */
-  default?: () => any
-  /** The submenu of the side navigation group. */
-  'submenu'?: () => any
-  /** The suffix of the side navigation group. */
-  'suffix'?: () => any
-}
-
-export interface DapDSSideNavItemSlots {
-  /** The content of the side navigation item. */
-  default?: () => any
-  /** The suffix of the side navigation item. */
-  'suffix'?: () => any
-}
-
-export interface DapDSSideNavSlots {
-  /** The content of the side navigation. */
-  default?: () => any
-}
-
 export interface DapDSSkipLinkSlots {
   /** The content of the skip link. */
   default?: () => any
@@ -1068,6 +1047,27 @@ export interface DapDSTableSlots {
   default?: () => any
 }
 
+export interface DapDSSideNavGroupSlots {
+  /** The content of the side navigation group. */
+  default?: () => any
+  /** The submenu of the side navigation group. */
+  'submenu'?: () => any
+  /** The suffix of the side navigation group. */
+  'suffix'?: () => any
+}
+
+export interface DapDSSideNavItemSlots {
+  /** The content of the side navigation item. */
+  default?: () => any
+  /** The suffix of the side navigation item. */
+  'suffix'?: () => any
+}
+
+export interface DapDSSideNavSlots {
+  /** The content of the side navigation. */
+  default?: () => any
+}
+
 export interface DapDSTextareaSlots {
   /** The custom icon of the feedback. */
   'feedback-icon'?: () => any
@@ -1109,15 +1109,15 @@ export interface DapDSTypographySlots {
   default?: () => any
 }
 
-export interface DapDSInputGroupSlots {
-  /** The content of the input group items. */
+export interface DapDSRadioGroupSlots {
+  /** The content of the radio group. */
   default?: () => any
   /** The custom icon of the feedback. */
   'feedback-icon'?: () => any
 }
 
-export interface DapDSRadioGroupSlots {
-  /** The content of the radio group. */
+export interface DapDSInputGroupSlots {
+  /** The content of the input group items. */
   default?: () => any
   /** The custom icon of the feedback. */
   'feedback-icon'?: () => any
@@ -1130,6 +1130,17 @@ export type DapDSAccordionGroupProps = {
   variant?: DapDSAccordionGroup["variant"]
 }
 
+export type DapDSAnchorHeadingProps = {
+  /** The variant of the heading. Default is `h2`. Can be `h1`, `h2`, `h3`, `h4`, `h5`, or `h6`. */
+  variant?: DapDSAnchorHeading["variant"]
+  /** The label of the heading. */
+  label?: DapDSAnchorHeading["label"]
+  /**  */
+  elementId?: DapDSAnchorHeading["elementId"]
+  /**  */
+  anchorTitle?: DapDSAnchorHeading["anchorTitle"]
+}
+
 export type DapDSAvatarProps = {
   /** The shape of the avatar */
   shape?: DapDSAvatar["shape"]
@@ -1157,6 +1168,25 @@ export type DapDSAvatarProps = {
   sizeMap?: DapDSAvatar["sizeMap"]
 }
 
+export type DapDSAvatarGroupProps = {
+  /** Layout type for the avatar group */
+  layout?: DapDSAvatarGroup["layout"]
+  /** Maximum number of avatars to show before showing overflow */
+  max?: DapDSAvatarGroup["max"]
+  /** Whether to show the total count in overflow indicator */
+  "show-total"?: DapDSAvatarGroup["showTotal"]
+  /** Interactive overflow indicator */
+  "interactive-overflow"?: DapDSAvatarGroup["interactiveOverflow"]
+  /** Accessible label for the avatar group */
+  label?: DapDSAvatarGroup["label"]
+  /** Accessible label for the overflow indicator */
+  "overflow-label"?: DapDSAvatarGroup["overflowLabel"]
+  /** The size of avatars in the group. Default is `md`. See SizedMixin. */
+  size?: DapDSAvatarGroup["size"]
+  /** Responsive size map (e.g. "md:lg"); see SizedMixin. */
+  sizeMap?: DapDSAvatarGroup["sizeMap"]
+}
+
 export type DapDSAccordionProps = {
   /** The size of the accordion. Default is `sm`. Visual variants are sm and lg (other sizes map to sm). */
   size?: DapDSAccordion["size"]
@@ -1182,23 +1212,17 @@ export type DapDSAccordionProps = {
   loading?: DapDSAccordion["loading"]
 }
 
-export type DapDSAvatarGroupProps = {
-  /** Layout type for the avatar group */
-  layout?: DapDSAvatarGroup["layout"]
-  /** Maximum number of avatars to show before showing overflow */
-  max?: DapDSAvatarGroup["max"]
-  /** Whether to show the total count in overflow indicator */
-  "show-total"?: DapDSAvatarGroup["showTotal"]
-  /** Interactive overflow indicator */
-  "interactive-overflow"?: DapDSAvatarGroup["interactiveOverflow"]
-  /** Accessible label for the avatar group */
-  label?: DapDSAvatarGroup["label"]
-  /** Accessible label for the overflow indicator */
-  "overflow-label"?: DapDSAvatarGroup["overflowLabel"]
-  /** The size of avatars in the group. Default is `md`. See SizedMixin. */
-  size?: DapDSAvatarGroup["size"]
-  /** Responsive size map (e.g. "md:lg"); see SizedMixin. */
-  sizeMap?: DapDSAvatarGroup["sizeMap"]
+export type DapDSBadgeProps = {
+  /** The type of the badge */
+  type?: DapDSBadge["type"]
+  /** The icon of the badge, this is a name of a built in icon */
+  icon?: DapDSBadge["icon"]
+  /** Whether the badge represents dynamic content that should announce changes */
+  live?: DapDSBadge["live"]
+  /** The size of the badge. Default is `sm`. */
+  size?: DapDSBadge["size"]
+  /** Responsive size map (e.g. "md:lg"). */
+  sizeMap?: DapDSBadge["sizeMap"]
 }
 
 export type DapDSBreadcrumbProps = {
@@ -1225,30 +1249,6 @@ export type DapDSBannerProps = {
   icon?: DapDSBanner["icon"]
 }
 
-export type DapDSAnchorHeadingProps = {
-  /** The variant of the heading. Default is `h2`. Can be `h1`, `h2`, `h3`, `h4`, `h5`, or `h6`. */
-  variant?: DapDSAnchorHeading["variant"]
-  /** The label of the heading. */
-  label?: DapDSAnchorHeading["label"]
-  /**  */
-  elementId?: DapDSAnchorHeading["elementId"]
-  /**  */
-  anchorTitle?: DapDSAnchorHeading["anchorTitle"]
-}
-
-export type DapDSBadgeProps = {
-  /** The type of the badge */
-  type?: DapDSBadge["type"]
-  /** The icon of the badge, this is a name of a built in icon */
-  icon?: DapDSBadge["icon"]
-  /** Whether the badge represents dynamic content that should announce changes */
-  live?: DapDSBadge["live"]
-  /** The size of the badge. Default is `sm`. */
-  size?: DapDSBadge["size"]
-  /** Responsive size map (e.g. "md:lg"). */
-  sizeMap?: DapDSBadge["sizeMap"]
-}
-
 export type DapDSBreadcrumbItemProps = {
   /** The URL of the breadcrumb item. */
   href?: DapDSBreadcrumbItem["href"]
@@ -1293,6 +1293,27 @@ export type DapDSButtonProps = {
   sizeMap?: DapDSButton["sizeMap"]
 }
 
+export type DapDSCalloutProps = {
+  /** The variant of the callout */
+  variant?: DapDSCallout["variant"]
+  /** The alignment of the callout. Can be `vertical` or `horizontal`. */
+  alignment?: DapDSCallout["alignment"]
+  /** The strongness of the callout colors. Can be `subtle`, `base`, `medium`, or `strong`. */
+  shade?: DapDSCallout["shade"]
+  /** If the callout has a border */
+  noBorder?: DapDSCallout["noBorder"]
+  /** If the callout has a close button */
+  closeable?: DapDSCallout["closeable"]
+  /** The header of the callout */
+  title?: DapDSCallout["title"]
+  /** The label of the close button */
+  closeButtonLabel?: DapDSCallout["closeButtonLabel"]
+  /** `data-testid` for the default close button. */
+  closeButtonTestId?: DapDSCallout["closeButtonTestId"]
+  /** If the callout is opened */
+  opened?: DapDSCallout["opened"]
+}
+
 export type DapDSCalendarCellProps = {
   /** Whether the calendar cell is selected. */
   selected?: DapDSCalendarCell["selected"]
@@ -1355,91 +1376,15 @@ export type DapDSCalendarProps = {
   shouldHideAdjacentMonths?: DapDSCalendar["shouldHideAdjacentMonths"]
 }
 
-export type DapDSCalloutProps = {
-  /** The variant of the callout */
-  variant?: DapDSCallout["variant"]
-  /** The alignment of the callout. Can be `vertical` or `horizontal`. */
-  alignment?: DapDSCallout["alignment"]
-  /** The strongness of the callout colors. Can be `subtle`, `base`, `medium`, or `strong`. */
-  shade?: DapDSCallout["shade"]
-  /** If the callout has a border */
-  noBorder?: DapDSCallout["noBorder"]
-  /** If the callout has a close button */
-  closeable?: DapDSCallout["closeable"]
-  /** The header of the callout */
-  title?: DapDSCallout["title"]
-  /** The label of the close button */
-  closeButtonLabel?: DapDSCallout["closeButtonLabel"]
-  /** `data-testid` for the default close button. */
-  closeButtonTestId?: DapDSCallout["closeButtonTestId"]
-  /** If the callout is opened */
-  opened?: DapDSCallout["opened"]
-}
-
-export type DapDSCheckboxProps = {
-  /** Whether the checkbox is indeterminate */
-  indeterminate?: DapDSCheckbox["indeterminate"]
-  /** Whether the checkbox should prevent the default action */
-  preventDefault?: DapDSCheckbox["preventDefault"]
-  /** This sets up border around the checkbox, when true. */
-  border?: DapDSCheckbox["border"]
-  /** Whether the checkbox is readonly (cannot be changed but value is submitted with form). */
-  readonly?: DapDSCheckbox["readonly"]
-  /** The type of the checkbox */
-  type?: DapDSCheckbox["type"]
-  /**  */
-  focusElement?: DapDSCheckbox["focusElement"]
-  /**  */
-  feedbackId?: DapDSCheckbox["feedbackId"]
-  /** The name of the checkbox. */
-  name?: DapDSCheckbox["name"]
-  /** The value of the checkbox. */
-  value?: DapDSCheckbox["value"]
-  /** Whether the checkbox is checked. */
-  checked?: DapDSCheckbox["checked"]
-  /** The label of the checkbox. */
-  label?: DapDSCheckbox["label"]
-  /** Visually hides the label while keeping it available to assistive technology. (default: false) */
-  hideLabel?: DapDSCheckbox["hideLabel"]
-  /** The description of the checkbox. */
-  description?: DapDSCheckbox["description"]
-  /** Whether the checkbox is disabled. */
-  disabled?: DapDSCheckbox["disabled"]
-  /** Whether the checkbox is required. */
-  required?: DapDSCheckbox["required"]
-  /** The size of the checkbox. Default is 'sm'. */
-  size?: DapDSCheckbox["size"]
-  /** Responsive size map (e.g. "md:lg"). */
-  sizeMap?: DapDSCheckbox["sizeMap"]
-  /** The placement of the label. */
-  labelPlacement?: DapDSCheckbox["labelPlacement"]
-  /** The placement of the description. */
-  descriptionPlacement?: DapDSCheckbox["descriptionPlacement"]
-  /** The weight of the label. */
-  subtle?: DapDSCheckbox["subtle"]
-  /** The feedback of the checkbox. */
-  feedback?: DapDSCheckbox["feedback"]
-  /** The feedback type of the checkbox. */
-  feedbackType?: DapDSCheckbox["feedbackType"]
-  /** The invalid state of the checkbox. */
-  invalid?: DapDSCheckbox["invalid"]
-  /** The optional state of the checkbox. */
-  optional?: DapDSCheckbox["optional"]
-  /** The optional label of the checkbox. */
-  optionalLabel?: DapDSCheckbox["optionalLabel"]
-  /** The required indicator of the checkbox. (default: '*') */
-  requiredLabel?: DapDSCheckbox["requiredLabel"]
-}
-
-export type DapDSCardActionsProps = {
-  /** The spacing of the card actions. This adds a margin to the card actions. Default is `bottom`. */
-  spacing?: DapDSCardActions["spacing"]
-  /**  */
-  parentSized?: DapDSCardActions["parentSized"]
-  /** The size of the card actions. Default is `sm`. */
-  size?: DapDSCardActions["size"]
-  /** Responsive size map (e.g. "md:lg"). */
-  sizeMap?: DapDSCardActions["sizeMap"]
+export type DapDSCardActionsProps = {
+  /** The spacing of the card actions. This adds a margin to the card actions. Default is `bottom`. */
+  spacing?: DapDSCardActions["spacing"]
+  /**  */
+  parentSized?: DapDSCardActions["parentSized"]
+  /** The size of the card actions. Default is `sm`. */
+  size?: DapDSCardActions["size"]
+  /** Responsive size map (e.g. "md:lg"). */
+  sizeMap?: DapDSCardActions["sizeMap"]
 }
 
 export type DapDSCardContentProps = {
@@ -1517,6 +1462,61 @@ export type DapDSCardProps = {
   sizeMap?: DapDSCard["sizeMap"]
 }
 
+export type DapDSCheckboxProps = {
+  /** Whether the checkbox is indeterminate */
+  indeterminate?: DapDSCheckbox["indeterminate"]
+  /** Whether the checkbox should prevent the default action */
+  preventDefault?: DapDSCheckbox["preventDefault"]
+  /** This sets up border around the checkbox, when true. */
+  border?: DapDSCheckbox["border"]
+  /** Whether the checkbox is readonly (cannot be changed but value is submitted with form). */
+  readonly?: DapDSCheckbox["readonly"]
+  /** The type of the checkbox */
+  type?: DapDSCheckbox["type"]
+  /**  */
+  focusElement?: DapDSCheckbox["focusElement"]
+  /**  */
+  feedbackId?: DapDSCheckbox["feedbackId"]
+  /** The name of the checkbox. */
+  name?: DapDSCheckbox["name"]
+  /** The value of the checkbox. */
+  value?: DapDSCheckbox["value"]
+  /** Whether the checkbox is checked. */
+  checked?: DapDSCheckbox["checked"]
+  /** The label of the checkbox. */
+  label?: DapDSCheckbox["label"]
+  /** Visually hides the label while keeping it available to assistive technology. (default: false) */
+  hideLabel?: DapDSCheckbox["hideLabel"]
+  /** The description of the checkbox. */
+  description?: DapDSCheckbox["description"]
+  /** Whether the checkbox is disabled. */
+  disabled?: DapDSCheckbox["disabled"]
+  /** Whether the checkbox is required. */
+  required?: DapDSCheckbox["required"]
+  /** The size of the checkbox. Default is 'sm'. */
+  size?: DapDSCheckbox["size"]
+  /** Responsive size map (e.g. "md:lg"). */
+  sizeMap?: DapDSCheckbox["sizeMap"]
+  /** The placement of the label. */
+  labelPlacement?: DapDSCheckbox["labelPlacement"]
+  /** The placement of the description. */
+  descriptionPlacement?: DapDSCheckbox["descriptionPlacement"]
+  /** The weight of the label. */
+  subtle?: DapDSCheckbox["subtle"]
+  /** The feedback of the checkbox. */
+  feedback?: DapDSCheckbox["feedback"]
+  /** The feedback type of the checkbox. */
+  feedbackType?: DapDSCheckbox["feedbackType"]
+  /** The invalid state of the checkbox. */
+  invalid?: DapDSCheckbox["invalid"]
+  /** The optional state of the checkbox. */
+  optional?: DapDSCheckbox["optional"]
+  /** The optional label of the checkbox. */
+  optionalLabel?: DapDSCheckbox["optionalLabel"]
+  /** The required indicator of the checkbox. (default: '*') */
+  requiredLabel?: DapDSCheckbox["requiredLabel"]
+}
+
 export type DapDSChipProps = {
   /** Whether the chip is removeable */
   removeable?: DapDSChip["removeable"]
@@ -1837,6 +1837,10 @@ export type DapDSDataTableProps<T> = {
   showNextButton?: DapDSDataTable<T>["showNextButton"]
   /** Show the last button. */
   showLastButton?: DapDSDataTable<T>["showLastButton"]
+  /** Show numbered page buttons between the previous and next buttons. */
+  showPageNumbers?: DapDSDataTable<T>["showPageNumbers"]
+  /** How many page numbers to show on each side of the current page. */
+  siblingCount?: DapDSDataTable<T>["siblingCount"]
   /** The label of the first button */
   firstButtonLabel?: DapDSDataTable<T>["firstButtonLabel"]
   /** The label of the previous button */
@@ -2715,6 +2719,10 @@ export type DapDSPagerProps = {
   showNextButton?: DapDSPager["showNextButton"]
   /** Show the last button. */
   showLastButton?: DapDSPager["showLastButton"]
+  /** Show numbered page buttons between the previous and next buttons. */
+  showPageNumbers?: DapDSPager["showPageNumbers"]
+  /** How many page numbers to show on each side of the current page. */
+  siblingCount?: DapDSPager["siblingCount"]
   /** The first button label. */
   firstButtonLabel?: DapDSPager["firstButtonLabel"]
   /** The previous button label. */
@@ -3050,55 +3058,6 @@ export type DapDSSelectProps = {
   subtle?: DapDSSelect["subtle"]
 }
 
-export type DapDSSideNavGroupProps = {
-  /** The href of the side navigation item */
-  href?: DapDSSideNavGroup["href"]
-  /** Whether the side navigation item is active */
-  active?: DapDSSideNavGroup["active"]
-  /** The spacing of the side navigation item */
-  spacing?: DapDSSideNavGroup["spacing"]
-  /** Whether the side navigation group is open */
-  open?: DapDSSideNavGroup["open"]
-  /** The size of the side navigation group */
-  size?: DapDSSideNavGroup["size"]
-}
-
-export type DapDSSideNavItemProps = {
-  /** The href of the side navigation item */
-  href?: DapDSSideNavItem["href"]
-  /** Whether the side navigation item is active */
-  active?: DapDSSideNavItem["active"]
-  /** Which `aria-current` token to expose on the link when `active` is set.
-
-`aria-current` has to sit on the anchor that assistive technology actually
-exposes. Setting it on this host does nothing: the host is a role-less custom
-element, so the attribute is stranded there and screen-reader users cannot tell
-which item is current. Use `current="step"` inside a stepper. */
-  current?: DapDSSideNavItem["current"]
-  /** The spacing of the side navigation item */
-  spacing?: DapDSSideNavItem["spacing"]
-  /** The size of the side navigation item */
-  size?: DapDSSideNavItem["size"]
-}
-
-export type DapDSSideNavProps = {
-  /** The label of the side navigation, if aria label is not provided, it will be used as aria label */
-  label?: DapDSSideNav["label"]
-  /** 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 */
-  activeHref?: DapDSSideNav["activeHref"]
-  /** The size of the side navigation */
-  size?: DapDSSideNav["size"]
-  /** The landmark element to render. `aside` exposes a complementary landmark; `nav`
-exposes a navigation landmark, so the sidenav is listed when a screen-reader user
-asks for the page's navigation.
-
-Defaults to `aside` because that is what this component has always rendered, and
-changing the landmark of every existing sidenav is not this component's call: a
-sidenav that is genuinely a sidebar should stay complementary. Set `nav` when the
-sidenav is the primary way to move around the view. */
-  landmark?: DapDSSideNav["landmark"]
-}
-
 export type DapDSSkeletonProps = {
   /** The variant of the skeleton. */
   variant?: DapDSSkeleton["variant"]
@@ -3280,6 +3239,55 @@ export type DapDSTableProps = {
   caption?: DapDSTable["caption"]
 }
 
+export type DapDSSideNavGroupProps = {
+  /** The href of the side navigation item */
+  href?: DapDSSideNavGroup["href"]
+  /** Whether the side navigation item is active */
+  active?: DapDSSideNavGroup["active"]
+  /** The spacing of the side navigation item */
+  spacing?: DapDSSideNavGroup["spacing"]
+  /** Whether the side navigation group is open */
+  open?: DapDSSideNavGroup["open"]
+  /** The size of the side navigation group */
+  size?: DapDSSideNavGroup["size"]
+}
+
+export type DapDSSideNavItemProps = {
+  /** The href of the side navigation item */
+  href?: DapDSSideNavItem["href"]
+  /** Whether the side navigation item is active */
+  active?: DapDSSideNavItem["active"]
+  /** Which `aria-current` token to expose on the link when `active` is set.
+
+`aria-current` has to sit on the anchor that assistive technology actually
+exposes. Setting it on this host does nothing: the host is a role-less custom
+element, so the attribute is stranded there and screen-reader users cannot tell
+which item is current. Use `current="step"` inside a stepper. */
+  current?: DapDSSideNavItem["current"]
+  /** The spacing of the side navigation item */
+  spacing?: DapDSSideNavItem["spacing"]
+  /** The size of the side navigation item */
+  size?: DapDSSideNavItem["size"]
+}
+
+export type DapDSSideNavProps = {
+  /** The label of the side navigation, if aria label is not provided, it will be used as aria label */
+  label?: DapDSSideNav["label"]
+  /** 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 */
+  activeHref?: DapDSSideNav["activeHref"]
+  /** The size of the side navigation */
+  size?: DapDSSideNav["size"]
+  /** The landmark element to render. `aside` exposes a complementary landmark; `nav`
+exposes a navigation landmark, so the sidenav is listed when a screen-reader user
+asks for the page's navigation.
+
+Defaults to `aside` because that is what this component has always rendered, and
+changing the landmark of every existing sidenav is not this component's call: a
+sidenav that is genuinely a sidebar should stay complementary. Set `nav` when the
+sidenav is the primary way to move around the view. */
+  landmark?: DapDSSideNav["landmark"]
+}
+
 export type DapDSTextareaProps = {
   /** Hide character counter. */
   hideCounter?: DapDSTextarea["hideCounter"]
@@ -3601,41 +3609,6 @@ export type DapDSFormLabelProps = {
   hideLabel?: DapDSFormLabel["hideLabel"]
 }
 
-export type DapDSInputGroupProps = {
-  /**  */
-  allInputs?: DapDSInputGroup["allInputs"]
-  /** The label of the input group. */
-  label?: DapDSInputGroup["label"]
-  /** Visually hides the label while keeping it available to assistive technology. (default: false) */
-  hideLabel?: DapDSInputGroup["hideLabel"]
-  /** The description of the input group. */
-  description?: DapDSInputGroup["description"]
-  /** The tooltip of the input group. */
-  tooltip?: DapDSInputGroup["tooltip"]
-  /** The tooltip placement of the input group. */
-  tooltipPlacement?: DapDSInputGroup["tooltipPlacement"]
-  /** The aria label of the tooltip. */
-  tooltipAriaLabel?: DapDSInputGroup["tooltipAriaLabel"]
-  /** The label of the input group when it is optional. */
-  optionalLabel?: DapDSInputGroup["optionalLabel"]
-  /** The indicator of the input group when it is required. (default: '*') */
-  requiredLabel?: DapDSInputGroup["requiredLabel"]
-  /** Whether the input group is disabled. */
-  disabled?: DapDSInputGroup["disabled"]
-  /** The size of the input group. Default is `sm`. */
-  size?: DapDSInputGroup["size"]
-  /** Whether the input group is required. */
-  required?: DapDSInputGroup["required"]
-  /** Whether the input group is optional. */
-  optional?: DapDSInputGroup["optional"]
-  /** The feedback of the input. */
-  feedback?: DapDSInputGroup["feedback"]
-  /** The type of the feedback. */
-  feedbackType?: DapDSInputGroup["feedbackType"]
-  /** Whether the input group label is subtle. */
-  subtle?: DapDSInputGroup["subtle"]
-}
-
 export type DapDSRadioGroupProps = {
   /** The tooltip placement of the radio group. */
   tooltipPlacement?: DapDSRadioGroup["tooltipPlacement"]
@@ -3677,15 +3650,50 @@ export type DapDSRadioGroupProps = {
   size?: DapDSRadioGroup["size"]
 }
 
-export type ArrowsArrowDownLineProps = {
-  /** (optional) The width and height in pixels */
-  size?: ArrowsArrowDownLine["size"]
-  /** (optional) Sets the icon color via the `fill` attribute */
-  selected?: ArrowsArrowDownLine["selected"]
-  /** (optional) When using the icon standalone, make it meaningful for accessibility */
-  accessibilityTitle?: ArrowsArrowDownLine["accessibilityTitle"]
-  /** (optional) If `true` the icon can receive focus */
-  focusable?: ArrowsArrowDownLine["focusable"]
+export type DapDSInputGroupProps = {
+  /**  */
+  allInputs?: DapDSInputGroup["allInputs"]
+  /** The label of the input group. */
+  label?: DapDSInputGroup["label"]
+  /** Visually hides the label while keeping it available to assistive technology. (default: false) */
+  hideLabel?: DapDSInputGroup["hideLabel"]
+  /** The description of the input group. */
+  description?: DapDSInputGroup["description"]
+  /** The tooltip of the input group. */
+  tooltip?: DapDSInputGroup["tooltip"]
+  /** The tooltip placement of the input group. */
+  tooltipPlacement?: DapDSInputGroup["tooltipPlacement"]
+  /** The aria label of the tooltip. */
+  tooltipAriaLabel?: DapDSInputGroup["tooltipAriaLabel"]
+  /** The label of the input group when it is optional. */
+  optionalLabel?: DapDSInputGroup["optionalLabel"]
+  /** The indicator of the input group when it is required. (default: '*') */
+  requiredLabel?: DapDSInputGroup["requiredLabel"]
+  /** Whether the input group is disabled. */
+  disabled?: DapDSInputGroup["disabled"]
+  /** The size of the input group. Default is `sm`. */
+  size?: DapDSInputGroup["size"]
+  /** Whether the input group is required. */
+  required?: DapDSInputGroup["required"]
+  /** Whether the input group is optional. */
+  optional?: DapDSInputGroup["optional"]
+  /** The feedback of the input. */
+  feedback?: DapDSInputGroup["feedback"]
+  /** The type of the feedback. */
+  feedbackType?: DapDSInputGroup["feedbackType"]
+  /** Whether the input group label is subtle. */
+  subtle?: DapDSInputGroup["subtle"]
+}
+
+export type ArrowsArrowDownLineProps = {
+  /** (optional) The width and height in pixels */
+  size?: ArrowsArrowDownLine["size"]
+  /** (optional) Sets the icon color via the `fill` attribute */
+  selected?: ArrowsArrowDownLine["selected"]
+  /** (optional) When using the icon standalone, make it meaningful for accessibility */
+  accessibilityTitle?: ArrowsArrowDownLine["accessibilityTitle"]
+  /** (optional) If `true` the icon can receive focus */
+  focusable?: ArrowsArrowDownLine["focusable"]
 }
 
 export type ArrowsArrowDownSFillProps = {
@@ -3732,17 +3740,6 @@ export type ArrowsArrowLeftLLineProps = {
   focusable?: ArrowsArrowLeftLLine["focusable"]
 }
 
-export type ArrowsArrowLeftLineProps = {
-  /** (optional) The width and height in pixels */
-  size?: ArrowsArrowLeftLine["size"]
-  /** (optional) Sets the icon color via the `fill` attribute */
-  selected?: ArrowsArrowLeftLine["selected"]
-  /** (optional) When using the icon standalone, make it meaningful for accessibility */
-  accessibilityTitle?: ArrowsArrowLeftLine["accessibilityTitle"]
-  /** (optional) If `true` the icon can receive focus */
-  focusable?: ArrowsArrowLeftLine["focusable"]
-}
-
 export type ArrowsArrowLeftSFillProps = {
   /** (optional) The width and height in pixels */
   size?: ArrowsArrowLeftSFill["size"]
@@ -3754,26 +3751,26 @@ export type ArrowsArrowLeftSFillProps = {
   focusable?: ArrowsArrowLeftSFill["focusable"]
 }
 
-export type ArrowsArrowLeftSLineProps = {
+export type ArrowsArrowLeftLineProps = {
   /** (optional) The width and height in pixels */
-  size?: ArrowsArrowLeftSLine["size"]
+  size?: ArrowsArrowLeftLine["size"]
   /** (optional) Sets the icon color via the `fill` attribute */
-  selected?: ArrowsArrowLeftSLine["selected"]
+  selected?: ArrowsArrowLeftLine["selected"]
   /** (optional) When using the icon standalone, make it meaningful for accessibility */
-  accessibilityTitle?: ArrowsArrowLeftSLine["accessibilityTitle"]
+  accessibilityTitle?: ArrowsArrowLeftLine["accessibilityTitle"]
   /** (optional) If `true` the icon can receive focus */
-  focusable?: ArrowsArrowLeftSLine["focusable"]
+  focusable?: ArrowsArrowLeftLine["focusable"]
 }
 
-export type ArrowsArrowLeftUpLineProps = {
+export type ArrowsArrowLeftSLineProps = {
   /** (optional) The width and height in pixels */
-  size?: ArrowsArrowLeftUpLine["size"]
+  size?: ArrowsArrowLeftSLine["size"]
   /** (optional) Sets the icon color via the `fill` attribute */
-  selected?: ArrowsArrowLeftUpLine["selected"]
+  selected?: ArrowsArrowLeftSLine["selected"]
   /** (optional) When using the icon standalone, make it meaningful for accessibility */
-  accessibilityTitle?: ArrowsArrowLeftUpLine["accessibilityTitle"]
+  accessibilityTitle?: ArrowsArrowLeftSLine["accessibilityTitle"]
   /** (optional) If `true` the icon can receive focus */
-  focusable?: ArrowsArrowLeftUpLine["focusable"]
+  focusable?: ArrowsArrowLeftSLine["focusable"]
 }
 
 export type ArrowsArrowRightDownLineProps = {
@@ -3798,6 +3795,17 @@ export type ArrowsArrowRightLLineProps = {
   focusable?: ArrowsArrowRightLLine["focusable"]
 }
 
+export type ArrowsArrowLeftUpLineProps = {
+  /** (optional) The width and height in pixels */
+  size?: ArrowsArrowLeftUpLine["size"]
+  /** (optional) Sets the icon color via the `fill` attribute */
+  selected?: ArrowsArrowLeftUpLine["selected"]
+  /** (optional) When using the icon standalone, make it meaningful for accessibility */
+  accessibilityTitle?: ArrowsArrowLeftUpLine["accessibilityTitle"]
+  /** (optional) If `true` the icon can receive focus */
+  focusable?: ArrowsArrowLeftUpLine["focusable"]
+}
+
 export type ArrowsArrowRightLineProps = {
   /** (optional) The width and height in pixels */
   size?: ArrowsArrowRightLine["size"]
@@ -4062,70 +4070,26 @@ export type HealthHeartLineProps = {
   focusable?: HealthHeartLine["focusable"]
 }
 
-export type OthersCookieLineProps = {
-  /** (optional) The width and height in pixels */
-  size?: OthersCookieLine["size"]
-  /** (optional) Sets the icon color via the `fill` attribute */
-  selected?: OthersCookieLine["selected"]
-  /** (optional) When using the icon standalone, make it meaningful for accessibility */
-  accessibilityTitle?: OthersCookieLine["accessibilityTitle"]
-  /** (optional) If `true` the icon can receive focus */
-  focusable?: OthersCookieLine["focusable"]
-}
-
-export type UserAccountCircleFillProps = {
-  /** (optional) The width and height in pixels */
-  size?: UserAccountCircleFill["size"]
-  /** (optional) Sets the icon color via the `fill` attribute */
-  selected?: UserAccountCircleFill["selected"]
-  /** (optional) When using the icon standalone, make it meaningful for accessibility */
-  accessibilityTitle?: UserAccountCircleFill["accessibilityTitle"]
-  /** (optional) If `true` the icon can receive focus */
-  focusable?: UserAccountCircleFill["focusable"]
-}
-
-export type UserAccountCircleLineProps = {
-  /** (optional) The width and height in pixels */
-  size?: UserAccountCircleLine["size"]
-  /** (optional) Sets the icon color via the `fill` attribute */
-  selected?: UserAccountCircleLine["selected"]
-  /** (optional) When using the icon standalone, make it meaningful for accessibility */
-  accessibilityTitle?: UserAccountCircleLine["accessibilityTitle"]
-  /** (optional) If `true` the icon can receive focus */
-  focusable?: UserAccountCircleLine["focusable"]
-}
-
-export type UserUserFillProps = {
-  /** (optional) The width and height in pixels */
-  size?: UserUserFill["size"]
-  /** (optional) Sets the icon color via the `fill` attribute */
-  selected?: UserUserFill["selected"]
-  /** (optional) When using the icon standalone, make it meaningful for accessibility */
-  accessibilityTitle?: UserUserFill["accessibilityTitle"]
-  /** (optional) If `true` the icon can receive focus */
-  focusable?: UserUserFill["focusable"]
-}
-
-export type UserUserLineProps = {
+export type SystemAddLineProps = {
   /** (optional) The width and height in pixels */
-  size?: UserUserLine["size"]
+  size?: SystemAddLine["size"]
   /** (optional) Sets the icon color via the `fill` attribute */
-  selected?: UserUserLine["selected"]
+  selected?: SystemAddLine["selected"]
   /** (optional) When using the icon standalone, make it meaningful for accessibility */
-  accessibilityTitle?: UserUserLine["accessibilityTitle"]
+  accessibilityTitle?: SystemAddLine["accessibilityTitle"]
   /** (optional) If `true` the icon can receive focus */
-  focusable?: UserUserLine["focusable"]
+  focusable?: SystemAddLine["focusable"]
 }
 
-export type SystemAddLineProps = {
+export type OthersCookieLineProps = {
   /** (optional) The width and height in pixels */
-  size?: SystemAddLine["size"]
+  size?: OthersCookieLine["size"]
   /** (optional) Sets the icon color via the `fill` attribute */
-  selected?: SystemAddLine["selected"]
+  selected?: OthersCookieLine["selected"]
   /** (optional) When using the icon standalone, make it meaningful for accessibility */
-  accessibilityTitle?: SystemAddLine["accessibilityTitle"]
+  accessibilityTitle?: OthersCookieLine["accessibilityTitle"]
   /** (optional) If `true` the icon can receive focus */
-  focusable?: SystemAddLine["focusable"]
+  focusable?: OthersCookieLine["focusable"]
 }
 
 export type SystemAlertFillProps = {
@@ -4645,6 +4609,50 @@ export type SystemZoomOutLineProps = {
   focusable?: SystemZoomOutLine["focusable"]
 }
 
+export type UserAccountCircleFillProps = {
+  /** (optional) The width and height in pixels */
+  size?: UserAccountCircleFill["size"]
+  /** (optional) Sets the icon color via the `fill` attribute */
+  selected?: UserAccountCircleFill["selected"]
+  /** (optional) When using the icon standalone, make it meaningful for accessibility */
+  accessibilityTitle?: UserAccountCircleFill["accessibilityTitle"]
+  /** (optional) If `true` the icon can receive focus */
+  focusable?: UserAccountCircleFill["focusable"]
+}
+
+export type UserAccountCircleLineProps = {
+  /** (optional) The width and height in pixels */
+  size?: UserAccountCircleLine["size"]
+  /** (optional) Sets the icon color via the `fill` attribute */
+  selected?: UserAccountCircleLine["selected"]
+  /** (optional) When using the icon standalone, make it meaningful for accessibility */
+  accessibilityTitle?: UserAccountCircleLine["accessibilityTitle"]
+  /** (optional) If `true` the icon can receive focus */
+  focusable?: UserAccountCircleLine["focusable"]
+}
+
+export type UserUserFillProps = {
+  /** (optional) The width and height in pixels */
+  size?: UserUserFill["size"]
+  /** (optional) Sets the icon color via the `fill` attribute */
+  selected?: UserUserFill["selected"]
+  /** (optional) When using the icon standalone, make it meaningful for accessibility */
+  accessibilityTitle?: UserUserFill["accessibilityTitle"]
+  /** (optional) If `true` the icon can receive focus */
+  focusable?: UserUserFill["focusable"]
+}
+
+export type UserUserLineProps = {
+  /** (optional) The width and height in pixels */
+  size?: UserUserLine["size"]
+  /** (optional) Sets the icon color via the `fill` attribute */
+  selected?: UserUserLine["selected"]
+  /** (optional) When using the icon standalone, make it meaningful for accessibility */
+  accessibilityTitle?: UserUserLine["accessibilityTitle"]
+  /** (optional) If `true` the icon can receive focus */
+  focusable?: UserUserLine["focusable"]
+}
+
 // Augment Vue's GlobalComponents interface
 declare module 'vue' {
   interface GlobalComponents {
@@ -4658,6 +4666,16 @@ declare module 'vue' {
      * - **base** - The main accordion group container.
      */
          'dap-ds-accordion-group': DefineCustomElement<DapDSAccordionGroup, DapDSAccordionGroupProps, {}>
+    /**
+     * Anchor heading is a heading with an anchor link.
+     *
+     * ### CSS Parts:
+     * - **base** - The main anchor heading container.
+     * - **link** - The link of the anchor heading. dap-ds-link element.
+     * - **link-base** - The base of the link part.
+     * - **text** - The text of the anchor heading.
+     */
+         'dap-ds-anchor-heading': DefineCustomElement<DapDSAnchorHeading, DapDSAnchorHeadingProps, {}>
     /**
      * Avatar component can be used to display user profile images, initials, or icons.
      *
@@ -4678,6 +4696,21 @@ declare module 'vue' {
      * - **loading** - The loading indicator.
      */
          'dap-ds-avatar': DefineCustomElement<DapDSAvatar, DapDSAvatarProps, DapDSAvatarEvents>
+    /**
+     * Avatar group component displays multiple avatars in an organized layout with overflow management.
+     *
+     * ### Events:
+     * - **dds-overflow-click** - Fired when the overflow indicator is clicked.
+     *
+     * ### Slots:
+     * - **default** - The avatars to display in the group.
+     *
+     * ### CSS Parts:
+     * - **base** - The main container of the avatar group.
+     * - **avatars** - The container for the visible avatars.
+     * - **overflow** - The overflow indicator element.
+     */
+         'dap-ds-avatar-group': DefineCustomElement<DapDSAvatarGroup, DapDSAvatarGroupProps, DapDSAvatarGroupEvents>
     /**
      * An accordion is a vertically stacked list of interactive items that can be expanded or collapsed to reveal or hide content.
      *
@@ -4705,20 +4738,19 @@ declare module 'vue' {
      */
          'dap-ds-accordion': DefineCustomElement<DapDSAccordion, DapDSAccordionProps, DapDSAccordionEvents>
     /**
-     * Avatar group component displays multiple avatars in an organized layout with overflow management.
-     *
-     * ### Events:
-     * - **dds-overflow-click** - Fired when the overflow indicator is clicked.
+     * A badge is a small status descriptor for UI elements.
      *
      * ### Slots:
-     * - **default** - The avatars to display in the group.
+     * - **default** - The content of the badge.
+     * - **icon** - The icon of the badge.
      *
      * ### CSS Parts:
-     * - **base** - The main container of the avatar group.
-     * - **avatars** - The container for the visible avatars.
-     * - **overflow** - The overflow indicator element.
+     * - **base** - The main container of the badge.
+     * - **icon** - The icon of the badge.
+     * - **content** - The content of the badge.
+     * - **icon-base** - The base of the icon.
      */
-         'dap-ds-avatar-group': DefineCustomElement<DapDSAvatarGroup, DapDSAvatarGroupProps, DapDSAvatarGroupEvents>
+         'dap-ds-badge': DefineCustomElement<DapDSBadge, DapDSBadgeProps, {}>
     /**
      * A breadcrumb is a secondary navigation scheme that reveals the user's location in a website or Web application.
      *
@@ -4755,30 +4787,6 @@ declare module 'vue' {
      * - **title** -  The title of the banner.
      */
          'dap-ds-banner': DefineCustomElement<DapDSBanner, DapDSBannerProps, DapDSBannerEvents>
-    /**
-     * Anchor heading is a heading with an anchor link.
-     *
-     * ### CSS Parts:
-     * - **base** - The main anchor heading container.
-     * - **link** - The link of the anchor heading. dap-ds-link element.
-     * - **link-base** - The base of the link part.
-     * - **text** - The text of the anchor heading.
-     */
-         'dap-ds-anchor-heading': DefineCustomElement<DapDSAnchorHeading, DapDSAnchorHeadingProps, {}>
-    /**
-     * A badge is a small status descriptor for UI elements.
-     *
-     * ### Slots:
-     * - **default** - The content of the badge.
-     * - **icon** - The icon of the badge.
-     *
-     * ### CSS Parts:
-     * - **base** - The main container of the badge.
-     * - **icon** - The icon of the badge.
-     * - **content** - The content of the badge.
-     * - **icon-base** - The base of the icon.
-     */
-         'dap-ds-badge': DefineCustomElement<DapDSBadge, DapDSBadgeProps, {}>
     /**
      * A breadcrumb item is a secondary navigation scheme that reveals the user's location in a website or Web application.
      *
@@ -4809,39 +4817,6 @@ declare module 'vue' {
      * - **content** - The content wrapper inside the button.
      */
          'dap-ds-button': DefineCustomElement<DapDSButton, DapDSButtonProps, DapDSButtonEvents>
-    /**
-     * Calendar cell represents a single cell in the calendar.
-     *
-     * ### Slots:
-     * - **default** - The content of the calendar cell.
-     *
-     * ### CSS Parts:
-     * - **base** - The main calendar cell container.
-     * - **today-mark** - The today mark of the calendar cell.
-     */
-         'dap-ds-calendar-cell': DefineCustomElement<DapDSCalendarCell, DapDSCalendarCellProps, {}>
-    /**
-     * A calendar is a visual representation of dates. It allows users to select a date.
-     *
-     * ### Events:
-     * - **dds-change** - Fired when the calendar value changes.
-     *
-     * ### Slots:
-     * - **default** - The content of the calendar.
-     *
-     * ### CSS Parts:
-     * - **base** - The main calendar container.
-     * - **calendar-header** - The header of the calendar.
-     * - **body** - The body of the calendar.
-     * - **calendar-grid-header** - The header of the calendar grid.
-     * - **calendar-grid-header-cell** - The header cell of the calendar grid.
-     * - **calendar-grid-cell** - The cell of the calendar grid.
-     * - **calendar-header-button-prev** - The previous month button of the calendar header.
-     * - **calendar-header-button-next** - The next month button of the calendar header.
-     * - **calendar-header-year-select** - The year select of the calendar header.
-     * - **calendar-header-month-select** - The month select of the calendar header.
-     */
-         'dap-ds-calendar': DefineCustomElement<DapDSCalendar, DapDSCalendarProps, DapDSCalendarEvents>
     /**
      * 
      *
@@ -4867,26 +4842,38 @@ declare module 'vue' {
      */
          'dap-ds-callout': DefineCustomElement<DapDSCallout, DapDSCalloutProps, DapDSCalloutEvents>
     /**
-     * A checkbox is a form element that allows the user to select one or more options from a set.
+     * Calendar cell represents a single cell in the calendar.
      *
-     * ### Events:
-     * - **dds-change** - Fired when the checkbox is checked or unchecked.
-     * - **dds-blur** - Emitted when the checkbox loses focus.
-     * - **dds-focus** - Emitted when the checkbox gains focus.
-     * - **dds-input** - Emitted when the checkbox receives input.
+     * ### Slots:
+     * - **default** - The content of the calendar cell.
      *
      * ### CSS Parts:
-     * - **base** - The main checkbox container.
-     * - **label** - The label of the checkbox.
-     * - **input** - The input of the checkbox.
-     * - **control** - The control of the checkbox.
-     * - **icon** - The icon of the checkbox.
-     * - **icon-base** - The base icon container.
-     * - **label-container** - The label container of the checkbox.
-     * - **description** - The description of the checkbox.
-     * - **readonly** - The readonly state of the checkbox.
+     * - **base** - The main calendar cell container.
+     * - **today-mark** - The today mark of the calendar cell.
+     */
+         'dap-ds-calendar-cell': DefineCustomElement<DapDSCalendarCell, DapDSCalendarCellProps, {}>
+    /**
+     * A calendar is a visual representation of dates. It allows users to select a date.
+     *
+     * ### Events:
+     * - **dds-change** - Fired when the calendar value changes.
+     *
+     * ### Slots:
+     * - **default** - The content of the calendar.
+     *
+     * ### CSS Parts:
+     * - **base** - The main calendar container.
+     * - **calendar-header** - The header of the calendar.
+     * - **body** - The body of the calendar.
+     * - **calendar-grid-header** - The header of the calendar grid.
+     * - **calendar-grid-header-cell** - The header cell of the calendar grid.
+     * - **calendar-grid-cell** - The cell of the calendar grid.
+     * - **calendar-header-button-prev** - The previous month button of the calendar header.
+     * - **calendar-header-button-next** - The next month button of the calendar header.
+     * - **calendar-header-year-select** - The year select of the calendar header.
+     * - **calendar-header-month-select** - The month select of the calendar header.
      */
-         'dap-ds-checkbox': DefineCustomElement<DapDSCheckbox, DapDSCheckboxProps, DapDSCheckboxEvents>
+         'dap-ds-calendar': DefineCustomElement<DapDSCalendar, DapDSCalendarProps, DapDSCalendarEvents>
     /**
      * A card actions is a container for actions in a card.
      *
@@ -4947,6 +4934,27 @@ declare module 'vue' {
      * - **base** - The main card container.
      */
          'dap-ds-card': DefineCustomElement<DapDSCard, DapDSCardProps, {}>
+    /**
+     * A checkbox is a form element that allows the user to select one or more options from a set.
+     *
+     * ### Events:
+     * - **dds-change** - Fired when the checkbox is checked or unchecked.
+     * - **dds-blur** - Emitted when the checkbox loses focus.
+     * - **dds-focus** - Emitted when the checkbox gains focus.
+     * - **dds-input** - Emitted when the checkbox receives input.
+     *
+     * ### CSS Parts:
+     * - **base** - The main checkbox container.
+     * - **label** - The label of the checkbox.
+     * - **input** - The input of the checkbox.
+     * - **control** - The control of the checkbox.
+     * - **icon** - The icon of the checkbox.
+     * - **icon-base** - The base icon container.
+     * - **label-container** - The label container of the checkbox.
+     * - **description** - The description of the checkbox.
+     * - **readonly** - The readonly state of the checkbox.
+     */
+         'dap-ds-checkbox': DefineCustomElement<DapDSCheckbox, DapDSCheckboxProps, DapDSCheckboxEvents>
     /**
      * A chip is a small status descriptor for UI elements.
      *
@@ -5627,6 +5635,12 @@ Used with dap-ds-select to create grouped options that render as native optgroup
      * - **pager-button-last-content** - The content of the last page button.
      * - **page-size-select-base** - The base of the page size select.
      * - **page-size-select-trigger** - The trigger of the page size select.
+     * - **page-numbers** - The container of the numbered page buttons (shown when showPageNumbers is 'true').
+     * - **page-number** - Each numbered page button.
+     * - **page-number-active** - The active (current) numbered page button.
+     * - **page-number-base** - The base of each numbered page button.
+     * - **page-number-content** - The content of each numbered page button.
+     * - **page-info** - The page info / total count text.
      */
          'dap-ds-pager': DefineCustomElement<DapDSPager, DapDSPagerProps, DapDSPagerEvents>
     /**
@@ -5802,48 +5816,6 @@ Used with dap-ds-select to create grouped options that render as native optgroup
      * - **mobile-footer** - The mobile footer of the select.
      */
          'dap-ds-select': DefineCustomElement<DapDSSelect, DapDSSelectProps, DapDSSelectEvents>
-    /**
-     * Side navigation group
-     *
-     * ### Slots:
-     * - **default** - The content of the side navigation group.
-     * - **submenu** - The submenu of the side navigation group.
-     * - **suffix** - The suffix of the side navigation group.
-     *
-     * ### CSS Parts:
-     * - **base** - The main side navigation group container.
-     * - **title** - The title of the side navigation group.
-     * - **link** - The link of the side navigation group.
-     * - **toggle** - The toggle button of the side navigation group.
-     * - **submenu** - The submenu of the side navigation group.
-     */
-         'dap-ds-sidenav-group': DefineCustomElement<DapDSSideNavGroup, DapDSSideNavGroupProps, {}>
-    /**
-     * Side navigation item
-     *
-     * ### Slots:
-     * - **default** - The content of the side navigation item.
-     * - **suffix** - The suffix of the side navigation item.
-     *
-     * ### CSS Parts:
-     * - **base** - The main side navigation item container.
-     * - **link** - The link of the side navigation item.
-     */
-         'dap-ds-sidenav-item': DefineCustomElement<DapDSSideNavItem, DapDSSideNavItemProps, {}>
-    /**
-     * Side navigation is a list of links that are used to navigate to different sections of a page.
-     *
-     * ### Events:
-     * - **dds-item-click** - Event fired when the side navigation item is clicked.
-     *
-     * ### Slots:
-     * - **default** - The content of the side navigation.
-     *
-     * ### CSS Parts:
-     * - **base** - The main side navigation container.
-     * - **menu** - The menu of the side navigation.
-     */
-         'dap-ds-sidenav': DefineCustomElement<DapDSSideNav, DapDSSideNavProps, DapDSSideNavEvents>
     /**
      * A skeleton loader component for displaying placeholder content while loading.
      *
@@ -5995,6 +5967,48 @@ Used with dap-ds-select to create grouped options that render as native optgroup
      * - **default** - The default slot. Accepts `dap-ds-table-row` elements.
      */
          'dap-ds-table': DefineCustomElement<DapDSTable, DapDSTableProps, {}>
+    /**
+     * Side navigation group
+     *
+     * ### Slots:
+     * - **default** - The content of the side navigation group.
+     * - **submenu** - The submenu of the side navigation group.
+     * - **suffix** - The suffix of the side navigation group.
+     *
+     * ### CSS Parts:
+     * - **base** - The main side navigation group container.
+     * - **title** - The title of the side navigation group.
+     * - **link** - The link of the side navigation group.
+     * - **toggle** - The toggle button of the side navigation group.
+     * - **submenu** - The submenu of the side navigation group.
+     */
+         'dap-ds-sidenav-group': DefineCustomElement<DapDSSideNavGroup, DapDSSideNavGroupProps, {}>
+    /**
+     * Side navigation item
+     *
+     * ### Slots:
+     * - **default** - The content of the side navigation item.
+     * - **suffix** - The suffix of the side navigation item.
+     *
+     * ### CSS Parts:
+     * - **base** - The main side navigation item container.
+     * - **link** - The link of the side navigation item.
+     */
+         'dap-ds-sidenav-item': DefineCustomElement<DapDSSideNavItem, DapDSSideNavItemProps, {}>
+    /**
+     * Side navigation is a list of links that are used to navigate to different sections of a page.
+     *
+     * ### Events:
+     * - **dds-item-click** - Event fired when the side navigation item is clicked.
+     *
+     * ### Slots:
+     * - **default** - The content of the side navigation.
+     *
+     * ### CSS Parts:
+     * - **base** - The main side navigation container.
+     * - **menu** - The menu of the side navigation.
+     */
+         'dap-ds-sidenav': DefineCustomElement<DapDSSideNav, DapDSSideNavProps, DapDSSideNavEvents>
     /**
      * A textarea is a multi-line text input field.
      *
@@ -6164,21 +6178,6 @@ Used with dap-ds-select to create grouped options that render as native optgroup
      * - **optional** - The optional indicator of the form label.
      */
          'dap-ds-form-label': DefineCustomElement<DapDSFormLabel, DapDSFormLabelProps, {}>
-    /**
-     * An input group is a container for inputs.
-     *
-     * ### Slots:
-     * - **default** - The content of the input group items.
-     * - **feedback-icon** - The custom icon of the feedback.
-     *
-     * ### CSS Parts:
-     * - **base** - The main input group container.
-     * - **label** - The label of the input group.
-     * - **description** - The description of the input group.
-     * - **tooltip** - The tooltip of the input group.
-     * - **container** - The container of the input group items.
-     */
-         'dap-ds-input-group': DefineCustomElement<DapDSInputGroup, DapDSInputGroupProps, {}>
     /**
      * A radio group is a form element that allows the user to select one option from a set.
      *
@@ -6198,6 +6197,21 @@ Used with dap-ds-select to create grouped options that render as native optgroup
      * - **container** - The container of the radio group items.
      */
          'dap-ds-radio-group': DefineCustomElement<DapDSRadioGroup, DapDSRadioGroupProps, DapDSRadioGroupEvents>
+    /**
+     * An input group is a container for inputs.
+     *
+     * ### Slots:
+     * - **default** - The content of the input group items.
+     * - **feedback-icon** - The custom icon of the feedback.
+     *
+     * ### CSS Parts:
+     * - **base** - The main input group container.
+     * - **label** - The label of the input group.
+     * - **description** - The description of the input group.
+     * - **tooltip** - The tooltip of the input group.
+     * - **container** - The container of the input group items.
+     */
+         'dap-ds-input-group': DefineCustomElement<DapDSInputGroup, DapDSInputGroupProps, {}>
     /**
      * An icon
      *
@@ -6239,14 +6253,14 @@ Used with dap-ds-select to create grouped options that render as native optgroup
      * ### CSS Parts:
      * - **base** - The main icon container.
      */
-         'dap-ds-icon-arrow-left-line': DefineCustomElement<ArrowsArrowLeftLine, ArrowsArrowLeftLineProps, {}>
+         'dap-ds-icon-arrow-left-s-fill': DefineCustomElement<ArrowsArrowLeftSFill, ArrowsArrowLeftSFillProps, {}>
     /**
      * An icon
      *
      * ### CSS Parts:
      * - **base** - The main icon container.
      */
-         'dap-ds-icon-arrow-left-s-fill': DefineCustomElement<ArrowsArrowLeftSFill, ArrowsArrowLeftSFillProps, {}>
+         'dap-ds-icon-arrow-left-line': DefineCustomElement<ArrowsArrowLeftLine, ArrowsArrowLeftLineProps, {}>
     /**
      * An icon
      *
@@ -6260,21 +6274,21 @@ Used with dap-ds-select to create grouped options that render as native optgroup
      * ### CSS Parts:
      * - **base** - The main icon container.
      */
-         'dap-ds-icon-arrow-left-up-line': DefineCustomElement<ArrowsArrowLeftUpLine, ArrowsArrowLeftUpLineProps, {}>
+         'dap-ds-icon-arrow-right-down-line': DefineCustomElement<ArrowsArrowRightDownLine, ArrowsArrowRightDownLineProps, {}>
     /**
      * An icon
      *
      * ### CSS Parts:
      * - **base** - The main icon container.
      */
-         'dap-ds-icon-arrow-right-down-line': DefineCustomElement<ArrowsArrowRightDownLine, ArrowsArrowRightDownLineProps, {}>
+         'dap-ds-icon-arrow-right-l-line': DefineCustomElement<ArrowsArrowRightLLine, ArrowsArrowRightLLineProps, {}>
     /**
      * An icon
      *
      * ### CSS Parts:
      * - **base** - The main icon container.
      */
-         'dap-ds-icon-arrow-right-l-line': DefineCustomElement<ArrowsArrowRightLLine, ArrowsArrowRightLLineProps, {}>
+         'dap-ds-icon-arrow-left-up-line': DefineCustomElement<ArrowsArrowLeftUpLine, ArrowsArrowLeftUpLineProps, {}>
     /**
      * An icon
      *
@@ -6449,42 +6463,14 @@ Used with dap-ds-select to create grouped options that render as native optgroup
      * ### CSS Parts:
      * - **base** - The main icon container.
      */
-         'dap-ds-icon-cookie-line': DefineCustomElement<OthersCookieLine, OthersCookieLineProps, {}>
-    /**
-     * An icon
-     *
-     * ### CSS Parts:
-     * - **base** - The main icon container.
-     */
-         'dap-ds-icon-account-circle-fill': DefineCustomElement<UserAccountCircleFill, UserAccountCircleFillProps, {}>
-    /**
-     * An icon
-     *
-     * ### CSS Parts:
-     * - **base** - The main icon container.
-     */
-         'dap-ds-icon-account-circle-line': DefineCustomElement<UserAccountCircleLine, UserAccountCircleLineProps, {}>
-    /**
-     * An icon
-     *
-     * ### CSS Parts:
-     * - **base** - The main icon container.
-     */
-         'dap-ds-icon-user-fill': DefineCustomElement<UserUserFill, UserUserFillProps, {}>
-    /**
-     * An icon
-     *
-     * ### CSS Parts:
-     * - **base** - The main icon container.
-     */
-         'dap-ds-icon-user-line': DefineCustomElement<UserUserLine, UserUserLineProps, {}>
+         'dap-ds-icon-add-line': DefineCustomElement<SystemAddLine, SystemAddLineProps, {}>
     /**
      * An icon
      *
      * ### CSS Parts:
      * - **base** - The main icon container.
      */
-         'dap-ds-icon-add-line': DefineCustomElement<SystemAddLine, SystemAddLineProps, {}>
+         'dap-ds-icon-cookie-line': DefineCustomElement<OthersCookieLine, OthersCookieLineProps, {}>
     /**
      * An icon
      *
@@ -6814,6 +6800,34 @@ Used with dap-ds-select to create grouped options that render as native optgroup
      * - **base** - The main icon container.
      */
          'dap-ds-icon-zoom-out-line': DefineCustomElement<SystemZoomOutLine, SystemZoomOutLineProps, {}>
+    /**
+     * An icon
+     *
+     * ### CSS Parts:
+     * - **base** - The main icon container.
+     */
+         'dap-ds-icon-account-circle-fill': DefineCustomElement<UserAccountCircleFill, UserAccountCircleFillProps, {}>
+    /**
+     * An icon
+     *
+     * ### CSS Parts:
+     * - **base** - The main icon container.
+     */
+         'dap-ds-icon-account-circle-line': DefineCustomElement<UserAccountCircleLine, UserAccountCircleLineProps, {}>
+    /**
+     * An icon
+     *
+     * ### CSS Parts:
+     * - **base** - The main icon container.
+     */
+         'dap-ds-icon-user-fill': DefineCustomElement<UserUserFill, UserUserFillProps, {}>
+    /**
+     * An icon
+     *
+     * ### CSS Parts:
+     * - **base** - The main icon container.
+     */
+         'dap-ds-icon-user-line': DefineCustomElement<UserUserLine, UserUserLineProps, {}>
   }
 }
 
@@ -6822,25 +6836,25 @@ declare global {
   namespace JSX {
     interface IntrinsicElements {
       'dap-ds-accordion-group': DapDSAccordionGroupProps & DapDSAccordionGroupSlots
+      'dap-ds-anchor-heading': DapDSAnchorHeadingProps
       'dap-ds-avatar': DapDSAvatarProps & DapDSAvatarEvents & DapDSAvatarSlots
-      'dap-ds-accordion': DapDSAccordionProps & DapDSAccordionEvents & DapDSAccordionSlots
       'dap-ds-avatar-group': DapDSAvatarGroupProps & DapDSAvatarGroupEvents & DapDSAvatarGroupSlots
+      'dap-ds-accordion': DapDSAccordionProps & DapDSAccordionEvents & DapDSAccordionSlots
+      'dap-ds-badge': DapDSBadgeProps & DapDSBadgeSlots
       'dap-ds-breadcrumb': DapDSBreadcrumbProps & DapDSBreadcrumbSlots
       'dap-ds-banner': DapDSBannerProps & DapDSBannerEvents & DapDSBannerSlots
-      'dap-ds-anchor-heading': DapDSAnchorHeadingProps
-      'dap-ds-badge': DapDSBadgeProps & DapDSBadgeSlots
       'dap-ds-breadcrumb-item': DapDSBreadcrumbItemProps & DapDSBreadcrumbItemSlots
       'dap-ds-button': DapDSButtonProps & DapDSButtonEvents & DapDSButtonSlots
+      'dap-ds-callout': DapDSCalloutProps & DapDSCalloutEvents & DapDSCalloutSlots
       'dap-ds-calendar-cell': DapDSCalendarCellProps & DapDSCalendarCellSlots
       'dap-ds-calendar': DapDSCalendarProps & DapDSCalendarEvents & DapDSCalendarSlots
-      'dap-ds-callout': DapDSCalloutProps & DapDSCalloutEvents & DapDSCalloutSlots
-      'dap-ds-checkbox': DapDSCheckboxProps & DapDSCheckboxEvents
       'dap-ds-card-actions': DapDSCardActionsProps & DapDSCardActionsSlots
       'dap-ds-card-content': DapDSCardContentProps & DapDSCardContentSlots
       'dap-ds-card-image': DapDSCardImageProps & DapDSCardImageSlots
       'dap-ds-card-subtitle': DapDSCardSubtitleProps & DapDSCardSubtitleSlots
       'dap-ds-card-title': DapDSCardTitleProps & DapDSCardTitleSlots
       'dap-ds-card': DapDSCardProps & DapDSCardSlots
+      'dap-ds-checkbox': DapDSCheckboxProps & DapDSCheckboxEvents
       'dap-ds-chip': DapDSChipProps & DapDSChipEvents
       'dap-ds-code-puncher-slot': DapDSCodePuncherSlotProps
       'dap-ds-code-puncher': DapDSCodePuncherProps & DapDSCodePuncherEvents & DapDSCodePuncherSlots
@@ -6886,9 +6900,6 @@ declare global {
       'dap-ds-scroll-progress': DapDSScrollProgressProps
       'dap-ds-search': DapDSSearchProps & DapDSSearchEvents & DapDSSearchSlots
       'dap-ds-select': DapDSSelectProps & DapDSSelectEvents & DapDSSelectSlots
-      'dap-ds-sidenav-group': DapDSSideNavGroupProps & DapDSSideNavGroupSlots
-      'dap-ds-sidenav-item': DapDSSideNavItemProps & DapDSSideNavItemSlots
-      'dap-ds-sidenav': DapDSSideNavProps & DapDSSideNavEvents & DapDSSideNavSlots
       'dap-ds-skeleton': DapDSSkeletonProps
       'dap-ds-skip-link': DapDSSkipLinkProps & DapDSSkipLinkSlots
       'dap-ds-snackbar-message': DapDSSnackbarMessageProps & DapDSSnackbarMessageEvents & DapDSSnackbarMessageSlots
@@ -6902,6 +6913,9 @@ declare global {
       'dap-ds-table-header': DapDSTableHeaderProps & DapDSTableHeaderSlots
       'dap-ds-table-row': DapDSTableRowProps & DapDSTableRowSlots
       'dap-ds-table': DapDSTableProps & DapDSTableSlots
+      'dap-ds-sidenav-group': DapDSSideNavGroupProps & DapDSSideNavGroupSlots
+      'dap-ds-sidenav-item': DapDSSideNavItemProps & DapDSSideNavItemSlots
+      'dap-ds-sidenav': DapDSSideNavProps & DapDSSideNavEvents & DapDSSideNavSlots
       'dap-ds-textarea': DapDSTextareaProps & DapDSTextareaEvents & DapDSTextareaSlots
       'dap-ds-timeline-item': DapDSTimelineItemProps & DapDSTimelineItemSlots
       'dap-ds-timeline': DapDSTimelineProps & DapDSTimelineSlots
@@ -6913,19 +6927,19 @@ declare global {
       'dap-ds-tray': DapDSTrayProps & DapDSTrayEvents & DapDSTraySlots
       'dap-ds-typography': DapDSTypographyProps & DapDSTypographySlots
       'dap-ds-form-label': DapDSFormLabelProps
-      'dap-ds-input-group': DapDSInputGroupProps & DapDSInputGroupSlots
       'dap-ds-radio-group': DapDSRadioGroupProps & DapDSRadioGroupEvents & DapDSRadioGroupSlots
+      'dap-ds-input-group': DapDSInputGroupProps & DapDSInputGroupSlots
       'dap-ds-icon-arrow-down-line': ArrowsArrowDownLineProps
       'dap-ds-icon-arrow-down-s-fill': ArrowsArrowDownSFillProps
       'dap-ds-icon-arrow-down-s-line': ArrowsArrowDownSLineProps
       'dap-ds-icon-arrow-left-down-line': ArrowsArrowLeftDownLineProps
       'dap-ds-icon-arrow-left-l-line': ArrowsArrowLeftLLineProps
-      'dap-ds-icon-arrow-left-line': ArrowsArrowLeftLineProps
       'dap-ds-icon-arrow-left-s-fill': ArrowsArrowLeftSFillProps
+      'dap-ds-icon-arrow-left-line': ArrowsArrowLeftLineProps
       'dap-ds-icon-arrow-left-s-line': ArrowsArrowLeftSLineProps
-      'dap-ds-icon-arrow-left-up-line': ArrowsArrowLeftUpLineProps
       'dap-ds-icon-arrow-right-down-line': ArrowsArrowRightDownLineProps
       'dap-ds-icon-arrow-right-l-line': ArrowsArrowRightLLineProps
+      'dap-ds-icon-arrow-left-up-line': ArrowsArrowLeftUpLineProps
       'dap-ds-icon-arrow-right-line': ArrowsArrowRightLineProps
       'dap-ds-icon-arrow-right-s-fill': ArrowsArrowRightSFillProps
       'dap-ds-icon-arrow-right-s-line': ArrowsArrowRightSLineProps
@@ -6950,12 +6964,8 @@ declare global {
       'dap-ds-icon-separator': EditorSeparatorProps
       'dap-ds-icon-heart-fill': HealthHeartFillProps
       'dap-ds-icon-heart-line': HealthHeartLineProps
-      'dap-ds-icon-cookie-line': OthersCookieLineProps
-      'dap-ds-icon-account-circle-fill': UserAccountCircleFillProps
-      'dap-ds-icon-account-circle-line': UserAccountCircleLineProps
-      'dap-ds-icon-user-fill': UserUserFillProps
-      'dap-ds-icon-user-line': UserUserLineProps
       'dap-ds-icon-add-line': SystemAddLineProps
+      'dap-ds-icon-cookie-line': OthersCookieLineProps
       'dap-ds-icon-alert-fill': SystemAlertFillProps
       'dap-ds-icon-alert-line': SystemAlertLineProps
       'dap-ds-icon-check-line': SystemCheckLineProps
@@ -7003,6 +7013,10 @@ declare global {
       'dap-ds-icon-upload-line': SystemUploadLineProps
       'dap-ds-icon-zoom-in-line': SystemZoomInLineProps
       'dap-ds-icon-zoom-out-line': SystemZoomOutLineProps
+      'dap-ds-icon-account-circle-fill': UserAccountCircleFillProps
+      'dap-ds-icon-account-circle-line': UserAccountCircleLineProps
+      'dap-ds-icon-user-fill': UserUserFillProps
+      'dap-ds-icon-user-line': UserUserLineProps
     }
   }
 }