@ionic/core 7.4.2-dev.11695927273.1323de22 → 7.4.2-dev.11696878562.16da82aa

package/dist/cjs/ion-toast.cjs.entry.js

@@ -5,11 +5,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index$1 = require('./index-6f887430.js');
+const index$2 = require('./index-6f887430.js');
 const config = require('./config-d5882735.js');
 const helpers = require('./helpers-ea4ccbcb.js');
 const lockController = require('./lock-controller-4ae2eb59.js');
-const index$2 = require('./index-cc7dfb7c.js');
+const index$1 = require('./index-cc7dfb7c.js');
 const overlays = require('./overlays-817dca17.js');
 const theme = require('./theme-fbc56b3b.js');
 const ionicGlobal = require('./ionic-global-14a0604b.js');
@@ -24,46 +24,9 @@ require('./hardware-back-button-b67c8e75.js');
 const iosEnterAnimation = (baseEl, opts) => {
   const baseAnimation = animation.createAnimation();
   const wrapperAnimation = animation.createAnimation();
-  const { position, positionAnchor } = opts;
+  const { position, top, bottom } = opts;
   const root = helpers.getElementRoot(baseEl);
   const wrapperEl = root.querySelector('.toast-wrapper');
-  /**
-   * Start with a predefined offset from the edge the toast will be
-   * positioned relative to. By default, this will be the top edge
-   * of the screen.
-   */
-  let offset = position === 'top' ? 10 : -10;
-  let top, bottom;
-  /**
-   * If positionAnchor is defined, add in the distance from the top
-   * of the screen to the target anchor edge. For position="top", the
-   * bottom anchor edge is targeted. For position="bottom", the top
-   * anchor edge is targeted.
-   */
-  if (positionAnchor && index.win) {
-    const box = positionAnchor.getBoundingClientRect();
-    if (position === 'top') {
-      offset += box.bottom;
-    }
-    else if (position === 'bottom') {
-      /**
-       * Just box.top is the distance from the top edge of the screen
-       * to the top edge of the anchor. We want to calculate from the
-       * bottom edge of the screen instead.
-       */
-      offset -= index.win.innerHeight - box.top;
-    }
-    /**
-     * We don't include safe area here because that should already be
-     * accounted for when checking the position of the anchor.
-     */
-    top = `${offset}px`;
-    bottom = `${offset}px`;
-  }
-  else {
-    top = `calc(${offset}px + var(--ion-safe-area-top, 0px))`;
-    bottom = `calc(${offset}px - var(--ion-safe-area-bottom, 0px))`;
-  }
   wrapperAnimation.addElement(wrapperEl);
   switch (position) {
     case 'top':
@@ -84,27 +47,22 @@ const iosEnterAnimation = (baseEl, opts) => {
 /**
  * iOS Toast Leave Animation
  */
-const iosLeaveAnimation = (baseEl, position) => {
+const iosLeaveAnimation = (baseEl, opts) => {
   const baseAnimation = animation.createAnimation();
   const wrapperAnimation = animation.createAnimation();
+  const { position, top, bottom } = opts;
   const root = helpers.getElementRoot(baseEl);
   const wrapperEl = root.querySelector('.toast-wrapper');
   wrapperAnimation.addElement(wrapperEl);
-  /**
-   * For top/bottom positions, we use to() instead of fromTo() so that if
-   * the positionAnchor prop was used, we don't need to recalculate the
-   * toast and/or anchor's position and duplicate work from the enter
-   * animation.
-   */
   switch (position) {
     case 'top':
-      wrapperAnimation.to('transform', 'translateY(-100%)');
+      wrapperAnimation.fromTo('transform', `translateY(${top})`, 'translateY(-100%)');
       break;
     case 'middle':
       wrapperAnimation.fromTo('opacity', 0.99, 0);
       break;
     default:
-      wrapperAnimation.to('transform', 'translateY(100%)');
+      wrapperAnimation.fromTo('transform', `translateY(${bottom})`, 'translateY(100%)');
       break;
   }
   return baseAnimation.easing('cubic-bezier(.36,.66,.04,1)').duration(300).addAnimation(wrapperAnimation);
@@ -116,47 +74,9 @@ const iosLeaveAnimation = (baseEl, position) => {
 const mdEnterAnimation = (baseEl, opts) => {
   const baseAnimation = animation.createAnimation();
   const wrapperAnimation = animation.createAnimation();
-  const { position, positionAnchor } = opts;
+  const { position, top, bottom } = opts;
   const root = helpers.getElementRoot(baseEl);
   const wrapperEl = root.querySelector('.toast-wrapper');
-  /**
-   * Start with a predefined offset from the edge the toast will be
-   * positioned relative to. By default, this will be the top edge
-   * of the screen for position="top", or the bottom edge for
-   * position="bottom".
-   */
-  let offset = 8;
-  let top, bottom;
-  /**
-   * If positionAnchor is defined, add in the distance from the target
-   * screen edge to the target anchor edge. For position="top", the
-   * bottom anchor edge is targeted. For position="bottom", the top
-   * anchor edge is targeted.
-   */
-  if (positionAnchor && index.win) {
-    const box = positionAnchor.getBoundingClientRect();
-    if (position === 'top') {
-      offset += box.bottom;
-    }
-    else if (position === 'bottom') {
-      /**
-       * Just box.top is the distance from the top edge of the screen
-       * to the top edge of the anchor. We want to calculate from the
-       * bottom edge of the screen instead.
-       */
-      offset += index.win.innerHeight - box.top;
-    }
-    /**
-     * We don't include safe area here because that should already be
-     * accounted for when checking the position of the anchor.
-     */
-    top = `${offset}px`;
-    bottom = `${offset}px`;
-  }
-  else {
-    top = `calc(${offset}px + var(--ion-safe-area-top, 0px))`;
-    bottom = `calc(${offset}px + var(--ion-safe-area-bottom, 0px))`;
-  }
   wrapperAnimation.addElement(wrapperEl);
   switch (position) {
     case 'top':
@@ -188,21 +108,102 @@ const mdLeaveAnimation = (baseEl) => {
   return baseAnimation.easing('cubic-bezier(.36,.66,.04,1)').duration(300).addAnimation(wrapperAnimation);
 };
 
+/**
+ * Calculate the CSS top and bottom position of the toast, to be used
+ * as starting points for the animation keyframes.
+ *
+ * Note that MD animates bottom-positioned toasts using style.bottom,
+ * which calculates from the bottom edge of the screen, while iOS uses
+ * translateY, which calculates from the top edge of the screen. This
+ * is why the bottom calculates differ slightly between modes.
+ *
+ * @param position The value of the toast's position prop.
+ * @param positionAnchor The element the toast should be anchored to,
+ * if applicable.
+ * @param mode The toast component's mode (md, ios, etc).
+ * @param toast A reference to the toast element itself.
+ */
+function getAnimationPosition(position, positionAnchor, mode, toast) {
+  /**
+   * Start with a predefined offset from the edge the toast will be
+   * positioned relative to, whether on the screen or anchor element.
+   */
+  let offset;
+  if (mode === 'md') {
+    offset = 8;
+  }
+  else {
+    offset = position === 'top' ? 10 : -10;
+  }
+  /**
+   * If positionAnchor is defined, add in the distance from the target
+   * screen edge to the target anchor edge. For position="top", the
+   * bottom anchor edge is targeted. For position="bottom", the top
+   * anchor edge is targeted.
+   */
+  if (positionAnchor && index.win) {
+    warnIfAnchorIsHidden(positionAnchor, toast);
+    const box = positionAnchor.getBoundingClientRect();
+    if (position === 'top') {
+      offset += box.bottom;
+    }
+    else if (position === 'bottom') {
+      /**
+       * Just box.top is the distance from the top edge of the screen
+       * to the top edge of the anchor. We want to calculate from the
+       * bottom edge of the screen instead.
+       */
+      if (mode === 'md') {
+        offset += index.win.innerHeight - box.top;
+      }
+      else {
+        offset -= index.win.innerHeight - box.top;
+      }
+    }
+    /**
+     * We don't include safe area here because that should already be
+     * accounted for when checking the position of the anchor.
+     */
+    return {
+      top: `${offset}px`,
+      bottom: `${offset}px`,
+    };
+  }
+  else {
+    return {
+      top: `calc(${offset}px + var(--ion-safe-area-top, 0px))`,
+      bottom: mode === 'md'
+        ? `calc(${offset}px + var(--ion-safe-area-bottom, 0px))`
+        : `calc(${offset}px - var(--ion-safe-area-bottom, 0px))`,
+    };
+  }
+}
+/**
+ * If the anchor element is hidden, getBoundingClientRect()
+ * will return all 0s for it, which can cause unexpected
+ * results in the position calculation when animating.
+ */
+function warnIfAnchorIsHidden(positionAnchor, toast) {
+  if (positionAnchor.offsetParent === null) {
+    index$1.printIonWarning('The positionAnchor element for ion-toast was found in the DOM, but appears to be hidden. This may lead to unexpected positioning of the toast.', toast);
+  }
+}
+
 const toastIosCss = ":host{--border-width:0;--border-style:none;--border-color:initial;--box-shadow:none;--min-width:auto;--width:auto;--min-height:auto;--height:auto;--max-height:auto;--white-space:normal;top:0;display:block;position:absolute;width:100%;height:100%;outline:none;color:var(--color);font-family:var(--ion-font-family, inherit);contain:strict;z-index:1001;pointer-events:none}@supports (inset-inline-start: 0){:host{inset-inline-start:0}}@supports not (inset-inline-start: 0){:host{left:0}:host-context([dir=rtl]){left:unset;right:unset;right:0}@supports selector(:dir(rtl)){:host:dir(rtl){left:unset;right:unset;right:0}}}:host(.overlay-hidden){display:none}:host(.ion-color){--button-color:inherit;color:var(--ion-color-contrast)}:host(.ion-color) .toast-button-cancel{color:inherit}:host(.ion-color) .toast-wrapper{background:var(--ion-color-base)}.toast-wrapper{border-radius:var(--border-radius);width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow)}@supports (inset-inline-start: 0){.toast-wrapper{inset-inline-start:var(--start);inset-inline-end:var(--end)}}@supports not (inset-inline-start: 0){.toast-wrapper{left:var(--start);right:var(--end)}:host-context([dir=rtl]) .toast-wrapper{left:unset;right:unset;left:var(--end);right:var(--start)}[dir=rtl] .toast-wrapper{left:unset;right:unset;left:var(--end);right:var(--start)}@supports selector(:dir(rtl)){.toast-wrapper:dir(rtl){left:unset;right:unset;left:var(--end);right:var(--start)}}}.toast-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;pointer-events:auto;height:inherit;min-height:inherit;max-height:inherit;contain:content}.toast-layout-stacked .toast-container{-ms-flex-wrap:wrap;flex-wrap:wrap}.toast-layout-baseline .toast-content{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center}.toast-icon{-webkit-margin-start:16px;margin-inline-start:16px}.toast-message{-ms-flex:1;flex:1;white-space:var(--white-space)}.toast-button-group{display:-ms-flexbox;display:flex}.toast-layout-stacked .toast-button-group{-ms-flex-pack:end;justify-content:end;width:100%}.toast-button{border:0;outline:none;color:var(--button-color);z-index:0}.toast-icon,.toast-button-icon{font-size:1.4em}.toast-button-inner{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}@media (any-hover: hover){.toast-button:hover{cursor:pointer}}:host{--background:var(--ion-color-step-50, #f2f2f2);--border-radius:14px;--button-color:var(--ion-color-primary, #3880ff);--color:var(--ion-color-step-850, #262626);--max-width:700px;--start:10px;--end:10px;font-size:14px}.toast-wrapper{-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:auto;margin-bottom:auto;display:block;position:absolute;z-index:10}@supports ((-webkit-backdrop-filter: blur(0)) or (backdrop-filter: blur(0))){:host(.toast-translucent) .toast-wrapper{background:rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.8);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}:host(.ion-color.toast-translucent) .toast-wrapper{background:rgba(var(--ion-color-base-rgb), 0.8)}}.toast-wrapper.toast-top{-webkit-transform:translate3d(0,  -100%,  0);transform:translate3d(0,  -100%,  0);top:0}.toast-wrapper.toast-middle{opacity:0.01}.toast-wrapper.toast-bottom{-webkit-transform:translate3d(0,  100%,  0);transform:translate3d(0,  100%,  0);bottom:0}.toast-content{-webkit-padding-start:15px;padding-inline-start:15px;-webkit-padding-end:15px;padding-inline-end:15px;padding-top:15px;padding-bottom:15px}.toast-header{margin-bottom:2px;font-weight:500}.toast-button{-webkit-padding-start:15px;padding-inline-start:15px;-webkit-padding-end:15px;padding-inline-end:15px;padding-top:10px;padding-bottom:10px;height:44px;-webkit-transition:background-color, opacity 100ms linear;transition:background-color, opacity 100ms linear;border:0;background-color:transparent;font-family:var(--ion-font-family);font-size:17px;font-weight:500;overflow:hidden}.toast-button.ion-activated{opacity:0.4}@media (any-hover: hover){.toast-button:hover{opacity:0.6}}";
 
 const toastMdCss = ":host{--border-width:0;--border-style:none;--border-color:initial;--box-shadow:none;--min-width:auto;--width:auto;--min-height:auto;--height:auto;--max-height:auto;--white-space:normal;top:0;display:block;position:absolute;width:100%;height:100%;outline:none;color:var(--color);font-family:var(--ion-font-family, inherit);contain:strict;z-index:1001;pointer-events:none}@supports (inset-inline-start: 0){:host{inset-inline-start:0}}@supports not (inset-inline-start: 0){:host{left:0}:host-context([dir=rtl]){left:unset;right:unset;right:0}@supports selector(:dir(rtl)){:host:dir(rtl){left:unset;right:unset;right:0}}}:host(.overlay-hidden){display:none}:host(.ion-color){--button-color:inherit;color:var(--ion-color-contrast)}:host(.ion-color) .toast-button-cancel{color:inherit}:host(.ion-color) .toast-wrapper{background:var(--ion-color-base)}.toast-wrapper{border-radius:var(--border-radius);width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow)}@supports (inset-inline-start: 0){.toast-wrapper{inset-inline-start:var(--start);inset-inline-end:var(--end)}}@supports not (inset-inline-start: 0){.toast-wrapper{left:var(--start);right:var(--end)}:host-context([dir=rtl]) .toast-wrapper{left:unset;right:unset;left:var(--end);right:var(--start)}[dir=rtl] .toast-wrapper{left:unset;right:unset;left:var(--end);right:var(--start)}@supports selector(:dir(rtl)){.toast-wrapper:dir(rtl){left:unset;right:unset;left:var(--end);right:var(--start)}}}.toast-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;pointer-events:auto;height:inherit;min-height:inherit;max-height:inherit;contain:content}.toast-layout-stacked .toast-container{-ms-flex-wrap:wrap;flex-wrap:wrap}.toast-layout-baseline .toast-content{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center}.toast-icon{-webkit-margin-start:16px;margin-inline-start:16px}.toast-message{-ms-flex:1;flex:1;white-space:var(--white-space)}.toast-button-group{display:-ms-flexbox;display:flex}.toast-layout-stacked .toast-button-group{-ms-flex-pack:end;justify-content:end;width:100%}.toast-button{border:0;outline:none;color:var(--button-color);z-index:0}.toast-icon,.toast-button-icon{font-size:1.4em}.toast-button-inner{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}@media (any-hover: hover){.toast-button:hover{cursor:pointer}}:host{--background:var(--ion-color-step-800, #333333);--border-radius:4px;--box-shadow:0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12);--button-color:var(--ion-color-primary, #3880ff);--color:var(--ion-color-step-50, #f2f2f2);--max-width:700px;--start:8px;--end:8px;font-size:14px}.toast-wrapper{-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:auto;margin-bottom:auto;display:block;position:absolute;opacity:0.01;z-index:10}.toast-content{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:14px;padding-bottom:14px}.toast-header{margin-bottom:2px;font-weight:500;line-height:20px}.toast-message{line-height:20px}.toast-layout-baseline .toast-button-group-start{-webkit-margin-start:8px;margin-inline-start:8px}.toast-layout-stacked .toast-button-group-start{-webkit-margin-end:8px;margin-inline-end:8px;margin-top:8px}.toast-layout-baseline .toast-button-group-end{-webkit-margin-end:8px;margin-inline-end:8px}.toast-layout-stacked .toast-button-group-end{-webkit-margin-end:8px;margin-inline-end:8px;margin-bottom:8px}.toast-button{-webkit-padding-start:15px;padding-inline-start:15px;-webkit-padding-end:15px;padding-inline-end:15px;padding-top:10px;padding-bottom:10px;position:relative;background-color:transparent;font-family:var(--ion-font-family);font-size:14px;font-weight:500;letter-spacing:0.84px;text-transform:uppercase;overflow:hidden}.toast-button-cancel{color:var(--ion-color-step-100, #e6e6e6)}.toast-button-icon-only{border-radius:50%;-webkit-padding-start:9px;padding-inline-start:9px;-webkit-padding-end:9px;padding-inline-end:9px;padding-top:9px;padding-bottom:9px;width:36px;height:36px}@media (any-hover: hover){.toast-button:hover{background-color:rgba(var(--ion-color-primary-rgb, 56, 128, 255), 0.08)}.toast-button-cancel:hover{background-color:rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.08)}}";
 
 const Toast = class {
   constructor(hostRef) {
-    index$1.registerInstance(this, hostRef);
-    this.didPresent = index$1.createEvent(this, "ionToastDidPresent", 7);
-    this.willPresent = index$1.createEvent(this, "ionToastWillPresent", 7);
-    this.willDismiss = index$1.createEvent(this, "ionToastWillDismiss", 7);
-    this.didDismiss = index$1.createEvent(this, "ionToastDidDismiss", 7);
-    this.didPresentShorthand = index$1.createEvent(this, "didPresent", 7);
-    this.willPresentShorthand = index$1.createEvent(this, "willPresent", 7);
-    this.willDismissShorthand = index$1.createEvent(this, "willDismiss", 7);
-    this.didDismissShorthand = index$1.createEvent(this, "didDismiss", 7);
+    index$2.registerInstance(this, hostRef);
+    this.didPresent = index$2.createEvent(this, "ionToastDidPresent", 7);
+    this.willPresent = index$2.createEvent(this, "ionToastWillPresent", 7);
+    this.willDismiss = index$2.createEvent(this, "ionToastWillDismiss", 7);
+    this.didDismiss = index$2.createEvent(this, "ionToastDidDismiss", 7);
+    this.didPresentShorthand = index$2.createEvent(this, "didPresent", 7);
+    this.willPresentShorthand = index$2.createEvent(this, "willPresent", 7);
+    this.willDismissShorthand = index$2.createEvent(this, "willDismiss", 7);
+    this.didDismissShorthand = index$2.createEvent(this, "didDismiss", 7);
     this.delegateController = overlays.createDelegateController(this);
     this.lockController = lockController.createLockController();
     this.triggerController = overlays.createTriggerController();
@@ -277,32 +278,18 @@ const Toast = class {
   async present() {
     const unlock = await this.lockController.lock();
     await this.delegateController.attachViewToDom();
-    const { position, positionAnchor } = this;
-    let anchor;
-    if (position === 'middle' && positionAnchor !== undefined) {
-      index$2.printIonWarning('The positionAnchor property is ignored when using position="middle".', this.el);
-    }
-    else if (typeof positionAnchor === 'string') {
-      /**
-       * If the anchor is defined as an ID, find the element.
-       * We do this on every present so the toast doesn't need
-       * to account for the surrounding DOM changing since the
-       * last time it was presented.
-       */
-      const foundEl = document.getElementById(positionAnchor);
-      if (foundEl === null) {
-        index$2.printIonWarning(`An anchor element with an ID of ${positionAnchor} was not found in the DOM.`, this.el);
-      }
-      else {
-        anchor = foundEl;
-      }
-    }
-    else {
-      anchor = positionAnchor;
-    }
+    const { el, position } = this;
+    const anchor = this.getAnchorElement();
+    const animationPosition = getAnimationPosition(position, anchor, ionicGlobal.getIonMode(this), el);
+    /**
+     * Cache the calculated position of the toast, so we can re-use it
+     * in the dismiss animation.
+     */
+    this.lastPresentedPosition = animationPosition;
     await overlays.present(this, 'toastEnter', iosEnterAnimation, mdEnterAnimation, {
       position,
-      positionAnchor: anchor,
+      top: animationPosition.top,
+      bottom: animationPosition.bottom,
     });
     /**
      * Content is revealed to screen readers after
@@ -325,15 +312,28 @@ const Toast = class {
    * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
    */
   async dismiss(data, role) {
+    var _a, _b;
     const unlock = await this.lockController.lock();
-    if (this.durationTimeout) {
-      clearTimeout(this.durationTimeout);
+    const { durationTimeout, position, lastPresentedPosition } = this;
+    if (durationTimeout) {
+      clearTimeout(durationTimeout);
     }
-    const dismissed = await overlays.dismiss(this, data, role, 'toastLeave', iosLeaveAnimation, mdLeaveAnimation, this.position);
+    const dismissed = await overlays.dismiss(this, data, role, 'toastLeave', iosLeaveAnimation, mdLeaveAnimation, 
+    /**
+     * Fetch the cached position that was calculated back in the present
+     * animation. We always want to animate the dismiss from the same
+     * position the present stopped at, so the animation looks continuous.
+     */
+    {
+      position,
+      top: (_a = lastPresentedPosition === null || lastPresentedPosition === void 0 ? void 0 : lastPresentedPosition.top) !== null && _a !== void 0 ? _a : '',
+      bottom: (_b = lastPresentedPosition === null || lastPresentedPosition === void 0 ? void 0 : lastPresentedPosition.bottom) !== null && _b !== void 0 ? _b : '',
+    });
     if (dismissed) {
       this.delegateController.removeViewFromDom();
       this.revealContentToScreenReader = false;
     }
+    this.lastPresentedPosition = undefined;
     unlock();
     return dismissed;
   }
@@ -357,6 +357,37 @@ const Toast = class {
       : [];
     return buttons;
   }
+  /**
+   * Returns the element specified by the positionAnchor prop,
+   * or undefined if prop's value is an ID string and the element
+   * is not found in the DOM.
+   */
+  getAnchorElement() {
+    const { position, positionAnchor, el } = this;
+    if (position === 'middle' && positionAnchor !== undefined) {
+      index$1.printIonWarning('The positionAnchor property is ignored when using position="middle".', this.el);
+      return undefined;
+    }
+    if (typeof positionAnchor === 'string') {
+      /**
+       * If the anchor is defined as an ID, find the element.
+       * We do this on every present so the toast doesn't need
+       * to account for the surrounding DOM changing since the
+       * last time it was presented.
+       */
+      const foundEl = document.getElementById(positionAnchor);
+      if (foundEl === null) {
+        index$1.printIonWarning(`An anchor element with an ID of "${positionAnchor}" was not found in the DOM.`, el);
+        return undefined;
+      }
+      return foundEl;
+    }
+    if (positionAnchor instanceof HTMLElement) {
+      return positionAnchor;
+    }
+    index$1.printIonWarning('Invalid positionAnchor value:', positionAnchor, el);
+    return undefined;
+  }
   async buttonClick(button) {
     const role = button.role;
     if (overlays.isCancel(role)) {
@@ -394,7 +425,7 @@ const Toast = class {
       'toast-button-group': true,
       [`toast-button-group-${side}`]: true,
     };
-    return (index$1.h("div", { class: buttonGroupsClasses }, buttons.map((b) => (index$1.h("button", Object.assign({}, b.htmlAttributes, { type: "button", class: buttonClass(b), tabIndex: 0, onClick: () => this.buttonClick(b), part: buttonPart(b) }), index$1.h("div", { class: "toast-button-inner" }, b.icon && (index$1.h("ion-icon", { "aria-hidden": "true", icon: b.icon, slot: b.text === undefined ? 'icon-only' : undefined, class: "toast-button-icon" })), b.text), mode === 'md' && (index$1.h("ion-ripple-effect", { type: b.icon !== undefined && b.text === undefined ? 'unbounded' : 'bounded' })))))));
+    return (index$2.h("div", { class: buttonGroupsClasses }, buttons.map((b) => (index$2.h("button", Object.assign({}, b.htmlAttributes, { type: "button", class: buttonClass(b), tabIndex: 0, onClick: () => this.buttonClick(b), part: buttonPart(b) }), index$2.h("div", { class: "toast-button-inner" }, b.icon && (index$2.h("ion-icon", { "aria-hidden": "true", icon: b.icon, slot: b.text === undefined ? 'icon-only' : undefined, class: "toast-button-icon" })), b.text), mode === 'md' && (index$2.h("ion-ripple-effect", { type: b.icon !== undefined && b.text === undefined ? 'unbounded' : 'bounded' })))))));
   }
   /**
    * Render the `message` property.
@@ -404,9 +435,9 @@ const Toast = class {
   renderToastMessage(key, ariaHidden = null) {
     const { customHTMLEnabled, message } = this;
     if (customHTMLEnabled) {
-      return (index$1.h("div", { key: key, "aria-hidden": ariaHidden, class: "toast-message", part: "message", innerHTML: config.sanitizeDOMString(message) }));
+      return (index$2.h("div", { key: key, "aria-hidden": ariaHidden, class: "toast-message", part: "message", innerHTML: config.sanitizeDOMString(message) }));
     }
-    return (index$1.h("div", { key: key, "aria-hidden": ariaHidden, class: "toast-message", part: "message" }, message));
+    return (index$2.h("div", { key: key, "aria-hidden": ariaHidden, class: "toast-message", part: "message" }, message));
   }
   /**
    * Render the `header` property.
@@ -414,7 +445,7 @@ const Toast = class {
    * @param ariaHidden - If "true" then content will be hidden from screen readers.
    */
   renderHeader(key, ariaHidden = null) {
-    return (index$1.h("div", { key: key, class: "toast-header", "aria-hidden": ariaHidden, part: "header" }, this.header));
+    return (index$2.h("div", { key: key, class: "toast-header", "aria-hidden": ariaHidden, part: "header" }, this.header));
   }
   render() {
     const { layout, el, revealContentToScreenReader, header, message } = this;
@@ -432,13 +463,13 @@ const Toast = class {
      *  used with one type of button.
      */
     if (layout === 'stacked' && startButtons.length > 0 && endButtons.length > 0) {
-      index$2.printIonWarning('This toast is using start and end buttons with the stacked toast layout. We recommend following the best practice of using either start or end buttons with the stacked toast layout.', el);
+      index$1.printIonWarning('This toast is using start and end buttons with the stacked toast layout. We recommend following the best practice of using either start or end buttons with the stacked toast layout.', el);
     }
-    return (index$1.h(index$1.Host, Object.assign({ tabindex: "-1" }, this.htmlAttributes, { style: {
+    return (index$2.h(index$2.Host, Object.assign({ tabindex: "-1" }, this.htmlAttributes, { style: {
         zIndex: `${60000 + this.overlayIndex}`,
-      }, class: theme.createColorClasses(this.color, Object.assign(Object.assign({ [mode]: true }, theme.getClassMap(this.cssClass)), { 'overlay-hidden': true, 'toast-translucent': this.translucent })), onIonToastWillDismiss: this.dispatchCancelHandler }), index$1.h("div", { class: wrapperClass }, index$1.h("div", { class: "toast-container", part: "container" }, this.renderButtons(startButtons, 'start'), this.icon !== undefined && (index$1.h("ion-icon", { class: "toast-icon", part: "icon", icon: this.icon, lazy: false, "aria-hidden": "true" })), index$1.h("div", { class: "toast-content", role: "status", "aria-atomic": "true", "aria-live": "polite" }, !revealContentToScreenReader && header !== undefined && this.renderHeader('oldHeader', 'true'), !revealContentToScreenReader && message !== undefined && this.renderToastMessage('oldMessage', 'true'), revealContentToScreenReader && header !== undefined && this.renderHeader('header'), revealContentToScreenReader && message !== undefined && this.renderToastMessage('header')), this.renderButtons(endButtons, 'end')))));
+      }, class: theme.createColorClasses(this.color, Object.assign(Object.assign({ [mode]: true }, theme.getClassMap(this.cssClass)), { 'overlay-hidden': true, 'toast-translucent': this.translucent })), onIonToastWillDismiss: this.dispatchCancelHandler }), index$2.h("div", { class: wrapperClass }, index$2.h("div", { class: "toast-container", part: "container" }, this.renderButtons(startButtons, 'start'), this.icon !== undefined && (index$2.h("ion-icon", { class: "toast-icon", part: "icon", icon: this.icon, lazy: false, "aria-hidden": "true" })), index$2.h("div", { class: "toast-content", role: "status", "aria-atomic": "true", "aria-live": "polite" }, !revealContentToScreenReader && header !== undefined && this.renderHeader('oldHeader', 'true'), !revealContentToScreenReader && message !== undefined && this.renderToastMessage('oldMessage', 'true'), revealContentToScreenReader && header !== undefined && this.renderHeader('header'), revealContentToScreenReader && message !== undefined && this.renderToastMessage('header')), this.renderButtons(endButtons, 'end')))));
   }
-  get el() { return index$1.getElement(this); }
+  get el() { return index$2.getElement(this); }
   static get watchers() { return {
     "isOpen": ["onIsOpenChange"],
     "trigger": ["triggerChanged"]

package/dist/collection/components/alert/alert.js

@@ -73,6 +73,14 @@ export class Alert {
   }
   onKeydown(ev) {
     const inputTypes = new Set(this.processedInputs.map((i) => i.type));
+    /**
+     * Based on keyboard navigation requirements, the
+     * checkbox should not respond to the enter keydown event.
+     */
+    if (inputTypes.has('checkbox') && ev.key === 'Enter') {
+      ev.preventDefault();
+      return;
+    }
     // The only inputs we want to navigate between using arrow keys are the radios
     // ignore the keydown event if it is not on a radio button
     if (!inputTypes.has('radio') ||

package/dist/collection/components/alert/test/a11y/alert.e2e.js

@@ -54,5 +54,16 @@ configs({ directions: ['ltr'] }).forEach(({ config, title }) => {
       await expect(alertButton).toHaveAttribute('aria-labelledby', 'close-label');
       await expect(alertButton).toHaveAttribute('aria-label', 'close button');
     });
+    test('should not toggle the checkbox when pressing the Enter key', async ({ page }) => {
+      const didPresent = await page.spyOnEvent('ionAlertDidPresent');
+      const button = page.locator('#checkbox');
+      await button.click();
+      await didPresent.next();
+      const alertCheckbox = page.locator('ion-alert .alert-checkbox');
+      const ariaChecked = await alertCheckbox.getAttribute('aria-checked');
+      await expect(alertCheckbox).toHaveAttribute('aria-checked', ariaChecked);
+      await alertCheckbox.press('Enter');
+      await expect(alertCheckbox).toHaveAttribute('aria-checked', ariaChecked);
+    });
   });
 });

package/dist/collection/components/select/select.js

@@ -642,7 +642,7 @@ Developers can use the "legacy" property to continue using the legacy form marku
   }
   renderListbox() {
     const { disabled, inputId, isExpanded } = this;
-    return (h("button", { disabled: disabled, id: inputId, "aria-label": this.ariaLabel, "aria-haspopup": "listbox", "aria-expanded": `${isExpanded}`, onFocus: this.onFocus, onBlur: this.onBlur, ref: (focusEl) => (this.focusEl = focusEl) }));
+    return (h("button", { disabled: disabled, id: inputId, "aria-label": this.ariaLabel, "aria-haspopup": "dialog", "aria-expanded": `${isExpanded}`, onFocus: this.onFocus, onBlur: this.onBlur, ref: (focusEl) => (this.focusEl = focusEl) }));
   }
   render() {
     const { legacyFormController } = this;

package/dist/collection/components/toast/animations/ios.enter.js

@@ -2,7 +2,6 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { createAnimation } from "../../../utils/animation/animation";
-import { win } from "../../../utils/browser/index";
 import { getElementRoot } from "../../../utils/helpers";
 /**
  * iOS Toast Enter Animation
@@ -10,46 +9,9 @@ import { getElementRoot } from "../../../utils/helpers";
 export const iosEnterAnimation = (baseEl, opts) => {
   const baseAnimation = createAnimation();
   const wrapperAnimation = createAnimation();
-  const { position, positionAnchor } = opts;
+  const { position, top, bottom } = opts;
   const root = getElementRoot(baseEl);
   const wrapperEl = root.querySelector('.toast-wrapper');
-  /**
-   * Start with a predefined offset from the edge the toast will be
-   * positioned relative to. By default, this will be the top edge
-   * of the screen.
-   */
-  let offset = position === 'top' ? 10 : -10;
-  let top, bottom;
-  /**
-   * If positionAnchor is defined, add in the distance from the top
-   * of the screen to the target anchor edge. For position="top", the
-   * bottom anchor edge is targeted. For position="bottom", the top
-   * anchor edge is targeted.
-   */
-  if (positionAnchor && win) {
-    const box = positionAnchor.getBoundingClientRect();
-    if (position === 'top') {
-      offset += box.bottom;
-    }
-    else if (position === 'bottom') {
-      /**
-       * Just box.top is the distance from the top edge of the screen
-       * to the top edge of the anchor. We want to calculate from the
-       * bottom edge of the screen instead.
-       */
-      offset -= win.innerHeight - box.top;
-    }
-    /**
-     * We don't include safe area here because that should already be
-     * accounted for when checking the position of the anchor.
-     */
-    top = `${offset}px`;
-    bottom = `${offset}px`;
-  }
-  else {
-    top = `calc(${offset}px + var(--ion-safe-area-top, 0px))`;
-    bottom = `calc(${offset}px - var(--ion-safe-area-bottom, 0px))`;
-  }
   wrapperAnimation.addElement(wrapperEl);
   switch (position) {
     case 'top':

package/dist/collection/components/toast/animations/ios.leave.js

@@ -6,27 +6,22 @@ import { getElementRoot } from "../../../utils/helpers";
 /**
  * iOS Toast Leave Animation
  */
-export const iosLeaveAnimation = (baseEl, position) => {
+export const iosLeaveAnimation = (baseEl, opts) => {
   const baseAnimation = createAnimation();
   const wrapperAnimation = createAnimation();
+  const { position, top, bottom } = opts;
   const root = getElementRoot(baseEl);
   const wrapperEl = root.querySelector('.toast-wrapper');
   wrapperAnimation.addElement(wrapperEl);
-  /**
-   * For top/bottom positions, we use to() instead of fromTo() so that if
-   * the positionAnchor prop was used, we don't need to recalculate the
-   * toast and/or anchor's position and duplicate work from the enter
-   * animation.
-   */
   switch (position) {
     case 'top':
-      wrapperAnimation.to('transform', 'translateY(-100%)');
+      wrapperAnimation.fromTo('transform', `translateY(${top})`, 'translateY(-100%)');
       break;
     case 'middle':
       wrapperAnimation.fromTo('opacity', 0.99, 0);
       break;
     default:
-      wrapperAnimation.to('transform', 'translateY(100%)');
+      wrapperAnimation.fromTo('transform', `translateY(${bottom})`, 'translateY(100%)');
       break;
   }
   return baseAnimation.easing('cubic-bezier(.36,.66,.04,1)').duration(300).addAnimation(wrapperAnimation);

package/dist/collection/components/toast/animations/md.enter.js

@@ -2,7 +2,6 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { createAnimation } from "../../../utils/animation/animation";
-import { win } from "../../../utils/browser/index";
 import { getElementRoot } from "../../../utils/helpers";
 /**
  * MD Toast Enter Animation
@@ -10,47 +9,9 @@ import { getElementRoot } from "../../../utils/helpers";
 export const mdEnterAnimation = (baseEl, opts) => {
   const baseAnimation = createAnimation();
   const wrapperAnimation = createAnimation();
-  const { position, positionAnchor } = opts;
+  const { position, top, bottom } = opts;
   const root = getElementRoot(baseEl);
   const wrapperEl = root.querySelector('.toast-wrapper');
-  /**
-   * Start with a predefined offset from the edge the toast will be
-   * positioned relative to. By default, this will be the top edge
-   * of the screen for position="top", or the bottom edge for
-   * position="bottom".
-   */
-  let offset = 8;
-  let top, bottom;
-  /**
-   * If positionAnchor is defined, add in the distance from the target
-   * screen edge to the target anchor edge. For position="top", the
-   * bottom anchor edge is targeted. For position="bottom", the top
-   * anchor edge is targeted.
-   */
-  if (positionAnchor && win) {
-    const box = positionAnchor.getBoundingClientRect();
-    if (position === 'top') {
-      offset += box.bottom;
-    }
-    else if (position === 'bottom') {
-      /**
-       * Just box.top is the distance from the top edge of the screen
-       * to the top edge of the anchor. We want to calculate from the
-       * bottom edge of the screen instead.
-       */
-      offset += win.innerHeight - box.top;
-    }
-    /**
-     * We don't include safe area here because that should already be
-     * accounted for when checking the position of the anchor.
-     */
-    top = `${offset}px`;
-    bottom = `${offset}px`;
-  }
-  else {
-    top = `calc(${offset}px + var(--ion-safe-area-top, 0px))`;
-    bottom = `calc(${offset}px + var(--ion-safe-area-bottom, 0px))`;
-  }
   wrapperAnimation.addElement(wrapperEl);
   switch (position) {
     case 'top':