dap-design-system 0.35.21 → 0.35.22

package/dist/dds.d.ts

@@ -790,8 +790,8 @@ export declare type CSSFlexDirection = 'column' | 'row' | 'column-reverse' | 'ro
  * @property { 'default' | 'collapsed' | 'clean' | 'clean-collapsed' } variant - The variant of the accordion.
  * @property {boolean} lastItem - Whether the accordion is the last item.
  *
- * @event dds-opened - Event fired when the accordion is opened.
- * @event dds-closed - Event fired when the accordion is closed.
+ * @event {{ open: boolean, item: AccordionBaseElement }} dds-opened - Event fired when the accordion is opened.
+ * @event {{ open: boolean, item: AccordionBaseElement }} dds-closed - Event fired when the accordion is closed.
  *
  * @slot default - The content of the accordion.
  * @slot heading - The heading of the accordion.
@@ -838,8 +838,6 @@ export declare class DapDSAccordion extends AccordionBaseElement {
  * @summary An accordion group is a collection of accordion components.
  * @title - Accordion group
  * @group accordion
- * *
- * @event dds-change - Event fired when an accordion is opened or closed.
  *
  * @slot - The content of the accordion group.
  *
@@ -1012,7 +1010,7 @@ export declare class DapDSBadge extends DdsElement {
  * @summary A banner is a message displayed at the top of the page to provide important information to the user.
  * @title - Banner
  *
- * @event dds-close - Event fired when the banner is closed.
+ * @event {{ void }} dds-close - Event fired when the banner is closed.
  *
  * @slot - The content of the banner.
  * @slot actions - Actions of banner
@@ -1355,7 +1353,7 @@ export declare class DapDSButton extends GenericFormElement {
  * @element dap-ds-calendar
  * @title - Calendar
  *
- * @event dds-change - Fired when the calendar value changes.
+ * @event {{ value: Dayjs }} dds-change - Fired when the calendar value changes.
  *
  * @slot - The content of the calendar.
  *
@@ -1508,7 +1506,7 @@ declare const DapDSCalendarCell_base: typeof DdsElement & {
  * @element dap-ds-callout
  * @title - Callout
  *
- * @event dds-close - Fired when the close button is clicked.
+ * @event {{ void }} dds-close - Fired when the close button is clicked.
  *
  * @slot - The content of the callout.
  * @slot title - The title of the callout.
@@ -1844,10 +1842,10 @@ declare const DapDSCardTitle_base: typeof DdsElement & {
  * @element dap-ds-checkbox
  * @title - Checkbox
  *
- * @event dds-change - Fired when the checkbox is checked or unchecked.
- * @event dds-blur - Emitted when the checkbox loses focus.
- * @event dds-focus - Emitted when the checkbox gains focus.
- * @event dds-input - Emitted when the checkbox receives input.
+ * @event {{ checked: boolean, indeterminate: boolean, value: string, disabled: boolean, type: 'checkbox' }} dds-change - Fired when the checkbox is checked or unchecked.
+ * @event {{ void }} dds-blur - Emitted when the checkbox loses focus.
+ * @event {{ void }} dds-focus - Emitted when the checkbox gains focus.
+ * @event {{ checked: boolean, indeterminate: boolean, value: string, disabled: boolean }} dds-input - Emitted when the checkbox receives input.
  *
  * @property {string} name - The name of the checkbox.
  * @property {string} value - The value of the checkbox.
@@ -1927,12 +1925,12 @@ export declare class DapDSCheckbox extends LabeledChoiceElement {
  * @element dap-ds-combobox
  * @title - Combobox
  *
- * @event dds-change - Fired when the select value changes.
- * @event dds-blur - Emitted when the select loses focus.
- * @event dds-focus - Emitted when the select gains focus.
- * @event dds-clear - Emitted when the select is cleared.
- * @event dds-search - Emitted when the manual input value changes.
- * @event dds-input - Emitted when typing happens in the input.
+ * @event {{ value }} dds-change - Fired when the select value changes.
+ * @event {{ void }} dds-blur - Emitted when the select loses focus.
+ * @event {{ void }} dds-focus - Emitted when the select gains focus.
+ * @event {{ void }} dds-clear - Emitted when the select is cleared.
+ * @event {{ search: string }} dds-search - Emitted when the manual input value changes.
+ * @event {{ input: string, originalEvent: Event }} dds-input - Emitted when typing happens in the input.
  *
  * @property {string} value - The value of the select.
  * @property {string} placeholder - The placeholder of the select.
@@ -2073,7 +2071,7 @@ export declare class DapDSCommandGroup extends DdsElement {
  * @title - Command item
  * @group command
  *
- * @event dds-command-item-click - Fired when the command item is clicked.
+ * @event {{ value: string, closeOnSelect: boolean }} dds-command-item-click - Fired when the command item is clicked.
  *
  * @slot - The label of the command item.
  * @slot check - The check of the command item.
@@ -2140,8 +2138,8 @@ export declare class DapDSCommandItem extends DdsElement {
  *
  * @slot - The content switcher items.
  *
- * @event dds-change - Fired when the content switcher is changed.
- * *
+ * @event {{ value: string, selected: boolean }} dds-change - Fired when the content switcher is changed.
+ *
  * @csspart base - The main content switcher container.
  *
  * @cssproperty --dds-content-switcher-min-width - The minimum width of the content switcher (default: var(--dds-spacing-4000, 160px))
@@ -2227,13 +2225,13 @@ export declare class DapDSContentSwitcherItem extends DdsElement {
  * @property {boolean} subtle - The weight of the label. Default is `false`
  * @property {string} copyButtonAriaLabel - The aria label of the copy button.
  *
- * @event dds-copy - Fired when the user clicks on the copy button.
- * @event dds-change - Fired when the input value changes.
- * @event dds-input - Fired when the input value changes.
- * @event dds-keydown - Fired when a key is pressed down.
- * @event dds-blur - Fired when the input loses focus.
- * @event dds-focus - Emitted when the input gains focus.
- * @event dds-not-allowed - Emitted when the value cannot be copied.
+ * @event {{ value: string }} dds-copy - Fired when the user clicks on the copy button.
+ * @event {{ value: string }} dds-change - Fired when the input value changes.
+ * @event {{ value: string }} dds-input - Fired when the input value changes.
+ * @event {{ value: string, originalEvent: Event }} dds-keydown - Fired when a key is pressed down.
+ * @event {{ void }} dds-blur - Fired when the input loses focus.
+ * @event {{ void }} dds-focus - Emitted when the input gains focus.
+ * @event {{ void }} dds-not-allowed - Emitted when the value cannot be copied.
  *
  * @cssproperty --dds-input-height - The height of the input. Default is var(--dds-spacing-1000).
  * @cssproperty --dds-input-padding - The padding of the input. Default is var(--dds-spacing-300).
@@ -2307,10 +2305,10 @@ export declare class DapDSDAPBadge extends DdsElement {
  * @title - Data table
  * @generic T
  *
- * @event dds-sorting-change - Fired when the sorting of the table changes.
- * @event dds-selection-change - Fired when the selection of the table changes.
- * @event dds-pagination-change - Fired when the pagination of the table changes.
- * @event dds-row-click - Fired when a row is clicked.
+ * @event {{ sorting: SortingState }} dds-sorting-change - Fired when the sorting of the table changes.
+ * @event {{ selection: RowSelectionState }} dds-selection-change - Fired when the selection of the table changes.
+ * @event {{ pagination: PaginationState }} dds-pagination-change - Fired when the pagination of the table changes.
+ * @event {{ row: Row<T> }} dds-row-click - Fired when a row is clicked.
  *
  * @csspart base - The main table container.
  * @csspart header - The header of the table.
@@ -2449,13 +2447,13 @@ export declare class DapDSDataTable<T> extends DdsElement {
  * @property {string} autocomplete - The autocomplete of the datepicker.
  * @property {boolean} autofocus - The autofocus of the datepicker.
  *
- * @event dds-change - Fired when the datepicker value changes.
- * @event dds-input - Fired when the datepicker input value changes.
- * @event dds-valid-date - Fired when the datepicker input value is valid. Happens on manual input typing.
- * @event dds-invalid-date - Fired when the datepicker input value is invalid. Type can be 'invalid' or 'out-of-range'. Happens on manual input typing.
- * @event dds-clear - Fired when the datepicker is cleared.
- * @event dds-focus - Emitted when the datepicker gains focus.
- * @event dds-blur - Emitted when the datepicker loses focus.
+ * @event {{ value: string }} dds-change - Fired when the datepicker value changes.
+ * @event {{ value: string }} dds-input - Fired when the datepicker input value changes.
+ * @event {{ value: string }} dds-valid-date - Fired when the datepicker input value is valid. Happens on manual input typing.
+ * @event {{ value: string, type: 'invalid' | 'out-of-range' }} dds-invalid-date - Fired when the datepicker input value is invalid. Happens on manual input typing.
+ * @event {{ void }} dds-clear - Fired when the datepicker is cleared.
+ * @event {{ void }} dds-focus - Emitted when the datepicker gains focus.
+ * @event {{ void }} dds-blur - Emitted when the datepicker loses focus.
  *
  * @csspart base - The main datepicker container.
  * @csspart calendar - The calendar of the datepicker.
@@ -2673,13 +2671,13 @@ declare const DapDSFeedback_base: typeof DdsElement & {
  * @property {boolean} optional - Whether the file input is optional.
  * @property {boolean} subtle - Font weight of the feedback label. Default is `false` which is bold.
  *
- * @event dds-upload-start - Fired when a file upload starts.
- * @event dds-upload-progress - Fired during file upload progress.
- * @event dds-upload-complete - Fired when a file upload completes successfully.
- * @event dds-upload-error - Fired when a file upload encounters an error.
- * @event dds-all-uploads-complete - Fired when all file uploads are complete.
- * @event dds-file-removed - Fired when a file is removed from the file input.
- * @event dds-file-change - Fired when the file input value changes.
+ * @event {{ file: File }} dds-upload-start - Fired when a file upload starts.
+ * @event {{ file: File, progress: number }} dds-upload-progress - Fired during file upload progress.
+ * @event {{ file: File, item: DapDSFileInputListItem, result: any }} dds-upload-complete - Fired when a file upload completes successfully.
+ * @event {{ file: File, item: DapDSFileInputListItem, error: Error }} dds-upload-error - Fired when a file upload encounters an error.
+ * @event {{ void }} dds-all-uploads-complete - Fired when all file uploads are complete.
+ * @event {{ file: FileListElement }} dds-file-removed - Fired when a file is removed from the file input.
+ * @event {{ files: File[] }} dds-file-change - Fired when the file input value changes.
  *
  * @csspart base - The main file input container.
  * @csspart input - The file input control.
@@ -2776,7 +2774,7 @@ declare const DapDSFileInputList_base: typeof DdsElement & {
  * @title - File input list item
  * @group file-input
  *
- * @event dds-file-remove - Dispatched when a file is removed from the list.
+ * @event {{ file: FileListElement }} dds-file-remove - Dispatched when a file is removed from the list.
  *
  * @csspart base - The main file input list item container.
  * @csspart feedback - The feedback container.
@@ -3060,11 +3058,11 @@ export declare class DapDSIconButton extends DdsElement {
  * @cssproperty --dds-input-addon-success-background - The background color of the success input addon. Default is var(--dds-background-ui-positive-enabled).
  * @cssproperty --dds-input-addon-error-background - The background color of the error input addon. Default is var(--dds-background-ui-negative-enabled).
  *
- * @event dds-change - Fired when the input value changes.
- * @event dds-input - Fired when the input value changes.
- * @event dds-keydown - Fired when a key is pressed down.
- * @event dds-blur - Fired when the input loses focus.
- * @event dds-focus - Emitted when the input gains focus.
+ * @event {{ value: string }} dds-change - Fired when the input value changes.
+ * @event {{ value: string }} dds-input - Fired when the input value changes.
+ * @event {{ value: string, originalEvent: Event }} dds-keydown - Fired when a key is pressed down.
+ * @event {{ void }} dds-blur - Fired when the input loses focus.
+ * @event {{ void }} dds-focus - Emitted when the input gains focus.
  *
  * @slot postfix - The postfix of the input.
  * @slot prefix - The prefix of the input.
@@ -3179,7 +3177,7 @@ declare const DapDSLabel_base: {
  * @element dap-ds-link
  * @title - Link
  *
- * @event dds-click - Emitted when the link is clicked.
+ * @event {{ event: Event }} dds-click - Emitted when the link is clicked.
  *
  * @slot - The text of the link.
  *
@@ -3399,13 +3397,13 @@ export declare class DapDSListItem extends DdsElement {
  * @property {string} header - Whether the modal should have a header. Default is true.
  * @property {boolean} useNativeFocus - Whether the modal should use native focus. Default is false.
  *
- * @event dds-before-open - Fires before the modal opens.
- * @event dds-opened - Fires after the modal opens.
- * @event dds-before-close - Fires before the modal closes.
- * @event dds-closed - Fires after the modal closed.
- * @event dds-close - Fires when the modal is closes. You can prevent the modal from closing by calling `event.preventDefault()`.
- * @event dds-ok - Fires when the OK button is clicked. You can prevent the modal from closing by calling `event.preventDefault()`.
- * @event dds-cancel - Fires when the Cancel button is clicked. You can prevent the modal from closing by calling `event.preventDefault()`.
+ * @event {{ void }} dds-before-open - Fires before the modal opens.
+ * @event {{ void }} dds-opened - Fires after the modal opens.
+ * @event {{ void }} dds-before-close - Fires before the modal closes.
+ * @event {{ void }} dds-closed - Fires after the modal closed.
+ * @event {{ void }} dds-close - Fires when the modal is closes. You can prevent the modal from closing by calling `event.preventDefault()`.
+ * @event {{ void }} dds-ok - Fires when the OK button is clicked. You can prevent the modal from closing by calling `event.preventDefault()`.
+ * @event {{ void }} dds-cancel - Fires when the Cancel button is clicked. You can prevent the modal from closing by calling `event.preventDefault()`.
  *
  * @slot - The content of the modal.
  * @slot title - The title of the modal.
@@ -3533,11 +3531,11 @@ export declare class DapDSNotificationBadge extends DdsElement {
  * @property {boolean} disableEnter - Disables the enter key from being used to submit the form.
  * @property {boolean} hideControls - Hides the increment and decrement buttons.
  *
- * @event dds-change - Fired when the input value changes.
- * @event dds-input - Fired when the input value changes.
- * @event dds-keydown - Fired when a key is pressed down.
- * @event dds-blur - Fired when the input loses focus.
- * @event dds-focus - Emitted when the input gains focus.
+ * @event {{ value: string }} dds-change - Fired when the input value changes.
+ * @event {{ value: string }} dds-input - Fired when the input value changes.
+ * @event {{ value: string, originalEvent: Event }} dds-keydown - Fired when a key is pressed down.
+ * @event {{ void }} dds-blur - Fired when the input loses focus.
+ * @event {{ void }} dds-focus - Emitted when the input gains focus.
  *
  * @slot feedback-icon - The custom icon of the feedback.
  *
@@ -3596,8 +3594,8 @@ export declare class DapDSNumberInput extends InputBaseElement {
  * @property { 'default' | 'collapsed' | 'clean' | 'clean-collapsed' } variant - The variant of the accordion.
  * @property {boolean} lastItem - Whether the accordion is the last item.
  *
- * @event dds-opened - Event fired when the accordion is opened.
- * @event dds-closed - Event fired when the accordion is closed.
+ * @event {{ void }} dds-opened - Event fired when the accordion is opened.
+ * @event {{ void }} dds-closed - Event fired when the accordion is closed.
  *
  * @slot default - The content of the accordion.
  * @slot heading - The heading of the accordion.
@@ -3705,9 +3703,9 @@ declare const DapDSOptionItem_base: typeof DdsElement & {
  * @element dap-ds-option-list
  * @title - Option list
  *
- * @event dds-cancel - Fired when the escape key is pressed.
- * @event dds-option-change - Fired when the option list value changes.
- * @event dds-keydown - Fired when a key is pressed down.
+ * @event {{ void }} dds-cancel - Fired when the escape key is pressed.
+ * @event {{ option: DapDSOptionItem, value: string, index: number, text: string }} dds-option-change - Fired when the option list value changes.
+ * @event {{ void }} dds-keydown - Fired when a key is pressed down.
  *
  * @csspart base - The main option list container.
  *
@@ -3809,7 +3807,7 @@ export declare class DapDSOverlay extends DdsElement {
  * @element dap-ds-pager
  * @title - Pager
  *
- * @event dds-pagination-change - Event fired when the pagination changes
+ * @event {{ action: string, pagination: { pageIndex: number, pageSize: number } }} dds-pagination-change - Event fired when the pagination changes
  *
  * @csspart base - The main pager container.
  * @csspart first - The first page button.
@@ -3899,11 +3897,11 @@ export declare class DapDSPager extends DdsElement {
  * @property {string} optionalLabel - The optional label of the password input.
  * @property {boolean} subtle - The weight of the label. Default is `false`
  *
- * @event dds-change - Fired when the input value changes.
- * @event dds-input - Fired when the input value changes.
- * @event dds-keydown - Fired when a key is pressed down.
- * @event dds-blur - Fired when the input loses focus.
- * @event dds-focus - Emitted when the input gains focus.
+ * @event {{ value: string }} dds-change - Fired when the input value changes.
+ * @event {{ value: string }} dds-input - Fired when the input value changes.
+ * @event {{ value: string, originalEvent: Event }} dds-keydown - Fired when a key is pressed down.
+ * @event {{ void }} dds-blur - Fired when the input loses focus.
+ * @event {{ void }} dds-focus - Emitted when the input gains focus.
  *
  * @cssproperty --dds-input-height - The height of the input. Default is var(--dds-spacing-1000).
  * @cssproperty --dds-input-padding - The padding of the input. Default is var(--dds-spacing-300).
@@ -3946,8 +3944,8 @@ export declare class DapDSPasswordInput extends InputBaseElement {
  *
  * @property {'xs' | 'sm' | 'lg'} size - The size of the popup.
  *
- * @event dds-opened - Fired when the popup is opened.
- * @event dds-closed - Fired when the popup is closed.
+ * @event {{ void }} dds-opened - Fired when the popup is opened.
+ * @event {{ void }} dds-closed - Fired when the popup is closed.
  *
  * @slot trigger - The trigger of the popup.
  * @slot - The content of the popup.
@@ -4028,10 +4026,10 @@ declare const DapDSPopup_base: typeof DdsElement & {
  * @property {'left' | 'right'} labelPlacement - The placement of the label.
  * @property {'top' | 'bottom'} descriptionPlacement - The placement of the description.
  *
- * @event dds-change - Fired when the radio button is checked.
- * @event dds-blur - Emitted when the radio button loses focus.
- * @event dds-focus - Emitted when the radio button gains focus.
- * @event dds-input - Emitted when the radio button receives input.
+ * @event {{ value: string }} dds-change - Fired when the radio button is checked.
+ * @event {{ void }} dds-blur - Emitted when the radio button loses focus.
+ * @event {{ void }} dds-focus - Emitted when the radio button gains focus.
+ * @event {{ value: string }} dds-input - Emitted when the radio button receives input.
  *
  * @csspart base - The main radio button container.
  * @csspart wrapper - The wrapper of the radio button.
@@ -4161,7 +4159,7 @@ export declare class DapDSRadioGroup extends GenericFormElement {
  * @element dap-ds-rating
  * @title - Rating
  *
- * @event dds-change - Event fired when the rating value changes.
+ * @event {{ value: number }} dds-change - Event fired when the rating value changes.
  *
  * @csspart base - The main rating container.
  * @csspart star - The star element.
@@ -4321,9 +4319,9 @@ export declare class DapDSSearch extends ComboboxBaseElement {
  * @element dap-ds-select
  * @title - Select
  *
- * @event dds-change - Fired when the select value changes.
- * @event dds-blur - Emitted when the select loses focus.
- * @event dds-focus - Emitted when the select gains focus.
+ * @event {{ value: string }} dds-change - Fired when the select value changes.
+ * @event {{ void }} dds-blur - Emitted when the select loses focus.
+ * @event {{ void }} dds-focus - Emitted when the select gains focus.
  *
  * @property {string} value - The value of the select.
  * @property {string} label - The label of the select.
@@ -4441,7 +4439,7 @@ export declare class DapDSSelect extends GenericFormElement {
  * @element dap-ds-sidenav
  * @title - Side navigation
  *
- * @event dds-item-click - Event fired when the side navigation item is clicked.
+ * @event {{ href: string, event: Event }} dds-item-click - Event fired when the side navigation item is clicked.
  *
  * @slot - The content of the side navigation.
  *
@@ -4468,7 +4466,7 @@ export declare class DapDSSideNav extends DdsElement {
  * @title - Side navigation group
  * @group side-navigation
  *
- * @event dds-item-click - Event fired when the side navigation item is clicked.
+ * @event {{ href: string, event: Event }} dds-item-click - Event fired when the side navigation item is clicked.
  *
  * @slot - The content of the side navigation group.
  * @slot submenu - The submenu of the side navigation group.
@@ -4515,7 +4513,7 @@ export declare class DapDSSideNavGroup extends DdsElement {
  * @title - Side navigation item
  * @group side-navigation
  *
- * @event dds-item-click - Event fired when the side navigation item is clicked.
+ * @event {{ href: string, event: Event }} dds-item-click - Event fired when the side navigation item is clicked.
  *
  * @slot - The content of the side navigation item.
  * @slot suffix - The suffix of the side navigation item.
@@ -4629,7 +4627,7 @@ export declare class DapDSSnackbar extends DdsElement {
  * @title - Snackbar message
  * @group snackbar
  *
- * @event dds-close - Fires when the snackbar closes.
+ * @event {{ id: string }} dds-close - Fires when the snackbar closes.
  *
  * @slot default - The content of the snackbar.
  *
@@ -4771,10 +4769,10 @@ export declare class DapDSStack extends DdsElement {
  * @cssProperty --dds-switch-border-color - Border color of the switch.
  * @cssProperty --dds-switch-high-contrast-border-color - Border color of the switch in high contrast mode.
  *
- * @event dds-change - Fired when the input value changes.
- * @event dds-blur - Emitted when the input loses focus.
- * @event dds-focus - Emitted when the input gains focus.
- * @event dds-input - Emitted when the input receives input.
+ * @event {{ value: string }} dds-change - Fired when the input value changes.
+ * @event {{ void }} dds-blur - Emitted when the input loses focus.
+ * @event {{ void }} dds-focus - Emitted when the input gains focus.
+ * @event {{ value: string }} dds-input - Emitted when the input receives input.
  *
  * @csspart base - The main switch container.
  * @csspart baselabel - The main label container
@@ -4827,7 +4825,7 @@ export declare class DapDSTab extends DdsElement {
  * @title - Tab group
  * @group tab
  *
- * @event dds-tab-select - Fired when select a new tab.
+ * @event {{ tabId: string }} dds-tab-select - Fired when select a new tab.
  *
  * @slot - The tab items.
  *
@@ -5004,13 +5002,13 @@ export declare class DapDSTableRow extends DdsElement {
  * @property {boolean} subtle - The weight of the label. Default is `false`
  * @property {boolean} autofocus - The autofocus state of the textarea.
  *
- * @event dds-count-change - Fires when the count of the textarea changes.
- * @event dds-change - Fired when the textarea value changes.
- * @event dds-input - Fired when the textarea value changes.
- * @event dds-keydown - Fired when a key is pressed down.
- * @event dds-blur - Fired when the textarea loses focus.
- * @event dds-focus - Emitted when the textarea gains focus.
- * @event dds-select - Emitted when select text in textarea.
+ * @event {{ value: number }} dds-count-change - Fires when the count of the textarea changes.
+ * @event {{ value: string }} dds-change - Fired when the textarea value changes.
+ * @event {{ value: string }} dds-input - Fired when the textarea value changes.
+ * @event {{ value: string, originalEvent: Event }} dds-keydown - Fired when a key is pressed down.
+ * @event {{ void }} dds-blur - Fired when the textarea loses focus.
+ * @event {{ void }} dds-focus - Emitted when the textarea gains focus.
+ * @event {{ value: string }} dds-select - Emitted when select text in textarea.
  *
  * @slot feedback-icon - The custom icon of the feedback.
  *
@@ -5120,7 +5118,7 @@ export declare class DapDSTimelineItem extends DdsElement {
  *
  * @property {'sm' | 'lg'} size - The size of the toc. Default is `lg`.
  *
- * @event dds-anchor-change - Event that is triggered when the anchor changes.
+ * @event {{ selectedItem: HTMLAnchorElement, anchorElement: IntersectionObserverEntry | HTMLElement }} dds-anchor-change - Event that is triggered when the anchor changes.
  *
  * @csspart base - The main container of the toc.
  *
@@ -5324,11 +5322,11 @@ export declare class DapDSTooltip extends DdsElement {
  * @property {string} footer - Whether the tray should have a footer. Default is false.
  * @property {string} header - Whether the tray should have a header. Default is false.
  *
- * @event dds-before-open - Fires before the tray opens.
- * @event dds-opened - Fires after the tray opens.
- * @event dds-before-close - Fires before the tray closes.
- * @event dds-closed - Fires after the tray closed.
- * @event dds-close - Fires when the tray is closes. You can prevent the tray from closing by calling `event.preventDefault()`.
+ * @event {{ void }} dds-before-open - Fires before the tray opens.
+ * @event {{ void }} dds-opened - Fires after the tray opens.
+ * @event {{ void }} dds-before-close - Fires before the tray closes.
+ * @event {{ void }} dds-closed - Fires after the tray closed.
+ * @event {{ void }} dds-close - Fires when the tray is closes. You can prevent the tray from closing by calling `event.preventDefault()`.
  *
  * @slot - The content of the tray.
  * @slot header - The header of the tray.