dap-design-system 0.35.19 → 0.35.20

package/dist/dds.d.ts

@@ -8011,14 +8011,14 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'dap-ds-masked-input': DapDSMaskedInput;
+        'dap-ds-number-input': DapDSNumberInput;
     }
 }
 
 
 declare global {
     interface HTMLElementTagNameMap {
-        'dap-ds-offical-website-banner': DapDSOfficalWebsiteBanner;
+        'dap-ds-official-website-banner': DapDSOfficialWebsiteBanner;
     }
 }
 

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

@@ -1,11 +1,11 @@
 import type { DefineComponent } from "vue";
 
 import type { DapDSAccordion } from "../../components/accordion/accordion.component.js";
-import type { DapDSAccordionGroup } from "../../components/accordion-group/accordion-group.component.js";
-import type { DapDSAvatar } from "../../components/avatar/avatar.component.js";
 import type { DapDSAnchorHeading } from "../../components/anchor-heading/anchor-heading.component.js";
+import type { DapDSAccordionGroup } from "../../components/accordion-group/accordion-group.component.js";
 import type { DapDSBadge } from "../../components/badge/badge.component.js";
 import type { DapDSBanner } from "../../components/banner/banner.component.js";
+import type { DapDSAvatar } from "../../components/avatar/avatar.component.js";
 import type { DapDSBreadcrumb } from "../../components/breadcrumb/breadcrumb.component.js";
 import type { DapDSBreadcrumbItem } from "../../components/breadcrumb-item/breadcrumb-item.component.js";
 import type { DapDSButton } from "../../components/button/button.component.js";
@@ -19,10 +19,10 @@ import type { DapDSCardSubtitle } from "../../components/card-subtitle/card-subt
 import type { DapDSCardTitle } from "../../components/card-title/card-title.component.js";
 import type { DapDSCard } from "../../components/card/card.component.js";
 import type { DapDSCheckbox } from "../../components/checkbox/checkbox.component.js";
+import type { DapDSCombobox } from "../../components/combobox/combobox.component.js";
 import type { DapDSCommandGroup } from "../../components/command-group/command-group.component.js";
 import type { DapDSCommandItem } from "../../components/command-item/command-item.component.js";
 import type { DapDSCommand } from "../../components/command/command.component.js";
-import type { DapDSCombobox } from "../../components/combobox/combobox.component.js";
 import type { DapDSContentSwitcherItem } from "../../components/content-switcher-item/content-switcher-item.component.js";
 import type { DapDSContentSwitcher } from "../../components/content-switcher/content-switcher.component.js";
 import type { DapDSCopyBoxInput } from "../../components/copybox-input/copybox-input.component.js";
@@ -85,8 +85,8 @@ import type { ArrowsArrowDownLine } from "../../components/icon-arrow-down-line/
 import type { ArrowsArrowDownSFill } from "../../components/icon-arrow-down-s-fill/icon-arrow-down-s-fill.component.js";
 import type { ArrowsArrowDownSLine } from "../../components/icon-arrow-down-s-line/icon-arrow-down-s-line.component.js";
 import type { ArrowsArrowLeftDownLine } from "../../components/icon-arrow-left-down-line/icon-arrow-left-down-line.component.js";
-import type { ArrowsArrowLeftLLine } from "../../components/icon-arrow-left-l-line/icon-arrow-left-l-line.component.js";
 import type { ArrowsArrowLeftLine } from "../../components/icon-arrow-left-line/icon-arrow-left-line.component.js";
+import type { ArrowsArrowLeftLLine } from "../../components/icon-arrow-left-l-line/icon-arrow-left-l-line.component.js";
 import type { ArrowsArrowLeftSFill } from "../../components/icon-arrow-left-s-fill/icon-arrow-left-s-fill.component.js";
 import type { ArrowsArrowLeftSLine } from "../../components/icon-arrow-left-s-line/icon-arrow-left-s-line.component.js";
 import type { ArrowsArrowLeftUpLine } from "../../components/icon-arrow-left-up-line/icon-arrow-left-up-line.component.js";
@@ -107,12 +107,12 @@ import type { DocumentFileCopyLine } from "../../components/icon-file-copy-line/
 import type { OthersCookieLine } from "../../components/icon-cookie-line/icon-cookie-line.component.js";
 import type { SystemAddLine } from "../../components/icon-add-line/icon-add-line.component.js";
 import type { SystemAlertFill } from "../../components/icon-alert-fill/icon-alert-fill.component.js";
-import type { SystemAlertLine } from "../../components/icon-alert-line/icon-alert-line.component.js";
 import type { SystemCheckLine } from "../../components/icon-check-line/icon-check-line.component.js";
