merge release-8.7.18 (#30972)

v8.7.18

.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

.github/workflows/actions/build-core-stencil-prerelease/action.yml

@@ -8,7 +8,7 @@ inputs:
 runs:
   using: 'composite'
   steps:
-    - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+    - 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/css core/hydrate core/loader core/src/components.d.ts
+        paths: core/dist core/components core/css core/hydrate core/loader core/src/components.d.ts core/package.json

.github/workflows/actions/build-core/action.yml

@@ -8,7 +8,7 @@ inputs:
 runs:
   using: 'composite'
   steps:
-    - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+    - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
     - uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
       with:
         node-version: 24.x

.github/workflows/actions/build-react/action.yml

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

.github/workflows/actions/build-vue/action.yml

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

.github/workflows/actions/test-angular-e2e/action.yml

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

.github/workflows/actions/test-core-clean-build/action.yml

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

.github/workflows/actions/test-core-lint/action.yml

@@ -10,6 +10,10 @@ runs:
       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

.github/workflows/actions/test-core-screenshot/action.yml

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

.github/workflows/actions/update-reference-screenshots/action.yml

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

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

.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

.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

.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

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

.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

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

.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

CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [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)
 
 

core/CHANGELOG.md

@@ -3,6 +3,21 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [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)
 
 

core/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@ionic/core",
-  "version": "8.7.17",
+  "version": "8.7.18",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/core",
-      "version": "8.7.17",
+      "version": "8.7.18",
       "license": "MIT",
       "dependencies": {
         "@stencil/core": "4.38.0",
@@ -19,7 +19,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",
@@ -94,7 +93,6 @@
       "version": "7.16.12",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.16.7",
         "@babel/generator": "^7.16.8",
@@ -629,20 +627,19 @@
       "license": "MIT"
     },
     "node_modules/@capacitor/core": {
-      "version": "8.0.1",
-      "resolved": "https://registry.npmjs.org/@capacitor/core/-/core-8.0.1.tgz",
-      "integrity": "sha512-5UqSWxGMp/B8KhYu7rAijqNtYslhcLh+TrbfU48PfdMDsPfaU/VY48sMNzC22xL8BmoFoql/3SKyP+pavTOvOA==",
+      "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,
       "dependencies": {
         "tslib": "^2.1.0"
       }
     },
     "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": {
@@ -650,9 +647,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": {
@@ -660,34 +657,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,
@@ -872,7 +850,6 @@
       "version": "4.33.0",
       "dev": true,
       "license": "BSD-2-Clause",
-      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "4.33.0",
         "@typescript-eslint/types": "4.33.0",
@@ -1810,7 +1787,6 @@
     "node_modules/@stencil/core": {
       "version": "4.38.0",
       "license": "MIT",
-      "peer": true,
       "bin": {
         "stencil": "bin/stencil"
       },
@@ -2235,7 +2211,6 @@
       "version": "6.7.2",
       "dev": true,
       "license": "BSD-2-Clause",
-      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "6.7.2",
         "@typescript-eslint/types": "6.7.2",
@@ -2461,6 +2436,7 @@
       "integrity": "sha512-vay5/oQJdsNHmliWoZfHPoVZZRmnSWhug0BYT34njkYTPqClh3DNWLkZNJBVSjsNMrg0CCrBfoKkjZQPM/QVUw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/parser": "^7.28.5",
         "@vue/shared": "3.5.25",
@@ -2475,6 +2451,7 @@
       "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
       "dev": true,
       "license": "BSD-2-Clause",
+      "peer": true,
       "engines": {
         "node": ">=0.12"
       },
@@ -2487,7 +2464,8 @@
       "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
       "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/@vue/compiler-dom": {
       "version": "3.5.25",
@@ -2495,6 +2473,7 @@
       "integrity": "sha512-4We0OAcMZsKgYoGlMjzYvaoErltdFI2/25wqanuTu+S4gismOTRTBPi4IASOjxWdzIwrYSjnqONfKvuqkXzE2Q==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@vue/compiler-core": "3.5.25",
         "@vue/shared": "3.5.25"
@@ -2506,6 +2485,7 @@
       "integrity": "sha512-PUgKp2rn8fFsI++lF2sO7gwO2d9Yj57Utr5yEsDf3GNaQcowCLKL7sf+LvVFvtJDXUp/03+dC6f2+LCv5aK1ag==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/parser": "^7.28.5",
         "@vue/compiler-core": "3.5.25",
@@ -2523,7 +2503,8 @@
       "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
       "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/@vue/compiler-sfc/node_modules/postcss": {
       "version": "8.5.6",
@@ -2545,6 +2526,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.11",
         "picocolors": "^1.1.1",
@@ -2560,6 +2542,7 @@
       "integrity": "sha512-ritPSKLBcParnsKYi+GNtbdbrIE1mtuFEJ4U1sWeuOMlIziK5GtOL85t5RhsNy4uWIXPgk+OUdpnXiTdzn8o3A==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@vue/compiler-dom": "3.5.25",
         "@vue/shared": "3.5.25"
@@ -2571,6 +2554,7 @@
       "integrity": "sha512-5xfAypCQepv4Jog1U4zn8cZIcbKKFka3AgWHEFQeK65OW+Ys4XybP6z2kKgws4YB43KGpqp5D/K3go2UPPunLA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@vue/shared": "3.5.25"
       }
@@ -2581,6 +2565,7 @@
       "integrity": "sha512-Z751v203YWwYzy460bzsYQISDfPjHTl+6Zzwo/a3CsAf+0ccEjQ8c+0CdX1WsumRTHeywvyUFtW6KvNukT/smA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@vue/reactivity": "3.5.25",
         "@vue/shared": "3.5.25"
@@ -2592,6 +2577,7 @@
       "integrity": "sha512-a4WrkYFbb19i9pjkz38zJBg8wa/rboNERq3+hRRb0dHiJh13c+6kAbgqCPfMaJ2gg4weWD3APZswASOfmKwamA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@vue/reactivity": "3.5.25",
         "@vue/runtime-core": "3.5.25",
@@ -2605,6 +2591,7 @@
       "integrity": "sha512-UJaXR54vMG61i8XNIzTSf2Q7MOqZHpp8+x3XLGtE3+fL+nQd+k7O5+X3D/uWrnQXOdMw5VPih+Uremcw+u1woQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@vue/compiler-ssr": "3.5.25",
         "@vue/shared": "3.5.25"
@@ -2618,7 +2605,8 @@
       "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.25.tgz",
       "integrity": "sha512-AbOPdQQnAnzs58H2FrrDxYj/TJfmeS2jdfEEhgiKINy+bnOANmVizIEgq1r+C5zsbs6l1CCQxtcj71rwNQ4jWg==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/@zeit/schemas": {
       "version": "2.21.0",
@@ -2641,7 +2629,6 @@
       "version": "7.4.0",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -3802,7 +3789,8 @@
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
       "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/debug": {
       "version": "2.6.9",
@@ -4096,7 +4084,6 @@
       "version": "7.32.0",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/code-frame": "7.12.11",
         "@eslint/eslintrc": "^0.4.3",
@@ -7292,6 +7279,7 @@
       "integrity": "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@jridgewell/sourcemap-codec": "^1.5.5"
       }
@@ -7613,6 +7601,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "bin": {
         "nanoid": "bin/nanoid.cjs"
       },
@@ -7967,7 +7956,6 @@
       "integrity": "sha512-hutraynyn31F+Bifme+Ps9Vq59hKuUCz7H1kDOcBs+2oGguKkWTU50bBWrtz34OUWmIwpBTWDxaRPXrIXkgvmQ==",
       "dev": true,
       "license": "Apache-2.0",
-      "peer": true,
       "bin": {
         "playwright-core": "cli.js"
       },
@@ -7979,7 +7967,6 @@
       "version": "7.0.35",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "chalk": "^2.4.2",
         "source-map": "^0.6.1",
@@ -8085,7 +8072,6 @@
       "version": "0.36.2",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "peerDependencies": {
         "postcss": ">=5.0.0"
       }
@@ -8134,7 +8120,6 @@
       "version": "2.6.1",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "prettier": "bin-prettier.js"
       },
@@ -8492,7 +8477,6 @@
       "version": "2.35.1",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "rollup": "dist/bin/rollup"
       },
@@ -8714,6 +8698,7 @@
       "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
       "dev": true,
       "license": "BSD-3-Clause",
+      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }

core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/core",
-  "version": "8.7.17",
+  "version": "8.7.18",
   "description": "Base components for Ionic",
   "engines": {
     "node": ">= 16"
@@ -44,7 +44,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",
@@ -104,8 +103,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",

core/scripts/testing/e2e-script.mjs

@@ -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);

core/src/components/app/app.tsx

@@ -14,12 +14,13 @@ import { getIonMode } from '../../global/ionic-global';
 })
 export class App implements ComponentInterface {
   private focusVisible?: FocusVisibleUtility;
+  private loadTimeout?: ReturnType<typeof setTimeout> | undefined;
 
   @Element() el!: HTMLElement;
 
   componentDidLoad() {
     if (Build.isBrowser) {
-      rIC(async () => {
+      this.rIC(async () => {
         const isHybrid = isPlatform(window, 'hybrid');
         if (!config.getBoolean('_testing')) {
           import('../../utils/tap-click').then((module) => module.startTapClick(config));
@@ -60,6 +61,12 @@ export class App implements ComponentInterface {
     }
   }
 
+  disconnectedCallback() {
+    if (this.loadTimeout) {
+      clearTimeout(this.loadTimeout);
+    }
+  }
+
   /**
    * Used to set focus on an element that uses `ion-focusable`.
    * Do not use this if focusing the element as a result of a keyboard
@@ -78,6 +85,14 @@ export class App implements ComponentInterface {
     }
   }
 
+  private rIC(callback: () => void) {
+    if ('requestIdleCallback' in window) {
+      (window as any).requestIdleCallback(callback);
+    } else {
+      this.loadTimeout = setTimeout(callback, 32);
+    }
+  }
+
   render() {
     const mode = getIonMode(this);
     return (
@@ -113,11 +128,3 @@ const needInputShims = () => {
 
   return false;
 };
-
-const rIC = (callback: () => void) => {
-  if ('requestIdleCallback' in window) {
-    (window as any).requestIdleCallback(callback);
-  } else {
-    setTimeout(callback, 32);
-  }
-};

core/src/components/chip/test/states/chip.e2e.ts

@@ -1,27 +1,23 @@
 import { expect } from '@playwright/test';
 import { configs, test } from '@utils/test/playwright';
 
-/**
- * This behavior does not vary across modes/directions
- */
 configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  /**
+   * This behavior does not vary across modes/directions.
+   */
   test.describe(title('chip: states'), () => {
     test('should render disabled state', async ({ page }) => {
-      await page.goto(`/src/components/chip/test/states`, config);
+      await page.setContent(
+        `<ion-chip disabled="true">
+          <ion-label>Disabled</ion-label>
+        </ion-chip>`,
+        config
+      );
 
-      const container = page.locator('#disabled');
+      const chip = page.locator('ion-chip');
 
-      await expect(container).toHaveScreenshot(screenshot(`chip-disabled`));
+      await expect(chip).toHaveScreenshot(screenshot(`chip-disabled`));
     });
-
-    test('should render activated state', async ({ page }) => {
-      await page.goto(`/src/components/chip/test/states`, config);
-
-      const container = page.locator('#activated');
-
-      await expect(container).toHaveScreenshot(screenshot(`chip-activated`));
-    });
-
     test('should custom chip', async ({ page }) => {
       await page.setContent(
         `

core/src/components/chip/test/states/index.html

@@ -19,285 +19,211 @@
       <ion-content>
         <h3>Default</h3>
 
-        <div id="default">
-          <p>
-            <ion-chip>
-              <ion-label>Default</ion-label>
-            </ion-chip>
-            <ion-chip color="primary">
-              <ion-label>Primary</ion-label>
-            </ion-chip>
-            <ion-chip color="secondary">
-              <ion-label>Secondary</ion-label>
-            </ion-chip>
-            <ion-chip color="tertiary">
-              <ion-label>Tertiary</ion-label>
-            </ion-chip>
-            <ion-chip color="success">
-              <ion-label>Success</ion-label>
-            </ion-chip>
-            <ion-chip color="warning">
-              <ion-label>Warning</ion-label>
-            </ion-chip>
-            <ion-chip color="danger">
-              <ion-label>Danger</ion-label>
-            </ion-chip>
-            <ion-chip color="light">
-              <ion-label>Light</ion-label>
-            </ion-chip>
-            <ion-chip color="medium">
-              <ion-label>Medium</ion-label>
-            </ion-chip>
-            <ion-chip color="dark">
-              <ion-label>Dark</ion-label>
-            </ion-chip>
-          </p>
+        <p>
+          <ion-chip>
+            <ion-label>Default</ion-label>
+          </ion-chip>
+          <ion-chip style="border-radius: 4px">
+            <ion-label>Border Radius</ion-label>
+          </ion-chip>
+          <ion-chip>
+            <ion-icon name="checkmark-circle"></ion-icon>
+            <ion-label>With Icon</ion-label>
+          </ion-chip>
+          <ion-chip>
+            <ion-avatar>
+              <img
+                src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjYzVkYmZmIiBkPSJNMCAwaDUxMnY1MTJIMHoiLz48cGF0aCBkPSJNMjU2IDMwNGM2MS42IDAgMTEyLTUwLjQgMTEyLTExMlMzMTcuNiA4MCAyNTYgODBzLTExMiA1MC40LTExMiAxMTIgNTAuNCAxMTIgMTEyIDExMnptMCA0MGMtNzQuMiAwLTIyNCAzNy44LTIyNCAxMTJ2NTZoNDQ4di01NmMwLTc0LjItMTQ5LjgtMTEyLTIyNC0xMTJ6IiBmaWxsPSIjODJhZWZmIi8+PC9zdmc+"
+              />
+            </ion-avatar>
+            <ion-label>With Avatar</ion-label>
+          </ion-chip>
+          <ion-chip>
+            <ion-avatar>
+              <img
+                src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjYzVkYmZmIiBkPSJNMCAwaDUxMnY1MTJIMHoiLz48cGF0aCBkPSJNMjU2IDMwNGM2MS42IDAgMTEyLTUwLjQgMTEyLTExMlMzMTcuNiA4MCAyNTYgODBzLTExMiA1MC40LTExMiAxMTIgNTAuNCAxMTIgMTEyIDExMnptMCA0MGMtNzQuMiAwLTIyNCAzNy44LTIyNCAxMTJ2NTZoNDQ4di01NmMwLTc0LjItMTQ5LjgtMTEyLTIyNC0xMTJ6IiBmaWxsPSIjODJhZWZmIi8+PC9zdmc+"
+              />
+            </ion-avatar>
+            <ion-label>With Icon and Avatar</ion-label>
+            <ion-icon name="close-circle"></ion-icon>
+          </ion-chip>
+        </p>
+        <p>
+          <ion-chip class="ion-focused">
+            <ion-label>Default</ion-label>
+          </ion-chip>
+          <ion-chip style="border-radius: 4px" class="ion-focused">
+            <ion-label>Border Radius</ion-label>
+          </ion-chip>
+          <ion-chip class="ion-focused">
+            <ion-icon name="checkmark-circle"></ion-icon>
+            <ion-label>With Icon</ion-label>
+          </ion-chip>
+          <ion-chip class="ion-focused">
+            <ion-avatar>
+              <img
+                src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjYzVkYmZmIiBkPSJNMCAwaDUxMnY1MTJIMHoiLz48cGF0aCBkPSJNMjU2IDMwNGM2MS42IDAgMTEyLTUwLjQgMTEyLTExMlMzMTcuNiA4MCAyNTYgODBzLTExMiA1MC40LTExMiAxMTIgNTAuNCAxMTIgMTEyIDExMnptMCA0MGMtNzQuMiAwLTIyNCAzNy44LTIyNCAxMTJ2NTZoNDQ4di01NmMwLTc0LjItMTQ5LjgtMTEyLTIyNC0xMTJ6IiBmaWxsPSIjODJhZWZmIi8+PC9zdmc+"
+              />
+            </ion-avatar>
+            <ion-label>With Avatar</ion-label>
+          </ion-chip>
+          <ion-chip class="ion-focused">
+            <ion-avatar>
+              <img
+                src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjYzVkYmZmIiBkPSJNMCAwaDUxMnY1MTJIMHoiLz48cGF0aCBkPSJNMjU2IDMwNGM2MS42IDAgMTEyLTUwLjQgMTEyLTExMlMzMTcuNiA4MCAyNTYgODBzLTExMiA1MC40LTExMiAxMTIgNTAuNCAxMTIgMTEyIDExMnptMCA0MGMtNzQuMiAwLTIyNCAzNy44LTIyNCAxMTJ2NTZoNDQ4di01NmMwLTc0LjItMTQ5LjgtMTEyLTIyNC0xMTJ6IiBmaWxsPSIjODJhZWZmIi8+PC9zdmc+"
+              />
+            </ion-avatar>
+            <ion-label>With Icon and Avatar</ion-label>
+            <ion-icon name="close-circle"></ion-icon>
+          </ion-chip>
+        </p>
 
-          <p>
-            <ion-chip outline>
-              <ion-label>Default</ion-label>
-            </ion-chip>
-            <ion-chip outline color="primary">
-              <ion-label>Primary</ion-label>
-            </ion-chip>
-            <ion-chip outline color="secondary">
-              <ion-label>Secondary</ion-label>
-            </ion-chip>
-            <ion-chip outline color="tertiary">
-              <ion-label>Tertiary</ion-label>
-            </ion-chip>
-            <ion-chip outline color="success">
-              <ion-label>Success</ion-label>
-            </ion-chip>
-            <ion-chip outline color="warning">
-              <ion-label>Warning</ion-label>
-            </ion-chip>
-            <ion-chip outline color="danger">
-              <ion-label>Danger</ion-label>
-            </ion-chip>
-            <ion-chip outline color="light">
-              <ion-label>Light</ion-label>
-            </ion-chip>
-            <ion-chip outline color="medium">
-              <ion-label>Medium</ion-label>
-            </ion-chip>
-            <ion-chip outline color="dark">
-              <ion-label>Dark</ion-label>
-            </ion-chip>
-          </p>
-        </div>
+        <h3>Colors</h3>
+        <p>
+          <ion-chip color="primary">
+            <ion-label>Primary</ion-label>
+          </ion-chip>
+          <ion-chip color="secondary">
+            <ion-label>Secondary</ion-label>
+          </ion-chip>
+          <ion-chip color="tertiary">
+            <ion-icon name="checkmark-circle"></ion-icon>
+            <ion-label>Tertiary with Icon</ion-label>
+          </ion-chip>
+          <ion-chip color="success">
+            <ion-avatar>
+              <img
+                src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjYzVkYmZmIiBkPSJNMCAwaDUxMnY1MTJIMHoiLz48cGF0aCBkPSJNMjU2IDMwNGM2MS42IDAgMTEyLTUwLjQgMTEyLTExMlMzMTcuNiA4MCAyNTYgODBzLTExMiA1MC40LTExMiAxMTIgNTAuNCAxMTIgMTEyIDExMnptMCA0MGMtNzQuMiAwLTIyNCAzNy44LTIyNCAxMTJ2NTZoNDQ4di01NmMwLTc0LjItMTQ5LjgtMTEyLTIyNC0xMTJ6IiBmaWxsPSIjODJhZWZmIi8+PC9zdmc+"
+              />
+            </ion-avatar>
+            <ion-label>Success with Avatar</ion-label>
+          </ion-chip>
+          <ion-chip color="warning">
+            <ion-label>Warning with Icon</ion-label>
+            <ion-icon name="calendar"></ion-icon>
+          </ion-chip>
+          <ion-chip color="danger">
+            <ion-label>Danger</ion-label>
+          </ion-chip>
+          <ion-chip color="light">
+            <ion-label>Light</ion-label>
+          </ion-chip>
+          <ion-chip color="medium">
+            <ion-label>Medium</ion-label>
+          </ion-chip>
+          <ion-chip color="dark">
+            <ion-label>Dark</ion-label>
+          </ion-chip>
+        </p>
+        <p>
+          <ion-chip color="primary" class="ion-focused">
+            <ion-label>Primary</ion-label>
+          </ion-chip>
+          <ion-chip color="secondary" class="ion-focused">
+            <ion-label>Secondary</ion-label>
+          </ion-chip>
+          <ion-chip color="tertiary" class="ion-focused">
+            <ion-icon name="checkmark-circle"></ion-icon>
+            <ion-label>Tertiary with Icon</ion-label>
+          </ion-chip>
+          <ion-chip color="success" class="ion-focused">
+            <ion-avatar>
+              <img
+                src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjYzVkYmZmIiBkPSJNMCAwaDUxMnY1MTJIMHoiLz48cGF0aCBkPSJNMjU2IDMwNGM2MS42IDAgMTEyLTUwLjQgMTEyLTExMlMzMTcuNiA4MCAyNTYgODBzLTExMiA1MC40LTExMiAxMTIgNTAuNCAxMTIgMTEyIDExMnptMCA0MGMtNzQuMiAwLTIyNCAzNy44LTIyNCAxMTJ2NTZoNDQ4di01NmMwLTc0LjItMTQ5LjgtMTEyLTIyNC0xMTJ6IiBmaWxsPSIjODJhZWZmIi8+PC9zdmc+"
+              />
+            </ion-avatar>
+            <ion-label>Success with Avatar</ion-label>
+          </ion-chip>
+          <ion-chip color="warning" class="ion-focused">
+            <ion-label>Warning with Icon</ion-label>
+            <ion-icon name="calendar"></ion-icon>
+          </ion-chip>
+          <ion-chip color="danger" class="ion-focused">
+            <ion-label>Danger</ion-label>
+          </ion-chip>
+          <ion-chip color="light" class="ion-focused">
+            <ion-label>Light</ion-label>
+          </ion-chip>
+          <ion-chip color="medium" class="ion-focused">
+            <ion-label>Medium</ion-label>
+          </ion-chip>
+          <ion-chip color="dark" class="ion-focused">
+            <ion-label>Dark</ion-label>
+          </ion-chip>
+        </p>
+
+        <h3>Outline</h3>
+
+        <p>
+          <ion-chip outline>
+            <ion-label>Outline</ion-label>
+          </ion-chip>
+          <ion-chip outline color="danger">
+            <ion-label>Danger Outline</ion-label>
+          </ion-chip>
+          <ion-chip outline color="secondary">
+            <ion-icon name="checkmark-circle"></ion-icon>
+            <ion-label>Secondary Outline with Icon</ion-label>
+          </ion-chip>
+          <ion-chip outline color="primary">
+            <ion-label>Primary Outline with Avatar</ion-label>
+            <ion-avatar>
+              <img
+                src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjYzVkYmZmIiBkPSJNMCAwaDUxMnY1MTJIMHoiLz48cGF0aCBkPSJNMjU2IDMwNGM2MS42IDAgMTEyLTUwLjQgMTEyLTExMlMzMTcuNiA4MCAyNTYgODBzLTExMiA1MC40LTExMiAxMTIgNTAuNCAxMTIgMTEyIDExMnptMCA0MGMtNzQuMiAwLTIyNCAzNy44LTIyNCAxMTJ2NTZoNDQ4di01NmMwLTc0LjItMTQ5LjgtMTEyLTIyNC0xMTJ6IiBmaWxsPSIjODJhZWZmIi8+PC9zdmc+"
+              />
+            </ion-avatar>
+          </ion-chip>
+          <ion-chip outline>
+            <ion-icon name="git-pull-request"></ion-icon>
+            <ion-label>Outline with Icon and Avatar</ion-label>
+            <ion-icon name="close-circle"></ion-icon>
+          </ion-chip>
+        </p>
+        <p>
+          <ion-chip outline class="ion-focused">
+            <ion-label>Outline</ion-label>
+          </ion-chip>
+          <ion-chip outline color="danger" class="ion-focused">
+            <ion-label>Danger Outline</ion-label>
+          </ion-chip>
+          <ion-chip outline color="secondary" class="ion-focused">
+            <ion-icon name="checkmark-circle"></ion-icon>
+            <ion-label>Secondary Outline with Icon</ion-label>
+          </ion-chip>
+          <ion-chip outline color="primary" class="ion-focused">
+            <ion-label>Primary Outline with Avatar</ion-label>
+            <ion-avatar>
+              <img
+                src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjYzVkYmZmIiBkPSJNMCAwaDUxMnY1MTJIMHoiLz48cGF0aCBkPSJNMjU2IDMwNGM2MS42IDAgMTEyLTUwLjQgMTEyLTExMlMzMTcuNiA4MCAyNTYgODBzLTExMiA1MC40LTExMiAxMTIgNTAuNCAxMTIgMTEyIDExMnptMCA0MGMtNzQuMiAwLTIyNCAzNy44LTIyNCAxMTJ2NTZoNDQ4di01NmMwLTc0LjItMTQ5LjgtMTEyLTIyNC0xMTJ6IiBmaWxsPSIjODJhZWZmIi8+PC9zdmc+"
+              />
+            </ion-avatar>
+          </ion-chip>
+          <ion-chip outline class="ion-focused">
+            <ion-icon name="git-pull-request"></ion-icon>
+            <ion-label>Outline with Icon and Avatar</ion-label>
+            <ion-icon name="close-circle"></ion-icon>
+          </ion-chip>
+        </p>
 
         <h3>Disabled</h3>
-        <div id="disabled">
-          <p>
-            <ion-chip disabled>
-              <ion-label>Default</ion-label>
-            </ion-chip>
-            <ion-chip color="primary" disabled>
-              <ion-label>Primary</ion-label>
-            </ion-chip>
-            <ion-chip color="secondary" disabled>
-              <ion-label>Secondary</ion-label>
-            </ion-chip>
-            <ion-chip color="tertiary" disabled>
-              <ion-label>Tertiary</ion-label>
-            </ion-chip>
-            <ion-chip color="success" disabled>
-              <ion-label>Success</ion-label>
-            </ion-chip>
-            <ion-chip color="warning" disabled>
-              <ion-label>Warning</ion-label>
-            </ion-chip>
-            <ion-chip color="danger" disabled>
-              <ion-label>Danger</ion-label>
-            </ion-chip>
-            <ion-chip color="light" disabled>
-              <ion-label>Light</ion-label>
-            </ion-chip>
-            <ion-chip color="medium" disabled>
-              <ion-label>Medium</ion-label>
-            </ion-chip>
-            <ion-chip color="dark" disabled>
-              <ion-label>Dark</ion-label>
-            </ion-chip>
-          </p>
 
-          <p>
-            <ion-chip outline disabled>
-              <ion-label>Default</ion-label>
-            </ion-chip>
-            <ion-chip outline color="primary" disabled>
-              <ion-label>Primary</ion-label>
-            </ion-chip>
-            <ion-chip outline color="secondary" disabled>
-              <ion-label>Secondary</ion-label>
-            </ion-chip>
-            <ion-chip outline color="tertiary" disabled>
-              <ion-label>Tertiary</ion-label>
-            </ion-chip>
-            <ion-chip outline color="success" disabled>
-              <ion-label>Success</ion-label>
-            </ion-chip>
-            <ion-chip outline color="warning" disabled>
-              <ion-label>Warning</ion-label>
-            </ion-chip>
-            <ion-chip outline color="danger" disabled>
-              <ion-label>Danger</ion-label>
-            </ion-chip>
-            <ion-chip outline color="light" disabled>
-              <ion-label>Light</ion-label>
-            </ion-chip>
-            <ion-chip outline color="medium" disabled>
-              <ion-label>Medium</ion-label>
-            </ion-chip>
-            <ion-chip outline color="dark" disabled>
-              <ion-label>Dark</ion-label>
-            </ion-chip>
-          </p>
-        </div>
-
-        <h3>Activated</h3>
-        <div id="activated">
-          <p>
-            <ion-chip class="ion-activated">
-              <ion-label>Default</ion-label>
-            </ion-chip>
-            <ion-chip color="primary" class="ion-activated">
-              <ion-label>Primary</ion-label>
-            </ion-chip>
-            <ion-chip color="secondary" class="ion-activated">
-              <ion-label>Secondary</ion-label>
-            </ion-chip>
-            <ion-chip color="tertiary" class="ion-activated">
-              <ion-label>Tertiary</ion-label>
-            </ion-chip>
-            <ion-chip color="success" class="ion-activated">
-              <ion-label>Success</ion-label>
-            </ion-chip>
-            <ion-chip color="warning" class="ion-activated">
-              <ion-label>Warning</ion-label>
-            </ion-chip>
-            <ion-chip color="danger" class="ion-activated">
-              <ion-label>Danger</ion-label>
-            </ion-chip>
-            <ion-chip color="light" class="ion-activated">
-              <ion-label>Light</ion-label>
-            </ion-chip>
-            <ion-chip color="medium" class="ion-activated">
-              <ion-label>Medium</ion-label>
-            </ion-chip>
-            <ion-chip color="dark" class="ion-activated">
-              <ion-label>Dark</ion-label>
-            </ion-chip>
-          </p>
-
-          <p>
-            <ion-chip outline class="ion-activated">
-              <ion-label>Default</ion-label>
-            </ion-chip>
-            <ion-chip outline color="primary" class="ion-activated">
-              <ion-label>Primary</ion-label>
-            </ion-chip>
-            <ion-chip outline color="secondary" class="ion-activated">
-              <ion-label>Secondary</ion-label>
-            </ion-chip>
-            <ion-chip outline color="tertiary" class="ion-activated">
-              <ion-label>Tertiary</ion-label>
-            </ion-chip>
-            <ion-chip outline color="success" class="ion-activated">
-              <ion-label>Success</ion-label>
-            </ion-chip>
-            <ion-chip outline color="warning" class="ion-activated">
-              <ion-label>Warning</ion-label>
-            </ion-chip>
-            <ion-chip outline color="danger" class="ion-activated">
-              <ion-label>Danger</ion-label>
-            </ion-chip>
-            <ion-chip outline color="light" class="ion-activated">
-              <ion-label>Light</ion-label>
-            </ion-chip>
-            <ion-chip outline color="medium" class="ion-activated">
-              <ion-label>Medium</ion-label>
-            </ion-chip>
-            <ion-chip outline color="dark" class="ion-activated">
-              <ion-label>Dark</ion-label>
-            </ion-chip>
-          </p>
-        </div>
-
-        <h3>Focused</h3>
         <p>
-          `ion-chip` is not focusable by default, meaning it doesn't use `ion-focusable`. But it does have focus styles
-          that target the `:focus` pseudo-class. In order to see the focus styles, you need to add tabindex="0" and tab
-          into the chip.
+          <ion-chip disabled>
+            <ion-label>Disabled</ion-label>
+          </ion-chip>
+          <ion-chip outline color="danger" class="ion-focused" disabled>
+            <ion-label>Disabled Outline</ion-label>
+          </ion-chip>
+          <ion-chip color="secondary" class="ion-focused" disabled>
+            <ion-icon name="checkmark-circle"></ion-icon>
+            <ion-label>Disabled Secondary with Icon</ion-label>
+          </ion-chip>
+          <ion-chip outline class="ion-focused" disabled>
+            <ion-icon name="git-pull-request"></ion-icon>
+            <ion-label>Disabled Outline with Icon and Avatar</ion-label>
+            <ion-icon name="close-circle"></ion-icon>
+          </ion-chip>
         </p>
-        <div id="focused">
-          <p>
-            <ion-chip tabindex="0">
-              <ion-label>Default</ion-label>
-            </ion-chip>
-            <ion-chip color="primary" tabindex="0">
-              <ion-label>Primary</ion-label>
-            </ion-chip>
-            <ion-chip color="secondary" tabindex="0">
-              <ion-label>Secondary</ion-label>
-            </ion-chip>
-            <ion-chip color="tertiary" tabindex="0">
-              <ion-label>Tertiary</ion-label>
-            </ion-chip>
-            <ion-chip color="success" tabindex="0">
-              <ion-label>Success</ion-label>
-            </ion-chip>
-            <ion-chip color="warning" tabindex="0">
-              <ion-label>Warning</ion-label>
-            </ion-chip>
-            <ion-chip color="danger" tabindex="0">
-              <ion-label>Danger</ion-label>
-            </ion-chip>
-            <ion-chip color="light" tabindex="0">
-              <ion-label>Light</ion-label>
-            </ion-chip>
-            <ion-chip color="medium" tabindex="0">
-              <ion-label>Medium</ion-label>
-            </ion-chip>
-            <ion-chip color="dark" tabindex="0">
-              <ion-label>Dark</ion-label>
-            </ion-chip>
-          </p>
-
-          <p>
-            <ion-chip outline tabindex="0">
-              <ion-label>Default</ion-label>
-            </ion-chip>
-            <ion-chip outline color="primary" tabindex="0">
-              <ion-label>Primary</ion-label>
-            </ion-chip>
-            <ion-chip outline color="secondary" tabindex="0">
-              <ion-label>Secondary</ion-label>
-            </ion-chip>
-            <ion-chip outline color="tertiary" tabindex="0">
-              <ion-label>Tertiary</ion-label>
-            </ion-chip>
-            <ion-chip outline color="success" tabindex="0">
-              <ion-label>Success</ion-label>
-            </ion-chip>
-            <ion-chip outline color="warning" tabindex="0">
-              <ion-label>Warning</ion-label>
-            </ion-chip>
-            <ion-chip outline color="danger" tabindex="0">
-              <ion-label>Danger</ion-label>
-            </ion-chip>
-            <ion-chip outline color="light" tabindex="0">
-              <ion-label>Light</ion-label>
-            </ion-chip>
-            <ion-chip outline color="medium" tabindex="0">
-              <ion-label>Medium</ion-label>
-            </ion-chip>
-            <ion-chip outline color="dark" tabindex="0">
-              <ion-label>Dark</ion-label>
-            </ion-chip>
-          </p>
-        </div>
 
         <h3>Custom</h3>
 
@@ -306,6 +232,9 @@
           <ion-chip class="wide" text="wide">
             <ion-icon name="add"></ion-icon>
           </ion-chip>
+          <ion-chip class="wide ion-focused" text="wide">
+            <ion-icon name="add"></ion-icon>
+          </ion-chip>
         </p>
 
         <!-- Custom Colors -->
@@ -316,19 +245,25 @@
           <ion-chip color="secondary" class="custom">
             <ion-icon name="add"></ion-icon>
           </ion-chip>
+          <ion-chip class="custom ion-focused">
+            <ion-icon name="add"></ion-icon>
+          </ion-chip>
+          <ion-chip color="secondary" class="custom ion-focused">
+            <ion-icon name="add"></ion-icon>
+          </ion-chip>
         </p>
       </ion-content>
     </ion-app>
 
     <script>
-      var chips = document.querySelectorAll('ion-chip');
+      var buttons = document.querySelectorAll('ion-chip');
 
-      for (var i = 0; i < chips.length; i++) {
-        chips[i].addEventListener('click', (event) => onClick(event));
+      for (var i = 0; i < buttons.length; i++) {
+        buttons[i].addEventListener('click', (event) => onClick(event));
       }
 
       function onClick(ev) {
-        console.log('clicked the chip', ev.target.innerText);
+        console.log('clicked the button', ev.target.innerText);
       }
     </script>
 

core/src/components/content/content.tsx

@@ -188,6 +188,11 @@ export class Content implements ComponentInterface {
       this.tabsElement = null;
       this.tabsLoadCallback = undefined;
     }
+
+    if (this.resizeTimeout) {
+      clearTimeout(this.resizeTimeout);
+      this.resizeTimeout = null;
+    }
   }
 
   /**

core/src/components/datetime/datetime.ios.scss

@@ -57,7 +57,9 @@
 }
 
 :host .calendar-action-buttons ion-buttons {
-  @include padding($datetime-ios-padding * 0.5, 0, 0, 0);
+  align-items: stretch;
+
+  height: 100%;
 }
 
 :host .calendar-action-buttons ion-buttons ion-button {

core/src/components/datetime/datetime.tsx

@@ -124,6 +124,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;
 
@@ -1077,6 +1078,9 @@ export class Datetime implements ComponentInterface {
       this.clearFocusVisible();
       this.clearFocusVisible = undefined;
     }
+    if (this.loadTimeout) {
+      clearTimeout(this.loadTimeout);
+    }
   }
 
   /**
@@ -1175,7 +1179,7 @@ export class Datetime implements ComponentInterface {
      *
      * We schedule this after everything has had a chance to run.
      */
-    setTimeout(() => {
+    this.loadTimeout = setTimeout(() => {
       this.ensureReadyIfVisible();
     }, 100);