@esri/calcite-components 1.0.0-beta.82 → 1.0.0-beta.83

package/dist/types/components.d.ts

@@ -6,8 +6,8 @@
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
 import { AccordionAppearance } from "./components/accordion/interfaces";
-import { Alignment, Appearance, Columns, FlipContext, Layout, Position, Scale, Status, Width } from "./components/interfaces";
-import { ComputedPlacement, MenuPlacement, OverlayPositioning, PopperPlacement } from "./utils/popper";
+import { Alignment, Appearance, Columns, FlipContext, Layout, LogicalFlowPosition, Position, Scale, Status, Width } from "./components/interfaces";
+import { ComputedPlacement, MenuPlacement, OverlayPositioning, PopperPlacement, ReferenceElement } from "./utils/popper";
 import { AlertDuration, AlertPlacement, StatusColor } from "./components/alert/interfaces";
 import { HeadingLevel } from "./components/functional/Heading";
 import { BlockSectionToggleDisplay } from "./components/block-section/interfaces";
@@ -171,6 +171,7 @@ export namespace Components {
         "scale": Scale;
         /**
           * Sets focus on the component.
+          * @param focusId
          */
         "setFocus": (focusId?: "expand-toggle") => Promise<void>;
     }
@@ -266,6 +267,7 @@ export namespace Components {
         "scale": Scale;
         /**
           * Sets focus on the component.
+          * @param focusId
          */
         "setFocus": (focusId?: "expand-toggle") => Promise<void>;
     }
