dap-design-system

import type { HTMLAttributes } from 'vue' import type { Dayjs } from 'dayjs' import type { AccordionBaseElement, ArrowsArrowDownLine, ArrowsArrowDownSFill, ArrowsArrowDownSLine, ArrowsArrowLeftDownLine, ArrowsArrowLeftLLine, ArrowsArrowLeftLine, ArrowsArrowLeftSFill, ArrowsArrowLeftSLine, ArrowsArrowLeftUpLine, ArrowsArrowRightDownLine, ArrowsArrowRightLLine, ArrowsArrowRightLine, ArrowsArrowRightSFill, ArrowsArrowRightSLine, ArrowsArrowRightUpLine, ArrowsArrowUpLine, ArrowsArrowUpSFill, ArrowsArrowUpSLine, ArrowsExpandUpDownFill, BuildingsHome6Line, BusinessCalendarLine, DapDSAccordion, DapDSAccordionGroup, DapDSAnchorHeading, DapDSAvatar, DapDSAvatarGroup, DapDSBadge, DapDSBanner, DapDSBreadcrumb, DapDSBreadcrumbItem, DapDSButton, DapDSCalendar, DapDSCalendarCell, DapDSCallout, DapDSCard, DapDSCardActions, DapDSCardContent, DapDSCardImage, DapDSCardSubtitle, DapDSCardTitle, DapDSCheckbox, DapDSChip, DapDSCodePuncher, DapDSCodePuncherSlot, DapDSCombobox, DapDSCommand, DapDSCommandGroup, DapDSCommandItem, DapDSContentSwitcher, DapDSContentSwitcherItem, DapDSCopyBoxInput, DapDSDAPBadge, DapDSDataTable, DapDSDatePicker, DapDSDivider, DapDSFeedback, DapDSFileInput, DapDSFileInputList, DapDSFileInputListItem, DapDSFormLabel, DapDSIcon, DapDSIconButton, DapDSImageZoom, DapDSInput, DapDSInputGroup, DapDSLabel, DapDSLink, DapDSListItem, DapDSModal, DapDSNavigationMenu, DapDSNavigationMenuItem, DapDSNotificationBadge, DapDSNumberInput, DapDSOfficialWebsiteBanner, DapDSOptionGroup, DapDSOptionItem, DapDSOptionList, DapDSOverlay, DapDSPager, DapDSPasswordInput, DapDSPopup, DapDSProgress, DapDSRadioButton, DapDSRadioGroup, DapDSRating, DapDSScrollArea, DapDSScrollProgress, DapDSSearch, DapDSSelect, DapDSSideNav, DapDSSideNavGroup, DapDSSideNavItem, DapDSSkeleton, DapDSSkipLink, DapDSSnackbar, DapDSSnackbarMessage, DapDSSpinner, DapDSStack, DapDSSwitch, DapDSTOC, DapDSTab, DapDSTabGroup, DapDSTable, DapDSTableCell, DapDSTableHeader, DapDSTableRow, DapDSTextarea, DapDSTimeGrid, DapDSTimePicker, DapDSTimeline, DapDSTimelineItem, DapDSToggleButton, DapDSTooltip, DapDSTray, DapDSTypography, DesignEditLine, DesignToolsLine, DeviceComputerLine, DocumentClipboardLine, DocumentFileCopyLine, DocumentFileImageLine, DocumentFileMusicLine, DocumentFileTextLine, DocumentFileVideoLine, DocumentFolderLine, DocumentFolderOpenLine, EditorSeparator, ExtendedColumnDef, FileListElement, HealthHeartFill, HealthHeartLine, OthersCookieLine, PaginationState, RowSelectionState, SortingState, SystemAddLine, SystemAlertFill, SystemAlertLine, SystemCheckLine, SystemCheckLine2, SystemCheckboxBlankCircleFill, SystemCheckboxBlankCircleFillCheck, SystemCheckboxBlankCircleLine, SystemCheckboxCircleFill, SystemCheckboxCircleLine, SystemCloseCircleFill, SystemCloseCircleLine, SystemCloseFill, SystemCloseLine, SystemDeleteBinFill, SystemDeleteBinLine, SystemDownloadLine, SystemErrorWarningFill, SystemErrorWarningLine, SystemExternalLinkLine, SystemEyeLine, SystemEyeOffLine, SystemForbidFill, SystemInformation2Fill, SystemInformationFill, SystemInformationLine, SystemLightbulbFill, SystemLoadingSpinner, SystemLockFill, SystemLockLine, SystemMenuLine, SystemMenuLineS, SystemMore2Line, SystemMoreLine, SystemSearchLine, SystemShareLine, SystemShieldCheckFill, SystemShieldCheckLine, SystemStarFill, SystemSubtractLine, SystemSubtractLine2, SystemTimeFill, SystemTimeLine, SystemUpload2Fill, SystemUpload2Line, SystemUploadLine, SystemZoomInLine, SystemZoomOutLine, UserAccountCircleFill, UserAccountCircleLine, UserUserFill, UserUserLine } from '../../../dds.d.ts' type DefineCustomElement< ElementType extends HTMLElement, Props extends Record<string, any> = {}, Events extends Record<string, any> = {} > = new () => ElementType & { $props: Partial<Omit<HTMLAttributes, keyof ElementType>> & Partial<Omit<ElementType, keyof Props>> & Props & Events } // Generic type helper for components with type parameters type DefineGenericCustomElement< ElementType extends HTMLElement, Props extends Record<string, any> = {}, TypeParams extends readonly any[] = [], Events extends Record<string, any> = {} > = new () => ElementType & { $props: Partial<Omit<HTMLAttributes, keyof ElementType>> & Partial<Omit<ElementType, keyof Props>> & Props & Events } export interface DapDSAccordionEvents { /** Event fired when the accordion is opened. */ onDdsOpened?: (event: CustomEvent<{ open: boolean, item: AccordionBaseElement }>) => void /** Event fired when the accordion is closed. */ onDdsClosed?: (event: CustomEvent<{ open: boolean, item: AccordionBaseElement }>) => void } export interface DapDSAvatarEvents { /** Fired when the image loads successfully. */ onDdsLoad?: (event: CustomEvent) => void /** Fired when the image fails to load. */ onDdsError?: (event: CustomEvent) => void } export interface DapDSAvatarGroupEvents { /** Fired when the overflow indicator is clicked. */ onDdsOverflowClick?: (event: CustomEvent) => void } export interface DapDSBannerEvents { /** Event fired when the banner is closed. */ onDdsClose?: (event: CustomEvent) => void } export interface DapDSButtonEvents { /** Emitted when the loading timeout is reached */ onDdsLoadingTimeout?: (event: CustomEvent) => void } export interface DapDSCalendarEvents { /** Fired when the calendar value changes. */ onDdsChange?: (event: CustomEvent<{ value: Dayjs }>) => void } export interface DapDSCalloutEvents { /** Fired when the close button is clicked. */ onDdsClose?: (event: CustomEvent) => void } export interface DapDSCheckboxEvents { /** Fired when the checkbox is checked or unchecked. */ onDdsChange?: (event: CustomEvent<{ checked: boolean, indeterminate: boolean, value: string, disabled: boolean, readonly: boolean, type: 'checkbox' }>) => void /** Emitted when the checkbox loses focus. */ onDdsBlur?: (event: CustomEvent) => void /** Emitted when the checkbox gains focus. */ onDdsFocus?: (event: CustomEvent) => void /** Emitted when the checkbox receives input. */ onDdsInput?: (event: CustomEvent<{ checked: boolean, indeterminate: boolean, value: string, disabled: boolean, readonly: boolean }>) => void } export interface DapDSChipEvents { /** Fired when the chip is removed */ onDdsRemove?: (event: CustomEvent<{ value: string }>) => void /** Fired when the chip is selected */ onDdsSelect?: (event: CustomEvent<{ value?: string, selected: boolean }>) => void } export interface DapDSCodePuncherEvents { /** Fires on each digit input. */ onDdsInput?: (event: CustomEvent<{ value: string, index: number }>) => void /** Fires when value changes. */ onDdsChange?: (event: CustomEvent<{ value: string }>) => void /** Fires when all slots are filled. */ onDdsComplete?: (event: CustomEvent<{ value: string }>) => void /** Fires when component gains focus. */ onDdsFocus?: (event: CustomEvent) => void /** Fires when component loses focus. */ onDdsBlur?: (event: CustomEvent) => void } export interface DapDSComboboxEvents { /** Fired when the select value changes. */ onDdsChange?: (event: CustomEvent<{ value }>) => void /** Emitted when the select loses focus. */ onDdsBlur?: (event: CustomEvent) => void /** Emitted when the select gains focus. */ onDdsFocus?: (event: CustomEvent) => void /** Emitted when the select is cleared. */ onDdsClear?: (event: CustomEvent) => void /** Emitted when the manual input value changes. */ onDdsSearch?: (event: CustomEvent<{ search: string }>) => void /** Emitted when typing happens in the input. */ onDdsInput?: (event: CustomEvent<{ input: string, originalEvent: Event }>) => void } export interface DapDSCommandItemEvents { /** Fired when the command item is clicked. */ onDdsCommandItemClick?: (event: CustomEvent<{ value: string, closeOnSelect: boolean }>) => void } export interface DapDSCommandEvents { /** Fired when the command value changes. */ onDdsChange?: (event: CustomEvent<{ value: string }>) => void /** Fired when the popup is opened. */ onDdsOpened?: (event: CustomEvent) => void /** Fired when the popup is closed. */ onDdsClosed?: (event: CustomEvent) => void /** Fired when the popup should be closed. */ onDdsClose?: (event: CustomEvent) => void } export interface DapDSContentSwitcherEvents { /** Fired when the content switcher is changed. */ onDdsChange?: (event: CustomEvent<{ value: string, selected: boolean }>) => void } export interface DapDSCopyBoxInputEvents { /** Fired when the user clicks on the copy button. */ onDdsCopy?: (event: CustomEvent<{ value: string }>) => void /** Fired when the input value changes. */ onDdsChange?: (event: CustomEvent<{ value: string }>) => void /** Fired when the input value changes. */ onDdsInput?: (event: CustomEvent<{ value: string }>) => void /** Fired when a key is pressed down. */ onDdsKeydown?: (event: CustomEvent<{ value: string, originalEvent: Event }>) => void /** Fired when the input loses focus. */ onDdsBlur?: (event: CustomEvent) => void /** Emitted when the input gains focus. */ onDdsFocus?: (event: CustomEvent) => void /** Emitted when the value cannot be copied. */ onDdsNotAllowed?: (event: CustomEvent) => void } export interface DapDSDataTableEvents<T> { /** Fired when the sorting of the table changes. */ onDdsSortingChange?: (event: CustomEvent<{ sorting: SortingState }>) => void /** Fired when the selection of the table changes. */ onDdsSelectionChange?: (event: CustomEvent<{ selection: RowSelectionState }>) => void /** Fired when the pagination of the table changes. */ onDdsPaginationChange?: (event: CustomEvent<{ pagination: PaginationState }>) => void /** Fired when a row is clicked. */ onDdsRowClick?: (event: CustomEvent<{ row: Row<T> }>) => void } export interface DapDSDatePickerEvents { /** Fired when the datepicker value changes. */ onDdsChange?: (event: CustomEvent<{ value: string }>) => void /** Fired when the datepicker input value changes. */ onDdsInput?: (event: CustomEvent<{ value: string }>) => void /** Fired when the datepicker input value is valid. Happens on manual input typing. */ onDdsValidDate?: (event: CustomEvent<{ value: string }>) => void /** Fired when the datepicker input value is invalid. Happens on manual input typing. */ onDdsInvalidDate?: (event: CustomEvent<{ value: string, type: 'invalid' | 'out-of-range' }>) => void /** Fired when the datepicker is cleared. */ onDdsClear?: (event: CustomEvent) => void /** Emitted when the datepicker gains focus. */ onDdsFocus?: (event: CustomEvent) => void /** Emitted when the datepicker loses focus. */ onDdsBlur?: (event: CustomEvent) => void } export interface DapDSFileInputListItemEvents { /** Dispatched when a file is removed from the list. */ onDdsFileRemove?: (event: CustomEvent<{ file: FileListElement }>) => void /** Dispatched when a file is clicked. */ onDdsFileClick?: (event: CustomEvent<{ file: FileListElement }>) => void } export interface DapDSFileInputListEvents { /** Dispatched when a file is clicked. */ onDdsFileClick?: (event: CustomEvent<{ file: FileListElement }>) => void } export interface DapDSFileInputEvents { /** Fired when a file upload starts. */ onDdsUploadStart?: (event: CustomEvent<{ file: File }>) => void /** Fired during file upload progress. */ onDdsUploadProgress?: (event: CustomEvent<{ file: File, progress: number }>) => void /** Fired when a file upload completes successfully. */ onDdsUploadComplete?: (event: CustomEvent<{ file: File, item: DapDSFileInputListItem, result: any }>) => void /** Fired when a file upload encounters an error. Always contains an errors array, even if there is only one error. */ onDdsUploadError?: (event: CustomEvent<{ file?: File, errors: FileError[], item?: DapDSFileInputListItem }>) => void /** Fired when all file uploads are complete. */ onDdsAllUploadsComplete?: (event: CustomEvent) => void /** Fired when a file is removed from the file input. */ onDdsFileRemoved?: (event: CustomEvent<{ file: FileListElement }>) => void /** Fired when a file deletion from server encounters an error. */ onDdsFileDeleteError?: (event: CustomEvent<{ file: FileListElement, error: Error }>) => void /** Fired when the file input value changes. This event is cancelable. Event detail contains: `newFiles` (just the files being added in this operation), `currentFiles` (all files that were already selected before this operation), `files` (all files after merge with existing when keepValue=true), and `canceledFiles` (Set to add files you want to reject). You can either: (1) Call `event.preventDefault()` to reject all files, or (2) Add specific files to `canceledFiles` to reject only those files. */ onDdsFileChange?: (event: CustomEvent<{ newFiles: File[], files: File[], canceledFiles: Set<File>, currentFiles: File[] }>) => void /** Fired when the file input value changes. This event is cancelable. Event detail contains: `files` (all files after merge with existing when keepValue=true). */ onDdsFilesAccepted?: (event: CustomEvent<{ files: File[] }>) => void } export interface DapDSImageZoomEvents { /** Fires when the image is about to zoom. Cancelable via event.preventDefault(). */ onDdsZoom?: (event: CustomEvent<CustomEvent>) => void /** Fires after the image has unzoomed. */ onDdsUnzoom?: (event: CustomEvent<CustomEvent>) => void } export interface DapDSInputEvents { /** Fired when the input value changes. */ onDdsChange?: (event: CustomEvent<{ value: string }>) => void /** Fired when the input value changes. */ onDdsInput?: (event: CustomEvent<{ value: string }>) => void /** Fired when a key is pressed down. */ onDdsKeydown?: (event: CustomEvent<{ value: string, originalEvent: Event }>) => void /** Fired when the input loses focus. */ onDdsBlur?: (event: CustomEvent) => void /** Emitted when the input gains focus. */ onDdsFocus?: (event: CustomEvent) => void } export interface DapDSLinkEvents { /** Emitted when the link is clicked. */ onDdsClick?: (event: CustomEvent<{ event: Event }>) => void } export interface DapDSModalEvents { /** Fires before the modal opens. */ onDdsBeforeOpen?: (event: CustomEvent) => void /** Fires after the modal opens. */ onDdsOpened?: (event: CustomEvent) => void /** Fires before the modal closes. */ onDdsBeforeClose?: (event: CustomEvent) => void /** Fires after the modal closed. */ onDdsClosed?: (event: CustomEvent) => void /** Fires when the modal is closes. You can prevent the modal from closing by calling `event.preventDefault()`. */ onDdsClose?: (event: CustomEvent) => void /** Fires when the OK button is clicked. You can prevent the modal from closing by calling `event.preventDefault()`. */ onDdsOk?: (event: CustomEvent) => void /** Fires when the Cancel button is clicked. You can prevent the modal from closing by calling `event.preventDefault()`. */ onDdsCancel?: (event: CustomEvent) => void } export interface DapDSNavigationMenuItemEvents { /** Fired when a navigation item is clicked. */ onDdsNavigationItemClick?: (event: CustomEvent<{ href: string, event: Event }>) => void /** Fired when a navigation dropdown is opened. */ onDdsNavigationDropdownOpen?: (event: CustomEvent<{ item: DapDSNavigationMenuItem }>) => void } export interface DapDSNavigationMenuEvents { /** Fired when a navigation item is clicked. */ onDdsNavigationItemClick?: (event: CustomEvent<{ href: string, event: Event }>) => void } export interface DapDSNumberInputEvents { /** Fired when the input value changes. */ onDdsChange?: (event: CustomEvent<{ value: string }>) => void /** Fired when the input value changes. */ onDdsInput?: (event: CustomEvent<{ value: string }>) => void /** Fired when a key is pressed down. */ onDdsKeydown?: (event: CustomEvent<{ value: string, originalEvent: Event }>) => void /** Fired when the input loses focus. */ onDdsBlur?: (event: CustomEvent) => void /** Emitted when the input gains focus. */ onDdsFocus?: (event: CustomEvent) => void } export interface DapDSOfficialWebsiteBannerEvents { /** Event fired when the accordion is opened. */ onDdsOpened?: (event: CustomEvent) => void /** Event fired when the accordion is closed. */ onDdsClosed?: (event: CustomEvent) => void } 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 a key is pressed down. */ onDdsKeydown?: (event: CustomEvent) => void /** Fired when the available options list changes. */ onDdsListChanged?: (event: CustomEvent<{ elements: DapDSOptionItem[] }>) => void } export interface DapDSOverlayEvents { /** Fires before the overlay opens. */ onDdsBeforeOpen?: (event: CustomEvent<CustomEvent>) => void /** Fires after the overlay opens. */ onDdsOpened?: (event: CustomEvent<CustomEvent>) => void /** Fires before the overlay closes. */ onDdsBeforeClose?: (event: CustomEvent<CustomEvent>) => void /** Fires after the overlay closes. */ onDdsClosed?: (event: CustomEvent<CustomEvent>) => void } export interface DapDSPagerEvents { /** Event fired when the pagination changes */ onDdsPaginationChange?: (event: CustomEvent<{ action: string, pagination: { pageIndex: number, pageSize: number } }>) => void } export interface DapDSPasswordInputEvents { /** Fired when the input value changes. */ onDdsChange?: (event: CustomEvent<{ value: string }>) => void /** Fired when the input value changes. */ onDdsInput?: (event: CustomEvent<{ value: string }>) => void /** Fired when a key is pressed down. */ onDdsKeydown?: (event: CustomEvent<{ value: string, originalEvent: Event }>) => void /** Fired when the input loses focus. */ onDdsBlur?: (event: CustomEvent) => void /** Emitted when the input gains focus. */ onDdsFocus?: (event: CustomEvent) => void } export interface DapDSPopupEvents { /** Fired when the popup is opened. */ onDdsOpened?: (event: CustomEvent) => void /** Fired when the popup is closed. */ onDdsClosed?: (event: CustomEvent) => void /** Fired when the popup should be closed. */ onDdsClose?: (event: CustomEvent) => void } export interface DapDSRadioButtonEvents { /** Fired when the radio button is checked. */ onDdsChange?: (event: CustomEvent<{ checked: boolean, value: string, disabled: boolean, readonly: boolean, type: 'radio' }>) => void /** Emitted when the radio button loses focus. */ onDdsBlur?: (event: CustomEvent) => void /** Emitted when the radio button gains focus. */ onDdsFocus?: (event: CustomEvent) => void /** Emitted when the radio button receives input. */ onDdsInput?: (event: CustomEvent<{ checked: boolean, value: string, disabled: boolean, readonly: boolean }>) => void } export interface DapDSRatingEvents { /** Event fired when the rating value changes. */ onDdsChange?: (event: CustomEvent<{ value: number }>) => void } export interface DapDSSearchEvents { /** Fired when the search value changes. */ onDdsChange?: (event: CustomEvent) => void /** Emitted when the search loses focus. */ onDdsBlur?: (event: CustomEvent) => void /** Emitted when the search gains focus. */ onDdsFocus?: (event: CustomEvent) => void /** Emitted when the search is cleared. */ onDdsClear?: (event: CustomEvent) => void /** Emitted when the search input value changes. */ onDdsSearch?: (event: CustomEvent) => void /** Emitted when typing happens in the search input. */ onDdsInput?: (event: CustomEvent) => void } export interface DapDSSelectEvents { /** Fired when the select value changes. */ onDdsChange?: (event: CustomEvent<{ value: string }>) => void /** Emitted when the select loses focus. */ onDdsBlur?: (event: CustomEvent) => void /** Emitted when the select gains focus. */ onDdsFocus?: (event: CustomEvent) => void /** Emitted when the select dropdown is opened. */ onDdsOpened?: (event: CustomEvent) => void /** Emitted when the select dropdown is closed. */ onDdsClosed?: (event: CustomEvent) => void } export interface DapDSSideNavEvents { /** Event fired when the side navigation item is clicked. */ onDdsItemClick?: (event: CustomEvent<{ href: string, event: Event }>) => void } export interface DapDSSnackbarMessageEvents { /** Fires when the snackbar closes. */ onDdsClose?: (event: CustomEvent<{ id: string }>) => void } export interface DapDSSwitchEvents { /** Fired when the input value changes. */ onDdsChange?: (event: CustomEvent<{ value: string }>) => void /** Emitted when the input loses focus. */ onDdsBlur?: (event: CustomEvent) => void /** Emitted when the input gains focus. */ onDdsFocus?: (event: CustomEvent) => void /** Emitted when the input receives input. */ onDdsInput?: (event: CustomEvent<{ value: string }>) => void } export interface DapDSTabGroupEvents { /** Fired when select a new tab. */ onDdsTabSelect?: (event: CustomEvent) => void } export interface DapDSTextareaEvents { /** Fires when the count of the textarea changes. */ onDdsCountChange?: (event: CustomEvent<{ value: number }>) => void /** Fired when the textarea value changes. */ onDdsChange?: (event: CustomEvent<{ value: string }>) => void /** Fired when the textarea value changes. */ onDdsInput?: (event: CustomEvent<{ value: string }>) => void /** Fired when a key is pressed down. */ onDdsKeydown?: (event: CustomEvent<{ value: string, originalEvent: Event }>) => void /** Fired when the textarea loses focus. */ onDdsBlur?: (event: CustomEvent) => void /** Emitted when the textarea gains focus. */ onDdsFocus?: (event: CustomEvent) => void /** Emitted when select text in textarea. */ onDdsSelect?: (event: CustomEvent<{ value: string }>) => void } export interface DapDSTimeGridEvents { /** Fired when time selection changes. */ onDdsChange?: (event: CustomEvent<{ detail: TimeSelection }>) => void /** Fired when the time grid should close. */ onDdsClose?: (event: CustomEvent) => void } export interface DapDSTimePickerEvents { /** Fired when the timepicker value changes. */ onDdsChange?: (event: CustomEvent<{ value: Dayjs | string, hour: number, minute: number, second?: number }>) => void /** Fired when the timepicker input value changes. */ onDdsInput?: (event: CustomEvent<{ value: string }>) => void /** Fired when the timepicker input value is valid. Happens on manual input typing. */ onDdsValidTime?: (event: CustomEvent<{ value: Dayjs | string, hour: number, minute: number, second?: number }>) => void /** Fired when the timepicker input value is invalid. Happens on manual input typing. */ onDdsInvalidTime?: (event: CustomEvent<{ value: Dayjs | string, hour: number, minute: number, second?: number, type: 'invalid' | 'out-of-range' }>) => void /** Fired when the timepicker is cleared. */ onDdsClear?: (event: CustomEvent) => void /** Emitted when the timepicker gains focus. */ onDdsFocus?: (event: CustomEvent) => void /** Emitted when the timepicker loses focus. */ onDdsBlur?: (event: CustomEvent) => void } export interface DapDSTOCEvents { /** Event that is triggered when the anchor changes. */ onDdsAnchorChange?: (event: CustomEvent<{ selectedItem: HTMLAnchorElement, anchorElement: IntersectionObserverEntry | HTMLElement }>) => void } export interface DapDSTrayEvents { /** Fires before the tray opens. */ onDdsBeforeOpen?: (event: CustomEvent) => void /** Fires after the tray opens. */ onDdsOpened?: (event: CustomEvent) => void /** Fires before the tray closes. */ onDdsBeforeClose?: (event: CustomEvent) => void /** Fires after the tray closed. */ onDdsClosed?: (event: CustomEvent) => void /** Fires when the tray is closes. You can prevent the tray from closing by calling `event.preventDefault()`. */ onDdsClose?: (event: CustomEvent) => void } export interface DapDSRadioGroupEvents { /** Fired when the radio group is checked. */ onDdsChange?: (event: CustomEvent) => void /** Emitted when the radio group loses focus. */ onDdsBlur?: (event: CustomEvent) => void /** Emitted when the radio group gains focus. */ onDdsFocus?: (event: CustomEvent) => void } export interface DapDSAccordionSlots { /** The content of the accordion. */ default?: () => any /** The heading of the accordion. */ 'heading'?: () => any /** The icon when the accordion is opened. */ 'icon-opened'?: () => any /** The icon when the accordion is closed. */ 'icon-closed'?: () => any } export interface DapDSAvatarSlots { /** The icon to display when variant is 'icon'. */ 'icon'?: () => any /** Custom fallback content when image fails to load. */ 'fallback'?: () => any } export interface DapDSAccordionGroupSlots { /** The content of the accordion group. */ default?: () => any } export interface DapDSAvatarGroupSlots { /** The avatars to display in the group. */ default?: () => any } export interface DapDSBadgeSlots { /** The content of the badge. */ default?: () => any /** The icon of the badge. */ 'icon'?: () => any } export interface DapDSBannerSlots { /** The content of the banner. */ default?: () => any /** Actions of banner */ 'actions'?: () => any /** The icon of the banner. */ 'icon'?: () => any } export interface DapDSBreadcrumbSlots { /** The content of the breadcrumb. */ default?: () => any /** The separator between breadcrumb items. Default is '/'. */ 'separator'?: () => any } export interface DapDSBreadcrumbItemSlots { /** The content of the breadcrumb item. */ default?: () => any /** The separator between breadcrumb items. Default is an arrow-right-s-line icon. */ 'separator'?: () => any } export interface DapDSButtonSlots { /** The content of the button. Can contain text, icons, or other elements. */ default?: () => any } export interface DapDSCalendarCellSlots { /** The content of the calendar cell. */ default?: () => any } export interface DapDSCalendarSlots { /** The content of the calendar. */ default?: () => any } export interface DapDSCalloutSlots { /** The content of the callout. */ default?: () => any /** The title of the callout. */ 'title'?: () => any /** The icon of the callout. */ 'icon'?: () => any /** The actions of the callout. */ 'actions'?: () => any /** The close button of the callout. */ 'close'?: () => any } export interface DapDSCardActionsSlots { /** The content of the card actions. */ default?: () => any } export interface DapDSCardContentSlots { /** The content of the card-content. */ default?: () => any } export interface DapDSCardImageSlots { /** The default slot for the image. The slot can accept any element, for example a video. If nothing is added to the slot, the image will be rendered. */ default?: () => any } export interface DapDSCardSubtitleSlots { /** The content of the subtitle. */ default?: () => any } export interface DapDSCardTitleSlots { /** The content of the title. */ default?: () => any } export interface DapDSCardSlots { /** The content of the card. */ default?: () => any } export interface DapDSCodePuncherSlots { /** Slot for code-puncher-group, code-puncher-slot, and code-puncher-separator elements. */ default?: () => any } export interface DapDSComboboxSlots { /** The default slot for the options. */ default?: () => any } export interface DapDSCommandGroupSlots { /** The default slot for the command group. */ default?: () => any } export interface DapDSCommandItemSlots { /** The label of the command item. */ default?: () => any /** The check of the command item. */ 'check'?: () => any } export interface DapDSCommandSlots { /** The trigger element for the command dropdown. */ 'trigger'?: () => any /** The command items. */ default?: () => any } export interface DapDSContentSwitcherItemSlots { /** The icon content of the segmented control item. */ 'iconcontent'?: () => any } export interface DapDSContentSwitcherSlots { /** The content switcher items. */ default?: () => any } export interface DapDSDAPBadgeSlots { /** Description of badge * */ default?: () => any } export interface DapDSDataTableSlots { /** The loading content of the table. */ 'loading'?: () => any /** The empty content of the table. */ 'empty'?: () => any } export interface DapDSFeedbackSlots { /** The custom icon of the feedback. */ 'icon'?: () => any /** The text of the feedback. */ default?: () => any } export interface DapDSFileInputListItemSlots { /** The delete button. */ 'delete-button'?: () => any } export interface DapDSFileInputListSlots { /** The delete button. */ 'delete-button'?: () => any } export interface DapDSFileInputSlots { /** The content to display in the dropzone. */ 'dropzone-content'?: () => any } export interface DapDSIconSlots { /** The content of the icon for custom svg icons. */ default?: () => any } export interface DapDSIconButtonSlots { /** The icon of the button. */ default?: () => any } export interface DapDSImageZoomSlots { /** The image or content element to zoom. Should contain an <img> element. */ default?: () => any } export interface DapDSInputSlots { /** The postfix of the input. */ 'postfix'?: () => any /** The prefix of the input. */ 'prefix'?: () => any /** The addon before the input. */ 'addon-before'?: () => any /** The addon after the input. */ 'addon-after'?: () => any /** The custom icon of the feedback. */ 'feedback-icon'?: () => any } export interface DapDSLinkSlots { /** The text of the link. */ default?: () => any /** A router link element (e.g. Next.js Link) used for SPA navigation. Rendered outside the visible link so it is always accessible to programmatic clicks. */ 'link'?: () => any } export interface DapDSListItemSlots { /** The content of the list item. */ default?: () => any /** The icon of the list item. */ 'icon'?: () => any /** The title of the list item. */ 'title'?: () => any /** The actions of the list item. */ 'actions'?: () => any } export interface DapDSModalSlots { /** The content of the modal. */ default?: () => any /** The title of the modal. */ 'title'?: () => any /** The description of the modal. */ 'description'?: () => any /** The footer of the modal. */ 'footer'?: () => any } export interface DapDSNavigationMenuItemSlots { /** The trigger element (link, button, etc.) for this navigation item. */ 'trigger'?: () => any /** The title of the navigation item. */ 'title'?: () => any /** The expand indicator icon (defaults to arrow icon based on orientation and level). */ 'indicator'?: () => any /** A router link element (e.g. Next.js Link) used for SPA navigation. Rendered outside the popup so it is always accessible to programmatic clicks. */ 'link'?: () => any /** The dropdown content (can contain nested dap-ds-navigation-menu-item elements). */ default?: () => any } export interface DapDSNavigationMenuSlots { /** The navigation menu list and items. */ default?: () => any } export interface DapDSNotificationBadgeSlots { /** The content of the notification badge. */ default?: () => any } export interface DapDSNumberInputSlots { /** The custom icon of the feedback. */ 'feedback-icon'?: () => any } export interface DapDSOfficialWebsiteBannerSlots { /** The content of the accordion. */ default?: () => any /** The heading of the accordion. */ 'heading'?: () => any /** The icon when the accordion is opened. */ 'icon-opened'?: () => any /** The icon when the accordion is closed. */ 'icon-closed'?: () => any } export interface DapDSOptionGroupSlots { /** The option items in this group. */ default?: () => any } export interface DapDSOptionItemSlots { /** The prefix of the option item. */ 'prefix'?: () => any /** The label of the option item. */ default?: () => any /** The suffix of the option item. */ 'suffix'?: () => any } export interface DapDSOptionListSlots { /** The default slot for the options. */ default?: () => any } export interface DapDSOverlaySlots { /** The content of the overlay. */ default?: () => any } export interface DapDSPopupSlots { /** The trigger of the popup. */ 'trigger'?: () => any /** The content of the popup. */ default?: () => any } export interface DapDSProgressSlots { /** Custom label content for the progress indicator. */ 'label'?: () => any } export interface DapDSScrollAreaSlots { /** The content to be scrolled */ default?: () => any } export interface DapDSSearchSlots { /** The default slot for the options. */ default?: () => any } export interface DapDSSelectSlots { /** The option list of the select. */ default?: () => any /** The indicator icon of the select. */ 'indicator-icon'?: () => any } export interface DapDSSideNavGroupSlots { /** The content of the side navigation group. */ default?: () => any /** The submenu of the side navigation group. */ 'submenu'?: () => any /** The suffix of the side navigation group. */ 'suffix'?: () => any } export interface DapDSSideNavItemSlots { /** The content of the side navigation item. */ default?: () => any /** The suffix of the side navigation item. */ 'suffix'?: () => any } export interface DapDSSideNavSlots { /** The content of the side navigation. */ default?: () => any } export interface DapDSSkipLinkSlots { /** The content of the skip link. */ default?: () => any } export interface DapDSSnackbarMessageSlots { /** The content of the snackbar. */ default?: () => any } export interface DapDSSpinnerSlots { /** The loading text content. */ default?: () => any /** The loading icon content. */ 'icon'?: () => any } export interface DapDSStackSlots { /** The content of the stack. */ default?: () => any } export interface DapDSTabGroupSlots { /** The tab items. */ default?: () => any } export interface DapDSTabSlots { /** The tab title template. */ default?: () => any /** The tab content. */ 'content'?: () => any } export interface DapDSTableCellSlots { /** The default slot. */ default?: () => any } export interface DapDSTableHeaderSlots { /** The default slot. */ default?: () => any } export interface DapDSTableRowSlots { /** The default slot. Accepts `dap-ds-table-cell` and `dap-ds-table-header` elements. */ default?: () => any } export interface DapDSTableSlots { /** The default slot. Accepts `dap-ds-table-row` elements. */ default?: () => any } export interface DapDSTextareaSlots { /** The custom icon of the feedback. */ 'feedback-icon'?: () => any } export interface DapDSTimelineItemSlots { /** The default slot for the item content. */ default?: () => any } export interface DapDSTimelineSlots { /** The default slot for the timeline items. */ default?: () => any } export interface DapDSToggleButtonSlots { /** The content of the toggle button. */ default?: () => any } export interface DapDSTooltipSlots { /** The content of the tooltip. */ default?: () => any /** The trigger element of the tooltip. */ 'trigger'?: () => any } export interface DapDSTraySlots { /** The content of the tray. */ default?: () => any /** The header of the tray. */ 'header'?: () => any /** The footer of the tray. */ 'footer'?: () => any } export interface DapDSTypographySlots { /** The content of the typography. */ default?: () => any } export interface DapDSInputGroupSlots { /** The content of the input group items. */ default?: () => any /** The custom icon of the feedback. */ 'feedback-icon'?: () => any } export interface DapDSRadioGroupSlots { /** The content of the radio group. */ default?: () => any /** The custom icon of the feedback. */ 'feedback-icon'?: () => any } export type DapDSAccordionProps = { /** */ tagName?: DapDSAccordion["tagName"] /** The size of the accordion. Default is `sm`. Visual variants are sm and lg (other sizes map to sm). */ size?: DapDSAccordion["size"] /** Responsive size map (e.g. "md:lg") */ sizeMap?: DapDSAccordion["sizeMap"] /** When "true", size is taken from the parent card if present. */ parentSized?: DapDSAccordion["parentSized"] /** The heading text of the accordion, this will be used as the aria label of the heading also if ariaLabel is not provided */ heading?: DapDSAccordion["heading"] /** The heading level of the accordion. Default is `4`. */ headingLevel?: DapDSAccordion["headingLevel"] /** Whether the accordion is opened. Default is `false`. */ opened?: DapDSAccordion["opened"] /** The location of the icon. Default is `right`. */ iconLocation?: DapDSAccordion["iconLocation"] /** The variant of the accordion. */ variant?: DapDSAccordion["variant"] /** Whether the accordion is the last item. */ lastItem?: DapDSAccordion["lastItem"] /** Whether the accordion is disabled. */ disabled?: DapDSAccordion["disabled"] /** Whether the accordion is in loading state. */ loading?: DapDSAccordion["loading"] } export type DapDSAvatarProps = { /** The shape of the avatar */ shape?: DapDSAvatar["shape"] /** The variant type of the avatar */ variant?: DapDSAvatar["variant"] /** The source of the avatar image */ src?: DapDSAvatar["src"] /** The alt text of the avatar */ alt?: DapDSAvatar["alt"] /** The initials to display when variant is 'initials' */ initials?: DapDSAvatar["initials"] /** Accessible label for the avatar */ label?: DapDSAvatar["label"] /** Loading state indicator */ loading?: DapDSAvatar["loading"] /** Whether the avatar is interactive (clickable) */ interactive?: DapDSAvatar["interactive"] /** The width of the avatar. This will override the size */ width?: DapDSAvatar["width"] /** The height of the avatar. This will override the size */ height?: DapDSAvatar["height"] /** */ 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 DapDSAnchorHeadingProps = { /** The variant of the heading. Default is `h2`. Can be `h1`, `h2`, `h3`, `h4`, `h5`, or `h6`. */ variant?: DapDSAnchorHeading["variant"] /** The label of the heading. */ label?: DapDSAnchorHeading["label"] /** */ tagName?: DapDSAnchorHeading["tagName"] /** */ dependencies?: DapDSAnchorHeading["dependencies"] /** */ elementId?: DapDSAnchorHeading["elementId"] /** */ 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"] /** */ 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 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 DapDSBannerProps = { /** The variant of the banner */ variant?: DapDSBanner["variant"] /** Whether the banner is closeable */ closeable?: DapDSBanner["closeable"] /** State of the banner. If false banner is hidden */ opened?: DapDSBanner["opened"] /** The aria-label for the close button */ closeButtonLabel?: DapDSBanner["closeButtonLabel"] /** `data-testid` for the close button. */ closeButtonTestId?: DapDSBanner["closeButtonTestId"] /** The icon of the banner, this is a name of a built icon icon */ icon?: DapDSBanner["icon"] /** */ tagName?: DapDSBanner["tagName"] /** */ dependencies?: DapDSBanner["dependencies"] } export type DapDSBreadcrumbProps = { /** */ variant?: DapDSBreadcrumb["variant"] /** Mobile version of the breadcrumb */ mobile?: DapDSBreadcrumb["mobile"] /** The aria-labelledby of the breadcrumb */ "aria-labelledby"?: DapDSBreadcrumb["ariaLabelledBy"] /** */ tagName?: DapDSBreadcrumb["tagName"] } export type DapDSBreadcrumbItemProps = { /** The URL of the breadcrumb item. */ href?: DapDSBreadcrumbItem["href"] /** The target of the breadcrumb item. */ target?: DapDSBreadcrumbItem["target"] /** The rel of the breadcrumb item link. */ rel?: DapDSBreadcrumbItem["rel"] /** Whether the breadcrumb item is disabled. */ disabled?: DapDSBreadcrumbItem["disabled"] /** The variant of the breadcrumb item. */ variant?: DapDSBreadcrumbItem["variant"] /** */ tagName?: DapDSBreadcrumbItem["tagName"] /** */ dependencies?: DapDSBreadcrumbItem["dependencies"] } export type DapDSButtonProps = { /** The visual style variant of the button */ variant?: DapDSButton["variant"] /** The size of the button affecting padding and font size */ size?: DapDSButton["size"] /** Whether the button is in loading state, showing a spinner and disabling interaction */ loading?: DapDSButton["loading"] /** Whether the button represents a destructive action (applies danger styling) */ danger?: DapDSButton["danger"] /** The shape of the button - use 'circle' for icon-only buttons */ shape?: DapDSButton["shape"] /** The HTML type attribute for form interaction */ htmlType?: DapDSButton["htmlType"] /** The URL to navigate to. When present, the button renders as an anchor element */ href?: DapDSButton["href"] /** The target attribute for link navigation */ target?: DapDSButton["target"] /** The rel attribute for link security and behavior */ rel?: DapDSButton["rel"] /** Controls loading timeout in milliseconds */ loadingTimeout?: DapDSButton["loadingTimeout"] /** Whether the button is active */ active?: DapDSButton["active"] /** The text for the target blank link, applicable when target is _blank. PRO TIP: Use parenthesis to wrap the text */ targetBlankText?: DapDSButton["targetBlankText"] /** Overrides the ARIA role on the internal native button/anchor element. Use when the host's semantics must differ from the native element (e.g. role="link" on a button acting as a SPA navigation trigger). */ forceRole?: DapDSButton["forceRole"] /** */ tagName?: DapDSButton["tagName"] /** Components rendered inside the button, auto-registered on first use. */ dependencies?: DapDSButton["dependencies"] /** The size map of the button. */ sizeMap?: DapDSButton["sizeMap"] } export type DapDSCalendarCellProps = { /** Whether the calendar cell is selected. */ selected?: DapDSCalendarCell["selected"] /** Whether the calendar cell is disabled. */ disabledDay?: DapDSCalendarCell["disabledDay"] /** Whether the calendar cell is today. */ today?: DapDSCalendarCell["today"] /** Whether the calendar cell is out of range. */ outOfRange?: DapDSCalendarCell["outOfRange"] /** Whether the calendar cell is a date header. */ header?: DapDSCalendarCell["header"] /** Whether the calendar cell is focused. */ focused?: DapDSCalendarCell["focused"] /** Whether the calendar cell is the start of a range. */ rangestart?: DapDSCalendarCell["rangestart"] /** Whether the calendar cell is the end of a range. */ rangeend?: DapDSCalendarCell["rangeend"] /** Whether the calendar cell is in the middle of a range. */ inrange?: DapDSCalendarCell["inrange"] /** The locale of the calendar cell. */ locale?: DapDSCalendarCell["locale"] /** */ tagName?: DapDSCalendarCell["tagName"] /** The value of the calendar cell. */ value?: DapDSCalendarCell["value"] /** */ label?: DapDSCalendarCell["label"] /** */ focusElement?: DapDSCalendarCell["focusElement"] } export type DapDSCalendarProps = { /** The mode of the calendar - single date or range selection. */ mode?: DapDSCalendar["mode"] /** Whether to hide dates from adjacent months (previous/next) in the calendar grid. When not explicitly set, defaults to false for single mode and true for range mode. */ hideAdjacentMonths?: DapDSCalendar["hideAdjacentMonths"] /** The locale of the calendar. */ locale?: DapDSCalendar["locale"] /** `data-testid` for the previous-month button. */ prevButtonTestId?: DapDSCalendar["prevButtonTestId"] /** `data-testid` for the next-month button. */ nextButtonTestId?: DapDSCalendar["nextButtonTestId"] /** */ tagName?: DapDSCalendar["tagName"] /** */ dependencies?: DapDSCalendar["dependencies"] /** The value of the calendar. */ value?: DapDSCalendar["value"] /** The start date of the range selection (only used in range mode). */ rangeStart?: DapDSCalendar["rangeStart"] /** The end date of the range selection (only used in range mode). */ rangeEnd?: DapDSCalendar["rangeEnd"] /** The current visible date of the calendar. Only the month and year are considered. */ currentDate?: DapDSCalendar["currentDate"] /** The minimum date of the calendar. Only the month and year are considered. */ minDate?: DapDSCalendar["minDate"] /** The maximum date of the calendar. Only the month and year are considered. */ maxDate?: DapDSCalendar["maxDate"] /** The function to determine if the date is disabled. */ disabledDate?: DapDSCalendar["disabledDate"] /** */ startDate?: DapDSCalendar["startDate"] /** */ endDate?: DapDSCalendar["endDate"] /** */ shouldHideAdjacentMonths?: DapDSCalendar["shouldHideAdjacentMonths"] } export type DapDSCalloutProps = { /** The variant of the callout */ variant?: DapDSCallout["variant"] /** The alignment of the callout. Can be `vertical` or `horizontal`. */ alignment?: DapDSCallout["alignment"] /** The strongness of the callout colors. Can be `subtle`, `base`, `medium`, or `strong`. */ shade?: DapDSCallout["shade"] /** If the callout has a border */ noBorder?: DapDSCallout["noBorder"] /** If the callout has a close button */ closeable?: DapDSCallout["closeable"] /** The header of the callout */ title?: DapDSCallout["title"] /** The label of the close button */ closeButtonLabel?: DapDSCallout["closeButtonLabel"] /** `data-testid` for the default close button. */ closeButtonTestId?: DapDSCallout["closeButtonTestId"] /** If the callout is opened */ opened?: DapDSCallout["opened"] /** */ tagName?: DapDSCallout["tagName"] /** */ dependencies?: DapDSCallout["dependencies"] } export type DapDSCardActionsProps = { /** */ tagName?: DapDSCardActions["tagName"] /** The spacing of the card actions. This adds a margin to the card actions. Default is `bottom`. */ spacing?: DapDSCardActions["spacing"] /** */ parentSized?: DapDSCardActions["parentSized"] /** The size of the card actions. Default is `sm`. */ size?: DapDSCardActions["size"] /** Responsive size map (e.g. "md:lg"). */ sizeMap?: DapDSCardActions["sizeMap"] } export type DapDSCardContentProps = { /** The base rendered root tag of the card content. */ renderAs?: DapDSCardContent["renderAs"] /** */ tagName?: DapDSCardContent["tagName"] /** The spacing of the card content. This adds a margin to the card subtitle. Default is `bottom`. */ spacing?: DapDSCardContent["spacing"] /** */ parentSized?: DapDSCardContent["parentSized"] /** The size of the card subtitle. Default is `sm`. */ size?: DapDSCardContent["size"] /** Responsive size map (e.g. "md:lg"). */ sizeMap?: DapDSCardContent["sizeMap"] } export type DapDSCardImageProps = { /** The source of the image. */ src?: DapDSCardImage["src"] /** The alt text of the image. */ alt?: DapDSCardImage["alt"] /** The width of the image. */ width?: DapDSCardImage["width"] /** The height of the image. */ height?: DapDSCardImage["height"] /** */ tagName?: DapDSCardImage["tagName"] } export type DapDSCardSubtitleProps = { /** The base rendered root tag of the card subtitle. */ renderAs?: DapDSCardSubtitle["renderAs"] /** */ tagName?: DapDSCardSubtitle["tagName"] /** The spacing of the card subtitle. This adds a margin to the card subtitle. Default is `top`. */ spacing?: