Added separated variables for size of slots in Toolbar

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?
<!-- Please describe the current behavior that you are modifying. -->
When an icon was placed within a chip, the icon size was the same
regardless of the chip size.

## What is the new behavior?
Scales the size of the icon based on design specifications.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

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


## Other information

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

.github/actions/publish-npm/action.yml

@@ -8,48 +8,53 @@ inputs:
   tag:
     description: 'The tag to publish to on NPM.'
   preid:
-    description: 'The prerelease identifier used when doing a prerelease.'
+    description: "Prerelease identifier such as 'alpha', 'beta', 'rc', or 'next'. Leave blank to skip prerelease tagging."
   working-directory:
     description: 'The directory of the package.'
   folder:
     default: './'
     description: 'A folder containing a package.json file.'
-  token:
-    description: 'The NPM authentication token required to publish.'
+  node-version:
+    description: 'Node.js version to use when publishing.'
+    required: false
+    default: '24.x'
 runs:
   using: 'composite'
   steps:
-    - uses: actions/setup-node@v5
+    - name: 🟢 Configure Node for Publish
+      uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
       with:
-        node-version: 22.x
+        node-version: ${{ inputs.node-version }}
+        registry-url: 'https://registry.npmjs.org'
+        scope: '@ionic'
     # Provenance requires npm 9.5.0+
-    - name: Install latest npm
+    - name: 📦 Install latest npm
       run: npm install -g npm@latest
       shell: bash
     # This ensures the local version of Lerna is installed
     # and that we do not use the global Lerna version
-    - name: Install root dependencies
+    - name: 🕸️ Install root dependencies
       run: npm ci
       shell: bash
-    - name: Install Dependencies
+    - name: 📦 Install Dependencies
       run: npx lerna@5 bootstrap --include-dependencies --scope ${{ inputs.scope }} --ignore-scripts -- --legacy-peer-deps
       shell: bash
       working-directory: ${{ inputs.working-directory }}
-    - name: Update Version
-      run: npx lerna@5 version ${{ inputs.version }} --yes --exact --no-changelog --no-push --no-git-tag-version --preid=${{ inputs.preid }}
+    - name: 🏷️ Set Version
+      run: |
+        if [ -z "${{ inputs.preid }}" ]; then
+          npx lerna@5 version ${{ inputs.version }} --yes --exact --no-changelog --no-push --no-git-tag-version
+        else
+          npx lerna@5 version ${{ inputs.version }} --yes --exact --no-changelog --no-push --no-git-tag-version --preid=${{ inputs.preid }}
+        fi
       shell: bash
       working-directory: ${{ inputs.working-directory }}
-    - name: Run Build
+    - name: 🏗️ Run Build
       run: npm run build
       shell: bash
       working-directory: ${{ inputs.working-directory }}
-    - name: Prepare NPM Token
-      run: echo //registry.npmjs.org/:_authToken=${NPM_TOKEN} > .npmrc
-      working-directory: ${{ inputs.working-directory }}
-      shell: bash
-      env:
-        NPM_TOKEN: ${{ inputs.token }}
-    - name: Publish to NPM
+    - name: 🚀 Publish to NPM
       run: npm publish ${{ inputs.folder }} --tag ${{ inputs.tag }} --provenance
       shell: bash
       working-directory: ${{ inputs.working-directory }}
+

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

@@ -3,23 +3,23 @@ description: 'Build Ionic Angular Server'
 runs:
   using: 'composite'
   steps:
-    - uses: actions/setup-node@v5
+    - uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
       with:
-        node-version: 22.x
+        node-version: 24.x
     - uses: ./.github/workflows/actions/download-archive
       with:
         name: ionic-core
         path: ./core
         filename: CoreBuild.zip
-    - name: Install Angular Server Dependencies
+    - name: 🕸️ Install Angular Server Dependencies
       run: npm ci
       shell: bash
       working-directory: ./packages/angular-server
-    - name: Sync
+    - name: 🔄 Sync
       run: npm run sync
       shell: bash
       working-directory: ./packages/angular-server
-    - name: Build
+    - name: 🏗️ Build
       run: npm run build.prod
       shell: bash
       working-directory: ./packages/angular-server

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

@@ -3,31 +3,31 @@ description: 'Build Ionic Angular'
 runs:
   using: 'composite'
   steps:
-    - uses: actions/setup-node@v5
+    - uses: actions/setup-node@v6
       with:
-        node-version: 22.x
+        node-version: 24.x
     - uses: ./.github/workflows/actions/download-archive
       with:
         name: ionic-core
         path: ./core
         filename: CoreBuild.zip
-    - name: Install Angular Dependencies
+    - name: 🕸️ Install Angular Dependencies
       run: npm ci
       shell: bash
       working-directory: ./packages/angular
-    - name: Sync
+    - name: 🔄 Sync
       run: npm run sync
       shell: bash
       working-directory: ./packages/angular
-    - name: Lint
+    - name: 🖌️ Lint
       run: npm run lint
       shell: bash
       working-directory: ./packages/angular
-    - name: Build
+    - name: 🏗️ Build
       run: npm run build
       shell: bash
       working-directory: ./packages/angular
-    - name: Check Diff
+    - name: 🔍 Check Diff
       run: git diff --exit-code
       shell: bash
       working-directory: ./packages/angular

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

@@ -8,20 +8,20 @@ inputs:
 runs:
   using: 'composite'
   steps:
-    - uses: actions/checkout@v5
-    - uses: actions/setup-node@v5
+    - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+    - uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
       with:
-        node-version: 22.x
+        node-version: 24.x
 
-    - name: Install Dependencies
+    - name: 🕸️ Install Dependencies
       run: npm ci
       working-directory: ./core
       shell: bash
-    - name: Install Stencil ${{ inputs.stencil-version }}
+    - name: 📦 Install Stencil ${{ inputs.stencil-version }}
       working-directory: ./core
       run: npm i @stencil/core@${{ inputs.stencil-version }}
       shell: bash
-    - name: Build Core
+    - name: 🏗️ Build Core
       run: npm run build -- --ci --debug --verbose
       working-directory: ./core
       shell: bash

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

@@ -8,22 +8,22 @@ inputs:
 runs:
   using: 'composite'
   steps:
-    - uses: actions/checkout@v5
-    - uses: actions/setup-node@v5
+    - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+    - uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
       with:
-        node-version: 22.x
-    - name: Install Dependencies
+        node-version: 24.x
+    - name: 🕸️ Install Dependencies
       run: npm install
       working-directory: ./core
       shell: bash
     # If an Ionicons version was specified install that.
     # Otherwise just use the version defined in the package.json.
-    - name: Install Ionicons Version
+    - name: 📦 Install Ionicons Version
       if: inputs.ionicons-version != ''
       run: npm install ionicons@${{ inputs.ionicons-version }}
       working-directory: ./core
       shell: bash
-    - name: Build Core
+    - name: 🏗️ Build Core
       run: npm run build -- --ci
       working-directory: ./core
       shell: bash

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

@@ -3,9 +3,9 @@ description: 'Build Ionic React Router'
 runs:
   using: 'composite'
   steps:
-    - uses: actions/setup-node@v5
+    - uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
       with:
-        node-version: 22.x
+        node-version: 24.x
     - uses: ./.github/workflows/actions/download-archive
       with:
         name: ionic-core
@@ -16,19 +16,19 @@ runs:
         name: ionic-react
         path: ./packages/react
         filename: ReactBuild.zip
-    - name: Install Dependencies
+    - name: 🕸️ Install Dependencies
       run: npm ci
       shell: bash
       working-directory: ./packages/react-router
-    - name: Sync
+    - name: 🔄 Sync
       run: npm run sync
       shell: bash
       working-directory: ./packages/react-router
-    - name: Lint
+    - name: 🖌️ Lint
       run: npm run lint
       shell: bash
       working-directory: ./packages/react-router
-    - name: Build
+    - name: 🏗️ Build
       run: npm run build
       shell: bash
       working-directory: ./packages/react-router

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

@@ -3,35 +3,35 @@ description: 'Build Ionic React'
 runs:
   using: 'composite'
   steps:
-    - uses: actions/setup-node@v5
+    - uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
       with:
-        node-version: 22.x
+        node-version: 24.x
     - uses: ./.github/workflows/actions/download-archive
       with:
         name: ionic-core
         path: ./core
         filename: CoreBuild.zip
-    - name: Install React Dependencies
+    - name: 🕸️ Install React Dependencies
       run: npm ci
       shell: bash
       working-directory: ./packages/react
-    - name: Sync
+    - name: 🔄 Sync
       run: npm run sync
       shell: bash
       working-directory: ./packages/react
-    - name: Lint
+    - name: 🖌️ Lint
       run: npm run lint
       shell: bash
       working-directory: ./packages/react
-    - name: Build
+    - name: 🏗️ Build
       run: npm run build
       shell: bash
       working-directory: ./packages/react
-    - name: Test Spec
+    - name: 🧪 Test Spec
       run: npm run test.spec
       shell: bash
       working-directory: ./packages/react
-    - name: Check Diff
+    - name: 🔍 Check Diff
       run: git diff --exit-code
       shell: bash
       working-directory: ./packages/react

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

@@ -3,9 +3,9 @@ description: 'Builds Ionic Vue Router'
 runs:
   using: 'composite'
   steps:
-    - uses: actions/setup-node@v5
+    - uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
       with:
-        node-version: 22.x
+        node-version: 24.x
     - uses: ./.github/workflows/actions/download-archive
       with:
         name: ionic-core
@@ -16,23 +16,23 @@ runs:
         name: ionic-vue
         path: ./packages/vue
         filename: VueBuild.zip
-    - name: Install Vue Router Dependencies
+    - name: 🕸️ Install Vue Router Dependencies
       run: npm ci
       shell: bash
       working-directory: ./packages/vue-router
-    - name: Sync
+    - name: 🔄 Sync
       run: npm run sync
       shell: bash
       working-directory: ./packages/vue-router
-    - name: Lint
+    - name: 🖌️ Lint
       run: npm run lint
       shell: bash
       working-directory: ./packages/vue-router
-    - name: Build
+    - name: 🏗️ Build
       run: npm run build
       shell: bash
       working-directory: ./packages/vue-router
-    - name: Test Spec
+    - name: 🧪 Test Spec
       run: npm run test.spec
       shell: bash
       working-directory: ./packages/vue-router

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

@@ -3,31 +3,31 @@ description: 'Build Ionic Vue'
 runs:
   using: 'composite'
   steps:
-    - uses: actions/setup-node@v5
+    - uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
       with:
-        node-version: 22.x
+        node-version: 24.x
     - uses: ./.github/workflows/actions/download-archive
       with:
         name: ionic-core
         path: ./core
         filename: CoreBuild.zip
-    - name: Install Vue Dependencies
+    - name: 🕸️ Install Vue Dependencies
       run: npm ci
       shell: bash
       working-directory: ./packages/vue
-    - name: Sync
+    - name: 🔄 Sync
       run: npm run sync
       shell: bash
       working-directory: ./packages/vue
-    - name: Lint
+    - name: 🖌️ Lint
       run: npm run lint
       shell: bash
       working-directory: ./packages/vue
-    - name: Build
+    - name: 🏗️ Build
       run: npm run build
       shell: bash
       working-directory: ./packages/vue
-    - name: Check Diff
+    - name: 🔍 Check Diff
       run: git diff --exit-code
       shell: bash
       working-directory: ./packages/vue

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

@@ -10,10 +10,10 @@ inputs:
 runs:
   using: 'composite'
   steps:
-    - uses: actions/download-artifact@v5
+    - uses: actions/download-artifact@v7
       with:
         name: ${{ inputs.name }}
         path: ${{ inputs.path }}
-    - name: Extract Archive
+    - name: 🔎 Extract Archive
       run: unzip -q -o ${{ inputs.path }}/${{ inputs.filename }}
       shell: bash

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

@@ -6,9 +6,9 @@ inputs:
 runs:
   using: 'composite'
   steps:
-    - uses: actions/setup-node@v5
+    - uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
       with:
-        node-version: 22.x
+        node-version: 24.x
     - uses: ./.github/workflows/actions/download-archive
       with:
         name: ionic-core
@@ -24,23 +24,23 @@ runs:
         name: ionic-angular-server
         path: ./packages/angular-server
         filename: AngularServerBuild.zip
-    - name: Create Test App
+    - name: 🧪 Create Test App
       run: ./build.sh ${{ inputs.app }}
       shell: bash
       working-directory: ./packages/angular/test
-    - name: Install Dependencies
+    - name: 🕸️ Install Dependencies
       run: npm install
       shell: bash
       working-directory: ./packages/angular/test/build/${{ inputs.app }}
-    - name: Install Playwright Browsers
+    - name: 📦 Install Playwright Browsers
       run: npx playwright install
       shell: bash
       working-directory: ./packages/angular/test/build/${{ inputs.app }}
-    - name: Sync Built Changes
+    - name: 🔄 Sync Built Changes
       run: npm run sync
       shell: bash
       working-directory: ./packages/angular/test/build/${{ inputs.app }}
-    - name: Run Tests
+    - name: 🧪 Run Tests
       run: npm run test
       shell: bash
       working-directory: ./packages/angular/test/build/${{ inputs.app }}

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

@@ -3,16 +3,16 @@ description: 'Test Core Clean Build'
 runs:
   using: 'composite'
   steps:
-    - uses: actions/setup-node@v5
+    - uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
       with:
-        node-version: 22.x
+        node-version: 24.x
 
     - uses: ./.github/workflows/actions/download-archive
       with:
         name: ionic-core
         path: ./core
         filename: CoreBuild.zip
