chore: add missing default theme to ios and md themes

chore: add missing mixins namespace
chore: rename badge namespaces
2026-03-13 10:22:08 +08:00 · 2023-06-22 17:02:18 -04:00 · 2023-06-22 16:57:00 -04:00 · 2023-06-22 16:54:15 -04:00 · 2023-06-22 16:50:16 -04:00 · 2023-06-22 16:49:19 -04:00
1252 changed files with 7284 additions and 1188 deletions
--- a/.github/CODEOWNERS
+++ b/.github/CODEOWNERS
@@ -11,9 +11,6 @@
 # In each subsection folders are ordered first by depth, then alphabetically.
 # This should make it easy to add new rules without breaking existing ones.

-# Global owners
-* @ionic-team/framework
-
 # Frameworks

 ## Angular
@@ -56,9 +53,6 @@
 /core/src/components/refresher/ @liamdebeasi
 /core/src/components/refresher-content/ @liamdebeasi

-# Codeowner should own the source, but everyone should own the tests
-/core/src/components/**/test/ @ionic-team/framework
-
 # Utilities

 /core/src/utils/animation/ @liamdebeasi
--- a/.github/workflows/actions/build-core-stencil-prerelease/action.yml
+++ b/.github/workflows/actions/build-core-stencil-prerelease/action.yml
@@ -1,5 +1,10 @@
-name: 'Build Ionic Core with Stencil Nightly'
-description: 'Build Ionic Core with a Nightly Build of Stencil'
+name: 'Build Ionic Core with Stencil Prerelease'
+description: 'Build Ionic Core with a Prerelease Build of Stencil'
+inputs:
+  stencil-version:
+    description: 'The NPM tag of @stencil/core to install.'
+    type: string
+    required: true
 runs:
  using: 'composite'
  steps:
@@ -12,9 +17,9 @@ runs:
      run: npm ci
      working-directory: ./core
      shell: bash
-    - name: Install Stencil Nightly
+    - name: Install Stencil ${{ inputs.stencil-version }}
      working-directory: ./core
-      run: npm i @stencil/core@nightly
+      run: npm i @stencil/core@${{ inputs.stencil-version }}
      shell: bash
    - name: Build Core
      run: npm run build -- --ci
--- a/.github/workflows/actions/publish-npm/action.yml
+++ b/.github/workflows/actions/publish-npm/action.yml
@@ -22,15 +22,17 @@ runs:
    - uses: actions/setup-node@v3
      with:
        node-version: 16.x
-    - name: Install latest npm
-      run: npm install -g npm@latest
+    # This ensures the local version of Lerna is installed
+    # and that we do not use the global Lerna version
+    - name: Install root dependencies
+      run: npm ci
      shell: bash
    - name: Install Dependencies
-      run: lerna bootstrap --include-dependencies --scope ${{ inputs.scope }} --ignore-scripts -- --legacy-peer-deps
+      run: npx lerna bootstrap --include-dependencies --scope ${{ inputs.scope }} --ignore-scripts -- --legacy-peer-deps
      shell: bash
      working-directory: ${{ inputs.working-directory }}
    - name: Update Version
-      run: lerna version ${{ inputs.version }} --yes --exact --no-changelog --no-push --no-git-tag-version --preid=${{ inputs.preid }}
+      run: npx lerna version ${{ inputs.version }} --yes --exact --no-changelog --no-push --no-git-tag-version --preid=${{ inputs.preid }}
      shell: bash
      working-directory: ${{ inputs.working-directory }}
    - name: Run Build
--- a/.github/workflows/stencil-nightly.yml
+++ b/.github/workflows/stencil-nightly.yml
@@ -22,7 +22,9 @@ jobs:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
-      - uses: ./.github/workflows/actions/build-core-stencil-nightly
+      - uses: ./.github/workflows/actions/build-core-stencil-prerelease
+        with:
+          stencil-version: nightly

  test-core-clean-build:
    needs: [build-core-with-stencil-nightly]
