@esri/calcite-components 1.0.0-beta.85 → 1.0.0-beta.88

package/dist/types/components.d.ts

@@ -5,10 +5,11 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
-import { AccordionAppearance } from "./components/accordion/interfaces";
-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 { AccordionAppearance, RequestedItem } from "./components/accordion/interfaces";
+import { Alignment, Appearance, Columns, DeprecatedEventPayload, FlipContext, Layout, LogicalFlowPosition, Position, Scale, Status, Width } from "./components/interfaces";
+import { ItemKeyEvent, RegistryEntry, RequestedItem as RequestedItem1 } from "./components/accordion-item/interfaces";
+import { EffectivePlacement, LogicalPlacement, MenuPlacement, OverlayPositioning, ReferenceElement } from "./utils/floating-ui";
+import { AlertDuration, AlertPlacement, StatusColor, Sync } from "./components/alert/interfaces";
 import { HeadingLevel } from "./components/functional/Heading";
 import { BlockSectionToggleDisplay } from "./components/block-section/interfaces";
 import { ButtonAlignment, ButtonAppearance, ButtonColor, DropdownIconType } from "./components/button/interfaces";
@@ -19,7 +20,7 @@ import { ComboboxChildElement, ComboboxSelectionMode } from "./components/combob
 import { DateRangeChange } from "./components/date-picker/interfaces";
 import { DateLocaleData } from "./components/date-picker/utils";
 import { HoverRange } from "./utils/date";
-import { SelectionMode } from "./components/dropdown-group/interfaces";
+import { RequestedItem as RequestedItem2, SelectionMode } from "./components/dropdown-group/interfaces";
 import { ItemKeyboardEvent } from "./components/dropdown/interfaces";
 import { ColorStop, DataSeries } from "./components/graph/interfaces";
 import { InputPlacement } from "./components/input/interfaces";