-    - name: Check Diff
+    - name: 🔍 Check Diff
       run: |
         git diff --exit-code || {
           echo -e "\033[1;31m⚠️ Error: Differences Detected ⚠️\033[0m"

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

@@ -3,21 +3,21 @@ description: 'Test Core Lint'
 runs:
   using: 'composite'
   steps:
-    - uses: actions/setup-node@v5
+    - uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
       with:
-        node-version: 22.x
-    - name: Install Dependencies
+        node-version: 24.x
+    - name: 🕸️ Install Dependencies
       run: npm ci
       working-directory: ./core
       shell: bash
-    - name: Lint
+    - name: 🖌️ Lint
       run: npm run lint
       shell: bash
       working-directory: ./core
     # Lint changes should be pushed
     # to the branch before the branch
     # is merge eligible.
-    - name: Check Lint Results
+    - name: 🔎 Check Lint Results
       run: git diff --exit-code
       shell: bash
       working-directory: ./core

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

@@ -13,19 +13,19 @@ inputs:
 runs:
   using: 'composite'
   steps:
-    - uses: actions/setup-node@v5
+    - uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
       with:
-        node-version: 22.x
+        node-version: 24.x
     - uses: ./.github/workflows/actions/download-archive
       with:
         name: ionic-core
         path: ./core
         filename: CoreBuild.zip
-    - name: Install Dependencies
+    - name: 🕸️ Install Dependencies
       run: npm install
       shell: bash
       working-directory: ./core
-    - name: Test
+    - name: 🧪 Test
       if: inputs.update != 'true'
       run: npm run test.e2e.docker.ci ${{ inputs.component }} -- --shard=${{ inputs.shard }}/${{ inputs.totalShards }}
       shell: bash
@@ -60,13 +60,13 @@ runs:
         fi
       shell: bash
       working-directory: ./core
-    - name: Archive Updated Screenshots
+    - name: 📦 Archive Updated Screenshots
       if: inputs.update == 'true' && steps.test-and-update.outputs.hasUpdatedScreenshots == 'true'
-      uses: actions/upload-artifact@v4
+      uses: actions/upload-artifact@v6
       with:
         name: updated-screenshots-${{ inputs.shard }}-${{ inputs.totalShards }}
         path: UpdatedScreenshots-${{ inputs.shard }}-${{ inputs.totalShards }}.zip
-    - name: Archive Test Results
+    - name: 📦 Archive Test Results
       # The always() ensures that this step
       # runs even if the previous step fails.
       # We want the test results to be archived

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

@@ -6,14 +6,14 @@ inputs:
 runs:
   using: 'composite'
   steps:
-    - uses: actions/setup-node@v5
+    - uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
       with:
-        node-version: 22.x
-    - name: Install Dependencies
+        node-version: 24.x
+    - name: 🕸️ Install Dependencies
       run: npm ci
       working-directory: ./core
       shell: bash
-    - name: Install Stencil ${{ inputs.stencil-version }}
+    - name: 📦 Install Stencil ${{ inputs.stencil-version }}
       run: npm install @stencil/core@${{ inputs.stencil-version }}
       shell: bash
       working-directory: ./core
@@ -23,7 +23,7 @@ runs:
         name: ionic-core
         path: ./core
         filename: CoreBuild.zip
-    - name: Test
+    - name: 🧪 Test
       run: npm run test.spec -- --ci
       shell: bash
       working-directory: ./core

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

@@ -6,9 +6,9 @@ inputs:
 runs:
   using: 'composite'
   steps:
-    - uses: actions/setup-node@v5
+    - uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
       with:
-        node-version: 22.x
+        node-version: 24.x
     - uses: ./.github/workflows/actions/download-archive
       with:
         name: ionic-core
@@ -24,23 +24,23 @@ runs:
         name: ionic-react-router
         path: ./packages/react-router
         filename: ReactRouterBuild.zip
-    - name: Create Test App
+    - name: 🧪 Create Test App
       run: ./build.sh ${{ inputs.app }}
       shell: bash
       working-directory: ./packages/react/test
-    - name: Install Dependencies
+    - name: 🕸️ Install Dependencies
       run: npm install
       shell: bash
       working-directory: ./packages/react/test/build/${{ inputs.app }}
-    - name: Sync Built Changes
+    - name: 🔄 Sync Built Changes
       run: npm run sync
       shell: bash
       working-directory: ./packages/react/test/build/${{ inputs.app }}
-    - name: Build
+    - name: 🏗️ Build
       run: npm run build
       shell: bash
       working-directory: ./packages/react/test/build/${{ inputs.app }}
-    - name: Run Tests
+    - name: 🧪 Run Tests
       run: npm run e2e
       shell: bash
       working-directory: ./packages/react/test/build/${{ inputs.app }}

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

@@ -6,9 +6,9 @@ inputs:
 runs:
   using: 'composite'
   steps:
-    - uses: actions/setup-node@v5
+    - uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
       with:
-        node-version: 22.x
+        node-version: 24.x
     - uses: ./.github/workflows/actions/download-archive
       with:
         name: ionic-core
@@ -24,23 +24,23 @@ runs:
         name: ionic-react-router
         path: ./packages/react-router
         filename: ReactRouterBuild.zip
-    - name: Create Test App
+    - name: 🧪 Create Test App
       run: ./build.sh ${{ inputs.app }}
       shell: bash
       working-directory: ./packages/react-router/test
-    - name: Install Dependencies
+    - name: 🕸️ Install Dependencies
       run: npm install
       shell: bash
       working-directory: ./packages/react-router/test/build/${{ inputs.app }}
-    - name: Sync Built Changes
+    - name: 🔄 Sync Built Changes
       run: npm run sync
       shell: bash
       working-directory: ./packages/react-router/test/build/${{ inputs.app }}
-    - name: Build
+    - name: 🏗️ Build
       run: npm run build
       shell: bash
       working-directory: ./packages/react-router/test/build/${{ inputs.app }}
-    - name: Run Tests
+    - name: 🧪 Run Tests
       run: npm run e2e
       shell: bash
       working-directory: ./packages/react-router/test/build/${{ inputs.app }}

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

@@ -6,9 +6,9 @@ inputs:
 runs:
   using: 'composite'
   steps:
-    - uses: actions/setup-node@v5
+    - uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
       with:
-        node-version: 22.x
+        node-version: 24.x
     - uses: ./.github/workflows/actions/download-archive
       with:
         name: ionic-core
@@ -24,23 +24,23 @@ runs:
         name: ionic-vue-router
         path: ./packages/vue-router
         filename: VueRouterBuild.zip
-    - name: Create Test App
+    - name: 🧪 Create Test App
       run: ./build.sh ${{ inputs.app }}
       shell: bash
       working-directory: ./packages/vue/test
-    - name: Install Dependencies
+    - name: 📦 Install Dependencies
       run: npm install
       shell: bash
       working-directory: ./packages/vue/test/build/${{ inputs.app }}
-    - name: Sync
+    - name: 🔄 Sync
       run: npm run sync
       shell: bash
       working-directory: ./packages/vue/test/build/${{ inputs.app }}
-    - name: Run Spec Tests
+    - name: 🧪 Run Spec Tests
       run: npm run test:unit
       shell: bash
       working-directory: ./packages/vue/test/build/${{ inputs.app }}
-    - name: Run E2E Tests
+    - name: 🧪 Run E2E Tests
       run: npm run test:e2e
       shell: bash
       working-directory: ./packages/vue/test/build/${{ inputs.app }}

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

@@ -7,13 +7,13 @@ on:
 runs:
   using: 'composite'
   steps:
-    - uses: actions/setup-node@v5
+    - uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
       with:
-        node-version: 22.x
-    - uses: actions/download-artifact@v5
+        node-version: 24.x
+    - uses: actions/download-artifact@v7
       with:
         path: ./artifacts
-    - name: Extract Archives
+    - name: 🔎 Extract Archives
       # This finds all .zip files in the ./artifacts
       # directory, including nested directories.
       # It then unzips every .zip to the root directory
@@ -21,7 +21,7 @@ runs:
         find . -type f -name 'UpdatedScreenshots-*.zip' -exec unzip -q -o -d ../ {} \;
       shell: bash
       working-directory: ./artifacts
-    - name: Push Screenshots
+    - name: 📸 Push Screenshots
       # Configure user as Ionitron
       # and push only the changed .png snapshots
       # to the remote branch.

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

@@ -10,10 +10,10 @@ inputs:
 runs:
   using: 'composite'
   steps:
-    - name: Create Archive
+    - name: 🗄️ Create Archive
       run: zip -q -r ${{ inputs.output }} ${{ inputs.paths }}
       shell: bash
-    - uses: actions/upload-artifact@v4
+    - uses: actions/upload-artifact@v6
       with:
         name: ${{ inputs.name }}
         path: ${{ inputs.output }}

.github/workflows/build.yml

@@ -22,7 +22,7 @@ jobs:
   build-core:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v5
+      - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
       - 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@v5
+      - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
       - uses: ./.github/workflows/actions/test-core-clean-build
 
   test-core-lint:
     needs: [build-core]
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v5
+      - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
       - uses: ./.github/workflows/actions/test-core-lint
 
   test-core-spec:
     needs: [build-core]
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v5
+      - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
       - 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@v5
+      - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
       - 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@v5
+    - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
     - uses: ./.github/workflows/actions/build-vue
 
   build-vue-router:
     needs: [build-vue]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v5
+    - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
     - 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@v5
+    - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
     - 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@v5
+    - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
     - uses: ./.github/workflows/actions/build-angular
 
   build-angular-server:
     needs: [build-core]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v5
+    - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
     - 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@v5
+    - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
     - 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@v5
+    - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
     - uses: ./.github/workflows/actions/build-react
 
   build-react-router:
     needs: [build-react]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v5
+    - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
     - 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@v5
+    - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
     - 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@v5
+    - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
     - uses: ./.github/workflows/actions/test-react-e2e
       with:
         app: ${{ matrix.apps }}

.github/workflows/codeql-analysis.yml

@@ -14,8 +14,8 @@ jobs:
     permissions:
       security-events: write
     steps:
-      - uses: actions/checkout@v5
-      - uses: github/codeql-action/init@v3
+      - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+      - uses: github/codeql-action/init@v4
         with:
           languages: javascript
-      - uses: github/codeql-action/analyze@v3
+      - uses: github/codeql-action/analyze@v4

.github/workflows/dev-build.yml

@@ -1,7 +1,11 @@
 name: 'Ionic Dev Build'
 
 on:
-  workflow_dispatch:
+  workflow_call:
+
+permissions:
+  contents: read
+  id-token: write
 
 jobs:
   create-dev-hash:
@@ -9,7 +13,7 @@ jobs:
     outputs:
       dev-hash: ${{ steps.create-dev-hash.outputs.DEV_HASH }}
     steps:
-      - uses: actions/checkout@v5
+      - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
       # 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
@@ -25,13 +29,12 @@ jobs:
   release-ionic:
     needs: [create-dev-hash]
     permissions:
+      contents: read
       id-token: write
     uses: ./.github/workflows/release-ionic.yml
     with:
       tag: dev
       version: ${{ needs.create-dev-hash.outputs.dev-hash }}
-    secrets:
-      NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
 
   get-build:
     name: Get your dev build!

.github/workflows/nightly.yml

@@ -1,10 +1,11 @@
 name: 'Ionic Nightly Build'
 
 on:
-  schedule:
-    # Run every Monday-Friday
-    # at 6:00 UTC (6:00 am UTC)
-    - cron: '00 06 * * 1-5'
+  workflow_call:
+
+permissions:
+  contents: read
+  id-token: write
 
 jobs:
   create-nightly-hash:
@@ -12,7 +13,7 @@ jobs:
     outputs:
       nightly-hash: ${{ steps.create-nightly-hash.outputs.NIGHTLY_HASH }}
     steps:
-      - uses: actions/checkout@v5
+      - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
       # 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
@@ -30,10 +31,10 @@ jobs:
   release-ionic:
     needs: [create-nightly-hash]
     permissions:
+      contents: read
       id-token: write
     uses: ./.github/workflows/release-ionic.yml
+    secrets: inherit
     with:
       tag: nightly
       version: ${{ needs.create-nightly-hash.outputs.nightly-hash }}
-    secrets:
-      NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

.github/workflows/release-ionic.yml

@@ -14,23 +14,23 @@ on:
       preid:
         description: 'The prerelease identifier used when doing a prerelease.'
         type: string
-    secrets:
-      NPM_TOKEN:
-        required: true
+
+permissions:
+  contents: read
+  id-token: write
 
 jobs:
   release-core:
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v5
-    - uses: ./.github/workflows/actions/publish-npm
+    - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+    - uses: ./.github/actions/publish-npm
       with:
         scope: '@ionic/core'
         tag: ${{ inputs.tag }}
         version: ${{ inputs.version }}
         preid: ${{ inputs.preid }}
         working-directory: 'core'
-        token: ${{ secrets.NPM_TOKEN }}
     - name: Cache Built @ionic/core
       uses: ./.github/workflows/actions/upload-archive
       with:
@@ -48,34 +48,33 @@ jobs:
     needs: [release-core]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v5
+    - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
     - name: Restore @ionic/docs built cache
       uses: ./.github/workflows/actions/download-archive
       with:
         name: ionic-docs
         path: ./packages/docs
         filename: DocsBuild.zip
-    - uses: ./.github/workflows/actions/publish-npm
+    - uses: ./.github/actions/publish-npm
       with:
         scope: '@ionic/docs'
         tag: ${{ inputs.tag }}
         version: ${{ inputs.version }}
         preid: ${{ inputs.preid }}
         working-directory: 'packages/docs'
-        token: ${{ secrets.NPM_TOKEN }}
 
   release-angular:
     needs: [release-core]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v5
+    - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
     - name: Restore @ionic/core built cache
       uses: ./.github/workflows/actions/download-archive
       with:
         name: ionic-core
         path: ./core
         filename: CoreBuild.zip
-    - uses: ./.github/workflows/actions/publish-npm
+    - uses: ./.github/actions/publish-npm
       with:
         scope: '@ionic/angular'
         tag: ${{ inputs.tag }}
@@ -83,7 +82,6 @@ jobs:
         preid: ${{ inputs.preid }}
         working-directory: 'packages/angular'
         folder: './dist'
-        token: ${{ secrets.NPM_TOKEN }}
     - name: Cache Built @ionic/angular
       uses: ./.github/workflows/actions/upload-archive
       with:
@@ -95,21 +93,20 @@ jobs:
     needs: [release-core]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v5
+    - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
     - name: Restore @ionic/core built cache
       uses: ./.github/workflows/actions/download-archive
       with:
         name: ionic-core
         path: ./core
         filename: CoreBuild.zip
-    - uses: ./.github/workflows/actions/publish-npm
+    - uses: ./.github/actions/publish-npm
       with:
         scope: '@ionic/react'
         tag: ${{ inputs.tag }}
         version: ${{ inputs.version }}
         preid: ${{ inputs.preid }}
         working-directory: 'packages/react'
-        token: ${{ secrets.NPM_TOKEN }}
     - name: Cache Built @ionic/react
       uses: ./.github/workflows/actions/upload-archive
       with:
@@ -121,21 +118,20 @@ jobs:
     needs: [release-core]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v5
+    - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
     - name: Restore @ionic/core built cache
       uses: ./.github/workflows/actions/download-archive
       with:
         name: ionic-core
         path: ./core
         filename: CoreBuild.zip
-    - uses: ./.github/workflows/actions/publish-npm
+    - uses: ./.github/actions/publish-npm
       with:
         scope: '@ionic/vue'
         tag: ${{ inputs.tag }}
         version: ${{ inputs.version }}
         preid: ${{ inputs.preid }}
         working-directory: 'packages/vue'
-        token: ${{ secrets.NPM_TOKEN }}
     - name: Cache Built @ionic/vue
       uses: ./.github/workflows/actions/upload-archive
       with:
@@ -147,14 +143,14 @@ jobs:
     needs: [release-core]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v5
+    - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
     - name: Restore @ionic/core built cache
       uses: ./.github/workflows/actions/download-archive
       with:
         name: ionic-core
         path: ./core
         filename: CoreBuild.zip
-    - uses: ./.github/workflows/actions/publish-npm
+    - uses: ./.github/actions/publish-npm
       with:
         scope: '@ionic/angular-server'
         tag: ${{ inputs.tag }}
@@ -162,13 +158,12 @@ jobs:
         preid: ${{ inputs.preid }}
         working-directory: 'packages/angular-server'
         folder: './dist'
-        token: ${{ secrets.NPM_TOKEN }}
 
   release-react-router:
     needs: [release-react]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v5
+    - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
     - name: Restore @ionic/core built cache
       uses: ./.github/workflows/actions/download-archive
       with:
@@ -181,20 +176,19 @@ jobs:
         name: ionic-react
         path: ./packages/react
         filename: ReactBuild.zip
-    - uses: ./.github/workflows/actions/publish-npm
+    - uses: ./.github/actions/publish-npm
       with:
         scope: '@ionic/react-router'
         tag: ${{ inputs.tag }}
         version: ${{ inputs.version }}
         preid: ${{ inputs.preid }}
         working-directory: 'packages/react-router'
-        token: ${{ secrets.NPM_TOKEN }}
 
   release-vue-router:
     needs: [release-vue]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v5
+    - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
     - name: Restore @ionic/core built cache
       uses: ./.github/workflows/actions/download-archive
       with:
@@ -207,11 +201,10 @@ jobs:
         name: ionic-vue
         path: ./packages/vue
         filename: VueBuild.zip
-    - uses: ./.github/workflows/actions/publish-npm
+    - uses: ./.github/actions/publish-npm
       with:
         scope: '@ionic/vue-router'
         tag: ${{ inputs.tag }}
         version: ${{ inputs.version }}
         preid: ${{ inputs.preid }}
         working-directory: 'packages/vue-router'
-        token: ${{ secrets.NPM_TOKEN }}

.github/workflows/release-orchestrator.yml

@@ -0,0 +1,81 @@
+name: 'Release - Ionic Framework'
+
+on:
+  schedule:
+    # Run every Monday-Friday
+    # at 6:00 UTC (6:00 am UTC)
+    - cron: '00 06 * * 1-5'
+  workflow_dispatch:
+    inputs:
+      release-type:
+        description: 'Which Ionic release workflow should run?'
+        required: true
+        type: choice
+        default: dev
+        options:
+          - dev
+          - production
+      version:
+        description: 'Which version should be published? (Only for production releases)'
+        required: false
+        type: choice
+        options:
+          - patch
+          - minor
+          - major
+          - prepatch
+          - preminor
+          - premajor
+          - prerelease
+      tag:
+        description: 'Which npm tag should this be published to? (Only for production releases)'
+        required: false
+        type: choice
+        default: latest
+        options:
+          - latest
+          - next
+      preid:
+        description: 'Which prerelease identifier should be used? (Only for production releases)'
+        required: false
+        type: choice
+        default: ''
+        options:
+          - ''
+          - alpha
+          - beta
+          - rc
+          - next
+
+permissions:
+  contents: read
+  id-token: write
+
+jobs:
+  run-nightly:
+    if: ${{ github.event_name == 'schedule' }}
+    permissions:
+      contents: read
+      id-token: write
+    uses: ./.github/workflows/nightly.yml
+    secrets: inherit
+
+  run-dev:
+    if: ${{ github.event_name == 'workflow_dispatch' && inputs.release-type == 'dev' }}
+    permissions:
+      contents: read
+      id-token: write
+    uses: ./.github/workflows/dev-build.yml
+    secrets: inherit
+
+  run-production:
+    if: ${{ github.event_name == 'workflow_dispatch' && inputs.release-type == 'production' }}
+    permissions:
+      contents: write
+      id-token: write
+    uses: ./.github/workflows/release.yml
+    secrets: inherit
+    with:
+      version: ${{ inputs.version }}
+      tag: ${{ inputs.tag }}
+      preid: ${{ inputs.preid }}

.github/workflows/release.yml

@@ -1,54 +1,64 @@
 name: 'Ionic Production Release'
 
 on:
-  workflow_dispatch:
+  workflow_call:
     inputs:
       version:
+        description: 'Which version should be published?'
         required: true
-        type: choice
-        description: Which version should be published?
-        options:
-          - patch
-          - minor
-          - major
-          - prepatch
-          - preminor
-          - premajor
-          - prerelease
+        type: string
       tag:
+        description: 'Which npm tag should this be published to?'
         required: true
-        type: choice
-        description: Which npm tag should this be published to?
-        options:
-          - latest
-          - next
+        type: string
       preid:
-        type: choice
-        description: Which prerelease identifier should be used? This is only needed when version is "prepatch", "preminor", "premajor", or "prerelease".
-        options:
-          - ''
-          - alpha
-          - beta
-          - rc
-          - next
+        description: 'Which prerelease identifier should be used? This is only needed when version is "prepatch", "preminor", "premajor", or "prerelease".'
+        required: false
+        type: string
+
+permissions:
+  contents: read
+  id-token: write
 
 jobs:
+  validate_version:
+    name: ✅ Validate Version Input
+    runs-on: ubuntu-latest
+    steps:
+      - name: 🔎 Ensure version is allowed
+        env:
+          VERSION: ${{ inputs.version }}
+        run: |
+          case "$VERSION" in
+            patch|minor|major|prepatch|preminor|premajor|prerelease)
+              exit 0
+              ;;
+            *)
+              echo "::error::Invalid version input: '$VERSION'. Allowed values: patch, minor, major, prepatch, preminor, premajor, prerelease."
+              exit 1
+              ;;
+          esac
+        shell: bash
+
   release-ionic:
