@esri/calcite-components 1.0.0-beta.81 → 1.0.0-beta.84

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";
@@ -28,6 +28,7 @@ import { PaginationDetail } from "./components/pagination/pagination";
 import { ListFocusId } from "./components/pick-list/shared-list-logic";
 import { ICON_TYPES } from "./components/pick-list/resources";
 import { RadioAppearance } from "./components/radio-group/interfaces";
+import { StepperItemChangeEventDetail, StepperItemEventDetail, StepperItemKeyEventDetail } from "./components/stepper/interfaces";
 import { TabID, TabLayout, TabPosition } from "./components/tabs/interfaces";
 import { TabChangeEventDetail } from "./components/tab/interfaces";
 import { TileSelectType } from "./components/tile-select/interfaces";
@@ -38,88 +39,103 @@ import { TreeItemSelectDetail } from "./components/tree-item/interfaces";
 export namespace Components {
     interface CalciteAccordion {
         /**
-          * specify the appearance - default (containing border), or minimal (no containing border), defaults to default
+          * Specifies the appearance of the component.
          */
         "appearance": AccordionAppearance;
         /**
-          * specify the placement of the icon in the header, defaults to end
+          * Specifies the placement of the icon in the header.
          */
         "iconPosition": Position;
         /**
-          * specify the type of the icon in the header, defaults to chevron
+          * Specifies the type of the icon in the header.
          */
         "iconType": "chevron" | "caret" | "plus-minus";
         /**
-          * specify the scale of accordion, defaults to m
+          * Specifies the size of the component.
          */
         "scale": Scale;
         /**
-          * specify the selection mode - multi (allow any number of open items), single (allow one open item), or single-persist (allow and require one open item), defaults to multi
+          * Specifies the selection mode - "multi" (allow any number of open items), "single" (allow one open item), or "single-persist" (allow and require one open item).
          */
         "selectionMode": "multi" | "single" | "single-persist";
     }
     interface CalciteAccordionItem {
         /**
-          * Indicates whether the item is active.
+          * When true, the component is active.
+          * @deprecated use expanded instead
          */
         "active": boolean;
         /**
-          * optionally pass an icon to display - accepts Calcite UI icon names
+          * Specifies a description for the component.
+         */
+        "description": string;
+        /**
+          * When true, item is expanded
+         */
+        "expanded": boolean;
+        /**
+          * Specifies heading text for the component.
+         */
+        "heading"?: string;
+        /**
+          * Specifies an icon to display - accepts Calcite UI icon names.
          */
         "icon"?: string;
         /**
-          * pass a title for the accordion item
+          * Specifies a subtitle for the component.
+          * @deprecated Use `description` instead.
          */
         "itemSubtitle"?: string;
         /**
-          * pass a title for the accordion item
+          * Specifies a title for the component.
+          * @deprecated Use `heading` instead.
          */
         "itemTitle"?: string;
     }
     interface CalciteAction {
         /**
-          * Indicates whether the action is highlighted.
+          * When true, the component is highlighted.
          */
         "active": boolean;
         /**
-          * Optionally specify the horizontal alignment of button elements with text content.
+          * Specifies the horizontal alignment of button elements with text content.
          */
         "alignment"?: Alignment;
         /**
-          * Specify the appearance style of the action, defaults to solid.
+          * Specifies the appearance of the component.
          */
         "appearance": Extract<"solid" | "clear", Appearance>;
         /**
-          * Compact mode is used internally by components to reduce side padding, e.g. calcite-block-section.
+          * When true, the side padding of the component is reduced. Compact mode is used internally by components, e.g. `calcite-block-section`.
          */
         "compact": boolean;
         /**
-          * When true, disabled prevents interaction. This state shows items with lower opacity/grayed.
+          * When true, interaction is prevented and the component is displayed with lower opacity.
          */
         "disabled": boolean;
         /**
-          * The name of the icon to display. The value of this property must match the icon name from https://esri.github.io/calcite-ui-icons/.
+          * Specifies an icon to display - accepts Calcite UI icon names.
          */
         "icon"?: string;
         /**
-          * Indicates unread changes.
+          * When true, indicates unread changes.
          */
         "indicator": boolean;
         /**
-          * string to override English loading text
+          * Specifies the text label to display while loading.
           * @default "Loading"
          */
         "intlLoading"?: string;
         /**
-          * The label of the action. If no label is provided, the label inherits what's provided for the `text` prop.
+          * Specifies the label of the component. If no label is provided, the label inherits what's provided for the `text` prop.
          */
         "label"?: string;
         /**
-          * When true, content is waiting to be loaded. This state shows a busy indicator.
+          * When true, a busy indicator is displayed.
          */
         "loading": boolean;
         /**
-          * Specifies the size of the action.
+          * Specifies the size of the component.
          */
         "scale": Scale;
         /**
@@ -127,7 +143,7 @@ export namespace Components {
          */
         "setFocus": () => Promise<void>;
         /**
-          * Text that accompanies the action icon.
+          * Specifies text that accompanies the icon.
          */
         "text": string;
         /**
@@ -137,19 +153,19 @@ export namespace Components {
     }
     interface CalciteActionBar {
         /**
-          * When set to true, the expand-toggling behavior will be disabled.
+          * When true, the expand-toggling behavior is disabled.
          */
         "expandDisabled": boolean;
         /**
-          * Indicates whether widget is expanded.
+          * When true, the component is expanded.
          */
         "expanded": boolean;
         /**
-          * Updates the label of the collapse icon when the component is expanded.
+          * Specifies the label of the collapse icon when the component is expanded.
          */
         "intlCollapse"?: string;
         /**
-          * Updates the label of the expand icon when the component is not expanded.
+          * Specifies the label of the expand icon when the component is collapsed.
          */
         "intlExpand"?: string;
         /**
@@ -157,19 +173,20 @@ export namespace Components {
          */
         "overflowActions": () => Promise<void>;
         /**
-          * Disables automatically overflowing actions that won't fit into menus.
+          * Disables automatically overflowing `calcite-action`s that won't fit into menus.
          */
         "overflowActionsDisabled": boolean;
         /**
-          * Arranges the component depending on the elements 'dir' property.
+          * Arranges the component depending on the element's `dir` property.
          */
         "position": Position;
         /**
-          * Specifies the size of the expand action.
+          * Specifies the size of the expand `calcite-action`.
          */
         "scale": Scale;
         /**
           * Sets focus on the component.
+          * @param focusId
          */
         "setFocus": (focusId?: "expand-toggle") => Promise<void>;
     }
@@ -179,29 +196,29 @@ export namespace Components {
          */
         "columns"?: Columns;
         /**
-          * Indicates whether widget is expanded.
+          * When true, the component is expanded.
          */
         "expanded": boolean;
         /**
-          * Text string for the actions menu.
+          * Specifies a text string for the `calcite-action-menu`.
          */
         "intlMore"?: string;
         /**
-          * Indicates the horizontal, vertical, or grid layout of the component.
+          * Indicates the layout of the component.
          */
         "layout": Layout;
         /**
-          * Opens the action menu.
+          * When true, the `calcite-action-menu` is open.
          */
         "menuOpen": boolean;
         /**
-          * Specifies the size of the action-menu.
+          * Specifies the size of the `calcite-action-menu`.
          */
         "scale": Scale;
     }
     interface CalciteActionMenu {
         /**
-          * Indicates whether widget is expanded.
+          * When true, the component is expanded.
          */
         "expanded": boolean;
         /**
@@ -209,24 +226,24 @@ export namespace Components {
          */
         "flipPlacements"?: ComputedPlacement[];
         /**
-          * Text string for the actions menu.
+          * Specifies the text string for the component.
          */
         "label": string;
         /**
-          * Opens the action menu.
+          * When true, the component 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.
+          * Determines the type of positioning to use for the overlaid content. If your element 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;
         /**
-          * Specifies the size of the menu trigger action.
+          * Specifies the size of the component's trigger `calcite-action`.
          */
         "scale": Scale;
         /**
@@ -236,74 +253,75 @@ export namespace Components {
     }
     interface CalciteActionPad {
         /**
-          * When set to true, the expand-toggling behavior will be disabled.
+          * When true, the expand-toggling behavior is disabled.
          */
         "expandDisabled": boolean;
         /**
-          * Indicates whether widget is expanded.
+          * When true, the component is expanded.
          */
         "expanded": boolean;
         /**
-          * Updates the label of the collapse icon when the component is expanded.
+          * Specifies the label of the collapse icon when the component is expanded.
          */
         "intlCollapse"?: string;
         /**
-          * Updates the label of the expand icon when the component is not expanded.
+          * Specifies the label of the expand icon when the component is collapsed.
          */
         "intlExpand"?: string;
         /**
-          * Indicates the horizontal or vertical layout of the component.
+          * Indicates the layout of the component.
          */
         "layout": Layout;
         /**
-          * Arranges the component depending on the elements 'dir' property.
+          * Arranges the component depending on the element's `dir` property.
          */
         "position": Position;
         /**
-          * Specifies the size of the expand action.
+          * Specifies the size of the expand `calcite-action`.
          */
         "scale": Scale;
         /**
           * Sets focus on the component.
+          * @param focusId
          */
         "setFocus": (focusId?: "expand-toggle") => Promise<void>;
     }
     interface CalciteAlert {
         /**
-          * Is the alert currently active or not
+          * When true, the component is active.
          */
         "active": boolean;
         /**
-          * Close the alert automatically (recommended for passive, non-blocking alerts)
+          * When true, the component closes automatically (recommended for passive, non-blocking alerts).
          */
         "autoDismiss": boolean;
         /**
-          * Duration of autoDismiss (only used with `autoDismiss`)
+          * Specifies the duration before the component automatically closes (only use with `autoDismiss`).
          */
         "autoDismissDuration": AlertDuration;
         /**
-          * Color for the alert (will apply to top border and icon)
+          * Specifies the color for the component (will apply to top border and icon).
          */
         "color": StatusColor;
         /**
-          * 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 true, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon.
          */
         "icon": string | boolean;
         /**
-          * string to override English close text
+          * Specifies the text label for the close button.
           * @default "Close"
          */
         "intlClose": string;
         /**
-          * Accessible name for the component
+          * Specifies an accessible name for the component.
          */
         "label": string;
         /**
-          * specify the placement of the alert
+          * Specifies the placement of the component
          */
         "placement": AlertPlacement;
         /**
-          * specify the scale of the alert, defaults to m
+          * Specifies the size of the component.
          */
         "scale": Scale;
         /**
@@ -313,23 +331,23 @@ export namespace Components {
     }
     interface CalciteAvatar {
         /**
-          * full name of the user
+          * Specifies the full name of the user.
          */
         "fullName": string;
         /**
-          * specify the scale of the avatar, defaults to m
+          * Specifies the size of the component.
          */
         "scale": Scale;
         /**
-          * src to an image (remember to add a token if the user is private)
+          * Specifies the `src` to an image (remember to add a token if the user is private).
          */
         "thumbnail": string;
         /**
-          * unique id for user
+          * Specifies the unique id of the user.
          */
         "userId": string;
         /**
-          * user name
+          * Specifies the username of the user.
          */
         "username": string;
     }
@@ -338,6 +356,14 @@ export namespace Components {
           * When true, this block will be collapsible.
          */
         "collapsible": boolean;
+        /**
+          * Block description
+         */
+        "description": string;
+        /**
+          * When true, removes padding for the slotted content
+         */
+        "disablePadding": boolean;
         /**
           * When true, disabled prevents interaction. This state shows items with lower opacity/grayed.
          */
@@ -355,11 +381,13 @@ export namespace Components {
          */
         "headingLevel": HeadingLevel;
         /**
-          * Tooltip used for the toggle when expanded.
+          * Aria-label for collapsing the toggle and tooltip used for the toggle when expanded.
+          * @default "Collapse"
          */
         "intlCollapse"?: string;
         /**
-          * Tooltip used for the toggle when collapsed.
+          * Aria-label for expanding the toggle and tooltip used for the toggle when collapsed.
+          * @default "Expand"
          */
         "intlExpand"?: string;
         /**
@@ -386,6 +414,7 @@ export namespace Components {
         "status"?: Status;
         /**
           * Block summary.
+          * @deprecated use description instead
          */
         "summary": string;
     }
@@ -531,6 +560,7 @@ export namespace Components {
           * Indicates whether the card is selected.
          */
         "selected": boolean;
+        "thumbnailPosition": LogicalFlowPosition;
     }
     interface CalciteCheckbox {
         /**
@@ -583,6 +613,10 @@ export namespace Components {
           * specify the appearance style of the button, defaults to solid.
          */
         "appearance": Extract<"solid" | "clear", Appearance>;
+        /**
+          * When true, hides the chip
+         */
+        "closed": boolean;
         /**
           * specify the color of the button, defaults to blue
          */
@@ -746,6 +780,10 @@ export namespace Components {
           * @default "Value"
          */
         "intlValue": string;
+        /**
+          * standard UniCode numeral system tag for localization
+         */
+        "numberingSystem"?: string;
         /**
           * The scale of the color picker.
          */
@@ -780,6 +818,10 @@ export namespace Components {
           * @default "No color"
          */
         "intlNoColor": string;
+        /**
+          * standard UniCode numeral system tag for localization
+         */
+        "numberingSystem"?: string;
         /**
           * The component's scale.
          */
@@ -810,7 +852,8 @@ export namespace Components {
     }
     interface CalciteCombobox {
         /**
-          * Opens or closes the combobox
+          * When true, opens the combobox
+          * @deprecated use open instead
          */
         "active": boolean;
         /**
@@ -842,6 +885,10 @@ export namespace Components {
           * The name of the switch input
          */
         "name": string;
+        /**
+          * When true, opens the combobox
+         */
+        "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.
          */
@@ -850,6 +897,10 @@ export namespace Components {
           * Placeholder text for input
          */
         "placeholder"?: string;
+        /**
+          * Placeholder icon for input
+         */
+        "placeholderIcon"?: string;
         /**
           * Updates the position of the component.
          */
@@ -886,12 +937,17 @@ export namespace Components {
         "ancestors": ComboboxChildElement[];
         /**
           * Don't filter this item based on the search text
+          * @deprecated use filterDisabled instead
          */
         "constant": boolean;
         /**
           * When true, the item cannot be clicked and is visually muted.
          */
         "disabled": boolean;
+        /**
+          * Do not filter this item based on the search text
+         */
+        "filterDisabled": boolean;
         /**
           * Unique identifier, used for accessibility
          */
@@ -910,6 +966,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>;
         /**
@@ -1153,6 +1210,7 @@ export namespace Components {
     interface CalciteDropdown {
         /**
           * Opens or closes the dropdown
+          * @deprecated use open instead.
          */
         "active": boolean;
         /**
@@ -1171,6 +1229,10 @@ export namespace Components {
           * specify the maximum number of calcite-dropdown-items to display before showing the scroller, must be greater than 0 - this value does not include groupTitles passed to calcite-dropdown-group
          */
         "maxItems": number;
+        /**
+          * When true, opens the dropdown
+         */
+        "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.
          */
@@ -1198,9 +1260,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 {
         /**
@@ -1441,126 +1503,150 @@ export namespace Components {
     }
     interface CalciteInput {
         /**
-          * specify the alignment of the value of the input
+          * Specifies the text alignment of the component's value.
          */
         "alignment": Position;
         /**
-          * should the input autofocus
+          * When true, the component is focused on page load.
+          * @mdn [autofocus](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus)
          */
         "autofocus": boolean;
         /**
-          * optionally display a clear button that displays when field has a value shows by default for search, time, date will not display for type="textarea"
+          * When true, a clear button is displayed when the component has a value. The clear button shows by default for "search", "time", and "date" types, and will not display for the "textarea" type.
          */
         "clearable": boolean;
         /**
-          * is the input disabled
+          * When true, interaction is prevented and the component is displayed with lower opacity.
+          * @mdn [disabled](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled)
          */
         "disabled": boolean;
         "editingEnabled": boolean;
         /**
-          * for number values, displays the locale's group separator
+          * When true, number values are displayed with the locale's group separator.
          */
         "groupSeparator": boolean;
         /**
-          * when true, the component will not be visible
+          * When true, the component will not be visible.
+          * @mdn [hidden](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden)
          */
         "hidden": boolean;
         /**
-          * when used as a boolean set to true, show a default recommended icon for certain input types (tel, password, email, date, time, search). You can also pass a calcite-ui-icon name to this prop to display a requested icon for any input type
+          * When true, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon.
          */
         "icon": string | boolean;
         /**
-          * flip the icon in rtl
+          * When true, the icon is flipped in RTL.
          */
         "iconFlipRtl": boolean;
         /**
-          * string to override English loading text
+          * A text label that will appear on the clear button for screen readers.
+         */
+        "intlClear"?: string;
+        /**
+          * Accessible name that will appear while loading.
           * @default "Loading"
          */
         "intlLoading"?: string;
         /**
-          * Applies to the aria-label attribute on the button or hyperlink
+          * Accessible name for the component's button or hyperlink.
          */
         "label"?: string;
         /**
-          * specify if the input is in loading state
+          * When true, the component is in the loading state and `calcite-progress` is displayed.
          */
         "loading": boolean;
         /**
-          * BCP 47 language tag for desired language and country format
+          * Specifies the BCP 47 language tag for the desired language and country format.
          */
-        "locale"?: string;
+        "locale": string;
         /**
           * Toggles locale formatting for numbers.
          */
         "localeFormat": boolean;
         /**
-          * input max
+          * Specifies the maximum value for type "number".
+          * @mdn [max](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#max)
          */
         "max"?: number;
         /**
-          * Maximum length of the input value
+          * Specifies the maximum length of text for the component's value.
+          * @mdn [maxlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#maxlength)
          */
         "maxLength"?: number;
         /**
-          * Maximum length of text input.
+          * Specifies the maximum length of text for the component's value.
           * @deprecated use maxLength instead
          */
         "maxlength"?: number;
         /**
-          * input min
+          * Specifies the minimum value for type "number".
+          * @mdn [min](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#min)
          */
         "min"?: number;
         /**
-          * Minimum length of the text input
+          * Specifies the minimum length of text for the component's value.
+          * @mdn [minlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#minlength)
          */
         "minLength"?: number;
         /**
-          * The name of the input
+          * Specifies the name of the component.
+          * @mdn [name](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name)
          */
         "name": string;
         /**
-          * specify the placement of the number buttons
+          * Specifies the placement of the buttons for type "number".
          */
         "numberButtonType"?: InputPlacement;
         /**
-          * explicitly whitelist placeholder attribute
+          * Specifies the Unicode numeral system used by the component for localization.
+          * @mdn [numberingSystem](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/numberingSystem)
+         */
+        "numberingSystem"?: string;
+        /**
+          * Specifies placeholder text for the component.
+          * @mdn [placeholder](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#placeholder)
          */
         "placeholder": string;
         /**
-          * optionally add prefix
+          * Adds text to the start of the component.
          */
         "prefixText"?: string;
         /**
-          * When true, a field cannot be modified.
+          * When true, the value cannot be modified.
+          * @mdn [readOnly](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly)
          */
         "readOnly": boolean;
         /**
-          * is the input required
+          * When true, the component must have a value in order for the form to submit.
          */
         "required": boolean;
         /**
-          * specify the scale of the input, defaults to m
+          * Specifies the size of the component.
          */
         "scale": Scale;
+        /**
+          * Selects all text of the component's `value`.
+         */
+        "selectText": () => Promise<void>;
         /**
           * Sets focus on the component.
          */
         "setFocus": () => Promise<void>;
         /**
-          * specify the status of the input field, determines message and icons
+          * Specifies the status of the input field, which determines message and icons.
          */
         "status": Status;
         /**
-          * input step
+          * Specifies the granularity that the component's value must adhere to.
+          * @mdn [step](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/step)
          */
         "step"?: number | "any";
         /**
-          * optionally add suffix  *
+          * Adds text to the end of the component.
          */
         "suffixText"?: string;
         /**
-          * specify the input type  Note that the following types add type-specific icons by default: `date`, `email`, `password`, `search`, `tel`, `time`
+          * Specifies the component type.  Note that the following types add type-specific icons by default: "date", "email", "password", "search", "tel", "time".
          */
         "type": | "color"
     | "date"
@@ -1579,7 +1665,7 @@ export namespace Components {
     | "url"
     | "week";
         /**
-          * input value
+          * The component's value.
          */
         "value": string;
     }
@@ -1798,6 +1884,10 @@ export namespace Components {
           * @see [PopperPlacement](https://github.com/Esri/calcite-components/blob/master/src/utils/popper.ts#L25)
          */
         "placement": PopperPlacement;
+        /**
+          * Updates the position of the component.
+         */
+        "reposition": () => Promise<void>;
         /**
           * When true, makes the component required for form-submission.
          */
@@ -1826,6 +1916,7 @@ export namespace Components {
         "alignment": Alignment;
         /**
           * eliminates any space around the label
+          * @deprecated set the --calcite-label-margin-bottom css variable to 0 instead
          */
         "disableSpacing": boolean;
         /**
@@ -1891,11 +1982,11 @@ export namespace Components {
     }
     interface CalciteList {
         /**
-          * When true, disabled prevents user interaction.
+          * When true, interaction is prevented and the component is displayed with lower opacity.
          */
         "disabled": boolean;
         /**
-          * Number at which section headings should start for this component.
+          * Specifies the number at which section headings should start.
          */
         "headingLevel": HeadingLevel;
         /**
@@ -1905,19 +1996,19 @@ export namespace Components {
     }
     interface CalciteListItem {
         /**
-          * An optional description for this item.  This will appear below the label text.
+          * A description for the component. Displays below the label text.
          */
-        "description": string;
+        "description"?: string;
         /**
-          * When true, disabled prevents interaction.
+          * When true, interaction is prevented and the component is displayed with lower opacity.
          */
         "disabled": boolean;
         /**
-          * The label text of the list item. This will appear above the description text.
+          * The label text of the component. Displays above the description text.
          */
         "label": string;
         /**
-          * When true, prevents the content of the list item from user interaction.
+          * When true, prevents the content of the component from user interaction.
          */
         "nonInteractive": boolean;
         /**
@@ -1927,143 +2018,148 @@ export namespace Components {
     }
     interface CalciteListItemGroup {
         /**
-          * The title used for all nested `calcite-list-item` rows.
+          * The header text for all nested `calcite-list-item` rows.
          */
         "heading": string;
         /**
-          * Number at which section headings should start for this component.
+          * Specifies the number at which section headings should start.
          */
         "headingLevel": HeadingLevel;
     }
     interface CalciteLoader {
         /**
-          * Show the loader
+          * When true, the component 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 component.
          */
         "label": string;
         /**
-          * Turn off spacing around the loader
+          * Disables spacing around the component.
          */
         "noPadding": boolean;
         /**
-          * Speficy the scale of the loader. Defaults to "m"
+          * Specifies the size of the component.
          */
         "scale": Scale;
         /**
-          * Text which should appear under the loading indicator (optional)
+          * Text that displays under the component's 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
+          * The component's value. 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.
+          * @deprecated use open instead
          */
         "active": boolean;
         /**
-          * Background color of modal content
+          * Sets the background color of the component's 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 component 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 component's close button.
          */
         "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 component when clicked outside.
          */
         "disableOutsideClose": boolean;
         /**
-          * Prevent the modal from taking up the entire screen on mobile
+          * When true, prevents the component 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)
+          * Sets the component to always be fullscreen (overrides width).
          */
         "fullscreen": boolean;
         /**
-          * Aria label for the close button
+          * Accessible name for the component's 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
+          * When true,`calcite-modal`  opens
+         */
+        "open": boolean;
+        /**
+          * Specifies the size of the component.
          */
         "scale": Scale;
         /**
-          * Set the scroll top of the modal content
+          * Sets the scroll top of the component's 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)
+          * Specifies the width of the component. 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 component is active.
          */
         "active": boolean;
         /**
-          * Color for the notice (will apply to top border and icon)
+          * The color for the component's top border and icon.
          */
         "color": StatusColor;
         /**
-          * Optionally show a button the user can click to dismiss the notice
+          * When true, a close button is added to the component.
          */
-        "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
+          * Specifies an icon to display - accepts Calcite UI icon names.
          */
         "icon": string | boolean;
         /**
-          * String for the close button.
+          * Accessible name for the close button.
           * @default "Close"
          */
         "intlClose": string;
         /**
-          * specify the scale of the notice, defaults to m
+          * Specifies the size of the component.
          */
         "scale": Scale;
         /**
@@ -2071,71 +2167,71 @@ export namespace Components {
          */
         "setFocus": () => Promise<void>;
         /**
-          * specify the width of the notice, defaults to auto
+          * Specifies the width of the component.
          */
         "width": Width;
     }
     interface CalciteOption {
         /**
-          * When true, it prevents the option from being selected.
+          * When true, interaction is prevented and the component is displayed with lower opacity.
          */
         "disabled": boolean;
         /**
-          * The option label.
+          * Accessible name for the component.
          */
         "label": string;
         /**
-          * When true, this option is selected. Otherwise, false.
+          * When true, the component is selected.
          */
         "selected": boolean;
         /**
-          * The value associated with this option.
+          * The component's value.
          */
         "value": any;
     }
     interface CalciteOptionGroup {
         /**
-          * When true, it prevents selection from any of its associated options.
+          * When true, interaction is prevented and the component is displayed with lower opacity.
          */
         "disabled": boolean;
         /**
-          * The group label. This property is required.
+          * Accessible name for the component.
          */
         "label": string;
     }
     interface CalcitePagination {
         /**
-          * Go to the next page of results
+          * Go to the next page of results.
          */
         "nextPage": () => Promise<void>;
         /**
-          * number of items per page
+          * Specifies the number of items per page.
          */
         "num": number;
         /**
-          * Go to the previous page of results
+          * Go to the previous page of results.
          */
         "previousPage": () => Promise<void>;
         /**
-          * The scale of the pagination
+          * Specifies the size of the component.
          */
         "scale": Scale;
         /**
-          * index of item that should begin the page
+          * Specifies the starting item number.
          */
         "start": number;
         /**
-          * Used as an accessible label (aria-label) for the next button
+          * Accessible name for the component's next button.
           * @default "Next"
          */
         "textLabelNext": string;
         /**
-          * Used as an accessible label (aria-label) of the previous button
+          * Accessible name for the component's previous button.
           * @default "Previous"
          */
         "textLabelPrevious": string;
         /**
-          * total number of items
+          * Specifies the total number of items.
          */
         "total": number;
     }
@@ -2145,73 +2241,80 @@ export namespace Components {
          */
         "beforeBack"?: () => Promise<void>;
         /**
-          * When true, disabled prevents interaction. This state shows items with lower opacity/grayed.
+          * A description for the component.
+         */
+        "description": string;
+        /**
+          * When true, interaction is prevented and the component is displayed with lower opacity.
          */
         "disabled": boolean;
         /**
-          * Hides the panel.
+          * When true, hides the component.
          */
         "dismissed": boolean;
         /**
-          * Displays a close button in the trailing side of the header.
+          * When true, a close button is added to the component.
          */
         "dismissible": boolean;
         /**
-          * Heading text.
+          * The component header text.
          */
         "heading"?: string;
         /**
-          * Number at which section headings should start for this component.
+          * Specifies the number at which section headings should start.
          */
         "headingLevel": HeadingLevel;
         /**
-          * Specifies the maximum height of the panel.
+          * Specifies the maximum height of the component.
          */
         "heightScale"?: Scale;
         /**
-          * 'Back' text string.
+          * Accessible name for the component's back button. The back button will only be shown when 'showBackButton' is true.
          */
         "intlBack"?: string;
         /**
-          * 'Close' text string for the close button. The close button will only be shown when 'dismissible' is true.
+          * Accessible name for the component's close button. The close button will only be shown when 'dismissible' is true.
          */
         "intlClose"?: string;
         /**
-          * 'Options' text string for the actions menu.
+          * Accessible name for the component's actions menu.
          */
         "intlOptions"?: string;
         /**
-          * When true, content is waiting to be loaded. This state shows a busy indicator.
+          * When true, a busy indicator is displayed.
          */
         "loading": boolean;
         /**
-          * Opens the action menu.
+          * When true, the action menu items in the `header-menu-actions` slot are open.
          */
         "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 the component's content to a specified 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>;
         /**
-          * Shows a back button in the header.
+          * When true, displays a back button in the header.
          */
         "showBackButton": boolean;
         /**
           * Summary text. A description displayed underneath the heading.
+          * @deprecated use description instead
          */
         "summary"?: string;
         /**
-          * This sets width of the panel.
+          * Specifies the width of the component.
          */
         "widthScale"?: Scale;
     }
     interface CalcitePickList {
         /**
-          * When true, disabled prevents interaction. This state shows items with lower opacity/grayed.
+          * When true, interaction is prevented and the component is displayed with lower opacity.
          */
         "disabled": boolean;
         /**
@@ -2223,51 +2326,52 @@ export namespace Components {
          */
         "filterPlaceholder": string;
         /**
-          * Returns the currently selected items
+          * Returns the component's selected `calcite-pick-list-item`s.
          */
         "getSelectedItems": () => Promise<Map<string, HTMLCalcitePickListItemElement>>;
         /**
-          * Number at which section headings should start for this component.
+          * Specifies the number at which section headings should start.
          */
         "headingLevel": HeadingLevel;
         /**
-          * When true, content is waiting to be loaded. This state shows a busy indicator.
+          * When true, a busy indicator is displayed.
          */
         "loading": boolean;
         /**
-          * Multiple works similar to standard radio buttons and checkboxes. When true, a user can select multiple items at a time. When false, only a single item can be selected at a time and selecting a new item will deselect any other selected items.
+          * Similar to standard radio buttons and checkboxes. When true, a user can select multiple `calcite-pick-list-item`s at a time. When false, only a single `calcite-pick-list-item` can be selected at a time, and a new selection will deselect previous selections.
          */
         "multiple": boolean;
         /**
-          * When true and single-selection is enabled, the selection will change when navigating items via the keyboard.
+          * When true and single-selection is enabled, the selection changes when navigating `calcite-pick-list-item`s via keyboard.
          */
         "selectionFollowsFocus": boolean;
         /**
           * Sets focus on the component.
+          * @param focusId
          */
         "setFocus": (focusId?: ListFocusId) => Promise<void>;
     }
     interface CalcitePickListGroup {
         /**
-          * The title used for all nested `calcite-pick-list` rows.
+          * Specifies the title for all nested `calcite-pick-list-item`s.
          */
         "groupTitle": string;
         /**
-          * Number at which section headings should start for this component.
+          * Specifies the number at which section headings should start.
          */
         "headingLevel": HeadingLevel;
     }
     interface CalcitePickListItem {
         /**
-          * An optional description for this item.  This will appear below the label text.
+          * A description for the component that displays below the label text.
          */
         "description"?: string;
         /**
-          * When false, the item cannot be deselected by user interaction.
+          * When false, the component cannot be deselected by user interaction.
          */
         "disableDeselect": boolean;
         /**
-          * When true, the item cannot be clicked and is visually muted.
+          * When true, interaction is prevented and the component is displayed with lower opacity.
          */
         "disabled": boolean;
         /**
@@ -2276,25 +2380,25 @@ export namespace Components {
          */
         "icon"?: ICON_TYPES | null;
         /**
-          * Used as an accessible label (aria-label) for the "remove item" action. Only applicable if removable is true.
+          * Accessible name for the component's remove button. Only applicable if removable is "true".
           * @default "Remove"
          */
         "intlRemove": string;
         /**
-          * The main label for this item. This will appear next to the icon.
+          * Label and accessible name for the component. Appears next to the icon.
          */
         "label": string;
         /**
-          * Used to provide additional metadata to an item, primarily used when the parent list has a filter.
+          * Provides additional metadata to the component. Primary use is for a filter on the parent list.
          */
         "metadata"?: Record<string, unknown>;
         "nonInteractive": boolean;
         /**
-          * Set this to true to display a remove action that removes the item from the list.
+          * When true, displays a remove action that removes the item from the list.
          */
         "removable"?: boolean;
         /**
-          * Set this to true to pre-select an item. Toggles when an item is checked/unchecked.
+          * When true, selects an item. Toggles when an item is checked/unchecked.
          */
         "selected": boolean;
         /**
@@ -2302,30 +2406,35 @@ 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.
+          * Toggles 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>;
         /**
-          * The item's associated value.
+          * The component's value.
          */
         "value": any;
     }
     interface CalcitePopover {
         /**
-          * Display a close button within the Popover.
+          * When true and clicking outside of the component, automatically closes open `calcite-popover`s.
+         */
+        "autoClose": boolean;
+        /**
+          * When true, a close button is added to the component.
           * @deprecated use dismissible instead.
          */
         "closeButton": boolean;
         /**
-          * Prevents flipping the popover's placement when it starts to overlap its reference element.
+          * When true, prevents flipping the component's placement when overlapping its `referenceElement`.
          */
         "disableFlip": boolean;
         /**
-          * Removes the caret pointer.
+          * When true, removes the caret pointer.
          */
         "disablePointer": boolean;
         /**
-          * Display a close button within the Popover.
+          * When true, a close button is added to the component.
          */
         "dismissible": boolean;
         /**
@@ -2333,60 +2442,66 @@ export namespace Components {
          */
         "flipPlacements"?: ComputedPlacement[];
         /**
-          * Heading text.
+          * The component header text.
          */
         "heading"?: string;
         /**
-          * Number at which section headings should start for this component.
+          * Specifies the number at which section headings should start.
          */
         "headingLevel": HeadingLevel;
         /**
-          * Text for close button.
+          * Accessible name for the component's close button.
           * @default "Close"
          */
         "intlClose": string;
         /**
-          * Accessible name for the component
+          * Accessible name for the component.
          */
         "label": string;
         /**
-          * Offset the position of the popover away from the reference element.
+          * Offsets the position of the popover away from the `referenceElement`.
           * @default 6
          */
         "offsetDistance": number;
         /**
-          * Offset the position of the popover along the reference element.
+          * Offsets the position of the popover along the `referenceElement`.
          */
         "offsetSkidding": number;
         /**
-          * Display and position the component.
+          * When true, displays and positions the component.
          */
         "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 element 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` used to position the component according to its "placement" value. Setting to an `HTMLElement` is preferred so the component does not need to query the DOM. However, a string `id` of the reference element can also be used.
          */
-        "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.
+          * Toggles the component's open property.
+          * @param value
          */
         "toggle": (value?: boolean) => Promise<void>;
+        /**
+          * When true, disables automatically toggling the component when its `referenceElement` has been triggered. This property can be set to "true" to manage when a popover is open.
+         */
+        "triggerDisabled": boolean;
     }
     interface CalcitePopoverManager {
         /**
@@ -2401,23 +2516,23 @@ export namespace Components {
     }
     interface CalciteProgress {
         /**
-          * Label for the progress indicator
+          * Accessible name for the component.
          */
         "label": string;
         /**
-          * For indeterminate progress bars, reverse the animation direction
+          * When true and for indeterminate progress bars, reverses the animation direction.
          */
         "reversed": boolean;
         /**
-          * Text to display for the progress indicator
+          * Text that displays under the component's indicator.
          */
         "text": string;
         /**
-          * Use indeterminate if finding actual progress value is impossible
+          * Use indeterminate if finding actual progress value is impossible.
          */
         "type": "indeterminate" | "determinate";
         /**
-          * Fraction completed, in the range of 0 - 1.0
+          * The component's progress value, with a range of 0.0 - 1.0.
          */
         "value": number;
     }
@@ -2525,6 +2640,7 @@ export namespace Components {
         "scale": Scale;
         /**
           * The group's selected item.
+          * @readonly
          */
         "selectedItem": HTMLCalciteRadioGroupItemElement;
         /**
@@ -2905,8 +3021,9 @@ export namespace Components {
         "endStep": () => Promise<void>;
         /**
           * set the requested step as active
+          * @param step
          */
-        "goToStep": (num: number) => Promise<void>;
+        "goToStep": (step: number) => Promise<void>;
         /**
           * optionally display a status icon next to the step title
          */
@@ -2914,7 +3031,7 @@ export namespace Components {
         /**
           * specify the layout of stepper, defaults to horizontal
          */
-        "layout": Layout;
+        "layout": Extract<"horizontal" | "vertical", Layout>;
         /**
           * set the next step as active
          */
@@ -2927,7 +3044,7 @@ export namespace Components {
           * set the previous step as active
          */
         "prevStep": () => Promise<void>;
-        "requestedContent": HTMLElement[] | NodeListOf<any>;
+        "requestedContent": Node[];
         /**
           * specify the scale of stepper, defaults to m
          */
@@ -2946,6 +3063,10 @@ export namespace Components {
           * has the step been completed
          */
         "complete": boolean;
+        /**
+          * stepper item description
+         */
+        "description": string;
         /**
           * is the step disabled and not navigable to by a user
          */
@@ -2954,16 +3075,22 @@ export namespace Components {
           * does the step contain an error that needs to be resolved by the user
          */
         "error": boolean;
+        /**
+          * stepper item heading
+         */
+        "heading"?: string;
         "icon": boolean;
         /**
           * pass a title for the stepper item
+          * @deprecated use description instead
          */
         "itemSubtitle"?: string;
         /**
           * pass a title for the stepper item
+          * @deprecated use heading instead
          */
         "itemTitle"?: string;
-        "layout"?: string;
+        "layout"?: Extract<"horizontal" | "vertical", Layout>;
         "numbered": boolean;
         "scale": Scale;
     }
@@ -3016,6 +3143,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 {
@@ -3068,6 +3199,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 {
@@ -3080,7 +3215,7 @@ export namespace Components {
          */
         "layout": TabLayout;
         /**
-          * Display the tabs above (default) or below the tab content
+          * Display the tabs top (default) or bottom of the tab content. above and below are deprecated.
          */
         "position": TabPosition;
         /**
@@ -3261,6 +3396,7 @@ export namespace Components {
         "scale": Scale;
         /**
           * Sets focus on the component.
+          * @param target
          */
         "setFocus": (target: TimePart) => Promise<void>;
         /**
@@ -3344,35 +3480,39 @@ export namespace Components {
     }
     interface CalciteTooltip {
         /**
-          * Accessible name for the component
+          * Closes the component when the `referenceElement` is clicked.
+         */
+        "closeOnClick": boolean;
+        /**
+          * Accessible name for the component.
          */
         "label": string;
         /**
-          * Offset the position of the tooltip away from the reference element.
+          * Offset the position of the component away from the `referenceElement`.
           * @default 6
          */
         "offsetDistance": number;
         /**
-          * Offset the position of the tooltip along the reference element.
+          * Offset the position of the component along the `referenceElement`.
          */
         "offsetSkidding": number;
         /**
-          * Display and position the component.
+          * When true, the component 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 the component according to its "placement" value. Setting to the `HTMLElement` is preferred so the component 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.
          */
@@ -3389,19 +3529,19 @@ export namespace Components {
         "child": boolean;
         /**
           * Display input
-          * @deprecated use "ancestors" selection-mode for checkbox input
+          * @deprecated Use "ancestors" selection-mode for checkbox input.
          */
         "inputEnabled": boolean;
         /**
-          * Display indentation guide lines
+          * Displays indentation guide lines.
          */
         "lines": boolean;
         /**
-          * Specify the scale of the tree, defaults to m
+          * Specifies the size of the component.
          */
         "scale": Scale;
         /**
-          * Customize how tree selection works (single, multi, children, multi-children, ancestors)
+          * Customize how the component's selection works.
           * @default "single"
           * @see [TreeSelectionMode](https://github.com/Esri/calcite-components/blob/master/src/components/tree/interfaces.ts#L5)
          */
@@ -3410,40 +3550,43 @@ export namespace Components {
     interface CalciteTreeItem {
         "depth": number;
         /**
-          * True if the item is in an expanded state
+          * When true, the component is expanded.
          */
         "expanded": boolean;
         "hasChildren": boolean;
+        /**
+          * In ancestor selection mode, show as indeterminate when only some children are selected.
+         */
         "indeterminate": boolean;
         /**
-          * Display checkboxes (set on parent)
-          * @deprecated set "ancestors" selection-mode on parent tree for checkboxes
+          * Displays checkboxes (set on parent).
+          * @deprecated Use "ancestors" selection-mode on parent for checkbox input.
          */
         "inputEnabled": boolean;
         "lines": boolean;
         "parentExpanded": boolean;
         "scale": Scale;
         /**
-          * Is the item currently selected
+          * When true, the component is selected.
          */
         "selected": boolean;
         "selectionMode": TreeSelectionMode;
     }
     interface CalciteValueList {
         /**
-          * When true, disabled prevents interaction. This state shows items with lower opacity/grayed.
+          * When true, interaction is prevented and the component is displayed with lower opacity.
          */
         "disabled": boolean;
         /**
-          * When true, the items will be sortable via drag and drop.
+          * When true, `calcite-value-list-item`s are sortable via a draggable button.
          */
         "dragEnabled": boolean;
         /**
-          * When true, an input appears at the top of the list that can be used by end users to filter items in the list.
+          * When true, an input appears at the top of the component that can be used by end users to filter list items.
          */
         "filterEnabled": boolean;
         /**
-          * Placeholder text for the filter input field.
+          * Placeholder text for the filter's input field.
          */
         "filterPlaceholder": string;
         /**
@@ -3451,34 +3594,35 @@ export namespace Components {
          */
         "getSelectedItems": () => Promise<Map<string, HTMLCalciteValueListItemElement>>;
         /**
-          * The list's group identifier.  To drag elements from one list into another, both lists must have the same group value.
+          * The component's group identifier.  To drag elements from one list into another, both lists must have the same group value.
          */
         "group"?: string;
         /**
-          * When true, content is waiting to be loaded. This state shows a busy indicator.
+          * When true, a busy indicator is displayed.
          */
         "loading": boolean;
         /**
-          * Multiple Works similar to standard radio buttons and checkboxes. When true, a user can select multiple items at a time. When false, only a single item can be selected at a time and selecting a new item will deselect any other selected items.
+          * Similar to standard radio buttons and checkboxes. When true, a user can select multiple `calcite-value-list-item`s at a time. When false, only a single `calcite-value-list-item` can be selected at a time, and a new selection will deselect previous selections.
          */
         "multiple": boolean;
         /**
-          * When true and single-selection is enabled, the selection will change when navigating items via the keyboard.
+          * When true and single-selection is enabled, the selection changes when navigating `calcite-value-list-item`s via keyboard.
          */
         "selectionFollowsFocus": boolean;
         /**
           * Sets focus on the component.
+          * @param focusId
          */
         "setFocus": (focusId?: ListFocusId) => Promise<void>;
     }
     interface CalciteValueListItem {
         /**
-          * An optional description for this item. Will appear below the label text.
+          * A description for the component that displays below the label text.
          */
         "description"?: string;
         "disableDeselect": boolean;
         /**
-          * When true, the item cannot be clicked and is visually muted
+          * When true, interaction is prevented and the component is displayed with lower opacity.
          */
         "disabled": boolean;
         "handleActivated"?: boolean;
@@ -3488,39 +3632,292 @@ export namespace Components {
          */
         "icon"?: ICON_TYPES | null;
         /**
-          * The main label for this item. Appears next to the icon.
+          * Label and accessible name for the component. Appears next to the icon.
          */
         "label": string;
         /**
-          * Used to provide additional metadata to an item, primarily used when the parent list has a filter.
+          * Provides additional metadata to the component. Primary use is for a filter on the parent list.
          */
         "metadata"?: Record<string, unknown>;
         /**
-          * When true, prevents the content of the list item from user interaction.
+          * When true, prevents the content of the component from user interaction.
          */
         "nonInteractive": boolean;
         /**
-          * Set this to true to display a remove action that removes the item from the list.
+          * When true, adds an action to remove the component.
          */
         "removable": boolean;
         /**
-          * Set this to true to pre-select an item. Toggles when an item is checked/unchecked.
+          * When true, the component is selected.
          */
         "selected": boolean;
         /**
-          * Sets focus on the component.
+          * Set focus on the component.
          */
         "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.
+          * 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>;
         /**
-          * The item's associated value.
+          * The component's value.
          */
         "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 {
     }
@@ -4158,97 +4555,112 @@ declare global {
 declare namespace LocalJSX {
     interface CalciteAccordion {
         /**
-          * specify the appearance - default (containing border), or minimal (no containing border), defaults to default
+          * Specifies the appearance of the component.
          */
         "appearance"?: AccordionAppearance;
         /**
-          * specify the placement of the icon in the header, defaults to end
+          * Specifies the placement of the icon in the header.
          */
         "iconPosition"?: Position;
         /**
-          * specify the type of the icon in the header, defaults to chevron
+          * Specifies the type of the icon in the header.
          */
         "iconType"?: "chevron" | "caret" | "plus-minus";
         /**
-          * specify the scale of accordion, defaults to m
+          * Specifies the size of the component.
          */
         "scale"?: Scale;
         /**
-          * specify the selection mode - multi (allow any number of open items), single (allow one open item), or single-persist (allow and require one open item), defaults to multi
+          * Specifies the selection mode - "multi" (allow any number of open items), "single" (allow one open item), or "single-persist" (allow and require one open item).
          */
         "selectionMode"?: "multi" | "single" | "single-persist";
     }
     interface CalciteAccordionItem {
         /**
-          * Indicates whether the item is active.
+          * When true, the component is active.
+          * @deprecated use expanded instead
          */
         "active"?: boolean;
         /**
-          * optionally pass an icon to display - accepts Calcite UI icon names
+          * Specifies a description for the component.
+         */
+        "description"?: string;
+        /**
+          * When true, item is expanded
+         */
+        "expanded"?: boolean;
+        /**
+          * Specifies heading text for the component.
+         */
+        "heading"?: string;
+        /**
+          * Specifies an icon to display - accepts Calcite UI icon names.
          */
         "icon"?: string;
         /**
-          * pass a title for the accordion item
+          * Specifies a subtitle for the component.
+          * @deprecated Use `description` instead.
          */
         "itemSubtitle"?: string;
         /**
-          * pass a title for the accordion item
+          * Specifies a title for the component.
+          * @deprecated Use `heading` instead.
          */
         "itemTitle"?: string;
     }
     interface CalciteAction {
         /**
-          * Indicates whether the action is highlighted.
+          * When true, the component is highlighted.
          */
         "active"?: boolean;
         /**
-          * Optionally specify the horizontal alignment of button elements with text content.
+          * Specifies the horizontal alignment of button elements with text content.
          */
         "alignment"?: Alignment;
         /**
-          * Specify the appearance style of the action, defaults to solid.
+          * Specifies the appearance of the component.
          */
         "appearance"?: Extract<"solid" | "clear", Appearance>;
         /**
-          * Compact mode is used internally by components to reduce side padding, e.g. calcite-block-section.
+          * When true, the side padding of the component is reduced. Compact mode is used internally by components, e.g. `calcite-block-section`.
          */
         "compact"?: boolean;
         /**
-          * When true, disabled prevents interaction. This state shows items with lower opacity/grayed.
+          * When true, interaction is prevented and the component is displayed with lower opacity.
          */
         "disabled"?: boolean;
         /**
-          * The name of the icon to display. The value of this property must match the icon name from https://esri.github.io/calcite-ui-icons/.
+          * Specifies an icon to display - accepts Calcite UI icon names.
          */
         "icon"?: string;
         /**
-          * Indicates unread changes.
+          * When true, indicates unread changes.
          */
         "indicator"?: boolean;
         /**
-          * string to override English loading text
+          * Specifies the text label to display while loading.
           * @default "Loading"
          */
         "intlLoading"?: string;
         /**
-          * The label of the action. If no label is provided, the label inherits what's provided for the `text` prop.
+          * Specifies the label of the component. If no label is provided, the label inherits what's provided for the `text` prop.
          */
         "label"?: string;
         /**
-          * When true, content is waiting to be loaded. This state shows a busy indicator.
+          * When true, a busy indicator is displayed.
          */
         "loading"?: boolean;
         /**
-          * Emitted when the action has been clicked.
+          * Emits when the component has been clicked.
           * @deprecated use onClick instead.
          */
-        "onCalciteActionClick"?: (event: CustomEvent<any>) => void;
+        "onCalciteActionClick"?: (event: CalciteActionCustomEvent<any>) => void;
         /**
-          * Specifies the size of the action.
+          * Specifies the size of the component.
          */
         "scale"?: Scale;
         /**
-          * Text that accompanies the action icon.
+          * Specifies text that accompanies the icon.
          */
         "text": string;
         /**
@@ -4258,35 +4670,35 @@ declare namespace LocalJSX {
     }
     interface CalciteActionBar {
         /**
-          * When set to true, the expand-toggling behavior will be disabled.
+          * When true, the expand-toggling behavior is disabled.
          */
         "expandDisabled"?: boolean;
         /**
-          * Indicates whether widget is expanded.
+          * When true, the component is expanded.
          */
         "expanded"?: boolean;
         /**
-          * Updates the label of the collapse icon when the component is expanded.
+          * Specifies the label of the collapse icon when the component is expanded.
          */
         "intlCollapse"?: string;
         /**
-          * Updates the label of the expand icon when the component is not expanded.
+          * Specifies the label of the expand icon when the component is collapsed.
          */
         "intlExpand"?: string;
         /**
-          * Emitted when expanded has been toggled.
+          * Emits when the `expanded` property is toggled.
          */
-        "onCalciteActionBarToggle"?: (event: CustomEvent<any>) => void;
+        "onCalciteActionBarToggle"?: (event: CalciteActionBarCustomEvent<any>) => void;
         /**
-          * Disables automatically overflowing actions that won't fit into menus.
+          * Disables automatically overflowing `calcite-action`s that won't fit into menus.
          */
         "overflowActionsDisabled"?: boolean;
         /**
-          * Arranges the component depending on the elements 'dir' property.
+          * Arranges the component depending on the element's `dir` property.
          */
         "position"?: Position;
         /**
-          * Specifies the size of the expand action.
+          * Specifies the size of the expand `calcite-action`.
          */
         "scale"?: Scale;
     }
@@ -4296,29 +4708,29 @@ declare namespace LocalJSX {
          */
         "columns"?: Columns;
         /**
-          * Indicates whether widget is expanded.
+          * When true, the component is expanded.
          */
         "expanded"?: boolean;
         /**
-          * Text string for the actions menu.
+          * Specifies a text string for the `calcite-action-menu`.
          */
         "intlMore"?: string;
         /**
-          * Indicates the horizontal, vertical, or grid layout of the component.
+          * Indicates the layout of the component.
          */
         "layout"?: Layout;
         /**
-          * Opens the action menu.
+          * When true, the `calcite-action-menu` is open.
          */
         "menuOpen"?: boolean;
         /**
-          * Specifies the size of the action-menu.
+          * Specifies the size of the `calcite-action-menu`.
          */
         "scale"?: Scale;
     }
     interface CalciteActionMenu {
         /**
-          * Indicates whether widget is expanded.
+          * When true, the component is expanded.
          */
         "expanded"?: boolean;
         /**
@@ -4326,131 +4738,139 @@ declare namespace LocalJSX {
          */
         "flipPlacements"?: ComputedPlacement[];
         /**
-          * Text string for the actions menu.
+          * Specifies the text string for the component.
          */
         "label": string;
         /**
-          * Emitted when the open property has changed.
+          * Emits when the `open` property has changed.
          */
-        "onCalciteActionMenuOpenChange"?: (event: CustomEvent<any>) => void;
+        "onCalciteActionMenuOpenChange"?: (event: CalciteActionMenuCustomEvent<any>) => void;
         /**
-          * Opens the action menu.
+          * When true, the component 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.
+          * Determines the type of positioning to use for the overlaid content. If your element 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;
         /**
-          * Specifies the size of the menu trigger action.
+          * Specifies the size of the component's trigger `calcite-action`.
          */
         "scale"?: Scale;
     }
     interface CalciteActionPad {
         /**
-          * When set to true, the expand-toggling behavior will be disabled.
+          * When true, the expand-toggling behavior is disabled.
          */
         "expandDisabled"?: boolean;
         /**
-          * Indicates whether widget is expanded.
+          * When true, the component is expanded.
          */
         "expanded"?: boolean;
         /**
-          * Updates the label of the collapse icon when the component is expanded.
+          * Specifies the label of the collapse icon when the component is expanded.
          */
         "intlCollapse"?: string;
         /**
-          * Updates the label of the expand icon when the component is not expanded.
+          * Specifies the label of the expand icon when the component is collapsed.
          */
         "intlExpand"?: string;
         /**
-          * Indicates the horizontal or vertical layout of the component.
+          * Indicates the layout of the component.
          */
         "layout"?: Layout;
         /**
-          * Emitted when expanded has been toggled.
+          * Emits when the `expanded` property is toggled.
          */
-        "onCalciteActionPadToggle"?: (event: CustomEvent<any>) => void;
+        "onCalciteActionPadToggle"?: (event: CalciteActionPadCustomEvent<any>) => void;
         /**
-          * Arranges the component depending on the elements 'dir' property.
+          * Arranges the component depending on the element's `dir` property.
          */
         "position"?: Position;
         /**
-          * Specifies the size of the expand action.
+          * Specifies the size of the expand `calcite-action`.
          */
         "scale"?: Scale;
     }
     interface CalciteAlert {
         /**
-          * Is the alert currently active or not
+          * When true, the component is active.
          */
         "active"?: boolean;
         /**
-          * Close the alert automatically (recommended for passive, non-blocking alerts)
+          * When true, the component closes automatically (recommended for passive, non-blocking alerts).
          */
         "autoDismiss"?: boolean;
         /**
-          * Duration of autoDismiss (only used with `autoDismiss`)
+          * Specifies the duration before the component automatically closes (only use with `autoDismiss`).
          */
         "autoDismissDuration"?: AlertDuration;
         /**
-          * Color for the alert (will apply to top border and icon)
+          * Specifies the color for the component (will apply to top border and icon).
          */
         "color"?: StatusColor;
         /**
-          * 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 true, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon.
          */
         "icon"?: string | boolean;
         /**
-          * string to override English close text
+          * Specifies the text label for the close button.
           * @default "Close"
          */
         "intlClose"?: string;
         /**
-          * Accessible name for the component
+          * Specifies an accessible name for the component.
          */
         "label": string;
+        "onCalciteAlertBeforeClose"?: (event: CalciteAlertCustomEvent<{
+    el: HTMLCalciteAlertElement;
+    queue: HTMLCalciteAlertElement[];
+  }>) => void;
+        "onCalciteAlertBeforeOpen"?: (event: CalciteAlertCustomEvent<{
+    el: HTMLCalciteAlertElement;
+    queue: HTMLCalciteAlertElement[];
+  }>) => void;
+        "onCalciteAlertClose"?: (event: CalciteAlertCustomEvent<{
+    el: HTMLCalciteAlertElement;
+    queue: HTMLCalciteAlertElement[];
+  }>) => void;
+        "onCalciteAlertOpen"?: (event: CalciteAlertCustomEvent<{
+    el: HTMLCalciteAlertElement;
+    queue: HTMLCalciteAlertElement[];
+  }>) => void;
         /**
-          * Fired when an alert is closed
-         */
-        "onCalciteAlertClose"?: (event: CustomEvent<any>) => void;
-        /**
-          * Fired when an alert is opened
-         */
-        "onCalciteAlertOpen"?: (event: CustomEvent<any>) => void;
-        /**
-          * specify the placement of the alert
+          * Specifies the placement of the component
          */
         "placement"?: AlertPlacement;
         /**
-          * specify the scale of the alert, defaults to m
+          * Specifies the size of the component.
          */
         "scale"?: Scale;
     }
     interface CalciteAvatar {
         /**
-          * full name of the user
+          * Specifies the full name of the user.
          */
         "fullName"?: string;
         /**
-          * specify the scale of the avatar, defaults to m
+          * Specifies the size of the component.
          */
         "scale"?: Scale;
         /**
-          * src to an image (remember to add a token if the user is private)
+          * Specifies the `src` to an image (remember to add a token if the user is private).
          */
         "thumbnail"?: string;
         /**
-          * unique id for user
+          * Specifies the unique id of the user.
          */
         "userId"?: string;
         /**
-          * user name
+          * Specifies the username of the user.
          */
         "username"?: string;
     }
@@ -4459,6 +4879,14 @@ declare namespace LocalJSX {
           * When true, this block will be collapsible.
          */
         "collapsible"?: boolean;
+        /**
+          * Block description
+         */
+        "description"?: string;
+        /**
+          * When true, removes padding for the slotted content
+         */
+        "disablePadding"?: boolean;
         /**
           * When true, disabled prevents interaction. This state shows items with lower opacity/grayed.
          */
@@ -4476,11 +4904,13 @@ declare namespace LocalJSX {
          */
         "headingLevel"?: HeadingLevel;
         /**
-          * Tooltip used for the toggle when expanded.
+          * Aria-label for collapsing the toggle and tooltip used for the toggle when expanded.
+          * @default "Collapse"
          */
         "intlCollapse"?: string;
         /**
-          * Tooltip used for the toggle when collapsed.
+          * Aria-label for expanding the toggle and tooltip used for the toggle when collapsed.
+          * @default "Expand"
          */
         "intlExpand"?: string;
         /**
@@ -4500,7 +4930,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.
          */
@@ -4511,6 +4941,7 @@ declare namespace LocalJSX {
         "status"?: Status;
         /**
           * Block summary.
+          * @deprecated use description instead
          */
         "summary"?: string;
     }
@@ -4526,7 +4957,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.
          */
@@ -4651,7 +5082,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.
          */
@@ -4660,6 +5091,7 @@ declare namespace LocalJSX {
           * Indicates whether the card is selected.
          */
         "selected"?: boolean;
+        "thumbnailPosition"?: LogicalFlowPosition;
     }
     interface CalciteCheckbox {
         /**
@@ -4685,7 +5117,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
          */
@@ -4700,6 +5132,10 @@ declare namespace LocalJSX {
           * specify the appearance style of the button, defaults to solid.
          */
         "appearance"?: Extract<"solid" | "clear", Appearance>;
+        /**
+          * When true, hides the chip
+         */
+        "closed"?: boolean;
         /**
           * specify the color of the button, defaults to blue
          */
@@ -4724,7 +5160,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
          */
@@ -4859,14 +5295,18 @@ declare namespace LocalJSX {
           * @default "Value"
          */
         "intlValue"?: string;
+        /**
+          * standard UniCode numeral system tag for localization
+         */
+        "numberingSystem"?: string;
         /**
           * 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.
          */
@@ -4897,10 +5337,14 @@ declare namespace LocalJSX {
           * @default "No color"
          */
         "intlNoColor"?: string;
+        /**
+          * standard UniCode numeral system tag for localization
+         */
+        "numberingSystem"?: string;
         /**
           * Emitted when the hex value changes.
          */
-        "onCalciteColorPickerHexInputChange"?: (event: CustomEvent<any>) => void;
+        "onCalciteColorPickerHexInputChange"?: (event: CalciteColorPickerHexInputCustomEvent<any>) => void;
         /**
           * The component's scale.
          */
@@ -4927,7 +5371,8 @@ declare namespace LocalJSX {
     }
     interface CalciteCombobox {
         /**
-          * Opens or closes the combobox
+          * When true, opens the combobox
+          * @deprecated use open instead
          */
         "active"?: boolean;
         /**
@@ -4959,26 +5404,34 @@ declare namespace LocalJSX {
           * The name of the switch input
          */
         "name"?: string;
+        "onCalciteComboboxBeforeClose"?: (event: CalciteComboboxCustomEvent<{ el: HTMLCalciteComboboxElement }>) => void;
+        "onCalciteComboboxBeforeOpen"?: (event: CalciteComboboxCustomEvent<{ el: HTMLCalciteComboboxElement }>) => void;
         /**
           * 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;
+        "onCalciteComboboxClose"?: (event: CalciteComboboxCustomEvent<{ el: HTMLCalciteComboboxElement }>) => void;
         /**
           * Called when the user has entered text to filter the options list
          */
-        "onCalciteComboboxFilterChange"?: (event: CustomEvent<{
+        "onCalciteComboboxFilterChange"?: (event: CalciteComboboxCustomEvent<{
     visibleItems: HTMLCalciteComboboxItemElement[];
     text: string;
   }>) => void;
+        "onCalciteComboboxOpen"?: (event: CalciteComboboxCustomEvent<{ el: HTMLCalciteComboboxElement }>) => void;
         /**
           * Called when the selected items set changes
           * @deprecated use calciteComboboxChange instead
          */
-        "onCalciteLookupChange"?: (event: CustomEvent<HTMLCalciteComboboxItemElement[]>) => void;
+        "onCalciteLookupChange"?: (event: CalciteComboboxCustomEvent<HTMLCalciteComboboxItemElement[]>) => void;
+        /**
+          * When true, opens the combobox
+         */
+        "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.
          */
@@ -4987,6 +5440,10 @@ declare namespace LocalJSX {
           * Placeholder text for input
          */
         "placeholder"?: string;
+        /**
+          * Placeholder icon for input
+         */
+        "placeholderIcon"?: string;
         /**
           * Specify the scale of the combobox, defaults to m
          */
@@ -5011,12 +5468,17 @@ declare namespace LocalJSX {
         "ancestors"?: ComboboxChildElement[];
         /**
           * Don't filter this item based on the search text
+          * @deprecated use filterDisabled instead
          */
         "constant"?: boolean;
         /**
           * When true, the item cannot be clicked and is visually muted.
          */
         "disabled"?: boolean;
+        /**
+          * Do not filter this item based on the search text
+         */
+        "filterDisabled"?: boolean;
         /**
           * Unique identifier, used for accessibility
          */
@@ -5028,7 +5490,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.
          */
@@ -5109,12 +5571,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.
          */
@@ -5178,7 +5640,7 @@ declare namespace LocalJSX {
         /**
           * Emitted when user selects day
          */
-        "onCalciteDaySelect"?: (event: CustomEvent<any>) => void;
+        "onCalciteDaySelect"?: (event: CalciteDatePickerDayCustomEvent<any>) => void;
         /**
           * Showing date range
          */
@@ -5228,11 +5690,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
          */
@@ -5286,7 +5748,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
          */
@@ -5299,6 +5761,7 @@ declare namespace LocalJSX {
     interface CalciteDropdown {
         /**
           * Opens or closes the dropdown
+          * @deprecated use open instead.
          */
         "active"?: boolean;
         /**
@@ -5317,18 +5780,18 @@ declare namespace LocalJSX {
           * specify the maximum number of calcite-dropdown-items to display before showing the scroller, must be greater than 0 - this value does not include groupTitles passed to calcite-dropdown-group
          */
         "maxItems"?: number;
+        "onCalciteDropdownBeforeClose"?: (event: CalciteDropdownCustomEvent<{ el: HTMLCalciteDropdownElement }>) => void;
+        "onCalciteDropdownBeforeOpen"?: (event: CalciteDropdownCustomEvent<{ el: HTMLCalciteDropdownElement }>) => void;
+        "onCalciteDropdownClose"?: (event: CalciteDropdownCustomEvent<{ el: HTMLCalciteDropdownElement }>) => void;
+        "onCalciteDropdownOpen"?: (event: CalciteDropdownCustomEvent<{ el: HTMLCalciteDropdownElement }>) => void;
         /**
-          * fires when a dropdown has been closed *
-         */
-        "onCalciteDropdownClose"?: (event: CustomEvent<void>) => void;
-        /**
-          * fires when a dropdown has been opened *
+          * fires when a dropdown item has been selected or deselected
          */
-        "onCalciteDropdownOpen"?: (event: CustomEvent<void>) => void;
+        "onCalciteDropdownSelect"?: (event: CalciteDropdownCustomEvent<void>) => void;
         /**
-          * fires when a dropdown item has been selected or deselected *
+          * When true, opens the dropdown
          */
-        "onCalciteDropdownSelect"?: (event: CustomEvent<void>) => void;
+        "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.
          */
@@ -5352,7 +5815,7 @@ declare namespace LocalJSX {
          */
         "type"?: "hover" | "click";
         /**
-          * specify the width of dropdown, defaults to m
+          * specify the width of dropdown
          */
         "width"?: Scale;
     }
@@ -5468,7 +5931,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
          */
@@ -5514,7 +5977,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
          */
@@ -5577,11 +6040,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
          */
@@ -5589,125 +6052,145 @@ declare namespace LocalJSX {
     }
     interface CalciteInput {
         /**
-          * specify the alignment of the value of the input
+          * Specifies the text alignment of the component's value.
          */
         "alignment"?: Position;
         /**
-          * should the input autofocus
+          * When true, the component is focused on page load.
+          * @mdn [autofocus](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus)
          */
         "autofocus"?: boolean;
         /**
-          * optionally display a clear button that displays when field has a value shows by default for search, time, date will not display for type="textarea"
+          * When true, a clear button is displayed when the component has a value. The clear button shows by default for "search", "time", and "date" types, and will not display for the "textarea" type.
          */
         "clearable"?: boolean;
         /**
-          * is the input disabled
+          * When true, interaction is prevented and the component is displayed with lower opacity.
+          * @mdn [disabled](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled)
          */
         "disabled"?: boolean;
         /**
-          * for number values, displays the locale's group separator
+          * When true, number values are displayed with the locale's group separator.
          */
         "groupSeparator"?: boolean;
         /**
-          * when true, the component will not be visible
+          * When true, the component will not be visible.
+          * @mdn [hidden](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden)
          */
         "hidden"?: boolean;
         /**
-          * when used as a boolean set to true, show a default recommended icon for certain input types (tel, password, email, date, time, search). You can also pass a calcite-ui-icon name to this prop to display a requested icon for any input type
+          * When true, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon.
          */
         "icon"?: string | boolean;
         /**
-          * flip the icon in rtl
+          * When true, the icon is flipped in RTL.
          */
         "iconFlipRtl"?: boolean;
         /**
-          * string to override English loading text
+          * A text label that will appear on the clear button for screen readers.
+         */
+        "intlClear"?: string;
+        /**
+          * Accessible name that will appear while loading.
           * @default "Loading"
          */
         "intlLoading"?: string;
         /**
-          * Applies to the aria-label attribute on the button or hyperlink
+          * Accessible name for the component's button or hyperlink.
          */
         "label"?: string;
         /**
-          * specify if the input is in loading state
+          * When true, the component is in the loading state and `calcite-progress` is displayed.
          */
         "loading"?: boolean;
         /**
-          * BCP 47 language tag for desired language and country format
+          * Specifies the BCP 47 language tag for the desired language and country format.
          */
         "locale"?: string;
         /**
-          * input max
+          * Specifies the maximum value for type "number".
+          * @mdn [max](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#max)
          */
         "max"?: number;
         /**
-          * Maximum length of the input value
+          * Specifies the maximum length of text for the component's value.
+          * @mdn [maxlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#maxlength)
          */
         "maxLength"?: number;
         /**
-          * Maximum length of text input.
+          * Specifies the maximum length of text for the component's value.
           * @deprecated use maxLength instead
          */
         "maxlength"?: number;
         /**
-          * input min
+          * Specifies the minimum value for type "number".
+          * @mdn [min](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#min)
          */
         "min"?: number;
         /**
-          * Minimum length of the text input
+          * Specifies the minimum length of text for the component's value.
+          * @mdn [minlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#minlength)
          */
         "minLength"?: number;
         /**
-          * The name of the input
+          * Specifies the name of the component.
+          * @mdn [name](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name)
          */
         "name"?: string;
         /**
-          * specify the placement of the number buttons
+          * Specifies the placement of the buttons for type "number".
          */
         "numberButtonType"?: InputPlacement;
         /**
-          * This event fires each time a new value is typed and committed.
+          * Specifies the Unicode numeral system used by the component for localization.
+          * @mdn [numberingSystem](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/numberingSystem)
+         */
+        "numberingSystem"?: string;
+        /**
+          * 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.
+          * Fires each time a new value is typed.
          */
-        "onCalciteInputInput"?: (event: CustomEvent<any>) => void;
+        "onCalciteInputInput"?: (event: CalciteInputCustomEvent<any>) => void;
         /**
-          * explicitly whitelist placeholder attribute
+          * Specifies placeholder text for the component.
+          * @mdn [placeholder](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#placeholder)
          */
         "placeholder"?: string;
         /**
-          * optionally add prefix
+          * Adds text to the start of the component.
          */
         "prefixText"?: string;
         /**
-          * When true, a field cannot be modified.
+          * When true, the value cannot be modified.
+          * @mdn [readOnly](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly)
          */
         "readOnly"?: boolean;
         /**
-          * is the input required
+          * When true, the component must have a value in order for the form to submit.
          */
         "required"?: boolean;
         /**
-          * specify the scale of the input, defaults to m
+          * Specifies the size of the component.
          */
         "scale"?: Scale;
         /**
-          * specify the status of the input field, determines message and icons
+          * Specifies the status of the input field, which determines message and icons.
          */
         "status"?: Status;
         /**
-          * input step
+          * Specifies the granularity that the component's value must adhere to.
+          * @mdn [step](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/step)
          */
         "step"?: number | "any";
         /**
-          * optionally add suffix  *
+          * Adds text to the end of the component.
          */
         "suffixText"?: string;
         /**
-          * specify the input type  Note that the following types add type-specific icons by default: `date`, `email`, `password`, `search`, `tel`, `time`
+          * Specifies the component type.  Note that the following types add type-specific icons by default: "date", "email", "password", "search", "tel", "time".
          */
         "type"?: | "color"
     | "date"
@@ -5726,7 +6209,7 @@ declare namespace LocalJSX {
     | "url"
     | "week";
         /**
-          * input value
+          * The component's value.
          */
         "value"?: string;
     }
@@ -5804,17 +6287,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.
          */
@@ -5942,7 +6425,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)
@@ -5968,6 +6451,7 @@ declare namespace LocalJSX {
         "alignment"?: Alignment;
         /**
           * eliminates any space around the label
+          * @deprecated set the --calcite-label-margin-bottom css variable to 0 instead
          */
         "disableSpacing"?: boolean;
         /**
@@ -6029,244 +6513,245 @@ declare namespace LocalJSX {
     }
     interface CalciteList {
         /**
-          * When true, disabled prevents user interaction.
+          * When true, interaction is prevented and the component is displayed with lower opacity.
          */
         "disabled"?: boolean;
         /**
-          * Number at which section headings should start for this component.
+          * Specifies the number at which section headings should start.
          */
         "headingLevel"?: HeadingLevel;
     }
     interface CalciteListItem {
         /**
-          * An optional description for this item.  This will appear below the label text.
+          * A description for the component. Displays below the label text.
          */
         "description"?: string;
         /**
-          * When true, disabled prevents interaction.
+          * When true, interaction is prevented and the component is displayed with lower opacity.
          */
         "disabled"?: boolean;
         /**
-          * The label text of the list item. This will appear above the description text.
+          * The label text of the component. Displays above the description text.
          */
         "label"?: string;
         /**
-          * When true, prevents the content of the list item from user interaction.
+          * When true, prevents the content of the component from user interaction.
          */
         "nonInteractive"?: boolean;
     }
     interface CalciteListItemGroup {
         /**
-          * The title used for all nested `calcite-list-item` rows.
+          * The header text for all nested `calcite-list-item` rows.
          */
         "heading"?: string;
         /**
-          * Number at which section headings should start for this component.
+          * Specifies the number at which section headings should start.
          */
         "headingLevel"?: HeadingLevel;
     }
     interface CalciteLoader {
         /**
-          * Show the loader
+          * When true, the component 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 component.
          */
         "label": string;
         /**
-          * Turn off spacing around the loader
+          * Disables spacing around the component.
          */
         "noPadding"?: boolean;
         /**
-          * Speficy the scale of the loader. Defaults to "m"
+          * Specifies the size of the component.
          */
         "scale"?: Scale;
         /**
-          * Text which should appear under the loading indicator (optional)
+          * Text that displays under the component's 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
+          * The component's value. 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.
+          * @deprecated use open instead
          */
         "active"?: boolean;
         /**
-          * Background color of modal content
+          * Sets the background color of the component's 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 component 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 component's close button.
          */
         "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 component when clicked outside.
          */
         "disableOutsideClose"?: boolean;
         /**
-          * Prevent the modal from taking up the entire screen on mobile
+          * When true, prevents the component 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)
+          * Sets the component to always be fullscreen (overrides width).
          */
         "fullscreen"?: boolean;
         /**
-          * Aria label for the close button
+          * Accessible name for the component's 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 the component finishes the close animation.
          */
-        "onCalciteModalClose"?: (event: CustomEvent<any>) => void;
+        "onCalciteModalClose"?: (event: CalciteModalCustomEvent<any>) => void;
         /**
-          * Fired when the modal finishes the open animation
+          * Emits when the component finishes the open animation.
          */
-        "onCalciteModalOpen"?: (event: CustomEvent<any>) => void;
+        "onCalciteModalOpen"?: (event: CalciteModalCustomEvent<any>) => void;
         /**
-          * specify the scale of modal, defaults to m
+          * When true,`calcite-modal`  opens
+         */
+        "open"?: boolean;
+        /**
+          * Specifies the size of the component.
          */
         "scale"?: Scale;
         /**
-          * Set the width of the modal. Can use stock sizes or pass a number (in pixels)
+          * Specifies the width of the component. 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 component is active.
          */
         "active"?: boolean;
         /**
-          * Color for the notice (will apply to top border and icon)
+          * The color for the component's top border and icon.
          */
         "color"?: StatusColor;
         /**
-          * Optionally show a button the user can click to dismiss the notice
+          * When true, a close button is added to the component.
          */
         "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
+          * Specifies an icon to display - accepts Calcite UI icon names.
          */
         "icon"?: string | boolean;
         /**
-          * String for the close button.
+          * Accessible name for the close button.
           * @default "Close"
          */
         "intlClose"?: string;
         /**
-          * Fired when an notice is closed
+          * Fired when the component is closed.
          */
-        "onCalciteNoticeClose"?: (event: CustomEvent<any>) => void;
+        "onCalciteNoticeClose"?: (event: CalciteNoticeCustomEvent<any>) => void;
         /**
-          * Fired when an Notice is opened
+          * Fired when the component is opened.
          */
-        "onCalciteNoticeOpen"?: (event: CustomEvent<any>) => void;
+        "onCalciteNoticeOpen"?: (event: CalciteNoticeCustomEvent<any>) => void;
         /**
-          * specify the scale of the notice, defaults to m
+          * Specifies the size of the component.
          */
         "scale"?: Scale;
         /**
-          * specify the width of the notice, defaults to auto
+          * Specifies the width of the component.
          */
         "width"?: Width;
     }
     interface CalciteOption {
         /**
-          * When true, it prevents the option from being selected.
+          * When true, interaction is prevented and the component is displayed with lower opacity.
          */
         "disabled"?: boolean;
         /**
-          * The option label.
+          * Accessible name for the component.
          */
         "label"?: string;
         /**
-          * When true, this option is selected. Otherwise, false.
+          * When true, the component is selected.
          */
         "selected"?: boolean;
         /**
-          * The value associated with this option.
+          * The component's value.
          */
         "value"?: any;
     }
     interface CalciteOptionGroup {
         /**
-          * When true, it prevents selection from any of its associated options.
+          * When true, interaction is prevented and the component is displayed with lower opacity.
          */
         "disabled"?: boolean;
         /**
-          * The group label. This property is required.
+          * Accessible name for the component.
          */
         "label": string;
     }
     interface CalcitePagination {
         /**
-          * number of items per page
+          * Specifies the number of items per page.
          */
         "num"?: number;
         /**
-          * Emitted whenever the selected page changes.
-          * @see [PaginationDetail](https://github.com/Esri/calcite-components/blob/master/src/components/pagination/calcite-pagination.tsx#L18)
+          * Emits when the selected page changes.
+          * @see [PaginationDetail](https://github.com/Esri/calcite-components/blob/master/src/components/pagination/pagination.tsx#L23)
          */
-        "onCalcitePaginationChange"?: (event: CustomEvent<PaginationDetail>) => void;
+        "onCalcitePaginationChange"?: (event: CalcitePaginationCustomEvent<PaginationDetail>) => void;
         /**
-          * Emitted whenever the selected page changes.
+          * Emits when the selected page changes.
           * @deprecated use calcitePaginationChange instead
          */
-        "onCalcitePaginationUpdate"?: (event: CustomEvent<PaginationDetail>) => void;
+        "onCalcitePaginationUpdate"?: (event: CalcitePaginationCustomEvent<PaginationDetail>) => void;
         /**
-          * The scale of the pagination
+          * Specifies the size of the component.
          */
         "scale"?: Scale;
         /**
-          * index of item that should begin the page
+          * Specifies the starting item number.
          */
         "start"?: number;
         /**
-          * Used as an accessible label (aria-label) for the next button
+          * Accessible name for the component's next button.
           * @default "Next"
          */
         "textLabelNext"?: string;
         /**
-          * Used as an accessible label (aria-label) of the previous button
+          * Accessible name for the component's previous button.
           * @default "Previous"
          */
         "textLabelPrevious"?: string;
         /**
-          * total number of items
+          * Specifies the total number of items.
          */
         "total"?: number;
     }
@@ -6276,77 +6761,87 @@ declare namespace LocalJSX {
          */
         "beforeBack"?: () => Promise<void>;
         /**
-          * When true, disabled prevents interaction. This state shows items with lower opacity/grayed.
+          * A description for the component.
+         */
+        "description"?: string;
+        /**
+          * When true, interaction is prevented and the component is displayed with lower opacity.
          */
         "disabled"?: boolean;
         /**
-          * Hides the panel.
+          * When true, hides the component.
          */
         "dismissed"?: boolean;
         /**
-          * Displays a close button in the trailing side of the header.
+          * When true, a close button is added to the component.
          */
         "dismissible"?: boolean;
         /**
-          * Heading text.
+          * The component header text.
          */
         "heading"?: string;
         /**
-          * Number at which section headings should start for this component.
+          * Specifies the number at which section headings should start.
          */
         "headingLevel"?: HeadingLevel;
         /**
-          * Specifies the maximum height of the panel.
+          * Specifies the maximum height of the component.
          */
         "heightScale"?: Scale;
         /**
-          * 'Back' text string.
+          * Accessible name for the component's back button. The back button will only be shown when 'showBackButton' is true.
          */
         "intlBack"?: string;
         /**
-          * 'Close' text string for the close button. The close button will only be shown when 'dismissible' is true.
+          * Accessible name for the component's close button. The close button will only be shown when 'dismissible' is true.
          */
         "intlClose"?: string;
         /**
-          * 'Options' text string for the actions menu.
+          * Accessible name for the component's actions menu.
          */
         "intlOptions"?: string;
         /**
-          * When true, content is waiting to be loaded. This state shows a busy indicator.
+          * When true, a busy indicator is displayed.
          */
         "loading"?: boolean;
         /**
-          * Opens the action menu.
+          * When true, the action menu items in the `header-menu-actions` slot are open.
          */
         "menuOpen"?: boolean;
         /**
-          * Emitted when the back button has been clicked.
+          * Fires when the back button is clicked.
          */
-        "onCalcitePanelBackClick"?: (event: CustomEvent<any>) => void;
+        "onCalcitePanelBackClick"?: (event: CalcitePanelCustomEvent<any>) => void;
         /**
-          * Emitted when the close button has been clicked.
+          * Fires when the close button is clicked.
          */
-        "onCalcitePanelDismissedChange"?: (event: CustomEvent<any>) => void;
+        "onCalcitePanelDismiss"?: (event: CalcitePanelCustomEvent<any>) => void;
         /**
-          * Emitted when the content has been scrolled.
+          * Fires when the close button is clicked.
+          * @deprecated use calcitePanelDismiss instead.
          */
-        "onCalcitePanelScroll"?: (event: CustomEvent<any>) => void;
+        "onCalcitePanelDismissedChange"?: (event: CalcitePanelCustomEvent<any>) => void;
         /**
-          * Shows a back button in the header.
+          * Fires when the content is scrolled.
+         */
+        "onCalcitePanelScroll"?: (event: CalcitePanelCustomEvent<any>) => void;
+        /**
+          * When true, displays a back button in the header.
          */
         "showBackButton"?: boolean;
         /**
           * Summary text. A description displayed underneath the heading.
+          * @deprecated use description instead
          */
         "summary"?: string;
         /**
-          * This sets width of the panel.
+          * Specifies the width of the component.
          */
         "widthScale"?: Scale;
     }
     interface CalcitePickList {
         /**
-          * When true, disabled prevents interaction. This state shows items with lower opacity/grayed.
+          * When true, interaction is prevented and the component is displayed with lower opacity.
          */
         "disabled"?: boolean;
         /**
@@ -6358,47 +6853,47 @@ declare namespace LocalJSX {
          */
         "filterPlaceholder"?: string;
         /**
-          * Number at which section headings should start for this component.
+          * Specifies the number at which section headings should start.
          */
         "headingLevel"?: HeadingLevel;
         /**
-          * When true, content is waiting to be loaded. This state shows a busy indicator.
+          * When true, a busy indicator is displayed.
          */
         "loading"?: boolean;
         /**
-          * Multiple works similar to standard radio buttons and checkboxes. When true, a user can select multiple items at a time. When false, only a single item can be selected at a time and selecting a new item will deselect any other selected items.
+          * Similar to standard radio buttons and checkboxes. When true, a user can select multiple `calcite-pick-list-item`s at a time. When false, only a single `calcite-pick-list-item` can be selected at a time, and a new selection will deselect previous selections.
          */
         "multiple"?: boolean;
         /**
-          * Emitted when any of the item selections have changed.
+          * Emits when any of the `calcite-pick-list-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.
+          * When true and single-selection is enabled, the selection changes when navigating `calcite-pick-list-item`s via keyboard.
          */
         "selectionFollowsFocus"?: boolean;
     }
     interface CalcitePickListGroup {
         /**
-          * The title used for all nested `calcite-pick-list` rows.
+          * Specifies the title for all nested `calcite-pick-list-item`s.
          */
         "groupTitle"?: string;
         /**
-          * Number at which section headings should start for this component.
+          * Specifies the number at which section headings should start.
          */
         "headingLevel"?: HeadingLevel;
     }
     interface CalcitePickListItem {
         /**
-          * An optional description for this item.  This will appear below the label text.
+          * A description for the component that displays below the label text.
          */
         "description"?: string;
         /**
-          * When false, the item cannot be deselected by user interaction.
+          * When false, the component cannot be deselected by user interaction.
          */
         "disableDeselect"?: boolean;
         /**
-          * When true, the item cannot be clicked and is visually muted.
+          * When true, interaction is prevented and the component is displayed with lower opacity.
          */
         "disabled"?: boolean;
         /**
@@ -6407,60 +6902,64 @@ declare namespace LocalJSX {
          */
         "icon"?: ICON_TYPES | null;
         /**
-          * Used as an accessible label (aria-label) for the "remove item" action. Only applicable if removable is true.
+          * Accessible name for the component's remove button. Only applicable if removable is "true".
           * @default "Remove"
          */
         "intlRemove"?: string;
         /**
-          * The main label for this item. This will appear next to the icon.
+          * Label and accessible name for the component. Appears next to the icon.
          */
         "label"?: string;
         /**
-          * Used to provide additional metadata to an item, primarily used when the parent list has a filter.
+          * Provides additional metadata to the component. Primary use is for a filter on the parent list.
          */
         "metadata"?: Record<string, unknown>;
         /**
-          * Emitted whenever the item is selected or unselected.
+          * Fires when the component is selected or unselected.
          */
-        "onCalciteListItemChange"?: (event: CustomEvent<{
+        "onCalciteListItemChange"?: (event: CalcitePickListItemCustomEvent<{
     item: HTMLCalcitePickListItemElement;
     value: any;
     selected: boolean;
     shiftPressed: boolean;
   }>) => void;
         /**
-          * Emitted whenever the remove button is pressed.
+          * Fires when 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.
+          * When true, displays a remove action that removes the item from the list.
          */
         "removable"?: boolean;
         /**
-          * Set this to true to pre-select an item. Toggles when an item is checked/unchecked.
+          * When true, selects an item. Toggles when an item is checked/unchecked.
          */
         "selected"?: boolean;
         /**
-          * The item's associated value.
+          * The component's value.
          */
         "value": any;
     }
     interface CalcitePopover {
         /**
-          * Display a close button within the Popover.
+          * When true and clicking outside of the component, automatically closes open `calcite-popover`s.
+         */
+        "autoClose"?: boolean;
+        /**
+          * When true, a close button is added to the component.
           * @deprecated use dismissible instead.
          */
         "closeButton"?: boolean;
         /**
-          * Prevents flipping the popover's placement when it starts to overlap its reference element.
+          * When true, prevents flipping the component's placement when overlapping its `referenceElement`.
          */
         "disableFlip"?: boolean;
         /**
-          * Removes the caret pointer.
+          * When true, removes the caret pointer.
          */
         "disablePointer"?: boolean;
         /**
-          * Display a close button within the Popover.
+          * When true, a close button is added to the component.
          */
         "dismissible"?: boolean;
         /**
@@ -6468,56 +6967,60 @@ declare namespace LocalJSX {
          */
         "flipPlacements"?: ComputedPlacement[];
         /**
-          * Heading text.
+          * The component header text.
          */
         "heading"?: string;
         /**
-          * Number at which section headings should start for this component.
+          * Specifies the number at which section headings should start.
          */
         "headingLevel"?: HeadingLevel;
         /**
-          * Text for close button.
+          * Accessible name for the component's close button.
           * @default "Close"
          */
         "intlClose"?: string;
         /**
-          * Accessible name for the component
+          * Accessible name for the component.
          */
         "label": string;
         /**
-          * Offset the position of the popover away from the reference element.
+          * Offsets the position of the popover away from the `referenceElement`.
           * @default 6
          */
         "offsetDistance"?: number;
         /**
-          * Offset the position of the popover along the reference element.
+          * Offsets the position of the popover along the `referenceElement`.
          */
         "offsetSkidding"?: number;
         /**
-          * Fired when the popover is closed
+          * Fired when the component is closed.
          */
-        "onCalcitePopoverClose"?: (event: CustomEvent<any>) => void;
+        "onCalcitePopoverClose"?: (event: CalcitePopoverCustomEvent<any>) => void;
         /**
-          * Fired when the popover is opened
+          * Fired when the component is opened.
          */
-        "onCalcitePopoverOpen"?: (event: CustomEvent<any>) => void;
+        "onCalcitePopoverOpen"?: (event: CalcitePopoverCustomEvent<any>) => void;
         /**
-          * Display and position the component.
+          * When true, displays and positions the component.
          */
         "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 element 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` used to position the component according to its "placement" value. Setting to an `HTMLElement` is preferred so the component does not need to query the DOM. However, a string `id` of the reference element can also be used.
+         */
+        "referenceElement": ReferenceElement | string;
+        /**
+          * When true, disables automatically toggling the component when its `referenceElement` has been triggered. This property can be set to "true" to manage when a popover is open.
          */
-        "referenceElement": HTMLElement | string;
+        "triggerDisabled"?: boolean;
     }
     interface CalcitePopoverManager {
         /**
@@ -6532,23 +7035,23 @@ declare namespace LocalJSX {
     }
     interface CalciteProgress {
         /**
-          * Label for the progress indicator
+          * Accessible name for the component.
          */
         "label"?: string;
         /**
-          * For indeterminate progress bars, reverse the animation direction
+          * When true and for indeterminate progress bars, reverses the animation direction.
          */
         "reversed"?: boolean;
         /**
-          * Text to display for the progress indicator
+          * Text that displays under the component's indicator.
          */
         "text"?: string;
         /**
-          * Use indeterminate if finding actual progress value is impossible
+          * Use indeterminate if finding actual progress value is impossible.
          */
         "type"?: "indeterminate" | "determinate";
         /**
-          * Fraction completed, in the range of 0 - 1.0
+          * The component's progress value, with a range of 0.0 - 1.0.
          */
         "value"?: number;
     }
@@ -6576,7 +7079,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.
          */
@@ -6610,7 +7113,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.
          */
@@ -6640,13 +7143,14 @@ 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
          */
         "scale"?: Scale;
         /**
           * The group's selected item.
+          * @readonly
          */
         "selectedItem"?: HTMLCalciteRadioGroupItemElement;
         /**
@@ -6710,7 +7214,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
          */
@@ -6755,7 +7259,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.
          */
@@ -6814,8 +7318,9 @@ declare namespace LocalJSX {
         "intlResize"?: string;
         /**
           * 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.
          */
@@ -6890,16 +7395,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
          */
@@ -6961,7 +7466,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 {
         /**
@@ -6991,11 +7496,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.
          */
@@ -7037,11 +7542,15 @@ declare namespace LocalJSX {
         /**
           * specify the layout of stepper, defaults to horizontal
          */
-        "layout"?: Layout;
+        "layout"?: Extract<"horizontal" | "vertical", Layout>;
         /**
           * optionally display the number next to the step title
          */
         "numbered"?: boolean;
+        /**
+          * This event fires when the active stepper item has changed.
+         */
+        "onCalciteStepperItemChange"?: (event: CalciteStepperCustomEvent<StepperItemChangeEventDetail>) => void;
         /**
           * specify the scale of stepper, defaults to m
          */
@@ -7056,6 +7565,10 @@ declare namespace LocalJSX {
           * has the step been completed
          */
         "complete"?: boolean;
+        /**
+          * stepper item description
+         */
+        "description"?: string;
         /**
           * is the step disabled and not navigable to by a user
          */
@@ -7064,12 +7577,18 @@ declare namespace LocalJSX {
           * does the step contain an error that needs to be resolved by the user
          */
         "error"?: boolean;
+        /**
+          * stepper item heading
+         */
+        "heading"?: string;
         /**
           * pass a title for the stepper item
+          * @deprecated use description instead
          */
         "itemSubtitle"?: string;
         /**
           * pass a title for the stepper item
+          * @deprecated use heading instead
          */
         "itemTitle"?: string;
     }
@@ -7093,7 +7612,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
          */
@@ -7123,7 +7642,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
          */
@@ -7155,10 +7674,10 @@ declare namespace LocalJSX {
          */
         "iconStart"?: string;
         /**
-          * Fires when a specific tab is activated (`event.details`)
+          * 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.
          */
@@ -7174,7 +7693,7 @@ declare namespace LocalJSX {
          */
         "layout"?: TabLayout;
         /**
-          * Display the tabs above (default) or below the tab content
+          * Display the tabs top (default) or bottom of the tab content. above and below are deprecated.
          */
         "position"?: TabPosition;
         /**
@@ -7256,7 +7775,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).
          */
@@ -7378,7 +7897,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`.
          */
@@ -7419,42 +7938,51 @@ declare namespace LocalJSX {
           * Alternate text for navigating to the previous tip.
          */
         "intlPrevious"?: string;
+        /**
+          * Emitted when the `calcite-tip-manager` has been closed.
+         */
+        "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 component when the `referenceElement` is clicked.
+         */
+        "closeOnClick"?: boolean;
+        /**
+          * Accessible name for the component.
          */
         "label": string;
         /**
-          * Offset the position of the tooltip away from the reference element.
+          * Offset the position of the component away from the `referenceElement`.
           * @default 6
          */
         "offsetDistance"?: number;
         /**
-          * Offset the position of the tooltip along the reference element.
+          * Offset the position of the component along the `referenceElement`.
          */
         "offsetSkidding"?: number;
         /**
-          * Display and position the component.
+          * When true, the component 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 the component according to its "placement" value. Setting to the `HTMLElement` is preferred so the component 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 {
         /**
@@ -7466,24 +7994,24 @@ declare namespace LocalJSX {
     interface CalciteTree {
         /**
           * Display input
-          * @deprecated use "ancestors" selection-mode for checkbox input
+          * @deprecated Use "ancestors" selection-mode for checkbox input.
          */
         "inputEnabled"?: boolean;
         /**
-          * Display indentation guide lines
+          * Displays indentation guide lines.
          */
         "lines"?: boolean;
         /**
-          * Emitted when user selects/deselects tree items. An object including an array of selected items will be passed in the event's `detail` property.
+          * Fires when the user selects/deselects `calcite-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, defaults to m
+          * Specifies the size of the component.
          */
         "scale"?: Scale;
         /**
-          * Customize how tree selection works (single, multi, children, multi-children, ancestors)
+          * Customize how the component's selection works.
           * @default "single"
           * @see [TreeSelectionMode](https://github.com/Esri/calcite-components/blob/master/src/components/tree/interfaces.ts#L5)
          */
@@ -7491,63 +8019,63 @@ declare namespace LocalJSX {
     }
     interface CalciteTreeItem {
         /**
-          * True if the item is in an expanded state
+          * When true, the component is expanded.
          */
         "expanded"?: boolean;
         /**
-          * Is the item currently selected
+          * When true, the component is selected.
          */
         "selected"?: boolean;
     }
     interface CalciteValueList {
         /**
-          * When true, disabled prevents interaction. This state shows items with lower opacity/grayed.
+          * When true, interaction is prevented and the component is displayed with lower opacity.
          */
         "disabled"?: boolean;
         /**
-          * When true, the items will be sortable via drag and drop.
+          * When true, `calcite-value-list-item`s are sortable via a draggable button.
          */
         "dragEnabled"?: boolean;
         /**
-          * When true, an input appears at the top of the list that can be used by end users to filter items in the list.
+          * When true, an input appears at the top of the component that can be used by end users to filter list items.
          */
         "filterEnabled"?: boolean;
         /**
-          * Placeholder text for the filter input field.
+          * Placeholder text for the filter's input field.
          */
         "filterPlaceholder"?: string;
         /**
-          * The list's group identifier.  To drag elements from one list into another, both lists must have the same group value.
+          * The component's group identifier.  To drag elements from one list into another, both lists must have the same group value.
          */
         "group"?: string;
         /**
-          * When true, content is waiting to be loaded. This state shows a busy indicator.
+          * When true, a busy indicator is displayed.
          */
         "loading"?: boolean;
         /**
-          * Multiple Works similar to standard radio buttons and checkboxes. When true, a user can select multiple items at a time. When false, only a single item can be selected at a time and selecting a new item will deselect any other selected items.
+          * Similar to standard radio buttons and checkboxes. When true, a user can select multiple `calcite-value-list-item`s at a time. When false, only a single `calcite-value-list-item` can be selected at a time, and a new selection will deselect previous selections.
          */
         "multiple"?: boolean;
         /**
-          * Emitted when any of the item selections have changed.
+          * Emits when any of the list item selections have changed.
          */
-        "onCalciteListChange"?: (event: CustomEvent<Map<string, HTMLCalciteValueListItemElement>>) => void;
+        "onCalciteListChange"?: (event: CalciteValueListCustomEvent<Map<string, HTMLCalciteValueListItemElement>>) => void;
         /**
-          * Emitted when the order of the list has changed.
+          * 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 will change when navigating items via the keyboard.
+          * When true and single-selection is enabled, the selection changes when navigating `calcite-value-list-item`s via keyboard.
          */
         "selectionFollowsFocus"?: boolean;
     }
     interface CalciteValueListItem {
         /**
-          * An optional description for this item. Will appear below the label text.
+          * A description for the component that displays below the label text.
          */
         "description"?: string;
         /**
-          * When true, the item cannot be clicked and is visually muted
+          * When true, interaction is prevented and the component is displayed with lower opacity.
          */
         "disabled"?: boolean;
         /**
@@ -7556,31 +8084,31 @@ declare namespace LocalJSX {
          */
         "icon"?: ICON_TYPES | null;
         /**
-          * The main label for this item. Appears next to the icon.
+          * Label and accessible name for the component. Appears next to the icon.
          */
         "label": string;
         /**
-          * Used to provide additional metadata to an item, primarily used when the parent list has a filter.
+          * Provides additional metadata to the component. Primary use is for a filter on the parent list.
          */
         "metadata"?: Record<string, unknown>;
         /**
-          * When true, prevents the content of the list item from user interaction.
+          * When true, prevents the content of the component from user interaction.
          */
         "nonInteractive"?: boolean;
         /**
-          * Emitted whenever the remove button is pressed.
+          * Fires when the remove button is pressed.
          */
-        "onCalciteListItemRemove"?: (event: CustomEvent<void>) => void;
+        "onCalciteListItemRemove"?: (event: CalciteValueListItemCustomEvent<void>) => void;
         /**
-          * Set this to true to display a remove action that removes the item from the list.
+          * When true, adds an action to remove the component.
          */
         "removable"?: boolean;
         /**
-          * Set this to true to pre-select an item. Toggles when an item is checked/unchecked.
+          * When true, the component is selected.
          */
         "selected"?: boolean;
         /**
-          * The item's associated value.
+          * The component's value.
          */
         "value": any;
     }