dap-design-system 0.57.10 → 0.58.0

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

@@ -217,13 +217,6 @@ export interface DapDSAccordionEvents {
   onDdsClosed?: (event: CustomEvent<{ open: boolean, item: AccordionBaseElement }>) => void
 }
 
-export interface DapDSAvatarEvents {
-  /** Fired when the image loads successfully. */
-  onDdsLoad?: (event: CustomEvent) => void
-  /** Fired when the image fails to load. */
-  onDdsError?: (event: CustomEvent) => void
-}
-
 export interface DapDSAvatarGroupEvents {
   /** Fired when the overflow indicator is clicked. */
   onDdsOverflowClick?: (event: CustomEvent) => void
@@ -234,21 +227,28 @@ export interface DapDSBannerEvents {
   onDdsClose?: (event: CustomEvent) => void
 }
 
+export interface DapDSAvatarEvents {
+  /** Fired when the image loads successfully. */
+  onDdsLoad?: (event: CustomEvent) => void
+  /** Fired when the image fails to load. */
+  onDdsError?: (event: CustomEvent) => void
+}
+
 export interface DapDSButtonEvents {
   /** Emitted when the loading timeout is reached */
   onDdsLoadingTimeout?: (event: CustomEvent) => 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 DapDSCalloutEvents {
+  /** Fired when the close button is clicked. */
+  onDdsClose?: (event: CustomEvent) => 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
@@ -666,18 +666,6 @@ export interface DapDSAccordionSlots {
   'icon-closed'?: () => any
 }
 
-export interface DapDSAvatarSlots {
-  /** The icon to display when variant is 'icon'. */
-  'icon'?: () => any
-  /** Custom fallback content when image fails to load. */
-  'fallback'?: () => any
-}
-
-export interface DapDSAccordionGroupSlots {
-  /** The content of the accordion group. */
-  default?: () => any
-}
-
 export interface DapDSAvatarGroupSlots {
   /** The avatars to display in the group. */
   default?: () => any
@@ -699,11 +687,16 @@ export interface DapDSBannerSlots {
   'icon'?: () => any
 }
 
-export interface DapDSBreadcrumbSlots {
-  /** The content of the breadcrumb. */
+export interface DapDSAccordionGroupSlots {
+  /** The content of the accordion group. */
   default?: () => any
-  /** The separator between breadcrumb items. Default is '/'. */
-  'separator'?: () => any
+}
+
+export interface DapDSAvatarSlots {
+  /** The icon to display when variant is 'icon'. */
+  'icon'?: () => any
+  /** Custom fallback content when image fails to load. */
+  'fallback'?: () => any
 }
 
 export interface DapDSBreadcrumbItemSlots {
@@ -718,19 +711,6 @@ export interface DapDSButtonSlots {
   default?: () => any
 }
 
-export interface DapDSCalloutSlots {
-  /** The content of the callout. */
-  default?: () => any
-  /** The title of the callout. */
-  'title'?: () => any
-  /** The icon of the callout. */
-  'icon'?: () => any
-  /** The actions of the callout. */
-  'actions'?: () => any
-  /** The close button of the callout. */
-  'close'?: () => any
-}
-
 export interface DapDSCalendarCellSlots {
   /** The content of the calendar cell. */
   default?: () => any
@@ -771,6 +751,26 @@ export interface DapDSCardSlots {
   default?: () => any
 }
 
+export interface DapDSCalloutSlots {
+  /** The content of the callout. */
+  default?: () => any
+  /** The title of the callout. */
+  'title'?: () => any
+  /** The icon of the callout. */
+  'icon'?: () => any
+  /** The actions of the callout. */
+  'actions'?: () => any
+  /** The close button of the callout. */
+  'close'?: () => any
+}
+
+export interface DapDSBreadcrumbSlots {
+  /** The content of the breadcrumb. */
+  default?: () => any
+  /** The separator between breadcrumb items. Default is '/'. */
+  'separator'?: () => any
+}
+
 export interface DapDSCodePuncherSlots {
   /** Slot for code-puncher-group, code-puncher-slot, and code-puncher-separator elements. */
   default?: () => any
@@ -1024,11 +1024,6 @@ export interface DapDSSnackbarMessageSlots {
   default?: () => any
 }
 
-export interface DapDSStackSlots {
-  /** The content of the stack. */
-  default?: () => any
-}
-
 export interface DapDSSpinnerSlots {
   /** The loading text content. */
   default?: () => any
@@ -1036,6 +1031,11 @@ export interface DapDSSpinnerSlots {
   'icon'?: () => any
 }
 
+export interface DapDSStackSlots {
+  /** The content of the stack. */
+  default?: () => any
+}
+
 export interface DapDSTabGroupSlots {
   /** The tab items. */
   default?: () => any
@@ -1123,6 +1123,17 @@ export interface DapDSRadioGroupSlots {
   'feedback-icon'?: () => any
 }
 
+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 DapDSAccordionProps = {
   /** The size of the accordion. Default is `sm`. Visual variants are sm and lg (other sizes map to sm). */
   size?: DapDSAccordion["size"]
@@ -1148,51 +1159,6 @@ export type DapDSAccordionProps = {
   loading?: DapDSAccordion["loading"]
 }
 
-export type DapDSAvatarProps = {
-  /** The shape of the avatar */
-  shape?: DapDSAvatar["shape"]
-  /** The variant type of the avatar */
-  variant?: DapDSAvatar["variant"]
-  /** The source of the avatar image */
-  src?: DapDSAvatar["src"]
-  /** The alt text of the avatar */
-  alt?: DapDSAvatar["alt"]
-  /** The initials to display when variant is 'initials' */
-  initials?: DapDSAvatar["initials"]
-  /** Accessible label for the avatar */
-  label?: DapDSAvatar["label"]
-  /** Loading state indicator */
-  loading?: DapDSAvatar["loading"]
-  /** Whether the avatar is interactive (clickable) */
-  interactive?: DapDSAvatar["interactive"]
-  /** The width of the avatar. This will override the size */
-  width?: DapDSAvatar["width"]
-  /** The height of the avatar. This will override the size */
-  height?: DapDSAvatar["height"]
-  /** The size of the avatar. Default is `md`. */
-  size?: DapDSAvatar["size"]
-  /** Responsive size map (e.g. "md:lg"). */
-  sizeMap?: DapDSAvatar["sizeMap"]
-}
-
-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 DapDSAccordionGroupProps = {
-  /** Whether to close other accordions when one is opened. */
-  autoClose?: DapDSAccordionGroup["autoClose"]
-  /** The variant of the accordion */
-  variant?: DapDSAccordionGroup["variant"]
-}
-
 export type DapDSAvatarGroupProps = {
   /** Layout type for the avatar group */
   layout?: DapDSAvatarGroup["layout"]
@@ -1240,13 +1206,38 @@ export type DapDSBannerProps = {
   icon?: DapDSBanner["icon"]
 }
 
-export type DapDSBreadcrumbProps = {
-  /**  */
-  variant?: DapDSBreadcrumb["variant"]
-  /** Mobile version of the breadcrumb */
-  mobile?: DapDSBreadcrumb["mobile"]
-  /** The aria-labelledby of the breadcrumb */
-  "aria-labelledby"?: DapDSBreadcrumb["ariaLabelledBy"]
+export type DapDSAccordionGroupProps = {
+  /** Whether to close other accordions when one is opened. */
+  autoClose?: DapDSAccordionGroup["autoClose"]
+  /** The variant of the accordion */
+  variant?: DapDSAccordionGroup["variant"]
+}
+
+export type DapDSAvatarProps = {
+  /** The shape of the avatar */
+  shape?: DapDSAvatar["shape"]
+  /** The variant type of the avatar */
+  variant?: DapDSAvatar["variant"]
+  /** The source of the avatar image */
+  src?: DapDSAvatar["src"]
+  /** The alt text of the avatar */
+  alt?: DapDSAvatar["alt"]
+  /** The initials to display when variant is 'initials' */
+  initials?: DapDSAvatar["initials"]
+  /** Accessible label for the avatar */
+  label?: DapDSAvatar["label"]
+  /** Loading state indicator */
+  loading?: DapDSAvatar["loading"]
+  /** Whether the avatar is interactive (clickable) */
+  interactive?: DapDSAvatar["interactive"]
+  /** The width of the avatar. This will override the size */
+  width?: DapDSAvatar["width"]
+  /** The height of the avatar. This will override the size */
+  height?: DapDSAvatar["height"]
+  /** The size of the avatar. Default is `md`. */
+  size?: DapDSAvatar["size"]
+  /** Responsive size map (e.g. "md:lg"). */
+  sizeMap?: DapDSAvatar["sizeMap"]
 }
 
 export type DapDSBreadcrumbItemProps = {
@@ -1293,27 +1284,6 @@ 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"]
@@ -1462,6 +1432,27 @@ export type DapDSCardProps = {
   sizeMap?: DapDSCard["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 DapDSCheckboxProps = {
   /** Whether the checkbox is indeterminate */
   indeterminate?: DapDSCheckbox["indeterminate"]
@@ -1485,6 +1476,8 @@ export type DapDSCheckboxProps = {
   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. */
@@ -1536,6 +1529,15 @@ export type DapDSChipProps = {
   sizeMap?: DapDSChip["sizeMap"]
 }
 
+export type DapDSBreadcrumbProps = {
+  /**  */
+  variant?: DapDSBreadcrumb["variant"]
+  /** Mobile version of the breadcrumb */
+  mobile?: DapDSBreadcrumb["mobile"]
+  /** The aria-labelledby of the breadcrumb */
+  "aria-labelledby"?: DapDSBreadcrumb["ariaLabelledBy"]
+}
+
 export type DapDSCodePuncherSlotProps = {
   /**  */
   disabled?: DapDSCodePuncherSlot["disabled"]
@@ -1562,6 +1564,8 @@ export type DapDSCodePuncherProps = {
   size?: DapDSCodePuncher["size"]
   /** The label of the component. */
   label?: DapDSCodePuncher["label"]
+  /** Visually hides the label while keeping it available to assistive technology. (default: false) */
+  hideLabel?: DapDSCodePuncher["hideLabel"]
   /** The description of the component. */
   description?: DapDSCodePuncher["description"]
   /** The tooltip of the component. */
@@ -1597,6 +1601,8 @@ export type DapDSComboboxProps = {
   sync?: DapDSCombobox["sync"]
   /** The label of the select. */
   label?: DapDSCombobox["label"]
+  /** Visually hides the label while keeping it available to assistive technology. (default: false) */
+  hideLabel?: DapDSCombobox["hideLabel"]
   /** The description of the select. */
   description?: DapDSCombobox["description"]
   /** The tooltip of the select. */
@@ -1920,6 +1926,8 @@ export type DapDSDatePickerProps = {
   feedbackId?: DapDSDatePicker["feedbackId"]
   /** The label of the datepicker. */
   label?: DapDSDatePicker["label"]
+  /** Visually hides the label while keeping it available to assistive technology. (default: false) */
+  hideLabel?: DapDSDatePicker["hideLabel"]
   /** The description of the datepicker. */
   description?: DapDSDatePicker["description"]
   /** The size of the datepicker. */
@@ -2133,6 +2141,8 @@ export type DapDSFileInputProps = {
   status?: DapDSFileInput["status"]
   /** The label for the file input. */
   label?: DapDSFileInput["label"]
+  /** Visually hides the label while keeping it available to assistive technology. (default: false) */
+  hideLabel?: DapDSFileInput["hideLabel"]
   /** The description for the file input. */
   description?: DapDSFileInput["description"]
   /** The tooltip for the file input. */
@@ -2225,6 +2235,8 @@ export type DapDSImageZoomProps = {
 export type DapDSInputProps = {
   /** The label of the input. */
   label?: DapDSInput["label"]
+  /** Visually hides the label while keeping it available to assistive technology. (default: false) */
+  hideLabel?: DapDSInput["hideLabel"]
   /** The description of the input. */
   description?: DapDSInput["description"]
   /** Text of optional label. */
@@ -2549,6 +2561,8 @@ export type DapDSNumberInputProps = {
   type?: DapDSNumberInput["type"]
   /** The label of the input. */
   label?: DapDSNumberInput["label"]
+  /** Visually hides the label while keeping it available to assistive technology. (default: false) */
+  hideLabel?: DapDSNumberInput["hideLabel"]
   /** The placeholder of the input. */
   placeholder?: DapDSNumberInput["placeholder"]
   /** The description of the input. */
@@ -2845,6 +2859,8 @@ export type DapDSRadioButtonProps = {
   checked?: DapDSRadioButton["checked"]
   /** The label of the radio button. */
   label?: DapDSRadioButton["label"]
+  /** Visually hides the label while keeping it available to assistive technology. (default: false) */
+  hideLabel?: DapDSRadioButton["hideLabel"]
   /** The description of the radio button. */
   description?: DapDSRadioButton["description"]
   /** Whether the radio button is disabled. */
@@ -3000,6 +3016,8 @@ export type DapDSSelectProps = {
   value?: DapDSSelect["value"]
   /** The label of the select. */
   label?: DapDSSelect["label"]
+  /** Visually hides the label while keeping it available to assistive technology. (default: false) */
+  hideLabel?: DapDSSelect["hideLabel"]
   /** The description of the select. */
   description?: DapDSSelect["description"]
   /** The tooltip of the select. */
@@ -3032,22 +3050,6 @@ export type DapDSSelectProps = {
   subtle?: DapDSSelect["subtle"]
 }
 
-export type DapDSSkeletonProps = {
-  /** The variant of the skeleton. */
-  variant?: DapDSSkeleton["variant"]
-  /** The width of the skeleton. Can be any valid CSS width value. */
-  width?: DapDSSkeleton["width"]
-  /** The height of the skeleton. Can be any valid CSS height value. */
-  height?: DapDSSkeleton["height"]
-  /** Whether to animate the skeleton. */
-  noAnimation?: DapDSSkeleton["noAnimation"]
-  /** The animation type for the skeleton. */
-  animation?: DapDSSkeleton["animation"]
-  /** Custom keyframes for the animation when animation="custom".
-Should be a valid CSS keyframes string without the */
-  "custom-keyframes"?: DapDSSkeleton["customKeyframes"]
-}
-
 export type DapDSSideNavGroupProps = {
   /** The href of the side navigation item */
   href?: DapDSSideNavGroup["href"]
@@ -3086,9 +3088,34 @@ export type DapDSSideNavProps = {
   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 DapDSSkipLinkProps = {
+export type DapDSSkeletonProps = {
+  /** The variant of the skeleton. */
+  variant?: DapDSSkeleton["variant"]
+  /** The width of the skeleton. Can be any valid CSS width value. */
+  width?: DapDSSkeleton["width"]
+  /** The height of the skeleton. Can be any valid CSS height value. */
+  height?: DapDSSkeleton["height"]
+  /** Whether to animate the skeleton. */
+  noAnimation?: DapDSSkeleton["noAnimation"]
+  /** The animation type for the skeleton. */
+  animation?: DapDSSkeleton["animation"]
+  /** Custom keyframes for the animation when animation="custom".
+Should be a valid CSS keyframes string without the */
+  "custom-keyframes"?: DapDSSkeleton["customKeyframes"]
+}
+
+export type DapDSSkipLinkProps = {
   /** The placement of the skip link. */
   placement?: DapDSSkipLink["placement"]
   /** The href of the skip link */
@@ -3127,17 +3154,6 @@ export type DapDSSnackbarProps = {
   announceMessages?: DapDSSnackbar["announceMessages"]
 }
 
-export type DapDSStackProps = {
-  /** The direction of the stack. */
-  direction?: DapDSStack["direction"]
-  /** Adds margin to the end of the stack. */
-  endMargin?: DapDSStack["endMargin"]
-  /** Adds margin to the start of the stack. */
-  startMargin?: DapDSStack["startMargin"]
-  /** The spacing of the stack. Uses the system spacing scale (100, 200, 300...etc) */
-  spacing?: DapDSStack["spacing"]
-}
-
 export type DapDSSpinnerProps = {
   /** The variant of the spinner. */
   variant?: DapDSSpinner["variant"]
@@ -3160,6 +3176,17 @@ Prevents flash for quick operations. */
   sizeMap?: DapDSSpinner["sizeMap"]
 }
 
+export type DapDSStackProps = {
+  /** The direction of the stack. */
+  direction?: DapDSStack["direction"]
+  /** Adds margin to the end of the stack. */
+  endMargin?: DapDSStack["endMargin"]
+  /** Adds margin to the start of the stack. */
+  startMargin?: DapDSStack["startMargin"]
+  /** The spacing of the stack. Uses the system spacing scale (100, 200, 300...etc) */
+  spacing?: DapDSStack["spacing"]
+}
+
 export type DapDSSwitchProps = {
   /** This sets up border around the switch, when true. */
   border?: DapDSSwitch["border"]
@@ -3175,6 +3202,8 @@ export type DapDSSwitchProps = {
   value?: DapDSSwitch["value"]
   /** The label of the switch. */
   label?: DapDSSwitch["label"]
+  /** Visually hides the label while keeping it available to assistive technology. (default: false) */
+  hideLabel?: DapDSSwitch["hideLabel"]
   /** The description of the switch. */
   description?: DapDSSwitch["description"]
   /** The checked state of the switch. */
@@ -3288,6 +3317,8 @@ export type DapDSTextareaProps = {
   required?: DapDSTextarea["required"]
   /** The label of the textarea. */
   label?: DapDSTextarea["label"]
+  /** Visually hides the label while keeping it available to assistive technology. (default: false) */
+  hideLabel?: DapDSTextarea["hideLabel"]
   /** The description of the textarea. */
   description?: DapDSTextarea["description"]
   /** The feedback of the textarea. */
@@ -3406,6 +3437,8 @@ export type DapDSTimePickerProps = {
   feedbackId?: DapDSTimePicker["feedbackId"]
   /** The label of the timepicker. */
   label?: DapDSTimePicker["label"]
+  /** Visually hides the label while keeping it available to assistive technology. (default: false) */
+  hideLabel?: DapDSTimePicker["hideLabel"]
   /** The description of the timepicker. */
   description?: DapDSTimePicker["description"]
   /** The size of the timepicker. */
@@ -3438,21 +3471,6 @@ export type DapDSTimePickerProps = {
   autocomplete?: DapDSTimePicker["autocomplete"]
 }
 
-export type DapDSToggleButtonProps = {
-  /** Whether the button is active. */
-  active?: DapDSToggleButton["active"]
-  /** The shape of the button */
-  shape?: DapDSToggleButton["shape"]
-  /**  */
-  sizeChildren?: DapDSToggleButton["sizeChildren"]
-  /**  */
-  focusElement?: DapDSToggleButton["focusElement"]
-  /** The size of the toggle button. Default is `md` */
-  size?: DapDSToggleButton["size"]
-  /** Responsive size map (e.g. "md:lg") */
-  sizeMap?: DapDSToggleButton["sizeMap"]
-}
-
 export type DapDSTOCProps = {
   /** The root element to observe [`IntersectionObserver`](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#root) */
   root?: DapDSTOC["root"]
@@ -3482,6 +3500,21 @@ export type DapDSTOCProps = {
   sizeMap?: DapDSTOC["sizeMap"]
 }
 
+export type DapDSToggleButtonProps = {
+  /** Whether the button is active. */
+  active?: DapDSToggleButton["active"]
+  /** The shape of the button */
+  shape?: DapDSToggleButton["shape"]
+  /**  */
+  sizeChildren?: DapDSToggleButton["sizeChildren"]
+  /**  */
+  focusElement?: DapDSToggleButton["focusElement"]
+  /** The size of the toggle button. Default is `md` */
+  size?: DapDSToggleButton["size"]
+  /** Responsive size map (e.g. "md:lg") */
+  sizeMap?: DapDSToggleButton["sizeMap"]
+}
+
 export type DapDSTooltipProps = {
   /** The content of the tooltip, supporting text only. */
   content?: DapDSTooltip["content"]
@@ -3564,6 +3597,8 @@ export type DapDSFormLabelProps = {
   requiredLabel?: DapDSFormLabel["requiredLabel"]
   /** The label text. */
   label?: DapDSFormLabel["label"]
+  /** Visually hides the label while keeping it available to assistive technology. (default: false) */
+  hideLabel?: DapDSFormLabel["hideLabel"]
 }
 
 export type DapDSInputGroupProps = {
@@ -3571,6 +3606,8 @@ 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. */
@@ -3620,6 +3657,8 @@ export type DapDSRadioGroupProps = {
   required?: DapDSRadioGroup["required"]
   /** The label of the radio group. */
   label?: DapDSRadioGroup["label"]
+  /** Visually hides the label while keeping it available to assistive technology. (default: false) */
+  hideLabel?: DapDSRadioGroup["hideLabel"]
   /** The description of the radio group. */
   description?: DapDSRadioGroup["description"]
   /** The tooltip of the radio group. */
@@ -3638,17 +3677,6 @@ export type DapDSRadioGroupProps = {
   size?: DapDSRadioGroup["size"]
 }
 
-export type BuildingsHome6LineProps = {
-  /** (optional) The width and height in pixels */
-  size?: BuildingsHome6Line["size"]
-  /** (optional) Sets the icon color via the `fill` attribute */
-  selected?: BuildingsHome6Line["selected"]
-  /** (optional) When using the icon standalone, make it meaningful for accessibility */
-  accessibilityTitle?: BuildingsHome6Line["accessibilityTitle"]
-  /** (optional) If `true` the icon can receive focus */
-  focusable?: BuildingsHome6Line["focusable"]
-}
-
 export type ArrowsArrowDownLineProps = {
   /** (optional) The width and height in pixels */
   size?: ArrowsArrowDownLine["size"]
@@ -3715,17 +3743,6 @@ export type ArrowsArrowLeftLineProps = {
   focusable?: ArrowsArrowLeftLine["focusable"]
 }
 
-export type ArrowsArrowLeftSFillProps = {
-  /** (optional) The width and height in pixels */
-  size?: ArrowsArrowLeftSFill["size"]
-  /** (optional) Sets the icon color via the `fill` attribute */
-  selected?: ArrowsArrowLeftSFill["selected"]
-  /** (optional) When using the icon standalone, make it meaningful for accessibility */
-  accessibilityTitle?: ArrowsArrowLeftSFill["accessibilityTitle"]
-  /** (optional) If `true` the icon can receive focus */
-  focusable?: ArrowsArrowLeftSFill["focusable"]
-}
-
 export type ArrowsArrowLeftSLineProps = {
   /** (optional) The width and height in pixels */
   size?: ArrowsArrowLeftSLine["size"]
@@ -3737,15 +3754,15 @@ export type ArrowsArrowLeftSLineProps = {
   focusable?: ArrowsArrowLeftSLine["focusable"]
 }
 
-export type ArrowsArrowRightDownLineProps = {
+export type ArrowsArrowLeftSFillProps = {
   /** (optional) The width and height in pixels */
-  size?: ArrowsArrowRightDownLine["size"]
+  size?: ArrowsArrowLeftSFill["size"]
   /** (optional) Sets the icon color via the `fill` attribute */
-  selected?: ArrowsArrowRightDownLine["selected"]
+  selected?: ArrowsArrowLeftSFill["selected"]
   /** (optional) When using the icon standalone, make it meaningful for accessibility */
-  accessibilityTitle?: ArrowsArrowRightDownLine["accessibilityTitle"]
+  accessibilityTitle?: ArrowsArrowLeftSFill["accessibilityTitle"]
   /** (optional) If `true` the icon can receive focus */
-  focusable?: ArrowsArrowRightDownLine["focusable"]
+  focusable?: ArrowsArrowLeftSFill["focusable"]
 }
 
 export type ArrowsArrowLeftUpLineProps = {
@@ -3759,6 +3776,17 @@ export type ArrowsArrowLeftUpLineProps = {
   focusable?: ArrowsArrowLeftUpLine["focusable"]
 }
 
+export type ArrowsArrowRightDownLineProps = {
+  /** (optional) The width and height in pixels */
+  size?: ArrowsArrowRightDownLine["size"]
+  /** (optional) Sets the icon color via the `fill` attribute */
+  selected?: ArrowsArrowRightDownLine["selected"]
+  /** (optional) When using the icon standalone, make it meaningful for accessibility */
+  accessibilityTitle?: ArrowsArrowRightDownLine["accessibilityTitle"]
+  /** (optional) If `true` the icon can receive focus */
+  focusable?: ArrowsArrowRightDownLine["focusable"]
+}
+
 export type ArrowsArrowRightLLineProps = {
   /** (optional) The width and height in pixels */
   size?: ArrowsArrowRightLLine["size"]
@@ -3792,26 +3820,26 @@ export type ArrowsArrowRightSFillProps = {
   focusable?: ArrowsArrowRightSFill["focusable"]
 }
 
-export type ArrowsArrowRightUpLineProps = {
+export type ArrowsArrowRightSLineProps = {
   /** (optional) The width and height in pixels */
-  size?: ArrowsArrowRightUpLine["size"]
+  size?: ArrowsArrowRightSLine["size"]
   /** (optional) Sets the icon color via the `fill` attribute */
-  selected?: ArrowsArrowRightUpLine["selected"]
+  selected?: ArrowsArrowRightSLine["selected"]
   /** (optional) When using the icon standalone, make it meaningful for accessibility */
-  accessibilityTitle?: ArrowsArrowRightUpLine["accessibilityTitle"]
+  accessibilityTitle?: ArrowsArrowRightSLine["accessibilityTitle"]
   /** (optional) If `true` the icon can receive focus */
-  focusable?: ArrowsArrowRightUpLine["focusable"]
+  focusable?: ArrowsArrowRightSLine["focusable"]
 }
 
-export type ArrowsArrowRightSLineProps = {
+export type ArrowsArrowRightUpLineProps = {
   /** (optional) The width and height in pixels */
-  size?: ArrowsArrowRightSLine["size"]
+  size?: ArrowsArrowRightUpLine["size"]
   /** (optional) Sets the icon color via the `fill` attribute */
-  selected?: ArrowsArrowRightSLine["selected"]
+  selected?: ArrowsArrowRightUpLine["selected"]
   /** (optional) When using the icon standalone, make it meaningful for accessibility */
-  accessibilityTitle?: ArrowsArrowRightSLine["accessibilityTitle"]
+  accessibilityTitle?: ArrowsArrowRightUpLine["accessibilityTitle"]
   /** (optional) If `true` the icon can receive focus */
-  focusable?: ArrowsArrowRightSLine["focusable"]
+  focusable?: ArrowsArrowRightUpLine["focusable"]
 }
 
 export type ArrowsArrowUpLineProps = {
@@ -3858,15 +3886,15 @@ export type ArrowsExpandUpDownFillProps = {
   focusable?: ArrowsExpandUpDownFill["focusable"]
 }
 
-export type DesignEditLineProps = {
+export type BuildingsHome6LineProps = {
   /** (optional) The width and height in pixels */
-  size?: DesignEditLine["size"]
+  size?: BuildingsHome6Line["size"]
   /** (optional) Sets the icon color via the `fill` attribute */
-  selected?: DesignEditLine["selected"]
+  selected?: BuildingsHome6Line["selected"]
   /** (optional) When using the icon standalone, make it meaningful for accessibility */
-  accessibilityTitle?: DesignEditLine["accessibilityTitle"]
+  accessibilityTitle?: BuildingsHome6Line["accessibilityTitle"]
   /** (optional) If `true` the icon can receive focus */
-  focusable?: DesignEditLine["focusable"]
+  focusable?: BuildingsHome6Line["focusable"]
 }
 
 export type BusinessCalendarLineProps = {
@@ -3880,6 +3908,17 @@ export type BusinessCalendarLineProps = {
   focusable?: BusinessCalendarLine["focusable"]
 }
 
+export type DesignEditLineProps = {
+  /** (optional) The width and height in pixels */
+  size?: DesignEditLine["size"]
+  /** (optional) Sets the icon color via the `fill` attribute */
+  selected?: DesignEditLine["selected"]
+  /** (optional) When using the icon standalone, make it meaningful for accessibility */
+  accessibilityTitle?: DesignEditLine["accessibilityTitle"]
+  /** (optional) If `true` the icon can receive focus */
+  focusable?: DesignEditLine["focusable"]
+}
+
 export type DesignToolsLineProps = {
   /** (optional) The width and height in pixels */
   size?: DesignToolsLine["size"]
@@ -3902,6 +3941,17 @@ export type DeviceComputerLineProps = {
   focusable?: DeviceComputerLine["focusable"]
 }
 
+export type EditorSeparatorProps = {
+  /** (optional) The width and height in pixels */
+  size?: EditorSeparator["size"]
+  /** (optional) Sets the icon color via the `fill` attribute */
+  selected?: EditorSeparator["selected"]
+  /** (optional) When using the icon standalone, make it meaningful for accessibility */
+  accessibilityTitle?: EditorSeparator["accessibilityTitle"]
+  /** (optional) If `true` the icon can receive focus */
+  focusable?: EditorSeparator["focusable"]
+}
+
 export type DocumentClipboardLineProps = {
   /** (optional) The width and height in pixels */
   size?: DocumentClipboardLine["size"]
@@ -3990,17 +4040,6 @@ export type DocumentFolderOpenLineProps = {
   focusable?: DocumentFolderOpenLine["focusable"]
 }
 
-export type EditorSeparatorProps = {
-  /** (optional) The width and height in pixels */
-  size?: EditorSeparator["size"]
-  /** (optional) Sets the icon color via the `fill` attribute */
-  selected?: EditorSeparator["selected"]
-  /** (optional) When using the icon standalone, make it meaningful for accessibility */
-  accessibilityTitle?: EditorSeparator["accessibilityTitle"]
-  /** (optional) If `true` the icon can receive focus */
-  focusable?: EditorSeparator["focusable"]
-}
-
 export type HealthHeartFillProps = {
   /** (optional) The width and height in pixels */
   size?: HealthHeartFill["size"]
@@ -4034,26 +4073,59 @@ export type OthersCookieLineProps = {
   focusable?: OthersCookieLine["focusable"]
 }
 
-export type SystemAddLineProps = {
+export type UserAccountCircleFillProps = {
   /** (optional) The width and height in pixels */
-  size?: SystemAddLine["size"]
+  size?: UserAccountCircleFill["size"]
   /** (optional) Sets the icon color via the `fill` attribute */
-  selected?: SystemAddLine["selected"]
+  selected?: UserAccountCircleFill["selected"]
   /** (optional) When using the icon standalone, make it meaningful for accessibility */
-  accessibilityTitle?: SystemAddLine["accessibilityTitle"]
+  accessibilityTitle?: UserAccountCircleFill["accessibilityTitle"]
   /** (optional) If `true` the icon can receive focus */
-  focusable?: SystemAddLine["focusable"]
+  focusable?: UserAccountCircleFill["focusable"]
 }
 
-export type SystemAlertFillProps = {
+export type UserAccountCircleLineProps = {
   /** (optional) The width and height in pixels */
-  size?: SystemAlertFill["size"]
+  size?: UserAccountCircleLine["size"]
   /** (optional) Sets the icon color via the `fill` attribute */
-  selected?: SystemAlertFill["selected"]
+  selected?: UserAccountCircleLine["selected"]
   /** (optional) When using the icon standalone, make it meaningful for accessibility */
-  accessibilityTitle?: SystemAlertFill["accessibilityTitle"]
+  accessibilityTitle?: UserAccountCircleLine["accessibilityTitle"]
   /** (optional) If `true` the icon can receive focus */
-  focusable?: SystemAlertFill["focusable"]
+  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"]
+}
+
+export type SystemAddLineProps = {
+  /** (optional) The width and height in pixels */
+  size?: SystemAddLine["size"]
+  /** (optional) Sets the icon color via the `fill` attribute */
+  selected?: SystemAddLine["selected"]
+  /** (optional) When using the icon standalone, make it meaningful for accessibility */
+  accessibilityTitle?: SystemAddLine["accessibilityTitle"]
+  /** (optional) If `true` the icon can receive focus */
+  focusable?: SystemAddLine["focusable"]
 }
 
 export type SystemAlertLineProps = {
@@ -4067,6 +4139,17 @@ export type SystemAlertLineProps = {
   focusable?: SystemAlertLine["focusable"]
 }
 
+export type SystemAlertFillProps = {
+  /** (optional) The width and height in pixels */
+  size?: SystemAlertFill["size"]
+  /** (optional) Sets the icon color via the `fill` attribute */
+  selected?: SystemAlertFill["selected"]
+  /** (optional) When using the icon standalone, make it meaningful for accessibility */
+  accessibilityTitle?: SystemAlertFill["accessibilityTitle"]
+  /** (optional) If `true` the icon can receive focus */
+  focusable?: SystemAlertFill["focusable"]
+}
+
 export type SystemCheckLineProps = {
   /** (optional) The width and height in pixels */
   size?: SystemCheckLine["size"]
@@ -4562,53 +4645,19 @@ 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 {
+    /**
+     * 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, {}>
     /**
      * An accordion is a vertically stacked list of interactive items that can be expanded or collapsed to reveal or hide content.
      *
@@ -4635,46 +4684,6 @@ declare module 'vue' {
      * - **close-icon-base** - The base of the icon when the accordion is closed.
      */
          'dap-ds-accordion': DefineCustomElement<DapDSAccordion, DapDSAccordionProps, DapDSAccordionEvents>
-    /**
-     * Avatar component can be used to display user profile images, initials, or icons.
-     *
-     * ### Events:
-     * - **dds-load** - Fired when the image loads successfully.
-     * - **dds-error** - Fired when the image fails to load.
-     *
-     * ### Slots:
-     * - **icon** - The icon to display when variant is 'icon'.
-     * - **fallback** - Custom fallback content when image fails to load.
-     *
-     * ### CSS Parts:
-     * - **base** - The main avatar container.
-     * - **img** - The avatar image.
-     * - **initials** - The initials container.
-     * - **icon** - The icon container.
-     * - **fallback** - The fallback content container.
-     * - **loading** - The loading indicator.
-     */
-         'dap-ds-avatar': DefineCustomElement<DapDSAvatar, DapDSAvatarProps, DapDSAvatarEvents>
-    /**
-     * 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, {}>
-    /**
-     * An accordion group is a collection of accordion components.
-     *
-     * ### Slots:
-     * - **default** - The content of the accordion group.
-     *
-     * ### CSS Parts:
-     * - **base** - The main accordion group container.
-     */
-         'dap-ds-accordion-group': DefineCustomElement<DapDSAccordionGroup, DapDSAccordionGroupProps, {}>
     /**
      * Avatar group component displays multiple avatars in an organized layout with overflow management.
      *
@@ -4729,17 +4738,35 @@ declare module 'vue' {
      */
          'dap-ds-banner': DefineCustomElement<DapDSBanner, DapDSBannerProps, DapDSBannerEvents>
     /**
-     * A breadcrumb is a secondary navigation scheme that reveals the user's location in a website or Web application.
+     * An accordion group is a collection of accordion components.
      *
      * ### Slots:
-     * - **default** - The content of the breadcrumb.
-     * - **separator** - The separator between breadcrumb items. Default is '/'.
+     * - **default** - The content of the accordion group.
      *
      * ### CSS Parts:
-     * - **base** - The main breadcrumb container.
-     * - **separator** - The separator of the breadcrumb.
+     * - **base** - The main accordion group container.
+     */
+         'dap-ds-accordion-group': DefineCustomElement<DapDSAccordionGroup, DapDSAccordionGroupProps, {}>
+    /**
+     * Avatar component can be used to display user profile images, initials, or icons.
+     *
+     * ### Events:
+     * - **dds-load** - Fired when the image loads successfully.
+     * - **dds-error** - Fired when the image fails to load.
+     *
+     * ### Slots:
+     * - **icon** - The icon to display when variant is 'icon'.
+     * - **fallback** - Custom fallback content when image fails to load.
+     *
+     * ### CSS Parts:
+     * - **base** - The main avatar container.
+     * - **img** - The avatar image.
+     * - **initials** - The initials container.
+     * - **icon** - The icon container.
+     * - **fallback** - The fallback content container.
+     * - **loading** - The loading indicator.
      */
-         'dap-ds-breadcrumb': DefineCustomElement<DapDSBreadcrumb, DapDSBreadcrumbProps, {}>
+         'dap-ds-avatar': DefineCustomElement<DapDSAvatar, DapDSAvatarProps, DapDSAvatarEvents>
     /**
      * A breadcrumb item is a secondary navigation scheme that reveals the user's location in a website or Web application.
      *
@@ -4770,30 +4797,6 @@ declare module 'vue' {
      * - **content** - The content wrapper inside the button.
      */
          'dap-ds-button': DefineCustomElement<DapDSButton, DapDSButtonProps, DapDSButtonEvents>
-    /**
-     * 
-     *
-     * ### Events:
-     * - **dds-close** - Fired when the close button is clicked.
-     *
-     * ### Slots:
-     * - **default** - The content of the callout.
-     * - **title** - The title of the callout.
-     * - **icon** - The icon of the callout.
-     * - **actions** - The actions of the callout.
-     * - **close** - The close button of the callout.
-     *
-     * ### CSS Parts:
-     * - **base** - The main callout container.
-     * - **content** - The content of the callout.
-     * - **card-content** - The content of the card.
-     * - **icon** - The icon of the callout.
-     * - **title** - The title of the callout.
-     * - **description** - The description of the callout.
-     * - **actions** - The actions of the callout.
-     * - **close** - The close button of the callout.
-     */
-         'dap-ds-callout': DefineCustomElement<DapDSCallout, DapDSCalloutProps, DapDSCalloutEvents>
     /**
      * Calendar cell represents a single cell in the calendar.
      *
@@ -4887,6 +4890,30 @@ declare module 'vue' {
      * - **base** - The main card container.
      */
          'dap-ds-card': DefineCustomElement<DapDSCard, DapDSCardProps, {}>
+    /**
+     * 
+     *
+     * ### Events:
+     * - **dds-close** - Fired when the close button is clicked.
+     *
+     * ### Slots:
+     * - **default** - The content of the callout.
+     * - **title** - The title of the callout.
+     * - **icon** - The icon of the callout.
+     * - **actions** - The actions of the callout.
+     * - **close** - The close button of the callout.
+     *
+     * ### CSS Parts:
+     * - **base** - The main callout container.
+     * - **content** - The content of the callout.
+     * - **card-content** - The content of the card.
+     * - **icon** - The icon of the callout.
+     * - **title** - The title of the callout.
+     * - **description** - The description of the callout.
+     * - **actions** - The actions of the callout.
+     * - **close** - The close button of the callout.
+     */
+         '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.
      *
@@ -4924,6 +4951,18 @@ declare module 'vue' {
      * - **remove-icon-base-base** - The base of the remove icon base
      */
          'dap-ds-chip': DefineCustomElement<DapDSChip, DapDSChipProps, DapDSChipEvents>
+    /**
+     * A breadcrumb is a secondary navigation scheme that reveals the user's location in a website or Web application.
+     *
+     * ### Slots:
+     * - **default** - The content of the breadcrumb.
+     * - **separator** - The separator between breadcrumb items. Default is '/'.
+     *
+     * ### CSS Parts:
+     * - **base** - The main breadcrumb container.
+     * - **separator** - The separator of the breadcrumb.
+     */
+         'dap-ds-breadcrumb': DefineCustomElement<DapDSBreadcrumb, DapDSBreadcrumbProps, {}>
     /**
      * Individual digit input slot for code puncher.
      *
@@ -5763,13 +5802,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>
-    /**
-     * A skeleton loader component for displaying placeholder content while loading.
-     *
-     * ### CSS Parts:
-     * - **base** - The main skeleton container.
-     */
-         'dap-ds-skeleton': DefineCustomElement<DapDSSkeleton, DapDSSkeletonProps, {}>
     /**
      * Side navigation group
      *
@@ -5812,6 +5844,13 @@ Used with dap-ds-select to create grouped options that render as native optgroup
      * - **menu** - The menu of the side navigation.
      */
          'dap-ds-sidenav': DefineCustomElement<DapDSSideNav, DapDSSideNavProps, DapDSSideNavEvents>
+    /**
+     * A skeleton loader component for displaying placeholder content while loading.
+     *
+     * ### CSS Parts:
+     * - **base** - The main skeleton container.
+     */
+         'dap-ds-skeleton': DefineCustomElement<DapDSSkeleton, DapDSSkeletonProps, {}>
     /**
      * A skip link is a link that allows keyboard users to skip to the main content of a page.
      *
@@ -5853,16 +5892,6 @@ Used with dap-ds-select to create grouped options that render as native optgroup
      * - **message-actions** - The actions part of the message
      */
          'dap-ds-snackbar': DefineCustomElement<DapDSSnackbar, DapDSSnackbarProps, {}>
-    /**
-     * A stack is a container for stacked content.
-     *
-     * ### Slots:
-     * - **default** - The content of the stack.
-     *
-     * ### CSS Parts:
-     * - **stack** - The main stack container.
-     */
-         'dap-ds-stack': DefineCustomElement<DapDSStack, DapDSStackProps, {}>
     /**
      * Loading spinner component.
      *
@@ -5878,6 +5907,16 @@ Used with dap-ds-select to create grouped options that render as native optgroup
      * - **text** - The loading text element.
      */
          'dap-ds-spinner': DefineCustomElement<DapDSSpinner, DapDSSpinnerProps, {}>
+    /**
+     * A stack is a container for stacked content.
+     *
+     * ### Slots:
+     * - **default** - The content of the stack.
+     *
+     * ### CSS Parts:
+     * - **stack** - The main stack container.
+     */
+         'dap-ds-stack': DefineCustomElement<DapDSStack, DapDSStackProps, {}>
     /**
      * A switch is a graphical control element that allows the user to toggle between two states.
      *
@@ -6047,6 +6086,16 @@ Used with dap-ds-select to create grouped options that render as native optgroup
      * - **clear-button** - The clear button of the timepicker.
      */
          'dap-ds-timepicker': DefineCustomElement<DapDSTimePicker, DapDSTimePickerProps, DapDSTimePickerEvents>
+    /**
+     * A table of contents (TOC) is a list of links that allows users to quickly navigate to sections within a document.
+     *
+     * ### Events:
+     * - **dds-anchor-change** - Event that is triggered when the anchor changes.
+     *
+     * ### CSS Parts:
+     * - **base** - The main container of the toc.
+     */
+         'dap-ds-toc': DefineCustomElement<DapDSTOC, DapDSTOCProps, DapDSTOCEvents>
     /**
      * A toggle button is a button that can be toggled on (active) or off (inactive).
      *
@@ -6058,16 +6107,6 @@ Used with dap-ds-select to create grouped options that render as native optgroup
      * - **high-contrast** - The high contrast part of the button.
      */
          'dap-ds-toggle-button': DefineCustomElement<DapDSToggleButton, DapDSToggleButtonProps, {}>
-    /**
-     * A table of contents (TOC) is a list of links that allows users to quickly navigate to sections within a document.
-     *
-     * ### Events:
-     * - **dds-anchor-change** - Event that is triggered when the anchor changes.
-     *
-     * ### CSS Parts:
-     * - **base** - The main container of the toc.
-     */
-         'dap-ds-toc': DefineCustomElement<DapDSTOC, DapDSTOCProps, DapDSTOCEvents>
     /**
      * A tooltip is a container for tooltip content.
      *
@@ -6159,13 +6198,6 @@ 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 icon
-     *
-     * ### CSS Parts:
-     * - **base** - The main icon container.
-     */
-         'dap-ds-icon-home-6-line': DefineCustomElement<BuildingsHome6Line, BuildingsHome6LineProps, {}>
     /**
      * An icon
      *
@@ -6214,28 +6246,28 @@ 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-s-fill': DefineCustomElement<ArrowsArrowLeftSFill, ArrowsArrowLeftSFillProps, {}>
+         'dap-ds-icon-arrow-left-s-line': DefineCustomElement<ArrowsArrowLeftSLine, ArrowsArrowLeftSLineProps, {}>
     /**
      * An icon
      *
      * ### CSS Parts:
      * - **base** - The main icon container.
      */
-         'dap-ds-icon-arrow-left-s-line': DefineCustomElement<ArrowsArrowLeftSLine, ArrowsArrowLeftSLineProps, {}>
+         'dap-ds-icon-arrow-left-s-fill': DefineCustomElement<ArrowsArrowLeftSFill, ArrowsArrowLeftSFillProps, {}>
     /**
      * An icon
      *
      * ### CSS Parts:
      * - **base** - The main icon container.
      */
-         'dap-ds-icon-arrow-right-down-line': DefineCustomElement<ArrowsArrowRightDownLine, ArrowsArrowRightDownLineProps, {}>
+         'dap-ds-icon-arrow-left-up-line': DefineCustomElement<ArrowsArrowLeftUpLine, ArrowsArrowLeftUpLineProps, {}>
     /**
      * An icon
      *
      * ### 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
      *
@@ -6263,14 +6295,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-right-up-line': DefineCustomElement<ArrowsArrowRightUpLine, ArrowsArrowRightUpLineProps, {}>
+         'dap-ds-icon-arrow-right-s-line': DefineCustomElement<ArrowsArrowRightSLine, ArrowsArrowRightSLineProps, {}>
     /**
      * An icon
      *
      * ### CSS Parts:
      * - **base** - The main icon container.
      */
-         'dap-ds-icon-arrow-right-s-line': DefineCustomElement<ArrowsArrowRightSLine, ArrowsArrowRightSLineProps, {}>
+         'dap-ds-icon-arrow-right-up-line': DefineCustomElement<ArrowsArrowRightUpLine, ArrowsArrowRightUpLineProps, {}>
     /**
      * An icon
      *
@@ -6305,7 +6337,7 @@ Used with dap-ds-select to create grouped options that render as native optgroup
      * ### CSS Parts:
      * - **base** - The main icon container.
      */
-         'dap-ds-icon-edit-line': DefineCustomElement<DesignEditLine, DesignEditLineProps, {}>
+         'dap-ds-icon-home-6-line': DefineCustomElement<BuildingsHome6Line, BuildingsHome6LineProps, {}>
     /**
      * An icon
      *
@@ -6313,6 +6345,13 @@ Used with dap-ds-select to create grouped options that render as native optgroup
      * - **base** - The main icon container.
      */
          'dap-ds-icon-calendar-line': DefineCustomElement<BusinessCalendarLine, BusinessCalendarLineProps, {}>
+    /**
+     * An icon
+     *
+     * ### CSS Parts:
+     * - **base** - The main icon container.
+     */
+         'dap-ds-icon-edit-line': DefineCustomElement<DesignEditLine, DesignEditLineProps, {}>
     /**
      * An icon
      *
@@ -6327,6 +6366,13 @@ Used with dap-ds-select to create grouped options that render as native optgroup
      * - **base** - The main icon container.
      */
          'dap-ds-icon-computer-line': DefineCustomElement<DeviceComputerLine, DeviceComputerLineProps, {}>
+    /**
+     * An icon
+     *
+     * ### CSS Parts:
+     * - **base** - The main icon container.
+     */
+         'dap-ds-icon-separator': DefineCustomElement<EditorSeparator, EditorSeparatorProps, {}>
     /**
      * An icon
      *
@@ -6389,42 +6435,56 @@ Used with dap-ds-select to create grouped options that render as native optgroup
      * ### CSS Parts:
      * - **base** - The main icon container.
      */
-         'dap-ds-icon-separator': DefineCustomElement<EditorSeparator, EditorSeparatorProps, {}>
+         'dap-ds-icon-heart-fill': DefineCustomElement<HealthHeartFill, HealthHeartFillProps, {}>
     /**
      * An icon
      *
      * ### CSS Parts:
      * - **base** - The main icon container.
      */
-         'dap-ds-icon-heart-fill': DefineCustomElement<HealthHeartFill, HealthHeartFillProps, {}>
+         'dap-ds-icon-heart-line': DefineCustomElement<HealthHeartLine, HealthHeartLineProps, {}>
     /**
      * An icon
      *
      * ### CSS Parts:
      * - **base** - The main icon container.
      */
-         'dap-ds-icon-heart-line': DefineCustomElement<HealthHeartLine, HealthHeartLineProps, {}>
+         'dap-ds-icon-cookie-line': DefineCustomElement<OthersCookieLine, OthersCookieLineProps, {}>
     /**
      * An icon
      *
      * ### CSS Parts:
      * - **base** - The main icon container.
      */
-         'dap-ds-icon-cookie-line': DefineCustomElement<OthersCookieLine, OthersCookieLineProps, {}>
+         'dap-ds-icon-account-circle-fill': DefineCustomElement<UserAccountCircleFill, UserAccountCircleFillProps, {}>
     /**
      * An icon
      *
      * ### CSS Parts:
      * - **base** - The main icon container.
      */
-         'dap-ds-icon-add-line': DefineCustomElement<SystemAddLine, SystemAddLineProps, {}>
+         'dap-ds-icon-account-circle-line': DefineCustomElement<UserAccountCircleLine, UserAccountCircleLineProps, {}>
     /**
      * An icon
      *
      * ### CSS Parts:
      * - **base** - The main icon container.
      */
-         'dap-ds-icon-alert-fill': DefineCustomElement<SystemAlertFill, SystemAlertFillProps, {}>
+         '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, {}>
+    /**
+     * An icon
+     *
+     * ### CSS Parts:
+     * - **base** - The main icon container.
+     */
+         'dap-ds-icon-add-line': DefineCustomElement<SystemAddLine, SystemAddLineProps, {}>
     /**
      * An icon
      *
@@ -6432,6 +6492,13 @@ Used with dap-ds-select to create grouped options that render as native optgroup
      * - **base** - The main icon container.
      */
          'dap-ds-icon-alert-line': DefineCustomElement<SystemAlertLine, SystemAlertLineProps, {}>
+    /**
+     * An icon
+     *
+     * ### CSS Parts:
+     * - **base** - The main icon container.
+     */
+         'dap-ds-icon-alert-fill': DefineCustomElement<SystemAlertFill, SystemAlertFillProps, {}>
     /**
      * An icon
      *
@@ -6747,34 +6814,6 @@ 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, {}>
   }
 }
 
@@ -6782,17 +6821,15 @@ Used with dap-ds-select to create grouped options that render as native optgroup
 declare global {
   namespace JSX {
     interface IntrinsicElements {
-      'dap-ds-accordion': DapDSAccordionProps & DapDSAccordionEvents & DapDSAccordionSlots
-      'dap-ds-avatar': DapDSAvatarProps & DapDSAvatarEvents & DapDSAvatarSlots
       'dap-ds-anchor-heading': DapDSAnchorHeadingProps
-      'dap-ds-accordion-group': DapDSAccordionGroupProps & DapDSAccordionGroupSlots
+      'dap-ds-accordion': DapDSAccordionProps & DapDSAccordionEvents & DapDSAccordionSlots
       'dap-ds-avatar-group': DapDSAvatarGroupProps & DapDSAvatarGroupEvents & DapDSAvatarGroupSlots
       'dap-ds-badge': DapDSBadgeProps & DapDSBadgeSlots
       'dap-ds-banner': DapDSBannerProps & DapDSBannerEvents & DapDSBannerSlots
-      'dap-ds-breadcrumb': DapDSBreadcrumbProps & DapDSBreadcrumbSlots
+      'dap-ds-accordion-group': DapDSAccordionGroupProps & DapDSAccordionGroupSlots
+      'dap-ds-avatar': DapDSAvatarProps & DapDSAvatarEvents & DapDSAvatarSlots
       '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-card-actions': DapDSCardActionsProps & DapDSCardActionsSlots
@@ -6801,8 +6838,10 @@ declare global {
       'dap-ds-card-subtitle': DapDSCardSubtitleProps & DapDSCardSubtitleSlots
       'dap-ds-card-title': DapDSCardTitleProps & DapDSCardTitleSlots
       'dap-ds-card': DapDSCardProps & DapDSCardSlots
+      'dap-ds-callout': DapDSCalloutProps & DapDSCalloutEvents & DapDSCalloutSlots
       'dap-ds-checkbox': DapDSCheckboxProps & DapDSCheckboxEvents
       'dap-ds-chip': DapDSChipProps & DapDSChipEvents
+      'dap-ds-breadcrumb': DapDSBreadcrumbProps & DapDSBreadcrumbSlots
       'dap-ds-code-puncher-slot': DapDSCodePuncherSlotProps
       'dap-ds-code-puncher': DapDSCodePuncherProps & DapDSCodePuncherEvents & DapDSCodePuncherSlots
       'dap-ds-combobox': DapDSComboboxProps & DapDSComboboxEvents & DapDSComboboxSlots
@@ -6847,15 +6886,15 @@ declare global {
       'dap-ds-scroll-progress': DapDSScrollProgressProps
       'dap-ds-search': DapDSSearchProps & DapDSSearchEvents & DapDSSearchSlots
       'dap-ds-select': DapDSSelectProps & DapDSSelectEvents & DapDSSelectSlots
-      'dap-ds-skeleton': DapDSSkeletonProps
       '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
       'dap-ds-snackbar': DapDSSnackbarProps
-      'dap-ds-stack': DapDSStackProps & DapDSStackSlots
       'dap-ds-spinner': DapDSSpinnerProps & DapDSSpinnerSlots
+      'dap-ds-stack': DapDSStackProps & DapDSStackSlots
       'dap-ds-switch': DapDSSwitchProps & DapDSSwitchEvents
       'dap-ds-tab-group': DapDSTabGroupProps & DapDSTabGroupEvents & DapDSTabGroupSlots
       'dap-ds-tab': DapDSTabProps & DapDSTabSlots
@@ -6868,38 +6907,39 @@ declare global {
       'dap-ds-timeline': DapDSTimelineProps & DapDSTimelineSlots
       'dap-ds-time-grid': DapDSTimeGridProps & DapDSTimeGridEvents
       'dap-ds-timepicker': DapDSTimePickerProps & DapDSTimePickerEvents
-      'dap-ds-toggle-button': DapDSToggleButtonProps & DapDSToggleButtonSlots
       'dap-ds-toc': DapDSTOCProps & DapDSTOCEvents
+      'dap-ds-toggle-button': DapDSToggleButtonProps & DapDSToggleButtonSlots
       'dap-ds-tooltip': DapDSTooltipProps & DapDSTooltipSlots
       '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-icon-home-6-line': BuildingsHome6LineProps
       '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-s-line': ArrowsArrowLeftSLineProps
-      'dap-ds-icon-arrow-right-down-line': ArrowsArrowRightDownLineProps
+      'dap-ds-icon-arrow-left-s-fill': ArrowsArrowLeftSFillProps
       '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-right-line': ArrowsArrowRightLineProps
       'dap-ds-icon-arrow-right-s-fill': ArrowsArrowRightSFillProps
-      'dap-ds-icon-arrow-right-up-line': ArrowsArrowRightUpLineProps
       'dap-ds-icon-arrow-right-s-line': ArrowsArrowRightSLineProps
+      'dap-ds-icon-arrow-right-up-line': ArrowsArrowRightUpLineProps
       'dap-ds-icon-arrow-up-line': ArrowsArrowUpLineProps
       'dap-ds-icon-arrow-up-s-fill': ArrowsArrowUpSFillProps
       'dap-ds-icon-arrow-up-s-line': ArrowsArrowUpSLineProps
       'dap-ds-icon-expand-up-down-fill': ArrowsExpandUpDownFillProps
-      'dap-ds-icon-edit-line': DesignEditLineProps
+      'dap-ds-icon-home-6-line': BuildingsHome6LineProps
       'dap-ds-icon-calendar-line': BusinessCalendarLineProps
+      'dap-ds-icon-edit-line': DesignEditLineProps
       'dap-ds-icon-tools-line': DesignToolsLineProps
       'dap-ds-icon-computer-line': DeviceComputerLineProps
+      'dap-ds-icon-separator': EditorSeparatorProps
       'dap-ds-icon-clipboard-line': DocumentClipboardLineProps
       'dap-ds-icon-file-copy-line': DocumentFileCopyLineProps
       'dap-ds-icon-file-image-line': DocumentFileImageLineProps
@@ -6908,13 +6948,16 @@ declare global {
       'dap-ds-icon-file-video-line': DocumentFileVideoLineProps
       'dap-ds-icon-folder-line': DocumentFolderLineProps
       'dap-ds-icon-folder-open-line': DocumentFolderOpenLineProps
-      '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-alert-fill': SystemAlertFillProps
       'dap-ds-icon-alert-line': SystemAlertLineProps
+      'dap-ds-icon-alert-fill': SystemAlertFillProps
       'dap-ds-icon-check-line': SystemCheckLineProps
       'dap-ds-icon-check-line2': SystemCheckLine2Props
       'dap-ds-icon-checkbox-blank-circle-fill': SystemCheckboxBlankCircleFillProps
@@ -6960,10 +7003,6 @@ 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
     }
   }
 }