+    needs: [validate_version]
     permissions:
+      contents: read
       id-token: write
     uses: ./.github/workflows/release-ionic.yml
     with:
       tag: ${{ inputs.tag }}
       version: ${{ inputs.version }}
       preid: ${{ inputs.preid }}
-    secrets:
-      NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
 
   finalize-release:
     needs: [release-ionic]
     runs-on: ubuntu-latest
+    permissions:
+      contents: write
+      id-token: write
     steps:
-    - uses: actions/checkout@v5
+    - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
       with:
         token: ${{ secrets.IONITRON_TOKEN }}
         fetch-depth: 0
@@ -75,8 +85,11 @@ jobs:
     # possible for them to push at the same time.
     needs: [finalize-release]
     runs-on: ubuntu-latest
+    permissions:
+      contents: write
+      id-token: write
     steps:
-      - uses: actions/checkout@v5
+      - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
         # 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@v5
+      - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
       - 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@v5
+      - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
       - 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@v5
+      - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
       - uses: ./.github/workflows/actions/test-core-lint
 
   test-core-spec:
     needs: [build-core-with-stencil-nightly]
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v5
+      - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
       - 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@v5
+      - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
       - 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@v5
+    - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
     - uses: ./.github/workflows/actions/build-vue
 
   build-vue-router:
     needs: [build-vue]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v5
+    - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
     - 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@v5
+    - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
     - 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@v5
+    - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
     - uses: ./.github/workflows/actions/build-angular
 
   build-angular-server:
     needs: [build-core-with-stencil-nightly]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v5
+    - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
     - 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@v5
+    - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
     - 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@v5
+    - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
     - uses: ./.github/workflows/actions/build-react
 
   build-react-router:
     needs: [build-react]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v5
+    - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
     - 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@v5
+    - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
     - 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@v5
+    - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
     - uses: ./.github/workflows/actions/test-react-e2e
       with:
         app: ${{ matrix.apps }}
@@ -225,3 +225,35 @@ jobs:
       - name: Check build matrix status
         if: ${{ needs.test-react-e2e.result != 'success' }}
         run: exit 1
+
+  send-success-messages:
+    needs: [test-core-clean-build, test-core-lint, test-core-spec, verify-screenshots, verify-test-vue-e2e, verify-test-angular-e2e, verify-test-react-router-e2e, verify-test-react-e2e]
+    runs-on: ubuntu-latest
+    if: ${{ !cancelled() && !contains(needs.*.result, 'failure') }}
+    steps:
+      - name: Notify success on Discord
+        run: |
+          curl -H "Content-Type:application/json" \
+          -d '{"embeds": [{"title": "✅ Workflow ${{github.workflow}} #${{github.run_number}} finished successfully", "color": 65280, "url": "${{github.server_url}}/${{github.repository}}/actions/runs/${{github.run_id}}"}]}' \
+          ${{secrets.DISCORD_NOTIFY_WEBHOOK}}
+      - name: Notify success on Slack
+        run: |
+          curl -H "Content-Type:application/json" \
+          -d '{"title": "✅ Workflow ${{github.workflow}} #${{github.run_number}} finished successfully", "url": "${{github.server_url}}/${{github.repository}}/actions/runs/${{github.run_id}}"}' \
+          ${{secrets.SLACK_NOTIFY_SUCCESS_WEBHOOK}}
+
+  send-failure-messages:
+    needs: [test-core-clean-build, test-core-lint, test-core-spec, verify-screenshots, verify-test-vue-e2e, verify-test-angular-e2e, verify-test-react-router-e2e, verify-test-react-e2e]
+    runs-on: ubuntu-latest
+    if: ${{ !cancelled() && contains(needs.*.result, 'failure') }}
+    steps:
+      - name: Notify failure on Discord
+        run: |
+          curl -H "Content-Type:application/json" \
+          -d '{"content": "Alerting <@&1347593178580254761>!", "embeds": [{"title": "❌ Workflow ${{github.workflow}} #${{github.run_number}} failed", "color": 16711680, "url": "${{github.server_url}}/${{github.repository}}/actions/runs/${{github.run_id}}"}]}' \
+          ${{secrets.DISCORD_NOTIFY_WEBHOOK}}
+      - name: Notify failure on Slack
+        run: |
+          curl -H "Content-Type:application/json" \
+          -d '{"title": "❌ Workflow ${{github.workflow}} #${{github.run_number}} failed", "url": "${{github.server_url}}/${{github.repository}}/actions/runs/${{github.run_id}}"}' \
+          ${{secrets.SLACK_NOTIFY_FAILURE_WEBHOOK}}

.github/workflows/update-screenshots.yml

@@ -26,7 +26,7 @@ jobs:
   build-core:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v5
+      - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
       - 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@v5
+      - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
       - 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@v5
+      - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
         # Normally, we could just push with the
         # default GITHUB_TOKEN, but that will
         # not cause the build workflow

BREAKING.md

