add custom anim support to nav outlet

add modal sample
poc using animations with any lib
2026-03-13 10:22:08 +08:00 · 2023-06-09 14:37:38 -04:00 · 2023-06-09 12:39:38 -04:00 · 2023-06-09 09:27:55 -04:00 · 2023-06-08 18:35:25 +00:00 · 2023-06-08 14:35:07 -04:00
42 changed files with 491 additions and 367 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,12 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+## [7.0.12](https://github.com/ionic-team/ionic-framework/compare/v7.0.11...v7.0.12) (2023-06-08)
+
+
+### Bug Fixes
+
+* **refresher:** scroll styles are reset when using non-native refresher ([#27602](https://github.com/ionic-team/ionic-framework/issues/27602)) ([92c5545](https://github.com/ionic-team/ionic-framework/commit/92c55452fdf4ac7b8d15ce75a4e867aab9321cfb)), closes [#27601](https://github.com/ionic-team/ionic-framework/issues/27601)
+
+
+
+
+
 ## [7.0.11](https://github.com/ionic-team/ionic-framework/compare/v7.0.9...v7.0.11) (2023-06-07)


 ### Bug Fixes

-* **angular:** remove invalid z-index style ([#27559](https://github.com/ionic-team/ionic-framework/issues/27559)) ([2ce00cf](https://github.com/ionic-team/ionic-framework/commit/2ce00cf292e01664e02ecaf64af229d6a371c480))
 * **header, footer:** resolve CSP violations with box shadow ([#27560](https://github.com/ionic-team/ionic-framework/issues/27560)) ([e75fa58](https://github.com/ionic-team/ionic-framework/commit/e75fa582c4ca507b09f62bbce649f02ca49da7a0))
 * **item-sliding:** refresh sliding behavior when options are added or removed asynchronously ([#27572](https://github.com/ionic-team/ionic-framework/issues/27572)) ([b2a226a](https://github.com/ionic-team/ionic-framework/commit/b2a226ae663695be0666cd862510d8d843c80b9a)), closes [#25578](https://github.com/ionic-team/ionic-framework/issues/25578)
 * **keyboard:** listen on correct events for keyboard lifecycle ([#27569](https://github.com/ionic-team/ionic-framework/issues/27569)) ([7871210](https://github.com/ionic-team/ionic-framework/commit/7871210e9e4ecc09353b821b60f977498a01ee8d)), closes [#27558](https://github.com/ionic-team/ionic-framework/issues/27558)
@@ -16,11 +26,6 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 * **select:** prevent click event from firing twice ([#27570](https://github.com/ionic-team/ionic-framework/issues/27570)) ([ba7e60e](https://github.com/ionic-team/ionic-framework/commit/ba7e60e8669b1980b9a0c6267617894e16b4a2d4))


-### Performance Improvements
-
-* passive event listener for focus visible ([#27568](https://github.com/ionic-team/ionic-framework/issues/27568)) ([e54bf14](https://github.com/ionic-team/ionic-framework/commit/e54bf142c39743913d982a1f1709629b4b034969)), closes [#27566](https://github.com/ionic-team/ionic-framework/issues/27566)
-
-



--- a/angular/CHANGELOG.md
+++ b/angular/CHANGELOG.md
@@ -3,12 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

-## [7.0.11](https://github.com/ionic-team/ionic-framework/compare/v7.0.9...v7.0.11) (2023-06-07)
+## [7.0.12](https://github.com/ionic-team/ionic-framework/compare/v7.0.11...v7.0.12) (2023-06-08)
+
+**Note:** Version bump only for package @ionic/angular


-### Bug Fixes

-* **angular:** remove invalid z-index style ([#27559](https://github.com/ionic-team/ionic-framework/issues/27559)) ([2ce00cf](https://github.com/ionic-team/ionic-framework/commit/2ce00cf292e01664e02ecaf64af229d6a371c480))
+
+
+## [7.0.11](https://github.com/ionic-team/ionic-framework/compare/v7.0.10...v7.0.11) (2023-06-07)
+
+**Note:** Version bump only for package @ionic/angular



--- a/angular/package-lock.json
+++ b/angular/package-lock.json
@@ -1,15 +1,15 @@
 {
  "name": "@ionic/angular",
-  "version": "7.0.11",
+  "version": "7.0.12",
  "lockfileVersion": 2,
  "requires": true,
  "packages": {
    "": {
      "name": "@ionic/angular",
-      "version": "7.0.11",
+      "version": "7.0.12",
      "license": "MIT",
      "dependencies": {
-        "@ionic/core": "^7.0.11",
+        "@ionic/core": "^7.0.12",
        "ionicons": "^7.0.0",
        "jsonc-parser": "^3.0.0",
        "tslib": "^2.3.0"
@@ -1227,19 +1227,19 @@
      "dev": true
    },
    "node_modules/@ionic/core": {
-      "version": "7.0.10",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.0.10.tgz",
-      "integrity": "sha512-twpnJdS/1XEXISuUGqQ1x4hp24J+8Pl++7syDWLpOG7fFQk/RIYXDPA9/NPY8Fi1jUngnA6ivdSmkFSpFES07Q==",
+      "version": "7.0.12",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.0.12.tgz",
+      "integrity": "sha512-DCBrxKQ59oghBxZOWqbJihedJ9rkVpi4ka+VGclOtndvz8PbEOsPArVUDYPGI7md3SVZ0qaVelbSwqQbyHRY7g==",
      "dependencies": {
-        "@stencil/core": "^3.2.2",
+        "@stencil/core": "^3.3.1",
        "ionicons": "^7.1.0",
        "tslib": "^2.1.0"
      }
    },
    "node_modules/@ionic/core/node_modules/@stencil/core": {
-      "version": "3.2.2",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-3.2.2.tgz",
-      "integrity": "sha512-wXb9cVWL0T3cTwYLveekdTFCRGx6+9hpVDEXna+N8K8OPoW6xtFAHRLv+LjOM7k59PkA8MG3IinAfV7Y+xa0Hw==",
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-3.3.1.tgz",
+      "integrity": "sha512-I+660Oe9OMLiU+thjV1GgcI27dcvrSpF3xisHWBOU/4mzRtho3YW0cI8lSjcqyB1KirGTA6QeQ0Xif5UHqn8hw==",
      "bin": {
        "stencil": "bin/stencil"
      },
@@ -8104,19 +8104,19 @@
      "dev": true
    },
    "@ionic/core": {
-      "version": "7.0.10",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.0.10.tgz",
-      "integrity": "sha512-twpnJdS/1XEXISuUGqQ1x4hp24J+8Pl++7syDWLpOG7fFQk/RIYXDPA9/NPY8Fi1jUngnA6ivdSmkFSpFES07Q==",
+      "version": "7.0.12",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.0.12.tgz",
+      "integrity": "sha512-DCBrxKQ59oghBxZOWqbJihedJ9rkVpi4ka+VGclOtndvz8PbEOsPArVUDYPGI7md3SVZ0qaVelbSwqQbyHRY7g==",
      "requires": {
-        "@stencil/core": "^3.2.2",
+        "@stencil/core": "^3.3.1",
        "ionicons": "^7.1.0",
        "tslib": "^2.1.0"
      },
      "dependencies": {
        "@stencil/core": {
-          "version": "3.2.2",
-          "resolved": "https://registry.npmjs.org/@stencil/core/-/core-3.2.2.tgz",
-          "integrity": "sha512-wXb9cVWL0T3cTwYLveekdTFCRGx6+9hpVDEXna+N8K8OPoW6xtFAHRLv+LjOM7k59PkA8MG3IinAfV7Y+xa0Hw=="
+          "version": "3.3.1",
+          "resolved": "https://registry.npmjs.org/@stencil/core/-/core-3.3.1.tgz",
+          "integrity": "sha512-I+660Oe9OMLiU+thjV1GgcI27dcvrSpF3xisHWBOU/4mzRtho3YW0cI8lSjcqyB1KirGTA6QeQ0Xif5UHqn8hw=="
        }
      }
    },
--- a/angular/package.json
+++ b/angular/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@ionic/angular",
-  "version": "7.0.11",
+  "version": "7.0.12",
  "description": "Angular specific wrappers for @ionic/core",
  "keywords": [
    "ionic",
@@ -47,7 +47,7 @@
    }
  },
  "dependencies": {
-    "@ionic/core": "^7.0.11",
+    "@ionic/core": "^7.0.12",
    "ionicons": "^7.0.0",
    "jsonc-parser": "^3.0.0",
    "tslib": "^2.3.0"
--- a/core/CHANGELOG.md
+++ b/core/CHANGELOG.md
@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+## [7.0.12](https://github.com/ionic-team/ionic-framework/compare/v7.0.11...v7.0.12) (2023-06-08)
+
+
+### Bug Fixes
+
+* **refresher:** scroll styles are reset when using non-native refresher ([#27602](https://github.com/ionic-team/ionic-framework/issues/27602)) ([92c5545](https://github.com/ionic-team/ionic-framework/commit/92c55452fdf4ac7b8d15ce75a4e867aab9321cfb)), closes [#27601](https://github.com/ionic-team/ionic-framework/issues/27601)
+
+
+
+
+
 ## [7.0.11](https://github.com/ionic-team/ionic-framework/compare/v7.0.9...v7.0.11) (2023-06-07)


--- a/core/package-lock.json
+++ b/core/package-lock.json
@@ -1,12 +1,12 @@
 {
  "name": "@ionic/core",
-  "version": "7.0.11",
+  "version": "7.0.12",
  "lockfileVersion": 2,
  "requires": true,
  "packages": {
    "": {
      "name": "@ionic/core",
-      "version": "7.0.11",
+      "version": "7.0.12",
      "license": "MIT",
      "dependencies": {
        "@stencil/core": "^3.3.1",
@@ -22,7 +22,7 @@
        "@rollup/plugin-node-resolve": "^8.4.0",
        "@rollup/plugin-virtual": "^2.0.3",
        "@stencil/angular-output-target": "^0.7.1",
-        "@stencil/react-output-target": "^0.5.1",
+        "@stencil/react-output-target": "^0.5.3",
        "@stencil/sass": "^3.0.4",
        "@stencil/vue-output-target": "^0.8.6",
        "@types/jest": "^27.5.2",
@@ -1606,9 +1606,9 @@
      }
    },
    "node_modules/@stencil/react-output-target": {
-      "version": "0.5.1",
-      "resolved": "https://registry.npmjs.org/@stencil/react-output-target/-/react-output-target-0.5.1.tgz",
-      "integrity": "sha512-mEwJaFrNXn/neRQJU7m5H98nJR8B3w0QPv8ijBXDtWh+lD2NA49/FO4bwyDtgkdadp+o5obqJZ4/RcwvzyDLvQ==",
+      "version": "0.5.3",
+      "resolved": "https://registry.npmjs.org/@stencil/react-output-target/-/react-output-target-0.5.3.tgz",
+      "integrity": "sha512-68jwRp35CjAcwhTJ9yFD/3n+jrHOqvEH2jreVuPVvZK+4tkhPlYlwz0d1E1RlF3jyifUSfdkWUGgXIEy8Fo3yw==",
      "dev": true,
      "peerDependencies": {
        "@stencil/core": ">=2.0.0 || >=3 || >= 4.0.0-beta.0 || >= 4.0.0"
@@ -11455,9 +11455,9 @@
      "integrity": "sha512-I+660Oe9OMLiU+thjV1GgcI27dcvrSpF3xisHWBOU/4mzRtho3YW0cI8lSjcqyB1KirGTA6QeQ0Xif5UHqn8hw=="
    },
    "@stencil/react-output-target": {
-      "version": "0.5.1",
-      "resolved": "https://registry.npmjs.org/@stencil/react-output-target/-/react-output-target-0.5.1.tgz",
-      "integrity": "sha512-mEwJaFrNXn/neRQJU7m5H98nJR8B3w0QPv8ijBXDtWh+lD2NA49/FO4bwyDtgkdadp+o5obqJZ4/RcwvzyDLvQ==",
+      "version": "0.5.3",
+      "resolved": "https://registry.npmjs.org/@stencil/react-output-target/-/react-output-target-0.5.3.tgz",
+      "integrity": "sha512-68jwRp35CjAcwhTJ9yFD/3n+jrHOqvEH2jreVuPVvZK+4tkhPlYlwz0d1E1RlF3jyifUSfdkWUGgXIEy8Fo3yw==",
      "dev": true,
      "requires": {}
    },
--- a/core/package.json
+++ b/core/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@ionic/core",
-  "version": "7.0.11",
+  "version": "7.0.12",
  "description": "Base components for Ionic",
  "keywords": [
    "ionic",
@@ -44,7 +44,7 @@
    "@rollup/plugin-node-resolve": "^8.4.0",
    "@rollup/plugin-virtual": "^2.0.3",
    "@stencil/angular-output-target": "^0.7.1",
-    "@stencil/react-output-target": "^0.5.1",
+    "@stencil/react-output-target": "^0.5.3",
    "@stencil/sass": "^3.0.4",
    "@stencil/vue-output-target": "^0.8.6",
    "@types/jest": "^27.5.2",
--- a/core/src/components/alert/test/trigger/index.html
+++ b/core/src/components/alert/test/trigger/index.html
@@ -11,6 +11,13 @@
    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
    <script src="../../../../../scripts/testing/scripts.js"></script>
    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+
+    <script type="module">
+      import * as motion from 'https://esm.run/motion';
+
+      window.motionOne = motion;
+    </script>
+
  </head>

  <body>
@@ -23,25 +30,47 @@

      <ion-content class="ion-padding">
        <ion-button id="default">Open Alert</ion-button>
-        <ion-button id="timeout">Open Alert, Close After 500ms</ion-button>

-        <ion-alert id="default-alert" trigger="default" header="Alert" message="Hello World!"></ion-alert>
-        <ion-alert id="timeout-alert" trigger="timeout" header="Alert" message="Hello World!"></ion-alert>
+        <ion-alert id="custom-alert" trigger="default" header="Alert" message="Hello World!"></ion-alert>
      </ion-content>
    </ion-app>

    <script>
-      const defaultAlert = document.querySelector('#default-alert');
-      const timeoutAlert = document.querySelector('#timeout-alert');
+      const customAlert = document.querySelector('#custom-alert');

-      defaultAlert.buttons = ['OK'];
-      timeoutAlert.buttons = ['OK'];
+      customAlert.enterAnimation = async (el, opts, done) => {
+        const { animate } = window.motionOne;
+        const backdropAni = animate('#custom-alert ion-backdrop', {
+          opacity: 'var(--backdrop-opacity)'
+        });

-      timeoutAlert.addEventListener('didPresent', () => {
-        setTimeout(() => {
-          timeoutAlert.dismiss();
-        }, 500);
-      });
+        const wrapperAni = animate('#custom-alert .alert-wrapper', {
+          opacity: 1,
+          transform: ['scale(1.5)', 'scale(1)']
+        })
+
+        await Promise.all([wrapperAni.finished, backdropAni.finished]);
+
+        done();
+      }
+
+      customAlert.leaveAnimation = async (el, opts, done) => {
+        const { animate } = window.motionOne;
+        const backdropAni = animate('#custom-alert ion-backdrop', {
+          opacity: 0
+        });
+
+        const wrapperAni = animate('#custom-alert .alert-wrapper', {
+          opacity: 0,
+          transform: 'scale(0.5)'
+        })
+
+        await Promise.all([wrapperAni.finished, backdropAni.finished]);
+
+        done();
+      }
+
+      customAlert.buttons = ['OK'];
    </script>
  </body>
 </html>
--- a/core/src/components/back-button/test/navigation/index.html
+++ b/core/src/components/back-button/test/navigation/index.html
@@ -1,130 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" dir="ltr">
-  <head>
-    <meta charset="UTF-8" />
-    <title>Back Button - Navigation</title>
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
-    />
-    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
-    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
-    <script src="../../../../../scripts/testing/scripts.js"></script>
-    <script src="../../../../../dist/ionic/ionic.js"></script>
-  </head>
-
-  <body onload="loadFirstPage()">
-    <ion-app>
-      <ion-nav></ion-nav>
-    </ion-app>
-  </body>
-
-  <script>
-    async function loadFirstPage() {
-      const nav = document.querySelector('ion-nav');
-      const firstPage = document.createElement('div');
-      firstPage.classList.add('first-page');
-      firstPage.innerHTML = `
-      <ion-header>
-        <ion-toolbar>
-          <ion-buttons slot="start">
-            <ion-back-button></ion-back-button>
-          </ion-buttons>
-          <ion-title>Page One</ion-title>
-        </ion-toolbar>
-      </ion-header>
-      <ion-content class="ion-padding">
-        <h1>Page One</h1>
-        <ion-button class="next">Go to Page Two</ion-button>
-      </ion-content>
-    `;
-
-      await nav.setRoot(firstPage);
-
-      // okay cool, we're in the DOM now
-      const button = firstPage.querySelector('.next');
-      button.addEventListener('click', async () => {
-        await goToPageTwo(nav);
-      });
-    }
-
-    async function goToPageTwo(nav) {
-      const secondPage = document.createElement('div');
-      secondPage.classList.add('second-page');
-      secondPage.innerHTML = `
-      <ion-header>
-        <ion-toolbar color="secondary">
-          <ion-buttons slot="start">
-            <ion-back-button></ion-back-button>
-          </ion-buttons>
-          <ion-title>Page Two</ion-title>
-        </ion-toolbar>
-      </ion-header>
-      <ion-content class="ion-padding">
-        <h1>Page Two</h1>
-        <p>Just an empty <code>ion-back-button</code></p>
-        <ion-button class="next">Go to Page Three</ion-button>
-      </ion-content>
-    `;
-
-      // okay cool, we're in the DOM now
-      await nav.push(secondPage);
-
-      const nextButton = secondPage.querySelector('ion-button.next');
-      nextButton.addEventListener('click', async () => {
-        await goToPageThree(nav);
-      });
-    }
-
-    async function goToPageThree(nav) {
-      const thirdPage = document.createElement('div');
-      thirdPage.classList.add('third-page');
-      thirdPage.innerHTML = `
-      <ion-header>
-        <ion-toolbar>
-          <ion-buttons slot="start">
-            <ion-back-button color="danger" text="Text!" icon="add"></ion-back-button>
-          </ion-buttons>
-          <ion-title>Page Three</ion-title>
-        </ion-toolbar>
-      </ion-header>
-      <ion-content class="ion-padding">
-        <h1>Page Three</h1>
-        <p>Custom back button</p>
-        <ion-button class="next">Go to Page Four</ion-button>
-      </ion-content>
-    `;
-
-      // okay cool, we're in the DOM now
-      await nav.push(thirdPage);
-
-      const nextButton = thirdPage.querySelector('ion-button.next');
-      nextButton.addEventListener('click', async () => {
-        await goToPageFour(nav);
-      });
-    }
-
-    async function goToPageFour(nav) {
-      const fourthPage = document.createElement('div');
-      fourthPage.classList.add('fourth-page');
-      fourthPage.innerHTML = `
-      <ion-header>
-        <ion-toolbar>
-          <ion-buttons slot="start">
-            <ion-menu-button auto-hide="false"></ion-menu-button>
-            <ion-back-button color="danger"></ion-back-button>
-          </ion-buttons>
-          <ion-title>Page Four</ion-title>
-        </ion-toolbar>
-      </ion-header>
-      <ion-content class="ion-padding">
-        <h1>Page Four</h1>
-        <p>Back button and menu button</p>
-      </ion-content>
-    `;
-
-      // okay cool, we're in the DOM now
-      await nav.push(fourthPage);
-    }
-  </script>
-</html>
--- a/core/src/components/modal/animations/ios.leave.ts
+++ b/core/src/components/modal/animations/ios.leave.ts
@@ -17,7 +17,8 @@ const createLeaveAnimation = () => {
 /**
 * iOS Modal Leave Animation
 */
-export const iosLeaveAnimation = (baseEl: HTMLElement, opts: ModalAnimationOptions, duration = 500): Animation => {
+export const iosLeaveAnimation = (baseEl: HTMLElement, opts: ModalAnimationOptions): Animation => {
+  const duration = 500;
  const { presentingEl, currentBreakpoint } = opts;
  const root = getElementRoot(baseEl);
  const { wrapperAnimation, backdropAnimation } =
--- a/core/src/components/modal/modal.tsx
+++ b/core/src/components/modal/modal.tsx
@@ -479,7 +479,9 @@ export class Modal implements ComponentInterface, OverlayInterface {
      presentingEl: presentingElement,
      currentBreakpoint: this.initialBreakpoint,
      backdropBreakpoint: this.backdropBreakpoint,
-    });
+      backdropElement: this.backdropEl,
+      wrapperElement: this.wrapperEl
+    } as any);

    /* tslint:disable-next-line */
    if (typeof window !== 'undefined') {
@@ -702,7 +704,9 @@ export class Modal implements ComponentInterface, OverlayInterface {
        presentingEl: presentingElement,
        currentBreakpoint: this.currentBreakpoint ?? this.initialBreakpoint,
        backdropBreakpoint: this.backdropBreakpoint,
-      }
+        backdropElement: this.backdropEl,
+        wrapperElement: this.wrapperEl
+      } as any
    );

    const dismissed = await this.currentTransition;
--- a/core/src/components/modal/test/trigger/index.html
+++ b/core/src/components/modal/test/trigger/index.html
@@ -33,6 +33,11 @@
        margin-left: 5px;
      }
    </style>
+    <script type="module">
+      import * as motion from 'https://esm.run/motion';
+
+      window.motionOne = motion;
+    </script>
  </head>
  <body>
    <ion-app>
@@ -47,12 +52,50 @@
          <div class="grid-item">
            <h2>Click</h2>
            <ion-button id="left-click-trigger">Trigger</ion-button>
-            <ion-modal class="left-click-modal" trigger="left-click-trigger">
+            <ion-modal id="custom-modal" trigger="left-click-trigger">
              <ion-content class="ion-padding"> Modal Content </ion-content>
            </ion-modal>
          </div>
        </div>
      </ion-content>
    </ion-app>
+
+    <script>
+      const customModal = document.querySelector('#custom-modal');
+
+      customModal.enterAnimation = async (el, opts, done) => {
+        const { backdropElement, wrapperElement } = opts;
+        const { animate } = window.motionOne;
+        const backdropAni = animate(backdropElement, {
+          opacity: 'var(--backdrop-opacity)'
+        });
+
+        const wrapperAni = animate(wrapperElement, {
+          opacity: 1,
+          transform: ['scale(1.5)', 'scale(1)']
+        })
+
+        await Promise.all([wrapperAni.finished, backdropAni.finished]);
+
+        done();
+      }
+
+      customModal.leaveAnimation = async (el, opts, done) => {
+        const { backdropElement, wrapperElement } = opts;
+        const { animate } = window.motionOne;
+        const backdropAni = animate(backdropElement, {
+          opacity: 0
+        });
+
+        const wrapperAni = animate(wrapperElement, {
+          opacity: 0,
+          transform: 'scale(0.5)'
+        })
+
+        await Promise.all([wrapperAni.finished, backdropAni.finished]);
+
+        done();
+      }
+    </script>
  </body>
 </html>
--- a/core/src/components/refresher/refresher.tsx
+++ b/core/src/components/refresher/refresher.tsx
@@ -692,6 +692,16 @@ export class Refresher implements ComponentInterface {
      // and close the refresher
      // set that the refresh is actively cancelling
      this.cancel();
+    } else if (this.state === RefresherState.Inactive) {
+      /**
+       * The pull to refresh gesture was aborted
+       * so we should immediately restore any overflow styles
+       * that have been modified. Do not call this.cancel
+       * because the styles will only be reset after a timeout.
+       * If the gesture is aborted then scrolling should be
+       * available right away.
+       */
+      this.restoreOverflowStyle();
    }
  }

@@ -716,7 +726,12 @@ export class Refresher implements ComponentInterface {
      this.state = RefresherState.Inactive;
      this.progress = 0;
      this.didStart = false;
-      this.setCss(0, '0ms', false, '');
+
+      /**
+       * Reset any overflow styles so the
+       * user can scroll again.
+       */
+      this.setCss(0, '0ms', false, '', true);
    }, 600);

    // reset the styles on the scroll element
@@ -725,7 +740,13 @@ export class Refresher implements ComponentInterface {
    this.setCss(0, this.closeDuration, true, delay);
  }

-  private setCss(y: number, duration: string, overflowVisible: boolean, delay: string) {
+  private setCss(
+    y: number,
+    duration: string,
+    overflowVisible: boolean,
+    delay: string,
+    shouldRestoreOverflowStyle = false
+  ) {
    if (this.nativeRefresher) {
      return;
    }
@@ -738,11 +759,18 @@ export class Refresher implements ComponentInterface {
        scrollStyle.transform = backgroundStyle.transform = y > 0 ? `translateY(${y}px) translateZ(0px)` : '';
        scrollStyle.transitionDuration = backgroundStyle.transitionDuration = duration;
        scrollStyle.transitionDelay = backgroundStyle.transitionDelay = delay;
-        if (overflowVisible) {
-          scrollStyle.overflow = 'hidden';
-        } else {
-          this.restoreOverflowStyle();
-        }
+        scrollStyle.overflow = overflowVisible ? 'hidden' : '';
+      }
+
+      /**
+       * Reset the overflow styles only once
+       * the pull to refresh effect has been closed.
+       * This ensures that the gesture is done
+       * and the refresh operation has either
+       * been aborted or has completed.
+       */
+      if (shouldRestoreOverflowStyle) {
+        this.restoreOverflowStyle();
      }
    });
  }
--- a/core/src/components/router-outlet/test/basic/index.html
+++ b/core/src/components/router-outlet/test/basic/index.html
@@ -12,6 +12,11 @@
    <script src="../../../../../scripts/testing/scripts.js"></script>
    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+    <script type="module">
+      import * as motion from 'https://esm.run/motion';
+
+      window.motionOne = motion;
+    </script>
    <script>
      class PageOne extends HTMLElement {
        connectedCallback() {
@@ -127,5 +132,26 @@

  <script>
    document.querySelector('ion-route[component=page-three]').componentProps = { param: 'route' };
+
+    const routerOutlet = document.querySelector('ion-router-outlet');
+
+    routerOutlet.animation = async (el, opts, done) => {
+      const { enteringEl, leavingEl, direction } = opts;
+      const { animate, spring } = window.motionOne;
+      const enteringAni = animate(enteringEl, {
+        opacity: [1, 1],
+        x: ['100%', '0%']
+      }, {  easing: spring() });
+
+      const leavingAni = animate(leavingEl, {
+        opacity: [1, 1],
+        easing: spring(),
+        x: '-100%'
+      }, {  easing: spring() })
+
+      await Promise.all([enteringAni.finished, leavingAni.finished]);
+
+      done();
+    }
  </script>
 </html>
--- a/core/src/components/segment/test/a11y/segment.e2e.ts
+++ b/core/src/components/segment/test/a11y/segment.e2e.ts
@@ -11,12 +11,8 @@ configs().forEach(({ title, config }) => {
      expect(results.violations).toEqual([]);
    });

-    // TODO FW-3710
-    test.skip('segment buttons should be keyboard navigable', async ({ page, browserName, skip }, testInfo) => {
-      // TODO (FW-2979)
-      skip.browser('webkit', 'Safari 16 only allows text fields and pop-up menus to be focused.');
-      const tabKey = browserName === 'webkit' ? 'Alt+Tab' : 'Tab';
-      const isRTL = testInfo.project.metadata.rtl === true;
+    test('segment buttons should be keyboard navigable', async ({ page, pageUtils }) => {
+      const isRTL = config.direction === 'rtl';
      const nextKey = isRTL ? 'ArrowLeft' : 'ArrowRight';
      const previousKey = isRTL ? 'ArrowRight' : 'ArrowLeft';

@@ -24,7 +20,16 @@ configs().forEach(({ title, config }) => {

      const segmentButtons = page.locator('ion-segment-button');

-      await page.keyboard.press(tabKey);
+      // A flaky test only occurs on "Mobile Chrome"
+      // If it occurs, the elements are not visible yet
+      // when the test presses the any key on the keyboard
+      // This may be due to the fact that the elements are
+      // still updating their state before the render method
+      // The workaround is to wait for the first element to be visible
+      // If the first element is visible, then the rest of the elements are visible
+      await segmentButtons.nth(0).waitFor();
+
+      await pageUtils.pressKeys('Tab');
      await expect(segmentButtons.nth(0)).toBeFocused();

      await page.keyboard.press(nextKey);
--- a/core/src/utils/animation/animation-interface.ts
+++ b/core/src/utils/animation/animation-interface.ts
@@ -264,4 +264,4 @@ export type AnimationPlayTo = 'start' | 'end';
 export type AnimationDirection = 'normal' | 'reverse' | 'alternate' | 'alternate-reverse';
 export type AnimationFill = 'auto' | 'none' | 'forwards' | 'backwards' | 'both';

-export type AnimationBuilder = (baseEl: any, opts?: any) => Animation;
+export type AnimationBuilder = (baseEl: any, opts?: any, done?: () => void) => Animation;
--- a/core/src/utils/overlays.ts
+++ b/core/src/utils/overlays.ts
@@ -583,26 +583,35 @@ const overlayAnimation = async (
  baseEl.classList.remove('overlay-hidden');

  const aniRoot = overlay.el;
-  const animation = animationBuilder(aniRoot, opts);

-  if (!overlay.animated || !config.getBoolean('animated', true)) {
-    animation.duration(0);
+  let resolvePromise;
+  let promise = new Promise((resolve) => {
+    resolvePromise = () => { resolve(true) };
+  })
+
+  const animation = animationBuilder(aniRoot, opts, resolvePromise);
+  if (animation.beforeAddWrite === undefined) {
+    await promise;
+  } else {
+    if (!overlay.animated || !config.getBoolean('animated', true)) {
+      animation.duration(0);
+    }
+
+    if (overlay.keyboardClose) {
+      animation.beforeAddWrite(() => {
+        const activeElement = baseEl.ownerDocument!.activeElement as HTMLElement;
+        if (activeElement?.matches('input,ion-input, ion-textarea')) {
+          activeElement.blur();
+        }
+      });
+    }
+
+    const activeAni = activeAnimations.get(overlay) || [];
+    activeAnimations.set(overlay, [...activeAni, animation]);
+
+    await animation.play();
  }

-  if (overlay.keyboardClose) {
-    animation.beforeAddWrite(() => {
-      const activeElement = baseEl.ownerDocument!.activeElement as HTMLElement;
-      if (activeElement?.matches('input,ion-input, ion-textarea')) {
-        activeElement.blur();
-      }
-    });
-  }
-
-  const activeAni = activeAnimations.get(overlay) || [];
-  activeAnimations.set(overlay, [...activeAni, animation]);
-
-  await animation.play();
-
  return true;
 };

--- a/core/src/utils/transition/index.ts
+++ b/core/src/utils/transition/index.ts
@@ -21,7 +21,7 @@ export const transition = (opts: TransitionOptions): Promise<TransitionResult> =
      beforeTransition(opts);
      runTransition(opts).then(
        (result) => {
-          if (result.animation) {
+          if (result.animation && result.animation.destroy) {
            result.animation.destroy();
          }
          afterTransition(opts);
@@ -102,11 +102,9 @@ const getAnimationBuilder = async (opts: TransitionOptions): Promise<AnimationBu
 const animation = async (animationBuilder: AnimationBuilder, opts: TransitionOptions): Promise<TransitionResult> => {
  await waitForReady(opts, true);

-  const trans = animationBuilder(opts.baseEl, opts);
-
  fireWillEvents(opts.enteringEl, opts.leavingEl);

-  const didComplete = await playTransition(trans, opts);
+  const { animation, didComplete } = await playTransition(animationBuilder, opts);

  if (opts.progressCallback) {
    opts.progressCallback(undefined);
@@ -118,7 +116,7 @@ const animation = async (animationBuilder: AnimationBuilder, opts: TransitionOpt

  return {
    hasCompleted: didComplete,
-    animation: trans,
+    animation,
  };
 };

@@ -155,27 +153,42 @@ const notifyViewReady = async (
  }
 };

-const playTransition = (trans: Animation, opts: TransitionOptions): Promise<boolean> => {
-  const progressCallback = opts.progressCallback;
+const playTransition = async (animationBuilder: AnimationBuilder, opts: TransitionOptions): Promise<{ animation: Animation, didComplete: boolean}> => {

-  const promise = new Promise<boolean>((resolve) => {
-    trans.onFinish((currentStep: any) => resolve(currentStep === 1));
-  });
+  let resolvePromise;
+  let promise: Promise<boolean> = new Promise((resolve) => {
+    resolvePromise = () => { resolve(true) };
+  })

-  // cool, let's do this, start the transition
-  if (progressCallback) {
-    // this is a swipe to go back, just get the transition progress ready
-    // kick off the swipe animation start
-    trans.progressStart(true);
-    progressCallback(trans);
+  const animation = animationBuilder(opts.baseEl, opts, resolvePromise);
+
+  let didComplete = false;
+  if (animation.beforeAddWrite === undefined) {
+    didComplete = await promise;
  } else {
-    // only the top level transition should actually start "play"
-    // kick it off and let it play through
-    // ******** DOM WRITE ****************
-    trans.play();
+    const progressCallback = opts.progressCallback;
+
+    promise = new Promise<boolean>((resolve) => {
+      animation.onFinish((currentStep: any) => resolve(currentStep === 1));
+    });
+
+    // cool, let's do this, start the transition
+    if (progressCallback) {
+      // this is a swipe to go back, just get the transition progress ready
+      // kick off the swipe animation start
+      animation.progressStart(true);
+      progressCallback(animation);
+    } else {
+      // only the top level transition should actually start "play"
+      // kick it off and let it play through
+      // ******** DOM WRITE ****************
+      animation.play();
+      didComplete = await promise;
+    }
  }
+
  // create a callback for when the animation is done
-  return promise;
+  return { didComplete, animation };
 };

 const fireWillEvents = (enteringEl: HTMLElement | undefined, leavingEl: HTMLElement | undefined) => {
--- a/docs/CHANGELOG.md
+++ b/docs/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+## [7.0.12](https://github.com/ionic-team/ionic-framework/compare/v7.0.11...v7.0.12) (2023-06-08)
+
+**Note:** Version bump only for package @ionic/docs
+
+
+
+
+
 ## [7.0.11](https://github.com/ionic-team/ionic-framework/compare/v7.0.9...v7.0.11) (2023-06-07)

 **Note:** Version bump only for package @ionic/docs
--- a/docs/package-lock.json
+++ b/docs/package-lock.json
@@ -1,12 +1,12 @@
 {
  "name": "@ionic/docs",
-  "version": "7.0.11",
+  "version": "7.0.12",
  "lockfileVersion": 2,
  "requires": true,
  "packages": {
    "": {
      "name": "@ionic/docs",
-      "version": "7.0.11",
+      "version": "7.0.12",
      "license": "MIT"
    }
  }
--- a/docs/package.json
+++ b/docs/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@ionic/docs",
-  "version": "7.0.11",
+  "version": "7.0.12",
  "description": "Pre-packaged API documentation for the Ionic docs.",
  "main": "core.json",
  "types": "core.d.ts",
--- a/lerna.json
+++ b/lerna.json
@@ -5,5 +5,5 @@
    "angular",
    "packages/*"
  ],
-  "version": "7.0.11"
+  "version": "7.0.12"
 }
--- a/packages/angular-server/CHANGELOG.md
+++ b/packages/angular-server/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+## [7.0.12](https://github.com/ionic-team/ionic-framework/compare/v7.0.11...v7.0.12) (2023-06-08)
+
+**Note:** Version bump only for package @ionic/angular-server
+
+
+
+
+
 ## [7.0.11](https://github.com/ionic-team/ionic-framework/compare/v7.0.9...v7.0.11) (2023-06-07)

 **Note:** Version bump only for package @ionic/angular-server
--- a/packages/angular-server/package-lock.json
+++ b/packages/angular-server/package-lock.json
@@ -1,15 +1,15 @@
 {
  "name": "@ionic/angular-server",
-  "version": "7.0.11",
+  "version": "7.0.12",
  "lockfileVersion": 2,
  "requires": true,
  "packages": {
    "": {
      "name": "@ionic/angular-server",
-      "version": "7.0.11",
+      "version": "7.0.12",
      "license": "MIT",
      "dependencies": {
-        "@ionic/core": "^7.0.11"
+        "@ionic/core": "^7.0.12"
      },
      "devDependencies": {
        "@angular-eslint/eslint-plugin": "^14.0.0",
@@ -1060,19 +1060,19 @@
      "dev": true
    },
    "node_modules/@ionic/core": {
-      "version": "7.0.10",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.0.10.tgz",
-      "integrity": "sha512-twpnJdS/1XEXISuUGqQ1x4hp24J+8Pl++7syDWLpOG7fFQk/RIYXDPA9/NPY8Fi1jUngnA6ivdSmkFSpFES07Q==",
+      "version": "7.0.12",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.0.12.tgz",
+      "integrity": "sha512-DCBrxKQ59oghBxZOWqbJihedJ9rkVpi4ka+VGclOtndvz8PbEOsPArVUDYPGI7md3SVZ0qaVelbSwqQbyHRY7g==",
      "dependencies": {
-        "@stencil/core": "^3.2.2",
+        "@stencil/core": "^3.3.1",
        "ionicons": "^7.1.0",
        "tslib": "^2.1.0"
      }
    },
    "node_modules/@ionic/core/node_modules/@stencil/core": {
-      "version": "3.2.2",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-3.2.2.tgz",
-      "integrity": "sha512-wXb9cVWL0T3cTwYLveekdTFCRGx6+9hpVDEXna+N8K8OPoW6xtFAHRLv+LjOM7k59PkA8MG3IinAfV7Y+xa0Hw==",
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-3.3.1.tgz",
+      "integrity": "sha512-I+660Oe9OMLiU+thjV1GgcI27dcvrSpF3xisHWBOU/4mzRtho3YW0cI8lSjcqyB1KirGTA6QeQ0Xif5UHqn8hw==",
      "bin": {
        "stencil": "bin/stencil"
      },
@@ -7342,19 +7342,19 @@
      "dev": true
    },
    "@ionic/core": {
-      "version": "7.0.10",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.0.10.tgz",
-      "integrity": "sha512-twpnJdS/1XEXISuUGqQ1x4hp24J+8Pl++7syDWLpOG7fFQk/RIYXDPA9/NPY8Fi1jUngnA6ivdSmkFSpFES07Q==",
+      "version": "7.0.12",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.0.12.tgz",
+      "integrity": "sha512-DCBrxKQ59oghBxZOWqbJihedJ9rkVpi4ka+VGclOtndvz8PbEOsPArVUDYPGI7md3SVZ0qaVelbSwqQbyHRY7g==",
      "requires": {
-        "@stencil/core": "^3.2.2",
+        "@stencil/core": "^3.3.1",
        "ionicons": "^7.1.0",
        "tslib": "^2.1.0"
      },
      "dependencies": {
        "@stencil/core": {
-          "version": "3.2.2",
-          "resolved": "https://registry.npmjs.org/@stencil/core/-/core-3.2.2.tgz",
-          "integrity": "sha512-wXb9cVWL0T3cTwYLveekdTFCRGx6+9hpVDEXna+N8K8OPoW6xtFAHRLv+LjOM7k59PkA8MG3IinAfV7Y+xa0Hw=="
+          "version": "3.3.1",
+          "resolved": "https://registry.npmjs.org/@stencil/core/-/core-3.3.1.tgz",
+          "integrity": "sha512-I+660Oe9OMLiU+thjV1GgcI27dcvrSpF3xisHWBOU/4mzRtho3YW0cI8lSjcqyB1KirGTA6QeQ0Xif5UHqn8hw=="
        }
      }
    },
--- a/packages/angular-server/package.json
+++ b/packages/angular-server/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@ionic/angular-server",
-  "version": "7.0.11",
+  "version": "7.0.12",
  "description": "Angular SSR Module for Ionic",
  "keywords": [
    "ionic",
@@ -61,6 +61,6 @@
  },
  "prettier": "@ionic/prettier-config",
  "dependencies": {
-    "@ionic/core": "^7.0.11"
+    "@ionic/core": "^7.0.12"
  }
 }
--- a/packages/react-router/CHANGELOG.md
+++ b/packages/react-router/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+## [7.0.12](https://github.com/ionic-team/ionic-framework/compare/v7.0.11...v7.0.12) (2023-06-08)
+
+**Note:** Version bump only for package @ionic/react-router
+
+
+
+
+
 ## [7.0.11](https://github.com/ionic-team/ionic-framework/compare/v7.0.9...v7.0.11) (2023-06-07)

 **Note:** Version bump only for package @ionic/react-router
--- a/packages/react-router/package-lock.json
+++ b/packages/react-router/package-lock.json
@@ -1,15 +1,15 @@
 {
  "name": "@ionic/react-router",
-  "version": "7.0.11",
+  "version": "7.0.12",
  "lockfileVersion": 2,
  "requires": true,
  "packages": {
    "": {
      "name": "@ionic/react-router",
-      "version": "7.0.11",
+      "version": "7.0.12",
      "license": "MIT",
      "dependencies": {
-        "@ionic/react": "^7.0.11",
+        "@ionic/react": "^7.0.12",
        "tslib": "*"
      },
      "devDependencies": {
@@ -205,11 +205,11 @@
      "dev": true
    },
    "node_modules/@ionic/core": {
-      "version": "7.0.10",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.0.10.tgz",
-      "integrity": "sha512-twpnJdS/1XEXISuUGqQ1x4hp24J+8Pl++7syDWLpOG7fFQk/RIYXDPA9/NPY8Fi1jUngnA6ivdSmkFSpFES07Q==",
+      "version": "7.0.12",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.0.12.tgz",
+      "integrity": "sha512-DCBrxKQ59oghBxZOWqbJihedJ9rkVpi4ka+VGclOtndvz8PbEOsPArVUDYPGI7md3SVZ0qaVelbSwqQbyHRY7g==",
      "dependencies": {
-        "@stencil/core": "^3.2.2",
+        "@stencil/core": "^3.3.1",
        "ionicons": "^7.1.0",
        "tslib": "^2.1.0"
      }
@@ -381,11 +381,11 @@
      }
    },
    "node_modules/@ionic/react": {
-      "version": "7.0.10",
-      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-7.0.10.tgz",
-      "integrity": "sha512-DggKOQ0JRsOSVY+YZicVhgz5gouL7APQ73kue3PsFK/OrtfeN/5om+XRkqO9bYHam/W/xVp3kpXSYcnsUICntA==",
+      "version": "7.0.12",
+      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-7.0.12.tgz",
+      "integrity": "sha512-jTGe+21ORplL3WO0KYnDrLQPaV4LuJFhUd2GMnXVOKaRGN1VAbQPmHL8LiAgdi0j98B38rD+B5sw7d2calxRZw==",
      "dependencies": {
-        "@ionic/core": "7.0.10",
+        "@ionic/core": "7.0.12",
        "ionicons": "^7.0.0",
        "tslib": "*"
      },
@@ -466,9 +466,9 @@
      }
    },
    "node_modules/@stencil/core": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-3.3.0.tgz",
-      "integrity": "sha512-+3hqJ8RmUvxz8FgvMP9lxYJdjb4EnZrkdo6ln5fUqGju62ORS5/Ch9m6OAIjlEn6CbDb5Uf1OdeMjO87DJwIAA==",
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-3.3.1.tgz",
+      "integrity": "sha512-I+660Oe9OMLiU+thjV1GgcI27dcvrSpF3xisHWBOU/4mzRtho3YW0cI8lSjcqyB1KirGTA6QeQ0Xif5UHqn8hw==",
      "bin": {
        "stencil": "bin/stencil"
      },
@@ -3643,11 +3643,11 @@
      "dev": true
    },
    "@ionic/core": {
-      "version": "7.0.10",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.0.10.tgz",
-      "integrity": "sha512-twpnJdS/1XEXISuUGqQ1x4hp24J+8Pl++7syDWLpOG7fFQk/RIYXDPA9/NPY8Fi1jUngnA6ivdSmkFSpFES07Q==",
+      "version": "7.0.12",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.0.12.tgz",
+      "integrity": "sha512-DCBrxKQ59oghBxZOWqbJihedJ9rkVpi4ka+VGclOtndvz8PbEOsPArVUDYPGI7md3SVZ0qaVelbSwqQbyHRY7g==",
      "requires": {
-        "@stencil/core": "^3.2.2",
+        "@stencil/core": "^3.3.1",
        "ionicons": "^7.1.0",
        "tslib": "^2.1.0"
      }
@@ -3749,11 +3749,11 @@
      "requires": {}
    },
    "@ionic/react": {
-      "version": "7.0.10",
-      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-7.0.10.tgz",
-      "integrity": "sha512-DggKOQ0JRsOSVY+YZicVhgz5gouL7APQ73kue3PsFK/OrtfeN/5om+XRkqO9bYHam/W/xVp3kpXSYcnsUICntA==",
+      "version": "7.0.12",
+      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-7.0.12.tgz",
+      "integrity": "sha512-jTGe+21ORplL3WO0KYnDrLQPaV4LuJFhUd2GMnXVOKaRGN1VAbQPmHL8LiAgdi0j98B38rD+B5sw7d2calxRZw==",
      "requires": {
-        "@ionic/core": "7.0.10",
+        "@ionic/core": "7.0.12",
        "ionicons": "^7.0.0",
        "tslib": "*"
      }
@@ -3807,9 +3807,9 @@
      }
    },
    "@stencil/core": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-3.3.0.tgz",
-      "integrity": "sha512-+3hqJ8RmUvxz8FgvMP9lxYJdjb4EnZrkdo6ln5fUqGju62ORS5/Ch9m6OAIjlEn6CbDb5Uf1OdeMjO87DJwIAA=="
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-3.3.1.tgz",
+      "integrity": "sha512-I+660Oe9OMLiU+thjV1GgcI27dcvrSpF3xisHWBOU/4mzRtho3YW0cI8lSjcqyB1KirGTA6QeQ0Xif5UHqn8hw=="
    },
    "@types/estree": {
      "version": "0.0.39",
--- a/packages/react-router/package.json
+++ b/packages/react-router/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@ionic/react-router",
-  "version": "7.0.11",
+  "version": "7.0.12",
  "description": "React Router wrapper for @ionic/react",
  "keywords": [
    "ionic",
@@ -37,7 +37,7 @@
    "dist/"
  ],
  "dependencies": {
-    "@ionic/react": "^7.0.11",
+    "@ionic/react": "^7.0.12",
    "tslib": "*"
  },
  "peerDependencies": {
--- a/packages/react/CHANGELOG.md
+++ b/packages/react/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+## [7.0.12](https://github.com/ionic-team/ionic-framework/compare/v7.0.11...v7.0.12) (2023-06-08)
+
+**Note:** Version bump only for package @ionic/react
+
+
+
+
+
 ## [7.0.11](https://github.com/ionic-team/ionic-framework/compare/v7.0.9...v7.0.11) (2023-06-07)

 **Note:** Version bump only for package @ionic/react
--- a/packages/react/package-lock.json
+++ b/packages/react/package-lock.json
@@ -1,15 +1,15 @@
 {
  "name": "@ionic/react",
-  "version": "7.0.11",
+  "version": "7.0.12",
  "lockfileVersion": 2,
  "requires": true,
  "packages": {
    "": {
      "name": "@ionic/react",
-      "version": "7.0.11",
+      "version": "7.0.12",
      "license": "MIT",
      "dependencies": {
-        "@ionic/core": "^7.0.11",
+        "@ionic/core": "^7.0.12",
        "ionicons": "^7.0.0",
        "tslib": "*"
      },
@@ -697,19 +697,19 @@
      "dev": true
    },
    "node_modules/@ionic/core": {
-      "version": "7.0.10",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.0.10.tgz",
-      "integrity": "sha512-twpnJdS/1XEXISuUGqQ1x4hp24J+8Pl++7syDWLpOG7fFQk/RIYXDPA9/NPY8Fi1jUngnA6ivdSmkFSpFES07Q==",
+      "version": "7.0.12",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.0.12.tgz",
+      "integrity": "sha512-DCBrxKQ59oghBxZOWqbJihedJ9rkVpi4ka+VGclOtndvz8PbEOsPArVUDYPGI7md3SVZ0qaVelbSwqQbyHRY7g==",
      "dependencies": {
-        "@stencil/core": "^3.2.2",
+        "@stencil/core": "^3.3.1",
        "ionicons": "^7.1.0",
        "tslib": "^2.1.0"
      }
    },
    "node_modules/@ionic/core/node_modules/@stencil/core": {
-      "version": "3.2.2",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-3.2.2.tgz",
-      "integrity": "sha512-wXb9cVWL0T3cTwYLveekdTFCRGx6+9hpVDEXna+N8K8OPoW6xtFAHRLv+LjOM7k59PkA8MG3IinAfV7Y+xa0Hw==",
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-3.3.1.tgz",
+      "integrity": "sha512-I+660Oe9OMLiU+thjV1GgcI27dcvrSpF3xisHWBOU/4mzRtho3YW0cI8lSjcqyB1KirGTA6QeQ0Xif5UHqn8hw==",
      "bin": {
        "stencil": "bin/stencil"
      },
@@ -11778,19 +11778,19 @@
      "dev": true
    },
    "@ionic/core": {
-      "version": "7.0.10",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.0.10.tgz",
-      "integrity": "sha512-twpnJdS/1XEXISuUGqQ1x4hp24J+8Pl++7syDWLpOG7fFQk/RIYXDPA9/NPY8Fi1jUngnA6ivdSmkFSpFES07Q==",
+      "version": "7.0.12",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.0.12.tgz",
+      "integrity": "sha512-DCBrxKQ59oghBxZOWqbJihedJ9rkVpi4ka+VGclOtndvz8PbEOsPArVUDYPGI7md3SVZ0qaVelbSwqQbyHRY7g==",
      "requires": {
-        "@stencil/core": "^3.2.2",
+        "@stencil/core": "^3.3.1",
        "ionicons": "^7.1.0",
        "tslib": "^2.1.0"
      },
      "dependencies": {
        "@stencil/core": {
-          "version": "3.2.2",
-          "resolved": "https://registry.npmjs.org/@stencil/core/-/core-3.2.2.tgz",
-          "integrity": "sha512-wXb9cVWL0T3cTwYLveekdTFCRGx6+9hpVDEXna+N8K8OPoW6xtFAHRLv+LjOM7k59PkA8MG3IinAfV7Y+xa0Hw=="
+          "version": "3.3.1",
+          "resolved": "https://registry.npmjs.org/@stencil/core/-/core-3.3.1.tgz",
+          "integrity": "sha512-I+660Oe9OMLiU+thjV1GgcI27dcvrSpF3xisHWBOU/4mzRtho3YW0cI8lSjcqyB1KirGTA6QeQ0Xif5UHqn8hw=="
        }
      }
    },
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@ionic/react",
-  "version": "7.0.11",
+  "version": "7.0.12",
  "description": "React specific wrapper for @ionic/core",
  "keywords": [
    "ionic",
@@ -41,7 +41,7 @@
    "css/"
  ],
  "dependencies": {
-    "@ionic/core": "^7.0.11",
+    "@ionic/core": "^7.0.12",
    "ionicons": "^7.0.0",
    "tslib": "*"
  },
--- a/packages/react/src/components/react-component-lib/utils/attachProps.ts
+++ b/packages/react/src/components/react-component-lib/utils/attachProps.ts
@@ -62,6 +62,17 @@ export const getClassName = (classList: DOMTokenList, newProps: any, oldProps: a
  return finalClassNames.join(' ');
 };

+/**
+ * Transforms a React event name to a browser event name.
+ */
+export const transformReactEventName = (eventNameSuffix: string) => {
+  switch (eventNameSuffix) {
+    case 'doubleclick':
+      return 'dblclick';
+  }
+  return eventNameSuffix;
+};
+
 /**
 * Checks if an event is supported in the current execution environment.
 * @license Modernizr 3.0.0pre (Custom Build) | MIT
@@ -70,7 +81,7 @@ export const isCoveredByReact = (eventNameSuffix: string) => {
  if (typeof document === 'undefined') {
    return true;
  } else {
-    const eventName = 'on' + eventNameSuffix;
+    const eventName = 'on' + transformReactEventName(eventNameSuffix);
    let isSupported = eventName in document;

    if (!isSupported) {
--- a/packages/react/test/apps/react17/package.json
+++ b/packages/react/test/apps/react17/package.json
@@ -20,7 +20,7 @@
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
-    "test": "react-scripts test",
+    "test": "react-scripts test --env=jsdom --transformIgnorePatterns 'node_modules/(?!(@ionic/react|@ionic/react-router|@ionic/core|@stencil/core|ionicons)/)'",
    "eject": "react-scripts eject",
    "sync": "sh ./scripts/sync.sh",
    "cypress": "cypress run --headless --browser chrome",
--- a/packages/react/test/apps/react18/package.json
+++ b/packages/react/test/apps/react18/package.json
@@ -20,7 +20,7 @@
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
-    "test": "react-scripts test",
+    "test": "react-scripts test --env=jsdom --transformIgnorePatterns 'node_modules/(?!(@ionic/react|@ionic/react-router|@ionic/core|@stencil/core|ionicons)/)'",
    "eject": "react-scripts eject",
    "sync": "sh ./scripts/sync.sh",
    "cypress": "cypress run --headless --browser chrome",
--- a/packages/react/test/base/src/OutputTarget.test.tsx
+++ b/packages/react/test/base/src/OutputTarget.test.tsx
@@ -0,0 +1,14 @@
+import { IonButton } from '@ionic/react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import React from 'react';
+
+test('should support onDoubleClick bindings', () => {
+  const mockFn = jest.fn();
+
+  render(<IonButton onDoubleClick={mockFn}>Click me</IonButton>);
+
+  // Simulate a double click on the button
+  fireEvent.dblClick(screen.getByText('Click me'));
+
+  expect(mockFn).toBeCalled();
+});
--- a/packages/react/test/base/src/setupTests.ts
+++ b/packages/react/test/base/src/setupTests.ts
@@ -2,13 +2,15 @@
 // allows you to do things like:
 // expect(element).toHaveTextContent(/react/i)
 // learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom/extend-expect';
+import { setupIonicReact } from '@ionic/react';
+
+setupIonicReact();

 // Mock matchmedia
-window.matchMedia = window.matchMedia || function() {
+window.matchMedia = window.matchMedia || function () {
  return {
-      matches: false,
-      addListener: function() {},
-      removeListener: function() {}
+    matches: false,
+    addListener: function () { },
+    removeListener: function () { }
  };
 };
--- a/packages/vue-router/CHANGELOG.md
+++ b/packages/vue-router/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+## [7.0.12](https://github.com/ionic-team/ionic-framework/compare/v7.0.11...v7.0.12) (2023-06-08)
+
+**Note:** Version bump only for package @ionic/vue-router
+
+
+
+
+
 ## [7.0.11](https://github.com/ionic-team/ionic-framework/compare/v7.0.9...v7.0.11) (2023-06-07)

 **Note:** Version bump only for package @ionic/vue-router
--- a/packages/vue-router/package-lock.json
+++ b/packages/vue-router/package-lock.json
@@ -1,15 +1,15 @@
 {
  "name": "@ionic/vue-router",
-  "version": "7.0.11",
+  "version": "7.0.12",
  "lockfileVersion": 2,
  "requires": true,
  "packages": {
    "": {
      "name": "@ionic/vue-router",
-      "version": "7.0.11",
+      "version": "7.0.12",
      "license": "MIT",
      "dependencies": {
-        "@ionic/vue": "^7.0.11"
+        "@ionic/vue": "^7.0.12"
      },
      "devDependencies": {
        "@ionic/eslint-config": "^0.3.0",
@@ -660,11 +660,11 @@
      "dev": true
    },
    "node_modules/@ionic/core": {
-      "version": "7.0.10",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.0.10.tgz",
-      "integrity": "sha512-twpnJdS/1XEXISuUGqQ1x4hp24J+8Pl++7syDWLpOG7fFQk/RIYXDPA9/NPY8Fi1jUngnA6ivdSmkFSpFES07Q==",
+      "version": "7.0.12",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.0.12.tgz",
+      "integrity": "sha512-DCBrxKQ59oghBxZOWqbJihedJ9rkVpi4ka+VGclOtndvz8PbEOsPArVUDYPGI7md3SVZ0qaVelbSwqQbyHRY7g==",
      "dependencies": {
-        "@stencil/core": "^3.2.2",
+        "@stencil/core": "^3.3.1",
        "ionicons": "^7.1.0",
        "tslib": "^2.1.0"
      }
@@ -851,11 +851,11 @@
      }
    },
    "node_modules/@ionic/vue": {
-      "version": "7.0.10",
-      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-7.0.10.tgz",
-      "integrity": "sha512-3e3bHGBhhS85byghSbp3U1JP24lHrNilzN4WkBgc9aBeQvwczDNTO69qpiF69fJKDAvU1OrJaAbyomrskE9F9g==",
+      "version": "7.0.12",
+      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-7.0.12.tgz",
+      "integrity": "sha512-mb5QKz047Ao9BXCShMvqBNgBfx9Y6rp4ZLKv8cJgPR7OIsQUfHxP+Z4BbDuhkrhI9C2aCkBJd3byJH4QBSiF4g==",
      "dependencies": {
-        "@ionic/core": "7.0.10",
+        "@ionic/core": "7.0.12",
        "ionicons": "^7.0.0"
      }
    },
@@ -1303,9 +1303,9 @@
      }
    },
    "node_modules/@stencil/core": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-3.3.0.tgz",
-      "integrity": "sha512-+3hqJ8RmUvxz8FgvMP9lxYJdjb4EnZrkdo6ln5fUqGju62ORS5/Ch9m6OAIjlEn6CbDb5Uf1OdeMjO87DJwIAA==",
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-3.3.1.tgz",
+      "integrity": "sha512-I+660Oe9OMLiU+thjV1GgcI27dcvrSpF3xisHWBOU/4mzRtho3YW0cI8lSjcqyB1KirGTA6QeQ0Xif5UHqn8hw==",
      "bin": {
        "stencil": "bin/stencil"
      },
@@ -6787,9 +6787,9 @@
      }
    },
    "node_modules/tslib": {
-      "version": "2.5.2",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.2.tgz",
-      "integrity": "sha512-5svOrSA2w3iGFDs1HibEVBGbDrAY82bFQ3HZ3ixB+88nsbsWQoKqDRb5UBYAUPEzbBn6dAp5gRNXglySbx1MlA=="
+      "version": "2.5.3",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.3.tgz",
+      "integrity": "sha512-mSxlJJwl3BMEQCUNnxXBU9jP4JBktcEGhURcPR6VQVlnP0FdDEsIaz0C35dXNGLyRfrATNofF0F5p2KPxQgB+w=="
    },
    "node_modules/tsutils": {
      "version": "3.21.0",
@@ -7677,11 +7677,11 @@
      "dev": true
    },
    "@ionic/core": {
-      "version": "7.0.10",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.0.10.tgz",
-      "integrity": "sha512-twpnJdS/1XEXISuUGqQ1x4hp24J+8Pl++7syDWLpOG7fFQk/RIYXDPA9/NPY8Fi1jUngnA6ivdSmkFSpFES07Q==",
+      "version": "7.0.12",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.0.12.tgz",
+      "integrity": "sha512-DCBrxKQ59oghBxZOWqbJihedJ9rkVpi4ka+VGclOtndvz8PbEOsPArVUDYPGI7md3SVZ0qaVelbSwqQbyHRY7g==",
      "requires": {
-        "@stencil/core": "^3.2.2",
+        "@stencil/core": "^3.3.1",
        "ionicons": "^7.1.0",
        "tslib": "^2.1.0"
      }
@@ -7792,11 +7792,11 @@
      "requires": {}
    },
    "@ionic/vue": {
-      "version": "7.0.10",
-      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-7.0.10.tgz",
-      "integrity": "sha512-3e3bHGBhhS85byghSbp3U1JP24lHrNilzN4WkBgc9aBeQvwczDNTO69qpiF69fJKDAvU1OrJaAbyomrskE9F9g==",
+      "version": "7.0.12",
+      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-7.0.12.tgz",
+      "integrity": "sha512-mb5QKz047Ao9BXCShMvqBNgBfx9Y6rp4ZLKv8cJgPR7OIsQUfHxP+Z4BbDuhkrhI9C2aCkBJd3byJH4QBSiF4g==",
      "requires": {
-        "@ionic/core": "7.0.10",
+        "@ionic/core": "7.0.12",
        "ionicons": "^7.0.0"
      }
    },
@@ -8155,9 +8155,9 @@
      }
    },
    "@stencil/core": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-3.3.0.tgz",
-      "integrity": "sha512-+3hqJ8RmUvxz8FgvMP9lxYJdjb4EnZrkdo6ln5fUqGju62ORS5/Ch9m6OAIjlEn6CbDb5Uf1OdeMjO87DJwIAA=="
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-3.3.1.tgz",
+      "integrity": "sha512-I+660Oe9OMLiU+thjV1GgcI27dcvrSpF3xisHWBOU/4mzRtho3YW0cI8lSjcqyB1KirGTA6QeQ0Xif5UHqn8hw=="
    },
    "@tootallnate/once": {
      "version": "2.0.0",
@@ -12183,9 +12183,9 @@
      }
    },
    "tslib": {
-      "version": "2.5.2",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.2.tgz",
-      "integrity": "sha512-5svOrSA2w3iGFDs1HibEVBGbDrAY82bFQ3HZ3ixB+88nsbsWQoKqDRb5UBYAUPEzbBn6dAp5gRNXglySbx1MlA=="
+      "version": "2.5.3",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.3.tgz",
+      "integrity": "sha512-mSxlJJwl3BMEQCUNnxXBU9jP4JBktcEGhURcPR6VQVlnP0FdDEsIaz0C35dXNGLyRfrATNofF0F5p2KPxQgB+w=="
    },
    "tsutils": {
      "version": "3.21.0",
--- a/packages/vue-router/package.json
+++ b/packages/vue-router/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@ionic/vue-router",
-  "version": "7.0.11",
+  "version": "7.0.12",
  "description": "Vue Router integration for @ionic/vue",
  "scripts": {
    "test.spec": "jest",
@@ -45,7 +45,7 @@
  },
  "homepage": "https://github.com/ionic-team/ionic#readme",
  "dependencies": {
-    "@ionic/vue": "^7.0.11"
+    "@ionic/vue": "^7.0.12"
  },
  "devDependencies": {
    "@ionic/eslint-config": "^0.3.0",
--- a/packages/vue/CHANGELOG.md
+++ b/packages/vue/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+## [7.0.12](https://github.com/ionic-team/ionic-framework/compare/v7.0.11...v7.0.12) (2023-06-08)
+
+**Note:** Version bump only for package @ionic/vue
+
+
+
+
+
 ## [7.0.11](https://github.com/ionic-team/ionic-framework/compare/v7.0.9...v7.0.11) (2023-06-07)

 **Note:** Version bump only for package @ionic/vue
--- a/packages/vue/package-lock.json
+++ b/packages/vue/package-lock.json
@@ -1,15 +1,15 @@
 {
  "name": "@ionic/vue",
-  "version": "7.0.11",
+  "version": "7.0.12",
  "lockfileVersion": 2,
  "requires": true,
  "packages": {
    "": {
      "name": "@ionic/vue",
-      "version": "7.0.11",
+      "version": "7.0.12",
      "license": "MIT",
      "dependencies": {
-        "@ionic/core": "^7.0.11",
+        "@ionic/core": "^7.0.12",
        "ionicons": "^7.0.0"
      },
      "devDependencies": {
@@ -207,11 +207,11 @@
      "dev": true
    },
    "node_modules/@ionic/core": {
-      "version": "7.0.10",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.0.10.tgz",
-      "integrity": "sha512-twpnJdS/1XEXISuUGqQ1x4hp24J+8Pl++7syDWLpOG7fFQk/RIYXDPA9/NPY8Fi1jUngnA6ivdSmkFSpFES07Q==",
+      "version": "7.0.12",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.0.12.tgz",
+      "integrity": "sha512-DCBrxKQ59oghBxZOWqbJihedJ9rkVpi4ka+VGclOtndvz8PbEOsPArVUDYPGI7md3SVZ0qaVelbSwqQbyHRY7g==",
      "dependencies": {
-        "@stencil/core": "^3.2.2",
+        "@stencil/core": "^3.3.1",
        "ionicons": "^7.1.0",
        "tslib": "^2.1.0"
      }
@@ -423,9 +423,9 @@
      }
    },
    "node_modules/@stencil/core": {
-      "version": "3.2.2",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-3.2.2.tgz",
-      "integrity": "sha512-wXb9cVWL0T3cTwYLveekdTFCRGx6+9hpVDEXna+N8K8OPoW6xtFAHRLv+LjOM7k59PkA8MG3IinAfV7Y+xa0Hw==",
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-3.3.1.tgz",
+      "integrity": "sha512-I+660Oe9OMLiU+thjV1GgcI27dcvrSpF3xisHWBOU/4mzRtho3YW0cI8lSjcqyB1KirGTA6QeQ0Xif5UHqn8hw==",
      "bin": {
        "stencil": "bin/stencil"
      },
@@ -3746,11 +3746,11 @@
      "dev": true
    },
    "@ionic/core": {
-      "version": "7.0.10",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.0.10.tgz",
-      "integrity": "sha512-twpnJdS/1XEXISuUGqQ1x4hp24J+8Pl++7syDWLpOG7fFQk/RIYXDPA9/NPY8Fi1jUngnA6ivdSmkFSpFES07Q==",
+      "version": "7.0.12",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.0.12.tgz",
+      "integrity": "sha512-DCBrxKQ59oghBxZOWqbJihedJ9rkVpi4ka+VGclOtndvz8PbEOsPArVUDYPGI7md3SVZ0qaVelbSwqQbyHRY7g==",
      "requires": {
-        "@stencil/core": "^3.2.2",
+        "@stencil/core": "^3.3.1",
        "ionicons": "^7.1.0",
        "tslib": "^2.1.0"
      },
@@ -3885,9 +3885,9 @@
      }
    },
    "@stencil/core": {
-      "version": "3.2.2",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-3.2.2.tgz",
-      "integrity": "sha512-wXb9cVWL0T3cTwYLveekdTFCRGx6+9hpVDEXna+N8K8OPoW6xtFAHRLv+LjOM7k59PkA8MG3IinAfV7Y+xa0Hw=="
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-3.3.1.tgz",
+      "integrity": "sha512-I+660Oe9OMLiU+thjV1GgcI27dcvrSpF3xisHWBOU/4mzRtho3YW0cI8lSjcqyB1KirGTA6QeQ0Xif5UHqn8hw=="
    },
    "@types/json-schema": {
      "version": "7.0.11",
--- a/packages/vue/package.json
+++ b/packages/vue/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@ionic/vue",
-  "version": "7.0.11",
+  "version": "7.0.12",
  "description": "Vue specific wrapper for @ionic/core",
  "scripts": {
    "eslint": "eslint src",
@@ -66,7 +66,7 @@
    "vue-router": "^4.0.16"
  },
  "dependencies": {
-    "@ionic/core": "^7.0.11",
+    "@ionic/core": "^7.0.12",
    "ionicons": "^7.0.0"
  },
  "vetur": {
Author	SHA1	Message	Date
Liam DeBeasi	65c94b16d5	add custom anim support to nav outlet	2023-06-09 14:37:38 -04:00
Liam DeBeasi	fb0b0ae46e	add modal sample	2023-06-09 12:39:38 -04:00
Liam DeBeasi	a3bc83a1e6	poc using animations with any lib	2023-06-09 09:27:55 -04:00
Sean Perkins	3e191df3dd	fix(react): onDoubleClick fires on components (#27611 ) Issue number: Resolves #21320 --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> `onDoubleClick` bindings on Ionic components do not fire when the element is double clicked. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - `onDoubleClick` fires on Ionic components - Fixed the unit testing set-up for the react test apps ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change, please describe the impact and migration path for existing applications below. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. -->	2023-06-08 18:35:25 +00:00
Liam DeBeasi	1d4ab4e500	merge release-7.0.12 Release 7.0.12	2023-06-08 14:35:07 -04:00
ionitron	7fa2b3401c	chore(): update package lock files	2023-06-08 17:38:31 +00:00
ionitron	0eff7d59c7	v7.0.12	2023-06-08 17:38:19 +00:00
Michael Rahn	92c55452fd	fix(refresher): scroll styles are reset when using non-native refresher (#27602 ) Issue number: resolves #27601 --------- ## What is the current behavior? The current behavior restores overflow styles while moving (within the setCSS function). ## What is the new behavior? Overflow styles are restored when refresher gesture ends. ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change, please describe the impact and migration path for existing applications below. --> Honestly, I don't know exactly. From code perspective I would say 'Yes', but I can't get the impact of the change. Ionic Team edit: There are no changes to the public API, and this is fixing a behavior that used to work so there are no breaking changes. ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> --------- Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>	2023-06-07 20:37:25 +00:00
Maria Hutt	9d459bdc88	test(segment): undo skip for keyboard navigable (#27574 ) Issue number: internal --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> The keyboard navigation was being skipped due to flakiness. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> The keyboard navigation is no longer being skipped. - Using the `pageUtils` to Tab - Verify the buttons are visible before keyboard press ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change, please describe the impact and migration path for existing applications below. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> The flaky test would occur due to the keyboard being pressed before the buttons have loaded in. Weirdly, this only happens when testing "Mobile Chrome" but works fine outside testing. ![Screenshot 2023-06-02 at 11 51 41 AM](https://github.com/ionic-team/ionic-framework/assets/13530427/c514472d-afce-4c90-874a-edabaa56048f) I would recommend adding `only` to the test and using `npm run test.e2e segment -- --repeat-each 50` to verify that it works.	2023-06-07 15:07:45 +00:00
Amanda Johnston	0e7d80cdbd	test(back-button): remove unneeded navigation test (#27590 ) Issue number: N/A --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> The `navigation` test for `ion-back-button` errors out in the console and doesn't display when attempting to host it locally. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> Test removed, since it had no E2E file and the functionality appears to be redundant with the tests for `ion-nav`. ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change, please describe the impact and migration path for existing applications below. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. -->	2023-06-07 14:23:11 +00:00
Liam DeBeasi	038c8f7ad1	merge release-7.0.11 Release 7.0.11	2023-06-07 09:20:32 -04:00
Liam DeBeasi	d68a7d1c11	merge release-7.0.11 (#27615 )	2023-06-07 09:11:06 -04:00
Liam DeBeasi	96b7222abf	chore: clean up changelog	2023-06-07 08:43:06 -04:00
ionitron	ffe1f8db72	chore(): update package lock files	2023-06-07 12:32:44 +00:00