@@ -357,10 +359,12 @@ export namespace Components {
         "headingLevel": HeadingLevel;
         /**
           * Aria-label for collapsing the toggle and tooltip used for the toggle when expanded.
+          * @default "Collapse"
          */
         "intlCollapse"?: string;
         /**
           * Aria-label for expanding the toggle and tooltip used for the toggle when collapsed.
+          * @default "Expand"
          */
         "intlExpand"?: string;
         /**
@@ -532,6 +536,7 @@ export namespace Components {
           * Indicates whether the card is selected.
          */
         "selected": boolean;
+        "thumbnailPosition": LogicalFlowPosition;
     }
     interface CalciteCheckbox {
         /**
@@ -911,6 +916,7 @@ export namespace Components {
         "textLabel": string;
         /**
           * Used to toggle the selection state. By default this won't trigger an event. The first argument allows the value to be coerced, rather than swapping values.
+          * @param coerce
          */
         "toggleSelected": (coerce?: boolean) => Promise<void>;
         /**
@@ -1199,9 +1205,9 @@ export namespace Components {
          */
         "type": "hover" | "click";
         /**
-          * specify the width of dropdown, defaults to m
+          * specify the width of dropdown
          */
-        "width": Scale;
+        "width"?: Scale;
     }
     interface CalciteDropdownGroup {
         /**
@@ -1494,7 +1500,7 @@ export namespace Components {
         /**
           * BCP 47 language tag for desired language and country format
          */
-        "locale"?: string;
+        "locale": string;
         /**
           * Toggles locale formatting for numbers.
          */
@@ -1528,6 +1534,10 @@ export namespace Components {
           * specify the placement of the number buttons
          */
         "numberButtonType"?: InputPlacement;
+        /**
+          * standard UniCode numeral system tag for localization
+         */
+        "numberingSystem"?: string;
         /**
           * explicitly whitelist placeholder attribute
          */
@@ -1561,7 +1571,7 @@ export namespace Components {
          */
         "step"?: number | "any";
         /**
-          * optionally add suffix  *
+          * optionally add suffix
          */
         "suffixText"?: string;
         /**
@@ -1900,11 +1910,11 @@ export namespace Components {
     }
     interface CalciteList {
         /**
-          * When true, disabled prevents user interaction.
+          * When true, prevents user interaction.
          */
         "disabled": boolean;
         /**
-          * Number at which section headings should start for this component.
+          * Number at which section headings should start for the list.
          */
         "headingLevel": HeadingLevel;
         /**
@@ -1914,15 +1924,15 @@ export namespace Components {
     }
     interface CalciteListItem {
         /**
-          * An optional description for this item.  This will appear below the label text.
+          * An optional description for the list item. Displays below the label text.
          */
         "description": string;
         /**
-          * When true, disabled prevents interaction.
+          * When true, prevents user interaction.
          */
         "disabled": boolean;
         /**
-          * The label text of the list item. This will appear above the description text.
+          * The label text of the list item. Displays above the description text.
          */
         "label": string;
         /**
@@ -1936,151 +1946,151 @@ export namespace Components {
     }
     interface CalciteListItemGroup {
         /**
-          * The title used for all nested `calcite-list-item` rows.
+          * The title for all nested `calcite-list-item` rows.
          */
         "heading": string;
         /**
-          * Number at which section headings should start for this component.
+          * Number at which section headings should start for the group.
          */
         "headingLevel": HeadingLevel;
     }
     interface CalciteLoader {
         /**
-          * Show the loader
+          * When true, the loader is active.
          */
         "active": boolean;
         /**
-          * Inline loaders are smaller and will appear to the left of the text
+          * When true, displays smaller and appears to the left of the text.
          */
         "inline": boolean;
         /**
-          * Accessible name for the component
+          * Accessible name for the loader.
          */
         "label": string;
         /**
-          * Turn off spacing around the loader
+          * Disables spacing around the loader.
          */
         "noPadding": boolean;
         /**
-          * Speficy the scale of the loader. Defaults to "m"
+          * Specify the scale of the loader.
          */
         "scale": Scale;
         /**
-          * Text which should appear under the loading indicator (optional)
+          * Text that displays under the loading indicator.
          */
-        "text": string;
+        "text"?: string;
         /**
-          * Use indeterminate if finding actual progress value is impossible
+          * Use indeterminate if finding actual progress value is impossible.
          */
         "type": "indeterminate" | "determinate";
         /**
-          * Percent complete of 100, only valid for determinate indicators
+          * Valid only for determinate indicators. Percent complete of 100.
          */
         "value": number;
     }
     interface CalciteModal {
         /**
-          * Add the active attribute to open the modal
+          * When true, the `calcite-modal` is active.
          */
         "active": boolean;
         /**
-          * Background color of modal content
+          * Sets the background color of `calcite-modal` content.
          */
         "backgroundColor": ModalBackgroundColor;
         /**
-          * Optionally pass a function to run before close
+          * Passes a function to run before the `calcite-modal` closes.
          */
-        "beforeClose": (el: HTMLElement) => Promise<void>;
+        "beforeClose"?: (el: HTMLElement) => Promise<void>;
         /**
-          * Adds a color bar at the top for visual impact, Use color to add importance to destructive/workflow dialogs.
+          * Adds a color bar to the top of `calcite-modal` for visual impact. Use color to add importance to destructive or workflow dialogs.
          */
         "color"?: "red" | "blue";
         /**
-          * Disables the display a close button within the Modal
+          * When true, disables the close button within the `calcite-modal`.
          */
         "disableCloseButton": boolean;
         /**
-          * Flag to disable the default close on escape behavior
+          * When true, disables the default close on escape behavior.
          */
         "disableEscape": boolean;
         /**
-          * Disables the closing of the Modal when clicked outside.
+          * When true, disables the closing of the `calcite-modal` when clicked outside.
          */
         "disableOutsideClose": boolean;
         /**
-          * Prevent the modal from taking up the entire screen on mobile
+          * When true, prevents the `calcite-modal` from expanding to the entire screen on mobile devices.
          */
         "docked": boolean;
         /**
-          * Specify an element to focus when the modal is first opened
-         */
-        "firstFocus"?: HTMLElement;
-        /**
-          * Focus first interactive element
+          * Focus the first interactive element.
+          * @param el
           * @deprecated use `setFocus` instead.
          */
         "focusElement": (el?: HTMLElement) => Promise<void>;
         /**
-          * Set the modal to always be fullscreen (overrides width)
+          * Set the `calcite-modal` to always be fullscreen (overrides width).
          */
         "fullscreen": boolean;
         /**
-          * Aria label for the close button
+          * Accessible label for the close button.
          */
         "intlClose": string;
         /**
-          * Turn off spacing around the content area slot
+          * When true, disables spacing to the content area slot.
          */
         "noPadding": boolean;
         /**
-          * specify the scale of modal, defaults to m
+          * Specify the scale of `calcite-modal`.
          */
         "scale": Scale;
         /**
-          * Set the scroll top of the modal content
+          * Set the scroll top of the `calcite-modal` content.
+          * @param top
+          * @param left
          */
         "scrollContent": (top?: number, left?: number) => Promise<void>;
         /**
-          * Sets focus on the component.  By default, will try to focus on any focusable content. If there is none, it will focus on the close button. If you want to focus on the close button, you can use the `close-button` focus ID.
+          * Sets focus on the component.  By default, tries to focus on focusable content. If there is none, it will focus on the close button. To focus on the close button, use the `close-button` focus ID.
+          * @param focusId
          */
         "setFocus": (focusId?: "close-button") => Promise<void>;
         /**
-          * Set the width of the modal. Can use stock sizes or pass a number (in pixels)
+          * Set the width of the `calcite-modal`. Can use scale sizes or pass a number (displays in pixels).
          */
         "width": Scale | number;
     }
     interface CalciteNotice {
         /**
-          * Is the notice currently active or not
+          * When true, the `calcite-notice` is active.
          */
         "active": boolean;
         /**
-          * Color for the notice (will apply to top border and icon)
+          * The color for the `calcite-notice`. Color will apply to top border and icon.
          */
         "color": StatusColor;
         /**
-          * Optionally show a button the user can click to dismiss the notice
+          * Shows a button the user can click to dismiss the `calcite-notice`.
          */
-        "dismissible": boolean;
+        "dismissible"?: boolean;
         /**
-          * when used as a boolean set to true, show a default recommended icon. You can also pass a calcite-ui-icon name to this prop to display a requested icon
+          * When present, shows a default recommended icon. You can also pass a calcite-ui-icon name to display a requested icon.
          */
         "icon": string | boolean;
         /**
-          * String for the close button.
+          * Accessible label for the close button.
           * @default "Close"
          */
         "intlClose": string;
         /**
-          * specify the scale of the notice, defaults to m
+          * Specify the scale of `calcite-notice`.
          */
         "scale": Scale;
         /**
-          * Sets focus on the component.
+          * Sets focus on the `calcite-notice`.
          */
         "setFocus": () => Promise<void>;
         /**
-          * specify the width of the notice, defaults to auto
+          * Specify the width of the `calcite-notice`.
          */
         "width": Width;
     }
@@ -2198,11 +2208,13 @@ export namespace Components {
          */
         "menuOpen": boolean;
         /**
-          * Scrolls panel content to a particular set of coordinates.  ```  myCalcitePanel.scrollContentTo({    left: 0, // Specifies the number of pixels along the X axis to scroll the window or element.    top: 0, // Specifies the number of pixels along the Y axis to scroll the window or element    behavior: "auto" // Specifies whether the scrolling should animate smoothly (smooth), or happen instantly in a single jump (auto, the default value).  }); ```
+          * Scrolls panel content to a particular set of coordinates.  ```   myCalcitePanel.scrollContentTo({     left: 0, // Specifies the number of pixels along the X axis to scroll the window or element.     top: 0, // Specifies the number of pixels along the Y axis to scroll the window or element     behavior: "auto" // Specifies whether the scrolling should animate smoothly (smooth), or happen instantly in a single jump (auto, the default value).   }); ```
+          * @param options
          */
         "scrollContentTo": (options?: ScrollToOptions) => Promise<void>;
         /**
           * Sets focus on the component.
+          * @param focusId
          */
         "setFocus": (focusId?: "dismiss-button" | "back-button") => Promise<void>;
         /**
@@ -2253,6 +2265,7 @@ export namespace Components {
         "selectionFollowsFocus": boolean;
         /**
           * Sets focus on the component.
+          * @param focusId
          */
         "setFocus": (focusId?: ListFocusId) => Promise<void>;
     }
@@ -2312,6 +2325,7 @@ export namespace Components {
         "setFocus": () => Promise<void>;
         /**
           * Used to toggle the selection state. By default this won't trigger an event. The first argument allows the value to be coerced, rather than swapping values.
+          * @param coerce
          */
         "toggleSelected": (coerce?: boolean) => Promise<void>;
         /**
@@ -2387,19 +2401,25 @@ export namespace Components {
         /**
           * Reference HTMLElement used to position this component according to the placement property. As a convenience, a string ID of the reference element can be used. However, setting this property to use an HTMLElement is preferred so that the component does not need to query the DOM for the referenceElement.
          */
-        "referenceElement": HTMLElement | string;
+        "referenceElement": ReferenceElement | string;
         /**
           * Updates the position of the component.
          */
         "reposition": () => Promise<void>;
         /**
           * Sets focus on the component.
+          * @param focusId
          */
         "setFocus": (focusId?: "close-button") => Promise<void>;
         /**
           * Toggles the popover's open property.
+          * @param value
          */
         "toggle": (value?: boolean) => Promise<void>;
+        /**
+          * Disables automatically toggling a popover when its referenceElement has been triggered. This property can be set to true to manage when a popover is open.
+         */
+        "triggerDisabled": boolean;
     }
     interface CalcitePopoverManager {
         /**
@@ -2918,6 +2938,7 @@ export namespace Components {
         "endStep": () => Promise<void>;
         /**
           * set the requested step as active
+          * @param step
          */
         "goToStep": (step: number) => Promise<void>;
         /**
@@ -3029,6 +3050,10 @@ export namespace Components {
           * Optionally include a unique name for this tab, be sure to also set this name on the associated title.
          */
         "tab": string;
+        /**
+          * @param tabIds
+          * @param titleIds
+         */
         "updateAriaInfo": (tabIds?: string[], titleIds?: string[]) => Promise<void>;
     }
     interface CalciteTabNav {
@@ -3081,6 +3106,10 @@ export namespace Components {
           * Optionally include a unique name for the tab title, be sure to also set this name on the associated tab.
          */
         "tab"?: string;
+        /**
+          * @param tabIds
+          * @param titleIds
+         */
         "updateAriaInfo": (tabIds?: string[], titleIds?: string[]) => Promise<void>;
     }
     interface CalciteTabs {
@@ -3274,6 +3303,7 @@ export namespace Components {
         "scale": Scale;
         /**
           * Sets focus on the component.
+          * @param target
          */
         "setFocus": (target: TimePart) => Promise<void>;
         /**
@@ -3357,35 +3387,39 @@ export namespace Components {
     }
     interface CalciteTooltip {
         /**
-          * Accessible name for the component
+          * Closes the `calcite-tooltip` when the `referenceElement` is clicked.
+         */
+        "closeOnClick": boolean;
+        /**
+          * Accessible name for the `calcite-tooltip`.
          */
         "label": string;
         /**
-          * Offset the position of the tooltip away from the reference element.
+          * Offset the position of the `calcite-tooltip` away from the `referenceElement`.
           * @default 6
          */
         "offsetDistance": number;
         /**
-          * Offset the position of the tooltip along the reference element.
+          * Offset the position of the `calcite-tooltip` along the `referenceElement`.
          */
         "offsetSkidding": number;
         /**
-          * Display and position the component.
+          * When true, the `calcite-tooltip` is open.
          */
         "open": boolean;
         /**
-          * Describes the type of positioning to use for the overlaid content. If your element is in a fixed container, use the 'fixed' value.
+          * Describes the positioning type to use for the overlaid content. If the `referenceElement` is in a fixed container, use the "fixed" value.
          */
         "overlayPositioning": OverlayPositioning;
         /**
-          * Determines where the component will be positioned relative to the referenceElement.
+          * Determines where the component will be positioned relative to the `referenceElement`.
           * @see [PopperPlacement](https://github.com/Esri/calcite-components/blob/master/src/utils/popper.ts#L25)
          */
         "placement": PopperPlacement;
         /**
-          * Reference HTMLElement used to position this component according to the placement property. As a convenience, a string ID of the reference element can be used. However, setting this property to use an HTMLElement is preferred so that the component does not need to query the DOM for the referenceElement.
+          * The `referenceElement` to position `calcite-tooltip` according to its "placement" value. Setting to the `HTMLElement` is preferred so `calcite-tooltip` does not need to query the DOM for the `referenceElement`. However, a string ID of the reference element can be used.
          */
-        "referenceElement": HTMLElement | string;
+        "referenceElement": ReferenceElement | string;
         /**
           * Updates the position of the component.
          */
@@ -3427,6 +3461,9 @@ export namespace Components {
          */
         "expanded": boolean;
         "hasChildren": boolean;
+        /**
+          * In ancestor selection mode, show as indeterminate when only some children are selected.
+         */
         "indeterminate": boolean;
         /**
           * Displays checkboxes (set on parent).
@@ -3481,6 +3518,7 @@ export namespace Components {
         "selectionFollowsFocus": boolean;
         /**
           * Sets focus on the component.
+          * @param focusId
          */
         "setFocus": (focusId?: ListFocusId) => Promise<void>;
     }
@@ -3526,6 +3564,7 @@ export namespace Components {
         "setFocus": () => Promise<void>;
         /**
           * Toggle the selection state. By default this won't trigger an event. The first argument allows the value to be coerced, rather than swapping values.
+          * @param coerce
          */
         "toggleSelected": (coerce?: boolean) => Promise<void>;
         /**
@@ -3534,6 +3573,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 {
     }
@@ -4255,7 +4546,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.
          */
@@ -4289,7 +4580,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.
          */
@@ -4345,7 +4636,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.
          */
@@ -4388,7 +4679,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.
          */
@@ -4431,11 +4722,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
          */
@@ -4490,10 +4781,12 @@ declare namespace LocalJSX {
         "headingLevel"?: HeadingLevel;
         /**
           * Aria-label for collapsing the toggle and tooltip used for the toggle when expanded.
+          * @default "Collapse"
          */
         "intlCollapse"?: string;
         /**
           * Aria-label for expanding the toggle and tooltip used for the toggle when collapsed.
+          * @default "Expand"
          */
         "intlExpand"?: string;
         /**
@@ -4513,7 +4806,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.
          */
@@ -4539,7 +4832,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.
          */
@@ -4664,7 +4957,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.
          */
@@ -4673,6 +4966,7 @@ declare namespace LocalJSX {
           * Indicates whether the card is selected.
          */
         "selected"?: boolean;
+        "thumbnailPosition"?: LogicalFlowPosition;
     }
     interface CalciteCheckbox {
         /**
@@ -4698,7 +4992,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
          */
@@ -4737,7 +5031,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
          */
@@ -4875,11 +5169,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.
          */
@@ -4913,7 +5207,7 @@ declare namespace LocalJSX {
         /**
           * Emitted when the hex value changes.
          */
-        "onCalciteColorPickerHexInputChange"?: (event: CustomEvent<any>) => void;
+        "onCalciteColorPickerHexInputChange"?: (event: CalciteColorPickerHexInputCustomEvent<any>) => void;
         /**
           * The component's scale.
          */
@@ -4975,15 +5269,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 *
+          * 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;
@@ -4991,7 +5285,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.
          */
@@ -5041,7 +5335,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.
          */
@@ -5122,12 +5416,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.
          */
@@ -5191,7 +5485,7 @@ declare namespace LocalJSX {
         /**
           * Emitted when user selects day
          */
-        "onCalciteDaySelect"?: (event: CustomEvent<any>) => void;
+        "onCalciteDaySelect"?: (event: CalciteDatePickerDayCustomEvent<any>) => void;
         /**
           * Showing date range
          */
@@ -5241,11 +5535,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
          */
@@ -5299,7 +5593,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
          */
@@ -5331,17 +5625,17 @@ declare namespace LocalJSX {
          */
         "maxItems"?: number;
         /**
-          * fires when a dropdown has been closed *
+          * fires when a dropdown has been closed
          */
-        "onCalciteDropdownClose"?: (event: CustomEvent<void>) => void;
+        "onCalciteDropdownClose"?: (event: CalciteDropdownCustomEvent<void>) => void;
         /**
-          * fires when a dropdown has been opened *
+          * 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 *
+          * 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.
          */
@@ -5365,7 +5659,7 @@ declare namespace LocalJSX {
          */
         "type"?: "hover" | "click";
         /**
-          * specify the width of dropdown, defaults to m
+          * specify the width of dropdown
          */
         "width"?: Scale;
     }
@@ -5481,7 +5775,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
          */
@@ -5527,7 +5821,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
          */
@@ -5590,11 +5884,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
          */
@@ -5683,14 +5977,18 @@ declare namespace LocalJSX {
           * specify the placement of the number buttons
          */
         "numberButtonType"?: InputPlacement;
+        /**
+          * standard UniCode numeral system tag for localization
+         */
+        "numberingSystem"?: string;
         /**
           * 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
          */
@@ -5720,7 +6018,7 @@ declare namespace LocalJSX {
          */
         "step"?: number | "any";
         /**
-          * optionally add suffix  *
+          * optionally add suffix
          */
         "suffixText"?: string;
         /**
@@ -5821,17 +6119,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.
          */
@@ -5959,7 +6257,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)
@@ -6046,25 +6344,25 @@ declare namespace LocalJSX {
     }
     interface CalciteList {
         /**
-          * When true, disabled prevents user interaction.
+          * When true, prevents user interaction.
          */
         "disabled"?: boolean;
         /**
-          * Number at which section headings should start for this component.
+          * Number at which section headings should start for the list.
          */
         "headingLevel"?: HeadingLevel;
     }
     interface CalciteListItem {
         /**
-          * An optional description for this item.  This will appear below the label text.
+          * An optional description for the list item. Displays below the label text.
          */
         "description"?: string;
         /**
-          * When true, disabled prevents interaction.
+          * When true, prevents user interaction.
          */
         "disabled"?: boolean;
         /**
-          * The label text of the list item. This will appear above the description text.
+          * The label text of the list item. Displays above the description text.
          */
         "label"?: string;
         /**
@@ -6074,150 +6372,146 @@ declare namespace LocalJSX {
     }
     interface CalciteListItemGroup {
         /**
-          * The title used for all nested `calcite-list-item` rows.
+          * The title for all nested `calcite-list-item` rows.
          */
         "heading"?: string;
         /**
-          * Number at which section headings should start for this component.
+          * Number at which section headings should start for the group.
          */
         "headingLevel"?: HeadingLevel;
     }
     interface CalciteLoader {
         /**
-          * Show the loader
+          * When true, the loader is active.
          */
         "active"?: boolean;
         /**
-          * Inline loaders are smaller and will appear to the left of the text
+          * When true, displays smaller and appears to the left of the text.
          */
         "inline"?: boolean;
         /**
-          * Accessible name for the component
+          * Accessible name for the loader.
          */
         "label": string;
         /**
-          * Turn off spacing around the loader
+          * Disables spacing around the loader.
          */
         "noPadding"?: boolean;
         /**
-          * Speficy the scale of the loader. Defaults to "m"
+          * Specify the scale of the loader.
          */
         "scale"?: Scale;
         /**
-          * Text which should appear under the loading indicator (optional)
+          * Text that displays under the loading indicator.
          */
         "text"?: string;
         /**
-          * Use indeterminate if finding actual progress value is impossible
+          * Use indeterminate if finding actual progress value is impossible.
          */
         "type"?: "indeterminate" | "determinate";
         /**
-          * Percent complete of 100, only valid for determinate indicators
+          * Valid only for determinate indicators. Percent complete of 100.
          */
         "value"?: number;
     }
     interface CalciteModal {
         /**
-          * Add the active attribute to open the modal
+          * When true, the `calcite-modal` is active.
          */
         "active"?: boolean;
         /**
-          * Background color of modal content
+          * Sets the background color of `calcite-modal` content.
          */
         "backgroundColor"?: ModalBackgroundColor;
         /**
-          * Optionally pass a function to run before close
+          * Passes a function to run before the `calcite-modal` closes.
          */
         "beforeClose"?: (el: HTMLElement) => Promise<void>;
         /**
-          * Adds a color bar at the top for visual impact, Use color to add importance to destructive/workflow dialogs.
+          * Adds a color bar to the top of `calcite-modal` for visual impact. Use color to add importance to destructive or workflow dialogs.
          */
         "color"?: "red" | "blue";
         /**
-          * Disables the display a close button within the Modal
+          * When true, disables the close button within the `calcite-modal`.
          */
         "disableCloseButton"?: boolean;
         /**
-          * Flag to disable the default close on escape behavior
+          * When true, disables the default close on escape behavior.
          */
         "disableEscape"?: boolean;
         /**
-          * Disables the closing of the Modal when clicked outside.
+          * When true, disables the closing of the `calcite-modal` when clicked outside.
          */
         "disableOutsideClose"?: boolean;
         /**
-          * Prevent the modal from taking up the entire screen on mobile
+          * When true, prevents the `calcite-modal` from expanding to the entire screen on mobile devices.
          */
         "docked"?: boolean;
         /**
-          * Specify an element to focus when the modal is first opened
-         */
-        "firstFocus"?: HTMLElement;
-        /**
-          * Set the modal to always be fullscreen (overrides width)
+          * Set the `calcite-modal` to always be fullscreen (overrides width).
          */
         "fullscreen"?: boolean;
         /**
-          * Aria label for the close button
+          * Accessible label for the close button.
          */
         "intlClose"?: string;
         /**
-          * Turn off spacing around the content area slot
+          * When true, disables spacing to the content area slot.
          */
         "noPadding"?: boolean;
         /**
-          * Fired when the modal finishes the close animation
+          * Emits when `calcite-modal` finishes the close animation.
          */
-        "onCalciteModalClose"?: (event: CustomEvent<any>) => void;
+        "onCalciteModalClose"?: (event: CalciteModalCustomEvent<any>) => void;
         /**
-          * Fired when the modal finishes the open animation
+          * Emits when `calcite-modal` finishes the open animation.
          */
-        "onCalciteModalOpen"?: (event: CustomEvent<any>) => void;
+        "onCalciteModalOpen"?: (event: CalciteModalCustomEvent<any>) => void;
         /**
-          * specify the scale of modal, defaults to m
+          * Specify the scale of `calcite-modal`.
          */
         "scale"?: Scale;
         /**
-          * Set the width of the modal. Can use stock sizes or pass a number (in pixels)
+          * Set the width of the `calcite-modal`. Can use scale sizes or pass a number (displays in pixels).
          */
         "width"?: Scale | number;
     }
     interface CalciteNotice {
         /**
-          * Is the notice currently active or not
+          * When true, the `calcite-notice` is active.
          */
         "active"?: boolean;
         /**
-          * Color for the notice (will apply to top border and icon)
+          * The color for the `calcite-notice`. Color will apply to top border and icon.
          */
         "color"?: StatusColor;
         /**
-          * Optionally show a button the user can click to dismiss the notice
+          * Shows a button the user can click to dismiss the `calcite-notice`.
          */
         "dismissible"?: boolean;
         /**
-          * when used as a boolean set to true, show a default recommended icon. You can also pass a calcite-ui-icon name to this prop to display a requested icon
+          * When present, shows a default recommended icon. You can also pass a calcite-ui-icon name to display a requested icon.
          */
         "icon"?: string | boolean;
         /**
-          * String for the close button.
+          * Accessible label for the close button.
           * @default "Close"
          */
         "intlClose"?: string;
         /**
-          * Fired when an notice is closed
+          * Fired when `calcite-notice` is closed.
          */
-        "onCalciteNoticeClose"?: (event: CustomEvent<any>) => void;
+        "onCalciteNoticeClose"?: (event: CalciteNoticeCustomEvent<any>) => void;
         /**
-          * Fired when an Notice is opened
+          * Fired when `calcite-notice` is opened.
          */
-        "onCalciteNoticeOpen"?: (event: CustomEvent<any>) => void;
+        "onCalciteNoticeOpen"?: (event: CalciteNoticeCustomEvent<any>) => void;
         /**
-          * specify the scale of the notice, defaults to m
+          * Specify the scale of `calcite-notice`.
          */
         "scale"?: Scale;
         /**
-          * specify the width of the notice, defaults to auto
+          * Specify the width of the `calcite-notice`.
          */
         "width"?: Width;
     }
@@ -6258,12 +6552,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
          */
@@ -6339,20 +6633,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.
          */
@@ -6394,7 +6688,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.
          */
@@ -6444,7 +6738,7 @@ declare namespace LocalJSX {
         /**
           * Emitted whenever the item is selected or unselected.
          */
-        "onCalciteListItemChange"?: (event: CustomEvent<{
+        "onCalciteListItemChange"?: (event: CalcitePickListItemCustomEvent<{
     item: HTMLCalcitePickListItemElement;
     value: any;
     selected: boolean;
@@ -6453,7 +6747,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.
          */
@@ -6522,11 +6816,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.
          */
@@ -6543,7 +6837,11 @@ declare namespace LocalJSX {
         /**
           * Reference HTMLElement used to position this component according to the placement property. As a convenience, a string ID of the reference element can be used. However, setting this property to use an HTMLElement is preferred so that the component does not need to query the DOM for the referenceElement.
          */
-        "referenceElement": HTMLElement | string;
+        "referenceElement": ReferenceElement | string;
+        /**
+          * Disables automatically toggling a popover when its referenceElement has been triggered. This property can be set to true to manage when a popover is open.
+         */
+        "triggerDisabled"?: boolean;
     }
     interface CalcitePopoverManager {
         /**
@@ -6602,7 +6900,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.
          */
@@ -6636,7 +6934,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.
          */
@@ -6666,7 +6964,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
          */
@@ -6736,7 +7034,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
          */
@@ -6781,7 +7079,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.
          */
@@ -6842,7 +7140,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.
          */
@@ -6917,16 +7215,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
          */
@@ -6988,7 +7286,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 {
         /**
@@ -7018,11 +7316,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.
          */
@@ -7120,7 +7418,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
          */
@@ -7150,7 +7448,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
          */
@@ -7185,7 +7483,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.
          */
@@ -7283,7 +7581,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).
          */
@@ -7405,7 +7703,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`.
          */
@@ -7449,44 +7747,48 @@ 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 {
         /**
-          * Accessible name for the component
+          * Closes the `calcite-tooltip` when the `referenceElement` is clicked.
+         */
+        "closeOnClick"?: boolean;
+        /**
+          * Accessible name for the `calcite-tooltip`.
          */
         "label": string;
         /**
-          * Offset the position of the tooltip away from the reference element.
+          * Offset the position of the `calcite-tooltip` away from the `referenceElement`.
           * @default 6
          */
         "offsetDistance"?: number;
         /**
-          * Offset the position of the tooltip along the reference element.
+          * Offset the position of the `calcite-tooltip` along the `referenceElement`.
          */
         "offsetSkidding"?: number;
         /**
-          * Display and position the component.
+          * When true, the `calcite-tooltip` is open.
          */
         "open"?: boolean;
         /**
-          * Describes the type of positioning to use for the overlaid content. If your element is in a fixed container, use the 'fixed' value.
+          * Describes the positioning type to use for the overlaid content. If the `referenceElement` is in a fixed container, use the "fixed" value.
          */
         "overlayPositioning"?: OverlayPositioning;
         /**
-          * Determines where the component will be positioned relative to the referenceElement.
+          * Determines where the component will be positioned relative to the `referenceElement`.
           * @see [PopperPlacement](https://github.com/Esri/calcite-components/blob/master/src/utils/popper.ts#L25)
          */
         "placement"?: PopperPlacement;
         /**
-          * Reference HTMLElement used to position this component according to the placement property. As a convenience, a string ID of the reference element can be used. However, setting this property to use an HTMLElement is preferred so that the component does not need to query the DOM for the referenceElement.
+          * The `referenceElement` to position `calcite-tooltip` according to its "placement" value. Setting to the `HTMLElement` is preferred so `calcite-tooltip` does not need to query the DOM for the `referenceElement`. However, a string ID of the reference element can be used.
          */
-        "referenceElement"?: HTMLElement | string;
+        "referenceElement"?: ReferenceElement | string;
     }
     interface CalciteTooltipManager {
         /**
@@ -7509,7 +7811,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.
          */
@@ -7563,11 +7865,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.
          */
@@ -7602,7 +7904,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.
          */