@@ -18,7 +18,11 @@ 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)
+  - [Datetime](#version-9x-datetime)
   - [Grid](#version-9x-grid)
+  - [Input Otp](#version-9x-input-otp)
+  - [Radio Group](#version-9x-radio-group)
+  - [Textarea](#version-9x-textarea)
 
 <h2 id="version-9x-components">Components</h2>
 
@@ -28,12 +32,44 @@ This is a comprehensive list of the breaking changes introduced in the major ver
 
 <h4 id="version-9x-card">Card</h4>
 
-- The `border-radius` of the `ios` and `md` card now defaults to `14px` and `12px` instead of `8px` and `4px`, respectively, in accordance with the iOS and Material Design 3 guidelines. To revert to the previous appearance, set the `shape` to `"soft"`, or override the `--border-radius` CSS variable to specify a different value.
+- **ion-card**: The `border-radius` of the `ios` and `md` card now defaults to `14px` and `12px` instead of `8px` and `4px`, respectively, in accordance with the iOS and Material Design 3 guidelines. To revert to the previous appearance, set the `shape` to `"soft"`, or override the `--border-radius` CSS variable to specify a different value.
+
+- **ion-card-content**: The `ion-card-content` component has been updated to Shadow DOM. With this update, all card-related components now use Shadow DOM for style encapsulation. The default styles for heading elements inside `ion-card-content` have been removed. If you need custom styling for headings, you can add your own CSS targeting these elements. For example:
+
+  ```css
+  ion-card-content h1 {
+    margin-top: 0;
+    margin-bottom: 2px;
+
+    font-size: 1.5rem;
+  }
+
+  ion-card-content h2 {
+    margin-top: 2px;
+    margin-bottom: 2px;
+
+    font-size: 1rem;
+  }
+
+  ion-card-content h3,
+  ion-card-content h4,
+  ion-card-content h5,
+  ion-card-content h6 {
+    margin-top: 2px;
+    margin-bottom: 2px;
+
+    font-size: 0.875rem;
+  }
+  ```
 
 <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-datetime">Datetime</h4>
+
+- The `ion-buttons` component has been removed from the internal implementation of `ion-datetime` and is no longer required when passing custom buttons to the `slot="buttons"`. When providing custom buttons, use a `div` element instead of `ion-buttons`. While existing code using `ion-buttons` may continue to work visually, future updates to the `ion-buttons` component may cause any styles you rely on to break.
+
 <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`.
@@ -41,6 +77,7 @@ This is a comprehensive list of the breaking changes introduced in the major ver
 <h5>Example 1: Swap two columns</h5>
 
 **Version up to 8.x**
+
 ```html
 <ion-grid>
   <ion-row>
@@ -50,7 +87,9 @@ This is a comprehensive list of the breaking changes introduced in the major ver
   </ion-row>
 </ion-grid>
 ```
+
 **Version 9.x+**
+
 ```html
 <ion-grid>
   <ion-row>
@@ -62,9 +101,11 @@ This is a comprehensive list of the breaking changes introduced in the major ver
 ```
 
 <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>
@@ -73,7 +114,9 @@ To reorder two columns where column 1 has `size="9" push="3"` and column 2 has `
   </ion-row>
 </ion-grid>
 ```
+
 **Version 9.x+**
+
 ```html
 <ion-grid>
   <ion-row>
@@ -82,7 +125,9 @@ To reorder two columns where column 1 has `size="9" push="3"` and column 2 has `
   </ion-row>
 </ion-grid>
 ```
+
 <h5>Example 3: Push</h5>
+
 ```html
 <ion-grid>
   <ion-row>
@@ -95,7 +140,9 @@ To reorder two columns where column 1 has `size="9" push="3"` and column 2 has `
   </ion-row>
 </ion-grid>
 ```
+
 **Version 9.x+**
+
 ```html
 <ion-grid>
   <ion-row>
@@ -110,6 +157,7 @@ To reorder two columns where column 1 has `size="9" push="3"` and column 2 has `
 ```
 
 <h5>Example 4: Push and Pull</h5>
+
 ```html
 <ion-grid>
   <ion-row>
@@ -122,7 +170,9 @@ To reorder two columns where column 1 has `size="9" push="3"` and column 2 has `
   </ion-row>
 </ion-grid>
 ```
+
 **Version 9.x+**
+
 ```html
 <ion-grid>
   <ion-row>
@@ -134,4 +184,24 @@ To reorder two columns where column 1 has `size="9" push="3"` and column 2 has `
     </ion-col>
   </ion-row>
 </ion-grid>
-```
+```
+
+<h4 id="version-9x-input-otp">Input Otp</h4>
+
+Converted `ion-input-otp` to use [Shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM).
+
+If you were targeting the internals of `ion-input-otp` in your CSS, you will need to target the `group`, `container`, `native`, `separator` or `description` [Shadow Parts](https://ionicframework.com/docs/theming/css-shadow-parts) instead, or use the provided CSS Variables.
+
+<h4 id="version-9x-radio-group">Radio Group</h4>
+
+Converted `ion-radio-group` to use [Shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM).
+
+If you were targeting the internals of `ion-radio-group` in your CSS, you will need to target the `supporting-text`, `helper-text` or `error-text` [Shadow Parts](https://ionicframework.com/docs/theming/css-shadow-parts) instead, or use the provided CSS Variables.
+
+Additionally, the `radio-group-wrapper` div element has been removed, causing slotted elements to be direct children of the `ion-radio-group`.
+
+<h4 id="version-9x-textarea">Textarea</h4>
+
+Converted `ion-textarea` to use [Shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM).
+
+If you were targeting the internals of `ion-textarea` in your CSS, you will need to target the `wrapper`, `container`, `label`, `native`, `supporting-text`, `helper-text`, `error-text`, `counter`, or `bottom` [Shadow Parts](https://ionicframework.com/docs/theming/css-shadow-parts) instead, or use the provided CSS Variables.

CHANGELOG.md

@@ -3,6 +3,121 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.7.15](https://github.com/ionic-team/ionic-framework/compare/v8.7.14...v8.7.15) (2025-12-23)
+
+
+### Bug Fixes
+
+* **core:** use Capacitor safe-area CSS variables on older WebViews ([#30865](https://github.com/ionic-team/ionic-framework/issues/30865)) ([8573bf8](https://github.com/ionic-team/ionic-framework/commit/8573bf8083f75eda13c954a56731a6aac8ca5724))
+* **header:** show iOS condense header when app is in MD mode ([#30690](https://github.com/ionic-team/ionic-framework/issues/30690)) ([f83b000](https://github.com/ionic-team/ionic-framework/commit/f83b0005309400d674e43c497bdffbcb9d2c4d94)), closes [#29929](https://github.com/ionic-team/ionic-framework/issues/29929)
+* **input-password-toggle:** improve screen reader announcements ([#30885](https://github.com/ionic-team/ionic-framework/issues/30885)) ([12ede4b](https://github.com/ionic-team/ionic-framework/commit/12ede4b79c8d5cffc2b014c7c8a0d2ef1d3bf90d))
+* **modal:** dismiss top-most overlay when multiple IDs match ([#30883](https://github.com/ionic-team/ionic-framework/issues/30883)) ([3b60a1d](https://github.com/ionic-team/ionic-framework/commit/3b60a1d68a1df1606ffee0bde7db7a206bac404a)), closes [#30030](https://github.com/ionic-team/ionic-framework/issues/30030)
+
+
+
+
+
+## [8.7.14](https://github.com/ionic-team/ionic-framework/compare/v8.7.13...v8.7.14) (2025-12-17)
+
+
+### Bug Fixes
+
+* **tabs:** select correct tab when routes have similar prefixes ([#30863](https://github.com/ionic-team/ionic-framework/issues/30863)) ([03fb422](https://github.com/ionic-team/ionic-framework/commit/03fb422bfa775e3e9dd695ea1857fa88d4245ecd)), closes [#30448](https://github.com/ionic-team/ionic-framework/issues/30448)
+
+
+
+
+
+## [8.7.13](https://github.com/ionic-team/ionic-framework/compare/v8.7.12...v8.7.13) (2025-12-13)
+
+**Note:** Version bump only for package ionic-framework
+
+
+
+
+
+## [8.7.12](https://github.com/ionic-team/ionic-framework/compare/v8.7.11...v8.7.12) (2025-12-10)
+
+
+### Bug Fixes
+
+* **modal:** allow interaction with parent content through sheet modals in child routes ([#30839](https://github.com/ionic-team/ionic-framework/issues/30839)) ([b9e3cf0](https://github.com/ionic-team/ionic-framework/commit/b9e3cf0f5aae79a1f27a07b102c77e51f24825f4)), closes [#30700](https://github.com/ionic-team/ionic-framework/issues/30700)
+* **modal:** prevent browser hang when using ModalController in Angular ([#30845](https://github.com/ionic-team/ionic-framework/issues/30845)) ([b164516](https://github.com/ionic-team/ionic-framework/commit/b1645168a7fb9378dc39a081c207b2de0e180089))
+* **popover:** recalculate the content dimensions after the header has fully loaded ([#30853](https://github.com/ionic-team/ionic-framework/issues/30853)) ([99dcf38](https://github.com/ionic-team/ionic-framework/commit/99dcf3810a0c32416996d1e992ddf63359965cfc))
+* **select, action-sheet:** use radio role for options ([#30769](https://github.com/ionic-team/ionic-framework/issues/30769)) ([1c89cf0](https://github.com/ionic-team/ionic-framework/commit/1c89cf06ac959f9c9a35a66f811227c244d3198b))
+
+
+
+
+
+## [8.7.11](https://github.com/ionic-team/ionic-framework/compare/v8.7.10...v8.7.11) (2025-11-26)
+
+
+### Bug Fixes
+
+* **datetime:** ensure datetime is shown when intersection observer fails to report visibility ([#30793](https://github.com/ionic-team/ionic-framework/issues/30793)) ([9d781db](https://github.com/ionic-team/ionic-framework/commit/9d781db662d213090d0b7198d0cdc5abb16fed1b)), closes [#30706](https://github.com/ionic-team/ionic-framework/issues/30706)
+
+
+
+
+
+## [8.7.10](https://github.com/ionic-team/ionic-framework/compare/v8.7.9...v8.7.10) (2025-11-19)
+
+
+### Bug Fixes
+
+* **checkbox, toggle, radio-group:** improve screen reader announcement timing for validation errors ([#30714](https://github.com/ionic-team/ionic-framework/issues/30714)) ([92db364](https://github.com/ionic-team/ionic-framework/commit/92db36489cca944caf1593dbd518a1f025a171a2))
+
+
+
+
+
+## [8.7.9](https://github.com/ionic-team/ionic-framework/compare/v8.7.8...v8.7.9) (2025-11-05)
+
+
+### Bug Fixes
+
+* **accordion-group:** skip initial animation ([#30729](https://github.com/ionic-team/ionic-framework/issues/30729)) ([58d5638](https://github.com/ionic-team/ionic-framework/commit/58d563805fca1db88caeeb40a8f710ac30416d93)), closes [#30613](https://github.com/ionic-team/ionic-framework/issues/30613)
+
+
+
+
+
+## [8.7.8](https://github.com/ionic-team/ionic-framework/compare/v8.7.7...v8.7.8) (2025-10-29)
+
+
+### Bug Fixes
+
+* **checkbox, toggle:** fire ionFocus and ionBlur ([#30733](https://github.com/ionic-team/ionic-framework/issues/30733)) ([54a1c86](https://github.com/ionic-team/ionic-framework/commit/54a1c86d6a5d533b0c8c2d18edc62454a7c17bab))
+
+
+
+
+
+## [8.7.7](https://github.com/ionic-team/ionic-framework/compare/v8.7.6...v8.7.7) (2025-10-15)
+
+
+### Bug Fixes
+
+* **header:** ensure one banner role in condensed header ([#30718](https://github.com/ionic-team/ionic-framework/issues/30718)) ([12084af](https://github.com/ionic-team/ionic-framework/commit/12084af163ed811b9c6bda3c7850fc0c53c60c7b))
+* **header:** prevent flickering during iOS page transitions ([#30705](https://github.com/ionic-team/ionic-framework/issues/30705)) ([820fa28](https://github.com/ionic-team/ionic-framework/commit/820fa2854331722d22efd0e38a1936117477967a)), closes [#25326](https://github.com/ionic-team/ionic-framework/issues/25326)
+* **select:** improve screen reader announcement timing for validation errors ([#30723](https://github.com/ionic-team/ionic-framework/issues/30723)) ([03303d7](https://github.com/ionic-team/ionic-framework/commit/03303d73f0bfe2380ced7931525fc52fd8576367))
+
+
+
+
+
+## [8.7.6](https://github.com/ionic-team/ionic-framework/compare/v8.7.5...v8.7.6) (2025-10-08)
+
+
+### Bug Fixes
+
+* **tabs:** respect stencil lifecycle order for tab selection ([#30702](https://github.com/ionic-team/ionic-framework/issues/30702)) ([7bb9535](https://github.com/ionic-team/ionic-framework/commit/7bb9535f601d2469ce60687a9c03f8b1cfe4aba4)), closes [#30611](https://github.com/ionic-team/ionic-framework/issues/30611)
+
+
+
+
+
 ## [8.7.5](https://github.com/ionic-team/ionic-framework/compare/v8.7.4...v8.7.5) (2025-09-24)
 
 

core/CHANGELOG.md

@@ -3,6 +3,118 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.7.15](https://github.com/ionic-team/ionic-framework/compare/v8.7.14...v8.7.15) (2025-12-23)
+
+
+### Bug Fixes
+
+* **core:** use Capacitor safe-area CSS variables on older WebViews ([#30865](https://github.com/ionic-team/ionic-framework/issues/30865)) ([8573bf8](https://github.com/ionic-team/ionic-framework/commit/8573bf8083f75eda13c954a56731a6aac8ca5724))
+* **header:** show iOS condense header when app is in MD mode ([#30690](https://github.com/ionic-team/ionic-framework/issues/30690)) ([f83b000](https://github.com/ionic-team/ionic-framework/commit/f83b0005309400d674e43c497bdffbcb9d2c4d94)), closes [#29929](https://github.com/ionic-team/ionic-framework/issues/29929)
+* **input-password-toggle:** improve screen reader announcements ([#30885](https://github.com/ionic-team/ionic-framework/issues/30885)) ([12ede4b](https://github.com/ionic-team/ionic-framework/commit/12ede4b79c8d5cffc2b014c7c8a0d2ef1d3bf90d))
+* **modal:** dismiss top-most overlay when multiple IDs match ([#30883](https://github.com/ionic-team/ionic-framework/issues/30883)) ([3b60a1d](https://github.com/ionic-team/ionic-framework/commit/3b60a1d68a1df1606ffee0bde7db7a206bac404a)), closes [#30030](https://github.com/ionic-team/ionic-framework/issues/30030)
+
+
+
+
+
+## [8.7.14](https://github.com/ionic-team/ionic-framework/compare/v8.7.13...v8.7.14) (2025-12-17)
+
+**Note:** Version bump only for package @ionic/core
+
+
+
+
+
+## [8.7.13](https://github.com/ionic-team/ionic-framework/compare/v8.7.12...v8.7.13) (2025-12-13)
+
+**Note:** Version bump only for package @ionic/core
+
+
+
+
+
+## [8.7.12](https://github.com/ionic-team/ionic-framework/compare/v8.7.11...v8.7.12) (2025-12-10)
+
+
+### Bug Fixes
+
+* **modal:** allow interaction with parent content through sheet modals in child routes ([#30839](https://github.com/ionic-team/ionic-framework/issues/30839)) ([b9e3cf0](https://github.com/ionic-team/ionic-framework/commit/b9e3cf0f5aae79a1f27a07b102c77e51f24825f4)), closes [#30700](https://github.com/ionic-team/ionic-framework/issues/30700)
+* **modal:** prevent browser hang when using ModalController in Angular ([#30845](https://github.com/ionic-team/ionic-framework/issues/30845)) ([b164516](https://github.com/ionic-team/ionic-framework/commit/b1645168a7fb9378dc39a081c207b2de0e180089))
+* **popover:** recalculate the content dimensions after the header has fully loaded ([#30853](https://github.com/ionic-team/ionic-framework/issues/30853)) ([99dcf38](https://github.com/ionic-team/ionic-framework/commit/99dcf3810a0c32416996d1e992ddf63359965cfc))
+* **select, action-sheet:** use radio role for options ([#30769](https://github.com/ionic-team/ionic-framework/issues/30769)) ([1c89cf0](https://github.com/ionic-team/ionic-framework/commit/1c89cf06ac959f9c9a35a66f811227c244d3198b))
+
+
+
+
+
+## [8.7.11](https://github.com/ionic-team/ionic-framework/compare/v8.7.10...v8.7.11) (2025-11-26)
+
+
+### Bug Fixes
+
+* **datetime:** ensure datetime is shown when intersection observer fails to report visibility ([#30793](https://github.com/ionic-team/ionic-framework/issues/30793)) ([9d781db](https://github.com/ionic-team/ionic-framework/commit/9d781db662d213090d0b7198d0cdc5abb16fed1b)), closes [#30706](https://github.com/ionic-team/ionic-framework/issues/30706)
+
+
+
+
+
+## [8.7.10](https://github.com/ionic-team/ionic-framework/compare/v8.7.9...v8.7.10) (2025-11-19)
+
+
+### Bug Fixes
+
+* **checkbox, toggle, radio-group:** improve screen reader announcement timing for validation errors ([#30714](https://github.com/ionic-team/ionic-framework/issues/30714)) ([92db364](https://github.com/ionic-team/ionic-framework/commit/92db36489cca944caf1593dbd518a1f025a171a2))
+
+
+
+
+
+## [8.7.9](https://github.com/ionic-team/ionic-framework/compare/v8.7.8...v8.7.9) (2025-11-05)
+
+
+### Bug Fixes
+
+* **accordion-group:** skip initial animation ([#30729](https://github.com/ionic-team/ionic-framework/issues/30729)) ([58d5638](https://github.com/ionic-team/ionic-framework/commit/58d563805fca1db88caeeb40a8f710ac30416d93)), closes [#30613](https://github.com/ionic-team/ionic-framework/issues/30613)
+
+
+
+
+
+## [8.7.8](https://github.com/ionic-team/ionic-framework/compare/v8.7.7...v8.7.8) (2025-10-29)
+
+
+### Bug Fixes
+
+* **checkbox, toggle:** fire ionFocus and ionBlur ([#30733](https://github.com/ionic-team/ionic-framework/issues/30733)) ([54a1c86](https://github.com/ionic-team/ionic-framework/commit/54a1c86d6a5d533b0c8c2d18edc62454a7c17bab))
+
+
+
+
+
+## [8.7.7](https://github.com/ionic-team/ionic-framework/compare/v8.7.6...v8.7.7) (2025-10-15)
+
+
+### Bug Fixes
+
+* **header:** ensure one banner role in condensed header ([#30718](https://github.com/ionic-team/ionic-framework/issues/30718)) ([12084af](https://github.com/ionic-team/ionic-framework/commit/12084af163ed811b9c6bda3c7850fc0c53c60c7b))
+* **header:** prevent flickering during iOS page transitions ([#30705](https://github.com/ionic-team/ionic-framework/issues/30705)) ([820fa28](https://github.com/ionic-team/ionic-framework/commit/820fa2854331722d22efd0e38a1936117477967a)), closes [#25326](https://github.com/ionic-team/ionic-framework/issues/25326)
+* **select:** improve screen reader announcement timing for validation errors ([#30723](https://github.com/ionic-team/ionic-framework/issues/30723)) ([03303d7](https://github.com/ionic-team/ionic-framework/commit/03303d73f0bfe2380ced7931525fc52fd8576367))
+
+
+
+
+
+## [8.7.6](https://github.com/ionic-team/ionic-framework/compare/v8.7.5...v8.7.6) (2025-10-08)
+
+
+### Bug Fixes
+
+* **tabs:** respect stencil lifecycle order for tab selection ([#30702](https://github.com/ionic-team/ionic-framework/issues/30702)) ([7bb9535](https://github.com/ionic-team/ionic-framework/commit/7bb9535f601d2469ce60687a9c03f8b1cfe4aba4)), closes [#30611](https://github.com/ionic-team/ionic-framework/issues/30611)
+
+
+
+
+
 ## [8.7.5](https://github.com/ionic-team/ionic-framework/compare/v8.7.4...v8.7.5) (2025-09-24)
 
 

core/Dockerfile

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

core/api.txt

@@ -504,7 +504,7 @@ ion-card,css-prop,--color,ios
 ion-card,css-prop,--color,md
 ion-card,part,native
 
-ion-card-content,none
+ion-card-content,shadow
 ion-card-content,prop,mode,"ios" | "md",undefined,false,false
 ion-card-content,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 
@@ -1035,18 +1035,20 @@ ion-input,css-prop,--placeholder-opacity,ionic
 ion-input,css-prop,--placeholder-opacity,ios
 ion-input,css-prop,--placeholder-opacity,md
 
-ion-input-otp,scoped
+ion-input-otp,shadow
 ion-input-otp,prop,autocapitalize,string,'off',false,false
 ion-input-otp,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
 ion-input-otp,prop,disabled,boolean,false,false,true
 ion-input-otp,prop,fill,"outline" | "solid" | undefined,'outline',false,false
 ion-input-otp,prop,inputmode,"decimal" | "email" | "none" | "numeric" | "search" | "tel" | "text" | "url" | undefined,undefined,false,false
 ion-input-otp,prop,length,number,4,false,false
+ion-input-otp,prop,mode,"ios" | "md",undefined,false,false
 ion-input-otp,prop,pattern,string | undefined,undefined,false,false
 ion-input-otp,prop,readonly,boolean,false,false,true
 ion-input-otp,prop,separators,number[] | string | undefined,undefined,false,false
 ion-input-otp,prop,shape,"rectangular" | "round" | "soft",'round',false,false
 ion-input-otp,prop,size,"large" | "medium" | "small",'medium',false,false
+ion-input-otp,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-input-otp,prop,type,"number" | "text",'number',false,false
 ion-input-otp,prop,value,null | number | string | undefined,'',false,false
 ion-input-otp,method,setFocus,setFocus(index?: number) => Promise<void>
@@ -1127,6 +1129,11 @@ ion-input-otp,css-prop,--separator-width,md
 ion-input-otp,css-prop,--width,ionic
 ion-input-otp,css-prop,--width,ios
 ion-input-otp,css-prop,--width,md
+ion-input-otp,part,container
+ion-input-otp,part,description
+ion-input-otp,part,group
+ion-input-otp,part,native
+ion-input-otp,part,separator
 
 ion-input-password-toggle,shadow
 ion-input-password-toggle,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
@@ -1845,7 +1852,7 @@ ion-radio,part,container
 ion-radio,part,label
 ion-radio,part,mark
 
-ion-radio-group,none
+ion-radio-group,shadow
 ion-radio-group,prop,allowEmptySelection,boolean,false,false,false
 ion-radio-group,prop,compareWith,((currentValue: any, compareValue: any) => boolean) | null | string | undefined,undefined,false,false
 ion-radio-group,prop,errorText,string | undefined,undefined,false,false
@@ -1855,6 +1862,9 @@ ion-radio-group,prop,name,string,this.inputId,false,false
 ion-radio-group,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-radio-group,prop,value,any,undefined,false,false
 ion-radio-group,event,ionChange,RadioGroupChangeEventDetail<any>,true
+ion-radio-group,part,error-text
+ion-radio-group,part,helper-text
+ion-radio-group,part,supporting-text
 
 ion-range,shadow
 ion-range,prop,activeBarStart,number | undefined,undefined,false,false
@@ -2423,7 +2433,7 @@ ion-text,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "second
 ion-text,prop,mode,"ios" | "md",undefined,false,false
 ion-text,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 
-ion-textarea,scoped
+ion-textarea,shadow
 ion-textarea,prop,autoGrow,boolean,false,false,true
 ion-textarea,prop,autocapitalize,string,'none',false,false
 ion-textarea,prop,autofocus,boolean,false,false,false
@@ -2447,7 +2457,7 @@ ion-textarea,prop,mode,"ios" | "md",undefined,false,false
 ion-textarea,prop,name,string,this.inputId,false,false
 ion-textarea,prop,placeholder,string | undefined,undefined,false,false
 ion-textarea,prop,readonly,boolean,false,false,false
-ion-textarea,prop,required,boolean,false,false,false
+ion-textarea,prop,required,boolean,false,false,true
 ion-textarea,prop,rows,number | undefined,undefined,false,false
 ion-textarea,prop,shape,"rectangular" | "round" | "soft" | undefined,undefined,false,false
 ion-textarea,prop,size,"large" | "medium" | "small" | undefined,'medium',false,false
@@ -2515,6 +2525,15 @@ ion-textarea,css-prop,--placeholder-font-weight,md
 ion-textarea,css-prop,--placeholder-opacity,ionic
 ion-textarea,css-prop,--placeholder-opacity,ios
 ion-textarea,css-prop,--placeholder-opacity,md
+ion-textarea,part,bottom
+ion-textarea,part,container
+ion-textarea,part,counter
+ion-textarea,part,error-text
+ion-textarea,part,helper-text
+ion-textarea,part,label
+ion-textarea,part,native
+ion-textarea,part,supporting-text
+ion-textarea,part,wrapper
 
 ion-thumbnail,shadow
 ion-thumbnail,prop,mode,"ios" | "md",undefined,false,false

core/package.json

@@ -1,7 +1,10 @@
 {
   "name": "@ionic/core",
-  "version": "8.7.5",
+  "version": "8.7.15",
   "description": "Base components for Ionic",
+  "engines": {
+    "node": ">= 16"
+  },
   "keywords": [
     "ionic",
     "framework",
@@ -37,15 +40,15 @@
     "tslib": "^2.1.0"
   },
   "devDependencies": {
-    "@axe-core/playwright": "^4.10.2",
-    "@capacitor/core": "^7.0.0",
-    "@capacitor/haptics": "^7.0.0",
-    "@capacitor/keyboard": "^7.0.0",
-    "@capacitor/status-bar": "^7.0.0",
+    "@axe-core/playwright": "^4.11.0",
+    "@capacitor/core": "^8.0.0",
+    "@capacitor/haptics": "^8.0.0",
+    "@capacitor/keyboard": "^8.0.0",
+    "@capacitor/status-bar": "^8.0.0",
     "@clack/prompts": "^0.11.0",
     "@ionic/eslint-config": "^0.3.0",
     "@ionic/prettier-config": "^2.0.0",
-    "@playwright/test": "^1.55.1",
+    "@playwright/test": "^1.56.1",
     "@rollup/plugin-node-resolve": "^8.4.0",
     "@rollup/plugin-virtual": "^2.0.3",
     "@stencil/angular-output-target": "^0.10.0",
@@ -66,12 +69,12 @@
     "fs-extra": "^9.0.1",
     "jest": "^29.7.0",
     "jest-cli": "^29.7.0",
-    "outsystems-design-tokens": "^1.3.2",
+    "outsystems-design-tokens": "^1.3.4",
+    "playwright-core": "^1.56.1",
     "prettier": "^2.8.8",
     "rollup": "^2.26.4",
     "sass": "^1.33.0",
     "serve": "^14.0.1",
-    "style-dictionary": "^5.0.0",
     "stylelint": "^13.13.1",
     "stylelint-order": "^4.1.0"
   },
@@ -80,7 +83,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": "node ./node_modules/outsystems-design-tokens/scripts/index.js --config ./scripts/tokens/index.mjs && npm run prettier.tokens",
+    "build.tokens": "npx build.tokens --dest src/foundations/ --root=false --scss=true --scss-file=ionic.vars.scss --scss-prefix=ion --utilities=false && 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/testing/scripts.js

@@ -1,30 +1,81 @@
+/**
+ * This script is loaded in testing environments to set up the
+ * document based on URL parameters.
+ * 
+ * Test pages (e.g., `chip/test/basic/index.html`) are set to use
+ * URL query parameters.
+ * 
+ * Playwright test environments (e.g., `chip/test/basic/chip.e2e.ts`)
+ * are set based on whether `setContent` or `goto` has been used:
+ * - `setContent` uses URL hash parameters. Tests will break if
+ * query parameters are used.
+ * - `goto` uses URL query parameters.
+ * 
+ * The following URL parameters are supported:
+ * - `rtl`: Set to `true` to enable right-to-left directionality.
+ * - `ionic:_testing`: Set to `true` to identify testing environments.
+ * - `ionic:theme`: Set to `ios` or `md` to load a specific theme.
+ * Defaults to `md`.
+ * - `palette`: Set to `light`, `dark`, `high-contrast`, or 
+ * `high-contrast-dark` to load a specific palette. Defaults to `light`.
+ */
 
 (function() {
 
-  if (window.location.search.indexOf('rtl=true') > -1) {
+  /**
+   * The `rtl` param is used to set the directionality of the 
+   * document. This can be `true` or `false`.
+   */
+  const isRTL = window.location.search.indexOf('rtl=true') > -1 || window.location.hash.indexOf('rtl=true') > -1;
+
+  if (isRTL) {
     document.documentElement.setAttribute('dir', 'rtl');
   }
 
-  if (window.location.search.indexOf('ionic:_testing=true') > -1) {
+  /**
+   * The `ionic:_testing` param is used to identify testing
+   * environments.
+   */
+  const isTestEnv = window.location.search.indexOf('ionic:_testing=true') > -1 || window.location.hash.indexOf('ionic:_testing=true') > -1;
+
+  if (isTestEnv) {
     const style = document.createElement('style');
     style.innerHTML = `
-* {
-  caret-color: transparent !important;
-}`;
+      * {
+        caret-color: transparent !important;
+      }
+    `;
     document.head.appendChild(style);
   }
 
   /**
-   * The term `palette` is used to as a param to match the
-   * Ionic docs, plus here is already a `ionic:theme` query being
-   * used for `md`, `ios`, and `ionic` themes.
+   * The `palette` param is used to load a specific palette
+   * for the theme.
+   * The dark class will load the dark palette automatically
+   * if no palette is specified through the URL.
+   * 
+   * Values can be `light`, `dark`, `high-contrast`,
+   * or `high-contrast-dark`. Default to `light` for tests.
    */
-  const palette = window.location.search.match(/palette=([a-z]+)/);
-  if (palette && palette[1] !== 'light') {
+  const validPalettes = ['light', 'dark', 'high-contrast', 'high-contrast-dark'];
+  const paletteQuery = window.location.search.match(/palette=([a-z-]+)/);
+  const paletteHash = window.location.hash.match(/palette=([a-z-]+)/);
+  const darkClass = document.body?.classList.contains('ion-palette-dark') ? 'dark' : null;
+  const highContrastClass = document.body?.classList.contains('ion-palette-high-contrast') ? 'high-contrast' : null;
+  const highContrastDarkClass = darkClass && highContrastClass ? 'high-contrast-dark' : null;
+
+  let paletteName = paletteQuery?.[1] || paletteHash?.[1] || highContrastDarkClass || darkClass || highContrastClass || 'light';
+
+  if (!validPalettes.includes(paletteName)) {
+    console.warn(`Invalid palette name: '${paletteName}'. Falling back to 'light' palette.`);
+    paletteName = 'light';
+  }
+
+  if (paletteName !== 'light') {
     const linkTag = document.createElement('link');
     linkTag.setAttribute('rel', 'stylesheet');
     linkTag.setAttribute('type', 'text/css');
-    linkTag.setAttribute('href', `/css/palettes/${palette[1]}.always.css`);
+    linkTag.setAttribute('href', `/css/palettes/${paletteName}.always.css`);
     document.head.appendChild(linkTag);
   }
 
@@ -48,6 +99,15 @@
       document.head.appendChild(linkTag);
     }
 
+    const utilsBundleLinkTag = document.querySelector('link[href*="css/utils.bundle.css"]');
+    if (!utilsBundleLinkTag) {
+      const linkTag = document.createElement('link');
+      linkTag.setAttribute('rel', 'stylesheet');
+      linkTag.setAttribute('type', 'text/css');
+      linkTag.setAttribute('href', '/css/utils.bundle.css');
+      document.head.appendChild(linkTag);
+    }
+
     const defaultThemeLinkTag = document.querySelector('link[href*="css/ionic.bundle.css"]');
     if (defaultThemeLinkTag) {
       defaultThemeLinkTag.remove();

core/scripts/tokens/index.mjs

@@ -1,188 +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.
-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.mjs

@@ -1,320 +0,0 @@
-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

@@ -600,7 +600,7 @@ export namespace Components {
          */
         "expand"?: 'full' | 'block';
         /**
-          * Set to `"clear"` for a transparent button that resembles a flat button, to `"outline"` for a transparent button with a border, or to `"solid"` for a button with a filled background. The default fill is `"solid"` except inside of a toolbar, where the default is `"clear"`.
+          * Set to `"clear"` for a transparent button that resembles a flat button, to `"outline"` for a transparent button with a border, or to `"solid"` for a button with a filled background. The default fill is `"solid"` except when inside of a buttons or datetime component, where the default fill is `"clear"`.
          */
         "fill"?: 'clear' | 'outline' | 'solid' | 'default';
         /**
@@ -1071,6 +1071,10 @@ export namespace Components {
           * The mode determines the platform behaviors of the component.
          */
         "mode"?: "ios" | "md";
+        /**
+          * Recalculate content dimensions. Called by overlays (e.g., popover) when sibling elements like headers or footers have finished rendering and their heights are available, ensuring accurate offset-top calculations.
+         */
+        "recalculateDimensions": () => Promise<void>;
         /**
           * Scroll by a specified X/Y distance in the component.
           * @param x The amount to scroll by on the horizontal axis.
@@ -1775,6 +1779,10 @@ export namespace Components {
           * @default 4
          */
         "length": number;
+        /**
+          * The mode determines the platform behaviors of the component.
+         */
+        "mode"?: "ios" | "md";
         /**
           * A regex pattern string for allowed characters. Defaults based on type.  For numbers (`type="number"`): `"[\p{N}]"` For text (`type="text"`): `"[\p{L}\p{N}]"`
          */
@@ -1803,6 +1811,10 @@ export namespace Components {
           * @default 'medium'
          */
         "size": 'small' | 'medium' | 'large';
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
         /**
           * The type of input allowed in the input boxes.
           * @default 'number'
@@ -6551,7 +6563,7 @@ declare namespace LocalJSX {
          */
         "expand"?: 'full' | 'block';
         /**
-          * Set to `"clear"` for a transparent button that resembles a flat button, to `"outline"` for a transparent button with a border, or to `"solid"` for a button with a filled background. The default fill is `"solid"` except inside of a toolbar, where the default is `"clear"`.
+          * Set to `"clear"` for a transparent button that resembles a flat button, to `"outline"` for a transparent button with a border, or to `"solid"` for a button with a filled background. The default fill is `"solid"` except when inside of a buttons or datetime component, where the default fill is `"clear"`.
          */
         "fill"?: 'clear' | 'outline' | 'solid' | 'default';
         /**
@@ -7758,6 +7770,10 @@ declare namespace LocalJSX {
           * @default 4
          */
         "length"?: number;
+        /**
+          * The mode determines the platform behaviors of the component.
+         */
+        "mode"?: "ios" | "md";
         /**
           * Emitted when the input group loses focus.
          */
@@ -7801,6 +7817,10 @@ declare namespace LocalJSX {
           * @default 'medium'
          */
         "size"?: 'small' | 'medium' | 'large';
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
         /**
           * The type of input allowed in the input boxes.
           * @default 'number'

core/src/components/accordion/accordion.tsx

@@ -42,7 +42,40 @@ const enum AccordionState {
 })
 export class Accordion implements ComponentInterface {
   private accordionGroupEl?: HTMLIonAccordionGroupElement | null;
-  private updateListener = () => this.updateState(false);
+  private accordionGroupUpdateHandler = () => {
+    /**
+     * Determine if this update will cause an actual state change.
+     * We only want to mark as "interacted" if the state is changing.
+     */
+    const accordionGroup = this.accordionGroupEl;
+    if (accordionGroup) {
+      const value = accordionGroup.value;
+      const accordionValue = this.value;
+      const shouldExpand = Array.isArray(value) ? value.includes(accordionValue) : value === accordionValue;
+      const isExpanded = this.state === AccordionState.Expanded || this.state === AccordionState.Expanding;
+      const stateWillChange = shouldExpand !== isExpanded;
+
+      /**
+       * Only mark as interacted if:
+       * 1. This is not the first update we've received with a defined value
+       * 2. The state is actually changing (prevents redundant updates from enabling animations)
+       */
+      if (this.hasReceivedFirstUpdate && stateWillChange) {
+        this.hasInteracted = true;
+      }
+
+      /**
+       * Only count this as the first update if the group value is defined.
+       * This prevents the initial undefined value from the group's componentDidLoad
+       * from being treated as the first real update.
+       */
+      if (value !== undefined) {
+        this.hasReceivedFirstUpdate = true;
+      }
+    }
+
+    this.updateState();
+  };
   private contentEl: HTMLDivElement | undefined;
   private contentElWrapper: HTMLDivElement | undefined;
   private headerEl: HTMLDivElement | undefined;
@@ -54,6 +87,25 @@ export class Accordion implements ComponentInterface {
   @State() state: AccordionState = AccordionState.Collapsed;
   @State() isNext = false;
   @State() isPrevious = false;
+  /**
+   * Tracks whether a user-initiated interaction has occurred.
+   * Animations are disabled until the first interaction happens.
+   * This prevents the accordion from animating when it's programmatically
+   * set to an expanded or collapsed state on initial load.
+   */
+  @State() hasInteracted = false;
+
+  /**
+   * Tracks if this accordion has ever been expanded.
+   * Used to prevent the first expansion from animating.
+   */
+  private hasEverBeenExpanded = false;
+
+  /**
+   * Tracks if this accordion has received its first update from the group.
+   * Used to distinguish initial programmatic sets from user interactions.
+   */
+  private hasReceivedFirstUpdate = false;
 
   /**
    * The value of the accordion. Defaults to an autogenerated
@@ -92,15 +144,15 @@ export class Accordion implements ComponentInterface {
   connectedCallback() {
     const accordionGroupEl = (this.accordionGroupEl = this.el?.closest('ion-accordion-group'));
     if (accordionGroupEl) {
-      this.updateState(true);
-      addEventListener(accordionGroupEl, 'ionValueChange', this.updateListener);
+      this.updateState();
+      addEventListener(accordionGroupEl, 'ionValueChange', this.accordionGroupUpdateHandler);
     }
   }
 
   disconnectedCallback() {
     const accordionGroupEl = this.accordionGroupEl;
     if (accordionGroupEl) {
-      removeEventListener(accordionGroupEl, 'ionValueChange', this.updateListener);
+      removeEventListener(accordionGroupEl, 'ionValueChange', this.accordionGroupUpdateHandler);
     }
   }
 
@@ -237,10 +289,16 @@ export class Accordion implements ComponentInterface {
     ionItem.appendChild(iconEl);
   };
 
-  private expandAccordion = (initialUpdate = false) => {
+  private expandAccordion = () => {
     const { contentEl, contentElWrapper } = this;
-    if (initialUpdate || contentEl === undefined || contentElWrapper === undefined) {
+
+    /**
+     * If the content elements aren't available yet, just set the state.
+     * This happens on initial render before the DOM is ready.
+     */
+    if (contentEl === undefined || contentElWrapper === undefined) {
       this.state = AccordionState.Expanded;
+      this.hasEverBeenExpanded = true;
       return;
     }
 
@@ -252,6 +310,12 @@ export class Accordion implements ComponentInterface {
       cancelAnimationFrame(this.currentRaf);
     }
 
+    /**
+     * Mark that this accordion has been expanded at least once.
+     * This allows subsequent expansions to animate.
+     */
+    this.hasEverBeenExpanded = true;
+
     if (this.shouldAnimate()) {
       raf(() => {
         this.state = AccordionState.Expanding;
@@ -272,9 +336,14 @@ export class Accordion implements ComponentInterface {
     }
   };
 
-  private collapseAccordion = (initialUpdate = false) => {
+  private collapseAccordion = () => {
     const { contentEl } = this;
-    if (initialUpdate || contentEl === undefined) {
+
+    /**
+     * If the content element isn't available yet, just set the state.
+     * This happens on initial render before the DOM is ready.
+     */
+    if (contentEl === undefined) {
       this.state = AccordionState.Collapsed;
       return;
     }
@@ -316,6 +385,19 @@ export class Accordion implements ComponentInterface {
    * of what is set in the config.
    */
   private shouldAnimate = () => {
+    /**
+     * Don't animate until after the first user interaction.
+     * This prevents animations on initial load when accordions
+     * start in an expanded or collapsed state programmatically.
+     *
+     * Additionally, don't animate the very first expansion even if
+     * hasInteracted is true. This handles edge cases like React StrictMode
+     * where effects run twice and might incorrectly mark as interacted.
+     */
+    if (!this.hasInteracted || !this.hasEverBeenExpanded) {
+      return false;
+    }
+
     if (typeof (window as any) === 'undefined') {
       return false;
     }
@@ -337,7 +419,7 @@ export class Accordion implements ComponentInterface {
     return true;
   };
 
-  private updateState = async (initialUpdate = false) => {
+  private updateState = async () => {
     const accordionGroup = this.accordionGroupEl;
     const accordionValue = this.value;
 
@@ -350,10 +432,10 @@ export class Accordion implements ComponentInterface {
     const shouldExpand = Array.isArray(value) ? value.includes(accordionValue) : value === accordionValue;
 
     if (shouldExpand) {
-      this.expandAccordion(initialUpdate);
+      this.expandAccordion();
       this.isNext = this.isPrevious = false;
     } else {
-      this.collapseAccordion(initialUpdate);
+      this.collapseAccordion();
 
       /**
        * When using popout or inset,
@@ -403,6 +485,12 @@ export class Accordion implements ComponentInterface {
 
     if (disabled || readonly) return;
 
+    /**
+     * Mark that the user has interacted with the accordion.
+     * This enables animations for all future state changes.
+     */
+    this.hasInteracted = true;
+
     if (accordionGroupEl) {
       /**
        * Because the accordion group may or may

core/src/components/accordion/test/accordion.spec.ts

@@ -200,6 +200,87 @@ it('should set default values if not provided', async () => {
   expect(accordion.classList.contains('accordion-collapsed')).toEqual(false);
 });
 
+it('should not animate when initial value is set before load', async () => {
+  const page = await newSpecPage({
+    components: [Item, Accordion, AccordionGroup],
+  });
+
+  const accordionGroup = page.doc.createElement('ion-accordion-group');
+  accordionGroup.innerHTML = `
+    <ion-accordion value="first">
+      <ion-item slot="header">Label</ion-item>
+      <div slot="content">Content</div>
+    </ion-accordion>
+    <ion-accordion value="second">
+      <ion-item slot="header">Label</ion-item>
+      <div slot="content">Content</div>
+    </ion-accordion>
+  `;
+
+  accordionGroup.value = 'first';
+  page.body.appendChild(accordionGroup);
+
+  await page.waitForChanges();
+
+  const firstAccordion = accordionGroup.querySelector('ion-accordion[value="first"]')!;
+
+  expect(firstAccordion.classList.contains('accordion-expanded')).toEqual(true);
+  expect(firstAccordion.classList.contains('accordion-expanding')).toEqual(false);
+});
+
+it('should not animate when initial value is set after load', async () => {
+  const page = await newSpecPage({
+    components: [Item, Accordion, AccordionGroup],
+  });
+
+  const accordionGroup = page.doc.createElement('ion-accordion-group');
+  accordionGroup.innerHTML = `
+    <ion-accordion value="first">
+      <ion-item slot="header">Label</ion-item>
+      <div slot="content">Content</div>
+    </ion-accordion>
+    <ion-accordion value="second">
+      <ion-item slot="header">Label</ion-item>
+      <div slot="content">Content</div>
+    </ion-accordion>
+  `;
+
+  page.body.appendChild(accordionGroup);
+  await page.waitForChanges();
+
+  accordionGroup.value = 'first';
+  await page.waitForChanges();
+
+  const firstAccordion = accordionGroup.querySelector('ion-accordion[value="first"]')!;
+
+  expect(firstAccordion.classList.contains('accordion-expanded')).toEqual(true);
+  expect(firstAccordion.classList.contains('accordion-expanding')).toEqual(false);
+});
+
+it('should not have animated class on first expansion', async () => {
+  const page = await newSpecPage({
+    components: [Item, Accordion, AccordionGroup],
+    html: `
+      <ion-accordion-group>
+        <ion-accordion value="first">
+          <ion-item slot="header">Label</ion-item>
+          <div slot="content">Content</div>
+        </ion-accordion>
+      </ion-accordion-group>
+    `,
+  });
+
+  const accordionGroup = page.body.querySelector('ion-accordion-group')!;
+  const firstAccordion = page.body.querySelector('ion-accordion[value="first"]')!;
+
+  // First expansion should not have the animated class
+  accordionGroup.value = 'first';
+  await page.waitForChanges();
+
+  expect(firstAccordion.classList.contains('accordion-animated')).toEqual(false);
+  expect(firstAccordion.classList.contains('accordion-expanded')).toEqual(true);
+});
+
 // Verifies fix for https://github.com/ionic-team/ionic-framework/issues/27047
 it('should not have animated class when animated="false"', async () => {
   const page = await newSpecPage({

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

@@ -1,5 +1,5 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
-import { Watch, Component, Element, Event, Host, Method, Prop, h, readTask } from '@stencil/core';
+import { Watch, Component, Element, Event, Host, Listen, Method, Prop, State, h, readTask } from '@stencil/core';
 import type { Gesture } from '@utils/gesture';
 import { createButtonActiveGesture } from '@utils/gesture/button-active';
 import { raf } from '@utils/helpers';
@@ -48,11 +48,18 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
   private wrapperEl?: HTMLElement;
   private groupEl?: HTMLElement;
   private gesture?: Gesture;
+  private hasRadioButtons = false;
 
   presented = false;
   lastFocus?: HTMLElement;
   animation?: any;
 
+  /**
+   * The ID of the currently active/selected radio button.
+   * Used for keyboard navigation and ARIA attributes.
+   */
+  @State() activeRadioId?: string;
+
   @Element() el!: HTMLIonActionSheetElement;
 
   /** @internal */
@@ -83,6 +90,22 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
    * An array of buttons for the action sheet.
    */
   @Prop() buttons: (ActionSheetButton | string)[] = [];
+  @Watch('buttons')
+  buttonsChanged() {
+    const radioButtons = this.getRadioButtons();
+    this.hasRadioButtons = radioButtons.length > 0;
+
+    // Initialize activeRadioId when buttons change
+    if (this.hasRadioButtons) {
+      const checkedButton = radioButtons.find((b) => b.htmlAttributes?.['aria-checked'] === 'true');
+
+      if (checkedButton) {
+        const allButtons = this.getButtons();
+        const checkedIndex = allButtons.indexOf(checkedButton);
+        this.activeRadioId = this.getButtonId(checkedButton, checkedIndex);
+      }
+    }
+  }
 
   /**
    * Additional classes to apply for custom CSS. If multiple classes are
@@ -279,12 +302,53 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
     return true;
   }
 
+  /**
+   * Get all buttons regardless of role.
+   */
   private getButtons(): ActionSheetButton[] {
     return this.buttons.map((b) => {
       return typeof b === 'string' ? { text: b } : b;
     });
   }
 
+  /**
+   * Get all radio buttons (buttons with role="radio").
+   */
+  private getRadioButtons(): ActionSheetButton[] {
+    return this.getButtons().filter((b) => {
+      const role = b.htmlAttributes?.role;
+      return role === 'radio' && !isCancel(role);
+    });
+  }
+
+  /**
+   * Handle radio button selection and update aria-checked state.
+   *
+   * @param button The radio button that was selected.
+   */
+  private selectRadioButton(button: ActionSheetButton) {
+    const buttonId = this.getButtonId(button);
+
+    // Set the active radio ID (this will trigger a re-render and update aria-checked)
+    this.activeRadioId = buttonId;
+  }
+
+  /**
+   * Get or generate an ID for a button.
+   *
+   * @param button The button for which to get the ID.
+   * @param index Optional index of the button in the buttons array.
+   * @returns The ID of the button.
+   */
+  private getButtonId(button: ActionSheetButton, index?: number): string {
+    if (button.id) {
+      return button.id;
+    }
+    const allButtons = this.getButtons();
+    const buttonIndex = index !== undefined ? index : allButtons.indexOf(button);
+    return `action-sheet-button-${this.overlayIndex}-${buttonIndex}`;
+  }
+
   private onBackdropTap = () => {
     this.dismiss(undefined, BACKDROP);
   };
@@ -297,6 +361,96 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
     }
   };
 
+  /**
+   * When the action sheet has radio buttons, we want to follow the
+   * keyboard navigation pattern for radio groups:
+   * - Arrow Down/Right: Move to the next radio button (wrap to first if at end)
+   * - Arrow Up/Left: Move to the previous radio button (wrap to last if at start)
+   * - Space/Enter: Select the focused radio button and trigger its handler
+   */
+  @Listen('keydown')
+  onKeydown(ev: KeyboardEvent) {
+    // Only handle keyboard navigation if we have radio buttons
+    if (!this.hasRadioButtons || !this.presented) {
+      return;
+    }
+
+    const target = ev.target as HTMLElement;
+
+    // Ignore if the target element is not within the action sheet or not a radio button
+    if (
+      !this.el.contains(target) ||
+      !target.classList.contains('action-sheet-button') ||
+      target.getAttribute('role') !== 'radio'
+    ) {
+      return;
+    }
+
+    // Get all radio button elements and filter out disabled ones
+    const radios = Array.from(this.el.querySelectorAll('.action-sheet-button[role="radio"]')).filter(
+      (el) => !(el as HTMLButtonElement).disabled
+    ) as HTMLButtonElement[];
+    const currentIndex = radios.findIndex((radio) => radio.id === target.id);
+
+    if (currentIndex === -1) {
+      return;
+    }
+
+    const allButtons = this.getButtons();
+    const radioButtons = this.getRadioButtons();
+    /**
+     * Build a map of button element IDs to their ActionSheetButton
+     * config objects.
+     * This allows us to quickly look up which button config corresponds
+     * to a DOM element when handling keyboard navigation
+     * (e.g., whenuser presses Space/Enter or arrow keys).
+     * The key is the ID that was set on the DOM element during render,
+     * and the value is the ActionSheetButton config that contains the
+     * handler and other properties.
+     */
+    const buttonIdMap = new Map<string, ActionSheetButton>();
+
+    radioButtons.forEach((b) => {
+      const allIndex = allButtons.indexOf(b);
+      const buttonId = this.getButtonId(b, allIndex);
+      buttonIdMap.set(buttonId, b);
+    });
+
+    let nextEl: HTMLButtonElement | undefined;
+
+    if (['ArrowDown', 'ArrowRight'].includes(ev.key)) {
+      ev.preventDefault();
+      ev.stopPropagation();
+
+      nextEl = currentIndex === radios.length - 1 ? radios[0] : radios[currentIndex + 1];
+    } else if (['ArrowUp', 'ArrowLeft'].includes(ev.key)) {
+      ev.preventDefault();
+      ev.stopPropagation();
+
+      nextEl = currentIndex === 0 ? radios[radios.length - 1] : radios[currentIndex - 1];
+    } else if (ev.key === ' ' || ev.key === 'Enter') {
+      ev.preventDefault();
+      ev.stopPropagation();
+
+      const button = buttonIdMap.get(target.id);
+      if (button) {
+        this.selectRadioButton(button);
+        this.buttonClick(button);
+      }
+
+      return;
+    }
+
+    // Focus the next radio button
+    if (nextEl) {
+      const button = buttonIdMap.get(nextEl.id);
+      if (button) {
+        this.selectRadioButton(button);
+        nextEl.focus();
+      }
+    }
+  }
+
   connectedCallback() {
     prepareOverlay(this.el);
     this.triggerChanged();
@@ -314,6 +468,8 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
     if (!this.htmlAttributes?.id) {
       setOverlayId(this.el);
     }
+    // Initialize activeRadioId for radio buttons
+    this.buttonsChanged();
   }
 
   componentDidLoad() {
@@ -358,8 +514,82 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
     this.triggerChanged();
   }
 
+  private renderActionSheetButtons(filteredButtons: ActionSheetButton[]) {
+    const theme = getIonTheme(this);
+    const { activeRadioId } = this;
+
+    return filteredButtons.map((b, index) => {
+      const isRadio = b.htmlAttributes?.role === 'radio';
+      const buttonId = this.getButtonId(b, index);
+      const radioButtons = this.getRadioButtons();
+      const isActiveRadio = isRadio && buttonId === activeRadioId;
+      const isFirstRadio = isRadio && b === radioButtons[0];
+
+      // For radio buttons, set tabindex: 0 for the active one, -1 for others
+      // For non-radio buttons, use default tabindex (undefined, which means 0)
+
+      /**
+       * For radio buttons, set tabindex based on activeRadioId
+       * - If the button is the active radio, tabindex is 0
+       * - If no radio is active, the first radio button should have tabindex 0
+       * - All other radio buttons have tabindex -1
+       * For non-radio buttons, use default tabindex (undefined, which means 0)
+       */
+      let tabIndex: number | undefined;
+
+      if (isRadio) {
+        // Focus on the active radio button
+        if (isActiveRadio) {
+          tabIndex = 0;
+        } else if (!activeRadioId && isFirstRadio) {
+          // No active radio, first radio gets focus
+          tabIndex = 0;
+        } else {
+          // All other radios are not focusable
+          tabIndex = -1;
+        }
+      } else {
+        tabIndex = undefined;
+      }
+
+      // For radio buttons, set aria-checked based on activeRadioId
+      // Otherwise, use the value from htmlAttributes if provided
+      const htmlAttrs = { ...b.htmlAttributes };
+      if (isRadio) {
+        htmlAttrs['aria-checked'] = isActiveRadio ? 'true' : 'false';
+      }
+
+      return (
+        <button
+          {...htmlAttrs}
+          role={isRadio ? 'radio' : undefined}
+          type="button"
+          id={buttonId}
+          class={{
+            ...buttonClass(b),
+            'action-sheet-selected': isActiveRadio,
+          }}
+          onClick={() => {
+            if (isRadio) {
+              this.selectRadioButton(b);
+            }
+            this.buttonClick(b);
+          }}
+          disabled={b.disabled}
+          tabIndex={tabIndex}
+        >
+          <span class="action-sheet-button-inner">
+            {b.icon && <ion-icon icon={b.icon} aria-hidden="true" lazy={false} class="action-sheet-icon" />}
+            {b.text}
+          </span>
+          {theme === 'md' && <ion-ripple-effect></ion-ripple-effect>}
+        </button>
+      );
+    });
+  }
+
   render() {
-    const { header, htmlAttributes, overlayIndex } = this;
+    const { header, htmlAttributes, overlayIndex, hasRadioButtons } = this;
     const theme = getIonTheme(this);
     const allButtons = this.getButtons();
     const cancelButton = allButtons.find((b) => b.role === 'cancel');
@@ -391,7 +621,11 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
 
         <div class="action-sheet-wrapper ion-overlay-wrapper" ref={(el) => (this.wrapperEl = el)}>
           <div class="action-sheet-container">
-            <div class="action-sheet-group" ref={(el) => (this.groupEl = el)}>
+            <div
+              class="action-sheet-group"
+              ref={(el) => (this.groupEl = el)}
+              role={hasRadioButtons ? 'radiogroup' : undefined}
+            >
               {header !== undefined && (
                 <div
                   id={headerID}
@@ -404,22 +638,7 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
                   {this.subHeader && <div class="action-sheet-sub-title">{this.subHeader}</div>}
                 </div>
               )}
-              {buttons.map((b) => (
-                <button
-                  {...b.htmlAttributes}
-                  type="button"
-                  id={b.id}
-                  class={buttonClass(b)}
-                  onClick={() => this.buttonClick(b)}
-                  disabled={b.disabled}
-                >
-                  <span class="action-sheet-button-inner">
-                    {b.icon && <ion-icon icon={b.icon} aria-hidden="true" lazy={false} class="action-sheet-icon" />}
-                    {b.text}
-                  </span>
-                  {theme === 'md' && <ion-ripple-effect></ion-ripple-effect>}
-                </button>
-              ))}
+              {this.renderActionSheetButtons(buttons)}
             </div>
 
             {cancelButton && (

core/src/components/action-sheet/test/a11y/action-sheet.e2e.ts

@@ -134,3 +134,58 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
     });
   });
 });
+
+/**
+ * This behavior does not vary across modes/directions.
+ */
+configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
+  test.describe(title('action-sheet: radio buttons'), () => {
+    test('should render action sheet with radio buttons correctly', async ({ page }) => {
+      await page.goto(`/src/components/action-sheet/test/a11y`, config);
+
+      const ionActionSheetDidPresent = await page.spyOnEvent('ionActionSheetDidPresent');
+      const button = page.locator('#radioButtons');
+
+      await button.click();
+      await ionActionSheetDidPresent.next();
+
+      const actionSheet = page.locator('ion-action-sheet');
+
+      const radioButtons = actionSheet.locator('.action-sheet-button[role="radio"]');
+      await expect(radioButtons).toHaveCount(2);
+    });
+
+    test('should navigate radio buttons with keyboard', async ({ page, pageUtils }) => {
+      await page.goto(`/src/components/action-sheet/test/a11y`, config);
+
+      const ionActionSheetDidPresent = await page.spyOnEvent('ionActionSheetDidPresent');
+      const button = page.locator('#radioButtons');
+
+      await button.click();
+      await ionActionSheetDidPresent.next();
+
+      // Focus on the radios
+      await pageUtils.pressKeys('Tab');
+
+      // Verify the first focusable radio button is focused
+      let focusedElement = await page.evaluate(() => document.activeElement?.textContent?.trim());
+      expect(focusedElement).toBe('Option 2');
+
+      // Navigate to the next radio button
+      await page.keyboard.press('ArrowDown');
+
+      // Verify the first radio button is focused again (wrap around)
+      focusedElement = await page.evaluate(() => document.activeElement?.textContent?.trim());
+      expect(focusedElement).toBe('Option 1');
+
+      // Navigate to the next radio button
+      await page.keyboard.press('ArrowDown');
+
+      // Navigate to the cancel button
+      await pageUtils.pressKeys('Tab');
+
+      focusedElement = await page.evaluate(() => document.activeElement?.textContent?.trim());
+      expect(focusedElement).toBe('Cancel');
+    });
+  });
+});

core/src/components/action-sheet/test/a11y/index.html

@@ -27,6 +27,7 @@
       <button class="expand" id="ariaLabelCancelButton" onclick="presentAriaLabelCancelButton()">
         Aria Label Cancel Button
       </button>
+      <button class="expand" id="radioButtons" onclick="presentRadioButtons()">Radio Buttons</button>
     </main>
 
     <script>
@@ -100,6 +101,32 @@
           ],
         });
       }
+
+      function presentRadioButtons() {
+        openActionSheet({
+          header: 'Select an option',
+          buttons: [
+            {
+              text: 'Option 1',
+              htmlAttributes: {
+                role: 'radio',
+                'aria-checked': 'false',
+              },
+            },
+            {
+              text: 'Option 2',
+              htmlAttributes: {
+                role: 'radio',
+                'aria-checked': 'true',
+              },
+            },
+            {
+              text: 'Cancel',
+              role: 'cancel',
+            },
+          ],
+        });
+      }
     </script>
   </body>
 </html>

core/src/components/app/test/safe-area/app.e2e.ts

@@ -5,7 +5,7 @@ import type { E2EPage } from '@utils/test/playwright';
 /**
  * Safe area tests only check top and bottom edges. RTL checks are not required here.
  */
-configs({ directions: ['ltr'] }).forEach(({ config, title, screenshot }) => {
+configs({ directions: ['ltr'], modes: ['ios', 'md', 'ionic-md'] }).forEach(({ config, title, screenshot }) => {
   test.describe(title('app: safe-area'), () => {
     const testOverlay = async (page: E2EPage, trigger: string, event: string, screenshotModifier: string) => {
       const presentEvent = await page.spyOnEvent(event);
@@ -18,20 +18,66 @@ configs({ directions: ['ltr'] }).forEach(({ config, title, screenshot }) => {
 
       await expect(page).toHaveScreenshot(screenshot(`app-${screenshotModifier}-diff`));
     };
+
     test.beforeEach(async ({ page }) => {
       await page.goto(`/src/components/app/test/safe-area`, config);
     });
-    test('should not have visual regressions with action sheet', async ({ page }) => {
-      await testOverlay(page, '#show-action-sheet', 'ionActionSheetDidPresent', 'action-sheet');
+
+    test.describe(title('Ionic safe area variables'), () => {
+      test.beforeEach(async ({ page }) => {
+        const htmlTag = page.locator('html');
+        const hasSafeAreaClass = await htmlTag.evaluate((el) => el.classList.contains('safe-area'));
+
+        expect(hasSafeAreaClass).toBe(true);
+      });
+
+      test('should not have visual regressions with action sheet', async ({ page }) => {
+        await testOverlay(page, '#show-action-sheet', 'ionActionSheetDidPresent', 'action-sheet');
+      });
+      test('should not have visual regressions with menu', async ({ page }) => {
+        await testOverlay(page, '#show-menu', 'ionDidOpen', 'menu');
+      });
+      test('should not have visual regressions with picker', async ({ page }) => {
+        await testOverlay(page, '#show-picker', 'ionPickerDidPresent', 'picker');
+      });
+      test('should not have visual regressions with toast', async ({ page }) => {
+        await testOverlay(page, '#show-toast', 'ionToastDidPresent', 'toast');
+      });
     });
-    test('should not have visual regressions with menu', async ({ page }) => {
-      await testOverlay(page, '#show-menu', 'ionDidOpen', 'menu');
-    });
-    test('should not have visual regressions with picker', async ({ page }) => {
-      await testOverlay(page, '#show-picker', 'ionPickerDidPresent', 'picker');
-    });
-    test('should not have visual regressions with toast', async ({ page }) => {
-      await testOverlay(page, '#show-toast', 'ionToastDidPresent', 'toast');
+
+    test.describe(title('Capacitor safe area variables'), () => {
+      test('should use safe-area-inset vars when safe-area class is not defined', async ({ page }) => {
+        await page.evaluate(() => {
+          const html = document.documentElement;
+
+          // Remove the safe area class
+          html.classList.remove('safe-area');
+
+          // Set the safe area inset variables
+          html.style.setProperty('--safe-area-inset-top', '10px');
+          html.style.setProperty('--safe-area-inset-bottom', '20px');
+          html.style.setProperty('--safe-area-inset-left', '30px');
+          html.style.setProperty('--safe-area-inset-right', '40px');
+        });
+
+        const top = await page.evaluate(() =>
+          getComputedStyle(document.documentElement).getPropertyValue('--ion-safe-area-top').trim()
+        );
+        const bottom = await page.evaluate(() =>
+          getComputedStyle(document.documentElement).getPropertyValue('--ion-safe-area-bottom').trim()
+        );
+        const left = await page.evaluate(() =>
+          getComputedStyle(document.documentElement).getPropertyValue('--ion-safe-area-left').trim()
+        );
+        const right = await page.evaluate(() =>
+          getComputedStyle(document.documentElement).getPropertyValue('--ion-safe-area-right').trim()
+        );
+
+        expect(top).toBe('10px');
+        expect(bottom).toBe('20px');
+        expect(left).toBe('30px');
+        expect(right).toBe('40px');
+      });
     });
   });
 });

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

@@ -244,7 +244,7 @@
 
 // Avatar Disabled
 // --------------------------------------------------
-:host(.avatar-disabled)::before {
+:host(.avatar-disabled)::after {
   @include globals.border-radius(var(--border-radius));
   @include globals.disabled-state();
 }

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

@@ -12,6 +12,9 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screens
         ` 
         <div id="container"> 
           <ion-avatar disabled> AV </ion-avatar>
+          <ion-avatar disabled>
+            <ion-icon name="person-outline"></ion-icon>
+          </ion-avatar>
           <ion-avatar disabled>
             <img src="/src/components/avatar/test/avatar.svg" />
           </ion-avatar>

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

@@ -25,6 +25,9 @@
       <ion-content>
         <h3>Disabled</h3>
         <ion-avatar disabled>AV</ion-avatar>
+        <ion-avatar disabled>
+          <ion-icon name="person-outline"></ion-icon>
+        </ion-avatar>
         <ion-avatar disabled>
           <img src="/src/components/avatar/test/avatar.svg" />
         </ion-avatar>

core/src/components/button/button.ionic.scss

@@ -59,9 +59,9 @@
 :host(.button-outline) {
   --border-width: #{globals.$ion-border-size-025};
   --border-style: #{globals.$ion-border-style-solid};
-  --background-activated: #{globals.$ion-bg-neutral-subtlest-press};
+  --background-activated: #{globals.ion-color(primary, shade, $subtle: true)};
   --background-focused: transparent;
-  --background-hover: #{globals.$ion-bg-neutral-subtlest-press};
+  --background-hover: #{globals.ion-color(primary, shade, $subtle: true)};
   --background-hover-opacity: 1;
   --border-color: #{globals.ion-color(primary, base)};
   --color: #{globals.ion-color(primary, base)};
@@ -69,13 +69,20 @@
   --ripple-color: var(--background-activated);
 }
 
+// Warning Outline Button - use foreground color for text and border
+:host(.button-outline.ion-color-warning) .button-native {
+  border-color: globals.ion-color(warning, foreground);
+
+  color: globals.ion-color(warning, foreground);
+}
+
 // Clear Button
 // --------------------------------------------------
 
 :host(.button-clear) {
-  --background-activated: #{globals.$ion-bg-neutral-subtlest-press};
+  --background-activated: #{globals.ion-color(primary, shade, $subtle: true)};
   --background-focused: transparent;
-  --background-hover: #{globals.$ion-bg-neutral-subtlest-press};
+  --background-hover: #{globals.ion-color(primary, shade, $subtle: true)};
   --background-hover-opacity: 1;
   --color: #{globals.ion-color(primary, foreground)};
   --ripple-opacity: var(--background-activated-opacity, 1);
@@ -91,7 +98,7 @@
 
 :host(.button-outline.ion-color) ion-ripple-effect,
 :host(.button-clear.ion-color) ion-ripple-effect {
-  color: globals.$ion-primitives-neutral-200;
+  color: globals.current-color(shade, $subtle: true);
 }
 
 // Button Sizes
@@ -178,21 +185,21 @@
 // --------------------------------------------------
 
 :host(.button-soft) {
-  --border-radius: #{globals.$ion-border-radius-200};
+  --border-radius: #{globals.$ion-soft-xs};
 }
 
 // Round Button
 // --------------------------------------------------
 
 :host(.button-round) {
-  --border-radius: #{globals.$ion-border-radius-full};
+  --border-radius: #{globals.$ion-round-xs};
 }
 
 // Rectangular Button
 // --------------------------------------------------
 
 :host(.button-rectangular) {
-  --border-radius: #{globals.$ion-border-radius-0};
+  --border-radius: #{globals.$ion-rectangular-xs};
 }
 
 // Button: Focus
@@ -211,8 +218,15 @@
   background: globals.current-color(shade);
 }
 
+:host(.button-outline.ion-color.ion-activated) .button-native::after,
+:host(.button-clear.ion-color.ion-activated) .button-native::after {
+  background: globals.current-color(shade, $subtle: true);
+}
+
 :host(.ion-activated) .button-native:has(ion-ripple-effect)::after,
-:host(.button-solid.ion-color.ion-activated) .button-native:has(ion-ripple-effect)::after {
+:host(.button-solid.ion-color.ion-activated) .button-native:has(ion-ripple-effect)::after,
+:host(.button-outline.ion-color.ion-activated) .button-native:has(ion-ripple-effect)::after,
+:host(.button-clear.ion-color.ion-activated) .button-native:has(ion-ripple-effect)::after {
   background: transparent;
 }
 
@@ -223,6 +237,11 @@
   :host(.button-solid.ion-color:hover) .button-native::after {
     background: globals.current-color(shade);
   }
+
+  :host(.button-outline.ion-color:hover) .button-native::after,
+  :host(.button-clear.ion-color:hover) .button-native::after {
+    background: globals.current-color(shade, $subtle: true);
+  }
 }
 
 // Button: Disabled
@@ -315,3 +334,12 @@
     @include globals.position(null, globals.$ion-space-200, globals.$ion-space-200, null);
   }
 }
+
+// Button in Datetime
+// --------------------------------------------------
+
+:host(.in-datetime) {
+  @include globals.typography(globals.$ion-body-action-md);
+
+  min-height: globals.$ion-space-1200;
+}

core/src/components/button/button.ios.scss

@@ -293,3 +293,16 @@
   background: var(--ion-toolbar-color, var(--color));
   color: #{var(--ion-toolbar-background, var(--background), ion-color(primary, contrast))};
 }
+
+// Button in Datetime
+// --------------------------------------------------
+
+:host(.in-datetime) {
+  --padding-top: 3px;
+  --padding-bottom: 3px;
+  --padding-start: 5px;
+  --padding-end: 5px;
+
+  font-size: dynamic-font-clamp(1, 17px, 1.24);
+  font-weight: 400;
+}

core/src/components/button/button.md.scss

@@ -243,3 +243,20 @@
   background: var(--ion-toolbar-background, var(--color));
   color: #{var(--ion-toolbar-color, var(--background), ion-color(primary, contrast))};
 }
+
+// Button in Datetime
+// --------------------------------------------------
+
+:host(.in-datetime) {
+  --padding-top: 3px;
+  --padding-bottom: 3px;
+  --padding-start: 8px;
+  --padding-end: 8px;
+  --box-shadow: none;
+}
+
+:host(.in-datetime.button-clear) {
+  --background-activated: transparent;
+  --background-focused: currentColor;
+  --background-hover: currentColor;
+}

core/src/components/button/button.native.scss

@@ -59,3 +59,12 @@
 :host ::slotted(ion-badge[vertical]:not(:empty)) {
   @include globals.padding(2px);
 }
+
+// Button in Datetime
+// --------------------------------------------------
+
+:host(.in-datetime) {
+  @include globals.margin(0px, 2px, 0px, 2px);
+
+  min-height: 32px;
+}

core/src/components/button/button.tsx

@@ -31,9 +31,10 @@ import type { RouterDirection } from '../router/utils/interface';
   shadow: true,
 })
 export class Button implements ComponentInterface, AnchorInterface, ButtonInterface {
+  private inDatetime = false;
   private inItem = false;
   private inListHeader = false;
-  private inToolbar = false;
+  private inButtons = false;
   private formButtonEl: HTMLButtonElement | null = null;
   private formEl: HTMLFormElement | null = null;
   private inheritedAttributes: Attributes = {};
@@ -78,7 +79,8 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
   /**
    * Set to `"clear"` for a transparent button that resembles a flat button, to `"outline"`
    * for a transparent button with a border, or to `"solid"` for a button with a filled background.
-   * The default fill is `"solid"` except inside of a toolbar, where the default is `"clear"`.
+   * The default fill is `"solid"` except when inside of a buttons or datetime component, where
+   * the default fill is `"clear"`.
    */
   @Prop({ reflect: true, mutable: true }) fill?: 'clear' | 'outline' | 'solid' | 'default';
 
@@ -174,6 +176,7 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
    */
   @Watch('aria-checked')
   @Watch('aria-label')
+  @Watch('aria-pressed')
   onAriaChanged(newValue: string, _oldValue: string, propName: string) {
     this.inheritedAttributes = {
       ...this.inheritedAttributes,
@@ -216,9 +219,10 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
   }
 
   componentWillLoad() {
-    this.inToolbar = !!this.el.closest('ion-buttons');
-    this.inListHeader = !!this.el.closest('ion-list-header');
-    this.inItem = !!this.el.closest('ion-item') || !!this.el.closest('ion-item-divider');
+    this.inDatetime = hostContext('ion-datetime', this.el);
+    this.inButtons = hostContext('ion-buttons', this.el);
+    this.inListHeader = hostContext('ion-list-header', this.el);
+    this.inItem = hostContext('ion-item', this.el) || hostContext('ion-item-divider', this.el);
     this.inheritedAttributes = inheritAriaAttributes(this.el);
   }
 
@@ -233,9 +237,11 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
   private get rippleType() {
     const hasClearFill = this.fill === undefined || this.fill === 'clear';
 
-    // If the button is in a toolbar, has a clear fill (which is the default)
-    // and only has an icon we use the unbounded "circular" ripple effect
-    if (hasClearFill && this.hasIconOnly && this.inToolbar) {
+    // Use the unbounded "circular" ripple effect if it:
+    // - Has a clear fill (the default)
+    // - Only has an icon and
+    // - Is inside of buttons (used in a toolbar) or a datetime
+    if (hasClearFill && this.hasIconOnly && (this.inButtons || this.inDatetime)) {
       return 'unbounded';
     }
 
@@ -399,12 +405,8 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
             target,
           };
     let fill = this.fill;
-    /**
-     * We check both undefined and null to
-     * work around https://github.com/ionic-team/stencil/issues/3586.
-     */
-    if (fill == null) {
-      fill = this.inToolbar || this.inListHeader ? 'clear' : 'solid';
+    if (fill === undefined) {
+      fill = this.inDatetime || this.inButtons || this.inListHeader ? 'clear' : 'solid';
     }
 
     /**
@@ -430,9 +432,10 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
           [`${buttonType}-${shape}`]: true,
           [`${buttonType}-${fill}`]: true,
           [`${buttonType}-strong`]: strong,
+          'in-datetime': this.inDatetime,
           'in-toolbar': hostContext('ion-toolbar', this.el),
           'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
-          'in-buttons': hostContext('ion-buttons', this.el),
+          'in-buttons': this.inButtons,
           'button-has-icon-only': hasIconOnly,
           'button-has-badge': hasBadge,
           'button-disabled': disabled,