fix(select): revert flaky screenshot

Issue number: resolves 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?
- The Stencil version was previously reverted under #30707 because of
test failures of components form another repo.

## What is the new behavior?
- Update the version again to match what we have in main, since these
tests were fixed.

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

.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,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
@@ -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/assign-issues.yml

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

.github/workflows/build.yml

@@ -22,7 +22,7 @@ jobs:
   build-core:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v5
       - uses: ./.github/workflows/actions/build-core
         with:
           ionicons-version: ${{ inputs.ionicons_npm_release_tag }}
@@ -31,21 +31,21 @@ jobs:
     needs: [build-core]
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v5
       - uses: ./.github/workflows/actions/test-core-clean-build
 
   test-core-lint:
     needs: [build-core]
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v5
       - uses: ./.github/workflows/actions/test-core-lint
 
   test-core-spec:
     needs: [build-core]
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v5
       - uses: ./.github/workflows/actions/test-core-spec
 
   test-core-screenshot:
@@ -62,7 +62,7 @@ jobs:
     needs: [build-core]
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v5
       - uses: ./.github/workflows/actions/test-core-screenshot
         with:
           shard: ${{ matrix.shard }}
@@ -90,14 +90,14 @@ jobs:
     needs: [build-core]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v4
+    - uses: actions/checkout@v5
     - uses: ./.github/workflows/actions/build-vue
 
   build-vue-router:
     needs: [build-vue]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v4
+    - uses: actions/checkout@v5
     - uses: ./.github/workflows/actions/build-vue-router
 
   test-vue-e2e:
@@ -108,7 +108,7 @@ jobs:
     needs: [build-vue, build-vue-router]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v4
+    - uses: actions/checkout@v5
     - uses: ./.github/workflows/actions/test-vue-e2e
       with:
         app: ${{ matrix.apps }}
@@ -126,14 +126,14 @@ 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:
@@ -144,7 +144,7 @@ jobs:
     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

@@ -12,7 +12,7 @@ jobs:
         if: |
           !contains(github.event.pull_request.title, 'release') &&
           !contains(github.event.pull_request.title, 'chore')
-        uses: amannn/action-semantic-pull-request@v5
+        uses: amannn/action-semantic-pull-request@v6
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         with:

.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,14 +136,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-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:
@@ -154,7 +154,7 @@ jobs:
     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,102 @@
 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)
 
 

core/CHANGELOG.md

@@ -3,6 +3,100 @@
 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)
 
 

core/Dockerfile

@@ -1,5 +1,5 @@
 # Get Playwright
-FROM mcr.microsoft.com/playwright:v1.54.1
+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.5",
+  "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,7 +45,7 @@
     "@clack/prompts": "^0.11.0",
     "@ionic/eslint-config": "^0.3.0",
     "@ionic/prettier-config": "^2.0.0",
-    "@playwright/test": "^1.54.1",
+    "@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",
@@ -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,335 +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) {
-  const isBg = className.includes('bg');
-  const cssProp = isBg ? 'background-color' : 'color';
-  return `.${variablesPrefix}-${className} {
-  --${cssProp}: $${variablesPrefix}-${prop.name};
-  ${cssProp}: $${variablesPrefix}-${prop.name};
-}`;
-}
-
-// Generates margin and padding utility classes to match the token-agnostic
-// 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} {
-  --border-radius: $${variablesPrefix}-${propName};
-  border-radius: $${variablesPrefix}-${propName};
-}`;
-}
-
-// 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} {
-  --${attribute}: $${variablesPrefix}-${propName};
-  ${attribute}: $${variablesPrefix}-${propName};
-}`;
-}
-
-// 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} {
-  --box-shadow: $${variablesPrefix}-${propName};
-  box-shadow: $${variablesPrefix}-${propName};
-}`;
-}
-
-// 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";
@@ -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;
         /**
@@ -1505,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.
          */
@@ -3226,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>;
@@ -5428,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;
@@ -6853,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;
         /**
@@ -7436,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.
          */
@@ -9160,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/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;