chore(): add updated snapshots

Issue number: internal

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
The current UI of the tab-bar and tab-button in the ionic theme is not
matching the expected, in edge use cases:
- tab-button:
- Long label: causes the size of the tab-button to increase and
eventually making other tab-buttons, not visible.
- size: in different scenarios the size of each tab-button could become
different.
- tab-bar:
   - Many tab-buttons: would case some of them to become inaccessible.
   - Floating: distance from the bottom, was incorrect.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
The changes made allow to fix the issues described above, specifically
for ionic theme, containing this way, potential impacts:
- tab-button:
   - min-width: has been defined for the tab-button.
   - property was set to force each tab-button to have the same size.
- tab-bar:
- allow the ability for the content to overflow on the x axis - a scroll
will appear if needed.
- increased the distance from the bottom, to comply with latest design
trends.

## Does this introduce a breaking change?
- [ ] Yes
- [x] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

---------

Co-authored-by: Brandy Smith <brandyscarney@users.noreply.github.com>

.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-angular-server/action.yml

@@ -3,7 +3,7 @@ description: 'Build Ionic Angular Server'
 runs:
   using: 'composite'
   steps:
-    - uses: actions/setup-node@v4
+    - uses: actions/setup-node@v5
       with:
         node-version: 22.x
     - uses: ./.github/workflows/actions/download-archive

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

@@ -3,7 +3,7 @@ description: 'Build Ionic Angular'
 runs:
   using: 'composite'
   steps:
-    - uses: actions/setup-node@v4
+    - uses: actions/setup-node@v5
       with:
         node-version: 22.x
     - uses: ./.github/workflows/actions/download-archive

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

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

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

@@ -8,8 +8,8 @@ inputs:
 runs:
   using: 'composite'
   steps:
-    - uses: actions/checkout@v4
-    - uses: actions/setup-node@v4
+    - uses: actions/checkout@v5
+    - uses: actions/setup-node@v5
       with:
         node-version: 22.x
     - name: Install Dependencies
@@ -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/build-react-router/action.yml

@@ -3,7 +3,7 @@ description: 'Build Ionic React Router'
 runs:
   using: 'composite'
   steps:
-    - uses: actions/setup-node@v4
+    - uses: actions/setup-node@v5
       with:
         node-version: 22.x
     - uses: ./.github/workflows/actions/download-archive

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

@@ -3,7 +3,7 @@ description: 'Build Ionic React'
 runs:
   using: 'composite'
   steps:
-    - uses: actions/setup-node@v4
+    - uses: actions/setup-node@v5
       with:
         node-version: 22.x
     - uses: ./.github/workflows/actions/download-archive

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

@@ -3,7 +3,7 @@ description: 'Builds Ionic Vue Router'
 runs:
   using: 'composite'
   steps:
-    - uses: actions/setup-node@v4
+    - uses: actions/setup-node@v5
       with:
         node-version: 22.x
     - uses: ./.github/workflows/actions/download-archive

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

@@ -3,7 +3,7 @@ description: 'Build Ionic Vue'
 runs:
   using: 'composite'
   steps:
-    - uses: actions/setup-node@v4
+    - uses: actions/setup-node@v5
       with:
         node-version: 22.x
     - uses: ./.github/workflows/actions/download-archive

.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/publish-npm/action.yml

@@ -19,7 +19,7 @@ inputs:
 runs:
   using: 'composite'
   steps:
-    - uses: actions/setup-node@v4
+    - uses: actions/setup-node@v5
       with:
         node-version: 22.x
     # Provenance requires npm 9.5.0+

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

@@ -6,9 +6,9 @@ inputs:
 runs:
   using: 'composite'
   steps:
-    - uses: actions/setup-node@v4
+    - uses: actions/setup-node@v5
       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/test-core-clean-build/action.yml

@@ -3,7 +3,7 @@ description: 'Test Core Clean Build'
 runs:
   using: 'composite'
   steps:
-    - uses: actions/setup-node@v4
+    - uses: actions/setup-node@v5
       with:
         node-version: 22.x
 

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

@@ -3,7 +3,7 @@ description: 'Test Core Lint'
 runs:
   using: 'composite'
   steps:
-    - uses: actions/setup-node@v4
+    - uses: actions/setup-node@v5
       with:
         node-version: 22.x
     - name: Install Dependencies

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

@@ -13,7 +13,7 @@ inputs:
 runs:
   using: 'composite'
   steps:
-    - uses: actions/setup-node@v4
+    - uses: actions/setup-node@v5
       with:
         node-version: 22.x
     - uses: ./.github/workflows/actions/download-archive

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

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

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

@@ -6,7 +6,7 @@ inputs:
 runs:
   using: 'composite'
   steps:
-    - uses: actions/setup-node@v4
+    - uses: actions/setup-node@v5
       with:
         node-version: 22.x
     - uses: ./.github/workflows/actions/download-archive

.github/workflows/actions/test-react-router-e2e/action.yml

@@ -6,7 +6,7 @@ inputs:
 runs:
   using: 'composite'
   steps:
-    - uses: actions/setup-node@v4
+    - uses: actions/setup-node@v5
       with:
         node-version: 22.x
     - uses: ./.github/workflows/actions/download-archive

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

@@ -6,7 +6,7 @@ inputs:
 runs:
   using: 'composite'
   steps:
-    - uses: actions/setup-node@v4
+    - uses: actions/setup-node@v5
       with:
         node-version: 22.x
     - uses: ./.github/workflows/actions/download-archive

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

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

.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/label.yml

@@ -13,7 +13,7 @@ jobs:
   triage:
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/labeler@v5
+    - uses: actions/labeler@v6
       with:
         repo-token: "${{ secrets.GITHUB_TOKEN }}"
         sync-labels: true

.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

BREAKING.md

