dap-design-system 0.62.4 → 0.63.0

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

@@ -34,6 +34,9 @@ import type {
   DapDSBreadcrumb,
   DapDSBreadcrumbItem,
   DapDSButton,
+  DapDSButtonGroup,
+  DapDSButtonGroupSeparator,
+  DapDSButtonGroupText,
   DapDSCalendar,
   DapDSCalendarCell,
   DapDSCallout,
@@ -217,9 +220,11 @@ export interface DapDSAccordionEvents {
   onDdsClosed?: (event: CustomEvent<{ open: boolean, item: AccordionBaseElement }>) => void
 }
 
-export interface DapDSAvatarGroupEvents {
-  /** Fired when the overflow indicator is clicked. */
-  onDdsOverflowClick?: (event: CustomEvent) => void
+export interface DapDSAvatarEvents {
+  /** Fired when the image loads successfully. */
+  onDdsLoad?: (event: CustomEvent) => void
+  /** Fired when the image fails to load. */
+  onDdsError?: (event: CustomEvent) => void
 }
 
 export interface DapDSBannerEvents {
@@ -227,26 +232,24 @@ export interface DapDSBannerEvents {
   onDdsClose?: (event: CustomEvent) => void
 }
 
+export interface DapDSAvatarGroupEvents {
+  /** Fired when the overflow indicator is clicked. */
+  onDdsOverflowClick?: (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 DapDSAvatarEvents {
-  /** Fired when the image loads successfully. */
-  onDdsLoad?: (event: CustomEvent) => void
-  /** Fired when the image fails to load. */
-  onDdsError?: (event: CustomEvent) => void
+export interface DapDSCalloutEvents {
+  /** Fired when the close button is clicked. */
+  onDdsClose?: (event: CustomEvent) => void
 }
 
 export interface DapDSCheckboxEvents {
@@ -473,8 +476,8 @@ export interface DapDSOfficialWebsiteBannerEvents {
 export interface DapDSOptionListEvents {
   /** Fired when the escape key is pressed. */
   onDdsCancel?: (event: CustomEvent) => void
-  /** Fired when the option list value changes. */
-  onDdsOptionChange?: (event: CustomEvent<{ option: DapDSOptionItem, value: string, index: number, text: string }>) => void
+  /** Fired when the option list value changes. `item` is set when the options come from `items`. */
+  onDdsOptionChange?: (event: CustomEvent<{ option: DapDSOptionItem, value: string, index: number, text: string, item?: DapDSOptionData }>) => void
   /** Fired when a key is pressed down. */
   onDdsKeydown?: (event: CustomEvent) => void
   /** Fired when the available options list changes. */
@@ -657,11 +660,6 @@ export interface DapDSRadioGroupEvents {
   onDdsFocus?: (event: CustomEvent) => void
 }
 
-export interface DapDSAccordionGroupSlots {
-  /** The content of the accordion group. */
-  default?: () => any
-}
-
 export interface DapDSAccordionSlots {
   /** The content of the accordion. */
   default?: () => any
@@ -673,8 +671,22 @@ export interface DapDSAccordionSlots {
   'icon-closed'?: () => any
 }
 
-export interface DapDSAvatarGroupSlots {
-  /** The avatars to display in the group. */
+export interface DapDSBadgeSlots {
+  /** The content of the badge. */
+  default?: () => any
+  /** The icon of the badge. */
+  'icon'?: () => any
+}
+
+export interface 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
 }
 
@@ -694,6 +706,11 @@ export interface DapDSBreadcrumbSlots {
   'separator'?: () => any
 }
 
+export interface DapDSAvatarGroupSlots {
+  /** The avatars to display in the group. */
+  default?: () => any
+}
+
 export interface DapDSBreadcrumbItemSlots {
   /** The content of the breadcrumb item. */
   default?: () => any
@@ -701,15 +718,28 @@ export interface DapDSBreadcrumbItemSlots {
   'separator'?: () => any
 }
 
-export interface DapDSBadgeSlots {
-  /** The content of the badge. */
+export interface DapDSButtonSlots {
+  /** The content of the button. Can contain text, icons, or other elements. */
   default?: () => any
-  /** The icon of the badge. */
-  'icon'?: () => any
 }
 
-export interface DapDSButtonSlots {
-  /** The content of the button. Can contain text, icons, or other elements. */
+export interface DapDSCalendarCellSlots {
+  /** The content of the calendar cell. */
+  default?: () => any
+}
+
+export interface DapDSCalendarSlots {
+  /** The content of the calendar. */
+  default?: () => any
+}
+
+export interface DapDSButtonGroupTextSlots {
+  /** The text content. Can also hold an icon or a `<label>` for a grouped input. */
+  default?: () => any
+}
+
+export interface DapDSButtonGroupSlots {
+  /** The grouped items: `dap-ds-button`, `dap-ds-icon-button`, `dap-ds-button-group-text`, `dap-ds-button-group-separator` or nested `dap-ds-button-group` elements. */
   default?: () => any
 }
 
@@ -726,23 +756,6 @@ export interface DapDSCalloutSlots {
   'close'?: () => any
 }
 
-export interface DapDSCalendarCellSlots {
-  /** The content of the calendar cell. */
-  default?: () => any
-}
-
-export interface DapDSCalendarSlots {
-  /** The content of the calendar. */
-  default?: () => any
-}
-
-export interface DapDSAvatarSlots {
-  /** The icon to display when variant is 'icon'. */
-  'icon'?: () => any
-  /** Custom fallback content when image fails to load. */
-  'fallback'?: () => any
-}
-
 export interface DapDSCardActionsSlots {
   /** The content of the card actions. */
   default?: () => any
@@ -1125,15 +1138,6 @@ export interface DapDSRadioGroupSlots {
   'feedback-icon'?: () => any
 }
 
-export type DapDSAccordionGroupProps = {
-  /** Whether to close other accordions when one is opened. */
-  autoClose?: DapDSAccordionGroup["autoClose"]
-  /** The variant of the accordion */
-  variant?: DapDSAccordionGroup["variant"]
-  /**  */
-  tagName?: DapDSAccordionGroup["tagName"]
-}
-
 export type DapDSAccordionProps = {
   /**  */
   tagName?: DapDSAccordion["tagName"]
@@ -1176,25 +1180,61 @@ export type DapDSAnchorHeadingProps = {
   anchorTitle?: DapDSAnchorHeading["anchorTitle"]
 }
 
-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"]
+export type DapDSBadgeProps = {
+  /** The type of the badge */
+  type?: DapDSBadge["type"]
+  /** The icon of the badge, this is a name of a built in icon */
+  icon?: DapDSBadge["icon"]
+  /** Whether the badge represents dynamic content that should announce changes */
+  live?: DapDSBadge["live"]
   /**  */
-  tagName?: DapDSAvatarGroup["tagName"]
-  /** 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"]
+  tagName?: DapDSBadge["tagName"]
+  /**  */
+  dependencies?: DapDSBadge["dependencies"]
+  /** The size of the badge. Default is `sm`. */
+  size?: DapDSBadge["size"]
+  /** Responsive size map (e.g. "md:lg"). */
+  sizeMap?: DapDSBadge["sizeMap"]
+}
+
+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"]
+  /**  */
+  tagName?: DapDSAvatar["tagName"]
+  /**  */
+  dependencies?: DapDSAvatar["dependencies"]
+  /** The size of the avatar. Default is `md`. */
+  size?: DapDSAvatar["size"]
+  /** Responsive size map (e.g. "md:lg"). */
+  sizeMap?: DapDSAvatar["sizeMap"]
+}
+
+export type DapDSAccordionGroupProps = {
+  /** Whether to close other accordions when one is opened. */
+  autoClose?: DapDSAccordionGroup["autoClose"]
+  /** The variant of the accordion */
+  variant?: DapDSAccordionGroup["variant"]
+  /**  */
+  tagName?: DapDSAccordionGroup["tagName"]
 }
 
 export type DapDSBannerProps = {
@@ -1227,6 +1267,27 @@ export type DapDSBreadcrumbProps = {
   tagName?: DapDSBreadcrumb["tagName"]
 }
 
+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"]
+  /**  */
+  tagName?: DapDSAvatarGroup["tagName"]
+  /** 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 DapDSBreadcrumbItemProps = {
   /** The URL of the breadcrumb item. */
   href?: DapDSBreadcrumbItem["href"]
@@ -1244,23 +1305,6 @@ export type DapDSBreadcrumbItemProps = {
   dependencies?: DapDSBreadcrumbItem["dependencies"]
 }
 
-export type DapDSBadgeProps = {
-  /** The type of the badge */
-  type?: DapDSBadge["type"]
-  /** The icon of the badge, this is a name of a built in icon */
-  icon?: DapDSBadge["icon"]
-  /** Whether the badge represents dynamic content that should announce changes */
-  live?: DapDSBadge["live"]
-  /**  */
-  tagName?: DapDSBadge["tagName"]
-  /**  */
-  dependencies?: DapDSBadge["dependencies"]
-  /** The size of the badge. Default is `sm`. */
-  size?: DapDSBadge["size"]
-  /** Responsive size map (e.g. "md:lg"). */
-  sizeMap?: DapDSBadge["sizeMap"]
-}
-
 export type DapDSButtonProps = {
   /** The visual style variant of the button */
   variant?: DapDSButton["variant"]
@@ -1296,31 +1340,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"]
-  /**  */
-  tagName?: DapDSCallout["tagName"]
-  /**  */
-  dependencies?: DapDSCallout["dependencies"]
-}
-
 export type DapDSCalendarCellProps = {
   /** Whether the calendar cell is selected. */
   selected?: DapDSCalendarCell["selected"]
@@ -1389,35 +1408,46 @@ export type DapDSCalendarProps = {
   shouldHideAdjacentMonths?: DapDSCalendar["shouldHideAdjacentMonths"]
 }
 
-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"]
+export type DapDSButtonGroupSeparatorProps = {
   /**  */
-  tagName?: DapDSAvatar["tagName"]
+  tagName?: DapDSButtonGroupSeparator["tagName"]
+}
+
+export type DapDSButtonGroupTextProps = {
   /**  */
-  dependencies?: DapDSAvatar["dependencies"]
-  /** The size of the avatar. Default is `md`. */
-  size?: DapDSAvatar["size"]
-  /** Responsive size map (e.g. "md:lg"). */
-  sizeMap?: DapDSAvatar["sizeMap"]
+  tagName?: DapDSButtonGroupText["tagName"]
+}
+
+export type DapDSButtonGroupProps = {
+  /** The layout direction of the group */
+  orientation?: DapDSButtonGroup["orientation"]
+  /**  */
+  tagName?: DapDSButtonGroup["tagName"]
+}
+
+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"]
+  /**  */
+  tagName?: DapDSCallout["tagName"]
+  /**  */
+  dependencies?: DapDSCallout["dependencies"]
 }
 
 export type DapDSCardActionsProps = {
@@ -1695,10 +1725,14 @@ export type DapDSComboboxProps = {
   feedback?: DapDSCombobox["feedback"]
   /** The feedback type of the select. */
   feedbackType?: DapDSCombobox["feedbackType"]
-  /** The search mode of the select. */
+  /** The search mode of the combobox. `autocomplete` (default) filters the options by their starting text as you type; `manual` does no filtering, so replace the options yourself on `dds-input`. `typehead` is deprecated for the combobox: it is meant for the select, and the list does not open in this mode. */
   searchMode?: DapDSCombobox["searchMode"]
   /** Whether the combobox should open on empty results. */
   openOnEmpty?: DapDSCombobox["openOnEmpty"]
+  /** The options as data, instead of `dap-ds-option-item` children. When set, child options are ignored. Also accepted as a JSON attribute. */
+  items?: DapDSCombobox["items"]
+  /** Renders the content of each option given in `items`. Defaults to the item's `label`. Must not render interactive elements and should include the label text. */
+  renderOption?: DapDSCombobox["renderOption"]
   /** Whether the combobox allows manual input, or free text. */
   allowManualInput?: DapDSCombobox["allowManualInput"]
   /** Whether the combobox should search for the selected item text. */
@@ -2651,7 +2685,14 @@ export type DapDSNavigationMenuItemProps = {
   submenuController?: DapDSNavigationMenuItem["submenuController"]
   /**  */
   hasContent?: DapDSNavigationMenuItem["hasContent"]
-  /** Computed property to detect if this item contains nested navigation menu items. */
+  /** Computed property to detect if this item contains nested navigation menu items.
+
+Backed by state (populated in `_updateNestedItems`) rather than a live
+`querySelectorAll` so it is SSR-safe: the `@lit-labs/ssr` element shim has no
+`querySelectorAll`, and reading it from `render()` would both throw on the
+server and structurally diverge from the client hydration render (the expand
+indicator span). Starts `false` (matching `hasContent`) so server and client
+hydration renders agree; the real value is resolved in `firstUpdated`. */
   hasNestedItems?: DapDSNavigationMenuItem["hasNestedItems"]
   /** The element keyboard activation should act on: the element slotted into
 `trigger` when one is provided, otherwise the default trigger button
@@ -2846,12 +2887,16 @@ export type DapDSOptionListProps = {
   searchMode?: DapDSOptionList["searchMode"]
   /** Whether the option list items are selectable, whether it shows the selected icon */
   selectable?: DapDSOptionList["selectable"]
+  /** The options as data, instead of `dap-ds-option-item` children. When set, child options are ignored. Also accepted as a JSON attribute. */
+  items?: DapDSOptionList["items"]
   /** Whether multiple options can be selected; exposed as aria-multiselectable on the listbox. */
   multiselectable?: DapDSOptionList["multiselectable"]
   /**  */
   tagName?: DapDSOptionList["tagName"]
   /**  */
   dependencies?: DapDSOptionList["dependencies"]
+  /** Renders the content of each option given in `items`. Defaults to the item's `label` as text. Must not render interactive elements, and should include the label text (it is the option's accessible name). */
+  renderOption?: DapDSOptionList["renderOption"]
   /**  */
   queryTimeout?: DapDSOptionList["queryTimeout"]
   /**  */
@@ -3008,31 +3053,6 @@ export type DapDSPopupProps = {
   disableViewportAutoClose?: DapDSPopup["disableViewportAutoClose"]
 }
 
-export type DapDSProgressProps = {
-  /** The variant of the progress indicator. */
-  variant?: DapDSProgress["variant"]
-  /** The color variant of the progress indicator. */
-  color?: DapDSProgress["color"]
-  /** Current progress value (0-100 for percentage, or 0-max). */
-  value?: DapDSProgress["value"]
-  /** Maximum value for the progress indicator. */
-  max?: DapDSProgress["max"]
-  /** Whether to show the progress as indeterminate (loading animation). */
-  indeterminate?: DapDSProgress["indeterminate"]
-  /** Whether to show percentage text in the center (circular variant only). */
-  showPercentage?: DapDSProgress["showPercentage"]
-  /** Label text for the progress indicator. */
-  label?: DapDSProgress["label"]
-  /** The aria-live politeness level for screen readers. */
-  "aria-live"?: DapDSProgress["ariaLive"]
-  /**  */
-  tagName?: DapDSProgress["tagName"]
-  /** The size of the progress indicator. Default is `sm`. See SizedMixin. */
-  size?: DapDSProgress["size"]
-  /** Responsive size map (e.g. "md:lg"); see SizedMixin. */
-  sizeMap?: DapDSProgress["sizeMap"]
-}
-
 export type DapDSRadioButtonProps = {
   /** Whether the radio button is focusable. */
   focusable?: DapDSRadioButton["focusable"]
@@ -3096,6 +3116,31 @@ export type DapDSRadioButtonProps = {
   requiredLabel?: DapDSRadioButton["requiredLabel"]
 }
 
+export type DapDSProgressProps = {
+  /** The variant of the progress indicator. */
+  variant?: DapDSProgress["variant"]
+  /** The color variant of the progress indicator. */
+  color?: DapDSProgress["color"]
+  /** Current progress value (0-100 for percentage, or 0-max). */
+  value?: DapDSProgress["value"]
+  /** Maximum value for the progress indicator. */
+  max?: DapDSProgress["max"]
+  /** Whether to show the progress as indeterminate (loading animation). */
+  indeterminate?: DapDSProgress["indeterminate"]
+  /** Whether to show percentage text in the center (circular variant only). */
+  showPercentage?: DapDSProgress["showPercentage"]
+  /** Label text for the progress indicator. */
+  label?: DapDSProgress["label"]
+  /** The aria-live politeness level for screen readers. */
+  "aria-live"?: DapDSProgress["ariaLive"]
+  /**  */
+  tagName?: DapDSProgress["tagName"]
+  /** The size of the progress indicator. Default is `sm`. See SizedMixin. */
+  size?: DapDSProgress["size"]
+  /** Responsive size map (e.g. "md:lg"); see SizedMixin. */
+  sizeMap?: DapDSProgress["sizeMap"]
+}
+
 export type DapDSRatingProps = {
   /** The label of the rating */
   label?: DapDSRating["label"]
@@ -3150,7 +3195,7 @@ export type DapDSSearchProps = {
   noAnimation?: DapDSSearch["noAnimation"]
   /**  */
   searchOnValueSet?: DapDSSearch["searchOnValueSet"]
-  /** The search mode of the select. Default is 'none'. */
+  /** The search mode of the search. `none` (default) is a free-text search without a suggestion list; `autocomplete` shows suggestions filtered by their starting text as you type; `manual` shows the suggestions you supply on `dds-input` without filtering them. `typehead` is deprecated for the search: it is meant for the select, and the list does not open in this mode. */
   searchMode?: DapDSSearch["searchMode"]
   /** Whether the search should not complete the text. */
   textComplete?: DapDSSearch["textComplete"]
@@ -3213,6 +3258,11 @@ export type DapDSSelectProps = {
   isMobile?: DapDSSelect["isMobile"]
   /** Whether to render a native HTML select element for mobile-friendly option selection. */
   native?: DapDSSelect["native"]
+  /** Experimental: render a native `<select>` that opts into the customizable select
+(`appearance: base-select`) in supporting browsers, so the dropdown picker is styled
+like the design system while keeping native keyboard, typeahead and top-layer behavior.
+Browsers without support fall back to the classic native select (same as `native`). */
+  customizable?: DapDSSelect["customizable"]
   /** The loading state of the select. */
   loading?: DapDSSelect["loading"]
   /** The max heigth of the select dropdown. */
@@ -3223,10 +3273,14 @@ export type DapDSSelectProps = {
   floatingStrategy?: DapDSSelect["floatingStrategy"]
   /** Whether to keep popup open when trigger leaves viewport. */
   disableViewportAutoClose?: DapDSSelect["disableViewportAutoClose"]
+  /** The options as data, instead of `dap-ds-option-item` children. When set, child options are ignored. Also accepted as a JSON attribute. */
+  items?: DapDSSelect["items"]
   /**  */
   tagName?: DapDSSelect["tagName"]
   /**  */
   dependencies?: DapDSSelect["dependencies"]
+  /** Renders the content of each option given in `items` in the dropdown list. Defaults to the item's `label`. The native and customizable modes show the label. */
+  renderOption?: DapDSSelect["renderOption"]
   /**  */
   focusElement?: DapDSSelect["focusElement"]
   /**  */
@@ -4237,19 +4291,6 @@ export type ArrowsExpandUpDownFillProps = {
   tagName?: ArrowsExpandUpDownFill["tagName"]
 }
 
-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"]
-  /**  */
-  tagName?: BuildingsHome6Line["tagName"]
-}
-
 export type BusinessCalendarLineProps = {
   /** (optional) The width and height in pixels */
   size?: BusinessCalendarLine["size"]
@@ -4289,6 +4330,19 @@ export type DesignToolsLineProps = {
   tagName?: DesignToolsLine["tagName"]
 }
 
+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"]
+  /**  */
+  tagName?: BuildingsHome6Line["tagName"]
+}
+
 export type DeviceComputerLineProps = {
   /** (optional) The width and height in pixels */
   size?: DeviceComputerLine["size"]
@@ -4874,30 +4928,30 @@ export type SystemLoadingSpinnerProps = {
   tagName?: SystemLoadingSpinner["tagName"]
 }
 
-export type SystemLockFillProps = {
+export type SystemLockLineProps = {
   /** (optional) The width and height in pixels */
-  size?: SystemLockFill["size"]
+  size?: SystemLockLine["size"]
   /** (optional) Sets the icon color via the `fill` attribute */
-  selected?: SystemLockFill["selected"]
+  selected?: SystemLockLine["selected"]
   /** (optional) When using the icon standalone, make it meaningful for accessibility */
-  accessibilityTitle?: SystemLockFill["accessibilityTitle"]
+  accessibilityTitle?: SystemLockLine["accessibilityTitle"]
   /** (optional) If `true` the icon can receive focus */
-  focusable?: SystemLockFill["focusable"]
+  focusable?: SystemLockLine["focusable"]
   /**  */
-  tagName?: SystemLockFill["tagName"]
+  tagName?: SystemLockLine["tagName"]
 }
 
-export type SystemLockLineProps = {
+export type SystemLockFillProps = {
   /** (optional) The width and height in pixels */
-  size?: SystemLockLine["size"]
+  size?: SystemLockFill["size"]
   /** (optional) Sets the icon color via the `fill` attribute */
-  selected?: SystemLockLine["selected"]
+  selected?: SystemLockFill["selected"]
   /** (optional) When using the icon standalone, make it meaningful for accessibility */
-  accessibilityTitle?: SystemLockLine["accessibilityTitle"]
+  accessibilityTitle?: SystemLockFill["accessibilityTitle"]
   /** (optional) If `true` the icon can receive focus */
-  focusable?: SystemLockLine["focusable"]
+  focusable?: SystemLockFill["focusable"]
   /**  */
-  tagName?: SystemLockLine["tagName"]
+  tagName?: SystemLockFill["tagName"]
 }
 
 export type SystemMenuLineProps = {
@@ -5136,17 +5190,7 @@ export type SystemZoomOutLineProps = {
 
 // Augment Vue's GlobalComponents interface
 declare module 'vue' {
-  interface GlobalComponents {
-    /**
-     * 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, {}>
+  interface GlobalComponents {
     /**
      * An accordion is a vertically stacked list of interactive items that can be expanded or collapsed to reveal or hide content.
      *
@@ -5171,6 +5215,7 @@ declare module 'vue' {
      * - **open-icon-base** - The base of the icon when the accordion is opened.
      * - **close-icon** - The icon when the accordion is closed.
      * - **close-icon-base** - The base of the icon when the accordion is closed.
+     * - **heading-text** - The text of the heading.
      */
          'dap-ds-accordion': DefineCustomElement<DapDSAccordion, DapDSAccordionProps, DapDSAccordionEvents>
     /**
@@ -5181,23 +5226,53 @@ declare module 'vue' {
      * - **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.
+     * - **link-text** - Alias of the text part.
      */
          'dap-ds-anchor-heading': DefineCustomElement<DapDSAnchorHeading, DapDSAnchorHeadingProps, {}>
     /**
-     * Avatar group component displays multiple avatars in an organized layout with overflow management.
+     * A badge is a small status descriptor for UI elements.
+     *
+     * ### Slots:
+     * - **default** - The content of the badge.
+     * - **icon** - The icon of the badge.
+     *
+     * ### CSS Parts:
+     * - **base** - The main container of the badge.
+     * - **icon** - The icon of the badge.
+     * - **content** - The content of the badge.
+     * - **icon-base** - The base of the icon.
+     */
+         'dap-ds-badge': DefineCustomElement<DapDSBadge, DapDSBadgeProps, {}>
+    /**
+     * Avatar component can be used to display user profile images, initials, or icons.
      *
      * ### Events:
-     * - **dds-overflow-click** - Fired when the overflow indicator is clicked.
+     * - **dds-load** - Fired when the image loads successfully.
+     * - **dds-error** - Fired when the image fails to load.
      *
      * ### Slots:
-     * - **default** - The avatars to display in the group.
+     * - **icon** - The icon to display when variant is 'icon'.
+     * - **fallback** - Custom fallback content when image fails to load.
      *
      * ### CSS Parts:
-     * - **base** - The main container of the avatar group.
-     * - **avatars** - The container for the visible avatars.
-     * - **overflow** - The overflow indicator element.
+     * - **base** - The main 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-group': DefineCustomElement<DapDSAvatarGroup, DapDSAvatarGroupProps, DapDSAvatarGroupEvents>
+         'dap-ds-avatar': DefineCustomElement<DapDSAvatar, DapDSAvatarProps, DapDSAvatarEvents>
+    /**
+     * 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, {}>
     /**
      * A banner is a message displayed at the top of the page to provide important information to the user.
      *
@@ -5219,7 +5294,7 @@ declare module 'vue' {
      * - **close-icon-element** - The icon element of the close button.
      * - **close-icon-base** - The base of the close button icon.
      * - **actions** - The actions of the banner.
-     * - **title** -  The title of the banner.
+     * - **close-button** - The close button wrapper of the banner.
      */
          'dap-ds-banner': DefineCustomElement<DapDSBanner, DapDSBannerProps, DapDSBannerEvents>
     /**
@@ -5231,9 +5306,24 @@ declare module 'vue' {
      *
      * ### CSS Parts:
      * - **base** - The main breadcrumb container.
-     * - **separator** - The separator of the breadcrumb.
+     * - **list** - The ordered list holding the breadcrumb items.
      */
          'dap-ds-breadcrumb': DefineCustomElement<DapDSBreadcrumb, DapDSBreadcrumbProps, {}>
+    /**
+     * 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 breadcrumb item is a secondary navigation scheme that reveals the user's location in a website or Web application.
      *
@@ -5249,20 +5339,6 @@ declare module 'vue' {
      * - **separator** - The separator of the breadcrumb item.
      */
          'dap-ds-breadcrumb-item': DefineCustomElement<DapDSBreadcrumbItem, DapDSBreadcrumbItemProps, {}>
-    /**
-     * A badge is a small status descriptor for UI elements.
-     *
-     * ### Slots:
-     * - **default** - The content of the badge.
-     * - **icon** - The icon of the badge.
-     *
-     * ### CSS Parts:
-     * - **base** - The main container of the badge.
-     * - **icon** - The icon of the badge.
-     * - **content** - The content of the badge.
-     * - **icon-base** - The base of the icon.
-     */
-         'dap-ds-badge': DefineCustomElement<DapDSBadge, DapDSBadgeProps, {}>
     /**
      * A button is a clickable element that can be used to trigger an action, submit forms, or navigate to other pages.
      *
@@ -5278,30 +5354,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.
      *
@@ -5333,28 +5385,57 @@ declare module 'vue' {
      * - **calendar-header-button-next** - The next month button of the calendar header.
      * - **calendar-header-year-select** - The year select of the calendar header.
      * - **calendar-header-month-select** - The month select of the calendar header.
+     * - **calendar-grid-header-cell-base** - The base of the calendar grid header cell.
+     * - **calendar-grid-cell-base** - The base of the calendar grid cell.
+     * - **calendar-grid-cell-today-mark** - The today mark of the calendar grid cell.
      */
          'dap-ds-calendar': DefineCustomElement<DapDSCalendar, DapDSCalendarProps, DapDSCalendarEvents>
     /**
-     * Avatar component can be used to display user profile images, initials, or icons.
+     * A visual divider between items in a button group.
+     */
+         'dap-ds-button-group-separator': DefineCustomElement<DapDSButtonGroupSeparator, DapDSButtonGroupSeparatorProps, {}>
+    /**
+     * Non-interactive text displayed inside a button group.
+     *
+     * ### Slots:
+     * - **default** - The text content. Can also hold an icon or a `<label>` for a grouped input.
+     *
+     * ### CSS Parts:
+     * - **base** - The text container.
+     */
+         'dap-ds-button-group-text': DefineCustomElement<DapDSButtonGroupText, DapDSButtonGroupTextProps, {}>
+    /**
+     * A container that groups related buttons with consistent, connected styling.
+     *
+     * ### Slots:
+     * - **default** - The grouped items: `dap-ds-button`, `dap-ds-icon-button`, `dap-ds-button-group-text`, `dap-ds-button-group-separator` or nested `dap-ds-button-group` elements.
+     */
+         'dap-ds-button-group': DefineCustomElement<DapDSButtonGroup, DapDSButtonGroupProps, {}>
+    /**
+     * 
      *
      * ### Events:
-     * - **dds-load** - Fired when the image loads successfully.
-     * - **dds-error** - Fired when the image fails to load.
+     * - **dds-close** - Fired when the close button is clicked.
      *
      * ### Slots:
-     * - **icon** - The icon to display when variant is 'icon'.
-     * - **fallback** - Custom fallback content when image fails to load.
+     * - **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 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 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.
+     * - **icon-base** - The base of the icon.
      */
-         'dap-ds-avatar': DefineCustomElement<DapDSAvatar, DapDSAvatarProps, DapDSAvatarEvents>
+         'dap-ds-callout': DefineCustomElement<DapDSCallout, DapDSCalloutProps, DapDSCalloutEvents>
     /**
      * A card actions is a container for actions in a card.
      *
@@ -5413,6 +5494,7 @@ declare module 'vue' {
      *
      * ### CSS Parts:
      * - **base** - The main card container.
+     * - **high-contrast** - The high contrast indicator of the card.
      */
          'dap-ds-card': DefineCustomElement<DapDSCard, DapDSCardProps, {}>
     /**
@@ -5433,7 +5515,13 @@ declare module 'vue' {
      * - **icon-base** - The base icon container.
      * - **label-container** - The label container of the checkbox.
      * - **description** - The description of the checkbox.
-     * - **readonly** - The readonly state of the checkbox.
+     * - **base-label** - The label element wrapping the control.
+     * - **wrapper** - The wrapper of the control and label.
+     * - **feedback** - The feedback of the checkbox.
+     * - **high-contrast** - The high contrast indicator of the checkbox.
+     * - **label-base** - The base of the label.
+     * - **label-required** - The required indicator of the label.
+     * - **label-optional** - The optional indicator of the label.
      */
          'dap-ds-checkbox': DefineCustomElement<DapDSCheckbox, DapDSCheckboxProps, DapDSCheckboxEvents>
     /**
@@ -5450,6 +5538,7 @@ declare module 'vue' {
      * - **remove-icon** - The icon of the remove icon
      * - **remove-icon-base** - The base of the remove icon
      * - **remove-icon-base-base** - The base of the remove icon base
+     * - **content** - The content slot of the chip.
      */
          'dap-ds-chip': DefineCustomElement<DapDSChip, DapDSChipProps, DapDSChipEvents>
     /**
@@ -5479,6 +5568,10 @@ declare module 'vue' {
      * - **label** - The label element.
      * - **description** - The description element.
      * - **feedback** - The feedback element.
+     * - **tooltip** - The tooltip of the code puncher.
+     * - **label-base** - The base of the label.
+     * - **label-required** - The required indicator of the label.
+     * - **label-optional** - The optional indicator of the label.
      */
          'dap-ds-code-puncher': DefineCustomElement<DapDSCodePuncher, DapDSCodePuncherProps, DapDSCodePuncherEvents>
     /**
@@ -5504,6 +5597,12 @@ declare module 'vue' {
      * - **tooltip** - The tooltip of the select.
      * - **option-list** - The option list of the select.
      * - **input** - The input of the select.
+     * - **chips** - The container of the selected chips.
+     * - **indicator-icon** - The dropdown indicator icon.
+     * - **search-button** - The search button.
+     * - **label-base** - The base of the label.
+     * - **label-required** - The required indicator of the label.
+     * - **label-optional** - The optional indicator of the label.
      */
          'dap-ds-combobox': DefineCustomElement<DapDSCombobox, DapDSComboboxProps, DapDSComboboxEvents>
     /**
@@ -5548,7 +5647,8 @@ declare module 'vue' {
      * - **default** - The command items.
      *
      * ### CSS Parts:
-     * - **popup** - The main popup container.
+     * - **popup-base** - The popup element of the command.
+     * - **popup** - The popup container of the command.
      * - **arrow** - The arrow of the popup.
      */
          'dap-ds-command': DefineCustomElement<DapDSCommand, DapDSCommandProps, DapDSCommandEvents>
@@ -5595,6 +5695,17 @@ declare module 'vue' {
      * - **copy-button-content** - The content of the copy button.
      * - **copy-icon** - The copy icon of the component.
      * - **copy-icon-base** - The base of the copy icon.
+     * - **input** - The input element.
+     * - **label** - The label of the input.
+     * - **description** - The description of the input.
+     * - **feedback** - The feedback of the input.
+     * - **tooltip** - The tooltip of the input.
+     * - **addon-before** - The addon before the input.
+     * - **addon-after** - The addon after the input.
+     * - **prefix** - The prefix of the input.
+     * - **label-base** - The base of the label.
+     * - **label-required** - The required indicator of the label.
+     * - **label-optional** - The optional indicator of the label.
      */
          'dap-ds-copybox-input': DefineCustomElement<DapDSCopyBoxInput, DapDSCopyBoxInputProps, DapDSCopyBoxInputEvents>
     /**
@@ -5641,6 +5752,23 @@ declare module 'vue' {
      * - **pager-next** - The next button of the pager.
      * - **pager-last** - The last button of the pager.
      * - **pager-page-size-select** - The page size select of the pager.
+     * - **content** - The content container of the table.
+     * - **page-size-select-base** - The base of the pager page size select.
+     * - **page-size-select-trigger** - The trigger of the pager page size select.
+     * - **pager-button-first-base** - The base of the pager first button.
+     * - **pager-button-first-content** - The content of the pager first button.
+     * - **pager-button-previous-base** - The base of the pager previous button.
+     * - **pager-button-previous-content** - The content of the pager previous button.
+     * - **pager-button-next-base** - The base of the pager next button.
+     * - **pager-button-next-content** - The content of the pager next button.
+     * - **pager-button-last-base** - The base of the pager last button.
+     * - **pager-button-last-content** - The content of the pager last button.
+     * - **pager-page-numbers** - The page numbers container of the pager.
+     * - **pager-page-number** - The page number buttons of the pager.
+     * - **pager-page-number-active** - The active page number button of the pager.
+     * - **pager-page-number-base** - The base of the pager page number buttons.
+     * - **pager-page-number-content** - The content of the pager page number buttons.
+     * - **pager-page-info** - The page info text of the pager.
      */
          'dap-ds-datatable': DefineGenericCustomElement<DapDSDataTable<any>, DapDSDataTableProps<any>, any, DapDSDataTableEvents<any>>
     /**
@@ -5670,6 +5798,14 @@ declare module 'vue' {
      * - **calendar-grid-header-cell-base** - The base of the calendar grid header cell.
      * - **calendar-grid-header-cell** - The header cell of the calendar grid.
      * - **calendar-grid-cell-today-mark** - The today mark of the calendar grid cell.
+     * - **calendar-button** - The calendar icon button of the datepicker.
+     * - **calendar-header-button-prev** - The previous month button of the calendar header.
+     * - **calendar-header-button-next** - The next month button of the calendar header.
+     * - **calendar-header-year-select** - The year select of the calendar header.
+     * - **calendar-header-month-select** - The month select of the calendar header.
+     * - **label-base** - The base of the label.
+     * - **label-required** - The required indicator of the label.
+     * - **label-optional** - The optional indicator of the label.
      */
          'dap-ds-datepicker': DefineCustomElement<DapDSDatePicker, DapDSDatePickerProps, DapDSDatePickerEvents>
     /**
@@ -5708,6 +5844,7 @@ declare module 'vue' {
      * - **spinner** - The spinner of the item component.
      * - **remove-button** - The remove button of the item component.
      * - **thumbnail** - The thumbnail of the item component.
+     * - **content** - The content of the list item.
      */
          'dap-ds-file-input-list-item': DefineCustomElement<DapDSFileInputListItem, DapDSFileInputListItemProps, DapDSFileInputListItemEvents>
     /**
@@ -5751,6 +5888,9 @@ declare module 'vue' {
      * - **browse-button** - The browse button.
      * - **upload-button** - The upload button.
      * - **dropzone** - The dropzone area.
+     * - **label-base** - The base of the label.
+     * - **label-required** - The required indicator of the label.
+     * - **label-optional** - The optional indicator of the label.
      */
          'dap-ds-file-input': DefineCustomElement<DapDSFileInput, DapDSFileInputProps, DapDSFileInputEvents>
     /**
@@ -5775,6 +5915,7 @@ declare module 'vue' {
      * - **content** - The icon of the button.
      * - **icon** - The icon of the icon.
      * - **icon-base** - The base of the icon.
+     * - **high-contrast** - The high contrast indicator of the button.
      */
          'dap-ds-icon-button': DefineCustomElement<DapDSIconButton, DapDSIconButtonProps, {}>
     /**
@@ -5881,6 +6022,8 @@ declare module 'vue' {
      * - **description-container** - The container of the description.
      * - **actions-container** - The container of the actions.
      * - **iteractive-indicator-container** - The container of the interactive indicator.
+     * - **card-base** - The base of the inner card content.
+     * - **actions** - The actions slot of the list item.
      */
          'dap-ds-list-item': DefineCustomElement<DapDSListItem, DapDSListItemProps, {}>
     /**
@@ -6002,6 +6145,13 @@ Uses semantic HTML (`<nav>`) and proper navigation ARIA attributes.
      * - **increment-button-base** - The base of the increment button.
      * - **decrement-button-content** - The content of the decrement button.
      * - **increment-button-content** - The content of the increment button.
+     * - **decrement-icon** - The icon of the decrement button.
+     * - **decrement-icon-base** - The base of the decrement icon.
+     * - **increment-icon** - The icon of the increment button.
+     * - **increment-icon-base** - The base of the increment icon.
+     * - **label-base** - The base of the label.
+     * - **label-required** - The required indicator of the label.
+     * - **label-optional** - The optional indicator of the label.
      */
          'dap-ds-number-input': DefineCustomElement<DapDSNumberInput, DapDSNumberInputProps, DapDSNumberInputEvents>
     /**
@@ -6028,6 +6178,7 @@ Uses semantic HTML (`<nav>`) and proper navigation ARIA attributes.
      * - **open-icon-base** - The base of the icon when the accordion is opened.
      * - **close-icon** - The icon when the accordion is closed.
      * - **close-icon-base** - The base of the icon when the accordion is closed.
+     * - **heading-text** - The text of the heading.
      */
          'dap-ds-official-website-banner': DefineCustomElement<DapDSOfficialWebsiteBanner, DapDSOfficialWebsiteBannerProps, DapDSOfficialWebsiteBannerEvents>
     /**
@@ -6055,6 +6206,7 @@ Used with dap-ds-select to create grouped options that render as native optgroup
      * - **prefix** - The prefix of the option item.
      * - **label** - The label of the option item.
      * - **suffix** - The suffix of the option item.
+     * - **high-contrast** - The high contrast indicator of the option item.
      */
          'dap-ds-option-item': DefineCustomElement<DapDSOptionItem, DapDSOptionItemProps, {}>
     /**
@@ -6062,7 +6214,7 @@ Used with dap-ds-select to create grouped options that render as native optgroup
      *
      * ### Events:
      * - **dds-cancel** - Fired when the escape key is pressed.
-     * - **dds-option-change** - Fired when the option list value changes.
+     * - **dds-option-change** - Fired when the option list value changes. `item` is set when the options come from `items`.
      * - **dds-keydown** - Fired when a key is pressed down.
      * - **dds-list-changed** - Fired when the available options list changes.
      *
@@ -6138,18 +6290,25 @@ Used with dap-ds-select to create grouped options that render as native optgroup
      *
      * ### CSS Parts:
      * - **postfix** - The postfix of the password input.
-     * - **password-input** - The password input.
-     * - **password-input--visible** - The visible password input.
      * - **show-button** - The show button of the password input.
      * - **show-button-base** - The base of the show button.
      * - **show-button-content** - The content of the show button.
      * - **show-icon** - The show icon of the password input.
      * - **show-icon-base** - The base of the show icon.
-     * - **hide-button** - The hide button of the password input.
-     * - **hide-button-base** - The base of the hide button.
-     * - **hide-button-content** - The content of the hide button.
      * - **hide-icon** - The hide icon of the password input.
      * - **hide-icon-base** - The base of the hide icon.
+     * - **base** - The main input container.
+     * - **input** - The input element.
+     * - **label** - The label of the input.
+     * - **description** - The description of the input.
+     * - **feedback** - The feedback of the input.
+     * - **tooltip** - The tooltip of the input.
+     * - **addon-before** - The addon before the input.
+     * - **addon-after** - The addon after the input.
+     * - **prefix** - The prefix of the input.
+     * - **label-base** - The base of the label.
+     * - **label-required** - The required indicator of the label.
+     * - **label-optional** - The optional indicator of the label.
      */
          'dap-ds-password-input': DefineCustomElement<DapDSPasswordInput, DapDSPasswordInputProps, DapDSPasswordInputEvents>
     /**
@@ -6169,21 +6328,6 @@ Used with dap-ds-select to create grouped options that render as native optgroup
      * - **arrow** - The arrow of the popup.
      */
          'dap-ds-popup': DefineCustomElement<DapDSPopup, DapDSPopupProps, DapDSPopupEvents>
-    /**
-     * Progress indicator component with linear and circular variants.
-     *
-     * ### Slots:
-     * - **label** - Custom label content for the progress indicator.
-     *
-     * ### CSS Parts:
-     * - **base** - The main progress container.
-     * - **track** - The progress track (background).
-     * - **fill** - The progress fill (bar for linear, circle for circular).
-     * - **label** - The progress label text.
-     * - **percentage** - The percentage text (circular variant only).
-     * - **background** - The background circle (circular variant only).
-     */
-         'dap-ds-progress': DefineCustomElement<DapDSProgress, DapDSProgressProps, {}>
     /**
      * A radio button is a graphical control element that allows the user to choose only one of a predefined set of mutually exclusive options.
      *
@@ -6202,8 +6346,28 @@ Used with dap-ds-select to create grouped options that render as native optgroup
      * - **control** - The control of the radio button.
      * - **label-container** - The label container of the radio button.
      * - **description** - The description of the radio button.
+     * - **feedback** - The feedback of the radio button.
+     * - **high-contrast** - The high contrast indicator of the radio button.
+     * - **label-base** - The base of the label.
+     * - **label-required** - The required indicator of the label.
+     * - **label-optional** - The optional indicator of the label.
      */
          'dap-ds-radio-button': DefineCustomElement<DapDSRadioButton, DapDSRadioButtonProps, DapDSRadioButtonEvents>
+    /**
+     * Progress indicator component with linear and circular variants.
+     *
+     * ### Slots:
+     * - **label** - Custom label content for the progress indicator.
+     *
+     * ### CSS Parts:
+     * - **base** - The main progress container.
+     * - **track** - The progress track (background).
+     * - **fill** - The progress fill (bar for linear, circle for circular).
+     * - **label** - The progress label text.
+     * - **percentage** - The percentage text (circular variant only).
+     * - **background** - The background circle (circular variant only).
+     */
+         'dap-ds-progress': DefineCustomElement<DapDSProgress, DapDSProgressProps, {}>
     /**
      * Rating is a component that allows users to rate a product or service.
      *
@@ -6226,7 +6390,8 @@ Used with dap-ds-select to create grouped options that render as native optgroup
      * ### CSS Parts:
      * - **viewport** - The viewport element that contains the scrollable content
      * - **scrollbar** - The scrollbar container
-     * - **corner** - The corner between vertical and horizontal scrollbars
+     * - **base** - The main scroll area container.
+     * - **thumb** - The thumb of the scrollbar.
      */
          'dap-ds-scroll-area': DefineCustomElement<DapDSScrollArea, DapDSScrollAreaProps, {}>
     /**
@@ -6262,6 +6427,11 @@ Used with dap-ds-select to create grouped options that render as native optgroup
      * - **tooltip** - The tooltip of the search.
      * - **option-list** - The option list of the search.
      * - **input** - The input of the search.
+     * - **chips** - The container of the selected chips.
+     * - **indicator-icon** - The dropdown indicator icon.
+     * - **label-base** - The base of the label.
+     * - **label-required** - The required indicator of the label.
+     * - **label-optional** - The optional indicator of the label.
      */
          'dap-ds-search': DefineCustomElement<DapDSSearch, DapDSSearchProps, DapDSSearchEvents>
     /**
@@ -6298,6 +6468,11 @@ Used with dap-ds-select to create grouped options that render as native optgroup
      * - **mobile-body** - The mobile body of the select.
      * - **mobile-header** - The mobile header of the select.
      * - **mobile-footer** - The mobile footer of the select.
+     * - **native-button** - The button of the customizable native select (experimental `customizable` mode).
+     * - **native-option** - The options of the customizable native select (experimental `customizable` mode).
+     * - **label-base** - The base of the label.
+     * - **label-required** - The required indicator of the label.
+     * - **label-optional** - The optional indicator of the label.
      */
          'dap-ds-select': DefineCustomElement<DapDSSelect, DapDSSelectProps, DapDSSelectEvents>
     /**
@@ -6314,6 +6489,7 @@ Used with dap-ds-select to create grouped options that render as native optgroup
      * - **link** - The link of the side navigation group.
      * - **toggle** - The toggle button of the side navigation group.
      * - **submenu** - The submenu of the side navigation group.
+     * - **icon** - The toggle icon of the side navigation group.
      */
          'dap-ds-sidenav-group': DefineCustomElement<DapDSSideNavGroup, DapDSSideNavGroupProps, {}>
     /**
@@ -6374,14 +6550,15 @@ Used with dap-ds-select to create grouped options that render as native optgroup
      * - **base** - Main snackbar container.
      * - **text** - The text part of the snackbar.
      * - **closebutton** - The close button part of the component.
-     * - **icon** - The icon part of the close button.
+     * - **close-icon** - The icon of the close button.
+     * - **actions** - The actions container of the snackbar.
+     * - **actions-base** - The base of the actions container.
      */
          'dap-ds-snackbar-message': DefineCustomElement<DapDSSnackbarMessage, DapDSSnackbarMessageProps, DapDSSnackbarMessageEvents>
     /**
      * The Snackbar is a container of sliding messages.
      *
      * ### CSS Parts:
-     * - **host** - The host element
      * - **message** - The message part of the snackbar
      * - **message-base** - The base part of the message
      * - **message-text** - The text part of the message
@@ -6412,7 +6589,8 @@ Used with dap-ds-select to create grouped options that render as native optgroup
      * - **default** - The content of the stack.
      *
      * ### CSS Parts:
-     * - **stack** - The main stack container.
+     * - **stack** - Alias of the base part.
+     * - **base** - The main stack container.
      */
          'dap-ds-stack': DefineCustomElement<DapDSStack, DapDSStackProps, {}>
     /**
@@ -6431,6 +6609,12 @@ Used with dap-ds-select to create grouped options that render as native optgroup
      * - **input** - The native input of the switch.
      * - **control** - The control of the switch.
      * - **description** - The description of the switch.
+     * - **label-container** - The label container of the switch.
+     * - **feedback** - The feedback of the switch.
+     * - **high-contrast** - The high contrast indicator of the switch.
+     * - **label-base** - The base of the label.
+     * - **label-required** - The required indicator of the label.
+     * - **label-optional** - The optional indicator of the label.
      */
          'dap-ds-switch': DefineCustomElement<DapDSSwitch, DapDSSwitchProps, DapDSSwitchEvents>
     /**
@@ -6444,8 +6628,10 @@ Used with dap-ds-select to create grouped options that render as native optgroup
      *
      * ### CSS Parts:
      * - **base** - The main container.
-     * - **tab-nav** - The tab navigation container.
-     * - **tab-content** - The tab content container.
+     * - **tab-list** - The tab list container (role="tablist") holding the tab buttons.
+     * - **tab-nav** - The individual tab buttons.
+     * - **high-contrast** - The high contrast indicator inside the tab buttons.
+     * - **tab-group-content** - The tab content container.
      */
          'dap-ds-tab-group': DefineCustomElement<DapDSTabGroup, DapDSTabGroupProps, DapDSTabGroupEvents>
     /**
@@ -6464,9 +6650,6 @@ Used with dap-ds-select to create grouped options that render as native optgroup
      *
      * ### Slots:
      * - **default** - The default slot.
-     *
-     * ### CSS Parts:
-     * - **base** - The main cell container.
      */
          'dap-ds-table-cell': DefineCustomElement<DapDSTableCell, DapDSTableCellProps, {}>
     /**
@@ -6491,6 +6674,9 @@ Used with dap-ds-select to create grouped options that render as native optgroup
      *
      * ### Slots:
      * - **default** - The default slot. Accepts `dap-ds-table-row` elements.
+     *
+     * ### CSS Parts:
+     * - **caption** - The caption of the table.
      */
          'dap-ds-table': DefineCustomElement<DapDSTable, DapDSTableProps, {}>
     /**
@@ -6517,6 +6703,8 @@ Used with dap-ds-select to create grouped options that render as native optgroup
      * - **feedback-base** - The base of the feedback.
      * - **feedback-text** - The text of the feedback.
      * - **feedback-icon** - The icon of the feedback.
+     * - **footer** - The footer of the textarea holding the feedback and counter.
+     * - **counter-container** - The container of the counter.
      */
          'dap-ds-textarea': DefineCustomElement<DapDSTextarea, DapDSTextareaProps, DapDSTextareaEvents>
     /**
@@ -6559,6 +6747,9 @@ Used with dap-ds-select to create grouped options that render as native optgroup
      * - **section-header-title** - The title of the section header.
      * - **section-header-divider** - The divider between the section header and the time buttons.
      * - **time-column** - The time column container.
+     * - **presets-section** - The presets section.
+     * - **preset-button** - Individual preset buttons.
+     * - **second-section** - The second selection section.
      */
          'dap-ds-time-grid': DefineCustomElement<DapDSTimeGrid, DapDSTimeGridProps, DapDSTimeGridEvents>
     /**
@@ -6582,6 +6773,11 @@ Used with dap-ds-select to create grouped options that render as native optgroup
      * - **tooltip** - The tooltip of the timepicker.
      * - **input** - The input of the timepicker.
      * - **clear-button** - The clear button of the timepicker.
+     * - **time-button** - The clock icon button of the timepicker.
+     * - **time-grid** - The time grid of the timepicker.
+     * - **label-base** - The base of the label.
+     * - **label-required** - The required indicator of the label.
+     * - **label-optional** - The optional indicator of the label.
      */
          'dap-ds-timepicker': DefineCustomElement<DapDSTimePicker, DapDSTimePickerProps, DapDSTimePickerEvents>
     /**
@@ -6592,6 +6788,8 @@ Used with dap-ds-select to create grouped options that render as native optgroup
      *
      * ### CSS Parts:
      * - **base** - The main container of the toc.
+     * - **title** - The title of the toc.
+     * - **nav** - The navigation element holding the links.
      */
          'dap-ds-toc': DefineCustomElement<DapDSTOC, DapDSTOCProps, DapDSTOCEvents>
     /**
@@ -6617,6 +6815,8 @@ Used with dap-ds-select to create grouped options that render as native optgroup
      * - **trigger** - The trigger element of the tooltip.
      * - **popup** - The popup of the tooltip.
      * - **arrow** - The arrow of the tooltip.
+     * - **base__popup** - Alias of the popup part.
+     * - **base__arrow** - Alias of the arrow part.
      */
          'dap-ds-tooltip': DefineCustomElement<DapDSTooltip, DapDSTooltipProps, {}>
     /**
@@ -6640,7 +6840,10 @@ Used with dap-ds-select to create grouped options that render as native optgroup
      * - **header** - The header of the tray.
      * - **footer** - The footer of the tray.
      * - **content** - The content of the tray.
-     * - **body** - The body of the tray.
+     * - **header-container** - The container of the header.
+     * - **title** - The title of the tray.
+     * - **description** - The description of the tray.
+     * - **closebutton** - The close button of the tray.
      */
          'dap-ds-tray': DefineCustomElement<DapDSTray, DapDSTrayProps, DapDSTrayEvents>
     /**
@@ -6657,9 +6860,9 @@ Used with dap-ds-select to create grouped options that render as native optgroup
      * A form label is a container for labels in a form.
      *
      * ### CSS Parts:
-     * - **base** - The main form label container.
      * - **required** - The required indicator of the form label.
      * - **optional** - The optional indicator of the form label.
+     * - **label-base** - The label element.
      */
          'dap-ds-form-label': DefineCustomElement<DapDSFormLabel, DapDSFormLabelProps, {}>
     /**
@@ -6675,6 +6878,10 @@ Used with dap-ds-select to create grouped options that render as native optgroup
      * - **description** - The description of the input group.
      * - **tooltip** - The tooltip of the input group.
      * - **container** - The container of the input group items.
+     * - **feedback** - The feedback of the input group.
+     * - **label-base** - The base of the label.
+     * - **label-required** - The required indicator of the label.
+     * - **label-optional** - The optional indicator of the label.
      */
          'dap-ds-input-group': DefineCustomElement<DapDSInputGroup, DapDSInputGroupProps, {}>
     /**
@@ -6694,6 +6901,11 @@ Used with dap-ds-select to create grouped options that render as native optgroup
      * - **label** - The label of the radio group.
      * - **tooltip** - The tooltip of the radio group.
      * - **container** - The container of the radio group items.
+     * - **description** - The description of the radio group.
+     * - **feedback** - The feedback of the radio group.
+     * - **label-base** - The base of the label.
+     * - **label-required** - The required indicator of the label.
+     * - **label-optional** - The optional indicator of the label.
      */
          'dap-ds-radio-group': DefineCustomElement<DapDSRadioGroup, DapDSRadioGroupProps, DapDSRadioGroupEvents>
     /**
@@ -6835,28 +7047,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-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-edit-line': DefineCustomElement<DesignEditLine, DesignEditLineProps, {}>
     /**
      * An icon
      *
      * ### CSS Parts:
      * - **base** - The main icon container.
      */
-         'dap-ds-icon-edit-line': DefineCustomElement<DesignEditLine, DesignEditLineProps, {}>
+         'dap-ds-icon-tools-line': DefineCustomElement<DesignToolsLine, DesignToolsLineProps, {}>
     /**
      * An icon
      *
      * ### CSS Parts:
      * - **base** - The main icon container.
      */
-         'dap-ds-icon-tools-line': DefineCustomElement<DesignToolsLine, DesignToolsLineProps, {}>
+         'dap-ds-icon-home-6-line': DefineCustomElement<BuildingsHome6Line, BuildingsHome6LineProps, {}>
     /**
      * An icon
      *
@@ -7178,14 +7390,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-lock-fill': DefineCustomElement<SystemLockFill, SystemLockFillProps, {}>
+         'dap-ds-icon-lock-line': DefineCustomElement<SystemLockLine, SystemLockLineProps, {}>
     /**
      * An icon
      *
      * ### CSS Parts:
      * - **base** - The main icon container.
      */
-         'dap-ds-icon-lock-line': DefineCustomElement<SystemLockLine, SystemLockLineProps, {}>
+         'dap-ds-icon-lock-fill': DefineCustomElement<SystemLockFill, SystemLockFillProps, {}>
     /**
      * An icon
      *
@@ -7319,19 +7531,22 @@ Used with dap-ds-select to create grouped options that render as native optgroup
 declare global {
   namespace JSX {
     interface IntrinsicElements {
-      'dap-ds-accordion-group': DapDSAccordionGroupProps & DapDSAccordionGroupSlots
       'dap-ds-accordion': DapDSAccordionProps & DapDSAccordionEvents & DapDSAccordionSlots
       'dap-ds-anchor-heading': DapDSAnchorHeadingProps
-      'dap-ds-avatar-group': DapDSAvatarGroupProps & DapDSAvatarGroupEvents & DapDSAvatarGroupSlots
+      'dap-ds-badge': DapDSBadgeProps & DapDSBadgeSlots
+      'dap-ds-avatar': DapDSAvatarProps & DapDSAvatarEvents & DapDSAvatarSlots
+      'dap-ds-accordion-group': DapDSAccordionGroupProps & DapDSAccordionGroupSlots
       'dap-ds-banner': DapDSBannerProps & DapDSBannerEvents & DapDSBannerSlots
       'dap-ds-breadcrumb': DapDSBreadcrumbProps & DapDSBreadcrumbSlots
+      'dap-ds-avatar-group': DapDSAvatarGroupProps & DapDSAvatarGroupEvents & DapDSAvatarGroupSlots
       'dap-ds-breadcrumb-item': DapDSBreadcrumbItemProps & DapDSBreadcrumbItemSlots
-      'dap-ds-badge': DapDSBadgeProps & DapDSBadgeSlots
       '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-avatar': DapDSAvatarProps & DapDSAvatarEvents & DapDSAvatarSlots
+      'dap-ds-button-group-separator': DapDSButtonGroupSeparatorProps
+      'dap-ds-button-group-text': DapDSButtonGroupTextProps & DapDSButtonGroupTextSlots
+      'dap-ds-button-group': DapDSButtonGroupProps & DapDSButtonGroupSlots
+      'dap-ds-callout': DapDSCalloutProps & DapDSCalloutEvents & DapDSCalloutSlots
       'dap-ds-card-actions': DapDSCardActionsProps & DapDSCardActionsSlots
       'dap-ds-card-content': DapDSCardContentProps & DapDSCardContentSlots
       'dap-ds-card-image': DapDSCardImageProps & DapDSCardImageSlots
@@ -7377,8 +7592,8 @@ declare global {
       'dap-ds-pager': DapDSPagerProps & DapDSPagerEvents
       'dap-ds-password-input': DapDSPasswordInputProps & DapDSPasswordInputEvents
       'dap-ds-popup': DapDSPopupProps & DapDSPopupEvents & DapDSPopupSlots
-      'dap-ds-progress': DapDSProgressProps & DapDSProgressSlots
       'dap-ds-radio-button': DapDSRadioButtonProps & DapDSRadioButtonEvents
+      'dap-ds-progress': DapDSProgressProps & DapDSProgressSlots
       'dap-ds-rating': DapDSRatingProps & DapDSRatingEvents
       'dap-ds-scroll-area': DapDSScrollAreaProps & DapDSScrollAreaSlots
       'dap-ds-scroll-progress': DapDSScrollProgressProps
@@ -7432,10 +7647,10 @@ 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-edit-line': DesignEditLineProps
       'dap-ds-icon-tools-line': DesignToolsLineProps
+      'dap-ds-icon-home-6-line': BuildingsHome6LineProps
       'dap-ds-icon-computer-line': DeviceComputerLineProps
       'dap-ds-icon-clipboard-line': DocumentClipboardLineProps
       'dap-ds-icon-file-copy-line': DocumentFileCopyLineProps
@@ -7481,8 +7696,8 @@ declare global {
       'dap-ds-icon-information-line': SystemInformationLineProps
       'dap-ds-icon-lightbulb-fill': SystemLightbulbFillProps
       'dap-ds-icon-loading-spinner': SystemLoadingSpinnerProps
-      'dap-ds-icon-lock-fill': SystemLockFillProps
       'dap-ds-icon-lock-line': SystemLockLineProps
+      'dap-ds-icon-lock-fill': SystemLockFillProps
       'dap-ds-icon-menu-line': SystemMenuLineProps
       'dap-ds-icon-menu-line-s': SystemMenuLineSProps
       'dap-ds-icon-more-2-line': SystemMore2LineProps