@esri/calcite-components 1.0.0-beta.86 → 1.0.0-beta.87

package/dist/loader/cdn.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.86
+ * v1.0.0-beta.87
  */
 module.exports = require('../cjs/loader.cjs.js');
 module.exports.applyPolyfills = function() { return Promise.resolve() };

package/dist/loader/index.cjs.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.86
+ * v1.0.0-beta.87
  */
 module.exports = require('../cjs/loader.cjs.js');
 module.exports.applyPolyfills = function() { return Promise.resolve() };

package/dist/loader/index.es2017.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.86
+ * v1.0.0-beta.87
  */
 export * from '../esm/polyfills/index.js';
 export * from '../esm/loader.js';

package/dist/loader/index.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.86
+ * v1.0.0-beta.87
  */
 (function(){if("undefined"!==typeof window&&void 0!==window.Reflect&&void 0!==window.customElements){var a=HTMLElement;window.HTMLElement=function(){return Reflect.construct(a,[],this.constructor)};HTMLElement.prototype=a.prototype;HTMLElement.prototype.constructor=HTMLElement;Object.setPrototypeOf(HTMLElement,a)}})();
 export * from '../esm/polyfills/index.js';

package/dist/types/components/accordion/accordion.d.ts

@@ -1,5 +1,5 @@
 import { EventEmitter, VNode } from "../../stencil-public-runtime";
-import { AccordionAppearance } from "./interfaces";
+import { AccordionAppearance, RequestedItem } from "./interfaces";
 import { Position, Scale } from "../interfaces";
 /**
  * @slot - A slot for adding `calcite-accordion-item`s. `calcite-accordion` cannot be nested, however `calcite-accordion-item`s can.
@@ -22,11 +22,11 @@ export declare class Accordion {
   /**
    * @internal
    */
-  calciteInternalAccordionChange: EventEmitter;
+  calciteInternalAccordionChange: EventEmitter<RequestedItem>;
   componentDidLoad(): void;
   render(): VNode;
-  calciteInternalAccordionItemKeyEvent(e: CustomEvent): void;
-  registerCalciteAccordionItem(e: CustomEvent): void;
+  calciteInternalAccordionItemKeyEvent(event: CustomEvent): void;
+  registerCalciteAccordionItem(event: CustomEvent): void;
   updateActiveItemOnChange(event: CustomEvent): void;
   /** created list of Accordion items */
   private items;

package/dist/types/components/accordion/interfaces.d.ts

@@ -1 +1,4 @@
 export declare type AccordionAppearance = "default" | "minimal" | "transparent";
+export interface RequestedItem {
+  requestedAccordionItem: HTMLCalciteAccordionItemElement;
+}

package/dist/types/components/accordion-item/accordion-item.d.ts

@@ -1,8 +1,10 @@
 import { EventEmitter, VNode } from "../../stencil-public-runtime";
+import { ConditionalSlotComponent } from "../../utils/conditionalSlot";
+import { ItemKeyEvent, RegistryEntry, RequestedItem } from "./interfaces";
 /**
  * @slot - A slot for adding custom content, including nested `calcite-accordion-item`s.
  */
