diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
index db19fc0c2a..915776e762 100644
--- a/.github/CODEOWNERS
+++ b/.github/CODEOWNERS
@@ -11,6 +11,8 @@
 # In each subsection folders are ordered first by depth, then alphabetically.
 # This should make it easy to add new rules without breaking existing ones.
 
+* @ionic-team/framework
+
 # Frameworks
 
 ## Angular
diff --git a/.github/labeler.yml b/.github/labeler.yml
index 545025db58..7ea70aaf7f 100644
--- a/.github/labeler.yml
+++ b/.github/labeler.yml
@@ -6,16 +6,17 @@
 # https://github.com/actions/labeler
 
 'package: core':
-  - core/**/*
+- changed-files:
+  - any-glob-to-any-file: ['core/**/*']
 
 'package: angular':
-  - packages/angular/**/*
-  - packages/angular-*/**/*
+- changed-files:
+  - any-glob-to-any-file: ['packages/angular/**/*', 'packages/angular-*/**/*']
 
 'package: react':
-  - packages/react/**/*
-  - packages/react-*/**/*
+- changed-files:
+  - any-glob-to-any-file: ['packages/react/**/*', 'packages/react-*/**/*']
 
 'package: vue':
-  - packages/vue/**/*
-  - packages/vue-*/**/*
+- changed-files:
+  - any-glob-to-any-file: ['packages/vue/**/*', 'packages/vue-*/**/*']
diff --git a/.github/workflows/label.yml b/.github/workflows/label.yml
index 0241c7fa5b..a4e35060df 100644
--- a/.github/workflows/label.yml
+++ b/.github/workflows/label.yml
@@ -13,7 +13,7 @@ jobs:
   triage:
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/labeler@main
+    - uses: actions/labeler@v5
       with:
         repo-token: "${{ secrets.GITHUB_TOKEN }}"
         sync-labels: true
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9e812f94e6..5031d391cf 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [7.5.7](https://github.com/ionic-team/ionic-framework/compare/v7.5.6...v7.5.7) (2023-11-29)
+
+
+### Bug Fixes
+
+* **alert:** date inputs render correctly in mobile safari ([#28495](https://github.com/ionic-team/ionic-framework/issues/28495)) ([b833f0e](https://github.com/ionic-team/ionic-framework/commit/b833f0e826ddd261230e2e29b70e2dc884d8cb04)), closes [#28494](https://github.com/ionic-team/ionic-framework/issues/28494)
+* **datetime:** allow disabling datetime with prefer-wheel ([#28511](https://github.com/ionic-team/ionic-framework/issues/28511)) ([01130e1](https://github.com/ionic-team/ionic-framework/commit/01130e12e1d73bbf558da9d4dffd7122822ff39c))
+
+
+
+
+
 ## [7.5.6](https://github.com/ionic-team/ionic-framework/compare/v7.5.5...v7.5.6) (2023-11-21)
 
 
diff --git a/core/CHANGELOG.md b/core/CHANGELOG.md
index 43aaeb2e54..fc2d3cbd3a 100644
--- a/core/CHANGELOG.md
+++ b/core/CHANGELOG.md
@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [7.5.7](https://github.com/ionic-team/ionic-framework/compare/v7.5.6...v7.5.7) (2023-11-29)
+
+
+### Bug Fixes
+
+* **alert:** date inputs render correctly in mobile safari ([#28495](https://github.com/ionic-team/ionic-framework/issues/28495)) ([b833f0e](https://github.com/ionic-team/ionic-framework/commit/b833f0e826ddd261230e2e29b70e2dc884d8cb04)), closes [#28494](https://github.com/ionic-team/ionic-framework/issues/28494)
+* **datetime:** allow disabling datetime with prefer-wheel ([#28511](https://github.com/ionic-team/ionic-framework/issues/28511)) ([01130e1](https://github.com/ionic-team/ionic-framework/commit/01130e12e1d73bbf558da9d4dffd7122822ff39c))
+
+
+
+
+
 ## [7.5.6](https://github.com/ionic-team/ionic-framework/compare/v7.5.5...v7.5.6) (2023-11-21)
 
 
diff --git a/core/api.txt b/core/api.txt
index d2b8e7863d..b49c46ee5e 100644
--- a/core/api.txt
+++ b/core/api.txt
@@ -916,6 +916,7 @@ ion-picker-column,prop,disabled,boolean,false,false,false
 ion-picker-column,prop,items,PickerColumnItem[],[],false,false
 ion-picker-column,prop,mode,"ios" | "md",undefined,false,false
 ion-picker-column,prop,value,number | string | undefined,undefined,false,false
+ion-picker-column,method,setFocus,setFocus() => Promise<void>
 ion-picker-column,event,ionChange,PickerColumnItem,true
 
 ion-picker-column-option,shadow
diff --git a/core/package-lock.json b/core/package-lock.json
index 094268f95c..256d5876d6 100644
--- a/core/package-lock.json
+++ b/core/package-lock.json
@@ -1,15 +1,15 @@
 {
   "name": "@ionic/core",
-  "version": "7.5.6",
+  "version": "7.5.7",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/core",
-      "version": "7.5.6",
+      "version": "7.5.7",
       "license": "MIT",
       "dependencies": {
-        "@stencil/core": "^4.7.2",
+        "@stencil/core": "^4.8.1",
         "ionicons": "^7.2.1",
         "tslib": "^2.1.0"
       },
@@ -1825,9 +1825,9 @@
       }
     },
     "node_modules/@stencil/core": {
-      "version": "4.7.2",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.7.2.tgz",
-      "integrity": "sha512-sPPDYrXiTbfeUF5CCyfqysXK/yfTHC4xYR1+nHzGkS2vhRSBOLp0oPuB+xkJLKA+K2ZqDJUxpOnDxy1CLWwBXA==",
+      "version": "4.8.1",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.8.1.tgz",
+      "integrity": "sha512-KG1H10j24rlyxIqOI4CG8/h9T7ObTv7giW2H3u1qXV4KKrLykDOpMcLzpqNXqL2Fki3s1QvHyl/oaRvi5waWVw==",
       "bin": {
         "stencil": "bin/stencil"
       },
@@ -12184,9 +12184,9 @@
       "requires": {}
     },
     "@stencil/core": {
-      "version": "4.7.2",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.7.2.tgz",
-      "integrity": "sha512-sPPDYrXiTbfeUF5CCyfqysXK/yfTHC4xYR1+nHzGkS2vhRSBOLp0oPuB+xkJLKA+K2ZqDJUxpOnDxy1CLWwBXA=="
+      "version": "4.8.1",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.8.1.tgz",
+      "integrity": "sha512-KG1H10j24rlyxIqOI4CG8/h9T7ObTv7giW2H3u1qXV4KKrLykDOpMcLzpqNXqL2Fki3s1QvHyl/oaRvi5waWVw=="
     },
     "@stencil/react-output-target": {
       "version": "0.5.3",
diff --git a/core/package.json b/core/package.json
index ce1b12b960..79e803f515 100644
--- a/core/package.json
+++ b/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/core",
-  "version": "7.5.6",
+  "version": "7.5.7",
   "description": "Base components for Ionic",
   "keywords": [
     "ionic",
@@ -31,7 +31,7 @@
     "loader/"
   ],
   "dependencies": {
-    "@stencil/core": "^4.7.2",
+    "@stencil/core": "^4.8.1",
     "ionicons": "^7.2.1",
     "tslib": "^2.1.0"
   },
diff --git a/core/scripts/testing/themes/dark.css b/core/scripts/testing/themes/dark.css
new file mode 100644
index 0000000000..e263803d56
--- /dev/null
+++ b/core/scripts/testing/themes/dark.css
@@ -0,0 +1,151 @@
+/*
+ * Dark Colors
+ * -------------------------------------------
+ */
+
+:root {
+  --ion-color-primary: #428cff;
+  --ion-color-primary-rgb: 66, 140, 255;
+  --ion-color-primary-contrast: #ffffff;
+  --ion-color-primary-contrast-rgb: 255, 255, 255;
+  --ion-color-primary-shade: #3a7be0;
+  --ion-color-primary-tint: #5598ff;
+
+  --ion-color-secondary: #50c8ff;
+  --ion-color-secondary-rgb: 80, 200, 255;
+  --ion-color-secondary-contrast: #ffffff;
+  --ion-color-secondary-contrast-rgb: 255, 255, 255;
+  --ion-color-secondary-shade: #46b0e0;
+  --ion-color-secondary-tint: #62ceff;
+
+  --ion-color-tertiary: #6a64ff;
+  --ion-color-tertiary-rgb: 106, 100, 255;
+  --ion-color-tertiary-contrast: #ffffff;
+  --ion-color-tertiary-contrast-rgb: 255, 255, 255;
+  --ion-color-tertiary-shade: #5d58e0;
+  --ion-color-tertiary-tint: #7974ff;
+
+  --ion-color-success: #2fdf75;
+  --ion-color-success-rgb: 47, 223, 117;
+  --ion-color-success-contrast: #000000;
+  --ion-color-success-contrast-rgb: 0, 0, 0;
+  --ion-color-success-shade: #29c467;
+  --ion-color-success-tint: #44e283;
+
+  --ion-color-warning: #ffd534;
+  --ion-color-warning-rgb: 255, 213, 52;
+  --ion-color-warning-contrast: #000000;
+  --ion-color-warning-contrast-rgb: 0, 0, 0;
+  --ion-color-warning-shade: #e0bb2e;
+  --ion-color-warning-tint: #ffd948;
+
+  --ion-color-danger: #ff4961;
+  --ion-color-danger-rgb: 255, 73, 97;
+  --ion-color-danger-contrast: #ffffff;
+  --ion-color-danger-contrast-rgb: 255, 255, 255;
+  --ion-color-danger-shade: #e04055;
+  --ion-color-danger-tint: #ff5b71;
+
+  --ion-color-dark: #f4f5f8;
+  --ion-color-dark-rgb: 244, 245, 248;
+  --ion-color-dark-contrast: #000000;
+  --ion-color-dark-contrast-rgb: 0, 0, 0;
+  --ion-color-dark-shade: #d7d8da;
+  --ion-color-dark-tint: #f5f6f9;
+
+  --ion-color-medium: #989aa2;
+  --ion-color-medium-rgb: 152, 154, 162;
+  --ion-color-medium-contrast: #000000;
+  --ion-color-medium-contrast-rgb: 0, 0, 0;
+  --ion-color-medium-shade: #86888f;
+  --ion-color-medium-tint: #a2a4ab;
+
+  --ion-color-light: #222428;
+  --ion-color-light-rgb: 34, 36, 40;
+  --ion-color-light-contrast: #ffffff;
+  --ion-color-light-contrast-rgb: 255, 255, 255;
+  --ion-color-light-shade: #1e2023;
+  --ion-color-light-tint: #383a3e;
+}
+
+/*
+ * iOS Dark Theme
+ * -------------------------------------------
+ */
+
+.ios body {
+  --ion-background-color: #000000;
+  --ion-background-color-rgb: 0, 0, 0;
+
+  --ion-text-color: #ffffff;
+  --ion-text-color-rgb: 255, 255, 255;
+
+  --ion-color-step-50: #0d0d0d;
+  --ion-color-step-100: #1a1a1a;
+  --ion-color-step-150: #262626;
+  --ion-color-step-200: #333333;
+  --ion-color-step-250: #404040;
+  --ion-color-step-300: #4d4d4d;
+  --ion-color-step-350: #595959;
+  --ion-color-step-400: #666666;
+  --ion-color-step-450: #737373;
+  --ion-color-step-500: #808080;
+  --ion-color-step-550: #8c8c8c;
+  --ion-color-step-600: #999999;
+  --ion-color-step-650: #a6a6a6;
+  --ion-color-step-700: #b3b3b3;
+  --ion-color-step-750: #bfbfbf;
+  --ion-color-step-800: #cccccc;
+  --ion-color-step-850: #d9d9d9;
+  --ion-color-step-900: #e6e6e6;
+  --ion-color-step-950: #f2f2f2;
+
+  --ion-toolbar-background: #0d0d0d;
+
+  --ion-item-background: #000000;
+
+  --ion-card-background: #1c1c1d;
+}
+
+/*
+ * Material Design Dark Theme
+ * -------------------------------------------
+ */
+
+.md body {
+  --ion-background-color: #121212;
+  --ion-background-color-rgb: 18, 18, 18;
+
+  --ion-text-color: #ffffff;
+  --ion-text-color-rgb: 255, 255, 255;
+
+  --ion-border-color: #222222;
+
+  --ion-color-step-50: #1e1e1e;
+  --ion-color-step-100: #2a2a2a;
+  --ion-color-step-150: #363636;
+  --ion-color-step-200: #414141;
+  --ion-color-step-250: #4d4d4d;
+  --ion-color-step-300: #595959;
+  --ion-color-step-350: #656565;
+  --ion-color-step-400: #717171;
+  --ion-color-step-450: #7d7d7d;
+  --ion-color-step-500: #898989;
+  --ion-color-step-550: #949494;
+  --ion-color-step-600: #a0a0a0;
+  --ion-color-step-650: #acacac;
+  --ion-color-step-700: #b8b8b8;
+  --ion-color-step-750: #c4c4c4;
+  --ion-color-step-800: #d0d0d0;
+  --ion-color-step-850: #dbdbdb;
+  --ion-color-step-900: #e7e7e7;
+  --ion-color-step-950: #f3f3f3;
+
+  --ion-item-background: #1e1e1e;
+
+  --ion-toolbar-background: #1f1f1f;
+
+  --ion-tab-bar-background: #1f1f1f;
+
+  --ion-card-background: #1e1e1e;
+}
diff --git a/core/src/components.d.ts b/core/src/components.d.ts
index 22c336a309..a0c7f664ec 100644
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
@@ -1162,7 +1162,7 @@ export namespace Components {
          */
         "autocorrect": 'on' | 'off';
         /**
-          * This Boolean attribute lets you specify that a form control should have input focus when the page loads.
+          * Sets the [`autofocus` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus) on the native input element.  This may not be sufficient for the element to be focused on page load. See [managing focus](/docs/developing/managing-focus) for more information.
          */
         "autofocus": boolean;
         /**
@@ -1274,7 +1274,7 @@ export namespace Components {
          */
         "required": boolean;
         /**
-          * Sets focus on the native `input` in `ion-input`. Use this method instead of the global `input.focus()`.  Developers who wish to focus an input when a page enters should call `setFocus()` in the `ionViewDidEnter()` lifecycle method.  Developers who wish to focus an input when an overlay is presented should call `setFocus` after `didPresent` has resolved.
+          * Sets focus on the native `input` in `ion-input`. Use this method instead of the global `input.focus()`.  Developers who wish to focus an input when a page enters should call `setFocus()` in the `ionViewDidEnter()` lifecycle method.  Developers who wish to focus an input when an overlay is presented should call `setFocus` after `didPresent` has resolved.  See [managing focus](/docs/developing/managing-focus) for more information.
          */
         "setFocus": () => Promise<void>;
         /**
@@ -1977,6 +1977,10 @@ export namespace Components {
          */
         "numericInput": boolean;
         "scrollActiveItemIntoView": () => Promise<void>;
+        /**
+          * Sets focus on the scrollable container within the picker column. Use this method instead of the global `pickerColumn.focus()`.
+         */
+        "setFocus": () => Promise<void>;
         /**
           * Sets the value prop and fires the ionChange event. This is used when we need to fire ionChange from user-generated events that cannot be caught with normal input/change event listeners.
          */
@@ -2615,7 +2619,7 @@ export namespace Components {
          */
         "searchIcon"?: string;
         /**
-          * Sets focus on the native `input` in `ion-searchbar`. Use this method instead of the global `input.focus()`.  Developers who wish to focus an input when a page enters should call `setFocus()` in the `ionViewDidEnter()` lifecycle method.  Developers who wish to focus an input when an overlay is presented should call `setFocus` after `didPresent` has resolved.
+          * Sets focus on the native `input` in `ion-searchbar`. Use this method instead of the global `input.focus()`.  Developers who wish to focus an input when a page enters should call `setFocus()` in the `ionViewDidEnter()` lifecycle method.  Developers who wish to focus an input when an overlay is presented should call `setFocus` after `didPresent` has resolved.  See [managing focus](/docs/developing/managing-focus) for more information.
          */
         "setFocus": () => Promise<void>;
         /**
@@ -2964,7 +2968,7 @@ export namespace Components {
          */
         "autocapitalize": string;
         /**
-          * This Boolean attribute lets you specify that a form control should have input focus when the page loads.
+          * Sets the [`autofocus` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus) on the native input element.  This may not be sufficient for the element to be focused on page load. See [managing focus](/docs/developing/managing-focus) for more information.
          */
         "autofocus": boolean;
         /**
@@ -3064,7 +3068,7 @@ export namespace Components {
          */
         "rows"?: number;
         /**
-          * Sets focus on the native `textarea` in `ion-textarea`. Use this method instead of the global `textarea.focus()`.
+          * Sets focus on the native `textarea` in `ion-textarea`. Use this method instead of the global `textarea.focus()`.  See [managing focus](/docs/developing/managing-focus) for more information.
          */
         "setFocus": () => Promise<void>;
         /**
@@ -5875,7 +5879,7 @@ declare namespace LocalJSX {
          */
         "autocorrect"?: 'on' | 'off';
         /**
-          * This Boolean attribute lets you specify that a form control should have input focus when the page loads.
+          * Sets the [`autofocus` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus) on the native input element.  This may not be sufficient for the element to be focused on page load. See [managing focus](/docs/developing/managing-focus) for more information.
          */
         "autofocus"?: boolean;
         /**
@@ -7734,7 +7738,7 @@ declare namespace LocalJSX {
          */
         "autocapitalize"?: string;
         /**
-          * This Boolean attribute lets you specify that a form control should have input focus when the page loads.
+          * Sets the [`autofocus` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus) on the native input element.  This may not be sufficient for the element to be focused on page load. See [managing focus](/docs/developing/managing-focus) for more information.
          */
         "autofocus"?: boolean;
         /**
diff --git a/core/src/components/action-sheet/action-sheet.tsx b/core/src/components/action-sheet/action-sheet.tsx
index 813e38c7f9..984e24cdaa 100644
--- a/core/src/components/action-sheet/action-sheet.tsx
+++ b/core/src/components/action-sheet/action-sheet.tsx
@@ -337,6 +337,17 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
     if (this.isOpen === true) {
       raf(() => this.present());
     }
+
+    /**
+     * When binding values in frameworks such as Angular
+     * it is possible for the value to be set after the Web Component
+     * initializes but before the value watcher is set up in Stencil.
+     * As a result, the watcher callback may not be fired.
+     * We work around this by manually calling the watcher
+     * callback when the component has loaded and the watcher
+     * is configured.
+     */
+    this.triggerChanged();
   }
 
   render() {
diff --git a/core/src/components/alert/alert.tsx b/core/src/components/alert/alert.tsx
index 4568e45a38..90a1c281bb 100644
--- a/core/src/components/alert/alert.tsx
+++ b/core/src/components/alert/alert.tsx
@@ -376,6 +376,17 @@ export class Alert implements ComponentInterface, OverlayInterface {
     if (this.isOpen === true) {
       raf(() => this.present());
     }
+
+    /**
+     * When binding values in frameworks such as Angular
+     * it is possible for the value to be set after the Web Component
+     * initializes but before the value watcher is set up in Stencil.
+     * As a result, the watcher callback may not be fired.
+     * We work around this by manually calling the watcher
+     * callback when the component has loaded and the watcher
+     * is configured.
+     */
+    this.triggerChanged();
   }
 
   /**
diff --git a/core/src/components/datetime/datetime.scss b/core/src/components/datetime/datetime.scss
index db00e15c82..babbbe7bdb 100644
--- a/core/src/components/datetime/datetime.scss
+++ b/core/src/components/datetime/datetime.scss
@@ -25,19 +25,6 @@
   overflow: hidden;
 }
 
-/**
- * When using the wheel picker to switch
- * between months, sometimes the allowed
- * dates may be filtered. As a result, it
- * is possible to get a layout shift as
- * the picker column will shrink to fit the
- * widest item in the column. Setting a minimum
- * width avoids this layout shifting.
- */
-ion-picker-column {
-  min-width: 26px;
-}
-
 :host(.datetime-size-fixed) {
   width: auto;
   height: auto;
diff --git a/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-time-picker-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-time-picker-ios-ltr-Mobile-Chrome-linux.png
index 26407824fb..9bc2b80193 100644
Binary files a/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-time-picker-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-time-picker-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-time-picker-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-time-picker-ios-ltr-Mobile-Firefox-linux.png
index b12a1f8b12..8d81fe1fa6 100644
Binary files a/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-time-picker-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-time-picker-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-time-picker-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-time-picker-ios-ltr-Mobile-Safari-linux.png
index af2ff059e1..38f09fb91d 100644
Binary files a/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-time-picker-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-time-picker-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-time-picker-md-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-time-picker-md-ltr-Mobile-Chrome-linux.png
index 6dc7b71ce3..3731e82d5c 100644
Binary files a/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-time-picker-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-time-picker-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-time-picker-md-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-time-picker-md-ltr-Mobile-Firefox-linux.png
index ee7bf829ec..a06ae51d4e 100644
Binary files a/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-time-picker-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-time-picker-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-time-picker-md-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-time-picker-md-ltr-Mobile-Safari-linux.png
index a560454e4d..403c627d5f 100644
Binary files a/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-time-picker-md-ltr-Mobile-Safari-linux.png and b/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-time-picker-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-base-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-base-ios-ltr-Mobile-Chrome-linux.png
index 56375e49c2..3a56f7a941 100644
Binary files a/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-base-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-base-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-base-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-base-ios-ltr-Mobile-Firefox-linux.png
index 877e6eebf3..1517f7c966 100644
Binary files a/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-base-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-base-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-base-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-base-ios-ltr-Mobile-Safari-linux.png
index 5e5aca9604..63840441b7 100644
Binary files a/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-base-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-base-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-base-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-base-ios-rtl-Mobile-Chrome-linux.png
index 9b4bce97bd..3310836997 100644
Binary files a/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-base-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-base-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-base-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-base-ios-rtl-Mobile-Firefox-linux.png
index 5b1d76ba84..84272ed8a7 100644
Binary files a/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-base-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-base-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-base-ios-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-base-ios-rtl-Mobile-Safari-linux.png
index 6cc4006fbb..9cf42cc0a9 100644
Binary files a/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-base-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-base-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-base-md-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-base-md-ltr-Mobile-Chrome-linux.png
index 4524ca6c27..f80559f6c3 100644
Binary files a/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-base-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-base-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-base-md-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-base-md-ltr-Mobile-Firefox-linux.png
index f2773c86bb..4bbe2da728 100644
Binary files a/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-base-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-base-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-base-md-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-base-md-ltr-Mobile-Safari-linux.png
index 1b151c9ade..8e19649b19 100644
Binary files a/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-base-md-ltr-Mobile-Safari-linux.png and b/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-base-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-base-md-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-base-md-rtl-Mobile-Chrome-linux.png
index 7f1b2f17d4..5b7a49549a 100644
Binary files a/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-base-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-base-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-base-md-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-base-md-rtl-Mobile-Firefox-linux.png
index adbc9d1c1f..aaa3cf1ac9 100644
Binary files a/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-base-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-base-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-base-md-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-base-md-rtl-Mobile-Safari-linux.png
index 43338a9f47..aaae021b26 100644
Binary files a/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-base-md-rtl-Mobile-Safari-linux.png and b/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-base-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-popover-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-popover-ios-ltr-Mobile-Chrome-linux.png
index fb65b78b42..85452e324e 100644
Binary files a/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-popover-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-popover-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-popover-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-popover-ios-ltr-Mobile-Firefox-linux.png
index 81a0f160e7..598871dc55 100644
Binary files a/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-popover-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-popover-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-popover-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-popover-ios-ltr-Mobile-Safari-linux.png
index 1caa240c29..7b12da629e 100644
Binary files a/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-popover-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-popover-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-popover-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-popover-ios-rtl-Mobile-Chrome-linux.png
index 89ec396220..9ed964d3ef 100644
Binary files a/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-popover-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-popover-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-popover-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-popover-ios-rtl-Mobile-Firefox-linux.png
index 201d760f4e..31d9a87934 100644
Binary files a/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-popover-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-popover-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-popover-ios-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-popover-ios-rtl-Mobile-Safari-linux.png
index 8b96c75435..9fe1114583 100644
Binary files a/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-popover-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-popover-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-popover-md-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-popover-md-ltr-Mobile-Chrome-linux.png
index 5110e8b679..cfb1f266e7 100644
Binary files a/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-popover-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-popover-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-popover-md-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-popover-md-ltr-Mobile-Firefox-linux.png
index 1f0bd6cc9c..de59c033dc 100644
Binary files a/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-popover-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-popover-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-popover-md-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-popover-md-ltr-Mobile-Safari-linux.png
index 9f202c3224..71775a0e60 100644
Binary files a/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-popover-md-ltr-Mobile-Safari-linux.png and b/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-popover-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-popover-md-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-popover-md-rtl-Mobile-Chrome-linux.png
index 62e1d096d1..911b1c90d4 100644
Binary files a/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-popover-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-popover-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-popover-md-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-popover-md-rtl-Mobile-Firefox-linux.png
index 16c4c82ce0..a3d1d1666d 100644
Binary files a/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-popover-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-popover-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-popover-md-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-popover-md-rtl-Mobile-Safari-linux.png
index e3c68df1bc..b964fcaf54 100644
Binary files a/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-popover-md-rtl-Mobile-Safari-linux.png and b/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-popover-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/position/index.html b/core/src/components/datetime/test/position/index.html
index 3da97aa417..51909e8e21 100644
--- a/core/src/components/datetime/test/position/index.html
+++ b/core/src/components/datetime/test/position/index.html
@@ -25,7 +25,7 @@
       <ion-content class="ion-padding">
         <ion-button id="open-datetime" onclick="presentPopover(defaultPopover, event)">Present Popover</ion-button>
         <ion-popover class="datetime-popover" id="default-popover">
-          <ion-datetime value="2022-05-03"></ion-datetime>
+          <ion-datetime value="2022-05-03T14:23:00.000Z"></ion-datetime>
         </ion-popover>
       </ion-content>
 
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 79ad3c64a6..7690360de5 100644
--- a/core/src/components/datetime/test/prefer-wheel/datetime.e2e.ts
+++ b/core/src/components/datetime/test/prefer-wheel/datetime.e2e.ts
@@ -447,6 +447,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
         await page.waitForSelector('.datetime-ready');
 
         const dateColumn = page.locator('.date-column');
+        const dateColumnScrollEl = dateColumn.locator('.picker-opts');
         const dateValues = dateColumn.locator('.picker-item:not(.picker-item-empty)');
 
         expect(await dateValues.count()).toBe(90);
@@ -455,7 +456,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
          * Select 1st item to change the dates rendered
          */
         await expect(dateValues.nth(0)).toHaveAttribute('data-value', '2022-1-1');
-        await dateColumn.evaluate((el: HTMLElement) => (el.scrollTop = 0));
+        await dateColumnScrollEl.evaluate((el: HTMLElement) => (el.scrollTop = 0));
         await page.waitForChanges();
 
         await expect(dateValues.nth(0)).toHaveAttribute('data-value', '2021-12-1');
@@ -632,6 +633,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
         await page.waitForSelector('.datetime-ready');
 
         const dateColumn = page.locator('.date-column');
+        const dateColumnScrollEl = dateColumn.locator('.picker-opts');
         const dateValues = dateColumn.locator('.picker-item:not(.picker-item-empty)');
 
         expect(await dateValues.count()).toBe(90);
@@ -640,7 +642,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
          * Select 1st item to change the dates rendered
          */
         await expect(dateValues.nth(0)).toHaveAttribute('data-value', '2022-1-1');
-        await dateColumn.evaluate((el: HTMLElement) => (el.scrollTop = 0));
+        await dateColumnScrollEl.evaluate((el: HTMLElement) => (el.scrollTop = 0));
         await page.waitForChanges();
 
         await expect(dateValues.nth(0)).toHaveAttribute('data-value', '2021-12-1');
diff --git a/core/src/components/input/input.tsx b/core/src/components/input/input.tsx
index 1c54046718..92bf5fdeff 100644
--- a/core/src/components/input/input.tsx
+++ b/core/src/components/input/input.tsx
@@ -95,7 +95,9 @@ export class Input implements ComponentInterface {
   @Prop() autocorrect: 'on' | 'off' = 'off';
 
   /**
-   * This Boolean attribute lets you specify that a form control should have input focus when the page loads.
+   * Sets the [`autofocus` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus) on the native input element.
+   *
+   * This may not be sufficient for the element to be focused on page load. See [managing focus](/docs/developing/managing-focus) for more information.
    */
   @Prop() autofocus = false;
 
@@ -424,6 +426,8 @@ export class Input implements ComponentInterface {
    *
    * Developers who wish to focus an input when an overlay is presented
    * should call `setFocus` after `didPresent` has resolved.
+   *
+   * See [managing focus](/docs/developing/managing-focus) for more information.
    */
   @Method()
   async setFocus() {
diff --git a/core/src/components/loading/loading.tsx b/core/src/components/loading/loading.tsx
index 0892b082d1..05e40669d9 100644
--- a/core/src/components/loading/loading.tsx
+++ b/core/src/components/loading/loading.tsx
@@ -225,6 +225,17 @@ export class Loading implements ComponentInterface, OverlayInterface {
     if (this.isOpen === true) {
       raf(() => this.present());
     }
+
+    /**
+     * When binding values in frameworks such as Angular
+     * it is possible for the value to be set after the Web Component
+     * initializes but before the value watcher is set up in Stencil.
+     * As a result, the watcher callback may not be fired.
+     * We work around this by manually calling the watcher
+     * callback when the component has loaded and the watcher
+     * is configured.
+     */
+    this.triggerChanged();
   }
 
   disconnectedCallback() {
diff --git a/core/src/components/modal/modal.tsx b/core/src/components/modal/modal.tsx
index 3c8a091901..ef6114b18b 100644
--- a/core/src/components/modal/modal.tsx
+++ b/core/src/components/modal/modal.tsx
@@ -368,6 +368,17 @@ export class Modal implements ComponentInterface, OverlayInterface {
       raf(() => this.present());
     }
     this.breakpointsChanged(this.breakpoints);
+
+    /**
+     * When binding values in frameworks such as Angular
+     * it is possible for the value to be set after the Web Component
+     * initializes but before the value watcher is set up in Stencil.
+     * As a result, the watcher callback may not be fired.
+     * We work around this by manually calling the watcher
+     * callback when the component has loaded and the watcher
+     * is configured.
+     */
+    this.triggerChanged();
   }
 
   /**
diff --git a/core/src/components/picker-column/picker-column.scss b/core/src/components/picker-column/picker-column.scss
index 3e0a1937ae..d040174459 100644
--- a/core/src/components/picker-column/picker-column.scss
+++ b/core/src/components/picker-column/picker-column.scss
@@ -4,13 +4,53 @@
 // --------------------------------------------------
 
 :host {
-  @include padding(0px, 16px, 0px, 16px);
+  display: flex;
+
+  align-items: center;
+
+  justify-content: center;
+
+  max-width: 100%;
 
   height: 200px;
 
+  font-size: 22px;
+
+  text-align: center;
+}
+
+.picker-opts {
+  /**
+   * This padding must be set here and not on the
+   * host to ensure that the focus highlight on the
+   * column is not overly narrow.
+   */
+  @include padding(0px, 16px, 0px, 16px);
+
+  /**
+   * When using reactive data, such as in datetime's
+   * wheel picker, there may be layout shifts between
+   * individual columns in a picker as the columns
+   * shrink to fit the widest item in the column.
+   * Setting a minimum width avoids this layout shifting.
+   *
+   * Note that we need this min-width set on the same
+   * element as the vertical padding (i.e. not on the
+   * host).
+   */
+  min-width: 26px;
+  max-height: 200px;
+
   outline: none;
 
-  font-size: 22px;
+  /**
+   * Added so that text-align can be set on the host
+   * from external components. For example, datetime
+   * changes the alignment of specific columns in its
+   * wheel pickers.
+   */
+  text-align: inherit;
+
   scroll-snap-type: y mandatory;
 
   /**
@@ -22,17 +62,45 @@
 
   // Hide scrollbars on Firefox
   scrollbar-width: none;
-
-  text-align: center;
 }
 
 /**
  * Hide scrollbars on Chrome and Safari
  */
-:host::-webkit-scrollbar {
+.picker-opts::-webkit-scrollbar {
   display: none;
 }
 
+::slotted([slot="prefix"]), ::slotted([slot="suffix"]) {
+  max-width: 200px;
+
+  text-overflow: ellipsis;
+
+  white-space: nowrap;
+
+  overflow: hidden;
+}
+
+::slotted([slot="prefix"]) {
+  /**
+   * This is added in addition to the column's own padding so that there is white
+   * space between the slot and the column's focus highlight.
+   */
+  @include padding(0, 16px);
+  
+  justify-content: end;
+}
+
+::slotted([slot="suffix"]) {
+  /**
+   * This is added in addition to the column's own padding so that there is white
+   * space between the slot and the column's focus highlight.
+   */
+  @include padding(0, 16px);
+  
+  justify-content: start;
+}
+
 :host .picker-item {
   @include padding(0);
   @include margin(0);
@@ -93,7 +161,7 @@
 }
 
 @media (any-hover: hover) {
-  :host(:focus) {
+  :host(:focus) .picker-opts {
     outline: none;
 
     background: current-color(base, 0.2);
diff --git a/core/src/components/picker-column/picker-column.tsx b/core/src/components/picker-column/picker-column.tsx
index f615eed530..a6726cc231 100644
--- a/core/src/components/picker-column/picker-column.tsx
+++ b/core/src/components/picker-column/picker-column.tsx
@@ -13,6 +13,9 @@ import type { PickerColumnItem } from './picker-column-interfaces';
 
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ *
+ * @slot prefix - Content to show on the left side of the picker options.
+ * @slot suffix - Content to show on the right side of the picker options.
  */
 @Component({
   tag: 'ion-picker-column',
@@ -23,6 +26,7 @@ import type { PickerColumnItem } from './picker-column-interfaces';
   shadow: true,
 })
 export class PickerColumn implements ComponentInterface {
+  private scrollEl?: HTMLDivElement | null;
   private destroyScrollListener?: () => void;
   private isScrolling = false;
   private scrollEndCallback?: () => void;
@@ -175,13 +179,25 @@ export class PickerColumn implements ComponentInterface {
     }
   }
 
+  /**
+   * Sets focus on the scrollable container within the picker column.
+   * Use this method instead of the global `pickerColumn.focus()`.
+   */
+  @Method()
+  async setFocus() {
+    if (this.scrollEl) {
+      this.scrollEl.focus();
+    }
+  }
+
   private centerPickerItemInView = (target: HTMLElement, smooth = true, canExitInputMode = true) => {
-    const { el, isColumnVisible } = this;
-    if (isColumnVisible) {
+    const { isColumnVisible, scrollEl } = this;
+
+    if (isColumnVisible && scrollEl) {
       // (Vertical offset from parent) - (three empty picker rows) + (half the height of the target to ensure the scroll triggers)
       const top = target.offsetTop - 3 * target.clientHeight + target.clientHeight / 2;
 
-      if (el.scrollTop !== top) {
+      if (scrollEl.scrollTop !== top) {
         /**
          * Setting this flag prevents input
          * mode from exiting in the picker column's
@@ -190,7 +206,7 @@ export class PickerColumn implements ComponentInterface {
          * of these can cause a scroll to occur.
          */
         this.canExitInputMode = canExitInputMode;
-        el.scroll({
+        scrollEl.scroll({
           top,
           left: 0,
           behavior: smooth ? 'smooth' : undefined,
@@ -267,13 +283,15 @@ export class PickerColumn implements ComponentInterface {
      * be disabled on Android.
      */
     const enableHaptics = isPlatform('ios');
-    const { el } = this;
+    const { el, scrollEl } = this;
 
     let timeout: ReturnType<typeof setTimeout> | undefined;
     let activeEl: HTMLElement | null = this.activeItem;
 
     const scrollCallback = () => {
       raf(() => {
+        if (!scrollEl) return;
+
         if (timeout) {
           clearTimeout(timeout);
           timeout = undefined;
@@ -288,7 +306,7 @@ export class PickerColumn implements ComponentInterface {
          * Select item in the center of the column
          * which is the month/year that we want to select
          */
-        const bbox = el.getBoundingClientRect();
+        const bbox = scrollEl.getBoundingClientRect();
         const centerX = bbox.x + bbox.width / 2;
         const centerY = bbox.y + bbox.height / 2;
 
@@ -378,10 +396,12 @@ export class PickerColumn implements ComponentInterface {
      * does not fire when component is initially shown.
      */
     raf(() => {
-      el.addEventListener('scroll', scrollCallback);
+      if (!scrollEl) return;
+
+      scrollEl.addEventListener('scroll', scrollCallback);
 
       this.destroyScrollListener = () => {
-        el.removeEventListener('scroll', scrollCallback);
+        scrollEl.removeEventListener('scroll', scrollCallback);
       };
     });
   };
@@ -434,62 +454,71 @@ export class PickerColumn implements ComponentInterface {
       <Host
         exportparts={`${PICKER_ITEM_PART}, ${PICKER_ITEM_ACTIVE_PART}`}
         disabled={pickerDisabled}
-        tabindex={pickerDisabled ? null : 0}
         class={createColorClasses(color, {
           [mode]: true,
           ['picker-column-active']: isActive,
           ['picker-column-numeric-input']: numericInput,
         })}
       >
-        <div class="picker-item picker-item-empty" aria-hidden="true">
-          &nbsp;
-        </div>
-        <div class="picker-item picker-item-empty" aria-hidden="true">
-          &nbsp;
-        </div>
-        <div class="picker-item picker-item-empty" aria-hidden="true">
-          &nbsp;
-        </div>
-        {items.map((item, index) => {
-          const isItemDisabled = pickerDisabled || item.disabled || false;
+        <slot name="prefix"></slot>
+        <div
+          class="picker-opts"
+          tabindex={pickerDisabled ? undefined : 0}
+          ref={(el) => {
+            this.scrollEl = el;
+          }}
+        >
+          <div class="picker-item picker-item-empty" aria-hidden="true">
+            &nbsp;
+          </div>
+          <div class="picker-item picker-item-empty" aria-hidden="true">
+            &nbsp;
+          </div>
+          <div class="picker-item picker-item-empty" aria-hidden="true">
+            &nbsp;
+          </div>
+          {items.map((item, index) => {
+            const isItemDisabled = pickerDisabled || item.disabled || false;
 
-          {
-            /*
-            Users should be able to tab
-            between multiple columns. As a result,
-            we set tabindex here so that tabbing switches
-            between columns instead of buttons. Users
-            can still use arrow keys on the keyboard to
-            navigate the column up and down.
-          */
-          }
-          return (
-            <button
-              tabindex="-1"
-              class={{
-                'picker-item': true,
-              }}
-              data-value={item.value}
-              data-index={index}
-              onClick={(ev: Event) => {
-                this.centerPickerItemInView(ev.target as HTMLElement, true);
-              }}
-              disabled={isItemDisabled}
-              part={PICKER_ITEM_PART}
-            >
-              {item.text}
-            </button>
-          );
-        })}
-        <div class="picker-item picker-item-empty" aria-hidden="true">
-          &nbsp;
-        </div>
-        <div class="picker-item picker-item-empty" aria-hidden="true">
-          &nbsp;
-        </div>
-        <div class="picker-item picker-item-empty" aria-hidden="true">
-          &nbsp;
+            {
+              /*
+              Users should be able to tab
+              between multiple columns. As a result,
+              we set tabindex here so that tabbing switches
+              between columns instead of buttons. Users
+              can still use arrow keys on the keyboard to
+              navigate the column up and down.
+            */
+            }
+            return (
+              <button
+                tabindex="-1"
+                class={{
+                  'picker-item': true,
+                }}
+                data-value={item.value}
+                data-index={index}
+                onClick={(ev: Event) => {
+                  this.centerPickerItemInView(ev.target as HTMLElement, true);
+                }}
+                disabled={isItemDisabled}
+                part={PICKER_ITEM_PART}
+              >
+                {item.text}
+              </button>
+            );
+          })}
+          <div class="picker-item picker-item-empty" aria-hidden="true">
+            &nbsp;
+          </div>
+          <div class="picker-item picker-item-empty" aria-hidden="true">
+            &nbsp;
+          </div>
+          <div class="picker-item picker-item-empty" aria-hidden="true">
+            &nbsp;
+          </div>
         </div>
+        <slot name="suffix"></slot>
       </Host>
     );
   }
diff --git a/core/src/components/picker-column/test/disabled/picker-column.e2e.ts-snapshots/picker-disabled-column-md-ltr-Mobile-Chrome-linux.png b/core/src/components/picker-column/test/disabled/picker-column.e2e.ts-snapshots/picker-disabled-column-md-ltr-Mobile-Chrome-linux.png
index 6968e26058..5895f3ee25 100644
Binary files a/core/src/components/picker-column/test/disabled/picker-column.e2e.ts-snapshots/picker-disabled-column-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/picker-column/test/disabled/picker-column.e2e.ts-snapshots/picker-disabled-column-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/picker-column/test/disabled/picker-column.e2e.ts-snapshots/picker-disabled-column-md-ltr-Mobile-Firefox-linux.png b/core/src/components/picker-column/test/disabled/picker-column.e2e.ts-snapshots/picker-disabled-column-md-ltr-Mobile-Firefox-linux.png
index 02bc29af22..03159c4cec 100644
Binary files a/core/src/components/picker-column/test/disabled/picker-column.e2e.ts-snapshots/picker-disabled-column-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/picker-column/test/disabled/picker-column.e2e.ts-snapshots/picker-disabled-column-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/picker-column/test/disabled/picker-column.e2e.ts-snapshots/picker-disabled-column-md-ltr-Mobile-Safari-linux.png b/core/src/components/picker-column/test/disabled/picker-column.e2e.ts-snapshots/picker-disabled-column-md-ltr-Mobile-Safari-linux.png
index d94af6fdb6..2b52b5bdb9 100644
Binary files a/core/src/components/picker-column/test/disabled/picker-column.e2e.ts-snapshots/picker-disabled-column-md-ltr-Mobile-Safari-linux.png and b/core/src/components/picker-column/test/disabled/picker-column.e2e.ts-snapshots/picker-disabled-column-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/picker-column/test/slots/index.html b/core/src/components/picker-column/test/slots/index.html
new file mode 100644
index 0000000000..57f5b8dac9
--- /dev/null
+++ b/core/src/components/picker-column/test/slots/index.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Picker Column - Slots</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
+    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
+    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
+    <script src="../../../../../scripts/testing/scripts.js"></script>
+    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-header translucent="true">
+        <ion-toolbar>
+          <ion-title>Picker Column - Basic</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content class="ion-padding">
+        <ion-picker>
+          <ion-picker-column>
+            <div slot="prefix">Prefix</div>
+            <div slot="suffix">Suffix</div>
+          </ion-picker-column>
+        </ion-picker>
+        <ion-picker>
+          <ion-picker-column>
+            <div slot="prefix">Prefix</div>
+            <div slot="suffix">Long Suffix Long Suffix Long Suffix</div>
+          </ion-picker-column>
+        </ion-picker>
+      </ion-content>
+      <script>
+        const pickerColumns = document.querySelectorAll('ion-picker-column');
+
+        const items = Array(24)
+          .fill()
+          .map((_, i) => ({
+            text: `${i}`,
+            value: i,
+          }));
+
+        pickerColumns.forEach((col) => {
+          col.items = [...items];
+        });
+      </script>
+    </ion-app>
+  </body>
+</html>
diff --git a/core/src/components/picker-column/test/slots/picker-column.e2e.ts b/core/src/components/picker-column/test/slots/picker-column.e2e.ts
new file mode 100644
index 0000000000..7e4b5ce678
--- /dev/null
+++ b/core/src/components/picker-column/test/slots/picker-column.e2e.ts
@@ -0,0 +1,58 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('picker-column: slots'), () => {
+    test('should not have visual regressions with prefix and suffix', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-picker>
+          <ion-picker-column value="b">
+            <div slot="prefix">Prefix</div>
+            <div slot="suffix">Suffix</div>
+          </ion-picker-column>
+        </ion-picker>
+
+        <script>
+          const column = document.querySelector('ion-picker-column');
+          column.items = [
+            { text: 'A', value: 'a' },
+            { text: 'B', value: 'b' },
+            { text: 'C', value: 'c' }
+          ]
+        </script>
+      `,
+        config
+      );
+
+      const picker = page.locator('ion-picker');
+      await expect(picker).toHaveScreenshot(screenshot(`picker-prefix-suffix`));
+    });
+
+    test('should not have visual regressions with a long prefix and suffix', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-picker>
+          <ion-picker-column value="b">
+            <div slot="prefix">Long prefix long prefix long prefix</div>
+            <div slot="suffix">Long suffix long suffix long suffix</div>
+          </ion-picker-column>
+        </ion-picker>
+
+        <script>
+          const column = document.querySelector('ion-picker-column');
+          column.items = [
+            { text: 'A', value: 'a' },
+            { text: 'B', value: 'b' },
+            { text: 'C', value: 'c' }
+          ]
+        </script>
+      `,
+        config
+      );
+
+      const picker = page.locator('ion-picker');
+      await expect(picker).toHaveScreenshot(screenshot(`picker-long-prefix-suffix`));
+    });
+  });
+});
diff --git a/core/src/components/picker-column/test/slots/picker-column.e2e.ts-snapshots/picker-long-prefix-suffix-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/picker-column/test/slots/picker-column.e2e.ts-snapshots/picker-long-prefix-suffix-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..bd46589f87
Binary files /dev/null and b/core/src/components/picker-column/test/slots/picker-column.e2e.ts-snapshots/picker-long-prefix-suffix-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/picker-column/test/slots/picker-column.e2e.ts-snapshots/picker-long-prefix-suffix-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/picker-column/test/slots/picker-column.e2e.ts-snapshots/picker-long-prefix-suffix-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..7ed8c026bb
Binary files /dev/null and b/core/src/components/picker-column/test/slots/picker-column.e2e.ts-snapshots/picker-long-prefix-suffix-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/picker-column/test/slots/picker-column.e2e.ts-snapshots/picker-long-prefix-suffix-ios-ltr-Mobile-Safari-linux.png b/core/src/components/picker-column/test/slots/picker-column.e2e.ts-snapshots/picker-long-prefix-suffix-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..1bd6ef9349
Binary files /dev/null and b/core/src/components/picker-column/test/slots/picker-column.e2e.ts-snapshots/picker-long-prefix-suffix-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/picker-column/test/slots/picker-column.e2e.ts-snapshots/picker-long-prefix-suffix-md-ltr-Mobile-Chrome-linux.png b/core/src/components/picker-column/test/slots/picker-column.e2e.ts-snapshots/picker-long-prefix-suffix-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..58a8fa85ae
Binary files /dev/null and b/core/src/components/picker-column/test/slots/picker-column.e2e.ts-snapshots/picker-long-prefix-suffix-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/picker-column/test/slots/picker-column.e2e.ts-snapshots/picker-long-prefix-suffix-md-ltr-Mobile-Firefox-linux.png b/core/src/components/picker-column/test/slots/picker-column.e2e.ts-snapshots/picker-long-prefix-suffix-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..22385e3b0a
Binary files /dev/null and b/core/src/components/picker-column/test/slots/picker-column.e2e.ts-snapshots/picker-long-prefix-suffix-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/picker-column/test/slots/picker-column.e2e.ts-snapshots/picker-long-prefix-suffix-md-ltr-Mobile-Safari-linux.png b/core/src/components/picker-column/test/slots/picker-column.e2e.ts-snapshots/picker-long-prefix-suffix-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..abc8bdde05
Binary files /dev/null and b/core/src/components/picker-column/test/slots/picker-column.e2e.ts-snapshots/picker-long-prefix-suffix-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/picker-column/test/slots/picker-column.e2e.ts-snapshots/picker-prefix-suffix-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/picker-column/test/slots/picker-column.e2e.ts-snapshots/picker-prefix-suffix-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..35c2a4a7af
Binary files /dev/null and b/core/src/components/picker-column/test/slots/picker-column.e2e.ts-snapshots/picker-prefix-suffix-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/picker-column/test/slots/picker-column.e2e.ts-snapshots/picker-prefix-suffix-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/picker-column/test/slots/picker-column.e2e.ts-snapshots/picker-prefix-suffix-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..d00a871ad8
Binary files /dev/null and b/core/src/components/picker-column/test/slots/picker-column.e2e.ts-snapshots/picker-prefix-suffix-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/picker-column/test/slots/picker-column.e2e.ts-snapshots/picker-prefix-suffix-ios-ltr-Mobile-Safari-linux.png b/core/src/components/picker-column/test/slots/picker-column.e2e.ts-snapshots/picker-prefix-suffix-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..0a6d49fb68
Binary files /dev/null and b/core/src/components/picker-column/test/slots/picker-column.e2e.ts-snapshots/picker-prefix-suffix-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/picker-column/test/slots/picker-column.e2e.ts-snapshots/picker-prefix-suffix-md-ltr-Mobile-Chrome-linux.png b/core/src/components/picker-column/test/slots/picker-column.e2e.ts-snapshots/picker-prefix-suffix-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..249d08e1d8
Binary files /dev/null and b/core/src/components/picker-column/test/slots/picker-column.e2e.ts-snapshots/picker-prefix-suffix-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/picker-column/test/slots/picker-column.e2e.ts-snapshots/picker-prefix-suffix-md-ltr-Mobile-Firefox-linux.png b/core/src/components/picker-column/test/slots/picker-column.e2e.ts-snapshots/picker-prefix-suffix-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..42dcad8dd7
Binary files /dev/null and b/core/src/components/picker-column/test/slots/picker-column.e2e.ts-snapshots/picker-prefix-suffix-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/picker-column/test/slots/picker-column.e2e.ts-snapshots/picker-prefix-suffix-md-ltr-Mobile-Safari-linux.png b/core/src/components/picker-column/test/slots/picker-column.e2e.ts-snapshots/picker-prefix-suffix-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..f0d5decfd0
Binary files /dev/null and b/core/src/components/picker-column/test/slots/picker-column.e2e.ts-snapshots/picker-prefix-suffix-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/picker/test/basic/picker.e2e.ts b/core/src/components/picker/test/basic/picker.e2e.ts
index e464a48bed..a0a46952dd 100644
--- a/core/src/components/picker/test/basic/picker.e2e.ts
+++ b/core/src/components/picker/test/basic/picker.e2e.ts
@@ -131,7 +131,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
       const firstColumn = page.locator('ion-picker-column#first');
       const secondColumn = page.locator('ion-picker-column#second');
 
-      await secondColumn.focus();
+      await secondColumn.evaluate((el: HTMLIonPickerColumnElement) => el.setFocus());
       await expect(secondColumn).toBeFocused();
 
       await page.waitForChanges();
diff --git a/core/src/components/picker/test/basic/picker.e2e.ts-snapshots/picker-popover-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/picker/test/basic/picker.e2e.ts-snapshots/picker-popover-diff-md-ltr-Mobile-Chrome-linux.png
index 578e53e8d8..98ea20a8ad 100644
Binary files a/core/src/components/picker/test/basic/picker.e2e.ts-snapshots/picker-popover-diff-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/picker/test/basic/picker.e2e.ts-snapshots/picker-popover-diff-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/picker/test/keyboard-entry/picker.e2e.ts b/core/src/components/picker/test/keyboard-entry/picker.e2e.ts
index ae2210e0c0..cee9d192af 100644
--- a/core/src/components/picker/test/keyboard-entry/picker.e2e.ts
+++ b/core/src/components/picker/test/keyboard-entry/picker.e2e.ts
@@ -32,7 +32,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
 
       const column = page.locator('ion-picker-column');
       const ionChange = await page.spyOnEvent('ionChange');
-      await column.focus();
+      await column.evaluate((el: HTMLIonPickerColumnElement) => el.setFocus());
 
       await page.keyboard.press('Digit2');
 
@@ -126,7 +126,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
 
       const column = page.locator('ion-picker-column');
       const ionChange = await page.spyOnEvent('ionChange');
-      await column.focus();
+      await column.evaluate((el: HTMLIonPickerColumnElement) => el.setFocus());
 
       await page.keyboard.press('Digit0');
 
diff --git a/core/src/components/popover/popover.tsx b/core/src/components/popover/popover.tsx
index 75e16ad70d..21dce20a5d 100644
--- a/core/src/components/popover/popover.tsx
+++ b/core/src/components/popover/popover.tsx
@@ -370,6 +370,17 @@ export class Popover implements ComponentInterface, PopoverInterface {
         this.dismiss(undefined, undefined, false);
       });
     }
+
+    /**
+     * When binding values in frameworks such as Angular
+     * it is possible for the value to be set after the Web Component
+     * initializes but before the value watcher is set up in Stencil.
+     * As a result, the watcher callback may not be fired.
+     * We work around this by manually calling the watcher
+     * callback when the component has loaded and the watcher
+     * is configured.
+     */
+    this.configureTriggerInteraction();
   }
 
   /**
diff --git a/core/src/components/searchbar/searchbar.tsx b/core/src/components/searchbar/searchbar.tsx
index 84ae9b2acc..21fed733d2 100644
--- a/core/src/components/searchbar/searchbar.tsx
+++ b/core/src/components/searchbar/searchbar.tsx
@@ -257,6 +257,8 @@ export class Searchbar implements ComponentInterface {
    *
    * Developers who wish to focus an input when an overlay is presented
    * should call `setFocus` after `didPresent` has resolved.
+   *
+   * See [managing focus](/docs/developing/managing-focus) for more information.
    */
   @Method()
   async setFocus() {
diff --git a/core/src/components/textarea/textarea.tsx b/core/src/components/textarea/textarea.tsx
index 6159f64790..31ec5eb616 100644
--- a/core/src/components/textarea/textarea.tsx
+++ b/core/src/components/textarea/textarea.tsx
@@ -93,7 +93,9 @@ export class Textarea implements ComponentInterface {
   @Prop() autocapitalize = 'none';
 
   /**
-   * This Boolean attribute lets you specify that a form control should have input focus when the page loads.
+   * Sets the [`autofocus` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus) on the native input element.
+   *
+   * This may not be sufficient for the element to be focused on page load. See [managing focus](/docs/developing/managing-focus) for more information.
    */
   @Prop() autofocus = false;
 
@@ -372,6 +374,8 @@ export class Textarea implements ComponentInterface {
   /**
    * Sets focus on the native `textarea` in `ion-textarea`. Use this method instead of the global
    * `textarea.focus()`.
+   *
+   * See [managing focus](/docs/developing/managing-focus) for more information.
    */
   @Method()
   async setFocus() {
diff --git a/core/src/components/toast/toast.tsx b/core/src/components/toast/toast.tsx
index b7945400b5..0a4fc420fc 100644
--- a/core/src/components/toast/toast.tsx
+++ b/core/src/components/toast/toast.tsx
@@ -288,6 +288,17 @@ export class Toast implements ComponentInterface, OverlayInterface {
     if (this.isOpen === true) {
       raf(() => this.present());
     }
+
+    /**
+     * When binding values in frameworks such as Angular
+     * it is possible for the value to be set after the Web Component
+     * initializes but before the value watcher is set up in Stencil.
+     * As a result, the watcher callback may not be fired.
+     * We work around this by manually calling the watcher
+     * callback when the component has loaded and the watcher
+     * is configured.
+     */
+    this.triggerChanged();
   }
 
   /**
diff --git a/core/src/utils/test/playwright/generator.ts b/core/src/utils/test/playwright/generator.ts
index e2cdd940f9..41b2abc183 100644
--- a/core/src/utils/test/playwright/generator.ts
+++ b/core/src/utils/test/playwright/generator.ts
@@ -1,5 +1,12 @@
 export type Mode = 'ios' | 'md';
 export type Direction = 'ltr' | 'rtl';
+/**
+ * The theme to use for the playwright test.
+ *
+ * - `light`: The fallback theme values. Theme stylesheet will not be included.
+ * - `dark`: The dark theme values.
+ */
+export type Theme = 'light' | 'dark';
 
 export type TitleFn = (title: string) => string;
 export type ScreenshotFn = (fileName: string) => string;
@@ -7,6 +14,7 @@ export type ScreenshotFn = (fileName: string) => string;
 export interface TestConfig {
   mode: Mode;
   direction: Direction;
+  theme: Theme;
 }
 
 interface TestUtilities {
@@ -18,6 +26,7 @@ interface TestUtilities {
 interface TestConfigOption {
   modes?: Mode[];
   directions?: Direction[];
+  themes?: Theme[];
 }
 
 /**
@@ -27,9 +36,19 @@ interface TestConfigOption {
  * each test title is unique.
  */
 const generateTitle = (title: string, config: TestConfig): string => {
-  const { mode, direction } = config;
+  const { mode, direction, theme } = config;
 
-  return `${title} - ${mode}/${direction}`;
+  if (theme === 'light') {
+    /**
+     * Ionic has many existing tests that existed prior to
+     * the introduction of theme testing. To maintain backwards
+     * compatibility, we will not include the theme in the test
+     * title if the theme is set to light.
+     */
+    return `${title} - ${mode}/${direction}`;
+  }
+
+  return `${title} - ${mode}/${direction}/${theme}`;
 };
 
 /**
@@ -37,9 +56,19 @@ const generateTitle = (title: string, config: TestConfig): string => {
  * and a test config.
  */
 const generateScreenshotName = (fileName: string, config: TestConfig): string => {
-  const { mode, direction } = config;
+  const { mode, direction, theme } = config;
 
-  return `${fileName}-${mode}-${direction}.png`;
+  if (theme === 'light') {
+    /**
+     * Ionic has many existing tests that existed prior to
+     * the introduction of theme testing. To maintain backwards
+     * compatibility, we will not include the theme in the screenshot
+     * name if the theme is set to light.
+     */
+    return `${fileName}-${mode}-${direction}.png`;
+  }
+
+  return `${fileName}-${mode}-${direction}-${theme}.png`;
 };
 
 /**
@@ -54,12 +83,15 @@ export const configs = (testConfig: TestConfigOption = DEFAULT_TEST_CONFIG_OPTIO
    * If certain options are not provided,
    * fall back to the defaults.
    */
-  const processedMode: Mode[] = modes ?? DEFAULT_MODES;
-  const processedDirection: Direction[] = directions ?? DEFAULT_DIRECTIONS;
+  const processedMode = modes ?? DEFAULT_MODES;
+  const processedDirection = directions ?? DEFAULT_DIRECTIONS;
+  const processedTheme = testConfig.themes ?? DEFAULT_THEMES;
 
-  processedMode.forEach((mode: Mode) => {
-    processedDirection.forEach((direction: Direction) => {
-      configs.push({ mode, direction });
+  processedMode.forEach((mode) => {
+    processedDirection.forEach((direction) => {
+      processedTheme.forEach((theme) => {
+        configs.push({ mode, direction, theme });
+      });
     });
   });
 
@@ -74,6 +106,7 @@ export const configs = (testConfig: TestConfigOption = DEFAULT_TEST_CONFIG_OPTIO
 
 const DEFAULT_MODES: Mode[] = ['ios', 'md'];
 const DEFAULT_DIRECTIONS: Direction[] = ['ltr', 'rtl'];
+const DEFAULT_THEMES: Theme[] = ['light'];
 
 const DEFAULT_TEST_CONFIG_OPTION = {
   modes: DEFAULT_MODES,
diff --git a/core/src/utils/test/playwright/page/utils/set-content.ts b/core/src/utils/test/playwright/page/utils/set-content.ts
index 3087789cdf..1f0e6b2a4a 100644
--- a/core/src/utils/test/playwright/page/utils/set-content.ts
+++ b/core/src/utils/test/playwright/page/utils/set-content.ts
@@ -1,5 +1,5 @@
 import type { Page, TestInfo } from '@playwright/test';
-import type { E2EPageOptions, Mode, Direction } from '@utils/test/playwright';
+import type { E2EPageOptions, Mode, Direction, Theme } from '@utils/test/playwright';
 
 /**
  * Overwrites the default Playwright page.setContent method.
@@ -19,25 +19,30 @@ export const setContent = async (page: Page, html: string, testInfo: TestInfo, o
 
   let mode: Mode;
   let direction: Direction;
+  let theme: Theme;
 
   if (options == undefined) {
     mode = testInfo.project.metadata.mode;
     direction = testInfo.project.metadata.rtl ? 'rtl' : 'ltr';
+    theme = testInfo.project.metadata.theme;
   } else {
     mode = options.mode;
     direction = options.direction;
+    theme = options.theme;
   }
 
   const baseUrl = process.env.PLAYWRIGHT_TEST_BASE_URL;
 
   const output = `
     <!DOCTYPE html>
-    <html dir="${direction}">
+    <html dir="${direction}" lang="en">
       <head>
+        <title>Ionic Playwright Test</title>
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
         <link href="${baseUrl}/css/ionic.bundle.css" rel="stylesheet" />
         <link href="${baseUrl}/scripts/testing/styles.css" rel="stylesheet" />
+        ${theme !== 'light' ? `<link href="${baseUrl}/scripts/testing/themes/${theme}.css" rel="stylesheet" />` : ''}
         <script src="${baseUrl}/scripts/testing/scripts.js"></script>
         <script type="module" src="${baseUrl}/dist/ionic/ionic.esm.js"></script>
         <script>
@@ -54,6 +59,11 @@ export const setContent = async (page: Page, html: string, testInfo: TestInfo, o
     </html>
   `;
 
+  testInfo.annotations.push({
+    type: 'theme',
+    description: theme,
+  });
+
   if (baseUrl) {
     await page.route(baseUrl, (route) => {
       if (route.request().url() === `${baseUrl}/`) {
diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md
index 8b9b133617..0b1d816b0c 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.
 
+## [7.5.7](https://github.com/ionic-team/ionic-framework/compare/v7.5.6...v7.5.7) (2023-11-29)
+
+**Note:** Version bump only for package @ionic/docs
+
+
+
+
+
 ## [7.5.6](https://github.com/ionic-team/ionic-framework/compare/v7.5.5...v7.5.6) (2023-11-21)
 
 **Note:** Version bump only for package @ionic/docs
diff --git a/docs/package-lock.json b/docs/package-lock.json
index 169e595a19..294c541e40 100644
--- a/docs/package-lock.json
+++ b/docs/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@ionic/docs",
-  "version": "7.5.6",
+  "version": "7.5.7",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/docs",
-      "version": "7.5.6",
+      "version": "7.5.7",
       "license": "MIT"
     }
   }
diff --git a/docs/package.json b/docs/package.json
index 5bd8bc0d47..eff3724c5d 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/docs",
-  "version": "7.5.6",
+  "version": "7.5.7",
   "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 629975cb64..d149811f56 100644
--- a/lerna.json
+++ b/lerna.json
@@ -4,5 +4,5 @@
     "docs",
     "packages/*"
   ],
-  "version": "7.5.6"
+  "version": "7.5.7"
 }
diff --git a/packages/angular-server/CHANGELOG.md b/packages/angular-server/CHANGELOG.md
index cf5e4fb788..5d84d466a5 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.
 
+## [7.5.7](https://github.com/ionic-team/ionic-framework/compare/v7.5.6...v7.5.7) (2023-11-29)
+
+**Note:** Version bump only for package @ionic/angular-server
+
+
+
+
+
 ## [7.5.6](https://github.com/ionic-team/ionic-framework/compare/v7.5.5...v7.5.6) (2023-11-21)
 
 **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 be5ca369a3..426f05801b 100644
--- a/packages/angular-server/package-lock.json
+++ b/packages/angular-server/package-lock.json
@@ -1,15 +1,15 @@
 {
   "name": "@ionic/angular-server",
-  "version": "7.5.6",
+  "version": "7.5.7",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/angular-server",
-      "version": "7.5.6",
+      "version": "7.5.7",
       "license": "MIT",
       "dependencies": {
-        "@ionic/core": "^7.5.6"
+        "@ionic/core": "^7.5.7"
       },
       "devDependencies": {
         "@angular-eslint/eslint-plugin": "^14.0.0",
@@ -1060,9 +1060,9 @@
       "dev": true
     },
     "node_modules/@ionic/core": {
-      "version": "7.5.6",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.5.6.tgz",
-      "integrity": "sha512-bYQp2twwm61uA0Q31ToVIpQWsiQ9so1dRoWZPD+l+y4fVuFmOCLYeS6XTLTm73jVBq40JfEcsac7eYC4DxoemQ==",
+      "version": "7.5.7",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.5.7.tgz",
+      "integrity": "sha512-BVoKckmcC1kgRW5+ZGmzZMCXOjjaxq6D5lp0XzOpqUKBfyr8b39nkdJL2odQY2F1+jScChxk7wB5nubx4i3lUw==",
       "dependencies": {
         "@stencil/core": "^4.7.2",
         "ionicons": "^7.2.1",
@@ -7330,9 +7330,9 @@
       "dev": true
     },
     "@ionic/core": {
-      "version": "7.5.6",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.5.6.tgz",
-      "integrity": "sha512-bYQp2twwm61uA0Q31ToVIpQWsiQ9so1dRoWZPD+l+y4fVuFmOCLYeS6XTLTm73jVBq40JfEcsac7eYC4DxoemQ==",
+      "version": "7.5.7",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.5.7.tgz",
+      "integrity": "sha512-BVoKckmcC1kgRW5+ZGmzZMCXOjjaxq6D5lp0XzOpqUKBfyr8b39nkdJL2odQY2F1+jScChxk7wB5nubx4i3lUw==",
       "requires": {
         "@stencil/core": "^4.7.2",
         "ionicons": "^7.2.1",
diff --git a/packages/angular-server/package.json b/packages/angular-server/package.json
index 3001c8cfa9..34d7c32d1e 100644
--- a/packages/angular-server/package.json
+++ b/packages/angular-server/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/angular-server",
-  "version": "7.5.6",
+  "version": "7.5.7",
   "description": "Angular SSR Module for Ionic",
   "keywords": [
     "ionic",
@@ -62,6 +62,6 @@
   },
   "prettier": "@ionic/prettier-config",
   "dependencies": {
-    "@ionic/core": "^7.5.6"
+    "@ionic/core": "^7.5.7"
   }
 }
diff --git a/packages/angular/CHANGELOG.md b/packages/angular/CHANGELOG.md
index 1e618e94f3..57815da0c4 100644
--- a/packages/angular/CHANGELOG.md
+++ b/packages/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.
 
+## [7.5.7](https://github.com/ionic-team/ionic-framework/compare/v7.5.6...v7.5.7) (2023-11-29)
+
+**Note:** Version bump only for package @ionic/angular
+
+
+
+
+
 ## [7.5.6](https://github.com/ionic-team/ionic-framework/compare/v7.5.5...v7.5.6) (2023-11-21)
 
 
diff --git a/packages/angular/package-lock.json b/packages/angular/package-lock.json
index 4ffdf17a05..3f7a1a6bf0 100644
--- a/packages/angular/package-lock.json
+++ b/packages/angular/package-lock.json
@@ -1,15 +1,15 @@
 {
   "name": "@ionic/angular",
-  "version": "7.5.6",
+  "version": "7.5.7",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/angular",
-      "version": "7.5.6",
+      "version": "7.5.7",
       "license": "MIT",
       "dependencies": {
-        "@ionic/core": "^7.5.6",
+        "@ionic/core": "^7.5.7",
         "ionicons": "^7.0.0",
         "jsonc-parser": "^3.0.0",
         "tslib": "^2.3.0"
@@ -1407,9 +1407,9 @@
       "dev": true
     },
     "node_modules/@ionic/core": {
-      "version": "7.5.6",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.5.6.tgz",
-      "integrity": "sha512-bYQp2twwm61uA0Q31ToVIpQWsiQ9so1dRoWZPD+l+y4fVuFmOCLYeS6XTLTm73jVBq40JfEcsac7eYC4DxoemQ==",
+      "version": "7.5.7",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.5.7.tgz",
+      "integrity": "sha512-BVoKckmcC1kgRW5+ZGmzZMCXOjjaxq6D5lp0XzOpqUKBfyr8b39nkdJL2odQY2F1+jScChxk7wB5nubx4i3lUw==",
       "dependencies": {
         "@stencil/core": "^4.7.2",
         "ionicons": "^7.2.1",
@@ -9697,9 +9697,9 @@
       "dev": true
     },
     "@ionic/core": {
-      "version": "7.5.6",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.5.6.tgz",
-      "integrity": "sha512-bYQp2twwm61uA0Q31ToVIpQWsiQ9so1dRoWZPD+l+y4fVuFmOCLYeS6XTLTm73jVBq40JfEcsac7eYC4DxoemQ==",
+      "version": "7.5.7",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.5.7.tgz",
+      "integrity": "sha512-BVoKckmcC1kgRW5+ZGmzZMCXOjjaxq6D5lp0XzOpqUKBfyr8b39nkdJL2odQY2F1+jScChxk7wB5nubx4i3lUw==",
       "requires": {
         "@stencil/core": "^4.7.2",
         "ionicons": "^7.2.1",
diff --git a/packages/angular/package.json b/packages/angular/package.json
index 03ee058d93..725ddfc4ec 100644
--- a/packages/angular/package.json
+++ b/packages/angular/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/angular",
-  "version": "7.5.6",
+  "version": "7.5.7",
   "description": "Angular specific wrappers for @ionic/core",
   "keywords": [
     "ionic",
@@ -48,7 +48,7 @@
     }
   },
   "dependencies": {
-    "@ionic/core": "^7.5.6",
+    "@ionic/core": "^7.5.7",
     "ionicons": "^7.0.0",
     "jsonc-parser": "^3.0.0",
     "tslib": "^2.3.0"
diff --git a/packages/angular/src/directives/proxies.ts b/packages/angular/src/directives/proxies.ts
index fd5b4c9426..227bceb16d 100644
--- a/packages/angular/src/directives/proxies.ts
+++ b/packages/angular/src/directives/proxies.ts
@@ -1446,7 +1446,8 @@ export declare interface IonPicker extends Components.IonPicker {
 
 
 @ProxyCmp({
-  inputs: ['color', 'disabled', 'items', 'mode', 'value']
+  inputs: ['color', 'disabled', 'items', 'mode', 'value'],
+  methods: ['setFocus']
 })
 @Component({
   selector: 'ion-picker-column',
diff --git a/packages/angular/standalone/src/directives/proxies.ts b/packages/angular/standalone/src/directives/proxies.ts
index 575c9b3f96..cc2a08c571 100644
--- a/packages/angular/standalone/src/directives/proxies.ts
+++ b/packages/angular/standalone/src/directives/proxies.ts
@@ -1441,7 +1441,8 @@ export declare interface IonPicker extends Components.IonPicker {
 
 @ProxyCmp({
   defineCustomElementFn: defineIonPickerColumn,
-  inputs: ['color', 'disabled', 'items', 'mode', 'value']
+  inputs: ['color', 'disabled', 'items', 'mode', 'value'],
+  methods: ['setFocus']
 })
 @Component({
   selector: 'ion-picker-column',
diff --git a/packages/react-router/CHANGELOG.md b/packages/react-router/CHANGELOG.md
index fcf1db7b53..fe034c99e6 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.
 
+## [7.5.7](https://github.com/ionic-team/ionic-framework/compare/v7.5.6...v7.5.7) (2023-11-29)
+
+**Note:** Version bump only for package @ionic/react-router
+
+
+
+
+
 ## [7.5.6](https://github.com/ionic-team/ionic-framework/compare/v7.5.5...v7.5.6) (2023-11-21)
 
 **Note:** Version bump only for package @ionic/react-router
diff --git a/packages/react-router/package-lock.json b/packages/react-router/package-lock.json
index b765cee0d8..da355b49b1 100644
--- a/packages/react-router/package-lock.json
+++ b/packages/react-router/package-lock.json
@@ -1,15 +1,15 @@
 {
   "name": "@ionic/react-router",
-  "version": "7.5.6",
+  "version": "7.5.7",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/react-router",
-      "version": "7.5.6",
+      "version": "7.5.7",
       "license": "MIT",
       "dependencies": {
-        "@ionic/react": "^7.5.6",
+        "@ionic/react": "^7.5.7",
         "tslib": "*"
       },
       "devDependencies": {
@@ -238,9 +238,9 @@
       "dev": true
     },
     "node_modules/@ionic/core": {
-      "version": "7.5.6",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.5.6.tgz",
-      "integrity": "sha512-bYQp2twwm61uA0Q31ToVIpQWsiQ9so1dRoWZPD+l+y4fVuFmOCLYeS6XTLTm73jVBq40JfEcsac7eYC4DxoemQ==",
+      "version": "7.5.7",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.5.7.tgz",
+      "integrity": "sha512-BVoKckmcC1kgRW5+ZGmzZMCXOjjaxq6D5lp0XzOpqUKBfyr8b39nkdJL2odQY2F1+jScChxk7wB5nubx4i3lUw==",
       "dependencies": {
         "@stencil/core": "^4.7.2",
         "ionicons": "^7.2.1",
@@ -414,11 +414,11 @@
       }
     },
     "node_modules/@ionic/react": {
-      "version": "7.5.6",
-      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-7.5.6.tgz",
-      "integrity": "sha512-/2NrJuKGllZzJTDbaBuep/0GFCDO7YhWAvda/FugqS1WLuqNoW2p3LYk0uUqMWCoXVtx972hoyQJzCNf55axkQ==",
+      "version": "7.5.7",
+      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-7.5.7.tgz",
+      "integrity": "sha512-+dY4Nyz/e0PAw/5bxg6rP+MfFwWIxom4PWoH7Hcm91mHNSfcmNdGuc4D/Hp4TMld7cnlXCr0JVzPqXJGxqn78g==",
       "dependencies": {
-        "@ionic/core": "7.5.6",
+        "@ionic/core": "7.5.7",
         "ionicons": "^7.0.0",
         "tslib": "*"
       },
@@ -667,9 +667,9 @@
       ]
     },
     "node_modules/@stencil/core": {
-      "version": "4.7.2",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.7.2.tgz",
-      "integrity": "sha512-sPPDYrXiTbfeUF5CCyfqysXK/yfTHC4xYR1+nHzGkS2vhRSBOLp0oPuB+xkJLKA+K2ZqDJUxpOnDxy1CLWwBXA==",
+      "version": "4.8.0",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.8.0.tgz",
+      "integrity": "sha512-iNEaMiEt9oFZXSjZ7qkdlBpPTzWzBgWM7go8nI8a7V6ZOkmdVhhT0xGQD7OY13v5ZuDoIw5IsGvbIAGefhIhhQ==",
       "bin": {
         "stencil": "bin/stencil"
       },
@@ -4050,9 +4050,9 @@
       "dev": true
     },
     "@ionic/core": {
-      "version": "7.5.6",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.5.6.tgz",
-      "integrity": "sha512-bYQp2twwm61uA0Q31ToVIpQWsiQ9so1dRoWZPD+l+y4fVuFmOCLYeS6XTLTm73jVBq40JfEcsac7eYC4DxoemQ==",
+      "version": "7.5.7",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.5.7.tgz",
+      "integrity": "sha512-BVoKckmcC1kgRW5+ZGmzZMCXOjjaxq6D5lp0XzOpqUKBfyr8b39nkdJL2odQY2F1+jScChxk7wB5nubx4i3lUw==",
       "requires": {
         "@stencil/core": "^4.7.2",
         "ionicons": "^7.2.1",
@@ -4156,11 +4156,11 @@
       "requires": {}
     },
     "@ionic/react": {
-      "version": "7.5.6",
-      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-7.5.6.tgz",
-      "integrity": "sha512-/2NrJuKGllZzJTDbaBuep/0GFCDO7YhWAvda/FugqS1WLuqNoW2p3LYk0uUqMWCoXVtx972hoyQJzCNf55axkQ==",
+      "version": "7.5.7",
+      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-7.5.7.tgz",
+      "integrity": "sha512-+dY4Nyz/e0PAw/5bxg6rP+MfFwWIxom4PWoH7Hcm91mHNSfcmNdGuc4D/Hp4TMld7cnlXCr0JVzPqXJGxqn78g==",
       "requires": {
-        "@ionic/core": "7.5.6",
+        "@ionic/core": "7.5.7",
         "ionicons": "^7.0.0",
         "tslib": "*"
       }
@@ -4297,9 +4297,9 @@
       "optional": true
     },
     "@stencil/core": {
-      "version": "4.7.2",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.7.2.tgz",
-      "integrity": "sha512-sPPDYrXiTbfeUF5CCyfqysXK/yfTHC4xYR1+nHzGkS2vhRSBOLp0oPuB+xkJLKA+K2ZqDJUxpOnDxy1CLWwBXA=="
+      "version": "4.8.0",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.8.0.tgz",
+      "integrity": "sha512-iNEaMiEt9oFZXSjZ7qkdlBpPTzWzBgWM7go8nI8a7V6ZOkmdVhhT0xGQD7OY13v5ZuDoIw5IsGvbIAGefhIhhQ=="
     },
     "@types/estree": {
       "version": "1.0.4",
diff --git a/packages/react-router/package.json b/packages/react-router/package.json
index 70fca0fd05..51c0a3c0e6 100644
--- a/packages/react-router/package.json
+++ b/packages/react-router/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/react-router",
-  "version": "7.5.6",
+  "version": "7.5.7",
   "description": "React Router wrapper for @ionic/react",
   "keywords": [
     "ionic",
@@ -36,7 +36,7 @@
     "dist/"
   ],
   "dependencies": {
-    "@ionic/react": "^7.5.6",
+    "@ionic/react": "^7.5.7",
     "tslib": "*"
   },
   "peerDependencies": {
diff --git a/packages/react-router/src/ReactRouter/ReactRouterViewStack.tsx b/packages/react-router/src/ReactRouter/ReactRouterViewStack.tsx
index fa9e002102..9203679020 100644
--- a/packages/react-router/src/ReactRouter/ReactRouterViewStack.tsx
+++ b/packages/react-router/src/ReactRouter/ReactRouterViewStack.tsx
@@ -1,7 +1,8 @@
 import type { RouteInfo, ViewItem } from '@ionic/react';
 import { IonRoute, ViewLifeCycleManager, ViewStacks, generateId } from '@ionic/react';
 import React from 'react';
-import { matchPath } from 'react-router';
+
+import { matchPath } from './utils/matchPath';
 
 export class ReactRouterViewStack extends ViewStacks {
   constructor() {
@@ -23,21 +24,16 @@ export class ReactRouterViewStack extends ViewStacks {
       ionRoute: false,
     };
 
-    const matchProps = {
-      exact: reactElement.props.exact,
-      path: reactElement.props.path || reactElement.props.from,
-      component: reactElement.props.component,
-    };
-
-    const match = matchPath(routeInfo.pathname, matchProps);
-
     if (reactElement.type === IonRoute) {
       viewItem.ionRoute = true;
       viewItem.disableIonPageManagement = reactElement.props.disableIonPageManagement;
     }
 
     viewItem.routeData = {
-      match,
+      match: matchPath({
+        pathname: routeInfo.pathname,
+        componentProps: reactElement.props,
+      }),
       childProps: reactElement.props,
     };
 
@@ -106,7 +102,7 @@ export class ReactRouterViewStack extends ViewStacks {
   }
 
   findLeavingViewItemByRouteInfo(routeInfo: RouteInfo, outletId?: string, mustBeIonRoute = true) {
-    const { viewItem } = this.findViewItemByPath(routeInfo.lastPathname!, outletId, false, mustBeIonRoute);
+    const { viewItem } = this.findViewItemByPath(routeInfo.lastPathname!, outletId, mustBeIonRoute);
     return viewItem;
   }
 
@@ -115,7 +111,10 @@ export class ReactRouterViewStack extends ViewStacks {
     return viewItem;
   }
 
-  private findViewItemByPath(pathname: string, outletId?: string, forceExact?: boolean, mustBeIonRoute?: boolean) {
+  /**
+   * Returns the matching view item and the match result for a given pathname.
+   */
+  private findViewItemByPath(pathname: string, outletId?: string, mustBeIonRoute?: boolean) {
     let viewItem: ViewItem | undefined;
     let match: ReturnType<typeof matchPath> | undefined;
     let viewStack: ViewItem[];
@@ -140,16 +139,24 @@ export class ReactRouterViewStack extends ViewStacks {
       if (mustBeIonRoute && !v.ionRoute) {
         return false;
       }
-      const matchProps = {
-        exact: forceExact ? true : v.routeData.childProps.exact,
-        path: v.routeData.childProps.path || v.routeData.childProps.from,
-        component: v.routeData.childProps.component,
-      };
-      const myMatch = matchPath(pathname, matchProps);
-      if (myMatch) {
-        viewItem = v;
-        match = myMatch;
-        return true;
+
+      match = matchPath({
+        pathname,
+        componentProps: v.routeData.childProps,
+      });
+
+      if (match) {
+        /**
+         * Even though we have a match from react-router, we do not know if the match
+         * is for this specific view item.
+         *
+         * To validate this, we need to check if the path and url match the view item's route data.
+         */
+        const hasParameter = match.path.includes(':');
+        if (!hasParameter || (hasParameter && match.url === v.routeData?.match?.url)) {
+          viewItem = v;
+          return true;
+        }
       }
       return false;
     }
@@ -171,13 +178,9 @@ export class ReactRouterViewStack extends ViewStacks {
   }
 }
 
-function matchComponent(node: React.ReactElement, pathname: string, forceExact?: boolean) {
-  const matchProps = {
-    exact: forceExact ? true : node.props.exact,
-    path: node.props.path || node.props.from,
-    component: node.props.component,
-  };
-  const match = matchPath(pathname, matchProps);
-
-  return match;
+function matchComponent(node: React.ReactElement, pathname: string) {
+  return matchPath({
+    pathname,
+    componentProps: node.props,
+  });
 }
diff --git a/packages/react-router/src/ReactRouter/StackManager.tsx b/packages/react-router/src/ReactRouter/StackManager.tsx
index 1acfd48468..708de65139 100644
--- a/packages/react-router/src/ReactRouter/StackManager.tsx
+++ b/packages/react-router/src/ReactRouter/StackManager.tsx
@@ -1,9 +1,9 @@
 import type { RouteInfo, StackContextState, ViewItem } from '@ionic/react';
 import { RouteManagerContext, StackContext, generateId, getConfig } from '@ionic/react';
 import React from 'react';
-import { matchPath } from 'react-router-dom';
 
 import { clonePageElement } from './clonePageElement';
+import { matchPath } from './utils/matchPath';
 
 // TODO(FW-2959): types
 
@@ -433,12 +433,10 @@ export default StackManager;
 function matchRoute(node: React.ReactNode, routeInfo: RouteInfo) {
   let matchedNode: React.ReactNode;
   React.Children.forEach(node as React.ReactElement, (child: React.ReactElement) => {
-    const matchProps = {
-      exact: child.props.exact,
-      path: child.props.path || child.props.from,
-      component: child.props.component,
-    };
-    const match = matchPath(routeInfo.pathname, matchProps);
+    const match = matchPath({
+      pathname: routeInfo.pathname,
+      componentProps: child.props,
+    });
     if (match) {
       matchedNode = child;
     }
@@ -459,12 +457,11 @@ function matchRoute(node: React.ReactNode, routeInfo: RouteInfo) {
 }
 
 function matchComponent(node: React.ReactElement, pathname: string, forceExact?: boolean) {
-  const matchProps = {
-    exact: forceExact ? true : node.props.exact,
-    path: node.props.path || node.props.from,
-    component: node.props.component,
-  };
-  const match = matchPath(pathname, matchProps);
-
-  return match;
+  return matchPath({
+    pathname,
+    componentProps: {
+      ...node.props,
+      exact: forceExact,
+    },
+  });
 }
diff --git a/packages/react-router/src/ReactRouter/utils/matchPath.ts b/packages/react-router/src/ReactRouter/utils/matchPath.ts
new file mode 100644
index 0000000000..891eda08bb
--- /dev/null
+++ b/packages/react-router/src/ReactRouter/utils/matchPath.ts
@@ -0,0 +1,47 @@
+import { matchPath as reactRouterMatchPath } from 'react-router';
+
+interface MatchPathOptions {
+  /**
+   * The pathname to match against.
+   */
+  pathname: string;
+  /**
+   * The props to match against, they are identical to the matching props `Route` accepts.
+   */
+  componentProps: {
+    path?: string;
+    from?: string;
+    component?: any;
+    exact?: boolean;
+  };
+}
+
+/**
+ * @see https://v5.reactrouter.com/web/api/matchPath
+ */
+export const matchPath = ({
+  pathname,
+  componentProps,
+}: MatchPathOptions): false | ReturnType<typeof reactRouterMatchPath> => {
+  const { exact, component } = componentProps;
+
+  const path = componentProps.path || componentProps.from;
+  /***
+   * The props to match against, they are identical
+   * to the matching props `Route` accepts. It could also be a string
+   * or an array of strings as shortcut for `{ path }`.
+   */
+  const matchProps = {
+    exact,
+    path,
+    component,
+  };
+
+  const match = reactRouterMatchPath(pathname, matchProps);
+
+  if (!match) {
+    return false;
+  }
+
+  return match;
+};
diff --git a/packages/react-router/test/base/src/pages/routing/Details.tsx b/packages/react-router/test/base/src/pages/routing/Details.tsx
index 17905911a4..94aeeb6dba 100644
--- a/packages/react-router/test/base/src/pages/routing/Details.tsx
+++ b/packages/react-router/test/base/src/pages/routing/Details.tsx
@@ -24,10 +24,6 @@ const Details: React.FC<DetailsProps> = () => {
     return () => console.log('Home Details unmount');
   }, []);
 
-  // useIonViewWillEnter(() => {
-  //   console.log('IVWE Details')
-  // })
-
   const nextId = parseInt(id, 10) + 1;
 
   return (
@@ -58,6 +54,9 @@ const Details: React.FC<DetailsProps> = () => {
         <IonButton routerLink={`/routing/tabs/settings/details/1`}>
           <IonLabel>Go to Settings Details 1</IonLabel>
         </IonButton>
+        <br />
+        <br />
+        <input data-testid="details-input" />
       </IonContent>
     </IonPage>
   );
diff --git a/packages/react-router/test/base/tests/e2e/specs/routing.cy.js b/packages/react-router/test/base/tests/e2e/specs/routing.cy.js
index 950a27d157..1289bb3065 100644
--- a/packages/react-router/test/base/tests/e2e/specs/routing.cy.js
+++ b/packages/react-router/test/base/tests/e2e/specs/routing.cy.js
@@ -309,6 +309,41 @@ describe('Routing Tests', () => {
     cy.ionPageDoesNotExist('home-details-page-1');
     cy.ionPageVisible('home-page');
   });
+
+  it('should mount new view item instances of parameterized routes', () => {
+    cy.visit(`http://localhost:${port}/routing/tabs/home/details/1`);
+
+    cy.get('div.ion-page[data-pageid=home-details-page-1]')
+      .get('[data-testid="details-input"]')
+      .should('have.value', '');
+
+    cy.get('div.ion-page[data-pageid=home-details-page-1] [data-testid="details-input"]').type('1');
+
+    cy.ionNav('ion-button', 'Go to Details 2');
+    cy.ionPageVisible('home-details-page-2');
+
+    cy.get('div.ion-page[data-pageid=home-details-page-2] [data-testid="details-input"]').should('have.value', '');
+
+    cy.get('div.ion-page[data-pageid=home-details-page-2] [data-testid="details-input"]').type('2');
+
+    cy.ionNav('ion-button', 'Go to Details 3');
+    cy.ionPageVisible('home-details-page-3');
+
+    cy.get('div.ion-page[data-pageid=home-details-page-3] [data-testid="details-input"]').should('have.value', '');
+
+    cy.get('div.ion-page[data-pageid=home-details-page-3] [data-testid="details-input"]').type('3');
+
+    cy.ionBackClick('home-details-page-3');
+    cy.ionPageVisible('home-details-page-2');
+
+    cy.get('div.ion-page[data-pageid=home-details-page-2] [data-testid="details-input"]').should('have.value', '2');
+
+    cy.ionBackClick('home-details-page-2');
+    cy.ionPageVisible('home-details-page-1');
+
+    cy.get('div.ion-page[data-pageid=home-details-page-1] [data-testid="details-input"]').should('have.value', '1');
+  });
+
   /*
     Tests to add:
     Test that lifecycle events fire
diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md
index c9bc2dafee..a2f1408480 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.
 
+## [7.5.7](https://github.com/ionic-team/ionic-framework/compare/v7.5.6...v7.5.7) (2023-11-29)
+
+**Note:** Version bump only for package @ionic/react
+
+
+
+
+
 ## [7.5.6](https://github.com/ionic-team/ionic-framework/compare/v7.5.5...v7.5.6) (2023-11-21)
 
 **Note:** Version bump only for package @ionic/react
diff --git a/packages/react/package-lock.json b/packages/react/package-lock.json
index da8b31298b..50b1f979a6 100644
--- a/packages/react/package-lock.json
+++ b/packages/react/package-lock.json
@@ -1,15 +1,15 @@
 {
   "name": "@ionic/react",
-  "version": "7.5.6",
+  "version": "7.5.7",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/react",
-      "version": "7.5.6",
+      "version": "7.5.7",
       "license": "MIT",
       "dependencies": {
-        "@ionic/core": "^7.5.6",
+        "@ionic/core": "^7.5.7",
         "ionicons": "^7.0.0",
         "tslib": "*"
       },
@@ -811,9 +811,9 @@
       "dev": true
     },
     "node_modules/@ionic/core": {
-      "version": "7.5.6",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.5.6.tgz",
-      "integrity": "sha512-bYQp2twwm61uA0Q31ToVIpQWsiQ9so1dRoWZPD+l+y4fVuFmOCLYeS6XTLTm73jVBq40JfEcsac7eYC4DxoemQ==",
+      "version": "7.5.7",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.5.7.tgz",
+      "integrity": "sha512-BVoKckmcC1kgRW5+ZGmzZMCXOjjaxq6D5lp0XzOpqUKBfyr8b39nkdJL2odQY2F1+jScChxk7wB5nubx4i3lUw==",
       "dependencies": {
         "@stencil/core": "^4.7.2",
         "ionicons": "^7.2.1",
@@ -12857,9 +12857,9 @@
       "dev": true
     },
     "@ionic/core": {
-      "version": "7.5.6",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.5.6.tgz",
-      "integrity": "sha512-bYQp2twwm61uA0Q31ToVIpQWsiQ9so1dRoWZPD+l+y4fVuFmOCLYeS6XTLTm73jVBq40JfEcsac7eYC4DxoemQ==",
+      "version": "7.5.7",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.5.7.tgz",
+      "integrity": "sha512-BVoKckmcC1kgRW5+ZGmzZMCXOjjaxq6D5lp0XzOpqUKBfyr8b39nkdJL2odQY2F1+jScChxk7wB5nubx4i3lUw==",
       "requires": {
         "@stencil/core": "^4.7.2",
         "ionicons": "^7.2.1",
diff --git a/packages/react/package.json b/packages/react/package.json
index b3b7754bb1..fd42fef82b 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/react",
-  "version": "7.5.6",
+  "version": "7.5.7",
   "description": "React specific wrapper for @ionic/core",
   "keywords": [
     "ionic",
@@ -39,7 +39,7 @@
     "css/"
   ],
   "dependencies": {
-    "@ionic/core": "^7.5.6",
+    "@ionic/core": "^7.5.7",
     "ionicons": "^7.0.0",
     "tslib": "*"
   },
diff --git a/packages/vue-router/CHANGELOG.md b/packages/vue-router/CHANGELOG.md
index 2cf718a83a..3e01c55ed1 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.
 
+## [7.5.7](https://github.com/ionic-team/ionic-framework/compare/v7.5.6...v7.5.7) (2023-11-29)
+
+**Note:** Version bump only for package @ionic/vue-router
+
+
+
+
+
 ## [7.5.6](https://github.com/ionic-team/ionic-framework/compare/v7.5.5...v7.5.6) (2023-11-21)
 
 **Note:** Version bump only for package @ionic/vue-router
diff --git a/packages/vue-router/package-lock.json b/packages/vue-router/package-lock.json
index 1c99855237..cbb2031687 100644
--- a/packages/vue-router/package-lock.json
+++ b/packages/vue-router/package-lock.json
@@ -1,15 +1,15 @@
 {
   "name": "@ionic/vue-router",
-  "version": "7.5.6",
+  "version": "7.5.7",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/vue-router",
-      "version": "7.5.6",
+      "version": "7.5.7",
       "license": "MIT",
       "dependencies": {
-        "@ionic/vue": "^7.5.6"
+        "@ionic/vue": "^7.5.7"
       },
       "devDependencies": {
         "@ionic/eslint-config": "^0.3.0",
@@ -661,9 +661,9 @@
       "dev": true
     },
     "node_modules/@ionic/core": {
-      "version": "7.5.6",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.5.6.tgz",
-      "integrity": "sha512-bYQp2twwm61uA0Q31ToVIpQWsiQ9so1dRoWZPD+l+y4fVuFmOCLYeS6XTLTm73jVBq40JfEcsac7eYC4DxoemQ==",
+      "version": "7.5.7",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.5.7.tgz",
+      "integrity": "sha512-BVoKckmcC1kgRW5+ZGmzZMCXOjjaxq6D5lp0XzOpqUKBfyr8b39nkdJL2odQY2F1+jScChxk7wB5nubx4i3lUw==",
       "dependencies": {
         "@stencil/core": "^4.7.2",
         "ionicons": "^7.2.1",
@@ -852,11 +852,11 @@
       }
     },
     "node_modules/@ionic/vue": {
-      "version": "7.5.6",
-      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-7.5.6.tgz",
-      "integrity": "sha512-AtHx+mKFp2zN21PMLgkbZwPKvSF+HZtilqDyLBW+LdLVwphjWoGa+dZHiDmhyAYkO8u10rU8cPnlzMd77ArDXA==",
+      "version": "7.5.7",
+      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-7.5.7.tgz",
+      "integrity": "sha512-C1CzWcyR1Sie/2g7UWJkKGAxmjBzMF6v89cZGhvPaVg7toahc/NvhOPRJ1zS+5t2xgHmaBeBvFn528HonVeWZw==",
       "dependencies": {
-        "@ionic/core": "7.5.6",
+        "@ionic/core": "7.5.7",
         "ionicons": "^7.0.0"
       }
     },
@@ -1508,9 +1508,9 @@
       }
     },
     "node_modules/@stencil/core": {
-      "version": "4.7.2",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.7.2.tgz",
-      "integrity": "sha512-sPPDYrXiTbfeUF5CCyfqysXK/yfTHC4xYR1+nHzGkS2vhRSBOLp0oPuB+xkJLKA+K2ZqDJUxpOnDxy1CLWwBXA==",
+      "version": "4.8.0",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.8.0.tgz",
+      "integrity": "sha512-iNEaMiEt9oFZXSjZ7qkdlBpPTzWzBgWM7go8nI8a7V6ZOkmdVhhT0xGQD7OY13v5ZuDoIw5IsGvbIAGefhIhhQ==",
       "bin": {
         "stencil": "bin/stencil"
       },
@@ -7878,9 +7878,9 @@
       "dev": true
     },
     "@ionic/core": {
-      "version": "7.5.6",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.5.6.tgz",
-      "integrity": "sha512-bYQp2twwm61uA0Q31ToVIpQWsiQ9so1dRoWZPD+l+y4fVuFmOCLYeS6XTLTm73jVBq40JfEcsac7eYC4DxoemQ==",
+      "version": "7.5.7",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.5.7.tgz",
+      "integrity": "sha512-BVoKckmcC1kgRW5+ZGmzZMCXOjjaxq6D5lp0XzOpqUKBfyr8b39nkdJL2odQY2F1+jScChxk7wB5nubx4i3lUw==",
       "requires": {
         "@stencil/core": "^4.7.2",
         "ionicons": "^7.2.1",
@@ -7993,11 +7993,11 @@
       "requires": {}
     },
     "@ionic/vue": {
-      "version": "7.5.6",
-      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-7.5.6.tgz",
-      "integrity": "sha512-AtHx+mKFp2zN21PMLgkbZwPKvSF+HZtilqDyLBW+LdLVwphjWoGa+dZHiDmhyAYkO8u10rU8cPnlzMd77ArDXA==",
+      "version": "7.5.7",
+      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-7.5.7.tgz",
+      "integrity": "sha512-C1CzWcyR1Sie/2g7UWJkKGAxmjBzMF6v89cZGhvPaVg7toahc/NvhOPRJ1zS+5t2xgHmaBeBvFn528HonVeWZw==",
       "requires": {
-        "@ionic/core": "7.5.6",
+        "@ionic/core": "7.5.7",
         "ionicons": "^7.0.0"
       }
     },
@@ -8461,9 +8461,9 @@
       }
     },
     "@stencil/core": {
-      "version": "4.7.2",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.7.2.tgz",
-      "integrity": "sha512-sPPDYrXiTbfeUF5CCyfqysXK/yfTHC4xYR1+nHzGkS2vhRSBOLp0oPuB+xkJLKA+K2ZqDJUxpOnDxy1CLWwBXA=="
+      "version": "4.8.0",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.8.0.tgz",
+      "integrity": "sha512-iNEaMiEt9oFZXSjZ7qkdlBpPTzWzBgWM7go8nI8a7V6ZOkmdVhhT0xGQD7OY13v5ZuDoIw5IsGvbIAGefhIhhQ=="
     },
     "@tootallnate/once": {
       "version": "2.0.0",
diff --git a/packages/vue-router/package.json b/packages/vue-router/package.json
index f3d2b35e0e..3f52b89093 100644
--- a/packages/vue-router/package.json
+++ b/packages/vue-router/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/vue-router",
-  "version": "7.5.6",
+  "version": "7.5.7",
   "description": "Vue Router integration for @ionic/vue",
   "scripts": {
     "test.spec": "jest",
@@ -44,7 +44,7 @@
   },
   "homepage": "https://github.com/ionic-team/ionic#readme",
   "dependencies": {
-    "@ionic/vue": "^7.5.6"
+    "@ionic/vue": "^7.5.7"
   },
   "devDependencies": {
     "@ionic/eslint-config": "^0.3.0",
diff --git a/packages/vue/CHANGELOG.md b/packages/vue/CHANGELOG.md
index 68c5928ff3..d0449a3aa7 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.
 
+## [7.5.7](https://github.com/ionic-team/ionic-framework/compare/v7.5.6...v7.5.7) (2023-11-29)
+
+**Note:** Version bump only for package @ionic/vue
+
+
+
+
+
 ## [7.5.6](https://github.com/ionic-team/ionic-framework/compare/v7.5.5...v7.5.6) (2023-11-21)
 
 **Note:** Version bump only for package @ionic/vue
diff --git a/packages/vue/package-lock.json b/packages/vue/package-lock.json
index a616c993f5..c294f13674 100644
--- a/packages/vue/package-lock.json
+++ b/packages/vue/package-lock.json
@@ -1,15 +1,15 @@
 {
   "name": "@ionic/vue",
-  "version": "7.5.6",
+  "version": "7.5.7",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/vue",
-      "version": "7.5.6",
+      "version": "7.5.7",
       "license": "MIT",
       "dependencies": {
-        "@ionic/core": "^7.5.6",
+        "@ionic/core": "^7.5.7",
         "ionicons": "^7.0.0"
       },
       "devDependencies": {
@@ -208,9 +208,9 @@
       "dev": true
     },
     "node_modules/@ionic/core": {
-      "version": "7.5.6",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.5.6.tgz",
-      "integrity": "sha512-bYQp2twwm61uA0Q31ToVIpQWsiQ9so1dRoWZPD+l+y4fVuFmOCLYeS6XTLTm73jVBq40JfEcsac7eYC4DxoemQ==",
+      "version": "7.5.7",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.5.7.tgz",
+      "integrity": "sha512-BVoKckmcC1kgRW5+ZGmzZMCXOjjaxq6D5lp0XzOpqUKBfyr8b39nkdJL2odQY2F1+jScChxk7wB5nubx4i3lUw==",
       "dependencies": {
         "@stencil/core": "^4.7.2",
         "ionicons": "^7.2.1",
@@ -3959,9 +3959,9 @@
       "dev": true
     },
     "@ionic/core": {
-      "version": "7.5.6",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.5.6.tgz",
-      "integrity": "sha512-bYQp2twwm61uA0Q31ToVIpQWsiQ9so1dRoWZPD+l+y4fVuFmOCLYeS6XTLTm73jVBq40JfEcsac7eYC4DxoemQ==",
+      "version": "7.5.7",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.5.7.tgz",
+      "integrity": "sha512-BVoKckmcC1kgRW5+ZGmzZMCXOjjaxq6D5lp0XzOpqUKBfyr8b39nkdJL2odQY2F1+jScChxk7wB5nubx4i3lUw==",
       "requires": {
         "@stencil/core": "^4.7.2",
         "ionicons": "^7.2.1",
diff --git a/packages/vue/package.json b/packages/vue/package.json
index f608a64b20..da1f74db9b 100644
--- a/packages/vue/package.json
+++ b/packages/vue/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/vue",
-  "version": "7.5.6",
+  "version": "7.5.7",
   "description": "Vue specific wrapper for @ionic/core",
   "scripts": {
     "eslint": "eslint src",
@@ -66,7 +66,7 @@
     "vue-router": "^4.0.16"
   },
   "dependencies": {
-    "@ionic/core": "^7.5.6",
+    "@ionic/core": "^7.5.7",
     "ionicons": "^7.0.0"
   },
   "vetur": {
diff --git a/packages/vue/src/components/IonNav.ts b/packages/vue/src/components/IonNav.ts
index 437734d159..47124a19ff 100644
--- a/packages/vue/src/components/IonNav.ts
+++ b/packages/vue/src/components/IonNav.ts
@@ -4,7 +4,7 @@ import { defineComponent, h, shallowRef } from "vue";
 
 import { VueDelegate } from "../framework-delegate";
 
-export const IonNav = /*@__PURE__*/ defineComponent(() => {
+export const IonNav = /*@__PURE__*/ defineComponent((props) => {
   defineCustomElement();
   const views = shallowRef([]);
 
@@ -19,8 +19,39 @@ export const IonNav = /*@__PURE__*/ defineComponent(() => {
 
   const delegate = VueDelegate(addView, removeView);
   return () => {
-    return h("ion-nav", { delegate }, views.value);
+    return h("ion-nav", { ...props, delegate }, views.value);
   };
 });
 
 IonNav.name = "IonNav";
+
+/**
+ * The default values follow what is defined at
+ * https://ionicframework.com/docs/api/nav#properties
+ * otherwise the default values on the Web Component
+ * may be overridden. For example, if the default animated value
+ * is not `true` below, then Vue would default the prop to `false`
+ * which would override the Web Component default of `true`.
+ */
+IonNav.props = {
+  animated: {
+    type: Boolean,
+    default: true,
+  },
+  animation: {
+    type: Function,
+    default: undefined,
+  },
+  root: {
+    type: [Function, Object, String],
+    default: undefined,
+  },
+  rootParams: {
+    type: Object,
+    default: undefined,
+  },
+  swipeGesture: {
+    type: Boolean,
+    default: undefined,
+  },
+};
diff --git a/packages/vue/test/base/src/components/Nav.vue b/packages/vue/test/base/src/components/Nav.vue
index f4ca025094..69dc6d7175 100644
--- a/packages/vue/test/base/src/components/Nav.vue
+++ b/packages/vue/test/base/src/components/Nav.vue
@@ -1,16 +1,12 @@
 <template>
-  <ion-nav :root="NavRoot"></ion-nav>
+  <ion-nav :root="NavRoot" :root-params="rootParams"></ion-nav>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
-import { IonNav } from '@ionic/vue';
-import NavRoot from '@/components/NavRoot.vue';
+<script setup lang="ts">
+import { IonNav } from "@ionic/vue";
+import NavRoot from "@/components/NavRoot.vue";
 
-export default defineComponent({
-  components: { IonNav },
-  setup() {
-    return { NavRoot }
-  }
-});
+const rootParams = {
+  message: "Hello World!",
+};
 </script>
diff --git a/packages/vue/test/base/src/components/NavRoot.vue b/packages/vue/test/base/src/components/NavRoot.vue
index ec2fe1c513..ffd18e6765 100644
--- a/packages/vue/test/base/src/components/NavRoot.vue
+++ b/packages/vue/test/base/src/components/NavRoot.vue
@@ -8,11 +8,14 @@
     </ion-toolbar>
   </ion-header>
   <ion-content class="ion-padding">
-    <ion-button expand="block" @click="pushPage" id="push-nav-child">Go to Nav Child</ion-button>
+    <div id="nav-root-params">Message: {{ message }}</div>
+    <ion-button expand="block" @click="pushPage" id="push-nav-child"
+      >Go to Nav Child</ion-button
+    >
   </ion-content>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import {
   IonButtons,
   IonButton,
@@ -20,28 +23,20 @@ import {
   IonHeader,
   IonTitle,
   IonToolbar,
-  modalController
-} from '@ionic/vue';
-import { defineComponent } from 'vue';
-import NavChild from '@/components/NavChild.vue';
+  modalController,
+} from "@ionic/vue";
+import NavChild from "@/components/NavChild.vue";
 
-export default defineComponent({
-  components: {
-    IonButtons,
-    IonButton,
-    IonContent,
-    IonHeader,
-    IonTitle,
-    IonToolbar
-  },
-  methods: {
-    pushPage: function() {
-      const ionNav = document.querySelector('ion-nav') as any;
-      ionNav.push(NavChild, { title: 'Custom Title' });
-    },
-    dismiss: async function() {
-      await modalController.dismiss();
-    }
-  }
-})
+defineProps<{
+  message: string;
+}>();
+
+function pushPage() {
+  const ionNav = document.querySelector("ion-nav") as any;
+  ionNav.push(NavChild, { title: "Custom Title" });
+}
+
+async function dismiss() {
+  await modalController.dismiss();
+}
 </script>
diff --git a/packages/vue/test/base/tests/e2e/specs/navigation.cy.js b/packages/vue/test/base/tests/e2e/specs/navigation.cy.js
index d8f75e7163..25788bf759 100644
--- a/packages/vue/test/base/tests/e2e/specs/navigation.cy.js
+++ b/packages/vue/test/base/tests/e2e/specs/navigation.cy.js
@@ -10,4 +10,10 @@ describe('Navigation', () => {
 
     cy.get('#nav-child-content').should('have.text', 'Custom Title');
   });
+
+  it('nav should support kebab-case root-params', () => {
+    cy.get('#open-nav-modal').click();
+
+    cy.get('#nav-root-params').should('have.text', 'Message: Hello World!');
+  });
 });