+import type { SystemAlertLine } from "../../components/icon-alert-line/icon-alert-line.component.js";
 import type { SystemCheckLine2 } from "../../components/icon-check-line2/icon-check-line2.component.js";
 import type { SystemCheckboxBlankCircleFill } from "../../components/icon-checkbox-blank-circle-fill/icon-checkbox-blank-circle-fill.component.js";
-import type { SystemCheckboxBlankCircleFillCheck } from "../../components/icon-checkbox-blank-circle-fill-check/icon-checkbox-blank-circle-fill-check.component.js";
 import type { SystemCheckboxBlankCircleLine } from "../../components/icon-checkbox-blank-circle-line/icon-checkbox-blank-circle-line.component.js";
+import type { SystemCheckboxBlankCircleFillCheck } from "../../components/icon-checkbox-blank-circle-fill-check/icon-checkbox-blank-circle-fill-check.component.js";
 import type { SystemCheckboxCircleFill } from "../../components/icon-checkbox-circle-fill/icon-checkbox-circle-fill.component.js";
 import type { SystemCheckboxCircleLine } from "../../components/icon-checkbox-circle-line/icon-checkbox-circle-line.component.js";
 import type { SystemCloseCircleFill } from "../../components/icon-close-circle-fill/icon-close-circle-fill.component.js";
@@ -161,29 +161,6 @@ type DapDSAccordionProps = {
   "ondds-closed"?: (e: CustomEvent<never>) => void;
 };
 