--- a/.github/workflows/stencil-v4.yml
+++ b/.github/workflows/stencil-v4.yml
@@ -0,0 +1,220 @@
+# 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
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,100 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+# [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)
+
+
+### Bug Fixes
+
+* **keyboard:** keyboard events emit correctly when Capacitor is available but the Keyboard plugin is not ([#27655](https://github.com/ionic-team/ionic-framework/issues/27655)) ([7a38a00](https://github.com/ionic-team/ionic-framework/commit/7a38a006a94f1240d93102f2f42bbfc4d76a679e)), closes [#27654](https://github.com/ionic-team/ionic-framework/issues/27654)
+* **toast:** allow color for translucent toast ([#27652](https://github.com/ionic-team/ionic-framework/issues/27652)) ([d555375](https://github.com/ionic-team/ionic-framework/commit/d555375c146639b32e85c57a8cdd4d52313ef4cf)), closes [#27567](https://github.com/ionic-team/ionic-framework/issues/27567)
+
+
+
+
+
+## [7.0.13](https://github.com/ionic-team/ionic-framework/compare/v7.0.12...v7.0.13) (2023-06-14)
+
+
+### Bug Fixes
+
+* **react:** onDoubleClick fires on components ([#27611](https://github.com/ionic-team/ionic-framework/issues/27611)) ([3e191df](https://github.com/ionic-team/ionic-framework/commit/3e191df3dd43dcdd5a5f717166d4db9834340a2b)), closes [#21320](https://github.com/ionic-team/ionic-framework/issues/21320)
+
+
+
+
+
+## [7.0.12](https://github.com/ionic-team/ionic-framework/compare/v7.0.11...v7.0.12) (2023-06-08)
+
+
+### Bug Fixes
+
+* **refresher:** scroll styles are reset when using non-native refresher ([#27602](https://github.com/ionic-team/ionic-framework/issues/27602)) ([92c5545](https://github.com/ionic-team/ionic-framework/commit/92c55452fdf4ac7b8d15ce75a4e867aab9321cfb)), closes [#27601](https://github.com/ionic-team/ionic-framework/issues/27601)
+
+
+
+
+
+## [7.0.11](https://github.com/ionic-team/ionic-framework/compare/v7.0.9...v7.0.11) (2023-06-07)
+
+
+### Bug Fixes
+
+* **header, footer:** resolve CSP violations with box shadow ([#27560](https://github.com/ionic-team/ionic-framework/issues/27560)) ([e75fa58](https://github.com/ionic-team/ionic-framework/commit/e75fa582c4ca507b09f62bbce649f02ca49da7a0))
+* **item-sliding:** refresh sliding behavior when options are added or removed asynchronously ([#27572](https://github.com/ionic-team/ionic-framework/issues/27572)) ([b2a226a](https://github.com/ionic-team/ionic-framework/commit/b2a226ae663695be0666cd862510d8d843c80b9a)), closes [#25578](https://github.com/ionic-team/ionic-framework/issues/25578)
+* **keyboard:** listen on correct events for keyboard lifecycle ([#27569](https://github.com/ionic-team/ionic-framework/issues/27569)) ([7871210](https://github.com/ionic-team/ionic-framework/commit/7871210e9e4ecc09353b821b60f977498a01ee8d)), closes [#27558](https://github.com/ionic-team/ionic-framework/issues/27558)
+* **radio:** radio with modern syntax is keyboard navigable ([#27530](https://github.com/ionic-team/ionic-framework/issues/27530)) ([d87e692](https://github.com/ionic-team/ionic-framework/commit/d87e692c6c2c3d146514b093853d5e262137a9e5)), closes [#27268](https://github.com/ionic-team/ionic-framework/issues/27268)
+* **select:** prevent click event from firing twice ([#27570](https://github.com/ionic-team/ionic-framework/issues/27570)) ([ba7e60e](https://github.com/ionic-team/ionic-framework/commit/ba7e60e8669b1980b9a0c6267617894e16b4a2d4))
+
+
+
+
+
+## [7.0.10](https://github.com/ionic-team/ionic-framework/compare/v7.0.9...v7.0.10) (2023-05-31)
+
+
+### Bug Fixes
+
+* **angular:** remove invalid z-index style ([#27559](https://github.com/ionic-team/ionic-framework/issues/27559)) ([2ce00cf](https://github.com/ionic-team/ionic-framework/commit/2ce00cf292e01664e02ecaf64af229d6a371c480))
+
+
+### Performance Improvements
+
+* passive event listener for focus visible ([#27568](https://github.com/ionic-team/ionic-framework/issues/27568)) ([e54bf14](https://github.com/ionic-team/ionic-framework/commit/e54bf142c39743913d982a1f1709629b4b034969)), closes [#27566](https://github.com/ionic-team/ionic-framework/issues/27566)
+
+
+
+
+
 ## [7.0.9](https://github.com/ionic-team/ionic-framework/compare/v7.0.8...v7.0.9) (2023-05-25)


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

+# [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
+
+
+
+
+
+## [7.0.13](https://github.com/ionic-team/ionic-framework/compare/v7.0.12...v7.0.13) (2023-06-14)
+
+**Note:** Version bump only for package @ionic/angular
+
+
+
+
+
+## [7.0.12](https://github.com/ionic-team/ionic-framework/compare/v7.0.11...v7.0.12) (2023-06-08)
+
+**Note:** Version bump only for package @ionic/angular
+
+
+
+
+
+## [7.0.11](https://github.com/ionic-team/ionic-framework/compare/v7.0.10...v7.0.11) (2023-06-07)
+
+**Note:** Version bump only for package @ionic/angular
+
+
+
+
+
+## [7.0.10](https://github.com/ionic-team/ionic-framework/compare/v7.0.9...v7.0.10) (2023-05-31)
+
+
+### Bug Fixes
+
+* **angular:** remove invalid z-index style ([#27559](https://github.com/ionic-team/ionic-framework/issues/27559)) ([2ce00cf](https://github.com/ionic-team/ionic-framework/commit/2ce00cf292e01664e02ecaf64af229d6a371c480))
+
+
+
+
+
 ## [7.0.9](https://github.com/ionic-team/ionic-framework/compare/v7.0.8...v7.0.9) (2023-05-25)

 **Note:** Version bump only for package @ionic/angular
--- a/angular/package-lock.json
+++ b/angular/package-lock.json
@@ -1,15 +1,15 @@
 {
  "name": "@ionic/angular",
-  "version": "7.0.9",
+  "version": "7.1.0",
  "lockfileVersion": 2,
  "requires": true,
  "packages": {
    "": {
      "name": "@ionic/angular",
-      "version": "7.0.9",
+      "version": "7.1.0",
      "license": "MIT",
      "dependencies": {
-        "@ionic/core": "^7.0.9",
+        "@ionic/core": "^7.1.0",
        "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.8",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.0.8.tgz",
-      "integrity": "sha512-UyO2mDBwXNNAG+lo7TXFAcju6Gpr8Fz6b7Qr06b9O1LgxAkwYMiseDdJBfPdkX75YgYIDkEi5Su/Tq5xCFfzbw==",
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.1.0.tgz",
+      "integrity": "sha512-1W8i9GLhuakeN2z9AeVSSll40BQC2HL4wEscqMM5aD/firotwbX3gdiiNgj2NkoNNgs2hsqcZOJe2sLcU39LTQ==",
      "dependencies": {
-        "@stencil/core": "^3.2.2",
+        "@stencil/core": "^3.4.0",
        "ionicons": "^7.1.0",
        "tslib": "^2.1.0"
      }
    },
    "node_modules/@ionic/core/node_modules/@stencil/core": {
-      "version": "3.2.2",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-3.2.2.tgz",
-      "integrity": "sha512-wXb9cVWL0T3cTwYLveekdTFCRGx6+9hpVDEXna+N8K8OPoW6xtFAHRLv+LjOM7k59PkA8MG3IinAfV7Y+xa0Hw==",
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-3.4.0.tgz",
+      "integrity": "sha512-kEtPtV6QegME8YgMjWrhS7KktItbhqOpAuK9aXypDdI/7bLU9iM/4DtnQGWY/DARBophk+XRBfNXcE62Bmi0dw==",
      "bin": {
        "stencil": "bin/stencil"
      },
@@ -8104,19 +8104,19 @@
      "dev": true
    },
    "@ionic/core": {
-      "version": "7.0.8",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.0.8.tgz",
-      "integrity": "sha512-UyO2mDBwXNNAG+lo7TXFAcju6Gpr8Fz6b7Qr06b9O1LgxAkwYMiseDdJBfPdkX75YgYIDkEi5Su/Tq5xCFfzbw==",
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.1.0.tgz",
+      "integrity": "sha512-1W8i9GLhuakeN2z9AeVSSll40BQC2HL4wEscqMM5aD/firotwbX3gdiiNgj2NkoNNgs2hsqcZOJe2sLcU39LTQ==",
      "requires": {
-        "@stencil/core": "^3.2.2",
+        "@stencil/core": "^3.4.0",
        "ionicons": "^7.1.0",
        "tslib": "^2.1.0"
      },
      "dependencies": {
        "@stencil/core": {
-          "version": "3.2.2",
-          "resolved": "https://registry.npmjs.org/@stencil/core/-/core-3.2.2.tgz",
-          "integrity": "sha512-wXb9cVWL0T3cTwYLveekdTFCRGx6+9hpVDEXna+N8K8OPoW6xtFAHRLv+LjOM7k59PkA8MG3IinAfV7Y+xa0Hw=="
+          "version": "3.4.0",
+          "resolved": "https://registry.npmjs.org/@stencil/core/-/core-3.4.0.tgz",
+          "integrity": "sha512-kEtPtV6QegME8YgMjWrhS7KktItbhqOpAuK9aXypDdI/7bLU9iM/4DtnQGWY/DARBophk+XRBfNXcE62Bmi0dw=="
        }
      }
    },
--- a/angular/package.json
+++ b/angular/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@ionic/angular",
-  "version": "7.0.9",
+  "version": "7.1.0",
  "description": "Angular specific wrappers for @ionic/core",
  "keywords": [
    "ionic",
@@ -47,7 +47,7 @@
    }
  },
  "dependencies": {
-    "@ionic/core": "^7.0.9",
+    "@ionic/core": "^7.1.0",
    "ionicons": "^7.0.0",
    "jsonc-parser": "^3.0.0",
    "tslib": "^2.3.0"
--- a/angular/src/directives/navigation/ion-tabs.ts
+++ b/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 {
@@ -29,7 +43,6 @@ import { StackEvent } from './stack-utils';
        height: 100%;

        contain: layout size style;
-        z-index: $z-index-page-container;
      }
      .tabs-inner {
        position: relative;
@@ -42,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
   */
@@ -138,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);
+    }
+  }
 }
--- a/angular/src/directives/proxies.ts
+++ b/angular/src/directives/proxies.ts
@@ -1619,14 +1619,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 +1954,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 +1962,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;
--- a/angular/src/index.ts
+++ b/angular/src/index.ts
@@ -117,6 +117,7 @@ export {
  SearchbarInputEventDetail,
  SegmentChangeEventDetail,
  SegmentCustomEvent,
+  SegmentValue,
  SelectChangeEventDetail,
  SelectCustomEvent,
  TabsCustomEvent,
--- a/angular/src/providers/nav-controller.ts
+++ b/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;
  }

  /**
--- a/angular/test/base/e2e/src/tabs.spec.ts
+++ b/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();
--- a/angular/test/base/src/app/app-routing.module.ts
+++ b/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,
--- a/angular/test/base/src/app/tabs-slots.component.ts
+++ b/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;
+  }
+
+}
--- a/angular/test/base/src/app/tabs-tab1/tabs-tab1.component.html
+++ b/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>
--- a/angular/test/base/src/app/tabs-tab2/tabs-tab2.component.html
+++ b/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>
--- a/core/CHANGELOG.md
+++ b/core/CHANGELOG.md
@@ -3,6 +3,97 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+# [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)
+
+
+### Bug Fixes
+
+* **keyboard:** keyboard events emit correctly when Capacitor is available but the Keyboard plugin is not ([#27655](https://github.com/ionic-team/ionic-framework/issues/27655)) ([7a38a00](https://github.com/ionic-team/ionic-framework/commit/7a38a006a94f1240d93102f2f42bbfc4d76a679e)), closes [#27654](https://github.com/ionic-team/ionic-framework/issues/27654)
+* **toast:** allow color for translucent toast ([#27652](https://github.com/ionic-team/ionic-framework/issues/27652)) ([d555375](https://github.com/ionic-team/ionic-framework/commit/d555375c146639b32e85c57a8cdd4d52313ef4cf)), closes [#27567](https://github.com/ionic-team/ionic-framework/issues/27567)
+
+
+
+
+
+## [7.0.13](https://github.com/ionic-team/ionic-framework/compare/v7.0.12...v7.0.13) (2023-06-14)
+
+
+### Bug Fixes
+
+* **react:** onDoubleClick fires on components ([#27611](https://github.com/ionic-team/ionic-framework/issues/27611)) ([3e191df](https://github.com/ionic-team/ionic-framework/commit/3e191df3dd43dcdd5a5f717166d4db9834340a2b)), closes [#21320](https://github.com/ionic-team/ionic-framework/issues/21320)
+
+
+
+
+
+## [7.0.12](https://github.com/ionic-team/ionic-framework/compare/v7.0.11...v7.0.12) (2023-06-08)
+
+
+### Bug Fixes
+
+* **refresher:** scroll styles are reset when using non-native refresher ([#27602](https://github.com/ionic-team/ionic-framework/issues/27602)) ([92c5545](https://github.com/ionic-team/ionic-framework/commit/92c55452fdf4ac7b8d15ce75a4e867aab9321cfb)), closes [#27601](https://github.com/ionic-team/ionic-framework/issues/27601)
+
+
+
+
+
+## [7.0.11](https://github.com/ionic-team/ionic-framework/compare/v7.0.9...v7.0.11) (2023-06-07)
+
+
+### Bug Fixes
+
+* **header, footer:** resolve CSP violations with box shadow ([#27560](https://github.com/ionic-team/ionic-framework/issues/27560)) ([e75fa58](https://github.com/ionic-team/ionic-framework/commit/e75fa582c4ca507b09f62bbce649f02ca49da7a0))
+* **item-sliding:** refresh sliding behavior when options are added or removed asynchronously ([#27572](https://github.com/ionic-team/ionic-framework/issues/27572)) ([b2a226a](https://github.com/ionic-team/ionic-framework/commit/b2a226ae663695be0666cd862510d8d843c80b9a)), closes [#25578](https://github.com/ionic-team/ionic-framework/issues/25578)
+* **keyboard:** listen on correct events for keyboard lifecycle ([#27569](https://github.com/ionic-team/ionic-framework/issues/27569)) ([7871210](https://github.com/ionic-team/ionic-framework/commit/7871210e9e4ecc09353b821b60f977498a01ee8d)), closes [#27558](https://github.com/ionic-team/ionic-framework/issues/27558)
+* **radio:** radio with modern syntax is keyboard navigable ([#27530](https://github.com/ionic-team/ionic-framework/issues/27530)) ([d87e692](https://github.com/ionic-team/ionic-framework/commit/d87e692c6c2c3d146514b093853d5e262137a9e5)), closes [#27268](https://github.com/ionic-team/ionic-framework/issues/27268)
+* **select:** prevent click event from firing twice ([#27570](https://github.com/ionic-team/ionic-framework/issues/27570)) ([ba7e60e](https://github.com/ionic-team/ionic-framework/commit/ba7e60e8669b1980b9a0c6267617894e16b4a2d4))
+
+
+### Performance Improvements
+
+* passive event listener for focus visible ([#27568](https://github.com/ionic-team/ionic-framework/issues/27568)) ([e54bf14](https://github.com/ionic-team/ionic-framework/commit/e54bf142c39743913d982a1f1709629b4b034969)), closes [#27566](https://github.com/ionic-team/ionic-framework/issues/27566)
+
+
+
+
+
+## [7.0.10](https://github.com/ionic-team/ionic-framework/compare/v7.0.9...v7.0.10) (2023-05-31)
+
+
+### Performance Improvements
+
+* passive event listener for focus visible ([#27568](https://github.com/ionic-team/ionic-framework/issues/27568)) ([e54bf14](https://github.com/ionic-team/ionic-framework/commit/e54bf142c39743913d982a1f1709629b4b034969)), closes [#27566](https://github.com/ionic-team/ionic-framework/issues/27566)
+
+
+
+
+
 ## [7.0.9](https://github.com/ionic-team/ionic-framework/compare/v7.0.8...v7.0.9) (2023-05-25)


--- 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

--- a/core/package-lock.json
+++ b/core/package-lock.json
@@ -1,30 +1,30 @@
 {
  "name": "@ionic/core",
-  "version": "7.0.9",
+  "version": "7.1.0",
  "lockfileVersion": 2,
  "requires": true,
  "packages": {
    "": {
      "name": "@ionic/core",
-      "version": "7.0.9",
+      "version": "7.1.0",
      "license": "MIT",
      "dependencies": {
-        "@stencil/core": "^3.2.2",
-        "ionicons": "^7.1.0",
+        "@stencil/core": "^3.4.0",
+        "ionicons": "7.1.0",
        "tslib": "^2.1.0"
      },
      "devDependencies": {
-        "@axe-core/playwright": "^4.7.1",
+        "@axe-core/playwright": "^4.7.3",
        "@ionic/eslint-config": "^0.3.0",
        "@ionic/prettier-config": "^2.0.0",
        "@jest/core": "^27.5.1",
-        "@playwright/test": "^1.33.0",
+        "@playwright/test": "^1.35.1",
        "@rollup/plugin-node-resolve": "^8.4.0",
        "@rollup/plugin-virtual": "^2.0.3",
-        "@stencil/angular-output-target": "^0.7.0",
-        "@stencil/react-output-target": "^0.5.0",
-        "@stencil/sass": "^3.0.3",
-        "@stencil/vue-output-target": "^0.8.5",
+        "@stencil/angular-output-target": "^0.7.1",
+        "@stencil/react-output-target": "^0.5.3",
+        "@stencil/sass": "^3.0.4",
+        "@stencil/vue-output-target": "^0.8.6",
        "@types/jest": "^27.5.2",
        "@types/node": "^14.6.0",
        "@typescript-eslint/eslint-plugin": "^5.17.0",
@@ -40,7 +40,7 @@
        "jest-cli": "^27.5.1",
        "prettier": "^2.6.1",
        "rollup": "^2.26.4",
-        "sass": "^1.26.10",
+        "sass": "^1.63.6",
        "serve": "^14.0.1",
        "stylelint": "^13.13.1",
        "stylelint-order": "^4.1.0",
@@ -53,15 +53,15 @@
      "dev": true
    },
    "node_modules/@axe-core/playwright": {
-      "version": "4.7.1",
-      "resolved": "https://registry.npmjs.org/@axe-core/playwright/-/playwright-4.7.1.tgz",
-      "integrity": "sha512-09UDwLChlGiqw9004QJib6Maesy99EOZ9zsLfhBYAt2s5UwufabnD+MoTAmwe+PCv2Jex9k1taeUhebDwIJKqw==",
+      "version": "4.7.3",
+      "resolved": "https://registry.npmjs.org/@axe-core/playwright/-/playwright-4.7.3.tgz",
+      "integrity": "sha512-v2PRgAyGvop7bamrTpNJtc5b1R7giAPnMzZXrS/VDZBCY5+uwVYtCNgDvBsqp5P1QMZxUMoBN+CERJUTMjFN0A==",
      "dev": true,
      "dependencies": {
        "axe-core": "^4.7.0"
      },
      "peerDependencies": {
-        "playwright": ">= 1.0.0"
+        "playwright-core": ">= 1.0.0"
      }
    },
    "node_modules/@babel/code-frame": {
@@ -1501,19 +1501,19 @@
      }
    },
    "node_modules/@playwright/test": {
-      "version": "1.33.0",
-      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.33.0.tgz",
-      "integrity": "sha512-YunBa2mE7Hq4CfPkGzQRK916a4tuZoVx/EpLjeWlTVOnD4S2+fdaQZE0LJkbfhN5FTSKNLdcl7MoT5XB37bTkg==",
+      "version": "1.35.1",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.35.1.tgz",
+      "integrity": "sha512-b5YoFe6J9exsMYg0pQAobNDR85T1nLumUYgUTtKm4d21iX2L7WqKq9dW8NGJ+2vX0etZd+Y7UeuqsxDXm9+5ZA==",
      "dev": true,
      "dependencies": {
        "@types/node": "*",
-        "playwright-core": "1.33.0"
+        "playwright-core": "1.35.1"
      },
      "bin": {
        "playwright": "cli.js"
      },
      "engines": {
-        "node": ">=14"
+        "node": ">=16"
      },
      "optionalDependencies": {
        "fsevents": "2.3.2"
@@ -1585,18 +1585,18 @@
      }
    },
    "node_modules/@stencil/angular-output-target": {
-      "version": "0.7.0",
-      "resolved": "https://registry.npmjs.org/@stencil/angular-output-target/-/angular-output-target-0.7.0.tgz",
-      "integrity": "sha512-OMK5oQHlMB2MTYMwU28TP1PfjkQWXHnH7f57sWis0XvFPznBtYTHAGCqiCjLM6toPCncEiZYsswZD+rm77QSGQ==",
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/@stencil/angular-output-target/-/angular-output-target-0.7.1.tgz",
+      "integrity": "sha512-lxJbCAbyAQVAKGgEpNTjSF7GZZszbrJnNdNVgzuD1hLRFJyElA6kUSL0GQrZMbiPG5lC/cYdbQwpyWHX4xN8mw==",
      "dev": true,
      "peerDependencies": {
-        "@stencil/core": "^2.9.0 || ^3.0.0"
+        "@stencil/core": ">=2.0.0 || >=3 || >= 4.0.0-beta.0 || >= 4.0.0"
      }
    },
    "node_modules/@stencil/core": {
-      "version": "3.2.2",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-3.2.2.tgz",
-      "integrity": "sha512-wXb9cVWL0T3cTwYLveekdTFCRGx6+9hpVDEXna+N8K8OPoW6xtFAHRLv+LjOM7k59PkA8MG3IinAfV7Y+xa0Hw==",
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-3.4.0.tgz",
+      "integrity": "sha512-kEtPtV6QegME8YgMjWrhS7KktItbhqOpAuK9aXypDdI/7bLU9iM/4DtnQGWY/DARBophk+XRBfNXcE62Bmi0dw==",
      "bin": {
        "stencil": "bin/stencil"
      },
@@ -1606,30 +1606,30 @@
      }
    },
    "node_modules/@stencil/react-output-target": {
-      "version": "0.5.0",
-      "resolved": "https://registry.npmjs.org/@stencil/react-output-target/-/react-output-target-0.5.0.tgz",
-      "integrity": "sha512-m2UwgrFuVXzi1h4m6I+EWDGeZV4n1wPHkzbRCS9QaqysiQEN5VIi9zjLzvPQF7O9Gg3E/W28z0yElp0kY3VuFQ==",
+      "version": "0.5.3",
+      "resolved": "https://registry.npmjs.org/@stencil/react-output-target/-/react-output-target-0.5.3.tgz",
+      "integrity": "sha512-68jwRp35CjAcwhTJ9yFD/3n+jrHOqvEH2jreVuPVvZK+4tkhPlYlwz0d1E1RlF3jyifUSfdkWUGgXIEy8Fo3yw==",
      "dev": true,
      "peerDependencies": {
-        "@stencil/core": "^2.9.0 || ^3.0.0"
+        "@stencil/core": ">=2.0.0 || >=3 || >= 4.0.0-beta.0 || >= 4.0.0"
      }
    },
    "node_modules/@stencil/sass": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/@stencil/sass/-/sass-3.0.3.tgz",
-      "integrity": "sha512-MnRxCbPji4Wr7Ilu22WlEbf1F0gyRGp617ADib0zx2d46aRg/brYdRrhcn8eaANmEXZgT6s8zGh8QO/9LZHN2A==",
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@stencil/sass/-/sass-3.0.4.tgz",
+      "integrity": "sha512-k1dP0A2QBx62m250FATc1hErXxXs6Jnf4TBxdL1C/dc32Kzz2n5aCT4SodBz0ebT5WMnITauZyFqYxzCzDoKag==",
      "dev": true,
      "peerDependencies": {
-        "@stencil/core": ">=2.0.0 || >=3.0.0-beta.0"
+        "@stencil/core": ">=2.0.0 || >=3.0.0-beta.0 || >= 4.0.0-beta.0 || >= 4.0.0"
      }
    },
    "node_modules/@stencil/vue-output-target": {
-      "version": "0.8.5",
-      "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.8.5.tgz",
-      "integrity": "sha512-AOse8WGzdH3lYhw+yQ/MYvobcaSOFd7B/xQ+oWv3GZLZpCw5fw+eOfFv1734mdA/Jjx+kWADlgsZ4w+cmiR+ZQ==",
+      "version": "0.8.6",
+      "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.8.6.tgz",
+      "integrity": "sha512-B1gQW8FWeU7x/KBPm9R28jYFGN5NsZTZR4jwfDMhKBmU1Q2dIxFY52ARhbrfj5tJQxKoxr2tQJD2S14r9t1v7w==",
      "dev": true,
      "peerDependencies": {
-        "@stencil/core": "^2.9.0 || ^3.0.0"
+        "@stencil/core": ">=2.0.0 || >=3 || >= 4.0.0-beta.0 || >= 4.0.0"
      }
    },
    "node_modules/@stylelint/postcss-css-in-js": {
@@ -5145,6 +5145,12 @@
        "node": ">= 4"
      }
    },
+    "node_modules/immutable": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.0.tgz",
+      "integrity": "sha512-0AOCmOip+xgJwEVTQj1EfiDDOkPmuyllDuTuEX+DDXUgapLAsBIfkg3sxCYyCEA8mQqZrrxPUGjcOQ2JS3WLkg==",
+      "dev": true
+    },
    "node_modules/import-fresh": {
      "version": "3.2.1",
      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.2.1.tgz",
@@ -8149,33 +8155,16 @@
        "node": ">=8"
      }
    },
-    "node_modules/playwright": {
-      "version": "1.33.0",
-      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.33.0.tgz",
-      "integrity": "sha512-+zzU3V2TslRX2ETBRgQKsKytYBkJeLZ2xzUj4JohnZnxQnivoUvOvNbRBYWSYykQTO0Y4zb8NwZTYFUO+EpPBQ==",
-      "dev": true,
-      "hasInstallScript": true,
-      "peer": true,
-      "dependencies": {
-        "playwright-core": "1.33.0"
-      },
-      "bin": {
-        "playwright": "cli.js"
-      },
-      "engines": {
-        "node": ">=14"
-      }
-    },
    "node_modules/playwright-core": {
-      "version": "1.33.0",
-      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.33.0.tgz",
-      "integrity": "sha512-aizyPE1Cj62vAECdph1iaMILpT0WUDCq3E6rW6I+dleSbBoGbktvJtzS6VHkZ4DKNEOG9qJpiom/ZxO+S15LAw==",
+      "version": "1.35.1",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.35.1.tgz",
+      "integrity": "sha512-pNXb6CQ7OqmGDRspEjlxE49w+4YtR6a3X6mT1hZXeJHWmsEz7SunmvZeiG/+y1yyMZdHnnn73WKYdtV1er0Xyg==",
      "dev": true,
      "bin": {
-        "playwright": "cli.js"
+        "playwright-core": "cli.js"
      },
      "engines": {
-        "node": ">=14"
+        "node": ">=16"
      }
    },
    "node_modules/postcss": {
@@ -8784,18 +8773,20 @@
      "dev": true
    },
    "node_modules/sass": {
-      "version": "1.30.0",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.30.0.tgz",
-      "integrity": "sha512-26EUhOXRLaUY7+mWuRFqGeGGNmhB1vblpTENO1Z7mAzzIZeVxZr9EZoaY1kyGLFWdSOZxRMAufiN2mkbO6dAlw==",
+      "version": "1.63.6",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.63.6.tgz",
+      "integrity": "sha512-MJuxGMHzaOW7ipp+1KdELtqKbfAWbH7OLIdoSMnVe3EXPMTmxTmlaZDCTsgIpPCs3w99lLo9/zDKkOrJuT5byw==",
      "dev": true,
      "dependencies": {
-        "chokidar": ">=2.0.0 <4.0.0"
+        "chokidar": ">=3.0.0 <4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
      },
      "bin": {
        "sass": "sass.js"
      },
      "engines": {
-        "node": ">=8.9.0"
+        "node": ">=14.0.0"
      }
    },
    "node_modules/saxes": {
@@ -8980,6 +8971,15 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/source-map-js": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
+      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
    "node_modules/source-map-support": {
      "version": "0.5.19",
      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.19.tgz",
@@ -10352,9 +10352,9 @@
  },
  "dependencies": {
    "@axe-core/playwright": {
-      "version": "4.7.1",
-      "resolved": "https://registry.npmjs.org/@axe-core/playwright/-/playwright-4.7.1.tgz",
-      "integrity": "sha512-09UDwLChlGiqw9004QJib6Maesy99EOZ9zsLfhBYAt2s5UwufabnD+MoTAmwe+PCv2Jex9k1taeUhebDwIJKqw==",
+      "version": "4.7.3",
+      "resolved": "https://registry.npmjs.org/@axe-core/playwright/-/playwright-4.7.3.tgz",
+      "integrity": "sha512-v2PRgAyGvop7bamrTpNJtc5b1R7giAPnMzZXrS/VDZBCY5+uwVYtCNgDvBsqp5P1QMZxUMoBN+CERJUTMjFN0A==",
      "dev": true,
      "requires": {
        "axe-core": "^4.7.0"
@@ -11398,14 +11398,14 @@
      }
    },
    "@playwright/test": {
-      "version": "1.33.0",
-      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.33.0.tgz",
-      "integrity": "sha512-YunBa2mE7Hq4CfPkGzQRK916a4tuZoVx/EpLjeWlTVOnD4S2+fdaQZE0LJkbfhN5FTSKNLdcl7MoT5XB37bTkg==",
+      "version": "1.35.1",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.35.1.tgz",
+      "integrity": "sha512-b5YoFe6J9exsMYg0pQAobNDR85T1nLumUYgUTtKm4d21iX2L7WqKq9dW8NGJ+2vX0etZd+Y7UeuqsxDXm9+5ZA==",
      "dev": true,
      "requires": {
        "@types/node": "*",
        "fsevents": "2.3.2",
-        "playwright-core": "1.33.0"
+        "playwright-core": "1.35.1"
      }
    },
    "@rollup/plugin-node-resolve": {
@@ -11460,35 +11460,35 @@
      }
    },
    "@stencil/angular-output-target": {
-      "version": "0.7.0",
-      "resolved": "https://registry.npmjs.org/@stencil/angular-output-target/-/angular-output-target-0.7.0.tgz",
-      "integrity": "sha512-OMK5oQHlMB2MTYMwU28TP1PfjkQWXHnH7f57sWis0XvFPznBtYTHAGCqiCjLM6toPCncEiZYsswZD+rm77QSGQ==",
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/@stencil/angular-output-target/-/angular-output-target-0.7.1.tgz",
+      "integrity": "sha512-lxJbCAbyAQVAKGgEpNTjSF7GZZszbrJnNdNVgzuD1hLRFJyElA6kUSL0GQrZMbiPG5lC/cYdbQwpyWHX4xN8mw==",
      "dev": true,
      "requires": {}
    },
    "@stencil/core": {
-      "version": "3.2.2",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-3.2.2.tgz",
-      "integrity": "sha512-wXb9cVWL0T3cTwYLveekdTFCRGx6+9hpVDEXna+N8K8OPoW6xtFAHRLv+LjOM7k59PkA8MG3IinAfV7Y+xa0Hw=="
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-3.4.0.tgz",
+      "integrity": "sha512-kEtPtV6QegME8YgMjWrhS7KktItbhqOpAuK9aXypDdI/7bLU9iM/4DtnQGWY/DARBophk+XRBfNXcE62Bmi0dw=="
    },
    "@stencil/react-output-target": {
-      "version": "0.5.0",
-      "resolved": "https://registry.npmjs.org/@stencil/react-output-target/-/react-output-target-0.5.0.tgz",
-      "integrity": "sha512-m2UwgrFuVXzi1h4m6I+EWDGeZV4n1wPHkzbRCS9QaqysiQEN5VIi9zjLzvPQF7O9Gg3E/W28z0yElp0kY3VuFQ==",
+      "version": "0.5.3",
+      "resolved": "https://registry.npmjs.org/@stencil/react-output-target/-/react-output-target-0.5.3.tgz",
+      "integrity": "sha512-68jwRp35CjAcwhTJ9yFD/3n+jrHOqvEH2jreVuPVvZK+4tkhPlYlwz0d1E1RlF3jyifUSfdkWUGgXIEy8Fo3yw==",
      "dev": true,
      "requires": {}
    },
    "@stencil/sass": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/@stencil/sass/-/sass-3.0.3.tgz",
-      "integrity": "sha512-MnRxCbPji4Wr7Ilu22WlEbf1F0gyRGp617ADib0zx2d46aRg/brYdRrhcn8eaANmEXZgT6s8zGh8QO/9LZHN2A==",
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@stencil/sass/-/sass-3.0.4.tgz",
+      "integrity": "sha512-k1dP0A2QBx62m250FATc1hErXxXs6Jnf4TBxdL1C/dc32Kzz2n5aCT4SodBz0ebT5WMnITauZyFqYxzCzDoKag==",
      "dev": true,
      "requires": {}
    },
    "@stencil/vue-output-target": {
-      "version": "0.8.5",
-      "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.8.5.tgz",
-      "integrity": "sha512-AOse8WGzdH3lYhw+yQ/MYvobcaSOFd7B/xQ+oWv3GZLZpCw5fw+eOfFv1734mdA/Jjx+kWADlgsZ4w+cmiR+ZQ==",
+      "version": "0.8.6",
+      "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.8.6.tgz",
+      "integrity": "sha512-B1gQW8FWeU7x/KBPm9R28jYFGN5NsZTZR4jwfDMhKBmU1Q2dIxFY52ARhbrfj5tJQxKoxr2tQJD2S14r9t1v7w==",
      "dev": true,
      "requires": {}
    },
@@ -14072,6 +14072,12 @@
      "integrity": "sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ==",
      "dev": true
    },
+    "immutable": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.0.tgz",
+      "integrity": "sha512-0AOCmOip+xgJwEVTQj1EfiDDOkPmuyllDuTuEX+DDXUgapLAsBIfkg3sxCYyCEA8mQqZrrxPUGjcOQ2JS3WLkg==",
+      "dev": true
+    },
    "import-fresh": {
      "version": "3.2.1",
      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.2.1.tgz",
@@ -16274,20 +16280,10 @@
        "find-up": "^4.0.0"
      }
    },
-    "playwright": {
-      "version": "1.33.0",
-      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.33.0.tgz",
-      "integrity": "sha512-+zzU3V2TslRX2ETBRgQKsKytYBkJeLZ2xzUj4JohnZnxQnivoUvOvNbRBYWSYykQTO0Y4zb8NwZTYFUO+EpPBQ==",
-      "dev": true,
-      "peer": true,
-      "requires": {
-        "playwright-core": "1.33.0"
-      }
-    },
    "playwright-core": {
-      "version": "1.33.0",
-      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.33.0.tgz",
-      "integrity": "sha512-aizyPE1Cj62vAECdph1iaMILpT0WUDCq3E6rW6I+dleSbBoGbktvJtzS6VHkZ4DKNEOG9qJpiom/ZxO+S15LAw==",
+      "version": "1.35.1",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.35.1.tgz",
+      "integrity": "sha512-pNXb6CQ7OqmGDRspEjlxE49w+4YtR6a3X6mT1hZXeJHWmsEz7SunmvZeiG/+y1yyMZdHnnn73WKYdtV1er0Xyg==",
      "dev": true
    },
    "postcss": {
@@ -16729,12 +16725,14 @@
      "dev": true
    },
    "sass": {
-      "version": "1.30.0",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.30.0.tgz",
-      "integrity": "sha512-26EUhOXRLaUY7+mWuRFqGeGGNmhB1vblpTENO1Z7mAzzIZeVxZr9EZoaY1kyGLFWdSOZxRMAufiN2mkbO6dAlw==",
+      "version": "1.63.6",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.63.6.tgz",
+      "integrity": "sha512-MJuxGMHzaOW7ipp+1KdELtqKbfAWbH7OLIdoSMnVe3EXPMTmxTmlaZDCTsgIpPCs3w99lLo9/zDKkOrJuT5byw==",
      "dev": true,
      "requires": {
-        "chokidar": ">=2.0.0 <4.0.0"
+        "chokidar": ">=3.0.0 <4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
      }
    },
    "saxes": {
@@ -16880,6 +16878,12 @@
      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
      "dev": true
    },
+    "source-map-js": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
+      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
+      "dev": true
+    },
    "source-map-support": {
      "version": "0.5.19",
      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.19.tgz",
--- a/core/package.json
+++ b/core/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@ionic/core",
-  "version": "7.0.9",
+  "version": "7.1.0",
  "description": "Base components for Ionic",
  "keywords": [
    "ionic",
@@ -31,22 +31,22 @@
    "loader/"
  ],
  "dependencies": {
-    "@stencil/core": "^3.2.2",
-    "ionicons": "^7.1.0",
+    "@stencil/core": "^3.4.0",
+    "ionicons": "7.1.0",
    "tslib": "^2.1.0"
  },
  "devDependencies": {
-    "@axe-core/playwright": "^4.7.1",
+    "@axe-core/playwright": "^4.7.3",
    "@ionic/eslint-config": "^0.3.0",
    "@ionic/prettier-config": "^2.0.0",
    "@jest/core": "^27.5.1",
-    "@playwright/test": "^1.33.0",
+    "@playwright/test": "^1.35.1",
    "@rollup/plugin-node-resolve": "^8.4.0",
    "@rollup/plugin-virtual": "^2.0.3",
-    "@stencil/angular-output-target": "^0.7.0",
-    "@stencil/react-output-target": "^0.5.0",
-    "@stencil/sass": "^3.0.3",
-    "@stencil/vue-output-target": "^0.8.5",
+    "@stencil/angular-output-target": "^0.7.1",
+    "@stencil/react-output-target": "^0.5.3",
+    "@stencil/sass": "^3.0.4",
+    "@stencil/vue-output-target": "^0.8.6",
    "@types/jest": "^27.5.2",
    "@types/node": "^14.6.0",
    "@typescript-eslint/eslint-plugin": "^5.17.0",
@@ -62,7 +62,7 @@
    "jest-cli": "^27.5.1",
    "prettier": "^2.6.1",
    "rollup": "^2.26.4",
-    "sass": "^1.26.10",
+    "sass": "^1.63.6",
    "serve": "^14.0.1",
    "stylelint": "^13.13.1",
    "stylelint-order": "^4.1.0",
--- 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;
        /**
@@ -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;
        /**
--- 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';

--- 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,
--- a/core/src/components/accordion/test/basic/accordion.e2e.ts-snapshots/accordion-basic-ios-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/accordion/test/basic/accordion.e2e.ts-snapshots/accordion-basic-ios-ltr-Mobile-Chrome-linux.png
--- a/core/src/components/accordion/test/basic/accordion.e2e.ts-snapshots/accordion-basic-ios-rtl-Mobile-Chrome-linux.png
+++ b/core/src/components/accordion/test/basic/accordion.e2e.ts-snapshots/accordion-basic-ios-rtl-Mobile-Chrome-linux.png
--- a/core/src/components/accordion/test/basic/accordion.e2e.ts-snapshots/accordion-basic-md-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/accordion/test/basic/accordion.e2e.ts-snapshots/accordion-basic-md-ltr-Mobile-Chrome-linux.png
--- a/core/src/components/accordion/test/basic/accordion.e2e.ts-snapshots/accordion-basic-md-ltr-Mobile-Firefox-linux.png
+++ b/core/src/components/accordion/test/basic/accordion.e2e.ts-snapshots/accordion-basic-md-ltr-Mobile-Firefox-linux.png
--- a/core/src/components/accordion/test/basic/accordion.e2e.ts-snapshots/accordion-basic-md-ltr-Mobile-Safari-linux.png
+++ b/core/src/components/accordion/test/basic/accordion.e2e.ts-snapshots/accordion-basic-md-ltr-Mobile-Safari-linux.png
--- a/core/src/components/accordion/test/basic/accordion.e2e.ts-snapshots/accordion-basic-md-rtl-Mobile-Chrome-linux.png
+++ b/core/src/components/accordion/test/basic/accordion.e2e.ts-snapshots/accordion-basic-md-rtl-Mobile-Chrome-linux.png
--- a/core/src/components/accordion/test/basic/accordion.e2e.ts-snapshots/accordion-basic-md-rtl-Mobile-Firefox-linux.png
+++ b/core/src/components/accordion/test/basic/accordion.e2e.ts-snapshots/accordion-basic-md-rtl-Mobile-Firefox-linux.png
--- a/core/src/components/accordion/test/basic/accordion.e2e.ts-snapshots/accordion-basic-md-rtl-Mobile-Safari-linux.png
+++ b/core/src/components/accordion/test/basic/accordion.e2e.ts-snapshots/accordion-basic-md-rtl-Mobile-Safari-linux.png
--- a/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-one-open-ios-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-one-open-ios-ltr-Mobile-Chrome-linux.png
--- a/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-two-open-ios-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-two-open-ios-ltr-Mobile-Chrome-linux.png
--- a/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-zero-open-ios-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-zero-open-ios-ltr-Mobile-Chrome-linux.png
--- a/core/src/components/accordion/test/nested/accordion.e2e.ts-snapshots/accordion-parent-disabled-ios-ltr-Mobile-Firefox-linux.png
+++ b/core/src/components/accordion/test/nested/accordion.e2e.ts-snapshots/accordion-parent-disabled-ios-ltr-Mobile-Firefox-linux.png
--- a/core/src/components/accordion/test/nested/accordion.e2e.ts-snapshots/accordion-parent-disabled-md-ltr-Mobile-Firefox-linux.png
+++ b/core/src/components/accordion/test/nested/accordion.e2e.ts-snapshots/accordion-parent-disabled-md-ltr-Mobile-Firefox-linux.png
--- 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';
--- 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
--- 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
--- 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
--- 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
--- 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';
--- 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
--- 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
--- 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
--- 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
--- a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-checkbox-ios-rtl-Mobile-Safari-linux.png
+++ b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-checkbox-ios-rtl-Mobile-Safari-linux.png
--- a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-checkbox-md-rtl-Mobile-Safari-linux.png
+++ b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-checkbox-md-rtl-Mobile-Safari-linux.png
--- a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-radio-ios-rtl-Mobile-Safari-linux.png
+++ b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-radio-ios-rtl-Mobile-Safari-linux.png
--- a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-radio-md-rtl-Mobile-Safari-linux.png
+++ b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-radio-md-rtl-Mobile-Safari-linux.png
--- 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',
--- a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-menu-diff-md-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-menu-diff-md-ltr-Mobile-Chrome-linux.png
--- a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-menu-diff-md-ltr-Mobile-Firefox-linux.png
+++ b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-menu-diff-md-ltr-Mobile-Firefox-linux.png
--- a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-menu-diff-md-ltr-Mobile-Safari-linux.png
+++ b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-menu-diff-md-ltr-Mobile-Safari-linux.png
--- a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-toast-diff-md-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-toast-diff-md-ltr-Mobile-Chrome-linux.png
--- a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-toast-diff-md-ltr-Mobile-Firefox-linux.png
+++ b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-toast-diff-md-ltr-Mobile-Firefox-linux.png
--- a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-toast-diff-md-ltr-Mobile-Safari-linux.png
+++ b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-toast-diff-md-ltr-Mobile-Safari-linux.png
--- a/core/src/components/avatar/test/basic/avatar.e2e.ts-snapshots/avatar-diff-md-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/avatar/test/basic/avatar.e2e.ts-snapshots/avatar-diff-md-ltr-Mobile-Chrome-linux.png
--- a/core/src/components/avatar/test/basic/avatar.e2e.ts-snapshots/avatar-diff-md-ltr-Mobile-Firefox-linux.png
+++ b/core/src/components/avatar/test/basic/avatar.e2e.ts-snapshots/avatar-diff-md-ltr-Mobile-Firefox-linux.png
--- a/core/src/components/avatar/test/basic/avatar.e2e.ts-snapshots/avatar-diff-md-ltr-Mobile-Safari-linux.png
+++ b/core/src/components/avatar/test/basic/avatar.e2e.ts-snapshots/avatar-diff-md-ltr-Mobile-Safari-linux.png
--- 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.
--- a/core/src/components/back-button/test/navigation/index.html
+++ b/core/src/components/back-button/test/navigation/index.html
@@ -1,130 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" dir="ltr">
-  <head>
-    <meta charset="UTF-8" />
-    <title>Back Button - Navigation</title>
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
-    />
-    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
-    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
-    <script src="../../../../../scripts/testing/scripts.js"></script>
-    <script src="../../../../../dist/ionic/ionic.js"></script>
-  </head>
-
-  <body onload="loadFirstPage()">
-    <ion-app>
-      <ion-nav></ion-nav>
-    </ion-app>
-  </body>
-
-  <script>
-    async function loadFirstPage() {
-      const nav = document.querySelector('ion-nav');
-      const firstPage = document.createElement('div');
-      firstPage.classList.add('first-page');
-      firstPage.innerHTML = `
-      <ion-header>
-        <ion-toolbar>
-          <ion-buttons slot="start">
-            <ion-back-button></ion-back-button>
-          </ion-buttons>
-          <ion-title>Page One</ion-title>
-        </ion-toolbar>
-      </ion-header>
-      <ion-content class="ion-padding">
-        <h1>Page One</h1>
-        <ion-button class="next">Go to Page Two</ion-button>
-      </ion-content>
-    `;
-
-      await nav.setRoot(firstPage);
-
-      // okay cool, we're in the DOM now
-      const button = firstPage.querySelector('.next');
-      button.addEventListener('click', async () => {
-        await goToPageTwo(nav);
-      });
-    }
-
-    async function goToPageTwo(nav) {
-      const secondPage = document.createElement('div');
-      secondPage.classList.add('second-page');
-      secondPage.innerHTML = `
-      <ion-header>
-        <ion-toolbar color="secondary">
-          <ion-buttons slot="start">
-            <ion-back-button></ion-back-button>
-          </ion-buttons>
-          <ion-title>Page Two</ion-title>
-        </ion-toolbar>
-      </ion-header>
-      <ion-content class="ion-padding">
-        <h1>Page Two</h1>
-        <p>Just an empty <code>ion-back-button</code></p>
-        <ion-button class="next">Go to Page Three</ion-button>
-      </ion-content>
-    `;
-
-      // okay cool, we're in the DOM now
-      await nav.push(secondPage);
-
-      const nextButton = secondPage.querySelector('ion-button.next');
-      nextButton.addEventListener('click', async () => {
-        await goToPageThree(nav);
-      });
-    }
-
-    async function goToPageThree(nav) {
-      const thirdPage = document.createElement('div');
-      thirdPage.classList.add('third-page');
-      thirdPage.innerHTML = `
-      <ion-header>
-        <ion-toolbar>
-          <ion-buttons slot="start">
-            <ion-back-button color="danger" text="Text!" icon="add"></ion-back-button>
-          </ion-buttons>
-          <ion-title>Page Three</ion-title>
-        </ion-toolbar>
-      </ion-header>
-      <ion-content class="ion-padding">
-        <h1>Page Three</h1>
-        <p>Custom back button</p>
-        <ion-button class="next">Go to Page Four</ion-button>
-      </ion-content>
-    `;
-
-      // okay cool, we're in the DOM now
-      await nav.push(thirdPage);
-
-      const nextButton = thirdPage.querySelector('ion-button.next');
-      nextButton.addEventListener('click', async () => {
-        await goToPageFour(nav);
-      });
-    }
-
-    async function goToPageFour(nav) {
-      const fourthPage = document.createElement('div');
-      fourthPage.classList.add('fourth-page');
-      fourthPage.innerHTML = `
-      <ion-header>
-        <ion-toolbar>
-          <ion-buttons slot="start">
-            <ion-menu-button auto-hide="false"></ion-menu-button>
-            <ion-back-button color="danger"></ion-back-button>
-          </ion-buttons>
-          <ion-title>Page Four</ion-title>
-        </ion-toolbar>
-      </ion-header>
-      <ion-content class="ion-padding">
-        <h1>Page Four</h1>
-        <p>Back button and menu button</p>
-      </ion-content>
-    `;
-
-      // okay cool, we're in the DOM now
-      await nav.push(fourthPage);
-    }
-  </script>
-</html>
--- a/core/src/components/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',
--- a/core/src/components/badge/badge.ios.scss
+++ b/core/src/components/badge/badge.ios.scss
@@ -1,9 +1,11 @@
-@import "./badge";
-@import "./badge.ios.vars";
+@use "badge";
+@use "badge.ios.vars" as iosVars;
+
+@use "../../themes-migrated/ionic.mixins" as mixins;

 // iOS Badge
 // --------------------------------------------------

 :host {
-  @include border-radius($badge-ios-border-radius);
+  @include mixins.border-radius(iosVars.$badge-ios-border-radius);
 }
--- a/core/src/components/badge/badge.ios.vars.scss
+++ b/core/src/components/badge/badge.ios.vars.scss
@@ -1,4 +1,4 @@
-@import "../../themes/ionic.globals.ios";
+@use "../../themes-migrated/ionic.globals.ios";

 // iOS Badge
 // --------------------------------------------------
--- a/core/src/components/badge/badge.md.scss
+++ b/core/src/components/badge/badge.md.scss
@@ -1,5 +1,7 @@
-@import "./badge";
-@import "./badge.md.vars";
+@use "badge";
+@use "badge.md.vars" as mdVars;
+
+@use "../../themes-migrated/ionic.mixins" as mixins;

 // Material Design Badge
 // --------------------------------------------------
@@ -10,5 +12,5 @@
  --padding-bottom: 4px;
  --padding-start: 4px;

-  @include border-radius($badge-md-border-radius);
+  @include mixins.border-radius(mdVars.$badge-md-border-radius);
 }
--- a/core/src/components/badge/badge.md.vars.scss
+++ b/core/src/components/badge/badge.md.vars.scss
@@ -1,4 +1,4 @@
-@import "../../themes/ionic.globals.md";
+@use "../../themes-migrated/ionic.globals.md";

 // Material Design Badge
 // --------------------------------------------------
--- a/core/src/components/badge/badge.scss
+++ b/core/src/components/badge/badge.scss
@@ -1,4 +1,7 @@
-@import "./badge.vars";
+@use "badge.vars" as vars;
+
+@use "../../themes-migrated/ionic.globals" as globals;
+@use "../../themes-migrated/ionic.mixins" as mixins;

 // Badge
 // --------------------------------------------------
@@ -15,24 +18,24 @@
   */
  --background: #{ion-color(primary, base)};
  --color: #{ion-color(primary, contrast)};
-  --padding-top: #{$badge-padding-top};
-  --padding-end: #{$badge-padding-end};
-  --padding-bottom: #{$badge-padding-bottom};
-  --padding-start: #{$badge-padding-start};
+  --padding-top: #{vars.$badge-padding-top};
+  --padding-end: #{vars.$badge-padding-end};
+  --padding-bottom: #{vars.$badge-padding-bottom};
+  --padding-start: #{vars.$badge-padding-start};

-  @include font-smoothing();
-  @include padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));
+  @include mixins.font-smoothing();
+  @include mixins.padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));

  display: inline-block;

-  min-width: $badge-min-width;
+  min-width: vars.$badge-min-width;

  background: var(--background);
  color: var(--color);

-  font-family: $font-family-base;
-  font-size: $badge-font-size;
-  font-weight: $badge-font-weight;
+  font-family: globals.$font-family-base;
+  font-size: vars.$badge-font-size;
+  font-weight: vars.$badge-font-weight;

  line-height: 1;

--- 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.
--- a/core/src/components/badge/badge.vars.scss
+++ b/core/src/components/badge/badge.vars.scss
@@ -1,4 +1,4 @@
-@import "../../themes/ionic.globals";
+@use "../../themes-migrated/ionic.globals";

 // Badge
 // --------------------------------------------------
--- a/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-md-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-md-ltr-Mobile-Chrome-linux.png
--- a/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-md-ltr-Mobile-Firefox-linux.png
+++ b/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-md-ltr-Mobile-Firefox-linux.png
--- a/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-md-ltr-Mobile-Safari-linux.png
+++ b/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-md-ltr-Mobile-Safari-linux.png
--- a/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-md-rtl-Mobile-Chrome-linux.png
+++ b/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-md-rtl-Mobile-Chrome-linux.png
--- a/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-md-rtl-Mobile-Firefox-linux.png
+++ b/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-md-rtl-Mobile-Firefox-linux.png
--- a/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-md-rtl-Mobile-Safari-linux.png
+++ b/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-md-rtl-Mobile-Safari-linux.png
--- 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';
--- 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';

 /**
--- a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumb-diff-md-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumb-diff-md-ltr-Mobile-Chrome-linux.png
--- a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumb-diff-md-ltr-Mobile-Firefox-linux.png
+++ b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumb-diff-md-ltr-Mobile-Firefox-linux.png
--- a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumb-diff-md-ltr-Mobile-Safari-linux.png
+++ b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumb-diff-md-ltr-Mobile-Safari-linux.png
--- a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumb-diff-md-rtl-Mobile-Chrome-linux.png
+++ b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumb-diff-md-rtl-Mobile-Chrome-linux.png
--- a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumb-diff-md-rtl-Mobile-Firefox-linux.png
+++ b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumb-diff-md-rtl-Mobile-Firefox-linux.png
--- a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumb-diff-md-rtl-Mobile-Safari-linux.png
+++ b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumb-diff-md-rtl-Mobile-Safari-linux.png
--- a/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumb-collapsed-diff-ios-rtl-Mobile-Safari-linux.png
+++ b/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumb-collapsed-diff-ios-rtl-Mobile-Safari-linux.png
--- a/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumb-collapsed-diff-md-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumb-collapsed-diff-md-ltr-Mobile-Chrome-linux.png
--- a/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumb-collapsed-diff-md-ltr-Mobile-Firefox-linux.png
+++ b/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumb-collapsed-diff-md-ltr-Mobile-Firefox-linux.png
--- a/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumb-collapsed-diff-md-ltr-Mobile-Safari-linux.png
+++ b/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumb-collapsed-diff-md-ltr-Mobile-Safari-linux.png
--- a/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumb-collapsed-diff-md-rtl-Mobile-Chrome-linux.png
+++ b/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumb-collapsed-diff-md-rtl-Mobile-Chrome-linux.png
--- a/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumb-collapsed-diff-md-rtl-Mobile-Firefox-linux.png
+++ b/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumb-collapsed-diff-md-rtl-Mobile-Firefox-linux.png
--- a/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumb-collapsed-diff-md-rtl-Mobile-Safari-linux.png
+++ b/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumb-collapsed-diff-md-rtl-Mobile-Safari-linux.png
--- 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';

 /**
--- a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-md-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-md-ltr-Mobile-Chrome-linux.png
--- a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-md-ltr-Mobile-Firefox-linux.png
+++ b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-md-ltr-Mobile-Firefox-linux.png
--- a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-md-ltr-Mobile-Safari-linux.png
+++ b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-md-ltr-Mobile-Safari-linux.png
--- a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-md-rtl-Mobile-Chrome-linux.png
+++ b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-md-rtl-Mobile-Chrome-linux.png
--- a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-md-rtl-Mobile-Firefox-linux.png
+++ b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-md-rtl-Mobile-Firefox-linux.png
--- a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-md-rtl-Mobile-Safari-linux.png
+++ b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-md-rtl-Mobile-Safari-linux.png
--- a/Show More
+++ b/Show More