- add only-icon, badge-vertical-bottom usecase;

- guarantee hover and focus occupies the height;
- when has a status-badge the top position should be always the same;
- add example with tab-buttons without label;

.github/ionic-issue-bot.yml

@@ -56,14 +56,6 @@ closeAndLock:
         bug reports and feature requests. Please use our [forum](https://forum.ionicframework.com) for questions about the framework.
 
 
-        Thank you for using Ionic!
-    - label: "ionitron: appflow"
-      message: >
-        Thanks for the issue! This issue appears to be related to Ionic Appflow. We use this issue tracker exclusively for
-        bug reports and feature requests. Please use the [Ionic Appflow Support Forum](https://ionic.zendesk.com/hc/en-us/requests/new)
-        to report this issue.
-
-
         Thank you for using Ionic!
     - label: "ionitron: missing template"
       message: >
@@ -145,65 +137,6 @@ noReproduction:
   lock: true
   dryRun: false
 
-wrongRepo:
-  repos:
-    - label: "ionitron: capacitor"
-      repo: capacitor
-      message: >
-        Thanks for the issue! We use this issue tracker exclusively for bug reports and feature requests
-        associated with the Ionic Framework. It appears that this issue is associated with Capacitor.
-        I am moving this issue to the Capacitor repository. Please track this issue over there.
-
-
-        Thank you for using Ionic!
-    - label: "ionitron: v3"
-      repo: ionic-v3
-      message: >
-        Thanks for the issue! We have moved the source code and issues for Ionic 3 into a separate repository.
-        I am moving this issue to the repository for Ionic 3. Please track this issue over there.
-
-
-        Thank you for using Ionic!
-    - label: "ionitron: cli"
-      repo: ionic-cli
-      message: >
-        Thanks for the issue! We use this issue tracker exclusively for bug reports and feature requests
-        associated with the Ionic Framework. It appears that this issue is associated with the Ionic CLI.
-        I am moving this issue to the Ionic CLI repository. Please track this issue over there.
-
-
-        Thank you for using Ionic!
-    - label: "ionitron: docs"
-      repo: ionic-docs
-      message: >
-        Thanks for the issue! We use this issue tracker exclusively for bug reports and feature requests
-        associated with the Ionic Framework. It appears that this issue is associated with the Ionic Documentation.
-        I am moving this issue to the Ionic Docs repository. Please track this issue over there.
-
-
-        Thank you for using Ionic!
-    - label: "ionitron: stencil"
-      repo: stencil
-      message: >
-        Thanks for the issue! We use this issue tracker exclusively for bug reports and feature requests
-        associated with the Ionic Framework. It appears that this issue is associated with Stencil.
-        I am moving this issue to the Stencil repository. Please track this issue over there.
-
-
-        Thank you for using Ionic!
-    - label: "ionitron: native"
-      repo: ionic-native
-      message: >
-        Thanks for the issue! We use this issue tracker exclusively for bug reports and feature requests
-        associated with the Ionic Framework. It appears that this issue is associated with Ionic Native.
-        I am moving this issue to the Ionic Native repository. Please track this issue over there.
-
-
-        Thank you for using Ionic!
-  close: true
-  lock: true
-  dryRun: false
-
 screenshot:
   appId: 18001
   checkName: "build"

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

@@ -8,7 +8,7 @@ inputs:
 runs:
   using: 'composite'
   steps:
-    - uses: actions/checkout@v4
+    - uses: actions/checkout@v5
     - uses: actions/setup-node@v4
       with:
         node-version: 22.x

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

@@ -8,7 +8,7 @@ inputs:
 runs:
   using: 'composite'
   steps:
-    - uses: actions/checkout@v4
+    - uses: actions/checkout@v5
     - uses: actions/setup-node@v4
       with:
         node-version: 22.x
@@ -31,4 +31,6 @@ 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 core/api.txt
+        # Include generated proxy files from Stencil output targets so
+        # framework builds can detect when they need to be updated
+        paths: core/dist core/components core/src/foundations core/css core/hydrate core/loader core/src/components.d.ts core/api.txt packages/angular/src/directives/proxies.ts packages/angular/src/directives/proxies-list.ts packages/angular/standalone/src/directives/proxies.ts packages/vue/src/proxies.ts packages/react/src/components/proxies.ts packages/react/src/components/inner-proxies.ts packages/react/src/components/routing-proxies.ts

.github/workflows/actions/download-archive/action.yml

@@ -10,7 +10,7 @@ inputs:
 runs:
   using: 'composite'
   steps:
-    - uses: actions/download-artifact@v4
+    - uses: actions/download-artifact@v5
       with:
         name: ${{ inputs.name }}
         path: ${{ inputs.path }}

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

@@ -8,7 +8,7 @@ runs:
   steps:
     - uses: actions/setup-node@v4
       with:
-        node-version: 18
+        node-version: 22.x
     - uses: ./.github/workflows/actions/download-archive
       with:
         name: ionic-core
@@ -32,6 +32,10 @@ runs:
       run: npm install
       shell: bash
       working-directory: ./packages/angular/test/build/${{ inputs.app }}
+    - name: Install Playwright Browsers
+      run: npx playwright install
+      shell: bash
+      working-directory: ./packages/angular/test/build/${{ inputs.app }}
     - name: Sync Built Changes
       run: npm run sync
       shell: bash

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

@@ -10,7 +10,7 @@ runs:
     - uses: actions/setup-node@v4
       with:
         node-version: 22.x
-    - uses: actions/download-artifact@v4
+    - uses: actions/download-artifact@v5
       with:
         path: ./artifacts
     - name: Extract Archives

.github/workflows/assign-issues.yml

@@ -13,6 +13,6 @@ jobs:
       - name: 'Auto-assign issue'
         uses: pozil/auto-assign-issue@39c06395cbac76e79afc4ad4e5c5c6db6ecfdd2e # v2.2.0
         with:
-          assignees: brandyscarney, thetaPC, ShaneK
+          assignees: brandyscarney, ShaneK
           numOfAssignee: 1
           allowSelfAssign: false

.github/workflows/build.yml

@@ -22,7 +22,7 @@ jobs:
   build-core:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v5
       - uses: ./.github/workflows/actions/build-core
         with:
           ionicons-version: ${{ inputs.ionicons_npm_release_tag }}
@@ -31,21 +31,21 @@ jobs:
     needs: [build-core]
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v5
       - uses: ./.github/workflows/actions/test-core-clean-build
 
   test-core-lint:
     needs: [build-core]
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v5
       - uses: ./.github/workflows/actions/test-core-lint
 
   test-core-spec:
     needs: [build-core]
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v5
       - uses: ./.github/workflows/actions/test-core-spec
 
   test-core-screenshot:
@@ -62,7 +62,7 @@ jobs:
     needs: [build-core]
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v5
       - uses: ./.github/workflows/actions/test-core-screenshot
         with:
           shard: ${{ matrix.shard }}
@@ -90,14 +90,14 @@ jobs:
     needs: [build-core]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v4
+    - uses: actions/checkout@v5
     - uses: ./.github/workflows/actions/build-vue
 
   build-vue-router:
     needs: [build-vue]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v4
+    - uses: actions/checkout@v5
     - uses: ./.github/workflows/actions/build-vue-router
 
   test-vue-e2e:
@@ -108,7 +108,7 @@ jobs:
     needs: [build-vue, build-vue-router]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v4
+    - uses: actions/checkout@v5
     - uses: ./.github/workflows/actions/test-vue-e2e
       with:
         app: ${{ matrix.apps }}
@@ -126,25 +126,25 @@ jobs:
     needs: [build-core]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v4
+    - uses: actions/checkout@v5
     - uses: ./.github/workflows/actions/build-angular
 
   build-angular-server:
     needs: [build-core]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v4
+    - uses: actions/checkout@v5
     - uses: ./.github/workflows/actions/build-angular-server
 
   test-angular-e2e:
     strategy:
       fail-fast: false
       matrix:
-        apps: [ng16, ng17, ng18, ng19]
+        apps: [ng16, ng17, ng18, ng19, ng20]
     needs: [build-angular, build-angular-server]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v4
+    - uses: actions/checkout@v5
     - uses: ./.github/workflows/actions/test-angular-e2e
       with:
         app: ${{ matrix.apps }}
@@ -162,14 +162,14 @@ jobs:
     needs: [build-core]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v4
+    - uses: actions/checkout@v5
     - uses: ./.github/workflows/actions/build-react
 
   build-react-router:
     needs: [build-react]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v4
+    - uses: actions/checkout@v5
     - uses: ./.github/workflows/actions/build-react-router
 
   test-react-router-e2e:
@@ -180,7 +180,7 @@ jobs:
     needs: [build-react, build-react-router]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v4
+    - uses: actions/checkout@v5
     - uses: ./.github/workflows/actions/test-react-router-e2e
       with:
         app: ${{ matrix.apps }}
@@ -202,7 +202,7 @@ jobs:
     needs: [build-react, build-react-router]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v4
+    - uses: actions/checkout@v5
     - 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@v4
+      - uses: actions/checkout@v5
       - uses: github/codeql-action/init@v3
         with:
           languages: javascript

.github/workflows/conventional-commit.yml

@@ -9,24 +9,35 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Validate PR title
-        uses:  amannn/action-semantic-pull-request@v5
+        if: |
+          !contains(github.event.pull_request.title, 'release') &&
+          !contains(github.event.pull_request.title, 'chore')
+        uses: amannn/action-semantic-pull-request@v6
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         with:
           # Configure that a scope must always be provided.
           requireScope: true
+          # Configure allowed commit types
+          types: |
+            feat
+            fix
+            docs
+            style
+            refactor
+            perf
+            test
+            build
+            ci
+            revert
+            release
+            chore
           # Configure additional validation for the subject based on a regex.
           # This example ensures the subject doesn't start with an uppercase character.
           subjectPattern: ^(?![A-Z]).+$
-          # If `subjectPattern` is configured, you can use this property to 
-          # override the default error message that is shown when the pattern 
-          # doesn't match. The variables `subject` and `title` can be used 
+          # If `subjectPattern` is configured, you can use this property to
+          # override the default error message that is shown when the pattern
+          # doesn't match. The variables `subject` and `title` can be used
           # within the message.
           subjectPatternError: |
             The subject "{subject}" found in the pull request title "{title}" didn't match the configured pattern. Please ensure that the subject doesn't start with an uppercase character.
-          # If the PR contains one of these newline-delimited labels, the
-          # validation is skipped. If you want to rerun the validation when
-          # labels change, you might want to use the `labeled` and `unlabeled`
-          # event triggers in your workflow.
-          ignoreLabels: |
-            release

.github/workflows/dev-build.yml

@@ -9,7 +9,7 @@ jobs:
     outputs:
       dev-hash: ${{ steps.create-dev-hash.outputs.DEV_HASH }}
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v5
       # 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

@@ -12,7 +12,7 @@ jobs:
     outputs:
       nightly-hash: ${{ steps.create-nightly-hash.outputs.NIGHTLY_HASH }}
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v5
       # 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

@@ -22,7 +22,7 @@ jobs:
   release-core:
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v4
+    - uses: actions/checkout@v5
     - uses: ./.github/workflows/actions/publish-npm
       with:
         scope: '@ionic/core'
@@ -48,7 +48,7 @@ jobs:
     needs: [release-core]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v4
+    - uses: actions/checkout@v5
     - name: Restore @ionic/docs built cache
       uses: ./.github/workflows/actions/download-archive
       with:
@@ -68,7 +68,7 @@ jobs:
     needs: [release-core]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v4
+    - uses: actions/checkout@v5
     - name: Restore @ionic/core built cache
       uses: ./.github/workflows/actions/download-archive
       with:
@@ -95,7 +95,7 @@ jobs:
     needs: [release-core]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v4
+    - uses: actions/checkout@v5
     - name: Restore @ionic/core built cache
       uses: ./.github/workflows/actions/download-archive
       with:
@@ -121,7 +121,7 @@ jobs:
     needs: [release-core]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v4
+    - uses: actions/checkout@v5
     - name: Restore @ionic/core built cache
       uses: ./.github/workflows/actions/download-archive
       with:
@@ -147,7 +147,7 @@ jobs:
     needs: [release-core]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v4
+    - uses: actions/checkout@v5
     - name: Restore @ionic/core built cache
       uses: ./.github/workflows/actions/download-archive
       with:
@@ -168,7 +168,7 @@ jobs:
     needs: [release-react]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v4
+    - uses: actions/checkout@v5
     - name: Restore @ionic/core built cache
       uses: ./.github/workflows/actions/download-archive
       with:
@@ -194,7 +194,7 @@ jobs:
     needs: [release-vue]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v4
+    - uses: actions/checkout@v5
     - name: Restore @ionic/core built cache
       uses: ./.github/workflows/actions/download-archive
       with:

.github/workflows/release.yml

@@ -48,7 +48,7 @@ jobs:
     needs: [release-ionic]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v4
+    - uses: actions/checkout@v5
       with:
         token: ${{ secrets.IONITRON_TOKEN }}
         fetch-depth: 0
@@ -76,7 +76,7 @@ jobs:
     needs: [finalize-release]
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v5
         # 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@v4
+      - uses: actions/checkout@v5
       - uses: ./.github/workflows/actions/build-core-stencil-prerelease
         with:
           stencil-version: ${{ inputs.npm_release_tag || 'nightly' }}
@@ -35,21 +35,21 @@ jobs:
     needs: [build-core-with-stencil-nightly]
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v5
       - uses: ./.github/workflows/actions/test-core-clean-build
 
   test-core-lint:
     needs: [build-core-with-stencil-nightly]
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v5
       - uses: ./.github/workflows/actions/test-core-lint
 
   test-core-spec:
     needs: [build-core-with-stencil-nightly]
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v5
       - uses: ./.github/workflows/actions/test-core-spec
         with:
           stencil-version: ${{ inputs.npm_release_tag || 'nightly' }}
@@ -72,7 +72,7 @@ jobs:
     needs: [build-core-with-stencil-nightly]
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v5
       - uses: ./.github/workflows/actions/test-core-screenshot
         with:
           shard: ${{ matrix.shard }}
@@ -100,14 +100,14 @@ jobs:
     needs: [build-core-with-stencil-nightly]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v4
+    - uses: actions/checkout@v5
     - uses: ./.github/workflows/actions/build-vue
 
   build-vue-router:
     needs: [build-vue]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v4
+    - uses: actions/checkout@v5
     - uses: ./.github/workflows/actions/build-vue-router
 
   test-vue-e2e:
@@ -118,7 +118,7 @@ jobs:
     needs: [build-vue, build-vue-router]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v4
+    - uses: actions/checkout@v5
     - uses: ./.github/workflows/actions/test-vue-e2e
       with:
         app: ${{ matrix.apps }}
@@ -136,25 +136,25 @@ jobs:
     needs: [build-core-with-stencil-nightly]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v4
+    - uses: actions/checkout@v5
     - uses: ./.github/workflows/actions/build-angular
 
   build-angular-server:
     needs: [build-core-with-stencil-nightly]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v4
+    - uses: actions/checkout@v5
     - uses: ./.github/workflows/actions/build-angular-server
 
   test-angular-e2e:
     strategy:
       fail-fast: false
       matrix:
-        apps: [ng16, ng17, ng18, ng19]
+        apps: [ng16, ng17, ng18, ng19, ng20]
     needs: [build-angular, build-angular-server]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v4
+    - uses: actions/checkout@v5
     - uses: ./.github/workflows/actions/test-angular-e2e
       with:
         app: ${{ matrix.apps }}
@@ -172,14 +172,14 @@ jobs:
     needs: [build-core-with-stencil-nightly]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v4
+    - uses: actions/checkout@v5
     - uses: ./.github/workflows/actions/build-react
 
   build-react-router:
     needs: [build-react]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v4
+    - uses: actions/checkout@v5
     - uses: ./.github/workflows/actions/build-react-router
 
   test-react-router-e2e:
@@ -190,7 +190,7 @@ jobs:
     needs: [build-react, build-react-router]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v4
+    - uses: actions/checkout@v5
     - uses: ./.github/workflows/actions/test-react-router-e2e
       with:
         app: ${{ matrix.apps }}
@@ -212,7 +212,7 @@ jobs:
     needs: [build-react, build-react-router]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v4
+    - uses: actions/checkout@v5
     - 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@v4
+      - uses: actions/checkout@v5
       - 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@v4
+      - uses: actions/checkout@v5
       - 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@v4
+      - uses: actions/checkout@v5
         # Normally, we could just push with the
         # default GITHUB_TOKEN, but that will
         # not cause the build workflow

CHANGELOG.md

@@ -3,6 +3,130 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.7.3](https://github.com/ionic-team/ionic-framework/compare/v8.7.2...v8.7.3) (2025-08-20)
+
+
+### Bug Fixes
+
+* **checkbox:** add aria attributes to ignore checkbox icon ([#30633](https://github.com/ionic-team/ionic-framework/issues/30633)) ([e9e6605](https://github.com/ionic-team/ionic-framework/commit/e9e6605862a05a46d26c26a144ed1cf22133a2b7)), closes [#30231](https://github.com/ionic-team/ionic-framework/issues/30231)
+* **refresher:** prevent focus-related scroll jumps on refresh ([#30636](https://github.com/ionic-team/ionic-framework/issues/30636)) ([1899b49](https://github.com/ionic-team/ionic-framework/commit/1899b49d252abc6003f763cea8db2a51efa941ec))
+
+
+
+
+
+## [8.7.2](https://github.com/ionic-team/ionic-framework/compare/v8.7.1...v8.7.2) (2025-08-06)
+
+
+### Bug Fixes
+
+* **reorder-group:**  add children fallback for framework compatibility ([#30593](https://github.com/ionic-team/ionic-framework/issues/30593)) ([1cd81b9](https://github.com/ionic-team/ionic-framework/commit/1cd81b92301378d55bce63a01dfcf95a91c92652)), closes [#30592](https://github.com/ionic-team/ionic-framework/issues/30592)
+* **tabs:** add fallback to select tab if router integration fails ([#30599](https://github.com/ionic-team/ionic-framework/issues/30599)) ([a2e803a](https://github.com/ionic-team/ionic-framework/commit/a2e803a553dc58fc0e1599e515a56180a7ab263a)), closes [#30552](https://github.com/ionic-team/ionic-framework/issues/30552)
+
+
+
+
+
+## [8.7.1](https://github.com/ionic-team/ionic-framework/compare/v8.7.0...v8.7.1) (2025-07-31)
+
+### Dependencies
+
+* **stencil:** upgrade `@stencil/core` to version 4.36.2
+
+
+
+
+
+# [8.7.0](https://github.com/ionic-team/ionic-framework/compare/v8.6.7...v8.7.0) (2025-07-30)
+
+
+### Features
+
+* **css:** add new css utility classes for display and flex utils ([#30567](https://github.com/ionic-team/ionic-framework/issues/30567)) ([75f6c05](https://github.com/ionic-team/ionic-framework/commit/75f6c05fb96313ef890cc80a229a3a3ed3d57460)), closes [#22469](https://github.com/ionic-team/ionic-framework/issues/22469)
+* **datetime:** add border property to highlightedDates ([#30534](https://github.com/ionic-team/ionic-framework/issues/30534)) ([d5627c7](https://github.com/ionic-team/ionic-framework/commit/d5627c73681faf658ea3b869f3fb04d708391eb9)), closes [#29833](https://github.com/ionic-team/ionic-framework/issues/29833)
+* **deps:** update ionicons to v8 ([#30390](https://github.com/ionic-team/ionic-framework/issues/30390)) ([74cd71a](https://github.com/ionic-team/ionic-framework/commit/74cd71af243183aa738d11b280e155bdfd652126)), closes [#30445](https://github.com/ionic-team/ionic-framework/issues/30445)
+* **modal:** add IonModalToken for injecting modal elements in Angular components ([#30474](https://github.com/ionic-team/ionic-framework/issues/30474)) ([30d1910](https://github.com/ionic-team/ionic-framework/commit/30d1910d6ea5428b414d0e127e7681f59426c538))
+* **reorder-group:** add ionReorderStart, ionReorderMove, ionReorderEnd events ([#30471](https://github.com/ionic-team/ionic-framework/issues/30471)) ([b154f4e](https://github.com/ionic-team/ionic-framework/commit/b154f4ed095890f57ccab539fd9217976a5466e5)), closes [#23148](https://github.com/ionic-team/ionic-framework/issues/23148) [#27614](https://github.com/ionic-team/ionic-framework/issues/27614)
+
+
+
+
+
+## [8.6.7](https://github.com/ionic-team/ionic-framework/compare/v8.6.6...v8.6.7) (2025-07-30)
+
+### Dependencies
+
+* **stencil:** downgrade `@stencil/core` to version 4.33.1
+
+_Stencil has been downgraded due to an uncaught regression in Reorder._
+
+
+
+
+
+## [8.6.6](https://github.com/ionic-team/ionic-framework/compare/v8.6.5...v8.6.6) (2025-07-30)
+
+### Dependencies
+
+* **stencil:** upgrade `@stencil/core` to version 4.36.2
+
+
+
+
+
+## [8.6.5](https://github.com/ionic-team/ionic-framework/compare/v8.6.4...v8.6.5) (2025-07-16)
+
+
+### Bug Fixes
+
+* **input-otp:** improve autofill detection and invalid character handling ([#30541](https://github.com/ionic-team/ionic-framework/issues/30541)) ([8b4023d](https://github.com/ionic-team/ionic-framework/commit/8b4023d520212c254395a5be6d3a76dcbee6f2da)), closes [#30459](https://github.com/ionic-team/ionic-framework/issues/30459)
+* **input:** prevent layout shift when hiding password toggle ([#30533](https://github.com/ionic-team/ionic-framework/issues/30533)) ([f1defba](https://github.com/ionic-team/ionic-framework/commit/f1defba2acb417c6f243b2902923d85efbb6f879)), closes [#29562](https://github.com/ionic-team/ionic-framework/issues/29562)
+* **item:** allow nested content to be conditionally interactive ([#30519](https://github.com/ionic-team/ionic-framework/issues/30519)) ([3f730ab](https://github.com/ionic-team/ionic-framework/commit/3f730ab1d77be54d1faf14168eee9e9dc41002d6)), closes [#29763](https://github.com/ionic-team/ionic-framework/issues/29763)
+* **modal:** dismiss child modals when parent is dismissed ([#30540](https://github.com/ionic-team/ionic-framework/issues/30540)) ([9b0099f](https://github.com/ionic-team/ionic-framework/commit/9b0099f462fda6d40b49dde1a1c97afbbbee2287)), closes [#30389](https://github.com/ionic-team/ionic-framework/issues/30389)
+* **modal:** dismiss modal when parent element is removed from DOM ([#30544](https://github.com/ionic-team/ionic-framework/issues/30544)) ([850338c](https://github.com/ionic-team/ionic-framework/commit/850338cbd5c76addbc2cc3068b93071dea14c0af)), closes [#30389](https://github.com/ionic-team/ionic-framework/issues/30389)
+* **modal:** improve card modal background transition from portrait to landscape ([#30551](https://github.com/ionic-team/ionic-framework/issues/30551)) ([d37b9b8](https://github.com/ionic-team/ionic-framework/commit/d37b9b8e468b7b2c9cda8b27fe7019bb905ad2bf))
+* **segment-view:** scroll to correct content when height is not set ([#30547](https://github.com/ionic-team/ionic-framework/issues/30547)) ([d14311f](https://github.com/ionic-team/ionic-framework/commit/d14311fb65ae3de7ba7578791ce1ea44f186c413)), closes [#30543](https://github.com/ionic-team/ionic-framework/issues/30543)
+
+
+
+
+
+## [8.6.4](https://github.com/ionic-team/ionic-framework/compare/v8.6.3...v8.6.4) (2025-07-09)
+
+
+### Bug Fixes
+
+* **modal:** support iOS card view transitions for viewport changes ([#30520](https://github.com/ionic-team/ionic-framework/issues/30520)) ([0fd9e82](https://github.com/ionic-team/ionic-framework/commit/0fd9e824508333a53175d7da5f681fc3126a2394)), closes [#30296](https://github.com/ionic-team/ionic-framework/issues/30296)
+
+
+
+
+
+## [8.6.3](https://github.com/ionic-team/ionic-framework/compare/v8.6.2...v8.6.3) (2025-07-02)
+
+
+### Bug Fixes
+
+* **angular:** update schematics to support Angular's latest build system ([#30525](https://github.com/ionic-team/ionic-framework/issues/30525)) ([08e3e7a](https://github.com/ionic-team/ionic-framework/commit/08e3e7ab5165baea668571af9845933b5befeb46)), closes [ionic-team/ionic-docs#2091](https://github.com/ionic-team/ionic-docs/issues/2091)
+* **modal:** add conditional tabIndex for handle cycling ([#30510](https://github.com/ionic-team/ionic-framework/issues/30510)) ([ee47660](https://github.com/ionic-team/ionic-framework/commit/ee47660745428e04c78cfef0555f3c5788959a8c))
+* **select:** focus the correct selected item in an action sheet interface with a header ([#30481](https://github.com/ionic-team/ionic-framework/issues/30481)) ([80a111c](https://github.com/ionic-team/ionic-framework/commit/80a111cffac70e831eb57e827301370163ef4e2a)), closes [#30480](https://github.com/ionic-team/ionic-framework/issues/30480)
+
+
+
+
+
+## [8.6.2](https://github.com/ionic-team/ionic-framework/compare/v8.6.1...v8.6.2) (2025-06-18)
+
+
+### Bug Fixes
+
+* **picker-column:** fallback to elementFromPoint for iOS 16 Shadow DOM bug ([#30479](https://github.com/ionic-team/ionic-framework/issues/30479)) ([6ae2907](https://github.com/ionic-team/ionic-framework/commit/6ae29077424434f3523d75426f3328765a4797f4)), closes [#29672](https://github.com/ionic-team/ionic-framework/issues/29672)
+* **range:** improve focus and blur handling for dual knobs ([#30482](https://github.com/ionic-team/ionic-framework/issues/30482)) ([6811fe5](https://github.com/ionic-team/ionic-framework/commit/6811fe5cc88f132f998476a3f4b956ce21122631))
+
+
+
+
+
 ## [8.6.1](https://github.com/ionic-team/ionic-framework/compare/v8.6.0...v8.6.1) (2025-06-11)
 
 

core/CHANGELOG.md

@@ -3,6 +3,128 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.7.3](https://github.com/ionic-team/ionic-framework/compare/v8.7.2...v8.7.3) (2025-08-20)
+
+
+### Bug Fixes
+
+* **checkbox:** add aria attributes to ignore checkbox icon ([#30633](https://github.com/ionic-team/ionic-framework/issues/30633)) ([e9e6605](https://github.com/ionic-team/ionic-framework/commit/e9e6605862a05a46d26c26a144ed1cf22133a2b7)), closes [#30231](https://github.com/ionic-team/ionic-framework/issues/30231)
+* **refresher:** prevent focus-related scroll jumps on refresh ([#30636](https://github.com/ionic-team/ionic-framework/issues/30636)) ([1899b49](https://github.com/ionic-team/ionic-framework/commit/1899b49d252abc6003f763cea8db2a51efa941ec))
+
+
+
+
+
+## [8.7.2](https://github.com/ionic-team/ionic-framework/compare/v8.7.1...v8.7.2) (2025-08-06)
+
+
+### Bug Fixes
+
+* **reorder-group:**  add children fallback for framework compatibility ([#30593](https://github.com/ionic-team/ionic-framework/issues/30593)) ([1cd81b9](https://github.com/ionic-team/ionic-framework/commit/1cd81b92301378d55bce63a01dfcf95a91c92652)), closes [#30592](https://github.com/ionic-team/ionic-framework/issues/30592)
+* **tabs:** add fallback to select tab if router integration fails ([#30599](https://github.com/ionic-team/ionic-framework/issues/30599)) ([a2e803a](https://github.com/ionic-team/ionic-framework/commit/a2e803a553dc58fc0e1599e515a56180a7ab263a)), closes [#30552](https://github.com/ionic-team/ionic-framework/issues/30552)
+
+
+
+
+
+## [8.7.1](https://github.com/ionic-team/ionic-framework/compare/v8.7.0...v8.7.1) (2025-07-31)
+
+### Dependencies
+
+* **stencil:** upgrade `@stencil/core` to version 4.36.2
+
+
+
+
+
+# [8.7.0](https://github.com/ionic-team/ionic-framework/compare/v8.6.7...v8.7.0) (2025-07-30)
+
+
+### Features
+
+* **css:** add new css utility classes for display and flex utils ([#30567](https://github.com/ionic-team/ionic-framework/issues/30567)) ([75f6c05](https://github.com/ionic-team/ionic-framework/commit/75f6c05fb96313ef890cc80a229a3a3ed3d57460)), closes [#22469](https://github.com/ionic-team/ionic-framework/issues/22469)
+* **datetime:** add border property to highlightedDates ([#30534](https://github.com/ionic-team/ionic-framework/issues/30534)) ([d5627c7](https://github.com/ionic-team/ionic-framework/commit/d5627c73681faf658ea3b869f3fb04d708391eb9)), closes [#29833](https://github.com/ionic-team/ionic-framework/issues/29833)
+* **deps:** update ionicons to v8 ([#30390](https://github.com/ionic-team/ionic-framework/issues/30390)) ([74cd71a](https://github.com/ionic-team/ionic-framework/commit/74cd71af243183aa738d11b280e155bdfd652126)), closes [#30445](https://github.com/ionic-team/ionic-framework/issues/30445)
+* **reorder-group:** add ionReorderStart, ionReorderMove, ionReorderEnd events ([#30471](https://github.com/ionic-team/ionic-framework/issues/30471)) ([b154f4e](https://github.com/ionic-team/ionic-framework/commit/b154f4ed095890f57ccab539fd9217976a5466e5)), closes [#23148](https://github.com/ionic-team/ionic-framework/issues/23148) [#27614](https://github.com/ionic-team/ionic-framework/issues/27614)
+
+
+
+
+
+## [8.6.7](https://github.com/ionic-team/ionic-framework/compare/v8.6.6...v8.6.7) (2025-07-30)
+
+### Dependencies
+
+* **stencil:** downgrade `@stencil/core` to version 4.33.1
+
+_Stencil has been downgraded due to an uncaught regression in Reorder._
+
+
+
+
+
+## [8.6.6](https://github.com/ionic-team/ionic-framework/compare/v8.6.5...v8.6.6) (2025-07-30)
+
+### Dependencies
+
+* **stencil:** upgrade `@stencil/core` to version 4.36.2
+
+
+
+
+
+## [8.6.5](https://github.com/ionic-team/ionic-framework/compare/v8.6.4...v8.6.5) (2025-07-16)
+
+
+### Bug Fixes
+
+* **input-otp:** improve autofill detection and invalid character handling ([#30541](https://github.com/ionic-team/ionic-framework/issues/30541)) ([8b4023d](https://github.com/ionic-team/ionic-framework/commit/8b4023d520212c254395a5be6d3a76dcbee6f2da)), closes [#30459](https://github.com/ionic-team/ionic-framework/issues/30459)
+* **input:** prevent layout shift when hiding password toggle ([#30533](https://github.com/ionic-team/ionic-framework/issues/30533)) ([f1defba](https://github.com/ionic-team/ionic-framework/commit/f1defba2acb417c6f243b2902923d85efbb6f879)), closes [#29562](https://github.com/ionic-team/ionic-framework/issues/29562)
+* **item:** allow nested content to be conditionally interactive ([#30519](https://github.com/ionic-team/ionic-framework/issues/30519)) ([3f730ab](https://github.com/ionic-team/ionic-framework/commit/3f730ab1d77be54d1faf14168eee9e9dc41002d6)), closes [#29763](https://github.com/ionic-team/ionic-framework/issues/29763)
+* **modal:** dismiss child modals when parent is dismissed ([#30540](https://github.com/ionic-team/ionic-framework/issues/30540)) ([9b0099f](https://github.com/ionic-team/ionic-framework/commit/9b0099f462fda6d40b49dde1a1c97afbbbee2287)), closes [#30389](https://github.com/ionic-team/ionic-framework/issues/30389)
+* **modal:** dismiss modal when parent element is removed from DOM ([#30544](https://github.com/ionic-team/ionic-framework/issues/30544)) ([850338c](https://github.com/ionic-team/ionic-framework/commit/850338cbd5c76addbc2cc3068b93071dea14c0af)), closes [#30389](https://github.com/ionic-team/ionic-framework/issues/30389)
+* **modal:** improve card modal background transition from portrait to landscape ([#30551](https://github.com/ionic-team/ionic-framework/issues/30551)) ([d37b9b8](https://github.com/ionic-team/ionic-framework/commit/d37b9b8e468b7b2c9cda8b27fe7019bb905ad2bf))
+* **segment-view:** scroll to correct content when height is not set ([#30547](https://github.com/ionic-team/ionic-framework/issues/30547)) ([d14311f](https://github.com/ionic-team/ionic-framework/commit/d14311fb65ae3de7ba7578791ce1ea44f186c413)), closes [#30543](https://github.com/ionic-team/ionic-framework/issues/30543)
+
+
+
+
+
+## [8.6.4](https://github.com/ionic-team/ionic-framework/compare/v8.6.3...v8.6.4) (2025-07-09)
+
+
+### Bug Fixes
+
+* **modal:** support iOS card view transitions for viewport changes ([#30520](https://github.com/ionic-team/ionic-framework/issues/30520)) ([0fd9e82](https://github.com/ionic-team/ionic-framework/commit/0fd9e824508333a53175d7da5f681fc3126a2394)), closes [#30296](https://github.com/ionic-team/ionic-framework/issues/30296)
+
+
+
+
+
+## [8.6.3](https://github.com/ionic-team/ionic-framework/compare/v8.6.2...v8.6.3) (2025-07-02)
+
+
+### Bug Fixes
+
+* **modal:** add conditional tabIndex for handle cycling ([#30510](https://github.com/ionic-team/ionic-framework/issues/30510)) ([ee47660](https://github.com/ionic-team/ionic-framework/commit/ee47660745428e04c78cfef0555f3c5788959a8c))
+* **select:** focus the correct selected item in an action sheet interface with a header ([#30481](https://github.com/ionic-team/ionic-framework/issues/30481)) ([80a111c](https://github.com/ionic-team/ionic-framework/commit/80a111cffac70e831eb57e827301370163ef4e2a)), closes [#30480](https://github.com/ionic-team/ionic-framework/issues/30480)
+
+
+
+
+
+## [8.6.2](https://github.com/ionic-team/ionic-framework/compare/v8.6.1...v8.6.2) (2025-06-18)
+
+
+### Bug Fixes
+
+* **picker-column:** fallback to elementFromPoint for iOS 16 Shadow DOM bug ([#30479](https://github.com/ionic-team/ionic-framework/issues/30479)) ([6ae2907](https://github.com/ionic-team/ionic-framework/commit/6ae29077424434f3523d75426f3328765a4797f4)), closes [#29672](https://github.com/ionic-team/ionic-framework/issues/29672)
+* **range:** improve focus and blur handling for dual knobs ([#30482](https://github.com/ionic-team/ionic-framework/issues/30482)) ([6811fe5](https://github.com/ionic-team/ionic-framework/commit/6811fe5cc88f132f998476a3f4b956ce21122631))
+
+
+
+
+
 ## [8.6.1](https://github.com/ionic-team/ionic-framework/compare/v8.6.0...v8.6.1) (2025-06-11)
 
 

core/Dockerfile

@@ -1,5 +1,5 @@
 # Get Playwright
-FROM mcr.microsoft.com/playwright:v1.52.0
+FROM mcr.microsoft.com/playwright:v1.54.2
 
 # Set the working directory
 WORKDIR /ionic

core/api.txt

@@ -667,33 +667,15 @@ ion-content,method,scrollToTop,scrollToTop(duration?: number) => Promise<void>
 ion-content,event,ionScroll,ScrollDetail,true
 ion-content,event,ionScrollEnd,ScrollBaseDetail,true
 ion-content,event,ionScrollStart,ScrollBaseDetail,true
-ion-content,css-prop,--background,ionic
-ion-content,css-prop,--background,ios
-ion-content,css-prop,--background,md
-ion-content,css-prop,--color,ionic
-ion-content,css-prop,--color,ios
-ion-content,css-prop,--color,md
-ion-content,css-prop,--keyboard-offset,ionic
-ion-content,css-prop,--keyboard-offset,ios
-ion-content,css-prop,--keyboard-offset,md
-ion-content,css-prop,--offset-bottom,ionic
-ion-content,css-prop,--offset-bottom,ios
-ion-content,css-prop,--offset-bottom,md
-ion-content,css-prop,--offset-top,ionic
-ion-content,css-prop,--offset-top,ios
-ion-content,css-prop,--offset-top,md
-ion-content,css-prop,--padding-bottom,ionic
-ion-content,css-prop,--padding-bottom,ios
-ion-content,css-prop,--padding-bottom,md
-ion-content,css-prop,--padding-end,ionic
-ion-content,css-prop,--padding-end,ios
-ion-content,css-prop,--padding-end,md
-ion-content,css-prop,--padding-start,ionic
-ion-content,css-prop,--padding-start,ios
-ion-content,css-prop,--padding-start,md
-ion-content,css-prop,--padding-top,ionic
-ion-content,css-prop,--padding-top,ios
-ion-content,css-prop,--padding-top,md
+ion-content,css-prop,--background
+ion-content,css-prop,--color
+ion-content,css-prop,--keyboard-offset
+ion-content,css-prop,--offset-bottom
+ion-content,css-prop,--offset-top
+ion-content,css-prop,--padding-bottom
+ion-content,css-prop,--padding-end
+ion-content,css-prop,--padding-start
+ion-content,css-prop,--padding-top
 ion-content,part,background
 ion-content,part,scroll
 
@@ -937,6 +919,7 @@ ion-infinite-scroll,none
 ion-infinite-scroll,prop,disabled,boolean,false,false,false
 ion-infinite-scroll,prop,mode,"ios" | "md",undefined,false,false
 ion-infinite-scroll,prop,position,"bottom" | "top",'bottom',false,false
+ion-infinite-scroll,prop,preserveRerenderScrollPosition,boolean,false,false,false
 ion-infinite-scroll,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-infinite-scroll,prop,threshold,string,'15%',false,false
 ion-infinite-scroll,method,complete,complete() => Promise<void>
@@ -1967,6 +1950,9 @@ ion-reorder-group,prop,mode,"ios" | "md",undefined,false,false
 ion-reorder-group,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-reorder-group,method,complete,complete(listOrReorder?: boolean | any[]) => Promise<any>
 ion-reorder-group,event,ionItemReorder,ItemReorderEventDetail,true
+ion-reorder-group,event,ionReorderEnd,ReorderEndEventDetail,true
+ion-reorder-group,event,ionReorderMove,ReorderMoveEventDetail,true
+ion-reorder-group,event,ionReorderStart,void,true
 
 ion-ripple-effect,shadow
 ion-ripple-effect,prop,mode,"ios" | "md",undefined,false,false

core/package-lock.json

@@ -1,17 +1,17 @@
 {
   "name": "@ionic/core",
-  "version": "8.6.1",
+  "version": "8.7.3",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/core",
-      "version": "8.6.1",
+      "version": "8.7.3",
       "license": "MIT",
       "dependencies": {
         "@phosphor-icons/core": "^2.1.1",
-        "@stencil/core": "4.33.1",
-        "ionicons": "^7.2.2",
+        "@stencil/core": "4.36.2",
+        "ionicons": "^8.0.13",
         "tslib": "^2.1.0"
       },
       "devDependencies": {
@@ -23,13 +23,13 @@
         "@clack/prompts": "^0.11.0",
         "@ionic/eslint-config": "^0.3.0",
         "@ionic/prettier-config": "^2.0.0",
-        "@playwright/test": "^1.52.0",
+        "@playwright/test": "^1.54.2",
         "@rollup/plugin-node-resolve": "^8.4.0",
         "@rollup/plugin-virtual": "^2.0.3",
         "@stencil/angular-output-target": "^0.10.0",
         "@stencil/react-output-target": "0.5.3",
         "@stencil/sass": "^3.0.9",
-        "@stencil/vue-output-target": "0.10.7",
+        "@stencil/vue-output-target": "0.10.8",
         "@types/jest": "^29.5.6",
         "@types/node": "^18.19.47",
         "@typescript-eslint/eslint-plugin": "^6.7.2",
@@ -44,7 +44,7 @@
         "fs-extra": "^9.0.1",
         "jest": "^29.7.0",
         "jest-cli": "^29.7.0",
-        "outsystems-design-tokens": "^1.2.6",
+        "outsystems-design-tokens": "^1.3.0",
         "prettier": "^2.8.8",
         "rollup": "^2.26.4",
         "sass": "^1.33.0",
@@ -751,36 +751,36 @@
       }
     },
     "node_modules/@capacitor/core": {
-      "version": "7.3.0",
-      "resolved": "https://registry.npmjs.org/@capacitor/core/-/core-7.3.0.tgz",
-      "integrity": "sha512-t/DdTyBchQ2eAZuCmAARlqQsrEm0WyeNwh5zeRuv+cR6gnAsw+86/EWvJ/em5dTnZyaqEy8vlmOMdWarrUbnuQ==",
+      "version": "7.4.0",
+      "resolved": "https://registry.npmjs.org/@capacitor/core/-/core-7.4.0.tgz",
+      "integrity": "sha512-P6NnjoHyobZgTjynlZSn27d0SUj6j38inlNxFnKZr9qwU7/r6+0Sg2nWkGkIH/pMmXHsvGD8zVe6KUq1UncIjA==",
       "dev": true,
       "dependencies": {
         "tslib": "^2.1.0"
       }
     },
     "node_modules/@capacitor/haptics": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/@capacitor/haptics/-/haptics-7.0.1.tgz",
-      "integrity": "sha512-ewZmspE5krgDUj5ZvUDcfNZvgerAIr+3bDSk6DLzyvBZ/dYmr/tMLu5H6WtYaaKYZJ32aZAudGpIal5epDyBYA==",
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/@capacitor/haptics/-/haptics-7.0.2.tgz",
+      "integrity": "sha512-vqfeEM6s2zMgLjpITCTUIy7P/hadq/Gr5E/RClFgMJPB41Y5FsqOKD+j85/uwh8N2cf/aWaPeXUmjnTzJbEB2g==",
       "dev": true,
       "peerDependencies": {
         "@capacitor/core": ">=7.0.0"
       }
     },
     "node_modules/@capacitor/keyboard": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/@capacitor/keyboard/-/keyboard-7.0.1.tgz",
-      "integrity": "sha512-Gi064vOARMac+x9/DmEFeywN9oAETMf3OYsMuYm9gA8SvdsDJ3QJqMoFnSEIORYXe21Jzt2SIEdLlpT65P/b2g==",
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/@capacitor/keyboard/-/keyboard-7.0.2.tgz",
+      "integrity": "sha512-9We5BY1mu+QWOReDukr+6HxA4Bh0mKBU0txFtwXJdjBohttMYWJzB+dQf4oHrX8odiU2Cm/BfDdAU2wV06Cyig==",
       "dev": true,
       "peerDependencies": {
         "@capacitor/core": ">=7.0.0"
       }
     },
     "node_modules/@capacitor/status-bar": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/@capacitor/status-bar/-/status-bar-7.0.1.tgz",
-      "integrity": "sha512-iDv3mXYo9CdxYRVwt3/pRyuk25p7Sn4GfaS/zMZyVIqTzsvKLCIIH3GdKK+ta+nsNcAVpCw/t5jFEBt1D18ctA==",
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/@capacitor/status-bar/-/status-bar-7.0.2.tgz",
+      "integrity": "sha512-fYYkkdzCbQV+MjZVnaQTFl5I4bddnFW8ZrPVxDjNoGVPTUG7H58Ij1+NcuNxHLXjJvZOoZeYJ3w3I16Wb2zssw==",
       "dev": true,
       "peerDependencies": {
         "@capacitor/core": ">=7.0.0"
@@ -1933,12 +1933,12 @@
       }
     },
     "node_modules/@playwright/test": {
-      "version": "1.52.0",
-      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.52.0.tgz",
-      "integrity": "sha512-uh6W7sb55hl7D6vsAeA+V2p5JnlAqzhqFyF0VcJkKZXkgnFcVG9PziERRHQfPLfNGx1C292a4JqbWzhR8L4R1g==",
+      "version": "1.54.2",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.54.2.tgz",
+      "integrity": "sha512-A+znathYxPf+72riFd1r1ovOLqsIIB0jKIoPjyK2kqEIe30/6jF6BC7QNluHuwUmsD2tv1XZVugN8GqfTMOxsA==",
       "dev": true,
       "dependencies": {
-        "playwright": "1.52.0"
+        "playwright": "1.54.2"
       },
       "bin": {
         "playwright": "cli.js"
@@ -2132,9 +2132,9 @@
       }
     },
     "node_modules/@stencil/core": {
-      "version": "4.33.1",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.33.1.tgz",
-      "integrity": "sha512-12k9xhAJBkpg598it+NRmaYIdEe6TSnsL/v6/KRXDcUyTK11VYwZQej2eHnMWtqot+znJ+GNTqb5YbiXi+5Low==",
+      "version": "4.36.2",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.36.2.tgz",
+      "integrity": "sha512-PRFSpxNzX9Oi0Wfh02asztN9Sgev/MacfZwmd+VVyE6ZxW+a/kEpAYZhzGAmE+/aKVOGYuug7R9SulanYGxiDQ==",
       "license": "MIT",
       "bin": {
         "stencil": "bin/stencil"
@@ -2178,11 +2178,10 @@
       }
     },
     "node_modules/@stencil/vue-output-target": {
-      "version": "0.10.7",
-      "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.10.7.tgz",
-      "integrity": "sha512-IYxDe+SLCkwhwsWRdynE31rTK1zN3hVwwojQ/V9lrN8Gnx4PTvrUQHiRno9jFo1dk+EaBZWX9gZSmXta0ZaZew==",
+      "version": "0.10.8",
+      "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.10.8.tgz",
+      "integrity": "sha512-/a20LG29xqy/lxBqo6zc1LbyS20GW9xghypZ7vYdo5fQB8jHClAQDkn+c8aykQlre5TtHiODgvr/rRDUrQKwyg==",
       "dev": true,
-      "license": "MIT",
       "peerDependencies": {
         "@stencil/core": ">=2.0.0 || >=3 || >= 4.0.0-beta.0 || >= 4.0.0",
         "vue": "^3.4.38",
@@ -3819,9 +3818,9 @@
       ]
     },
     "node_modules/chalk": {
-      "version": "5.4.1",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.4.1.tgz",
-      "integrity": "sha512-zgVZuo2WcZgfUEmsn6eO3kINexW8RAE4maiQ8QNs8CtpPCSyMiYsULR3HQYkm3w8FIA3SberyMJMSldGsW+U3w==",
+      "version": "5.6.0",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.6.0.tgz",
+      "integrity": "sha512-46QrSQFyVSEyYAgQ22hQ+zDa60YHA4fBstHmtSApj1Y5vKtG27fWowW03jCk5KcbXEWPZUIR894aARCA/G1kfQ==",
       "dev": true,
       "engines": {
         "node": "^12.17.0 || ^14.13 || >=16.0.0"
@@ -6292,11 +6291,12 @@
       }
     },
     "node_modules/ionicons": {
-      "version": "7.4.0",
-      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-7.4.0.tgz",
-      "integrity": "sha512-ZK94MMqgzMCPPMhmk8Ouu6goyVHFIlw/ACP6oe3FrikcI0N7CX0xcwVaEbUc0G/v3W0shI93vo+9ve/KpvcNhQ==",
+      "version": "8.0.13",
+      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-8.0.13.tgz",
+      "integrity": "sha512-2QQVyG2P4wszne79jemMjWYLp0DBbDhr4/yFroPCxvPP1wtMxgdIV3l5n+XZ5E9mgoXU79w7yTWpm2XzJsISxQ==",
+      "license": "MIT",
       "dependencies": {
-        "@stencil/core": "^4.0.3"
+        "@stencil/core": "^4.35.3"
       }
     },
     "node_modules/is-alphabetical": {
@@ -9207,19 +9207,30 @@
       }
     },
     "node_modules/outsystems-design-tokens": {
-      "version": "1.2.6",
-      "resolved": "https://registry.npmjs.org/outsystems-design-tokens/-/outsystems-design-tokens-1.2.6.tgz",
-      "integrity": "sha512-Wqv7vR1nB6G8WfwKVMqpifhugT+iz5dh25QMWW/XFkblIm2e+mQcUqQw0W9lPSihWKH8wgJfe7zY0mT5G5h3VA==",
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/outsystems-design-tokens/-/outsystems-design-tokens-1.3.0.tgz",
+      "integrity": "sha512-VEYce0sdh9EfqH3NIBlyIZ6d2AtNRSj6ZjufHar2nsJTi+6LXxCogCXOZoFY3FRZ3Mf3fW0wUDrzi9772p4F7Q==",
       "dev": true,
+      "license": "BSD-3-Clause",
       "dependencies": {
         "glob": "^11.0.0",
         "minimist": "^1.2.8",
-        "style-dictionary": "^4.3.0"
+        "style-dictionary": "^5.0.0"
       },
       "bin": {
         "build.tokens": "scripts/index.js"
       }
     },
+    "node_modules/outsystems-design-tokens/node_modules/@types/node": {
+      "version": "22.17.0",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.17.0.tgz",
+      "integrity": "sha512-bbAKTCqX5aNVryi7qXVMi+OkB3w/OyblodicMbvE38blyAz7GxXf6XYhklokijuPwwVg9sDLKRxt0ZHXQwZVfQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "undici-types": "~6.21.0"
+      }
+    },
     "node_modules/outsystems-design-tokens/node_modules/balanced-match": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-3.0.1.tgz",
@@ -9241,6 +9252,16 @@
         "node": ">= 18"
       }
     },
+    "node_modules/outsystems-design-tokens/node_modules/commander": {
+      "version": "12.1.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-12.1.0.tgz",
+      "integrity": "sha512-Vw8qHK3bZM9y/P10u3Vib8o/DdkvA2OtPtZvD871QKjy74Wj1WSKFILMPRPSdUSx5RFK1arlJzEtA4PkFgnbuA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/outsystems-design-tokens/node_modules/glob": {
       "version": "11.0.2",
       "resolved": "https://registry.npmjs.org/glob/-/glob-11.0.2.tgz",
@@ -9264,6 +9285,19 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/outsystems-design-tokens/node_modules/is-plain-obj": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-4.1.0.tgz",
+      "integrity": "sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/outsystems-design-tokens/node_modules/jackspeak": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-4.1.1.tgz",
@@ -9319,6 +9353,59 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/outsystems-design-tokens/node_modules/prettier": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.6.2.tgz",
+      "integrity": "sha512-I7AIg5boAr5R0FFtJ6rCfD+LFsWHp81dolrFD8S79U9tb8Az2nGrJncnMSnys+bpQJfRUzqs9hnA81OAA3hCuQ==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "prettier": "bin/prettier.cjs"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
+    "node_modules/outsystems-design-tokens/node_modules/style-dictionary": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/style-dictionary/-/style-dictionary-5.0.1.tgz",
+      "integrity": "sha512-j+yQ4hM7a52iUQg5LVC8bnRkem4sU+unIY2qsyjoikPVzaxjkHd4ER7bnK+znW/Rhha69t4Fi5O46UHg6w8jFQ==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@bundled-es-modules/deepmerge": "^4.3.1",
+        "@bundled-es-modules/glob": "^10.4.2",
+        "@bundled-es-modules/memfs": "^4.9.4",
+        "@types/node": "^22.10.5",
+        "@zip.js/zip.js": "^2.7.44",
+        "chalk": "^5.3.0",
+        "change-case": "^5.3.0",
+        "commander": "^12.1.0",
+        "is-plain-obj": "^4.1.0",
+        "json5": "^2.2.2",
+        "patch-package": "^8.0.0",
+        "path-unified": "^0.2.0",
+        "prettier": "^3.3.3",
+        "tinycolor2": "^1.6.0"
+      },
+      "bin": {
+        "style-dictionary": "bin/style-dictionary.js"
+      },
+      "engines": {
+        "node": ">=22.0.0"
+      }
+    },
+    "node_modules/outsystems-design-tokens/node_modules/undici-types": {
+      "version": "6.21.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.21.0.tgz",
+      "integrity": "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/p-limit": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
@@ -9681,12 +9768,12 @@
       }
     },
     "node_modules/playwright": {
-      "version": "1.52.0",
-      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.52.0.tgz",
-      "integrity": "sha512-JAwMNMBlxJ2oD1kce4KPtMkDeKGHQstdpFPcPH3maElAXon/QZeTvtsfXmTMRyO9TslfoYOXkSsvao2nE1ilTw==",
+      "version": "1.54.2",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.54.2.tgz",
+      "integrity": "sha512-Hu/BMoA1NAdRUuulyvQC0pEqZ4vQbGfn8f7wPXcnqQmM+zct9UliKxsIkLNmz/ku7LElUNqmaiv1TG/aL5ACsw==",
       "dev": true,
       "dependencies": {
-        "playwright-core": "1.52.0"
+        "playwright-core": "1.54.2"
       },
       "bin": {
         "playwright": "cli.js"
@@ -9699,9 +9786,9 @@
       }
     },
     "node_modules/playwright-core": {
-      "version": "1.52.0",
-      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.52.0.tgz",
-      "integrity": "sha512-l2osTgLXSMeuLZOML9qYODUQoPPnUsKsb5/P6LJ2e6uPKXUdPK5WYhN4z03G+YNbWmGDY4YENauNu4ZKczreHg==",
+      "version": "1.54.2",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.54.2.tgz",
+      "integrity": "sha512-n5r4HFbMmWsB4twG7tJLDN9gmBUeSPcsBZiWSE4DnYz9mJMAFqr2ID7+eGC9kpEnxExJ1epttwR59LEWCk8mtA==",
       "dev": true,
       "bin": {
         "playwright-core": "cli.js"

core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/core",
-  "version": "8.6.1",
+  "version": "8.7.3",
   "description": "Base components for Ionic",
   "keywords": [
     "ionic",
@@ -32,8 +32,8 @@
   ],
   "dependencies": {
     "@phosphor-icons/core": "^2.1.1",
-    "@stencil/core": "4.33.1",
-    "ionicons": "^7.2.2",
+    "@stencil/core": "4.36.2",
+    "ionicons": "^8.0.13",
     "tslib": "^2.1.0"
   },
   "devDependencies": {
@@ -45,13 +45,13 @@
     "@clack/prompts": "^0.11.0",
     "@ionic/eslint-config": "^0.3.0",
     "@ionic/prettier-config": "^2.0.0",
-    "@playwright/test": "^1.52.0",
+    "@playwright/test": "^1.54.2",
     "@rollup/plugin-node-resolve": "^8.4.0",
     "@rollup/plugin-virtual": "^2.0.3",
     "@stencil/angular-output-target": "^0.10.0",
     "@stencil/react-output-target": "0.5.3",
     "@stencil/sass": "^3.0.9",
-    "@stencil/vue-output-target": "0.10.7",
+    "@stencil/vue-output-target": "0.10.8",
     "@types/jest": "^29.5.6",
     "@types/node": "^18.19.47",
     "@typescript-eslint/eslint-plugin": "^6.7.2",
@@ -66,7 +66,7 @@
     "fs-extra": "^9.0.1",
     "jest": "^29.7.0",
     "jest-cli": "^29.7.0",
-    "outsystems-design-tokens": "^1.2.6",
+    "outsystems-design-tokens": "^1.3.0",
     "prettier": "^2.8.8",
     "rollup": "^2.26.4",
     "sass": "^1.33.0",

core/scripts/tokens/utils.js

@@ -142,8 +142,12 @@ function generateTypographyOutput(prop, propName, isVariable) {
 
 // Generates a color based css utility-class from a color Design Token structure
 function generateColorUtilityClasses(prop, className) {
-  return `.${variablesPrefix}-${className} {\n  color: $${variablesPrefix}-${prop.name};\n}
-  .${variablesPrefix}-background-${className} {\n  background-color: $${variablesPrefix}-${prop.name};\n}`;
+  const isBg = className.includes('bg');
+  const cssProp = isBg ? 'background-color' : 'color';
+  return `.${variablesPrefix}-${className} {
+  --${cssProp}: $${variablesPrefix}-${prop.name};
+  ${cssProp}: $${variablesPrefix}-${prop.name};
+}`;
 }
 
 // Generates margin and padding utility classes to match the token-agnostic
@@ -264,7 +268,10 @@ function generateSpaceUtilityClasses(prop, className) {
 
 // Generates a valid box-shadow value from a shadow Design Token structure
 function generateRadiusUtilityClasses(propName) {
-  return `.${variablesPrefix}-${propName} {\n  border-radius: $${variablesPrefix}-${propName};\n}`;
+  return `.${variablesPrefix}-${propName} {
+  --border-radius: $${variablesPrefix}-${propName};
+  border-radius: $${variablesPrefix}-${propName};
+}`;
 }
 
 // Generates a border based css utility-class from a font Design Token structure
@@ -282,7 +289,10 @@ function generateBorderUtilityClasses(prop, propName) {
     default:
       attribute = 'border-color';
   }
-  return `.${variablesPrefix}-${propName} {\n  ${attribute}: $${variablesPrefix}-${propName};\n}`;
+  return `.${variablesPrefix}-${propName} {
+  --${attribute}: $${variablesPrefix}-${propName};
+  ${attribute}: $${variablesPrefix}-${propName};
+}`;
 }
 
 // Generates a font based css utility-class from a font Design Token structure
@@ -292,7 +302,10 @@ function generateFontUtilityClasses(prop, propName) {
 
 // Generates a valid box-shadow value from a shadow Design Token structure
 function generateShadowUtilityClasses(propName) {
-  return `.${variablesPrefix}-${propName} {\n  box-shadow: $${variablesPrefix}-${propName};\n}`;
+  return `.${variablesPrefix}-${propName} {
+  --box-shadow: $${variablesPrefix}-${propName};
+  box-shadow: $${variablesPrefix}-${propName};
+}`;
 }
 
 // Generates a utility class for a given token category and name

core/src/components/accordion-group/accordion-group.ionic.scss

@@ -19,19 +19,19 @@
 }
 
 :host(.accordion-group-expand-inset.accordion-group-shape-round) {
-  --border-radius: #{globals.$ion-border-radius-400};
+  --border-radius: #{globals.$ion-round-xl};
 
-  @include globals.border-radius(globals.$ion-border-radius-400);
+  @include globals.border-radius(globals.$ion-round-xl);
 }
 
 :host(.accordion-group-expand-inset.accordion-group-shape-soft) {
-  --border-radius: #{globals.$ion-border-radius-200};
+  --border-radius: #{globals.$ion-soft-xl};
 
-  @include globals.border-radius(globals.$ion-border-radius-200);
+  @include globals.border-radius(globals.$ion-soft-xl);
 }
 
 :host(.accordion-group-expand-inset.accordion-group-shape-rectangular) {
-  --border-radius: #{globals.$ion-border-radius-0};
+  --border-radius: #{globals.$ion-rectangular-xl};
 
-  @include globals.border-radius(globals.$ion-border-radius-0);
+  @include globals.border-radius(globals.$ion-rectangular-xl);
 }

core/src/components/accordion-group/test/expand/accordion-group.e2e.ts

@@ -10,7 +10,7 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screens
           <style>
             /* Background styles to show the border radius */
             :root {
-              background: #ccc7c7;
+              --background: #ccc7c7;
             }
           </style>
           <ion-accordion-group>
@@ -48,7 +48,7 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screens
           <style>
             /* Background styles to show the border radius */
             :root {
-              background: #ccc7c7;
+              --background: #ccc7c7;
             }
           </style>
           <ion-accordion-group value="first">
@@ -88,7 +88,7 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screens
           <style>
             /* Background styles to show the border radius */
             :root {
-              background: #ccc7c7;
+              --background: #ccc7c7;
             }
           </style>
           <ion-accordion-group expand="inset">
@@ -126,7 +126,7 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screens
           <style>
             /* Background styles to show the border radius */
             :root {
-              background: #ccc7c7;
+              --background: #ccc7c7;
             }
           </style>
           <ion-accordion-group value="first" expand="inset">

core/src/components/accordion-group/test/shape/accordion-group.e2e.ts

@@ -10,7 +10,7 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screens
           <style>
             /* Background styles to show the border radius */
             :root {
-              background: #222;
+              --background: #222;
             }
           </style>
 

core/src/components/accordion/accordion.ionic.scss

@@ -59,7 +59,7 @@
 // --------------------------------------------------
 
 #content-wrapper {
-  @include globals.padding(null, globals.$ion-space-400, globals.$ion-space-300, globals.$ion-space-400);
+  @include globals.padding(globals.$ion-space-300, globals.$ion-space-400);
   @include globals.typography(globals.$ion-body-md-regular);
 
   color: globals.$ion-text-default;

core/src/components/accordion/test/shape/accordion.e2e.ts

@@ -10,7 +10,7 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screens
           <style>
             /* Background styles to show the border radius */
             :root {
-              background: #222;
+              --background: #222;
             }
           </style>
 

core/src/components/action-sheet/action-sheet.tsx

@@ -212,16 +212,15 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
 
   /**
    * Dismiss the action sheet overlay after it has been presented.
+   * This is a no-op if the overlay has not been presented yet. If you want
+   * to remove an overlay from the DOM that was never presented, use the
+   * [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
    *
    * @param data Any data to emit in the dismiss events.
    * @param role The role of the element that is dismissing the action sheet.
    * This can be useful in a button handler for determining which button was
-   * clicked to dismiss the action sheet.
-   * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
-   *
-   * This is a no-op if the overlay has not been presented yet. If you want
-   * to remove an overlay from the DOM that was never presented, use the
-   * [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
+   * clicked to dismiss the action sheet. Some examples include:
+   * `"cancel"`, `"destructive"`, `"selected"`, and `"backdrop"`.
    */
   @Method()
   async dismiss(data?: any, role?: string): Promise<boolean> {

core/src/components/alert/alert.tsx

@@ -434,16 +434,15 @@ export class Alert implements ComponentInterface, OverlayInterface {
 
   /**
    * Dismiss the alert overlay after it has been presented.
+   * This is a no-op if the overlay has not been presented yet. If you want
+   * to remove an overlay from the DOM that was never presented, use the
+   * [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
    *
    * @param data Any data to emit in the dismiss events.
    * @param role The role of the element that is dismissing the alert.
    * This can be useful in a button handler for determining which button was
-   * clicked to dismiss the alert.
-   * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
-   *
-   * This is a no-op if the overlay has not been presented yet. If you want
-   * to remove an overlay from the DOM that was never presented, use the
-   * [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
+   * clicked to dismiss the alert. Some examples include:
+   * `"cancel"`, `"destructive"`, `"selected"`, and `"backdrop"`.
    */
   @Method()
   async dismiss(data?: any, role?: string): Promise<boolean> {

core/src/components/app/app.tsx

@@ -25,7 +25,7 @@ export class App implements ComponentInterface {
    * inside of a popover when the user presents it, but the popover is not always
    * presented as a result of keyboard action.)
    *
-   * @param elements - The elements to set focus on.
+   * @param elements An array of HTML elements to set focus on.
    */
   @Method()
   async setFocus(elements: HTMLElement[]) {

core/src/components/avatar/avatar.ionic.scss

@@ -96,19 +96,40 @@
 :host(.avatar-xxsmall.avatar-soft),
 :host(.avatar-xsmall.avatar-soft),
 :host(.avatar-small.avatar-soft) {
-  --border-radius: #{globals.$ion-border-radius-100};
+  --border-radius: #{globals.$ion-soft-2xs};
+}
+:host(.avatar-medium.avatar-soft) {
+  --border-radius: #{globals.$ion-soft-xs};
+}
+:host(.avatar-large.avatar-soft),
+:host(.avatar-xlarge.avatar-soft) {
+  --border-radius: #{globals.$ion-soft-md};
 }
 
-:host(.avatar-soft) {
-  --border-radius: #{globals.$ion-border-radius-200};
+:host(.avatar-xxsmall.avatar-round),
+:host(.avatar-xsmall.avatar-round),
+:host(.avatar-small.avatar-round) {
+  --border-radius: #{globals.$ion-round-2xs};
+}
+:host(.avatar-medium.avatar-round) {
+  --border-radius: #{globals.$ion-round-xs};
+}
+:host(.avatar-large.avatar-round),
+:host(.avatar-xlarge.avatar-round) {
+  --border-radius: #{globals.$ion-round-md};
 }
 
-:host(.avatar-round) {
-  --border-radius: #{globals.$ion-border-radius-full};
+:host(.avatar-xxsmall.avatar-rectangular),
+:host(.avatar-xsmall.avatar-rectangular),
+:host(.avatar-small.avatar-rectangular) {
+  --border-radius: #{globals.$ion-rectangular-2xs};
 }
-
-:host(.avatar-rectangular) {
-  --border-radius: #{globals.$ion-border-radius-0};
+:host(.avatar-medium.avatar-rectangular) {
+  --border-radius: #{globals.$ion-rectangular-xs};
+}
+:host(.avatar-large.avatar-rectangular),
+:host(.avatar-xlarge.avatar-rectangular) {
+  --border-radius: #{globals.$ion-rectangular-md};
 }
 
 // Avatar Icon
@@ -224,5 +245,6 @@
 // Avatar Disabled
 // --------------------------------------------------
 :host(.avatar-disabled)::before {
+  @include globals.border-radius(var(--border-radius));
   @include globals.disabled-state();
 }

core/src/components/back-button/test/basic/index.html

@@ -125,7 +125,7 @@
 
         <ion-toolbar color="dark">
           <ion-buttons slot="start">
-            <ion-back-button class="ion-hide"></ion-back-button>
+            <ion-back-button class="ion-display-none"></ion-back-button>
           </ion-buttons>
           <ion-title>Hidden</ion-title>
         </ion-toolbar>

core/src/components/badge/badge.ionic.scss

@@ -51,21 +51,21 @@
 
 /* Soft Badge */
 :host(.badge-soft) {
-  @include globals.border-radius(globals.$ion-border-radius-200);
+  @include globals.border-radius(globals.$ion-soft-xs);
 }
 
 :host(.badge-small.badge-soft) {
-  @include globals.border-radius(globals.$ion-border-radius-100);
+  @include globals.border-radius(globals.$ion-soft-2xs);
 }
 
 /* Round Badge */
 :host(.badge-round) {
-  @include globals.border-radius(globals.$ion-border-radius-full);
+  @include globals.border-radius(globals.$ion-round-sm);
 }
 
 /* Rectangular Badge */
 :host(.badge-rectangular) {
-  @include globals.border-radius(globals.$ion-border-radius-0);
+  @include globals.border-radius(globals.$ion-rectangular-sm);
 }
 
 // Badge Sizes

core/src/components/badge/test/hint/index.html

@@ -366,6 +366,63 @@
           </div>
         </ion-list>
 
+        <ion-list id="tab-button-icon-bottom">
+          <ion-list-header>
+            <ion-label> Inside Tab Button - Only Icon </ion-label>
+          </ion-list-header>
+
+          <div class="ion-display-flex ion-align-items-center ion-justify-content-around ion-margin">
+            <ion-tab-bar>
+              <ion-tab-button href="" tab="tab-one" layout="label-hide">
+                <ion-icon name="home"></ion-icon>
+                <ion-badge size="small" vertical="top" color="danger"></ion-badge>
+              </ion-tab-button>
+
+              <ion-tab-button tab="schedule" class="e2eTabTwoButton" layout="label-hide">
+                <ion-icon name="globe"></ion-icon>
+                <ion-badge size="small" vertical="top" color="primary">
+                  <ion-icon name="star"></ion-icon>
+                </ion-badge>
+              </ion-tab-button>
+
+              <ion-tab-button tab="tab-three" layout="label-hide">
+                <ion-icon name="logo-facebook"></ion-icon>
+                <ion-badge size="small" vertical="top" color="warning">999</ion-badge>
+              </ion-tab-button>
+
+              <ion-tab-button tab="tab-four" class="e2eTabFourButton" layout="label-hide">
+                <ion-icon name="chatbox"></ion-icon>
+                <ion-badge vertical="top" color="success" size="small"></ion-badge>
+              </ion-tab-button>
+            </ion-tab-bar>
+          </div>
+          <div class="ion-display-flex ion-align-items-center ion-justify-content-around ion-margin">
+            <ion-tab-bar>
+              <ion-tab-button href="" tab="tab-one" layout="label-hide">
+                <ion-icon name="home"></ion-icon>
+                <ion-badge size="small" vertical="bottom" color="danger"></ion-badge>
+              </ion-tab-button>
+
+              <ion-tab-button tab="schedule" class="e2eTabTwoButton" layout="label-hide">
+                <ion-icon name="globe"></ion-icon>
+                <ion-badge size="small" vertical="bottom" color="primary">
+                  <ion-icon name="star"></ion-icon>
+                </ion-badge>
+              </ion-tab-button>
+
+              <ion-tab-button tab="tab-three" layout="label-hide">
+                <ion-icon name="logo-facebook"></ion-icon>
+                <ion-badge size="small" vertical="bottom" color="warning">999</ion-badge>
+              </ion-tab-button>
+
+              <ion-tab-button tab="tab-four" class="e2eTabFourButton" layout="label-hide">
+                <ion-icon name="chatbox"></ion-icon>
+                <ion-badge vertical="bottom" color="success" size="small"></ion-badge>
+              </ion-tab-button>
+            </ion-tab-bar>
+          </div>
+        </ion-list>
+
         <ion-list id="button-top">
           <ion-list-header>
             <ion-label> Inside Button - Top Placement </ion-label>

core/src/components/badge/test/shape/index.html

@@ -57,6 +57,40 @@
             </ion-badge>
           </ion-item>
         </ion-list>
+        <ion-list>
+          <ion-item>
+            <ion-label>Medium Default</ion-label>
+            <ion-badge size="medium" slot="end">1</ion-badge>
+            <ion-badge size="medium" slot="end">99+</ion-badge>
+            <ion-badge size="medium" slot="end">
+              <ion-icon name="logo-ionic"></ion-icon>
+            </ion-badge>
+          </ion-item>
+          <ion-item>
+            <ion-label>Medium Soft</ion-label>
+            <ion-badge size="medium" slot="end" shape="soft">1</ion-badge>
+            <ion-badge size="medium" slot="end" shape="soft">99+</ion-badge>
+            <ion-badge size="medium" slot="end" shape="soft">
+              <ion-icon name="logo-ionic"></ion-icon>
+            </ion-badge>
+          </ion-item>
+          <ion-item>
+            <ion-label>Medium Round</ion-label>
+            <ion-badge size="medium" slot="end" shape="round">1</ion-badge>
+            <ion-badge size="medium" slot="end" shape="round">99+</ion-badge>
+            <ion-badge size="medium" slot="end" shape="round">
+              <ion-icon name="logo-ionic"></ion-icon>
+            </ion-badge>
+          </ion-item>
+          <ion-item>
+            <ion-label>Medium Rectangular</ion-label>
+            <ion-badge size="medium" slot="end" shape="rectangular">1</ion-badge>
+            <ion-badge size="medium" slot="end" shape="rectangular">99+</ion-badge>
+            <ion-badge size="medium" slot="end" shape="rectangular">
+              <ion-icon name="logo-ionic"></ion-icon>
+            </ion-badge>
+          </ion-item>
+        </ion-list>
       </ion-content>
     </ion-app>
   </body>