-type DapDSAccordionGroupProps = {
-  /** Whether to close other accordions when one is opened. */
-  autoClose?: DapDSAccordionGroup["autoClose"];
-  /** The variant of the accordion */
-  variant?: DapDSAccordionGroup["variant"];
-
-  /** Event fired when an accordion is opened or closed. */
-  "ondds-change"?: (e: CustomEvent<never>) => void;
-};
-
-type DapDSAvatarProps = {
-  /** The size of the avatar */
-  size?: DapDSAvatar["size"];
-  /** The source of the avatar. */
-  src?: DapDSAvatar["src"];
-  /** The alt text of the avatar. */
-  alt?: DapDSAvatar["alt"];
-  /** 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"];
-};
-
 type DapDSAnchorHeadingProps = {
   /** The variant of the heading. Default is `h2`. Can be `h1`, `h2`, `h3`, `h4`, `h5`, or `h6`. */
   variant?: DapDSAnchorHeading["variant"];
@@ -195,6 +172,16 @@ type DapDSAnchorHeadingProps = {
   anchorTitle?: DapDSAnchorHeading["anchorTitle"];
 };
 
+type DapDSAccordionGroupProps = {
+  /** Whether to close other accordions when one is opened. */
+  autoClose?: DapDSAccordionGroup["autoClose"];
+  /** The variant of the accordion */
+  variant?: DapDSAccordionGroup["variant"];
+
+  /** Event fired when an accordion is opened or closed. */
+  "ondds-change"?: (e: CustomEvent<never>) => void;
+};
+
 type DapDSBadgeProps = {
   /** The type of the badge */
   type?: DapDSBadge["type"];
@@ -220,6 +207,19 @@ type DapDSBannerProps = {
   "ondds-close"?: (e: CustomEvent<never>) => void;
 };
 
+type DapDSAvatarProps = {
+  /** The size of the avatar */
+  size?: DapDSAvatar["size"];
+  /** The source of the avatar. */
+  src?: DapDSAvatar["src"];
+  /** The alt text of the avatar. */
+  alt?: DapDSAvatar["alt"];
+  /** 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"];
+};
+
 type DapDSBreadcrumbProps = {
   /** @deprecated true - Inverted color style */
   inverted?: DapDSBreadcrumb["inverted"];
@@ -468,66 +468,6 @@ type DapDSCheckboxProps = {
   "ondds-input"?: (e: CustomEvent<never>) => void;
 };
 
-type DapDSCommandGroupProps = {
-  /** The label of the command group. */
-  label?: DapDSCommandGroup["label"];
-  /** Whether the command group is exclusive, only one item can be selected at a time. */
-  exclusive?: DapDSCommandGroup["exclusive"];
-};
-
-type DapDSCommandItemProps = {
-  /** The value of the command item. */
-  value?: DapDSCommandItem["value"];
-  /** Whether the command item is disabled. */
-  disabled?: DapDSCommandItem["disabled"];
-  /** The name of the button */
-  name?: DapDSCommandItem["name"];
-  /** The Href of the button. If this present the button will be rendered as an anchor `<a></a>` element. */
-  href?: DapDSCommandItem["href"];
-  /** The target of the button */
-  target?: DapDSCommandItem["target"];
-  /** The rel of the button link. Default is `noreferrer noopener`. */
-  rel?: DapDSCommandItem["rel"];
-  /** Whether the command item is selectable. */
-  selectable?: DapDSCommandItem["selectable"];
-  /** Whether the command item is selected. */
-  selected?: DapDSCommandItem["selected"];
-  /** Whether the command item should close the command when selected. */
-  closeOnSelect?: DapDSCommandItem["closeOnSelect"];
-
-  /** Fired when the command item is clicked. */
-  "ondds-command-item-click"?: (e: CustomEvent<never>) => void;
-};
-
-type DapDSCommandProps = {
-  /** The value of the command. */
-  value?: DapDSCommand["value"];
-  /** The disabled state of the popup. */
-  disabled?: DapDSCommand["disabled"];
-  /** The open state of the popup. */
-  opened?: DapDSCommand["opened"];
-  /** The placement of the popup. */
-  placement?: DapDSCommand["placement"];
-  /** The floating strategy of the popup. */
-  floatingStrategy?: DapDSCommand["floatingStrategy"];
-  /** The offset of the popup. */
-  offset?: DapDSCommand["offset"];
-  /** Whether the popup should sync its width with the trigger. */
-  sync?: DapDSCommand["sync"];
-  /** The maximum height of the popup. */
-  maxHeight?: DapDSCommand["maxHeight"];
-  /** Whether the popup has an arrow. */
-  hasArrow?: DapDSCommand["hasArrow"];
-  /** Whether the popup should overflow. */
-  overflow?: DapDSCommand["overflow"];
-  /** The size of the popup. */
-  size?: DapDSCommand["size"];
-  /** Fired when the popup is opened. */
-  "ondds-opened"?: (e: CustomEvent<never>) => void;
-  /** Fired when the popup is closed. */
-  "ondds-closed"?: (e: CustomEvent<never>) => void;
-};
-
 type DapDSComboboxProps = {
   /** The value of the select. */
   value?: DapDSCombobox["value"];
@@ -591,6 +531,66 @@ type DapDSComboboxProps = {
   "ondds-input"?: (e: CustomEvent<never>) => void;
 };
 
+type DapDSCommandGroupProps = {
+  /** The label of the command group. */
+  label?: DapDSCommandGroup["label"];
+  /** Whether the command group is exclusive, only one item can be selected at a time. */
+  exclusive?: DapDSCommandGroup["exclusive"];
+};
+
+type DapDSCommandItemProps = {
+  /** The value of the command item. */
+  value?: DapDSCommandItem["value"];
+  /** Whether the command item is disabled. */
+  disabled?: DapDSCommandItem["disabled"];
+  /** The name of the button */
+  name?: DapDSCommandItem["name"];
+  /** The Href of the button. If this present the button will be rendered as an anchor `<a></a>` element. */
+  href?: DapDSCommandItem["href"];
+  /** The target of the button */
+  target?: DapDSCommandItem["target"];
+  /** The rel of the button link. Default is `noreferrer noopener`. */
+  rel?: DapDSCommandItem["rel"];
+  /** Whether the command item is selectable. */
+  selectable?: DapDSCommandItem["selectable"];
+  /** Whether the command item is selected. */
+  selected?: DapDSCommandItem["selected"];
+  /** Whether the command item should close the command when selected. */
+  closeOnSelect?: DapDSCommandItem["closeOnSelect"];
+
+  /** Fired when the command item is clicked. */
+  "ondds-command-item-click"?: (e: CustomEvent<never>) => void;
+};
+
+type DapDSCommandProps = {
+  /** The value of the command. */
+  value?: DapDSCommand["value"];
+  /** The disabled state of the popup. */
+  disabled?: DapDSCommand["disabled"];
+  /** The open state of the popup. */
+  opened?: DapDSCommand["opened"];
+  /** The placement of the popup. */
+  placement?: DapDSCommand["placement"];
+  /** The floating strategy of the popup. */
+  floatingStrategy?: DapDSCommand["floatingStrategy"];
+  /** The offset of the popup. */
+  offset?: DapDSCommand["offset"];
+  /** Whether the popup should sync its width with the trigger. */
+  sync?: DapDSCommand["sync"];
+  /** The maximum height of the popup. */
+  maxHeight?: DapDSCommand["maxHeight"];
+  /** Whether the popup has an arrow. */
+  hasArrow?: DapDSCommand["hasArrow"];
+  /** Whether the popup should overflow. */
+  overflow?: DapDSCommand["overflow"];
+  /** The size of the popup. */
+  size?: DapDSCommand["size"];
+  /** Fired when the popup is opened. */
+  "ondds-opened"?: (e: CustomEvent<never>) => void;
+  /** Fired when the popup is closed. */
+  "ondds-closed"?: (e: CustomEvent<never>) => void;
+};
+
 type DapDSContentSwitcherItemProps = {
   /** The value of the segmented control item. */
   value?: DapDSContentSwitcherItem["value"];
@@ -2195,26 +2195,26 @@ type ArrowsArrowLeftDownLineProps = {
   focusable?: ArrowsArrowLeftDownLine["focusable"];
 };
 
-type ArrowsArrowLeftLLineProps = {
+type ArrowsArrowLeftLineProps = {
   /** (optional) The width and height in pixels */
-  size?: ArrowsArrowLeftLLine["size"];
+  size?: ArrowsArrowLeftLine["size"];
   /** (optional) Sets the icon color via the `fill` attribute */
-  selected?: ArrowsArrowLeftLLine["selected"];
+  selected?: ArrowsArrowLeftLine["selected"];
   /** (optional) When using the icon standalone, make it meaningful for accessibility */
-  accessibilityTitle?: ArrowsArrowLeftLLine["accessibilityTitle"];
+  accessibilityTitle?: ArrowsArrowLeftLine["accessibilityTitle"];
   /** (optional) If `true` the icon can receive focus */
-  focusable?: ArrowsArrowLeftLLine["focusable"];
+  focusable?: ArrowsArrowLeftLine["focusable"];
 };
 
-type ArrowsArrowLeftLineProps = {
+type ArrowsArrowLeftLLineProps = {
   /** (optional) The width and height in pixels */
-  size?: ArrowsArrowLeftLine["size"];
+  size?: ArrowsArrowLeftLLine["size"];
   /** (optional) Sets the icon color via the `fill` attribute */
-  selected?: ArrowsArrowLeftLine["selected"];
+  selected?: ArrowsArrowLeftLLine["selected"];
   /** (optional) When using the icon standalone, make it meaningful for accessibility */
-  accessibilityTitle?: ArrowsArrowLeftLine["accessibilityTitle"];
+  accessibilityTitle?: ArrowsArrowLeftLLine["accessibilityTitle"];
   /** (optional) If `true` the icon can receive focus */
-  focusable?: ArrowsArrowLeftLine["focusable"];
+  focusable?: ArrowsArrowLeftLLine["focusable"];
 };
 
 type ArrowsArrowLeftSFillProps = {
@@ -2437,26 +2437,26 @@ type SystemAlertFillProps = {
   focusable?: SystemAlertFill["focusable"];
 };
 
-type SystemAlertLineProps = {
+type SystemCheckLineProps = {
   /** (optional) The width and height in pixels */
-  size?: SystemAlertLine["size"];
+  size?: SystemCheckLine["size"];
   /** (optional) Sets the icon color via the `fill` attribute */
-  selected?: SystemAlertLine["selected"];
+  selected?: SystemCheckLine["selected"];
   /** (optional) When using the icon standalone, make it meaningful for accessibility */
-  accessibilityTitle?: SystemAlertLine["accessibilityTitle"];
+  accessibilityTitle?: SystemCheckLine["accessibilityTitle"];
   /** (optional) If `true` the icon can receive focus */
-  focusable?: SystemAlertLine["focusable"];
+  focusable?: SystemCheckLine["focusable"];
 };
 
-type SystemCheckLineProps = {
+type SystemAlertLineProps = {
   /** (optional) The width and height in pixels */
-  size?: SystemCheckLine["size"];
+  size?: SystemAlertLine["size"];
   /** (optional) Sets the icon color via the `fill` attribute */
-  selected?: SystemCheckLine["selected"];
+  selected?: SystemAlertLine["selected"];
   /** (optional) When using the icon standalone, make it meaningful for accessibility */
-  accessibilityTitle?: SystemCheckLine["accessibilityTitle"];
+  accessibilityTitle?: SystemAlertLine["accessibilityTitle"];
   /** (optional) If `true` the icon can receive focus */
-  focusable?: SystemCheckLine["focusable"];
+  focusable?: SystemAlertLine["focusable"];
 };
 
 type SystemCheckLine2Props = {
@@ -2481,26 +2481,26 @@ type SystemCheckboxBlankCircleFillProps = {
   focusable?: SystemCheckboxBlankCircleFill["focusable"];
 };
 
-type SystemCheckboxBlankCircleFillCheckProps = {
+type SystemCheckboxBlankCircleLineProps = {
   /** (optional) The width and height in pixels */
-  size?: SystemCheckboxBlankCircleFillCheck["size"];
+  size?: SystemCheckboxBlankCircleLine["size"];
   /** (optional) Sets the icon color via the `fill` attribute */
-  selected?: SystemCheckboxBlankCircleFillCheck["selected"];
+  selected?: SystemCheckboxBlankCircleLine["selected"];
   /** (optional) When using the icon standalone, make it meaningful for accessibility */
-  accessibilityTitle?: SystemCheckboxBlankCircleFillCheck["accessibilityTitle"];
+  accessibilityTitle?: SystemCheckboxBlankCircleLine["accessibilityTitle"];
   /** (optional) If `true` the icon can receive focus */
-  focusable?: SystemCheckboxBlankCircleFillCheck["focusable"];
+  focusable?: SystemCheckboxBlankCircleLine["focusable"];
 };
 
-type SystemCheckboxBlankCircleLineProps = {
+type SystemCheckboxBlankCircleFillCheckProps = {
   /** (optional) The width and height in pixels */
-  size?: SystemCheckboxBlankCircleLine["size"];
+  size?: SystemCheckboxBlankCircleFillCheck["size"];
   /** (optional) Sets the icon color via the `fill` attribute */
-  selected?: SystemCheckboxBlankCircleLine["selected"];
+  selected?: SystemCheckboxBlankCircleFillCheck["selected"];
   /** (optional) When using the icon standalone, make it meaningful for accessibility */
-  accessibilityTitle?: SystemCheckboxBlankCircleLine["accessibilityTitle"];
+  accessibilityTitle?: SystemCheckboxBlankCircleFillCheck["accessibilityTitle"];
   /** (optional) If `true` the icon can receive focus */
-  focusable?: SystemCheckboxBlankCircleLine["focusable"];
+  focusable?: SystemCheckboxBlankCircleFillCheck["focusable"];
 };
 
 type SystemCheckboxCircleFillProps = {
@@ -2861,6 +2861,25 @@ export type CustomElements = {
    */
   "dap-ds-accordion": DefineComponent<DapDSAccordionProps>;
 
+  /**
+   * Anchor heading is a heading with an anchor link.
+   * ---
+   *
+   *
+   * ### **CSS Properties:**
+   *  - **--dds-anchor-link-color** - The color of the anchor link. Default is the primary color. _(default: undefined)_
+   * - **--dds-anchor-link-opacity** - The opacity of the anchor link when not hovered. Default is 0. _(default: undefined)_
+   * - **--dds-anchor-link-hover-opacity** - The opacity of the anchor link when hovered. Default is 1. _(default: undefined)_
+   * - **--dds-anchor-link-transition** - The transition property for the anchor link opacity. Default is 'opacity 0.2s ease-in-out'. _(default: undefined)_
+   *
+   * ### **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": DefineComponent<DapDSAnchorHeadingProps>;
+
   /**
    * An accordion group is a collection of accordion components.
    * ---
@@ -2884,49 +2903,6 @@ export type CustomElements = {
    */
   "dap-ds-accordion-group": DefineComponent<DapDSAccordionGroupProps>;
 
-  /**
-   * Avatar component can be used to display user profile images or icons, or illustrations.
-   * ---
-   *
-   *
-   * ### **CSS Properties:**
-   *  - **--dds-avatar-border-radius** - The border radius of the avatar. Default is the design system's rounded radius. _(default: undefined)_
-   * - **--dds-avatar-background-color** - The background color of the avatar. Default is transparent. _(default: undefined)_
-   * - **--dds-avatar-border-width** - The width of the avatar's border. Default is 0. _(default: undefined)_
-   * - **--dds-avatar-border-color** - The color of the avatar's border. Default is transparent. _(default: undefined)_
-   * - **--dds-avatar-border-style** - The style of the avatar's border. Default is solid. _(default: undefined)_
-   * - **--dds-avatar-transition** - The transition property for the avatar. Default is 'all 0.2s ease-in-out'. _(default: undefined)_
-   * - **--dds-avatar-size-lg** - The size of the large avatar. Default is the design system's spacing-2000. _(default: undefined)_
-   * - **--dds-avatar-size-md** - The size of the medium avatar. Default is the design system's spacing-1600. _(default: undefined)_
-   * - **--dds-avatar-size-sm** - The size of the small avatar. Default is the design system's spacing-1200. _(default: undefined)_
-   * - **--dds-avatar-size-xs** - The size of the extra small avatar. Default is the design system's spacing-800. _(default: undefined)_
-   * - **--dds-avatar-size-xxs** - The size of the extra extra small avatar. Default is the design system's spacing-600. _(default: undefined)_
-   *
-   * ### **CSS Parts:**
-   *  - **base** - The main avatar image container.
-   * - **img** - The avatar image.
-   */
-  "dap-ds-avatar": DefineComponent<DapDSAvatarProps>;
-
-  /**
-   * Anchor heading is a heading with an anchor link.
-   * ---
-   *
-   *
-   * ### **CSS Properties:**
-   *  - **--dds-anchor-link-color** - The color of the anchor link. Default is the primary color. _(default: undefined)_
-   * - **--dds-anchor-link-opacity** - The opacity of the anchor link when not hovered. Default is 0. _(default: undefined)_
-   * - **--dds-anchor-link-hover-opacity** - The opacity of the anchor link when hovered. Default is 1. _(default: undefined)_
-   * - **--dds-anchor-link-transition** - The transition property for the anchor link opacity. Default is 'opacity 0.2s ease-in-out'. _(default: undefined)_
-   *
-   * ### **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": DefineComponent<DapDSAnchorHeadingProps>;
-
   /**
    * A badge is a small status descriptor for UI elements.
    * ---
@@ -3026,6 +3002,30 @@ export type CustomElements = {
    */
   "dap-ds-banner": DefineComponent<DapDSBannerProps>;
 
+  /**
+   * Avatar component can be used to display user profile images or icons, or illustrations.
+   * ---
+   *
+   *
+   * ### **CSS Properties:**
+   *  - **--dds-avatar-border-radius** - The border radius of the avatar. Default is the design system's rounded radius. _(default: undefined)_
+   * - **--dds-avatar-background-color** - The background color of the avatar. Default is transparent. _(default: undefined)_
+   * - **--dds-avatar-border-width** - The width of the avatar's border. Default is 0. _(default: undefined)_
+   * - **--dds-avatar-border-color** - The color of the avatar's border. Default is transparent. _(default: undefined)_
+   * - **--dds-avatar-border-style** - The style of the avatar's border. Default is solid. _(default: undefined)_
+   * - **--dds-avatar-transition** - The transition property for the avatar. Default is 'all 0.2s ease-in-out'. _(default: undefined)_
+   * - **--dds-avatar-size-lg** - The size of the large avatar. Default is the design system's spacing-2000. _(default: undefined)_
+   * - **--dds-avatar-size-md** - The size of the medium avatar. Default is the design system's spacing-1600. _(default: undefined)_
+   * - **--dds-avatar-size-sm** - The size of the small avatar. Default is the design system's spacing-1200. _(default: undefined)_
+   * - **--dds-avatar-size-xs** - The size of the extra small avatar. Default is the design system's spacing-800. _(default: undefined)_
+   * - **--dds-avatar-size-xxs** - The size of the extra extra small avatar. Default is the design system's spacing-600. _(default: undefined)_
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The main avatar image container.
+   * - **img** - The avatar image.
+   */
+  "dap-ds-avatar": DefineComponent<DapDSAvatarProps>;
+
   /**
    * A breadcrumb is a secondary navigation scheme that reveals the user's location in a website or Web application.
    * ---
@@ -3482,6 +3482,61 @@ export type CustomElements = {
    */
   "dap-ds-checkbox": DefineComponent<DapDSCheckboxProps>;
 
+  /**
+   * A select is a form element that allows the user to select one option from a set.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **dds-change** - Fired when the select value changes.
+   * - **dds-blur** - Emitted when the select loses focus.
+   * - **dds-focus** - Emitted when the select gains focus.
+   * - **dds-clear** - Emitted when the select is cleared.
+   * - **dds-search** - Emitted when the manual input value changes.
+   * - **dds-input** - Emitted when typing happens in the input.
+   *
+   * ### **Slots:**
+   *  - _default_ - The default slot for the options.
+   *
+   * ### **CSS Properties:**
+   *  - **--dds-combobox-background** - The background color of the combobox. Defaults to var(--dds-fields-background-default). _(default: undefined)_
+   * - **--dds-combobox-border-color** - The border color of the combobox. Defaults to var(--dds-border-neutral-base). _(default: undefined)_
+   * - **--dds-combobox-border-width** - The border width of the combobox. Defaults to var(--dds-border-width-base, 1px). _(default: undefined)_
+   * - **--dds-combobox-border-radius** - The border radius of the combobox. Defaults to var(--dds-radius-base). _(default: undefined)_
+   * - **--dds-combobox-text-color** - The text color of the combobox. Defaults to var(--dds-text-neutral-base). _(default: undefined)_
+   * - **--dds-combobox-placeholder-color** - The placeholder text color. Defaults to var(--dds-text-neutral-subtle). _(default: undefined)_
+   * - **--dds-combobox-disabled-background** - The background color when disabled. Defaults to var(--dds-background-neutral-stronger). _(default: undefined)_
+   * - **--dds-combobox-disabled-text** - The text color when disabled. Defaults to var(--dds-text-neutral-disabled). _(default: undefined)_
+   * - **--dds-combobox-error-border** - The border color for error state. Defaults to var(--dds-border-negative-base). _(default: undefined)_
+   * - **--dds-combobox-success-border** - The border color for success state. Defaults to var(--dds-border-positive-base). _(default: undefined)_
+   * - **--dds-combobox-icon-color** - The color of the icons. Defaults to var(--dds-text-icon-neutral-subtle). _(default: undefined)_
+   * - **--dds-combobox-clear-icon-color** - The color of the clear icon. Defaults to var(--dds-button-subtle-icon-neutral-enabled). _(default: undefined)_
+   * - **--dds-combobox-popup-background** - The background color of the popup. Defaults to var(--dds-background-neutral-subtle). _(default: undefined)_
+   * - **--dds-combobox-popup-shadow** - The box shadow of the popup. Defaults to 0 4px 6px -1px rgb(0 0 0 / 8%), 0 2px 4px -1px rgb(0 0 0 / 6%). _(default: undefined)_
+   * - **--dds-combobox-padding-xs** - The padding for extra small size. Defaults to var(--dds-spacing-200). _(default: undefined)_
+   * - **--dds-combobox-padding-sm** - The padding for small size. Defaults to var(--dds-spacing-200). _(default: undefined)_
+   * - **--dds-combobox-padding-lg** - The padding for large size. Defaults to var(--dds-spacing-300). _(default: undefined)_
+   * - **--dds-combobox-padding-horizontal** - The horizontal padding. Defaults to var(--dds-spacing-300). _(default: undefined)_
+   * - **--dds-combobox-padding-vertical** - The vertical padding. Defaults to var(--dds-spacing-200). _(default: undefined)_
+   * - **--dds-combobox-gap** - The gap between elements. Defaults to var(--dds-spacing-100). _(default: undefined)_
+   * - **--dds-combobox-icon-gap** - The gap between icons. Defaults to var(--dds-spacing-200). _(default: undefined)_
+   * - **--dds-combobox-action-gap** - The gap between action elements. Defaults to var(--dds-spacing-200). _(default: undefined)_
+   * - **--dds-combobox-action-padding** - The padding for action elements. Defaults to var(--dds-spacing-300). _(default: undefined)_
+   * - **--dds-combobox-clear-icon-width** - The width of the clear icon. Defaults to var(--dds-spacing-800). _(default: undefined)_
+   * - **--dds-combobox-dropdown-icon-right** - The right position of the dropdown icon. Defaults to var(--dds-spacing-600). _(default: undefined)_
+   * - **--dds-combobox-min-width** - The minimum width of the combobox. Defaults to 7.5rem. _(default: undefined)_
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The main select container.
+   * - **trigger** - The trigger button of the select.
+   * - **label** - The label of the select.
+   * - **description** - The description of the select.
+   * - **feedback** - The feedback of the select.
+   * - **tooltip** - The tooltip of the select.
+   * - **option-list** - The option list of the select.
+   */
+  "dap-ds-combobox": DefineComponent<DapDSComboboxProps>;
+
   /**
    * A command group is a group of command items.
    * ---
@@ -3556,61 +3611,6 @@ export type CustomElements = {
    */
   "dap-ds-command": DefineComponent<DapDSCommandProps>;
 
-  /**
-   * A select is a form element that allows the user to select one option from a set.
-   * ---
-   *
-   *
-   * ### **Events:**
-   *  - **dds-change** - Fired when the select value changes.
-   * - **dds-blur** - Emitted when the select loses focus.
-   * - **dds-focus** - Emitted when the select gains focus.
-   * - **dds-clear** - Emitted when the select is cleared.
-   * - **dds-search** - Emitted when the manual input value changes.
-   * - **dds-input** - Emitted when typing happens in the input.
-   *
-   * ### **Slots:**
-   *  - _default_ - The default slot for the options.
-   *
-   * ### **CSS Properties:**
-   *  - **--dds-combobox-background** - The background color of the combobox. Defaults to var(--dds-fields-background-default). _(default: undefined)_
-   * - **--dds-combobox-border-color** - The border color of the combobox. Defaults to var(--dds-border-neutral-base). _(default: undefined)_
-   * - **--dds-combobox-border-width** - The border width of the combobox. Defaults to var(--dds-border-width-base, 1px). _(default: undefined)_
-   * - **--dds-combobox-border-radius** - The border radius of the combobox. Defaults to var(--dds-radius-base). _(default: undefined)_
-   * - **--dds-combobox-text-color** - The text color of the combobox. Defaults to var(--dds-text-neutral-base). _(default: undefined)_
-   * - **--dds-combobox-placeholder-color** - The placeholder text color. Defaults to var(--dds-text-neutral-subtle). _(default: undefined)_
-   * - **--dds-combobox-disabled-background** - The background color when disabled. Defaults to var(--dds-background-neutral-stronger). _(default: undefined)_
-   * - **--dds-combobox-disabled-text** - The text color when disabled. Defaults to var(--dds-text-neutral-disabled). _(default: undefined)_
-   * - **--dds-combobox-error-border** - The border color for error state. Defaults to var(--dds-border-negative-base). _(default: undefined)_
-   * - **--dds-combobox-success-border** - The border color for success state. Defaults to var(--dds-border-positive-base). _(default: undefined)_
-   * - **--dds-combobox-icon-color** - The color of the icons. Defaults to var(--dds-text-icon-neutral-subtle). _(default: undefined)_
-   * - **--dds-combobox-clear-icon-color** - The color of the clear icon. Defaults to var(--dds-button-subtle-icon-neutral-enabled). _(default: undefined)_
-   * - **--dds-combobox-popup-background** - The background color of the popup. Defaults to var(--dds-background-neutral-subtle). _(default: undefined)_
-   * - **--dds-combobox-popup-shadow** - The box shadow of the popup. Defaults to 0 4px 6px -1px rgb(0 0 0 / 8%), 0 2px 4px -1px rgb(0 0 0 / 6%). _(default: undefined)_
-   * - **--dds-combobox-padding-xs** - The padding for extra small size. Defaults to var(--dds-spacing-200). _(default: undefined)_
-   * - **--dds-combobox-padding-sm** - The padding for small size. Defaults to var(--dds-spacing-200). _(default: undefined)_
-   * - **--dds-combobox-padding-lg** - The padding for large size. Defaults to var(--dds-spacing-300). _(default: undefined)_
-   * - **--dds-combobox-padding-horizontal** - The horizontal padding. Defaults to var(--dds-spacing-300). _(default: undefined)_
-   * - **--dds-combobox-padding-vertical** - The vertical padding. Defaults to var(--dds-spacing-200). _(default: undefined)_
-   * - **--dds-combobox-gap** - The gap between elements. Defaults to var(--dds-spacing-100). _(default: undefined)_
-   * - **--dds-combobox-icon-gap** - The gap between icons. Defaults to var(--dds-spacing-200). _(default: undefined)_
-   * - **--dds-combobox-action-gap** - The gap between action elements. Defaults to var(--dds-spacing-200). _(default: undefined)_
-   * - **--dds-combobox-action-padding** - The padding for action elements. Defaults to var(--dds-spacing-300). _(default: undefined)_
-   * - **--dds-combobox-clear-icon-width** - The width of the clear icon. Defaults to var(--dds-spacing-800). _(default: undefined)_
-   * - **--dds-combobox-dropdown-icon-right** - The right position of the dropdown icon. Defaults to var(--dds-spacing-600). _(default: undefined)_
-   * - **--dds-combobox-min-width** - The minimum width of the combobox. Defaults to 7.5rem. _(default: undefined)_
-   *
-   * ### **CSS Parts:**
-   *  - **base** - The main select container.
-   * - **trigger** - The trigger button of the select.
-   * - **label** - The label of the select.
-   * - **description** - The description of the select.
-   * - **feedback** - The feedback of the select.
-   * - **tooltip** - The tooltip of the select.
-   * - **option-list** - The option list of the select.
-   */
-  "dap-ds-combobox": DefineComponent<DapDSComboboxProps>;
-
   /**
    * Segmented control item component for the segmented control.
    * ---
@@ -5423,7 +5423,7 @@ export type CustomElements = {
    * ### **CSS Parts:**
    *  - **base** - The main icon container.
    */
-  "dap-ds-icon-arrow-left-l-line": DefineComponent<ArrowsArrowLeftLLineProps>;
+  "dap-ds-icon-arrow-left-line": DefineComponent<ArrowsArrowLeftLineProps>;
 
   /**
    * An icon
@@ -5433,7 +5433,7 @@ export type CustomElements = {
    * ### **CSS Parts:**
    *  - **base** - The main icon container.
    */
-  "dap-ds-icon-arrow-left-line": DefineComponent<ArrowsArrowLeftLineProps>;
+  "dap-ds-icon-arrow-left-l-line": DefineComponent<ArrowsArrowLeftLLineProps>;
 
   /**
    * An icon
@@ -5643,7 +5643,7 @@ export type CustomElements = {
    * ### **CSS Parts:**
    *  - **base** - The main icon container.
    */
-  "dap-ds-icon-alert-line": DefineComponent<SystemAlertLineProps>;
+  "dap-ds-icon-check-line": DefineComponent<SystemCheckLineProps>;
 
   /**
    * An icon
@@ -5653,7 +5653,7 @@ export type CustomElements = {
    * ### **CSS Parts:**
    *  - **base** - The main icon container.
    */
-  "dap-ds-icon-check-line": DefineComponent<SystemCheckLineProps>;
+  "dap-ds-icon-alert-line": DefineComponent<SystemAlertLineProps>;
 
   /**
    * An icon
@@ -5683,7 +5683,7 @@ export type CustomElements = {
    * ### **CSS Parts:**
    *  - **base** - The main icon container.
    */
-  "dap-ds-icon-checkbox-blank-circle-fill-check": DefineComponent<SystemCheckboxBlankCircleFillCheckProps>;
+  "dap-ds-icon-checkbox-blank-circle-line": DefineComponent<SystemCheckboxBlankCircleLineProps>;
 
   /**
    * An icon
@@ -5693,7 +5693,7 @@ export type CustomElements = {
    * ### **CSS Parts:**
    *  - **base** - The main icon container.
    */
-  "dap-ds-icon-checkbox-blank-circle-line": DefineComponent<SystemCheckboxBlankCircleLineProps>;
+  "dap-ds-icon-checkbox-blank-circle-fill-check": DefineComponent<SystemCheckboxBlankCircleFillCheckProps>;
 
   /**
    * An icon