@@ -18,6 +18,7 @@ This is a comprehensive list of the breaking changes introduced in the major ver
   - [Button](#version-9x-button)
   - [Card](#version-9x-card)
   - [Chip](#version-9x-chip)
+  - [Grid](#version-9x-grid)
 
 <h2 id="version-9x-components">Components</h2>
 
@@ -32,3 +33,105 @@ This is a comprehensive list of the breaking changes introduced in the major ver
 <h4 id="version-9x-chip">Chip</h4>
 
 - The `border-radius` of the `ios` and `md` chip now defaults to `10px` and `8px`, respectively, instead of `16px` in accordance with the iOS and Material Design 3 guidelines. To revert to the previous appearance, set the `shape` to `"round"`, or override the `--border-radius` CSS variable to specify a different value.
+
+<h4 id="version-9x-grid">Grid</h4>
+
+- The properties `pull` and `push` have been deprecated and no longer work. A similar look can be achieved with the newly added property `order`.
+
+<h5>Example 1: Swap two columns</h5>
+
+**Version up to 8.x**
+```html
+<ion-grid>
+  <ion-row>
+    <ion-col push="4">1</ion-col>
+    <ion-col pull="4">2</ion-col>
+    <ion-col>3</ion-col>
+  </ion-row>
+</ion-grid>
+```
+**Version 9.x+**
+```html
+<ion-grid>
+  <ion-row>
+    <ion-col order="2">1</ion-col>
+    <ion-col order="1">2</ion-col>
+    <ion-col order="3">3</ion-col>
+  </ion-row>
+</ion-grid>
+```
+
+<h5>Example 2: Reorder columns with specific sizes</h5>
+To reorder two columns where column 1 has `size="9" push="3"` and column 2 has `size="3" pull="9"`:
+
+**Version up to 8.x**
+```html
+<ion-grid>
+  <ion-row>
+    <ion-col push="3">1</ion-col>
+    <ion-col pull="9">2</ion-col>
+  </ion-row>
+</ion-grid>
+```
+**Version 9.x+**
+```html
+<ion-grid>
+  <ion-row>
+    <ion-col order="2">1</ion-col>
+    <ion-col size="3" order="1">2</ion-col>
+  </ion-row>
+</ion-grid>
+```
+<h5>Example 3: Push</h5>
+```html
+<ion-grid>
+  <ion-row>
+    <ion-col size="auto" push="1">
+      <div>ion-col push 1</div>
+    </ion-col>
+    <ion-col size="auto" push="1">
+      <div>ion-col push 1</div>
+    </ion-col>
+  </ion-row>
+</ion-grid>
+```
+**Version 9.x+**
+```html
+<ion-grid>
+  <ion-row>
+    <ion-col size="auto" offset="1">
+      <div>ion-col size="auto" offset="1"</div>
+    </ion-col>
+    <ion-col size="auto">
+      <div>ion-col size="auto"</div>
+    </ion-col>
+  </ion-row>
+</ion-grid>
+```
+
+<h5>Example 4: Push and Pull</h5>
+```html
+<ion-grid>
+  <ion-row>
+    <ion-col size="3" size-md="6" push="9" push-md="6">
+      <div>ion-col size="3" size-md="6" push="9" push-md="6"</div>
+    </ion-col>
+    <ion-col size="9" size-md="6" pull="3" pull-md="6">
+      <div>ion-col size="9" size-md="6" pull="3" pull-md="6"</div>
+    </ion-col>
+  </ion-row>
+</ion-grid>
+```
+**Version 9.x+**
+```html
+<ion-grid>
+  <ion-row>
+    <ion-col size="auto" order="2" order-md="2">
+      <div>ion-col size="auto" order="2" order-md="2"</div>
+    </ion-col>
+    <ion-col size="auto" order="1" order-md="1">
+      <div>ion-col size="auto" order="1" order-md="1"</div>
+    </ion-col>
+  </ion-row>
+</ion-grid>
+```

CHANGELOG.md

@@ -3,6 +3,155 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.7.5](https://github.com/ionic-team/ionic-framework/compare/v8.7.4...v8.7.5) (2025-09-24)
+
+
+### Bug Fixes
+
+* **modal:** allow sheet modals to skip focus trap ([#30689](https://github.com/ionic-team/ionic-framework/issues/30689)) ([a40d957](https://github.com/ionic-team/ionic-framework/commit/a40d957ad9c1897af365a91b45b00228a00d614c)), closes [#30684](https://github.com/ionic-team/ionic-framework/issues/30684)
+* **vue:** emit component-specific overlay events ([#30688](https://github.com/ionic-team/ionic-framework/issues/30688)) ([024d090](https://github.com/ionic-team/ionic-framework/commit/024d090122548e26ec2cdcfae4637dde8f288278)), closes [#30641](https://github.com/ionic-team/ionic-framework/issues/30641)
+
+
+
+
+
+## [8.7.4](https://github.com/ionic-team/ionic-framework/compare/v8.7.3...v8.7.4) (2025-09-17)
+
+
+### Bug Fixes
+
+* **input:** improve error text accessibility ([#30635](https://github.com/ionic-team/ionic-framework/issues/30635)) ([c339bc3](https://github.com/ionic-team/ionic-framework/commit/c339bc36827b62ef871325869a9a5db9b17ac785))
+* **overlays,picker:** remove invalid aria-hidden attribute ([#30563](https://github.com/ionic-team/ionic-framework/issues/30563)) ([49f96d7](https://github.com/ionic-team/ionic-framework/commit/49f96d7f1e9050a95e3e33a821c0467ecc0bed64)), closes [#30040](https://github.com/ionic-team/ionic-framework/issues/30040)
+* **segment-view:** scroll and select the right item when the component is in RTL context; ([#30675](https://github.com/ionic-team/ionic-framework/issues/30675)) ([66f517d](https://github.com/ionic-team/ionic-framework/commit/66f517d5b2154fff00b294a78f4107f057a580c6)), closes [#30079](https://github.com/ionic-team/ionic-framework/issues/30079)
+
+
+
+
+
+## [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,152 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.7.5](https://github.com/ionic-team/ionic-framework/compare/v8.7.4...v8.7.5) (2025-09-24)
+
+
+### Bug Fixes
+
+* **modal:** allow sheet modals to skip focus trap ([#30689](https://github.com/ionic-team/ionic-framework/issues/30689)) ([a40d957](https://github.com/ionic-team/ionic-framework/commit/a40d957ad9c1897af365a91b45b00228a00d614c)), closes [#30684](https://github.com/ionic-team/ionic-framework/issues/30684)
+
+
+
+
+
+## [8.7.4](https://github.com/ionic-team/ionic-framework/compare/v8.7.3...v8.7.4) (2025-09-17)
+
+
+### Bug Fixes
+
+* **input:** improve error text accessibility ([#30635](https://github.com/ionic-team/ionic-framework/issues/30635)) ([c339bc3](https://github.com/ionic-team/ionic-framework/commit/c339bc36827b62ef871325869a9a5db9b17ac785))
+* **overlays,picker:** remove invalid aria-hidden attribute ([#30563](https://github.com/ionic-team/ionic-framework/issues/30563)) ([49f96d7](https://github.com/ionic-team/ionic-framework/commit/49f96d7f1e9050a95e3e33a821c0467ecc0bed64)), closes [#30040](https://github.com/ionic-team/ionic-framework/issues/30040)
+* **segment-view:** scroll and select the right item when the component is in RTL context; ([#30675](https://github.com/ionic-team/ionic-framework/issues/30675)) ([66f517d](https://github.com/ionic-team/ionic-framework/commit/66f517d5b2154fff00b294a78f4107f057a580c6)), closes [#30079](https://github.com/ionic-team/ionic-framework/issues/30079)
+
+
+
+
+
+## [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.55.1
 
 # Set the working directory
 WORKDIR /ionic

core/api.txt

@@ -622,6 +622,12 @@ ion-col,prop,offsetMd,string | undefined,undefined,false,false
 ion-col,prop,offsetSm,string | undefined,undefined,false,false
 ion-col,prop,offsetXl,string | undefined,undefined,false,false
 ion-col,prop,offsetXs,string | undefined,undefined,false,false
+ion-col,prop,order,string | undefined,undefined,false,false
+ion-col,prop,orderLg,string | undefined,undefined,false,false
+ion-col,prop,orderMd,string | undefined,undefined,false,false
+ion-col,prop,orderSm,string | undefined,undefined,false,false
+ion-col,prop,orderXl,string | undefined,undefined,false,false
+ion-col,prop,orderXs,string | undefined,undefined,false,false
 ion-col,prop,pull,string | undefined,undefined,false,false
 ion-col,prop,pullLg,string | undefined,undefined,false,false
 ion-col,prop,pullMd,string | undefined,undefined,false,false
@@ -641,6 +647,7 @@ ion-col,prop,sizeSm,string | undefined,undefined,false,false
 ion-col,prop,sizeXl,string | undefined,undefined,false,false
 ion-col,prop,sizeXs,string | undefined,undefined,false,false
 ion-col,prop,theme,"ios" | "md" | "ionic",undefined,false,false
+ion-col,css-prop,--col-unit-size
 ion-col,css-prop,--ion-grid-column-padding
 ion-col,css-prop,--ion-grid-column-padding-lg
 ion-col,css-prop,--ion-grid-column-padding-md
@@ -919,6 +926,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>
@@ -1949,6 +1957,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
@@ -2002,6 +2013,7 @@ ion-router-outlet,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-row,shadow
 ion-row,prop,mode,"ios" | "md",undefined,false,false
 ion-row,prop,theme,"ios" | "md" | "ionic",undefined,false,false
+ion-row,css-prop,--ion-grid-gap
 
 ion-searchbar,scoped
 ion-searchbar,prop,animated,boolean,false,false,false

core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/core",
-  "version": "8.6.1",
+  "version": "8.7.5",
   "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.38.0",
+    "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.55.1",
     "@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,12 +66,12 @@
     "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.2",
     "prettier": "^2.8.8",
     "rollup": "^2.26.4",
     "sass": "^1.33.0",
     "serve": "^14.0.1",
-    "style-dictionary": "^4.1.3",
+    "style-dictionary": "^5.0.0",
     "stylelint": "^13.13.1",
     "stylelint-order": "^4.1.0"
   },
@@ -80,7 +80,7 @@
     "build.css": "npm run css.sass && npm run css.minify",
     "build.debug": "npm run clean && stencil build --debug",
     "build.docs.json": "stencil build --docs-json dist/docs.json",
-    "build.tokens": "npx build.tokens --config scripts/tokens/index.js && npm run prettier.tokens",
+    "build.tokens": "node ./node_modules/outsystems-design-tokens/scripts/index.js --config ./scripts/tokens/index.mjs && npm run prettier.tokens",
     "clean": "node scripts/clean.js",
     "css.minify": "cleancss -O2 -o ./css/ionic.bundle.css ./css/ionic.bundle.css",
     "css.sass": "sass --embed-sources --style compressed src/css:./css",

core/scripts/tokens/index.js

@@ -1,201 +0,0 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-// For generating Design Tokens, we use Style Dictionary for several reasons:
-// - It's prepared to easily generate tokens for multiple types of outputs (CSS, SCSS, iOS, Android, documentation, etc.).
-// - It also works very well out of the box with any kind of Design Tokens formats, like Figma Tokens, as well as APIs to adjust to more custom ones.
-// - It is probably the most well-known and widely used Design Tokens tool. It has also been regularly maintained for a long time.
-// - It can easily scale to different necessities we might have in the future.
-(async () => {
-  const {
-    generateShadowValue,
-    generateFontSizeValue,
-    generateFontFamilyValue,
-    generateTypographyOutput,
-    generateValue,
-    generateColorUtilityClasses,
-    generateDefaultSpaceUtilityClasses,
-    generateSpaceUtilityClasses,
-    removeConsecutiveRepeatedWords,
-    setPrefixValue,
-    generateRadiusUtilityClasses,
-    generateBorderUtilityClasses,
-    generateFontUtilityClasses,
-    generateShadowUtilityClasses,
-    generateUtilityClasses
-  } = require('./utils.js');
-
-  const StyleDictionary = (await import('style-dictionary')).default;
-
-  // Set the prefix for variables and classes
-  setPrefixValue('ion');
-
-  // Register a custom file header
-  StyleDictionary.registerFileHeader({
-    name: 'custom-header',
-    fileHeader: async (defaultMessages = []) => {
-      return [...defaultMessages, 'Do not edit directly, this file was auto-generated.'];
-    },
-  });
-
-  // SCSS variables format
-  StyleDictionary.registerFormat({
-    name: 'scssVariablesFormat',
-    format: async function ({ dictionary, file }) {
-
-      console.log('Generating SCSS variables...');
-
-      const primitiveProperties = dictionary.allTokens.filter((prop) => prop.path[0] === 'primitives');
-      const scaleProperties = dictionary.allTokens.filter((prop) => prop.path[0] === 'scale');
-      const borderProperties = dictionary.allTokens.filter((prop) => prop.path[0] === 'border');
-      const semanticsProperties = dictionary.allTokens.filter((prop) => prop.path[0] === 'semantics');
-      const nonPrimitiveScaleBorderSemanticsProperties = dictionary.allTokens.filter(
-        (prop) => !['primitives', 'scale', 'border', 'semantics'].includes(prop.path[0])
-      );
-      const typographyProperties = nonPrimitiveScaleBorderSemanticsProperties.filter((prop) => prop.$type === 'typography');
-      const otherProperties = nonPrimitiveScaleBorderSemanticsProperties.filter((prop) => prop.$type !== 'typography');
-      
-      // Order: primitives → semantics → scale → border → other → typography
-      const sortedProperties = [
-        ...primitiveProperties,
-        ...semanticsProperties,
-        ...scaleProperties,
-        ...borderProperties,
-        ...otherProperties,
-        ...typographyProperties
-      ];
-
-      const prefixedVariables = sortedProperties.map((prop) => {
-        // Remove consecutive repeated words from the token name, like border-border-color
-        const propName = removeConsecutiveRepeatedWords(prop.name);
-
-        switch (prop.$type) {
-          case 'boxShadow':
-            return generateShadowValue(prop, propName);
-          case 'fontFamilies':
-            return generateFontFamilyValue(prop, propName, 'scss');
-          case 'fontSizes':
-            return generateFontSizeValue(prop, propName, 'scss');
-          case 'typography':
-            return generateTypographyOutput(prop, propName, true);
-          default:
-            return generateValue(prop, propName);
-        }
-      });
-
-      const fileHeader = await file.options.fileHeader();
-
-      return [
-        `/*\n${fileHeader.join('\n')}\n*/`,
-        '@use "../themes/functions.sizes" as font;\n',
-        prefixedVariables.join('\n') + '\n',
-      ].join('\n');
-    },
-  });
-
-  // Create utility-classes
-  StyleDictionary.registerFormat({
-    name: 'cssUtilityClassesFormat',
-    format: async function ({ dictionary, file }) {
-
-      console.log('Generating Utility-Classes...');
-
-      // Arrays to store specific utility classes
-      const typographyUtilityClasses = [];
-      const otherUtilityClasses = [];
-
-      // Generate utility classes for each token
-      dictionary.allTokens.map((prop) => {
-
-        const tokenCategory = prop.attributes.category;
-
-        if (prop.$type === 'fontFamilies' || tokenCategory === 'scale' || tokenCategory === 'backdrop') {
-          // Not creating for the tokens below, as they make no sense to exist as utility-classes.
-          return;
-        }
-
-        // Remove consecutive repeated words from the token name, like border-border-color
-        const propName = removeConsecutiveRepeatedWords(prop.name);
-
-        if (prop.$type === 'typography') {
-          // Typography tokens are handled differently, as each might have a different tokenType
-          return typographyUtilityClasses.push(generateTypographyOutput(prop, propName, false));
-
-        } else if (tokenCategory.startsWith('round') || tokenCategory.startsWith('rectangular') || tokenCategory.startsWith('soft')) {
-          // Generate utility classes for border-radius shape tokens, as they have their own token json file, based on primitive tokens
-          return otherUtilityClasses.push(generateRadiusUtilityClasses(propName));
-        }
-
-        let utilityClass = '';
-        switch (tokenCategory) {
-          case 'color':
-          case 'primitives':
-          case 'semantics':
-          case 'text':
-          case 'bg':
-          case 'icon':
-          case 'state':
-            utilityClass = generateColorUtilityClasses(prop, propName);
-            break;
-          case 'border':
-            utilityClass = generateBorderUtilityClasses(prop, propName);
-            break;
-          case 'font':
-            utilityClass = generateFontUtilityClasses(prop, propName);
-            break;
-          case 'space':
-            utilityClass = generateSpaceUtilityClasses(prop, propName);
-            break;
-          case 'shadow':
-          case 'elevation':
-            utilityClass = generateShadowUtilityClasses(propName);
-            break;
-          default:
-            utilityClass = generateUtilityClasses(tokenCategory, propName);
-        }
-
-        return otherUtilityClasses.push(utilityClass);
-      });
-
-      const defaultSpaceUtilityClasses = generateDefaultSpaceUtilityClasses();
-      otherUtilityClasses.push(defaultSpaceUtilityClasses);
-
-      // Concatenate typography utility classes at the beginning
-      const finalOutput = typographyUtilityClasses.concat(otherUtilityClasses).join('\n');
-
-      const fileHeader = await file.options.fileHeader();
-
-      return [
-        `/*\n${fileHeader.join('\n')}\n*/`,
-        '@import "./ionic.vars";\n@import "../themes/mixins";\n',
-        finalOutput,
-      ].join('\n');
-    },
-  });
-
-})();
-
-// APPLY THE CONFIGURATION
-module.exports = {
-  source: ["node_modules/outsystems-design-tokens/tokens/**/*.json"],
-  platforms: {
-    scss: {
-      transformGroup: "scss",
-      buildPath: './src/foundations/',
-      files: [
-        {
-          destination: "ionic.vars.scss",
-          format: "scssVariablesFormat",
-          options: {
-            fileHeader: `custom-header`,
-          },
-        },
-        {
-          destination: "ionic.utility.scss",
-          format: "cssUtilityClassesFormat",
-          options: {
-            fileHeader: `custom-header`
-          }
-        }
-      ]
-    }
-  }
-};

core/scripts/tokens/index.mjs

@@ -0,0 +1,188 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+// For generating Design Tokens, we use Style Dictionary for several reasons:
+// - It's prepared to easily generate tokens for multiple types of outputs (CSS, SCSS, iOS, Android, documentation, etc.).
+// - It also works very well out of the box with any kind of Design Tokens formats, like Figma Tokens, as well as APIs to adjust to more custom ones.
+// - It is probably the most well-known and widely used Design Tokens tool. It has also been regularly maintained for a long time.
+// - It can easily scale to different necessities we might have in the future.
+import StyleDictionary from 'style-dictionary';
+
+import * as utils from './utils.mjs';
+
+const {
+  generateShadowValue,
+  generateFontSizeValue,
+  generateFontFamilyValue,
+  generateTypographyOutput,
+  generateValue,
+  generateColorUtilityClasses,
+  generateDefaultSpaceUtilityClasses,
+  generateSpaceUtilityClasses,
+  removeConsecutiveRepeatedWords,
+  setVariablePrefixValue,
+  setClassesAndScssPrefixValue: setClassesPrefixValue,
+  generateRadiusUtilityClasses,
+  generateBorderUtilityClasses,
+  generateFontUtilityClasses,
+  generateShadowUtilityClasses,
+  generateUtilityClasses
+} = utils;
+
+const customHeader = `// Do not edit directly, this file was auto-generated.`;
+// Set the prefix for classes
+setClassesPrefixValue('ion');
+// Set the prefix for variables
+setVariablePrefixValue('token');
+
+// SCSS variables format
+StyleDictionary.registerFormat({
+  name: 'scssVariablesFormat',
+  format: function ({ dictionary }) { // Use 'format' for Style Dictionary v3
+    console.log('Generating SCSS variables...');
+
+    const primitiveProperties = dictionary.allTokens.filter((prop) => prop.path[0] === 'primitives');
+    const scaleProperties = dictionary.allTokens.filter((prop) => prop.path[0] === 'scale');
+    const borderProperties = dictionary.allTokens.filter((prop) => prop.path[0] === 'border');
+    const semanticsProperties = dictionary.allTokens.filter((prop) => prop.path[0] === 'semantics');
+    const nonPrimitiveScaleBorderSemanticsProperties = dictionary.allTokens.filter(
+      (prop) => !['primitives', 'scale', 'border', 'semantics'].includes(prop.path[0])
+    );
+    const typographyProperties = nonPrimitiveScaleBorderSemanticsProperties.filter((prop) => prop.$type === 'typography');
+    const otherProperties = nonPrimitiveScaleBorderSemanticsProperties.filter((prop) => prop.$type !== 'typography');
+    
+    // Order: primitives → semantics → scale → border → other → typography
+    const sortedProperties = [
+      ...primitiveProperties,
+      ...semanticsProperties,
+      ...scaleProperties,
+      ...borderProperties,
+      ...otherProperties,
+      ...typographyProperties
+    ];
+
+    const prefixedVariables = sortedProperties.map((prop) => {
+      // Remove consecutive repeated words from the token name, like border-border-color
+      const propName = removeConsecutiveRepeatedWords(prop.name);
+
+      switch (prop.$type) {
+        case 'boxShadow':
+          return generateShadowValue(prop, propName);
+        case 'fontFamilies':
+          return generateFontFamilyValue(prop, propName, 'scss');
+        case 'fontSizes':
+          return generateFontSizeValue(prop, propName, 'scss');
+        case 'typography':
+          return generateTypographyOutput(prop, propName, true);
+        default:
+          return generateValue(prop, propName);
+      }
+    });
+
+    // In v3, the header is added automatically by Style Dictionary.
+    // The format function should only return the file content.
+    return [
+      customHeader + '\n\n',
+      '@use "../themes/functions.sizes" as font;\n',
+      prefixedVariables.join('\n') + '\n',
+    ].join('');
+  },
+});
+
+// Create utility-classes
+StyleDictionary.registerFormat({
+  name: 'cssUtilityClassesFormat',
+  format: function ({ dictionary }) { // Use 'format' for Style Dictionary v3
+    console.log('Generating Utility-Classes...');
+
+    // Arrays to store specific utility classes
+    const typographyUtilityClasses = [];
+    const otherUtilityClasses = [];
+
+    // Generate utility classes for each token
+    dictionary.allTokens.map((prop) => {
+      const tokenCategory = prop.attributes.category;
+
+      if (prop.$type === 'fontFamilies' || tokenCategory === 'scale' || tokenCategory === 'backdrop') {
+        // Not creating for the tokens below, as they make no sense to exist as utility-classes.
+        return;
+      }
+
+      // Remove consecutive repeated words from the token name, like border-border-color
+      const propName = removeConsecutiveRepeatedWords(prop.name);
+
+      if (prop.$type === 'typography') {
+        // Typography tokens are handled differently, as each might have a different tokenType
+        return typographyUtilityClasses.push(generateTypographyOutput(prop, propName, false));
+      } else if (tokenCategory.startsWith('round') || tokenCategory.startsWith('rectangular') || tokenCategory.startsWith('soft')) {
+        // Generate utility classes for border-radius shape tokens, as they have their own token json file, based on primitive tokens
+        return otherUtilityClasses.push(generateRadiusUtilityClasses(propName));
+      }
+
+      let utilityClass = '';
+      switch (tokenCategory) {
+        case 'color':
+        case 'primitives':
+        case 'semantics':
+        case 'text':
+        case 'bg':
+        case 'icon':
+        case 'state':
+          utilityClass = generateColorUtilityClasses(prop, propName);
+          break;
+        case 'border':
+          utilityClass = generateBorderUtilityClasses(prop, propName);
+          break;
+        case 'font':
+          utilityClass = generateFontUtilityClasses(prop, propName);
+          break;
+        case 'space':
+          utilityClass = generateSpaceUtilityClasses(prop, propName);
+          break;
+        case 'shadow':
+        case 'elevation':
+          utilityClass = generateShadowUtilityClasses(propName);
+          break;
+        default:
+          utilityClass = generateUtilityClasses(tokenCategory, propName);
+      }
+
+      return otherUtilityClasses.push(utilityClass);
+    });
+
+    const defaultSpaceUtilityClasses = generateDefaultSpaceUtilityClasses();
+    otherUtilityClasses.push(defaultSpaceUtilityClasses);
+
+    // Concatenate typography utility classes at the beginning
+    const finalOutput = typographyUtilityClasses.concat(otherUtilityClasses).join('\n');
+
+    // In v3, the header is added automatically by Style Dictionary.
+    // The format function should only return the file content.
+    return [
+      customHeader + '\n\n',
+      '@import "./ionic.vars";\n@import "../themes/mixins";\n',
+      finalOutput,
+    ].join('');
+  },
+});
+
+// APPLY THE CONFIGURATION
+const config = {
+  source: ["node_modules/outsystems-design-tokens/tokens/**/*.json"],
+  platforms: {
+    scss: {
+      transformGroup: "scss",
+      buildPath: './src/foundations/',
+      files: [
+        {
+          destination: "ionic.vars.scss",
+          format: "scssVariablesFormat",
+        },
+        {
+          destination: "ionic.utility.scss",
+          format: "cssUtilityClassesFormat",
+        }
+      ]
+    }
+  }
+};
+
+export default config;

core/scripts/tokens/utils.js

@@ -1,322 +0,0 @@
-let variablesPrefix; // Variable that holds the prefix used on all css and scss variables generated
-
-// Set the variable prefix value
-function setPrefixValue(prefix) {
-  variablesPrefix = prefix;
-  return variablesPrefix;
-}
-
-// Generates a valid rgba() color
-function getRgbaValue(propValue) {
-  // Check if its rgba color
-  const isRgba = hexToRgba(propValue);
-  // If it is, then compose rgba() color, otherwise use the normal color
-  if (isRgba !== null) {
-    return (propValue = `rgba(${isRgba.r}, ${isRgba.g}, ${isRgba.b},${isRgba.a})`);
-  } else {
-    return propValue;
-  }
-}
-
-// Translates an hex color value to rgb
-function hexToRgb(hex) {
-  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
-  return result
-    ? {
-        r: parseInt(result[1], 16),
-        g: parseInt(result[2], 16),
-        b: parseInt(result[3], 16),
-      }
-    : null;
-}
-
-// Translates an hex color value to rgba
-function hexToRgba(hex) {
-  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
-  return result
-    ? {
-        r: parseInt(result[1], 16),
-        g: parseInt(result[2], 16),
-        b: parseInt(result[3], 16),
-        a: Math.round((parseInt(result[4], 16) * 100) / 255) / 100,
-      }
-    : null;
-}
-
-// Utility function to remove consecutive repeated words
-function removeConsecutiveRepeatedWords(str) {
-    return str.replace(/(\b\w+\b)(-\1)+/g, '$1');
-}
-
-// Generates a reference variable for an alias token type
-// (e.g., $ion-border-default: var(--ion-border-default, #d5d5d5) → $ion-border-default: var(--ion-border-default, $ion-primitives-neutral-400))
-function getAliasReferenceVariable(prop) {
-  if (typeof prop.$value === 'string' && prop.$value.startsWith('{') && prop.$value.endsWith('}')) {
-    // Remove curly braces and replace dots with dashes
-    let ref = prop.$value.slice(1, -1).replace(/\./g, '-');
-    // Remove consecutive repeated words (e.g., border-border-radius-0 → border-radius-0)
-    ref = removeConsecutiveRepeatedWords(ref);
-    return `$${variablesPrefix}-${ref}`;
-  }
-  return null;
-}
-
-// Generates a valid box-shadow value from a shadow Design Token structure
-function generateShadowValue(prop, propName) {
-  const cssShadow = prop.$value.map(shadow => {
-    // Assuming shadow is an object with properties like offsetX, offsetY, blurRadius, spreadRadius, color
-    const color = getRgbaValue(shadow.color);
-    return `${shadow.x}px ${shadow.y}px ${shadow.blur}px ${shadow.spread}px ${color}`;
-}).join(', ');
-
-  return `$${variablesPrefix}-${propName}: var(--${variablesPrefix}-${propName}, ${cssShadow});`;
-}
-
-// Generates a valid font-size value from a font-size Design Token structure, while transforming the pixels to rem
-function generateFontSizeValue(prop, propName, variableType = 'css') {
-  return variableType === 'scss'
-    ? `$${variablesPrefix}-${propName}: var(--${variablesPrefix}-${propName}, font.px-to-rem(${parseInt(
-        prop.$value
-      )}));`
-    : `--${propName}: #{font.px-to-rem(${parseInt(prop.$value)})};`;
-}
-
-// Generates a valid font-family value from a font-family Design Token structure
-function generateFontFamilyValue(prop, propName, variableType = 'css') {
-  // Remove the last word from the token, as it contains the name of the font, which we don't want to be included on the generated variables
-  const _propName = propName.split('-').slice(0, -1).join('-');
-
-  return variableType === 'scss'
-    ? `$${variablesPrefix}-${_propName}: var(--${variablesPrefix}-${_propName}, "${prop.$value}", sans-serif);`
-    : `--${variablesPrefix}-${_propName}: "${prop.$value}", sans-serif;`;
-}
-
-// Generates a final value, based if the Design Token is of type color or not
-function generateValue(prop, propName) {
-  // Use the original value to detect aliases
-  const aliasVar = getAliasReferenceVariable({ $value: prop.original.$value });
-
-  // Always generate the main variable
-  let mainValue;
-  if (aliasVar) {
-    mainValue = `$${variablesPrefix}-${propName}: var(--${variablesPrefix}-${propName}, ${aliasVar});`;
-  } else {
-    mainValue = `$${variablesPrefix}-${propName}: var(--${variablesPrefix}-${propName}, ${prop.$value});`;
-  }
-
-  // Always generate the -rgb variable if it's a color
-  const rgb = hexToRgb(prop.$value);
-  let rgbDeclaration = '';
-  if (rgb) {
-    rgbDeclaration = `\n$${variablesPrefix}-${propName}-rgb: var(--${variablesPrefix}-${propName}-rgb, ${rgb.r}, ${rgb.g}, ${rgb.b});`;
-  }
-
-  return `${mainValue}${rgbDeclaration}`;
-}
-
-// Generates a typography based css utility-class or scss variable from a typography token structure
-function generateTypographyOutput(prop, propName, isVariable) {
-  const typography = prop.original.$value;
-
-  // Extract the part after the last dot and trim any extraneous characters
-  const extractLastPart = (str) => str.split('.').pop().replace(/[^\w-]/g, '');
-
-  const _initialWrapper = isVariable ? ': (' : ` {`;
-  const _endWrapper = isVariable ? ')' : `}`;
-  const _prefix = isVariable ? '$' : `.`;
-  const _endChar = isVariable ? ',' : ';';
-
-  // This exact format is needed so that it compiles the tokens with the expected lint rules
-  return `
-  ${_prefix}${variablesPrefix}-${propName}${_initialWrapper}
-    font-size: $${variablesPrefix}-font-size-${extractLastPart(typography.fontSize)}${_endChar}
-    font-style: ${prop.attributes.item?.toLowerCase() === 'italic' ? 'italic' : 'normal'}${_endChar}
-    font-weight: $${variablesPrefix}-font-weight-${extractLastPart(typography.fontWeight)}${_endChar}
-    letter-spacing: $${variablesPrefix}-font-letter-spacing-${extractLastPart(typography.letterSpacing) || 0}${_endChar}
-    line-height: $${variablesPrefix}-font-line-height-${extractLastPart(typography.lineHeight)}${_endChar}
-    text-transform: ${typography.textCase}${_endChar}
-    text-decoration: ${typography.textDecoration}${_endChar}
-  ${_endWrapper};
-  `;
-}
-
-// 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}`;
-}
-
-// Generates margin and padding utility classes to match the token-agnostic
-// utilities provided by the Ionic Framework
-function generateDefaultSpaceUtilityClasses() {
-  const zeroMarginPaddingToken = 'space-0';
-  const defaultMarginPaddingToken = 'space-400';
-
-  const marginPaddingTemplate = (type) => `
-.${variablesPrefix}-no-${type} {
-  --${type}-top: #{$${variablesPrefix}-${zeroMarginPaddingToken}};
-  --${type}-end: #{$${variablesPrefix}-${zeroMarginPaddingToken}};
-  --${type}-bottom: #{$${variablesPrefix}-${zeroMarginPaddingToken}};
-  --${type}-start: #{$${variablesPrefix}-${zeroMarginPaddingToken}};
-
-  @include ${type}($${variablesPrefix}-${zeroMarginPaddingToken});
-};
-
-.${variablesPrefix}-${type} {
-  --${type}-top: #{$${variablesPrefix}-${defaultMarginPaddingToken}};
-  --${type}-end: #{$${variablesPrefix}-${defaultMarginPaddingToken}};
-  --${type}-bottom: #{$${variablesPrefix}-${defaultMarginPaddingToken}};
-  --${type}-start: #{$${variablesPrefix}-${defaultMarginPaddingToken}};
-
-  @include ${type}($${variablesPrefix}-${defaultMarginPaddingToken});
-};
-
-.${variablesPrefix}-${type}-top {
-  --${type}-top: #{$${variablesPrefix}-${defaultMarginPaddingToken}};
-
-  @include ${type}($${variablesPrefix}-${defaultMarginPaddingToken}, null, null, null);
-};
-
-.${variablesPrefix}-${type}-end {
-  --${type}-end: #{$${variablesPrefix}-${defaultMarginPaddingToken}};
-
-  @include ${type}(null, $${variablesPrefix}-${defaultMarginPaddingToken}, null, null);
-};
-
-.${variablesPrefix}-${type}-bottom {
-  --${type}-bottom: #{$${variablesPrefix}-${defaultMarginPaddingToken}};
-
-  @include ${type}(null, null, $${variablesPrefix}-${defaultMarginPaddingToken}, null);
-};
-
-.${variablesPrefix}-${type}-start {
-  --${type}-start: #{$${variablesPrefix}-${defaultMarginPaddingToken}};
-
-  @include ${type}(null, null, null, $${variablesPrefix}-${defaultMarginPaddingToken});
-};
-
-.${variablesPrefix}-${type}-vertical {
-  --${type}-top: #{$${variablesPrefix}-${defaultMarginPaddingToken}};
-  --${type}-bottom: #{$${variablesPrefix}-${defaultMarginPaddingToken}};
-
-  @include ${type}($${variablesPrefix}-${defaultMarginPaddingToken}, null, $${variablesPrefix}-${defaultMarginPaddingToken}, null);
-};
-
-.${variablesPrefix}-${type}-horizontal {
-  --${type}-start: #{$${variablesPrefix}-${defaultMarginPaddingToken}};
-  --${type}-end: #{$${variablesPrefix}-${defaultMarginPaddingToken}};
-
-  @include ${type}(null, $${variablesPrefix}-${defaultMarginPaddingToken}, null, $${variablesPrefix}-${defaultMarginPaddingToken});
-};
-`;
-
-  return `${marginPaddingTemplate('margin')}\n${marginPaddingTemplate('padding')}`;
-}
-
-// Generates a margin or padding based css utility-class from a space Design Token structure
-function generateSpaceUtilityClasses(prop, className) {
-  // This exact format is needed so that it compiles the tokens with the expected lint rules
-  // It will generate classes for margin and padding, for equal sizing on all side and each direction
-  const marginPaddingTemplate = (type) => `
-.${variablesPrefix}-${type}-${className} {
-  --${type}-top: #{$${variablesPrefix}-${prop.name}};
-  --${type}-end: #{$${variablesPrefix}-${prop.name}};
-  --${type}-bottom: #{$${variablesPrefix}-${prop.name}};
-  --${type}-start: #{$${variablesPrefix}-${prop.name}};
-
-  @include ${type}($${variablesPrefix}-${prop.name});
-};
-
-.${variablesPrefix}-${type}-top-${className} {
-  --${type}-top: #{$${variablesPrefix}-${prop.name}};
-
-  @include ${type}($${variablesPrefix}-${prop.name}, null, null, null);
-};
-
-.${variablesPrefix}-${type}-end-${className} {
-  --${type}-end: #{$${variablesPrefix}-${prop.name}};
-
-  @include ${type}(null, $${variablesPrefix}-${prop.name}, null, null);
-};
-
-.${variablesPrefix}-${type}-bottom-${className} {
-  --${type}-bottom: #{$${variablesPrefix}-${prop.name}};
-
-  @include ${type}(null, null, $${variablesPrefix}-${prop.name}, null);
-};
-
-.${variablesPrefix}-${type}-start-${className} {
-  --${type}-start: #{$${variablesPrefix}-${prop.name}};
-
-  @include ${type}(null, null, null, $${variablesPrefix}-${prop.name});
-};
-`;
-
-  // Add gap utility classes for gap tokens
-  const generateGapUtilityClasses = () =>`
-.${variablesPrefix}-gap-${prop.name} { 
-  gap: #{$${variablesPrefix}-${prop.name}}; 
-};
-`;
-
-  return `${generateGapUtilityClasses()}\n${marginPaddingTemplate('margin')}\n${marginPaddingTemplate('padding')}`;
-}
-
-// Generates a valid box-shadow value from a shadow Design Token structure
-function generateRadiusUtilityClasses(propName) {
-  return `.${variablesPrefix}-${propName} {\n  border-radius: $${variablesPrefix}-${propName};\n}`;
-}
-
-// Generates a border based css utility-class from a font Design Token structure
-function generateBorderUtilityClasses(prop, propName) {
-  let attribute;
-
-  switch (prop.attributes.type) {
-    case 'border-radius':
-    case 'border-style':
-      attribute = prop.attributes.type;
-      break;
-    case 'border-size':
-      attribute = 'border-width';
-      break;
-    default:
-      attribute = 'border-color';
-  }
-  return `.${variablesPrefix}-${propName} {\n  ${attribute}: $${variablesPrefix}-${propName};\n}`;
-}
-
-// Generates a font based css utility-class from a font Design Token structure
-function generateFontUtilityClasses(prop, propName) {
-  return `.${variablesPrefix}-${propName} {\n  ${prop.attributes.type}: $${variablesPrefix}-${propName};\n}`;
-}
-
-// Generates a valid box-shadow value from a shadow Design Token structure
-function generateShadowUtilityClasses(propName) {
-  return `.${variablesPrefix}-${propName} {\n  box-shadow: $${variablesPrefix}-${propName};\n}`;
-}
-
-// Generates a utility class for a given token category and name
-function generateUtilityClasses(tokenCategory, propName){
-  return `.${variablesPrefix}-${propName} {\n  ${tokenCategory}: $${variablesPrefix}-${propName};\n}`;
-}
-
-module.exports = {
-    getRgbaValue,
-    hexToRgb,
-    generateShadowValue,
-    generateFontSizeValue,
-    generateFontFamilyValue,
-    generateTypographyOutput,
-    generateValue,
-    getAliasReferenceVariable,
-    setPrefixValue,
-    generateRadiusUtilityClasses,
-    generateColorUtilityClasses,
-    generateDefaultSpaceUtilityClasses,
-    generateSpaceUtilityClasses,
-    removeConsecutiveRepeatedWords,
-    generateBorderUtilityClasses,
-    generateFontUtilityClasses,
-    generateShadowUtilityClasses,
-    generateUtilityClasses
-};

core/scripts/tokens/utils.mjs

@@ -0,0 +1,320 @@
+let variablesPrefix; // Variable that holds the prefix used on all css variables generated
+let classAndScssPrefix; // Variable that holds the prefix used on all css utility-classes and scss variables generated  
+
+// Set the variable prefix value
+export function setVariablePrefixValue(prefix) {
+  variablesPrefix = prefix;
+  return variablesPrefix;
+}
+
+export function setClassesAndScssPrefixValue(prefix) {
+  classAndScssPrefix = prefix;
+  return classAndScssPrefix;
+}
+
+// Generates a valid rgba() color
+export function getRgbaValue(propValue) {
+  // Check if its rgba color
+  const isRgba = hexToRgba(propValue);
+  // If it is, then compose rgba() color, otherwise use the normal color
+  if (isRgba !== null) {
+    return (propValue = `rgba(${isRgba.r}, ${isRgba.g}, ${isRgba.b},${isRgba.a})`);
+  } else {
+    return propValue;
+  }
+}
+
+// Translates an hex color value to rgb
+export function hexToRgb(hex) {
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  return result
+    ? {
+        r: parseInt(result[1], 16),
+        g: parseInt(result[2], 16),
+        b: parseInt(result[3], 16),
+      }
+    : null;
+}
+
+// Translates an hex color value to rgba
+function hexToRgba(hex) {
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  return result
+    ? {
+        r: parseInt(result[1], 16),
+        g: parseInt(result[2], 16),
+        b: parseInt(result[3], 16),
+        a: Math.round((parseInt(result[4], 16) * 100) / 255) / 100,
+      }
+    : null;
+}
+
+// Utility function to remove consecutive repeated words
+export function removeConsecutiveRepeatedWords(str) {
+    return str.replace(/(\b\w+\b)(-\1)+/g, '$1');
+}
+
+// Generates a reference variable for an alias token type
+// (e.g., $ion-border-default: var(--ion-border-default, #d5d5d5) → $ion-border-default: var(--ion-border-default, $ion-primitives-neutral-400))
+export function getAliasReferenceVariable(prop) {
+  if (typeof prop.$value === 'string' && prop.$value.startsWith('{') && prop.$value.endsWith('}')) {
+    // Remove curly braces and replace dots with dashes
+    let ref = prop.$value.slice(1, -1).replace(/\./g, '-');
+    // Remove consecutive repeated words (e.g., border-border-radius-0 → border-radius-0)
+    ref = removeConsecutiveRepeatedWords(ref);
+    return `$${classAndScssPrefix}-${ref}`;
+  }
+  return null;
+}
+
+// Generates a valid box-shadow value from a shadow Design Token structure
+export function generateShadowValue(prop, propName) {
+  const cssShadow = prop.$value.map(shadow => {
+    // Assuming shadow is an object with properties like offsetX, offsetY, blurRadius, spreadRadius, color
+    const color = getRgbaValue(shadow.color);
+    return `${shadow.x}px ${shadow.y}px ${shadow.blur}px ${shadow.spread}px ${color}`;
+}).join(', ');
+
+  return `$${classAndScssPrefix}-${propName}: var(--${variablesPrefix}-${propName}, ${cssShadow});`;
+}
+
+// Generates a valid font-size value from a font-size Design Token structure, while transforming the pixels to rem
+export function generateFontSizeValue(prop, propName, variableType = 'css') {
+  return variableType === 'scss'
+    ? `$${classAndScssPrefix}-${propName}: var(--${variablesPrefix}-${propName}, font.px-to-rem(${parseInt(
+        prop.$value
+      )}));`
+    : `--${propName}: #{font.px-to-rem(${parseInt(prop.$value)})};`;
+}
+
+// Generates a valid font-family value from a font-family Design Token structure
+export function generateFontFamilyValue(prop, propName, variableType = 'css') {
+  // Remove the last word from the token, as it contains the name of the font, which we don't want to be included on the generated variables
+  const _propName = propName.split('-').slice(0, -1).join('-');
+
+  return variableType === 'scss'
+    ? `$${classAndScssPrefix}-${_propName}: var(--${variablesPrefix}-${_propName}, ${prop.$value});`
+    : `--${variablesPrefix}-${_propName}: ${prop.$value};`;
+}
+
+// Generates a final value, based if the Design Token is of type color or not
+export function generateValue(prop, propName) {
+  // Use the original value to detect aliases
+  const aliasVar = getAliasReferenceVariable({ $value: prop.original.$value });
+
+  // Always generate the main variable
+  let mainValue;
+  if (aliasVar) {
+    mainValue = `$${classAndScssPrefix}-${propName}: var(--${variablesPrefix}-${propName}, ${aliasVar});`;
+  } else {
+    mainValue = `$${classAndScssPrefix}-${propName}: var(--${variablesPrefix}-${propName}, ${prop.$value});`;
+  }
+
+  // Always generate the -rgb variable if it's a color
+  const rgb = hexToRgb(prop.$value);
+  let rgbDeclaration = '';
+  if (rgb) {
+    rgbDeclaration = `\n$${classAndScssPrefix}-${propName}-rgb: var(--${variablesPrefix}-${propName}-rgb, ${rgb.r}, ${rgb.g}, ${rgb.b});`;
+  }
+
+  return `${mainValue}${rgbDeclaration}`;
+}
+
+// Generates a typography based css utility-class or scss variable from a typography token structure
+export function generateTypographyOutput(prop, propName, isVariable) {
+  const typography = prop.original.$value;
+
+  // Extract the part after the last dot and trim any extraneous characters
+  const extractLastPart = (str) => str.split('.').pop().replace(/[^\w-]/g, '');
+
+  const _initialWrapper = isVariable ? ': (' : ` {`;
+  const _endWrapper = isVariable ? ')' : `}`;
+  const _prefix = isVariable ? '$' : `.`;
+  const _endChar = isVariable ? ',' : ';';
+
+  // This exact format is needed so that it compiles the tokens with the expected lint rules
+  return `
+  ${_prefix}${classAndScssPrefix}-${propName}${_initialWrapper}
+    font-size: $${classAndScssPrefix}-font-size-${extractLastPart(typography.fontSize)}${_endChar}
+    font-style: ${prop.attributes.item?.toLowerCase() === 'italic' ? 'italic' : 'normal'}${_endChar}
+    font-weight: $${classAndScssPrefix}-font-weight-${extractLastPart(typography.fontWeight)}${_endChar}
+    letter-spacing: $${classAndScssPrefix}-font-letter-spacing-${extractLastPart(typography.letterSpacing) || 0}${_endChar}
+    line-height: $${classAndScssPrefix}-font-line-height-${extractLastPart(typography.lineHeight)}${_endChar}
+    text-transform: ${typography.textCase}${_endChar}
+    text-decoration: ${typography.textDecoration}${_endChar}
+  ${_endWrapper};
+  `;
+}
+
+// Generates a color based css utility-class from a color Design Token structure
+export function generateColorUtilityClasses(prop, className) {
+  const isBg = className.includes('bg');
+  const cssProp = isBg ? 'background-color' : 'color';
+  return `.${classAndScssPrefix}-${className} {
+  --${cssProp}: #{$${classAndScssPrefix}-${prop.name}};
+  ${cssProp}: $${classAndScssPrefix}-${prop.name};
+}`;
+}
+
+// Generates margin and padding utility classes to match the token-agnostic
+// utilities provided by the Ionic Framework
+export function generateDefaultSpaceUtilityClasses() {
+  const zeroMarginPaddingToken = 'space-0';
+  const defaultMarginPaddingToken = 'space-400';
+
+  const marginPaddingTemplate = (type) => `
+.${classAndScssPrefix}-no-${type} {
+  --${type}-top: #{$${classAndScssPrefix}-${zeroMarginPaddingToken}};
+  --${type}-end: #{$${classAndScssPrefix}-${zeroMarginPaddingToken}};
+  --${type}-bottom: #{$${classAndScssPrefix}-${zeroMarginPaddingToken}};
+  --${type}-start: #{$${classAndScssPrefix}-${zeroMarginPaddingToken}};
+
+  @include ${type}($${classAndScssPrefix}-${zeroMarginPaddingToken});
+};
+
+.${classAndScssPrefix}-${type} {
+  --${type}-top: #{$${classAndScssPrefix}-${defaultMarginPaddingToken}};
+  --${type}-end: #{$${classAndScssPrefix}-${defaultMarginPaddingToken}};
+  --${type}-bottom: #{$${classAndScssPrefix}-${defaultMarginPaddingToken}};
+  --${type}-start: #{$${classAndScssPrefix}-${defaultMarginPaddingToken}};
+
+  @include ${type}($${classAndScssPrefix}-${defaultMarginPaddingToken});
+};
+
+.${classAndScssPrefix}-${type}-top {
+  --${type}-top: #{$${classAndScssPrefix}-${defaultMarginPaddingToken}};
+
+  @include ${type}($${classAndScssPrefix}-${defaultMarginPaddingToken}, null, null, null);
+};
+
+.${classAndScssPrefix}-${type}-end {
+  --${type}-end: #{$${classAndScssPrefix}-${defaultMarginPaddingToken}};
+
+  @include ${type}(null, $${classAndScssPrefix}-${defaultMarginPaddingToken}, null, null);
+};
+
+.${classAndScssPrefix}-${type}-bottom {
+  --${type}-bottom: #{$${classAndScssPrefix}-${defaultMarginPaddingToken}};
+
+  @include ${type}(null, null, $${classAndScssPrefix}-${defaultMarginPaddingToken}, null);
+};
+
+.${classAndScssPrefix}-${type}-start {
+  --${type}-start: #{$${classAndScssPrefix}-${defaultMarginPaddingToken}};
+
+  @include ${type}(null, null, null, $${classAndScssPrefix}-${defaultMarginPaddingToken});
+};
+
+.${classAndScssPrefix}-${type}-vertical {
+  --${type}-top: #{$${classAndScssPrefix}-${defaultMarginPaddingToken}};
+  --${type}-bottom: #{$${classAndScssPrefix}-${defaultMarginPaddingToken}};
+
+  @include ${type}($${classAndScssPrefix}-${defaultMarginPaddingToken}, null, $${classAndScssPrefix}-${defaultMarginPaddingToken}, null);
+};
+
+.${classAndScssPrefix}-${type}-horizontal {
+  --${type}-start: #{$${classAndScssPrefix}-${defaultMarginPaddingToken}};
+  --${type}-end: #{$${classAndScssPrefix}-${defaultMarginPaddingToken}};
+
+  @include ${type}(null, $${classAndScssPrefix}-${defaultMarginPaddingToken}, null, $${classAndScssPrefix}-${defaultMarginPaddingToken});
+};
+`;
+
+  return `${marginPaddingTemplate('margin')}\n${marginPaddingTemplate('padding')}`;
+}
+
+// Generates a margin or padding based css utility-class from a space Design Token structure
+export function generateSpaceUtilityClasses(prop, className) {
+  // This exact format is needed so that it compiles the tokens with the expected lint rules
+  // It will generate classes for margin and padding, for equal sizing on all side and each direction
+  const marginPaddingTemplate = (type) => `
+.${classAndScssPrefix}-${type}-${className} {
+  --${type}-top: #{$${classAndScssPrefix}-${prop.name}};
+  --${type}-end: #{$${classAndScssPrefix}-${prop.name}};
+  --${type}-bottom: #{$${classAndScssPrefix}-${prop.name}};
+  --${type}-start: #{$${classAndScssPrefix}-${prop.name}};
+
+  @include ${type}($${classAndScssPrefix}-${prop.name});
+};
+
+.${classAndScssPrefix}-${type}-top-${className} {
+  --${type}-top: #{$${classAndScssPrefix}-${prop.name}};
+
+  @include ${type}($${classAndScssPrefix}-${prop.name}, null, null, null);
+};
+
+.${classAndScssPrefix}-${type}-end-${className} {
+  --${type}-end: #{$${classAndScssPrefix}-${prop.name}};
+
+  @include ${type}(null, $${classAndScssPrefix}-${prop.name}, null, null);
+};
+
+.${classAndScssPrefix}-${type}-bottom-${className} {
+  --${type}-bottom: #{$${classAndScssPrefix}-${prop.name}};
+
+  @include ${type}(null, null, $${classAndScssPrefix}-${prop.name}, null);
+};
+
+.${classAndScssPrefix}-${type}-start-${className} {
+  --${type}-start: #{$${classAndScssPrefix}-${prop.name}};
+
+  @include ${type}(null, null, null, $${classAndScssPrefix}-${prop.name});
+};
+`;
+
+  // Add gap utility classes for gap tokens
+  const generateGapUtilityClasses = () =>`
+.${classAndScssPrefix}-gap-${prop.name} { 
+  gap: #{$${classAndScssPrefix}-${prop.name}}; 
+};
+`;
+
+  return `${generateGapUtilityClasses()}\n${marginPaddingTemplate('margin')}\n${marginPaddingTemplate('padding')}`;
+}
+
+// Generates a valid box-shadow value from a shadow Design Token structure
+export function generateRadiusUtilityClasses(propName) {
+  return `.${classAndScssPrefix}-${propName} {
+  --border-radius: #{$${classAndScssPrefix}-${propName}};
+  border-radius: $${classAndScssPrefix}-${propName};
+}`;
+}
+
+// Generates a border based css utility-class from a font Design Token structure
+export function generateBorderUtilityClasses(prop, propName) {
+  let attribute;
+
+  switch (prop.attributes.type) {
+    case 'border-radius':
+    case 'border-style':
+      attribute = prop.attributes.type;
+      break;
+    case 'border-size':
+      attribute = 'border-width';
+      break;
+    default:
+      attribute = 'border-color';
+  }
+  return `.${classAndScssPrefix}-${propName} {
+  --${attribute}: #{$${classAndScssPrefix}-${propName}};
+  ${attribute}: $${classAndScssPrefix}-${propName};
+}`;
+}
+
+// Generates a font based css utility-class from a font Design Token structure
+export function generateFontUtilityClasses(prop, propName) {
+  return `.${classAndScssPrefix}-${propName} {\n  ${prop.attributes.type}: $${classAndScssPrefix}-${propName};\n}`;
+}
+
+// Generates a valid box-shadow value from a shadow Design Token structure
+export function generateShadowUtilityClasses(propName) {
+  return `.${classAndScssPrefix}-${propName} {
+  --box-shadow: #{$${classAndScssPrefix}-${propName}};
+  box-shadow: $${classAndScssPrefix}-${propName};
+}`;
+}
+
+// Generates a utility class for a given token category and name
+export function generateUtilityClasses(tokenCategory, propName){
+  return `.${classAndScssPrefix}-${propName} {\n  ${tokenCategory}: $${classAndScssPrefix}-${propName};\n}`;
+}

core/src/components.d.ts

@@ -30,7 +30,7 @@ import { PopoverSize, PositionAlign, PositionReference, PositionSide, TriggerAct
 import { RadioGroupChangeEventDetail, RadioGroupCompareFn } from "./components/radio-group/radio-group-interface";
 import { PinFormatter, RangeChangeEventDetail, RangeKnobMoveEndEventDetail, RangeKnobMoveStartEventDetail, RangeValue } from "./components/range/range-interface";
 import { RefresherEventDetail } from "./components/refresher/refresher-interface";
-import { ItemReorderEventDetail } from "./components/reorder-group/reorder-group-interface";
+import { ItemReorderEventDetail, ReorderEndEventDetail, ReorderMoveEventDetail } from "./components/reorder-group/reorder-group-interface";
 import { NavigationHookCallback } from "./components/route/route-interface";
 import { SearchbarChangeEventDetail, SearchbarInputEventDetail } from "./components/searchbar/searchbar-interface";
 import { SegmentChangeEventDetail, SegmentValue } from "./components/segment/segment-interface";
@@ -68,7 +68,7 @@ export { PopoverSize, PositionAlign, PositionReference, PositionSide, TriggerAct
 export { RadioGroupChangeEventDetail, RadioGroupCompareFn } from "./components/radio-group/radio-group-interface";
 export { PinFormatter, RangeChangeEventDetail, RangeKnobMoveEndEventDetail, RangeKnobMoveStartEventDetail, RangeValue } from "./components/range/range-interface";
 export { RefresherEventDetail } from "./components/refresher/refresher-interface";
-export { ItemReorderEventDetail } from "./components/reorder-group/reorder-group-interface";
+export { ItemReorderEventDetail, ReorderEndEventDetail, ReorderMoveEventDetail } from "./components/reorder-group/reorder-group-interface";
 export { NavigationHookCallback } from "./components/route/route-interface";
 export { SearchbarChangeEventDetail, SearchbarInputEventDetail } from "./components/searchbar/searchbar-interface";
 export { SegmentChangeEventDetail, SegmentValue } from "./components/segment/segment-interface";
@@ -185,9 +185,9 @@ export namespace Components {
         "cssClass"?: string | string[];
         "delegate"?: FrameworkDelegate;
         /**
-          * Dismiss the action sheet overlay after it has been presented.
+          * 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.
+          * @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"`.
          */
         "dismiss": (data?: any, role?: string) => Promise<boolean>;
         /**
@@ -277,9 +277,9 @@ export namespace Components {
         "cssClass"?: string | string[];
         "delegate"?: FrameworkDelegate;
         /**
-          * Dismiss the alert overlay after it has been presented.
+          * 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.
+          * @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"`.
          */
         "dismiss": (data?: any, role?: string) => Promise<boolean>;
         /**
@@ -363,7 +363,7 @@ export namespace Components {
         "mode"?: "ios" | "md";
         /**
           * 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 event as the focus utility should handle this for us. This method should be used when we want to programmatically focus an element as a result of another user action. (Ex: We focus the first element 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.
          */
         "setFocus": (elements: HTMLElement[]) => Promise<void>;
         /**
@@ -927,52 +927,88 @@ export namespace Components {
           * The amount to offset the column for xs screens, in terms of how many columns it should shift to the end of the total available.
          */
         "offsetXs"?: string;
+        /**
+          * The order of the column, in terms of where the column should position itself in the columns renderer. If no value is passed, the column order implicit value will be the order in the html structure.
+         */
+        "order"?: string;
+        /**
+          * The order of the column for lg screens, in terms of where the column should position itself in the columns renderer. If no value is passed, the column order implicit value will be the order in the html structure.
+         */
+        "orderLg"?: string;
+        /**
+          * The order of the column for md screens, in terms of where the column should position itself in the columns renderer. If no value is passed, the column order implicit value will be the order in the html structure.
+         */
+        "orderMd"?: string;
+        /**
+          * The order of the column for sm screens, in terms of where the column should position itself in the columns renderer. If no value is passed, the column order implicit value will be the order in the html structure.
+         */
+        "orderSm"?: string;
+        /**
+          * The order of the column for xl screens, in terms of where the column should position itself in the columns renderer. If no value is passed, the column order implicit value will be the order in the html structure.
+         */
+        "orderXl"?: string;
+        /**
+          * The order of the column for xs screens, in terms of where the column should position itself in the columns renderer. If no value is passed, the column order implicit value will be the order in the html structure.
+         */
+        "orderXs"?: string;
         /**
           * The amount to pull the column, in terms of how many columns it should shift to the start of the total available.
+          * @deprecated Use the combination of `size` and `order` properties to achieve the same effect.
          */
         "pull"?: string;
         /**
           * The amount to pull the column for lg screens, in terms of how many columns it should shift to the start of the total available.
+          * @deprecated Use the combination of `size` and `order` properties to achieve the same effect.
          */
         "pullLg"?: string;
         /**
           * The amount to pull the column for md screens, in terms of how many columns it should shift to the start of the total available.
+          * @deprecated Use the combination of `size` and `order` properties to achieve the same effect.
          */
         "pullMd"?: string;
         /**
           * The amount to pull the column for sm screens, in terms of how many columns it should shift to the start of the total available.
+          * @deprecated Use the combination of `size` and `order` properties to achieve the same effect.
          */
         "pullSm"?: string;
         /**
           * The amount to pull the column for xl screens, in terms of how many columns it should shift to the start of the total available.
+          * @deprecated Use the combination of `size` and `order` properties to achieve the same effect.
          */
         "pullXl"?: string;
         /**
           * The amount to pull the column for xs screens, in terms of how many columns it should shift to the start of the total available.
+          * @deprecated Use the combination of `size` and `order` properties to achieve the same effect.
          */
         "pullXs"?: string;
         /**
           * The amount to push the column, in terms of how many columns it should shift to the end of the total available.
+          * @deprecated Use the combination of `size` and `order` properties to achieve the same effect.
          */
         "push"?: string;
         /**
           * The amount to push the column for lg screens, in terms of how many columns it should shift to the end of the total available.
+          * @deprecated Use the combination of `size` and `order` properties to achieve the same effect.
          */
         "pushLg"?: string;
         /**
           * The amount to push the column for md screens, in terms of how many columns it should shift to the end of the total available.
+          * @deprecated Use the combination of `size` and `order` properties to achieve the same effect.
          */
         "pushMd"?: string;
         /**
           * The amount to push the column for sm screens, in terms of how many columns it should shift to the end of the total available.
+          * @deprecated Use the combination of `size` and `order` properties to achieve the same effect.
          */
         "pushSm"?: string;
         /**
           * The amount to push the column for xl screens, in terms of how many columns it should shift to the end of the total available.
+          * @deprecated Use the combination of `size` and `order` properties to achieve the same effect.
          */
         "pushXl"?: string;
         /**
           * The amount to push the column for xs screens, in terms of how many columns it should shift to the end of the total available.
+          * @deprecated Use the combination of `size` and `order` properties to achieve the same effect.
          */
         "pushXs"?: string;
         /**
@@ -1082,6 +1118,7 @@ export namespace Components {
     interface IonDatetime {
         /**
           * Emits the ionCancel event and optionally closes the popover or modal that the datetime was presented in.
+          * @param closeOverlay If `true`, closes the parent overlay. Defaults to `false`.
          */
         "cancel": (closeOverlay?: boolean) => Promise<void>;
         /**
@@ -1101,6 +1138,7 @@ export namespace Components {
         "color"?: Color;
         /**
           * Confirms the selected datetime value, updates the `value` property, and optionally closes the popover or modal that the datetime was presented in.
+          * @param closeOverlay If `true`, closes the parent overlay. Defaults to `false`.
          */
         "confirm": (closeOverlay?: boolean) => Promise<void>;
         /**
@@ -1194,6 +1232,7 @@ export namespace Components {
         "readonly": boolean;
         /**
           * Resets the internal state of the datetime but does not update the value. Passing a valid ISO-8601 string will reset the state of the component to the provided date. If no value is provided, the internal state will be reset to the clamped value of the min, max and today.
+          * @param startDate A valid [ISO-8601 string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date#date_time_string_format) to reset the datetime state to.
          */
         "reset": (startDate?: string) => Promise<void>;
         /**
@@ -1460,7 +1499,7 @@ export namespace Components {
          */
         "theme"?: "ios" | "md" | "ionic";
         /**
-          * If `true`, the header will be translucent. Only applies when the theme is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).  Note: In order to scroll content behind the header, the `fullscreen` attribute needs to be set on the content.
+          * If `true`, the header will be translucent. Only applies when the theme is `"ios"` or `"ionic"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).  Note: In order to scroll content behind the header, the `fullscreen` attribute needs to be set on the content.
           * @default false
          */
         "translucent": boolean;
@@ -1502,6 +1541,11 @@ export namespace Components {
           * @default 'bottom'
          */
         "position": 'top' | 'bottom';
+        /**
+          * If `true`, the infinite scroll will preserve the scroll position when the content is re-rendered. This is useful when the content is re-rendered with new keys, and the scroll position should be preserved.
+          * @default false
+         */
+        "preserveRerenderScrollPosition": boolean;
         /**
           * The theme determines the visual appearance of the component.
          */
@@ -2073,9 +2117,9 @@ export namespace Components {
         "cssClass"?: string | string[];
         "delegate"?: FrameworkDelegate;
         /**
-          * Dismiss the loading overlay after it has been presented.
+          * Dismiss the loading 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 loading. This can be useful in a button handler for determining which button was clicked to dismiss the loading. 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.
+          * @param role The role of the element that is dismissing the loading. This can be useful in a button handler for determining which button was clicked to dismiss the loading. Some examples include: `"cancel"`, `"destructive"`, `"selected"`, and `"backdrop"`.
          */
         "dismiss": (data?: any, role?: string) => Promise<boolean>;
         /**
@@ -2156,6 +2200,8 @@ export namespace Components {
     interface IonMenu {
         /**
           * Closes the menu. If the menu is already closed or it can't be closed, it returns `false`.
+          * @param animated If `true`, the menu will animate when closing. If `false`, the menu will close instantly without animation. Defaults to `true`.
+          * @param role The role of the element that is closing the menu. This can be useful in a button handler for determining which button was clicked to close the menu. Some examples include: `"cancel"`, `"destructive"`, `"selected"`, and `"backdrop"`.
          */
         "close": (animated?: boolean, role?: string) => Promise<boolean>;
         /**
@@ -2168,7 +2214,7 @@ export namespace Components {
          */
         "disabled": boolean;
         /**
-          * Returns `true` is the menu is active.  A menu is active when it can be opened or closed, meaning it's enabled and it's not part of a `ion-split-pane`.
+          * Returns `true` if the menu is active.  A menu is active when it can be opened or closed, meaning it's enabled and it's not part of a `ion-split-pane`.
          */
         "isActive": () => Promise<boolean>;
         /**
@@ -2190,10 +2236,14 @@ export namespace Components {
         "mode"?: "ios" | "md";
         /**
           * Opens the menu. If the menu is already open or it can't be opened, it returns `false`.
+          * @param animated If `true`, the menu will animate when opening. If `false`, the menu will open instantly without animation. Defaults to `true`.
          */
         "open": (animated?: boolean) => Promise<boolean>;
         /**
-          * Opens or closes the button. If the operation can't be completed successfully, it returns `false`.
+          * Opens or closes the menu. If the operation can't be completed successfully, it returns `false`.
+          * @param shouldOpen If `true`, the menu will open. If `false`, the menu will close.
+          * @param animated If `true`, the menu will animate when opening/closing. If `false`, the menu will open/close instantly without animation.
+          * @param role The role of the element that is closing the menu.
          */
         "setOpen": (shouldOpen: boolean, animated?: boolean, role?: string) => Promise<boolean>;
         /**
@@ -2212,6 +2262,7 @@ export namespace Components {
         "theme"?: "ios" | "md" | "ionic";
         /**
           * Toggles the menu. If the menu is already open, it will try to close, otherwise it will try to open it. If the operation can't be completed successfully, it returns `false`.
+          * @param animated If `true`, the menu will animate when opening/closing. If `false`, the menu will open/close instantly without animation. Defaults to `true`.
          */
         "toggle": (animated?: boolean) => Promise<boolean>;
         /**
@@ -2310,9 +2361,9 @@ export namespace Components {
         "cssClass"?: string | string[];
         "delegate"?: FrameworkDelegate;
         /**
-          * Dismiss the modal overlay after it has been presented.
+          * Dismiss the modal overlay after it has been presented. This is a no-op if the overlay has not been presented yet. If you want 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 modal. For example, 'cancel' or '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.
+          * @param role The role of the element that is dismissing the modal. For example, `cancel` or `backdrop`.
          */
         "dismiss": (data?: any, role?: string) => Promise<boolean>;
         /**
@@ -2395,7 +2446,8 @@ export namespace Components {
          */
         "presentingElement"?: HTMLElement;
         /**
-          * Move a sheet style modal to a specific breakpoint. The breakpoint value must be a value defined in your `breakpoints` array.
+          * Move a sheet style modal to a specific breakpoint.
+          * @param breakpoint The breakpoint value to move the sheet modal to. Must be a value defined in your `breakpoints` array.
          */
         "setCurrentBreakpoint": (breakpoint: number) => Promise<void>;
         /**
@@ -2804,10 +2856,10 @@ export namespace Components {
         "cssClass"?: string | string[];
         "delegate"?: FrameworkDelegate;
         /**
-          * Dismiss the popover overlay after it has been presented.
+          * Dismiss the popover 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 popover. For example, 'cancel' or 'backdrop'.
-          * @param dismissParentPopover If `true`, dismissing this popover will also dismiss a parent popover if this popover is nested. Defaults to `true`.  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 role The role of the element that is dismissing the popover. For example, `cancel` or `backdrop`.
+          * @param dismissParentPopover If `true`, dismissing this popover will also dismiss a parent popover if this popover is nested. Defaults to `true`.
          */
         "dismiss": (data?: any, role?: string, dismissParentPopover?: boolean) => Promise<boolean>;
         /**
@@ -2875,6 +2927,7 @@ export namespace Components {
         "overlayIndex": number;
         /**
           * Present the popover overlay after it has been created. Developers can pass a mouse, touch, or pointer event to position the popover relative to where that event was dispatched.
+          * @param event The event to position the popover relative to.
          */
         "present": (event?: MouseEvent | TouchEvent | PointerEvent | CustomEvent) => Promise<void>;
         /**
@@ -3214,7 +3267,7 @@ export namespace Components {
     }
     interface IonReorderGroup {
         /**
-          * Completes the reorder operation. Must be called by the `ionItemReorder` event.  If a list of items is passed, the list will be reordered and returned in the proper order.  If no parameters are passed or if `true` is passed in, the reorder will complete and the item will remain in the position it was dragged to. If `false` is passed, the reorder will complete and the item will bounce back to its original position.
+          * Completes the reorder operation. Must be called by the `ionReorderEnd` event.  If a list of items is passed, the list will be reordered and returned in the proper order.  If no parameters are passed or if `true` is passed in, the reorder will complete and the item will remain in the position it was dragged to. If `false` is passed, the reorder will complete and the item will bounce back to its original position.
           * @param listOrReorder A list of items to be sorted and returned in the new order or a boolean of whether or not the reorder should reposition the item.
          */
         "complete": (listOrReorder?: boolean | any[]) => Promise<any>;
@@ -3310,6 +3363,7 @@ export namespace Components {
           * Navigate to the specified path.
           * @param path The path to navigate to.
           * @param direction The direction of the animation. Defaults to `"forward"`.
+          * @param animation A custom animation to use for the transition.
          */
         "push": (path: string, direction?: RouterDirection, animation?: AnimationBuilder) => Promise<boolean>;
         /**
@@ -3483,7 +3537,7 @@ export namespace Components {
          */
         "searchIcon"?: string | boolean;
         /**
-          * Sets focus on the native `input` in `ion-searchbar`. Use this method instead of the global `input.focus()`.  Developers who wish to focus an input when a page enters should call `setFocus()` in the `ionViewDidEnter()` lifecycle method.  Developers who wish to focus an input when an overlay is presented should call `setFocus` after `didPresent` has resolved.  See [managing focus](/docs/developing/managing-focus) for more information.
+          * Sets focus on the native `input` in `ion-searchbar`. Use this method instead of the global `input.focus()`. Developers who wish to focus an input when a page enters should call `setFocus()` in the `ionViewDidEnter()` lifecycle method. Developers who wish to focus an input when an overlay is presented should call `setFocus` after `didPresent` has resolved.  See [managing focus](/docs/developing/managing-focus) for more information.
          */
         "setFocus": () => Promise<void>;
         /**
@@ -4202,9 +4256,9 @@ export namespace Components {
         "cssClass"?: string | string[];
         "delegate"?: FrameworkDelegate;
         /**
-          * Dismiss the toast overlay after it has been presented.
+          * Dismiss the toast 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 toast. This can be useful in a button handler for determining which button was clicked to dismiss the toast. 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.
+          * @param role The role of the element that is dismissing the toast. This can be useful in a button handler for determining which button was clicked to dismiss the toast. Some examples include: `"cancel"`, `"destructive"`, `"selected"`, and `"backdrop"`.
          */
         "dismiss": (data?: any, role?: string) => Promise<boolean>;
         /**
@@ -5415,6 +5469,9 @@ declare global {
     };
     interface HTMLIonReorderGroupElementEventMap {
         "ionItemReorder": ItemReorderEventDetail;
+        "ionReorderStart": void;
+        "ionReorderMove": ReorderMoveEventDetail;
+        "ionReorderEnd": ReorderEndEventDetail;
     }
     interface HTMLIonReorderGroupElement extends Components.IonReorderGroup, HTMLStencilElement {
         addEventListener<K extends keyof HTMLIonReorderGroupElementEventMap>(type: K, listener: (this: HTMLIonReorderGroupElement, ev: IonReorderGroupCustomEvent<HTMLIonReorderGroupElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -6840,52 +6897,88 @@ declare namespace LocalJSX {
           * The amount to offset the column for xs screens, in terms of how many columns it should shift to the end of the total available.
          */
         "offsetXs"?: string;
+        /**
+          * The order of the column, in terms of where the column should position itself in the columns renderer. If no value is passed, the column order implicit value will be the order in the html structure.
+         */
+        "order"?: string;
+        /**
+          * The order of the column for lg screens, in terms of where the column should position itself in the columns renderer. If no value is passed, the column order implicit value will be the order in the html structure.
+         */
+        "orderLg"?: string;
+        /**
+          * The order of the column for md screens, in terms of where the column should position itself in the columns renderer. If no value is passed, the column order implicit value will be the order in the html structure.
+         */
+        "orderMd"?: string;
+        /**
+          * The order of the column for sm screens, in terms of where the column should position itself in the columns renderer. If no value is passed, the column order implicit value will be the order in the html structure.
+         */
+        "orderSm"?: string;
+        /**
+          * The order of the column for xl screens, in terms of where the column should position itself in the columns renderer. If no value is passed, the column order implicit value will be the order in the html structure.
+         */
+        "orderXl"?: string;
+        /**
+          * The order of the column for xs screens, in terms of where the column should position itself in the columns renderer. If no value is passed, the column order implicit value will be the order in the html structure.
+         */
+        "orderXs"?: string;
         /**
           * The amount to pull the column, in terms of how many columns it should shift to the start of the total available.
+          * @deprecated Use the combination of `size` and `order` properties to achieve the same effect.
          */
         "pull"?: string;
         /**
           * The amount to pull the column for lg screens, in terms of how many columns it should shift to the start of the total available.
+          * @deprecated Use the combination of `size` and `order` properties to achieve the same effect.
          */
         "pullLg"?: string;
         /**
           * The amount to pull the column for md screens, in terms of how many columns it should shift to the start of the total available.
+          * @deprecated Use the combination of `size` and `order` properties to achieve the same effect.
          */
         "pullMd"?: string;
         /**
           * The amount to pull the column for sm screens, in terms of how many columns it should shift to the start of the total available.
+          * @deprecated Use the combination of `size` and `order` properties to achieve the same effect.
          */
         "pullSm"?: string;
         /**
           * The amount to pull the column for xl screens, in terms of how many columns it should shift to the start of the total available.
+          * @deprecated Use the combination of `size` and `order` properties to achieve the same effect.
          */
         "pullXl"?: string;
         /**
           * The amount to pull the column for xs screens, in terms of how many columns it should shift to the start of the total available.
+          * @deprecated Use the combination of `size` and `order` properties to achieve the same effect.
          */
         "pullXs"?: string;
         /**
           * The amount to push the column, in terms of how many columns it should shift to the end of the total available.
+          * @deprecated Use the combination of `size` and `order` properties to achieve the same effect.
          */
         "push"?: string;
         /**
           * The amount to push the column for lg screens, in terms of how many columns it should shift to the end of the total available.
+          * @deprecated Use the combination of `size` and `order` properties to achieve the same effect.
          */
         "pushLg"?: string;
         /**
           * The amount to push the column for md screens, in terms of how many columns it should shift to the end of the total available.
+          * @deprecated Use the combination of `size` and `order` properties to achieve the same effect.
          */
         "pushMd"?: string;
         /**
           * The amount to push the column for sm screens, in terms of how many columns it should shift to the end of the total available.
+          * @deprecated Use the combination of `size` and `order` properties to achieve the same effect.
          */
         "pushSm"?: string;
         /**
           * The amount to push the column for xl screens, in terms of how many columns it should shift to the end of the total available.
+          * @deprecated Use the combination of `size` and `order` properties to achieve the same effect.
          */
         "pushXl"?: string;
         /**
           * The amount to push the column for xs screens, in terms of how many columns it should shift to the end of the total available.
+          * @deprecated Use the combination of `size` and `order` properties to achieve the same effect.
          */
         "pushXs"?: string;
         /**
@@ -7369,7 +7462,7 @@ declare namespace LocalJSX {
          */
         "theme"?: "ios" | "md" | "ionic";
         /**
-          * If `true`, the header will be translucent. Only applies when the theme is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).  Note: In order to scroll content behind the header, the `fullscreen` attribute needs to be set on the content.
+          * If `true`, the header will be translucent. Only applies when the theme is `"ios"` or `"ionic"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).  Note: In order to scroll content behind the header, the `fullscreen` attribute needs to be set on the content.
           * @default false
          */
         "translucent"?: boolean;
@@ -7423,6 +7516,11 @@ declare namespace LocalJSX {
           * @default 'bottom'
          */
         "position"?: 'top' | 'bottom';
+        /**
+          * If `true`, the infinite scroll will preserve the scroll position when the content is re-rendered. This is useful when the content is re-rendered with new keys, and the scroll position should be preserved.
+          * @default false
+         */
+        "preserveRerenderScrollPosition"?: boolean;
         /**
           * The theme determines the visual appearance of the component.
          */
@@ -9147,9 +9245,22 @@ declare namespace LocalJSX {
          */
         "mode"?: "ios" | "md";
         /**
-          * Event that needs to be listened to in order to complete the reorder action. Once the event has been emitted, the `complete()` method then needs to be called in order to finalize the reorder action.
+          * Event that needs to be listened to in order to complete the reorder action.
+          * @deprecated Use `ionReorderEnd` instead. If you are accessing `event.detail.from` or `event.detail.to` and relying on them being different you should now add checks as they are always emitted in `ionReorderEnd`, even when they are the same.
          */
         "onIonItemReorder"?: (event: IonReorderGroupCustomEvent<ItemReorderEventDetail>) => void;
+        /**
+          * Event that is emitted when the reorder gesture ends. The from and to properties are always available, regardless of if the reorder gesture moved the item. If the item did not change from its start position, the from and to properties will be the same. Once the event has been emitted, the `complete()` method then needs to be called in order to finalize the reorder action.
+         */
+        "onIonReorderEnd"?: (event: IonReorderGroupCustomEvent<ReorderEndEventDetail>) => void;
+        /**
+          * Event that is emitted as the reorder gesture moves.
+         */
+        "onIonReorderMove"?: (event: IonReorderGroupCustomEvent<ReorderMoveEventDetail>) => void;
+        /**
+          * Event that is emitted when the reorder gesture starts.
+         */
+        "onIonReorderStart"?: (event: IonReorderGroupCustomEvent<void>) => void;
         /**
           * The theme determines the visual appearance of the component.
          */

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>