@esri/calcite-components 1.0.0-next.481 → 1.0.0-next.482

package/dist/types/components.d.ts

@@ -2020,10 +2020,6 @@ export namespace Components {
           * When true, prevents the `calcite-modal` from expanding to the entire screen on mobile devices.
          */
         "docked": boolean;
-        /**
-          * Specify the initial focus when the `calcite-modal` is first opened.
-         */
-        "firstFocus": HTMLElement;
         /**
           * Focus the first interactive element.
           * @param el
@@ -3572,6 +3568,258 @@ export namespace Components {
         "value": any;
     }
 }
+export interface CalciteAccordionCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLCalciteAccordionElement;
+}
+export interface CalciteAccordionItemCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLCalciteAccordionItemElement;
+}
+export interface CalciteActionCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLCalciteActionElement;
+}
+export interface CalciteActionBarCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLCalciteActionBarElement;
+}
+export interface CalciteActionMenuCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLCalciteActionMenuElement;
+}
+export interface CalciteActionPadCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLCalciteActionPadElement;
+}
+export interface CalciteAlertCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLCalciteAlertElement;
+}
+export interface CalciteBlockCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLCalciteBlockElement;
+}
+export interface CalciteBlockSectionCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLCalciteBlockSectionElement;
+}
+export interface CalciteCardCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLCalciteCardElement;
+}
+export interface CalciteCheckboxCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLCalciteCheckboxElement;
+}
+export interface CalciteChipCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLCalciteChipElement;
+}
+export interface CalciteColorPickerCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLCalciteColorPickerElement;
+}
+export interface CalciteColorPickerHexInputCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLCalciteColorPickerHexInputElement;
+}
+export interface CalciteComboboxCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLCalciteComboboxElement;
+}
+export interface CalciteComboboxItemCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLCalciteComboboxItemElement;
+}
+export interface CalciteDatePickerCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLCalciteDatePickerElement;
+}
+export interface CalciteDatePickerDayCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLCalciteDatePickerDayElement;
+}
+export interface CalciteDatePickerMonthCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLCalciteDatePickerMonthElement;
+}
+export interface CalciteDatePickerMonthHeaderCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLCalciteDatePickerMonthHeaderElement;
+}
+export interface CalciteDropdownCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLCalciteDropdownElement;
+}
+export interface CalciteDropdownGroupCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLCalciteDropdownGroupElement;
+}
+export interface CalciteDropdownItemCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLCalciteDropdownItemElement;
+}
+export interface CalciteFilterCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLCalciteFilterElement;
+}
+export interface CalciteHandleCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLCalciteHandleElement;
+}
+export interface CalciteInlineEditableCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLCalciteInlineEditableElement;
+}
+export interface CalciteInputCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLCalciteInputElement;
+}
+export interface CalciteInputDatePickerCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLCalciteInputDatePickerElement;
+}
+export interface CalciteInputTimePickerCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLCalciteInputTimePickerElement;
+}
+export interface CalciteLabelCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLCalciteLabelElement;
+}
+export interface CalciteModalCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLCalciteModalElement;
+}
+export interface CalciteNoticeCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLCalciteNoticeElement;
+}
+export interface CalciteOptionCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLCalciteOptionElement;
+}
+export interface CalciteOptionGroupCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLCalciteOptionGroupElement;
+}
+export interface CalcitePaginationCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLCalcitePaginationElement;
+}
+export interface CalcitePanelCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLCalcitePanelElement;
+}
+export interface CalcitePickListCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLCalcitePickListElement;
+}
+export interface CalcitePickListItemCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLCalcitePickListItemElement;
+}
+export interface CalcitePopoverCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLCalcitePopoverElement;
+}
+export interface CalciteRadioButtonCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLCalciteRadioButtonElement;
+}
+export interface CalciteRadioButtonGroupCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLCalciteRadioButtonGroupElement;
+}
+export interface CalciteRadioGroupCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLCalciteRadioGroupElement;
+}
+export interface CalciteRadioGroupItemCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLCalciteRadioGroupItemElement;
+}
+export interface CalciteRatingCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLCalciteRatingElement;
+}
+export interface CalciteSelectCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLCalciteSelectElement;
+}
+export interface CalciteShellPanelCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLCalciteShellPanelElement;
+}
+export interface CalciteSliderCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLCalciteSliderElement;
+}
+export interface CalciteSortableListCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLCalciteSortableListElement;
+}
+export interface CalciteSplitButtonCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLCalciteSplitButtonElement;
+}
+export interface CalciteStepperCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLCalciteStepperElement;
+}
+export interface CalciteStepperItemCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLCalciteStepperItemElement;
+}
+export interface CalciteSwitchCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLCalciteSwitchElement;
+}
+export interface CalciteTabCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLCalciteTabElement;
+}
+export interface CalciteTabNavCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLCalciteTabNavElement;
+}
+export interface CalciteTabTitleCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLCalciteTabTitleElement;
+}
+export interface CalciteTileSelectCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLCalciteTileSelectElement;
+}
+export interface CalciteTimePickerCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLCalciteTimePickerElement;
+}
+export interface CalciteTipCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLCalciteTipElement;
+}
+export interface CalciteTipManagerCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLCalciteTipManagerElement;
+}
+export interface CalciteTreeCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLCalciteTreeElement;
+}
+export interface CalciteTreeItemCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLCalciteTreeItemElement;
+}
+export interface CalciteValueListCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLCalciteValueListElement;
+}
+export interface CalciteValueListItemCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLCalciteValueListItemElement;
+}
 declare global {
     interface HTMLCalciteAccordionElement extends Components.CalciteAccordion, HTMLStencilElement {
     }
@@ -4293,7 +4541,7 @@ declare namespace LocalJSX {
           * Emitted when the action has been clicked.
           * @deprecated use onClick instead.
          */
-        "onCalciteActionClick"?: (event: CustomEvent<any>) => void;
+        "onCalciteActionClick"?: (event: CalciteActionCustomEvent<any>) => void;
         /**
           * Specifies the size of the action.
          */
@@ -4327,7 +4575,7 @@ declare namespace LocalJSX {
         /**
           * Emitted when expanded has been toggled.
          */
-        "onCalciteActionBarToggle"?: (event: CustomEvent<any>) => void;
+        "onCalciteActionBarToggle"?: (event: CalciteActionBarCustomEvent<any>) => void;
         /**
           * Disables automatically overflowing actions that won't fit into menus.
          */
@@ -4383,7 +4631,7 @@ declare namespace LocalJSX {
         /**
           * Emitted when the open property has changed.
          */
-        "onCalciteActionMenuOpenChange"?: (event: CustomEvent<any>) => void;
+        "onCalciteActionMenuOpenChange"?: (event: CalciteActionMenuCustomEvent<any>) => void;
         /**
           * Opens the action menu.
          */
@@ -4426,7 +4674,7 @@ declare namespace LocalJSX {
         /**
           * Emitted when expanded has been toggled.
          */
-        "onCalciteActionPadToggle"?: (event: CustomEvent<any>) => void;
+        "onCalciteActionPadToggle"?: (event: CalciteActionPadCustomEvent<any>) => void;
         /**
           * Arranges the component depending on the elements 'dir' property.
          */
@@ -4469,11 +4717,11 @@ declare namespace LocalJSX {
         /**
           * Fired when an alert is closed
          */
-        "onCalciteAlertClose"?: (event: CustomEvent<any>) => void;
+        "onCalciteAlertClose"?: (event: CalciteAlertCustomEvent<any>) => void;
         /**
           * Fired when an alert is opened
          */
-        "onCalciteAlertOpen"?: (event: CustomEvent<any>) => void;
+        "onCalciteAlertOpen"?: (event: CalciteAlertCustomEvent<any>) => void;
         /**
           * specify the placement of the alert
          */
@@ -4553,7 +4801,7 @@ declare namespace LocalJSX {
         /**
           * Emitted when the header has been clicked.
          */
-        "onCalciteBlockToggle"?: (event: CustomEvent<any>) => void;
+        "onCalciteBlockToggle"?: (event: CalciteBlockCustomEvent<any>) => void;
         /**
           * When true, the block's content will be displayed.
          */
@@ -4579,7 +4827,7 @@ declare namespace LocalJSX {
         /**
           * Emitted when the header has been clicked.
          */
-        "onCalciteBlockSectionToggle"?: (event: CustomEvent<any>) => void;
+        "onCalciteBlockSectionToggle"?: (event: CalciteBlockSectionCustomEvent<any>) => void;
         /**
           * When true, the block's section content will be displayed.
          */
@@ -4704,7 +4952,7 @@ declare namespace LocalJSX {
         /**
           * Fired when a selectable card is selected
          */
-        "onCalciteCardSelect"?: (event: CustomEvent<any>) => void;
+        "onCalciteCardSelect"?: (event: CalciteCardCustomEvent<any>) => void;
         /**
           * Indicates whether the card is selectable.
          */
@@ -4738,7 +4986,7 @@ declare namespace LocalJSX {
         /**
           * Emitted when the checkbox checked status changes
          */
-        "onCalciteCheckboxChange"?: (event: CustomEvent<any>) => void;
+        "onCalciteCheckboxChange"?: (event: CalciteCheckboxCustomEvent<any>) => void;
         /**
           * specify the scale of the checkbox, defaults to m
          */
@@ -4777,7 +5025,7 @@ declare namespace LocalJSX {
         /**
           * Emitted when the dismiss button is clicked
          */
-        "onCalciteChipDismiss"?: (event: CustomEvent<any>) => void;
+        "onCalciteChipDismiss"?: (event: CalciteChipCustomEvent<any>) => void;
         /**
           * specify the scale of the chip, defaults to m
          */
@@ -4915,11 +5163,11 @@ declare namespace LocalJSX {
         /**
           * Fires when the color value has changed.
          */
-        "onCalciteColorPickerChange"?: (event: CustomEvent<any>) => void;
+        "onCalciteColorPickerChange"?: (event: CalciteColorPickerCustomEvent<any>) => void;
         /**
           * Fires as the color value changes.  This is similar to the change event with the exception of dragging. When dragging the color field or hue slider thumb, this event fires as the thumb is moved.
          */
-        "onCalciteColorPickerInput"?: (event: CustomEvent<any>) => void;
+        "onCalciteColorPickerInput"?: (event: CalciteColorPickerCustomEvent<any>) => void;
         /**
           * The scale of the color picker.
          */
@@ -4953,7 +5201,7 @@ declare namespace LocalJSX {
         /**
           * Emitted when the hex value changes.
          */
-        "onCalciteColorPickerHexInputChange"?: (event: CustomEvent<any>) => void;
+        "onCalciteColorPickerHexInputChange"?: (event: CalciteColorPickerHexInputCustomEvent<any>) => void;
         /**
           * The component's scale.
          */
@@ -5015,15 +5263,15 @@ declare namespace LocalJSX {
         /**
           * Called when the selected item(s) changes.
          */
-        "onCalciteComboboxChange"?: (event: CustomEvent<{ selectedItems: HTMLCalciteComboboxItemElement[] }>) => void;
+        "onCalciteComboboxChange"?: (event: CalciteComboboxCustomEvent<{ selectedItems: HTMLCalciteComboboxItemElement[] }>) => void;
         /**
           * Called when a selected item in the combobox is dismissed via its chip
          */
-        "onCalciteComboboxChipDismiss"?: (event: CustomEvent<any>) => void;
+        "onCalciteComboboxChipDismiss"?: (event: CalciteComboboxCustomEvent<any>) => void;
         /**
           * Called when the user has entered text to filter the options list
          */
-        "onCalciteComboboxFilterChange"?: (event: CustomEvent<{
+        "onCalciteComboboxFilterChange"?: (event: CalciteComboboxCustomEvent<{
     visibleItems: HTMLCalciteComboboxItemElement[];
     text: string;
   }>) => void;
@@ -5031,7 +5279,7 @@ declare namespace LocalJSX {
           * Called when the selected items set changes
           * @deprecated use calciteComboboxChange instead
          */
-        "onCalciteLookupChange"?: (event: CustomEvent<HTMLCalciteComboboxItemElement[]>) => void;
+        "onCalciteLookupChange"?: (event: CalciteComboboxCustomEvent<HTMLCalciteComboboxItemElement[]>) => void;
         /**
           * Describes the type of positioning to use for the overlaid content. If your element is in a fixed container, use the 'fixed' value.
          */
@@ -5081,7 +5329,7 @@ declare namespace LocalJSX {
         /**
           * Emitted whenever the item is selected or unselected.
          */
-        "onCalciteComboboxItemChange"?: (event: CustomEvent<any>) => void;
+        "onCalciteComboboxItemChange"?: (event: CalciteComboboxItemCustomEvent<any>) => void;
         /**
           * Set this to true to pre-select an item. Toggles when an item is checked/unchecked.
          */
@@ -5162,12 +5410,12 @@ declare namespace LocalJSX {
         /**
           * Trigger calcite date change when a user changes the date.
          */
-        "onCalciteDatePickerChange"?: (event: CustomEvent<Date>) => void;
+        "onCalciteDatePickerChange"?: (event: CalciteDatePickerCustomEvent<Date>) => void;
         /**
           * Trigger calcite date change when a user changes the date range.
           * @see [DateRangeChange](https://github.com/Esri/calcite-components/blob/master/src/components/date-picker/interfaces.ts#L1)
          */
-        "onCalciteDatePickerRangeChange"?: (event: CustomEvent<DateRangeChange>) => void;
+        "onCalciteDatePickerRangeChange"?: (event: CalciteDatePickerCustomEvent<DateRangeChange>) => void;
         /**
           * Disables the default behaviour on the third click of narrowing or extending the range and instead starts a new range.
          */
@@ -5231,7 +5479,7 @@ declare namespace LocalJSX {
         /**
           * Emitted when user selects day
          */
-        "onCalciteDaySelect"?: (event: CustomEvent<any>) => void;
+        "onCalciteDaySelect"?: (event: CalciteDatePickerDayCustomEvent<any>) => void;
         /**
           * Showing date range
          */
@@ -5281,11 +5529,11 @@ declare namespace LocalJSX {
         /**
           * Active date for the user keyboard access.
          */
-        "onCalciteDatePickerActiveDateChange"?: (event: CustomEvent<any>) => void;
+        "onCalciteDatePickerActiveDateChange"?: (event: CalciteDatePickerMonthCustomEvent<any>) => void;
         /**
           * Event emitted when user selects the date.
          */
-        "onCalciteDatePickerSelect"?: (event: CustomEvent<any>) => void;
+        "onCalciteDatePickerSelect"?: (event: CalciteDatePickerMonthCustomEvent<any>) => void;
         /**
           * specify the scale of the date picker
          */
@@ -5339,7 +5587,7 @@ declare namespace LocalJSX {
         /**
           * Changes to active date
          */
-        "onCalciteDatePickerSelect"?: (event: CustomEvent<Date>) => void;
+        "onCalciteDatePickerSelect"?: (event: CalciteDatePickerMonthHeaderCustomEvent<Date>) => void;
         /**
           * specify the scale of the date picker
          */
@@ -5373,15 +5621,15 @@ declare namespace LocalJSX {
         /**
           * fires when a dropdown has been closed
          */
-        "onCalciteDropdownClose"?: (event: CustomEvent<void>) => void;
+        "onCalciteDropdownClose"?: (event: CalciteDropdownCustomEvent<void>) => void;
         /**
           * fires when a dropdown has been opened
          */
-        "onCalciteDropdownOpen"?: (event: CustomEvent<void>) => void;
+        "onCalciteDropdownOpen"?: (event: CalciteDropdownCustomEvent<void>) => void;
         /**
           * fires when a dropdown item has been selected or deselected
          */
-        "onCalciteDropdownSelect"?: (event: CustomEvent<void>) => void;
+        "onCalciteDropdownSelect"?: (event: CalciteDropdownCustomEvent<void>) => void;
         /**
           * Describes the type of positioning to use for the overlaid content. If your element is in a fixed container, use the 'fixed' value.
          */
@@ -5521,7 +5769,7 @@ declare namespace LocalJSX {
         /**
           * This event fires when the filter text changes.
          */
-        "onCalciteFilterChange"?: (event: CustomEvent<void>) => void;
+        "onCalciteFilterChange"?: (event: CalciteFilterCustomEvent<void>) => void;
         /**
           * Placeholder text for the input element's placeholder attribute
          */
@@ -5567,7 +5815,7 @@ declare namespace LocalJSX {
         /**
           * Emitted when the the handle is activated and the up or down arrow key is pressed.
          */
-        "onCalciteHandleNudge"?: (event: CustomEvent<any>) => void;
+        "onCalciteHandleNudge"?: (event: CalciteHandleCustomEvent<any>) => void;
         /**
           * Value for the button title attribute
          */
@@ -5630,11 +5878,11 @@ declare namespace LocalJSX {
         /**
           * Emitted when the cancel button gets clicked.
          */
-        "onCalciteInlineEditableEditCancel"?: (event: CustomEvent<void>) => void;
+        "onCalciteInlineEditableEditCancel"?: (event: CalciteInlineEditableCustomEvent<void>) => void;
         /**
           * Emitted when the check button gets clicked.
          */
-        "onCalciteInlineEditableEditConfirm"?: (event: CustomEvent<void>) => void;
+        "onCalciteInlineEditableEditConfirm"?: (event: CalciteInlineEditableCustomEvent<void>) => void;
         /**
           * specify the scale of the inline-editable component, defaults to the scale of the wrapped calcite-input or the scale of the closest wrapping component with a set scale
          */
@@ -5730,11 +5978,11 @@ declare namespace LocalJSX {
         /**
           * This event fires each time a new value is typed and committed.
          */
-        "onCalciteInputChange"?: (event: CustomEvent<void>) => void;
+        "onCalciteInputChange"?: (event: CalciteInputCustomEvent<void>) => void;
         /**
           * This event fires each time a new value is typed.
          */
-        "onCalciteInputInput"?: (event: CustomEvent<any>) => void;
+        "onCalciteInputInput"?: (event: CalciteInputCustomEvent<any>) => void;
         /**
           * explicitly whitelist placeholder attribute
          */
@@ -5865,17 +6113,17 @@ declare namespace LocalJSX {
           * Trigger calcite date change when a user changes the date.
           * @deprecated use `calciteInputDatePickerChange` instead.
          */
-        "onCalciteDatePickerChange"?: (event: CustomEvent<Date>) => void;
+        "onCalciteDatePickerChange"?: (event: CalciteInputDatePickerCustomEvent<Date>) => void;
         /**
           * Trigger calcite date change when a user changes the date range.
           * @see [DateRangeChange](https://github.com/Esri/calcite-components/blob/master/src/components/calcite-date-picker/interfaces.ts#L1)
           * @deprecated use `calciteInputDatePickerChange` instead.
          */
-        "onCalciteDatePickerRangeChange"?: (event: CustomEvent<DateRangeChange>) => void;
+        "onCalciteDatePickerRangeChange"?: (event: CalciteInputDatePickerCustomEvent<DateRangeChange>) => void;
         /**
           * This event fires when the input date picker value changes.
          */
-        "onCalciteInputDatePickerChange"?: (event: CustomEvent<void>) => void;
+        "onCalciteInputDatePickerChange"?: (event: CalciteInputDatePickerCustomEvent<void>) => void;
         /**
           * Describes the type of positioning to use for the overlaid content. If your element is in a fixed container, use the 'fixed' value.
          */
@@ -6003,7 +6251,7 @@ declare namespace LocalJSX {
         /**
           * Fires when the time value is changed as a result of user input.
          */
-        "onCalciteInputTimePickerChange"?: (event: CustomEvent<string>) => void;
+        "onCalciteInputTimePickerChange"?: (event: CalciteInputTimePickerCustomEvent<string>) => void;
         /**
           * Determines where the popover will be positioned relative to the input.
           * @see [PopperPlacement](https://github.com/Esri/calcite-components/blob/master/src/utils/popper.ts#L25)
@@ -6193,10 +6441,6 @@ declare namespace LocalJSX {
           * When true, prevents the `calcite-modal` from expanding to the entire screen on mobile devices.
          */
         "docked"?: boolean;
-        /**
-          * Specify the initial focus when the `calcite-modal` is first opened.
-         */
-        "firstFocus"?: HTMLElement;
         /**
           * Set the `calcite-modal` to always be fullscreen (overrides width).
          */
@@ -6212,11 +6456,11 @@ declare namespace LocalJSX {
         /**
           * Emits when `calcite-modal` finishes the close animation.
          */
-        "onCalciteModalClose"?: (event: CustomEvent<any>) => void;
+        "onCalciteModalClose"?: (event: CalciteModalCustomEvent<any>) => void;
         /**
           * Emits when `calcite-modal` finishes the open animation.
          */
-        "onCalciteModalOpen"?: (event: CustomEvent<any>) => void;
+        "onCalciteModalOpen"?: (event: CalciteModalCustomEvent<any>) => void;
         /**
           * Specify the scale of `calcite-modal`.
          */
@@ -6251,11 +6495,11 @@ declare namespace LocalJSX {
         /**
           * Fired when `calcite-notice` is closed.
          */
-        "onCalciteNoticeClose"?: (event: CustomEvent<any>) => void;
+        "onCalciteNoticeClose"?: (event: CalciteNoticeCustomEvent<any>) => void;
         /**
           * Fired when `calcite-notice` is opened.
          */
-        "onCalciteNoticeOpen"?: (event: CustomEvent<any>) => void;
+        "onCalciteNoticeOpen"?: (event: CalciteNoticeCustomEvent<any>) => void;
         /**
           * Specify the scale of `calcite-notice`.
          */
@@ -6302,12 +6546,12 @@ declare namespace LocalJSX {
           * Emitted whenever the selected page changes.
           * @see [PaginationDetail](https://github.com/Esri/calcite-components/blob/master/src/components/pagination/calcite-pagination.tsx#L18)
          */
-        "onCalcitePaginationChange"?: (event: CustomEvent<PaginationDetail>) => void;
+        "onCalcitePaginationChange"?: (event: CalcitePaginationCustomEvent<PaginationDetail>) => void;
         /**
           * Emitted whenever the selected page changes.
           * @deprecated use calcitePaginationChange instead
          */
-        "onCalcitePaginationUpdate"?: (event: CustomEvent<PaginationDetail>) => void;
+        "onCalcitePaginationUpdate"?: (event: CalcitePaginationCustomEvent<PaginationDetail>) => void;
         /**
           * The scale of the pagination
          */
@@ -6383,20 +6627,20 @@ declare namespace LocalJSX {
         /**
           * Emitted when the back button has been clicked.
          */
-        "onCalcitePanelBackClick"?: (event: CustomEvent<any>) => void;
+        "onCalcitePanelBackClick"?: (event: CalcitePanelCustomEvent<any>) => void;
         /**
           * Emitted when the close button has been clicked.
          */
-        "onCalcitePanelDismiss"?: (event: CustomEvent<any>) => void;
+        "onCalcitePanelDismiss"?: (event: CalcitePanelCustomEvent<any>) => void;
         /**
           * Emitted when the close button has been clicked.
           * @deprecated use calcitePanelDismiss instead.
          */
-        "onCalcitePanelDismissedChange"?: (event: CustomEvent<any>) => void;
+        "onCalcitePanelDismissedChange"?: (event: CalcitePanelCustomEvent<any>) => void;
         /**
           * Emitted when the content has been scrolled.
          */
-        "onCalcitePanelScroll"?: (event: CustomEvent<any>) => void;
+        "onCalcitePanelScroll"?: (event: CalcitePanelCustomEvent<any>) => void;
         /**
           * Shows a back button in the header.
          */
@@ -6438,7 +6682,7 @@ declare namespace LocalJSX {
         /**
           * Emitted when any of the item selections have changed.
          */
-        "onCalciteListChange"?: (event: CustomEvent<Map<string, HTMLCalcitePickListItemElement>>) => void;
+        "onCalciteListChange"?: (event: CalcitePickListCustomEvent<Map<string, HTMLCalcitePickListItemElement>>) => void;
         /**
           * When true and single-selection is enabled, the selection will change when navigating items via the keyboard.
          */
@@ -6488,7 +6732,7 @@ declare namespace LocalJSX {
         /**
           * Emitted whenever the item is selected or unselected.
          */
-        "onCalciteListItemChange"?: (event: CustomEvent<{
+        "onCalciteListItemChange"?: (event: CalcitePickListItemCustomEvent<{
     item: HTMLCalcitePickListItemElement;
     value: any;
     selected: boolean;
@@ -6497,7 +6741,7 @@ declare namespace LocalJSX {
         /**
           * Emitted whenever the remove button is pressed.
          */
-        "onCalciteListItemRemove"?: (event: CustomEvent<void>) => void;
+        "onCalciteListItemRemove"?: (event: CalcitePickListItemCustomEvent<void>) => void;
         /**
           * Set this to true to display a remove action that removes the item from the list.
          */
@@ -6566,11 +6810,11 @@ declare namespace LocalJSX {
         /**
           * Fired when the popover is closed
          */
-        "onCalcitePopoverClose"?: (event: CustomEvent<any>) => void;
+        "onCalcitePopoverClose"?: (event: CalcitePopoverCustomEvent<any>) => void;
         /**
           * Fired when the popover is opened
          */
-        "onCalcitePopoverOpen"?: (event: CustomEvent<any>) => void;
+        "onCalcitePopoverOpen"?: (event: CalcitePopoverCustomEvent<any>) => void;
         /**
           * Display and position the component.
          */
@@ -6650,7 +6894,7 @@ declare namespace LocalJSX {
         /**
           * Fires only when the radio button is checked.  This behavior is identical to the native HTML input element. Since this event does not fire when the radio button is unchecked, it's not recommended to attach a listener for this event directly on the element, but instead either attach it to a node that contains all of the radio buttons in the group or use the calciteRadioButtonGroupChange event if using this with calcite-radio-button-group.
          */
-        "onCalciteRadioButtonChange"?: (event: CustomEvent<any>) => void;
+        "onCalciteRadioButtonChange"?: (event: CalciteRadioButtonCustomEvent<any>) => void;
         /**
           * Requires that a value is selected for the radio button group before the parent form will submit.
          */
@@ -6684,7 +6928,7 @@ declare namespace LocalJSX {
         /**
           * Emitted when the radio button group has changed.
          */
-        "onCalciteRadioButtonGroupChange"?: (event: CustomEvent<any>) => void;
+        "onCalciteRadioButtonGroupChange"?: (event: CalciteRadioButtonGroupCustomEvent<any>) => void;
         /**
           * Requires that a value is selected for the radio button group before the parent form will submit.
          */
@@ -6714,7 +6958,7 @@ declare namespace LocalJSX {
         /**
           * Fired when the selected option changes, event detail is the new value
          */
-        "onCalciteRadioGroupChange"?: (event: CustomEvent<string>) => void;
+        "onCalciteRadioGroupChange"?: (event: CalciteRadioGroupCustomEvent<string>) => void;
         /**
           * The scale of the radio group
          */
@@ -6784,7 +7028,7 @@ declare namespace LocalJSX {
         /**
           * Fires when the rating value has changed.
          */
-        "onCalciteRatingChange"?: (event: CustomEvent<{ value: number }>) => void;
+        "onCalciteRatingChange"?: (event: CalciteRatingCustomEvent<{ value: number }>) => void;
         /**
           * is the rating component in a selectable mode
          */
@@ -6829,7 +7073,7 @@ declare namespace LocalJSX {
         /**
           * This event will fire whenever the selected option changes.
          */
-        "onCalciteSelectChange"?: (event: CustomEvent<void>) => void;
+        "onCalciteSelectChange"?: (event: CalciteSelectCustomEvent<void>) => void;
         /**
           * The component scale.
          */
@@ -6890,7 +7134,7 @@ declare namespace LocalJSX {
           * Emitted when collapse has been toggled.
           * @deprecated use a resizeObserver on the shell-panel to listen for changes to its size.
          */
-        "onCalciteShellPanelToggle"?: (event: CustomEvent<any>) => void;
+        "onCalciteShellPanelToggle"?: (event: CalciteShellPanelCustomEvent<any>) => void;
         /**
           * Arranges the component depending on the elements 'dir' property.
          */
@@ -6965,16 +7209,16 @@ declare namespace LocalJSX {
         /**
           * Fires on when the thumb is released on slider If you need to constantly listen to the drag event, please use calciteSliderInput instead
          */
-        "onCalciteSliderChange"?: (event: CustomEvent<any>) => void;
+        "onCalciteSliderChange"?: (event: CalciteSliderCustomEvent<any>) => void;
         /**
           * Fires on all updates to the slider. :warning: Will be fired frequently during drag. If you are performing any expensive operations consider using a debounce or throttle to avoid locking up the main thread.
          */
-        "onCalciteSliderInput"?: (event: CustomEvent<any>) => void;
+        "onCalciteSliderInput"?: (event: CalciteSliderCustomEvent<any>) => void;
         /**
           * Fires on all updates to the slider. :warning: Will be fired frequently during drag. If you are performing any expensive operations consider using a debounce or throttle to avoid locking up the main thread.
           * @deprecated use calciteSliderInput instead
          */
-        "onCalciteSliderUpdate"?: (event: CustomEvent<any>) => void;
+        "onCalciteSliderUpdate"?: (event: CalciteSliderCustomEvent<any>) => void;
         /**
           * Interval to move on page up/page down keys
          */
@@ -7036,7 +7280,7 @@ declare namespace LocalJSX {
         /**
           * Emitted when the order of the list has changed.
          */
-        "onCalciteListOrderChange"?: (event: CustomEvent<any>) => void;
+        "onCalciteListOrderChange"?: (event: CalciteSortableListCustomEvent<any>) => void;
     }
     interface CalciteSplitButton {
         /**
@@ -7066,11 +7310,11 @@ declare namespace LocalJSX {
         /**
           * fired when the primary button is clicked
          */
-        "onCalciteSplitButtonPrimaryClick"?: (event: CustomEvent<any>) => void;
+        "onCalciteSplitButtonPrimaryClick"?: (event: CalciteSplitButtonCustomEvent<any>) => void;
         /**
           * fired when the secondary button is clicked
          */
-        "onCalciteSplitButtonSecondaryClick"?: (event: CustomEvent<any>) => void;
+        "onCalciteSplitButtonSecondaryClick"?: (event: CalciteSplitButtonCustomEvent<any>) => void;
         /**
           * Describes the type of positioning to use for the dropdown. If your element is in a fixed container, use the 'fixed' value.
          */
@@ -7168,7 +7412,7 @@ declare namespace LocalJSX {
         /**
           * Fires when the checked value has changed.
          */
-        "onCalciteSwitchChange"?: (event: CustomEvent<any>) => void;
+        "onCalciteSwitchChange"?: (event: CalciteSwitchCustomEvent<any>) => void;
         /**
           * The scale of the switch
          */
@@ -7198,7 +7442,7 @@ declare namespace LocalJSX {
           * Emitted when the active tab changes
           * @see [TabChangeEventDetail](https://github.com/Esri/calcite-components/blob/master/src/components/tab/interfaces.ts#L1)
          */
-        "onCalciteTabChange"?: (event: CustomEvent<TabChangeEventDetail>) => void;
+        "onCalciteTabChange"?: (event: CalciteTabNavCustomEvent<TabChangeEventDetail>) => void;
         /**
           * Name to use when saving selected tab data to localStorage
          */
@@ -7233,7 +7477,7 @@ declare namespace LocalJSX {
           * Fires when a specific tab is activated. Emits the "tab" property or the index position.
           * @see [TabChangeEventDetail](https://github.com/Esri/calcite-components/blob/master/src/components/tab/interfaces.ts#L1)
          */
-        "onCalciteTabsActivate"?: (event: CustomEvent<TabChangeEventDetail>) => void;
+        "onCalciteTabsActivate"?: (event: CalciteTabTitleCustomEvent<TabChangeEventDetail>) => void;
         /**
           * Optionally include a unique name for the tab title, be sure to also set this name on the associated tab.
          */
@@ -7331,7 +7575,7 @@ declare namespace LocalJSX {
         /**
           * Emits a custom change event.  For checkboxes, it emits when the checkbox is checked or unchecked.  For radios it only emits when it is checked.
          */
-        "onCalciteTileSelectChange"?: (event: CustomEvent<any>) => void;
+        "onCalciteTileSelectChange"?: (event: CalciteTileSelectCustomEvent<any>) => void;
         /**
           * The selection mode of the tile select: radio (single) or checkbox (multiple).
          */
@@ -7453,7 +7697,7 @@ declare namespace LocalJSX {
         /**
           * Emitted when the component has been dismissed.
          */
-        "onCalciteTipDismiss"?: (event: CustomEvent<any>) => void;
+        "onCalciteTipDismiss"?: (event: CalciteTipCustomEvent<any>) => void;
         /**
           * The selected state of the tip if it is being used inside a `calcite-tip-manager`.
          */
@@ -7497,12 +7741,12 @@ declare namespace LocalJSX {
         /**
           * Emitted when the `calcite-tip-manager` has been closed.
          */
-        "onCalciteTipManagerClose"?: (event: CustomEvent<any>) => void;
+        "onCalciteTipManagerClose"?: (event: CalciteTipManagerCustomEvent<any>) => void;
         /**
           * Emitted when the `calcite-tip-manager` has been toggled open or closed.
           * @deprecated use calciteTipManagerClose instead.
          */
-        "onCalciteTipManagerToggle"?: (event: CustomEvent<any>) => void;
+        "onCalciteTipManagerToggle"?: (event: CalciteTipManagerCustomEvent<any>) => void;
     }
     interface CalciteTooltip {
         /**
@@ -7557,7 +7801,7 @@ declare namespace LocalJSX {
           * Emits when the user selects/deselects tree items. An object including an array of selected items will be passed in the event's "detail" property.
           * @see [TreeSelectDetail](https://github.com/Esri/calcite-components/blob/master/src/components/tree/interfaces.ts#L1)
          */
-        "onCalciteTreeSelect"?: (event: CustomEvent<TreeSelectDetail>) => void;
+        "onCalciteTreeSelect"?: (event: CalciteTreeCustomEvent<TreeSelectDetail>) => void;
         /**
           * Specify the scale of the tree.
          */
@@ -7611,11 +7855,11 @@ declare namespace LocalJSX {
         /**
           * Emits when any of the list item selections have changed.
          */
-        "onCalciteListChange"?: (event: CustomEvent<Map<string, HTMLCalciteValueListItemElement>>) => void;
+        "onCalciteListChange"?: (event: CalciteValueListCustomEvent<Map<string, HTMLCalciteValueListItemElement>>) => void;
         /**
           * Emits when the order of the list has changed.
          */
-        "onCalciteListOrderChange"?: (event: CustomEvent<any[]>) => void;
+        "onCalciteListOrderChange"?: (event: CalciteValueListCustomEvent<any[]>) => void;
         /**
           * When true and single-selection is enabled, the selection changes when navigating list items via the keyboard.
          */
@@ -7650,7 +7894,7 @@ declare namespace LocalJSX {
         /**
           * Emits when the remove button is pressed.
          */
-        "onCalciteListItemRemove"?: (event: CustomEvent<void>) => void;
+        "onCalciteListItemRemove"?: (event: CalciteValueListItemCustomEvent<void>) => void;
         /**
           * When true, adds an action to remove the list item.
          */