Test

2026-03-13 10:22:08 +08:00 · 2024-01-30 09:42:45 -05:00
329 changed files with 1445 additions and 3464 deletions
--- a/.github/COMPONENT-GUIDE.md
+++ b/.github/COMPONENT-GUIDE.md
@@ -328,7 +328,7 @@ The ripple effect should be added to elements for Material Design. It *requires*

 ```jsx
 render() {
-  const theme = getIonTheme(this);
+  const mode = getIonMode(this);

 return (
  <Host
@@ -338,7 +338,7 @@ return (
  >
    <button>
      <slot></slot>
-      {theme === 'md' && <ion-ripple-effect></ion-ripple-effect>}
+      {mode === 'md' && <ion-ripple-effect></ion-ripple-effect>}
    </button>
  </Host>
 );
--- a/.github/dependabot.yml
+++ b/.github/dependabot.yml
@@ -0,0 +1,20 @@
+version: 2
+updates:
+  - package-ecosystem: "npm"
+    directory: "/core"
+    schedule:
+      interval: "daily"
+    versioning-strategy: increase
+    allow:
+      - dependency-name: "@playwright/test"
+      - dependency-name: "@axe-core/playwright"
+      - dependency-name: "@stencil/angular-output-target"
+      - dependency-name: "@stencil/core"
+      - dependency-name: "@stencil/react-output-target"
+      - dependency-name: "@stencil/sass"
+      - dependency-name: "@stencil/vue-output-target"
+      - dependency-name: "ionicons"
+      - dependency-name: "@capacitor/core"
+      - dependency-name: "@capacitor/keyboard"
+      - dependency-name: "@capacitor/haptics"
+      - dependency-name: "@capacitor/status-bar"
--- a/.github/workflows/actions/build-core-stencil-prerelease/action.yml
+++ b/.github/workflows/actions/build-core-stencil-prerelease/action.yml
@@ -8,7 +8,7 @@ inputs:
 runs:
  using: 'composite'
  steps:
-    - uses: actions/checkout@v4
+    - uses: actions/checkout@v3
    - uses: actions/setup-node@v3
      with:
        node-version: 18.x
--- a/.github/workflows/actions/build-core/action.yml
+++ b/.github/workflows/actions/build-core/action.yml
@@ -8,7 +8,7 @@ inputs:
 runs:
  using: 'composite'
  steps:
-    - uses: actions/checkout@v4
+    - uses: actions/checkout@v3
    - uses: actions/setup-node@v3
      with:
        node-version: 18.x
--- a/.github/workflows/assign-issues.yml
+++ b/.github/workflows/assign-issues.yml
@@ -13,6 +13,6 @@ jobs:
      - name: 'Auto-assign issue'
        uses: pozil/auto-assign-issue@edee9537367a8fbc625d27f9e10aa8bad47b8723 # v1.13.0
        with:
-          assignees: sean-perkins, brandyscarney, amandaejohnston, mapsandapps, thetaPC
+          assignees: liamdebeasi, sean-perkins, brandyscarney, amandaejohnston, mapsandapps, thetaPC
          numOfAssignee: 1
          allowSelfAssign: false
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@@ -22,7 +22,7 @@ jobs:
  build-core:
    runs-on: ubuntu-latest
    steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v3
      - uses: ./.github/workflows/actions/build-core
        with:
          ionicons-version: ${{ inputs.ionicons_npm_release_tag }}
@@ -31,21 +31,21 @@ jobs:
    needs: [build-core]
    runs-on: ubuntu-latest
    steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v3
      - uses: ./.github/workflows/actions/test-core-clean-build

  test-core-lint:
    needs: [build-core]
    runs-on: ubuntu-latest
    steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v3
      - uses: ./.github/workflows/actions/test-core-lint

  test-core-spec:
    needs: [build-core]
    runs-on: ubuntu-latest
    steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v3
      - uses: ./.github/workflows/actions/test-core-spec

  test-core-screenshot:
@@ -62,7 +62,7 @@ jobs:
    needs: [build-core]
    runs-on: ubuntu-latest
    steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v3
      - uses: ./.github/workflows/actions/test-core-screenshot
        with:
          shard: ${{ matrix.shard }}
@@ -90,14 +90,14 @@ jobs:
    needs: [build-core]
    runs-on: ubuntu-latest
    steps:
-    - uses: actions/checkout@v4
+    - uses: actions/checkout@v3
    - uses: ./.github/workflows/actions/build-vue

  build-vue-router:
    needs: [build-vue]
    runs-on: ubuntu-latest
    steps:
-    - uses: actions/checkout@v4
+    - uses: actions/checkout@v3
    - uses: ./.github/workflows/actions/build-vue-router

  test-vue-e2e:
@@ -108,7 +108,7 @@ jobs:
    needs: [build-vue, build-vue-router]
    runs-on: ubuntu-latest
    steps:
-    - uses: actions/checkout@v4
+    - uses: actions/checkout@v3
    - uses: ./.github/workflows/actions/test-vue-e2e
      with:
        app: ${{ matrix.apps }}
@@ -126,14 +126,14 @@ jobs:
    needs: [build-core]
    runs-on: ubuntu-latest
    steps:
-    - uses: actions/checkout@v4
+    - uses: actions/checkout@v3
    - uses: ./.github/workflows/actions/build-angular

  build-angular-server:
    needs: [build-core]
    runs-on: ubuntu-latest
    steps:
-    - uses: actions/checkout@v4
+    - uses: actions/checkout@v3
    - uses: ./.github/workflows/actions/build-angular-server

  test-angular-e2e:
@@ -144,7 +144,7 @@ jobs:
    needs: [build-angular, build-angular-server]
    runs-on: ubuntu-latest
    steps:
-    - uses: actions/checkout@v4
+    - uses: actions/checkout@v3
    - uses: ./.github/workflows/actions/test-angular-e2e
      with:
        app: ${{ matrix.apps }}
@@ -162,14 +162,14 @@ jobs:
    needs: [build-core]
    runs-on: ubuntu-latest
    steps:
-    - uses: actions/checkout@v4
+    - uses: actions/checkout@v3
    - uses: ./.github/workflows/actions/build-react

  build-react-router:
    needs: [build-react]
    runs-on: ubuntu-latest
    steps:
-    - uses: actions/checkout@v4
+    - uses: actions/checkout@v3
    - uses: ./.github/workflows/actions/build-react-router

  test-react-router-e2e:
@@ -180,7 +180,7 @@ jobs:
    needs: [build-react, build-react-router]
    runs-on: ubuntu-latest
    steps:
-    - uses: actions/checkout@v4
+    - uses: actions/checkout@v3
    - uses: ./.github/workflows/actions/test-react-router-e2e
      with:
        app: ${{ matrix.apps }}
@@ -202,7 +202,7 @@ jobs:
    needs: [build-react, build-react-router]
    runs-on: ubuntu-latest
    steps:
-    - uses: actions/checkout@v4
+    - uses: actions/checkout@v3
    - uses: ./.github/workflows/actions/test-react-e2e
      with:
        app: ${{ matrix.apps }}
--- a/.github/workflows/codeql-analysis.yml
+++ b/.github/workflows/codeql-analysis.yml
@@ -14,7 +14,7 @@ jobs:
    permissions:
      security-events: write
    steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v3
      - uses: github/codeql-action/init@v2
        with:
          languages: javascript
--- a/.github/workflows/dev-build.yml
+++ b/.github/workflows/dev-build.yml
@@ -9,7 +9,7 @@ jobs:
    outputs:
      dev-hash: ${{ steps.create-dev-hash.outputs.DEV_HASH }}
    steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v3
      # A 1 is required before the timestamp
      # as lerna will fail when there is a leading 0
      # See https://github.com/lerna/lerna/issues/2840
--- a/.github/workflows/nightly.yml
+++ b/.github/workflows/nightly.yml
@@ -12,7 +12,7 @@ jobs:
    outputs:
      nightly-hash: ${{ steps.create-nightly-hash.outputs.NIGHTLY_HASH }}
    steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v3
      # A 1 is required before the timestamp
      # as lerna will fail when there is a leading 0
      # See https://github.com/lerna/lerna/issues/2840
--- a/.github/workflows/release-ionic.yml
+++ b/.github/workflows/release-ionic.yml
@@ -22,7 +22,7 @@ jobs:
  release-core:
    runs-on: ubuntu-latest
    steps:
-    - uses: actions/checkout@v4
+    - uses: actions/checkout@v3
    - uses: ./.github/workflows/actions/publish-npm
      with:
        scope: '@ionic/core'
@@ -48,7 +48,7 @@ jobs:
    needs: [release-core]
    runs-on: ubuntu-latest
    steps:
-    - uses: actions/checkout@v4
+    - uses: actions/checkout@v3
    - name: Restore @ionic/docs built cache
      uses: ./.github/workflows/actions/download-archive
      with:
@@ -68,7 +68,7 @@ jobs:
    needs: [release-core]
    runs-on: ubuntu-latest
    steps:
-    - uses: actions/checkout@v4
+    - uses: actions/checkout@v3
    - name: Restore @ionic/core built cache
      uses: ./.github/workflows/actions/download-archive
      with:
@@ -95,7 +95,7 @@ jobs:
    needs: [release-core]
    runs-on: ubuntu-latest
    steps:
-    - uses: actions/checkout@v4
+    - uses: actions/checkout@v3
    - name: Restore @ionic/core built cache
      uses: ./.github/workflows/actions/download-archive
      with:
@@ -121,7 +121,7 @@ jobs:
    needs: [release-core]
    runs-on: ubuntu-latest
    steps:
-    - uses: actions/checkout@v4
+    - uses: actions/checkout@v3
    - name: Restore @ionic/core built cache
      uses: ./.github/workflows/actions/download-archive
      with:
@@ -147,7 +147,7 @@ jobs:
    needs: [release-core]
    runs-on: ubuntu-latest
    steps:
-    - uses: actions/checkout@v4
+    - uses: actions/checkout@v3
    - name: Restore @ionic/core built cache
      uses: ./.github/workflows/actions/download-archive
      with:
@@ -168,7 +168,7 @@ jobs:
    needs: [release-react]
    runs-on: ubuntu-latest
    steps:
-    - uses: actions/checkout@v4
+    - uses: actions/checkout@v3
    - name: Restore @ionic/core built cache
      uses: ./.github/workflows/actions/download-archive
      with:
@@ -194,7 +194,7 @@ jobs:
    needs: [release-vue]
    runs-on: ubuntu-latest
    steps:
-    - uses: actions/checkout@v4
+    - uses: actions/checkout@v3
    - name: Restore @ionic/core built cache
      uses: ./.github/workflows/actions/download-archive
      with:
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -50,7 +50,7 @@ jobs:
    needs: [release-ionic]
    runs-on: ubuntu-latest
    steps:
-    - uses: actions/checkout@v4
+    - uses: actions/checkout@v3
      with:
        token: ${{ secrets.IONITRON_TOKEN }}
        fetch-depth: 0
@@ -78,7 +78,7 @@ jobs:
    needs: [finalize-release]
    runs-on: ubuntu-latest
    steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v3
        # Pull the latest version of the reference
        # branch instead of the revision that triggered
        # the workflow otherwise we won't get the commit
--- a/.github/workflows/stencil-nightly.yml
+++ b/.github/workflows/stencil-nightly.yml
@@ -26,7 +26,7 @@ jobs:
  build-core-with-stencil-nightly:
    runs-on: ubuntu-latest
    steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v3
      - uses: ./.github/workflows/actions/build-core-stencil-prerelease
        with:
          stencil-version: ${{ inputs.npm_release_tag || 'nightly' }}
@@ -35,21 +35,21 @@ jobs:
    needs: [build-core-with-stencil-nightly]
    runs-on: ubuntu-latest
    steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v3
      - uses: ./.github/workflows/actions/test-core-clean-build

  test-core-lint:
    needs: [build-core-with-stencil-nightly]
    runs-on: ubuntu-latest
    steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v3
      - uses: ./.github/workflows/actions/test-core-lint

  test-core-spec:
    needs: [build-core-with-stencil-nightly]
    runs-on: ubuntu-latest
    steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v3
      - uses: ./.github/workflows/actions/test-core-spec
        with:
          stencil-version: ${{ inputs.npm_release_tag || 'nightly' }}
@@ -72,7 +72,7 @@ jobs:
    needs: [build-core-with-stencil-nightly]
    runs-on: ubuntu-latest
    steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v3
      - uses: ./.github/workflows/actions/test-core-screenshot
        with:
          shard: ${{ matrix.shard }}
@@ -100,14 +100,14 @@ jobs:
    needs: [build-core-with-stencil-nightly]
    runs-on: ubuntu-latest
    steps:
-    - uses: actions/checkout@v4
+    - uses: actions/checkout@v3
    - uses: ./.github/workflows/actions/build-vue

  build-vue-router:
    needs: [build-vue]
    runs-on: ubuntu-latest
    steps:
-    - uses: actions/checkout@v4
+    - uses: actions/checkout@v3
    - uses: ./.github/workflows/actions/build-vue-router

  test-vue-e2e:
@@ -118,7 +118,7 @@ jobs:
    needs: [build-vue, build-vue-router]
    runs-on: ubuntu-latest
    steps:
-    - uses: actions/checkout@v4
+    - uses: actions/checkout@v3
    - uses: ./.github/workflows/actions/test-vue-e2e
      with:
        app: ${{ matrix.apps }}
@@ -136,25 +136,25 @@ jobs:
    needs: [build-core-with-stencil-nightly]
    runs-on: ubuntu-latest
    steps:
-    - uses: actions/checkout@v4
+    - uses: actions/checkout@v3
    - uses: ./.github/workflows/actions/build-angular

  build-angular-server:
    needs: [build-core-with-stencil-nightly]
    runs-on: ubuntu-latest
    steps:
-    - uses: actions/checkout@v4
+    - uses: actions/checkout@v3
    - uses: ./.github/workflows/actions/build-angular-server

  test-angular-e2e:
    strategy:
      fail-fast: false
      matrix:
-        apps: [ng16, ng17]
+        apps: [ng12, ng13, ng14, ng15]
    needs: [build-angular, build-angular-server]
    runs-on: ubuntu-latest
    steps:
-    - uses: actions/checkout@v4
+    - uses: actions/checkout@v3
    - uses: ./.github/workflows/actions/test-angular-e2e
      with:
        app: ${{ matrix.apps }}
@@ -172,14 +172,14 @@ jobs:
    needs: [build-core-with-stencil-nightly]
    runs-on: ubuntu-latest
    steps:
-    - uses: actions/checkout@v4
+    - uses: actions/checkout@v3
    - uses: ./.github/workflows/actions/build-react

  build-react-router:
    needs: [build-react]
    runs-on: ubuntu-latest
    steps:
-    - uses: actions/checkout@v4
+    - uses: actions/checkout@v3
    - uses: ./.github/workflows/actions/build-react-router

  test-react-router-e2e:
@@ -190,7 +190,7 @@ jobs:
    needs: [build-react, build-react-router]
    runs-on: ubuntu-latest
    steps:
-    - uses: actions/checkout@v4
+    - uses: actions/checkout@v3
    - uses: ./.github/workflows/actions/test-react-router-e2e
      with:
        app: ${{ matrix.apps }}
@@ -212,7 +212,7 @@ jobs:
    needs: [build-react, build-react-router]
    runs-on: ubuntu-latest
    steps:
-    - uses: actions/checkout@v4
+    - uses: actions/checkout@v3
    - uses: ./.github/workflows/actions/test-react-e2e
      with:
        app: ${{ matrix.apps }}
--- a/.github/workflows/update-screenshots.yml
+++ b/.github/workflows/update-screenshots.yml
@@ -12,7 +12,7 @@ jobs:
  build-core:
    runs-on: ubuntu-latest
    steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v3
      - uses: ./.github/workflows/actions/build-core

  test-core-screenshot:
@@ -33,7 +33,7 @@ jobs:
    needs: [build-core]
    runs-on: ubuntu-latest
    steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v3
      - uses: ./.github/workflows/actions/test-core-screenshot
        with:
          shard: ${{ matrix.shard }}
@@ -45,7 +45,7 @@ jobs:
    runs-on: ubuntu-latest
    needs: [test-core-screenshot]
    steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v3
        # Normally, we could just push with the
        # default GITHUB_TOKEN, but that will
        # not cause the build workflow
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,58 +3,6 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

-## [7.7.2](https://github.com/ionic-team/ionic-framework/compare/v7.7.1...v7.7.2) (2024-02-14)
-
-
-### Bug Fixes
-
-* **overlays:** do not return focus if application has already moved focus manually ([#28850](https://github.com/ionic-team/ionic-framework/issues/28850)) ([a016670](https://github.com/ionic-team/ionic-framework/commit/a016670a8a46e101d23235b17bc8a2081fb992eb)), closes [#28849](https://github.com/ionic-team/ionic-framework/issues/28849)
-* **overlays:** ensure that only topmost overlay is announced by screen readers ([#28997](https://github.com/ionic-team/ionic-framework/issues/28997)) ([ba4ba61](https://github.com/ionic-team/ionic-framework/commit/ba4ba6161c1a6c67f7804b07f49c64ac9ad2b14c)), closes [#23472](https://github.com/ionic-team/ionic-framework/issues/23472)
-* **popover:** render arrow above backdrop ([#28986](https://github.com/ionic-team/ionic-framework/issues/28986)) ([0a8964d](https://github.com/ionic-team/ionic-framework/commit/0a8964d30c76218fe62f7f4aed4f81df7bb80cd0)), closes [#28985](https://github.com/ionic-team/ionic-framework/issues/28985)
-
-
-
-
-
-## [7.7.1](https://github.com/ionic-team/ionic-framework/compare/v7.7.0...v7.7.1) (2024-02-07)
-
-
-### Bug Fixes
-
-* **action-sheet:** iOS dismiss animation respects safe area ([#28915](https://github.com/ionic-team/ionic-framework/issues/28915)) ([7449fb4](https://github.com/ionic-team/ionic-framework/commit/7449fb4fed4048f5d01ba068dc6f8e2d7727e95d)), closes [#28541](https://github.com/ionic-team/ionic-framework/issues/28541)
-* **overlays:** tear down animations after dismiss ([#28907](https://github.com/ionic-team/ionic-framework/issues/28907)) ([950fa40](https://github.com/ionic-team/ionic-framework/commit/950fa40c5597c81d5cbaeb9276b09adfea5e79fb)), closes [#28352](https://github.com/ionic-team/ionic-framework/issues/28352)
-* **react:** route with redirect will mount page ([#28961](https://github.com/ionic-team/ionic-framework/issues/28961)) ([5777ce2](https://github.com/ionic-team/ionic-framework/commit/5777ce258119d2715b1326cdc103bd4ad7612bd1)), closes [#28838](https://github.com/ionic-team/ionic-framework/issues/28838)
-* **select:** popover can be scrolled ([#28965](https://github.com/ionic-team/ionic-framework/issues/28965)) ([35ab6b4](https://github.com/ionic-team/ionic-framework/commit/35ab6b4816bd627239de8d8b25ce0c86db8c74b4)), closes [#28963](https://github.com/ionic-team/ionic-framework/issues/28963)
-
-
-
-
-
-# [7.7.0](https://github.com/ionic-team/ionic-framework/compare/v7.6.7...v7.7.0) (2024-01-31)
-
-
-### Features
-
-* add experimental hardware back button support in browsers ([#28705](https://github.com/ionic-team/ionic-framework/issues/28705)) ([658d1ca](https://github.com/ionic-team/ionic-framework/commit/658d1caccd530350843b85c0e24544ec27dd9eb4)), closes [#28703](https://github.com/ionic-team/ionic-framework/issues/28703)
-
-
-
-
-
-## [7.6.7](https://github.com/ionic-team/ionic-framework/compare/v7.6.6...v7.6.7) (2024-01-31)
-
-
-### Bug Fixes
-
-* **accordion:** prevent opening of readonly accordion using keyboard ([#28865](https://github.com/ionic-team/ionic-framework/issues/28865)) ([e10f49c](https://github.com/ionic-team/ionic-framework/commit/e10f49c43daa11fe7deb5a9b9bfd34897542b6b1)), closes [#28344](https://github.com/ionic-team/ionic-framework/issues/28344)
-* **action-sheet, alert, toast:** button roles autocomplete with available options ([#27940](https://github.com/ionic-team/ionic-framework/issues/27940)) ([f6fc22b](https://github.com/ionic-team/ionic-framework/commit/f6fc22bba60388701b80a9421510e3d843d39e9e)), closes [#27965](https://github.com/ionic-team/ionic-framework/issues/27965)
-* **item:** ensure button focus state on property change ([#28892](https://github.com/ionic-team/ionic-framework/issues/28892)) ([bf7922c](https://github.com/ionic-team/ionic-framework/commit/bf7922c8b37b32dbf90650cb74a2e77bedf0c118)), closes [#28525](https://github.com/ionic-team/ionic-framework/issues/28525)
-* **item:** only default slot content wraps ([#28773](https://github.com/ionic-team/ionic-framework/issues/28773)) ([9448783](https://github.com/ionic-team/ionic-framework/commit/9448783bb19b187f867054c86d215e3dc97952c1)), closes [#28769](https://github.com/ionic-team/ionic-framework/issues/28769)
-
-
-
-
-
 ## [7.6.6](https://github.com/ionic-team/ionic-framework/compare/v7.6.5...v7.6.6) (2024-01-24)


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

-## [7.7.2](https://github.com/ionic-team/ionic-framework/compare/v7.7.1...v7.7.2) (2024-02-14)
-
-
-### Bug Fixes
-
-* **overlays:** do not return focus if application has already moved focus manually ([#28850](https://github.com/ionic-team/ionic-framework/issues/28850)) ([a016670](https://github.com/ionic-team/ionic-framework/commit/a016670a8a46e101d23235b17bc8a2081fb992eb)), closes [#28849](https://github.com/ionic-team/ionic-framework/issues/28849)
-* **overlays:** ensure that only topmost overlay is announced by screen readers ([#28997](https://github.com/ionic-team/ionic-framework/issues/28997)) ([ba4ba61](https://github.com/ionic-team/ionic-framework/commit/ba4ba6161c1a6c67f7804b07f49c64ac9ad2b14c)), closes [#23472](https://github.com/ionic-team/ionic-framework/issues/23472)
-* **popover:** render arrow above backdrop ([#28986](https://github.com/ionic-team/ionic-framework/issues/28986)) ([0a8964d](https://github.com/ionic-team/ionic-framework/commit/0a8964d30c76218fe62f7f4aed4f81df7bb80cd0)), closes [#28985](https://github.com/ionic-team/ionic-framework/issues/28985)
-
-
-
-
-
-## [7.7.1](https://github.com/ionic-team/ionic-framework/compare/v7.7.0...v7.7.1) (2024-02-07)
-
-
-### Bug Fixes
-
-* **action-sheet:** iOS dismiss animation respects safe area ([#28915](https://github.com/ionic-team/ionic-framework/issues/28915)) ([7449fb4](https://github.com/ionic-team/ionic-framework/commit/7449fb4fed4048f5d01ba068dc6f8e2d7727e95d)), closes [#28541](https://github.com/ionic-team/ionic-framework/issues/28541)
-* **overlays:** tear down animations after dismiss ([#28907](https://github.com/ionic-team/ionic-framework/issues/28907)) ([950fa40](https://github.com/ionic-team/ionic-framework/commit/950fa40c5597c81d5cbaeb9276b09adfea5e79fb)), closes [#28352](https://github.com/ionic-team/ionic-framework/issues/28352)
-* **select:** popover can be scrolled ([#28965](https://github.com/ionic-team/ionic-framework/issues/28965)) ([35ab6b4](https://github.com/ionic-team/ionic-framework/commit/35ab6b4816bd627239de8d8b25ce0c86db8c74b4)), closes [#28963](https://github.com/ionic-team/ionic-framework/issues/28963)
-
-
-
-
-
-# [7.7.0](https://github.com/ionic-team/ionic-framework/compare/v7.6.7...v7.7.0) (2024-01-31)
-
-
-### Features
-
-* add experimental hardware back button support in browsers ([#28705](https://github.com/ionic-team/ionic-framework/issues/28705)) ([658d1ca](https://github.com/ionic-team/ionic-framework/commit/658d1caccd530350843b85c0e24544ec27dd9eb4)), closes [#28703](https://github.com/ionic-team/ionic-framework/issues/28703)
-
-
-
-
-
-## [7.6.7](https://github.com/ionic-team/ionic-framework/compare/v7.6.6...v7.6.7) (2024-01-31)
-
-
-### Bug Fixes
-
-* **accordion:** prevent opening of readonly accordion using keyboard ([#28865](https://github.com/ionic-team/ionic-framework/issues/28865)) ([e10f49c](https://github.com/ionic-team/ionic-framework/commit/e10f49c43daa11fe7deb5a9b9bfd34897542b6b1)), closes [#28344](https://github.com/ionic-team/ionic-framework/issues/28344)
-* **action-sheet, alert, toast:** button roles autocomplete with available options ([#27940](https://github.com/ionic-team/ionic-framework/issues/27940)) ([f6fc22b](https://github.com/ionic-team/ionic-framework/commit/f6fc22bba60388701b80a9421510e3d843d39e9e)), closes [#27965](https://github.com/ionic-team/ionic-framework/issues/27965)
-* **item:** ensure button focus state on property change ([#28892](https://github.com/ionic-team/ionic-framework/issues/28892)) ([bf7922c](https://github.com/ionic-team/ionic-framework/commit/bf7922c8b37b32dbf90650cb74a2e77bedf0c118)), closes [#28525](https://github.com/ionic-team/ionic-framework/issues/28525)
-* **item:** only default slot content wraps ([#28773](https://github.com/ionic-team/ionic-framework/issues/28773)) ([9448783](https://github.com/ionic-team/ionic-framework/commit/9448783bb19b187f867054c86d215e3dc97952c1)), closes [#28769](https://github.com/ionic-team/ionic-framework/issues/28769)
-
-
-
-
-
 ## [7.6.6](https://github.com/ionic-team/ionic-framework/compare/v7.6.5...v7.6.6) (2024-01-24)


--- a/core/api.txt
+++ b/core/api.txt
@@ -3,7 +3,6 @@ ion-accordion,shadow
 ion-accordion,prop,disabled,boolean,false,false,false
 ion-accordion,prop,mode,"ios" | "md",undefined,false,false
 ion-accordion,prop,readonly,boolean,false,false,false
-ion-accordion,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-accordion,prop,toggleIcon,string,chevronDown,false,false
 ion-accordion,prop,toggleIconSlot,"end" | "start",'end',false,false
 ion-accordion,prop,value,string,`ion-accordion-${accordionIds++}`,false,false
@@ -18,7 +17,6 @@ ion-accordion-group,prop,expand,"compact" | "inset",'compact',false,false
 ion-accordion-group,prop,mode,"ios" | "md",undefined,false,false
 ion-accordion-group,prop,multiple,boolean | undefined,undefined,false,false
 ion-accordion-group,prop,readonly,boolean,false,false,false
-ion-accordion-group,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-accordion-group,prop,value,null | string | string[] | undefined,undefined,false,false
 ion-accordion-group,event,ionChange,AccordionGroupChangeEventDetail<any>,true

@@ -35,7 +33,6 @@ ion-action-sheet,prop,keyboardClose,boolean,true,false,false
 ion-action-sheet,prop,leaveAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
 ion-action-sheet,prop,mode,"ios" | "md",undefined,false,false
 ion-action-sheet,prop,subHeader,string | undefined,undefined,false,false
-ion-action-sheet,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-action-sheet,prop,translucent,boolean,false,false,false
 ion-action-sheet,prop,trigger,string | undefined,undefined,false,false
 ion-action-sheet,method,dismiss,dismiss(data?: any, role?: string) => Promise<boolean>
@@ -89,7 +86,6 @@ ion-alert,prop,leaveAnimation,((baseEl: any, opts?: any) => Animation) | undefin
 ion-alert,prop,message,IonicSafeString | string | undefined,undefined,false,false
 ion-alert,prop,mode,"ios" | "md",undefined,false,false
 ion-alert,prop,subHeader,string | undefined,undefined,false,false
-ion-alert,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-alert,prop,translucent,boolean,false,false,false
 ion-alert,prop,trigger,string | undefined,undefined,false,false
 ion-alert,method,dismiss,dismiss(data?: any, role?: string) => Promise<boolean>
@@ -116,7 +112,6 @@ ion-alert,css-prop,--width
 ion-app,none

 ion-avatar,shadow
-ion-avatar,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-avatar,css-prop,--border-radius

 ion-back-button,shadow
@@ -127,7 +122,6 @@ ion-back-button,prop,icon,null | string | undefined,undefined,false,false
 ion-back-button,prop,mode,"ios" | "md",undefined,false,false
 ion-back-button,prop,routerAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
 ion-back-button,prop,text,null | string | undefined,undefined,false,false
-ion-back-button,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-back-button,prop,type,"button" | "reset" | "submit",'button',false,false
 ion-back-button,css-prop,--background
 ion-back-button,css-prop,--background-focused
@@ -168,14 +162,12 @@ ion-back-button,part,text
 ion-backdrop,shadow
 ion-backdrop,prop,stopPropagation,boolean,true,false,false
 ion-backdrop,prop,tappable,boolean,true,false,false
-ion-backdrop,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-backdrop,prop,visible,boolean,true,false,false
 ion-backdrop,event,ionBackdropTap,void,true

 ion-badge,shadow
 ion-badge,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
 ion-badge,prop,mode,"ios" | "md",undefined,false,false
-ion-badge,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-badge,css-prop,--background
 ion-badge,css-prop,--color
 ion-badge,css-prop,--padding-bottom
@@ -195,7 +187,6 @@ ion-breadcrumb,prop,routerAnimation,((baseEl: any, opts?: any) => Animation) | u
 ion-breadcrumb,prop,routerDirection,"back" | "forward" | "root",'forward',false,false
 ion-breadcrumb,prop,separator,boolean | undefined,undefined,false,false
 ion-breadcrumb,prop,target,string | undefined,undefined,false,false
-ion-breadcrumb,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-breadcrumb,event,ionBlur,void,true
 ion-breadcrumb,event,ionFocus,void,true
 ion-breadcrumb,css-prop,--background-focused
@@ -213,7 +204,6 @@ ion-breadcrumbs,prop,itemsAfterCollapse,number,1,false,false
 ion-breadcrumbs,prop,itemsBeforeCollapse,number,1,false,false
 ion-breadcrumbs,prop,maxItems,number | undefined,undefined,false,false
 ion-breadcrumbs,prop,mode,"ios" | "md",undefined,false,false
-ion-breadcrumbs,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-breadcrumbs,event,ionCollapsedClick,BreadcrumbCollapsedClickEventDetail,true

 ion-button,shadow
@@ -233,7 +223,6 @@ ion-button,prop,shape,"round" | undefined,undefined,false,true
 ion-button,prop,size,"default" | "large" | "small" | undefined,undefined,false,true
 ion-button,prop,strong,boolean,false,false,false
 ion-button,prop,target,string | undefined,undefined,false,false
-ion-button,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-button,prop,type,"button" | "reset" | "submit",'button',false,false
 ion-button,event,ionBlur,void,true
 ion-button,event,ionFocus,void,true
@@ -264,7 +253,6 @@ ion-button,part,native

 ion-buttons,scoped
 ion-buttons,prop,collapse,boolean,false,false,false
-ion-buttons,prop,theme,"ios" | "md" | "ionic",undefined,false,false

 ion-card,shadow
 ion-card,prop,button,boolean,false,false,false
@@ -277,7 +265,6 @@ ion-card,prop,rel,string | undefined,undefined,false,false
 ion-card,prop,routerAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
 ion-card,prop,routerDirection,"back" | "forward" | "root",'forward',false,false
 ion-card,prop,target,string | undefined,undefined,false,false
-ion-card,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-card,prop,type,"button" | "reset" | "submit",'button',false,false
 ion-card,css-prop,--background
 ion-card,css-prop,--color
@@ -285,24 +272,20 @@ ion-card,part,native

 ion-card-content,none
 ion-card-content,prop,mode,"ios" | "md",undefined,false,false
-ion-card-content,prop,theme,"ios" | "md" | "ionic",undefined,false,false

 ion-card-header,shadow
 ion-card-header,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
 ion-card-header,prop,mode,"ios" | "md",undefined,false,false
-ion-card-header,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-card-header,prop,translucent,boolean,false,false,false

 ion-card-subtitle,shadow
 ion-card-subtitle,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
 ion-card-subtitle,prop,mode,"ios" | "md",undefined,false,false
-ion-card-subtitle,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-card-subtitle,css-prop,--color

 ion-card-title,shadow
 ion-card-title,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
 ion-card-title,prop,mode,"ios" | "md",undefined,false,false
-ion-card-title,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-card-title,css-prop,--color

 ion-checkbox,shadow
@@ -316,8 +299,6 @@ ion-checkbox,prop,labelPlacement,"end" | "fixed" | "stacked" | "start",'start',f
 ion-checkbox,prop,legacy,boolean | undefined,undefined,false,false
 ion-checkbox,prop,mode,"ios" | "md",undefined,false,false
 ion-checkbox,prop,name,string,this.inputId,false,false
-ion-checkbox,prop,required,boolean,false,false,false
-ion-checkbox,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-checkbox,prop,value,any,'on',false,false
 ion-checkbox,event,ionBlur,void,true
 ion-checkbox,event,ionChange,CheckboxChangeEventDetail<any>,true
@@ -342,7 +323,6 @@ ion-chip,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "second
 ion-chip,prop,disabled,boolean,false,false,false
 ion-chip,prop,mode,"ios" | "md",undefined,false,false
 ion-chip,prop,outline,boolean,false,false,false
-ion-chip,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-chip,css-prop,--background
 ion-chip,css-prop,--color

@@ -434,7 +414,6 @@ ion-datetime,prop,showDefaultButtons,boolean,false,false,false
 ion-datetime,prop,showDefaultTimeLabel,boolean,true,false,false
 ion-datetime,prop,showDefaultTitle,boolean,false,false,false
 ion-datetime,prop,size,"cover" | "fixed",'fixed',false,false
-ion-datetime,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-datetime,prop,titleSelectedDatesFormatter,((selectedDates: string[]) => string) | undefined,undefined,false,false
 ion-datetime,prop,value,null | string | string[] | undefined,undefined,false,false
 ion-datetime,prop,yearValues,number | number[] | string | undefined,undefined,false,false
@@ -465,7 +444,6 @@ ion-datetime-button,prop,color,"danger" | "dark" | "light" | "medium" | "primary
 ion-datetime-button,prop,datetime,string | undefined,undefined,false,false
 ion-datetime-button,prop,disabled,boolean,false,false,true
 ion-datetime-button,prop,mode,"ios" | "md",undefined,false,false
-ion-datetime-button,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-datetime-button,part,native

 ion-fab,shadow
@@ -489,7 +467,6 @@ ion-fab-button,prop,routerDirection,"back" | "forward" | "root",'forward',false,
 ion-fab-button,prop,show,boolean,false,false,false
 ion-fab-button,prop,size,"small" | undefined,undefined,false,false
 ion-fab-button,prop,target,string | undefined,undefined,false,false
-ion-fab-button,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-fab-button,prop,translucent,boolean,false,false,false
 ion-fab-button,prop,type,"button" | "reset" | "submit",'button',false,false
 ion-fab-button,event,ionBlur,void,true
@@ -527,7 +504,6 @@ ion-fab-list,prop,side,"bottom" | "end" | "start" | "top",'bottom',false,false
 ion-footer,none
 ion-footer,prop,collapse,"fade" | undefined,undefined,false,false
 ion-footer,prop,mode,"ios" | "md",undefined,false,false
-ion-footer,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-footer,prop,translucent,boolean,false,false,false

 ion-grid,shadow
@@ -548,7 +524,6 @@ ion-grid,css-prop,--ion-grid-width-xs
 ion-header,none
 ion-header,prop,collapse,"condense" | "fade" | undefined,undefined,false,false
 ion-header,prop,mode,"ios" | "md",undefined,false,false
-ion-header,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-header,prop,translucent,boolean,false,false,false

 ion-img,shadow
@@ -569,7 +544,6 @@ ion-infinite-scroll,event,ionInfinite,void,true
 ion-infinite-scroll-content,none
 ion-infinite-scroll-content,prop,loadingSpinner,"bubbles" | "circles" | "circular" | "crescent" | "dots" | "lines" | "lines-sharp" | "lines-sharp-small" | "lines-small" | null | undefined,undefined,false,false
 ion-infinite-scroll-content,prop,loadingText,IonicSafeString | string | undefined,undefined,false,false
-ion-infinite-scroll-content,prop,theme,"ios" | "md" | "ionic",undefined,false,false

 ion-input,scoped
 ion-input,prop,accept,string | undefined,undefined,false,false
@@ -607,7 +581,6 @@ ion-input,prop,shape,"round" | undefined,undefined,false,false
 ion-input,prop,size,number | undefined,undefined,false,false
 ion-input,prop,spellcheck,boolean,false,false,false
 ion-input,prop,step,string | undefined,undefined,false,false
-ion-input,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-input,prop,type,"date" | "datetime-local" | "email" | "month" | "number" | "password" | "search" | "tel" | "text" | "time" | "url" | "week",'text',false,false
 ion-input,prop,value,null | number | string | undefined,'',false,false
 ion-input,method,getInputElement,getInputElement() => Promise<HTMLInputElement>
@@ -652,7 +625,6 @@ ion-item,prop,routerAnimation,((baseEl: any, opts?: any) => Animation) | undefin
 ion-item,prop,routerDirection,"back" | "forward" | "root",'forward',false,false
 ion-item,prop,shape,"round" | undefined,undefined,false,false
 ion-item,prop,target,string | undefined,undefined,false,false
-ion-item,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-item,prop,type,"button" | "reset" | "submit",'button',false,false
 ion-item,css-prop,--background
 ion-item,css-prop,--background-activated
@@ -696,7 +668,6 @@ ion-item-divider,shadow
 ion-item-divider,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
 ion-item-divider,prop,mode,"ios" | "md",undefined,false,false
 ion-item-divider,prop,sticky,boolean,false,false,false
-ion-item-divider,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-item-divider,css-prop,--background
 ion-item-divider,css-prop,--color
 ion-item-divider,css-prop,--inner-padding-bottom
@@ -709,7 +680,6 @@ ion-item-divider,css-prop,--padding-start
 ion-item-divider,css-prop,--padding-top

 ion-item-group,none
-ion-item-group,prop,theme,"ios" | "md" | "ionic",undefined,false,false

 ion-item-option,shadow
 ion-item-option,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
@@ -720,7 +690,6 @@ ion-item-option,prop,href,string | undefined,undefined,false,false
 ion-item-option,prop,mode,"ios" | "md",undefined,false,false
 ion-item-option,prop,rel,string | undefined,undefined,false,false
 ion-item-option,prop,target,string | undefined,undefined,false,false
-ion-item-option,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-item-option,prop,type,"button" | "reset" | "submit",'button',false,false
 ion-item-option,css-prop,--background
 ion-item-option,css-prop,--color
@@ -728,7 +697,6 @@ ion-item-option,part,native

 ion-item-options,none
 ion-item-options,prop,side,"end" | "start",'end',false,false
-ion-item-options,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-item-options,event,ionSwipe,any,true

 ion-item-sliding,none
@@ -744,21 +712,18 @@ ion-label,scoped
 ion-label,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
 ion-label,prop,mode,"ios" | "md",undefined,false,false
 ion-label,prop,position,"fixed" | "floating" | "stacked" | undefined,undefined,false,false
-ion-label,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-label,css-prop,--color

 ion-list,none
 ion-list,prop,inset,boolean,false,false,false
 ion-list,prop,lines,"full" | "inset" | "none" | undefined,undefined,false,false
 ion-list,prop,mode,"ios" | "md",undefined,false,false
-ion-list,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-list,method,closeSlidingItems,closeSlidingItems() => Promise<boolean>

 ion-list-header,shadow
 ion-list-header,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
 ion-list-header,prop,lines,"full" | "inset" | "none" | undefined,undefined,false,false
 ion-list-header,prop,mode,"ios" | "md",undefined,false,false
-ion-list-header,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-list-header,css-prop,--background
 ion-list-header,css-prop,--border-color
 ion-list-header,css-prop,--border-style
@@ -780,7 +745,6 @@ ion-loading,prop,message,IonicSafeString | string | undefined,undefined,false,fa
 ion-loading,prop,mode,"ios" | "md",undefined,false,false
 ion-loading,prop,showBackdrop,boolean,true,false,false
 ion-loading,prop,spinner,"bubbles" | "circles" | "circular" | "crescent" | "dots" | "lines" | "lines-sharp" | "lines-sharp-small" | "lines-small" | null | undefined,undefined,false,false
-ion-loading,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-loading,prop,translucent,boolean,false,false,false
 ion-loading,prop,trigger,string | undefined,undefined,false,false
 ion-loading,method,dismiss,dismiss(data?: any, role?: string) => Promise<boolean>
@@ -812,7 +776,6 @@ ion-menu,prop,maxEdgeStart,number,50,false,false
 ion-menu,prop,menuId,string | undefined,undefined,false,true
 ion-menu,prop,side,"end" | "start",'start',false,true
 ion-menu,prop,swipeGesture,boolean,true,false,false
-ion-menu,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-menu,prop,type,string | undefined,undefined,false,false
 ion-menu,method,close,close(animated?: boolean) => Promise<boolean>
 ion-menu,method,isActive,isActive() => Promise<boolean>
@@ -840,7 +803,6 @@ ion-menu-button,prop,color,"danger" | "dark" | "light" | "medium" | "primary" |
 ion-menu-button,prop,disabled,boolean,false,false,false
 ion-menu-button,prop,menu,string | undefined,undefined,false,false
 ion-menu-button,prop,mode,"ios" | "md",undefined,false,false
-ion-menu-button,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-menu-button,prop,type,"button" | "reset" | "submit",'button',false,false
 ion-menu-button,css-prop,--background
 ion-menu-button,css-prop,--background-focused
@@ -880,7 +842,6 @@ ion-modal,prop,leaveAnimation,((baseEl: any, opts?: any) => Animation) | undefin
 ion-modal,prop,mode,"ios" | "md",undefined,false,false
 ion-modal,prop,presentingElement,HTMLElement | undefined,undefined,false,false
 ion-modal,prop,showBackdrop,boolean,true,false,false
-ion-modal,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-modal,prop,trigger,string | undefined,undefined,false,false
 ion-modal,method,dismiss,dismiss(data?: any, role?: string) => Promise<boolean>
 ion-modal,method,getCurrentBreakpoint,getCurrentBreakpoint() => Promise<number | undefined>
@@ -944,7 +905,6 @@ ion-nav-link,prop,routerDirection,"back" | "forward" | "root",'forward',false,fa
 ion-note,shadow
 ion-note,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
 ion-note,prop,mode,"ios" | "md",undefined,false,false
-ion-note,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-note,css-prop,--color

 ion-picker,scoped
@@ -961,7 +921,6 @@ ion-picker,prop,keyboardClose,boolean,true,false,false
 ion-picker,prop,leaveAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
 ion-picker,prop,mode,"ios" | "md",undefined,false,false
 ion-picker,prop,showBackdrop,boolean,true,false,false
-ion-picker,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-picker,prop,trigger,string | undefined,undefined,false,false
 ion-picker,method,dismiss,dismiss(data?: any, role?: string) => Promise<boolean>
 ion-picker,method,getColumn,getColumn(name: string) => Promise<PickerColumn | undefined>
@@ -1010,7 +969,6 @@ ion-popover,prop,reference,"event" | "trigger",'trigger',false,false
 ion-popover,prop,showBackdrop,boolean,true,false,false
 ion-popover,prop,side,"bottom" | "end" | "left" | "right" | "start" | "top",'bottom',false,false
 ion-popover,prop,size,"auto" | "cover",'auto',false,false
-ion-popover,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-popover,prop,translucent,boolean,false,false,false
 ion-popover,prop,trigger,string | undefined,undefined,false,false
 ion-popover,prop,triggerAction,"click" | "context-menu" | "hover",'click',false,false
@@ -1046,7 +1004,6 @@ ion-progress-bar,prop,buffer,number,1,false,false
 ion-progress-bar,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
 ion-progress-bar,prop,mode,"ios" | "md",undefined,false,false
 ion-progress-bar,prop,reversed,boolean,false,false,false
-ion-progress-bar,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-progress-bar,prop,type,"determinate" | "indeterminate",'determinate',false,false
 ion-progress-bar,prop,value,number,0,false,false
 ion-progress-bar,css-prop,--background
@@ -1065,7 +1022,6 @@ ion-radio,prop,labelPlacement,"end" | "fixed" | "stacked" | "start",'start',fals
 ion-radio,prop,legacy,boolean | undefined,undefined,false,false
 ion-radio,prop,mode,"ios" | "md",undefined,false,false
 ion-radio,prop,name,string,this.inputId,false,false
-ion-radio,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-radio,prop,value,any,undefined,false,false
 ion-radio,event,ionBlur,void,true
 ion-radio,event,ionFocus,void,true
@@ -1101,7 +1057,6 @@ ion-range,prop,pin,boolean,false,false,false
 ion-range,prop,pinFormatter,(value: number) => string | number,(value: number): number => Math.round(value),false,false
 ion-range,prop,snaps,boolean,false,false,false
 ion-range,prop,step,number,1,false,false
-ion-range,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-range,prop,ticks,boolean,true,false,false
 ion-range,prop,value,number | { lower: number; upper: number; },0,false,false
 ion-range,event,ionBlur,void,true
@@ -1137,7 +1092,6 @@ ion-refresher,prop,pullFactor,number,1,false,false
 ion-refresher,prop,pullMax,number,this.pullMin + 60,false,false
 ion-refresher,prop,pullMin,number,60,false,false
 ion-refresher,prop,snapbackDuration,string,'280ms',false,false
-ion-refresher,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-refresher,method,cancel,cancel() => Promise<void>
 ion-refresher,method,complete,complete() => Promise<void>
 ion-refresher,method,getProgress,getProgress() => Promise<number>
@@ -1152,7 +1106,6 @@ ion-refresher-content,prop,refreshingSpinner,"bubbles" | "circles" | "circular"
 ion-refresher-content,prop,refreshingText,IonicSafeString | string | undefined,undefined,false,false

 ion-reorder,shadow
-ion-reorder,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-reorder,part,icon

 ion-reorder-group,none
@@ -1221,7 +1174,6 @@ ion-searchbar,prop,searchIcon,string | undefined,undefined,false,false
 ion-searchbar,prop,showCancelButton,"always" | "focus" | "never",'never',false,false
 ion-searchbar,prop,showClearButton,"always" | "focus" | "never",'always',false,false
 ion-searchbar,prop,spellcheck,boolean,false,false,false
-ion-searchbar,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-searchbar,prop,type,"email" | "number" | "password" | "search" | "tel" | "text" | "url",'search',false,false
 ion-searchbar,prop,value,null | string | undefined,'',false,false
 ion-searchbar,method,getInputElement,getInputElement() => Promise<HTMLInputElement>
@@ -1251,7 +1203,6 @@ 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,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-segment,prop,value,number | string | undefined,undefined,false,false
 ion-segment,event,ionChange,SegmentChangeEventDetail,true
 ion-segment,css-prop,--background
@@ -1260,7 +1211,6 @@ ion-segment-button,shadow
 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,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-segment-button,prop,type,"button" | "reset" | "submit",'button',false,false
 ion-segment-button,prop,value,number | string,'ion-sb-' + ids++,false,false
 ion-segment-button,css-prop,--background
@@ -1315,7 +1265,6 @@ 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,theme,"ios" | "md" | "ionic",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>
@@ -1365,7 +1314,6 @@ ion-spinner,css-prop,--color
 ion-split-pane,shadow
 ion-split-pane,prop,contentId,string | undefined,undefined,false,true
 ion-split-pane,prop,disabled,boolean,false,false,false
-ion-split-pane,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-split-pane,prop,when,boolean | string,QUERY['lg'],false,false
 ion-split-pane,event,ionSplitPaneVisible,{ visible: boolean; },true
 ion-split-pane,css-prop,--border
@@ -1382,7 +1330,6 @@ ion-tab-bar,shadow
 ion-tab-bar,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
 ion-tab-bar,prop,mode,"ios" | "md",undefined,false,false
 ion-tab-bar,prop,selectedTab,string | undefined,undefined,false,false
-ion-tab-bar,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-tab-bar,prop,translucent,boolean,false,false,false
 ion-tab-bar,css-prop,--background
 ion-tab-bar,css-prop,--border
@@ -1398,7 +1345,6 @@ ion-tab-button,prop,rel,string | undefined,undefined,false,false
 ion-tab-button,prop,selected,boolean,false,false,false
 ion-tab-button,prop,tab,string | undefined,undefined,false,false
 ion-tab-button,prop,target,string | undefined,undefined,false,false
-ion-tab-button,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-tab-button,css-prop,--background
 ion-tab-button,css-prop,--background-focused
 ion-tab-button,css-prop,--background-focused-opacity
@@ -1452,7 +1398,6 @@ ion-textarea,prop,required,boolean,false,false,false
 ion-textarea,prop,rows,number | undefined,undefined,false,false
 ion-textarea,prop,shape,"round" | undefined,undefined,false,false
 ion-textarea,prop,spellcheck,boolean,false,false,false
-ion-textarea,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-textarea,prop,value,null | string | undefined,'',false,false
 ion-textarea,prop,wrap,"hard" | "off" | "soft" | undefined,undefined,false,false
 ion-textarea,method,getInputElement,getInputElement() => Promise<HTMLTextAreaElement>
@@ -1486,7 +1431,6 @@ ion-thumbnail,css-prop,--size
 ion-title,shadow
 ion-title,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
 ion-title,prop,size,"large" | "small" | undefined,undefined,false,false
-ion-title,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-title,css-prop,--color

 ion-toast,shadow
@@ -1508,7 +1452,6 @@ ion-toast,prop,mode,"ios" | "md",undefined,false,false
 ion-toast,prop,position,"bottom" | "middle" | "top",'bottom',false,false
 ion-toast,prop,positionAnchor,HTMLElement | string | undefined,undefined,false,false
 ion-toast,prop,swipeGesture,"vertical" | undefined,undefined,false,false
-ion-toast,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-toast,prop,translucent,boolean,false,false,false
 ion-toast,prop,trigger,string | undefined,undefined,false,false
 ion-toast,method,dismiss,dismiss(data?: any, role?: string) => Promise<boolean>
@@ -1558,7 +1501,6 @@ ion-toggle,prop,labelPlacement,"end" | "fixed" | "stacked" | "start",'start',fal
 ion-toggle,prop,legacy,boolean | undefined,undefined,false,false
 ion-toggle,prop,mode,"ios" | "md",undefined,false,false
 ion-toggle,prop,name,string,this.inputId,false,false
-ion-toggle,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-toggle,prop,value,null | string | undefined,'on',false,false
 ion-toggle,event,ionBlur,void,true
 ion-toggle,event,ionChange,ToggleChangeEventDetail<any>,true
@@ -1582,7 +1524,6 @@ ion-toggle,part,track
 ion-toolbar,shadow
 ion-toolbar,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
 ion-toolbar,prop,mode,"ios" | "md",undefined,false,false
-ion-toolbar,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-toolbar,css-prop,--background
 ion-toolbar,css-prop,--border-color
 ion-toolbar,css-prop,--border-style
--- a/core/package-lock.json
+++ b/core/package-lock.json
@@ -1,30 +1,30 @@
 {
  "name": "@ionic/core",
-  "version": "7.7.2",
+  "version": "7.6.6",
  "lockfileVersion": 2,
  "requires": true,
  "packages": {
    "": {
      "name": "@ionic/core",
-      "version": "7.7.2",
+      "version": "7.6.6",
      "license": "MIT",
      "dependencies": {
-        "@stencil/core": "^4.12.2",
+        "@stencil/core": "^4.12.0",
        "ionicons": "^7.2.2",
        "tslib": "^2.1.0"
      },
      "devDependencies": {
-        "@axe-core/playwright": "^4.8.5",
-        "@capacitor/core": "^5.7.0",
-        "@capacitor/haptics": "^5.0.7",
+        "@axe-core/playwright": "^4.8.4",
+        "@capacitor/core": "^5.6.0",
+        "@capacitor/haptics": "^5.0.6",
        "@capacitor/keyboard": "^5.0.8",
-        "@capacitor/status-bar": "^5.0.7",
+        "@capacitor/status-bar": "^5.0.6",
        "@ionic/eslint-config": "^0.3.0",
        "@ionic/prettier-config": "^2.0.0",
        "@playwright/test": "^1.39.0",
        "@rollup/plugin-node-resolve": "^8.4.0",
        "@rollup/plugin-virtual": "^2.0.3",
-        "@stencil/angular-output-target": "^0.8.4",
+        "@stencil/angular-output-target": "^0.8.3",
        "@stencil/react-output-target": "^0.5.3",
        "@stencil/sass": "^3.0.9",
        "@stencil/vue-output-target": "^0.8.7",
@@ -56,12 +56,12 @@
      "dev": true
    },
    "node_modules/@axe-core/playwright": {
-      "version": "4.8.5",
-      "resolved": "https://registry.npmjs.org/@axe-core/playwright/-/playwright-4.8.5.tgz",
-      "integrity": "sha512-GFdXXAEn9uk0Vyzgl2eEP+VwvgGzas0YSnacoJ/0U237G83zWZ1PhbP/RDymm0cqevoA+xRjMo+ONzh9Q711nw==",
+      "version": "4.8.4",
+      "resolved": "https://registry.npmjs.org/@axe-core/playwright/-/playwright-4.8.4.tgz",
+      "integrity": "sha512-xpwd+T0BODt19hnXW0eX9xf+H/Ns1rdWwZNmuCV9UoTqjZ9mGm1F80pvh/A1r317ooltq8nwqcoVO9jbHWKSdA==",
      "dev": true,
      "dependencies": {
-        "axe-core": "~4.8.4"
+        "axe-core": "~4.8.3"
      },
      "peerDependencies": {
        "playwright-core": ">= 1.0.0"
@@ -634,18 +634,18 @@
      "dev": true
    },
    "node_modules/@capacitor/core": {
-      "version": "5.7.0",
-      "resolved": "https://registry.npmjs.org/@capacitor/core/-/core-5.7.0.tgz",
-      "integrity": "sha512-wa9Fao+Axa1t2ZERMyQD9r0xyfglQyC4DHQKintzKaIqcRuVe9J31TmfD3IxROYi9LGpY4X8cq4m4bjb0W94Qg==",
+      "version": "5.6.0",
+      "resolved": "https://registry.npmjs.org/@capacitor/core/-/core-5.6.0.tgz",
+      "integrity": "sha512-xJhCOUGPHw0QYDA3YH+CmL6qiV9DH4Ij3yPxSenymjrtLuXI197u9ddCZwGEwgVIkh9kGZBBKzsNkn89SZ2gdQ==",
      "dev": true,
      "dependencies": {
        "tslib": "^2.1.0"
      }
    },
    "node_modules/@capacitor/haptics": {
-      "version": "5.0.7",
-      "resolved": "https://registry.npmjs.org/@capacitor/haptics/-/haptics-5.0.7.tgz",
-      "integrity": "sha512-/j+7Qa4BxQA5aOU43cwXuiudfSXfoHFsAVfcehH5DkSjxLykZKWHEuE4uFJXqdkSIbAHjS37D0Sde6ENP6G/MA==",
+      "version": "5.0.6",
+      "resolved": "https://registry.npmjs.org/@capacitor/haptics/-/haptics-5.0.6.tgz",
+      "integrity": "sha512-UrMcR7p2X10ql4VLlowUuH/VckTeu0lj+RQpekxox14uxDmu5AGIFDK/iDTi8W6QZkxTJRZK6sbCjgwYgNJ7Pw==",
      "dev": true,
      "peerDependencies": {
        "@capacitor/core": "^5.0.0"
@@ -661,9 +661,9 @@
      }
    },
    "node_modules/@capacitor/status-bar": {
-      "version": "5.0.7",
-      "resolved": "https://registry.npmjs.org/@capacitor/status-bar/-/status-bar-5.0.7.tgz",
-      "integrity": "sha512-KblB3gV2LDMEjx3fQoNBAzxb+Tr+2mv68SfFLLDCMiMUD3Eile2TAWRWd1yxy496pDFTOs2BJtup8++iuuuJ/w==",
+      "version": "5.0.6",
+      "resolved": "https://registry.npmjs.org/@capacitor/status-bar/-/status-bar-5.0.6.tgz",
+      "integrity": "sha512-7od8CxsBnot1XMK3IeOkproFL4hgoKoWAc3pwUvmDOkQsXoxwQm4SR9mLwQavv1XfxtHbFV9Ukd7FwMxOPSViw==",
      "dev": true,
      "peerDependencies": {
        "@capacitor/core": "^5.0.0"
@@ -1816,18 +1816,18 @@
      }
    },
    "node_modules/@stencil/angular-output-target": {
-      "version": "0.8.4",
-      "resolved": "https://registry.npmjs.org/@stencil/angular-output-target/-/angular-output-target-0.8.4.tgz",
-      "integrity": "sha512-QvmHTueXXs5vB9W2L12uEzFmAuR8sqATJV2b+SCFmYsjJSaymiSqR3dKo2wnr0tZiTgU1t16BWaUKiSh3wPXpw==",
+      "version": "0.8.3",
+      "resolved": "https://registry.npmjs.org/@stencil/angular-output-target/-/angular-output-target-0.8.3.tgz",
+      "integrity": "sha512-I/QO1sEx09WWUaNlA30EBhlXYftOSfSBTwYBwC65qlpHDIlD5WU3EAtKhU5IphfwhxnD63kvOoU1YvTUXFHNng==",
      "dev": true,
      "peerDependencies": {
        "@stencil/core": ">=2.0.0 || >=3 || >= 4.0.0-beta.0 || >= 4.0.0"
      }
    },
    "node_modules/@stencil/core": {
-      "version": "4.12.2",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.12.2.tgz",
-      "integrity": "sha512-WEMpoqwMV4hY/ab2z9NxRhSeZwuKEugjyn6Vd+qA9xqZh6VNUL27QbP8vCa7IeqD4Zql4JBtKu3lVuBHutWE6w==",
+      "version": "4.12.0",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.12.0.tgz",
+      "integrity": "sha512-qAQcfNmp2sdxAh1DlyUhHfDmIUS7mhI+5LAhPphg74zK9sKgFL5vpLzgjs0wohpjlmI4msgJFYiRB8lxVPqjPg==",
      "bin": {
        "stencil": "bin/stencil"
      },
@@ -2799,9 +2799,9 @@
      }
    },
    "node_modules/axe-core": {
-      "version": "4.8.4",
-      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.8.4.tgz",
-      "integrity": "sha512-CZLSKisu/bhJ2awW4kJndluz2HLZYIHh5Uy1+ZwDRkJi69811xgIXXfdU9HSLX0Th+ILrHj8qfL/5wzamsFtQg==",
+      "version": "4.8.3",
+      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.8.3.tgz",
+      "integrity": "sha512-d5ZQHPSPkF9Tw+yfyDcRoUOc4g/8UloJJe5J8m4L5+c7AtDdjDLRxew/knnI4CxvtdxEUVgWz4x3OIQUIFiMfw==",
      "dev": true,
      "engines": {
        "node": ">=4"
@@ -10899,12 +10899,12 @@
  },
  "dependencies": {
    "@axe-core/playwright": {
-      "version": "4.8.5",
-      "resolved": "https://registry.npmjs.org/@axe-core/playwright/-/playwright-4.8.5.tgz",
-      "integrity": "sha512-GFdXXAEn9uk0Vyzgl2eEP+VwvgGzas0YSnacoJ/0U237G83zWZ1PhbP/RDymm0cqevoA+xRjMo+ONzh9Q711nw==",
+      "version": "4.8.4",
+      "resolved": "https://registry.npmjs.org/@axe-core/playwright/-/playwright-4.8.4.tgz",
+      "integrity": "sha512-xpwd+T0BODt19hnXW0eX9xf+H/Ns1rdWwZNmuCV9UoTqjZ9mGm1F80pvh/A1r317ooltq8nwqcoVO9jbHWKSdA==",
      "dev": true,
      "requires": {
-        "axe-core": "~4.8.4"
+        "axe-core": "~4.8.3"
      }
    },
    "@babel/code-frame": {
@@ -11324,18 +11324,18 @@
      "dev": true
    },
    "@capacitor/core": {
-      "version": "5.7.0",
-      "resolved": "https://registry.npmjs.org/@capacitor/core/-/core-5.7.0.tgz",
-      "integrity": "sha512-wa9Fao+Axa1t2ZERMyQD9r0xyfglQyC4DHQKintzKaIqcRuVe9J31TmfD3IxROYi9LGpY4X8cq4m4bjb0W94Qg==",
+      "version": "5.6.0",
+      "resolved": "https://registry.npmjs.org/@capacitor/core/-/core-5.6.0.tgz",
+      "integrity": "sha512-xJhCOUGPHw0QYDA3YH+CmL6qiV9DH4Ij3yPxSenymjrtLuXI197u9ddCZwGEwgVIkh9kGZBBKzsNkn89SZ2gdQ==",
      "dev": true,
      "requires": {
        "tslib": "^2.1.0"
      }
    },
    "@capacitor/haptics": {
-      "version": "5.0.7",
-      "resolved": "https://registry.npmjs.org/@capacitor/haptics/-/haptics-5.0.7.tgz",
-      "integrity": "sha512-/j+7Qa4BxQA5aOU43cwXuiudfSXfoHFsAVfcehH5DkSjxLykZKWHEuE4uFJXqdkSIbAHjS37D0Sde6ENP6G/MA==",
+      "version": "5.0.6",
+      "resolved": "https://registry.npmjs.org/@capacitor/haptics/-/haptics-5.0.6.tgz",
+      "integrity": "sha512-UrMcR7p2X10ql4VLlowUuH/VckTeu0lj+RQpekxox14uxDmu5AGIFDK/iDTi8W6QZkxTJRZK6sbCjgwYgNJ7Pw==",
      "dev": true,
      "requires": {}
    },
@@ -11347,9 +11347,9 @@
      "requires": {}
    },
    "@capacitor/status-bar": {
-      "version": "5.0.7",
-      "resolved": "https://registry.npmjs.org/@capacitor/status-bar/-/status-bar-5.0.7.tgz",
-      "integrity": "sha512-KblB3gV2LDMEjx3fQoNBAzxb+Tr+2mv68SfFLLDCMiMUD3Eile2TAWRWd1yxy496pDFTOs2BJtup8++iuuuJ/w==",
+      "version": "5.0.6",
+      "resolved": "https://registry.npmjs.org/@capacitor/status-bar/-/status-bar-5.0.6.tgz",
+      "integrity": "sha512-7od8CxsBnot1XMK3IeOkproFL4hgoKoWAc3pwUvmDOkQsXoxwQm4SR9mLwQavv1XfxtHbFV9Ukd7FwMxOPSViw==",
      "dev": true,
      "requires": {}
    },
@@ -12177,16 +12177,16 @@
      }
    },
    "@stencil/angular-output-target": {
-      "version": "0.8.4",
-      "resolved": "https://registry.npmjs.org/@stencil/angular-output-target/-/angular-output-target-0.8.4.tgz",
-      "integrity": "sha512-QvmHTueXXs5vB9W2L12uEzFmAuR8sqATJV2b+SCFmYsjJSaymiSqR3dKo2wnr0tZiTgU1t16BWaUKiSh3wPXpw==",
+      "version": "0.8.3",
+      "resolved": "https://registry.npmjs.org/@stencil/angular-output-target/-/angular-output-target-0.8.3.tgz",
+      "integrity": "sha512-I/QO1sEx09WWUaNlA30EBhlXYftOSfSBTwYBwC65qlpHDIlD5WU3EAtKhU5IphfwhxnD63kvOoU1YvTUXFHNng==",
      "dev": true,
      "requires": {}
    },
    "@stencil/core": {
-      "version": "4.12.2",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.12.2.tgz",
-      "integrity": "sha512-WEMpoqwMV4hY/ab2z9NxRhSeZwuKEugjyn6Vd+qA9xqZh6VNUL27QbP8vCa7IeqD4Zql4JBtKu3lVuBHutWE6w=="
+      "version": "4.12.0",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.12.0.tgz",
+      "integrity": "sha512-qAQcfNmp2sdxAh1DlyUhHfDmIUS7mhI+5LAhPphg74zK9sKgFL5vpLzgjs0wohpjlmI4msgJFYiRB8lxVPqjPg=="
    },
    "@stencil/react-output-target": {
      "version": "0.5.3",
@@ -12863,9 +12863,9 @@
      }
    },
    "axe-core": {
-      "version": "4.8.4",
-      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.8.4.tgz",
-      "integrity": "sha512-CZLSKisu/bhJ2awW4kJndluz2HLZYIHh5Uy1+ZwDRkJi69811xgIXXfdU9HSLX0Th+ILrHj8qfL/5wzamsFtQg==",
+      "version": "4.8.3",
+      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.8.3.tgz",
+      "integrity": "sha512-d5ZQHPSPkF9Tw+yfyDcRoUOc4g/8UloJJe5J8m4L5+c7AtDdjDLRxew/knnI4CxvtdxEUVgWz4x3OIQUIFiMfw==",
      "dev": true
    },
    "b4a": {
--- a/core/package.json
+++ b/core/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@ionic/core",
-  "version": "7.7.2",
+  "version": "7.6.6",
  "description": "Base components for Ionic",
  "keywords": [
    "ionic",
@@ -31,22 +31,22 @@
    "loader/"
  ],
  "dependencies": {
-    "@stencil/core": "^4.12.2",
+    "@stencil/core": "^4.12.0",
    "ionicons": "^7.2.2",
    "tslib": "^2.1.0"
  },
  "devDependencies": {
-    "@axe-core/playwright": "^4.8.5",
-    "@capacitor/core": "^5.7.0",
-    "@capacitor/haptics": "^5.0.7",
+    "@axe-core/playwright": "^4.8.4",
+    "@capacitor/core": "^5.6.0",
+    "@capacitor/haptics": "^5.0.6",
    "@capacitor/keyboard": "^5.0.8",
-    "@capacitor/status-bar": "^5.0.7",
+    "@capacitor/status-bar": "^5.0.6",
    "@ionic/eslint-config": "^0.3.0",
    "@ionic/prettier-config": "^2.0.0",
    "@playwright/test": "^1.39.0",
    "@rollup/plugin-node-resolve": "^8.4.0",
    "@rollup/plugin-virtual": "^2.0.3",
-    "@stencil/angular-output-target": "^0.8.4",
+    "@stencil/angular-output-target": "^0.8.3",
    "@stencil/react-output-target": "^0.5.3",
    "@stencil/sass": "^3.0.9",
    "@stencil/vue-output-target": "^0.8.7",
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
--- a/core/src/components/accordion-group/accordion-group.tsx
+++ b/core/src/components/accordion-group/accordion-group.tsx
@@ -2,20 +2,18 @@ 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 { getIonTheme } from '../../global/ionic-global';
+import { getIonMode } from '../../global/ionic-global';

 import type { AccordionGroupChangeEventDetail } from './accordion-group-interface';

 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of components.
- * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the appearance of components.
+ * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
 */
@Component({
  tag: 'ion-accordion-group',
  styleUrls: {
    ios: 'accordion-group.ios.scss',
    md: 'accordion-group.md.scss',
-    ionic: 'accordion-group.md.scss',
  },
  shadow: true,
 })
@@ -281,12 +279,12 @@ export class AccordionGroup implements ComponentInterface {

  render() {
    const { disabled, readonly, expand } = this;
-    const theme = getIonTheme(this);
+    const mode = getIonMode(this);

    return (
      <Host
        class={{
-          [theme]: true,
+          [mode]: true,
          'accordion-group-disabled': disabled,
          'accordion-group-readonly': readonly,
          [`accordion-group-expand-${expand}`]: true,
--- a/core/src/components/accordion/accordion.tsx
+++ b/core/src/components/accordion/accordion.tsx
@@ -4,7 +4,7 @@ import { addEventListener, getElementRoot, raf, removeEventListener, transitionE
 import { chevronDown } from 'ionicons/icons';

 import { config } from '../../global/config';
-import { getIonTheme } from '../../global/ionic-global';
+import { getIonMode } from '../../global/ionic-global';

 const enum AccordionState {
  Collapsed = 1 << 0,
@@ -14,8 +14,7 @@ const enum AccordionState {
 }

 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of components.
- * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the appearance of components.
+ * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
 *
 * @slot header - Content is placed at the top and is used to
 * expand or collapse the accordion item.
@@ -32,7 +31,6 @@ const enum AccordionState {
  styleUrls: {
    ios: 'accordion.ios.scss',
    md: 'accordion.md.scss',
-    ionic: 'accordion.md.scss',
  },
  shadow: {
    delegatesFocus: true,
@@ -404,7 +402,7 @@ export class Accordion implements ComponentInterface {

  render() {
    const { disabled, readonly } = this;
-    const theme = getIonTheme(this);
+    const mode = getIonMode(this);
    const expanded = this.state === AccordionState.Expanded || this.state === AccordionState.Expanding;
    const headerPart = expanded ? 'header expanded' : 'header';
    const contentPart = expanded ? 'content expanded' : 'content';
@@ -414,7 +412,7 @@ export class Accordion implements ComponentInterface {
    return (
      <Host
        class={{
-          [theme]: true,
+          [mode]: true,
          'accordion-expanding': this.state === AccordionState.Expanding,
          'accordion-expanded': this.state === AccordionState.Expanded,
          'accordion-collapsing': this.state === AccordionState.Collapsing,
--- a/core/src/components/accordion/test/a11y/index.html
+++ b/core/src/components/accordion/test/a11y/index.html
@@ -23,22 +23,28 @@

            <ion-list slot="content">
              <ion-item>
-                <ion-input label="Name" type="text"></ion-input>
+                <ion-label>Name</ion-label>
+                <ion-input type="text"></ion-input>
              </ion-item>
              <ion-item>
-                <ion-input label="Email" type="email"></ion-input>
+                <ion-label>Email</ion-label>
+                <ion-input type="email"></ion-input>
              </ion-item>
              <ion-item>
-                <ion-input label="Phone" type="tel"></ion-input>
+                <ion-label>Phone</ion-label>
+                <ion-input type="tel"></ion-input>
              </ion-item>
              <ion-item>
-                <ion-input label="Extension" type="text"></ion-input>
+                <ion-label>Extension</ion-label>
+                <ion-input type="text"></ion-input>
              </ion-item>
              <ion-item>
-                <ion-input label="Country" type="text"></ion-input>
+                <ion-label>Country</ion-label>
+                <ion-input type="text"></ion-input>
              </ion-item>
              <ion-item>
-                <ion-input label="City/Province" type="text"></ion-input>
+                <ion-label>City/Province</ion-label>
+                <ion-input type="text"></ion-input>
              </ion-item>
            </ion-list>
          </ion-accordion>
@@ -50,19 +56,24 @@

            <ion-list slot="content">
              <ion-item>
-                <ion-input label="Address 1" type="text"></ion-input>
+                <ion-label>Address 1</ion-label>
+                <ion-input type="text"></ion-input>
              </ion-item>
              <ion-item>
-                <ion-input label="Address 2" type="email"></ion-input>
+                <ion-label>Address 2</ion-label>
+                <ion-input type="email"></ion-input>
              </ion-item>
              <ion-item>
-                <ion-input label="City" type="tel"></ion-input>
+                <ion-label>City</ion-label>
+                <ion-input type="tel"></ion-input>
              </ion-item>
              <ion-item>
-                <ion-input label="State" type="text"></ion-input>
+                <ion-label>State</ion-label>
+                <ion-input type="text"></ion-input>
              </ion-item>
              <ion-item>
-                <ion-input label="Zip Code" type="text"></ion-input>
+                <ion-label>Zip Code</ion-label>
+                <ion-input type="text"></ion-input>
              </ion-item>
            </ion-list>
          </ion-accordion>
@@ -74,19 +85,24 @@

            <ion-list slot="content">
              <ion-item>
-                <ion-input label="Address 1" id="address1" type="text"></ion-input>
+                <ion-label>Address 1</ion-label>
+                <ion-input id="address1" type="text"></ion-input>
              </ion-item>
              <ion-item>
-                <ion-input label="Address 2" type="email"></ion-input>
+                <ion-label>Address 2</ion-label>
+                <ion-input type="email"></ion-input>
              </ion-item>
              <ion-item>
-                <ion-input label="City" type="tel"></ion-input>
+                <ion-label>City</ion-label>
+                <ion-input type="tel"></ion-input>
              </ion-item>
              <ion-item>
-                <ion-input lable="State" type="text"></ion-input>
+                <ion-label>State</ion-label>
+                <ion-input type="text"></ion-input>
              </ion-item>
              <ion-item>
-                <ion-input label="Zip Code" type="text"></ion-input>
+                <ion-label>Zip Code</ion-label>
+                <ion-input type="text"></ion-input>
              </ion-item>
            </ion-list>
          </ion-accordion>
--- a/core/src/components/action-sheet/action-sheet-interface.ts
+++ b/core/src/components/action-sheet/action-sheet-interface.ts
@@ -1,4 +1,4 @@
-import type { AnimationBuilder, LiteralUnion, Mode, Theme } from '../../interface';
+import type { AnimationBuilder, LiteralUnion, Mode } from '../../interface';

 export interface ActionSheetOptions {
  header?: string;
@@ -8,11 +8,7 @@ export interface ActionSheetOptions {
  backdropDismiss?: boolean;
  translucent?: boolean;
  animated?: boolean;
-  /**
-   * @deprecated
-   */
  mode?: Mode;
-  theme?: Theme;
  keyboardClose?: boolean;
  id?: string;
  htmlAttributes?: { [key: string]: any };
--- a/core/src/components/action-sheet/action-sheet.ios.scss
+++ b/core/src/components/action-sheet/action-sheet.ios.scss
@@ -26,24 +26,7 @@
 // ---------------------------------------------------

 .action-sheet-wrapper {
-  @include margin(var(--ion-safe-area-top, 0), auto, null, auto);
-  /**
-   * Bottom safe area is applied as padding so that it impacts the bounding box.
-   * When the action sheet is shown/hidden, this element is transformed by translating
-   * 100% of its height. This translation needs to include the bottom safe area
-   * otherwise part of the action sheet will still be visible at the end of
-   * the show transition.
-   *
-   * If this code is changed, reviewers should verify that the action
-   * sheet still translates out of the viewport completely when the bottom
-   * safe area is a positive value.
-   */
-  @include padding(null, null, var(--ion-safe-area-bottom, 0), null);
-
-  // Using content-box to increase the height of the action sheet
-  // wrapper by the bottom padding (safe area) to animate the
-  // action sheet completely off the screen when safe area is set.
-  box-sizing: content-box;
+  @include margin(var(--ion-safe-area-top, 0), auto, var(--ion-safe-area-bottom, 0), auto);
 }

 // iOS Action Sheet Container
--- a/core/src/components/action-sheet/action-sheet.tsx
+++ b/core/src/components/action-sheet/action-sheet.tsx
@@ -18,7 +18,7 @@ import {
 } from '@utils/overlays';
 import { getClassMap } from '@utils/theme';

-import { getIonMode, getIonTheme } from '../../global/ionic-global';
+import { getIonMode } from '../../global/ionic-global';
 import type { AnimationBuilder, CssClassMap, FrameworkDelegate, OverlayInterface } from '../../interface';
 import type { OverlayEventDetail } from '../../utils/overlays-interface';

@@ -29,15 +29,13 @@ import { mdEnterAnimation } from './animations/md.enter';
 import { mdLeaveAnimation } from './animations/md.leave';

 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of components.
- * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the appearance of components.
+ * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
 */
@Component({
  tag: 'ion-action-sheet',
  styleUrls: {
    ios: 'action-sheet.ios.scss',
    md: 'action-sheet.md.scss',
-    ionic: 'action-sheet.md.scss',
  },
  scoped: true,
 })
@@ -218,10 +216,6 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
   * This can be useful in a button handler for determining which button was
   * clicked to dismiss the action sheet.
   * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
-   *
-   * This is a no-op if the overlay has not been presented yet. If you want
-   * to remove an overlay from the DOM that was never presented, use the
-   * [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
   */
  @Method()
  async dismiss(data?: any, role?: string): Promise<boolean> {
@@ -316,16 +310,15 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
  }

  componentDidLoad() {
-    const mode = getIonMode(this);
    /**
     * Only create gesture if:
     * 1. A gesture does not already exist
-     * 2. App is running on iOS platform
+     * 2. App is running in iOS mode
     * 3. A wrapper ref exists
     * 4. A group ref exists
     */
    const { groupEl, wrapperEl } = this;
-    if (!this.gesture && mode === 'ios' && wrapperEl && groupEl) {
+    if (!this.gesture && getIonMode(this) === 'ios' && wrapperEl && groupEl) {
      readTask(() => {
        const isScrollable = groupEl.scrollHeight > groupEl.clientHeight;
        if (!isScrollable) {
@@ -359,7 +352,7 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {

  render() {
    const { header, htmlAttributes, overlayIndex } = this;
-    const theme = getIonTheme(this);
+    const mode = getIonMode(this);
    const allButtons = this.getButtons();
    const cancelButton = allButtons.find((b) => b.role === 'cancel');
    const buttons = allButtons.filter((b) => b.role !== 'cancel');
@@ -376,7 +369,7 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
          zIndex: `${20000 + this.overlayIndex}`,
        }}
        class={{
-          [theme]: true,
+          [mode]: true,
          ...getClassMap(this.cssClass),
          'overlay-hidden': true,
          'action-sheet-translucent': this.translucent,
@@ -415,7 +408,7 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
                    {b.icon && <ion-icon icon={b.icon} aria-hidden="true" lazy={false} class="action-sheet-icon" />}
                    {b.text}
                  </span>
-                  {theme === 'md' && <ion-ripple-effect></ion-ripple-effect>}
+                  {mode === 'md' && <ion-ripple-effect></ion-ripple-effect>}
                </button>
              ))}
            </div>
@@ -434,7 +427,7 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
                    )}
                    {cancelButton.text}
                  </span>
-                  {theme === 'md' && <ion-ripple-effect></ion-ripple-effect>}
+                  {mode === 'md' && <ion-ripple-effect></ion-ripple-effect>}
                </button>
              </div>
            )}
--- a/core/src/components/alert/alert-interface.ts
+++ b/core/src/components/alert/alert-interface.ts
@@ -1,4 +1,4 @@
-import type { AnimationBuilder, LiteralUnion, Mode, TextFieldTypes, Theme } from '../../interface';
+import type { AnimationBuilder, LiteralUnion, Mode, TextFieldTypes } from '../../interface';
 import type { IonicSafeString } from '../../utils/sanitization';

 export interface AlertOptions {
@@ -13,12 +13,7 @@ export interface AlertOptions {
  animated?: boolean;
  htmlAttributes?: { [key: string]: any };

-  /**
-   * @deprecated
-   */
  mode?: Mode;
-  theme?: Theme;
-
  keyboardClose?: boolean;
  id?: string;

--- a/core/src/components/alert/alert.tsx
+++ b/core/src/components/alert/alert.tsx
@@ -21,7 +21,7 @@ import { sanitizeDOMString } from '@utils/sanitization';
 import { getClassMap } from '@utils/theme';

 import { config } from '../../global/config';
-import { getIonMode, getIonTheme } from '../../global/ionic-global';
+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';
@@ -35,15 +35,13 @@ import { mdLeaveAnimation } from './animations/md.leave';
 // TODO(FW-2832): types

 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of components.
- * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the appearance of components.
+ * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
 */
@Component({
  tag: 'ion-alert',
  styleUrls: {
    ios: 'alert.ios.scss',
    md: 'alert.md.scss',
-    ionic: 'alert.md.scss',
  },
  scoped: true,
 })
@@ -413,10 +411,6 @@ export class Alert implements ComponentInterface, OverlayInterface {
   * This can be useful in a button handler for determining which button was
   * clicked to dismiss the alert.
   * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
-   *
-   * This is a no-op if the overlay has not been presented yet. If you want
-   * to remove an overlay from the DOM that was never presented, use the
-   * [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
   */
  @Method()
  async dismiss(data?: any, role?: string): Promise<boolean> {
@@ -535,7 +529,7 @@ export class Alert implements ComponentInterface, OverlayInterface {

  private renderCheckbox() {
    const inputs = this.processedInputs;
-    const theme = getIonTheme(this);
+    const mode = getIonMode(this);

    if (inputs.length === 0) {
      return null;
@@ -567,7 +561,7 @@ export class Alert implements ComponentInterface, OverlayInterface {
              </div>
              <div class="alert-checkbox-label">{i.label}</div>
            </div>
-            {theme === 'md' && <ion-ripple-effect></ion-ripple-effect>}
+            {mode === 'md' && <ion-ripple-effect></ion-ripple-effect>}
          </button>
        ))}
      </div>
@@ -684,7 +678,7 @@ export class Alert implements ComponentInterface, OverlayInterface {

  private renderAlertButtons() {
    const buttons = this.processedButtons;
-    const theme = getIonTheme(this);
+    const mode = getIonMode(this);
    const alertButtonGroupClass = {
      'alert-button-group': true,
      'alert-button-group-vertical': buttons.length > 2,
@@ -701,7 +695,7 @@ export class Alert implements ComponentInterface, OverlayInterface {
            onClick={() => this.buttonClick(button)}
          >
            <span class="alert-button-inner">{button.text}</span>
-            {theme === 'md' && <ion-ripple-effect></ion-ripple-effect>}
+            {mode === 'md' && <ion-ripple-effect></ion-ripple-effect>}
          </button>
        ))}
      </div>
@@ -723,7 +717,7 @@ export class Alert implements ComponentInterface, OverlayInterface {

  render() {
    const { overlayIndex, header, subHeader, message, htmlAttributes } = this;
-    const theme = getIonTheme(this);
+    const mode = getIonMode(this);
    const hdrId = `alert-${overlayIndex}-hdr`;
    const subHdrId = `alert-${overlayIndex}-sub-hdr`;
    const msgId = `alert-${overlayIndex}-msg`;
@@ -748,7 +742,7 @@ export class Alert implements ComponentInterface, OverlayInterface {
        }}
        class={{
          ...getClassMap(this.cssClass),
-          [theme]: true,
+          [mode]: true,
          'overlay-hidden': true,
          'alert-translucent': this.translucent,
        }}
--- a/core/src/components/app/app.tsx
+++ b/core/src/components/app/app.tsx
@@ -1,12 +1,10 @@
 import type { ComponentInterface } from '@stencil/core';
 import { Build, Component, Element, Host, Method, h } from '@stencil/core';
 import type { FocusVisibleUtility } from '@utils/focus-visible';
-import { shoudUseCloseWatcher } from '@utils/hardware-back-button';
-import { printIonWarning } from '@utils/logging';
 import { isPlatform } from '@utils/platform';

 import { config } from '../../global/config';
-import { getIonTheme } from '../../global/ionic-global';
+import { getIonMode } from '../../global/ionic-global';

@Component({
  tag: 'ion-app',
@@ -36,20 +34,9 @@ export class App implements ComponentInterface {
          import('../../utils/input-shims/input-shims').then((module) => module.startInputShims(config, platform));
        }
        const hardwareBackButtonModule = await import('../../utils/hardware-back-button');
-        const supportsHardwareBackButtonEvents = isHybrid || shoudUseCloseWatcher();
-        if (config.getBoolean('hardwareBackButton', supportsHardwareBackButtonEvents)) {
+        if (config.getBoolean('hardwareBackButton', isHybrid)) {
          hardwareBackButtonModule.startHardwareBackButton();
        } else {
-          /**
-           * If an app sets hardwareBackButton: false and experimentalCloseWatcher: true
-           * then the close watcher will not be used.
-           */
-          if (shoudUseCloseWatcher()) {
-            printIonWarning(
-              'experimentalCloseWatcher was set to `true`, but hardwareBackButton was set to `false`. Both config options must be `true` for the Close Watcher API to be used.'
-            );
-          }
-
          hardwareBackButtonModule.blockHardwareBackButton();
        }
        if (typeof (window as any) !== 'undefined') {
@@ -78,11 +65,11 @@ export class App implements ComponentInterface {
  }

  render() {
-    const theme = getIonTheme(this);
+    const mode = getIonMode(this);
    return (
      <Host
        class={{
-          [theme]: true,
+          [mode]: true,
          'ion-page': true,
          'force-statusbar-padding': config.getBoolean('_forceStatusbarPadding'),
        }}
--- a/core/src/components/avatar/avatar.tsx
+++ b/core/src/components/avatar/avatar.tsx
@@ -1,29 +1,20 @@
 import type { ComponentInterface } from '@stencil/core';
 import { Component, Host, h } from '@stencil/core';

-import { getIonTheme } from '../../global/ionic-global';
+import { getIonMode } from '../../global/ionic-global';

-/**
- * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the appearance of components.
- */
@Component({
  tag: 'ion-avatar',
  styleUrls: {
    ios: 'avatar.ios.scss',
    md: 'avatar.md.scss',
-    ionic: 'avatar.md.scss',
  },
  shadow: true,
 })
 export class Avatar implements ComponentInterface {
  render() {
-    const theme = getIonTheme(this);
    return (
-      <Host
-        class={{
-          [theme]: true,
-        }}
-      >
+      <Host class={getIonMode(this)}>
        <slot></slot>
      </Host>
    );
--- a/core/src/components/back-button/back-button.tsx
+++ b/core/src/components/back-button/back-button.tsx
@@ -7,12 +7,11 @@ import { createColorClasses, hostContext, openURL } from '@utils/theme';
 import { arrowBackSharp, chevronBack } from 'ionicons/icons';

 import { config } from '../../global/config';
-import { getIonTheme } from '../../global/ionic-global';
+import { getIonMode } from '../../global/ionic-global';
 import type { AnimationBuilder, Color } from '../../interface';

 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of components.
- * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the appearance of components.
+ * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
 *
 * @part native - The native HTML button element that wraps all child elements.
 * @part icon - The back button icon (uses ion-icon).
@@ -23,7 +22,6 @@ import type { AnimationBuilder, Color } from '../../interface';
  styleUrls: {
    ios: 'back-button.ios.scss',
    md: 'back-button.md.scss',
-    ionic: 'back-button.md.scss',
  },
  shadow: true,
 })
@@ -86,7 +84,7 @@ export class BackButton implements ComponentInterface, ButtonInterface {
      return icon;
    }

-    if (getIonTheme(this) === 'ios') {
+    if (getIonMode(this) === 'ios') {
      // default ios back button icon
      return config.get('backButtonIcon', chevronBack);
    }
@@ -96,7 +94,7 @@ export class BackButton implements ComponentInterface, ButtonInterface {
  }

  get backButtonText() {
-    const defaultBackButtonText = getIonTheme(this) === 'ios' ? 'Back' : null;
+    const defaultBackButtonText = getIonMode(this) === 'ios' ? 'Back' : null;
    return this.text != null ? this.text : config.get('backButtonText', defaultBackButtonText);
  }

@@ -137,14 +135,14 @@ export class BackButton implements ComponentInterface, ButtonInterface {
      inheritedAttributes,
    } = this;
    const showBackButton = defaultHref !== undefined;
-    const theme = getIonTheme(this);
+    const mode = getIonMode(this);
    const ariaLabel = inheritedAttributes['aria-label'] || backButtonText || 'back';

    return (
      <Host
        onClick={this.onClick}
        class={createColorClasses(color, {
-          [theme]: true,
+          [mode]: true,
          button: true, // ion-buttons target .button
          'back-button-disabled': disabled,
          'back-button-has-icon-only': hasIconOnly,
@@ -172,7 +170,7 @@ export class BackButton implements ComponentInterface, ButtonInterface {
              </span>
            )}
          </span>
-          {theme === 'md' && <ion-ripple-effect type={this.rippleType}></ion-ripple-effect>}
+          {mode === 'md' && <ion-ripple-effect type={this.rippleType}></ion-ripple-effect>}
        </button>
      </Host>
    );
--- a/core/src/components/backdrop/backdrop.tsx
+++ b/core/src/components/backdrop/backdrop.tsx
@@ -2,17 +2,13 @@ import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Event, Host, Listen, Prop, h } from '@stencil/core';
 import { GESTURE_CONTROLLER } from '@utils/gesture';

-import { getIonTheme } from '../../global/ionic-global';
+import { getIonMode } from '../../global/ionic-global';

-/**
- * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the appearance of components.
- */
@Component({
  tag: 'ion-backdrop',
  styleUrls: {
    ios: 'backdrop.ios.scss',
    md: 'backdrop.md.scss',
-    ionic: 'backdrop.md.scss',
  },
  shadow: true,
 })
@@ -67,13 +63,13 @@ export class Backdrop implements ComponentInterface {
  }

  render() {
-    const theme = getIonTheme(this);
+    const mode = getIonMode(this);
    return (
      <Host
        tabindex="-1"
        aria-hidden="true"
        class={{
-          [theme]: true,
+          [mode]: true,
          'backdrop-hide': !this.visible,
          'backdrop-no-tappable': !this.tappable,
        }}
--- a/core/src/components/badge/badge.tsx
+++ b/core/src/components/badge/badge.tsx
@@ -2,19 +2,17 @@ import type { ComponentInterface } from '@stencil/core';
 import { Component, Host, Prop, h } from '@stencil/core';
 import { createColorClasses } from '@utils/theme';

-import { getIonTheme } from '../../global/ionic-global';
+import { getIonMode } from '../../global/ionic-global';
 import type { Color } from '../../interface';

 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of components.
- * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the appearance of components.
+ * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
 */
@Component({
  tag: 'ion-badge',
  styleUrls: {
    ios: 'badge.ios.scss',
    md: 'badge.md.scss',
-    ionic: 'badge.md.scss',
  },
  shadow: true,
 })
@@ -27,11 +25,11 @@ export class Badge implements ComponentInterface {
  @Prop({ reflect: true }) color?: Color;

  render() {
-    const theme = getIonTheme(this);
+    const mode = getIonMode(this);
    return (
      <Host
        class={createColorClasses(this.color, {
-          [theme]: true,
+          [mode]: true,
        })}
      >
        <slot></slot>
--- a/core/src/components/breadcrumb/breadcrumb.tsx
+++ b/core/src/components/breadcrumb/breadcrumb.tsx
@@ -5,15 +5,14 @@ import { inheritAriaAttributes } from '@utils/helpers';
 import { createColorClasses, hostContext, openURL } from '@utils/theme';
 import { chevronForwardOutline, ellipsisHorizontal } from 'ionicons/icons';

-import { getIonTheme } from '../../global/ionic-global';
+import { getIonMode } from '../../global/ionic-global';
 import type { AnimationBuilder, Color } from '../../interface';
 import type { RouterDirection } from '../router/utils/interface';

 import type { BreadcrumbCollapsedClickEventDetail } from './breadcrumb-interface';

 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of components.
- * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the appearance of components.
+ * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
 *
 * @part native - The native HTML anchor or div element that wraps all child elements.
 * @part separator - The separator element between each breadcrumb.
@@ -24,7 +23,6 @@ import type { BreadcrumbCollapsedClickEventDetail } from './breadcrumb-interface
  styleUrls: {
    ios: 'breadcrumb.ios.scss',
    md: 'breadcrumb.md.scss',
-    ionic: 'breadcrumb.md.scss',
  },
  shadow: true,
 })
@@ -170,7 +168,7 @@ export class Breadcrumb implements ComponentInterface {
    // Links can still be tabbed to when set to disabled if they have an href
    // in order to truly disable them we can keep it as an anchor but remove the href
    const href = disabled ? undefined : this.href;
-    const theme = getIonTheme(this);
+    const mode = getIonMode(this);
    const attrs =
      TagType === 'span'
        ? {}
@@ -190,7 +188,7 @@ export class Breadcrumb implements ComponentInterface {
        onClick={(ev: Event) => openURL(href, ev, routerDirection, routerAnimation)}
        aria-disabled={disabled ? 'true' : null}
        class={createColorClasses(color, {
-          [theme]: true,
+          [mode]: true,
          'breadcrumb-active': active,
          'breadcrumb-collapsed': collapsed,
          'breadcrumb-disabled': disabled,
@@ -235,7 +233,7 @@ export class Breadcrumb implements ComponentInterface {
           */
          <span class="breadcrumb-separator" part="separator" aria-hidden="true">
            <slot name="separator">
-              {theme === 'ios' ? (
+              {mode === 'ios' ? (
                <ion-icon icon={chevronForwardOutline} lazy={false} flip-rtl></ion-icon>
              ) : (
                <span>/</span>
--- a/core/src/components/breadcrumbs/breadcrumbs.tsx
+++ b/core/src/components/breadcrumbs/breadcrumbs.tsx
@@ -2,20 +2,19 @@ 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 { getIonTheme } from '../../global/ionic-global';
+import { getIonMode } from '../../global/ionic-global';
 import type { Color } from '../../interface';
 import type { BreadcrumbCollapsedClickEventDetail } from '../breadcrumb/breadcrumb-interface';

 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of components.
- * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the appearance of components.
+ * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ *
 */
@Component({
  tag: 'ion-breadcrumbs',
  styleUrls: {
    ios: 'breadcrumbs.ios.scss',
    md: 'breadcrumbs.md.scss',
-    ionic: 'breadcrumbs.md.scss',
  },
  shadow: true,
 })
@@ -171,12 +170,12 @@ export class Breadcrumbs implements ComponentInterface {

  render() {
    const { color, collapsed } = this;
-    const theme = getIonTheme(this);
+    const mode = getIonMode(this);

    return (
      <Host
        class={createColorClasses(color, {
-          [theme]: true,
+          [mode]: true,
          'in-toolbar': hostContext('ion-toolbar', this.el),
          'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
          'breadcrumbs-collapsed': collapsed,
--- a/core/src/components/button/button.ionic.scss
+++ b/core/src/components/button/button.ionic.scss
@@ -1 +0,0 @@
-@import "./button";
--- a/core/src/components/button/button.tsx
+++ b/core/src/components/button/button.tsx
@@ -6,13 +6,12 @@ import { inheritAriaAttributes, hasShadowDom } from '@utils/helpers';
 import { printIonWarning } from '@utils/logging';
 import { createColorClasses, hostContext, openURL } from '@utils/theme';

-import { getIonTheme } from '../../global/ionic-global';
+import { getIonMode } from '../../global/ionic-global';
 import type { AnimationBuilder, Color } from '../../interface';
 import type { RouterDirection } from '../router/utils/interface';

 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of components.
- * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the appearance of components.
+ * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
 *
 * @slot - Content is placed between the named slots if provided without a slot.
 * @slot icon-only - Should be used on an icon in a button that has no text.
@@ -26,7 +25,6 @@ import type { RouterDirection } from '../router/utils/interface';
  styleUrls: {
    ios: 'button.ios.scss',
    md: 'button.md.scss',
-    ionic: 'button.ionic.scss',
  },
  shadow: true,
 })
@@ -298,8 +296,7 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
  };

  render() {
-    const theme = getIonTheme(this);
-
+    const mode = getIonMode(this);
    const {
      buttonType,
      type,
@@ -315,7 +312,6 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
      strong,
      inheritedAttributes,
    } = this;
-
    const finalSize = size === undefined && this.inItem ? 'small' : size;
    const TagType = href === undefined ? 'button' : ('a' as any);
    const attrs =
@@ -352,7 +348,7 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
        onClick={this.handleClick}
        aria-disabled={disabled ? 'true' : null}
        class={createColorClasses(color, {
-          [theme]: true,
+          [mode]: true,
          [buttonType]: true,
          [`${buttonType}-${expand}`]: expand !== undefined,
          [`${buttonType}-${finalSize}`]: finalSize !== undefined,
@@ -383,7 +379,7 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
            <slot></slot>
            <slot name="end"></slot>
          </span>
-          {theme === 'md' && <ion-ripple-effect type={this.rippleType}></ion-ripple-effect>}
+          {mode === 'md' && <ion-ripple-effect type={this.rippleType}></ion-ripple-effect>}
        </TagType>
      </Host>
    );
--- a/core/src/components/buttons/buttons.tsx
+++ b/core/src/components/buttons/buttons.tsx
@@ -1,17 +1,13 @@
 import type { ComponentInterface } from '@stencil/core';
 import { Component, Host, Prop, h } from '@stencil/core';

-import { getIonTheme } from '../../global/ionic-global';
+import { getIonMode } from '../../global/ionic-global';

-/**
- * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the appearance of components.
- */
@Component({
  tag: 'ion-buttons',
  styleUrls: {
    ios: 'buttons.ios.scss',
    md: 'buttons.md.scss',
-    ionic: 'buttons.md.scss',
  },
  scoped: true,
 })
@@ -31,11 +27,11 @@ export class Buttons implements ComponentInterface {
  @Prop() collapse = false;

  render() {
-    const theme = getIonTheme(this);
+    const mode = getIonMode(this);
    return (
      <Host
        class={{
-          [theme]: true,
+          [mode]: true,
          ['buttons-collapse']: this.collapse,
        }}
      ></Host>
--- a/core/src/components/card-content/card-content.tsx
+++ b/core/src/components/card-content/card-content.tsx
@@ -1,30 +1,28 @@
 import type { ComponentInterface } from '@stencil/core';
 import { Component, Host, h } from '@stencil/core';

-import { getIonTheme } from '../../global/ionic-global';
+import { getIonMode } from '../../global/ionic-global';

 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of components.
- * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the appearance of components.
+ * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
 */
@Component({
  tag: 'ion-card-content',
  styleUrls: {
    ios: 'card-content.ios.scss',
    md: 'card-content.md.scss',
-    ionic: 'card-content.md.scss',
  },
 })
 export class CardContent implements ComponentInterface {
  render() {
-    const theme = getIonTheme(this);
+    const mode = getIonMode(this);
    return (
      <Host
        class={{
-          [theme]: true,
+          [mode]: true,

          // Used internally for styling
-          [`card-content-${theme}`]: true,
+          [`card-content-${mode}`]: true,
        }}
      ></Host>
    );
--- a/core/src/components/card-header/card-header.tsx
+++ b/core/src/components/card-header/card-header.tsx
@@ -2,19 +2,17 @@ import type { ComponentInterface } from '@stencil/core';
 import { Component, Host, Prop, h } from '@stencil/core';
 import { createColorClasses } from '@utils/theme';

-import { getIonTheme } from '../../global/ionic-global';
+import { getIonMode } from '../../global/ionic-global';
 import type { Color } from '../../interface';

 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of components.
- * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the appearance of components.
+ * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
 */
@Component({
  tag: 'ion-card-header',
  styleUrls: {
    ios: 'card-header.ios.scss',
    md: 'card-header.md.scss',
-    ionic: 'card-header.md.scss',
  },
  shadow: true,
 })
@@ -34,13 +32,13 @@ export class CardHeader implements ComponentInterface {
  @Prop() translucent = false;

  render() {
-    const theme = getIonTheme(this);
+    const mode = getIonMode(this);
    return (
      <Host
        class={createColorClasses(this.color, {
          'card-header-translucent': this.translucent,
          'ion-inherit-color': true,
-          [theme]: true,
+          [mode]: true,
        })}
      >
        <slot></slot>
--- a/core/src/components/card-subtitle/card-subtitle.tsx
+++ b/core/src/components/card-subtitle/card-subtitle.tsx
@@ -2,19 +2,17 @@ import type { ComponentInterface } from '@stencil/core';
 import { Component, Host, Prop, h } from '@stencil/core';
 import { createColorClasses } from '@utils/theme';

-import { getIonTheme } from '../../global/ionic-global';
+import { getIonMode } from '../../global/ionic-global';
 import type { Color } from '../../interface';

 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of components.
- * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the appearance of components.
+ * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
 */
@Component({
  tag: 'ion-card-subtitle',
  styleUrls: {
    ios: 'card-subtitle.ios.scss',
    md: 'card-subtitle.md.scss',
-    ionic: 'card-subtitle.md.scss',
  },
  shadow: true,
 })
@@ -27,14 +25,14 @@ export class CardSubtitle implements ComponentInterface {
  @Prop({ reflect: true }) color?: Color;

  render() {
-    const theme = getIonTheme(this);
+    const mode = getIonMode(this);
    return (
      <Host
        role="heading"
        aria-level="3"
        class={createColorClasses(this.color, {
          'ion-inherit-color': true,
-          [theme]: true,
+          [mode]: true,
        })}
      >
        <slot></slot>
--- a/core/src/components/card-title/card-title.tsx
+++ b/core/src/components/card-title/card-title.tsx
@@ -2,19 +2,17 @@ import type { ComponentInterface } from '@stencil/core';
 import { Component, Host, Prop, h } from '@stencil/core';
 import { createColorClasses } from '@utils/theme';

-import { getIonTheme } from '../../global/ionic-global';
+import { getIonMode } from '../../global/ionic-global';
 import type { Color } from '../../interface';

 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of components.
- * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the appearance of components.
+ * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
 */
@Component({
  tag: 'ion-card-title',
  styleUrls: {
    ios: 'card-title.ios.scss',
    md: 'card-title.md.scss',
-    ionic: 'card-title.md.scss',
  },
  shadow: true,
 })
@@ -27,14 +25,14 @@ export class CardTitle implements ComponentInterface {
  @Prop({ reflect: true }) color?: Color;

  render() {
-    const theme = getIonTheme(this);
+    const mode = getIonMode(this);
    return (
      <Host
        role="heading"
        aria-level="2"
        class={createColorClasses(this.color, {
          'ion-inherit-color': true,
-          [theme]: true,
+          [mode]: true,
        })}
      >
        <slot></slot>
--- a/core/src/components/card/card.tsx
+++ b/core/src/components/card/card.tsx
@@ -5,13 +5,12 @@ import type { Attributes } from '@utils/helpers';
 import { inheritAttributes } from '@utils/helpers';
 import { createColorClasses, openURL } from '@utils/theme';

-import { getIonTheme } from '../../global/ionic-global';
-import type { AnimationBuilder, Color, Theme } from '../../interface';
+import { getIonMode } from '../../global/ionic-global';
+import type { AnimationBuilder, Color, Mode } from '../../interface';
 import type { RouterDirection } from '../router/utils/interface';

 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of components.
- * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the appearance of components.
+ * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
 *
 * @part native - The native HTML button, anchor, or div element that wraps all child elements.
 */
@@ -20,7 +19,6 @@ import type { RouterDirection } from '../router/utils/interface';
  styleUrls: {
    ios: 'card.ios.scss',
    md: 'card.md.scss',
-    ionic: 'card.md.scss',
  },
  shadow: true,
 })
@@ -97,7 +95,7 @@ export class Card implements ComponentInterface, AnchorInterface, ButtonInterfac
    return this.href !== undefined || this.button;
  }

-  private renderCard(theme: Theme) {
+  private renderCard(mode: Mode) {
    const clickable = this.isClickable();

    if (!clickable) {
@@ -125,23 +123,22 @@ export class Card implements ComponentInterface, AnchorInterface, ButtonInterfac
        onClick={(ev: Event) => openURL(href, ev, routerDirection, routerAnimation)}
      >
        <slot></slot>
-        {clickable && theme === 'md' && <ion-ripple-effect></ion-ripple-effect>}
+        {clickable && mode === 'md' && <ion-ripple-effect></ion-ripple-effect>}
      </TagType>
    );
  }

  render() {
-    const theme = getIonTheme(this);
-
+    const mode = getIonMode(this);
    return (
      <Host
        class={createColorClasses(this.color, {
-          [theme]: true,
+          [mode]: true,
          'card-disabled': this.disabled,
          'ion-activatable': this.isClickable(),
        })}
      >
-        {this.renderCard(theme)}
+        {this.renderCard(mode)}
      </Host>
    );
  }
--- a/core/src/components/checkbox/checkbox.ionic.scss
+++ b/core/src/components/checkbox/checkbox.ionic.scss
@@ -1,154 +0,0 @@
-@import "./checkbox";
-@import "./checkbox.ionic.vars";
-
-// Material Design Checkbox
-// --------------------------------------------------
-
-:host {
-  // Border
-  --border-radius: calc(var(--size) * 0.125);
-  --border-width: #{$checkbox-ionic-icon-border-width};
-  --border-style: #{$checkbox-ionic-icon-border-style};
-  --border-color: #{$checkbox-ionic-icon-border-color-off};
-  --checkmark-width: 1.5;
-
-  // Background
-  --checkbox-background: #{$checkbox-ionic-icon-background-color-off};
-  --checkbox-background-checked: #1068eb;
-  --border-color-checked: #1068eb;
-
-  // Transition
-  --transition: #{background $checkbox-ionic-transition-duration $checkbox-ionic-transition-easing};
-
-  // Size
-  --size: #{$checkbox-ionic-icon-size};
-
-  // margin is required to make room for outline on focus, otherwise the outline may get cut off
-  @include margin($checkbox-ionic-outline-width);
-}
-
-.checkbox-icon path {
-  stroke-dasharray: 30;
-  stroke-dashoffset: 30;
-}
-
-// Checkbox: Focused
-// --------------------------------------------------------
-
-:host(.ion-focusable) .checkbox-icon {
-  outline: $checkbox-ionic-outline-width solid $checkbox-ionic-outline-color;
-}
-
-:host(.ion-focusable.checkbox-checked) .checkbox-icon,
-:host(.ion-focusable.checkbox-indeterminate) .checkbox-icon {
-  outline: $checkbox-ionic-outline-width solid $checkbox-ionic-outline-color;
-}
-
-// unchecked checkbox with `required` property set to true
-:host(.ion-focusable.checkbox-required:not(.checkbox-checked):not(.checkbox-indeterminate)) .checkbox-icon {
-  outline-color: #ffafaf;
-}
-
-// Checkbox: Hover
-// --------------------------------------------------------
-
-@media (any-hover: hover) {
-  :host(:hover) .checkbox-icon {
-    background-color: #ececec;
-  }
-
-  :host(:hover.checkbox-checked) .checkbox-icon,
-  :host(:hover.checkbox-indeterminate) .checkbox-icon {
-    background-color: #1061da;
-  }
-}
-
-// Checkbox: Active
-// --------------------------------------------------------
-
-:host(.ion-activated) .checkbox-icon {
-  background-color: #e3e3e3;
-}
-
-:host(.ion-activated.checkbox-checked) .checkbox-icon,
-:host(.ion-activated.checkbox-indeterminate) .checkbox-icon {
-  background-color: #105ed1;
-}
-
-// Material Design Checkbox: Checked / Indeterminate
-// --------------------------------------------------------
-
-:host(.checkbox-checked) .checkbox-icon path,
-:host(.checkbox-indeterminate) .checkbox-icon path {
-  stroke-dashoffset: 0;
-
-  transition: stroke-dashoffset 90ms linear 90ms;
-}
-
-// Material Design Checkbox: Disabled
-// --------------------------------------------------------
-// The checkbox itself should use the disabled
-// opacity set by its spec, while the label
-// should match the other form controls
-
-:host(.legacy-checkbox.checkbox-disabled),
-:host(.checkbox-disabled) .label-text-wrapper {
-  opacity: $checkbox-ionic-disabled-opacity;
-}
-
-:host(.checkbox-disabled) .native-wrapper {
-  opacity: $checkbox-ionic-icon-disabled-opacity;
-}
-
-:host(.checkbox-disabled.checkbox-checked) .checkbox-icon {
-  border-width: 0;
-
-  background-color: #c9c9c9;
-}
-
-:host(.checkbox-disabled.checkbox-indeterminate) .checkbox-icon {
-  border-width: 0;
-
-  background-color: #74aafc;
-}
-
-// disabled, unchecked checkbox
-:host(.checkbox-disabled) .checkbox-icon {
-  border-color: #c9c9c9;
-
-  background-color: #f5f5f5;
-}
-
-// unchecked checkbox with `required` property set to true
-:host(.checkbox-required:not(.checkbox-checked):not(.checkbox-indeterminate)) {
-  .checkbox-icon {
-    border-color: #f72c2c;
-  }
-}
-
-// Material Design Checkbox Within An Item
-// TODO(FW-3100): remove this
-// --------------------------------------------------------
-
-:host(.in-item.legacy-checkbox) {
-  // end position by default
-  @include margin(
-    $checkbox-ionic-item-end-margin-top,
-    $checkbox-ionic-item-end-margin-end,
-    $checkbox-ionic-item-end-margin-bottom,
-    $checkbox-ionic-item-end-margin-start
-  );
-
-  display: block;
-
-  position: static;
-}
-
-:host(.in-item.legacy-checkbox[slot="start"]) {
-  @include margin(
-    $checkbox-ionic-item-start-margin-top,
-    $checkbox-ionic-item-start-margin-end,
-    $checkbox-ionic-item-start-margin-bottom,
-    $checkbox-ionic-item-start-margin-start
-  );
-}
--- a/core/src/components/checkbox/checkbox.ionic.vars.scss
+++ b/core/src/components/checkbox/checkbox.ionic.vars.scss
@@ -1,70 +0,0 @@
-@import "../../themes/ionic.globals.md";
-@import "../item/item.md.vars";
-
-// Material Design Checkbox
-// --------------------------------------------------
-
-/// @prop - Opacity of the disabled checkbox label
-$checkbox-ionic-disabled-opacity: $form-control-md-disabled-opacity !default;
-
-/// @prop - Background color of the checkbox icon when off
-$checkbox-ionic-icon-background-color-off: $item-md-background !default;
-
-/// @prop - Size of the checkbox icon
-/// The icon size does not use dynamic font
-/// because it does not scale in native.
-$checkbox-ionic-icon-size: 24px !default;
-
-/// @prop - Border width of the checkbox icon
-$checkbox-ionic-icon-border-width: 1px !default;
-
-/// @prop - Border style of the checkbox icon
-$checkbox-ionic-icon-border-style: solid !default;
-
-/// @prop - Border color of the checkbox icon when off
-$checkbox-ionic-icon-border-color-off: #9a9a9a !default;
-
-/// @prop - Outline width of the checkbox
-$checkbox-ionic-outline-width: 2px !default;
-
-/// @prop - Outline color of the checkbox
-$checkbox-ionic-outline-color: #9ec4fd !default;
-
-/// @prop - Transition duration of the checkbox
-$checkbox-ionic-transition-duration: 180ms !default;
-
-/// @prop - Transition easing of the checkbox
-$checkbox-ionic-transition-easing: cubic-bezier(0.4, 0, 0.2, 1) !default;
-
-/// @prop - Margin top of the start checkbox item
-$checkbox-ionic-item-start-margin-top: 18px !default;
-
-/// @prop - Margin end of the start checkbox item
-$checkbox-ionic-item-start-margin-end: 36px !default;
-
-/// @prop - Margin bottom of the start checkbox item
-$checkbox-ionic-item-start-margin-bottom: $checkbox-ionic-item-start-margin-top !default;
-
-/// @prop - Margin start of the start checkbox item
-$checkbox-ionic-item-start-margin-start: 4px !default;
-
-/// @prop - Margin top of the end checkbox item
-$checkbox-ionic-item-end-margin-top: 18px !default;
-
-/// @prop - Margin end of the end checkbox item
-$checkbox-ionic-item-end-margin-end: 0 !default;
-
-/// @prop - Margin bottom of the end checkbox item
-$checkbox-ionic-item-end-margin-bottom: $checkbox-ionic-item-end-margin-top !default;
-
-/// @prop - Margin start of the end checkbox item
-$checkbox-ionic-item-end-margin-start: 0 !default;
-
-/// @prop - Opacity of the disabled checkbox
-/// This value is used because the checkbox color is set to
-/// `rgb(0, 0, 0, 0.60)` when enabled and we need it to be
-/// `rgb(0, 0, 0, 0.38)` when disabled but the disabled
-/// opacity is applied on top of the transparent color so
-/// this opacity gets us the equivalent of applying `0.38`
-/// on top of an opaque checkbox `rgb(0, 0, 0, 1.0)`
-$checkbox-ionic-icon-disabled-opacity: 0.63 !default;
--- a/core/src/components/checkbox/checkbox.tsx
+++ b/core/src/components/checkbox/checkbox.tsx
@@ -7,14 +7,13 @@ import { getAriaLabel, inheritAriaAttributes, renderHiddenInput } from '@utils/h
 import { printIonWarning } from '@utils/logging';
 import { createColorClasses, hostContext } from '@utils/theme';

-import { getIonTheme } from '../../global/ionic-global';
-import type { Color, StyleEventDetail, Theme } from '../../interface';
+import { getIonMode } from '../../global/ionic-global';
+import type { Color, Mode, StyleEventDetail } from '../../interface';

 import type { CheckboxChangeEventDetail } from './checkbox-interface';

 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of components.
- * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the appearance of components.
+ * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
 *
 * @slot - The label text to associate with the checkbox. Use the "labelPlacement" property to control where the label is placed relative to the checkbox.
 *
@@ -27,7 +26,6 @@ import type { CheckboxChangeEventDetail } from './checkbox-interface';
  styleUrls: {
    ios: 'checkbox.ios.scss',
    md: 'checkbox.md.scss',
-    ionic: 'checkbox.ionic.scss',
  },
  shadow: true,
 })
@@ -70,11 +68,6 @@ export class Checkbox implements ComponentInterface {
   */
  @Prop() disabled = false;

-  /**
-   * If `true`, the checkbox will be presented with an error style when it is unchecked.
-   */
-  @Prop() required = false;
-
  /**
   * The value of the checkbox does not mean if it's checked or not, use the `checked`
   * property for that.
@@ -248,31 +241,26 @@ export class Checkbox implements ComponentInterface {
      justify,
      labelPlacement,
      name,
-      required,
      value,
      alignment,
    } = this;
-    const theme = getIonTheme(this);
-
-    const path = getSVGPath(theme, indeterminate);
+    const mode = getIonMode(this);
+    const path = getSVGPath(mode, indeterminate);

    renderHiddenInput(true, el, name, checked ? value : '', disabled);

    return (
      <Host
        class={createColorClasses(color, {
-          [theme]: true,
+          [mode]: true,
          'in-item': hostContext('ion-item', el),
          'checkbox-checked': checked,
          'checkbox-disabled': disabled,
          'checkbox-indeterminate': indeterminate,
-          'checkbox-required': required,
          interactive: true,
          [`checkbox-justify-${justify}`]: true,
          [`checkbox-alignment-${alignment}`]: true,
          [`checkbox-label-placement-${labelPlacement}`]: true,
-          'ion-activatable': true,
-          'ion-focusable': true,
        })}
        onClick={this.onClick}
      >
@@ -290,8 +278,6 @@ export class Checkbox implements ComponentInterface {
            onFocus={() => this.onFocus()}
            onBlur={() => this.onBlur()}
            ref={(focusEl) => (this.focusEl = focusEl)}
-            aria-checked={indeterminate ? 'mixed' : `${checked}`}
-            required={required}
            {...inheritedAttributes}
          />
          <div
@@ -338,9 +324,9 @@ Developers can dismiss this warning by removing their usage of the "legacy" prop
    }

    const { color, checked, disabled, el, getSVGPath, indeterminate, inputId, name, value } = this;
-    const theme = getIonTheme(this);
+    const mode = getIonMode(this);
    const { label, labelId, labelText } = getAriaLabel(el, inputId);
-    const path = getSVGPath(theme, indeterminate);
+    const path = getSVGPath(mode, indeterminate);

    renderHiddenInput(true, el, name, checked ? value : '', disabled);

@@ -351,7 +337,7 @@ Developers can dismiss this warning by removing their usage of the "legacy" prop
        aria-hidden={disabled ? 'true' : null}
        role="checkbox"
        class={createColorClasses(color, {
-          [theme]: true,
+          [mode]: true,
          'in-item': hostContext('ion-item', el),
          'checkbox-checked': checked,
          'checkbox-disabled': disabled,
@@ -379,14 +365,14 @@ Developers can dismiss this warning by removing their usage of the "legacy" prop
    );
  }

-  private getSVGPath(theme: Theme, indeterminate: boolean): HTMLElement {
+  private getSVGPath(mode: Mode, indeterminate: boolean): HTMLElement {
    let path = indeterminate ? (
      <path d="M6 12L18 12" part="mark" />
    ) : (
      <path d="M5.9,12.5l3.8,3.8l8.8-8.8" part="mark" />
    );

-    if (theme === 'md') {
+    if (mode === 'md') {
      path = indeterminate ? (
        <path d="M2 12H22" part="mark" />
      ) : (
@@ -394,14 +380,6 @@ Developers can dismiss this warning by removing their usage of the "legacy" prop
      );
    }

-    if (theme === 'ionic') {
-      path = indeterminate ? (
-        <path d="M6.5 12H17.5" stroke-linecap="round" part="mark" />
-      ) : (
-        <path d="M6 12.5L10 16.5L18.5 8" stroke-linecap="round" stroke-linejoin="round" part="mark" />
-      );
-    }
-
    return path;
  }
 }
--- a/core/src/components/chip/chip.tsx
+++ b/core/src/components/chip/chip.tsx
@@ -2,19 +2,17 @@ import type { ComponentInterface } from '@stencil/core';
 import { Component, Host, Prop, h } from '@stencil/core';
 import { createColorClasses } from '@utils/theme';

-import { getIonTheme } from '../../global/ionic-global';
+import { getIonMode } from '../../global/ionic-global';
 import type { Color } from '../../interface';

 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of components.
- * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the appearance of components.
+ * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
 */
@Component({
  tag: 'ion-chip',
  styleUrls: {
    ios: 'chip.ios.scss',
    md: 'chip.md.scss',
-    ionic: 'chip.md.scss',
  },
  shadow: true,
 })
@@ -37,20 +35,20 @@ export class Chip implements ComponentInterface {
  @Prop() disabled = false;

  render() {
-    const theme = getIonTheme(this);
+    const mode = getIonMode(this);

    return (
      <Host
        aria-disabled={this.disabled ? 'true' : null}
        class={createColorClasses(this.color, {
-          [theme]: true,
+          [mode]: true,
          'chip-outline': this.outline,
          'chip-disabled': this.disabled,
          'ion-activatable': true,
        })}
      >
        <slot></slot>
-        {theme === 'md' && <ion-ripple-effect></ion-ripple-effect>}
+        {mode === 'md' && <ion-ripple-effect></ion-ripple-effect>}
      </Host>
    );
  }
--- a/core/src/components/col/col.tsx
+++ b/core/src/components/col/col.tsx
@@ -2,7 +2,7 @@ import type { ComponentInterface } from '@stencil/core';
 import { Component, Host, Listen, Prop, forceUpdate, h } from '@stencil/core';
 import { matchBreakpoint } from '@utils/media';

-import { getIonTheme } from '../../global/ionic-global';
+import { getIonMode } from '../../global/ionic-global';

 const win = typeof (window as any) !== 'undefined' ? (window as any) : undefined;
 // eslint-disable-next-line @typescript-eslint/prefer-optional-chain
@@ -249,11 +249,11 @@ export class Col implements ComponentInterface {

  render() {
    const isRTL = document.dir === 'rtl';
-    const theme = getIonTheme(this);
+    const mode = getIonMode(this);
    return (
      <Host
        class={{
-          [theme]: true,
+          [mode]: true,
        }}
        style={{
          ...this.calculateOffset(isRTL),
--- a/core/src/components/content/content.tsx
+++ b/core/src/components/content/content.tsx
@@ -5,7 +5,7 @@ import { isPlatform } from '@utils/platform';
 import { isRTL } from '@utils/rtl';
 import { createColorClasses, hostContext } from '@utils/theme';

-import { getIonMode, getIonTheme } from '../../global/ionic-global';
+import { getIonMode } from '../../global/ionic-global';
 import type { Color } from '../../interface';

 import type { ScrollBaseDetail, ScrollDetail } from './content-interface';
@@ -425,9 +425,9 @@ export class Content implements ComponentInterface {
  render() {
    const { isMainContent, scrollX, scrollY, el } = this;
    const rtl = isRTL(el) ? 'rtl' : 'ltr';
-    const theme = getIonTheme(this);
+    const mode = getIonMode(this);
    const forceOverscroll = this.shouldForceOverscroll();
-    const transitionShadow = theme === 'ios';
+    const transitionShadow = mode === 'ios';
    const TagType = isMainContent ? 'main' : ('div' as any);

    this.resize();
@@ -435,7 +435,7 @@ export class Content implements ComponentInterface {
    return (
      <Host
        class={createColorClasses(this.color, {
-          [theme]: true,
+          [mode]: true,
          'content-sizing': hostContext('ion-popover', this.el),
          overscroll: forceOverscroll,
          [`content-${rtl}`]: true,
--- a/core/src/components/datetime-button/datetime-button.tsx
+++ b/core/src/components/datetime-button/datetime-button.tsx
@@ -4,7 +4,7 @@ import { componentOnReady, addEventListener } from '@utils/helpers';
 import { printIonError } from '@utils/logging';
 import { createColorClasses } from '@utils/theme';

-import { getIonTheme } from '../../global/ionic-global';
+import { getIonMode } from '../../global/ionic-global';
 import type { Color } from '../../interface';
 import type { DatetimePresentation } from '../datetime/datetime-interface';
 import { getToday } from '../datetime/utils/data';
@@ -12,8 +12,7 @@ import { getMonthAndYear, getMonthDayAndYear, getLocalizedDateTime, getLocalized
 import { getHourCycle } from '../datetime/utils/helpers';
 import { parseDate } from '../datetime/utils/parse';
 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of components.
- * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the appearance of components.
+ * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
 *
 * @slot date-target - Content displayed inside of the date button.
 * @slot time-target - Content displayed inside of the time button.
@@ -414,12 +413,12 @@ export class DatetimeButton implements ComponentInterface {
  render() {
    const { color, dateText, timeText, selectedButton, datetimeActive, disabled } = this;

-    const theme = getIonTheme(this);
+    const mode = getIonMode(this);

    return (
      <Host
        class={createColorClasses(color, {
-          [theme]: true,
+          [mode]: true,
          [`${selectedButton}-active`]: datetimeActive,
          ['datetime-button-disabled']: disabled,
        })}
@@ -435,7 +434,7 @@ export class DatetimeButton implements ComponentInterface {
            ref={(el) => (this.dateTargetEl = el)}
          >
            <slot name="date-target">{dateText}</slot>
-            {theme === 'md' && <ion-ripple-effect></ion-ripple-effect>}
+            {mode === 'md' && <ion-ripple-effect></ion-ripple-effect>}
          </button>
        )}

@@ -450,7 +449,7 @@ export class DatetimeButton implements ComponentInterface {
            ref={(el) => (this.timeTargetEl = el)}
          >
            <slot name="time-target">{timeText}</slot>
-            {theme === 'md' && <ion-ripple-effect></ion-ripple-effect>}
+            {mode === 'md' && <ion-ripple-effect></ion-ripple-effect>}
          </button>
        )}
      </Host>
--- a/core/src/components/datetime-button/test/buttons/index.html
+++ b/core/src/components/datetime-button/test/buttons/index.html
@@ -18,7 +18,7 @@
      </ion-header>
      <ion-content>
        <ion-item>
-          <ion-input aria-label="input" value="March 15, 2022 at 12:43 AM"></ion-input>
+          <ion-input value="March 15, 2022 at 12:43 AM"></ion-input>
          <ion-datetime-button slot="end" id="default-button" datetime="default-datetime">
            <ion-icon color="primary" id="custom-date-button" slot="date-target" name="calendar"></ion-icon>
            <ion-icon color="primary" id="custom-time-button" slot="time-target" name="time"></ion-icon>
--- a/core/src/components/datetime-button/test/overlays/datetime-button.e2e.ts-snapshots/datetime-overlay-popover-ios-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/datetime-button/test/overlays/datetime-button.e2e.ts-snapshots/datetime-overlay-popover-ios-ltr-Mobile-Chrome-linux.png
--- a/core/src/components/datetime-button/test/overlays/datetime-button.e2e.ts-snapshots/datetime-overlay-popover-ios-ltr-Mobile-Safari-linux.png
+++ b/core/src/components/datetime-button/test/overlays/datetime-button.e2e.ts-snapshots/datetime-overlay-popover-ios-ltr-Mobile-Safari-linux.png
--- a/core/src/components/datetime/datetime.tsx
+++ b/core/src/components/datetime/datetime.tsx
@@ -7,8 +7,8 @@ import { isRTL } from '@utils/rtl';
 import { createColorClasses } from '@utils/theme';
 import { caretDownSharp, caretUpSharp, chevronBack, chevronDown, chevronForward } from 'ionicons/icons';

-import { getIonMode, getIonTheme } from '../../global/ionic-global';
-import type { Color, StyleEventDetail, Theme } from '../../interface';
+import { getIonMode } from '../../global/ionic-global';
+import type { Color, Mode, StyleEventDetail } from '../../interface';
 import type { PickerColumnItem } from '../picker-column-internal/picker-column-internal-interfaces';

 import type {
@@ -70,8 +70,7 @@ import {
 } from './utils/state';

 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of components.
- * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the appearance of components.
+ * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
 *
 * @slot title - The title of the datetime.
 * @slot buttons - The buttons in the datetime.
@@ -99,7 +98,6 @@ import {
  styleUrls: {
    ios: 'datetime.ios.scss',
    md: 'datetime.md.scss',
-    ionic: 'datetime.md.scss',
  },
  shadow: true,
 })
@@ -2050,10 +2048,10 @@ export class Datetime implements ComponentInterface {
   * Grid Render Methods
   */

-  private renderCalendarHeader(theme: Theme) {
+  private renderCalendarHeader(mode: Mode) {
    const { disabled } = this;
-    const expandedIcon = theme === 'ios' ? chevronDown : caretUpSharp;
-    const collapsedIcon = theme === 'ios' ? chevronForward : caretDownSharp;
+    const expandedIcon = mode === 'ios' ? chevronDown : caretUpSharp;
+    const collapsedIcon = mode === 'ios' ? chevronForward : caretDownSharp;

    const prevMonthDisabled = disabled || isPrevMonthDisabled(this.workingParts, this.minParts, this.maxParts);
    const nextMonthDisabled = disabled || isNextMonthDisabled(this.workingParts, this.maxParts);
@@ -2131,7 +2129,7 @@ export class Datetime implements ComponentInterface {
          </div>
        </div>
        <div class="calendar-days-of-week" aria-hidden="true">
-          {getDaysOfWeek(this.locale, theme, this.firstDayOfWeek % 7).map((d) => {
+          {getDaysOfWeek(this.locale, mode, this.firstDayOfWeek % 7).map((d) => {
            return <div class="day-of-week">{d}</div>;
          })}
        </div>
@@ -2338,10 +2336,10 @@ export class Datetime implements ComponentInterface {
      </div>
    );
  }
-  private renderCalendar(theme: Theme) {
+  private renderCalendar(mode: Mode) {
    return (
      <div class="datetime-calendar" key="datetime-calendar">
-        {this.renderCalendarHeader(theme)}
+        {this.renderCalendarHeader(mode)}
        {this.renderCalendarBody()}
      </div>
    );
@@ -2496,7 +2494,7 @@ export class Datetime implements ComponentInterface {
   * All presentation types are rendered from here.
   */

-  private renderDatetime(theme: Theme) {
+  private renderDatetime(mode: Mode) {
    const { presentation, preferWheel } = this;

    /**
@@ -2512,7 +2510,7 @@ export class Datetime implements ComponentInterface {
      case 'date-time':
        return [
          this.renderHeader(),
-          this.renderCalendar(theme),
+          this.renderCalendar(mode),
          this.renderCalendarViewMonthYearPicker(),
          this.renderTime(),
          this.renderFooter(),
@@ -2521,7 +2519,7 @@ export class Datetime implements ComponentInterface {
        return [
          this.renderHeader(),
          this.renderTime(),
-          this.renderCalendar(theme),
+          this.renderCalendar(mode),
          this.renderCalendarViewMonthYearPicker(),
          this.renderFooter(),
        ];
@@ -2534,7 +2532,7 @@ export class Datetime implements ComponentInterface {
      default:
        return [
          this.renderHeader(),
-          this.renderCalendar(theme),
+          this.renderCalendar(mode),
          this.renderCalendarViewMonthYearPicker(),
          this.renderFooter(),
        ];
@@ -2555,7 +2553,7 @@ export class Datetime implements ComponentInterface {
      size,
      isGridStyle,
    } = this;
-    const theme = getIonTheme(this);
+    const mode = getIonMode(this);
    const isMonthAndYearPresentation =
      presentation === 'year' || presentation === 'month' || presentation === 'month-year';
    const shouldShowMonthAndYear = showMonthAndYear || isMonthAndYearPresentation;
@@ -2572,7 +2570,7 @@ export class Datetime implements ComponentInterface {
        onBlur={this.onBlur}
        class={{
          ...createColorClasses(color, {
-            [theme]: true,
+            [mode]: true,
            ['datetime-readonly']: readonly,
            ['datetime-disabled']: disabled,
            'show-month-and-year': shouldShowMonthAndYear,
@@ -2584,7 +2582,7 @@ export class Datetime implements ComponentInterface {
          }),
        }}
      >
-        {this.renderDatetime(theme)}
+        {this.renderDatetime(mode)}
      </Host>
    );
  }
--- a/core/src/components/datetime/test/basic/index.html
+++ b/core/src/components/datetime/test/basic/index.html
@@ -214,7 +214,8 @@
          <ion-popover class="options-popover" trigger="popover-trigger">
            <ion-list lines="none">
              <ion-item>
-                <ion-checkbox>Dark Mode</ion-checkbox>
+                <ion-label>Dark Mode</ion-label>
+                <ion-checkbox slot="end"></ion-checkbox>
              </ion-item>
              <ion-item detail="true" href="?ionic:mode=ios">
                <ion-label>iOS Mode</ion-label>
@@ -224,19 +225,23 @@
              </ion-item>

              <ion-item>
-                <ion-toggle id="titleToggle">Show Default Title</ion-toggle>
+                <ion-label>Show Default Title</ion-label>
+                <ion-toggle id="titleToggle"></ion-toggle>
              </ion-item>

              <ion-item>
-                <ion-toggle id="buttonsToggle">Show Default Buttons</ion-toggle>
+                <ion-label>Show Default Buttons</ion-label>
+                <ion-toggle id="buttonsToggle"></ion-toggle>
              </ion-item>

              <ion-item>
-                <ion-input label="Locale" placeholder="default" id="locale"></ion-input>
+                <ion-label>Locale</ion-label>
+                <ion-input placeholder="default" id="locale"></ion-input>
              </ion-item>

              <ion-item>
-                <ion-select label="Color" id="color" value="primary">
+                <ion-label>Color</ion-label>
+                <ion-select id="color" value="primary">
                  <ion-select-option value="primary">Primary</ion-select-option>
                  <ion-select-option value="secondary">Secondary</ion-select-option>
                  <ion-select-option value="tertiary">Tertiary</ion-select-option>
--- a/core/src/components/datetime/utils/data.ts
+++ b/core/src/components/datetime/utils/data.ts
@@ -1,4 +1,4 @@
-import type { Theme } from '../../../interface';
+import type { Mode } from '../../../interface';
 import type { PickerColumnItem } from '../../picker-column-internal/picker-column-internal-interfaces';
 import type { DatetimeParts, DatetimeHourCycle } from '../datetime-interface';

@@ -65,13 +65,13 @@ const hour24 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 1
 * MD should display days such as "M"
 * or "T".
 */
-export const getDaysOfWeek = (locale: string, theme: Theme, firstDayOfWeek = 0) => {
+export const getDaysOfWeek = (locale: string, mode: Mode, firstDayOfWeek = 0) => {
  /**
   * Nov 1st, 2020 starts on a Sunday.
   * ion-datetime assumes weeks start on Sunday,
   * but is configurable via `firstDayOfWeek`.
   */
-  const weekdayFormat = theme === 'ios' ? 'short' : 'narrow';
+  const weekdayFormat = mode === 'ios' ? 'short' : 'narrow';
  const intl = new Intl.DateTimeFormat(locale, { weekday: weekdayFormat });
  const startDate = new Date('11/01/2020');
  const daysOfWeek = [];
--- a/core/src/components/fab-button/fab-button.tsx
+++ b/core/src/components/fab-button/fab-button.tsx
@@ -6,13 +6,12 @@ import type { Attributes } from '@utils/helpers';
 import { createColorClasses, hostContext, openURL } from '@utils/theme';
 import { close } from 'ionicons/icons';

-import { getIonTheme } from '../../global/ionic-global';
+import { getIonMode } from '../../global/ionic-global';
 import type { AnimationBuilder, Color } from '../../interface';
 import type { RouterDirection } from '../router/utils/interface';

 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of components.
- * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the appearance of components.
+ * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
 *
 * @part native - The native HTML button or anchor element that wraps all child elements.
 * @part close-icon - The close icon that is displayed when a fab list opens (uses ion-icon).
@@ -22,7 +21,6 @@ import type { RouterDirection } from '../router/utils/interface';
  styleUrls: {
    ios: 'fab-button.ios.scss',
    md: 'fab-button.md.scss',
-    ionic: 'fab-button.md.scss',
  },
  shadow: true,
 })
@@ -155,7 +153,7 @@ export class FabButton implements ComponentInterface, AnchorInterface, ButtonInt
  render() {
    const { el, disabled, color, href, activated, show, translucent, size, inheritedAttributes } = this;
    const inList = hostContext('ion-fab-list', el);
-    const theme = getIonTheme(this);
+    const mode = getIonMode(this);
    const TagType = href === undefined ? 'button' : ('a' as any);
    const attrs =
      TagType === 'button'
@@ -172,7 +170,7 @@ export class FabButton implements ComponentInterface, AnchorInterface, ButtonInt
        onClick={this.onClick}
        aria-disabled={disabled ? 'true' : null}
        class={createColorClasses(color, {
-          [theme]: true,
+          [mode]: true,
          'fab-button-in-list': inList,
          'fab-button-translucent-in-list': inList && translucent,
          'fab-button-close-active': activated,
@@ -204,7 +202,7 @@ export class FabButton implements ComponentInterface, AnchorInterface, ButtonInt
          <span class="button-inner">
            <slot></slot>
          </span>
-          {theme === 'md' && <ion-ripple-effect></ion-ripple-effect>}
+          {mode === 'md' && <ion-ripple-effect></ion-ripple-effect>}
        </TagType>
      </Host>
    );
--- a/core/src/components/fab-list/fab-list.tsx
+++ b/core/src/components/fab-list/fab-list.tsx
@@ -1,7 +1,7 @@
 import type { ComponentInterface } from '@stencil/core';
 import { Component, Element, Host, Prop, Watch, h } from '@stencil/core';

-import { getIonTheme } from '../../global/ionic-global';
+import { getIonMode } from '../../global/ionic-global';

@Component({
  tag: 'ion-fab-list',
@@ -33,11 +33,11 @@ export class FabList implements ComponentInterface {
  @Prop() side: 'start' | 'end' | 'top' | 'bottom' = 'bottom';

  render() {
-    const theme = getIonTheme(this);
+    const mode = getIonMode(this);
    return (
      <Host
        class={{
-          [theme]: true,
+          [mode]: true,
          'fab-list-active': this.activated,
          [`fab-list-side-${this.side}`]: true,
        }}
--- a/core/src/components/fab/fab.tsx
+++ b/core/src/components/fab/fab.tsx
@@ -1,7 +1,7 @@
 import type { ComponentInterface } from '@stencil/core';
 import { Component, Element, Host, Method, Prop, Watch, h } from '@stencil/core';

-import { getIonTheme } from '../../global/ionic-global';
+import { getIonMode } from '../../global/ionic-global';

@Component({
  tag: 'ion-fab',
@@ -76,11 +76,11 @@ export class Fab implements ComponentInterface {

  render() {
    const { horizontal, vertical, edge } = this;
-    const theme = getIonTheme(this);
+    const mode = getIonMode(this);
    return (
      <Host
        class={{
-          [theme]: true,
+          [mode]: true,
          [`fab-horizontal-${horizontal}`]: horizontal !== undefined,
          [`fab-vertical-${vertical}`]: vertical !== undefined,
          'fab-edge': edge,
--- a/core/src/components/footer/footer.tsx
+++ b/core/src/components/footer/footer.tsx
@@ -4,20 +4,18 @@ import { findIonContent, getScrollElement, printIonContentErrorMsg } from '@util
 import type { KeyboardController } from '@utils/keyboard/keyboard-controller';
 import { createKeyboardController } from '@utils/keyboard/keyboard-controller';

-import { getIonTheme } from '../../global/ionic-global';
+import { getIonMode } from '../../global/ionic-global';

 import { handleFooterFade } from './footer.utils';

 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of components.
- * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the appearance of components.
+ * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
 */
@Component({
  tag: 'ion-footer',
  styleUrls: {
    ios: 'footer.ios.scss',
    md: 'footer.md.scss',
-    ionic: 'footer.md.scss',
  },
 })
 export class Footer implements ComponentInterface {
@@ -75,8 +73,8 @@ export class Footer implements ComponentInterface {
  }

  private checkCollapsibleFooter = () => {
-    const theme = getIonTheme(this);
-    if (theme !== 'ios') {
+    const mode = getIonMode(this);
+    if (mode !== 'ios') {
      return;
    }

@@ -121,7 +119,7 @@ export class Footer implements ComponentInterface {

  render() {
    const { translucent, collapse } = this;
-    const theme = getIonTheme(this);
+    const mode = getIonMode(this);
    const tabs = this.el.closest('ion-tabs');
    const tabBar = tabs?.querySelector(':scope > ion-tab-bar');

@@ -129,19 +127,19 @@ export class Footer implements ComponentInterface {
      <Host
        role="contentinfo"
        class={{
-          [theme]: true,
+          [mode]: true,

          // Used internally for styling
-          [`footer-${theme}`]: true,
+          [`footer-${mode}`]: true,

          [`footer-translucent`]: translucent,
-          [`footer-translucent-${theme}`]: translucent,
+          [`footer-translucent-${mode}`]: translucent,
          ['footer-toolbar-padding']: !this.keyboardVisible && (!tabBar || tabBar.slot !== 'bottom'),

          [`footer-collapse-${collapse}`]: collapse !== undefined,
        }}
      >
-        {theme === 'ios' && translucent && <div class="footer-background"></div>}
+        {mode === 'ios' && translucent && <div class="footer-background"></div>}
        <slot></slot>
      </Host>
    );
--- a/core/src/components/grid/grid.tsx
+++ b/core/src/components/grid/grid.tsx
@@ -1,7 +1,7 @@
 import type { ComponentInterface } from '@stencil/core';
 import { Component, Host, Prop, h } from '@stencil/core';

-import { getIonTheme } from '../../global/ionic-global';
+import { getIonMode } from '../../global/ionic-global';

@Component({
  tag: 'ion-grid',
@@ -15,11 +15,11 @@ export class Grid implements ComponentInterface {
  @Prop() fixed = false;

  render() {
-    const theme = getIonTheme(this);
+    const mode = getIonMode(this);
    return (
      <Host
        class={{
-          [theme]: true,
+          [mode]: true,
          'grid-fixed': this.fixed,
        }}
      >
--- a/core/src/components/header/header.tsx
+++ b/core/src/components/header/header.tsx
@@ -5,7 +5,7 @@ import type { Attributes } from '@utils/helpers';
 import { inheritAriaAttributes } from '@utils/helpers';
 import { hostContext } from '@utils/theme';

-import { getIonTheme } from '../../global/ionic-global';
+import { getIonMode } from '../../global/ionic-global';

 import {
  cloneElement,
@@ -18,15 +18,13 @@ import {
 } from './header.utils';

 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of components.
- * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the appearance of components.
+ * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
 */
@Component({
  tag: 'ion-header',
  styleUrls: {
    ios: 'header.ios.scss',
    md: 'header.md.scss',
-    ionic: 'header.md.scss',
  },
 })
 export class Header implements ComponentInterface {
@@ -73,9 +71,9 @@ export class Header implements ComponentInterface {
  }

  private async checkCollapsibleHeader() {
-    const theme = getIonTheme(this);
+    const mode = getIonMode(this);

-    if (theme !== 'ios') {
+    if (mode !== 'ios') {
      return;
    }

@@ -208,7 +206,7 @@ export class Header implements ComponentInterface {

  render() {
    const { translucent, inheritedAttributes } = this;
-    const theme = getIonTheme(this);
+    const mode = getIonMode(this);
    const collapse = this.collapse || 'none';

    // banner role must be at top level, so remove role if inside a menu
@@ -218,18 +216,18 @@ export class Header implements ComponentInterface {
      <Host
        role={roleType}
        class={{
-          [theme]: true,
+          [mode]: true,

          // Used internally for styling
-          [`header-${theme}`]: true,
+          [`header-${mode}`]: true,

          [`header-translucent`]: this.translucent,
          [`header-collapse-${collapse}`]: true,
-          [`header-translucent-${theme}`]: this.translucent,
+          [`header-translucent-${mode}`]: this.translucent,
        }}
        {...inheritedAttributes}
      >
-        {theme === 'ios' && translucent && <div class="header-background"></div>}
+        {mode === 'ios' && translucent && <div class="header-background"></div>}
        <slot></slot>
      </Host>
    );
--- a/core/src/components/img/img.tsx
+++ b/core/src/components/img/img.tsx
@@ -3,7 +3,7 @@ import { Component, Element, Event, Host, Prop, State, Watch, h } from '@stencil
 import type { Attributes } from '@utils/helpers';
 import { inheritAttributes } from '@utils/helpers';

-import { getIonTheme } from '../../global/ionic-global';
+import { getIonMode } from '../../global/ionic-global';

 /**
 * @part image - The inner `img` element.
@@ -110,13 +110,8 @@ export class Img implements ComponentInterface {
  render() {
    const { loadSrc, alt, onLoad, loadError, inheritedAttributes } = this;
    const { draggable } = inheritedAttributes;
-    const theme = getIonTheme(this);
    return (
-      <Host
-        class={{
-          [theme]: true,
-        }}
-      >
+      <Host class={getIonMode(this)}>
        <img
          decoding="async"
          src={loadSrc}
--- a/core/src/components/infinite-scroll-content/infinite-scroll-content.tsx
+++ b/core/src/components/infinite-scroll-content/infinite-scroll-content.tsx
@@ -4,19 +4,15 @@ import { ENABLE_HTML_CONTENT_DEFAULT } from '@utils/config';
 import { sanitizeDOMString } from '@utils/sanitization';

 import { config } from '../../global/config';
-import { getIonTheme } from '../../global/ionic-global';
+import { getIonMode } from '../../global/ionic-global';
 import type { IonicSafeString } from '../../utils/sanitization';
 import type { SpinnerTypes } from '../spinner/spinner-configs';

-/**
- * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the appearance of components.
- */
@Component({
  tag: 'ion-infinite-scroll-content',
  styleUrls: {
    ios: 'infinite-scroll-content.ios.scss',
    md: 'infinite-scroll-content.md.scss',
-    ionic: 'infinite-scroll-content.md.scss',
  },
 })
 export class InfiniteScrollContent implements ComponentInterface {
@@ -45,10 +41,10 @@ export class InfiniteScrollContent implements ComponentInterface {

  componentDidLoad() {
    if (this.loadingSpinner === undefined) {
-      const theme = getIonTheme(this);
+      const mode = getIonMode(this);
      this.loadingSpinner = config.get(
        'infiniteLoadingSpinner',
-        config.get('spinner', theme === 'ios' ? 'lines' : 'crescent')
+        config.get('spinner', mode === 'ios' ? 'lines' : 'crescent')
      );
    }
  }
@@ -63,14 +59,14 @@ export class InfiniteScrollContent implements ComponentInterface {
  }

  render() {
-    const theme = getIonTheme(this);
+    const mode = getIonMode(this);
    return (
      <Host
        class={{
-          [theme]: true,
+          [mode]: true,

          // Used internally for styling
-          [`infinite-scroll-content-${theme}`]: true,
+          [`infinite-scroll-content-${mode}`]: true,
        }}
      >
        <div class="infinite-loading">
--- a/core/src/components/infinite-scroll/infinite-scroll.tsx
+++ b/core/src/components/infinite-scroll/infinite-scroll.tsx
@@ -2,7 +2,7 @@ import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Method, Prop, State, Watch, h, readTask, writeTask } from '@stencil/core';
 import { findClosestIonContent, getScrollElement, printIonContentErrorMsg } from '@utils/content';

-import { getIonTheme } from '../../global/ionic-global';
+import { getIonMode } from '../../global/ionic-global';

@Component({
  tag: 'ion-infinite-scroll',
@@ -221,12 +221,12 @@ export class InfiniteScroll implements ComponentInterface {
  }

  render() {
-    const theme = getIonTheme(this);
+    const mode = getIonMode(this);
    const disabled = this.disabled;
    return (
      <Host
        class={{
-          [theme]: true,
+          [mode]: true,
          'infinite-scroll-loading': this.isLoading,
          'infinite-scroll-enabled': !disabled,
        }}
--- a/core/src/components/input/input.tsx
+++ b/core/src/components/input/input.tsx
@@ -16,15 +16,14 @@ import type { SlotMutationController } from '@utils/slot-mutation-controller';
 import { createColorClasses, hostContext } from '@utils/theme';
 import { closeCircle, closeSharp } from 'ionicons/icons';

-import { getIonTheme } from '../../global/ionic-global';
+import { getIonMode } from '../../global/ionic-global';
 import type { AutocompleteTypes, Color, StyleEventDetail, TextFieldTypes } from '../../interface';

 import type { InputChangeEventDetail, InputInputEventDetail } from './input-interface';
 import { getCounterText } from './input.utils';

 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of components.
- * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the appearance of components.
+ * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
 *
 * @slot label - The label text to associate with the input. Use the `labelPlacement` property to control where the label is placed relative to the input. Use this if you need to render a label with custom HTML. (EXPERIMENTAL)
 * @slot start - Content to display at the leading edge of the input. (EXPERIMENTAL)
@@ -35,7 +34,6 @@ import { getCounterText } from './input.utils';
  styleUrls: {
    ios: 'input.ios.scss',
    md: 'input.md.scss',
-    ionic: 'input.md.scss',
  },
  scoped: true,
 })
@@ -692,8 +690,8 @@ export class Input implements ComponentInterface {
   * when fill="outline".
   */
  private renderLabelContainer() {
-    const theme = getIonTheme(this);
-    const hasOutlineFill = theme === 'md' && this.fill === 'outline';
+    const mode = getIonMode(this);
+    const hasOutlineFill = mode === 'md' && this.fill === 'outline';

    if (hasOutlineFill) {
      /**
@@ -731,10 +729,10 @@ export class Input implements ComponentInterface {

  private renderInput() {
    const { disabled, fill, readonly, shape, inputId, labelPlacement, el, hasFocus } = this;
-    const theme = getIonTheme(this);
+    const mode = getIonMode(this);
    const value = this.getValue();
    const inItem = hostContext('ion-item', this.el);
-    const shouldRenderHighlight = theme === 'md' && fill !== 'outline' && !inItem;
+    const shouldRenderHighlight = mode === 'md' && fill !== 'outline' && !inItem;

    const hasValue = this.hasValue();
    const hasStartEndSlots = el.querySelector('[slot="start"], [slot="end"]') !== null;
@@ -762,7 +760,7 @@ export class Input implements ComponentInterface {
    return (
      <Host
        class={createColorClasses(this.color, {
-          [theme]: true,
+          [mode]: true,
          'has-value': hasValue,
          'has-focus': hasFocus,
          'label-floating': labelShouldFloat,
@@ -835,7 +833,7 @@ export class Input implements ComponentInterface {
                }}
                onClick={this.clearTextInput}
              >
-                <ion-icon aria-hidden="true" icon={theme === 'ios' ? closeCircle : closeSharp}></ion-icon>
+                <ion-icon aria-hidden="true" icon={mode === 'ios' ? closeCircle : closeSharp}></ion-icon>
              </button>
            )}
            <slot name="end"></slot>
@@ -874,7 +872,7 @@ Developers can dismiss this warning by removing their usage of the "legacy" prop
      this.hasLoggedDeprecationWarning = true;
    }

-    const theme = getIonTheme(this);
+    const mode = getIonMode(this);
    const value = this.getValue();
    const labelId = this.inputId + '-lbl';
    const label = findItemLabel(this.el);
@@ -886,7 +884,7 @@ Developers can dismiss this warning by removing their usage of the "legacy" prop
      <Host
        aria-disabled={this.disabled ? 'true' : null}
        class={createColorClasses(this.color, {
-          [theme]: true,
+          [mode]: true,
          'has-value': this.hasValue(),
          'has-focus': this.hasFocus,
          'legacy-input': true,
@@ -942,7 +940,7 @@ Developers can dismiss this warning by removing their usage of the "legacy" prop
            }}
            onClick={this.clearTextInput}
          >
-            <ion-icon aria-hidden="true" icon={theme === 'ios' ? closeCircle : closeSharp}></ion-icon>
+            <ion-icon aria-hidden="true" icon={mode === 'ios' ? closeCircle : closeSharp}></ion-icon>
          </button>
        )}
      </Host>
--- a/core/src/components/item-divider/item-divider.tsx
+++ b/core/src/components/item-divider/item-divider.tsx
@@ -2,12 +2,11 @@ import type { ComponentInterface } from '@stencil/core';
 import { Component, Element, Host, Prop, h } from '@stencil/core';
 import { createColorClasses } from '@utils/theme';

-import { getIonTheme } from '../../global/ionic-global';
+import { getIonMode } from '../../global/ionic-global';
 import type { Color } from '../../interface';

 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of components.
- * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the appearance of components.
+ * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
 *
 * @slot - Content is placed between the named slots if provided without a slot.
 * @slot start - Content is placed to the left of the divider text in LTR, and to the right in RTL.
@@ -18,7 +17,6 @@ import type { Color } from '../../interface';
  styleUrls: {
    ios: 'item-divider.ios.scss',
    md: 'item-divider.md.scss',
-    ionic: 'item-divider.md.scss',
  },
  shadow: true,
 })
@@ -42,11 +40,11 @@ export class ItemDivider implements ComponentInterface {
  @Prop() sticky = false;

  render() {
-    const theme = getIonTheme(this);
+    const mode = getIonMode(this);
    return (
      <Host
        class={createColorClasses(this.color, {
-          [theme]: true,
+          [mode]: true,
          'item-divider-sticky': this.sticky,
          item: true,
        })}
--- a/core/src/components/item-group/item-group.tsx
+++ b/core/src/components/item-group/item-group.tsx
@@ -1,30 +1,26 @@
 import type { ComponentInterface } from '@stencil/core';
 import { Component, Host, h } from '@stencil/core';

-import { getIonTheme } from '../../global/ionic-global';
+import { getIonMode } from '../../global/ionic-global';

-/**
- * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the appearance of components.
- */
@Component({
  tag: 'ion-item-group',
  styleUrls: {
    ios: 'item-group.ios.scss',
    md: 'item-group.md.scss',
-    ionic: 'item-group.md.scss',
  },
 })
 export class ItemGroup implements ComponentInterface {
  render() {
-    const theme = getIonTheme(this);
+    const mode = getIonMode(this);
    return (
      <Host
        role="group"
        class={{
-          [theme]: true,
+          [mode]: true,

          // Used internally for styling
-          [`item-group-${theme}`]: true,
+          [`item-group-${mode}`]: true,

          item: true,
        }}
--- a/core/src/components/item-option/item-option.tsx
+++ b/core/src/components/item-option/item-option.tsx
@@ -3,12 +3,11 @@ import { Component, Element, Host, Prop, h } from '@stencil/core';
 import type { AnchorInterface, ButtonInterface } from '@utils/element-interface';
 import { createColorClasses } from '@utils/theme';

-import { getIonTheme } from '../../global/ionic-global';
+import { getIonMode } from '../../global/ionic-global';
 import type { Color } from '../../interface';

 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of components.
- * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the appearance of components.
+ * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
 *
 * @slot - Content is placed between the named slots if provided without a slot.
 * @slot start - Content is placed to the left of the option text in LTR, and to the right in RTL.
@@ -24,7 +23,6 @@ import type { Color } from '../../interface';
  styleUrls: {
    ios: 'item-option.ios.scss',
    md: 'item-option.md.scss',
-    ionic: 'item-option.md.scss',
  },
  shadow: true,
 })
@@ -90,7 +88,7 @@ export class ItemOption implements ComponentInterface, AnchorInterface, ButtonIn
  render() {
    const { disabled, expandable, href } = this;
    const TagType = href === undefined ? 'button' : ('a' as any);
-    const theme = getIonTheme(this);
+    const mode = getIonMode(this);
    const attrs =
      TagType === 'button'
        ? { type: this.type }
@@ -104,7 +102,7 @@ export class ItemOption implements ComponentInterface, AnchorInterface, ButtonIn
      <Host
        onClick={this.onClick}
        class={createColorClasses(this.color, {
-          [theme]: true,
+          [mode]: true,
          'item-option-disabled': disabled,
          'item-option-expandable': expandable,
          'ion-activatable': true,
@@ -121,7 +119,7 @@ export class ItemOption implements ComponentInterface, AnchorInterface, ButtonIn
            </div>
            <slot name="bottom"></slot>
          </span>
-          {theme === 'md' && <ion-ripple-effect></ion-ripple-effect>}
+          {mode === 'md' && <ion-ripple-effect></ion-ripple-effect>}
        </TagType>
      </Host>
    );
--- a/core/src/components/item-options/item-options.tsx
+++ b/core/src/components/item-options/item-options.tsx
@@ -2,18 +2,14 @@ import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Method, Prop, h } from '@stencil/core';
 import { isEndSide } from '@utils/helpers';

-import { getIonTheme } from '../../global/ionic-global';
+import { getIonMode } from '../../global/ionic-global';
 import type { Side } from '../menu/menu-interface';

-/**
- * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the appearance of components.
- */
@Component({
  tag: 'ion-item-options',
  styleUrls: {
    ios: 'item-options.ios.scss',
    md: 'item-options.md.scss',
-    ionic: 'item-options.md.scss',
  },
 })
 export class ItemOptions implements ComponentInterface {
@@ -39,15 +35,15 @@ export class ItemOptions implements ComponentInterface {
  }

  render() {
-    const theme = getIonTheme(this);
+    const mode = getIonMode(this);
    const isEnd = isEndSide(this.side);
    return (
      <Host
        class={{
-          [theme]: true,
+          [mode]: true,

          // Used internally for styling
-          [`item-options-${theme}`]: true,
+          [`item-options-${mode}`]: true,

          /**
           * Note: The "start" and "end" terms refer to the
--- a/core/src/components/item-sliding/item-sliding.tsx
+++ b/core/src/components/item-sliding/item-sliding.tsx
@@ -4,7 +4,7 @@ import { findClosestIonContent, disableContentScrollY, resetContentScrollY } fro
 import { isEndSide } from '@utils/helpers';
 import { watchForOptions } from '@utils/watch-options';

-import { getIonTheme } from '../../global/ionic-global';
+import { getIonMode } from '../../global/ionic-global';
 import type { Gesture, GestureDetail } from '../../interface';
 import type { Side } from '../menu/menu-interface';

@@ -482,11 +482,11 @@ export class ItemSliding implements ComponentInterface {
  }

  render() {
-    const theme = getIonTheme(this);
+    const mode = getIonMode(this);
    return (
      <Host
        class={{
-          [theme]: true,
+          [mode]: true,
          'item-sliding-active-slide': this.state !== SlidingState.Disabled,
          'item-sliding-active-options-end': (this.state & SlidingState.End) !== 0,
          'item-sliding-active-options-start': (this.state & SlidingState.Start) !== 0,
--- a/core/src/components/item/item.tsx
+++ b/core/src/components/item/item.tsx
@@ -1,5 +1,5 @@
 import type { ComponentInterface } from '@stencil/core';
-import { Component, Element, Host, Listen, Prop, State, Watch, forceUpdate, h } from '@stencil/core';
+import { Build, Component, Element, Host, Listen, Prop, State, Watch, forceUpdate, h } from '@stencil/core';
 import type { AnchorInterface, ButtonInterface } from '@utils/element-interface';
 import type { Attributes } from '@utils/helpers';
 import { inheritAttributes, raf } from '@utils/helpers';
@@ -7,7 +7,7 @@ import { printIonError, printIonWarning } from '@utils/logging';
 import { createColorClasses, hostContext, openURL } from '@utils/theme';
 import { chevronForward } from 'ionicons/icons';

-import { getIonTheme } from '../../global/ionic-global';
+import { getIonMode } from '../../global/ionic-global';
 import type { AnimationBuilder, Color, CssClassMap, StyleEventDetail } from '../../interface';
 import type { InputInputEventDetail } from '../input/input-interface';
 import type { RouterDirection } from '../router/utils/interface';
@@ -15,8 +15,7 @@ import type { RouterDirection } from '../router/utils/interface';
 import type { CounterFormatter } from './item-interface';

 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of components.
- * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the appearance of components.
+ * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
 *
 * @slot - Content is placed between the named slots if provided without a slot.
 * @slot start - Content is placed to the left of the item text in LTR, and to the right in RTL.
@@ -32,7 +31,6 @@ import type { CounterFormatter } from './item-interface';
  styleUrls: {
    ios: 'item.ios.scss',
    md: 'item.md.scss',
-    ionic: 'item.md.scss',
  },
  shadow: {
    delegatesFocus: true,
@@ -360,6 +358,15 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac
  }

  private getFirstInteractive() {
+    if (Build.isTesting) {
+      /**
+       * Pseudo selectors can't be tested in unit tests.
+       * It will cause an error when running the tests.
+       *
+       * TODO: FW-5205 - Remove the build conditional when this is fixed in Stencil
+       */
+      return undefined;
+    }
    const controls = this.el.querySelectorAll<HTMLElement>(
      'ion-toggle:not([disabled]), ion-checkbox:not([disabled]), ion-radio:not([disabled]), ion-select:not([disabled])'
    );
@@ -386,7 +393,7 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac
      multipleInputs,
    } = this;
    const childStyles = {} as StyleEventDetail;
-    const theme = getIonTheme(this);
+    const mode = getIonMode(this);
    const clickable = this.isClickable();
    const canActivate = this.canActivate();
    const TagType = clickable ? (href === undefined ? 'button' : 'a') : ('div' as any);
@@ -435,7 +442,7 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac
      };
    }

-    const showDetail = detail !== undefined ? detail : theme === 'ios' && clickable;
+    const showDetail = detail !== undefined ? detail : mode === 'ios' && clickable;
    this.itemStyles.forEach((value) => {
      Object.assign(childStyles, value);
    });
@@ -451,7 +458,7 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac
          ...labelColorStyles,
          ...createColorClasses(this.color, {
            item: true,
-            [theme]: true,
+            [mode]: true,
            'item-lines-default': lines === undefined,
            [`item-lines-${lines}`]: lines !== undefined,
            [`item-fill-${fillValue}`]: true,
@@ -493,7 +500,7 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac
            )}
            <div class="item-inner-highlight"></div>
          </div>
-          {canActivate && theme === 'md' && <ion-ripple-effect></ion-ripple-effect>}
+          {canActivate && mode === 'md' && <ion-ripple-effect></ion-ripple-effect>}
          <div class="item-highlight"></div>
        </TagType>
        <div class="item-bottom">
--- a/core/src/components/item/test/a11y/index.html
+++ b/core/src/components/item/test/a11y/index.html
@@ -16,19 +16,23 @@
      <h1>Item</h1>

      <ion-item>
-        <ion-input label="Item with Input" placeholder="Placeholder"></ion-input>
+        <ion-label>Item with Input</ion-label>
+        <ion-input placeholder="Placeholder"></ion-input>
      </ion-item>

      <ion-item disabled>
-        <ion-input label="Item disabled with Input" placeholder="Placeholder"></ion-input>
+        <ion-label>Item disabled with Input</ion-label>
+        <ion-input placeholder="Placeholder"></ion-input>
      </ion-item>

      <ion-item>
-        <ion-input label="Item with Input disabled" placeholder="Placeholder" disabled></ion-input>
+        <ion-label>Item with Input disabled</ion-label>
+        <ion-input placeholder="Placeholder" disabled></ion-input>
      </ion-item>

      <ion-item>
-        <ion-select label="Item with Select" label-placement="floating">
+        <ion-label position="floating">Item with Select</ion-label>
+        <ion-select>
          <ion-select-option value="">No Game Console</ion-select-option>
          <ion-select-option value="nes">NES</ion-select-option>
          <ion-select-option value="n64" selected>Nintendo64</ion-select-option>
@@ -40,7 +44,8 @@
      </ion-item>

      <ion-item disabled>
-        <ion-select label="Item disabled with Select" label-placement="floating">
+        <ion-label position="floating">Item disabled with Select</ion-label>
+        <ion-select>
          <ion-select-option value="">No Game Console</ion-select-option>
          <ion-select-option value="nes">NES</ion-select-option>
          <ion-select-option value="n64" selected>Nintendo64</ion-select-option>
@@ -52,7 +57,8 @@
      </ion-item>

      <ion-item>
-        <ion-select label="Item with Select disabled" label-placement="floating" disabled>
+        <ion-label position="floating">Item with Select disabled</ion-label>
+        <ion-select disabled>
          <ion-select-option value="">No Game Console</ion-select-option>
          <ion-select-option value="nes">NES</ion-select-option>
          <ion-select-option value="n64" selected>Nintendo64</ion-select-option>
@@ -64,27 +70,33 @@
      </ion-item>

      <ion-item>
-        <ion-toggle>Item with Toggle</ion-toggle>
+        <ion-label>Item with Toggle</ion-label>
+        <ion-toggle slot="end"></ion-toggle>
      </ion-item>

      <ion-item disabled>
-        <ion-toggle>Item disabled with Toggle</ion-toggle>
+        <ion-label>Item disabled with Toggle</ion-label>
+        <ion-toggle slot="end"></ion-toggle>
      </ion-item>

      <ion-item>
-        <ion-toggle disabled>Item with Toggle disabled</ion-toggle>
+        <ion-label>Item with Toggle disabled</ion-label>
+        <ion-toggle slot="end" disabled></ion-toggle>
      </ion-item>

      <ion-item>
-        <ion-radio value="biff">Item with Radio</ion-radio>
+        <ion-label>Item with Radio</ion-label>
+        <ion-radio slot="start" value="biff"></ion-radio>
      </ion-item>

      <ion-item disabled>
-        <ion-radio value="biff">Item disabled with Radio</ion-radio>
+        <ion-label>Item disabled with Radio</ion-label>
+        <ion-radio slot="start" value="biff"></ion-radio>
      </ion-item>

      <ion-item>
-        <ion-radio value="biff" disabled>Item with Radio disabled</ion-radio>
+        <ion-label>Item with Radio disabled</ion-label>
+        <ion-radio slot="start" value="biff" disabled></ion-radio>
      </ion-item>
    </main>
  </body>
--- a/core/src/components/item/test/basic/index.html
+++ b/core/src/components/item/test/basic/index.html
@@ -98,9 +98,8 @@
        </ion-item>

        <ion-item class="overflow-visible">
+          <ion-label position="fixed">PIN:</ion-label>
          <ion-input
-            label="PIN:"
-            label-placement="fixed"
            type="number"
            pattern="[0-9]*"
            inputmode="numeric"
--- a/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-diff-ios-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-diff-ios-ltr-Mobile-Chrome-linux.png
--- a/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-diff-ios-ltr-Mobile-Firefox-linux.png
+++ b/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-diff-ios-ltr-Mobile-Firefox-linux.png
--- a/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-diff-ios-ltr-Mobile-Safari-linux.png
+++ b/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-diff-ios-ltr-Mobile-Safari-linux.png
--- a/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-diff-ios-rtl-Mobile-Chrome-linux.png
+++ b/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-diff-ios-rtl-Mobile-Chrome-linux.png
--- a/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-diff-ios-rtl-Mobile-Firefox-linux.png
+++ b/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-diff-ios-rtl-Mobile-Firefox-linux.png
--- a/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-diff-ios-rtl-Mobile-Safari-linux.png
+++ b/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-diff-ios-rtl-Mobile-Safari-linux.png
--- a/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-diff-md-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-diff-md-ltr-Mobile-Chrome-linux.png
--- a/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-diff-md-ltr-Mobile-Firefox-linux.png
+++ b/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-diff-md-ltr-Mobile-Firefox-linux.png
--- a/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-diff-md-ltr-Mobile-Safari-linux.png
+++ b/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-diff-md-ltr-Mobile-Safari-linux.png
--- a/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-diff-md-rtl-Mobile-Chrome-linux.png
+++ b/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-diff-md-rtl-Mobile-Chrome-linux.png
--- a/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-diff-md-rtl-Mobile-Firefox-linux.png
+++ b/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-diff-md-rtl-Mobile-Firefox-linux.png
--- a/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-diff-md-rtl-Mobile-Safari-linux.png
+++ b/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-diff-md-rtl-Mobile-Safari-linux.png
--- a/core/src/components/item/test/bottom/index.html
+++ b/core/src/components/item/test/bottom/index.html
@@ -31,27 +31,32 @@
      <ion-content class="ion-padding-vertical">
        <ion-list class="basic">
          <ion-item>
-            <ion-input label="No Helper/Error" name="input" id="text"></ion-input>
+            <ion-label>No Helper/Error</ion-label>
+            <ion-input name="input" id="text"></ion-input>
          </ion-item>

          <ion-item>
-            <ion-input label="Helper and Error"></ion-input>
+            <ion-label>Helper and Error</ion-label>
+            <ion-input></ion-input>
            <ion-note slot="helper">Helper Text</ion-note>
            <ion-note slot="error">Error Text</ion-note>
          </ion-item>

          <ion-item>
-            <ion-input label="Helper Only"></ion-input>
+            <ion-label>Helper Only</ion-label>
+            <ion-input></ion-input>
            <ion-note slot="helper">Helper Text</ion-note>
          </ion-item>

          <ion-item>
-            <ion-input label="Error Only"></ion-input>
+            <ion-label>Error Only</ion-label>
+            <ion-input></ion-input>
            <ion-note slot="error">Error Text</ion-note>
          </ion-item>

          <ion-item class="custom">
-            <ion-input label="Both w/ Custom CSS"></ion-input>
+            <ion-label>Both w/ Custom CSS</ion-label>
+            <ion-input></ion-input>
            <ion-note slot="helper">Helper Text</ion-note>
            <ion-note slot="error">Error Text</ion-note>
          </ion-item>
@@ -61,14 +66,16 @@
          <ion-row>
            <ion-col>
              <ion-item fill="solid">
-                <ion-input label="Helper and Error (Fill Solid)"></ion-input>
+                <ion-label>Helper and Error (Fill Solid)</ion-label>
+                <ion-input></ion-input>
                <ion-note slot="helper">Helper Text</ion-note>
                <ion-note slot="error">Error Text</ion-note>
              </ion-item>
            </ion-col>
            <ion-col>
              <ion-item fill="outline">
-                <ion-input label="Helper and Error (Fill Outline)"></ion-input>
+                <ion-label>Helper and Error (Fill Outline)</ion-label>
+                <ion-input></ion-input>
                <ion-note slot="helper">Helper Text</ion-note>
                <ion-note slot="error">Error Text</ion-note>
              </ion-item>
@@ -77,7 +84,8 @@
          <ion-row>
            <ion-col>
              <ion-item>
-                <ion-toggle id="error-toggle" color="danger">Toggle Error</ion-toggle>
+                <ion-label>Toggle Error</ion-label>
+                <ion-toggle slot="start" id="error-toggle" color="danger"></ion-toggle>
              </ion-item>
            </ion-col>
          </ion-row>
--- a/core/src/components/item/test/counter/item.e2e.ts-snapshots/item-counter-diff-md-ltr-Mobile-Firefox-linux.png
+++ b/core/src/components/item/test/counter/item.e2e.ts-snapshots/item-counter-diff-md-ltr-Mobile-Firefox-linux.png
--- a/core/src/components/item/test/counter/item.e2e.ts-snapshots/item-counter-diff-md-rtl-Mobile-Firefox-linux.png
+++ b/core/src/components/item/test/counter/item.e2e.ts-snapshots/item-counter-diff-md-rtl-Mobile-Firefox-linux.png
--- a/core/src/components/item/test/inputs/index.html
+++ b/core/src/components/item/test/inputs/index.html
@@ -39,6 +39,18 @@
              <ion-item id="btnUndefinedValue" button="true" onclick="setUndefinedValue()">
                <ion-label>Set "undefined" values</ion-label>
              </ion-item>
+              <ion-item id="btnLabelsDefault" button="true" onclick="setLabelDefault()">
+                <ion-label>Labels: Default</ion-label>
+              </ion-item>
+              <ion-item id="btnLabelsFloating" button="true" onclick="setLabelFloating()">
+                <ion-label>Labels: Floating</ion-label>
+              </ion-item>
+              <ion-item id="btnLabelsStacked" button="true" onclick="setLabelStacked()">
+                <ion-label>Labels: Stacked</ion-label>
+              </ion-item>
+              <ion-item id="btnLabelsFixed" button="true" onclick="setLabelFixed()">
+                <ion-label>Labels: Fixed</ion-label>
+              </ion-item>
            </ion-list>
          </ion-popover>
        </ion-toolbar>
@@ -48,23 +60,28 @@
        <form onsubmit="return onSubmit(event)">
          <ion-list>
            <ion-item>
-              <ion-input label="Input" name="input" id="input" placeholder="Input"></ion-input>
+              <ion-label>Input</ion-label>
+              <ion-input name="input" id="input" placeholder="Input"></ion-input>
            </ion-item>

            <ion-item>
-              <ion-textarea label="Textarea" name="textarea" id="textarea" placeholder="Textarea"></ion-textarea>
+              <ion-label>Textarea</ion-label>
+              <ion-textarea name="textarea" id="textarea" placeholder="Textarea"></ion-textarea>
            </ion-item>

            <ion-item>
-              <ion-toggle name="toggle" id="toggle">Toggle</ion-toggle>
+              <ion-label>Toggle</ion-label>
+              <ion-toggle name="toggle" id="toggle" slot="end"></ion-toggle>
            </ion-item>

            <ion-item>
-              <ion-checkbox name="checkbox" id="checkbox">Checkbox</ion-checkbox>
+              <ion-label>Checkbox</ion-label>
+              <ion-checkbox name="checkbox" id="checkbox" slot="end"></ion-checkbox>
            </ion-item>

            <ion-item>
-              <ion-select label="Select" name="select" id="select" placeholder="Select">
+              <ion-label>Select</ion-label>
+              <ion-select name="select" id="select" placeholder="Select">
                <ion-select-option value="1">1</ion-select-option>
                <ion-select-option value="2">2</ion-select-option>
                <ion-select-option value="3">3</ion-select-option>
@@ -76,7 +93,8 @@
            </ion-item>

            <ion-item>
-              <ion-range label="Range" name="range" id="range" value="10"></ion-range>
+              <ion-label>Range</ion-label>
+              <ion-range name="range" id="range" value="10"></ion-range>
            </ion-item>
          </ion-list>

@@ -129,6 +147,28 @@
        toggle.checked = checkbox.checked = false;
      }

+      function setLabelDefault() {
+        setLabelPosition(undefined);
+      }
+
+      function setLabelFixed() {
+        setLabelPosition('fixed');
+      }
+
+      function setLabelFloating() {
+        setLabelPosition('floating');
+      }
+
+      function setLabelStacked() {
+        setLabelPosition('stacked');
+      }
+
+      function setLabelPosition(position) {
+        Array.from(document.querySelectorAll('form ion-list ion-label')).forEach(
+          (label) => (label.position = position)
+        );
+      }
+
      function getFormControls() {
        return formControlIds.reduce((acc, id) => {
          acc[id] = document.querySelector(`#${id}`);