@@ -169,6 +170,10 @@ export namespace Components {
           * Specifies the label of the expand icon when the component is collapsed.
          */
         "intlExpand"?: string;
+        /**
+          * The layout direction of the actions.
+         */
+        "layout": Extract<"horizontal" | "vertical", Layout>;
         /**
           * Overflows actions that won't fit into menus.
          */
@@ -225,7 +230,7 @@ export namespace Components {
         /**
           * Defines the available placements that can be used when a flip occurs.
          */
-        "flipPlacements"?: ComputedPlacement[];
+        "flipPlacements"?: EffectivePlacement[];
         /**
           * Specifies the text string for the component.
          */
@@ -240,9 +245,9 @@ export namespace Components {
         "overlayPositioning": OverlayPositioning;
         /**
           * 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)
+          * @see [LogicalPlacement](https://github.com/Esri/calcite-components/blob/master/src/utils/floating-ui.ts#L25)
          */
-        "placement": PopperPlacement;
+        "placement": LogicalPlacement;
         /**
           * Specifies the size of the component's trigger `calcite-action`.
          */
@@ -363,6 +368,7 @@ export namespace Components {
         "description": string;
         /**
           * When true, removes padding for the slotted content
+          * @deprecated Use `--calcite-block-padding` CSS variable instead.
          */
         "disablePadding": boolean;
         /**
@@ -614,6 +620,10 @@ export namespace Components {
           * specify the appearance style of the button, defaults to solid.
          */
         "appearance": Extract<"solid" | "clear", Appearance>;
+        /**
+          * When true, show abutton user can click to dismiss the chip.
+         */
+        "closable": boolean;
         /**
           * When true, hides the chip
          */
@@ -629,6 +639,7 @@ export namespace Components {
         "dismissLabel"?: string;
         /**
           * Optionally show a button the user can click to dismiss the chip
+          * @deprecated use closable instead
          */
         "dismissible": boolean;
         /**
@@ -868,7 +879,7 @@ export namespace Components {
         /**
           * Defines the available placements that can be used when a flip occurs.
          */
-        "flipPlacements"?: ComputedPlacement[];
+        "flipPlacements"?: EffectivePlacement[];
         /**
           * string to override the English "Remove tag" text for when an item is selected.
           * @default "Remove tag"
@@ -1225,7 +1236,7 @@ export namespace Components {
         /**
           * Defines the available placements that can be used when a flip occurs.
          */
-        "flipPlacements"?: ComputedPlacement[];
+        "flipPlacements"?: EffectivePlacement[];
         /**
           * 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
          */
@@ -1240,7 +1251,7 @@ export namespace Components {
         "overlayPositioning": OverlayPositioning;
         /**
           * Determines where the dropdown will be positioned relative to the button.
-          * @default "bottom-leading"
+          * @default "bottom-start"
          */
         "placement": MenuPlacement;
         /**
@@ -1673,6 +1684,7 @@ export namespace Components {
     interface CalciteInputDatePicker {
         /**
           * Expand or collapse when calendar does not have input
+          * @deprecated use open instead
          */
         "active": boolean;
         /**
@@ -1692,7 +1704,7 @@ export namespace Components {
         /**
           * Defines the available placements that can be used when a flip occurs.
          */
-        "flipPlacements"?: ComputedPlacement[];
+        "flipPlacements"?: EffectivePlacement[];
         /**
           * Number at which section headings should start for this component.
          */
@@ -1740,13 +1752,17 @@ export namespace Components {
           * The picker's name. Gets submitted with the form.
          */
         "name": string;
+        /**
+          * Expand or collapse when calendar does not have input
+         */
+        "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.
          */
         "overlayPositioning": OverlayPositioning;
         /**
           * Determines where the date-picker component will be positioned relative to the input.
-          * @default "bottom-leading"
+          * @default "bottom-start"
          */
         "placement": MenuPlacement;
         /**
@@ -2031,9 +2047,9 @@ export namespace Components {
         "name": string;
         /**
           * 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)
+          * @see [LogicalPlacement](https://github.com/Esri/calcite-components/blob/master/src/utils/floating-ui.ts#L25)
          */
-        "placement": PopperPlacement;
+        "placement": LogicalPlacement;
         /**
           * When true, still focusable but controls are gone and the value cannot be modified.
           * @mdn [readOnly](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly)
@@ -2196,6 +2212,7 @@ export namespace Components {
         "label": string;
         /**
           * Disables spacing around the component.
+          * @deprecated Use `--calcite-loader-padding` CSS variable instead.
          */
         "noPadding": boolean;
         /**
@@ -2265,6 +2282,7 @@ export namespace Components {
         "intlClose": string;
         /**
           * When true, disables spacing to the content area slot.
+          * @deprecated Use `--calcite-modal-padding` CSS variable instead.
          */
         "noPadding": boolean;
         /**
@@ -2294,18 +2312,24 @@ export namespace Components {
     interface CalciteNotice {
         /**
           * When true, the component is active.
+          * @deprecated Use open instead.
          */
         "active": boolean;
+        /**
+          * When true, displays a button user can click to dismiss the `calcite-notice`
+         */
+        "closable"?: boolean;
         /**
           * The color for the component's top border and icon.
          */
         "color": StatusColor;
         /**
           * When true, a close button is added to the component.
+          * @deprecated use closable instead
          */
         "dismissible"?: boolean;
         /**
-          * Specifies an icon to display - accepts Calcite UI icon names.
+          * When present, shows a default recommended icon. You can also pass a calcite-ui-icon name to display a requested icon.
          */
         "icon": string | boolean;
         /**
@@ -2313,6 +2337,10 @@ export namespace Components {
           * @default "Close"
          */
         "intlClose": string;
+        /**
+          * When true, the component is visible
+         */
+        "open": boolean;
         /**
           * Specifies the size of the component.
          */
@@ -2395,6 +2423,14 @@ export namespace Components {
           * When provided, this method will be called before it is removed from the parent flow.
          */
         "beforeBack"?: () => Promise<void>;
+        /**
+          * When true, displays a close button in the trailing side of the header
+         */
+        "closable": boolean;
+        /**
+          * When true, panel will be hidden
+         */
+        "closed": boolean;
         /**
           * A description for the component.
          */
@@ -2405,10 +2441,12 @@ export namespace Components {
         "disabled": boolean;
         /**
           * When true, hides the component.
+          * @deprecated use closed instead
          */
         "dismissed": boolean;
         /**
           * When true, a close button is added to the component.
+          * @deprecated use closable instead
          */
         "dismissible": boolean;
         /**
@@ -2575,6 +2613,10 @@ export namespace Components {
           * When true and clicking outside of the component, automatically closes open `calcite-popover`s.
          */
         "autoClose": boolean;
+        /**
+          * When true, display a close button within the Popover
+         */
+        "closable": boolean;
         /**
           * When true, a close button is added to the component.
           * @deprecated use dismissible instead.
@@ -2590,12 +2632,13 @@ export namespace Components {
         "disablePointer": boolean;
         /**
           * When true, a close button is added to the component.
+          * @deprecated use closable instead
          */
         "dismissible": boolean;
         /**
           * Defines the available placements that can be used when a flip occurs.
          */
-        "flipPlacements"?: ComputedPlacement[];
+        "flipPlacements"?: EffectivePlacement[];
         /**
           * The component header text.
          */
@@ -2632,9 +2675,9 @@ export namespace Components {
         "overlayPositioning": OverlayPositioning;
         /**
           * 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)
+          * @see [LogicalPlacement](https://github.com/Esri/calcite-components/blob/master/src/utils/floating-ui.ts#L25)
          */
-        "placement": PopperPlacement;
+        "placement": LogicalPlacement;
         /**
           * 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.
          */
@@ -3199,7 +3242,6 @@ export namespace Components {
           * set the previous step as active
          */
         "prevStep": () => Promise<void>;
-        "requestedContent": Node[];
         /**
           * specify the scale of stepper, defaults to m
          */
@@ -3248,6 +3290,7 @@ export namespace Components {
         "layout"?: Extract<"horizontal" | "vertical", Layout>;
         "numbered": boolean;
         "scale": Scale;
+        "setFocus": () => Promise<void>;
     }
     interface CalciteSwitch {
         /**
@@ -3661,9 +3704,9 @@ export namespace Components {
         "overlayPositioning": OverlayPositioning;
         /**
           * 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)
+          * @see [LogicalPlacement](https://github.com/Esri/calcite-components/blob/master/src/utils/floating-ui.ts#L25)
          */
-        "placement": PopperPlacement;
+        "placement": LogicalPlacement;
         /**
           * 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.
          */
@@ -4836,7 +4879,7 @@ declare namespace LocalJSX {
           * Emits when the component has been clicked.
           * @deprecated use onClick instead.
          */
-        "onCalciteActionClick"?: (event: CalciteActionCustomEvent<any>) => void;
+        "onCalciteActionClick"?: (event: CalciteActionCustomEvent<void>) => void;
         /**
           * Specifies the size of the component.
          */
@@ -4867,10 +4910,14 @@ declare namespace LocalJSX {
           * Specifies the label of the expand icon when the component is collapsed.
          */
         "intlExpand"?: string;
+        /**
+          * The layout direction of the actions.
+         */
+        "layout"?: Extract<"horizontal" | "vertical", Layout>;
         /**
           * Emits when the `expanded` property is toggled.
          */
-        "onCalciteActionBarToggle"?: (event: CalciteActionBarCustomEvent<any>) => void;
+        "onCalciteActionBarToggle"?: (event: CalciteActionBarCustomEvent<void>) => void;
         /**
           * Disables automatically overflowing `calcite-action`s that won't fit into menus.
          */
@@ -4918,15 +4965,15 @@ declare namespace LocalJSX {
         /**
           * Defines the available placements that can be used when a flip occurs.
          */
-        "flipPlacements"?: ComputedPlacement[];
+        "flipPlacements"?: EffectivePlacement[];
         /**
           * Specifies the text string for the component.
          */
         "label": string;
         /**
-          * Emits when the `open` property has changed.
+          * Emits when the `open` property has changed.  **Note:**: The event payload is deprecated, please use the `open` property on the component instead
          */
-        "onCalciteActionMenuOpenChange"?: (event: CalciteActionMenuCustomEvent<any>) => void;
+        "onCalciteActionMenuOpenChange"?: (event: CalciteActionMenuCustomEvent<DeprecatedEventPayload>) => void;
         /**
           * When true, the component is open.
          */
@@ -4937,9 +4984,9 @@ declare namespace LocalJSX {
         "overlayPositioning"?: OverlayPositioning;
         /**
           * 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)
+          * @see [LogicalPlacement](https://github.com/Esri/calcite-components/blob/master/src/utils/floating-ui.ts#L25)
          */
-        "placement"?: PopperPlacement;
+        "placement"?: LogicalPlacement;
         /**
           * Specifies the size of the component's trigger `calcite-action`.
          */
@@ -4969,7 +5016,7 @@ declare namespace LocalJSX {
         /**
           * Emits when the `expanded` property is toggled.
          */
-        "onCalciteActionPadToggle"?: (event: CalciteActionPadCustomEvent<any>) => void;
+        "onCalciteActionPadToggle"?: (event: CalciteActionPadCustomEvent<void>) => void;
         /**
           * Arranges the component depending on the element's `dir` property.
          */
@@ -5009,22 +5056,22 @@ declare namespace LocalJSX {
           * 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;
+        /**
+          * Fires when the component is requested to be closed and before the closing transition begins.
+         */
+        "onCalciteAlertBeforeClose"?: (event: CalciteAlertCustomEvent<void>) => void;
+        /**
+          * Fires when the component is added to the DOM but not rendered, and before the opening transition begins.
+         */
+        "onCalciteAlertBeforeOpen"?: (event: CalciteAlertCustomEvent<void>) => void;
+        /**
+          * Fires when the component is closed and animation is complete.
+         */
+        "onCalciteAlertClose"?: (event: CalciteAlertCustomEvent<void>) => void;
+        /**
+          * Fires when the component is open and animation is complete.
+         */
+        "onCalciteAlertOpen"?: (event: CalciteAlertCustomEvent<void>) => void;
         /**
           * Specifies the placement of the component
          */
@@ -5067,6 +5114,7 @@ declare namespace LocalJSX {
         "description"?: string;
         /**
           * When true, removes padding for the slotted content
+          * @deprecated Use `--calcite-block-padding` CSS variable instead.
          */
         "disablePadding"?: boolean;
         /**
@@ -5112,7 +5160,7 @@ declare namespace LocalJSX {
         /**
           * Emitted when the header has been clicked.
          */
-        "onCalciteBlockToggle"?: (event: CalciteBlockCustomEvent<any>) => void;
+        "onCalciteBlockToggle"?: (event: CalciteBlockCustomEvent<void>) => void;
         /**
           * When true, the block's content will be displayed.
          */
@@ -5139,7 +5187,7 @@ declare namespace LocalJSX {
         /**
           * Emitted when the header has been clicked.
          */
-        "onCalciteBlockSectionToggle"?: (event: CalciteBlockSectionCustomEvent<any>) => void;
+        "onCalciteBlockSectionToggle"?: (event: CalciteBlockSectionCustomEvent<void>) => void;
         /**
           * When true, the block's section content will be displayed.
          */
@@ -5264,7 +5312,7 @@ declare namespace LocalJSX {
         /**
           * Fired when a selectable card is selected
          */
-        "onCalciteCardSelect"?: (event: CalciteCardCustomEvent<any>) => void;
+        "onCalciteCardSelect"?: (event: CalciteCardCustomEvent<void>) => void;
         /**
           * Indicates whether the card is selectable.
          */
@@ -5299,7 +5347,7 @@ declare namespace LocalJSX {
         /**
           * Emitted when the checkbox checked status changes
          */
-        "onCalciteCheckboxChange"?: (event: CalciteCheckboxCustomEvent<any>) => void;
+        "onCalciteCheckboxChange"?: (event: CalciteCheckboxCustomEvent<void>) => void;
         /**
           * specify the scale of the checkbox, defaults to m
          */
@@ -5314,6 +5362,10 @@ declare namespace LocalJSX {
           * specify the appearance style of the button, defaults to solid.
          */
         "appearance"?: Extract<"solid" | "clear", Appearance>;
+        /**
+          * When true, show abutton user can click to dismiss the chip.
+         */
+        "closable"?: boolean;
         /**
           * When true, hides the chip
          */
@@ -5329,6 +5381,7 @@ declare namespace LocalJSX {
         "dismissLabel"?: string;
         /**
           * Optionally show a button the user can click to dismiss the chip
+          * @deprecated use closable instead
          */
         "dismissible"?: boolean;
         /**
@@ -5340,9 +5393,9 @@ declare namespace LocalJSX {
          */
         "iconFlipRtl"?: boolean;
         /**
-          * Emitted when the dismiss button is clicked
+          * Emitted when the dismiss button is clicked  **Note:**: The `el` event payload props is deprecated, please use the event's target/currentTarget instead
          */
-        "onCalciteChipDismiss"?: (event: CalciteChipCustomEvent<any>) => void;
+        "onCalciteChipDismiss"?: (event: CalciteChipCustomEvent<DeprecatedEventPayload>) => void;
         /**
           * specify the scale of the chip, defaults to m
          */
@@ -5484,11 +5537,11 @@ declare namespace LocalJSX {
         /**
           * Fires when the color value has changed.
          */
-        "onCalciteColorPickerChange"?: (event: CalciteColorPickerCustomEvent<any>) => void;
+        "onCalciteColorPickerChange"?: (event: CalciteColorPickerCustomEvent<void>) => 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: CalciteColorPickerCustomEvent<any>) => void;
+        "onCalciteColorPickerInput"?: (event: CalciteColorPickerCustomEvent<void>) => void;
         /**
           * The scale of the color picker.
          */
@@ -5526,7 +5579,7 @@ declare namespace LocalJSX {
         /**
           * Emitted when the hex value changes.
          */
-        "onCalciteColorPickerHexInputChange"?: (event: CalciteColorPickerHexInputCustomEvent<any>) => void;
+        "onCalciteColorPickerHexInputChange"?: (event: CalciteColorPickerHexInputCustomEvent<void>) => void;
         /**
           * The component's scale.
          */
@@ -5568,7 +5621,7 @@ declare namespace LocalJSX {
         /**
           * Defines the available placements that can be used when a flip occurs.
          */
-        "flipPlacements"?: ComputedPlacement[];
+        "flipPlacements"?: EffectivePlacement[];
         /**
           * string to override the English "Remove tag" text for when an item is selected.
           * @default "Remove tag"
@@ -5586,17 +5639,26 @@ declare namespace LocalJSX {
           * The name of the switch input
          */
         "name"?: string;
-        "onCalciteComboboxBeforeClose"?: (event: CalciteComboboxCustomEvent<{ el: HTMLCalciteComboboxElement }>) => void;
-        "onCalciteComboboxBeforeOpen"?: (event: CalciteComboboxCustomEvent<{ el: HTMLCalciteComboboxElement }>) => void;
+        /**
+          * Fires when the component is requested to be closed and before the closing transition begins.
+         */
+        "onCalciteComboboxBeforeClose"?: (event: CalciteComboboxCustomEvent<void>) => void;
+        /**
+          * Fires when the component is added to the DOM but not rendered, and before the opening transition begins.
+         */
+        "onCalciteComboboxBeforeOpen"?: (event: CalciteComboboxCustomEvent<void>) => void;
         /**
           * Called when the selected item(s) changes.
          */
         "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  **Note:**: The event payload is deprecated, please use the `value` property on the component to determine removed value instead
          */
-        "onCalciteComboboxChipDismiss"?: (event: CalciteComboboxCustomEvent<any>) => void;
-        "onCalciteComboboxClose"?: (event: CalciteComboboxCustomEvent<{ el: HTMLCalciteComboboxElement }>) => void;
+        "onCalciteComboboxChipDismiss"?: (event: CalciteComboboxCustomEvent<DeprecatedEventPayload>) => void;
+        /**
+          * Fires when the component is closed and animation is complete.
+         */
+        "onCalciteComboboxClose"?: (event: CalciteComboboxCustomEvent<void>) => void;
         /**
           * Called when the user has entered text to filter the options list
          */
@@ -5604,7 +5666,10 @@ declare namespace LocalJSX {
     visibleItems: HTMLCalciteComboboxItemElement[];
     text: string;
   }>) => void;
-        "onCalciteComboboxOpen"?: (event: CalciteComboboxCustomEvent<{ el: HTMLCalciteComboboxElement }>) => void;
+        /**
+          * Fires when the component is open and animation is complete.
+         */
+        "onCalciteComboboxOpen"?: (event: CalciteComboboxCustomEvent<void>) => void;
         /**
           * Called when the selected items set changes
           * @deprecated use calciteComboboxChange instead
@@ -5670,9 +5735,9 @@ declare namespace LocalJSX {
          */
         "icon"?: string;
         /**
-          * Emitted whenever the item is selected or unselected.
+          * Emitted whenever the item is selected or unselected.  **Note:**: The event's payload is deprecated, please use the event's target/currentTarget instead
          */
-        "onCalciteComboboxItemChange"?: (event: CalciteComboboxItemCustomEvent<any>) => void;
+        "onCalciteComboboxItemChange"?: (event: CalciteComboboxItemCustomEvent<DeprecatedEventPayload>) => void;
         /**
           * Set this to true to pre-select an item. Toggles when an item is checked/unchecked.
          */
@@ -5822,7 +5887,7 @@ declare namespace LocalJSX {
         /**
           * Emitted when user selects day
          */
-        "onCalciteDaySelect"?: (event: CalciteDatePickerDayCustomEvent<any>) => void;
+        "onCalciteDaySelect"?: (event: CalciteDatePickerDayCustomEvent<void>) => void;
         /**
           * Showing date range
          */
@@ -5872,11 +5937,11 @@ declare namespace LocalJSX {
         /**
           * Active date for the user keyboard access.
          */
-        "onCalciteDatePickerActiveDateChange"?: (event: CalciteDatePickerMonthCustomEvent<any>) => void;
+        "onCalciteDatePickerActiveDateChange"?: (event: CalciteDatePickerMonthCustomEvent<Date>) => void;
         /**
           * Event emitted when user selects the date.
          */
-        "onCalciteDatePickerSelect"?: (event: CalciteDatePickerMonthCustomEvent<any>) => void;
+        "onCalciteDatePickerSelect"?: (event: CalciteDatePickerMonthCustomEvent<Date>) => void;
         /**
           * specify the scale of the date picker
          */
@@ -5957,15 +6022,27 @@ declare namespace LocalJSX {
         /**
           * Defines the available placements that can be used when a flip occurs.
          */
-        "flipPlacements"?: ComputedPlacement[];
+        "flipPlacements"?: EffectivePlacement[];
         /**
           * 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 the component is requested to be closed and before the closing transition begins.
+         */
+        "onCalciteDropdownBeforeClose"?: (event: CalciteDropdownCustomEvent<void>) => void;
+        /**
+          * Fires when the component is added to the DOM but not rendered, and before the opening transition begins.
+         */
+        "onCalciteDropdownBeforeOpen"?: (event: CalciteDropdownCustomEvent<void>) => void;
+        /**
+          * Fires when the component is closed and animation is complete.
+         */
+        "onCalciteDropdownClose"?: (event: CalciteDropdownCustomEvent<void>) => void;
+        /**
+          * Fires when the component is open and animation is complete.
+         */
+        "onCalciteDropdownOpen"?: (event: CalciteDropdownCustomEvent<void>) => void;
         /**
           * fires when a dropdown item has been selected or deselected
          */
@@ -5980,7 +6057,7 @@ declare namespace LocalJSX {
         "overlayPositioning"?: OverlayPositioning;
         /**
           * Determines where the dropdown will be positioned relative to the button.
-          * @default "bottom-leading"
+          * @default "bottom-start"
          */
         "placement"?: MenuPlacement;
         /**
@@ -6157,9 +6234,9 @@ declare namespace LocalJSX {
     }
     interface CalciteHandle {
         /**
-          * Emitted when the the handle is activated and the up or down arrow key is pressed.
+          * Emitted when the the handle is activated and the up or down arrow key is pressed.  **Note:**: The `handle` event payload prop is deprecated, please use the event's target/currentTarget instead
          */
-        "onCalciteHandleNudge"?: (event: CalciteHandleCustomEvent<any>) => void;
+        "onCalciteHandleNudge"?: (event: CalciteHandleCustomEvent<DeprecatedEventPayload>) => void;
         /**
           * Value for the button title attribute
          */
@@ -6333,9 +6410,9 @@ declare namespace LocalJSX {
          */
         "onCalciteInputChange"?: (event: CalciteInputCustomEvent<void>) => void;
         /**
-          * Fires each time a new value is typed.
+          * Fires each time a new value is typed.  **Note:**: The `el` and `value` event payload props are deprecated, please use the event's target/currentTarget instead
          */
-        "onCalciteInputInput"?: (event: CalciteInputCustomEvent<any>) => void;
+        "onCalciteInputInput"?: (event: CalciteInputCustomEvent<DeprecatedEventPayload>) => void;
         /**
           * Specifies placeholder text for the component.
           * @mdn [placeholder](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#placeholder)
@@ -6398,6 +6475,7 @@ declare namespace LocalJSX {
     interface CalciteInputDatePicker {
         /**
           * Expand or collapse when calendar does not have input
+          * @deprecated use open instead
          */
         "active"?: boolean;
         /**
@@ -6417,7 +6495,7 @@ declare namespace LocalJSX {
         /**
           * Defines the available placements that can be used when a flip occurs.
          */
-        "flipPlacements"?: ComputedPlacement[];
+        "flipPlacements"?: EffectivePlacement[];
         /**
           * Number at which section headings should start for this component.
          */
@@ -6476,17 +6554,37 @@ declare namespace LocalJSX {
           * @deprecated use `calciteInputDatePickerChange` instead.
          */
         "onCalciteDatePickerRangeChange"?: (event: CalciteInputDatePickerCustomEvent<DateRangeChange>) => void;
+        /**
+          * Fires when the component is requested to be closed and before the closing transition begins.
+         */
+        "onCalciteInputDatePickerBeforeClose"?: (event: CalciteInputDatePickerCustomEvent<void>) => void;
+        /**
+          * Fires when the component is added to the DOM but not rendered, and before the opening transition begins.
+         */
+        "onCalciteInputDatePickerBeforeOpen"?: (event: CalciteInputDatePickerCustomEvent<void>) => void;
         /**
           * This event fires when the input date picker value changes.
          */
         "onCalciteInputDatePickerChange"?: (event: CalciteInputDatePickerCustomEvent<void>) => void;
+        /**
+          * Fires when the component is closed and animation is complete.
+         */
+        "onCalciteInputDatePickerClose"?: (event: CalciteInputDatePickerCustomEvent<void>) => void;
+        /**
+          * Fires when the component is open and animation is complete.
+         */
+        "onCalciteInputDatePickerOpen"?: (event: CalciteInputDatePickerCustomEvent<void>) => void;
+        /**
+          * Expand or collapse when calendar does not have input
+         */
+        "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.
          */
         "overlayPositioning"?: OverlayPositioning;
         /**
           * Determines where the date-picker component will be positioned relative to the input.
-          * @default "bottom-leading"
+          * @default "bottom-start"
          */
         "placement"?: MenuPlacement;
         /**
@@ -6644,9 +6742,9 @@ declare namespace LocalJSX {
          */
         "onCalciteInputNumberChange"?: (event: CalciteInputNumberCustomEvent<void>) => void;
         /**
-          * Fires each time a new value is typed.
+          * Fires each time a new value is typed.  **Note:**: The `el` and `value` event payload props are deprecated, please use the event's target/currentTarget instead
          */
-        "onCalciteInputNumberInput"?: (event: CalciteInputNumberCustomEvent<any>) => void;
+        "onCalciteInputNumberInput"?: (event: CalciteInputNumberCustomEvent<DeprecatedEventPayload>) => void;
         /**
           * Specifies placeholder text for the component.
           * @mdn [placeholder](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#placeholder)
@@ -6754,9 +6852,9 @@ declare namespace LocalJSX {
         "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)
+          * @see [LogicalPlacement](https://github.com/Esri/calcite-components/blob/master/src/utils/floating-ui.ts#L25)
          */
-        "placement"?: PopperPlacement;
+        "placement"?: LogicalPlacement;
         /**
           * When true, still focusable but controls are gone and the value cannot be modified.
           * @mdn [readOnly](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly)
@@ -6895,6 +6993,7 @@ declare namespace LocalJSX {
         "label": string;
         /**
           * Disables spacing around the component.
+          * @deprecated Use `--calcite-loader-padding` CSS variable instead.
          */
         "noPadding"?: boolean;
         /**
@@ -6958,16 +7057,25 @@ declare namespace LocalJSX {
         "intlClose"?: string;
         /**
           * When true, disables spacing to the content area slot.
+          * @deprecated Use `--calcite-modal-padding` CSS variable instead.
          */
         "noPadding"?: boolean;
         /**
-          * Emits when the component finishes the close animation.
+          * Fires when the component is requested to be closed and before the closing transition begins.
+         */
+        "onCalciteModalBeforeClose"?: (event: CalciteModalCustomEvent<void>) => void;
+        /**
+          * Fires when the component is added to the DOM but not rendered, and before the opening transition begins.
          */
-        "onCalciteModalClose"?: (event: CalciteModalCustomEvent<any>) => void;
+        "onCalciteModalBeforeOpen"?: (event: CalciteModalCustomEvent<void>) => void;
         /**
-          * Emits when the component finishes the open animation.
+          * Fires when the component is closed and animation is complete.
          */
-        "onCalciteModalOpen"?: (event: CalciteModalCustomEvent<any>) => void;
+        "onCalciteModalClose"?: (event: CalciteModalCustomEvent<void>) => void;
+        /**
+          * Fires when the component is open and animation is complete.
+         */
+        "onCalciteModalOpen"?: (event: CalciteModalCustomEvent<void>) => void;
         /**
           * When true,`calcite-modal`  opens
          */
@@ -6984,18 +7092,24 @@ declare namespace LocalJSX {
     interface CalciteNotice {
         /**
           * When true, the component is active.
+          * @deprecated Use open instead.
          */
         "active"?: boolean;
+        /**
+          * When true, displays a button user can click to dismiss the `calcite-notice`
+         */
+        "closable"?: boolean;
         /**
           * The color for the component's top border and icon.
          */
         "color"?: StatusColor;
         /**
           * When true, a close button is added to the component.
+          * @deprecated use closable instead
          */
         "dismissible"?: boolean;
         /**
-          * Specifies an icon to display - accepts Calcite UI icon names.
+          * When present, shows a default recommended icon. You can also pass a calcite-ui-icon name to display a requested icon.
          */
         "icon"?: string | boolean;
         /**
@@ -7006,11 +7120,15 @@ declare namespace LocalJSX {
         /**
           * Fired when the component is closed.
          */
-        "onCalciteNoticeClose"?: (event: CalciteNoticeCustomEvent<any>) => void;
+        "onCalciteNoticeClose"?: (event: CalciteNoticeCustomEvent<void>) => void;
         /**
           * Fired when the component is opened.
          */
-        "onCalciteNoticeOpen"?: (event: CalciteNoticeCustomEvent<any>) => void;
+        "onCalciteNoticeOpen"?: (event: CalciteNoticeCustomEvent<void>) => void;
+        /**
+          * When true, the component is visible
+         */
+        "open"?: boolean;
         /**
           * Specifies the size of the component.
          */
@@ -7091,6 +7209,14 @@ declare namespace LocalJSX {
           * When provided, this method will be called before it is removed from the parent flow.
          */
         "beforeBack"?: () => Promise<void>;
+        /**
+          * When true, displays a close button in the trailing side of the header
+         */
+        "closable"?: boolean;
+        /**
+          * When true, panel will be hidden
+         */
+        "closed"?: boolean;
         /**
           * A description for the component.
          */
@@ -7101,10 +7227,12 @@ declare namespace LocalJSX {
         "disabled"?: boolean;
         /**
           * When true, hides the component.
+          * @deprecated use closed instead
          */
         "dismissed"?: boolean;
         /**
           * When true, a close button is added to the component.
+          * @deprecated use closable instead
          */
         "dismissible"?: boolean;
         /**
@@ -7142,20 +7270,20 @@ declare namespace LocalJSX {
         /**
           * Fires when the back button is clicked.
          */
-        "onCalcitePanelBackClick"?: (event: CalcitePanelCustomEvent<any>) => void;
+        "onCalcitePanelBackClick"?: (event: CalcitePanelCustomEvent<void>) => void;
         /**
           * Fires when the close button is clicked.
          */
-        "onCalcitePanelDismiss"?: (event: CalcitePanelCustomEvent<any>) => void;
+        "onCalcitePanelDismiss"?: (event: CalcitePanelCustomEvent<void>) => void;
         /**
-          * Fires when the close button is clicked.
+          * Fires when there is a change to the `dismissed` property value .
           * @deprecated use calcitePanelDismiss instead.
          */
-        "onCalcitePanelDismissedChange"?: (event: CalcitePanelCustomEvent<any>) => void;
+        "onCalcitePanelDismissedChange"?: (event: CalcitePanelCustomEvent<void>) => void;
         /**
           * Fires when the content is scrolled.
          */
-        "onCalcitePanelScroll"?: (event: CalcitePanelCustomEvent<any>) => void;
+        "onCalcitePanelScroll"?: (event: CalcitePanelCustomEvent<void>) => void;
         /**
           * When true, displays a back button in the header.
          */
@@ -7240,7 +7368,7 @@ declare namespace LocalJSX {
         /**
           * Label and accessible name for the component. Appears next to the icon.
          */
-        "label"?: string;
+        "label": string;
         /**
           * Provides additional metadata to the component. Primary use is for a filter on the parent list.
          */
@@ -7276,6 +7404,10 @@ declare namespace LocalJSX {
           * When true and clicking outside of the component, automatically closes open `calcite-popover`s.
          */
         "autoClose"?: boolean;
+        /**
+          * When true, display a close button within the Popover
+         */
+        "closable"?: boolean;
         /**
           * When true, a close button is added to the component.
           * @deprecated use dismissible instead.
@@ -7291,12 +7423,13 @@ declare namespace LocalJSX {
         "disablePointer"?: boolean;
         /**
           * When true, a close button is added to the component.
+          * @deprecated use closable instead
          */
         "dismissible"?: boolean;
         /**
           * Defines the available placements that can be used when a flip occurs.
          */
-        "flipPlacements"?: ComputedPlacement[];
+        "flipPlacements"?: EffectivePlacement[];
         /**
           * The component header text.
          */
@@ -7324,13 +7457,21 @@ declare namespace LocalJSX {
          */
         "offsetSkidding"?: number;
         /**
-          * Fired when the component is closed.
+          * Fires when the component is requested to be closed and before the closing transition begins.
          */
-        "onCalcitePopoverClose"?: (event: CalcitePopoverCustomEvent<any>) => void;
+        "onCalcitePopoverBeforeClose"?: (event: CalcitePopoverCustomEvent<void>) => void;
         /**
-          * Fired when the component is opened.
+          * Fires when the component is added to the DOM but not rendered, and before the opening transition begins.
+         */
+        "onCalcitePopoverBeforeOpen"?: (event: CalcitePopoverCustomEvent<void>) => void;
+        /**
+          * Fires when the component is closed and animation is complete.
+         */
+        "onCalcitePopoverClose"?: (event: CalcitePopoverCustomEvent<void>) => void;
+        /**
+          * Fires when the component is open and animation is complete.
          */
-        "onCalcitePopoverOpen"?: (event: CalcitePopoverCustomEvent<any>) => void;
+        "onCalcitePopoverOpen"?: (event: CalcitePopoverCustomEvent<void>) => void;
         /**
           * When true, displays and positions the component.
          */
@@ -7341,9 +7482,9 @@ declare namespace LocalJSX {
         "overlayPositioning"?: OverlayPositioning;
         /**
           * 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)
+          * @see [LogicalPlacement](https://github.com/Esri/calcite-components/blob/master/src/utils/floating-ui.ts#L25)
          */
-        "placement"?: PopperPlacement;
+        "placement"?: LogicalPlacement;
         /**
           * 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.
          */
@@ -7410,7 +7551,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: CalciteRadioButtonCustomEvent<any>) => void;
+        "onCalciteRadioButtonChange"?: (event: CalciteRadioButtonCustomEvent<void>) => void;
         /**
           * Requires that a value is selected for the radio button group before the parent form will submit.
          */
@@ -7444,7 +7585,7 @@ declare namespace LocalJSX {
         /**
           * Emitted when the radio button group has changed.
          */
-        "onCalciteRadioButtonGroupChange"?: (event: CalciteRadioButtonGroupCustomEvent<any>) => void;
+        "onCalciteRadioButtonGroupChange"?: (event: CalciteRadioButtonGroupCustomEvent<void>) => void;
         /**
           * Requires that a value is selected for the radio button group before the parent form will submit.
          */
@@ -7651,7 +7792,7 @@ declare namespace LocalJSX {
           * Emitted when collapse has been toggled.
           * @deprecated use a resizeObserver on the shell-panel to listen for changes to its size.
          */
-        "onCalciteShellPanelToggle"?: (event: CalciteShellPanelCustomEvent<any>) => void;
+        "onCalciteShellPanelToggle"?: (event: CalciteShellPanelCustomEvent<void>) => void;
         /**
           * Arranges the component depending on the elements 'dir' property.
          */
@@ -7726,16 +7867,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: CalciteSliderCustomEvent<any>) => void;
+        "onCalciteSliderChange"?: (event: CalciteSliderCustomEvent<void>) => 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: CalciteSliderCustomEvent<any>) => void;
+        "onCalciteSliderInput"?: (event: CalciteSliderCustomEvent<void>) => 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: CalciteSliderCustomEvent<any>) => void;
+        "onCalciteSliderUpdate"?: (event: CalciteSliderCustomEvent<void>) => void;
         /**
           * Interval to move on page up/page down keys
          */
@@ -7797,7 +7938,7 @@ declare namespace LocalJSX {
         /**
           * Emitted when the order of the list has changed.
          */
-        "onCalciteListOrderChange"?: (event: CalciteSortableListCustomEvent<any>) => void;
+        "onCalciteListOrderChange"?: (event: CalciteSortableListCustomEvent<void>) => void;
     }
     interface CalciteSplitButton {
         /**
@@ -7825,13 +7966,13 @@ declare namespace LocalJSX {
          */
         "loading"?: boolean;
         /**
-          * fired when the primary button is clicked
+          * fired when the primary button is clicked  **Note:** The event payload is deprecated, please use separate mouse event listeners to get info about click.
          */
-        "onCalciteSplitButtonPrimaryClick"?: (event: CalciteSplitButtonCustomEvent<any>) => void;
+        "onCalciteSplitButtonPrimaryClick"?: (event: CalciteSplitButtonCustomEvent<DeprecatedEventPayload>) => void;
         /**
-          * fired when the secondary button is clicked
+          * fired when the secondary button is clicked  **Note:** The event payload is deprecated, please use separate mouse event listeners to get info about click.
          */
-        "onCalciteSplitButtonSecondaryClick"?: (event: CalciteSplitButtonCustomEvent<any>) => void;
+        "onCalciteSplitButtonSecondaryClick"?: (event: CalciteSplitButtonCustomEvent<DeprecatedEventPayload>) => void;
         /**
           * Describes the type of positioning to use for the dropdown. If your element is in a fixed container, use the 'fixed' value.
          */
@@ -7941,9 +8082,9 @@ declare namespace LocalJSX {
          */
         "name"?: string;
         /**
-          * Fires when the checked value has changed.
+          * Fires when the checked value has changed.  **Note:** The event payload is deprecated, please use the `checked` property on the component instead
          */
-        "onCalciteSwitchChange"?: (event: CalciteSwitchCustomEvent<any>) => void;
+        "onCalciteSwitchChange"?: (event: CalciteSwitchCustomEvent<DeprecatedEventPayload>) => void;
         /**
           * The scale of the switch
          */
@@ -8106,7 +8247,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: CalciteTileSelectCustomEvent<any>) => void;
+        "onCalciteTileSelectChange"?: (event: CalciteTileSelectCustomEvent<void>) => void;
         /**
           * The selection mode of the tile select: radio (single) or checkbox (multiple).
          */
@@ -8228,7 +8369,7 @@ declare namespace LocalJSX {
         /**
           * Emitted when the component has been dismissed.
          */
-        "onCalciteTipDismiss"?: (event: CalciteTipCustomEvent<any>) => void;
+        "onCalciteTipDismiss"?: (event: CalciteTipCustomEvent<void>) => void;
         /**
           * The selected state of the tip if it is being used inside a `calcite-tip-manager`.
          */
@@ -8272,12 +8413,12 @@ declare namespace LocalJSX {
         /**
           * Emitted when the `calcite-tip-manager` has been closed.
          */
-        "onCalciteTipManagerClose"?: (event: CalciteTipManagerCustomEvent<any>) => void;
+        "onCalciteTipManagerClose"?: (event: CalciteTipManagerCustomEvent<void>) => void;
         /**
           * Emitted when the `calcite-tip-manager` has been toggled open or closed.
           * @deprecated use calciteTipManagerClose instead.
          */
-        "onCalciteTipManagerToggle"?: (event: CalciteTipManagerCustomEvent<any>) => void;
+        "onCalciteTipManagerToggle"?: (event: CalciteTipManagerCustomEvent<void>) => void;
     }
     interface CalciteTooltip {
         /**
@@ -8307,9 +8448,9 @@ declare namespace LocalJSX {
         "overlayPositioning"?: OverlayPositioning;
         /**
           * 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)
+          * @see [LogicalPlacement](https://github.com/Esri/calcite-components/blob/master/src/utils/floating-ui.ts#L25)
          */
-        "placement"?: PopperPlacement;
+        "placement"?: LogicalPlacement;
         /**
           * 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.
          */