diff --git a/.github/actions/publish-npm/action.yml b/.github/actions/publish-npm/action.yml
index 0b5e9924719..dc77edb66ae 100644
--- a/.github/actions/publish-npm/action.yml
+++ b/.github/actions/publish-npm/action.yml
@@ -22,7 +22,7 @@ runs:
   using: 'composite'
   steps:
     - name: 🟢 Configure Node for Publish
-      uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
+      uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
       with:
         node-version: ${{ inputs.node-version }}
         registry-url: 'https://registry.npmjs.org'
diff --git a/.github/ionic-issue-bot.yml b/.github/ionic-issue-bot.yml
index c1e02a5f068..d98b2a53205 100644
--- a/.github/ionic-issue-bot.yml
+++ b/.github/ionic-issue-bot.yml
@@ -40,7 +40,7 @@ comment:
 
 
         If the requested feature is something you would find useful for your applications, please react to the original post with 👍 (`+1`). If you would like to provide an additional use case for the feature, please post a comment.
-        
+
 
         The team will review this feedback and make a final decision. Any decision will be posted on this thread, but please note that we may ultimately decide not to pursue this feature.
 
@@ -83,6 +83,7 @@ stale:
   exemptLabels:
     - "good first issue"
     - "triage"
+    - "bug: external"
     - "type: bug"
     - "type: feature request"
     - "needs: investigation"
diff --git a/.github/workflows/actions/build-angular-server/action.yml b/.github/workflows/actions/build-angular-server/action.yml
index a90da3676c1..cb2b667ffaf 100644
--- a/.github/workflows/actions/build-angular-server/action.yml
+++ b/.github/workflows/actions/build-angular-server/action.yml
@@ -3,7 +3,7 @@ description: 'Build Ionic Angular Server'
 runs:
   using: 'composite'
   steps:
-    - uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
+    - uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
       with:
         node-version: 24.x
     - uses: ./.github/workflows/actions/download-archive
diff --git a/.github/workflows/actions/build-angular/action.yml b/.github/workflows/actions/build-angular/action.yml
index fc7496de421..5224f9741e0 100644
--- a/.github/workflows/actions/build-angular/action.yml
+++ b/.github/workflows/actions/build-angular/action.yml
@@ -27,6 +27,10 @@ runs:
       run: npm run build
       shell: bash
       working-directory: ./packages/angular
+    - name: Clean core package.json
+      run: git checkout ./package.json
+      shell: bash
+      working-directory: ./core
     - name: 🔍 Check Diff
       run: git diff --exit-code
       shell: bash
diff --git a/.github/workflows/actions/build-core-stencil-prerelease/action.yml b/.github/workflows/actions/build-core-stencil-prerelease/action.yml
index 1e0a667e37e..3e6e8b608a5 100644
--- a/.github/workflows/actions/build-core-stencil-prerelease/action.yml
+++ b/.github/workflows/actions/build-core-stencil-prerelease/action.yml
@@ -8,8 +8,8 @@ inputs:
 runs:
   using: 'composite'
   steps:
-    - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
-    - uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
+    - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+    - uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
       with:
         node-version: 24.x
 
@@ -29,4 +29,4 @@ runs:
       with:
         name: ionic-core
         output: core/CoreBuild.zip
-        paths: core/dist core/components core/src/foundations core/css core/hydrate core/loader core/src/components.d.ts
+        paths: core/dist core/components core/src/foundations core/css core/hydrate core/loader core/src/components.d.ts core/package.json
diff --git a/.github/workflows/actions/build-core/action.yml b/.github/workflows/actions/build-core/action.yml
index f288a390e9a..ddc9fac1e6e 100644
--- a/.github/workflows/actions/build-core/action.yml
+++ b/.github/workflows/actions/build-core/action.yml
@@ -8,8 +8,8 @@ inputs:
 runs:
   using: 'composite'
   steps:
-    - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
-    - uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
+    - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+    - uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
       with:
         node-version: 24.x
     - name: 🕸️ Install Dependencies
diff --git a/.github/workflows/actions/build-react-router/action.yml b/.github/workflows/actions/build-react-router/action.yml
index a003fd83d6c..0c46ad895e1 100644
--- a/.github/workflows/actions/build-react-router/action.yml
+++ b/.github/workflows/actions/build-react-router/action.yml
@@ -3,7 +3,7 @@ description: 'Build Ionic React Router'
 runs:
   using: 'composite'
   steps:
-    - uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
+    - uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
       with:
         node-version: 24.x
     - uses: ./.github/workflows/actions/download-archive
diff --git a/.github/workflows/actions/build-react/action.yml b/.github/workflows/actions/build-react/action.yml
index b65292f5dc7..f2adcb0788f 100644
--- a/.github/workflows/actions/build-react/action.yml
+++ b/.github/workflows/actions/build-react/action.yml
@@ -3,7 +3,7 @@ description: 'Build Ionic React'
 runs:
   using: 'composite'
   steps:
-    - uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
+    - uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
       with:
         node-version: 24.x
     - uses: ./.github/workflows/actions/download-archive
@@ -31,6 +31,10 @@ runs:
       run: npm run test.spec
       shell: bash
       working-directory: ./packages/react
+    - name: Clean core package.json
+      run: git checkout ./package.json
+      shell: bash
+      working-directory: ./core
     - name: 🔍 Check Diff
       run: git diff --exit-code
       shell: bash
diff --git a/.github/workflows/actions/build-vue-router/action.yml b/.github/workflows/actions/build-vue-router/action.yml
index b5bb65c6f89..897153c9fa4 100644
--- a/.github/workflows/actions/build-vue-router/action.yml
+++ b/.github/workflows/actions/build-vue-router/action.yml
@@ -3,7 +3,7 @@ description: 'Builds Ionic Vue Router'
 runs:
   using: 'composite'
   steps:
-    - uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
+    - uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
       with:
         node-version: 24.x
     - uses: ./.github/workflows/actions/download-archive
diff --git a/.github/workflows/actions/build-vue/action.yml b/.github/workflows/actions/build-vue/action.yml
index e660c31bbbd..72a49093fca 100644
--- a/.github/workflows/actions/build-vue/action.yml
+++ b/.github/workflows/actions/build-vue/action.yml
@@ -3,7 +3,7 @@ description: 'Build Ionic Vue'
 runs:
   using: 'composite'
   steps:
-    - uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
+    - uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
       with:
         node-version: 24.x
     - uses: ./.github/workflows/actions/download-archive
@@ -27,6 +27,10 @@ runs:
       run: npm run build
       shell: bash
       working-directory: ./packages/vue
+    - name: Clean core package.json
+      run: git checkout ./package.json
+      shell: bash
+      working-directory: ./core
     - name: 🔍 Check Diff
       run: git diff --exit-code
       shell: bash
diff --git a/.github/workflows/actions/test-angular-e2e/action.yml b/.github/workflows/actions/test-angular-e2e/action.yml
index 9c3ac716d53..c6225382658 100644
--- a/.github/workflows/actions/test-angular-e2e/action.yml
+++ b/.github/workflows/actions/test-angular-e2e/action.yml
@@ -6,7 +6,7 @@ inputs:
 runs:
   using: 'composite'
   steps:
-    - uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
+    - uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
       with:
         node-version: 24.x
     - uses: ./.github/workflows/actions/download-archive
@@ -17,7 +17,7 @@ runs:
     - uses: ./.github/workflows/actions/download-archive
       with:
         name: ionic-angular
-        path: ./angular
+        path: ./packages/angular
         filename: AngularBuild.zip
     - uses: ./.github/workflows/actions/download-archive
       with:
diff --git a/.github/workflows/actions/test-core-clean-build/action.yml b/.github/workflows/actions/test-core-clean-build/action.yml
index b69a485b33f..7e5942a036e 100644
--- a/.github/workflows/actions/test-core-clean-build/action.yml
+++ b/.github/workflows/actions/test-core-clean-build/action.yml
@@ -3,7 +3,7 @@ description: 'Test Core Clean Build'
 runs:
   using: 'composite'
   steps:
-    - uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
+    - uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
       with:
         node-version: 24.x
 
@@ -12,6 +12,10 @@ runs:
         name: ionic-core
         path: ./core
         filename: CoreBuild.zip
+    - name: Clean core package.json
+      run: git checkout ./package.json
+      shell: bash
+      working-directory: ./core
     - name: 🔍 Check Diff
       run: |
         git diff --exit-code || {
diff --git a/.github/workflows/actions/test-core-lint/action.yml b/.github/workflows/actions/test-core-lint/action.yml
index 8e81bd6a635..ef9d37d0c7d 100644
--- a/.github/workflows/actions/test-core-lint/action.yml
+++ b/.github/workflows/actions/test-core-lint/action.yml
@@ -3,13 +3,17 @@ description: 'Test Core Lint'
 runs:
   using: 'composite'
   steps:
-    - uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
+    - uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
       with:
         node-version: 24.x
     - name: 🕸️ Install Dependencies
       run: npm ci
       working-directory: ./core
       shell: bash
+    - name: Clean core package.json
+      run: git checkout ./package.json
+      shell: bash
+      working-directory: ./core
     - name: 🖌️ Lint
       run: npm run lint
       shell: bash
diff --git a/.github/workflows/actions/test-core-screenshot/action.yml b/.github/workflows/actions/test-core-screenshot/action.yml
index e3c7d8771d5..629c68d79f2 100644
--- a/.github/workflows/actions/test-core-screenshot/action.yml
+++ b/.github/workflows/actions/test-core-screenshot/action.yml
@@ -13,7 +13,7 @@ inputs:
 runs:
   using: 'composite'
   steps:
-    - uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
+    - uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
       with:
         node-version: 24.x
     - uses: ./.github/workflows/actions/download-archive
@@ -30,6 +30,10 @@ runs:
       run: npm run test.e2e.docker.ci ${{ inputs.component }} -- --shard=${{ inputs.shard }}/${{ inputs.totalShards }}
       shell: bash
       working-directory: ./core
+    - name: Clean core package.json
+      run: git checkout ./package.json
+      shell: bash
+      working-directory: ./core
     - name: Test and Update
       id: test-and-update
       if: inputs.update == 'true'
diff --git a/.github/workflows/actions/test-core-spec/action.yml b/.github/workflows/actions/test-core-spec/action.yml
index ee54ae604cf..3cbfa7aefd1 100644
--- a/.github/workflows/actions/test-core-spec/action.yml
+++ b/.github/workflows/actions/test-core-spec/action.yml
@@ -6,7 +6,7 @@ inputs:
 runs:
   using: 'composite'
   steps:
-    - uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
+    - uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
       with:
         node-version: 24.x
     - name: 🕸️ Install Dependencies
diff --git a/.github/workflows/actions/test-react-e2e/action.yml b/.github/workflows/actions/test-react-e2e/action.yml
index d27dd9f836e..18fb14c705e 100644
--- a/.github/workflows/actions/test-react-e2e/action.yml
+++ b/.github/workflows/actions/test-react-e2e/action.yml
@@ -6,7 +6,7 @@ inputs:
 runs:
   using: 'composite'
   steps:
-    - uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
+    - uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
       with:
         node-version: 24.x
     - uses: ./.github/workflows/actions/download-archive
diff --git a/.github/workflows/actions/test-react-router-e2e/action.yml b/.github/workflows/actions/test-react-router-e2e/action.yml
index b4e627ee896..3af841bf83c 100644
--- a/.github/workflows/actions/test-react-router-e2e/action.yml
+++ b/.github/workflows/actions/test-react-router-e2e/action.yml
@@ -6,7 +6,7 @@ inputs:
 runs:
   using: 'composite'
   steps:
-    - uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
+    - uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
       with:
         node-version: 24.x
     - uses: ./.github/workflows/actions/download-archive
diff --git a/.github/workflows/actions/test-vue-e2e/action.yml b/.github/workflows/actions/test-vue-e2e/action.yml
index c0adfd409b9..0c15dac0822 100644
--- a/.github/workflows/actions/test-vue-e2e/action.yml
+++ b/.github/workflows/actions/test-vue-e2e/action.yml
@@ -6,7 +6,7 @@ inputs:
 runs:
   using: 'composite'
   steps:
-    - uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
+    - uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
       with:
         node-version: 24.x
     - uses: ./.github/workflows/actions/download-archive
diff --git a/.github/workflows/actions/update-reference-screenshots/action.yml b/.github/workflows/actions/update-reference-screenshots/action.yml
index ad41d5e724d..9c082f1a17d 100644
--- a/.github/workflows/actions/update-reference-screenshots/action.yml
+++ b/.github/workflows/actions/update-reference-screenshots/action.yml
@@ -7,7 +7,7 @@ on:
 runs:
   using: 'composite'
   steps:
-    - uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
+    - uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
       with:
         node-version: 24.x
     - uses: actions/download-artifact@v7
@@ -21,6 +21,10 @@ runs:
         find . -type f -name 'UpdatedScreenshots-*.zip' -exec unzip -q -o -d ../ {} \;
       shell: bash
       working-directory: ./artifacts
+    - name: Clean core package.json
+      run: git checkout ./package.json
+      shell: bash
+      working-directory: ./core
     - name: 📸 Push Screenshots
       # Configure user as Ionitron
       # and push only the changed .png snapshots
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
index d3d52e048be..7772b2c432f 100644
--- 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@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+      - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
       - 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@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+      - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
       - uses: ./.github/workflows/actions/test-core-clean-build
 
   test-core-lint:
     needs: [build-core]
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+      - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
       - uses: ./.github/workflows/actions/test-core-lint
 
   test-core-spec:
     needs: [build-core]
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+      - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
       - 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@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+      - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
       - 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@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+    - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
     - uses: ./.github/workflows/actions/build-vue
 
   build-vue-router:
     needs: [build-vue]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+    - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
     - 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@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+    - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
     - 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@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+    - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
     - uses: ./.github/workflows/actions/build-angular
 
   build-angular-server:
     needs: [build-core]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+    - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
     - 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@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+    - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
     - 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@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+    - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
     - uses: ./.github/workflows/actions/build-react
 
   build-react-router:
     needs: [build-react]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+    - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
     - 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@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+    - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
     - 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@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+    - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
     - uses: ./.github/workflows/actions/test-react-e2e
       with:
         app: ${{ matrix.apps }}
diff --git a/.github/workflows/codeql-analysis.yml b/.github/workflows/codeql-analysis.yml
index 2844a4f9b01..5e6715d02b1 100644
--- 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@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+      - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
       - uses: github/codeql-action/init@v4
         with:
           languages: javascript
diff --git a/.github/workflows/dev-build.yml b/.github/workflows/dev-build.yml
index 2c459097e67..51806128a8e 100644
--- a/.github/workflows/dev-build.yml
+++ b/.github/workflows/dev-build.yml
@@ -13,7 +13,7 @@ jobs:
     outputs:
       dev-hash: ${{ steps.create-dev-hash.outputs.DEV_HASH }}
     steps:
-      - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+      - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
       # 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
diff --git a/.github/workflows/nightly.yml b/.github/workflows/nightly.yml
index dc2fa5860a9..2f64d9f9bd5 100644
--- a/.github/workflows/nightly.yml
+++ b/.github/workflows/nightly.yml
@@ -13,7 +13,7 @@ jobs:
     outputs:
       nightly-hash: ${{ steps.create-nightly-hash.outputs.NIGHTLY_HASH }}
     steps:
-      - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+      - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
       # 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
diff --git a/.github/workflows/release-ionic.yml b/.github/workflows/release-ionic.yml
index c3f9e5740b6..70f1fb1956b 100644
--- a/.github/workflows/release-ionic.yml
+++ b/.github/workflows/release-ionic.yml
@@ -23,7 +23,7 @@ jobs:
   release-core:
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+    - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
     - uses: ./.github/actions/publish-npm
       with:
         scope: '@ionic/core'
@@ -48,7 +48,7 @@ jobs:
     needs: [release-core]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+    - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
     - name: Restore @ionic/docs built cache
       uses: ./.github/workflows/actions/download-archive
       with:
@@ -67,7 +67,7 @@ jobs:
     needs: [release-core]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+    - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
     - name: Restore @ionic/core built cache
       uses: ./.github/workflows/actions/download-archive
       with:
@@ -93,7 +93,7 @@ jobs:
     needs: [release-core]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+    - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
     - name: Restore @ionic/core built cache
       uses: ./.github/workflows/actions/download-archive
       with:
@@ -118,7 +118,7 @@ jobs:
     needs: [release-core]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+    - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
     - name: Restore @ionic/core built cache
       uses: ./.github/workflows/actions/download-archive
       with:
@@ -143,7 +143,7 @@ jobs:
     needs: [release-core]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+    - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
     - name: Restore @ionic/core built cache
       uses: ./.github/workflows/actions/download-archive
       with:
@@ -163,7 +163,7 @@ jobs:
     needs: [release-react]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+    - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
     - name: Restore @ionic/core built cache
       uses: ./.github/workflows/actions/download-archive
       with:
@@ -188,7 +188,7 @@ jobs:
     needs: [release-vue]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+    - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
     - name: Restore @ionic/core built cache
       uses: ./.github/workflows/actions/download-archive
       with:
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
index a3bb4491cf5..df4429a806b 100644
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -58,7 +58,7 @@ jobs:
       contents: write
       id-token: write
     steps:
-    - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+    - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
       with:
         token: ${{ secrets.IONITRON_TOKEN }}
         fetch-depth: 0
@@ -89,7 +89,7 @@ jobs:
       contents: write
       id-token: write
     steps:
-      - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+      - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
         # Pull the latest version of the reference
         # branch instead of the revision that triggered
         # the workflow otherwise we won't get the commit
diff --git a/.github/workflows/stencil-nightly.yml b/.github/workflows/stencil-nightly.yml
index b00ac8c42a0..3e8d714ccc1 100644
--- 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@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+      - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
       - 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@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+      - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
       - 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@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+      - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
       - uses: ./.github/workflows/actions/test-core-lint
 
   test-core-spec:
     needs: [build-core-with-stencil-nightly]
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+      - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
       - 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@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+      - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
       - 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@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+    - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
     - uses: ./.github/workflows/actions/build-vue
 
   build-vue-router:
     needs: [build-vue]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+    - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
     - 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@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+    - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
     - uses: ./.github/workflows/actions/test-vue-e2e
       with:
         app: ${{ matrix.apps }}
@@ -136,14 +136,14 @@ jobs:
     needs: [build-core-with-stencil-nightly]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+    - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
     - uses: ./.github/workflows/actions/build-angular
 
   build-angular-server:
     needs: [build-core-with-stencil-nightly]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+    - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
     - uses: ./.github/workflows/actions/build-angular-server
 
   test-angular-e2e:
@@ -154,7 +154,7 @@ jobs:
     needs: [build-angular, build-angular-server]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+    - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
     - 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@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+    - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
     - uses: ./.github/workflows/actions/build-react
 
   build-react-router:
     needs: [build-react]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+    - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
     - 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@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+    - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
     - 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@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+    - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
     - uses: ./.github/workflows/actions/test-react-e2e
       with:
         app: ${{ matrix.apps }}
diff --git a/.github/workflows/update-screenshots.yml b/.github/workflows/update-screenshots.yml
index eefcddcb893..6efecbd8f95 100644
--- a/.github/workflows/update-screenshots.yml
+++ b/.github/workflows/update-screenshots.yml
@@ -26,7 +26,7 @@ jobs:
   build-core:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+      - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
       - uses: ./.github/workflows/actions/build-core
 
   test-core-screenshot:
@@ -47,7 +47,7 @@ jobs:
     needs: [build-core]
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+      - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
       - uses: ./.github/workflows/actions/test-core-screenshot
         with:
           shard: ${{ matrix.shard }}
@@ -59,7 +59,7 @@ jobs:
     runs-on: ubuntu-latest
     needs: [test-core-screenshot]
     steps:
-      - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+      - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
         # Normally, we could just push with the
         # default GITHUB_TOKEN, but that will
         # not cause the build workflow
diff --git a/CHANGELOG.md b/CHANGELOG.md
index cf58db4c907..30f47df889d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,72 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.8.0](https://github.com/ionic-team/ionic-framework/compare/v8.7.18...v8.8.0) (2026-03-04)
+
+
+### Features
+
+* **angular:** add custom injector support for modal and popover controllers ([#30899](https://github.com/ionic-team/ionic-framework/issues/30899)) ([822da42](https://github.com/ionic-team/ionic-framework/commit/822da428af86cd9b036b81515272321eb8fa586c)), closes [#30638](https://github.com/ionic-team/ionic-framework/issues/30638)
+* **content:** add content-fullscreen class when fullscreen is true ([#30926](https://github.com/ionic-team/ionic-framework/issues/30926)) ([d74b11b](https://github.com/ionic-team/ionic-framework/commit/d74b11bc19d6268b256daf23ba6f107483c00320))
+* **datetime:** add header parts ([#30945](https://github.com/ionic-team/ionic-framework/issues/30945)) ([6ea186d](https://github.com/ionic-team/ionic-framework/commit/6ea186d96d80a94b774d4d0a51d536e0e5599935))
+* **datetime:** add wheel part to ion-picker-column ([#30934](https://github.com/ionic-team/ionic-framework/issues/30934)) ([0cf4c03](https://github.com/ionic-team/ionic-framework/commit/0cf4c03e298bb4f7eea71c966a1473765ebd6d7a))
+* **item-divider:** add inner and container parts ([#30928](https://github.com/ionic-team/ionic-framework/issues/30928)) ([5cdeb7f](https://github.com/ionic-team/ionic-framework/commit/5cdeb7fd357298f15e7ae29b14412d97bdc7c656))
+* **item-option:** add inner and container parts ([#30929](https://github.com/ionic-team/ionic-framework/issues/30929)) ([f8f7ffd](https://github.com/ionic-team/ionic-framework/commit/f8f7ffda318c0143d9bb5c79fe55b4ecb88e6ce3))
+* **item:** add inner and container parts ([#30927](https://github.com/ionic-team/ionic-framework/issues/30927)) ([a2c6559](https://github.com/ionic-team/ionic-framework/commit/a2c655923bb1cff51864949575e19028623c695d))
+* **list-header:** add inner part ([#30930](https://github.com/ionic-team/ionic-framework/issues/30930)) ([ef73476](https://github.com/ionic-team/ionic-framework/commit/ef73476e08670630907e775a38f9ed30a84e3f1f))
+* **modal:** add drag events for sheet and card modals ([#30962](https://github.com/ionic-team/ionic-framework/issues/30962)) ([d29ac71](https://github.com/ionic-team/ionic-framework/commit/d29ac713fad604c256fb385eb0c26eb9717e1ff4))
+* **range:** add classes and expose parts to allow individual styling of dual knobs ([#30941](https://github.com/ionic-team/ionic-framework/issues/30941)) ([5bcf921](https://github.com/ionic-team/ionic-framework/commit/5bcf92184118055483bf306ab9e319b8e3e61870)), closes [#29862](https://github.com/ionic-team/ionic-framework/issues/29862)
+* **range:** add classes to the range when the value is at the min or max ([#30932](https://github.com/ionic-team/ionic-framework/issues/30932)) ([fac1a66](https://github.com/ionic-team/ionic-framework/commit/fac1a6673c88a531f1d79656be4eb544f235f819))
+* **refresher:** add ionPullStart and ionPullEnd events ([#30946](https://github.com/ionic-team/ionic-framework/issues/30946)) ([814c2e5](https://github.com/ionic-team/ionic-framework/commit/814c2e5ccd6d5bfda12bdf13a566cd66ff830d5b)), closes [#24524](https://github.com/ionic-team/ionic-framework/issues/24524)
+* **segment-view:** add swipeGesture property to disable swiping ([#30948](https://github.com/ionic-team/ionic-framework/issues/30948)) ([46806bd](https://github.com/ionic-team/ionic-framework/commit/46806bd6e2af90a0b31fca68f508c06d3d281ec0)), closes [#30290](https://github.com/ionic-team/ionic-framework/issues/30290)
+* **select:** add wrapper and bottom shadow parts ([#30951](https://github.com/ionic-team/ionic-framework/issues/30951)) ([5cea5ae](https://github.com/ionic-team/ionic-framework/commit/5cea5aeb44393edab7064e5980a1eb7e607d1b8d))
+* **select:** pass cancelText property to modal interface ([#30282](https://github.com/ionic-team/ionic-framework/issues/30282)) ([6e4f60a](https://github.com/ionic-team/ionic-framework/commit/6e4f60af4c188ae04028b444aa21118ae27c2ca7))
+* **textarea:** reflect disabled and readonly props ([#30910](https://github.com/ionic-team/ionic-framework/issues/30910)) ([55735df](https://github.com/ionic-team/ionic-framework/commit/55735df3fa62c8e259c56db3169f3d5459e71c0c))
+
+
+
+
+
+## [8.7.18](https://github.com/ionic-team/ionic-framework/compare/v8.7.17...v8.7.18) (2026-02-25)
+
+
+### Bug Fixes
+
+* **datetime:** stretch ion-buttons to fill space for ios ([#30963](https://github.com/ionic-team/ionic-framework/issues/30963)) ([d46b0b1](https://github.com/ionic-team/ionic-framework/commit/d46b0b15f6a652da6f863cf303e7ce06cfc820a8))
+* **many:** clear timeouts ([#30851](https://github.com/ionic-team/ionic-framework/issues/30851)) ([70b1237](https://github.com/ionic-team/ionic-framework/commit/70b1237823dd0cdab852486a6b2cbbfe0d0aaae9)), closes [#30860](https://github.com/ionic-team/ionic-framework/issues/30860)
+* **modal, popover:** respect safe area insets on popovers and modals ([#30949](https://github.com/ionic-team/ionic-framework/issues/30949)) ([6490797](https://github.com/ionic-team/ionic-framework/commit/6490797851cede3bfda893a19b10f165259ec988)), closes [#28411](https://github.com/ionic-team/ionic-framework/issues/28411)
+* **nav-controller:** reset direction state when navigation is canceled ([#30955](https://github.com/ionic-team/ionic-framework/issues/30955)) ([53172d1](https://github.com/ionic-team/ionic-framework/commit/53172d1a4035d5b510c230553aabd53dc1389e4b))
+* **radio-group:** prevent DOMException and NotFoundError when filtering radios ([#30958](https://github.com/ionic-team/ionic-framework/issues/30958)) ([682a17e](https://github.com/ionic-team/ionic-framework/commit/682a17ebb754da7714989623cf84b75e715e20e1)), closes [#30279](https://github.com/ionic-team/ionic-framework/issues/30279) [#30359](https://github.com/ionic-team/ionic-framework/issues/30359)
+* **toast:** keep icon on the same line as long message in stacked layout ([#30923](https://github.com/ionic-team/ionic-framework/issues/30923)) ([442e3e9](https://github.com/ionic-team/ionic-framework/commit/442e3e983107a69cea4fb5587fb33da718eee8a3)), closes [#30908](https://github.com/ionic-team/ionic-framework/issues/30908)
+
+
+
+
+
+## [8.7.17](https://github.com/ionic-team/ionic-framework/compare/v8.7.15...v8.7.17) (2026-01-14)
+
+
+### Bug Fixes
+
+* **input:** prevent Android TalkBack from focusing label separately ([#30895](https://github.com/ionic-team/ionic-framework/issues/30895)) ([ab733b7](https://github.com/ionic-team/ionic-framework/commit/ab733b71dd355d9486757f219fe09acaefeeefcc))
+* **input:** prevent placeholder from overlapping start slot during scroll assist ([#30896](https://github.com/ionic-team/ionic-framework/issues/30896)) ([3b3318d](https://github.com/ionic-team/ionic-framework/commit/3b3318da513b199128f3822bd8226797cd118b0f))
+* **tab-bar:** prevent keyboard controller memory leak on rapid mount/unmount ([#30906](https://github.com/ionic-team/ionic-framework/issues/30906)) ([f99d000](https://github.com/ionic-team/ionic-framework/commit/f99d0007a8ffc9c7d3d2636e912c37c12112b21d))
+
+
+
+
+
+## [8.7.16](https://github.com/ionic-team/ionic-framework/compare/v8.7.15...v8.7.16) (2025-12-31)
+
+
+### Bug Fixes
+
+* **modal:** prevent card modal animation on viewport resize when modal is closed ([#30894](https://github.com/ionic-team/ionic-framework/issues/30894)) ([e5634d4](https://github.com/ionic-team/ionic-framework/commit/e5634d45ee5fd32715f6e6b75e0448f74ee1f8f2)), closes [#30679](https://github.com/ionic-team/ionic-framework/issues/30679)
+
+
+
+
+
 ## [8.7.15](https://github.com/ionic-team/ionic-framework/compare/v8.7.14...v8.7.15) (2025-12-23)
 
 
diff --git a/core/CHANGELOG.md b/core/CHANGELOG.md
index b0bbcba688b..4e10cd06cce 100644
--- a/core/CHANGELOG.md
+++ b/core/CHANGELOG.md
@@ -3,6 +3,70 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.8.0](https://github.com/ionic-team/ionic-framework/compare/v8.7.18...v8.8.0) (2026-03-04)
+
+
+### Features
+
+* **content:** add content-fullscreen class when fullscreen is true ([#30926](https://github.com/ionic-team/ionic-framework/issues/30926)) ([d74b11b](https://github.com/ionic-team/ionic-framework/commit/d74b11bc19d6268b256daf23ba6f107483c00320))
+* **datetime:** add header parts ([#30945](https://github.com/ionic-team/ionic-framework/issues/30945)) ([6ea186d](https://github.com/ionic-team/ionic-framework/commit/6ea186d96d80a94b774d4d0a51d536e0e5599935))
+* **datetime:** add wheel part to ion-picker-column ([#30934](https://github.com/ionic-team/ionic-framework/issues/30934)) ([0cf4c03](https://github.com/ionic-team/ionic-framework/commit/0cf4c03e298bb4f7eea71c966a1473765ebd6d7a))
+* **item-divider:** add inner and container parts ([#30928](https://github.com/ionic-team/ionic-framework/issues/30928)) ([5cdeb7f](https://github.com/ionic-team/ionic-framework/commit/5cdeb7fd357298f15e7ae29b14412d97bdc7c656))
+* **item-option:** add inner and container parts ([#30929](https://github.com/ionic-team/ionic-framework/issues/30929)) ([f8f7ffd](https://github.com/ionic-team/ionic-framework/commit/f8f7ffda318c0143d9bb5c79fe55b4ecb88e6ce3))
+* **item:** add inner and container parts ([#30927](https://github.com/ionic-team/ionic-framework/issues/30927)) ([a2c6559](https://github.com/ionic-team/ionic-framework/commit/a2c655923bb1cff51864949575e19028623c695d))
+* **list-header:** add inner part ([#30930](https://github.com/ionic-team/ionic-framework/issues/30930)) ([ef73476](https://github.com/ionic-team/ionic-framework/commit/ef73476e08670630907e775a38f9ed30a84e3f1f))
+* **modal:** add drag events for sheet and card modals ([#30962](https://github.com/ionic-team/ionic-framework/issues/30962)) ([d29ac71](https://github.com/ionic-team/ionic-framework/commit/d29ac713fad604c256fb385eb0c26eb9717e1ff4))
+* **range:** add classes and expose parts to allow individual styling of dual knobs ([#30941](https://github.com/ionic-team/ionic-framework/issues/30941)) ([5bcf921](https://github.com/ionic-team/ionic-framework/commit/5bcf92184118055483bf306ab9e319b8e3e61870)), closes [#29862](https://github.com/ionic-team/ionic-framework/issues/29862)
+* **range:** add classes to the range when the value is at the min or max ([#30932](https://github.com/ionic-team/ionic-framework/issues/30932)) ([fac1a66](https://github.com/ionic-team/ionic-framework/commit/fac1a6673c88a531f1d79656be4eb544f235f819))
+* **refresher:** add ionPullStart and ionPullEnd events ([#30946](https://github.com/ionic-team/ionic-framework/issues/30946)) ([814c2e5](https://github.com/ionic-team/ionic-framework/commit/814c2e5ccd6d5bfda12bdf13a566cd66ff830d5b)), closes [#24524](https://github.com/ionic-team/ionic-framework/issues/24524)
+* **segment-view:** add swipeGesture property to disable swiping ([#30948](https://github.com/ionic-team/ionic-framework/issues/30948)) ([46806bd](https://github.com/ionic-team/ionic-framework/commit/46806bd6e2af90a0b31fca68f508c06d3d281ec0)), closes [#30290](https://github.com/ionic-team/ionic-framework/issues/30290)
+* **select:** add wrapper and bottom shadow parts ([#30951](https://github.com/ionic-team/ionic-framework/issues/30951)) ([5cea5ae](https://github.com/ionic-team/ionic-framework/commit/5cea5aeb44393edab7064e5980a1eb7e607d1b8d))
+* **select:** pass cancelText property to modal interface ([#30282](https://github.com/ionic-team/ionic-framework/issues/30282)) ([6e4f60a](https://github.com/ionic-team/ionic-framework/commit/6e4f60af4c188ae04028b444aa21118ae27c2ca7))
+* **textarea:** reflect disabled and readonly props ([#30910](https://github.com/ionic-team/ionic-framework/issues/30910)) ([55735df](https://github.com/ionic-team/ionic-framework/commit/55735df3fa62c8e259c56db3169f3d5459e71c0c))
+
+
+
+
+
+## [8.7.18](https://github.com/ionic-team/ionic-framework/compare/v8.7.17...v8.7.18) (2026-02-25)
+
+
+### Bug Fixes
+
+* **datetime:** stretch ion-buttons to fill space for ios ([#30963](https://github.com/ionic-team/ionic-framework/issues/30963)) ([d46b0b1](https://github.com/ionic-team/ionic-framework/commit/d46b0b15f6a652da6f863cf303e7ce06cfc820a8))
+* **many:** clear timeouts ([#30851](https://github.com/ionic-team/ionic-framework/issues/30851)) ([70b1237](https://github.com/ionic-team/ionic-framework/commit/70b1237823dd0cdab852486a6b2cbbfe0d0aaae9)), closes [#30860](https://github.com/ionic-team/ionic-framework/issues/30860)
+* **modal, popover:** respect safe area insets on popovers and modals ([#30949](https://github.com/ionic-team/ionic-framework/issues/30949)) ([6490797](https://github.com/ionic-team/ionic-framework/commit/6490797851cede3bfda893a19b10f165259ec988)), closes [#28411](https://github.com/ionic-team/ionic-framework/issues/28411)
+* **radio-group:** prevent DOMException and NotFoundError when filtering radios ([#30958](https://github.com/ionic-team/ionic-framework/issues/30958)) ([682a17e](https://github.com/ionic-team/ionic-framework/commit/682a17ebb754da7714989623cf84b75e715e20e1)), closes [#30279](https://github.com/ionic-team/ionic-framework/issues/30279) [#30359](https://github.com/ionic-team/ionic-framework/issues/30359)
+* **toast:** keep icon on the same line as long message in stacked layout ([#30923](https://github.com/ionic-team/ionic-framework/issues/30923)) ([442e3e9](https://github.com/ionic-team/ionic-framework/commit/442e3e983107a69cea4fb5587fb33da718eee8a3)), closes [#30908](https://github.com/ionic-team/ionic-framework/issues/30908)
+
+
+
+
+
+## [8.7.17](https://github.com/ionic-team/ionic-framework/compare/v8.7.15...v8.7.17) (2026-01-14)
+
+
+### Bug Fixes
+
+* **input:** prevent Android TalkBack from focusing label separately ([#30895](https://github.com/ionic-team/ionic-framework/issues/30895)) ([ab733b7](https://github.com/ionic-team/ionic-framework/commit/ab733b71dd355d9486757f219fe09acaefeeefcc))
+* **input:** prevent placeholder from overlapping start slot during scroll assist ([#30896](https://github.com/ionic-team/ionic-framework/issues/30896)) ([3b3318d](https://github.com/ionic-team/ionic-framework/commit/3b3318da513b199128f3822bd8226797cd118b0f))
+* **tab-bar:** prevent keyboard controller memory leak on rapid mount/unmount ([#30906](https://github.com/ionic-team/ionic-framework/issues/30906)) ([f99d000](https://github.com/ionic-team/ionic-framework/commit/f99d0007a8ffc9c7d3d2636e912c37c12112b21d))
+
+
+
+
+
+## [8.7.16](https://github.com/ionic-team/ionic-framework/compare/v8.7.15...v8.7.16) (2025-12-31)
+
+
+### Bug Fixes
+
+* **modal:** prevent card modal animation on viewport resize when modal is closed ([#30894](https://github.com/ionic-team/ionic-framework/issues/30894)) ([e5634d4](https://github.com/ionic-team/ionic-framework/commit/e5634d45ee5fd32715f6e6b75e0448f74ee1f8f2)), closes [#30679](https://github.com/ionic-team/ionic-framework/issues/30679)
+
+
+
+
+
 ## [8.7.15](https://github.com/ionic-team/ionic-framework/compare/v8.7.14...v8.7.15) (2025-12-23)
 
 
diff --git a/core/api.txt b/core/api.txt
index f069c6e3f96..03f02fade7e 100644
--- a/core/api.txt
+++ b/core/api.txt
@@ -746,9 +746,18 @@ ion-datetime,part,calendar-day
 ion-datetime,part,calendar-day active
 ion-datetime,part,calendar-day disabled
 ion-datetime,part,calendar-day today
+ion-datetime,part,calendar-days-of-week
+ion-datetime,part,calendar-header
+ion-datetime,part,datetime-header
+ion-datetime,part,datetime-selected-date
+ion-datetime,part,datetime-title
 ion-datetime,part,month-year-button
+ion-datetime,part,navigation-button
+ion-datetime,part,next-button
+ion-datetime,part,previous-button
 ion-datetime,part,time-button
 ion-datetime,part,time-button active
+ion-datetime,part,wheel
 ion-datetime,part,wheel-item
 ion-datetime,part,wheel-item active
 
@@ -940,7 +949,7 @@ ion-infinite-scroll-content,prop,theme,"ios" | "md" | "ionic",undefined,false,fa
 
 ion-input,scoped
 ion-input,prop,autocapitalize,string,'off',false,false
-ion-input,prop,autocomplete,"name" | "url" | "off" | "on" | "additional-name" | "address-level1" | "address-level2" | "address-level3" | "address-level4" | "address-line1" | "address-line2" | "address-line3" | "bday-day" | "bday-month" | "bday-year" | "cc-csc" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-family-name" | "cc-given-name" | "cc-name" | "cc-number" | "cc-type" | "country" | "country-name" | "current-password" | "family-name" | "given-name" | "honorific-prefix" | "honorific-suffix" | "new-password" | "one-time-code" | "organization" | "postal-code" | "street-address" | "transaction-amount" | "transaction-currency" | "username" | "email" | "tel" | "tel-area-code" | "tel-country-code" | "tel-extension" | "tel-local" | "tel-national" | "nickname" | "organization-title" | "cc-additional-name" | "language" | "bday" | "sex" | "impp" | "photo",'off',false,false
+ion-input,prop,autocomplete,"additional-name" | "address-level1" | "address-level2" | "address-level3" | "address-level4" | "address-line1" | "address-line2" | "address-line3" | "bday" | "bday-day" | "bday-month" | "bday-year" | "cc-additional-name" | "cc-csc" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-family-name" | "cc-given-name" | "cc-name" | "cc-number" | "cc-type" | "country" | "country-name" | "current-password" | "email" | "family-name" | "given-name" | "honorific-prefix" | "honorific-suffix" | "impp" | "language" | "name" | "new-password" | "nickname" | "off" | "on" | "one-time-code" | "organization" | "organization-title" | "photo" | "postal-code" | "sex" | "street-address" | "tel" | "tel-area-code" | "tel-country-code" | "tel-extension" | "tel-local" | "tel-national" | "transaction-amount" | "transaction-currency" | "url" | "username",'off',false,false
 ion-input,prop,autocorrect,"off" | "on",'off',false,false
 ion-input,prop,autofocus,boolean,false,false,false
 ion-input,prop,clearInput,boolean,false,false,false
@@ -1250,7 +1259,9 @@ ion-item,css-prop,--ripple-color,md
 ion-item,css-prop,--transition,ionic
 ion-item,css-prop,--transition,ios
 ion-item,css-prop,--transition,md
+ion-item,part,container
 ion-item,part,detail-icon
+ion-item,part,inner
 ion-item,part,native
 
 ion-item-divider,shadow
@@ -1288,6 +1299,8 @@ ion-item-divider,css-prop,--padding-start,md
 ion-item-divider,css-prop,--padding-top,ionic
 ion-item-divider,css-prop,--padding-top,ios
 ion-item-divider,css-prop,--padding-top,md
+ion-item-divider,part,container
+ion-item-divider,part,inner
 
 ion-item-group,none
 ion-item-group,prop,mode,"ios" | "md",undefined,false,false
@@ -1312,6 +1325,8 @@ ion-item-option,css-prop,--background,md
 ion-item-option,css-prop,--color,ionic
 ion-item-option,css-prop,--color,ios
 ion-item-option,css-prop,--color,md
+ion-item-option,part,container
+ion-item-option,part,inner
 ion-item-option,part,native
 
 ion-item-options,none
@@ -1371,6 +1386,7 @@ ion-list-header,css-prop,--color,md
 ion-list-header,css-prop,--inner-border-width,ionic
 ion-list-header,css-prop,--inner-border-width,ios
 ion-list-header,css-prop,--inner-border-width,md
+ion-list-header,part,inner
 
 ion-loading,scoped
 ion-loading,prop,animated,boolean,true,false,false
@@ -1561,6 +1577,9 @@ ion-modal,method,setCurrentBreakpoint,setCurrentBreakpoint(breakpoint: number) =
 ion-modal,event,didDismiss,OverlayEventDetail<any>,true
 ion-modal,event,didPresent,void,true
 ion-modal,event,ionBreakpointDidChange,ModalBreakpointChangeEventDetail,true
+ion-modal,event,ionDragEnd,ModalDragEventDetail,true
+ion-modal,event,ionDragMove,ModalDragEventDetail,true
+ion-modal,event,ionDragStart,void,true
 ion-modal,event,ionModalDidDismiss,OverlayEventDetail<any>,true
 ion-modal,event,ionModalDidPresent,void,true
 ion-modal,event,ionModalWillDismiss,OverlayEventDetail<any>,true
@@ -1612,7 +1631,7 @@ ion-nav,prop,animated,boolean,true,false,false
 ion-nav,prop,animation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
 ion-nav,prop,mode,"ios" | "md",undefined,false,false
 ion-nav,prop,root,Function | HTMLElement | ViewController | null | string | undefined,undefined,false,false
-ion-nav,prop,rootParams,undefined | { [key: string]: any; },undefined,false,false
+ion-nav,prop,rootParams,T | undefined,undefined,false,false
 ion-nav,prop,swipeGesture,boolean | undefined,undefined,false,false
 ion-nav,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-nav,method,canGoBack,canGoBack(view?: ViewController) => Promise<boolean>
@@ -1634,7 +1653,7 @@ ion-nav,event,ionNavWillChange,void,false
 
 ion-nav-link,none
 ion-nav-link,prop,component,Function | HTMLElement | ViewController | null | string | undefined,undefined,false,false
-ion-nav-link,prop,componentProps,undefined | { [key: string]: any; },undefined,false,false
+ion-nav-link,prop,componentProps,T | undefined,undefined,false,false
 ion-nav-link,prop,mode,"ios" | "md",undefined,false,false
 ion-nav-link,prop,routerAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
 ion-nav-link,prop,routerDirection,"back" | "forward" | "root",'forward',false,false
@@ -1739,7 +1758,7 @@ ion-popover,prop,animated,boolean,true,false,false
 ion-popover,prop,arrow,boolean,true,false,false
 ion-popover,prop,backdropDismiss,boolean,true,false,false
 ion-popover,prop,component,Function | HTMLElement | null | string | undefined,undefined,false,false
-ion-popover,prop,componentProps,undefined | { [key: string]: any; },undefined,false,false
+ion-popover,prop,componentProps,T | undefined,undefined,false,false
 ion-popover,prop,dismissOnSelect,boolean,false,false,false
 ion-popover,prop,enterAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
 ion-popover,prop,event,any,undefined,false,false
@@ -1924,11 +1943,28 @@ ion-range,css-prop,--pin-background,md
 ion-range,css-prop,--pin-color,ionic
 ion-range,css-prop,--pin-color,ios
 ion-range,css-prop,--pin-color,md
+ion-range,part,activated
 ion-range,part,bar
 ion-range,part,bar-active
+ion-range,part,focused
+ion-range,part,hover
 ion-range,part,knob
+ion-range,part,knob-a
+ion-range,part,knob-b
+ion-range,part,knob-handle
+ion-range,part,knob-handle-a
+ion-range,part,knob-handle-b
+ion-range,part,knob-handle-lower
+ion-range,part,knob-handle-upper
+ion-range,part,knob-lower
+ion-range,part,knob-upper
 ion-range,part,label
 ion-range,part,pin
+ion-range,part,pin-a
+ion-range,part,pin-b
+ion-range,part,pin-lower
+ion-range,part,pin-upper
+ion-range,part,pressed
 ion-range,part,tick
 ion-range,part,tick-active
 
@@ -1945,6 +1981,8 @@ ion-refresher,method,cancel,cancel() => Promise<void>
 ion-refresher,method,complete,complete() => Promise<void>
 ion-refresher,method,getProgress,getProgress() => Promise<number>
 ion-refresher,event,ionPull,void,true
+ion-refresher,event,ionPullEnd,RefresherPullEndEventDetail,true
+ion-refresher,event,ionPullStart,void,true
 ion-refresher,event,ionRefresh,RefresherEventDetail,true
 ion-refresher,event,ionStart,void,true
 
@@ -2028,7 +2066,7 @@ ion-row,css-prop,--ion-grid-gap
 ion-searchbar,scoped
 ion-searchbar,prop,animated,boolean,false,false,false
 ion-searchbar,prop,autocapitalize,string,'off',false,false
-ion-searchbar,prop,autocomplete,"name" | "url" | "off" | "on" | "additional-name" | "address-level1" | "address-level2" | "address-level3" | "address-level4" | "address-line1" | "address-line2" | "address-line3" | "bday-day" | "bday-month" | "bday-year" | "cc-csc" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-family-name" | "cc-given-name" | "cc-name" | "cc-number" | "cc-type" | "country" | "country-name" | "current-password" | "family-name" | "given-name" | "honorific-prefix" | "honorific-suffix" | "new-password" | "one-time-code" | "organization" | "postal-code" | "street-address" | "transaction-amount" | "transaction-currency" | "username" | "email" | "tel" | "tel-area-code" | "tel-country-code" | "tel-extension" | "tel-local" | "tel-national" | "nickname" | "organization-title" | "cc-additional-name" | "language" | "bday" | "sex" | "impp" | "photo",'off',false,false
+ion-searchbar,prop,autocomplete,"additional-name" | "address-level1" | "address-level2" | "address-level3" | "address-level4" | "address-line1" | "address-line2" | "address-line3" | "bday" | "bday-day" | "bday-month" | "bday-year" | "cc-additional-name" | "cc-csc" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-family-name" | "cc-given-name" | "cc-name" | "cc-number" | "cc-type" | "country" | "country-name" | "current-password" | "email" | "family-name" | "given-name" | "honorific-prefix" | "honorific-suffix" | "impp" | "language" | "name" | "new-password" | "nickname" | "off" | "on" | "one-time-code" | "organization" | "organization-title" | "photo" | "postal-code" | "sex" | "street-address" | "tel" | "tel-area-code" | "tel-country-code" | "tel-extension" | "tel-local" | "tel-national" | "transaction-amount" | "transaction-currency" | "url" | "username",'off',false,false
 ion-searchbar,prop,autocorrect,"off" | "on",'off',false,false
 ion-searchbar,prop,cancelButtonIcon,string | undefined,undefined,false,false
 ion-searchbar,prop,cancelButtonText,string,'Cancel',false,false
@@ -2205,6 +2243,7 @@ ion-segment-content,shadow
 
 ion-segment-view,shadow
 ion-segment-view,prop,disabled,boolean,false,false,false
+ion-segment-view,prop,swipeGesture,boolean,true,false,false
 ion-segment-view,event,ionSegmentViewScroll,SegmentViewScrollEvent,true
 
 ion-select,shadow
@@ -2287,16 +2326,20 @@ ion-select,css-prop,--placeholder-opacity,md
 ion-select,css-prop,--ripple-color,ionic
 ion-select,css-prop,--ripple-color,ios
 ion-select,css-prop,--ripple-color,md
+ion-select,part,bottom
 ion-select,part,container
 ion-select,part,error-text
 ion-select,part,helper-text
 ion-select,part,icon
+ion-select,part,inner
 ion-select,part,label
 ion-select,part,placeholder
 ion-select,part,supporting-text
 ion-select,part,text
+ion-select,part,wrapper
 
 ion-select-modal,scoped
+ion-select-modal,prop,cancelText,string,'Close',false,false
 ion-select-modal,prop,header,string | undefined,undefined,false,false
 ion-select-modal,prop,multiple,boolean | undefined,undefined,false,false
 ion-select-modal,prop,options,SelectModalOption[],[],false,false
@@ -2443,7 +2486,7 @@ ion-textarea,prop,cols,number | undefined,undefined,false,true
 ion-textarea,prop,counter,boolean,false,false,false
 ion-textarea,prop,counterFormatter,((inputLength: number, maxLength: number) => string) | undefined,undefined,false,false
 ion-textarea,prop,debounce,number | undefined,undefined,false,false
-ion-textarea,prop,disabled,boolean,false,false,false
+ion-textarea,prop,disabled,boolean,false,false,true
 ion-textarea,prop,enterkeyhint,"done" | "enter" | "go" | "next" | "previous" | "search" | "send" | undefined,undefined,false,false
 ion-textarea,prop,errorText,string | undefined,undefined,false,false
 ion-textarea,prop,fill,"outline" | "solid" | undefined,undefined,false,false
@@ -2456,7 +2499,7 @@ ion-textarea,prop,minlength,number | undefined,undefined,false,false
 ion-textarea,prop,mode,"ios" | "md",undefined,false,false
 ion-textarea,prop,name,string,this.inputId,false,false
 ion-textarea,prop,placeholder,string | undefined,undefined,false,false
-ion-textarea,prop,readonly,boolean,false,false,false
+ion-textarea,prop,readonly,boolean,false,false,true
 ion-textarea,prop,required,boolean,false,false,true
 ion-textarea,prop,rows,number | undefined,undefined,false,false
 ion-textarea,prop,shape,"rectangular" | "round" | "soft" | undefined,undefined,false,false
@@ -2640,9 +2683,11 @@ ion-toast,css-prop,--width,md
 ion-toast,part,button
 ion-toast,part,button cancel
 ion-toast,part,container
+ion-toast,part,content
 ion-toast,part,header
 ion-toast,part,icon
 ion-toast,part,message
+ion-toast,part,wrapper
 
 ion-toggle,shadow
 ion-toggle,prop,alignment,"center" | "start" | undefined,undefined,false,false
diff --git a/core/package-lock.json b/core/package-lock.json
index 516a11f687c..c705cedec70 100644
--- a/core/package-lock.json
+++ b/core/package-lock.json
@@ -1,16 +1,16 @@
 {
   "name": "@ionic/core",
-  "version": "8.7.15",
+  "version": "8.8.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/core",
-      "version": "8.7.15",
+      "version": "8.8.0",
       "license": "MIT",
       "dependencies": {
         "@phosphor-icons/core": "^2.1.1",
-        "@stencil/core": "4.38.0",
+        "@stencil/core": "4.43.0",
         "ionicons": "^8.0.13",
         "tslib": "^2.1.0"
       },
@@ -20,7 +20,6 @@
         "@capacitor/haptics": "^8.0.0",
         "@capacitor/keyboard": "^8.0.0",
         "@capacitor/status-bar": "^8.0.0",
-        "@clack/prompts": "^0.11.0",
         "@ionic/eslint-config": "^0.3.0",
         "@ionic/prettier-config": "^2.0.0",
         "@playwright/test": "^1.56.1",
@@ -713,9 +712,9 @@
       }
     },
     "node_modules/@capacitor/core": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/@capacitor/core/-/core-8.0.0.tgz",
-      "integrity": "sha512-250HTVd/W/KdMygoqaedisvNbHbpbQTN2Hy/8ZYGm1nAqE0Fx7sGss4l0nDg33STxEdDhtVRoL2fIaaiukKseA==",
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/@capacitor/core/-/core-8.1.0.tgz",
+      "integrity": "sha512-UfMBMWc1v7J+14AhH03QmeNwV3HZx3qnOWhpwnHfzALEwAwlV/itQOQqcasMQYhOHWL0tiymc5ByaLTn7KKQxw==",
       "dev": true,
       "license": "MIT",
       "peer": true,
@@ -724,9 +723,9 @@
       }
     },
     "node_modules/@capacitor/haptics": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/@capacitor/haptics/-/haptics-8.0.0.tgz",
-      "integrity": "sha512-DY1IUOjke1T4ITl7mFHQIKCaJJyHYAYRYHG9bVApU7PDOZiMVGMp48Yjzdqjya+wv/AHS5mDabSTUmhJ5uDvBA==",
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/@capacitor/haptics/-/haptics-8.0.1.tgz",
+      "integrity": "sha512-8v8rowLBMeb3CryqoQvXndwyUsoi4pPXf0qFw7IGA4D32Uk7+K6juN2SjRowqunoovkvvbFmU9TD7JIAz2zmFw==",
       "dev": true,
       "license": "MIT",
       "peerDependencies": {
@@ -734,9 +733,9 @@
       }
     },
     "node_modules/@capacitor/keyboard": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/@capacitor/keyboard/-/keyboard-8.0.0.tgz",
-      "integrity": "sha512-ycPW6iQyFwzDK95jihesj5EGiyyGSfbBqNek11iNp9tBOB7zDeYkUA2S/vPpOETt3dhP6pWr7a9gNVGuEfj11g==",
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/@capacitor/keyboard/-/keyboard-8.0.1.tgz",
+      "integrity": "sha512-HDf4qrvvhLRMsgBoqeqIld6hP8JMK/WPbCYMvz8ajhY6TaibYt6B+NQyky4oIPCOfHTz5OcVsuHkbb8fQvGDAg==",
       "dev": true,
       "license": "MIT",
       "peerDependencies": {
@@ -744,34 +743,15 @@
       }
     },
     "node_modules/@capacitor/status-bar": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/@capacitor/status-bar/-/status-bar-8.0.0.tgz",
-      "integrity": "sha512-aIj3bc7z8lfPgOen8HlrBrkfnxpFnh21OCx6jCUx4Mvv+B6eEkUQ49b32DOddgVfr+igRHLX2SYi7duqIsNDXg==",
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/@capacitor/status-bar/-/status-bar-8.0.1.tgz",
+      "integrity": "sha512-OR59dlbwvmrV5dKsC9lvwv48QaGbqcbSTBpk+9/WXWxXYSdXXdzJZU9p8oyNPAkuJhCdnSa3XmU43fZRPBJJ5w==",
       "dev": true,
       "license": "MIT",
       "peerDependencies": {
         "@capacitor/core": ">=8.0.0"
       }
     },
-    "node_modules/@clack/core": {
-      "version": "0.5.0",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "picocolors": "^1.0.0",
-        "sisteransi": "^1.0.5"
-      }
-    },
-    "node_modules/@clack/prompts": {
-      "version": "0.11.0",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@clack/core": "0.5.0",
-        "picocolors": "^1.0.0",
-        "sisteransi": "^1.0.5"
-      }
-    },
     "node_modules/@eslint-community/eslint-utils": {
       "version": "4.4.0",
       "dev": true,
@@ -2106,7 +2086,9 @@
       }
     },
     "node_modules/@stencil/core": {
-      "version": "4.38.0",
+      "version": "4.43.0",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.43.0.tgz",
+      "integrity": "sha512-6Uj2Z3lzLuufYAE7asZ6NLKgSwsB9uxl84Eh34PASnUjfj32GkrP4DtKK7fNeh1WFGGyffsTDka3gwtl+4reUg==",
       "license": "MIT",
       "peer": true,
       "bin": {
diff --git a/core/package.json b/core/package.json
index e3dbed7b163..2a778e26994 100644
--- a/core/package.json
+++ b/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/core",
-  "version": "8.7.15",
+  "version": "8.8.0",
   "description": "Base components for Ionic",
   "engines": {
     "node": ">= 16"
@@ -35,7 +35,7 @@
   ],
   "dependencies": {
     "@phosphor-icons/core": "^2.1.1",
-    "@stencil/core": "4.38.0",
+    "@stencil/core": "4.43.0",
     "ionicons": "^8.0.13",
     "tslib": "^2.1.0"
   },
@@ -45,7 +45,6 @@
     "@capacitor/haptics": "^8.0.0",
     "@capacitor/keyboard": "^8.0.0",
     "@capacitor/status-bar": "^8.0.0",
-    "@clack/prompts": "^0.11.0",
     "@ionic/eslint-config": "^0.3.0",
     "@ionic/prettier-config": "^2.0.0",
     "@playwright/test": "^1.56.1",
@@ -108,8 +107,7 @@
     "docker.build": "docker build -t ionic-playwright .",
     "test.e2e.docker": "npm run docker.build && node ./scripts/docker.mjs",
     "test.e2e.docker.update-snapshots": "npm run test.e2e.docker -- --update-snapshots='changed'",
-    "test.e2e.docker.ci": "npm run docker.build && CI=true node ./scripts/docker.mjs",
-    "test.e2e.script": "node scripts/testing/e2e-script.mjs"
+    "test.e2e.docker.ci": "npm run docker.build && CI=true node ./scripts/docker.mjs"
   },
   "author": "Ionic Team",
   "license": "MIT",
diff --git a/core/scripts/testing/e2e-script.mjs b/core/scripts/testing/e2e-script.mjs
deleted file mode 100644
index 794447bf61c..00000000000
--- a/core/scripts/testing/e2e-script.mjs
+++ /dev/null
@@ -1,260 +0,0 @@
-// The purpose of this script is to provide a way run the E2E tests
-// without having the developer to manually run multiple commands based
-// on the desired end result.
-// E.g. update the local ground truths for a specific component or
-// open the Playwright report after running the E2E tests.
-
-import {
-  intro,
-  outro,
-  confirm,
-  spinner,
-  isCancel,
-  cancel,
-  text,
-  log,
-} from '@clack/prompts';
-import { exec, spawn } from 'child_process';
-import fs from 'node:fs';
-import { setTimeout as sleep } from 'node:timers/promises';
-import util from 'node:util';
-import color from 'picocolors';
-
-async function main() {
-  const execAsync = util.promisify(exec);
-  const cleanUpFiles = async () => {
-    // Clean up the local ground truths.
-    const cleanUp = spinner();
-  
-    // Inform the user that the local ground truths are being cleaned up.
-    cleanUp.start('Restoring local ground truths');
-  
-    // Reset the local ground truths.
-    await execAsync('git reset -- src/**/*-linux.png').catch((error) => {
-      cleanUp.stop('Failed to reset local ground truths');
-      console.error(error);
-      return process.exit(0);
-    });
-  
-    // Restore the local ground truths.
-    await execAsync('git restore -- src/**/*-linux.png').catch((error) => {
-      cleanUp.stop('Failed to restore local ground truths');
-      console.error(error);
-      return process.exit(0);
-    });
-  
-    // Inform the user that the local ground truths have been cleaned up.
-    cleanUp.stop('Local ground truths have been restored to their original state in order to avoid committing them.');
-  };
-
-  intro(color.inverse(' Update Local Ground Truths'));
-
-  // Ask user for the component name they want to test.
-  const componentValue = await text({
-    message: 'Enter the component or path you want to test (e.g. chip, src/components/chip)',
-    placeholder: 'Empty for all components',
-  });
-
-  // User cancelled the operation with `Ctrl+C` or `CMD+C`.
-  if (isCancel(componentValue)) {
-    cancel('Operation cancelled');
-    return process.exit(0);
-  }
-
-  // Ask user if they want to update their local ground truths.
-  const shouldUpdateTruths = await confirm({
-    message: 'Do you want to update your local ground truths?',
-  });
-
-  // User cancelled the operation with `Ctrl+C` or `CMD+C`.
-  if (isCancel(shouldUpdateTruths)) {
-    cancel('Operation cancelled');
-    return process.exit(0);
-  }
-
-  if (shouldUpdateTruths) {
-    const defaultBaseBranch = 'main';
-
-    // Ask user for the base branch.
-    let baseBranch = await text({
-      message: 'Enter the base branch name:',
-      placeholder: `default: ${defaultBaseBranch}`,
-    })
-
-    // User cancelled the operation with `Ctrl+C` or `CMD+C`.
-    if (isCancel(baseBranch)) {
-      cancel('Operation cancelled');
-      return process.exit(0);
-    }
-
-    // User didn't provide a base branch.
-    if (!baseBranch) {
-      baseBranch = defaultBaseBranch;
-    }
-
-    /**
-     * The provided base branch needs to be fetched.
-     * This ensures that the local base branch is up-to-date with the 
-     * remote base branch. Otherwise, there might be errors stating that
-     * certain files don't exist in the local base branch.
-     */
-    const fetchBaseBranch = spinner();
-
-    // Inform the user that the base branch is being fetched.
-    fetchBaseBranch.start(`Fetching "${baseBranch}" to have the latest changes`);
-
-    // Fetch the base branch.
-    await execAsync(`git fetch origin ${baseBranch}`).catch((error) => {
-      fetchBaseBranch.stop(`Failed to fetch "${baseBranch}"`);
-      console.error(error);
-      return process.exit(0);
-    });
-
-    // Inform the user that the base branch has been fetched.
-    fetchBaseBranch.stop(`Fetched "${baseBranch}"`);
-
-
-    const updateGroundTruth = spinner();
-
-    // Inform the user that the local ground truths are being updated.
-    updateGroundTruth.start('Updating local ground truths');
-
-    // Check if user provided an existing file or directory.
-    const isValidLocation = fs.existsSync(componentValue);
-
-    // User provided an existing file or directory.
-    if (isValidLocation) {
-      const stats = fs.statSync(componentValue);
-
-      // User provided a file as the component.
-      // ex: `componentValue` = `src/components/chip/test/basic/chip.e2e.ts`
-      if (stats.isFile()) {
-        // Update the local ground truths for the provided path.
-        await execAsync(`git checkout origin/${baseBranch} -- ${componentValue}-snapshots/*-linux.png`).catch((error) => {
-          updateGroundTruth.stop('Failed to update local ground truths');
-          console.error(error);
-          return process.exit(0);
-        });
-      }
-
-      // User provided a directory as the component.
-      // ex: `componentValue` = `src/components/chip`
-      if (stats.isDirectory()) {
-        // Update the local ground truths for the provided directory.
-        await execAsync(`git checkout origin/${baseBranch} -- ${componentValue}/test/*/*.e2e.ts-snapshots/*-linux.png`).catch((error) => {
-          updateGroundTruth.stop('Failed to update local ground truths');
-          console.error(error);
-          return process.exit(0);
-        });
-      }
-    }
-    // User provided a component name as the component.
-    // ex: `componentValue` = `chip`
-    else if (componentValue) {
-      // Update the local ground truths for the provided component.
-      await execAsync(`git checkout origin/${baseBranch} -- src/components/${componentValue}/test/*/${componentValue}.e2e.ts-snapshots/*-linux.png`).catch((error) => {
-        updateGroundTruth.stop('Failed to update local ground truths');
-        console.error(error);
-        return process.exit(0);
-      });
-    }
-    // User provided an empty string.
-    else {
-      // Update the local ground truths for all components.
-      await execAsync(`git checkout origin/${baseBranch} -- src/components/*/test/*/*.e2e.ts-snapshots/*-linux.png`).catch((error) => {
-        updateGroundTruth.stop('Failed to update local ground truths');
-        console.error(error);
-        return process.exit(0);
-      });
-    }
-
-    // Inform the user that the local ground truths have been updated.
-    updateGroundTruth.stop('Updated local ground truths');
-  }
-
-  const buildCore = spinner();
-
-  // Inform the user that the core is being built.
-  buildCore.start('Building core');
-
-  /**
-   * Build core
-   * Otherwise, the uncommitted changes will not be reflected in the tests because:
-   * - popping the stash doesn't trigger a re-render even if `npm start` is running
-   * - app is not running the `npm start` command
-   */
-  await execAsync('npm run build').catch((error) => {
-    // Clean up the local ground truths.
-    cleanUpFiles();
-
-    buildCore.stop('Failed to build core');
-    console.error(error);
-    return process.exit(0);
-  });
-
-  buildCore.stop('Built core');
-
-  const runE2ETests = spinner();
-
-  // Inform the user that the E2E tests are being run.
-  runE2ETests.start('Running E2E tests');
-
-  // User provided a component value.
-  if (componentValue) {
-    await execAsync(`npm run test.e2e.docker.ci ${componentValue}`).catch((error) => {
-      // Clean up the local ground truths.
-      cleanUpFiles();
-
-      runE2ETests.stop('Failed to run E2E tests');
-      console.error(error);
-      return process.exit(0);
-    });
-  } else {
-    await execAsync('npm run test.e2e.docker.ci').catch((error) => {
-      // Clean up the local ground truths.
-      cleanUpFiles();
-
-      runE2ETests.stop('Failed to run E2E tests');
-      console.error(error);
-      return process.exit(0);
-    });
-  }
-
-  runE2ETests.stop('Ran E2E tests');
-
-  // Clean up the local ground truths.
-  await cleanUpFiles();
-
-  // Ask user if they want to open the Playwright report.
-  const shouldOpenReport = await confirm({
-    message: 'Do you want to open the Playwright report?',
-  });
-
-  // User cancelled the operation with `Ctrl+C` or `CMD+C`.
-  if (isCancel(shouldOpenReport)) {
-    cancel('Operation cancelled');
-    return process.exit(0);
-  }
-
-  // User chose to open the Playwright report.
-  if (shouldOpenReport) {
-    // Use spawn to display the server information and the key to quit the server.
-    spawn('npx', ['playwright', 'show-report'], {
-      stdio: 'inherit',
-    });
-  } else {
-    // Inform the user that the Playwright report can be opened by running the following command.
-    log.info('If you change your mind, you can open the Playwright report by running the following command:');
-    log.info(color.bold('npx playwright show-report'));
-  }
-
-  if (shouldOpenReport) {
-    outro("You're all set! Don't forget to quit serving the Playwright report when you're done.");
-  } else {
-    outro("You're all set!");
-  }
-
-  await sleep(1000);
-}
-
-main().catch(console.error);
diff --git a/core/setupJest.js b/core/setupJest.js
index f2eb0e70a31..77ea127c680 100644
--- a/core/setupJest.js
+++ b/core/setupJest.js
@@ -8,7 +8,9 @@ expect.extend({
       throw new Error('expected toHaveShadowPart to be called on an element with a shadow root');
     }
 
-    const shadowPart = received.shadowRoot.querySelector(`[part="${part}"]`);
+    // Use attribute selector with ~= to match space-separated part values
+    // e.g., [part~="knob"] matches elements with part="knob" or part="knob knob-a"
+    const shadowPart = received.shadowRoot.querySelector(`[part~="${part}"]`);
     const pass = shadowPart !== null;
 
     const message = `expected ${received.tagName.toLowerCase()} to have shadow part "${part}"`;
diff --git a/core/src/components.d.ts b/core/src/components.d.ts
index 10900d3b0ee..f9d9bec12ad 100644
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
@@ -20,7 +20,7 @@ import { SpinnerTypes } from "./components/spinner/spinner-configs";
 import { InputChangeEventDetail, InputInputEventDetail } from "./components/input/input-interface";
 import { InputOtpChangeEventDetail, InputOtpCompleteEventDetail, InputOtpInputEventDetail } from "./components/input-otp/input-otp-interface";
 import { MenuChangeEventDetail, MenuCloseEventDetail, MenuType, Side } from "./components/menu/menu-interface";
-import { ModalBreakpointChangeEventDetail, ModalHandleBehavior } from "./components/modal/modal-interface";
+import { ModalBreakpointChangeEventDetail, ModalDragEventDetail, ModalHandleBehavior } from "./components/modal/modal-interface";
 import { NavComponent, NavComponentWithProps, NavOptions, RouterOutletOptions, SwipeGestureHandler, TransitionDoneFn, TransitionInstruction } from "./components/nav/nav-interface";
 import { ViewController } from "./components/nav/view-controller";
 import { PickerChangeEventDetail } from "./components/picker/picker-interfaces";
@@ -29,7 +29,7 @@ import { PickerButton, PickerColumn } from "./components/picker-legacy/picker-in
 import { PopoverSize, PositionAlign, PositionReference, PositionSide, TriggerAction } from "./components/popover/popover-interface";
 import { RadioGroupChangeEventDetail, RadioGroupCompareFn } from "./components/radio-group/radio-group-interface";
 import { PinFormatter, RangeChangeEventDetail, RangeKnobMoveEndEventDetail, RangeKnobMoveStartEventDetail, RangeValue } from "./components/range/range-interface";
-import { RefresherEventDetail } from "./components/refresher/refresher-interface";
+import { RefresherEventDetail, RefresherPullEndEventDetail } from "./components/refresher/refresher-interface";
 import { ItemReorderEventDetail, ReorderEndEventDetail, ReorderMoveEventDetail } from "./components/reorder-group/reorder-group-interface";
 import { NavigationHookCallback } from "./components/route/route-interface";
 import { SearchbarChangeEventDetail, SearchbarInputEventDetail } from "./components/searchbar/searchbar-interface";
@@ -58,7 +58,7 @@ export { SpinnerTypes } from "./components/spinner/spinner-configs";
 export { InputChangeEventDetail, InputInputEventDetail } from "./components/input/input-interface";
 export { InputOtpChangeEventDetail, InputOtpCompleteEventDetail, InputOtpInputEventDetail } from "./components/input-otp/input-otp-interface";
 export { MenuChangeEventDetail, MenuCloseEventDetail, MenuType, Side } from "./components/menu/menu-interface";
-export { ModalBreakpointChangeEventDetail, ModalHandleBehavior } from "./components/modal/modal-interface";
+export { ModalBreakpointChangeEventDetail, ModalDragEventDetail, ModalHandleBehavior } from "./components/modal/modal-interface";
 export { NavComponent, NavComponentWithProps, NavOptions, RouterOutletOptions, SwipeGestureHandler, TransitionDoneFn, TransitionInstruction } from "./components/nav/nav-interface";
 export { ViewController } from "./components/nav/view-controller";
 export { PickerChangeEventDetail } from "./components/picker/picker-interfaces";
@@ -67,7 +67,7 @@ export { PickerButton, PickerColumn } from "./components/picker-legacy/picker-in
 export { PopoverSize, PositionAlign, PositionReference, PositionSide, TriggerAction } from "./components/popover/popover-interface";
 export { RadioGroupChangeEventDetail, RadioGroupCompareFn } from "./components/radio-group/radio-group-interface";
 export { PinFormatter, RangeChangeEventDetail, RangeKnobMoveEndEventDetail, RangeKnobMoveStartEventDetail, RangeValue } from "./components/range/range-interface";
-export { RefresherEventDetail } from "./components/refresher/refresher-interface";
+export { RefresherEventDetail, RefresherPullEndEventDetail } from "./components/refresher/refresher-interface";
 export { ItemReorderEventDetail, ReorderEndEventDetail, ReorderMoveEventDetail } from "./components/reorder-group/reorder-group-interface";
 export { NavigationHookCallback } from "./components/route/route-interface";
 export { SearchbarChangeEventDetail, SearchbarInputEventDetail } from "./components/searchbar/searchbar-interface";
@@ -3218,7 +3218,7 @@ export namespace Components {
          */
         "mode"?: "ios" | "md";
         /**
-          * How much to multiply the pull speed by. To slow the pull animation down, pass a number less than `1`. To speed up the pull, pass a number greater than `1`. The default value is `1` which is equal to the speed of the cursor. If a negative value is passed in, the factor will be `1` instead.  For example: If the value passed is `1.2` and the content is dragged by `10` pixels, instead of `10` pixels the content will be pulled by `12` pixels (an increase of 20 percent). If the value passed is `0.8`, the dragged amount will be `8` pixels, less than the amount the cursor has moved.  Does not apply when the refresher content uses a spinner, enabling the native refresher.
+          * How much to multiply the pull speed by. To slow the pull animation down, pass a number less than `1`. To speed up the pull, pass a number greater than `1`. The default value is `1` which is equal to the speed of the cursor. If a negative value is passed in, the factor will be `1` instead.  For example, If the value passed is `1.2` and the content is dragged by `10` pixels, instead of `10` pixels, the content will be pulled by `12` pixels (an increase of 20 percent). If the value passed is `0.8`, the dragged amount will be `8` pixels, less than the amount the cursor has moved.  Does not apply when the refresher content uses a spinner, enabling the native refresher.
           * @default 1
          */
         "pullFactor": number;
@@ -3677,6 +3677,11 @@ export namespace Components {
           * @param smoothScroll : Whether to animate the scroll transition.
          */
         "setContent": (id: string, smoothScroll?: boolean) => Promise<void>;
+        /**
+          * If `true`, users will be able to swipe the segment view to navigate between segment contents.
+          * @default true
+         */
+        "swipeGesture": boolean;
     }
     interface IonSelect {
         /**
@@ -3795,6 +3800,11 @@ export namespace Components {
         "value"?: any | null;
     }
     interface IonSelectModal {
+        /**
+          * The text to display on the cancel button.
+          * @default 'Close'
+         */
+        "cancelText": string;
         "header"?: string;
         "multiple"?: boolean;
         /**
@@ -5233,6 +5243,9 @@ declare global {
         "willDismiss": OverlayEventDetail;
         "didDismiss": OverlayEventDetail;
         "ionMount": void;
+        "ionDragStart": void;
+        "ionDragMove": ModalDragEventDetail;
+        "ionDragEnd": ModalDragEventDetail;
     }
     interface HTMLIonModalElement extends Components.IonModal, HTMLStencilElement {
         addEventListener<K extends keyof HTMLIonModalElementEventMap>(type: K, listener: (this: HTMLIonModalElement, ev: IonModalCustomEvent<HTMLIonModalElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -5453,6 +5466,8 @@ declare global {
         "ionRefresh": RefresherEventDetail;
         "ionPull": void;
         "ionStart": void;
+        "ionPullStart": void;
+        "ionPullEnd": RefresherPullEndEventDetail;
     }
     interface HTMLIonRefresherElement extends Components.IonRefresher, HTMLStencilElement {
         addEventListener<K extends keyof HTMLIonRefresherElementEventMap>(type: K, listener: (this: HTMLIonRefresherElement, ev: IonRefresherCustomEvent<HTMLIonRefresherElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -6000,6 +6015,8 @@ declare global {
     }
 }
 declare namespace LocalJSX {
+    type OneOf<K extends string, PropT, AttrT = PropT> = { [P in K]: PropT } & { [P in `attr:${K}` | `prop:${K}`]?: never } | { [P in `attr:${K}`]: AttrT } & { [P in K | `prop:${K}`]?: never } | { [P in `prop:${K}`]: PropT } & { [P in K | `attr:${K}`]?: never };
+
     interface IonAccordion {
         /**
           * If `true`, the accordion cannot be interacted with.
@@ -7762,6 +7779,10 @@ declare namespace LocalJSX {
           * @default 'outline'
          */
         "fill"?: 'outline' | 'solid';
+        /**
+          * The `id` of a `<form>` element to associate this element with.
+         */
+        "form"?: string;
         /**
           * A hint to the browser for which keyboard to display. Possible values: `"none"`, `"text"`, `"tel"`, `"url"`, `"email"`, `"numeric"`, `"decimal"`, and `"search"`.  For numbers (type="number"): "numeric" For text (type="text"): "text"
          */
@@ -7775,6 +7796,10 @@ declare namespace LocalJSX {
           * The mode determines the platform behaviors of the component.
          */
         "mode"?: "ios" | "md";
+        /**
+          * The name of the element, used when submitting an HTML form.
+         */
+        "name"?: string;
         /**
           * Emitted when the input group loses focus.
          */
@@ -8442,6 +8467,18 @@ declare namespace LocalJSX {
           * Emitted after the modal breakpoint has changed.
          */
         "onIonBreakpointDidChange"?: (event: IonModalCustomEvent<ModalBreakpointChangeEventDetail>) => void;
+        /**
+          * Event that is emitted when the sheet modal or card modal gesture ends.
+         */
+        "onIonDragEnd"?: (event: IonModalCustomEvent<ModalDragEventDetail>) => void;
+        /**
+          * Event that is emitted when the sheet modal or card modal gesture moves.
+         */
+        "onIonDragMove"?: (event: IonModalCustomEvent<ModalDragEventDetail>) => void;
+        /**
+          * Event that is emitted when the sheet modal or card modal gesture starts.
+         */
+        "onIonDragStart"?: (event: IonModalCustomEvent<void>) => void;
         /**
           * Emitted after the modal has dismissed.
          */
@@ -9186,16 +9223,25 @@ declare namespace LocalJSX {
           * Emitted while the user is pulling down the content and exposing the refresher.
          */
         "onIonPull"?: (event: IonRefresherCustomEvent<void>) => void;
+        /**
+          * Emitted when the refresher has returned to the inactive state after a pull gesture. This fires whether the refresh completed successfully or was canceled.
+         */
+        "onIonPullEnd"?: (event: IonRefresherCustomEvent<RefresherPullEndEventDetail>) => void;
+        /**
+          * Emitted when the user begins to start pulling down.
+         */
+        "onIonPullStart"?: (event: IonRefresherCustomEvent<void>) => void;
         /**
           * Emitted when the user lets go of the content and has pulled down further than the `pullMin` or pulls the content down and exceeds the pullMax. Updates the refresher state to `refreshing`. The `complete()` method should be called when the async operation has completed.
          */
         "onIonRefresh"?: (event: IonRefresherCustomEvent<RefresherEventDetail>) => void;
         /**
-          * Emitted when the user begins to start pulling down.
+          * Emitted when the user begins to start pulling down. TODO(FW-7044): Remove this in a major release
+          * @deprecated Use `ionPullStart` instead.
          */
         "onIonStart"?: (event: IonRefresherCustomEvent<void>) => void;
         /**
-          * How much to multiply the pull speed by. To slow the pull animation down, pass a number less than `1`. To speed up the pull, pass a number greater than `1`. The default value is `1` which is equal to the speed of the cursor. If a negative value is passed in, the factor will be `1` instead.  For example: If the value passed is `1.2` and the content is dragged by `10` pixels, instead of `10` pixels the content will be pulled by `12` pixels (an increase of 20 percent). If the value passed is `0.8`, the dragged amount will be `8` pixels, less than the amount the cursor has moved.  Does not apply when the refresher content uses a spinner, enabling the native refresher.
+          * How much to multiply the pull speed by. To slow the pull animation down, pass a number less than `1`. To speed up the pull, pass a number greater than `1`. The default value is `1` which is equal to the speed of the cursor. If a negative value is passed in, the factor will be `1` instead.  For example, If the value passed is `1.2` and the content is dragged by `10` pixels, instead of `10` pixels, the content will be pulled by `12` pixels (an increase of 20 percent). If the value passed is `0.8`, the dragged amount will be `8` pixels, less than the amount the cursor has moved.  Does not apply when the refresher content uses a spinner, enabling the native refresher.
           * @default 1
          */
         "pullFactor"?: number;
@@ -9692,6 +9738,11 @@ declare namespace LocalJSX {
           * Emitted when the segment view is scrolled.
          */
         "onIonSegmentViewScroll"?: (event: IonSegmentViewCustomEvent<SegmentViewScrollEvent>) => void;
+        /**
+          * If `true`, users will be able to swipe the segment view to navigate between segment contents.
+          * @default true
+         */
+        "swipeGesture"?: boolean;
     }
     interface IonSelect {
         /**
@@ -9829,6 +9880,11 @@ declare namespace LocalJSX {
         "value"?: any | null;
     }
     interface IonSelectModal {
+        /**
+          * The text to display on the cancel button.
+          * @default 'Close'
+         */
+        "cancelText"?: string;
         "header"?: string;
         "multiple"?: boolean;
         /**
@@ -10172,6 +10228,10 @@ declare namespace LocalJSX {
           * The fill for the item. If `"solid"` the item will have a background. If `"outline"` the item will be transparent with a border. Only available when the theme is `"md"`.
          */
         "fill"?: 'outline' | 'solid';
+        /**
+          * The `id` of a `<form>` element to associate this element with.
+         */
+        "form"?: string;
         /**
           * Text that is placed under the textarea and displayed when no error is detected.
          */
@@ -10531,209 +10591,1002 @@ declare namespace LocalJSX {
          */
         "theme"?: "ios" | "md" | "ionic";
     }
+
+    interface IonAccordionAttributes {
+        "value": string;
+        "disabled": boolean;
+        "readonly": boolean;
+        "toggleIcon": string;
+        "toggleIconSlot": 'start' | 'end';
+    }
+    interface IonAccordionGroupAttributes {
+        "animated": boolean;
+        "multiple": boolean;
+        "value": string | string[] | null;
+        "disabled": boolean;
+        "readonly": boolean;
+        "expand": 'compact' | 'inset';
+        "shape": 'soft' | 'round' | 'rectangular';
+    }
+    interface IonActionSheetAttributes {
+        "overlayIndex": number;
+        "hasController": boolean;
+        "keyboardClose": boolean;
+        "cssClass": string | string[];
+        "backdropDismiss": boolean;
+        "header": string;
+        "subHeader": string;
+        "translucent": boolean;
+        "animated": boolean;
+        "isOpen": boolean;
+        "trigger": string | undefined;
+    }
+    interface IonAlertAttributes {
+        "overlayIndex": number;
+        "hasController": boolean;
+        "keyboardClose": boolean;
+        "cssClass": string | string[];
+        "header": string;
+        "subHeader": string;
+        "message": string | IonicSafeString;
+        "backdropDismiss": boolean;
+        "translucent": boolean;
+        "animated": boolean;
+        "isOpen": boolean;
+        "trigger": string | undefined;
+    }
+    interface IonAvatarAttributes {
+        "size": 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+        "shape": 'soft' | 'round' | 'rectangular';
+        "disabled": boolean;
+    }
+    interface IonBackButtonAttributes {
+        "color": Color;
+        "defaultHref": string;
+        "disabled": boolean;
+        "icon": string | null;
+        "text": string | null;
+        "type": 'submit' | 'reset' | 'button';
+    }
+    interface IonBackdropAttributes {
+        "visible": boolean;
+        "tappable": boolean;
+        "stopPropagation": boolean;
+    }
+    interface IonBadgeAttributes {
+        "color": Color;
+        "hue": 'bold' | 'subtle';
+        "shape": 'soft' | 'round | rectangular';
+        "size": 'small' | 'medium' | 'large';
+        "vertical": 'top' | 'bottom';
+    }
+    interface IonBreadcrumbAttributes {
+        "collapsed": boolean;
+        "last": boolean;
+        "showCollapsedIndicator": boolean;
+        "color": Color;
+        "active": boolean;
+        "disabled": boolean;
+        "download": string | undefined;
+        "href": string | undefined;
+        "rel": string | undefined;
+        "separator": boolean | undefined;
+        "target": string | undefined;
+        "routerDirection": RouterDirection;
+    }
+    interface IonBreadcrumbsAttributes {
+        "color": Color;
+        "maxItems": number;
+        "itemsBeforeCollapse": number;
+        "itemsAfterCollapse": number;
+    }
+    interface IonButtonAttributes {
+        "color": Color;
+        "buttonType": string;
+        "disabled": boolean;
+        "expand": 'full' | 'block';
+        "fill": 'clear' | 'outline' | 'solid' | 'default';
+        "routerDirection": RouterDirection;
+        "download": string | undefined;
+        "href": string | undefined;
+        "rel": string | undefined;
+        "shape": 'soft' | 'round' | 'rectangular';
+        "size": 'small' | 'default' | 'medium' | 'large';
+        "strong": boolean;
+        "target": string | undefined;
+        "type": 'submit' | 'reset' | 'button';
+        "form": string | HTMLFormElement;
+    }
+    interface IonButtonsAttributes {
+        "collapse": boolean;
+    }
+    interface IonCardAttributes {
+        "color": Color;
+        "button": boolean;
+        "type": 'submit' | 'reset' | 'button';
+        "disabled": boolean;
+        "download": string | undefined;
+        "href": string | undefined;
+        "rel": string | undefined;
+        "routerDirection": RouterDirection;
+        "shape": 'soft' | 'round' | 'rectangular';
+        "target": string | undefined;
+    }
+    interface IonCardHeaderAttributes {
+        "color": Color;
+        "translucent": boolean;
+    }
+    interface IonCardSubtitleAttributes {
+        "color": Color;
+    }
+    interface IonCardTitleAttributes {
+        "color": Color;
+    }
+    interface IonCheckboxAttributes {
+        "color": Color;
+        "name": string;
+        "checked": boolean;
+        "indeterminate": boolean;
+        "disabled": boolean;
+        "errorText": string;
+        "helperText": string;
+        "value": string;
+        "labelPlacement": 'start' | 'end' | 'fixed' | 'stacked';
+        "justify": 'start' | 'end' | 'space-between';
+        "alignment": 'start' | 'center';
+        "required": boolean;
+        "shape": 'soft' | 'rectangular';
+        "size": 'small';
+    }
+    interface IonChipAttributes {
+        "color": Color;
+        "outline": boolean;
+        "disabled": boolean;
+        "hue": 'bold' | 'subtle';
+        "shape": 'soft' | 'round' | 'rectangular';
+        "size": 'small' | 'large';
+    }
+    interface IonColAttributes {
+        "offset": string;
+        "offsetXs": string;
+        "offsetSm": string;
+        "offsetMd": string;
+        "offsetLg": string;
+        "offsetXl": string;
+        "order": string;
+        "orderXs": string;
+        "orderSm": string;
+        "orderMd": string;
+        "orderLg": string;
+        "orderXl": string;
+        "pull": string;
+        "pullXs": string;
+        "pullSm": string;
+        "pullMd": string;
+        "pullLg": string;
+        "pullXl": string;
+        "push": string;
+        "pushXs": string;
+        "pushSm": string;
+        "pushMd": string;
+        "pushLg": string;
+        "pushXl": string;
+        "size": string;
+        "sizeXs": string;
+        "sizeSm": string;
+        "sizeMd": string;
+        "sizeLg": string;
+        "sizeXl": string;
+    }
+    interface IonContentAttributes {
+        "color": Color;
+        "fullscreen": boolean;
+        "fixedSlotPlacement": 'after' | 'before';
+        "forceOverscroll": boolean;
+        "scrollX": boolean;
+        "scrollY": boolean;
+        "scrollEvents": boolean;
+    }
+    interface IonDatetimeAttributes {
+        "color": Color;
+        "name": string;
+        "disabled": boolean;
+        "readonly": boolean;
+        "showAdjacentDays": boolean;
+        "min": string;
+        "max": string;
+        "presentation": DatetimePresentation;
+        "cancelText": string;
+        "doneText": string;
+        "clearText": string;
+        "yearValues": string;
+        "monthValues": string;
+        "dayValues": string;
+        "hourValues": string;
+        "minuteValues": string;
+        "locale": string;
+        "firstDayOfWeek": number;
+        "multiple": boolean;
+        "value": string | string[] | null;
+        "showDefaultTitle": boolean;
+        "showDefaultButtons": boolean;
+        "showClearButton": boolean;
+        "showDefaultTimeLabel": boolean;
+        "hourCycle": DatetimeHourCycle;
+        "size": 'cover' | 'fixed';
+        "preferWheel": boolean;
+    }
+    interface IonDatetimeButtonAttributes {
+        "color": Color;
+        "disabled": boolean;
+        "datetime": string;
+    }
+    interface IonDividerAttributes {
+        "spacing": 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge';
+        "inset": boolean;
+    }
+    interface IonFabAttributes {
+        "horizontal": 'start' | 'end' | 'center';
+        "vertical": 'top' | 'bottom' | 'center';
+        "edge": boolean;
+        "activated": boolean;
+    }
+    interface IonFabButtonAttributes {
+        "color": Color;
+        "activated": boolean;
+        "disabled": boolean;
+        "download": string | undefined;
+        "href": string | undefined;
+        "rel": string | undefined;
+        "routerDirection": RouterDirection;
+        "target": string | undefined;
+        "show": boolean;
+        "translucent": boolean;
+        "type": 'submit' | 'reset' | 'button';
+        "size": 'small';
+        "closeIcon": string;
+    }
+    interface IonFabListAttributes {
+        "activated": boolean;
+        "side": 'start' | 'end' | 'top' | 'bottom';
+    }
+    interface IonFooterAttributes {
+        "collapse": 'fade';
+        "translucent": boolean;
+    }
+    interface IonGridAttributes {
+        "fixed": boolean;
+    }
+    interface IonHeaderAttributes {
+        "collapse": 'condense' | 'fade';
+        "divider": boolean;
+        "translucent": boolean;
+    }
+    interface IonImgAttributes {
+        "alt": string;
+        "src": string;
+    }
+    interface IonInfiniteScrollAttributes {
+        "threshold": string;
+        "disabled": boolean;
+        "position": 'top' | 'bottom';
+        "preserveRerenderScrollPosition": boolean;
+    }
+    interface IonInfiniteScrollContentAttributes {
+        "loadingSpinner": SpinnerTypes | null;
+        "loadingText": string | IonicSafeString;
+    }
+    interface IonInputAttributes {
+        "color": Color;
+        "autocapitalize": string;
+        "autocomplete": AutocompleteTypes;
+        "autocorrect": 'on' | 'off';
+        "autofocus": boolean;
+        "clearInput": boolean;
+        "clearInputIcon": string;
+        "clearOnEdit": boolean;
+        "counter": boolean;
+        "debounce": number;
+        "disabled": boolean;
+        "enterkeyhint": 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';
+        "errorText": string;
+        "fill": 'outline' | 'solid';
+        "inputmode": 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
+        "helperText": string;
+        "label": string;
+        "labelPlacement": 'start' | 'end' | 'floating' | 'stacked' | 'fixed';
+        "max": string;
+        "maxlength": number;
+        "min": string;
+        "minlength": number;
+        "multiple": boolean;
+        "name": string;
+        "pattern": string;
+        "placeholder": string;
+        "readonly": boolean;
+        "required": boolean;
+        "shape": 'soft' | 'round' | 'rectangular';
+        "spellcheck": boolean;
+        "step": string;
+        "size": 'medium' | 'large' | 'xlarge';
+        "type": TextFieldTypes;
+        "value": string;
+    }
+    interface IonInputOtpAttributes {
+        "autocapitalize": string;
+        "color": Color;
+        "disabled": boolean;
+        "fill": 'outline' | 'solid';
+        "inputmode": 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
+        "length": number;
+        "pattern": string;
+        "readonly": boolean;
+        "separators": 'all' | string | number[];
+        "shape": 'round' | 'rectangular' | 'soft';
+        "size": 'small' | 'medium' | 'large';
+        "type": 'text' | 'number';
+        "value": string;
+    }
+    interface IonInputPasswordToggleAttributes {
+        "color": Color;
+        "showIcon": string;
+        "hideIcon": string;
+        "type": TextFieldTypes;
+    }
+    interface IonItemAttributes {
+        "color": Color;
+        "button": boolean;
+        "detail": boolean;
+        "detailIcon": string;
+        "disabled": boolean;
+        "download": string | undefined;
+        "href": string | undefined;
+        "rel": string | undefined;
+        "lines": 'full' | 'inset' | 'none';
+        "routerDirection": RouterDirection;
+        "target": string | undefined;
+        "type": 'submit' | 'reset' | 'button';
+    }
+    interface IonItemDividerAttributes {
+        "color": Color;
+        "sticky": boolean;
+    }
+    interface IonItemOptionAttributes {
+        "color": Color;
+        "disabled": boolean;
+        "download": string | undefined;
+        "expandable": boolean;
+        "href": string | undefined;
+        "hue": 'bold' | 'subtle';
+        "rel": string | undefined;
+        "target": string | undefined;
+        "type": 'submit' | 'reset' | 'button';
+        "shape": 'soft' | 'round' | 'rectangular';
+    }
+    interface IonItemOptionsAttributes {
+        "side": Side;
+    }
+    interface IonItemSlidingAttributes {
+        "disabled": boolean;
+    }
+    interface IonLabelAttributes {
+        "color": Color;
+        "position": 'fixed' | 'stacked' | 'floating';
+    }
+    interface IonListAttributes {
+        "lines": 'full' | 'inset' | 'none';
+        "inset": boolean;
+        "shape": 'soft' | 'round' | 'rectangular';
+    }
+    interface IonListHeaderAttributes {
+        "color": Color;
+        "lines": 'full' | 'inset' | 'none';
+    }
+    interface IonLoadingAttributes {
+        "overlayIndex": number;
+        "hasController": boolean;
+        "keyboardClose": boolean;
+        "message": string | IonicSafeString;
+        "cssClass": string | string[];
+        "duration": number;
+        "backdropDismiss": boolean;
+        "showBackdrop": boolean;
+        "spinner": SpinnerTypes | null;
+        "translucent": boolean;
+        "animated": boolean;
+        "isOpen": boolean;
+        "trigger": string | undefined;
+    }
+    interface IonMenuAttributes {
+        "contentId": string;
+        "menuId": string;
+        "type": MenuType;
+        "disabled": boolean;
+        "side": Side;
+        "swipeGesture": boolean;
+        "maxEdgeStart": number;
+    }
+    interface IonMenuButtonAttributes {
+        "color": Color;
+        "disabled": boolean;
+        "menu": string;
+        "autoHide": boolean;
+        "type": 'submit' | 'reset' | 'button';
+    }
+    interface IonMenuToggleAttributes {
+        "menu": string;
+        "autoHide": boolean;
+    }
+    interface IonModalAttributes {
+        "hasController": boolean;
+        "overlayIndex": number;
+        "keyboardClose": boolean;
+        "expandToScroll": boolean;
+        "initialBreakpoint": number;
+        "backdropBreakpoint": number;
+        "handle": boolean;
+        "handleBehavior": ModalHandleBehavior;
+        "component": ComponentRef;
+        "cssClass": string | string[];
+        "backdropDismiss": boolean;
+        "showBackdrop": boolean;
+        "animated": boolean;
+        "isOpen": boolean;
+        "trigger": string | undefined;
+        "keepContentsMounted": boolean;
+        "focusTrap": boolean;
+        "canDismiss": boolean | ((data?: any, role?: string) => Promise<boolean>);
+        "shape": 'soft' | 'round' | 'rectangular';
+    }
+    interface IonNavAttributes {
+        "swipeGesture": boolean;
+        "animated": boolean;
+        "root": NavComponent;
+    }
+    interface IonNavLinkAttributes {
+        "component": NavComponent;
+        "routerDirection": RouterDirection;
+    }
+    interface IonNoteAttributes {
+        "color": Color;
+    }
+    interface IonPickerColumnAttributes {
+        "disabled": boolean;
+        "value": string;
+        "color": Color;
+        "numericInput": boolean;
+    }
+    interface IonPickerColumnOptionAttributes {
+        "disabled": boolean;
+        "value": string;
+        "color": Color;
+    }
+    interface IonPickerLegacyAttributes {
+        "overlayIndex": number;
+        "hasController": boolean;
+        "keyboardClose": boolean;
+        "cssClass": string | string[];
+        "duration": number;
+        "showBackdrop": boolean;
+        "backdropDismiss": boolean;
+        "animated": boolean;
+        "isOpen": boolean;
+        "trigger": string | undefined;
+    }
+    interface IonPopoverAttributes {
+        "hasController": boolean;
+        "overlayIndex": number;
+        "component": ComponentRef;
+        "keyboardClose": boolean;
+        "cssClass": string | string[];
+        "backdropDismiss": boolean;
+        "event": string;
+        "showBackdrop": boolean;
+        "translucent": boolean;
+        "animated": boolean;
+        "triggerAction": TriggerAction;
+        "trigger": string | undefined;
+        "size": PopoverSize;
+        "dismissOnSelect": boolean;
+        "reference": PositionReference;
+        "side": PositionSide;
+        "alignment": PositionAlign;
+        "arrow": boolean;
+        "isOpen": boolean;
+        "keyboardEvents": boolean;
+        "focusTrap": boolean;
+        "keepContentsMounted": boolean;
+    }
+    interface IonProgressBarAttributes {
+        "type": 'determinate' | 'indeterminate';
+        "reversed": boolean;
+        "value": number;
+        "buffer": number;
+        "color": Color;
+        "shape": 'round' | 'rectangular';
+    }
+    interface IonRadioAttributes {
+        "color": Color;
+        "name": string;
+        "disabled": boolean;
+        "value": string;
+        "labelPlacement": 'start' | 'end' | 'fixed' | 'stacked';
+        "justify": 'start' | 'end' | 'space-between';
+        "alignment": 'start' | 'center';
+    }
+    interface IonRadioGroupAttributes {
+        "allowEmptySelection": boolean;
+        "compareWith": string | RadioGroupCompareFn | null;
+        "name": string;
+        "value": string;
+        "helperText": string;
+        "errorText": string;
+    }
+    interface IonRangeAttributes {
+        "color": Color;
+        "debounce": number;
+        "name": string;
+        "label": string;
+        "dualKnobs": boolean;
+        "min": number;
+        "max": number;
+        "pin": boolean;
+        "snaps": boolean;
+        "step": number;
+        "ticks": boolean;
+        "activeBarStart": number;
+        "disabled": boolean;
+        "value": RangeValue;
+        "labelPlacement": 'start' | 'end' | 'fixed' | 'stacked';
+    }
+    interface IonRefresherAttributes {
+        "pullMin": number;
+        "pullMax": number;
+        "closeDuration": string;
+        "snapbackDuration": string;
+        "pullFactor": number;
+        "disabled": boolean;
+    }
+    interface IonRefresherContentAttributes {
+        "pullingIcon": SpinnerTypes | string | null;
+        "pullingText": string | IonicSafeString;
+        "refreshingSpinner": SpinnerTypes | null;
+        "refreshingText": string | IonicSafeString;
+    }
+    interface IonReorderGroupAttributes {
+        "disabled": boolean;
+    }
+    interface IonRippleEffectAttributes {
+        "type": 'bounded' | 'unbounded';
+    }
+    interface IonRouteAttributes {
+        "url": string;
+        "component": string;
+    }
+    interface IonRouteRedirectAttributes {
+        "from": string;
+        "to": string | undefined | null;
+    }
+    interface IonRouterAttributes {
+        "root": string;
+        "useHash": boolean;
+    }
+    interface IonRouterLinkAttributes {
+        "color": Color;
+        "href": string | undefined;
+        "rel": string | undefined;
+        "routerDirection": RouterDirection;
+        "target": string | undefined;
+    }
+    interface IonRouterOutletAttributes {
+        "mode": "ios" | "md";
+        "animated": boolean;
+    }
+    interface IonSearchbarAttributes {
+        "color": Color;
+        "animated": boolean;
+        "autocapitalize": string;
+        "autocomplete": AutocompleteTypes;
+        "autocorrect": 'on' | 'off';
+        "cancelButtonIcon": string;
+        "cancelButtonText": string;
+        "clearIcon": string;
+        "debounce": number;
+        "disabled": boolean;
+        "inputmode": 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
+        "enterkeyhint": 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';
+        "maxlength": number;
+        "minlength": number;
+        "name": string;
+        "placeholder": string;
+        "searchIcon": string;
+        "showCancelButton": 'never' | 'focus' | 'always';
+        "showClearButton": 'never' | 'focus' | 'always';
+        "spellcheck": boolean;
+        "type": 'text' | 'password' | 'email' | 'number' | 'search' | 'tel' | 'url';
+        "value": string | null;
+        "shape": 'soft' | 'round' | 'rectangular';
+        "size": 'small' | 'medium' | 'large';
+    }
+    interface IonSegmentAttributes {
+        "color": Color;
+        "disabled": boolean;
+        "scrollable": boolean;
+        "swipeGesture": boolean;
+        "value": string;
+        "selectOnFocus": boolean;
+    }
+    interface IonSegmentButtonAttributes {
+        "contentId": string;
+        "disabled": boolean;
+        "layout": SegmentButtonLayout;
+        "type": 'submit' | 'reset' | 'button';
+        "value": string;
+    }
+    interface IonSegmentViewAttributes {
+        "disabled": boolean;
+        "swipeGesture": boolean;
+    }
+    interface IonSelectAttributes {
+        "cancelText": string;
+        "color": Color;
+        "compareWith": string | SelectCompareFn | null;
+        "disabled": boolean;
+        "fill": 'outline' | 'solid';
+        "errorText": string;
+        "helperText": string;
+        "interface": SelectInterface;
+        "interfaceOptions": string;
+        "justify": 'start' | 'end' | 'space-between';
+        "label": string;
+        "labelPlacement": 'start' | 'end' | 'floating' | 'stacked' | 'fixed';
+        "multiple": boolean;
+        "name": string;
+        "okText": string;
+        "placeholder": string;
+        "selectedText": string | null;
+        "toggleIcon": string;
+        "expandedIcon": string;
+        "required": boolean;
+        "shape": 'soft' | 'round' | 'rectangular';
+        "size": 'small' | 'medium' | 'large';
+        "value": string;
+    }
+    interface IonSelectModalAttributes {
+        "header": string;
+        "cancelText": string;
+        "multiple": boolean;
+    }
+    interface IonSelectOptionAttributes {
+        "disabled": boolean;
+        "value": string;
+    }
+    interface IonSelectPopoverAttributes {
+        "header": string;
+        "subHeader": string;
+        "message": string;
+        "multiple": boolean;
+    }
+    interface IonSkeletonTextAttributes {
+        "animated": boolean;
+    }
+    interface IonSpinnerAttributes {
+        "color": Color;
+        "duration": number;
+        "name": SpinnerTypes;
+        "paused": boolean;
+        "size": 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+    }
+    interface IonSplitPaneAttributes {
+        "contentId": string;
+        "disabled": boolean;
+        "when": string;
+    }
+    interface IonTabAttributes {
+        "active": boolean;
+        "tab": string;
+        "component": ComponentRef;
+    }
+    interface IonTabBarAttributes {
+        "color": Color;
+        "selectedTab": string;
+        "translucent": boolean;
+        "expand": 'compact' | 'full';
+        "shape": 'soft' | 'round' | 'rectangular';
+    }
+    interface IonTabButtonAttributes {
+        "disabled": boolean;
+        "download": string | undefined;
+        "href": string | undefined;
+        "rel": string | undefined;
+        "layout": TabButtonLayout;
+        "selected": boolean;
+        "shape": 'soft' | 'round' | 'rectangular';
+        "tab": string;
+        "target": string | undefined;
+    }
+    interface IonTabsAttributes {
+        "useRouter": boolean;
+    }
+    interface IonTextAttributes {
+        "color": Color;
+    }
+    interface IonTextareaAttributes {
+        "color": Color;
+        "autocapitalize": string;
+        "autofocus": boolean;
+        "clearOnEdit": boolean;
+        "debounce": number;
+        "disabled": boolean;
+        "fill": 'outline' | 'solid';
+        "inputmode": 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
+        "enterkeyhint": 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';
+        "maxlength": number;
+        "minlength": number;
+        "name": string;
+        "placeholder": string;
+        "readonly": boolean;
+        "required": boolean;
+        "spellcheck": boolean;
+        "cols": number;
+        "rows": number;
+        "wrap": 'hard' | 'soft' | 'off';
+        "autoGrow": boolean;
+        "value": string | null;
+        "counter": boolean;
+        "errorText": string;
+        "helperText": string;
+        "label": string;
+        "labelPlacement": 'start' | 'end' | 'floating' | 'stacked' | 'fixed';
+        "shape": 'soft' | 'round' | 'rectangular';
+        "size": 'small' | 'medium' | 'large';
+    }
+    interface IonTitleAttributes {
+        "color": Color;
+        "size": 'large' | 'small';
+    }
+    interface IonToastAttributes {
+        "overlayIndex": number;
+        "hasController": boolean;
+        "color": Color;
+        "cssClass": string | string[];
+        "duration": number;
+        "header": string;
+        "hue": 'bold' | 'subtle';
+        "layout": ToastLayout;
+        "message": string | IonicSafeString;
+        "keyboardClose": boolean;
+        "position": ToastPosition;
+        "positionAnchor": HTMLElement | string;
+        "shape": 'soft' | 'round' | 'rectangular';
+        "translucent": boolean;
+        "animated": boolean;
+        "icon": string;
+        "swipeGesture": ToastSwipeGestureDirection;
+        "isOpen": boolean;
+        "trigger": string | undefined;
+    }
+    interface IonToggleAttributes {
+        "color": Color;
+        "name": string;
+        "checked": boolean;
+        "disabled": boolean;
+        "errorText": string;
+        "helperText": string;
+        "value": string | null;
+        "enableOnOffLabels": boolean | undefined;
+        "labelPlacement": 'start' | 'end' | 'fixed' | 'stacked';
+        "justify": 'start' | 'end' | 'space-between';
+        "alignment": 'start' | 'center';
+        "required": boolean;
+    }
+    interface IonToolbarAttributes {
+        "color": Color;
+    }
+
     interface IntrinsicElements {
-        "ion-accordion": IonAccordion;
-        "ion-accordion-group": IonAccordionGroup;
-        "ion-action-sheet": IonActionSheet;
-        "ion-alert": IonAlert;
+        "ion-accordion": Omit<IonAccordion, keyof IonAccordionAttributes> & { [K in keyof IonAccordion & keyof IonAccordionAttributes]?: IonAccordion[K] } & { [K in keyof IonAccordion & keyof IonAccordionAttributes as `attr:${K}`]?: IonAccordionAttributes[K] } & { [K in keyof IonAccordion & keyof IonAccordionAttributes as `prop:${K}`]?: IonAccordion[K] };
+        "ion-accordion-group": Omit<IonAccordionGroup, keyof IonAccordionGroupAttributes> & { [K in keyof IonAccordionGroup & keyof IonAccordionGroupAttributes]?: IonAccordionGroup[K] } & { [K in keyof IonAccordionGroup & keyof IonAccordionGroupAttributes as `attr:${K}`]?: IonAccordionGroupAttributes[K] } & { [K in keyof IonAccordionGroup & keyof IonAccordionGroupAttributes as `prop:${K}`]?: IonAccordionGroup[K] };
+        "ion-action-sheet": Omit<IonActionSheet, keyof IonActionSheetAttributes> & { [K in keyof IonActionSheet & keyof IonActionSheetAttributes]?: IonActionSheet[K] } & { [K in keyof IonActionSheet & keyof IonActionSheetAttributes as `attr:${K}`]?: IonActionSheetAttributes[K] } & { [K in keyof IonActionSheet & keyof IonActionSheetAttributes as `prop:${K}`]?: IonActionSheet[K] } & OneOf<"overlayIndex", IonActionSheet["overlayIndex"], IonActionSheetAttributes["overlayIndex"]>;
+        "ion-alert": Omit<IonAlert, keyof IonAlertAttributes> & { [K in keyof IonAlert & keyof IonAlertAttributes]?: IonAlert[K] } & { [K in keyof IonAlert & keyof IonAlertAttributes as `attr:${K}`]?: IonAlertAttributes[K] } & { [K in keyof IonAlert & keyof IonAlertAttributes as `prop:${K}`]?: IonAlert[K] } & OneOf<"overlayIndex", IonAlert["overlayIndex"], IonAlertAttributes["overlayIndex"]>;
         "ion-app": IonApp;
-        "ion-avatar": IonAvatar;
-        "ion-back-button": IonBackButton;
-        "ion-backdrop": IonBackdrop;
-        "ion-badge": IonBadge;
-        "ion-breadcrumb": IonBreadcrumb;
-        "ion-breadcrumbs": IonBreadcrumbs;
-        "ion-button": IonButton;
-        "ion-buttons": IonButtons;
-        "ion-card": IonCard;
+        "ion-avatar": Omit<IonAvatar, keyof IonAvatarAttributes> & { [K in keyof IonAvatar & keyof IonAvatarAttributes]?: IonAvatar[K] } & { [K in keyof IonAvatar & keyof IonAvatarAttributes as `attr:${K}`]?: IonAvatarAttributes[K] } & { [K in keyof IonAvatar & keyof IonAvatarAttributes as `prop:${K}`]?: IonAvatar[K] };
+        "ion-back-button": Omit<IonBackButton, keyof IonBackButtonAttributes> & { [K in keyof IonBackButton & keyof IonBackButtonAttributes]?: IonBackButton[K] } & { [K in keyof IonBackButton & keyof IonBackButtonAttributes as `attr:${K}`]?: IonBackButtonAttributes[K] } & { [K in keyof IonBackButton & keyof IonBackButtonAttributes as `prop:${K}`]?: IonBackButton[K] };
+        "ion-backdrop": Omit<IonBackdrop, keyof IonBackdropAttributes> & { [K in keyof IonBackdrop & keyof IonBackdropAttributes]?: IonBackdrop[K] } & { [K in keyof IonBackdrop & keyof IonBackdropAttributes as `attr:${K}`]?: IonBackdropAttributes[K] } & { [K in keyof IonBackdrop & keyof IonBackdropAttributes as `prop:${K}`]?: IonBackdrop[K] };
+        "ion-badge": Omit<IonBadge, keyof IonBadgeAttributes> & { [K in keyof IonBadge & keyof IonBadgeAttributes]?: IonBadge[K] } & { [K in keyof IonBadge & keyof IonBadgeAttributes as `attr:${K}`]?: IonBadgeAttributes[K] } & { [K in keyof IonBadge & keyof IonBadgeAttributes as `prop:${K}`]?: IonBadge[K] };
+        "ion-breadcrumb": Omit<IonBreadcrumb, keyof IonBreadcrumbAttributes> & { [K in keyof IonBreadcrumb & keyof IonBreadcrumbAttributes]?: IonBreadcrumb[K] } & { [K in keyof IonBreadcrumb & keyof IonBreadcrumbAttributes as `attr:${K}`]?: IonBreadcrumbAttributes[K] } & { [K in keyof IonBreadcrumb & keyof IonBreadcrumbAttributes as `prop:${K}`]?: IonBreadcrumb[K] } & OneOf<"last", IonBreadcrumb["last"], IonBreadcrumbAttributes["last"]> & OneOf<"showCollapsedIndicator", IonBreadcrumb["showCollapsedIndicator"], IonBreadcrumbAttributes["showCollapsedIndicator"]>;
+        "ion-breadcrumbs": Omit<IonBreadcrumbs, keyof IonBreadcrumbsAttributes> & { [K in keyof IonBreadcrumbs & keyof IonBreadcrumbsAttributes]?: IonBreadcrumbs[K] } & { [K in keyof IonBreadcrumbs & keyof IonBreadcrumbsAttributes as `attr:${K}`]?: IonBreadcrumbsAttributes[K] } & { [K in keyof IonBreadcrumbs & keyof IonBreadcrumbsAttributes as `prop:${K}`]?: IonBreadcrumbs[K] };
+        "ion-button": Omit<IonButton, keyof IonButtonAttributes> & { [K in keyof IonButton & keyof IonButtonAttributes]?: IonButton[K] } & { [K in keyof IonButton & keyof IonButtonAttributes as `attr:${K}`]?: IonButtonAttributes[K] } & { [K in keyof IonButton & keyof IonButtonAttributes as `prop:${K}`]?: IonButton[K] };
+        "ion-buttons": Omit<IonButtons, keyof IonButtonsAttributes> & { [K in keyof IonButtons & keyof IonButtonsAttributes]?: IonButtons[K] } & { [K in keyof IonButtons & keyof IonButtonsAttributes as `attr:${K}`]?: IonButtonsAttributes[K] } & { [K in keyof IonButtons & keyof IonButtonsAttributes as `prop:${K}`]?: IonButtons[K] };
+        "ion-card": Omit<IonCard, keyof IonCardAttributes> & { [K in keyof IonCard & keyof IonCardAttributes]?: IonCard[K] } & { [K in keyof IonCard & keyof IonCardAttributes as `attr:${K}`]?: IonCardAttributes[K] } & { [K in keyof IonCard & keyof IonCardAttributes as `prop:${K}`]?: IonCard[K] };
         "ion-card-content": IonCardContent;
-        "ion-card-header": IonCardHeader;
-        "ion-card-subtitle": IonCardSubtitle;
-        "ion-card-title": IonCardTitle;
-        "ion-checkbox": IonCheckbox;
-        "ion-chip": IonChip;
-        "ion-col": IonCol;
-        "ion-content": IonContent;
-        "ion-datetime": IonDatetime;
-        "ion-datetime-button": IonDatetimeButton;
-        "ion-divider": IonDivider;
-        "ion-fab": IonFab;
-        "ion-fab-button": IonFabButton;
-        "ion-fab-list": IonFabList;
-        "ion-footer": IonFooter;
-        "ion-grid": IonGrid;
-        "ion-header": IonHeader;
-        "ion-img": IonImg;
-        "ion-infinite-scroll": IonInfiniteScroll;
-        "ion-infinite-scroll-content": IonInfiniteScrollContent;
-        "ion-input": IonInput;
-        "ion-input-otp": IonInputOtp;
-        "ion-input-password-toggle": IonInputPasswordToggle;
-        "ion-item": IonItem;
-        "ion-item-divider": IonItemDivider;
+        "ion-card-header": Omit<IonCardHeader, keyof IonCardHeaderAttributes> & { [K in keyof IonCardHeader & keyof IonCardHeaderAttributes]?: IonCardHeader[K] } & { [K in keyof IonCardHeader & keyof IonCardHeaderAttributes as `attr:${K}`]?: IonCardHeaderAttributes[K] } & { [K in keyof IonCardHeader & keyof IonCardHeaderAttributes as `prop:${K}`]?: IonCardHeader[K] };
+        "ion-card-subtitle": Omit<IonCardSubtitle, keyof IonCardSubtitleAttributes> & { [K in keyof IonCardSubtitle & keyof IonCardSubtitleAttributes]?: IonCardSubtitle[K] } & { [K in keyof IonCardSubtitle & keyof IonCardSubtitleAttributes as `attr:${K}`]?: IonCardSubtitleAttributes[K] } & { [K in keyof IonCardSubtitle & keyof IonCardSubtitleAttributes as `prop:${K}`]?: IonCardSubtitle[K] };
+        "ion-card-title": Omit<IonCardTitle, keyof IonCardTitleAttributes> & { [K in keyof IonCardTitle & keyof IonCardTitleAttributes]?: IonCardTitle[K] } & { [K in keyof IonCardTitle & keyof IonCardTitleAttributes as `attr:${K}`]?: IonCardTitleAttributes[K] } & { [K in keyof IonCardTitle & keyof IonCardTitleAttributes as `prop:${K}`]?: IonCardTitle[K] };
+        "ion-checkbox": Omit<IonCheckbox, keyof IonCheckboxAttributes> & { [K in keyof IonCheckbox & keyof IonCheckboxAttributes]?: IonCheckbox[K] } & { [K in keyof IonCheckbox & keyof IonCheckboxAttributes as `attr:${K}`]?: IonCheckboxAttributes[K] } & { [K in keyof IonCheckbox & keyof IonCheckboxAttributes as `prop:${K}`]?: IonCheckbox[K] };
+        "ion-chip": Omit<IonChip, keyof IonChipAttributes> & { [K in keyof IonChip & keyof IonChipAttributes]?: IonChip[K] } & { [K in keyof IonChip & keyof IonChipAttributes as `attr:${K}`]?: IonChipAttributes[K] } & { [K in keyof IonChip & keyof IonChipAttributes as `prop:${K}`]?: IonChip[K] };
+        "ion-col": Omit<IonCol, keyof IonColAttributes> & { [K in keyof IonCol & keyof IonColAttributes]?: IonCol[K] } & { [K in keyof IonCol & keyof IonColAttributes as `attr:${K}`]?: IonColAttributes[K] } & { [K in keyof IonCol & keyof IonColAttributes as `prop:${K}`]?: IonCol[K] };
+        "ion-content": Omit<IonContent, keyof IonContentAttributes> & { [K in keyof IonContent & keyof IonContentAttributes]?: IonContent[K] } & { [K in keyof IonContent & keyof IonContentAttributes as `attr:${K}`]?: IonContentAttributes[K] } & { [K in keyof IonContent & keyof IonContentAttributes as `prop:${K}`]?: IonContent[K] };
+        "ion-datetime": Omit<IonDatetime, keyof IonDatetimeAttributes> & { [K in keyof IonDatetime & keyof IonDatetimeAttributes]?: IonDatetime[K] } & { [K in keyof IonDatetime & keyof IonDatetimeAttributes as `attr:${K}`]?: IonDatetimeAttributes[K] } & { [K in keyof IonDatetime & keyof IonDatetimeAttributes as `prop:${K}`]?: IonDatetime[K] };
+        "ion-datetime-button": Omit<IonDatetimeButton, keyof IonDatetimeButtonAttributes> & { [K in keyof IonDatetimeButton & keyof IonDatetimeButtonAttributes]?: IonDatetimeButton[K] } & { [K in keyof IonDatetimeButton & keyof IonDatetimeButtonAttributes as `attr:${K}`]?: IonDatetimeButtonAttributes[K] } & { [K in keyof IonDatetimeButton & keyof IonDatetimeButtonAttributes as `prop:${K}`]?: IonDatetimeButton[K] };
+        "ion-divider": Omit<IonDivider, keyof IonDividerAttributes> & { [K in keyof IonDivider & keyof IonDividerAttributes]?: IonDivider[K] } & { [K in keyof IonDivider & keyof IonDividerAttributes as `attr:${K}`]?: IonDividerAttributes[K] } & { [K in keyof IonDivider & keyof IonDividerAttributes as `prop:${K}`]?: IonDivider[K] };
+        "ion-fab": Omit<IonFab, keyof IonFabAttributes> & { [K in keyof IonFab & keyof IonFabAttributes]?: IonFab[K] } & { [K in keyof IonFab & keyof IonFabAttributes as `attr:${K}`]?: IonFabAttributes[K] } & { [K in keyof IonFab & keyof IonFabAttributes as `prop:${K}`]?: IonFab[K] };
+        "ion-fab-button": Omit<IonFabButton, keyof IonFabButtonAttributes> & { [K in keyof IonFabButton & keyof IonFabButtonAttributes]?: IonFabButton[K] } & { [K in keyof IonFabButton & keyof IonFabButtonAttributes as `attr:${K}`]?: IonFabButtonAttributes[K] } & { [K in keyof IonFabButton & keyof IonFabButtonAttributes as `prop:${K}`]?: IonFabButton[K] };
+        "ion-fab-list": Omit<IonFabList, keyof IonFabListAttributes> & { [K in keyof IonFabList & keyof IonFabListAttributes]?: IonFabList[K] } & { [K in keyof IonFabList & keyof IonFabListAttributes as `attr:${K}`]?: IonFabListAttributes[K] } & { [K in keyof IonFabList & keyof IonFabListAttributes as `prop:${K}`]?: IonFabList[K] };
+        "ion-footer": Omit<IonFooter, keyof IonFooterAttributes> & { [K in keyof IonFooter & keyof IonFooterAttributes]?: IonFooter[K] } & { [K in keyof IonFooter & keyof IonFooterAttributes as `attr:${K}`]?: IonFooterAttributes[K] } & { [K in keyof IonFooter & keyof IonFooterAttributes as `prop:${K}`]?: IonFooter[K] };
+        "ion-grid": Omit<IonGrid, keyof IonGridAttributes> & { [K in keyof IonGrid & keyof IonGridAttributes]?: IonGrid[K] } & { [K in keyof IonGrid & keyof IonGridAttributes as `attr:${K}`]?: IonGridAttributes[K] } & { [K in keyof IonGrid & keyof IonGridAttributes as `prop:${K}`]?: IonGrid[K] };
+        "ion-header": Omit<IonHeader, keyof IonHeaderAttributes> & { [K in keyof IonHeader & keyof IonHeaderAttributes]?: IonHeader[K] } & { [K in keyof IonHeader & keyof IonHeaderAttributes as `attr:${K}`]?: IonHeaderAttributes[K] } & { [K in keyof IonHeader & keyof IonHeaderAttributes as `prop:${K}`]?: IonHeader[K] };
+        "ion-img": Omit<IonImg, keyof IonImgAttributes> & { [K in keyof IonImg & keyof IonImgAttributes]?: IonImg[K] } & { [K in keyof IonImg & keyof IonImgAttributes as `attr:${K}`]?: IonImgAttributes[K] } & { [K in keyof IonImg & keyof IonImgAttributes as `prop:${K}`]?: IonImg[K] };
+        "ion-infinite-scroll": Omit<IonInfiniteScroll, keyof IonInfiniteScrollAttributes> & { [K in keyof IonInfiniteScroll & keyof IonInfiniteScrollAttributes]?: IonInfiniteScroll[K] } & { [K in keyof IonInfiniteScroll & keyof IonInfiniteScrollAttributes as `attr:${K}`]?: IonInfiniteScrollAttributes[K] } & { [K in keyof IonInfiniteScroll & keyof IonInfiniteScrollAttributes as `prop:${K}`]?: IonInfiniteScroll[K] };
+        "ion-infinite-scroll-content": Omit<IonInfiniteScrollContent, keyof IonInfiniteScrollContentAttributes> & { [K in keyof IonInfiniteScrollContent & keyof IonInfiniteScrollContentAttributes]?: IonInfiniteScrollContent[K] } & { [K in keyof IonInfiniteScrollContent & keyof IonInfiniteScrollContentAttributes as `attr:${K}`]?: IonInfiniteScrollContentAttributes[K] } & { [K in keyof IonInfiniteScrollContent & keyof IonInfiniteScrollContentAttributes as `prop:${K}`]?: IonInfiniteScrollContent[K] };
+        "ion-input": Omit<IonInput, keyof IonInputAttributes> & { [K in keyof IonInput & keyof IonInputAttributes]?: IonInput[K] } & { [K in keyof IonInput & keyof IonInputAttributes as `attr:${K}`]?: IonInputAttributes[K] } & { [K in keyof IonInput & keyof IonInputAttributes as `prop:${K}`]?: IonInput[K] };
+        "ion-input-otp": Omit<IonInputOtp, keyof IonInputOtpAttributes> & { [K in keyof IonInputOtp & keyof IonInputOtpAttributes]?: IonInputOtp[K] } & { [K in keyof IonInputOtp & keyof IonInputOtpAttributes as `attr:${K}`]?: IonInputOtpAttributes[K] } & { [K in keyof IonInputOtp & keyof IonInputOtpAttributes as `prop:${K}`]?: IonInputOtp[K] };
+        "ion-input-password-toggle": Omit<IonInputPasswordToggle, keyof IonInputPasswordToggleAttributes> & { [K in keyof IonInputPasswordToggle & keyof IonInputPasswordToggleAttributes]?: IonInputPasswordToggle[K] } & { [K in keyof IonInputPasswordToggle & keyof IonInputPasswordToggleAttributes as `attr:${K}`]?: IonInputPasswordToggleAttributes[K] } & { [K in keyof IonInputPasswordToggle & keyof IonInputPasswordToggleAttributes as `prop:${K}`]?: IonInputPasswordToggle[K] };
+        "ion-item": Omit<IonItem, keyof IonItemAttributes> & { [K in keyof IonItem & keyof IonItemAttributes]?: IonItem[K] } & { [K in keyof IonItem & keyof IonItemAttributes as `attr:${K}`]?: IonItemAttributes[K] } & { [K in keyof IonItem & keyof IonItemAttributes as `prop:${K}`]?: IonItem[K] };
+        "ion-item-divider": Omit<IonItemDivider, keyof IonItemDividerAttributes> & { [K in keyof IonItemDivider & keyof IonItemDividerAttributes]?: IonItemDivider[K] } & { [K in keyof IonItemDivider & keyof IonItemDividerAttributes as `attr:${K}`]?: IonItemDividerAttributes[K] } & { [K in keyof IonItemDivider & keyof IonItemDividerAttributes as `prop:${K}`]?: IonItemDivider[K] };
         "ion-item-group": IonItemGroup;
-        "ion-item-option": IonItemOption;
-        "ion-item-options": IonItemOptions;
-        "ion-item-sliding": IonItemSliding;
-        "ion-label": IonLabel;
-        "ion-list": IonList;
-        "ion-list-header": IonListHeader;
-        "ion-loading": IonLoading;
-        "ion-menu": IonMenu;
-        "ion-menu-button": IonMenuButton;
-        "ion-menu-toggle": IonMenuToggle;
-        "ion-modal": IonModal;
-        "ion-nav": IonNav;
-        "ion-nav-link": IonNavLink;
-        "ion-note": IonNote;
+        "ion-item-option": Omit<IonItemOption, keyof IonItemOptionAttributes> & { [K in keyof IonItemOption & keyof IonItemOptionAttributes]?: IonItemOption[K] } & { [K in keyof IonItemOption & keyof IonItemOptionAttributes as `attr:${K}`]?: IonItemOptionAttributes[K] } & { [K in keyof IonItemOption & keyof IonItemOptionAttributes as `prop:${K}`]?: IonItemOption[K] };
+        "ion-item-options": Omit<IonItemOptions, keyof IonItemOptionsAttributes> & { [K in keyof IonItemOptions & keyof IonItemOptionsAttributes]?: IonItemOptions[K] } & { [K in keyof IonItemOptions & keyof IonItemOptionsAttributes as `attr:${K}`]?: IonItemOptionsAttributes[K] } & { [K in keyof IonItemOptions & keyof IonItemOptionsAttributes as `prop:${K}`]?: IonItemOptions[K] };
+        "ion-item-sliding": Omit<IonItemSliding, keyof IonItemSlidingAttributes> & { [K in keyof IonItemSliding & keyof IonItemSlidingAttributes]?: IonItemSliding[K] } & { [K in keyof IonItemSliding & keyof IonItemSlidingAttributes as `attr:${K}`]?: IonItemSlidingAttributes[K] } & { [K in keyof IonItemSliding & keyof IonItemSlidingAttributes as `prop:${K}`]?: IonItemSliding[K] };
+        "ion-label": Omit<IonLabel, keyof IonLabelAttributes> & { [K in keyof IonLabel & keyof IonLabelAttributes]?: IonLabel[K] } & { [K in keyof IonLabel & keyof IonLabelAttributes as `attr:${K}`]?: IonLabelAttributes[K] } & { [K in keyof IonLabel & keyof IonLabelAttributes as `prop:${K}`]?: IonLabel[K] };
+        "ion-list": Omit<IonList, keyof IonListAttributes> & { [K in keyof IonList & keyof IonListAttributes]?: IonList[K] } & { [K in keyof IonList & keyof IonListAttributes as `attr:${K}`]?: IonListAttributes[K] } & { [K in keyof IonList & keyof IonListAttributes as `prop:${K}`]?: IonList[K] };
+        "ion-list-header": Omit<IonListHeader, keyof IonListHeaderAttributes> & { [K in keyof IonListHeader & keyof IonListHeaderAttributes]?: IonListHeader[K] } & { [K in keyof IonListHeader & keyof IonListHeaderAttributes as `attr:${K}`]?: IonListHeaderAttributes[K] } & { [K in keyof IonListHeader & keyof IonListHeaderAttributes as `prop:${K}`]?: IonListHeader[K] };
+        "ion-loading": Omit<IonLoading, keyof IonLoadingAttributes> & { [K in keyof IonLoading & keyof IonLoadingAttributes]?: IonLoading[K] } & { [K in keyof IonLoading & keyof IonLoadingAttributes as `attr:${K}`]?: IonLoadingAttributes[K] } & { [K in keyof IonLoading & keyof IonLoadingAttributes as `prop:${K}`]?: IonLoading[K] } & OneOf<"overlayIndex", IonLoading["overlayIndex"], IonLoadingAttributes["overlayIndex"]>;
+        "ion-menu": Omit<IonMenu, keyof IonMenuAttributes> & { [K in keyof IonMenu & keyof IonMenuAttributes]?: IonMenu[K] } & { [K in keyof IonMenu & keyof IonMenuAttributes as `attr:${K}`]?: IonMenuAttributes[K] } & { [K in keyof IonMenu & keyof IonMenuAttributes as `prop:${K}`]?: IonMenu[K] };
+        "ion-menu-button": Omit<IonMenuButton, keyof IonMenuButtonAttributes> & { [K in keyof IonMenuButton & keyof IonMenuButtonAttributes]?: IonMenuButton[K] } & { [K in keyof IonMenuButton & keyof IonMenuButtonAttributes as `attr:${K}`]?: IonMenuButtonAttributes[K] } & { [K in keyof IonMenuButton & keyof IonMenuButtonAttributes as `prop:${K}`]?: IonMenuButton[K] };
+        "ion-menu-toggle": Omit<IonMenuToggle, keyof IonMenuToggleAttributes> & { [K in keyof IonMenuToggle & keyof IonMenuToggleAttributes]?: IonMenuToggle[K] } & { [K in keyof IonMenuToggle & keyof IonMenuToggleAttributes as `attr:${K}`]?: IonMenuToggleAttributes[K] } & { [K in keyof IonMenuToggle & keyof IonMenuToggleAttributes as `prop:${K}`]?: IonMenuToggle[K] };
+        "ion-modal": Omit<IonModal, keyof IonModalAttributes> & { [K in keyof IonModal & keyof IonModalAttributes]?: IonModal[K] } & { [K in keyof IonModal & keyof IonModalAttributes as `attr:${K}`]?: IonModalAttributes[K] } & { [K in keyof IonModal & keyof IonModalAttributes as `prop:${K}`]?: IonModal[K] } & OneOf<"overlayIndex", IonModal["overlayIndex"], IonModalAttributes["overlayIndex"]>;
+        "ion-nav": Omit<IonNav, keyof IonNavAttributes> & { [K in keyof IonNav & keyof IonNavAttributes]?: IonNav[K] } & { [K in keyof IonNav & keyof IonNavAttributes as `attr:${K}`]?: IonNavAttributes[K] } & { [K in keyof IonNav & keyof IonNavAttributes as `prop:${K}`]?: IonNav[K] };
+        "ion-nav-link": Omit<IonNavLink, keyof IonNavLinkAttributes> & { [K in keyof IonNavLink & keyof IonNavLinkAttributes]?: IonNavLink[K] } & { [K in keyof IonNavLink & keyof IonNavLinkAttributes as `attr:${K}`]?: IonNavLinkAttributes[K] } & { [K in keyof IonNavLink & keyof IonNavLinkAttributes as `prop:${K}`]?: IonNavLink[K] };
+        "ion-note": Omit<IonNote, keyof IonNoteAttributes> & { [K in keyof IonNote & keyof IonNoteAttributes]?: IonNote[K] } & { [K in keyof IonNote & keyof IonNoteAttributes as `attr:${K}`]?: IonNoteAttributes[K] } & { [K in keyof IonNote & keyof IonNoteAttributes as `prop:${K}`]?: IonNote[K] };
         "ion-picker": IonPicker;
-        "ion-picker-column": IonPickerColumn;
-        "ion-picker-column-option": IonPickerColumnOption;
-        "ion-picker-legacy": IonPickerLegacy;
+        "ion-picker-column": Omit<IonPickerColumn, keyof IonPickerColumnAttributes> & { [K in keyof IonPickerColumn & keyof IonPickerColumnAttributes]?: IonPickerColumn[K] } & { [K in keyof IonPickerColumn & keyof IonPickerColumnAttributes as `attr:${K}`]?: IonPickerColumnAttributes[K] } & { [K in keyof IonPickerColumn & keyof IonPickerColumnAttributes as `prop:${K}`]?: IonPickerColumn[K] };
+        "ion-picker-column-option": Omit<IonPickerColumnOption, keyof IonPickerColumnOptionAttributes> & { [K in keyof IonPickerColumnOption & keyof IonPickerColumnOptionAttributes]?: IonPickerColumnOption[K] } & { [K in keyof IonPickerColumnOption & keyof IonPickerColumnOptionAttributes as `attr:${K}`]?: IonPickerColumnOptionAttributes[K] } & { [K in keyof IonPickerColumnOption & keyof IonPickerColumnOptionAttributes as `prop:${K}`]?: IonPickerColumnOption[K] };
+        "ion-picker-legacy": Omit<IonPickerLegacy, keyof IonPickerLegacyAttributes> & { [K in keyof IonPickerLegacy & keyof IonPickerLegacyAttributes]?: IonPickerLegacy[K] } & { [K in keyof IonPickerLegacy & keyof IonPickerLegacyAttributes as `attr:${K}`]?: IonPickerLegacyAttributes[K] } & { [K in keyof IonPickerLegacy & keyof IonPickerLegacyAttributes as `prop:${K}`]?: IonPickerLegacy[K] } & OneOf<"overlayIndex", IonPickerLegacy["overlayIndex"], IonPickerLegacyAttributes["overlayIndex"]>;
         "ion-picker-legacy-column": IonPickerLegacyColumn;
-        "ion-popover": IonPopover;
-        "ion-progress-bar": IonProgressBar;
-        "ion-radio": IonRadio;
-        "ion-radio-group": IonRadioGroup;
-        "ion-range": IonRange;
-        "ion-refresher": IonRefresher;
-        "ion-refresher-content": IonRefresherContent;
+        "ion-popover": Omit<IonPopover, keyof IonPopoverAttributes> & { [K in keyof IonPopover & keyof IonPopoverAttributes]?: IonPopover[K] } & { [K in keyof IonPopover & keyof IonPopoverAttributes as `attr:${K}`]?: IonPopoverAttributes[K] } & { [K in keyof IonPopover & keyof IonPopoverAttributes as `prop:${K}`]?: IonPopover[K] } & OneOf<"overlayIndex", IonPopover["overlayIndex"], IonPopoverAttributes["overlayIndex"]>;
+        "ion-progress-bar": Omit<IonProgressBar, keyof IonProgressBarAttributes> & { [K in keyof IonProgressBar & keyof IonProgressBarAttributes]?: IonProgressBar[K] } & { [K in keyof IonProgressBar & keyof IonProgressBarAttributes as `attr:${K}`]?: IonProgressBarAttributes[K] } & { [K in keyof IonProgressBar & keyof IonProgressBarAttributes as `prop:${K}`]?: IonProgressBar[K] };
+        "ion-radio": Omit<IonRadio, keyof IonRadioAttributes> & { [K in keyof IonRadio & keyof IonRadioAttributes]?: IonRadio[K] } & { [K in keyof IonRadio & keyof IonRadioAttributes as `attr:${K}`]?: IonRadioAttributes[K] } & { [K in keyof IonRadio & keyof IonRadioAttributes as `prop:${K}`]?: IonRadio[K] };
+        "ion-radio-group": Omit<IonRadioGroup, keyof IonRadioGroupAttributes> & { [K in keyof IonRadioGroup & keyof IonRadioGroupAttributes]?: IonRadioGroup[K] } & { [K in keyof IonRadioGroup & keyof IonRadioGroupAttributes as `attr:${K}`]?: IonRadioGroupAttributes[K] } & { [K in keyof IonRadioGroup & keyof IonRadioGroupAttributes as `prop:${K}`]?: IonRadioGroup[K] };
+        "ion-range": Omit<IonRange, keyof IonRangeAttributes> & { [K in keyof IonRange & keyof IonRangeAttributes]?: IonRange[K] } & { [K in keyof IonRange & keyof IonRangeAttributes as `attr:${K}`]?: IonRangeAttributes[K] } & { [K in keyof IonRange & keyof IonRangeAttributes as `prop:${K}`]?: IonRange[K] };
+        "ion-refresher": Omit<IonRefresher, keyof IonRefresherAttributes> & { [K in keyof IonRefresher & keyof IonRefresherAttributes]?: IonRefresher[K] } & { [K in keyof IonRefresher & keyof IonRefresherAttributes as `attr:${K}`]?: IonRefresherAttributes[K] } & { [K in keyof IonRefresher & keyof IonRefresherAttributes as `prop:${K}`]?: IonRefresher[K] };
+        "ion-refresher-content": Omit<IonRefresherContent, keyof IonRefresherContentAttributes> & { [K in keyof IonRefresherContent & keyof IonRefresherContentAttributes]?: IonRefresherContent[K] } & { [K in keyof IonRefresherContent & keyof IonRefresherContentAttributes as `attr:${K}`]?: IonRefresherContentAttributes[K] } & { [K in keyof IonRefresherContent & keyof IonRefresherContentAttributes as `prop:${K}`]?: IonRefresherContent[K] };
         "ion-reorder": IonReorder;
-        "ion-reorder-group": IonReorderGroup;
-        "ion-ripple-effect": IonRippleEffect;
-        "ion-route": IonRoute;
-        "ion-route-redirect": IonRouteRedirect;
-        "ion-router": IonRouter;
-        "ion-router-link": IonRouterLink;
-        "ion-router-outlet": IonRouterOutlet;
+        "ion-reorder-group": Omit<IonReorderGroup, keyof IonReorderGroupAttributes> & { [K in keyof IonReorderGroup & keyof IonReorderGroupAttributes]?: IonReorderGroup[K] } & { [K in keyof IonReorderGroup & keyof IonReorderGroupAttributes as `attr:${K}`]?: IonReorderGroupAttributes[K] } & { [K in keyof IonReorderGroup & keyof IonReorderGroupAttributes as `prop:${K}`]?: IonReorderGroup[K] };
+        "ion-ripple-effect": Omit<IonRippleEffect, keyof IonRippleEffectAttributes> & { [K in keyof IonRippleEffect & keyof IonRippleEffectAttributes]?: IonRippleEffect[K] } & { [K in keyof IonRippleEffect & keyof IonRippleEffectAttributes as `attr:${K}`]?: IonRippleEffectAttributes[K] } & { [K in keyof IonRippleEffect & keyof IonRippleEffectAttributes as `prop:${K}`]?: IonRippleEffect[K] };
+        "ion-route": Omit<IonRoute, keyof IonRouteAttributes> & { [K in keyof IonRoute & keyof IonRouteAttributes]?: IonRoute[K] } & { [K in keyof IonRoute & keyof IonRouteAttributes as `attr:${K}`]?: IonRouteAttributes[K] } & { [K in keyof IonRoute & keyof IonRouteAttributes as `prop:${K}`]?: IonRoute[K] } & OneOf<"component", IonRoute["component"], IonRouteAttributes["component"]>;
+        "ion-route-redirect": Omit<IonRouteRedirect, keyof IonRouteRedirectAttributes> & { [K in keyof IonRouteRedirect & keyof IonRouteRedirectAttributes]?: IonRouteRedirect[K] } & { [K in keyof IonRouteRedirect & keyof IonRouteRedirectAttributes as `attr:${K}`]?: IonRouteRedirectAttributes[K] } & { [K in keyof IonRouteRedirect & keyof IonRouteRedirectAttributes as `prop:${K}`]?: IonRouteRedirect[K] } & OneOf<"from", IonRouteRedirect["from"], IonRouteRedirectAttributes["from"]> & OneOf<"to", IonRouteRedirect["to"], IonRouteRedirectAttributes["to"]>;
+        "ion-router": Omit<IonRouter, keyof IonRouterAttributes> & { [K in keyof IonRouter & keyof IonRouterAttributes]?: IonRouter[K] } & { [K in keyof IonRouter & keyof IonRouterAttributes as `attr:${K}`]?: IonRouterAttributes[K] } & { [K in keyof IonRouter & keyof IonRouterAttributes as `prop:${K}`]?: IonRouter[K] };
+        "ion-router-link": Omit<IonRouterLink, keyof IonRouterLinkAttributes> & { [K in keyof IonRouterLink & keyof IonRouterLinkAttributes]?: IonRouterLink[K] } & { [K in keyof IonRouterLink & keyof IonRouterLinkAttributes as `attr:${K}`]?: IonRouterLinkAttributes[K] } & { [K in keyof IonRouterLink & keyof IonRouterLinkAttributes as `prop:${K}`]?: IonRouterLink[K] };
+        "ion-router-outlet": Omit<IonRouterOutlet, keyof IonRouterOutletAttributes> & { [K in keyof IonRouterOutlet & keyof IonRouterOutletAttributes]?: IonRouterOutlet[K] } & { [K in keyof IonRouterOutlet & keyof IonRouterOutletAttributes as `attr:${K}`]?: IonRouterOutletAttributes[K] } & { [K in keyof IonRouterOutlet & keyof IonRouterOutletAttributes as `prop:${K}`]?: IonRouterOutlet[K] };
         "ion-row": IonRow;
-        "ion-searchbar": IonSearchbar;
-        "ion-segment": IonSegment;
-        "ion-segment-button": IonSegmentButton;
+        "ion-searchbar": Omit<IonSearchbar, keyof IonSearchbarAttributes> & { [K in keyof IonSearchbar & keyof IonSearchbarAttributes]?: IonSearchbar[K] } & { [K in keyof IonSearchbar & keyof IonSearchbarAttributes as `attr:${K}`]?: IonSearchbarAttributes[K] } & { [K in keyof IonSearchbar & keyof IonSearchbarAttributes as `prop:${K}`]?: IonSearchbar[K] };
+        "ion-segment": Omit<IonSegment, keyof IonSegmentAttributes> & { [K in keyof IonSegment & keyof IonSegmentAttributes]?: IonSegment[K] } & { [K in keyof IonSegment & keyof IonSegmentAttributes as `attr:${K}`]?: IonSegmentAttributes[K] } & { [K in keyof IonSegment & keyof IonSegmentAttributes as `prop:${K}`]?: IonSegment[K] };
+        "ion-segment-button": Omit<IonSegmentButton, keyof IonSegmentButtonAttributes> & { [K in keyof IonSegmentButton & keyof IonSegmentButtonAttributes]?: IonSegmentButton[K] } & { [K in keyof IonSegmentButton & keyof IonSegmentButtonAttributes as `attr:${K}`]?: IonSegmentButtonAttributes[K] } & { [K in keyof IonSegmentButton & keyof IonSegmentButtonAttributes as `prop:${K}`]?: IonSegmentButton[K] };
         "ion-segment-content": IonSegmentContent;
-        "ion-segment-view": IonSegmentView;
-        "ion-select": IonSelect;
-        "ion-select-modal": IonSelectModal;
-        "ion-select-option": IonSelectOption;
-        "ion-select-popover": IonSelectPopover;
-        "ion-skeleton-text": IonSkeletonText;
-        "ion-spinner": IonSpinner;
-        "ion-split-pane": IonSplitPane;
-        "ion-tab": IonTab;
-        "ion-tab-bar": IonTabBar;
-        "ion-tab-button": IonTabButton;
-        "ion-tabs": IonTabs;
-        "ion-text": IonText;
-        "ion-textarea": IonTextarea;
+        "ion-segment-view": Omit<IonSegmentView, keyof IonSegmentViewAttributes> & { [K in keyof IonSegmentView & keyof IonSegmentViewAttributes]?: IonSegmentView[K] } & { [K in keyof IonSegmentView & keyof IonSegmentViewAttributes as `attr:${K}`]?: IonSegmentViewAttributes[K] } & { [K in keyof IonSegmentView & keyof IonSegmentViewAttributes as `prop:${K}`]?: IonSegmentView[K] };
+        "ion-select": Omit<IonSelect, keyof IonSelectAttributes> & { [K in keyof IonSelect & keyof IonSelectAttributes]?: IonSelect[K] } & { [K in keyof IonSelect & keyof IonSelectAttributes as `attr:${K}`]?: IonSelectAttributes[K] } & { [K in keyof IonSelect & keyof IonSelectAttributes as `prop:${K}`]?: IonSelect[K] };
+        "ion-select-modal": Omit<IonSelectModal, keyof IonSelectModalAttributes> & { [K in keyof IonSelectModal & keyof IonSelectModalAttributes]?: IonSelectModal[K] } & { [K in keyof IonSelectModal & keyof IonSelectModalAttributes as `attr:${K}`]?: IonSelectModalAttributes[K] } & { [K in keyof IonSelectModal & keyof IonSelectModalAttributes as `prop:${K}`]?: IonSelectModal[K] };
+        "ion-select-option": Omit<IonSelectOption, keyof IonSelectOptionAttributes> & { [K in keyof IonSelectOption & keyof IonSelectOptionAttributes]?: IonSelectOption[K] } & { [K in keyof IonSelectOption & keyof IonSelectOptionAttributes as `attr:${K}`]?: IonSelectOptionAttributes[K] } & { [K in keyof IonSelectOption & keyof IonSelectOptionAttributes as `prop:${K}`]?: IonSelectOption[K] };
+        "ion-select-popover": Omit<IonSelectPopover, keyof IonSelectPopoverAttributes> & { [K in keyof IonSelectPopover & keyof IonSelectPopoverAttributes]?: IonSelectPopover[K] } & { [K in keyof IonSelectPopover & keyof IonSelectPopoverAttributes as `attr:${K}`]?: IonSelectPopoverAttributes[K] } & { [K in keyof IonSelectPopover & keyof IonSelectPopoverAttributes as `prop:${K}`]?: IonSelectPopover[K] };
+        "ion-skeleton-text": Omit<IonSkeletonText, keyof IonSkeletonTextAttributes> & { [K in keyof IonSkeletonText & keyof IonSkeletonTextAttributes]?: IonSkeletonText[K] } & { [K in keyof IonSkeletonText & keyof IonSkeletonTextAttributes as `attr:${K}`]?: IonSkeletonTextAttributes[K] } & { [K in keyof IonSkeletonText & keyof IonSkeletonTextAttributes as `prop:${K}`]?: IonSkeletonText[K] };
+        "ion-spinner": Omit<IonSpinner, keyof IonSpinnerAttributes> & { [K in keyof IonSpinner & keyof IonSpinnerAttributes]?: IonSpinner[K] } & { [K in keyof IonSpinner & keyof IonSpinnerAttributes as `attr:${K}`]?: IonSpinnerAttributes[K] } & { [K in keyof IonSpinner & keyof IonSpinnerAttributes as `prop:${K}`]?: IonSpinner[K] };
+        "ion-split-pane": Omit<IonSplitPane, keyof IonSplitPaneAttributes> & { [K in keyof IonSplitPane & keyof IonSplitPaneAttributes]?: IonSplitPane[K] } & { [K in keyof IonSplitPane & keyof IonSplitPaneAttributes as `attr:${K}`]?: IonSplitPaneAttributes[K] } & { [K in keyof IonSplitPane & keyof IonSplitPaneAttributes as `prop:${K}`]?: IonSplitPane[K] };
+        "ion-tab": Omit<IonTab, keyof IonTabAttributes> & { [K in keyof IonTab & keyof IonTabAttributes]?: IonTab[K] } & { [K in keyof IonTab & keyof IonTabAttributes as `attr:${K}`]?: IonTabAttributes[K] } & { [K in keyof IonTab & keyof IonTabAttributes as `prop:${K}`]?: IonTab[K] } & OneOf<"tab", IonTab["tab"], IonTabAttributes["tab"]>;
+        "ion-tab-bar": Omit<IonTabBar, keyof IonTabBarAttributes> & { [K in keyof IonTabBar & keyof IonTabBarAttributes]?: IonTabBar[K] } & { [K in keyof IonTabBar & keyof IonTabBarAttributes as `attr:${K}`]?: IonTabBarAttributes[K] } & { [K in keyof IonTabBar & keyof IonTabBarAttributes as `prop:${K}`]?: IonTabBar[K] };
+        "ion-tab-button": Omit<IonTabButton, keyof IonTabButtonAttributes> & { [K in keyof IonTabButton & keyof IonTabButtonAttributes]?: IonTabButton[K] } & { [K in keyof IonTabButton & keyof IonTabButtonAttributes as `attr:${K}`]?: IonTabButtonAttributes[K] } & { [K in keyof IonTabButton & keyof IonTabButtonAttributes as `prop:${K}`]?: IonTabButton[K] };
+        "ion-tabs": Omit<IonTabs, keyof IonTabsAttributes> & { [K in keyof IonTabs & keyof IonTabsAttributes]?: IonTabs[K] } & { [K in keyof IonTabs & keyof IonTabsAttributes as `attr:${K}`]?: IonTabsAttributes[K] } & { [K in keyof IonTabs & keyof IonTabsAttributes as `prop:${K}`]?: IonTabs[K] };
+        "ion-text": Omit<IonText, keyof IonTextAttributes> & { [K in keyof IonText & keyof IonTextAttributes]?: IonText[K] } & { [K in keyof IonText & keyof IonTextAttributes as `attr:${K}`]?: IonTextAttributes[K] } & { [K in keyof IonText & keyof IonTextAttributes as `prop:${K}`]?: IonText[K] };
+        "ion-textarea": Omit<IonTextarea, keyof IonTextareaAttributes> & { [K in keyof IonTextarea & keyof IonTextareaAttributes]?: IonTextarea[K] } & { [K in keyof IonTextarea & keyof IonTextareaAttributes as `attr:${K}`]?: IonTextareaAttributes[K] } & { [K in keyof IonTextarea & keyof IonTextareaAttributes as `prop:${K}`]?: IonTextarea[K] };
         "ion-thumbnail": IonThumbnail;
-        "ion-title": IonTitle;
-        "ion-toast": IonToast;
-        "ion-toggle": IonToggle;
-        "ion-toolbar": IonToolbar;
+        "ion-title": Omit<IonTitle, keyof IonTitleAttributes> & { [K in keyof IonTitle & keyof IonTitleAttributes]?: IonTitle[K] } & { [K in keyof IonTitle & keyof IonTitleAttributes as `attr:${K}`]?: IonTitleAttributes[K] } & { [K in keyof IonTitle & keyof IonTitleAttributes as `prop:${K}`]?: IonTitle[K] };
+        "ion-toast": Omit<IonToast, keyof IonToastAttributes> & { [K in keyof IonToast & keyof IonToastAttributes]?: IonToast[K] } & { [K in keyof IonToast & keyof IonToastAttributes as `attr:${K}`]?: IonToastAttributes[K] } & { [K in keyof IonToast & keyof IonToastAttributes as `prop:${K}`]?: IonToast[K] } & OneOf<"overlayIndex", IonToast["overlayIndex"], IonToastAttributes["overlayIndex"]>;
+        "ion-toggle": Omit<IonToggle, keyof IonToggleAttributes> & { [K in keyof IonToggle & keyof IonToggleAttributes]?: IonToggle[K] } & { [K in keyof IonToggle & keyof IonToggleAttributes as `attr:${K}`]?: IonToggleAttributes[K] } & { [K in keyof IonToggle & keyof IonToggleAttributes as `prop:${K}`]?: IonToggle[K] };
+        "ion-toolbar": Omit<IonToolbar, keyof IonToolbarAttributes> & { [K in keyof IonToolbar & keyof IonToolbarAttributes]?: IonToolbar[K] } & { [K in keyof IonToolbar & keyof IonToolbarAttributes as `attr:${K}`]?: IonToolbarAttributes[K] } & { [K in keyof IonToolbar & keyof IonToolbarAttributes as `prop:${K}`]?: IonToolbar[K] };
     }
 }
 export { LocalJSX as JSX };
 declare module "@stencil/core" {
     export namespace JSX {
         interface IntrinsicElements {
-            "ion-accordion": LocalJSX.IonAccordion & JSXBase.HTMLAttributes<HTMLIonAccordionElement>;
-            "ion-accordion-group": LocalJSX.IonAccordionGroup & JSXBase.HTMLAttributes<HTMLIonAccordionGroupElement>;
-            "ion-action-sheet": LocalJSX.IonActionSheet & JSXBase.HTMLAttributes<HTMLIonActionSheetElement>;
-            "ion-alert": LocalJSX.IonAlert & JSXBase.HTMLAttributes<HTMLIonAlertElement>;
-            "ion-app": LocalJSX.IonApp & JSXBase.HTMLAttributes<HTMLIonAppElement>;
-            "ion-avatar": LocalJSX.IonAvatar & JSXBase.HTMLAttributes<HTMLIonAvatarElement>;
-            "ion-back-button": LocalJSX.IonBackButton & JSXBase.HTMLAttributes<HTMLIonBackButtonElement>;
-            "ion-backdrop": LocalJSX.IonBackdrop & JSXBase.HTMLAttributes<HTMLIonBackdropElement>;
-            "ion-badge": LocalJSX.IonBadge & JSXBase.HTMLAttributes<HTMLIonBadgeElement>;
-            "ion-breadcrumb": LocalJSX.IonBreadcrumb & JSXBase.HTMLAttributes<HTMLIonBreadcrumbElement>;
-            "ion-breadcrumbs": LocalJSX.IonBreadcrumbs & JSXBase.HTMLAttributes<HTMLIonBreadcrumbsElement>;
-            "ion-button": LocalJSX.IonButton & JSXBase.HTMLAttributes<HTMLIonButtonElement>;
-            "ion-buttons": LocalJSX.IonButtons & JSXBase.HTMLAttributes<HTMLIonButtonsElement>;
-            "ion-card": LocalJSX.IonCard & JSXBase.HTMLAttributes<HTMLIonCardElement>;
-            "ion-card-content": LocalJSX.IonCardContent & JSXBase.HTMLAttributes<HTMLIonCardContentElement>;
-            "ion-card-header": LocalJSX.IonCardHeader & JSXBase.HTMLAttributes<HTMLIonCardHeaderElement>;
-            "ion-card-subtitle": LocalJSX.IonCardSubtitle & JSXBase.HTMLAttributes<HTMLIonCardSubtitleElement>;
-            "ion-card-title": LocalJSX.IonCardTitle & JSXBase.HTMLAttributes<HTMLIonCardTitleElement>;
-            "ion-checkbox": LocalJSX.IonCheckbox & JSXBase.HTMLAttributes<HTMLIonCheckboxElement>;
-            "ion-chip": LocalJSX.IonChip & JSXBase.HTMLAttributes<HTMLIonChipElement>;
-            "ion-col": LocalJSX.IonCol & JSXBase.HTMLAttributes<HTMLIonColElement>;
-            "ion-content": LocalJSX.IonContent & JSXBase.HTMLAttributes<HTMLIonContentElement>;
-            "ion-datetime": LocalJSX.IonDatetime & JSXBase.HTMLAttributes<HTMLIonDatetimeElement>;
-            "ion-datetime-button": LocalJSX.IonDatetimeButton & JSXBase.HTMLAttributes<HTMLIonDatetimeButtonElement>;
-            "ion-divider": LocalJSX.IonDivider & JSXBase.HTMLAttributes<HTMLIonDividerElement>;
-            "ion-fab": LocalJSX.IonFab & JSXBase.HTMLAttributes<HTMLIonFabElement>;
-            "ion-fab-button": LocalJSX.IonFabButton & JSXBase.HTMLAttributes<HTMLIonFabButtonElement>;
-            "ion-fab-list": LocalJSX.IonFabList & JSXBase.HTMLAttributes<HTMLIonFabListElement>;
-            "ion-footer": LocalJSX.IonFooter & JSXBase.HTMLAttributes<HTMLIonFooterElement>;
-            "ion-grid": LocalJSX.IonGrid & JSXBase.HTMLAttributes<HTMLIonGridElement>;
-            "ion-header": LocalJSX.IonHeader & JSXBase.HTMLAttributes<HTMLIonHeaderElement>;
-            "ion-img": LocalJSX.IonImg & JSXBase.HTMLAttributes<HTMLIonImgElement>;
-            "ion-infinite-scroll": LocalJSX.IonInfiniteScroll & JSXBase.HTMLAttributes<HTMLIonInfiniteScrollElement>;
-            "ion-infinite-scroll-content": LocalJSX.IonInfiniteScrollContent & JSXBase.HTMLAttributes<HTMLIonInfiniteScrollContentElement>;
-            "ion-input": LocalJSX.IonInput & JSXBase.HTMLAttributes<HTMLIonInputElement>;
-            "ion-input-otp": LocalJSX.IonInputOtp & JSXBase.HTMLAttributes<HTMLIonInputOtpElement>;
-            "ion-input-password-toggle": LocalJSX.IonInputPasswordToggle & JSXBase.HTMLAttributes<HTMLIonInputPasswordToggleElement>;
-            "ion-item": LocalJSX.IonItem & JSXBase.HTMLAttributes<HTMLIonItemElement>;
-            "ion-item-divider": LocalJSX.IonItemDivider & JSXBase.HTMLAttributes<HTMLIonItemDividerElement>;
-            "ion-item-group": LocalJSX.IonItemGroup & JSXBase.HTMLAttributes<HTMLIonItemGroupElement>;
-            "ion-item-option": LocalJSX.IonItemOption & JSXBase.HTMLAttributes<HTMLIonItemOptionElement>;
-            "ion-item-options": LocalJSX.IonItemOptions & JSXBase.HTMLAttributes<HTMLIonItemOptionsElement>;
-            "ion-item-sliding": LocalJSX.IonItemSliding & JSXBase.HTMLAttributes<HTMLIonItemSlidingElement>;
-            "ion-label": LocalJSX.IonLabel & JSXBase.HTMLAttributes<HTMLIonLabelElement>;
-            "ion-list": LocalJSX.IonList & JSXBase.HTMLAttributes<HTMLIonListElement>;
-            "ion-list-header": LocalJSX.IonListHeader & JSXBase.HTMLAttributes<HTMLIonListHeaderElement>;
-            "ion-loading": LocalJSX.IonLoading & JSXBase.HTMLAttributes<HTMLIonLoadingElement>;
-            "ion-menu": LocalJSX.IonMenu & JSXBase.HTMLAttributes<HTMLIonMenuElement>;
-            "ion-menu-button": LocalJSX.IonMenuButton & JSXBase.HTMLAttributes<HTMLIonMenuButtonElement>;
-            "ion-menu-toggle": LocalJSX.IonMenuToggle & JSXBase.HTMLAttributes<HTMLIonMenuToggleElement>;
-            "ion-modal": LocalJSX.IonModal & JSXBase.HTMLAttributes<HTMLIonModalElement>;
-            "ion-nav": LocalJSX.IonNav & JSXBase.HTMLAttributes<HTMLIonNavElement>;
-            "ion-nav-link": LocalJSX.IonNavLink & JSXBase.HTMLAttributes<HTMLIonNavLinkElement>;
-            "ion-note": LocalJSX.IonNote & JSXBase.HTMLAttributes<HTMLIonNoteElement>;
-            "ion-picker": LocalJSX.IonPicker & JSXBase.HTMLAttributes<HTMLIonPickerElement>;
-            "ion-picker-column": LocalJSX.IonPickerColumn & JSXBase.HTMLAttributes<HTMLIonPickerColumnElement>;
-            "ion-picker-column-option": LocalJSX.IonPickerColumnOption & JSXBase.HTMLAttributes<HTMLIonPickerColumnOptionElement>;
-            "ion-picker-legacy": LocalJSX.IonPickerLegacy & JSXBase.HTMLAttributes<HTMLIonPickerLegacyElement>;
-            "ion-picker-legacy-column": LocalJSX.IonPickerLegacyColumn & JSXBase.HTMLAttributes<HTMLIonPickerLegacyColumnElement>;
-            "ion-popover": LocalJSX.IonPopover & JSXBase.HTMLAttributes<HTMLIonPopoverElement>;
-            "ion-progress-bar": LocalJSX.IonProgressBar & JSXBase.HTMLAttributes<HTMLIonProgressBarElement>;
-            "ion-radio": LocalJSX.IonRadio & JSXBase.HTMLAttributes<HTMLIonRadioElement>;
-            "ion-radio-group": LocalJSX.IonRadioGroup & JSXBase.HTMLAttributes<HTMLIonRadioGroupElement>;
-            "ion-range": LocalJSX.IonRange & JSXBase.HTMLAttributes<HTMLIonRangeElement>;
-            "ion-refresher": LocalJSX.IonRefresher & JSXBase.HTMLAttributes<HTMLIonRefresherElement>;
-            "ion-refresher-content": LocalJSX.IonRefresherContent & JSXBase.HTMLAttributes<HTMLIonRefresherContentElement>;
-            "ion-reorder": LocalJSX.IonReorder & JSXBase.HTMLAttributes<HTMLIonReorderElement>;
-            "ion-reorder-group": LocalJSX.IonReorderGroup & JSXBase.HTMLAttributes<HTMLIonReorderGroupElement>;
-            "ion-ripple-effect": LocalJSX.IonRippleEffect & JSXBase.HTMLAttributes<HTMLIonRippleEffectElement>;
-            "ion-route": LocalJSX.IonRoute & JSXBase.HTMLAttributes<HTMLIonRouteElement>;
-            "ion-route-redirect": LocalJSX.IonRouteRedirect & JSXBase.HTMLAttributes<HTMLIonRouteRedirectElement>;
-            "ion-router": LocalJSX.IonRouter & JSXBase.HTMLAttributes<HTMLIonRouterElement>;
-            "ion-router-link": LocalJSX.IonRouterLink & JSXBase.HTMLAttributes<HTMLIonRouterLinkElement>;
-            "ion-router-outlet": LocalJSX.IonRouterOutlet & JSXBase.HTMLAttributes<HTMLIonRouterOutletElement>;
-            "ion-row": LocalJSX.IonRow & JSXBase.HTMLAttributes<HTMLIonRowElement>;
-            "ion-searchbar": LocalJSX.IonSearchbar & JSXBase.HTMLAttributes<HTMLIonSearchbarElement>;
-            "ion-segment": LocalJSX.IonSegment & JSXBase.HTMLAttributes<HTMLIonSegmentElement>;
-            "ion-segment-button": LocalJSX.IonSegmentButton & JSXBase.HTMLAttributes<HTMLIonSegmentButtonElement>;
-            "ion-segment-content": LocalJSX.IonSegmentContent & JSXBase.HTMLAttributes<HTMLIonSegmentContentElement>;
-            "ion-segment-view": LocalJSX.IonSegmentView & JSXBase.HTMLAttributes<HTMLIonSegmentViewElement>;
-            "ion-select": LocalJSX.IonSelect & JSXBase.HTMLAttributes<HTMLIonSelectElement>;
-            "ion-select-modal": LocalJSX.IonSelectModal & JSXBase.HTMLAttributes<HTMLIonSelectModalElement>;
-            "ion-select-option": LocalJSX.IonSelectOption & JSXBase.HTMLAttributes<HTMLIonSelectOptionElement>;
-            "ion-select-popover": LocalJSX.IonSelectPopover & JSXBase.HTMLAttributes<HTMLIonSelectPopoverElement>;
-            "ion-skeleton-text": LocalJSX.IonSkeletonText & JSXBase.HTMLAttributes<HTMLIonSkeletonTextElement>;
-            "ion-spinner": LocalJSX.IonSpinner & JSXBase.HTMLAttributes<HTMLIonSpinnerElement>;
-            "ion-split-pane": LocalJSX.IonSplitPane & JSXBase.HTMLAttributes<HTMLIonSplitPaneElement>;
-            "ion-tab": LocalJSX.IonTab & JSXBase.HTMLAttributes<HTMLIonTabElement>;
-            "ion-tab-bar": LocalJSX.IonTabBar & JSXBase.HTMLAttributes<HTMLIonTabBarElement>;
-            "ion-tab-button": LocalJSX.IonTabButton & JSXBase.HTMLAttributes<HTMLIonTabButtonElement>;
-            "ion-tabs": LocalJSX.IonTabs & JSXBase.HTMLAttributes<HTMLIonTabsElement>;
-            "ion-text": LocalJSX.IonText & JSXBase.HTMLAttributes<HTMLIonTextElement>;
-            "ion-textarea": LocalJSX.IonTextarea & JSXBase.HTMLAttributes<HTMLIonTextareaElement>;
-            "ion-thumbnail": LocalJSX.IonThumbnail & JSXBase.HTMLAttributes<HTMLIonThumbnailElement>;
-            "ion-title": LocalJSX.IonTitle & JSXBase.HTMLAttributes<HTMLIonTitleElement>;
-            "ion-toast": LocalJSX.IonToast & JSXBase.HTMLAttributes<HTMLIonToastElement>;
-            "ion-toggle": LocalJSX.IonToggle & JSXBase.HTMLAttributes<HTMLIonToggleElement>;
-            "ion-toolbar": LocalJSX.IonToolbar & JSXBase.HTMLAttributes<HTMLIonToolbarElement>;
+            "ion-accordion": LocalJSX.IntrinsicElements["ion-accordion"] & JSXBase.HTMLAttributes<HTMLIonAccordionElement>;
+            "ion-accordion-group": LocalJSX.IntrinsicElements["ion-accordion-group"] & JSXBase.HTMLAttributes<HTMLIonAccordionGroupElement>;
+            "ion-action-sheet": LocalJSX.IntrinsicElements["ion-action-sheet"] & JSXBase.HTMLAttributes<HTMLIonActionSheetElement>;
+            "ion-alert": LocalJSX.IntrinsicElements["ion-alert"] & JSXBase.HTMLAttributes<HTMLIonAlertElement>;
+            "ion-app": LocalJSX.IntrinsicElements["ion-app"] & JSXBase.HTMLAttributes<HTMLIonAppElement>;
+            "ion-avatar": LocalJSX.IntrinsicElements["ion-avatar"] & JSXBase.HTMLAttributes<HTMLIonAvatarElement>;
+            "ion-back-button": LocalJSX.IntrinsicElements["ion-back-button"] & JSXBase.HTMLAttributes<HTMLIonBackButtonElement>;
+            "ion-backdrop": LocalJSX.IntrinsicElements["ion-backdrop"] & JSXBase.HTMLAttributes<HTMLIonBackdropElement>;
+            "ion-badge": LocalJSX.IntrinsicElements["ion-badge"] & JSXBase.HTMLAttributes<HTMLIonBadgeElement>;
+            "ion-breadcrumb": LocalJSX.IntrinsicElements["ion-breadcrumb"] & JSXBase.HTMLAttributes<HTMLIonBreadcrumbElement>;
+            "ion-breadcrumbs": LocalJSX.IntrinsicElements["ion-breadcrumbs"] & JSXBase.HTMLAttributes<HTMLIonBreadcrumbsElement>;
+            "ion-button": LocalJSX.IntrinsicElements["ion-button"] & JSXBase.HTMLAttributes<HTMLIonButtonElement>;
+            "ion-buttons": LocalJSX.IntrinsicElements["ion-buttons"] & JSXBase.HTMLAttributes<HTMLIonButtonsElement>;
+            "ion-card": LocalJSX.IntrinsicElements["ion-card"] & JSXBase.HTMLAttributes<HTMLIonCardElement>;
+            "ion-card-content": LocalJSX.IntrinsicElements["ion-card-content"] & JSXBase.HTMLAttributes<HTMLIonCardContentElement>;
+            "ion-card-header": LocalJSX.IntrinsicElements["ion-card-header"] & JSXBase.HTMLAttributes<HTMLIonCardHeaderElement>;
+            "ion-card-subtitle": LocalJSX.IntrinsicElements["ion-card-subtitle"] & JSXBase.HTMLAttributes<HTMLIonCardSubtitleElement>;
+            "ion-card-title": LocalJSX.IntrinsicElements["ion-card-title"] & JSXBase.HTMLAttributes<HTMLIonCardTitleElement>;
+            "ion-checkbox": LocalJSX.IntrinsicElements["ion-checkbox"] & JSXBase.HTMLAttributes<HTMLIonCheckboxElement>;
+            "ion-chip": LocalJSX.IntrinsicElements["ion-chip"] & JSXBase.HTMLAttributes<HTMLIonChipElement>;
+            "ion-col": LocalJSX.IntrinsicElements["ion-col"] & JSXBase.HTMLAttributes<HTMLIonColElement>;
+            "ion-content": LocalJSX.IntrinsicElements["ion-content"] & JSXBase.HTMLAttributes<HTMLIonContentElement>;
+            "ion-datetime": LocalJSX.IntrinsicElements["ion-datetime"] & JSXBase.HTMLAttributes<HTMLIonDatetimeElement>;
+            "ion-datetime-button": LocalJSX.IntrinsicElements["ion-datetime-button"] & JSXBase.HTMLAttributes<HTMLIonDatetimeButtonElement>;
+            "ion-divider": LocalJSX.IntrinsicElements["ion-divider"] & JSXBase.HTMLAttributes<HTMLIonDividerElement>;
+            "ion-fab": LocalJSX.IntrinsicElements["ion-fab"] & JSXBase.HTMLAttributes<HTMLIonFabElement>;
+            "ion-fab-button": LocalJSX.IntrinsicElements["ion-fab-button"] & JSXBase.HTMLAttributes<HTMLIonFabButtonElement>;
+            "ion-fab-list": LocalJSX.IntrinsicElements["ion-fab-list"] & JSXBase.HTMLAttributes<HTMLIonFabListElement>;
+            "ion-footer": LocalJSX.IntrinsicElements["ion-footer"] & JSXBase.HTMLAttributes<HTMLIonFooterElement>;
+            "ion-grid": LocalJSX.IntrinsicElements["ion-grid"] & JSXBase.HTMLAttributes<HTMLIonGridElement>;
+            "ion-header": LocalJSX.IntrinsicElements["ion-header"] & JSXBase.HTMLAttributes<HTMLIonHeaderElement>;
+            "ion-img": LocalJSX.IntrinsicElements["ion-img"] & JSXBase.HTMLAttributes<HTMLIonImgElement>;
+            "ion-infinite-scroll": LocalJSX.IntrinsicElements["ion-infinite-scroll"] & JSXBase.HTMLAttributes<HTMLIonInfiniteScrollElement>;
+            "ion-infinite-scroll-content": LocalJSX.IntrinsicElements["ion-infinite-scroll-content"] & JSXBase.HTMLAttributes<HTMLIonInfiniteScrollContentElement>;
+            "ion-input": LocalJSX.IntrinsicElements["ion-input"] & JSXBase.HTMLAttributes<HTMLIonInputElement>;
+            "ion-input-otp": LocalJSX.IntrinsicElements["ion-input-otp"] & JSXBase.HTMLAttributes<HTMLIonInputOtpElement>;
+            "ion-input-password-toggle": LocalJSX.IntrinsicElements["ion-input-password-toggle"] & JSXBase.HTMLAttributes<HTMLIonInputPasswordToggleElement>;
+            "ion-item": LocalJSX.IntrinsicElements["ion-item"] & JSXBase.HTMLAttributes<HTMLIonItemElement>;
+            "ion-item-divider": LocalJSX.IntrinsicElements["ion-item-divider"] & JSXBase.HTMLAttributes<HTMLIonItemDividerElement>;
+            "ion-item-group": LocalJSX.IntrinsicElements["ion-item-group"] & JSXBase.HTMLAttributes<HTMLIonItemGroupElement>;
+            "ion-item-option": LocalJSX.IntrinsicElements["ion-item-option"] & JSXBase.HTMLAttributes<HTMLIonItemOptionElement>;
+            "ion-item-options": LocalJSX.IntrinsicElements["ion-item-options"] & JSXBase.HTMLAttributes<HTMLIonItemOptionsElement>;
+            "ion-item-sliding": LocalJSX.IntrinsicElements["ion-item-sliding"] & JSXBase.HTMLAttributes<HTMLIonItemSlidingElement>;
+            "ion-label": LocalJSX.IntrinsicElements["ion-label"] & JSXBase.HTMLAttributes<HTMLIonLabelElement>;
+            "ion-list": LocalJSX.IntrinsicElements["ion-list"] & JSXBase.HTMLAttributes<HTMLIonListElement>;
+            "ion-list-header": LocalJSX.IntrinsicElements["ion-list-header"] & JSXBase.HTMLAttributes<HTMLIonListHeaderElement>;
+            "ion-loading": LocalJSX.IntrinsicElements["ion-loading"] & JSXBase.HTMLAttributes<HTMLIonLoadingElement>;
+            "ion-menu": LocalJSX.IntrinsicElements["ion-menu"] & JSXBase.HTMLAttributes<HTMLIonMenuElement>;
+            "ion-menu-button": LocalJSX.IntrinsicElements["ion-menu-button"] & JSXBase.HTMLAttributes<HTMLIonMenuButtonElement>;
+            "ion-menu-toggle": LocalJSX.IntrinsicElements["ion-menu-toggle"] & JSXBase.HTMLAttributes<HTMLIonMenuToggleElement>;
+            "ion-modal": LocalJSX.IntrinsicElements["ion-modal"] & JSXBase.HTMLAttributes<HTMLIonModalElement>;
+            "ion-nav": LocalJSX.IntrinsicElements["ion-nav"] & JSXBase.HTMLAttributes<HTMLIonNavElement>;
+            "ion-nav-link": LocalJSX.IntrinsicElements["ion-nav-link"] & JSXBase.HTMLAttributes<HTMLIonNavLinkElement>;
+            "ion-note": LocalJSX.IntrinsicElements["ion-note"] & JSXBase.HTMLAttributes<HTMLIonNoteElement>;
+            "ion-picker": LocalJSX.IntrinsicElements["ion-picker"] & JSXBase.HTMLAttributes<HTMLIonPickerElement>;
+            "ion-picker-column": LocalJSX.IntrinsicElements["ion-picker-column"] & JSXBase.HTMLAttributes<HTMLIonPickerColumnElement>;
+            "ion-picker-column-option": LocalJSX.IntrinsicElements["ion-picker-column-option"] & JSXBase.HTMLAttributes<HTMLIonPickerColumnOptionElement>;
+            "ion-picker-legacy": LocalJSX.IntrinsicElements["ion-picker-legacy"] & JSXBase.HTMLAttributes<HTMLIonPickerLegacyElement>;
+            "ion-picker-legacy-column": LocalJSX.IntrinsicElements["ion-picker-legacy-column"] & JSXBase.HTMLAttributes<HTMLIonPickerLegacyColumnElement>;
+            "ion-popover": LocalJSX.IntrinsicElements["ion-popover"] & JSXBase.HTMLAttributes<HTMLIonPopoverElement>;
+            "ion-progress-bar": LocalJSX.IntrinsicElements["ion-progress-bar"] & JSXBase.HTMLAttributes<HTMLIonProgressBarElement>;
+            "ion-radio": LocalJSX.IntrinsicElements["ion-radio"] & JSXBase.HTMLAttributes<HTMLIonRadioElement>;
+            "ion-radio-group": LocalJSX.IntrinsicElements["ion-radio-group"] & JSXBase.HTMLAttributes<HTMLIonRadioGroupElement>;
+            "ion-range": LocalJSX.IntrinsicElements["ion-range"] & JSXBase.HTMLAttributes<HTMLIonRangeElement>;
+            "ion-refresher": LocalJSX.IntrinsicElements["ion-refresher"] & JSXBase.HTMLAttributes<HTMLIonRefresherElement>;
+            "ion-refresher-content": LocalJSX.IntrinsicElements["ion-refresher-content"] & JSXBase.HTMLAttributes<HTMLIonRefresherContentElement>;
+            "ion-reorder": LocalJSX.IntrinsicElements["ion-reorder"] & JSXBase.HTMLAttributes<HTMLIonReorderElement>;
+            "ion-reorder-group": LocalJSX.IntrinsicElements["ion-reorder-group"] & JSXBase.HTMLAttributes<HTMLIonReorderGroupElement>;
+            "ion-ripple-effect": LocalJSX.IntrinsicElements["ion-ripple-effect"] & JSXBase.HTMLAttributes<HTMLIonRippleEffectElement>;
+            "ion-route": LocalJSX.IntrinsicElements["ion-route"] & JSXBase.HTMLAttributes<HTMLIonRouteElement>;
+            "ion-route-redirect": LocalJSX.IntrinsicElements["ion-route-redirect"] & JSXBase.HTMLAttributes<HTMLIonRouteRedirectElement>;
+            "ion-router": LocalJSX.IntrinsicElements["ion-router"] & JSXBase.HTMLAttributes<HTMLIonRouterElement>;
+            "ion-router-link": LocalJSX.IntrinsicElements["ion-router-link"] & JSXBase.HTMLAttributes<HTMLIonRouterLinkElement>;
+            "ion-router-outlet": LocalJSX.IntrinsicElements["ion-router-outlet"] & JSXBase.HTMLAttributes<HTMLIonRouterOutletElement>;
+            "ion-row": LocalJSX.IntrinsicElements["ion-row"] & JSXBase.HTMLAttributes<HTMLIonRowElement>;
+            "ion-searchbar": LocalJSX.IntrinsicElements["ion-searchbar"] & JSXBase.HTMLAttributes<HTMLIonSearchbarElement>;
+            "ion-segment": LocalJSX.IntrinsicElements["ion-segment"] & JSXBase.HTMLAttributes<HTMLIonSegmentElement>;
+            "ion-segment-button": LocalJSX.IntrinsicElements["ion-segment-button"] & JSXBase.HTMLAttributes<HTMLIonSegmentButtonElement>;
+            "ion-segment-content": LocalJSX.IntrinsicElements["ion-segment-content"] & JSXBase.HTMLAttributes<HTMLIonSegmentContentElement>;
+            "ion-segment-view": LocalJSX.IntrinsicElements["ion-segment-view"] & JSXBase.HTMLAttributes<HTMLIonSegmentViewElement>;
+            "ion-select": LocalJSX.IntrinsicElements["ion-select"] & JSXBase.HTMLAttributes<HTMLIonSelectElement>;
+            "ion-select-modal": LocalJSX.IntrinsicElements["ion-select-modal"] & JSXBase.HTMLAttributes<HTMLIonSelectModalElement>;
+            "ion-select-option": LocalJSX.IntrinsicElements["ion-select-option"] & JSXBase.HTMLAttributes<HTMLIonSelectOptionElement>;
+            "ion-select-popover": LocalJSX.IntrinsicElements["ion-select-popover"] & JSXBase.HTMLAttributes<HTMLIonSelectPopoverElement>;
+            "ion-skeleton-text": LocalJSX.IntrinsicElements["ion-skeleton-text"] & JSXBase.HTMLAttributes<HTMLIonSkeletonTextElement>;
+            "ion-spinner": LocalJSX.IntrinsicElements["ion-spinner"] & JSXBase.HTMLAttributes<HTMLIonSpinnerElement>;
+            "ion-split-pane": LocalJSX.IntrinsicElements["ion-split-pane"] & JSXBase.HTMLAttributes<HTMLIonSplitPaneElement>;
+            "ion-tab": LocalJSX.IntrinsicElements["ion-tab"] & JSXBase.HTMLAttributes<HTMLIonTabElement>;
+            "ion-tab-bar": LocalJSX.IntrinsicElements["ion-tab-bar"] & JSXBase.HTMLAttributes<HTMLIonTabBarElement>;
+            "ion-tab-button": LocalJSX.IntrinsicElements["ion-tab-button"] & JSXBase.HTMLAttributes<HTMLIonTabButtonElement>;
+            "ion-tabs": LocalJSX.IntrinsicElements["ion-tabs"] & JSXBase.HTMLAttributes<HTMLIonTabsElement>;
+            "ion-text": LocalJSX.IntrinsicElements["ion-text"] & JSXBase.HTMLAttributes<HTMLIonTextElement>;
+            "ion-textarea": LocalJSX.IntrinsicElements["ion-textarea"] & JSXBase.HTMLAttributes<HTMLIonTextareaElement>;
+            "ion-thumbnail": LocalJSX.IntrinsicElements["ion-thumbnail"] & JSXBase.HTMLAttributes<HTMLIonThumbnailElement>;
+            "ion-title": LocalJSX.IntrinsicElements["ion-title"] & JSXBase.HTMLAttributes<HTMLIonTitleElement>;
+            "ion-toast": LocalJSX.IntrinsicElements["ion-toast"] & JSXBase.HTMLAttributes<HTMLIonToastElement>;
+            "ion-toggle": LocalJSX.IntrinsicElements["ion-toggle"] & JSXBase.HTMLAttributes<HTMLIonToggleElement>;
+            "ion-toolbar": LocalJSX.IntrinsicElements["ion-toolbar"] & JSXBase.HTMLAttributes<HTMLIonToolbarElement>;
         }
     }
 }
diff --git a/core/src/components/accordion/accordion.tsx b/core/src/components/accordion/accordion.tsx
index 4f76c035e7f..c6af7df483d 100644
--- a/core/src/components/accordion/accordion.tsx
+++ b/core/src/components/accordion/accordion.tsx
@@ -533,6 +533,7 @@ export class Accordion implements ComponentInterface {
 
           'in-accordion-group-expand-inset': hostContext('.accordion-group-expand-inset', this.el),
         }}
+        tabindex={disabled ? '-1' : undefined}
       >
         <div
           onClick={() => this.toggleExpanded()}
diff --git a/core/src/components/content/content.tsx b/core/src/components/content/content.tsx
index 40f71ce7b4b..2a97e6f95c3 100644
--- a/core/src/components/content/content.tsx
+++ b/core/src/components/content/content.tsx
@@ -192,6 +192,11 @@ export class Content implements ComponentInterface {
       this.tabsElement = null;
       this.tabsLoadCallback = undefined;
     }
+
+    if (this.resizeTimeout) {
+      clearTimeout(this.resizeTimeout);
+      this.resizeTimeout = null;
+    }
   }
 
   /**
@@ -466,6 +471,7 @@ export class Content implements ComponentInterface {
         role={isMainContent ? 'main' : undefined}
         class={createColorClasses(this.color, {
           [theme]: true,
+          'content-fullscreen': this.fullscreen,
           'content-sizing': hostContext('ion-popover', this.el),
           overscroll: forceOverscroll,
           [`content-${rtl}`]: true,
diff --git a/core/src/components/content/test/fullscreen/content.e2e.ts b/core/src/components/content/test/fullscreen/content.e2e.ts
index d0d0d1f4e5d..8fb7e9a9f22 100644
--- a/core/src/components/content/test/fullscreen/content.e2e.ts
+++ b/core/src/components/content/test/fullscreen/content.e2e.ts
@@ -13,5 +13,38 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
 
       await expect(page).toHaveScreenshot(screenshot(`content-fullscreen`));
     });
+
+    /**
+     * The content-fullscreen class is added when fullscreen is true. The
+     * fullscreen attribute is not reflected in Angular, Vue, or React, so
+     * the class is needed for users to create custom themes.
+     */
+    test('should have content-fullscreen class when fullscreen is true', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-content fullscreen>
+          <p>Hello</p>
+        </ion-content>
+      `,
+        config
+      );
+
+      const content = page.locator('ion-content');
+      await expect(content).toHaveClass(/content-fullscreen/);
+    });
+
+    test('should not have content-fullscreen class when fullscreen is false', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-content>
+          <p>Hello</p>
+        </ion-content>
+      `,
+        config
+      );
+
+      const content = page.locator('ion-content');
+      await expect(content).not.toHaveClass(/content-fullscreen/);
+    });
   });
 });
diff --git a/core/src/components/datetime-button/test/overlays/datetime-button.e2e.ts-snapshots/datetime-overlay-modal-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime-button/test/overlays/datetime-button.e2e.ts-snapshots/datetime-overlay-modal-ios-ltr-Mobile-Chrome-linux.png
index 2b2c2eb1fd2..bf1132abd3e 100644
Binary files a/core/src/components/datetime-button/test/overlays/datetime-button.e2e.ts-snapshots/datetime-overlay-modal-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime-button/test/overlays/datetime-button.e2e.ts-snapshots/datetime-overlay-modal-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime-button/test/overlays/datetime-button.e2e.ts-snapshots/datetime-overlay-modal-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime-button/test/overlays/datetime-button.e2e.ts-snapshots/datetime-overlay-modal-ios-ltr-Mobile-Firefox-linux.png
index 1e1d5679450..43a2b752f9f 100644
Binary files a/core/src/components/datetime-button/test/overlays/datetime-button.e2e.ts-snapshots/datetime-overlay-modal-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/datetime-button/test/overlays/datetime-button.e2e.ts-snapshots/datetime-overlay-modal-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime-button/test/overlays/datetime-button.e2e.ts-snapshots/datetime-overlay-modal-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime-button/test/overlays/datetime-button.e2e.ts-snapshots/datetime-overlay-modal-ios-ltr-Mobile-Safari-linux.png
index a3cec1ab043..9d745099730 100644
Binary files a/core/src/components/datetime-button/test/overlays/datetime-button.e2e.ts-snapshots/datetime-overlay-modal-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/datetime-button/test/overlays/datetime-button.e2e.ts-snapshots/datetime-overlay-modal-ios-ltr-Mobile-Safari-linux.png differ
diff --git 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
index 25a610d38ed..759f1f1b1c2 100644
Binary files a/core/src/components/datetime-button/test/overlays/datetime-button.e2e.ts-snapshots/datetime-overlay-popover-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime-button/test/overlays/datetime-button.e2e.ts-snapshots/datetime-overlay-popover-ios-ltr-Mobile-Chrome-linux.png differ
diff --git 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
index 0e53db35c43..3924236a7c0 100644
Binary files a/core/src/components/datetime-button/test/overlays/datetime-button.e2e.ts-snapshots/datetime-overlay-popover-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/datetime-button/test/overlays/datetime-button.e2e.ts-snapshots/datetime-overlay-popover-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/datetime.ios.scss b/core/src/components/datetime/datetime.ios.scss
index 315e3ee21da..8c5959c899f 100644
--- a/core/src/components/datetime/datetime.ios.scss
+++ b/core/src/components/datetime/datetime.ios.scss
@@ -63,8 +63,8 @@
   @include margin(0, 0, 0, 0);
 }
 
-:host .calendar-next-prev {
-  @include padding($datetime-ios-padding * 0.5, 0, 0, 0);
+:host .calendar-action-buttons .calendar-next-prev {
+  align-items: stretch;
 }
 
 // These styles are copied from buttons.ios.scss
diff --git a/core/src/components/datetime/datetime.tsx b/core/src/components/datetime/datetime.tsx
index d1c09ba875c..6d88cd83da7 100644
--- a/core/src/components/datetime/datetime.tsx
+++ b/core/src/components/datetime/datetime.tsx
@@ -83,6 +83,7 @@ import { checkForPresentationFormatMismatch, warnIfTimeZoneProvided } from './ut
  * @slot buttons - The buttons in the datetime.
  * @slot time-label - The label for the time selector in the datetime.
  *
+ * @part wheel - The wheel container when using a wheel style layout, or in the month/year picker when using a grid style layout.
  * @part wheel-item - The individual items when using a wheel style layout, or in the
  * month/year picker when using a grid style layout.
  * @part wheel-item active - The currently selected wheel-item.
@@ -91,14 +92,23 @@ import { checkForPresentationFormatMismatch, warnIfTimeZoneProvided } from './ut
  * layout with `presentation="date-time"` or `"time-date"`.
  * @part time-button active - The time picker button when the picker is open.
  *
+ * @part calendar-header - The calendar header manages the date navigation controls (month/year picker and previous/next buttons) and the days of the week when using a grid style layout.
  * @part month-year-button - The button that opens the month/year picker when
  * using a grid style layout.
+ * @part navigation-button - The buttons used to navigate to the next or previous month when using a grid style layout.
+ * @part previous-button - The button used to navigate to the previous month when using a grid style layout.
+ * @part next-button - The button used to navigate to the next month when using a grid style layout.
+ * @part calendar-days-of-week - The container for the day-of-the-week header (both weekdays and weekends) when using a grid style layout.
  *
  * @part calendar-day - The individual buttons that display a day inside of the datetime
  * calendar.
  * @part calendar-day active - The currently selected calendar day.
  * @part calendar-day today - The calendar day that contains the current day.
  * @part calendar-day disabled - The calendar day that is disabled.
+ *
+ * @part datetime-header - The datetime header contains the content for the `title` slot and the selected date.
+ * @part datetime-title - The element that contains the `title` slot content.
+ * @part datetime-selected-date - The element that contains the selected date.
  */
 @Component({
   tag: 'ion-datetime',
@@ -129,6 +139,7 @@ export class Datetime implements ComponentInterface {
   private maxParts?: any;
   private todayParts!: DatetimeParts;
   private defaultParts!: DatetimeParts;
+  private loadTimeout: ReturnType<typeof setTimeout> | undefined;
 
   private prevPresentation: string | null = null;
 
@@ -1082,6 +1093,9 @@ export class Datetime implements ComponentInterface {
       this.clearFocusVisible();
       this.clearFocusVisible = undefined;
     }
+    if (this.loadTimeout) {
+      clearTimeout(this.loadTimeout);
+    }
   }
 
   /**
@@ -1180,7 +1194,7 @@ export class Datetime implements ComponentInterface {
      *
      * We schedule this after everything has had a chance to run.
      */
-    setTimeout(() => {
+    this.loadTimeout = setTimeout(() => {
       this.ensureReadyIfVisible();
     }, 100);
 
@@ -1730,6 +1744,7 @@ export class Datetime implements ComponentInterface {
 
     return (
       <ion-picker-column
+        part={WHEEL_PART}
         aria-label="Select a date"
         class="date-column"
         color={this.color}
@@ -1850,6 +1865,7 @@ export class Datetime implements ComponentInterface {
 
     return (
       <ion-picker-column
+        part={WHEEL_PART}
         aria-label="Select a day"
         class="day-column"
         color={this.color}
@@ -1894,6 +1910,7 @@ export class Datetime implements ComponentInterface {
 
     return (
       <ion-picker-column
+        part={WHEEL_PART}
         aria-label="Select a month"
         class="month-column"
         color={this.color}
@@ -1937,6 +1954,7 @@ export class Datetime implements ComponentInterface {
 
     return (
       <ion-picker-column
+        part={WHEEL_PART}
         aria-label="Select a year"
         class="year-column"
         color={this.color}
@@ -2011,6 +2029,7 @@ export class Datetime implements ComponentInterface {
 
     return (
       <ion-picker-column
+        part={WHEEL_PART}
         aria-label="Select an hour"
         color={this.color}
         disabled={disabled}
@@ -2051,6 +2070,7 @@ export class Datetime implements ComponentInterface {
 
     return (
       <ion-picker-column
+        part={WHEEL_PART}
         aria-label="Select a minute"
         color={this.color}
         disabled={disabled}
@@ -2094,6 +2114,7 @@ export class Datetime implements ComponentInterface {
 
     return (
       <ion-picker-column
+        part={WHEEL_PART}
         aria-label="Select a day period"
         style={isDayPeriodRTL ? { order: '-1' } : {}}
         color={this.color}
@@ -2162,7 +2183,7 @@ export class Datetime implements ComponentInterface {
     const hostDir = this.el.getAttribute('dir') || undefined;
 
     return (
-      <div class="calendar-header">
+      <div class="calendar-header" part="calendar-header">
         <div class="calendar-action-buttons">
           <div class="calendar-month-year">
             <button
@@ -2192,7 +2213,12 @@ export class Datetime implements ComponentInterface {
           </div>
 
           <div class="calendar-next-prev">
-            <ion-button aria-label="Previous month" disabled={prevMonthDisabled} onClick={() => this.prevMonth()}>
+            <ion-button
+              aria-label="Previous month"
+              disabled={prevMonthDisabled}
+              onClick={() => this.prevMonth()}
+              part="navigation-button previous-button"
+            >
               <ion-icon
                 dir={hostDir}
                 aria-hidden="true"
@@ -2202,7 +2228,12 @@ export class Datetime implements ComponentInterface {
                 flipRtl
               ></ion-icon>
             </ion-button>
-            <ion-button aria-label="Next month" disabled={nextMonthDisabled} onClick={() => this.nextMonth()}>
+            <ion-button
+              aria-label="Next month"
+              disabled={nextMonthDisabled}
+              onClick={() => this.nextMonth()}
+              part="navigation-button next-button"
+            >
               <ion-icon
                 dir={hostDir}
                 aria-hidden="true"
@@ -2214,7 +2245,7 @@ export class Datetime implements ComponentInterface {
             </ion-button>
           </div>
         </div>
-        <div class="calendar-days-of-week" aria-hidden="true">
+        <div class="calendar-days-of-week" aria-hidden="true" part="calendar-days-of-week">
           {getDaysOfWeek(this.locale, theme, this.firstDayOfWeek % 7).map((d) => {
             return <div class="day-of-week">{d}</div>;
           })}
@@ -2567,11 +2598,15 @@ export class Datetime implements ComponentInterface {
     }
 
     return (
-      <div class="datetime-header">
-        <div class="datetime-title">
+      <div class="datetime-header" part="datetime-header">
+        <div class="datetime-title" part="datetime-title">
           <slot name="title">Select Date</slot>
         </div>
-        {showExpandedHeader && <div class="datetime-selected-date">{this.getHeaderSelectedDateText()}</div>}
+        {showExpandedHeader && (
+          <div class="datetime-selected-date" part="datetime-selected-date">
+            {this.getHeaderSelectedDateText()}
+          </div>
+        )}
       </div>
     );
   }
@@ -2806,5 +2841,6 @@ export class Datetime implements ComponentInterface {
 let datetimeIds = 0;
 const CANCEL_ROLE = 'datetime-cancel';
 const CONFIRM_ROLE = 'datetime-confirm';
+const WHEEL_PART = 'wheel';
 const WHEEL_ITEM_PART = 'wheel-item';
 const WHEEL_ITEM_ACTIVE_PART = `active`;
diff --git a/core/src/components/datetime/test/a11y/datetime.e2e.ts-snapshots/datetime-scale-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/a11y/datetime.e2e.ts-snapshots/datetime-scale-ios-ltr-Mobile-Firefox-linux.png
index de0f251f0d0..374ba26b3f1 100644
Binary files a/core/src/components/datetime/test/a11y/datetime.e2e.ts-snapshots/datetime-scale-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/a11y/datetime.e2e.ts-snapshots/datetime-scale-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/date-month-toggle-focused-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/date-month-toggle-focused-ios-ltr-Mobile-Chrome-linux.png
index de531da9ee1..b166283daae 100644
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/date-month-toggle-focused-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/date-month-toggle-focused-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/date-month-toggle-focused-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/date-month-toggle-focused-ios-ltr-Mobile-Firefox-linux.png
index a789d8659cb..eda310fdc9e 100644
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/date-month-toggle-focused-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/date-month-toggle-focused-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/date-month-toggle-focused-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/date-month-toggle-focused-ios-ltr-Mobile-Safari-linux.png
index ebe7beab5ef..c5f40905ff1 100644
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/date-month-toggle-focused-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/date-month-toggle-focused-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-basic-default-title-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-basic-default-title-ios-ltr-Mobile-Chrome-linux.png
index f5ef46f4632..000f9337e5a 100644
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-basic-default-title-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-basic-default-title-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-basic-default-title-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-basic-default-title-ios-ltr-Mobile-Firefox-linux.png
index 6c7c773440b..759b869a51c 100644
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-basic-default-title-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-basic-default-title-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-basic-default-title-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-basic-default-title-ios-ltr-Mobile-Safari-linux.png
index e44d7dcbf60..f79895362d4 100644
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-basic-default-title-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-basic-default-title-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-basic-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-basic-ios-ltr-Mobile-Chrome-linux.png
index f559dcc22d6..cf55b8db5c3 100644
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-basic-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-basic-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-basic-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-basic-ios-ltr-Mobile-Firefox-linux.png
index 0b48bf4af47..db3db19d8aa 100644
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-basic-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-basic-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-basic-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-basic-ios-ltr-Mobile-Safari-linux.png
index a2a88bd6316..6475572a0b2 100644
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-basic-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-basic-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-focus-calendar-day-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-focus-calendar-day-ios-ltr-Mobile-Chrome-linux.png
index fa948d247d2..148d4418b4c 100644
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-focus-calendar-day-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-focus-calendar-day-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-focus-calendar-day-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-focus-calendar-day-ios-ltr-Mobile-Firefox-linux.png
index ade5cc17c81..fa925977f30 100644
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-focus-calendar-day-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-focus-calendar-day-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-focus-calendar-day-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-focus-calendar-day-ios-ltr-Mobile-Safari-linux.png
index 1bb162230c7..ff21541f7e8 100644
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-focus-calendar-day-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-focus-calendar-day-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-focus-selected-calendar-day-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-focus-selected-calendar-day-ios-ltr-Mobile-Chrome-linux.png
index 3ccecb61694..7d082033218 100644
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-focus-selected-calendar-day-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-focus-selected-calendar-day-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-focus-selected-calendar-day-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-focus-selected-calendar-day-ios-ltr-Mobile-Firefox-linux.png
index b1674de2a84..a794d9756f0 100644
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-focus-selected-calendar-day-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-focus-selected-calendar-day-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-focus-selected-calendar-day-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-focus-selected-calendar-day-ios-ltr-Mobile-Safari-linux.png
index a931c9c32c3..a00fcc8169c 100644
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-focus-selected-calendar-day-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-focus-selected-calendar-day-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ios-ltr-Mobile-Chrome-linux.png
index f7aa715ce1d..bfac1fde135 100644
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ios-ltr-Mobile-Firefox-linux.png
index 5452605b8ce..044512dc886 100644
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ios-ltr-Mobile-Safari-linux.png
index 38e3c415305..dc809fe6396 100644
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ios-rtl-Mobile-Chrome-linux.png
index 96bcc789c7c..b5fddffb022 100644
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ios-rtl-Mobile-Firefox-linux.png
index 2b8f1b90592..66b81aeff70 100644
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ios-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ios-rtl-Mobile-Safari-linux.png
index a6c1ac219d1..b205b330804 100644
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..8ed8063cd2e
Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..8232c48cea3
Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..6ad3f824e3c
Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-ios-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..f8d0664aafb
Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-ios-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..f0434f3ae1e
Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-ios-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-ios-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..b21f4ba4b01
Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-clear-button-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-clear-button-ios-ltr-Mobile-Chrome-linux.png
index 3bf33161673..19f94e93afb 100644
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-clear-button-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-clear-button-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-clear-button-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-clear-button-ios-ltr-Mobile-Firefox-linux.png
index d2d276d316c..2d688895fd3 100644
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-clear-button-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-clear-button-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-clear-button-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-clear-button-ios-ltr-Mobile-Safari-linux.png
index d410d932ea8..d5e168982b2 100644
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-clear-button-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-clear-button-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-clear-button-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-clear-button-ios-rtl-Mobile-Chrome-linux.png
index 50d941d8eaa..fa3aa90cded 100644
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-clear-button-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-clear-button-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-clear-button-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-clear-button-ios-rtl-Mobile-Firefox-linux.png
index 2cb3c22f07a..043afa99f6b 100644
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-clear-button-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-clear-button-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-clear-button-ios-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-clear-button-ios-rtl-Mobile-Safari-linux.png
index ac2e081abde..4a97f335ab6 100644
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-clear-button-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-clear-button-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-buttons-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-buttons-ios-ltr-Mobile-Chrome-linux.png
index 02e6c8e5b0c..a6b0ea54c98 100644
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-buttons-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-buttons-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-buttons-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-buttons-ios-ltr-Mobile-Firefox-linux.png
index 531bdfed092..a8f5cebfafb 100644
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-buttons-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-buttons-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-buttons-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-buttons-ios-ltr-Mobile-Safari-linux.png
index 275d81aaee1..42cc16119d7 100644
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-buttons-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-buttons-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-buttons-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-buttons-ios-rtl-Mobile-Chrome-linux.png
index b32379f684c..0274b329dd2 100644
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-buttons-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-buttons-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-buttons-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-buttons-ios-rtl-Mobile-Firefox-linux.png
index a95122b037a..adb48b4aeb8 100644
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-buttons-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-buttons-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-buttons-ios-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-buttons-ios-rtl-Mobile-Safari-linux.png
index 9d9ad7da722..fe37d3397b9 100644
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-buttons-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-buttons-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-clear-buttons-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-clear-buttons-ios-ltr-Mobile-Chrome-linux.png
index b606b0456d6..870a91a754f 100644
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-clear-buttons-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-clear-buttons-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-clear-buttons-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-clear-buttons-ios-ltr-Mobile-Firefox-linux.png
index cd33d75f3b6..c395c2cfedb 100644
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-clear-buttons-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-clear-buttons-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-clear-buttons-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-clear-buttons-ios-ltr-Mobile-Safari-linux.png
index 35bdeee847f..fcd5bd2b67b 100644
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-clear-buttons-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-clear-buttons-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-clear-buttons-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-clear-buttons-ios-rtl-Mobile-Chrome-linux.png
index 2fc34270d7c..1ef7e8bff29 100644
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-clear-buttons-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-clear-buttons-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-clear-buttons-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-clear-buttons-ios-rtl-Mobile-Firefox-linux.png
index 363088fbb74..bf4c266f0fe 100644
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-clear-buttons-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-clear-buttons-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-clear-buttons-ios-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-clear-buttons-ios-rtl-Mobile-Safari-linux.png
index 4b274cc9109..1e61ab1f355 100644
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-clear-buttons-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-default-clear-buttons-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ios-ltr-Mobile-Chrome-linux.png
index 3ba5845a395..a6b0ea54c98 100644
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ios-ltr-Mobile-Firefox-linux.png
index 4a5f0a3782b..a8f5cebfafb 100644
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ios-ltr-Mobile-Safari-linux.png
index 7602af4e0a3..42cc16119d7 100644
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ios-rtl-Mobile-Chrome-linux.png
index d371a00b9a4..0274b329dd2 100644
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ios-rtl-Mobile-Firefox-linux.png
index cec209a47e3..adb48b4aeb8 100644
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ios-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ios-rtl-Mobile-Safari-linux.png
index 41c502223cb..fe37d3397b9 100644
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ios-ltr-Mobile-Chrome-linux.png
index a84535fb85f..8b613ce9b0d 100644
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ios-ltr-Mobile-Firefox-linux.png
index 819bc8203ce..66ad372afe3 100644
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ios-ltr-Mobile-Safari-linux.png
index e5e7bd7cb28..22507d98174 100644
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ios-rtl-Mobile-Chrome-linux.png
index fb5f5a1398e..e522893753e 100644
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ios-rtl-Mobile-Firefox-linux.png
index 9396e471e46..b2855ddada1 100644
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ios-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ios-rtl-Mobile-Safari-linux.png
index 881cf839511..3882548a525 100644
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-ios-ltr-Mobile-Chrome-linux.png
index f7a95eda213..d1d59bad57f 100644
Binary files a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-ios-ltr-Mobile-Firefox-linux.png
index 53917d4e570..1297f58e950 100644
Binary files a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-ios-ltr-Mobile-Safari-linux.png
index 8bef408b2b5..311054b83bd 100644
Binary files a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-ios-ltr-dark-Mobile-Chrome-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-ios-ltr-dark-Mobile-Chrome-linux.png
index 5444e77c0fd..c52d75fc952 100644
Binary files a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-ios-ltr-dark-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-ios-ltr-dark-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-ios-ltr-dark-Mobile-Firefox-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-ios-ltr-dark-Mobile-Firefox-linux.png
index 79f1f7befe1..a4cfd70cd79 100644
Binary files a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-ios-ltr-dark-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-ios-ltr-dark-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-ios-ltr-dark-Mobile-Safari-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-ios-ltr-dark-Mobile-Safari-linux.png
index 46094de00ab..f5918cb5b59 100644
Binary files a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-ios-ltr-dark-Mobile-Safari-linux.png and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-ios-ltr-dark-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/custom/datetime.e2e.ts b/core/src/components/datetime/test/custom/datetime.e2e.ts
index 78a3befdf00..ca962408527 100644
--- a/core/src/components/datetime/test/custom/datetime.e2e.ts
+++ b/core/src/components/datetime/test/custom/datetime.e2e.ts
@@ -42,6 +42,324 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
       await expect(datetime).toHaveScreenshot(screenshot(`datetime-custom-calendar-days`));
     });
   });
+
+  test.describe(title('CSS shadow parts'), () => {
+    test('should be able to customize wheel part within the wheel style', async ({ page }, testInfo) => {
+      testInfo.annotations.push({
+        type: 'issue',
+        description: 'https://github.com/ionic-team/ionic-framework/issues/30420',
+      });
+
+      await page.setContent(
+        `
+          <style>
+            ion-datetime::part(wheel) {
+              background-color: red;
+            }
+          </style>
+          <ion-datetime
+            prefer-wheel="true"
+            value="2020-03-14T14:23:00.000Z"
+          ></ion-datetime>
+        `,
+        config
+      );
+
+      const datetime = page.locator('ion-datetime');
+      const pickerColumn = datetime.locator('ion-picker-column').first();
+
+      const backgroundColor = await pickerColumn.evaluate((el) => {
+        return window.getComputedStyle(el).backgroundColor;
+      });
+
+      expect(backgroundColor).toBe('rgb(255, 0, 0)');
+    });
+
+    test('should be able to customize wheel part within the month/year picker', async ({ page }, testInfo) => {
+      testInfo.annotations.push({
+        type: 'issue',
+        description: 'https://github.com/ionic-team/ionic-framework/issues/30420',
+      });
+
+      await page.setContent(
+        `
+          <style>
+            ion-datetime::part(wheel) {
+              background-color: orange;
+            }
+          </style>
+          <ion-datetime
+            value="2020-03-14T14:23:00.000Z"
+          ></ion-datetime>
+        `,
+        config
+      );
+
+      const datetime = page.locator('ion-datetime');
+      const monthYearButton = datetime.locator('.calendar-month-year-toggle');
+
+      await monthYearButton.click();
+
+      const pickerColumn = datetime.locator('ion-picker-column').first();
+
+      const backgroundColor = await pickerColumn.evaluate((el) => {
+        return window.getComputedStyle(el).backgroundColor;
+      });
+
+      expect(backgroundColor).toBe('rgb(255, 165, 0)');
+    });
+
+    test('should be able to customize wheel part within the time picker', async ({ page }, testInfo) => {
+      testInfo.annotations.push({
+        type: 'issue',
+        description: 'https://github.com/ionic-team/ionic-framework/issues/30420',
+      });
+
+      await page.setContent(
+        `
+          <style>
+            ion-picker-column {
+              background-color: green;
+            }
+          </style>
+          <ion-datetime
+            value="2020-03-14T14:23:00.000Z"
+          ></ion-datetime>
+        `,
+        config
+      );
+
+      const datetime = page.locator('ion-datetime');
+      const timeButton = datetime.locator('.time-body');
+
+      await timeButton.click();
+
+      const pickerColumn = page.locator('ion-picker-column').first();
+
+      const backgroundColor = await pickerColumn.evaluate((el) => {
+        return window.getComputedStyle(el).backgroundColor;
+      });
+
+      expect(backgroundColor).toBe('rgb(0, 128, 0)');
+    });
+
+    test('should be able to customize wheel part when focused', async ({ page }, testInfo) => {
+      testInfo.annotations.push({
+        type: 'issue',
+        description: 'https://github.com/ionic-team/ionic-framework/issues/30420',
+      });
+
+      await page.setContent(
+        `
+          <style>
+            ion-datetime::part(wheel):focus {
+              background-color: blue;
+            }
+          </style>
+          <ion-datetime
+            prefer-wheel="true"
+            value="2020-03-14T14:23:00.000Z"
+          ></ion-datetime>
+        `,
+        config
+      );
+
+      const datetime = page.locator('ion-datetime');
+      const pickerColumn = datetime.locator('ion-picker-column').first();
+
+      await pickerColumn.click({ position: { x: 10, y: 10 } });
+
+      const backgroundColor = await pickerColumn.evaluate((el) => {
+        return window.getComputedStyle(el).backgroundColor;
+      });
+
+      expect(backgroundColor).toBe('rgb(0, 0, 255)');
+    });
+
+    test('should be able to customize datetime header parts', async ({ page }, testInfo) => {
+      testInfo.annotations.push({
+        type: 'issue',
+        description: 'https://github.com/ionic-team/ionic-framework/issues/30083',
+      });
+
+      await page.setContent(
+        `
+          <style>
+            ion-datetime::part(datetime-header) {
+              background-color: orange;
+            }
+
+            ion-datetime::part(datetime-title) {
+              background-color: pink;
+            }
+
+            ion-datetime::part(datetime-selected-date) {
+              background-color: violet;
+            }
+          </style>
+          <ion-datetime value="2020-03-14T14:23:00.000Z">
+            <span slot="title">Select Date</span>
+          </ion-datetime>
+        `,
+        config
+      );
+
+      const datetime = page.locator('ion-datetime');
+      const header = datetime.locator('.datetime-header');
+      const title = datetime.locator('.datetime-title');
+      const selectedDate = datetime.locator('.datetime-selected-date');
+
+      const headerBackgroundColor = await header.evaluate((el) => {
+        return window.getComputedStyle(el).backgroundColor;
+      });
+
+      const titleBackgroundColor = await title.evaluate((el) => {
+        return window.getComputedStyle(el).backgroundColor;
+      });
+
+      const selectedDateBackgroundColor = await selectedDate.evaluate((el) => {
+        return window.getComputedStyle(el).backgroundColor;
+      });
+
+      expect(headerBackgroundColor).toBe('rgb(255, 165, 0)');
+      expect(titleBackgroundColor).toBe('rgb(255, 192, 203)');
+      expect(selectedDateBackgroundColor).toBe('rgb(238, 130, 238)');
+    });
+
+    test('should be able to customize calendar header part', async ({ page }) => {
+      await page.setContent(
+        `
+          <style>
+            ion-datetime::part(calendar-header) {
+              background-color: orange;
+            }
+          </style>
+          <ion-datetime value="2020-03-14T14:23:00.000Z"></ion-datetime>
+        `,
+        config
+      );
+
+      const datetime = page.locator('ion-datetime');
+      const header = datetime.locator('.calendar-header');
+
+      const backgroundColor = await header.evaluate((el) => {
+        return window.getComputedStyle(el).backgroundColor;
+      });
+
+      expect(backgroundColor).toBe('rgb(255, 165, 0)');
+    });
+
+    test('should be able to customize month/year picker part', async ({ page }, testInfo) => {
+      testInfo.annotations.push({
+        type: 'issue',
+        description: 'https://github.com/ionic-team/ionic-framework/issues/26596',
+      });
+
+      await page.setContent(
+        `
+          <style>
+            ion-datetime::part(month-year-button) {
+              background-color: lightblue;
+            }
+          </style>
+          <ion-datetime value="2020-03-14T14:23:00.000Z"></ion-datetime>
+        `,
+        config
+      );
+
+      const datetime = page.locator('ion-datetime');
+      const monthYearButton = datetime.locator('.calendar-month-year-toggle');
+
+      const backgroundColor = await monthYearButton.evaluate((el) => {
+        return window.getComputedStyle(el).backgroundColor;
+      });
+
+      expect(backgroundColor).toBe('rgb(173, 216, 230)');
+    });
+
+    test('should be able to customize navigation button parts', async ({ page }, testInfo) => {
+      testInfo.annotations.push({
+        type: 'issue',
+        description: 'https://github.com/ionic-team/ionic-framework/issues/30830',
+      });
+
+      await page.setContent(
+        `
+          <style>
+            ion-datetime::part(navigation-button) {
+              background-color: firebrick;
+            }
+
+            ion-datetime::part(previous-button) {
+              color: blue;
+            }
+
+            ion-datetime::part(next-button) {
+              color: green;
+            }
+          </style>
+          <ion-datetime value="2020-03-14T14:23:00.000Z"></ion-datetime>
+        `,
+        config
+      );
+
+      const datetime = page.locator('ion-datetime');
+      const prevButton = datetime.locator('.calendar-next-prev ion-button').first();
+      const nextButton = datetime.locator('.calendar-next-prev ion-button').last();
+
+      const prevBackgroundColor = await prevButton.evaluate((el) => {
+        return window.getComputedStyle(el).backgroundColor;
+      });
+
+      const prevColor = await prevButton.evaluate((el) => {
+        return window.getComputedStyle(el).color;
+      });
+
+      const nextBackgroundColor = await nextButton.evaluate((el) => {
+        return window.getComputedStyle(el).backgroundColor;
+      });
+
+      const nextColor = await nextButton.evaluate((el) => {
+        return window.getComputedStyle(el).color;
+      });
+
+      // Verify the navigation-button part applies the styles
+      expect(prevBackgroundColor).toBe('rgb(178, 34, 34)');
+      expect(nextBackgroundColor).toBe('rgb(178, 34, 34)');
+      // Verify the previous-button part applies the styles
+      expect(prevColor).toBe('rgb(0, 0, 255)');
+      // Verify the next-button part applies the styles
+      expect(nextColor).toBe('rgb(0, 128, 0)');
+    });
+
+    test('should be able to customize days of the week part', async ({ page }, testInfo) => {
+      testInfo.annotations.push({
+        type: 'issue',
+        description: 'https://github.com/ionic-team/ionic-framework/issues/30830',
+      });
+
+      await page.setContent(
+        `
+          <style>
+            ion-datetime::part(calendar-days-of-week) {
+              background-color: green;
+            }
+          </style>
+          <ion-datetime value="2020-03-14T14:23:00.000Z"></ion-datetime>
+        `,
+        config
+      );
+
+      const datetime = page.locator('ion-datetime');
+      const daysOfWeek = datetime.locator('.calendar-days-of-week');
+
+      const backgroundColor = await daysOfWeek.evaluate((el) => {
+        return window.getComputedStyle(el).backgroundColor;
+      });
+
+      expect(backgroundColor).toBe('rgb(0, 128, 0)');
+    });
+  });
 });
 
 /**
diff --git a/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-calendar-days-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-calendar-days-ios-ltr-Mobile-Chrome-linux.png
index b1e6ab0a387..26de6765222 100644
Binary files a/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-calendar-days-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-calendar-days-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-calendar-days-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-calendar-days-ios-ltr-Mobile-Firefox-linux.png
index a0a669e8a0d..dca70dfaa8f 100644
Binary files a/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-calendar-days-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-calendar-days-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-calendar-days-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-calendar-days-ios-ltr-Mobile-Safari-linux.png
index ea20012f266..a495362b363 100644
Binary files a/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-calendar-days-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-calendar-days-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-focus-calendar-day-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-focus-calendar-day-ios-ltr-Mobile-Chrome-linux.png
index 693362fd43c..a8a9a921814 100644
Binary files a/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-focus-calendar-day-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-focus-calendar-day-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-focus-calendar-day-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-focus-calendar-day-ios-ltr-Mobile-Firefox-linux.png
index da87fa2f0dd..c3c46b4ec6c 100644
Binary files a/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-focus-calendar-day-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-focus-calendar-day-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-focus-calendar-day-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-focus-calendar-day-ios-ltr-Mobile-Safari-linux.png
index 2b0eba53ffb..d05caa3c7d1 100644
Binary files a/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-focus-calendar-day-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-focus-calendar-day-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-focus-selected-calendar-day-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-focus-selected-calendar-day-ios-ltr-Mobile-Chrome-linux.png
index 1b15a66a57a..7ab80e99b61 100644
Binary files a/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-focus-selected-calendar-day-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-focus-selected-calendar-day-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-focus-selected-calendar-day-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-focus-selected-calendar-day-ios-ltr-Mobile-Firefox-linux.png
index c663807d933..eb69fae6967 100644
Binary files a/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-focus-selected-calendar-day-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-focus-selected-calendar-day-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-focus-selected-calendar-day-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-focus-selected-calendar-day-ios-ltr-Mobile-Safari-linux.png
index 2db5b9382d6..f165423c2c8 100644
Binary files a/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-focus-selected-calendar-day-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-focus-selected-calendar-day-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-time-button-active-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-time-button-active-ios-ltr-Mobile-Safari-linux.png
index 7c7e296086a..f4bc6529a2b 100644
Binary files a/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-time-button-active-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-time-button-active-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-time-picker-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-time-picker-ios-ltr-Mobile-Safari-linux.png
index c779ad81e99..3516195baf6 100644
Binary files a/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-time-picker-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-time-picker-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/custom/index.html b/core/src/components/datetime/test/custom/index.html
index 09895d9c591..0266e149616 100644
--- a/core/src/components/datetime/test/custom/index.html
+++ b/core/src/components/datetime/test/custom/index.html
@@ -74,6 +74,13 @@
         color: rgb(128, 30, 171);
       }
 
+      /* Targets the month/year picker and the wheel style datetime */
+      .custom-grid-wheel::part(wheel):focus,
+      /* Targets the time picker */
+      ion-picker-column:focus {
+        background-color: rgba(138, 238, 69, 0.37);
+      }
+
       /*
       * Custom Datetime Day Parts
       * -------------------------------------------
@@ -127,6 +134,46 @@
         background-color: rgb(154 209 98 / 0.2);
         color: #9ad162;
       }
+
+      /*
+      * Custom Datetime Header Parts
+      * -------------------------------------------
+      */
+
+      #custom-grid::part(calendar-header),
+      #custom-title::part(datetime-header) {
+        background-color: orange;
+      }
+
+      #custom-grid::part(month-year-button) {
+        background-color: lightblue;
+        color: rgb(128, 30, 171);
+      }
+
+      #custom-grid::part(navigation-button) {
+        background-color: firebrick;
+      }
+
+      #custom-grid::part(previous-button) {
+        color: white;
+      }
+
+      #custom-grid::part(next-button) {
+        color: black;
+      }
+
+      #custom-grid::part(calendar-days-of-week) {
+        background-color: #9ad162;
+        color: white;
+      }
+
+      #custom-title::part(datetime-title) {
+        background-color: pink;
+      }
+
+      #custom-title::part(datetime-selected-date) {
+        background-color: violet;
+      }
     </style>
   </head>
 
@@ -156,6 +203,11 @@ <h2>Wheel Style</h2>
             <h2>Grid Style</h2>
             <ion-datetime id="custom-calendar-days" value="2023-06-15" presentation="date"></ion-datetime>
           </div>
+          <div class="grid-item">
+            <ion-datetime id="custom-title" presentation="date">
+              <span slot="title">Select Date</span>
+            </ion-datetime>
+          </div>
         </div>
       </ion-content>
     </ion-app>
diff --git a/core/src/components/datetime/test/disabled/datetime.e2e.ts-snapshots/datetime-disabled-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/disabled/datetime.e2e.ts-snapshots/datetime-disabled-ios-ltr-Mobile-Chrome-linux.png
index ab04f17c5a4..7c6fff731b3 100644
Binary files a/core/src/components/datetime/test/disabled/datetime.e2e.ts-snapshots/datetime-disabled-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/disabled/datetime.e2e.ts-snapshots/datetime-disabled-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/disabled/datetime.e2e.ts-snapshots/datetime-disabled-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/disabled/datetime.e2e.ts-snapshots/datetime-disabled-ios-ltr-Mobile-Firefox-linux.png
index 760a43893f0..678ef2710e9 100644
Binary files a/core/src/components/datetime/test/disabled/datetime.e2e.ts-snapshots/datetime-disabled-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/disabled/datetime.e2e.ts-snapshots/datetime-disabled-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/disabled/datetime.e2e.ts-snapshots/datetime-disabled-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/disabled/datetime.e2e.ts-snapshots/datetime-disabled-ios-ltr-Mobile-Safari-linux.png
index 3334ccd407d..cdac617a5d5 100644
Binary files a/core/src/components/datetime/test/disabled/datetime.e2e.ts-snapshots/datetime-disabled-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/datetime/test/disabled/datetime.e2e.ts-snapshots/datetime-disabled-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-ios-ltr-Mobile-Chrome-linux.png
index 1c67770de6e..1d4c36ec83c 100644
Binary files a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-ios-ltr-Mobile-Firefox-linux.png
index d144284e5da..82f3e79ef5b 100644
Binary files a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-ios-ltr-Mobile-Safari-linux.png
index 43962440779..007758afa97 100644
Binary files a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-time-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-time-ios-ltr-Mobile-Chrome-linux.png
index 6371fecccdc..759adee777f 100644
Binary files a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-time-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-time-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-time-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-time-ios-ltr-Mobile-Firefox-linux.png
index 5b886a794b7..190caa00f04 100644
Binary files a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-time-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-time-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-time-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-time-ios-ltr-Mobile-Safari-linux.png
index 790d149e4c8..81810e34551 100644
Binary files a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-time-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-time-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-date-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-date-ios-ltr-Mobile-Chrome-linux.png
index a38eb2edef6..29b81e864c6 100644
Binary files a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-date-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-date-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-date-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-date-ios-ltr-Mobile-Firefox-linux.png
index 7baeb7d5a73..4a296b077bd 100644
Binary files a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-date-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-date-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-date-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-date-ios-ltr-Mobile-Safari-linux.png
index 38983245cea..9d3a0638c1e 100644
Binary files a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-date-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-date-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-ios-ltr-Mobile-Chrome-linux.png
index 04bda71a4ca..fc9f9fdb09a 100644
Binary files a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-ios-ltr-Mobile-Firefox-linux.png
index a99bca2ed94..63ca406a82d 100644
Binary files a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-ios-ltr-Mobile-Safari-linux.png
index 05447926b57..5cdb3c291fd 100644
Binary files a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-time-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-time-ios-ltr-Mobile-Chrome-linux.png
index 5683bcf38c4..2fca3b624cd 100644
Binary files a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-time-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-time-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-time-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-time-ios-ltr-Mobile-Firefox-linux.png
index 652ab035b7d..e768f73dbb6 100644
Binary files a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-time-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-time-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-time-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-time-ios-ltr-Mobile-Safari-linux.png
index e50d885e445..eab1c63d0d1 100644
Binary files a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-time-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-time-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-date-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-date-ios-ltr-Mobile-Chrome-linux.png
index 5e4a2ee7219..1eee2850af3 100644
Binary files a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-date-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-date-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-date-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-date-ios-ltr-Mobile-Firefox-linux.png
index 228a75eee1e..71024eacfa8 100644
Binary files a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-date-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-date-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-date-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-date-ios-ltr-Mobile-Safari-linux.png
index c7f1c7006f6..95a3e6977a4 100644
Binary files a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-date-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-date-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/first-day-of-week/datetime.e2e.ts-snapshots/datetime-day-of-week-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/first-day-of-week/datetime.e2e.ts-snapshots/datetime-day-of-week-ios-ltr-Mobile-Chrome-linux.png
index cb3f7e55c76..7a019537e28 100644
Binary files a/core/src/components/datetime/test/first-day-of-week/datetime.e2e.ts-snapshots/datetime-day-of-week-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/first-day-of-week/datetime.e2e.ts-snapshots/datetime-day-of-week-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/first-day-of-week/datetime.e2e.ts-snapshots/datetime-day-of-week-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/first-day-of-week/datetime.e2e.ts-snapshots/datetime-day-of-week-ios-ltr-Mobile-Firefox-linux.png
index 37957b7becc..fe23689cbe4 100644
Binary files a/core/src/components/datetime/test/first-day-of-week/datetime.e2e.ts-snapshots/datetime-day-of-week-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/first-day-of-week/datetime.e2e.ts-snapshots/datetime-day-of-week-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/first-day-of-week/datetime.e2e.ts-snapshots/datetime-day-of-week-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/first-day-of-week/datetime.e2e.ts-snapshots/datetime-day-of-week-ios-ltr-Mobile-Safari-linux.png
index b00b348b831..c099f1ec9f2 100644
Binary files a/core/src/components/datetime/test/first-day-of-week/datetime.e2e.ts-snapshots/datetime-day-of-week-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/datetime/test/first-day-of-week/datetime.e2e.ts-snapshots/datetime-day-of-week-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/first-day-of-week/datetime.e2e.ts-snapshots/datetime-day-of-week-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/first-day-of-week/datetime.e2e.ts-snapshots/datetime-day-of-week-ios-rtl-Mobile-Chrome-linux.png
index 230bbecfb45..d0757e1578b 100644
Binary files a/core/src/components/datetime/test/first-day-of-week/datetime.e2e.ts-snapshots/datetime-day-of-week-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/first-day-of-week/datetime.e2e.ts-snapshots/datetime-day-of-week-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/first-day-of-week/datetime.e2e.ts-snapshots/datetime-day-of-week-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/first-day-of-week/datetime.e2e.ts-snapshots/datetime-day-of-week-ios-rtl-Mobile-Firefox-linux.png
index 92a83b85b1b..4f185349885 100644
Binary files a/core/src/components/datetime/test/first-day-of-week/datetime.e2e.ts-snapshots/datetime-day-of-week-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/first-day-of-week/datetime.e2e.ts-snapshots/datetime-day-of-week-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/first-day-of-week/datetime.e2e.ts-snapshots/datetime-day-of-week-ios-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/first-day-of-week/datetime.e2e.ts-snapshots/datetime-day-of-week-ios-rtl-Mobile-Safari-linux.png
index 98e5c289ad2..d93cff8faa6 100644
Binary files a/core/src/components/datetime/test/first-day-of-week/datetime.e2e.ts-snapshots/datetime-day-of-week-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/datetime/test/first-day-of-week/datetime.e2e.ts-snapshots/datetime-day-of-week-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/highlighted-dates/datetime.e2e.ts-snapshots/datetime-highlightedDates-array-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/highlighted-dates/datetime.e2e.ts-snapshots/datetime-highlightedDates-array-ios-ltr-Mobile-Chrome-linux.png
index 4cc405bd53f..31a74fe973c 100644
Binary files a/core/src/components/datetime/test/highlighted-dates/datetime.e2e.ts-snapshots/datetime-highlightedDates-array-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/highlighted-dates/datetime.e2e.ts-snapshots/datetime-highlightedDates-array-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/highlighted-dates/datetime.e2e.ts-snapshots/datetime-highlightedDates-array-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/highlighted-dates/datetime.e2e.ts-snapshots/datetime-highlightedDates-array-ios-ltr-Mobile-Firefox-linux.png
index cc1c5ca41cb..15b9d765a04 100644
Binary files a/core/src/components/datetime/test/highlighted-dates/datetime.e2e.ts-snapshots/datetime-highlightedDates-array-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/highlighted-dates/datetime.e2e.ts-snapshots/datetime-highlightedDates-array-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/highlighted-dates/datetime.e2e.ts-snapshots/datetime-highlightedDates-array-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/highlighted-dates/datetime.e2e.ts-snapshots/datetime-highlightedDates-array-ios-ltr-Mobile-Safari-linux.png
index fa99291a336..aaeea72a7e2 100644
Binary files a/core/src/components/datetime/test/highlighted-dates/datetime.e2e.ts-snapshots/datetime-highlightedDates-array-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/datetime/test/highlighted-dates/datetime.e2e.ts-snapshots/datetime-highlightedDates-array-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/highlighted-dates/datetime.e2e.ts-snapshots/datetime-highlightedDates-callback-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/highlighted-dates/datetime.e2e.ts-snapshots/datetime-highlightedDates-callback-ios-ltr-Mobile-Chrome-linux.png
index 6d767977315..89bdc37e20e 100644
Binary files a/core/src/components/datetime/test/highlighted-dates/datetime.e2e.ts-snapshots/datetime-highlightedDates-callback-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/highlighted-dates/datetime.e2e.ts-snapshots/datetime-highlightedDates-callback-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/highlighted-dates/datetime.e2e.ts-snapshots/datetime-highlightedDates-callback-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/highlighted-dates/datetime.e2e.ts-snapshots/datetime-highlightedDates-callback-ios-ltr-Mobile-Firefox-linux.png
index 8628e1cd64d..1455a169446 100644
Binary files a/core/src/components/datetime/test/highlighted-dates/datetime.e2e.ts-snapshots/datetime-highlightedDates-callback-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/highlighted-dates/datetime.e2e.ts-snapshots/datetime-highlightedDates-callback-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/highlighted-dates/datetime.e2e.ts-snapshots/datetime-highlightedDates-callback-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/highlighted-dates/datetime.e2e.ts-snapshots/datetime-highlightedDates-callback-ios-ltr-Mobile-Safari-linux.png
index 6e480314469..3b08bfce4d0 100644
Binary files a/core/src/components/datetime/test/highlighted-dates/datetime.e2e.ts-snapshots/datetime-highlightedDates-callback-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/datetime/test/highlighted-dates/datetime.e2e.ts-snapshots/datetime-highlightedDates-callback-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/highlighted-dates/datetime.e2e.ts-snapshots/datetime-highlightedDates-single-color-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/highlighted-dates/datetime.e2e.ts-snapshots/datetime-highlightedDates-single-color-ios-ltr-Mobile-Chrome-linux.png
index 74b305490f9..c2089238eb4 100644
Binary files a/core/src/components/datetime/test/highlighted-dates/datetime.e2e.ts-snapshots/datetime-highlightedDates-single-color-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/highlighted-dates/datetime.e2e.ts-snapshots/datetime-highlightedDates-single-color-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/highlighted-dates/datetime.e2e.ts-snapshots/datetime-highlightedDates-single-color-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/highlighted-dates/datetime.e2e.ts-snapshots/datetime-highlightedDates-single-color-ios-ltr-Mobile-Firefox-linux.png
index 1e689d045ae..15da68faaea 100644
Binary files a/core/src/components/datetime/test/highlighted-dates/datetime.e2e.ts-snapshots/datetime-highlightedDates-single-color-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/highlighted-dates/datetime.e2e.ts-snapshots/datetime-highlightedDates-single-color-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/highlighted-dates/datetime.e2e.ts-snapshots/datetime-highlightedDates-single-color-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/highlighted-dates/datetime.e2e.ts-snapshots/datetime-highlightedDates-single-color-ios-ltr-Mobile-Safari-linux.png
index 4b645645d20..c727986ef83 100644
Binary files a/core/src/components/datetime/test/highlighted-dates/datetime.e2e.ts-snapshots/datetime-highlightedDates-single-color-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/datetime/test/highlighted-dates/datetime.e2e.ts-snapshots/datetime-highlightedDates-single-color-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-diff-ios-ltr-Mobile-Chrome-linux.png
index 8153784415f..d1a4b6d5794 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-diff-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-diff-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-diff-ios-ltr-Mobile-Firefox-linux.png
index ff94bd1eecf..2e90e5b54cf 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-diff-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-diff-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-diff-ios-ltr-Mobile-Safari-linux.png
index 2f70f1f5c43..0b9ce287594 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-diff-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-diff-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-diff-ios-ltr-Mobile-Chrome-linux.png
index 5ae4f80dbf1..f1f532ecc86 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-diff-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-diff-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-diff-ios-ltr-Mobile-Firefox-linux.png
index bc70789048d..7464d99be2e 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-diff-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-diff-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-diff-ios-ltr-Mobile-Safari-linux.png
index 385d2c67951..a6555d200f0 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-diff-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-diff-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-diff-ios-ltr-Mobile-Chrome-linux.png
index 8f986b5afdc..d5cc615d9f6 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-diff-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-diff-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-diff-ios-ltr-Mobile-Firefox-linux.png
index af6cad4a418..6983760521b 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-diff-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-diff-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-diff-ios-ltr-Mobile-Safari-linux.png
index 2770cb15bb3..130ef9c9293 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-diff-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-diff-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-multipleDefaultValues-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-multipleDefaultValues-ios-ltr-Mobile-Chrome-linux.png
index 5b5af5eb521..19c0c0d6f77 100644
Binary files a/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-multipleDefaultValues-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-multipleDefaultValues-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-multipleDefaultValues-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-multipleDefaultValues-ios-ltr-Mobile-Firefox-linux.png
index f90c54390c7..94c62e7ac44 100644
Binary files a/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-multipleDefaultValues-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-multipleDefaultValues-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-multipleDefaultValues-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-multipleDefaultValues-ios-ltr-Mobile-Safari-linux.png
index 67bb944a2f9..d35621c98d4 100644
Binary files a/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-multipleDefaultValues-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-multipleDefaultValues-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-multipleDefaultValues-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-multipleDefaultValues-ios-rtl-Mobile-Chrome-linux.png
index f0700d64fa7..867421c74d8 100644
Binary files a/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-multipleDefaultValues-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-multipleDefaultValues-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-multipleDefaultValues-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-multipleDefaultValues-ios-rtl-Mobile-Firefox-linux.png
index 41add5cc9e1..05e86411978 100644
Binary files a/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-multipleDefaultValues-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-multipleDefaultValues-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-multipleDefaultValues-ios-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-multipleDefaultValues-ios-rtl-Mobile-Safari-linux.png
index e46fa3a3daa..4c5dbeb33ab 100644
Binary files a/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-multipleDefaultValues-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-multipleDefaultValues-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-singleDefaultValue-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-singleDefaultValue-ios-ltr-Mobile-Chrome-linux.png
index 2a025403827..796dc8ce9af 100644
Binary files a/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-singleDefaultValue-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-singleDefaultValue-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-singleDefaultValue-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-singleDefaultValue-ios-ltr-Mobile-Firefox-linux.png
index 578b9af39b6..c715a9d0bc3 100644
Binary files a/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-singleDefaultValue-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-singleDefaultValue-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-singleDefaultValue-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-singleDefaultValue-ios-ltr-Mobile-Safari-linux.png
index 0beaa85b3d3..5ef5163ebd8 100644
Binary files a/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-singleDefaultValue-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-singleDefaultValue-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-singleDefaultValue-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-singleDefaultValue-ios-rtl-Mobile-Chrome-linux.png
index 1d1a062ed3d..1feb16194a5 100644
Binary files a/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-singleDefaultValue-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-singleDefaultValue-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-singleDefaultValue-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-singleDefaultValue-ios-rtl-Mobile-Firefox-linux.png
index cbd385bbf36..c1c67ad78dc 100644
Binary files a/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-singleDefaultValue-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-singleDefaultValue-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-singleDefaultValue-ios-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-singleDefaultValue-ios-rtl-Mobile-Safari-linux.png
index 9568c38ffb9..1deb34e0f36 100644
Binary files a/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-singleDefaultValue-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-singleDefaultValue-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-withHeader-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-withHeader-ios-ltr-Mobile-Chrome-linux.png
index fef210e677c..6dabf2f56c8 100644
Binary files a/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-withHeader-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-withHeader-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-withHeader-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-withHeader-ios-ltr-Mobile-Firefox-linux.png
index 3db6bd30540..844939936af 100644
Binary files a/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-withHeader-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-withHeader-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-withHeader-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-withHeader-ios-ltr-Mobile-Safari-linux.png
index d6d0d945d0e..d86b091c42a 100644
Binary files a/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-withHeader-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-withHeader-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-withHeader-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-withHeader-ios-rtl-Mobile-Chrome-linux.png
index 64c6c8c0407..25eb73a3174 100644
Binary files a/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-withHeader-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-withHeader-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-withHeader-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-withHeader-ios-rtl-Mobile-Firefox-linux.png
index 5192e619dc8..cc0ad932585 100644
Binary files a/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-withHeader-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-withHeader-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-withHeader-ios-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-withHeader-ios-rtl-Mobile-Safari-linux.png
index f96487b49ab..8edc989786c 100644
Binary files a/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-withHeader-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-withHeader-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-base-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-base-ios-ltr-Mobile-Chrome-linux.png
index 5f26e1d763b..c1bfc8a0ac6 100644
Binary files a/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-base-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-base-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-base-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-base-ios-ltr-Mobile-Firefox-linux.png
index 4fdf457d5ee..d8227f6ce86 100644
Binary files a/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-base-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-base-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-base-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-base-ios-ltr-Mobile-Safari-linux.png
index b63a780aaba..0e063adcfc0 100644
Binary files a/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-base-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-base-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-base-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-base-ios-rtl-Mobile-Chrome-linux.png
index 905bb2a8359..c9c25757f44 100644
Binary files a/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-base-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-base-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-base-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-base-ios-rtl-Mobile-Firefox-linux.png
index 9b774c1bacb..975dcd883b3 100644
Binary files a/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-base-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-base-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-base-ios-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-base-ios-rtl-Mobile-Safari-linux.png
index 8ec52491b1f..928dc1e5807 100644
Binary files a/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-base-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-base-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-popover-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-popover-ios-ltr-Mobile-Chrome-linux.png
index c65115da4c9..cff6ab08b20 100644
Binary files a/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-popover-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-popover-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-popover-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-popover-ios-ltr-Mobile-Firefox-linux.png
index 874a208465e..5be30c8a964 100644
Binary files a/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-popover-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-popover-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-popover-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-popover-ios-ltr-Mobile-Safari-linux.png
index 2b3797ad362..cf7fafa36da 100644
Binary files a/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-popover-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-popover-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-popover-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-popover-ios-rtl-Mobile-Chrome-linux.png
index 99823a97be0..841af622f4b 100644
Binary files a/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-popover-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-popover-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-popover-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-popover-ios-rtl-Mobile-Firefox-linux.png
index d9d62a91434..aabc8990888 100644
Binary files a/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-popover-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-popover-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-popover-ios-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-popover-ios-rtl-Mobile-Safari-linux.png
index f80d5660e77..55d85be6d70 100644
Binary files a/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-popover-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-popover-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-diff-ios-ltr-Mobile-Chrome-linux.png
index 7cfa461ac63..ea32e26aaa1 100644
Binary files a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-diff-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-diff-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-diff-ios-ltr-Mobile-Firefox-linux.png
index 560ca42aa4f..ad6f76c951d 100644
Binary files a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-diff-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-diff-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-diff-ios-ltr-Mobile-Safari-linux.png
index 79cc5eebb44..696079c64e5 100644
Binary files a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-diff-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-diff-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-diff-ios-rtl-Mobile-Chrome-linux.png
index e8b55be8120..03e89be54a0 100644
Binary files a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-diff-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-diff-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-diff-ios-rtl-Mobile-Firefox-linux.png
index 992acde7d7c..13de50068fb 100644
Binary files a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-diff-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-diff-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-diff-ios-rtl-Mobile-Safari-linux.png
index f2c03460187..876d433432a 100644
Binary files a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-diff-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-diff-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-time-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-time-diff-ios-ltr-Mobile-Chrome-linux.png
index 6279df12003..68dbbf8780c 100644
Binary files a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-time-diff-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-time-diff-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-time-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-time-diff-ios-ltr-Mobile-Firefox-linux.png
index b51c06b48c7..ffdd1182770 100644
Binary files a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-time-diff-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-time-diff-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-time-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-time-diff-ios-ltr-Mobile-Safari-linux.png
index cdd2c7e6505..d521c5e2e8f 100644
Binary files a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-time-diff-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-time-diff-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-time-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-time-diff-ios-rtl-Mobile-Chrome-linux.png
index 8abdc47a042..0407df1e818 100644
Binary files a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-time-diff-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-time-diff-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-time-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-time-diff-ios-rtl-Mobile-Firefox-linux.png
index bcb391a8e92..acdd19f206b 100644
Binary files a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-time-diff-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-time-diff-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-time-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-time-diff-ios-rtl-Mobile-Safari-linux.png
index 2f541195673..28ae7e30ea9 100644
Binary files a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-time-diff-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-time-diff-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-date-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-date-diff-ios-ltr-Mobile-Chrome-linux.png
index 26b0353de03..a1d02aa2cd2 100644
Binary files a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-date-diff-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-date-diff-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-date-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-date-diff-ios-ltr-Mobile-Firefox-linux.png
index ad5c5a02dc7..c1487741209 100644
Binary files a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-date-diff-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-date-diff-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-date-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-date-diff-ios-ltr-Mobile-Safari-linux.png
index 1a282451443..31a76849712 100644
Binary files a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-date-diff-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-date-diff-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-date-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-date-diff-ios-rtl-Mobile-Chrome-linux.png
index 735713c51a0..6786f570342 100644
Binary files a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-date-diff-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-date-diff-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-date-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-date-diff-ios-rtl-Mobile-Firefox-linux.png
index 8276d3f7e35..8bec0ade32f 100644
Binary files a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-date-diff-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-date-diff-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-date-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-date-diff-ios-rtl-Mobile-Safari-linux.png
index 0e0532ffac9..1d79bc4992b 100644
Binary files a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-date-diff-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-date-diff-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/readonly/datetime.e2e.ts-snapshots/datetime-readonly-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/readonly/datetime.e2e.ts-snapshots/datetime-readonly-ios-ltr-Mobile-Chrome-linux.png
index d57e192078f..5a25aa39131 100644
Binary files a/core/src/components/datetime/test/readonly/datetime.e2e.ts-snapshots/datetime-readonly-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/readonly/datetime.e2e.ts-snapshots/datetime-readonly-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/readonly/datetime.e2e.ts-snapshots/datetime-readonly-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/readonly/datetime.e2e.ts-snapshots/datetime-readonly-ios-ltr-Mobile-Firefox-linux.png
index b9b5e2a7010..78a8cc8a325 100644
Binary files a/core/src/components/datetime/test/readonly/datetime.e2e.ts-snapshots/datetime-readonly-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/readonly/datetime.e2e.ts-snapshots/datetime-readonly-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/readonly/datetime.e2e.ts-snapshots/datetime-readonly-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/readonly/datetime.e2e.ts-snapshots/datetime-readonly-ios-ltr-Mobile-Safari-linux.png
index 6cc24531723..daab39946fe 100644
Binary files a/core/src/components/datetime/test/readonly/datetime.e2e.ts-snapshots/datetime-readonly-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/datetime/test/readonly/datetime.e2e.ts-snapshots/datetime-readonly-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-custom-calendar-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-custom-calendar-ios-ltr-Mobile-Chrome-linux.png
index 1f4d7a23706..188db8e6fa1 100644
Binary files a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-custom-calendar-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-custom-calendar-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-custom-calendar-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-custom-calendar-ios-ltr-Mobile-Firefox-linux.png
index b901962f864..8c0d2c5b2c9 100644
Binary files a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-custom-calendar-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-custom-calendar-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-custom-calendar-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-custom-calendar-ios-ltr-Mobile-Safari-linux.png
index 44736664e1d..1307eb210bb 100644
Binary files a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-custom-calendar-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-custom-calendar-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-date-range-disabled-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-date-range-disabled-ios-ltr-Mobile-Chrome-linux.png
index 046db126345..d47e1238565 100644
Binary files a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-date-range-disabled-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-date-range-disabled-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-date-range-disabled-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-date-range-disabled-ios-ltr-Mobile-Firefox-linux.png
index 86f65d91799..615e04b903d 100644
Binary files a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-date-range-disabled-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-date-range-disabled-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-date-range-disabled-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-date-range-disabled-ios-ltr-Mobile-Safari-linux.png
index c7c7a08d841..e00cb6a1b7a 100644
Binary files a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-date-range-disabled-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-date-range-disabled-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-display-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-display-ios-ltr-Mobile-Chrome-linux.png
index 0c1ccf53afd..a2cb169c476 100644
Binary files a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-display-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-display-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-display-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-display-ios-ltr-Mobile-Firefox-linux.png
index d67765af393..d64174d157b 100644
Binary files a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-display-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-display-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-display-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-display-ios-ltr-Mobile-Safari-linux.png
index bb7ae7a5a39..17bf60b7c28 100644
Binary files a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-display-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-display-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-ios-ltr-Mobile-Chrome-linux.png
index d068b5bf9b8..c1f97d5edf5 100644
Binary files a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-ios-ltr-Mobile-Firefox-linux.png
index 94b2614cdf2..76075382d1e 100644
Binary files a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-ios-ltr-Mobile-Safari-linux.png
index df3c27c3c93..4476f9ced91 100644
Binary files a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-month-disabled-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-month-disabled-ios-ltr-Mobile-Chrome-linux.png
index f187be03f48..139d936ff35 100644
Binary files a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-month-disabled-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-month-disabled-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-month-disabled-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-month-disabled-ios-ltr-Mobile-Firefox-linux.png
index f3086f96207..079b8d5dd8d 100644
Binary files a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-month-disabled-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-month-disabled-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-month-disabled-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-month-disabled-ios-ltr-Mobile-Safari-linux.png
index 8b1f3522c12..69ee05da8fa 100644
Binary files a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-month-disabled-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-month-disabled-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-specific-date-disabled-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-specific-date-disabled-ios-ltr-Mobile-Chrome-linux.png
index db61f894d1e..a6cb70ba2d3 100644
Binary files a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-specific-date-disabled-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-specific-date-disabled-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-specific-date-disabled-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-specific-date-disabled-ios-ltr-Mobile-Firefox-linux.png
index 89759eefd67..3f869ec9d3a 100644
Binary files a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-specific-date-disabled-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-specific-date-disabled-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-specific-date-disabled-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-specific-date-disabled-ios-ltr-Mobile-Safari-linux.png
index 6c739f0d9fd..233d026bd7e 100644
Binary files a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-specific-date-disabled-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-specific-date-disabled-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-weekends-disabled-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-weekends-disabled-ios-ltr-Mobile-Chrome-linux.png
index c7198f834b7..2fd579efb64 100644
Binary files a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-weekends-disabled-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-weekends-disabled-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-weekends-disabled-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-weekends-disabled-ios-ltr-Mobile-Firefox-linux.png
index 2e38980b08e..a7ef1a2a0ea 100644
Binary files a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-weekends-disabled-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-weekends-disabled-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-weekends-disabled-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-weekends-disabled-ios-ltr-Mobile-Safari-linux.png
index 4d1679eb43d..8a3d8803d0c 100644
Binary files a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-weekends-disabled-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-weekends-disabled-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/fab-list/fab-list.tsx b/core/src/components/fab-list/fab-list.tsx
index ff5346dadcd..0504c3eab7f 100644
--- a/core/src/components/fab-list/fab-list.tsx
+++ b/core/src/components/fab-list/fab-list.tsx
@@ -14,6 +14,7 @@ import { getIonTheme } from '../../global/ionic-global';
 })
 export class FabList implements ComponentInterface {
   @Element() el!: HTMLIonFabElement;
+  private activateTimeouts: ReturnType<typeof setTimeout>[] = [];
 
   /**
    * If `true`, the fab list will show all fab buttons in the list.
@@ -22,12 +23,15 @@ export class FabList implements ComponentInterface {
 
   @Watch('activated')
   protected activatedChanged(activated: boolean) {
+    this.activateTimeouts.forEach(clearTimeout);
+    this.activateTimeouts = [];
+
     const fabs = Array.from(this.el.querySelectorAll('ion-fab-button'));
 
     // if showing the fabs add a timeout, else show immediately
     const timeout = activated ? 30 : 0;
     fabs.forEach((fab, i) => {
-      setTimeout(() => (fab.show = activated), i * timeout);
+      this.activateTimeouts.push(setTimeout(() => (fab.show = activated), i * timeout));
     });
   }
 
@@ -36,6 +40,11 @@ export class FabList implements ComponentInterface {
    */
   @Prop() side: 'start' | 'end' | 'top' | 'bottom' = 'bottom';
 
+  disconnectedCallback() {
+    this.activateTimeouts.forEach(clearTimeout);
+    this.activateTimeouts = [];
+  }
+
   render() {
     const theme = getIonTheme(this);
     return (
diff --git a/core/src/components/footer/footer.tsx b/core/src/components/footer/footer.tsx
index 0fb75cac82f..2039bf1c95d 100644
--- a/core/src/components/footer/footer.tsx
+++ b/core/src/components/footer/footer.tsx
@@ -25,6 +25,7 @@ export class Footer implements ComponentInterface {
   private scrollEl?: HTMLElement;
   private contentScrollCallback?: () => void;
   private keyboardCtrl: KeyboardController | null = null;
+  private keyboardCtrlPromise: Promise<KeyboardController> | null = null;
 
   @State() private keyboardVisible = false;
 
@@ -55,7 +56,7 @@ export class Footer implements ComponentInterface {
   }
 
   async connectedCallback() {
-    this.keyboardCtrl = await createKeyboardController(async (keyboardOpen, waitForResize) => {
+    const promise = createKeyboardController(async (keyboardOpen, waitForResize) => {
       /**
        * If the keyboard is hiding, then we need to wait
        * for the webview to resize. Otherwise, the footer
@@ -67,11 +68,32 @@ export class Footer implements ComponentInterface {
 
       this.keyboardVisible = keyboardOpen; // trigger re-render by updating state
     });
+    this.keyboardCtrlPromise = promise;
+
+    const keyboardCtrl = await promise;
+
+    /**
+     * Only assign if this is still the current promise.
+     * Otherwise, a new connectedCallback has started or
+     * disconnectedCallback was called, so destroy this instance.
+     */
+    if (this.keyboardCtrlPromise === promise) {
+      this.keyboardCtrl = keyboardCtrl;
+      this.keyboardCtrlPromise = null;
+    } else {
+      keyboardCtrl.destroy();
+    }
   }
 
   disconnectedCallback() {
+    if (this.keyboardCtrlPromise) {
+      this.keyboardCtrlPromise.then((ctrl) => ctrl.destroy());
+      this.keyboardCtrlPromise = null;
+    }
+
     if (this.keyboardCtrl) {
       this.keyboardCtrl.destroy();
+      this.keyboardCtrl = null;
     }
   }
 
diff --git a/core/src/components/img/img.tsx b/core/src/components/img/img.tsx
index 12d4a4e4748..87c9668e58e 100644
--- a/core/src/components/img/img.tsx
+++ b/core/src/components/img/img.tsx
@@ -19,6 +19,7 @@ import { getIonTheme } from '../../global/ionic-global';
 export class Img implements ComponentInterface {
   private io?: IntersectionObserver;
   private inheritedAttributes: Attributes = {};
+  private loadTimeout: ReturnType<typeof setTimeout> | undefined;
 
   @Element() el!: HTMLElement;
 
@@ -59,7 +60,17 @@ export class Img implements ComponentInterface {
     this.addIO();
   }
 
+  disconnectedCallback() {
+    if (this.loadTimeout) {
+      clearTimeout(this.loadTimeout);
+    }
+  }
+
   private addIO() {
+    if (this.loadTimeout) {
+      clearTimeout(this.loadTimeout);
+      this.loadTimeout = undefined;
+    }
     if (this.src === undefined) {
       return;
     }
@@ -85,7 +96,7 @@ export class Img implements ComponentInterface {
       this.io.observe(this.el);
     } else {
       // fall back to setTimeout for Safari and IE
-      setTimeout(() => this.load(), 200);
+      this.loadTimeout = setTimeout(() => this.load(), 200);
     }
   }
 
diff --git a/core/src/components/input/input.common.scss b/core/src/components/input/input.common.scss
index 6cb8e8605d9..1cc609846a5 100644
--- a/core/src/components/input/input.common.scss
+++ b/core/src/components/input/input.common.scss
@@ -139,6 +139,12 @@
 // The input cover is not clickable when the input is disabled
 .cloned-input {
   position: absolute;
+  top: 0;
+  bottom: 0;
+
+  // Reset height since absolute positioning with top/bottom handles sizing
+  height: auto;
+  max-height: none;
 
   pointer-events: none;
 }
diff --git a/core/src/components/input/input.tsx b/core/src/components/input/input.tsx
index 94829b29bdd..0075f5691c7 100644
--- a/core/src/components/input/input.tsx
+++ b/core/src/components/input/input.tsx
@@ -53,6 +53,7 @@ export class Input implements ComponentInterface {
   private inputId = `ion-input-${inputIds++}`;
   private helperTextId = `${this.inputId}-helper-text`;
   private errorTextId = `${this.inputId}-error-text`;
+  private labelTextId = `${this.inputId}-label`;
   private inheritedAttributes: Attributes = {};
   private isComposing = false;
   private slotMutationController?: SlotMutationController;
@@ -428,7 +429,12 @@ export class Input implements ComponentInterface {
   connectedCallback() {
     const { el } = this;
 
-    this.slotMutationController = createSlotMutationController(el, ['label', 'start', 'end'], () => forceUpdate(this));
+    this.slotMutationController = createSlotMutationController(el, ['label', 'start', 'end'], () => {
+      this.setSlottedLabelId();
+      forceUpdate(this);
+    });
+
+    this.setSlottedLabelId();
     this.notchController = createNotchController(
       el,
       () => this.notchSpacerEl,
@@ -803,7 +809,7 @@ export class Input implements ComponentInterface {
   }
 
   private renderLabel() {
-    const { label } = this;
+    const { label, labelTextId } = this;
 
     return (
       <div
@@ -811,8 +817,17 @@ export class Input implements ComponentInterface {
           'label-text-wrapper': true,
           'label-text-wrapper-hidden': !this.hasLabel,
         }}
+        // Prevents Android TalkBack from focusing the label separately.
+        // The input remains labelled via aria-labelledby.
+        aria-hidden={this.hasLabel ? 'true' : null}
       >
-        {label === undefined ? <slot name="label"></slot> : <div class="label-text">{label}</div>}
+        {label === undefined ? (
+          <slot name="label"></slot>
+        ) : (
+          <div class="label-text" id={labelTextId}>
+            {label}
+          </div>
+        )}
       </div>
     );
   }
@@ -825,6 +840,33 @@ export class Input implements ComponentInterface {
     return this.el.querySelector('[slot="label"]');
   }
 
+  /**
+   * Ensures the slotted label element has an ID for aria-labelledby.
+   * If no ID exists, we assign one using our generated labelTextId.
+   */
+  private setSlottedLabelId() {
+    const slottedLabel = this.labelSlot;
+    if (slottedLabel && !slottedLabel.id) {
+      slottedLabel.id = this.labelTextId;
+    }
+  }
+
+  /**
+   * Returns the ID to use for aria-labelledby on the native input,
+   * or undefined if aria-label is explicitly set (to avoid conflicts).
+   */
+  private getLabelledById(): string | undefined {
+    if (this.inheritedAttributes['aria-label']) {
+      return undefined;
+    }
+
+    if (this.label !== undefined) {
+      return this.labelTextId;
+    }
+
+    return this.labelSlot?.id || undefined;
+  }
+
   /**
    * Returns `true` if label content is provided
    * either by a prop or a content. If you want
@@ -1026,6 +1068,7 @@ export class Input implements ComponentInterface {
               onCompositionend={this.onCompositionEnd}
               aria-describedby={this.getHintTextID()}
               aria-invalid={this.isInvalid ? 'true' : undefined}
+              aria-labelledby={this.getLabelledById()}
               {...this.inheritedAttributes}
             />
             {clearInput && !readonly && !disabled && (
diff --git a/core/src/components/input/test/a11y/input.e2e.ts b/core/src/components/input/test/a11y/input.e2e.ts
index 6a40385c925..21ce46c52b2 100644
--- a/core/src/components/input/test/a11y/input.e2e.ts
+++ b/core/src/components/input/test/a11y/input.e2e.ts
@@ -57,6 +57,104 @@ configs({ directions: ['ltr'], palettes: ['light', 'dark'] }).forEach(({ title,
   });
 });
 
+configs({ directions: ['ltr'], modes: ['md'] }).forEach(({ title, config }) => {
+  test.describe(title('input: label a11y for Android TalkBack'), () => {
+    /**
+     * Android TalkBack treats visible text elements as separate focusable items.
+     * These tests verify that the label is hidden from a11y tree (aria-hidden)
+     * while remaining associated with the input via aria-labelledby.
+     */
+    test('label text wrapper should be hidden from accessibility tree when using label prop', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-input label="Email" value="test@example.com"></ion-input>
+        `,
+        config
+      );
+
+      const labelTextWrapper = page.locator('ion-input .label-text-wrapper');
+      await expect(labelTextWrapper).toHaveAttribute('aria-hidden', 'true');
+    });
+
+    test('label text wrapper should be hidden from accessibility tree when using label slot', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-input value="test@example.com">
+          <div slot="label">Email</div>
+        </ion-input>
+        `,
+        config
+      );
+
+      const labelTextWrapper = page.locator('ion-input .label-text-wrapper');
+      await expect(labelTextWrapper).toHaveAttribute('aria-hidden', 'true');
+    });
+
+    test('native input should have aria-labelledby pointing to label text when using label prop', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-input label="Email" value="test@example.com"></ion-input>
+        `,
+        config
+      );
+
+      const nativeInput = page.locator('ion-input input');
+      const labelText = page.locator('ion-input .label-text');
+
+      const labelTextId = await labelText.getAttribute('id');
+      expect(labelTextId).not.toBeNull();
+      await expect(nativeInput).toHaveAttribute('aria-labelledby', labelTextId!);
+    });
+
+    test('native input should have aria-labelledby pointing to slotted label when using label slot', async ({
+      page,
+    }) => {
+      await page.setContent(
+        `
+        <ion-input value="test@example.com">
+          <div slot="label">Email</div>
+        </ion-input>
+        `,
+        config
+      );
+
+      const nativeInput = page.locator('ion-input input');
+      const slottedLabel = page.locator('ion-input [slot="label"]');
+
+      const slottedLabelId = await slottedLabel.getAttribute('id');
+      expect(slottedLabelId).not.toBeNull();
+      await expect(nativeInput).toHaveAttribute('aria-labelledby', slottedLabelId!);
+    });
+
+    test('should not add aria-labelledby when aria-label is provided on host', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-input aria-label="Custom Label" value="test@example.com"></ion-input>
+        `,
+        config
+      );
+
+      const nativeInput = page.locator('ion-input input');
+
+      await expect(nativeInput).toHaveAttribute('aria-label', 'Custom Label');
+      await expect(nativeInput).not.toHaveAttribute('aria-labelledby');
+    });
+
+    test('should not add aria-hidden to label wrapper when no label is present', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-input aria-label="Hidden Label" value="test@example.com"></ion-input>
+        `,
+        config
+      );
+
+      const labelTextWrapper = page.locator('ion-input .label-text-wrapper');
+
+      await expect(labelTextWrapper).not.toHaveAttribute('aria-hidden', 'true');
+    });
+  });
+});
+
 configs({ directions: ['ltr'] }).forEach(({ title, config, screenshot }) => {
   test.describe(title('input: font scaling'), () => {
     test('should scale text on larger font sizes', async ({ page }) => {
diff --git a/core/src/components/item-divider/item-divider.tsx b/core/src/components/item-divider/item-divider.tsx
index 96198e6f1a9..1773d93a3d3 100644
--- a/core/src/components/item-divider/item-divider.tsx
+++ b/core/src/components/item-divider/item-divider.tsx
@@ -12,6 +12,9 @@ import type { Color } from '../../interface';
  * @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.
  * @slot end - Content is placed to the right of the divider text in LTR, and to the left in RTL.
+ *
+ * @part inner - The inner wrapper element that arranges the divider content.
+ * @part container - The wrapper element that contains the default slot.
  */
 @Component({
   tag: 'ion-item-divider',
@@ -52,8 +55,8 @@ export class ItemDivider implements ComponentInterface {
         })}
       >
         <slot name="start"></slot>
-        <div class="item-divider-inner">
-          <div class="item-divider-wrapper">
+        <div class="item-divider-inner" part="inner">
+          <div class="item-divider-wrapper" part="container">
             <slot></slot>
           </div>
           <slot name="end"></slot>
diff --git a/core/src/components/item-divider/test/custom/item-divider.e2e.ts b/core/src/components/item-divider/test/custom/item-divider.e2e.ts
new file mode 100644
index 00000000000..497d607a2b8
--- /dev/null
+++ b/core/src/components/item-divider/test/custom/item-divider.e2e.ts
@@ -0,0 +1,57 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+/**
+ * This behavior does not vary across modes/directions
+ */
+configs({ directions: ['ltr'], modes: ['md'] }).forEach(({ title, config }) => {
+  test.describe(title('item-divider: custom'), () => {
+    test.describe('CSS shadow parts', () => {
+      test('should be able to customize inner part', async ({ page }) => {
+        await page.setContent(
+          `
+          <style>
+            ion-item-divider::part(inner) {
+              background-color: red;
+            }
+          </style>
+
+          <ion-item-divider>Divider</ion-item-divider>
+        `,
+          config
+        );
+
+        const divider = page.locator('ion-item-divider');
+        const backgroundColor = await divider.evaluate((el) => {
+          const shadowRoot = el.shadowRoot;
+          const inner = shadowRoot?.querySelector('.item-divider-inner');
+          return inner ? window.getComputedStyle(inner).backgroundColor : '';
+        });
+        expect(backgroundColor).toBe('rgb(255, 0, 0)');
+      });
+
+      test('should be able to customize container part', async ({ page }) => {
+        await page.setContent(
+          `
+          <style>
+            ion-item-divider::part(container) {
+              background-color: green;
+            }
+          </style>
+
+          <ion-item-divider>Divider</ion-item-divider>
+        `,
+          config
+        );
+
+        const divider = page.locator('ion-item-divider');
+        const backgroundColor = await divider.evaluate((el) => {
+          const shadowRoot = el.shadowRoot;
+          const container = shadowRoot?.querySelector('.item-divider-wrapper');
+          return container ? window.getComputedStyle(container).backgroundColor : '';
+        });
+        expect(backgroundColor).toBe('rgb(0, 128, 0)');
+      });
+    });
+  });
+});
diff --git a/core/src/components/item-option/item-option.tsx b/core/src/components/item-option/item-option.tsx
index e734b9cac98..e1d801bbe08 100644
--- a/core/src/components/item-option/item-option.tsx
+++ b/core/src/components/item-option/item-option.tsx
@@ -18,6 +18,8 @@ import type { Color } from '../../interface';
  * @slot end - Content is placed to the right of the option text in LTR, and to the left in RTL.
  *
  * @part native - The native HTML button or anchor element that wraps all child elements.
+ * @part inner - The inner wrapper element that arranges the option content.
+ * @part container - The container element that wraps the start, icon-only, default, and end slots.
  */
 @Component({
   tag: 'ion-item-option',
@@ -148,9 +150,9 @@ export class ItemOption implements ComponentInterface, AnchorInterface, ButtonIn
         })}
       >
         <TagType {...attrs} class="button-native" part="native" disabled={disabled}>
-          <span class="button-inner">
+          <span class="button-inner" part="inner">
             <slot name="top"></slot>
-            <div class="horizontal-wrapper">
+            <div class="horizontal-wrapper" part="container">
               <slot name="start"></slot>
               <slot name="icon-only"></slot>
               <slot></slot>
diff --git a/core/src/components/item-option/test/custom/item-option.e2e.ts b/core/src/components/item-option/test/custom/item-option.e2e.ts
new file mode 100644
index 00000000000..b1a44d7dc6f
--- /dev/null
+++ b/core/src/components/item-option/test/custom/item-option.e2e.ts
@@ -0,0 +1,80 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+/**
+ * This behavior does not vary across modes/directions
+ */
+configs({ directions: ['ltr'], modes: ['md'] }).forEach(({ title, config }) => {
+  test.describe(title('item-option: custom'), () => {
+    test.describe('CSS shadow parts', () => {
+      test('should be able to customize native part', async ({ page }) => {
+        await page.setContent(
+          `
+          <style>
+            ion-item-option::part(native) {
+              background-color: red;
+            }
+          </style>
+
+          <ion-item-option>Option</ion-item-option>
+        `,
+          config
+        );
+
+        const itemOption = page.locator('ion-item-option');
+        const backgroundColor = await itemOption.evaluate((el) => {
+          const shadowRoot = el.shadowRoot;
+          const native = shadowRoot?.querySelector('.button-native');
+          return native ? window.getComputedStyle(native).backgroundColor : '';
+        });
+        expect(backgroundColor).toBe('rgb(255, 0, 0)');
+      });
+
+      test('should be able to customize inner part', async ({ page }) => {
+        await page.setContent(
+          `
+          <style>
+            ion-item-option::part(inner) {
+              background-color: green;
+            }
+          </style>
+
+          <ion-item-option>Option</ion-item-option>
+        `,
+          config
+        );
+
+        const itemOption = page.locator('ion-item-option');
+        const backgroundColor = await itemOption.evaluate((el) => {
+          const shadowRoot = el.shadowRoot;
+          const inner = shadowRoot?.querySelector('.button-inner');
+          return inner ? window.getComputedStyle(inner).backgroundColor : '';
+        });
+        expect(backgroundColor).toBe('rgb(0, 128, 0)');
+      });
+
+      test('should be able to customize container part', async ({ page }) => {
+        await page.setContent(
+          `
+          <style>
+            ion-item-option::part(container) {
+              background-color: blue;
+            }
+          </style>
+
+          <ion-item-option>Option</ion-item-option>
+        `,
+          config
+        );
+
+        const itemOption = page.locator('ion-item-option');
+        const backgroundColor = await itemOption.evaluate((el) => {
+          const shadowRoot = el.shadowRoot;
+          const container = shadowRoot?.querySelector('.horizontal-wrapper');
+          return container ? window.getComputedStyle(container).backgroundColor : '';
+        });
+        expect(backgroundColor).toBe('rgb(0, 0, 255)');
+      });
+    });
+  });
+});
diff --git a/core/src/components/item/item.tsx b/core/src/components/item/item.tsx
index 93211adf2de..65d5d949260 100644
--- a/core/src/components/item/item.tsx
+++ b/core/src/components/item/item.tsx
@@ -21,6 +21,8 @@ import type { RouterDirection } from '../router/utils/interface';
  * @slot end - Content is placed to the right of the item text in LTR, and to the left in RTL.
  *
  * @part native - The native HTML button, anchor or div element that wraps all child elements.
+ * @part inner - The inner wrapper element that arranges the item content.
+ * @part container - The wrapper element that contains the default slot.
  * @part detail-icon - The chevron icon for the item. Only applies when `detail="true"`.
  */
 @Component({
@@ -431,8 +433,8 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac
           {...clickFn}
         >
           <slot name="start" onSlotchange={this.updateInteractivityOnSlotChange}></slot>
-          <div class="item-inner">
-            <div class="input-wrapper">
+          <div class="item-inner" part="inner">
+            <div class="input-wrapper" part="container">
               <slot onSlotchange={this.updateInteractivityOnSlotChange}></slot>
             </div>
             <slot name="end" onSlotchange={this.updateInteractivityOnSlotChange}></slot>
diff --git a/core/src/components/item/test/css-variables/item.e2e.ts b/core/src/components/item/test/css-variables/item.e2e.ts
deleted file mode 100644
index 7f24b1724cd..00000000000
--- a/core/src/components/item/test/css-variables/item.e2e.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { expect } from '@playwright/test';
-import { configs, test } from '@utils/test/playwright';
-
-/**
- * This behavior does not vary across directions
- */
-configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
-  test.describe(title('item: CSS variables'), () => {
-    test('should not have visual regressions', async ({ page }) => {
-      await page.goto(`/src/components/item/test/css-variables`, config);
-
-      await page.setIonViewport();
-
-      await expect(page).toHaveScreenshot(screenshot(`item-css-vars-diff`));
-    });
-  });
-});
diff --git a/core/src/components/item/test/css-variables/item.e2e.ts-snapshots/item-css-vars-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/css-variables/item.e2e.ts-snapshots/item-css-vars-diff-ios-ltr-Mobile-Chrome-linux.png
deleted file mode 100644
index e5deac11796..00000000000
Binary files a/core/src/components/item/test/css-variables/item.e2e.ts-snapshots/item-css-vars-diff-ios-ltr-Mobile-Chrome-linux.png and /dev/null differ
diff --git a/core/src/components/item/test/css-variables/item.e2e.ts-snapshots/item-css-vars-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/css-variables/item.e2e.ts-snapshots/item-css-vars-diff-ios-ltr-Mobile-Firefox-linux.png
deleted file mode 100644
index de756ae34fc..00000000000
Binary files a/core/src/components/item/test/css-variables/item.e2e.ts-snapshots/item-css-vars-diff-ios-ltr-Mobile-Firefox-linux.png and /dev/null differ
diff --git a/core/src/components/item/test/css-variables/item.e2e.ts-snapshots/item-css-vars-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/css-variables/item.e2e.ts-snapshots/item-css-vars-diff-ios-ltr-Mobile-Safari-linux.png
deleted file mode 100644
index 763572ddc84..00000000000
Binary files a/core/src/components/item/test/css-variables/item.e2e.ts-snapshots/item-css-vars-diff-ios-ltr-Mobile-Safari-linux.png and /dev/null differ
diff --git a/core/src/components/item/test/css-variables/item.e2e.ts-snapshots/item-css-vars-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/css-variables/item.e2e.ts-snapshots/item-css-vars-diff-md-ltr-Mobile-Chrome-linux.png
deleted file mode 100644
index 10e9806c874..00000000000
Binary files a/core/src/components/item/test/css-variables/item.e2e.ts-snapshots/item-css-vars-diff-md-ltr-Mobile-Chrome-linux.png and /dev/null differ
diff --git a/core/src/components/item/test/css-variables/item.e2e.ts-snapshots/item-css-vars-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/css-variables/item.e2e.ts-snapshots/item-css-vars-diff-md-ltr-Mobile-Firefox-linux.png
deleted file mode 100644
index 24b45b3112e..00000000000
Binary files a/core/src/components/item/test/css-variables/item.e2e.ts-snapshots/item-css-vars-diff-md-ltr-Mobile-Firefox-linux.png and /dev/null differ
diff --git a/core/src/components/item/test/css-variables/item.e2e.ts-snapshots/item-css-vars-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/css-variables/item.e2e.ts-snapshots/item-css-vars-diff-md-ltr-Mobile-Safari-linux.png
deleted file mode 100644
index dbcf1f27b7a..00000000000
Binary files a/core/src/components/item/test/css-variables/item.e2e.ts-snapshots/item-css-vars-diff-md-ltr-Mobile-Safari-linux.png and /dev/null differ
diff --git a/core/src/components/item/test/custom/item.e2e.ts b/core/src/components/item/test/custom/item.e2e.ts
new file mode 100644
index 00000000000..212c55acaf2
--- /dev/null
+++ b/core/src/components/item/test/custom/item.e2e.ts
@@ -0,0 +1,174 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+/**
+ * This behavior does not vary across modes/directions
+ */
+configs({ directions: ['ltr'], modes: ['md'] }).forEach(({ title, config }) => {
+  test.describe(title('item: custom'), () => {
+    test.describe('CSS shadow parts', () => {
+      test('should be able to customize native part', async ({ page }) => {
+        await page.setContent(
+          `
+          <style>
+            ion-item::part(native) {
+              background-color: red;
+            }
+          </style>
+
+          <ion-item>
+            <ion-label>Item</ion-label>
+          </ion-item>
+        `,
+          config
+        );
+
+        const item = page.locator('ion-item');
+        const backgroundColor = await item.evaluate((el) => {
+          const shadowRoot = el.shadowRoot;
+          const native = shadowRoot?.querySelector('.item-native');
+          return native ? window.getComputedStyle(native).backgroundColor : '';
+        });
+        expect(backgroundColor).toBe('rgb(255, 0, 0)');
+      });
+
+      test('should be able to customize inner part', async ({ page }) => {
+        await page.setContent(
+          `
+          <style>
+            ion-item::part(inner) {
+              background-color: green;
+            }
+          </style>
+
+          <ion-item>
+            <ion-label>Item</ion-label>
+          </ion-item>
+        `,
+          config
+        );
+
+        const item = page.locator('ion-item');
+        const backgroundColor = await item.evaluate((el) => {
+          const shadowRoot = el.shadowRoot;
+          const inner = shadowRoot?.querySelector('.item-inner');
+          return inner ? window.getComputedStyle(inner).backgroundColor : '';
+        });
+        expect(backgroundColor).toBe('rgb(0, 128, 0)');
+      });
+
+      test('should be able to customize container part', async ({ page }) => {
+        await page.setContent(
+          `
+          <style>
+            ion-item::part(container) {
+              background-color: blue;
+            }
+          </style>
+
+          <ion-item>
+            <ion-label>Item</ion-label>
+          </ion-item>
+        `,
+          config
+        );
+
+        const item = page.locator('ion-item');
+        const backgroundColor = await item.evaluate((el) => {
+          const shadowRoot = el.shadowRoot;
+          const container = shadowRoot?.querySelector('.input-wrapper');
+          return container ? window.getComputedStyle(container).backgroundColor : '';
+        });
+        expect(backgroundColor).toBe('rgb(0, 0, 255)');
+      });
+
+      test('should be able to customize detail-icon part', async ({ page }) => {
+        await page.setContent(
+          `
+          <style>
+            ion-item::part(detail-icon) {
+              background-color: red;
+            }
+          </style>
+
+          <ion-item detail="true">
+            <ion-label>Item</ion-label>
+          </ion-item>
+        `,
+          config
+        );
+
+        const item = page.locator('ion-item');
+        const backgroundColor = await item.evaluate((el) => {
+          const shadowRoot = el.shadowRoot;
+          const detailIcon = shadowRoot?.querySelector('.item-detail-icon');
+          return detailIcon ? window.getComputedStyle(detailIcon).backgroundColor : '';
+        });
+        expect(backgroundColor).toBe('rgb(255, 0, 0)');
+      });
+    });
+
+    test.describe('CSS variables', () => {
+      test('should be able to customize background using css variables', async ({ page }) => {
+        await page.setContent(
+          `
+          <style>
+            ion-item {
+              --background: red;
+            }
+          </style>
+
+          <ion-item>
+            <ion-label>Item</ion-label>
+          </ion-item>
+        `,
+          config
+        );
+
+        const item = page.locator('ion-item');
+        const backgroundColor = await item.evaluate((el) => {
+          const shadowRoot = el.shadowRoot;
+          const native = shadowRoot?.querySelector('.item-native');
+          return native ? window.getComputedStyle(native).backgroundColor : '';
+        });
+        expect(backgroundColor).toBe('rgb(255, 0, 0)');
+      });
+
+      test('should be able to customize padding using css variables', async ({ page }) => {
+        await page.setContent(
+          `
+          <style>
+            ion-item {
+              --padding-top: 20px;
+              --padding-bottom: 20px;
+              --padding-start: 10px;
+              --padding-end: 10px;
+            }
+          </style>
+
+          <ion-item>
+            <ion-label>Item</ion-label>
+          </ion-item>
+        `,
+          config
+        );
+
+        const item = page.locator('ion-item');
+        const paddingValues = await item.evaluate((el) => {
+          const shadowRoot = el.shadowRoot;
+          const native = shadowRoot?.querySelector('.item-native');
+          return {
+            paddingTop: native ? window.getComputedStyle(native).paddingTop : '',
+            paddingBottom: native ? window.getComputedStyle(native).paddingBottom : '',
+            paddingStart: native ? window.getComputedStyle(native).paddingLeft : '',
+            paddingEnd: native ? window.getComputedStyle(native).paddingRight : '',
+          };
+        });
+        expect(paddingValues.paddingTop).toBe('20px');
+        expect(paddingValues.paddingBottom).toBe('20px');
+        expect(paddingValues.paddingStart).toBe('10px');
+        expect(paddingValues.paddingEnd).toBe('10px');
+      });
+    });
+  });
+});
diff --git 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
index 789c34c49ce..d4e11778941 100644
Binary files a/core/src/components/item/test/inputs/item.e2e.ts-snapshots/item-inputs-disabled-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/item/test/inputs/item.e2e.ts-snapshots/item-inputs-disabled-ios-ltr-Mobile-Chrome-linux.png differ
diff --git 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
index 819588d2217..9de82bc1f50 100644
Binary files a/core/src/components/item/test/inputs/item.e2e.ts-snapshots/item-inputs-disabled-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/item/test/inputs/item.e2e.ts-snapshots/item-inputs-disabled-ios-ltr-Mobile-Firefox-linux.png differ
diff --git 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
new file mode 100644
index 00000000000..cdcf57052b3
Binary files /dev/null and b/core/src/components/item/test/inputs/item.e2e.ts-snapshots/item-inputs-disabled-ios-ltr-Mobile-Safari-linux.png differ
diff --git 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
index 2eb2b1c08c6..1de205265ce 100644
Binary files a/core/src/components/item/test/inputs/item.e2e.ts-snapshots/item-inputs-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/item/test/inputs/item.e2e.ts-snapshots/item-inputs-ios-ltr-Mobile-Chrome-linux.png differ
diff --git 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
index 32996e6baec..a60b81edc1b 100644
Binary files a/core/src/components/item/test/inputs/item.e2e.ts-snapshots/item-inputs-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/item/test/inputs/item.e2e.ts-snapshots/item-inputs-ios-ltr-Mobile-Firefox-linux.png differ
diff --git 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
index 4b5c75cb54f..984f2cc43fe 100644
Binary files a/core/src/components/item/test/inputs/item.e2e.ts-snapshots/item-inputs-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/item/test/inputs/item.e2e.ts-snapshots/item-inputs-ios-ltr-Mobile-Safari-linux.png differ
diff --git 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
index 471c06998ad..f72079cb094 100644
Binary files a/core/src/components/item/test/inputs/item.e2e.ts-snapshots/item-inputs-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/item/test/inputs/item.e2e.ts-snapshots/item-inputs-ios-rtl-Mobile-Chrome-linux.png differ
diff --git 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
index 349b310d9f3..41eb69aa763 100644
Binary files a/core/src/components/item/test/inputs/item.e2e.ts-snapshots/item-inputs-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/item/test/inputs/item.e2e.ts-snapshots/item-inputs-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/inputs/item.e2e.ts-snapshots/item-inputs-ios-rtl-Mobile-Safari-linux.png b/core/src/components/item/test/inputs/item.e2e.ts-snapshots/item-inputs-ios-rtl-Mobile-Safari-linux.png
index 36e81018d6c..e6428dfae7c 100644
Binary files a/core/src/components/item/test/inputs/item.e2e.ts-snapshots/item-inputs-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/item/test/inputs/item.e2e.ts-snapshots/item-inputs-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/label/label.tsx b/core/src/components/label/label.tsx
index 022907039e1..000f3c0a797 100644
--- a/core/src/components/label/label.tsx
+++ b/core/src/components/label/label.tsx
@@ -20,6 +20,7 @@ import type { Color, StyleEventDetail } from '../../interface';
 })
 export class Label implements ComponentInterface {
   private inRange = false;
+  private loadTimeout: ReturnType<typeof setTimeout> | undefined;
 
   @Element() el!: HTMLElement;
 
@@ -58,12 +59,18 @@ export class Label implements ComponentInterface {
 
   componentDidLoad() {
     if (this.noAnimate) {
-      setTimeout(() => {
+      this.loadTimeout = setTimeout(() => {
         this.noAnimate = false;
       }, 1000);
     }
   }
 
+  disconnectedCallback() {
+    if (this.loadTimeout) {
+      clearTimeout(this.loadTimeout);
+    }
+  }
+
   @Watch('color')
   colorChanged() {
     this.emitColor();
diff --git a/core/src/components/list-header/list-header.tsx b/core/src/components/list-header/list-header.tsx
index 24deb535e23..7031aea3fea 100644
--- a/core/src/components/list-header/list-header.tsx
+++ b/core/src/components/list-header/list-header.tsx
@@ -8,6 +8,8 @@ import type { Color } from '../../interface';
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
  * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
+ *
+ * @part inner - The inner wrapper element that arranges the list header content.
  */
 @Component({
   tag: 'ion-list-header',
@@ -42,7 +44,7 @@ export class ListHeader implements ComponentInterface {
           [`list-header-lines-${lines}`]: lines !== undefined,
         })}
       >
-        <div class="list-header-inner">
+        <div class="list-header-inner" part="inner">
           <slot></slot>
         </div>
       </Host>
diff --git a/core/src/components/list-header/test/custom/list-header.e2e.ts b/core/src/components/list-header/test/custom/list-header.e2e.ts
new file mode 100644
index 00000000000..64a7ae105de
--- /dev/null
+++ b/core/src/components/list-header/test/custom/list-header.e2e.ts
@@ -0,0 +1,34 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+/**
+ * This behavior does not vary across modes/directions
+ */
+configs({ directions: ['ltr'], modes: ['md'] }).forEach(({ title, config }) => {
+  test.describe(title('list-header: custom'), () => {
+    test.describe('CSS shadow parts', () => {
+      test('should be able to customize inner part', async ({ page }) => {
+        await page.setContent(
+          `
+          <style>
+            ion-list-header::part(inner) {
+              background-color: red;
+            }
+          </style>
+
+          <ion-list-header>Header</ion-list-header>
+        `,
+          config
+        );
+
+        const header = page.locator('ion-list-header');
+        const backgroundColor = await header.evaluate((el) => {
+          const shadowRoot = el.shadowRoot;
+          const inner = shadowRoot?.querySelector('.list-header-inner');
+          return inner ? window.getComputedStyle(inner).backgroundColor : '';
+        });
+        expect(backgroundColor).toBe('rgb(255, 0, 0)');
+      });
+    });
+  });
+});
diff --git a/core/src/components/modal/gestures/sheet.ts b/core/src/components/modal/gestures/sheet.ts
index 8840e3123be..6617a183cfc 100644
--- a/core/src/components/modal/gestures/sheet.ts
+++ b/core/src/components/modal/gestures/sheet.ts
@@ -3,7 +3,7 @@ import { createGesture } from '@utils/gesture';
 import { clamp, getElementRoot, raf } from '@utils/helpers';
 import { FOCUS_TRAP_DISABLE_CLASS } from '@utils/overlays';
 
-import type { Animation } from '../../../interface';
+import type { Animation, ModalDragEventDetail } from '../../../interface';
 import type { GestureDetail } from '../../../utils/gesture';
 import { getBackdropValueForSheet } from '../utils';
 
@@ -53,7 +53,10 @@ export const createSheetGesture = (
   getCurrentBreakpoint: () => number,
   onDismiss: () => void,
   onBreakpointChange: (breakpoint: number) => void,
-  staticBackdropOpacity: boolean
+  staticBackdropOpacity: boolean,
+  onDragStart: () => void,
+  onDragMove: (detail: ModalDragEventDetail) => void,
+  onDragEnd: (detail: ModalDragEventDetail) => void
 ) => {
   // Defaults for the sheet swipe animation
   const defaultBackdrop = [
@@ -348,6 +351,8 @@ export const createSheetGesture = (
     });
 
     animation.progressStart(true, 1 - currentBreakpoint);
+
+    onDragStart();
   };
 
   const onMove = (detail: GestureDetail) => {
@@ -424,9 +429,31 @@ export const createSheetGesture = (
 
     offset = clamp(0.0001, processedStep, maxStep);
     animation.progressStep(offset);
+
+    const snapBreakpoint = calculateSnapBreakpoint(detail.deltaY);
+
+    const eventDetail: ModalDragEventDetail = {
+      currentY: detail.currentY,
+      deltaY: detail.deltaY,
+      velocityY: detail.velocityY,
+      progress: calculateProgress(detail.currentY),
+      snapBreakpoint: snapBreakpoint,
+    };
+
+    onDragMove(eventDetail);
   };
 
   const onEnd = (detail: GestureDetail) => {
+    const snapBreakpoint = calculateSnapBreakpoint(detail.deltaY);
+
+    const eventDetail: ModalDragEventDetail = {
+      currentY: detail.currentY,
+      deltaY: detail.deltaY,
+      velocityY: detail.velocityY,
+      progress: calculateProgress(detail.currentY),
+      snapBreakpoint,
+    };
+
     /**
      * If expandToScroll is disabled, we should not allow the moveSheetToBreakpoint
      * function to be called if the user is trying to swipe content upwards and the content
@@ -441,23 +468,13 @@ export const createSheetGesture = (
        * swap to moving on drag and if we don't swap back here then the footer will get stuck.
        */
       swapFooterPosition('stationary');
+      onDragEnd(eventDetail);
+
       return;
     }
 
-    /**
-     * When the gesture releases, we need to determine
-     * the closest breakpoint to snap to.
-     */
-    const velocity = detail.velocityY;
-    const threshold = (detail.deltaY + velocity * 350) / height;
-
-    const diff = currentBreakpoint - threshold;
-    const closest = breakpoints.reduce((a, b) => {
-      return Math.abs(b - diff) < Math.abs(a - diff) ? b : a;
-    });
-
     moveSheetToBreakpoint({
-      breakpoint: closest,
+      breakpoint: snapBreakpoint,
       breakpointOffset: offset,
       canDismiss: canDismissBlocksGesture,
 
@@ -467,6 +484,8 @@ export const createSheetGesture = (
        */
       animated: true,
     });
+
+    onDragEnd(eventDetail);
   };
 
   const moveSheetToBreakpoint = (options: MoveSheetToBreakpointOptions) => {
@@ -626,6 +645,112 @@ export const createSheetGesture = (
     });
   };
 
+  /**
+   * Calculates the breakpoint based on the current deltaY.
+   * This determines where the sheet should snap to when the user releases the
+   * gesture.
+   *
+   * @param deltaY The change in Y position since the gesture started.
+   * @returns The snap breakpoint value.
+   */
+  const calculateSnapBreakpoint = (deltaY: number): number => {
+    /**
+     * Calculates the real-time vertical position of the modal.
+     * We combine the wrapper's current bounding box position with the
+     * gesture's deltaY to account for the physical movement during the drag.
+     */
+    const currentY = wrapperEl.getBoundingClientRect().top + deltaY;
+    /**
+     * Convert that pixel position back into a 0 to 1 progress value.
+     */
+    const currentProgress = calculateProgress(currentY);
+
+    /**
+     * Find and return the defined breakpoint that is closest to the
+     * current progress.
+     */
+    const snapBreakpoint = breakpoints.reduce((a, b) => {
+      return Math.abs(b - currentProgress) < Math.abs(a - currentProgress) ? b : a;
+    });
+
+    return snapBreakpoint;
+  };
+
+  /**
+   * Calculates the progress of the swipe gesture.
+   *
+   * The progress is a value between 0 and 1 that represents how far
+   * the swipe has progressed towards closing the modal.
+   *
+   * A value closer to 1 means the modal is closer to being opened,
+   * while a value closer to 0 means the modal is closer to being closed.
+   *
+   * @param currentY The current Y position of the gesture
+   * @returns The progress of the sheet gesture
+   */
+  const calculateProgress = (currentY: number): number => {
+    const minBreakpoint = breakpoints[0];
+    const maxBreakpoint = breakpoints[breakpoints.length - 1];
+
+    /**
+     * The lowest point the sheet can be dragged to aka the point at which
+     * the sheet is fully closed.
+     */
+    const maxY = convertBreakpointToY(minBreakpoint);
+    /**
+     * The highest point the sheet can be dragged to aka the point at which
+     * the sheet is fully open.
+     */
+    const minY = convertBreakpointToY(maxBreakpoint);
+    // The total distance between the fully open and fully closed positions.
+    const totalDistance = maxY - minY;
+    // The distance from the current position to the fully closed position.
+    const distanceFromBottom = maxY - currentY;
+    /**
+     * The progress represents how far the sheet is from the bottom relative
+     * to the total distance. When the user starts swiping up, the progress
+     * should be close to 1, and when the user has swiped all the way down,
+     * the progress should be close to 0.
+     */
+    const progress = distanceFromBottom / totalDistance;
+    // Round to the nearest thousandth to avoid returning very small decimal
+    const roundedProgress = Math.round(progress * 1000) / 1000;
+
+    return Math.max(0, Math.min(1, roundedProgress));
+  };
+
+  /**
+   * Converts a breakpoint value (0 to 1) into a pixel Y coordinate
+   * on the screen.
+   *
+   * @param breakpoint The breakpoint value (e.g., 0.5 for half-open)
+   * @returns The pixel Y coordinate on the screen
+   */
+  const convertBreakpointToY = (breakpoint: number): number => {
+    const rect = baseEl.getBoundingClientRect();
+    const modalHeight = rect.height;
+    // The bottom of the screen.
+    const viewportBottom = window.innerHeight;
+    /**
+     * The active height is how much of the modal is actually showing
+     * on the screen for this specific breakpoint.
+     */
+    const activeHeight = modalHeight * breakpoint;
+
+    /**
+     * To find the Y coordinate, start at the bottom of the screen
+     * and move up by the active height of the modal.
+     *
+     * A breakpoint of 1.0 means the active height is the full modal height
+     * (fully open). A breakpoint of 0.0 means the active height is 0
+     * (fully closed).
+     *
+     * Since screen Y coordinates get smaller as you go up, we subtract the
+     * active height from the viewport bottom.
+     */
+    return viewportBottom - activeHeight;
+  };
+
   const gesture = createGesture({
     el: wrapperEl,
     gestureName: 'modalSheet',
diff --git a/core/src/components/modal/gestures/swipe-to-close.ts b/core/src/components/modal/gestures/swipe-to-close.ts
index 17ec454ff15..2b66e7eac24 100644
--- a/core/src/components/modal/gestures/swipe-to-close.ts
+++ b/core/src/components/modal/gestures/swipe-to-close.ts
@@ -4,7 +4,7 @@ import { createGesture } from '@utils/gesture';
 import { clamp, getElementRoot } from '@utils/helpers';
 import { OVERLAY_GESTURE_PRIORITY } from '@utils/overlays';
 
-import type { Animation } from '../../../interface';
+import type { Animation, ModalDragEventDetail } from '../../../interface';
 import type { GestureDetail } from '../../../utils/gesture';
 import type { Style as StatusBarStyle } from '../../../utils/native/status-bar';
 import { setCardStatusBarDark, setCardStatusBarDefault } from '../utils';
@@ -20,7 +20,10 @@ export const createSwipeToCloseGesture = (
   el: HTMLIonModalElement,
   animation: Animation,
   statusBarStyle: StatusBarStyle,
-  onDismiss: () => void
+  onDismiss: () => void,
+  onDragStart: () => void,
+  onDragMove: (detail: ModalDragEventDetail) => void,
+  onDragEnd: (detail: ModalDragEventDetail) => void
 ) => {
   /**
    * The step value at which a card modal
@@ -142,6 +145,8 @@ export const createSwipeToCloseGesture = (
     }
 
     animation.progressStart(true, isOpen ? 1 : 0);
+
+    onDragStart();
   };
 
   const onMove = (detail: GestureDetail) => {
@@ -220,6 +225,15 @@ export const createSwipeToCloseGesture = (
     }
 
     lastStep = clampedStep;
+
+    const eventDetail: ModalDragEventDetail = {
+      currentY: detail.currentY,
+      deltaY: detail.deltaY,
+      velocityY: detail.velocityY,
+      progress: calculateProgress(el, detail.deltaY),
+    };
+
+    onDragMove(eventDetail);
   };
 
   const onEnd = (detail: GestureDetail) => {
@@ -288,6 +302,15 @@ export const createSwipeToCloseGesture = (
     } else if (shouldComplete) {
       onDismiss();
     }
+
+    const eventDetail: ModalDragEventDetail = {
+      currentY: detail.currentY,
+      deltaY: detail.deltaY,
+      velocityY: detail.velocityY,
+      progress: calculateProgress(el, detail.deltaY),
+    };
+
+    onDragEnd(eventDetail);
   };
 
   const gesture = createGesture({
@@ -307,3 +330,43 @@ export const createSwipeToCloseGesture = (
 const computeDuration = (remaining: number, velocity: number) => {
   return clamp(400, remaining / Math.abs(velocity * 1.1), 500);
 };
+
+/**
+ * Calculates the progress of the swipe gesture.
+ *
+ * The progress is a value between 0 and 1 that represents how far
+ * the swipe has progressed towards closing the modal.
+ *
+ * A value closer to 1 means the modal is closer to being opened,
+ * while a value closer to 0 means the modal is closer to being closed.
+ *
+ * @param el The modal
+ * @param deltaY The change in Y position (positive when dragging down, negative when dragging up)
+ * @returns The progress of the swipe gesture
+ */
+const calculateProgress = (el: HTMLIonModalElement, deltaY: number): number => {
+  const windowHeight = window.innerHeight;
+  // Position when fully open
+  const modalTop = el.getBoundingClientRect().top;
+  /**
+   * The distance between the top of the modal and the bottom of the screen
+   * is the total distance the modal needs to travel to be fully closed.
+   */
+  const totalDistance = windowHeight - modalTop;
+  /**
+   * The pull percentage is how far the user has swiped compared to the total
+   * distance needed to close the modal.
+   */
+  const pullPercentage = deltaY / totalDistance;
+  /**
+   * The progress is the inverse of the pull percentage because
+   * when the user starts swiping up, the progress should be close to 1,
+   * and when the user has swiped all the way down, the progress should be
+   * close to 0.
+   */
+  const progress = 1 - pullPercentage;
+  // Round to the nearest thousandth to avoid returning very small decimal
+  const roundedProgress = Math.round(progress * 1000) / 1000;
+
+  return Math.max(0, Math.min(1, roundedProgress));
+};
diff --git a/core/src/components/modal/modal-interface.ts b/core/src/components/modal/modal-interface.ts
index 29cc7111568..071a50fa869 100644
--- a/core/src/components/modal/modal-interface.ts
+++ b/core/src/components/modal/modal-interface.ts
@@ -44,3 +44,29 @@ export interface ModalCustomEvent extends CustomEvent {
  * The behavior setting for modals when the handle is pressed.
  */
 export type ModalHandleBehavior = 'none' | 'cycle';
+
+export interface ModalDragEventDetail {
+  /**
+   * The current Y coordinate of the drag event.
+   */
+  currentY: number;
+  /**
+   * The change in Y coordinate since the last drag event.
+   */
+  deltaY: number;
+  /**
+   * The velocity of the drag event in the Y direction.
+   */
+  velocityY: number;
+  /**
+   * The progress of the drag event, represented as a value between 0 and 1.
+   * A value of 0 means the modal is at its lowest point (fully closed),
+   * while a value of 1 means the modal is at its highest point (fully open).
+   */
+  progress: number;
+  /**
+   * The breakpoint that the sheet will snap to if the user releases
+   * the gesture.
+   */
+  snapBreakpoint?: number;
+}
diff --git a/core/src/components/modal/modal.native.scss b/core/src/components/modal/modal.native.scss
index b94d65d0cd9..01bbc62d6ee 100644
--- a/core/src/components/modal/modal.native.scss
+++ b/core/src/components/modal/modal.native.scss
@@ -58,7 +58,12 @@
 /**
  * Ensure that the sheet modal does not
  * completely cover the content.
+ *
+ * --ion-modal-offset-top is an internal property set by modal.tsx
+ * with the resolved root safe-area-top pixel value. This decouples
+ * the height calculation from --ion-safe-area-top (which is zeroed
+ * for sheet modals to prevent header double-padding).
  */
 :host(.modal-sheet) {
-  --height: calc(100% - (var(--ion-safe-area-top) + 10px));
+  --height: calc(100% - (var(--ion-modal-offset-top, 0px) + 10px));
 }
diff --git a/core/src/components/modal/modal.tsx b/core/src/components/modal/modal.tsx
index 1f8524de0d1..49acd40c560 100644
--- a/core/src/components/modal/modal.tsx
+++ b/core/src/components/modal/modal.tsx
@@ -43,7 +43,15 @@ import { mdLeaveAnimation } from './animations/md.leave';
 import type { MoveSheetToBreakpointOptions } from './gestures/sheet';
 import { createSheetGesture } from './gestures/sheet';
 import { createSwipeToCloseGesture, SwipeToCloseDefaults } from './gestures/swipe-to-close';
-import type { ModalBreakpointChangeEventDetail, ModalHandleBehavior } from './modal-interface';
+import type { ModalBreakpointChangeEventDetail, ModalHandleBehavior, ModalDragEventDetail } from './modal-interface';
+import {
+  getInitialSafeAreaConfig,
+  getPositionBasedSafeAreaConfig,
+  applySafeAreaOverrides,
+  clearSafeAreaOverrides,
+  getRootSafeAreaTop,
+  type ModalSafeAreaContext,
+} from './safe-area-utils';
 import { setCardStatusBarDark, setCardStatusBarDefault } from './utils';
 
 // TODO(FW-2832): types
@@ -74,6 +82,11 @@ export class Modal implements ComponentInterface, OverlayInterface {
   private coreDelegate: FrameworkDelegate = CoreDelegate();
   private sheetTransition?: Promise<any>;
   @State() private isSheetModal = false;
+  /**
+   * The breakpoint value that has been committed for a sheet modal.
+   * This represents the modal's resting state when it is not being dragged
+   * or animating toward a new position.
+   */
   private currentBreakpoint?: number;
   private wrapperEl?: HTMLElement;
   private backdropEl?: HTMLIonBackdropElement;
@@ -278,14 +291,35 @@ export class Modal implements ComponentInterface, OverlayInterface {
 
   @Listen('resize', { target: 'window' })
   onWindowResize() {
-    // Only handle resize for iOS card modals when no custom animations are provided
-    if (getIonMode(this) !== 'ios' || !this.presentingElement || this.enterAnimation || this.leaveAnimation) {
-      return;
-    }
+    if (!this.presented) return;
 
     clearTimeout(this.resizeTimeout);
     this.resizeTimeout = setTimeout(() => {
-      this.handleViewTransition();
+      const context = this.getSafeAreaContext();
+
+      // iOS card modals: handle portrait/landscape view transitions
+      if (context.isCardModal && !this.enterAnimation && !this.leaveAnimation) {
+        this.handleViewTransition();
+      }
+
+      // Sheet modals: re-compute the internal offset property since safe-area
+      // values may change on device rotation (e.g., portrait notch vs landscape).
+      if (context.isSheetModal) {
+        this.updateSheetOffsetTop();
+      }
+
+      // Regular (non-sheet, non-card) modals: update safe-area overrides
+      // since the viewport may have crossed the centered-dialog breakpoint.
+      if (!context.isSheetModal && !context.isCardModal) {
+        this.updateSafeAreaOverrides();
+
+        // Re-evaluate fullscreen safe-area padding: clear first, then re-apply
+        if (this.wrapperEl) {
+          this.wrapperEl.style.removeProperty('height');
+          this.wrapperEl.style.removeProperty('padding-bottom');
+        }
+        this.applyFullscreenSafeArea();
+      }
     }, 50); // Debounce to avoid excessive calls during active resizing
   }
 
@@ -401,6 +435,21 @@ export class Modal implements ComponentInterface, OverlayInterface {
    */
   @Event() ionMount!: EventEmitter<void>;
 
+  /**
+   * Event that is emitted when the sheet modal or card modal gesture starts.
+   */
+  @Event() ionDragStart!: EventEmitter<void>;
+
+  /**
+   * Event that is emitted when the sheet modal or card modal gesture moves.
+   */
+  @Event() ionDragMove!: EventEmitter<ModalDragEventDetail>;
+
+  /**
+   * Event that is emitted when the sheet modal or card modal gesture ends.
+   */
+  @Event() ionDragEnd!: EventEmitter<ModalDragEventDetail>;
+
   breakpointsChanged(breakpoints: number[] | undefined) {
     if (breakpoints !== undefined) {
       this.sortedBreakpoints = breakpoints.sort((a, b) => a - b);
@@ -417,6 +466,9 @@ export class Modal implements ComponentInterface, OverlayInterface {
     this.triggerController.removeClickListener();
     this.cleanupViewTransitionListener();
     this.cleanupParentRemovalObserver();
+    // Also called in dismiss() — intentional dual cleanup covers both
+    // dismiss-then-remove and direct DOM removal without dismiss.
+    this.cleanupSafeAreaOverrides();
   }
 
   componentWillLoad() {
@@ -605,6 +657,13 @@ export class Modal implements ComponentInterface, OverlayInterface {
 
     writeTask(() => this.el.classList.add('show-modal'));
 
+    // Recalculate isSheetModal before safe-area setup because framework
+    // bindings (e.g., Angular) may not have been applied when componentWillLoad ran.
+    this.isSheetModal = this.breakpoints !== undefined && this.initialBreakpoint !== undefined;
+
+    // Set initial safe-area overrides before animation
+    this.setInitialSafeAreaOverrides();
+
     const hasCardModal = presentingElement !== undefined;
 
     /**
@@ -626,6 +685,12 @@ export class Modal implements ComponentInterface, OverlayInterface {
       staticBackdropOpacity: getIonTheme(this) === 'ionic',
     });
 
+    // Update safe-area based on actual position after animation
+    this.updateSafeAreaOverrides();
+
+    // Apply fullscreen safe-area padding if needed
+    this.applyFullscreenSafeArea();
+
     /* tslint:disable-next-line */
     if (typeof window !== 'undefined') {
       /**
@@ -658,14 +723,7 @@ export class Modal implements ComponentInterface, OverlayInterface {
       window.addEventListener(KEYBOARD_DID_OPEN, this.keyboardOpenCallback);
     }
 
-    /**
-     * Recalculate isSheetModal because framework bindings (e.g., Angular)
-     * may not have been applied when componentWillLoad ran.
-     */
-    const isSheetModal = this.breakpoints !== undefined && this.initialBreakpoint !== undefined;
-    this.isSheetModal = isSheetModal;
-
-    if (isSheetModal) {
+    if (this.isSheetModal) {
       this.initSheetGesture();
     } else if (hasCardModal) {
       this.initSwipeToClose();
@@ -704,33 +762,15 @@ export class Modal implements ComponentInterface, OverlayInterface {
 
     const statusBarStyle = this.statusBarStyle ?? StatusBarStyle.Default;
 
-    this.gesture = createSwipeToCloseGesture(el, ani, statusBarStyle, () => {
-      /**
-       * While the gesture animation is finishing
-       * it is possible for a user to tap the backdrop.
-       * This would result in the dismiss animation
-       * being played again. Typically this is avoided
-       * by setting `presented = false` on the overlay
-       * component; however, we cannot do that here as
-       * that would prevent the element from being
-       * removed from the DOM.
-       */
-      this.gestureAnimationDismissing = true;
-
-      /**
-       * Reset the status bar style as the dismiss animation
-       * starts otherwise the status bar will be the wrong
-       * color for the duration of the dismiss animation.
-       * The dismiss method does this as well, but
-       * in this case it's only called once the animation
-       * has finished.
-       */
-      setCardStatusBarDefault(this.statusBarStyle);
-      this.animation!.onFinish(async () => {
-        await this.dismiss(undefined, GESTURE);
-        this.gestureAnimationDismissing = false;
-      });
-    });
+    this.gesture = createSwipeToCloseGesture(
+      el,
+      ani,
+      statusBarStyle,
+      () => this.cardOnDismiss(),
+      () => this.onDragStart(),
+      (detail: ModalDragEventDetail) => this.onDragMove(detail),
+      (detail: ModalDragEventDetail) => this.onDragEnd(detail)
+    );
     this.gesture.enable(true);
   }
 
@@ -769,7 +809,10 @@ export class Modal implements ComponentInterface, OverlayInterface {
           this.ionBreakpointDidChange.emit({ breakpoint });
         }
       },
-      getIonTheme(this) === 'ionic'
+      getIonTheme(this) === 'ionic',
+      () => this.onDragStart(),
+      (detail: ModalDragEventDetail) => this.onDragMove(detail),
+      (detail: ModalDragEventDetail) => this.onDragEnd(detail)
     );
 
     this.gesture = gesture;
@@ -883,6 +926,34 @@ export class Modal implements ComponentInterface, OverlayInterface {
     });
   }
 
+  private cardOnDismiss() {
+    /**
+     * While the gesture animation is finishing
+     * it is possible for a user to tap the backdrop.
+     * This would result in the dismiss animation
+     * being played again. Typically this is avoided
+     * by setting `presented = false` on the overlay
+     * component; however, we cannot do that here as
+     * that would prevent the element from being
+     * removed from the DOM.
+     */
+    this.gestureAnimationDismissing = true;
+
+    /**
+     * Reset the status bar style as the dismiss animation
+     * starts otherwise the status bar will be the wrong
+     * color for the duration of the dismiss animation.
+     * The dismiss method does this as well, but
+     * in this case it's only called once the animation
+     * has finished.
+     */
+    setCardStatusBarDefault(this.statusBarStyle);
+    this.animation!.onFinish(async () => {
+      await this.dismiss(undefined, GESTURE);
+      this.gestureAnimationDismissing = false;
+    });
+  }
+
   /**
    * Dismiss the modal overlay after it has been presented.
    * This is a no-op if the overlay has not been presented yet. If you want
@@ -899,6 +970,10 @@ export class Modal implements ComponentInterface, OverlayInterface {
       return false;
     }
 
+    // Cancel any pending resize timeout to prevent stale updates during dismiss
+    clearTimeout(this.resizeTimeout);
+    this.resizeTimeout = undefined;
+
     /**
      * Because the canDismiss check below is async,
      * we need to claim a lock before the check happens,
@@ -970,6 +1045,7 @@ export class Modal implements ComponentInterface, OverlayInterface {
       }
       this.cleanupViewTransitionListener();
       this.cleanupParentRemovalObserver();
+      this.cleanupSafeAreaOverrides();
 
       this.cleanupChildRoutePassthrough();
     }
@@ -1146,6 +1222,11 @@ export class Modal implements ComponentInterface, OverlayInterface {
   }
 
   private handleViewTransition() {
+    // Only run view transitions when the modal is presented
+    if (!this.presented) {
+      return;
+    }
+
     const isPortrait = window.innerWidth < 768;
 
     // Only transition if view state actually changed
@@ -1191,6 +1272,10 @@ export class Modal implements ComponentInterface, OverlayInterface {
     transitionAnimation.play().then(() => {
       this.viewTransitionAnimation = undefined;
 
+      // Wait for a layout pass after the transition so getBoundingClientRect()
+      // in getPositionBasedSafeAreaConfig() reflects the new dimensions.
+      raf(() => this.updateSafeAreaOverrides());
+
       // After orientation transition, recreate the swipe-to-close gesture
       // with updated animation that reflects the new presenting element state
       this.reinitSwipeToClose();
@@ -1360,6 +1445,142 @@ export class Modal implements ComponentInterface, OverlayInterface {
     this.parentRemovalObserver = undefined;
   }
 
+  private onDragStart() {
+    this.ionDragStart.emit();
+  }
+
+  private onDragMove(detail: ModalDragEventDetail) {
+    this.ionDragMove.emit(detail);
+  }
+
+  private onDragEnd(detail: ModalDragEventDetail) {
+    this.ionDragEnd.emit(detail);
+  }
+
+  /**
+   * Creates the context object for safe-area utilities.
+   */
+  private getSafeAreaContext(): ModalSafeAreaContext {
+    return {
+      isSheetModal: this.isSheetModal,
+      isCardModal: this.presentingElement !== undefined && getIonMode(this) === 'ios',
+      presentingElement: this.presentingElement,
+      breakpoints: this.breakpoints,
+      currentBreakpoint: this.currentBreakpoint,
+    };
+  }
+
+  /**
+   * Sets initial safe-area overrides before modal animation.
+   * Called in present() before animation starts.
+   *
+   * For sheet modals, the SCSS --height formula uses --ion-modal-offset-top
+   * (an internal property) instead of --ion-safe-area-top. We resolve the
+   * root safe-area-top to pixels and set --ion-modal-offset-top, decoupling
+   * the height calculation from --ion-safe-area-top (which is zeroed for
+   * sheets to prevent header content from getting double-offset padding).
+   */
+  private setInitialSafeAreaOverrides(): void {
+    const context = this.getSafeAreaContext();
+    const safeAreaConfig = getInitialSafeAreaConfig(context);
+    applySafeAreaOverrides(this.el, safeAreaConfig);
+
+    // Set the internal offset property with the resolved root safe-area-top value
+    if (context.isSheetModal) {
+      this.updateSheetOffsetTop();
+    }
+  }
+
+  /**
+   * Resolves the current root --ion-safe-area-top value and sets the
+   * internal --ion-modal-offset-top property on the host element.
+   * Called on present and on resize (e.g., device rotation changes safe-area).
+   */
+  private updateSheetOffsetTop(): void {
+    const safeAreaTop = getRootSafeAreaTop();
+    this.el.style.setProperty('--ion-modal-offset-top', `${safeAreaTop}px`);
+  }
+
+  /**
+   * Updates safe-area overrides during dynamic state changes.
+   * Called after animations, during gestures, and on orientation changes.
+   */
+  private updateSafeAreaOverrides(): void {
+    const { wrapperEl, el } = this;
+    const context = this.getSafeAreaContext();
+
+    // Sheet modals: safe-area is fully determined at presentation time
+    // (top is always 0px, height is frozen). Nothing to update.
+    if (context.isSheetModal) return;
+
+    // Card modals have fixed safe-area requirements set by initial prediction.
+    if (context.isCardModal) return;
+
+    // wrapperEl is required for position-based detection below
+    if (!wrapperEl) return;
+
+    // Regular modals: use position-based detection to correctly handle both
+    // fullscreen modals and centered dialogs with custom dimensions.
+    const safeAreaConfig = getPositionBasedSafeAreaConfig(wrapperEl);
+    applySafeAreaOverrides(el, safeAreaConfig);
+  }
+
+  /**
+   * Applies padding-bottom to fullscreen modal wrapper to prevent
+   * content from overlapping system navigation bar.
+   */
+  private applyFullscreenSafeArea(): void {
+    const { wrapperEl, el } = this;
+    if (!wrapperEl) return;
+
+    const context = this.getSafeAreaContext();
+    if (context.isSheetModal || context.isCardModal) return;
+
+    // Check for standard Ionic layout children (ion-content, ion-footer),
+    // searching one level deep for wrapped components (e.g.,
+    // <app-footer><ion-footer>...</ion-footer></app-footer>).
+    // Note: uses a manual loop instead of querySelector(':scope > ...') because
+    // Stencil's mock-doc (used in spec tests) does not support :scope.
+    let hasContent = false;
+    let hasFooter = false;
+    for (const child of Array.from(el.children)) {
+      if (child.tagName === 'ION-CONTENT') hasContent = true;
+      if (child.tagName === 'ION-FOOTER') hasFooter = true;
+      for (const grandchild of Array.from(child.children)) {
+        if (grandchild.tagName === 'ION-CONTENT') hasContent = true;
+        if (grandchild.tagName === 'ION-FOOTER') hasFooter = true;
+      }
+    }
+
+    // Only apply wrapper padding for standard Ionic layouts (has ion-content
+    // but no ion-footer). Custom modals with raw HTML are fully
+    // developer-controlled and should not be modified.
+    if (!hasContent || hasFooter) return;
+
+    // Reduce wrapper height by safe-area and add equivalent padding so the
+    // total visual size stays the same but the flex content area shrinks.
+    // Using height + padding instead of box-sizing: border-box avoids
+    // breaking custom modals that set --border-width (border-box would
+    // include the border inside the height, changing the layout).
+    wrapperEl.style.setProperty('height', 'calc(var(--height) - var(--ion-safe-area-bottom, 0px))');
+    wrapperEl.style.setProperty('padding-bottom', 'var(--ion-safe-area-bottom, 0px)');
+  }
+
+  /**
+   * Clears all safe-area overrides and padding from wrapper.
+   */
+  private cleanupSafeAreaOverrides(): void {
+    clearSafeAreaOverrides(this.el);
+
+    // Remove internal sheet offset property
+    this.el.style.removeProperty('--ion-modal-offset-top');
+
+    if (this.wrapperEl) {
+      this.wrapperEl.style.removeProperty('height');
+      this.wrapperEl.style.removeProperty('padding-bottom');
+    }
+  }
+
   render() {
     const {
       handle,
diff --git a/core/src/components/modal/safe-area-utils.ts b/core/src/components/modal/safe-area-utils.ts
new file mode 100644
index 00000000000..a13bf1770a0
--- /dev/null
+++ b/core/src/components/modal/safe-area-utils.ts
@@ -0,0 +1,201 @@
+import { win } from '@utils/browser';
+import { raf } from '@utils/helpers';
+
+type SafeAreaValue = '0px' | 'inherit';
+
+/**
+ * Configuration for safe-area CSS custom properties.
+ * Each direction can inherit the root safe-area value or be zeroed out.
+ */
+export interface SafeAreaConfig {
+  top: SafeAreaValue;
+  bottom: SafeAreaValue;
+  left: SafeAreaValue;
+  right: SafeAreaValue;
+}
+
+/**
+ * Context information about the modal used to determine safe-area behavior.
+ */
+export interface ModalSafeAreaContext {
+  isSheetModal: boolean;
+  isCardModal: boolean;
+  presentingElement?: HTMLElement;
+  breakpoints?: number[];
+  currentBreakpoint?: number;
+}
+
+/**
+ * These thresholds match the SCSS media query breakpoints in modal.vars.scss
+ * that trigger the centered dialog layout (non-fullscreen modal).
+ *
+ * SCSS defines two height breakpoints: $modal-inset-min-height-small (600px)
+ * and $modal-inset-min-height-large (768px). We use the smaller one because
+ * that's the threshold where the modal transitions from fullscreen to centered
+ * dialog — the larger breakpoint only increases the dialog's height.
+ */
+const MODAL_INSET_MIN_WIDTH = 768;
+const MODAL_INSET_MIN_HEIGHT = 600;
+const EDGE_THRESHOLD = 5;
+
+/**
+ * Cache for resolved root safe-area-top value, invalidated once per frame.
+ */
+let cachedRootSafeAreaTop: number | null = null;
+let cacheInvalidationScheduled = false;
+
+/**
+ * Determines if the current viewport meets the CSS media query conditions
+ * that cause regular modals to render as centered dialogs instead of fullscreen.
+ * Matches: @media (min-width: 768px) and (min-height: 600px)
+ */
+const isCenteredDialogViewport = (): boolean => {
+  if (!win) return false;
+  return win.matchMedia(`(min-width: ${MODAL_INSET_MIN_WIDTH}px) and (min-height: ${MODAL_INSET_MIN_HEIGHT}px)`)
+    .matches;
+};
+
+/**
+ * Resolves the current root --ion-safe-area-top value to pixels.
+ * Uses a temporary element because getComputedStyle on :root returns
+ * the declared value of custom properties (e.g. "env(safe-area-inset-top)")
+ * rather than a resolved number.
+ *
+ * Results are cached for the current frame to avoid repeated reflows.
+ */
+export const getRootSafeAreaTop = (): number => {
+  if (cachedRootSafeAreaTop !== null) {
+    return cachedRootSafeAreaTop;
+  }
+
+  const doc = win?.document;
+  if (!doc?.body) {
+    return 0;
+  }
+
+  const el = doc.createElement('div');
+  el.style.cssText =
+    'position:fixed;visibility:hidden;pointer-events:none;top:0;left:0;' + 'padding-top:var(--ion-safe-area-top,0px);';
+  doc.body.appendChild(el);
+  const value = parseFloat(getComputedStyle(el).paddingTop) || 0;
+  el.remove();
+
+  cachedRootSafeAreaTop = value;
+  if (!cacheInvalidationScheduled) {
+    cacheInvalidationScheduled = true;
+    raf(() => {
+      cachedRootSafeAreaTop = null;
+      cacheInvalidationScheduled = false;
+    });
+  }
+
+  return value;
+};
+
+/**
+ * Returns the initial safe-area configuration based on modal type.
+ * This is called before animation starts and uses configuration-based prediction.
+ *
+ * @param context - Modal context information
+ * @returns SafeAreaConfig with initial safe-area values
+ */
+export const getInitialSafeAreaConfig = (context: ModalSafeAreaContext): SafeAreaConfig => {
+  const { isSheetModal, isCardModal } = context;
+
+  // Sheet modals always zero top safe-area. The sheet height offset from the
+  // top edge is handled by --ion-modal-offset-top (set in modal.tsx) using
+  // the resolved root value, so --ion-safe-area-top is never needed for
+  // height calculation. Keeping it at 0px prevents header content from
+  // getting double-offset padding.
+  if (isSheetModal) {
+    return {
+      top: '0px',
+      bottom: 'inherit',
+      left: '0px',
+      right: '0px',
+    };
+  }
+
+  // Card modals need safe-area for height calculation.
+  // Note: isCardModal is already gated on mode === 'ios' by the caller.
+  if (isCardModal) {
+    return {
+      top: 'inherit',
+      bottom: 'inherit',
+      left: '0px',
+      right: '0px',
+    };
+  }
+
+  // On viewports that meet the centered dialog media query breakpoints,
+  // regular modals render as centered dialogs (not fullscreen), so they
+  // don't touch any screen edges and don't need safe-area insets.
+  if (isCenteredDialogViewport()) {
+    return {
+      top: '0px',
+      bottom: '0px',
+      left: '0px',
+      right: '0px',
+    };
+  }
+
+  // Fullscreen modals on phone - inherit all safe areas
+  return {
+    top: 'inherit',
+    bottom: 'inherit',
+    left: 'inherit',
+    right: 'inherit',
+  };
+};
+
+/**
+ * Returns safe-area configuration based on actual modal position.
+ * Detects which edges the modal overlaps with and only applies safe-area to those edges.
+ *
+ * Note: On Android edge-to-edge (API 36+), getBoundingClientRect() may report
+ * inconsistent values. Sheet and card modals avoid this by using configuration-based
+ * prediction instead. Regular modals use coordinate detection which works reliably
+ * on web and iOS; Android edge-to-edge may need a configuration-based fallback
+ * once a reliable detection mechanism is available.
+ *
+ * @param wrapperEl - The modal wrapper element to measure
+ * @returns SafeAreaConfig based on position
+ */
+export const getPositionBasedSafeAreaConfig = (wrapperEl: HTMLElement): SafeAreaConfig => {
+  const rect = wrapperEl.getBoundingClientRect();
+  const vh = win?.innerHeight ?? 0;
+  const vw = win?.innerWidth ?? 0;
+
+  // Only apply safe-area to sides where modal overlaps with screen edge
+  return {
+    top: rect.top <= EDGE_THRESHOLD ? 'inherit' : '0px',
+    bottom: rect.bottom >= vh - EDGE_THRESHOLD ? 'inherit' : '0px',
+    left: rect.left <= EDGE_THRESHOLD ? 'inherit' : '0px',
+    right: rect.right >= vw - EDGE_THRESHOLD ? 'inherit' : '0px',
+  };
+};
+
+/**
+ * Applies safe-area CSS custom property overrides to the modal host element.
+ *
+ * @param hostEl - The modal host element (ion-modal)
+ * @param config - Safe-area configuration to apply
+ */
+export const applySafeAreaOverrides = (hostEl: HTMLElement, config: SafeAreaConfig): void => {
+  hostEl.style.setProperty('--ion-safe-area-top', config.top);
+  hostEl.style.setProperty('--ion-safe-area-bottom', config.bottom);
+  hostEl.style.setProperty('--ion-safe-area-left', config.left);
+  hostEl.style.setProperty('--ion-safe-area-right', config.right);
+};
+
+/**
+ * Clears safe-area CSS custom property overrides from the modal host element.
+ *
+ * @param hostEl - The modal host element (ion-modal)
+ */
+export const clearSafeAreaOverrides = (hostEl: HTMLElement): void => {
+  hostEl.style.removeProperty('--ion-safe-area-top');
+  hostEl.style.removeProperty('--ion-safe-area-bottom');
+  hostEl.style.removeProperty('--ion-safe-area-left');
+  hostEl.style.removeProperty('--ion-safe-area-right');
+};
diff --git a/core/src/components/modal/test/card-viewport-resize/modal.e2e.ts b/core/src/components/modal/test/card-viewport-resize/modal.e2e.ts
new file mode 100644
index 00000000000..3d7adc849c7
--- /dev/null
+++ b/core/src/components/modal/test/card-viewport-resize/modal.e2e.ts
@@ -0,0 +1,176 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
+  test.describe(title('card modal: viewport resize'), () => {
+    test.beforeEach(async ({ page }) => {
+      // Start in portrait mode (mobile)
+      await page.setViewportSize({ width: 375, height: 667 });
+
+      await page.setContent(
+        `
+        <ion-app>
+          <div class="ion-page" id="main-page">
+            <ion-header>
+              <ion-toolbar>
+                <ion-title>Card Viewport Resize Test</ion-title>
+              </ion-toolbar>
+            </ion-header>
+            <ion-content class="ion-padding">
+              <p>This page tests that viewport resize does not trigger card modal animation when modal is closed.</p>
+              <ion-button id="open-modal">Open Card Modal</ion-button>
+              <ion-modal id="card-modal">
+                <ion-header>
+                  <ion-toolbar>
+                    <ion-title>Card Modal</ion-title>
+                    <ion-buttons slot="end">
+                      <ion-button id="close-modal">Close</ion-button>
+                    </ion-buttons>
+                  </ion-toolbar>
+                </ion-header>
+                <ion-content class="ion-padding">
+                  <p>Modal content</p>
+                </ion-content>
+              </ion-modal>
+            </ion-content>
+          </div>
+        </ion-app>
+
+        <script>
+          const modal = document.querySelector('#card-modal');
+          const mainPage = document.querySelector('#main-page');
+          modal.presentingElement = mainPage;
+
+          document.querySelector('#open-modal').addEventListener('click', () => {
+            modal.present();
+          });
+
+          document.querySelector('#close-modal').addEventListener('click', () => {
+            modal.dismiss();
+          });
+        </script>
+        `,
+        config
+      );
+    });
+
+    test('should not animate presenting element when viewport resizes and modal is closed', async ({
+      page,
+    }, testInfo) => {
+      testInfo.annotations.push({
+        type: 'issue',
+        description: 'https://github.com/ionic-team/ionic-framework/issues/30679',
+      });
+
+      const mainPage = page.locator('#main-page');
+
+      // Verify the presenting element has no transform initially
+      const initialTransform = await mainPage.evaluate((el) => {
+        return window.getComputedStyle(el).transform;
+      });
+      expect(initialTransform).toBe('none');
+
+      // Resize from portrait to landscape (crossing the 768px threshold)
+      await page.setViewportSize({ width: 900, height: 375 });
+
+      // Wait for the debounced resize handler (50ms) plus some buffer
+      await page.waitForTimeout(150);
+
+      // The presenting element should still have no transform
+      // If the bug exists, it would have scale(0.93) or similar applied
+      const afterResizeTransform = await mainPage.evaluate((el) => {
+        return window.getComputedStyle(el).transform;
+      });
+      expect(afterResizeTransform).toBe('none');
+    });
+
+    test('should not animate presenting element when resizing multiple times with modal closed', async ({ page }) => {
+      const mainPage = page.locator('#main-page');
+
+      // Multiple resize cycles should not trigger the animation
+      for (let i = 0; i < 3; i++) {
+        // Portrait to landscape
+        await page.setViewportSize({ width: 900, height: 375 });
+        await page.waitForTimeout(150);
+
+        let transform = await mainPage.evaluate((el) => {
+          return window.getComputedStyle(el).transform;
+        });
+        expect(transform).toBe('none');
+
+        // Landscape to portrait
+        await page.setViewportSize({ width: 375, height: 667 });
+        await page.waitForTimeout(150);
+
+        transform = await mainPage.evaluate((el) => {
+          return window.getComputedStyle(el).transform;
+        });
+        expect(transform).toBe('none');
+      }
+    });
+
+    test('should still animate presenting element correctly when modal is open and viewport resizes', async ({
+      page,
+    }) => {
+      const mainPage = page.locator('#main-page');
+      const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+
+      // Open the modal
+      await page.click('#open-modal');
+      await ionModalDidPresent.next();
+
+      // When modal is open in portrait, presenting element should be transformed
+      let transform = await mainPage.evaluate((el) => {
+        return window.getComputedStyle(el).transform;
+      });
+      // The presenting element should have a scale transform when modal is open
+      expect(transform).not.toBe('none');
+
+      // Resize to landscape while modal is open
+      await page.setViewportSize({ width: 900, height: 375 });
+      await page.waitForTimeout(150);
+
+      // The modal transitions correctly - in landscape mode the presenting element
+      // should have different (or no) transform than portrait
+      transform = await mainPage.evaluate((el) => {
+        return window.getComputedStyle(el).transform;
+      });
+
+      // Note: The exact transform depends on the landscape handling
+      // The main point is that when modal IS open, the transition should work
+      // This test just ensures we don't break existing functionality
+    });
+
+    test('presenting element should return to normal after modal is dismissed', async ({ page }) => {
+      const mainPage = page.locator('#main-page');
+      const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+      const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss');
+
+      // Open the modal
+      await page.click('#open-modal');
+      await ionModalDidPresent.next();
+
+      // Close the modal
+      await page.click('#close-modal');
+      await ionModalDidDismiss.next();
+
+      // Wait for animations to complete
+      await page.waitForTimeout(500);
+
+      // The presenting element should be back to normal
+      const transform = await mainPage.evaluate((el) => {
+        return window.getComputedStyle(el).transform;
+      });
+      expect(transform).toBe('none');
+
+      // Now resize the viewport - should not trigger animation
+      await page.setViewportSize({ width: 900, height: 375 });
+      await page.waitForTimeout(150);
+
+      const afterResizeTransform = await mainPage.evaluate((el) => {
+        return window.getComputedStyle(el).transform;
+      });
+      expect(afterResizeTransform).toBe('none');
+    });
+  });
+});
diff --git a/core/src/components/modal/test/card/index.html b/core/src/components/modal/test/card/index.html
index 363c779bb14..c47f5bda425 100644
--- a/core/src/components/modal/test/card/index.html
+++ b/core/src/components/modal/test/card/index.html
@@ -40,6 +40,7 @@
         </ion-header>
 
         <ion-content class="ion-padding">
+          <h2>iOS only</h2>
           <button class="expand" id="card" onclick="presentModal(document.querySelectorAll('.ion-page')[1])">
             Card Modal
           </button>
@@ -50,6 +51,7 @@
           >
             Card Modal Custom Radius
           </button>
+          <button class="expand" id="drag-events" onclick="dragEvents()">Card Modal Drag Events</button>
         </ion-content>
       </div>
     </ion-app>
@@ -162,6 +164,24 @@
         const modal = await createModal(presentingEl, opts);
         await modal.present();
       }
+
+      async function dragEvents() {
+        const modal = await createModal(document.querySelectorAll('.ion-page')[1], { id: 'drag-events' });
+
+        modal.addEventListener('ionDragStart', (event) => {
+          console.log('Drag started');
+        });
+
+        modal.addEventListener('ionDragMove', (event) => {
+          console.log('Drag moved', event.detail);
+        });
+
+        modal.addEventListener('ionDragEnd', (event) => {
+          console.log('Drag ended', event.detail);
+        });
+
+        await modal.present();
+      }
     </script>
   </body>
 </html>
diff --git a/core/src/components/modal/test/card/modal-card.e2e.ts b/core/src/components/modal/test/card/modal-card.e2e.ts
index 56cd7c5b4d8..8df6161ec70 100644
--- a/core/src/components/modal/test/card/modal-card.e2e.ts
+++ b/core/src/components/modal/test/card/modal-card.e2e.ts
@@ -1,5 +1,5 @@
 import { expect } from '@playwright/test';
-import { configs, test } from '@utils/test/playwright';
+import { configs, dragElementBy, test } from '@utils/test/playwright';
 
 import { CardModalPage } from '../fixtures';
 
@@ -95,4 +95,50 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, c
       });
     });
   });
+
+  test.describe(title('card modal: drag events'), () => {
+    test('should emit ionDragStart, ionDragMove, and ionDragEnd events', async ({ page }) => {
+      await page.goto('/src/components/modal/test/card', config);
+
+      const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+
+      await page.click('#drag-events');
+      await ionModalDidPresent.next();
+
+      const ionDragStart = await page.spyOnEvent('ionDragStart');
+      const ionDragMove = await page.spyOnEvent('ionDragMove');
+      const ionDragEnd = await page.spyOnEvent('ionDragEnd');
+
+      const header = page.locator('.modal-card ion-header');
+
+      // Start the drag to verify it emits the events before the gesture ends
+      await dragElementBy(header, page, 0, 50, undefined, undefined, false);
+
+      await ionDragStart.next();
+      const dragMoveEvent = await ionDragMove.next();
+
+      expect(ionDragStart.length).toBe(1);
+
+      expect(ionDragMove.length).toBeGreaterThan(0);
+      expect(Object.keys(dragMoveEvent.detail).length).toBe(4);
+
+      expect(ionDragEnd.length).toBe(0);
+
+      /**
+       * Drage the modal further to verify it does:
+       * - not emit the event again for `ionDragStart`
+       * - emit more `ionDragMove` events
+       * - emit the `ionDragEnd` event when the gesture ends
+       */
+      await dragElementBy(header, page, 0, 100);
+
+      const dragEndEvent = await ionDragEnd.next();
+
+      expect(ionDragStart.length).toBe(1);
+      expect(ionDragMove.length).toBeGreaterThan(0);
+
+      expect(ionDragEnd.length).toBe(1);
+      expect(Object.keys(dragEndEvent.detail).length).toBe(4);
+    });
+  });
 });
diff --git a/core/src/components/modal/test/card/modal-tablet.e2e.ts-snapshots/modal-card-custom-present-tablet-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/modal/test/card/modal-tablet.e2e.ts-snapshots/modal-card-custom-present-tablet-ios-ltr-Mobile-Chrome-linux.png
index 24f4553cc8f..47361828749 100644
Binary files a/core/src/components/modal/test/card/modal-tablet.e2e.ts-snapshots/modal-card-custom-present-tablet-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/modal/test/card/modal-tablet.e2e.ts-snapshots/modal-card-custom-present-tablet-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/modal/test/card/modal-tablet.e2e.ts-snapshots/modal-card-custom-present-tablet-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/modal/test/card/modal-tablet.e2e.ts-snapshots/modal-card-custom-present-tablet-ios-ltr-Mobile-Firefox-linux.png
index 8bab2a20ad4..75cec98ab7b 100644
Binary files a/core/src/components/modal/test/card/modal-tablet.e2e.ts-snapshots/modal-card-custom-present-tablet-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/modal/test/card/modal-tablet.e2e.ts-snapshots/modal-card-custom-present-tablet-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/modal/test/card/modal-tablet.e2e.ts-snapshots/modal-card-custom-present-tablet-ios-ltr-Mobile-Safari-linux.png b/core/src/components/modal/test/card/modal-tablet.e2e.ts-snapshots/modal-card-custom-present-tablet-ios-ltr-Mobile-Safari-linux.png
index 058817f2f78..d8da03effc7 100644
Binary files a/core/src/components/modal/test/card/modal-tablet.e2e.ts-snapshots/modal-card-custom-present-tablet-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/modal/test/card/modal-tablet.e2e.ts-snapshots/modal-card-custom-present-tablet-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/modal/test/card/modal-tablet.e2e.ts-snapshots/modal-card-custom-stacked-present-tablet-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/modal/test/card/modal-tablet.e2e.ts-snapshots/modal-card-custom-stacked-present-tablet-ios-ltr-Mobile-Chrome-linux.png
index 1a22f8d7c08..609fb509d32 100644
Binary files a/core/src/components/modal/test/card/modal-tablet.e2e.ts-snapshots/modal-card-custom-stacked-present-tablet-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/modal/test/card/modal-tablet.e2e.ts-snapshots/modal-card-custom-stacked-present-tablet-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/modal/test/card/modal-tablet.e2e.ts-snapshots/modal-card-custom-stacked-present-tablet-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/modal/test/card/modal-tablet.e2e.ts-snapshots/modal-card-custom-stacked-present-tablet-ios-ltr-Mobile-Firefox-linux.png
index 37db9cae4f2..f279d8b3c1f 100644
Binary files a/core/src/components/modal/test/card/modal-tablet.e2e.ts-snapshots/modal-card-custom-stacked-present-tablet-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/modal/test/card/modal-tablet.e2e.ts-snapshots/modal-card-custom-stacked-present-tablet-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/modal/test/card/modal-tablet.e2e.ts-snapshots/modal-card-custom-stacked-present-tablet-ios-ltr-Mobile-Safari-linux.png b/core/src/components/modal/test/card/modal-tablet.e2e.ts-snapshots/modal-card-custom-stacked-present-tablet-ios-ltr-Mobile-Safari-linux.png
index 3dc68f1d2ce..d3e8f78964b 100644
Binary files a/core/src/components/modal/test/card/modal-tablet.e2e.ts-snapshots/modal-card-custom-stacked-present-tablet-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/modal/test/card/modal-tablet.e2e.ts-snapshots/modal-card-custom-stacked-present-tablet-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/modal/test/card/modal-tablet.e2e.ts-snapshots/modal-card-present-tablet-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/modal/test/card/modal-tablet.e2e.ts-snapshots/modal-card-present-tablet-ios-ltr-Mobile-Chrome-linux.png
index 7f9f93513ca..9a39fa93baf 100644
Binary files a/core/src/components/modal/test/card/modal-tablet.e2e.ts-snapshots/modal-card-present-tablet-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/modal/test/card/modal-tablet.e2e.ts-snapshots/modal-card-present-tablet-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/modal/test/card/modal-tablet.e2e.ts-snapshots/modal-card-present-tablet-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/modal/test/card/modal-tablet.e2e.ts-snapshots/modal-card-present-tablet-ios-ltr-Mobile-Firefox-linux.png
index 1f48543124c..5bc2a65be20 100644
Binary files a/core/src/components/modal/test/card/modal-tablet.e2e.ts-snapshots/modal-card-present-tablet-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/modal/test/card/modal-tablet.e2e.ts-snapshots/modal-card-present-tablet-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/modal/test/card/modal-tablet.e2e.ts-snapshots/modal-card-present-tablet-ios-ltr-Mobile-Safari-linux.png b/core/src/components/modal/test/card/modal-tablet.e2e.ts-snapshots/modal-card-present-tablet-ios-ltr-Mobile-Safari-linux.png
index 1c0b930c431..1d2d9489111 100644
Binary files a/core/src/components/modal/test/card/modal-tablet.e2e.ts-snapshots/modal-card-present-tablet-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/modal/test/card/modal-tablet.e2e.ts-snapshots/modal-card-present-tablet-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/modal/test/card/modal-tablet.e2e.ts-snapshots/modal-card-stacked-present-tablet-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/modal/test/card/modal-tablet.e2e.ts-snapshots/modal-card-stacked-present-tablet-ios-ltr-Mobile-Chrome-linux.png
index a61b3eb705e..07cd4c0420f 100644
Binary files a/core/src/components/modal/test/card/modal-tablet.e2e.ts-snapshots/modal-card-stacked-present-tablet-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/modal/test/card/modal-tablet.e2e.ts-snapshots/modal-card-stacked-present-tablet-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/modal/test/card/modal-tablet.e2e.ts-snapshots/modal-card-stacked-present-tablet-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/modal/test/card/modal-tablet.e2e.ts-snapshots/modal-card-stacked-present-tablet-ios-ltr-Mobile-Firefox-linux.png
index 371b8960bf8..0f5d0d99b32 100644
Binary files a/core/src/components/modal/test/card/modal-tablet.e2e.ts-snapshots/modal-card-stacked-present-tablet-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/modal/test/card/modal-tablet.e2e.ts-snapshots/modal-card-stacked-present-tablet-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/modal/test/card/modal-tablet.e2e.ts-snapshots/modal-card-stacked-present-tablet-ios-ltr-Mobile-Safari-linux.png b/core/src/components/modal/test/card/modal-tablet.e2e.ts-snapshots/modal-card-stacked-present-tablet-ios-ltr-Mobile-Safari-linux.png
index 8d7504b50fe..ab10214636e 100644
Binary files a/core/src/components/modal/test/card/modal-tablet.e2e.ts-snapshots/modal-card-stacked-present-tablet-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/modal/test/card/modal-tablet.e2e.ts-snapshots/modal-card-stacked-present-tablet-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/modal/test/safe-area/index.html b/core/src/components/modal/test/safe-area/index.html
new file mode 100644
index 00000000000..14681f3820f
--- /dev/null
+++ b/core/src/components/modal/test/safe-area/index.html
@@ -0,0 +1,262 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Modal - Safe Area</title>
+    <meta
+      name="viewport"
+      content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
+    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
+    <script src="../../../../../scripts/testing/scripts.js"></script>
+    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
+    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+    <style>
+      :root {
+        --ion-safe-area-top: 47px;
+        --ion-safe-area-bottom: 34px;
+        --ion-safe-area-right: 0px;
+        --ion-safe-area-left: 0px;
+      }
+
+      /* Visual indicators for safe area regions */
+      .safe-area-indicator {
+        position: fixed;
+        background: rgba(255, 0, 0, 0.3);
+        pointer-events: none;
+        z-index: 99999;
+      }
+      .safe-area-indicator.top {
+        top: 0;
+        left: 0;
+        right: 0;
+        height: var(--ion-safe-area-top, 0px);
+      }
+      .safe-area-indicator.bottom {
+        bottom: 0;
+        left: 0;
+        right: 0;
+        height: var(--ion-safe-area-bottom, 0px);
+      }
+    </style>
+  </head>
+
+  <body>
+    <!-- Visual indicators for safe areas -->
+    <div class="safe-area-indicator top"></div>
+    <div class="safe-area-indicator bottom"></div>
+
+    <ion-app>
+      <div class="ion-page">
+        <ion-header>
+          <ion-toolbar>
+            <ion-title>Modal - Safe Area</ion-title>
+          </ion-toolbar>
+        </ion-header>
+
+        <ion-content class="ion-padding">
+          <h2>Fullscreen Modals</h2>
+          <button id="fullscreen-modal" onclick="presentFullscreenModal()">Present Fullscreen Modal</button>
+          <button id="fullscreen-modal-no-footer" onclick="presentFullscreenModalNoFooter()">
+            Present Fullscreen Modal (No Footer)
+          </button>
+
+          <h2>Sheet Modals</h2>
+          <button id="sheet-modal" onclick="presentSheetModal()">Present Sheet Modal</button>
+
+          <h2>Card Modals (iOS)</h2>
+          <button id="card-modal" onclick="presentCardModal()">Present Card Modal</button>
+
+          <h2>Centered Dialog (Tablet)</h2>
+          <button id="centered-dialog" onclick="presentCenteredDialog()">Present Centered Dialog</button>
+
+          <h2>Diagnostic Info</h2>
+          <div id="diagnostic">
+            <p>Window Width: <span id="window-width"></span></p>
+            <p>Window Height: <span id="window-height"></span></p>
+            <p>Is Tablet: <span id="is-tablet"></span></p>
+          </div>
+        </ion-content>
+      </div>
+    </ion-app>
+
+    <script>
+      // Update diagnostic info
+      function updateDiagnostics() {
+        document.getElementById('window-width').textContent = window.innerWidth + 'px';
+        document.getElementById('window-height').textContent = window.innerHeight + 'px';
+        document.getElementById('is-tablet').textContent = window.innerWidth >= 768 ? 'Yes' : 'No';
+      }
+      updateDiagnostics();
+      window.addEventListener('resize', updateDiagnostics);
+
+      function createModalContent(title, showFooter = true) {
+        const element = document.createElement('div');
+        element.innerHTML = `
+          <ion-header>
+            <ion-toolbar>
+              <ion-title>${title}</ion-title>
+              <ion-buttons slot="end">
+                <ion-button class="dismiss">Close</ion-button>
+              </ion-buttons>
+            </ion-toolbar>
+          </ion-header>
+          <ion-content class="ion-padding">
+            <h1>Modal Content</h1>
+            <p>This modal tests safe-area handling.</p>
+            <p>Safe-area values set on :root:</p>
+            <ul>
+              <li>Top: 47px (simulates iPhone notch)</li>
+              <li>Bottom: 34px (simulates home indicator)</li>
+            </ul>
+            <div id="modal-safe-area-info"></div>
+            <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse scelerisque dui vitae massa tincidunt, id volutpat sapien dapibus. Nunc libero ante, tristique vel imperdiet vitae, aliquet a arcu. Proin vestibulum augue neque, posuere posuere nisl mattis vel. Ut interdum quam ut nulla ultrices tristique vitae in arcu. Nulla ac magna tincidunt mauris tincidunt porttitor. Integer tincidunt imperdiet ante. Mauris quam arcu, dictum quis commodo a, tempus at nulla. Curabitur non tellus a leo tempor lobortis.
+            </p>
+            <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse scelerisque dui vitae massa tincidunt, id volutpat sapien dapibus. Nunc libero ante, tristique vel imperdiet vitae, aliquet a arcu. Proin vestibulum augue neque, posuere posuere nisl mattis vel. Ut interdum quam ut nulla ultrices tristique vitae in arcu. Nulla ac magna tincidunt mauris tincidunt porttitor. Integer tincidunt imperdiet ante. Mauris quam arcu, dictum quis commodo a, tempus at nulla. Curabitur non tellus a leo tempor lobortis.
+            </p>
+            <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse scelerisque dui vitae massa tincidunt, id volutpat sapien dapibus. Nunc libero ante, tristique vel imperdiet vitae, aliquet a arcu. Proin vestibulum augue neque, posuere posuere nisl mattis vel. Ut interdum quam ut nulla ultrices tristique vitae in arcu. Nulla ac magna tincidunt mauris tincidunt porttitor. Integer tincidunt imperdiet ante. Mauris quam arcu, dictum quis commodo a, tempus at nulla. Curabitur non tellus a leo tempor lobortis.
+            </p>
+            <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse scelerisque dui vitae massa tincidunt, id volutpat sapien dapibus. Nunc libero ante, tristique vel imperdiet vitae, aliquet a arcu. Proin vestibulum augue neque, posuere posuere nisl mattis vel. Ut interdum quam ut nulla ultrices tristique vitae in arcu. Nulla ac magna tincidunt mauris tincidunt porttitor. Integer tincidunt imperdiet ante. Mauris quam arcu, dictum quis commodo a, tempus at nulla. Curabitur non tellus a leo tempor lobortis.
+            </p>
+            <p>This text should help demonstrate appropriate usage of safe area in modals on the bottom.</p>
+          </ion-content>
+          ${
+            showFooter
+              ? `
+          <ion-footer>
+            <ion-toolbar>
+              <ion-title>Footer</ion-title>
+            </ion-toolbar>
+          </ion-footer>
+          `
+              : ''
+          }
+        `;
+        return element;
+      }
+
+      function updateModalDiagnostics(modalEl) {
+        const infoEl = modalEl.querySelector('#modal-safe-area-info');
+        if (infoEl) {
+          const styles = getComputedStyle(modalEl);
+          infoEl.innerHTML = `
+            <h3>Modal Safe-Area Overrides:</h3>
+            <ul>
+              <li>--ion-safe-area-top: ${styles.getPropertyValue('--ion-safe-area-top') || 'not set'}</li>
+              <li>--ion-safe-area-bottom: ${styles.getPropertyValue('--ion-safe-area-bottom') || 'not set'}</li>
+              <li>--ion-safe-area-left: ${styles.getPropertyValue('--ion-safe-area-left') || 'not set'}</li>
+              <li>--ion-safe-area-right: ${styles.getPropertyValue('--ion-safe-area-right') || 'not set'}</li>
+            </ul>
+          `;
+        }
+      }
+
+      async function presentFullscreenModal() {
+        const element = createModalContent('Fullscreen Modal');
+        const modal = Object.assign(document.createElement('ion-modal'), {
+          component: element,
+        });
+
+        element.querySelector('.dismiss').addEventListener('click', () => modal.dismiss());
+        document.body.appendChild(modal);
+
+        await modal.present();
+        updateModalDiagnostics(modal);
+
+        await modal.onDidDismiss();
+        modal.remove();
+      }
+
+      async function presentFullscreenModalNoFooter() {
+        const element = createModalContent('Fullscreen Modal (No Footer)', false);
+        const modal = Object.assign(document.createElement('ion-modal'), {
+          component: element,
+        });
+
+        element.querySelector('.dismiss').addEventListener('click', () => modal.dismiss());
+        document.body.appendChild(modal);
+
+        await modal.present();
+        updateModalDiagnostics(modal);
+
+        await modal.onDidDismiss();
+        modal.remove();
+      }
+
+      async function presentSheetModal() {
+        const element = createModalContent('Sheet Modal');
+        const modal = Object.assign(document.createElement('ion-modal'), {
+          component: element,
+          initialBreakpoint: 0.5,
+          breakpoints: [0, 0.25, 0.5, 0.75, 1],
+        });
+
+        element.querySelector('.dismiss').addEventListener('click', () => modal.dismiss());
+        document.body.appendChild(modal);
+
+        await modal.present();
+        updateModalDiagnostics(modal);
+
+        modal.addEventListener('ionBreakpointDidChange', () => {
+          updateModalDiagnostics(modal);
+        });
+
+        await modal.onDidDismiss();
+        modal.remove();
+      }
+
+      async function presentCardModal() {
+        const presentingEl = document.querySelector('.ion-page');
+        const element = createModalContent('Card Modal');
+        const modal = Object.assign(document.createElement('ion-modal'), {
+          component: element,
+          presentingElement: presentingEl,
+        });
+
+        element.querySelector('.dismiss').addEventListener('click', () => modal.dismiss());
+        document.body.appendChild(modal);
+
+        await modal.present();
+        updateModalDiagnostics(modal);
+
+        await modal.onDidDismiss();
+        modal.remove();
+      }
+
+      async function presentCenteredDialog() {
+        const element = createModalContent('Centered Dialog');
+        // Centered dialog uses custom dimensions
+        const modal = Object.assign(document.createElement('ion-modal'), {
+          component: element,
+          cssClass: 'centered-dialog',
+        });
+
+        // Add style for centered dialog
+        const style = document.createElement('style');
+        style.textContent = `
+          .centered-dialog {
+            --width: 400px;
+            --height: 300px;
+            --border-radius: 16px;
+          }
+        `;
+        document.head.appendChild(style);
+
+        element.querySelector('.dismiss').addEventListener('click', () => modal.dismiss());
+        document.body.appendChild(modal);
+
+        await modal.present();
+        updateModalDiagnostics(modal);
+
+        await modal.onDidDismiss();
+        modal.remove();
+        style.remove();
+      }
+    </script>
+  </body>
+</html>
diff --git a/core/src/components/modal/test/safe-area/modal.e2e.ts b/core/src/components/modal/test/safe-area/modal.e2e.ts
new file mode 100644
index 00000000000..af2a58c7699
--- /dev/null
+++ b/core/src/components/modal/test/safe-area/modal.e2e.ts
@@ -0,0 +1,370 @@
+import { expect } from '@playwright/test';
+import { configs, test, Viewports } from '@utils/test/playwright';
+
+/**
+ * These tests verify that safe-area CSS custom properties are correctly
+ * applied to modals based on their type and position.
+ *
+ * Safe-area handling is position-based and not affected by text direction.
+ * Testing only LTR to avoid redundant test runs.
+ */
+
+/**
+ * The test page (index.html) sets these root safe-area values.
+ * Keep in sync with the :root block in test/safe-area/index.html.
+ */
+const TEST_SAFE_AREA_TOP = '47px';
+configs({ modes: ['ios', 'md'], directions: ['ltr'] }).forEach(({ title, config }) => {
+  test.describe(title('modal: safe-area handling'), () => {
+    test.beforeEach(async ({ page }) => {
+      await page.goto('/src/components/modal/test/safe-area', config);
+    });
+
+    test('fullscreen modal should inherit all safe-area values on phone', async ({ page }, testInfo) => {
+      testInfo.annotations.push({
+        type: 'issue',
+        description: 'https://github.com/ionic-team/ionic-framework/issues/30900',
+      });
+
+      const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+
+      await page.click('#fullscreen-modal');
+      await ionModalDidPresent.next();
+
+      const modal = page.locator('ion-modal');
+
+      // On phone viewport, fullscreen modal should inherit safe-area values
+      const safeAreaTop = await modal.evaluate((el: HTMLIonModalElement) => {
+        return el.style.getPropertyValue('--ion-safe-area-top');
+      });
+      const safeAreaBottom = await modal.evaluate((el: HTMLIonModalElement) => {
+        return el.style.getPropertyValue('--ion-safe-area-bottom');
+      });
+
+      expect(safeAreaTop).toBe('inherit');
+      expect(safeAreaBottom).toBe('inherit');
+    });
+
+    test('regular modal should have safe-area zeroed on tablet (centered dialog)', async ({ page }, testInfo) => {
+      testInfo.annotations.push({
+        type: 'issue',
+        description: 'https://github.com/ionic-team/ionic-framework/issues/30900',
+      });
+
+      await page.setViewportSize(Viewports.tablet.portrait);
+
+      const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+
+      await page.click('#fullscreen-modal');
+      await ionModalDidPresent.next();
+
+      const modal = page.locator('ion-modal');
+
+      // On tablet viewport, the CSS media query renders regular modals as
+      // centered dialogs (600x500). Since they don't touch screen edges,
+      // safe-area values should be zeroed out.
+      const safeAreaTop = await modal.evaluate((el: HTMLIonModalElement) => {
+        return el.style.getPropertyValue('--ion-safe-area-top');
+      });
+      const safeAreaBottom = await modal.evaluate((el: HTMLIonModalElement) => {
+        return el.style.getPropertyValue('--ion-safe-area-bottom');
+      });
+
+      expect(safeAreaTop).toBe('0px');
+      expect(safeAreaBottom).toBe('0px');
+    });
+
+    test('sheet modal should only use bottom safe-area', async ({ page }, testInfo) => {
+      testInfo.annotations.push({
+        type: 'issue',
+        description: 'https://github.com/ionic-team/ionic-framework/issues/30900',
+      });
+
+      const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+
+      await page.click('#sheet-modal');
+      await ionModalDidPresent.next();
+
+      const modal = page.locator('ion-modal');
+
+      // Sheet modals should have top safe-area zeroed (doesn't touch top edge)
+      // but bottom safe-area inherited (touches bottom edge)
+      const safeAreaTop = await modal.evaluate((el: HTMLIonModalElement) => {
+        return el.style.getPropertyValue('--ion-safe-area-top');
+      });
+      const safeAreaBottom = await modal.evaluate((el: HTMLIonModalElement) => {
+        return el.style.getPropertyValue('--ion-safe-area-bottom');
+      });
+
+      expect(safeAreaTop).toBe('0px');
+      expect(safeAreaBottom).toBe('inherit');
+    });
+
+    test('fullscreen modal without footer should have wrapper padding-bottom', async ({ page }, testInfo) => {
+      testInfo.annotations.push({
+        type: 'issue',
+        description: 'https://github.com/ionic-team/ionic-framework/issues/30900',
+      });
+
+      const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+
+      await page.click('#fullscreen-modal-no-footer');
+      await ionModalDidPresent.next();
+
+      const modal = page.locator('ion-modal');
+
+      // When no footer is present, the wrapper should have reduced height
+      // and padding-bottom to prevent content from overlapping the system
+      // navigation bar, without changing box-sizing (which would break
+      // custom modals with --border-width).
+      const wrapper = modal.locator('.modal-wrapper');
+      const paddingBottom = await wrapper.evaluate((el: HTMLElement) => {
+        return el.style.getPropertyValue('padding-bottom');
+      });
+      const height = await wrapper.evaluate((el: HTMLElement) => {
+        return el.style.getPropertyValue('height');
+      });
+
+      expect(paddingBottom).toBe('var(--ion-safe-area-bottom, 0px)');
+      expect(height).toBe('calc(var(--height) - var(--ion-safe-area-bottom, 0px))');
+    });
+
+    test('sheet modal at breakpoint 1 should keep top safe-area zeroed', async ({ page }, testInfo) => {
+      testInfo.annotations.push({
+        type: 'issue',
+        description: 'https://github.com/ionic-team/ionic-framework/issues/30900',
+      });
+
+      const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+
+      await page.click('#sheet-modal');
+      await ionModalDidPresent.next();
+
+      const modal = page.locator('ion-modal');
+
+      // Initially at breakpoint 0.5 — top safe-area should be zeroed
+      let safeAreaTop = await modal.evaluate((el: HTMLIonModalElement) => {
+        return el.style.getPropertyValue('--ion-safe-area-top');
+      });
+      expect(safeAreaTop).toBe('0px');
+
+      // Move to breakpoint 1 (fully expanded) via the public method
+      const ionBreakpointDidChange = await page.spyOnEvent('ionBreakpointDidChange');
+      await modal.evaluate((el: HTMLIonModalElement) => {
+        el.setCurrentBreakpoint(1);
+      });
+      await ionBreakpointDidChange.next();
+
+      // At breakpoint 1, top safe-area should still be 0px because the
+      // sheet height is frozen with the resolved root value. This prevents
+      // header content from getting double-offset padding.
+      safeAreaTop = await modal.evaluate((el: HTMLIonModalElement) => {
+        return el.style.getPropertyValue('--ion-safe-area-top');
+      });
+      expect(safeAreaTop).toBe('0px');
+    });
+
+    test('sheet modal should have --ion-modal-offset-top set with resolved safe-area value', async ({
+      page,
+    }, testInfo) => {
+      testInfo.annotations.push({
+        type: 'issue',
+        description: 'https://github.com/ionic-team/ionic-framework/issues/30900',
+      });
+
+      const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+
+      await page.click('#sheet-modal');
+      await ionModalDidPresent.next();
+
+      const modal = page.locator('ion-modal');
+
+      // The internal --ion-modal-offset-top property should be set to the
+      // resolved root --ion-safe-area-top value. The SCSS --height formula
+      // uses this instead of --ion-safe-area-top directly.
+      const offsetTop = await modal.evaluate((el: HTMLIonModalElement) => {
+        return el.style.getPropertyValue('--ion-modal-offset-top');
+      });
+      expect(offsetTop).toBe(TEST_SAFE_AREA_TOP);
+    });
+
+    test('fullscreen modal safe-area should update on resize from phone to tablet', async ({ page }, testInfo) => {
+      testInfo.annotations.push({
+        type: 'issue',
+        description: 'https://github.com/ionic-team/ionic-framework/issues/30900',
+      });
+
+      const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+
+      await page.click('#fullscreen-modal');
+      await ionModalDidPresent.next();
+
+      const modal = page.locator('ion-modal');
+
+      // On phone viewport, modal should inherit safe-area
+      const safeAreaTop = await modal.evaluate((el: HTMLIonModalElement) => {
+        return el.style.getPropertyValue('--ion-safe-area-top');
+      });
+      expect(safeAreaTop).toBe('inherit');
+
+      // Resize to tablet viewport (centered dialog breakpoint)
+      await page.setViewportSize(Viewports.tablet.portrait);
+
+      // Poll until the debounced resize handler updates safe-area overrides
+      await expect
+        .poll(async () => {
+          return modal.evaluate((el: HTMLIonModalElement) => el.style.getPropertyValue('--ion-safe-area-top'));
+        })
+        .toBe('0px');
+
+      const safeAreaBottom = await modal.evaluate((el: HTMLIonModalElement) => {
+        return el.style.getPropertyValue('--ion-safe-area-bottom');
+      });
+
+      expect(safeAreaBottom).toBe('0px');
+    });
+
+    test('centered dialog should have all safe-area values zeroed on tablet', async ({ page }, testInfo) => {
+      testInfo.annotations.push({
+        type: 'issue',
+        description: 'https://github.com/ionic-team/ionic-framework/issues/30900',
+      });
+
+      await page.setViewportSize(Viewports.tablet.portrait);
+
+      const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+
+      await page.click('#centered-dialog');
+      await ionModalDidPresent.next();
+
+      const modal = page.locator('ion-modal');
+
+      // Centered dialogs don't touch any edge, so all safe-areas should be zeroed
+      const safeAreaTop = await modal.evaluate((el: HTMLIonModalElement) => {
+        return el.style.getPropertyValue('--ion-safe-area-top');
+      });
+      const safeAreaBottom = await modal.evaluate((el: HTMLIonModalElement) => {
+        return el.style.getPropertyValue('--ion-safe-area-bottom');
+      });
+
+      expect(safeAreaTop).toBe('0px');
+      expect(safeAreaBottom).toBe('0px');
+    });
+
+    test('safe-area overrides should be cleared on dismiss', async ({ page }, testInfo) => {
+      testInfo.annotations.push({
+        type: 'issue',
+        description: 'https://github.com/ionic-team/ionic-framework/issues/30900',
+      });
+
+      // Present modal programmatically so we control the lifecycle
+      // (the HTML page's presenters call modal.remove() after dismiss,
+      // which races with our post-dismiss evaluation)
+      await page.evaluate(async () => {
+        const modal = document.createElement('ion-modal');
+        modal.component = document.createElement('div');
+        document.body.appendChild(modal);
+        await modal.present();
+      });
+
+      const modal = page.locator('ion-modal');
+
+      // Verify overrides are set
+      let safeAreaTop = await modal.evaluate((el: HTMLIonModalElement) => {
+        return el.style.getPropertyValue('--ion-safe-area-top');
+      });
+      expect(safeAreaTop).not.toBe('');
+
+      // Dismiss the modal but don't remove the element
+      await modal.evaluate(async (el: HTMLIonModalElement) => {
+        await el.dismiss();
+      });
+
+      // Verify overrides are cleared after dismiss
+      safeAreaTop = await modal.evaluate((el: HTMLIonModalElement) => {
+        return el.style.getPropertyValue('--ion-safe-area-top');
+      });
+      expect(safeAreaTop).toBe('');
+
+      // Clean up
+      await modal.evaluate((el: HTMLIonModalElement) => el.remove());
+    });
+  });
+});
+
+configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
+  test.describe(title('modal: card modal safe-area (iOS only)'), () => {
+    test.beforeEach(async ({ page }) => {
+      await page.goto('/src/components/modal/test/safe-area', config);
+    });
+
+    test('card modal should inherit top and bottom safe-area', async ({ page }, testInfo) => {
+      testInfo.annotations.push({
+        type: 'issue',
+        description: 'https://github.com/ionic-team/ionic-framework/issues/30900',
+      });
+
+      const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+
+      await page.click('#card-modal');
+      await ionModalDidPresent.next();
+
+      const modal = page.locator('ion-modal');
+
+      // Card modals need top safe-area for height calculation
+      const safeAreaTop = await modal.evaluate((el: HTMLIonModalElement) => {
+        return el.style.getPropertyValue('--ion-safe-area-top');
+      });
+      const safeAreaBottom = await modal.evaluate((el: HTMLIonModalElement) => {
+        return el.style.getPropertyValue('--ion-safe-area-bottom');
+      });
+      const safeAreaLeft = await modal.evaluate((el: HTMLIonModalElement) => {
+        return el.style.getPropertyValue('--ion-safe-area-left');
+      });
+      const safeAreaRight = await modal.evaluate((el: HTMLIonModalElement) => {
+        return el.style.getPropertyValue('--ion-safe-area-right');
+      });
+
+      expect(safeAreaTop).toBe('inherit');
+      expect(safeAreaBottom).toBe('inherit');
+      expect(safeAreaLeft).toBe('0px');
+      expect(safeAreaRight).toBe('0px');
+    });
+
+    test('card modal on tablet should still inherit safe-area values', async ({ page }, testInfo) => {
+      testInfo.annotations.push({
+        type: 'issue',
+        description: 'https://github.com/ionic-team/ionic-framework/issues/30900',
+      });
+
+      await page.setViewportSize(Viewports.tablet.portrait);
+
+      const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+
+      await page.click('#card-modal');
+      await ionModalDidPresent.next();
+
+      const modal = page.locator('ion-modal');
+
+      // Card modals use safe-area values in CSS calculations regardless of viewport,
+      // so they should inherit even on tablet where regular modals become centered dialogs.
+      const safeAreaTop = await modal.evaluate((el: HTMLIonModalElement) => {
+        return el.style.getPropertyValue('--ion-safe-area-top');
+      });
+      const safeAreaBottom = await modal.evaluate((el: HTMLIonModalElement) => {
+        return el.style.getPropertyValue('--ion-safe-area-bottom');
+      });
+      const safeAreaLeft = await modal.evaluate((el: HTMLIonModalElement) => {
+        return el.style.getPropertyValue('--ion-safe-area-left');
+      });
+      const safeAreaRight = await modal.evaluate((el: HTMLIonModalElement) => {
+        return el.style.getPropertyValue('--ion-safe-area-right');
+      });
+
+      expect(safeAreaTop).toBe('inherit');
+      expect(safeAreaBottom).toBe('inherit');
+      expect(safeAreaLeft).toBe('0px');
+      expect(safeAreaRight).toBe('0px');
+    });
+  });
+});
diff --git a/core/src/components/modal/test/sheet/index.html b/core/src/components/modal/test/sheet/index.html
index b2638351dec..ec9e15bc3af 100644
--- a/core/src/components/modal/test/sheet/index.html
+++ b/core/src/components/modal/test/sheet/index.html
@@ -169,6 +169,8 @@
             Half Sheet w/ Footer
           </button>
 
+          <button id="drag-events" onclick="dragEvents()">Drag Events</button>
+
           <div class="grid">
             <div class="grid-item red"></div>
             <div class="grid-item green"></div>
@@ -316,6 +318,27 @@
         await modalElement.onDidDismiss();
         modalElement.remove();
       }
+
+      function dragEvents() {
+        const modal = createModal({
+          initialBreakpoint: 0.5,
+          breakpoints: [0, 0.25, 0.5, 0.75, 1],
+        });
+
+        modal.addEventListener('ionDragStart', (event) => {
+          console.log('Drag started');
+        });
+
+        modal.addEventListener('ionDragMove', (event) => {
+          console.log('Drag moved', event.detail);
+        });
+
+        modal.addEventListener('ionDragEnd', (event) => {
+          console.log('Drag ended', event.detail);
+        });
+
+        modal.present();
+      }
     </script>
   </body>
 </html>
diff --git a/core/src/components/modal/test/sheet/modal.e2e.ts b/core/src/components/modal/test/sheet/modal.e2e.ts
index ddd052c143d..ffa89001d9b 100644
--- a/core/src/components/modal/test/sheet/modal.e2e.ts
+++ b/core/src/components/modal/test/sheet/modal.e2e.ts
@@ -392,4 +392,50 @@ configs({ modes: ['ios', 'ionic-ios'], directions: ['ltr'] }).forEach(({ title,
       await expect(dragHandle).toBeFocused();
     });
   });
+
+  test.describe(title('sheet modal: drag events'), () => {
+    test('should emit ionDragStart, ionDragMove, and ionDragEnd events', async ({ page }) => {
+      await page.goto('/src/components/modal/test/sheet', config);
+
+      const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+
+      await page.click('#drag-events');
+      await ionModalDidPresent.next();
+
+      const ionDragStart = await page.spyOnEvent('ionDragStart');
+      const ionDragMove = await page.spyOnEvent('ionDragMove');
+      const ionDragEnd = await page.spyOnEvent('ionDragEnd');
+
+      const header = page.locator('.modal-sheet ion-header');
+
+      // Start the drag to verify it emits the events before the gesture ends
+      await dragElementBy(header, page, 0, 50, undefined, undefined, false);
+
+      await ionDragStart.next();
+      const dragMoveEvent = await ionDragMove.next();
+
+      expect(ionDragStart.length).toBe(1);
+
+      expect(ionDragMove.length).toBeGreaterThan(0);
+      expect(Object.keys(dragMoveEvent.detail).length).toBe(5);
+
+      expect(ionDragEnd.length).toBe(0);
+
+      /**
+       * Drage the modal further to verify it does:
+       * - not emit the event again for `ionDragStart`
+       * - emit more `ionDragMove` events
+       * - emit the `ionDragEnd` event when the gesture ends
+       */
+      await dragElementBy(header, page, 0, 100);
+
+      const dragEndEvent = await ionDragEnd.next();
+
+      expect(ionDragStart.length).toBe(1);
+      expect(ionDragMove.length).toBeGreaterThan(0);
+
+      expect(ionDragEnd.length).toBe(1);
+      expect(Object.keys(dragEndEvent.detail).length).toBe(5);
+    });
+  });
 });
diff --git a/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-backdrop-hidden-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-backdrop-hidden-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 57a0b171690..2180f96574e 100644
Binary files a/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-backdrop-hidden-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-backdrop-hidden-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-backdrop-hidden-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-backdrop-hidden-ionic-md-ltr-light-Mobile-Safari-linux.png
index 35683b2772c..17f16c23786 100644
Binary files a/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-backdrop-hidden-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-backdrop-hidden-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/popover/animations/ios.enter.ts b/core/src/components/popover/animations/ios.enter.ts
index aa4e0568143..02a078a2f71 100644
--- a/core/src/components/popover/animations/ios.enter.ts
+++ b/core/src/components/popover/animations/ios.enter.ts
@@ -7,11 +7,22 @@ import {
   getArrowDimensions,
   getPopoverDimensions,
   getPopoverPosition,
+  getSafeAreaInsets,
   shouldShowArrow,
 } from '../utils';
 
 const POPOVER_IOS_BODY_PADDING = 5;
 
+/**
+ * Minimum edge margin for iOS popovers ensures visual spacing from screen
+ * edges on devices without safe areas (e.g., older iPhones without notches).
+ * Previously this was a hardcoded `safeAreaMargin = 25` that served dual
+ * purpose: safe-area avoidance AND visual spacing. Now that actual safe-area
+ * insets are read dynamically, this floor preserves the visual spacing when
+ * safe-area values are 0.
+ */
+const POPOVER_IOS_MIN_EDGE_MARGIN = 25;
+
 /**
  * iOS Popover Enter Animation
  */
@@ -53,7 +64,16 @@ export const iosEnterAnimation = (baseEl: HTMLElement, opts?: any): Animation =>
   );
 
   const padding = size === 'cover' ? 0 : POPOVER_IOS_BODY_PADDING;
-  const margin = size === 'cover' ? 0 : 25;
+  const rawSafeArea = getSafeAreaInsets(doc as Document);
+  const safeArea =
+    size === 'cover'
+      ? { top: 0, bottom: 0, left: 0, right: 0 }
+      : {
+          top: Math.max(rawSafeArea.top, POPOVER_IOS_MIN_EDGE_MARGIN),
+          bottom: Math.max(rawSafeArea.bottom, POPOVER_IOS_MIN_EDGE_MARGIN),
+          left: Math.max(rawSafeArea.left, POPOVER_IOS_MIN_EDGE_MARGIN),
+          right: Math.max(rawSafeArea.right, POPOVER_IOS_MIN_EDGE_MARGIN),
+        };
 
   const {
     originX,
@@ -63,9 +83,12 @@ export const iosEnterAnimation = (baseEl: HTMLElement, opts?: any): Animation =>
     bottom,
     checkSafeAreaLeft,
     checkSafeAreaRight,
+    checkSafeAreaTop,
+    checkSafeAreaBottom,
     arrowTop,
     arrowLeft,
     addPopoverBottomClass,
+    hideArrow,
   } = calculateWindowAdjustment(
     side,
     results.top,
@@ -75,7 +98,7 @@ export const iosEnterAnimation = (baseEl: HTMLElement, opts?: any): Animation =>
     bodyHeight,
     contentWidth,
     contentHeight,
-    margin,
+    safeArea,
     results.originX,
     results.originY,
     results.referenceCoordinates,
@@ -119,11 +142,15 @@ export const iosEnterAnimation = (baseEl: HTMLElement, opts?: any): Animation =>
       }
 
       if (bottom !== undefined) {
-        contentEl.style.setProperty('bottom', `${bottom}px`);
+        let bottomValue = `${bottom}px`;
+        if (checkSafeAreaBottom) {
+          bottomValue = `${bottom}px + var(--ion-safe-area-bottom, 0px)`;
+        }
+        contentEl.style.setProperty('bottom', `calc(${bottomValue})`);
       }
 
-      const safeAreaLeft = ' + var(--ion-safe-area-left, 0)';
-      const safeAreaRight = ' - var(--ion-safe-area-right, 0)';
+      const safeAreaLeft = ' + var(--ion-safe-area-left, 0px)';
+      const safeAreaRight = ' - var(--ion-safe-area-right, 0px)';
 
       let leftValue = `${left}px`;
 
@@ -134,13 +161,18 @@ export const iosEnterAnimation = (baseEl: HTMLElement, opts?: any): Animation =>
         leftValue = `${left}px${safeAreaRight}`;
       }
 
-      contentEl.style.setProperty('top', `calc(${top}px + var(--offset-y, 0))`);
+      let topValue = `${top}px`;
+      if (checkSafeAreaTop) {
+        topValue = `${top}px + var(--ion-safe-area-top, 0px)`;
+      }
+
+      contentEl.style.setProperty('top', `calc(${topValue} + var(--offset-y, 0))`);
       contentEl.style.setProperty('left', `calc(${leftValue} + var(--offset-x, 0))`);
       contentEl.style.setProperty('transform-origin', `${originY} ${originX}`);
 
       if (arrowEl !== null) {
         const didAdjustBounds = results.top !== top || results.left !== left;
-        const showArrow = shouldShowArrow(side, didAdjustBounds, ev, trigger);
+        const showArrow = !hideArrow && shouldShowArrow(side, didAdjustBounds, ev, trigger);
 
         if (showArrow) {
           arrowEl.style.setProperty('top', `calc(${arrowTop}px + var(--offset-y, 0))`);
diff --git a/core/src/components/popover/animations/md.enter.ts b/core/src/components/popover/animations/md.enter.ts
index e25f745cec4..8de9976e86c 100644
--- a/core/src/components/popover/animations/md.enter.ts
+++ b/core/src/components/popover/animations/md.enter.ts
@@ -2,7 +2,7 @@ import { createAnimation } from '@utils/animation/animation';
 import { getElementRoot } from '@utils/helpers';
 
 import type { Animation } from '../../../interface';
-import { calculateWindowAdjustment, getPopoverDimensions, getPopoverPosition } from '../utils';
+import { calculateWindowAdjustment, getPopoverDimensions, getPopoverPosition, getSafeAreaInsets } from '../utils';
 
 const POPOVER_MD_BODY_PADDING = 12;
 
@@ -46,8 +46,22 @@ export const mdEnterAnimation = (baseEl: HTMLElement, opts?: any): Animation =>
   );
 
   const padding = size === 'cover' ? 0 : POPOVER_MD_BODY_PADDING;
-
-  const { originX, originY, top, left, bottom } = calculateWindowAdjustment(
+  // MD mode now applies safe-area insets (previously passed 0, ignoring all safe areas).
+  // This is needed for Android edge-to-edge (API 36+) where system bars overlap content.
+  const safeArea = size === 'cover' ? { top: 0, bottom: 0, left: 0, right: 0 } : getSafeAreaInsets(doc as Document);
+
+  const {
+    originX,
+    originY,
+    top,
+    left,
+    bottom,
+    checkSafeAreaLeft,
+    checkSafeAreaRight,
+    checkSafeAreaTop,
+    checkSafeAreaBottom,
+    addPopoverBottomClass,
+  } = calculateWindowAdjustment(
     side,
     results.top,
     results.left,
@@ -56,12 +70,28 @@ export const mdEnterAnimation = (baseEl: HTMLElement, opts?: any): Animation =>
     bodyHeight,
     contentWidth,
     contentHeight,
-    0,
+    safeArea,
     results.originX,
     results.originY,
     results.referenceCoordinates
   );
 
+  const safeAreaLeftCalc = ' + var(--ion-safe-area-left, 0px)';
+  const safeAreaRightCalc = ' - var(--ion-safe-area-right, 0px)';
+
+  let leftValue = `${left}px`;
+  if (checkSafeAreaLeft) {
+    leftValue = `${left}px${safeAreaLeftCalc}`;
+  }
+  if (checkSafeAreaRight) {
+    leftValue = `${left}px${safeAreaRightCalc}`;
+  }
+
+  let topValue = `${top}px`;
+  if (checkSafeAreaTop) {
+    topValue = `${top}px + var(--ion-safe-area-top, 0px)`;
+  }
+
   const baseAnimation = createAnimation();
   const backdropAnimation = createAnimation();
   const wrapperAnimation = createAnimation();
@@ -81,13 +111,17 @@ export const mdEnterAnimation = (baseEl: HTMLElement, opts?: any): Animation =>
   contentAnimation
     .addElement(contentEl)
     .beforeStyles({
-      top: `calc(${top}px + var(--offset-y, 0px))`,
-      left: `calc(${left}px + var(--offset-x, 0px))`,
+      top: `calc(${topValue} + var(--offset-y, 0px))`,
+      left: `calc(${leftValue} + var(--offset-x, 0px))`,
       'transform-origin': `${originY} ${originX}`,
     })
     .beforeAddWrite(() => {
       if (bottom !== undefined) {
-        contentEl.style.setProperty('bottom', `${bottom}px`);
+        let bottomValue = `${bottom}px`;
+        if (checkSafeAreaBottom) {
+          bottomValue = `${bottom}px + var(--ion-safe-area-bottom, 0px)`;
+        }
+        contentEl.style.setProperty('bottom', `calc(${bottomValue})`);
       }
     })
     .fromTo('transform', 'scale(0.8)', 'scale(1)');
@@ -101,7 +135,7 @@ export const mdEnterAnimation = (baseEl: HTMLElement, opts?: any): Animation =>
       if (size === 'cover') {
         baseEl.style.setProperty('--width', `${contentWidth}px`);
       }
-      if (originY === 'bottom') {
+      if (addPopoverBottomClass) {
         baseEl.classList.add('popover-bottom');
       }
     })
diff --git a/core/src/components/popover/test/safe-area/index.html b/core/src/components/popover/test/safe-area/index.html
new file mode 100644
index 00000000000..c9ee522b986
--- /dev/null
+++ b/core/src/components/popover/test/safe-area/index.html
@@ -0,0 +1,154 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Popover - Safe Area</title>
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
+    />
+    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
+    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
+    <script src="../../../../../scripts/testing/scripts.js"></script>
+    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
+    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+    <script type="module">
+      import { popoverController } from '../../../../../dist/ionic/index.esm.js';
+      window.popoverController = popoverController;
+    </script>
+    <style>
+      :root {
+        --ion-safe-area-top: 47px;
+        --ion-safe-area-bottom: 34px;
+        --ion-safe-area-left: 44px;
+        --ion-safe-area-right: 44px;
+      }
+
+      /* Visual indicators for safe area regions */
+      .safe-area-indicator {
+        position: fixed;
+        background: rgba(255, 0, 0, 0.15);
+        pointer-events: none;
+        z-index: 99999;
+      }
+      .safe-area-indicator.top {
+        top: 0;
+        left: 0;
+        right: 0;
+        height: var(--ion-safe-area-top, 0px);
+      }
+      .safe-area-indicator.bottom {
+        bottom: 0;
+        left: 0;
+        right: 0;
+        height: var(--ion-safe-area-bottom, 0px);
+      }
+      .safe-area-indicator.left {
+        top: 0;
+        bottom: 0;
+        left: 0;
+        width: var(--ion-safe-area-left, 0px);
+      }
+      .safe-area-indicator.right {
+        top: 0;
+        bottom: 0;
+        right: 0;
+        width: var(--ion-safe-area-right, 0px);
+      }
+
+      .trigger-button {
+        position: fixed;
+        padding: 8px 12px;
+        font-size: 14px;
+        z-index: 1;
+      }
+
+      #bottom-trigger {
+        bottom: 8px;
+        left: 50%;
+        transform: translateX(-50%);
+      }
+
+      #right-trigger {
+        right: 8px;
+        top: 50%;
+        transform: translateY(-50%);
+      }
+
+      #large-popover-trigger {
+        bottom: 8px;
+        right: 8px;
+      }
+    </style>
+  </head>
+  <body>
+    <!-- Visual indicators for safe areas -->
+    <div class="safe-area-indicator top"></div>
+    <div class="safe-area-indicator bottom"></div>
+    <div class="safe-area-indicator left"></div>
+    <div class="safe-area-indicator right"></div>
+
+    <ion-app>
+      <ion-content class="ion-padding">
+        <p>Popover safe area test. Triggers are positioned near screen edges.</p>
+      </ion-content>
+    </ion-app>
+
+    <!-- Fixed-position trigger buttons near screen edges -->
+    <button id="bottom-trigger" class="trigger-button" onclick="presentPopover(event)">Bottom Edge</button>
+    <button id="right-trigger" class="trigger-button" onclick="presentPopover(event)">Right Edge</button>
+    <button id="large-popover-trigger" class="trigger-button" onclick="presentLargePopover(event)">
+      Large Popover
+    </button>
+
+    <script>
+      customElements.define(
+        'popover-content',
+        class PopoverContent extends HTMLElement {
+          connectedCallback() {
+            this.innerHTML = `
+              <ion-list>
+                <ion-item button><ion-label>Item 1</ion-label></ion-item>
+                <ion-item button><ion-label>Item 2</ion-label></ion-item>
+                <ion-item button><ion-label>Item 3</ion-label></ion-item>
+              </ion-list>
+            `;
+          }
+        }
+      );
+
+      customElements.define(
+        'popover-large-content',
+        class PopoverLargeContent extends HTMLElement {
+          connectedCallback() {
+            let items = '';
+            for (let i = 0; i < 15; i++) {
+              items += `<ion-item button><ion-label>Item ${i}</ion-label></ion-item>`;
+            }
+            this.innerHTML = `
+              <ion-list>
+                ${items}
+              </ion-list>
+            `;
+          }
+        }
+      );
+
+      async function presentPopover(ev) {
+        const popover = await popoverController.create({
+          component: 'popover-content',
+          event: ev,
+        });
+        await popover.present();
+      }
+
+      async function presentLargePopover(ev) {
+        const popover = await popoverController.create({
+          component: 'popover-large-content',
+          event: ev,
+        });
+        await popover.present();
+      }
+    </script>
+  </body>
+</html>
diff --git a/core/src/components/popover/test/safe-area/popover.e2e.ts b/core/src/components/popover/test/safe-area/popover.e2e.ts
new file mode 100644
index 00000000000..58cca8baa7c
--- /dev/null
+++ b/core/src/components/popover/test/safe-area/popover.e2e.ts
@@ -0,0 +1,81 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+/**
+ * Safe-area behavior applies to both iOS and MD modes.
+ * Left/right safe areas are tested in landscape viewport.
+ */
+configs({ modes: ['ios', 'md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('popover: safe-area'), () => {
+    test.beforeEach(async ({ page }) => {
+      await page.goto('/src/components/popover/test/safe-area', config);
+    });
+
+    test('should not overlap the bottom safe area when trigger is near the bottom edge', async ({ page }, testInfo) => {
+      testInfo.annotations.push({
+        type: 'issue',
+        description: 'https://github.com/ionic-team/ionic-framework/issues/28411',
+      });
+
+      /**
+       * Use a landscape-style viewport with bottom safe area.
+       * The bottom trigger is positioned at the very bottom of the screen.
+       */
+      await page.setViewportSize({
+        width: 414,
+        height: 400,
+      });
+
+      const ionPopoverDidPresent = await page.spyOnEvent('ionPopoverDidPresent');
+
+      await page.locator('#bottom-trigger').click();
+      await ionPopoverDidPresent.next();
+
+      await expect(page).toHaveScreenshot(screenshot('popover-safe-area-bottom'));
+    });
+
+    test('should not overlap the right safe area when trigger is near the right edge', async ({ page }, testInfo) => {
+      testInfo.annotations.push({
+        type: 'issue',
+        description: 'https://github.com/ionic-team/ionic-framework/issues/28411',
+      });
+
+      /**
+       * Use a landscape viewport with left/right safe areas
+       * to simulate a device rotated to landscape with notch on left.
+       */
+      await page.setViewportSize({
+        width: 600,
+        height: 400,
+      });
+
+      const ionPopoverDidPresent = await page.spyOnEvent('ionPopoverDidPresent');
+
+      await page.locator('#right-trigger').click();
+      await ionPopoverDidPresent.next();
+
+      await expect(page).toHaveScreenshot(screenshot('popover-safe-area-right'));
+    });
+
+    test('should handle a large popover near the bottom-right corner without overlapping safe areas', async ({
+      page,
+    }, testInfo) => {
+      testInfo.annotations.push({
+        type: 'issue',
+        description: 'https://github.com/ionic-team/ionic-framework/issues/28411',
+      });
+
+      await page.setViewportSize({
+        width: 600,
+        height: 400,
+      });
+
+      const ionPopoverDidPresent = await page.spyOnEvent('ionPopoverDidPresent');
+
+      await page.locator('#large-popover-trigger').click();
+      await ionPopoverDidPresent.next();
+
+      await expect(page).toHaveScreenshot(screenshot('popover-safe-area-large'));
+    });
+  });
+});
diff --git a/core/src/components/popover/test/safe-area/popover.e2e.ts-snapshots/popover-safe-area-bottom-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/popover/test/safe-area/popover.e2e.ts-snapshots/popover-safe-area-bottom-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..7380d98ef50
Binary files /dev/null and b/core/src/components/popover/test/safe-area/popover.e2e.ts-snapshots/popover-safe-area-bottom-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/popover/test/safe-area/popover.e2e.ts-snapshots/popover-safe-area-bottom-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/popover/test/safe-area/popover.e2e.ts-snapshots/popover-safe-area-bottom-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..fa56c8b3d61
Binary files /dev/null and b/core/src/components/popover/test/safe-area/popover.e2e.ts-snapshots/popover-safe-area-bottom-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/popover/test/safe-area/popover.e2e.ts-snapshots/popover-safe-area-bottom-ios-ltr-Mobile-Safari-linux.png b/core/src/components/popover/test/safe-area/popover.e2e.ts-snapshots/popover-safe-area-bottom-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..10125b226cd
Binary files /dev/null and b/core/src/components/popover/test/safe-area/popover.e2e.ts-snapshots/popover-safe-area-bottom-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/popover/test/safe-area/popover.e2e.ts-snapshots/popover-safe-area-bottom-md-ltr-Mobile-Chrome-linux.png b/core/src/components/popover/test/safe-area/popover.e2e.ts-snapshots/popover-safe-area-bottom-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..574cc7307a1
Binary files /dev/null and b/core/src/components/popover/test/safe-area/popover.e2e.ts-snapshots/popover-safe-area-bottom-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/popover/test/safe-area/popover.e2e.ts-snapshots/popover-safe-area-bottom-md-ltr-Mobile-Firefox-linux.png b/core/src/components/popover/test/safe-area/popover.e2e.ts-snapshots/popover-safe-area-bottom-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..7d936598896
Binary files /dev/null and b/core/src/components/popover/test/safe-area/popover.e2e.ts-snapshots/popover-safe-area-bottom-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/popover/test/safe-area/popover.e2e.ts-snapshots/popover-safe-area-bottom-md-ltr-Mobile-Safari-linux.png b/core/src/components/popover/test/safe-area/popover.e2e.ts-snapshots/popover-safe-area-bottom-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..26d2d861dc4
Binary files /dev/null and b/core/src/components/popover/test/safe-area/popover.e2e.ts-snapshots/popover-safe-area-bottom-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/popover/test/safe-area/popover.e2e.ts-snapshots/popover-safe-area-large-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/popover/test/safe-area/popover.e2e.ts-snapshots/popover-safe-area-large-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..d8ee77f057b
Binary files /dev/null and b/core/src/components/popover/test/safe-area/popover.e2e.ts-snapshots/popover-safe-area-large-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/popover/test/safe-area/popover.e2e.ts-snapshots/popover-safe-area-large-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/popover/test/safe-area/popover.e2e.ts-snapshots/popover-safe-area-large-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..4692d2d3ea6
Binary files /dev/null and b/core/src/components/popover/test/safe-area/popover.e2e.ts-snapshots/popover-safe-area-large-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/popover/test/safe-area/popover.e2e.ts-snapshots/popover-safe-area-large-ios-ltr-Mobile-Safari-linux.png b/core/src/components/popover/test/safe-area/popover.e2e.ts-snapshots/popover-safe-area-large-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..f2721a2c6e8
Binary files /dev/null and b/core/src/components/popover/test/safe-area/popover.e2e.ts-snapshots/popover-safe-area-large-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/popover/test/safe-area/popover.e2e.ts-snapshots/popover-safe-area-large-md-ltr-Mobile-Chrome-linux.png b/core/src/components/popover/test/safe-area/popover.e2e.ts-snapshots/popover-safe-area-large-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..215d75de8ba
Binary files /dev/null and b/core/src/components/popover/test/safe-area/popover.e2e.ts-snapshots/popover-safe-area-large-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/popover/test/safe-area/popover.e2e.ts-snapshots/popover-safe-area-large-md-ltr-Mobile-Firefox-linux.png b/core/src/components/popover/test/safe-area/popover.e2e.ts-snapshots/popover-safe-area-large-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..900782be5d9
Binary files /dev/null and b/core/src/components/popover/test/safe-area/popover.e2e.ts-snapshots/popover-safe-area-large-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/popover/test/safe-area/popover.e2e.ts-snapshots/popover-safe-area-large-md-ltr-Mobile-Safari-linux.png b/core/src/components/popover/test/safe-area/popover.e2e.ts-snapshots/popover-safe-area-large-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..9d89837628a
Binary files /dev/null and b/core/src/components/popover/test/safe-area/popover.e2e.ts-snapshots/popover-safe-area-large-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/popover/test/safe-area/popover.e2e.ts-snapshots/popover-safe-area-right-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/popover/test/safe-area/popover.e2e.ts-snapshots/popover-safe-area-right-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..a04545790e4
Binary files /dev/null and b/core/src/components/popover/test/safe-area/popover.e2e.ts-snapshots/popover-safe-area-right-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/popover/test/safe-area/popover.e2e.ts-snapshots/popover-safe-area-right-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/popover/test/safe-area/popover.e2e.ts-snapshots/popover-safe-area-right-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..4a9bcc9aa42
Binary files /dev/null and b/core/src/components/popover/test/safe-area/popover.e2e.ts-snapshots/popover-safe-area-right-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/popover/test/safe-area/popover.e2e.ts-snapshots/popover-safe-area-right-ios-ltr-Mobile-Safari-linux.png b/core/src/components/popover/test/safe-area/popover.e2e.ts-snapshots/popover-safe-area-right-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..14c84c9b58b
Binary files /dev/null and b/core/src/components/popover/test/safe-area/popover.e2e.ts-snapshots/popover-safe-area-right-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/popover/test/safe-area/popover.e2e.ts-snapshots/popover-safe-area-right-md-ltr-Mobile-Chrome-linux.png b/core/src/components/popover/test/safe-area/popover.e2e.ts-snapshots/popover-safe-area-right-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..6e082daf219
Binary files /dev/null and b/core/src/components/popover/test/safe-area/popover.e2e.ts-snapshots/popover-safe-area-right-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/popover/test/safe-area/popover.e2e.ts-snapshots/popover-safe-area-right-md-ltr-Mobile-Firefox-linux.png b/core/src/components/popover/test/safe-area/popover.e2e.ts-snapshots/popover-safe-area-right-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..abbd6c1406f
Binary files /dev/null and b/core/src/components/popover/test/safe-area/popover.e2e.ts-snapshots/popover-safe-area-right-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/popover/test/safe-area/popover.e2e.ts-snapshots/popover-safe-area-right-md-ltr-Mobile-Safari-linux.png b/core/src/components/popover/test/safe-area/popover.e2e.ts-snapshots/popover-safe-area-right-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..9a73a941665
Binary files /dev/null and b/core/src/components/popover/test/safe-area/popover.e2e.ts-snapshots/popover-safe-area-right-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/popover/utils.ts b/core/src/components/popover/utils.ts
index 794ebb20884..0d11a4dfeef 100644
--- a/core/src/components/popover/utils.ts
+++ b/core/src/components/popover/utils.ts
@@ -32,11 +32,79 @@ export interface PopoverStyles {
   originY: string;
   checkSafeAreaLeft: boolean;
   checkSafeAreaRight: boolean;
+  checkSafeAreaTop: boolean;
+  checkSafeAreaBottom: boolean;
   arrowTop: number;
   arrowLeft: number;
   addPopoverBottomClass: boolean;
+  hideArrow: boolean;
 }
 
+export interface SafeAreaInsets {
+  top: number;
+  bottom: number;
+  left: number;
+  right: number;
+}
+
+/**
+ * Shared per-frame cache for safe-area insets. Avoids creating a temporary
+ * DOM element and forcing a synchronous reflow on every call within the same
+ * frame (e.g., multiple popovers presenting simultaneously). Invalidated
+ * after the next animation frame so values stay fresh across orientation
+ * changes and viewport resizes.
+ */
+let cachedInsets: SafeAreaInsets | null = null;
+let cacheInvalidationScheduled = false;
+
+/**
+ * Resolves the current --ion-safe-area-* CSS custom property values
+ * to actual pixel numbers. A temporary element is needed because
+ * getComputedStyle on :root returns the declared value of custom
+ * properties (e.g. "env(safe-area-inset-top)") rather than a
+ * resolved number. By assigning them to standard padding properties,
+ * the browser resolves the value.
+ *
+ * Results are cached for the current frame to avoid repeated reflows.
+ */
+export const getSafeAreaInsets = (doc: Document): SafeAreaInsets => {
+  if (cachedInsets !== null) {
+    return cachedInsets;
+  }
+
+  if (doc.body === null) {
+    return { top: 0, bottom: 0, left: 0, right: 0 };
+  }
+
+  const el = doc.createElement('div');
+  el.style.cssText =
+    'position:fixed;visibility:hidden;pointer-events:none;top:0;left:0;' +
+    'padding-top:var(--ion-safe-area-top,0px);' +
+    'padding-bottom:var(--ion-safe-area-bottom,0px);' +
+    'padding-left:var(--ion-safe-area-left,0px);' +
+    'padding-right:var(--ion-safe-area-right,0px);';
+  doc.body.appendChild(el);
+  const style = getComputedStyle(el);
+  const insets = {
+    top: parseFloat(style.paddingTop) || 0,
+    bottom: parseFloat(style.paddingBottom) || 0,
+    left: parseFloat(style.paddingLeft) || 0,
+    right: parseFloat(style.paddingRight) || 0,
+  };
+  el.remove();
+
+  cachedInsets = insets;
+  if (!cacheInvalidationScheduled) {
+    cacheInvalidationScheduled = true;
+    raf(() => {
+      cachedInsets = null;
+      cacheInvalidationScheduled = false;
+    });
+  }
+
+  return insets;
+};
+
 /**
  * Returns the dimensions of the popover
  * arrow on `ios` mode. If arrow is disabled
@@ -804,6 +872,8 @@ const calculatePopoverCenterAlign = (
  * Adjusts popover positioning coordinates
  * such that popover does not appear offscreen
  * or overlapping safe area bounds.
+ *
+ * @internal - This is not part of the public API.
  */
 export const calculateWindowAdjustment = (
   side: PositionSide,
@@ -814,7 +884,7 @@ export const calculateWindowAdjustment = (
   bodyHeight: number,
   contentWidth: number,
   contentHeight: number,
-  safeAreaMargin: number,
+  safeArea: SafeAreaInsets,
   contentOriginX: string,
   contentOriginY: string,
   triggerCoordinates?: ReferenceCoordinates,
@@ -831,17 +901,20 @@ export const calculateWindowAdjustment = (
   let originY = contentOriginY;
   let checkSafeAreaLeft = false;
   let checkSafeAreaRight = false;
+  let checkSafeAreaTop = false;
+  let checkSafeAreaBottom = false;
   const triggerTop = triggerCoordinates
     ? triggerCoordinates.top + triggerCoordinates.height
     : bodyHeight / 2 - contentHeight / 2;
   const triggerHeight = triggerCoordinates ? triggerCoordinates.height : 0;
   let addPopoverBottomClass = false;
+  const hideArrow = false;
 
   /**
    * Adjust popover so it does not
    * go off the left of the screen.
    */
-  if (left < bodyPadding + safeAreaMargin) {
+  if (left < bodyPadding + safeArea.left) {
     left = bodyPadding;
     checkSafeAreaLeft = true;
     originX = 'left';
@@ -849,7 +922,7 @@ export const calculateWindowAdjustment = (
      * Adjust popover so it does not
      * go off the right of the screen.
      */
-  } else if (contentWidth + bodyPadding + left + safeAreaMargin > bodyWidth) {
+  } else if (contentWidth + bodyPadding + left + safeArea.right > bodyWidth) {
     checkSafeAreaRight = true;
     left = bodyWidth - contentWidth - bodyPadding;
     originX = 'right';
@@ -857,34 +930,54 @@ export const calculateWindowAdjustment = (
 
   /**
    * Adjust popover so it does not
-   * go off the top of the screen.
+   * go off the bottom of the screen
+   * or overlap the bottom safe area.
    * If popover is on the left or the right of
    * the trigger, then we should not adjust top
    * margins.
    */
-  if (triggerTop + triggerHeight + contentHeight > bodyHeight && (side === 'top' || side === 'bottom')) {
-    if (triggerTop - contentHeight > 0) {
+  if (
+    triggerTop + triggerHeight + contentHeight > bodyHeight - safeArea.bottom &&
+    (side === 'top' || side === 'bottom')
+  ) {
+    /**
+     * Calculate where the popover top would be if flipped
+     * above the trigger. Check whether that position clears
+     * the top safe area with room for bodyPadding.
+     */
+    const idealFlipTop = triggerTop - contentHeight - triggerHeight - (arrowHeight - 1);
+
+    if (idealFlipTop >= safeArea.top + bodyPadding) {
       /**
-       * While we strive to align the popover with the trigger
-       * on smaller screens this is not always possible. As a result,
-       * we adjust the popover up so that it does not hang
-       * off the bottom of the screen. However, we do not want to move
-       * the popover up so much that it goes off the top of the screen.
-       *
-       * We chose 12 here so that the popover position looks a bit nicer as
-       * it is not right up against the edge of the screen.
+       * Popover fits above the trigger without overlapping
+       * the top safe area. Use the ideal position directly —
+       * no safe-area CSS vars needed since it clears both edges.
        */
-      top = Math.max(12, triggerTop - contentHeight - triggerHeight - (arrowHeight - 1));
+      top = idealFlipTop;
       arrowTop = top + contentHeight;
       originY = 'bottom';
       addPopoverBottomClass = true;
-
+    } else {
       /**
-       * If not enough room for popover to appear
-       * above trigger, then cut it off.
+       * Can't flip above the trigger. Constrain the bottom
+       * edge while keeping the top near the trigger. This
+       * creates a scrollable area anchored to the trigger.
        */
-    } else {
       bottom = bodyPadding;
+      checkSafeAreaBottom = true;
+
+      /**
+       * When the trigger is near the bottom of the screen,
+       * the calculated top may be at or past the bottom
+       * constraint, leaving zero visible height. In that
+       * case, pull top up to the top safe area so the
+       * popover fills the available space between safe areas.
+       */
+      const bottomEdge = bodyHeight - safeArea.bottom - bodyPadding;
+      if (top >= bottomEdge) {
+        top = safeArea.top + bodyPadding;
+        checkSafeAreaTop = true;
+      }
     }
   }
 
@@ -896,9 +989,12 @@ export const calculateWindowAdjustment = (
     originY,
     checkSafeAreaLeft,
     checkSafeAreaRight,
+    checkSafeAreaTop,
+    checkSafeAreaBottom,
     arrowTop,
     arrowLeft,
     addPopoverBottomClass,
+    hideArrow,
   };
 };
 
diff --git a/core/src/components/radio-group/radio-group.scss b/core/src/components/radio-group/radio-group.scss
new file mode 100644
index 00000000000..817db37c4ea
--- /dev/null
+++ b/core/src/components/radio-group/radio-group.scss
@@ -0,0 +1,40 @@
+@import "../../themes/ionic.globals";
+
+// Radio Group
+// --------------------------------------------------
+
+ion-radio-group {
+  // Prevents additional pixels from being rendered on top
+  vertical-align: top;
+}
+
+// Radio Group: Top
+// --------------------------------------------------
+
+.radio-group-top {
+  line-height: 1.5;
+}
+
+/**
+ * Error text should only be shown when .ion-invalid is present
+ * on the radio group. Otherwise the helper text should be shown.
+ */
+.radio-group-top .error-text {
+  display: none;
+
+  color: ion-color(danger, base);
+}
+
+.radio-group-top .helper-text {
+  display: block;
+
+  color: $text-color-step-300;
+}
+
+.ion-touched.ion-invalid .radio-group-top .error-text {
+  display: block;
+}
+
+.ion-touched.ion-invalid .radio-group-top .helper-text {
+  display: none;
+}
diff --git a/core/src/components/range/range-interface.ts b/core/src/components/range/range-interface.ts
index 1908bbab172..9cc696d90e3 100644
--- a/core/src/components/range/range-interface.ts
+++ b/core/src/components/range/range-interface.ts
@@ -1,5 +1,7 @@
 export type KnobName = 'A' | 'B' | undefined;
 
+export type KnobPosition = 'lower' | 'upper' | undefined;
+
 export type RangeValue = number | { lower: number; upper: number };
 
 export type PinFormatter = (value: number) => number | string;
diff --git a/core/src/components/range/range.tsx b/core/src/components/range/range.tsx
index e17b4065c28..15169148b18 100644
--- a/core/src/components/range/range.tsx
+++ b/core/src/components/range/range.tsx
@@ -1,5 +1,5 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
-import { Component, Element, Event, Host, Prop, State, Watch, h } from '@stencil/core';
+import { Build, Component, Element, Event, Host, Prop, State, Watch, h } from '@stencil/core';
 import { findClosestIonContent, disableContentScrollY, resetContentScrollY } from '@utils/content';
 import type { Attributes } from '@utils/helpers';
 import { inheritAriaAttributes, clamp, debounceEvent, renderHiddenInput, isSafeNumber } from '@utils/helpers';
@@ -13,6 +13,7 @@ import { roundToMaxDecimalPlaces } from '../../utils/floating-point';
 
 import type {
   KnobName,
+  KnobPosition,
   RangeChangeEventDetail,
   RangeKnobMoveEndEventDetail,
   RangeKnobMoveStartEventDetail,
@@ -30,13 +31,30 @@ import type {
  * @slot start - Content is placed to the left of the range slider in LTR, and to the right in RTL.
  * @slot end - Content is placed to the right of the range slider in LTR, and to the left in RTL.
  *
+ * @part label - The label text describing the range.
  * @part tick - An inactive tick mark.
  * @part tick-active - An active tick mark.
- * @part pin - The counter that appears above a knob.
- * @part knob - The handle that is used to drag the range.
  * @part bar - The inactive part of the bar.
  * @part bar-active - The active part of the bar.
- * @part label - The label text describing the range.
+ * @part knob-handle - The container that wraps the knob and handles drag interactions.
+ * @part knob-handle-a - The container for the knob with the static `A` identity when `dualKnobs` is `true`. This identity does not change, even if the knobs cross and swap which one represents the lower or upper value.
+ * @part knob-handle-b - The container for the knob with the static `B` identity when `dualKnobs` is `true`. This identity does not change, even if the knobs cross and swap which one represents the lower or upper value.
+ * @part knob-handle-lower - The container for the knob whose current `value` is `lower` when `dualKnobs` is `true`. The lower and upper parts swap which knob handle they refer to when the knobs cross.
+ * @part knob-handle-upper - The container for the knob whose current `value` is `upper` when `dualKnobs` is `true`. The lower and upper parts swap which knob handle they refer to when the knobs cross.
+ * @part pin - The value indicator displayed above a knob.
+ * @part pin-a - The value indicator above the knob with the static `A` identity when `dualKnobs` is `true`. This identity does not change, even if the knobs cross and swap which one represents the lower or upper value.
+ * @part pin-b - The value indicator above the knob with the static `B` identity when `dualKnobs` is `true`. This identity does not change, even if the knobs cross and swap which one represents the lower or upper value.
+ * @part pin-lower - The value indicator above the knob whose current `value` is `lower` when `dualKnobs` is `true`. The lower and upper parts swap which pin they refer to when the knobs cross.
+ * @part pin-upper - The value indicator above the knob whose current `value` is `upper` when `dualKnobs` is `true`. The lower and upper parts swap which pin they refer to when the knobs cross.
+ * @part knob - The visual knob element on the range track.
+ * @part knob-a - The visual knob for the static `A` identity when `dualKnobs` is `true`. This identity does not change, even if the knobs cross and swap which one represents the lower or upper value.
+ * @part knob-b - The visual knob for the static `B` identity when `dualKnobs` is `true`. This identity does not change, even if the knobs cross and swap which one represents the lower or upper value.
+ * @part knob-lower - The visual knob whose current `value` is `lower` when `dualKnobs` is `true`. The lower and upper parts swap which knob they refer to when the knobs cross.
+ * @part knob-upper - The visual knob whose current `value` is `upper` when `dualKnobs` is `true`. The lower and upper parts swap which knob they refer to when the knobs cross.
+ * @part activated - Added to the knob-handle, knob, and pin when the knob is active. Only one set has this part at a time when `dualKnobs` is `true`.
+ * @part focused - Added to the knob-handle, knob, and pin that currently has focus. Only one set has this part at a time when `dualKnobs` is `true`.
+ * @part hover - Added to the knob-handle, knob, and pin when the knob has hover. Only one set has this part at a time when `dualKnobs` is `true`.
+ * @part pressed - Added to the knob-handle, knob, and pin that is currently being pressed to drag. Only one set has this part at a time when `dualKnobs` is `true`.
  */
 @Component({
   tag: 'ion-range',
@@ -59,11 +77,27 @@ export class Range implements ComponentInterface {
   private contentEl: HTMLElement | null = null;
   private initialContentScrollY = true;
   private originalIonInput?: EventEmitter<RangeChangeEventDetail>;
+  /**
+   * Used to avoid setting the focused state on click or tap. The focused
+   * state is only set when the focus comes from the keyboard (e.g. Tab).
+   * This is set to true on pointer down (mouse/touch).
+   */
+  private focusFromPointer = false;
+  /**
+   * Observes class changes on the knob handles to keep the activatedKnob
+   * state in sync with the ion-activated class. This is necessary to
+   * determine which knob the user is dragging when using dual knobs and
+   * apply the activated part correctly.
+   */
+  private activatedObserver?: MutationObserver;
 
   @Element() el!: HTMLIonRangeElement;
 
   @State() private ratioA = 0;
   @State() private ratioB = 0;
+  @State() private activatedKnob: KnobName;
+  @State() private focusedKnob: KnobName;
+  @State() private hoveredKnob: KnobName;
   @State() private pressedKnob: KnobName;
 
   /**
@@ -326,6 +360,34 @@ export class Range implements ComponentInterface {
     }
   };
 
+  /**
+   * Observes the knob handles for the ion-activated class and syncs
+   * activatedKnob so the activated part is correctly set on the handle,
+   * knob, and pin.
+   */
+  private setupActivatedObserver = () => {
+    const knobHandleA = this.el.shadowRoot!.querySelector('.range-knob-handle-a');
+    const knobHandleB = this.el.shadowRoot!.querySelector('.range-knob-handle-b');
+
+    const syncActivated = () => {
+      this.activatedKnob = (knobHandleA as HTMLElement)?.classList.contains('ion-activated')
+        ? 'A'
+        : (knobHandleB as HTMLElement)?.classList.contains('ion-activated')
+        ? 'B'
+        : undefined;
+    };
+
+    if (Build.isBrowser && typeof MutationObserver !== 'undefined') {
+      this.activatedObserver = new MutationObserver(syncActivated);
+      this.activatedObserver.observe(this.el.shadowRoot!, {
+        attributes: true,
+        attributeFilter: ['class'],
+        subtree: true,
+      });
+    }
+    syncActivated();
+  };
+
   componentWillLoad() {
     /**
      * If user has custom ID set then we should
@@ -347,6 +409,7 @@ export class Range implements ComponentInterface {
     this.originalIonInput = this.ionInput;
     this.setupGesture();
     this.updateRatio();
+    this.setupActivatedObserver();
     this.didLoad = true;
   }
 
@@ -364,6 +427,7 @@ export class Range implements ComponentInterface {
      */
     if (this.didLoad) {
       this.setupGesture();
+      this.setupActivatedObserver();
     }
 
     const ionContent = findClosestIonContent(this.el);
@@ -375,6 +439,10 @@ export class Range implements ComponentInterface {
       this.gesture.destroy();
       this.gesture = undefined;
     }
+    if (this.activatedObserver) {
+      this.activatedObserver.disconnect();
+      this.activatedObserver = undefined;
+    }
   }
 
   private handleKeyboard = (knob: KnobName, isIncrease: boolean) => {
@@ -469,7 +537,7 @@ export class Range implements ComponentInterface {
      * started dragging the knob.
      *
      * This is necessary to determine which knob the user is dragging,
-     * especially when it's a dual knob.
+     * especially when using dual knobs.
      * Plus, it determines when to apply certain styles.
      *
      * This only needs to be done once since the knob won't change
@@ -498,7 +566,7 @@ export class Range implements ComponentInterface {
      * dragged the knob. They just tapped on the bar.
      *
      * This is necessary to determine which knob the user is changing,
-     * especially when it's a dual knob.
+     * especially when using dual knobs.
      * Plus, it determines when to apply certain styles.
      */
     if (this.pressedKnob === undefined) {
@@ -517,6 +585,7 @@ export class Range implements ComponentInterface {
 
     // update the active knob's position
     this.update(currentX);
+
     /**
      * Reset the pressed knob to undefined since the user
      * may start dragging a different knob in the next gesture event.
@@ -561,8 +630,6 @@ export class Range implements ComponentInterface {
       ratio = 1 - ratio;
     }
     this.pressedKnob = !this.dualKnobs || Math.abs(this.ratioA - ratio) < Math.abs(this.ratioB - ratio) ? 'A' : 'B';
-
-    this.setFocus(this.pressedKnob);
   }
 
   private get valA() {
@@ -594,9 +661,26 @@ export class Range implements ComponentInterface {
   private updateRatio() {
     const value = this.getValue() as any;
     const { min, max } = this;
+
+    /**
+     * For dual knobs, value gives lower/upper but not which is A vs B.
+     * Assign (lowerRatio, upperRatio) to (ratioA, ratioB) in the way that
+     * minimizes change from the current ratios so the knobs don't swap.
+     */
     if (this.dualKnobs) {
-      this.ratioA = valueToRatio(value.lower, min, max);
-      this.ratioB = valueToRatio(value.upper, min, max);
+      const lowerRatio = valueToRatio(value.lower, min, max);
+      const upperRatio = valueToRatio(value.upper, min, max);
+
+      if (
+        Math.abs(this.ratioA - lowerRatio) + Math.abs(this.ratioB - upperRatio) <=
+        Math.abs(this.ratioA - upperRatio) + Math.abs(this.ratioB - lowerRatio)
+      ) {
+        this.ratioA = lowerRatio;
+        this.ratioB = upperRatio;
+      } else {
+        this.ratioA = upperRatio;
+        this.ratioB = lowerRatio;
+      }
     } else {
       this.ratioA = valueToRatio(value, min, max);
     }
@@ -616,20 +700,10 @@ export class Range implements ComponentInterface {
     this.noUpdate = false;
   }
 
-  private setFocus(knob: KnobName) {
-    if (this.el.shadowRoot) {
-      const knobEl = this.el.shadowRoot.querySelector(knob === 'A' ? '.range-knob-a' : '.range-knob-b') as
-        | HTMLElement
-        | undefined;
-      if (knobEl) {
-        knobEl.focus();
-      }
-    }
-  }
-
   private onBlur = () => {
     if (this.hasFocus) {
       this.hasFocus = false;
+      this.focusedKnob = undefined;
       this.ionBlur.emit();
     }
   };
@@ -642,24 +716,20 @@ export class Range implements ComponentInterface {
   };
 
   private onKnobFocus = (knob: KnobName) => {
+    // Clicking focuses the range which is needed for the keyboard,
+    // but we only want to add the ion-focused class when focused via Tab.
+    if (!this.focusFromPointer) {
+      this.focusedKnob = knob;
+    } else {
+      this.focusFromPointer = false;
+      this.focusedKnob = undefined;
+    }
+
+    // If the knob was not already focused, emit the focus event
     if (!this.hasFocus) {
       this.hasFocus = true;
       this.ionFocus.emit();
     }
-
-    // Manually manage ion-focused class for dual knobs
-    if (this.dualKnobs && this.el.shadowRoot) {
-      const knobA = this.el.shadowRoot.querySelector('.range-knob-a');
-      const knobB = this.el.shadowRoot.querySelector('.range-knob-b');
-
-      // Remove ion-focused from both knobs first
-      knobA?.classList.remove('ion-focused');
-      knobB?.classList.remove('ion-focused');
-
-      // Add ion-focused only to the focused knob
-      const focusedKnobEl = knob === 'A' ? knobA : knobB;
-      focusedKnobEl?.classList.add('ion-focused');
-    }
   };
 
   private onKnobBlur = () => {
@@ -672,20 +742,21 @@ export class Range implements ComponentInterface {
       if (!isStillFocusedOnKnob) {
         if (this.hasFocus) {
           this.hasFocus = false;
+          this.focusedKnob = undefined;
           this.ionBlur.emit();
         }
-
-        // Remove ion-focused from both knobs when focus leaves the range
-        if (this.dualKnobs && this.el.shadowRoot) {
-          const knobA = this.el.shadowRoot.querySelector('.range-knob-a');
-          const knobB = this.el.shadowRoot.querySelector('.range-knob-b');
-          knobA?.classList.remove('ion-focused');
-          knobB?.classList.remove('ion-focused');
-        }
       }
     }, 0);
   };
 
+  private onKnobMouseEnter = (knob: KnobName) => {
+    this.hoveredKnob = knob;
+  };
+
+  private onKnobMouseLeave = () => {
+    this.hoveredKnob = undefined;
+  };
+
   /**
    * Returns true if content was passed to the "start" slot
    */
@@ -710,6 +781,9 @@ export class Range implements ComponentInterface {
       max,
       step,
       handleKeyboard,
+      activatedKnob,
+      focusedKnob,
+      hoveredKnob,
       pressedKnob,
       disabled,
       pin,
@@ -792,6 +866,9 @@ export class Range implements ComponentInterface {
       <div
         class="range-slider"
         ref={(rangeEl) => (this.rangeSlider = rangeEl)}
+        onPointerDown={() => {
+          this.focusFromPointer = true;
+        }}
         /**
          * Since the gesture has a threshold, the value
          * won't change until the user has dragged past
@@ -804,6 +881,8 @@ export class Range implements ComponentInterface {
          * we need to listen for the "pointerUp" event.
          */
         onPointerUp={(ev: PointerEvent) => {
+          this.focusFromPointer = false;
+
           /**
            * If the user drags the knob on the web
            * version (does not occur on mobile),
@@ -850,6 +929,11 @@ export class Range implements ComponentInterface {
 
         {renderKnob(rtl, {
           knob: 'A',
+          position: getKnobPosition('A', this.ratioA, this.ratioB, this.dualKnobs),
+          dualKnobs: this.dualKnobs,
+          activated: activatedKnob === 'A',
+          focused: focusedKnob === 'A',
+          hovered: hoveredKnob === 'A',
           pressed: pressedKnob === 'A',
           value: this.valA,
           ratio: this.ratioA,
@@ -862,11 +946,18 @@ export class Range implements ComponentInterface {
           inheritedAttributes,
           onKnobFocus: this.onKnobFocus,
           onKnobBlur: this.onKnobBlur,
+          onKnobMouseEnter: this.onKnobMouseEnter,
+          onKnobMouseLeave: this.onKnobMouseLeave,
         })}
 
         {this.dualKnobs &&
           renderKnob(rtl, {
             knob: 'B',
+            position: getKnobPosition('B', this.ratioA, this.ratioB, this.dualKnobs),
+            dualKnobs: this.dualKnobs,
+            activated: activatedKnob === 'B',
+            focused: focusedKnob === 'B',
+            hovered: hoveredKnob === 'B',
             pressed: pressedKnob === 'B',
             value: this.valB,
             ratio: this.ratioB,
@@ -879,13 +970,15 @@ export class Range implements ComponentInterface {
             inheritedAttributes,
             onKnobFocus: this.onKnobFocus,
             onKnobBlur: this.onKnobBlur,
+            onKnobMouseEnter: this.onKnobMouseEnter,
+            onKnobMouseLeave: this.onKnobMouseLeave,
           })}
       </div>
     );
   }
 
   render() {
-    const { disabled, el, hasLabel, rangeId, pin, pressedKnob, labelPlacement, label } = this;
+    const { disabled, el, hasLabel, rangeId, pin, pressedKnob, labelPlacement, label, dualKnobs, min, max } = this;
 
     const inItem = hostContext('ion-item', el);
 
@@ -908,6 +1001,21 @@ export class Range implements ComponentInterface {
 
     const theme = getIonTheme(this);
 
+    /**
+     * Determine the name and position of the pressed knob to apply
+     * Host classes for styling.
+     */
+    const pressedKnobName = dualKnobs ? pressedKnob?.toLowerCase() : undefined;
+    const pressedKnobPosition =
+      dualKnobs && pressedKnob ? getKnobPosition(pressedKnob, this.ratioA, this.ratioB, dualKnobs) : undefined;
+
+    /**
+     * Determine if any knob is at the min or max value to
+     * apply Host classes for styling.
+     */
+    const valueAtMin = dualKnobs ? this.valA === min || this.valB === min : this.valA === min;
+    const valueAtMax = dualKnobs ? this.valA === max || this.valB === max : this.valA === max;
+
     renderHiddenInput(true, el, this.name, JSON.stringify(this.getValue()), disabled);
 
     return (
@@ -919,11 +1027,16 @@ export class Range implements ComponentInterface {
           [theme]: true,
           'in-item': inItem,
           'range-disabled': disabled,
+          'range-dual-knobs': dualKnobs,
           'range-pressed': pressedKnob !== undefined,
+          [`range-pressed-${pressedKnobName}`]: pressedKnob !== undefined && pressedKnobName !== undefined,
+          [`range-pressed-${pressedKnobPosition}`]: pressedKnob !== undefined && pressedKnobPosition !== undefined,
           'range-has-pin': pin,
           [`range-label-placement-${labelPlacement}`]: true,
           'range-item-start-adjustment': needsStartAdjustment,
           'range-item-end-adjustment': needsEndAdjustment,
+          'range-value-min': valueAtMin,
+          'range-value-max': valueAtMax,
         })}
       >
         <label class="range-wrapper" id="range-label">
@@ -949,29 +1062,41 @@ export class Range implements ComponentInterface {
 
 interface RangeKnob {
   knob: KnobName;
+  position: KnobPosition;
+  dualKnobs: boolean;
   value: number;
   ratio: number;
   min: number;
   max: number;
   disabled: boolean;
   pressed: boolean;
+  focused: boolean;
+  hovered: boolean;
+  activated: boolean;
   pin: boolean;
   pinFormatter: PinFormatter;
   inheritedAttributes: Attributes;
   handleKeyboard: (name: KnobName, isIncrease: boolean) => void;
   onKnobFocus: (knob: KnobName) => void;
   onKnobBlur: () => void;
+  onKnobMouseEnter: (knob: KnobName) => void;
+  onKnobMouseLeave: () => void;
 }
 
 const renderKnob = (
   rtl: boolean,
   {
     knob,
+    position,
+    dualKnobs,
     value,
     ratio,
     min,
     max,
     disabled,
+    activated,
+    focused,
+    hovered,
     pressed,
     pin,
     handleKeyboard,
@@ -979,6 +1104,8 @@ const renderKnob = (
     inheritedAttributes,
     onKnobFocus,
     onKnobBlur,
+    onKnobMouseEnter,
+    onKnobMouseLeave,
   }: RangeKnob
 ) => {
   const start = rtl ? 'right' : 'left';
@@ -1010,16 +1137,32 @@ const renderKnob = (
       }}
       onFocus={() => onKnobFocus(knob)}
       onBlur={onKnobBlur}
+      onMouseEnter={() => onKnobMouseEnter(knob)}
+      onMouseLeave={onKnobMouseLeave}
       class={{
         'range-knob-handle': true,
-        'range-knob-a': knob === 'A',
-        'range-knob-b': knob === 'B',
+        'range-knob-handle-a': knob === 'A',
+        'range-knob-handle-b': knob === 'B',
         'range-knob-pressed': pressed,
         'range-knob-min': value === min,
         'range-knob-max': value === max,
         'ion-activatable': true,
         'ion-focusable': true,
+        'ion-focused': focused,
       }}
+      part={[
+        'knob-handle',
+        dualKnobs && knob === 'A' && 'knob-handle-a',
+        dualKnobs && knob === 'B' && 'knob-handle-b',
+        dualKnobs && position === 'lower' && 'knob-handle-lower',
+        dualKnobs && position === 'upper' && 'knob-handle-upper',
+        pressed && 'pressed',
+        focused && 'focused',
+        hovered && 'hover',
+        activated && 'activated',
+      ]
+        .filter(Boolean)
+        .join(' ')}
       style={knobStyle()}
       role="slider"
       tabindex={disabled ? -1 : 0}
@@ -1031,15 +1174,72 @@ const renderKnob = (
       aria-valuenow={value}
     >
       {pin && (
-        <div class="range-pin" role="presentation" part="pin">
+        <div
+          class="range-pin"
+          role="presentation"
+          part={[
+            'pin',
+            dualKnobs && knob === 'A' && 'pin-a',
+            dualKnobs && knob === 'B' && 'pin-b',
+            dualKnobs && position === 'lower' && 'pin-lower',
+            dualKnobs && position === 'upper' && 'pin-upper',
+            pressed && 'pressed',
+            focused && 'focused',
+            hovered && 'hover',
+            activated && 'activated',
+          ]
+            .filter(Boolean)
+            .join(' ')}
+        >
           {pinFormatter(value)}
         </div>
       )}
-      <div class="range-knob" role="presentation" part="knob" />
+      <div
+        class="range-knob"
+        role="presentation"
+        part={[
+          'knob',
+          dualKnobs && knob === 'A' && 'knob-a',
+          dualKnobs && knob === 'B' && 'knob-b',
+          dualKnobs && position === 'lower' && 'knob-lower',
+          dualKnobs && position === 'upper' && 'knob-upper',
+          pressed && 'pressed',
+          focused && 'focused',
+          hovered && 'hover',
+          activated && 'activated',
+        ]
+          .filter(Boolean)
+          .join(' ')}
+      />
     </div>
   );
 };
 
+/**
+ * Returns whether the given knob is at the lower or upper position based
+ * on current ratios for the given knob.
+ *
+ * When both knobs have the same ratio, we only want one "lower" and one
+ * "upper" position so that the `lower` and `upper` parts are not applied to
+ * the same knob. In that case, we treat knob "A" as the lower position and
+ * knob "B" as the upper position.
+ */
+const getKnobPosition = (knob: 'A' | 'B', ratioA: number, ratioB: number, dualKnobs: boolean): 'lower' | 'upper' => {
+  if (!dualKnobs) {
+    return 'lower';
+  }
+
+  if (ratioA === ratioB) {
+    return knob === 'A' ? 'lower' : 'upper';
+  }
+
+  if (knob === 'A') {
+    return ratioA < ratioB ? 'lower' : 'upper';
+  }
+
+  return ratioB < ratioA ? 'lower' : 'upper';
+};
+
 const ratioToValue = (ratio: number, min: number, max: number, step: number): number => {
   let value = (max - min) * ratio;
 
diff --git a/core/src/components/range/test/basic/range.spec.ts b/core/src/components/range/test/basic/range.spec.ts
index ab53ee05dc2..1501ed00c6e 100644
--- a/core/src/components/range/test/basic/range.spec.ts
+++ b/core/src/components/range/test/basic/range.spec.ts
@@ -18,8 +18,8 @@ describe('range: dual knobs focus management', () => {
     await page.waitForChanges();
 
     // Get the knob elements
-    const knobA = range!.shadowRoot!.querySelector('.range-knob-a') as HTMLElement;
-    const knobB = range!.shadowRoot!.querySelector('.range-knob-b') as HTMLElement;
+    const knobA = range!.shadowRoot!.querySelector('.range-knob-handle-a') as HTMLElement;
+    const knobB = range!.shadowRoot!.querySelector('.range-knob-handle-b') as HTMLElement;
 
     expect(knobA).not.toBeNull();
     expect(knobB).not.toBeNull();
@@ -41,8 +41,8 @@ describe('range: dual knobs focus management', () => {
     const range = page.body.querySelector('ion-range');
     await page.waitForChanges();
 
-    const knobA = range!.shadowRoot!.querySelector('.range-knob-a') as HTMLElement;
-    const knobB = range!.shadowRoot!.querySelector('.range-knob-b') as HTMLElement;
+    const knobA = range!.shadowRoot!.querySelector('.range-knob-handle-a') as HTMLElement;
+    const knobB = range!.shadowRoot!.querySelector('.range-knob-handle-b') as HTMLElement;
 
     // Focus knob A
     knobA.dispatchEvent(new Event('focus'));
@@ -73,8 +73,8 @@ describe('range: dual knobs focus management', () => {
     const range = page.body.querySelector('ion-range');
     await page.waitForChanges();
 
-    const knobA = range!.shadowRoot!.querySelector('.range-knob-a') as HTMLElement;
-    const knobB = range!.shadowRoot!.querySelector('.range-knob-b') as HTMLElement;
+    const knobA = range!.shadowRoot!.querySelector('.range-knob-handle-a') as HTMLElement;
+    const knobB = range!.shadowRoot!.querySelector('.range-knob-handle-b') as HTMLElement;
 
     // Focus knob A
     knobA.dispatchEvent(new Event('focus'));
@@ -112,8 +112,8 @@ describe('range: dual knobs focus management', () => {
       focusEventFiredCount++;
     });
 
-    const knobA = range.shadowRoot!.querySelector('.range-knob-a') as HTMLElement;
-    const knobB = range.shadowRoot!.querySelector('.range-knob-b') as HTMLElement;
+    const knobA = range.shadowRoot!.querySelector('.range-knob-handle-a') as HTMLElement;
+    const knobB = range.shadowRoot!.querySelector('.range-knob-handle-b') as HTMLElement;
 
     // Focus knob A
     knobA.dispatchEvent(new Event('focus'));
@@ -140,7 +140,7 @@ describe('range: dual knobs focus management', () => {
       blurEventFired = true;
     });
 
-    const knobA = range.shadowRoot!.querySelector('.range-knob-a') as HTMLElement;
+    const knobA = range.shadowRoot!.querySelector('.range-knob-handle-a') as HTMLElement;
 
     // Focus and then blur knob A
     knobA.dispatchEvent(new Event('focus'));
@@ -173,8 +173,8 @@ describe('range: dual knobs focus management', () => {
     const beforeButton = page.body.querySelector('#before') as HTMLElement;
     await page.waitForChanges();
 
-    const knobA = range.shadowRoot!.querySelector('.range-knob-a') as HTMLElement;
-    const knobB = range.shadowRoot!.querySelector('.range-knob-b') as HTMLElement;
+    const knobA = range.shadowRoot!.querySelector('.range-knob-handle-a') as HTMLElement;
+    const knobB = range.shadowRoot!.querySelector('.range-knob-handle-b') as HTMLElement;
 
     // Start with focus on element before the range
     beforeButton.focus();
diff --git a/core/src/components/range/test/custom/index.html b/core/src/components/range/test/custom/index.html
index 7af1453aaa9..5c92643de21 100644
--- a/core/src/components/range/test/custom/index.html
+++ b/core/src/components/range/test/custom/index.html
@@ -14,6 +14,20 @@
     <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
   </head>
   <style>
+    h2 {
+      font-size: 12px;
+      font-weight: normal;
+
+      color: #6f7378;
+
+      margin-top: 10px;
+      margin-left: 5px;
+    }
+
+    /**
+     * 1st Custom Range: All Parts
+     * -----------------------------------
+     */
     .range-part::part(bar) {
       background: red;
     }
@@ -51,6 +65,271 @@
     .md.range-part::part(pin)::before {
       background: orange;
     }
+
+    /**
+     * Shared Custom Knob Styles
+     * -----------------------------------
+     */
+    .custom-knobs-range {
+      --color-blue-light: #3b82f6;
+      --color-blue-light-rgb: 59, 130, 246;
+
+      --color-blue: var(--ion-color-primary, #0054e9);
+      --color-blue-rgb: var(--ion-color-primary-rgb, 0, 84, 233);
+
+      --color-blue-dark: #1e3a8a;
+      --color-blue-dark-rgb: 30, 58, 138;
+
+      --color-purple: #8b5cf6;
+      --color-green: #10b981;
+    }
+
+    .custom-knobs-range::part(knob-handle) {
+      --custom-knob-width: 50px;
+      --custom-knob-height: 25px;
+
+      width: var(--custom-knob-width);
+      height: var(--custom-knob-height);
+
+      /* Center vertically */
+      top: calc((var(--height) - var(--custom-knob-height)) / 2);
+
+      /* Center horizontally */
+      margin-inline-start: calc(0px - var(--custom-knob-width) / 2);
+
+      transform-origin: center center;
+    }
+
+    .custom-knobs-range::part(knob) {
+      background: rgba(255, 255, 255, 0.5);
+      backdrop-filter: blur(10px);
+
+      inset: 0;
+
+      width: 100%;
+      height: 100%;
+
+      /* MD scales smaller by default, make iOS scale to match */
+      transform: scale(0.67);
+
+      border-radius: 4px;
+      border: 1px solid rgba(3, 60, 89, 0.5);
+    }
+
+    /* Hover/focus indicator */
+    .custom-knobs-range::part(knob)::before {
+      width: 100%;
+      height: 100%;
+      border-radius: inherit;
+    }
+
+    /* Override the default hover/focus indicator */
+    .custom-knobs-range::part(knob activated)::before,
+    .custom-knobs-range::part(knob hover)::before,
+    .custom-knobs-range::part(knob pressed)::before,
+    .custom-knobs-range::part(knob focused)::before {
+      transform: scale(1);
+    }
+
+    /* Displayed knob values */
+    .custom-knobs-range .knob-value {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      width: 36px;
+      height: 36px;
+
+      border: 1px solid #000;
+      border-radius: 4px;
+    }
+
+    /* iOS offset is larger than MD due to not having a bottom arrow */
+    .ios.custom-knobs-range {
+      --pin-offset: 8px;
+    }
+
+    .md.custom-knobs-range {
+      --pin-offset: 4px;
+    }
+
+    .ios.custom-knobs-range {
+      padding-top: 40px;
+    }
+
+    .ios.custom-knobs-range::part(pin) {
+      border-radius: 50%;
+      background-color: var(--color-blue);
+      color: #fff;
+    }
+
+    /* Move the pin up so it sits above the taller custom knob when pressed/focused */
+    .custom-knobs-range::part(pin pressed),
+    .custom-knobs-range::part(pin focused) {
+      transform: translate3d(0, calc(-100% - (var(--custom-knob-height) / 2) + var(--pin-offset)), 0) scale(1);
+    }
+
+    .custom-knobs-range [slot='start'] {
+      margin-inline-end: 36px;
+    }
+
+    .custom-knobs-range [slot='end'] {
+      margin-inline-start: 36px;
+    }
+
+    /**
+     * 2nd Custom Range: Single Knob
+     * -----------------------------------
+     */
+
+    /* Hovered knob */
+    #single-knob-range::part(knob hover) {
+      background: rgba(var(--color-blue-rgb), 0.5);
+    }
+
+    /* Pressed knob */
+    #single-knob-range::part(knob pressed) {
+      background: var(--color-blue);
+    }
+
+    /* Activated knob */
+    #single-knob-range::part(knob activated) {
+      background: var(--color-purple);
+    }
+
+    /**
+     * 3rd Custom Range: Dual Knobs
+     *     Knobs Lower & Upper
+     * -----------------------------------
+     */
+
+    /* Style the start slot knob value when the lower knob is pressed */
+    #lower-upper-dual-knobs-range.range-pressed-lower [slot='start'] {
+      background: var(--color-blue-light);
+      border-color: var(--color-blue-light);
+      color: #fff;
+    }
+
+    /* Style the end slot knob value when the upper knob is pressed */
+    #lower-upper-dual-knobs-range.range-pressed-upper [slot='end'] {
+      background: var(--color-blue-dark);
+      border-color: var(--color-blue-dark);
+      color: #fff;
+    }
+
+    /* Knob lower */
+    #lower-upper-dual-knobs-range::part(knob-lower) {
+      border-radius: 50% 0 0 50%;
+    }
+
+    /* Knob upper */
+    #lower-upper-dual-knobs-range::part(knob-upper) {
+      border-radius: 0 50% 50% 0;
+    }
+
+    /* Hovered knob lower */
+    #lower-upper-dual-knobs-range::part(knob-lower hover) {
+      background: rgba(var(--color-blue-light-rgb), 0.5);
+    }
+
+    /* Pressed knob lower */
+    #lower-upper-dual-knobs-range::part(knob-lower pressed) {
+      background: var(--color-blue-light);
+    }
+
+    /* Activated knob lower */
+    #lower-upper-dual-knobs-range::part(knob-lower activated) {
+      background: var(--color-green);
+    }
+
+    /* Hovered knob upper */
+    #lower-upper-dual-knobs-range::part(knob-upper hover) {
+      background: rgba(var(--color-blue-dark-rgb), 0.5);
+    }
+
+    /* Pressed knob upper */
+    #lower-upper-dual-knobs-range::part(knob-upper pressed) {
+      background: var(--color-blue-dark);
+    }
+
+    /* Activated knob upper */
+    #lower-upper-dual-knobs-range::part(knob-upper activated) {
+      background: var(--color-purple);
+    }
+
+    /* Pin lower */
+    #lower-upper-dual-knobs-range.range-dual-knobs::part(pin-lower),
+    #lower-upper-dual-knobs-range.range-dual-knobs::part(pin-lower):before {
+      background: var(--color-blue-light);
+    }
+
+    /* Pin upper */
+    #lower-upper-dual-knobs-range.range-dual-knobs::part(pin-upper),
+    #lower-upper-dual-knobs-range.range-dual-knobs::part(pin-upper):before {
+      background: var(--color-blue-dark);
+    }
+
+    /**
+     * 4th Custom Range: Dual Knobs
+     *       Knobs A & B
+     * -----------------------------------
+     */
+
+    /* Style the start slot knob value when the A knob is pressed */
+    #a-b-dual-knobs-range.range-pressed-a [slot='start'] {
+      background: var(--color-blue-light);
+      border-color: var(--color-blue-light);
+      color: #fff;
+    }
+
+    /* Style the end slot knob value when the B knob is pressed */
+    #a-b-dual-knobs-range.range-pressed-b [slot='end'] {
+      background: var(--color-blue-dark);
+      border-color: var(--color-blue-dark);
+      color: #fff;
+    }
+
+    /* Hovered knob A */
+    #a-b-dual-knobs-range::part(knob-a hover) {
+      background: rgba(var(--color-blue-light-rgb), 0.5);
+    }
+
+    /* Pressed knob A */
+    #a-b-dual-knobs-range::part(knob-a pressed) {
+      background: var(--color-blue-light);
+    }
+
+    /* Activated knob A */
+    #a-b-dual-knobs-range::part(knob-a activated) {
+      background: var(--color-green);
+    }
+
+    /* Hovered knob B */
+    #a-b-dual-knobs-range::part(knob-b hover) {
+      background: rgba(var(--color-blue-dark-rgb), 0.5);
+    }
+
+    /* Pressed knob B */
+    #a-b-dual-knobs-range::part(knob-b pressed) {
+      background: var(--color-blue-dark);
+    }
+
+    /* Activated knob B */
+    #a-b-dual-knobs-range::part(knob-b activated) {
+      background: var(--color-purple);
+    }
+
+    /* Pin A */
+    #a-b-dual-knobs-range.range-dual-knobs::part(pin-a),
+    #a-b-dual-knobs-range.range-dual-knobs::part(pin-a):before {
+      background: var(--color-blue-light);
+    }
+
+    /* Pin B */
+    #a-b-dual-knobs-range.range-dual-knobs::part(pin-b),
+    #a-b-dual-knobs-range.range-dual-knobs::part(pin-b):before {
+      background: var(--color-blue-dark);
+    }
   </style>
   <body>
     <ion-app>
@@ -61,6 +340,8 @@
       </ion-header>
 
       <ion-content class="ion-padding">
+        <!-- 1st Custom Range -->
+        <h2>Custom Range</h2>
         <ion-range
           class="range-part"
           min="-200"
@@ -71,6 +352,55 @@
           dual-knobs="true"
           aria-label="Custom Range"
         ></ion-range>
+
+        <!-- 2nd Custom Range: Single Knob -->
+        <h2>Custom Range: Single Knob</h2>
+        <ion-range
+          id="single-knob-range"
+          class="custom-knobs-range"
+          step="5"
+          snaps="true"
+          pin="true"
+          value="50"
+          aria-label="Custom Range"
+        >
+          <span slot="start">
+            <ion-icon name="volume-off" size="large" color="primary"></ion-icon>
+          </span>
+          <span slot="end">
+            <ion-icon name="volume-high" size="large" color="primary"></ion-icon>
+          </span>
+        </ion-range>
+
+        <!-- 3rd Custom Range: Dual Knobs with Knob Lower & Upper -->
+        <h2>Custom Range: Dual Knobs with Knob Lower & Upper</h2>
+        <ion-range
+          id="lower-upper-dual-knobs-range"
+          class="custom-knobs-range range-lower-upper-knobs"
+          step="5"
+          snaps="true"
+          pin="true"
+          dual-knobs="true"
+          aria-label="Custom Lower & Upper Knobs Range"
+        >
+          <div slot="start" class="knob-value"></div>
+          <div slot="end" class="knob-value"></div>
+        </ion-range>
+
+        <!-- 4th Custom Range: Dual Knobs with Knob A & B -->
+        <h2>Custom Range: Dual Knobs with Knob A & B</h2>
+        <ion-range
+          id="a-b-dual-knobs-range"
+          class="custom-knobs-range"
+          step="5"
+          snaps="true"
+          pin="true"
+          dual-knobs="true"
+          aria-label="Custom Dual Knobs Range"
+        >
+          <div slot="start" class="knob-value"></div>
+          <div slot="end" class="knob-value"></div>
+        </ion-range>
       </ion-content>
     </ion-app>
 
@@ -80,6 +410,36 @@
         lower: '-100',
         upper: '100',
       };
+
+      const lowerUpperKnobs = document.getElementById('lower-upper-dual-knobs-range');
+      lowerUpperKnobs.value = {
+        lower: '40',
+        upper: '60',
+      };
+
+      const abDualKnobs = document.getElementById('a-b-dual-knobs-range');
+      abDualKnobs.value = {
+        lower: '25',
+        upper: '75',
+      };
+
+      function updateDisplayedKnobValues() {
+        document.querySelector('#lower-upper-dual-knobs-range [slot="start"]').textContent =
+          lowerUpperKnobs.value.lower;
+        document.querySelector('#lower-upper-dual-knobs-range [slot="end"]').textContent = lowerUpperKnobs.value.upper;
+        document.querySelector('#a-b-dual-knobs-range [slot="start"]').textContent = abDualKnobs.value.lower;
+        document.querySelector('#a-b-dual-knobs-range [slot="end"]').textContent = abDualKnobs.value.upper;
+      }
+
+      updateDisplayedKnobValues();
+
+      lowerUpperKnobs.addEventListener('ionChange', () => {
+        updateDisplayedKnobValues();
+      });
+
+      abDualKnobs.addEventListener('ionChange', () => {
+        updateDisplayedKnobValues();
+      });
     </script>
   </body>
 </html>
diff --git a/core/src/components/range/test/custom/range.e2e.ts b/core/src/components/range/test/custom/range.e2e.ts
index a474187abe8..de797bc78b4 100644
--- a/core/src/components/range/test/custom/range.e2e.ts
+++ b/core/src/components/range/test/custom/range.e2e.ts
@@ -1,13 +1,425 @@
 import { expect } from '@playwright/test';
-import { configs, test } from '@utils/test/playwright';
+import { configs, dragElementBy, test } from '@utils/test/playwright';
 
-configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
-  test.describe(title('range: customization'), () => {
-    test('should be customizable', async ({ page }) => {
-      await page.goto(`/src/components/range/test/custom`, config);
+/**
+ * This behavior does not vary across modes/directions
+ */
+configs({ directions: ['ltr'], modes: ['md'] }).forEach(({ title, config }) => {
+  test.describe(title('range: custom'), () => {
+    test.describe(title('CSS shadow parts'), () => {
+      test('should be able to customize label part', async ({ page }) => {
+        await page.setContent(
+          `
+          <style>
+            ion-range::part(label) {
+              color: red;
+            }
+          </style>
 
-      const range = page.locator('ion-range');
-      await expect(range).toHaveScreenshot(screenshot(`range-custom`));
+          <ion-range label="Label" value="50"></ion-range>
+        `,
+          config
+        );
+
+        const range = page.locator('ion-range');
+
+        const labelColor = await range.evaluate((el) => {
+          const shadowRoot = el.shadowRoot;
+          const label = shadowRoot?.querySelector('.label-text-wrapper');
+          return label ? window.getComputedStyle(label).color : '';
+        });
+        expect(labelColor).toBe('rgb(255, 0, 0)');
+      });
+
+      test('should be able to customize bar parts', async ({ page }) => {
+        await page.setContent(
+          `
+          <style>
+            ion-range::part(bar) {
+              background-color: red;
+            }
+            ion-range::part(bar-active) {
+              background-color: green;
+            }
+          </style>
+
+          <ion-range label="Label" value="50"></ion-range>
+        `,
+          config
+        );
+
+        const range = page.locator('ion-range');
+
+        const barBackgroundColor = await range.evaluate((el) => {
+          const shadowRoot = el.shadowRoot;
+          const bar = shadowRoot?.querySelector('.range-bar');
+          return bar ? window.getComputedStyle(bar).backgroundColor : '';
+        });
+        expect(barBackgroundColor).toBe('rgb(255, 0, 0)');
+
+        const activeBarBackgroundColor = await range.evaluate((el) => {
+          const shadowRoot = el.shadowRoot;
+          const activeBar = shadowRoot?.querySelector('.range-bar-active');
+          return activeBar ? window.getComputedStyle(activeBar).backgroundColor : '';
+        });
+        expect(activeBarBackgroundColor).toBe('rgb(0, 128, 0)');
+      });
+
+      test('should be able to customize pin parts', async ({ page }) => {
+        await page.setContent(
+          `
+          <style>
+            ion-range::part(pin) {
+              background-color: red;
+            }
+            ion-range::part(pin)::before {
+              background-color: green;
+            }
+          </style>
+
+          <ion-range label="Label" value="50" pin="true"></ion-range>
+        `,
+          config
+        );
+
+        const range = page.locator('ion-range');
+
+        const pinBackgroundColor = await range.evaluate((el) => {
+          const shadowRoot = el.shadowRoot;
+          const pin = shadowRoot?.querySelector('.range-pin');
+          return pin ? window.getComputedStyle(pin).backgroundColor : '';
+        });
+        expect(pinBackgroundColor).toBe('rgb(255, 0, 0)');
+
+        const pinBeforeBackgroundColor = await range.evaluate((el) => {
+          const shadowRoot = el.shadowRoot;
+          const pin = shadowRoot?.querySelector('.range-pin');
+          if (!pin) return '';
+          return window.getComputedStyle(pin, '::before').backgroundColor;
+        });
+        expect(pinBeforeBackgroundColor).toBe('rgb(0, 128, 0)');
+      });
+
+      test('should be able to customize tick parts', async ({ page }) => {
+        await page.setContent(
+          `
+          <style>
+            ion-range::part(tick) {
+              background-color: red;
+            }
+            ion-range::part(tick-active) {
+              background-color: green;
+            }
+          </style>
+
+          <ion-range label="Label" value="50" snaps="true" ticks="true"></ion-range>
+        `,
+          config
+        );
+
+        const range = page.locator('ion-range');
+
+        const tickBackgroundColor = await range.evaluate((el) => {
+          const shadowRoot = el.shadowRoot;
+          const tick = shadowRoot?.querySelector('.range-tick:not(.range-tick-active)');
+          return tick ? window.getComputedStyle(tick).backgroundColor : '';
+        });
+        expect(tickBackgroundColor).toBe('rgb(255, 0, 0)');
+
+        const activeTickBackgroundColor = await range.evaluate((el) => {
+          const shadowRoot = el.shadowRoot;
+          const activeTick = shadowRoot?.querySelector('.range-tick-active');
+          return activeTick ? window.getComputedStyle(activeTick).backgroundColor : '';
+        });
+        expect(activeTickBackgroundColor).toBe('rgb(0, 128, 0)');
+      });
+
+      test('should be able to customize knob parts', async ({ page }) => {
+        await page.setContent(
+          `
+          <style>
+            ion-range::part(knob-handle) {
+              background-color: red;
+            }
+            ion-range::part(knob) {
+              background-color: green;
+            }
+          </style>
+
+          <ion-range label="Label" value="50"></ion-range>
+        `,
+          config
+        );
+
+        const range = page.locator('ion-range');
+
+        const knobHandleBackgroundColor = await range.evaluate((el) => {
+          const shadowRoot = el.shadowRoot;
+          const knobHandle = shadowRoot?.querySelector('.range-knob-handle');
+          return knobHandle ? window.getComputedStyle(knobHandle).backgroundColor : '';
+        });
+        expect(knobHandleBackgroundColor).toBe('rgb(255, 0, 0)');
+
+        const knobBackgroundColor = await range.evaluate((el) => {
+          const shadowRoot = el.shadowRoot;
+          const knob = shadowRoot?.querySelector('.range-knob');
+          return knob ? window.getComputedStyle(knob).backgroundColor : '';
+        });
+        expect(knobBackgroundColor).toBe('rgb(0, 128, 0)');
+      });
+
+      test('should be able to customize dual knob a & b parts', async ({ page }) => {
+        await page.setContent(
+          `
+          <style>
+            ion-range::part(knob-handle-a) {
+              background-color: red;
+            }
+            ion-range::part(knob-handle-b) {
+              background-color: green;
+            }
+            ion-range::part(knob-a) {
+              background-color: blue;
+            }
+            ion-range::part(knob-b) {
+              background-color: yellow;
+            }
+            ion-range::part(pin-a) {
+              background-color: orange;
+            }
+            ion-range::part(pin-b) {
+              background-color: purple;
+            }
+          </style>
+
+          <ion-range label="Label" dual-knobs="true" pin="true"></ion-range>
+        `,
+          config
+        );
+
+        const range = page.locator('ion-range');
+        await range.evaluate((el) => {
+          (el as any).value = {
+            lower: 25,
+            upper: 75,
+          };
+        });
+        await page.waitForChanges();
+
+        const knobHandleABackgroundColor = await range.evaluate((el) => {
+          const shadowRoot = el.shadowRoot;
+          const knobHandleA = shadowRoot?.querySelector('.range-knob-handle-a');
+          return knobHandleA ? window.getComputedStyle(knobHandleA).backgroundColor : '';
+        });
+        expect(knobHandleABackgroundColor).toBe('rgb(255, 0, 0)');
+
+        const knobHandleBBackgroundColor = await range.evaluate((el) => {
+          const shadowRoot = el.shadowRoot;
+          const knobHandleB = shadowRoot?.querySelector('.range-knob-handle-b');
+          return knobHandleB ? window.getComputedStyle(knobHandleB).backgroundColor : '';
+        });
+        expect(knobHandleBBackgroundColor).toBe('rgb(0, 128, 0)');
+
+        // We query for the knob inside knob-handle-a because the knob
+        // does not get a class for the knob name, only a part.
+        const knobABackgroundColor = await range.evaluate((el) => {
+          const shadowRoot = el.shadowRoot;
+          const knobA = shadowRoot?.querySelector('.range-knob-handle-a .range-knob');
+          return knobA ? window.getComputedStyle(knobA).backgroundColor : '';
+        });
+        expect(knobABackgroundColor).toBe('rgb(0, 0, 255)');
+
+        // We query for the knob inside knob-handle-b because the knob
+        // does not get a class for the knob name, only a part.
+        const knobBBackgroundColor = await range.evaluate((el) => {
+          const shadowRoot = el.shadowRoot;
+          const knobB = shadowRoot?.querySelector('.range-knob-handle-b .range-knob');
+          return knobB ? window.getComputedStyle(knobB).backgroundColor : '';
+        });
+        expect(knobBBackgroundColor).toBe('rgb(255, 255, 0)');
+
+        // We query for the pin inside knob-handle-a because the pin
+        // does not get a class for the knob name, only a part.
+        const pinABackgroundColor = await range.evaluate((el) => {
+          const shadowRoot = el.shadowRoot;
+          const pinA = shadowRoot?.querySelector('.range-knob-handle-a .range-pin');
+          return pinA ? window.getComputedStyle(pinA).backgroundColor : '';
+        });
+        expect(pinABackgroundColor).toBe('rgb(255, 165, 0)');
+
+        // We query for the pin inside knob-handle-b because the pin
+        // does not get a class for the knob name, only a part.
+        const pinBBackgroundColor = await range.evaluate((el) => {
+          const shadowRoot = el.shadowRoot;
+          const pinB = shadowRoot?.querySelector('.range-knob-handle-b .range-pin');
+          return pinB ? window.getComputedStyle(pinB).backgroundColor : '';
+        });
+        expect(pinBBackgroundColor).toBe('rgb(128, 0, 128)');
+      });
+
+      test('should be able to customize dual knob lower & upper parts', async ({ page }) => {
+        await page.setContent(
+          `
+          <style>
+            ion-range::part(knob-handle-lower) {
+              background-color: red;
+            }
+            ion-range::part(knob-handle-upper) {
+              background-color: green;
+            }
+            ion-range::part(knob-lower) {
+              background-color: blue;
+            }
+            ion-range::part(knob-upper) {
+              background-color: yellow;
+            }
+            ion-range::part(pin-lower) {
+              background-color: orange;
+            }
+            ion-range::part(pin-upper) {
+              background-color: purple;
+            }
+          </style>
+
+          <ion-range label="Label" dual-knobs="true" pin="true"></ion-range>
+        `,
+          config
+        );
+
+        const range = page.locator('ion-range');
+        await range.evaluate((el) => {
+          (el as any).value = {
+            lower: 25,
+            upper: 75,
+          };
+        });
+        await page.waitForChanges();
+
+        // Lower & upper are added as shadow parts but not CSS classes, so we
+        // have to query by their shadow parts.
+        const knobHandleLowerBackgroundColor = await range.evaluate((el) => {
+          const shadowRoot = el.shadowRoot;
+          const knobHandleLower = shadowRoot?.querySelector('[part~="knob-handle-lower"]');
+          return knobHandleLower ? window.getComputedStyle(knobHandleLower).backgroundColor : '';
+        });
+        expect(knobHandleLowerBackgroundColor).toBe('rgb(255, 0, 0)');
+
+        const knobHandleUpperBackgroundColor = await range.evaluate((el) => {
+          const shadowRoot = el.shadowRoot;
+          const knobHandleUpper = shadowRoot?.querySelector('[part~="knob-handle-upper"]');
+          return knobHandleUpper ? window.getComputedStyle(knobHandleUpper).backgroundColor : '';
+        });
+        expect(knobHandleUpperBackgroundColor).toBe('rgb(0, 128, 0)');
+
+        const knobLowerBackgroundColor = await range.evaluate((el) => {
+          const knobLower = el.shadowRoot?.querySelector('[part~="knob-lower"]');
+          return knobLower ? window.getComputedStyle(knobLower).backgroundColor : '';
+        });
+        expect(knobLowerBackgroundColor).toBe('rgb(0, 0, 255)');
+
+        const knobUpperBackgroundColor = await range.evaluate((el) => {
+          const knobUpper = el.shadowRoot?.querySelector('[part~="knob-upper"]');
+          return knobUpper ? window.getComputedStyle(knobUpper).backgroundColor : '';
+        });
+        expect(knobUpperBackgroundColor).toBe('rgb(255, 255, 0)');
+
+        const pinLowerBackgroundColor = await range.evaluate((el) => {
+          const pinLower = el.shadowRoot?.querySelector('[part~="pin-lower"]');
+          return pinLower ? window.getComputedStyle(pinLower).backgroundColor : '';
+        });
+        expect(pinLowerBackgroundColor).toBe('rgb(255, 165, 0)');
+
+        const pinUpperBackgroundColor = await range.evaluate((el) => {
+          const pinUpper = el.shadowRoot?.querySelector('[part~="pin-upper"]');
+          return pinUpper ? window.getComputedStyle(pinUpper).backgroundColor : '';
+        });
+        expect(pinUpperBackgroundColor).toBe('rgb(128, 0, 128)');
+      });
+
+      test('should keep a & b parts on same elements and swap lower & upper parts when values swap', async ({
+        page,
+      }) => {
+        await page.setContent(
+          `
+          <ion-range label="Label" dual-knobs="true" pin="true"></ion-range>
+        `,
+          config
+        );
+
+        const range = page.locator('ion-range');
+        await range.evaluate((el) => {
+          (el as any).value = { lower: 25, upper: 75 };
+        });
+        await page.waitForChanges();
+
+        // On load: query each a & b part to check lower & upper
+        const handleAHasLowerOnLoad = await range.evaluate((el) => {
+          const handleA = el.shadowRoot?.querySelector('[part~="knob-handle-a"]');
+          const part = handleA?.getAttribute('part') ?? '';
+          return part.includes('knob-handle-lower');
+        });
+        const handleAHasUpperOnLoad = await range.evaluate((el) => {
+          const handleA = el.shadowRoot?.querySelector('[part~="knob-handle-a"]');
+          const part = handleA?.getAttribute('part') ?? '';
+          return part.includes('knob-handle-upper');
+        });
+        const handleBHasLowerOnLoad = await range.evaluate((el) => {
+          const handleB = el.shadowRoot?.querySelector('[part~="knob-handle-b"]');
+          const part = handleB?.getAttribute('part') ?? '';
+          return part.includes('knob-handle-lower');
+        });
+        const handleBHasUpperOnLoad = await range.evaluate((el) => {
+          const handleB = el.shadowRoot?.querySelector('[part~="knob-handle-b"]');
+          const part = handleB?.getAttribute('part') ?? '';
+          return part.includes('knob-handle-upper');
+        });
+
+        // The lower knob is assigned to the a part and the
+        // upper knob is assigned to the b part on load
+        expect(handleAHasLowerOnLoad).toBe(true);
+        expect(handleAHasUpperOnLoad).toBe(false);
+        expect(handleBHasLowerOnLoad).toBe(false);
+        expect(handleBHasUpperOnLoad).toBe(true);
+
+        // Drag the lower knob right so the two knobs swap positions
+        const box = await range.boundingBox();
+        expect(box).not.toBeNull();
+        const startX = box!.x + box!.width * 0.25;
+        const startY = box!.y + box!.height / 2;
+        const dragDistance = Math.round(box!.width * 0.55);
+        await dragElementBy(range, page, dragDistance, 0, startX, startY);
+        await page.waitForChanges();
+
+        // After swap: the same elements have parts A and B
+        // but lower and upper have swapped positions
+        const handleAHasLowerAfterSwap = await range.evaluate((el) => {
+          const handleA = el.shadowRoot?.querySelector('[part~="knob-handle-a"]');
+          const part = handleA?.getAttribute('part') ?? '';
+          return part.includes('knob-handle-lower');
+        });
+        const handleAHasUpperAfterSwap = await range.evaluate((el) => {
+          const handleA = el.shadowRoot?.querySelector('[part~="knob-handle-a"]');
+          const part = handleA?.getAttribute('part') ?? '';
+          return part.includes('knob-handle-upper');
+        });
+        const handleBHasLowerAfterSwap = await range.evaluate((el) => {
+          const handleB = el.shadowRoot?.querySelector('[part~="knob-handle-b"]');
+          const part = handleB?.getAttribute('part') ?? '';
+          return part.includes('knob-handle-lower');
+        });
+        const handleBHasUpperAfterSwap = await range.evaluate((el) => {
+          const handleB = el.shadowRoot?.querySelector('[part~="knob-handle-b"]');
+          const part = handleB?.getAttribute('part') ?? '';
+          return part.includes('knob-handle-upper');
+        });
+
+        // After swap: the lower knob is assigned to the b part and the
+        // upper knob is assigned to the a part
+        expect(handleAHasLowerAfterSwap).toBe(false);
+        expect(handleAHasUpperAfterSwap).toBe(true);
+        expect(handleBHasLowerAfterSwap).toBe(true);
+        expect(handleBHasUpperAfterSwap).toBe(false);
+      });
     });
   });
 });
diff --git a/core/src/components/range/test/custom/range.e2e.ts-snapshots/range-custom-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/range/test/custom/range.e2e.ts-snapshots/range-custom-ios-ltr-Mobile-Chrome-linux.png
deleted file mode 100644
index c04a8de175c..00000000000
Binary files a/core/src/components/range/test/custom/range.e2e.ts-snapshots/range-custom-ios-ltr-Mobile-Chrome-linux.png and /dev/null differ
diff --git a/core/src/components/range/test/custom/range.e2e.ts-snapshots/range-custom-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/range/test/custom/range.e2e.ts-snapshots/range-custom-ios-ltr-Mobile-Firefox-linux.png
deleted file mode 100644
index c453df13373..00000000000
Binary files a/core/src/components/range/test/custom/range.e2e.ts-snapshots/range-custom-ios-ltr-Mobile-Firefox-linux.png and /dev/null differ
diff --git a/core/src/components/range/test/custom/range.e2e.ts-snapshots/range-custom-ios-ltr-Mobile-Safari-linux.png b/core/src/components/range/test/custom/range.e2e.ts-snapshots/range-custom-ios-ltr-Mobile-Safari-linux.png
deleted file mode 100644
index a34eb31ad61..00000000000
Binary files a/core/src/components/range/test/custom/range.e2e.ts-snapshots/range-custom-ios-ltr-Mobile-Safari-linux.png and /dev/null differ
diff --git a/core/src/components/range/test/custom/range.e2e.ts-snapshots/range-custom-md-ltr-Mobile-Chrome-linux.png b/core/src/components/range/test/custom/range.e2e.ts-snapshots/range-custom-md-ltr-Mobile-Chrome-linux.png
deleted file mode 100644
index 84d461cc8c6..00000000000
Binary files a/core/src/components/range/test/custom/range.e2e.ts-snapshots/range-custom-md-ltr-Mobile-Chrome-linux.png and /dev/null differ
diff --git a/core/src/components/range/test/custom/range.e2e.ts-snapshots/range-custom-md-ltr-Mobile-Firefox-linux.png b/core/src/components/range/test/custom/range.e2e.ts-snapshots/range-custom-md-ltr-Mobile-Firefox-linux.png
deleted file mode 100644
index 558bc0a7e76..00000000000
Binary files a/core/src/components/range/test/custom/range.e2e.ts-snapshots/range-custom-md-ltr-Mobile-Firefox-linux.png and /dev/null differ
diff --git a/core/src/components/range/test/custom/range.e2e.ts-snapshots/range-custom-md-ltr-Mobile-Safari-linux.png b/core/src/components/range/test/custom/range.e2e.ts-snapshots/range-custom-md-ltr-Mobile-Safari-linux.png
deleted file mode 100644
index 3961620b727..00000000000
Binary files a/core/src/components/range/test/custom/range.e2e.ts-snapshots/range-custom-md-ltr-Mobile-Safari-linux.png and /dev/null differ
diff --git a/core/src/components/range/test/range.spec.ts b/core/src/components/range/test/range.spec.ts
index 0d83082d399..3a49ac99020 100644
--- a/core/src/components/range/test/range.spec.ts
+++ b/core/src/components/range/test/range.spec.ts
@@ -3,9 +3,12 @@ import { newSpecPage } from '@stencil/core/testing';
 import { Item } from '../../item/item';
 import { Range } from '../range';
 
+const waitForEvent = (el: HTMLElement, eventName: string) =>
+  new Promise<void>((resolve) => el.addEventListener(eventName, () => resolve(), { once: true }));
+
 let sharedRange: Range;
 
-describe('Range', () => {
+describe('range: values', () => {
   beforeEach(() => {
     sharedRange = new Range();
   });
@@ -87,7 +90,7 @@ describe('Range', () => {
   });
 });
 
-describe('range id', () => {
+describe('range: id', () => {
   it('should render custom id if passed', async () => {
     const page = await newSpecPage({
       components: [Range],
@@ -234,22 +237,632 @@ describe('range: item adjustments', () => {
     expect(range.classList.contains('range-item-start-adjustment')).toBe(false);
     expect(range.classList.contains('range-item-end-adjustment')).toBe(false);
   });
+});
 
-  describe('shadow parts', () => {
-    it('should have shadow parts', async () => {
+describe('range: css classes', () => {
+  describe('value state classes', () => {
+    it('should apply range-value-min class when value is at min', async () => {
       const page = await newSpecPage({
         components: [Range],
-        html: `<ion-range pin="true" snaps="true" value="50" label="Label"></ion-range>`,
+        html: `<ion-range min="0" max="100" value="0"></ion-range>`,
       });
+
       const range = page.body.querySelector('ion-range')!;
 
-      expect(range).toHaveShadowPart('label');
-      expect(range).toHaveShadowPart('pin');
-      expect(range).toHaveShadowPart('knob');
+      expect(range.classList.contains('range-value-min')).toBe(true);
+      expect(range.classList.contains('range-value-max')).toBe(false);
+    });
+
+    it('should apply range-value-max class when value is at max', async () => {
+      const page = await newSpecPage({
+        components: [Range],
+        html: `<ion-range min="0" max="100" value="100"></ion-range>`,
+      });
+
+      const range = page.body.querySelector('ion-range')!;
+
+      expect(range.classList.contains('range-value-max')).toBe(true);
+      expect(range.classList.contains('range-value-min')).toBe(false);
+    });
+
+    it('should not apply range-value-min or range-value-max classes when value is in the middle', async () => {
+      const page = await newSpecPage({
+        components: [Range],
+        html: `<ion-range min="0" max="100" value="50"></ion-range>`,
+      });
+
+      const range = page.body.querySelector('ion-range')!;
+
+      expect(range.classList.contains('range-value-min')).toBe(false);
+      expect(range.classList.contains('range-value-max')).toBe(false);
+    });
+
+    it('should apply range-value-min class when lower knob is at min in dual knobs', async () => {
+      const page = await newSpecPage({
+        components: [Range],
+        html: `<ion-range dual-knobs="true" min="0" max="100"></ion-range>`,
+      });
+
+      const range = page.body.querySelector('ion-range')!;
+      range.value = { lower: 0, upper: 50 };
+
+      await page.waitForChanges();
+
+      expect(range.classList.contains('range-value-min')).toBe(true);
+      expect(range.classList.contains('range-value-max')).toBe(false);
+    });
+
+    it('should apply range-value-max class when upper knob is at max in dual knobs', async () => {
+      const page = await newSpecPage({
+        components: [Range],
+        html: `<ion-range dual-knobs="true" min="0" max="100"></ion-range>`,
+      });
+
+      const range = page.body.querySelector('ion-range')!;
+      range.value = { lower: 50, upper: 100 };
+
+      await page.waitForChanges();
+
+      expect(range.classList.contains('range-value-max')).toBe(true);
+      expect(range.classList.contains('range-value-min')).toBe(false);
+    });
+
+    it('should apply range-value-min and range-value-max classes for dual knobs when both are at boundaries', async () => {
+      const page = await newSpecPage({
+        components: [Range],
+        html: `<ion-range dual-knobs="true" min="0" max="100"></ion-range>`,
+      });
+
+      const range = page.body.querySelector('ion-range')!;
+      range.value = { lower: 0, upper: 100 };
+
+      await page.waitForChanges();
+
+      expect(range.classList.contains('range-value-min')).toBe(true);
+      expect(range.classList.contains('range-value-max')).toBe(true);
+    });
+
+    it('should not apply range-value-min or range-value-max classes for dual knobs when neither is at boundaries', async () => {
+      const page = await newSpecPage({
+        components: [Range],
+        html: `<ion-range dual-knobs="true" min="0" max="100"></ion-range>`,
+      });
+
+      const range = page.body.querySelector('ion-range')!;
+      range.value = { lower: 25, upper: 75 };
+
+      await page.waitForChanges();
+
+      expect(range.classList.contains('range-value-min')).toBe(false);
+      expect(range.classList.contains('range-value-max')).toBe(false);
+    });
+  });
+
+  describe('boolean property classes', () => {
+    it('should not have any boolean classes by default', async () => {
+      const page = await newSpecPage({
+        components: [Range],
+        html: `<ion-range value="50" label="Label"></ion-range>`,
+      });
+      const range = page.body.querySelector('ion-range')!;
+      expect(range.classList.contains('range-disabled')).toBe(false);
+      expect(range.classList.contains('range-dual-knobs')).toBe(false);
+      expect(range.classList.contains('range-has-pin')).toBe(false);
+    });
+
+    it('should have range-disabled class when disabled is true', async () => {
+      const page = await newSpecPage({
+        components: [Range],
+        html: `<ion-range disabled="true" value="50" label="Label"></ion-range>`,
+      });
+      const range = page.body.querySelector('ion-range')!;
+      expect(range.classList.contains('range-disabled')).toBe(true);
+    });
+
+    it('should have range-dual-knobs class when dual-knobs is true true', async () => {
+      const page = await newSpecPage({
+        components: [Range],
+        html: `<ion-range dual-knobs="true" value="50" label="Label"></ion-range>`,
+      });
+      const range = page.body.querySelector('ion-range')!;
+      expect(range.classList.contains('range-dual-knobs')).toBe(true);
+    });
+
+    it('should have range-has-pin class when pin is true', async () => {
+      const page = await newSpecPage({
+        components: [Range],
+        html: `<ion-range pin="true" value="50" label="Label"></ion-range>`,
+      });
+      const range = page.body.querySelector('ion-range')!;
+      expect(range.classList.contains('range-has-pin')).toBe(true);
+    });
+  });
+
+  describe('pressed state classes', () => {
+    it('should have range-pressed class when knob is pressed', async () => {
+      const page = await newSpecPage({
+        components: [Range],
+        html: `<ion-range min="0" max="100"></ion-range>`,
+      });
+
+      const range = page.body.querySelector('ion-range')!;
+
+      // Simulate a pressed knob A by setting state on component instance
+      const component = page.rootInstance;
+      component.pressedKnob = 'A';
+
+      await page.waitForChanges();
+
+      expect(range.classList.contains('range-pressed')).toBe(true);
+      expect(range.classList.contains('range-pressed-a')).toBe(false);
+      expect(range.classList.contains('range-pressed-lower')).toBe(false);
+      expect(range.classList.contains('range-pressed-b')).toBe(false);
+      expect(range.classList.contains('range-pressed-upper')).toBe(false);
+    });
+
+    it('should have range-pressed-lower class when lower knob is pressed', async () => {
+      const page = await newSpecPage({
+        components: [Range],
+        html: `<ion-range dual-knobs="true" min="0" max="100"></ion-range>`,
+      });
+
+      const range = page.body.querySelector('ion-range')!;
+
+      // Simulate a pressed knob A by setting state on component instance
+      const component = page.rootInstance;
+      component.pressedKnob = 'A';
+
+      component.ratioA = 0.5;
+      component.ratioB = 0.8;
+
+      await page.waitForChanges();
+
+      expect(range.classList.contains('range-pressed-lower')).toBe(true);
+    });
+
+    it('should have range-pressed-upper class when upper knob is pressed', async () => {
+      const page = await newSpecPage({
+        components: [Range],
+        html: `<ion-range dual-knobs="true" min="0" max="100"></ion-range>`,
+      });
+
+      const range = page.body.querySelector('ion-range')!;
+
+      // Simulate a pressed knob B by setting state on component instance
+      const component = page.rootInstance;
+      component.pressedKnob = 'B';
+
+      component.ratioA = 0.5;
+      component.ratioB = 0.8;
+
+      await page.waitForChanges();
+
+      expect(range.classList.contains('range-pressed-upper')).toBe(true);
+    });
+
+    it('should have range-pressed-a class when knob A is pressed', async () => {
+      const page = await newSpecPage({
+        components: [Range],
+        html: `<ion-range dual-knobs="true" min="0" max="100"></ion-range>`,
+      });
+
+      const range = page.body.querySelector('ion-range')!;
+
+      // Simulate a pressed knob A by setting state on component instance
+      const component = page.rootInstance;
+      component.pressedKnob = 'A';
+
+      await page.waitForChanges();
+
+      expect(range.classList.contains('range-pressed-a')).toBe(true);
+    });
+
+    it('should have range-pressed-b class when knob B is pressed', async () => {
+      const page = await newSpecPage({
+        components: [Range],
+        html: `<ion-range dual-knobs="true" min="0" max="100"></ion-range>`,
+      });
+
+      const range = page.body.querySelector('ion-range')!;
+
+      // Simulate a pressed knob B by setting state on component instance
+      const component = page.rootInstance;
+      component.pressedKnob = 'B';
+
+      await page.waitForChanges();
+
+      expect(range.classList.contains('range-pressed-b')).toBe(true);
+    });
+  });
+});
+
+describe('range: shadow parts', () => {
+  describe('static shadow parts', () => {
+    it('should have default shadow parts', async () => {
+      const page = await newSpecPage({
+        components: [Range],
+        html: `<ion-range value="50" label="Label"></ion-range>`,
+      });
+      const range = page.body.querySelector('ion-range')!;
+
+      // bar and bar-active parts always exist
       expect(range).toHaveShadowPart('bar');
       expect(range).toHaveShadowPart('bar-active');
+
+      // label part always exists
+      expect(range).toHaveShadowPart('label');
+
+      // knob-handle and knob parts always exist
+      expect(range).toHaveShadowPart('knob-handle');
+      expect(range).toHaveShadowPart('knob');
+
+      // knob-handle a, b, lower, and upper parts only exist when dualKnobs is true
+      expect(range).not.toHaveShadowPart('knob-handle-a');
+      expect(range).not.toHaveShadowPart('knob-handle-b');
+      expect(range).not.toHaveShadowPart('knob-handle-lower');
+      expect(range).not.toHaveShadowPart('knob-handle-upper');
+
+      // knob a, b, lower, and upper parts only exist when dualKnobs is true
+      expect(range).not.toHaveShadowPart('knob-a');
+      expect(range).not.toHaveShadowPart('knob-b');
+      expect(range).not.toHaveShadowPart('knob-lower');
+      expect(range).not.toHaveShadowPart('knob-upper');
+
+      // pin only exists when pin is true
+      expect(range).not.toHaveShadowPart('pin');
+
+      // pin a, b, lower, and upper only exist when both pin and dualKnobs are true
+      expect(range).not.toHaveShadowPart('pin-a');
+      expect(range).not.toHaveShadowPart('pin-b');
+      expect(range).not.toHaveShadowPart('pin-lower');
+      expect(range).not.toHaveShadowPart('pin-upper');
+
+      // ticks only exist when ticks is true
+      expect(range).not.toHaveShadowPart('tick');
+      expect(range).not.toHaveShadowPart('tick-active');
+    });
+
+    it('should have tick shadow parts', async () => {
+      const page = await newSpecPage({
+        components: [Range],
+        html: `<ion-range snaps="true" ticks="true" value="50" label="Label"></ion-range>`,
+      });
+      const range = page.body.querySelector('ion-range')!;
+
+      // ticks only exist when both snaps and ticks are true
       expect(range).toHaveShadowPart('tick');
       expect(range).toHaveShadowPart('tick-active');
     });
+
+    it('should have pin shadow part', async () => {
+      const page = await newSpecPage({
+        components: [Range],
+        html: `<ion-range pin="true" value="50" label="Label"></ion-range>`,
+      });
+      const range = page.body.querySelector('ion-range')!;
+
+      // pin only exists when pin is true
+      expect(range).toHaveShadowPart('pin');
+
+      // pin a, b, lower, and upper only exist when both pin and dualKnobs are true
+      expect(range).not.toHaveShadowPart('pin-a');
+      expect(range).not.toHaveShadowPart('pin-b');
+      expect(range).not.toHaveShadowPart('pin-lower');
+      expect(range).not.toHaveShadowPart('pin-upper');
+    });
+
+    it('should have dual knob shadow parts', async () => {
+      const page = await newSpecPage({
+        components: [Range],
+        html: `<ion-range dual-knobs="true" pin="true" value="50" label="Label"></ion-range>`,
+      });
+      const range = page.body.querySelector('ion-range')!;
+
+      // knob-handle a, b, lower, and upper parts only exist when dualKnobs is true
+      expect(range).toHaveShadowPart('knob-handle-a');
+      expect(range).toHaveShadowPart('knob-handle-b');
+      expect(range).toHaveShadowPart('knob-handle-lower');
+      expect(range).toHaveShadowPart('knob-handle-upper');
+
+      // knob a, b, lower, and upper parts only exist when dualKnobs is true
+      expect(range).toHaveShadowPart('knob-a');
+      expect(range).toHaveShadowPart('knob-b');
+      expect(range).toHaveShadowPart('knob-lower');
+      expect(range).toHaveShadowPart('knob-upper');
+
+      // pin only exists when pin is true
+      expect(range).toHaveShadowPart('pin');
+
+      // pin a, b, lower, and upper only exist when both pin and dualKnobs are true
+      expect(range).toHaveShadowPart('pin-a');
+      expect(range).toHaveShadowPart('pin-b');
+      expect(range).toHaveShadowPart('pin-lower');
+      expect(range).toHaveShadowPart('pin-upper');
+    });
+  });
+
+  describe('state shadow parts', () => {
+    it('should have pressed shadow part when pressed', async () => {
+      const page = await newSpecPage({
+        components: [Range],
+        html: `<ion-range pin="true" value="50" label="Label"></ion-range>`,
+      });
+      const range = page.body.querySelector('ion-range')!;
+      const shadowRoot = range.shadowRoot!;
+
+      // The pressed part should not exist on the knob by default
+      expect(shadowRoot.querySelector('[part~="knob"][part~="pressed"]')).toBeNull();
+
+      // Simulate a pressed knob by setting state on component instance
+      const component = page.rootInstance;
+      component.pressedKnob = 'A';
+
+      await page.waitForChanges();
+
+      // The pressed part should exist on the knob when pressed
+      expect(shadowRoot.querySelector('[part~="knob"][part~="pressed"]')).not.toBeNull();
+
+      // Clear the pressed knob
+      component.pressedKnob = undefined;
+
+      await page.waitForChanges();
+
+      // The pressed part should not exist after clearing the pressed knob
+      expect(shadowRoot.querySelector('[part~="knob"][part~="pressed"]')).toBeNull();
+    });
+
+    it('should have focused shadow part when focused', async () => {
+      const page = await newSpecPage({
+        components: [Range],
+        html: `<ion-range pin="true" value="50" label="Label"></ion-range>`,
+      });
+      const range = page.body.querySelector('ion-range')!;
+      const shadowRoot = range.shadowRoot!;
+
+      // The focused part should not exist on the knob by default
+      expect(shadowRoot.querySelector('[part~="knob"][part~="focused"]')).toBeNull();
+
+      // Focus the knob handle
+      const knobHandle = shadowRoot.querySelector('.range-knob-handle') as HTMLElement;
+      knobHandle.focus();
+
+      await page.waitForChanges();
+
+      // The focused part should exist on the knob when focused
+      expect(shadowRoot.querySelector('[part~="knob"][part~="focused"]')).not.toBeNull();
+
+      // Blur the knob handle
+      knobHandle.blur();
+      await waitForEvent(range, 'ionBlur');
+
+      await page.waitForChanges();
+
+      // The focused part should not exist after blur
+      expect(shadowRoot.querySelector('[part~="knob"][part~="focused"]')).toBeNull();
+    });
+
+    it('should have activated shadow part when activated', async () => {
+      const page = await newSpecPage({
+        components: [Range],
+        html: `<ion-range pin="true" value="50" label="Label"></ion-range>`,
+      });
+      const range = page.body.querySelector('ion-range')!;
+      const shadowRoot = range.shadowRoot!;
+
+      // The activated part should not exist on the knob by default
+      expect(shadowRoot.querySelector('[part~="knob"][part~="activated"]')).toBeNull();
+
+      // Simulate an activated knob by setting state on component instance
+      const component = page.rootInstance;
+      component.activatedKnob = 'A';
+
+      await page.waitForChanges();
+
+      // The activated part should exist on the knob when activated
+      expect(shadowRoot.querySelector('[part~="knob"][part~="activated"]')).not.toBeNull();
+
+      // Clear the activated knob
+      component.activatedKnob = undefined;
+
+      await page.waitForChanges();
+
+      // The activated part should not exist after clearing the activated knob
+      expect(shadowRoot.querySelector('[part~="knob"][part~="activated"]')).toBeNull();
+    });
+
+    it('should have hover shadow part when hovered', async () => {
+      const page = await newSpecPage({
+        components: [Range],
+        html: `<ion-range pin="true" value="50" label="Label"></ion-range>`,
+      });
+      const range = page.body.querySelector('ion-range')!;
+      const shadowRoot = range.shadowRoot!;
+
+      // The hover part should not exist on the knob by default
+      expect(shadowRoot.querySelector('[part~="knob"][part~="hover"]')).toBeNull();
+
+      // Simulate a hovered knob by setting state on component instance
+      const component = page.rootInstance;
+      component.hoveredKnob = 'A';
+
+      await page.waitForChanges();
+
+      // The hover part should exist on the knob when hovered
+      expect(shadowRoot.querySelector('[part~="knob"][part~="hover"]')).not.toBeNull();
+
+      // Clear the hovered knob
+      component.hoveredKnob = undefined;
+
+      await page.waitForChanges();
+
+      // The hover part should not exist after clearing the hovered knob
+      expect(shadowRoot.querySelector('[part~="knob"][part~="hover"]')).toBeNull();
+    });
+
+    it('should have pressed shadow part on only one knob when dual-knobs is true', async () => {
+      const page = await newSpecPage({
+        components: [Range],
+        html: `<ion-range dual-knobs="true" pin="true" value="50" label="Label"></ion-range>`,
+      });
+      const range = page.body.querySelector('ion-range')!;
+      const shadowRoot = range.shadowRoot!;
+
+      // The pressed part should not exist on either knob by default
+      expect(shadowRoot.querySelector('[part~="knob-a"][part~="pressed"]')).toBeNull();
+      expect(shadowRoot.querySelector('[part~="knob-b"][part~="pressed"]')).toBeNull();
+
+      // Simulate a pressed knob A by setting state on component instance
+      const component = page.rootInstance;
+      component.pressedKnob = 'A';
+
+      await page.waitForChanges();
+
+      // The pressed part should exist on knob A only
+      expect(shadowRoot.querySelector('[part~="knob-a"][part~="pressed"]')).not.toBeNull();
+      expect(shadowRoot.querySelector('[part~="knob-b"][part~="pressed"]')).toBeNull();
+
+      // Simulate a pressed knob B by setting state on component instance
+      component.pressedKnob = 'B';
+
+      await page.waitForChanges();
+
+      // The pressed part should now exist on knob B only
+      expect(shadowRoot.querySelector('[part~="knob-a"][part~="pressed"]')).toBeNull();
+      expect(shadowRoot.querySelector('[part~="knob-b"][part~="pressed"]')).not.toBeNull();
+
+      // Clear the pressed knob
+      component.pressedKnob = undefined;
+
+      await page.waitForChanges();
+
+      // The pressed part should not exist after clearing the pressed knob
+      expect(shadowRoot.querySelector('[part~="knob-a"][part~="pressed"]')).toBeNull();
+      expect(shadowRoot.querySelector('[part~="knob-b"][part~="pressed"]')).toBeNull();
+    });
+
+    it('should have focused shadow part on only one knob when dual-knobs is true', async () => {
+      const page = await newSpecPage({
+        components: [Range],
+        html: `<ion-range dual-knobs="true" pin="true" value="50" label="Label"></ion-range>`,
+      });
+      const range = page.body.querySelector('ion-range')!;
+      const shadowRoot = range.shadowRoot!;
+
+      // The focused part should not exist on either knob by default
+      expect(shadowRoot.querySelector('[part~="knob-a"][part~="focused"]')).toBeNull();
+      expect(shadowRoot.querySelector('[part~="knob-b"][part~="focused"]')).toBeNull();
+
+      // Focus knob handle A
+      const knobHandleA = shadowRoot.querySelector('.range-knob-handle-a') as HTMLElement;
+      knobHandleA.focus();
+
+      await page.waitForChanges();
+
+      // The focused part should exist on knob A only
+      expect(shadowRoot.querySelector('[part~="knob-a"][part~="focused"]')).not.toBeNull();
+      expect(shadowRoot.querySelector('[part~="knob-b"][part~="focused"]')).toBeNull();
+
+      // Focus knob handle B
+      const knobHandleB = shadowRoot.querySelector('.range-knob-handle-b') as HTMLElement;
+      knobHandleB.focus();
+
+      await page.waitForChanges();
+
+      // The focused part should now exist on knob B only
+      expect(shadowRoot.querySelector('[part~="knob-a"][part~="focused"]')).toBeNull();
+      expect(shadowRoot.querySelector('[part~="knob-b"][part~="focused"]')).not.toBeNull();
+
+      // Blur knob handle B
+      knobHandleB.blur();
+      await waitForEvent(range, 'ionBlur');
+
+      await page.waitForChanges();
+
+      // The focused part should not exist after blurring the knob handle
+      expect(shadowRoot.querySelector('[part~="knob-a"][part~="focused"]')).toBeNull();
+      expect(shadowRoot.querySelector('[part~="knob-b"][part~="focused"]')).toBeNull();
+    });
+
+    it('should have activated shadow part on only one knob when dual-knobs is true', async () => {
+      const page = await newSpecPage({
+        components: [Range],
+        html: `<ion-range dual-knobs="true" pin="true" value="50" label="Label"></ion-range>`,
+      });
+      const range = page.body.querySelector('ion-range')!;
+      const shadowRoot = range.shadowRoot!;
+
+      // The activated part should not exist on either knob by default
+      expect(shadowRoot.querySelector('[part~="knob-a"][part~="activated"]')).toBeNull();
+      expect(shadowRoot.querySelector('[part~="knob-b"][part~="activated"]')).toBeNull();
+
+      // Simulate an activated knob A by setting state on component instance
+      const component = page.rootInstance;
+      component.activatedKnob = 'A';
+
+      await page.waitForChanges();
+
+      // The activated part should exist on knob A only
+      expect(shadowRoot.querySelector('[part~="knob-a"][part~="activated"]')).not.toBeNull();
+      expect(shadowRoot.querySelector('[part~="knob-b"][part~="activated"]')).toBeNull();
+
+      // Simulate an activated knob B by setting state on component instance
+      component.activatedKnob = 'B';
+
+      await page.waitForChanges();
+
+      // The activated part should now exist on knob B only
+      expect(shadowRoot.querySelector('[part~="knob-a"][part~="activated"]')).toBeNull();
+      expect(shadowRoot.querySelector('[part~="knob-b"][part~="activated"]')).not.toBeNull();
+
+      // Clear the activated knob
+      component.activatedKnob = undefined;
+
+      await page.waitForChanges();
+
+      // The activated part should not exist after clearing the activated knob
+      expect(shadowRoot.querySelector('[part~="knob-a"][part~="activated"]')).toBeNull();
+      expect(shadowRoot.querySelector('[part~="knob-b"][part~="activated"]')).toBeNull();
+    });
+
+    it('should have hover shadow part on only one knob when dual-knobs is true', async () => {
+      const page = await newSpecPage({
+        components: [Range],
+        html: `<ion-range dual-knobs="true" pin="true" value="50" label="Label"></ion-range>`,
+      });
+      const range = page.body.querySelector('ion-range')!;
+      const shadowRoot = range.shadowRoot!;
+
+      // The hover part should not exist on either knob by default
+      expect(shadowRoot.querySelector('[part~="knob-a"][part~="hover"]')).toBeNull();
+      expect(shadowRoot.querySelector('[part~="knob-b"][part~="hover"]')).toBeNull();
+
+      // Simulate a hovered knob A by setting state on component instance
+      const component = page.rootInstance;
+      component.hoveredKnob = 'A';
+
+      await page.waitForChanges();
+
+      // The hover part should exist on knob A only
+      expect(shadowRoot.querySelector('[part~="knob-a"][part~="hover"]')).not.toBeNull();
+      expect(shadowRoot.querySelector('[part~="knob-b"][part~="hover"]')).toBeNull();
+
+      // Simulate a hovered knob B by setting state on component instance
+      component.hoveredKnob = 'B';
+
+      await page.waitForChanges();
+
+      // The hover part should now exist on knob B only
+      expect(shadowRoot.querySelector('[part~="knob-a"][part~="hover"]')).toBeNull();
+      expect(shadowRoot.querySelector('[part~="knob-b"][part~="hover"]')).not.toBeNull();
+
+      // Clear the hovered knob
+      component.hoveredKnob = undefined;
+
+      await page.waitForChanges();
+
+      // The hover part should not exist after clearing the hovered knob
+      expect(shadowRoot.querySelector('[part~="knob-a"][part~="hover"]')).toBeNull();
+      expect(shadowRoot.querySelector('[part~="knob-b"][part~="hover"]')).toBeNull();
+    });
   });
 });
diff --git a/core/src/components/refresher/refresher-interface.ts b/core/src/components/refresher/refresher-interface.ts
index 20fd97e1823..9866a4cc86f 100644
--- a/core/src/components/refresher/refresher-interface.ts
+++ b/core/src/components/refresher/refresher-interface.ts
@@ -2,7 +2,16 @@ export interface RefresherEventDetail {
   complete(): void;
 }
 
+export interface RefresherPullEndEventDetail {
+  reason: 'complete' | 'cancel';
+}
+
 export interface RefresherCustomEvent extends CustomEvent {
   detail: RefresherEventDetail;
   target: HTMLIonRefresherElement;
 }
+
+export interface RefresherPullEndCustomEvent extends CustomEvent {
+  detail: RefresherPullEndEventDetail;
+  target: HTMLIonRefresherElement;
+}
diff --git a/core/src/components/refresher/refresher.tsx b/core/src/components/refresher/refresher.tsx
index 7a6e66b232e..424be18a4e2 100644
--- a/core/src/components/refresher/refresher.tsx
+++ b/core/src/components/refresher/refresher.tsx
@@ -14,7 +14,7 @@ import { ImpactStyle, hapticImpact } from '@utils/native/haptic';
 import { getIonMode, getIonTheme } from '../../global/ionic-global';
 import type { Animation, Gesture, GestureDetail } from '../../interface';
 
-import type { RefresherEventDetail } from './refresher-interface';
+import type { RefresherEventDetail, RefresherPullEndEventDetail } from './refresher-interface';
 import {
   createPullingAnimation,
   createSnapBackAnimation,
@@ -109,8 +109,8 @@ export class Refresher implements ComponentInterface {
    * than `1`. The default value is `1` which is equal to the speed of the cursor.
    * If a negative value is passed in, the factor will be `1` instead.
    *
-   * For example: If the value passed is `1.2` and the content is dragged by
-   * `10` pixels, instead of `10` pixels the content will be pulled by `12` pixels
+   * For example, If the value passed is `1.2` and the content is dragged by
+   * `10` pixels, instead of `10` pixels, the content will be pulled by `12` pixels
    * (an increase of 20 percent). If the value passed is `0.8`, the dragged amount
    * will be `8` pixels, less than the amount the cursor has moved.
    *
@@ -145,9 +145,24 @@ export class Refresher implements ComponentInterface {
 
   /**
    * Emitted when the user begins to start pulling down.
+   * TODO(FW-7044): Remove this in a major release
+   *
+   * @deprecated Use `ionPullStart` instead.
    */
   @Event() ionStart!: EventEmitter<void>;
 
+  /**
+   * Emitted when the user begins to start pulling down.
+   */
+  @Event() ionPullStart!: EventEmitter<void>;
+
+  /**
+   * Emitted when the refresher has returned to the inactive state
+   * after a pull gesture. This fires whether the refresh completed
+   * successfully or was canceled.
+   */
+  @Event() ionPullEnd!: EventEmitter<RefresherPullEndEventDetail>;
+
   private async checkNativeRefresher() {
     const useNativeRefresher = await shouldUseNativeRefresher(this.el, getIonMode(this));
     if (useNativeRefresher && !this.nativeRefresher) {
@@ -184,6 +199,10 @@ export class Refresher implements ComponentInterface {
     this.progress = 0;
 
     this.state = RefresherState.Inactive;
+
+    this.ionPullEnd.emit({
+      reason: state === RefresherState.Completing ? 'complete' : 'cancel',
+    });
   }
 
   private async setupiOSNativeRefresher(
@@ -226,6 +245,7 @@ export class Refresher implements ComponentInterface {
           if (!this.didStart) {
             this.didStart = true;
             this.ionStart.emit();
+            this.ionPullStart.emit();
           }
 
           // emit "pulling" on every move
@@ -310,6 +330,7 @@ export class Refresher implements ComponentInterface {
         this.lastVelocityY = ev.velocityY;
       },
       onEnd: () => {
+        const hadStarted = this.didStart;
         this.pointerDown = false;
         this.didStart = false;
 
@@ -318,6 +339,12 @@ export class Refresher implements ComponentInterface {
           this.needsCompletion = false;
         } else if (this.didRefresh) {
           readTask(() => translateElement(this.elementToTransform, `${this.el.clientHeight}px`));
+        } else if (hadStarted) {
+          /**
+           * User started pulling but released before reaching the refresh threshold.
+           * Emit ionPullEnd to complete the event pair.
+           */
+          this.ionPullEnd.emit({ reason: 'cancel' });
         }
       },
     });
@@ -380,6 +407,7 @@ export class Refresher implements ComponentInterface {
           ev.data.animation = animation;
           animation.progressStart(false, 0);
           this.ionStart.emit();
+          this.ionPullStart.emit();
           this.animations.push(animation);
 
           return;
@@ -407,6 +435,7 @@ export class Refresher implements ComponentInterface {
             this.animations = [];
             this.gesture!.enable(true);
             this.state = RefresherState.Inactive;
+            this.ionPullEnd.emit({ reason: 'cancel' });
           });
           return;
         }
@@ -686,6 +715,7 @@ export class Refresher implements ComponentInterface {
     if (!this.didStart) {
       this.didStart = true;
       this.ionStart.emit();
+      this.ionPullStart.emit();
     }
 
     // emit "pulling" on every move
@@ -733,6 +763,16 @@ export class Refresher implements ComponentInterface {
        * available right away.
        */
       this.restoreOverflowStyle();
+
+      /**
+       * If ionPullStart was emitted, we need to emit ionPullEnd
+       * even though the gesture was aborted before reaching the
+       * pulling threshold.
+       */
+      if (this.didStart) {
+        this.didStart = false;
+        this.ionPullEnd.emit({ reason: 'cancel' });
+      }
     }
   }
 
@@ -785,6 +825,10 @@ export class Refresher implements ComponentInterface {
       if (this.contentFullscreen && this.backgroundContentEl) {
         this.backgroundContentEl?.style.removeProperty('--offset-top');
       }
+
+      this.ionPullEnd.emit({
+        reason: state === RefresherState.Completing ? 'complete' : 'cancel',
+      });
     }, 600);
 
     // reset the styles on the scroll element
diff --git a/core/src/components/refresher/test/basic/index.html b/core/src/components/refresher/test/basic/index.html
index 60982df8670..fdc65b20983 100644
--- a/core/src/components/refresher/test/basic/index.html
+++ b/core/src/components/refresher/test/basic/index.html
@@ -56,6 +56,17 @@
         window.dispatchEvent(new CustomEvent('ionRefreshComplete'));
       });
 
+      // Event listeners for new ionPullStart and ionPullEnd events
+      refresher.addEventListener('ionPullStart', function () {
+        console.log('ionPullStart fired');
+        window.dispatchEvent(new CustomEvent('ionPullStartFired'));
+      });
+
+      refresher.addEventListener('ionPullEnd', function (event) {
+        console.log('ionPullEnd fired', event.detail);
+        window.dispatchEvent(new CustomEvent('ionPullEndFired', { detail: event.detail }));
+      });
+
       function render() {
         let html = '';
         for (let item of items) {
diff --git a/core/src/components/refresher/test/basic/refresher.e2e.ts b/core/src/components/refresher/test/basic/refresher.e2e.ts
index 70f38bc88e7..10d6e62d32e 100644
--- a/core/src/components/refresher/test/basic/refresher.e2e.ts
+++ b/core/src/components/refresher/test/basic/refresher.e2e.ts
@@ -1,5 +1,5 @@
 import { expect } from '@playwright/test';
-import { configs, test } from '@utils/test/playwright';
+import { configs, dragElementByYAxis, test } from '@utils/test/playwright';
 
 import { pullToRefresh } from '../test.utils';
 
@@ -22,6 +22,37 @@ configs({ directions: ['ltr'] }).forEach(({ title, config }) => {
 
         expect(await items.count()).toBe(60);
       });
+
+      test('should emit ionPullStart and ionPullEnd with reason complete', async ({ page }) => {
+        const ionPullStartEvent = await page.spyOnEvent('ionPullStartFired');
+        const ionPullEndEvent = await page.spyOnEvent('ionPullEndFired');
+
+        await pullToRefresh(page);
+
+        // Wait for the close animation to complete
+        await page.waitForTimeout(700);
+
+        expect(ionPullStartEvent).toHaveReceivedEventTimes(1);
+        expect(ionPullEndEvent).toHaveReceivedEventTimes(1);
+        expect(ionPullEndEvent).toHaveReceivedEventDetail({ reason: 'complete' });
+      });
+
+      test('should emit ionPullEnd with reason cancel when pull is released early', async ({ page }) => {
+        const target = page.locator('body');
+
+        const ionPullStartEvent = await page.spyOnEvent('ionPullStartFired');
+        const ionPullEndEvent = await page.spyOnEvent('ionPullEndFired');
+
+        // Pull down only 40px (less than pullMin of 60px) to trigger cancel
+        await dragElementByYAxis(target, page, 40);
+
+        // Wait for the cancel animation to complete
+        await page.waitForTimeout(700);
+
+        expect(ionPullStartEvent).toHaveReceivedEventTimes(1);
+        expect(ionPullEndEvent).toHaveReceivedEventTimes(1);
+        expect(ionPullEndEvent).toHaveReceivedEventDetail({ reason: 'cancel' });
+      });
     });
 
     test.describe('native refresher', () => {
@@ -41,6 +72,28 @@ configs({ directions: ['ltr'] }).forEach(({ title, config }) => {
 
         expect(await items.count()).toBe(60);
       });
+
+      test('should emit ionPullStart and ionPullEnd with reason complete', async ({ page }) => {
+        const refresherContent = page.locator('ion-refresher-content');
+        refresherContent.evaluateHandle((el: any) => {
+          // Resets the pullingIcon to enable the native refresher
+          el.pullingIcon = undefined;
+        });
+
+        await page.waitForChanges();
+
+        const ionPullStartEvent = await page.spyOnEvent('ionPullStartFired');
+        const ionPullEndEvent = await page.spyOnEvent('ionPullEndFired');
+
+        await pullToRefresh(page);
+
+        // Wait for the reset animation to complete (native refresher takes longer due to CSS transitions)
+        await page.waitForTimeout(1500);
+
+        expect(ionPullStartEvent).toHaveReceivedEventTimes(1);
+        expect(ionPullEndEvent).toHaveReceivedEventTimes(1);
+        expect(ionPullEndEvent).toHaveReceivedEventDetail({ reason: 'complete' });
+      });
     });
   });
 });
diff --git a/core/src/components/searchbar/searchbar.tsx b/core/src/components/searchbar/searchbar.tsx
index 4d1047f914f..83a7955b278 100644
--- a/core/src/components/searchbar/searchbar.tsx
+++ b/core/src/components/searchbar/searchbar.tsx
@@ -35,6 +35,8 @@ export class Searchbar implements ComponentInterface {
   private originalIonInput?: EventEmitter<SearchbarInputEventDetail>;
   private inputId = `ion-searchbar-${searchbarIds++}`;
   private inheritedAttributes: Attributes = {};
+  private loadTimeout: ReturnType<typeof setTimeout> | undefined;
+  private clearTimeout: ReturnType<typeof setTimeout> | undefined;
 
   /**
    * The value of the input when the textarea is focused.
@@ -311,11 +313,20 @@ export class Searchbar implements ComponentInterface {
     this.positionElements();
     this.debounceChanged();
 
-    setTimeout(() => {
+    this.loadTimeout = setTimeout(() => {
       this.noAnimate = false;
     }, 300);
   }
 
+  disconnectedCallback() {
+    if (this.loadTimeout) {
+      clearTimeout(this.loadTimeout);
+    }
+    if (this.clearTimeout) {
+      clearTimeout(this.clearTimeout);
+    }
+  }
+
   private emitStyle() {
     this.ionStyle.emit({
       searchbar: true,
@@ -381,12 +392,15 @@ export class Searchbar implements ComponentInterface {
    * Clears the input field and triggers the control change.
    */
   private onClearInput = async (shouldFocus?: boolean) => {
+    if (this.clearTimeout) {
+      clearTimeout(this.clearTimeout);
+    }
     this.ionClear.emit();
 
     return new Promise<void>((resolve) => {
       // setTimeout() fixes https://github.com/ionic-team/ionic-framework/issues/7527
       // wait for 4 frames
-      setTimeout(() => {
+      this.clearTimeout = setTimeout(() => {
         const value = this.getValue();
         if (value !== '') {
           this.value = '';
diff --git a/core/src/components/segment-view/segment-view.scss b/core/src/components/segment-view/segment-view.scss
index a41030992f6..52210425a63 100644
--- a/core/src/components/segment-view/segment-view.scss
+++ b/core/src/components/segment-view/segment-view.scss
@@ -21,7 +21,8 @@
   display: none;
 }
 
-:host(.segment-view-disabled) {
+:host(.segment-view-disabled),
+:host(.segment-view-swipe-disabled) {
   touch-action: none;
   overflow-x: hidden;
 }
diff --git a/core/src/components/segment-view/segment-view.tsx b/core/src/components/segment-view/segment-view.tsx
index 1d78dcb3596..4023d46971c 100644
--- a/core/src/components/segment-view/segment-view.tsx
+++ b/core/src/components/segment-view/segment-view.tsx
@@ -24,6 +24,11 @@ export class SegmentView implements ComponentInterface {
    */
   @Prop() disabled = false;
 
+  /**
+   * If `true`, users will be able to swipe the segment view to navigate between segment contents.
+   */
+  @Prop() swipeGesture = true;
+
   /**
    * @internal
    *
@@ -142,13 +147,14 @@ export class SegmentView implements ComponentInterface {
   }
 
   render() {
-    const { disabled, isManualScroll } = this;
+    const { disabled, isManualScroll, swipeGesture } = this;
 
     return (
       <Host
         class={{
           'segment-view-disabled': disabled,
           'segment-view-scroll-disabled': isManualScroll === false,
+          'segment-view-swipe-disabled': swipeGesture === false,
         }}
       >
         <slot></slot>
diff --git a/core/src/components/segment-view/test/swipe-gesture/index.html b/core/src/components/segment-view/test/swipe-gesture/index.html
new file mode 100644
index 00000000000..8a5c39b6cc2
--- /dev/null
+++ b/core/src/components/segment-view/test/swipe-gesture/index.html
@@ -0,0 +1,147 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Segment View - Swipe Gesture</title>
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
+    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
+    <script src="../../../../../scripts/testing/scripts.js"></script>
+    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
+    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+
+    <style>
+      h2 {
+        font-size: 12px;
+        font-weight: normal;
+
+        color: #6f7378;
+
+        margin: 24px 16px 8px;
+      }
+
+      ion-segment-view {
+        height: 100px;
+
+        margin-bottom: 20px;
+      }
+
+      ion-segment-content {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+
+      ion-segment-content:nth-of-type(3n + 1) {
+        background: lightpink;
+      }
+
+      ion-segment-content:nth-of-type(3n + 2) {
+        background: lightblue;
+      }
+
+      ion-segment-content:nth-of-type(3n + 3) {
+        background: lightgreen;
+      }
+    </style>
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Segment View - Swipe Gesture</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content>
+        <h2>
+          Swipe Gesture: Segment <ion-text color="success">Enabled</ion-text>; Segment View
+          <ion-text color="success">Enabled</ion-text>
+        </h2>
+        <ion-segment value="free">
+          <ion-segment-button content-id="paid" value="paid">
+            <ion-label>Paid</ion-label>
+          </ion-segment-button>
+          <ion-segment-button content-id="free" value="free">
+            <ion-label>Free</ion-label>
+          </ion-segment-button>
+          <ion-segment-button content-id="top" value="top">
+            <ion-label>Top</ion-label>
+          </ion-segment-button>
+        </ion-segment>
+        <ion-segment-view>
+          <ion-segment-content id="paid">Paid</ion-segment-content>
+          <ion-segment-content id="free">Free</ion-segment-content>
+          <ion-segment-content id="top">Top</ion-segment-content>
+        </ion-segment-view>
+
+        <h2>
+          Swipe Gesture: Segment <ion-text color="danger">Disabled</ion-text>; Segment View
+          <ion-text color="success">Enabled</ion-text>
+        </h2>
+        <ion-segment swipe-gesture="false" value="free2">
+          <ion-segment-button content-id="paid2" value="paid2">
+            <ion-label>Paid</ion-label>
+          </ion-segment-button>
+          <ion-segment-button content-id="free2" value="free2">
+            <ion-label>Free</ion-label>
+          </ion-segment-button>
+          <ion-segment-button content-id="top2" value="top2">
+            <ion-label>Top</ion-label>
+          </ion-segment-button>
+        </ion-segment>
+        <ion-segment-view>
+          <ion-segment-content id="paid2">Paid</ion-segment-content>
+          <ion-segment-content id="free2">Free</ion-segment-content>
+          <ion-segment-content id="top2">Top</ion-segment-content>
+        </ion-segment-view>
+
+        <h2>
+          Swipe Gesture: Segment <ion-text color="success">Enabled</ion-text>; Segment View
+          <ion-text color="danger">Disabled</ion-text>
+        </h2>
+        <ion-segment value="free3">
+          <ion-segment-button content-id="paid3" value="paid3">
+            <ion-label>Paid</ion-label>
+          </ion-segment-button>
+          <ion-segment-button content-id="free3" value="free3">
+            <ion-label>Free</ion-label>
+          </ion-segment-button>
+          <ion-segment-button content-id="top3" value="top3">
+            <ion-label>Top</ion-label>
+          </ion-segment-button>
+        </ion-segment>
+        <ion-segment-view swipe-gesture="false">
+          <ion-segment-content id="paid3">Paid</ion-segment-content>
+          <ion-segment-content id="free3">Free</ion-segment-content>
+          <ion-segment-content id="top3">Top</ion-segment-content>
+        </ion-segment-view>
+
+        <h2>
+          Swipe Gesture: Segment <ion-text color="danger">Disabled</ion-text>; Segment View
+          <ion-text color="danger">Disabled</ion-text>
+        </h2>
+        <ion-segment swipe-gesture="false" value="free4">
+          <ion-segment-button content-id="paid4" value="paid4">
+            <ion-label>Paid</ion-label>
+          </ion-segment-button>
+          <ion-segment-button content-id="free4" value="free4">
+            <ion-label>Free</ion-label>
+          </ion-segment-button>
+          <ion-segment-button content-id="top4" value="top4">
+            <ion-label>Top</ion-label>
+          </ion-segment-button>
+        </ion-segment>
+        <ion-segment-view swipe-gesture="false">
+          <ion-segment-content id="paid4">Paid</ion-segment-content>
+          <ion-segment-content id="free4">Free</ion-segment-content>
+          <ion-segment-content id="top4">Top</ion-segment-content>
+        </ion-segment-view>
+      </ion-content>
+    </ion-app>
+  </body>
+</html>
diff --git a/core/src/components/segment-view/test/swipe-gesture/segment-view.e2e.ts b/core/src/components/segment-view/test/swipe-gesture/segment-view.e2e.ts
new file mode 100644
index 00000000000..f250cb142db
--- /dev/null
+++ b/core/src/components/segment-view/test/swipe-gesture/segment-view.e2e.ts
@@ -0,0 +1,51 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+/**
+ * This behavior does not vary across modes/directions
+ */
+configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
+  test.describe(title('segment-view: swipe gesture'), () => {
+    test('should allow swiping the segment view by default', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-segment-view>
+          <ion-segment-content id="paid">Paid</ion-segment-content>
+          <ion-segment-content id="free">Free</ion-segment-content>
+          <ion-segment-content id="top">Top</ion-segment-content>
+        </ion-segment-view>
+      `,
+        config
+      );
+
+      const segmentView = page.locator('ion-segment-view');
+
+      const allowsSwipe = await segmentView.evaluate((el: HTMLElement) => {
+        const style = getComputedStyle(el);
+        return style.overflowX !== 'hidden' && style.touchAction !== 'none';
+      });
+      expect(allowsSwipe).toBe(true);
+    });
+
+    test('should not allow swiping the segment view when swipeGesture is false', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-segment-view swipe-gesture="false">
+          <ion-segment-content id="paid">Paid</ion-segment-content>
+          <ion-segment-content id="free">Free</ion-segment-content>
+          <ion-segment-content id="top">Top</ion-segment-content>
+        </ion-segment-view>
+      `,
+        config
+      );
+
+      const segmentView = page.locator('ion-segment-view');
+
+      const allowsSwipe = await segmentView.evaluate((el: HTMLElement) => {
+        const style = getComputedStyle(el);
+        return style.overflowX !== 'hidden' && style.touchAction !== 'none';
+      });
+      expect(allowsSwipe).toBe(false);
+    });
+  });
+});
diff --git a/core/src/components/select-modal/select-modal.tsx b/core/src/components/select-modal/select-modal.tsx
index 8b4ed90193e..c277c194da8 100644
--- a/core/src/components/select-modal/select-modal.tsx
+++ b/core/src/components/select-modal/select-modal.tsx
@@ -23,6 +23,11 @@ export class SelectModal implements ComponentInterface {
 
   @Prop() header?: string;
 
+  /**
+   * The text to display on the cancel button.
+   */
+  @Prop() cancelText = 'Close';
+
   @Prop() multiple?: boolean;
 
   @Prop() options: SelectModalOption[] = [];
@@ -162,7 +167,7 @@ export class SelectModal implements ComponentInterface {
             {this.header !== undefined && <ion-title>{this.header}</ion-title>}
 
             <ion-buttons slot="end">
-              <ion-button onClick={() => this.closeModal()}>Close</ion-button>
+              <ion-button onClick={() => this.closeModal()}>{this.cancelText}</ion-button>
             </ion-buttons>
           </ion-toolbar>
         </ion-header>
diff --git a/core/src/components/item/test/css-variables/index.html b/core/src/components/select-modal/test/custom/index.html
similarity index 58%
rename from core/src/components/item/test/css-variables/index.html
rename to core/src/components/select-modal/test/custom/index.html
index 44dbfe0c88e..20de632ce3d 100644
--- a/core/src/components/item/test/css-variables/index.html
+++ b/core/src/components/select-modal/test/custom/index.html
@@ -2,7 +2,7 @@
 <html lang="en" dir="ltr">
   <head>
     <meta charset="UTF-8" />
-    <title>Item - CSS Variables</title>
+    <title>Select - Custom</title>
     <meta
       name="viewport"
       content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
@@ -14,36 +14,27 @@
     <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
   </head>
 
-  <style>
-    ion-item {
-      --padding-top: 20px;
-      --background: #eee;
-    }
-  </style>
-
   <body>
     <ion-app>
       <ion-header>
         <ion-toolbar>
-          <ion-title>Item CSS variables</ion-title>
+          <ion-title>Select Modal - Custom</ion-title>
         </ion-toolbar>
       </ion-header>
 
-      <ion-content class="ion-padding-vertical">
-        <ion-list class="basic">
-          <ion-item>
-            <ion-label>Item 1</ion-label>
-          </ion-item>
-
-          <ion-item>
-            <ion-label>Item 2</ion-label>
-          </ion-item>
-
-          <ion-item>
-            <ion-label>Item 3</ion-label>
-          </ion-item>
-        </ion-list>
+      <ion-content>
+        <ion-modal is-open="true">
+          <ion-select-modal multiple="false" cancel-text="Close me"></ion-select-modal>
+        </ion-modal>
       </ion-content>
     </ion-app>
+
+    <script>
+      const selectModal = document.querySelector('ion-select-modal');
+      selectModal.options = [
+        { value: 'apple', text: 'Apple', disabled: false, checked: true },
+        { value: 'banana', text: 'Banana', disabled: false, checked: false },
+      ];
+    </script>
   </body>
 </html>
diff --git a/core/src/components/select-modal/test/custom/select-modal.e2e.ts b/core/src/components/select-modal/test/custom/select-modal.e2e.ts
new file mode 100644
index 00000000000..7c95a4428dd
--- /dev/null
+++ b/core/src/components/select-modal/test/custom/select-modal.e2e.ts
@@ -0,0 +1,45 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+import type { SelectModalOption } from '../../select-modal-interface';
+import { SelectModalPage } from '../fixtures';
+
+const options: SelectModalOption[] = [
+  { value: 'apple', text: 'Apple', disabled: false, checked: false },
+  { value: 'banana', text: 'Banana', disabled: false, checked: false },
+];
+
+/**
+ * This behavior does not vary across modes/directions.
+ */
+configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
+  test.describe(title('select-modal: custom'), () => {
+    let selectModalPage: SelectModalPage;
+
+    test.beforeEach(async ({ page }) => {
+      selectModalPage = new SelectModalPage(page);
+    });
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    test('should render custom cancel text when prop is provided', async ({ page: _page }, testInfo) => {
+      testInfo.annotations.push({
+        type: 'issue',
+        description: 'https://github.com/ionic-team/ionic-framework/issues/30295',
+      });
+
+      await selectModalPage.setup(config, options, false);
+
+      const cancelButton = selectModalPage.selectModal.locator('ion-button');
+
+      // Verify the default text on the cancel button
+      await expect(cancelButton).toHaveText('Close');
+
+      await selectModalPage.selectModal.evaluate((selectModal: HTMLIonSelectModalElement) => {
+        selectModal.cancelText = 'Close me';
+      });
+
+      // Verify the cancel button text has been updated
+      await expect(cancelButton).toHaveText('Close me');
+    });
+  });
+});
diff --git a/core/src/components/select/select.tsx b/core/src/components/select/select.tsx
index 934807e0437..8071434ba8c 100644
--- a/core/src/components/select/select.tsx
+++ b/core/src/components/select/select.tsx
@@ -48,6 +48,9 @@ import type { SelectChangeEventDetail, SelectInterface, SelectCompareFn } from '
  * @part supporting-text - Supporting text displayed beneath the select.
  * @part helper-text - Supporting text displayed beneath the select when the select is valid.
  * @part error-text - Supporting text displayed beneath the select when the select is invalid and touched.
+ * @part bottom - The container element for helper text, error text, and counter.
+ * @part wrapper - The clickable label element that wraps the entire form field (label text, slots, selected values or placeholder, and toggle icons).
+ * @part inner - The inner element of the wrapper that manages the slots, selected values or placeholder, and toggle icons.
  */
 @Component({
   tag: 'ion-select',
@@ -811,6 +814,7 @@ export class Select implements ComponentInterface {
       component: 'ion-select-modal',
       componentProps: {
         header: interfaceOptions.header,
+        cancelText: this.cancelText,
         multiple,
         value,
         options: this.createOverlaySelectOptions(this.childOpts, value),
@@ -1267,7 +1271,11 @@ export class Select implements ComponentInterface {
       return;
     }
 
-    return <div class="select-bottom">{this.renderHintText()}</div>;
+    return (
+      <div class="select-bottom" part="bottom">
+        {this.renderHintText()}
+      </div>
+    );
   }
 
   render() {
@@ -1344,9 +1352,9 @@ export class Select implements ComponentInterface {
           [`select-size-${size}`]: size !== undefined,
         })}
       >
-        <label class="select-wrapper" id="select-label" onClick={this.onLabelClick}>
+        <label class="select-wrapper" id="select-label" onClick={this.onLabelClick} part="wrapper">
           {this.renderLabelContainer()}
-          <div class="select-wrapper-inner">
+          <div class="select-wrapper-inner" part="inner">
             {
               /**
                * For the ionic theme, we render the outline container here
diff --git a/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-modal-scroll-to-selected-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-modal-scroll-to-selected-ios-ltr-Mobile-Chrome-linux.png
index a66e87cecba..43fcd9ef709 100644
Binary files a/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-modal-scroll-to-selected-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-modal-scroll-to-selected-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-modal-scroll-to-selected-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-modal-scroll-to-selected-ios-ltr-Mobile-Firefox-linux.png
index 2e4f0b3a06f..b25f9c98d2f 100644
Binary files a/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-modal-scroll-to-selected-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-modal-scroll-to-selected-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-modal-scroll-to-selected-ios-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-modal-scroll-to-selected-ios-ltr-Mobile-Safari-linux.png
index e49ddb007b3..0cd3370fa9a 100644
Binary files a/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-modal-scroll-to-selected-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-modal-scroll-to-selected-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-modal-scroll-to-selected-md-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-modal-scroll-to-selected-md-ltr-Mobile-Chrome-linux.png
index 2acdba257d9..a75ada58efb 100644
Binary files a/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-modal-scroll-to-selected-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-modal-scroll-to-selected-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-modal-scroll-to-selected-md-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-modal-scroll-to-selected-md-ltr-Mobile-Firefox-linux.png
index 96561b7dad8..81dd78d1d86 100644
Binary files a/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-modal-scroll-to-selected-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-modal-scroll-to-selected-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-modal-scroll-to-selected-md-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-modal-scroll-to-selected-md-ltr-Mobile-Safari-linux.png
index a4e7755364c..984eb8a0483 100644
Binary files a/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-modal-scroll-to-selected-md-ltr-Mobile-Safari-linux.png and b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-modal-scroll-to-selected-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/custom/select.e2e.ts b/core/src/components/select/test/custom/select.e2e.ts
index 5d3a023e039..887fee15f45 100644
--- a/core/src/components/select/test/custom/select.e2e.ts
+++ b/core/src/components/select/test/custom/select.e2e.ts
@@ -77,5 +77,142 @@ configs({ modes: ['ios', 'md', 'ionic-md'], directions: ['ltr'] }).forEach(({ ti
       const wrapper = page.locator('.wrapper');
       await expect(wrapper).toHaveScreenshot(screenshot(`select-custom-parts-diff`));
     });
+
+    test('should be able to customize wrapper and bottom using css parts', async ({ page }) => {
+      test.info().annotations.push({
+        type: 'issue',
+        description: 'https://github.com/ionic-team/ionic-framework/issues/29918',
+      });
+
+      await page.setContent(
+        `
+          <style>
+            ion-select::part(wrapper) {
+              background-color: red;
+            }
+
+            ion-select::part(inner) {
+              background-color: orange;
+            }
+
+            ion-select::part(bottom) {
+              background-color: green;
+            }
+          </style>
+
+          <ion-select label="Select" label-placement="stacked" placeholder="Fruits" helper-text="Helper text">
+            <ion-select-option value="a">Apple</ion-select-option>
+          </ion-select>
+      `,
+        config
+      );
+
+      const select = page.locator('ion-select');
+      const wrapper = select.locator('.select-wrapper');
+      const wrapperInner = select.locator('.select-wrapper-inner');
+      const bottom = select.locator('.select-bottom');
+
+      const wrapperBackgroundColor = await wrapper.evaluate((el) => {
+        return window.getComputedStyle(el).backgroundColor;
+      });
+
+      const wrapperInnerBackgroundColor = await wrapperInner.evaluate((el) => {
+        return window.getComputedStyle(el).backgroundColor;
+      });
+
+      const bottomBackgroundColor = await bottom.evaluate((el) => {
+        return window.getComputedStyle(el).backgroundColor;
+      });
+
+      expect(wrapperBackgroundColor).toBe('rgb(255, 0, 0)');
+      expect(wrapperInnerBackgroundColor).toBe('rgb(255, 165, 0)');
+      expect(bottomBackgroundColor).toBe('rgb(0, 128, 0)');
+    });
+
+    test('should render custom cancel text when prop is provided with alert interface', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-select label="Fruit" interface="alert" value="bananas" cancel-text="Close me">
+          <ion-select-option value="apples">Apples</ion-select-option>
+          <ion-select-option value="bananas">Bananas</ion-select-option>
+          <ion-select-option value="oranges">Oranges</ion-select-option>
+        </ion-select>
+      `,
+        config
+      );
+
+      const select = page.locator('ion-select');
+      const ionAlertDidPresent = await page.spyOnEvent('ionAlertDidPresent');
+
+      await select.click();
+      await ionAlertDidPresent.next();
+
+      await page.waitForChanges();
+
+      const alert = page.locator('ion-alert');
+      const cancelButton = alert.locator('.alert-button-role-cancel');
+
+      // Verify the cancel button text
+      await expect(cancelButton).toHaveText('Close me');
+    });
+
+    test('should render custom cancel text when prop is provided with action sheet interface', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-select label="Fruit" interface="action-sheet" value="bananas" cancel-text="Close me">
+          <ion-select-option value="apples">Apples</ion-select-option>
+          <ion-select-option value="bananas">Bananas</ion-select-option>
+          <ion-select-option value="oranges">Oranges</ion-select-option>
+        </ion-select>
+      `,
+        config
+      );
+
+      const select = page.locator('ion-select');
+      const ionActionSheetDidPresent = await page.spyOnEvent('ionActionSheetDidPresent');
+
+      await select.click();
+      await ionActionSheetDidPresent.next();
+
+      await page.waitForChanges();
+
+      const actionSheet = page.locator('ion-action-sheet');
+      const cancelButton = actionSheet.locator('.action-sheet-cancel');
+
+      // Verify the cancel button text
+      await expect(cancelButton).toHaveText('Close me');
+    });
+
+    test('should render custom cancel text when prop is provided with modal interface', async ({ page }, testInfo) => {
+      testInfo.annotations.push({
+        type: 'issue',
+        description: 'https://github.com/ionic-team/ionic-framework/issues/30295',
+      });
+
+      await page.setContent(
+        `
+        <ion-select label="Fruit" interface="modal" value="bananas" cancel-text="Close me">
+          <ion-select-option value="apples">Apples</ion-select-option>
+          <ion-select-option value="bananas">Bananas</ion-select-option>
+          <ion-select-option value="oranges">Oranges</ion-select-option>
+        </ion-select>
+      `,
+        config
+      );
+
+      const select = page.locator('ion-select');
+      const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+
+      await select.click();
+      await ionModalDidPresent.next();
+
+      await page.waitForChanges();
+
+      const modal = page.locator('ion-modal');
+      const cancelButton = modal.locator('ion-button');
+
+      // Verify the cancel button text
+      await expect(cancelButton).toHaveText('Close me');
+    });
   });
 });
diff --git a/core/src/components/tab-bar/tab-bar.tsx b/core/src/components/tab-bar/tab-bar.tsx
index 0717172204a..c29ac90f08a 100644
--- a/core/src/components/tab-bar/tab-bar.tsx
+++ b/core/src/components/tab-bar/tab-bar.tsx
@@ -24,6 +24,7 @@ import type { TabBarChangedEventDetail } from './tab-bar-interface';
 })
 export class TabBar implements ComponentInterface {
   private keyboardCtrl: KeyboardController | null = null;
+  private keyboardCtrlPromise: Promise<KeyboardController> | null = null;
   private didLoad = false;
 
   @Element() el!: HTMLElement;
@@ -110,7 +111,7 @@ export class TabBar implements ComponentInterface {
   }
 
   async connectedCallback() {
-    this.keyboardCtrl = await createKeyboardController(async (keyboardOpen, waitForResize) => {
+    const promise = createKeyboardController(async (keyboardOpen, waitForResize) => {
       /**
        * If the keyboard is hiding, then we need to wait
        * for the webview to resize. Otherwise, the tab bar
@@ -122,11 +123,32 @@ export class TabBar implements ComponentInterface {
 
       this.keyboardVisible = keyboardOpen; // trigger re-render by updating state
     });
+    this.keyboardCtrlPromise = promise;
+
+    const keyboardCtrl = await promise;
+
+    /**
+     * Only assign if this is still the current promise.
+     * Otherwise, a new connectedCallback has started or
+     * disconnectedCallback was called, so destroy this instance.
+     */
+    if (this.keyboardCtrlPromise === promise) {
+      this.keyboardCtrl = keyboardCtrl;
+      this.keyboardCtrlPromise = null;
+    } else {
+      keyboardCtrl.destroy();
+    }
   }
 
   disconnectedCallback() {
+    if (this.keyboardCtrlPromise) {
+      this.keyboardCtrlPromise.then((ctrl) => ctrl.destroy());
+      this.keyboardCtrlPromise = null;
+    }
+
     if (this.keyboardCtrl) {
       this.keyboardCtrl.destroy();
+      this.keyboardCtrl = null;
     }
   }
 
diff --git a/core/src/components/textarea/textarea.common.scss b/core/src/components/textarea/textarea.common.scss
index 4787fef6a61..8e6ababcded 100644
--- a/core/src/components/textarea/textarea.common.scss
+++ b/core/src/components/textarea/textarea.common.scss
@@ -174,9 +174,13 @@
 // otherwise the .input-cover will not be rendered at all
 // The input cover is not clickable when the input is disabled
 .cloned-input {
-  @include position(0, null, 0, 0);
-
   position: absolute;
+  top: 0;
+  bottom: 0;
+
+  // Reset height since absolute positioning with top/bottom handles sizing
+  height: auto;
+  max-height: none;
 
   pointer-events: none;
 }
diff --git a/core/src/components/textarea/textarea.tsx b/core/src/components/textarea/textarea.tsx
index 0c5d19e5eb8..4d08327a356 100644
--- a/core/src/components/textarea/textarea.tsx
+++ b/core/src/components/textarea/textarea.tsx
@@ -150,7 +150,7 @@ export class Textarea implements ComponentInterface {
   /**
    * If `true`, the user cannot interact with the textarea.
    */
-  @Prop() disabled = false;
+  @Prop({ reflect: true }) disabled = false;
 
   /**
    * Update element internals when disabled prop changes
@@ -203,7 +203,7 @@ export class Textarea implements ComponentInterface {
   /**
    * If `true`, the user cannot modify the value.
    */
-  @Prop() readonly = false;
+  @Prop({ reflect: true }) readonly = false;
 
   /**
    * If `true`, the user must fill in a value before submitting a form.
diff --git a/core/src/components/toast/test/custom/toast.e2e.ts b/core/src/components/toast/test/custom/toast.e2e.ts
new file mode 100644
index 00000000000..a607e3e238b
--- /dev/null
+++ b/core/src/components/toast/test/custom/toast.e2e.ts
@@ -0,0 +1,133 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+/**
+ * This behavior does not vary across directions
+ */
+configs({ directions: ['ltr'] }).forEach(({ config, title }) => {
+  test.describe(title('toast: custom'), () => {
+    test('should be able to customize toast wrapper, container, and content using css parts', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-toast is-open="true" header="Header" message="Hello World"></ion-toast>
+
+        <style>
+          ion-toast::part(wrapper) {
+            background-color: red;
+          }
+          ion-toast::part(container) {
+            background-color: green;
+          }
+          ion-toast::part(content) {
+            background-color: blue;
+          }
+        </style>
+      `,
+        config
+      );
+
+      const wrapperColor = await page.locator('ion-toast').evaluate((el: any) => {
+        const partEl = el.shadowRoot?.querySelector('[part="wrapper"]') as HTMLElement | null;
+        return partEl ? getComputedStyle(partEl).backgroundColor : null;
+      });
+
+      expect(wrapperColor).toBe('rgb(255, 0, 0)');
+
+      const containerColor = await page.locator('ion-toast').evaluate((el: any) => {
+        const partEl = el.shadowRoot?.querySelector('[part="container"]') as HTMLElement | null;
+        return partEl ? getComputedStyle(partEl).backgroundColor : null;
+      });
+
+      expect(containerColor).toBe('rgb(0, 128, 0)');
+
+      const contentColor = await page.locator('ion-toast').evaluate((el: any) => {
+        const partEl = el.shadowRoot?.querySelector('[part="content"]') as HTMLElement | null;
+        return partEl ? getComputedStyle(partEl).backgroundColor : null;
+      });
+
+      expect(contentColor).toBe('rgb(0, 0, 255)');
+    });
+
+    test('should be able to customize toast header and message using css parts', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-toast is-open="true" header="Header" message="Hello World"></ion-toast>
+
+        <style>
+          ion-toast::part(header) {
+            color: red;
+          }
+          ion-toast::part(message) {
+            color: green;
+          }
+        </style>
+      `,
+        config
+      );
+
+      const headerColor = await page.locator('ion-toast').evaluate((el: any) => {
+        const partEl = el.shadowRoot?.querySelector('[part="header"]') as HTMLElement | null;
+        return partEl ? getComputedStyle(partEl).color : null;
+      });
+
+      expect(headerColor).toBe('rgb(255, 0, 0)');
+
+      const messageColor = await page.locator('ion-toast').evaluate((el: any) => {
+        const partEl = el.shadowRoot?.querySelector('[part="message"]') as HTMLElement | null;
+        return partEl ? getComputedStyle(partEl).color : null;
+      });
+
+      expect(messageColor).toBe('rgb(0, 128, 0)');
+    });
+
+    test('should be able to customize toast icon, button, and button cancel using css parts', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-toast is-open="true" header="Header" message="Hello World" icon="alert"></ion-toast>
+
+        <style>
+          ion-toast::part(icon) {
+            color: red;
+          }
+          ion-toast::part(button) {
+            color: green;
+          }
+          ion-toast::part(button cancel) {
+            color: blue;
+          }
+        </style>
+
+        <script>
+          const toast = document.querySelector('ion-toast');
+          toast.buttons = [
+            { text: 'Cancel', role: 'cancel' },
+            { text: 'OK' }
+          ];
+        </script>
+      `,
+        config
+      );
+
+      const iconColor = await page.locator('ion-toast').evaluate((el: any) => {
+        const partEl = el.shadowRoot?.querySelector('[part="icon"]') as HTMLElement | null;
+        return partEl ? getComputedStyle(partEl).color : null;
+      });
+
+      expect(iconColor).toBe('rgb(255, 0, 0)');
+
+      const buttonColor = await page.locator('ion-toast').evaluate((el: any) => {
+        const partEl = el.shadowRoot?.querySelector('[part="button"]') as HTMLElement | null;
+        return partEl ? getComputedStyle(partEl).color : null;
+      });
+
+      expect(buttonColor).toBe('rgb(0, 128, 0)');
+
+      const buttonCancelColor = await page.locator('ion-toast').evaluate((el: any) => {
+        const partEl = el.shadowRoot?.querySelector('[part="button cancel"]') as HTMLElement | null;
+        return partEl ? getComputedStyle(partEl).color : null;
+      });
+
+      expect(buttonCancelColor).toBe('rgb(0, 0, 255)');
+    });
+  });
+});
diff --git a/core/src/components/toast/test/layout/index.html b/core/src/components/toast/test/layout/index.html
index 81a2760bdb1..227539c7369 100644
--- a/core/src/components/toast/test/layout/index.html
+++ b/core/src/components/toast/test/layout/index.html
@@ -29,6 +29,9 @@
       <ion-content class="ion-padding">
         <button id="baseline" onclick="openToast(baselineConfig)">Open Baseline Layout Toast</button>
         <button id="stacked" onclick="openToast(stackedConfig)">Open Stacked Layout Toast</button>
+        <button id="stacked-long-message" onclick="openToast(stackedLongMessageConfig)">
+          Open Stacked Layout Toast with Long Message
+        </button>
       </ion-content>
 
       <script>
@@ -52,6 +55,13 @@
           message: 'This is a stacked layout toast.',
           layout: 'stacked',
         };
+
+        const stackedLongMessageConfig = {
+          ...baselineConfig,
+          message:
+            'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum in elit varius, maximus sem in, bibendum justo.',
+          layout: 'stacked',
+        };
       </script>
     </ion-app>
   </body>
diff --git a/core/src/components/toast/test/layout/toast.e2e.ts b/core/src/components/toast/test/layout/toast.e2e.ts
index f4fb2667fa6..4153df86e2e 100644
--- a/core/src/components/toast/test/layout/toast.e2e.ts
+++ b/core/src/components/toast/test/layout/toast.e2e.ts
@@ -3,7 +3,7 @@ import { configs, test } from '@utils/test/playwright';
 
 configs().forEach(({ title, screenshot, config }) => {
   test.describe(title('toast: stacked layout'), () => {
-    test('should render stacked buttons', async ({ page }) => {
+    test('should render stacked toast', async ({ page }) => {
       await page.goto('/src/components/toast/test/layout', config);
       const ionToastDidPresent = await page.spyOnEvent('ionToastDidPresent');
 
@@ -13,5 +13,21 @@ configs().forEach(({ title, screenshot, config }) => {
       const toastWrapper = page.locator('ion-toast .toast-wrapper');
       await expect(toastWrapper).toHaveScreenshot(screenshot(`toast-stacked`));
     });
+
+    test('should render stacked toast with long message', async ({ page }, testInfo) => {
+      testInfo.annotations.push({
+        type: 'issue',
+        description: 'https://github.com/ionic-team/ionic-framework/issues/30908',
+      });
+
+      await page.goto('/src/components/toast/test/layout', config);
+      const ionToastDidPresent = await page.spyOnEvent('ionToastDidPresent');
+
+      await page.click('#stacked-long-message');
+      await ionToastDidPresent.next();
+
+      const toastWrapper = page.locator('ion-toast .toast-wrapper');
+      await expect(toastWrapper).toHaveScreenshot(screenshot(`toast-stacked-long-message`));
+    });
   });
 });
diff --git a/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-long-message-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-long-message-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..ead92eb7b8a
Binary files /dev/null and b/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-long-message-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-long-message-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-long-message-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..f89674be14f
Binary files /dev/null and b/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-long-message-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-long-message-ios-ltr-Mobile-Safari-linux.png b/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-long-message-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..53ed8fe91da
Binary files /dev/null and b/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-long-message-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-long-message-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-long-message-ios-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..29108fa1502
Binary files /dev/null and b/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-long-message-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-long-message-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-long-message-ios-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..a308640f0c1
Binary files /dev/null and b/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-long-message-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-long-message-ios-rtl-Mobile-Safari-linux.png b/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-long-message-ios-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..9fcd0ca25dd
Binary files /dev/null and b/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-long-message-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-long-message-md-ltr-Mobile-Chrome-linux.png b/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-long-message-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..b78b20510ba
Binary files /dev/null and b/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-long-message-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-long-message-md-ltr-Mobile-Firefox-linux.png b/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-long-message-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..e3e44383edc
Binary files /dev/null and b/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-long-message-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-long-message-md-ltr-Mobile-Safari-linux.png b/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-long-message-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..15d9f9c58c4
Binary files /dev/null and b/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-long-message-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-long-message-md-rtl-Mobile-Chrome-linux.png b/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-long-message-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..f081178ba8a
Binary files /dev/null and b/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-long-message-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-long-message-md-rtl-Mobile-Firefox-linux.png b/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-long-message-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..447c93633d5
Binary files /dev/null and b/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-long-message-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-long-message-md-rtl-Mobile-Safari-linux.png b/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-long-message-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..421f5b7fc42
Binary files /dev/null and b/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-long-message-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toast/toast.common.scss b/core/src/components/toast/toast.common.scss
index d1cf4188910..636989c214b 100644
--- a/core/src/components/toast/toast.common.scss
+++ b/core/src/components/toast/toast.common.scss
@@ -131,12 +131,13 @@
 .toast-layout-baseline .toast-content {
   display: flex;
 
-  flex: 1;
   flex-direction: column;
   justify-content: center;
 }
 
 .toast-content {
+  flex: 1;
+
   min-width: 0;
 }
 
diff --git a/core/src/components/toast/toast.tsx b/core/src/components/toast/toast.tsx
index 430a0b9d9be..a6b498624da 100644
--- a/core/src/components/toast/toast.tsx
+++ b/core/src/components/toast/toast.tsx
@@ -48,12 +48,14 @@ import type {
  * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
  * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
  *
- * @part button - Any button element that is displayed inside of the toast.
- * @part button cancel - Any button element with role "cancel" that is displayed inside of the toast.
- * @part container - The element that wraps all child elements.
+ * @part wrapper - The outer wrapper for the toast overlay.
+ * @part container - Groups the icon, content, and buttons.
+ * @part content - The live region that contains the header and message.
  * @part header - The header text of the toast.
  * @part message - The body text of the toast.
  * @part icon - The icon that appears next to the toast content.
+ * @part button - Any button element that is displayed inside of the toast.
+ * @part button cancel - Any button element with role "cancel" that is displayed inside of the toast.
  */
 @Component({
   tag: 'ion-toast',
@@ -767,7 +769,7 @@ export class Toast implements ComponentInterface, OverlayInterface {
         })}
         onIonToastWillDismiss={this.dispatchCancelHandler}
       >
-        <div class={wrapperClass}>
+        <div class={wrapperClass} part="wrapper">
           <div class="toast-container" part="container">
             {this.renderButtons(startButtons, 'start')}
 
@@ -786,7 +788,7 @@ export class Toast implements ComponentInterface, OverlayInterface {
               not interrupt the user which is why this has
               a "status" role and a "polite" presentation.
             */}
-            <div class="toast-content" role="status" aria-atomic="true" aria-live="polite">
+            <div class="toast-content" part="content" role="status" aria-atomic="true" aria-live="polite">
               {/*
                 This logic below is done to improve consistency
                 across platforms when showing and updating live regions.
diff --git a/core/src/global/ionic-global.ts b/core/src/global/ionic-global.ts
index 6788304e821..603ac9f5304 100644
--- a/core/src/global/ionic-global.ts
+++ b/core/src/global/ionic-global.ts
@@ -9,6 +9,7 @@ import { config, configFromSession, configFromURL, saveConfig } from './config';
 
 let defaultMode: Mode;
 let defaultTheme: Theme = 'md';
+let rICHandle: number | undefined;
 
 /**
  * Prints a warning message to the developer to inform them of
@@ -132,11 +133,18 @@ export const getIonTheme = (ref?: any): Theme => {
   return defaultTheme;
 };
 
-export const rIC = (callback: () => void) => {
+export const rIC = (callback: () => void): number => {
   if ('requestIdleCallback' in window) {
-    (window as any).requestIdleCallback(callback);
+    return (window as any).requestIdleCallback(callback);
+  }
+  return setTimeout(callback, 32) as any;
+};
+
+export const cIC = (id: number) => {
+  if ('cancelIdleCallback' in window) {
+    (window as any).cancelIdleCallback(id);
   } else {
-    setTimeout(callback, 32);
+    clearTimeout(id);
   }
 };
 
@@ -279,7 +287,12 @@ export const initialize = (userConfig: IonicConfig = {}) => {
   // ----------------------------------------------
 
   if (Build.isBrowser) {
-    rIC(async () => {
+    // If initialize is called again, clear the previous pending callback
+    if (rICHandle !== undefined) {
+      cIC(rICHandle);
+    }
+
+    rICHandle = rIC(async () => {
       const isHybrid = isPlatform(window, 'hybrid');
       if (!config.getBoolean('_testing')) {
         import('../utils/tap-click').then((module) => module.startTapClick(config));
@@ -316,6 +329,9 @@ export const initialize = (userConfig: IonicConfig = {}) => {
         import('../utils/keyboard/keyboard').then((module) => module.startKeyboardAssist(window));
       }
       import('../utils/focus-visible').then((module) => module.getOrInitFocusVisibleUtility());
+
+      // Reset handle once executed
+      rICHandle = undefined;
     });
   }
 };
diff --git a/core/src/interface.d.ts b/core/src/interface.d.ts
index 158b8ad1c19..95166b89616 100644
--- a/core/src/interface.d.ts
+++ b/core/src/interface.d.ts
@@ -17,14 +17,14 @@ export { CounterFormatter } from './components/item/item-interface';
 export { ItemSlidingCustomEvent } from './components/item-sliding/item-sliding-interface';
 export { LoadingOptions } from './components/loading/loading-interface';
 export { MenuCustomEvent, MenuI, MenuControllerI } from './components/menu/menu-interface';
-export { ModalOptions, ModalCustomEvent } from './components/modal/modal-interface';
+export { ModalOptions, ModalCustomEvent, ModalDragEventDetail } from './components/modal/modal-interface';
 export { NavDirection, NavCustomEvent } from './components/nav/nav-interface';
 export { PickerOptions, PickerColumnOption } from './components/picker-legacy/picker-interface';
 export { PopoverOptions } from './components/popover/popover-interface';
 export { RadioGroupCustomEvent } from './components/radio-group/radio-group-interface';
 export { RangeCustomEvent, PinFormatter } from './components/range/range-interface';
 export { RouterCustomEvent } from './components/router/utils/interface';
-export { RefresherCustomEvent } from './components/refresher/refresher-interface';
+export { RefresherCustomEvent, RefresherPullEndCustomEvent } from './components/refresher/refresher-interface';
 export {
   ItemReorderCustomEvent,
   ReorderEndCustomEvent,
diff --git a/core/src/utils/input-shims/hacks/common.ts b/core/src/utils/input-shims/hacks/common.ts
index 2f42749c2ed..7553c07e103 100644
--- a/core/src/utils/input-shims/hacks/common.ts
+++ b/core/src/utils/input-shims/hacks/common.ts
@@ -68,11 +68,26 @@ const addClone = (
   if (disabledClonedInput) {
     clonedEl.disabled = true;
   }
+
+  /**
+   * Position the clone at the same horizontal offset as the native input
+   * to prevent the placeholder from overlapping start slot content (e.g., icons).
+   */
+  const doc = componentEl.ownerDocument!;
+  const isRTL = doc.dir === 'rtl';
+
+  if (isRTL) {
+    const parentWidth = (parentEl as HTMLElement).offsetWidth;
+    const startOffset = parentWidth - inputEl.offsetLeft - inputEl.offsetWidth;
+    clonedEl.style.insetInlineStart = `${startOffset}px`;
+  } else {
+    clonedEl.style.insetInlineStart = `${inputEl.offsetLeft}px`;
+  }
+
   parentEl.appendChild(clonedEl);
   cloneMap.set(componentEl, clonedEl);
 
-  const doc = componentEl.ownerDocument!;
-  const tx = doc.dir === 'rtl' ? 9999 : -9999;
+  const tx = isRTL ? 9999 : -9999;
   componentEl.style.pointerEvents = 'none';
   inputEl.style.transform = `translate3d(${tx}px,${inputRelativeY}px,0) scale(0)`;
 };
diff --git a/core/src/utils/input-shims/hacks/scroll-assist.ts b/core/src/utils/input-shims/hacks/scroll-assist.ts
index fb2b1900202..9d4685cb8da 100644
--- a/core/src/utils/input-shims/hacks/scroll-assist.ts
+++ b/core/src/utils/input-shims/hacks/scroll-assist.ts
@@ -291,8 +291,14 @@ const jsSetFocus = async (
       // give the native text input focus
       relocateInput(componentEl, inputEl, false, scrollData.inputSafeY);
 
-      // ensure this is the focused input
-      setManualFocus(inputEl);
+      /**
+       * If focus has moved to another element while scroll assist was running,
+       * don't steal focus back. This prevents focus jumping when users
+       * quickly switch between inputs or tap other elements.
+       */
+      if (document.activeElement === inputEl) {
+        setManualFocus(inputEl);
+      }
 
       /**
        * When the input is about to be blurred
diff --git a/core/stencil.config.ts b/core/stencil.config.ts
index 564ecb1f46a..9340a00f095 100644
--- a/core/stencil.config.ts
+++ b/core/stencil.config.ts
@@ -226,7 +226,13 @@ export const config: Config = {
         dest: 'components',
         warn: true
       }],
-      includeGlobalScripts: false
+      includeGlobalScripts: false,
+      /**
+       * External Runtime uses default runtime settings instead of this file's definitions. Disabling it enables
+       * `experimentalSlotFixes` to be applied and prevents `@stencil/core/internal/client` from being imported, which
+       * contains a dynamic import that caused a warning in Angular.
+      */
+      externalRuntime: false,
     },
     {
       type: 'docs-json',
diff --git a/docs/README.md b/docs/README.md
index 85cbbc9422d..bd2021581ce 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -23,6 +23,7 @@ It is based on <a href="https://www.webcomponents.org/introduction">Web Componen
 | [Contributing](./CONTRIBUTING.md)       | How to contribute including creating pull requests, commit message guidelines, and more. |
 | [Component Guide](./component-guide.md) | Guidelines for implementing component states, accessibility, and more.                   |
 | [Sass Guidelines](./sass-guidelines.md) | Outlines scenarios where Sass members and comments should be used.                       |
+| [CSS Shadow Parts Guidelines](./shadow-parts-guidelines.md) | Guidelines for CSS shadow parts in components.                       |
 
 ## Packages
 
diff --git a/docs/component-guide.md b/docs/component-guide.md
index fbc69fdbd36..aa731410d69 100644
--- a/docs/component-guide.md
+++ b/docs/component-guide.md
@@ -17,6 +17,8 @@
   * [Example Components](#example-components-4)
   * [Component Structure](#component-structure-1)
 - [Converting Scoped to Shadow](#converting-scoped-to-shadow)
+- [Sass Variables](#sass-variables)
+- [CSS Shadow Parts](#css-shadow-parts)
 - [RTL](#rtl)
 - [Themes vs. Modes](#themes-vs-modes)
 - [Adding New Components with Native Input Support](#adding-new-components-with-native-input-support)
@@ -723,6 +725,14 @@ There will be some CSS issues when converting to shadow. Below are some of the d
 :host-context(ion-toolbar:not(.ion-color)):host(:not(.ion-color)) ::slotted(ion-segment-button) {
 ```
 
+## Sass Variables
+
+For guidelines on when to use Sass Variables, see the [Sass Guidelines](./sass-guidelines.md).
+
+## CSS Shadow Parts
+
+For guidelines on adding CSS shadow parts, see the [CSS Shadow Parts Guidelines](./shadow-parts-guidelines.md).
+
 ## RTL
 
 When you need to support both LTR and RTL modes, try to avoid using values such as `left` and `right`. For certain CSS properties, you can use the appropriate mixin to have this handled for you automatically.
diff --git a/docs/sass-guidelines.md b/docs/sass-guidelines.md
index ac0a91d728a..9aef52d4cd6 100644
--- a/docs/sass-guidelines.md
+++ b/docs/sass-guidelines.md
@@ -1,5 +1,6 @@
 # Sass Guidelines
 
+<sub><b>TABLE OF CONTENTS</b></sub>
 - [Definitions](#definitions)
 - [Scope](#scope)
 - [Historical Usage](#historical-usage)
diff --git a/docs/shadow-parts-guidelines.md b/docs/shadow-parts-guidelines.md
new file mode 100644
index 00000000000..971a0182693
--- /dev/null
+++ b/docs/shadow-parts-guidelines.md
@@ -0,0 +1,277 @@
+# CSS Shadow Parts Guidelines
+
+<sub><b>TABLE OF CONTENTS</b></sub>
+- [Definitions](#definitions)
+- [Scope](#scope)
+- [General Guidelines](#general-guidelines)
+- [Standard Parts](#standard-parts)
+- [Specialized Parts](#specialized-parts)
+- [Documentation](#documentation)
+
+## Definitions
+
+**CSS Shadow Parts:** The CSS shadow parts module defines the [::part()](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/::part) pseudo-element that can be set on a [shadow host](https://developer.mozilla.org/en-US/docs/Glossary/Shadow_tree). Using this pseudo-element, you can enable shadow hosts to expose the selected element in the shadow tree to the outside page for styling purposes. [^1]
+
+## Scope
+
+Ionic Framework components that use Shadow DOM expose CSS Shadow Parts to enable custom styling by end users.
+
+This document establishes a standardized naming convention for CSS Shadow Parts in Ionic Framework components.
+
+## General Guidelines
+
+1. **Attempt to use standard parts first**: Use `native`, `wrapper`, `inner`, `container`, and `content` wherever they apply before inventing new names.
+2. **Use semantic, kebab-case names**: Choose descriptive names that communicate the role of the element (for example, `detail-icon`, `supporting-text`).
+3. **Reuse names for the same concept**: Use the same part name across components when the element serves the same role (for example, `backdrop`, `handle`, `label`).
+
+## Standard Parts
+
+**Name parts by what the element does, not where it appears.** Ask what role the element plays:
+
+| Name | Role |
+| --- | --- |
+| `native` | Is it a native HTML element that the user interacts with (e.g. `<button>`, `<a>`, `<input>`, `<textarea>`)? |
+| `wrapper` | Is it a native `<label>` element that wraps the whole form control? |
+| `inner` | Is it the inner layout wrapper around the main content? It may wrap only the default slot (e.g. `ion-list-header`), or a container plus slot(s) (e.g. `ion-item`, `ion-item-divider`, `ion-item-option`) when present. |
+| `container` | Does it wrap the main content itself (default slot or native control)? |
+| `content` | Is it the main user-content area of an overlay or primary content region? |
+
+The following examples show the correct usage for the standard parts.
+
+### `native`
+
+**What it does:** The element the user directly interacts with - the native button, anchor, or form control (e.g. `<button>`, `<a>`, `<textarea>`, `<input>`).
+
+- **Use when**: The element receives click/focus/input from the user.
+- **Examples**: `ion-item`, `ion-button`, `ion-textarea`.
+
+**ion-item** - the interactive element is the `<button>`, `<a>`, or `<div>` (`TagType`):
+
+```tsx
+const TagType = clickable ? (href === undefined ? 'button' : 'a') : ('div' as any);
+
+return (
+  <Host>
+    <TagType class="item-native" part="native">
+      <slot name="start"></slot>
+      <div class="item-inner" part="inner">
+        <div class="input-wrapper" part="container">
+          <slot></slot>
+        </div>
+        <slot name="end"></slot>
+      </div>
+    </TagType>
+  </Host>
+);
+```
+
+**ion-textarea** - the interactive element is the native `<textarea>`:
+
+```tsx
+<div class="native-wrapper" part="container">
+  <textarea class="native-textarea" part="native">
+    {value}
+  </textarea>
+</div>
+```
+
+### `wrapper`
+
+**What it does:** The HTML `<label>` element that wraps the entire form control. Clicking anywhere on it focuses the control.
+
+- **Use when**: The element is the `<label>` that wraps the form control.
+- **Examples**: `ion-select`, `ion-textarea`, `ion-input`, `ion-checkbox`, `ion-toggle`, `ion-radio`, `ion-range`.
+
+**ion-select** - the `<label>` has `part="wrapper"`:
+
+```tsx
+<label class="select-wrapper" part="wrapper">
+  {this.renderLabelContainer()}
+  <div class="select-wrapper-inner" part="inner">
+    <slot name="start"></slot>
+    <div class="native-wrapper" part="container">...</div>
+    <slot name="end"></slot>
+  </div>
+</label>
+```
+
+**ion-textarea** - the `<label>` has `part="wrapper"`:
+
+```tsx
+<label class="textarea-wrapper" part="wrapper">
+  {this.renderLabelContainer()}
+  <div class="textarea-wrapper-inner" part="inner">
+    <slot name="start"></slot>
+    <div class="native-wrapper" part="container">...</div>
+    <slot name="end"></slot>
+  </div>
+</label>
+```
+
+### `inner`
+
+**What it does:** The inner layout wrapper around the main content. It may wrap only the default slot (e.g. `ion-list-header`), or it may wrap a container and the slot(s) (e.g. `start`, `end`) that sit alongside the main content. In `ion-item`, and `ion-item-divider`, the `start` slot is a sibling of this element. In `ion-select`, both `start` and `end` slots are inside this element.
+
+- **Use when**: The element is the inner layout wrapper (with or without a separate container and `start`/`end` slots).
+- **Examples**: `ion-list-header` (`.list-header-inner` wraps only the default slot), `ion-item` (`.item-inner`), `ion-item-divider` (`.item-divider-inner`), `ion-select` (`.select-wrapper-inner`).
+
+**ion-list-header** - `.list-header-inner` wraps only the default slot (no container, no `start`/`end` slots):
+
+```tsx
+<div class="list-header-inner" part="inner">
+  <slot></slot>
+</div>
+```
+
+**ion-item** - `.item-inner` wraps the container and `end` slot (`start` slot is a sibling):
+
+```tsx
+<slot name="start"></slot>
+<div class="item-inner" part="inner">
+  <div class="input-wrapper" part="container">
+    <slot></slot>
+  </div>
+  <slot name="end"></slot>
+</div>
+```
+
+**ion-item-divider** - `.item-divider-inner` wraps the container and `end` slot (`start` slot is a sibling):
+
+```tsx
+<slot name="start"></slot>
+<div class="item-divider-inner" part="inner">
+  <div class="item-divider-wrapper" part="container">
+    <slot></slot>
+  </div>
+  <slot name="end"></slot>
+</div>
+```
+
+**ion-select** - `.select-wrapper-inner` arranges `start` slot, container, `end` slot:
+
+```tsx
+<div class="select-wrapper-inner" part="inner">
+  <slot name="start"></slot>
+  <div class="native-wrapper" part="container"></div>
+  <slot name="end"></slot>
+</div>
+```
+
+### `container`
+
+**What it does:** Wraps the main content - either the default slot (for item-like components) or the native control and its immediate content (for form controls like select, textarea).
+
+- **Use when**: The element wraps the default slot, or wraps the native control (and any immediate content like listbox or slots inside it).
+- **Don’t use when**: The element is the main content area of an overlay (use `content` instead).
+- **Examples**: `ion-item` (`.input-wrapper` around default slot), `ion-item-divider` (`.item-divider-wrapper`), `ion-select` (`.native-wrapper` around select text + listbox), `ion-textarea` (`.native-wrapper` around `<textarea>`).
+
+From the examples above:
+
+**ion-item** - `.input-wrapper` wraps the default `<slot>`:
+
+```tsx
+<slot name="start"></slot>
+<div class="item-inner" part="inner">
+  <div class="input-wrapper" part="container">
+    <slot></slot>
+  </div>
+  <slot name="end"></slot>
+</div>
+```
+
+**ion-select** - `.native-wrapper` wraps the select text and listbox:
+
+```tsx
+<div class="select-wrapper-inner" part="inner">
+  <slot name="start"></slot>
+  <div class="native-wrapper" part="container">
+    {this.renderSelectText()}
+    {this.renderListbox()}
+  </div>
+  <slot name="end"></slot>
+</div>
+```
+
+**ion-textarea** - `.native-wrapper` wraps the `<textarea>`:
+
+```tsx
+<label class="textarea-wrapper" part="wrapper">
+  {this.renderLabelContainer()}
+  <div class="textarea-wrapper-inner" part="inner">
+    <slot name="start"></slot>
+    <div class="native-wrapper" part="container">
+      <textarea class="native-textarea" part="native">
+        {value}
+      </textarea>
+    </div>
+    <slot name="end"></slot>
+  </div>
+</label>
+```
+
+### `content`
+
+**What it does:** The main user-content area of an overlay or the primary content region (e.g. modal body, toolbar’s main slot).
+
+- **Use when**: The element is the primary content area where users see the main content (overlay body, or primary slot inside something like a toolbar).
+- **Examples**: `ion-modal`, `ion-popover`, `ion-accordion`, `ion-toolbar` (the div that wraps the default slot inside the toolbar container).
+
+**ion-modal** - `content` wraps the default `<slot>` which is the primary content:
+
+```tsx
+<div class="modal-content" part="content">
+  <slot></slot>
+</div>
+```
+
+**ion-toolbar** - `content` wraps the default `<slot>` which is the primary content:
+
+```tsx
+<div class="toolbar-container" part="container">
+  <slot name="start"></slot>
+  <slot name="secondary"></slot>
+  <div class="toolbar-content" part="content">
+    <slot></slot>
+  </div>
+  <slot name="primary"></slot>
+  <slot name="end"></slot>
+</div>
+```
+
+## Specialized Parts
+
+Components may also expose specialized parts for specific elements. The following parts are reused across multiple components:
+
+| Name | Description |
+| --- | --- |
+| `background` | Background elements (e.g., `ion-content`, `ion-toolbar`) |
+| `backdrop` | Backdrop elements. **Must only be used on `<ion-backdrop>` components.** (e.g., `ion-modal`, `ion-popover`, `ion-menu`) |
+| `label` | Label text elements - not the HTML `<label>` (see standard part `wrapper`) |
+| `supporting-text` | Supporting text elements |
+| `helper-text` | Helper text elements |
+| `error-text` | Error text elements |
+| `icon` | Icon elements. **Must only be used on `<ion-icon>` components.** Use specific names like `detail-icon`, `close-icon` when the icon serves a distinct purpose (e.g., `ion-item` uses `detail-icon`, `ion-fab-button` uses `close-icon`) |
+| `handle` | Handle elements (e.g., `ion-modal`, `ion-toggle`) |
+| `track` | Track elements (e.g., `ion-toggle`, `ion-progress-bar`) |
+| `mark` | Checkmark or indicator marks (e.g., `ion-checkbox`, `ion-radio`) |
+
+**When to create new specialized parts:**
+- Use standard parts (`native`, `wrapper`, `inner`, `container`, `content`) when they apply
+- Reuse existing specialized parts (listed above) when they match the element's role
+- Create component-specific specialized parts for elements that don't fit standard patterns or existing specialized parts
+- Use descriptive, semantic names (e.g., `header`, `text`, `arrow`, `scroll` for component-specific elements)
+
+## Documentation
+
+Shadow parts must be documented in the component's JSDoc comments using the `@part` tag. The following example demonstrates the proper documentation format:
+
+```tsx
+/**
+ * @part native - The native HTML button, anchor or div element that wraps all child elements.
+ * @part inner - The inner wrapper element that arranges the item content.
+ * @part container - The wrapper element that contains the default slot.
+ * @part detail-icon - The chevron icon for the item. Only applies when `detail="true"`.
+ */
+```
+
+[^1]: MDN Documentation - CSS shadow parts, https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Shadow_parts
diff --git a/lerna.json b/lerna.json
index cec6780d8e0..b66ec69b0a6 100644
--- a/lerna.json
+++ b/lerna.json
@@ -3,5 +3,5 @@
     "core",
     "packages/*"
   ],
-  "version": "8.7.15"
+  "version": "8.8.0"
 }
\ No newline at end of file
diff --git a/packages/angular-server/CHANGELOG.md b/packages/angular-server/CHANGELOG.md
index 6e2c47e231f..18166731bff 100644
--- a/packages/angular-server/CHANGELOG.md
+++ b/packages/angular-server/CHANGELOG.md
@@ -3,6 +3,38 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.8.0](https://github.com/ionic-team/ionic-framework/compare/v8.7.18...v8.8.0) (2026-03-04)
+
+**Note:** Version bump only for package @ionic/angular-server
+
+
+
+
+
+## [8.7.18](https://github.com/ionic-team/ionic-framework/compare/v8.7.17...v8.7.18) (2026-02-25)
+
+**Note:** Version bump only for package @ionic/angular-server
+
+
+
+
+
+## [8.7.17](https://github.com/ionic-team/ionic-framework/compare/v8.7.15...v8.7.17) (2026-01-14)
+
+**Note:** Version bump only for package @ionic/angular-server
+
+
+
+
+
+## [8.7.16](https://github.com/ionic-team/ionic-framework/compare/v8.7.15...v8.7.16) (2025-12-31)
+
+**Note:** Version bump only for package @ionic/angular-server
+
+
+
+
+
 ## [8.7.15](https://github.com/ionic-team/ionic-framework/compare/v8.7.14...v8.7.15) (2025-12-23)
 
 **Note:** Version bump only for package @ionic/angular-server
diff --git a/packages/angular-server/package-lock.json b/packages/angular-server/package-lock.json
index 400af1cf1ea..23e996c46f6 100644
--- a/packages/angular-server/package-lock.json
+++ b/packages/angular-server/package-lock.json
@@ -1,15 +1,15 @@
 {
   "name": "@ionic/angular-server",
-  "version": "8.7.15",
+  "version": "8.8.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/angular-server",
-      "version": "8.7.15",
+      "version": "8.8.0",
       "license": "MIT",
       "dependencies": {
-        "@ionic/core": "^8.7.15"
+        "@ionic/core": "^8.8.0"
       },
       "devDependencies": {
         "@angular-eslint/eslint-plugin": "^16.0.0",
@@ -1031,12 +1031,12 @@
       "dev": true
     },
     "node_modules/@ionic/core": {
-      "version": "8.7.15",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.7.15.tgz",
-      "integrity": "sha512-u1w9c6dx2iuatXIW5X1JY0ighDhQPjBwOHZsrOcnpm891pktuEjJDdyhDulWFa6kKVkXw1q7khwxXBEurvKc2g==",
+      "version": "8.8.0",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.8.0.tgz",
+      "integrity": "sha512-DNmTMK26EquKiCYqYCJHBjTZTeoDxY8hpgPQTinQEJMAoFthstcAhyWMDBwDvo/aEHEvE4tlCZV2XUMxTlTIEw==",
       "license": "MIT",
       "dependencies": {
-        "@stencil/core": "4.38.0",
+        "@stencil/core": "4.43.0",
         "ionicons": "^8.0.13",
         "tslib": "^2.1.0"
       },
@@ -1389,9 +1389,9 @@
       ]
     },
     "node_modules/@stencil/core": {
-      "version": "4.38.0",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.38.0.tgz",
-      "integrity": "sha512-oC3QFKO0X1yXVvETgc8OLY525MNKhn9vISBrbtKnGoPlokJ6rI8Vk1RK22TevnNrHLI4SExNLbcDnqilKR35JQ==",
+      "version": "4.43.0",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.43.0.tgz",
+      "integrity": "sha512-6Uj2Z3lzLuufYAE7asZ6NLKgSwsB9uxl84Eh34PASnUjfj32GkrP4DtKK7fNeh1WFGGyffsTDka3gwtl+4reUg==",
       "license": "MIT",
       "bin": {
         "stencil": "bin/stencil"
@@ -7309,11 +7309,11 @@
       "dev": true
     },
     "@ionic/core": {
-      "version": "8.7.15",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.7.15.tgz",
-      "integrity": "sha512-u1w9c6dx2iuatXIW5X1JY0ighDhQPjBwOHZsrOcnpm891pktuEjJDdyhDulWFa6kKVkXw1q7khwxXBEurvKc2g==",
+      "version": "8.8.0",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.8.0.tgz",
+      "integrity": "sha512-DNmTMK26EquKiCYqYCJHBjTZTeoDxY8hpgPQTinQEJMAoFthstcAhyWMDBwDvo/aEHEvE4tlCZV2XUMxTlTIEw==",
       "requires": {
-        "@stencil/core": "4.38.0",
+        "@stencil/core": "4.43.0",
         "ionicons": "^8.0.13",
         "tslib": "^2.1.0"
       }
@@ -7532,9 +7532,9 @@
       "optional": true
     },
     "@stencil/core": {
-      "version": "4.38.0",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.38.0.tgz",
-      "integrity": "sha512-oC3QFKO0X1yXVvETgc8OLY525MNKhn9vISBrbtKnGoPlokJ6rI8Vk1RK22TevnNrHLI4SExNLbcDnqilKR35JQ==",
+      "version": "4.43.0",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.43.0.tgz",
+      "integrity": "sha512-6Uj2Z3lzLuufYAE7asZ6NLKgSwsB9uxl84Eh34PASnUjfj32GkrP4DtKK7fNeh1WFGGyffsTDka3gwtl+4reUg==",
       "requires": {
         "@rollup/rollup-darwin-arm64": "4.34.9",
         "@rollup/rollup-darwin-x64": "4.34.9",
diff --git a/packages/angular-server/package.json b/packages/angular-server/package.json
index 34f4f41b9f5..f5d0363186e 100644
--- a/packages/angular-server/package.json
+++ b/packages/angular-server/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/angular-server",
-  "version": "8.7.15",
+  "version": "8.8.0",
   "description": "Angular SSR Module for Ionic",
   "keywords": [
     "ionic",
@@ -62,6 +62,6 @@
   },
   "prettier": "@ionic/prettier-config",
   "dependencies": {
-    "@ionic/core": "^8.7.15"
+    "@ionic/core": "^8.8.0"
   }
 }
diff --git a/packages/angular/CHANGELOG.md b/packages/angular/CHANGELOG.md
index 8c81042f2f5..8ca2788a268 100644
--- a/packages/angular/CHANGELOG.md
+++ b/packages/angular/CHANGELOG.md
@@ -3,6 +3,49 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.8.0](https://github.com/ionic-team/ionic-framework/compare/v8.7.18...v8.8.0) (2026-03-04)
+
+
+### Features
+
+* **angular:** add custom injector support for modal and popover controllers ([#30899](https://github.com/ionic-team/ionic-framework/issues/30899)) ([822da42](https://github.com/ionic-team/ionic-framework/commit/822da428af86cd9b036b81515272321eb8fa586c)), closes [#30638](https://github.com/ionic-team/ionic-framework/issues/30638)
+* **modal:** add drag events for sheet and card modals ([#30962](https://github.com/ionic-team/ionic-framework/issues/30962)) ([d29ac71](https://github.com/ionic-team/ionic-framework/commit/d29ac713fad604c256fb385eb0c26eb9717e1ff4))
+* **refresher:** add ionPullStart and ionPullEnd events ([#30946](https://github.com/ionic-team/ionic-framework/issues/30946)) ([814c2e5](https://github.com/ionic-team/ionic-framework/commit/814c2e5ccd6d5bfda12bdf13a566cd66ff830d5b)), closes [#24524](https://github.com/ionic-team/ionic-framework/issues/24524)
+* **segment-view:** add swipeGesture property to disable swiping ([#30948](https://github.com/ionic-team/ionic-framework/issues/30948)) ([46806bd](https://github.com/ionic-team/ionic-framework/commit/46806bd6e2af90a0b31fca68f508c06d3d281ec0)), closes [#30290](https://github.com/ionic-team/ionic-framework/issues/30290)
+* **select:** pass cancelText property to modal interface ([#30282](https://github.com/ionic-team/ionic-framework/issues/30282)) ([6e4f60a](https://github.com/ionic-team/ionic-framework/commit/6e4f60af4c188ae04028b444aa21118ae27c2ca7))
+* **textarea:** reflect disabled and readonly props ([#30910](https://github.com/ionic-team/ionic-framework/issues/30910)) ([55735df](https://github.com/ionic-team/ionic-framework/commit/55735df3fa62c8e259c56db3169f3d5459e71c0c))
+
+
+
+
+
+## [8.7.18](https://github.com/ionic-team/ionic-framework/compare/v8.7.17...v8.7.18) (2026-02-25)
+
+
+### Bug Fixes
+
+* **nav-controller:** reset direction state when navigation is canceled ([#30955](https://github.com/ionic-team/ionic-framework/issues/30955)) ([53172d1](https://github.com/ionic-team/ionic-framework/commit/53172d1a4035d5b510c230553aabd53dc1389e4b))
+
+
+
+
+
+## [8.7.17](https://github.com/ionic-team/ionic-framework/compare/v8.7.15...v8.7.17) (2026-01-14)
+
+**Note:** Version bump only for package @ionic/angular
+
+
+
+
+
+## [8.7.16](https://github.com/ionic-team/ionic-framework/compare/v8.7.15...v8.7.16) (2025-12-31)
+
+**Note:** Version bump only for package @ionic/angular
+
+
+
+
+
 ## [8.7.15](https://github.com/ionic-team/ionic-framework/compare/v8.7.14...v8.7.15) (2025-12-23)
 
 **Note:** Version bump only for package @ionic/angular
diff --git a/packages/angular/common/src/index.ts b/packages/angular/common/src/index.ts
index 447fb3e1c14..91ef464bf0a 100644
--- a/packages/angular/common/src/index.ts
+++ b/packages/angular/common/src/index.ts
@@ -9,6 +9,7 @@ export { AngularDelegate, bindLifecycleEvents, IonModalToken } from './providers
 
 export type { IonicWindow } from './types/interfaces';
 export type { ViewDidEnter, ViewDidLeave, ViewWillEnter, ViewWillLeave } from './types/ionic-lifecycle-hooks';
+export type { ModalOptions, PopoverOptions } from './types/overlay-options';
 
 export { NavParams } from './directives/navigation/nav-params';
 
diff --git a/packages/angular/common/src/overlays/modal.ts b/packages/angular/common/src/overlays/modal.ts
index de884845cc1..d43de611908 100644
--- a/packages/angular/common/src/overlays/modal.ts
+++ b/packages/angular/common/src/overlays/modal.ts
@@ -7,7 +7,7 @@ import {
   NgZone,
   TemplateRef,
 } from '@angular/core';
-import type { Components, ModalBreakpointChangeEventDetail } from '@ionic/core/components';
+import type { Components, ModalBreakpointChangeEventDetail, ModalDragEventDetail } from '@ionic/core/components';
 
 import { ProxyCmp, proxyOutputs } from '../utils/proxy';
 
@@ -32,6 +32,18 @@ export declare interface IonModal extends Components.IonModal {
    * Emitted after the modal breakpoint has changed.
    */
   ionBreakpointDidChange: EventEmitter<CustomEvent<ModalBreakpointChangeEventDetail>>;
+  /**
+   * Emitted when the sheet or card modal has started being dragged.
+   */
+  ionDragStart: EventEmitter<void>;
+  /**
+   * Emitted while the sheet or card modal is being dragged.
+   */
+  ionDragMove: EventEmitter<CustomEvent<ModalDragEventDetail>>;
+  /**
+   * Emitted when the sheet or card modal has finished being dragged.
+   */
+  ionDragEnd: EventEmitter<CustomEvent<ModalDragEventDetail>>;
   /**
    * Emitted after the modal has presented. Shorthand for ionModalDidPresent.
    */
@@ -130,6 +142,9 @@ export class IonModal {
       'willPresent',
       'willDismiss',
       'didDismiss',
+      'ionDragStart',
+      'ionDragMove',
+      'ionDragEnd',
     ]);
   }
 }
diff --git a/packages/angular/common/src/providers/angular-delegate.ts b/packages/angular/common/src/providers/angular-delegate.ts
index dd4964ef1c1..bde802ab115 100644
--- a/packages/angular/common/src/providers/angular-delegate.ts
+++ b/packages/angular/common/src/providers/angular-delegate.ts
@@ -36,7 +36,8 @@ export class AngularDelegate {
   create(
     environmentInjector: EnvironmentInjector,
     injector: Injector,
-    elementReferenceKey?: string
+    elementReferenceKey?: string,
+    customInjector?: Injector
   ): AngularFrameworkDelegate {
     return new AngularFrameworkDelegate(
       environmentInjector,
@@ -44,7 +45,8 @@ export class AngularDelegate {
       this.applicationRef,
       this.zone,
       elementReferenceKey,
-      this.config.useSetInputAPI ?? false
+      this.config.useSetInputAPI ?? false,
+      customInjector
     );
   }
 }
@@ -59,7 +61,8 @@ export class AngularFrameworkDelegate implements FrameworkDelegate {
     private applicationRef: ApplicationRef,
     private zone: NgZone,
     private elementReferenceKey?: string,
-    private enableSignalsSupport?: boolean
+    private enableSignalsSupport?: boolean,
+    private customInjector?: Injector
   ) {}
 
   attachViewToDom(container: any, component: any, params?: any, cssClasses?: string[]): Promise<any> {
@@ -93,7 +96,8 @@ export class AngularFrameworkDelegate implements FrameworkDelegate {
           componentProps,
           cssClasses,
           this.elementReferenceKey,
-          this.enableSignalsSupport
+          this.enableSignalsSupport,
+          this.customInjector
         );
         resolve(el);
       });
@@ -131,7 +135,8 @@ export const attachView = (
   params: any,
   cssClasses: string[] | undefined,
   elementReferenceKey: string | undefined,
-  enableSignalsSupport: boolean | undefined
+  enableSignalsSupport: boolean | undefined,
+  customInjector?: Injector
 ): any => {
   /**
    * Wraps the injector with a custom injector that
@@ -158,7 +163,7 @@ export const attachView = (
 
   const childInjector = Injector.create({
     providers,
-    parent: injector,
+    parent: customInjector ?? injector,
   });
 
   const componentRef = createComponent<any>(component, {
diff --git a/packages/angular/common/src/providers/nav-controller.ts b/packages/angular/common/src/providers/nav-controller.ts
index 1ae3a0a603f..4bb33a67594 100644
--- a/packages/angular/common/src/providers/nav-controller.ts
+++ b/packages/angular/common/src/providers/nav-controller.ts
@@ -1,6 +1,14 @@
 import { Location } from '@angular/common';
 import { Injectable, Optional } from '@angular/core';
-import { NavigationExtras, Router, UrlSerializer, UrlTree, NavigationStart } from '@angular/router';
+import {
+  NavigationExtras,
+  Router,
+  UrlSerializer,
+  UrlTree,
+  NavigationStart,
+  NavigationCancel,
+  NavigationError,
+} from '@angular/router';
 import type { AnimationBuilder, NavDirection, RouterDirection } from '@ionic/core/components';
 
 import { IonRouterOutlet } from '../directives/navigation/router-outlet';
@@ -42,6 +50,14 @@ export class NavController {
           this.guessDirection = this.guessAnimation = id < this.lastNavId ? 'back' : 'forward';
           this.lastNavId = this.guessDirection === 'forward' ? ev.id : id;
         }
+
+        // Reset explicit direction when navigation is canceled (e.g., guard rejection)
+        // to prevent stale direction from leaking into the next navigation
+        if (ev instanceof NavigationCancel || ev instanceof NavigationError) {
+          this.direction = DEFAULT_DIRECTION;
+          this.animated = DEFAULT_ANIMATED;
+          this.animationBuilder = undefined;
+        }
       });
     }
 
diff --git a/packages/angular/common/src/types/overlay-options.ts b/packages/angular/common/src/types/overlay-options.ts
new file mode 100644
index 00000000000..93ec10cb5f1
--- /dev/null
+++ b/packages/angular/common/src/types/overlay-options.ts
@@ -0,0 +1,18 @@
+import type { Injector } from '@angular/core';
+import type { ModalOptions as CoreModalOptions, PopoverOptions as CorePopoverOptions } from '@ionic/core/components';
+
+/**
+ * Modal options with Angular-specific injector support.
+ * Extends @ionic/core ModalOptions with an optional injector property.
+ */
+export type ModalOptions = CoreModalOptions & {
+  injector?: Injector;
+};
+
+/**
+ * Popover options with Angular-specific injector support.
+ * Extends @ionic/core PopoverOptions with an optional injector property.
+ */
+export type PopoverOptions = CorePopoverOptions & {
+  injector?: Injector;
+};
diff --git a/packages/angular/package-lock.json b/packages/angular/package-lock.json
index 2b5f26d0449..16177f30703 100644
--- a/packages/angular/package-lock.json
+++ b/packages/angular/package-lock.json
@@ -1,15 +1,15 @@
 {
   "name": "@ionic/angular",
-  "version": "8.7.15",
+  "version": "8.8.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/angular",
-      "version": "8.7.15",
+      "version": "8.8.0",
       "license": "MIT",
       "dependencies": {
-        "@ionic/core": "^8.7.15",
+        "@ionic/core": "^8.8.0",
         "ionicons": "^8.0.13",
         "jsonc-parser": "^3.0.0",
         "tslib": "^2.3.0"
@@ -1398,12 +1398,12 @@
       "dev": true
     },
     "node_modules/@ionic/core": {
-      "version": "8.7.15",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.7.15.tgz",
-      "integrity": "sha512-u1w9c6dx2iuatXIW5X1JY0ighDhQPjBwOHZsrOcnpm891pktuEjJDdyhDulWFa6kKVkXw1q7khwxXBEurvKc2g==",
+      "version": "8.8.0",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.8.0.tgz",
+      "integrity": "sha512-DNmTMK26EquKiCYqYCJHBjTZTeoDxY8hpgPQTinQEJMAoFthstcAhyWMDBwDvo/aEHEvE4tlCZV2XUMxTlTIEw==",
       "license": "MIT",
       "dependencies": {
-        "@stencil/core": "4.38.0",
+        "@stencil/core": "4.43.0",
         "ionicons": "^8.0.13",
         "tslib": "^2.1.0"
       },
@@ -2311,9 +2311,9 @@
       }
     },
     "node_modules/@stencil/core": {
-      "version": "4.38.0",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.38.0.tgz",
-      "integrity": "sha512-oC3QFKO0X1yXVvETgc8OLY525MNKhn9vISBrbtKnGoPlokJ6rI8Vk1RK22TevnNrHLI4SExNLbcDnqilKR35JQ==",
+      "version": "4.43.0",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.43.0.tgz",
+      "integrity": "sha512-6Uj2Z3lzLuufYAE7asZ6NLKgSwsB9uxl84Eh34PASnUjfj32GkrP4DtKK7fNeh1WFGGyffsTDka3gwtl+4reUg==",
       "license": "MIT",
       "bin": {
         "stencil": "bin/stencil"
diff --git a/packages/angular/package.json b/packages/angular/package.json
index 3e681522ec3..ce5a217f6ff 100644
--- a/packages/angular/package.json
+++ b/packages/angular/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/angular",
-  "version": "8.7.15",
+  "version": "8.8.0",
   "description": "Angular specific wrappers for @ionic/core",
   "keywords": [
     "ionic",
@@ -48,7 +48,7 @@
     }
   },
   "dependencies": {
-    "@ionic/core": "^8.7.15",
+    "@ionic/core": "^8.8.0",
     "ionicons": "^8.0.13",
     "jsonc-parser": "^3.0.0",
     "tslib": "^2.3.0"
diff --git a/packages/angular/src/directives/proxies.ts b/packages/angular/src/directives/proxies.ts
index 020f0d15c3d..aac5898239a 100644
--- a/packages/angular/src/directives/proxies.ts
+++ b/packages/angular/src/directives/proxies.ts
@@ -1836,12 +1836,13 @@ export class IonRefresher {
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
-    proxyOutputs(this, this.el, ['ionRefresh', 'ionPull', 'ionStart']);
+    proxyOutputs(this, this.el, ['ionRefresh', 'ionPull', 'ionStart', 'ionPullStart', 'ionPullEnd']);
   }
 }
 
 
 import type { RefresherEventDetail as IIonRefresherRefresherEventDetail } from '@ionic/core';
+import type { RefresherPullEndEventDetail as IIonRefresherRefresherPullEndEventDetail } from '@ionic/core';
 
 export declare interface IonRefresher extends Components.IonRefresher {
   /**
@@ -1857,8 +1858,19 @@ called when the async operation has completed.
   ionPull: EventEmitter<CustomEvent<void>>;
   /**
    * Emitted when the user begins to start pulling down.
+TODO(FW-7044): Remove this in a major release @deprecated Use `ionPullStart` instead.
    */
   ionStart: EventEmitter<CustomEvent<void>>;
+  /**
+   * Emitted when the user begins to start pulling down.
+   */
+  ionPullStart: EventEmitter<CustomEvent<void>>;
+  /**
+   * Emitted when the refresher has returned to the inactive state
+after a pull gesture. This fires whether the refresh completed
+successfully or was canceled.
+   */
+  ionPullEnd: EventEmitter<CustomEvent<IIonRefresherRefresherPullEndEventDetail>>;
 }
 
 
@@ -2141,14 +2153,14 @@ export declare interface IonSegmentContent extends Components.IonSegmentContent
 
 
 @ProxyCmp({
-  inputs: ['disabled']
+  inputs: ['disabled', 'swipeGesture']
 })
 @Component({
   selector: 'ion-segment-view',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['disabled'],
+  inputs: ['disabled', 'swipeGesture'],
 })
 export class IonSegmentView {
   protected el: HTMLIonSegmentViewElement;
@@ -2220,14 +2232,14 @@ This event will not emit when programmatically setting the `value` property.
 
 
 @ProxyCmp({
-  inputs: ['header', 'multiple', 'options']
+  inputs: ['cancelText', 'header', 'multiple', 'options']
 })
 @Component({
   selector: 'ion-select-modal',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['header', 'multiple', 'options'],
+  inputs: ['cancelText', 'header', 'multiple', 'options'],
 })
 export class IonSelectModal {
   protected el: HTMLIonSelectModalElement;
diff --git a/packages/angular/src/index.ts b/packages/angular/src/index.ts
index 3eefb6c46ee..990108e3286 100644
--- a/packages/angular/src/index.ts
+++ b/packages/angular/src/index.ts
@@ -32,6 +32,7 @@ export {
   ViewDidEnter,
   ViewDidLeave,
 } from '@ionic/angular/common';
+export type { ModalOptions, PopoverOptions } from '@ionic/angular/common';
 export { AlertController } from './providers/alert-controller';
 export { AnimationController } from './providers/animation-controller';
 export { ActionSheetController } from './providers/action-sheet-controller';
@@ -98,14 +99,13 @@ export {
   IonicSafeString,
   LoadingOptions,
   MenuCustomEvent,
-  ModalOptions,
+  ModalDragEventDetail,
   NavCustomEvent,
   PickerOptions,
   PickerButton,
   PickerColumn,
   PickerColumnOption,
   PlatformConfig,
-  PopoverOptions,
   RadioGroupCustomEvent,
   RadioGroupChangeEventDetail,
   RangeCustomEvent,
diff --git a/packages/angular/src/providers/modal-controller.ts b/packages/angular/src/providers/modal-controller.ts
index 51edf69cf36..682aabd2a32 100644
--- a/packages/angular/src/providers/modal-controller.ts
+++ b/packages/angular/src/providers/modal-controller.ts
@@ -1,6 +1,6 @@
 import { Injector, Injectable, EnvironmentInjector, inject } from '@angular/core';
 import { AngularDelegate, OverlayBaseController } from '@ionic/angular/common';
-import type { ModalOptions } from '@ionic/core';
+import type { ModalOptions } from '@ionic/angular/common';
 import { modalController } from '@ionic/core';
 
 @Injectable()
@@ -14,9 +14,10 @@ export class ModalController extends OverlayBaseController<ModalOptions, HTMLIon
   }
 
   create(opts: ModalOptions): Promise<HTMLIonModalElement> {
+    const { injector: customInjector, ...restOpts } = opts;
     return super.create({
-      ...opts,
-      delegate: this.angularDelegate.create(this.environmentInjector, this.injector, 'modal'),
+      ...restOpts,
+      delegate: this.angularDelegate.create(this.environmentInjector, this.injector, 'modal', customInjector),
     });
   }
 }
diff --git a/packages/angular/src/providers/popover-controller.ts b/packages/angular/src/providers/popover-controller.ts
index 96c5c8d5a82..c5873e2e182 100644
--- a/packages/angular/src/providers/popover-controller.ts
+++ b/packages/angular/src/providers/popover-controller.ts
@@ -1,6 +1,6 @@
 import { Injector, inject, EnvironmentInjector } from '@angular/core';
 import { AngularDelegate, OverlayBaseController } from '@ionic/angular/common';
-import type { PopoverOptions } from '@ionic/core';
+import type { PopoverOptions } from '@ionic/angular/common';
 import { popoverController } from '@ionic/core';
 
 export class PopoverController extends OverlayBaseController<PopoverOptions, HTMLIonPopoverElement> {
@@ -13,9 +13,10 @@ export class PopoverController extends OverlayBaseController<PopoverOptions, HTM
   }
 
   create(opts: PopoverOptions): Promise<HTMLIonPopoverElement> {
+    const { injector: customInjector, ...restOpts } = opts;
     return super.create({
-      ...opts,
-      delegate: this.angularDelegate.create(this.environmentInjector, this.injector, 'popover'),
+      ...restOpts,
+      delegate: this.angularDelegate.create(this.environmentInjector, this.injector, 'popover', customInjector),
     });
   }
 }
diff --git a/packages/angular/standalone/src/directives/proxies.ts b/packages/angular/standalone/src/directives/proxies.ts
index 5daa62dcd37..d0007b15ab5 100644
--- a/packages/angular/standalone/src/directives/proxies.ts
+++ b/packages/angular/standalone/src/directives/proxies.ts
@@ -1692,12 +1692,13 @@ export class IonRefresher {
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
-    proxyOutputs(this, this.el, ['ionRefresh', 'ionPull', 'ionStart']);
+    proxyOutputs(this, this.el, ['ionRefresh', 'ionPull', 'ionStart', 'ionPullStart', 'ionPullEnd']);
   }
 }
 
 
 import type { RefresherEventDetail as IIonRefresherRefresherEventDetail } from '@ionic/core/components';
+import type { RefresherPullEndEventDetail as IIonRefresherRefresherPullEndEventDetail } from '@ionic/core/components';
 
 export declare interface IonRefresher extends Components.IonRefresher {
   /**
@@ -1713,8 +1714,19 @@ called when the async operation has completed.
   ionPull: EventEmitter<CustomEvent<void>>;
   /**
    * Emitted when the user begins to start pulling down.
+TODO(FW-7044): Remove this in a major release @deprecated Use `ionPullStart` instead.
    */
   ionStart: EventEmitter<CustomEvent<void>>;
+  /**
+   * Emitted when the user begins to start pulling down.
+   */
+  ionPullStart: EventEmitter<CustomEvent<void>>;
+  /**
+   * Emitted when the refresher has returned to the inactive state
+after a pull gesture. This fires whether the refresh completed
+successfully or was canceled.
+   */
+  ionPullEnd: EventEmitter<CustomEvent<IIonRefresherRefresherPullEndEventDetail>>;
 }
 
 
@@ -1919,14 +1931,14 @@ export declare interface IonSegmentContent extends Components.IonSegmentContent
 
 @ProxyCmp({
   defineCustomElementFn: defineIonSegmentView,
-  inputs: ['disabled']
+  inputs: ['disabled', 'swipeGesture']
 })
 @Component({
   selector: 'ion-segment-view',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['disabled'],
+  inputs: ['disabled', 'swipeGesture'],
   standalone: true
 })
 export class IonSegmentView {
@@ -1951,14 +1963,14 @@ export declare interface IonSegmentView extends Components.IonSegmentView {
 
 @ProxyCmp({
   defineCustomElementFn: defineIonSelectModal,
-  inputs: ['header', 'multiple', 'options']
+  inputs: ['cancelText', 'header', 'multiple', 'options']
 })
 @Component({
   selector: 'ion-select-modal',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['header', 'multiple', 'options'],
+  inputs: ['cancelText', 'header', 'multiple', 'options'],
   standalone: true
 })
 export class IonSelectModal {
diff --git a/packages/angular/standalone/src/index.ts b/packages/angular/standalone/src/index.ts
index 4dc766c1d41..06b8e7f1796 100644
--- a/packages/angular/standalone/src/index.ts
+++ b/packages/angular/standalone/src/index.ts
@@ -28,6 +28,7 @@ export {
   ViewWillLeave,
   ViewDidLeave,
 } from '@ionic/angular/common';
+export type { ModalOptions, PopoverOptions } from '@ionic/angular/common';
 export { IonNav } from './navigation/nav';
 export {
   IonCheckbox,
@@ -96,14 +97,13 @@ export {
   IonicSafeString,
   LoadingOptions,
   MenuCustomEvent,
-  ModalOptions,
+  ModalDragEventDetail,
   NavCustomEvent,
   PickerOptions,
   PickerButton,
   PickerColumn,
   PickerColumnOption,
   PlatformConfig,
-  PopoverOptions,
   RadioGroupCustomEvent,
   RadioGroupChangeEventDetail,
   RangeCustomEvent,
diff --git a/packages/angular/standalone/src/providers/modal-controller.ts b/packages/angular/standalone/src/providers/modal-controller.ts
index 07e406ec5d6..5cb85d9fbcd 100644
--- a/packages/angular/standalone/src/providers/modal-controller.ts
+++ b/packages/angular/standalone/src/providers/modal-controller.ts
@@ -1,6 +1,6 @@
 import { Injector, Injectable, EnvironmentInjector, inject } from '@angular/core';
 import { AngularDelegate, OverlayBaseController } from '@ionic/angular/common';
-import type { ModalOptions } from '@ionic/core/components';
+import type { ModalOptions } from '@ionic/angular/common';
 import { modalController } from '@ionic/core/components';
 import { defineCustomElement } from '@ionic/core/components/ion-modal.js';
 
@@ -16,9 +16,10 @@ export class ModalController extends OverlayBaseController<ModalOptions, HTMLIon
   }
 
   create(opts: ModalOptions): Promise<HTMLIonModalElement> {
+    const { injector: customInjector, ...restOpts } = opts;
     return super.create({
-      ...opts,
-      delegate: this.angularDelegate.create(this.environmentInjector, this.injector, 'modal'),
+      ...restOpts,
+      delegate: this.angularDelegate.create(this.environmentInjector, this.injector, 'modal', customInjector),
     });
   }
 }
diff --git a/packages/angular/standalone/src/providers/popover-controller.ts b/packages/angular/standalone/src/providers/popover-controller.ts
index 395b4dbdb70..6aaaf46e129 100644
--- a/packages/angular/standalone/src/providers/popover-controller.ts
+++ b/packages/angular/standalone/src/providers/popover-controller.ts
@@ -1,6 +1,6 @@
 import { Injector, inject, EnvironmentInjector } from '@angular/core';
 import { AngularDelegate, OverlayBaseController } from '@ionic/angular/common';
-import type { PopoverOptions } from '@ionic/core/components';
+import type { PopoverOptions } from '@ionic/angular/common';
 import { popoverController } from '@ionic/core/components';
 import { defineCustomElement } from '@ionic/core/components/ion-popover.js';
 
@@ -15,9 +15,10 @@ export class PopoverController extends OverlayBaseController<PopoverOptions, HTM
   }
 
   create(opts: PopoverOptions): Promise<HTMLIonPopoverElement> {
+    const { injector: customInjector, ...restOpts } = opts;
     return super.create({
-      ...opts,
-      delegate: this.angularDelegate.create(this.environmentInjector, this.injector, 'popover'),
+      ...restOpts,
+      delegate: this.angularDelegate.create(this.environmentInjector, this.injector, 'popover', customInjector),
     });
   }
 }
diff --git a/packages/angular/test/base/e2e/src/lazy/inputs.spec.ts b/packages/angular/test/base/e2e/src/lazy/inputs.spec.ts
index fdf2b38adc4..d8b8b4919bd 100644
--- a/packages/angular/test/base/e2e/src/lazy/inputs.spec.ts
+++ b/packages/angular/test/base/e2e/src/lazy/inputs.spec.ts
@@ -5,105 +5,126 @@ test.describe('Inputs', () => {
     await page.goto('/lazy/inputs');
   });
 
-  test('should have default values', async ({ page }) => {
-    // Check primary elements for default values
-    await expect(page.locator('ion-checkbox').first()).toHaveJSProperty('checked', true);
-    await expect(page.locator('ion-radio-group').first()).toHaveJSProperty('value', 'nes');
-    await expect(page.locator('ion-toggle').first()).toHaveJSProperty('checked', true);
-    await expect(page.locator('ion-input').first()).toHaveJSProperty('value', 'some text');
-    await expect(page.locator('ion-input-otp').first()).toHaveJSProperty('value', '1234');
-    await expect(page.locator('ion-datetime').first()).toHaveJSProperty('value', '1994-03-15');
-    await expect(page.locator('ion-select').first()).toHaveJSProperty('value', 'nes');
-    await expect(page.locator('ion-range').first()).toHaveJSProperty('value', 50);
-  });
+  test.describe('basic functionality', () => {
+    test('should have default values', async ({ page }) => {
+      // Check primary elements for default values
+      await expect(page.locator('ion-checkbox').first()).toHaveJSProperty('checked', true);
+      await expect(page.locator('ion-radio-group').first()).toHaveJSProperty('value', 'nes');
+      await expect(page.locator('ion-toggle').first()).toHaveJSProperty('checked', true);
+      await expect(page.locator('ion-input').first()).toHaveJSProperty('value', 'some text');
+      await expect(page.locator('ion-input-otp').first()).toHaveJSProperty('value', '1234');
+      await expect(page.locator('ion-datetime').first()).toHaveJSProperty('value', '1994-03-15');
+      await expect(page.locator('ion-select').first()).toHaveJSProperty('value', 'nes');
+      await expect(page.locator('ion-range').first()).toHaveJSProperty('value', 50);
+    });
 
-  test('should reset values', async ({ page }) => {
-    await page.locator('#reset-button').click();
-
-    // Check primary elements after reset
-    await expect(page.locator('ion-checkbox').first()).toHaveJSProperty('checked', false);
-    await expect(page.locator('ion-radio-group').first()).toHaveJSProperty('value', undefined);
-    await expect(page.locator('ion-toggle').first()).toHaveJSProperty('checked', false);
-    /**
-     * The `value` property gets set to undefined
-     * for these components, so we need to check
-     * that the value property is undefined.
-     */
-    await expect(page.locator('ion-input').first()).toHaveJSProperty('value', undefined);
-    await expect(page.locator('ion-input-otp').first()).toHaveJSProperty('value', undefined);
-    await expect(page.locator('ion-datetime').first()).toHaveJSProperty('value', undefined);
-    await expect(page.locator('ion-select').first()).toHaveJSProperty('value', undefined);
-    await expect(page.locator('ion-range').first()).toHaveJSProperty('value', undefined);
-  });
+    test('should reset values', async ({ page }) => {
+      await page.locator('#reset-button').click();
+
+      // Check primary elements after reset
+      await expect(page.locator('ion-checkbox').first()).toHaveJSProperty('checked', false);
+      await expect(page.locator('ion-radio-group').first()).toHaveJSProperty('value', undefined);
+      await expect(page.locator('ion-toggle').first()).toHaveJSProperty('checked', false);
+      /**
+       * The `value` property gets set to undefined
+       * for these components, so we need to check
+       * that the value property is undefined.
+       */
+      await expect(page.locator('ion-input').first()).toHaveJSProperty('value', undefined);
+      await expect(page.locator('ion-input-otp').first()).toHaveJSProperty('value', undefined);
+      await expect(page.locator('ion-datetime').first()).toHaveJSProperty('value', undefined);
+      await expect(page.locator('ion-select').first()).toHaveJSProperty('value', undefined);
+      await expect(page.locator('ion-range').first()).toHaveJSProperty('value', undefined);
+    });
 
-  test('should set values', async ({ page }) => {
-    await page.locator('#reset-button').click();
-    await page.locator('#set-button').click();
-
-    // Check primary elements after setting values
-    await expect(page.locator('ion-checkbox').first()).toHaveJSProperty('checked', true);
-    await expect(page.locator('ion-radio-group').first()).toHaveJSProperty('value', 'nes');
-    await expect(page.locator('ion-toggle').first()).toHaveJSProperty('checked', true);
-    await expect(page.locator('ion-input').first()).toHaveJSProperty('value', 'some text');
-    await expect(page.locator('ion-input-otp').first()).toHaveJSProperty('value', '1234');
-    await expect(page.locator('ion-datetime').first()).toHaveJSProperty('value', '1994-03-15');
-    await expect(page.locator('ion-select').first()).toHaveJSProperty('value', 'nes');
-    await expect(page.locator('ion-range').first()).toHaveJSProperty('value', 50);
-  });
+    test('should set values', async ({ page }) => {
+      await page.locator('#reset-button').click();
+      await page.locator('#set-button').click();
+
+      // Check primary elements after setting values
+      await expect(page.locator('ion-checkbox').first()).toHaveJSProperty('checked', true);
+      await expect(page.locator('ion-radio-group').first()).toHaveJSProperty('value', 'nes');
+      await expect(page.locator('ion-toggle').first()).toHaveJSProperty('checked', true);
+      await expect(page.locator('ion-input').first()).toHaveJSProperty('value', 'some text');
+      await expect(page.locator('ion-input-otp').first()).toHaveJSProperty('value', '1234');
+      await expect(page.locator('ion-datetime').first()).toHaveJSProperty('value', '1994-03-15');
+      await expect(page.locator('ion-select').first()).toHaveJSProperty('value', 'nes');
+      await expect(page.locator('ion-range').first()).toHaveJSProperty('value', 50);
+    });
 
-  test('should update angular when values change', async ({ page }) => {
-    await page.locator('#reset-button').click();
-
-    await page.locator('ion-checkbox#first-checkbox').click();
-    await page.locator('ion-radio').first().click();
-    await page.locator('ion-toggle').first().click();
-
-    await page.locator('ion-input').nth(0).locator('input').fill('hola');
-    await page.locator('ion-input').nth(0).locator('input').blur();
-
-    await page.locator('ion-input-otp input').nth(0).fill('1');
-    await page.locator('ion-input-otp input').nth(1).fill('2');
-    await page.locator('ion-input-otp input').nth(2).fill('3');
-    await page.locator('ion-input-otp input').nth(3).fill('4');
-    await page.locator('ion-input-otp input').nth(3).blur();
-
-    // Set date to 1994-03-14
-    await page.locator('ion-datetime').first().click();
-    await page.locator('ion-datetime').first().locator('.calendar-day:not([disabled])').first().click();
-
-    await page.locator('ion-select#game-console').click();
-    await expect(page.locator('ion-alert')).toBeVisible();
-    // Playstation option
-    await page.locator('ion-alert .alert-radio-button').nth(3).click();
-    // Click confirm button
-    await page.locator('ion-alert .alert-button:not(.alert-button-role-cancel)').click();
-
-    // Check note text (Angular binding updates)
-    await expect(page.locator('#checkbox-note')).toHaveText('true');
-    await expect(page.locator('#radio-note')).toHaveText('nes');
-    await expect(page.locator('#toggle-note')).toHaveText('true');
-    await expect(page.locator('#input-note')).toHaveText('hola');
-    await expect(page.locator('#input-otp-note')).toHaveText('1234');
-    await expect(page.locator('#datetime-note')).toHaveText('1994-03-14');
-    await expect(page.locator('#select-note')).toHaveText('ps');
-  });
+    test('should update angular when values change', async ({ page }) => {
+      await page.locator('#reset-button').click();
 
-  test('should update values when erasing input', async ({ page }) => {
-    // Focus the input and press backspace to remove last character
-    await page.locator('ion-input').nth(0).locator('input').click();
-    await page.locator('ion-input').nth(0).locator('input').press('Backspace');
-    // Check mirror element reflects the change
-    await expect(page.locator('ion-input').nth(1)).toHaveJSProperty('value', 'some tex');
-    // Check note text (Angular binding)
-    await expect(page.locator('#input-note')).toHaveText('some tex');
-
-    // Focus the last OTP input and press backspace
-    await page.locator('ion-input-otp input').last().click();
-    await page.locator('ion-input-otp input').last().press('Backspace');
-    // Check mirror element reflects the change
-    await expect(page.locator('ion-input-otp').nth(1)).toHaveJSProperty('value', '123');
-    // Check note text (Angular binding)
-    await expect(page.locator('#input-otp-note')).toHaveText('123');
+      await page.locator('ion-checkbox#first-checkbox').click();
+      await page.locator('ion-radio').first().click();
+      await page.locator('ion-toggle').first().click();
+
+      await page.locator('ion-input').nth(0).locator('input').fill('hola');
+      await page.locator('ion-input').nth(0).locator('input').blur();
+
+      await page.locator('ion-input-otp input').nth(0).fill('1');
+      await page.locator('ion-input-otp input').nth(1).fill('2');
+      await page.locator('ion-input-otp input').nth(2).fill('3');
+      await page.locator('ion-input-otp input').nth(3).fill('4');
+      await page.locator('ion-input-otp input').nth(3).blur();
+
+      // Set date to 1994-03-14
+      await page.locator('ion-datetime').first().click();
+      await page.locator('ion-datetime').first().locator('.calendar-day:not([disabled])').first().click();
+
+      await page.locator('ion-select#game-console').click();
+      await expect(page.locator('ion-alert')).toBeVisible();
+      // Playstation option
+      await page.locator('ion-alert .alert-radio-button').nth(3).click();
+      // Click confirm button
+      await page.locator('ion-alert .alert-button:not(.alert-button-role-cancel)').click();
+
+      // Check note text (Angular binding updates)
+      await expect(page.locator('#checkbox-note')).toHaveText('true');
+      await expect(page.locator('#radio-note')).toHaveText('nes');
+      await expect(page.locator('#toggle-note')).toHaveText('true');
+      await expect(page.locator('#input-note')).toHaveText('hola');
+      await expect(page.locator('#input-otp-note')).toHaveText('1234');
+      await expect(page.locator('#datetime-note')).toHaveText('1994-03-14');
+      await expect(page.locator('#select-note')).toHaveText('ps');
+    });
+
+    test('should update values when erasing input', async ({ page }) => {
+      // Focus the input and press backspace to remove last character
+      await page.locator('ion-input').nth(0).locator('input').click();
+      await page.locator('ion-input').nth(0).locator('input').press('Backspace');
+      // Check mirror element reflects the change
+      await expect(page.locator('ion-input').nth(1)).toHaveJSProperty('value', 'some tex');
+      // Check note text (Angular binding)
+      await expect(page.locator('#input-note')).toHaveText('some tex');
+
+      // Focus the last OTP input and press backspace
+      await page.locator('ion-input-otp input').last().click();
+      await page.locator('ion-input-otp input').last().press('Backspace');
+      // Check mirror element reflects the change
+      await expect(page.locator('ion-input-otp').nth(1)).toHaveJSProperty('value', '123');
+      // Check note text (Angular binding)
+      await expect(page.locator('#input-otp-note')).toHaveText('123');
+    });
+
+    test('should reflect props when component has a default value', async ({ page }) => {
+      // Disable inputs
+      await page.locator('#disable-button').click();
+
+      // Disabled prop
+      await expect(page.locator('ion-input').first()).toHaveAttribute('disabled', '');
+      await expect(page.locator('ion-input-otp').first()).toHaveAttribute('disabled', '');
+      await expect(page.locator('ion-textarea').first()).toHaveAttribute('disabled', '');
+
+      // Reset disabled state and set readonly state
+      await page.locator('#disable-button').click();
+      await page.locator('#readonly-button').click();
+
+      // Readonly prop
+      await expect(page.locator('ion-input').first()).toHaveAttribute('readonly', '');
+      await expect(page.locator('ion-input-otp').first()).toHaveAttribute('readonly', '');
+      await expect(page.locator('ion-textarea').first()).toHaveAttribute('readonly', '');
+    });
   });
 
   test.describe('updating text input refs', () => {
diff --git a/packages/angular/test/base/e2e/src/standalone/inputs.spec.ts b/packages/angular/test/base/e2e/src/standalone/inputs.spec.ts
new file mode 100644
index 00000000000..b5b17496ee2
--- /dev/null
+++ b/packages/angular/test/base/e2e/src/standalone/inputs.spec.ts
@@ -0,0 +1,28 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('Inputs', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/standalone/inputs');
+  });
+
+  test.describe('basic functionality', () => {
+    test('should reflect props when component has a default value', async ({ page }) => {
+      // Disable inputs
+      await page.locator('#disable-button').click();
+
+      // Disabled prop
+      await expect(page.locator('ion-input')).toHaveAttribute('disabled', '');
+      await expect(page.locator('ion-input-otp')).toHaveAttribute('disabled', '');
+      await expect(page.locator('ion-textarea')).toHaveAttribute('disabled', '');
+
+      // Reset disabled state and set readonly state
+      await page.locator('#disable-button').click();
+      await page.locator('#readonly-button').click();
+
+      // Readonly prop
+      await expect(page.locator('ion-input')).toHaveAttribute('readonly', '');
+      await expect(page.locator('ion-input-otp')).toHaveAttribute('readonly', '');
+      await expect(page.locator('ion-textarea')).toHaveAttribute('readonly', '');
+    });
+  });
+});
diff --git a/packages/angular/test/base/e2e/src/standalone/modal-custom-injector.spec.ts b/packages/angular/test/base/e2e/src/standalone/modal-custom-injector.spec.ts
new file mode 100644
index 00000000000..f06224042eb
--- /dev/null
+++ b/packages/angular/test/base/e2e/src/standalone/modal-custom-injector.spec.ts
@@ -0,0 +1,30 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('Modal: Custom Injector', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/standalone/modal-custom-injector');
+  });
+
+  test('should inject custom service via custom injector', async ({ page }) => {
+    await page.locator('ion-button#open-modal-with-custom-injector').click();
+
+    await expect(page.locator('ion-modal')).toBeVisible();
+
+    const serviceValue = page.locator('#service-value');
+    await expect(serviceValue).toHaveText('Service Value: custom-injector-value');
+
+    await page.locator('#close-modal').click();
+    await expect(page.locator('ion-modal')).not.toBeVisible();
+  });
+
+  test('should fail without custom injector when service is not globally provided', async ({ page }) => {
+    page.on('dialog', async (dialog) => {
+      expect(dialog.message()).toContain('TestService not available');
+      await dialog.accept();
+    });
+
+    await page.locator('ion-button#open-modal-without-custom-injector').click();
+
+    await page.waitForEvent('dialog');
+  });
+});
diff --git a/packages/angular/test/base/e2e/src/standalone/popover-custom-injector.spec.ts b/packages/angular/test/base/e2e/src/standalone/popover-custom-injector.spec.ts
new file mode 100644
index 00000000000..255e59575f0
--- /dev/null
+++ b/packages/angular/test/base/e2e/src/standalone/popover-custom-injector.spec.ts
@@ -0,0 +1,16 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('Popover: Custom Injector', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/standalone/popover-custom-injector');
+  });
+
+  test('should inject custom service via custom injector', async ({ page }) => {
+    await page.locator('ion-button#open-popover-with-custom-injector').click();
+
+    await expect(page.locator('ion-popover')).toBeVisible();
+
+    const serviceValue = page.locator('#service-value');
+    await expect(serviceValue).toHaveText('Service Value: custom-injector-value');
+  });
+});
diff --git a/packages/angular/test/base/src/app/lazy/inputs/inputs.component.html b/packages/angular/test/base/src/app/lazy/inputs/inputs.component.html
index c63e1c2792e..728406e3909 100644
--- a/packages/angular/test/base/src/app/lazy/inputs/inputs.component.html
+++ b/packages/angular/test/base/src/app/lazy/inputs/inputs.component.html
@@ -11,18 +11,18 @@
 
     <ion-item>
       <ion-label>DateTime</ion-label>
-      <ion-datetime [(ngModel)]="datetime" min="1994-03-14" max="2017-12-09" display-format="MM/DD/YYYY"></ion-datetime>
+      <ion-datetime [(ngModel)]="datetime" min="1994-03-14" max="2017-12-09" display-format="MM/DD/YYYY" [disabled]="isDisabled" [readonly]="isReadonly"></ion-datetime>
       <ion-note slot="end" id="datetime-note">{{datetime}}</ion-note>
     </ion-item>
 
     <ion-item color="dark">
       <ion-label>DateTime Mirror</ion-label>
-      <ion-datetime [(ngModel)]="datetime" min="1994-03-14" max="2017-12-09" display-format="MM/DD/YYYY"></ion-datetime>
+      <ion-datetime [(ngModel)]="datetime" min="1994-03-14" max="2017-12-09" display-format="MM/DD/YYYY" [disabled]="isDisabled" [readonly]="isReadonly"></ion-datetime>
       <ion-note slot="end">{{datetime}}</ion-note>
     </ion-item>
 
     <ion-item>
-      <ion-select label="Select" [(ngModel)]="select" id="game-console">
+      <ion-select label="Select" [(ngModel)]="select" id="game-console" [disabled]="isDisabled">
         <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>
@@ -48,7 +48,7 @@
     </ion-item>
 
     <ion-item>
-      <ion-toggle [(ngModel)]="toggle" slot="end">
+      <ion-toggle [(ngModel)]="toggle" slot="end" [disabled]="isDisabled">
         Toggle
       </ion-toggle>
       <ion-note slot="end" id="toggle-note">{{toggle}}</ion-note>
@@ -62,27 +62,27 @@
     </ion-item>
 
     <ion-item>
-      <ion-input label="Input" [(ngModel)]="input"></ion-input>
+      <ion-input label="Input" [(ngModel)]="input" [disabled]="isDisabled" [readonly]="isReadonly"></ion-input>
       <ion-note slot="end" id="input-note">{{input}}</ion-note>
     </ion-item>
 
     <ion-item color="dark">
-      <ion-input label="Input Mirror" [(ngModel)]="input"></ion-input>
+      <ion-input label="Input Mirror" [(ngModel)]="input" [disabled]="isDisabled" [readonly]="isReadonly"></ion-input>
       <ion-note slot="end">{{input}}</ion-note>
     </ion-item>
 
     <ion-item>
-      <ion-input-otp [(ngModel)]="inputOtp">Input OTP</ion-input-otp>
+      <ion-input-otp [(ngModel)]="inputOtp" [disabled]="isDisabled" [readonly]="isReadonly">Input OTP</ion-input-otp>
       <ion-note slot="end" id="input-otp-note">{{inputOtp}}</ion-note>
     </ion-item>
 
     <ion-item color="dark">
-      <ion-input-otp [(ngModel)]="inputOtp">Input OTP Mirror</ion-input-otp>
+      <ion-input-otp [(ngModel)]="inputOtp" [disabled]="isDisabled" [readonly]="isReadonly">Input OTP Mirror</ion-input-otp>
       <ion-note slot="end">{{inputOtp}}</ion-note>
     </ion-item>
 
     <ion-item>
-      <ion-checkbox [(ngModel)]="checkbox" slot="start" id="first-checkbox">
+      <ion-checkbox [(ngModel)]="checkbox" slot="start" id="first-checkbox" [disabled]="isDisabled">
         Checkbox
       </ion-checkbox>
       <ion-note slot="end" id="checkbox-note">{{checkbox}}</ion-note>
@@ -97,7 +97,7 @@
 
     <ion-item>
       <ion-radio-group value="nes" [(ngModel)]="radio" id="first-radio">
-        <ion-radio value="nes">Radio</ion-radio>
+        <ion-radio value="nes" [disabled]="isDisabled">Radio</ion-radio>
       </ion-radio-group>
       <ion-note slot="end" id="radio-note">{{radio}}</ion-note>
     </ion-item>
@@ -110,14 +110,20 @@
     </ion-item>
 
     <ion-item>
-      <ion-range [(ngModel)]="range" min="0" max="100" id="first-range">
+      <ion-range [(ngModel)]="range" min="0" max="100" id="first-range" [disabled]="isDisabled">
         <ion-label slot="start">Range</ion-label>
       </ion-range>
     </ion-item>
 
+    <ion-item>
+      <ion-textarea [(ngModel)]="textarea" minLength="0" maxLength="100" [disabled]="isDisabled" [readonly]="isReadonly" label="Textarea"></ion-textarea>
+    </ion-item>
+
   </ion-list>
   <p>
     <ion-button (click)="setValues()" id="set-button">Set values</ion-button>
     <ion-button (click)="resetValues()" id="reset-button">Reset values</ion-button>
+    <ion-button (click)="toggleDisable()" id="disable-button">Toggle Disabled</ion-button>
+    <ion-button (click)="toggleReadonly()" id="readonly-button">Toggle Readonly</ion-button>
   </p>
 </ion-content>
diff --git a/packages/angular/test/base/src/app/lazy/inputs/inputs.component.ts b/packages/angular/test/base/src/app/lazy/inputs/inputs.component.ts
index e53f73948c3..fb04b7d1467 100644
--- a/packages/angular/test/base/src/app/lazy/inputs/inputs.component.ts
+++ b/packages/angular/test/base/src/app/lazy/inputs/inputs.component.ts
@@ -16,6 +16,11 @@ export class InputsComponent {
   select? = 'nes';
   changes = 0;
   range? = 50;
+  textarea? = 'some text';
+
+  // States
+  isDisabled = false;
+  isReadonly = false;
 
   setValues() {
     console.log('set values');
@@ -27,6 +32,7 @@ export class InputsComponent {
     this.toggle = true;
     this.select = 'nes';
     this.range = 50;
+    this.textarea = 'some text';
   }
 
   resetValues() {
@@ -39,6 +45,17 @@ export class InputsComponent {
     this.toggle = false;
     this.select = undefined;
     this.range = undefined;
+    this.textarea = undefined;
+  }
+
+  toggleDisable() {
+    console.log(`toggle disable to ${!this.isDisabled}`);
+    this.isDisabled = !this.isDisabled;
+  }
+
+  toggleReadonly() {
+    console.log(`toggle readonly to ${!this.isReadonly}`);
+    this.isReadonly = !this.isReadonly;
   }
 
   counter() {
diff --git a/packages/angular/test/base/src/app/standalone/app-standalone/app.routes.ts b/packages/angular/test/base/src/app/standalone/app-standalone/app.routes.ts
index 667ef672e8b..a12903f57d3 100644
--- a/packages/angular/test/base/src/app/standalone/app-standalone/app.routes.ts
+++ b/packages/angular/test/base/src/app/standalone/app-standalone/app.routes.ts
@@ -7,6 +7,7 @@ export const routes: Routes = [
     component: AppComponent,
     children: [
       { path: '', loadComponent: () => import('../home-page/home-page.component').then(c => c.HomePageComponent) },
+      { path: 'inputs', loadComponent: () => import('../inputs/inputs.component').then(c => c.InputsComponent) },
       { path: 'menu-controller', loadComponent: () => import('../menu-controller/menu-controller.component').then(c => c.MenuControllerComponent) },
       { path: 'action-sheet-controller', loadComponent: () => import('../action-sheet-controller/action-sheet-controller.component').then(c => c.ActionSheetControllerComponent) },
       { path: 'popover', loadComponent: () => import('../popover/popover.component').then(c => c.PopoverComponent) },
@@ -22,6 +23,8 @@ export const routes: Routes = [
         ]
       },
       { path: 'programmatic-modal', loadComponent: () => import('../programmatic-modal/programmatic-modal.component').then(c => c.ProgrammaticModalComponent) },
+      { path: 'modal-custom-injector', loadComponent: () => import('../modal-custom-injector/modal-custom-injector.component').then(c => c.ModalCustomInjectorComponent) },
+      { path: 'popover-custom-injector', loadComponent: () => import('../popover-custom-injector/popover-custom-injector.component').then(c => c.PopoverCustomInjectorComponent) },
       { path: 'router-outlet', loadComponent: () => import('../router-outlet/router-outlet.component').then(c => c.RouterOutletComponent) },
       { path: 'back-button', loadComponent: () => import('../back-button/back-button.component').then(c => c.BackButtonComponent) },
       { path: 'router-link', loadComponent: () => import('../router-link/router-link.component').then(c => c.RouterLinkComponent) },
diff --git a/packages/angular/test/base/src/app/standalone/home-page/home-page.component.html b/packages/angular/test/base/src/app/standalone/home-page/home-page.component.html
index 6dbad643eb2..9bc81f2433e 100644
--- a/packages/angular/test/base/src/app/standalone/home-page/home-page.component.html
+++ b/packages/angular/test/base/src/app/standalone/home-page/home-page.component.html
@@ -28,6 +28,11 @@
         Icon Test
       </ion-label>
     </ion-item>
+    <ion-item routerLink="/standalone/inputs">
+      <ion-label>
+        Inputs Test
+      </ion-label>
+    </ion-item>
     <ion-item routerLink="/standalone/reorder-group">
       <ion-label>
         Reorder Group Test
@@ -110,6 +115,11 @@
         Programmatic Modal Test
       </ion-label>
     </ion-item>
+    <ion-item routerLink="/standalone/modal-custom-injector">
+      <ion-label>
+        Modal Custom Injector Test
+      </ion-label>
+    </ion-item>
     <ion-item routerLink="/standalone/overlay-controllers">
       <ion-label>
         Overlay Controllers Test
@@ -120,6 +130,11 @@
         Popover Test
       </ion-label>
     </ion-item>
+    <ion-item routerLink="/standalone/popover-custom-injector">
+      <ion-label>
+        Popover Custom Injector Test
+      </ion-label>
+    </ion-item>
   </ion-list>
 
   <ion-list>
diff --git a/packages/angular/test/base/src/app/standalone/inputs/inputs.component.html b/packages/angular/test/base/src/app/standalone/inputs/inputs.component.html
new file mode 100644
index 00000000000..16e02b5d4a4
--- /dev/null
+++ b/packages/angular/test/base/src/app/standalone/inputs/inputs.component.html
@@ -0,0 +1,79 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-title>
+      Inputs test
+    </ion-title>
+  </ion-toolbar>
+</ion-header>
+<ion-content>
+  <form [formGroup]="form">
+    <ion-list>
+      <ion-item>
+        <ion-label>DateTime</ion-label>
+        <ion-datetime formControlName="datetime" min="1994-03-14" max="2017-12-09" display-format="MM/DD/YYYY" [disabled]="isDisabled" [readonly]="isReadonly"></ion-datetime>
+        <ion-note slot="end" id="datetime-note">{{form.value.datetime}}</ion-note>
+      </ion-item>
+
+      <ion-item>
+        <ion-select label="Select" formControlName="select" id="game-console" [disabled]="isDisabled">
+          <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>
+          <ion-select-option value="ps">PlayStation</ion-select-option>
+          <ion-select-option value="genesis">Sega Genesis</ion-select-option>
+          <ion-select-option value="saturn">Sega Saturn</ion-select-option>
+          <ion-select-option value="snes">SNES</ion-select-option>
+        </ion-select>
+        <ion-note slot="end" id="select-note">{{form.value.select}}</ion-note>
+      </ion-item>
+
+      <ion-item>
+        <ion-toggle formControlName="toggle" slot="end" [disabled]="isDisabled">
+          Toggle
+        </ion-toggle>
+        <ion-note slot="end" id="toggle-note">{{form.value.toggle}}</ion-note>
+      </ion-item>
+
+      <ion-item>
+        <ion-input label="Input" formControlName="input" [disabled]="isDisabled" [readonly]="isReadonly"></ion-input>
+        <ion-note slot="end" id="input-note">{{form.value.input}}</ion-note>
+      </ion-item>
+
+      <ion-item>
+        <ion-input-otp formControlName="inputOtp" [disabled]="isDisabled" [readonly]="isReadonly">Input OTP</ion-input-otp>
+        <ion-note slot="end" id="input-otp-note">{{form.value.inputOtp}}</ion-note>
+      </ion-item>
+
+      <ion-item>
+        <ion-checkbox formControlName="checkbox" slot="start" id="first-checkbox" [disabled]="isDisabled">
+          Checkbox
+        </ion-checkbox>
+        <ion-note slot="end" id="checkbox-note">{{form.value.checkbox}}</ion-note>
+      </ion-item>
+
+      <ion-item>
+        <ion-radio-group value="nes" formControlName="radio" id="first-radio">
+          <ion-radio value="nes" [disabled]="isDisabled">Radio</ion-radio>
+        </ion-radio-group>
+        <ion-note slot="end" id="radio-note">{{form.value.radio}}</ion-note>
+      </ion-item>
+
+      <ion-item>
+        <ion-range formControlName="range" min="0" max="100" id="first-range" [disabled]="isDisabled">
+          <ion-label slot="start">Range</ion-label>
+        </ion-range>
+      </ion-item>
+
+      <ion-item>
+        <ion-textarea formControlName="textarea" minLength="0" maxLength="100" [disabled]="isDisabled" [readonly]="isReadonly" label="Textarea"></ion-textarea>
+      </ion-item>
+
+    </ion-list>
+  </form>
+  <p>
+    <ion-button (click)="setValues()" id="set-button">Set values</ion-button>
+    <ion-button (click)="resetValues()" id="reset-button">Reset values</ion-button>
+    <ion-button (click)="toggleDisable()" id="disable-button">Toggle Disabled</ion-button>
+    <ion-button (click)="toggleReadonly()" id="readonly-button">Toggle Readonly</ion-button>
+  </p>
+</ion-content>
diff --git a/packages/angular/test/base/src/app/standalone/inputs/inputs.component.ts b/packages/angular/test/base/src/app/standalone/inputs/inputs.component.ts
new file mode 100644
index 00000000000..0fa0fc83ce6
--- /dev/null
+++ b/packages/angular/test/base/src/app/standalone/inputs/inputs.component.ts
@@ -0,0 +1,80 @@
+import { Component } from '@angular/core';
+import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { 
+  IonHeader, IonToolbar, IonTitle, IonContent, IonList, IonItem, 
+  IonLabel, IonDatetime, IonNote, IonSelect, IonSelectOption, 
+  IonToggle, IonInput, IonInputOtp, IonCheckbox, IonRadioGroup, 
+  IonRadio, IonRange, IonTextarea, IonButton 
+} from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-inputs',
+  templateUrl: './inputs.component.html',
+  standalone: true,
+  imports: [
+    ReactiveFormsModule,
+    IonHeader, IonToolbar, IonTitle, IonContent, IonList, IonItem, 
+    IonLabel, IonDatetime, IonNote, IonSelect, IonSelectOption, 
+    IonToggle, IonInput, IonInputOtp, IonCheckbox, IonRadioGroup, 
+    IonRadio, IonRange, IonTextarea, IonButton
+  ],
+})
+export class InputsComponent {
+  // Create the FormGroup
+  form = new FormGroup({
+    datetime: new FormControl('1994-03-15'),
+    input: new FormControl('some text'),
+    inputOtp: new FormControl('1234'),
+    checkbox: new FormControl(true),
+    radio: new FormControl('nes'),
+    toggle: new FormControl(true),
+    select: new FormControl('nes'),
+    range: new FormControl(50),
+    textarea: new FormControl('some text'),
+  });
+
+  // States
+  isDisabled = false;
+  isReadonly = false;
+
+  setValues() {
+    console.log('set values');
+    this.form.patchValue({
+      datetime: '1994-03-15',
+      input: 'some text',
+      inputOtp: '1234',
+      checkbox: true,
+      radio: 'nes',
+      toggle: true,
+      select: 'nes',
+      range: 50,
+      textarea: 'some text',
+    });
+  }
+
+  resetValues() {
+    console.log('reset values');
+    // reset them each
+    this.form.patchValue({
+      datetime: undefined,
+      input: undefined,
+      inputOtp: undefined,
+      checkbox: false,
+      radio: undefined,
+      toggle: false,
+      select: undefined,
+      range: undefined,
+      textarea: undefined,
+    });
+  }
+
+  toggleDisable() {
+    console.log(`toggle disable to ${!this.isDisabled}`);
+    this.isDisabled = !this.isDisabled;
+  }
+
+  toggleReadonly() {
+    console.log(`toggle readonly to ${!this.isReadonly}`);
+    this.isReadonly = !this.isReadonly;
+  }
+}
diff --git a/packages/angular/test/base/src/app/standalone/modal-custom-injector/modal-custom-injector.component.ts b/packages/angular/test/base/src/app/standalone/modal-custom-injector/modal-custom-injector.component.ts
new file mode 100644
index 00000000000..e889f108293
--- /dev/null
+++ b/packages/angular/test/base/src/app/standalone/modal-custom-injector/modal-custom-injector.component.ts
@@ -0,0 +1,57 @@
+import { Component, inject, Injector } from '@angular/core';
+import { IonContent, IonHeader, IonTitle, IonToolbar, IonButton, ModalController } from '@ionic/angular/standalone';
+import { ModalCustomInjectorModalComponent } from './modal/modal.component';
+import { TestService } from './test.service';
+
+@Component({
+  selector: 'app-modal-custom-injector',
+  template: `
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Modal Custom Injector Test</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class="ion-padding">
+      <ion-button id="open-modal-with-custom-injector" (click)="openWithCustomInjector()">
+        Open Modal with Custom Injector
+      </ion-button>
+      <ion-button id="open-modal-without-custom-injector" (click)="openWithoutCustomInjector()">
+        Open Modal without Custom Injector
+      </ion-button>
+    </ion-content>
+  `,
+  standalone: true,
+  imports: [IonContent, IonHeader, IonTitle, IonToolbar, IonButton]
+})
+export class ModalCustomInjectorComponent {
+  private modalController = inject(ModalController);
+  private injector = inject(Injector);
+
+  async openWithCustomInjector() {
+    const testService = new TestService();
+    testService.setValue('custom-injector-value');
+
+    const customInjector = Injector.create({
+      providers: [{ provide: TestService, useValue: testService }],
+      parent: this.injector,
+    });
+
+    const modal = await this.modalController.create({
+      component: ModalCustomInjectorModalComponent,
+      injector: customInjector,
+    });
+
+    await modal.present();
+  }
+
+  async openWithoutCustomInjector() {
+    try {
+      const modal = await this.modalController.create({
+        component: ModalCustomInjectorModalComponent,
+      });
+      await modal.present();
+    } catch (e) {
+      alert('Error: TestService not available without custom injector');
+    }
+  }
+}
diff --git a/packages/angular/test/base/src/app/standalone/modal-custom-injector/modal/modal.component.ts b/packages/angular/test/base/src/app/standalone/modal-custom-injector/modal/modal.component.ts
new file mode 100644
index 00000000000..8c97d4a89e4
--- /dev/null
+++ b/packages/angular/test/base/src/app/standalone/modal-custom-injector/modal/modal.component.ts
@@ -0,0 +1,35 @@
+import { Component, OnInit, inject } from '@angular/core';
+import { IonContent, IonHeader, IonTitle, IonToolbar, IonButton, IonButtons } from '@ionic/angular/standalone';
+import { TestService } from '../test.service';
+
+@Component({
+  selector: 'app-modal-custom-injector-modal',
+  template: `
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Modal with Custom Injector</ion-title>
+        <ion-buttons slot="end">
+          <ion-button id="close-modal" (click)="dismiss()">Close</ion-button>
+        </ion-buttons>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content>
+      <p id="service-value">Service Value: {{ serviceValue }}</p>
+    </ion-content>
+  `,
+  standalone: true,
+  imports: [IonContent, IonHeader, IonTitle, IonToolbar, IonButton, IonButtons]
+})
+export class ModalCustomInjectorModalComponent implements OnInit {
+  private testService = inject(TestService);
+  serviceValue = '';
+  modal: HTMLIonModalElement | undefined;
+
+  ngOnInit() {
+    this.serviceValue = this.testService.getValue();
+  }
+
+  dismiss() {
+    this.modal?.dismiss();
+  }
+}
diff --git a/packages/angular/test/base/src/app/standalone/modal-custom-injector/test.service.ts b/packages/angular/test/base/src/app/standalone/modal-custom-injector/test.service.ts
new file mode 100644
index 00000000000..c5fe87d1a48
--- /dev/null
+++ b/packages/angular/test/base/src/app/standalone/modal-custom-injector/test.service.ts
@@ -0,0 +1,14 @@
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class TestService {
+  private value = 'default-value';
+
+  setValue(value: string) {
+    this.value = value;
+  }
+
+  getValue(): string {
+    return this.value;
+  }
+}
diff --git a/packages/angular/test/base/src/app/standalone/popover-custom-injector/popover-custom-injector.component.ts b/packages/angular/test/base/src/app/standalone/popover-custom-injector/popover-custom-injector.component.ts
new file mode 100644
index 00000000000..66b74033ef1
--- /dev/null
+++ b/packages/angular/test/base/src/app/standalone/popover-custom-injector/popover-custom-injector.component.ts
@@ -0,0 +1,44 @@
+import { Component, inject, Injector } from '@angular/core';
+import { IonContent, IonHeader, IonTitle, IonToolbar, IonButton, PopoverController } from '@ionic/angular/standalone';
+import { PopoverCustomInjectorPopoverComponent } from './popover/popover.component';
+import { TestService } from './test.service';
+
+@Component({
+  selector: 'app-popover-custom-injector',
+  template: `
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Popover Custom Injector Test</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class="ion-padding">
+      <ion-button id="open-popover-with-custom-injector" (click)="openWithCustomInjector($event)">
+        Open Popover with Custom Injector
+      </ion-button>
+    </ion-content>
+  `,
+  standalone: true,
+  imports: [IonContent, IonHeader, IonTitle, IonToolbar, IonButton]
+})
+export class PopoverCustomInjectorComponent {
+  private popoverController = inject(PopoverController);
+  private injector = inject(Injector);
+
+  async openWithCustomInjector(event: Event) {
+    const testService = new TestService();
+    testService.setValue('custom-injector-value');
+
+    const customInjector = Injector.create({
+      providers: [{ provide: TestService, useValue: testService }],
+      parent: this.injector,
+    });
+
+    const popover = await this.popoverController.create({
+      component: PopoverCustomInjectorPopoverComponent,
+      event: event,
+      injector: customInjector,
+    });
+
+    await popover.present();
+  }
+}
diff --git a/packages/angular/test/base/src/app/standalone/popover-custom-injector/popover/popover.component.ts b/packages/angular/test/base/src/app/standalone/popover-custom-injector/popover/popover.component.ts
new file mode 100644
index 00000000000..2be85458c5a
--- /dev/null
+++ b/packages/angular/test/base/src/app/standalone/popover-custom-injector/popover/popover.component.ts
@@ -0,0 +1,22 @@
+import { Component, OnInit, inject } from '@angular/core';
+import { IonContent } from '@ionic/angular/standalone';
+import { TestService } from '../test.service';
+
+@Component({
+  selector: 'app-popover-custom-injector-popover',
+  template: `
+    <ion-content>
+      <p id="service-value">Service Value: {{ serviceValue }}</p>
+    </ion-content>
+  `,
+  standalone: true,
+  imports: [IonContent]
+})
+export class PopoverCustomInjectorPopoverComponent implements OnInit {
+  private testService = inject(TestService);
+  serviceValue = '';
+
+  ngOnInit() {
+    this.serviceValue = this.testService.getValue();
+  }
+}
diff --git a/packages/angular/test/base/src/app/standalone/popover-custom-injector/test.service.ts b/packages/angular/test/base/src/app/standalone/popover-custom-injector/test.service.ts
new file mode 100644
index 00000000000..c5fe87d1a48
--- /dev/null
+++ b/packages/angular/test/base/src/app/standalone/popover-custom-injector/test.service.ts
@@ -0,0 +1,14 @@
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class TestService {
+  private value = 'default-value';
+
+  setValue(value: string) {
+    this.value = value;
+  }
+
+  getValue(): string {
+    return this.value;
+  }
+}
diff --git a/packages/docs/CHANGELOG.md b/packages/docs/CHANGELOG.md
index 632712133a7..c2d6498135b 100644
--- a/packages/docs/CHANGELOG.md
+++ b/packages/docs/CHANGELOG.md
@@ -3,6 +3,38 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.8.0](https://github.com/ionic-team/ionic-framework/compare/v8.7.18...v8.8.0) (2026-03-04)
+
+**Note:** Version bump only for package @ionic/docs
+
+
+
+
+
+## [8.7.18](https://github.com/ionic-team/ionic-framework/compare/v8.7.17...v8.7.18) (2026-02-25)
+
+**Note:** Version bump only for package @ionic/docs
+
+
+
+
+
+## [8.7.17](https://github.com/ionic-team/ionic-framework/compare/v8.7.15...v8.7.17) (2026-01-14)
+
+**Note:** Version bump only for package @ionic/docs
+
+
+
+
+
+## [8.7.16](https://github.com/ionic-team/ionic-framework/compare/v8.7.15...v8.7.16) (2025-12-31)
+
+**Note:** Version bump only for package @ionic/docs
+
+
+
+
+
 ## [8.7.15](https://github.com/ionic-team/ionic-framework/compare/v8.7.14...v8.7.15) (2025-12-23)
 
 **Note:** Version bump only for package @ionic/docs
diff --git a/packages/docs/package-lock.json b/packages/docs/package-lock.json
index 98e0630e216..95a123dc859 100644
--- a/packages/docs/package-lock.json
+++ b/packages/docs/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@ionic/docs",
-  "version": "8.7.15",
+  "version": "8.8.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/docs",
-      "version": "8.7.15",
+      "version": "8.8.0",
       "license": "MIT"
     }
   }
diff --git a/packages/docs/package.json b/packages/docs/package.json
index e7a085be4bf..91f26bb261b 100644
--- a/packages/docs/package.json
+++ b/packages/docs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/docs",
-  "version": "8.7.15",
+  "version": "8.8.0",
   "description": "Pre-packaged API documentation for the Ionic docs.",
   "main": "core.json",
   "types": "core.d.ts",
diff --git a/packages/react-router/CHANGELOG.md b/packages/react-router/CHANGELOG.md
index 55ae3dde0c1..89184b5e012 100644
--- a/packages/react-router/CHANGELOG.md
+++ b/packages/react-router/CHANGELOG.md
@@ -3,6 +3,38 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.8.0](https://github.com/ionic-team/ionic-framework/compare/v8.7.18...v8.8.0) (2026-03-04)
+
+**Note:** Version bump only for package @ionic/react-router
+
+
+
+
+
+## [8.7.18](https://github.com/ionic-team/ionic-framework/compare/v8.7.17...v8.7.18) (2026-02-25)
+
+**Note:** Version bump only for package @ionic/react-router
+
+
+
+
+
+## [8.7.17](https://github.com/ionic-team/ionic-framework/compare/v8.7.15...v8.7.17) (2026-01-14)
+
+**Note:** Version bump only for package @ionic/react-router
+
+
+
+
+
+## [8.7.16](https://github.com/ionic-team/ionic-framework/compare/v8.7.15...v8.7.16) (2025-12-31)
+
+**Note:** Version bump only for package @ionic/react-router
+
+
+
+
+
 ## [8.7.15](https://github.com/ionic-team/ionic-framework/compare/v8.7.14...v8.7.15) (2025-12-23)
 
 **Note:** Version bump only for package @ionic/react-router
diff --git a/packages/react-router/package-lock.json b/packages/react-router/package-lock.json
index a0a96db917f..f169ffbea99 100644
--- a/packages/react-router/package-lock.json
+++ b/packages/react-router/package-lock.json
@@ -1,15 +1,15 @@
 {
   "name": "@ionic/react-router",
-  "version": "8.7.15",
+  "version": "8.8.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/react-router",
-      "version": "8.7.15",
+      "version": "8.8.0",
       "license": "MIT",
       "dependencies": {
-        "@ionic/react": "^8.7.15",
+        "@ionic/react": "^8.8.0",
         "tslib": "*"
       },
       "devDependencies": {
@@ -238,12 +238,12 @@
       "dev": true
     },
     "node_modules/@ionic/core": {
-      "version": "8.7.15",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.7.15.tgz",
-      "integrity": "sha512-u1w9c6dx2iuatXIW5X1JY0ighDhQPjBwOHZsrOcnpm891pktuEjJDdyhDulWFa6kKVkXw1q7khwxXBEurvKc2g==",
+      "version": "8.8.0",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.8.0.tgz",
+      "integrity": "sha512-DNmTMK26EquKiCYqYCJHBjTZTeoDxY8hpgPQTinQEJMAoFthstcAhyWMDBwDvo/aEHEvE4tlCZV2XUMxTlTIEw==",
       "license": "MIT",
       "dependencies": {
-        "@stencil/core": "4.38.0",
+        "@stencil/core": "4.43.0",
         "ionicons": "^8.0.13",
         "tslib": "^2.1.0"
       },
@@ -418,12 +418,12 @@
       }
     },
     "node_modules/@ionic/react": {
-      "version": "8.7.15",
-      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-8.7.15.tgz",
-      "integrity": "sha512-3W5DAN3OMe2w32AGlW8zvKZHNY/dLCWhVLL9485VKtsYvgUc9nkG8dYDvQGc6c17PEDVrMy+IAl4H9hLgJhYnQ==",
+      "version": "8.8.0",
+      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-8.8.0.tgz",
+      "integrity": "sha512-APU5KOhi2qlAXV9WGTJCurwRwvCL20c0dcStbS+Fa2dGIbzjM0CZk+k8pzl1ffh2URYdCP9gse2XnQln8DkVtA==",
       "license": "MIT",
       "dependencies": {
-        "@ionic/core": "8.7.15",
+        "@ionic/core": "8.8.0",
         "ionicons": "^8.0.13",
         "tslib": "*"
       },
@@ -672,9 +672,9 @@
       ]
     },
     "node_modules/@stencil/core": {
-      "version": "4.38.0",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.38.0.tgz",
-      "integrity": "sha512-oC3QFKO0X1yXVvETgc8OLY525MNKhn9vISBrbtKnGoPlokJ6rI8Vk1RK22TevnNrHLI4SExNLbcDnqilKR35JQ==",
+      "version": "4.43.0",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.43.0.tgz",
+      "integrity": "sha512-6Uj2Z3lzLuufYAE7asZ6NLKgSwsB9uxl84Eh34PASnUjfj32GkrP4DtKK7fNeh1WFGGyffsTDka3gwtl+4reUg==",
       "license": "MIT",
       "bin": {
         "stencil": "bin/stencil"
@@ -4178,11 +4178,11 @@
       "dev": true
     },
     "@ionic/core": {
-      "version": "8.7.15",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.7.15.tgz",
-      "integrity": "sha512-u1w9c6dx2iuatXIW5X1JY0ighDhQPjBwOHZsrOcnpm891pktuEjJDdyhDulWFa6kKVkXw1q7khwxXBEurvKc2g==",
+      "version": "8.8.0",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.8.0.tgz",
+      "integrity": "sha512-DNmTMK26EquKiCYqYCJHBjTZTeoDxY8hpgPQTinQEJMAoFthstcAhyWMDBwDvo/aEHEvE4tlCZV2XUMxTlTIEw==",
       "requires": {
-        "@stencil/core": "4.38.0",
+        "@stencil/core": "4.43.0",
         "ionicons": "^8.0.13",
         "tslib": "^2.1.0"
       }
@@ -4284,11 +4284,11 @@
       "requires": {}
     },
     "@ionic/react": {
-      "version": "8.7.15",
-      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-8.7.15.tgz",
-      "integrity": "sha512-3W5DAN3OMe2w32AGlW8zvKZHNY/dLCWhVLL9485VKtsYvgUc9nkG8dYDvQGc6c17PEDVrMy+IAl4H9hLgJhYnQ==",
+      "version": "8.8.0",
+      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-8.8.0.tgz",
+      "integrity": "sha512-APU5KOhi2qlAXV9WGTJCurwRwvCL20c0dcStbS+Fa2dGIbzjM0CZk+k8pzl1ffh2URYdCP9gse2XnQln8DkVtA==",
       "requires": {
-        "@ionic/core": "8.7.15",
+        "@ionic/core": "8.8.0",
         "ionicons": "^8.0.13",
         "tslib": "*"
       }
@@ -4425,9 +4425,9 @@
       "optional": true
     },
     "@stencil/core": {
-      "version": "4.38.0",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.38.0.tgz",
-      "integrity": "sha512-oC3QFKO0X1yXVvETgc8OLY525MNKhn9vISBrbtKnGoPlokJ6rI8Vk1RK22TevnNrHLI4SExNLbcDnqilKR35JQ==",
+      "version": "4.43.0",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.43.0.tgz",
+      "integrity": "sha512-6Uj2Z3lzLuufYAE7asZ6NLKgSwsB9uxl84Eh34PASnUjfj32GkrP4DtKK7fNeh1WFGGyffsTDka3gwtl+4reUg==",
       "requires": {
         "@rollup/rollup-darwin-arm64": "4.34.9",
         "@rollup/rollup-darwin-x64": "4.34.9",
diff --git a/packages/react-router/package.json b/packages/react-router/package.json
index d3c93c20a76..ff4346b99ec 100644
--- a/packages/react-router/package.json
+++ b/packages/react-router/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/react-router",
-  "version": "8.7.15",
+  "version": "8.8.0",
   "description": "React Router wrapper for @ionic/react",
   "keywords": [
     "ionic",
@@ -36,7 +36,7 @@
     "dist/"
   ],
   "dependencies": {
-    "@ionic/react": "^8.7.15",
+    "@ionic/react": "^8.8.0",
     "tslib": "*"
   },
   "peerDependencies": {
diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md
index d198346bb0b..974a59fc67f 100644
--- a/packages/react/CHANGELOG.md
+++ b/packages/react/CHANGELOG.md
@@ -3,6 +3,42 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.8.0](https://github.com/ionic-team/ionic-framework/compare/v8.7.18...v8.8.0) (2026-03-04)
+
+
+### Features
+
+* **modal:** add drag events for sheet and card modals ([#30962](https://github.com/ionic-team/ionic-framework/issues/30962)) ([d29ac71](https://github.com/ionic-team/ionic-framework/commit/d29ac713fad604c256fb385eb0c26eb9717e1ff4))
+* **textarea:** reflect disabled and readonly props ([#30910](https://github.com/ionic-team/ionic-framework/issues/30910)) ([55735df](https://github.com/ionic-team/ionic-framework/commit/55735df3fa62c8e259c56db3169f3d5459e71c0c))
+
+
+
+
+
+## [8.7.18](https://github.com/ionic-team/ionic-framework/compare/v8.7.17...v8.7.18) (2026-02-25)
+
+**Note:** Version bump only for package @ionic/react
+
+
+
+
+
+## [8.7.17](https://github.com/ionic-team/ionic-framework/compare/v8.7.15...v8.7.17) (2026-01-14)
+
+**Note:** Version bump only for package @ionic/react
+
+
+
+
+
+## [8.7.16](https://github.com/ionic-team/ionic-framework/compare/v8.7.15...v8.7.16) (2025-12-31)
+
+**Note:** Version bump only for package @ionic/react
+
+
+
+
+
 ## [8.7.15](https://github.com/ionic-team/ionic-framework/compare/v8.7.14...v8.7.15) (2025-12-23)
 
 **Note:** Version bump only for package @ionic/react
diff --git a/packages/react/package-lock.json b/packages/react/package-lock.json
index f10c3cf0873..8f1dccb8a17 100644
--- a/packages/react/package-lock.json
+++ b/packages/react/package-lock.json
@@ -1,15 +1,15 @@
 {
   "name": "@ionic/react",
-  "version": "8.7.15",
+  "version": "8.8.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/react",
-      "version": "8.7.15",
+      "version": "8.8.0",
       "license": "MIT",
       "dependencies": {
-        "@ionic/core": "^8.7.15",
+        "@ionic/core": "^8.8.0",
         "ionicons": "^8.0.13",
         "tslib": "*"
       },
@@ -736,12 +736,12 @@
       "dev": true
     },
     "node_modules/@ionic/core": {
-      "version": "8.7.15",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.7.15.tgz",
-      "integrity": "sha512-u1w9c6dx2iuatXIW5X1JY0ighDhQPjBwOHZsrOcnpm891pktuEjJDdyhDulWFa6kKVkXw1q7khwxXBEurvKc2g==",
+      "version": "8.8.0",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.8.0.tgz",
+      "integrity": "sha512-DNmTMK26EquKiCYqYCJHBjTZTeoDxY8hpgPQTinQEJMAoFthstcAhyWMDBwDvo/aEHEvE4tlCZV2XUMxTlTIEw==",
       "license": "MIT",
       "dependencies": {
-        "@stencil/core": "4.38.0",
+        "@stencil/core": "4.43.0",
         "ionicons": "^8.0.13",
         "tslib": "^2.1.0"
       },
@@ -1729,9 +1729,9 @@
       }
     },
     "node_modules/@stencil/core": {
-      "version": "4.38.0",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.38.0.tgz",
-      "integrity": "sha512-oC3QFKO0X1yXVvETgc8OLY525MNKhn9vISBrbtKnGoPlokJ6rI8Vk1RK22TevnNrHLI4SExNLbcDnqilKR35JQ==",
+      "version": "4.43.0",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.43.0.tgz",
+      "integrity": "sha512-6Uj2Z3lzLuufYAE7asZ6NLKgSwsB9uxl84Eh34PASnUjfj32GkrP4DtKK7fNeh1WFGGyffsTDka3gwtl+4reUg==",
       "license": "MIT",
       "bin": {
         "stencil": "bin/stencil"
diff --git a/packages/react/package.json b/packages/react/package.json
index 68819b74b8a..50b178266bd 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/react",
-  "version": "8.7.15",
+  "version": "8.8.0",
   "description": "React specific wrapper for @ionic/core",
   "keywords": [
     "ionic",
@@ -40,7 +40,7 @@
     "css/"
   ],
   "dependencies": {
-    "@ionic/core": "^8.7.15",
+    "@ionic/core": "^8.8.0",
     "ionicons": "^8.0.13",
     "tslib": "*"
   },
diff --git a/packages/react/src/components/index.ts b/packages/react/src/components/index.ts
index 5355401a797..12ce0320d76 100644
--- a/packages/react/src/components/index.ts
+++ b/packages/react/src/components/index.ts
@@ -54,6 +54,7 @@ export {
   IonicSafeString,
   LoadingOptions,
   MenuCustomEvent,
+  ModalDragEventDetail,
   ModalOptions,
   NavCustomEvent,
   PickerOptions,
diff --git a/packages/react/test/base/src/pages/Inputs.tsx b/packages/react/test/base/src/pages/Inputs.tsx
index fb3972739d7..4ebf3b3833b 100644
--- a/packages/react/test/base/src/pages/Inputs.tsx
+++ b/packages/react/test/base/src/pages/Inputs.tsx
@@ -66,6 +66,10 @@ const Inputs: React.FC<InputsProps> = () => {
   const [segment, setSegment] = useState('dogs');
   const [select, setSelect] = useState('apples');
 
+  // States
+  const [isDisabled, setIsDisabled] = useState(false);
+  const [isReadonly, setIsReadonly] = useState(false);
+
   const [touched, setTouched] = useState({
     input: false,
     textarea: false,
@@ -123,6 +127,14 @@ const Inputs: React.FC<InputsProps> = () => {
     setSelect('bananas');
   };
 
+  const toggleDisable = () => {
+    setIsDisabled(!isDisabled);
+  };
+
+  const toggleReadonly = () => {
+    setIsReadonly(!isReadonly);
+  };
+
   return (
     <IonPage data-pageid="inputs">
       <IonHeader translucent={true}>
@@ -138,6 +150,7 @@ const Inputs: React.FC<InputsProps> = () => {
             onIonChange={(e: IonSegmentCustomEvent<SegmentChangeEventDetail>) => {
               if (typeof e.detail.value === 'string') setSegment(e.detail.value);
             }}
+            disabled={isDisabled}
           >
             <IonSegmentButton value="dogs">
               <IonLabel>Dogs</IonLabel>
@@ -151,6 +164,7 @@ const Inputs: React.FC<InputsProps> = () => {
           <IonSearchbar
             value={searchbar}
             onIonInput={(e: IonSearchbarCustomEvent<SearchbarInputEventDetail>) => setSearchbar(e.detail.value!)}
+            disabled={isDisabled}
           ></IonSearchbar>
         </IonToolbar>
       </IonHeader>
@@ -167,6 +181,7 @@ const Inputs: React.FC<InputsProps> = () => {
             <IonCheckbox
               checked={checkbox}
               onIonChange={(e: IonCheckboxCustomEvent<CheckboxChangeEventDetail>) => setCheckbox(e.detail.checked)}
+              disabled={isDisabled}
             >
               Checkbox
             </IonCheckbox>
@@ -176,6 +191,7 @@ const Inputs: React.FC<InputsProps> = () => {
             <IonToggle
               checked={toggle}
               onIonChange={(e: IonToggleCustomEvent<ToggleChangeEventDetail>) => setToggle(e.detail.checked)}
+              disabled={isDisabled}
             >
               Toggle
             </IonToggle>
@@ -188,6 +204,8 @@ const Inputs: React.FC<InputsProps> = () => {
               onIonBlur={() => setTouched(prev => ({ ...prev, input: true }))}
               className={getValidationClasses('input', input)}
               label="Input"
+              disabled={isDisabled}
+              readonly={isReadonly}
               required
             ></IonInput>
           </IonItem>
@@ -196,6 +214,8 @@ const Inputs: React.FC<InputsProps> = () => {
             <IonInputOtp
               value={inputOtp}
               onIonInput={(e: IonInputOtpCustomEvent<InputOtpInputEventDetail>) => setInputOtp(e.detail.value ?? '')}
+              disabled={isDisabled}
+              readonly={isReadonly}
             ></IonInputOtp>
           </IonItem>
 
@@ -207,6 +227,7 @@ const Inputs: React.FC<InputsProps> = () => {
               max={100}
               value={range}
               onIonChange={(e: IonRangeCustomEvent<RangeChangeEventDetail>) => setRange(e.detail.value as { lower: number; upper: number })}
+              disabled={isDisabled}
             ></IonRange>
           </IonItem>
 
@@ -217,6 +238,8 @@ const Inputs: React.FC<InputsProps> = () => {
               onIonBlur={() => setTouched(prev => ({ ...prev, textarea: true }))}
               className={getValidationClasses('textarea', textarea)}
               label="Textarea"
+              disabled={isDisabled}
+              readonly={isReadonly}
               required
             ></IonTextarea>
           </IonItem>
@@ -231,6 +254,8 @@ const Inputs: React.FC<InputsProps> = () => {
                   setDatetime(value);
                 }
               }}
+              disabled={isDisabled}
+              readonly={isReadonly}
             ></IonDatetime>
           </IonItem>
 
@@ -239,13 +264,13 @@ const Inputs: React.FC<InputsProps> = () => {
             onIonChange={(e: IonRadioGroupCustomEvent<RadioGroupChangeEventDetail>) => setRadio(e.detail.value)}
           >
             <IonItem>
-              <IonRadio value="red">Red</IonRadio>
+              <IonRadio value="red" disabled={isDisabled}>Red</IonRadio>
             </IonItem>
             <IonItem>
-              <IonRadio value="green">Green</IonRadio>
+              <IonRadio value="green" disabled={isDisabled}>Green</IonRadio>
             </IonItem>
             <IonItem>
-              <IonRadio value="blue">Blue</IonRadio>
+              <IonRadio value="blue" disabled={isDisabled}>Blue</IonRadio>
             </IonItem>
           </IonRadioGroup>
 
@@ -254,6 +279,7 @@ const Inputs: React.FC<InputsProps> = () => {
               value={select}
               onIonChange={(e: IonSelectCustomEvent<SelectChangeEventDetail<any>>) => setSelect(e.detail.value)}
               label="Select"
+              disabled={isDisabled}
             >
               <IonSelectOption value="apples">Apples</IonSelectOption>
               <IonSelectOption value="bananas">Bananas</IonSelectOption>
@@ -278,6 +304,8 @@ const Inputs: React.FC<InputsProps> = () => {
 
           <IonButton expand="block" onClick={reset} id="reset">Reset Values</IonButton>
           <IonButton expand="block" onClick={set} id="set">Set Values</IonButton>
+          <IonButton expand="block" onClick={toggleDisable} id="disable">Toggle Disabled</IonButton>
+          <IonButton expand="block" onClick={toggleReadonly} id="readonly">Toggle Readonly</IonButton>
         </div>
       </IonContent>
     </IonPage>
diff --git a/packages/react/test/base/tests/e2e/specs/components/inputs.cy.ts b/packages/react/test/base/tests/e2e/specs/components/inputs.cy.ts
index b2b244ad3f5..af6aed28262 100644
--- a/packages/react/test/base/tests/e2e/specs/components/inputs.cy.ts
+++ b/packages/react/test/base/tests/e2e/specs/components/inputs.cy.ts
@@ -3,48 +3,69 @@ describe('Inputs', () => {
     cy.visit('/inputs')
   })
 
-  it('should have default value', () => {
-    cy.get('ion-checkbox').should('have.prop', 'checked').and('eq', false);
-    cy.get('ion-toggle').should('have.prop', 'checked').and('eq', false);
-    cy.get('ion-input').should('have.prop', 'value').and('eq', '');
-    cy.get('ion-input-otp').should('have.prop', 'value').and('eq', '');
-    cy.get('ion-range').should('have.prop', 'value').and('deep.eq', { lower: 30, upper: 70 });
-    cy.get('ion-textarea').should('have.prop', 'value').and('eq', '');
-    cy.get('ion-searchbar').should('have.prop', 'value').and('eq', '');
-    cy.get('ion-datetime').should('have.prop', 'value').and('eq', '');
-    cy.get('ion-radio-group').should('have.prop', 'value').and('eq', 'red');
-    cy.get('ion-segment').should('have.prop', 'value').and('eq', 'dogs');
-    cy.get('ion-select').should('have.prop', 'value').and('eq', 'apples');
-  });
+  describe('basic functionality', () => {
+    it('should have default value', () => {
+      cy.get('ion-checkbox').should('have.prop', 'checked').and('eq', false);
+      cy.get('ion-toggle').should('have.prop', 'checked').and('eq', false);
+      cy.get('ion-input').should('have.prop', 'value').and('eq', '');
+      cy.get('ion-input-otp').should('have.prop', 'value').and('eq', '');
+      cy.get('ion-range').should('have.prop', 'value').and('deep.eq', { lower: 30, upper: 70 });
+      cy.get('ion-textarea').should('have.prop', 'value').and('eq', '');
+      cy.get('ion-searchbar').should('have.prop', 'value').and('eq', '');
+      cy.get('ion-datetime').should('have.prop', 'value').and('eq', '');
+      cy.get('ion-radio-group').should('have.prop', 'value').and('eq', 'red');
+      cy.get('ion-segment').should('have.prop', 'value').and('eq', 'dogs');
+      cy.get('ion-select').should('have.prop', 'value').and('eq', 'apples');
+    });
+
+    it('should set/reset values', () => {
+      cy.get('ion-button#set').click();
+
+      cy.get('ion-checkbox').should('have.prop', 'checked').and('eq', true);
+      cy.get('ion-toggle').should('have.prop', 'checked').and('eq', true);
+      cy.get('ion-input').should('have.prop', 'value').and('eq', 'Hello World');
+      cy.get('ion-input-otp').should('have.prop', 'value').and('eq', '1234');
+      cy.get('ion-range').should('have.prop', 'value').and('deep.eq', { lower: 10, upper: 90 });
+      cy.get('ion-textarea').should('have.prop', 'value').and('eq', 'Lorem Ipsum');
+      cy.get('ion-searchbar').should('have.prop', 'value').and('eq', 'Search Query');
+      cy.get('ion-datetime').should('have.prop', 'value').and('eq', '2019-01-31');
+      cy.get('ion-radio-group').should('have.prop', 'value').and('eq', 'blue');
+      cy.get('ion-segment').should('have.prop', 'value').and('eq', 'cats');
+      cy.get('ion-select').should('have.prop', 'value').and('eq', 'bananas');
+
+      cy.get('ion-button#reset').click();
+
+      cy.get('ion-checkbox').should('have.prop', 'checked').and('eq', false);
+      cy.get('ion-toggle').should('have.prop', 'checked').and('eq', false);
+      cy.get('ion-input').should('have.prop', 'value').and('eq', '');
+      cy.get('ion-input-otp').should('have.prop', 'value').and('eq', '');
+      cy.get('ion-range').should('have.prop', 'value').and('deep.eq', { lower: 30, upper: 70 });
+      cy.get('ion-textarea').should('have.prop', 'value').and('eq', '');
+      cy.get('ion-searchbar').should('have.prop', 'value').and('eq', '');
+      cy.get('ion-datetime').should('have.prop', 'value').and('eq', '');
+      cy.get('ion-radio-group').should('have.prop', 'value').and('eq', 'red');
+      cy.get('ion-segment').should('have.prop', 'value').and('eq', 'dogs');
+      cy.get('ion-select').should('have.prop', 'value').and('eq', 'apples');
+    });
 
-  it('should set/reset values', () => {
-    cy.get('ion-button#set').click();
-
-    cy.get('ion-checkbox').should('have.prop', 'checked').and('eq', true);
-    cy.get('ion-toggle').should('have.prop', 'checked').and('eq', true);
-    cy.get('ion-input').should('have.prop', 'value').and('eq', 'Hello World');
-    cy.get('ion-input-otp').should('have.prop', 'value').and('eq', '1234');
-    cy.get('ion-range').should('have.prop', 'value').and('deep.eq', { lower: 10, upper: 90 });
-    cy.get('ion-textarea').should('have.prop', 'value').and('eq', 'Lorem Ipsum');
-    cy.get('ion-searchbar').should('have.prop', 'value').and('eq', 'Search Query');
-    cy.get('ion-datetime').should('have.prop', 'value').and('eq', '2019-01-31');
-    cy.get('ion-radio-group').should('have.prop', 'value').and('eq', 'blue');
-    cy.get('ion-segment').should('have.prop', 'value').and('eq', 'cats');
-    cy.get('ion-select').should('have.prop', 'value').and('eq', 'bananas');
-
-    cy.get('ion-button#reset').click();
-
-    cy.get('ion-checkbox').should('have.prop', 'checked').and('eq', false);
-    cy.get('ion-toggle').should('have.prop', 'checked').and('eq', false);
-    cy.get('ion-input').should('have.prop', 'value').and('eq', '');
-    cy.get('ion-input-otp').should('have.prop', 'value').and('eq', '');
-    cy.get('ion-range').should('have.prop', 'value').and('deep.eq', { lower: 30, upper: 70 });
-    cy.get('ion-textarea').should('have.prop', 'value').and('eq', '');
-    cy.get('ion-searchbar').should('have.prop', 'value').and('eq', '');
-    cy.get('ion-datetime').should('have.prop', 'value').and('eq', '');
-    cy.get('ion-radio-group').should('have.prop', 'value').and('eq', 'red');
-    cy.get('ion-segment').should('have.prop', 'value').and('eq', 'dogs');
-    cy.get('ion-select').should('have.prop', 'value').and('eq', 'apples');
+    it('should reflect props when component has a default value', () => {
+      // Disable inputs
+      cy.get('ion-button#disable').click();
+
+      // Disabled prop
+      cy.get('ion-input').should('have.attr', 'disabled');
+      cy.get('ion-input-otp').should('have.attr', 'disabled');
+      cy.get('ion-textarea').should('have.attr', 'disabled');
+
+      // Reset disabled state and set readonly state
+      cy.get('ion-button#disable').click();
+      cy.get('ion-button#readonly').click();
+
+      // Readonly prop
+      cy.get('ion-input').should('have.attr', 'readonly');
+      cy.get('ion-input-otp').should('have.attr', 'readonly');
+      cy.get('ion-textarea').should('have.attr', 'readonly');
+    });
   });
 
   describe('updating text input refs', () => {
diff --git a/packages/vue-router/CHANGELOG.md b/packages/vue-router/CHANGELOG.md
index f56cb248703..64c86bc03eb 100644
--- a/packages/vue-router/CHANGELOG.md
+++ b/packages/vue-router/CHANGELOG.md
@@ -3,6 +3,38 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.8.0](https://github.com/ionic-team/ionic-framework/compare/v8.7.18...v8.8.0) (2026-03-04)
+
+**Note:** Version bump only for package @ionic/vue-router
+
+
+
+
+
+## [8.7.18](https://github.com/ionic-team/ionic-framework/compare/v8.7.17...v8.7.18) (2026-02-25)
+
+**Note:** Version bump only for package @ionic/vue-router
+
+
+
+
+
+## [8.7.17](https://github.com/ionic-team/ionic-framework/compare/v8.7.15...v8.7.17) (2026-01-14)
+
+**Note:** Version bump only for package @ionic/vue-router
+
+
+
+
+
+## [8.7.16](https://github.com/ionic-team/ionic-framework/compare/v8.7.15...v8.7.16) (2025-12-31)
+
+**Note:** Version bump only for package @ionic/vue-router
+
+
+
+
+
 ## [8.7.15](https://github.com/ionic-team/ionic-framework/compare/v8.7.14...v8.7.15) (2025-12-23)
 
 **Note:** Version bump only for package @ionic/vue-router
diff --git a/packages/vue-router/package-lock.json b/packages/vue-router/package-lock.json
index bfd04a619b7..a62e6147ea2 100644
--- a/packages/vue-router/package-lock.json
+++ b/packages/vue-router/package-lock.json
@@ -1,15 +1,15 @@
 {
   "name": "@ionic/vue-router",
-  "version": "8.7.15",
+  "version": "8.8.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/vue-router",
-      "version": "8.7.15",
+      "version": "8.8.0",
       "license": "MIT",
       "dependencies": {
-        "@ionic/vue": "^8.7.15"
+        "@ionic/vue": "^8.8.0"
       },
       "devDependencies": {
         "@ionic/eslint-config": "^0.3.0",
@@ -673,12 +673,12 @@
       "dev": true
     },
     "node_modules/@ionic/core": {
-      "version": "8.7.15",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.7.15.tgz",
-      "integrity": "sha512-u1w9c6dx2iuatXIW5X1JY0ighDhQPjBwOHZsrOcnpm891pktuEjJDdyhDulWFa6kKVkXw1q7khwxXBEurvKc2g==",
+      "version": "8.8.0",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.8.0.tgz",
+      "integrity": "sha512-DNmTMK26EquKiCYqYCJHBjTZTeoDxY8hpgPQTinQEJMAoFthstcAhyWMDBwDvo/aEHEvE4tlCZV2XUMxTlTIEw==",
       "license": "MIT",
       "dependencies": {
-        "@stencil/core": "4.38.0",
+        "@stencil/core": "4.43.0",
         "ionicons": "^8.0.13",
         "tslib": "^2.1.0"
       },
@@ -868,12 +868,12 @@
       }
     },
     "node_modules/@ionic/vue": {
-      "version": "8.7.15",
-      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-8.7.15.tgz",
-      "integrity": "sha512-F94GoGBsLoFFkJLe+W401SynIfUzEL1Z+Y4YUQ2EGpulnFpY4tXKzDhRNrisPnM0k3BWQRh8AA8fwTtMqEiISw==",
+      "version": "8.8.0",
+      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-8.8.0.tgz",
+      "integrity": "sha512-WjPi29Umye9yMdCE+w0yOvyH28q5tK5Oorp3tLu5t2fl9KB9EhPBwBN+CgVWsKDFeSu81P4o+q0y5OvMQYHbvQ==",
       "license": "MIT",
       "dependencies": {
-        "@ionic/core": "8.7.15",
+        "@ionic/core": "8.8.0",
         "@stencil/vue-output-target": "0.10.7",
         "ionicons": "^8.0.13"
       }
@@ -1526,9 +1526,9 @@
       }
     },
     "node_modules/@stencil/core": {
-      "version": "4.38.0",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.38.0.tgz",
-      "integrity": "sha512-oC3QFKO0X1yXVvETgc8OLY525MNKhn9vISBrbtKnGoPlokJ6rI8Vk1RK22TevnNrHLI4SExNLbcDnqilKR35JQ==",
+      "version": "4.43.0",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.43.0.tgz",
+      "integrity": "sha512-6Uj2Z3lzLuufYAE7asZ6NLKgSwsB9uxl84Eh34PASnUjfj32GkrP4DtKK7fNeh1WFGGyffsTDka3gwtl+4reUg==",
       "license": "MIT",
       "bin": {
         "stencil": "bin/stencil"
@@ -8044,11 +8044,11 @@
       "dev": true
     },
     "@ionic/core": {
-      "version": "8.7.15",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.7.15.tgz",
-      "integrity": "sha512-u1w9c6dx2iuatXIW5X1JY0ighDhQPjBwOHZsrOcnpm891pktuEjJDdyhDulWFa6kKVkXw1q7khwxXBEurvKc2g==",
+      "version": "8.8.0",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.8.0.tgz",
+      "integrity": "sha512-DNmTMK26EquKiCYqYCJHBjTZTeoDxY8hpgPQTinQEJMAoFthstcAhyWMDBwDvo/aEHEvE4tlCZV2XUMxTlTIEw==",
       "requires": {
-        "@stencil/core": "4.38.0",
+        "@stencil/core": "4.43.0",
         "ionicons": "^8.0.13",
         "tslib": "^2.1.0"
       }
@@ -8159,11 +8159,11 @@
       "requires": {}
     },
     "@ionic/vue": {
-      "version": "8.7.15",
-      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-8.7.15.tgz",
-      "integrity": "sha512-F94GoGBsLoFFkJLe+W401SynIfUzEL1Z+Y4YUQ2EGpulnFpY4tXKzDhRNrisPnM0k3BWQRh8AA8fwTtMqEiISw==",
+      "version": "8.8.0",
+      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-8.8.0.tgz",
+      "integrity": "sha512-WjPi29Umye9yMdCE+w0yOvyH28q5tK5Oorp3tLu5t2fl9KB9EhPBwBN+CgVWsKDFeSu81P4o+q0y5OvMQYHbvQ==",
       "requires": {
-        "@ionic/core": "8.7.15",
+        "@ionic/core": "8.8.0",
         "@stencil/vue-output-target": "0.10.7",
         "ionicons": "^8.0.13"
       }
@@ -8627,9 +8627,9 @@
       }
     },
     "@stencil/core": {
-      "version": "4.38.0",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.38.0.tgz",
-      "integrity": "sha512-oC3QFKO0X1yXVvETgc8OLY525MNKhn9vISBrbtKnGoPlokJ6rI8Vk1RK22TevnNrHLI4SExNLbcDnqilKR35JQ==",
+      "version": "4.43.0",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.43.0.tgz",
+      "integrity": "sha512-6Uj2Z3lzLuufYAE7asZ6NLKgSwsB9uxl84Eh34PASnUjfj32GkrP4DtKK7fNeh1WFGGyffsTDka3gwtl+4reUg==",
       "requires": {
         "@rollup/rollup-darwin-arm64": "4.34.9",
         "@rollup/rollup-darwin-x64": "4.34.9",
diff --git a/packages/vue-router/package.json b/packages/vue-router/package.json
index 6b55532cb9b..3d996d9a26c 100644
--- a/packages/vue-router/package.json
+++ b/packages/vue-router/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/vue-router",
-  "version": "8.7.15",
+  "version": "8.8.0",
   "description": "Vue Router integration for @ionic/vue",
   "scripts": {
     "test.spec": "jest",
@@ -44,7 +44,7 @@
   },
   "homepage": "https://github.com/ionic-team/ionic-framework#readme",
   "dependencies": {
-    "@ionic/vue": "^8.7.15"
+    "@ionic/vue": "^8.8.0"
   },
   "devDependencies": {
     "@ionic/eslint-config": "^0.3.0",
diff --git a/packages/vue/CHANGELOG.md b/packages/vue/CHANGELOG.md
index 436bae11c08..19fc8ac4682 100644
--- a/packages/vue/CHANGELOG.md
+++ b/packages/vue/CHANGELOG.md
@@ -3,6 +3,45 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.8.0](https://github.com/ionic-team/ionic-framework/compare/v8.7.18...v8.8.0) (2026-03-04)
+
+
+### Features
+
+* **modal:** add drag events for sheet and card modals ([#30962](https://github.com/ionic-team/ionic-framework/issues/30962)) ([d29ac71](https://github.com/ionic-team/ionic-framework/commit/d29ac713fad604c256fb385eb0c26eb9717e1ff4))
+* **refresher:** add ionPullStart and ionPullEnd events ([#30946](https://github.com/ionic-team/ionic-framework/issues/30946)) ([814c2e5](https://github.com/ionic-team/ionic-framework/commit/814c2e5ccd6d5bfda12bdf13a566cd66ff830d5b)), closes [#24524](https://github.com/ionic-team/ionic-framework/issues/24524)
+* **segment-view:** add swipeGesture property to disable swiping ([#30948](https://github.com/ionic-team/ionic-framework/issues/30948)) ([46806bd](https://github.com/ionic-team/ionic-framework/commit/46806bd6e2af90a0b31fca68f508c06d3d281ec0)), closes [#30290](https://github.com/ionic-team/ionic-framework/issues/30290)
+* **select:** pass cancelText property to modal interface ([#30282](https://github.com/ionic-team/ionic-framework/issues/30282)) ([6e4f60a](https://github.com/ionic-team/ionic-framework/commit/6e4f60af4c188ae04028b444aa21118ae27c2ca7))
+* **textarea:** reflect disabled and readonly props ([#30910](https://github.com/ionic-team/ionic-framework/issues/30910)) ([55735df](https://github.com/ionic-team/ionic-framework/commit/55735df3fa62c8e259c56db3169f3d5459e71c0c))
+
+
+
+
+
+## [8.7.18](https://github.com/ionic-team/ionic-framework/compare/v8.7.17...v8.7.18) (2026-02-25)
+
+**Note:** Version bump only for package @ionic/vue
+
+
+
+
+
+## [8.7.17](https://github.com/ionic-team/ionic-framework/compare/v8.7.15...v8.7.17) (2026-01-14)
+
+**Note:** Version bump only for package @ionic/vue
+
+
+
+
+
+## [8.7.16](https://github.com/ionic-team/ionic-framework/compare/v8.7.15...v8.7.16) (2025-12-31)
+
+**Note:** Version bump only for package @ionic/vue
+
+
+
+
+
 ## [8.7.15](https://github.com/ionic-team/ionic-framework/compare/v8.7.14...v8.7.15) (2025-12-23)
 
 **Note:** Version bump only for package @ionic/vue
diff --git a/packages/vue/package-lock.json b/packages/vue/package-lock.json
index f19fe970e0b..599aeb0f3a0 100644
--- a/packages/vue/package-lock.json
+++ b/packages/vue/package-lock.json
@@ -1,15 +1,15 @@
 {
   "name": "@ionic/vue",
-  "version": "8.7.15",
+  "version": "8.8.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/vue",
-      "version": "8.7.15",
+      "version": "8.8.0",
       "license": "MIT",
       "dependencies": {
-        "@ionic/core": "^8.7.15",
+        "@ionic/core": "^8.8.0",
         "@stencil/vue-output-target": "0.10.7",
         "ionicons": "^8.0.13"
       },
@@ -222,12 +222,12 @@
       "dev": true
     },
     "node_modules/@ionic/core": {
-      "version": "8.7.15",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.7.15.tgz",
-      "integrity": "sha512-u1w9c6dx2iuatXIW5X1JY0ighDhQPjBwOHZsrOcnpm891pktuEjJDdyhDulWFa6kKVkXw1q7khwxXBEurvKc2g==",
+      "version": "8.8.0",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.8.0.tgz",
+      "integrity": "sha512-DNmTMK26EquKiCYqYCJHBjTZTeoDxY8hpgPQTinQEJMAoFthstcAhyWMDBwDvo/aEHEvE4tlCZV2XUMxTlTIEw==",
       "license": "MIT",
       "dependencies": {
-        "@stencil/core": "4.38.0",
+        "@stencil/core": "4.43.0",
         "ionicons": "^8.0.13",
         "tslib": "^2.1.0"
       },
@@ -677,9 +677,9 @@
       ]
     },
     "node_modules/@stencil/core": {
-      "version": "4.38.0",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.38.0.tgz",
-      "integrity": "sha512-oC3QFKO0X1yXVvETgc8OLY525MNKhn9vISBrbtKnGoPlokJ6rI8Vk1RK22TevnNrHLI4SExNLbcDnqilKR35JQ==",
+      "version": "4.43.0",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.43.0.tgz",
+      "integrity": "sha512-6Uj2Z3lzLuufYAE7asZ6NLKgSwsB9uxl84Eh34PASnUjfj32GkrP4DtKK7fNeh1WFGGyffsTDka3gwtl+4reUg==",
       "license": "MIT",
       "bin": {
         "stencil": "bin/stencil"
diff --git a/packages/vue/package.json b/packages/vue/package.json
index 04bd5518ab0..fd27a9f47da 100644
--- a/packages/vue/package.json
+++ b/packages/vue/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/vue",
-  "version": "8.7.15",
+  "version": "8.8.0",
   "description": "Vue specific wrapper for @ionic/core",
   "scripts": {
     "eslint": "eslint src",
@@ -68,7 +68,7 @@
     "vue-router": "^4.0.16"
   },
   "dependencies": {
-    "@ionic/core": "^8.7.15",
+    "@ionic/core": "^8.8.0",
     "@stencil/vue-output-target": "0.10.7",
     "ionicons": "^8.0.13"
   },
diff --git a/packages/vue/src/index.ts b/packages/vue/src/index.ts
index b189d4d9370..bea59d65c38 100644
--- a/packages/vue/src/index.ts
+++ b/packages/vue/src/index.ts
@@ -91,6 +91,7 @@ export {
   IonicSafeString,
   LoadingOptions,
   MenuCustomEvent,
+  ModalDragEventDetail,
   ModalOptions,
   NavCustomEvent,
   PickerOptions,
diff --git a/packages/vue/src/proxies.ts b/packages/vue/src/proxies.ts
index 40f13491af6..ead6e071923 100644
--- a/packages/vue/src/proxies.ts
+++ b/packages/vue/src/proxies.ts
@@ -818,11 +818,15 @@ export const IonRefresher: StencilVueComponent<JSX.IonRefresher> = /*@__PURE__*/
   'disabled',
   'ionRefresh',
   'ionPull',
-  'ionStart'
+  'ionStart',
+  'ionPullStart',
+  'ionPullEnd'
 ], [
   'ionRefresh',
   'ionPull',
-  'ionStart'
+  'ionStart',
+  'ionPullStart',
+  'ionPullEnd'
 ]);
 
 
@@ -936,6 +940,7 @@ export const IonSegmentContent: StencilVueComponent<JSX.IonSegmentContent> = /*@
 
 export const IonSegmentView: StencilVueComponent<JSX.IonSegmentView> = /*@__PURE__*/ defineContainer<JSX.IonSegmentView>('ion-segment-view', defineIonSegmentView, [
   'disabled',
+  'swipeGesture',
   'ionSegmentViewScroll'
 ], [
   'ionSegmentViewScroll'
@@ -985,6 +990,7 @@ export const IonSelect: StencilVueComponent<JSX.IonSelect, JSX.IonSelect["value"
 
 export const IonSelectModal: StencilVueComponent<JSX.IonSelectModal> = /*@__PURE__*/ defineContainer<JSX.IonSelectModal>('ion-select-modal', defineIonSelectModal, [
   'header',
+  'cancelText',
   'multiple',
   'options'
 ]);
diff --git a/packages/vue/src/utils/overlays.ts b/packages/vue/src/utils/overlays.ts
index b917e750541..4fd361e4e80 100644
--- a/packages/vue/src/utils/overlays.ts
+++ b/packages/vue/src/utils/overlays.ts
@@ -109,6 +109,11 @@ export const defineOverlayContainer = <Props extends object>(
         delete restOfProps.onDidPresent;
         delete restOfProps.onWillDismiss;
         delete restOfProps.onDidDismiss;
+        if (name === "ion-modal") {
+          delete restOfProps.onIonDragStart;
+          delete restOfProps.onIonDragMove;
+          delete restOfProps.onIonDragEnd;
+        }
 
         const component = slots.default && slots.default()[0];
         overlay.value = controller.create({
@@ -174,6 +179,24 @@ export const defineOverlayContainer = <Props extends object>(
           emit("didPresent", ev);
           emit(componentName + "DidPresent", ev);
         });
+        /**
+         * Modal drag events:
+         * Adding these ensures they are re-emitted so developers can
+         * use @ionDragStart, @ionDragMove, etc. in their templates.
+         */
+        if (name === "ion-modal") {
+          elementRef.value.addEventListener("ionDragStart", (ev: Event) => {
+            emit("ionDragStart", ev);
+          });
+
+          elementRef.value.addEventListener("ionDragMove", (ev: Event) => {
+            emit("ionDragMove", ev);
+          });
+
+          elementRef.value.addEventListener("ionDragEnd", (ev: Event) => {
+            emit("ionDragEnd", ev);
+          });
+        }
       });
 
       return () => {
diff --git a/packages/vue/test/base/src/views/Inputs.vue b/packages/vue/test/base/src/views/Inputs.vue
index 03f6a9e3023..1a90c916624 100644
--- a/packages/vue/test/base/src/views/Inputs.vue
+++ b/packages/vue/test/base/src/views/Inputs.vue
@@ -8,7 +8,7 @@
         <ion-title>Inputs</ion-title>
       </ion-toolbar>
       <ion-toolbar>
-        <ion-segment v-model="segment">
+        <ion-segment v-model="segment" :disabled="isDisabled">
           <ion-segment-button value="dogs">
             <ion-label>Dogs</ion-label>
           </ion-segment-button>
@@ -18,7 +18,7 @@
         </ion-segment>
       </ion-toolbar>
       <ion-toolbar>
-        <ion-searchbar v-model="searchbar"></ion-searchbar>
+        <ion-searchbar v-model="searchbar" :disabled="isDisabled"></ion-searchbar>
       </ion-toolbar>
     </ion-header>
 
@@ -30,48 +30,48 @@
       </ion-header>
 
       <ion-item>
-        <ion-checkbox v-model="checkbox">Checkbox</ion-checkbox>
+        <ion-checkbox v-model="checkbox" :disabled="isDisabled">Checkbox</ion-checkbox>
       </ion-item>
 
       <ion-item>
-        <ion-toggle v-model="toggle">Toggle</ion-toggle>
+        <ion-toggle v-model="toggle" :disabled="isDisabled">Toggle</ion-toggle>
       </ion-item>
 
       <ion-item>
-        <ion-input v-model="input" label="Input" required @ionBlur="handleValidation" @ionInput="handleValidation"></ion-input>
+        <ion-input v-model="input" label="Input" required @ionBlur="handleValidation" @ionInput="handleValidation" :disabled="isDisabled" :readonly="isReadonly"></ion-input>
       </ion-item>
 
       <ion-item>
-        <ion-input-otp v-model="inputOtp"></ion-input-otp>
+        <ion-input-otp v-model="inputOtp" :disabled="isDisabled" :readonly="isReadonly"></ion-input-otp>
       </ion-item>
 
       <ion-item>
-        <ion-range label="Range" :dual-knobs="true" :min="0" :max="100" slot="end" v-model="range"></ion-range>
+        <ion-range label="Range" :dual-knobs="true" :min="0" :max="100" slot="end" v-model="range" :disabled="isDisabled"></ion-range>
       </ion-item>
 
       <ion-item>
-        <ion-textarea label="Textarea" v-model="textarea" required @ionBlur="handleValidation" @ionInput="handleValidation"></ion-textarea>
+        <ion-textarea label="Textarea" v-model="textarea" required @ionBlur="handleValidation" @ionInput="handleValidation" :disabled="isDisabled" :readonly="isReadonly"></ion-textarea>
       </ion-item>
 
       <ion-item>
         <ion-label>Datetime</ion-label>
-        <ion-datetime v-model="datetime"></ion-datetime>
+        <ion-datetime v-model="datetime" :disabled="isDisabled" :readonly="isReadonly"></ion-datetime>
       </ion-item>
 
       <ion-radio-group v-model="radio">
         <ion-item>
-          <ion-radio value="red">Red</ion-radio>
+          <ion-radio value="red" :disabled="isDisabled">Red</ion-radio>
         </ion-item>
         <ion-item>
-          <ion-radio value="green">Green</ion-radio>
+          <ion-radio value="green" :disabled="isDisabled">Green</ion-radio>
         </ion-item>
         <ion-item>
-          <ion-radio value="blue">Blue</ion-radio>
+          <ion-radio value="blue" :disabled="isDisabled">Blue</ion-radio>
         </ion-item>
       </ion-radio-group>
 
       <ion-item>
-        <ion-select v-model="select" label="Select">
+        <ion-select v-model="select" label="Select" :disabled="isDisabled">
           <ion-select-option value="apples">Apples</ion-select-option>
           <ion-select-option value="bananas">Bananas</ion-select-option>
         </ion-select>
@@ -94,6 +94,8 @@
 
         <ion-button expand="block" @click="reset" id="reset">Reset Values</ion-button>
         <ion-button expand="block" @click="set" id="set">Set Values</ion-button>
+        <ion-button expand="block" @click="toggleDisable" id="disable">Toggle Disabled</ion-button>
+        <ion-button expand="block" @click="toggleReadonly" id="readonly">Toggle Readonly</ion-button>
       </div>
     </ion-content>
   </ion-page>
@@ -143,6 +145,10 @@ const radio = ref('red');
 const segment = ref('dogs');
 const select = ref('apples');
 
+// States
+const isDisabled = ref(false);
+const isReadonly = ref(false);
+
 const reset = () => {
   checkbox.value = false;
   toggle.value = false;
@@ -177,6 +183,14 @@ const set = () => {
   select.value = 'bananas';
 }
 
+const toggleDisable = () => {
+  isDisabled.value = !isDisabled.value;
+};
+
+const toggleReadonly = () => {
+  isReadonly.value = !isReadonly.value;
+};
+
 const setIonicClasses = (element: HTMLElement, isBlurEvent: boolean) => {
   requestAnimationFrame(() => {
     let isValid = false;
diff --git a/packages/vue/test/base/tests/e2e/specs/inputs.cy.js b/packages/vue/test/base/tests/e2e/specs/inputs.cy.js
index c72eae3aae6..42403e915bf 100644
--- a/packages/vue/test/base/tests/e2e/specs/inputs.cy.js
+++ b/packages/vue/test/base/tests/e2e/specs/inputs.cy.js
@@ -2,48 +2,70 @@ describe('Inputs', () => {
   beforeEach(() => {
     cy.visit('/inputs')
   })
-  it('should have default value', () => {
-    cy.get('ion-checkbox').should('have.prop', 'checked').and('eq', false);
-    cy.get('ion-toggle').should('have.prop', 'checked').and('eq', false);
-    cy.get('ion-input').should('have.prop', 'value').and('eq', '');
-    cy.get('ion-input-otp').should('have.prop', 'value').and('eq', '');
-    cy.get('ion-range').should('have.prop', 'value').and('deep.eq', { lower: 30, upper: 70 });
-    cy.get('ion-textarea').should('have.prop', 'value').and('eq', '');
-    cy.get('ion-searchbar').should('have.prop', 'value').and('eq', '');
-    cy.get('ion-datetime').should('have.prop', 'value').and('eq', '');
-    cy.get('ion-radio-group').should('have.prop', 'value').and('eq', 'red');
-    cy.get('ion-segment').should('have.prop', 'value').and('eq', 'dogs');
-    cy.get('ion-select').should('have.prop', 'value').and('eq', 'apples');
-  });
+  
+  describe('basic functionality', () => {
+    it('should have default value', () => {
+      cy.get('ion-checkbox').should('have.prop', 'checked').and('eq', false);
+      cy.get('ion-toggle').should('have.prop', 'checked').and('eq', false);
+      cy.get('ion-input').should('have.prop', 'value').and('eq', '');
+      cy.get('ion-input-otp').should('have.prop', 'value').and('eq', '');
+      cy.get('ion-range').should('have.prop', 'value').and('deep.eq', { lower: 30, upper: 70 });
+      cy.get('ion-textarea').should('have.prop', 'value').and('eq', '');
+      cy.get('ion-searchbar').should('have.prop', 'value').and('eq', '');
+      cy.get('ion-datetime').should('have.prop', 'value').and('eq', '');
+      cy.get('ion-radio-group').should('have.prop', 'value').and('eq', 'red');
+      cy.get('ion-segment').should('have.prop', 'value').and('eq', 'dogs');
+      cy.get('ion-select').should('have.prop', 'value').and('eq', 'apples');
+    });
+
+    it('should set/reset values', () => {
+      cy.get('ion-button#set').click();
 
-  it('should set/reset values', () => {
-    cy.get('ion-button#set').click();
-
-    cy.get('ion-checkbox').should('have.prop', 'checked').and('eq', true);
-    cy.get('ion-toggle').should('have.prop', 'checked').and('eq', true);
-    cy.get('ion-input').should('have.prop', 'value').and('eq', 'Hello World');
-    cy.get('ion-input-otp').should('have.prop', 'value').and('eq', '1234');
-    cy.get('ion-range').should('have.prop', 'value').and('deep.eq', { lower: 10, upper: 90 });
-    cy.get('ion-textarea').should('have.prop', 'value').and('eq', 'Lorem Ipsum');
-    cy.get('ion-searchbar').should('have.prop', 'value').and('eq', 'Search Query');
-    cy.get('ion-datetime').should('have.prop', 'value').and('eq', '2019-01-31');
-    cy.get('ion-radio-group').should('have.prop', 'value').and('eq', 'blue');
-    cy.get('ion-segment').should('have.prop', 'value').and('eq', 'cats');
-    cy.get('ion-select').should('have.prop', 'value').and('eq', 'bananas');
-
-    cy.get('ion-button#reset').click();
-
-    cy.get('ion-checkbox').should('have.prop', 'checked').and('eq', false);
-    cy.get('ion-toggle').should('have.prop', 'checked').and('eq', false);
-    cy.get('ion-input').should('have.prop', 'value').and('eq', '');
-    cy.get('ion-input-otp').should('have.prop', 'value').and('eq', '');
-    cy.get('ion-range').should('have.prop', 'value').and('deep.eq', { lower: 30, upper: 70 });
-    cy.get('ion-textarea').should('have.prop', 'value').and('eq', '');
-    cy.get('ion-searchbar').should('have.prop', 'value').and('eq', '');
-    cy.get('ion-datetime').should('have.prop', 'value').and('eq', '');
-    cy.get('ion-radio-group').should('have.prop', 'value').and('eq', 'red');
-    cy.get('ion-segment').should('have.prop', 'value').and('eq', 'dogs');
-    cy.get('ion-select').should('have.prop', 'value').and('eq', 'apples');
+      cy.get('ion-checkbox').should('have.prop', 'checked').and('eq', true);
+      cy.get('ion-toggle').should('have.prop', 'checked').and('eq', true);
+      cy.get('ion-input').should('have.prop', 'value').and('eq', 'Hello World');
+      cy.get('ion-input-otp').should('have.prop', 'value').and('eq', '1234');
+      cy.get('ion-range').should('have.prop', 'value').and('deep.eq', { lower: 10, upper: 90 });
+      cy.get('ion-textarea').should('have.prop', 'value').and('eq', 'Lorem Ipsum');
+      cy.get('ion-searchbar').should('have.prop', 'value').and('eq', 'Search Query');
+      cy.get('ion-datetime').should('have.prop', 'value').and('eq', '2019-01-31');
+      cy.get('ion-radio-group').should('have.prop', 'value').and('eq', 'blue');
+      cy.get('ion-segment').should('have.prop', 'value').and('eq', 'cats');
+      cy.get('ion-select').should('have.prop', 'value').and('eq', 'bananas');
+
+      cy.get('ion-button#reset').click();
+
+      cy.get('ion-checkbox').should('have.prop', 'checked').and('eq', false);
+      cy.get('ion-toggle').should('have.prop', 'checked').and('eq', false);
+      cy.get('ion-input').should('have.prop', 'value').and('eq', '');
+      cy.get('ion-input-otp').should('have.prop', 'value').and('eq', '');
+      cy.get('ion-range').should('have.prop', 'value').and('deep.eq', { lower: 30, upper: 70 });
+      cy.get('ion-textarea').should('have.prop', 'value').and('eq', '');
+      cy.get('ion-searchbar').should('have.prop', 'value').and('eq', '');
+      cy.get('ion-datetime').should('have.prop', 'value').and('eq', '');
+      cy.get('ion-radio-group').should('have.prop', 'value').and('eq', 'red');
+      cy.get('ion-segment').should('have.prop', 'value').and('eq', 'dogs');
+      cy.get('ion-select').should('have.prop', 'value').and('eq', 'apples');
+    });
+
+    it('should reflect props when component has a default value', () => {
+      // Disable inputs
+      cy.get('ion-button#disable').click();
+
+      // Disabled prop
+      cy.get('ion-input').should('have.attr', 'disabled');
+      cy.get('ion-input-otp').should('have.attr', 'disabled');
+      cy.get('ion-textarea').should('have.attr', 'disabled');
+
+      // Reset disabled state and set readonly state
+      cy.get('ion-button#disable').click();
+      cy.get('ion-button#readonly').click();
+
+      // Readonly prop
+      cy.get('ion-input').should('have.attr', 'readonly');
+      cy.get('ion-input-otp').should('have.attr', 'readonly');
+      cy.get('ion-textarea').should('have.attr', 'readonly');
+    });
   });
 
   describe('updating text input refs', () => {