dap-design-system 0.58.0 → 0.58.1

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

@@ -210,11 +210,11 @@ type DefineGenericCustomElement<
   $props: Partial<Omit<HTMLAttributes, keyof ElementType>> & Partial<Omit<ElementType, keyof Props>> & Props & Events
 }
 
-export interface DapDSAccordionEvents {
-  /** Event fired when the accordion is opened. */
-  onDdsOpened?: (event: CustomEvent<{ open: boolean, item: AccordionBaseElement }>) => void
-  /** Event fired when the accordion is closed. */
-  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 {
@@ -222,18 +222,18 @@ export interface DapDSAvatarGroupEvents {
   onDdsOverflowClick?: (event: CustomEvent) => void
 }
 
+export interface DapDSAccordionEvents {
+  /** Event fired when the accordion is opened. */
+  onDdsOpened?: (event: CustomEvent<{ open: boolean, item: AccordionBaseElement }>) => void
+  /** Event fired when the accordion is closed. */
+  onDdsClosed?: (event: CustomEvent<{ open: boolean, item: AccordionBaseElement }>) => void
+}
+
 export interface DapDSBannerEvents {
   /** Event fired when the banner is closed. */
   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
@@ -655,6 +655,18 @@ export interface DapDSRadioGroupEvents {
   onDdsFocus?: (event: CustomEvent) => void
 }
 
+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 DapDSAvatarGroupSlots {
+  /** The avatars to display in the group. */
+  default?: () => any
+}
+
 export interface DapDSAccordionSlots {
   /** The content of the accordion. */
   default?: () => any
@@ -666,11 +678,6 @@ export interface DapDSAccordionSlots {
   'icon-closed'?: () => any
 }
 
-export interface DapDSAvatarGroupSlots {
-  /** The avatars to display in the group. */
-  default?: () => any
-}
-
 export interface DapDSBadgeSlots {
   /** The content of the badge. */
   default?: () => any
@@ -678,6 +685,13 @@ export interface DapDSBadgeSlots {
   'icon'?: () => any
 }
 
+export interface DapDSBreadcrumbSlots {
+  /** The content of the breadcrumb. */
+  default?: () => any
+  /** The separator between breadcrumb items. Default is '/'. */
+  'separator'?: () => any
+}
+
 export interface DapDSBannerSlots {
   /** The content of the banner. */
   default?: () => any
@@ -692,13 +706,6 @@ export interface DapDSAccordionGroupSlots {
   default?: () => 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 {
   /** The content of the breadcrumb item. */
   default?: () => any
@@ -721,6 +728,19 @@ export interface DapDSCalendarSlots {
   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 DapDSCardActionsSlots {
   /** The content of the card actions. */
   default?: () => any
@@ -751,26 +771,6 @@ 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
@@ -1123,15 +1123,50 @@ 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 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 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 = {
@@ -1159,25 +1194,6 @@ 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"]
@@ -1191,6 +1207,15 @@ export type DapDSBadgeProps = {
   sizeMap?: DapDSBadge["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 DapDSBannerProps = {
   /** The variant of the banner */
   variant?: DapDSBanner["variant"]
@@ -1213,31 +1238,15 @@ export type DapDSAccordionGroupProps = {
   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 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 DapDSBreadcrumbItemProps = {
@@ -1346,6 +1355,27 @@ 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 DapDSCardActionsProps = {
   /** The spacing of the card actions. This adds a margin to the card actions. Default is `bottom`. */
   spacing?: DapDSCardActions["spacing"]
@@ -1432,27 +1462,6 @@ 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"]
@@ -1529,15 +1538,6 @@ 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"]
@@ -3743,26 +3743,26 @@ export type ArrowsArrowLeftLineProps = {
   focusable?: ArrowsArrowLeftLine["focusable"]
 }
 
-export type ArrowsArrowLeftSLineProps = {
+export type ArrowsArrowLeftSFillProps = {
   /** (optional) The width and height in pixels */
-  size?: ArrowsArrowLeftSLine["size"]
+  size?: ArrowsArrowLeftSFill["size"]
   /** (optional) Sets the icon color via the `fill` attribute */
-  selected?: ArrowsArrowLeftSLine["selected"]
+  selected?: ArrowsArrowLeftSFill["selected"]
   /** (optional) When using the icon standalone, make it meaningful for accessibility */
-  accessibilityTitle?: ArrowsArrowLeftSLine["accessibilityTitle"]
+  accessibilityTitle?: ArrowsArrowLeftSFill["accessibilityTitle"]
   /** (optional) If `true` the icon can receive focus */
-  focusable?: ArrowsArrowLeftSLine["focusable"]
+  focusable?: ArrowsArrowLeftSFill["focusable"]
 }
 
-export type ArrowsArrowLeftSFillProps = {
+export type ArrowsArrowLeftSLineProps = {
   /** (optional) The width and height in pixels */
-  size?: ArrowsArrowLeftSFill["size"]
+  size?: ArrowsArrowLeftSLine["size"]
   /** (optional) Sets the icon color via the `fill` attribute */
-  selected?: ArrowsArrowLeftSFill["selected"]
+  selected?: ArrowsArrowLeftSLine["selected"]
   /** (optional) When using the icon standalone, make it meaningful for accessibility */
-  accessibilityTitle?: ArrowsArrowLeftSFill["accessibilityTitle"]
+  accessibilityTitle?: ArrowsArrowLeftSLine["accessibilityTitle"]
   /** (optional) If `true` the icon can receive focus */
-  focusable?: ArrowsArrowLeftSFill["focusable"]
+  focusable?: ArrowsArrowLeftSLine["focusable"]
 }
 
 export type ArrowsArrowLeftUpLineProps = {
@@ -3886,26 +3886,26 @@ export type ArrowsExpandUpDownFillProps = {
   focusable?: ArrowsExpandUpDownFill["focusable"]
 }
 
-export type BuildingsHome6LineProps = {
+export type BusinessCalendarLineProps = {
   /** (optional) The width and height in pixels */
-  size?: BuildingsHome6Line["size"]
+  size?: BusinessCalendarLine["size"]
   /** (optional) Sets the icon color via the `fill` attribute */
-  selected?: BuildingsHome6Line["selected"]
+  selected?: BusinessCalendarLine["selected"]
   /** (optional) When using the icon standalone, make it meaningful for accessibility */
-  accessibilityTitle?: BuildingsHome6Line["accessibilityTitle"]
+  accessibilityTitle?: BusinessCalendarLine["accessibilityTitle"]
   /** (optional) If `true` the icon can receive focus */
-  focusable?: BuildingsHome6Line["focusable"]
+  focusable?: BusinessCalendarLine["focusable"]
 }
 
-export type BusinessCalendarLineProps = {
+export type BuildingsHome6LineProps = {
   /** (optional) The width and height in pixels */
-  size?: BusinessCalendarLine["size"]
+  size?: BuildingsHome6Line["size"]
   /** (optional) Sets the icon color via the `fill` attribute */
-  selected?: BusinessCalendarLine["selected"]
+  selected?: BuildingsHome6Line["selected"]
   /** (optional) When using the icon standalone, make it meaningful for accessibility */
-  accessibilityTitle?: BusinessCalendarLine["accessibilityTitle"]
+  accessibilityTitle?: BuildingsHome6Line["accessibilityTitle"]
   /** (optional) If `true` the icon can receive focus */
-  focusable?: BusinessCalendarLine["focusable"]
+  focusable?: BuildingsHome6Line["focusable"]
 }
 
 export type DesignEditLineProps = {
@@ -3941,17 +3941,6 @@ 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"]
@@ -4040,6 +4029,17 @@ 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"]
@@ -4128,26 +4128,26 @@ export type SystemAddLineProps = {
   focusable?: SystemAddLine["focusable"]
 }
 
-export type SystemAlertLineProps = {
+export type SystemAlertFillProps = {
   /** (optional) The width and height in pixels */
-  size?: SystemAlertLine["size"]
+  size?: SystemAlertFill["size"]
   /** (optional) Sets the icon color via the `fill` attribute */
-  selected?: SystemAlertLine["selected"]
+  selected?: SystemAlertFill["selected"]
   /** (optional) When using the icon standalone, make it meaningful for accessibility */
-  accessibilityTitle?: SystemAlertLine["accessibilityTitle"]
+  accessibilityTitle?: SystemAlertFill["accessibilityTitle"]
   /** (optional) If `true` the icon can receive focus */
-  focusable?: SystemAlertLine["focusable"]
+  focusable?: SystemAlertFill["focusable"]
 }
 
-export type SystemAlertFillProps = {
+export type SystemAlertLineProps = {
   /** (optional) The width and height in pixels */
-  size?: SystemAlertFill["size"]
+  size?: SystemAlertLine["size"]
   /** (optional) Sets the icon color via the `fill` attribute */
-  selected?: SystemAlertFill["selected"]
+  selected?: SystemAlertLine["selected"]
   /** (optional) When using the icon standalone, make it meaningful for accessibility */
-  accessibilityTitle?: SystemAlertFill["accessibilityTitle"]
+  accessibilityTitle?: SystemAlertLine["accessibilityTitle"]
   /** (optional) If `true` the icon can receive focus */
-  focusable?: SystemAlertFill["focusable"]
+  focusable?: SystemAlertLine["focusable"]
 }
 
 export type SystemCheckLineProps = {
@@ -4649,15 +4649,40 @@ export type SystemZoomOutLineProps = {
 declare module 'vue' {
   interface GlobalComponents {
     /**
-     * Anchor heading is a heading with an anchor link.
+     * 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 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.
+     * - **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-anchor-heading': DefineCustomElement<DapDSAnchorHeading, DapDSAnchorHeadingProps, {}>
+         '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.
      *
@@ -4684,21 +4709,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 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>
     /**
      * A badge is a small status descriptor for UI elements.
      *
@@ -4713,6 +4723,18 @@ declare module 'vue' {
      * - **icon-base** - The base of the icon.
      */
          '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.
+     *
+     * ### 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, {}>
     /**
      * A banner is a message displayed at the top of the page to provide important information to the user.
      *
@@ -4748,25 +4770,15 @@ declare module 'vue' {
      */
          '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.
+     * Anchor heading is a heading with an anchor link.
      *
      * ### 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.
+     * - **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-avatar': DefineCustomElement<DapDSAvatar, DapDSAvatarProps, DapDSAvatarEvents>
+         'dap-ds-anchor-heading': DefineCustomElement<DapDSAnchorHeading, DapDSAnchorHeadingProps, {}>
     /**
      * A breadcrumb item is a secondary navigation scheme that reveals the user's location in a website or Web application.
      *
@@ -4830,6 +4842,30 @@ declare module 'vue' {
      * - **calendar-header-month-select** - The month select of the calendar header.
      */
          'dap-ds-calendar': DefineCustomElement<DapDSCalendar, DapDSCalendarProps, DapDSCalendarEvents>
+    /**
+     * 
+     *
+     * ### 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 card actions is a container for actions in a card.
      *
@@ -4890,30 +4926,6 @@ 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.
      *
@@ -4951,18 +4963,6 @@ 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.
      *
@@ -6246,14 +6246,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-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-left-s-fill': DefineCustomElement<ArrowsArrowLeftSFill, ArrowsArrowLeftSFillProps, {}>
+         'dap-ds-icon-arrow-left-s-line': DefineCustomElement<ArrowsArrowLeftSLine, ArrowsArrowLeftSLineProps, {}>
     /**
      * An icon
      *
@@ -6337,14 +6337,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-home-6-line': DefineCustomElement<BuildingsHome6Line, BuildingsHome6LineProps, {}>
+         'dap-ds-icon-calendar-line': DefineCustomElement<BusinessCalendarLine, BusinessCalendarLineProps, {}>
     /**
      * An icon
      *
      * ### CSS Parts:
      * - **base** - The main icon container.
      */
-         'dap-ds-icon-calendar-line': DefineCustomElement<BusinessCalendarLine, BusinessCalendarLineProps, {}>
+         'dap-ds-icon-home-6-line': DefineCustomElement<BuildingsHome6Line, BuildingsHome6LineProps, {}>
     /**
      * An icon
      *
@@ -6366,13 +6366,6 @@ 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
      *
@@ -6429,6 +6422,13 @@ Used with dap-ds-select to create grouped options that render as native optgroup
      * - **base** - The main icon container.
      */
          'dap-ds-icon-folder-open-line': DefineCustomElement<DocumentFolderOpenLine, DocumentFolderOpenLineProps, {}>
+    /**
+     * An icon
+     *
+     * ### CSS Parts:
+     * - **base** - The main icon container.
+     */
+         'dap-ds-icon-separator': DefineCustomElement<EditorSeparator, EditorSeparatorProps, {}>
     /**
      * An icon
      *
@@ -6491,14 +6491,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-alert-line': DefineCustomElement<SystemAlertLine, SystemAlertLineProps, {}>
+         'dap-ds-icon-alert-fill': DefineCustomElement<SystemAlertFill, SystemAlertFillProps, {}>
     /**
      * An icon
      *
      * ### CSS Parts:
      * - **base** - The main icon container.
      */
-         'dap-ds-icon-alert-fill': DefineCustomElement<SystemAlertFill, SystemAlertFillProps, {}>
+         'dap-ds-icon-alert-line': DefineCustomElement<SystemAlertLine, SystemAlertLineProps, {}>
     /**
      * An icon
      *
@@ -6821,27 +6821,27 @@ Used with dap-ds-select to create grouped options that render as native optgroup
 declare global {
   namespace JSX {
     interface IntrinsicElements {
-      'dap-ds-anchor-heading': DapDSAnchorHeadingProps
-      'dap-ds-accordion': DapDSAccordionProps & DapDSAccordionEvents & DapDSAccordionSlots
+      'dap-ds-avatar': DapDSAvatarProps & DapDSAvatarEvents & DapDSAvatarSlots
       '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-accordion-group': DapDSAccordionGroupProps & DapDSAccordionGroupSlots
-      'dap-ds-avatar': DapDSAvatarProps & DapDSAvatarEvents & DapDSAvatarSlots
+      'dap-ds-anchor-heading': DapDSAnchorHeadingProps
       'dap-ds-breadcrumb-item': DapDSBreadcrumbItemProps & DapDSBreadcrumbItemSlots
       'dap-ds-button': DapDSButtonProps & DapDSButtonEvents & DapDSButtonSlots
       'dap-ds-calendar-cell': DapDSCalendarCellProps & DapDSCalendarCellSlots
       'dap-ds-calendar': DapDSCalendarProps & DapDSCalendarEvents & DapDSCalendarSlots
+      'dap-ds-callout': DapDSCalloutProps & DapDSCalloutEvents & DapDSCalloutSlots
       '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-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
@@ -6921,8 +6921,8 @@ declare global {
       '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-line': ArrowsArrowLeftSLineProps
       'dap-ds-icon-arrow-left-s-fill': ArrowsArrowLeftSFillProps
+      '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
@@ -6934,12 +6934,11 @@ declare global {
       '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-home-6-line': BuildingsHome6LineProps
       'dap-ds-icon-calendar-line': BusinessCalendarLineProps
+      'dap-ds-icon-home-6-line': BuildingsHome6LineProps
       '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
@@ -6948,6 +6947,7 @@ 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
@@ -6956,8 +6956,8 @@ declare global {
       'dap-ds-icon-user-fill': UserUserFillProps
       'dap-ds-icon-user-line': UserUserLineProps
       'dap-ds-icon-add-line': SystemAddLineProps
-      'dap-ds-icon-alert-line': SystemAlertLineProps
       'dap-ds-icon-alert-fill': SystemAlertFillProps
+      'dap-ds-icon-alert-line': SystemAlertLineProps
       'dap-ds-icon-check-line': SystemCheckLineProps
       'dap-ds-icon-check-line2': SystemCheckLine2Props
       'dap-ds-icon-checkbox-blank-circle-fill': SystemCheckboxBlankCircleFillProps