@esri/calcite-components 1.0.0-beta.90 → 1.0.0-beta.91

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.90
+ * v1.0.0-beta.91
  */
 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.90
+ * v1.0.0-beta.91
  */
 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.90
+ * v1.0.0-beta.91
  */
 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.90
+ * v1.0.0-beta.91
  */
 (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/action-menu/action-menu.d.ts

@@ -2,14 +2,12 @@ import { Event, EventEmitter } from "../../stencil-public-runtime";
 import { VNode } from "../../stencil-public-runtime";
 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.
  * @slot trigger - A slot for adding a `calcite-action` to trigger opening the menu.
  * @slot tooltip - A slot for adding an tooltip for the menu.
  */
-export declare class ActionMenu implements ConditionalSlotComponent {
-  connectedCallback(): void;
+export declare class ActionMenu {
   disconnectedCallback(): void;
   /**
    * When true, the component is expanded.
@@ -29,7 +27,12 @@ export declare class ActionMenu implements ConditionalSlotComponent {
    */
   open: boolean;
   openHandler(open: boolean): void;
-  /** Determines 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.
+   *
+   * Using the "absolute" value will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. The "fixed" value should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is "fixed".
+   *
+   */
   overlayPositioning: OverlayPositioning;
   /**
    * Determines where the component will be positioned relative to the `referenceElement`.
@@ -50,10 +53,9 @@ export declare class ActionMenu implements ConditionalSlotComponent {
   closeCalciteActionMenuOnClick(event: Event): void;
   el: HTMLCalciteActionMenuElement;
   menuButtonEl: HTMLCalciteActionElement;
+  slottedMenuButtonEl: HTMLCalciteActionElement;
   defaultMenuButtonEl: HTMLCalciteActionElement;
-  menuEl: HTMLDivElement;
   actionElements: HTMLCalciteActionElement[];
-  mutationObserver: MutationObserver;
   guid: string;
   menuId: string;
   menuButtonId: string;
@@ -64,6 +66,7 @@ export declare class ActionMenu implements ConditionalSlotComponent {
   setFocus(): Promise<void>;
   connectMenuButtonEl: () => void;
   disconnectMenuButtonEl: () => void;
+  setMenuButtonEl: (event: Event) => void;
   setDefaultMenuButtonEl: (el: HTMLCalciteActionElement) => void;
   renderMenuButton(): VNode;
   renderMenuItems(): VNode;
@@ -74,7 +77,7 @@ export declare class ActionMenu implements ConditionalSlotComponent {
   setTooltipReferenceElement: () => void;
   updateAction: (action: HTMLCalciteActionElement, index: number) => void;
   updateActions: (actions: HTMLCalciteActionElement[]) => void;
-  getActions: () => void;
+  handleDefaultSlotChange: (event: Event) => void;
   isValidKey(key: string, supportedKeys: string[]): boolean;
   menuButtonKeyDown: (event: KeyboardEvent) => void;
   menuActionsContainerKeyDown: (event: KeyboardEvent) => void;

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

@@ -13,9 +13,16 @@ import { OpenCloseComponent } from "../../utils/openCloseComponent";
  */
 export declare class Alert implements OpenCloseComponent {
   el: HTMLCalciteAlertElement;
-  /** When true, the component is active. */
+  /**
+   * When true, opens the combobox
+   *
+   * @deprecated use open instead
+   */
   active: boolean;
-  watchActive(): void;
+  /** When true, opens the dropdown */
+  open: boolean;
+  activeHandler(value: boolean): void;
+  openHandler(value: boolean): void;
   /** When true, the component closes automatically (recommended for passive, non-blocking alerts). */
   autoDismiss: boolean;
   /** Specifies the duration before the component automatically closes (only use with `autoDismiss`). */
@@ -75,8 +82,6 @@ export declare class Alert implements OpenCloseComponent {
   queueLength: number;
   /** is the alert queued */
   queued: boolean;
-  private containerEl;
-  private setContainerEl;
   /** the close button element */
   private closeButton?;
   private autoDismissTimeoutId;
@@ -84,7 +89,9 @@ export declare class Alert implements OpenCloseComponent {
   private trackTimer;
   /** the computed icon to render */
   requestedIcon?: string;
-  private activeTransitionProp;
+  openTransitionProp: string;
+  transitionEl: HTMLDivElement;
+  private setTransitionEl;
   /** determine which alert is active */
   private determineActiveAlert;
   /** close and emit calciteInternalAlertSync event with the updated queue payload */
@@ -93,8 +100,6 @@ export declare class Alert implements OpenCloseComponent {
   onOpen(): void;
   onBeforeClose(): void;
   onClose(): void;
-  transitionStartHandler: (event: TransitionEvent) => void;
-  transitionEnd: (event: TransitionEvent) => void;
   /** remove queued class after animation completes */
   private openAlert;
 }

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

@@ -1,9 +1,9 @@
 import { EventEmitter, VNode } from "../../stencil-public-runtime";
 import { Scale } from "../interfaces";
-import { CheckableFormCompoment } from "../../utils/form";
+import { CheckableFormComponent } from "../../utils/form";
 import { LabelableComponent } from "../../utils/label";
 import { InteractiveComponent } from "../../utils/interactive";
-export declare class Checkbox implements LabelableComponent, CheckableFormCompoment, InteractiveComponent {
+export declare class Checkbox implements LabelableComponent, CheckableFormComponent, InteractiveComponent {
   el: HTMLCalciteCheckboxElement;
   /** The checked state of the checkbox. */
   checked: boolean;

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

@@ -17,8 +17,10 @@ export declare class Chip implements ConditionalSlotComponent {
    * @deprecated use closable instead
    */
   dismissible: boolean;
+  handleDismissible(value: boolean): void;
   /** When true, show abutton user can click to dismiss the chip. */
   closable: boolean;
+  handleClosable(value: boolean): void;
   /**
    * Aria label for the "x" button
    *

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

@@ -22,9 +22,10 @@ export declare class Combobox implements LabelableComponent, FormComponent, Inte
    * @deprecated use open instead
    */
   active: boolean;
-  activeHandler(): void;
+  activeHandler(value: boolean): void;
   /**When true, opens the combobox */
   open: boolean;
+  openHandler(value: boolean): void;
   /** Disable combobox input */
   disabled: boolean;
   handleDisabledChange(value: boolean): void;
@@ -41,7 +42,12 @@ export declare class Combobox implements LabelableComponent, FormComponent, Inte
   name: string;
   /** Allow entry of custom values which are not in the original set of items */
   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. */
+  /**
+   * Determines the type of positioning to use for the overlaid content.
+   *
+   * Using the "absolute" value will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. The "fixed" value should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is "fixed".
+   *
+   */
   overlayPositioning: OverlayPositioning;
   overlayPositioningHandler(): void;
   /**
@@ -143,7 +149,8 @@ export declare class Combobox implements LabelableComponent, FormComponent, Inte
   private referenceEl;
   private listContainerEl;
   private ignoreSelectedEventsFlag;
-  private activeTransitionProp;
+  openTransitionProp: string;
+  transitionEl: HTMLDivElement;
   setFilteredPlacements: () => void;
   getValue: () => string | string[];
   onLabelClick: () => void;
@@ -155,14 +162,12 @@ export declare class Combobox implements LabelableComponent, FormComponent, Inte
   onOpen(): void;
   onBeforeClose(): void;
   onClose(): void;
-  transitionEnd: (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;
   setFloatingEl: (el: HTMLDivElement) => void;
-  setListContainerEl: (el: HTMLDivElement) => void;
+  setContainerEl: (el: HTMLDivElement) => void;
   setReferenceEl: (el: HTMLDivElement) => void;
   private getMaxScrollerHeight;
   private calculateSingleItemHeight;

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

@@ -1,12 +1,13 @@
 import { Event, EventEmitter, VNode } from "../../stencil-public-runtime";
-import { ItemKeyboardEvent } from "./interfaces";
+import { ItemKeyboardEvent, Selection } from "./interfaces";
 import { OverlayPositioning, FloatingUIComponent, EffectivePlacement, MenuPlacement } from "../../utils/floating-ui";
 import { Scale } from "../interfaces";
 import { InteractiveComponent } from "../../utils/interactive";
 import { OpenCloseComponent } from "../../utils/openCloseComponent";
+import { RequestedItem } from "../dropdown-group/interfaces";
 /**
- * @slot - A slot for adding `calcite-dropdown-group`s or `calcite-dropdown-item`s.
- * @slot dropdown-trigger - A slot for the element that triggers the dropdown.
+ * @slot - A slot for adding `calcite-dropdown-group` components. Every `calcite-dropdown-item` must have a parent `calcite-dropdown-group`, even if the `groupTitle` property is not set.
+ * @slot dropdown-trigger - A slot for the element that triggers the `calcite-dropdown`.
  */
 export declare class Dropdown implements InteractiveComponent, OpenCloseComponent, FloatingUIComponent {
   el: HTMLCalciteDropdownElement;
@@ -16,9 +17,10 @@ export declare class Dropdown implements InteractiveComponent, OpenCloseComponen
    * @deprecated use open instead.
    */
   active: boolean;
+  activeHandler(value: boolean): void;
   /** When true, opens the dropdown */
   open: boolean;
-  activeHandler(): void;
+  openHandler(value: boolean): void;
   /**
    allow the dropdown to remain open after a selection is made
    if the selection-mode of the selected item's containing group is "none", the dropdown will always close
@@ -38,7 +40,12 @@ export declare class Dropdown implements InteractiveComponent, OpenCloseComponen
    */
   maxItems: number;
   maxItemsHandler(): void;
-  /** 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.
+   *
+   * Using the "absolute" value will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. The "fixed" value should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is "fixed".
+   *
+   */
   overlayPositioning: OverlayPositioning;
   overlayPositioningHandler(): void;
   /**
@@ -68,7 +75,7 @@ export declare class Dropdown implements InteractiveComponent, OpenCloseComponen
   /** Updates the position of the component. */
   reposition(): Promise<void>;
   /** fires when a dropdown item has been selected or deselected */
-  calciteDropdownSelect: EventEmitter<void>;
+  calciteDropdownSelect: EventEmitter<Selection>;
   /** Fires when the component is requested to be closed and before the closing transition begins. */
   calciteDropdownBeforeClose: EventEmitter<void>;
   /** Fires when the component is closed and animation is complete. */
@@ -83,29 +90,30 @@ export declare class Dropdown implements InteractiveComponent, OpenCloseComponen
   mouseEnterHandler(): void;
   mouseLeaveHandler(): void;
   calciteInternalDropdownItemKeyEvent(event: CustomEvent<ItemKeyboardEvent>): void;
-  handleItemSelect(event: CustomEvent): void;
+  handleItemSelect(event: CustomEvent<RequestedItem>): void;
   filteredFlipPlacements: EffectivePlacement[];
   private items;
+  private groups;
   /** trigger elements */
   private triggers;
   floatingEl: HTMLDivElement;
   referenceEl: HTMLDivElement;
-  private activeTransitionProp;
   private scrollerEl;
   mutationObserver: MutationObserver;
   resizeObserver: ResizeObserver;
+  openTransitionProp: string;
+  transitionEl: HTMLDivElement;
   guid: string;
   defaultAssignedElements: Element[];
   slotChangeHandler: (event: Event) => void;
   setFilteredPlacements: () => void;
   updateTriggers: (event: Event) => void;
   updateItems: () => void;
+  updateGroups: (event: Event) => void;
   resizeObserverCallback: (entries: ResizeObserverEntry[]) => void;
   setDropdownWidth: () => void;
   setMaxScrollerHeight: () => void;
-  setScrollerEl: (scrollerEl: HTMLDivElement) => void;
-  transitionEnd: (event: TransitionEvent) => void;
-  transitionStartHandler: (event: TransitionEvent) => void;
+  setScrollerAndTransitionEl: (el: HTMLDivElement) => void;
   onBeforeOpen(): void;
   onOpen(): void;
   onBeforeClose(): void;

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

@@ -1,3 +1,9 @@
 export interface ItemKeyboardEvent {
   keyboardEvent: KeyboardEvent;
 }
+export interface Selection {
+  /**
+   * The item that caused a selection event to emit.
+   */
+  item: HTMLCalciteDropdownItemElement;
+}

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

@@ -2,7 +2,7 @@ import { EventEmitter, VNode } from "../../stencil-public-runtime";
 import { RequestedItem, SelectionMode } from "./interfaces";
 import { Scale } from "../interfaces";
 /**
- * @slot - A slot for adding `calcite-dropdown-item`s.
+ * @slot - A slot for adding `calcite-dropdown-item` components.
  */
 export declare class DropdownGroup {
   el: HTMLCalciteDropdownGroupElement;

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

@@ -12,7 +12,7 @@ export declare class Handle {
   el: HTMLCalciteHandleElement;
   handleButton: HTMLElement;
   /**
-   * Emitted when the the handle is activated and the up or down arrow key is pressed.
+   * Emitted when 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
    */

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

@@ -117,7 +117,12 @@ export declare class InputDatePicker implements LabelableComponent, FormComponen
    * @deprecated use value instead
    */
   end?: string;
-  /** 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.
+   *
+   * Using the "absolute" value will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. The "fixed" value should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is "fixed".
+   *
+   */
   overlayPositioning: OverlayPositioning;
   overlayPositioningHandler(): void;
   /** Disables the default behaviour on the third click of narrowing or extending the range and instead starts a new range. */
@@ -173,18 +178,16 @@ export declare class InputDatePicker implements LabelableComponent, FormComponen
   private referenceEl;
   private startWrapper;
   private endWrapper;
-  private activeTransitionProp;
-  private containerEl;
-  private setContainerEl;
+  openTransitionProp: string;
+  transitionEl: HTMLDivElement;
   setReferenceEl(): void;
   setFilteredPlacements: () => void;
+  private setTransitionEl;
   onLabelClick(): void;
   onBeforeOpen(): void;
   onOpen(): void;
   onBeforeClose(): void;
   onClose(): void;
-  transitionStartHandler: (event: TransitionEvent) => void;
-  transitionEnd: (event: TransitionEvent) => void;
   setStartInput: (el: HTMLCalciteInputElement) => void;
   setEndInput: (el: HTMLCalciteInputElement) => void;
   deactivate: () => void;

package/dist/types/components/input-text/input-text.d.ts

@@ -0,0 +1,170 @@
+import { Scale, Status } from "../interfaces";
+import { EventEmitter, VNode } from "../../stencil-public-runtime";
+import { Position } from "../interfaces";
+import { LabelableComponent } from "../../utils/label";
+import { FormComponent } from "../../utils/form";
+import { InteractiveComponent } from "../../utils/interactive";
+/**
+ * @slot action - A slot for positioning a button next to the component.
+ */
+export declare class InputText implements LabelableComponent, FormComponent, InteractiveComponent {
+  el: HTMLCalciteInputTextElement;
+  /** Specifies the text alignment of the component's value. */
+  alignment: Position;
+  /**
+   * 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;
+  /**
+   * When true, a clear button is displayed when the component has a value.
+   */
+  clearable: boolean;
+  /**
+   * 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;
+  disabledWatcher(): void;
+  /**
+   * 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 true, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon.
+   */
+  icon: string | boolean;
+  /**
+   * 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;
+  /** When true, the icon is flipped in RTL. */
+  iconFlipRtl: boolean;
+  /** Accessible name for the component's button or hyperlink. */
+  label?: string;
+  /** When true, the component is in the loading state and `calcite-progress` is displayed. */
+  loading: boolean;
+  /**
+   * 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;
+  /**
+   * 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;
+  /**
+   * Specifies the name of the component.
+   *
+   * @mdn [name](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name)
+   */
+  name: string;
+  /**
+   * Specifies placeholder text for the component.
+   *
+   * @mdn [placeholder](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#placeholder)
+   */
+  placeholder: string;
+  /** Adds text to the start of the component. */
+  prefixText?: string;
+  /**
+   * When true, the value cannot be modified.
+   *
+   * @mdn [readOnly](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly)
+   */
+  readOnly: boolean;
+  /** When true, the component must have a value in order for the form to submit. */
+  required: boolean;
+  /** Specifies the size of the component. */
+  scale: Scale;
+  /** Specifies the status of the input field, which determines message and icons. */
+  status: Status;
+  /** Adds text to the end of the component.  */
+  suffixText?: string;
+  /**
+   * @internal
+   */
+  editingEnabled: boolean;
+  /** The component's value. */
+  value: string;
+  valueWatcher(newValue: string, previousValue: string): void;
+  updateRequestedIcon(): void;
+  labelEl: HTMLCalciteLabelElement;
+  formEl: HTMLFormElement;
+  defaultValue: InputText["value"];
+  inlineEditableEl: HTMLCalciteInlineEditableElement;
+  /** keep track of the rendered child */
+  private childEl?;
+  get isClearable(): boolean;
+  private previousEmittedValue;
+  private previousValue;
+  private previousValueOrigin;
+  /** the computed icon to render */
+  private requestedIcon?;
+  mutationObserver: MutationObserver;
+  private userChangedValue;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  componentWillLoad(): void;
+  componentDidRender(): void;
+  /**
+   * @internal
+   */
+  calciteInternalInputTextFocus: EventEmitter<{
+    element: HTMLInputElement;
+    value: string;
+  }>;
+  /**
+   * @internal
+   */
+  calciteInternalInputTextBlur: EventEmitter<{
+    element: HTMLInputElement;
+    value: string;
+  }>;
+  /**
+   * Fires each time a new value is typed.
+   */
+  calciteInputTextInput: EventEmitter<{
+    element: HTMLInputElement;
+    nativeEvent: MouseEvent | KeyboardEvent | InputEvent;
+    value: string;
+  }>;
+  /**
+   * Fires each time a new value is typed and committed.
+   */
+  calciteInputTextChange: EventEmitter<void>;
+  /** Sets focus on the component. */
+  setFocus(): Promise<void>;
+  /** Selects all text of the component's `value`. */
+  selectText(): Promise<void>;
+  keyDownHandler: (event: KeyboardEvent) => void;
+  onLabelClick(): void;
+  private clearInputTextValue;
+  private emitChangeIfUserModified;
+  private inputTextBlurHandler;
+  private inputTextFocusHandler;
+  private inputTextInputHandler;
+  private inputTextKeyDownHandler;
+  onFormReset(): void;
+  syncHiddenFormInput(input: HTMLInputElement): void;
+  private setChildElRef;
+  private setDisabledAction;
+  private setInputValue;
+  private setPreviousEmittedValue;
+  private setPreviousValue;
+  private setValue;
+  render(): VNode;
+}

package/dist/types/components/input-text/resources.d.ts

@@ -0,0 +1,19 @@
+export declare const CSS: {
+  loader: string;
+  clearButton: string;
+  editingEnabled: string;
+  inlineChild: string;
+  inputIcon: string;
+  prefix: string;
+  suffix: string;
+  wrapper: string;
+  inputWrapper: string;
+  actionWrapper: string;
+  resizeIconWrapper: string;
+};
+export declare const SLOTS: {
+  action: string;
+};
+export declare const TEXT: {
+  clear: string;
+};

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

@@ -65,8 +65,8 @@ export declare class Modal implements ConditionalSlotComponent, OpenCloseCompone
   private mutationObserver;
   previousActiveElement: HTMLElement;
   titleId: string;
-  private activeTransitionProp;
-  private containerEl;
+  openTransitionProp: string;
+  transitionEl: HTMLDivElement;
   handleEscape(event: KeyboardEvent): void;
   /** Fires when the component is requested to be closed and before the closing transition begins. */
   calciteModalBeforeClose: EventEmitter<void>;
@@ -99,14 +99,13 @@ export declare class Modal implements ConditionalSlotComponent, OpenCloseCompone
    * @param left
    */
   scrollContent(top?: number, left?: number): Promise<void>;
-  private setContainerEl;
+  private setTransitionEl;
   onBeforeOpen(): void;
   onOpen(): void;
   onBeforeClose(): void;
   onClose(): void;
-  transitionStartHandler: (event: TransitionEvent) => void;
-  transitionEnd: (event: TransitionEvent) => void;
-  toggleModal(value: boolean, oldValue: boolean): Promise<void>;
+  activeHandler(value: boolean): void;
+  toggleModal(value: boolean): Promise<void>;
   private openEnd;
   /** Open the modal */
   private openModal;

package/dist/types/components/modal/resources.d.ts

@@ -1,4 +1,5 @@
 export declare const CSS: {
+  modal: string;
   title: string;
   header: string;
   footer: string;
@@ -8,6 +9,10 @@ export declare const CSS: {
   secondary: string;
   primary: string;
   overflowHidden: string;
+  openingIdle: string;
+  openingActive: string;
+  closingIdle: string;
+  closingActive: string;
 };
 export declare const ICONS: {
   close: string;

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

@@ -34,8 +34,10 @@ export declare class Notice implements ConditionalSlotComponent {
    * @deprecated use closable instead
    */
   dismissible?: boolean;
+  handleDismissible(value: boolean): void;
   /** When true, displays a button user can click to dismiss the `calcite-notice` */
   closable?: boolean;
+  handleClosable(value: boolean): void;
   /**
    * When present, shows a default recommended icon. You can
    * also pass a calcite-ui-icon name to display a requested icon.

package/dist/types/components/pick-list-item/pick-list-item.d.ts

@@ -80,13 +80,13 @@ export declare class PickListItem implements ConditionalSlotComponent, Interacti
    */
   calciteListItemRemove: EventEmitter<void>;
   /**
-   * Emits when the the component's label, description, value, or metadata properties are modified.
+   * Emits when the component's label, description, value, or metadata properties are modified.
    *
    * @internal
    */
   calciteInternalListItemPropsChange: EventEmitter<void>;
   /**
-   * Emits when the the component's value property is modified.
+   * Emits when the component's value property is modified.
    *
    * @internal
    */