diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4e98e25457..2afdbc374a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,20 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.1.8](https://github.com/ionic-team/ionic-framework/compare/v6.1.7...v6.1.8) (2022-06-01)
+
+
+### Bug Fixes
+
+* **all:** improve compatibility with vite ([#25381](https://github.com/ionic-team/ionic-framework/issues/25381)) ([d83bcd2](https://github.com/ionic-team/ionic-framework/commit/d83bcd2b7f9937550008f995ff91517777584373)), closes [#23823](https://github.com/ionic-team/ionic-framework/issues/23823)
+* **item-sliding:** swiping inside of virtual scroller now prevents scrolling ([#25345](https://github.com/ionic-team/ionic-framework/issues/25345)) ([5a1a5f6](https://github.com/ionic-team/ionic-framework/commit/5a1a5f6b4c2ab4059158986e907fff45d03be753))
+* **range:** dragging knob no longer scrolls page ([#25343](https://github.com/ionic-team/ionic-framework/issues/25343)) ([0b92dff](https://github.com/ionic-team/ionic-framework/commit/0b92dffa92c05705ff83518c10608e3dc3651d51)), closes [#19004](https://github.com/ionic-team/ionic-framework/issues/19004)
+* **react:** present controller overlays in React 18 ([#25361](https://github.com/ionic-team/ionic-framework/issues/25361)) ([01c40ea](https://github.com/ionic-team/ionic-framework/commit/01c40eae5509f1c150d79269a7a75c05112fa343)), closes [#25247](https://github.com/ionic-team/ionic-framework/issues/25247)
+
+
+
+
+
 ## [6.1.7](https://github.com/ionic-team/ionic-framework/compare/v6.1.6...v6.1.7) (2022-05-26)
 
 
diff --git a/angular/CHANGELOG.md b/angular/CHANGELOG.md
index f0cb6b427c..f691f92c0b 100644
--- a/angular/CHANGELOG.md
+++ b/angular/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.
 
+## [6.1.8](https://github.com/ionic-team/ionic/compare/v6.1.7...v6.1.8) (2022-06-01)
+
+**Note:** Version bump only for package @ionic/angular
+
+
+
+
+
 ## [6.1.7](https://github.com/ionic-team/ionic/compare/v6.1.6...v6.1.7) (2022-05-26)
 
 
diff --git a/angular/package-lock.json b/angular/package-lock.json
index bce7f357d8..50435cc121 100644
--- a/angular/package-lock.json
+++ b/angular/package-lock.json
@@ -1,15 +1,15 @@
 {
   "name": "@ionic/angular",
-  "version": "6.1.7",
+  "version": "6.1.8",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/angular",
-      "version": "6.1.7",
+      "version": "6.1.8",
       "license": "MIT",
       "dependencies": {
-        "@ionic/core": "^6.1.7",
+        "@ionic/core": "^6.1.8",
         "jsonc-parser": "^3.0.0",
         "tslib": "^2.0.0"
       },
@@ -1023,12 +1023,12 @@
       "dev": true
     },
     "node_modules/@ionic/core": {
-      "version": "6.1.7",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.1.7.tgz",
-      "integrity": "sha512-CUbH7xtKcPejHTyMvvUJZq4GIyLbL2YflzFH+mad1PoLN4TLwFTTKTDB1oeFNqwnTzaByeBvhEWSayxCbLgvjQ==",
+      "version": "6.1.8",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.1.8.tgz",
+      "integrity": "sha512-EMYebwmS4UogpNrTyuCgIETKwE7XA93V7X3YacK2UArm1Xf98w3FsnfAYeMaUqY93bDxih/CSKm3NpUhVWP44A==",
       "dependencies": {
-        "@stencil/core": "^2.14.2",
-        "ionicons": "^6.0.0",
+        "@stencil/core": "^2.16.0",
+        "ionicons": "^6.0.2",
         "tslib": "^2.1.0"
       }
     },
@@ -1222,9 +1222,9 @@
       }
     },
     "node_modules/@stencil/core": {
-      "version": "2.15.1",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.15.1.tgz",
-      "integrity": "sha512-NYjRwQnjzscyFfqK+iIwRdr/dgYn33u6KE7kyQWdi7xsCkqMHalXYgJlN/QBQ9PN3qXmXKeBrJNG8EkNdCbK5g==",
+      "version": "2.16.0",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.16.0.tgz",
+      "integrity": "sha512-oKxPYxpH1no0oMFSf8EesuFBcn9hVpoqrpiS2WH0H50RKKL8hhKoxDfn/cNeD12L0Aj7kf6nNtexIllmkYG6lw==",
       "bin": {
         "stencil": "bin/stencil"
       },
@@ -3557,23 +3557,11 @@
       }
     },
     "node_modules/ionicons": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-6.0.0.tgz",
-      "integrity": "sha512-p83W1T8jZUlllHAjuIWaDQbI36OYqdrwcf8MhYbKW7+9rjGlCMP9+5OaR0W7tl0QfM004uAiy/zkc7HTpDNKgA==",
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-6.0.2.tgz",
+      "integrity": "sha512-AyKfFaUKVoBz4eB8XkU7H1R5HFnVsgq5ijqSdbXC0lES9PDK/J6LUQz6XUJq0mVVQF5k9kczSPOLMW3mszG0mQ==",
       "dependencies": {
-        "@stencil/core": "~2.10.0"
-      }
-    },
-    "node_modules/ionicons/node_modules/@stencil/core": {
-      "version": "2.10.0",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.10.0.tgz",
-      "integrity": "sha512-15rWMTPQ/sp0lSV82HVCXkIya3QLN+uBl7pqK4JnTrp4HiLrzLmNbWjbvgCs55gw0lULbCIGbRIEsFz+Pe/Q+A==",
-      "bin": {
-        "stencil": "bin/stencil"
-      },
-      "engines": {
-        "node": ">=12.10.0",
-        "npm": ">=6.0.0"
+        "@stencil/core": "~2.16.0"
       }
     },
     "node_modules/is-bigint": {
@@ -7951,12 +7939,12 @@
       "dev": true
     },
     "@ionic/core": {
-      "version": "6.1.7",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.1.7.tgz",
-      "integrity": "sha512-CUbH7xtKcPejHTyMvvUJZq4GIyLbL2YflzFH+mad1PoLN4TLwFTTKTDB1oeFNqwnTzaByeBvhEWSayxCbLgvjQ==",
+      "version": "6.1.8",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.1.8.tgz",
+      "integrity": "sha512-EMYebwmS4UogpNrTyuCgIETKwE7XA93V7X3YacK2UArm1Xf98w3FsnfAYeMaUqY93bDxih/CSKm3NpUhVWP44A==",
       "requires": {
-        "@stencil/core": "^2.14.2",
-        "ionicons": "^6.0.0",
+        "@stencil/core": "^2.16.0",
+        "ionicons": "^6.0.2",
         "tslib": "^2.1.0"
       }
     },
@@ -8104,9 +8092,9 @@
       }
     },
     "@stencil/core": {
-      "version": "2.15.1",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.15.1.tgz",
-      "integrity": "sha512-NYjRwQnjzscyFfqK+iIwRdr/dgYn33u6KE7kyQWdi7xsCkqMHalXYgJlN/QBQ9PN3qXmXKeBrJNG8EkNdCbK5g=="
+      "version": "2.16.0",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.16.0.tgz",
+      "integrity": "sha512-oKxPYxpH1no0oMFSf8EesuFBcn9hVpoqrpiS2WH0H50RKKL8hhKoxDfn/cNeD12L0Aj7kf6nNtexIllmkYG6lw=="
     },
     "@types/estree": {
       "version": "0.0.39",
@@ -9811,18 +9799,11 @@
       }
     },
     "ionicons": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-6.0.0.tgz",
-      "integrity": "sha512-p83W1T8jZUlllHAjuIWaDQbI36OYqdrwcf8MhYbKW7+9rjGlCMP9+5OaR0W7tl0QfM004uAiy/zkc7HTpDNKgA==",
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-6.0.2.tgz",
+      "integrity": "sha512-AyKfFaUKVoBz4eB8XkU7H1R5HFnVsgq5ijqSdbXC0lES9PDK/J6LUQz6XUJq0mVVQF5k9kczSPOLMW3mszG0mQ==",
       "requires": {
-        "@stencil/core": "~2.10.0"
-      },
-      "dependencies": {
-        "@stencil/core": {
-          "version": "2.10.0",
-          "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.10.0.tgz",
-          "integrity": "sha512-15rWMTPQ/sp0lSV82HVCXkIya3QLN+uBl7pqK4JnTrp4HiLrzLmNbWjbvgCs55gw0lULbCIGbRIEsFz+Pe/Q+A=="
-        }
+        "@stencil/core": "~2.16.0"
       }
     },
     "is-bigint": {
diff --git a/angular/package.json b/angular/package.json
index 2563918ad5..494ae06499 100644
--- a/angular/package.json
+++ b/angular/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/angular",
-  "version": "6.1.7",
+  "version": "6.1.8",
   "description": "Angular specific wrappers for @ionic/core",
   "keywords": [
     "ionic",
@@ -44,7 +44,7 @@
     "validate": "npm i && npm run lint && npm run test && npm run build"
   },
   "dependencies": {
-    "@ionic/core": "^6.1.7",
+    "@ionic/core": "^6.1.8",
     "jsonc-parser": "^3.0.0",
     "tslib": "^2.0.0"
   },
diff --git a/core/CHANGELOG.md b/core/CHANGELOG.md
index f7682576ba..c37fd76247 100644
--- a/core/CHANGELOG.md
+++ b/core/CHANGELOG.md
@@ -3,6 +3,19 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.1.8](https://github.com/ionic-team/ionic/compare/v6.1.7...v6.1.8) (2022-06-01)
+
+
+### Bug Fixes
+
+* **all:** improve compatibility with vite ([#25381](https://github.com/ionic-team/ionic/issues/25381)) ([d83bcd2](https://github.com/ionic-team/ionic/commit/d83bcd2b7f9937550008f995ff91517777584373)), closes [#23823](https://github.com/ionic-team/ionic/issues/23823)
+* **item-sliding:** swiping inside of virtual scroller now prevents scrolling ([#25345](https://github.com/ionic-team/ionic/issues/25345)) ([5a1a5f6](https://github.com/ionic-team/ionic/commit/5a1a5f6b4c2ab4059158986e907fff45d03be753))
+* **range:** dragging knob no longer scrolls page ([#25343](https://github.com/ionic-team/ionic/issues/25343)) ([0b92dff](https://github.com/ionic-team/ionic/commit/0b92dffa92c05705ff83518c10608e3dc3651d51)), closes [#19004](https://github.com/ionic-team/ionic/issues/19004)
+
+
+
+
+
 ## [6.1.7](https://github.com/ionic-team/ionic/compare/v6.1.6...v6.1.7) (2022-05-26)
 
 
diff --git a/core/package-lock.json b/core/package-lock.json
index a57bddb5c5..da782c93cb 100644
--- a/core/package-lock.json
+++ b/core/package-lock.json
@@ -1,16 +1,16 @@
 {
   "name": "@ionic/core",
-  "version": "6.1.7",
+  "version": "6.1.8",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/core",
-      "version": "6.1.7",
+      "version": "6.1.8",
       "license": "MIT",
       "dependencies": {
-        "@stencil/core": "^2.14.2",
-        "ionicons": "^6.0.0",
+        "@stencil/core": "^2.16.0",
+        "ionicons": "^6.0.2",
         "tslib": "^2.1.0"
       },
       "devDependencies": {
@@ -2537,9 +2537,9 @@
       }
     },
     "node_modules/@stencil/core": {
-      "version": "2.14.2",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.14.2.tgz",
-      "integrity": "sha512-NMC5Xi8sPFJxaO4rz6CbMHuD6PteE/RJWtjrbkusmpjKRtMXkfZJPIgOrleZ4xO+vXcNyL535Ru7vUADqEsTiQ==",
+      "version": "2.16.0",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.16.0.tgz",
+      "integrity": "sha512-oKxPYxpH1no0oMFSf8EesuFBcn9hVpoqrpiS2WH0H50RKKL8hhKoxDfn/cNeD12L0Aj7kf6nNtexIllmkYG6lw==",
       "bin": {
         "stencil": "bin/stencil"
       },
@@ -8286,23 +8286,11 @@
       }
     },
     "node_modules/ionicons": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-6.0.0.tgz",
-      "integrity": "sha512-p83W1T8jZUlllHAjuIWaDQbI36OYqdrwcf8MhYbKW7+9rjGlCMP9+5OaR0W7tl0QfM004uAiy/zkc7HTpDNKgA==",
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-6.0.2.tgz",
+      "integrity": "sha512-AyKfFaUKVoBz4eB8XkU7H1R5HFnVsgq5ijqSdbXC0lES9PDK/J6LUQz6XUJq0mVVQF5k9kczSPOLMW3mszG0mQ==",
       "dependencies": {
-        "@stencil/core": "~2.10.0"
-      }
-    },
-    "node_modules/ionicons/node_modules/@stencil/core": {
-      "version": "2.10.0",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.10.0.tgz",
-      "integrity": "sha512-15rWMTPQ/sp0lSV82HVCXkIya3QLN+uBl7pqK4JnTrp4HiLrzLmNbWjbvgCs55gw0lULbCIGbRIEsFz+Pe/Q+A==",
-      "bin": {
-        "stencil": "bin/stencil"
-      },
-      "engines": {
-        "node": ">=12.10.0",
-        "npm": ">=6.0.0"
+        "@stencil/core": "~2.16.0"
       }
     },
     "node_modules/ip": {
@@ -19597,9 +19585,9 @@
       "dev": true
     },
     "@stencil/core": {
-      "version": "2.14.2",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.14.2.tgz",
-      "integrity": "sha512-NMC5Xi8sPFJxaO4rz6CbMHuD6PteE/RJWtjrbkusmpjKRtMXkfZJPIgOrleZ4xO+vXcNyL535Ru7vUADqEsTiQ=="
+      "version": "2.16.0",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.16.0.tgz",
+      "integrity": "sha512-oKxPYxpH1no0oMFSf8EesuFBcn9hVpoqrpiS2WH0H50RKKL8hhKoxDfn/cNeD12L0Aj7kf6nNtexIllmkYG6lw=="
     },
     "@stencil/react-output-target": {
       "version": "0.2.1",
@@ -23970,18 +23958,11 @@
       }
     },
     "ionicons": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-6.0.0.tgz",
-      "integrity": "sha512-p83W1T8jZUlllHAjuIWaDQbI36OYqdrwcf8MhYbKW7+9rjGlCMP9+5OaR0W7tl0QfM004uAiy/zkc7HTpDNKgA==",
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-6.0.2.tgz",
+      "integrity": "sha512-AyKfFaUKVoBz4eB8XkU7H1R5HFnVsgq5ijqSdbXC0lES9PDK/J6LUQz6XUJq0mVVQF5k9kczSPOLMW3mszG0mQ==",
       "requires": {
-        "@stencil/core": "~2.10.0"
-      },
-      "dependencies": {
-        "@stencil/core": {
-          "version": "2.10.0",
-          "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.10.0.tgz",
-          "integrity": "sha512-15rWMTPQ/sp0lSV82HVCXkIya3QLN+uBl7pqK4JnTrp4HiLrzLmNbWjbvgCs55gw0lULbCIGbRIEsFz+Pe/Q+A=="
-        }
+        "@stencil/core": "~2.16.0"
       }
     },
     "ip": {
diff --git a/core/package.json b/core/package.json
index b075592df8..b31c0bad96 100644
--- a/core/package.json
+++ b/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/core",
-  "version": "6.1.7",
+  "version": "6.1.8",
   "description": "Base components for Ionic",
   "keywords": [
     "ionic",
@@ -31,8 +31,8 @@
     "loader/"
   ],
   "dependencies": {
-    "@stencil/core": "^2.14.2",
-    "ionicons": "^6.0.0",
+    "@stencil/core": "^2.16.0",
+    "ionicons": "^6.0.2",
     "tslib": "^2.1.0"
   },
   "devDependencies": {
diff --git a/core/src/components.d.ts b/core/src/components.d.ts
index 5f52e20379..e131af76b9 100644
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
@@ -3049,6 +3049,194 @@ export namespace Components {
         "renderItem"?: (item: any, index: number) => any;
     }
 }
+export interface IonAccordionGroupCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLIonAccordionGroupElement;
+}
+export interface IonActionSheetCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLIonActionSheetElement;
+}
+export interface IonAlertCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLIonAlertElement;
+}
+export interface IonBackdropCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLIonBackdropElement;
+}
+export interface IonBreadcrumbCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLIonBreadcrumbElement;
+}
+export interface IonBreadcrumbsCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLIonBreadcrumbsElement;
+}
+export interface IonButtonCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLIonButtonElement;
+}
+export interface IonCheckboxCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLIonCheckboxElement;
+}
+export interface IonContentCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLIonContentElement;
+}
+export interface IonDatetimeCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLIonDatetimeElement;
+}
+export interface IonFabButtonCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLIonFabButtonElement;
+}
+export interface IonImgCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLIonImgElement;
+}
+export interface IonInfiniteScrollCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLIonInfiniteScrollElement;
+}
+export interface IonInputCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLIonInputElement;
+}
+export interface IonItemOptionsCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLIonItemOptionsElement;
+}
+export interface IonItemSlidingCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLIonItemSlidingElement;
+}
+export interface IonLabelCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLIonLabelElement;
+}
+export interface IonLoadingCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLIonLoadingElement;
+}
+export interface IonMenuCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLIonMenuElement;
+}
+export interface IonModalCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLIonModalElement;
+}
+export interface IonNavCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLIonNavElement;
+}
+export interface IonPickerCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLIonPickerElement;
+}
+export interface IonPickerColumnCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLIonPickerColumnElement;
+}
+export interface IonPickerColumnInternalCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLIonPickerColumnInternalElement;
+}
+export interface IonPickerInternalCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLIonPickerInternalElement;
+}
+export interface IonPopoverCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLIonPopoverElement;
+}
+export interface IonRadioCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLIonRadioElement;
+}
+export interface IonRadioGroupCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLIonRadioGroupElement;
+}
+export interface IonRangeCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLIonRangeElement;
+}
+export interface IonRefresherCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLIonRefresherElement;
+}
+export interface IonReorderGroupCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLIonReorderGroupElement;
+}
+export interface IonRouteCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLIonRouteElement;
+}
+export interface IonRouteRedirectCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLIonRouteRedirectElement;
+}
+export interface IonRouterCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLIonRouterElement;
+}
+export interface IonRouterOutletCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLIonRouterOutletElement;
+}
+export interface IonSearchbarCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLIonSearchbarElement;
+}
+export interface IonSegmentCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLIonSegmentElement;
+}
+export interface IonSelectCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLIonSelectElement;
+}
+export interface IonSlidesCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLIonSlidesElement;
+}
+export interface IonSplitPaneCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLIonSplitPaneElement;
+}
+export interface IonTabBarCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLIonTabBarElement;
+}
+export interface IonTabButtonCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLIonTabButtonElement;
+}
+export interface IonTabsCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLIonTabsElement;
+}
+export interface IonTextareaCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLIonTextareaElement;
+}
+export interface IonTitleCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLIonTitleElement;
+}
+export interface IonToastCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLIonToastElement;
+}
+export interface IonToggleCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLIonToggleElement;
+}
 declare global {
     interface HTMLIonAccordionElement extends Components.IonAccordion, HTMLStencilElement {
     }
@@ -3755,7 +3943,7 @@ declare namespace LocalJSX {
         /**
           * Emitted when the value property has changed.
          */
-        "onIonChange"?: (event: CustomEvent<AccordionGroupChangeEventDetail>) => void;
+        "onIonChange"?: (event: IonAccordionGroupCustomEvent<AccordionGroupChangeEventDetail>) => void;
         /**
           * If `true`, the accordion group cannot be interacted with, but does not alter the opacity.
          */
@@ -3809,19 +3997,19 @@ declare namespace LocalJSX {
         /**
           * Emitted after the alert has dismissed.
          */
-        "onIonActionSheetDidDismiss"?: (event: CustomEvent<OverlayEventDetail>) => void;
+        "onIonActionSheetDidDismiss"?: (event: IonActionSheetCustomEvent<OverlayEventDetail>) => void;
         /**
           * Emitted after the alert has presented.
          */
-        "onIonActionSheetDidPresent"?: (event: CustomEvent<void>) => void;
+        "onIonActionSheetDidPresent"?: (event: IonActionSheetCustomEvent<void>) => void;
         /**
           * Emitted before the alert has dismissed.
          */
-        "onIonActionSheetWillDismiss"?: (event: CustomEvent<OverlayEventDetail>) => void;
+        "onIonActionSheetWillDismiss"?: (event: IonActionSheetCustomEvent<OverlayEventDetail>) => void;
         /**
           * Emitted before the alert has presented.
          */
-        "onIonActionSheetWillPresent"?: (event: CustomEvent<void>) => void;
+        "onIonActionSheetWillPresent"?: (event: IonActionSheetCustomEvent<void>) => void;
         "overlayIndex": number;
         /**
           * Subtitle for the action sheet.
@@ -3884,19 +4072,19 @@ declare namespace LocalJSX {
         /**
           * Emitted after the alert has dismissed.
          */
-        "onIonAlertDidDismiss"?: (event: CustomEvent<OverlayEventDetail>) => void;
+        "onIonAlertDidDismiss"?: (event: IonAlertCustomEvent<OverlayEventDetail>) => void;
         /**
           * Emitted after the alert has presented.
          */
-        "onIonAlertDidPresent"?: (event: CustomEvent<void>) => void;
+        "onIonAlertDidPresent"?: (event: IonAlertCustomEvent<void>) => void;
         /**
           * Emitted before the alert has dismissed.
          */
-        "onIonAlertWillDismiss"?: (event: CustomEvent<OverlayEventDetail>) => void;
+        "onIonAlertWillDismiss"?: (event: IonAlertCustomEvent<OverlayEventDetail>) => void;
         /**
           * Emitted before the alert has presented.
          */
-        "onIonAlertWillPresent"?: (event: CustomEvent<void>) => void;
+        "onIonAlertWillPresent"?: (event: IonAlertCustomEvent<void>) => void;
         "overlayIndex": number;
         /**
           * The subtitle in the heading of the alert. Displayed under the title.
@@ -3949,7 +4137,7 @@ declare namespace LocalJSX {
         /**
           * Emitted when the backdrop is tapped.
          */
-        "onIonBackdropTap"?: (event: CustomEvent<void>) => void;
+        "onIonBackdropTap"?: (event: IonBackdropCustomEvent<void>) => void;
         /**
           * If `true`, the backdrop will stop propagation on tap.
          */
@@ -4003,15 +4191,15 @@ declare namespace LocalJSX {
         /**
           * Emitted when the collapsed indicator is clicked on. `ion-breadcrumbs` will listen for this and emit ionCollapsedClick. Normally we could just emit this as `ionCollapsedClick` and let the event bubble to `ion-breadcrumbs`, but if the event custom event is not set on `ion-breadcrumbs`, TypeScript will throw an error in user applications.
          */
-        "onCollapsedClick"?: (event: CustomEvent<BreadcrumbCollapsedClickEventDetail>) => void;
+        "onCollapsedClick"?: (event: IonBreadcrumbCustomEvent<BreadcrumbCollapsedClickEventDetail>) => void;
         /**
           * Emitted when the breadcrumb loses focus.
          */
-        "onIonBlur"?: (event: CustomEvent<void>) => void;
+        "onIonBlur"?: (event: IonBreadcrumbCustomEvent<void>) => void;
         /**
           * Emitted when the breadcrumb has focus.
          */
-        "onIonFocus"?: (event: CustomEvent<void>) => void;
+        "onIonFocus"?: (event: IonBreadcrumbCustomEvent<void>) => void;
         /**
           * Specifies the relationship of the target object to the link object. The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).
          */
@@ -4058,7 +4246,7 @@ declare namespace LocalJSX {
         /**
           * Emitted when the collapsed indicator is clicked on.
          */
-        "onIonCollapsedClick"?: (event: CustomEvent<BreadcrumbCollapsedClickEventDetail>) => void;
+        "onIonCollapsedClick"?: (event: IonBreadcrumbsCustomEvent<BreadcrumbCollapsedClickEventDetail>) => void;
     }
     interface IonButton {
         /**
@@ -4096,11 +4284,11 @@ declare namespace LocalJSX {
         /**
           * Emitted when the button loses focus.
          */
-        "onIonBlur"?: (event: CustomEvent<void>) => void;
+        "onIonBlur"?: (event: IonButtonCustomEvent<void>) => void;
         /**
           * Emitted when the button has focus.
          */
-        "onIonFocus"?: (event: CustomEvent<void>) => void;
+        "onIonFocus"?: (event: IonButtonCustomEvent<void>) => void;
         /**
           * Specifies the relationship of the target object to the link object. The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).
          */
@@ -4254,19 +4442,19 @@ declare namespace LocalJSX {
         /**
           * Emitted when the checkbox loses focus.
          */
-        "onIonBlur"?: (event: CustomEvent<void>) => void;
+        "onIonBlur"?: (event: IonCheckboxCustomEvent<void>) => void;
         /**
           * Emitted when the checked property has changed.
          */
-        "onIonChange"?: (event: CustomEvent<CheckboxChangeEventDetail>) => void;
+        "onIonChange"?: (event: IonCheckboxCustomEvent<CheckboxChangeEventDetail>) => void;
         /**
           * Emitted when the checkbox has focus.
          */
-        "onIonFocus"?: (event: CustomEvent<void>) => void;
+        "onIonFocus"?: (event: IonCheckboxCustomEvent<void>) => void;
         /**
           * Emitted when the styles change.
          */
-        "onIonStyle"?: (event: CustomEvent<StyleEventDetail>) => void;
+        "onIonStyle"?: (event: IonCheckboxCustomEvent<StyleEventDetail>) => void;
         /**
           * The value of the checkbox does not mean if it's checked or not, use the `checked` property for that.  The value of a checkbox is analogous to the value of an `<input type="checkbox">`, it's only used when the checkbox participates in a native `<form>`.
          */
@@ -4404,15 +4592,15 @@ declare namespace LocalJSX {
         /**
           * Emitted while scrolling. This event is disabled by default. Set `scrollEvents` to `true` to enable.
          */
-        "onIonScroll"?: (event: CustomEvent<ScrollDetail>) => void;
+        "onIonScroll"?: (event: IonContentCustomEvent<ScrollDetail>) => void;
         /**
           * Emitted when the scroll has ended. This event is disabled by default. Set `scrollEvents` to `true` to enable.
          */
-        "onIonScrollEnd"?: (event: CustomEvent<ScrollBaseDetail>) => void;
+        "onIonScrollEnd"?: (event: IonContentCustomEvent<ScrollBaseDetail>) => void;
         /**
           * Emitted when the scroll has started. This event is disabled by default. Set `scrollEvents` to `true` to enable.
          */
-        "onIonScrollStart"?: (event: CustomEvent<ScrollBaseDetail>) => void;
+        "onIonScrollStart"?: (event: IonContentCustomEvent<ScrollBaseDetail>) => void;
         /**
           * Because of performance reasons, ionScroll events are disabled by default, in order to enable them and start listening from (ionScroll), set this property to `true`.
          */
@@ -4498,23 +4686,23 @@ declare namespace LocalJSX {
         /**
           * Emitted when the datetime loses focus.
          */
-        "onIonBlur"?: (event: CustomEvent<void>) => void;
+        "onIonBlur"?: (event: IonDatetimeCustomEvent<void>) => void;
         /**
           * Emitted when the datetime selection was cancelled.
          */
-        "onIonCancel"?: (event: CustomEvent<void>) => void;
+        "onIonCancel"?: (event: IonDatetimeCustomEvent<void>) => void;
         /**
           * Emitted when the value (selected date) has changed.
          */
-        "onIonChange"?: (event: CustomEvent<DatetimeChangeEventDetail>) => void;
+        "onIonChange"?: (event: IonDatetimeCustomEvent<DatetimeChangeEventDetail>) => void;
         /**
           * Emitted when the datetime has focus.
          */
-        "onIonFocus"?: (event: CustomEvent<void>) => void;
+        "onIonFocus"?: (event: IonDatetimeCustomEvent<void>) => void;
         /**
           * Emitted when the styles change.
          */
-        "onIonStyle"?: (event: CustomEvent<StyleEventDetail>) => void;
+        "onIonStyle"?: (event: IonDatetimeCustomEvent<StyleEventDetail>) => void;
         /**
           * Which values you want to select. `'date'` will show a calendar picker to select the month, day, and year. `'time'` will show a time picker to select the hour, minute, and (optionally) AM/PM. `'date-time'` will show the date picker first and time picker second. `'time-date'` will show the time picker first and date picker second.
          */
@@ -4602,11 +4790,11 @@ declare namespace LocalJSX {
         /**
           * Emitted when the button loses focus.
          */
-        "onIonBlur"?: (event: CustomEvent<void>) => void;
+        "onIonBlur"?: (event: IonFabButtonCustomEvent<void>) => void;
         /**
           * Emitted when the button has focus.
          */
-        "onIonFocus"?: (event: CustomEvent<void>) => void;
+        "onIonFocus"?: (event: IonFabButtonCustomEvent<void>) => void;
         /**
           * Specifies the relationship of the target object to the link object. The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).
          */
@@ -4692,15 +4880,15 @@ declare namespace LocalJSX {
         /**
           * Emitted when the img fails to load
          */
-        "onIonError"?: (event: CustomEvent<void>) => void;
+        "onIonError"?: (event: IonImgCustomEvent<void>) => void;
         /**
           * Emitted when the image has finished loading
          */
-        "onIonImgDidLoad"?: (event: CustomEvent<void>) => void;
+        "onIonImgDidLoad"?: (event: IonImgCustomEvent<void>) => void;
         /**
           * Emitted when the img src has been set
          */
-        "onIonImgWillLoad"?: (event: CustomEvent<void>) => void;
+        "onIonImgWillLoad"?: (event: IonImgCustomEvent<void>) => void;
         /**
           * The image URL. This attribute is mandatory for the `<img>` element.
          */
@@ -4714,7 +4902,7 @@ declare namespace LocalJSX {
         /**
           * Emitted when the scroll reaches the threshold distance. From within your infinite handler, you must call the infinite scroll's `complete()` method when your async operation has completed.
          */
-        "onIonInfinite"?: (event: CustomEvent<void>) => void;
+        "onIonInfinite"?: (event: IonInfiniteScrollCustomEvent<void>) => void;
         /**
           * The position of the infinite scroll element. The value can be either `top` or `bottom`.
          */
@@ -4818,23 +5006,23 @@ declare namespace LocalJSX {
         /**
           * Emitted when the input loses focus.
          */
-        "onIonBlur"?: (event: CustomEvent<FocusEvent>) => void;
+        "onIonBlur"?: (event: IonInputCustomEvent<FocusEvent>) => void;
         /**
           * Emitted when the value has changed.
          */
-        "onIonChange"?: (event: CustomEvent<InputChangeEventDetail>) => void;
+        "onIonChange"?: (event: IonInputCustomEvent<InputChangeEventDetail>) => void;
         /**
           * Emitted when the input has focus.
          */
-        "onIonFocus"?: (event: CustomEvent<FocusEvent>) => void;
+        "onIonFocus"?: (event: IonInputCustomEvent<FocusEvent>) => void;
         /**
           * Emitted when a keyboard input occurred.
          */
-        "onIonInput"?: (event: CustomEvent<InputEvent>) => void;
+        "onIonInput"?: (event: IonInputCustomEvent<InputEvent>) => void;
         /**
           * Emitted when the styles change.
          */
-        "onIonStyle"?: (event: CustomEvent<StyleEventDetail>) => void;
+        "onIonStyle"?: (event: IonInputCustomEvent<StyleEventDetail>) => void;
         /**
           * A regular expression that the value is checked against. The pattern must match the entire value, not just some subset. Use the title attribute to describe the pattern to help the user. This attribute applies when the value of the type attribute is `"text"`, `"search"`, `"tel"`, `"url"`, `"email"`, `"date"`, or `"password"`, otherwise it is ignored. When the type attribute is `"date"`, `pattern` will only be used in browsers that do not support the `"date"` input type natively. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date for more information.
          */
@@ -5004,7 +5192,7 @@ declare namespace LocalJSX {
         /**
           * Emitted when the item has been fully swiped.
          */
-        "onIonSwipe"?: (event: CustomEvent<any>) => void;
+        "onIonSwipe"?: (event: IonItemOptionsCustomEvent<any>) => void;
         /**
           * The side the option button should be on. Possible values: `"start"` and `"end"`. If you have multiple `ion-item-options`, a side must be provided for each.
          */
@@ -5018,7 +5206,7 @@ declare namespace LocalJSX {
         /**
           * Emitted when the sliding position changes.
          */
-        "onIonDrag"?: (event: CustomEvent<any>) => void;
+        "onIonDrag"?: (event: IonItemSlidingCustomEvent<any>) => void;
     }
     interface IonLabel {
         /**
@@ -5032,11 +5220,11 @@ declare namespace LocalJSX {
         /**
           * Emitted when the color changes.
          */
-        "onIonColor"?: (event: CustomEvent<StyleEventDetail>) => void;
+        "onIonColor"?: (event: IonLabelCustomEvent<StyleEventDetail>) => void;
         /**
           * Emitted when the styles change.
          */
-        "onIonStyle"?: (event: CustomEvent<StyleEventDetail>) => void;
+        "onIonStyle"?: (event: IonLabelCustomEvent<StyleEventDetail>) => void;
         /**
           * The position determines where and how the label behaves inside an item.
          */
@@ -5114,19 +5302,19 @@ declare namespace LocalJSX {
         /**
           * Emitted after the loading has dismissed.
          */
-        "onIonLoadingDidDismiss"?: (event: CustomEvent<OverlayEventDetail>) => void;
+        "onIonLoadingDidDismiss"?: (event: IonLoadingCustomEvent<OverlayEventDetail>) => void;
         /**
           * Emitted after the loading has presented.
          */
-        "onIonLoadingDidPresent"?: (event: CustomEvent<void>) => void;
+        "onIonLoadingDidPresent"?: (event: IonLoadingCustomEvent<void>) => void;
         /**
           * Emitted before the loading has dismissed.
          */
-        "onIonLoadingWillDismiss"?: (event: CustomEvent<OverlayEventDetail>) => void;
+        "onIonLoadingWillDismiss"?: (event: IonLoadingCustomEvent<OverlayEventDetail>) => void;
         /**
           * Emitted before the loading has presented.
          */
-        "onIonLoadingWillPresent"?: (event: CustomEvent<void>) => void;
+        "onIonLoadingWillPresent"?: (event: IonLoadingCustomEvent<void>) => void;
         "overlayIndex": number;
         /**
           * If `true`, a backdrop will be displayed behind the loading indicator.
@@ -5161,23 +5349,23 @@ declare namespace LocalJSX {
         /**
           * Emitted when the menu is closed.
          */
-        "onIonDidClose"?: (event: CustomEvent<void>) => void;
+        "onIonDidClose"?: (event: IonMenuCustomEvent<void>) => void;
         /**
           * Emitted when the menu is open.
          */
-        "onIonDidOpen"?: (event: CustomEvent<void>) => void;
+        "onIonDidOpen"?: (event: IonMenuCustomEvent<void>) => void;
         /**
           * Emitted when the menu state is changed.
          */
-        "onIonMenuChange"?: (event: CustomEvent<MenuChangeEventDetail>) => void;
+        "onIonMenuChange"?: (event: IonMenuCustomEvent<MenuChangeEventDetail>) => void;
         /**
           * Emitted when the menu is about to be closed.
          */
-        "onIonWillClose"?: (event: CustomEvent<void>) => void;
+        "onIonWillClose"?: (event: IonMenuCustomEvent<void>) => void;
         /**
           * Emitted when the menu is about to be opened.
          */
-        "onIonWillOpen"?: (event: CustomEvent<void>) => void;
+        "onIonWillOpen"?: (event: IonMenuCustomEvent<void>) => void;
         /**
           * Which side of the view the menu should be placed.
          */
@@ -5297,39 +5485,39 @@ declare namespace LocalJSX {
         /**
           * Emitted after the modal has dismissed. Shorthand for ionModalDidDismiss.
          */
-        "onDidDismiss"?: (event: CustomEvent<OverlayEventDetail>) => void;
+        "onDidDismiss"?: (event: IonModalCustomEvent<OverlayEventDetail>) => void;
         /**
           * Emitted after the modal has presented. Shorthand for ionModalWillDismiss.
          */
-        "onDidPresent"?: (event: CustomEvent<void>) => void;
+        "onDidPresent"?: (event: IonModalCustomEvent<void>) => void;
         /**
           * Emitted after the modal breakpoint has changed.
          */
-        "onIonBreakpointDidChange"?: (event: CustomEvent<ModalBreakpointChangeEventDetail>) => void;
+        "onIonBreakpointDidChange"?: (event: IonModalCustomEvent<ModalBreakpointChangeEventDetail>) => void;
         /**
           * Emitted after the modal has dismissed.
          */
-        "onIonModalDidDismiss"?: (event: CustomEvent<OverlayEventDetail>) => void;
+        "onIonModalDidDismiss"?: (event: IonModalCustomEvent<OverlayEventDetail>) => void;
         /**
           * Emitted after the modal has presented.
          */
-        "onIonModalDidPresent"?: (event: CustomEvent<void>) => void;
+        "onIonModalDidPresent"?: (event: IonModalCustomEvent<void>) => void;
         /**
           * Emitted before the modal has dismissed.
          */
-        "onIonModalWillDismiss"?: (event: CustomEvent<OverlayEventDetail>) => void;
+        "onIonModalWillDismiss"?: (event: IonModalCustomEvent<OverlayEventDetail>) => void;
         /**
           * Emitted before the modal has presented.
          */
-        "onIonModalWillPresent"?: (event: CustomEvent<void>) => void;
+        "onIonModalWillPresent"?: (event: IonModalCustomEvent<void>) => void;
         /**
           * Emitted before the modal has dismissed. Shorthand for ionModalWillDismiss.
          */
-        "onWillDismiss"?: (event: CustomEvent<OverlayEventDetail>) => void;
+        "onWillDismiss"?: (event: IonModalCustomEvent<OverlayEventDetail>) => void;
         /**
           * Emitted before the modal has presented. Shorthand for ionModalWillPresent.
          */
-        "onWillPresent"?: (event: CustomEvent<void>) => void;
+        "onWillPresent"?: (event: IonModalCustomEvent<void>) => void;
         "overlayIndex": number;
         /**
           * The element that presented the modal. This is used for card presentation effects and for stacking multiple modals on top of each other. Only applies in iOS mode.
@@ -5362,15 +5550,15 @@ declare namespace LocalJSX {
         /**
           * Event fired when the nav has changed components
          */
-        "onIonNavDidChange"?: (event: CustomEvent<void>) => void;
+        "onIonNavDidChange"?: (event: IonNavCustomEvent<void>) => void;
         /**
           * Event fired when the nav will change components
          */
-        "onIonNavWillChange"?: (event: CustomEvent<void>) => void;
+        "onIonNavWillChange"?: (event: IonNavCustomEvent<void>) => void;
         /**
           * Event fired when Nav will load a component
          */
-        "onIonNavWillLoad"?: (event: CustomEvent<void>) => void;
+        "onIonNavWillLoad"?: (event: IonNavCustomEvent<void>) => void;
         /**
           * Root NavComponent to load
          */
@@ -5460,19 +5648,19 @@ declare namespace LocalJSX {
         /**
           * Emitted after the picker has dismissed.
          */
-        "onIonPickerDidDismiss"?: (event: CustomEvent<OverlayEventDetail>) => void;
+        "onIonPickerDidDismiss"?: (event: IonPickerCustomEvent<OverlayEventDetail>) => void;
         /**
           * Emitted after the picker has presented.
          */
-        "onIonPickerDidPresent"?: (event: CustomEvent<void>) => void;
+        "onIonPickerDidPresent"?: (event: IonPickerCustomEvent<void>) => void;
         /**
           * Emitted before the picker has dismissed.
          */
-        "onIonPickerWillDismiss"?: (event: CustomEvent<OverlayEventDetail>) => void;
+        "onIonPickerWillDismiss"?: (event: IonPickerCustomEvent<OverlayEventDetail>) => void;
         /**
           * Emitted before the picker has presented.
          */
-        "onIonPickerWillPresent"?: (event: CustomEvent<void>) => void;
+        "onIonPickerWillPresent"?: (event: IonPickerCustomEvent<void>) => void;
         "overlayIndex": number;
         /**
           * If `true`, a backdrop will be displayed behind the picker.
@@ -5487,7 +5675,7 @@ declare namespace LocalJSX {
         /**
           * Emitted when the selected value has changed
          */
-        "onIonPickerColChange"?: (event: CustomEvent<PickerColumn>) => void;
+        "onIonPickerColChange"?: (event: IonPickerColumnCustomEvent<PickerColumn>) => void;
     }
     interface IonPickerColumnInternal {
         /**
@@ -5509,7 +5697,7 @@ declare namespace LocalJSX {
         /**
           * Emitted when the value has changed.
          */
-        "onIonChange"?: (event: CustomEvent<PickerColumnItem>) => void;
+        "onIonChange"?: (event: IonPickerColumnInternalCustomEvent<PickerColumnItem>) => void;
         /**
           * The selected option in the picker.
          */
@@ -5520,7 +5708,7 @@ declare namespace LocalJSX {
           * The mode determines which platform styles to use.
          */
         "mode"?: "ios" | "md";
-        "onIonInputModeChange"?: (event: CustomEvent<PickerInternalChangeEventDetail>) => void;
+        "onIonInputModeChange"?: (event: IonPickerInternalCustomEvent<PickerInternalChangeEventDetail>) => void;
     }
     interface IonPopover {
         /**
@@ -5589,35 +5777,35 @@ declare namespace LocalJSX {
         /**
           * Emitted after the popover has dismissed. Shorthand for ionPopoverDidDismiss.
          */
-        "onDidDismiss"?: (event: CustomEvent<OverlayEventDetail>) => void;
+        "onDidDismiss"?: (event: IonPopoverCustomEvent<OverlayEventDetail>) => void;
         /**
           * Emitted after the popover has presented. Shorthand for ionPopoverWillDismiss.
          */
-        "onDidPresent"?: (event: CustomEvent<void>) => void;
+        "onDidPresent"?: (event: IonPopoverCustomEvent<void>) => void;
         /**
           * Emitted after the popover has dismissed.
          */
-        "onIonPopoverDidDismiss"?: (event: CustomEvent<OverlayEventDetail>) => void;
+        "onIonPopoverDidDismiss"?: (event: IonPopoverCustomEvent<OverlayEventDetail>) => void;
         /**
           * Emitted after the popover has presented.
          */
-        "onIonPopoverDidPresent"?: (event: CustomEvent<void>) => void;
+        "onIonPopoverDidPresent"?: (event: IonPopoverCustomEvent<void>) => void;
         /**
           * Emitted before the popover has dismissed.
          */
-        "onIonPopoverWillDismiss"?: (event: CustomEvent<OverlayEventDetail>) => void;
+        "onIonPopoverWillDismiss"?: (event: IonPopoverCustomEvent<OverlayEventDetail>) => void;
         /**
           * Emitted before the popover has presented.
          */
-        "onIonPopoverWillPresent"?: (event: CustomEvent<void>) => void;
+        "onIonPopoverWillPresent"?: (event: IonPopoverCustomEvent<void>) => void;
         /**
           * Emitted before the popover has dismissed. Shorthand for ionPopoverWillDismiss.
          */
-        "onWillDismiss"?: (event: CustomEvent<OverlayEventDetail>) => void;
+        "onWillDismiss"?: (event: IonPopoverCustomEvent<OverlayEventDetail>) => void;
         /**
           * Emitted before the popover has presented. Shorthand for ionPopoverWillPresent.
          */
-        "onWillPresent"?: (event: CustomEvent<void>) => void;
+        "onWillPresent"?: (event: IonPopoverCustomEvent<void>) => void;
         "overlayIndex": number;
         /**
           * Describes what to position the popover relative to. If `'trigger'`, the popover will be positioned relative to the trigger button. If passing in an event, this is determined via event.target. If `'event'`, the popover will be positioned relative to the x/y coordinates of the trigger action. If passing in an event, this is determined via event.clientX and event.clientY.
@@ -5694,15 +5882,15 @@ declare namespace LocalJSX {
         /**
           * Emitted when the radio button loses focus.
          */
-        "onIonBlur"?: (event: CustomEvent<void>) => void;
+        "onIonBlur"?: (event: IonRadioCustomEvent<void>) => void;
         /**
           * Emitted when the radio button has focus.
          */
-        "onIonFocus"?: (event: CustomEvent<void>) => void;
+        "onIonFocus"?: (event: IonRadioCustomEvent<void>) => void;
         /**
           * Emitted when the styles change.
          */
-        "onIonStyle"?: (event: CustomEvent<StyleEventDetail>) => void;
+        "onIonStyle"?: (event: IonRadioCustomEvent<StyleEventDetail>) => void;
         /**
           * the value of the radio.
          */
@@ -5720,7 +5908,7 @@ declare namespace LocalJSX {
         /**
           * Emitted when the value has changed.
          */
-        "onIonChange"?: (event: CustomEvent<RadioGroupChangeEventDetail>) => void;
+        "onIonChange"?: (event: IonRadioGroupCustomEvent<RadioGroupChangeEventDetail>) => void;
         /**
           * the value of the radio group.
          */
@@ -5762,27 +5950,27 @@ declare namespace LocalJSX {
         /**
           * Emitted when the range loses focus.
          */
-        "onIonBlur"?: (event: CustomEvent<void>) => void;
+        "onIonBlur"?: (event: IonRangeCustomEvent<void>) => void;
         /**
           * Emitted when the value property has changed.
          */
-        "onIonChange"?: (event: CustomEvent<RangeChangeEventDetail>) => void;
+        "onIonChange"?: (event: IonRangeCustomEvent<RangeChangeEventDetail>) => void;
         /**
           * Emitted when the range has focus.
          */
-        "onIonFocus"?: (event: CustomEvent<void>) => void;
+        "onIonFocus"?: (event: IonRangeCustomEvent<void>) => void;
         /**
           * Emitted when the user finishes moving the range knob, whether through mouse drag, touch gesture, or keyboard interaction.
          */
-        "onIonKnobMoveEnd"?: (event: CustomEvent<RangeKnobMoveEndEventDetail>) => void;
+        "onIonKnobMoveEnd"?: (event: IonRangeCustomEvent<RangeKnobMoveEndEventDetail>) => void;
         /**
           * Emitted when the user starts moving the range knob, whether through mouse drag, touch gesture, or keyboard interaction.
          */
-        "onIonKnobMoveStart"?: (event: CustomEvent<RangeKnobMoveStartEventDetail>) => void;
+        "onIonKnobMoveStart"?: (event: IonRangeCustomEvent<RangeKnobMoveStartEventDetail>) => void;
         /**
           * Emitted when the styles change.
          */
-        "onIonStyle"?: (event: CustomEvent<StyleEventDetail>) => void;
+        "onIonStyle"?: (event: IonRangeCustomEvent<StyleEventDetail>) => void;
         /**
           * If `true`, a pin with integer value is shown when the knob is pressed.
          */
@@ -5820,15 +6008,15 @@ declare namespace LocalJSX {
         /**
           * Emitted while the user is pulling down the content and exposing the refresher.
          */
-        "onIonPull"?: (event: CustomEvent<void>) => void;
+        "onIonPull"?: (event: IonRefresherCustomEvent<void>) => void;
         /**
           * Emitted when the user lets go of the content and has pulled down further than the `pullMin` or pulls the content down and exceeds the pullMax. Updates the refresher state to `refreshing`. The `complete()` method should be called when the async operation has completed.
          */
-        "onIonRefresh"?: (event: CustomEvent<RefresherEventDetail>) => void;
+        "onIonRefresh"?: (event: IonRefresherCustomEvent<RefresherEventDetail>) => void;
         /**
           * Emitted when the user begins to start pulling down.
          */
-        "onIonStart"?: (event: CustomEvent<void>) => void;
+        "onIonStart"?: (event: IonRefresherCustomEvent<void>) => void;
         /**
           * How much to multiply the pull speed by. To slow the pull animation down, pass a number less than `1`. To speed up the pull, pass a number greater than `1`. The default value is `1` which is equal to the speed of the cursor. If a negative value is passed in, the factor will be `1` instead.  For example: If the value passed is `1.2` and the content is dragged by `10` pixels, instead of `10` pixels the content will be pulled by `12` pixels (an increase of 20 percent). If the value passed is `0.8`, the dragged amount will be `8` pixels, less than the amount the cursor has moved.  Does not apply when the refresher content uses a spinner, enabling the native refresher.
          */
@@ -5874,7 +6062,7 @@ declare namespace LocalJSX {
         /**
           * Event that needs to be listened to in order to complete the reorder action. Once the event has been emitted, the `complete()` method then needs to be called in order to finalize the reorder action.
          */
-        "onIonItemReorder"?: (event: CustomEvent<ItemReorderEventDetail>) => void;
+        "onIonItemReorder"?: (event: IonReorderGroupCustomEvent<ItemReorderEventDetail>) => void;
     }
     interface IonRippleEffect {
         /**
@@ -5902,7 +6090,7 @@ declare namespace LocalJSX {
         /**
           * Used internally by `ion-router` to know when this route did change.
          */
-        "onIonRouteDataChanged"?: (event: CustomEvent<any>) => void;
+        "onIonRouteDataChanged"?: (event: IonRouteCustomEvent<any>) => void;
         /**
           * Relative path that needs to match in order for this route to apply.  Accepts paths similar to expressjs so that you can define parameters in the url /foo/:bar where bar would be available in incoming props.
          */
@@ -5916,7 +6104,7 @@ declare namespace LocalJSX {
         /**
           * Internal event that fires when any value of this rule is added/removed from the DOM, or any of his public properties changes.  `ion-router` captures this event in order to update his internal registry of router rules.
          */
-        "onIonRouteRedirectChanged"?: (event: CustomEvent<any>) => void;
+        "onIonRouteRedirectChanged"?: (event: IonRouteRedirectCustomEvent<any>) => void;
         /**
           * A redirect route, redirects "from" a URL "to" another URL. This property is that "to" URL. When the defined `ion-route-redirect` rule matches, the router will redirect to the path specified in this property.  The value of this property is always an absolute path inside the scope of routes defined in `ion-router` it can't be used with another router or to perform a redirection to a different domain.  Note that this is a virtual redirect, it will not cause a real browser refresh, again, it's a redirect inside the context of ion-router.  When this property is not specified or his value is `undefined` the whole redirect route is noop, even if the "from" value matches.
          */
@@ -5926,11 +6114,11 @@ declare namespace LocalJSX {
         /**
           * Emitted when the route had changed
          */
-        "onIonRouteDidChange"?: (event: CustomEvent<RouterEventDetail>) => void;
+        "onIonRouteDidChange"?: (event: IonRouterCustomEvent<RouterEventDetail>) => void;
         /**
           * Event emitted when the route is about to change
          */
-        "onIonRouteWillChange"?: (event: CustomEvent<RouterEventDetail>) => void;
+        "onIonRouteWillChange"?: (event: IonRouterCustomEvent<RouterEventDetail>) => void;
         /**
           * The root path to use when matching URLs. By default, this is set to "/", but you can specify an alternate prefix for all URL paths.
          */
@@ -5980,9 +6168,9 @@ declare namespace LocalJSX {
           * The mode determines which platform styles to use.
          */
         "mode"?: "ios" | "md";
-        "onIonNavDidChange"?: (event: CustomEvent<void>) => void;
-        "onIonNavWillChange"?: (event: CustomEvent<void>) => void;
-        "onIonNavWillLoad"?: (event: CustomEvent<void>) => void;
+        "onIonNavDidChange"?: (event: IonRouterOutletCustomEvent<void>) => void;
+        "onIonNavWillChange"?: (event: IonRouterOutletCustomEvent<void>) => void;
+        "onIonNavWillLoad"?: (event: IonRouterOutletCustomEvent<void>) => void;
         "swipeHandler"?: SwipeGestureHandler;
     }
     interface IonRow {
@@ -6039,31 +6227,31 @@ declare namespace LocalJSX {
         /**
           * Emitted when the input loses focus.
          */
-        "onIonBlur"?: (event: CustomEvent<void>) => void;
+        "onIonBlur"?: (event: IonSearchbarCustomEvent<void>) => void;
         /**
           * Emitted when the cancel button is clicked.
          */
-        "onIonCancel"?: (event: CustomEvent<void>) => void;
+        "onIonCancel"?: (event: IonSearchbarCustomEvent<void>) => void;
         /**
           * Emitted when the value has changed.
          */
-        "onIonChange"?: (event: CustomEvent<SearchbarChangeEventDetail>) => void;
+        "onIonChange"?: (event: IonSearchbarCustomEvent<SearchbarChangeEventDetail>) => void;
         /**
           * Emitted when the clear input button is clicked.
          */
-        "onIonClear"?: (event: CustomEvent<void>) => void;
+        "onIonClear"?: (event: IonSearchbarCustomEvent<void>) => void;
         /**
           * Emitted when the input has focus.
          */
-        "onIonFocus"?: (event: CustomEvent<void>) => void;
+        "onIonFocus"?: (event: IonSearchbarCustomEvent<void>) => void;
         /**
           * Emitted when a keyboard input occurred.
          */
-        "onIonInput"?: (event: CustomEvent<KeyboardEvent>) => void;
+        "onIonInput"?: (event: IonSearchbarCustomEvent<KeyboardEvent>) => void;
         /**
           * Emitted when the styles change.
          */
-        "onIonStyle"?: (event: CustomEvent<StyleEventDetail>) => void;
+        "onIonStyle"?: (event: IonSearchbarCustomEvent<StyleEventDetail>) => void;
         /**
           * Set the input's placeholder. `placeholder` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `&lt;Ionic&gt;`  For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)
          */
@@ -6109,15 +6297,15 @@ declare namespace LocalJSX {
         /**
           * Emitted when the value property has changed and any dragging pointer has been released from `ion-segment`.
          */
-        "onIonChange"?: (event: CustomEvent<SegmentChangeEventDetail>) => void;
+        "onIonChange"?: (event: IonSegmentCustomEvent<SegmentChangeEventDetail>) => void;
         /**
           * Emitted when user has dragged over a new button
          */
-        "onIonSelect"?: (event: CustomEvent<SegmentChangeEventDetail>) => void;
+        "onIonSelect"?: (event: IonSegmentCustomEvent<SegmentChangeEventDetail>) => void;
         /**
           * Emitted when the styles change.
          */
-        "onIonStyle"?: (event: CustomEvent<StyleEventDetail>) => void;
+        "onIonStyle"?: (event: IonSegmentCustomEvent<StyleEventDetail>) => void;
         /**
           * If `true`, the segment buttons will overflow and the user can swipe to see them. In addition, this will disable the gesture to drag the indicator between the buttons in order to swipe to see hidden buttons.
          */
@@ -6197,27 +6385,27 @@ declare namespace LocalJSX {
         /**
           * Emitted when the select loses focus.
          */
-        "onIonBlur"?: (event: CustomEvent<void>) => void;
+        "onIonBlur"?: (event: IonSelectCustomEvent<void>) => void;
         /**
           * Emitted when the selection is cancelled.
          */
-        "onIonCancel"?: (event: CustomEvent<void>) => void;
+        "onIonCancel"?: (event: IonSelectCustomEvent<void>) => void;
         /**
           * Emitted when the value has changed.
          */
-        "onIonChange"?: (event: CustomEvent<SelectChangeEventDetail>) => void;
+        "onIonChange"?: (event: IonSelectCustomEvent<SelectChangeEventDetail>) => void;
         /**
           * Emitted when the overlay is dismissed.
          */
-        "onIonDismiss"?: (event: CustomEvent<void>) => void;
+        "onIonDismiss"?: (event: IonSelectCustomEvent<void>) => void;
         /**
           * Emitted when the select has focus.
          */
-        "onIonFocus"?: (event: CustomEvent<void>) => void;
+        "onIonFocus"?: (event: IonSelectCustomEvent<void>) => void;
         /**
           * Emitted when the styles change.
          */
-        "onIonStyle"?: (event: CustomEvent<StyleEventDetail>) => void;
+        "onIonStyle"?: (event: IonSelectCustomEvent<StyleEventDetail>) => void;
         /**
           * The text to display when the select is empty.
          */
@@ -6279,67 +6467,67 @@ declare namespace LocalJSX {
         /**
           * Emitted after the active slide has changed.
          */
-        "onIonSlideDidChange"?: (event: CustomEvent<void>) => void;
+        "onIonSlideDidChange"?: (event: IonSlidesCustomEvent<void>) => void;
         /**
           * Emitted when the user double taps on the slide's container.
          */
-        "onIonSlideDoubleTap"?: (event: CustomEvent<void>) => void;
+        "onIonSlideDoubleTap"?: (event: IonSlidesCustomEvent<void>) => void;
         /**
           * Emitted when the slider is actively being moved.
          */
-        "onIonSlideDrag"?: (event: CustomEvent<void>) => void;
+        "onIonSlideDrag"?: (event: IonSlidesCustomEvent<void>) => void;
         /**
           * Emitted when the next slide has ended.
          */
-        "onIonSlideNextEnd"?: (event: CustomEvent<void>) => void;
+        "onIonSlideNextEnd"?: (event: IonSlidesCustomEvent<void>) => void;
         /**
           * Emitted when the next slide has started.
          */
-        "onIonSlideNextStart"?: (event: CustomEvent<void>) => void;
+        "onIonSlideNextStart"?: (event: IonSlidesCustomEvent<void>) => void;
         /**
           * Emitted when the previous slide has ended.
          */
-        "onIonSlidePrevEnd"?: (event: CustomEvent<void>) => void;
+        "onIonSlidePrevEnd"?: (event: IonSlidesCustomEvent<void>) => void;
         /**
           * Emitted when the previous slide has started.
          */
-        "onIonSlidePrevStart"?: (event: CustomEvent<void>) => void;
+        "onIonSlidePrevStart"?: (event: IonSlidesCustomEvent<void>) => void;
         /**
           * Emitted when the slider is at the last slide.
          */
-        "onIonSlideReachEnd"?: (event: CustomEvent<void>) => void;
+        "onIonSlideReachEnd"?: (event: IonSlidesCustomEvent<void>) => void;
         /**
           * Emitted when the slider is at its initial position.
          */
-        "onIonSlideReachStart"?: (event: CustomEvent<void>) => void;
+        "onIonSlideReachStart"?: (event: IonSlidesCustomEvent<void>) => void;
         /**
           * Emitted when the user taps/clicks on the slide's container.
          */
-        "onIonSlideTap"?: (event: CustomEvent<void>) => void;
+        "onIonSlideTap"?: (event: IonSlidesCustomEvent<void>) => void;
         /**
           * Emitted when the user releases the touch.
          */
-        "onIonSlideTouchEnd"?: (event: CustomEvent<void>) => void;
+        "onIonSlideTouchEnd"?: (event: IonSlidesCustomEvent<void>) => void;
         /**
           * Emitted when the user first touches the slider.
          */
-        "onIonSlideTouchStart"?: (event: CustomEvent<void>) => void;
+        "onIonSlideTouchStart"?: (event: IonSlidesCustomEvent<void>) => void;
         /**
           * Emitted when the slide transition has ended.
          */
-        "onIonSlideTransitionEnd"?: (event: CustomEvent<void>) => void;
+        "onIonSlideTransitionEnd"?: (event: IonSlidesCustomEvent<void>) => void;
         /**
           * Emitted when the slide transition has started.
          */
-        "onIonSlideTransitionStart"?: (event: CustomEvent<void>) => void;
+        "onIonSlideTransitionStart"?: (event: IonSlidesCustomEvent<void>) => void;
         /**
           * Emitted before the active slide has changed.
          */
-        "onIonSlideWillChange"?: (event: CustomEvent<void>) => void;
+        "onIonSlideWillChange"?: (event: IonSlidesCustomEvent<void>) => void;
         /**
           * Emitted after Swiper initialization
          */
-        "onIonSlidesDidLoad"?: (event: CustomEvent<void>) => void;
+        "onIonSlidesDidLoad"?: (event: IonSlidesCustomEvent<void>) => void;
         /**
           * Options to pass to the swiper instance. See https://swiperjs.com/swiper-api for valid options
          */
@@ -6383,7 +6571,7 @@ declare namespace LocalJSX {
         /**
           * Expression to be called when the split-pane visibility has changed
          */
-        "onIonSplitPaneVisible"?: (event: CustomEvent<{ visible: boolean }>) => void;
+        "onIonSplitPaneVisible"?: (event: IonSplitPaneCustomEvent<{ visible: boolean }>) => void;
         /**
           * When the split-pane should be shown. Can be a CSS media query expression, or a shortcut expression. Can also be a boolean expression.
          */
@@ -6410,7 +6598,7 @@ declare namespace LocalJSX {
           * The mode determines which platform styles to use.
          */
         "mode"?: "ios" | "md";
-        "onIonTabBarChanged"?: (event: CustomEvent<TabBarChangedEventDetail>) => void;
+        "onIonTabBarChanged"?: (event: IonTabBarCustomEvent<TabBarChangedEventDetail>) => void;
         /**
           * The selected tab component
          */
@@ -6444,7 +6632,7 @@ declare namespace LocalJSX {
         /**
           * Emitted when the tab bar is clicked
          */
-        "onIonTabButtonClick"?: (event: CustomEvent<TabButtonClickEventDetail>) => void;
+        "onIonTabButtonClick"?: (event: IonTabButtonCustomEvent<TabButtonClickEventDetail>) => void;
         /**
           * Specifies the relationship of the target object to the link object. The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).
          */
@@ -6466,15 +6654,15 @@ declare namespace LocalJSX {
         /**
           * Emitted when the navigation will load a component.
          */
-        "onIonNavWillLoad"?: (event: CustomEvent<void>) => void;
+        "onIonNavWillLoad"?: (event: IonTabsCustomEvent<void>) => void;
         /**
           * Emitted when the navigation has finished transitioning to a new component.
          */
-        "onIonTabsDidChange"?: (event: CustomEvent<{ tab: string }>) => void;
+        "onIonTabsDidChange"?: (event: IonTabsCustomEvent<{ tab: string }>) => void;
         /**
           * Emitted when the navigation is about to transition to a new component.
          */
-        "onIonTabsWillChange"?: (event: CustomEvent<{ tab: string }>) => void;
+        "onIonTabsWillChange"?: (event: IonTabsCustomEvent<{ tab: string }>) => void;
         "useRouter"?: boolean;
     }
     interface IonText {
@@ -6551,23 +6739,23 @@ declare namespace LocalJSX {
         /**
           * Emitted when the input loses focus.
          */
-        "onIonBlur"?: (event: CustomEvent<FocusEvent>) => void;
+        "onIonBlur"?: (event: IonTextareaCustomEvent<FocusEvent>) => void;
         /**
           * Emitted when the input value has changed.
          */
-        "onIonChange"?: (event: CustomEvent<TextareaChangeEventDetail>) => void;
+        "onIonChange"?: (event: IonTextareaCustomEvent<TextareaChangeEventDetail>) => void;
         /**
           * Emitted when the input has focus.
          */
-        "onIonFocus"?: (event: CustomEvent<FocusEvent>) => void;
+        "onIonFocus"?: (event: IonTextareaCustomEvent<FocusEvent>) => void;
         /**
           * Emitted when a keyboard input occurred.
          */
-        "onIonInput"?: (event: CustomEvent<InputEvent>) => void;
+        "onIonInput"?: (event: IonTextareaCustomEvent<InputEvent>) => void;
         /**
           * Emitted when the styles change.
          */
-        "onIonStyle"?: (event: CustomEvent<StyleEventDetail>) => void;
+        "onIonStyle"?: (event: IonTextareaCustomEvent<StyleEventDetail>) => void;
         /**
           * Instructional text that shows before the input has a value.
          */
@@ -6607,7 +6795,7 @@ declare namespace LocalJSX {
         /**
           * Emitted when the styles change.
          */
-        "onIonStyle"?: (event: CustomEvent<StyleEventDetail>) => void;
+        "onIonStyle"?: (event: IonTitleCustomEvent<StyleEventDetail>) => void;
         /**
           * The size of the toolbar title.
          */
@@ -6669,19 +6857,19 @@ declare namespace LocalJSX {
         /**
           * Emitted after the toast has dismissed.
          */
-        "onIonToastDidDismiss"?: (event: CustomEvent<OverlayEventDetail>) => void;
+        "onIonToastDidDismiss"?: (event: IonToastCustomEvent<OverlayEventDetail>) => void;
         /**
           * Emitted after the toast has presented.
          */
-        "onIonToastDidPresent"?: (event: CustomEvent<void>) => void;
+        "onIonToastDidPresent"?: (event: IonToastCustomEvent<void>) => void;
         /**
           * Emitted before the toast has dismissed.
          */
-        "onIonToastWillDismiss"?: (event: CustomEvent<OverlayEventDetail>) => void;
+        "onIonToastWillDismiss"?: (event: IonToastCustomEvent<OverlayEventDetail>) => void;
         /**
           * Emitted before the toast has presented.
          */
-        "onIonToastWillPresent"?: (event: CustomEvent<void>) => void;
+        "onIonToastWillPresent"?: (event: IonToastCustomEvent<void>) => void;
         "overlayIndex": number;
         /**
           * The position of the toast on the screen.
@@ -6716,19 +6904,19 @@ declare namespace LocalJSX {
         /**
           * Emitted when the toggle loses focus.
          */
-        "onIonBlur"?: (event: CustomEvent<void>) => void;
+        "onIonBlur"?: (event: IonToggleCustomEvent<void>) => void;
         /**
           * Emitted when the value property has changed.
          */
-        "onIonChange"?: (event: CustomEvent<ToggleChangeEventDetail>) => void;
+        "onIonChange"?: (event: IonToggleCustomEvent<ToggleChangeEventDetail>) => void;
         /**
           * Emitted when the toggle has focus.
          */
-        "onIonFocus"?: (event: CustomEvent<void>) => void;
+        "onIonFocus"?: (event: IonToggleCustomEvent<void>) => void;
         /**
           * Emitted when the styles change.
          */
-        "onIonStyle"?: (event: CustomEvent<StyleEventDetail>) => void;
+        "onIonStyle"?: (event: IonToggleCustomEvent<StyleEventDetail>) => void;
         /**
           * The value of the toggle does not mean if it's checked or not, use the `checked` property for that.  The value of a toggle is analogous to the value of a `<input type="checkbox">`, it's only used when the toggle participates in a native `<form>`.
          */
diff --git a/core/src/components/item-sliding/item-sliding.tsx b/core/src/components/item-sliding/item-sliding.tsx
index bd20878f97..f6359404ac 100644
--- a/core/src/components/item-sliding/item-sliding.tsx
+++ b/core/src/components/item-sliding/item-sliding.tsx
@@ -3,6 +3,7 @@ import { Component, Element, Event, Host, Method, Prop, State, Watch, h } from '
 
 import { getIonMode } from '../../global/ionic-global';
 import type { Gesture, GestureDetail, Side } from '../../interface';
+import { findClosestIonContent, disableContentScrollY, resetContentScrollY } from '../../utils/content';
 import { isEndSide } from '../../utils/helpers';
 
 const SWIPE_MARGIN = 30;
@@ -43,7 +44,7 @@ export class ItemSliding implements ComponentInterface {
   private rightOptions?: HTMLIonItemOptionsElement;
   private optsDirty = true;
   private gesture?: Gesture;
-  private closestContent: HTMLIonContentElement | null = null;
+  private contentEl: HTMLElement | null = null;
   private initialContentScrollY = true;
 
   @Element() el!: HTMLIonItemSlidingElement;
@@ -68,7 +69,7 @@ export class ItemSliding implements ComponentInterface {
 
   async connectedCallback() {
     this.item = this.el.querySelector('ion-item');
-    this.closestContent = this.el.closest('ion-content');
+    this.contentEl = findClosestIonContent(this.el);
 
     await this.updateOptions();
 
@@ -264,23 +265,6 @@ export class ItemSliding implements ComponentInterface {
     return !!(this.rightOptions || this.leftOptions);
   }
 
-  private disableContentScrollY() {
-    if (this.closestContent === null) {
-      return;
-    }
-
-    this.initialContentScrollY = this.closestContent.scrollY;
-    this.closestContent.scrollY = false;
-  }
-
-  private restoreContentScrollY() {
-    if (this.closestContent === null) {
-      return;
-    }
-
-    this.closestContent.scrollY = this.initialContentScrollY;
-  }
-
   private onStart() {
     /**
      * We need to query for the ion-item
@@ -289,8 +273,10 @@ export class ItemSliding implements ComponentInterface {
      */
     this.item = this.el.querySelector('ion-item');
 
-    // Prevent scrolling during gesture
-    this.disableContentScrollY();
+    const { contentEl } = this;
+    if (contentEl) {
+      this.initialContentScrollY = disableContentScrollY(contentEl);
+    }
 
     openSlidingItem = this.el;
 
@@ -343,8 +329,10 @@ export class ItemSliding implements ComponentInterface {
   }
 
   private onEnd(gesture: GestureDetail) {
-    // Restore ion-content scrollY to initial value when gesture ends
-    this.restoreContentScrollY();
+    const { contentEl, initialContentScrollY } = this;
+    if (contentEl) {
+      resetContentScrollY(contentEl, initialContentScrollY);
+    }
 
     const velocity = gesture.velocityX;
 
diff --git a/core/src/components/item-sliding/test/basic/index.html b/core/src/components/item-sliding/test/basic/index.html
index cebd73b958..a9bed0e0bd 100644
--- a/core/src/components/item-sliding/test/basic/index.html
+++ b/core/src/components/item-sliding/test/basic/index.html
@@ -75,7 +75,7 @@
               </ion-item-options>
             </ion-item-sliding>
 
-            <ion-item-sliding id="item6">
+            <ion-item-sliding id="two-options">
               <ion-item>
                 <ion-label> Two options, one dynamic option and text </ion-label>
               </ion-item>
@@ -89,7 +89,7 @@
                   <ion-icon slot="start" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
                   <span class="more-text"></span>
                 </ion-item-option>
-                <ion-item-option color="secondary" onclick="archive('item6')">
+                <ion-item-option color="secondary" onclick="archive('two-options')">
                   <ion-icon slot="start" name="archive"></ion-icon>
                   <span class="archive-text"></span>
                 </ion-item-option>
diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts
new file mode 100644
index 0000000000..33c0511151
--- /dev/null
+++ b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts
@@ -0,0 +1,35 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('item-sliding: basic', () => {
+  test('should not scroll when the item-sliding is swiped', async ({ page, browserName }, testInfo) => {
+    test.skip(browserName === 'webkit', 'mouse.wheel is not available in WebKit');
+    test.skip(testInfo.project.metadata.rtl === true, 'This feature does not have RTL-specific behaviors');
+
+    await page.goto(`/src/components/item-sliding/test/basic`);
+
+    const itemSlidingEl = page.locator('#two-options');
+    const scrollEl = page.locator('ion-content .inner-scroll');
+
+    expect(await scrollEl.evaluate((el: HTMLElement) => el.scrollTop)).toEqual(0);
+
+    const box = (await itemSlidingEl.boundingBox())!;
+    const centerX = box.x + box.width / 2;
+    const centerY = box.y + box.height / 2;
+
+    await page.mouse.move(centerX, centerY);
+    await page.mouse.down();
+    await page.mouse.move(centerX - 30, centerY);
+
+    /**
+     * Do not use scrollToBottom() or other scrolling methods
+     * on ion-content as those will update the scroll position.
+     * Setting scrollTop still works even with overflow-y: hidden.
+     * However, simulating a user gesture should not scroll the content.
+     */
+    await page.mouse.wheel(0, 100);
+    await page.waitForChanges();
+
+    expect(await scrollEl.evaluate((el: HTMLElement) => el.scrollTop)).toEqual(0);
+  });
+});
diff --git a/core/src/components/item-sliding/test/scroll-target/index.html b/core/src/components/item-sliding/test/scroll-target/index.html
new file mode 100644
index 0000000000..813e94363e
--- /dev/null
+++ b/core/src/components/item-sliding/test/scroll-target/index.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Item Sliding - Scroll Target</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 nomodule src="../../../../../dist/ionic/ionic.js"></script>
+    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+    <style>
+      .ion-content-scroll-host {
+        width: 100%;
+        height: 100%;
+
+        overflow-y: scroll;
+      }
+    </style>
+  </head>
+  <body>
+    <ion-app>
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Item Sliding - Scroll Target</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content class="ion-padding" scroll-y="false">
+        <div class="ion-content-scroll-host">
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur faucibus nulla a nunc tincidunt semper.
+            Nam nibh lorem, pharetra ac ex ac, tempus fringilla est. Aenean tincidunt ipsum pellentesque, consequat
+            libero id, feugiat leo. In vestibulum faucibus velit, non tincidunt erat tincidunt in. Donec a diam sed nisl
+            convallis maximus. Aenean cursus sagittis lorem vitae tristique. Pellentesque pellentesque, quam eget
+            lobortis finibus, lectus lorem maximus purus, quis sagittis tortor sem sed tellus.
+          </p>
+
+          <ion-item-sliding>
+            <ion-item>
+              <ion-label>Item Sliding</ion-label>
+            </ion-item>
+            <ion-item-options side="end" class="show-options">
+              <ion-item-option color="primary">
+                <ion-icon slot="start" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
+                <span class="more-text"></span>
+              </ion-item-option>
+            </ion-item-options>
+          </ion-item-sliding>
+
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur faucibus nulla a nunc tincidunt semper.
+            Nam nibh lorem, pharetra ac ex ac, tempus fringilla est. Aenean tincidunt ipsum pellentesque, consequat
+            libero id, feugiat leo. In vestibulum faucibus velit, non tincidunt erat tincidunt in. Donec a diam sed nisl
+            convallis maximus. Aenean cursus sagittis lorem vitae tristique. Pellentesque pellentesque, quam eget
+            lobortis finibus, lectus lorem maximus purus, quis sagittis tortor sem sed tellus.
+          </p>
+
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur faucibus nulla a nunc tincidunt semper.
+            Nam nibh lorem, pharetra ac ex ac, tempus fringilla est. Aenean tincidunt ipsum pellentesque, consequat
+            libero id, feugiat leo. In vestibulum faucibus velit, non tincidunt erat tincidunt in. Donec a diam sed nisl
+            convallis maximus. Aenean cursus sagittis lorem vitae tristique. Pellentesque pellentesque, quam eget
+            lobortis finibus, lectus lorem maximus purus, quis sagittis tortor sem sed tellus.
+          </p>
+
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur faucibus nulla a nunc tincidunt semper.
+            Nam nibh lorem, pharetra ac ex ac, tempus fringilla est. Aenean tincidunt ipsum pellentesque, consequat
+            libero id, feugiat leo. In vestibulum faucibus velit, non tincidunt erat tincidunt in. Donec a diam sed nisl
+            convallis maximus. Aenean cursus sagittis lorem vitae tristique. Pellentesque pellentesque, quam eget
+            lobortis finibus, lectus lorem maximus purus, quis sagittis tortor sem sed tellus.
+          </p>
+
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur faucibus nulla a nunc tincidunt semper.
+            Nam nibh lorem, pharetra ac ex ac, tempus fringilla est. Aenean tincidunt ipsum pellentesque, consequat
+            libero id, feugiat leo. In vestibulum faucibus velit, non tincidunt erat tincidunt in. Donec a diam sed nisl
+            convallis maximus. Aenean cursus sagittis lorem vitae tristique. Pellentesque pellentesque, quam eget
+            lobortis finibus, lectus lorem maximus purus, quis sagittis tortor sem sed tellus.
+          </p>
+        </div>
+      </ion-content>
+    </ion-app>
+  </body>
+</html>
diff --git a/core/src/components/item-sliding/test/scroll-target/item-sliding.e2e.ts b/core/src/components/item-sliding/test/scroll-target/item-sliding.e2e.ts
new file mode 100644
index 0000000000..162ed9105a
--- /dev/null
+++ b/core/src/components/item-sliding/test/scroll-target/item-sliding.e2e.ts
@@ -0,0 +1,38 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('item-sliding: scroll-target', () => {
+  test('should not scroll when the item-sliding is swiped in custom scroll target', async ({
+    page,
+    browserName,
+  }, testInfo) => {
+    test.skip(browserName === 'webkit', 'mouse.wheel is not available in WebKit');
+    test.skip(testInfo.project.metadata.rtl === true, 'This feature does not have RTL-specific behaviors');
+
+    await page.goto(`/src/components/item-sliding/test/scroll-target`);
+
+    const itemSlidingEl = page.locator('ion-item-sliding');
+    const scrollEl = page.locator('.ion-content-scroll-host');
+
+    expect(await scrollEl.evaluate((el: HTMLElement) => el.scrollTop)).toEqual(0);
+
+    const box = (await itemSlidingEl.boundingBox())!;
+    const centerX = box.x + box.width / 2;
+    const centerY = box.y + box.height / 2;
+
+    await page.mouse.move(centerX, centerY);
+    await page.mouse.down();
+    await page.mouse.move(centerX - 30, centerY);
+
+    /**
+     * Do not use scrollToBottom() or other scrolling methods
+     * on ion-content as those will update the scroll position.
+     * Setting scrollTop still works even with overflow-y: hidden.
+     * However, simulating a user gesture should not scroll the content.
+     */
+    await page.mouse.wheel(0, 100);
+    await page.waitForChanges();
+
+    expect(await scrollEl.evaluate((el: HTMLElement) => el.scrollTop)).toEqual(0);
+  });
+});
diff --git a/core/src/components/modal/gestures/swipe-to-close.ts b/core/src/components/modal/gestures/swipe-to-close.ts
index c056c174a3..945d010494 100644
--- a/core/src/components/modal/gestures/swipe-to-close.ts
+++ b/core/src/components/modal/gestures/swipe-to-close.ts
@@ -1,6 +1,11 @@
 import type { Animation } from '../../../interface';
 import { getTimeGivenProgression } from '../../../utils/animation/cubic-bezier';
-import { isIonContent, findClosestIonContent } from '../../../utils/content';
+import {
+  isIonContent,
+  findClosestIonContent,
+  disableContentScrollY,
+  resetContentScrollY,
+} from '../../../utils/content';
 import type { GestureDetail } from '../../../utils/gesture';
 import { createGesture } from '../../../utils/gesture';
 import { clamp, getElementRoot } from '../../../utils/helpers';
@@ -33,30 +38,6 @@ export const createSwipeToCloseGesture = (el: HTMLIonModalElement, animation: An
     }
   };
 
-  const disableContentScroll = () => {
-    if (!contentEl) {
-      return;
-    }
-
-    if (isIonContent(contentEl)) {
-      (contentEl as HTMLIonContentElement).scrollY = false;
-    } else {
-      contentEl.style.setProperty('overflow', 'hidden');
-    }
-  };
-
-  const resetContentScroll = () => {
-    if (!contentEl) {
-      return;
-    }
-
-    if (isIonContent(contentEl)) {
-      (contentEl as HTMLIonContentElement).scrollY = initialScrollY;
-    } else {
-      contentEl.style.removeProperty('overflow');
-    }
-  };
-
   const canStart = (detail: GestureDetail) => {
     const target = detail.event.target as HTMLElement | null;
 
@@ -145,8 +126,8 @@ export const createSwipeToCloseGesture = (el: HTMLIonModalElement, animation: An
      * content. We do not want scrolling to
      * happen at the same time as the gesture.
      */
-    if (deltaY > 0) {
-      disableContentScroll();
+    if (deltaY > 0 && contentEl) {
+      disableContentScrollY(contentEl);
     }
 
     animation.progressStart(true, isOpen ? 1 : 0);
@@ -161,8 +142,8 @@ export const createSwipeToCloseGesture = (el: HTMLIonModalElement, animation: An
      * content. We do not want scrolling to
      * happen at the same time as the gesture.
      */
-    if (deltaY > 0) {
-      disableContentScroll();
+    if (deltaY > 0 && contentEl) {
+      disableContentScrollY(contentEl);
     }
 
     /**
@@ -245,7 +226,9 @@ export const createSwipeToCloseGesture = (el: HTMLIonModalElement, animation: An
 
     gesture.enable(false);
 
-    resetContentScroll();
+    if (contentEl) {
+      resetContentScrollY(contentEl, initialScrollY);
+    }
 
     animation
       .onFinish(() => {
diff --git a/core/src/components/range/range.tsx b/core/src/components/range/range.tsx
index 86dd925d65..5bf61d19c8 100644
--- a/core/src/components/range/range.tsx
+++ b/core/src/components/range/range.tsx
@@ -13,6 +13,7 @@ import type {
   RangeValue,
   StyleEventDetail,
 } from '../../interface';
+import { findClosestIonContent, disableContentScrollY, resetContentScrollY } from '../../utils/content';
 import type { Attributes } from '../../utils/helpers';
 import { inheritAriaAttributes, clamp, debounceEvent, getAriaLabel, renderHiddenInput } from '../../utils/helpers';
 import { isRTL } from '../../utils/rtl';
@@ -50,6 +51,8 @@ export class Range implements ComponentInterface {
   private rangeSlider?: HTMLElement;
   private gesture?: Gesture;
   private inheritedAttributes: Attributes = {};
+  private contentEl: HTMLElement | null = null;
+  private initialContentScrollY = true;
 
   @Element() el!: HTMLIonRangeElement;
 
@@ -259,6 +262,8 @@ export class Range implements ComponentInterface {
     if (this.didLoad) {
       this.setupGesture();
     }
+
+    this.contentEl = findClosestIonContent(this.el);
   }
 
   disconnectedCallback() {
@@ -313,6 +318,11 @@ export class Range implements ComponentInterface {
   }
 
   private onStart(detail: GestureDetail) {
+    const { contentEl } = this;
+    if (contentEl) {
+      this.initialContentScrollY = disableContentScrollY(contentEl);
+    }
+
     const rect = (this.rect = this.rangeSlider!.getBoundingClientRect() as any);
     const currentX = detail.currentX;
 
@@ -337,6 +347,11 @@ export class Range implements ComponentInterface {
   }
 
   private onEnd(detail: GestureDetail) {
+    const { contentEl, initialContentScrollY } = this;
+    if (contentEl) {
+      resetContentScrollY(contentEl, initialContentScrollY);
+    }
+
     this.update(detail.currentX);
     this.pressedKnob = undefined;
 
diff --git a/core/src/components/range/test/basic/index.html b/core/src/components/range/test/basic/index.html
index 8402505c37..642f4e974c 100644
--- a/core/src/components/range/test/basic/index.html
+++ b/core/src/components/range/test/basic/index.html
@@ -93,7 +93,7 @@
           </ion-item>
           <ion-item>
             <ion-label position="stacked">Stacked Label</ion-label>
-            <ion-range value="40">
+            <ion-range value="40" id="stacked-range">
               <ion-label slot="start">Start</ion-label>
               <ion-label slot="end">End</ion-label>
             </ion-range>
diff --git a/core/src/components/range/test/basic/range.e2e.ts b/core/src/components/range/test/basic/range.e2e.ts
index 6915c5de26..a5d3317f51 100644
--- a/core/src/components/range/test/basic/range.e2e.ts
+++ b/core/src/components/range/test/basic/range.e2e.ts
@@ -53,4 +53,35 @@ test.describe('range: basic', () => {
     expect(rangeStart).toHaveReceivedEventDetail({ value: 20 });
     expect(rangeEnd).toHaveReceivedEventDetail({ value: 21 });
   });
+
+  test('should not scroll when the knob is swiped', async ({ page, browserName }, testInfo) => {
+    test.skip(browserName === 'webkit', 'mouse.wheel is not available in WebKit');
+    test.skip(testInfo.project.metadata.rtl === true, 'This feature does not have RTL-specific behaviors');
+
+    await page.goto(`/src/components/range/test/basic`);
+
+    const knobEl = page.locator('ion-range#stacked-range .range-knob-handle');
+    const scrollEl = page.locator('ion-content .inner-scroll');
+
+    expect(await scrollEl.evaluate((el: HTMLElement) => el.scrollTop)).toEqual(0);
+
+    const box = (await knobEl.boundingBox())!;
+    const centerX = box.x + box.width / 2;
+    const centerY = box.y + box.height / 2;
+
+    await page.mouse.move(centerX, centerY);
+    await page.mouse.down();
+    await page.mouse.move(centerX + 30, centerY);
+
+    /**
+     * Do not use scrollToBottom() or other scrolling methods
+     * on ion-content as those will update the scroll position.
+     * Setting scrollTop still works even with overflow-y: hidden.
+     * However, simulating a user gesture should not scroll the content.
+     */
+    await page.mouse.wheel(0, 100);
+    await page.waitForChanges();
+
+    expect(await scrollEl.evaluate((el: HTMLElement) => el.scrollTop)).toEqual(0);
+  });
 });
diff --git a/core/src/components/range/test/scroll-target/index.html b/core/src/components/range/test/scroll-target/index.html
new file mode 100644
index 0000000000..f3881c1340
--- /dev/null
+++ b/core/src/components/range/test/scroll-target/index.html
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Range - Scroll Target</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 nomodule src="../../../../../dist/ionic/ionic.js"></script>
+    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+    <style>
+      .ion-content-scroll-host {
+        width: 100%;
+        height: 100%;
+
+        overflow-y: scroll;
+      }
+    </style>
+  </head>
+  <body>
+    <ion-app>
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Range - Scroll Target</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content class="ion-padding" scroll-y="false">
+        <div class="ion-content-scroll-host">
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur faucibus nulla a nunc tincidunt semper.
+            Nam nibh lorem, pharetra ac ex ac, tempus fringilla est. Aenean tincidunt ipsum pellentesque, consequat
+            libero id, feugiat leo. In vestibulum faucibus velit, non tincidunt erat tincidunt in. Donec a diam sed nisl
+            convallis maximus. Aenean cursus sagittis lorem vitae tristique. Pellentesque pellentesque, quam eget
+            lobortis finibus, lectus lorem maximus purus, quis sagittis tortor sem sed tellus.
+          </p>
+
+          <ion-item>
+            <ion-label position="stacked">Stacked Label</ion-label>
+            <ion-range value="40">
+              <ion-label slot="start">Start</ion-label>
+              <ion-label slot="end">End</ion-label>
+            </ion-range>
+          </ion-item>
+
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur faucibus nulla a nunc tincidunt semper.
+            Nam nibh lorem, pharetra ac ex ac, tempus fringilla est. Aenean tincidunt ipsum pellentesque, consequat
+            libero id, feugiat leo. In vestibulum faucibus velit, non tincidunt erat tincidunt in. Donec a diam sed nisl
+            convallis maximus. Aenean cursus sagittis lorem vitae tristique. Pellentesque pellentesque, quam eget
+            lobortis finibus, lectus lorem maximus purus, quis sagittis tortor sem sed tellus.
+          </p>
+
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur faucibus nulla a nunc tincidunt semper.
+            Nam nibh lorem, pharetra ac ex ac, tempus fringilla est. Aenean tincidunt ipsum pellentesque, consequat
+            libero id, feugiat leo. In vestibulum faucibus velit, non tincidunt erat tincidunt in. Donec a diam sed nisl
+            convallis maximus. Aenean cursus sagittis lorem vitae tristique. Pellentesque pellentesque, quam eget
+            lobortis finibus, lectus lorem maximus purus, quis sagittis tortor sem sed tellus.
+          </p>
+
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur faucibus nulla a nunc tincidunt semper.
+            Nam nibh lorem, pharetra ac ex ac, tempus fringilla est. Aenean tincidunt ipsum pellentesque, consequat
+            libero id, feugiat leo. In vestibulum faucibus velit, non tincidunt erat tincidunt in. Donec a diam sed nisl
+            convallis maximus. Aenean cursus sagittis lorem vitae tristique. Pellentesque pellentesque, quam eget
+            lobortis finibus, lectus lorem maximus purus, quis sagittis tortor sem sed tellus.
+          </p>
+
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur faucibus nulla a nunc tincidunt semper.
+            Nam nibh lorem, pharetra ac ex ac, tempus fringilla est. Aenean tincidunt ipsum pellentesque, consequat
+            libero id, feugiat leo. In vestibulum faucibus velit, non tincidunt erat tincidunt in. Donec a diam sed nisl
+            convallis maximus. Aenean cursus sagittis lorem vitae tristique. Pellentesque pellentesque, quam eget
+            lobortis finibus, lectus lorem maximus purus, quis sagittis tortor sem sed tellus.
+          </p>
+        </div>
+      </ion-content>
+    </ion-app>
+  </body>
+</html>
diff --git a/core/src/components/range/test/scroll-target/range.e2e.ts b/core/src/components/range/test/scroll-target/range.e2e.ts
new file mode 100644
index 0000000000..26dd5049a4
--- /dev/null
+++ b/core/src/components/range/test/scroll-target/range.e2e.ts
@@ -0,0 +1,35 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('range: scroll-target', () => {
+  test('should not scroll when the knob is swiped in custom scroll target', async ({ page, browserName }, testInfo) => {
+    test.skip(browserName === 'webkit', 'mouse.wheel is not available in WebKit');
+    test.skip(testInfo.project.metadata.rtl === true, 'This feature does not have RTL-specific behaviors');
+
+    await page.goto(`/src/components/range/test/scroll-target`);
+
+    const knobEl = page.locator('ion-range .range-knob-handle');
+    const scrollEl = page.locator('.ion-content-scroll-host');
+
+    expect(await scrollEl.evaluate((el: HTMLElement) => el.scrollTop)).toEqual(0);
+
+    const box = (await knobEl.boundingBox())!;
+    const centerX = box.x + box.width / 2;
+    const centerY = box.y + box.height / 2;
+
+    await page.mouse.move(centerX, centerY);
+    await page.mouse.down();
+    await page.mouse.move(centerX + 30, centerY);
+
+    /**
+     * Do not use scrollToBottom() or other scrolling methods
+     * on ion-content as those will update the scroll position.
+     * Setting scrollTop still works even with overflow-y: hidden.
+     * However, simulating a user gesture should not scroll the content.
+     */
+    await page.mouse.wheel(0, 100);
+    await page.waitForChanges();
+
+    expect(await scrollEl.evaluate((el: HTMLElement) => el.scrollTop)).toEqual(0);
+  });
+});
diff --git a/core/src/components/refresher/test/test.utils.ts b/core/src/components/refresher/test/test.utils.ts
index 40910ce864..706e135a9d 100644
--- a/core/src/components/refresher/test/test.utils.ts
+++ b/core/src/components/refresher/test/test.utils.ts
@@ -1,4 +1,5 @@
 import type { E2EPage } from '@utils/test/playwright';
+import { dragElementByYAxis } from '@utils/test/playwright';
 
 /**
  * Emulates a pull-to-refresh drag gesture (pulls down and releases).
@@ -16,23 +17,8 @@ const pullToRefresh = async (page: E2EPage, selector = 'body') => {
   await page.waitForSelector('ion-refresher.hydrated', { state: 'attached' });
 
   const ev = await page.spyOnEvent('ionRefreshComplete');
-  const boundingBox = await target.boundingBox();
 
-  if (!boundingBox) {
-    return;
-  }
-
-  const startX = boundingBox.x + boundingBox.width / 2;
-  const startY = boundingBox.y + boundingBox.height / 2;
-
-  await page.mouse.move(startX, startY);
-  await page.mouse.down();
-
-  for (let i = 0; i < 400; i += 20) {
-    await page.mouse.move(startX, startY + i);
-  }
-
-  await page.mouse.up();
+  await dragElementByYAxis(target, page, 400);
   await ev.next();
 };
 
diff --git a/core/src/utils/content/index.ts b/core/src/utils/content/index.ts
index 0d46e0fbfd..dd7011fcd0 100644
--- a/core/src/utils/content/index.ts
+++ b/core/src/utils/content/index.ts
@@ -101,3 +101,37 @@ export const scrollByPoint = (el: HTMLElement, x: number, y: number, durationMs:
 export const printIonContentErrorMsg = (el: HTMLElement) => {
   return printRequiredElementError(el, ION_CONTENT_ELEMENT_SELECTOR);
 };
+
+/**
+ * Several components in Ionic need to prevent scrolling
+ * during a gesture (card modal, range, item sliding, etc).
+ * Use this utility to account for ion-content and custom content hosts.
+ */
+export const disableContentScrollY = (contentEl: HTMLElement): boolean => {
+  if (isIonContent(contentEl)) {
+    const ionContent = contentEl as HTMLIonContentElement;
+    const initialScrollY = ionContent.scrollY;
+    ionContent.scrollY = false;
+
+    /**
+     * This should be passed into resetContentScrollY
+     * so that we can revert ion-content's scrollY to the
+     * correct state. For example, if scrollY = false
+     * initially, we do not want to enable scrolling
+     * when we call resetContentScrollY.
+     */
+    return initialScrollY;
+  } else {
+    contentEl.style.setProperty('overflow', 'hidden');
+
+    return true;
+  }
+};
+
+export const resetContentScrollY = (contentEl: HTMLElement, initialScrollY: boolean) => {
+  if (isIonContent(contentEl)) {
+    (contentEl as HTMLIonContentElement).scrollY = initialScrollY;
+  } else {
+    contentEl.style.removeProperty('overflow');
+  }
+};
diff --git a/core/src/utils/test/playwright/drag-element.ts b/core/src/utils/test/playwright/drag-element.ts
index b053cc17d8..cf8e52e298 100644
--- a/core/src/utils/test/playwright/drag-element.ts
+++ b/core/src/utils/test/playwright/drag-element.ts
@@ -29,7 +29,42 @@ export const dragElementBy = async (
 
   await page.mouse.move(startX, startY);
   await page.mouse.down();
+
   await page.mouse.move(midX, midY);
   await page.mouse.move(endX, endY);
   await page.mouse.up();
 };
+
+/**
+ * Drags an element by the given amount of pixels on the Y axis.
+ * @param el The element to drag.
+ * @param page The E2E Page object.
+ * @param dragByY The amount of pixels to drag the element by.
+ * @param startYCoord The Y coordinate to start the drag gesture at. Defaults to the center of the element.
+ */
+export const dragElementByYAxis = async (
+  el: Locator | ElementHandle<SVGElement | HTMLElement>,
+  page: E2EPage,
+  dragByY: number,
+  startYCoord?: number
+) => {
+  const boundingBox = await el.boundingBox();
+
+  if (!boundingBox) {
+    throw new Error(
+      'Cannot get a bounding box for an element that is not visible. See https://playwright.dev/docs/api/class-locator#locator-bounding-box for more information'
+    );
+  }
+
+  const startX = boundingBox.x + boundingBox.width / 2;
+  const startY = startYCoord === undefined ? boundingBox.y + boundingBox.height / 2 : startYCoord;
+
+  await page.mouse.move(startX, startY);
+  await page.mouse.down();
+
+  for (let i = 0; i < dragByY; i += 20) {
+    await page.mouse.move(startX, startY + i);
+  }
+
+  await page.mouse.up();
+};
diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md
index eb8d0a8d46..722d3a917b 100644
--- 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.
 
+## [6.1.8](https://github.com/ionic-team/ionic-docs/compare/v6.1.7...v6.1.8) (2022-06-01)
+
+**Note:** Version bump only for package @ionic/docs
+
+
+
+
+
 ## [6.1.7](https://github.com/ionic-team/ionic-docs/compare/v6.1.6...v6.1.7) (2022-05-26)
 
 **Note:** Version bump only for package @ionic/docs
diff --git a/docs/package-lock.json b/docs/package-lock.json
index 8f4d59c625..104aa854b7 100644
--- a/docs/package-lock.json
+++ b/docs/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@ionic/docs",
-  "version": "6.1.7",
+  "version": "6.1.8",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/docs",
-      "version": "6.1.7",
+      "version": "6.1.8",
       "license": "MIT"
     }
   }
diff --git a/docs/package.json b/docs/package.json
index a688b75574..cf59879869 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/docs",
-  "version": "6.1.7",
+  "version": "6.1.8",
   "description": "Pre-packaged API documentation for the Ionic docs.",
   "main": "core.json",
   "types": "core.d.ts",
diff --git a/lerna.json b/lerna.json
index 97b7adf39b..611cac11e7 100644
--- a/lerna.json
+++ b/lerna.json
@@ -5,5 +5,5 @@
     "angular",
     "packages/*"
   ],
-  "version": "6.1.7"
+  "version": "6.1.8"
 }
diff --git a/packages/angular-server/CHANGELOG.md b/packages/angular-server/CHANGELOG.md
index b1fd7a5979..db3fe9c75b 100644
--- 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.
 
+## [6.1.8](https://github.com/ionic-team/ionic/compare/v6.1.7...v6.1.8) (2022-06-01)
+
+**Note:** Version bump only for package @ionic/angular-server
+
+
+
+
+
 ## [6.1.7](https://github.com/ionic-team/ionic/compare/v6.1.6...v6.1.7) (2022-05-26)
 
 **Note:** Version bump only for package @ionic/angular-server
diff --git a/packages/angular-server/package-lock.json b/packages/angular-server/package-lock.json
index f2570b0aff..64522be343 100644
--- a/packages/angular-server/package-lock.json
+++ b/packages/angular-server/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@ionic/angular-server",
-  "version": "6.1.7",
+  "version": "6.1.8",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/angular-server",
-      "version": "6.1.7",
+      "version": "6.1.8",
       "license": "MIT",
       "devDependencies": {
         "@angular-eslint/eslint-plugin": "^12.6.1",
@@ -18,7 +18,7 @@
         "@angular/platform-browser": "^12.0.0",
         "@angular/platform-browser-dynamic": "^12.2.10",
         "@angular/platform-server": "^12.0.0",
-        "@ionic/core": "^6.1.7",
+        "@ionic/core": "^6.1.8",
         "@ionic/eslint-config": "^0.3.0",
         "@ionic/prettier-config": "^2.0.0",
         "@typescript-eslint/eslint-plugin": "^5.2.0",
@@ -786,13 +786,13 @@
       "license": "BSD-3-Clause"
     },
     "node_modules/@ionic/core": {
-      "version": "6.1.7",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.1.7.tgz",
-      "integrity": "sha512-CUbH7xtKcPejHTyMvvUJZq4GIyLbL2YflzFH+mad1PoLN4TLwFTTKTDB1oeFNqwnTzaByeBvhEWSayxCbLgvjQ==",
+      "version": "6.1.8",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.1.8.tgz",
+      "integrity": "sha512-EMYebwmS4UogpNrTyuCgIETKwE7XA93V7X3YacK2UArm1Xf98w3FsnfAYeMaUqY93bDxih/CSKm3NpUhVWP44A==",
       "dev": true,
       "dependencies": {
-        "@stencil/core": "^2.14.2",
-        "ionicons": "^6.0.0",
+        "@stencil/core": "^2.16.0",
+        "ionicons": "^6.0.2",
         "tslib": "^2.1.0"
       }
     },
@@ -1158,9 +1158,9 @@
       "license": "MIT"
     },
     "node_modules/@stencil/core": {
-      "version": "2.15.1",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.15.1.tgz",
-      "integrity": "sha512-NYjRwQnjzscyFfqK+iIwRdr/dgYn33u6KE7kyQWdi7xsCkqMHalXYgJlN/QBQ9PN3qXmXKeBrJNG8EkNdCbK5g==",
+      "version": "2.16.0",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.16.0.tgz",
+      "integrity": "sha512-oKxPYxpH1no0oMFSf8EesuFBcn9hVpoqrpiS2WH0H50RKKL8hhKoxDfn/cNeD12L0Aj7kf6nNtexIllmkYG6lw==",
       "dev": true,
       "bin": {
         "stencil": "bin/stencil"
@@ -3595,25 +3595,12 @@
       }
     },
     "node_modules/ionicons": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-6.0.0.tgz",
-      "integrity": "sha512-p83W1T8jZUlllHAjuIWaDQbI36OYqdrwcf8MhYbKW7+9rjGlCMP9+5OaR0W7tl0QfM004uAiy/zkc7HTpDNKgA==",
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-6.0.2.tgz",
+      "integrity": "sha512-AyKfFaUKVoBz4eB8XkU7H1R5HFnVsgq5ijqSdbXC0lES9PDK/J6LUQz6XUJq0mVVQF5k9kczSPOLMW3mszG0mQ==",
       "dev": true,
       "dependencies": {
-        "@stencil/core": "~2.10.0"
-      }
-    },
-    "node_modules/ionicons/node_modules/@stencil/core": {
-      "version": "2.10.0",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.10.0.tgz",
-      "integrity": "sha512-15rWMTPQ/sp0lSV82HVCXkIya3QLN+uBl7pqK4JnTrp4HiLrzLmNbWjbvgCs55gw0lULbCIGbRIEsFz+Pe/Q+A==",
-      "dev": true,
-      "bin": {
-        "stencil": "bin/stencil"
-      },
-      "engines": {
-        "node": ">=12.10.0",
-        "npm": ">=6.0.0"
+        "@stencil/core": "~2.16.0"
       }
     },
     "node_modules/is-bigint": {
@@ -7116,13 +7103,13 @@
       "dev": true
     },
     "@ionic/core": {
-      "version": "6.1.7",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.1.7.tgz",
-      "integrity": "sha512-CUbH7xtKcPejHTyMvvUJZq4GIyLbL2YflzFH+mad1PoLN4TLwFTTKTDB1oeFNqwnTzaByeBvhEWSayxCbLgvjQ==",
+      "version": "6.1.8",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.1.8.tgz",
+      "integrity": "sha512-EMYebwmS4UogpNrTyuCgIETKwE7XA93V7X3YacK2UArm1Xf98w3FsnfAYeMaUqY93bDxih/CSKm3NpUhVWP44A==",
       "dev": true,
       "requires": {
-        "@stencil/core": "^2.14.2",
-        "ionicons": "^6.0.0",
+        "@stencil/core": "^2.16.0",
+        "ionicons": "^6.0.2",
         "tslib": "^2.1.0"
       },
       "dependencies": {
@@ -7337,9 +7324,9 @@
       }
     },
     "@stencil/core": {
-      "version": "2.15.1",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.15.1.tgz",
-      "integrity": "sha512-NYjRwQnjzscyFfqK+iIwRdr/dgYn33u6KE7kyQWdi7xsCkqMHalXYgJlN/QBQ9PN3qXmXKeBrJNG8EkNdCbK5g==",
+      "version": "2.16.0",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.16.0.tgz",
+      "integrity": "sha512-oKxPYxpH1no0oMFSf8EesuFBcn9hVpoqrpiS2WH0H50RKKL8hhKoxDfn/cNeD12L0Aj7kf6nNtexIllmkYG6lw==",
       "dev": true
     },
     "@types/estree": {
@@ -8813,20 +8800,12 @@
       }
     },
     "ionicons": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-6.0.0.tgz",
-      "integrity": "sha512-p83W1T8jZUlllHAjuIWaDQbI36OYqdrwcf8MhYbKW7+9rjGlCMP9+5OaR0W7tl0QfM004uAiy/zkc7HTpDNKgA==",
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-6.0.2.tgz",
+      "integrity": "sha512-AyKfFaUKVoBz4eB8XkU7H1R5HFnVsgq5ijqSdbXC0lES9PDK/J6LUQz6XUJq0mVVQF5k9kczSPOLMW3mszG0mQ==",
       "dev": true,
       "requires": {
-        "@stencil/core": "~2.10.0"
-      },
-      "dependencies": {
-        "@stencil/core": {
-          "version": "2.10.0",
-          "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.10.0.tgz",
-          "integrity": "sha512-15rWMTPQ/sp0lSV82HVCXkIya3QLN+uBl7pqK4JnTrp4HiLrzLmNbWjbvgCs55gw0lULbCIGbRIEsFz+Pe/Q+A==",
-          "dev": true
-        }
+        "@stencil/core": "~2.16.0"
       }
     },
     "is-bigint": {
diff --git a/packages/angular-server/package.json b/packages/angular-server/package.json
index cd70bd8c46..f2675b019f 100644
--- a/packages/angular-server/package.json
+++ b/packages/angular-server/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/angular-server",
-  "version": "6.1.7",
+  "version": "6.1.8",
   "description": "Angular SSR Module for Ionic",
   "keywords": [
     "ionic",
@@ -56,7 +56,7 @@
     "@angular/platform-browser": "^12.0.0",
     "@angular/platform-browser-dynamic": "^12.2.10",
     "@angular/platform-server": "^12.0.0",
-    "@ionic/core": "^6.1.7",
+    "@ionic/core": "^6.1.8",
     "@ionic/eslint-config": "^0.3.0",
     "@ionic/prettier-config": "^2.0.0",
     "@typescript-eslint/eslint-plugin": "^5.2.0",
diff --git a/packages/react-router/CHANGELOG.md b/packages/react-router/CHANGELOG.md
index 28e05a3865..ded77cc140 100644
--- 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.
 
+## [6.1.8](https://github.com/ionic-team/ionic/compare/v6.1.7...v6.1.8) (2022-06-01)
+
+**Note:** Version bump only for package @ionic/react-router
+
+
+
+
+
 ## [6.1.7](https://github.com/ionic-team/ionic/compare/v6.1.6...v6.1.7) (2022-05-26)
 
 **Note:** Version bump only for package @ionic/react-router
diff --git a/packages/react-router/package-lock.json b/packages/react-router/package-lock.json
index ec333bc24e..3f5cace519 100644
--- a/packages/react-router/package-lock.json
+++ b/packages/react-router/package-lock.json
@@ -1,15 +1,15 @@
 {
   "name": "@ionic/react-router",
-  "version": "6.1.7",
+  "version": "6.1.8",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/react-router",
-      "version": "6.1.7",
+      "version": "6.1.8",
       "license": "MIT",
       "dependencies": {
-        "@ionic/react": "^6.1.7",
+        "@ionic/react": "^6.1.8",
         "tslib": "*"
       },
       "devDependencies": {
@@ -148,22 +148,22 @@
       }
     },
     "node_modules/@ionic/core": {
-      "version": "6.1.7",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.1.7.tgz",
-      "integrity": "sha512-CUbH7xtKcPejHTyMvvUJZq4GIyLbL2YflzFH+mad1PoLN4TLwFTTKTDB1oeFNqwnTzaByeBvhEWSayxCbLgvjQ==",
+      "version": "6.1.8",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.1.8.tgz",
+      "integrity": "sha512-EMYebwmS4UogpNrTyuCgIETKwE7XA93V7X3YacK2UArm1Xf98w3FsnfAYeMaUqY93bDxih/CSKm3NpUhVWP44A==",
       "dependencies": {
-        "@stencil/core": "^2.14.2",
-        "ionicons": "^6.0.0",
+        "@stencil/core": "^2.16.0",
+        "ionicons": "^6.0.2",
         "tslib": "^2.1.0"
       }
     },
     "node_modules/@ionic/react": {
-      "version": "6.1.7",
-      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-6.1.7.tgz",
-      "integrity": "sha512-wlBG60Xvj6TU/T6CaBqhjJhep0jvxhwYaTJok+3zg4WNlON7M4BTP4doePNAvTC70U8E0rG069T5eRPlHAFWRA==",
+      "version": "6.1.8",
+      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-6.1.8.tgz",
+      "integrity": "sha512-GseGRtoGTz1CEyUJX3DhcWKxXZ4IVjiWrMO/skIR/gb/0GRYVJ9HSobXozLesFEN6hSJTnVIwJTgygWA9PiCfA==",
       "dependencies": {
-        "@ionic/core": "^6.1.7",
-        "ionicons": "^6.0.0",
+        "@ionic/core": "^6.1.8",
+        "ionicons": "^6.0.2",
         "tslib": "*"
       },
       "peerDependencies": {
@@ -246,9 +246,9 @@
       }
     },
     "node_modules/@stencil/core": {
-      "version": "2.15.2",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.15.2.tgz",
-      "integrity": "sha512-D6dv2KAXlWt9mjC28q0s6anghQgXRn0k93suOf+4pqsv1Uq19zNJXpYL68N5GxMSiNZyMPTU4Tt2NCbut7DVGg==",
+      "version": "2.16.0",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.16.0.tgz",
+      "integrity": "sha512-oKxPYxpH1no0oMFSf8EesuFBcn9hVpoqrpiS2WH0H50RKKL8hhKoxDfn/cNeD12L0Aj7kf6nNtexIllmkYG6lw==",
       "bin": {
         "stencil": "bin/stencil"
       },
@@ -1731,23 +1731,11 @@
       }
     },
     "node_modules/ionicons": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-6.0.1.tgz",
-      "integrity": "sha512-xQekOJsxH82O7oB+3F60zeRggCdND9pJ/k0E6IJDVUGGlCj5mlyFqNgxUimytKgstPGv3S+3EmCxjefvtGgWUg==",
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-6.0.2.tgz",
+      "integrity": "sha512-AyKfFaUKVoBz4eB8XkU7H1R5HFnVsgq5ijqSdbXC0lES9PDK/J6LUQz6XUJq0mVVQF5k9kczSPOLMW3mszG0mQ==",
       "dependencies": {
-        "@stencil/core": "~2.12.0"
-      }
-    },
-    "node_modules/ionicons/node_modules/@stencil/core": {
-      "version": "2.12.1",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.12.1.tgz",
-      "integrity": "sha512-u24TZ+FEvjnZt5ZgIkLjLpUNsO6Ml3mUZqwmqk81w6RWWz75hgB5p4RFI5rvuErFeh2xvMIGo+pNdG24XUBz1A==",
-      "bin": {
-        "stencil": "bin/stencil"
-      },
-      "engines": {
-        "node": ">=12.10.0",
-        "npm": ">=6.0.0"
+        "@stencil/core": "~2.16.0"
       }
     },
     "node_modules/is-arrayish": {
@@ -4501,22 +4489,22 @@
       }
     },
     "@ionic/core": {
-      "version": "6.1.7",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.1.7.tgz",
-      "integrity": "sha512-CUbH7xtKcPejHTyMvvUJZq4GIyLbL2YflzFH+mad1PoLN4TLwFTTKTDB1oeFNqwnTzaByeBvhEWSayxCbLgvjQ==",
+      "version": "6.1.8",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.1.8.tgz",
+      "integrity": "sha512-EMYebwmS4UogpNrTyuCgIETKwE7XA93V7X3YacK2UArm1Xf98w3FsnfAYeMaUqY93bDxih/CSKm3NpUhVWP44A==",
       "requires": {
-        "@stencil/core": "^2.14.2",
-        "ionicons": "^6.0.0",
+        "@stencil/core": "^2.16.0",
+        "ionicons": "^6.0.2",
         "tslib": "^2.1.0"
       }
     },
     "@ionic/react": {
-      "version": "6.1.7",
-      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-6.1.7.tgz",
-      "integrity": "sha512-wlBG60Xvj6TU/T6CaBqhjJhep0jvxhwYaTJok+3zg4WNlON7M4BTP4doePNAvTC70U8E0rG069T5eRPlHAFWRA==",
+      "version": "6.1.8",
+      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-6.1.8.tgz",
+      "integrity": "sha512-GseGRtoGTz1CEyUJX3DhcWKxXZ4IVjiWrMO/skIR/gb/0GRYVJ9HSobXozLesFEN6hSJTnVIwJTgygWA9PiCfA==",
       "requires": {
-        "@ionic/core": "^6.1.7",
-        "ionicons": "^6.0.0",
+        "@ionic/core": "^6.1.8",
+        "ionicons": "^6.0.2",
         "tslib": "*"
       }
     },
@@ -4560,9 +4548,9 @@
       "dev": true
     },
     "@stencil/core": {
-      "version": "2.15.2",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.15.2.tgz",
-      "integrity": "sha512-D6dv2KAXlWt9mjC28q0s6anghQgXRn0k93suOf+4pqsv1Uq19zNJXpYL68N5GxMSiNZyMPTU4Tt2NCbut7DVGg=="
+      "version": "2.16.0",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.16.0.tgz",
+      "integrity": "sha512-oKxPYxpH1no0oMFSf8EesuFBcn9hVpoqrpiS2WH0H50RKKL8hhKoxDfn/cNeD12L0Aj7kf6nNtexIllmkYG6lw=="
     },
     "@szmarczak/http-timer": {
       "version": "4.0.6",
@@ -5541,18 +5529,11 @@
       }
     },
     "ionicons": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-6.0.1.tgz",
-      "integrity": "sha512-xQekOJsxH82O7oB+3F60zeRggCdND9pJ/k0E6IJDVUGGlCj5mlyFqNgxUimytKgstPGv3S+3EmCxjefvtGgWUg==",
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-6.0.2.tgz",
+      "integrity": "sha512-AyKfFaUKVoBz4eB8XkU7H1R5HFnVsgq5ijqSdbXC0lES9PDK/J6LUQz6XUJq0mVVQF5k9kczSPOLMW3mszG0mQ==",
       "requires": {
-        "@stencil/core": "~2.12.0"
-      },
-      "dependencies": {
-        "@stencil/core": {
-          "version": "2.12.1",
-          "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.12.1.tgz",
-          "integrity": "sha512-u24TZ+FEvjnZt5ZgIkLjLpUNsO6Ml3mUZqwmqk81w6RWWz75hgB5p4RFI5rvuErFeh2xvMIGo+pNdG24XUBz1A=="
-        }
+        "@stencil/core": "~2.16.0"
       }
     },
     "is-arrayish": {
diff --git a/packages/react-router/package.json b/packages/react-router/package.json
index 3a52b86214..bb5c15a0d8 100644
--- a/packages/react-router/package.json
+++ b/packages/react-router/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/react-router",
-  "version": "6.1.7",
+  "version": "6.1.8",
   "description": "React Router wrapper for @ionic/react",
   "keywords": [
     "ionic",
@@ -37,7 +37,7 @@
     "dist/"
   ],
   "dependencies": {
-    "@ionic/react": "^6.1.7",
+    "@ionic/react": "^6.1.8",
     "tslib": "*"
   },
   "peerDependencies": {
diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md
index bf3b732aac..4518746c90 100644
--- a/packages/react/CHANGELOG.md
+++ b/packages/react/CHANGELOG.md
@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.1.8](https://github.com/ionic-team/ionic/compare/v6.1.7...v6.1.8) (2022-06-01)
+
+
+### Bug Fixes
+
+* **all:** improve compatibility with vite ([#25381](https://github.com/ionic-team/ionic/issues/25381)) ([d83bcd2](https://github.com/ionic-team/ionic/commit/d83bcd2b7f9937550008f995ff91517777584373)), closes [#23823](https://github.com/ionic-team/ionic/issues/23823)
+* **react:** present controller overlays in React 18 ([#25361](https://github.com/ionic-team/ionic/issues/25361)) ([01c40ea](https://github.com/ionic-team/ionic/commit/01c40eae5509f1c150d79269a7a75c05112fa343)), closes [#25247](https://github.com/ionic-team/ionic/issues/25247)
+
+
+
+
+
 ## [6.1.7](https://github.com/ionic-team/ionic/compare/v6.1.6...v6.1.7) (2022-05-26)
 
 
diff --git a/packages/react/package-lock.json b/packages/react/package-lock.json
index ad79f99819..8d04da743a 100644
--- a/packages/react/package-lock.json
+++ b/packages/react/package-lock.json
@@ -1,16 +1,16 @@
 {
   "name": "@ionic/react",
-  "version": "6.1.7",
+  "version": "6.1.8",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/react",
-      "version": "6.1.7",
+      "version": "6.1.8",
       "license": "MIT",
       "dependencies": {
-        "@ionic/core": "^6.1.7",
-        "ionicons": "^6.0.0",
+        "@ionic/core": "^6.1.8",
+        "ionicons": "^6.0.2",
         "tslib": "*"
       },
       "devDependencies": {
@@ -607,12 +607,12 @@
       }
     },
     "node_modules/@ionic/core": {
-      "version": "6.1.7",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.1.7.tgz",
-      "integrity": "sha512-CUbH7xtKcPejHTyMvvUJZq4GIyLbL2YflzFH+mad1PoLN4TLwFTTKTDB1oeFNqwnTzaByeBvhEWSayxCbLgvjQ==",
+      "version": "6.1.8",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.1.8.tgz",
+      "integrity": "sha512-EMYebwmS4UogpNrTyuCgIETKwE7XA93V7X3YacK2UArm1Xf98w3FsnfAYeMaUqY93bDxih/CSKm3NpUhVWP44A==",
       "dependencies": {
-        "@stencil/core": "^2.14.2",
-        "ionicons": "^6.0.0",
+        "@stencil/core": "^2.16.0",
+        "ionicons": "^6.0.2",
         "tslib": "^2.1.0"
       }
     },
@@ -1029,9 +1029,9 @@
       }
     },
     "node_modules/@stencil/core": {
-      "version": "2.15.1",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.15.1.tgz",
-      "integrity": "sha512-NYjRwQnjzscyFfqK+iIwRdr/dgYn33u6KE7kyQWdi7xsCkqMHalXYgJlN/QBQ9PN3qXmXKeBrJNG8EkNdCbK5g==",
+      "version": "2.16.0",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.16.0.tgz",
+      "integrity": "sha512-oKxPYxpH1no0oMFSf8EesuFBcn9hVpoqrpiS2WH0H50RKKL8hhKoxDfn/cNeD12L0Aj7kf6nNtexIllmkYG6lw==",
       "bin": {
         "stencil": "bin/stencil"
       },
@@ -3926,23 +3926,11 @@
       }
     },
     "node_modules/ionicons": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-6.0.0.tgz",
-      "integrity": "sha512-p83W1T8jZUlllHAjuIWaDQbI36OYqdrwcf8MhYbKW7+9rjGlCMP9+5OaR0W7tl0QfM004uAiy/zkc7HTpDNKgA==",
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-6.0.2.tgz",
+      "integrity": "sha512-AyKfFaUKVoBz4eB8XkU7H1R5HFnVsgq5ijqSdbXC0lES9PDK/J6LUQz6XUJq0mVVQF5k9kczSPOLMW3mszG0mQ==",
       "dependencies": {
-        "@stencil/core": "~2.10.0"
-      }
-    },
-    "node_modules/ionicons/node_modules/@stencil/core": {
-      "version": "2.10.0",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.10.0.tgz",
-      "integrity": "sha512-15rWMTPQ/sp0lSV82HVCXkIya3QLN+uBl7pqK4JnTrp4HiLrzLmNbWjbvgCs55gw0lULbCIGbRIEsFz+Pe/Q+A==",
-      "bin": {
-        "stencil": "bin/stencil"
-      },
-      "engines": {
-        "node": ">=12.10.0",
-        "npm": ">=6.0.0"
+        "@stencil/core": "~2.16.0"
       }
     },
     "node_modules/is-accessor-descriptor": {
@@ -9534,12 +9522,12 @@
       }
     },
     "@ionic/core": {
-      "version": "6.1.7",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.1.7.tgz",
-      "integrity": "sha512-CUbH7xtKcPejHTyMvvUJZq4GIyLbL2YflzFH+mad1PoLN4TLwFTTKTDB1oeFNqwnTzaByeBvhEWSayxCbLgvjQ==",
+      "version": "6.1.8",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.1.8.tgz",
+      "integrity": "sha512-EMYebwmS4UogpNrTyuCgIETKwE7XA93V7X3YacK2UArm1Xf98w3FsnfAYeMaUqY93bDxih/CSKm3NpUhVWP44A==",
       "requires": {
-        "@stencil/core": "^2.14.2",
-        "ionicons": "^6.0.0",
+        "@stencil/core": "^2.16.0",
+        "ionicons": "^6.0.2",
         "tslib": "^2.1.0"
       }
     },
@@ -9836,9 +9824,9 @@
       }
     },
     "@stencil/core": {
-      "version": "2.15.1",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.15.1.tgz",
-      "integrity": "sha512-NYjRwQnjzscyFfqK+iIwRdr/dgYn33u6KE7kyQWdi7xsCkqMHalXYgJlN/QBQ9PN3qXmXKeBrJNG8EkNdCbK5g=="
+      "version": "2.16.0",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.16.0.tgz",
+      "integrity": "sha512-oKxPYxpH1no0oMFSf8EesuFBcn9hVpoqrpiS2WH0H50RKKL8hhKoxDfn/cNeD12L0Aj7kf6nNtexIllmkYG6lw=="
     },
     "@szmarczak/http-timer": {
       "version": "4.0.6",
@@ -11765,18 +11753,11 @@
       }
     },
     "ionicons": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-6.0.0.tgz",
-      "integrity": "sha512-p83W1T8jZUlllHAjuIWaDQbI36OYqdrwcf8MhYbKW7+9rjGlCMP9+5OaR0W7tl0QfM004uAiy/zkc7HTpDNKgA==",
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-6.0.2.tgz",
+      "integrity": "sha512-AyKfFaUKVoBz4eB8XkU7H1R5HFnVsgq5ijqSdbXC0lES9PDK/J6LUQz6XUJq0mVVQF5k9kczSPOLMW3mszG0mQ==",
       "requires": {
-        "@stencil/core": "~2.10.0"
-      },
-      "dependencies": {
-        "@stencil/core": {
-          "version": "2.10.0",
-          "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.10.0.tgz",
-          "integrity": "sha512-15rWMTPQ/sp0lSV82HVCXkIya3QLN+uBl7pqK4JnTrp4HiLrzLmNbWjbvgCs55gw0lULbCIGbRIEsFz+Pe/Q+A=="
-        }
+        "@stencil/core": "~2.16.0"
       }
     },
     "is-accessor-descriptor": {
diff --git a/packages/react/package.json b/packages/react/package.json
index ec25da9d98..747c1affaf 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/react",
-  "version": "6.1.7",
+  "version": "6.1.8",
   "description": "React specific wrapper for @ionic/core",
   "keywords": [
     "ionic",
@@ -41,8 +41,8 @@
     "css/"
   ],
   "dependencies": {
-    "@ionic/core": "^6.1.7",
-    "ionicons": "^6.0.0",
+    "@ionic/core": "^6.1.8",
+    "ionicons": "^6.0.2",
     "tslib": "*"
   },
   "peerDependencies": {
diff --git a/packages/react/src/components/createControllerComponent.tsx b/packages/react/src/components/createControllerComponent.tsx
index 8078d00aab..4f3dc6d82c 100644
--- a/packages/react/src/components/createControllerComponent.tsx
+++ b/packages/react/src/components/createControllerComponent.tsx
@@ -1,7 +1,12 @@
 import { OverlayEventDetail } from '@ionic/core/components';
 import React from 'react';
 
-import { attachProps, dashToPascalCase, defineCustomElement, setRef } from './react-component-lib/utils';
+import {
+  attachProps,
+  dashToPascalCase,
+  defineCustomElement,
+  setRef,
+} from './react-component-lib/utils';
 
 interface OverlayBase extends HTMLElement {
   present: () => Promise<void>;
@@ -39,7 +44,7 @@ export const createControllerComponent = <
 
   class Overlay extends React.Component<Props> {
     overlay?: OverlayType;
-    isUnmounted = false;
+    willUnmount = false;
 
     constructor(props: Props) {
       super(props);
@@ -51,6 +56,14 @@ export const createControllerComponent = <
     }
 
     async componentDidMount() {
+      /**
+       * Starting in React v18, strict mode will unmount and remount a component.
+       * See: https://reactjs.org/blog/2022/03/29/react-v18.html#new-strict-mode-behaviors
+       *
+       * We need to reset this flag when the component is re-mounted so that
+       * overlay.present() will be called and the overlay will display.
+       */
+      this.willUnmount = false;
       const { isOpen } = this.props;
       if (isOpen as boolean) {
         this.present();
@@ -58,7 +71,7 @@ export const createControllerComponent = <
     }
 
     componentWillUnmount() {
-      this.isUnmounted = true;
+      this.willUnmount = true;
       if (this.overlay) {
         this.overlay.dismiss();
       }
@@ -77,18 +90,17 @@ export const createControllerComponent = <
       if (this.props.onDidDismiss) {
         this.props.onDidDismiss(event);
       }
-      setRef(this.props.forwardedRef, null)
+      setRef(this.props.forwardedRef, null);
     }
 
     async present(prevProps?: Props) {
-      const {
-        isOpen,
-        onDidDismiss,
-        onDidPresent,
-        onWillDismiss,
-        onWillPresent,
-        ...cProps
-      } = this.props;
+      const { isOpen, onDidDismiss, onDidPresent, onWillDismiss, onWillPresent, ...cProps } =
+        this.props;
+
+      if (this.overlay) {
+        this.overlay.remove();
+      }
+
       this.overlay = await controller.create({
         ...(cProps as any),
       });
@@ -107,8 +119,8 @@ export const createControllerComponent = <
       );
       // Check isOpen again since the value could have changed during the async call to controller.create
       // It's also possible for the component to have become unmounted.
-      if (this.props.isOpen === true && this.isUnmounted === false) {
-        setRef(this.props.forwardedRef, this.overlay)
+      if (this.props.isOpen === true && this.willUnmount === false) {
+        setRef(this.props.forwardedRef, this.overlay);
         await this.overlay.present();
       }
     }
diff --git a/packages/vue-router/CHANGELOG.md b/packages/vue-router/CHANGELOG.md
index ac0d172092..645a42864c 100644
--- 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.
 
+## [6.1.8](https://github.com/ionic-team/ionic/compare/v6.1.7...v6.1.8) (2022-06-01)
+
+**Note:** Version bump only for package @ionic/vue-router
+
+
+
+
+
 ## [6.1.7](https://github.com/ionic-team/ionic/compare/v6.1.6...v6.1.7) (2022-05-26)
 
 
diff --git a/packages/vue-router/package-lock.json b/packages/vue-router/package-lock.json
index 0088f71e01..c72c8bb483 100644
--- a/packages/vue-router/package-lock.json
+++ b/packages/vue-router/package-lock.json
@@ -1,15 +1,15 @@
 {
   "name": "@ionic/vue-router",
-  "version": "6.1.7",
+  "version": "6.1.8",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/vue-router",
-      "version": "6.1.7",
+      "version": "6.1.8",
       "license": "MIT",
       "dependencies": {
-        "@ionic/vue": "^6.1.7"
+        "@ionic/vue": "^6.1.8"
       },
       "devDependencies": {
         "@types/jest": "^26.0.13",
@@ -563,22 +563,22 @@
       "license": "MIT"
     },
     "node_modules/@ionic/core": {
-      "version": "6.1.7",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.1.7.tgz",
-      "integrity": "sha512-CUbH7xtKcPejHTyMvvUJZq4GIyLbL2YflzFH+mad1PoLN4TLwFTTKTDB1oeFNqwnTzaByeBvhEWSayxCbLgvjQ==",
+      "version": "6.1.8",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.1.8.tgz",
+      "integrity": "sha512-EMYebwmS4UogpNrTyuCgIETKwE7XA93V7X3YacK2UArm1Xf98w3FsnfAYeMaUqY93bDxih/CSKm3NpUhVWP44A==",
       "dependencies": {
-        "@stencil/core": "^2.14.2",
-        "ionicons": "^6.0.0",
+        "@stencil/core": "^2.16.0",
+        "ionicons": "^6.0.2",
         "tslib": "^2.1.0"
       }
     },
     "node_modules/@ionic/vue": {
-      "version": "6.1.7",
-      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-6.1.7.tgz",
-      "integrity": "sha512-TXVFkajBsmNBhMdlQ1P6JV/8aPIOvnR4d3lj8Mo9UVidp9Z7Qc992f2wti/bsdiBUm3iXoDK5YjQridPSPS7pQ==",
+      "version": "6.1.8",
+      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-6.1.8.tgz",
+      "integrity": "sha512-bziDDBMr6w9XLxkiXeASD/g16g0qvU2cGeaTD9n7+5ucsebVCbHiIblHgT+g1AiYYIoKee01yGAOpe1lC0EahA==",
       "dependencies": {
-        "@ionic/core": "^6.1.7",
-        "ionicons": "^6.0.0"
+        "@ionic/core": "^6.1.8",
+        "ionicons": "^6.0.2"
       }
     },
     "node_modules/@istanbuljs/load-nyc-config": {
@@ -1377,9 +1377,9 @@
       }
     },
     "node_modules/@stencil/core": {
-      "version": "2.15.2",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.15.2.tgz",
-      "integrity": "sha512-D6dv2KAXlWt9mjC28q0s6anghQgXRn0k93suOf+4pqsv1Uq19zNJXpYL68N5GxMSiNZyMPTU4Tt2NCbut7DVGg==",
+      "version": "2.16.0",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.16.0.tgz",
+      "integrity": "sha512-oKxPYxpH1no0oMFSf8EesuFBcn9hVpoqrpiS2WH0H50RKKL8hhKoxDfn/cNeD12L0Aj7kf6nNtexIllmkYG6lw==",
       "bin": {
         "stencil": "bin/stencil"
       },
@@ -2618,23 +2618,11 @@
       "license": "ISC"
     },
     "node_modules/ionicons": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-6.0.1.tgz",
-      "integrity": "sha512-xQekOJsxH82O7oB+3F60zeRggCdND9pJ/k0E6IJDVUGGlCj5mlyFqNgxUimytKgstPGv3S+3EmCxjefvtGgWUg==",
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-6.0.2.tgz",
+      "integrity": "sha512-AyKfFaUKVoBz4eB8XkU7H1R5HFnVsgq5ijqSdbXC0lES9PDK/J6LUQz6XUJq0mVVQF5k9kczSPOLMW3mszG0mQ==",
       "dependencies": {
-        "@stencil/core": "~2.12.0"
-      }
-    },
-    "node_modules/ionicons/node_modules/@stencil/core": {
-      "version": "2.12.1",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.12.1.tgz",
-      "integrity": "sha512-u24TZ+FEvjnZt5ZgIkLjLpUNsO6Ml3mUZqwmqk81w6RWWz75hgB5p4RFI5rvuErFeh2xvMIGo+pNdG24XUBz1A==",
-      "bin": {
-        "stencil": "bin/stencil"
-      },
-      "engines": {
-        "node": ">=12.10.0",
-        "npm": ">=6.0.0"
+        "@stencil/core": "~2.16.0"
       }
     },
     "node_modules/is-ci": {
@@ -6630,22 +6618,22 @@
       "dev": true
     },
     "@ionic/core": {
-      "version": "6.1.7",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.1.7.tgz",
-      "integrity": "sha512-CUbH7xtKcPejHTyMvvUJZq4GIyLbL2YflzFH+mad1PoLN4TLwFTTKTDB1oeFNqwnTzaByeBvhEWSayxCbLgvjQ==",
+      "version": "6.1.8",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.1.8.tgz",
+      "integrity": "sha512-EMYebwmS4UogpNrTyuCgIETKwE7XA93V7X3YacK2UArm1Xf98w3FsnfAYeMaUqY93bDxih/CSKm3NpUhVWP44A==",
       "requires": {
-        "@stencil/core": "^2.14.2",
-        "ionicons": "^6.0.0",
+        "@stencil/core": "^2.16.0",
+        "ionicons": "^6.0.2",
         "tslib": "^2.1.0"
       }
     },
     "@ionic/vue": {
-      "version": "6.1.7",
-      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-6.1.7.tgz",
-      "integrity": "sha512-TXVFkajBsmNBhMdlQ1P6JV/8aPIOvnR4d3lj8Mo9UVidp9Z7Qc992f2wti/bsdiBUm3iXoDK5YjQridPSPS7pQ==",
+      "version": "6.1.8",
+      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-6.1.8.tgz",
+      "integrity": "sha512-bziDDBMr6w9XLxkiXeASD/g16g0qvU2cGeaTD9n7+5ucsebVCbHiIblHgT+g1AiYYIoKee01yGAOpe1lC0EahA==",
       "requires": {
-        "@ionic/core": "^6.1.7",
-        "ionicons": "^6.0.0"
+        "@ionic/core": "^6.1.8",
+        "ionicons": "^6.0.2"
       }
     },
     "@istanbuljs/load-nyc-config": {
@@ -7241,9 +7229,9 @@
       }
     },
     "@stencil/core": {
-      "version": "2.15.2",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.15.2.tgz",
-      "integrity": "sha512-D6dv2KAXlWt9mjC28q0s6anghQgXRn0k93suOf+4pqsv1Uq19zNJXpYL68N5GxMSiNZyMPTU4Tt2NCbut7DVGg=="
+      "version": "2.16.0",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.16.0.tgz",
+      "integrity": "sha512-oKxPYxpH1no0oMFSf8EesuFBcn9hVpoqrpiS2WH0H50RKKL8hhKoxDfn/cNeD12L0Aj7kf6nNtexIllmkYG6lw=="
     },
     "@tootallnate/once": {
       "version": "1.1.2",
@@ -8073,18 +8061,11 @@
       "dev": true
     },
     "ionicons": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-6.0.1.tgz",
-      "integrity": "sha512-xQekOJsxH82O7oB+3F60zeRggCdND9pJ/k0E6IJDVUGGlCj5mlyFqNgxUimytKgstPGv3S+3EmCxjefvtGgWUg==",
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-6.0.2.tgz",
+      "integrity": "sha512-AyKfFaUKVoBz4eB8XkU7H1R5HFnVsgq5ijqSdbXC0lES9PDK/J6LUQz6XUJq0mVVQF5k9kczSPOLMW3mszG0mQ==",
       "requires": {
-        "@stencil/core": "~2.12.0"
-      },
-      "dependencies": {
-        "@stencil/core": {
-          "version": "2.12.1",
-          "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.12.1.tgz",
-          "integrity": "sha512-u24TZ+FEvjnZt5ZgIkLjLpUNsO6Ml3mUZqwmqk81w6RWWz75hgB5p4RFI5rvuErFeh2xvMIGo+pNdG24XUBz1A=="
-        }
+        "@stencil/core": "~2.16.0"
       }
     },
     "is-ci": {
diff --git a/packages/vue-router/package.json b/packages/vue-router/package.json
index cac1d4dbf5..b7232e1199 100644
--- a/packages/vue-router/package.json
+++ b/packages/vue-router/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/vue-router",
-  "version": "6.1.7",
+  "version": "6.1.8",
   "description": "Vue Router integration for @ionic/vue",
   "scripts": {
     "prepublishOnly": "npm run build",
@@ -44,7 +44,7 @@
   },
   "homepage": "https://github.com/ionic-team/ionic#readme",
   "dependencies": {
-    "@ionic/vue": "^6.1.7"
+    "@ionic/vue": "^6.1.8"
   },
   "devDependencies": {
     "@types/jest": "^26.0.13",
diff --git a/packages/vue/CHANGELOG.md b/packages/vue/CHANGELOG.md
index 18dde7b455..e036bdade7 100644
--- a/packages/vue/CHANGELOG.md
+++ b/packages/vue/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.
 
+## [6.1.8](https://github.com/ionic-team/ionic/compare/v6.1.7...v6.1.8) (2022-06-01)
+
+
+### Bug Fixes
+
+* **all:** improve compatibility with vite ([#25381](https://github.com/ionic-team/ionic/issues/25381)) ([d83bcd2](https://github.com/ionic-team/ionic/commit/d83bcd2b7f9937550008f995ff91517777584373)), closes [#23823](https://github.com/ionic-team/ionic/issues/23823)
+
+
+
+
+
 ## [6.1.7](https://github.com/ionic-team/ionic/compare/v6.1.6...v6.1.7) (2022-05-26)
 
 
diff --git a/packages/vue/package-lock.json b/packages/vue/package-lock.json
index 8a5ef51822..fd6c7cd201 100644
--- a/packages/vue/package-lock.json
+++ b/packages/vue/package-lock.json
@@ -1,16 +1,16 @@
 {
   "name": "@ionic/vue",
-  "version": "6.1.7",
+  "version": "6.1.8",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/vue",
-      "version": "6.1.7",
+      "version": "6.1.8",
       "license": "MIT",
       "dependencies": {
-        "@ionic/core": "^6.1.7",
-        "ionicons": "^6.0.0"
+        "@ionic/core": "^6.1.8",
+        "ionicons": "^6.0.2"
       },
       "devDependencies": {
         "@stencil/core": "^1.17.0",
@@ -53,19 +53,19 @@
       }
     },
     "node_modules/@ionic/core": {
-      "version": "6.1.7",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.1.7.tgz",
-      "integrity": "sha512-CUbH7xtKcPejHTyMvvUJZq4GIyLbL2YflzFH+mad1PoLN4TLwFTTKTDB1oeFNqwnTzaByeBvhEWSayxCbLgvjQ==",
+      "version": "6.1.8",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.1.8.tgz",
+      "integrity": "sha512-EMYebwmS4UogpNrTyuCgIETKwE7XA93V7X3YacK2UArm1Xf98w3FsnfAYeMaUqY93bDxih/CSKm3NpUhVWP44A==",
       "dependencies": {
-        "@stencil/core": "^2.14.2",
-        "ionicons": "^6.0.0",
+        "@stencil/core": "^2.16.0",
+        "ionicons": "^6.0.2",
         "tslib": "^2.1.0"
       }
     },
     "node_modules/@ionic/core/node_modules/@stencil/core": {
-      "version": "2.15.1",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.15.1.tgz",
-      "integrity": "sha512-NYjRwQnjzscyFfqK+iIwRdr/dgYn33u6KE7kyQWdi7xsCkqMHalXYgJlN/QBQ9PN3qXmXKeBrJNG8EkNdCbK5g==",
+      "version": "2.16.0",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.16.0.tgz",
+      "integrity": "sha512-oKxPYxpH1no0oMFSf8EesuFBcn9hVpoqrpiS2WH0H50RKKL8hhKoxDfn/cNeD12L0Aj7kf6nNtexIllmkYG6lw==",
       "bin": {
         "stencil": "bin/stencil"
       },
@@ -356,17 +356,17 @@
       "dev": true
     },
     "node_modules/ionicons": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-6.0.0.tgz",
-      "integrity": "sha512-p83W1T8jZUlllHAjuIWaDQbI36OYqdrwcf8MhYbKW7+9rjGlCMP9+5OaR0W7tl0QfM004uAiy/zkc7HTpDNKgA==",
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-6.0.2.tgz",
+      "integrity": "sha512-AyKfFaUKVoBz4eB8XkU7H1R5HFnVsgq5ijqSdbXC0lES9PDK/J6LUQz6XUJq0mVVQF5k9kczSPOLMW3mszG0mQ==",
       "dependencies": {
-        "@stencil/core": "~2.10.0"
+        "@stencil/core": "~2.16.0"
       }
     },
     "node_modules/ionicons/node_modules/@stencil/core": {
-      "version": "2.10.0",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.10.0.tgz",
-      "integrity": "sha512-15rWMTPQ/sp0lSV82HVCXkIya3QLN+uBl7pqK4JnTrp4HiLrzLmNbWjbvgCs55gw0lULbCIGbRIEsFz+Pe/Q+A==",
+      "version": "2.16.0",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.16.0.tgz",
+      "integrity": "sha512-oKxPYxpH1no0oMFSf8EesuFBcn9hVpoqrpiS2WH0H50RKKL8hhKoxDfn/cNeD12L0Aj7kf6nNtexIllmkYG6lw==",
       "bin": {
         "stencil": "bin/stencil"
       },
@@ -633,19 +633,19 @@
       }
     },
     "@ionic/core": {
-      "version": "6.1.7",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.1.7.tgz",
-      "integrity": "sha512-CUbH7xtKcPejHTyMvvUJZq4GIyLbL2YflzFH+mad1PoLN4TLwFTTKTDB1oeFNqwnTzaByeBvhEWSayxCbLgvjQ==",
+      "version": "6.1.8",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.1.8.tgz",
+      "integrity": "sha512-EMYebwmS4UogpNrTyuCgIETKwE7XA93V7X3YacK2UArm1Xf98w3FsnfAYeMaUqY93bDxih/CSKm3NpUhVWP44A==",
       "requires": {
-        "@stencil/core": "^2.14.2",
-        "ionicons": "^6.0.0",
+        "@stencil/core": "^2.16.0",
+        "ionicons": "^6.0.2",
         "tslib": "^2.1.0"
       },
       "dependencies": {
         "@stencil/core": {
-          "version": "2.15.1",
-          "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.15.1.tgz",
-          "integrity": "sha512-NYjRwQnjzscyFfqK+iIwRdr/dgYn33u6KE7kyQWdi7xsCkqMHalXYgJlN/QBQ9PN3qXmXKeBrJNG8EkNdCbK5g=="
+          "version": "2.16.0",
+          "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.16.0.tgz",
+          "integrity": "sha512-oKxPYxpH1no0oMFSf8EesuFBcn9hVpoqrpiS2WH0H50RKKL8hhKoxDfn/cNeD12L0Aj7kf6nNtexIllmkYG6lw=="
         },
         "tslib": {
           "version": "2.2.0",
@@ -904,17 +904,17 @@
       "dev": true
     },
     "ionicons": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-6.0.0.tgz",
-      "integrity": "sha512-p83W1T8jZUlllHAjuIWaDQbI36OYqdrwcf8MhYbKW7+9rjGlCMP9+5OaR0W7tl0QfM004uAiy/zkc7HTpDNKgA==",
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-6.0.2.tgz",
+      "integrity": "sha512-AyKfFaUKVoBz4eB8XkU7H1R5HFnVsgq5ijqSdbXC0lES9PDK/J6LUQz6XUJq0mVVQF5k9kczSPOLMW3mszG0mQ==",
       "requires": {
-        "@stencil/core": "~2.10.0"
+        "@stencil/core": "~2.16.0"
       },
       "dependencies": {
         "@stencil/core": {
-          "version": "2.10.0",
-          "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.10.0.tgz",
-          "integrity": "sha512-15rWMTPQ/sp0lSV82HVCXkIya3QLN+uBl7pqK4JnTrp4HiLrzLmNbWjbvgCs55gw0lULbCIGbRIEsFz+Pe/Q+A=="
+          "version": "2.16.0",
+          "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.16.0.tgz",
+          "integrity": "sha512-oKxPYxpH1no0oMFSf8EesuFBcn9hVpoqrpiS2WH0H50RKKL8hhKoxDfn/cNeD12L0Aj7kf6nNtexIllmkYG6lw=="
         }
       }
     },
diff --git a/packages/vue/package.json b/packages/vue/package.json
index 63b3568b74..0622c2863c 100644
--- a/packages/vue/package.json
+++ b/packages/vue/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/vue",
-  "version": "6.1.7",
+  "version": "6.1.8",
   "description": "Vue specific wrapper for @ionic/core",
   "scripts": {
     "prepublishOnly": "npm run build",
@@ -60,8 +60,8 @@
     "vue-router": "^4.0.0-rc.4"
   },
   "dependencies": {
-    "@ionic/core": "^6.1.7",
-    "ionicons": "^6.0.0"
+    "@ionic/core": "^6.1.8",
+    "ionicons": "^6.0.2"
   },
   "vetur": {
     "tags": "dist/vetur/tags.json",