diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
index f03ac0d62f..9c913dccf9 100644
--- a/.github/CODEOWNERS
+++ b/.github/CODEOWNERS
@@ -15,9 +15,9 @@
 
 ## Angular
 
-/angular/ @sean-perkins
+/packages/angular/ @sean-perkins
 /packages/angular-server @sean-perkins
-/angular/test
+/packages/angular/test
 
 ## React
 
diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md
index 55ebcda299..a9a62f7542 100644
--- a/.github/CONTRIBUTING.md
+++ b/.github/CONTRIBUTING.md
@@ -295,7 +295,7 @@ See [Ionic's E2E testing guide](../core/src/utils/test/playwright/docs/README.md
 #### Modifying Files
 
 1. Locate the files inside the relevant root directory:
-  - Angular: [`/angular/src`](/angular/src)
+  - Angular: [`/packages/angular/src`](/packages/angular/src)
   - React: [`/packages/react/src`](/packages/react/src)
   - Vue: [`/packages/vue/src`](/packages/vue/src)
 2. Make your changes to the files. If the change is overly complex or out of the ordinary, add comments so we can understand the changes.
@@ -311,7 +311,7 @@ See [Ionic's E2E testing guide](../core/src/utils/test/playwright/docs/README.md
 ##### Previewing in this repository
 
 Follow the steps in the test directory for each framework:
-  - Angular: [`/angular/test`](/angular/test/README.md)
+  - Angular: [`/packages/angular/test`](/packages/angular/test/README.md)
   - React: [`/packages/react/test`](/packages/react/test/README.md)
   - Vue: [`/packages/vue/test`](/packages/vue/test/README.md)
 
@@ -322,7 +322,7 @@ Follow the steps to [preview changes in core](#preview-changes).
 #### Lint Changes
 
 1. Run `npm run lint` to lint the TypeScript in the relevant directory:
-  - Angular: [`/angular/src`](/angular/src)
+  - Angular: [`/packages/angular/src`](/packages/angular/src)
   - React: [`/packages/react/src`](/packages/react/src)
   - Vue: [`/packages/vue/src`](/packages/vue/src)
 2. If there are lint errors, run `npm run lint.fix` to automatically fix any errors. Repeat step 1 to ensure the errors have been fixed, and manually fix them if not.
@@ -330,7 +330,7 @@ Follow the steps to [preview changes in core](#preview-changes).
 #### Modifying Tests
 
 1. Locate the e2e test to modify inside the relevant test app directory:
-  - Angular: [`/angular/test/base/e2e/src`](/angular/test/base/e2e/src)
+  - Angular: [`/packages/angular/test/base/e2e/src`](/packages/angular/test/base/e2e/src)
   - React: [`/packages/react/test/base/tests/e2e/specs`](/packages/react/test/base/tests/e2e/specs)
   - Vue: [`/packages/vue/test/base/tests/e2e/specs`](/packages/vue/test/base/tests/e2e/specs)
 2. If a test exists, modify the test by adding an example to reproduce the problem fixed or feature added.
diff --git a/.github/labeler.yml b/.github/labeler.yml
index c39479e679..545025db58 100644
--- a/.github/labeler.yml
+++ b/.github/labeler.yml
@@ -9,7 +9,7 @@
   - core/**/*
 
 'package: angular':
-  - angular/**/*
+  - packages/angular/**/*
   - packages/angular-*/**/*
 
 'package: react':
diff --git a/.github/workflows/actions/build-angular/action.yml b/.github/workflows/actions/build-angular/action.yml
index 121c37896b..3e07cda394 100644
--- a/.github/workflows/actions/build-angular/action.yml
+++ b/.github/workflows/actions/build-angular/action.yml
@@ -14,25 +14,25 @@ runs:
     - name: Install Angular Dependencies
       run: npm ci
       shell: bash
-      working-directory: ./angular
+      working-directory: ./packages/angular
     - name: Sync
       run: npm run sync
       shell: bash
-      working-directory: ./angular
+      working-directory: ./packages/angular
     - name: Lint
       run: npm run lint
       shell: bash
-      working-directory: ./angular
+      working-directory: ./packages/angular
     - name: Build
       run: npm run build
       shell: bash
-      working-directory: ./angular
+      working-directory: ./packages/angular
     - name: Check Diff
       run: git diff --exit-code
       shell: bash
-      working-directory: ./angular
+      working-directory: ./packages/angular
     - uses: ./.github/workflows/actions/upload-archive
       with:
         name: ionic-angular
-        output: ./angular/AngularBuild.zip
-        paths: ./angular/dist
+        output: ./packages/angular/AngularBuild.zip
+        paths: ./packages/angular/dist
diff --git a/.github/workflows/actions/publish-npm/action.yml b/.github/workflows/actions/publish-npm/action.yml
index 4022753792..fb0680d204 100644
--- a/.github/workflows/actions/publish-npm/action.yml
+++ b/.github/workflows/actions/publish-npm/action.yml
@@ -22,6 +22,10 @@ runs:
     - uses: actions/setup-node@v3
       with:
         node-version: 16.x
+    # Provenance requires npm 9.5.0+
+    - name: Install latest npm
+      run: npm install -g npm@latest
+      shell: bash
     # This ensures the local version of Lerna is installed
     # and that we do not use the global Lerna version
     - name: Install root dependencies
diff --git a/.github/workflows/actions/test-angular-e2e/action.yml b/.github/workflows/actions/test-angular-e2e/action.yml
index 6e734a9765..8225a93ea8 100644
--- a/.github/workflows/actions/test-angular-e2e/action.yml
+++ b/.github/workflows/actions/test-angular-e2e/action.yml
@@ -27,16 +27,16 @@ runs:
     - name: Create Test App
       run: ./build.sh ${{ inputs.app }}
       shell: bash
-      working-directory: ./angular/test
+      working-directory: ./packages/angular/test
     - name: Install Dependencies
       run: npm install
       shell: bash
-      working-directory: ./angular/test/build/${{ inputs.app }}
+      working-directory: ./packages/angular/test/build/${{ inputs.app }}
     - name: Sync Built Changes
       run: npm run sync
       shell: bash
-      working-directory: ./angular/test/build/${{ inputs.app }}
+      working-directory: ./packages/angular/test/build/${{ inputs.app }}
     - name: Run Tests
       run: npm run test
       shell: bash
-      working-directory: ./angular/test/build/${{ inputs.app }}
+      working-directory: ./packages/angular/test/build/${{ inputs.app }}
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
index bbe12728ea..fe8f9f2e2d 100644
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@@ -122,7 +122,7 @@ jobs:
     - uses: ./.github/workflows/actions/build-angular
 
   build-angular-server:
-    needs: [build-angular]
+    needs: [build-core]
     runs-on: ubuntu-latest
     steps:
     - uses: actions/checkout@v3
diff --git a/.github/workflows/release-ionic.yml b/.github/workflows/release-ionic.yml
index 43aedeebe4..b6be9a446b 100644
--- a/.github/workflows/release-ionic.yml
+++ b/.github/workflows/release-ionic.yml
@@ -81,15 +81,15 @@ jobs:
         tag: ${{ inputs.tag }}
         version: ${{ inputs.version }}
         preid: ${{ inputs.preid }}
-        working-directory: 'angular'
+        working-directory: 'packages/angular'
         folder: './dist'
         token: ${{ secrets.NPM_TOKEN }}
     - name: Cache Built @ionic/angular
       uses: ./.github/workflows/actions/upload-archive
       with:
         name: ionic-angular
-        output: ./angular/AngularBuild.zip
-        paths: ./angular/dist
+        output: packages/angular/AngularBuild.zip
+        paths: packages/angular/dist
 
   release-react:
     needs: [release-core]
@@ -144,7 +144,7 @@ jobs:
         paths: packages/vue/dist packages/vue/css
 
   release-angular-server:
-    needs: [release-angular]
+    needs: [release-core]
     runs-on: ubuntu-latest
     steps:
     - uses: actions/checkout@v3
@@ -154,12 +154,6 @@ jobs:
         name: ionic-core
         path: ./core
         filename: CoreBuild.zip
-    - name: Restore @ionic/angular built cache
-      uses: ./.github/workflows/actions/download-archive
-      with:
-        name: ionic-angular
-        path: ./angular
-        filename: AngularBuild.zip
     - uses: ./.github/workflows/actions/publish-npm
       with:
         scope: '@ionic/angular-server'
diff --git a/.github/workflows/stencil-nightly.yml b/.github/workflows/stencil-nightly.yml
index 404cb22e5b..daa138b779 100644
--- a/.github/workflows/stencil-nightly.yml
+++ b/.github/workflows/stencil-nightly.yml
@@ -133,7 +133,7 @@ jobs:
     - uses: ./.github/workflows/actions/build-angular
 
   build-angular-server:
-    needs: [build-angular]
+    needs: [build-core-with-stencil-nightly]
     runs-on: ubuntu-latest
     steps:
     - uses: actions/checkout@v3
diff --git a/.github/workflows/stencil-v4.yml b/.github/workflows/stencil-v4.yml
deleted file mode 100644
index afab1d97d2..0000000000
--- a/.github/workflows/stencil-v4.yml
+++ /dev/null
@@ -1,220 +0,0 @@
-# This workflow is intended to run against the `HEAD` of Stencil's primary branch.
-# See https://github.com/ionic-team/stencil for contents of the repository
-name: 'Stencil v4 Build'
-
-on:
-  schedule:
-    # Run every Monday-Friday
-    # at 6:00 UTC (6:00 am UTC)
-    - cron: '00 06 * * 1-5'
-  workflow_dispatch:
-    # allows for manual invocations in the GitHub UI
-
-# When pushing a new commit we should
-# cancel the previous test run to not
-# consume more runners than we need to.
-concurrency:
-  group: ${{ github.ref }}
-  cancel-in-progress: false
-
-jobs:
-  build-core-with-stencil-v4:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-      - uses: ./.github/workflows/actions/build-core-stencil-prerelease
-        with:
-          stencil-version: v4-next
-
-  test-core-clean-build:
-    needs: [build-core-with-stencil-v4]
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-      - uses: ./.github/workflows/actions/test-core-clean-build
-
-  test-core-lint:
-    needs: [build-core-with-stencil-v4]
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-      - uses: ./.github/workflows/actions/test-core-lint
-
-  test-core-spec:
-    needs: [build-core-with-stencil-v4]
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-      - uses: ./.github/workflows/actions/test-core-spec
-
-  test-core-screenshot:
-    strategy:
-      # This ensures that all screenshot shard
-      # failures are reported so the dev can
-      # review everything at once.
-      fail-fast: false
-      matrix:
-        # Divide the tests into n buckets
-        # and run those buckets in parallel.
-        # To increase the number of shards,
-        # add new items to the shard array
-        # and change the value of totalShards
-        # to be the length of the shard array.
-        shard: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]
-        totalShards: [20]
-    needs: [build-core-with-stencil-v4]
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-      - uses: ./.github/workflows/actions/test-core-screenshot
-        with:
-          shard: ${{ matrix.shard }}
-          totalShards: ${{ matrix.totalShards }}
-
-  # Screenshots are required to pass
-  # in order for the branch to be merge
-  # eligible. However, the screenshot tests
-  # are run on n runners where n can change
-  # over time. The verify-screenshots step allows
-  # us to have a required status check for screenshot
-  # results without having to manually add each
-  # matrix run in the branch protection rules
-  # Source: https://github.community/t/status-check-for-a-matrix-jobs/127354
-  verify-screenshots:
-    if: ${{ always() }}
-    needs: test-core-screenshot
-    runs-on: ubuntu-latest
-    steps:
-      - name: Check build matrix status
-        if: ${{ needs.test-core-screenshot.result != 'success' }}
-        run: exit 1
-
-  build-vue:
-    needs: [build-core-with-stencil-v4]
-    runs-on: ubuntu-latest
-    steps:
-    - uses: actions/checkout@v3
-    - uses: ./.github/workflows/actions/build-vue
-
-  build-vue-router:
-    needs: [build-vue]
-    runs-on: ubuntu-latest
-    steps:
-    - uses: actions/checkout@v3
-    - uses: ./.github/workflows/actions/build-vue-router
-
-  test-vue-e2e:
-    strategy:
-      fail-fast: false
-      matrix:
-        apps: [vue3]
-    needs: [build-vue, build-vue-router]
-    runs-on: ubuntu-latest
-    steps:
-    - uses: actions/checkout@v3
-    - uses: ./.github/workflows/actions/test-vue-e2e
-      with:
-        app: ${{ matrix.apps }}
-
-  verify-test-vue-e2e:
-    if: ${{ always() }}
-    needs: test-vue-e2e
-    runs-on: ubuntu-latest
-    steps:
-      - name: Check build matrix status
-        if: ${{ needs.test-vue-e2e.result != 'success' }}
-        run: exit 1
-
-  build-angular:
-    needs: [build-core-with-stencil-v4]
-    runs-on: ubuntu-latest
-    steps:
-    - uses: actions/checkout@v3
-    - uses: ./.github/workflows/actions/build-angular
-
-  build-angular-server:
-    needs: [build-angular]
-    runs-on: ubuntu-latest
-    steps:
-    - uses: actions/checkout@v3
-    - uses: ./.github/workflows/actions/build-angular-server
-
-  test-angular-e2e:
-    strategy:
-      fail-fast: false
-      matrix:
-        apps: [ng12, ng13, ng14, ng15]
-    needs: [build-angular, build-angular-server]
-    runs-on: ubuntu-latest
-    steps:
-    - uses: actions/checkout@v3
-    - uses: ./.github/workflows/actions/test-angular-e2e
-      with:
-        app: ${{ matrix.apps }}
-
-  verify-test-angular-e2e:
-    if: ${{ always() }}
-    needs: test-angular-e2e
-    runs-on: ubuntu-latest
-    steps:
-      - name: Check build matrix status
-        if: ${{ needs.test-angular-e2e.result != 'success' }}
-        run: exit 1
-
-  build-react:
-    needs: [build-core-with-stencil-v4]
-    runs-on: ubuntu-latest
-    steps:
-    - uses: actions/checkout@v3
-    - uses: ./.github/workflows/actions/build-react
-
-  build-react-router:
-    needs: [build-react]
-    runs-on: ubuntu-latest
-    steps:
-    - uses: actions/checkout@v3
-    - uses: ./.github/workflows/actions/build-react-router
-
-  test-react-router-e2e:
-    strategy:
-      fail-fast: false
-      matrix:
-        apps: [reactrouter5]
-    needs: [build-react, build-react-router]
-    runs-on: ubuntu-latest
-    steps:
-    - uses: actions/checkout@v3
-    - uses: ./.github/workflows/actions/test-react-router-e2e
-      with:
-        app: ${{ matrix.apps }}
-
-  verify-test-react-router-e2e:
-    if: ${{ always() }}
-    needs: test-react-router-e2e
-    runs-on: ubuntu-latest
-    steps:
-      - name: Check build matrix status
-        if: ${{ needs.test-react-router-e2e.result != 'success' }}
-        run: exit 1
-
-  test-react-e2e:
-    strategy:
-      fail-fast: false
-      matrix:
-        apps: [react17, react18]
-    needs: [build-react, build-react-router]
-    runs-on: ubuntu-latest
-    steps:
-    - uses: actions/checkout@v3
-    - uses: ./.github/workflows/actions/test-react-e2e
-      with:
-        app: ${{ matrix.apps }}
-
-  verify-test-react-e2e:
-    if: ${{ always() }}
-    needs: test-react-e2e
-    runs-on: ubuntu-latest
-    steps:
-      - name: Check build matrix status
-        if: ${{ needs.test-react-e2e.result != 'success' }}
-        run: exit 1
diff --git a/.gitignore b/.gitignore
index f6f448fb67..ec9a5f272d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -71,8 +71,8 @@ core/playwright-report/
 core/**/*-snapshots
 
 # angular
-angular/css/
-angular/test/build/
+packages/angular/css/
+packages/angular/test/build/
 .angular/
 
 # vue
diff --git a/CHANGELOG.md b/CHANGELOG.md
index d1dc4bd7d1..f25b4d1b95 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,70 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [7.1.3](https://github.com/ionic-team/ionic-framework/compare/v7.1.2...v7.1.3) (2023-07-12)
+
+
+### Bug Fixes
+
+* avoid unresolved import warning on stencil apps ([#27765](https://github.com/ionic-team/ionic-framework/issues/27765)) ([2085025](https://github.com/ionic-team/ionic-framework/commit/2085025644f075e63d04bece56eca4f2beeadbb6)), closes [#27762](https://github.com/ionic-team/ionic-framework/issues/27762)
+* **overlays:** first button is not focused on backdrop tap ([#27774](https://github.com/ionic-team/ionic-framework/issues/27774)) ([82c568b](https://github.com/ionic-team/ionic-framework/commit/82c568b8c8e1e9934e1928452aa5216619290e7b)), closes [#27773](https://github.com/ionic-team/ionic-framework/issues/27773)
+
+
+
+
+
+## [7.1.2](https://github.com/ionic-team/ionic-framework/compare/v7.1.1...v7.1.2) (2023-07-06)
+
+
+### Bug Fixes
+
+* **back-button:** show correct background on focus + hover with ios ([#27723](https://github.com/ionic-team/ionic-framework/issues/27723)) ([db9a001](https://github.com/ionic-team/ionic-framework/commit/db9a0010df3c7fd0fcd0dbcd8c4ad3b30d022b5c)), closes [#27722](https://github.com/ionic-team/ionic-framework/issues/27722)
+* **nav:** root component is mounted with root params ([#27676](https://github.com/ionic-team/ionic-framework/issues/27676)) ([1f06be4](https://github.com/ionic-team/ionic-framework/commit/1f06be4a31965f2a949b4866a585aee6af0af29d)), closes [#27146](https://github.com/ionic-team/ionic-framework/issues/27146)
+
+
+
+
+
+## [7.1.1](https://github.com/ionic-team/ionic-framework/compare/v7.1.0...v7.1.1) (2023-06-26)
+
+
+### Bug Fixes
+
+* **textarea:** autogrow resizes correctly ([#27691](https://github.com/ionic-team/ionic-framework/issues/27691)) ([f263611](https://github.com/ionic-team/ionic-framework/commit/f263611260c465bfeefc2db7b1ea04bfa5b54303)), closes [#27688](https://github.com/ionic-team/ionic-framework/issues/27688)
+
+
+
+
+
+# [7.1.0](https://github.com/ionic-team/ionic-framework/compare/v7.0.14...v7.1.0) (2023-06-21)
+
+
+### Bug Fixes
+
+* **angular:** tabs supports conditional slot bindings ([#27582](https://github.com/ionic-team/ionic-framework/issues/27582)) ([d20bea5](https://github.com/ionic-team/ionic-framework/commit/d20bea561c362eacd250cdedbc9b79159eb2c95f)), closes [#19484](https://github.com/ionic-team/ionic-framework/issues/19484)
+* **datetime:** ascending order for years ([#27551](https://github.com/ionic-team/ionic-framework/issues/27551)) ([2098806](https://github.com/ionic-team/ionic-framework/commit/209880622a4600f88c4878e82975ad0492bd55db)), closes [#27422](https://github.com/ionic-team/ionic-framework/issues/27422)
+* import paths ([d10509f](https://github.com/ionic-team/ionic-framework/commit/d10509f84099515f62c895dcd736cc387e382bde))
+* **select:** hide notch cutout if no visible label provided ([#27649](https://github.com/ionic-team/ionic-framework/issues/27649)) ([606a892](https://github.com/ionic-team/ionic-framework/commit/606a892e400a531cac5c413dc7492a54ae0e1fea))
+
+
+### Features
+
+* **datetime:** add part for month/year button ([#27618](https://github.com/ionic-team/ionic-framework/issues/27618)) ([d44422e](https://github.com/ionic-team/ionic-framework/commit/d44422e224374804010746a12f398d3c0d6a9f2c)), closes [#26596](https://github.com/ionic-team/ionic-framework/issues/26596)
+* **datetime:** add shadow parts and CSS variables for styling wheel pickers ([#27529](https://github.com/ionic-team/ionic-framework/issues/27529)) ([f2c1845](https://github.com/ionic-team/ionic-framework/commit/f2c1845fba11d8273331c601052f0f34457b6649)), closes [#25945](https://github.com/ionic-team/ionic-framework/issues/25945)
+* **input:** add experimental label slot ([#27650](https://github.com/ionic-team/ionic-framework/issues/27650)) ([a45395c](https://github.com/ionic-team/ionic-framework/commit/a45395cc02b2617b80e6c2389fa745e7c20540fc)), closes [#27061](https://github.com/ionic-team/ionic-framework/issues/27061)
+* **range:** add label prop ([#27408](https://github.com/ionic-team/ionic-framework/issues/27408)) ([368add2](https://github.com/ionic-team/ionic-framework/commit/368add2a5ca3820a1f9623c96d29bcccfa693fdc))
+* return if the pop on NavController was successful ([#27404](https://github.com/ionic-team/ionic-framework/issues/27404)) ([e80f0b2](https://github.com/ionic-team/ionic-framework/commit/e80f0b240968de0d642463e95a35adf8dbffd2e1)), closes [#27403](https://github.com/ionic-team/ionic-framework/issues/27403)
+* **segment, segment-button:** update segment value property to accept numbers ([#27222](https://github.com/ionic-team/ionic-framework/issues/27222)) ([ec95ae5](https://github.com/ionic-team/ionic-framework/commit/ec95ae5cd38e3d2b9ec9fdbc9e237fa1241f7a4e)), closes [#27221](https://github.com/ionic-team/ionic-framework/issues/27221)
+* **segment:** display segment as a grid and add an ellipsis to overflowing text in a segment button  ([#27457](https://github.com/ionic-team/ionic-framework/issues/27457)) ([448e63f](https://github.com/ionic-team/ionic-framework/commit/448e63fef0aca603214cb357dec37e1db2a0f052)), closes [#16532](https://github.com/ionic-team/ionic-framework/issues/16532)
+* **select:** add label slot ([#27545](https://github.com/ionic-team/ionic-framework/issues/27545)) ([af92cb2](https://github.com/ionic-team/ionic-framework/commit/af92cb28c8819c88b40192b5dcbafedc1eb2064a)), closes [#26838](https://github.com/ionic-team/ionic-framework/issues/26838)
+* **select:** add props to customize toggle icons ([#27648](https://github.com/ionic-team/ionic-framework/issues/27648)) ([95e28b6](https://github.com/ionic-team/ionic-framework/commit/95e28b6629843af7dce62f20bc8e31adfb391990)), closes [#17248](https://github.com/ionic-team/ionic-framework/issues/17248)
+* **select:** expose container and label as CSS parts  ([#27541](https://github.com/ionic-team/ionic-framework/issues/27541)) ([5c10f88](https://github.com/ionic-team/ionic-framework/commit/5c10f88b2eb4d869966ea9a6d1db34185cefe676)), closes [#27112](https://github.com/ionic-team/ionic-framework/issues/27112)
+* **textarea:** add experimental label slot ([#27677](https://github.com/ionic-team/ionic-framework/issues/27677)) ([8bcd9e8](https://github.com/ionic-team/ionic-framework/commit/8bcd9e8b35f252a4efaec7a7be7d69a70beefa9f)), closes [#27061](https://github.com/ionic-team/ionic-framework/issues/27061)
+
+
+
+
+
 ## [7.0.14](https://github.com/ionic-team/ionic-framework/compare/v7.0.13...v7.0.14) (2023-06-15)
 
 
diff --git a/angular/test/apps/ng16/src/app/version-test/version-test-routing.module.ts b/angular/test/apps/ng16/src/app/version-test/version-test-routing.module.ts
deleted file mode 100644
index be335bd1af..0000000000
--- a/angular/test/apps/ng16/src/app/version-test/version-test-routing.module.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { NgModule } from "@angular/core";
-import { RouterModule } from "@angular/router";
-
-@NgModule({
-  imports: [
-    RouterModule.forChild([])
-  ],
-  exports: [RouterModule]
-})
-export class VersionTestRoutingModule { }
diff --git a/core/CHANGELOG.md b/core/CHANGELOG.md
index 7f8da3069c..278da208d8 100644
--- a/core/CHANGELOG.md
+++ b/core/CHANGELOG.md
@@ -3,6 +3,67 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [7.1.3](https://github.com/ionic-team/ionic-framework/compare/v7.1.2...v7.1.3) (2023-07-12)
+
+
+### Bug Fixes
+
+* avoid unresolved import warning on stencil apps ([#27765](https://github.com/ionic-team/ionic-framework/issues/27765)) ([2085025](https://github.com/ionic-team/ionic-framework/commit/2085025644f075e63d04bece56eca4f2beeadbb6)), closes [#27762](https://github.com/ionic-team/ionic-framework/issues/27762)
+* **overlays:** first button is not focused on backdrop tap ([#27774](https://github.com/ionic-team/ionic-framework/issues/27774)) ([82c568b](https://github.com/ionic-team/ionic-framework/commit/82c568b8c8e1e9934e1928452aa5216619290e7b)), closes [#27773](https://github.com/ionic-team/ionic-framework/issues/27773)
+
+
+
+
+
+## [7.1.2](https://github.com/ionic-team/ionic-framework/compare/v7.1.1...v7.1.2) (2023-07-06)
+
+
+### Bug Fixes
+
+* **back-button:** show correct background on focus + hover with ios ([#27723](https://github.com/ionic-team/ionic-framework/issues/27723)) ([db9a001](https://github.com/ionic-team/ionic-framework/commit/db9a0010df3c7fd0fcd0dbcd8c4ad3b30d022b5c)), closes [#27722](https://github.com/ionic-team/ionic-framework/issues/27722)
+* **nav:** root component is mounted with root params ([#27676](https://github.com/ionic-team/ionic-framework/issues/27676)) ([1f06be4](https://github.com/ionic-team/ionic-framework/commit/1f06be4a31965f2a949b4866a585aee6af0af29d)), closes [#27146](https://github.com/ionic-team/ionic-framework/issues/27146)
+
+
+
+
+
+## [7.1.1](https://github.com/ionic-team/ionic-framework/compare/v7.1.0...v7.1.1) (2023-06-26)
+
+
+### Bug Fixes
+
+* **textarea:** autogrow resizes correctly ([#27691](https://github.com/ionic-team/ionic-framework/issues/27691)) ([f263611](https://github.com/ionic-team/ionic-framework/commit/f263611260c465bfeefc2db7b1ea04bfa5b54303)), closes [#27688](https://github.com/ionic-team/ionic-framework/issues/27688)
+
+
+
+
+
+# [7.1.0](https://github.com/ionic-team/ionic-framework/compare/v7.0.14...v7.1.0) (2023-06-21)
+
+
+### Bug Fixes
+
+* **datetime:** ascending order for years ([#27551](https://github.com/ionic-team/ionic-framework/issues/27551)) ([2098806](https://github.com/ionic-team/ionic-framework/commit/209880622a4600f88c4878e82975ad0492bd55db)), closes [#27422](https://github.com/ionic-team/ionic-framework/issues/27422)
+* **select:** hide notch cutout if no visible label provided ([#27649](https://github.com/ionic-team/ionic-framework/issues/27649)) ([606a892](https://github.com/ionic-team/ionic-framework/commit/606a892e400a531cac5c413dc7492a54ae0e1fea))
+
+
+### Features
+
+* **datetime:** add part for month/year button ([#27618](https://github.com/ionic-team/ionic-framework/issues/27618)) ([d44422e](https://github.com/ionic-team/ionic-framework/commit/d44422e224374804010746a12f398d3c0d6a9f2c)), closes [#26596](https://github.com/ionic-team/ionic-framework/issues/26596)
+* **datetime:** add shadow parts and CSS variables for styling wheel pickers ([#27529](https://github.com/ionic-team/ionic-framework/issues/27529)) ([f2c1845](https://github.com/ionic-team/ionic-framework/commit/f2c1845fba11d8273331c601052f0f34457b6649)), closes [#25945](https://github.com/ionic-team/ionic-framework/issues/25945)
+* **input:** add experimental label slot ([#27650](https://github.com/ionic-team/ionic-framework/issues/27650)) ([a45395c](https://github.com/ionic-team/ionic-framework/commit/a45395cc02b2617b80e6c2389fa745e7c20540fc)), closes [#27061](https://github.com/ionic-team/ionic-framework/issues/27061)
+* **range:** add label prop ([#27408](https://github.com/ionic-team/ionic-framework/issues/27408)) ([368add2](https://github.com/ionic-team/ionic-framework/commit/368add2a5ca3820a1f9623c96d29bcccfa693fdc))
+* **segment, segment-button:** update segment value property to accept numbers ([#27222](https://github.com/ionic-team/ionic-framework/issues/27222)) ([ec95ae5](https://github.com/ionic-team/ionic-framework/commit/ec95ae5cd38e3d2b9ec9fdbc9e237fa1241f7a4e)), closes [#27221](https://github.com/ionic-team/ionic-framework/issues/27221)
+* **segment:** display segment as a grid and add an ellipsis to overflowing text in a segment button  ([#27457](https://github.com/ionic-team/ionic-framework/issues/27457)) ([448e63f](https://github.com/ionic-team/ionic-framework/commit/448e63fef0aca603214cb357dec37e1db2a0f052)), closes [#16532](https://github.com/ionic-team/ionic-framework/issues/16532)
+* **select:** add label slot ([#27545](https://github.com/ionic-team/ionic-framework/issues/27545)) ([af92cb2](https://github.com/ionic-team/ionic-framework/commit/af92cb28c8819c88b40192b5dcbafedc1eb2064a)), closes [#26838](https://github.com/ionic-team/ionic-framework/issues/26838)
+* **select:** add props to customize toggle icons ([#27648](https://github.com/ionic-team/ionic-framework/issues/27648)) ([95e28b6](https://github.com/ionic-team/ionic-framework/commit/95e28b6629843af7dce62f20bc8e31adfb391990)), closes [#17248](https://github.com/ionic-team/ionic-framework/issues/17248)
+* **select:** expose container and label as CSS parts  ([#27541](https://github.com/ionic-team/ionic-framework/issues/27541)) ([5c10f88](https://github.com/ionic-team/ionic-framework/commit/5c10f88b2eb4d869966ea9a6d1db34185cefe676)), closes [#27112](https://github.com/ionic-team/ionic-framework/issues/27112)
+* **textarea:** add experimental label slot ([#27677](https://github.com/ionic-team/ionic-framework/issues/27677)) ([8bcd9e8](https://github.com/ionic-team/ionic-framework/commit/8bcd9e8b35f252a4efaec7a7be7d69a70beefa9f)), closes [#27061](https://github.com/ionic-team/ionic-framework/issues/27061)
+
+
+
+
+
 ## [7.0.14](https://github.com/ionic-team/ionic-framework/compare/v7.0.13...v7.0.14) (2023-06-15)
 
 
diff --git a/core/api.txt b/core/api.txt
index f25a05b642..eecee0c71f 100644
--- a/core/api.txt
+++ b/core/api.txt
@@ -425,6 +425,13 @@ ion-datetime,event,ionFocus,void,true
 ion-datetime,css-prop,--background
 ion-datetime,css-prop,--background-rgb
 ion-datetime,css-prop,--title-color
+ion-datetime,css-prop,--wheel-fade-background-rgb
+ion-datetime,css-prop,--wheel-highlight-background
+ion-datetime,part,month-year-button
+ion-datetime,part,time-button
+ion-datetime,part,time-button active
+ion-datetime,part,wheel-item
+ion-datetime,part,wheel-item active
 
 ion-datetime-button,shadow
 ion-datetime-button,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,'primary',false,true
@@ -1030,6 +1037,7 @@ ion-range,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secon
 ion-range,prop,debounce,number | undefined,undefined,false,false
 ion-range,prop,disabled,boolean,false,false,false
 ion-range,prop,dualKnobs,boolean,false,false,false
+ion-range,prop,label,string | undefined,undefined,false,false
 ion-range,prop,labelPlacement,"end" | "fixed" | "start",'start',false,false
 ion-range,prop,legacy,boolean | undefined,undefined,false,false
 ion-range,prop,max,number,100,false,false
@@ -1183,7 +1191,7 @@ ion-segment,prop,mode,"ios" | "md",undefined,false,false
 ion-segment,prop,scrollable,boolean,false,false,false
 ion-segment,prop,selectOnFocus,boolean,false,false,false
 ion-segment,prop,swipeGesture,boolean,true,false,false
-ion-segment,prop,value,string | undefined,undefined,false,false
+ion-segment,prop,value,number | string | undefined,undefined,false,false
 ion-segment,event,ionChange,SegmentChangeEventDetail,true
 ion-segment,css-prop,--background
 
@@ -1192,7 +1200,7 @@ ion-segment-button,prop,disabled,boolean,false,false,false
 ion-segment-button,prop,layout,"icon-bottom" | "icon-end" | "icon-hide" | "icon-start" | "icon-top" | "label-hide" | undefined,'icon-top',false,false
 ion-segment-button,prop,mode,"ios" | "md",undefined,false,false
 ion-segment-button,prop,type,"button" | "reset" | "submit",'button',false,false
-ion-segment-button,prop,value,string,'ion-sb-' + ids++,false,false
+ion-segment-button,prop,value,number | string,'ion-sb-' + ids++,false,false
 ion-segment-button,css-prop,--background
 ion-segment-button,css-prop,--background-checked
 ion-segment-button,css-prop,--background-focused
@@ -1230,6 +1238,7 @@ ion-select,prop,cancelText,string,'Cancel',false,false
 ion-select,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
 ion-select,prop,compareWith,((currentValue: any, compareValue: any) => boolean) | null | string | undefined,undefined,false,false
 ion-select,prop,disabled,boolean,false,false,false
+ion-select,prop,expandedIcon,string | undefined,undefined,false,false
 ion-select,prop,fill,"outline" | "solid" | undefined,undefined,false,false
 ion-select,prop,interface,"action-sheet" | "alert" | "popover",'alert',false,false
 ion-select,prop,interfaceOptions,any,{},false,false
@@ -1244,6 +1253,7 @@ ion-select,prop,okText,string,'OK',false,false
 ion-select,prop,placeholder,string | undefined,undefined,false,false
 ion-select,prop,selectedText,null | string | undefined,undefined,false,false
 ion-select,prop,shape,"round" | undefined,undefined,false,false
+ion-select,prop,toggleIcon,string | undefined,undefined,false,false
 ion-select,prop,value,any,undefined,false,false
 ion-select,method,open,open(event?: UIEvent) => Promise<any>
 ion-select,event,ionBlur,void,true
@@ -1266,7 +1276,9 @@ ion-select,css-prop,--padding-top
 ion-select,css-prop,--placeholder-color
 ion-select,css-prop,--placeholder-opacity
 ion-select,css-prop,--ripple-color
+ion-select,part,container
 ion-select,part,icon
+ion-select,part,label
 ion-select,part,placeholder
 ion-select,part,text
 
diff --git a/core/package-lock.json b/core/package-lock.json
index 752f795921..cf2db537ae 100644
--- a/core/package-lock.json
+++ b/core/package-lock.json
@@ -1,16 +1,16 @@
 {
   "name": "@ionic/core",
-  "version": "7.0.14",
+  "version": "7.1.3",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/core",
-      "version": "7.0.14",
+      "version": "7.1.3",
       "license": "MIT",
       "dependencies": {
         "@stencil/core": "^3.4.0",
-        "ionicons": "^7.1.0",
+        "ionicons": "7.1.0",
         "tslib": "^2.1.0"
       },
       "devDependencies": {
@@ -18,7 +18,7 @@
         "@ionic/eslint-config": "^0.3.0",
         "@ionic/prettier-config": "^2.0.0",
         "@jest/core": "^27.5.1",
-        "@playwright/test": "^1.35.1",
+        "@playwright/test": "^1.36.0",
         "@rollup/plugin-node-resolve": "^8.4.0",
         "@rollup/plugin-virtual": "^2.0.3",
         "@stencil/angular-output-target": "^0.7.1",
@@ -1501,13 +1501,13 @@
       }
     },
     "node_modules/@playwright/test": {
-      "version": "1.35.1",
-      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.35.1.tgz",
-      "integrity": "sha512-b5YoFe6J9exsMYg0pQAobNDR85T1nLumUYgUTtKm4d21iX2L7WqKq9dW8NGJ+2vX0etZd+Y7UeuqsxDXm9+5ZA==",
+      "version": "1.36.0",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.36.0.tgz",
+      "integrity": "sha512-yN+fvMYtiyLFDCQos+lWzoX4XW3DNuaxjBu68G0lkgLgC6BP+m/iTxJQoSicz/x2G5EsrqlZTqTIP9sTgLQerg==",
       "dev": true,
       "dependencies": {
         "@types/node": "*",
-        "playwright-core": "1.35.1"
+        "playwright-core": "1.36.0"
       },
       "bin": {
         "playwright": "cli.js"
@@ -8150,9 +8150,9 @@
       }
     },
     "node_modules/playwright-core": {
-      "version": "1.35.1",
-      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.35.1.tgz",
-      "integrity": "sha512-pNXb6CQ7OqmGDRspEjlxE49w+4YtR6a3X6mT1hZXeJHWmsEz7SunmvZeiG/+y1yyMZdHnnn73WKYdtV1er0Xyg==",
+      "version": "1.36.0",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.36.0.tgz",
+      "integrity": "sha512-7RTr8P6YJPAqB+8j5ATGHqD6LvLLM39sYVNsslh78g8QeLcBs5750c6+msjrHUwwGt+kEbczBj1XB22WMwn+WA==",
       "dev": true,
       "bin": {
         "playwright-core": "cli.js"
@@ -11381,14 +11381,14 @@
       }
     },
     "@playwright/test": {
-      "version": "1.35.1",
-      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.35.1.tgz",
-      "integrity": "sha512-b5YoFe6J9exsMYg0pQAobNDR85T1nLumUYgUTtKm4d21iX2L7WqKq9dW8NGJ+2vX0etZd+Y7UeuqsxDXm9+5ZA==",
+      "version": "1.36.0",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.36.0.tgz",
+      "integrity": "sha512-yN+fvMYtiyLFDCQos+lWzoX4XW3DNuaxjBu68G0lkgLgC6BP+m/iTxJQoSicz/x2G5EsrqlZTqTIP9sTgLQerg==",
       "dev": true,
       "requires": {
         "@types/node": "*",
         "fsevents": "2.3.2",
-        "playwright-core": "1.35.1"
+        "playwright-core": "1.36.0"
       }
     },
     "@rollup/plugin-node-resolve": {
@@ -16258,9 +16258,9 @@
       }
     },
     "playwright-core": {
-      "version": "1.35.1",
-      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.35.1.tgz",
-      "integrity": "sha512-pNXb6CQ7OqmGDRspEjlxE49w+4YtR6a3X6mT1hZXeJHWmsEz7SunmvZeiG/+y1yyMZdHnnn73WKYdtV1er0Xyg==",
+      "version": "1.36.0",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.36.0.tgz",
+      "integrity": "sha512-7RTr8P6YJPAqB+8j5ATGHqD6LvLLM39sYVNsslh78g8QeLcBs5750c6+msjrHUwwGt+kEbczBj1XB22WMwn+WA==",
       "dev": true
     },
     "postcss": {
diff --git a/core/package.json b/core/package.json
index 5a30b3663c..abc9dfa32e 100644
--- a/core/package.json
+++ b/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/core",
-  "version": "7.0.14",
+  "version": "7.1.3",
   "description": "Base components for Ionic",
   "keywords": [
     "ionic",
@@ -32,7 +32,7 @@
   ],
   "dependencies": {
     "@stencil/core": "^3.4.0",
-    "ionicons": "^7.1.0",
+    "ionicons": "7.1.0",
     "tslib": "^2.1.0"
   },
   "devDependencies": {
@@ -40,7 +40,7 @@
     "@ionic/eslint-config": "^0.3.0",
     "@ionic/prettier-config": "^2.0.0",
     "@jest/core": "^27.5.1",
-    "@playwright/test": "^1.35.1",
+    "@playwright/test": "^1.36.0",
     "@rollup/plugin-node-resolve": "^8.4.0",
     "@rollup/plugin-virtual": "^2.0.3",
     "@stencil/angular-output-target": "^0.7.1",
diff --git a/core/src/components.d.ts b/core/src/components.d.ts
index b61bac1a57..24f42a4887 100644
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
@@ -33,7 +33,7 @@ import { RefresherEventDetail } from "./components/refresher/refresher-interface
 import { ItemReorderEventDetail } from "./components/reorder-group/reorder-group-interface";
 import { NavigationHookCallback } from "./components/route/route-interface";
 import { SearchbarChangeEventDetail, SearchbarInputEventDetail } from "./components/searchbar/searchbar-interface";
-import { SegmentChangeEventDetail } from "./components/segment/segment-interface";
+import { SegmentChangeEventDetail, SegmentValue } from "./components/segment/segment-interface";
 import { SegmentButtonLayout } from "./components/segment-button/segment-button-interface";
 import { SelectChangeEventDetail, SelectCompareFn, SelectInterface } from "./components/select/select-interface";
 import { SelectPopoverOption } from "./components/select-popover/select-popover-interface";
@@ -69,7 +69,7 @@ export { RefresherEventDetail } from "./components/refresher/refresher-interface
 export { ItemReorderEventDetail } from "./components/reorder-group/reorder-group-interface";
 export { NavigationHookCallback } from "./components/route/route-interface";
 export { SearchbarChangeEventDetail, SearchbarInputEventDetail } from "./components/searchbar/searchbar-interface";
-export { SegmentChangeEventDetail } from "./components/segment/segment-interface";
+export { SegmentChangeEventDetail, SegmentValue } from "./components/segment/segment-interface";
 export { SegmentButtonLayout } from "./components/segment-button/segment-button-interface";
 export { SelectChangeEventDetail, SelectCompareFn, SelectInterface } from "./components/select/select-interface";
 export { SelectPopoverOption } from "./components/select-popover/select-popover-interface";
@@ -947,7 +947,7 @@ export namespace Components {
          */
         "value"?: string | string[] | null;
         /**
-          * Values used to create the list of selectable years. By default the year values range between the `min` and `max` datetime inputs. However, to control exactly which years to display, the `yearValues` input can take a number, an array of numbers, or string of comma separated numbers. For example, to show upcoming and recent leap years, then this input's value would be `yearValues="2024,2020,2016,2012,2008"`.
+          * Values used to create the list of selectable years. By default the year values range between the `min` and `max` datetime inputs. However, to control exactly which years to display, the `yearValues` input can take a number, an array of numbers, or string of comma separated numbers. For example, to show upcoming and recent leap years, then this input's value would be `yearValues="2008,2012,2016,2020,2024"`.
          */
         "yearValues"?: number[] | number | string;
     }
@@ -1214,7 +1214,7 @@ export namespace Components {
          */
         "inputmode"?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
         /**
-          * The visible label associated with the input.
+          * The visible label associated with the input.  Use this if you need to render a plaintext label.  The `label` property will take priority over the `label` slot if both are used.
          */
         "label"?: string;
         /**
@@ -2289,6 +2289,10 @@ export namespace Components {
           * Show two knobs.
          */
         "dualKnobs": boolean;
+        /**
+          * The text to display as the control's label. Use this over the `label` slot if you only need plain text. The `label` property will take priority over the `label` slot if both are used.
+         */
+        "label"?: string;
         /**
           * Where to place the label relative to the range. `"start"`: The label will appear to the left of the range in LTR and to the right in RTL. `"end"`: The label will appear to the right of the range in LTR and to the left in RTL. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("...").
          */
@@ -2635,7 +2639,7 @@ export namespace Components {
         /**
           * the value of the segment.
          */
-        "value"?: string;
+        "value"?: SegmentValue;
     }
     interface IonSegmentButton {
         /**
@@ -2658,7 +2662,7 @@ export namespace Components {
         /**
           * The value of the segment button.
          */
-        "value": string;
+        "value": SegmentValue;
     }
     interface IonSelect {
         /**
@@ -2677,6 +2681,10 @@ export namespace Components {
           * If `true`, the user cannot interact with the select.
          */
         "disabled": boolean;
+        /**
+          * The toggle icon to show when the select is open. If defined, the icon rotation behavior in `md` mode will be disabled. If undefined, `toggleIcon` will be used for when the select is both open and closed.
+         */
+        "expandedIcon"?: string;
         /**
           * The fill for the item. If `"solid"` the item will have a background. If `"outline"` the item will be transparent with a border. Only available in `md` mode.
          */
@@ -2694,7 +2702,7 @@ export namespace Components {
          */
         "justify": 'start' | 'end' | 'space-between';
         /**
-          * The visible label associated with the select.
+          * The visible label associated with the select.  Use this if you need to render a plaintext label.  The `label` property will take priority over the `label` slot if both are used.
          */
         "label"?: string;
         /**
@@ -2738,6 +2746,10 @@ export namespace Components {
           * The shape of the select. If "round" it will have an increased border radius.
          */
         "shape"?: 'round';
+        /**
+          * The toggle icon to use. Defaults to `chevronExpand` for `ios` mode, or `caretDownSharp` for `md` mode.
+         */
+        "toggleIcon"?: string;
         /**
           * The value of the select.
          */
@@ -2980,7 +2992,7 @@ export namespace Components {
          */
         "inputmode"?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
         /**
-          * The visible label associated with the textarea.
+          * The visible label associated with the textarea.  Use this if you need to render a plaintext label.  The `label` property will take priority over the `label` slot if both are used.
          */
         "label"?: string;
         /**
@@ -4969,7 +4981,7 @@ declare namespace LocalJSX {
          */
         "value"?: string | string[] | null;
         /**
-          * Values used to create the list of selectable years. By default the year values range between the `min` and `max` datetime inputs. However, to control exactly which years to display, the `yearValues` input can take a number, an array of numbers, or string of comma separated numbers. For example, to show upcoming and recent leap years, then this input's value would be `yearValues="2024,2020,2016,2012,2008"`.
+          * Values used to create the list of selectable years. By default the year values range between the `min` and `max` datetime inputs. However, to control exactly which years to display, the `yearValues` input can take a number, an array of numbers, or string of comma separated numbers. For example, to show upcoming and recent leap years, then this input's value would be `yearValues="2008,2012,2016,2020,2024"`.
          */
         "yearValues"?: number[] | number | string;
     }
@@ -5244,7 +5256,7 @@ declare namespace LocalJSX {
          */
         "inputmode"?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
         /**
-          * The visible label associated with the input.
+          * The visible label associated with the input.  Use this if you need to render a plaintext label.  The `label` property will take priority over the `label` slot if both are used.
          */
         "label"?: string;
         /**
@@ -5288,7 +5300,7 @@ declare namespace LocalJSX {
          */
         "onIonBlur"?: (event: IonInputCustomEvent<FocusEvent>) => void;
         /**
-          * The `ionChange` event is fired for `<ion-input>` elements when the user modifies the element's value. Unlike the `ionInput` event, the `ionChange` event is not necessarily fired for each alteration to an element's value.  Depending on the way the users interacts with the element, the `ionChange` event fires at a different moment: - When the user commits the change explicitly (e.g. by selecting a date from a date picker for `<ion-input type="date">`, pressing the "Enter" key, etc.). - When the element loses focus after its value has changed: for elements where the user's interaction is typing.
+          * The `ionChange` event is fired when the user modifies the input's value. Unlike the `ionInput` event, the `ionChange` event is only fired when changes are committed, not as the user types.  Depending on the way the users interacts with the element, the `ionChange` event fires at a different moment: - When the user commits the change explicitly (e.g. by selecting a date from a date picker for `<ion-input type="date">`, pressing the "Enter" key, etc.). - When the element loses focus after its value has changed: for elements where the user's interaction is typing.
          */
         "onIonChange"?: (event: IonInputCustomEvent<InputChangeEventDetail>) => void;
         /**
@@ -5296,7 +5308,7 @@ declare namespace LocalJSX {
          */
         "onIonFocus"?: (event: IonInputCustomEvent<FocusEvent>) => void;
         /**
-          * The `ionInput` event fires when the `value` of an `<ion-input>` element has been changed.  For elements that accept text input (`type=text`, `type=tel`, etc.), the interface is [`InputEvent`](https://developer.mozilla.org/en-US/docs/Web/API/InputEvent); for others, the interface is [`Event`](https://developer.mozilla.org/en-US/docs/Web/API/Event). If the input is cleared on edit, the type is `null`.
+          * The `ionInput` event is fired each time the user modifies the input's value. Unlike the `ionChange` event, the `ionInput` event is fired for each alteration to the input's value. This typically happens for each keystroke as the user types.  For elements that accept text input (`type=text`, `type=tel`, etc.), the interface is [`InputEvent`](https://developer.mozilla.org/en-US/docs/Web/API/InputEvent); for others, the interface is [`Event`](https://developer.mozilla.org/en-US/docs/Web/API/Event). If the input is cleared on edit, the type is `null`.
          */
         "onIonInput"?: (event: IonInputCustomEvent<InputInputEventDetail>) => void;
         /**
@@ -6304,6 +6316,10 @@ declare namespace LocalJSX {
           * Show two knobs.
          */
         "dualKnobs"?: boolean;
+        /**
+          * The text to display as the control's label. Use this over the `label` slot if you only need plain text. The `label` property will take priority over the `label` slot if both are used.
+         */
+        "label"?: string;
         /**
           * Where to place the label relative to the range. `"start"`: The label will appear to the left of the range in LTR and to the right in RTL. `"end"`: The label will appear to the right of the range in LTR and to the left in RTL. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("...").
          */
@@ -6706,7 +6722,7 @@ declare namespace LocalJSX {
         /**
           * the value of the segment.
          */
-        "value"?: string;
+        "value"?: SegmentValue;
     }
     interface IonSegmentButton {
         /**
@@ -6728,7 +6744,7 @@ declare namespace LocalJSX {
         /**
           * The value of the segment button.
          */
-        "value"?: string;
+        "value"?: SegmentValue;
     }
     interface IonSelect {
         /**
@@ -6747,6 +6763,10 @@ declare namespace LocalJSX {
           * If `true`, the user cannot interact with the select.
          */
         "disabled"?: boolean;
+        /**
+          * The toggle icon to show when the select is open. If defined, the icon rotation behavior in `md` mode will be disabled. If undefined, `toggleIcon` will be used for when the select is both open and closed.
+         */
+        "expandedIcon"?: string;
         /**
           * The fill for the item. If `"solid"` the item will have a background. If `"outline"` the item will be transparent with a border. Only available in `md` mode.
          */
@@ -6764,7 +6784,7 @@ declare namespace LocalJSX {
          */
         "justify"?: 'start' | 'end' | 'space-between';
         /**
-          * The visible label associated with the select.
+          * The visible label associated with the select.  Use this if you need to render a plaintext label.  The `label` property will take priority over the `label` slot if both are used.
          */
         "label"?: string;
         /**
@@ -6827,6 +6847,10 @@ declare namespace LocalJSX {
           * The shape of the select. If "round" it will have an increased border radius.
          */
         "shape"?: 'round';
+        /**
+          * The toggle icon to use. Defaults to `chevronExpand` for `ios` mode, or `caretDownSharp` for `md` mode.
+         */
+        "toggleIcon"?: string;
         /**
           * The value of the select.
          */
@@ -7066,7 +7090,7 @@ declare namespace LocalJSX {
          */
         "inputmode"?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
         /**
-          * The visible label associated with the textarea.
+          * The visible label associated with the textarea.  Use this if you need to render a plaintext label.  The `label` property will take priority over the `label` slot if both are used.
          */
         "label"?: string;
         /**
@@ -7098,7 +7122,7 @@ declare namespace LocalJSX {
          */
         "onIonBlur"?: (event: IonTextareaCustomEvent<FocusEvent>) => void;
         /**
-          * The `ionChange` event is fired for `<ion-textarea>` elements when the user modifies the element's value. Unlike the `ionInput` event, the `ionChange` event is not necessarily fired for each alteration to an element's value.  The `ionChange` event is fired when the element loses focus after its value has been modified.
+          * The `ionChange` event is fired when the user modifies the textarea's value. Unlike the `ionInput` event, the `ionChange` event is fired when the element loses focus after its value has been modified.
          */
         "onIonChange"?: (event: IonTextareaCustomEvent<TextareaChangeEventDetail>) => void;
         /**
@@ -7106,7 +7130,7 @@ declare namespace LocalJSX {
          */
         "onIonFocus"?: (event: IonTextareaCustomEvent<FocusEvent>) => void;
         /**
-          * The `ionInput` event fires when the `value` of an `<ion-textarea>` element has been changed.  When `clearOnEdit` is enabled, the `ionInput` event will be fired when the user clears the textarea by performing a keydown event.
+          * The `ionInput` event is fired each time the user modifies the textarea's value. Unlike the `ionChange` event, the `ionInput` event is fired for each alteration to the textarea's value. This typically happens for each keystroke as the user types.  When `clearOnEdit` is enabled, the `ionInput` event will be fired when the user clears the textarea by performing a keydown event.
          */
         "onIonInput"?: (event: IonTextareaCustomEvent<TextareaInputEventDetail>) => void;
         /**
diff --git a/core/src/components/accordion-group/accordion-group.tsx b/core/src/components/accordion-group/accordion-group.tsx
index 4844edd8e8..6907e74569 100644
--- a/core/src/components/accordion-group/accordion-group.tsx
+++ b/core/src/components/accordion-group/accordion-group.tsx
@@ -1,8 +1,8 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Listen, Method, Prop, Watch, h } from '@stencil/core';
+import { printIonWarning } from '@utils/logging';
 
 import { getIonMode } from '../../global/ionic-global';
-import { printIonWarning } from '../../utils/logging';
 
 import type { AccordionGroupChangeEventDetail } from './accordion-group-interface';
 
diff --git a/core/src/components/accordion/accordion.tsx b/core/src/components/accordion/accordion.tsx
index fd65ffcd3e..eab83209cd 100644
--- a/core/src/components/accordion/accordion.tsx
+++ b/core/src/components/accordion/accordion.tsx
@@ -1,10 +1,10 @@
 import type { ComponentInterface } from '@stencil/core';
 import { Component, Element, Host, Prop, State, Watch, h } from '@stencil/core';
+import { addEventListener, getElementRoot, raf, removeEventListener, transitionEndAsync } from '@utils/helpers';
 import { chevronDown } from 'ionicons/icons';
 
 import { config } from '../../global/config';
 import { getIonMode } from '../../global/ionic-global';
-import { addEventListener, getElementRoot, raf, removeEventListener, transitionEndAsync } from '../../utils/helpers';
 
 const enum AccordionState {
   Collapsed = 1 << 0,
diff --git a/core/src/components/action-sheet/action-sheet.tsx b/core/src/components/action-sheet/action-sheet.tsx
index 3a13827a3c..9a877054cf 100644
--- a/core/src/components/action-sheet/action-sheet.tsx
+++ b/core/src/components/action-sheet/action-sheet.tsx
@@ -1,10 +1,7 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Watch, Component, Element, Event, Host, Method, Prop, h, readTask } from '@stencil/core';
-
-import { getIonMode } from '../../global/ionic-global';
-import type { AnimationBuilder, CssClassMap, FrameworkDelegate, OverlayInterface } from '../../interface';
-import type { Gesture } from '../../utils/gesture';
-import { createButtonActiveGesture } from '../../utils/gesture/button-active';
+import type { Gesture } from '@utils/gesture';
+import { createButtonActiveGesture } from '@utils/gesture/button-active';
 import {
   BACKDROP,
   createDelegateController,
@@ -16,9 +13,12 @@ import {
   present,
   safeCall,
   setOverlayId,
-} from '../../utils/overlays';
+} from '@utils/overlays';
+import { getClassMap } from '@utils/theme';
+
+import { getIonMode } from '../../global/ionic-global';
+import type { AnimationBuilder, CssClassMap, FrameworkDelegate, OverlayInterface } from '../../interface';
 import type { OverlayEventDetail } from '../../utils/overlays-interface';
-import { getClassMap } from '../../utils/theme';
 
 import type { ActionSheetButton } from './action-sheet-interface';
 import { iosEnterAnimation } from './animations/ios.enter';
diff --git a/core/src/components/action-sheet/animations/ios.enter.ts b/core/src/components/action-sheet/animations/ios.enter.ts
index 4235d1cc39..ff188415b4 100644
--- a/core/src/components/action-sheet/animations/ios.enter.ts
+++ b/core/src/components/action-sheet/animations/ios.enter.ts
@@ -1,5 +1,6 @@
+import { createAnimation } from '@utils/animation/animation';
+
 import type { Animation } from '../../../interface';
-import { createAnimation } from '../../../utils/animation/animation';
 
 /**
  * iOS Action Sheet Enter Animation
diff --git a/core/src/components/action-sheet/animations/ios.leave.ts b/core/src/components/action-sheet/animations/ios.leave.ts
index ff6741d8d1..d29fca9b5b 100644
--- a/core/src/components/action-sheet/animations/ios.leave.ts
+++ b/core/src/components/action-sheet/animations/ios.leave.ts
@@ -1,5 +1,6 @@
+import { createAnimation } from '@utils/animation/animation';
+
 import type { Animation } from '../../../interface';
-import { createAnimation } from '../../../utils/animation/animation';
 
 /**
  * iOS Action Sheet Leave Animation
diff --git a/core/src/components/action-sheet/animations/md.enter.ts b/core/src/components/action-sheet/animations/md.enter.ts
index b9dcaa0998..8053d8a962 100644
--- a/core/src/components/action-sheet/animations/md.enter.ts
+++ b/core/src/components/action-sheet/animations/md.enter.ts
@@ -1,5 +1,6 @@
+import { createAnimation } from '@utils/animation/animation';
+
 import type { Animation } from '../../../interface';
-import { createAnimation } from '../../../utils/animation/animation';
 
 /**
  * MD Action Sheet Enter Animation
diff --git a/core/src/components/action-sheet/animations/md.leave.ts b/core/src/components/action-sheet/animations/md.leave.ts
index 952dd8ac1d..56255b23f7 100644
--- a/core/src/components/action-sheet/animations/md.leave.ts
+++ b/core/src/components/action-sheet/animations/md.leave.ts
@@ -1,5 +1,6 @@
+import { createAnimation } from '@utils/animation/animation';
+
 import type { Animation } from '../../../interface';
-import { createAnimation } from '../../../utils/animation/animation';
 
 /**
  * MD Action Sheet Leave Animation
diff --git a/core/src/components/action-sheet/test/translucent/action-sheet.e2e.ts-snapshots/action-sheet-translucent-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/action-sheet/test/translucent/action-sheet.e2e.ts-snapshots/action-sheet-translucent-ios-ltr-Mobile-Firefox-linux.png
index 40108b5517..19beb6fe82 100644
Binary files a/core/src/components/action-sheet/test/translucent/action-sheet.e2e.ts-snapshots/action-sheet-translucent-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/action-sheet/test/translucent/action-sheet.e2e.ts-snapshots/action-sheet-translucent-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/alert/alert.tsx b/core/src/components/alert/alert.tsx
index 7c00a569d8..8ce5094492 100644
--- a/core/src/components/alert/alert.tsx
+++ b/core/src/components/alert/alert.tsx
@@ -1,12 +1,8 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Listen, Method, Prop, Watch, forceUpdate, h } from '@stencil/core';
-
-import { config } from '../../global/config';
-import { getIonMode } from '../../global/ionic-global';
-import type { AnimationBuilder, CssClassMap, OverlayInterface, FrameworkDelegate } from '../../interface';
-import { ENABLE_HTML_CONTENT_DEFAULT } from '../../utils/config';
-import type { Gesture } from '../../utils/gesture';
-import { createButtonActiveGesture } from '../../utils/gesture/button-active';
+import { ENABLE_HTML_CONTENT_DEFAULT } from '@utils/config';
+import type { Gesture } from '@utils/gesture';
+import { createButtonActiveGesture } from '@utils/gesture/button-active';
 import {
   createDelegateController,
   createTriggerController,
@@ -18,11 +14,15 @@ import {
   present,
   safeCall,
   setOverlayId,
-} from '../../utils/overlays';
+} from '@utils/overlays';
+import { sanitizeDOMString } from '@utils/sanitization';
+import { getClassMap } from '@utils/theme';
+
+import { config } from '../../global/config';
+import { getIonMode } from '../../global/ionic-global';
+import type { AnimationBuilder, CssClassMap, OverlayInterface, FrameworkDelegate } from '../../interface';
 import type { OverlayEventDetail } from '../../utils/overlays-interface';
 import type { IonicSafeString } from '../../utils/sanitization';
-import { sanitizeDOMString } from '../../utils/sanitization';
-import { getClassMap } from '../../utils/theme';
 
 import type { AlertButton, AlertInput } from './alert-interface';
 import { iosEnterAnimation } from './animations/ios.enter';
diff --git a/core/src/components/alert/animations/ios.enter.ts b/core/src/components/alert/animations/ios.enter.ts
index 839560fec6..ac7edcaabc 100644
--- a/core/src/components/alert/animations/ios.enter.ts
+++ b/core/src/components/alert/animations/ios.enter.ts
@@ -1,5 +1,6 @@
+import { createAnimation } from '@utils/animation/animation';
+
 import type { Animation } from '../../../interface';
-import { createAnimation } from '../../../utils/animation/animation';
 
 /**
  * iOS Alert Enter Animation
diff --git a/core/src/components/alert/animations/ios.leave.ts b/core/src/components/alert/animations/ios.leave.ts
index ec4f4093f7..ac951b2b13 100644
--- a/core/src/components/alert/animations/ios.leave.ts
+++ b/core/src/components/alert/animations/ios.leave.ts
@@ -1,5 +1,6 @@
+import { createAnimation } from '@utils/animation/animation';
+
 import type { Animation } from '../../../interface';
-import { createAnimation } from '../../../utils/animation/animation';
 
 /**
  * iOS Alert Leave Animation
diff --git a/core/src/components/alert/animations/md.enter.ts b/core/src/components/alert/animations/md.enter.ts
index 7d6b260dab..cc15d7a616 100644
--- a/core/src/components/alert/animations/md.enter.ts
+++ b/core/src/components/alert/animations/md.enter.ts
@@ -1,5 +1,6 @@
+import { createAnimation } from '@utils/animation/animation';
+
 import type { Animation } from '../../../interface';
-import { createAnimation } from '../../../utils/animation/animation';
 
 /**
  * Md Alert Enter Animation
diff --git a/core/src/components/alert/animations/md.leave.ts b/core/src/components/alert/animations/md.leave.ts
index f2b5abd6fe..d4e1a85ddd 100644
--- a/core/src/components/alert/animations/md.leave.ts
+++ b/core/src/components/alert/animations/md.leave.ts
@@ -1,5 +1,6 @@
+import { createAnimation } from '@utils/animation/animation';
+
 import type { Animation } from '../../../interface';
-import { createAnimation } from '../../../utils/animation/animation';
 
 /**
  * Md Alert Leave Animation
diff --git a/core/src/components/app/app.tsx b/core/src/components/app/app.tsx
index 9c3ba928f3..fd11019db2 100644
--- a/core/src/components/app/app.tsx
+++ b/core/src/components/app/app.tsx
@@ -1,9 +1,9 @@
 import type { ComponentInterface } from '@stencil/core';
 import { Build, Component, Element, Host, Method, h } from '@stencil/core';
+import { isPlatform } from '@utils/platform';
 
 import { config } from '../../global/config';
 import { getIonMode } from '../../global/ionic-global';
-import { isPlatform } from '../../utils/platform';
 
 @Component({
   tag: 'ion-app',
diff --git a/core/src/components/back-button/back-button.ios.scss b/core/src/components/back-button/back-button.ios.scss
index 73c7469157..dba2f52e18 100644
--- a/core/src/components/back-button/back-button.ios.scss
+++ b/core/src/components/back-button/back-button.ios.scss
@@ -38,11 +38,3 @@
     opacity: .6;
   }
 }
-
-
-// Back Button Color: Focused
-// --------------------------------------------------
-
-:host(.ion-color.ion-focused) .button-native::after {
-  background: #{current-color(base)};
-}
diff --git a/core/src/components/back-button/back-button.tsx b/core/src/components/back-button/back-button.tsx
index d7140f0811..b85e092eaf 100644
--- a/core/src/components/back-button/back-button.tsx
+++ b/core/src/components/back-button/back-button.tsx
@@ -1,14 +1,14 @@
 import type { ComponentInterface } from '@stencil/core';
 import { Component, Element, Host, Prop, h } from '@stencil/core';
+import type { ButtonInterface } from '@utils/element-interface';
+import type { Attributes } from '@utils/helpers';
+import { inheritAriaAttributes } from '@utils/helpers';
+import { createColorClasses, hostContext, openURL } from '@utils/theme';
 import { arrowBackSharp, chevronBack } from 'ionicons/icons';
 
 import { config } from '../../global/config';
 import { getIonMode } from '../../global/ionic-global';
 import type { AnimationBuilder, Color } from '../../interface';
-import type { ButtonInterface } from '../../utils/element-interface';
-import type { Attributes } from '../../utils/helpers';
-import { inheritAriaAttributes } from '../../utils/helpers';
-import { createColorClasses, hostContext, openURL } from '../../utils/theme';
 
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
diff --git a/core/src/components/backdrop/backdrop.tsx b/core/src/components/backdrop/backdrop.tsx
index ae6930120a..1e566a4bc8 100644
--- a/core/src/components/backdrop/backdrop.tsx
+++ b/core/src/components/backdrop/backdrop.tsx
@@ -1,8 +1,8 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Event, Host, Listen, Prop, h } from '@stencil/core';
+import { GESTURE_CONTROLLER } from '@utils/gesture';
 
 import { getIonMode } from '../../global/ionic-global';
-import { GESTURE_CONTROLLER } from '../../utils/gesture';
 
 @Component({
   tag: 'ion-backdrop',
diff --git a/core/src/components/badge/badge.tsx b/core/src/components/badge/badge.tsx
index 92ffb9a047..e443c3513b 100644
--- a/core/src/components/badge/badge.tsx
+++ b/core/src/components/badge/badge.tsx
@@ -1,9 +1,9 @@
 import type { ComponentInterface } from '@stencil/core';
 import { Component, Host, Prop, h } from '@stencil/core';
+import { createColorClasses } from '@utils/theme';
 
 import { getIonMode } from '../../global/ionic-global';
 import type { Color } from '../../interface';
-import { createColorClasses } from '../../utils/theme';
 
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
diff --git a/core/src/components/breadcrumb/breadcrumb.tsx b/core/src/components/breadcrumb/breadcrumb.tsx
index 264b1919f9..1355022937 100644
--- a/core/src/components/breadcrumb/breadcrumb.tsx
+++ b/core/src/components/breadcrumb/breadcrumb.tsx
@@ -1,12 +1,12 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Prop, h } from '@stencil/core';
+import type { Attributes } from '@utils/helpers';
+import { inheritAriaAttributes } from '@utils/helpers';
+import { createColorClasses, hostContext, openURL } from '@utils/theme';
 import { chevronForwardOutline, ellipsisHorizontal } from 'ionicons/icons';
 
 import { getIonMode } from '../../global/ionic-global';
 import type { AnimationBuilder, Color } from '../../interface';
-import type { Attributes } from '../../utils/helpers';
-import { inheritAriaAttributes } from '../../utils/helpers';
-import { createColorClasses, hostContext, openURL } from '../../utils/theme';
 import type { RouterDirection } from '../router/utils/interface';
 
 import type { BreadcrumbCollapsedClickEventDetail } from './breadcrumb-interface';
diff --git a/core/src/components/breadcrumbs/breadcrumbs.tsx b/core/src/components/breadcrumbs/breadcrumbs.tsx
index 7b7bb2b738..7bba1284d1 100644
--- a/core/src/components/breadcrumbs/breadcrumbs.tsx
+++ b/core/src/components/breadcrumbs/breadcrumbs.tsx
@@ -1,9 +1,9 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Listen, Prop, State, Watch, h } from '@stencil/core';
+import { createColorClasses, hostContext } from '@utils/theme';
 
 import { getIonMode } from '../../global/ionic-global';
 import type { Color } from '../../interface';
-import { createColorClasses, hostContext } from '../../utils/theme';
 import type { BreadcrumbCollapsedClickEventDetail } from '../breadcrumb/breadcrumb-interface';
 
 /**
diff --git a/core/src/components/button/button.tsx b/core/src/components/button/button.tsx
index f187c429f1..a4e73d15f7 100644
--- a/core/src/components/button/button.tsx
+++ b/core/src/components/button/button.tsx
@@ -1,13 +1,13 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Prop, h } from '@stencil/core';
+import type { AnchorInterface, ButtonInterface } from '@utils/element-interface';
+import type { Attributes } from '@utils/helpers';
+import { inheritAriaAttributes, hasShadowDom } from '@utils/helpers';
+import { printIonWarning } from '@utils/logging';
+import { createColorClasses, hostContext, openURL } from '@utils/theme';
 
 import { getIonMode } from '../../global/ionic-global';
 import type { AnimationBuilder, Color } from '../../interface';
-import type { AnchorInterface, ButtonInterface } from '../../utils/element-interface';
-import type { Attributes } from '../../utils/helpers';
-import { inheritAriaAttributes, hasShadowDom } from '../../utils/helpers';
-import { printIonWarning } from '../../utils/logging';
-import { createColorClasses, hostContext, openURL } from '../../utils/theme';
 import type { RouterDirection } from '../router/utils/interface';
 
 /**
diff --git a/core/src/components/button/test/round/button.e2e.ts-snapshots/button-round-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/round/button.e2e.ts-snapshots/button-round-ios-ltr-Mobile-Firefox-linux.png
index a6bfc2f179..df9290e116 100644
Binary files a/core/src/components/button/test/round/button.e2e.ts-snapshots/button-round-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/button/test/round/button.e2e.ts-snapshots/button-round-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/card-header/card-header.tsx b/core/src/components/card-header/card-header.tsx
index d4b463451b..982cf513ea 100644
--- a/core/src/components/card-header/card-header.tsx
+++ b/core/src/components/card-header/card-header.tsx
@@ -1,9 +1,9 @@
 import type { ComponentInterface } from '@stencil/core';
 import { Component, Host, Prop, h } from '@stencil/core';
+import { createColorClasses } from '@utils/theme';
 
 import { getIonMode } from '../../global/ionic-global';
 import type { Color } from '../../interface';
-import { createColorClasses } from '../../utils/theme';
 
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
diff --git a/core/src/components/card-subtitle/card-subtitle.tsx b/core/src/components/card-subtitle/card-subtitle.tsx
index 4d00466435..898e2cb8d6 100644
--- a/core/src/components/card-subtitle/card-subtitle.tsx
+++ b/core/src/components/card-subtitle/card-subtitle.tsx
@@ -1,9 +1,9 @@
 import type { ComponentInterface } from '@stencil/core';
 import { Component, Host, Prop, h } from '@stencil/core';
+import { createColorClasses } from '@utils/theme';
 
 import { getIonMode } from '../../global/ionic-global';
 import type { Color } from '../../interface';
-import { createColorClasses } from '../../utils/theme';
 
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
diff --git a/core/src/components/card-title/card-title.tsx b/core/src/components/card-title/card-title.tsx
index 2afec8b259..53cb8bc606 100644
--- a/core/src/components/card-title/card-title.tsx
+++ b/core/src/components/card-title/card-title.tsx
@@ -1,9 +1,9 @@
 import type { ComponentInterface } from '@stencil/core';
 import { Component, Host, Prop, h } from '@stencil/core';
+import { createColorClasses } from '@utils/theme';
 
 import { getIonMode } from '../../global/ionic-global';
 import type { Color } from '../../interface';
-import { createColorClasses } from '../../utils/theme';
 
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
diff --git a/core/src/components/card/card.tsx b/core/src/components/card/card.tsx
index 641c745559..68e21d0ba5 100644
--- a/core/src/components/card/card.tsx
+++ b/core/src/components/card/card.tsx
@@ -1,12 +1,12 @@
 import type { ComponentInterface } from '@stencil/core';
 import { Element, Component, Host, Prop, h } from '@stencil/core';
+import type { AnchorInterface, ButtonInterface } from '@utils/element-interface';
+import type { Attributes } from '@utils/helpers';
+import { inheritAttributes } from '@utils/helpers';
+import { createColorClasses, openURL } from '@utils/theme';
 
 import { getIonMode } from '../../global/ionic-global';
 import type { AnimationBuilder, Color, Mode } from '../../interface';
-import type { AnchorInterface, ButtonInterface } from '../../utils/element-interface';
-import type { Attributes } from '../../utils/helpers';
-import { inheritAttributes } from '../../utils/helpers';
-import { createColorClasses, openURL } from '../../utils/theme';
 import type { RouterDirection } from '../router/utils/interface';
 
 /**
diff --git a/core/src/components/checkbox/checkbox.scss b/core/src/components/checkbox/checkbox.scss
index 24188dbc33..9f2b6269ea 100644
--- a/core/src/components/checkbox/checkbox.scss
+++ b/core/src/components/checkbox/checkbox.scss
@@ -1,4 +1,5 @@
 @import "../../themes/ionic.globals";
+@import "./checkbox.vars.scss";
 
 // Checkbox
 // --------------------------------------------------
@@ -103,6 +104,10 @@
   overflow: hidden;
 }
 
+:host(.in-item:not(.legacy-checkbox)) .label-text-wrapper {
+  @include margin($checkbox-item-label-margin-top, null, $checkbox-item-label-margin-bottom, null);
+}
+
 /**
  * If no label text is placed into the slot
  * then the element should be hidden otherwise
@@ -194,7 +199,7 @@ input {
    * the checkbox should be on the end
    * when the label sits at the start.
    */
-  @include margin(0, $form-control-label-margin, 0, 0);
+  @include margin(null, $form-control-label-margin, null, 0);
 }
 
 
@@ -215,7 +220,7 @@ input {
  * when the label sits at the end.
  */
 :host(.checkbox-label-placement-end) .label-text-wrapper {
-  @include margin(0, 0, 0, $form-control-label-margin);
+  @include margin(null, 0, null, $form-control-label-margin);
 }
 
 
@@ -228,7 +233,7 @@ input {
    * the checkbox should be on the end
    * when the label sits at the start.
    */
-  @include margin(0, $form-control-label-margin, 0, 0);
+  @include margin(null, $form-control-label-margin, null, 0);
 }
 
 /**
diff --git a/core/src/components/checkbox/checkbox.tsx b/core/src/components/checkbox/checkbox.tsx
index 7a2386f01a..08cfc581ff 100644
--- a/core/src/components/checkbox/checkbox.tsx
+++ b/core/src/components/checkbox/checkbox.tsx
@@ -1,15 +1,14 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Prop, Watch, h } from '@stencil/core';
+import type { LegacyFormController } from '@utils/forms';
+import { createLegacyFormController } from '@utils/forms';
+import type { Attributes } from '@utils/helpers';
+import { getAriaLabel, inheritAriaAttributes, renderHiddenInput } from '@utils/helpers';
+import { printIonWarning } from '@utils/logging';
+import { createColorClasses, hostContext } from '@utils/theme';
 
-// TODO(FW-2845) - Use @utils/forms and @utils/logging when https://github.com/ionic-team/stencil/issues/3826 is resolved
 import { getIonMode } from '../../global/ionic-global';
 import type { Color, Mode, StyleEventDetail } from '../../interface';
-import type { LegacyFormController } from '../../utils/forms';
-import { createLegacyFormController } from '../../utils/forms';
-import type { Attributes } from '../../utils/helpers';
-import { getAriaLabel, inheritAriaAttributes, renderHiddenInput } from '../../utils/helpers';
-import { printIonWarning } from '../../utils/logging';
-import { createColorClasses, hostContext } from '../../utils/theme';
 
 import type { CheckboxChangeEventDetail } from './checkbox-interface';
 
diff --git a/core/src/components/checkbox/checkbox.vars.scss b/core/src/components/checkbox/checkbox.vars.scss
new file mode 100644
index 0000000000..2116a369e8
--- /dev/null
+++ b/core/src/components/checkbox/checkbox.vars.scss
@@ -0,0 +1,5 @@
+/// @prop - Top margin of checkbox's label when in an item
+$checkbox-item-label-margin-top: 10px !default;
+
+/// @prop - Bottom margin of checkbox's label when in an item
+$checkbox-item-label-margin-bottom: 10px !default;
\ No newline at end of file
diff --git a/core/src/components/checkbox/test/item/checkbox.e2e.ts b/core/src/components/checkbox/test/item/checkbox.e2e.ts
index 676d8ebf75..7162857e85 100644
--- a/core/src/components/checkbox/test/item/checkbox.e2e.ts
+++ b/core/src/components/checkbox/test/item/checkbox.e2e.ts
@@ -50,3 +50,24 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
     });
   });
 });
+
+configs({ directions: ['ltr'], modes: ['md'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('checkbox: long label in item'), () => {
+    test('should render margins correctly when using long label in item', async ({ page }) => {
+      await page.setContent(
+        `
+          <ion-list>
+            <ion-item>
+              <ion-checkbox justify="start">
+                <ion-label class="ion-text-wrap">Enable Notifications Enable Notifications Enable Notifications</ion-label>
+              </ion-checkbox>
+            </ion-item>
+          </ion-list>
+        `,
+        config
+      );
+      const list = page.locator('ion-list');
+      expect(await list.screenshot()).toMatchSnapshot(screenshot(`checkbox-long-label-in-item`));
+    });
+  });
+});
diff --git a/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-long-label-in-item-md-ltr-Mobile-Chrome-linux.png b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-long-label-in-item-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..25884f0428
Binary files /dev/null and b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-long-label-in-item-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-long-label-in-item-md-ltr-Mobile-Firefox-linux.png b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-long-label-in-item-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..fc9274c51a
Binary files /dev/null and b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-long-label-in-item-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-long-label-in-item-md-ltr-Mobile-Safari-linux.png b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-long-label-in-item-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..b92c6febf2
Binary files /dev/null and b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-long-label-in-item-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/checkbox/test/item/index.html b/core/src/components/checkbox/test/item/index.html
index a1628f44bd..156e3ca6dc 100644
--- a/core/src/components/checkbox/test/item/index.html
+++ b/core/src/components/checkbox/test/item/index.html
@@ -148,6 +148,19 @@
             </ion-list>
           </div>
         </div>
+
+        <h1>Multiline Label</h1>
+        <div class="grid">
+          <div class="grid-item">
+            <ion-item>
+              <ion-checkbox justify="start">
+                <ion-label class="ion-text-wrap">
+                  Enable Notifications Enable Notifications Enable Notifications
+                </ion-label>
+              </ion-checkbox>
+            </ion-item>
+          </div>
+        </div>
       </ion-content>
     </ion-app>
   </body>
diff --git a/core/src/components/chip/chip.tsx b/core/src/components/chip/chip.tsx
index 51100a992f..35f052b766 100644
--- a/core/src/components/chip/chip.tsx
+++ b/core/src/components/chip/chip.tsx
@@ -1,9 +1,9 @@
 import type { ComponentInterface } from '@stencil/core';
 import { Component, Host, Prop, h } from '@stencil/core';
+import { createColorClasses } from '@utils/theme';
 
 import { getIonMode } from '../../global/ionic-global';
 import type { Color } from '../../interface';
-import { createColorClasses } from '../../utils/theme';
 
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
diff --git a/core/src/components/col/col.tsx b/core/src/components/col/col.tsx
index 7bea442b76..80480dfe7c 100644
--- a/core/src/components/col/col.tsx
+++ b/core/src/components/col/col.tsx
@@ -1,8 +1,8 @@
 import type { ComponentInterface } from '@stencil/core';
 import { Component, Host, Listen, Prop, forceUpdate, h } from '@stencil/core';
+import { matchBreakpoint } from '@utils/media';
 
 import { getIonMode } from '../../global/ionic-global';
-import { matchBreakpoint } from '../../utils/media';
 
 const win = typeof (window as any) !== 'undefined' ? (window as any) : undefined;
 // eslint-disable-next-line @typescript-eslint/prefer-optional-chain
diff --git a/core/src/components/content/content.tsx b/core/src/components/content/content.tsx
index 5a1e208563..f0de55608e 100644
--- a/core/src/components/content/content.tsx
+++ b/core/src/components/content/content.tsx
@@ -1,12 +1,12 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Build, Component, Element, Event, Host, Listen, Method, Prop, forceUpdate, h, readTask } from '@stencil/core';
+import { componentOnReady } from '@utils/helpers';
+import { isPlatform } from '@utils/platform';
+import { isRTL } from '@utils/rtl';
+import { createColorClasses, hostContext } from '@utils/theme';
 
 import { getIonMode } from '../../global/ionic-global';
 import type { Color } from '../../interface';
-import { componentOnReady } from '../../utils/helpers';
-import { isPlatform } from '../../utils/platform';
-import { isRTL } from '../../utils/rtl';
-import { createColorClasses, hostContext } from '../../utils/theme';
 
 import type { ScrollBaseDetail, ScrollDetail } from './content-interface';
 
diff --git a/core/src/components/datetime-button/datetime-button.tsx b/core/src/components/datetime-button/datetime-button.tsx
index 68b4a7ddf0..46aa2a3b07 100644
--- a/core/src/components/datetime-button/datetime-button.tsx
+++ b/core/src/components/datetime-button/datetime-button.tsx
@@ -1,11 +1,11 @@
 import type { ComponentInterface } from '@stencil/core';
 import { Component, Element, Host, Prop, State, h } from '@stencil/core';
+import { componentOnReady, addEventListener } from '@utils/helpers';
+import { printIonError } from '@utils/logging';
+import { createColorClasses } from '@utils/theme';
 
 import { getIonMode } from '../../global/ionic-global';
 import type { Color } from '../../interface';
-import { componentOnReady, addEventListener } from '../../utils/helpers';
-import { printIonError } from '../../utils/logging';
-import { createColorClasses } from '../../utils/theme';
 import type { DatetimePresentation } from '../datetime/datetime-interface';
 import { getToday } from '../datetime/utils/data';
 import { getMonthAndYear, getMonthDayAndYear, getLocalizedDateTime, getLocalizedTime } from '../datetime/utils/format';
diff --git a/core/src/components/datetime/datetime.md.scss b/core/src/components/datetime/datetime.md.scss
index 832b61fec8..97bb2e3fc2 100644
--- a/core/src/components/datetime/datetime.md.scss
+++ b/core/src/components/datetime/datetime.md.scss
@@ -36,7 +36,7 @@
 
 :host .calendar-action-buttons ion-item,
 :host .calendar-action-buttons ion-button {
-  color: #{$text-color-step-350};
+  --color: #{$text-color-step-350};
 }
 
 // Calendar / Header / Days of Week
diff --git a/core/src/components/datetime/datetime.scss b/core/src/components/datetime/datetime.scss
index 3bd90f3bb2..34eca2603c 100644
--- a/core/src/components/datetime/datetime.scss
+++ b/core/src/components/datetime/datetime.scss
@@ -8,6 +8,12 @@
    * @prop --background: The primary background of the datetime component.
    * @prop --background-rgb: The primary background of the datetime component in RGB format.
    * @prop --title-color: The text color of the title.
+   *
+   * @prop --wheel-highlight-background: The background of the highlight under the selected
+   * item when using a wheel style layout, or in the month/year picker for grid style layouts.
+   * @prop --wheel-fade-background-rgb: The color of the gradient covering non-selected items
+   * when using a wheel style layout, or in the month/year picker for grid style layouts. Must
+   * be in RGB format, e.g. `255, 255, 255`.
    */
 
   display: flex;
diff --git a/core/src/components/datetime/datetime.tsx b/core/src/components/datetime/datetime.tsx
index 1278693e90..a09eb0fdad 100644
--- a/core/src/components/datetime/datetime.tsx
+++ b/core/src/components/datetime/datetime.tsx
@@ -1,14 +1,14 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Method, Prop, State, Watch, h, writeTask } from '@stencil/core';
+import { startFocusVisible } from '@utils/focus-visible';
+import { getElementRoot, raf, renderHiddenInput } from '@utils/helpers';
+import { printIonError, printIonWarning } from '@utils/logging';
+import { isRTL } from '@utils/rtl';
+import { createColorClasses } from '@utils/theme';
 import { caretDownSharp, caretUpSharp, chevronBack, chevronDown, chevronForward } from 'ionicons/icons';
 
 import { getIonMode } from '../../global/ionic-global';
 import type { Color, Mode, StyleEventDetail } from '../../interface';
-import { startFocusVisible } from '../../utils/focus-visible';
-import { getElementRoot, raf, renderHiddenInput } from '../../utils/helpers';
-import { printIonError, printIonWarning } from '../../utils/logging';
-import { isRTL } from '../../utils/rtl';
-import { createColorClasses } from '../../utils/theme';
 import type { PickerColumnItem } from '../picker-column-internal/picker-column-internal-interfaces';
 
 import type {
@@ -74,6 +74,17 @@ import {
  * @slot title - The title of the datetime.
  * @slot buttons - The buttons in the datetime.
  * @slot time-label - The label for the time selector in the datetime.
+ *
+ * @part wheel-item - The individual items when using a wheel style layout, or in the
+ * month/year picker when using a grid style layout.
+ * @part wheel-item active - The currently selected wheel-item.
+ *
+ * @part time-button - The button that opens the time picker when using a grid style
+ * layout with `presentation="date-time"` or `"time-date"`.
+ * @part time-button active - The time picker button when the picker is open.
+ *
+ * @part month-year-button - The button that opens the month/year picker when
+ * using a grid style layout.
  */
 @Component({
   tag: 'ion-datetime',
@@ -231,7 +242,7 @@ export class Datetime implements ComponentInterface {
    * the year values range between the `min` and `max` datetime inputs. However, to
    * control exactly which years to display, the `yearValues` input can take a number, an array
    * of numbers, or string of comma separated numbers. For example, to show upcoming and
-   * recent leap years, then this input's value would be `yearValues="2024,2020,2016,2012,2008"`.
+   * recent leap years, then this input's value would be `yearValues="2008,2012,2016,2020,2024"`.
    */
   @Prop() yearValues?: number[] | number | string;
   @Watch('yearValues')
@@ -1920,6 +1931,7 @@ export class Datetime implements ComponentInterface {
         <div class="calendar-action-buttons">
           <div class="calendar-month-year">
             <ion-item
+              part="month-year-button"
               ref={(el) => (this.monthYearToggleItemRef = el)}
               button
               aria-label="Show year picker"
@@ -2167,7 +2179,8 @@ export class Datetime implements ComponentInterface {
   }
 
   private renderTimeOverlay() {
-    const use24Hour = is24Hour(this.locale, this.hourCycle);
+    const { hourCycle, isTimePopoverOpen, locale } = this;
+    const use24Hour = is24Hour(locale, hourCycle);
     const activePart = this.getActivePartsWithFallback();
 
     return [
@@ -2175,8 +2188,9 @@ export class Datetime implements ComponentInterface {
       <button
         class={{
           'time-body': true,
-          'time-body-active': this.isTimePopoverOpen,
+          'time-body-active': isTimePopoverOpen,
         }}
+        part={`time-button${isTimePopoverOpen ? ' active' : ''}`}
         aria-expanded="false"
         aria-haspopup="true"
         onClick={async (ev) => {
@@ -2199,7 +2213,7 @@ export class Datetime implements ComponentInterface {
           }
         }}
       >
-        {getLocalizedTime(this.locale, activePart, use24Hour)}
+        {getLocalizedTime(locale, activePart, use24Hour)}
       </button>,
       <ion-popover
         alignment="center"
diff --git a/core/src/components/datetime/test/custom/datetime.e2e.ts b/core/src/components/datetime/test/custom/datetime.e2e.ts
new file mode 100644
index 0000000000..bc6deb9c91
--- /dev/null
+++ b/core/src/components/datetime/test/custom/datetime.e2e.ts
@@ -0,0 +1,40 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('datetime: custom'), () => {
+    test.beforeEach(async ({ page }) => {
+      await page.goto(`/src/components/datetime/test/custom`, config);
+    });
+
+    test('should allow styling wheel style datetimes', async ({ page }) => {
+      const datetime = page.locator('#custom-wheel');
+
+      await expect(datetime).toHaveScreenshot(screenshot(`datetime-custom-wheel`));
+    });
+
+    test('should allow styling month/year picker in grid style datetimes', async ({ page }) => {
+      const datetime = page.locator('#custom-grid');
+      const monthYearToggle = datetime.locator('.calendar-month-year');
+
+      await monthYearToggle.click();
+      await page.waitForChanges();
+
+      await expect(datetime).toHaveScreenshot(screenshot(`datetime-custom-month-year`));
+    });
+
+    test('should allow styling time picker in grid style datetimes', async ({ page }) => {
+      const timeButton = page.locator('ion-datetime .time-body');
+      const popover = page.locator('.popover-viewport');
+      const ionPopoverDidPresent = await page.spyOnEvent('ionPopoverDidPresent');
+
+      await expect(timeButton).toHaveScreenshot(screenshot(`datetime-custom-time-button`));
+
+      await timeButton.click();
+      await ionPopoverDidPresent.next();
+
+      await expect(popover).toHaveScreenshot(screenshot(`datetime-custom-time-picker`));
+      await expect(timeButton).toHaveScreenshot(screenshot(`datetime-custom-time-button-active`));
+    });
+  });
+});
diff --git a/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-month-year-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-month-year-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..1bfe630bf4
Binary files /dev/null and b/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-month-year-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-month-year-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-month-year-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..7fa479c096
Binary files /dev/null and b/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-month-year-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-month-year-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-month-year-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..b6e53a62ad
Binary files /dev/null and b/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-month-year-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-month-year-md-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-month-year-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..09e1a507ad
Binary files /dev/null and b/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-month-year-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-month-year-md-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-month-year-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..48521ceaed
Binary files /dev/null and b/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-month-year-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-month-year-md-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-month-year-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..689108370e
Binary files /dev/null and b/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-month-year-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-time-button-active-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-time-button-active-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..912df56ea9
Binary files /dev/null and b/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-time-button-active-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-time-button-active-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-time-button-active-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..d42fedf747
Binary files /dev/null and b/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-time-button-active-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-time-button-active-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-time-button-active-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..7c5a8a3dd6
Binary files /dev/null and b/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-time-button-active-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-time-button-active-md-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-time-button-active-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..ff38ee55f4
Binary files /dev/null and b/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-time-button-active-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-time-button-active-md-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-time-button-active-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..c1e3fe559d
Binary files /dev/null and b/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-time-button-active-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-time-button-active-md-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-time-button-active-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..f6a23c7a14
Binary files /dev/null and b/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-time-button-active-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-time-button-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-time-button-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..c56abdbba7
Binary files /dev/null and b/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-time-button-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-time-button-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-time-button-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..c84b92e3f3
Binary files /dev/null and b/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-time-button-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-time-button-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-time-button-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..52b7447a67
Binary files /dev/null and b/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-time-button-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-time-button-md-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-time-button-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..6c44ee7a68
Binary files /dev/null and b/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-time-button-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-time-button-md-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-time-button-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..73c0ea15fb
Binary files /dev/null and b/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-time-button-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-time-button-md-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-time-button-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..ea1d2a3cf3
Binary files /dev/null and b/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-time-button-md-ltr-Mobile-Safari-linux.png differ
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
new file mode 100644
index 0000000000..26407824fb
Binary files /dev/null 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
new file mode 100644
index 0000000000..b12a1f8b12
Binary files /dev/null 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
new file mode 100644
index 0000000000..af2ff059e1
Binary files /dev/null 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
new file mode 100644
index 0000000000..6dc7b71ce3
Binary files /dev/null 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
new file mode 100644
index 0000000000..ee7bf829ec
Binary files /dev/null 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
new file mode 100644
index 0000000000..a560454e4d
Binary files /dev/null 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/custom/datetime.e2e.ts-snapshots/datetime-custom-wheel-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-wheel-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..431c7cc96d
Binary files /dev/null and b/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-wheel-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-wheel-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-wheel-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..a855426ba0
Binary files /dev/null and b/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-wheel-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-wheel-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-wheel-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..2a7ae19d73
Binary files /dev/null and b/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-wheel-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-wheel-md-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-wheel-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..3254451986
Binary files /dev/null and b/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-wheel-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-wheel-md-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-wheel-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..82c71323a6
Binary files /dev/null and b/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-wheel-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-wheel-md-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-wheel-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..54116af529
Binary files /dev/null and b/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-wheel-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/custom/index.html b/core/src/components/datetime/test/custom/index.html
new file mode 100644
index 0000000000..722a026dc5
--- /dev/null
+++ b/core/src/components/datetime/test/custom/index.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Datetime - Custom</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>
+    <style>
+      .grid {
+        display: grid;
+        grid-template-columns: repeat(3, minmax(250px, 1fr));
+        grid-row-gap: 20px;
+        grid-column-gap: 20px;
+      }
+
+      h2 {
+        font-size: 12px;
+        font-weight: normal;
+
+        color: #6f7378;
+
+        margin-top: 10px;
+        margin-left: 5px;
+      }
+
+      @media screen and (max-width: 800px) {
+        .grid {
+          grid-template-columns: 1fr;
+          padding: 0;
+        }
+      }
+
+      /*
+        The second selectors that target ion-picker(-column)-internal
+        directly are for styling the time picker. This is currently
+        undocumented usage.
+      */
+
+      ion-datetime,
+      ion-picker-internal {
+        --wheel-highlight-background: rgb(218, 216, 255);
+        --wheel-fade-background-rgb: 245, 235, 247;
+      }
+
+      ion-datetime {
+        --background: rgb(245, 235, 247);
+        --background-rgb: 245, 235, 247;
+      }
+
+      ion-picker-internal {
+        background-color: rgb(245, 235, 247);
+      }
+
+      ion-datetime::part(wheel-item),
+      ion-picker-column-internal::part(wheel-item) {
+        color: rgb(255, 134, 154);
+      }
+
+      ion-datetime::part(wheel-item active),
+      ion-picker-column-internal::part(wheel-item active) {
+        color: rgb(128, 30, 171);
+      }
+
+      ion-datetime::part(time-button) {
+        color: rgb(128, 30, 171);
+      }
+
+      ion-datetime::part(time-button active) {
+        background-color: rgb(248, 215, 255);
+      }
+    </style>
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-header translucent="true">
+        <ion-toolbar>
+          <ion-title>Datetime - Custom</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content class="ion-padding">
+        <div class="grid">
+          <div class="grid-item">
+            <h2>Grid Style</h2>
+            <ion-datetime id="custom-grid" value="2020-03-14T14:23:00.000Z"></ion-datetime>
+          </div>
+          <div class="grid-item">
+            <h2>Wheel Style</h2>
+            <ion-datetime id="custom-wheel" prefer-wheel="true" value="2020-03-14T14:23:00.000Z"></ion-datetime>
+          </div>
+        </div>
+      </ion-content>
+    </ion-app>
+  </body>
+</html>
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-month-year-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-month-year-diff-ios-ltr-Mobile-Chrome-linux.png
index d3c61f76b1..fdce2a483c 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-month-year-diff-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-month-year-diff-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-month-year-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-month-year-diff-ios-ltr-Mobile-Firefox-linux.png
index 02a245b3b5..d7b4b1022c 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-month-year-diff-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-month-year-diff-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-month-year-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-month-year-diff-ios-ltr-Mobile-Safari-linux.png
index 31031b961a..1ace75c078 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-month-year-diff-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-month-year-diff-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-month-year-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-month-year-diff-md-ltr-Mobile-Chrome-linux.png
index 7f3a890964..a051e0d0ce 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-month-year-diff-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-month-year-diff-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-month-year-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-month-year-diff-md-ltr-Mobile-Firefox-linux.png
index 79ff8e263e..55eeb7b0b3 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-month-year-diff-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-month-year-diff-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-month-year-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-month-year-diff-md-ltr-Mobile-Safari-linux.png
index feef78d2e0..8d6f69ad61 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-month-year-diff-md-ltr-Mobile-Safari-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-month-year-diff-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-month-year-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-month-year-diff-ios-ltr-Mobile-Chrome-linux.png
index 8c6820ce99..4fc7722a01 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-month-year-diff-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-month-year-diff-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-month-year-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-month-year-diff-ios-ltr-Mobile-Firefox-linux.png
index 803a4c894e..167901c197 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-month-year-diff-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-month-year-diff-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-month-year-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-month-year-diff-ios-ltr-Mobile-Safari-linux.png
index a62ddaa286..405d517599 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-month-year-diff-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-month-year-diff-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-month-year-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-month-year-diff-md-ltr-Mobile-Chrome-linux.png
index 7ea82d8929..2d91e8b490 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-month-year-diff-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-month-year-diff-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-month-year-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-month-year-diff-md-ltr-Mobile-Firefox-linux.png
index 7ce582afdd..e79a0cc52e 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-month-year-diff-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-month-year-diff-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-month-year-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-month-year-diff-md-ltr-Mobile-Safari-linux.png
index 980e90e54a..86580475f0 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-month-year-diff-md-ltr-Mobile-Safari-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-month-year-diff-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-month-year-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-month-year-diff-ios-ltr-Mobile-Chrome-linux.png
index 2bd4569a5b..dd3e99ac66 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-month-year-diff-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-month-year-diff-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-month-year-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-month-year-diff-ios-ltr-Mobile-Firefox-linux.png
index 4969c53910..6a0e81e094 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-month-year-diff-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-month-year-diff-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-month-year-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-month-year-diff-ios-ltr-Mobile-Safari-linux.png
index dc855ae729..b016e797c5 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-month-year-diff-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-month-year-diff-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-month-year-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-month-year-diff-md-ltr-Mobile-Chrome-linux.png
index a42c846527..aa05f01dca 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-month-year-diff-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-month-year-diff-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-month-year-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-month-year-diff-md-ltr-Mobile-Firefox-linux.png
index 3d2d2d7519..f8cfc12ca6 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-month-year-diff-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-month-year-diff-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-month-year-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-month-year-diff-md-ltr-Mobile-Safari-linux.png
index 15080052bc..e6cbd4758a 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-month-year-diff-md-ltr-Mobile-Safari-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-month-year-diff-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/prefer-wheel/datetime.e2e.ts-snapshots/datetime-wheel-date-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/prefer-wheel/datetime.e2e.ts-snapshots/datetime-wheel-date-diff-ios-ltr-Mobile-Chrome-linux.png
index 0969f4e04d..fc1f88eebf 100644
Binary files a/core/src/components/datetime/test/prefer-wheel/datetime.e2e.ts-snapshots/datetime-wheel-date-diff-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/prefer-wheel/datetime.e2e.ts-snapshots/datetime-wheel-date-diff-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/prefer-wheel/datetime.e2e.ts-snapshots/datetime-wheel-date-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/prefer-wheel/datetime.e2e.ts-snapshots/datetime-wheel-date-diff-ios-ltr-Mobile-Firefox-linux.png
index babb265e5d..5ff8f9ff3e 100644
Binary files a/core/src/components/datetime/test/prefer-wheel/datetime.e2e.ts-snapshots/datetime-wheel-date-diff-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/prefer-wheel/datetime.e2e.ts-snapshots/datetime-wheel-date-diff-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/prefer-wheel/datetime.e2e.ts-snapshots/datetime-wheel-date-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/prefer-wheel/datetime.e2e.ts-snapshots/datetime-wheel-date-diff-ios-ltr-Mobile-Safari-linux.png
index 4fdc8afbc8..8f74982cb6 100644
Binary files a/core/src/components/datetime/test/prefer-wheel/datetime.e2e.ts-snapshots/datetime-wheel-date-diff-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/datetime/test/prefer-wheel/datetime.e2e.ts-snapshots/datetime-wheel-date-diff-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/prefer-wheel/datetime.e2e.ts-snapshots/datetime-wheel-date-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/prefer-wheel/datetime.e2e.ts-snapshots/datetime-wheel-date-diff-ios-rtl-Mobile-Chrome-linux.png
index 0969f4e04d..fc1f88eebf 100644
Binary files a/core/src/components/datetime/test/prefer-wheel/datetime.e2e.ts-snapshots/datetime-wheel-date-diff-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/prefer-wheel/datetime.e2e.ts-snapshots/datetime-wheel-date-diff-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/prefer-wheel/datetime.e2e.ts-snapshots/datetime-wheel-date-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/prefer-wheel/datetime.e2e.ts-snapshots/datetime-wheel-date-diff-ios-rtl-Mobile-Firefox-linux.png
index babb265e5d..5ff8f9ff3e 100644
Binary files a/core/src/components/datetime/test/prefer-wheel/datetime.e2e.ts-snapshots/datetime-wheel-date-diff-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/prefer-wheel/datetime.e2e.ts-snapshots/datetime-wheel-date-diff-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/prefer-wheel/datetime.e2e.ts-snapshots/datetime-wheel-date-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/prefer-wheel/datetime.e2e.ts-snapshots/datetime-wheel-date-diff-ios-rtl-Mobile-Safari-linux.png
index 4fdc8afbc8..8f74982cb6 100644
Binary files a/core/src/components/datetime/test/prefer-wheel/datetime.e2e.ts-snapshots/datetime-wheel-date-diff-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/datetime/test/prefer-wheel/datetime.e2e.ts-snapshots/datetime-wheel-date-diff-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/prefer-wheel/datetime.e2e.ts-snapshots/datetime-wheel-date-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/prefer-wheel/datetime.e2e.ts-snapshots/datetime-wheel-date-diff-md-ltr-Mobile-Chrome-linux.png
index 834cd28f53..609b4f8867 100644
Binary files a/core/src/components/datetime/test/prefer-wheel/datetime.e2e.ts-snapshots/datetime-wheel-date-diff-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/prefer-wheel/datetime.e2e.ts-snapshots/datetime-wheel-date-diff-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/prefer-wheel/datetime.e2e.ts-snapshots/datetime-wheel-date-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/prefer-wheel/datetime.e2e.ts-snapshots/datetime-wheel-date-diff-md-ltr-Mobile-Firefox-linux.png
index dc19979e8e..a4d502fe6e 100644
Binary files a/core/src/components/datetime/test/prefer-wheel/datetime.e2e.ts-snapshots/datetime-wheel-date-diff-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/prefer-wheel/datetime.e2e.ts-snapshots/datetime-wheel-date-diff-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/prefer-wheel/datetime.e2e.ts-snapshots/datetime-wheel-date-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/prefer-wheel/datetime.e2e.ts-snapshots/datetime-wheel-date-diff-md-ltr-Mobile-Safari-linux.png
index 04450f0810..507cb99796 100644
Binary files a/core/src/components/datetime/test/prefer-wheel/datetime.e2e.ts-snapshots/datetime-wheel-date-diff-md-ltr-Mobile-Safari-linux.png and b/core/src/components/datetime/test/prefer-wheel/datetime.e2e.ts-snapshots/datetime-wheel-date-diff-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/prefer-wheel/datetime.e2e.ts-snapshots/datetime-wheel-date-diff-md-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/prefer-wheel/datetime.e2e.ts-snapshots/datetime-wheel-date-diff-md-rtl-Mobile-Chrome-linux.png
index 834cd28f53..609b4f8867 100644
Binary files a/core/src/components/datetime/test/prefer-wheel/datetime.e2e.ts-snapshots/datetime-wheel-date-diff-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/prefer-wheel/datetime.e2e.ts-snapshots/datetime-wheel-date-diff-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/prefer-wheel/datetime.e2e.ts-snapshots/datetime-wheel-date-diff-md-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/prefer-wheel/datetime.e2e.ts-snapshots/datetime-wheel-date-diff-md-rtl-Mobile-Firefox-linux.png
index dc19979e8e..a4d502fe6e 100644
Binary files a/core/src/components/datetime/test/prefer-wheel/datetime.e2e.ts-snapshots/datetime-wheel-date-diff-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/prefer-wheel/datetime.e2e.ts-snapshots/datetime-wheel-date-diff-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/prefer-wheel/datetime.e2e.ts-snapshots/datetime-wheel-date-diff-md-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/prefer-wheel/datetime.e2e.ts-snapshots/datetime-wheel-date-diff-md-rtl-Mobile-Safari-linux.png
index 04450f0810..507cb99796 100644
Binary files a/core/src/components/datetime/test/prefer-wheel/datetime.e2e.ts-snapshots/datetime-wheel-date-diff-md-rtl-Mobile-Safari-linux.png and b/core/src/components/datetime/test/prefer-wheel/datetime.e2e.ts-snapshots/datetime-wheel-date-diff-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-diff-ios-ltr-Mobile-Chrome-linux.png
index ae6ddb3d25..9788a7217a 100644
Binary files a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-diff-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-diff-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-diff-ios-ltr-Mobile-Firefox-linux.png
index e33921786d..7a85b777b7 100644
Binary files a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-diff-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-diff-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-diff-ios-ltr-Mobile-Safari-linux.png
index 803b62cf3f..cb65ee81f5 100644
Binary files a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-diff-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-diff-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-diff-ios-rtl-Mobile-Chrome-linux.png
index ae6ddb3d25..9788a7217a 100644
Binary files a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-diff-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-diff-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-diff-ios-rtl-Mobile-Firefox-linux.png
index e33921786d..7a85b777b7 100644
Binary files a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-diff-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-diff-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-diff-ios-rtl-Mobile-Safari-linux.png
index 803b62cf3f..cb65ee81f5 100644
Binary files a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-diff-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-diff-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-diff-md-ltr-Mobile-Chrome-linux.png
index 5243a93e95..62814046bc 100644
Binary files a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-diff-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-diff-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-diff-md-ltr-Mobile-Firefox-linux.png
index 3abbbe9dcc..d1e133f2e6 100644
Binary files a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-diff-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-diff-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-diff-md-ltr-Mobile-Safari-linux.png
index 9c60c0ffe2..55aaeb1c21 100644
Binary files a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-diff-md-ltr-Mobile-Safari-linux.png and b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-diff-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-diff-md-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-diff-md-rtl-Mobile-Chrome-linux.png
index 5243a93e95..62814046bc 100644
Binary files a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-diff-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-diff-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-diff-md-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-diff-md-rtl-Mobile-Firefox-linux.png
index 3abbbe9dcc..d1e133f2e6 100644
Binary files a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-diff-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-diff-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-diff-md-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-diff-md-rtl-Mobile-Safari-linux.png
index 9c60c0ffe2..55aaeb1c21 100644
Binary files a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-diff-md-rtl-Mobile-Safari-linux.png and b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-diff-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-time-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-time-diff-ios-ltr-Mobile-Chrome-linux.png
index ae6ddb3d25..9788a7217a 100644
Binary files a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-time-diff-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-time-diff-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-time-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-time-diff-ios-ltr-Mobile-Firefox-linux.png
index e33921786d..7a85b777b7 100644
Binary files a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-time-diff-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-time-diff-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-time-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-time-diff-ios-ltr-Mobile-Safari-linux.png
index 803b62cf3f..cb65ee81f5 100644
Binary files a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-time-diff-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-time-diff-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-time-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-time-diff-ios-rtl-Mobile-Chrome-linux.png
index ae6ddb3d25..9788a7217a 100644
Binary files a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-time-diff-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-time-diff-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-time-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-time-diff-ios-rtl-Mobile-Firefox-linux.png
index e33921786d..7a85b777b7 100644
Binary files a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-time-diff-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-time-diff-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-time-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-time-diff-ios-rtl-Mobile-Safari-linux.png
index 803b62cf3f..cb65ee81f5 100644
Binary files a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-time-diff-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-time-diff-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-time-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-time-diff-md-ltr-Mobile-Chrome-linux.png
index 5243a93e95..62814046bc 100644
Binary files a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-time-diff-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-time-diff-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-time-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-time-diff-md-ltr-Mobile-Firefox-linux.png
index 3abbbe9dcc..d1e133f2e6 100644
Binary files a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-time-diff-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-time-diff-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-time-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-time-diff-md-ltr-Mobile-Safari-linux.png
index 9c60c0ffe2..55aaeb1c21 100644
Binary files a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-time-diff-md-ltr-Mobile-Safari-linux.png and b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-time-diff-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-time-diff-md-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-time-diff-md-rtl-Mobile-Chrome-linux.png
index 5243a93e95..62814046bc 100644
Binary files a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-time-diff-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-time-diff-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-time-diff-md-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-time-diff-md-rtl-Mobile-Firefox-linux.png
index 3abbbe9dcc..d1e133f2e6 100644
Binary files a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-time-diff-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-time-diff-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-time-diff-md-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-time-diff-md-rtl-Mobile-Safari-linux.png
index 9c60c0ffe2..55aaeb1c21 100644
Binary files a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-time-diff-md-rtl-Mobile-Safari-linux.png and b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-time-diff-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-month-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-month-diff-ios-ltr-Mobile-Chrome-linux.png
index ae6ddb3d25..9788a7217a 100644
Binary files a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-month-diff-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-month-diff-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-month-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-month-diff-ios-ltr-Mobile-Firefox-linux.png
index e33921786d..7a85b777b7 100644
Binary files a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-month-diff-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-month-diff-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-month-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-month-diff-ios-ltr-Mobile-Safari-linux.png
index 803b62cf3f..cb65ee81f5 100644
Binary files a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-month-diff-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-month-diff-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-month-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-month-diff-ios-rtl-Mobile-Chrome-linux.png
index ae6ddb3d25..9788a7217a 100644
Binary files a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-month-diff-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-month-diff-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-month-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-month-diff-ios-rtl-Mobile-Firefox-linux.png
index e33921786d..7a85b777b7 100644
Binary files a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-month-diff-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-month-diff-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-month-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-month-diff-ios-rtl-Mobile-Safari-linux.png
index 803b62cf3f..cb65ee81f5 100644
Binary files a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-month-diff-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-month-diff-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-month-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-month-diff-md-ltr-Mobile-Chrome-linux.png
index 5243a93e95..62814046bc 100644
Binary files a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-month-diff-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-month-diff-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-month-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-month-diff-md-ltr-Mobile-Firefox-linux.png
index 3abbbe9dcc..d1e133f2e6 100644
Binary files a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-month-diff-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-month-diff-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-month-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-month-diff-md-ltr-Mobile-Safari-linux.png
index 9c60c0ffe2..55aaeb1c21 100644
Binary files a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-month-diff-md-ltr-Mobile-Safari-linux.png and b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-month-diff-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-month-diff-md-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-month-diff-md-rtl-Mobile-Chrome-linux.png
index 5243a93e95..62814046bc 100644
Binary files a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-month-diff-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-month-diff-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-month-diff-md-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-month-diff-md-rtl-Mobile-Firefox-linux.png
index 3abbbe9dcc..d1e133f2e6 100644
Binary files a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-month-diff-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-month-diff-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-month-diff-md-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-month-diff-md-rtl-Mobile-Safari-linux.png
index 9c60c0ffe2..55aaeb1c21 100644
Binary files a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-month-diff-md-rtl-Mobile-Safari-linux.png and b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-month-diff-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-month-year-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-month-year-diff-ios-ltr-Mobile-Chrome-linux.png
index ae6ddb3d25..9788a7217a 100644
Binary files a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-month-year-diff-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-month-year-diff-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-month-year-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-month-year-diff-ios-ltr-Mobile-Firefox-linux.png
index e33921786d..7a85b777b7 100644
Binary files a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-month-year-diff-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-month-year-diff-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-month-year-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-month-year-diff-ios-ltr-Mobile-Safari-linux.png
index 803b62cf3f..cb65ee81f5 100644
Binary files a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-month-year-diff-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-month-year-diff-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-month-year-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-month-year-diff-ios-rtl-Mobile-Chrome-linux.png
index ae6ddb3d25..9788a7217a 100644
Binary files a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-month-year-diff-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-month-year-diff-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-month-year-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-month-year-diff-ios-rtl-Mobile-Firefox-linux.png
index e33921786d..7a85b777b7 100644
Binary files a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-month-year-diff-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-month-year-diff-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-month-year-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-month-year-diff-ios-rtl-Mobile-Safari-linux.png
index 803b62cf3f..cb65ee81f5 100644
Binary files a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-month-year-diff-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-month-year-diff-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-month-year-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-month-year-diff-md-ltr-Mobile-Chrome-linux.png
index 5243a93e95..62814046bc 100644
Binary files a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-month-year-diff-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-month-year-diff-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-month-year-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-month-year-diff-md-ltr-Mobile-Firefox-linux.png
index 3abbbe9dcc..d1e133f2e6 100644
Binary files a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-month-year-diff-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-month-year-diff-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-month-year-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-month-year-diff-md-ltr-Mobile-Safari-linux.png
index 9c60c0ffe2..55aaeb1c21 100644
Binary files a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-month-year-diff-md-ltr-Mobile-Safari-linux.png and b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-month-year-diff-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-month-year-diff-md-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-month-year-diff-md-rtl-Mobile-Chrome-linux.png
index 5243a93e95..62814046bc 100644
Binary files a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-month-year-diff-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-month-year-diff-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-month-year-diff-md-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-month-year-diff-md-rtl-Mobile-Firefox-linux.png
index 3abbbe9dcc..d1e133f2e6 100644
Binary files a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-month-year-diff-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-month-year-diff-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-month-year-diff-md-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-month-year-diff-md-rtl-Mobile-Safari-linux.png
index 9c60c0ffe2..55aaeb1c21 100644
Binary files a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-month-year-diff-md-rtl-Mobile-Safari-linux.png and b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-month-year-diff-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-date-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-date-diff-ios-ltr-Mobile-Chrome-linux.png
index ae6ddb3d25..9788a7217a 100644
Binary files a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-date-diff-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-date-diff-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-date-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-date-diff-ios-ltr-Mobile-Firefox-linux.png
index e33921786d..7a85b777b7 100644
Binary files a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-date-diff-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-date-diff-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-date-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-date-diff-ios-ltr-Mobile-Safari-linux.png
index 803b62cf3f..cb65ee81f5 100644
Binary files a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-date-diff-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-date-diff-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-date-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-date-diff-ios-rtl-Mobile-Chrome-linux.png
index ae6ddb3d25..9788a7217a 100644
Binary files a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-date-diff-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-date-diff-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-date-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-date-diff-ios-rtl-Mobile-Firefox-linux.png
index e33921786d..7a85b777b7 100644
Binary files a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-date-diff-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-date-diff-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-date-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-date-diff-ios-rtl-Mobile-Safari-linux.png
index 803b62cf3f..cb65ee81f5 100644
Binary files a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-date-diff-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-date-diff-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-date-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-date-diff-md-ltr-Mobile-Chrome-linux.png
index 5243a93e95..62814046bc 100644
Binary files a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-date-diff-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-date-diff-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-date-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-date-diff-md-ltr-Mobile-Firefox-linux.png
index 3abbbe9dcc..d1e133f2e6 100644
Binary files a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-date-diff-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-date-diff-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-date-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-date-diff-md-ltr-Mobile-Safari-linux.png
index 9c60c0ffe2..55aaeb1c21 100644
Binary files a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-date-diff-md-ltr-Mobile-Safari-linux.png and b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-date-diff-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-date-diff-md-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-date-diff-md-rtl-Mobile-Chrome-linux.png
index 5243a93e95..62814046bc 100644
Binary files a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-date-diff-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-date-diff-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-date-diff-md-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-date-diff-md-rtl-Mobile-Firefox-linux.png
index 3abbbe9dcc..d1e133f2e6 100644
Binary files a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-date-diff-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-date-diff-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-date-diff-md-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-date-diff-md-rtl-Mobile-Safari-linux.png
index 9c60c0ffe2..55aaeb1c21 100644
Binary files a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-date-diff-md-rtl-Mobile-Safari-linux.png and b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-date-diff-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-diff-ios-ltr-Mobile-Chrome-linux.png
index ae6ddb3d25..9788a7217a 100644
Binary files a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-diff-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-diff-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-diff-ios-ltr-Mobile-Firefox-linux.png
index e33921786d..7a85b777b7 100644
Binary files a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-diff-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-diff-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-diff-ios-ltr-Mobile-Safari-linux.png
index 803b62cf3f..cb65ee81f5 100644
Binary files a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-diff-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-diff-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-diff-ios-rtl-Mobile-Chrome-linux.png
index ae6ddb3d25..9788a7217a 100644
Binary files a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-diff-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-diff-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-diff-ios-rtl-Mobile-Firefox-linux.png
index e33921786d..7a85b777b7 100644
Binary files a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-diff-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-diff-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-diff-ios-rtl-Mobile-Safari-linux.png
index 803b62cf3f..cb65ee81f5 100644
Binary files a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-diff-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-diff-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-diff-md-ltr-Mobile-Chrome-linux.png
index 5243a93e95..62814046bc 100644
Binary files a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-diff-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-diff-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-diff-md-ltr-Mobile-Firefox-linux.png
index 3abbbe9dcc..d1e133f2e6 100644
Binary files a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-diff-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-diff-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-diff-md-ltr-Mobile-Safari-linux.png
index 9c60c0ffe2..55aaeb1c21 100644
Binary files a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-diff-md-ltr-Mobile-Safari-linux.png and b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-diff-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-diff-md-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-diff-md-rtl-Mobile-Chrome-linux.png
index 5243a93e95..62814046bc 100644
Binary files a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-diff-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-diff-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-diff-md-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-diff-md-rtl-Mobile-Firefox-linux.png
index 3abbbe9dcc..d1e133f2e6 100644
Binary files a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-diff-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-diff-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-diff-md-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-diff-md-rtl-Mobile-Safari-linux.png
index 9c60c0ffe2..55aaeb1c21 100644
Binary files a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-diff-md-rtl-Mobile-Safari-linux.png and b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-diff-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-year-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-year-diff-ios-ltr-Mobile-Chrome-linux.png
index ae6ddb3d25..9788a7217a 100644
Binary files a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-year-diff-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-year-diff-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-year-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-year-diff-ios-ltr-Mobile-Firefox-linux.png
index e33921786d..7a85b777b7 100644
Binary files a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-year-diff-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-year-diff-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-year-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-year-diff-ios-ltr-Mobile-Safari-linux.png
index 803b62cf3f..cb65ee81f5 100644
Binary files a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-year-diff-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-year-diff-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-year-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-year-diff-ios-rtl-Mobile-Chrome-linux.png
index ae6ddb3d25..9788a7217a 100644
Binary files a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-year-diff-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-year-diff-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-year-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-year-diff-ios-rtl-Mobile-Firefox-linux.png
index e33921786d..7a85b777b7 100644
Binary files a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-year-diff-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-year-diff-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-year-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-year-diff-ios-rtl-Mobile-Safari-linux.png
index 803b62cf3f..cb65ee81f5 100644
Binary files a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-year-diff-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-year-diff-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-year-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-year-diff-md-ltr-Mobile-Chrome-linux.png
index 5243a93e95..62814046bc 100644
Binary files a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-year-diff-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-year-diff-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-year-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-year-diff-md-ltr-Mobile-Firefox-linux.png
index 3abbbe9dcc..d1e133f2e6 100644
Binary files a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-year-diff-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-year-diff-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-year-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-year-diff-md-ltr-Mobile-Safari-linux.png
index 9c60c0ffe2..55aaeb1c21 100644
Binary files a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-year-diff-md-ltr-Mobile-Safari-linux.png and b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-year-diff-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-year-diff-md-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-year-diff-md-rtl-Mobile-Chrome-linux.png
index 5243a93e95..62814046bc 100644
Binary files a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-year-diff-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-year-diff-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-year-diff-md-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-year-diff-md-rtl-Mobile-Firefox-linux.png
index 3abbbe9dcc..d1e133f2e6 100644
Binary files a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-year-diff-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-year-diff-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-year-diff-md-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-year-diff-md-rtl-Mobile-Safari-linux.png
index 9c60c0ffe2..55aaeb1c21 100644
Binary files a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-year-diff-md-rtl-Mobile-Safari-linux.png and b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-year-diff-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/utils/comparison.ts b/core/src/components/datetime/utils/comparison.ts
index b35a81b0e1..0507b16908 100644
--- a/core/src/components/datetime/utils/comparison.ts
+++ b/core/src/components/datetime/utils/comparison.ts
@@ -1,4 +1,5 @@
-import { printIonWarning } from '../../../utils/logging';
+import { printIonWarning } from '@utils/logging';
+
 import type { DatetimeParts } from '../datetime-interface';
 
 /**
diff --git a/core/src/components/datetime/utils/data.ts b/core/src/components/datetime/utils/data.ts
index 6de3aae2a6..a4609a9be9 100644
--- a/core/src/components/datetime/utils/data.ts
+++ b/core/src/components/datetime/utils/data.ts
@@ -411,7 +411,7 @@ export const getYearColumnData = (
     const maxYear = maxParts?.year ?? year;
     const minYear = minParts?.year ?? year - 100;
 
-    for (let i = maxYear; i >= minYear; i--) {
+    for (let i = minYear; i <= maxYear; i++) {
       processedYears.push(i);
     }
   }
diff --git a/core/src/components/datetime/utils/state.ts b/core/src/components/datetime/utils/state.ts
index d2a886537a..f709d7289a 100644
--- a/core/src/components/datetime/utils/state.ts
+++ b/core/src/components/datetime/utils/state.ts
@@ -1,4 +1,5 @@
-import { printIonError } from '../../../utils/logging';
+import { printIonError } from '@utils/logging';
+
 import type {
   DatetimeHighlight,
   DatetimeHighlightCallback,
diff --git a/core/src/components/fab-button/fab-button.tsx b/core/src/components/fab-button/fab-button.tsx
index a98052897c..2a7a4a6198 100755
--- a/core/src/components/fab-button/fab-button.tsx
+++ b/core/src/components/fab-button/fab-button.tsx
@@ -1,13 +1,13 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Prop, h } from '@stencil/core';
+import type { AnchorInterface, ButtonInterface } from '@utils/element-interface';
+import { inheritAriaAttributes } from '@utils/helpers';
+import type { Attributes } from '@utils/helpers';
+import { createColorClasses, hostContext, openURL } from '@utils/theme';
 import { close } from 'ionicons/icons';
 
 import { getIonMode } from '../../global/ionic-global';
 import type { AnimationBuilder, Color } from '../../interface';
-import type { AnchorInterface, ButtonInterface } from '../../utils/element-interface';
-import { inheritAriaAttributes } from '../../utils/helpers';
-import type { Attributes } from '../../utils/helpers';
-import { createColorClasses, hostContext, openURL } from '../../utils/theme';
 import type { RouterDirection } from '../router/utils/interface';
 
 /**
diff --git a/core/src/components/fab/test/basic/fab.e2e.ts-snapshots/fab-open-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/fab/test/basic/fab.e2e.ts-snapshots/fab-open-ios-ltr-Mobile-Firefox-linux.png
index aea81d2fc1..98ac83df2e 100644
Binary files a/core/src/components/fab/test/basic/fab.e2e.ts-snapshots/fab-open-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/fab/test/basic/fab.e2e.ts-snapshots/fab-open-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/fab/test/basic/fab.e2e.ts-snapshots/fab-open-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/fab/test/basic/fab.e2e.ts-snapshots/fab-open-ios-rtl-Mobile-Firefox-linux.png
index aefd887da2..f6b5d1a700 100644
Binary files a/core/src/components/fab/test/basic/fab.e2e.ts-snapshots/fab-open-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/fab/test/basic/fab.e2e.ts-snapshots/fab-open-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/footer/footer.tsx b/core/src/components/footer/footer.tsx
index 11e3947ec5..e857f9afda 100644
--- a/core/src/components/footer/footer.tsx
+++ b/core/src/components/footer/footer.tsx
@@ -1,10 +1,10 @@
 import type { ComponentInterface } from '@stencil/core';
 import { Component, Element, Host, Prop, State, h } from '@stencil/core';
+import { findIonContent, getScrollElement, printIonContentErrorMsg } from '@utils/content';
+import type { KeyboardController } from '@utils/keyboard/keyboard-controller';
+import { createKeyboardController } from '@utils/keyboard/keyboard-controller';
 
 import { getIonMode } from '../../global/ionic-global';
-import { findIonContent, getScrollElement, printIonContentErrorMsg } from '../../utils/content';
-import type { KeyboardController } from '../../utils/keyboard/keyboard-controller';
-import { createKeyboardController } from '../../utils/keyboard/keyboard-controller';
 
 import { handleFooterFade } from './footer.utils';
 
diff --git a/core/src/components/footer/footer.utils.ts b/core/src/components/footer/footer.utils.ts
index 0ceae14057..a269ffb072 100644
--- a/core/src/components/footer/footer.utils.ts
+++ b/core/src/components/footer/footer.utils.ts
@@ -1,6 +1,5 @@
 import { readTask, writeTask } from '@stencil/core';
-
-import { clamp } from '../../utils/helpers';
+import { clamp } from '@utils/helpers';
 
 export const handleFooterFade = (scrollEl: HTMLElement, baseEl: HTMLElement) => {
   readTask(() => {
diff --git a/core/src/components/header/header.tsx b/core/src/components/header/header.tsx
index 35b476d8fb..6b2102a7db 100644
--- a/core/src/components/header/header.tsx
+++ b/core/src/components/header/header.tsx
@@ -1,11 +1,11 @@
 import type { ComponentInterface } from '@stencil/core';
 import { Component, Element, Host, Prop, h, writeTask } from '@stencil/core';
+import { findIonContent, getScrollElement, printIonContentErrorMsg } from '@utils/content';
+import type { Attributes } from '@utils/helpers';
+import { inheritAriaAttributes } from '@utils/helpers';
+import { hostContext } from '@utils/theme';
 
 import { getIonMode } from '../../global/ionic-global';
-import { findIonContent, getScrollElement, printIonContentErrorMsg } from '../../utils/content';
-import type { Attributes } from '../../utils/helpers';
-import { inheritAriaAttributes } from '../../utils/helpers';
-import { hostContext } from '../../utils/theme';
 
 import {
   cloneElement,
diff --git a/core/src/components/header/header.utils.ts b/core/src/components/header/header.utils.ts
index 77c3807cfe..f1b6273ef5 100644
--- a/core/src/components/header/header.utils.ts
+++ b/core/src/components/header/header.utils.ts
@@ -1,6 +1,5 @@
 import { readTask, writeTask } from '@stencil/core';
-
-import { clamp } from '../../utils/helpers';
+import { clamp } from '@utils/helpers';
 
 const TRANSITION = 'all 0.2s ease-in-out';
 
diff --git a/core/src/components/img/img.tsx b/core/src/components/img/img.tsx
index cee4c6f9fd..c83f0fab3c 100644
--- a/core/src/components/img/img.tsx
+++ b/core/src/components/img/img.tsx
@@ -1,9 +1,9 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Prop, State, Watch, h } from '@stencil/core';
+import type { Attributes } from '@utils/helpers';
+import { inheritAttributes } from '@utils/helpers';
 
 import { getIonMode } from '../../global/ionic-global';
-import type { Attributes } from '../../utils/helpers';
-import { inheritAttributes } from '../../utils/helpers';
 
 /**
  * @part image - The inner `img` element.
diff --git a/core/src/components/infinite-scroll-content/infinite-scroll-content.tsx b/core/src/components/infinite-scroll-content/infinite-scroll-content.tsx
index 747d6fab63..841ff278b0 100644
--- a/core/src/components/infinite-scroll-content/infinite-scroll-content.tsx
+++ b/core/src/components/infinite-scroll-content/infinite-scroll-content.tsx
@@ -1,11 +1,11 @@
 import type { ComponentInterface } from '@stencil/core';
 import { Component, Host, Prop, h } from '@stencil/core';
+import { ENABLE_HTML_CONTENT_DEFAULT } from '@utils/config';
+import { sanitizeDOMString } from '@utils/sanitization';
 
 import { config } from '../../global/config';
 import { getIonMode } from '../../global/ionic-global';
-import { ENABLE_HTML_CONTENT_DEFAULT } from '../../utils/config';
 import type { IonicSafeString } from '../../utils/sanitization';
-import { sanitizeDOMString } from '../../utils/sanitization';
 import type { SpinnerTypes } from '../spinner/spinner-configs';
 
 @Component({
diff --git a/core/src/components/infinite-scroll/infinite-scroll.tsx b/core/src/components/infinite-scroll/infinite-scroll.tsx
index f2c04fab73..190fab5863 100644
--- a/core/src/components/infinite-scroll/infinite-scroll.tsx
+++ b/core/src/components/infinite-scroll/infinite-scroll.tsx
@@ -1,8 +1,8 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Method, Prop, State, Watch, h, readTask, writeTask } from '@stencil/core';
+import { findClosestIonContent, getScrollElement, printIonContentErrorMsg } from '@utils/content';
 
 import { getIonMode } from '../../global/ionic-global';
-import { findClosestIonContent, getScrollElement, printIonContentErrorMsg } from '../../utils/content';
 
 @Component({
   tag: 'ion-infinite-scroll',
diff --git a/core/src/components/input/input.md.outline.scss b/core/src/components/input/input.md.outline.scss
index 30367cf807..4efbd2fcdd 100644
--- a/core/src/components/input/input.md.outline.scss
+++ b/core/src/components/input/input.md.outline.scss
@@ -172,6 +172,16 @@
 
   opacity: 0;
   pointer-events: none;
+
+  /**
+   * The spacer currently inherits
+   * border-box sizing from the Ionic reset styles.
+   * However, we do not want to include padding in
+   * the calculation of the element dimensions.
+   * This code can be removed if input is updated
+   * to use the Shadow DOM.
+   */
+  box-sizing: content-box;
 }
 
 :host(.input-fill-outline) .input-outline-start {
diff --git a/core/src/components/input/input.scss b/core/src/components/input/input.scss
index ab0cf76b37..4a18956e01 100644
--- a/core/src/components/input/input.scss
+++ b/core/src/components/input/input.scss
@@ -463,7 +463,8 @@
  * works on block-level elements. A flex item is
  * considered blockified (https://www.w3.org/TR/css-display-3/#blockify).
  */
-.label-text {
+.label-text,
+::slotted([slot="label"]) {
   text-overflow: ellipsis;
 
   white-space: nowrap;
@@ -471,6 +472,16 @@
   overflow: hidden;
 }
 
+/**
+ * If no label text is placed into the slot
+ * then the element should be hidden otherwise
+ * there will be additional margins added.
+ */
+.label-text-wrapper-hidden,
+.input-outline-notch-hidden {
+  display: none;
+}
+
 .input-wrapper input {
   /**
    * When the floating label appears on top of the
diff --git a/core/src/components/input/input.tsx b/core/src/components/input/input.tsx
index 166f5c2539..edbc963c37 100644
--- a/core/src/components/input/input.tsx
+++ b/core/src/components/input/input.tsx
@@ -1,21 +1,25 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
-import { Build, Component, Element, Event, Host, Method, Prop, State, Watch, h } from '@stencil/core';
+import { Build, Component, Element, Event, Host, Method, Prop, State, Watch, forceUpdate, h } from '@stencil/core';
+import type { LegacyFormController, NotchController } from '@utils/forms';
+import { createLegacyFormController, createNotchController } from '@utils/forms';
+import type { Attributes } from '@utils/helpers';
+import { inheritAriaAttributes, debounceEvent, findItemLabel, inheritAttributes } from '@utils/helpers';
+import { printIonWarning } from '@utils/logging';
+import { createSlotMutationController } from '@utils/slot-mutation-controller';
+import type { SlotMutationController } from '@utils/slot-mutation-controller';
+import { createColorClasses, hostContext } from '@utils/theme';
 import { closeCircle, closeSharp } from 'ionicons/icons';
 
 import { getIonMode } from '../../global/ionic-global';
 import type { AutocompleteTypes, Color, StyleEventDetail, TextFieldTypes } from '../../interface';
-import type { LegacyFormController } from '../../utils/forms';
-import { createLegacyFormController } from '../../utils/forms';
-import type { Attributes } from '../../utils/helpers';
-import { inheritAriaAttributes, debounceEvent, findItemLabel, inheritAttributes } from '../../utils/helpers';
-import { printIonWarning } from '../../utils/logging';
-import { createColorClasses, hostContext } from '../../utils/theme';
 
 import type { InputChangeEventDetail, InputInputEventDetail } from './input-interface';
 import { getCounterText } from './input.utils';
 
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ *
+ * @slot label - The label text to associate with the input. Use the `labelPlacement` property to control where the label is placed relative to the input. Use this if you need to render a label with custom HTML. (EXPERIMENTAL)
  */
 @Component({
   tag: 'ion-input',
@@ -31,6 +35,9 @@ export class Input implements ComponentInterface {
   private inheritedAttributes: Attributes = {};
   private isComposing = false;
   private legacyFormController!: LegacyFormController;
+  private slotMutationController?: SlotMutationController;
+  private notchController?: NotchController;
+  private notchSpacerEl: HTMLElement | undefined;
 
   // This flag ensures we log the deprecation warning at most once.
   private hasLoggedDeprecationWarning = false;
@@ -165,6 +172,10 @@ export class Input implements ComponentInterface {
 
   /**
    * The visible label associated with the input.
+   *
+   * Use this if you need to render a plaintext label.
+   *
+   * The `label` property will take priority over the `label` slot if both are used.
    */
   @Prop() label?: string;
 
@@ -273,8 +284,9 @@ export class Input implements ComponentInterface {
   @Prop({ mutable: true }) value?: string | number | null = '';
 
   /**
-   * The `ionInput` event fires when the `value` of an `<ion-input>` element
-   * has been changed.
+   * The `ionInput` event is fired each time the user modifies the input's value.
+   * Unlike the `ionChange` event, the `ionInput` event is fired for each alteration
+   * to the input's value. This typically happens for each keystroke as the user types.
    *
    * For elements that accept text input (`type=text`, `type=tel`, etc.), the interface
    * is [`InputEvent`](https://developer.mozilla.org/en-US/docs/Web/API/InputEvent); for others,
@@ -284,9 +296,9 @@ export class Input implements ComponentInterface {
   @Event() ionInput!: EventEmitter<InputInputEventDetail>;
 
   /**
-   * The `ionChange` event is fired for `<ion-input>` elements when the user
-   * modifies the element's value. Unlike the `ionInput` event, the `ionChange`
-   * event is not necessarily fired for each alteration to an element's value.
+   * The `ionChange` event is fired when the user modifies the input's value.
+   * Unlike the `ionInput` event, the `ionChange` event is only fired when changes
+   * are committed, not as the user types.
    *
    * Depending on the way the users interacts with the element, the `ionChange`
    * event fires at a different moment:
@@ -353,6 +365,12 @@ export class Input implements ComponentInterface {
     const { el } = this;
 
     this.legacyFormController = createLegacyFormController(el);
+    this.slotMutationController = createSlotMutationController(el, 'label', () => forceUpdate(this));
+    this.notchController = createNotchController(
+      el,
+      () => this.notchSpacerEl,
+      () => this.labelSlot
+    );
 
     this.emitStyle();
     this.debounceChanged();
@@ -369,6 +387,10 @@ export class Input implements ComponentInterface {
     this.originalIonInput = this.ionInput;
   }
 
+  componentDidRender() {
+    this.notchController?.calculateNotchWidth();
+  }
+
   disconnectedCallback() {
     if (Build.isBrowser) {
       document.dispatchEvent(
@@ -377,6 +399,16 @@ export class Input implements ComponentInterface {
         })
       );
     }
+
+    if (this.slotMutationController) {
+      this.slotMutationController.destroy();
+      this.slotMutationController = undefined;
+    }
+
+    if (this.notchController) {
+      this.notchController.destroy();
+      this.notchController = undefined;
+    }
   }
 
   /**
@@ -578,17 +610,37 @@ export class Input implements ComponentInterface {
 
   private renderLabel() {
     const { label } = this;
-    if (label === undefined) {
-      return;
-    }
 
     return (
-      <div class="label-text-wrapper">
-        <div class="label-text">{this.label}</div>
+      <div
+        class={{
+          'label-text-wrapper': true,
+          'label-text-wrapper-hidden': !this.hasLabel,
+        }}
+      >
+        {label === undefined ? <slot name="label"></slot> : <div class="label-text">{label}</div>}
       </div>
     );
   }
 
+  /**
+   * Gets any content passed into the `label` slot,
+   * not the <slot> definition.
+   */
+  private get labelSlot() {
+    return this.el.querySelector('[slot="label"]');
+  }
+
+  /**
+   * Returns `true` if label content is provided
+   * either by a prop or a content. If you want
+   * to get the plaintext value of the label use
+   * the `labelText` getter instead.
+   */
+  private get hasLabel() {
+    return this.label !== undefined || this.labelSlot !== null;
+  }
+
   /**
    * Renders the border container
    * when fill="outline".
@@ -608,8 +660,13 @@ export class Input implements ComponentInterface {
       return [
         <div class="input-outline-container">
           <div class="input-outline-start"></div>
-          <div class="input-outline-notch">
-            <div class="notch-spacer" aria-hidden="true">
+          <div
+            class={{
+              'input-outline-notch': true,
+              'input-outline-notch-hidden': !this.hasLabel,
+            }}
+          >
+            <div class="notch-spacer" aria-hidden="true" ref={(el) => (this.notchSpacerEl = el)}>
               {this.label}
             </div>
           </div>
diff --git a/core/src/components/input/input.utils.ts b/core/src/components/input/input.utils.ts
index 809deb8a9a..d6812be12d 100644
--- a/core/src/components/input/input.utils.ts
+++ b/core/src/components/input/input.utils.ts
@@ -1,4 +1,4 @@
-import { printIonError } from '../../utils/logging';
+import { printIonError } from '@utils/logging';
 
 export const getCounterText = (
   value: string | number | null | undefined,
diff --git a/core/src/components/input/test/a11y/index.html b/core/src/components/input/test/a11y/index.html
index 7ee00c06a2..acbcdaa333 100644
--- a/core/src/components/input/test/a11y/index.html
+++ b/core/src/components/input/test/a11y/index.html
@@ -15,6 +15,7 @@
     <main>
       <h1>Input - a11y</h1>
 
+      <ion-input><div slot="label">Slotted Label</div></ion-input><br />
       <ion-input label="my label"></ion-input><br />
       <ion-input aria-label="my aria label"></ion-input><br />
       <ion-input label="Email" label-placement="stacked" value="hi@ionic.io"></ion-input><br />
diff --git a/core/src/components/input/test/fill/input.e2e.ts b/core/src/components/input/test/fill/input.e2e.ts
index 7688efdf71..2a7f949f2d 100644
--- a/core/src/components/input/test/fill/input.e2e.ts
+++ b/core/src/components/input/test/fill/input.e2e.ts
@@ -180,3 +180,71 @@ configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => {
     });
   });
 });
+
+configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('input: label slot'), () => {
+    test('should render the notch correctly with a slotted label', async ({ page }) => {
+      await page.setContent(
+        `
+        <style>
+          .custom-label {
+            font-size: 30px;
+          }
+        </style>
+        <ion-input
+          fill="outline"
+          label-placement="stacked"
+          value="apple"
+        >
+          <div slot="label" class="custom-label">My Label Content</div>
+        </ion-input>
+      `,
+        config
+      );
+
+      const input = page.locator('ion-input');
+      expect(await input.screenshot()).toMatchSnapshot(screenshot(`input-fill-outline-slotted-label`));
+    });
+    test('should render the notch correctly with a slotted label after the input was originally hidden', async ({
+      page,
+    }) => {
+      await page.setContent(
+        `
+        <style>
+          .custom-label {
+            font-size: 30px;
+          }
+        </style>
+        <ion-input
+          fill="outline"
+          label-placement="stacked"
+          value="apple"
+          style="display: none"
+        >
+          <div slot="label" class="custom-label">My Label Content</div>
+        </ion-input>
+      `,
+        config
+      );
+
+      const input = page.locator('ion-input');
+
+      await input.evaluate((el: HTMLIonSelectElement) => el.style.removeProperty('display'));
+
+      expect(await input.screenshot()).toMatchSnapshot(screenshot(`input-fill-outline-hidden-slotted-label`));
+    });
+  });
+  test.describe(title('input: notch cutout'), () => {
+    test('notch cutout should be hidden when no label is passed', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-input fill="outline" label-placement="stacked" aria-label="my input"></ion-input>
+      `,
+        config
+      );
+
+      const notchCutout = page.locator('ion-input .input-outline-notch');
+      await expect(notchCutout).toBeHidden();
+    });
+  });
+});
diff --git a/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-hidden-slotted-label-md-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-hidden-slotted-label-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..39518074a1
Binary files /dev/null and b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-hidden-slotted-label-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-hidden-slotted-label-md-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-hidden-slotted-label-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..51ddf40411
Binary files /dev/null and b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-hidden-slotted-label-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-hidden-slotted-label-md-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-hidden-slotted-label-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..991042ab59
Binary files /dev/null and b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-hidden-slotted-label-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-slotted-label-md-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-slotted-label-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..39518074a1
Binary files /dev/null and b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-slotted-label-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-slotted-label-md-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-slotted-label-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..51ddf40411
Binary files /dev/null and b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-slotted-label-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-slotted-label-md-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-slotted-label-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..991042ab59
Binary files /dev/null and b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-slotted-label-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/test/input.spec.ts b/core/src/components/input/test/input.spec.ts
index 599c305aec..e7b39a451d 100644
--- a/core/src/components/input/test/input.spec.ts
+++ b/core/src/components/input/test/input.spec.ts
@@ -44,3 +44,57 @@ describe('input: rendering', () => {
     expect(bottomContent).toBe(null);
   });
 });
+
+/**
+ * Input uses emulated slots, so the internal
+ * behavior will not exactly match Select's slots.
+ * For example, Input does not render an actual `<slot>` element
+ * internally, so we do not check for that here. Instead,
+ * we check to see which label text is being used.
+ * If Input is updated to use Shadow DOM (and therefore native slots),
+ * then we can update these tests to more closely match the Select tests.
+ **/
+describe('input: label rendering', () => {
+  it('should render label prop if only prop provided', async () => {
+    const page = await newSpecPage({
+      components: [Input],
+      html: `
+        <ion-input label="Label Prop Text"></ion-input>
+      `,
+    });
+
+    const input = page.body.querySelector('ion-input');
+
+    const labelText = input.querySelector('.label-text-wrapper');
+
+    expect(labelText.textContent).toBe('Label Prop Text');
+  });
+  it('should render label slot if only slot provided', async () => {
+    const page = await newSpecPage({
+      components: [Input],
+      html: `
+        <ion-input><div slot="label">Label Slot Text</div></ion-input>
+      `,
+    });
+
+    const input = page.body.querySelector('ion-input');
+
+    const labelText = input.querySelector('.label-text-wrapper');
+
+    expect(labelText.textContent).toBe('Label Slot Text');
+  });
+  it('should render label prop if both prop and slot provided', async () => {
+    const page = await newSpecPage({
+      components: [Input],
+      html: `
+        <ion-input label="Label Prop Text"><div slot="label">Label Slot Text</div></ion-input>
+      `,
+    });
+
+    const input = page.body.querySelector('ion-input');
+
+    const labelText = input.querySelector('.label-text-wrapper');
+
+    expect(labelText.textContent).toBe('Label Prop Text');
+  });
+});
diff --git a/core/src/components/input/test/label-placement/input.e2e.ts b/core/src/components/input/test/label-placement/input.e2e.ts
index eb0698fbf7..218e718a3d 100644
--- a/core/src/components/input/test/label-placement/input.e2e.ts
+++ b/core/src/components/input/test/label-placement/input.e2e.ts
@@ -14,17 +14,6 @@ configs().forEach(({ title, screenshot, config }) => {
       const input = page.locator('ion-input');
       expect(await input.screenshot()).toMatchSnapshot(screenshot(`input-placement-start`));
     });
-
-    test('long label should truncate', async ({ page }) => {
-      await page.setContent(
-        `
-        <ion-input label="Email Email Email Email Email Email Email Email Email Email Email Email" value="example@ionic.io" label-placement="start"></ion-input>
-      `,
-        config
-      );
-      const input = page.locator('ion-input');
-      expect(await input.screenshot()).toMatchSnapshot(screenshot(`input-placement-start-long-label`));
-    });
   });
   test.describe(title('input: label placement end'), () => {
     test('label should appear on the ending side of the input', async ({ page }) => {
@@ -38,16 +27,6 @@ configs().forEach(({ title, screenshot, config }) => {
       const input = page.locator('ion-input');
       expect(await input.screenshot()).toMatchSnapshot(screenshot(`input-placement-end`));
     });
-    test('long label should truncate', async ({ page }) => {
-      await page.setContent(
-        `
-        <ion-input label="Email Email Email Email Email Email Email Email Email Email Email Email" value="example@ionic.io" label-placement="end"></ion-input>
-      `,
-        config
-      );
-      const input = page.locator('ion-input');
-      expect(await input.screenshot()).toMatchSnapshot(screenshot(`input-placement-end-long-label`));
-    });
   });
   test.describe(title('input: label placement fixed'), () => {
     test('label should appear on the starting side of the input, have a fixed width, and show ellipses', async ({
@@ -179,3 +158,59 @@ configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => {
     });
   });
 });
+
+configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('input: label overflow'), () => {
+    test('label property should be truncated with an ellipsis', async ({ page }) => {
+      await page.setContent(
+        `
+            <ion-input label="Label Label Label Label Label" placeholder="Text Input"></ion-input>
+          `,
+        config
+      );
+
+      const input = page.locator('ion-input');
+      expect(await input.screenshot()).toMatchSnapshot(screenshot(`input-label-truncate`));
+    });
+    test('label slot should be truncated with an ellipsis', async ({ page }) => {
+      await page.setContent(
+        `
+            <ion-input placeholder="Text Input">
+              <div slot="label">Label Label Label Label Label</div>
+            </ion-input>
+          `,
+        config
+      );
+
+      const input = page.locator('ion-input');
+      expect(await input.screenshot()).toMatchSnapshot(screenshot(`input-label-slot-truncate`));
+    });
+  });
+});
+
+configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('input: async label'), () => {
+    test('input should re-render when label slot is added async', async ({ page }) => {
+      await page.setContent(
+        `
+            <ion-input fill="solid" label-placement="stacked" placeholder="Text Input"></ion-input>
+          `,
+        config
+      );
+
+      const input = page.locator('ion-input');
+
+      await input.evaluate((el: HTMLIonInputElement) => {
+        const labelEl = document.createElement('div');
+        labelEl.slot = 'label';
+        labelEl.innerHTML = 'Email <span class="required" style="color: red">*</span';
+
+        el.appendChild(labelEl);
+      });
+
+      await page.waitForChanges();
+
+      expect(await input.screenshot()).toMatchSnapshot(screenshot(`input-async-label`));
+    });
+  });
+});
diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-async-label-md-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-async-label-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..f0b40be26b
Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-async-label-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-async-label-md-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-async-label-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..1383751717
Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-async-label-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-async-label-md-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-async-label-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..683686680d
Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-async-label-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-label-slot-truncate-md-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-label-slot-truncate-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..8bd05c624c
Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-label-slot-truncate-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-label-slot-truncate-md-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-label-slot-truncate-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..259c9dbf1b
Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-label-slot-truncate-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-label-slot-truncate-md-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-label-slot-truncate-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..c3b05b1c43
Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-label-slot-truncate-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-label-truncate-md-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-label-truncate-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..8bd05c624c
Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-label-truncate-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-label-truncate-md-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-label-truncate-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..259c9dbf1b
Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-label-truncate-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-label-truncate-md-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-label-truncate-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..c3b05b1c43
Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-label-truncate-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-long-label-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-long-label-ios-ltr-Mobile-Chrome-linux.png
deleted file mode 100644
index a7064b4b67..0000000000
Binary files a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-long-label-ios-ltr-Mobile-Chrome-linux.png and /dev/null differ
diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-long-label-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-long-label-ios-ltr-Mobile-Firefox-linux.png
deleted file mode 100644
index cfcd07def9..0000000000
Binary files a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-long-label-ios-ltr-Mobile-Firefox-linux.png and /dev/null differ
diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-long-label-ios-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-long-label-ios-ltr-Mobile-Safari-linux.png
deleted file mode 100644
index c3f0abd6d2..0000000000
Binary files a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-long-label-ios-ltr-Mobile-Safari-linux.png and /dev/null differ
diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-long-label-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-long-label-ios-rtl-Mobile-Chrome-linux.png
deleted file mode 100644
index 2206d9a29d..0000000000
Binary files a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-long-label-ios-rtl-Mobile-Chrome-linux.png and /dev/null differ
diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-long-label-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-long-label-ios-rtl-Mobile-Firefox-linux.png
deleted file mode 100644
index bf6ddfda91..0000000000
Binary files a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-long-label-ios-rtl-Mobile-Firefox-linux.png and /dev/null differ
diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-long-label-ios-rtl-Mobile-Safari-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-long-label-ios-rtl-Mobile-Safari-linux.png
deleted file mode 100644
index 7b49bc8636..0000000000
Binary files a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-long-label-ios-rtl-Mobile-Safari-linux.png and /dev/null differ
diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-long-label-md-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-long-label-md-ltr-Mobile-Chrome-linux.png
deleted file mode 100644
index dcc1b0b277..0000000000
Binary files a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-long-label-md-ltr-Mobile-Chrome-linux.png and /dev/null differ
diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-long-label-md-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-long-label-md-ltr-Mobile-Firefox-linux.png
deleted file mode 100644
index 207166e210..0000000000
Binary files a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-long-label-md-ltr-Mobile-Firefox-linux.png and /dev/null differ
diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-long-label-md-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-long-label-md-ltr-Mobile-Safari-linux.png
deleted file mode 100644
index 20a296d384..0000000000
Binary files a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-long-label-md-ltr-Mobile-Safari-linux.png and /dev/null differ
diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-long-label-md-rtl-Mobile-Chrome-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-long-label-md-rtl-Mobile-Chrome-linux.png
deleted file mode 100644
index 66dfa2779e..0000000000
Binary files a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-long-label-md-rtl-Mobile-Chrome-linux.png and /dev/null differ
diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-long-label-md-rtl-Mobile-Firefox-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-long-label-md-rtl-Mobile-Firefox-linux.png
deleted file mode 100644
index 9f7abb1af0..0000000000
Binary files a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-long-label-md-rtl-Mobile-Firefox-linux.png and /dev/null differ
diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-long-label-md-rtl-Mobile-Safari-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-long-label-md-rtl-Mobile-Safari-linux.png
deleted file mode 100644
index 40759ce6df..0000000000
Binary files a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-long-label-md-rtl-Mobile-Safari-linux.png and /dev/null differ
diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-long-label-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-long-label-ios-ltr-Mobile-Chrome-linux.png
deleted file mode 100644
index b9e6710357..0000000000
Binary files a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-long-label-ios-ltr-Mobile-Chrome-linux.png and /dev/null differ
diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-long-label-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-long-label-ios-ltr-Mobile-Firefox-linux.png
deleted file mode 100644
index 25559e0adf..0000000000
Binary files a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-long-label-ios-ltr-Mobile-Firefox-linux.png and /dev/null differ
diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-long-label-ios-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-long-label-ios-ltr-Mobile-Safari-linux.png
deleted file mode 100644
index 7f7ec93642..0000000000
Binary files a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-long-label-ios-ltr-Mobile-Safari-linux.png and /dev/null differ
diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-long-label-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-long-label-ios-rtl-Mobile-Chrome-linux.png
deleted file mode 100644
index 1ef2c02d09..0000000000
Binary files a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-long-label-ios-rtl-Mobile-Chrome-linux.png and /dev/null differ
diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-long-label-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-long-label-ios-rtl-Mobile-Firefox-linux.png
deleted file mode 100644
index c1c0ff4291..0000000000
Binary files a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-long-label-ios-rtl-Mobile-Firefox-linux.png and /dev/null differ
diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-long-label-ios-rtl-Mobile-Safari-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-long-label-ios-rtl-Mobile-Safari-linux.png
deleted file mode 100644
index df285daf58..0000000000
Binary files a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-long-label-ios-rtl-Mobile-Safari-linux.png and /dev/null differ
diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-long-label-md-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-long-label-md-ltr-Mobile-Chrome-linux.png
deleted file mode 100644
index 3e0f6ffaca..0000000000
Binary files a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-long-label-md-ltr-Mobile-Chrome-linux.png and /dev/null differ
diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-long-label-md-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-long-label-md-ltr-Mobile-Firefox-linux.png
deleted file mode 100644
index 423c15b6d6..0000000000
Binary files a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-long-label-md-ltr-Mobile-Firefox-linux.png and /dev/null differ
diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-long-label-md-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-long-label-md-ltr-Mobile-Safari-linux.png
deleted file mode 100644
index 5313e7f970..0000000000
Binary files a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-long-label-md-ltr-Mobile-Safari-linux.png and /dev/null differ
diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-long-label-md-rtl-Mobile-Chrome-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-long-label-md-rtl-Mobile-Chrome-linux.png
deleted file mode 100644
index 20f80eb91e..0000000000
Binary files a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-long-label-md-rtl-Mobile-Chrome-linux.png and /dev/null differ
diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-long-label-md-rtl-Mobile-Firefox-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-long-label-md-rtl-Mobile-Firefox-linux.png
deleted file mode 100644
index 5936a4c5b3..0000000000
Binary files a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-long-label-md-rtl-Mobile-Firefox-linux.png and /dev/null differ
diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-long-label-md-rtl-Mobile-Safari-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-long-label-md-rtl-Mobile-Safari-linux.png
deleted file mode 100644
index e8c47288c9..0000000000
Binary files a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-long-label-md-rtl-Mobile-Safari-linux.png and /dev/null differ
diff --git a/core/src/components/input/test/slot/index.html b/core/src/components/input/test/slot/index.html
new file mode 100644
index 0000000000..56b14181be
--- /dev/null
+++ b/core/src/components/input/test/slot/index.html
@@ -0,0 +1,139 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Input - Slot</title>
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
+    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
+    <script src="../../../../../scripts/testing/scripts.js"></script>
+    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
+    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+    <style>
+      .grid {
+        display: grid;
+        grid-template-columns: repeat(3, minmax(250px, 1fr));
+        grid-row-gap: 20px;
+        grid-column-gap: 20px;
+      }
+      h2 {
+        font-size: 12px;
+        font-weight: normal;
+
+        color: #6f7378;
+
+        margin-top: 10px;
+      }
+      @media screen and (max-width: 800px) {
+        .grid {
+          grid-template-columns: 1fr;
+          padding: 0;
+        }
+      }
+
+      .required {
+        color: red;
+      }
+    </style>
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Input - Slot</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content id="content" class="ion-padding">
+        <div class="grid">
+          <div class="grid-item">
+            <h2>No Fill / Start</h2>
+            <ion-input label-placement="start" value="hi@ionic.io">
+              <div slot="label">Email <span class="required">*</span></div>
+            </ion-input>
+          </div>
+
+          <div class="grid-item">
+            <h2>Solid / Start</h2>
+            <ion-input label-placement="start" fill="solid" value="hi@ionic.io">
+              <div slot="label">Email <span class="required">*</span></div>
+            </ion-input>
+          </div>
+
+          <div class="grid-item">
+            <h2>Outline / Start</h2>
+            <ion-input label-placement="start" fill="outline" value="hi@ionic.io">
+              <div slot="label">Email <span class="required">*</span></div>
+            </ion-input>
+          </div>
+
+          <div class="grid-item">
+            <h2>No Fill / Floating</h2>
+            <ion-input label-placement="floating" value="hi@ionic.io">
+              <div slot="label">Email <span class="required">*</span></div>
+            </ion-input>
+          </div>
+
+          <div class="grid-item">
+            <h2>Solid / Floating</h2>
+            <ion-input label-placement="floating" fill="solid" value="hi@ionic.io">
+              <div slot="label">Email <span class="required">*</span></div>
+            </ion-input>
+          </div>
+
+          <div class="grid-item">
+            <h2>Outline / Floating</h2>
+            <ion-input label-placement="floating" fill="outline" value="hi@ionic.io">
+              <div slot="label">Email <span class="required">*</span></div>
+            </ion-input>
+          </div>
+
+          <div class="grid-item">
+            <h2>Outline / Floating / Async</h2>
+            <ion-input id="solid-async" label-placement="floating" fill="outline" value="hi@ionic.io"></ion-input>
+          </div>
+        </div>
+
+        <ion-button onclick="addSlot()">Add Slotted Content</ion-button>
+        <ion-button onclick="updateSlot()">Update Slotted Content</ion-button>
+        <ion-button onclick="removeSlot()">Remove Slotted Content</ion-button>
+      </ion-content>
+    </ion-app>
+
+    <script>
+      const solidAsync = document.querySelector('#solid-async');
+
+      const getSlottedContent = () => {
+        return solidAsync.querySelector('[slot="label"]');
+      };
+
+      const addSlot = () => {
+        if (getSlottedContent() === null) {
+          const labelEl = document.createElement('div');
+          labelEl.slot = 'label';
+          labelEl.innerHTML = 'Email <span class="required">*</span>';
+
+          solidAsync.appendChild(labelEl);
+        }
+      };
+
+      const removeSlot = () => {
+        if (getSlottedContent() !== null) {
+          solidAsync.querySelector('[slot="label"]').remove();
+        }
+      };
+
+      const updateSlot = () => {
+        const slottedContent = getSlottedContent();
+
+        if (slottedContent !== null) {
+          slottedContent.textContent = 'This is my really really really long text';
+        }
+      };
+    </script>
+  </body>
+</html>
diff --git a/core/src/components/item-divider/item-divider.tsx b/core/src/components/item-divider/item-divider.tsx
index 92fc9e0338..ac449ffa3a 100644
--- a/core/src/components/item-divider/item-divider.tsx
+++ b/core/src/components/item-divider/item-divider.tsx
@@ -1,9 +1,9 @@
 import type { ComponentInterface } from '@stencil/core';
 import { Component, Element, Host, Prop, h } from '@stencil/core';
+import { createColorClasses } from '@utils/theme';
 
 import { getIonMode } from '../../global/ionic-global';
 import type { Color } from '../../interface';
-import { createColorClasses } from '../../utils/theme';
 
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
diff --git a/core/src/components/item-option/item-option.tsx b/core/src/components/item-option/item-option.tsx
index a62990f250..81bee8b8fe 100644
--- a/core/src/components/item-option/item-option.tsx
+++ b/core/src/components/item-option/item-option.tsx
@@ -1,10 +1,10 @@
 import type { ComponentInterface } from '@stencil/core';
 import { Component, Element, Host, Prop, h } from '@stencil/core';
+import type { AnchorInterface, ButtonInterface } from '@utils/element-interface';
+import { createColorClasses } from '@utils/theme';
 
 import { getIonMode } from '../../global/ionic-global';
 import type { Color } from '../../interface';
-import type { AnchorInterface, ButtonInterface } from '../../utils/element-interface';
-import { createColorClasses } from '../../utils/theme';
 
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
diff --git a/core/src/components/item-options/item-options.tsx b/core/src/components/item-options/item-options.tsx
index fcd84abcca..3b17a78fce 100644
--- a/core/src/components/item-options/item-options.tsx
+++ b/core/src/components/item-options/item-options.tsx
@@ -1,8 +1,8 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Method, Prop, h } from '@stencil/core';
+import { isEndSide } from '@utils/helpers';
 
 import { getIonMode } from '../../global/ionic-global';
-import { isEndSide } from '../../utils/helpers';
 import type { Side } from '../menu/menu-interface';
 
 @Component({
diff --git a/core/src/components/item-sliding/item-sliding.tsx b/core/src/components/item-sliding/item-sliding.tsx
index 74c854e185..c6f4546809 100644
--- a/core/src/components/item-sliding/item-sliding.tsx
+++ b/core/src/components/item-sliding/item-sliding.tsx
@@ -1,11 +1,11 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Method, Prop, State, Watch, h } from '@stencil/core';
+import { findClosestIonContent, disableContentScrollY, resetContentScrollY } from '@utils/content';
+import { isEndSide } from '@utils/helpers';
 import { watchForOptions } from '@utils/watch-options';
 
 import { getIonMode } from '../../global/ionic-global';
 import type { Gesture, GestureDetail } from '../../interface';
-import { findClosestIonContent, disableContentScrollY, resetContentScrollY } from '../../utils/content';
-import { isEndSide } from '../../utils/helpers';
 import type { Side } from '../menu/menu-interface';
 
 const SWIPE_MARGIN = 30;
diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts
index c4db981021..9a6f4fe1b8 100644
--- a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts
+++ b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts
@@ -3,26 +3,27 @@ import { configs, dragElementBy, test } from '@utils/test/playwright';
 
 import { testSlidingItem } from '../test.utils';
 
+// TODO FW-3006
 /**
  * item-sliding doesn't have mode-specific styling
  */
+configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('item-sliding: basic'), () => {
+    test.fixme('should not have visual regressions', async ({ page }) => {
+      await page.goto(`/src/components/item-sliding/test/basic`, config);
+
+      await testSlidingItem(page, 'item2', 'start', screenshot, true);
+      await testSlidingItem(page, 'item2', 'end', screenshot);
+    });
+  });
+});
+
+// TODO FW-3006
+/**
+ * This behavior does not vary across modes/directions
+ */
 configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
   test.describe(title('item-sliding: basic'), () => {
-    // TODO FW-3006
-    test.skip('should not have visual regressions', async ({ page, browserName }, testInfo) => {
-      // TODO(FW-2608)
-      test.fixme(
-        testInfo.project.metadata.rtl === true && (browserName === 'firefox' || browserName === 'webkit'),
-        'https://github.com/ionic-team/ionic-framework/issues/26103'
-      );
-
-      await page.goto(`/src/components/item-sliding/test/basic`, config);
-      const item = page.locator('#item2');
-
-      await testSlidingItem(page, item, 'start', true);
-      await testSlidingItem(page, item, 'end');
-    });
-
     // mouse gesture is flaky on CI, skip for now
     test.fixme('should open when swiped', async ({ page, skip }) => {
       skip.browser(
@@ -40,7 +41,6 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
       await expect(item).toHaveScreenshot(screenshot(`item-sliding-gesture`));
     });
 
-    // TODO FW-3006
     test.skip('should not scroll when the item-sliding is swiped', async ({ page, skip }) => {
       skip.browser('webkit', 'mouse.wheel is not available in WebKit');
 
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts
index c0d32ec0f7..7b11e1ad1e 100644
--- a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts
+++ b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts
@@ -3,21 +3,17 @@ import { configs, test } from '@utils/test/playwright';
 import { testSlidingItem } from '../test.utils';
 
 // TODO FW-3006
-configs().forEach(({ title, config }) => {
+/**
+ * item-sliding doesn't have mode-specific styling
+ */
+configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => {
   test.describe.skip(title('item-sliding: icons'), () => {
-    test('should not have visual regressions', async ({ page, browserName, skip }, testInfo) => {
-      // TODO(FW-2608)
-      test.fixme(
-        testInfo.project.metadata.rtl === true && (browserName === 'firefox' || browserName === 'webkit'),
-        'https://github.com/ionic-team/ionic-framework/issues/26103'
-      );
-
-      skip.mode('ios', "item-sliding doesn't have mode-specific styling");
+    test('should not have visual regressions', async ({ page }) => {
       await page.goto(`/src/components/item-sliding/test/icons`, config);
 
       const itemIDs = ['iconsOnly', 'iconsStart', 'iconsEnd', 'iconsTop', 'iconsBottom'];
       for (const itemID of itemIDs) {
-        await testSlidingItem(page, page.locator(`#${itemID}`), itemID);
+        await testSlidingItem(page, itemID, itemID, screenshot);
       }
     });
   });
diff --git a/core/src/components/item-sliding/test/test.utils.ts b/core/src/components/item-sliding/test/test.utils.ts
index 17fe093d11..5f759963d5 100644
--- a/core/src/components/item-sliding/test/test.utils.ts
+++ b/core/src/components/item-sliding/test/test.utils.ts
@@ -1,13 +1,15 @@
 import { expect } from '@playwright/test';
-import type { Locator } from '@playwright/test';
-import type { E2EPage } from '@utils/test/playwright';
+import type { E2EPage, ScreenshotFn } from '@utils/test/playwright';
 
 export const testSlidingItem = async (
   page: E2EPage,
-  item: Locator,
+  itemID: string,
   screenshotNameSuffix: string,
+  screenshot: ScreenshotFn,
   openStart = false
 ) => {
+  const item = page.locator(`#${itemID}`);
+
   // passing a param into the eval callback is tricky due to execution context
   // so just do the check outside the callback instead to make things easy
   if (openStart) {
@@ -23,7 +25,7 @@ export const testSlidingItem = async (
   // opening animation takes longer than waitForChanges accounts for
   await page.waitForTimeout(500);
 
-  await expect(item).toHaveScreenshot(`item-sliding-${screenshotNameSuffix}-${page.getSnapshotSettings()}.png`);
+  await expect(item).toHaveScreenshot(screenshot(`item-sliding-${screenshotNameSuffix}`));
 
   await item.evaluate(async (el: HTMLIonItemSlidingElement) => {
     await el.close();
diff --git a/core/src/components/item/item.tsx b/core/src/components/item/item.tsx
index 3db4589d9d..4e06b0ec52 100644
--- a/core/src/components/item/item.tsx
+++ b/core/src/components/item/item.tsx
@@ -1,14 +1,14 @@
 import type { ComponentInterface } from '@stencil/core';
 import { Component, Element, Host, Listen, Prop, State, Watch, forceUpdate, h } from '@stencil/core';
+import type { AnchorInterface, ButtonInterface } from '@utils/element-interface';
+import type { Attributes } from '@utils/helpers';
+import { inheritAttributes, raf } from '@utils/helpers';
+import { printIonError, printIonWarning } from '@utils/logging';
+import { createColorClasses, hostContext, openURL } from '@utils/theme';
 import { chevronForward } from 'ionicons/icons';
 
 import { getIonMode } from '../../global/ionic-global';
 import type { AnimationBuilder, Color, CssClassMap, StyleEventDetail } from '../../interface';
-import type { AnchorInterface, ButtonInterface } from '../../utils/element-interface';
-import type { Attributes } from '../../utils/helpers';
-import { inheritAttributes, raf } from '../../utils/helpers';
-import { printIonError, printIonWarning } from '../../utils/logging';
-import { createColorClasses, hostContext, openURL } from '../../utils/theme';
 import type { InputInputEventDetail } from '../input/input-interface';
 import type { RouterDirection } from '../router/utils/interface';
 
diff --git a/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-ios-ltr-Mobile-Firefox-linux.png
index d177438016..383a62a77a 100644
Binary files a/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-ios-rtl-Mobile-Firefox-linux.png
index 78210b51fe..ef9758bd72 100644
Binary files a/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-md-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-md-ltr-Mobile-Firefox-linux.png
index 17ceeda661..1c706c5059 100644
Binary files a/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-md-rtl-Mobile-Firefox-linux.png b/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-md-rtl-Mobile-Firefox-linux.png
index 97d9ded432..fae9ed265e 100644
Binary files a/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/label/label.tsx b/core/src/components/label/label.tsx
index f916be213b..1cfe88ffb7 100644
--- a/core/src/components/label/label.tsx
+++ b/core/src/components/label/label.tsx
@@ -1,9 +1,9 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Prop, State, Watch, h } from '@stencil/core';
+import { createColorClasses, hostContext } from '@utils/theme';
 
 import { getIonMode } from '../../global/ionic-global';
 import type { Color, StyleEventDetail } from '../../interface';
-import { createColorClasses, hostContext } from '../../utils/theme';
 
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
diff --git a/core/src/components/list-header/list-header.tsx b/core/src/components/list-header/list-header.tsx
index 647ddac343..8fb939c127 100644
--- a/core/src/components/list-header/list-header.tsx
+++ b/core/src/components/list-header/list-header.tsx
@@ -1,9 +1,9 @@
 import type { ComponentInterface } from '@stencil/core';
 import { Component, Host, Prop, h } from '@stencil/core';
+import { createColorClasses } from '@utils/theme';
 
 import { getIonMode } from '../../global/ionic-global';
 import type { Color } from '../../interface';
-import { createColorClasses } from '../../utils/theme';
 
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
diff --git a/core/src/components/loading/animations/ios.enter.ts b/core/src/components/loading/animations/ios.enter.ts
index 2aad2976af..eeaf4af527 100644
--- a/core/src/components/loading/animations/ios.enter.ts
+++ b/core/src/components/loading/animations/ios.enter.ts
@@ -1,5 +1,6 @@
+import { createAnimation } from '@utils/animation/animation';
+
 import type { Animation } from '../../../interface';
-import { createAnimation } from '../../../utils/animation/animation';
 
 /**
  * iOS Loading Enter Animation
diff --git a/core/src/components/loading/animations/ios.leave.ts b/core/src/components/loading/animations/ios.leave.ts
index 9a9c340000..b02b1102c4 100644
--- a/core/src/components/loading/animations/ios.leave.ts
+++ b/core/src/components/loading/animations/ios.leave.ts
@@ -1,5 +1,6 @@
+import { createAnimation } from '@utils/animation/animation';
+
 import type { Animation } from '../../../interface';
-import { createAnimation } from '../../../utils/animation/animation';
 
 /**
  * iOS Loading Leave Animation
diff --git a/core/src/components/loading/animations/md.enter.ts b/core/src/components/loading/animations/md.enter.ts
index 07dbf91285..c2cadf8e9b 100644
--- a/core/src/components/loading/animations/md.enter.ts
+++ b/core/src/components/loading/animations/md.enter.ts
@@ -1,5 +1,6 @@
+import { createAnimation } from '@utils/animation/animation';
+
 import type { Animation } from '../../../interface';
-import { createAnimation } from '../../../utils/animation/animation';
 
 /**
  * Md Loading Enter Animation
diff --git a/core/src/components/loading/animations/md.leave.ts b/core/src/components/loading/animations/md.leave.ts
index d51c06773b..27d398955d 100644
--- a/core/src/components/loading/animations/md.leave.ts
+++ b/core/src/components/loading/animations/md.leave.ts
@@ -1,5 +1,6 @@
+import { createAnimation } from '@utils/animation/animation';
+
 import type { Animation } from '../../../interface';
-import { createAnimation } from '../../../utils/animation/animation';
 
 /**
  * Md Loading Leave Animation
diff --git a/core/src/components/loading/loading.tsx b/core/src/components/loading/loading.tsx
index c8a04dc69c..46fd93da0c 100644
--- a/core/src/components/loading/loading.tsx
+++ b/core/src/components/loading/loading.tsx
@@ -1,11 +1,7 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Watch, Component, Element, Event, Host, Method, Prop, h } from '@stencil/core';
-
-import { config } from '../../global/config';
-import { getIonMode } from '../../global/ionic-global';
-import type { AnimationBuilder, FrameworkDelegate, OverlayInterface } from '../../interface';
-import { ENABLE_HTML_CONTENT_DEFAULT } from '../../utils/config';
-import { raf } from '../../utils/helpers';
+import { ENABLE_HTML_CONTENT_DEFAULT } from '@utils/config';
+import { raf } from '@utils/helpers';
 import {
   BACKDROP,
   dismiss,
@@ -15,11 +11,15 @@ import {
   createDelegateController,
   createTriggerController,
   setOverlayId,
-} from '../../utils/overlays';
+} from '@utils/overlays';
+import { sanitizeDOMString } from '@utils/sanitization';
+import { getClassMap } from '@utils/theme';
+
+import { config } from '../../global/config';
+import { getIonMode } from '../../global/ionic-global';
+import type { AnimationBuilder, FrameworkDelegate, OverlayInterface } from '../../interface';
 import type { OverlayEventDetail } from '../../utils/overlays-interface';
 import type { IonicSafeString } from '../../utils/sanitization';
-import { sanitizeDOMString } from '../../utils/sanitization';
-import { getClassMap } from '../../utils/theme';
 import type { SpinnerTypes } from '../spinner/spinner-configs';
 
 import { iosEnterAnimation } from './animations/ios.enter';
diff --git a/core/src/components/menu-button/menu-button.tsx b/core/src/components/menu-button/menu-button.tsx
index fd7c60108d..5441bf2a54 100644
--- a/core/src/components/menu-button/menu-button.tsx
+++ b/core/src/components/menu-button/menu-button.tsx
@@ -1,15 +1,15 @@
 import type { ComponentInterface } from '@stencil/core';
 import { Component, Element, Host, Listen, Prop, State, h } from '@stencil/core';
+import type { ButtonInterface } from '@utils/element-interface';
+import type { Attributes } from '@utils/helpers';
+import { inheritAriaAttributes } from '@utils/helpers';
+import { menuController } from '@utils/menu-controller';
+import { createColorClasses, hostContext } from '@utils/theme';
 import { menuOutline, menuSharp } from 'ionicons/icons';
 
 import { config } from '../../global/config';
 import { getIonMode } from '../../global/ionic-global';
 import type { Color } from '../../interface';
-import type { ButtonInterface } from '../../utils/element-interface';
-import type { Attributes } from '../../utils/helpers';
-import { inheritAriaAttributes } from '../../utils/helpers';
-import { menuController } from '../../utils/menu-controller';
-import { createColorClasses, hostContext } from '../../utils/theme';
 import { updateVisibility } from '../menu-toggle/menu-toggle-util';
 
 /**
diff --git a/core/src/components/menu-toggle/menu-toggle-util.ts b/core/src/components/menu-toggle/menu-toggle-util.ts
index 4dc64ff9a6..c684945c4d 100644
--- a/core/src/components/menu-toggle/menu-toggle-util.ts
+++ b/core/src/components/menu-toggle/menu-toggle-util.ts
@@ -1,4 +1,4 @@
-import { menuController } from '../../utils/menu-controller';
+import { menuController } from '@utils/menu-controller';
 
 // Given a menu, return whether or not the menu toggle should be visible
 export const updateVisibility = async (menu: string | undefined) => {
diff --git a/core/src/components/menu-toggle/menu-toggle.tsx b/core/src/components/menu-toggle/menu-toggle.tsx
index 09a55d422c..c9dd7f3b9e 100644
--- a/core/src/components/menu-toggle/menu-toggle.tsx
+++ b/core/src/components/menu-toggle/menu-toggle.tsx
@@ -1,8 +1,8 @@
 import type { ComponentInterface } from '@stencil/core';
 import { Component, Host, Listen, Prop, State, h } from '@stencil/core';
+import { menuController } from '@utils/menu-controller';
 
 import { getIonMode } from '../../global/ionic-global';
-import { menuController } from '../../utils/menu-controller';
 
 import { updateVisibility } from './menu-toggle-util';
 
diff --git a/core/src/components/menu/menu.tsx b/core/src/components/menu/menu.tsx
index f89a0cede9..56c6e3a919 100644
--- a/core/src/components/menu/menu.tsx
+++ b/core/src/components/menu/menu.tsx
@@ -1,15 +1,15 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Build, Component, Element, Event, Host, Listen, Method, Prop, State, Watch, h } from '@stencil/core';
+import { getTimeGivenProgression } from '@utils/animation/cubic-bezier';
+import { GESTURE_CONTROLLER } from '@utils/gesture';
+import type { Attributes } from '@utils/helpers';
+import { inheritAriaAttributes, assert, clamp, isEndSide as isEnd } from '@utils/helpers';
+import { menuController } from '@utils/menu-controller';
+import { getOverlay } from '@utils/overlays';
 
 import { config } from '../../global/config';
 import { getIonMode } from '../../global/ionic-global';
 import type { Animation, Gesture, GestureDetail } from '../../interface';
-import { getTimeGivenProgression } from '../../utils/animation/cubic-bezier';
-import { GESTURE_CONTROLLER } from '../../utils/gesture';
-import type { Attributes } from '../../utils/helpers';
-import { inheritAriaAttributes, assert, clamp, isEndSide as isEnd } from '../../utils/helpers';
-import { menuController } from '../../utils/menu-controller';
-import { getOverlay } from '../../utils/overlays';
 
 import type { MenuChangeEventDetail, MenuI, Side } from './menu-interface';
 
diff --git a/core/src/components/modal/animations/ios.enter.ts b/core/src/components/modal/animations/ios.enter.ts
index caba8e3e74..2001cbdcf4 100644
--- a/core/src/components/modal/animations/ios.enter.ts
+++ b/core/src/components/modal/animations/ios.enter.ts
@@ -1,6 +1,7 @@
+import { createAnimation } from '@utils/animation/animation';
+import { getElementRoot } from '@utils/helpers';
+
 import type { Animation } from '../../../interface';
-import { createAnimation } from '../../../utils/animation/animation';
-import { getElementRoot } from '../../../utils/helpers';
 import { SwipeToCloseDefaults } from '../gestures/swipe-to-close';
 import type { ModalAnimationOptions } from '../modal-interface';
 
diff --git a/core/src/components/modal/animations/ios.leave.ts b/core/src/components/modal/animations/ios.leave.ts
index 85b4aaccda..7fc235dea7 100644
--- a/core/src/components/modal/animations/ios.leave.ts
+++ b/core/src/components/modal/animations/ios.leave.ts
@@ -1,6 +1,7 @@
+import { createAnimation } from '@utils/animation/animation';
+import { getElementRoot } from '@utils/helpers';
+
 import type { Animation } from '../../../interface';
-import { createAnimation } from '../../../utils/animation/animation';
-import { getElementRoot } from '../../../utils/helpers';
 import { SwipeToCloseDefaults } from '../gestures/swipe-to-close';
 import type { ModalAnimationOptions } from '../modal-interface';
 
diff --git a/core/src/components/modal/animations/md.enter.ts b/core/src/components/modal/animations/md.enter.ts
index 6197df74f4..a04c33e7f9 100644
--- a/core/src/components/modal/animations/md.enter.ts
+++ b/core/src/components/modal/animations/md.enter.ts
@@ -1,6 +1,7 @@
+import { createAnimation } from '@utils/animation/animation';
+import { getElementRoot } from '@utils/helpers';
+
 import type { Animation } from '../../../interface';
-import { createAnimation } from '../../../utils/animation/animation';
-import { getElementRoot } from '../../../utils/helpers';
 import type { ModalAnimationOptions } from '../modal-interface';
 
 import { createSheetEnterAnimation } from './sheet';
diff --git a/core/src/components/modal/animations/md.leave.ts b/core/src/components/modal/animations/md.leave.ts
index cd3bb69379..9977c678d0 100644
--- a/core/src/components/modal/animations/md.leave.ts
+++ b/core/src/components/modal/animations/md.leave.ts
@@ -1,6 +1,7 @@
+import { createAnimation } from '@utils/animation/animation';
+import { getElementRoot } from '@utils/helpers';
+
 import type { Animation } from '../../../interface';
-import { createAnimation } from '../../../utils/animation/animation';
-import { getElementRoot } from '../../../utils/helpers';
 import type { ModalAnimationOptions } from '../modal-interface';
 
 import { createSheetLeaveAnimation } from './sheet';
diff --git a/core/src/components/modal/animations/sheet.ts b/core/src/components/modal/animations/sheet.ts
index ae02b65ea0..760414f816 100644
--- a/core/src/components/modal/animations/sheet.ts
+++ b/core/src/components/modal/animations/sheet.ts
@@ -1,4 +1,5 @@
-import { createAnimation } from '../../../utils/animation/animation';
+import { createAnimation } from '@utils/animation/animation';
+
 import type { ModalAnimationOptions } from '../modal-interface';
 import { getBackdropValueForSheet } from '../utils';
 
diff --git a/core/src/components/modal/gestures/sheet.ts b/core/src/components/modal/gestures/sheet.ts
index 06c05fb4e0..9dafceff0d 100644
--- a/core/src/components/modal/gestures/sheet.ts
+++ b/core/src/components/modal/gestures/sheet.ts
@@ -1,7 +1,8 @@
+import { createGesture } from '@utils/gesture';
+import { clamp, raf } from '@utils/helpers';
+
 import type { Animation } from '../../../interface';
 import type { GestureDetail } from '../../../utils/gesture';
-import { createGesture } from '../../../utils/gesture';
-import { clamp, raf } from '../../../utils/helpers';
 import { getBackdropValueForSheet } from '../utils';
 
 import { calculateSpringStep, handleCanDismiss } from './utils';
diff --git a/core/src/components/modal/gestures/swipe-to-close.ts b/core/src/components/modal/gestures/swipe-to-close.ts
index ef807937e1..1c9fe95a2f 100644
--- a/core/src/components/modal/gestures/swipe-to-close.ts
+++ b/core/src/components/modal/gestures/swipe-to-close.ts
@@ -1,14 +1,10 @@
+import { getTimeGivenProgression } from '@utils/animation/cubic-bezier';
+import { isIonContent, findClosestIonContent, disableContentScrollY, resetContentScrollY } from '@utils/content';
+import { createGesture } from '@utils/gesture';
+import { clamp, getElementRoot } from '@utils/helpers';
+
 import type { Animation } from '../../../interface';
-import { getTimeGivenProgression } from '../../../utils/animation/cubic-bezier';
-import {
-  isIonContent,
-  findClosestIonContent,
-  disableContentScrollY,
-  resetContentScrollY,
-} from '../../../utils/content';
 import type { GestureDetail } from '../../../utils/gesture';
-import { createGesture } from '../../../utils/gesture';
-import { clamp, getElementRoot } from '../../../utils/helpers';
 import type { Style as StatusBarStyle } from '../../../utils/native/status-bar';
 import { setCardStatusBarDark, setCardStatusBarDefault } from '../utils';
 
diff --git a/core/src/components/modal/gestures/utils.ts b/core/src/components/modal/gestures/utils.ts
index 54ebcba17a..694227d630 100644
--- a/core/src/components/modal/gestures/utils.ts
+++ b/core/src/components/modal/gestures/utils.ts
@@ -1,5 +1,6 @@
+import { GESTURE } from '@utils/overlays';
+
 import type { Animation } from '../../../interface';
-import { GESTURE } from '../../../utils/overlays';
 
 export const handleCanDismiss = async (el: HTMLIonModalElement, animation: Animation) => {
   /**
diff --git a/core/src/components/modal/modal.tsx b/core/src/components/modal/modal.tsx
index 2960b57272..8068179c38 100644
--- a/core/src/components/modal/modal.tsx
+++ b/core/src/components/modal/modal.tsx
@@ -1,5 +1,24 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Method, Prop, State, Watch, h, writeTask } from '@stencil/core';
+import { findIonContent, printIonContentErrorMsg } from '@utils/content';
+import { CoreDelegate, attachComponent, detachComponent } from '@utils/framework-delegate';
+import { raf, inheritAttributes, hasLazyBuild } from '@utils/helpers';
+import type { Attributes } from '@utils/helpers';
+import { printIonWarning } from '@utils/logging';
+import { Style as StatusBarStyle, StatusBar } from '@utils/native/status-bar';
+import {
+  GESTURE,
+  BACKDROP,
+  activeAnimations,
+  dismiss,
+  eventMethod,
+  prepareOverlay,
+  present,
+  createTriggerController,
+  setOverlayId,
+} from '@utils/overlays';
+import { getClassMap } from '@utils/theme';
+import { deepReady, waitForMount } from '@utils/transition';
 
 import { config } from '../../global/config';
 import { getIonMode } from '../../global/ionic-global';
@@ -12,27 +31,8 @@ import type {
   Gesture,
   OverlayInterface,
 } from '../../interface';
-import { findIonContent, printIonContentErrorMsg } from '../../utils/content';
-import { CoreDelegate, attachComponent, detachComponent } from '../../utils/framework-delegate';
-import { raf, inheritAttributes, hasLazyBuild } from '../../utils/helpers';
-import type { Attributes } from '../../utils/helpers';
 import { KEYBOARD_DID_OPEN } from '../../utils/keyboard/keyboard';
-import { printIonWarning } from '../../utils/logging';
-import { Style as StatusBarStyle, StatusBar } from '../../utils/native/status-bar';
-import {
-  GESTURE,
-  BACKDROP,
-  activeAnimations,
-  dismiss,
-  eventMethod,
-  prepareOverlay,
-  present,
-  createTriggerController,
-  setOverlayId,
-} from '../../utils/overlays';
 import type { OverlayEventDetail } from '../../utils/overlays-interface';
-import { getClassMap } from '../../utils/theme';
-import { deepReady, waitForMount } from '../../utils/transition';
 
 import { iosEnterAnimation } from './animations/ios.enter';
 import { iosLeaveAnimation } from './animations/ios.leave';
diff --git a/core/src/components/modal/utils.ts b/core/src/components/modal/utils.ts
index 9781a4f593..90129839ae 100644
--- a/core/src/components/modal/utils.ts
+++ b/core/src/components/modal/utils.ts
@@ -1,5 +1,5 @@
-import { win } from '../../utils/browser';
-import { StatusBar, Style } from '../../utils/native/status-bar';
+import { win } from '@utils/browser';
+import { StatusBar, Style } from '@utils/native/status-bar';
 
 /**
  * Use y = mx + b to
diff --git a/core/src/components/nav/nav.tsx b/core/src/components/nav/nav.tsx
index 1516c731ce..d6290dee71 100644
--- a/core/src/components/nav/nav.tsx
+++ b/core/src/components/nav/nav.tsx
@@ -1,13 +1,14 @@
 import type { EventEmitter } from '@stencil/core';
 import { Build, Component, Element, Event, Method, Prop, Watch, h } from '@stencil/core';
+import { getTimeGivenProgression } from '@utils/animation/cubic-bezier';
+import { assert } from '@utils/helpers';
+import { printIonWarning } from '@utils/logging';
+import type { TransitionOptions } from '@utils/transition';
+import { lifecycle, setPageHidden, transition } from '@utils/transition';
 
 import { config } from '../../global/config';
 import { getIonMode } from '../../global/ionic-global';
 import type { Animation, AnimationBuilder, ComponentProps, FrameworkDelegate, Gesture } from '../../interface';
-import { getTimeGivenProgression } from '../../utils/animation/cubic-bezier';
-import { assert } from '../../utils/helpers';
-import type { TransitionOptions } from '../../utils/transition';
-import { lifecycle, setPageHidden, transition } from '../../utils/transition';
 import type { NavOutlet, RouteID, RouteWrite, RouterDirection } from '../router/utils/interface';
 
 import { LIFECYCLE_DID_LEAVE, LIFECYCLE_WILL_LEAVE, LIFECYCLE_WILL_UNLOAD } from './constants';
@@ -36,6 +37,7 @@ export class Nav implements NavOutlet {
   private destroyed = false;
   private views: ViewController[] = [];
   private gesture?: Gesture;
+  private didLoad = false;
 
   @Element() el!: HTMLElement;
 
@@ -77,12 +79,25 @@ export class Nav implements NavOutlet {
   @Watch('root')
   rootChanged() {
     const isDev = Build.isDev;
-    if (this.root !== undefined) {
-      if (!this.useRouter) {
+
+    if (this.root === undefined) {
+      return;
+    }
+
+    if (this.didLoad === false) {
+      /**
+       * If the component has not loaded yet, we can skip setting up the root component.
+       * It will be called when `componentDidLoad` fires.
+       */
+      return;
+    }
+
+    if (!this.useRouter) {
+      if (this.root !== undefined) {
         this.setRoot(this.root, this.rootParams);
-      } else if (isDev) {
-        console.warn('<ion-nav> does not support a root attribute when using ion-router.');
       }
+    } else if (isDev) {
+      printIonWarning('<ion-nav> does not support a root attribute when using ion-router.', this.el);
     }
   }
 
@@ -112,6 +127,9 @@ export class Nav implements NavOutlet {
   }
 
   async componentDidLoad() {
+    // We want to set this flag before any watch callbacks are manually called
+    this.didLoad = true;
+
     this.rootChanged();
 
     this.gesture = (await import('../../utils/gesture/swipe-back')).createSwipeBackGesture(
diff --git a/core/src/components/nav/view-controller.ts b/core/src/components/nav/view-controller.ts
index b20c27edac..08b246d8f5 100644
--- a/core/src/components/nav/view-controller.ts
+++ b/core/src/components/nav/view-controller.ts
@@ -1,6 +1,7 @@
+import { attachComponent } from '@utils/framework-delegate';
+import { assert, shallowEqualStringMap } from '@utils/helpers';
+
 import type { AnimationBuilder, ComponentProps, FrameworkDelegate, NavComponentWithProps } from '../../interface';
-import { attachComponent } from '../../utils/framework-delegate';
-import { assert, shallowEqualStringMap } from '../../utils/helpers';
 
 export const VIEW_STATE_NEW = 1;
 export const VIEW_STATE_ATTACHED = 2;
diff --git a/core/src/components/note/note.tsx b/core/src/components/note/note.tsx
index 7b2a46270e..7dadb48438 100644
--- a/core/src/components/note/note.tsx
+++ b/core/src/components/note/note.tsx
@@ -1,9 +1,9 @@
 import type { ComponentInterface } from '@stencil/core';
 import { Component, Host, Prop, h } from '@stencil/core';
+import { createColorClasses } from '@utils/theme';
 
 import { getIonMode } from '../../global/ionic-global';
 import type { Color } from '../../interface';
-import { createColorClasses } from '../../utils/theme';
 
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
diff --git a/core/src/components/picker-column-internal/picker-column-internal.tsx b/core/src/components/picker-column-internal/picker-column-internal.tsx
index 93e3a6a3a9..01a152ee98 100644
--- a/core/src/components/picker-column-internal/picker-column-internal.tsx
+++ b/core/src/components/picker-column-internal/picker-column-internal.tsx
@@ -1,12 +1,12 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Method, Prop, State, Watch, h } from '@stencil/core';
+import { getElementRoot, raf } from '@utils/helpers';
+import { hapticSelectionChanged, hapticSelectionEnd, hapticSelectionStart } from '@utils/native/haptic';
+import { isPlatform } from '@utils/platform';
+import { createColorClasses } from '@utils/theme';
 
 import { getIonMode } from '../../global/ionic-global';
 import type { Color } from '../../interface';
-import { getElementRoot, raf } from '../../utils/helpers';
-import { hapticSelectionChanged, hapticSelectionEnd, hapticSelectionStart } from '../../utils/native/haptic';
-import { isPlatform } from '../../utils/platform';
-import { createColorClasses } from '../../utils/theme';
 import type { PickerInternalCustomEvent } from '../picker-internal/picker-internal-interfaces';
 
 import type { PickerColumnItem } from './picker-column-internal-interfaces';
@@ -90,15 +90,21 @@ export class PickerColumnInternal implements ComponentInterface {
       const ev = entries[0];
 
       if (ev.isIntersecting) {
+        const { activeItem, el } = this;
+
         this.isColumnVisible = true;
         /**
          * Because this initial call to scrollActiveItemIntoView has to fire before
          * the scroll listener is set up, we need to manage the active class manually.
          */
-        const oldActive = getElementRoot(this.el).querySelector(`.${PICKER_COL_ACTIVE}`);
-        oldActive?.classList.remove(PICKER_COL_ACTIVE);
+        const oldActive = getElementRoot(el).querySelector(`.${PICKER_ITEM_ACTIVE_CLASS}`);
+        if (oldActive) {
+          this.setPickerItemActiveState(oldActive, false);
+        }
         this.scrollActiveItemIntoView();
-        this.activeItem?.classList.add(PICKER_COL_ACTIVE);
+        if (activeItem) {
+          this.setPickerItemActiveState(activeItem, true);
+        }
 
         this.initializeScrollListener();
       } else {
@@ -189,6 +195,16 @@ export class PickerColumnInternal implements ComponentInterface {
     }
   };
 
+  private setPickerItemActiveState = (item: Element, isActive: boolean) => {
+    if (isActive) {
+      item.classList.add(PICKER_ITEM_ACTIVE_CLASS);
+      item.part.add(PICKER_ITEM_ACTIVE_PART);
+    } else {
+      item.classList.remove(PICKER_ITEM_ACTIVE_CLASS);
+      item.part.remove(PICKER_ITEM_ACTIVE_PART);
+    }
+  };
+
   /**
    * When ionInputModeChange is emitted, each column
    * needs to check if it is the one being made available
@@ -275,7 +291,7 @@ export class PickerColumnInternal implements ComponentInterface {
         const activeElement = el.shadowRoot!.elementFromPoint(centerX, centerY) as HTMLButtonElement | null;
 
         if (activeEl !== null) {
-          activeEl.classList.remove(PICKER_COL_ACTIVE);
+          this.setPickerItemActiveState(activeEl, false);
         }
 
         if (activeElement === null || activeElement.disabled) {
@@ -306,7 +322,7 @@ export class PickerColumnInternal implements ComponentInterface {
         }
 
         activeEl = activeElement;
-        activeElement.classList.add(PICKER_COL_ACTIVE);
+        this.setPickerItemActiveState(activeElement, true);
 
         timeout = setTimeout(() => {
           this.isScrolling = false;
@@ -401,8 +417,15 @@ export class PickerColumnInternal implements ComponentInterface {
     const { items, color, isActive, numericInput } = this;
     const mode = getIonMode(this);
 
+    /**
+     * exportparts is needed so ion-datetime can expose the parts
+     * from two layers of shadow nesting. If this causes problems,
+     * the attribute can be moved to datetime.tsx and set on every
+     * instance of ion-picker-column-internal there instead.
+     */
     return (
       <Host
+        exportparts={`${PICKER_ITEM_PART}, ${PICKER_ITEM_ACTIVE_PART}`}
         tabindex={0}
         class={createColorClasses(color, {
           [mode]: true,
@@ -443,6 +466,7 @@ export class PickerColumnInternal implements ComponentInterface {
                 this.centerPickerItemInView(ev.target as HTMLElement, true);
               }}
               disabled={item.disabled}
+              part={PICKER_ITEM_PART}
             >
               {item.text}
             </button>
@@ -462,4 +486,6 @@ export class PickerColumnInternal implements ComponentInterface {
   }
 }
 
-const PICKER_COL_ACTIVE = 'picker-item-active';
+const PICKER_ITEM_ACTIVE_CLASS = 'picker-item-active';
+const PICKER_ITEM_PART = 'wheel-item';
+const PICKER_ITEM_ACTIVE_PART = 'active';
diff --git a/core/src/components/picker-column/picker-column.tsx b/core/src/components/picker-column/picker-column.tsx
index 1f3a6398b3..3d21d18b9d 100644
--- a/core/src/components/picker-column/picker-column.tsx
+++ b/core/src/components/picker-column/picker-column.tsx
@@ -1,11 +1,11 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Prop, Watch, h } from '@stencil/core';
+import { clamp } from '@utils/helpers';
+import { hapticSelectionChanged, hapticSelectionEnd, hapticSelectionStart } from '@utils/native/haptic';
+import { getClassMap } from '@utils/theme';
 
 import { getIonMode } from '../../global/ionic-global';
 import type { Gesture, GestureDetail } from '../../interface';
-import { clamp } from '../../utils/helpers';
-import { hapticSelectionChanged, hapticSelectionEnd, hapticSelectionStart } from '../../utils/native/haptic';
-import { getClassMap } from '../../utils/theme';
 import type { PickerColumn } from '../picker/picker-interface';
 
 /**
diff --git a/core/src/components/picker-internal/picker-internal.ios.scss b/core/src/components/picker-internal/picker-internal.ios.scss
index 60613a2847..fdd3faeb38 100644
--- a/core/src/components/picker-internal/picker-internal.ios.scss
+++ b/core/src/components/picker-internal/picker-internal.ios.scss
@@ -1,14 +1,15 @@
 @import "./picker-internal.scss";
+@import "./picker-internal.vars.scss";
 @import "../../themes/ionic.globals.ios";
 
 :host .picker-before {
-  background: linear-gradient(to bottom, var(--background, var(--ion-background-color, #fff)) 20%, rgba(var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255)), 0.8) 100%);
+  background: linear-gradient(to bottom, rgba(#{$picker-fade-background}, 1) 20%, rgba(#{$picker-fade-background}, 0.8) 100%);
 }
 
 :host .picker-after {
-  background: linear-gradient(to top, var(--background, var(--ion-background-color, #fff)) 20%, rgba(var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255)), 0.8) 100%);
+  background: linear-gradient(to top, rgba(#{$picker-fade-background}, 1) 20%, rgba(#{$picker-fade-background}, 0.8) 100%);
 }
 
 :host .picker-highlight {
-  background: var(--ion-color-step-150, #eeeeef);
+  background: var(--wheel-highlight-background, var(--ion-color-step-150, #eeeeef));
 }
diff --git a/core/src/components/picker-internal/picker-internal.md.scss b/core/src/components/picker-internal/picker-internal.md.scss
index 987353b6ae..c7fd47f014 100644
--- a/core/src/components/picker-internal/picker-internal.md.scss
+++ b/core/src/components/picker-internal/picker-internal.md.scss
@@ -1,10 +1,11 @@
 @import "./picker-internal.scss";
+@import "./picker-internal.vars.scss";
 @import "../../themes/ionic.globals.md";
 
 :host .picker-before {
-  background: linear-gradient(to bottom, var(--background, var(--ion-background-color, #fff)) 20%, rgba(var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255)), 0) 90%);
+  background: linear-gradient(to bottom, rgba(#{$picker-fade-background}, 1) 20%, rgba(#{$picker-fade-background}, 0) 90%);
 }
 
 :host .picker-after {
-  background: linear-gradient(to top, var(--background, var(--ion-background-color, #fff)) 30%, rgba(var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255)), 0) 90%);
+  background: linear-gradient(to top, rgba(#{$picker-fade-background}, 1) 30%, rgba(#{$picker-fade-background}, 0) 90%);
 }
diff --git a/core/src/components/picker-internal/picker-internal.scss b/core/src/components/picker-internal/picker-internal.scss
index d23b73ef83..9b4d10365b 100644
--- a/core/src/components/picker-internal/picker-internal.scss
+++ b/core/src/components/picker-internal/picker-internal.scss
@@ -71,6 +71,8 @@
   height: 34px;
 
   transform: translateY(-50%);
+  
+  background: var(--wheel-highlight-background);
 
   z-index: -1;
 }
diff --git a/core/src/components/picker-internal/picker-internal.tsx b/core/src/components/picker-internal/picker-internal.tsx
index 080430cf63..af696d21b5 100644
--- a/core/src/components/picker-internal/picker-internal.tsx
+++ b/core/src/components/picker-internal/picker-internal.tsx
@@ -1,7 +1,6 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Listen, Method, Host, h } from '@stencil/core';
-
-import { getElementRoot } from '../../utils/helpers';
+import { getElementRoot } from '@utils/helpers';
 
 import type { PickerInternalChangeEventDetail } from './picker-internal-interfaces';
 
diff --git a/core/src/components/picker-internal/picker-internal.vars.scss b/core/src/components/picker-internal/picker-internal.vars.scss
new file mode 100644
index 0000000000..ee005fcd7f
--- /dev/null
+++ b/core/src/components/picker-internal/picker-internal.vars.scss
@@ -0,0 +1,2 @@
+$picker-fade-background-fallback: var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255));
+$picker-fade-background: var(--wheel-fade-background-rgb, $picker-fade-background-fallback);
\ No newline at end of file
diff --git a/core/src/components/picker-internal/test/basic/index.html b/core/src/components/picker-internal/test/basic/index.html
index e4019df892..e1b0c01245 100644
--- a/core/src/components/picker-internal/test/basic/index.html
+++ b/core/src/components/picker-internal/test/basic/index.html
@@ -53,7 +53,7 @@
         <div class="grid">
           <div class="grid-item">
             <h2>Inline</h2>
-            <ion-picker-internal>
+            <ion-picker-internal id="inline">
               <ion-picker-column-internal id="first"></ion-picker-column-internal>
               <ion-picker-column-internal id="second"></ion-picker-column-internal>
             </ion-picker-internal>
diff --git a/core/src/components/picker-internal/test/basic/picker-internal.e2e.ts b/core/src/components/picker-internal/test/basic/picker-internal.e2e.ts
index 519122ec56..63e079e59c 100644
--- a/core/src/components/picker-internal/test/basic/picker-internal.e2e.ts
+++ b/core/src/components/picker-internal/test/basic/picker-internal.e2e.ts
@@ -1,25 +1,18 @@
 import { expect } from '@playwright/test';
 import { configs, test } from '@utils/test/playwright';
 
-// TODO: FW-3020
-configs().forEach(({ title, screenshot, config }) => {
-  test.describe(title('picker-internal: rendering'), () => {
-    test.skip('inline pickers should not have visual regression', async ({ page }) => {
-      await page.goto(`/src/components/picker-internal/test/basic`, config);
-
-      await page.setIonViewport();
-
-      await expect(page).toHaveScreenshot(screenshot(`picker-internal-inline-diff`), {
-        fullPage: true,
-      });
-    });
-  });
-});
-
 /**
- * This behavior does not vary across modes.
+ * This behavior does not vary across directions.
  */
 configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('picker-internal: rendering'), () => {
+    test('inline pickers should not have visual regression', async ({ page }) => {
+      await page.goto(`/src/components/picker-internal/test/basic`, config);
+
+      await expect(page.locator('#inline')).toHaveScreenshot(screenshot(`picker-internal-inline-diff`));
+    });
+  });
+
   test.describe(title('picker-internal: overlay rendering'), () => {
     test('popover: should not have visual regression', async ({ page }) => {
       await page.goto(`/src/components/picker-internal/test/basic`, config);
diff --git a/core/src/components/picker-internal/test/basic/picker-internal.e2e.ts-snapshots/picker-internal-inline-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/picker-internal/test/basic/picker-internal.e2e.ts-snapshots/picker-internal-inline-diff-ios-ltr-Mobile-Chrome-linux.png
index 3eecc725b2..69ca6ccd03 100644
Binary files a/core/src/components/picker-internal/test/basic/picker-internal.e2e.ts-snapshots/picker-internal-inline-diff-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/picker-internal/test/basic/picker-internal.e2e.ts-snapshots/picker-internal-inline-diff-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/picker-internal/test/basic/picker-internal.e2e.ts-snapshots/picker-internal-inline-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/picker-internal/test/basic/picker-internal.e2e.ts-snapshots/picker-internal-inline-diff-ios-ltr-Mobile-Firefox-linux.png
index 16c9ad9799..137b9520bf 100644
Binary files a/core/src/components/picker-internal/test/basic/picker-internal.e2e.ts-snapshots/picker-internal-inline-diff-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/picker-internal/test/basic/picker-internal.e2e.ts-snapshots/picker-internal-inline-diff-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/picker-internal/test/basic/picker-internal.e2e.ts-snapshots/picker-internal-inline-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/picker-internal/test/basic/picker-internal.e2e.ts-snapshots/picker-internal-inline-diff-ios-ltr-Mobile-Safari-linux.png
index 336a9bac07..ae33dd35b9 100644
Binary files a/core/src/components/picker-internal/test/basic/picker-internal.e2e.ts-snapshots/picker-internal-inline-diff-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/picker-internal/test/basic/picker-internal.e2e.ts-snapshots/picker-internal-inline-diff-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/picker-internal/test/basic/picker-internal.e2e.ts-snapshots/picker-internal-inline-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/picker-internal/test/basic/picker-internal.e2e.ts-snapshots/picker-internal-inline-diff-ios-rtl-Mobile-Chrome-linux.png
deleted file mode 100644
index fe2bdbbd99..0000000000
Binary files a/core/src/components/picker-internal/test/basic/picker-internal.e2e.ts-snapshots/picker-internal-inline-diff-ios-rtl-Mobile-Chrome-linux.png and /dev/null differ
diff --git a/core/src/components/picker-internal/test/basic/picker-internal.e2e.ts-snapshots/picker-internal-inline-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/picker-internal/test/basic/picker-internal.e2e.ts-snapshots/picker-internal-inline-diff-ios-rtl-Mobile-Firefox-linux.png
deleted file mode 100644
index d72a206b5e..0000000000
Binary files a/core/src/components/picker-internal/test/basic/picker-internal.e2e.ts-snapshots/picker-internal-inline-diff-ios-rtl-Mobile-Firefox-linux.png and /dev/null differ
diff --git a/core/src/components/picker-internal/test/basic/picker-internal.e2e.ts-snapshots/picker-internal-inline-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/picker-internal/test/basic/picker-internal.e2e.ts-snapshots/picker-internal-inline-diff-ios-rtl-Mobile-Safari-linux.png
deleted file mode 100644
index 7d6c090650..0000000000
Binary files a/core/src/components/picker-internal/test/basic/picker-internal.e2e.ts-snapshots/picker-internal-inline-diff-ios-rtl-Mobile-Safari-linux.png and /dev/null differ
diff --git a/core/src/components/picker-internal/test/basic/picker-internal.e2e.ts-snapshots/picker-internal-inline-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/picker-internal/test/basic/picker-internal.e2e.ts-snapshots/picker-internal-inline-diff-md-ltr-Mobile-Chrome-linux.png
index 7738ae5329..fcb12fae0f 100644
Binary files a/core/src/components/picker-internal/test/basic/picker-internal.e2e.ts-snapshots/picker-internal-inline-diff-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/picker-internal/test/basic/picker-internal.e2e.ts-snapshots/picker-internal-inline-diff-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/picker-internal/test/basic/picker-internal.e2e.ts-snapshots/picker-internal-inline-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/picker-internal/test/basic/picker-internal.e2e.ts-snapshots/picker-internal-inline-diff-md-ltr-Mobile-Firefox-linux.png
index 9a236466c2..a63fa8a426 100644
Binary files a/core/src/components/picker-internal/test/basic/picker-internal.e2e.ts-snapshots/picker-internal-inline-diff-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/picker-internal/test/basic/picker-internal.e2e.ts-snapshots/picker-internal-inline-diff-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/picker-internal/test/basic/picker-internal.e2e.ts-snapshots/picker-internal-inline-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/picker-internal/test/basic/picker-internal.e2e.ts-snapshots/picker-internal-inline-diff-md-ltr-Mobile-Safari-linux.png
index b1c7e021ca..1d4a4e36d6 100644
Binary files a/core/src/components/picker-internal/test/basic/picker-internal.e2e.ts-snapshots/picker-internal-inline-diff-md-ltr-Mobile-Safari-linux.png and b/core/src/components/picker-internal/test/basic/picker-internal.e2e.ts-snapshots/picker-internal-inline-diff-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/picker-internal/test/basic/picker-internal.e2e.ts-snapshots/picker-internal-inline-diff-md-rtl-Mobile-Chrome-linux.png b/core/src/components/picker-internal/test/basic/picker-internal.e2e.ts-snapshots/picker-internal-inline-diff-md-rtl-Mobile-Chrome-linux.png
deleted file mode 100644
index 43e5a5cb8c..0000000000
Binary files a/core/src/components/picker-internal/test/basic/picker-internal.e2e.ts-snapshots/picker-internal-inline-diff-md-rtl-Mobile-Chrome-linux.png and /dev/null differ
diff --git a/core/src/components/picker-internal/test/basic/picker-internal.e2e.ts-snapshots/picker-internal-inline-diff-md-rtl-Mobile-Firefox-linux.png b/core/src/components/picker-internal/test/basic/picker-internal.e2e.ts-snapshots/picker-internal-inline-diff-md-rtl-Mobile-Firefox-linux.png
deleted file mode 100644
index 79b4ac5b2a..0000000000
Binary files a/core/src/components/picker-internal/test/basic/picker-internal.e2e.ts-snapshots/picker-internal-inline-diff-md-rtl-Mobile-Firefox-linux.png and /dev/null differ
diff --git a/core/src/components/picker-internal/test/basic/picker-internal.e2e.ts-snapshots/picker-internal-inline-diff-md-rtl-Mobile-Safari-linux.png b/core/src/components/picker-internal/test/basic/picker-internal.e2e.ts-snapshots/picker-internal-inline-diff-md-rtl-Mobile-Safari-linux.png
deleted file mode 100644
index b38d187dd0..0000000000
Binary files a/core/src/components/picker-internal/test/basic/picker-internal.e2e.ts-snapshots/picker-internal-inline-diff-md-rtl-Mobile-Safari-linux.png and /dev/null differ
diff --git a/core/src/components/picker/animations/ios.enter.ts b/core/src/components/picker/animations/ios.enter.ts
index 955e50dee1..113a6da400 100644
--- a/core/src/components/picker/animations/ios.enter.ts
+++ b/core/src/components/picker/animations/ios.enter.ts
@@ -1,5 +1,6 @@
+import { createAnimation } from '@utils/animation/animation';
+
 import type { Animation } from '../../../interface';
-import { createAnimation } from '../../../utils/animation/animation';
 
 /**
  * iOS Picker Enter Animation
diff --git a/core/src/components/picker/animations/ios.leave.ts b/core/src/components/picker/animations/ios.leave.ts
index 55f3d89578..60de8d1c17 100644
--- a/core/src/components/picker/animations/ios.leave.ts
+++ b/core/src/components/picker/animations/ios.leave.ts
@@ -1,5 +1,6 @@
+import { createAnimation } from '@utils/animation/animation';
+
 import type { Animation } from '../../../interface';
-import { createAnimation } from '../../../utils/animation/animation';
 
 /**
  * iOS Picker Leave Animation
diff --git a/core/src/components/picker/picker.tsx b/core/src/components/picker/picker.tsx
index 881b4e7835..66eeb0aa0c 100644
--- a/core/src/components/picker/picker.tsx
+++ b/core/src/components/picker/picker.tsx
@@ -1,8 +1,5 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Method, Prop, State, Watch, h } from '@stencil/core';
-
-import { getIonMode } from '../../global/ionic-global';
-import type { AnimationBuilder, CssClassMap, OverlayInterface, FrameworkDelegate } from '../../interface';
 import {
   createDelegateController,
   createTriggerController,
@@ -14,9 +11,12 @@ import {
   present,
   safeCall,
   setOverlayId,
-} from '../../utils/overlays';
+} from '@utils/overlays';
+import { getClassMap } from '@utils/theme';
+
+import { getIonMode } from '../../global/ionic-global';
+import type { AnimationBuilder, CssClassMap, OverlayInterface, FrameworkDelegate } from '../../interface';
 import type { OverlayEventDetail } from '../../utils/overlays-interface';
-import { getClassMap } from '../../utils/theme';
 
 import { iosEnterAnimation } from './animations/ios.enter';
 import { iosLeaveAnimation } from './animations/ios.leave';
diff --git a/core/src/components/popover/animations/ios.enter.ts b/core/src/components/popover/animations/ios.enter.ts
index 7c4beaa0d0..aa4e056814 100644
--- a/core/src/components/popover/animations/ios.enter.ts
+++ b/core/src/components/popover/animations/ios.enter.ts
@@ -1,6 +1,7 @@
+import { createAnimation } from '@utils/animation/animation';
+import { getElementRoot } from '@utils/helpers';
+
 import type { Animation } from '../../../interface';
-import { createAnimation } from '../../../utils/animation/animation';
-import { getElementRoot } from '../../../utils/helpers';
 import {
   calculateWindowAdjustment,
   getArrowDimensions,
diff --git a/core/src/components/popover/animations/ios.leave.ts b/core/src/components/popover/animations/ios.leave.ts
index fd5a5e3c37..fa85937876 100644
--- a/core/src/components/popover/animations/ios.leave.ts
+++ b/core/src/components/popover/animations/ios.leave.ts
@@ -1,6 +1,7 @@
+import { createAnimation } from '@utils/animation/animation';
+import { getElementRoot } from '@utils/helpers';
+
 import type { Animation } from '../../../interface';
-import { createAnimation } from '../../../utils/animation/animation';
-import { getElementRoot } from '../../../utils/helpers';
 
 /**
  * iOS Popover Leave Animation
diff --git a/core/src/components/popover/animations/md.enter.ts b/core/src/components/popover/animations/md.enter.ts
index 27d9f9cf38..e25f745cec 100644
--- a/core/src/components/popover/animations/md.enter.ts
+++ b/core/src/components/popover/animations/md.enter.ts
@@ -1,6 +1,7 @@
+import { createAnimation } from '@utils/animation/animation';
+import { getElementRoot } from '@utils/helpers';
+
 import type { Animation } from '../../../interface';
-import { createAnimation } from '../../../utils/animation/animation';
-import { getElementRoot } from '../../../utils/helpers';
 import { calculateWindowAdjustment, getPopoverDimensions, getPopoverPosition } from '../utils';
 
 const POPOVER_MD_BODY_PADDING = 12;
diff --git a/core/src/components/popover/animations/md.leave.ts b/core/src/components/popover/animations/md.leave.ts
index e37506aaff..aa89ed0607 100644
--- a/core/src/components/popover/animations/md.leave.ts
+++ b/core/src/components/popover/animations/md.leave.ts
@@ -1,6 +1,7 @@
+import { createAnimation } from '@utils/animation/animation';
+import { getElementRoot } from '@utils/helpers';
+
 import type { Animation } from '../../../interface';
-import { createAnimation } from '../../../utils/animation/animation';
-import { getElementRoot } from '../../../utils/helpers';
 
 /**
  * Md Popover Leave Animation
diff --git a/core/src/components/popover/popover.tsx b/core/src/components/popover/popover.tsx
index ad7b294a8a..bccd795fe7 100644
--- a/core/src/components/popover/popover.tsx
+++ b/core/src/components/popover/popover.tsx
@@ -1,11 +1,8 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Method, Prop, State, Watch, h } from '@stencil/core';
-
-import { getIonMode } from '../../global/ionic-global';
-import type { AnimationBuilder, ComponentProps, ComponentRef, FrameworkDelegate } from '../../interface';
-import { CoreDelegate, attachComponent, detachComponent } from '../../utils/framework-delegate';
-import { addEventListener, raf, hasLazyBuild } from '../../utils/helpers';
-import { printIonWarning } from '../../utils/logging';
+import { CoreDelegate, attachComponent, detachComponent } from '@utils/framework-delegate';
+import { addEventListener, raf, hasLazyBuild } from '@utils/helpers';
+import { printIonWarning } from '@utils/logging';
 import {
   BACKDROP,
   dismiss,
@@ -14,11 +11,14 @@ import {
   prepareOverlay,
   present,
   setOverlayId,
-} from '../../utils/overlays';
+} from '@utils/overlays';
+import { isPlatform } from '@utils/platform';
+import { getClassMap } from '@utils/theme';
+import { deepReady, waitForMount } from '@utils/transition';
+
+import { getIonMode } from '../../global/ionic-global';
+import type { AnimationBuilder, ComponentProps, ComponentRef, FrameworkDelegate } from '../../interface';
 import type { OverlayEventDetail } from '../../utils/overlays-interface';
-import { isPlatform } from '../../utils/platform';
-import { getClassMap } from '../../utils/theme';
-import { deepReady, waitForMount } from '../../utils/transition';
 
 import { iosEnterAnimation } from './animations/ios.enter';
 import { iosLeaveAnimation } from './animations/ios.leave';
diff --git a/core/src/components/popover/test/arrow/popover.e2e.ts-snapshots/popover-arrow-ios-rtl-Mobile-Safari-linux.png b/core/src/components/popover/test/arrow/popover.e2e.ts-snapshots/popover-arrow-ios-rtl-Mobile-Safari-linux.png
index 9a597e2c4d..d975a2b3ff 100644
Binary files a/core/src/components/popover/test/arrow/popover.e2e.ts-snapshots/popover-arrow-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/popover/test/arrow/popover.e2e.ts-snapshots/popover-arrow-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/popover/test/position/popover.e2e.ts-snapshots/popover-position-ios-rtl-Mobile-Safari-linux.png b/core/src/components/popover/test/position/popover.e2e.ts-snapshots/popover-position-ios-rtl-Mobile-Safari-linux.png
index 4bf5c40c28..b013d3cce5 100644
Binary files a/core/src/components/popover/test/position/popover.e2e.ts-snapshots/popover-position-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/popover/test/position/popover.e2e.ts-snapshots/popover-position-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/popover/test/position/popover.e2e.ts-snapshots/popover-position-md-ltr-Mobile-Firefox-linux.png b/core/src/components/popover/test/position/popover.e2e.ts-snapshots/popover-position-md-ltr-Mobile-Firefox-linux.png
index 4ec8f2398d..bed991f5fb 100644
Binary files a/core/src/components/popover/test/position/popover.e2e.ts-snapshots/popover-position-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/popover/test/position/popover.e2e.ts-snapshots/popover-position-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/popover/test/position/popover.e2e.ts-snapshots/popover-position-md-rtl-Mobile-Firefox-linux.png b/core/src/components/popover/test/position/popover.e2e.ts-snapshots/popover-position-md-rtl-Mobile-Firefox-linux.png
index ec5e07bfdf..fed6cfbc75 100644
Binary files a/core/src/components/popover/test/position/popover.e2e.ts-snapshots/popover-position-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/popover/test/position/popover.e2e.ts-snapshots/popover-position-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/popover/test/size/popover.e2e.ts b/core/src/components/popover/test/size/popover.e2e.ts
index a8f10462e2..936253541f 100644
--- a/core/src/components/popover/test/size/popover.e2e.ts
+++ b/core/src/components/popover/test/size/popover.e2e.ts
@@ -8,26 +8,38 @@ import { openPopover, screenshotPopover } from '../test.utils';
  */
 configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
   test.describe(title('popover: size'), async () => {
-    /**
-     * The popovers have showBackdrop=false so we can open most of them at once
-     * and massively cut down on screenshots taken. The content has its own
-     * backdrop so you can still see the popovers.
-     */
-    // TODO FW-3598
-    test.skip('should calculate popover width based on sizing method', async ({ page }) => {
+    test.beforeEach(async ({ page }) => {
       await page.goto('/src/components/popover/test/size', config);
-      await page.setViewportSize(Viewports.tablet.portrait); // avoid popovers overlapping
+    });
 
-      const sameTimeTriggers = ['auto-trigger', 'cover-trigger', 'event-trigger'];
+    test.describe('popover: invisible backdrop', async () => {
+      /**
+       * The popovers have showBackdrop=false so we can open most of them at once
+       * and massively cut down on screenshots taken. The content has its own
+       * backdrop so you can still see the popovers.
+       */
+      test('should calculate popover width based on sizing method', async ({ page }) => {
+        await page.setViewportSize(Viewports.tablet.portrait); // avoid popovers overlapping
 
-      for (const trigger of sameTimeTriggers) {
-        await openPopover(page, trigger, true);
-      }
+        const sameTimeTriggers = ['auto-trigger', 'cover-trigger', 'event-trigger'];
 
-      await expect(page).toHaveScreenshot(screenshot(`popover-size`));
+        for (const trigger of sameTimeTriggers) {
+          await openPopover(page, trigger, true);
+        }
 
-      // test this one separately since it would overlap others
-      await screenshotPopover(page, screenshot, 'no-event-trigger', 'size');
+        await expect(page).toHaveScreenshot(screenshot(`popover-size`));
+      });
+    });
+
+    test.describe('popover: visible backdrop', async () => {
+      test('should calculate popover width based on sizing method', async ({ page }) => {
+        /**
+         * This must be tested separately because it's not aimed to be opened at the same time as the others.
+         * Otherwise, the backdrops from the previous popovers would be mounted on top of each other. This is a problem because the following trigger won't be accessible to click.
+         * The mounted backdrops would be in the way and would need to be closed first.
+         */
+        await screenshotPopover(page, screenshot, 'no-event-trigger', 'size');
+      });
     });
   });
 });
diff --git a/core/src/components/popover/test/size/popover.e2e.ts-snapshots/popover-size-no-event-trigger-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/popover/test/size/popover.e2e.ts-snapshots/popover-size-no-event-trigger-ios-ltr-Mobile-Chrome-linux.png
index f4dd4a2607..a0719313e9 100644
Binary files a/core/src/components/popover/test/size/popover.e2e.ts-snapshots/popover-size-no-event-trigger-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/popover/test/size/popover.e2e.ts-snapshots/popover-size-no-event-trigger-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/popover/test/size/popover.e2e.ts-snapshots/popover-size-no-event-trigger-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/popover/test/size/popover.e2e.ts-snapshots/popover-size-no-event-trigger-ios-ltr-Mobile-Firefox-linux.png
index 091fdc0890..ed1f373c6a 100644
Binary files a/core/src/components/popover/test/size/popover.e2e.ts-snapshots/popover-size-no-event-trigger-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/popover/test/size/popover.e2e.ts-snapshots/popover-size-no-event-trigger-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/popover/test/size/popover.e2e.ts-snapshots/popover-size-no-event-trigger-ios-ltr-Mobile-Safari-linux.png b/core/src/components/popover/test/size/popover.e2e.ts-snapshots/popover-size-no-event-trigger-ios-ltr-Mobile-Safari-linux.png
index 4bbb437fbf..3d0966f347 100644
Binary files a/core/src/components/popover/test/size/popover.e2e.ts-snapshots/popover-size-no-event-trigger-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/popover/test/size/popover.e2e.ts-snapshots/popover-size-no-event-trigger-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/popover/utils.ts b/core/src/components/popover/utils.ts
index 23182610d4..794ebb2088 100644
--- a/core/src/components/popover/utils.ts
+++ b/core/src/components/popover/utils.ts
@@ -1,4 +1,4 @@
-import { getElementRoot, raf } from '../../utils/helpers';
+import { getElementRoot, raf } from '@utils/helpers';
 
 import type { PopoverSize, PositionAlign, PositionReference, PositionSide, TriggerAction } from './popover-interface';
 
diff --git a/core/src/components/progress-bar/progress-bar.tsx b/core/src/components/progress-bar/progress-bar.tsx
index 5b458d9a2c..9753a50656 100644
--- a/core/src/components/progress-bar/progress-bar.tsx
+++ b/core/src/components/progress-bar/progress-bar.tsx
@@ -1,11 +1,11 @@
 import type { ComponentInterface } from '@stencil/core';
 import { Component, Host, Prop, h } from '@stencil/core';
+import { clamp } from '@utils/helpers';
+import { createColorClasses } from '@utils/theme';
 
 import { config } from '../../global/config';
 import { getIonMode } from '../../global/ionic-global';
 import type { Color } from '../../interface';
-import { clamp } from '../../utils/helpers';
-import { createColorClasses } from '../../utils/theme';
 
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
diff --git a/core/src/components/radio-group/radio-group.tsx b/core/src/components/radio-group/radio-group.tsx
index 68bd2ad64a..b4fabb9d4c 100644
--- a/core/src/components/radio-group/radio-group.tsx
+++ b/core/src/components/radio-group/radio-group.tsx
@@ -1,8 +1,8 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Listen, Prop, Watch, h } from '@stencil/core';
+import { renderHiddenInput } from '@utils/helpers';
 
 import { getIonMode } from '../../global/ionic-global';
-import { renderHiddenInput } from '../../utils/helpers';
 
 import type { RadioGroupChangeEventDetail } from './radio-group-interface';
 
diff --git a/core/src/components/radio/radio.scss b/core/src/components/radio/radio.scss
index aa599021d0..3fe6053680 100644
--- a/core/src/components/radio/radio.scss
+++ b/core/src/components/radio/radio.scss
@@ -1,4 +1,5 @@
 @import "../../themes/ionic.globals";
+@import "./radio.vars.scss";
 
 // Radio
 // --------------------------------------------------
@@ -122,6 +123,10 @@ input {
   overflow: hidden;
 }
 
+:host(.in-item:not(.legacy-radio)) .label-text-wrapper {
+  @include margin($radio-item-label-margin-top, null, $radio-item-label-margin-bottom, null);
+}
+
 /**
  * If no label text is placed into the slot
  * then the element should be hidden otherwise
@@ -172,7 +177,7 @@ input {
    * the radio should be on the end
    * when the label sits at the start.
    */
-  @include margin(0, $form-control-label-margin, 0, 0);
+  @include margin(null, $form-control-label-margin, null, 0);
 }
 
 // Radio Label Placement - End
@@ -192,7 +197,7 @@ input {
  * when the label sits at the end.
  */
 :host(.radio-label-placement-end) .label-text-wrapper {
-  @include margin(0, 0, 0, $form-control-label-margin);
+  @include margin(null, 0, null, $form-control-label-margin);
 }
 
 // Radio Label Placement - Fixed
@@ -204,7 +209,7 @@ input {
    * the radio should be on the end
    * when the label sits at the start.
    */
-  @include margin(0, $form-control-label-margin, 0, 0);
+  @include margin(null, $form-control-label-margin, null, 0);
 }
 
 /**
diff --git a/core/src/components/radio/radio.tsx b/core/src/components/radio/radio.tsx
index dc7cd09002..14ae1f4d68 100644
--- a/core/src/components/radio/radio.tsx
+++ b/core/src/components/radio/radio.tsx
@@ -1,14 +1,14 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Method, Prop, State, Watch, h } from '@stencil/core';
+import type { LegacyFormController } from '@utils/forms';
+import { createLegacyFormController } from '@utils/forms';
+import type { Attributes } from '@utils/helpers';
+import { addEventListener, getAriaLabel, inheritAriaAttributes, removeEventListener } from '@utils/helpers';
+import { printIonWarning } from '@utils/logging';
+import { createColorClasses, hostContext } from '@utils/theme';
 
 import { getIonMode } from '../../global/ionic-global';
 import type { Color, StyleEventDetail } from '../../interface';
-import type { LegacyFormController } from '../../utils/forms';
-import { createLegacyFormController } from '../../utils/forms';
-import type { Attributes } from '../../utils/helpers';
-import { addEventListener, getAriaLabel, inheritAriaAttributes, removeEventListener } from '../../utils/helpers';
-import { printIonWarning } from '../../utils/logging';
-import { createColorClasses, hostContext } from '../../utils/theme';
 
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
diff --git a/core/src/components/radio/radio.vars.scss b/core/src/components/radio/radio.vars.scss
new file mode 100644
index 0000000000..76dbfaf79f
--- /dev/null
+++ b/core/src/components/radio/radio.vars.scss
@@ -0,0 +1,5 @@
+/// @prop - Top margin of radio's label when in an item
+$radio-item-label-margin-top: 10px !default;
+
+/// @prop - Bottom margin of radio's label when in an item
+$radio-item-label-margin-bottom: 10px !default;
\ No newline at end of file
diff --git a/core/src/components/radio/test/item/index.html b/core/src/components/radio/test/item/index.html
index 713e6f1435..42235e4115 100644
--- a/core/src/components/radio/test/item/index.html
+++ b/core/src/components/radio/test/item/index.html
@@ -165,6 +165,21 @@
             </ion-radio-group>
           </ion-list>
         </div>
+
+        <h1>Multiline Label</h1>
+        <div class="grid">
+          <div class="grid-item">
+            <ion-radio-group>
+              <ion-item>
+                <ion-radio justify="start">
+                  <ion-label class="ion-text-wrap">
+                    Enable Notifications Enable Notifications Enable Notifications
+                  </ion-label>
+                </ion-radio>
+              </ion-item>
+            </ion-radio-group>
+          </div>
+        </div>
       </ion-content>
     </ion-app>
   </body>
diff --git a/core/src/components/radio/test/item/radio.e2e.ts b/core/src/components/radio/test/item/radio.e2e.ts
index de3842bafd..63fd8f6cb7 100644
--- a/core/src/components/radio/test/item/radio.e2e.ts
+++ b/core/src/components/radio/test/item/radio.e2e.ts
@@ -37,3 +37,26 @@ configs().forEach(({ title, screenshot, config }) => {
     });
   });
 });
+
+configs({ directions: ['ltr'], modes: ['md'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('radio: long label in item'), () => {
+    test('should render margins correctly when using long label in item', async ({ page }) => {
+      await page.setContent(
+        `
+          <ion-list>
+            <ion-radio-group>
+              <ion-item>
+                <ion-radio justify="start">
+                  <ion-label class="ion-text-wrap">Enable Notifications Enable Notifications Enable Notifications</ion-label>
+                </ion-radio>
+              </ion-item>
+            </ion-radio-group>
+          </ion-list>
+        `,
+        config
+      );
+      const list = page.locator('ion-list');
+      expect(await list.screenshot()).toMatchSnapshot(screenshot(`radio-long-label-in-item`));
+    });
+  });
+});
diff --git a/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-long-label-in-item-md-ltr-Mobile-Chrome-linux.png b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-long-label-in-item-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..95e3cf24e3
Binary files /dev/null and b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-long-label-in-item-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-long-label-in-item-md-ltr-Mobile-Firefox-linux.png b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-long-label-in-item-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..a194f42006
Binary files /dev/null and b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-long-label-in-item-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-long-label-in-item-md-ltr-Mobile-Safari-linux.png b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-long-label-in-item-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..3eaf91451f
Binary files /dev/null and b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-long-label-in-item-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/range/range.md.scss b/core/src/components/range/range.md.scss
index 6ab09cc14b..6fb2a4a9f8 100644
--- a/core/src/components/range/range.md.scss
+++ b/core/src/components/range/range.md.scss
@@ -21,8 +21,7 @@
   font-size: $range-md-pin-font-size;
 }
 
-// TODO FW-2997 Remove this
-::slotted([slot="label"]) {
+::slotted([slot="label"]), .label-text {
   font-size: initial;
 }
 
diff --git a/core/src/components/range/range.tsx b/core/src/components/range/range.tsx
index a9e00cb6cc..04bc1f0798 100644
--- a/core/src/components/range/range.tsx
+++ b/core/src/components/range/range.tsx
@@ -1,17 +1,17 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Prop, State, Watch, h } from '@stencil/core';
+import { findClosestIonContent, disableContentScrollY, resetContentScrollY } from '@utils/content';
+import type { LegacyFormController } from '@utils/forms';
+import { createLegacyFormController } from '@utils/forms';
+import type { Attributes } from '@utils/helpers';
+import { inheritAriaAttributes, clamp, debounceEvent, getAriaLabel, renderHiddenInput } from '@utils/helpers';
+import { printIonWarning } from '@utils/logging';
+import { isRTL } from '@utils/rtl';
+import { createColorClasses, hostContext } from '@utils/theme';
 
 import { getIonMode } from '../../global/ionic-global';
 import type { Color, Gesture, GestureDetail, StyleEventDetail } from '../../interface';
-import { findClosestIonContent, disableContentScrollY, resetContentScrollY } from '../../utils/content';
 import { roundToMaxDecimalPlaces } from '../../utils/floating-point';
-import type { LegacyFormController } from '../../utils/forms';
-import { createLegacyFormController } from '../../utils/forms';
-import type { Attributes } from '../../utils/helpers';
-import { inheritAriaAttributes, clamp, debounceEvent, getAriaLabel, renderHiddenInput } from '../../utils/helpers';
-import { printIonWarning } from '../../utils/logging';
-import { isRTL } from '../../utils/rtl';
-import { createColorClasses, hostContext } from '../../utils/theme';
 
 import type {
   KnobName,
@@ -97,6 +97,13 @@ export class Range implements ComponentInterface {
    */
   @Prop() name = this.rangeId;
 
+  /**
+   * The text to display as the control's label. Use this over the `label` slot if
+   * you only need plain text. The `label` property will take priority over the
+   * `label` slot if both are used.
+   */
+  @Prop() label?: string;
+
   /**
    * Show two knobs.
    */
@@ -603,7 +610,7 @@ Developers can dismiss this warning by removing their usage of the "legacy" prop
   }
 
   private renderRange() {
-    const { disabled, el, rangeId, pin, pressedKnob, labelPlacement } = this;
+    const { disabled, el, rangeId, pin, pressedKnob, labelPlacement, label } = this;
 
     const mode = getIonMode(this);
 
@@ -630,7 +637,7 @@ Developers can dismiss this warning by removing their usage of the "legacy" prop
               'label-text-wrapper-hidden': !this.hasLabel,
             }}
           >
-            <slot name="label"></slot>
+            {label !== undefined ? <div class="label-text">{label}</div> : <slot name="label"></slot>}
           </div>
           <div class="native-wrapper">
             <slot name="start"></slot>
@@ -643,7 +650,7 @@ Developers can dismiss this warning by removing their usage of the "legacy" prop
   }
 
   private get hasLabel() {
-    return this.el.querySelector('[slot="label"]') !== null;
+    return this.label !== undefined || this.el.querySelector('[slot="label"]') !== null;
   }
 
   private renderRangeSlider() {
diff --git a/core/src/components/range/test/a11y/index.html b/core/src/components/range/test/a11y/index.html
index f5beb8266a..2e31b7b1d3 100644
--- a/core/src/components/range/test/a11y/index.html
+++ b/core/src/components/range/test/a11y/index.html
@@ -15,14 +15,18 @@
     <main>
       <h1>Range - a11y</h1>
 
-      <ion-range><span slot="label">my label</span></ion-range
-      ><br />
-      <ion-range aria-label="my aria label"></ion-range><br />
+      <ion-range><span slot="label">my label</span></ion-range>
+      <br />
+      <ion-range label="my label"></ion-range>
+      <br />
+      <ion-range aria-label="my aria label"></ion-range>
+      <br />
       <ion-range>
         <span slot="label">temperature</span>
         <ion-icon name="snow" slot="start" aria-hidden="true"></ion-icon>
-        <ion-icon name="flame" slot="end" aria-hidden="true"></ion-icon> </ion-range
-      ><br />
+        <ion-icon name="flame" slot="end" aria-hidden="true"></ion-icon>
+      </ion-range>
+      <br />
     </main>
   </body>
 </html>
diff --git a/core/src/components/range/test/label/index.html b/core/src/components/range/test/label/index.html
index 1ca370a23f..c4c4b4c6b6 100644
--- a/core/src/components/range/test/label/index.html
+++ b/core/src/components/range/test/label/index.html
@@ -67,6 +67,22 @@
           </div>
         </div>
 
+        <h1>Label Property</h1>
+        <div class="grid">
+          <div class="grid-item">
+            <h2>Placement Start</h2>
+            <ion-range label="Temperature"></ion-range>
+          </div>
+          <div class="grid-item">
+            <h2>Placement End</h2>
+            <ion-range label="Temperature" label-placement="end"></ion-range>
+          </div>
+          <div class="grid-item">
+            <h2>Placement Fixed</h2>
+            <ion-range label="Temperature" label-placement="fixed"></ion-range>
+          </div>
+        </div>
+
         <h1>Slotted Items</h1>
         <div class="grid">
           <div class="grid-item">
diff --git a/core/src/components/range/test/label/range.e2e.ts b/core/src/components/range/test/label/range.e2e.ts
index 9e90103f04..dac0fbc443 100644
--- a/core/src/components/range/test/label/range.e2e.ts
+++ b/core/src/components/range/test/label/range.e2e.ts
@@ -125,6 +125,32 @@ configs().forEach(({ title, screenshot, config }) => {
         expect(await range.screenshot()).toMatchSnapshot(screenshot(`range-items-fixed`));
       });
     });
+
+    test.describe('range: label prop', () => {
+      test('should render label in the start placement', async ({ page }) => {
+        await page.setContent(`<ion-range label-placement="start" label="Volume"></ion-range>`, config);
+
+        const range = page.locator('ion-range');
+
+        expect(await range.screenshot()).toMatchSnapshot(screenshot(`range-label-prop-start`));
+      });
+
+      test('should render label in the end placement', async ({ page }) => {
+        await page.setContent(`<ion-range label-placement="end" label="Volume"></ion-range>`, config);
+
+        const range = page.locator('ion-range');
+
+        expect(await range.screenshot()).toMatchSnapshot(screenshot(`range-label-prop-end`));
+      });
+
+      test('should render label in the fixed placement', async ({ page }) => {
+        await page.setContent(`<ion-range label-placement="fixed" label="Volume"></ion-range>`, config);
+
+        const range = page.locator('ion-range');
+
+        expect(await range.screenshot()).toMatchSnapshot(screenshot(`range-label-prop-fixed`));
+      });
+    });
   });
 });
 
diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-end-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-end-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..34050f8670
Binary files /dev/null and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-end-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-end-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-end-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..6311af01ba
Binary files /dev/null and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-end-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-end-ios-ltr-Mobile-Safari-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-end-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..affc850838
Binary files /dev/null and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-end-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-end-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-end-ios-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..8fb9750702
Binary files /dev/null and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-end-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-end-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-end-ios-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..1d3314e552
Binary files /dev/null and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-end-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-end-ios-rtl-Mobile-Safari-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-end-ios-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..f4258931f4
Binary files /dev/null and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-end-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-end-md-ltr-Mobile-Chrome-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-end-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..86e5b91d33
Binary files /dev/null and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-end-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-end-md-ltr-Mobile-Firefox-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-end-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..6357292172
Binary files /dev/null and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-end-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-end-md-ltr-Mobile-Safari-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-end-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..34589015d7
Binary files /dev/null and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-end-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-end-md-rtl-Mobile-Chrome-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-end-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..afd1956112
Binary files /dev/null and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-end-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-end-md-rtl-Mobile-Firefox-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-end-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..cecf116400
Binary files /dev/null and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-end-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-end-md-rtl-Mobile-Safari-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-end-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..6d06144265
Binary files /dev/null and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-end-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-fixed-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-fixed-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..65d6321964
Binary files /dev/null and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-fixed-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-fixed-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-fixed-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..2675a7ed06
Binary files /dev/null and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-fixed-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-fixed-ios-ltr-Mobile-Safari-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-fixed-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..6232547c64
Binary files /dev/null and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-fixed-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-fixed-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-fixed-ios-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..03240040c4
Binary files /dev/null and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-fixed-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-fixed-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-fixed-ios-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..f92d0905c5
Binary files /dev/null and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-fixed-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-fixed-ios-rtl-Mobile-Safari-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-fixed-ios-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..9ab2bf2866
Binary files /dev/null and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-fixed-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-fixed-md-ltr-Mobile-Chrome-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-fixed-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..019d4cf41e
Binary files /dev/null and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-fixed-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-fixed-md-ltr-Mobile-Firefox-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-fixed-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..dc4ec56fac
Binary files /dev/null and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-fixed-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-fixed-md-ltr-Mobile-Safari-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-fixed-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..2e3860e711
Binary files /dev/null and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-fixed-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-fixed-md-rtl-Mobile-Chrome-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-fixed-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..36fd1c3f74
Binary files /dev/null and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-fixed-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-fixed-md-rtl-Mobile-Firefox-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-fixed-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..a663651f3d
Binary files /dev/null and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-fixed-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-fixed-md-rtl-Mobile-Safari-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-fixed-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..1eab47c71c
Binary files /dev/null and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-fixed-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-start-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-start-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..0c3f86175c
Binary files /dev/null and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-start-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-start-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-start-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..f269c836d6
Binary files /dev/null and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-start-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-start-ios-ltr-Mobile-Safari-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-start-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..b382666b80
Binary files /dev/null and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-start-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-start-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-start-ios-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..38b3336637
Binary files /dev/null and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-start-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-start-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-start-ios-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..d043a88697
Binary files /dev/null and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-start-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-start-ios-rtl-Mobile-Safari-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-start-ios-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..50e30949e0
Binary files /dev/null and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-start-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-start-md-ltr-Mobile-Chrome-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-start-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..1c62087c66
Binary files /dev/null and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-start-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-start-md-ltr-Mobile-Firefox-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-start-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..74ce9c17ca
Binary files /dev/null and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-start-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-start-md-ltr-Mobile-Safari-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-start-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..6e9c989274
Binary files /dev/null and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-start-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-start-md-rtl-Mobile-Chrome-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-start-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..535ec0d177
Binary files /dev/null and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-start-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-start-md-rtl-Mobile-Firefox-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-start-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..c0a77c37da
Binary files /dev/null and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-start-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-start-md-rtl-Mobile-Safari-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-start-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..d24912bc26
Binary files /dev/null and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-start-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/range/test/label/range.spec.ts b/core/src/components/range/test/label/range.spec.ts
new file mode 100644
index 0000000000..c7006561ad
--- /dev/null
+++ b/core/src/components/range/test/label/range.spec.ts
@@ -0,0 +1,23 @@
+import { newSpecPage } from '@stencil/core/testing';
+
+import { Range } from '../../range';
+
+describe('range: label', () => {
+  it('should prioritize the label prop over the slot', async () => {
+    const page = await newSpecPage({
+      components: [Range],
+      html: `
+        <ion-range label="Label prop">
+          <div slot="label">Label slot</div>
+        </ion-range>
+      `,
+    });
+
+    const range = page.body.querySelector('ion-range');
+    const propEl = range?.shadowRoot?.querySelector('.label-text');
+    const slotEl = range?.shadowRoot?.querySelector('slot[name="label"]');
+
+    expect(propEl).not.toBeNull();
+    expect(slotEl).toBeNull();
+  });
+});
diff --git a/core/src/components/refresher-content/refresher-content.tsx b/core/src/components/refresher-content/refresher-content.tsx
index 0ade928a7c..35b6554a77 100644
--- a/core/src/components/refresher-content/refresher-content.tsx
+++ b/core/src/components/refresher-content/refresher-content.tsx
@@ -1,13 +1,13 @@
 import type { ComponentInterface } from '@stencil/core';
 import { Component, Element, Host, Prop, h } from '@stencil/core';
+import { ENABLE_HTML_CONTENT_DEFAULT } from '@utils/config';
+import { isPlatform } from '@utils/platform';
+import { sanitizeDOMString } from '@utils/sanitization';
 import { arrowDown, caretBackSharp } from 'ionicons/icons';
 
 import { config } from '../../global/config';
 import { getIonMode } from '../../global/ionic-global';
-import { ENABLE_HTML_CONTENT_DEFAULT } from '../../utils/config';
-import { isPlatform } from '../../utils/platform';
 import type { IonicSafeString } from '../../utils/sanitization';
-import { sanitizeDOMString } from '../../utils/sanitization';
 import type { SpinnerTypes } from '../spinner/spinner-configs';
 import { SPINNERS } from '../spinner/spinner-configs';
 
diff --git a/core/src/components/refresher/refresher.tsx b/core/src/components/refresher/refresher.tsx
index fb4497ac23..858f5c394d 100644
--- a/core/src/components/refresher/refresher.tsx
+++ b/core/src/components/refresher/refresher.tsx
@@ -1,17 +1,17 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Method, Prop, State, Watch, h, readTask, writeTask } from '@stencil/core';
-
-import { getIonMode } from '../../global/ionic-global';
-import type { Animation, Gesture, GestureDetail } from '../../interface';
-import { getTimeGivenProgression } from '../../utils/animation/cubic-bezier';
+import { getTimeGivenProgression } from '@utils/animation/cubic-bezier';
 import {
   getScrollElement,
   ION_CONTENT_CLASS_SELECTOR,
   ION_CONTENT_ELEMENT_SELECTOR,
   printIonContentErrorMsg,
-} from '../../utils/content';
-import { clamp, componentOnReady, getElementRoot, raf, transitionEndAsync } from '../../utils/helpers';
-import { hapticImpact } from '../../utils/native/haptic';
+} from '@utils/content';
+import { clamp, componentOnReady, getElementRoot, raf, transitionEndAsync } from '@utils/helpers';
+import { hapticImpact } from '@utils/native/haptic';
+
+import { getIonMode } from '../../global/ionic-global';
+import type { Animation, Gesture, GestureDetail } from '../../interface';
 
 import type { RefresherEventDetail } from './refresher-interface';
 import {
diff --git a/core/src/components/refresher/refresher.utils.ts b/core/src/components/refresher/refresher.utils.ts
index 38a44abb6d..d40653727d 100644
--- a/core/src/components/refresher/refresher.utils.ts
+++ b/core/src/components/refresher/refresher.utils.ts
@@ -1,8 +1,7 @@
 import { writeTask } from '@stencil/core';
-
-import { createAnimation } from '../../utils/animation/animation';
-import { clamp, componentOnReady, transitionEndAsync } from '../../utils/helpers';
-import { isPlatform } from '../../utils/platform';
+import { createAnimation } from '@utils/animation/animation';
+import { clamp, componentOnReady, transitionEndAsync } from '@utils/helpers';
+import { isPlatform } from '@utils/platform';
 
 // MD Native Refresher
 // -----------------------------
diff --git a/core/src/components/reorder-group/reorder-group.tsx b/core/src/components/reorder-group/reorder-group.tsx
index db6272f22e..3dba0535b8 100644
--- a/core/src/components/reorder-group/reorder-group.tsx
+++ b/core/src/components/reorder-group/reorder-group.tsx
@@ -1,11 +1,11 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Method, Prop, State, Watch, h } from '@stencil/core';
+import { findClosestIonContent, getScrollElement } from '@utils/content';
+import { raf } from '@utils/helpers';
+import { hapticSelectionChanged, hapticSelectionEnd, hapticSelectionStart } from '@utils/native/haptic';
 
 import { getIonMode } from '../../global/ionic-global';
 import type { Gesture, GestureDetail } from '../../interface';
-import { findClosestIonContent, getScrollElement } from '../../utils/content';
-import { raf } from '../../utils/helpers';
-import { hapticSelectionChanged, hapticSelectionEnd, hapticSelectionStart } from '../../utils/native/haptic';
 
 import type { ItemReorderEventDetail } from './reorder-group-interface';
 
diff --git a/core/src/components/router-link/router-link.tsx b/core/src/components/router-link/router-link.tsx
index d395561e9e..51ede733af 100644
--- a/core/src/components/router-link/router-link.tsx
+++ b/core/src/components/router-link/router-link.tsx
@@ -1,9 +1,9 @@
 import type { ComponentInterface } from '@stencil/core';
 import { Component, Host, Prop, h } from '@stencil/core';
+import { createColorClasses, openURL } from '@utils/theme';
 
 import { getIonMode } from '../../global/ionic-global';
 import type { AnimationBuilder, Color } from '../../interface';
-import { createColorClasses, openURL } from '../../utils/theme';
 import type { RouterDirection } from '../router/utils/interface';
 
 @Component({
diff --git a/core/src/components/router-outlet/route-outlet.tsx b/core/src/components/router-outlet/route-outlet.tsx
index 358bc267ce..7e4ba3d42a 100644
--- a/core/src/components/router-outlet/route-outlet.tsx
+++ b/core/src/components/router-outlet/route-outlet.tsx
@@ -1,5 +1,9 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Method, Prop, Watch, h } from '@stencil/core';
+import { getTimeGivenProgression } from '@utils/animation/cubic-bezier';
+import { attachComponent, detachComponent } from '@utils/framework-delegate';
+import { shallowEqualStringMap, hasLazyBuild } from '@utils/helpers';
+import { transition } from '@utils/transition';
 
 import { config } from '../../global/config';
 import { getIonMode } from '../../global/ionic-global';
@@ -11,10 +15,6 @@ import type {
   FrameworkDelegate,
   Gesture,
 } from '../../interface';
-import { getTimeGivenProgression } from '../../utils/animation/cubic-bezier';
-import { attachComponent, detachComponent } from '../../utils/framework-delegate';
-import { shallowEqualStringMap, hasLazyBuild } from '../../utils/helpers';
-import { transition } from '../../utils/transition';
 import type { RouterOutletOptions, SwipeGestureHandler } from '../nav/nav-interface';
 import type { RouteID, RouterDirection, RouteWrite, NavOutlet } from '../router/utils/interface';
 
diff --git a/core/src/components/router/router.tsx b/core/src/components/router/router.tsx
index 0daf2eeac8..7a4b73a818 100644
--- a/core/src/components/router/router.tsx
+++ b/core/src/components/router/router.tsx
@@ -1,8 +1,8 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Listen, Method, Prop } from '@stencil/core';
+import { debounce } from '@utils/helpers';
 
 import type { AnimationBuilder, BackButtonEvent } from '../../interface';
-import { debounce } from '../../utils/helpers';
 import type { NavigationHookResult } from '../route/route-interface';
 
 import { ROUTER_INTENT_BACK, ROUTER_INTENT_FORWARD, ROUTER_INTENT_NONE } from './utils/constants';
diff --git a/core/src/components/router/utils/dom.ts b/core/src/components/router/utils/dom.ts
index 528a873d59..95bc6fec53 100644
--- a/core/src/components/router/utils/dom.ts
+++ b/core/src/components/router/utils/dom.ts
@@ -1,5 +1,6 @@
+import { componentOnReady } from '@utils/helpers';
+
 import type { AnimationBuilder } from '../../../interface';
-import { componentOnReady } from '../../../utils/helpers';
 
 import { ROUTER_INTENT_NONE } from './constants';
 import type { NavOutletElement, RouteChain, RouteID, RouterDirection } from './interface';
diff --git a/core/src/components/searchbar/searchbar.tsx b/core/src/components/searchbar/searchbar.tsx
index 85b717169a..5a432c065d 100644
--- a/core/src/components/searchbar/searchbar.tsx
+++ b/core/src/components/searchbar/searchbar.tsx
@@ -1,13 +1,13 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Method, Prop, State, Watch, forceUpdate, h } from '@stencil/core';
+import { debounceEvent, raf } from '@utils/helpers';
+import { isRTL } from '@utils/rtl';
+import { createColorClasses } from '@utils/theme';
 import { arrowBackSharp, closeCircle, closeSharp, searchOutline, searchSharp } from 'ionicons/icons';
 
 import { config } from '../../global/config';
 import { getIonMode } from '../../global/ionic-global';
 import type { AutocompleteTypes, Color, StyleEventDetail } from '../../interface';
-import { debounceEvent, raf } from '../../utils/helpers';
-import { isRTL } from '../../utils/rtl';
-import { createColorClasses } from '../../utils/theme';
 
 import type { SearchbarChangeEventDetail, SearchbarInputEventDetail } from './searchbar-interface';
 
diff --git a/core/src/components/segment-button/segment-button.ios.scss b/core/src/components/segment-button/segment-button.ios.scss
index fc90e5e398..2c95ea0b4e 100644
--- a/core/src/components/segment-button/segment-button.ios.scss
+++ b/core/src/components/segment-button/segment-button.ios.scss
@@ -30,7 +30,6 @@
 
   position: relative;
 
-  flex-basis: 0;
   flex-direction: row;
 
   min-width: #{$segment-button-ios-min-width};
diff --git a/core/src/components/segment-button/segment-button.md.scss b/core/src/components/segment-button/segment-button.md.scss
index 175893f2f9..9ee5b85f5e 100644
--- a/core/src/components/segment-button/segment-button.md.scss
+++ b/core/src/components/segment-button/segment-button.md.scss
@@ -27,7 +27,6 @@
 
   min-width: $segment-button-md-min-width;
 
-  max-width: $segment-button-md-max-width;
   min-height: $segment-button-md-min-height;
 
   border-width: var(--border-width);
diff --git a/core/src/components/segment-button/segment-button.scss b/core/src/components/segment-button/segment-button.scss
index 7342a9337a..fe89437bcc 100644
--- a/core/src/components/segment-button/segment-button.scss
+++ b/core/src/components/segment-button/segment-button.scss
@@ -57,7 +57,6 @@
 
   position: relative;
 
-  flex: 1 1 auto;
   flex-direction: column;
 
   height: auto;
@@ -71,9 +70,11 @@
 
   white-space: nowrap;
 
-  font-kerning: none;
-
   cursor: pointer;
+
+  grid-row: 1;
+
+  font-kerning: none;
 }
 
 .button-native {
@@ -210,12 +211,16 @@
 
   align-self: center;
 
+  max-width: 100%;
+
   line-height: 22px;
 
   text-overflow: ellipsis;
 
   white-space: nowrap;
 
+  overflow: hidden;
+
   box-sizing: border-box;
 
   pointer-events: none;
@@ -310,4 +315,4 @@ ion-ripple-effect {
   .segment-button-indicator-animated {
     transition: none;
   }
-}
\ No newline at end of file
+}
diff --git a/core/src/components/segment-button/segment-button.tsx b/core/src/components/segment-button/segment-button.tsx
index b8629e8999..26954fb6cb 100644
--- a/core/src/components/segment-button/segment-button.tsx
+++ b/core/src/components/segment-button/segment-button.tsx
@@ -1,11 +1,12 @@
 import type { ComponentInterface } from '@stencil/core';
 import { Component, Element, Host, Prop, Method, State, Watch, forceUpdate, h } from '@stencil/core';
+import type { ButtonInterface } from '@utils/element-interface';
+import type { Attributes } from '@utils/helpers';
+import { addEventListener, removeEventListener, inheritAttributes } from '@utils/helpers';
+import { hostContext } from '@utils/theme';
 
 import { getIonMode } from '../../global/ionic-global';
-import type { ButtonInterface } from '../../utils/element-interface';
-import type { Attributes } from '../../utils/helpers';
-import { addEventListener, removeEventListener, inheritAttributes } from '../../utils/helpers';
-import { hostContext } from '../../utils/theme';
+import type { SegmentValue } from '../segment/segment-interface';
 
 import type { SegmentButtonLayout } from './segment-button-interface';
 
@@ -53,7 +54,7 @@ export class SegmentButton implements ComponentInterface, ButtonInterface {
   /**
    * The value of the segment button.
    */
-  @Prop() value: string = 'ion-sb-' + ids++;
+  @Prop() value: SegmentValue = 'ion-sb-' + ids++;
   @Watch('value')
   valueChanged() {
     this.updateState();
diff --git a/core/src/components/segment/segment-interface.ts b/core/src/components/segment/segment-interface.ts
index 1ae52cdc0b..6325e802f8 100644
--- a/core/src/components/segment/segment-interface.ts
+++ b/core/src/components/segment/segment-interface.ts
@@ -1,7 +1,9 @@
 export type SegmentButtonLayout = 'icon-top' | 'icon-start' | 'icon-end' | 'icon-bottom' | 'icon-hide' | 'label-hide';
 
+export type SegmentValue = string | number;
+
 export interface SegmentChangeEventDetail {
-  value?: string;
+  value?: SegmentValue;
 }
 
 export interface SegmentCustomEvent extends CustomEvent {
diff --git a/core/src/components/segment/segment.md.scss b/core/src/components/segment/segment.md.scss
index 6c299e0ff7..6efc1174e7 100644
--- a/core/src/components/segment/segment.md.scss
+++ b/core/src/components/segment/segment.md.scss
@@ -6,6 +6,8 @@
 
 :host {
   --background: transparent;
+
+  grid-auto-columns: minmax(auto, $segment-button-md-max-width);
 }
 
 // Segment: In Toolbar
diff --git a/core/src/components/segment/segment.scss b/core/src/components/segment/segment.scss
index 42bb468692..f4e8ca9cfe 100644
--- a/core/src/components/segment/segment.scss
+++ b/core/src/components/segment/segment.scss
@@ -11,7 +11,9 @@
 
   @include font-smoothing();
 
-  display: flex;
+  display: grid;
+
+  grid-auto-columns: 1fr;
 
   position: relative;
 
@@ -41,6 +43,8 @@
   width: auto;
 
   overflow-x: auto;
+
+  grid-auto-columns: minmax(min-content, 1fr);
 }
 
 :host(.segment-scrollable::-webkit-scrollbar) {
diff --git a/core/src/components/segment/segment.tsx b/core/src/components/segment/segment.tsx
index 00de52e31f..6aa98fa755 100644
--- a/core/src/components/segment/segment.tsx
+++ b/core/src/components/segment/segment.tsx
@@ -1,13 +1,13 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Listen, Prop, State, Watch, h, writeTask } from '@stencil/core';
+import type { Gesture, GestureDetail } from '@utils/gesture';
+import { isRTL } from '@utils/rtl';
+import { createColorClasses, hostContext } from '@utils/theme';
 
 import { getIonMode } from '../../global/ionic-global';
 import type { Color, StyleEventDetail } from '../../interface';
-import type { Gesture, GestureDetail } from '../../utils/gesture';
-import { isRTL } from '../../utils/rtl';
-import { createColorClasses, hostContext } from '../../utils/theme';
 
-import type { SegmentChangeEventDetail } from './segment-interface';
+import type { SegmentChangeEventDetail, SegmentValue } from './segment-interface';
 
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
@@ -24,7 +24,7 @@ export class Segment implements ComponentInterface {
   private gesture?: Gesture;
 
   // Value before the segment is dragged
-  private valueBeforeGesture?: string;
+  private valueBeforeGesture?: SegmentValue;
 
   @Element() el!: HTMLIonSegmentElement;
 
@@ -74,10 +74,10 @@ export class Segment implements ComponentInterface {
   /**
    * the value of the segment.
    */
-  @Prop({ mutable: true }) value?: string;
+  @Prop({ mutable: true }) value?: SegmentValue;
 
   @Watch('value')
-  protected valueChanged(value: string | undefined) {
+  protected valueChanged(value: SegmentValue | undefined) {
     /**
      * `ionSelect` is emitted every time the value changes (internal or external changes).
      * Used by `ion-segment-button` to determine if the button should be checked.
diff --git a/core/src/components/segment/test/basic/index.html b/core/src/components/segment/test/basic/index.html
index be76eafb28..f9eb7a5261 100644
--- a/core/src/components/segment/test/basic/index.html
+++ b/core/src/components/segment/test/basic/index.html
@@ -23,53 +23,91 @@
 
         <ion-toolbar>
           <ion-segment class="event-tester" value="Free">
-            <ion-segment-button value="Paid"> PaidPaidPaid </ion-segment-button>
-            <ion-segment-button value="Free"> Free </ion-segment-button>
-            <ion-segment-button value="Top"> Top </ion-segment-button>
+            <ion-segment-button value="Paid">
+              <ion-label>PaidPaidPaid</ion-label>
+            </ion-segment-button>
+            <ion-segment-button value="Free">
+              <ion-label>Free</ion-label>
+            </ion-segment-button>
+            <ion-segment-button value="Top">
+              <ion-label>Top</ion-label>
+            </ion-segment-button>
           </ion-segment>
         </ion-toolbar>
 
         <ion-toolbar>
           <ion-segment value="2" scrollable="true">
-            <ion-segment-button value="1">Button 1</ion-segment-button>
-            <ion-segment-button value="2">Button 3</ion-segment-button>
-            <ion-segment-button value="3">Button 3</ion-segment-button>
-            <ion-segment-button value="4">Button 4</ion-segment-button>
-            <ion-segment-button value="5">Button 5</ion-segment-button>
-            <ion-segment-button value="6">Button 6</ion-segment-button>
+            <ion-segment-button value="1">
+              <ion-label>Button 1</ion-label>
+            </ion-segment-button>
+            <ion-segment-button value="2">
+              <ion-label>Button 2</ion-label>
+            </ion-segment-button>
+            <ion-segment-button value="3">
+              <ion-label>Button 3</ion-label>
+            </ion-segment-button>
+            <ion-segment-button value="4">
+              <ion-label>Button 4</ion-label>
+            </ion-segment-button>
+            <ion-segment-button value="5">
+              <ion-label>Button 5</ion-label>
+            </ion-segment-button>
+            <ion-segment-button value="6">
+              <ion-label>Button 6</ion-label>
+            </ion-segment-button>
           </ion-segment>
         </ion-toolbar>
 
         <ion-toolbar>
           <ion-segment name="dynamicPropDisable" disabled color="danger">
-            <ion-segment-button value="Bookmarks"> Bookmarks </ion-segment-button>
-            <ion-segment-button value="Reading List"> Reading List </ion-segment-button>
-            <ion-segment-button value="Shared Links"> Shared Links </ion-segment-button>
+            <ion-segment-button value="Bookmarks">
+              <ion-label>Bookmarks</ion-label>
+            </ion-segment-button>
+            <ion-segment-button value="Reading List">
+              <ion-label>Reading List</ion-label>
+            </ion-segment-button>
+            <ion-segment-button value="Shared Links">
+              <ion-label>Shared Links</ion-label>
+            </ion-segment-button>
           </ion-segment>
         </ion-toolbar>
 
         <ion-toolbar>
           <ion-segment name="dynamicAttrElem" color="secondary" value="active">
-            <ion-segment-button value="active"> Active </ion-segment-button>
-            <ion-segment-button name="dynamicAttrDisable" value="disabled" disabled="true">
-              Disabled
+            <ion-segment-button value="active">
+              <ion-label>Active</ion-label>
+            </ion-segment-button>
+            <ion-segment-button name="dynamicAttrDisable" value="disabled" disabled="true">
+              <ion-label>Disabled</ion-label>
+            </ion-segment-button>
+            <ion-segment-button value="inactive" disabled="false">
+              <ion-label>Inactive</ion-label>
             </ion-segment-button>
-            <ion-segment-button value="inactive" disabled="false"> Inactive </ion-segment-button>
           </ion-segment>
         </ion-toolbar>
 
         <ion-toolbar>
           <ion-segment value="all">
-            <ion-segment-button value="all"> All </ion-segment-button>
-            <ion-segment-button value="missed"> Missed </ion-segment-button>
+            <ion-segment-button value="all">
+              <ion-label>All</ion-label>
+            </ion-segment-button>
+            <ion-segment-button value="missed">
+              <ion-label>Missed</ion-label>
+            </ion-segment-button>
           </ion-segment>
         </ion-toolbar>
       </ion-header>
 
       <ion-segment value="segment">
-        <ion-segment-button value="segment"> Segment </ion-segment-button>
-        <ion-segment-button value="outside"> Outside </ion-segment-button>
-        <ion-segment-button value="content"> Content </ion-segment-button>
+        <ion-segment-button value="segment">
+          <ion-label>Segment</ion-label>
+        </ion-segment-button>
+        <ion-segment-button value="outside">
+          <ion-label>Outside</ion-label>
+        </ion-segment-button>
+        <ion-segment-button value="content">
+          <ion-label>Content</ion-label>
+        </ion-segment-button>
       </ion-segment>
 
       <ion-content>
diff --git a/core/src/components/segment/test/basic/segment.e2e.ts b/core/src/components/segment/test/basic/segment.e2e.ts
index f9f13b22ac..b158d78d33 100644
--- a/core/src/components/segment/test/basic/segment.e2e.ts
+++ b/core/src/components/segment/test/basic/segment.e2e.ts
@@ -7,9 +7,15 @@ configs().forEach(({ title, screenshot, config }) => {
       await page.setContent(
         `
         <ion-segment>
-          <ion-segment-button value="a">First</ion-segment-button>
-          <ion-segment-button value="b">Second</ion-segment-button>
-          <ion-segment-button value="c">Third</ion-segment-button>
+          <ion-segment-button value="a">
+            <ion-label>First</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="b">
+            <ion-label>Second</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="c">
+            <ion-label>Third</ion-label>
+          </ion-segment-button>
         </ion-segment>
       `,
         config
@@ -23,9 +29,15 @@ configs().forEach(({ title, screenshot, config }) => {
       await page.setContent(
         `
         <ion-segment value="a">
-          <ion-segment-button value="a">First</ion-segment-button>
-          <ion-segment-button value="b">Second</ion-segment-button>
-          <ion-segment-button value="c">Third</ion-segment-button>
+          <ion-segment-button value="a">
+            <ion-label>First</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="b">
+            <ion-label>Second</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="c">
+            <ion-label>Third</ion-label>
+          </ion-segment-button>
         </ion-segment>
       `,
         config
@@ -47,9 +59,15 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
       await page.setContent(
         `
         <ion-segment value="b">
-          <ion-segment-button value="a">First</ion-segment-button>
-          <ion-segment-button value="b" disabled="true">Second</ion-segment-button>
-          <ion-segment-button value="c">Third</ion-segment-button>
+          <ion-segment-button value="a">
+            <ion-label>First</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="b" disabled="true">
+            <ion-label>Second</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="c">
+            <ion-label>Third</ion-label>
+          </ion-segment-button>
         </ion-segment>
       `,
         config
@@ -64,9 +82,15 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
       await page.setContent(
         `
         <ion-segment value="b" color="danger">
-          <ion-segment-button value="a">First</ion-segment-button>
-          <ion-segment-button value="b">Second</ion-segment-button>
-          <ion-segment-button value="c">Third</ion-segment-button>
+          <ion-segment-button value="a">
+            <ion-label>First</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="b">
+            <ion-label>Second</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="c">
+            <ion-label>Third</ion-label>
+          </ion-segment-button>
         </ion-segment>
       `,
         config
diff --git a/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-color-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-color-ios-ltr-Mobile-Chrome-linux.png
index 9df96146a3..6e0b05c485 100644
Binary files a/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-color-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-color-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-color-ios-ltr-Mobile-Safari-linux.png b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-color-ios-ltr-Mobile-Safari-linux.png
index 087575d8fd..4e5e570d7f 100644
Binary files a/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-color-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-color-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-color-md-ltr-Mobile-Chrome-linux.png b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-color-md-ltr-Mobile-Chrome-linux.png
index f408b00049..cc655fb527 100644
Binary files a/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-color-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-color-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-color-md-ltr-Mobile-Firefox-linux.png b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-color-md-ltr-Mobile-Firefox-linux.png
index 3fe3e3bc5b..f609c4769b 100644
Binary files a/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-color-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-color-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-color-md-ltr-Mobile-Safari-linux.png b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-color-md-ltr-Mobile-Safari-linux.png
index 434ce0d869..a87d8dc1f1 100644
Binary files a/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-color-md-ltr-Mobile-Safari-linux.png and b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-color-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-disabled-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-disabled-ios-ltr-Mobile-Chrome-linux.png
index 7be524098a..b5bcb45b8a 100644
Binary files a/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-disabled-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-disabled-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-disabled-ios-ltr-Mobile-Safari-linux.png b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-disabled-ios-ltr-Mobile-Safari-linux.png
index 7441d84db6..1e7a6d2548 100644
Binary files a/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-disabled-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-disabled-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-disabled-md-ltr-Mobile-Chrome-linux.png b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-disabled-md-ltr-Mobile-Chrome-linux.png
index ff5ab4b17e..9ef61a597b 100644
Binary files a/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-disabled-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-disabled-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-disabled-md-ltr-Mobile-Firefox-linux.png b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-disabled-md-ltr-Mobile-Firefox-linux.png
index b598bb20bc..77b5dd3e03 100644
Binary files a/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-disabled-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-disabled-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-disabled-md-ltr-Mobile-Safari-linux.png b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-disabled-md-ltr-Mobile-Safari-linux.png
index d96456e6d2..ae93e12bf4 100644
Binary files a/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-disabled-md-ltr-Mobile-Safari-linux.png and b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-disabled-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-no-value-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-no-value-ios-ltr-Mobile-Chrome-linux.png
index c027a936b6..e92e3e31d7 100644
Binary files a/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-no-value-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-no-value-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-no-value-ios-ltr-Mobile-Safari-linux.png b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-no-value-ios-ltr-Mobile-Safari-linux.png
index bbd022aa3e..39a9fc75d5 100644
Binary files a/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-no-value-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-no-value-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-no-value-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-no-value-ios-rtl-Mobile-Chrome-linux.png
index dfc79d8026..d64a915333 100644
Binary files a/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-no-value-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-no-value-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-no-value-ios-rtl-Mobile-Safari-linux.png b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-no-value-ios-rtl-Mobile-Safari-linux.png
index bec8f30106..72a357e83f 100644
Binary files a/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-no-value-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-no-value-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-no-value-md-ltr-Mobile-Chrome-linux.png b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-no-value-md-ltr-Mobile-Chrome-linux.png
index d77e44c84a..58267e8f77 100644
Binary files a/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-no-value-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-no-value-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-no-value-md-ltr-Mobile-Firefox-linux.png b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-no-value-md-ltr-Mobile-Firefox-linux.png
index 623c472064..7835b32983 100644
Binary files a/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-no-value-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-no-value-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-no-value-md-ltr-Mobile-Safari-linux.png b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-no-value-md-ltr-Mobile-Safari-linux.png
index 5e3dccc7f6..52c19c3505 100644
Binary files a/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-no-value-md-ltr-Mobile-Safari-linux.png and b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-no-value-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-no-value-md-rtl-Mobile-Chrome-linux.png b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-no-value-md-rtl-Mobile-Chrome-linux.png
index 181a8f3786..61268eec1b 100644
Binary files a/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-no-value-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-no-value-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-no-value-md-rtl-Mobile-Firefox-linux.png b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-no-value-md-rtl-Mobile-Firefox-linux.png
index d309c9a615..3c34c998ca 100644
Binary files a/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-no-value-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-no-value-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-no-value-md-rtl-Mobile-Safari-linux.png b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-no-value-md-rtl-Mobile-Safari-linux.png
index b0ad2b60c6..ebe1278a95 100644
Binary files a/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-no-value-md-rtl-Mobile-Safari-linux.png and b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-no-value-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-value-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-value-ios-ltr-Mobile-Chrome-linux.png
index 65ddd350ae..0799097194 100644
Binary files a/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-value-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-value-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-value-ios-ltr-Mobile-Safari-linux.png b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-value-ios-ltr-Mobile-Safari-linux.png
index 1ce6b15d18..e246e83632 100644
Binary files a/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-value-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-value-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-value-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-value-ios-rtl-Mobile-Chrome-linux.png
index 0ff4b82b63..efa064a090 100644
Binary files a/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-value-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-value-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-value-ios-rtl-Mobile-Safari-linux.png b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-value-ios-rtl-Mobile-Safari-linux.png
index e74b025ce7..85c1eb3ae7 100644
Binary files a/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-value-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-value-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-value-md-ltr-Mobile-Chrome-linux.png b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-value-md-ltr-Mobile-Chrome-linux.png
index e5a69579ca..8a5f4e02f8 100644
Binary files a/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-value-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-value-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-value-md-ltr-Mobile-Firefox-linux.png b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-value-md-ltr-Mobile-Firefox-linux.png
index 7598573c26..bcad5e0f85 100644
Binary files a/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-value-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-value-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-value-md-ltr-Mobile-Safari-linux.png b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-value-md-ltr-Mobile-Safari-linux.png
index 3e429799df..5fb426a029 100644
Binary files a/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-value-md-ltr-Mobile-Safari-linux.png and b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-value-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-value-md-rtl-Mobile-Chrome-linux.png b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-value-md-rtl-Mobile-Chrome-linux.png
index bdc70d4140..4b210d8e22 100644
Binary files a/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-value-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-value-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-value-md-rtl-Mobile-Firefox-linux.png b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-value-md-rtl-Mobile-Firefox-linux.png
index 9cd4bc4dc6..fb0b2f5440 100644
Binary files a/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-value-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-value-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-value-md-rtl-Mobile-Safari-linux.png b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-value-md-rtl-Mobile-Safari-linux.png
index b96cea196f..29211ebd0e 100644
Binary files a/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-value-md-rtl-Mobile-Safari-linux.png and b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-value-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/segment/test/custom/segment.e2e.ts-snapshots/segment-custom-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/segment/test/custom/segment.e2e.ts-snapshots/segment-custom-ios-ltr-Mobile-Chrome-linux.png
index 661e86c58d..d65ede6428 100644
Binary files a/core/src/components/segment/test/custom/segment.e2e.ts-snapshots/segment-custom-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/segment/test/custom/segment.e2e.ts-snapshots/segment-custom-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/segment/test/custom/segment.e2e.ts-snapshots/segment-custom-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/segment/test/custom/segment.e2e.ts-snapshots/segment-custom-ios-ltr-Mobile-Firefox-linux.png
index 8eea7b8fc0..5e3def9d9d 100644
Binary files a/core/src/components/segment/test/custom/segment.e2e.ts-snapshots/segment-custom-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/segment/test/custom/segment.e2e.ts-snapshots/segment-custom-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/segment/test/custom/segment.e2e.ts-snapshots/segment-custom-ios-ltr-Mobile-Safari-linux.png b/core/src/components/segment/test/custom/segment.e2e.ts-snapshots/segment-custom-ios-ltr-Mobile-Safari-linux.png
index bb8d5adf8a..6ede1da44a 100644
Binary files a/core/src/components/segment/test/custom/segment.e2e.ts-snapshots/segment-custom-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/segment/test/custom/segment.e2e.ts-snapshots/segment-custom-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/segment/test/custom/segment.e2e.ts-snapshots/segment-custom-md-ltr-Mobile-Chrome-linux.png b/core/src/components/segment/test/custom/segment.e2e.ts-snapshots/segment-custom-md-ltr-Mobile-Chrome-linux.png
index bf95250f19..5a15142b2e 100644
Binary files a/core/src/components/segment/test/custom/segment.e2e.ts-snapshots/segment-custom-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/segment/test/custom/segment.e2e.ts-snapshots/segment-custom-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/segment/test/custom/segment.e2e.ts-snapshots/segment-custom-md-ltr-Mobile-Firefox-linux.png b/core/src/components/segment/test/custom/segment.e2e.ts-snapshots/segment-custom-md-ltr-Mobile-Firefox-linux.png
index e0e5fc67e4..c80ff12ca5 100644
Binary files a/core/src/components/segment/test/custom/segment.e2e.ts-snapshots/segment-custom-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/segment/test/custom/segment.e2e.ts-snapshots/segment-custom-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/segment/test/custom/segment.e2e.ts-snapshots/segment-custom-md-ltr-Mobile-Safari-linux.png b/core/src/components/segment/test/custom/segment.e2e.ts-snapshots/segment-custom-md-ltr-Mobile-Safari-linux.png
index c528b57df4..c3a2d15516 100644
Binary files a/core/src/components/segment/test/custom/segment.e2e.ts-snapshots/segment-custom-md-ltr-Mobile-Safari-linux.png and b/core/src/components/segment/test/custom/segment.e2e.ts-snapshots/segment-custom-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/segment/test/icon/segment.e2e.ts-snapshots/segment-icons-md-ltr-Mobile-Chrome-linux.png b/core/src/components/segment/test/icon/segment.e2e.ts-snapshots/segment-icons-md-ltr-Mobile-Chrome-linux.png
index fb7e93656d..8f95e073a7 100644
Binary files a/core/src/components/segment/test/icon/segment.e2e.ts-snapshots/segment-icons-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/segment/test/icon/segment.e2e.ts-snapshots/segment-icons-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/segment/test/icon/segment.e2e.ts-snapshots/segment-icons-md-ltr-Mobile-Firefox-linux.png b/core/src/components/segment/test/icon/segment.e2e.ts-snapshots/segment-icons-md-ltr-Mobile-Firefox-linux.png
index 39bd55b844..7caa4c4323 100644
Binary files a/core/src/components/segment/test/icon/segment.e2e.ts-snapshots/segment-icons-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/segment/test/icon/segment.e2e.ts-snapshots/segment-icons-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/segment/test/icon/segment.e2e.ts-snapshots/segment-icons-md-ltr-Mobile-Safari-linux.png b/core/src/components/segment/test/icon/segment.e2e.ts-snapshots/segment-icons-md-ltr-Mobile-Safari-linux.png
index 1f8555d1fc..04aefd8fc9 100644
Binary files a/core/src/components/segment/test/icon/segment.e2e.ts-snapshots/segment-icons-md-ltr-Mobile-Safari-linux.png and b/core/src/components/segment/test/icon/segment.e2e.ts-snapshots/segment-icons-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/segment/test/icon/segment.e2e.ts-snapshots/segment-icons-md-rtl-Mobile-Chrome-linux.png b/core/src/components/segment/test/icon/segment.e2e.ts-snapshots/segment-icons-md-rtl-Mobile-Chrome-linux.png
index 48f9f037e6..15cc2d07dc 100644
Binary files a/core/src/components/segment/test/icon/segment.e2e.ts-snapshots/segment-icons-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/segment/test/icon/segment.e2e.ts-snapshots/segment-icons-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/segment/test/icon/segment.e2e.ts-snapshots/segment-icons-md-rtl-Mobile-Firefox-linux.png b/core/src/components/segment/test/icon/segment.e2e.ts-snapshots/segment-icons-md-rtl-Mobile-Firefox-linux.png
index bbf4722690..cb0dfd4cff 100644
Binary files a/core/src/components/segment/test/icon/segment.e2e.ts-snapshots/segment-icons-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/segment/test/icon/segment.e2e.ts-snapshots/segment-icons-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/segment/test/icon/segment.e2e.ts-snapshots/segment-icons-md-rtl-Mobile-Safari-linux.png b/core/src/components/segment/test/icon/segment.e2e.ts-snapshots/segment-icons-md-rtl-Mobile-Safari-linux.png
index 7941f4ee17..b1bfa25530 100644
Binary files a/core/src/components/segment/test/icon/segment.e2e.ts-snapshots/segment-icons-md-rtl-Mobile-Safari-linux.png and b/core/src/components/segment/test/icon/segment.e2e.ts-snapshots/segment-icons-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/segment/test/scrollable/segment.e2e.ts b/core/src/components/segment/test/scrollable/segment.e2e.ts
index d40258a70f..3a21b9ac92 100644
--- a/core/src/components/segment/test/scrollable/segment.e2e.ts
+++ b/core/src/components/segment/test/scrollable/segment.e2e.ts
@@ -7,15 +7,33 @@ configs().forEach(({ title, screenshot, config }) => {
       await page.setContent(
         `
         <ion-segment scrollable="true" value="2">
-          <ion-segment-button value="1">First</ion-segment-button>
-          <ion-segment-button value="2">Second</ion-segment-button>
-          <ion-segment-button value="3">Third</ion-segment-button>
-          <ion-segment-button value="4">Fourth</ion-segment-button>
-          <ion-segment-button value="5">Fifth</ion-segment-button>
-          <ion-segment-button value="6">Sixth</ion-segment-button>
-          <ion-segment-button value="7">Seventh</ion-segment-button>
-          <ion-segment-button value="8">Eigth</ion-segment-button>
-          <ion-segment-button value="9">Nineth</ion-segment-button>
+          <ion-segment-button value="1">
+            <ion-label>First</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="2">
+            <ion-label>Second</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="3">
+            <ion-label>Third</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="4">
+            <ion-label>Fourth</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="5">
+            <ion-label>Fifth</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="6">
+            <ion-label>Sixth</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="7">
+            <ion-label>Seventh</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="8">
+            <ion-label>Eighth</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="9">
+            <ion-label>Ninth</ion-label>
+          </ion-segment-button>
         </ion-segment>
       `,
         config
diff --git a/core/src/components/segment/test/scrollable/segment.e2e.ts-snapshots/segment-scrollable-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/segment/test/scrollable/segment.e2e.ts-snapshots/segment-scrollable-ios-ltr-Mobile-Chrome-linux.png
index 184a1c5313..7894f9ffa0 100644
Binary files a/core/src/components/segment/test/scrollable/segment.e2e.ts-snapshots/segment-scrollable-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/segment/test/scrollable/segment.e2e.ts-snapshots/segment-scrollable-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/segment/test/scrollable/segment.e2e.ts-snapshots/segment-scrollable-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/segment/test/scrollable/segment.e2e.ts-snapshots/segment-scrollable-ios-ltr-Mobile-Firefox-linux.png
index 31bfe165eb..d3ec69ee3f 100644
Binary files a/core/src/components/segment/test/scrollable/segment.e2e.ts-snapshots/segment-scrollable-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/segment/test/scrollable/segment.e2e.ts-snapshots/segment-scrollable-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/segment/test/scrollable/segment.e2e.ts-snapshots/segment-scrollable-ios-ltr-Mobile-Safari-linux.png b/core/src/components/segment/test/scrollable/segment.e2e.ts-snapshots/segment-scrollable-ios-ltr-Mobile-Safari-linux.png
index b0cdcd2699..503f7f7bb4 100644
Binary files a/core/src/components/segment/test/scrollable/segment.e2e.ts-snapshots/segment-scrollable-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/segment/test/scrollable/segment.e2e.ts-snapshots/segment-scrollable-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/segment/test/scrollable/segment.e2e.ts-snapshots/segment-scrollable-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/segment/test/scrollable/segment.e2e.ts-snapshots/segment-scrollable-ios-rtl-Mobile-Chrome-linux.png
index 908195695c..ec1161a0fa 100644
Binary files a/core/src/components/segment/test/scrollable/segment.e2e.ts-snapshots/segment-scrollable-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/segment/test/scrollable/segment.e2e.ts-snapshots/segment-scrollable-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/segment/test/scrollable/segment.e2e.ts-snapshots/segment-scrollable-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/segment/test/scrollable/segment.e2e.ts-snapshots/segment-scrollable-ios-rtl-Mobile-Firefox-linux.png
index b508faef93..e6733293fe 100644
Binary files a/core/src/components/segment/test/scrollable/segment.e2e.ts-snapshots/segment-scrollable-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/segment/test/scrollable/segment.e2e.ts-snapshots/segment-scrollable-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/segment/test/scrollable/segment.e2e.ts-snapshots/segment-scrollable-ios-rtl-Mobile-Safari-linux.png b/core/src/components/segment/test/scrollable/segment.e2e.ts-snapshots/segment-scrollable-ios-rtl-Mobile-Safari-linux.png
index 50c1473a77..fede3a3f2d 100644
Binary files a/core/src/components/segment/test/scrollable/segment.e2e.ts-snapshots/segment-scrollable-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/segment/test/scrollable/segment.e2e.ts-snapshots/segment-scrollable-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/segment/test/segment-events.e2e.ts b/core/src/components/segment/test/segment-events.e2e.ts
index f0b10d0e9a..71aa7bdf80 100644
--- a/core/src/components/segment/test/segment-events.e2e.ts
+++ b/core/src/components/segment/test/segment-events.e2e.ts
@@ -11,9 +11,15 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
         await page.setContent(
           `
           <ion-segment>
-            <ion-segment-button value="1">One</ion-segment-button>
-            <ion-segment-button value="2">Two</ion-segment-button>
-            <ion-segment-button value="3">Three</ion-segment-button>
+            <ion-segment-button value="1">
+              <ion-label>One</ion-label>
+            </ion-segment-button>
+            <ion-segment-button value="2">
+              <ion-label>Two</ion-label>
+            </ion-segment-button>
+            <ion-segment-button value="3">
+              <ion-label>Three</ion-label>
+            </ion-segment-button>
           </ion-segment>
       `,
           config
@@ -40,9 +46,15 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
         await page.setContent(
           `
             <ion-segment value="1">
-              <ion-segment-button value="1">One</ion-segment-button>
-              <ion-segment-button value="2">Two</ion-segment-button>
-              <ion-segment-button value="3">Three</ion-segment-button>
+              <ion-segment-button value="1">
+                <ion-label>One</ion-label>
+              </ion-segment-button>
+              <ion-segment-button value="2">
+                <ion-label>Two</ion-label>
+              </ion-segment-button>
+              <ion-segment-button value="3">
+                <ion-label>Three</ion-label>
+              </ion-segment-button>
             </ion-segment>
           `,
           config
@@ -65,9 +77,15 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
         await page.setContent(
           `
             <ion-segment>
-              <ion-segment-button value="1">One</ion-segment-button>
-              <ion-segment-button value="2">Two</ion-segment-button>
-              <ion-segment-button value="3">Three</ion-segment-button>
+              <ion-segment-button value="1">
+                <ion-label>One</ion-label>
+              </ion-segment-button>
+              <ion-segment-button value="2">
+                <ion-label>Two</ion-label>
+              </ion-segment-button>
+              <ion-segment-button value="3">
+                <ion-label>Three</ion-label>
+              </ion-segment-button>
             </ion-segment>
           `,
           config
@@ -100,9 +118,15 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
           <ion-app>
             <ion-toolbar>
               <ion-segment value="1">
-                <ion-segment-button value="1">One</ion-segment-button>
-                <ion-segment-button value="2">Two</ion-segment-button>
-                <ion-segment-button value="3">Three</ion-segment-button>
+                <ion-segment-button value="1">
+                  <ion-label>One</ion-label>
+                </ion-segment-button>
+                <ion-segment-button value="2">
+                  <ion-label>Two</ion-label>
+                </ion-segment-button>
+                <ion-segment-button value="3">
+                  <ion-label>Three</ion-label>
+                </ion-segment-button>
               </ion-segment>
             </ion-toolbar>
           </ion-app>
@@ -129,9 +153,15 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
         await page.setContent(
           `
           <ion-segment value="1">
-            <ion-segment-button value="1">One</ion-segment-button>
-            <ion-segment-button value="2">Two</ion-segment-button>
-            <ion-segment-button value="3">Three</ion-segment-button>
+            <ion-segment-button value="1">
+              <ion-label>One</ion-label>
+            </ion-segment-button>
+            <ion-segment-button value="2">
+              <ion-label>Two</ion-label>
+            </ion-segment-button>
+            <ion-segment-button value="3">
+              <ion-label>Three</ion-label>
+            </ion-segment-button>
           </ion-segment>
         `,
           config
@@ -158,9 +188,15 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
       await page.setContent(
         `
         <ion-segment value="1">
-          <ion-segment-button value="1">One</ion-segment-button>
-          <ion-segment-button value="2">Two</ion-segment-button>
-          <ion-segment-button value="3">Three</ion-segment-button>
+          <ion-segment-button value="1">
+            <ion-label>One</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="2">
+            <ion-label>Two</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="3">
+            <ion-label>Three</ion-label>
+          </ion-segment-button>
         </ion-segment>
       `,
         config
@@ -180,9 +216,15 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
       await page.setContent(
         `
         <ion-segment value="1">
-          <ion-segment-button value="1">One</ion-segment-button>
-          <ion-segment-button value="2">Two</ion-segment-button>
-          <ion-segment-button value="3">Three</ion-segment-button>
+          <ion-segment-button value="1">
+            <ion-label>One</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="2">
+            <ion-label>Two</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="3">
+            <ion-label>Three</ion-label>
+          </ion-segment-button>
         </ion-segment>
       `,
         config
@@ -206,9 +248,15 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
       await page.setContent(
         `
         <ion-segment value="1" swipe-gesture="false">
-          <ion-segment-button value="1">One</ion-segment-button>
-          <ion-segment-button value="2">Two</ion-segment-button>
-          <ion-segment-button value="3">Three</ion-segment-button>
+          <ion-segment-button value="1">
+            <ion-label>One</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="2">
+            <ion-label>Two</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="3">
+            <ion-label>Three</ion-label>
+          </ion-segment-button>
         </ion-segment>
       `,
         config
diff --git a/core/src/components/segment/test/segment.spec.ts b/core/src/components/segment/test/segment.spec.ts
index 18f5566311..b9f55b3334 100644
--- a/core/src/components/segment/test/segment.spec.ts
+++ b/core/src/components/segment/test/segment.spec.ts
@@ -10,7 +10,10 @@ it('should disable segment buttons added to disabled segment async', async () =>
   });
 
   const segment = page.body.querySelector('ion-segment');
-  segment.innerHTML = `<ion-segment-button>Segment Button</ion-segment-button>`;
+  segment.innerHTML = `
+    <ion-segment-button>
+      <ion-label>Segment Button</ion-label>
+    </ion-segment-button>`;
   await page.waitForChanges();
 
   const segmentButton = page.body.querySelector('ion-segment-button');
@@ -22,7 +25,9 @@ it('should set checked state when value is set asynchronously', async () => {
     components: [Segment, SegmentButton],
     html: `
       <ion-segment value="first">
-        <ion-segment-button>First</ion-segment-button>
+        <ion-segment-button>
+          <ion-label>First</ion-label>
+        </ion-segment-button>
       </ion-segment>
     `,
   });
diff --git a/core/src/components/segment/test/toolbar/segment.e2e.ts b/core/src/components/segment/test/toolbar/segment.e2e.ts
index a3687a6feb..55151ede46 100644
--- a/core/src/components/segment/test/toolbar/segment.e2e.ts
+++ b/core/src/components/segment/test/toolbar/segment.e2e.ts
@@ -9,9 +9,15 @@ configs().forEach(({ title, screenshot, config }) => {
         <ion-header>
           <ion-toolbar>
             <ion-segment value="a">
-              <ion-segment-button value="a">First</ion-segment-button>
-              <ion-segment-button value="b">Second</ion-segment-button>
-              <ion-segment-button value="c" disabled="true">Third</ion-segment-button>
+              <ion-segment-button value="a">
+                <ion-label>First</ion-label>
+              </ion-segment-button>
+              <ion-segment-button value="b">
+                <ion-label>Second</ion-label>
+              </ion-segment-button>
+              <ion-segment-button value="c" disabled="true">
+                <ion-label>Third</ion-label>
+              </ion-segment-button>
             </ion-segment>
           </ion-toolbar>
         </ion-header>
@@ -30,30 +36,54 @@ configs().forEach(({ title, screenshot, config }) => {
         <ion-header>
           <ion-toolbar color="primary">
             <ion-segment value="a">
-              <ion-segment-button value="a">First</ion-segment-button>
-              <ion-segment-button value="b">Second</ion-segment-button>
-              <ion-segment-button value="c" disabled="true">Third</ion-segment-button>
+              <ion-segment-button value="a">
+                <ion-label>First</ion-label>
+              </ion-segment-button>
+              <ion-segment-button value="b">
+                <ion-label>Second</ion-label>
+              </ion-segment-button>
+              <ion-segment-button value="c" disabled="true">
+                <ion-label>Third</ion-label>
+              </ion-segment-button>
             </ion-segment>
           </ion-toolbar>
           <ion-toolbar color="light">
             <ion-segment value="a">
-              <ion-segment-button value="a">First</ion-segment-button>
-              <ion-segment-button value="b">Second</ion-segment-button>
-              <ion-segment-button value="c" disabled="true">Third</ion-segment-button>
+              <ion-segment-button value="a">
+                <ion-label>First</ion-label>
+              </ion-segment-button>
+              <ion-segment-button value="b">
+                <ion-label>Second</ion-label>
+              </ion-segment-button>
+              <ion-segment-button value="c" disabled="true">
+                <ion-label>Third</ion-label>
+              </ion-segment-button>
             </ion-segment>
           </ion-toolbar>
           <ion-toolbar color="medium">
             <ion-segment value="a">
-              <ion-segment-button value="a">First</ion-segment-button>
-              <ion-segment-button value="b">Second</ion-segment-button>
-              <ion-segment-button value="c" disabled="true">Third</ion-segment-button>
+              <ion-segment-button value="a">
+                <ion-label>First</ion-label>
+              </ion-segment-button>
+              <ion-segment-button value="b">
+                <ion-label>Second</ion-label>
+              </ion-segment-button>
+              <ion-segment-button value="c" disabled="true">
+                <ion-label>Third</ion-label>
+              </ion-segment-button>
             </ion-segment>
           </ion-toolbar>
           <ion-toolbar color="dark">
             <ion-segment value="a">
-              <ion-segment-button value="a">First</ion-segment-button>
-              <ion-segment-button value="b">Second</ion-segment-button>
-              <ion-segment-button value="c" disabled="true">Third</ion-segment-button>
+              <ion-segment-button value="a">
+                <ion-label>First</ion-label>
+              </ion-segment-button>
+              <ion-segment-button value="b">
+                <ion-label>Second</ion-label>
+              </ion-segment-button>
+              <ion-segment-button value="c" disabled="true">
+                <ion-label>Third</ion-label>
+              </ion-segment-button>
             </ion-segment>
           </ion-toolbar>
         </ion-header>
@@ -84,9 +114,15 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
         <ion-header>
           <ion-toolbar mode="ios" color="primary">
             <ion-segment mode="md" value="a">
-              <ion-segment-button value="a">First</ion-segment-button>
-              <ion-segment-button value="b">Second</ion-segment-button>
-              <ion-segment-button value="c" disabled="true">Third</ion-segment-button>
+              <ion-segment-button value="a">
+                <ion-label>First</ion-label>
+              </ion-segment-button>
+              <ion-segment-button value="b">
+                <ion-label>Second</ion-label>
+              </ion-segment-button>
+              <ion-segment-button value="c" disabled="true">
+                <ion-label>Third</ion-label>
+              </ion-segment-button>
             </ion-segment>
           </ion-toolbar>
         </ion-header>
diff --git a/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-ios-ltr-Mobile-Chrome-linux.png
index 522b236f31..50289ae027 100644
Binary files a/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-ios-ltr-Mobile-Firefox-linux.png
index d7c81a3fcd..8c8a0fa592 100644
Binary files a/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-ios-ltr-Mobile-Safari-linux.png b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-ios-ltr-Mobile-Safari-linux.png
index 5d81610a60..240ff6131b 100644
Binary files a/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-ios-rtl-Mobile-Chrome-linux.png
index 4747e32d1a..ff2ea2b1c0 100644
Binary files a/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-ios-rtl-Mobile-Firefox-linux.png
index 703a18b1cc..fb195f3df1 100644
Binary files a/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-ios-rtl-Mobile-Safari-linux.png b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-ios-rtl-Mobile-Safari-linux.png
index 944c48abda..bc3ec4e461 100644
Binary files a/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-md-ltr-Mobile-Chrome-linux.png b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-md-ltr-Mobile-Chrome-linux.png
index 0205164369..dcb4fcedd6 100644
Binary files a/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-md-ltr-Mobile-Firefox-linux.png b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-md-ltr-Mobile-Firefox-linux.png
index a2718f8300..df02c33b04 100644
Binary files a/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-md-ltr-Mobile-Safari-linux.png b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-md-ltr-Mobile-Safari-linux.png
index b9c20f151a..52d669a9a4 100644
Binary files a/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-md-ltr-Mobile-Safari-linux.png and b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-md-rtl-Mobile-Chrome-linux.png b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-md-rtl-Mobile-Chrome-linux.png
index 47f4b4032f..e30467a81b 100644
Binary files a/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-md-rtl-Mobile-Firefox-linux.png b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-md-rtl-Mobile-Firefox-linux.png
index dc4cab330f..9e9f07f8f8 100644
Binary files a/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-md-rtl-Mobile-Safari-linux.png b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-md-rtl-Mobile-Safari-linux.png
index a93e89ec25..65058d8e86 100644
Binary files a/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-md-rtl-Mobile-Safari-linux.png and b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-height-inherit-md-ltr-Mobile-Chrome-linux.png b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-height-inherit-md-ltr-Mobile-Chrome-linux.png
index 501d2eeb14..fbe789fa9e 100644
Binary files a/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-height-inherit-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-height-inherit-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-height-inherit-md-ltr-Mobile-Firefox-linux.png b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-height-inherit-md-ltr-Mobile-Firefox-linux.png
index 8394553b5c..bccbdda0a4 100644
Binary files a/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-height-inherit-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-height-inherit-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-height-inherit-md-ltr-Mobile-Safari-linux.png b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-height-inherit-md-ltr-Mobile-Safari-linux.png
index 4e7953ff99..e22980fe88 100644
Binary files a/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-height-inherit-md-ltr-Mobile-Safari-linux.png and b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-height-inherit-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-ios-ltr-Mobile-Chrome-linux.png
index 55ca8d85d2..a37b76c40c 100644
Binary files a/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-ios-ltr-Mobile-Firefox-linux.png
index 5fd9425dd1..6c500e1658 100644
Binary files a/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-ios-ltr-Mobile-Safari-linux.png b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-ios-ltr-Mobile-Safari-linux.png
index 8f49d2913c..bfc8d86397 100644
Binary files a/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-ios-rtl-Mobile-Chrome-linux.png
index a0782c44d5..c07b20e2c7 100644
Binary files a/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-ios-rtl-Mobile-Firefox-linux.png
index 86130a86ca..f71b915f9e 100644
Binary files a/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-ios-rtl-Mobile-Safari-linux.png b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-ios-rtl-Mobile-Safari-linux.png
index b28c6030f4..6fef1d1b59 100644
Binary files a/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-md-ltr-Mobile-Chrome-linux.png b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-md-ltr-Mobile-Chrome-linux.png
index f9f9f13672..e40eef3811 100644
Binary files a/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-md-ltr-Mobile-Firefox-linux.png b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-md-ltr-Mobile-Firefox-linux.png
index ce1fafc9bc..c7816999c7 100644
Binary files a/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-md-ltr-Mobile-Safari-linux.png b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-md-ltr-Mobile-Safari-linux.png
index e6cc4b6abb..9fa0546c1d 100644
Binary files a/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-md-ltr-Mobile-Safari-linux.png and b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-md-rtl-Mobile-Chrome-linux.png b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-md-rtl-Mobile-Chrome-linux.png
index 41f4e42973..4c5ada2c80 100644
Binary files a/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-md-rtl-Mobile-Firefox-linux.png b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-md-rtl-Mobile-Firefox-linux.png
index 78b108f692..c51a63cfc7 100644
Binary files a/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-md-rtl-Mobile-Safari-linux.png b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-md-rtl-Mobile-Safari-linux.png
index 63fdae8044..69d0e45b36 100644
Binary files a/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-md-rtl-Mobile-Safari-linux.png and b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/segment/test/wrap/segment.e2e.ts b/core/src/components/segment/test/wrap/segment.e2e.ts
new file mode 100644
index 0000000000..a75594ed18
--- /dev/null
+++ b/core/src/components/segment/test/wrap/segment.e2e.ts
@@ -0,0 +1,103 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('segment: wrap'), () => {
+    test('should wrap long text', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-segment>
+          <ion-segment-button value="long">
+            <ion-label>This is the button that never ends it just goes on and on my friends</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="free">
+            <ion-label>Free</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="purchased">
+            <ion-label>Purchased</ion-label>
+          </ion-segment-button>
+        </ion-segment>
+      `,
+        config
+      );
+
+      const segment = page.locator('ion-segment');
+
+      await expect(segment).toHaveScreenshot(screenshot(`segment-wrap`));
+    });
+    test('should wrap long text with an icon', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-segment>
+          <ion-segment-button value="long">
+            <ion-icon name="heart-outline"></ion-icon>
+            <ion-label>This is the button that never ends it just goes on and on my friends</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="free">
+            <ion-icon name="star-outline"></ion-icon>
+            <ion-label>Free</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="purchased">
+            <ion-icon name="square-outline"></ion-icon>
+            <ion-label>Purchased</ion-label>
+          </ion-segment-button>
+        </ion-segment>
+      `,
+        config
+      );
+
+      const segment = page.locator('ion-segment');
+
+      await expect(segment).toHaveScreenshot(screenshot(`segment-wrap-icon`));
+    });
+    test('should wrap long text with a start icon', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-segment>
+          <ion-segment-button layout="icon-start" value="long">
+            <ion-icon name="heart-outline"></ion-icon>
+            <ion-label>This is the button that never ends it just goes on and on my friends</ion-label>
+          </ion-segment-button>
+          <ion-segment-button layout="icon-start" value="free">
+            <ion-icon name="star-outline"></ion-icon>
+            <ion-label>Free</ion-label>
+          </ion-segment-button>
+          <ion-segment-button layout="icon-start" value="purchased">
+            <ion-icon name="square-outline"></ion-icon>
+            <ion-label>Purchased</ion-label>
+          </ion-segment-button>
+        </ion-segment>
+      `,
+        config
+      );
+
+      const segment = page.locator('ion-segment');
+
+      await expect(segment).toHaveScreenshot(screenshot(`segment-wrap-icon-start`));
+    });
+    test('should wrap long text in a toolbar', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-toolbar>
+          <ion-segment>
+            <ion-segment-button value="long">
+              <ion-label>This is the button that never ends it just goes on and on my friends</ion-label>
+            </ion-segment-button>
+            <ion-segment-button value="free">
+              <ion-label>Free</ion-label>
+            </ion-segment-button>
+            <ion-segment-button value="purchased">
+              <ion-label>Purchased</ion-label>
+            </ion-segment-button>
+          </ion-segment>
+        </ion-toolbar>
+      `,
+        config
+      );
+
+      const toolbar = page.locator('ion-toolbar');
+
+      await expect(toolbar).toHaveScreenshot(screenshot(`segment-wrap-toolbar`));
+    });
+  });
+});
diff --git a/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-icon-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-icon-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..ea91640f9f
Binary files /dev/null and b/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-icon-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-icon-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-icon-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..152e91e0be
Binary files /dev/null and b/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-icon-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-icon-ios-ltr-Mobile-Safari-linux.png b/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-icon-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..dd4e01b525
Binary files /dev/null and b/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-icon-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-icon-md-ltr-Mobile-Chrome-linux.png b/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-icon-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..38a2e24278
Binary files /dev/null and b/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-icon-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-icon-md-ltr-Mobile-Firefox-linux.png b/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-icon-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..1d695e782d
Binary files /dev/null and b/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-icon-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-icon-md-ltr-Mobile-Safari-linux.png b/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-icon-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..1aac22e94e
Binary files /dev/null and b/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-icon-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-icon-start-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-icon-start-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..d1f0c0c7fe
Binary files /dev/null and b/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-icon-start-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-icon-start-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-icon-start-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..3e41a0e0e9
Binary files /dev/null and b/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-icon-start-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-icon-start-ios-ltr-Mobile-Safari-linux.png b/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-icon-start-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..ab18a144db
Binary files /dev/null and b/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-icon-start-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-icon-start-md-ltr-Mobile-Chrome-linux.png b/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-icon-start-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..cb2591e854
Binary files /dev/null and b/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-icon-start-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-icon-start-md-ltr-Mobile-Firefox-linux.png b/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-icon-start-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..62a7b2fd96
Binary files /dev/null and b/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-icon-start-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-icon-start-md-ltr-Mobile-Safari-linux.png b/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-icon-start-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..c405d42cc5
Binary files /dev/null and b/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-icon-start-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..784571f31f
Binary files /dev/null and b/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..56c28bb732
Binary files /dev/null and b/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-ios-ltr-Mobile-Safari-linux.png b/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..bf02bd3117
Binary files /dev/null and b/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-md-ltr-Mobile-Chrome-linux.png b/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..72e8d787ab
Binary files /dev/null and b/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-md-ltr-Mobile-Firefox-linux.png b/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..4225a5635a
Binary files /dev/null and b/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-md-ltr-Mobile-Safari-linux.png b/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..9db3c2ad70
Binary files /dev/null and b/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-toolbar-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-toolbar-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..3807445fb7
Binary files /dev/null and b/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-toolbar-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-toolbar-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-toolbar-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..bb783bee09
Binary files /dev/null and b/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-toolbar-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-toolbar-ios-ltr-Mobile-Safari-linux.png b/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-toolbar-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..a9e3dfe2ae
Binary files /dev/null and b/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-toolbar-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-toolbar-md-ltr-Mobile-Chrome-linux.png b/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-toolbar-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..37ea113a99
Binary files /dev/null and b/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-toolbar-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-toolbar-md-ltr-Mobile-Firefox-linux.png b/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-toolbar-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..dca445f8c4
Binary files /dev/null and b/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-toolbar-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-toolbar-md-ltr-Mobile-Safari-linux.png b/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-toolbar-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..409c7e280b
Binary files /dev/null and b/core/src/components/segment/test/wrap/segment.e2e.ts-snapshots/segment-wrap-toolbar-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select-popover/select-popover.tsx b/core/src/components/select-popover/select-popover.tsx
index 605269d407..a82597fe3b 100644
--- a/core/src/components/select-popover/select-popover.tsx
+++ b/core/src/components/select-popover/select-popover.tsx
@@ -1,9 +1,9 @@
 import type { ComponentInterface } from '@stencil/core';
 import { Element, Component, Host, Prop, h } from '@stencil/core';
+import { safeCall } from '@utils/overlays';
+import { getClassMap } from '@utils/theme';
 
 import { getIonMode } from '../../global/ionic-global';
-import { safeCall } from '../../utils/overlays';
-import { getClassMap } from '../../utils/theme';
 import type { CheckboxCustomEvent } from '../checkbox/checkbox-interface';
 import type { RadioGroupCustomEvent } from '../radio-group/radio-group-interface';
 
diff --git a/core/src/components/select/select.md.outline.scss b/core/src/components/select/select.md.outline.scss
index 9e7f5dcc13..8d199aa1be 100644
--- a/core/src/components/select/select.md.outline.scss
+++ b/core/src/components/select/select.md.outline.scss
@@ -196,16 +196,16 @@
   pointer-events: none;
 }
 
+:host(.select-fill-outline) .select-outline-start {
+  @include border(null, null, null, var(--border-width) var(--border-style) var(--border-color));
+}
+
 :host(.select-ltr.select-fill-outline) .select-outline-start {
-  // stylelint-disable-next-line property-disallowed-list
-  border-left: var(--border-width) var(--border-style) var(--border-color);
   // stylelint-disable-next-line property-disallowed-list
   border-radius: var(--border-radius) 0px 0px var(--border-radius);
 }
 
 :host(.select-rtl.select-fill-outline) .select-outline-start {
-  // stylelint-disable-next-line property-disallowed-list
-  border-right: var(--border-width) var(--border-style) var(--border-color);
   // stylelint-disable-next-line property-disallowed-list
   border-radius: 0px var(--border-radius) var(--border-radius) 0px;
 }
@@ -222,16 +222,16 @@
   width: calc(var(--padding-start) - #{$select-md-floating-label-padding});
 }
 
+:host(.select-fill-outline) .select-outline-end {
+  @include border(null, var(--border-width) var(--border-style) var(--border-color), null, null);
+}
+
 :host(.select-ltr.select-fill-outline) .select-outline-end {
-  // stylelint-disable-next-line property-disallowed-list
-  border-right: var(--border-width) var(--border-style) var(--border-color);
   // stylelint-disable-next-line property-disallowed-list
   border-radius: 0px var(--border-radius) var(--border-radius) 0px;
 }
 
 :host(.select-rtl.select-fill-outline) .select-outline-end {
-  // stylelint-disable-next-line property-disallowed-list
-  border-left: var(--border-width) var(--border-style) var(--border-color);
   // stylelint-disable-next-line property-disallowed-list
   border-radius: var(--border-radius) 0px 0px var(--border-radius);
 }
diff --git a/core/src/components/select/select.md.scss b/core/src/components/select/select.md.scss
index ffbd004520..fa7c621c40 100644
--- a/core/src/components/select/select.md.scss
+++ b/core/src/components/select/select.md.scss
@@ -94,7 +94,7 @@
  * when the select is activated.
  * This should only happen on MD.
  */
-:host(.select-expanded:not(.legacy-select)) .select-icon {
+:host(.select-expanded:not(.legacy-select):not(.has-expanded-icon)) .select-icon {
   @include transform(rotate(180deg));
 }
 
@@ -123,7 +123,7 @@
   @include transform(translate3d(0, -9px, 0));
 }
 
-:host-context(.item-has-focus) .select-icon {
+:host-context(.item-has-focus):host(:not(.has-expanded-icon)) .select-icon {
   @include transform(rotate(180deg));
 }
 
@@ -131,8 +131,8 @@
  * Ensure that the translation we did
  * above is preserved when we rotate the select icon.
  */
-:host-context(.item-has-focus.item-label-stacked) .select-icon,
-:host-context(.item-has-focus.item-label-floating:not(.item-fill-outline)) .select-icon {
+:host-context(.item-has-focus.item-label-stacked):host(:not(.has-expanded-icon)) .select-icon,
+:host-context(.item-has-focus.item-label-floating:not(.item-fill-outline)):host(:not(.has-expanded-icon)) .select-icon {
   @include transform(rotate(180deg), translate3d(0, -9px, 0));
 }
 
diff --git a/core/src/components/select/select.scss b/core/src/components/select/select.scss
index ca43b77a83..7823d04bd7 100644
--- a/core/src/components/select/select.scss
+++ b/core/src/components/select/select.scss
@@ -302,7 +302,8 @@ button {
  * works on block-level elements. A flex item is
  * considered blockified (https://www.w3.org/TR/css-display-3/#blockify).
  */
-.label-text {
+.label-text,
+::slotted([slot="label"]) {
   text-overflow: ellipsis;
 
   white-space: nowrap;
@@ -310,6 +311,16 @@ button {
   overflow: hidden;
 }
 
+/**
+ * If no label text is placed into the slot
+ * then the element should be hidden otherwise
+ * there will be additional margins added.
+ */
+.label-text-wrapper-hidden,
+.select-outline-notch-hidden {
+  display: none;
+}
+
 // Select Native Wrapper
 // ----------------------------------------------------------------
 
diff --git a/core/src/components/select/select.tsx b/core/src/components/select/select.tsx
index f55ddac853..639d8e22a3 100644
--- a/core/src/components/select/select.tsx
+++ b/core/src/components/select/select.tsx
@@ -1,5 +1,15 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Method, Prop, State, Watch, h, forceUpdate } from '@stencil/core';
+import type { LegacyFormController, NotchController } from '@utils/forms';
+import { createLegacyFormController, createNotchController } from '@utils/forms';
+import { findItemLabel, focusElement, getAriaLabel, renderHiddenInput, inheritAttributes } from '@utils/helpers';
+import type { Attributes } from '@utils/helpers';
+import { printIonWarning } from '@utils/logging';
+import { actionSheetController, alertController, popoverController } from '@utils/overlays';
+import type { OverlaySelect } from '@utils/overlays-interface';
+import { isRTL } from '@utils/rtl';
+import { createColorClasses, hostContext } from '@utils/theme';
+import { watchForOptions } from '@utils/watch-options';
 import { caretDownSharp, chevronExpand } from 'ionicons/icons';
 
 import { getIonMode } from '../../global/ionic-global';
@@ -11,16 +21,6 @@ import type {
   PopoverOptions,
   StyleEventDetail,
 } from '../../interface';
-import type { LegacyFormController } from '../../utils/forms';
-import { createLegacyFormController } from '../../utils/forms';
-import { findItemLabel, focusElement, getAriaLabel, renderHiddenInput, inheritAttributes } from '../../utils/helpers';
-import type { Attributes } from '../../utils/helpers';
-import { printIonWarning } from '../../utils/logging';
-import { actionSheetController, alertController, popoverController } from '../../utils/overlays';
-import type { OverlaySelect } from '../../utils/overlays-interface';
-import { isRTL } from '../../utils/rtl';
-import { createColorClasses, hostContext } from '../../utils/theme';
-import { watchForOptions } from '../../utils/watch-options';
 import type { ActionSheetButton } from '../action-sheet/action-sheet-interface';
 import type { AlertInput } from '../alert/alert-interface';
 import type { SelectPopoverOption } from '../select-popover/select-popover-interface';
@@ -32,9 +32,13 @@ import type { SelectChangeEventDetail, SelectInterface, SelectCompareFn } from '
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  *
+ * @slot label - The label text to associate with the select. Use the `labelPlacement` property to control where the label is placed relative to the select. Use this if you need to render a label with custom HTML.
+ *
  * @part placeholder - The text displayed in the select when there is no value.
  * @part text - The displayed value of the select.
  * @part icon - The select icon container.
+ * @part container - The container for the selected text or placeholder.
+ * @part label - The label text describing the select.
  */
 @Component({
   tag: 'ion-select',
@@ -52,6 +56,9 @@ export class Select implements ComponentInterface {
   private legacyFormController!: LegacyFormController;
   private inheritedAttributes: Attributes = {};
   private nativeWrapperEl: HTMLElement | undefined;
+  private notchSpacerEl: HTMLElement | undefined;
+
+  private notchController?: NotchController;
 
   // This flag ensures we log the deprecation warning at most once.
   private hasLoggedDeprecationWarning = false;
@@ -122,6 +129,10 @@ export class Select implements ComponentInterface {
 
   /**
    * The visible label associated with the select.
+   *
+   * Use this if you need to render a plaintext label.
+   *
+   * The `label` property will take priority over the `label` slot if both are used.
    */
   @Prop() label?: string;
 
@@ -172,6 +183,19 @@ export class Select implements ComponentInterface {
    */
   @Prop() selectedText?: string | null;
 
+  /**
+   * The toggle icon to use. Defaults to `chevronExpand` for `ios` mode,
+   * or `caretDownSharp` for `md` mode.
+   */
+  @Prop() toggleIcon?: string;
+
+  /**
+   * The toggle icon to show when the select is open. If defined, the icon
+   * rotation behavior in `md` mode will be disabled. If undefined, `toggleIcon`
+   * will be used for when the select is both open and closed.
+   */
+  @Prop() expandedIcon?: string;
+
   /**
    * The shape of the select. If "round" it will have an increased border radius.
    */
@@ -234,6 +258,11 @@ export class Select implements ComponentInterface {
     const { el } = this;
 
     this.legacyFormController = createLegacyFormController(el);
+    this.notchController = createNotchController(
+      el,
+      () => this.notchSpacerEl,
+      () => this.labelSlot
+    );
 
     this.updateOverlayOptions();
     this.emitStyle();
@@ -256,6 +285,11 @@ export class Select implements ComponentInterface {
       this.mutationO.disconnect();
       this.mutationO = undefined;
     }
+
+    if (this.notchController) {
+      this.notchController.destroy();
+      this.notchController = undefined;
+    }
   }
 
   /**
@@ -566,7 +600,7 @@ export class Select implements ComponentInterface {
      * TODO FW-3194
      * Remove legacyFormController logic.
      * Remove label and labelText vars
-     * Pass `this.label` instead of `labelText`
+     * Pass `this.labelText` instead of `labelText`
      * when setting the header.
      */
     let label: HTMLElement | null;
@@ -576,7 +610,7 @@ export class Select implements ComponentInterface {
       label = this.getLabel();
       labelText = label ? label.textContent : null;
     } else {
-      labelText = this.label;
+      labelText = this.labelText;
     }
 
     const interfaceOptions = this.interfaceOptions;
@@ -649,6 +683,30 @@ export class Select implements ComponentInterface {
     return Array.from(this.el.querySelectorAll('ion-select-option'));
   }
 
+  /**
+   * Returns any plaintext associated with
+   * the label (either prop or slot).
+   * Note: This will not return any custom
+   * HTML. Use the `hasLabel` getter if you
+   * want to know if any slotted label content
+   * was passed.
+   */
+  private get labelText() {
+    const { label } = this;
+
+    if (label !== undefined) {
+      return label;
+    }
+
+    const { labelSlot } = this;
+
+    if (labelSlot !== null) {
+      return labelSlot.textContent;
+    }
+
+    return;
+  }
+
   private getText(): string {
     const selectedText = this.selectedText;
     if (selectedText != null && selectedText !== '') {
@@ -696,17 +754,42 @@ export class Select implements ComponentInterface {
 
   private renderLabel() {
     const { label } = this;
-    if (label === undefined) {
-      return;
-    }
 
     return (
-      <div class="label-text-wrapper">
-        <div class="label-text">{this.label}</div>
+      <div
+        class={{
+          'label-text-wrapper': true,
+          'label-text-wrapper-hidden': !this.hasLabel,
+        }}
+        part="label"
+      >
+        {label === undefined ? <slot name="label"></slot> : <div class="label-text">{label}</div>}
       </div>
     );
   }
 
+  componentDidRender() {
+    this.notchController?.calculateNotchWidth();
+  }
+
+  /**
+   * Gets any content passed into the `label` slot,
+   * not the <slot> definition.
+   */
+  private get labelSlot() {
+    return this.el.querySelector('[slot="label"]');
+  }
+
+  /**
+   * Returns `true` if label content is provided
+   * either by a prop or a content. If you want
+   * to get the plaintext value of the label use
+   * the `labelText` getter instead.
+   */
+  private get hasLabel() {
+    return this.label !== undefined || this.labelSlot !== null;
+  }
+
   /**
    * Renders the border container
    * when fill="outline".
@@ -726,8 +809,13 @@ export class Select implements ComponentInterface {
       return [
         <div class="select-outline-container">
           <div class="select-outline-start"></div>
-          <div class="select-outline-notch">
-            <div class="notch-spacer" aria-hidden="true">
+          <div
+            class={{
+              'select-outline-notch': true,
+              'select-outline-notch-hidden': !this.hasLabel,
+            }}
+          >
+            <div class="notch-spacer" aria-hidden="true" ref={(el) => (this.notchSpacerEl = el)}>
               {this.label}
             </div>
           </div>
@@ -745,7 +833,8 @@ export class Select implements ComponentInterface {
   }
 
   private renderSelect() {
-    const { disabled, el, isExpanded, labelPlacement, justify, placeholder, fill, shape, name, value } = this;
+    const { disabled, el, isExpanded, expandedIcon, labelPlacement, justify, placeholder, fill, shape, name, value } =
+      this;
     const mode = getIonMode(this);
     const hasFloatingOrStackedLabel = labelPlacement === 'floating' || labelPlacement === 'stacked';
     const justifyEnabled = !hasFloatingOrStackedLabel;
@@ -764,6 +853,7 @@ export class Select implements ComponentInterface {
           'in-item-color': hostContext('ion-item.ion-color', el),
           'select-disabled': disabled,
           'select-expanded': isExpanded,
+          'has-expanded-icon': expandedIcon !== undefined,
           'has-value': this.hasValue(),
           'has-placeholder': placeholder !== undefined,
           'ion-focusable': true,
@@ -776,7 +866,7 @@ export class Select implements ComponentInterface {
       >
         <label class="select-wrapper" id="select-label">
           {this.renderLabelContainer()}
-          <div class="native-wrapper" ref={(el) => (this.nativeWrapperEl = el)}>
+          <div class="native-wrapper" ref={(el) => (this.nativeWrapperEl = el)} part="container">
             {this.renderSelectText()}
             {!hasFloatingOrStackedLabel && this.renderSelectIcon()}
             {this.renderListbox()}
@@ -818,7 +908,7 @@ Developers can use the "legacy" property to continue using the legacy form marku
       this.hasLoggedDeprecationWarning = true;
     }
 
-    const { disabled, el, inputId, isExpanded, name, placeholder, value } = this;
+    const { disabled, el, inputId, isExpanded, expandedIcon, name, placeholder, value } = this;
     const mode = getIonMode(this);
     const { labelText, labelId } = getAriaLabel(el, inputId);
 
@@ -851,6 +941,7 @@ Developers can use the "legacy" property to continue using the legacy form marku
           'in-item-color': hostContext('ion-item.ion-color', el),
           'select-disabled': disabled,
           'select-expanded': isExpanded,
+          'has-expanded-icon': expandedIcon !== undefined,
           'legacy-select': true,
         }}
       >
@@ -899,15 +990,24 @@ Developers can use the "legacy" property to continue using the legacy form marku
    */
   private renderSelectIcon() {
     const mode = getIonMode(this);
-    const icon = mode === 'ios' ? chevronExpand : caretDownSharp;
+    const { isExpanded, toggleIcon, expandedIcon } = this;
+    let icon: string;
+
+    if (isExpanded && expandedIcon !== undefined) {
+      icon = expandedIcon;
+    } else {
+      const defaultIcon = mode === 'ios' ? chevronExpand : caretDownSharp;
+      icon = toggleIcon ?? defaultIcon;
+    }
+
     return <ion-icon class="select-icon" part="icon" aria-hidden="true" icon={icon}></ion-icon>;
   }
 
   private get ariaLabel() {
-    const { placeholder, label, el, inputId, inheritedAttributes } = this;
+    const { placeholder, el, inputId, inheritedAttributes } = this;
     const displayValue = this.getText();
     const { labelText } = getAriaLabel(el, inputId);
-    const definedLabel = label ?? inheritedAttributes['aria-label'] ?? labelText;
+    const definedLabel = this.labelText ?? inheritedAttributes['aria-label'] ?? labelText;
 
     /**
      * If developer has specified a placeholder
diff --git a/core/src/components/select/test/a11y/index.html b/core/src/components/select/test/a11y/index.html
index fd7b9bd55f..cd85959388 100644
--- a/core/src/components/select/test/a11y/index.html
+++ b/core/src/components/select/test/a11y/index.html
@@ -15,6 +15,7 @@
     <main>
       <h1>Select - a11y</h1>
 
+      <ion-select> <div slot="label">Slotted Label</div> </ion-select><br />
       <ion-select label="My Visible Label"></ion-select><br />
       <ion-select aria-label="My Aria Label"></ion-select><br />
       <ion-select label="My Label" placeholder="Placeholder"></ion-select><br />
diff --git a/core/src/components/select/test/custom/select.e2e.ts b/core/src/components/select/test/custom/select.e2e.ts
index 6cf8161b69..5823236517 100644
--- a/core/src/components/select/test/custom/select.e2e.ts
+++ b/core/src/components/select/test/custom/select.e2e.ts
@@ -36,7 +36,41 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
       );
 
       const select = page.locator('ion-select');
-      await expect(select).toHaveScreenshot(screenshot(`select-custon-diff`));
+      await expect(select).toHaveScreenshot(screenshot(`select-custom-diff`));
+    });
+    test('should be able to customize select label, placeholder, and value using css parts', async ({ page }) => {
+      test.info().annotations.push({
+        type: 'issue',
+        description: 'https://github.com/ionic-team/ionic-framework/issues/27112',
+      });
+
+      await page.setContent(
+        `
+        <div class="wrapper">
+          <ion-select label="Select" label-placement="stacked" placeholder="Fruits">
+            <ion-select-option value="a">Apple</ion-select-option>
+          </ion-select>
+
+          <ion-select label="Select" label-placement="stacked" value="a">
+            <ion-select-option value="a">Apple</ion-select-option>
+          </ion-select>
+        </div>
+
+        <style>
+          ion-select::part(container) {
+            color: purple;
+          }
+
+          ion-select::part(label) {
+            color: green;
+          }
+        </style>
+      `,
+        config
+      );
+
+      const wrapper = page.locator('.wrapper');
+      await expect(wrapper).toHaveScreenshot(screenshot(`select-custom-parts-diff`));
     });
   });
 });
diff --git a/core/src/components/select/test/custom/select.e2e.ts-snapshots/select-custon-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/custom/select.e2e.ts-snapshots/select-custom-diff-ios-ltr-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/select/test/custom/select.e2e.ts-snapshots/select-custon-diff-ios-ltr-Mobile-Chrome-linux.png
rename to core/src/components/select/test/custom/select.e2e.ts-snapshots/select-custom-diff-ios-ltr-Mobile-Chrome-linux.png
diff --git a/core/src/components/select/test/custom/select.e2e.ts-snapshots/select-custon-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/custom/select.e2e.ts-snapshots/select-custom-diff-ios-ltr-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/select/test/custom/select.e2e.ts-snapshots/select-custon-diff-ios-ltr-Mobile-Firefox-linux.png
rename to core/src/components/select/test/custom/select.e2e.ts-snapshots/select-custom-diff-ios-ltr-Mobile-Firefox-linux.png
diff --git a/core/src/components/select/test/custom/select.e2e.ts-snapshots/select-custon-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/custom/select.e2e.ts-snapshots/select-custom-diff-ios-ltr-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/select/test/custom/select.e2e.ts-snapshots/select-custon-diff-ios-ltr-Mobile-Safari-linux.png
rename to core/src/components/select/test/custom/select.e2e.ts-snapshots/select-custom-diff-ios-ltr-Mobile-Safari-linux.png
diff --git a/core/src/components/select/test/custom/select.e2e.ts-snapshots/select-custon-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/custom/select.e2e.ts-snapshots/select-custom-diff-md-ltr-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/select/test/custom/select.e2e.ts-snapshots/select-custon-diff-md-ltr-Mobile-Chrome-linux.png
rename to core/src/components/select/test/custom/select.e2e.ts-snapshots/select-custom-diff-md-ltr-Mobile-Chrome-linux.png
diff --git a/core/src/components/select/test/custom/select.e2e.ts-snapshots/select-custon-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/custom/select.e2e.ts-snapshots/select-custom-diff-md-ltr-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/select/test/custom/select.e2e.ts-snapshots/select-custon-diff-md-ltr-Mobile-Firefox-linux.png
rename to core/src/components/select/test/custom/select.e2e.ts-snapshots/select-custom-diff-md-ltr-Mobile-Firefox-linux.png
diff --git a/core/src/components/select/test/custom/select.e2e.ts-snapshots/select-custon-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/custom/select.e2e.ts-snapshots/select-custom-diff-md-ltr-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/select/test/custom/select.e2e.ts-snapshots/select-custon-diff-md-ltr-Mobile-Safari-linux.png
rename to core/src/components/select/test/custom/select.e2e.ts-snapshots/select-custom-diff-md-ltr-Mobile-Safari-linux.png
diff --git a/core/src/components/select/test/custom/select.e2e.ts-snapshots/select-custom-parts-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/custom/select.e2e.ts-snapshots/select-custom-parts-diff-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..0bb0150c8b
Binary files /dev/null and b/core/src/components/select/test/custom/select.e2e.ts-snapshots/select-custom-parts-diff-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/custom/select.e2e.ts-snapshots/select-custom-parts-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/custom/select.e2e.ts-snapshots/select-custom-parts-diff-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..4541a49225
Binary files /dev/null and b/core/src/components/select/test/custom/select.e2e.ts-snapshots/select-custom-parts-diff-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/custom/select.e2e.ts-snapshots/select-custom-parts-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/custom/select.e2e.ts-snapshots/select-custom-parts-diff-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..0b99379580
Binary files /dev/null and b/core/src/components/select/test/custom/select.e2e.ts-snapshots/select-custom-parts-diff-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/custom/select.e2e.ts-snapshots/select-custom-parts-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/custom/select.e2e.ts-snapshots/select-custom-parts-diff-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..a9c2bcfe3e
Binary files /dev/null and b/core/src/components/select/test/custom/select.e2e.ts-snapshots/select-custom-parts-diff-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/custom/select.e2e.ts-snapshots/select-custom-parts-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/custom/select.e2e.ts-snapshots/select-custom-parts-diff-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..58209b382e
Binary files /dev/null and b/core/src/components/select/test/custom/select.e2e.ts-snapshots/select-custom-parts-diff-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/custom/select.e2e.ts-snapshots/select-custom-parts-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/custom/select.e2e.ts-snapshots/select-custom-parts-diff-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..5220e6fe86
Binary files /dev/null and b/core/src/components/select/test/custom/select.e2e.ts-snapshots/select-custom-parts-diff-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/fill/select.e2e.ts b/core/src/components/select/test/fill/select.e2e.ts
index 767191fbdf..971c4ea798 100644
--- a/core/src/components/select/test/fill/select.e2e.ts
+++ b/core/src/components/select/test/fill/select.e2e.ts
@@ -120,6 +120,7 @@ configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => {
         const select = page.locator('ion-select');
         expect(await select.screenshot()).toMatchSnapshot(screenshot(`select-fill-outline-label-floating`));
       });
+
       test('should not have visual regressions with shaped outline', async ({ page }) => {
         await page.setContent(
           `
@@ -167,3 +168,73 @@ configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => {
     });
   });
 });
+
+configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('select: label slot'), () => {
+    test('should render the notch correctly with a slotted label', async ({ page }) => {
+      await page.setContent(
+        `
+        <style>
+          .custom-label {
+            font-size: 30px;
+          }
+        </style>
+        <ion-select
+          fill="outline"
+          label-placement="stacked"
+          value="apple"
+        >
+          <div slot="label" class="custom-label">My Label Content</div>
+          <ion-select-option value="apple">Apple</ion-select-option>
+        </ion-select>
+      `,
+        config
+      );
+
+      const select = page.locator('ion-select');
+      expect(await select.screenshot()).toMatchSnapshot(screenshot(`select-fill-outline-slotted-label`));
+    });
+    test('should render the notch correctly with a slotted label after the select was originally hidden', async ({
+      page,
+    }) => {
+      await page.setContent(
+        `
+        <style>
+          .custom-label {
+            font-size: 30px;
+          }
+        </style>
+        <ion-select
+          fill="outline"
+          label-placement="stacked"
+          value="apple"
+          style="display: none"
+        >
+          <div slot="label" class="custom-label">My Label Content</div>
+          <ion-select-option value="apple">Apple</ion-select-option>
+        </ion-select>
+      `,
+        config
+      );
+
+      const select = page.locator('ion-select');
+
+      await select.evaluate((el: HTMLIonSelectElement) => el.style.removeProperty('display'));
+
+      expect(await select.screenshot()).toMatchSnapshot(screenshot(`select-fill-outline-hidden-slotted-label`));
+    });
+  });
+  test.describe(title('select: notch cutout'), () => {
+    test('notch cutout should be hidden when no label is passed', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-select fill="outline" label-placement="stacked" aria-label="my select"></ion-select>
+      `,
+        config
+      );
+
+      const notchCutout = page.locator('ion-select .select-outline-notch');
+      await expect(notchCutout).toBeHidden();
+    });
+  });
+});
diff --git a/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-outline-hidden-slotted-label-md-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-outline-hidden-slotted-label-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..e189c85fe0
Binary files /dev/null and b/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-outline-hidden-slotted-label-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-outline-hidden-slotted-label-md-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-outline-hidden-slotted-label-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..79d572bee4
Binary files /dev/null and b/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-outline-hidden-slotted-label-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-outline-hidden-slotted-label-md-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-outline-hidden-slotted-label-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..0344c584fe
Binary files /dev/null and b/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-outline-hidden-slotted-label-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-outline-slotted-label-md-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-outline-slotted-label-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..e189c85fe0
Binary files /dev/null and b/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-outline-slotted-label-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-outline-slotted-label-md-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-outline-slotted-label-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..79d572bee4
Binary files /dev/null and b/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-outline-slotted-label-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-outline-slotted-label-md-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-outline-slotted-label-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..0344c584fe
Binary files /dev/null and b/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-outline-slotted-label-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts b/core/src/components/select/test/label/select.e2e.ts
index 1989ffab30..f9c0c570f0 100644
--- a/core/src/components/select/test/label/select.e2e.ts
+++ b/core/src/components/select/test/label/select.e2e.ts
@@ -267,7 +267,7 @@ configs().forEach(({ title, screenshot, config }) => {
 
 configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
   test.describe(title('select: label overflow'), () => {
-    test('label should be truncated with ellipses', async ({ page }) => {
+    test('label property should be truncated with ellipses', async ({ page }) => {
       await page.setContent(
         `
             <ion-select label="Label Label Label Label Label" placeholder="Select an Item"></ion-select>
@@ -278,11 +278,24 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
       const select = page.locator('ion-select');
       expect(await select.screenshot()).toMatchSnapshot(screenshot(`select-label-truncate`));
     });
+    test('label slot should be truncated with ellipses', async ({ page }) => {
+      await page.setContent(
+        `
+            <ion-select placeholder="Select an Item">
+              <div slot="label">Label Label Label Label Label</div>
+            </ion-select>
+          `,
+        config
+      );
+
+      const select = page.locator('ion-select');
+      expect(await select.screenshot()).toMatchSnapshot(screenshot(`select-label-slot-truncate`));
+    });
   });
 });
 configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
   test.describe(title('select: alert label'), () => {
-    test('should use the label to set the default header in an alert', async ({ page }) => {
+    test('should use the label prop to set the default header in an alert', async ({ page }) => {
       await page.setContent(
         `
          <ion-select label="My Alert" interface="alert">
@@ -301,5 +314,47 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
 
       await expect(alert.locator('.alert-title')).toHaveText('My Alert');
     });
+    test('should use the label slot to set the default header in an alert', async ({ page }) => {
+      await page.setContent(
+        `
+         <ion-select interface="alert">
+            <div slot="label">My Alert</div>
+           <ion-select-option value="a">A</ion-select-option>
+         </ion-select>
+       `,
+        config
+      );
+
+      const select = page.locator('ion-select');
+      const alert = page.locator('ion-alert');
+      const ionAlertDidPresent = await page.spyOnEvent('ionAlertDidPresent');
+
+      await select.click();
+      await ionAlertDidPresent.next();
+
+      await expect(alert.locator('.alert-title')).toHaveText('My Alert');
+    });
+    test('should use the label prop to set the default header in an alert if both prop and slot are set', async ({
+      page,
+    }) => {
+      await page.setContent(
+        `
+         <ion-select label="My Prop Alert" interface="alert">
+            <div slot="label">My Slot Alert</div>
+           <ion-select-option value="a">A</ion-select-option>
+         </ion-select>
+       `,
+        config
+      );
+
+      const select = page.locator('ion-select');
+      const alert = page.locator('ion-alert');
+      const ionAlertDidPresent = await page.spyOnEvent('ionAlertDidPresent');
+
+      await select.click();
+      await ionAlertDidPresent.next();
+
+      await expect(alert.locator('.alert-title')).toHaveText('My Prop Alert');
+    });
   });
 });
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-slot-truncate-md-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-slot-truncate-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..5acafac7d0
Binary files /dev/null and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-slot-truncate-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-slot-truncate-md-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-slot-truncate-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..6d9f6a7c90
Binary files /dev/null and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-slot-truncate-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-slot-truncate-md-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-slot-truncate-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..60b208fee5
Binary files /dev/null and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-slot-truncate-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/select.spec.tsx b/core/src/components/select/test/select.spec.tsx
index 3d4620571a..aa6436f338 100644
--- a/core/src/components/select/test/select.spec.tsx
+++ b/core/src/components/select/test/select.spec.tsx
@@ -19,4 +19,53 @@ describe('ion-select', () => {
     expect(hiddenInput.disabled).toBe(true);
     expect(hiddenInput.name).toBe('my name');
   });
+
+  it('should render label prop if only prop provided', async () => {
+    const page = await newSpecPage({
+      components: [Select],
+      html: `
+        <ion-select label="Label Prop Text"></ion-select>
+      `,
+    });
+
+    const select = page.body.querySelector('ion-select');
+
+    const propEl = select.shadowRoot.querySelector('.label-text');
+    const slotEl = select.shadowRoot.querySelector('slot[name="label"]');
+
+    expect(propEl).not.toBe(null);
+    expect(slotEl).toBe(null);
+  });
+  it('should render label slot if only slot provided', async () => {
+    const page = await newSpecPage({
+      components: [Select],
+      html: `
+        <ion-select><div slot="label">Label Prop Slot</div></ion-select>
+      `,
+    });
+
+    const select = page.body.querySelector('ion-select');
+
+    const propEl = select.shadowRoot.querySelector('.label-text');
+    const slotEl = select.shadowRoot.querySelector('slot[name="label"]');
+
+    expect(propEl).toBe(null);
+    expect(slotEl).not.toBe(null);
+  });
+  it('should render label prop if both prop and slot provided', async () => {
+    const page = await newSpecPage({
+      components: [Select],
+      html: `
+        <ion-select label="Label Prop Text"><div slot="label">Label Prop Slot</div></ion-select>
+      `,
+    });
+
+    const select = page.body.querySelector('ion-select');
+
+    const propEl = select.shadowRoot.querySelector('.label-text');
+    const slotEl = select.shadowRoot.querySelector('slot[name="label"]');
+
+    expect(propEl).not.toBe(null);
+    expect(slotEl).toBe(null);
+  });
 });
diff --git a/core/src/components/select/test/toggle-icon/index.html b/core/src/components/select/test/toggle-icon/index.html
new file mode 100644
index 0000000000..1c144416bb
--- /dev/null
+++ b/core/src/components/select/test/toggle-icon/index.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Select - toggleIcon</title>
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
+    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
+    <script src="../../../../../scripts/testing/scripts.js"></script>
+    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
+    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Select - toggleIcon</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content class="test-content">
+        <ion-list>
+          <ion-item>
+            <ion-select label="toggleIcon" toggle-icon="arrow-down" placeholder="Select one" interface="popover">
+              <ion-select-option value="apples">Apples</ion-select-option>
+              <ion-select-option value="oranges">Oranges</ion-select-option>
+              <ion-select-option value="pears">Pears</ion-select-option>
+            </ion-select>
+          </ion-item>
+          <ion-item>
+            <ion-select label="expandedIcon" expanded-icon="arrow-up" placeholder="Select one" interface="popover">
+              <ion-select-option value="apples">Apples</ion-select-option>
+              <ion-select-option value="oranges">Oranges</ion-select-option>
+              <ion-select-option value="pears">Pears</ion-select-option>
+            </ion-select>
+          </ion-item>
+          <ion-item>
+            <ion-select
+              label="Both"
+              toggle-icon="arrow-down"
+              expanded-icon="pizza"
+              placeholder="Select one"
+              interface="popover"
+            >
+              <ion-select-option value="apples">Apples</ion-select-option>
+              <ion-select-option value="oranges">Oranges</ion-select-option>
+              <ion-select-option value="pears">Pears</ion-select-option>
+            </ion-select>
+          </ion-item>
+        </ion-list>
+      </ion-content>
+    </ion-app>
+  </body>
+</html>
diff --git a/core/src/components/select/test/toggle-icon/select.e2e.ts b/core/src/components/select/test/toggle-icon/select.e2e.ts
new file mode 100644
index 0000000000..c956429358
--- /dev/null
+++ b/core/src/components/select/test/toggle-icon/select.e2e.ts
@@ -0,0 +1,39 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+configs({ directions: ['ltr'], modes: ['md'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('select: toggleIcon'), () => {
+    test('should render a custom toggleIcon', async ({ page }) => {
+      await page.setContent(
+        `
+          <ion-select toggle-icon="pizza" label="Select" value="a">
+            <ion-select-option value="a">Apple</ion-select-option>
+          </ion-select>
+        `,
+        config
+      );
+
+      const select = page.locator('ion-select');
+      await expect(select).toHaveScreenshot(screenshot(`select-toggle-icon`));
+    });
+
+    test('should render a custom expandedIcon', async ({ page }) => {
+      await page.setContent(
+        `
+          <ion-select expanded-icon="pizza" interface="popover" label="Select" value="a">
+            <ion-select-option value="a">Apple</ion-select-option>
+          </ion-select>
+        `,
+        config
+      );
+
+      const select = page.locator('ion-select');
+      const popoverDidPresent = await page.spyOnEvent('ionPopoverDidPresent');
+
+      await select.click();
+      await popoverDidPresent.next();
+
+      await expect(select).toHaveScreenshot(screenshot(`select-expanded-icon`));
+    });
+  });
+});
diff --git a/core/src/components/select/test/toggle-icon/select.e2e.ts-snapshots/select-expanded-icon-md-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/toggle-icon/select.e2e.ts-snapshots/select-expanded-icon-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..beb10c2593
Binary files /dev/null and b/core/src/components/select/test/toggle-icon/select.e2e.ts-snapshots/select-expanded-icon-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/toggle-icon/select.e2e.ts-snapshots/select-expanded-icon-md-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/toggle-icon/select.e2e.ts-snapshots/select-expanded-icon-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..fb9550dbb3
Binary files /dev/null and b/core/src/components/select/test/toggle-icon/select.e2e.ts-snapshots/select-expanded-icon-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/toggle-icon/select.e2e.ts-snapshots/select-expanded-icon-md-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/toggle-icon/select.e2e.ts-snapshots/select-expanded-icon-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..e3592b3ddf
Binary files /dev/null and b/core/src/components/select/test/toggle-icon/select.e2e.ts-snapshots/select-expanded-icon-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/toggle-icon/select.e2e.ts-snapshots/select-toggle-icon-md-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/toggle-icon/select.e2e.ts-snapshots/select-toggle-icon-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..78512cad71
Binary files /dev/null and b/core/src/components/select/test/toggle-icon/select.e2e.ts-snapshots/select-toggle-icon-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/toggle-icon/select.e2e.ts-snapshots/select-toggle-icon-md-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/toggle-icon/select.e2e.ts-snapshots/select-toggle-icon-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..95155e5a6d
Binary files /dev/null and b/core/src/components/select/test/toggle-icon/select.e2e.ts-snapshots/select-toggle-icon-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/toggle-icon/select.e2e.ts-snapshots/select-toggle-icon-md-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/toggle-icon/select.e2e.ts-snapshots/select-toggle-icon-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..f80cd24d98
Binary files /dev/null and b/core/src/components/select/test/toggle-icon/select.e2e.ts-snapshots/select-toggle-icon-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/skeleton-text/skeleton-text.tsx b/core/src/components/skeleton-text/skeleton-text.tsx
index 8ca8098232..4ca8718db8 100644
--- a/core/src/components/skeleton-text/skeleton-text.tsx
+++ b/core/src/components/skeleton-text/skeleton-text.tsx
@@ -1,9 +1,9 @@
 import type { ComponentInterface } from '@stencil/core';
 import { Component, Element, Host, Prop, h } from '@stencil/core';
+import { hostContext } from '@utils/theme';
 
 import { config } from '../../global/config';
 import { getIonMode } from '../../global/ionic-global';
-import { hostContext } from '../../utils/theme';
 
 @Component({
   tag: 'ion-skeleton-text',
diff --git a/core/src/components/spinner/spinner.tsx b/core/src/components/spinner/spinner.tsx
index 7c01664c7b..d937f4fb0a 100644
--- a/core/src/components/spinner/spinner.tsx
+++ b/core/src/components/spinner/spinner.tsx
@@ -1,10 +1,10 @@
 import type { ComponentInterface } from '@stencil/core';
 import { Component, Host, Prop, h } from '@stencil/core';
+import { createColorClasses } from '@utils/theme';
 
 import { config } from '../../global/config';
 import { getIonMode } from '../../global/ionic-global';
 import type { Color } from '../../interface';
-import { createColorClasses } from '../../utils/theme';
 
 import type { SpinnerTypes } from './spinner-configs';
 import { SPINNERS } from './spinner-configs';
diff --git a/core/src/components/tab-bar/tab-bar.tsx b/core/src/components/tab-bar/tab-bar.tsx
index b0a976e08a..0589b773ad 100644
--- a/core/src/components/tab-bar/tab-bar.tsx
+++ b/core/src/components/tab-bar/tab-bar.tsx
@@ -1,11 +1,11 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Prop, State, Watch, h } from '@stencil/core';
+import type { KeyboardController } from '@utils/keyboard/keyboard-controller';
+import { createKeyboardController } from '@utils/keyboard/keyboard-controller';
+import { createColorClasses } from '@utils/theme';
 
 import { getIonMode } from '../../global/ionic-global';
 import type { Color } from '../../interface';
-import type { KeyboardController } from '../../utils/keyboard/keyboard-controller';
-import { createKeyboardController } from '../../utils/keyboard/keyboard-controller';
-import { createColorClasses } from '../../utils/theme';
 
 import type { TabBarChangedEventDetail } from './tab-bar-interface';
 
diff --git a/core/src/components/tab-button/tab-button.tsx b/core/src/components/tab-button/tab-button.tsx
index 08d299f647..7babc4573b 100644
--- a/core/src/components/tab-button/tab-button.tsx
+++ b/core/src/components/tab-button/tab-button.tsx
@@ -1,11 +1,11 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Listen, Prop, h } from '@stencil/core';
+import type { AnchorInterface } from '@utils/element-interface';
+import type { Attributes } from '@utils/helpers';
+import { inheritAttributes } from '@utils/helpers';
 
 import { config } from '../../global/config';
 import { getIonMode } from '../../global/ionic-global';
-import type { AnchorInterface } from '../../utils/element-interface';
-import type { Attributes } from '../../utils/helpers';
-import { inheritAttributes } from '../../utils/helpers';
 import type {
   TabBarChangedEventDetail,
   TabButtonClickEventDetail,
diff --git a/core/src/components/tab-button/test/states/tab-button.e2e.ts b/core/src/components/tab-button/test/states/tab-button.e2e.ts
new file mode 100644
index 0000000000..bd10cad844
--- /dev/null
+++ b/core/src/components/tab-button/test/states/tab-button.e2e.ts
@@ -0,0 +1,82 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('tab-button: states with no translucency'), () => {
+    test.describe('focus', () => {
+      test('should render correct focus state with default theme and no translucency', async ({ page }) => {
+        await page.setContent(
+          `
+          <ion-tab-bar style="width: 300px">
+            <ion-tab-button href="#" class="ion-focused">
+              <ion-label>Favorites</ion-label>
+            </ion-tab-button>
+          </ion-tab-bar>
+        `,
+          config
+        );
+
+        const tabBar = page.locator('ion-tab-bar');
+        await expect(tabBar).toHaveScreenshot(screenshot('tab-button-focus-no-translucency'));
+      });
+
+      test('should render correct focus state with custom theme and no translucency', async ({ page }) => {
+        await page.setContent(
+          `
+          <ion-tab-bar style="width: 300px" color="success">
+            <ion-tab-button href="#" class="ion-focused">
+              <ion-label>Favorites</ion-label>
+            </ion-tab-button>
+          </ion-tab-bar>
+        `,
+          config
+        );
+
+        const tabBar = page.locator('ion-tab-bar');
+        await expect(tabBar).toHaveScreenshot(screenshot('tab-button-focus-color-no-translucency'));
+      });
+    });
+  });
+});
+
+configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('tab-button: states with translucency'), () => {
+    test.describe('focus', () => {
+      test('should render correct focus state with default theme and translucency', async ({ page }) => {
+        await page.setContent(
+          `
+          <ion-content color="dark">
+            <ion-tab-bar style="width: 300px" translucent="true">
+              <ion-tab-button href="#" class="ion-focused">
+                <ion-label>Favorites</ion-label>
+              </ion-tab-button>
+            </ion-tab-bar>
+          </ion-content>
+        `,
+          config
+        );
+
+        const tabBar = page.locator('ion-tab-bar');
+        await expect(tabBar).toHaveScreenshot(screenshot('tab-button-focus-translucency'));
+      });
+
+      test('should render correct focus state with custom theme and translucency', async ({ page }) => {
+        await page.setContent(
+          `
+          <ion-content color="dark">
+            <ion-tab-bar style="width: 300px" color="success" translucent="true">
+              <ion-tab-button href="#" class="ion-focused">
+                <ion-label>Favorites</ion-label>
+              </ion-tab-button>
+            </ion-tab-bar>
+          </ion-content>
+        `,
+          config
+        );
+
+        const tabBar = page.locator('ion-tab-bar');
+        await expect(tabBar).toHaveScreenshot(screenshot('tab-button-focus-color-translucency'));
+      });
+    });
+  });
+});
diff --git a/core/src/components/tab-button/test/states/tab-button.e2e.ts-snapshots/tab-button-focus-color-no-translucency-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/tab-button/test/states/tab-button.e2e.ts-snapshots/tab-button-focus-color-no-translucency-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..4cc7cb8f9d
Binary files /dev/null and b/core/src/components/tab-button/test/states/tab-button.e2e.ts-snapshots/tab-button-focus-color-no-translucency-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/tab-button/test/states/tab-button.e2e.ts-snapshots/tab-button-focus-color-no-translucency-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/tab-button/test/states/tab-button.e2e.ts-snapshots/tab-button-focus-color-no-translucency-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..1e87f27ad0
Binary files /dev/null and b/core/src/components/tab-button/test/states/tab-button.e2e.ts-snapshots/tab-button-focus-color-no-translucency-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/tab-button/test/states/tab-button.e2e.ts-snapshots/tab-button-focus-color-no-translucency-ios-ltr-Mobile-Safari-linux.png b/core/src/components/tab-button/test/states/tab-button.e2e.ts-snapshots/tab-button-focus-color-no-translucency-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..25135ac9f8
Binary files /dev/null and b/core/src/components/tab-button/test/states/tab-button.e2e.ts-snapshots/tab-button-focus-color-no-translucency-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/tab-button/test/states/tab-button.e2e.ts-snapshots/tab-button-focus-color-no-translucency-md-ltr-Mobile-Chrome-linux.png b/core/src/components/tab-button/test/states/tab-button.e2e.ts-snapshots/tab-button-focus-color-no-translucency-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..0fcb18160a
Binary files /dev/null and b/core/src/components/tab-button/test/states/tab-button.e2e.ts-snapshots/tab-button-focus-color-no-translucency-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/tab-button/test/states/tab-button.e2e.ts-snapshots/tab-button-focus-color-no-translucency-md-ltr-Mobile-Firefox-linux.png b/core/src/components/tab-button/test/states/tab-button.e2e.ts-snapshots/tab-button-focus-color-no-translucency-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..aeea018600
Binary files /dev/null and b/core/src/components/tab-button/test/states/tab-button.e2e.ts-snapshots/tab-button-focus-color-no-translucency-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/tab-button/test/states/tab-button.e2e.ts-snapshots/tab-button-focus-color-no-translucency-md-ltr-Mobile-Safari-linux.png b/core/src/components/tab-button/test/states/tab-button.e2e.ts-snapshots/tab-button-focus-color-no-translucency-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..2c7955d6e2
Binary files /dev/null and b/core/src/components/tab-button/test/states/tab-button.e2e.ts-snapshots/tab-button-focus-color-no-translucency-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/tab-button/test/states/tab-button.e2e.ts-snapshots/tab-button-focus-color-translucency-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/tab-button/test/states/tab-button.e2e.ts-snapshots/tab-button-focus-color-translucency-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..5d02508dae
Binary files /dev/null and b/core/src/components/tab-button/test/states/tab-button.e2e.ts-snapshots/tab-button-focus-color-translucency-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/tab-button/test/states/tab-button.e2e.ts-snapshots/tab-button-focus-color-translucency-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/tab-button/test/states/tab-button.e2e.ts-snapshots/tab-button-focus-color-translucency-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..37b7de053e
Binary files /dev/null and b/core/src/components/tab-button/test/states/tab-button.e2e.ts-snapshots/tab-button-focus-color-translucency-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/tab-button/test/states/tab-button.e2e.ts-snapshots/tab-button-focus-color-translucency-ios-ltr-Mobile-Safari-linux.png b/core/src/components/tab-button/test/states/tab-button.e2e.ts-snapshots/tab-button-focus-color-translucency-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..3cfa4061a5
Binary files /dev/null and b/core/src/components/tab-button/test/states/tab-button.e2e.ts-snapshots/tab-button-focus-color-translucency-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/tab-button/test/states/tab-button.e2e.ts-snapshots/tab-button-focus-no-translucency-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/tab-button/test/states/tab-button.e2e.ts-snapshots/tab-button-focus-no-translucency-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..f4e9118f06
Binary files /dev/null and b/core/src/components/tab-button/test/states/tab-button.e2e.ts-snapshots/tab-button-focus-no-translucency-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/tab-button/test/states/tab-button.e2e.ts-snapshots/tab-button-focus-no-translucency-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/tab-button/test/states/tab-button.e2e.ts-snapshots/tab-button-focus-no-translucency-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..6fc34f8b91
Binary files /dev/null and b/core/src/components/tab-button/test/states/tab-button.e2e.ts-snapshots/tab-button-focus-no-translucency-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/tab-button/test/states/tab-button.e2e.ts-snapshots/tab-button-focus-no-translucency-ios-ltr-Mobile-Safari-linux.png b/core/src/components/tab-button/test/states/tab-button.e2e.ts-snapshots/tab-button-focus-no-translucency-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..03171f3c27
Binary files /dev/null and b/core/src/components/tab-button/test/states/tab-button.e2e.ts-snapshots/tab-button-focus-no-translucency-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/tab-button/test/states/tab-button.e2e.ts-snapshots/tab-button-focus-no-translucency-md-ltr-Mobile-Chrome-linux.png b/core/src/components/tab-button/test/states/tab-button.e2e.ts-snapshots/tab-button-focus-no-translucency-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..f6a53b5fca
Binary files /dev/null and b/core/src/components/tab-button/test/states/tab-button.e2e.ts-snapshots/tab-button-focus-no-translucency-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/tab-button/test/states/tab-button.e2e.ts-snapshots/tab-button-focus-no-translucency-md-ltr-Mobile-Firefox-linux.png b/core/src/components/tab-button/test/states/tab-button.e2e.ts-snapshots/tab-button-focus-no-translucency-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..8076024c28
Binary files /dev/null and b/core/src/components/tab-button/test/states/tab-button.e2e.ts-snapshots/tab-button-focus-no-translucency-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/tab-button/test/states/tab-button.e2e.ts-snapshots/tab-button-focus-no-translucency-md-ltr-Mobile-Safari-linux.png b/core/src/components/tab-button/test/states/tab-button.e2e.ts-snapshots/tab-button-focus-no-translucency-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..9db6a14cd9
Binary files /dev/null and b/core/src/components/tab-button/test/states/tab-button.e2e.ts-snapshots/tab-button-focus-no-translucency-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/tab-button/test/states/tab-button.e2e.ts-snapshots/tab-button-focus-translucency-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/tab-button/test/states/tab-button.e2e.ts-snapshots/tab-button-focus-translucency-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..99840ca7b4
Binary files /dev/null and b/core/src/components/tab-button/test/states/tab-button.e2e.ts-snapshots/tab-button-focus-translucency-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/tab-button/test/states/tab-button.e2e.ts-snapshots/tab-button-focus-translucency-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/tab-button/test/states/tab-button.e2e.ts-snapshots/tab-button-focus-translucency-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..d565c66cbc
Binary files /dev/null and b/core/src/components/tab-button/test/states/tab-button.e2e.ts-snapshots/tab-button-focus-translucency-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/tab-button/test/states/tab-button.e2e.ts-snapshots/tab-button-focus-translucency-ios-ltr-Mobile-Safari-linux.png b/core/src/components/tab-button/test/states/tab-button.e2e.ts-snapshots/tab-button-focus-translucency-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..c884751323
Binary files /dev/null and b/core/src/components/tab-button/test/states/tab-button.e2e.ts-snapshots/tab-button-focus-translucency-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/tab/tab.tsx b/core/src/components/tab/tab.tsx
index a3f7ceca41..ce507867fd 100644
--- a/core/src/components/tab/tab.tsx
+++ b/core/src/components/tab/tab.tsx
@@ -1,8 +1,8 @@
 import type { ComponentInterface } from '@stencil/core';
 import { Build, Component, Element, Host, Method, Prop, Watch, h } from '@stencil/core';
+import { attachComponent } from '@utils/framework-delegate';
 
 import type { ComponentRef, FrameworkDelegate } from '../../interface';
-import { attachComponent } from '../../utils/framework-delegate';
 
 @Component({
   tag: 'ion-tab',
diff --git a/core/src/components/text/text.tsx b/core/src/components/text/text.tsx
index 25da475a78..14f11a00cc 100644
--- a/core/src/components/text/text.tsx
+++ b/core/src/components/text/text.tsx
@@ -1,9 +1,9 @@
 import type { ComponentInterface } from '@stencil/core';
 import { Component, Host, Prop, h } from '@stencil/core';
+import { createColorClasses } from '@utils/theme';
 
 import { getIonMode } from '../../global/ionic-global';
 import type { Color } from '../../interface';
-import { createColorClasses } from '../../utils/theme';
 
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
diff --git a/core/src/components/textarea/test/a11y/index.html b/core/src/components/textarea/test/a11y/index.html
index 08c3feebf2..f210a9e08c 100644
--- a/core/src/components/textarea/test/a11y/index.html
+++ b/core/src/components/textarea/test/a11y/index.html
@@ -15,6 +15,7 @@
     <main>
       <h1>Textarea - a11y</h1>
 
+      <ion-textarea><div slot="label">Slotted Label</div></ion-textarea><br />
       <ion-textarea label="my label"></ion-textarea><br />
       <ion-textarea aria-label="my aria label"></ion-textarea><br />
       <ion-textarea label="Email" label-placement="stacked" value="hi@ionic.io"></ion-textarea>
diff --git a/core/src/components/textarea/test/autogrow/textarea.e2e.ts b/core/src/components/textarea/test/autogrow/textarea.e2e.ts
index 2b6f6119d8..416144fcb0 100644
--- a/core/src/components/textarea/test/autogrow/textarea.e2e.ts
+++ b/core/src/components/textarea/test/autogrow/textarea.e2e.ts
@@ -11,8 +11,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
       await expect(page).toHaveScreenshot(screenshot(`textarea-autogrow-diff`));
     });
 
-    // TODO(FW-3920): Autogrow test is flaky
-    test.skip('should grow when typing', async ({ page }) => {
+    test('should grow when typing', async ({ page }) => {
       await page.setContent(
         `
         <ion-textarea aria-label="Textarea" auto-grow="true"></ion-textarea>
@@ -25,6 +24,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
 
       await nativeTextarea.type('Now, this is a story all about how');
 
+      await page.waitForChanges();
       await expect(ionTextarea).toHaveScreenshot(screenshot(`textarea-autogrow-initial`));
 
       await nativeTextarea.type(
@@ -52,8 +52,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
             <ion-textarea
               aria-label="Textarea"
               auto-grow="true"
-              value="abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz">
-            </ion-textarea>
+              value="abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz"></ion-textarea>
           </ion-content>
         </ion-app>`,
         config
diff --git a/core/src/components/textarea/test/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-word-break-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/textarea/test/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-word-break-ios-ltr-Mobile-Chrome-linux.png
index 0792e3e01f..35787b7817 100644
Binary files a/core/src/components/textarea/test/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-word-break-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/textarea/test/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-word-break-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/textarea/test/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-word-break-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/textarea/test/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-word-break-ios-ltr-Mobile-Firefox-linux.png
index 3743984b7d..81eb3ac5cd 100644
Binary files a/core/src/components/textarea/test/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-word-break-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/textarea/test/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-word-break-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/textarea/test/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-word-break-ios-ltr-Mobile-Safari-linux.png b/core/src/components/textarea/test/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-word-break-ios-ltr-Mobile-Safari-linux.png
index 4a1e2cad31..8fed0f36bb 100644
Binary files a/core/src/components/textarea/test/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-word-break-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/textarea/test/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-word-break-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/textarea/test/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-word-break-md-ltr-Mobile-Chrome-linux.png b/core/src/components/textarea/test/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-word-break-md-ltr-Mobile-Chrome-linux.png
index e805bd9d7c..ceb201c302 100644
Binary files a/core/src/components/textarea/test/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-word-break-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/textarea/test/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-word-break-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/textarea/test/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-word-break-md-ltr-Mobile-Firefox-linux.png b/core/src/components/textarea/test/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-word-break-md-ltr-Mobile-Firefox-linux.png
index aaedb9db7d..3b1c5f54ea 100644
Binary files a/core/src/components/textarea/test/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-word-break-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/textarea/test/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-word-break-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/textarea/test/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-word-break-md-ltr-Mobile-Safari-linux.png b/core/src/components/textarea/test/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-word-break-md-ltr-Mobile-Safari-linux.png
index 84e3c0abeb..f4eae27310 100644
Binary files a/core/src/components/textarea/test/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-word-break-md-ltr-Mobile-Safari-linux.png and b/core/src/components/textarea/test/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-word-break-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/textarea/test/fill/textarea.e2e.ts b/core/src/components/textarea/test/fill/textarea.e2e.ts
index d517fd4130..708b257d76 100644
--- a/core/src/components/textarea/test/fill/textarea.e2e.ts
+++ b/core/src/components/textarea/test/fill/textarea.e2e.ts
@@ -17,7 +17,7 @@ configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => {
             helper-text="Enter your email"
             maxlength="20"
             counter="true"
-          ></ion-input>
+          ></ion-textarea>
         `,
           config
         );
@@ -180,3 +180,74 @@ configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => {
     });
   });
 });
+
+configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
+  test.describe(title('textarea: notch cutout'), () => {
+    test('notch cutout should be hidden when no label is passed', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-textarea fill="outline" label-placement="stacked" aria-label="my textarea"></ion-textarea>
+      `,
+        config
+      );
+
+      const notchCutout = page.locator('ion-textarea .textarea-outline-notch');
+      await expect(notchCutout).toBeHidden();
+    });
+  });
+});
+
+configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('textarea: label slot'), () => {
+    test('should render the notch correctly with a slotted label', async ({ page }) => {
+      await page.setContent(
+        `
+        <style>
+          .custom-label {
+            font-size: 30px;
+          }
+        </style>
+        <ion-textarea
+          fill="outline"
+          label-placement="stacked"
+          value="apple"
+        >
+          <div slot="label" class="custom-label">My Label Content</div>
+        </ion-textarea>
+      `,
+        config
+      );
+
+      const textarea = page.locator('ion-textarea');
+      expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-fill-outline-slotted-label`));
+    });
+    test('should render the notch correctly with a slotted label after the textarea was originally hidden', async ({
+      page,
+    }) => {
+      await page.setContent(
+        `
+        <style>
+          .custom-label {
+            font-size: 30px;
+          }
+        </style>
+        <ion-textarea
+          fill="outline"
+          label-placement="stacked"
+          value="apple"
+          style="display: none"
+        >
+          <div slot="label" class="custom-label">My Label Content</div>
+        </ion-textarea>
+      `,
+        config
+      );
+
+      const textarea = page.locator('ion-textarea');
+
+      await textarea.evaluate((el: HTMLIonSelectElement) => el.style.removeProperty('display'));
+
+      expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-fill-outline-hidden-slotted-label`));
+    });
+  });
+});
diff --git a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-outline-hidden-slotted-label-md-ltr-Mobile-Chrome-linux.png b/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-outline-hidden-slotted-label-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..a2f6303f5c
Binary files /dev/null and b/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-outline-hidden-slotted-label-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-outline-hidden-slotted-label-md-ltr-Mobile-Firefox-linux.png b/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-outline-hidden-slotted-label-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..0a625b6019
Binary files /dev/null and b/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-outline-hidden-slotted-label-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-outline-hidden-slotted-label-md-ltr-Mobile-Safari-linux.png b/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-outline-hidden-slotted-label-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..92dfc995c1
Binary files /dev/null and b/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-outline-hidden-slotted-label-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-outline-slotted-label-md-ltr-Mobile-Chrome-linux.png b/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-outline-slotted-label-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..a2f6303f5c
Binary files /dev/null and b/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-outline-slotted-label-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-outline-slotted-label-md-ltr-Mobile-Firefox-linux.png b/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-outline-slotted-label-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..0a625b6019
Binary files /dev/null and b/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-outline-slotted-label-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-outline-slotted-label-md-ltr-Mobile-Safari-linux.png b/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-outline-slotted-label-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..92dfc995c1
Binary files /dev/null and b/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-outline-slotted-label-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-solid-md-ltr-Mobile-Chrome-linux.png b/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-solid-md-ltr-Mobile-Chrome-linux.png
index 04256c0c46..72b85b2f66 100644
Binary files a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-solid-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-solid-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-solid-md-ltr-Mobile-Firefox-linux.png b/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-solid-md-ltr-Mobile-Firefox-linux.png
index 30edbc417f..41fe31ef23 100644
Binary files a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-solid-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-solid-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-solid-md-ltr-Mobile-Safari-linux.png b/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-solid-md-ltr-Mobile-Safari-linux.png
index 5481392476..b93dda953e 100644
Binary files a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-solid-md-ltr-Mobile-Safari-linux.png and b/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-solid-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-solid-md-rtl-Mobile-Chrome-linux.png b/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-solid-md-rtl-Mobile-Chrome-linux.png
index 4840ab7475..dde66277fc 100644
Binary files a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-solid-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-solid-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-solid-md-rtl-Mobile-Firefox-linux.png b/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-solid-md-rtl-Mobile-Firefox-linux.png
index 8e0e574d13..ee850d070e 100644
Binary files a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-solid-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-solid-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-solid-md-rtl-Mobile-Safari-linux.png b/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-solid-md-rtl-Mobile-Safari-linux.png
index 669f898b1f..e75266ed78 100644
Binary files a/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-solid-md-rtl-Mobile-Safari-linux.png and b/core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-solid-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/textarea/test/label-placement/textarea.e2e.ts b/core/src/components/textarea/test/label-placement/textarea.e2e.ts
index affa8f1489..a50672c3bf 100644
--- a/core/src/components/textarea/test/label-placement/textarea.e2e.ts
+++ b/core/src/components/textarea/test/label-placement/textarea.e2e.ts
@@ -25,18 +25,6 @@ configs().forEach(({ title, screenshot, config }) => {
       const textarea = page.locator('ion-textarea');
       expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-placement-start-multi-line-value`));
     });
-
-    test('label should be truncated', async ({ page }) => {
-      await page.setContent(
-        `
-      <ion-textarea label="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur." label-placement="start"></ion-textarea>
-    `,
-        config
-      );
-
-      const textarea = page.locator('ion-textarea');
-      expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-placement-start-label-truncated`));
-    });
   });
   test.describe(title('textarea: label placement end'), () => {
     test('label should appear on the ending side of the textarea', async ({ page }) => {
@@ -61,17 +49,6 @@ configs().forEach(({ title, screenshot, config }) => {
       const textarea = page.locator('ion-textarea');
       expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-placement-end-multi-line-value`));
     });
-    test('label should be truncated', async ({ page }) => {
-      await page.setContent(
-        `
-      <ion-textarea label="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur." label-placement="end"></ion-textarea>
-    `,
-        config
-      );
-
-      const textarea = page.locator('ion-textarea');
-      expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-placement-end-label-truncated`));
-    });
   });
   test.describe(title('textarea: label placement fixed'), () => {
     test('label should appear on the starting side of the textarea and have a fixed width', async ({ page }) => {
@@ -234,3 +211,95 @@ configs().forEach(({ title, screenshot, config }) => {
     });
   });
 });
+
+configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('textarea: label overflow'), () => {
+    test('label property should be truncated with an ellipsis', async ({ page }) => {
+      await page.setContent(
+        `
+            <ion-textarea label="Label Label Label Label Label" placeholder="Text Input"></ion-textarea>
+          `,
+        config
+      );
+
+      const textarea = page.locator('ion-textarea');
+      expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-label-truncate`));
+    });
+    test('label slot should be truncated with an ellipsis', async ({ page }) => {
+      await page.setContent(
+        `
+            <ion-textarea placeholder="Text Input">
+              <div slot="label">Label Label Label Label Label</div>
+            </ion-textarea>
+          `,
+        config
+      );
+
+      const textarea = page.locator('ion-textarea');
+      expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-label-slot-truncate`));
+    });
+  });
+});
+
+configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('textarea: async label'), () => {
+    test('textarea should re-render when label slot is added async', async ({ page }) => {
+      await page.setContent(
+        `
+            <ion-textarea fill="solid" label-placement="stacked" placeholder="Text Input"></ion-textarea>
+          `,
+        config
+      );
+
+      const textarea = page.locator('ion-textarea');
+
+      await textarea.evaluate((el: HTMLIonInputElement) => {
+        const labelEl = document.createElement('div');
+        labelEl.slot = 'label';
+        labelEl.innerHTML = 'Comments <span class="required" style="color: red">*</span';
+
+        el.appendChild(labelEl);
+      });
+
+      await page.waitForChanges();
+
+      expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-async-label`));
+    });
+  });
+  test.describe(title('textarea: flex in grid rendering'), () => {
+    test('should correctly render new lines in stacked textarea', async ({ page }) => {
+      /**
+       * While this bug only impacts Safari, we run this
+       * text on all browsers to make sure the Safari fix
+       * does not negatively impact other browsers.
+       */
+      test.info().annotations.push({
+        type: 'issue',
+        description: 'https://github.com/ionic-team/ionic-framework/issues/27345',
+      });
+
+      /**
+       * Add padding to make it easier to see
+       * if the text is incorrectly flowing outside
+       * the container on Safari.
+       */
+      await page.setContent(
+        `
+        <div style="padding: 20px;" class="container">
+          <ion-textarea fill="solid" label="Comments" label-placement="stacked"></ion-textarea>
+        </div>
+      `,
+        config
+      );
+
+      const nativeTextarea = page.locator('ion-textarea textarea');
+
+      await nativeTextarea.type(`Comment
+        With
+        Multiple
+        Lines`);
+
+      await expect(page.locator('.container')).toHaveScreenshot(screenshot(`textarea-multi-line-sizing`));
+    });
+  });
+});
diff --git a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-async-label-md-ltr-Mobile-Chrome-linux.png b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-async-label-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..2a5e55cb22
Binary files /dev/null and b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-async-label-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-async-label-md-ltr-Mobile-Firefox-linux.png b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-async-label-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..14a8c4d037
Binary files /dev/null and b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-async-label-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-async-label-md-ltr-Mobile-Safari-linux.png b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-async-label-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..4ff4521944
Binary files /dev/null and b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-async-label-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-label-slot-truncate-md-ltr-Mobile-Chrome-linux.png b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-label-slot-truncate-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..66dd43ce95
Binary files /dev/null and b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-label-slot-truncate-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-label-slot-truncate-md-ltr-Mobile-Firefox-linux.png b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-label-slot-truncate-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..e7261b9bd2
Binary files /dev/null and b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-label-slot-truncate-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-label-slot-truncate-md-ltr-Mobile-Safari-linux.png b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-label-slot-truncate-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..69a1cf03b1
Binary files /dev/null and b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-label-slot-truncate-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-label-truncate-md-ltr-Mobile-Chrome-linux.png b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-label-truncate-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..66dd43ce95
Binary files /dev/null and b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-label-truncate-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-label-truncate-md-ltr-Mobile-Firefox-linux.png b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-label-truncate-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..e7261b9bd2
Binary files /dev/null and b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-label-truncate-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-label-truncate-md-ltr-Mobile-Safari-linux.png b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-label-truncate-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..69a1cf03b1
Binary files /dev/null and b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-label-truncate-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-multi-line-sizing-md-ltr-Mobile-Chrome-linux.png b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-multi-line-sizing-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..3e6b5b4eb6
Binary files /dev/null and b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-multi-line-sizing-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-multi-line-sizing-md-ltr-Mobile-Firefox-linux.png b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-multi-line-sizing-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..ef7986886a
Binary files /dev/null and b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-multi-line-sizing-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-multi-line-sizing-md-ltr-Mobile-Safari-linux.png b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-multi-line-sizing-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..567f26e068
Binary files /dev/null and b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-multi-line-sizing-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-end-label-truncated-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-end-label-truncated-ios-ltr-Mobile-Chrome-linux.png
deleted file mode 100644
index 8e43de9926..0000000000
Binary files a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-end-label-truncated-ios-ltr-Mobile-Chrome-linux.png and /dev/null differ
diff --git a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-end-label-truncated-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-end-label-truncated-ios-ltr-Mobile-Firefox-linux.png
deleted file mode 100644
index c47cb7377d..0000000000
Binary files a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-end-label-truncated-ios-ltr-Mobile-Firefox-linux.png and /dev/null differ
diff --git a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-end-label-truncated-ios-ltr-Mobile-Safari-linux.png b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-end-label-truncated-ios-ltr-Mobile-Safari-linux.png
deleted file mode 100644
index 4e97e53f01..0000000000
Binary files a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-end-label-truncated-ios-ltr-Mobile-Safari-linux.png and /dev/null differ
diff --git a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-end-label-truncated-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-end-label-truncated-ios-rtl-Mobile-Chrome-linux.png
deleted file mode 100644
index 37d814c00f..0000000000
Binary files a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-end-label-truncated-ios-rtl-Mobile-Chrome-linux.png and /dev/null differ
diff --git a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-end-label-truncated-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-end-label-truncated-ios-rtl-Mobile-Firefox-linux.png
deleted file mode 100644
index a941fd7370..0000000000
Binary files a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-end-label-truncated-ios-rtl-Mobile-Firefox-linux.png and /dev/null differ
diff --git a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-end-label-truncated-ios-rtl-Mobile-Safari-linux.png b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-end-label-truncated-ios-rtl-Mobile-Safari-linux.png
deleted file mode 100644
index 5556873995..0000000000
Binary files a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-end-label-truncated-ios-rtl-Mobile-Safari-linux.png and /dev/null differ
diff --git a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-end-label-truncated-md-ltr-Mobile-Chrome-linux.png b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-end-label-truncated-md-ltr-Mobile-Chrome-linux.png
deleted file mode 100644
index d06d5e9c00..0000000000
Binary files a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-end-label-truncated-md-ltr-Mobile-Chrome-linux.png and /dev/null differ
diff --git a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-end-label-truncated-md-ltr-Mobile-Firefox-linux.png b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-end-label-truncated-md-ltr-Mobile-Firefox-linux.png
deleted file mode 100644
index 0454ad47e1..0000000000
Binary files a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-end-label-truncated-md-ltr-Mobile-Firefox-linux.png and /dev/null differ
diff --git a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-end-label-truncated-md-ltr-Mobile-Safari-linux.png b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-end-label-truncated-md-ltr-Mobile-Safari-linux.png
deleted file mode 100644
index 77ea4b7d95..0000000000
Binary files a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-end-label-truncated-md-ltr-Mobile-Safari-linux.png and /dev/null differ
diff --git a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-end-label-truncated-md-rtl-Mobile-Chrome-linux.png b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-end-label-truncated-md-rtl-Mobile-Chrome-linux.png
deleted file mode 100644
index aed82958da..0000000000
Binary files a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-end-label-truncated-md-rtl-Mobile-Chrome-linux.png and /dev/null differ
diff --git a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-end-label-truncated-md-rtl-Mobile-Firefox-linux.png b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-end-label-truncated-md-rtl-Mobile-Firefox-linux.png
deleted file mode 100644
index fe925fce08..0000000000
Binary files a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-end-label-truncated-md-rtl-Mobile-Firefox-linux.png and /dev/null differ
diff --git a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-end-label-truncated-md-rtl-Mobile-Safari-linux.png b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-end-label-truncated-md-rtl-Mobile-Safari-linux.png
deleted file mode 100644
index 07b615c685..0000000000
Binary files a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-end-label-truncated-md-rtl-Mobile-Safari-linux.png and /dev/null differ
diff --git a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-start-label-truncated-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-start-label-truncated-ios-ltr-Mobile-Firefox-linux.png
deleted file mode 100644
index d251715648..0000000000
Binary files a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-start-label-truncated-ios-ltr-Mobile-Firefox-linux.png and /dev/null differ
diff --git a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-start-label-truncated-ios-ltr-Mobile-Safari-linux.png b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-start-label-truncated-ios-ltr-Mobile-Safari-linux.png
deleted file mode 100644
index 1e5ad6437e..0000000000
Binary files a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-start-label-truncated-ios-ltr-Mobile-Safari-linux.png and /dev/null differ
diff --git a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-start-label-truncated-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-start-label-truncated-ios-rtl-Mobile-Chrome-linux.png
deleted file mode 100644
index 79eea33c1a..0000000000
Binary files a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-start-label-truncated-ios-rtl-Mobile-Chrome-linux.png and /dev/null differ
diff --git a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-start-label-truncated-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-start-label-truncated-ios-rtl-Mobile-Firefox-linux.png
deleted file mode 100644
index e408677f70..0000000000
Binary files a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-start-label-truncated-ios-rtl-Mobile-Firefox-linux.png and /dev/null differ
diff --git a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-start-label-truncated-ios-rtl-Mobile-Safari-linux.png b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-start-label-truncated-ios-rtl-Mobile-Safari-linux.png
deleted file mode 100644
index 01adc31762..0000000000
Binary files a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-start-label-truncated-ios-rtl-Mobile-Safari-linux.png and /dev/null differ
diff --git a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-start-label-truncated-md-ltr-Mobile-Chrome-linux.png b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-start-label-truncated-md-ltr-Mobile-Chrome-linux.png
deleted file mode 100644
index a1b9e90d50..0000000000
Binary files a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-start-label-truncated-md-ltr-Mobile-Chrome-linux.png and /dev/null differ
diff --git a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-start-label-truncated-md-ltr-Mobile-Firefox-linux.png b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-start-label-truncated-md-ltr-Mobile-Firefox-linux.png
deleted file mode 100644
index d49375f8ac..0000000000
Binary files a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-start-label-truncated-md-ltr-Mobile-Firefox-linux.png and /dev/null differ
diff --git a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-start-label-truncated-md-ltr-Mobile-Safari-linux.png b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-start-label-truncated-md-ltr-Mobile-Safari-linux.png
deleted file mode 100644
index 7bd2e6794c..0000000000
Binary files a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-start-label-truncated-md-ltr-Mobile-Safari-linux.png and /dev/null differ
diff --git a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-start-label-truncated-md-rtl-Mobile-Chrome-linux.png b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-start-label-truncated-md-rtl-Mobile-Chrome-linux.png
deleted file mode 100644
index 106f2264a0..0000000000
Binary files a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-start-label-truncated-md-rtl-Mobile-Chrome-linux.png and /dev/null differ
diff --git a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-start-label-truncated-md-rtl-Mobile-Firefox-linux.png b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-start-label-truncated-md-rtl-Mobile-Firefox-linux.png
deleted file mode 100644
index 78867da981..0000000000
Binary files a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-start-label-truncated-md-rtl-Mobile-Firefox-linux.png and /dev/null differ
diff --git a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-start-label-truncated-md-rtl-Mobile-Safari-linux.png b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-start-label-truncated-md-rtl-Mobile-Safari-linux.png
deleted file mode 100644
index fb5bf13aed..0000000000
Binary files a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-start-label-truncated-md-rtl-Mobile-Safari-linux.png and /dev/null differ
diff --git a/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts b/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts
index dc39462842..32a46889c5 100644
--- a/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts
+++ b/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts
@@ -14,8 +14,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
       expect(await page.screenshot()).toMatchSnapshot(screenshot(`textarea-autogrow-diff`));
     });
 
-    // TODO(FW-3920): Autogrow test is flaky
-    test.skip('should grow when typing', async ({ page }) => {
+    test('should grow when typing', async ({ page }) => {
       await page.setContent(
         `
         <ion-app>
@@ -66,8 +65,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
             <ion-textarea
               legacy="true"
               auto-grow="true"
-              value="abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz">
-            </ion-textarea>
+              value="abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz"></ion-textarea>
           </ion-content>
         </ion-app>`,
         config
diff --git a/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-after-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-after-ios-ltr-Mobile-Chrome-linux.png
index 8dbbcb70c6..bd8a9e696d 100644
Binary files a/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-after-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-after-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-after-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-after-ios-ltr-Mobile-Firefox-linux.png
index 59985790bc..62e16123f5 100644
Binary files a/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-after-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-after-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-after-ios-ltr-Mobile-Safari-linux.png b/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-after-ios-ltr-Mobile-Safari-linux.png
index 04e9cc6463..48183d3fbd 100644
Binary files a/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-after-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-after-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-after-md-ltr-Mobile-Chrome-linux.png b/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-after-md-ltr-Mobile-Chrome-linux.png
index a5df640363..63640ab228 100644
Binary files a/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-after-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-after-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-after-md-ltr-Mobile-Firefox-linux.png b/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-after-md-ltr-Mobile-Firefox-linux.png
index a5f2eb8c9b..b750e70e7a 100644
Binary files a/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-after-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-after-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-after-md-ltr-Mobile-Safari-linux.png b/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-after-md-ltr-Mobile-Safari-linux.png
index 6d0e4c2ada..9bb583798d 100644
Binary files a/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-after-md-ltr-Mobile-Safari-linux.png and b/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-after-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-initial-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-initial-ios-ltr-Mobile-Chrome-linux.png
index 7fcabada26..defbaa4b08 100644
Binary files a/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-initial-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-initial-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-initial-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-initial-ios-ltr-Mobile-Firefox-linux.png
index 46eb90896c..0f9d1755eb 100644
Binary files a/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-initial-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-initial-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-initial-ios-ltr-Mobile-Safari-linux.png b/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-initial-ios-ltr-Mobile-Safari-linux.png
index 97021523f4..fd1ee348c2 100644
Binary files a/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-initial-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-initial-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-initial-md-ltr-Mobile-Chrome-linux.png b/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-initial-md-ltr-Mobile-Chrome-linux.png
index 5e193467e4..ca141bdc34 100644
Binary files a/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-initial-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-initial-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-initial-md-ltr-Mobile-Firefox-linux.png b/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-initial-md-ltr-Mobile-Firefox-linux.png
index 108a2905c7..26a3105499 100644
Binary files a/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-initial-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-initial-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-initial-md-ltr-Mobile-Safari-linux.png b/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-initial-md-ltr-Mobile-Safari-linux.png
index 296b072c55..ffc0d250d1 100644
Binary files a/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-initial-md-ltr-Mobile-Safari-linux.png and b/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-initial-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-word-break-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-word-break-ios-ltr-Mobile-Chrome-linux.png
index 806345c2d0..4c61393f92 100644
Binary files a/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-word-break-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-word-break-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-word-break-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-word-break-ios-ltr-Mobile-Firefox-linux.png
index d959d81fc1..a092c3e48b 100644
Binary files a/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-word-break-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-word-break-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-word-break-ios-ltr-Mobile-Safari-linux.png b/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-word-break-ios-ltr-Mobile-Safari-linux.png
index b18f880e79..085d32f55d 100644
Binary files a/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-word-break-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-word-break-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-word-break-md-ltr-Mobile-Chrome-linux.png b/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-word-break-md-ltr-Mobile-Chrome-linux.png
index baeb8176af..414e046c42 100644
Binary files a/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-word-break-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-word-break-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-word-break-md-ltr-Mobile-Firefox-linux.png b/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-word-break-md-ltr-Mobile-Firefox-linux.png
index ba03e37272..0bc9a9a138 100644
Binary files a/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-word-break-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-word-break-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-word-break-md-ltr-Mobile-Safari-linux.png b/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-word-break-md-ltr-Mobile-Safari-linux.png
index d5c1508b70..e3d524e819 100644
Binary files a/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-word-break-md-ltr-Mobile-Safari-linux.png and b/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-word-break-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/textarea/test/slot/index.html b/core/src/components/textarea/test/slot/index.html
new file mode 100644
index 0000000000..23fe260c7c
--- /dev/null
+++ b/core/src/components/textarea/test/slot/index.html
@@ -0,0 +1,139 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Textarea - Slot</title>
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
+    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
+    <script src="../../../../../scripts/testing/scripts.js"></script>
+    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
+    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+    <style>
+      .grid {
+        display: grid;
+        grid-template-columns: repeat(3, minmax(250px, 1fr));
+        grid-row-gap: 20px;
+        grid-column-gap: 20px;
+      }
+      h2 {
+        font-size: 12px;
+        font-weight: normal;
+
+        color: #6f7378;
+
+        margin-top: 10px;
+      }
+      @media screen and (max-width: 800px) {
+        .grid {
+          grid-template-columns: 1fr;
+          padding: 0;
+        }
+      }
+
+      .required {
+        color: red;
+      }
+    </style>
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Textarea - Slot</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content id="content" class="ion-padding">
+        <div class="grid">
+          <div class="grid-item">
+            <h2>No Fill / Start</h2>
+            <ion-textarea label-placement="start" value="hi@ionic.io">
+              <div slot="label">Email <span class="required">*</span></div>
+            </ion-textarea>
+          </div>
+
+          <div class="grid-item">
+            <h2>Solid / Start</h2>
+            <ion-textarea label-placement="start" fill="solid" value="hi@ionic.io">
+              <div slot="label">Email <span class="required">*</span></div>
+            </ion-textarea>
+          </div>
+
+          <div class="grid-item">
+            <h2>Outline / Start</h2>
+            <ion-textarea label-placement="start" fill="outline" value="hi@ionic.io">
+              <div slot="label">Email <span class="required">*</span></div>
+            </ion-textarea>
+          </div>
+
+          <div class="grid-item">
+            <h2>No Fill / Floating</h2>
+            <ion-textarea label-placement="floating" value="hi@ionic.io">
+              <div slot="label">Email <span class="required">*</span></div>
+            </ion-textarea>
+          </div>
+
+          <div class="grid-item">
+            <h2>Solid / Floating</h2>
+            <ion-textarea label-placement="floating" fill="solid" value="hi@ionic.io">
+              <div slot="label">Email <span class="required">*</span></div>
+            </ion-textarea>
+          </div>
+
+          <div class="grid-item">
+            <h2>Outline / Floating</h2>
+            <ion-textarea label-placement="floating" fill="outline" value="hi@ionic.io">
+              <div slot="label">Email <span class="required">*</span></div>
+            </ion-textarea>
+          </div>
+
+          <div class="grid-item">
+            <h2>Outline / Floating / Async</h2>
+            <ion-textarea id="solid-async" label-placement="floating" fill="outline" value="hi@ionic.io"></ion-textarea>
+          </div>
+        </div>
+
+        <ion-button onclick="addSlot()">Add Slotted Content</ion-button>
+        <ion-button onclick="updateSlot()">Update Slotted Content</ion-button>
+        <ion-button onclick="removeSlot()">Remove Slotted Content</ion-button>
+      </ion-content>
+    </ion-app>
+
+    <script>
+      const solidAsync = document.querySelector('#solid-async');
+
+      const getSlottedContent = () => {
+        return solidAsync.querySelector('[slot="label"]');
+      };
+
+      const addSlot = () => {
+        if (getSlottedContent() === null) {
+          const labelEl = document.createElement('div');
+          labelEl.slot = 'label';
+          labelEl.innerHTML = 'Comments <span class="required">*</span>';
+
+          solidAsync.appendChild(labelEl);
+        }
+      };
+
+      const removeSlot = () => {
+        if (getSlottedContent() !== null) {
+          solidAsync.querySelector('[slot="label"]').remove();
+        }
+      };
+
+      const updateSlot = () => {
+        const slottedContent = getSlottedContent();
+
+        if (slottedContent !== null) {
+          slottedContent.textContent = 'This is my really really really long text';
+        }
+      };
+    </script>
+  </body>
+</html>
diff --git a/core/src/components/textarea/test/textarea.spec.ts b/core/src/components/textarea/test/textarea.spec.ts
index a3e8a7ec13..890d53e544 100644
--- a/core/src/components/textarea/test/textarea.spec.ts
+++ b/core/src/components/textarea/test/textarea.spec.ts
@@ -12,3 +12,57 @@ it('should inherit attributes', async () => {
   expect(nativeEl.getAttribute('tabindex')).toBe('-1');
   expect(nativeEl.getAttribute('data-form-type')).toBe('password');
 });
+
+/**
+ * Textarea uses emulated slots, so the internal
+ * behavior will not exactly match IonSelect's slots.
+ * For example, Textarea does not render an actual `<slot>` element
+ * internally, so we do not check for that here. Instead,
+ * we check to see which label text is being used.
+ * If Textarea is updated to use Shadow DOM (and therefore native slots),
+ * then we can update these tests to more closely match the Select tests.
+ **/
+describe('textarea: label rendering', () => {
+  it('should render label prop if only prop provided', async () => {
+    const page = await newSpecPage({
+      components: [Textarea],
+      html: `
+        <ion-textarea label="Label Prop Text"></ion-textarea>
+      `,
+    });
+
+    const textarea = page.body.querySelector('ion-textarea');
+
+    const labelText = textarea.querySelector('.label-text-wrapper');
+
+    expect(labelText.textContent).toBe('Label Prop Text');
+  });
+  it('should render label slot if only slot provided', async () => {
+    const page = await newSpecPage({
+      components: [Textarea],
+      html: `
+        <ion-textarea><div slot="label">Label Prop Slot</div></ion-textarea>
+      `,
+    });
+
+    const textarea = page.body.querySelector('ion-textarea');
+
+    const labelText = textarea.querySelector('.label-text-wrapper');
+
+    expect(labelText.textContent).toBe('Label Prop Slot');
+  });
+  it('should render label prop if both prop and slot provided', async () => {
+    const page = await newSpecPage({
+      components: [Textarea],
+      html: `
+        <ion-textarea label="Label Prop Text"><div slot="label">Label Prop Slot</div></ion-textarea>
+      `,
+    });
+
+    const textarea = page.body.querySelector('ion-textarea');
+
+    const labelText = textarea.querySelector('.label-text-wrapper');
+
+    expect(labelText.textContent).toBe('Label Prop Text');
+  });
+});
diff --git a/core/src/components/textarea/textarea.md.outline.scss b/core/src/components/textarea/textarea.md.outline.scss
index 0493cbc5bf..76f20279ae 100644
--- a/core/src/components/textarea/textarea.md.outline.scss
+++ b/core/src/components/textarea/textarea.md.outline.scss
@@ -176,6 +176,16 @@
 
   opacity: 0;
   pointer-events: none;
+
+  /**
+   * The spacer currently inherits
+   * border-box sizing from the Ionic reset styles.
+   * However, we do not want to include padding in
+   * the calculation of the element dimensions.
+   * This code can be removed if textarea is updated
+   * to use the Shadow DOM.
+   */
+  box-sizing: content-box;
 }
 
 :host(.textarea-fill-outline) .textarea-outline-start {
diff --git a/core/src/components/textarea/textarea.scss b/core/src/components/textarea/textarea.scss
index df0cf470b3..e656910bd8 100644
--- a/core/src/components/textarea/textarea.scss
+++ b/core/src/components/textarea/textarea.scss
@@ -62,8 +62,6 @@
 
   font-family: $font-family-base;
 
-  white-space: pre-wrap;
-
   z-index: $z-index-item-input;
 
   box-sizing: border-box;
@@ -74,6 +72,8 @@
   flex: 1;
 
   background: var(--background);
+
+  white-space: pre-wrap;
 }
 
 // TODO: FW-2876 - Remove this selector
@@ -131,9 +131,8 @@
   outline: none;
 
   background: transparent;
-  box-sizing: border-box;
-  resize: none;
-  appearance: none;
+
+  white-space: pre-wrap;
 
   /**
    * This ensures the textarea
@@ -145,6 +144,9 @@
    * contrast of the textarea.
    */
   z-index: 1;
+  box-sizing: border-box;
+  resize: none;
+  appearance: none;
 
   &::placeholder {
     @include padding(0);
@@ -159,6 +161,11 @@
   }
 }
 
+// TODO: FW-2876 - Remove this selector
+:host(.legacy-textarea) .native-textarea {
+  white-space: inherit;
+}
+
 // TODO: FW-2876 - Remove this selector
 :host(.legacy-textarea) .native-textarea,
 :host(.legacy-textarea) .textarea-legacy-wrapper::after {
@@ -166,8 +173,28 @@
   @include border-radius(var(--border-radius));
 }
 
-.native-textarea,
-// TODO: FW-2876 - Remove this selector, keep .native-textarea
+.native-textarea {
+  color: inherit;
+
+  font-family: inherit;
+  font-size: inherit;
+  font-style: inherit;
+  font-weight: inherit;
+
+  letter-spacing: inherit;
+
+  text-align: inherit;
+  text-decoration: inherit;
+  text-indent: inherit;
+  text-overflow: inherit;
+  text-transform: inherit;
+
+  grid-area: 1 / 1 / 2 / 2;
+
+  word-break: break-word;
+}
+
+// TODO: FW-2876 - Remove this selector
 :host(.legacy-textarea) .textarea-legacy-wrapper::after {
   @include text-inherit();
 
@@ -296,6 +323,15 @@
   min-height: inherit;
   max-height: inherit;
 
+  /**
+   * This avoids a WebKit bug where
+   * the height of the inner textarea
+   * is incorrect and flows outside the
+   * parent container: https://bugs.webkit.org/show_bug.cgi?id=256781
+   * TODO FW-4734
+   */
+  grid-auto-rows: 100%;
+
   &::after {
     // This technique is used for an auto-resizing textarea.
     // The text contents are reflected as a pseudo-element that is visually hidden.
@@ -312,9 +348,28 @@
 .native-wrapper::after {
   @include padding(var(--padding-top), 0, var(--padding-bottom), 0);
   @include margin(0, 0, 0, 0);
-  @include text-inherit();
   @include border-radius(var(--border-radius));
 
+  /**
+   * Note: Do not use @include text-inherit()
+   * as that sets white-space: inherit
+   * Instead, we use white-space: pre-wrap above.
+   */
+  color: inherit;
+
+  font-family: inherit;
+  font-size: inherit;
+  font-style: inherit;
+  font-weight: inherit;
+
+  letter-spacing: inherit;
+
+  text-align: inherit;
+  text-decoration: inherit;
+  text-indent: inherit;
+  text-overflow: inherit;
+  text-transform: inherit;
+
   grid-area: 1 / 1 / 2 / 2;
 
   word-break: break-word;
@@ -455,7 +510,8 @@
  * works on block-level elements. A flex item is
  * considered blockified (https://www.w3.org/TR/css-display-3/#blockify).
  */
-.label-text {
+.label-text,
+::slotted([slot="label"]) {
   text-overflow: ellipsis;
 
   white-space: nowrap;
@@ -463,6 +519,16 @@
   overflow: hidden;
 }
 
+/**
+ * If no label text is placed into the slot
+ * then the element should be hidden otherwise
+ * there will be additional margins added.
+ */
+.label-text-wrapper-hidden,
+.textarea-outline-notch-hidden {
+  display: none;
+}
+
 .textarea-wrapper textarea {
   /**
    * When the floating label appears on top of the
diff --git a/core/src/components/textarea/textarea.tsx b/core/src/components/textarea/textarea.tsx
index 37cf69fe39..b49ad7cb9d 100644
--- a/core/src/components/textarea/textarea.tsx
+++ b/core/src/components/textarea/textarea.tsx
@@ -1,20 +1,37 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
-import { Build, Component, Element, Event, Host, Method, Prop, State, Watch, h, writeTask } from '@stencil/core';
+import {
+  Build,
+  Component,
+  Element,
+  Event,
+  Host,
+  Method,
+  Prop,
+  State,
+  Watch,
+  forceUpdate,
+  h,
+  writeTask,
+} from '@stencil/core';
+import type { LegacyFormController, NotchController } from '@utils/forms';
+import { createLegacyFormController, createNotchController } from '@utils/forms';
+import type { Attributes } from '@utils/helpers';
+import { inheritAriaAttributes, debounceEvent, findItemLabel, inheritAttributes } from '@utils/helpers';
+import { printIonWarning } from '@utils/logging';
+import { createSlotMutationController } from '@utils/slot-mutation-controller';
+import type { SlotMutationController } from '@utils/slot-mutation-controller';
+import { createColorClasses, hostContext } from '@utils/theme';
 
 import { getIonMode } from '../../global/ionic-global';
 import type { Color, StyleEventDetail } from '../../interface';
-import type { LegacyFormController } from '../../utils/forms';
-import { createLegacyFormController } from '../../utils/forms';
-import type { Attributes } from '../../utils/helpers';
-import { inheritAriaAttributes, debounceEvent, findItemLabel, inheritAttributes } from '../../utils/helpers';
-import { printIonWarning } from '../../utils/logging';
-import { createColorClasses, hostContext } from '../../utils/theme';
 import { getCounterText } from '../input/input.utils';
 
 import type { TextareaChangeEventDetail, TextareaInputEventDetail } from './textarea-interface';
 
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ *
+ * @slot label - The label text to associate with the textarea. Use the `labelPlacement` property to control where the label is placed relative to the textarea. Use this if you need to render a label with custom HTML. (EXPERIMENTAL)
  */
 @Component({
   tag: 'ion-textarea',
@@ -38,6 +55,11 @@ export class Textarea implements ComponentInterface {
   private inheritedAttributes: Attributes = {};
   private originalIonInput?: EventEmitter<TextareaInputEventDetail>;
   private legacyFormController!: LegacyFormController;
+  private notchSpacerEl: HTMLElement | undefined;
+
+  private slotMutationController?: SlotMutationController;
+
+  private notchController?: NotchController;
 
   // This flag ensures we log the deprecation warning at most once.
   private hasLoggedDeprecationWarning = false;
@@ -205,6 +227,10 @@ export class Textarea implements ComponentInterface {
 
   /**
    * The visible label associated with the textarea.
+   *
+   * Use this if you need to render a plaintext label.
+   *
+   * The `label` property will take priority over the `label` slot if both are used.
    */
   @Prop() label?: string;
 
@@ -249,18 +275,16 @@ export class Textarea implements ComponentInterface {
   }
 
   /**
-   * The `ionChange` event is fired for `<ion-textarea>` elements when the user
-   * modifies the element's value. Unlike the `ionInput` event, the `ionChange`
-   * event is not necessarily fired for each alteration to an element's value.
-   *
-   * The `ionChange` event is fired when the element loses focus after its value
-   * has been modified.
+   * The `ionChange` event is fired when the user modifies the textarea's value.
+   * Unlike the `ionInput` event, the `ionChange` event is fired when
+   * the element loses focus after its value has been modified.
    */
   @Event() ionChange!: EventEmitter<TextareaChangeEventDetail>;
 
   /**
-   * The `ionInput` event fires when the `value` of an `<ion-textarea>` element
-   * has been changed.
+   * The `ionInput` event is fired each time the user modifies the textarea's value.
+   * Unlike the `ionChange` event, the `ionInput` event is fired for each alteration
+   * to the textarea's value. This typically happens for each keystroke as the user types.
    *
    * When `clearOnEdit` is enabled, the `ionInput` event will be fired when
    * the user clears the textarea by performing a keydown event.
@@ -286,6 +310,12 @@ export class Textarea implements ComponentInterface {
   connectedCallback() {
     const { el } = this;
     this.legacyFormController = createLegacyFormController(el);
+    this.slotMutationController = createSlotMutationController(el, 'label', () => forceUpdate(this));
+    this.notchController = createNotchController(
+      el,
+      () => this.notchSpacerEl,
+      () => this.labelSlot
+    );
     this.emitStyle();
     this.debounceChanged();
     if (Build.isBrowser) {
@@ -305,6 +335,16 @@ export class Textarea implements ComponentInterface {
         })
       );
     }
+
+    if (this.slotMutationController) {
+      this.slotMutationController.destroy();
+      this.slotMutationController = undefined;
+    }
+
+    if (this.notchController) {
+      this.notchController.destroy();
+      this.notchController = undefined;
+    }
   }
 
   componentWillLoad() {
@@ -319,6 +359,10 @@ export class Textarea implements ComponentInterface {
     this.runAutoGrow();
   }
 
+  componentDidRender() {
+    this.notchController?.calculateNotchWidth();
+  }
+
   /**
    * Sets focus on the native `textarea` in `ion-textarea`. Use this method instead of the global
    * `textarea.focus()`.
@@ -530,17 +574,37 @@ Developers can use the "legacy" property to continue using the legacy form marku
 
   private renderLabel() {
     const { label } = this;
-    if (label === undefined) {
-      return;
-    }
 
     return (
-      <div class="label-text-wrapper">
-        <div class="label-text">{this.label}</div>
+      <div
+        class={{
+          'label-text-wrapper': true,
+          'label-text-wrapper-hidden': !this.hasLabel,
+        }}
+      >
+        {label === undefined ? <slot name="label"></slot> : <div class="label-text">{label}</div>}
       </div>
     );
   }
 
+  /**
+   * Gets any content passed into the `label` slot,
+   * not the <slot> definition.
+   */
+  private get labelSlot() {
+    return this.el.querySelector('[slot="label"]');
+  }
+
+  /**
+   * Returns `true` if label content is provided
+   * either by a prop or a content. If you want
+   * to get the plaintext value of the label use
+   * the `labelText` getter instead.
+   */
+  private get hasLabel() {
+    return this.label !== undefined || this.labelSlot !== null;
+  }
+
   /**
    * Renders the border container when fill="outline".
    */
@@ -559,8 +623,13 @@ Developers can use the "legacy" property to continue using the legacy form marku
       return [
         <div class="textarea-outline-container">
           <div class="textarea-outline-start"></div>
-          <div class="textarea-outline-notch">
-            <div class="notch-spacer" aria-hidden="true">
+          <div
+            class={{
+              'textarea-outline-notch': true,
+              'textarea-outline-notch-hidden': !this.hasLabel,
+            }}
+          >
+            <div class="notch-spacer" aria-hidden="true" ref={(el) => (this.notchSpacerEl = el)}>
               {this.label}
             </div>
           </div>
diff --git a/core/src/components/title/title.tsx b/core/src/components/title/title.tsx
index 851cde5068..82a108071f 100644
--- a/core/src/components/title/title.tsx
+++ b/core/src/components/title/title.tsx
@@ -1,9 +1,9 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Prop, Watch, h } from '@stencil/core';
+import { createColorClasses } from '@utils/theme';
 
 import { getIonMode } from '../../global/ionic-global';
 import type { Color, StyleEventDetail } from '../../interface';
-import { createColorClasses } from '../../utils/theme';
 
 @Component({
   tag: 'ion-title',
diff --git a/core/src/components/toast/animations/ios.enter.ts b/core/src/components/toast/animations/ios.enter.ts
index 9f18a096fe..a515924323 100644
--- a/core/src/components/toast/animations/ios.enter.ts
+++ b/core/src/components/toast/animations/ios.enter.ts
@@ -1,6 +1,7 @@
+import { createAnimation } from '@utils/animation/animation';
+import { getElementRoot } from '@utils/helpers';
+
 import type { Animation } from '../../../interface';
-import { createAnimation } from '../../../utils/animation/animation';
-import { getElementRoot } from '../../../utils/helpers';
 
 /**
  * iOS Toast Enter Animation
diff --git a/core/src/components/toast/animations/ios.leave.ts b/core/src/components/toast/animations/ios.leave.ts
index e3b68d6451..8a7a131045 100644
--- a/core/src/components/toast/animations/ios.leave.ts
+++ b/core/src/components/toast/animations/ios.leave.ts
@@ -1,6 +1,7 @@
+import { createAnimation } from '@utils/animation/animation';
+import { getElementRoot } from '@utils/helpers';
+
 import type { Animation } from '../../../interface';
-import { createAnimation } from '../../../utils/animation/animation';
-import { getElementRoot } from '../../../utils/helpers';
 
 /**
  * iOS Toast Leave Animation
diff --git a/core/src/components/toast/animations/md.enter.ts b/core/src/components/toast/animations/md.enter.ts
index 45511b0a8f..3d60caf5bf 100644
--- a/core/src/components/toast/animations/md.enter.ts
+++ b/core/src/components/toast/animations/md.enter.ts
@@ -1,6 +1,7 @@
+import { createAnimation } from '@utils/animation/animation';
+import { getElementRoot } from '@utils/helpers';
+
 import type { Animation } from '../../../interface';
-import { createAnimation } from '../../../utils/animation/animation';
-import { getElementRoot } from '../../../utils/helpers';
 
 /**
  * MD Toast Enter Animation
diff --git a/core/src/components/toast/animations/md.leave.ts b/core/src/components/toast/animations/md.leave.ts
index abc6fae992..daaf4cc382 100644
--- a/core/src/components/toast/animations/md.leave.ts
+++ b/core/src/components/toast/animations/md.leave.ts
@@ -1,6 +1,7 @@
+import { createAnimation } from '@utils/animation/animation';
+import { getElementRoot } from '@utils/helpers';
+
 import type { Animation } from '../../../interface';
-import { createAnimation } from '../../../utils/animation/animation';
-import { getElementRoot } from '../../../utils/helpers';
 
 /**
  * md Toast Leave Animation
diff --git a/core/src/components/toast/toast.tsx b/core/src/components/toast/toast.tsx
index 4e43505d40..4f397d94a7 100644
--- a/core/src/components/toast/toast.tsx
+++ b/core/src/components/toast/toast.tsx
@@ -1,11 +1,7 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
-import { Watch, Component, Element, Event, h, Host, Method, Prop, State } from '@stencil/core';
-
-import { config } from '../../global/config';
-import { getIonMode } from '../../global/ionic-global';
-import type { AnimationBuilder, Color, CssClassMap, OverlayInterface, FrameworkDelegate } from '../../interface';
-import { ENABLE_HTML_CONTENT_DEFAULT } from '../../utils/config';
-import { printIonWarning } from '../../utils/logging';
+import { State, Watch, Component, Element, Event, h, Host, Method, Prop } from '@stencil/core';
+import { ENABLE_HTML_CONTENT_DEFAULT } from '@utils/config';
+import { printIonWarning } from '@utils/logging';
 import {
   createDelegateController,
   createTriggerController,
@@ -16,11 +12,15 @@ import {
   present,
   safeCall,
   setOverlayId,
-} from '../../utils/overlays';
+} from '@utils/overlays';
+import { sanitizeDOMString } from '@utils/sanitization';
+import { createColorClasses, getClassMap } from '@utils/theme';
+
+import { config } from '../../global/config';
+import { getIonMode } from '../../global/ionic-global';
+import type { AnimationBuilder, Color, CssClassMap, OverlayInterface, FrameworkDelegate } from '../../interface';
 import type { OverlayEventDetail } from '../../utils/overlays-interface';
 import type { IonicSafeString } from '../../utils/sanitization';
-import { sanitizeDOMString } from '../../utils/sanitization';
-import { createColorClasses, getClassMap } from '../../utils/theme';
 
 import { iosEnterAnimation } from './animations/ios.enter';
 import { iosLeaveAnimation } from './animations/ios.leave';
diff --git a/core/src/components/toggle/test/item/index.html b/core/src/components/toggle/test/item/index.html
index a6defb1771..e954e7db11 100644
--- a/core/src/components/toggle/test/item/index.html
+++ b/core/src/components/toggle/test/item/index.html
@@ -134,6 +134,19 @@
             </ion-list>
           </div>
         </div>
+
+        <h1>Multiline Label</h1>
+        <div class="grid">
+          <div class="grid-item">
+            <ion-item>
+              <ion-toggle justify="start">
+                <ion-label class="ion-text-wrap">
+                  Enable Notifications Enable Notifications Enable Notifications
+                </ion-label>
+              </ion-toggle>
+            </ion-item>
+          </div>
+        </div>
       </ion-content>
     </ion-app>
   </body>
diff --git a/core/src/components/toggle/test/item/label.e2e.ts b/core/src/components/toggle/test/item/label.e2e.ts
index e3132ef841..d7651ae0ea 100644
--- a/core/src/components/toggle/test/item/label.e2e.ts
+++ b/core/src/components/toggle/test/item/label.e2e.ts
@@ -50,3 +50,24 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
     });
   });
 });
+
+configs({ directions: ['ltr'], modes: ['md'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('toggle: long label in item'), () => {
+    test('should render margins correctly when using long label in item', async ({ page }) => {
+      await page.setContent(
+        `
+          <ion-list>
+            <ion-item>
+              <ion-toggle justify="start">
+                <ion-label class="ion-text-wrap">Enable Notifications Enable Notifications Enable Notifications</ion-label>
+              </ion-toggle>
+            </ion-item>
+          </ion-list>
+        `,
+        config
+      );
+      const list = page.locator('ion-list');
+      expect(await list.screenshot()).toMatchSnapshot(screenshot(`toggle-long-label-in-item`));
+    });
+  });
+});
diff --git a/core/src/components/toggle/test/item/label.e2e.ts-snapshots/toggle-long-label-in-item-md-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/item/label.e2e.ts-snapshots/toggle-long-label-in-item-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..bfa2801a26
Binary files /dev/null and b/core/src/components/toggle/test/item/label.e2e.ts-snapshots/toggle-long-label-in-item-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/item/label.e2e.ts-snapshots/toggle-long-label-in-item-md-ltr-Mobile-Firefox-linux.png b/core/src/components/toggle/test/item/label.e2e.ts-snapshots/toggle-long-label-in-item-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..04ef942225
Binary files /dev/null and b/core/src/components/toggle/test/item/label.e2e.ts-snapshots/toggle-long-label-in-item-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/item/label.e2e.ts-snapshots/toggle-long-label-in-item-md-ltr-Mobile-Safari-linux.png b/core/src/components/toggle/test/item/label.e2e.ts-snapshots/toggle-long-label-in-item-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..7d7f6a080e
Binary files /dev/null and b/core/src/components/toggle/test/item/label.e2e.ts-snapshots/toggle-long-label-in-item-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-md-rtl-Mobile-Firefox-linux.png b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-md-rtl-Mobile-Firefox-linux.png
index 112fd996eb..84ff82fad5 100644
Binary files a/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/toggle.scss b/core/src/components/toggle/toggle.scss
index 6fd138d329..ef10a95178 100644
--- a/core/src/components/toggle/toggle.scss
+++ b/core/src/components/toggle/toggle.scss
@@ -1,4 +1,5 @@
 @import "../../themes/ionic.globals";
+@import "./toggle.vars.scss";
 
 // Toggle
 // --------------------------------------------------
@@ -120,6 +121,10 @@ input {
   overflow: hidden;
 }
 
+:host(.in-item:not(.legacy-toggle)) .label-text-wrapper {
+  @include margin($toggle-item-label-margin-top, null, $toggle-item-label-margin-bottom, null);
+}
+
 /**
  * If no label text is placed into the slot
  * then the element should be hidden otherwise
@@ -170,7 +175,7 @@ input {
    * the input should be on the end
    * when the label sits at the start.
    */
-  @include margin(0, $form-control-label-margin, 0, 0);
+  @include margin(null, $form-control-label-margin, null, 0);
 }
 
 // Toggle Label Placement - End
@@ -190,7 +195,7 @@ input {
  * when the label sits at the end.
  */
 :host(.toggle-label-placement-end) .label-text-wrapper {
-  @include margin(0, 0, 0, $form-control-label-margin);
+  @include margin(null, 0, null, $form-control-label-margin);
 }
 
 // Input Label Placement - Fixed
@@ -202,7 +207,7 @@ input {
    * the input should be on the end
    * when the label sits at the start.
    */
-  @include margin(0, $form-control-label-margin, 0, 0);
+  @include margin(null, $form-control-label-margin, null, 0);
 }
 
 /**
diff --git a/core/src/components/toggle/toggle.tsx b/core/src/components/toggle/toggle.tsx
index bf8779fa69..bc5316e7ad 100644
--- a/core/src/components/toggle/toggle.tsx
+++ b/core/src/components/toggle/toggle.tsx
@@ -1,19 +1,18 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Prop, State, Watch, h } from '@stencil/core';
-// TODO(FW-2845) - Use @utils/forms and @utils/logging when https://github.com/ionic-team/stencil/issues/3826 is resolved
+import type { LegacyFormController } from '@utils/forms';
+import { createLegacyFormController } from '@utils/forms';
+import { getAriaLabel, renderHiddenInput, inheritAriaAttributes } from '@utils/helpers';
+import type { Attributes } from '@utils/helpers';
+import { printIonWarning } from '@utils/logging';
+import { hapticSelection } from '@utils/native/haptic';
+import { isRTL } from '@utils/rtl';
+import { createColorClasses, hostContext } from '@utils/theme';
 import { checkmarkOutline, removeOutline, ellipseOutline } from 'ionicons/icons';
 
 import { config } from '../../global/config';
 import { getIonMode } from '../../global/ionic-global';
 import type { Color, Gesture, GestureDetail, Mode, StyleEventDetail } from '../../interface';
-import type { LegacyFormController } from '../../utils/forms';
-import { createLegacyFormController } from '../../utils/forms';
-import { getAriaLabel, renderHiddenInput, inheritAriaAttributes } from '../../utils/helpers';
-import type { Attributes } from '../../utils/helpers';
-import { printIonWarning } from '../../utils/logging';
-import { hapticSelection } from '../../utils/native/haptic';
-import { isRTL } from '../../utils/rtl';
-import { createColorClasses, hostContext } from '../../utils/theme';
 
 import type { ToggleChangeEventDetail } from './toggle-interface';
 
diff --git a/core/src/components/toggle/toggle.vars.scss b/core/src/components/toggle/toggle.vars.scss
new file mode 100644
index 0000000000..629eb5048b
--- /dev/null
+++ b/core/src/components/toggle/toggle.vars.scss
@@ -0,0 +1,5 @@
+/// @prop - Top margin of toggle's label when in an item
+$toggle-item-label-margin-top: 10px !default;
+
+/// @prop - Bottom margin of toggle's label when in an item
+$toggle-item-label-margin-bottom: 10px !default;
\ No newline at end of file
diff --git a/core/src/components/toolbar/toolbar.tsx b/core/src/components/toolbar/toolbar.tsx
index 4e5e3f3d06..0999d40427 100644
--- a/core/src/components/toolbar/toolbar.tsx
+++ b/core/src/components/toolbar/toolbar.tsx
@@ -1,9 +1,9 @@
 import type { ComponentInterface } from '@stencil/core';
 import { Component, Element, Host, Listen, Prop, forceUpdate, h } from '@stencil/core';
+import { createColorClasses, hostContext } from '@utils/theme';
 
 import { getIonMode } from '../../global/ionic-global';
 import type { Color, CssClassMap, StyleEventDetail } from '../../interface';
-import { createColorClasses, hostContext } from '../../utils/theme';
 
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
diff --git a/core/src/themes/test/css-variables/index.html b/core/src/themes/test/css-variables/index.html
index c33c2a3ad9..97ce01d8ef 100644
--- a/core/src/themes/test/css-variables/index.html
+++ b/core/src/themes/test/css-variables/index.html
@@ -699,33 +699,57 @@
                 </p>
                 <p>
                   <ion-segment value="all">
-                    <ion-segment-button value="all">All</ion-segment-button>
-                    <ion-segment-button value="favorites">Favorites</ion-segment-button>
+                    <ion-segment-button value="all">
+                      <ion-label>All</ion-label>
+                    </ion-segment-button>
+                    <ion-segment-button value="favorites">
+                      <ion-label>Favorites</ion-label>
+                    </ion-segment-button>
                   </ion-segment>
 
                   <ion-segment color="primary" value="all">
-                    <ion-segment-button value="all">All</ion-segment-button>
-                    <ion-segment-button value="favorites">Favorites</ion-segment-button>
+                    <ion-segment-button value="all">
+                      <ion-label>All</ion-label>
+                    </ion-segment-button>
+                    <ion-segment-button value="favorites">
+                      <ion-label>Favorites</ion-label>
+                    </ion-segment-button>
                   </ion-segment>
 
                   <ion-segment color="secondary" value="all">
-                    <ion-segment-button value="all">All</ion-segment-button>
-                    <ion-segment-button value="favorites">Favorites</ion-segment-button>
+                    <ion-segment-button value="all">
+                      <ion-label>All</ion-label>
+                    </ion-segment-button>
+                    <ion-segment-button value="favorites">
+                      <ion-label>Favorites</ion-label>
+                    </ion-segment-button>
                   </ion-segment>
 
                   <ion-segment color="success" value="all">
-                    <ion-segment-button value="all">All</ion-segment-button>
-                    <ion-segment-button value="favorites">Favorites</ion-segment-button>
+                    <ion-segment-button value="all">
+                      <ion-label>All</ion-label>
+                    </ion-segment-button>
+                    <ion-segment-button value="favorites">
+                      <ion-label>Favorites</ion-label>
+                    </ion-segment-button>
                   </ion-segment>
 
                   <ion-segment color="light" value="all">
-                    <ion-segment-button value="all">All</ion-segment-button>
-                    <ion-segment-button value="favorites">Favorites</ion-segment-button>
+                    <ion-segment-button value="all">
+                      <ion-label>All</ion-label>
+                    </ion-segment-button>
+                    <ion-segment-button value="favorites">
+                      <ion-label>Favorites</ion-label>
+                    </ion-segment-button>
                   </ion-segment>
 
                   <ion-segment color="medium" value="all">
-                    <ion-segment-button value="all">All</ion-segment-button>
-                    <ion-segment-button value="favorites">Favorites</ion-segment-button>
+                    <ion-segment-button value="all">
+                      <ion-label>All</ion-label>
+                    </ion-segment-button>
+                    <ion-segment-button value="favorites">
+                      <ion-label>Favorites</ion-label>
+                    </ion-segment-button>
                   </ion-segment>
                 </p>
               </section>
diff --git a/core/src/utils/forms/index.ts b/core/src/utils/forms/index.ts
index d7c63744bd..f219f3978a 100644
--- a/core/src/utils/forms/index.ts
+++ b/core/src/utils/forms/index.ts
@@ -1 +1,2 @@
 export * from './form-controller';
+export * from './notch-controller';
diff --git a/core/src/utils/forms/notch-controller.ts b/core/src/utils/forms/notch-controller.ts
new file mode 100644
index 0000000000..0ee2a2805e
--- /dev/null
+++ b/core/src/utils/forms/notch-controller.ts
@@ -0,0 +1,177 @@
+import { win } from '@utils/browser';
+import { raf } from '@utils/helpers';
+
+type NotchElement = HTMLIonInputElement | HTMLIonSelectElement | HTMLIonTextareaElement;
+
+/**
+ * A utility to calculate the size of an outline notch
+ * width relative to the content passed. This is used in
+ * components such as `ion-select` with `fill="outline"`
+ * where we need to pass slotted HTML content. This is not
+ * needed when rendering plaintext content because we can
+ * render the plaintext again hidden with `opacity: 0` inside
+ * of the notch. As a result we can rely on the intrinsic size
+ * of the element to correctly compute the notch width. We
+ * cannot do this with slotted content because we cannot project
+ * it into 2 places at once.
+ *
+ * @internal
+ * @param el: The host element
+ * @param getNotchSpacerEl: A function that returns a reference to the notch spacer element inside of the component template.
+ * @param getLabelSlot: A function that returns a reference to the slotted content.
+ */
+export const createNotchController = (
+  el: NotchElement,
+  getNotchSpacerEl: () => HTMLElement | undefined,
+  getLabelSlot: () => Element | null
+): NotchController => {
+  let notchVisibilityIO: IntersectionObserver | undefined;
+
+  const needsExplicitNotchWidth = () => {
+    const notchSpacerEl = getNotchSpacerEl();
+
+    if (
+      /**
+       * If the notch is not being used
+       * then we do not need to set the notch width.
+       */
+      notchSpacerEl === undefined ||
+      /**
+       * If either the label property is being
+       * used or the label slot is not defined,
+       * then we do not need to estimate the notch width.
+       */
+      el.label !== undefined ||
+      getLabelSlot() === null
+    ) {
+      return false;
+    }
+
+    return true;
+  };
+
+  const calculateNotchWidth = () => {
+    if (needsExplicitNotchWidth()) {
+      /**
+       * Run this the frame after
+       * the browser has re-painted the host element.
+       * Otherwise, the label element may have a width
+       * of 0 and the IntersectionObserver will be used.
+       */
+      raf(() => {
+        setNotchWidth();
+      });
+    }
+  };
+
+  /**
+   * When using a label prop we can render
+   * the label value inside of the notch and
+   * let the browser calculate the size of the notch.
+   * However, we cannot render the label slot in multiple
+   * places so we need to manually calculate the notch dimension
+   * based on the size of the slotted content.
+   *
+   * This function should only be used to set the notch width
+   * on slotted label content. The notch width for label prop
+   * content is automatically calculated based on the
+   * intrinsic size of the label text.
+   */
+  const setNotchWidth = () => {
+    const notchSpacerEl = getNotchSpacerEl();
+
+    if (notchSpacerEl === undefined) {
+      return;
+    }
+
+    if (!needsExplicitNotchWidth()) {
+      notchSpacerEl.style.removeProperty('width');
+      return;
+    }
+
+    const width = getLabelSlot()!.scrollWidth;
+
+    if (
+      /**
+       * If the computed width of the label is 0
+       * and notchSpacerEl's offsetParent is null
+       * then that means the element is hidden.
+       * As a result, we need to wait for the element
+       * to become visible before setting the notch width.
+       *
+       * We do not check el.offsetParent because
+       * that can be null if the host element has
+       * position: fixed applied to it.
+       * notchSpacerEl does not have position: fixed.
+       */
+      width === 0 &&
+      notchSpacerEl.offsetParent === null &&
+      win !== undefined &&
+      'IntersectionObserver' in win
+    ) {
+      /**
+       * If there is an IO already attached
+       * then that will update the notch
+       * once the element becomes visible.
+       * As a result, there is no need to create
+       * another one.
+       */
+      if (notchVisibilityIO !== undefined) {
+        return;
+      }
+
+      const io = (notchVisibilityIO = new IntersectionObserver(
+        (ev) => {
+          /**
+           * If the element is visible then we
+           * can try setting the notch width again.
+           */
+          if (ev[0].intersectionRatio === 1) {
+            setNotchWidth();
+            io.disconnect();
+            notchVisibilityIO = undefined;
+          }
+        },
+        /**
+         * Set the root to be the host element
+         * This causes the IO callback
+         * to be fired in WebKit as soon as the element
+         * is visible. If we used the default root value
+         * then WebKit would only fire the IO callback
+         * after any animations (such as a modal transition)
+         * finished, and there would potentially be a flicker.
+         */
+        { threshold: 0.01, root: el }
+      ));
+
+      io.observe(notchSpacerEl);
+      return;
+    }
+
+    /**
+     * If the element is visible then we can set the notch width.
+     * The notch is only visible when the label is scaled,
+     * which is why we multiply the width by 0.75 as this is
+     * the same amount the label element is scaled by in the host CSS.
+     * (For ion-select, see $select-floating-label-scale in select.vars.scss).
+     */
+    notchSpacerEl.style.setProperty('width', `${width * 0.75}px`);
+  };
+
+  const destroy = () => {
+    if (notchVisibilityIO) {
+      notchVisibilityIO.disconnect();
+      notchVisibilityIO = undefined;
+    }
+  };
+
+  return {
+    calculateNotchWidth,
+    destroy,
+  };
+};
+
+export type NotchController = {
+  calculateNotchWidth: () => void;
+  destroy: () => void;
+};
diff --git a/core/src/utils/overlays.ts b/core/src/utils/overlays.ts
index 3f8c83d59d..7bde820990 100644
--- a/core/src/utils/overlays.ts
+++ b/core/src/utils/overlays.ts
@@ -240,8 +240,11 @@ const trapKeyboardFocus = (ev: Event, doc: Document) => {
       /**
        * If the target is inside the wrapper, let the browser
        * focus as normal and keep a log of the last focused element.
+       * Additionally, if the backdrop was tapped we should not
+       * move focus back inside the wrapper as that could cause
+       * an interactive elements focus state to activate.
        */
-      if (overlayWrapper.contains(target)) {
+      if (overlayWrapper.contains(target) || target === overlayRoot.querySelector('ion-backdrop')) {
         lastOverlay.lastFocus = target;
       } else {
         /**
diff --git a/core/src/utils/slot-mutation-controller.ts b/core/src/utils/slot-mutation-controller.ts
new file mode 100644
index 0000000000..663b781a36
--- /dev/null
+++ b/core/src/utils/slot-mutation-controller.ts
@@ -0,0 +1,118 @@
+import { win } from '@utils/browser';
+import { raf } from '@utils/helpers';
+/**
+ * Used to update a scoped component that uses emulated slots. This fires when
+ * content is passed into the slot or when the content inside of a slot changes.
+ * This is not needed for components using native slots in the Shadow DOM.
+ * @internal
+ * @param el The host element to observe
+ * @param slotName mutationCallback will fire when nodes on this slot change
+ * @param mutationCallback The callback to fire whenever the slotted content changes
+ */
+export const createSlotMutationController = (
+  el: HTMLElement,
+  slotName: string,
+  mutationCallback: () => void
+): SlotMutationController => {
+  let hostMutationObserver: MutationObserver | undefined;
+  let slottedContentMutationObserver: MutationObserver | undefined;
+
+  if (win !== undefined && 'MutationObserver' in win) {
+    hostMutationObserver = new MutationObserver((entries) => {
+      for (const entry of entries) {
+        for (const node of entry.addedNodes) {
+          /**
+           * Check to see if the added node
+           *  is our slotted content.
+           */
+          if (node.nodeType === Node.ELEMENT_NODE && (node as HTMLElement).slot === slotName) {
+            /**
+             * If so, we want to watch the slotted
+             * content itself for changes. This lets us
+             * detect when content inside of the slot changes.
+             */
+            mutationCallback();
+
+            /**
+             * Adding the listener in an raf
+             * waits until Stencil moves the slotted element
+             * into the correct place in the event that
+             * slotted content is being added.
+             */
+            raf(() => watchForSlotChange(node as HTMLElement));
+            return;
+          }
+        }
+      }
+    });
+
+    hostMutationObserver.observe(el, {
+      childList: true,
+    });
+  }
+
+  /**
+   * Listen for changes inside of the slotted content.
+   * We can listen for subtree changes here to be
+   * informed of text within the slotted content
+   * changing. Doing this on the host is possible
+   * but it is much more expensive to do because
+   * it also listens for changes to the internals
+   * of the component.
+   */
+  const watchForSlotChange = (slottedEl: HTMLElement) => {
+    if (slottedContentMutationObserver) {
+      slottedContentMutationObserver.disconnect();
+      slottedContentMutationObserver = undefined;
+    }
+
+    slottedContentMutationObserver = new MutationObserver((entries) => {
+      mutationCallback();
+
+      for (const entry of entries) {
+        for (const node of entry.removedNodes) {
+          /**
+           * If the element was removed then we
+           * need to destroy the MutationObserver
+           * so the element can be garbage collected.
+           */
+          if (node.nodeType === Node.ELEMENT_NODE && (node as HTMLElement).slot === slotName) {
+            destroySlottedContentObserver();
+          }
+        }
+      }
+    });
+
+    /**
+     * Listen for changes inside of the element
+     * as well as anything deep in the tree.
+     * We listen on the parentElement so that we can
+     * detect when slotted element itself is removed.
+     */
+    slottedContentMutationObserver.observe(slottedEl.parentElement ?? slottedEl, { subtree: true, childList: true });
+  };
+
+  const destroy = () => {
+    if (hostMutationObserver) {
+      hostMutationObserver.disconnect();
+      hostMutationObserver = undefined;
+    }
+
+    destroySlottedContentObserver();
+  };
+
+  const destroySlottedContentObserver = () => {
+    if (slottedContentMutationObserver) {
+      slottedContentMutationObserver.disconnect();
+      slottedContentMutationObserver = undefined;
+    }
+  };
+
+  return {
+    destroy,
+  };
+};
+
+export type SlotMutationController = {
+  destroy: () => void;
+};
diff --git a/core/src/utils/test/overlays/overlays.e2e.ts b/core/src/utils/test/overlays/overlays.e2e.ts
index 5de399fb41..3d112413b4 100644
--- a/core/src/utils/test/overlays/overlays.e2e.ts
+++ b/core/src/utils/test/overlays/overlays.e2e.ts
@@ -106,9 +106,8 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
     });
   });
 
-  // TODO FW-3536
-  test.describe.skip(title('overlays: focus'), () => {
-    test('should not select a hidden focusable element', async ({ page, browserName }) => {
+  test.describe(title('overlays: focus'), () => {
+    test('should not select a hidden focusable element', async ({ page, pageUtils }) => {
       await page.setContent(
         `
         <style>
@@ -131,19 +130,18 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
       const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
       const presentButton = page.locator('ion-button#open-modal');
       const visibleButton = page.locator('ion-button#visible');
-      const tabKey = browserName === 'webkit' ? 'Alt+Tab' : 'Tab';
 
       await presentButton.click();
       await ionModalDidPresent.next();
 
-      await page.keyboard.press(tabKey);
+      await pageUtils.pressKeys('Tab');
       await expect(visibleButton).toBeFocused();
 
-      await page.keyboard.press(tabKey);
+      await pageUtils.pressKeys('Tab');
       await expect(visibleButton).toBeFocused();
     });
 
-    test('should not select a disabled focusable element', async ({ page, browserName }) => {
+    test('should not select a disabled focusable element', async ({ page, pageUtils }) => {
       await page.setContent(
         `
         <ion-button id="open-modal">Show Modal</ion-button>
@@ -160,19 +158,18 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
       const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
       const presentButton = page.locator('ion-button#open-modal');
       const activeButton = page.locator('ion-button#active');
-      const tabKey = browserName === 'webkit' ? 'Alt+Tab' : 'Tab';
 
       await presentButton.click();
       await ionModalDidPresent.next();
 
-      await page.keyboard.press(tabKey);
+      await pageUtils.pressKeys('Tab');
       await expect(activeButton).toBeFocused();
 
-      await page.keyboard.press(tabKey);
+      await pageUtils.pressKeys('Tab');
       await expect(activeButton).toBeFocused();
     });
 
-    test('should select a focusable element with disabled="false"', async ({ page, browserName }) => {
+    test('should select a focusable element with disabled="false"', async ({ page, pageUtils }) => {
       await page.setContent(
         `
         <ion-button id="open-modal">Show Modal</ion-button>
@@ -190,19 +187,18 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
       const presentButton = page.locator('ion-button#open-modal');
       const disabledFalseButton = page.locator('ion-button#disabled-false');
       const activeButton = page.locator('ion-button#active');
-      const tabKey = browserName === 'webkit' ? 'Alt+Tab' : 'Tab';
 
       await presentButton.click();
       await ionModalDidPresent.next();
 
-      await page.keyboard.press(tabKey);
+      await pageUtils.pressKeys('Tab');
       await expect(disabledFalseButton).toBeFocused();
 
-      await page.keyboard.press(tabKey);
+      await pageUtils.pressKeys('Tab');
       await expect(activeButton).toBeFocused();
 
       // Loop back to beginning of overlay
-      await page.keyboard.press(tabKey);
+      await pageUtils.pressKeys('Tab');
       await expect(disabledFalseButton).toBeFocused();
     });
 
diff --git a/core/stencil.config.ts b/core/stencil.config.ts
index 52f7146406..44157e62d9 100644
--- a/core/stencil.config.ts
+++ b/core/stencil.config.ts
@@ -184,8 +184,8 @@ export const config: Config = {
     // },
     angularOutputTarget({
       componentCorePackage: '@ionic/core',
-      directivesProxyFile: '../angular/src/directives/proxies.ts',
-      directivesArrayFile: '../angular/src/directives/proxies-list.ts',
+      directivesProxyFile: '../packages/angular/src/directives/proxies.ts',
+      directivesArrayFile: '../packages/angular/src/directives/proxies-list.ts',
       excludeComponents: [
         // overlays that accept user components
         'ion-modal',
diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md
index 71e3536dab..dcee9db4c7 100644
--- a/docs/CHANGELOG.md
+++ b/docs/CHANGELOG.md
@@ -3,6 +3,38 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [7.1.3](https://github.com/ionic-team/ionic-framework/compare/v7.1.2...v7.1.3) (2023-07-12)
+
+**Note:** Version bump only for package @ionic/docs
+
+
+
+
+
+## [7.1.2](https://github.com/ionic-team/ionic-framework/compare/v7.1.1...v7.1.2) (2023-07-06)
+
+**Note:** Version bump only for package @ionic/docs
+
+
+
+
+
+## [7.1.1](https://github.com/ionic-team/ionic-framework/compare/v7.1.0...v7.1.1) (2023-06-26)
+
+**Note:** Version bump only for package @ionic/docs
+
+
+
+
+
+# [7.1.0](https://github.com/ionic-team/ionic-framework/compare/v7.0.14...v7.1.0) (2023-06-21)
+
+**Note:** Version bump only for package @ionic/docs
+
+
+
+
+
 ## [7.0.14](https://github.com/ionic-team/ionic-framework/compare/v7.0.13...v7.0.14) (2023-06-15)
 
 **Note:** Version bump only for package @ionic/docs
diff --git a/docs/package-lock.json b/docs/package-lock.json
index 6d7fbb9dce..be1e9b3dee 100644
--- a/docs/package-lock.json
+++ b/docs/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@ionic/docs",
-  "version": "7.0.14",
+  "version": "7.1.3",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/docs",
-      "version": "7.0.14",
+      "version": "7.1.3",
       "license": "MIT"
     }
   }
diff --git a/docs/package.json b/docs/package.json
index ac5d8801fa..e56cd60603 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/docs",
-  "version": "7.0.14",
+  "version": "7.1.3",
   "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 15c4dc6d9e..fb3102dea1 100644
--- a/lerna.json
+++ b/lerna.json
@@ -2,8 +2,7 @@
   "packages": [
     "core",
     "docs",
-    "angular",
     "packages/*"
   ],
-  "version": "7.0.14"
+  "version": "7.1.3"
 }
diff --git a/packages/angular-server/CHANGELOG.md b/packages/angular-server/CHANGELOG.md
index 73b01b3f60..bed69aad10 100644
--- a/packages/angular-server/CHANGELOG.md
+++ b/packages/angular-server/CHANGELOG.md
@@ -3,6 +3,38 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [7.1.3](https://github.com/ionic-team/ionic-framework/compare/v7.1.2...v7.1.3) (2023-07-12)
+
+**Note:** Version bump only for package @ionic/angular-server
+
+
+
+
+
+## [7.1.2](https://github.com/ionic-team/ionic-framework/compare/v7.1.1...v7.1.2) (2023-07-06)
+
+**Note:** Version bump only for package @ionic/angular-server
+
+
+
+
+
+## [7.1.1](https://github.com/ionic-team/ionic-framework/compare/v7.1.0...v7.1.1) (2023-06-26)
+
+**Note:** Version bump only for package @ionic/angular-server
+
+
+
+
+
+# [7.1.0](https://github.com/ionic-team/ionic-framework/compare/v7.0.14...v7.1.0) (2023-06-21)
+
+**Note:** Version bump only for package @ionic/angular-server
+
+
+
+
+
 ## [7.0.14](https://github.com/ionic-team/ionic-framework/compare/v7.0.13...v7.0.14) (2023-06-15)
 
 **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 6415217b2e..ce1c56596c 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.0.14",
+  "version": "7.1.3",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/angular-server",
-      "version": "7.0.14",
+      "version": "7.1.3",
       "license": "MIT",
       "dependencies": {
-        "@ionic/core": "^7.0.14"
+        "@ionic/core": "^7.1.3"
       },
       "devDependencies": {
         "@angular-eslint/eslint-plugin": "^14.0.0",
@@ -1060,19 +1060,19 @@
       "dev": true
     },
     "node_modules/@ionic/core": {
-      "version": "7.0.14",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.0.14.tgz",
-      "integrity": "sha512-M0su64amw6HsZwsmWuHE4Wr2mChQdvBI7JKZXYCrF2Acn7GTD5cjMw6o1cYzwzf0PEap/RQ0y4paU9lO4Lu+lA==",
+      "version": "7.1.3",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.1.3.tgz",
+      "integrity": "sha512-Wg3jBOoVpoHlTuKxcFa5gX9rYtI8FI6zmwb7ERdk6B9Uvk4KDgJLc1MnZK8IVb6RWTg1iipzBRdU40cX09bR4w==",
       "dependencies": {
         "@stencil/core": "^3.4.0",
-        "ionicons": "^7.1.0",
+        "ionicons": "7.1.0",
         "tslib": "^2.1.0"
       }
     },
     "node_modules/@ionic/core/node_modules/@stencil/core": {
-      "version": "3.4.0",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-3.4.0.tgz",
-      "integrity": "sha512-kEtPtV6QegME8YgMjWrhS7KktItbhqOpAuK9aXypDdI/7bLU9iM/4DtnQGWY/DARBophk+XRBfNXcE62Bmi0dw==",
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-3.4.1.tgz",
+      "integrity": "sha512-7rjOmM0W9K5op2gtOQRLERGH1155rv2fm6ppxOzYqqG8ISct4m9skp5XgUBYPu+GSPsJFdRuCIQs0IuVsG/7+g==",
       "bin": {
         "stencil": "bin/stencil"
       },
@@ -7342,19 +7342,19 @@
       "dev": true
     },
     "@ionic/core": {
-      "version": "7.0.14",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.0.14.tgz",
-      "integrity": "sha512-M0su64amw6HsZwsmWuHE4Wr2mChQdvBI7JKZXYCrF2Acn7GTD5cjMw6o1cYzwzf0PEap/RQ0y4paU9lO4Lu+lA==",
+      "version": "7.1.3",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.1.3.tgz",
+      "integrity": "sha512-Wg3jBOoVpoHlTuKxcFa5gX9rYtI8FI6zmwb7ERdk6B9Uvk4KDgJLc1MnZK8IVb6RWTg1iipzBRdU40cX09bR4w==",
       "requires": {
         "@stencil/core": "^3.4.0",
-        "ionicons": "^7.1.0",
+        "ionicons": "7.1.0",
         "tslib": "^2.1.0"
       },
       "dependencies": {
         "@stencil/core": {
-          "version": "3.4.0",
-          "resolved": "https://registry.npmjs.org/@stencil/core/-/core-3.4.0.tgz",
-          "integrity": "sha512-kEtPtV6QegME8YgMjWrhS7KktItbhqOpAuK9aXypDdI/7bLU9iM/4DtnQGWY/DARBophk+XRBfNXcE62Bmi0dw=="
+          "version": "3.4.1",
+          "resolved": "https://registry.npmjs.org/@stencil/core/-/core-3.4.1.tgz",
+          "integrity": "sha512-7rjOmM0W9K5op2gtOQRLERGH1155rv2fm6ppxOzYqqG8ISct4m9skp5XgUBYPu+GSPsJFdRuCIQs0IuVsG/7+g=="
         }
       }
     },
diff --git a/packages/angular-server/package.json b/packages/angular-server/package.json
index 537cdd9b66..59219f93fb 100644
--- a/packages/angular-server/package.json
+++ b/packages/angular-server/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/angular-server",
-  "version": "7.0.14",
+  "version": "7.1.3",
   "description": "Angular SSR Module for Ionic",
   "keywords": [
     "ionic",
@@ -61,6 +61,6 @@
   },
   "prettier": "@ionic/prettier-config",
   "dependencies": {
-    "@ionic/core": "^7.0.14"
+    "@ionic/core": "^7.1.3"
   }
 }
diff --git a/angular/.eslintignore b/packages/angular/.eslintignore
similarity index 100%
rename from angular/.eslintignore
rename to packages/angular/.eslintignore
diff --git a/angular/.eslintrc.json b/packages/angular/.eslintrc.json
similarity index 100%
rename from angular/.eslintrc.json
rename to packages/angular/.eslintrc.json
diff --git a/angular/.prettierignore b/packages/angular/.prettierignore
similarity index 100%
rename from angular/.prettierignore
rename to packages/angular/.prettierignore
diff --git a/angular/CHANGELOG.md b/packages/angular/CHANGELOG.md
similarity index 95%
rename from angular/CHANGELOG.md
rename to packages/angular/CHANGELOG.md
index 9caf4789f6..6ec0359dad 100644
--- a/angular/CHANGELOG.md
+++ b/packages/angular/CHANGELOG.md
@@ -3,6 +3,50 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [7.1.3](https://github.com/ionic-team/ionic-framework/compare/v7.1.2...v7.1.3) (2023-07-12)
+
+**Note:** Version bump only for package @ionic/angular
+
+
+
+
+
+## [7.1.2](https://github.com/ionic-team/ionic-framework/compare/v7.1.1...v7.1.2) (2023-07-06)
+
+**Note:** Version bump only for package @ionic/angular
+
+
+
+
+
+## [7.1.1](https://github.com/ionic-team/ionic-framework/compare/v7.1.0...v7.1.1) (2023-06-26)
+
+**Note:** Version bump only for package @ionic/angular
+
+
+
+
+
+# [7.1.0](https://github.com/ionic-team/ionic-framework/compare/v7.0.14...v7.1.0) (2023-06-21)
+
+
+### Bug Fixes
+
+* **angular:** tabs supports conditional slot bindings ([#27582](https://github.com/ionic-team/ionic-framework/issues/27582)) ([d20bea5](https://github.com/ionic-team/ionic-framework/commit/d20bea561c362eacd250cdedbc9b79159eb2c95f)), closes [#19484](https://github.com/ionic-team/ionic-framework/issues/19484)
+
+
+### Features
+
+* **range:** add label prop ([#27408](https://github.com/ionic-team/ionic-framework/issues/27408)) ([368add2](https://github.com/ionic-team/ionic-framework/commit/368add2a5ca3820a1f9623c96d29bcccfa693fdc))
+* return if the pop on NavController was successful ([#27404](https://github.com/ionic-team/ionic-framework/issues/27404)) ([e80f0b2](https://github.com/ionic-team/ionic-framework/commit/e80f0b240968de0d642463e95a35adf8dbffd2e1)), closes [#27403](https://github.com/ionic-team/ionic-framework/issues/27403)
+* **segment, segment-button:** update segment value property to accept numbers ([#27222](https://github.com/ionic-team/ionic-framework/issues/27222)) ([ec95ae5](https://github.com/ionic-team/ionic-framework/commit/ec95ae5cd38e3d2b9ec9fdbc9e237fa1241f7a4e)), closes [#27221](https://github.com/ionic-team/ionic-framework/issues/27221)
+* **segment:** display segment as a grid and add an ellipsis to overflowing text in a segment button  ([#27457](https://github.com/ionic-team/ionic-framework/issues/27457)) ([448e63f](https://github.com/ionic-team/ionic-framework/commit/448e63fef0aca603214cb357dec37e1db2a0f052)), closes [#16532](https://github.com/ionic-team/ionic-framework/issues/16532)
+* **select:** add props to customize toggle icons ([#27648](https://github.com/ionic-team/ionic-framework/issues/27648)) ([95e28b6](https://github.com/ionic-team/ionic-framework/commit/95e28b6629843af7dce62f20bc8e31adfb391990)), closes [#17248](https://github.com/ionic-team/ionic-framework/issues/17248)
+
+
+
+
+
 ## [7.0.14](https://github.com/ionic-team/ionic-framework/compare/v7.0.13...v7.0.14) (2023-06-15)
 
 **Note:** Version bump only for package @ionic/angular
diff --git a/angular/README.md b/packages/angular/README.md
similarity index 100%
rename from angular/README.md
rename to packages/angular/README.md
diff --git a/angular/ng-package.json b/packages/angular/ng-package.json
similarity index 100%
rename from angular/ng-package.json
rename to packages/angular/ng-package.json
diff --git a/angular/package-lock.json b/packages/angular/package-lock.json
similarity index 99%
rename from angular/package-lock.json
rename to packages/angular/package-lock.json
index b30b44c266..76d4818082 100644
--- a/angular/package-lock.json
+++ b/packages/angular/package-lock.json
@@ -1,15 +1,15 @@
 {
   "name": "@ionic/angular",
-  "version": "7.0.14",
+  "version": "7.1.3",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/angular",
-      "version": "7.0.14",
+      "version": "7.1.3",
       "license": "MIT",
       "dependencies": {
-        "@ionic/core": "^7.0.14",
+        "@ionic/core": "^7.1.3",
         "ionicons": "^7.0.0",
         "jsonc-parser": "^3.0.0",
         "tslib": "^2.3.0"
@@ -1227,19 +1227,19 @@
       "dev": true
     },
     "node_modules/@ionic/core": {
-      "version": "7.0.14",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.0.14.tgz",
-      "integrity": "sha512-M0su64amw6HsZwsmWuHE4Wr2mChQdvBI7JKZXYCrF2Acn7GTD5cjMw6o1cYzwzf0PEap/RQ0y4paU9lO4Lu+lA==",
+      "version": "7.1.3",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.1.3.tgz",
+      "integrity": "sha512-Wg3jBOoVpoHlTuKxcFa5gX9rYtI8FI6zmwb7ERdk6B9Uvk4KDgJLc1MnZK8IVb6RWTg1iipzBRdU40cX09bR4w==",
       "dependencies": {
         "@stencil/core": "^3.4.0",
-        "ionicons": "^7.1.0",
+        "ionicons": "7.1.0",
         "tslib": "^2.1.0"
       }
     },
     "node_modules/@ionic/core/node_modules/@stencil/core": {
-      "version": "3.4.0",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-3.4.0.tgz",
-      "integrity": "sha512-kEtPtV6QegME8YgMjWrhS7KktItbhqOpAuK9aXypDdI/7bLU9iM/4DtnQGWY/DARBophk+XRBfNXcE62Bmi0dw==",
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-3.4.1.tgz",
+      "integrity": "sha512-7rjOmM0W9K5op2gtOQRLERGH1155rv2fm6ppxOzYqqG8ISct4m9skp5XgUBYPu+GSPsJFdRuCIQs0IuVsG/7+g==",
       "bin": {
         "stencil": "bin/stencil"
       },
@@ -8104,19 +8104,19 @@
       "dev": true
     },
     "@ionic/core": {
-      "version": "7.0.14",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.0.14.tgz",
-      "integrity": "sha512-M0su64amw6HsZwsmWuHE4Wr2mChQdvBI7JKZXYCrF2Acn7GTD5cjMw6o1cYzwzf0PEap/RQ0y4paU9lO4Lu+lA==",
+      "version": "7.1.3",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.1.3.tgz",
+      "integrity": "sha512-Wg3jBOoVpoHlTuKxcFa5gX9rYtI8FI6zmwb7ERdk6B9Uvk4KDgJLc1MnZK8IVb6RWTg1iipzBRdU40cX09bR4w==",
       "requires": {
         "@stencil/core": "^3.4.0",
-        "ionicons": "^7.1.0",
+        "ionicons": "7.1.0",
         "tslib": "^2.1.0"
       },
       "dependencies": {
         "@stencil/core": {
-          "version": "3.4.0",
-          "resolved": "https://registry.npmjs.org/@stencil/core/-/core-3.4.0.tgz",
-          "integrity": "sha512-kEtPtV6QegME8YgMjWrhS7KktItbhqOpAuK9aXypDdI/7bLU9iM/4DtnQGWY/DARBophk+XRBfNXcE62Bmi0dw=="
+          "version": "3.4.1",
+          "resolved": "https://registry.npmjs.org/@stencil/core/-/core-3.4.1.tgz",
+          "integrity": "sha512-7rjOmM0W9K5op2gtOQRLERGH1155rv2fm6ppxOzYqqG8ISct4m9skp5XgUBYPu+GSPsJFdRuCIQs0IuVsG/7+g=="
         }
       }
     },
diff --git a/angular/package.json b/packages/angular/package.json
similarity index 98%
rename from angular/package.json
rename to packages/angular/package.json
index 222f6f34ea..aaa7db29df 100644
--- a/angular/package.json
+++ b/packages/angular/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/angular",
-  "version": "7.0.14",
+  "version": "7.1.3",
   "description": "Angular specific wrappers for @ionic/core",
   "keywords": [
     "ionic",
@@ -47,7 +47,7 @@
     }
   },
   "dependencies": {
-    "@ionic/core": "^7.0.14",
+    "@ionic/core": "^7.1.3",
     "ionicons": "^7.0.0",
     "jsonc-parser": "^3.0.0",
     "tslib": "^2.3.0"
diff --git a/angular/scripts/README.md b/packages/angular/scripts/README.md
similarity index 100%
rename from angular/scripts/README.md
rename to packages/angular/scripts/README.md
diff --git a/angular/scripts/build-core.js b/packages/angular/scripts/build-core.js
similarity index 95%
rename from angular/scripts/build-core.js
rename to packages/angular/scripts/build-core.js
index b0933cf9e3..c8df07ee19 100644
--- a/angular/scripts/build-core.js
+++ b/packages/angular/scripts/build-core.js
@@ -5,7 +5,7 @@ const spawn = require('child_process').spawn;
 const typescriptPath = path.join(__dirname, '..', 'node_modules', '.bin');
 
 function copyCSS() {
-  const src = path.join(__dirname, '..', '..', 'core', 'css');
+  const src = path.join(__dirname, '..', '..', '..', 'core', 'css');
   const dst = path.join(__dirname, '..','dist', 'css');
 
   fs.removeSync(dst);
diff --git a/angular/scripts/clean-generated.js b/packages/angular/scripts/clean-generated.js
similarity index 100%
rename from angular/scripts/clean-generated.js
rename to packages/angular/scripts/clean-generated.js
diff --git a/angular/scripts/clean.js b/packages/angular/scripts/clean.js
similarity index 100%
rename from angular/scripts/clean.js
rename to packages/angular/scripts/clean.js
diff --git a/angular/scripts/link-copy.js b/packages/angular/scripts/link-copy.js
similarity index 100%
rename from angular/scripts/link-copy.js
rename to packages/angular/scripts/link-copy.js
diff --git a/angular/scripts/package.json b/packages/angular/scripts/package.json
similarity index 100%
rename from angular/scripts/package.json
rename to packages/angular/scripts/package.json
diff --git a/angular/scripts/rollup.config.js b/packages/angular/scripts/rollup.config.js
similarity index 100%
rename from angular/scripts/rollup.config.js
rename to packages/angular/scripts/rollup.config.js
diff --git a/angular/scripts/rollup.config.legacy.js b/packages/angular/scripts/rollup.config.legacy.js
similarity index 100%
rename from angular/scripts/rollup.config.legacy.js
rename to packages/angular/scripts/rollup.config.legacy.js
diff --git a/angular/scripts/sync.sh b/packages/angular/scripts/sync.sh
similarity index 86%
rename from angular/scripts/sync.sh
rename to packages/angular/scripts/sync.sh
index a03a6807b9..2c2e4a5817 100755
--- a/angular/scripts/sync.sh
+++ b/packages/angular/scripts/sync.sh
@@ -6,7 +6,7 @@ set -e
 rm -f *.tgz
 
 # Pack @ionic/core
-npm pack ../core
+npm pack ../../core
 
 # Install Dependencies
 npm install *.tgz --no-save
diff --git a/angular/src/app-initialize.ts b/packages/angular/src/app-initialize.ts
similarity index 100%
rename from angular/src/app-initialize.ts
rename to packages/angular/src/app-initialize.ts
diff --git a/angular/src/directives/angular-component-lib/utils.ts b/packages/angular/src/directives/angular-component-lib/utils.ts
similarity index 100%
rename from angular/src/directives/angular-component-lib/utils.ts
rename to packages/angular/src/directives/angular-component-lib/utils.ts
diff --git a/angular/src/directives/control-value-accessors/boolean-value-accessor.ts b/packages/angular/src/directives/control-value-accessors/boolean-value-accessor.ts
similarity index 100%
rename from angular/src/directives/control-value-accessors/boolean-value-accessor.ts
rename to packages/angular/src/directives/control-value-accessors/boolean-value-accessor.ts
diff --git a/angular/src/directives/control-value-accessors/index.ts b/packages/angular/src/directives/control-value-accessors/index.ts
similarity index 100%
rename from angular/src/directives/control-value-accessors/index.ts
rename to packages/angular/src/directives/control-value-accessors/index.ts
diff --git a/angular/src/directives/control-value-accessors/numeric-value-accessor.ts b/packages/angular/src/directives/control-value-accessors/numeric-value-accessor.ts
similarity index 100%
rename from angular/src/directives/control-value-accessors/numeric-value-accessor.ts
rename to packages/angular/src/directives/control-value-accessors/numeric-value-accessor.ts
diff --git a/angular/src/directives/control-value-accessors/radio-value-accessor.ts b/packages/angular/src/directives/control-value-accessors/radio-value-accessor.ts
similarity index 100%
rename from angular/src/directives/control-value-accessors/radio-value-accessor.ts
rename to packages/angular/src/directives/control-value-accessors/radio-value-accessor.ts
diff --git a/angular/src/directives/control-value-accessors/select-value-accessor.ts b/packages/angular/src/directives/control-value-accessors/select-value-accessor.ts
similarity index 100%
rename from angular/src/directives/control-value-accessors/select-value-accessor.ts
rename to packages/angular/src/directives/control-value-accessors/select-value-accessor.ts
diff --git a/angular/src/directives/control-value-accessors/text-value-accessor.ts b/packages/angular/src/directives/control-value-accessors/text-value-accessor.ts
similarity index 100%
rename from angular/src/directives/control-value-accessors/text-value-accessor.ts
rename to packages/angular/src/directives/control-value-accessors/text-value-accessor.ts
diff --git a/angular/src/directives/control-value-accessors/value-accessor.ts b/packages/angular/src/directives/control-value-accessors/value-accessor.ts
similarity index 100%
rename from angular/src/directives/control-value-accessors/value-accessor.ts
rename to packages/angular/src/directives/control-value-accessors/value-accessor.ts
diff --git a/angular/src/directives/navigation/ion-back-button.ts b/packages/angular/src/directives/navigation/ion-back-button.ts
similarity index 100%
rename from angular/src/directives/navigation/ion-back-button.ts
rename to packages/angular/src/directives/navigation/ion-back-button.ts
diff --git a/angular/src/directives/navigation/ion-router-outlet.ts b/packages/angular/src/directives/navigation/ion-router-outlet.ts
similarity index 100%
rename from angular/src/directives/navigation/ion-router-outlet.ts
rename to packages/angular/src/directives/navigation/ion-router-outlet.ts
diff --git a/angular/src/directives/navigation/ion-tabs.ts b/packages/angular/src/directives/navigation/ion-tabs.ts
similarity index 67%
rename from angular/src/directives/navigation/ion-tabs.ts
rename to packages/angular/src/directives/navigation/ion-tabs.ts
index 4ae93fd6ba..1fa8965218 100644
--- a/angular/src/directives/navigation/ion-tabs.ts
+++ b/packages/angular/src/directives/navigation/ion-tabs.ts
@@ -1,4 +1,16 @@
-import { Component, ContentChild, EventEmitter, HostListener, Output, ViewChild } from '@angular/core';
+import {
+  AfterContentChecked,
+  AfterContentInit,
+  Component,
+  ContentChild,
+  ContentChildren,
+  ElementRef,
+  EventEmitter,
+  HostListener,
+  Output,
+  QueryList,
+  ViewChild,
+} from '@angular/core';
 
 import { NavController } from '../../providers/nav-controller';
 import { IonTabBar } from '../proxies';
@@ -8,11 +20,13 @@ import { StackEvent } from './stack-utils';
 
 @Component({
   selector: 'ion-tabs',
-  template: `<ng-content select="[slot=top]"></ng-content>
-    <div class="tabs-inner">
+  template: `
+    <ng-content select="[slot=top]"></ng-content>
+    <div class="tabs-inner" #tabsInner>
       <ion-router-outlet #outlet tabs="true" (stackEvents)="onPageSelected($event)"></ion-router-outlet>
     </div>
-    <ng-content></ng-content>`,
+    <ng-content></ng-content>
+  `,
   styles: [
     `
       :host {
@@ -41,15 +55,28 @@ import { StackEvent } from './stack-utils';
   ],
 })
 // eslint-disable-next-line @angular-eslint/component-class-suffix
-export class IonTabs {
+export class IonTabs implements AfterContentInit, AfterContentChecked {
   @ViewChild('outlet', { read: IonRouterOutlet, static: false }) outlet: IonRouterOutlet;
+  @ViewChild('tabsInner', { read: ElementRef, static: true }) tabsInner: ElementRef<HTMLDivElement>;
+
   @ContentChild(IonTabBar, { static: false }) tabBar: IonTabBar | undefined;
+  @ContentChildren(IonTabBar) tabBars: QueryList<IonTabBar>;
 
   @Output() ionTabsWillChange = new EventEmitter<{ tab: string }>();
   @Output() ionTabsDidChange = new EventEmitter<{ tab: string }>();
 
+  private tabBarSlot = 'bottom';
+
   constructor(private navCtrl: NavController) {}
 
+  ngAfterContentInit(): void {
+    this.detectSlotChanges();
+  }
+
+  ngAfterContentChecked(): void {
+    this.detectSlotChanges();
+  }
+
   /**
    * @internal
    */
@@ -137,4 +164,48 @@ export class IonTabs {
   getSelected(): string | undefined {
     return this.outlet.getActiveStackId();
   }
+
+  /**
+   * Detects changes to the slot attribute of the tab bar.
+   *
+   * If the slot attribute has changed, then the tab bar
+   * should be relocated to the new slot position.
+   */
+  private detectSlotChanges(): void {
+    this.tabBars.forEach((tabBar: any) => {
+      // el is a protected attribute from the generated component wrapper
+      const currentSlot = tabBar.el.getAttribute('slot');
+
+      if (currentSlot !== this.tabBarSlot) {
+        this.tabBarSlot = currentSlot;
+        this.relocateTabBar();
+      }
+    });
+  }
+
+  /**
+   * Relocates the tab bar to the new slot position.
+   */
+  private relocateTabBar(): void {
+    /**
+     * `el` is a protected attribute from the generated component wrapper.
+     * To avoid having to manually create the wrapper for tab bar, we
+     * cast the tab bar to any and access the protected attribute.
+     */
+    const tabBar = (this.tabBar as any).el as HTMLElement;
+
+    if (this.tabBarSlot === 'top') {
+      /**
+       * A tab bar with a slot of "top" should be inserted
+       * at the top of the container.
+       */
+      this.tabsInner.nativeElement.before(tabBar);
+    } else {
+      /**
+       * A tab bar with a slot of "bottom" or without a slot
+       * should be inserted at the end of the container.
+       */
+      this.tabsInner.nativeElement.after(tabBar);
+    }
+  }
 }
diff --git a/angular/src/directives/navigation/nav-delegate.ts b/packages/angular/src/directives/navigation/nav-delegate.ts
similarity index 100%
rename from angular/src/directives/navigation/nav-delegate.ts
rename to packages/angular/src/directives/navigation/nav-delegate.ts
diff --git a/angular/src/directives/navigation/nav-params.ts b/packages/angular/src/directives/navigation/nav-params.ts
similarity index 100%
rename from angular/src/directives/navigation/nav-params.ts
rename to packages/angular/src/directives/navigation/nav-params.ts
diff --git a/angular/src/directives/navigation/router-link-delegate.ts b/packages/angular/src/directives/navigation/router-link-delegate.ts
similarity index 100%
rename from angular/src/directives/navigation/router-link-delegate.ts
rename to packages/angular/src/directives/navigation/router-link-delegate.ts
diff --git a/angular/src/directives/navigation/stack-controller.ts b/packages/angular/src/directives/navigation/stack-controller.ts
similarity index 100%
rename from angular/src/directives/navigation/stack-controller.ts
rename to packages/angular/src/directives/navigation/stack-controller.ts
diff --git a/angular/src/directives/navigation/stack-utils.ts b/packages/angular/src/directives/navigation/stack-utils.ts
similarity index 100%
rename from angular/src/directives/navigation/stack-utils.ts
rename to packages/angular/src/directives/navigation/stack-utils.ts
diff --git a/angular/src/directives/overlays/modal.ts b/packages/angular/src/directives/overlays/modal.ts
similarity index 100%
rename from angular/src/directives/overlays/modal.ts
rename to packages/angular/src/directives/overlays/modal.ts
diff --git a/angular/src/directives/overlays/popover.ts b/packages/angular/src/directives/overlays/popover.ts
similarity index 100%
rename from angular/src/directives/overlays/popover.ts
rename to packages/angular/src/directives/overlays/popover.ts
diff --git a/angular/src/directives/proxies-list.ts b/packages/angular/src/directives/proxies-list.ts
similarity index 100%
rename from angular/src/directives/proxies-list.ts
rename to packages/angular/src/directives/proxies-list.ts
diff --git a/angular/src/directives/proxies.ts b/packages/angular/src/directives/proxies.ts
similarity index 97%
rename from angular/src/directives/proxies.ts
rename to packages/angular/src/directives/proxies.ts
index e7e8a46950..a5b24309ea 100644
--- a/angular/src/directives/proxies.ts
+++ b/packages/angular/src/directives/proxies.ts
@@ -1002,8 +1002,9 @@ import type { InputChangeEventDetail as IIonInputInputChangeEventDetail } from '
 
 export declare interface IonInput extends Components.IonInput {
   /**
-   * The `ionInput` event fires when the `value` of an `<ion-input>` element
-has been changed.
+   * The `ionInput` event is fired each time the user modifies the input's value.
+Unlike the `ionChange` event, the `ionInput` event is fired for each alteration
+to the input's value. This typically happens for each keystroke as the user types.
 
 For elements that accept text input (`type=text`, `type=tel`, etc.), the interface
 is [`InputEvent`](https://developer.mozilla.org/en-US/docs/Web/API/InputEvent); for others,
@@ -1012,9 +1013,9 @@ the input is cleared on edit, the type is `null`.
    */
   ionInput: EventEmitter<CustomEvent<IIonInputInputInputEventDetail>>;
   /**
-   * The `ionChange` event is fired for `<ion-input>` elements when the user
-modifies the element's value. Unlike the `ionInput` event, the `ionChange`
-event is not necessarily fired for each alteration to an element's value.
+   * The `ionChange` event is fired when the user modifies the input's value.
+Unlike the `ionInput` event, the `ionChange` event is only fired when changes
+are committed, not as the user types.
 
 Depending on the way the users interacts with the element, the `ionChange`
 event fires at a different moment:
@@ -1619,14 +1620,14 @@ export declare interface IonRadioGroup extends Components.IonRadioGroup {
 
 
 @ProxyCmp({
-  inputs: ['activeBarStart', 'color', 'debounce', 'disabled', 'dualKnobs', 'labelPlacement', 'legacy', 'max', 'min', 'mode', 'name', 'pin', 'pinFormatter', 'snaps', 'step', 'ticks', 'value']
+  inputs: ['activeBarStart', 'color', 'debounce', 'disabled', 'dualKnobs', 'label', 'labelPlacement', 'legacy', 'max', 'min', 'mode', 'name', 'pin', 'pinFormatter', 'snaps', 'step', 'ticks', 'value']
 })
 @Component({
   selector: 'ion-range',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['activeBarStart', 'color', 'debounce', 'disabled', 'dualKnobs', 'labelPlacement', 'legacy', 'max', 'min', 'mode', 'name', 'pin', 'pinFormatter', 'snaps', 'step', 'ticks', 'value'],
+  inputs: ['activeBarStart', 'color', 'debounce', 'disabled', 'dualKnobs', 'label', 'labelPlacement', 'legacy', 'max', 'min', 'mode', 'name', 'pin', 'pinFormatter', 'snaps', 'step', 'ticks', 'value'],
 })
 export class IonRange {
   protected el: HTMLElement;
@@ -1954,7 +1955,7 @@ export declare interface IonSegmentButton extends Components.IonSegmentButton {}
 
 
 @ProxyCmp({
-  inputs: ['cancelText', 'color', 'compareWith', 'disabled', 'fill', 'interface', 'interfaceOptions', 'justify', 'label', 'labelPlacement', 'legacy', 'mode', 'multiple', 'name', 'okText', 'placeholder', 'selectedText', 'shape', 'value'],
+  inputs: ['cancelText', 'color', 'compareWith', 'disabled', 'expandedIcon', 'fill', 'interface', 'interfaceOptions', 'justify', 'label', 'labelPlacement', 'legacy', 'mode', 'multiple', 'name', 'okText', 'placeholder', 'selectedText', 'shape', 'toggleIcon', 'value'],
   methods: ['open']
 })
 @Component({
@@ -1962,7 +1963,7 @@ export declare interface IonSegmentButton extends Components.IonSegmentButton {}
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['cancelText', 'color', 'compareWith', 'disabled', 'fill', 'interface', 'interfaceOptions', 'justify', 'label', 'labelPlacement', 'legacy', 'mode', 'multiple', 'name', 'okText', 'placeholder', 'selectedText', 'shape', 'value'],
+  inputs: ['cancelText', 'color', 'compareWith', 'disabled', 'expandedIcon', 'fill', 'interface', 'interfaceOptions', 'justify', 'label', 'labelPlacement', 'legacy', 'mode', 'multiple', 'name', 'okText', 'placeholder', 'selectedText', 'shape', 'toggleIcon', 'value'],
 })
 export class IonSelect {
   protected el: HTMLElement;
@@ -2186,17 +2187,15 @@ import type { TextareaInputEventDetail as IIonTextareaTextareaInputEventDetail }
 
 export declare interface IonTextarea extends Components.IonTextarea {
   /**
-   * The `ionChange` event is fired for `<ion-textarea>` elements when the user
-modifies the element's value. Unlike the `ionInput` event, the `ionChange`
-event is not necessarily fired for each alteration to an element's value.
-
-The `ionChange` event is fired when the element loses focus after its value
-has been modified.
+   * The `ionChange` event is fired when the user modifies the textarea's value.
+Unlike the `ionInput` event, the `ionChange` event is fired when
+the element loses focus after its value has been modified.
    */
   ionChange: EventEmitter<CustomEvent<IIonTextareaTextareaChangeEventDetail>>;
   /**
-   * The `ionInput` event fires when the `value` of an `<ion-textarea>` element
-has been changed.
+   * The `ionInput` event is fired each time the user modifies the textarea's value.
+Unlike the `ionChange` event, the `ionInput` event is fired for each alteration
+to the textarea's value. This typically happens for each keystroke as the user types.
 
 When `clearOnEdit` is enabled, the `ionInput` event will be fired when
 the user clears the textarea by performing a keydown event.
diff --git a/angular/src/index.ts b/packages/angular/src/index.ts
similarity index 99%
rename from angular/src/index.ts
rename to packages/angular/src/index.ts
index 7227fabae5..b92167e481 100644
--- a/angular/src/index.ts
+++ b/packages/angular/src/index.ts
@@ -117,6 +117,7 @@ export {
   SearchbarInputEventDetail,
   SegmentChangeEventDetail,
   SegmentCustomEvent,
+  SegmentValue,
   SelectChangeEventDetail,
   SelectCustomEvent,
   TabsCustomEvent,
diff --git a/angular/src/ionic-core.ts b/packages/angular/src/ionic-core.ts
similarity index 100%
rename from angular/src/ionic-core.ts
rename to packages/angular/src/ionic-core.ts
diff --git a/angular/src/ionic-module.ts b/packages/angular/src/ionic-module.ts
similarity index 100%
rename from angular/src/ionic-module.ts
rename to packages/angular/src/ionic-module.ts
diff --git a/angular/src/providers/action-sheet-controller.ts b/packages/angular/src/providers/action-sheet-controller.ts
similarity index 100%
rename from angular/src/providers/action-sheet-controller.ts
rename to packages/angular/src/providers/action-sheet-controller.ts
diff --git a/angular/src/providers/alert-controller.ts b/packages/angular/src/providers/alert-controller.ts
similarity index 100%
rename from angular/src/providers/alert-controller.ts
rename to packages/angular/src/providers/alert-controller.ts
diff --git a/angular/src/providers/angular-delegate.ts b/packages/angular/src/providers/angular-delegate.ts
similarity index 100%
rename from angular/src/providers/angular-delegate.ts
rename to packages/angular/src/providers/angular-delegate.ts
diff --git a/angular/src/providers/animation-controller.ts b/packages/angular/src/providers/animation-controller.ts
similarity index 100%
rename from angular/src/providers/animation-controller.ts
rename to packages/angular/src/providers/animation-controller.ts
diff --git a/angular/src/providers/config.ts b/packages/angular/src/providers/config.ts
similarity index 100%
rename from angular/src/providers/config.ts
rename to packages/angular/src/providers/config.ts
diff --git a/angular/src/providers/dom-controller.ts b/packages/angular/src/providers/dom-controller.ts
similarity index 100%
rename from angular/src/providers/dom-controller.ts
rename to packages/angular/src/providers/dom-controller.ts
diff --git a/angular/src/providers/gesture-controller.ts b/packages/angular/src/providers/gesture-controller.ts
similarity index 100%
rename from angular/src/providers/gesture-controller.ts
rename to packages/angular/src/providers/gesture-controller.ts
diff --git a/angular/src/providers/loading-controller.ts b/packages/angular/src/providers/loading-controller.ts
similarity index 100%
rename from angular/src/providers/loading-controller.ts
rename to packages/angular/src/providers/loading-controller.ts
diff --git a/angular/src/providers/menu-controller.ts b/packages/angular/src/providers/menu-controller.ts
similarity index 100%
rename from angular/src/providers/menu-controller.ts
rename to packages/angular/src/providers/menu-controller.ts
diff --git a/angular/src/providers/modal-controller.ts b/packages/angular/src/providers/modal-controller.ts
similarity index 100%
rename from angular/src/providers/modal-controller.ts
rename to packages/angular/src/providers/modal-controller.ts
diff --git a/angular/src/providers/nav-controller.ts b/packages/angular/src/providers/nav-controller.ts
similarity index 98%
rename from angular/src/providers/nav-controller.ts
rename to packages/angular/src/providers/nav-controller.ts
index 9fa391267f..101967f0f2 100644
--- a/angular/src/providers/nav-controller.ts
+++ b/packages/angular/src/providers/nav-controller.ts
@@ -131,17 +131,21 @@ export class NavController {
    *
    * It recursively finds the top active `ion-router-outlet` and calls `pop()`.
    * This is the recommended way to go back when you are using `ion-router-outlet`.
+   *
+   * Resolves to `true` if it was able to pop.
    */
-  async pop(): Promise<void> {
+  async pop(): Promise<boolean> {
     let outlet = this.topOutlet;
 
     while (outlet) {
       if (await outlet.pop()) {
-        break;
+        return true;
       } else {
         outlet = outlet.parentOutlet;
       }
     }
+
+    return false;
   }
 
   /**
diff --git a/angular/src/providers/picker-controller.ts b/packages/angular/src/providers/picker-controller.ts
similarity index 100%
rename from angular/src/providers/picker-controller.ts
rename to packages/angular/src/providers/picker-controller.ts
diff --git a/angular/src/providers/platform.ts b/packages/angular/src/providers/platform.ts
similarity index 100%
rename from angular/src/providers/platform.ts
rename to packages/angular/src/providers/platform.ts
diff --git a/angular/src/providers/popover-controller.ts b/packages/angular/src/providers/popover-controller.ts
similarity index 100%
rename from angular/src/providers/popover-controller.ts
rename to packages/angular/src/providers/popover-controller.ts
diff --git a/angular/src/providers/toast-controller.ts b/packages/angular/src/providers/toast-controller.ts
similarity index 100%
rename from angular/src/providers/toast-controller.ts
rename to packages/angular/src/providers/toast-controller.ts
diff --git a/angular/src/schematics/add/files/root/theme/variables.css b/packages/angular/src/schematics/add/files/root/theme/variables.css
similarity index 100%
rename from angular/src/schematics/add/files/root/theme/variables.css
rename to packages/angular/src/schematics/add/files/root/theme/variables.css
diff --git a/angular/src/schematics/add/index.ts b/packages/angular/src/schematics/add/index.ts
similarity index 100%
rename from angular/src/schematics/add/index.ts
rename to packages/angular/src/schematics/add/index.ts
diff --git a/angular/src/schematics/add/schema.d.ts b/packages/angular/src/schematics/add/schema.d.ts
similarity index 100%
rename from angular/src/schematics/add/schema.d.ts
rename to packages/angular/src/schematics/add/schema.d.ts
diff --git a/angular/src/schematics/add/schema.json b/packages/angular/src/schematics/add/schema.json
similarity index 100%
rename from angular/src/schematics/add/schema.json
rename to packages/angular/src/schematics/add/schema.json
diff --git a/angular/src/schematics/collection.json b/packages/angular/src/schematics/collection.json
similarity index 100%
rename from angular/src/schematics/collection.json
rename to packages/angular/src/schematics/collection.json
diff --git a/angular/src/schematics/utils/ast.ts b/packages/angular/src/schematics/utils/ast.ts
similarity index 100%
rename from angular/src/schematics/utils/ast.ts
rename to packages/angular/src/schematics/utils/ast.ts
diff --git a/angular/src/schematics/utils/config.ts b/packages/angular/src/schematics/utils/config.ts
similarity index 100%
rename from angular/src/schematics/utils/config.ts
rename to packages/angular/src/schematics/utils/config.ts
diff --git a/angular/src/schematics/utils/devkit-utils/ast-utils.ts b/packages/angular/src/schematics/utils/devkit-utils/ast-utils.ts
similarity index 100%
rename from angular/src/schematics/utils/devkit-utils/ast-utils.ts
rename to packages/angular/src/schematics/utils/devkit-utils/ast-utils.ts
diff --git a/angular/src/schematics/utils/devkit-utils/change.ts b/packages/angular/src/schematics/utils/devkit-utils/change.ts
similarity index 100%
rename from angular/src/schematics/utils/devkit-utils/change.ts
rename to packages/angular/src/schematics/utils/devkit-utils/change.ts
diff --git a/angular/src/schematics/utils/devkit-utils/readme.md b/packages/angular/src/schematics/utils/devkit-utils/readme.md
similarity index 100%
rename from angular/src/schematics/utils/devkit-utils/readme.md
rename to packages/angular/src/schematics/utils/devkit-utils/readme.md
diff --git a/angular/src/schematics/utils/devkit-utils/route-utils.ts b/packages/angular/src/schematics/utils/devkit-utils/route-utils.ts
similarity index 100%
rename from angular/src/schematics/utils/devkit-utils/route-utils.ts
rename to packages/angular/src/schematics/utils/devkit-utils/route-utils.ts
diff --git a/angular/src/schematics/utils/package.ts b/packages/angular/src/schematics/utils/package.ts
similarity index 100%
rename from angular/src/schematics/utils/package.ts
rename to packages/angular/src/schematics/utils/package.ts
diff --git a/angular/src/types/interfaces.ts b/packages/angular/src/types/interfaces.ts
similarity index 100%
rename from angular/src/types/interfaces.ts
rename to packages/angular/src/types/interfaces.ts
diff --git a/angular/src/types/ionic-lifecycle-hooks.ts b/packages/angular/src/types/ionic-lifecycle-hooks.ts
similarity index 100%
rename from angular/src/types/ionic-lifecycle-hooks.ts
rename to packages/angular/src/types/ionic-lifecycle-hooks.ts
diff --git a/angular/src/util/ionic-router-reuse-strategy.ts b/packages/angular/src/util/ionic-router-reuse-strategy.ts
similarity index 100%
rename from angular/src/util/ionic-router-reuse-strategy.ts
rename to packages/angular/src/util/ionic-router-reuse-strategy.ts
diff --git a/angular/src/util/overlay.ts b/packages/angular/src/util/overlay.ts
similarity index 100%
rename from angular/src/util/overlay.ts
rename to packages/angular/src/util/overlay.ts
diff --git a/angular/src/util/util.ts b/packages/angular/src/util/util.ts
similarity index 100%
rename from angular/src/util/util.ts
rename to packages/angular/src/util/util.ts
diff --git a/angular/test/README.md b/packages/angular/test/README.md
similarity index 100%
rename from angular/test/README.md
rename to packages/angular/test/README.md
diff --git a/angular/test/apps/ng14/e2e/src/.gitkeep b/packages/angular/test/apps/ng14/e2e/src/.gitkeep
similarity index 100%
rename from angular/test/apps/ng14/e2e/src/.gitkeep
rename to packages/angular/test/apps/ng14/e2e/src/.gitkeep
diff --git a/angular/test/apps/ng14/e2e/src/angular-version.spec.ts b/packages/angular/test/apps/ng14/e2e/src/angular-version.spec.ts
similarity index 100%
rename from angular/test/apps/ng14/e2e/src/angular-version.spec.ts
rename to packages/angular/test/apps/ng14/e2e/src/angular-version.spec.ts
diff --git a/angular/test/apps/ng14/package-lock.json b/packages/angular/test/apps/ng14/package-lock.json
similarity index 100%
rename from angular/test/apps/ng14/package-lock.json
rename to packages/angular/test/apps/ng14/package-lock.json
diff --git a/angular/test/apps/ng14/package.json b/packages/angular/test/apps/ng14/package.json
similarity index 100%
rename from angular/test/apps/ng14/package.json
rename to packages/angular/test/apps/ng14/package.json
diff --git a/angular/test/apps/ng14/src/app/version-test/version-test-routing.module.ts b/packages/angular/test/apps/ng14/src/app/version-test/version-test-routing.module.ts
similarity index 100%
rename from angular/test/apps/ng14/src/app/version-test/version-test-routing.module.ts
rename to packages/angular/test/apps/ng14/src/app/version-test/version-test-routing.module.ts
diff --git a/angular/test/apps/ng14/tsconfig.json b/packages/angular/test/apps/ng14/tsconfig.json
similarity index 100%
rename from angular/test/apps/ng14/tsconfig.json
rename to packages/angular/test/apps/ng14/tsconfig.json
diff --git a/angular/test/apps/ng15/e2e/src/.gitkeep b/packages/angular/test/apps/ng15/e2e/src/.gitkeep
similarity index 100%
rename from angular/test/apps/ng15/e2e/src/.gitkeep
rename to packages/angular/test/apps/ng15/e2e/src/.gitkeep
diff --git a/angular/test/apps/ng15/e2e/src/angular-version.spec.ts b/packages/angular/test/apps/ng15/e2e/src/angular-version.spec.ts
similarity index 100%
rename from angular/test/apps/ng15/e2e/src/angular-version.spec.ts
rename to packages/angular/test/apps/ng15/e2e/src/angular-version.spec.ts
diff --git a/angular/test/apps/ng15/package-lock.json b/packages/angular/test/apps/ng15/package-lock.json
similarity index 100%
rename from angular/test/apps/ng15/package-lock.json
rename to packages/angular/test/apps/ng15/package-lock.json
diff --git a/angular/test/apps/ng15/package.json b/packages/angular/test/apps/ng15/package.json
similarity index 100%
rename from angular/test/apps/ng15/package.json
rename to packages/angular/test/apps/ng15/package.json
diff --git a/angular/test/apps/ng15/src/app/version-test/version-test-routing.module.ts b/packages/angular/test/apps/ng15/src/app/version-test/version-test-routing.module.ts
similarity index 100%
rename from angular/test/apps/ng15/src/app/version-test/version-test-routing.module.ts
rename to packages/angular/test/apps/ng15/src/app/version-test/version-test-routing.module.ts
diff --git a/angular/test/apps/ng15/tsconfig.json b/packages/angular/test/apps/ng15/tsconfig.json
similarity index 100%
rename from angular/test/apps/ng15/tsconfig.json
rename to packages/angular/test/apps/ng15/tsconfig.json
diff --git a/angular/test/apps/ng16/e2e/src/.gitkeep b/packages/angular/test/apps/ng16/e2e/src/.gitkeep
similarity index 100%
rename from angular/test/apps/ng16/e2e/src/.gitkeep
rename to packages/angular/test/apps/ng16/e2e/src/.gitkeep
diff --git a/angular/test/apps/ng16/e2e/src/angular-version.spec.ts b/packages/angular/test/apps/ng16/e2e/src/angular-version.spec.ts
similarity index 100%
rename from angular/test/apps/ng16/e2e/src/angular-version.spec.ts
rename to packages/angular/test/apps/ng16/e2e/src/angular-version.spec.ts
diff --git a/packages/angular/test/apps/ng16/e2e/src/modal-nav-params.spec.ts b/packages/angular/test/apps/ng16/e2e/src/modal-nav-params.spec.ts
new file mode 100644
index 0000000000..6a5556518f
--- /dev/null
+++ b/packages/angular/test/apps/ng16/e2e/src/modal-nav-params.spec.ts
@@ -0,0 +1,20 @@
+describe('Modal Nav Params', () => {
+
+  beforeEach(() => {
+    cy.visit('/version-test/modal-nav-params');
+  });
+
+  it('should assign the rootParams when presented in a modal multiple times', () => {
+    cy.contains('Open Modal').click();
+    cy.get('ion-modal').should('exist').should('be.visible');
+    cy.get('ion-modal').contains('OK');
+
+    cy.contains("Close").click();
+    cy.get('ion-modal').should('not.be.visible');
+
+    cy.contains('Open Modal').click();
+    cy.get('ion-modal').should('exist').should('be.visible');
+    cy.get('ion-modal').contains('OK').should('exist');
+  });
+
+});
diff --git a/angular/test/apps/ng16/package-lock.json b/packages/angular/test/apps/ng16/package-lock.json
similarity index 100%
rename from angular/test/apps/ng16/package-lock.json
rename to packages/angular/test/apps/ng16/package-lock.json
diff --git a/angular/test/apps/ng16/package.json b/packages/angular/test/apps/ng16/package.json
similarity index 100%
rename from angular/test/apps/ng16/package.json
rename to packages/angular/test/apps/ng16/package.json
diff --git a/packages/angular/test/apps/ng16/src/app/version-test/modal-nav-params/modal-nav-params.component.ts b/packages/angular/test/apps/ng16/src/app/version-test/modal-nav-params/modal-nav-params.component.ts
new file mode 100644
index 0000000000..5f820e1be4
--- /dev/null
+++ b/packages/angular/test/apps/ng16/src/app/version-test/modal-nav-params/modal-nav-params.component.ts
@@ -0,0 +1,45 @@
+import { Component } from "@angular/core";
+
+import { IonicModule } from "@ionic/angular";
+
+import { NavRootComponent } from "./nav-root.component";
+
+@Component({
+  selector: 'app-modal-nav-params',
+  template: `
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Modal Nav Params</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content>
+      <ion-button id="open">Open Modal</ion-button>
+      <ion-modal #modal trigger="open">
+        <ng-template>
+          <ion-header>
+            <ion-toolbar>
+              <ion-buttons slot="start">
+                <ion-button (click)="modal.dismiss()">Close</ion-button>
+              </ion-buttons>
+            </ion-toolbar>
+          </ion-header>
+          <ion-content>
+            <ion-nav [root]="root" [rootParams]="rootParams"></ion-nav>
+          </ion-content>
+        </ng-template>
+      </ion-modal>
+    </ion-content>
+  `,
+  standalone: true,
+  imports: [IonicModule, NavRootComponent]
+})
+export class ModalNavParamsComponent {
+
+  root = NavRootComponent;
+  rootParams = {
+    params: {
+      id: 123
+    }
+  };
+
+}
diff --git a/packages/angular/test/apps/ng16/src/app/version-test/modal-nav-params/nav-root.component.ts b/packages/angular/test/apps/ng16/src/app/version-test/modal-nav-params/nav-root.component.ts
new file mode 100644
index 0000000000..ae545093dc
--- /dev/null
+++ b/packages/angular/test/apps/ng16/src/app/version-test/modal-nav-params/nav-root.component.ts
@@ -0,0 +1,38 @@
+import { JsonPipe } from "@angular/common";
+import { Component } from "@angular/core";
+
+import { IonicModule } from "@ionic/angular";
+
+/**
+ * This is used to track if any occurences of
+ * the ion-nav root component being attached to
+ * the DOM result in the rootParams not being
+ * assigned to the component instance.
+ *
+ * https://github.com/ionic-team/ionic-framework/issues/27146
+ */
+let rootParamsException = false;
+
+@Component({
+  selector: 'app-modal-content',
+  template: `
+    {{ hasException ? 'ERROR' : 'OK' }}
+  `,
+  standalone: true,
+  imports: [IonicModule, JsonPipe]
+})
+export class NavRootComponent {
+
+  params: any;
+
+  ngOnInit() {
+    if (this.params === undefined) {
+      rootParamsException = true;
+    }
+  }
+
+  get hasException() {
+    return rootParamsException;
+  }
+
+}
diff --git a/packages/angular/test/apps/ng16/src/app/version-test/version-test-routing.module.ts b/packages/angular/test/apps/ng16/src/app/version-test/version-test-routing.module.ts
new file mode 100644
index 0000000000..7cd8857683
--- /dev/null
+++ b/packages/angular/test/apps/ng16/src/app/version-test/version-test-routing.module.ts
@@ -0,0 +1,15 @@
+import { NgModule } from "@angular/core";
+import { RouterModule } from "@angular/router";
+
+@NgModule({
+  imports: [
+    RouterModule.forChild([
+      {
+        path: 'modal-nav-params',
+        loadComponent: () => import('./modal-nav-params/modal-nav-params.component').then(m => m.ModalNavParamsComponent)
+      }
+    ])
+  ],
+  exports: [RouterModule]
+})
+export class VersionTestRoutingModule { }
diff --git a/angular/test/apps/ng16/tsconfig.json b/packages/angular/test/apps/ng16/tsconfig.json
similarity index 100%
rename from angular/test/apps/ng16/tsconfig.json
rename to packages/angular/test/apps/ng16/tsconfig.json
diff --git a/angular/test/base/.browserslistrc b/packages/angular/test/base/.browserslistrc
similarity index 100%
rename from angular/test/base/.browserslistrc
rename to packages/angular/test/base/.browserslistrc
diff --git a/angular/test/base/.editorconfig b/packages/angular/test/base/.editorconfig
similarity index 100%
rename from angular/test/base/.editorconfig
rename to packages/angular/test/base/.editorconfig
diff --git a/angular/test/base/.eslintrc.json b/packages/angular/test/base/.eslintrc.json
similarity index 100%
rename from angular/test/base/.eslintrc.json
rename to packages/angular/test/base/.eslintrc.json
diff --git a/angular/test/base/.gitignore b/packages/angular/test/base/.gitignore
similarity index 100%
rename from angular/test/base/.gitignore
rename to packages/angular/test/base/.gitignore
diff --git a/angular/test/base/angular.json b/packages/angular/test/base/angular.json
similarity index 100%
rename from angular/test/base/angular.json
rename to packages/angular/test/base/angular.json
diff --git a/angular/test/base/cypress.config.ts b/packages/angular/test/base/cypress.config.ts
similarity index 100%
rename from angular/test/base/cypress.config.ts
rename to packages/angular/test/base/cypress.config.ts
diff --git a/angular/test/base/cypress/plugins/index.js b/packages/angular/test/base/cypress/plugins/index.js
similarity index 100%
rename from angular/test/base/cypress/plugins/index.js
rename to packages/angular/test/base/cypress/plugins/index.js
diff --git a/angular/test/base/cypress/support/commands.js b/packages/angular/test/base/cypress/support/commands.js
similarity index 100%
rename from angular/test/base/cypress/support/commands.js
rename to packages/angular/test/base/cypress/support/commands.js
diff --git a/angular/test/base/cypress/support/e2e.js b/packages/angular/test/base/cypress/support/e2e.js
similarity index 100%
rename from angular/test/base/cypress/support/e2e.js
rename to packages/angular/test/base/cypress/support/e2e.js
diff --git a/angular/test/base/cypress/support/index.d.ts b/packages/angular/test/base/cypress/support/index.d.ts
similarity index 100%
rename from angular/test/base/cypress/support/index.d.ts
rename to packages/angular/test/base/cypress/support/index.d.ts
diff --git a/angular/test/base/e2e/src/accordion.spec.ts b/packages/angular/test/base/e2e/src/accordion.spec.ts
similarity index 100%
rename from angular/test/base/e2e/src/accordion.spec.ts
rename to packages/angular/test/base/e2e/src/accordion.spec.ts
diff --git a/angular/test/base/e2e/src/form-controls/range.spec.ts b/packages/angular/test/base/e2e/src/form-controls/range.spec.ts
similarity index 100%
rename from angular/test/base/e2e/src/form-controls/range.spec.ts
rename to packages/angular/test/base/e2e/src/form-controls/range.spec.ts
diff --git a/angular/test/base/e2e/src/form.spec.ts b/packages/angular/test/base/e2e/src/form.spec.ts
similarity index 100%
rename from angular/test/base/e2e/src/form.spec.ts
rename to packages/angular/test/base/e2e/src/form.spec.ts
diff --git a/angular/test/base/e2e/src/inline-overlays.spec.ts b/packages/angular/test/base/e2e/src/inline-overlays.spec.ts
similarity index 100%
rename from angular/test/base/e2e/src/inline-overlays.spec.ts
rename to packages/angular/test/base/e2e/src/inline-overlays.spec.ts
diff --git a/angular/test/base/e2e/src/inputs.spec.ts b/packages/angular/test/base/e2e/src/inputs.spec.ts
similarity index 100%
rename from angular/test/base/e2e/src/inputs.spec.ts
rename to packages/angular/test/base/e2e/src/inputs.spec.ts
diff --git a/angular/test/base/e2e/src/keep-contents-mounted.spec.ts b/packages/angular/test/base/e2e/src/keep-contents-mounted.spec.ts
similarity index 100%
rename from angular/test/base/e2e/src/keep-contents-mounted.spec.ts
rename to packages/angular/test/base/e2e/src/keep-contents-mounted.spec.ts
diff --git a/angular/test/base/e2e/src/modal.spec.ts b/packages/angular/test/base/e2e/src/modal.spec.ts
similarity index 100%
rename from angular/test/base/e2e/src/modal.spec.ts
rename to packages/angular/test/base/e2e/src/modal.spec.ts
diff --git a/angular/test/base/e2e/src/navigation.spec.ts b/packages/angular/test/base/e2e/src/navigation.spec.ts
similarity index 100%
rename from angular/test/base/e2e/src/navigation.spec.ts
rename to packages/angular/test/base/e2e/src/navigation.spec.ts
diff --git a/angular/test/base/e2e/src/nested-outlet.spec.ts b/packages/angular/test/base/e2e/src/nested-outlet.spec.ts
similarity index 100%
rename from angular/test/base/e2e/src/nested-outlet.spec.ts
rename to packages/angular/test/base/e2e/src/nested-outlet.spec.ts
diff --git a/angular/test/base/e2e/src/popover.spec.ts b/packages/angular/test/base/e2e/src/popover.spec.ts
similarity index 100%
rename from angular/test/base/e2e/src/popover.spec.ts
rename to packages/angular/test/base/e2e/src/popover.spec.ts
diff --git a/angular/test/base/e2e/src/providers.spec.ts b/packages/angular/test/base/e2e/src/providers.spec.ts
similarity index 100%
rename from angular/test/base/e2e/src/providers.spec.ts
rename to packages/angular/test/base/e2e/src/providers.spec.ts
diff --git a/angular/test/base/e2e/src/router-link.spec.ts b/packages/angular/test/base/e2e/src/router-link.spec.ts
similarity index 100%
rename from angular/test/base/e2e/src/router-link.spec.ts
rename to packages/angular/test/base/e2e/src/router-link.spec.ts
diff --git a/angular/test/base/e2e/src/routing.spec.ts b/packages/angular/test/base/e2e/src/routing.spec.ts
similarity index 100%
rename from angular/test/base/e2e/src/routing.spec.ts
rename to packages/angular/test/base/e2e/src/routing.spec.ts
diff --git a/angular/test/base/e2e/src/searchbar.spec.ts b/packages/angular/test/base/e2e/src/searchbar.spec.ts
similarity index 100%
rename from angular/test/base/e2e/src/searchbar.spec.ts
rename to packages/angular/test/base/e2e/src/searchbar.spec.ts
diff --git a/angular/test/base/e2e/src/standalone-routing.spec.ts b/packages/angular/test/base/e2e/src/standalone-routing.spec.ts
similarity index 100%
rename from angular/test/base/e2e/src/standalone-routing.spec.ts
rename to packages/angular/test/base/e2e/src/standalone-routing.spec.ts
diff --git a/angular/test/base/e2e/src/tabs.spec.ts b/packages/angular/test/base/e2e/src/tabs.spec.ts
similarity index 94%
rename from angular/test/base/e2e/src/tabs.spec.ts
rename to packages/angular/test/base/e2e/src/tabs.spec.ts
index 618c064751..48d1dd5c6d 100644
--- a/angular/test/base/e2e/src/tabs.spec.ts
+++ b/packages/angular/test/base/e2e/src/tabs.spec.ts
@@ -435,6 +435,30 @@ describe('Tabs', () => {
   })
 })
 
+it('Tabs should support conditional slots', () => {
+  cy.visit('/tabs-slots');
+
+  cy.get('ion-tabs .tabs-inner + ion-tab-bar').should('have.length', 1);
+
+  // Click the button to change the slot to the top
+  cy.get('#set-slot-top').click();
+
+  // The tab bar should be removed from the bottom
+  cy.get('ion-tabs .tabs-inner + ion-tab-bar').should('have.length', 0);
+
+  // The tab bar should be added to the top
+  cy.get('ion-tabs ion-tab-bar + .tabs-inner').should('have.length', 1);
+
+  // Click the button to change the slot to the bottom
+  cy.get('#set-slot-bottom').click();
+
+  // The tab bar should be removed from the top
+  cy.get('ion-tabs ion-tab-bar + .tabs-inner').should('have.length', 0);
+
+  // The tab bar should be added to the bottom
+  cy.get('ion-tabs .tabs-inner + ion-tab-bar').should('have.length', 1);
+});
+
 
 function testTabTitle(title) {
   const tab = getSelectedTab();
diff --git a/angular/test/base/e2e/src/textarea.spec.ts b/packages/angular/test/base/e2e/src/textarea.spec.ts
similarity index 100%
rename from angular/test/base/e2e/src/textarea.spec.ts
rename to packages/angular/test/base/e2e/src/textarea.spec.ts
diff --git a/angular/test/base/e2e/src/view-child.spec.ts b/packages/angular/test/base/e2e/src/view-child.spec.ts
similarity index 100%
rename from angular/test/base/e2e/src/view-child.spec.ts
rename to packages/angular/test/base/e2e/src/view-child.spec.ts
diff --git a/angular/test/base/e2e/tsconfig.json b/packages/angular/test/base/e2e/tsconfig.json
similarity index 100%
rename from angular/test/base/e2e/tsconfig.json
rename to packages/angular/test/base/e2e/tsconfig.json
diff --git a/angular/test/base/scripts/build-ionic.sh b/packages/angular/test/base/scripts/build-ionic.sh
similarity index 100%
rename from angular/test/base/scripts/build-ionic.sh
rename to packages/angular/test/base/scripts/build-ionic.sh
diff --git a/angular/test/base/scripts/sync.sh b/packages/angular/test/base/scripts/sync.sh
similarity index 76%
rename from angular/test/base/scripts/sync.sh
rename to packages/angular/test/base/scripts/sync.sh
index 9be3c4b76d..60a206e5ac 100644
--- a/angular/test/base/scripts/sync.sh
+++ b/packages/angular/test/base/scripts/sync.sh
@@ -6,13 +6,13 @@ set -e
 rm -f *.tgz
 
 # Pack @ionic/core
-npm pack ../../../../core
+npm pack ../../../../../core
 
 # Pack @ionic/angular
 npm pack ../../../dist
 
 # Pack @ionic/angular-server
-npm pack ../../../../packages/angular-server/dist
+npm pack ../../../../angular-server/dist
 
 # Install Dependencies
 npm install *.tgz --no-save
diff --git a/angular/test/base/server.ts b/packages/angular/test/base/server.ts
similarity index 100%
rename from angular/test/base/server.ts
rename to packages/angular/test/base/server.ts
diff --git a/angular/test/base/src/app/accordion/accordion-modal/accordion-modal.component.html b/packages/angular/test/base/src/app/accordion/accordion-modal/accordion-modal.component.html
similarity index 100%
rename from angular/test/base/src/app/accordion/accordion-modal/accordion-modal.component.html
rename to packages/angular/test/base/src/app/accordion/accordion-modal/accordion-modal.component.html
diff --git a/angular/test/base/src/app/accordion/accordion-modal/accordion-modal.component.ts b/packages/angular/test/base/src/app/accordion/accordion-modal/accordion-modal.component.ts
similarity index 100%
rename from angular/test/base/src/app/accordion/accordion-modal/accordion-modal.component.ts
rename to packages/angular/test/base/src/app/accordion/accordion-modal/accordion-modal.component.ts
diff --git a/angular/test/base/src/app/accordion/accordion.component.html b/packages/angular/test/base/src/app/accordion/accordion.component.html
similarity index 100%
rename from angular/test/base/src/app/accordion/accordion.component.html
rename to packages/angular/test/base/src/app/accordion/accordion.component.html
diff --git a/angular/test/base/src/app/accordion/accordion.component.ts b/packages/angular/test/base/src/app/accordion/accordion.component.ts
similarity index 100%
rename from angular/test/base/src/app/accordion/accordion.component.ts
rename to packages/angular/test/base/src/app/accordion/accordion.component.ts
diff --git a/angular/test/base/src/app/alert/alert.component.html b/packages/angular/test/base/src/app/alert/alert.component.html
similarity index 100%
rename from angular/test/base/src/app/alert/alert.component.html
rename to packages/angular/test/base/src/app/alert/alert.component.html
diff --git a/angular/test/base/src/app/alert/alert.component.ts b/packages/angular/test/base/src/app/alert/alert.component.ts
similarity index 100%
rename from angular/test/base/src/app/alert/alert.component.ts
rename to packages/angular/test/base/src/app/alert/alert.component.ts
diff --git a/angular/test/base/src/app/app-routing.module.ts b/packages/angular/test/base/src/app/app-routing.module.ts
similarity index 97%
rename from angular/test/base/src/app/app-routing.module.ts
rename to packages/angular/test/base/src/app/app-routing.module.ts
index c30f654b0e..183d235e94 100644
--- a/angular/test/base/src/app/app-routing.module.ts
+++ b/packages/angular/test/base/src/app/app-routing.module.ts
@@ -57,6 +57,10 @@ const routes: Routes = [
     path: 'tabs-global',
     loadChildren: () => import('./tabs-global/tabs-global.module').then(m => m.TabsGlobalModule)
   },
+  {
+    path: 'tabs-slots',
+    loadComponent: () => import('./tabs-slots.component').then(c => c.TabsSlotsComponent)
+  },
   {
     path: 'nested-outlet',
     component: NestedOutletComponent,
diff --git a/angular/test/base/src/app/app.component.css b/packages/angular/test/base/src/app/app.component.css
similarity index 100%
rename from angular/test/base/src/app/app.component.css
rename to packages/angular/test/base/src/app/app.component.css
diff --git a/angular/test/base/src/app/app.component.html b/packages/angular/test/base/src/app/app.component.html
similarity index 100%
rename from angular/test/base/src/app/app.component.html
rename to packages/angular/test/base/src/app/app.component.html
diff --git a/angular/test/base/src/app/app.component.ts b/packages/angular/test/base/src/app/app.component.ts
similarity index 100%
rename from angular/test/base/src/app/app.component.ts
rename to packages/angular/test/base/src/app/app.component.ts
diff --git a/angular/test/base/src/app/app.module.ts b/packages/angular/test/base/src/app/app.module.ts
similarity index 100%
rename from angular/test/base/src/app/app.module.ts
rename to packages/angular/test/base/src/app/app.module.ts
diff --git a/angular/test/base/src/app/app.server.module.ts b/packages/angular/test/base/src/app/app.server.module.ts
similarity index 100%
rename from angular/test/base/src/app/app.server.module.ts
rename to packages/angular/test/base/src/app/app.server.module.ts
diff --git a/angular/test/base/src/app/form-controls/range/range-routing.module.ts b/packages/angular/test/base/src/app/form-controls/range/range-routing.module.ts
similarity index 100%
rename from angular/test/base/src/app/form-controls/range/range-routing.module.ts
rename to packages/angular/test/base/src/app/form-controls/range/range-routing.module.ts
diff --git a/angular/test/base/src/app/form-controls/range/range.component.html b/packages/angular/test/base/src/app/form-controls/range/range.component.html
similarity index 100%
rename from angular/test/base/src/app/form-controls/range/range.component.html
rename to packages/angular/test/base/src/app/form-controls/range/range.component.html
diff --git a/angular/test/base/src/app/form-controls/range/range.component.ts b/packages/angular/test/base/src/app/form-controls/range/range.component.ts
similarity index 100%
rename from angular/test/base/src/app/form-controls/range/range.component.ts
rename to packages/angular/test/base/src/app/form-controls/range/range.component.ts
diff --git a/angular/test/base/src/app/form-controls/range/range.module.ts b/packages/angular/test/base/src/app/form-controls/range/range.module.ts
similarity index 100%
rename from angular/test/base/src/app/form-controls/range/range.module.ts
rename to packages/angular/test/base/src/app/form-controls/range/range.module.ts
diff --git a/angular/test/base/src/app/form/form.component.html b/packages/angular/test/base/src/app/form/form.component.html
similarity index 100%
rename from angular/test/base/src/app/form/form.component.html
rename to packages/angular/test/base/src/app/form/form.component.html
diff --git a/angular/test/base/src/app/form/form.component.ts b/packages/angular/test/base/src/app/form/form.component.ts
similarity index 100%
rename from angular/test/base/src/app/form/form.component.ts
rename to packages/angular/test/base/src/app/form/form.component.ts
diff --git a/angular/test/base/src/app/home-page/home-page.component.html b/packages/angular/test/base/src/app/home-page/home-page.component.html
similarity index 100%
rename from angular/test/base/src/app/home-page/home-page.component.html
rename to packages/angular/test/base/src/app/home-page/home-page.component.html
diff --git a/angular/test/base/src/app/home-page/home-page.component.ts b/packages/angular/test/base/src/app/home-page/home-page.component.ts
similarity index 100%
rename from angular/test/base/src/app/home-page/home-page.component.ts
rename to packages/angular/test/base/src/app/home-page/home-page.component.ts
diff --git a/angular/test/base/src/app/inputs/inputs.component.html b/packages/angular/test/base/src/app/inputs/inputs.component.html
similarity index 100%
rename from angular/test/base/src/app/inputs/inputs.component.html
rename to packages/angular/test/base/src/app/inputs/inputs.component.html
diff --git a/angular/test/base/src/app/inputs/inputs.component.ts b/packages/angular/test/base/src/app/inputs/inputs.component.ts
similarity index 100%
rename from angular/test/base/src/app/inputs/inputs.component.ts
rename to packages/angular/test/base/src/app/inputs/inputs.component.ts
diff --git a/angular/test/base/src/app/keep-contents-mounted/index.ts b/packages/angular/test/base/src/app/keep-contents-mounted/index.ts
similarity index 100%
rename from angular/test/base/src/app/keep-contents-mounted/index.ts
rename to packages/angular/test/base/src/app/keep-contents-mounted/index.ts
diff --git a/angular/test/base/src/app/keep-contents-mounted/keep-contents-mounted-routing.module.ts b/packages/angular/test/base/src/app/keep-contents-mounted/keep-contents-mounted-routing.module.ts
similarity index 100%
rename from angular/test/base/src/app/keep-contents-mounted/keep-contents-mounted-routing.module.ts
rename to packages/angular/test/base/src/app/keep-contents-mounted/keep-contents-mounted-routing.module.ts
diff --git a/angular/test/base/src/app/keep-contents-mounted/keep-contents-mounted.component.html b/packages/angular/test/base/src/app/keep-contents-mounted/keep-contents-mounted.component.html
similarity index 100%
rename from angular/test/base/src/app/keep-contents-mounted/keep-contents-mounted.component.html
rename to packages/angular/test/base/src/app/keep-contents-mounted/keep-contents-mounted.component.html
diff --git a/angular/test/base/src/app/keep-contents-mounted/keep-contents-mounted.component.ts b/packages/angular/test/base/src/app/keep-contents-mounted/keep-contents-mounted.component.ts
similarity index 100%
rename from angular/test/base/src/app/keep-contents-mounted/keep-contents-mounted.component.ts
rename to packages/angular/test/base/src/app/keep-contents-mounted/keep-contents-mounted.component.ts
diff --git a/angular/test/base/src/app/keep-contents-mounted/keep-contents-mounted.module.ts b/packages/angular/test/base/src/app/keep-contents-mounted/keep-contents-mounted.module.ts
similarity index 100%
rename from angular/test/base/src/app/keep-contents-mounted/keep-contents-mounted.module.ts
rename to packages/angular/test/base/src/app/keep-contents-mounted/keep-contents-mounted.module.ts
diff --git a/angular/test/base/src/app/modal-example/modal-example.component.html b/packages/angular/test/base/src/app/modal-example/modal-example.component.html
similarity index 100%
rename from angular/test/base/src/app/modal-example/modal-example.component.html
rename to packages/angular/test/base/src/app/modal-example/modal-example.component.html
diff --git a/angular/test/base/src/app/modal-example/modal-example.component.ts b/packages/angular/test/base/src/app/modal-example/modal-example.component.ts
similarity index 100%
rename from angular/test/base/src/app/modal-example/modal-example.component.ts
rename to packages/angular/test/base/src/app/modal-example/modal-example.component.ts
diff --git a/angular/test/base/src/app/modal-inline/index.ts b/packages/angular/test/base/src/app/modal-inline/index.ts
similarity index 100%
rename from angular/test/base/src/app/modal-inline/index.ts
rename to packages/angular/test/base/src/app/modal-inline/index.ts
diff --git a/angular/test/base/src/app/modal-inline/modal-inline-routing.module.ts b/packages/angular/test/base/src/app/modal-inline/modal-inline-routing.module.ts
similarity index 100%
rename from angular/test/base/src/app/modal-inline/modal-inline-routing.module.ts
rename to packages/angular/test/base/src/app/modal-inline/modal-inline-routing.module.ts
diff --git a/angular/test/base/src/app/modal-inline/modal-inline.component.html b/packages/angular/test/base/src/app/modal-inline/modal-inline.component.html
similarity index 100%
rename from angular/test/base/src/app/modal-inline/modal-inline.component.html
rename to packages/angular/test/base/src/app/modal-inline/modal-inline.component.html
diff --git a/angular/test/base/src/app/modal-inline/modal-inline.component.ts b/packages/angular/test/base/src/app/modal-inline/modal-inline.component.ts
similarity index 100%
rename from angular/test/base/src/app/modal-inline/modal-inline.component.ts
rename to packages/angular/test/base/src/app/modal-inline/modal-inline.component.ts
diff --git a/angular/test/base/src/app/modal-inline/modal-inline.module.ts b/packages/angular/test/base/src/app/modal-inline/modal-inline.module.ts
similarity index 100%
rename from angular/test/base/src/app/modal-inline/modal-inline.module.ts
rename to packages/angular/test/base/src/app/modal-inline/modal-inline.module.ts
diff --git a/angular/test/base/src/app/modal/modal.component.html b/packages/angular/test/base/src/app/modal/modal.component.html
similarity index 100%
rename from angular/test/base/src/app/modal/modal.component.html
rename to packages/angular/test/base/src/app/modal/modal.component.html
diff --git a/angular/test/base/src/app/modal/modal.component.ts b/packages/angular/test/base/src/app/modal/modal.component.ts
similarity index 100%
rename from angular/test/base/src/app/modal/modal.component.ts
rename to packages/angular/test/base/src/app/modal/modal.component.ts
diff --git a/angular/test/base/src/app/nav/nav.component.html b/packages/angular/test/base/src/app/nav/nav.component.html
similarity index 100%
rename from angular/test/base/src/app/nav/nav.component.html
rename to packages/angular/test/base/src/app/nav/nav.component.html
diff --git a/angular/test/base/src/app/nav/nav.component.ts b/packages/angular/test/base/src/app/nav/nav.component.ts
similarity index 100%
rename from angular/test/base/src/app/nav/nav.component.ts
rename to packages/angular/test/base/src/app/nav/nav.component.ts
diff --git a/angular/test/base/src/app/navigation-page1/navigation-page1.component.html b/packages/angular/test/base/src/app/navigation-page1/navigation-page1.component.html
similarity index 100%
rename from angular/test/base/src/app/navigation-page1/navigation-page1.component.html
rename to packages/angular/test/base/src/app/navigation-page1/navigation-page1.component.html
diff --git a/angular/test/base/src/app/navigation-page1/navigation-page1.component.ts b/packages/angular/test/base/src/app/navigation-page1/navigation-page1.component.ts
similarity index 100%
rename from angular/test/base/src/app/navigation-page1/navigation-page1.component.ts
rename to packages/angular/test/base/src/app/navigation-page1/navigation-page1.component.ts
diff --git a/angular/test/base/src/app/navigation-page2/navigation-page2.component.html b/packages/angular/test/base/src/app/navigation-page2/navigation-page2.component.html
similarity index 100%
rename from angular/test/base/src/app/navigation-page2/navigation-page2.component.html
rename to packages/angular/test/base/src/app/navigation-page2/navigation-page2.component.html
diff --git a/angular/test/base/src/app/navigation-page2/navigation-page2.component.ts b/packages/angular/test/base/src/app/navigation-page2/navigation-page2.component.ts
similarity index 100%
rename from angular/test/base/src/app/navigation-page2/navigation-page2.component.ts
rename to packages/angular/test/base/src/app/navigation-page2/navigation-page2.component.ts
diff --git a/angular/test/base/src/app/navigation-page3/navigation-page3.component.html b/packages/angular/test/base/src/app/navigation-page3/navigation-page3.component.html
similarity index 100%
rename from angular/test/base/src/app/navigation-page3/navigation-page3.component.html
rename to packages/angular/test/base/src/app/navigation-page3/navigation-page3.component.html
diff --git a/angular/test/base/src/app/navigation-page3/navigation-page3.component.ts b/packages/angular/test/base/src/app/navigation-page3/navigation-page3.component.ts
similarity index 100%
rename from angular/test/base/src/app/navigation-page3/navigation-page3.component.ts
rename to packages/angular/test/base/src/app/navigation-page3/navigation-page3.component.ts
diff --git a/angular/test/base/src/app/nested-outlet-page/nested-outlet-page.component.html b/packages/angular/test/base/src/app/nested-outlet-page/nested-outlet-page.component.html
similarity index 100%
rename from angular/test/base/src/app/nested-outlet-page/nested-outlet-page.component.html
rename to packages/angular/test/base/src/app/nested-outlet-page/nested-outlet-page.component.html
diff --git a/angular/test/base/src/app/nested-outlet-page/nested-outlet-page.component.ts b/packages/angular/test/base/src/app/nested-outlet-page/nested-outlet-page.component.ts
similarity index 100%
rename from angular/test/base/src/app/nested-outlet-page/nested-outlet-page.component.ts
rename to packages/angular/test/base/src/app/nested-outlet-page/nested-outlet-page.component.ts
diff --git a/angular/test/base/src/app/nested-outlet-page2/nested-outlet-page2.component.html b/packages/angular/test/base/src/app/nested-outlet-page2/nested-outlet-page2.component.html
similarity index 100%
rename from angular/test/base/src/app/nested-outlet-page2/nested-outlet-page2.component.html
rename to packages/angular/test/base/src/app/nested-outlet-page2/nested-outlet-page2.component.html
diff --git a/angular/test/base/src/app/nested-outlet-page2/nested-outlet-page2.component.ts b/packages/angular/test/base/src/app/nested-outlet-page2/nested-outlet-page2.component.ts
similarity index 100%
rename from angular/test/base/src/app/nested-outlet-page2/nested-outlet-page2.component.ts
rename to packages/angular/test/base/src/app/nested-outlet-page2/nested-outlet-page2.component.ts
diff --git a/angular/test/base/src/app/nested-outlet/nested-outlet.component.html b/packages/angular/test/base/src/app/nested-outlet/nested-outlet.component.html
similarity index 100%
rename from angular/test/base/src/app/nested-outlet/nested-outlet.component.html
rename to packages/angular/test/base/src/app/nested-outlet/nested-outlet.component.html
diff --git a/angular/test/base/src/app/nested-outlet/nested-outlet.component.ts b/packages/angular/test/base/src/app/nested-outlet/nested-outlet.component.ts
similarity index 100%
rename from angular/test/base/src/app/nested-outlet/nested-outlet.component.ts
rename to packages/angular/test/base/src/app/nested-outlet/nested-outlet.component.ts
diff --git a/angular/test/base/src/app/overlays-inline/index.ts b/packages/angular/test/base/src/app/overlays-inline/index.ts
similarity index 100%
rename from angular/test/base/src/app/overlays-inline/index.ts
rename to packages/angular/test/base/src/app/overlays-inline/index.ts
diff --git a/angular/test/base/src/app/overlays-inline/overlays-inline-routing.module.ts b/packages/angular/test/base/src/app/overlays-inline/overlays-inline-routing.module.ts
similarity index 100%
rename from angular/test/base/src/app/overlays-inline/overlays-inline-routing.module.ts
rename to packages/angular/test/base/src/app/overlays-inline/overlays-inline-routing.module.ts
diff --git a/angular/test/base/src/app/overlays-inline/overlays-inline.component.html b/packages/angular/test/base/src/app/overlays-inline/overlays-inline.component.html
similarity index 100%
rename from angular/test/base/src/app/overlays-inline/overlays-inline.component.html
rename to packages/angular/test/base/src/app/overlays-inline/overlays-inline.component.html
diff --git a/angular/test/base/src/app/overlays-inline/overlays-inline.component.ts b/packages/angular/test/base/src/app/overlays-inline/overlays-inline.component.ts
similarity index 100%
rename from angular/test/base/src/app/overlays-inline/overlays-inline.component.ts
rename to packages/angular/test/base/src/app/overlays-inline/overlays-inline.component.ts
diff --git a/angular/test/base/src/app/overlays-inline/overlays-inline.module.ts b/packages/angular/test/base/src/app/overlays-inline/overlays-inline.module.ts
similarity index 100%
rename from angular/test/base/src/app/overlays-inline/overlays-inline.module.ts
rename to packages/angular/test/base/src/app/overlays-inline/overlays-inline.module.ts
diff --git a/angular/test/base/src/app/popover-inline/index.ts b/packages/angular/test/base/src/app/popover-inline/index.ts
similarity index 100%
rename from angular/test/base/src/app/popover-inline/index.ts
rename to packages/angular/test/base/src/app/popover-inline/index.ts
diff --git a/angular/test/base/src/app/popover-inline/popover-inline-routing.module.ts b/packages/angular/test/base/src/app/popover-inline/popover-inline-routing.module.ts
similarity index 100%
rename from angular/test/base/src/app/popover-inline/popover-inline-routing.module.ts
rename to packages/angular/test/base/src/app/popover-inline/popover-inline-routing.module.ts
diff --git a/angular/test/base/src/app/popover-inline/popover-inline.component.html b/packages/angular/test/base/src/app/popover-inline/popover-inline.component.html
similarity index 100%
rename from angular/test/base/src/app/popover-inline/popover-inline.component.html
rename to packages/angular/test/base/src/app/popover-inline/popover-inline.component.html
diff --git a/angular/test/base/src/app/popover-inline/popover-inline.component.ts b/packages/angular/test/base/src/app/popover-inline/popover-inline.component.ts
similarity index 100%
rename from angular/test/base/src/app/popover-inline/popover-inline.component.ts
rename to packages/angular/test/base/src/app/popover-inline/popover-inline.component.ts
diff --git a/angular/test/base/src/app/popover-inline/popover-inline.module.ts b/packages/angular/test/base/src/app/popover-inline/popover-inline.module.ts
similarity index 100%
rename from angular/test/base/src/app/popover-inline/popover-inline.module.ts
rename to packages/angular/test/base/src/app/popover-inline/popover-inline.module.ts
diff --git a/angular/test/base/src/app/providers/providers.component.html b/packages/angular/test/base/src/app/providers/providers.component.html
similarity index 100%
rename from angular/test/base/src/app/providers/providers.component.html
rename to packages/angular/test/base/src/app/providers/providers.component.html
diff --git a/angular/test/base/src/app/providers/providers.component.ts b/packages/angular/test/base/src/app/providers/providers.component.ts
similarity index 100%
rename from angular/test/base/src/app/providers/providers.component.ts
rename to packages/angular/test/base/src/app/providers/providers.component.ts
diff --git a/angular/test/base/src/app/router-link-page/router-link-page.component.html b/packages/angular/test/base/src/app/router-link-page/router-link-page.component.html
similarity index 100%
rename from angular/test/base/src/app/router-link-page/router-link-page.component.html
rename to packages/angular/test/base/src/app/router-link-page/router-link-page.component.html
diff --git a/angular/test/base/src/app/router-link-page/router-link-page.component.ts b/packages/angular/test/base/src/app/router-link-page/router-link-page.component.ts
similarity index 100%
rename from angular/test/base/src/app/router-link-page/router-link-page.component.ts
rename to packages/angular/test/base/src/app/router-link-page/router-link-page.component.ts
diff --git a/angular/test/base/src/app/router-link-page2/router-link-page2.component.html b/packages/angular/test/base/src/app/router-link-page2/router-link-page2.component.html
similarity index 100%
rename from angular/test/base/src/app/router-link-page2/router-link-page2.component.html
rename to packages/angular/test/base/src/app/router-link-page2/router-link-page2.component.html
diff --git a/angular/test/base/src/app/router-link-page2/router-link-page2.component.ts b/packages/angular/test/base/src/app/router-link-page2/router-link-page2.component.ts
similarity index 100%
rename from angular/test/base/src/app/router-link-page2/router-link-page2.component.ts
rename to packages/angular/test/base/src/app/router-link-page2/router-link-page2.component.ts
diff --git a/angular/test/base/src/app/router-link-page3/router-link-page3.component.html b/packages/angular/test/base/src/app/router-link-page3/router-link-page3.component.html
similarity index 100%
rename from angular/test/base/src/app/router-link-page3/router-link-page3.component.html
rename to packages/angular/test/base/src/app/router-link-page3/router-link-page3.component.html
diff --git a/angular/test/base/src/app/router-link-page3/router-link-page3.component.ts b/packages/angular/test/base/src/app/router-link-page3/router-link-page3.component.ts
similarity index 100%
rename from angular/test/base/src/app/router-link-page3/router-link-page3.component.ts
rename to packages/angular/test/base/src/app/router-link-page3/router-link-page3.component.ts
diff --git a/angular/test/base/src/app/router-link/router-link.component.html b/packages/angular/test/base/src/app/router-link/router-link.component.html
similarity index 100%
rename from angular/test/base/src/app/router-link/router-link.component.html
rename to packages/angular/test/base/src/app/router-link/router-link.component.html
diff --git a/angular/test/base/src/app/router-link/router-link.component.ts b/packages/angular/test/base/src/app/router-link/router-link.component.ts
similarity index 100%
rename from angular/test/base/src/app/router-link/router-link.component.ts
rename to packages/angular/test/base/src/app/router-link/router-link.component.ts
diff --git a/angular/test/base/src/app/searchbar/searchbar-routing.module.ts b/packages/angular/test/base/src/app/searchbar/searchbar-routing.module.ts
similarity index 100%
rename from angular/test/base/src/app/searchbar/searchbar-routing.module.ts
rename to packages/angular/test/base/src/app/searchbar/searchbar-routing.module.ts
diff --git a/angular/test/base/src/app/searchbar/searchbar.component.html b/packages/angular/test/base/src/app/searchbar/searchbar.component.html
similarity index 100%
rename from angular/test/base/src/app/searchbar/searchbar.component.html
rename to packages/angular/test/base/src/app/searchbar/searchbar.component.html
diff --git a/angular/test/base/src/app/searchbar/searchbar.component.ts b/packages/angular/test/base/src/app/searchbar/searchbar.component.ts
similarity index 100%
rename from angular/test/base/src/app/searchbar/searchbar.component.ts
rename to packages/angular/test/base/src/app/searchbar/searchbar.component.ts
diff --git a/angular/test/base/src/app/searchbar/searchbar.module.ts b/packages/angular/test/base/src/app/searchbar/searchbar.module.ts
similarity index 100%
rename from angular/test/base/src/app/searchbar/searchbar.module.ts
rename to packages/angular/test/base/src/app/searchbar/searchbar.module.ts
diff --git a/angular/test/base/src/app/slides/slides.component.ts b/packages/angular/test/base/src/app/slides/slides.component.ts
similarity index 100%
rename from angular/test/base/src/app/slides/slides.component.ts
rename to packages/angular/test/base/src/app/slides/slides.component.ts
diff --git a/angular/test/base/src/app/standalone/standalone.component.html b/packages/angular/test/base/src/app/standalone/standalone.component.html
similarity index 100%
rename from angular/test/base/src/app/standalone/standalone.component.html
rename to packages/angular/test/base/src/app/standalone/standalone.component.html
diff --git a/angular/test/base/src/app/standalone/standalone.component.ts b/packages/angular/test/base/src/app/standalone/standalone.component.ts
similarity index 100%
rename from angular/test/base/src/app/standalone/standalone.component.ts
rename to packages/angular/test/base/src/app/standalone/standalone.component.ts
diff --git a/angular/test/base/src/app/tabs-global/tabs-global-routing.module.ts b/packages/angular/test/base/src/app/tabs-global/tabs-global-routing.module.ts
similarity index 100%
rename from angular/test/base/src/app/tabs-global/tabs-global-routing.module.ts
rename to packages/angular/test/base/src/app/tabs-global/tabs-global-routing.module.ts
diff --git a/angular/test/base/src/app/tabs-global/tabs-global.component.html b/packages/angular/test/base/src/app/tabs-global/tabs-global.component.html
similarity index 100%
rename from angular/test/base/src/app/tabs-global/tabs-global.component.html
rename to packages/angular/test/base/src/app/tabs-global/tabs-global.component.html
diff --git a/angular/test/base/src/app/tabs-global/tabs-global.component.ts b/packages/angular/test/base/src/app/tabs-global/tabs-global.component.ts
similarity index 100%
rename from angular/test/base/src/app/tabs-global/tabs-global.component.ts
rename to packages/angular/test/base/src/app/tabs-global/tabs-global.component.ts
diff --git a/angular/test/base/src/app/tabs-global/tabs-global.module.ts b/packages/angular/test/base/src/app/tabs-global/tabs-global.module.ts
similarity index 100%
rename from angular/test/base/src/app/tabs-global/tabs-global.module.ts
rename to packages/angular/test/base/src/app/tabs-global/tabs-global.module.ts
diff --git a/angular/test/base/src/app/tabs-lazy/tabs-lazy-routing.module.ts b/packages/angular/test/base/src/app/tabs-lazy/tabs-lazy-routing.module.ts
similarity index 100%
rename from angular/test/base/src/app/tabs-lazy/tabs-lazy-routing.module.ts
rename to packages/angular/test/base/src/app/tabs-lazy/tabs-lazy-routing.module.ts
diff --git a/angular/test/base/src/app/tabs-lazy/tabs-lazy.module.ts b/packages/angular/test/base/src/app/tabs-lazy/tabs-lazy.module.ts
similarity index 100%
rename from angular/test/base/src/app/tabs-lazy/tabs-lazy.module.ts
rename to packages/angular/test/base/src/app/tabs-lazy/tabs-lazy.module.ts
diff --git a/angular/test/base/src/app/tabs-lazy/tabs-tab3-nested/tabs-tab3-nested.component.html b/packages/angular/test/base/src/app/tabs-lazy/tabs-tab3-nested/tabs-tab3-nested.component.html
similarity index 100%
rename from angular/test/base/src/app/tabs-lazy/tabs-tab3-nested/tabs-tab3-nested.component.html
rename to packages/angular/test/base/src/app/tabs-lazy/tabs-tab3-nested/tabs-tab3-nested.component.html
diff --git a/angular/test/base/src/app/tabs-lazy/tabs-tab3-nested/tabs-tab3-nested.component.ts b/packages/angular/test/base/src/app/tabs-lazy/tabs-tab3-nested/tabs-tab3-nested.component.ts
similarity index 100%
rename from angular/test/base/src/app/tabs-lazy/tabs-tab3-nested/tabs-tab3-nested.component.ts
rename to packages/angular/test/base/src/app/tabs-lazy/tabs-tab3-nested/tabs-tab3-nested.component.ts
diff --git a/angular/test/base/src/app/tabs-lazy/tabs-tab3/tabs-tab3.component.html b/packages/angular/test/base/src/app/tabs-lazy/tabs-tab3/tabs-tab3.component.html
similarity index 100%
rename from angular/test/base/src/app/tabs-lazy/tabs-tab3/tabs-tab3.component.html
rename to packages/angular/test/base/src/app/tabs-lazy/tabs-tab3/tabs-tab3.component.html
diff --git a/angular/test/base/src/app/tabs-lazy/tabs-tab3/tabs-tab3.component.ts b/packages/angular/test/base/src/app/tabs-lazy/tabs-tab3/tabs-tab3.component.ts
similarity index 100%
rename from angular/test/base/src/app/tabs-lazy/tabs-tab3/tabs-tab3.component.ts
rename to packages/angular/test/base/src/app/tabs-lazy/tabs-tab3/tabs-tab3.component.ts
diff --git a/packages/angular/test/base/src/app/tabs-slots.component.ts b/packages/angular/test/base/src/app/tabs-slots.component.ts
new file mode 100644
index 0000000000..68715ff9c2
--- /dev/null
+++ b/packages/angular/test/base/src/app/tabs-slots.component.ts
@@ -0,0 +1,32 @@
+import { Component } from "@angular/core";
+import { IonicModule } from "@ionic/angular";
+
+/**
+ * Test purpose: Validates that the tab bar is relocated to the
+ * correct location when the slot attribute changes or is bound
+ * to a variable.
+ */
+@Component({
+  selector: 'app-tabs-slots',
+  template: `
+    <ion-tabs>
+      <ion-tab-bar [slot]="slot"></ion-tab-bar>
+    </ion-tabs>
+    <ion-fab vertical="bottom" horizontal="end">
+      <button id="set-slot-top" (click)="setSlot('top')">Slot - top</button>
+      <br />
+      <button id="set-slot-bottom"(click)="setSlot('bottom')">Slot - bottom</button>
+    </ion-fab>
+  `,
+  imports: [IonicModule],
+  standalone: true
+})
+export class TabsSlotsComponent {
+
+  slot?: string;
+
+  setSlot(newSlot: string) {
+    this.slot = newSlot;
+  }
+
+}
diff --git a/angular/test/base/src/app/tabs-tab1-nested/tabs-tab1-nested.component.html b/packages/angular/test/base/src/app/tabs-tab1-nested/tabs-tab1-nested.component.html
similarity index 100%
rename from angular/test/base/src/app/tabs-tab1-nested/tabs-tab1-nested.component.html
rename to packages/angular/test/base/src/app/tabs-tab1-nested/tabs-tab1-nested.component.html
diff --git a/angular/test/base/src/app/tabs-tab1-nested/tabs-tab1-nested.component.ts b/packages/angular/test/base/src/app/tabs-tab1-nested/tabs-tab1-nested.component.ts
similarity index 100%
rename from angular/test/base/src/app/tabs-tab1-nested/tabs-tab1-nested.component.ts
rename to packages/angular/test/base/src/app/tabs-tab1-nested/tabs-tab1-nested.component.ts
diff --git a/angular/test/base/src/app/tabs-tab1/tabs-tab1.component.html b/packages/angular/test/base/src/app/tabs-tab1/tabs-tab1.component.html
similarity index 83%
rename from angular/test/base/src/app/tabs-tab1/tabs-tab1.component.html
rename to packages/angular/test/base/src/app/tabs-tab1/tabs-tab1.component.html
index 986ca90c1b..c9aefba4ee 100644
--- a/angular/test/base/src/app/tabs-tab1/tabs-tab1.component.html
+++ b/packages/angular/test/base/src/app/tabs-tab1/tabs-tab1.component.html
@@ -7,8 +7,12 @@
 <ion-content class="ion-padding">
   <h1>Welcome to Tab1</h1>
   <ion-segment [(ngModel)]="segment" (ionChange)="segmentChanged($event)">
-    <ion-segment-button value="one">One</ion-segment-button>
-    <ion-segment-button value="two">Two</ion-segment-button>
+    <ion-segment-button value="one">
+      <ion-label>One</ion-label>
+    </ion-segment-button>
+    <ion-segment-button value="two">
+      <ion-label>Two</ion-label>
+    </ion-segment-button>
   </ion-segment>
   <p>
     Segment changed: <span class="segment-changed">{{changed}}</span>
diff --git a/angular/test/base/src/app/tabs-tab1/tabs-tab1.component.ts b/packages/angular/test/base/src/app/tabs-tab1/tabs-tab1.component.ts
similarity index 100%
rename from angular/test/base/src/app/tabs-tab1/tabs-tab1.component.ts
rename to packages/angular/test/base/src/app/tabs-tab1/tabs-tab1.component.ts
diff --git a/angular/test/base/src/app/tabs-tab2/tabs-tab2.component.html b/packages/angular/test/base/src/app/tabs-tab2/tabs-tab2.component.html
similarity index 77%
rename from angular/test/base/src/app/tabs-tab2/tabs-tab2.component.html
rename to packages/angular/test/base/src/app/tabs-tab2/tabs-tab2.component.html
index 3975830f77..93853ab16d 100644
--- a/angular/test/base/src/app/tabs-tab2/tabs-tab2.component.html
+++ b/packages/angular/test/base/src/app/tabs-tab2/tabs-tab2.component.html
@@ -7,8 +7,12 @@
 <ion-content class="ion-padding">
   <h1>Welcome to Tab 2</h1>
   <ion-segment [(ngModel)]="segment" (ionChange)="segmentChanged($event)">
-    <ion-segment-button value="one">One</ion-segment-button>
-    <ion-segment-button value="two">Two</ion-segment-button>
+    <ion-segment-button value="one">
+      <ion-label>One</ion-label>
+    </ion-segment-button>
+    <ion-segment-button value="two">
+      <ion-label>Two</ion-label>
+    </ion-segment-button>
   </ion-segment>
   <p>
     Segment changed: <span class="segment-changed">{{changed}}</span>
diff --git a/angular/test/base/src/app/tabs-tab2/tabs-tab2.component.ts b/packages/angular/test/base/src/app/tabs-tab2/tabs-tab2.component.ts
similarity index 100%
rename from angular/test/base/src/app/tabs-tab2/tabs-tab2.component.ts
rename to packages/angular/test/base/src/app/tabs-tab2/tabs-tab2.component.ts
diff --git a/angular/test/base/src/app/tabs/tabs.component.css b/packages/angular/test/base/src/app/tabs/tabs.component.css
similarity index 100%
rename from angular/test/base/src/app/tabs/tabs.component.css
rename to packages/angular/test/base/src/app/tabs/tabs.component.css
diff --git a/angular/test/base/src/app/tabs/tabs.component.html b/packages/angular/test/base/src/app/tabs/tabs.component.html
similarity index 100%
rename from angular/test/base/src/app/tabs/tabs.component.html
rename to packages/angular/test/base/src/app/tabs/tabs.component.html
diff --git a/angular/test/base/src/app/tabs/tabs.component.ts b/packages/angular/test/base/src/app/tabs/tabs.component.ts
similarity index 100%
rename from angular/test/base/src/app/tabs/tabs.component.ts
rename to packages/angular/test/base/src/app/tabs/tabs.component.ts
diff --git a/angular/test/base/src/app/tabs/tabs.module.ts b/packages/angular/test/base/src/app/tabs/tabs.module.ts
similarity index 100%
rename from angular/test/base/src/app/tabs/tabs.module.ts
rename to packages/angular/test/base/src/app/tabs/tabs.module.ts
diff --git a/angular/test/base/src/app/tabs/tabs.router.module.ts b/packages/angular/test/base/src/app/tabs/tabs.router.module.ts
similarity index 100%
rename from angular/test/base/src/app/tabs/tabs.router.module.ts
rename to packages/angular/test/base/src/app/tabs/tabs.router.module.ts
diff --git a/angular/test/base/src/app/textarea/textarea-routing.module.ts b/packages/angular/test/base/src/app/textarea/textarea-routing.module.ts
similarity index 100%
rename from angular/test/base/src/app/textarea/textarea-routing.module.ts
rename to packages/angular/test/base/src/app/textarea/textarea-routing.module.ts
diff --git a/angular/test/base/src/app/textarea/textarea.component.html b/packages/angular/test/base/src/app/textarea/textarea.component.html
similarity index 100%
rename from angular/test/base/src/app/textarea/textarea.component.html
rename to packages/angular/test/base/src/app/textarea/textarea.component.html
diff --git a/angular/test/base/src/app/textarea/textarea.component.ts b/packages/angular/test/base/src/app/textarea/textarea.component.ts
similarity index 100%
rename from angular/test/base/src/app/textarea/textarea.component.ts
rename to packages/angular/test/base/src/app/textarea/textarea.component.ts
diff --git a/angular/test/base/src/app/textarea/textarea.module.ts b/packages/angular/test/base/src/app/textarea/textarea.module.ts
similarity index 100%
rename from angular/test/base/src/app/textarea/textarea.module.ts
rename to packages/angular/test/base/src/app/textarea/textarea.module.ts
diff --git a/angular/test/base/src/app/version-test/index.ts b/packages/angular/test/base/src/app/version-test/index.ts
similarity index 100%
rename from angular/test/base/src/app/version-test/index.ts
rename to packages/angular/test/base/src/app/version-test/index.ts
diff --git a/angular/test/base/src/app/version-test/version-test-routing.module.ts b/packages/angular/test/base/src/app/version-test/version-test-routing.module.ts
similarity index 100%
rename from angular/test/base/src/app/version-test/version-test-routing.module.ts
rename to packages/angular/test/base/src/app/version-test/version-test-routing.module.ts
diff --git a/angular/test/base/src/app/version-test/version-test.component.html b/packages/angular/test/base/src/app/version-test/version-test.component.html
similarity index 100%
rename from angular/test/base/src/app/version-test/version-test.component.html
rename to packages/angular/test/base/src/app/version-test/version-test.component.html
diff --git a/angular/test/base/src/app/version-test/version-test.component.ts b/packages/angular/test/base/src/app/version-test/version-test.component.ts
similarity index 100%
rename from angular/test/base/src/app/version-test/version-test.component.ts
rename to packages/angular/test/base/src/app/version-test/version-test.component.ts
diff --git a/angular/test/base/src/app/version-test/version-test.module.ts b/packages/angular/test/base/src/app/version-test/version-test.module.ts
similarity index 100%
rename from angular/test/base/src/app/version-test/version-test.module.ts
rename to packages/angular/test/base/src/app/version-test/version-test.module.ts
diff --git a/angular/test/base/src/app/view-child/view-child.component.html b/packages/angular/test/base/src/app/view-child/view-child.component.html
similarity index 100%
rename from angular/test/base/src/app/view-child/view-child.component.html
rename to packages/angular/test/base/src/app/view-child/view-child.component.html
diff --git a/angular/test/base/src/app/view-child/view-child.component.ts b/packages/angular/test/base/src/app/view-child/view-child.component.ts
similarity index 100%
rename from angular/test/base/src/app/view-child/view-child.component.ts
rename to packages/angular/test/base/src/app/view-child/view-child.component.ts
diff --git a/angular/test/base/src/app/virtual-scroll-detail/virtual-scroll-detail.component.ts b/packages/angular/test/base/src/app/virtual-scroll-detail/virtual-scroll-detail.component.ts
similarity index 100%
rename from angular/test/base/src/app/virtual-scroll-detail/virtual-scroll-detail.component.ts
rename to packages/angular/test/base/src/app/virtual-scroll-detail/virtual-scroll-detail.component.ts
diff --git a/angular/test/base/src/app/virtual-scroll-inner/virtual-scroll-inner.component.ts b/packages/angular/test/base/src/app/virtual-scroll-inner/virtual-scroll-inner.component.ts
similarity index 100%
rename from angular/test/base/src/app/virtual-scroll-inner/virtual-scroll-inner.component.ts
rename to packages/angular/test/base/src/app/virtual-scroll-inner/virtual-scroll-inner.component.ts
diff --git a/angular/test/base/src/app/virtual-scroll/virtual-scroll.component.ts b/packages/angular/test/base/src/app/virtual-scroll/virtual-scroll.component.ts
similarity index 100%
rename from angular/test/base/src/app/virtual-scroll/virtual-scroll.component.ts
rename to packages/angular/test/base/src/app/virtual-scroll/virtual-scroll.component.ts
diff --git a/angular/test/base/src/assets/.gitkeep b/packages/angular/test/base/src/assets/.gitkeep
similarity index 100%
rename from angular/test/base/src/assets/.gitkeep
rename to packages/angular/test/base/src/assets/.gitkeep
diff --git a/angular/test/base/src/environments/environment.prod.ts b/packages/angular/test/base/src/environments/environment.prod.ts
similarity index 100%
rename from angular/test/base/src/environments/environment.prod.ts
rename to packages/angular/test/base/src/environments/environment.prod.ts
diff --git a/angular/test/base/src/environments/environment.ts b/packages/angular/test/base/src/environments/environment.ts
similarity index 100%
rename from angular/test/base/src/environments/environment.ts
rename to packages/angular/test/base/src/environments/environment.ts
diff --git a/angular/test/base/src/favicon.ico b/packages/angular/test/base/src/favicon.ico
similarity index 100%
rename from angular/test/base/src/favicon.ico
rename to packages/angular/test/base/src/favicon.ico
diff --git a/angular/test/base/src/index.html b/packages/angular/test/base/src/index.html
similarity index 100%
rename from angular/test/base/src/index.html
rename to packages/angular/test/base/src/index.html
diff --git a/angular/test/base/src/main.server.ts b/packages/angular/test/base/src/main.server.ts
similarity index 100%
rename from angular/test/base/src/main.server.ts
rename to packages/angular/test/base/src/main.server.ts
diff --git a/angular/test/base/src/main.ts b/packages/angular/test/base/src/main.ts
similarity index 100%
rename from angular/test/base/src/main.ts
rename to packages/angular/test/base/src/main.ts
diff --git a/angular/test/base/src/polyfills.ts b/packages/angular/test/base/src/polyfills.ts
similarity index 100%
rename from angular/test/base/src/polyfills.ts
rename to packages/angular/test/base/src/polyfills.ts
diff --git a/angular/test/base/src/styles.css b/packages/angular/test/base/src/styles.css
similarity index 100%
rename from angular/test/base/src/styles.css
rename to packages/angular/test/base/src/styles.css
diff --git a/angular/test/base/src/zone-flags.ts b/packages/angular/test/base/src/zone-flags.ts
similarity index 100%
rename from angular/test/base/src/zone-flags.ts
rename to packages/angular/test/base/src/zone-flags.ts
diff --git a/angular/test/base/tsconfig.app.json b/packages/angular/test/base/tsconfig.app.json
similarity index 100%
rename from angular/test/base/tsconfig.app.json
rename to packages/angular/test/base/tsconfig.app.json
diff --git a/angular/test/base/tsconfig.json b/packages/angular/test/base/tsconfig.json
similarity index 100%
rename from angular/test/base/tsconfig.json
rename to packages/angular/test/base/tsconfig.json
diff --git a/angular/test/base/tsconfig.server.json b/packages/angular/test/base/tsconfig.server.json
similarity index 100%
rename from angular/test/base/tsconfig.server.json
rename to packages/angular/test/base/tsconfig.server.json
diff --git a/angular/test/base/tsconfig.spec.json b/packages/angular/test/base/tsconfig.spec.json
similarity index 100%
rename from angular/test/base/tsconfig.spec.json
rename to packages/angular/test/base/tsconfig.spec.json
diff --git a/angular/test/build.sh b/packages/angular/test/build.sh
similarity index 100%
rename from angular/test/build.sh
rename to packages/angular/test/build.sh
diff --git a/angular/test/sync-e2e.sh b/packages/angular/test/sync-e2e.sh
similarity index 100%
rename from angular/test/sync-e2e.sh
rename to packages/angular/test/sync-e2e.sh
diff --git a/angular/tsconfig.json b/packages/angular/tsconfig.json
similarity index 100%
rename from angular/tsconfig.json
rename to packages/angular/tsconfig.json
diff --git a/angular/tsconfig.schematics.json b/packages/angular/tsconfig.schematics.json
similarity index 100%
rename from angular/tsconfig.schematics.json
rename to packages/angular/tsconfig.schematics.json
diff --git a/angular/tslint.json b/packages/angular/tslint.json
similarity index 100%
rename from angular/tslint.json
rename to packages/angular/tslint.json
diff --git a/packages/react-router/CHANGELOG.md b/packages/react-router/CHANGELOG.md
index 6e8e57473f..afa4f1897c 100644
--- a/packages/react-router/CHANGELOG.md
+++ b/packages/react-router/CHANGELOG.md
@@ -3,6 +3,38 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [7.1.3](https://github.com/ionic-team/ionic-framework/compare/v7.1.2...v7.1.3) (2023-07-12)
+
+**Note:** Version bump only for package @ionic/react-router
+
+
+
+
+
+## [7.1.2](https://github.com/ionic-team/ionic-framework/compare/v7.1.1...v7.1.2) (2023-07-06)
+
+**Note:** Version bump only for package @ionic/react-router
+
+
+
+
+
+## [7.1.1](https://github.com/ionic-team/ionic-framework/compare/v7.1.0...v7.1.1) (2023-06-26)
+
+**Note:** Version bump only for package @ionic/react-router
+
+
+
+
+
+# [7.1.0](https://github.com/ionic-team/ionic-framework/compare/v7.0.14...v7.1.0) (2023-06-21)
+
+**Note:** Version bump only for package @ionic/react-router
+
+
+
+
+
 ## [7.0.14](https://github.com/ionic-team/ionic-framework/compare/v7.0.13...v7.0.14) (2023-06-15)
 
 **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 c9cdb98d9b..c90c6903a8 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.0.14",
+  "version": "7.1.3",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/react-router",
-      "version": "7.0.14",
+      "version": "7.1.3",
       "license": "MIT",
       "dependencies": {
-        "@ionic/react": "^7.0.14",
+        "@ionic/react": "^7.1.3",
         "tslib": "*"
       },
       "devDependencies": {
@@ -205,15 +205,35 @@
       "dev": true
     },
     "node_modules/@ionic/core": {
-      "version": "7.0.14",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.0.14.tgz",
-      "integrity": "sha512-M0su64amw6HsZwsmWuHE4Wr2mChQdvBI7JKZXYCrF2Acn7GTD5cjMw6o1cYzwzf0PEap/RQ0y4paU9lO4Lu+lA==",
+      "version": "7.1.3",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.1.3.tgz",
+      "integrity": "sha512-Wg3jBOoVpoHlTuKxcFa5gX9rYtI8FI6zmwb7ERdk6B9Uvk4KDgJLc1MnZK8IVb6RWTg1iipzBRdU40cX09bR4w==",
       "dependencies": {
         "@stencil/core": "^3.4.0",
-        "ionicons": "^7.1.0",
+        "ionicons": "7.1.0",
         "tslib": "^2.1.0"
       }
     },
+    "node_modules/@ionic/core/node_modules/ionicons": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-7.1.0.tgz",
+      "integrity": "sha512-iE4GuEdEHARJpp0sWL7WJZCzNCf5VxpNRhAjW0fLnZPnNL5qZOJUcfup2Z2Ty7Jk8Q5hacrHfGEB1lCwOdXqGg==",
+      "dependencies": {
+        "@stencil/core": "^2.18.0"
+      }
+    },
+    "node_modules/@ionic/core/node_modules/ionicons/node_modules/@stencil/core": {
+      "version": "2.22.3",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.22.3.tgz",
+      "integrity": "sha512-kmVA0M/HojwsfkeHsifvHVIYe4l5tin7J5+DLgtl8h6WWfiMClND5K3ifCXXI2ETDNKiEk21p6jql3Fx9o2rng==",
+      "bin": {
+        "stencil": "bin/stencil"
+      },
+      "engines": {
+        "node": ">=12.10.0",
+        "npm": ">=6.0.0"
+      }
+    },
     "node_modules/@ionic/eslint-config": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/@ionic/eslint-config/-/eslint-config-0.3.0.tgz",
@@ -381,11 +401,11 @@
       }
     },
     "node_modules/@ionic/react": {
-      "version": "7.0.14",
-      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-7.0.14.tgz",
-      "integrity": "sha512-0zHYAUJUoBMGXh4LZ8skXngnDJn6xWpCCResXxZt3ffg8gPVvzf5V6yMhN8Gbx+0iVjev5Sf5+dGgDZLixmEKg==",
+      "version": "7.1.3",
+      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-7.1.3.tgz",
+      "integrity": "sha512-5c/u4XVw6NbuMpjlutzOapDZsvanGdyVROrisMvp+lDQCy7ewgTp0jS0jdbS7cQiLFRpsSLjxgjZawVVqmzw9w==",
       "dependencies": {
-        "@ionic/core": "7.0.14",
+        "@ionic/core": "7.1.3",
         "ionicons": "^7.0.0",
         "tslib": "*"
       },
@@ -466,9 +486,9 @@
       }
     },
     "node_modules/@stencil/core": {
-      "version": "3.4.0",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-3.4.0.tgz",
-      "integrity": "sha512-kEtPtV6QegME8YgMjWrhS7KktItbhqOpAuK9aXypDdI/7bLU9iM/4DtnQGWY/DARBophk+XRBfNXcE62Bmi0dw==",
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-3.4.1.tgz",
+      "integrity": "sha512-7rjOmM0W9K5op2gtOQRLERGH1155rv2fm6ppxOzYqqG8ISct4m9skp5XgUBYPu+GSPsJFdRuCIQs0IuVsG/7+g==",
       "bin": {
         "stencil": "bin/stencil"
       },
@@ -3643,13 +3663,30 @@
       "dev": true
     },
     "@ionic/core": {
-      "version": "7.0.14",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.0.14.tgz",
-      "integrity": "sha512-M0su64amw6HsZwsmWuHE4Wr2mChQdvBI7JKZXYCrF2Acn7GTD5cjMw6o1cYzwzf0PEap/RQ0y4paU9lO4Lu+lA==",
+      "version": "7.1.3",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.1.3.tgz",
+      "integrity": "sha512-Wg3jBOoVpoHlTuKxcFa5gX9rYtI8FI6zmwb7ERdk6B9Uvk4KDgJLc1MnZK8IVb6RWTg1iipzBRdU40cX09bR4w==",
       "requires": {
         "@stencil/core": "^3.4.0",
-        "ionicons": "^7.1.0",
+        "ionicons": "7.1.0",
         "tslib": "^2.1.0"
+      },
+      "dependencies": {
+        "ionicons": {
+          "version": "7.1.0",
+          "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-7.1.0.tgz",
+          "integrity": "sha512-iE4GuEdEHARJpp0sWL7WJZCzNCf5VxpNRhAjW0fLnZPnNL5qZOJUcfup2Z2Ty7Jk8Q5hacrHfGEB1lCwOdXqGg==",
+          "requires": {
+            "@stencil/core": "^2.18.0"
+          },
+          "dependencies": {
+            "@stencil/core": {
+              "version": "2.22.3",
+              "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.22.3.tgz",
+              "integrity": "sha512-kmVA0M/HojwsfkeHsifvHVIYe4l5tin7J5+DLgtl8h6WWfiMClND5K3ifCXXI2ETDNKiEk21p6jql3Fx9o2rng=="
+            }
+          }
+        }
       }
     },
     "@ionic/eslint-config": {
@@ -3749,11 +3786,11 @@
       "requires": {}
     },
     "@ionic/react": {
-      "version": "7.0.14",
-      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-7.0.14.tgz",
-      "integrity": "sha512-0zHYAUJUoBMGXh4LZ8skXngnDJn6xWpCCResXxZt3ffg8gPVvzf5V6yMhN8Gbx+0iVjev5Sf5+dGgDZLixmEKg==",
+      "version": "7.1.3",
+      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-7.1.3.tgz",
+      "integrity": "sha512-5c/u4XVw6NbuMpjlutzOapDZsvanGdyVROrisMvp+lDQCy7ewgTp0jS0jdbS7cQiLFRpsSLjxgjZawVVqmzw9w==",
       "requires": {
-        "@ionic/core": "7.0.14",
+        "@ionic/core": "7.1.3",
         "ionicons": "^7.0.0",
         "tslib": "*"
       }
@@ -3807,9 +3844,9 @@
       }
     },
     "@stencil/core": {
-      "version": "3.4.0",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-3.4.0.tgz",
-      "integrity": "sha512-kEtPtV6QegME8YgMjWrhS7KktItbhqOpAuK9aXypDdI/7bLU9iM/4DtnQGWY/DARBophk+XRBfNXcE62Bmi0dw=="
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-3.4.1.tgz",
+      "integrity": "sha512-7rjOmM0W9K5op2gtOQRLERGH1155rv2fm6ppxOzYqqG8ISct4m9skp5XgUBYPu+GSPsJFdRuCIQs0IuVsG/7+g=="
     },
     "@types/estree": {
       "version": "0.0.39",
diff --git a/packages/react-router/package.json b/packages/react-router/package.json
index 0af5f6eac3..4550222fa1 100644
--- a/packages/react-router/package.json
+++ b/packages/react-router/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/react-router",
-  "version": "7.0.14",
+  "version": "7.1.3",
   "description": "React Router wrapper for @ionic/react",
   "keywords": [
     "ionic",
@@ -37,7 +37,7 @@
     "dist/"
   ],
   "dependencies": {
-    "@ionic/react": "^7.0.14",
+    "@ionic/react": "^7.1.3",
     "tslib": "*"
   },
   "peerDependencies": {
diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md
index fe4dad8adb..1f0f1cb263 100644
--- a/packages/react/CHANGELOG.md
+++ b/packages/react/CHANGELOG.md
@@ -3,6 +3,41 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [7.1.3](https://github.com/ionic-team/ionic-framework/compare/v7.1.2...v7.1.3) (2023-07-12)
+
+**Note:** Version bump only for package @ionic/react
+
+
+
+
+
+## [7.1.2](https://github.com/ionic-team/ionic-framework/compare/v7.1.1...v7.1.2) (2023-07-06)
+
+**Note:** Version bump only for package @ionic/react
+
+
+
+
+
+## [7.1.1](https://github.com/ionic-team/ionic-framework/compare/v7.1.0...v7.1.1) (2023-06-26)
+
+**Note:** Version bump only for package @ionic/react
+
+
+
+
+
+# [7.1.0](https://github.com/ionic-team/ionic-framework/compare/v7.0.14...v7.1.0) (2023-06-21)
+
+
+### Features
+
+* **segment, segment-button:** update segment value property to accept numbers ([#27222](https://github.com/ionic-team/ionic-framework/issues/27222)) ([ec95ae5](https://github.com/ionic-team/ionic-framework/commit/ec95ae5cd38e3d2b9ec9fdbc9e237fa1241f7a4e)), closes [#27221](https://github.com/ionic-team/ionic-framework/issues/27221)
+
+
+
+
+
 ## [7.0.14](https://github.com/ionic-team/ionic-framework/compare/v7.0.13...v7.0.14) (2023-06-15)
 
 **Note:** Version bump only for package @ionic/react
diff --git a/packages/react/package-lock.json b/packages/react/package-lock.json
index cb8652058e..95f3a774c2 100644
--- a/packages/react/package-lock.json
+++ b/packages/react/package-lock.json
@@ -1,15 +1,15 @@
 {
   "name": "@ionic/react",
-  "version": "7.0.14",
+  "version": "7.1.3",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/react",
-      "version": "7.0.14",
+      "version": "7.1.3",
       "license": "MIT",
       "dependencies": {
-        "@ionic/core": "^7.0.14",
+        "@ionic/core": "^7.1.3",
         "ionicons": "^7.0.0",
         "tslib": "*"
       },
@@ -697,19 +697,19 @@
       "dev": true
     },
     "node_modules/@ionic/core": {
-      "version": "7.0.14",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.0.14.tgz",
-      "integrity": "sha512-M0su64amw6HsZwsmWuHE4Wr2mChQdvBI7JKZXYCrF2Acn7GTD5cjMw6o1cYzwzf0PEap/RQ0y4paU9lO4Lu+lA==",
+      "version": "7.1.3",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.1.3.tgz",
+      "integrity": "sha512-Wg3jBOoVpoHlTuKxcFa5gX9rYtI8FI6zmwb7ERdk6B9Uvk4KDgJLc1MnZK8IVb6RWTg1iipzBRdU40cX09bR4w==",
       "dependencies": {
         "@stencil/core": "^3.4.0",
-        "ionicons": "^7.1.0",
+        "ionicons": "7.1.0",
         "tslib": "^2.1.0"
       }
     },
     "node_modules/@ionic/core/node_modules/@stencil/core": {
-      "version": "3.4.0",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-3.4.0.tgz",
-      "integrity": "sha512-kEtPtV6QegME8YgMjWrhS7KktItbhqOpAuK9aXypDdI/7bLU9iM/4DtnQGWY/DARBophk+XRBfNXcE62Bmi0dw==",
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-3.4.1.tgz",
+      "integrity": "sha512-7rjOmM0W9K5op2gtOQRLERGH1155rv2fm6ppxOzYqqG8ISct4m9skp5XgUBYPu+GSPsJFdRuCIQs0IuVsG/7+g==",
       "bin": {
         "stencil": "bin/stencil"
       },
@@ -11778,19 +11778,19 @@
       "dev": true
     },
     "@ionic/core": {
-      "version": "7.0.14",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.0.14.tgz",
-      "integrity": "sha512-M0su64amw6HsZwsmWuHE4Wr2mChQdvBI7JKZXYCrF2Acn7GTD5cjMw6o1cYzwzf0PEap/RQ0y4paU9lO4Lu+lA==",
+      "version": "7.1.3",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.1.3.tgz",
+      "integrity": "sha512-Wg3jBOoVpoHlTuKxcFa5gX9rYtI8FI6zmwb7ERdk6B9Uvk4KDgJLc1MnZK8IVb6RWTg1iipzBRdU40cX09bR4w==",
       "requires": {
         "@stencil/core": "^3.4.0",
-        "ionicons": "^7.1.0",
+        "ionicons": "7.1.0",
         "tslib": "^2.1.0"
       },
       "dependencies": {
         "@stencil/core": {
-          "version": "3.4.0",
-          "resolved": "https://registry.npmjs.org/@stencil/core/-/core-3.4.0.tgz",
-          "integrity": "sha512-kEtPtV6QegME8YgMjWrhS7KktItbhqOpAuK9aXypDdI/7bLU9iM/4DtnQGWY/DARBophk+XRBfNXcE62Bmi0dw=="
+          "version": "3.4.1",
+          "resolved": "https://registry.npmjs.org/@stencil/core/-/core-3.4.1.tgz",
+          "integrity": "sha512-7rjOmM0W9K5op2gtOQRLERGH1155rv2fm6ppxOzYqqG8ISct4m9skp5XgUBYPu+GSPsJFdRuCIQs0IuVsG/7+g=="
         }
       }
     },
diff --git a/packages/react/package.json b/packages/react/package.json
index 67a5aa27da..dc7783bfbf 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/react",
-  "version": "7.0.14",
+  "version": "7.1.3",
   "description": "React specific wrapper for @ionic/core",
   "keywords": [
     "ionic",
@@ -41,7 +41,7 @@
     "css/"
   ],
   "dependencies": {
-    "@ionic/core": "^7.0.14",
+    "@ionic/core": "^7.1.3",
     "ionicons": "^7.0.0",
     "tslib": "*"
   },
diff --git a/packages/react/src/components/index.ts b/packages/react/src/components/index.ts
index 6e218fc3df..bb295f09a3 100644
--- a/packages/react/src/components/index.ts
+++ b/packages/react/src/components/index.ts
@@ -72,6 +72,7 @@ export {
   SearchbarInputEventDetail,
   SegmentChangeEventDetail,
   SegmentCustomEvent,
+  SegmentValue,
   SelectChangeEventDetail,
   SelectCustomEvent,
   TabsCustomEvent,
diff --git a/packages/vue-router/CHANGELOG.md b/packages/vue-router/CHANGELOG.md
index 0caca65213..5f34a9d6be 100644
--- a/packages/vue-router/CHANGELOG.md
+++ b/packages/vue-router/CHANGELOG.md
@@ -3,6 +3,38 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [7.1.3](https://github.com/ionic-team/ionic-framework/compare/v7.1.2...v7.1.3) (2023-07-12)
+
+**Note:** Version bump only for package @ionic/vue-router
+
+
+
+
+
+## [7.1.2](https://github.com/ionic-team/ionic-framework/compare/v7.1.1...v7.1.2) (2023-07-06)
+
+**Note:** Version bump only for package @ionic/vue-router
+
+
+
+
+
+## [7.1.1](https://github.com/ionic-team/ionic-framework/compare/v7.1.0...v7.1.1) (2023-06-26)
+
+**Note:** Version bump only for package @ionic/vue-router
+
+
+
+
+
+# [7.1.0](https://github.com/ionic-team/ionic-framework/compare/v7.0.14...v7.1.0) (2023-06-21)
+
+**Note:** Version bump only for package @ionic/vue-router
+
+
+
+
+
 ## [7.0.14](https://github.com/ionic-team/ionic-framework/compare/v7.0.13...v7.0.14) (2023-06-15)
 
 **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 60f7b71d4d..70facb795a 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.0.14",
+  "version": "7.1.3",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/vue-router",
-      "version": "7.0.14",
+      "version": "7.1.3",
       "license": "MIT",
       "dependencies": {
-        "@ionic/vue": "^7.0.14"
+        "@ionic/vue": "^7.1.3"
       },
       "devDependencies": {
         "@ionic/eslint-config": "^0.3.0",
@@ -660,15 +660,35 @@
       "dev": true
     },
     "node_modules/@ionic/core": {
-      "version": "7.0.14",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.0.14.tgz",
-      "integrity": "sha512-M0su64amw6HsZwsmWuHE4Wr2mChQdvBI7JKZXYCrF2Acn7GTD5cjMw6o1cYzwzf0PEap/RQ0y4paU9lO4Lu+lA==",
+      "version": "7.1.3",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.1.3.tgz",
+      "integrity": "sha512-Wg3jBOoVpoHlTuKxcFa5gX9rYtI8FI6zmwb7ERdk6B9Uvk4KDgJLc1MnZK8IVb6RWTg1iipzBRdU40cX09bR4w==",
       "dependencies": {
         "@stencil/core": "^3.4.0",
-        "ionicons": "^7.1.0",
+        "ionicons": "7.1.0",
         "tslib": "^2.1.0"
       }
     },
+    "node_modules/@ionic/core/node_modules/ionicons": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-7.1.0.tgz",
+      "integrity": "sha512-iE4GuEdEHARJpp0sWL7WJZCzNCf5VxpNRhAjW0fLnZPnNL5qZOJUcfup2Z2Ty7Jk8Q5hacrHfGEB1lCwOdXqGg==",
+      "dependencies": {
+        "@stencil/core": "^2.18.0"
+      }
+    },
+    "node_modules/@ionic/core/node_modules/ionicons/node_modules/@stencil/core": {
+      "version": "2.22.3",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.22.3.tgz",
+      "integrity": "sha512-kmVA0M/HojwsfkeHsifvHVIYe4l5tin7J5+DLgtl8h6WWfiMClND5K3ifCXXI2ETDNKiEk21p6jql3Fx9o2rng==",
+      "bin": {
+        "stencil": "bin/stencil"
+      },
+      "engines": {
+        "node": ">=12.10.0",
+        "npm": ">=6.0.0"
+      }
+    },
     "node_modules/@ionic/eslint-config": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/@ionic/eslint-config/-/eslint-config-0.3.0.tgz",
@@ -851,11 +871,11 @@
       }
     },
     "node_modules/@ionic/vue": {
-      "version": "7.0.14",
-      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-7.0.14.tgz",
-      "integrity": "sha512-oAnxUR1fTF244sIeGso3r5AqoePaSQywyoU181BWk3BFITFeFhwFX033OQecsusrBHEcMW1QddC3hH6uUEwwTw==",
+      "version": "7.1.3",
+      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-7.1.3.tgz",
+      "integrity": "sha512-4pfmbYH86/H9699D3DLUvqRdDzW0MfAXT6Es/zdZr2mBJgH9bPFVfgJpdHUfjGIoSXQRo6WAGEWxMIzHqleHUg==",
       "dependencies": {
-        "@ionic/core": "7.0.14",
+        "@ionic/core": "7.1.3",
         "ionicons": "^7.0.0"
       }
     },
@@ -1303,9 +1323,9 @@
       }
     },
     "node_modules/@stencil/core": {
-      "version": "3.4.0",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-3.4.0.tgz",
-      "integrity": "sha512-kEtPtV6QegME8YgMjWrhS7KktItbhqOpAuK9aXypDdI/7bLU9iM/4DtnQGWY/DARBophk+XRBfNXcE62Bmi0dw==",
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-3.4.1.tgz",
+      "integrity": "sha512-7rjOmM0W9K5op2gtOQRLERGH1155rv2fm6ppxOzYqqG8ISct4m9skp5XgUBYPu+GSPsJFdRuCIQs0IuVsG/7+g==",
       "bin": {
         "stencil": "bin/stencil"
       },
@@ -6787,9 +6807,9 @@
       }
     },
     "node_modules/tslib": {
-      "version": "2.5.3",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.3.tgz",
-      "integrity": "sha512-mSxlJJwl3BMEQCUNnxXBU9jP4JBktcEGhURcPR6VQVlnP0FdDEsIaz0C35dXNGLyRfrATNofF0F5p2KPxQgB+w=="
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.0.tgz",
+      "integrity": "sha512-7At1WUettjcSRHXCyYtTselblcHl9PJFFVKiCAy/bY97+BPZXSQ2wbq0P9s8tK2G7dFQfNnlJnPAiArVBVBsfA=="
     },
     "node_modules/tsutils": {
       "version": "3.21.0",
@@ -7677,13 +7697,30 @@
       "dev": true
     },
     "@ionic/core": {
-      "version": "7.0.14",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.0.14.tgz",
-      "integrity": "sha512-M0su64amw6HsZwsmWuHE4Wr2mChQdvBI7JKZXYCrF2Acn7GTD5cjMw6o1cYzwzf0PEap/RQ0y4paU9lO4Lu+lA==",
+      "version": "7.1.3",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.1.3.tgz",
+      "integrity": "sha512-Wg3jBOoVpoHlTuKxcFa5gX9rYtI8FI6zmwb7ERdk6B9Uvk4KDgJLc1MnZK8IVb6RWTg1iipzBRdU40cX09bR4w==",
       "requires": {
         "@stencil/core": "^3.4.0",
-        "ionicons": "^7.1.0",
+        "ionicons": "7.1.0",
         "tslib": "^2.1.0"
+      },
+      "dependencies": {
+        "ionicons": {
+          "version": "7.1.0",
+          "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-7.1.0.tgz",
+          "integrity": "sha512-iE4GuEdEHARJpp0sWL7WJZCzNCf5VxpNRhAjW0fLnZPnNL5qZOJUcfup2Z2Ty7Jk8Q5hacrHfGEB1lCwOdXqGg==",
+          "requires": {
+            "@stencil/core": "^2.18.0"
+          },
+          "dependencies": {
+            "@stencil/core": {
+              "version": "2.22.3",
+              "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.22.3.tgz",
+              "integrity": "sha512-kmVA0M/HojwsfkeHsifvHVIYe4l5tin7J5+DLgtl8h6WWfiMClND5K3ifCXXI2ETDNKiEk21p6jql3Fx9o2rng=="
+            }
+          }
+        }
       }
     },
     "@ionic/eslint-config": {
@@ -7792,11 +7829,11 @@
       "requires": {}
     },
     "@ionic/vue": {
-      "version": "7.0.14",
-      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-7.0.14.tgz",
-      "integrity": "sha512-oAnxUR1fTF244sIeGso3r5AqoePaSQywyoU181BWk3BFITFeFhwFX033OQecsusrBHEcMW1QddC3hH6uUEwwTw==",
+      "version": "7.1.3",
+      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-7.1.3.tgz",
+      "integrity": "sha512-4pfmbYH86/H9699D3DLUvqRdDzW0MfAXT6Es/zdZr2mBJgH9bPFVfgJpdHUfjGIoSXQRo6WAGEWxMIzHqleHUg==",
       "requires": {
-        "@ionic/core": "7.0.14",
+        "@ionic/core": "7.1.3",
         "ionicons": "^7.0.0"
       }
     },
@@ -8155,9 +8192,9 @@
       }
     },
     "@stencil/core": {
-      "version": "3.4.0",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-3.4.0.tgz",
-      "integrity": "sha512-kEtPtV6QegME8YgMjWrhS7KktItbhqOpAuK9aXypDdI/7bLU9iM/4DtnQGWY/DARBophk+XRBfNXcE62Bmi0dw=="
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-3.4.1.tgz",
+      "integrity": "sha512-7rjOmM0W9K5op2gtOQRLERGH1155rv2fm6ppxOzYqqG8ISct4m9skp5XgUBYPu+GSPsJFdRuCIQs0IuVsG/7+g=="
     },
     "@tootallnate/once": {
       "version": "2.0.0",
@@ -12183,9 +12220,9 @@
       }
     },
     "tslib": {
-      "version": "2.5.3",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.3.tgz",
-      "integrity": "sha512-mSxlJJwl3BMEQCUNnxXBU9jP4JBktcEGhURcPR6VQVlnP0FdDEsIaz0C35dXNGLyRfrATNofF0F5p2KPxQgB+w=="
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.0.tgz",
+      "integrity": "sha512-7At1WUettjcSRHXCyYtTselblcHl9PJFFVKiCAy/bY97+BPZXSQ2wbq0P9s8tK2G7dFQfNnlJnPAiArVBVBsfA=="
     },
     "tsutils": {
       "version": "3.21.0",
diff --git a/packages/vue-router/package.json b/packages/vue-router/package.json
index 288143f61e..38474efd51 100644
--- a/packages/vue-router/package.json
+++ b/packages/vue-router/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/vue-router",
-  "version": "7.0.14",
+  "version": "7.1.3",
   "description": "Vue Router integration for @ionic/vue",
   "scripts": {
     "test.spec": "jest",
@@ -45,7 +45,7 @@
   },
   "homepage": "https://github.com/ionic-team/ionic#readme",
   "dependencies": {
-    "@ionic/vue": "^7.0.14"
+    "@ionic/vue": "^7.1.3"
   },
   "devDependencies": {
     "@ionic/eslint-config": "^0.3.0",
diff --git a/packages/vue/CHANGELOG.md b/packages/vue/CHANGELOG.md
index 0f41e90a6b..a32e35d46f 100644
--- a/packages/vue/CHANGELOG.md
+++ b/packages/vue/CHANGELOG.md
@@ -3,6 +3,43 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [7.1.3](https://github.com/ionic-team/ionic-framework/compare/v7.1.2...v7.1.3) (2023-07-12)
+
+**Note:** Version bump only for package @ionic/vue
+
+
+
+
+
+## [7.1.2](https://github.com/ionic-team/ionic-framework/compare/v7.1.1...v7.1.2) (2023-07-06)
+
+**Note:** Version bump only for package @ionic/vue
+
+
+
+
+
+## [7.1.1](https://github.com/ionic-team/ionic-framework/compare/v7.1.0...v7.1.1) (2023-06-26)
+
+**Note:** Version bump only for package @ionic/vue
+
+
+
+
+
+# [7.1.0](https://github.com/ionic-team/ionic-framework/compare/v7.0.14...v7.1.0) (2023-06-21)
+
+
+### Features
+
+* **range:** add label prop ([#27408](https://github.com/ionic-team/ionic-framework/issues/27408)) ([368add2](https://github.com/ionic-team/ionic-framework/commit/368add2a5ca3820a1f9623c96d29bcccfa693fdc))
+* **segment, segment-button:** update segment value property to accept numbers ([#27222](https://github.com/ionic-team/ionic-framework/issues/27222)) ([ec95ae5](https://github.com/ionic-team/ionic-framework/commit/ec95ae5cd38e3d2b9ec9fdbc9e237fa1241f7a4e)), closes [#27221](https://github.com/ionic-team/ionic-framework/issues/27221)
+* **select:** add props to customize toggle icons ([#27648](https://github.com/ionic-team/ionic-framework/issues/27648)) ([95e28b6](https://github.com/ionic-team/ionic-framework/commit/95e28b6629843af7dce62f20bc8e31adfb391990)), closes [#17248](https://github.com/ionic-team/ionic-framework/issues/17248)
+
+
+
+
+
 ## [7.0.14](https://github.com/ionic-team/ionic-framework/compare/v7.0.13...v7.0.14) (2023-06-15)
 
 **Note:** Version bump only for package @ionic/vue
diff --git a/packages/vue/package-lock.json b/packages/vue/package-lock.json
index e75394664f..40da1a3b92 100644
--- a/packages/vue/package-lock.json
+++ b/packages/vue/package-lock.json
@@ -1,15 +1,15 @@
 {
   "name": "@ionic/vue",
-  "version": "7.0.14",
+  "version": "7.1.3",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/vue",
-      "version": "7.0.14",
+      "version": "7.1.3",
       "license": "MIT",
       "dependencies": {
-        "@ionic/core": "^7.0.14",
+        "@ionic/core": "^7.1.3",
         "ionicons": "^7.0.0"
       },
       "devDependencies": {
@@ -207,12 +207,12 @@
       "dev": true
     },
     "node_modules/@ionic/core": {
-      "version": "7.0.14",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.0.14.tgz",
-      "integrity": "sha512-M0su64amw6HsZwsmWuHE4Wr2mChQdvBI7JKZXYCrF2Acn7GTD5cjMw6o1cYzwzf0PEap/RQ0y4paU9lO4Lu+lA==",
+      "version": "7.1.3",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.1.3.tgz",
+      "integrity": "sha512-Wg3jBOoVpoHlTuKxcFa5gX9rYtI8FI6zmwb7ERdk6B9Uvk4KDgJLc1MnZK8IVb6RWTg1iipzBRdU40cX09bR4w==",
       "dependencies": {
         "@stencil/core": "^3.4.0",
-        "ionicons": "^7.1.0",
+        "ionicons": "7.1.0",
         "tslib": "^2.1.0"
       }
     },
@@ -423,9 +423,9 @@
       }
     },
     "node_modules/@stencil/core": {
-      "version": "3.4.0",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-3.4.0.tgz",
-      "integrity": "sha512-kEtPtV6QegME8YgMjWrhS7KktItbhqOpAuK9aXypDdI/7bLU9iM/4DtnQGWY/DARBophk+XRBfNXcE62Bmi0dw==",
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-3.4.1.tgz",
+      "integrity": "sha512-7rjOmM0W9K5op2gtOQRLERGH1155rv2fm6ppxOzYqqG8ISct4m9skp5XgUBYPu+GSPsJFdRuCIQs0IuVsG/7+g==",
       "bin": {
         "stencil": "bin/stencil"
       },
@@ -3746,12 +3746,12 @@
       "dev": true
     },
     "@ionic/core": {
-      "version": "7.0.14",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.0.14.tgz",
-      "integrity": "sha512-M0su64amw6HsZwsmWuHE4Wr2mChQdvBI7JKZXYCrF2Acn7GTD5cjMw6o1cYzwzf0PEap/RQ0y4paU9lO4Lu+lA==",
+      "version": "7.1.3",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.1.3.tgz",
+      "integrity": "sha512-Wg3jBOoVpoHlTuKxcFa5gX9rYtI8FI6zmwb7ERdk6B9Uvk4KDgJLc1MnZK8IVb6RWTg1iipzBRdU40cX09bR4w==",
       "requires": {
         "@stencil/core": "^3.4.0",
-        "ionicons": "^7.1.0",
+        "ionicons": "7.1.0",
         "tslib": "^2.1.0"
       },
       "dependencies": {
@@ -3885,9 +3885,9 @@
       }
     },
     "@stencil/core": {
-      "version": "3.4.0",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-3.4.0.tgz",
-      "integrity": "sha512-kEtPtV6QegME8YgMjWrhS7KktItbhqOpAuK9aXypDdI/7bLU9iM/4DtnQGWY/DARBophk+XRBfNXcE62Bmi0dw=="
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-3.4.1.tgz",
+      "integrity": "sha512-7rjOmM0W9K5op2gtOQRLERGH1155rv2fm6ppxOzYqqG8ISct4m9skp5XgUBYPu+GSPsJFdRuCIQs0IuVsG/7+g=="
     },
     "@types/json-schema": {
       "version": "7.0.11",
diff --git a/packages/vue/package.json b/packages/vue/package.json
index e13b489771..34431dfaa9 100644
--- a/packages/vue/package.json
+++ b/packages/vue/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/vue",
-  "version": "7.0.14",
+  "version": "7.1.3",
   "description": "Vue specific wrapper for @ionic/core",
   "scripts": {
     "eslint": "eslint src",
@@ -66,7 +66,7 @@
     "vue-router": "^4.0.16"
   },
   "dependencies": {
-    "@ionic/core": "^7.0.14",
+    "@ionic/core": "^7.1.3",
     "ionicons": "^7.0.0"
   },
   "vetur": {
diff --git a/packages/vue/src/index.ts b/packages/vue/src/index.ts
index 49b02afa66..158a2c9ffe 100644
--- a/packages/vue/src/index.ts
+++ b/packages/vue/src/index.ts
@@ -112,6 +112,7 @@ export {
   SearchbarInputEventDetail,
   SegmentChangeEventDetail,
   SegmentCustomEvent,
+  SegmentValue,
   SelectChangeEventDetail,
   SelectCustomEvent,
   TabsCustomEvent,
diff --git a/packages/vue/src/proxies.ts b/packages/vue/src/proxies.ts
index f4cae3f9a9..23131fb7bc 100644
--- a/packages/vue/src/proxies.ts
+++ b/packages/vue/src/proxies.ts
@@ -606,6 +606,7 @@ export const IonRange = /*@__PURE__*/ defineContainer<JSX.IonRange, JSX.IonRange
   'color',
   'debounce',
   'name',
+  'label',
   'dualKnobs',
   'min',
   'max',
@@ -738,6 +739,8 @@ export const IonSelect = /*@__PURE__*/ defineContainer<JSX.IonSelect, JSX.IonSel
   'okText',
   'placeholder',
   'selectedText',
+  'toggleIcon',
+  'expandedIcon',
   'shape',
   'value',
   'ionChange',