diff --git a/CHANGELOG.md b/CHANGELOG.md
index 526131caa8..730d1aa64e 100644
--- a/CHANGELOG.md
+++ b/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.3.4](https://github.com/ionic-team/ionic-framework/compare/v6.3.3...v6.3.4) (2022-11-02)
+
+
+### Bug Fixes
+
+* **datetime:** account for allowed values when setting default date ([#26093](https://github.com/ionic-team/ionic-framework/issues/26093)) ([3745083](https://github.com/ionic-team/ionic-framework/commit/3745083b7cdf8651d1c7f5f1a0214b487ea286ca)), closes [#24722](https://github.com/ionic-team/ionic-framework/issues/24722)
+* **modal, popover:** remove trigger click listeners when overlay is unmounted ([#26167](https://github.com/ionic-team/ionic-framework/issues/26167)) ([1320948](https://github.com/ionic-team/ionic-framework/commit/1320948b245be3defe8610b9f049e781a4903a6e))
+* **modal:** buttons are highlighted with VoiceOver ([#26180](https://github.com/ionic-team/ionic-framework/issues/26180)) ([1504b88](https://github.com/ionic-team/ionic-framework/commit/1504b8888d6f79ea382935ed52b104b9f841d150)), closes [#26156](https://github.com/ionic-team/ionic-framework/issues/26156)
+
+
+
+
+
 ## [6.3.3](https://github.com/ionic-team/ionic-framework/compare/v6.3.2...v6.3.3) (2022-10-26)
 
 
diff --git a/angular/CHANGELOG.md b/angular/CHANGELOG.md
index 5c706838f1..2c99b1c16f 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.3.4](https://github.com/ionic-team/ionic/compare/v6.3.3...v6.3.4) (2022-11-02)
+
+**Note:** Version bump only for package @ionic/angular
+
+
+
+
+
 ## [6.3.3](https://github.com/ionic-team/ionic/compare/v6.3.2...v6.3.3) (2022-10-26)
 
 
diff --git a/angular/package-lock.json b/angular/package-lock.json
index b9108213ae..eb1c42caf5 100644
--- a/angular/package-lock.json
+++ b/angular/package-lock.json
@@ -1,15 +1,15 @@
 {
   "name": "@ionic/angular",
-  "version": "6.3.3",
+  "version": "6.3.4",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/angular",
-      "version": "6.3.3",
+      "version": "6.3.4",
       "license": "MIT",
       "dependencies": {
-        "@ionic/core": "^6.3.3",
+        "@ionic/core": "^6.3.4",
         "jsonc-parser": "^3.0.0",
         "tslib": "^2.0.0"
       },
@@ -1023,9 +1023,9 @@
       "dev": true
     },
     "node_modules/@ionic/core": {
-      "version": "6.3.3",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.3.3.tgz",
-      "integrity": "sha512-I7eRsni/3blStScsQcITb4seuunNzS4mIK0GxHljeRRb8oQI9Xy/oP4rq9weo9lsuEVD0sHIqBIS7/Oo9iEymQ==",
+      "version": "6.3.4",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.3.4.tgz",
+      "integrity": "sha512-3EnKqFdon7Im8JNvuPoq/iGyYK7hskdb9u5hlQE0fHU/9Q0DvFVh17QTq1sQjXntoJovfRhaPJhG+kvZK3mVAQ==",
       "dependencies": {
         "@stencil/core": "^2.18.0",
         "ionicons": "^6.0.3",
@@ -7951,9 +7951,9 @@
       "dev": true
     },
     "@ionic/core": {
-      "version": "6.3.3",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.3.3.tgz",
-      "integrity": "sha512-I7eRsni/3blStScsQcITb4seuunNzS4mIK0GxHljeRRb8oQI9Xy/oP4rq9weo9lsuEVD0sHIqBIS7/Oo9iEymQ==",
+      "version": "6.3.4",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.3.4.tgz",
+      "integrity": "sha512-3EnKqFdon7Im8JNvuPoq/iGyYK7hskdb9u5hlQE0fHU/9Q0DvFVh17QTq1sQjXntoJovfRhaPJhG+kvZK3mVAQ==",
       "requires": {
         "@stencil/core": "^2.18.0",
         "ionicons": "^6.0.3",
diff --git a/angular/package.json b/angular/package.json
index 4314e2255a..0eaf227f40 100644
--- a/angular/package.json
+++ b/angular/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/angular",
-  "version": "6.3.3",
+  "version": "6.3.4",
   "description": "Angular specific wrappers for @ionic/core",
   "keywords": [
     "ionic",
@@ -45,7 +45,7 @@
     "validate": "npm i && npm run lint && npm run test && npm run build"
   },
   "dependencies": {
-    "@ionic/core": "^6.3.3",
+    "@ionic/core": "^6.3.4",
     "jsonc-parser": "^3.0.0",
     "tslib": "^2.0.0"
   },
diff --git a/core/CHANGELOG.md b/core/CHANGELOG.md
index a416ba63ca..080efc1027 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.3.4](https://github.com/ionic-team/ionic/compare/v6.3.3...v6.3.4) (2022-11-02)
+
+
+### Bug Fixes
+
+* **datetime:** account for allowed values when setting default date ([#26093](https://github.com/ionic-team/ionic/issues/26093)) ([3745083](https://github.com/ionic-team/ionic/commit/3745083b7cdf8651d1c7f5f1a0214b487ea286ca)), closes [#24722](https://github.com/ionic-team/ionic/issues/24722)
+* **modal, popover:** remove trigger click listeners when overlay is unmounted ([#26167](https://github.com/ionic-team/ionic/issues/26167)) ([1320948](https://github.com/ionic-team/ionic/commit/1320948b245be3defe8610b9f049e781a4903a6e))
+* **modal:** buttons are highlighted with VoiceOver ([#26180](https://github.com/ionic-team/ionic/issues/26180)) ([1504b88](https://github.com/ionic-team/ionic/commit/1504b8888d6f79ea382935ed52b104b9f841d150)), closes [#26156](https://github.com/ionic-team/ionic/issues/26156)
+
+
+
+
+
 ## [6.3.3](https://github.com/ionic-team/ionic/compare/v6.3.2...v6.3.3) (2022-10-26)
 
 
diff --git a/core/package-lock.json b/core/package-lock.json
index 7140e95437..ba1dc250cb 100644
--- a/core/package-lock.json
+++ b/core/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@ionic/core",
-  "version": "6.3.3",
+  "version": "6.3.4",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/core",
-      "version": "6.3.3",
+      "version": "6.3.4",
       "license": "MIT",
       "dependencies": {
         "@stencil/core": "^2.18.0",
diff --git a/core/package.json b/core/package.json
index 9c630fc5e5..5bc356f244 100644
--- a/core/package.json
+++ b/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/core",
-  "version": "6.3.3",
+  "version": "6.3.4",
   "description": "Base components for Ionic",
   "keywords": [
     "ionic",
diff --git a/core/playwright.config.ts b/core/playwright.config.ts
index 32d2d13282..9ca446da6b 100644
--- a/core/playwright.config.ts
+++ b/core/playwright.config.ts
@@ -1,11 +1,11 @@
-import type { PlaywrightTestConfig } from '@playwright/test';
+import type { PlaywrightTestConfig, PlaywrightTestOptions, PlaywrightWorkerOptions, Project } from '@playwright/test';
 import { devices, expect } from '@playwright/test';
 
 import { matchers } from './src/utils/test/playwright';
 
 expect.extend(matchers);
 
-const projects = [
+const projects: Project<PlaywrightTestOptions, PlaywrightWorkerOptions>[] = [
   {
     /**
      * This is really just desktop Firefox
@@ -24,10 +24,6 @@ const projects = [
         width: 393,
         height: 727
       },
-      screen: {
-        width: 393,
-        height: 851
-      }
     },
   },
   {
@@ -49,7 +45,7 @@ const projects = [
 const modes = ['ios', 'md'];
 
 const generateProjects = () => {
-  const projectsWithMetadata = [];
+  const projectsWithMetadata: Project<PlaywrightTestOptions, PlaywrightWorkerOptions>[] = [];
 
   modes.forEach(mode => {
     projects.forEach(project => {
@@ -105,9 +101,6 @@ const config: PlaywrightTestConfig = {
   use: {
     /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
     actionTimeout: 0,
-    /* Base URL to use in actions like `await page.goto('/')`. */
-    // baseURL: 'http://localhost:3000',
-
     /**
      * All failed tests should create
      * a trace file for easier debugging.
diff --git a/core/src/components/datetime/datetime.tsx b/core/src/components/datetime/datetime.tsx
index e7410c9086..1b80022207 100644
--- a/core/src/components/datetime/datetime.tsx
+++ b/core/src/components/datetime/datetime.tsx
@@ -36,6 +36,7 @@ import { is24Hour, isLocaleDayPeriodRTL, isMonthFirstLocale, getNumDaysInMonth }
 import {
   calculateHourFromAMPM,
   convertDataToISO,
+  getClosestValidDate,
   getEndOfWeek,
   getNextDay,
   getNextMonth,
@@ -96,7 +97,8 @@ export class Datetime implements ComponentInterface {
 
   private minParts?: any;
   private maxParts?: any;
-  private todayParts = parseDate(getToday());
+  private todayParts!: DatetimeParts;
+  private defaultParts!: DatetimeParts;
 
   private prevPresentation: string | null = null;
 
@@ -559,13 +561,13 @@ export class Datetime implements ComponentInterface {
    * may not be set. This function works
    * by returning the first selected date in
    * "activePartsClone" and then falling back to
-   * today's DatetimeParts if no active date is selected.
+   * defaultParts if no active date is selected.
    */
-  private getDefaultPart = (): DatetimeParts => {
-    const { activePartsClone, todayParts } = this;
+  private getActivePartsWithFallback = () => {
+    const { activePartsClone, defaultParts } = this;
 
     const firstPart = Array.isArray(activePartsClone) ? activePartsClone[0] : activePartsClone;
-    return firstPart ?? todayParts;
+    return firstPart ?? defaultParts;
   };
 
   private closeParentOverlay = () => {
@@ -780,24 +782,24 @@ export class Datetime implements ComponentInterface {
   };
 
   private processMinParts = () => {
-    const { min, todayParts } = this;
+    const { min, defaultParts } = this;
     if (min === undefined) {
       this.minParts = undefined;
       return;
     }
 
-    this.minParts = parseMinParts(min, todayParts);
+    this.minParts = parseMinParts(min, defaultParts);
   };
 
   private processMaxParts = () => {
-    const { max, todayParts } = this;
+    const { max, defaultParts } = this;
 
     if (max === undefined) {
       this.maxParts = undefined;
       return;
     }
 
-    this.maxParts = parseMaxParts(max, todayParts);
+    this.maxParts = parseMaxParts(max, defaultParts);
   };
 
   private initializeCalendarListener = () => {
@@ -1158,7 +1160,7 @@ export class Datetime implements ComponentInterface {
      * TODO FW-2646 remove value !== ''
      */
     const hasValue = value !== '' && value !== null && value !== undefined;
-    let valueToProcess = parseDate(hasValue ? value : getToday());
+    let valueToProcess = hasValue ? parseDate(value) : this.defaultParts;
 
     const { minParts, maxParts, multiple } = this;
     if (!multiple && Array.isArray(value)) {
@@ -1236,12 +1238,16 @@ export class Datetime implements ComponentInterface {
 
     this.processMinParts();
     this.processMaxParts();
+    const hourValues = (this.parsedHourValues = convertToArrayOfNumbers(this.hourValues));
+    const minuteValues = (this.parsedMinuteValues = convertToArrayOfNumbers(this.minuteValues));
+    const monthValues = (this.parsedMonthValues = convertToArrayOfNumbers(this.monthValues));
+    const yearValues = (this.parsedYearValues = convertToArrayOfNumbers(this.yearValues));
+    const dayValues = (this.parsedDayValues = convertToArrayOfNumbers(this.dayValues));
+
+    const todayParts = (this.todayParts = parseDate(getToday()));
+    this.defaultParts = getClosestValidDate(todayParts, monthValues, dayValues, yearValues, hourValues, minuteValues);
     this.processValue(this.value);
-    this.parsedHourValues = convertToArrayOfNumbers(this.hourValues);
-    this.parsedMinuteValues = convertToArrayOfNumbers(this.minuteValues);
-    this.parsedMonthValues = convertToArrayOfNumbers(this.monthValues);
-    this.parsedYearValues = convertToArrayOfNumbers(this.yearValues);
-    this.parsedDayValues = convertToArrayOfNumbers(this.dayValues);
+
     this.emitStyle();
   }
 
@@ -1396,9 +1402,9 @@ export class Datetime implements ComponentInterface {
   }
 
   private renderCombinedDatePickerColumn() {
-    const { workingParts, locale, minParts, maxParts, todayParts, isDateEnabled } = this;
+    const { defaultParts, workingParts, locale, minParts, maxParts, todayParts, isDateEnabled } = this;
 
-    const activePart = this.getDefaultPart();
+    const activePart = this.getActivePartsWithFallback();
 
     /**
      * By default, generate a range of 3 months:
@@ -1464,12 +1470,12 @@ export class Datetime implements ComponentInterface {
 
     /**
      * If we have selected a day already, then default the column
-     * to that value. Otherwise, default it to today.
+     * to that value. Otherwise, set it to the default date.
      */
     const todayString =
       workingParts.day !== null
         ? `${workingParts.year}-${workingParts.month}-${workingParts.day}`
-        : `${todayParts.year}-${todayParts.month}-${todayParts.day}`;
+        : `${defaultParts.year}-${defaultParts.month}-${defaultParts.day}`;
 
     return (
       <ion-picker-column-internal
@@ -1555,7 +1561,7 @@ export class Datetime implements ComponentInterface {
 
     const shouldRenderYears = forcePresentation !== 'month' && forcePresentation !== 'time';
     const years = shouldRenderYears
-      ? getYearColumnData(this.locale, this.todayParts, this.minParts, this.maxParts, this.parsedYearValues)
+      ? getYearColumnData(this.locale, this.defaultParts, this.minParts, this.maxParts, this.parsedYearValues)
       : [];
 
     /**
@@ -1588,14 +1594,14 @@ export class Datetime implements ComponentInterface {
 
     const { workingParts } = this;
 
-    const activePart = this.getDefaultPart();
+    const activePart = this.getActivePartsWithFallback();
 
     return (
       <ion-picker-column-internal
         class="day-column"
         color={this.color}
         items={days}
-        value={(workingParts.day !== null ? workingParts.day : this.todayParts.day) ?? undefined}
+        value={(workingParts.day !== null ? workingParts.day : this.defaultParts.day) ?? undefined}
         onIonChange={(ev: CustomEvent) => {
           // TODO(FW-1823) Remove this when iOS 14 support is dropped.
           // Due to a Safari 14 issue we need to destroy
@@ -1632,7 +1638,7 @@ export class Datetime implements ComponentInterface {
 
     const { workingParts } = this;
 
-    const activePart = this.getDefaultPart();
+    const activePart = this.getActivePartsWithFallback();
 
     return (
       <ion-picker-column-internal
@@ -1675,7 +1681,7 @@ export class Datetime implements ComponentInterface {
 
     const { workingParts } = this;
 
-    const activePart = this.getDefaultPart();
+    const activePart = this.getActivePartsWithFallback();
 
     return (
       <ion-picker-column-internal
@@ -1739,7 +1745,7 @@ export class Datetime implements ComponentInterface {
     const { workingParts } = this;
     if (hoursData.length === 0) return [];
 
-    const activePart = this.getDefaultPart();
+    const activePart = this.getActivePartsWithFallback();
 
     return (
       <ion-picker-column-internal
@@ -1767,7 +1773,7 @@ export class Datetime implements ComponentInterface {
     const { workingParts } = this;
     if (minutesData.length === 0) return [];
 
-    const activePart = this.getDefaultPart();
+    const activePart = this.getActivePartsWithFallback();
 
     return (
       <ion-picker-column-internal
@@ -1797,7 +1803,7 @@ export class Datetime implements ComponentInterface {
       return [];
     }
 
-    const activePart = this.getDefaultPart();
+    const activePart = this.getActivePartsWithFallback();
     const isDayPeriodRTL = isLocaleDayPeriodRTL(this.locale);
 
     return (
@@ -1911,7 +1917,7 @@ export class Datetime implements ComponentInterface {
     // can free-scroll the calendar.
     const isWorkingMonth = this.workingParts.month === month && this.workingParts.year === year;
 
-    const activePart = this.getDefaultPart();
+    const activePart = this.getActivePartsWithFallback();
 
     return (
       <div
@@ -2041,7 +2047,7 @@ export class Datetime implements ComponentInterface {
 
   private renderTimeOverlay() {
     const use24Hour = is24Hour(this.locale, this.hourCycle);
-    const activePart = this.getDefaultPart();
+    const activePart = this.getActivePartsWithFallback();
 
     return [
       <div class="time-header">{this.renderTimeLabel()}</div>,
@@ -2122,7 +2128,7 @@ export class Datetime implements ComponentInterface {
       }
     } else {
       // for exactly 1 day selected (multiple set or not), show a formatted version of that
-      headerText = getMonthAndDay(this.locale, this.getDefaultPart());
+      headerText = getMonthAndDay(this.locale, this.getActivePartsWithFallback());
     }
 
     return headerText;
diff --git a/core/src/components/datetime/test/prefer-wheel/datetime.e2e.ts b/core/src/components/datetime/test/prefer-wheel/datetime.e2e.ts
index e7102c402a..09e97a369b 100644
--- a/core/src/components/datetime/test/prefer-wheel/datetime.e2e.ts
+++ b/core/src/components/datetime/test/prefer-wheel/datetime.e2e.ts
@@ -148,6 +148,19 @@ test.describe('datetime: prefer wheel', () => {
           presentation="date"
           prefer-wheel="true"
         ></ion-datetime>
+
+        <script>
+          const mockToday = '2022-10-10T16:22';
+          Date = class extends Date {
+            constructor(...args) {
+              if (args.length === 0) {
+                super(mockToday)
+              } else {
+                super(...args);
+              }
+            }
+          }
+        </script>
       `);
 
       await page.waitForSelector('.datetime-ready');
diff --git a/core/src/components/datetime/test/values/datetime.e2e.ts b/core/src/components/datetime/test/values/datetime.e2e.ts
index 42c23da19c..39e4d0ee1b 100644
--- a/core/src/components/datetime/test/values/datetime.e2e.ts
+++ b/core/src/components/datetime/test/values/datetime.e2e.ts
@@ -2,6 +2,10 @@ import { expect } from '@playwright/test';
 import { test } from '@utils/test/playwright';
 
 test.describe('datetime: values', () => {
+  test.beforeEach(({ skip }) => {
+    skip.rtl();
+    skip.mode('md');
+  });
   test('should render correct days', async ({ page }) => {
     await page.setContent(`
       <ion-datetime locale="en-US" presentation="date" day-values="1,2,3"></ion-datetime>
@@ -49,6 +53,105 @@ test.describe('datetime: values', () => {
     const items = page.locator('ion-picker-column-internal:nth-of-type(2) .picker-item:not(.picker-item-empty)');
     await expect(items).toHaveText(['01', '02', '03']);
   });
+  test('should adjust default parts for allowed hour and minute values', async ({ page }) => {
+    /**
+     * Mock today's date for testing.
+     * Playwright does not support this natively
+     * so we extend the native Date interface: https://github.com/microsoft/playwright/issues/6347
+     */
+    await page.setContent(`
+      <ion-datetime presentation="time" locale="en-US" hour-values="02" minute-values="0,15,30,45"></ion-datetime>
+
+      <script>
+        const mockToday = '2022-10-10T16:22';
+        Date = class extends Date {
+          constructor(...args) {
+            if (args.length === 0) {
+              super(mockToday)
+            } else {
+              super(...args);
+            }
+          }
+        }
+      </script>
+    `);
+
+    await page.waitForSelector('.datetime-ready');
+
+    const minuteItems = page.locator('ion-picker-column-internal:nth-of-type(2) .picker-item:not(.picker-item-empty)');
+    await expect(minuteItems).toHaveText(['00', '15', '30', '45']);
+    await expect(minuteItems.nth(1)).toHaveClass(/picker-item-active/);
+
+    const hourItems = page.locator('ion-picker-column-internal:nth-of-type(1) .picker-item:not(.picker-item-empty)');
+    await expect(hourItems).toHaveText(['2']);
+    await expect(hourItems.nth(0)).toHaveClass(/picker-item-active/);
+
+    /**
+     * Since the allowed hour is 2AM, the time period
+     * should switch from PM to AM.
+     */
+    const ampmItems = page.locator('ion-picker-column-internal:nth-of-type(3) .picker-item:not(.picker-item-empty)');
+    await expect(ampmItems).toHaveText(['AM', 'PM']);
+    await expect(ampmItems.nth(0)).toHaveClass(/picker-item-active/);
+  });
+  test('should adjust default parts month for allowed month values', async ({ page }) => {
+    /**
+     * Mock today's date for testing.
+     * Playwright does not support this natively
+     * so we extend the native Date interface: https://github.com/microsoft/playwright/issues/6347
+     */
+    await page.setContent(`
+      <ion-datetime prefer-wheel="true" presentation="date" locale="en-US" month-values="01" hour-values="02" minute-values="0,15,30,45"></ion-datetime>
+
+      <script>
+        const mockToday = '2022-10-10T16:22';
+        Date = class extends Date {
+          constructor(...args) {
+            if (args.length === 0) {
+              super(mockToday)
+            } else {
+              super(...args);
+            }
+          }
+        }
+      </script>
+    `);
+
+    await page.waitForSelector('.datetime-ready');
+
+    const monthItems = page.locator('.month-column .picker-item:not(.picker-item-empty)');
+    await expect(monthItems).toHaveText(['January']);
+    await expect(monthItems.nth(0)).toHaveClass(/picker-item-active/);
+  });
+  test('today date highlight should persist even if disallowed from dayValues', async ({ page }) => {
+    /**
+     * Mock today's date for testing.
+     * Playwright does not support this natively
+     * so we extend the native Date interface: https://github.com/microsoft/playwright/issues/6347
+     */
+    await page.setContent(`
+      <ion-datetime day-values="9" presentation="date" locale="en-US"></ion-datetime>
+
+      <script>
+        const mockToday = '2022-10-10T16:22';
+        Date = class extends Date {
+          constructor(...args) {
+            if (args.length === 0) {
+              super(mockToday)
+            } else {
+              super(...args);
+            }
+          }
+        }
+      </script>
+    `);
+
+    await page.waitForSelector('.datetime-ready');
+
+    const todayButton = page.locator('.calendar-day[data-day="10"][data-month="10"][data-year="2022"]');
+
+    await expect(todayButton).toHaveClass(/calendar-day-today/);
+  });
 });
 
 test('setting value to empty string should treat it as having no date', async ({ page, skip }) => {
diff --git a/core/src/components/datetime/utils/manipulation.ts b/core/src/components/datetime/utils/manipulation.ts
index 34ac4af7d4..703c56e2af 100644
--- a/core/src/components/datetime/utils/manipulation.ts
+++ b/core/src/components/datetime/utils/manipulation.ts
@@ -2,6 +2,7 @@ import type { DatetimeParts } from '../datetime-interface';
 
 import { isSameDay } from './comparison';
 import { getNumDaysInMonth } from './helpers';
+import { parseAmPm } from './parse';
 
 const twoDigit = (val: number | undefined): string => {
   return ('0' + (val !== undefined ? Math.abs(val) : '0')).slice(-2);
@@ -429,3 +430,83 @@ export const validateParts = (
 
   return partsCopy;
 };
+
+/**
+ * Returns the closest date to refParts
+ * that also meets the constraints of
+ * the *Values params.
+ * @param refParts The reference date
+ * @param monthValues The allowed month values
+ * @param dayValues The allowed day (of the month) values
+ * @param yearValues The allowed year values
+ * @param hourValues The allowed hour values
+ * @param minuteValues The allowed minute values
+ */
+export const getClosestValidDate = (
+  refParts: DatetimeParts,
+  monthValues?: number[],
+  dayValues?: number[],
+  yearValues?: number[],
+  hourValues?: number[],
+  minuteValues?: number[]
+) => {
+  const { hour, minute, day, month, year } = refParts;
+  const copyParts = { ...refParts, dayOfWeek: undefined };
+
+  if (monthValues !== undefined) {
+    copyParts.month = findClosestValue(month, monthValues);
+  }
+
+  // Day is nullable but cannot be undefined
+  if (day !== null && dayValues !== undefined) {
+    copyParts.day = findClosestValue(day, dayValues);
+  }
+
+  if (yearValues !== undefined) {
+    copyParts.year = findClosestValue(year, yearValues);
+  }
+
+  if (hour !== undefined && hourValues !== undefined) {
+    copyParts.hour = findClosestValue(hour, hourValues);
+    copyParts.ampm = parseAmPm(copyParts.hour);
+  }
+
+  if (minute !== undefined && minuteValues !== undefined) {
+    copyParts.minute = findClosestValue(minute, minuteValues);
+  }
+
+  return copyParts;
+};
+
+/**
+ * Finds the value in "values" that is
+ * numerically closest to "reference".
+ * This function assumes that "values" is
+ * already sorted in ascending order.
+ * @param reference The reference number to use
+ * when finding the closest value
+ * @param values The allowed values that will be
+ * searched to find the closest value to "reference"
+ */
+const findClosestValue = (reference: number, values: number[]) => {
+  let closestValue = values[0];
+  let rank = Math.abs(closestValue - reference);
+
+  for (let i = 1; i < values.length; i++) {
+    const value = values[i];
+    /**
+     * This code prioritizes the first
+     * closest result. Given two values
+     * with the same distance from reference,
+     * this code will prioritize the smaller of
+     * the two values.
+     */
+    const valueRank = Math.abs(value - reference);
+    if (valueRank < rank) {
+      closestValue = value;
+      rank = valueRank;
+    }
+  }
+
+  return closestValue;
+};
diff --git a/core/src/components/header/test/a11y/e2e.ts b/core/src/components/header/test/a11y/e2e.ts
deleted file mode 100644
index 59305da702..0000000000
--- a/core/src/components/header/test/a11y/e2e.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { AxePuppeteer } from '@axe-core/puppeteer';
-import { newE2EPage } from '@stencil/core/testing';
-
-test('header: axe', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/header/test/a11y?ionic:_testing=true',
-  });
-
-  const results = await new AxePuppeteer(page).analyze();
-  expect(results.violations.length).toEqual(0);
-});
diff --git a/core/src/components/header/test/a11y/header.e2e.ts b/core/src/components/header/test/a11y/header.e2e.ts
new file mode 100644
index 0000000000..f948f7dbd1
--- /dev/null
+++ b/core/src/components/header/test/a11y/header.e2e.ts
@@ -0,0 +1,34 @@
+import AxeBuilder from '@axe-core/playwright';
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('header: a11y', () => {
+  test.beforeEach(async ({ skip }) => {
+    skip.rtl();
+    skip.mode('md');
+  });
+
+  test('should not have accessibility violations', async ({ page }) => {
+    await page.goto(`/src/components/header/test/a11y`);
+
+    const headers = page.locator('ion-header');
+    await expect(headers.first()).toHaveAttribute('role', 'banner');
+    await expect(headers.last()).toHaveAttribute('role', 'none');
+
+    const results = await new AxeBuilder({ page }).analyze();
+    expect(results.violations).toEqual([]);
+  });
+
+  test('should allow for custom role', async ({ page }) => {
+    /**
+     * Note: This example should not be used in production.
+     * This only serves to check that `role` can be customized.
+     */
+    await page.setContent(`
+      <ion-header role="heading"></ion-header>
+    `);
+    const header = page.locator('ion-header');
+
+    await expect(header).toHaveAttribute('role', 'heading');
+  });
+});
diff --git a/core/src/components/header/test/basic/e2e.ts b/core/src/components/header/test/basic/e2e.ts
deleted file mode 100644
index 9a1f4c86d5..0000000000
--- a/core/src/components/header/test/basic/e2e.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('header: basic', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/header/test/basic?ionic:_testing=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});
diff --git a/core/src/components/header/test/basic/header.e2e.ts b/core/src/components/header/test/basic/header.e2e.ts
new file mode 100644
index 0000000000..0a536794ff
--- /dev/null
+++ b/core/src/components/header/test/basic/header.e2e.ts
@@ -0,0 +1,78 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('header: basic', () => {
+  test.describe('header: rendering', () => {
+    test('should not have visual regressions with basic header', async ({ page }) => {
+      await page.setContent(`
+        <ion-header>
+          <ion-toolbar>
+            <ion-title>Header - Default</ion-title>
+          </ion-toolbar>
+        </ion-header>
+      `);
+
+      const header = page.locator('ion-header');
+      expect(await header.screenshot()).toMatchSnapshot(`header-diff-${page.getSnapshotSettings()}.png`);
+    });
+  });
+
+  test.describe('header: feature rendering', () => {
+    test.beforeEach(({ skip }) => {
+      skip.rtl();
+    });
+
+    test('should not have visual regressions with no border', async ({ page }) => {
+      await page.setContent(`
+        <ion-header class="ion-no-border">
+          <ion-toolbar>
+            <ion-title>Header - No Border</ion-title>
+          </ion-toolbar>
+        </ion-header>
+      `);
+
+      const header = page.locator('ion-header');
+      expect(await header.screenshot()).toMatchSnapshot(`header-no-border-diff-${page.getSnapshotSettings()}.png`);
+    });
+
+    test('should not have visual regressions with translucent header', async ({ page, skip }) => {
+      skip.mode('md', 'Translucent effect is only available in iOS mode.');
+      skip.browser('firefox', 'Firefox has some issues rendering translucent effects on Linux.');
+
+      await page.setContent(`
+        <ion-header translucent="true">
+          <div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0">
+            <img style="transform: rotate(145deg) scale(1.5)" src="/src/components/header/test/img.jpg" />
+          </div>
+          <ion-toolbar>
+            <ion-title>Header - Translucent</ion-title>
+          </ion-toolbar>
+        </ion-header>
+      `);
+
+      const header = page.locator('ion-header');
+      expect(await header.screenshot()).toMatchSnapshot(`header-translucent-diff-${page.getSnapshotSettings()}.png`);
+    });
+
+    test('should not have visual regressions with translucent header with color', async ({ page, skip }) => {
+      skip.mode('md', 'Translucent effect is only available in iOS mode.');
+      skip.browser('firefox', 'Firefox has some issues rendering translucent effects on Linux.');
+
+      await page.setContent(`
+        <ion-header translucent="true">
+          <div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0">
+            <img style="transform: rotate(145deg) scale(1.5)" src="/src/components/header/test/img.jpg" />
+          </div>
+          <ion-toolbar color="tertiary">
+            <ion-title>Header - Translucent</ion-title>
+          </ion-toolbar>
+        </ion-header>
+      `);
+
+      const header = page.locator('ion-header');
+      expect(await header.screenshot()).toMatchSnapshot(
+        `header-translucent-color-diff-${page.getSnapshotSettings()}.png`
+      );
+    });
+  });
+});
diff --git a/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..3e8aa22e58
Binary files /dev/null and b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..55ea7993f9
Binary files /dev/null and b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..737efe5fe2
Binary files /dev/null and b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-ios-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..3e8aa22e58
Binary files /dev/null and b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-ios-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..55ea7993f9
Binary files /dev/null and b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-ios-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..737efe5fe2
Binary files /dev/null and b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..3a9b1e9e37
Binary files /dev/null and b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..03a66cbbfa
Binary files /dev/null and b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..a125e85d27
Binary files /dev/null and b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-md-rtl-Mobile-Chrome-linux.png b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..3b24c3fe30
Binary files /dev/null and b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-md-rtl-Mobile-Firefox-linux.png b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..2a35f36947
Binary files /dev/null and b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-md-rtl-Mobile-Safari-linux.png b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..4e720ee658
Binary files /dev/null and b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-no-border-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-no-border-diff-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..2a6c287d9b
Binary files /dev/null and b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-no-border-diff-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-no-border-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-no-border-diff-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..6b4bb7d693
Binary files /dev/null and b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-no-border-diff-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-no-border-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-no-border-diff-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..8b85c3eb67
Binary files /dev/null and b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-no-border-diff-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-no-border-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-no-border-diff-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..9098a8dc06
Binary files /dev/null and b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-no-border-diff-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-no-border-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-no-border-diff-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..453c1db49d
Binary files /dev/null and b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-no-border-diff-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-no-border-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-no-border-diff-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..156f85760e
Binary files /dev/null and b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-no-border-diff-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-translucent-color-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-translucent-color-diff-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..458edf7720
Binary files /dev/null and b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-translucent-color-diff-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-translucent-color-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-translucent-color-diff-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..36a70e3537
Binary files /dev/null and b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-translucent-color-diff-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-translucent-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-translucent-diff-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..3e4ac2c41b
Binary files /dev/null and b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-translucent-diff-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-translucent-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-translucent-diff-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..29073b5256
Binary files /dev/null and b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-translucent-diff-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/header/test/basic/index.html b/core/src/components/header/test/basic/index.html
index 41c454785c..2fbfa476b0 100644
--- a/core/src/components/header/test/basic/index.html
+++ b/core/src/components/header/test/basic/index.html
@@ -15,20 +15,13 @@
   </head>
   <body>
     <ion-app>
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Header</ion-title>
+        </ion-toolbar>
+      </ion-header>
       <ion-content>
-        <ion-header>
-          <ion-toolbar>
-            <ion-title>Header - Default</ion-title>
-          </ion-toolbar>
-        </ion-header>
-
-        <br />
-
-        <ion-header class="ion-no-border">
-          <ion-toolbar>
-            <ion-title>Header - No Border</ion-title>
-          </ion-toolbar>
-        </ion-header>
+        <h1>Content</h1>
       </ion-content>
     </ion-app>
   </body>
diff --git a/core/src/components/header/test/condense/header.e2e.ts b/core/src/components/header/test/condense/header.e2e.ts
index 3312a06ead..f0a1f6ab43 100644
--- a/core/src/components/header/test/condense/header.e2e.ts
+++ b/core/src/components/header/test/condense/header.e2e.ts
@@ -7,24 +7,37 @@ test.describe('header: condense', () => {
     skip.rtl();
 
     await page.goto('/src/components/header/test/condense');
-    const header = page.locator('#collapsibleHeader');
+    const largeTitleHeader = page.locator('#largeTitleHeader');
+    const smallTitleHeader = page.locator('#smallTitleHeader');
     const content = page.locator('ion-content');
 
-    await expect(header).toHaveAttribute('aria-hidden', 'true');
+    await expect(smallTitleHeader).toHaveAttribute('aria-hidden', 'true');
 
-    await content.evaluate((el: HTMLIonContentElement) => el.scrollToBottom());
-    await page.waitForChanges();
+    expect(await largeTitleHeader.screenshot({ animations: 'disabled' })).toMatchSnapshot(
+      `header-condense-large-title-initial-diff-${page.getSnapshotSettings()}.png`
+    );
+
+    await content.evaluate(async (el: HTMLIonContentElement) => {
+      await el.scrollToBottom();
+    });
+    await page.waitForSelector('#largeTitleHeader.header-collapse-condense-inactive');
+
+    expect(await smallTitleHeader.screenshot({ animations: 'disabled' })).toMatchSnapshot(
+      `header-condense-large-title-collapsed-diff-${page.getSnapshotSettings()}.png`
+    );
 
     /**
      * Playwright can't do .not.toHaveAttribute() because a value is expected,
      * and toHaveAttribute can't accept a value of type null.
      */
-    const ariaHidden = await header.getAttribute('aria-hidden');
+    const ariaHidden = await smallTitleHeader.getAttribute('aria-hidden');
     expect(ariaHidden).toBeNull();
 
-    await content.evaluate((el: HTMLIonContentElement) => el.scrollToTop());
-    await page.waitForChanges();
+    await content.evaluate(async (el: HTMLIonContentElement) => {
+      await el.scrollToTop();
+    });
+    await page.waitForSelector('#smallTitleHeader.header-collapse-condense-inactive');
 
-    await expect(header).toHaveAttribute('aria-hidden', 'true');
+    await expect(smallTitleHeader).toHaveAttribute('aria-hidden', 'true');
   });
 });
diff --git a/core/src/components/header/test/condense/header.e2e.ts-snapshots/header-condense-large-title-collapsed-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/header/test/condense/header.e2e.ts-snapshots/header-condense-large-title-collapsed-diff-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..2821b49e47
Binary files /dev/null and b/core/src/components/header/test/condense/header.e2e.ts-snapshots/header-condense-large-title-collapsed-diff-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/header/test/condense/header.e2e.ts-snapshots/header-condense-large-title-collapsed-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/header/test/condense/header.e2e.ts-snapshots/header-condense-large-title-collapsed-diff-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..bc54f9aad1
Binary files /dev/null and b/core/src/components/header/test/condense/header.e2e.ts-snapshots/header-condense-large-title-collapsed-diff-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/header/test/condense/header.e2e.ts-snapshots/header-condense-large-title-collapsed-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/header/test/condense/header.e2e.ts-snapshots/header-condense-large-title-collapsed-diff-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..6fa282afe0
Binary files /dev/null and b/core/src/components/header/test/condense/header.e2e.ts-snapshots/header-condense-large-title-collapsed-diff-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/header/test/condense/header.e2e.ts-snapshots/header-condense-large-title-initial-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/header/test/condense/header.e2e.ts-snapshots/header-condense-large-title-initial-diff-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..ea15d1c95b
Binary files /dev/null and b/core/src/components/header/test/condense/header.e2e.ts-snapshots/header-condense-large-title-initial-diff-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/header/test/condense/header.e2e.ts-snapshots/header-condense-large-title-initial-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/header/test/condense/header.e2e.ts-snapshots/header-condense-large-title-initial-diff-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..45a3125cf5
Binary files /dev/null and b/core/src/components/header/test/condense/header.e2e.ts-snapshots/header-condense-large-title-initial-diff-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/header/test/condense/header.e2e.ts-snapshots/header-condense-large-title-initial-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/header/test/condense/header.e2e.ts-snapshots/header-condense-large-title-initial-diff-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..e7a957e4f5
Binary files /dev/null and b/core/src/components/header/test/condense/header.e2e.ts-snapshots/header-condense-large-title-initial-diff-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/header/test/condense/index.html b/core/src/components/header/test/condense/index.html
index dfcf35d00f..f5cfea1635 100644
--- a/core/src/components/header/test/condense/index.html
+++ b/core/src/components/header/test/condense/index.html
@@ -12,79 +12,74 @@
     <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>
-      .red {
-        background-color: #ea445a;
-      }
-
-      .green {
-        background-color: #76d672;
-      }
-
-      .blue {
-        background-color: #3478f6;
-      }
-
-      .yellow {
-        background-color: #ffff80;
-      }
-
-      .pink {
-        background-color: #ff6b86;
-      }
-
-      .purple {
-        background-color: #7e34f6;
-      }
-
-      .black {
-        background-color: #000;
-      }
-
-      .orange {
-        background-color: #f69234;
-      }
-
-      .grid {
-        display: grid;
-        grid-template-columns: 1fr 1fr;
-        grid-gap: 10px;
-      }
-
-      .grid-item {
-        height: 200px;
-      }
-    </style>
   </head>
 
   <body>
     <ion-app>
       <div class="ion-page">
-        <ion-header translucent="true" id="collapsibleHeader">
+        <ion-header translucent="true" id="smallTitleHeader">
+          <div style="position: absolute; left: 0; right: 0; bottom: 0">
+            <img style="transform: rotate(180deg)" src="/src/components/header/test/img.jpg" />
+          </div>
           <ion-toolbar>
-            <ion-title>Mailboxes</ion-title>
+            <ion-title>Header</ion-title>
           </ion-toolbar>
         </ion-header>
         <ion-content fullscreen="true">
-          <ion-header collapse="condense">
+          <ion-header collapse="condense" id="largeTitleHeader">
             <ion-toolbar>
-              <ion-title size="large">Mailboxes</ion-title>
+              <ion-title size="large">Header</ion-title>
             </ion-toolbar>
           </ion-header>
-          <div class="grid ion-padding">
-            <div class="grid-item red"></div>
-            <div class="grid-item green"></div>
-            <div class="grid-item blue"></div>
-            <div class="grid-item yellow"></div>
-            <div class="grid-item pink"></div>
-            <div class="grid-item purple"></div>
-            <div class="grid-item black"></div>
-            <div class="grid-item orange"></div>
+          <div class="ion-padding">
+            <h1>Content</h1>
+
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas blandit, justo vitae rhoncus porttitor,
+              massa elit molestie nisl, ut tincidunt orci enim ac ante. Vestibulum tincidunt dignissim elit. Morbi
+              cursus hendrerit turpis, ut egestas tortor pulvinar sit amet. Interdum et malesuada fames ac ante ipsum
+              primis in faucibus. Phasellus faucibus consequat purus vel mollis. Ut ultricies elit nunc. Quisque
+              ultrices turpis vel augue auctor accumsan. Donec bibendum at nisi vel finibus. Fusce id imperdiet odio.
+              Morbi orci ipsum, imperdiet ut iaculis sit amet, suscipit vulputate felis. Nullam arcu leo, volutpat eu
+              porttitor sed, fringilla et arcu. Pellentesque ac libero sapien. Quisque id dui velit. Mauris et pretium
+              tortor.
+            </p>
+            <p>
+              Ut ultricies id augue vel aliquam. Etiam ornare finibus nisl, nec egestas urna. Nam pellentesque libero
+              nec justo tristique lacinia. In sit amet gravida metus, ac tincidunt mauris. Fusce sit amet tempus turpis.
+              Nulla ligula nunc, vestibulum quis quam in, feugiat aliquet nibh. Quisque in ante non nulla luctus gravida
+              vel at lacus. Vivamus erat magna, elementum et dignissim nec, posuere eu ante. Praesent elementum, arcu
+              scelerisque venenatis sodales, turpis nulla aliquam urna, id hendrerit est orci et purus. Duis sem ipsum,
+              imperdiet eu elit id, tincidunt tempus sapien. Praesent tincidunt, sapien sed rhoncus euismod, lectus
+              velit ornare nunc, dapibus varius turpis leo ut magna.
+            </p>
+            <p>
+              Nam quis quam id ante mattis pulvinar non sed mauris. Donec tempor sed nulla at semper. Vivamus ac nunc
+              bibendum, ullamcorper lacus quis, ornare massa. Cras gravida nibh risus, id sollicitudin eros ultricies
+              non. Integer velit massa, suscipit tincidunt rhoncus ut, lacinia et nisl. Maecenas volutpat ipsum blandit
+              sollicitudin lobortis. Suspendisse potenti. Cras non mi non arcu varius dapibus. Suspendisse maximus eget
+              justo a lobortis. Donec nulla ipsum, efficitur eget velit eget, varius rutrum quam. Nulla metus risus,
+              accumsan a tellus ac, faucibus blandit quam. Donec luctus, nisl ac ultricies ornare, nunc elit finibus
+              magna, id elementum ante urna congue ex. Cras condimentum nisi sollicitudin tortor vestibulum luctus.
+              Curabitur non ipsum et ex vestibulum congue.
+            </p>
+            <p>
+              Maecenas rhoncus elit ut consectetur faucibus. Etiam sed sem sed mauris condimentum viverra sit amet at
+              nibh. Mauris bibendum at purus a cursus. Suspendisse potenti. Donec vel lacus ac odio euismod lacinia id
+              in urna. Donec commodo ipsum augue, at bibendum ex convallis suscipit. Nulla ac rhoncus odio. Aenean
+              elementum est nec arcu ultricies dignissim.
+            </p>
+            <p>
+              Sed tincidunt bibendum massa, egestas bibendum est imperdiet vitae. Fusce dignissim consectetur ante a
+              fermentum. Morbi suscipit turpis sapien. Suspendisse eleifend sapien eget nunc mattis mattis. Phasellus
+              rhoncus sodales libero a imperdiet. Nam in vulputate lectus. Proin accumsan enim non nibh sagittis
+              ultricies. Nullam vitae ultricies nunc. Nullam ultrices dolor nec vehicula posuere.
+            </p>
           </div>
         </ion-content>
         <ion-footer translucent="true">
           <ion-toolbar>
-            <ion-title>Updated Just Now</ion-title>
+            <ion-title>Footer</ion-title>
           </ion-toolbar>
         </ion-footer>
       </div>
diff --git a/core/src/components/header/test/fade/e2e.ts b/core/src/components/header/test/fade/e2e.ts
deleted file mode 100644
index 792198d8ae..0000000000
--- a/core/src/components/header/test/fade/e2e.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('header: fade', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/header/test/fade?ionic:_testing=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});
diff --git a/core/src/components/header/test/fade/header.e2e.ts b/core/src/components/header/test/fade/header.e2e.ts
new file mode 100644
index 0000000000..8828ec222e
--- /dev/null
+++ b/core/src/components/header/test/fade/header.e2e.ts
@@ -0,0 +1,28 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('header: fade', () => {
+  test.beforeEach(({ skip }) => {
+    skip.rtl();
+  });
+
+  test('should not have visual regressions with fade header', async ({ page, skip }) => {
+    skip.mode('md', 'Translucent effect is only available in iOS mode.');
+    skip.browser('firefox', 'Firefox has some issues rendering translucent effects on Linux.');
+
+    await page.goto('/src/components/header/test/fade');
+
+    const header = page.locator('ion-header');
+    expect(await header.screenshot({ animations: 'disabled' })).toMatchSnapshot(
+      `header-fade-not-blurred-diff-${page.getSnapshotSettings()}.png`
+    );
+
+    const content = page.locator('ion-content');
+    await content.evaluate((el: HTMLIonContentElement) => el.scrollToBottom(0));
+    await page.waitForChanges();
+
+    expect(await header.screenshot({ animations: 'disabled' })).toMatchSnapshot(
+      `header-fade-blurred-diff-${page.getSnapshotSettings()}.png`
+    );
+  });
+});
diff --git a/core/src/components/header/test/fade/header.e2e.ts-snapshots/header-fade-blurred-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/header/test/fade/header.e2e.ts-snapshots/header-fade-blurred-diff-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..c0cba2652f
Binary files /dev/null and b/core/src/components/header/test/fade/header.e2e.ts-snapshots/header-fade-blurred-diff-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/header/test/fade/header.e2e.ts-snapshots/header-fade-blurred-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/header/test/fade/header.e2e.ts-snapshots/header-fade-blurred-diff-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..6fa282afe0
Binary files /dev/null and b/core/src/components/header/test/fade/header.e2e.ts-snapshots/header-fade-blurred-diff-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/header/test/fade/header.e2e.ts-snapshots/header-fade-not-blurred-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/header/test/fade/header.e2e.ts-snapshots/header-fade-not-blurred-diff-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..a52551bf64
Binary files /dev/null and b/core/src/components/header/test/fade/header.e2e.ts-snapshots/header-fade-not-blurred-diff-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/header/test/fade/header.e2e.ts-snapshots/header-fade-not-blurred-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/header/test/fade/header.e2e.ts-snapshots/header-fade-not-blurred-diff-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..b8adb33f0b
Binary files /dev/null and b/core/src/components/header/test/fade/header.e2e.ts-snapshots/header-fade-not-blurred-diff-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/header/test/fade/index.html b/core/src/components/header/test/fade/index.html
index 5a84e0b6e9..771c848f2d 100644
--- a/core/src/components/header/test/fade/index.html
+++ b/core/src/components/header/test/fade/index.html
@@ -12,74 +12,69 @@
     <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>
-      .red {
-        background-color: #ea445a;
-      }
-
-      .green {
-        background-color: #76d672;
-      }
-
-      .blue {
-        background-color: #3478f6;
-      }
-
-      .yellow {
-        background-color: #ffff80;
-      }
-
-      .pink {
-        background-color: #ff6b86;
-      }
-
-      .purple {
-        background-color: #7e34f6;
-      }
-
-      .black {
-        background-color: #000;
-      }
-
-      .orange {
-        background-color: #f69234;
-      }
-
-      .grid {
-        display: grid;
-        grid-template-columns: 1fr 1fr;
-        grid-gap: 10px;
-      }
-
-      .grid-item {
-        height: 200px;
-      }
-    </style>
   </head>
 
   <body>
     <ion-app>
       <div class="ion-page">
         <ion-header collapse="fade" translucent="true">
+          <div style="position: absolute; left: 0; right: 0; bottom: 0">
+            <img style="transform: rotate(180deg)" src="/src/components/header/test/img.jpg" />
+          </div>
           <ion-toolbar>
-            <ion-title>Mailboxes</ion-title>
+            <ion-title>Header</ion-title>
           </ion-toolbar>
         </ion-header>
         <ion-content fullscreen="true">
-          <div class="grid ion-padding">
-            <div class="grid-item red"></div>
-            <div class="grid-item green"></div>
-            <div class="grid-item blue"></div>
-            <div class="grid-item yellow"></div>
-            <div class="grid-item pink"></div>
-            <div class="grid-item purple"></div>
-            <div class="grid-item black"></div>
-            <div class="grid-item orange"></div>
+          <div class="ion-padding">
+            <h1>Content</h1>
+
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas blandit, justo vitae rhoncus porttitor,
+              massa elit molestie nisl, ut tincidunt orci enim ac ante. Vestibulum tincidunt dignissim elit. Morbi
+              cursus hendrerit turpis, ut egestas tortor pulvinar sit amet. Interdum et malesuada fames ac ante ipsum
+              primis in faucibus. Phasellus faucibus consequat purus vel mollis. Ut ultricies elit nunc. Quisque
+              ultrices turpis vel augue auctor accumsan. Donec bibendum at nisi vel finibus. Fusce id imperdiet odio.
+              Morbi orci ipsum, imperdiet ut iaculis sit amet, suscipit vulputate felis. Nullam arcu leo, volutpat eu
+              porttitor sed, fringilla et arcu. Pellentesque ac libero sapien. Quisque id dui velit. Mauris et pretium
+              tortor.
+            </p>
+            <p>
+              Ut ultricies id augue vel aliquam. Etiam ornare finibus nisl, nec egestas urna. Nam pellentesque libero
+              nec justo tristique lacinia. In sit amet gravida metus, ac tincidunt mauris. Fusce sit amet tempus turpis.
+              Nulla ligula nunc, vestibulum quis quam in, feugiat aliquet nibh. Quisque in ante non nulla luctus gravida
+              vel at lacus. Vivamus erat magna, elementum et dignissim nec, posuere eu ante. Praesent elementum, arcu
+              scelerisque venenatis sodales, turpis nulla aliquam urna, id hendrerit est orci et purus. Duis sem ipsum,
+              imperdiet eu elit id, tincidunt tempus sapien. Praesent tincidunt, sapien sed rhoncus euismod, lectus
+              velit ornare nunc, dapibus varius turpis leo ut magna.
+            </p>
+            <p>
+              Nam quis quam id ante mattis pulvinar non sed mauris. Donec tempor sed nulla at semper. Vivamus ac nunc
+              bibendum, ullamcorper lacus quis, ornare massa. Cras gravida nibh risus, id sollicitudin eros ultricies
+              non. Integer velit massa, suscipit tincidunt rhoncus ut, lacinia et nisl. Maecenas volutpat ipsum blandit
+              sollicitudin lobortis. Suspendisse potenti. Cras non mi non arcu varius dapibus. Suspendisse maximus eget
+              justo a lobortis. Donec nulla ipsum, efficitur eget velit eget, varius rutrum quam. Nulla metus risus,
+              accumsan a tellus ac, faucibus blandit quam. Donec luctus, nisl ac ultricies ornare, nunc elit finibus
+              magna, id elementum ante urna congue ex. Cras condimentum nisi sollicitudin tortor vestibulum luctus.
+              Curabitur non ipsum et ex vestibulum congue.
+            </p>
+            <p>
+              Maecenas rhoncus elit ut consectetur faucibus. Etiam sed sem sed mauris condimentum viverra sit amet at
+              nibh. Mauris bibendum at purus a cursus. Suspendisse potenti. Donec vel lacus ac odio euismod lacinia id
+              in urna. Donec commodo ipsum augue, at bibendum ex convallis suscipit. Nulla ac rhoncus odio. Aenean
+              elementum est nec arcu ultricies dignissim.
+            </p>
+            <p>
+              Sed tincidunt bibendum massa, egestas bibendum est imperdiet vitae. Fusce dignissim consectetur ante a
+              fermentum. Morbi suscipit turpis sapien. Suspendisse eleifend sapien eget nunc mattis mattis. Phasellus
+              rhoncus sodales libero a imperdiet. Nam in vulputate lectus. Proin accumsan enim non nibh sagittis
+              ultricies. Nullam vitae ultricies nunc. Nullam ultrices dolor nec vehicula posuere.
+            </p>
           </div>
         </ion-content>
         <ion-footer translucent="true">
           <ion-toolbar>
-            <ion-title>Updated Just Now</ion-title>
+            <ion-title>Footer</ion-title>
           </ion-toolbar>
         </ion-footer>
       </div>
diff --git a/core/src/components/header/test/img.jpg b/core/src/components/header/test/img.jpg
new file mode 100644
index 0000000000..d7bd6ebe62
Binary files /dev/null and b/core/src/components/header/test/img.jpg differ
diff --git a/core/src/components/header/test/scroll-target/e2e.ts b/core/src/components/header/test/scroll-target/e2e.ts
deleted file mode 100644
index 3a460e6b93..0000000000
--- a/core/src/components/header/test/scroll-target/e2e.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-import type { E2EPage } from '@stencil/core/testing';
-import { scrollToBottom } from '@utils/test';
-
-describe('ion-header: custom scroll target', () => {
-  let page: E2EPage;
-
-  beforeEach(async () => {
-    page = await newE2EPage({
-      url: '/src/components/header/test/scroll-target?ionic:_testing=true&ionic:mode=ios',
-    });
-  });
-
-  it('should match existing visual screenshots', async () => {
-    const compare = await page.compareScreenshot();
-    expect(compare).toMatchScreenshot();
-  });
-
-  describe('large title', () => {
-    it('should display the large title initially', async () => {
-      const largeHeader = await page.find('ion-header[collapse="condense"]');
-      const collapseHeader = await page.find('ion-header[collapse="fade"]');
-
-      expect(largeHeader.className).not.toContain('header-collapse-condense-inactive');
-      expect(collapseHeader.className).toContain('header-collapse-condense-inactive');
-    });
-
-    describe('when the scroll container has overflow', () => {
-      it('should display the collapsed title on scroll', async () => {
-        const screenshotCompares = [];
-
-        screenshotCompares.push(await page.compareScreenshot('large title expanded'));
-
-        const largeHeader = await page.find('ion-header[collapse="condense"]');
-        const collapseHeader = await page.find('ion-header[collapse="fade"]');
-
-        await scrollToBottom(page, '#scroll-target');
-        await page.waitForChanges();
-
-        expect(largeHeader.className).toContain('header-collapse-condense-inactive');
-        expect(collapseHeader.className).not.toContain('header-collapse-condense-inactive');
-
-        screenshotCompares.push(await page.compareScreenshot('large title collapsed'));
-
-        for (const screenshotCompare of screenshotCompares) {
-          expect(screenshotCompare).toMatchScreenshot();
-        }
-      });
-    });
-  });
-});
diff --git a/core/src/components/header/test/scroll-target/header.e2e.ts b/core/src/components/header/test/scroll-target/header.e2e.ts
new file mode 100644
index 0000000000..be0194c58c
--- /dev/null
+++ b/core/src/components/header/test/scroll-target/header.e2e.ts
@@ -0,0 +1,33 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('header: scroll-target', () => {
+  test.beforeEach(({ skip }) => {
+    skip.rtl();
+  });
+
+  /**
+   * This test suite verifies that the fade effect for iOS is working correctly
+   * when the `ion-header` is using a custom scroll target with the `.ion-content-scroll-host`
+   * selector.
+   */
+  test('should not have visual regressions with custom scroll target header', async ({ page, skip }) => {
+    skip.mode('md', 'Translucent effect is only available in iOS mode.');
+    skip.browser('firefox', 'Firefox has some issues rendering translucent effects on Linux.');
+
+    await page.goto('/src/components/header/test/scroll-target');
+
+    const header = page.locator('ion-header');
+    expect(await header.screenshot({ animations: 'disabled' })).toMatchSnapshot(
+      `header-scroll-target-not-blurred-diff-${page.getSnapshotSettings()}.png`
+    );
+
+    const scrollTarget = page.locator('#scroll-target');
+    await scrollTarget.evaluate((el: HTMLDivElement) => (el.scrollTop = el.scrollHeight));
+    await page.waitForChanges();
+
+    expect(await header.screenshot({ animations: 'disabled' })).toMatchSnapshot(
+      `header-scroll-target-blurred-diff-${page.getSnapshotSettings()}.png`
+    );
+  });
+});
diff --git a/core/src/components/header/test/scroll-target/header.e2e.ts-snapshots/header-scroll-target-blurred-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/header/test/scroll-target/header.e2e.ts-snapshots/header-scroll-target-blurred-diff-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..0185835e1c
Binary files /dev/null and b/core/src/components/header/test/scroll-target/header.e2e.ts-snapshots/header-scroll-target-blurred-diff-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/header/test/scroll-target/header.e2e.ts-snapshots/header-scroll-target-blurred-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/header/test/scroll-target/header.e2e.ts-snapshots/header-scroll-target-blurred-diff-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..c35ed9c3e9
Binary files /dev/null and b/core/src/components/header/test/scroll-target/header.e2e.ts-snapshots/header-scroll-target-blurred-diff-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/header/test/scroll-target/header.e2e.ts-snapshots/header-scroll-target-not-blurred-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/header/test/scroll-target/header.e2e.ts-snapshots/header-scroll-target-not-blurred-diff-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..a52551bf64
Binary files /dev/null and b/core/src/components/header/test/scroll-target/header.e2e.ts-snapshots/header-scroll-target-not-blurred-diff-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/header/test/scroll-target/header.e2e.ts-snapshots/header-scroll-target-not-blurred-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/header/test/scroll-target/header.e2e.ts-snapshots/header-scroll-target-not-blurred-diff-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..b8adb33f0b
Binary files /dev/null and b/core/src/components/header/test/scroll-target/header.e2e.ts-snapshots/header-scroll-target-not-blurred-diff-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/header/test/scroll-target/index.html b/core/src/components/header/test/scroll-target/index.html
index 9224c9ea2c..418451c1b1 100644
--- a/core/src/components/header/test/scroll-target/index.html
+++ b/core/src/components/header/test/scroll-target/index.html
@@ -13,48 +13,6 @@
     <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
     <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
     <style>
-      .red {
-        background-color: #ea445a;
-      }
-
-      .green {
-        background-color: #76d672;
-      }
-
-      .blue {
-        background-color: #3478f6;
-      }
-
-      .yellow {
-        background-color: #ffff80;
-      }
-
-      .pink {
-        background-color: #ff6b86;
-      }
-
-      .purple {
-        background-color: #7e34f6;
-      }
-
-      .black {
-        background-color: #000;
-      }
-
-      .orange {
-        background-color: #f69234;
-      }
-
-      .grid {
-        display: grid;
-        grid-template-columns: 1fr 1fr;
-        grid-gap: 10px;
-      }
-
-      .grid-item {
-        height: 200px;
-      }
-
       #scroll-target {
         position: absolute;
         top: 0;
@@ -73,32 +31,63 @@
     <ion-app>
       <div class="ion-page">
         <ion-header collapse="fade" translucent="true">
+          <div style="position: absolute; left: 0; right: 0; bottom: 0">
+            <img style="transform: rotate(180deg)" src="/src/components/header/test/img.jpg" />
+          </div>
           <ion-toolbar>
-            <ion-title>Mailboxes</ion-title>
+            <ion-title>Header</ion-title>
           </ion-toolbar>
         </ion-header>
         <ion-content fullscreen="true" scroll-y="false">
           <div id="scroll-target" class="ion-content-scroll-host">
-            <ion-header collapse="condense">
-              <ion-toolbar>
-                <ion-title size="large">Mailboxes</ion-title>
-              </ion-toolbar>
-            </ion-header>
-            <div class="grid ion-padding">
-              <div class="grid-item red"></div>
-              <div class="grid-item green"></div>
-              <div class="grid-item blue"></div>
-              <div class="grid-item yellow"></div>
-              <div class="grid-item pink"></div>
-              <div class="grid-item purple"></div>
-              <div class="grid-item black"></div>
-              <div class="grid-item orange"></div>
-            </div>
+            <h1>Content</h1>
+
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas blandit, justo vitae rhoncus porttitor,
+              massa elit molestie nisl, ut tincidunt orci enim ac ante. Vestibulum tincidunt dignissim elit. Morbi
+              cursus hendrerit turpis, ut egestas tortor pulvinar sit amet. Interdum et malesuada fames ac ante ipsum
+              primis in faucibus. Phasellus faucibus consequat purus vel mollis. Ut ultricies elit nunc. Quisque
+              ultrices turpis vel augue auctor accumsan. Donec bibendum at nisi vel finibus. Fusce id imperdiet odio.
+              Morbi orci ipsum, imperdiet ut iaculis sit amet, suscipit vulputate felis. Nullam arcu leo, volutpat eu
+              porttitor sed, fringilla et arcu. Pellentesque ac libero sapien. Quisque id dui velit. Mauris et pretium
+              tortor.
+            </p>
+            <p>
+              Ut ultricies id augue vel aliquam. Etiam ornare finibus nisl, nec egestas urna. Nam pellentesque libero
+              nec justo tristique lacinia. In sit amet gravida metus, ac tincidunt mauris. Fusce sit amet tempus turpis.
+              Nulla ligula nunc, vestibulum quis quam in, feugiat aliquet nibh. Quisque in ante non nulla luctus gravida
+              vel at lacus. Vivamus erat magna, elementum et dignissim nec, posuere eu ante. Praesent elementum, arcu
+              scelerisque venenatis sodales, turpis nulla aliquam urna, id hendrerit est orci et purus. Duis sem ipsum,
+              imperdiet eu elit id, tincidunt tempus sapien. Praesent tincidunt, sapien sed rhoncus euismod, lectus
+              velit ornare nunc, dapibus varius turpis leo ut magna.
+            </p>
+            <p>
+              Nam quis quam id ante mattis pulvinar non sed mauris. Donec tempor sed nulla at semper. Vivamus ac nunc
+              bibendum, ullamcorper lacus quis, ornare massa. Cras gravida nibh risus, id sollicitudin eros ultricies
+              non. Integer velit massa, suscipit tincidunt rhoncus ut, lacinia et nisl. Maecenas volutpat ipsum blandit
+              sollicitudin lobortis. Suspendisse potenti. Cras non mi non arcu varius dapibus. Suspendisse maximus eget
+              justo a lobortis. Donec nulla ipsum, efficitur eget velit eget, varius rutrum quam. Nulla metus risus,
+              accumsan a tellus ac, faucibus blandit quam. Donec luctus, nisl ac ultricies ornare, nunc elit finibus
+              magna, id elementum ante urna congue ex. Cras condimentum nisi sollicitudin tortor vestibulum luctus.
+              Curabitur non ipsum et ex vestibulum congue.
+            </p>
+            <p>
+              Maecenas rhoncus elit ut consectetur faucibus. Etiam sed sem sed mauris condimentum viverra sit amet at
+              nibh. Mauris bibendum at purus a cursus. Suspendisse potenti. Donec vel lacus ac odio euismod lacinia id
+              in urna. Donec commodo ipsum augue, at bibendum ex convallis suscipit. Nulla ac rhoncus odio. Aenean
+              elementum est nec arcu ultricies dignissim.
+            </p>
+            <p>
+              Sed tincidunt bibendum massa, egestas bibendum est imperdiet vitae. Fusce dignissim consectetur ante a
+              fermentum. Morbi suscipit turpis sapien. Suspendisse eleifend sapien eget nunc mattis mattis. Phasellus
+              rhoncus sodales libero a imperdiet. Nam in vulputate lectus. Proin accumsan enim non nibh sagittis
+              ultricies. Nullam vitae ultricies nunc. Nullam ultrices dolor nec vehicula posuere.
+            </p>
           </div>
         </ion-content>
         <ion-footer translucent="true">
           <ion-toolbar>
-            <ion-title>Updated Just Now</ion-title>
+            <ion-title>Footer</ion-title>
           </ion-toolbar>
         </ion-footer>
       </div>
diff --git a/core/src/components/header/test/translucent/e2e.ts b/core/src/components/header/test/translucent/e2e.ts
deleted file mode 100644
index 0a5dd1fa5d..0000000000
--- a/core/src/components/header/test/translucent/e2e.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-import { checkComponentModeClasses } from '@utils/test';
-
-test('header: translucent', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/header/test/translucent?ionic:_testing=true',
-  });
-
-  const globalMode = await page.evaluate(() => document.documentElement.getAttribute('mode'));
-  await checkComponentModeClasses(await page.find('ion-header'), globalMode!, 'header-translucent');
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});
diff --git a/core/src/components/header/test/translucent/index.html b/core/src/components/header/test/translucent/index.html
deleted file mode 100644
index c5427983ef..0000000000
--- a/core/src/components/header/test/translucent/index.html
+++ /dev/null
@@ -1,170 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" dir="ltr">
-  <head>
-    <meta charset="UTF-8" />
-    <title>Header - Translucent</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>
-  </head>
-
-  <body>
-    <ion-app>
-      <ion-header translucent>
-        <ion-toolbar>
-          <ion-title>Header - Translucent</ion-title>
-        </ion-toolbar>
-        <ion-toolbar color="primary">
-          <ion-title>Primary - Translucent</ion-title>
-        </ion-toolbar>
-        <ion-toolbar color="secondary">
-          <ion-title>Secondary - Translucent</ion-title>
-        </ion-toolbar>
-        <ion-toolbar color="tertiary">
-          <ion-title>Tertiary - Translucent</ion-title>
-        </ion-toolbar>
-        <ion-toolbar color="success">
-          <ion-title>Success - Translucent</ion-title>
-        </ion-toolbar>
-        <ion-toolbar color="warning">
-          <ion-title>Warning - Translucent</ion-title>
-        </ion-toolbar>
-        <ion-toolbar color="danger">
-          <ion-title>Danger - Translucent</ion-title>
-        </ion-toolbar>
-        <ion-toolbar color="light">
-          <ion-title>Light - Translucent</ion-title>
-        </ion-toolbar>
-        <ion-toolbar color="medium">
-          <ion-title>Medium - Translucent</ion-title>
-        </ion-toolbar>
-      </ion-header>
-      <ion-content fullscreen>
-        <ion-grid>
-          <ion-row>
-            <ion-col size="6">
-              <f class="red"></f>
-            </ion-col>
-            <ion-col size="6">
-              <f class="green"></f>
-            </ion-col>
-            <ion-col size="6">
-              <f class="blue"></f>
-            </ion-col>
-            <ion-col size="6">
-              <f class="yellow"></f>
-            </ion-col>
-            <ion-col size="6">
-              <f class="pink"></f>
-            </ion-col>
-            <ion-col size="6">
-              <f class="purple"></f>
-            </ion-col>
-            <ion-col size="6">
-              <f class="black"></f>
-            </ion-col>
-            <ion-col size="6">
-              <f class="orange"></f>
-            </ion-col>
-          </ion-row>
-        </ion-grid>
-
-        <p>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae lobortis felis, eu sodales enim. Nam
-          risus nibh, placerat at rutrum ac, vehicula vel velit. Lorem ipsum dolor sit amet, consectetur adipiscing
-          elit. Vestibulum quis elementum ligula, ac aliquet nulla. Mauris non placerat mauris. Aenean dignissim lacinia
-          porttitor. Praesent fringilla at est et ullamcorper. In ac ante ac massa porta venenatis ut id nibh. Fusce
-          felis neque, aliquet in velit vitae, venenatis euismod libero. Donec vulputate, urna sed sagittis tempor, mi
-          arcu tristique lacus, eget fringilla urna sem eget felis. Fusce dignissim lacus a scelerisque vehicula. Nulla
-          nec enim nunc. Quisque nec dui eu nibh pulvinar bibendum quis ut nunc. Duis ex odio, sollicitudin ac mollis
-          nec, fringilla non lacus. Maecenas sed tincidunt urna. Nunc feugiat maximus venenatis. Donec porttitor, felis
-          eget porttitor tempor, quam nulla dapibus nisl, sit amet posuere sapien sapien malesuada tortor. Pellentesque
-          habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque luctus, sapien nec
-          tincidunt efficitur, nibh turpis faucibus felis, in sodales massa augue nec erat. Morbi sollicitudin nisi ex,
-          et gravida nisi euismod eu. Suspendisse hendrerit dapibus orci, non viverra neque vestibulum id. Quisque vitae
-          interdum ligula, quis consectetur nibh. Phasellus in mi at erat ultrices semper. Fusce sollicitudin at dolor
-          ac lobortis. Morbi sit amet sem quis nulla pellentesque imperdiet. Nullam eu sem a enim maximus eleifend non
-          vulputate leo. Proin quis congue lacus. Pellentesque placerat, quam at tempus pulvinar, nisl ligula tempor
-          risus, quis pretium arcu odio et nulla. Nullam mollis consequat pharetra. Phasellus dictum velit sed purus
-          mattis maximus. In molestie eget massa ut dignissim. In a interdum elit. In finibus nibh a mauris lobortis
-          aliquet. Proin rutrum varius consequat. In mollis dapibus nisl, eu finibus urna viverra ac. Quisque
-          scelerisque nisl eu suscipit consectetur.
-        </p>
-
-        <ion-grid>
-          <ion-row>
-            <ion-col size="6">
-              <f class="red"></f>
-            </ion-col>
-            <ion-col size="6">
-              <f class="green"></f>
-            </ion-col>
-            <ion-col size="6">
-              <f class="blue"></f>
-            </ion-col>
-            <ion-col size="6">
-              <f class="yellow"></f>
-            </ion-col>
-            <ion-col size="6">
-              <f class="pink"></f>
-            </ion-col>
-            <ion-col size="6">
-              <f class="purple"></f>
-            </ion-col>
-            <ion-col size="6">
-              <f class="black"></f>
-            </ion-col>
-            <ion-col size="6">
-              <f class="orange"></f>
-            </ion-col>
-          </ion-row>
-        </ion-grid>
-      </ion-content>
-    </ion-app>
-
-    <style>
-      f {
-        display: block;
-        height: 200px;
-      }
-
-      .red {
-        background-color: #ea445a;
-      }
-
-      .green {
-        background-color: #76d672;
-      }
-
-      .blue {
-        background-color: #3478f6;
-      }
-
-      .yellow {
-        background-color: #ffff80;
-      }
-
-      .pink {
-        background-color: #ff6b86;
-      }
-
-      .purple {
-        background-color: #7e34f6;
-      }
-
-      .black {
-        background-color: #000;
-      }
-
-      .orange {
-        background-color: #f69234;
-      }
-    </style>
-  </body>
-</html>
diff --git a/core/src/components/item/item.mixins.scss b/core/src/components/item/item.mixins.scss
deleted file mode 100644
index 3c5ceeb550..0000000000
--- a/core/src/components/item/item.mixins.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-
-// Item Mixins
-// --------------------------------------------------
-
-@mixin item-push-svg-url($fill) {
-  $item-detail-push-svg: "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M2,20l-2-2l8-8L0,2l2-2l10,10L2,20z' fill='#{$fill}'/></svg>";
-
-  @include svg-background-image($item-detail-push-svg, true);
-}
diff --git a/core/src/components/item/item.vars.scss b/core/src/components/item/item.vars.scss
index f1d1371922..d0ebad2ee1 100644
--- a/core/src/components/item/item.vars.scss
+++ b/core/src/components/item/item.vars.scss
@@ -1,5 +1,4 @@
 @import "../../themes/ionic.globals";
-@import "./item.mixins";
 
 // Item
 // --------------------------------------------------
diff --git a/core/src/components/list/test/basic/e2e.ts b/core/src/components/list/test/basic/e2e.ts
deleted file mode 100644
index fc597c8461..0000000000
--- a/core/src/components/list/test/basic/e2e.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('list: basic', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/list/test/basic?ionic:_testing=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});
diff --git a/core/src/components/list/test/basic/index.html b/core/src/components/list/test/basic/index.html
index c4f32f9f83..d30b58b6b1 100644
--- a/core/src/components/list/test/basic/index.html
+++ b/core/src/components/list/test/basic/index.html
@@ -28,19 +28,6 @@
           <ion-item>Super Metroid</ion-item>
           <ion-item>Mega Man X</ion-item>
           <ion-item>The Legend of Zelda</ion-item>
-          <ion-item>Pac-Man</ion-item>
-          <ion-item>Super Mario World</ion-item>
-          <ion-item>Street Fighter II</ion-item>
-          <ion-item>Half Life</ion-item>
-          <ion-item>Portal</ion-item>
-          <ion-item>Final Fantasy VII</ion-item>
-          <ion-item>Star Fox</ion-item>
-          <ion-item>Tetris</ion-item>
-          <ion-item>Donkey Kong III</ion-item>
-          <ion-item>Goldeneye 007</ion-item>
-          <ion-item>Doom</ion-item>
-          <ion-item>Fallout</ion-item>
-          <ion-item>GTA</ion-item>
           <ion-item lines="full">Halo</ion-item>
         </ion-list>
       </ion-content>
diff --git a/core/src/components/list/test/basic/list.e2e.ts b/core/src/components/list/test/basic/list.e2e.ts
new file mode 100644
index 0000000000..2870841955
--- /dev/null
+++ b/core/src/components/list/test/basic/list.e2e.ts
@@ -0,0 +1,12 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('list: basic', () => {
+  test('should not have visual regressions', async ({ page }) => {
+    await page.goto(`/src/components/list/test/basic`);
+
+    const list = page.locator('ion-list');
+
+    expect(await list.screenshot()).toMatchSnapshot(`list-basic-diff-${page.getSnapshotSettings()}.png`);
+  });
+});
diff --git a/core/src/components/list/test/basic/list.e2e.ts-snapshots/list-basic-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/list/test/basic/list.e2e.ts-snapshots/list-basic-diff-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..b330665df8
Binary files /dev/null and b/core/src/components/list/test/basic/list.e2e.ts-snapshots/list-basic-diff-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/list/test/basic/list.e2e.ts-snapshots/list-basic-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/list/test/basic/list.e2e.ts-snapshots/list-basic-diff-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..a672a337b7
Binary files /dev/null and b/core/src/components/list/test/basic/list.e2e.ts-snapshots/list-basic-diff-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/list/test/basic/list.e2e.ts-snapshots/list-basic-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/list/test/basic/list.e2e.ts-snapshots/list-basic-diff-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..1843500ece
Binary files /dev/null and b/core/src/components/list/test/basic/list.e2e.ts-snapshots/list-basic-diff-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/list/test/basic/list.e2e.ts-snapshots/list-basic-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/list/test/basic/list.e2e.ts-snapshots/list-basic-diff-ios-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..ff331079bc
Binary files /dev/null and b/core/src/components/list/test/basic/list.e2e.ts-snapshots/list-basic-diff-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/list/test/basic/list.e2e.ts-snapshots/list-basic-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/list/test/basic/list.e2e.ts-snapshots/list-basic-diff-ios-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..507bea6a7c
Binary files /dev/null and b/core/src/components/list/test/basic/list.e2e.ts-snapshots/list-basic-diff-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/list/test/basic/list.e2e.ts-snapshots/list-basic-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/list/test/basic/list.e2e.ts-snapshots/list-basic-diff-ios-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..8d4744148a
Binary files /dev/null and b/core/src/components/list/test/basic/list.e2e.ts-snapshots/list-basic-diff-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/list/test/basic/list.e2e.ts-snapshots/list-basic-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/list/test/basic/list.e2e.ts-snapshots/list-basic-diff-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..0c42179e6e
Binary files /dev/null and b/core/src/components/list/test/basic/list.e2e.ts-snapshots/list-basic-diff-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/list/test/basic/list.e2e.ts-snapshots/list-basic-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/list/test/basic/list.e2e.ts-snapshots/list-basic-diff-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..3508642090
Binary files /dev/null and b/core/src/components/list/test/basic/list.e2e.ts-snapshots/list-basic-diff-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/list/test/basic/list.e2e.ts-snapshots/list-basic-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/list/test/basic/list.e2e.ts-snapshots/list-basic-diff-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..b545b24a86
Binary files /dev/null and b/core/src/components/list/test/basic/list.e2e.ts-snapshots/list-basic-diff-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/list/test/basic/list.e2e.ts-snapshots/list-basic-diff-md-rtl-Mobile-Chrome-linux.png b/core/src/components/list/test/basic/list.e2e.ts-snapshots/list-basic-diff-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..687252dee6
Binary files /dev/null and b/core/src/components/list/test/basic/list.e2e.ts-snapshots/list-basic-diff-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/list/test/basic/list.e2e.ts-snapshots/list-basic-diff-md-rtl-Mobile-Firefox-linux.png b/core/src/components/list/test/basic/list.e2e.ts-snapshots/list-basic-diff-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..3f82eecc61
Binary files /dev/null and b/core/src/components/list/test/basic/list.e2e.ts-snapshots/list-basic-diff-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/list/test/basic/list.e2e.ts-snapshots/list-basic-diff-md-rtl-Mobile-Safari-linux.png b/core/src/components/list/test/basic/list.e2e.ts-snapshots/list-basic-diff-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..4def8f9f29
Binary files /dev/null and b/core/src/components/list/test/basic/list.e2e.ts-snapshots/list-basic-diff-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/list/test/icons/e2e.ts b/core/src/components/list/test/icons/e2e.ts
deleted file mode 100644
index e49f3255ba..0000000000
--- a/core/src/components/list/test/icons/e2e.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('list: icons', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/list/test/icons?ionic:_testing=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});
diff --git a/core/src/components/list/test/icons/index.html b/core/src/components/list/test/icons/index.html
deleted file mode 100644
index 0e4e7305ee..0000000000
--- a/core/src/components/list/test/icons/index.html
+++ /dev/null
@@ -1,93 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" dir="ltr">
-  <head>
-    <meta charset="UTF-8" />
-    <title>List - Icons</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>
-  </head>
-
-  <body>
-    <ion-app>
-      <ion-header>
-        <ion-toolbar>
-          <ion-title>Trip</ion-title>
-          <ion-buttons slot="end">
-            <ion-button>
-              <ion-icon slot="icon-only" name="search-outline"></ion-icon>
-            </ion-button>
-            <ion-button>
-              <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
-            </ion-button>
-          </ion-buttons>
-        </ion-toolbar>
-      </ion-header>
-      <ion-content>
-        <ion-list>
-          <ion-list-header lines="full">
-            <ion-label> Categories </ion-label>
-          </ion-list-header>
-          <ion-item button>
-            <ion-icon name="film-outline" slot="start"></ion-icon>
-            <ion-label> Attractions </ion-label>
-          </ion-item>
-          <ion-item button>
-            <ion-icon name="restaurant-outline" slot="start"></ion-icon>
-            <ion-label> Dining </ion-label>
-          </ion-item>
-          <ion-item button>
-            <ion-icon name="create-outline" slot="start"></ion-icon>
-            <ion-label> Education </ion-label>
-          </ion-item>
-          <ion-item button lines="full">
-            <ion-icon name="airplane-outline" slot="start"></ion-icon>
-            <ion-label> Travel </ion-label>
-          </ion-item>
-        </ion-list>
-
-        <ion-list>
-          <ion-list-header lines="full">
-            <ion-label> Information </ion-label>
-          </ion-list-header>
-          <ion-item>
-            <ion-icon name="people-outline" slot="start"></ion-icon>
-            <ion-label> Attendees </ion-label>
-            <ion-select slot="end" value="1">
-              <ion-select-option value="1">1</ion-select-option>
-              <ion-select-option value="2">2</ion-select-option>
-              <ion-select-option value="3">3</ion-select-option>
-            </ion-select>
-          </ion-item>
-          <ion-item lines="full">
-            <ion-icon name="repeat-outline" slot="start"></ion-icon>
-            <ion-label> Round-trip </ion-label>
-            <ion-toggle checked></ion-toggle>
-          </ion-item>
-        </ion-list>
-
-        <ion-list>
-          <ion-list-header lines="full">
-            <ion-label> Contact </ion-label>
-          </ion-list-header>
-          <ion-item>
-            <ion-icon name="person-outline" slot="start"></ion-icon>
-            <ion-label> Name </ion-label>
-            <ion-input placeholder="xxxxx"></ion-input>
-          </ion-item>
-          <ion-item lines="full">
-            <ion-icon name="call-outline" slot="start"></ion-icon>
-            <ion-label> Phone Number </ion-label>
-            <ion-input placeholder="(xxx) xxx-xxxx" type="number"></ion-input>
-          </ion-item>
-        </ion-list>
-      </ion-content>
-    </ion-app>
-  </body>
-</html>
diff --git a/core/src/components/list/test/lines/e2e.ts b/core/src/components/list/test/lines/e2e.ts
deleted file mode 100644
index 5ad534dd25..0000000000
--- a/core/src/components/list/test/lines/e2e.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('list: lines', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/list/test/lines?ionic:_testing=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});
diff --git a/core/src/components/list/test/lines/index.html b/core/src/components/list/test/lines/index.html
index 5447ed88cf..97874e2262 100644
--- a/core/src/components/list/test/lines/index.html
+++ b/core/src/components/list/test/lines/index.html
@@ -2,7 +2,7 @@
 <html lang="en" dir="ltr">
   <head>
     <meta charset="UTF-8" />
-    <title>List - Basic</title>
+    <title>List - Lines</title>
     <meta
       name="viewport"
       content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
@@ -18,7 +18,7 @@
     <ion-app>
       <ion-header>
         <ion-toolbar>
-          <ion-title>List - Basic</ion-title>
+          <ion-title>List - Lines</ion-title>
         </ion-toolbar>
       </ion-header>
 
@@ -53,80 +53,6 @@
           <ion-item><ion-label>Donkey Kong III</ion-label></ion-item>
           <ion-item><ion-label>Goldeneye 007</ion-label></ion-item>
         </ion-list>
-
-        <ion-list>
-          <ion-list-header>
-            <ion-label> Lines: Default </ion-label>
-          </ion-list-header>
-          <ion-item><ion-label>Fallout</ion-label></ion-item>
-          <ion-item><ion-label>GTA</ion-label></ion-item>
-          <ion-item><ion-label>Halo</ion-label></ion-item>
-          <ion-item><ion-label>Doom</ion-label></ion-item>
-          <ion-item><ion-label>Final Fantasy VII</ion-label></ion-item>
-        </ion-list>
-
-        <ion-list>
-          <ion-list-header>
-            <ion-label> Wrapper item: default </ion-label>
-          </ion-list-header>
-          <div>
-            <ion-item><ion-label>Pokémon Yellow</ion-label></ion-item>
-          </div>
-          <div>
-            <ion-item><ion-label>Super Metroid</ion-label></ion-item>
-          </div>
-          <div>
-            <ion-item><ion-label>Mega Man X</ion-label></ion-item>
-          </div>
-          <div>
-            <ion-item><ion-label>The Legend of Zelda</ion-label></ion-item>
-          </div>
-          <div>
-            <ion-item><ion-label>Pac-Man</ion-label></ion-item>
-          </div>
-        </ion-list>
-
-        <ion-list lines="none">
-          <ion-list-header>
-            <ion-label> Wrapper list lines: none </ion-label>
-          </ion-list-header>
-          <div>
-            <ion-item><ion-label>Pokémon Yellow</ion-label></ion-item>
-          </div>
-          <div>
-            <ion-item><ion-label>Super Metroid</ion-label></ion-item>
-          </div>
-          <div>
-            <ion-item><ion-label>Mega Man X</ion-label></ion-item>
-          </div>
-          <div>
-            <ion-item><ion-label>The Legend of Zelda</ion-label></ion-item>
-          </div>
-          <div>
-            <ion-item><ion-label>Pac-Man</ion-label></ion-item>
-          </div>
-        </ion-list>
-
-        <ion-list>
-          <ion-list-header>
-            <ion-label> Wrapper w/ item lines: none </ion-label>
-          </ion-list-header>
-          <div>
-            <ion-item lines="none"><ion-label>Pokémon Yellow</ion-label></ion-item>
-          </div>
-          <div>
-            <ion-item lines="none"><ion-label>Super Metroid</ion-label></ion-item>
-          </div>
-          <div>
-            <ion-item lines="none"><ion-label>Mega Man X</ion-label></ion-item>
-          </div>
-          <div>
-            <ion-item lines="none"><ion-label>The Legend of Zelda</ion-label></ion-item>
-          </div>
-          <div>
-            <ion-item lines="none"><ion-label>Pac-Man</ion-label></ion-item>
-          </div>
-        </ion-list>
       </ion-content>
     </ion-app>
   </body>
diff --git a/core/src/components/list/test/lines/list.e2e.ts b/core/src/components/list/test/lines/list.e2e.ts
new file mode 100644
index 0000000000..76bd62ebf0
--- /dev/null
+++ b/core/src/components/list/test/lines/list.e2e.ts
@@ -0,0 +1,26 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('list: lines', () => {
+  test('lines="full" should render correctly', async ({ page }) => {
+    await page.goto(`/src/components/list/test/lines`);
+
+    const list = page.locator('ion-list[lines="full"]');
+
+    expect(await list.screenshot()).toMatchSnapshot(`list-lines-full-${page.getSnapshotSettings()}.png`);
+  });
+  test('lines="inset" should render correctly', async ({ page }) => {
+    await page.goto(`/src/components/list/test/lines`);
+
+    const list = page.locator('ion-list[lines="inset"]');
+
+    expect(await list.screenshot()).toMatchSnapshot(`list-lines-inset-${page.getSnapshotSettings()}.png`);
+  });
+  test('lines="none" should render correctly', async ({ page }) => {
+    await page.goto(`/src/components/list/test/lines`);
+
+    const list = page.locator('ion-list[lines="none"]');
+
+    expect(await list.screenshot()).toMatchSnapshot(`list-lines-none-${page.getSnapshotSettings()}.png`);
+  });
+});
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..f2452ed279
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..a86d674de9
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-ios-ltr-Mobile-Safari-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..d1bd28d81e
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-ios-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..b226e60039
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-ios-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..ed9f190d67
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-ios-rtl-Mobile-Safari-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-ios-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..3972b7e549
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-md-ltr-Mobile-Chrome-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..0244f85b81
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-md-ltr-Mobile-Firefox-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..47d180714a
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-md-ltr-Mobile-Safari-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..05e854bf11
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-md-rtl-Mobile-Chrome-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..51f8c94587
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-md-rtl-Mobile-Firefox-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..039519412c
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-md-rtl-Mobile-Safari-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..1c21949816
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..ecd70d92e1
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..5a78902e65
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-ios-ltr-Mobile-Safari-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..b7a366b0e6
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-ios-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..6e98668913
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-ios-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..adf917821b
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-ios-rtl-Mobile-Safari-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-ios-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..d735b63da4
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-md-ltr-Mobile-Chrome-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..a030915196
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-md-ltr-Mobile-Firefox-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..573663cdb9
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-md-ltr-Mobile-Safari-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..80ead509c7
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-md-rtl-Mobile-Chrome-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..595d8a4d3a
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-md-rtl-Mobile-Firefox-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..415a9537dc
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-md-rtl-Mobile-Safari-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..c147d39933
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..25e5291d5d
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..6f007eecbf
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-ios-ltr-Mobile-Safari-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..aeabce345a
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-ios-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..a27e8fe04c
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-ios-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..5dcd24d590
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-ios-rtl-Mobile-Safari-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-ios-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..50b7bd6b4b
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-md-ltr-Mobile-Chrome-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..cc8d367285
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-md-ltr-Mobile-Firefox-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..3e3cecdc1e
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-md-ltr-Mobile-Safari-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..65acc1e00f
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-md-rtl-Mobile-Chrome-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..c60b18ce60
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-md-rtl-Mobile-Firefox-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..d508a5aa00
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-md-rtl-Mobile-Safari-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..c605234cfd
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/list/test/spec/e2e.ts b/core/src/components/list/test/spec/e2e.ts
deleted file mode 100644
index e4bd56a26d..0000000000
--- a/core/src/components/list/test/spec/e2e.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('list: spec', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/list/test/spec?ionic:_testing=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});
diff --git a/core/src/components/list/test/spec/index.html b/core/src/components/list/test/spec/index.html
deleted file mode 100644
index 9d16b36861..0000000000
--- a/core/src/components/list/test/spec/index.html
+++ /dev/null
@@ -1,296 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" dir="ltr">
-  <head>
-    <meta charset="UTF-8" />
-    <title>List - Spec</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/core.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>
-  </head>
-
-  <body>
-    <ion-list lines="none">
-      <ion-item>
-        <ion-label> Single-line item </ion-label>
-        <ion-icon name="square" slot="end"></ion-icon>
-      </ion-item>
-
-      <ion-item>
-        <ion-label> Single-line item longer text </ion-label>
-      </ion-item>
-
-      <ion-item>
-        <ion-icon color="tertiary" slot="start" name="bluetooth"></ion-icon>
-        <ion-label> Single-line item </ion-label>
-        <ion-reorder slot="end"></ion-reorder>
-      </ion-item>
-
-      <ion-item>
-        <ion-avatar slot="start">
-          <img src="/src/components/avatar/test/avatar.svg" />
-        </ion-avatar>
-        <ion-label> Single-line item </ion-label>
-      </ion-item>
-
-      <ion-item>
-        <ion-thumbnail slot="start">
-          <img src="/src/components/thumbnail/test/thumbnail.svg" />
-        </ion-thumbnail>
-        <ion-label> Single-line item </ion-label>
-      </ion-item>
-
-      <ion-item>
-        <ion-avatar slot="start">
-          <img src="/src/components/avatar/test/avatar.svg" />
-        </ion-avatar>
-        <ion-label> One-line item </ion-label>
-        <ion-checkbox slot="end"></ion-checkbox>
-      </ion-item>
-
-      <ion-item>
-        <ion-label> One-line item </ion-label>
-        <ion-radio slot="end"></ion-radio>
-      </ion-item>
-
-      <ion-item>
-        <ion-label> One-line item </ion-label>
-        <ion-toggle slot="end"></ion-toggle>
-      </ion-item>
-
-      <ion-item>
-        <ion-label> One-line item </ion-label>
-        <ion-badge slot="end">99</ion-badge>
-      </ion-item>
-
-      <ion-item>
-        <ion-checkbox slot="start"></ion-checkbox>
-        <ion-label> One-line item </ion-label>
-      </ion-item>
-
-      <ion-item>
-        <ion-label>
-          Two-line item
-          <p>Secondary text</p>
-        </ion-label>
-        <ion-note slot="end">meta</ion-note>
-      </ion-item>
-
-      <!-- TODO
-        <ion-item>
-          <ion-label>
-            <span>Overline</span>
-            Two-line item
-          </ion-label>
-        </ion-item> -->
-
-      <ion-item>
-        <ion-icon name="bluetooth" slot="start"></ion-icon>
-        <ion-label>
-          Two-line item
-          <p>Secondary text</p>
-        </ion-label>
-      </ion-item>
-
-      <ion-item>
-        <ion-avatar slot="start">
-          <img src="/src/components/avatar/test/avatar.svg" />
-        </ion-avatar>
-        <ion-label>
-          Two-line item
-          <p>Secondary text</p>
-        </ion-label>
-        <ion-icon name="square" slot="end"></ion-icon>
-      </ion-item>
-
-      <ion-item>
-        <ion-thumbnail slot="start">
-          <img src="/src/components/thumbnail/test/thumbnail.svg" />
-        </ion-thumbnail>
-        <ion-label>
-          Two-line item
-          <p>Secondary text</p>
-        </ion-label>
-        <ion-icon name="square" slot="end"></ion-icon>
-      </ion-item>
-
-      <ion-item>
-        <ion-label class="ion-text-wrap">
-          Three-line item
-          <p>Secondary line text Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-        </ion-label>
-        <ion-note slot="end">meta</ion-note>
-      </ion-item>
-
-      <!-- TODO
-        <ion-item>
-          <ion-label>
-            <span>Overline</span>
-            Three-line item
-          </ion-label>
-        </ion-item> -->
-
-      <ion-item>
-        <ion-icon slot="start" name="bluetooth"></ion-icon>
-        <ion-label class="ion-text-wrap">
-          Three-line item
-          <p>Secondary line text Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-        </ion-label>
-      </ion-item>
-
-      <ion-item>
-        <ion-avatar slot="start">
-          <img src="/src/components/avatar/test/avatar.svg" />
-        </ion-avatar>
-        <ion-label class="ion-text-wrap">
-          Three-line item
-          <p>Secondary line text Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-        </ion-label>
-      </ion-item>
-
-      <ion-item>
-        <ion-thumbnail slot="start">
-          <img src="/src/components/thumbnail/test/thumbnail.svg" />
-        </ion-thumbnail>
-        <ion-label class="ion-text-wrap">
-          Three-line item
-          <p>Secondary line text Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-        </ion-label>
-      </ion-item>
-    </ion-list>
-
-    <!-- Similar to the first list but flipped slots -->
-    <ion-list lines="none">
-      <ion-item>
-        <ion-avatar slot="end">
-          <img src="/src/components/avatar/test/avatar.svg" />
-        </ion-avatar>
-        <ion-label> Single-line item </ion-label>
-      </ion-item>
-
-      <ion-item>
-        <ion-thumbnail slot="end">
-          <img src="/src/components/thumbnail/test/thumbnail.svg" />
-        </ion-thumbnail>
-        <ion-label> Single-line item </ion-label>
-      </ion-item>
-
-      <ion-item>
-        <ion-avatar slot="end">
-          <img src="/src/components/avatar/test/avatar.svg" />
-        </ion-avatar>
-        <ion-label> One-line item </ion-label>
-        <ion-checkbox slot="start"></ion-checkbox>
-      </ion-item>
-
-      <ion-item>
-        <ion-label> One-line item </ion-label>
-        <ion-radio slot="start"></ion-radio>
-      </ion-item>
-
-      <ion-item>
-        <ion-label> One-line item </ion-label>
-        <ion-toggle slot="start"></ion-toggle>
-      </ion-item>
-
-      <ion-item>
-        <ion-label> One-line item </ion-label>
-        <ion-badge slot="start">99</ion-badge>
-      </ion-item>
-
-      <ion-item>
-        <ion-label>
-          Two-line item
-          <p>Secondary text</p>
-        </ion-label>
-        <ion-note slot="start">meta</ion-note>
-      </ion-item>
-
-      <ion-item>
-        <ion-icon name="bluetooth" slot="end"></ion-icon>
-        <ion-label>
-          Two-line item
-          <p>Secondary text</p>
-        </ion-label>
-      </ion-item>
-
-      <ion-item>
-        <ion-avatar slot="end">
-          <img src="/src/components/avatar/test/avatar.svg" />
-        </ion-avatar>
-        <ion-label>
-          Two-line item
-          <p>Secondary text</p>
-        </ion-label>
-        <ion-icon name="square" slot="start"></ion-icon>
-      </ion-item>
-
-      <ion-item>
-        <ion-thumbnail slot="end">
-          <img src="/src/components/thumbnail/test/thumbnail.svg" />
-        </ion-thumbnail>
-        <ion-label>
-          Two-line item
-          <p>Secondary text</p>
-        </ion-label>
-        <ion-icon name="square" slot="start"></ion-icon>
-      </ion-item>
-
-      <ion-item>
-        <ion-label class="ion-text-wrap">
-          Three-line item
-          <p>Secondary line text Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-        </ion-label>
-        <ion-note slot="start">meta</ion-note>
-      </ion-item>
-
-      <ion-item>
-        <ion-icon slot="end" name="bluetooth"></ion-icon>
-        <ion-label class="ion-text-wrap">
-          Three-line item
-          <p>Secondary line text Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-        </ion-label>
-      </ion-item>
-
-      <ion-item>
-        <ion-avatar slot="end">
-          <img src="/src/components/avatar/test/avatar.svg" />
-        </ion-avatar>
-        <ion-label class="ion-text-wrap">
-          Three-line item
-          <p>Secondary line text Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-        </ion-label>
-      </ion-item>
-
-      <ion-item>
-        <ion-thumbnail slot="end">
-          <img src="/src/components/thumbnail/test/thumbnail.svg" />
-        </ion-thumbnail>
-        <ion-label class="ion-text-wrap">
-          Three-line item
-          <p>Secondary line text Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-        </ion-label>
-      </ion-item>
-    </ion-list>
-
-    <style>
-      body {
-        margin: 0;
-      }
-
-      body,
-      ion-list {
-        background: #e5e5e5 !important;
-      }
-
-      ion-item {
-        margin-bottom: 12px;
-      }
-    </style>
-  </body>
-</html>
diff --git a/core/src/components/menu-button/test/a11y/e2e.ts b/core/src/components/menu-button/test/a11y/e2e.ts
deleted file mode 100644
index ca75e6b862..0000000000
--- a/core/src/components/menu-button/test/a11y/e2e.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { AxePuppeteer } from '@axe-core/puppeteer';
-import { newE2EPage } from '@stencil/core/testing';
-
-test('menu-button: axe', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/menu-button/test/a11y?ionic:_testing=true',
-  });
-
-  const results = await new AxePuppeteer(page).analyze();
-  expect(results.violations.length).toEqual(0);
-});
diff --git a/core/src/components/menu-button/test/a11y/menu-button.e2e.ts b/core/src/components/menu-button/test/a11y/menu-button.e2e.ts
new file mode 100644
index 0000000000..8d3a42fe5e
--- /dev/null
+++ b/core/src/components/menu-button/test/a11y/menu-button.e2e.ts
@@ -0,0 +1,17 @@
+import AxeBuilder from '@axe-core/playwright';
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('menu-button: a11y', () => {
+  test.beforeEach(({ skip }) => {
+    skip.rtl();
+  });
+
+  test('should not have accessibility violations', async ({ page }) => {
+    await page.goto('/src/components/menu-button/test/a11y');
+
+    const results = await new AxeBuilder({ page }).analyze();
+
+    expect(results.violations).toEqual([]);
+  });
+});
diff --git a/core/src/components/menu-button/test/basic/e2e.ts b/core/src/components/menu-button/test/basic/e2e.ts
deleted file mode 100644
index 0873820fbb..0000000000
--- a/core/src/components/menu-button/test/basic/e2e.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('menu-button: basic', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/menu-button/test/basic?ionic:_testing=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});
diff --git a/core/src/components/menu-button/test/basic/menu-button.e2e.ts b/core/src/components/menu-button/test/basic/menu-button.e2e.ts
new file mode 100644
index 0000000000..9daca79fc8
--- /dev/null
+++ b/core/src/components/menu-button/test/basic/menu-button.e2e.ts
@@ -0,0 +1,16 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('menu-button: basic', () => {
+  test.beforeEach(({ skip }) => {
+    skip.rtl();
+  });
+
+  test('should not have visual regressions', async ({ page }) => {
+    await page.goto(`/src/components/menu-button/test/basic`);
+
+    await page.setIonViewport();
+
+    expect(await page.screenshot()).toMatchSnapshot(`menu-button-diff-${page.getSnapshotSettings()}.png`);
+  });
+});
diff --git a/core/src/components/menu-button/test/basic/menu-button.e2e.ts-snapshots/menu-button-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/menu-button/test/basic/menu-button.e2e.ts-snapshots/menu-button-diff-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..0a50e679cb
Binary files /dev/null and b/core/src/components/menu-button/test/basic/menu-button.e2e.ts-snapshots/menu-button-diff-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/menu-button/test/basic/menu-button.e2e.ts-snapshots/menu-button-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/menu-button/test/basic/menu-button.e2e.ts-snapshots/menu-button-diff-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..a01a4d2459
Binary files /dev/null and b/core/src/components/menu-button/test/basic/menu-button.e2e.ts-snapshots/menu-button-diff-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/menu-button/test/basic/menu-button.e2e.ts-snapshots/menu-button-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/menu-button/test/basic/menu-button.e2e.ts-snapshots/menu-button-diff-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..067191ae33
Binary files /dev/null and b/core/src/components/menu-button/test/basic/menu-button.e2e.ts-snapshots/menu-button-diff-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/menu-button/test/basic/menu-button.e2e.ts-snapshots/menu-button-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/menu-button/test/basic/menu-button.e2e.ts-snapshots/menu-button-diff-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..9984ae7b65
Binary files /dev/null and b/core/src/components/menu-button/test/basic/menu-button.e2e.ts-snapshots/menu-button-diff-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/menu-button/test/basic/menu-button.e2e.ts-snapshots/menu-button-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/menu-button/test/basic/menu-button.e2e.ts-snapshots/menu-button-diff-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..d877753496
Binary files /dev/null and b/core/src/components/menu-button/test/basic/menu-button.e2e.ts-snapshots/menu-button-diff-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/menu-button/test/basic/menu-button.e2e.ts-snapshots/menu-button-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/menu-button/test/basic/menu-button.e2e.ts-snapshots/menu-button-diff-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..9a30db200c
Binary files /dev/null and b/core/src/components/menu-button/test/basic/menu-button.e2e.ts-snapshots/menu-button-diff-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/modal/modal.tsx b/core/src/components/modal/modal.tsx
index 5ad51aefb3..804c803dc7 100644
--- a/core/src/components/modal/modal.tsx
+++ b/core/src/components/modal/modal.tsx
@@ -332,13 +332,23 @@ export class Modal implements ComponentInterface, OverlayInterface {
   }
 
   connectedCallback() {
-    prepareOverlay(this.el);
+    const { configureTriggerInteraction, el } = this;
+    prepareOverlay(el);
+    configureTriggerInteraction();
+  }
+
+  disconnectedCallback() {
+    const { destroyTriggerInteraction } = this;
+
+    if (destroyTriggerInteraction) {
+      destroyTriggerInteraction();
+    }
   }
 
   componentWillLoad() {
     const { breakpoints, initialBreakpoint, swipeToClose, el } = this;
 
-    this.inheritedAttributes = inheritAttributes(el, ['role']);
+    this.inheritedAttributes = inheritAttributes(el, ['aria-label', 'role']);
 
     /**
      * If user has custom ID set then we should
@@ -371,7 +381,6 @@ export class Modal implements ComponentInterface, OverlayInterface {
       raf(() => this.present());
     }
     this.breakpointsChanged(this.breakpoints);
-    this.configureTriggerInteraction();
   }
 
   private configureTriggerInteraction = () => {
@@ -870,11 +879,8 @@ export class Modal implements ComponentInterface, OverlayInterface {
     return (
       <Host
         no-router
-        aria-modal="true"
-        role="dialog"
         tabindex="-1"
         {...(htmlAttributes as any)}
-        {...inheritedAttributes}
         style={{
           zIndex: `${20000 + this.overlayIndex}`,
         }}
@@ -902,7 +908,20 @@ export class Modal implements ComponentInterface, OverlayInterface {
 
         {mode === 'ios' && <div class="modal-shadow"></div>}
 
-        <div class="modal-wrapper ion-overlay-wrapper" part="content" ref={(el) => (this.wrapperEl = el)}>
+        <div
+          /*
+            role and aria-modal must be used on the
+            same element. They must also be set inside the
+            shadow DOM otherwise ion-button will not be highlighted
+            when using VoiceOver: https://bugs.webkit.org/show_bug.cgi?id=247134
+          */
+          role="dialog"
+          {...inheritedAttributes}
+          aria-modal="true"
+          class="modal-wrapper ion-overlay-wrapper"
+          part="content"
+          ref={(el) => (this.wrapperEl = el)}
+        >
           {showHandle && (
             <button
               class="modal-handle"
diff --git a/core/src/components/modal/test/a11y/modal.e2e.ts b/core/src/components/modal/test/a11y/modal.e2e.ts
index db34a1057e..6a040388a2 100644
--- a/core/src/components/modal/test/a11y/modal.e2e.ts
+++ b/core/src/components/modal/test/a11y/modal.e2e.ts
@@ -13,7 +13,7 @@ test.describe('modal: a11y', () => {
 
     const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
     const button = page.locator('#open-modal');
-    const modal = page.locator('ion-modal');
+    const modal = page.locator('ion-modal .modal-wrapper');
 
     await expect(modal).toHaveAttribute('role', 'dialog');
 
@@ -32,7 +32,7 @@ test.describe('modal: a11y', () => {
     await page.setContent(`
       <ion-modal role="alertdialog"></ion-modal>
     `);
-    const modal = page.locator('ion-modal');
+    const modal = page.locator('ion-modal .modal-wrapper');
 
     await expect(modal).toHaveAttribute('role', 'alertdialog');
   });
diff --git a/core/src/components/modal/test/trigger/modal.e2e.ts b/core/src/components/modal/test/trigger/modal.e2e.ts
index 492d85098d..adcc76dc41 100644
--- a/core/src/components/modal/test/trigger/modal.e2e.ts
+++ b/core/src/components/modal/test/trigger/modal.e2e.ts
@@ -2,15 +2,34 @@ import { expect } from '@playwright/test';
 import { test } from '@utils/test/playwright';
 
 test.describe('modal: trigger', () => {
-  test('should open modal by left clicking on trigger', async ({ page }) => {
+  test.beforeEach(async ({ page, skip }) => {
+    skip.rtl();
+    skip.mode('ios');
     await page.goto('/src/components/modal/test/trigger');
+  });
+
+  test('should open modal by left clicking on trigger', async ({ page }) => {
     const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
 
     await page.click('#left-click-trigger');
 
     await ionModalDidPresent.next();
 
-    const modal = await page.locator('.left-click-modal');
+    const modal = page.locator('.left-click-modal');
+    await expect(modal).toBeVisible();
+  });
+
+  test('should still open modal when it has been removed and re-added to DOM', async ({ page }) => {
+    const button = page.locator('#left-click-trigger');
+    const modal = page.locator('ion-modal');
+
+    await modal.evaluate((modal: HTMLIonModalElement) => {
+      modal.remove();
+      document.querySelector('ion-button')?.insertAdjacentElement('afterend', modal);
+    });
+    await page.waitForChanges();
+
+    await button.click();
     await expect(modal).toBeVisible();
   });
 });
diff --git a/core/src/components/popover/popover.tsx b/core/src/components/popover/popover.tsx
index e9d6bacfc9..79c0ba9c34 100644
--- a/core/src/components/popover/popover.tsx
+++ b/core/src/components/popover/popover.tsx
@@ -311,7 +311,18 @@ export class Popover implements ComponentInterface, PopoverInterface {
   @Event({ eventName: 'didDismiss' }) didDismissShorthand!: EventEmitter<OverlayEventDetail>;
 
   connectedCallback() {
-    prepareOverlay(this.el);
+    const { configureTriggerInteraction, el } = this;
+
+    prepareOverlay(el);
+    configureTriggerInteraction();
+  }
+
+  disconnectedCallback() {
+    const { destroyTriggerInteraction } = this;
+
+    if (destroyTriggerInteraction) {
+      destroyTriggerInteraction();
+    }
   }
 
   componentWillLoad() {
@@ -344,8 +355,6 @@ export class Popover implements ComponentInterface, PopoverInterface {
         this.dismiss(undefined, undefined, false);
       });
     }
-
-    this.configureTriggerInteraction();
   }
 
   /**
diff --git a/core/src/components/popover/test/trigger/popover.e2e.ts b/core/src/components/popover/test/trigger/popover.e2e.ts
index 2f691f1841..b9a4c232a0 100644
--- a/core/src/components/popover/test/trigger/popover.e2e.ts
+++ b/core/src/components/popover/test/trigger/popover.e2e.ts
@@ -5,7 +5,9 @@ import { test } from '@utils/test/playwright';
 import { openPopover } from '../test.utils';
 
 test.describe('popover: trigger', async () => {
-  test.beforeEach(async ({ page }) => {
+  test.beforeEach(async ({ page, skip }) => {
+    skip.rtl();
+    skip.mode('ios');
     await page.goto('/src/components/popover/test/trigger');
   });
 
@@ -32,6 +34,20 @@ test.describe('popover: trigger', async () => {
 
     await checkPopover(page, '.hover-popover');
   });
+
+  test('should still open popover when it has been removed and re-added to DOM', async ({ page }) => {
+    const button = page.locator('#left-click-trigger');
+    const popover = page.locator('.left-click-popover');
+
+    await popover.evaluate((popover: HTMLIonPopoverElement) => {
+      popover.remove();
+      document.querySelector('ion-button')?.insertAdjacentElement('afterend', popover);
+    });
+    await page.waitForChanges();
+
+    await button.click();
+    await expect(popover).toBeVisible();
+  });
 });
 
 const checkPopover = async (page: E2EPage, popoverSelector: string) => {
diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md
index ddd1867ada..1df51a5b1f 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.3.4](https://github.com/ionic-team/ionic-docs/compare/v6.3.3...v6.3.4) (2022-11-02)
+
+**Note:** Version bump only for package @ionic/docs
+
+
+
+
+
 ## [6.3.3](https://github.com/ionic-team/ionic-docs/compare/v6.3.2...v6.3.3) (2022-10-26)
 
 **Note:** Version bump only for package @ionic/docs
diff --git a/docs/package-lock.json b/docs/package-lock.json
index c3dfa3125b..2c5a3d6f07 100644
--- a/docs/package-lock.json
+++ b/docs/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@ionic/docs",
-  "version": "6.3.3",
+  "version": "6.3.4",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/docs",
-      "version": "6.3.3",
+      "version": "6.3.4",
       "license": "MIT"
     }
   }
diff --git a/docs/package.json b/docs/package.json
index 5bd0a63da5..5caee18a9b 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/docs",
-  "version": "6.3.3",
+  "version": "6.3.4",
   "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 7dc02236c7..10dc5e1846 100644
--- a/lerna.json
+++ b/lerna.json
@@ -5,5 +5,5 @@
     "angular",
     "packages/*"
   ],
-  "version": "6.3.3"
+  "version": "6.3.4"
 }
diff --git a/packages/angular-server/CHANGELOG.md b/packages/angular-server/CHANGELOG.md
index 1c9037d068..a896579147 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.3.4](https://github.com/ionic-team/ionic/compare/v6.3.3...v6.3.4) (2022-11-02)
+
+**Note:** Version bump only for package @ionic/angular-server
+
+
+
+
+
 ## [6.3.3](https://github.com/ionic-team/ionic/compare/v6.3.2...v6.3.3) (2022-10-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 0e16c454c6..a7200c2ec5 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.3.3",
+  "version": "6.3.4",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/angular-server",
-      "version": "6.3.3",
+      "version": "6.3.4",
       "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.3.3",
+        "@ionic/core": "^6.3.4",
         "@ionic/eslint-config": "^0.3.0",
         "@ionic/prettier-config": "^2.0.0",
         "@typescript-eslint/eslint-plugin": "^5.2.0",
@@ -786,9 +786,9 @@
       "license": "BSD-3-Clause"
     },
     "node_modules/@ionic/core": {
-      "version": "6.3.3",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.3.3.tgz",
-      "integrity": "sha512-I7eRsni/3blStScsQcITb4seuunNzS4mIK0GxHljeRRb8oQI9Xy/oP4rq9weo9lsuEVD0sHIqBIS7/Oo9iEymQ==",
+      "version": "6.3.4",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.3.4.tgz",
+      "integrity": "sha512-3EnKqFdon7Im8JNvuPoq/iGyYK7hskdb9u5hlQE0fHU/9Q0DvFVh17QTq1sQjXntoJovfRhaPJhG+kvZK3mVAQ==",
       "dev": true,
       "dependencies": {
         "@stencil/core": "^2.18.0",
@@ -7116,9 +7116,9 @@
       "dev": true
     },
     "@ionic/core": {
-      "version": "6.3.3",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.3.3.tgz",
-      "integrity": "sha512-I7eRsni/3blStScsQcITb4seuunNzS4mIK0GxHljeRRb8oQI9Xy/oP4rq9weo9lsuEVD0sHIqBIS7/Oo9iEymQ==",
+      "version": "6.3.4",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.3.4.tgz",
+      "integrity": "sha512-3EnKqFdon7Im8JNvuPoq/iGyYK7hskdb9u5hlQE0fHU/9Q0DvFVh17QTq1sQjXntoJovfRhaPJhG+kvZK3mVAQ==",
       "dev": true,
       "requires": {
         "@stencil/core": "^2.18.0",
diff --git a/packages/angular-server/package.json b/packages/angular-server/package.json
index 40527f071e..fd8267cbcf 100644
--- a/packages/angular-server/package.json
+++ b/packages/angular-server/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/angular-server",
-  "version": "6.3.3",
+  "version": "6.3.4",
   "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.3.3",
+    "@ionic/core": "^6.3.4",
     "@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 c5eb5e153c..1b610fff5e 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.3.4](https://github.com/ionic-team/ionic/compare/v6.3.3...v6.3.4) (2022-11-02)
+
+**Note:** Version bump only for package @ionic/react-router
+
+
+
+
+
 ## [6.3.3](https://github.com/ionic-team/ionic/compare/v6.3.2...v6.3.3) (2022-10-26)
 
 
diff --git a/packages/react-router/package-lock.json b/packages/react-router/package-lock.json
index ec9dff8607..1373ac3f1d 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.3.3",
+  "version": "6.3.4",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/react-router",
-      "version": "6.3.3",
+      "version": "6.3.4",
       "license": "MIT",
       "dependencies": {
-        "@ionic/react": "^6.3.3",
+        "@ionic/react": "^6.3.4",
         "tslib": "*"
       },
       "devDependencies": {
@@ -147,9 +147,9 @@
       }
     },
     "node_modules/@ionic/core": {
-      "version": "6.3.3",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.3.3.tgz",
-      "integrity": "sha512-I7eRsni/3blStScsQcITb4seuunNzS4mIK0GxHljeRRb8oQI9Xy/oP4rq9weo9lsuEVD0sHIqBIS7/Oo9iEymQ==",
+      "version": "6.3.4",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.3.4.tgz",
+      "integrity": "sha512-3EnKqFdon7Im8JNvuPoq/iGyYK7hskdb9u5hlQE0fHU/9Q0DvFVh17QTq1sQjXntoJovfRhaPJhG+kvZK3mVAQ==",
       "dependencies": {
         "@stencil/core": "^2.18.0",
         "ionicons": "^6.0.3",
@@ -157,11 +157,11 @@
       }
     },
     "node_modules/@ionic/react": {
-      "version": "6.3.3",
-      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-6.3.3.tgz",
-      "integrity": "sha512-qWUFSwZKV1iXNPptPqahqLLrIV33+aueEGfC7UWchGq0P6re3UkUTyCNRPcXtdYiglbVD1A+goHYLnG1Wf6vLg==",
+      "version": "6.3.4",
+      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-6.3.4.tgz",
+      "integrity": "sha512-0AHyFpzk2Q3BikzbfQryiAwkzW+Y+GaXfaxPvKm+vmFiwCDcIwsCS/JZGDxcmR7G5Ps1QrfNLq5IgvZb+XSjAA==",
       "dependencies": {
-        "@ionic/core": "^6.3.3",
+        "@ionic/core": "^6.3.4",
         "ionicons": "^6.0.2",
         "tslib": "*"
       },
@@ -207,9 +207,9 @@
       }
     },
     "node_modules/@stencil/core": {
-      "version": "2.19.1",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.19.1.tgz",
-      "integrity": "sha512-cVNFnVEva6PfclBvTgyo6zgPYSmiXkIUwR66GwsVdj7LSlgBnlUSSFUeBV8VYf5zPg05W1AUyZfm+nnYkBI7Cw==",
+      "version": "2.19.2",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.19.2.tgz",
+      "integrity": "sha512-TK3sHqyQAACwcac4fWntypFtN9c/y+y9ioZojeCnNDY3dxF33Ax70lL9ZLDyQnWWR+aTh1WFoqB5sYOnZIUKMA==",
       "bin": {
         "stencil": "bin/stencil"
       },
@@ -1157,9 +1157,9 @@
       }
     },
     "@ionic/core": {
-      "version": "6.3.3",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.3.3.tgz",
-      "integrity": "sha512-I7eRsni/3blStScsQcITb4seuunNzS4mIK0GxHljeRRb8oQI9Xy/oP4rq9weo9lsuEVD0sHIqBIS7/Oo9iEymQ==",
+      "version": "6.3.4",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.3.4.tgz",
+      "integrity": "sha512-3EnKqFdon7Im8JNvuPoq/iGyYK7hskdb9u5hlQE0fHU/9Q0DvFVh17QTq1sQjXntoJovfRhaPJhG+kvZK3mVAQ==",
       "requires": {
         "@stencil/core": "^2.18.0",
         "ionicons": "^6.0.3",
@@ -1167,11 +1167,11 @@
       }
     },
     "@ionic/react": {
-      "version": "6.3.3",
-      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-6.3.3.tgz",
-      "integrity": "sha512-qWUFSwZKV1iXNPptPqahqLLrIV33+aueEGfC7UWchGq0P6re3UkUTyCNRPcXtdYiglbVD1A+goHYLnG1Wf6vLg==",
+      "version": "6.3.4",
+      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-6.3.4.tgz",
+      "integrity": "sha512-0AHyFpzk2Q3BikzbfQryiAwkzW+Y+GaXfaxPvKm+vmFiwCDcIwsCS/JZGDxcmR7G5Ps1QrfNLq5IgvZb+XSjAA==",
       "requires": {
-        "@ionic/core": "^6.3.3",
+        "@ionic/core": "^6.3.4",
         "ionicons": "^6.0.2",
         "tslib": "*"
       }
@@ -1199,9 +1199,9 @@
       }
     },
     "@stencil/core": {
-      "version": "2.19.1",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.19.1.tgz",
-      "integrity": "sha512-cVNFnVEva6PfclBvTgyo6zgPYSmiXkIUwR66GwsVdj7LSlgBnlUSSFUeBV8VYf5zPg05W1AUyZfm+nnYkBI7Cw=="
+      "version": "2.19.2",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.19.2.tgz",
+      "integrity": "sha512-TK3sHqyQAACwcac4fWntypFtN9c/y+y9ioZojeCnNDY3dxF33Ax70lL9ZLDyQnWWR+aTh1WFoqB5sYOnZIUKMA=="
     },
     "@types/estree": {
       "version": "0.0.39",
diff --git a/packages/react-router/package.json b/packages/react-router/package.json
index bf87355de0..69130bd4f4 100644
--- a/packages/react-router/package.json
+++ b/packages/react-router/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/react-router",
-  "version": "6.3.3",
+  "version": "6.3.4",
   "description": "React Router wrapper for @ionic/react",
   "keywords": [
     "ionic",
@@ -37,7 +37,7 @@
     "dist/"
   ],
   "dependencies": {
-    "@ionic/react": "^6.3.3",
+    "@ionic/react": "^6.3.4",
     "tslib": "*"
   },
   "peerDependencies": {
diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md
index 347098bed9..90c7804fdc 100644
--- a/packages/react/CHANGELOG.md
+++ b/packages/react/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.3.4](https://github.com/ionic-team/ionic/compare/v6.3.3...v6.3.4) (2022-11-02)
+
+**Note:** Version bump only for package @ionic/react
+
+
+
+
+
 ## [6.3.3](https://github.com/ionic-team/ionic/compare/v6.3.2...v6.3.3) (2022-10-26)
 
 
diff --git a/packages/react/package-lock.json b/packages/react/package-lock.json
index c492c13bff..15f2b2f457 100644
--- a/packages/react/package-lock.json
+++ b/packages/react/package-lock.json
@@ -1,15 +1,15 @@
 {
   "name": "@ionic/react",
-  "version": "6.3.3",
+  "version": "6.3.4",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/react",
-      "version": "6.3.3",
+      "version": "6.3.4",
       "license": "MIT",
       "dependencies": {
-        "@ionic/core": "^6.3.3",
+        "@ionic/core": "^6.3.4",
         "ionicons": "^6.0.2",
         "tslib": "*"
       },
@@ -607,9 +607,9 @@
       }
     },
     "node_modules/@ionic/core": {
-      "version": "6.3.3",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.3.3.tgz",
-      "integrity": "sha512-I7eRsni/3blStScsQcITb4seuunNzS4mIK0GxHljeRRb8oQI9Xy/oP4rq9weo9lsuEVD0sHIqBIS7/Oo9iEymQ==",
+      "version": "6.3.4",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.3.4.tgz",
+      "integrity": "sha512-3EnKqFdon7Im8JNvuPoq/iGyYK7hskdb9u5hlQE0fHU/9Q0DvFVh17QTq1sQjXntoJovfRhaPJhG+kvZK3mVAQ==",
       "dependencies": {
         "@stencil/core": "^2.18.0",
         "ionicons": "^6.0.3",
@@ -9534,9 +9534,9 @@
       }
     },
     "@ionic/core": {
-      "version": "6.3.3",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.3.3.tgz",
-      "integrity": "sha512-I7eRsni/3blStScsQcITb4seuunNzS4mIK0GxHljeRRb8oQI9Xy/oP4rq9weo9lsuEVD0sHIqBIS7/Oo9iEymQ==",
+      "version": "6.3.4",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.3.4.tgz",
+      "integrity": "sha512-3EnKqFdon7Im8JNvuPoq/iGyYK7hskdb9u5hlQE0fHU/9Q0DvFVh17QTq1sQjXntoJovfRhaPJhG+kvZK3mVAQ==",
       "requires": {
         "@stencil/core": "^2.18.0",
         "ionicons": "^6.0.3",
diff --git a/packages/react/package.json b/packages/react/package.json
index 5bc6f02246..5b065deef6 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/react",
-  "version": "6.3.3",
+  "version": "6.3.4",
   "description": "React specific wrapper for @ionic/core",
   "keywords": [
     "ionic",
@@ -41,7 +41,7 @@
     "css/"
   ],
   "dependencies": {
-    "@ionic/core": "^6.3.3",
+    "@ionic/core": "^6.3.4",
     "ionicons": "^6.0.2",
     "tslib": "*"
   },
diff --git a/packages/vue-router/CHANGELOG.md b/packages/vue-router/CHANGELOG.md
index 7d05f99cd6..4e22bec040 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.3.4](https://github.com/ionic-team/ionic/compare/v6.3.3...v6.3.4) (2022-11-02)
+
+**Note:** Version bump only for package @ionic/vue-router
+
+
+
+
+
 ## [6.3.3](https://github.com/ionic-team/ionic/compare/v6.3.2...v6.3.3) (2022-10-26)
 
 
diff --git a/packages/vue-router/package-lock.json b/packages/vue-router/package-lock.json
index 5947383f7a..ec54c9995e 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.3.3",
+  "version": "6.3.4",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/vue-router",
-      "version": "6.3.3",
+      "version": "6.3.4",
       "license": "MIT",
       "dependencies": {
-        "@ionic/vue": "^6.3.3"
+        "@ionic/vue": "^6.3.4"
       },
       "devDependencies": {
         "@types/jest": "^28.1.1",
@@ -578,9 +578,9 @@
       "dev": true
     },
     "node_modules/@ionic/core": {
-      "version": "6.3.3",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.3.3.tgz",
-      "integrity": "sha512-I7eRsni/3blStScsQcITb4seuunNzS4mIK0GxHljeRRb8oQI9Xy/oP4rq9weo9lsuEVD0sHIqBIS7/Oo9iEymQ==",
+      "version": "6.3.4",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.3.4.tgz",
+      "integrity": "sha512-3EnKqFdon7Im8JNvuPoq/iGyYK7hskdb9u5hlQE0fHU/9Q0DvFVh17QTq1sQjXntoJovfRhaPJhG+kvZK3mVAQ==",
       "dependencies": {
         "@stencil/core": "^2.18.0",
         "ionicons": "^6.0.3",
@@ -588,11 +588,11 @@
       }
     },
     "node_modules/@ionic/vue": {
-      "version": "6.3.3",
-      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-6.3.3.tgz",
-      "integrity": "sha512-MIbnZ1A046ugZroeoK+Tsaykl134bFd5P072JhNQtMAbUFiEfhTkWenbge2DJV8hKPfYmWtZzPze6i0tyw0wlw==",
+      "version": "6.3.4",
+      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-6.3.4.tgz",
+      "integrity": "sha512-Ww1qa+5iaF+Qmm131/5YxCQg+sL7GmKvTe1ODrLkP8l06Hp3usWft848dM1zP2yw5M+CdEOTBmLFpOitRGUQ1Q==",
       "dependencies": {
-        "@ionic/core": "^6.3.3",
+        "@ionic/core": "^6.3.4",
         "ionicons": "^6.0.2"
       }
     },
@@ -1005,9 +1005,9 @@
       }
     },
     "node_modules/@stencil/core": {
-      "version": "2.19.1",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.19.1.tgz",
-      "integrity": "sha512-cVNFnVEva6PfclBvTgyo6zgPYSmiXkIUwR66GwsVdj7LSlgBnlUSSFUeBV8VYf5zPg05W1AUyZfm+nnYkBI7Cw==",
+      "version": "2.19.2",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.19.2.tgz",
+      "integrity": "sha512-TK3sHqyQAACwcac4fWntypFtN9c/y+y9ioZojeCnNDY3dxF33Ax70lL9ZLDyQnWWR+aTh1WFoqB5sYOnZIUKMA==",
       "bin": {
         "stencil": "bin/stencil"
       },
@@ -4501,9 +4501,9 @@
       }
     },
     "node_modules/tslib": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
-      "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.1.tgz",
+      "integrity": "sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA=="
     },
     "node_modules/type-check": {
       "version": "0.3.2",
@@ -5233,9 +5233,9 @@
       "dev": true
     },
     "@ionic/core": {
-      "version": "6.3.3",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.3.3.tgz",
-      "integrity": "sha512-I7eRsni/3blStScsQcITb4seuunNzS4mIK0GxHljeRRb8oQI9Xy/oP4rq9weo9lsuEVD0sHIqBIS7/Oo9iEymQ==",
+      "version": "6.3.4",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.3.4.tgz",
+      "integrity": "sha512-3EnKqFdon7Im8JNvuPoq/iGyYK7hskdb9u5hlQE0fHU/9Q0DvFVh17QTq1sQjXntoJovfRhaPJhG+kvZK3mVAQ==",
       "requires": {
         "@stencil/core": "^2.18.0",
         "ionicons": "^6.0.3",
@@ -5243,11 +5243,11 @@
       }
     },
     "@ionic/vue": {
-      "version": "6.3.3",
-      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-6.3.3.tgz",
-      "integrity": "sha512-MIbnZ1A046ugZroeoK+Tsaykl134bFd5P072JhNQtMAbUFiEfhTkWenbge2DJV8hKPfYmWtZzPze6i0tyw0wlw==",
+      "version": "6.3.4",
+      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-6.3.4.tgz",
+      "integrity": "sha512-Ww1qa+5iaF+Qmm131/5YxCQg+sL7GmKvTe1ODrLkP8l06Hp3usWft848dM1zP2yw5M+CdEOTBmLFpOitRGUQ1Q==",
       "requires": {
-        "@ionic/core": "^6.3.3",
+        "@ionic/core": "^6.3.4",
         "ionicons": "^6.0.2"
       }
     },
@@ -5580,9 +5580,9 @@
       }
     },
     "@stencil/core": {
-      "version": "2.19.1",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.19.1.tgz",
-      "integrity": "sha512-cVNFnVEva6PfclBvTgyo6zgPYSmiXkIUwR66GwsVdj7LSlgBnlUSSFUeBV8VYf5zPg05W1AUyZfm+nnYkBI7Cw=="
+      "version": "2.19.2",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.19.2.tgz",
+      "integrity": "sha512-TK3sHqyQAACwcac4fWntypFtN9c/y+y9ioZojeCnNDY3dxF33Ax70lL9ZLDyQnWWR+aTh1WFoqB5sYOnZIUKMA=="
     },
     "@tootallnate/once": {
       "version": "2.0.0",
@@ -8220,9 +8220,9 @@
       }
     },
     "tslib": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
-      "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.1.tgz",
+      "integrity": "sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA=="
     },
     "type-check": {
       "version": "0.3.2",
diff --git a/packages/vue-router/package.json b/packages/vue-router/package.json
index 209e97e9b1..a64c2856d6 100644
--- a/packages/vue-router/package.json
+++ b/packages/vue-router/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/vue-router",
-  "version": "6.3.3",
+  "version": "6.3.4",
   "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.3.3"
+    "@ionic/vue": "^6.3.4"
   },
   "devDependencies": {
     "@types/jest": "^28.1.1",
diff --git a/packages/vue/CHANGELOG.md b/packages/vue/CHANGELOG.md
index 9cb4ea471e..43be3369ab 100644
--- a/packages/vue/CHANGELOG.md
+++ b/packages/vue/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.3.4](https://github.com/ionic-team/ionic/compare/v6.3.3...v6.3.4) (2022-11-02)
+
+**Note:** Version bump only for package @ionic/vue
+
+
+
+
+
 ## [6.3.3](https://github.com/ionic-team/ionic/compare/v6.3.2...v6.3.3) (2022-10-26)
 
 
diff --git a/packages/vue/package-lock.json b/packages/vue/package-lock.json
index 01623070a2..e3fc622d05 100644
--- a/packages/vue/package-lock.json
+++ b/packages/vue/package-lock.json
@@ -1,15 +1,15 @@
 {
   "name": "@ionic/vue",
-  "version": "6.3.3",
+  "version": "6.3.4",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/vue",
-      "version": "6.3.3",
+      "version": "6.3.4",
       "license": "MIT",
       "dependencies": {
-        "@ionic/core": "^6.3.3",
+        "@ionic/core": "^6.3.4",
         "ionicons": "^6.0.2"
       },
       "devDependencies": {
@@ -59,9 +59,9 @@
       }
     },
     "node_modules/@ionic/core": {
-      "version": "6.3.3",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.3.3.tgz",
-      "integrity": "sha512-I7eRsni/3blStScsQcITb4seuunNzS4mIK0GxHljeRRb8oQI9Xy/oP4rq9weo9lsuEVD0sHIqBIS7/Oo9iEymQ==",
+      "version": "6.3.4",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.3.4.tgz",
+      "integrity": "sha512-3EnKqFdon7Im8JNvuPoq/iGyYK7hskdb9u5hlQE0fHU/9Q0DvFVh17QTq1sQjXntoJovfRhaPJhG+kvZK3mVAQ==",
       "dependencies": {
         "@stencil/core": "^2.18.0",
         "ionicons": "^6.0.3",
@@ -768,9 +768,9 @@
       }
     },
     "@ionic/core": {
-      "version": "6.3.3",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.3.3.tgz",
-      "integrity": "sha512-I7eRsni/3blStScsQcITb4seuunNzS4mIK0GxHljeRRb8oQI9Xy/oP4rq9weo9lsuEVD0sHIqBIS7/Oo9iEymQ==",
+      "version": "6.3.4",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.3.4.tgz",
+      "integrity": "sha512-3EnKqFdon7Im8JNvuPoq/iGyYK7hskdb9u5hlQE0fHU/9Q0DvFVh17QTq1sQjXntoJovfRhaPJhG+kvZK3mVAQ==",
       "requires": {
         "@stencil/core": "^2.18.0",
         "ionicons": "^6.0.3",
diff --git a/packages/vue/package.json b/packages/vue/package.json
index a9b8692c6e..85f3f0ac05 100644
--- a/packages/vue/package.json
+++ b/packages/vue/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/vue",
-  "version": "6.3.3",
+  "version": "6.3.4",
   "description": "Vue specific wrapper for @ionic/core",
   "scripts": {
     "prepublishOnly": "npm run build",
@@ -61,7 +61,7 @@
     "vue-router": "^4.0.16"
   },
   "dependencies": {
-    "@ionic/core": "^6.3.3",
+    "@ionic/core": "^6.3.4",
     "ionicons": "^6.0.2"
   },
   "vetur": {