--- a/core/src/components/item/test/inputs/item.e2e.ts-snapshots/item-inputs-disabled-ios-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/item/test/inputs/item.e2e.ts-snapshots/item-inputs-disabled-ios-ltr-Mobile-Chrome-linux.png
--- a/core/src/components/item/test/inputs/item.e2e.ts-snapshots/item-inputs-disabled-ios-ltr-Mobile-Firefox-linux.png
+++ b/core/src/components/item/test/inputs/item.e2e.ts-snapshots/item-inputs-disabled-ios-ltr-Mobile-Firefox-linux.png
--- a/core/src/components/item/test/inputs/item.e2e.ts-snapshots/item-inputs-disabled-ios-ltr-Mobile-Safari-linux.png
+++ b/core/src/components/item/test/inputs/item.e2e.ts-snapshots/item-inputs-disabled-ios-ltr-Mobile-Safari-linux.png
--- a/core/src/components/item/test/inputs/item.e2e.ts-snapshots/item-inputs-disabled-md-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/item/test/inputs/item.e2e.ts-snapshots/item-inputs-disabled-md-ltr-Mobile-Chrome-linux.png
--- a/core/src/components/item/test/inputs/item.e2e.ts-snapshots/item-inputs-disabled-md-ltr-Mobile-Firefox-linux.png
+++ b/core/src/components/item/test/inputs/item.e2e.ts-snapshots/item-inputs-disabled-md-ltr-Mobile-Firefox-linux.png
--- a/core/src/components/item/test/inputs/item.e2e.ts-snapshots/item-inputs-disabled-md-ltr-Mobile-Safari-linux.png
+++ b/core/src/components/item/test/inputs/item.e2e.ts-snapshots/item-inputs-disabled-md-ltr-Mobile-Safari-linux.png
--- a/core/src/components/item/test/inputs/item.e2e.ts-snapshots/item-inputs-ios-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/item/test/inputs/item.e2e.ts-snapshots/item-inputs-ios-ltr-Mobile-Chrome-linux.png
--- a/core/src/components/item/test/inputs/item.e2e.ts-snapshots/item-inputs-ios-ltr-Mobile-Firefox-linux.png
+++ b/core/src/components/item/test/inputs/item.e2e.ts-snapshots/item-inputs-ios-ltr-Mobile-Firefox-linux.png
--- a/core/src/components/item/test/inputs/item.e2e.ts-snapshots/item-inputs-ios-ltr-Mobile-Safari-linux.png
+++ b/core/src/components/item/test/inputs/item.e2e.ts-snapshots/item-inputs-ios-ltr-Mobile-Safari-linux.png
--- a/core/src/components/item/test/inputs/item.e2e.ts-snapshots/item-inputs-ios-rtl-Mobile-Chrome-linux.png
+++ b/core/src/components/item/test/inputs/item.e2e.ts-snapshots/item-inputs-ios-rtl-Mobile-Chrome-linux.png
--- a/core/src/components/item/test/inputs/item.e2e.ts-snapshots/item-inputs-ios-rtl-Mobile-Firefox-linux.png
+++ b/core/src/components/item/test/inputs/item.e2e.ts-snapshots/item-inputs-ios-rtl-Mobile-Firefox-linux.png
--- a/Show More
+++ b/Show More