voyager-ionic-core 7.4.3 → 7.5.0

package/dist/collection/components/toolbar/toolbar.md.css

@@ -1,3 +1,36 @@
+/**
+ * Convert a font size to a dynamic font size.
+ * Fonts that participate in Dynamic Type should use
+ * dynamic font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param unit (optional) - The unit to convert to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a maximum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a minimum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * maximum and minimum font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
 :host {
   /**
    * @prop --background: Background of the toolbar
@@ -87,6 +120,39 @@
   position: absolute;
 }
 
+/**
+ * Convert a font size to a dynamic font size.
+ * Fonts that participate in Dynamic Type should use
+ * dynamic font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param unit (optional) - The unit to convert to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a maximum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a minimum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * maximum and minimum font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
 :host {
   --background: var(--ion-toolbar-background, var(--ion-background-color, #fff));
   --color: var(--ion-toolbar-color, var(--ion-text-color, #424242));

package/dist/collection/css/test/a11y/typography.e2e.js

@@ -0,0 +1,32 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { expect } from "@playwright/test";
+import { configs, test } from "../../../utils/test/playwright/index";
+configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('typography: font scaling'), () => {
+    test('should scale text on larger font sizes', async ({ page }) => {
+      await page.setContent(`
+        <style>
+          html {
+            font-size: 310%;
+          }
+        </style>
+
+        <div>
+          <h1>Heading 1</h1>
+          <h2>Heading 2</h2>
+          <h3>Heading 3</h3>
+          <h4>Heading 4</h4>
+          <h5>Heading 5</h5>
+          <h6>Heading 6</h6>
+          <p>
+            The quick brown fox <ion-text><sup>jumps</sup></ion-text> over the <ion-text><sub>lazy dog</sub></ion-text>
+          </p>
+        </div>
+      `, config);
+      const div = page.locator('div');
+      await expect(div).toHaveScreenshot(screenshot(`typography-scale`));
+    });
+  });
+});

package/dist/collection/index.js

@@ -13,6 +13,7 @@ export { componentOnReady } from './utils/helpers';
 export { isPlatform, getPlatforms } from './utils/platform';
 export { IonicSafeString } from './utils/sanitization';
 export { getMode, setupConfig } from './utils/config';
+export { openURL } from './utils/theme';
 export { LIFECYCLE_WILL_ENTER, LIFECYCLE_DID_ENTER, LIFECYCLE_WILL_LEAVE, LIFECYCLE_DID_LEAVE, LIFECYCLE_WILL_UNLOAD, } from './components/nav/constants';
 export { menuController } from './utils/menu-controller';
 export { alertController, actionSheetController, modalController, loadingController, pickerController, popoverController, toastController, } from './utils/overlays';

package/dist/collection/utils/animation/animation.js

@@ -36,6 +36,7 @@ export const createAnimation = (animationId) => {
   const id = animationId;
   const onFinishCallbacks = [];
   const onFinishOneTimeCallbacks = [];
+  const onStopOneTimeCallbacks = [];
   const elements = [];
   const childAnimations = [];
   const stylesheets = [];
@@ -93,6 +94,28 @@ export const createAnimation = (animationId) => {
   const isRunning = () => {
     return numAnimationsRunning !== 0 && !paused;
   };
+  /**
+   * @internal
+   * Remove a callback from a chosen callback array
+   * @param callbackToRemove: A reference to the callback that should be removed
+   * @param callbackObjects: An array of callbacks that callbackToRemove should be removed from.
+   */
+  const clearCallback = (callbackToRemove, callbackObjects) => {
+    const index = callbackObjects.findIndex((callbackObject) => callbackObject.c === callbackToRemove);
+    if (index > -1) {
+      callbackObjects.splice(index, 1);
+    }
+  };
+  /**
+   * @internal
+   * Add a callback to be fired when an animation is stopped/cancelled.
+   * @param callback: A reference to the callback that should be fired
+   * @param opts: Any options associated with this particular callback
+   */
+  const onStop = (callback, opts) => {
+    onStopOneTimeCallbacks.push({ c: callback, o: opts });
+    return ani;
+  };
   const onFinish = (callback, opts) => {
     const callbacks = (opts === null || opts === void 0 ? void 0 : opts.oneTimeCallback) ? onFinishOneTimeCallbacks : onFinishCallbacks;
     callbacks.push({ c: callback, o: opts });
@@ -761,7 +784,33 @@ export const createAnimation = (animationId) => {
         numAnimationsRunning = childAnimations.length + 1;
         shouldCalculateNumAnimations = false;
       }
-      onFinish(() => resolve(), { oneTimeCallback: true });
+      /**
+       * When one of these callbacks fires we
+       * need to clear the other's callback otherwise
+       * you can potentially get these callbacks
+       * firing multiple times if the play method
+       * is subsequently called.
+       * Example:
+       * animation.play() (onStop and onFinish callbacks are registered)
+       * animation.stop() (onStop callback is fired, onFinish is not)
+       * animation.play() (onStop and onFinish callbacks are registered)
+       * Total onStop callbacks: 1
+       * Total onFinish callbacks: 2
+       */
+      const onStopCallback = () => {
+        clearCallback(onFinishCallback, onFinishOneTimeCallbacks);
+        resolve();
+      };
+      const onFinishCallback = () => {
+        clearCallback(onStopCallback, onStopOneTimeCallbacks);
+        resolve();
+      };
+      /**
+       * The play method resolves when an animation
+       * run either finishes or is cancelled.
+       */
+      onFinish(onFinishCallback, { oneTimeCallback: true });
+      onStop(onStopCallback, { oneTimeCallback: true });
       childAnimations.forEach((animation) => {
         animation.play();
       });
@@ -774,6 +823,14 @@ export const createAnimation = (animationId) => {
       paused = false;
     });
   };