-export declare class AccordionItem {
+export declare class AccordionItem implements ConditionalSlotComponent {
   el: HTMLCalciteAccordionItemElement;
   /**
    * When true, the component is active.
@@ -10,8 +12,10 @@ export declare class AccordionItem {
    * @deprecated use expanded instead
    */
   active: boolean;
+  activeHandler(value: boolean): void;
   /** When true, item is expanded */
   expanded: boolean;
+  expandedHandler(value: boolean): void;
   /**
    * Specifies a title for the component.
    *
@@ -33,25 +37,27 @@ export declare class AccordionItem {
   /**
    * @internal
    */
-  calciteInternalAccordionItemKeyEvent: EventEmitter;
+  calciteInternalAccordionItemKeyEvent: EventEmitter<ItemKeyEvent>;
   /**
    * @internal
    */
-  calciteInternalAccordionItemSelect: EventEmitter;
+  calciteInternalAccordionItemSelect: EventEmitter<RequestedItem>;
   /**
    * @internal
    */
-  calciteInternalAccordionItemClose: EventEmitter;
+  calciteInternalAccordionItemClose: EventEmitter<void>;
   /**
    * @internal
    */
-  calciteInternalAccordionItemRegister: EventEmitter;
+  calciteInternalAccordionItemRegister: EventEmitter<RegistryEntry>;
   connectedCallback(): void;
   componentDidLoad(): void;
+  disconnectedCallback(): void;
+  renderActionsStart(): VNode;
+  renderActionsEnd(): VNode;
   render(): VNode;
-  keyDownHandler(e: KeyboardEvent): void;
+  keyDownHandler(event: KeyboardEvent): void;
   updateActiveItemOnChange(event: CustomEvent): void;
-  private guid;
   /** the containing accordion element */
   private parent;
   /** position within parent */

package/dist/types/components/accordion-item/interfaces.d.ts

@@ -0,0 +1,11 @@
+export interface RegistryEntry {
+  parent: HTMLCalciteAccordionElement;
+  position: number;
+}
+export interface ItemKeyEvent {
+  parent: HTMLCalciteAccordionElement;
+  item: KeyboardEvent;
+}
+export interface RequestedItem {
+  requestedAccordionItem: HTMLCalciteAccordionItemElement;
+}

package/dist/types/components/accordion-item/resources.d.ts

@@ -0,0 +1,16 @@
+export declare const SLOTS: {
+  actionsStart: string;
+  actionsEnd: string;
+};
+export declare const CSS: {
+  icon: string;
+  header: string;
+  headerContent: string;
+  actionsStart: string;
+  actionsEnd: string;
+  headerText: string;
+  heading: string;
+  description: string;
+  expandIcon: string;
+  content: string;
+};

package/dist/types/components/action/action.d.ts

@@ -60,7 +60,7 @@ export declare class Action implements InteractiveComponent {
    *
    * @deprecated use onClick instead.
    */
-  calciteActionClick: EventEmitter;
+  calciteActionClick: EventEmitter<void>;
   el: HTMLCalciteActionElement;
   buttonEl: HTMLButtonElement;
   mutationObserver: MutationObserver;

package/dist/types/components/action-bar/action-bar.d.ts

@@ -42,7 +42,7 @@ export declare class ActionBar implements ConditionalSlotComponent {
   /**
    * Emits when the `expanded` property is toggled.
    */
-  calciteActionBarToggle: EventEmitter;
+  calciteActionBarToggle: EventEmitter<void>;
   el: HTMLCalciteActionBarElement;
   mutationObserver: MutationObserver;
   resizeObserver: ResizeObserver;

package/dist/types/components/action-group/action-group.d.ts

@@ -1,6 +1,7 @@
 import { VNode } from "../../stencil-public-runtime";
 import { Columns, Layout, Scale } from "../interfaces";
 import { ConditionalSlotComponent } from "../../utils/conditionalSlot";
+import { CalciteActionMenuCustomEvent } from "../../components";
 /**
  * @slot - A slot for adding a group of `calcite-action`s.
  * @slot menu-actions - A slot for adding an overflow menu with `calcite-action`s inside a `calcite-dropdown`.
@@ -38,5 +39,5 @@ export declare class ActionGroup implements ConditionalSlotComponent {
   renderTooltip(): VNode;
   renderMenu(): VNode;
   render(): VNode;
-  setMenuOpen: (event: CustomEvent<boolean>) => void;
+  setMenuOpen: (event: CalciteActionMenuCustomEvent<boolean>) => void;
 }

package/dist/types/components/action-menu/action-menu.d.ts

@@ -1,7 +1,7 @@
 import { Event, EventEmitter } from "../../stencil-public-runtime";
 import { VNode } from "../../stencil-public-runtime";
-import { PopperPlacement, OverlayPositioning, ComputedPlacement } from "../../utils/popper";
-import { Scale } from "../interfaces";
+import { DeprecatedEventPayload, Scale } from "../interfaces";
+import { LogicalPlacement, EffectivePlacement, OverlayPositioning } from "../../utils/floating-ui";
 import { ConditionalSlotComponent } from "../../utils/conditionalSlot";
 /**
  * @slot - A slot for adding `calcite-action`s.
@@ -19,7 +19,7 @@ export declare class ActionMenu implements ConditionalSlotComponent {
   /**
    * Defines the available placements that can be used when a flip occurs.
    */
-  flipPlacements?: ComputedPlacement[];
+  flipPlacements?: EffectivePlacement[];
   /**
    *  Specifies the text string for the component.
    */
@@ -34,17 +34,19 @@ export declare class ActionMenu implements ConditionalSlotComponent {
   /**
    * 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`.
    */
   scale: Scale;
   /**
    * Emits when the `open` property has changed.
+   *
+   * **Note:**: The event payload is deprecated, please use the `open` property on the component instead
    */
-  calciteActionMenuOpenChange: EventEmitter;
+  calciteActionMenuOpenChange: EventEmitter<DeprecatedEventPayload>;
   closeCalciteActionMenuOnClick(event: Event): void;
   el: HTMLCalciteActionMenuElement;
   menuButtonEl: HTMLCalciteActionElement;
@@ -74,10 +76,8 @@ export declare class ActionMenu implements ConditionalSlotComponent {
   updateActions: (actions: HTMLCalciteActionElement[]) => void;
   getActions: () => void;
   isValidKey(key: string, supportedKeys: string[]): boolean;
-  menuButtonKeyUp: (event: KeyboardEvent) => void;
   menuButtonKeyDown: (event: KeyboardEvent) => void;
   menuActionsContainerKeyDown: (event: KeyboardEvent) => void;
-  menuActionsContainerKeyUp: (event: KeyboardEvent) => void;
   handleActionNavigation: (key: string, actions: HTMLCalciteActionElement[]) => void;
   toggleOpenEnd: () => void;
   toggleOpen: (value?: boolean) => void;

package/dist/types/components/action-pad/action-pad.d.ts

@@ -38,7 +38,7 @@ export declare class ActionPad implements ConditionalSlotComponent {
   /**
    * Emits when the `expanded` property is toggled.
    */
-  calciteActionPadToggle: EventEmitter;
+  calciteActionPadToggle: EventEmitter<void>;
   el: HTMLCalciteActionPadElement;
   expandToggleEl: HTMLCalciteActionElement;
   connectedCallback(): void;

package/dist/types/components/alert/alert.d.ts

@@ -1,6 +1,7 @@
 import { EventEmitter, VNode } from "../../stencil-public-runtime";
 import { Scale } from "../interfaces";
-import { AlertDuration, AlertPlacement, StatusColor } from "./interfaces";
+import { AlertDuration, AlertPlacement, StatusColor, Sync } from "./interfaces";
+import { OpenCloseComponent } from "../../utils/openCloseComponent";
 /**
  * Alerts are meant to provide a way to communicate urgent or important information to users, frequently as a result of an action they took in your app. Alerts are positioned
  * at the bottom of the page. Multiple opened alerts will be added to a queue, allowing users to dismiss them in the order they are provided.
@@ -10,7 +11,7 @@ import { AlertDuration, AlertPlacement, StatusColor } from "./interfaces";
  * @slot message - A slot for adding main text to the component.
  * @slot link - A slot for optionally adding an action to take from the alert (undo, try again, link to page, etc.)
  */
-export declare class Alert {
+export declare class Alert implements OpenCloseComponent {
   el: HTMLCalciteAlertElement;
   /** When true, the component is active. */
   active: boolean;
@@ -44,34 +45,26 @@ export declare class Alert {
   componentWillLoad(): void;
   disconnectedCallback(): void;
   render(): VNode;
-  calciteAlertBeforeClose: EventEmitter<{
-    el: HTMLCalciteAlertElement;
-    queue: HTMLCalciteAlertElement[];
-  }>;
-  calciteAlertClose: EventEmitter<{
-    el: HTMLCalciteAlertElement;
-    queue: HTMLCalciteAlertElement[];
-  }>;
-  calciteAlertBeforeOpen: EventEmitter<{
-    el: HTMLCalciteAlertElement;
-    queue: HTMLCalciteAlertElement[];
-  }>;
-  calciteAlertOpen: EventEmitter<{
-    el: HTMLCalciteAlertElement;
-    queue: HTMLCalciteAlertElement[];
-  }>;
+  /** Fires when the component is requested to be closed and before the closing transition begins. */
+  calciteAlertBeforeClose: EventEmitter<void>;
+  /** Fires when the component is closed and animation is complete. */
+  calciteAlertClose: EventEmitter<void>;
+  /** Fires when the component is added to the DOM but not rendered, and before the opening transition begins. */
+  calciteAlertBeforeOpen: EventEmitter<void>;
+  /** Fires when the component is open and animation is complete. */
+  calciteAlertOpen: EventEmitter<void>;
   /**
    * Fires to sync queue when opened or closed.
    *
    * @internal
    */
-  calciteInternalAlertSync: EventEmitter;
+  calciteInternalAlertSync: EventEmitter<Sync>;
   /**
    * Fires when the component is added to DOM - used to receive initial queue.
    *
    * @internal
    */
-  calciteInternalAlertRegister: EventEmitter;
+  calciteInternalAlertRegister: EventEmitter<void>;
   alertSync(event: CustomEvent): void;
   alertRegister(): void;
   /** Sets focus on the component. */
@@ -82,8 +75,8 @@ export declare class Alert {
   queueLength: number;
   /** is the alert queued */
   queued: boolean;
-  private containerDiv;
-  private setContainerDiv;
+  private containerEl;
+  private setContainerEl;
   /** the close button element */
   private closeButton?;
   private autoDismissTimeoutId;
@@ -96,9 +89,12 @@ export declare class Alert {
   private determineActiveAlert;
   /** close and emit calciteInternalAlertSync event with the updated queue payload */
   private closeAlert;
-  transitionRunHandler: (event: TransitionEvent) => void;
+  onBeforeOpen(): void;
+  onOpen(): void;
+  onBeforeClose(): void;
+  onClose(): void;
+  transitionStartHandler: (event: TransitionEvent) => void;
   transitionEnd: (event: TransitionEvent) => void;
   /** remove queued class after animation completes */
   private openAlert;
-  private emitOpenCloseEvent;
 }

package/dist/types/components/alert/interfaces.d.ts

@@ -7,3 +7,6 @@ export declare enum StatusIcons {
   red = "exclamationMarkTriangle",
   blue = "lightbulb"
 }
+export interface Sync {
+  queue: HTMLCalciteAlertElement[];
+}

package/dist/types/components/block/block.d.ts

@@ -74,7 +74,11 @@ export declare class Block implements ConditionalSlotComponent, InteractiveCompo
   summary: string;
   /**Block description */
   description: string;
-  /** When true, removes padding for the slotted content */
+  /**
+   * When true, removes padding for the slotted content
+   *
+   * @deprecated Use `--calcite-block-padding` CSS variable instead.
+   */
   disablePadding: boolean;
   componentDidRender(): void;
   el: HTMLCalciteBlockElement;
@@ -84,7 +88,7 @@ export declare class Block implements ConditionalSlotComponent, InteractiveCompo
   /**
    * Emitted when the header has been clicked.
    */
-  calciteBlockToggle: EventEmitter;
+  calciteBlockToggle: EventEmitter<void>;
   onHeaderClick: () => void;
   renderScrim(): VNode[];
   renderIcon(): VNode[];

package/dist/types/components/block-section/block-section.d.ts

@@ -36,7 +36,7 @@ export declare class BlockSection {
   /**
    * Emitted when the header has been clicked.
    */
-  calciteBlockSectionToggle: EventEmitter;
+  calciteBlockSectionToggle: EventEmitter<void>;
   handleHeaderKeyDown: (event: KeyboardEvent) => void;
   toggleSection: () => void;
   renderStatusIcon(): VNode[];

package/dist/types/components/card/card.d.ts

@@ -41,7 +41,7 @@ export declare class Card implements ConditionalSlotComponent {
   intlDeselect: string;
   thumbnailPosition: LogicalFlowPosition;
   /** Fired when a selectable card is selected */
-  calciteCardSelect: EventEmitter;
+  calciteCardSelect: EventEmitter<void>;
   connectedCallback(): void;
   disonnectedCallback(): void;
   render(): VNode;

package/dist/types/components/checkbox/checkbox.d.ts

@@ -59,15 +59,15 @@ export declare class Checkbox implements LabelableComponent, CheckableFormCompom
    *
    * @internal
    */
-  calciteInternalCheckboxBlur: EventEmitter;
+  calciteInternalCheckboxBlur: EventEmitter<boolean>;
   /** Emitted when the checkbox checked status changes */
-  calciteCheckboxChange: EventEmitter;
+  calciteCheckboxChange: EventEmitter<void>;
   /**
    * Emitted when the checkbox is focused
    *
    * @internal
    */
-  calciteInternalCheckboxFocus: EventEmitter;
+  calciteInternalCheckboxFocus: EventEmitter<boolean>;
   onToggleBlur: () => void;
   onToggleFocus: () => void;
   onLabelClick: () => void;

package/dist/types/components/chip/chip.d.ts

@@ -1,6 +1,6 @@
 import { EventEmitter, VNode } from "../../stencil-public-runtime";
 import { ChipColor } from "./interfaces";
-import { Appearance, Scale } from "../interfaces";
+import { Appearance, DeprecatedEventPayload, Scale } from "../interfaces";
 import { ConditionalSlotComponent } from "../../utils/conditionalSlot";
 /**
  * @slot - A slot for adding text.
@@ -40,8 +40,12 @@ export declare class Chip implements ConditionalSlotComponent {
   disconnectedCallback(): void;
   /** Sets focus on the component. */
   setFocus(): Promise<void>;
-  /** Emitted when the dismiss button is clicked */
-  calciteChipDismiss: EventEmitter;
+  /**
+   * Emitted when the dismiss button is clicked
+   *
+   * **Note:**: The `el` event payload props is deprecated, please use the event's target/currentTarget instead
+   */
+  calciteChipDismiss: EventEmitter<DeprecatedEventPayload>;
   closeClickHandler: (event: MouseEvent) => void;
   private closeButton;
   private guid;

package/dist/types/components/color-picker/color-picker.d.ts

@@ -215,13 +215,13 @@ export declare class ColorPicker implements InteractiveComponent {
   /**
    * Fires when the color value has changed.
    */
-  calciteColorPickerChange: EventEmitter;
+  calciteColorPickerChange: EventEmitter<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.
    */
-  calciteColorPickerInput: EventEmitter;
+  calciteColorPickerInput: EventEmitter<void>;
   private handleTabActivate;
   private handleColorFieldScopeKeyDown;
   private handleHueScopeKeyDown;

package/dist/types/components/color-picker-hex-input/color-picker-hex-input.d.ts

@@ -36,7 +36,7 @@ export declare class ColorPickerHexInput {
   /**
    * Emitted when the hex value changes.
    */
-  calciteColorPickerHexInputChange: EventEmitter;
+  calciteColorPickerHexInputChange: EventEmitter<void>;
   private onCalciteInternalInputBlur;
   private onInputChange;
   protected onInputKeyDown(event: KeyboardEvent): void;

package/dist/types/components/combobox/combobox.d.ts

@@ -1,8 +1,7 @@
 /// <reference types="lodash" />
 import { Event, EventEmitter, VNode } from "../../stencil-public-runtime";
-import { OverlayPositioning, ComputedPlacement } from "../../utils/popper";
-import { StrictModifiers } from "@popperjs/core";
-import { Scale } from "../interfaces";
+import { OverlayPositioning, FloatingUIComponent, LogicalPlacement, EffectivePlacement } from "../../utils/floating-ui";
+import { DeprecatedEventPayload, Scale } from "../interfaces";
 import { ComboboxSelectionMode, ComboboxChildElement } from "./interfaces";
 import { LabelableComponent } from "../../utils/label";
 import { FormComponent } from "../../utils/form";
@@ -15,7 +14,7 @@ interface ItemData {
 /**
  * @slot - A slot for adding `calcite-combobox-item`s.
  */
-export declare class Combobox implements LabelableComponent, FormComponent, InteractiveComponent, OpenCloseComponent {
+export declare class Combobox implements LabelableComponent, FormComponent, InteractiveComponent, OpenCloseComponent, FloatingUIComponent {
   el: HTMLCalciteComboboxElement;
   /**
    * When true, opens the combobox
@@ -44,6 +43,7 @@ export declare class Combobox implements LabelableComponent, FormComponent, Inte
   allowCustomValues: 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;
+  overlayPositioningHandler(): void;
   /**
    * When true, makes the component required for form-submission.
    *
@@ -71,7 +71,7 @@ export declare class Combobox implements LabelableComponent, FormComponent, Inte
   /**
    * Defines the available placements that can be used when a flip occurs.
    */
-  flipPlacements?: ComputedPlacement[];
+  flipPlacements?: EffectivePlacement[];
   flipPlacementsHandler(): void;
   documentClickHandler(event: Event): void;
   calciteComboboxItemChangeHandler(event: CustomEvent<HTMLCalciteComboboxItemElement>): void;
@@ -96,26 +96,27 @@ export declare class Combobox implements LabelableComponent, FormComponent, Inte
     visibleItems: HTMLCalciteComboboxItemElement[];
     text: string;
   }>;
-  /** Called when a selected item in the combobox is dismissed via its chip */
-  calciteComboboxChipDismiss: EventEmitter;
-  calciteComboboxBeforeClose: EventEmitter<{
-    el: HTMLCalciteComboboxElement;
-  }>;
-  calciteComboboxClose: EventEmitter<{
-    el: HTMLCalciteComboboxElement;
-  }>;
-  calciteComboboxBeforeOpen: EventEmitter<{
-    el: HTMLCalciteComboboxElement;
-  }>;
-  calciteComboboxOpen: EventEmitter<{
-    el: HTMLCalciteComboboxElement;
-  }>;
+  /**
+   * 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
+   */
+  calciteComboboxChipDismiss: EventEmitter<DeprecatedEventPayload>;
+  /** Fires when the component is requested to be closed and before the closing transition begins. */
+  calciteComboboxBeforeClose: EventEmitter<void>;
+  /** Fires when the component is closed and animation is complete. */
+  calciteComboboxClose: EventEmitter<void>;
+  /** Fires when the component is added to the DOM but not rendered, and before the opening transition begins. */
+  calciteComboboxBeforeOpen: EventEmitter<void>;
+  /** Fires when the component is open and animation is complete. */
+  calciteComboboxOpen: EventEmitter<void>;
   connectedCallback(): void;
   componentWillLoad(): void;
   componentDidLoad(): void;
   componentDidRender(): void;
   disconnectedCallback(): void;
-  filteredFlipPlacements: ComputedPlacement[];
+  placement: LogicalPlacement;
+  filteredFlipPlacements: EffectivePlacement[];
   internalValueChangeFlag: boolean;
   labelEl: HTMLCalciteLabelElement;
   formEl: HTMLFormElement;
@@ -138,8 +139,7 @@ export declare class Combobox implements LabelableComponent, FormComponent, Inte
   resizeObserver: ResizeObserver;
   private guid;
   private inputHeight;
-  private popper;
-  private menuEl;
+  private floatingEl;
   private referenceEl;
   private listContainerEl;
   private ignoreSelectedEventsFlag;
@@ -156,17 +156,14 @@ export declare class Combobox implements LabelableComponent, FormComponent, Inte
   onBeforeClose(): void;
   onClose(): void;
   transitionEnd: (event: TransitionEvent) => void;
-  transitionRunHandler: (event: TransitionEvent) => void;
+  transitionStartHandler: (event: TransitionEvent) => void;
   setMaxScrollerHeight: () => Promise<void>;
   calciteChipDismissHandler: (event: CustomEvent<HTMLCalciteChipElement>, comboboxItem: HTMLCalciteComboboxItemElement) => void;
   clickHandler: (event: MouseEvent) => void;
   setInactiveIfNotContained: (event: Event) => void;
-  setMenuEl: (el: HTMLDivElement) => void;
+  setFloatingEl: (el: HTMLDivElement) => void;
   setListContainerEl: (el: HTMLDivElement) => void;
   setReferenceEl: (el: HTMLDivElement) => void;
-  getModifiers(): Partial<StrictModifiers>[];
-  createPopper(): void;
-  destroyPopper(): void;
   private getMaxScrollerHeight;
   private calculateSingleItemHeight;
   inputHandler: (event: Event) => void;
@@ -201,7 +198,7 @@ export declare class Combobox implements LabelableComponent, FormComponent, Inte
   renderChips(): VNode[];
   renderInput(): VNode;
   renderListBoxOptions(): VNode[];
-  renderPopperContainer(): VNode;
+  renderFloatingUIContainer(): VNode;
   renderIconStart(): VNode;
   renderIconEnd(): VNode;
   render(): VNode;

package/dist/types/components/combobox-item/combobox-item.d.ts

@@ -1,6 +1,6 @@
 import { EventEmitter, VNode } from "../../stencil-public-runtime";
 import { ComboboxChildElement } from "../combobox/interfaces";
-import { Scale } from "../interfaces";
+import { DeprecatedEventPayload, Scale } from "../interfaces";
 import { ConditionalSlotComponent } from "../../utils/conditionalSlot";
 import { InteractiveComponent } from "../../utils/interactive";
 /**
@@ -42,8 +42,10 @@ export declare class ComboboxItem implements ConditionalSlotComponent, Interacti
   componentDidRender(): void;
   /**
    * Emitted whenever the item is selected or unselected.
+   *
+   * **Note:**: The event's payload is deprecated, please use the event's target/currentTarget instead
    */
-  calciteComboboxItemChange: EventEmitter;
+  calciteComboboxItemChange: EventEmitter<DeprecatedEventPayload>;
   /**
    * 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.

package/dist/types/components/date-picker/date-picker.d.ts

@@ -103,14 +103,14 @@ export declare class DatePicker {
   private localeData;
   private hoverRange;
   private mostRecentRangeValue?;
-  keyUpHandler: (e: KeyboardEvent) => void;
+  keyDownHandler: (event: KeyboardEvent) => void;
   valueHandler(value: string | string[]): void;
   startWatcher(start: string): void;
   endWatcher(end: string): void;
   private loadLocaleData;
-  monthHeaderSelectChange: (e: CustomEvent<Date>) => void;
-  monthActiveDateChange: (e: CustomEvent<Date>) => void;
-  monthHoverChange: (e: CustomEvent<Date>) => void;
+  monthHeaderSelectChange: (event: CustomEvent<Date>) => void;
+  monthActiveDateChange: (event: CustomEvent<Date>) => void;
+  monthHoverChange: (event: CustomEvent<Date>) => void;
   monthMouseOutChange: () => void;
   /**
    * Render calcite-date-picker-month-header and calcite-date-picker-month
@@ -145,7 +145,7 @@ export declare class DatePicker {
   /**
    * Event handler for when the selected date changes
    *
-   * @param e
+   * @param event
    */
   private monthDateChange;
   /**