+  /**
+   * Stops an animation and resets it state to the
+   * beginning. This does not fire any onFinish
+   * callbacks because the animation did not finish.
+   * However, since the animation was not destroyed
+   * (i.e. the animation could run again) we do not
+   * clear the onFinish callbacks.
+   */
   const stop = () => {
     childAnimations.forEach((animation) => {
       animation.stop();
@@ -783,6 +840,8 @@ export const createAnimation = (animationId) => {
       initialized = false;
     }
     resetFlags();
+    onStopOneTimeCallbacks.forEach((onStopCallback) => onStopCallback.c(0, ani));
+    onStopOneTimeCallbacks.length = 0;
   };
   const from = (property, value) => {
     const firstFrame = _keyframes[0];

package/dist/collection/utils/gesture/swipe-back.js

@@ -61,6 +61,10 @@ export const createSwipeBackGesture = (el, canStartHandler, onStartHandler, onMo
   return createGesture({
     el,
     gestureName: 'goback-swipe',
+    /**
+     * Swipe to go back should have priority over other horizontal swipe
+     * gestures. These gestures have a priority of 100 which is why 101 was chosen here.
+     */
     gesturePriority: 101,
     threshold: 10,
     canStart,

package/dist/collection/utils/menu-controller/index.js

@@ -1,6 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
+import { printIonWarning } from "../logging/index";
 import { MENU_BACK_BUTTON_PRIORITY } from "../hardware-back-button";
 import { componentOnReady } from "../helpers";
 import { menuOverlayAnimation } from "./animations/overlay";
@@ -10,21 +11,21 @@ const createMenuController = () => {
   const menuAnimations = new Map();
   const menus = [];
   const open = async (menu) => {
-    const menuEl = await get(menu);
+    const menuEl = await get(menu, true);
     if (menuEl) {
       return menuEl.open();
     }
     return false;
   };
   const close = async (menu) => {
-    const menuEl = await (menu !== undefined ? get(menu) : getOpen());
+    const menuEl = await (menu !== undefined ? get(menu, true) : getOpen());
     if (menuEl !== undefined) {
       return menuEl.close();
     }
     return false;
   };
   const toggle = async (menu) => {
-    const menuEl = await get(menu);
+    const menuEl = await get(menu, true);
     if (menuEl) {
       return menuEl.toggle();
     }
@@ -62,18 +63,35 @@ const createMenuController = () => {
     }
     return false;
   };
-  const get = async (menu) => {
+  /**
+   * Finds and returns the menu specified by "menu" if registered.
+   * @param menu - The side or ID of the desired menu
+   * @param logOnMultipleSideMenus - If true, this function will log a warning
+   * if "menu" is a side but multiple menus on the same side were found. Since this function
+   * is used in multiple places, we default this log to false so that the calling
+   * functions can choose whether or not it is appropriate to log this warning.
+   */
+  const get = async (menu, logOnMultipleSideMenus = false) => {
     await waitUntilReady();
     if (menu === 'start' || menu === 'end') {
       // there could be more than one menu on the same side
       // so first try to get the enabled one
-      const menuRef = find((m) => m.side === menu && !m.disabled);
-      if (menuRef) {
-        return menuRef;
+      const menuRefs = menus.filter((m) => m.side === menu && !m.disabled);
+      if (menuRefs.length >= 1) {
+        if (menuRefs.length > 1 && logOnMultipleSideMenus) {
+          printIonWarning(`menuController queried for a menu on the "${menu}" side, but ${menuRefs.length} menus were found. The first menu reference will be used. If this is not the behavior you want then pass the ID of the menu instead of its side.`, menuRefs.map((m) => m.el));
+        }
+        return menuRefs[0].el;
       }
       // didn't find a menu side that is enabled
       // so try to get the first menu side found
-      return find((m) => m.side === menu);
+      const sideMenuRefs = menus.filter((m) => m.side === menu);
+      if (sideMenuRefs.length >= 1) {
+        if (sideMenuRefs.length > 1 && logOnMultipleSideMenus) {
+          printIonWarning(`menuController queried for a menu on the "${menu}" side, but ${sideMenuRefs.length} menus were found. The first menu reference will be used. If this is not the behavior you want then pass the ID of the menu instead of its side.`, sideMenuRefs.map((m) => m.el));
+        }
+        return sideMenuRefs[0].el;
+      }
     }
     else if (menu != null) {
       // the menuId was not left or right
@@ -115,9 +133,6 @@ const createMenuController = () => {
   };
   const _register = (menu) => {
     if (menus.indexOf(menu) < 0) {
-      if (!menu.disabled) {
-        _setActiveMenu(menu);
-      }
       menus.push(menu);
     }
   };
@@ -127,13 +142,6 @@ const createMenuController = () => {
       menus.splice(index, 1);
     }
   };
-  const _setActiveMenu = (menu) => {
-    // if this menu should be enabled
-    // then find all the other menus on this same side
-    // and automatically disable other same side menus
-    const side = menu.side;
-    menus.filter((m) => m.side === side && m !== menu).forEach((m) => (m.disabled = true));
-  };
   const _setOpen = async (menu, shouldOpen, animated) => {
     if (isAnimatingSync()) {
       return false;
@@ -205,7 +213,6 @@ const createMenuController = () => {
     _register,
     _unregister,
     _setOpen,
-    _setActiveMenu,
   };
 };
 export const menuController = /*@__PURE__*/ createMenuController();

package/dist/collection/utils/native/haptic.js

@@ -75,6 +75,7 @@ const HapticEngine = {
      * if the browser does not support the Vibrate API.
      */
     if ((capacitor === null || capacitor === void 0 ? void 0 : capacitor.getPlatform()) === 'web') {
+      // eslint-disable-next-line @typescript-eslint/prefer-optional-chain
       return typeof navigator !== 'undefined' && navigator.vibrate !== undefined;
     }
     return true;

package/dist/collection/utils/overlays.js

@@ -68,6 +68,7 @@ export const setOverlayId = (el) => {
   return el.id;
 };
 export const createOverlay = (tagName, opts) => {
+  // eslint-disable-next-line @typescript-eslint/prefer-optional-chain
   if (typeof window !== 'undefined' && typeof window.customElements !== 'undefined') {
     return window.customElements.whenDefined(tagName).then(() => {
       const element = document.createElement(tagName);

package/dist/collection/utils/transition/ios.transition.js

@@ -145,10 +145,10 @@ const animateLargeTitle = (rootAnimation, rtl, backDirection, largeTitleEl, larg
   const BACKWARDS_KEYFRAMES = [
     { offset: 0, opacity: 0, transform: `translate3d(${START_TRANSLATE}, ${backButtonBox.top - 4}px, 0) scale(0.49)` },
     { offset: 0.1, opacity: 0 },
-    { offset: 1, opacity: 1, transform: `translate3d(0, ${largeTitleBox.top - 2}px, 0) scale(1)` },
+    { offset: 1, opacity: 1, transform: `translate3d(0, ${largeTitleBox.top + 2}px, 0) scale(1)` },
   ];
   const FORWARDS_KEYFRAMES = [
-    { offset: 0, opacity: 0.99, transform: `translate3d(0, ${largeTitleBox.top - 2}px, 0) scale(1)` },
+    { offset: 0, opacity: 0.99, transform: `translate3d(0, ${largeTitleBox.top + 2}px, 0) scale(1)` },
     { offset: 0.6, opacity: 0 },
     { offset: 1, opacity: 0, transform: `translate3d(${START_TRANSLATE}, ${backButtonBox.top - 4}px, 0) scale(0.5)` },
   ];
@@ -168,10 +168,10 @@ const animateLargeTitle = (rootAnimation, rtl, backDirection, largeTitleEl, larg
     [ORIGIN_X]: TITLE_START_OFFSET,
   })
     .beforeAddWrite(() => {
-    largeTitleEl.style.setProperty('display', 'none');
+    largeTitleEl.style.setProperty('opacity', '0');
   })
     .afterAddWrite(() => {
-    largeTitleEl.style.setProperty('display', '');
+    largeTitleEl.style.setProperty('opacity', '');
     clonedTitleEl.style.setProperty('display', 'none');
   })
     .keyframes(KEYFRAMES);
@@ -202,6 +202,7 @@ export const iosTransitionAnimation = (navEl, opts) => {
       .easing(opts.easing || EASING)
       .fill('both')
       .beforeRemoveClass('ion-page-invisible');
+    // eslint-disable-next-line @typescript-eslint/prefer-optional-chain
     if (leavingEl && navEl !== null && navEl !== undefined) {
       const navDecorAnimation = createAnimation();
       navDecorAnimation.addElement(navEl);

package/dist/docs.json

@@ -1,8 +1,8 @@
 {
-  "timestamp": "2023-10-08T01:11:24",
+  "timestamp": "2023-10-11T14:54:40",
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.4.0",
+    "version": "4.4.1",
     "typescriptVersion": "5.2.2"
   },
   "components": [
@@ -7102,11 +7102,17 @@
         },
         {
           "name": "hourCycle",
-          "type": "\"h12\" | \"h23\" | undefined",
+          "type": "\"h11\" | \"h12\" | \"h23\" | \"h24\" | undefined",
           "complexType": {
-            "original": "'h23' | 'h12'",
-            "resolved": "\"h12\" | \"h23\" | undefined",
-            "references": {}
+            "original": "DatetimeHourCycle",
+            "resolved": "\"h11\" | \"h12\" | \"h23\" | \"h24\" | undefined",
+            "references": {
+              "DatetimeHourCycle": {
+                "location": "import",
+                "path": "./datetime-interface",
+                "id": "src/components/datetime/datetime-interface.ts::DatetimeHourCycle"
+              }
+            }
           },
           "mutable": false,
           "attr": "hour-cycle",
@@ -7114,6 +7120,10 @@
           "docs": "The hour cycle of the `ion-datetime`. If no value is set, this is\nspecified by the current locale.",
           "docsTags": [],
           "values": [
+            {
+              "value": "h11",
+              "type": "string"
+            },
             {
               "value": "h12",
               "type": "string"
@@ -7122,6 +7132,10 @@
               "value": "h23",
               "type": "string"
             },
+            {
+              "value": "h24",
+              "type": "string"
+            },
             {
               "type": "undefined"
             }
@@ -27719,7 +27733,7 @@
           "mutable": false,
           "attr": "position",
           "reflectToAttr": false,
-          "docs": "The position of the toast on the screen.",
+          "docs": "The starting position of the toast on the screen. Can be tweaked further\nusing the `positionAnchor` property.",
           "docsTags": [],
           "default": "'bottom'",
           "values": [
@@ -27739,6 +27753,38 @@
           "optional": false,
           "required": false
         },
+        {
+          "name": "positionAnchor",
+          "type": "HTMLElement | string | undefined",
+          "complexType": {
+            "original": "HTMLElement | string",
+            "resolved": "HTMLElement | string | undefined",
+            "references": {
+              "HTMLElement": {
+                "location": "global",
+                "id": "global::HTMLElement"
+              }
+            }
+          },
+          "mutable": false,
+          "attr": "position-anchor",
+          "reflectToAttr": false,
+          "docs": "The element to anchor the toast's position to. Can be set as a direct reference\nor the ID of the element. With `position=\"bottom\"`, the toast will sit above the\nchosen element. With `position=\"top\"`, the toast will sit below the chosen element.\nWith `position=\"middle\"`, the value of `positionAnchor` is ignored.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "HTMLElement"
+            },
+            {
+              "type": "string"
+            },
+            {
+              "type": "undefined"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
         {
           "name": "translucent",
           "type": "boolean",
@@ -27821,8 +27867,9 @@
                 "id": "global::Promise"
               },
               "ToastDismissOptions": {
-                "location": "global",
-                "id": "global::ToastDismissOptions"
+                "location": "import",
+                "path": "./toast-interface",
+                "id": "src/components/toast/toast-interface.ts::ToastDismissOptions"
               }
             },
             "return": "Promise<boolean>"
@@ -27918,8 +27965,9 @@
                 "id": "global::Promise"
               },
               "ToastPresentOptions": {
-                "location": "global",
-                "id": "global::ToastPresentOptions"
+                "location": "import",
+                "path": "./toast-interface",
+                "id": "src/components/toast/toast-interface.ts::ToastPresentOptions"
               }
             },
             "return": "Promise<void>"
@@ -28995,6 +29043,11 @@
       "docstring": "",
       "path": "src/components/datetime/datetime-interface.ts"
     },
+    "src/components/datetime/datetime-interface.ts::DatetimeHourCycle": {
+      "declaration": "export type DatetimeHourCycle = 'h11' | 'h12' | 'h23' | 'h24';",
+      "docstring": "",
+      "path": "src/components/datetime/datetime-interface.ts"
+    },
     "src/components/datetime/datetime-interface.ts::DatetimeChangeEventDetail": {
       "declaration": "export interface DatetimeChangeEventDetail {\n  value?: string | string[] | null;\n}",
       "docstring": "",
@@ -29290,6 +29343,16 @@
       "docstring": "",
       "path": "src/components/toast/toast-interface.ts"
     },
+    "src/components/toast/toast-interface.ts::ToastPresentOptions": {
+      "declaration": "export type ToastPresentOptions = ToastPositionAlias & ToastAnimationPosition;",
+      "docstring": "",
+      "path": "src/components/toast/toast-interface.ts"
+    },
+    "src/components/toast/toast-interface.ts::ToastDismissOptions": {
+      "declaration": "export type ToastDismissOptions = ToastPositionAlias & ToastAnimationPosition;",
+      "docstring": "",
+      "path": "src/components/toast/toast-interface.ts"
+    },
     "src/components/toggle/toggle-interface.ts::ToggleChangeEventDetail": {
       "declaration": "export interface ToggleChangeEventDetail<T = any> {\n  value: T;\n  checked: boolean;\n}",
       "docstring": "",

package/dist/esm/{animation-a1d9e088.js → animation-92066c62.js}

@@ -159,6 +159,7 @@ const createAnimation = (animationId) => {
   const id = animationId;
   const onFinishCallbacks = [];
   const onFinishOneTimeCallbacks = [];
+  const onStopOneTimeCallbacks = [];
   const elements = [];
   const childAnimations = [];
   const stylesheets = [];
@@ -216,6 +217,28 @@ const createAnimation = (animationId) => {
   const isRunning = () => {
     return numAnimationsRunning !== 0 && !paused;
   };
+  /**
+   * @internal
+   * Remove a callback from a chosen callback array
+   * @param callbackToRemove: A reference to the callback that should be removed
+   * @param callbackObjects: An array of callbacks that callbackToRemove should be removed from.
+   */
+  const clearCallback = (callbackToRemove, callbackObjects) => {
+    const index = callbackObjects.findIndex((callbackObject) => callbackObject.c === callbackToRemove);
+    if (index > -1) {
+      callbackObjects.splice(index, 1);
+    }
+  };
+  /**
+   * @internal
+   * Add a callback to be fired when an animation is stopped/cancelled.
+   * @param callback: A reference to the callback that should be fired
+   * @param opts: Any options associated with this particular callback
+   */
+  const onStop = (callback, opts) => {
+    onStopOneTimeCallbacks.push({ c: callback, o: opts });
+    return ani;
+  };
   const onFinish = (callback, opts) => {
     const callbacks = (opts === null || opts === void 0 ? void 0 : opts.oneTimeCallback) ? onFinishOneTimeCallbacks : onFinishCallbacks;
     callbacks.push({ c: callback, o: opts });
@@ -884,7 +907,33 @@ const createAnimation = (animationId) => {
         numAnimationsRunning = childAnimations.length + 1;
         shouldCalculateNumAnimations = false;
       }
-      onFinish(() => resolve(), { oneTimeCallback: true });
+      /**
+       * When one of these callbacks fires we
+       * need to clear the other's callback otherwise
+       * you can potentially get these callbacks
+       * firing multiple times if the play method
+       * is subsequently called.
+       * Example:
+       * animation.play() (onStop and onFinish callbacks are registered)
+       * animation.stop() (onStop callback is fired, onFinish is not)
+       * animation.play() (onStop and onFinish callbacks are registered)
+       * Total onStop callbacks: 1
+       * Total onFinish callbacks: 2
+       */
+      const onStopCallback = () => {
+        clearCallback(onFinishCallback, onFinishOneTimeCallbacks);
+        resolve();
+      };
+      const onFinishCallback = () => {
+        clearCallback(onStopCallback, onStopOneTimeCallbacks);
+        resolve();
+      };
+      /**
+       * The play method resolves when an animation
+       * run either finishes or is cancelled.
+       */
+      onFinish(onFinishCallback, { oneTimeCallback: true });
+      onStop(onStopCallback, { oneTimeCallback: true });
       childAnimations.forEach((animation) => {
         animation.play();
       });
@@ -897,6 +946,14 @@ const createAnimation = (animationId) => {
       paused = false;
     });
   };
+  /**
+   * Stops an animation and resets it state to the
+   * beginning. This does not fire any onFinish
+   * callbacks because the animation did not finish.
+   * However, since the animation was not destroyed
+   * (i.e. the animation could run again) we do not
+   * clear the onFinish callbacks.
+   */
   const stop = () => {
     childAnimations.forEach((animation) => {
       animation.stop();
@@ -906,6 +963,8 @@ const createAnimation = (animationId) => {
       initialized = false;
     }
     resetFlags();
+    onStopOneTimeCallbacks.forEach((onStopCallback) => onStopCallback.c(0, ani));
+    onStopOneTimeCallbacks.length = 0;
   };
   const from = (property, value) => {
     const firstFrame = _keyframes[0];

package/dist/esm/{app-globals-df292a32.js → app-globals-ec816a70.js}

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { i as initialize } from './ionic-global-63a8d8c9.js';
+import { i as initialize } from './ionic-global-246ca78f.js';
 
 const globalScripts = initialize;
 

package/dist/esm/{button-active-7180a130.js → button-active-d926d4f4.js}

@@ -1,8 +1,8 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { w as writeTask } from './index-cb894020.js';
-import { h as hapticSelectionEnd, a as hapticSelectionStart, b as hapticSelectionChanged } from './haptic-6447af60.js';
+import { w as writeTask } from './index-b49b173c.js';
+import { h as hapticSelectionEnd, a as hapticSelectionStart, b as hapticSelectionChanged } from './haptic-1243b917.js';
 import { createGesture } from './index-ff313b19.js';
 
 const createButtonActiveGesture = (el, isButton) => {