fix(sheet): disable focus trap with string-based logic as well

.github/ionic-issue-bot.yml

@@ -40,7 +40,7 @@ comment:
 
 
         If the requested feature is something you would find useful for your applications, please react to the original post with 👍 (`+1`). If you would like to provide an additional use case for the feature, please post a comment.
-
+        
 
         The team will review this feedback and make a final decision. Any decision will be posted on this thread, but please note that we may ultimately decide not to pursue this feature.
 
@@ -83,7 +83,6 @@ stale:
   exemptLabels:
     - "good first issue"
     - "triage"
-    - "bug: external"
     - "type: bug"
     - "type: feature request"
     - "needs: investigation"

.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@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
+    - uses: actions/setup-node@v5
       with:
-        node-version: 24.x
+        node-version: 22.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@v6
+    - uses: actions/setup-node@v5
       with:
-        node-version: 24.x
+        node-version: 22.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@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
-    - uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
+    - uses: actions/checkout@v5
+    - uses: actions/setup-node@v5
       with:
-        node-version: 24.x
+        node-version: 22.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@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
-    - uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
+    - uses: actions/checkout@v5
+    - uses: actions/setup-node@v5
       with:
-        node-version: 24.x
-    - name: 🕸️ Install Dependencies
+        node-version: 22.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@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
+    - uses: actions/setup-node@v5
       with:
-        node-version: 24.x
+        node-version: 22.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@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
+    - uses: actions/setup-node@v5
       with:
-        node-version: 24.x
+        node-version: 22.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@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
+    - uses: actions/setup-node@v5
       with:
-        node-version: 24.x
+        node-version: 22.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@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
+    - uses: actions/setup-node@v5
       with:
-        node-version: 24.x
+        node-version: 22.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@v7
+    - uses: actions/download-artifact@v5
       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/publish-npm/action.yml

@@ -8,53 +8,48 @@ inputs:
   tag:
     description: 'The tag to publish to on NPM.'
   preid:
-    description: "Prerelease identifier such as 'alpha', 'beta', 'rc', or 'next'. Leave blank to skip prerelease tagging."
+    description: 'The prerelease identifier used when doing a prerelease.'
   working-directory:
     description: 'The directory of the package.'
   folder:
     default: './'
     description: 'A folder containing a package.json file.'
-  node-version:
-    description: 'Node.js version to use when publishing.'
-    required: false
-    default: '24.x'
+  token:
+    description: 'The NPM authentication token required to publish.'
 runs:
   using: 'composite'
   steps:
-    - name: 🟢 Configure Node for Publish
-      uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
+    - uses: actions/setup-node@v5
       with:
-        node-version: ${{ inputs.node-version }}
-        registry-url: 'https://registry.npmjs.org'
-        scope: '@ionic'
+        node-version: 22.x
     # 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: 🏷️ 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
+    - name: Update Version
+      run: npx lerna@5 version ${{ inputs.version }} --yes --exact --no-changelog --no-push --no-git-tag-version --preid=${{ inputs.preid }}
       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: 🚀 Publish to NPM
+    - 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
       run: npm publish ${{ inputs.folder }} --tag ${{ inputs.tag }} --provenance
       shell: bash
       working-directory: ${{ inputs.working-directory }}
-

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

@@ -6,9 +6,9 @@ inputs:
 runs:
   using: 'composite'
   steps:
-    - uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
+    - uses: actions/setup-node@v5
       with:
-        node-version: 24.x
+        node-version: 22.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@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
+    - uses: actions/setup-node@v5
       with:
-        node-version: 24.x
+        node-version: 22.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@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
+    - uses: actions/setup-node@v5
       with:
-        node-version: 24.x
-    - name: 🕸️ Install Dependencies
+        node-version: 22.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@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
+    - uses: actions/setup-node@v5
       with:
-        node-version: 24.x
+        node-version: 22.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@v6
+      uses: actions/upload-artifact@v4
       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@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
+    - uses: actions/setup-node@v5
       with:
-        node-version: 24.x
-    - name: 🕸️ Install Dependencies
+        node-version: 22.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@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
+    - uses: actions/setup-node@v5
       with:
-        node-version: 24.x
+        node-version: 22.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@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
+    - uses: actions/setup-node@v5
       with:
-        node-version: 24.x
+        node-version: 22.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@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
+    - uses: actions/setup-node@v5
       with:
-        node-version: 24.x
+        node-version: 22.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@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
+    - uses: actions/setup-node@v5
       with:
-        node-version: 24.x
-    - uses: actions/download-artifact@v7
+        node-version: 22.x
+    - uses: actions/download-artifact@v5
       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@v6
+    - uses: actions/upload-artifact@v4
       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@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+      - uses: actions/checkout@v5
       - uses: ./.github/workflows/actions/build-core
         with:
           ionicons-version: ${{ inputs.ionicons_npm_release_tag }}
@@ -31,21 +31,21 @@ jobs:
     needs: [build-core]
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+      - uses: actions/checkout@v5
       - uses: ./.github/workflows/actions/test-core-clean-build
 
   test-core-lint:
     needs: [build-core]
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+      - uses: actions/checkout@v5
       - uses: ./.github/workflows/actions/test-core-lint
 
   test-core-spec:
     needs: [build-core]
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+      - uses: actions/checkout@v5
       - uses: ./.github/workflows/actions/test-core-spec
 
   test-core-screenshot:
@@ -62,7 +62,7 @@ jobs:
     needs: [build-core]
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+      - uses: actions/checkout@v5
       - uses: ./.github/workflows/actions/test-core-screenshot
         with:
           shard: ${{ matrix.shard }}
@@ -90,14 +90,14 @@ jobs:
     needs: [build-core]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+    - uses: actions/checkout@v5
     - uses: ./.github/workflows/actions/build-vue
 
   build-vue-router:
     needs: [build-vue]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+    - uses: actions/checkout@v5
     - uses: ./.github/workflows/actions/build-vue-router
 
   test-vue-e2e:
@@ -108,7 +108,7 @@ jobs:
     needs: [build-vue, build-vue-router]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+    - uses: actions/checkout@v5
     - uses: ./.github/workflows/actions/test-vue-e2e
       with:
         app: ${{ matrix.apps }}
@@ -126,14 +126,14 @@ jobs:
     needs: [build-core]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+    - uses: actions/checkout@v5
     - uses: ./.github/workflows/actions/build-angular
 
   build-angular-server:
     needs: [build-core]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+    - uses: actions/checkout@v5
     - uses: ./.github/workflows/actions/build-angular-server
 
   test-angular-e2e:
@@ -144,7 +144,7 @@ jobs:
     needs: [build-angular, build-angular-server]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+    - uses: actions/checkout@v5
     - uses: ./.github/workflows/actions/test-angular-e2e
       with:
         app: ${{ matrix.apps }}
@@ -162,14 +162,14 @@ jobs:
     needs: [build-core]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+    - uses: actions/checkout@v5
     - uses: ./.github/workflows/actions/build-react
 
   build-react-router:
     needs: [build-react]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+    - uses: actions/checkout@v5
     - uses: ./.github/workflows/actions/build-react-router
 
   test-react-router-e2e:
@@ -180,7 +180,7 @@ jobs:
     needs: [build-react, build-react-router]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+    - uses: actions/checkout@v5
     - uses: ./.github/workflows/actions/test-react-router-e2e
       with:
         app: ${{ matrix.apps }}
@@ -202,7 +202,7 @@ jobs:
     needs: [build-react, build-react-router]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+    - uses: actions/checkout@v5
     - 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@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
-      - uses: github/codeql-action/init@v4
+      - uses: actions/checkout@v5
+      - uses: github/codeql-action/init@v3
         with:
           languages: javascript
-      - uses: github/codeql-action/analyze@v4
+      - uses: github/codeql-action/analyze@v3

.github/workflows/dev-build.yml

@@ -1,11 +1,7 @@
 name: 'Ionic Dev Build'
 
 on:
-  workflow_call:
-
-permissions:
-  contents: read
-  id-token: write
+  workflow_dispatch:
 
 jobs:
   create-dev-hash:
@@ -13,7 +9,7 @@ jobs:
     outputs:
       dev-hash: ${{ steps.create-dev-hash.outputs.DEV_HASH }}
     steps:
-      - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+      - uses: actions/checkout@v5
       # A 1 is required before the timestamp
       # as lerna will fail when there is a leading 0
       # See https://github.com/lerna/lerna/issues/2840
@@ -29,12 +25,13 @@ 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,11 +1,10 @@
 name: 'Ionic Nightly Build'
 
 on:
-  workflow_call:
-
-permissions:
-  contents: read
-  id-token: write
+  schedule:
+    # Run every Monday-Friday
+    # at 6:00 UTC (6:00 am UTC)
+    - cron: '00 06 * * 1-5'
 
 jobs:
   create-nightly-hash:
@@ -13,7 +12,7 @@ jobs:
     outputs:
       nightly-hash: ${{ steps.create-nightly-hash.outputs.NIGHTLY_HASH }}
     steps:
-      - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+      - uses: actions/checkout@v5
       # A 1 is required before the timestamp
       # as lerna will fail when there is a leading 0
       # See https://github.com/lerna/lerna/issues/2840
@@ -31,10 +30,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
-
-permissions:
-  contents: read
-  id-token: write
+    secrets:
+      NPM_TOKEN:
+        required: true
 
 jobs:
   release-core:
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
-    - uses: ./.github/actions/publish-npm
+    - uses: actions/checkout@v5
+    - uses: ./.github/workflows/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,33 +48,34 @@ jobs:
     needs: [release-core]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+    - uses: actions/checkout@v5
     - name: Restore @ionic/docs built cache
       uses: ./.github/workflows/actions/download-archive
       with:
         name: ionic-docs
         path: ./packages/docs
         filename: DocsBuild.zip
-    - uses: ./.github/actions/publish-npm
+    - uses: ./.github/workflows/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@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+    - uses: actions/checkout@v5
     - name: Restore @ionic/core built cache
       uses: ./.github/workflows/actions/download-archive
       with:
         name: ionic-core
         path: ./core
         filename: CoreBuild.zip
-    - uses: ./.github/actions/publish-npm
+    - uses: ./.github/workflows/actions/publish-npm
       with:
         scope: '@ionic/angular'
         tag: ${{ inputs.tag }}
@@ -82,6 +83,7 @@ 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:
@@ -93,20 +95,21 @@ jobs:
     needs: [release-core]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+    - uses: actions/checkout@v5
     - name: Restore @ionic/core built cache
       uses: ./.github/workflows/actions/download-archive
       with:
         name: ionic-core
         path: ./core
         filename: CoreBuild.zip
-    - uses: ./.github/actions/publish-npm
+    - uses: ./.github/workflows/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:
@@ -118,20 +121,21 @@ jobs:
     needs: [release-core]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+    - uses: actions/checkout@v5
     - name: Restore @ionic/core built cache
       uses: ./.github/workflows/actions/download-archive
       with:
         name: ionic-core
         path: ./core
         filename: CoreBuild.zip
-    - uses: ./.github/actions/publish-npm
+    - uses: ./.github/workflows/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:
@@ -143,14 +147,14 @@ jobs:
     needs: [release-core]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+    - uses: actions/checkout@v5
     - name: Restore @ionic/core built cache
       uses: ./.github/workflows/actions/download-archive
       with:
         name: ionic-core
         path: ./core
         filename: CoreBuild.zip
-    - uses: ./.github/actions/publish-npm
+    - uses: ./.github/workflows/actions/publish-npm
       with:
         scope: '@ionic/angular-server'
         tag: ${{ inputs.tag }}
@@ -158,12 +162,13 @@ 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@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+    - uses: actions/checkout@v5
     - name: Restore @ionic/core built cache
       uses: ./.github/workflows/actions/download-archive
       with:
@@ -176,19 +181,20 @@ jobs:
         name: ionic-react
         path: ./packages/react
         filename: ReactBuild.zip
-    - uses: ./.github/actions/publish-npm
+    - uses: ./.github/workflows/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@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+    - uses: actions/checkout@v5
     - name: Restore @ionic/core built cache
       uses: ./.github/workflows/actions/download-archive
       with:
@@ -201,10 +207,11 @@ jobs:
         name: ionic-vue
         path: ./packages/vue
         filename: VueBuild.zip
-    - uses: ./.github/actions/publish-npm
+    - uses: ./.github/workflows/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

@@ -1,81 +0,0 @@
-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,64 +1,54 @@
 name: 'Ionic Production Release'
 
 on:
-  workflow_call:
+  workflow_dispatch:
     inputs:
       version:
-        description: 'Which version should be published?'
         required: true
-        type: string
+        type: choice
+        description: Which version should be published?
+        options:
+          - patch
+          - minor
+          - major
+          - prepatch
+          - preminor
+          - premajor
+          - prerelease
       tag:
-        description: 'Which npm tag should this be published to?'
         required: true
-        type: string
+        type: choice
+        description: Which npm tag should this be published to?
+        options:
+          - latest
+          - next
       preid:
-        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
+        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
 
 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@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+    - uses: actions/checkout@v5
       with:
         token: ${{ secrets.IONITRON_TOKEN }}
         fetch-depth: 0
@@ -85,11 +75,8 @@ 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@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+      - uses: actions/checkout@v5
         # Pull the latest version of the reference
         # branch instead of the revision that triggered
         # the workflow otherwise we won't get the commit

.github/workflows/stencil-nightly.yml

@@ -26,7 +26,7 @@ jobs:
   build-core-with-stencil-nightly:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+      - uses: actions/checkout@v5
       - uses: ./.github/workflows/actions/build-core-stencil-prerelease
         with:
           stencil-version: ${{ inputs.npm_release_tag || 'nightly' }}
@@ -35,21 +35,21 @@ jobs:
     needs: [build-core-with-stencil-nightly]
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+      - uses: actions/checkout@v5
       - uses: ./.github/workflows/actions/test-core-clean-build
 
   test-core-lint:
     needs: [build-core-with-stencil-nightly]
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+      - uses: actions/checkout@v5
       - uses: ./.github/workflows/actions/test-core-lint
 
   test-core-spec:
     needs: [build-core-with-stencil-nightly]
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+      - uses: actions/checkout@v5
       - uses: ./.github/workflows/actions/test-core-spec
         with:
           stencil-version: ${{ inputs.npm_release_tag || 'nightly' }}
@@ -72,7 +72,7 @@ jobs:
     needs: [build-core-with-stencil-nightly]
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+      - uses: actions/checkout@v5
       - uses: ./.github/workflows/actions/test-core-screenshot
         with:
           shard: ${{ matrix.shard }}
@@ -100,14 +100,14 @@ jobs:
     needs: [build-core-with-stencil-nightly]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+    - uses: actions/checkout@v5
     - uses: ./.github/workflows/actions/build-vue
 
   build-vue-router:
     needs: [build-vue]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+    - uses: actions/checkout@v5
     - uses: ./.github/workflows/actions/build-vue-router
 
   test-vue-e2e:
@@ -118,7 +118,7 @@ jobs:
     needs: [build-vue, build-vue-router]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+    - uses: actions/checkout@v5
     - uses: ./.github/workflows/actions/test-vue-e2e
       with:
         app: ${{ matrix.apps }}
@@ -136,14 +136,14 @@ jobs:
     needs: [build-core-with-stencil-nightly]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+    - uses: actions/checkout@v5
     - uses: ./.github/workflows/actions/build-angular
 
   build-angular-server:
     needs: [build-core-with-stencil-nightly]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+    - uses: actions/checkout@v5
     - uses: ./.github/workflows/actions/build-angular-server
 
   test-angular-e2e:
@@ -154,7 +154,7 @@ jobs:
     needs: [build-angular, build-angular-server]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+    - uses: actions/checkout@v5
     - uses: ./.github/workflows/actions/test-angular-e2e
       with:
         app: ${{ matrix.apps }}
@@ -172,14 +172,14 @@ jobs:
     needs: [build-core-with-stencil-nightly]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+    - uses: actions/checkout@v5
     - uses: ./.github/workflows/actions/build-react
 
   build-react-router:
     needs: [build-react]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+    - uses: actions/checkout@v5
     - uses: ./.github/workflows/actions/build-react-router
 
   test-react-router-e2e:
@@ -190,7 +190,7 @@ jobs:
     needs: [build-react, build-react-router]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+    - uses: actions/checkout@v5
     - uses: ./.github/workflows/actions/test-react-router-e2e
       with:
         app: ${{ matrix.apps }}
@@ -212,7 +212,7 @@ jobs:
     needs: [build-react, build-react-router]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+    - uses: actions/checkout@v5
     - uses: ./.github/workflows/actions/test-react-e2e
       with:
         app: ${{ matrix.apps }}
@@ -225,35 +225,3 @@ 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@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+      - uses: actions/checkout@v5
       - uses: ./.github/workflows/actions/build-core
 
   test-core-screenshot:
@@ -47,7 +47,7 @@ jobs:
     needs: [build-core]
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+      - uses: actions/checkout@v5
       - uses: ./.github/workflows/actions/test-core-screenshot
         with:
           shard: ${{ matrix.shard }}
@@ -59,7 +59,7 @@ jobs:
     runs-on: ubuntu-latest
     needs: [test-core-screenshot]
     steps:
-      - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+      - uses: actions/checkout@v5
         # Normally, we could just push with the
         # default GITHUB_TOKEN, but that will
         # not cause the build workflow

CHANGELOG.md

@@ -3,145 +3,6 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [8.7.17](https://github.com/ionic-team/ionic-framework/compare/v8.7.15...v8.7.17) (2026-01-14)
-
-
-### Bug Fixes
-
-* **input:** prevent Android TalkBack from focusing label separately ([#30895](https://github.com/ionic-team/ionic-framework/issues/30895)) ([ab733b7](https://github.com/ionic-team/ionic-framework/commit/ab733b71dd355d9486757f219fe09acaefeeefcc))
-* **input:** prevent placeholder from overlapping start slot during scroll assist ([#30896](https://github.com/ionic-team/ionic-framework/issues/30896)) ([3b3318d](https://github.com/ionic-team/ionic-framework/commit/3b3318da513b199128f3822bd8226797cd118b0f))
-* **tab-bar:** prevent keyboard controller memory leak on rapid mount/unmount ([#30906](https://github.com/ionic-team/ionic-framework/issues/30906)) ([f99d000](https://github.com/ionic-team/ionic-framework/commit/f99d0007a8ffc9c7d3d2636e912c37c12112b21d))
-
-
-
-
-
-## [8.7.16](https://github.com/ionic-team/ionic-framework/compare/v8.7.15...v8.7.16) (2025-12-31)
-
-
-### Bug Fixes
-
-* **modal:** prevent card modal animation on viewport resize when modal is closed ([#30894](https://github.com/ionic-team/ionic-framework/issues/30894)) ([e5634d4](https://github.com/ionic-team/ionic-framework/commit/e5634d45ee5fd32715f6e6b75e0448f74ee1f8f2)), closes [#30679](https://github.com/ionic-team/ionic-framework/issues/30679)
-
-
-
-
-
-## [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,142 +3,6 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [8.7.17](https://github.com/ionic-team/ionic-framework/compare/v8.7.15...v8.7.17) (2026-01-14)
-
-
-### Bug Fixes
-
-* **input:** prevent Android TalkBack from focusing label separately ([#30895](https://github.com/ionic-team/ionic-framework/issues/30895)) ([ab733b7](https://github.com/ionic-team/ionic-framework/commit/ab733b71dd355d9486757f219fe09acaefeeefcc))
-* **input:** prevent placeholder from overlapping start slot during scroll assist ([#30896](https://github.com/ionic-team/ionic-framework/issues/30896)) ([3b3318d](https://github.com/ionic-team/ionic-framework/commit/3b3318da513b199128f3822bd8226797cd118b0f))
-* **tab-bar:** prevent keyboard controller memory leak on rapid mount/unmount ([#30906](https://github.com/ionic-team/ionic-framework/issues/30906)) ([f99d000](https://github.com/ionic-team/ionic-framework/commit/f99d0007a8ffc9c7d3d2636e912c37c12112b21d))
-
-
-
-
-
-## [8.7.16](https://github.com/ionic-team/ionic-framework/compare/v8.7.15...v8.7.16) (2025-12-31)
-
-
-### Bug Fixes
-
-* **modal:** prevent card modal animation on viewport resize when modal is closed ([#30894](https://github.com/ionic-team/ionic-framework/issues/30894)) ([e5634d4](https://github.com/ionic-team/ionic-framework/commit/e5634d45ee5fd32715f6e6b75e0448f74ee1f8f2)), closes [#30679](https://github.com/ionic-team/ionic-framework/issues/30679)
-
-
-
-
-
-## [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.56.1
+FROM mcr.microsoft.com/playwright:v1.55.1
 
 # Set the working directory
 WORKDIR /ionic

core/package.json

@@ -1,10 +1,7 @@
 {
   "name": "@ionic/core",
-  "version": "8.7.17",
+  "version": "8.7.5",
   "description": "Base components for Ionic",
-  "engines": {
-    "node": ">= 16"
-  },
   "keywords": [
     "ionic",
     "framework",
@@ -34,20 +31,20 @@
     "loader/"
   ],
   "dependencies": {
-    "@stencil/core": "4.38.0",
+    "@stencil/core": "4.36.2",
     "ionicons": "^8.0.13",
     "tslib": "^2.1.0"
   },
   "devDependencies": {
-    "@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",
+    "@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",
     "@clack/prompts": "^0.11.0",
     "@ionic/eslint-config": "^0.3.0",
     "@ionic/prettier-config": "^2.0.0",
-    "@playwright/test": "^1.56.1",
+    "@playwright/test": "^1.55.1",
     "@rollup/plugin-node-resolve": "^8.4.0",
     "@rollup/plugin-virtual": "^2.0.3",
     "@stencil/angular-output-target": "^0.10.0",
@@ -55,7 +52,7 @@
     "@stencil/sass": "^3.0.9",
     "@stencil/vue-output-target": "0.10.8",
     "@types/jest": "^29.5.6",
-    "@types/node": "^16.18.126",
+    "@types/node": "^14.6.0",
     "@typescript-eslint/eslint-plugin": "^6.7.2",
     "@typescript-eslint/parser": "^6.7.2",
     "chalk": "^5.3.0",
@@ -68,7 +65,6 @@
     "fs-extra": "^9.0.1",
     "jest": "^29.7.0",
     "jest-cli": "^29.7.0",
-    "playwright-core": "^1.56.1",
     "prettier": "^2.6.1",
     "rollup": "^2.26.4",
     "sass": "^1.33.0",

core/scripts/testing/scripts.js

@@ -1,81 +1,30 @@
-/**
- * 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:mode`: Set to `ios` or `md` to load a specific mode.
- * Defaults to `md`.
- * - `palette`: Set to `light`, `dark`, `high-contrast`, or 
- * `high-contrast-dark` to load a specific palette. Defaults to `light`.
- */
 
 (function() {
 
-  /**
-   * 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) {
+  if (window.location.search.indexOf('rtl=true') > -1) {
     document.documentElement.setAttribute('dir', 'rtl');
   }
 
-  /**
-   * 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) {
+  if (window.location.search.indexOf('ionic:_testing=true') > -1) {
     const style = document.createElement('style');
     style.innerHTML = `
-      * {
-        caret-color: transparent !important;
-      }
-    `;
+* {
+  caret-color: transparent !important;
+}`;
     document.head.appendChild(style);
   }
 
   /**
-   * 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.
+   * 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.
    */
-  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 palette = window.location.search.match(/palette=([a-z]+)/);
+  if (palette && palette[1] !== 'light') {
     const linkTag = document.createElement('link');
     linkTag.setAttribute('rel', 'stylesheet');
     linkTag.setAttribute('type', 'text/css');
-    linkTag.setAttribute('href', `/css/palettes/${paletteName}.always.css`);
+    linkTag.setAttribute('href', `/css/palettes/${palette[1]}.always.css`);
     document.head.appendChild(linkTag);
   }
 

core/src/components.d.ts

@@ -868,10 +868,6 @@ export namespace Components {
           * Get the element where the actual scrolling takes place. This element can be used to subscribe to `scroll` events or manually modify `scrollTop`. However, it's recommended to use the API provided by `ion-content`:  i.e. Using `ionScroll`, `ionScrollStart`, `ionScrollEnd` for scrolling events and `scrollToPoint()` to scroll the content into a certain point.
          */
         "getScrollElement": () => Promise<HTMLElement>;
-        /**
-          * 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.

core/src/components/accordion/accordion.tsx

@@ -38,40 +38,7 @@ const enum AccordionState {
 })
 export class Accordion implements ComponentInterface {
   private accordionGroupEl?: HTMLIonAccordionGroupElement | null;
-  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 updateListener = () => this.updateState(false);
   private contentEl: HTMLDivElement | undefined;
   private contentElWrapper: HTMLDivElement | undefined;
   private headerEl: HTMLDivElement | undefined;
@@ -83,25 +50,6 @@ 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
@@ -140,15 +88,15 @@ export class Accordion implements ComponentInterface {
   connectedCallback() {
     const accordionGroupEl = (this.accordionGroupEl = this.el?.closest('ion-accordion-group'));
     if (accordionGroupEl) {
-      this.updateState();
-      addEventListener(accordionGroupEl, 'ionValueChange', this.accordionGroupUpdateHandler);
+      this.updateState(true);
+      addEventListener(accordionGroupEl, 'ionValueChange', this.updateListener);
     }
   }
 
   disconnectedCallback() {
     const accordionGroupEl = this.accordionGroupEl;
     if (accordionGroupEl) {
-      removeEventListener(accordionGroupEl, 'ionValueChange', this.accordionGroupUpdateHandler);
+      removeEventListener(accordionGroupEl, 'ionValueChange', this.updateListener);
     }
   }
 
@@ -264,16 +212,10 @@ export class Accordion implements ComponentInterface {
     ionItem.appendChild(iconEl);
   };
 
-  private expandAccordion = () => {
+  private expandAccordion = (initialUpdate = false) => {
     const { contentEl, contentElWrapper } = this;
-
-    /**
-     * 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) {
+    if (initialUpdate || contentEl === undefined || contentElWrapper === undefined) {
       this.state = AccordionState.Expanded;
-      this.hasEverBeenExpanded = true;
       return;
     }
 
@@ -285,12 +227,6 @@ 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;
@@ -311,14 +247,9 @@ export class Accordion implements ComponentInterface {
     }
   };
 
-  private collapseAccordion = () => {
+  private collapseAccordion = (initialUpdate = false) => {
     const { contentEl } = this;
-
-    /**
-     * 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) {
+    if (initialUpdate || contentEl === undefined) {
       this.state = AccordionState.Collapsed;
       return;
     }
@@ -360,19 +291,6 @@ 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;
     }
@@ -394,7 +312,7 @@ export class Accordion implements ComponentInterface {
     return true;
   };
 
-  private updateState = async () => {
+  private updateState = async (initialUpdate = false) => {
     const accordionGroup = this.accordionGroupEl;
     const accordionValue = this.value;
 
@@ -407,10 +325,10 @@ export class Accordion implements ComponentInterface {
     const shouldExpand = Array.isArray(value) ? value.includes(accordionValue) : value === accordionValue;
 
     if (shouldExpand) {
-      this.expandAccordion();
+      this.expandAccordion(initialUpdate);
       this.isNext = this.isPrevious = false;
     } else {
-      this.collapseAccordion();
+      this.collapseAccordion(initialUpdate);
 
       /**
        * When using popout or inset,
@@ -468,12 +386,6 @@ 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,87 +200,6 @@ 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, Listen, Method, Prop, State, h, readTask } from '@stencil/core';
+import { Watch, Component, Element, Event, Host, Method, Prop, h, readTask } from '@stencil/core';
 import type { Gesture } from '@utils/gesture';
 import { createButtonActiveGesture } from '@utils/gesture/button-active';
 import { raf } from '@utils/helpers';
@@ -46,18 +46,11 @@ 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 */
@@ -88,22 +81,6 @@ 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
@@ -300,53 +277,12 @@ 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);
   };
@@ -359,96 +295,6 @@ 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();
@@ -466,8 +312,6 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
     if (!this.htmlAttributes?.id) {
       setOverlayId(this.el);
     }
-    // Initialize activeRadioId for radio buttons
-    this.buttonsChanged();
   }
 
   componentDidLoad() {
@@ -511,82 +355,8 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
     this.triggerChanged();
   }
 
-  private renderActionSheetButtons(filteredButtons: ActionSheetButton[]) {
-    const mode = getIonMode(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>
-          {mode === 'md' && <ion-ripple-effect></ion-ripple-effect>}
-        </button>
-      );
-    });
-  }
-
   render() {
-    const { header, htmlAttributes, overlayIndex, hasRadioButtons } = this;
+    const { header, htmlAttributes, overlayIndex } = this;
     const mode = getIonMode(this);
     const allButtons = this.getButtons();
     const cancelButton = allButtons.find((b) => b.role === 'cancel');
@@ -618,11 +388,7 @@ 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)}
-              role={hasRadioButtons ? 'radiogroup' : undefined}
-            >
+            <div class="action-sheet-group" ref={(el) => (this.groupEl = el)}>
               {header !== undefined && (
                 <div
                   id={headerID}
@@ -635,7 +401,22 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
                   {this.subHeader && <div class="action-sheet-sub-title">{this.subHeader}</div>}
                 </div>
               )}
-              {this.renderActionSheetButtons(buttons)}
+              {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>
+                  {mode === 'md' && <ion-ripple-effect></ion-ripple-effect>}
+                </button>
+              ))}
             </div>
 
             {cancelButton && (

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

@@ -134,58 +134,3 @@ 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,7 +27,6 @@
       <button class="expand" id="ariaLabelCancelButton" onclick="presentAriaLabelCancelButton()">
         Aria Label Cancel Button
       </button>
-      <button class="expand" id="radioButtons" onclick="presentRadioButtons()">Radio Buttons</button>
     </main>
 
     <script>
@@ -101,32 +100,6 @@
           ],
         });
       }
-
-      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

@@ -18,66 +18,20 @@ 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.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 action sheet', async ({ page }) => {
+      await testOverlay(page, '#show-action-sheet', 'ionActionSheetDidPresent', 'action-sheet');
     });
-
-    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');
-      });
+    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');
     });
   });
 });

core/src/components/button/button.tsx

@@ -170,7 +170,6 @@ 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,
@@ -362,7 +361,11 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
             target,
           };
     let fill = this.fill;
-    if (fill === undefined) {
+    /**
+     * 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';
     }
 

core/src/components/checkbox/checkbox.tsx

@@ -1,6 +1,5 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
-import { Build, Component, Element, Event, Host, Method, Prop, State, h } from '@stencil/core';
-import { checkInvalidState } from '@utils/forms';
+import { Component, Element, Event, Host, Method, Prop, h } from '@stencil/core';
 import type { Attributes } from '@utils/helpers';
 import { inheritAriaAttributes, renderHiddenInput } from '@utils/helpers';
 import { createColorClasses, hostContext } from '@utils/theme';
@@ -35,8 +34,8 @@ export class Checkbox implements ComponentInterface {
   private inputLabelId = `${this.inputId}-lbl`;
   private helperTextId = `${this.inputId}-helper-text`;
   private errorTextId = `${this.inputId}-error-text`;
+  private focusEl?: HTMLElement;
   private inheritedAttributes: Attributes = {};
-  private validationObserver?: MutationObserver;
 
   @Element() el!: HTMLIonCheckboxElement;
 
@@ -122,13 +121,6 @@ export class Checkbox implements ComponentInterface {
    */
   @Prop() required = false;
 
-  /**
-   * Track validation state for proper aria-live announcements.
-   */
-  @State() isInvalid = false;
-
-  @State() private hintTextId?: string;
-
   /**
    * Emitted when the checked property has changed as a result of a user action such as a click.
    *
@@ -146,69 +138,18 @@ export class Checkbox implements ComponentInterface {
    */
   @Event() ionBlur!: EventEmitter<void>;
 
-  connectedCallback() {
-    const { el } = this;
-
-    // Watch for class changes to update validation state.
-    if (Build.isBrowser && typeof MutationObserver !== 'undefined') {
-      this.validationObserver = new MutationObserver(() => {
-        const newIsInvalid = checkInvalidState(el);
-        if (this.isInvalid !== newIsInvalid) {
-          this.isInvalid = newIsInvalid;
-          /**
-           * Screen readers tend to announce changes
-           * to `aria-describedby` when the attribute
-           * is changed during a blur event for a
-           * native form control.
-           * However, the announcement can be spotty
-           * when using a non-native form control
-           * and `forceUpdate()`.
-           * This is due to `forceUpdate()` internally
-           * rescheduling the DOM update to a lower
-           * priority queue regardless if it's called
-           * inside a Promise or not, thus causing
-           * the screen reader to potentially miss the
-           * change.
-           * By using a State variable inside a Promise,
-           * it guarantees a re-render immediately at
-           * a higher priority.
-           */
-          Promise.resolve().then(() => {
-            this.hintTextId = this.getHintTextId();
-          });
-        }
-      });
-
-      this.validationObserver.observe(el, {
-        attributes: true,
-        attributeFilter: ['class'],
-      });
-    }
-
-    // Always set initial state
-    this.isInvalid = checkInvalidState(el);
-  }
-
   componentWillLoad() {
     this.inheritedAttributes = {
       ...inheritAriaAttributes(this.el),
     };
-
-    this.hintTextId = this.getHintTextId();
-  }
-
-  disconnectedCallback() {
-    // Clean up validation observer to prevent memory leaks.
-    if (this.validationObserver) {
-      this.validationObserver.disconnect();
-      this.validationObserver = undefined;
-    }
   }
 
   /** @internal */
   @Method()
   async setFocus() {
-    this.el.focus();
+    if (this.focusEl) {
+      this.focusEl.focus();
+    }
   }
 
   /**
@@ -228,6 +169,7 @@ export class Checkbox implements ComponentInterface {
   private toggleChecked = (ev: Event) => {
     ev.preventDefault();
 
+    this.setFocus();
     this.setChecked(!this.checked);
     this.indeterminate = false;
   };
@@ -265,10 +207,10 @@ export class Checkbox implements ComponentInterface {
     ev.stopPropagation();
   };
 
-  private getHintTextId(): string | undefined {
-    const { helperText, errorText, helperTextId, errorTextId, isInvalid } = this;
+  private getHintTextID(): string | undefined {
+    const { el, helperText, errorText, helperTextId, errorTextId } = this;
 
-    if (isInvalid && errorText) {
+    if (el.classList.contains('ion-touched') && el.classList.contains('ion-invalid') && errorText) {
       return errorTextId;
     }
 
@@ -284,7 +226,7 @@ export class Checkbox implements ComponentInterface {
    * This element should only be rendered if hint text is set.
    */
   private renderHintText() {
-    const { helperText, errorText, helperTextId, errorTextId, isInvalid } = this;
+    const { helperText, errorText, helperTextId, errorTextId } = this;
 
     /**
      * undefined and empty string values should
@@ -297,11 +239,11 @@ export class Checkbox implements ComponentInterface {
 
     return (
       <div class="checkbox-bottom">
-        <div id={helperTextId} class="helper-text" part="supporting-text helper-text" aria-live="polite">
-          {!isInvalid ? helperText : null}
+        <div id={helperTextId} class="helper-text" part="supporting-text helper-text">
+          {helperText}
         </div>
-        <div id={errorTextId} class="error-text" part="supporting-text error-text" role="alert">
-          {isInvalid ? errorText : null}
+        <div id={errorTextId} class="error-text" part="supporting-text error-text">
+          {errorText}
         </div>
       </div>
     );
@@ -336,17 +278,13 @@ export class Checkbox implements ComponentInterface {
       <Host
         role="checkbox"
         aria-checked={indeterminate ? 'mixed' : `${checked}`}
-        aria-describedby={this.hintTextId}
-        aria-invalid={this.isInvalid ? 'true' : undefined}
+        aria-describedby={this.getHintTextID()}
+        aria-invalid={this.getHintTextID() === this.errorTextId}
         aria-labelledby={hasLabelContent ? this.inputLabelId : null}
         aria-label={inheritedAttributes['aria-label'] || null}
         aria-disabled={disabled ? 'true' : null}
-        aria-required={required ? 'true' : undefined}
         tabindex={disabled ? undefined : 0}
         onKeyDown={this.onKeyDown}
-        onFocus={this.onFocus}
-        onBlur={this.onBlur}
-        onClick={this.onClick}
         class={createColorClasses(color, {
           [mode]: true,
           'in-item': hostContext('ion-item', el),
@@ -358,6 +296,7 @@ export class Checkbox implements ComponentInterface {
           [`checkbox-alignment-${alignment}`]: alignment !== undefined,
           [`checkbox-label-placement-${labelPlacement}`]: true,
         })}
+        onClick={this.onClick}
       >
         <label class="checkbox-wrapper" htmlFor={inputId}>
           {/*
@@ -370,6 +309,9 @@ export class Checkbox implements ComponentInterface {
             disabled={disabled}
             id={inputId}
             onChange={this.toggleChecked}
+            onFocus={() => this.onFocus()}
+            onBlur={() => this.onBlur()}
+            ref={(focusEl) => (this.focusEl = focusEl)}
             required={required}
             {...inheritedAttributes}
           />

core/src/components/checkbox/test/basic/checkbox.e2e.ts

@@ -44,10 +44,7 @@ configs().forEach(({ title, screenshot, config }) => {
   });
 });
 
-/**
- * This behavior does not vary across modes/directions
- */
-configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
   test.describe(title('checkbox: ionChange'), () => {
     test('should fire ionChange when interacting with checkbox', async ({ page }) => {
       await page.setContent(
@@ -136,195 +133,4 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, c
       expect(clickCount).toBe(1);
     });
   });
-
-  test.describe(title('checkbox: ionFocus'), () => {
-    test('should not have visual regressions', async ({ page, pageUtils }) => {
-      await page.setContent(
-        `
-        <style>
-          #container {
-            display: inline-block;
-            padding: 10px;
-          }
-        </style>
-
-        <div id="container">
-          <ion-checkbox>Unchecked</ion-checkbox>
-        </div>
-      `,
-        config
-      );
-
-      await pageUtils.pressKeys('Tab');
-
-      const container = page.locator('#container');
-
-      await expect(container).toHaveScreenshot(screenshot(`checkbox-focus`));
-    });
-
-    test('should not have visual regressions when interacting with checkbox in item', async ({ page, pageUtils }) => {
-      await page.setContent(
-        `
-        <ion-item class="ion-focused">
-          <ion-checkbox>Unchecked</ion-checkbox>
-        </ion-item>
-      `,
-        config
-      );
-
-      // Test focus with keyboard navigation
-      await pageUtils.pressKeys('Tab');
-
-      const item = page.locator('ion-item');
-
-      await expect(item).toHaveScreenshot(screenshot(`checkbox-in-item-focus`));
-    });
-
-    test('should fire ionFocus when checkbox is focused', async ({ page, pageUtils }) => {
-      await page.setContent(
-        `
-        <ion-checkbox aria-label="checkbox" value="my-checkbox"></ion-checkbox>
-      `,
-        config
-      );
-
-      const ionFocus = await page.spyOnEvent('ionFocus');
-
-      // Test focus with keyboard navigation
-      await pageUtils.pressKeys('Tab');
-
-      expect(ionFocus).toHaveReceivedEventTimes(1);
-
-      // Reset focus
-      const checkbox = page.locator('ion-checkbox');
-      const checkboxBoundingBox = (await checkbox.boundingBox())!;
-      await page.mouse.click(0, checkboxBoundingBox.height + 1);
-
-      // Test focus with click
-      await checkbox.click();
-
-      expect(ionFocus).toHaveReceivedEventTimes(2);
-    });
-
-    test('should fire ionFocus when interacting with checkbox in item', async ({ page, pageUtils }) => {
-      await page.setContent(
-        `
-        <ion-item>
-          <ion-checkbox aria-label="checkbox" value="my-checkbox"></ion-checkbox>
-        </ion-item>
-      `,
-        config
-      );
-
-      const ionFocus = await page.spyOnEvent('ionFocus');
-
-      // Test focus with keyboard navigation
-      await pageUtils.pressKeys('Tab');
-
-      expect(ionFocus).toHaveReceivedEventTimes(1);
-
-      // Verify that the event target is the checkbox and not the item
-      const eventByKeyboard = ionFocus.events[0];
-      expect((eventByKeyboard.target as HTMLElement).tagName.toLowerCase()).toBe('ion-checkbox');
-
-      // Reset focus
-      const checkbox = page.locator('ion-checkbox');
-      const checkboxBoundingBox = (await checkbox.boundingBox())!;
-      await page.mouse.click(0, checkboxBoundingBox.height + 1);
-
-      // Test focus with click
-      const item = page.locator('ion-item');
-      await item.click();
-
-      expect(ionFocus).toHaveReceivedEventTimes(2);
-
-      // Verify that the event target is the checkbox and not the item
-      const eventByClick = ionFocus.events[0];
-      expect((eventByClick.target as HTMLElement).tagName.toLowerCase()).toBe('ion-checkbox');
-    });
-
-    test('should not fire when programmatically setting a value', async ({ page }) => {
-      await page.setContent(
-        `
-        <ion-checkbox aria-label="checkbox" value="my-checkbox"></ion-checkbox>
-      `,
-        config
-      );
-
-      const ionFocus = await page.spyOnEvent('ionFocus');
-      const checkbox = page.locator('ion-checkbox');
-
-      await checkbox.evaluate((el: HTMLIonCheckboxElement) => (el.checked = true));
-      expect(ionFocus).not.toHaveReceivedEvent();
-    });
-  });
-
-  test.describe(title('checkbox: ionBlur'), () => {
-    test('should fire ionBlur when checkbox is blurred', async ({ page, pageUtils }) => {
-      await page.setContent(
-        `
-        <ion-checkbox aria-label="checkbox" value="my-checkbox"></ion-checkbox>
-      `,
-        config
-      );
-
-      const ionBlur = await page.spyOnEvent('ionBlur');
-
-      // Test blur with keyboard navigation
-      // Focus the checkbox
-      await pageUtils.pressKeys('Tab');
-      // Blur the checkbox
-      await pageUtils.pressKeys('Tab');
-
-      expect(ionBlur).toHaveReceivedEventTimes(1);
-
-      // Test blur with click
-      const checkbox = page.locator('ion-checkbox');
-      // Focus the checkbox
-      await checkbox.click();
-      // Blur the checkbox by clicking outside of it
-      const checkboxBoundingBox = (await checkbox.boundingBox())!;
-      await page.mouse.click(0, checkboxBoundingBox.height + 1);
-
-      expect(ionBlur).toHaveReceivedEventTimes(2);
-    });
-
-    test('should fire ionBlur after interacting with checkbox in item', async ({ page, pageUtils }) => {
-      await page.setContent(
-        `
-        <ion-item>
-          <ion-checkbox aria-label="checkbox" value="my-checkbox"></ion-checkbox>
-        </ion-item>
-      `,
-        config
-      );
-
-      const ionBlur = await page.spyOnEvent('ionBlur');
-
-      // Test blur with keyboard navigation
-      // Focus the checkbox
-      await pageUtils.pressKeys('Tab');
-      // Blur the checkbox
-      await pageUtils.pressKeys('Tab');
-
-      expect(ionBlur).toHaveReceivedEventTimes(1);
-
-      // Verify that the event target is the checkbox and not the item
-      const event = ionBlur.events[0];
-      expect((event.target as HTMLElement).tagName.toLowerCase()).toBe('ion-checkbox');
-
-      // Test blur with click
-      const item = page.locator('ion-item');
-      await item.click();
-      // Blur the checkbox by clicking outside of it
-      const itemBoundingBox = (await item.boundingBox())!;
-      await page.mouse.click(0, itemBoundingBox.height + 1);
-
-      expect(ionBlur).toHaveReceivedEventTimes(2);
-
-      // Verify that the event target is the checkbox and not the item
-      const eventByClick = ionBlur.events[0];
-      expect((eventByClick.target as HTMLElement).tagName.toLowerCase()).toBe('ion-checkbox');
-    });
-  });
 });

core/src/components/checkbox/test/basic/index.html

@@ -50,20 +50,6 @@
         <ion-checkbox checked style="width: 200px">Specified width</ion-checkbox><br />
         <ion-checkbox checked style="width: 100%">Full-width</ion-checkbox><br />
       </ion-content>
-
-      <script>
-        document.addEventListener('ionBlur', (ev) => {
-          console.log('ionBlur', ev);
-        });
-
-        document.addEventListener('ionChange', (ev) => {
-          console.log('ionChange', ev);
-        });
-
-        document.addEventListener('ionFocus', (ev) => {
-          console.log('ionFocus', ev);
-        });
-      </script>
     </ion-app>
   </body>
 </html>

core/src/components/checkbox/test/item/index.html

@@ -246,20 +246,6 @@
           </div>
         </div>
       </ion-content>
-
-      <script>
-        document.addEventListener('ionBlur', (ev) => {
-          console.log('ionBlur', ev);
-        });
-
-        document.addEventListener('ionChange', (ev) => {
-          console.log('ionChange', ev);
-        });
-
-        document.addEventListener('ionFocus', (ev) => {
-          console.log('ionFocus', ev);
-        });
-      </script>
     </ion-app>
   </body>
 </html>

core/src/components/checkbox/test/validation/index.html

@@ -1,184 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" dir="ltr">
-  <head>
-    <meta charset="UTF-8" />
-    <title>Checkbox - Validation</title>
-    <meta
-      name="viewport"
-      content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
-    />
-    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
-    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
-    <script src="../../../../../scripts/testing/scripts.js"></script>
-    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
-    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
-    <style>
-      .grid {
-        display: grid;
-        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
-        grid-row-gap: 30px;
-        grid-column-gap: 30px;
-      }
-
-      h2 {
-        font-size: 12px;
-        font-weight: normal;
-
-        color: var(--ion-color-step-600);
-
-        margin-top: 10px;
-        margin-bottom: 5px;
-      }
-
-      .validation-info {
-        margin: 20px;
-        padding: 10px;
-        background: var(--ion-color-light);
-        border-radius: 4px;
-      }
-    </style>
-  </head>
-
-  <body>
-    <ion-app>
-      <ion-header>
-        <ion-toolbar>
-          <ion-title>Checkbox - Validation Test</ion-title>
-        </ion-toolbar>
-      </ion-header>
-
-      <ion-content class="ion-padding">
-        <div class="validation-info">
-          <h2>Screen Reader Testing Instructions:</h2>
-          <ol>
-            <li>Enable your screen reader (VoiceOver, NVDA, JAWS, etc.)</li>
-            <li>Tab through the form fields</li>
-            <li>When you tab away from an empty required field, the error should be announced immediately</li>
-            <li>The error text should be announced BEFORE the next field is announced</li>
-            <li>Test in Chrome, Safari, and Firefox to verify consistent behavior</li>
-          </ol>
-        </div>
-
-        <div class="grid">
-          <div>
-            <h2>Required Field</h2>
-            <ion-checkbox
-              id="terms-checkbox"
-              helper-text="You must agree to continue"
-              error-text="Please accept the terms and conditions"
-              required
-              >I agree to the terms and conditions</ion-checkbox
-            >
-          </div>
-
-          <div>
-            <h2>Optional Field (No Validation)</h2>
-            <ion-checkbox id="optional-checkbox" helper-text="You can skip this field">Optional Checkbox</ion-checkbox>
-          </div>
-        </div>
-
-        <div class="ion-padding">
-          <ion-button id="submit-btn" expand="block" disabled>Submit Form</ion-button>
-          <ion-button id="reset-btn" expand="block" fill="outline">Reset Form</ion-button>
-        </div>
-      </ion-content>
-    </ion-app>
-
-    <script>
-      // Simple validation logic
-      const checkboxes = document.querySelectorAll('ion-checkbox');
-      const submitBtn = document.getElementById('submit-btn');
-      const resetBtn = document.getElementById('reset-btn');
-
-      // Track which fields have been touched
-      const touchedFields = new Set();
-
-      // Validation functions
-      const validators = {
-        'terms-checkbox': (checked) => {
-          return checked === true;
-        },
-        'optional-checkbox': () => true, // Always valid
-      };
-
-      function validateField(checkbox) {
-        const checkboxId = checkbox.id;
-        const checked = checkbox.checked;
-        const isValid = validators[checkboxId] ? validators[checkboxId](checked) : true;
-
-        // Only show validation state if field has been touched
-        if (touchedFields.has(checkboxId)) {
-          if (isValid) {
-            checkbox.classList.remove('ion-invalid');
-            checkbox.classList.add('ion-valid');
-          } else {
-            checkbox.classList.remove('ion-valid');
-            checkbox.classList.add('ion-invalid');
-          }
-          checkbox.classList.add('ion-touched');
-        }
-
-        return isValid;
-      }
-
-      function validateForm() {
-        let allValid = true;
-        checkboxes.forEach((checkbox) => {
-          if (checkbox.id !== 'optional-checkbox') {
-            const isValid = validateField(checkbox);
-            if (!isValid) {
-              allValid = false;
-            }
-          }
-        });
-        submitBtn.disabled = !allValid;
-        return allValid;
-      }
-
-      // Add event listeners
-      checkboxes.forEach((checkbox) => {
-        // Mark as touched on blur
-        checkbox.addEventListener('ionBlur', (e) => {
-          console.log('Blur event on:', checkbox.id);
-          touchedFields.add(checkbox.id);
-          validateField(checkbox);
-          validateForm();
-
-          const isInvalid = checkbox.classList.contains('ion-invalid');
-          if (isInvalid) {
-            console.log('Field marked invalid:', checkbox.innerText, checkbox.errorText);
-          }
-        });
-
-        // Validate on change
-        checkbox.addEventListener('ionChange', (e) => {
-          console.log('Change event on:', checkbox.id);
-          if (touchedFields.has(checkbox.id)) {
-            validateField(checkbox);
-            validateForm();
-          }
-        });
-      });
-
-      // Reset button
-      resetBtn.addEventListener('click', () => {
-        checkboxes.forEach((checkbox) => {
-          checkbox.checked = false;
-          checkbox.classList.remove('ion-valid', 'ion-invalid', 'ion-touched');
-        });
-        touchedFields.clear();
-        submitBtn.disabled = true;
-      });
-
-      // Submit button
-      submitBtn.addEventListener('click', () => {
-        if (validateForm()) {
-          alert('Form submitted successfully!');
-        }
-      });
-
-      // Initial setup
-      validateForm();
-    </script>
-  </body>
-</html>

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

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

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

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

core/src/components/content/content.tsx

@@ -254,17 +254,6 @@ export class Content implements ComponentInterface {
     }
   }
 
-  /**
-   * 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.
-   * @internal
-   */
-  @Method()
-  async recalculateDimensions(): Promise<void> {
-    readTask(() => this.readDimensions());
-  }
-
   private readDimensions() {
     const page = getPageElement(this.el);
     const top = Math.max(this.el.offsetTop, 0);

core/src/components/datetime-button/test/overlays/datetime-button.e2e.ts

@@ -1,7 +1,7 @@
-import type { Locator } from '@playwright/test';
 import { expect } from '@playwright/test';
-import type { EventSpy } from '@utils/test/playwright';
+import type { Locator } from '@playwright/test';
 import { configs, test } from '@utils/test/playwright';
+import type { EventSpy } from '@utils/test/playwright';
 
 /**
  * This behavior does not vary across directions.
@@ -176,34 +176,5 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
       await ionModalDidPresent.next();
       await expect(datetime).toBeVisible();
     });
-    test('should set datetime ready state and keep calendar interactive when reopening modal', async ({
-      page,
-    }, testInfo) => {
-      testInfo.annotations.push({
-        type: 'issue',
-        description: 'https://github.com/ionic-team/ionic-framework/issues/30706',
-      });
-
-      const openAndInteract = async () => {
-        await page.click('#date-button');
-        await ionModalDidPresent.next();
-
-        await page.locator('ion-datetime.datetime-ready').waitFor();
-
-        const calendarBody = datetime.locator('.calendar-body');
-        await expect(calendarBody).toBeVisible();
-      };
-
-      await openAndInteract();
-
-      const firstEnabledDay = datetime.locator('.calendar-day:not([disabled])').first();
-      await firstEnabledDay.click();
-      await page.waitForChanges();
-
-      await modal.evaluate((el: HTMLIonModalElement) => el.dismiss());
-      await ionModalDidDismiss.next();
-
-      await openAndInteract();
-    });
   });
 });

core/src/components/datetime/datetime.tsx

@@ -1101,32 +1101,6 @@ export class Datetime implements ComponentInterface {
     this.initializeKeyboardListeners();
   }
 
-  /**
-   * TODO(FW-6931): Remove this fallback upon solving the root cause
-   * Fallback to ensure the datetime becomes ready even if
-   * IntersectionObserver never reports it as intersecting.
-   *
-   * This is primarily used in environments where the observer
-   * might not fire as expected, such as when running under
-   * synthetic tests that stub IntersectionObserver.
-   */
-  private ensureReadyIfVisible = () => {
-    if (this.el.classList.contains('datetime-ready')) {
-      return;
-    }
-
-    const rect = this.el.getBoundingClientRect();
-    if (rect.width === 0 || rect.height === 0) {
-      return;
-    }
-
-    this.initializeListeners();
-
-    writeTask(() => {
-      this.el.classList.add('datetime-ready');
-    });
-  };
-
   componentDidLoad() {
     const { el, intersectionTrackerRef } = this;
 
@@ -1167,18 +1141,6 @@ export class Datetime implements ComponentInterface {
      */
     raf(() => visibleIO?.observe(intersectionTrackerRef!));
 
-    /**
-     * TODO(FW-6931): Remove this fallback upon solving the root cause
-     * Fallback: If IntersectionObserver never reports that the
-     * datetime is visible but the host clearly has layout, ensure
-     * we still initialize listeners and mark the component as ready.
-     *
-     * We schedule this after everything has had a chance to run.
-     */
-    setTimeout(() => {
-      this.ensureReadyIfVisible();
-    }, 100);
-
     /**
      * We need to clean up listeners when the datetime is hidden
      * in a popover/modal so that we can properly scroll containers

core/src/components/datetime/test/basic/datetime.e2e.ts

@@ -394,61 +394,6 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
   });
 });
 
-/**
- * Synthetic IntersectionObserver fallback behavior.
- *
- * This test stubs IntersectionObserver so that the callback
- * never reports an intersecting entry. The datetime should
- * still become ready via its internal fallback logic.
- */
-configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
-  test.describe(title('datetime: IO fallback'), () => {
-    test('should become ready even if IntersectionObserver never reports visible', async ({ page }, testInfo) => {
-      testInfo.annotations.push({
-        type: 'issue',
-        description: 'https://github.com/ionic-team/ionic-framework/issues/30706',
-      });
-
-      await page.addInitScript(() => {
-        const OriginalIO = window.IntersectionObserver;
-        (window as any).IntersectionObserver = function (callback: any, options: any) {
-          const instance = new OriginalIO(() => {}, options);
-          const originalObserve = instance.observe.bind(instance);
-
-          instance.observe = (target: Element) => {
-            originalObserve(target);
-            callback([
-              {
-                isIntersecting: false,
-                target,
-              } as IntersectionObserverEntry,
-            ]);
-          };
-
-          return instance;
-        } as any;
-      });
-
-      await page.setContent(
-        `
-        <ion-datetime value="2022-05-03"></ion-datetime>
-      `,
-        config
-      );
-
-      const datetime = page.locator('ion-datetime');
-
-      // Give the fallback a short amount of time to run
-      await page.waitForTimeout(100);
-
-      await expect(datetime).toHaveClass(/datetime-ready/);
-
-      const calendarBody = datetime.locator('.calendar-body');
-      await expect(calendarBody).toBeVisible();
-    });
-  });
-});
-
 /**
  * We are setting RTL on the component
  * instead, so we don't need to test

core/src/components/footer/footer.tsx

@@ -22,7 +22,6 @@ export class Footer implements ComponentInterface {
   private scrollEl?: HTMLElement;
   private contentScrollCallback?: () => void;
   private keyboardCtrl: KeyboardController | null = null;
-  private keyboardCtrlPromise: Promise<KeyboardController> | null = null;
 
   @State() private keyboardVisible = false;
 
@@ -53,7 +52,7 @@ export class Footer implements ComponentInterface {
   }
 
   async connectedCallback() {
-    const promise = createKeyboardController(async (keyboardOpen, waitForResize) => {
+    this.keyboardCtrl = await createKeyboardController(async (keyboardOpen, waitForResize) => {
       /**
        * If the keyboard is hiding, then we need to wait
        * for the webview to resize. Otherwise, the footer
@@ -65,32 +64,11 @@ export class Footer implements ComponentInterface {
 
       this.keyboardVisible = keyboardOpen; // trigger re-render by updating state
     });
-    this.keyboardCtrlPromise = promise;
-
-    const keyboardCtrl = await promise;
-
-    /**
-     * Only assign if this is still the current promise.
-     * Otherwise, a new connectedCallback has started or
-     * disconnectedCallback was called, so destroy this instance.
-     */
-    if (this.keyboardCtrlPromise === promise) {
-      this.keyboardCtrl = keyboardCtrl;
-      this.keyboardCtrlPromise = null;
-    } else {
-      keyboardCtrl.destroy();
-    }
   }
 
   disconnectedCallback() {
-    if (this.keyboardCtrlPromise) {
-      this.keyboardCtrlPromise.then((ctrl) => ctrl.destroy());
-      this.keyboardCtrlPromise = null;
-    }
-
     if (this.keyboardCtrl) {
       this.keyboardCtrl.destroy();
-      this.keyboardCtrl = null;
     }
   }
 

core/src/components/header/header.ios.scss

@@ -39,15 +39,6 @@
   --opacity-scale: inherit;
 }
 
-/**
- * Override styles applied during the page transition to prevent
- * header flickering.
- */
-.header-collapse-fade.header-transitioning ion-toolbar {
-  --background: transparent;
-  --border-style: none;
-}
-
 // iOS Header - Collapse Condense
 // --------------------------------------------------
 .header-collapse-condense {
@@ -74,6 +65,8 @@
  * since it needs to blend in with the header above it.
  */
 .header-collapse-condense ion-toolbar {
+  --background: var(--ion-background-color, #fff);
+
   z-index: 0;
 }
 
@@ -100,28 +93,6 @@
   transition: all 0.2s ease-in-out;
 }
 
-/**
- * Large title toolbar should just use the content background
- * since it needs to blend in with the header above it.
- */
-.header-collapse-condense ion-toolbar,
-/**
- * Override styles applied during the page transition to prevent
- * header flickering.
- */
-.header-collapse-condense-inactive.header-transitioning:not(.header-collapse-condense) ion-toolbar {
-  --background: var(--ion-background-color, #fff);
-}
-
-/**
- * Override styles applied during the page transition to prevent
- * header flickering.
- */
-.header-collapse-condense-inactive.header-transitioning:not(.header-collapse-condense) ion-toolbar {
-  --border-style: none;
-  --opacity-scale: 1;
-}
-
 .header-collapse-condense-inactive:not(.header-collapse-condense) ion-toolbar.in-toolbar ion-title,
 .header-collapse-condense-inactive:not(.header-collapse-condense) ion-toolbar.in-toolbar ion-buttons.buttons-collapse {
   opacity: 0;

core/src/components/header/header.md.scss

@@ -8,7 +8,7 @@
   box-shadow: $header-md-box-shadow;
 }
 
-.header-md.header-collapse-condense {
+.header-collapse-condense {
   display: none;
 }
 

core/src/components/header/header.tsx

@@ -15,7 +15,6 @@ import {
   handleToolbarIntersection,
   setHeaderActive,
   setToolbarBackgroundOpacity,
-  getRoleType,
 } from './header.utils';
 
 /**
@@ -209,10 +208,9 @@ export class Header implements ComponentInterface {
     const { translucent, inheritedAttributes } = this;
     const mode = getIonMode(this);
     const collapse = this.collapse || 'none';
-    const isCondensed = collapse === 'condense';
 
     // banner role must be at top level, so remove role if inside a menu
-    const roleType = getRoleType(hostContext('ion-menu', this.el), isCondensed, mode);
+    const roleType = hostContext('ion-menu', this.el) ? 'none' : 'banner';
 
     return (
       <Host

core/src/components/header/header.utils.ts

@@ -2,8 +2,6 @@ import { readTask, writeTask } from '@stencil/core';
 import { clamp } from '@utils/helpers';
 
 const TRANSITION = 'all 0.2s ease-in-out';
-const ROLE_NONE = 'none';
-const ROLE_BANNER = 'banner';
 
 interface HeaderIndex {
   el: HTMLIonHeaderElement;
@@ -173,7 +171,6 @@ export const setHeaderActive = (headerIndex: HeaderIndex, active = true) => {
   const ionTitles = toolbars.map((toolbar) => toolbar.ionTitleEl);
 
   if (active) {
-    headerEl.setAttribute('role', ROLE_BANNER);
     headerEl.classList.remove('header-collapse-condense-inactive');
 
     ionTitles.forEach((ionTitle) => {
@@ -182,16 +179,6 @@ export const setHeaderActive = (headerIndex: HeaderIndex, active = true) => {
       }
     });
   } else {
-    /**
-     * There can only be one banner landmark per page.
-     * By default, all ion-headers have the banner role.
-     * This causes an accessibility issue when using a
-     * condensed header since there are two ion-headers
-     * on the page at once (active and inactive).
-     * To solve this, the role needs to be toggled
-     * based on which header is active.
-     */
-    headerEl.setAttribute('role', ROLE_NONE);
     headerEl.classList.add('header-collapse-condense-inactive');
 
     /**
@@ -257,28 +244,3 @@ export const handleHeaderFade = (scrollEl: HTMLElement, baseEl: HTMLElement, con
     });
   });
 };
-
-/**
- * Get the role type for the ion-header.
- *
- * @param isInsideMenu If ion-header is inside ion-menu.
- * @param isCondensed If ion-header has collapse="condense".
- * @param mode The current mode.
- * @returns 'none' if inside ion-menu or if condensed in md
- * mode, otherwise 'banner'.
- */
-export const getRoleType = (isInsideMenu: boolean, isCondensed: boolean, mode: 'ios' | 'md') => {
-  // If the header is inside a menu, it should not have the banner role.
-  if (isInsideMenu) {
-    return ROLE_NONE;
-  }
-  /**
-   * Only apply role="none" to `md` mode condensed headers
-   * since the large header is never shown.
-   */
-  if (isCondensed && mode === 'md') {
-    return ROLE_NONE;
-  }
-  // Default to banner role.
-  return ROLE_BANNER;
-};

core/src/components/header/test/condense-modal/header.e2e.ts

@@ -1,71 +0,0 @@
-import { expect } from '@playwright/test';
-import { configs, test } from '@utils/test/playwright';
-
-/**
- * This test verifies that collapsible headers with mode="ios" work correctly
- * when both iOS and MD stylesheets are loaded. The bug occurred because
- * `.header-collapse-condense { display: none }` in the MD stylesheet was not
- * scoped to `.header-md`, causing it to hide iOS condense headers when both
- * stylesheets were present.
- */
-configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
-  test.describe(title('header: condense with iOS mode override'), () => {
-    test('should show iOS condense header when both MD and iOS styles are loaded', async ({ page }) => {
-      test.info().annotations.push({
-        type: 'issue',
-        description: 'https://github.com/ionic-team/ionic-framework/issues/29929',
-      });
-
-      // Include both an MD header and an iOS modal to force both stylesheets to load
-      await page.setContent(
-        `
-        <!-- MD header to force MD stylesheet to load -->
-        <ion-header mode="md" id="mdHeader">
-          <ion-toolbar>
-            <ion-title>MD Header</ion-title>
-          </ion-toolbar>
-        </ion-header>
-
-        <!-- Modal with iOS condense header -->
-        <ion-modal>
-          <ion-header mode="ios" id="smallTitleHeader">
-            <ion-toolbar>
-              <ion-title>Header</ion-title>
-            </ion-toolbar>
-          </ion-header>
-          <ion-content fullscreen="true">
-            <ion-header collapse="condense" mode="ios" id="largeTitleHeader">
-              <ion-toolbar>
-                <ion-title size="large">Large Header</ion-title>
-              </ion-toolbar>
-            </ion-header>
-            <p>Content</p>
-          </ion-content>
-        </ion-modal>
-        `,
-        config
-      );
-
-      const modal = page.locator('ion-modal');
-      const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
-
-      await modal.evaluate((el: HTMLIonModalElement) => el.present());
-      await ionModalDidPresent.next();
-
-      const largeTitleHeader = modal.locator('#largeTitleHeader');
-
-      // The large title header should be visible, not hidden by MD styles
-      await expect(largeTitleHeader).toBeVisible();
-
-      // Verify it has the iOS mode class
-      await expect(largeTitleHeader).toHaveClass(/header-ios/);
-
-      // Verify it does NOT have display: none applied
-      // This would fail if the MD stylesheet's unscoped .header-collapse-condense rule applies
-      const display = await largeTitleHeader.evaluate((el) => {
-        return window.getComputedStyle(el).display;
-      });
-      expect(display).not.toBe('none');
-    });
-  });
-});

core/src/components/header/test/condense/header.e2e.ts

@@ -40,45 +40,5 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, c
 
       await expect(smallTitle).toHaveAttribute('aria-hidden', 'true');
     });
-
-    test('should only have the banner role on the active header', async ({ page }) => {
-      await page.goto('/src/components/header/test/condense', config);
-      const largeTitleHeader = page.locator('#largeTitleHeader');
-      const smallTitleHeader = page.locator('#smallTitleHeader');
-      const content = page.locator('ion-content');
-
-      await expect(largeTitleHeader).toHaveAttribute('role', 'banner');
-      await expect(smallTitleHeader).toHaveAttribute('role', 'none');
-
-      await content.evaluate(async (el: HTMLIonContentElement) => {
-        await el.scrollToBottom();
-      });
-      await page.locator('#largeTitleHeader.header-collapse-condense-inactive').waitFor();
-
-      await expect(largeTitleHeader).toHaveAttribute('role', 'none');
-      await expect(smallTitleHeader).toHaveAttribute('role', 'banner');
-    });
-  });
-});
-
-configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
-  test.describe(title('header: condense'), () => {
-    test('should only have the banner role on the small header', async ({ page }) => {
-      await page.goto('/src/components/header/test/condense', config);
-      const largeTitleHeader = page.locator('#largeTitleHeader');
-      const smallTitleHeader = page.locator('#smallTitleHeader');
-      const content = page.locator('ion-content');
-
-      await expect(smallTitleHeader).toHaveAttribute('role', 'banner');
-      await expect(largeTitleHeader).toHaveAttribute('role', 'none');
-
-      await content.evaluate(async (el: HTMLIonContentElement) => {
-        await el.scrollToBottom();
-      });
-      await page.waitForChanges();
-
-      await expect(smallTitleHeader).toHaveAttribute('role', 'banner');
-      await expect(largeTitleHeader).toHaveAttribute('role', 'none');
-    });
   });
 });

core/src/components/input-password-toggle/input-password-toggle.tsx

@@ -126,8 +126,9 @@ export class InputPasswordToggle implements ComponentInterface {
           color={color}
           fill="clear"
           shape="round"
+          aria-checked={isPasswordVisible ? 'true' : 'false'}
           aria-label={isPasswordVisible ? 'Hide password' : 'Show password'}
-          aria-pressed={isPasswordVisible ? 'true' : 'false'}
+          role="switch"
           type="button"
           onPointerDown={(ev) => {
             /**

core/src/components/input-password-toggle/test/a11y/input-password-toggle.e2e.ts

@@ -22,7 +22,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, config }) => {
   });
 
   test.describe(title('input password toggle: aria attributes'), () => {
-    test('should have correct aria attributes on load', async ({ page }) => {
+    test('should inherit aria attributes to inner button on load', async ({ page }) => {
       await page.setContent(
         `
         <ion-input label="input" type="password">
@@ -35,9 +35,9 @@ configs({ directions: ['ltr'] }).forEach(({ title, config }) => {
       const nativeButton = page.locator('ion-input-password-toggle button');
 
       await expect(nativeButton).toHaveAttribute('aria-label', 'Show password');
-      await expect(nativeButton).toHaveAttribute('aria-pressed', 'false');
+      await expect(nativeButton).toHaveAttribute('aria-checked', 'false');
     });
-    test('should update aria attributes after toggle', async ({ page }) => {
+    test('should inherit aria attributes to inner button after toggle', async ({ page }) => {
       await page.setContent(
         `
         <ion-input label="input" type="password">
@@ -51,7 +51,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, config }) => {
       await nativeButton.click();
 
       await expect(nativeButton).toHaveAttribute('aria-label', 'Hide password');
-      await expect(nativeButton).toHaveAttribute('aria-pressed', 'true');
+      await expect(nativeButton).toHaveAttribute('aria-checked', 'true');
     });
   });
 });

core/src/components/input/input.scss

@@ -165,13 +165,9 @@
 // otherwise the .input-cover will not be rendered at all
 // The input cover is not clickable when the input is disabled
 .cloned-input {
-  position: absolute;
-  top: 0;
-  bottom: 0;
+  @include position(0, null, 0, 0);
 
-  // Reset height since absolute positioning with top/bottom handles sizing
-  height: auto;
-  max-height: none;
+  position: absolute;
 
   pointer-events: none;
 }

core/src/components/input/input.tsx

@@ -14,7 +14,7 @@ import {
   h,
 } from '@stencil/core';
 import type { NotchController } from '@utils/forms';
-import { createNotchController, checkInvalidState } from '@utils/forms';
+import { createNotchController } from '@utils/forms';
 import type { Attributes } from '@utils/helpers';
 import { inheritAriaAttributes, debounceEvent, inheritAttributes, componentOnReady } from '@utils/helpers';
 import { createSlotMutationController } from '@utils/slot-mutation-controller';
@@ -48,7 +48,6 @@ export class Input implements ComponentInterface {
   private inputId = `ion-input-${inputIds++}`;
   private helperTextId = `${this.inputId}-helper-text`;
   private errorTextId = `${this.inputId}-error-text`;
-  private labelTextId = `${this.inputId}-label`;
   private inheritedAttributes: Attributes = {};
   private isComposing = false;
   private slotMutationController?: SlotMutationController;
@@ -404,15 +403,20 @@ export class Input implements ComponentInterface {
     };
   }
 
+  /**
+   * Checks if the input is in an invalid state based on Ionic validation classes
+   */
+  private checkInvalidState(): boolean {
+    const hasIonTouched = this.el.classList.contains('ion-touched');
+    const hasIonInvalid = this.el.classList.contains('ion-invalid');
+
+    return hasIonTouched && hasIonInvalid;
+  }
+
   connectedCallback() {
     const { el } = this;
 
-    this.slotMutationController = createSlotMutationController(el, ['label', 'start', 'end'], () => {
-      this.setSlottedLabelId();
-      forceUpdate(this);
-    });
-
-    this.setSlottedLabelId();
+    this.slotMutationController = createSlotMutationController(el, ['label', 'start', 'end'], () => forceUpdate(this));
     this.notchController = createNotchController(
       el,
       () => this.notchSpacerEl,
@@ -422,7 +426,7 @@ export class Input implements ComponentInterface {
     // Watch for class changes to update validation state
     if (Build.isBrowser && typeof MutationObserver !== 'undefined') {
       this.validationObserver = new MutationObserver(() => {
-        const newIsInvalid = checkInvalidState(el);
+        const newIsInvalid = this.checkInvalidState();
         if (this.isInvalid !== newIsInvalid) {
           this.isInvalid = newIsInvalid;
           // Force a re-render to update aria-describedby immediately
@@ -437,7 +441,7 @@ export class Input implements ComponentInterface {
     }
 
     // Always set initial state
-    this.isInvalid = checkInvalidState(el);
+    this.isInvalid = this.checkInvalidState();
 
     this.debounceChanged();
     if (Build.isBrowser) {
@@ -727,7 +731,7 @@ export class Input implements ComponentInterface {
   }
 
   private renderLabel() {
-    const { label, labelTextId } = this;
+    const { label } = this;
 
     return (
       <div
@@ -735,17 +739,8 @@ export class Input implements ComponentInterface {
           'label-text-wrapper': true,
           'label-text-wrapper-hidden': !this.hasLabel,
         }}
-        // Prevents Android TalkBack from focusing the label separately.
-        // The input remains labelled via aria-labelledby.
-        aria-hidden={this.hasLabel ? 'true' : null}
       >
-        {label === undefined ? (
-          <slot name="label"></slot>
-        ) : (
-          <div class="label-text" id={labelTextId}>
-            {label}
-          </div>
-        )}
+        {label === undefined ? <slot name="label"></slot> : <div class="label-text">{label}</div>}
       </div>
     );
   }
@@ -758,33 +753,6 @@ export class Input implements ComponentInterface {
     return this.el.querySelector('[slot="label"]');
   }
 
-  /**
-   * Ensures the slotted label element has an ID for aria-labelledby.
-   * If no ID exists, we assign one using our generated labelTextId.
-   */
-  private setSlottedLabelId() {
-    const slottedLabel = this.labelSlot;
-    if (slottedLabel && !slottedLabel.id) {
-      slottedLabel.id = this.labelTextId;
-    }
-  }
-
-  /**
-   * Returns the ID to use for aria-labelledby on the native input,
-   * or undefined if aria-label is explicitly set (to avoid conflicts).
-   */
-  private getLabelledById(): string | undefined {
-    if (this.inheritedAttributes['aria-label']) {
-      return undefined;
-    }
-
-    if (this.label !== undefined) {
-      return this.labelTextId;
-    }
-
-    return this.labelSlot?.id || undefined;
-  }
-
   /**
    * Returns `true` if label content is provided
    * either by a prop or a content. If you want
@@ -940,7 +908,6 @@ export class Input implements ComponentInterface {
               onCompositionend={this.onCompositionEnd}
               aria-describedby={this.getHintTextID()}
               aria-invalid={this.isInvalid ? 'true' : undefined}
-              aria-labelledby={this.getLabelledById()}
               {...this.inheritedAttributes}
             />
             {this.clearInput && !readonly && !disabled && (

core/src/components/input/test/a11y/input.e2e.ts

@@ -57,104 +57,6 @@ configs({ directions: ['ltr'], palettes: ['light', 'dark'] }).forEach(({ title,
   });
 });
 
-configs({ directions: ['ltr'], modes: ['md'] }).forEach(({ title, config }) => {
-  test.describe(title('input: label a11y for Android TalkBack'), () => {
-    /**
-     * Android TalkBack treats visible text elements as separate focusable items.
-     * These tests verify that the label is hidden from a11y tree (aria-hidden)
-     * while remaining associated with the input via aria-labelledby.
-     */
-    test('label text wrapper should be hidden from accessibility tree when using label prop', async ({ page }) => {
-      await page.setContent(
-        `
-        <ion-input label="Email" value="test@example.com"></ion-input>
-        `,
-        config
-      );
-
-      const labelTextWrapper = page.locator('ion-input .label-text-wrapper');
-      await expect(labelTextWrapper).toHaveAttribute('aria-hidden', 'true');
-    });
-
-    test('label text wrapper should be hidden from accessibility tree when using label slot', async ({ page }) => {
-      await page.setContent(
-        `
-        <ion-input value="test@example.com">
-          <div slot="label">Email</div>
-        </ion-input>
-        `,
-        config
-      );
-
-      const labelTextWrapper = page.locator('ion-input .label-text-wrapper');
-      await expect(labelTextWrapper).toHaveAttribute('aria-hidden', 'true');
-    });
-
-    test('native input should have aria-labelledby pointing to label text when using label prop', async ({ page }) => {
-      await page.setContent(
-        `
-        <ion-input label="Email" value="test@example.com"></ion-input>
-        `,
-        config
-      );
-
-      const nativeInput = page.locator('ion-input input');
-      const labelText = page.locator('ion-input .label-text');
-
-      const labelTextId = await labelText.getAttribute('id');
-      expect(labelTextId).not.toBeNull();
-      await expect(nativeInput).toHaveAttribute('aria-labelledby', labelTextId!);
-    });
-
-    test('native input should have aria-labelledby pointing to slotted label when using label slot', async ({
-      page,
-    }) => {
-      await page.setContent(
-        `
-        <ion-input value="test@example.com">
-          <div slot="label">Email</div>
-        </ion-input>
-        `,
-        config
-      );
-
-      const nativeInput = page.locator('ion-input input');
-      const slottedLabel = page.locator('ion-input [slot="label"]');
-
-      const slottedLabelId = await slottedLabel.getAttribute('id');
-      expect(slottedLabelId).not.toBeNull();
-      await expect(nativeInput).toHaveAttribute('aria-labelledby', slottedLabelId!);
-    });
-
-    test('should not add aria-labelledby when aria-label is provided on host', async ({ page }) => {
-      await page.setContent(
-        `
-        <ion-input aria-label="Custom Label" value="test@example.com"></ion-input>
-        `,
-        config
-      );
-
-      const nativeInput = page.locator('ion-input input');
-
-      await expect(nativeInput).toHaveAttribute('aria-label', 'Custom Label');
-      await expect(nativeInput).not.toHaveAttribute('aria-labelledby');
-    });
-
-    test('should not add aria-hidden to label wrapper when no label is present', async ({ page }) => {
-      await page.setContent(
-        `
-        <ion-input aria-label="Hidden Label" value="test@example.com"></ion-input>
-        `,
-        config
-      );
-
-      const labelTextWrapper = page.locator('ion-input .label-text-wrapper');
-
-      await expect(labelTextWrapper).not.toHaveAttribute('aria-hidden', 'true');
-    });
-  });
-});
-
 configs({ directions: ['ltr'] }).forEach(({ title, config, screenshot }) => {
   test.describe(title('input: font scaling'), () => {
     test('should scale text on larger font sizes', async ({ page }) => {

core/src/components/modal/gestures/sheet.ts

@@ -98,7 +98,11 @@ export const createSheetGesture = (
     // Respect explicit opt-out of focus trapping/backdrop interactions
     // If focusTrap is false or showBackdrop is false, do not enable the backdrop or re-enable focus trap
     const el = baseEl as HTMLIonModalElement & { focusTrap?: boolean; showBackdrop?: boolean };
-    if (el.focusTrap === false || el.showBackdrop === false) {
+    const focusTrapAttr = el.getAttribute?.('focus-trap');
+    const showBackdropAttr = el.getAttribute?.('show-backdrop');
+    const focusTrapDisabled = el.focusTrap === false || focusTrapAttr === 'false';
+    const backdropDisabled = el.showBackdrop === false || showBackdropAttr === 'false';
+    if (focusTrapDisabled || backdropDisabled) {
       return;
     }
     baseEl.style.setProperty('pointer-events', 'auto');
@@ -241,10 +245,12 @@ export const createSheetGesture = (
      * ion-backdrop and .modal-wrapper always have pointer-events: auto
      * applied, so the modal content can still be interacted with.
      */
-    const shouldEnableBackdrop =
-      currentBreakpoint > backdropBreakpoint &&
-      (baseEl as HTMLIonModalElement & { focusTrap?: boolean }).focusTrap !== false &&
-      (baseEl as HTMLIonModalElement & { showBackdrop?: boolean }).showBackdrop !== false;
+    const modalEl = baseEl as HTMLIonModalElement & { focusTrap?: boolean; showBackdrop?: boolean };
+    const focusTrapAttr = modalEl.getAttribute?.('focus-trap');
+    const showBackdropAttr = modalEl.getAttribute?.('show-backdrop');
+    const focusTrapDisabled = modalEl.focusTrap === false || focusTrapAttr === 'false';
+    const backdropDisabled = modalEl.showBackdrop === false || showBackdropAttr === 'false';
+    const shouldEnableBackdrop = currentBreakpoint > backdropBreakpoint && !focusTrapDisabled && !backdropDisabled;
     if (shouldEnableBackdrop) {
       enableBackdrop();
     } else {
@@ -591,10 +597,16 @@ export const createSheetGesture = (
                    * Backdrop should become enabled
                    * after the backdropBreakpoint value
                    */
+                  const modalEl = baseEl as HTMLIonModalElement & {
+                    focusTrap?: boolean;
+                    showBackdrop?: boolean;
+                  };
+                  const focusTrapAttr = modalEl.getAttribute?.('focus-trap');
+                  const showBackdropAttr = modalEl.getAttribute?.('show-backdrop');
+                  const focusTrapDisabled = modalEl.focusTrap === false || focusTrapAttr === 'false';
+                  const backdropDisabled = modalEl.showBackdrop === false || showBackdropAttr === 'false';
                   const shouldEnableBackdrop =
-                    currentBreakpoint > backdropBreakpoint &&
-                    (baseEl as HTMLIonModalElement & { focusTrap?: boolean }).focusTrap !== false &&
-                    (baseEl as HTMLIonModalElement & { showBackdrop?: boolean }).showBackdrop !== false;
+                    currentBreakpoint > backdropBreakpoint && !focusTrapDisabled && !backdropDisabled;
                   if (shouldEnableBackdrop) {
                     enableBackdrop();
                   } else {

core/src/components/modal/modal.tsx

@@ -71,7 +71,7 @@ export class Modal implements ComponentInterface, OverlayInterface {
   private gesture?: Gesture;
   private coreDelegate: FrameworkDelegate = CoreDelegate();
   private sheetTransition?: Promise<any>;
-  @State() private isSheetModal = false;
+  private isSheetModal = false;
   private currentBreakpoint?: number;
   private wrapperEl?: HTMLElement;
   private backdropEl?: HTMLIonBackdropElement;
@@ -100,8 +100,6 @@ export class Modal implements ComponentInterface, OverlayInterface {
   private parentRemovalObserver?: MutationObserver;
   // Cached original parent from before modal is moved to body during presentation
   private cachedOriginalParent?: HTMLElement;
-  // Cached ion-page ancestor for child route passthrough
-  private cachedPageParent?: HTMLElement | null;
 
   lastFocus?: HTMLElement;
   animation?: Animation;
@@ -646,14 +644,7 @@ export class Modal implements ComponentInterface, OverlayInterface {
       window.addEventListener(KEYBOARD_DID_OPEN, this.keyboardOpenCallback);
     }
 
-    /**
-     * Recalculate isSheetModal because framework bindings (e.g., Angular)
-     * may not have been applied when componentWillLoad ran.
-     */
-    const isSheetModal = this.breakpoints !== undefined && this.initialBreakpoint !== undefined;
-    this.isSheetModal = isSheetModal;
-
-    if (isSheetModal) {
+    if (this.isSheetModal) {
       this.initSheetGesture();
     } else if (hasCardModal) {
       this.initSwipeToClose();
@@ -762,91 +753,6 @@ export class Modal implements ComponentInterface, OverlayInterface {
     this.moveSheetToBreakpoint = moveSheetToBreakpoint;
 
     this.gesture.enable(true);
-
-    /**
-     * When backdrop interaction is allowed, nested router outlets from child routes
-     * may block pointer events to parent content. Apply passthrough styles only when
-     * the modal was the sole content of a child route page.
-     * See https://github.com/ionic-team/ionic-framework/issues/30700
-     */
-    const backdropNotBlocking = this.showBackdrop === false || this.focusTrap === false || backdropBreakpoint > 0;
-    if (backdropNotBlocking) {
-      this.setupChildRoutePassthrough();
-    }
-  }
-
-  /**
-   * For sheet modals that allow background interaction, sets up pointer-events
-   * passthrough on child route page wrappers and nested router outlets.
-   */
-  private setupChildRoutePassthrough() {
-    // Cache the page parent for cleanup
-    this.cachedPageParent = this.getOriginalPageParent();
-    const pageParent = this.cachedPageParent;
-
-    // Skip ion-app (controller modals) and pages with visible sibling content next to the modal
-    if (!pageParent || pageParent.tagName === 'ION-APP') {
-      return;
-    }
-
-    const hasVisibleContent = Array.from(pageParent.children).some(
-      (child) =>
-        child !== this.el &&
-        !(child instanceof HTMLElement && window.getComputedStyle(child).display === 'none') &&
-        child.tagName !== 'TEMPLATE' &&
-        child.tagName !== 'SLOT' &&
-        !(child.nodeType === Node.TEXT_NODE && !child.textContent?.trim())
-    );
-
-    if (hasVisibleContent) {
-      return;
-    }
-
-    // Child route case: page only contained the modal
-    pageParent.classList.add('ion-page-overlay-passthrough');
-
-    // Also make nested router outlets passthrough
-    const routerOutlet = pageParent.parentElement;
-    if (routerOutlet?.tagName === 'ION-ROUTER-OUTLET' && routerOutlet.parentElement?.tagName !== 'ION-APP') {
-      routerOutlet.style.setProperty('pointer-events', 'none');
-      routerOutlet.setAttribute('data-overlay-passthrough', 'true');
-    }
-  }
-
-  /**
-   * Finds the ion-page ancestor of the modal's original parent location.
-   */
-  private getOriginalPageParent(): HTMLElement | null {
-    if (!this.cachedOriginalParent) {
-      return null;
-    }
-
-    let pageParent: HTMLElement | null = this.cachedOriginalParent;
-    while (pageParent && !pageParent.classList.contains('ion-page')) {
-      pageParent = pageParent.parentElement;
-    }
-    return pageParent;
-  }
-
-  /**
-   * Removes passthrough styles added by setupChildRoutePassthrough.
-   */
-  private cleanupChildRoutePassthrough() {
-    const pageParent = this.cachedPageParent;
-    if (!pageParent) {
-      return;
-    }
-
-    pageParent.classList.remove('ion-page-overlay-passthrough');
-
-    const routerOutlet = pageParent.parentElement;
-    if (routerOutlet?.hasAttribute('data-overlay-passthrough')) {
-      routerOutlet.style.removeProperty('pointer-events');
-      routerOutlet.removeAttribute('data-overlay-passthrough');
-    }
-
-    // Clear the cached reference
-    this.cachedPageParent = undefined;
   }
 
   private sheetOnDismiss() {
@@ -956,8 +862,6 @@ export class Modal implements ComponentInterface, OverlayInterface {
       }
       this.cleanupViewTransitionListener();
       this.cleanupParentRemovalObserver();
-
-      this.cleanupChildRoutePassthrough();
     }
     this.currentBreakpoint = undefined;
     this.animation = undefined;
@@ -1116,11 +1020,6 @@ export class Modal implements ComponentInterface, OverlayInterface {
   }
 
   private handleViewTransition() {
-    // Only run view transitions when the modal is presented
-    if (!this.presented) {
-      return;
-    }
-
     const isPortrait = window.innerWidth < 768;
 
     // Only transition if view state actually changed
@@ -1284,20 +1183,6 @@ export class Modal implements ComponentInterface, OverlayInterface {
       return;
     }
 
-    /**
-     * Don't observe for controller-based modals or when the parent is the
-     * app root (document.body or ion-app). These parents won't be removed,
-     * and observing document.body with subtree: true causes performance
-     * issues with frameworks like Angular during change detection.
-     */
-    if (
-      this.hasController ||
-      this.cachedOriginalParent === document.body ||
-      this.cachedOriginalParent.tagName === 'ION-APP'
-    ) {
-      return;
-    }
-
     this.parentRemovalObserver = new MutationObserver((mutations) => {
       mutations.forEach((mutation) => {
         if (mutation.type === 'childList' && mutation.removedNodes.length > 0) {
@@ -1352,6 +1237,7 @@ export class Modal implements ComponentInterface, OverlayInterface {
     const isHandleCycle = handleBehavior === 'cycle';
     const isSheetModalWithHandle = isSheetModal && showHandle;
 
+    const focusTrapAttr = this.el.getAttribute('focus-trap');
     return (
       <Host
         no-router
@@ -1368,7 +1254,7 @@ export class Modal implements ComponentInterface, OverlayInterface {
           [`modal-sheet`]: isSheetModal,
           [`modal-no-expand-scroll`]: isSheetModal && !expandToScroll,
           'overlay-hidden': true,
-          [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false,
+          [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false || focusTrapAttr === 'false',
           ...getClassMap(this.cssClass),
         }}
         onIonBackdropTap={this.onBackdropTap}

core/src/components/modal/test/basic/modal.e2e.ts

@@ -1,6 +1,6 @@
 import { expect } from '@playwright/test';
-import type { E2EPage } from '@utils/test/playwright';
 import { configs, test, Viewports } from '@utils/test/playwright';
+import type { E2EPage } from '@utils/test/playwright';
 
 configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
   test.describe(title('modal: focus trapping'), () => {
@@ -104,28 +104,6 @@ configs().forEach(({ title, screenshot, config }) => {
 });
 
 configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
-  test.describe(title('modal: parent removal observer'), () => {
-    test('should not set up parentRemovalObserver for controller-created modals', async ({ page }, testInfo) => {
-      testInfo.annotations.push({
-        type: 'issue',
-        description: 'FW-6766',
-      });
-
-      await page.goto('/src/components/modal/test/basic', config);
-      const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
-
-      await page.click('#basic-modal');
-      await ionModalDidPresent.next();
-
-      const modal = page.locator('ion-modal');
-      const hasObserver = await modal.evaluate((el: any) => {
-        return el.parentRemovalObserver !== undefined;
-      });
-
-      expect(hasObserver).toBe(false);
-    });
-  });
-
   test.describe(title('modal: backdrop'), () => {
     test.beforeEach(async ({ page }) => {
       await page.goto('/src/components/modal/test/basic', config);

core/src/components/modal/test/basic/modal.spec.tsx

@@ -28,6 +28,18 @@ describe('modal: focus trap', () => {
 
     expect(modal.classList.contains(FOCUS_TRAP_DISABLE_CLASS)).toBe(true);
   });
+  it('should set the focus trap class when disabled via attribute string', async () => {
+    const page = await newSpecPage({
+      components: [Modal],
+      html: `
+        <ion-modal focus-trap="false"></ion-modal>
+      `,
+    });
+
+    const modal = page.body.querySelector('ion-modal')!;
+
+    expect(modal.classList.contains(FOCUS_TRAP_DISABLE_CLASS)).toBe(true);
+  });
   it('should not set the focus trap class by default', async () => {
     const page = await newSpecPage({
       components: [Modal],

core/src/components/modal/test/card-viewport-resize/modal.e2e.ts

@@ -1,176 +0,0 @@
-import { expect } from '@playwright/test';
-import { configs, test } from '@utils/test/playwright';
-
-configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
-  test.describe(title('card modal: viewport resize'), () => {
-    test.beforeEach(async ({ page }) => {
-      // Start in portrait mode (mobile)
-      await page.setViewportSize({ width: 375, height: 667 });
-
-      await page.setContent(
-        `
-        <ion-app>
-          <div class="ion-page" id="main-page">
-            <ion-header>
-              <ion-toolbar>
-                <ion-title>Card Viewport Resize Test</ion-title>
-              </ion-toolbar>
-            </ion-header>
-            <ion-content class="ion-padding">
-              <p>This page tests that viewport resize does not trigger card modal animation when modal is closed.</p>
-              <ion-button id="open-modal">Open Card Modal</ion-button>
-              <ion-modal id="card-modal">
-                <ion-header>
-                  <ion-toolbar>
-                    <ion-title>Card Modal</ion-title>
-                    <ion-buttons slot="end">
-                      <ion-button id="close-modal">Close</ion-button>
-                    </ion-buttons>
-                  </ion-toolbar>
-                </ion-header>
-                <ion-content class="ion-padding">
-                  <p>Modal content</p>
-                </ion-content>
-              </ion-modal>
-            </ion-content>
-          </div>
-        </ion-app>
-
-        <script>
-          const modal = document.querySelector('#card-modal');
-          const mainPage = document.querySelector('#main-page');
-          modal.presentingElement = mainPage;
-
-          document.querySelector('#open-modal').addEventListener('click', () => {
-            modal.present();
-          });
-
-          document.querySelector('#close-modal').addEventListener('click', () => {
-            modal.dismiss();
-          });
-        </script>
-        `,
-        config
-      );
-    });
-
-    test('should not animate presenting element when viewport resizes and modal is closed', async ({
-      page,
-    }, testInfo) => {
-      testInfo.annotations.push({
-        type: 'issue',
-        description: 'https://github.com/ionic-team/ionic-framework/issues/30679',
-      });
-
-      const mainPage = page.locator('#main-page');
-
-      // Verify the presenting element has no transform initially
-      const initialTransform = await mainPage.evaluate((el) => {
-        return window.getComputedStyle(el).transform;
-      });
-      expect(initialTransform).toBe('none');
-
-      // Resize from portrait to landscape (crossing the 768px threshold)
-      await page.setViewportSize({ width: 900, height: 375 });
-
-      // Wait for the debounced resize handler (50ms) plus some buffer
-      await page.waitForTimeout(150);
-
-      // The presenting element should still have no transform
-      // If the bug exists, it would have scale(0.93) or similar applied
-      const afterResizeTransform = await mainPage.evaluate((el) => {
-        return window.getComputedStyle(el).transform;
-      });
-      expect(afterResizeTransform).toBe('none');
-    });
-
-    test('should not animate presenting element when resizing multiple times with modal closed', async ({ page }) => {
-      const mainPage = page.locator('#main-page');
-
-      // Multiple resize cycles should not trigger the animation
-      for (let i = 0; i < 3; i++) {
-        // Portrait to landscape
-        await page.setViewportSize({ width: 900, height: 375 });
-        await page.waitForTimeout(150);
-
-        let transform = await mainPage.evaluate((el) => {
-          return window.getComputedStyle(el).transform;
-        });
-        expect(transform).toBe('none');
-
-        // Landscape to portrait
-        await page.setViewportSize({ width: 375, height: 667 });
-        await page.waitForTimeout(150);
-
-        transform = await mainPage.evaluate((el) => {
-          return window.getComputedStyle(el).transform;
-        });
-        expect(transform).toBe('none');
-      }
-    });
-
-    test('should still animate presenting element correctly when modal is open and viewport resizes', async ({
-      page,
-    }) => {
-      const mainPage = page.locator('#main-page');
-      const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
-
-      // Open the modal
-      await page.click('#open-modal');
-      await ionModalDidPresent.next();
-
-      // When modal is open in portrait, presenting element should be transformed
-      let transform = await mainPage.evaluate((el) => {
-        return window.getComputedStyle(el).transform;
-      });
-      // The presenting element should have a scale transform when modal is open
-      expect(transform).not.toBe('none');
-
-      // Resize to landscape while modal is open
-      await page.setViewportSize({ width: 900, height: 375 });
-      await page.waitForTimeout(150);
-
-      // The modal transitions correctly - in landscape mode the presenting element
-      // should have different (or no) transform than portrait
-      transform = await mainPage.evaluate((el) => {
-        return window.getComputedStyle(el).transform;
-      });
-
-      // Note: The exact transform depends on the landscape handling
-      // The main point is that when modal IS open, the transition should work
-      // This test just ensures we don't break existing functionality
-    });
-
-    test('presenting element should return to normal after modal is dismissed', async ({ page }) => {
-      const mainPage = page.locator('#main-page');
-      const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
-      const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss');
-
-      // Open the modal
-      await page.click('#open-modal');
-      await ionModalDidPresent.next();
-
-      // Close the modal
-      await page.click('#close-modal');
-      await ionModalDidDismiss.next();
-
-      // Wait for animations to complete
-      await page.waitForTimeout(500);
-
-      // The presenting element should be back to normal
-      const transform = await mainPage.evaluate((el) => {
-        return window.getComputedStyle(el).transform;
-      });
-      expect(transform).toBe('none');
-
-      // Now resize the viewport - should not trigger animation
-      await page.setViewportSize({ width: 900, height: 375 });
-      await page.waitForTimeout(150);
-
-      const afterResizeTransform = await mainPage.evaluate((el) => {
-        return window.getComputedStyle(el).transform;
-      });
-      expect(afterResizeTransform).toBe('none');
-    });
-  });
-});

core/src/components/modal/test/dismiss-behavior/index.html

@@ -1,97 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" dir="ltr">
-  <head>
-    <meta charset="UTF-8" />
-    <title>Modal - Dismiss Behavior</title>
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
-    />
-    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
-    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
-    <script src="../../../../../scripts/testing/scripts.js"></script>
-    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
-    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
-  </head>
-
-  <body>
-    <ion-app>
-      <div class="ion-page">
-        <ion-header>
-          <ion-toolbar>
-            <ion-title>Modal - Dismiss Behavior</ion-title>
-          </ion-toolbar>
-        </ion-header>
-
-        <ion-content class="ion-padding">
-          <button id="present-first-modal" onclick="presentFirstModal()">Present Modal</button>
-        </ion-content>
-      </div>
-    </ion-app>
-
-    <script type="module">
-      import { modalController } from '../../../../../dist/ionic/index.esm.js';
-
-      window.modalController = modalController;
-
-      const sharedId = 'shared-modal-id';
-      const maxModals = 5;
-      let modalCount = 0;
-
-      function createModalComponent(modalNumber) {
-        const element = document.createElement('div');
-        const canPresentNext = modalNumber < maxModals;
-        const presentNextButton = canPresentNext
-          ? `<ion-button id="present-next-modal" onclick="presentNextModal(${modalNumber + 1})">Present Modal ${
-              modalNumber + 1
-            }</ion-button>`
-          : '';
-        element.innerHTML = `
-          <ion-header>
-            <ion-toolbar>
-              <ion-title>Modal ${modalNumber}</ion-title>
-            </ion-toolbar>
-          </ion-header>
-          <ion-content class="ion-padding">
-            <p>This is modal number ${modalNumber}</p>
-            ${presentNextButton}
-            <ion-button class="dismiss-by-id">Dismiss By ID</ion-button>
-            <ion-button class="dismiss-default">Dismiss Default</ion-button>
-          </ion-content>
-        `;
-        return element;
-      }
-
-      window.presentFirstModal = async () => {
-        modalCount = 0;
-        await presentNextModal(1);
-      };
-
-      window.presentNextModal = async (modalNumber) => {
-        if (modalNumber > maxModals) {
-          return;
-        }
-        modalCount = Math.max(modalCount, modalNumber);
-        const element = createModalComponent(modalNumber);
-        const modal = await modalController.create({
-          component: element,
-          htmlAttributes: {
-            id: sharedId,
-            'data-testid': `modal-${modalNumber}`,
-          },
-        });
-        await modal.present();
-
-        const dismissByIdButton = element.querySelector('ion-button.dismiss-by-id');
-        dismissByIdButton.addEventListener('click', () => {
-          modalController.dismiss(undefined, undefined, sharedId);
-        });
-
-        const dismissDefaultButton = element.querySelector('ion-button.dismiss-default');
-        dismissDefaultButton.addEventListener('click', () => {
-          modalController.dismiss();
-        });
-      };
-    </script>
-  </body>
-</html>

core/src/components/modal/test/dismiss-behavior/modal.e2e.ts

@@ -1,58 +0,0 @@
-import { expect } from '@playwright/test';
-import { configs, test } from '@utils/test/playwright';
-
-configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
-  test.describe(title('modal: dismiss behavior'), () => {
-    test.describe(title('modal: default dismiss'), () => {
-      test('should dismiss the last presented modal when the default dismiss button is clicked', async ({ page }) => {
-        await page.goto('/src/components/modal/test/dismiss-behavior', config);
-
-        const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
-        const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss');
-
-        await page.click('#present-first-modal');
-        await ionModalDidPresent.next();
-        const firstModal = page.locator('ion-modal[data-testid="modal-1"]');
-        await expect(firstModal).toBeVisible();
-
-        await page.click('#present-next-modal');
-        await ionModalDidPresent.next();
-        const secondModal = page.locator('ion-modal[data-testid="modal-2"]');
-        await expect(secondModal).toBeVisible();
-
-        await page.click('ion-modal[data-testid="modal-2"] ion-button.dismiss-default');
-        await ionModalDidDismiss.next();
-        await secondModal.waitFor({ state: 'detached' });
-
-        await expect(firstModal).toBeVisible();
-        await expect(secondModal).toBeHidden();
-      });
-    });
-
-    test.describe(title('modal: dismiss by id'), () => {
-      test('should dismiss the last presented modal when the dismiss by id button is clicked', async ({ page }) => {
-        await page.goto('/src/components/modal/test/dismiss-behavior', config);
-
-        const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
-        const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss');
-
-        await page.click('#present-first-modal');
-        await ionModalDidPresent.next();
-        const firstModal = page.locator('ion-modal[data-testid="modal-1"]');
-        await expect(firstModal).toBeVisible();
-
-        await page.click('#present-next-modal');
-        await ionModalDidPresent.next();
-        const secondModal = page.locator('ion-modal[data-testid="modal-2"]');
-        await expect(secondModal).toBeVisible();
-
-        await page.click('ion-modal[data-testid="modal-2"] ion-button.dismiss-by-id');
-        await ionModalDidDismiss.next();
-        await secondModal.waitFor({ state: 'detached' });
-
-        await expect(firstModal).toBeVisible();
-        await expect(secondModal).toBeHidden();
-      });
-    });
-  });
-});

core/src/components/modal/test/modal-id.spec.tsx

@@ -1,7 +1,7 @@
-import { h } from '@stencil/core';
 import { newSpecPage } from '@stencil/core/testing';
 
 import { Modal } from '../modal';
+import { h } from '@stencil/core';
 
 describe('modal: id', () => {
   it('modal should be assigned an incrementing id', async () => {
@@ -52,21 +52,4 @@ describe('modal: id', () => {
     const alert = page.body.querySelector('ion-modal')!;
     expect(alert.id).toBe(id);
   });
-
-  it('should allow multiple modals with the same id', async () => {
-    const sharedId = 'shared-modal-id';
-
-    const page = await newSpecPage({
-      components: [Modal],
-      template: () => [
-        <ion-modal id={sharedId} overlayIndex={1} is-open={true}></ion-modal>,
-        <ion-modal id={sharedId} overlayIndex={2} is-open={true}></ion-modal>,
-      ],
-    });
-
-    const modals = page.body.querySelectorAll('ion-modal');
-    expect(modals.length).toBe(2);
-    expect(modals[0].id).toBe(sharedId);
-    expect(modals[1].id).toBe(sharedId);
-  });
 });

core/src/components/popover/popover.tsx

@@ -64,7 +64,6 @@ export class Popover implements ComponentInterface, PopoverInterface {
   private destroyTriggerInteraction?: () => void;
   private destroyKeyboardInteraction?: () => void;
   private destroyDismissInteraction?: () => void;
-  private headerResizeObserver?: ResizeObserver;
 
   private inline = false;
   private workingDelegate?: FrameworkDelegate;
@@ -362,11 +361,6 @@ export class Popover implements ComponentInterface, PopoverInterface {
     if (destroyTriggerInteraction) {
       destroyTriggerInteraction();
     }
-
-    if (this.headerResizeObserver) {
-      this.headerResizeObserver.disconnect();
-      this.headerResizeObserver = undefined;
-    }
   }
 
   componentWillLoad() {
@@ -497,8 +491,6 @@ export class Popover implements ComponentInterface, PopoverInterface {
       inline
     );
 
-    this.recalculateContentOnHeaderReady();
-
     if (!this.keyboardEvents) {
       this.configureKeyboardInteraction();
     }
@@ -548,39 +540,6 @@ export class Popover implements ComponentInterface, PopoverInterface {
     unlock();
   }
 
-  /**
-   * Watch the header for height changes and trigger content dimension
-   * recalculation when the header has a height > 0. This sets the offset-top
-   * of the content to the height of the header correctly.
-   */
-  private recalculateContentOnHeaderReady() {
-    const popoverContent = this.el.shadowRoot?.querySelector('.popover-content');
-    if (!popoverContent) {
-      return;
-    }
-
-    const contentContainer = this.usersElement || popoverContent;
-
-    const header = contentContainer.querySelector('ion-header') as HTMLElement | null;
-    const contentElements = contentContainer.querySelectorAll('ion-content');
-
-    if (!header || contentElements.length === 0) {
-      return;
-    }
-
-    this.headerResizeObserver = new ResizeObserver(async () => {
-      if (header.offsetHeight > 0) {
-        this.headerResizeObserver?.disconnect();
-        this.headerResizeObserver = undefined;
-        for (const contentEl of contentElements) {
-          await contentEl.recalculateDimensions();
-        }
-      }
-    });
-
-    this.headerResizeObserver.observe(header);
-  }
-
   /**
    * Dismiss the popover overlay after it has been presented.
    * This is a no-op if the overlay has not been presented yet. If you want
@@ -728,6 +687,7 @@ export class Popover implements ComponentInterface, PopoverInterface {
     const { onLifecycle, parentPopover, dismissOnSelect, side, arrow, htmlAttributes, focusTrap } = this;
     const desktop = isPlatform('desktop');
     const enableArrow = arrow && !parentPopover;
+    const focusTrapAttr = this.el.getAttribute('focus-trap');
 
     return (
       <Host
@@ -745,7 +705,7 @@ export class Popover implements ComponentInterface, PopoverInterface {
           'overlay-hidden': true,
           'popover-desktop': desktop,
           [`popover-side-${side}`]: true,
-          [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false,
+          [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false || focusTrapAttr === 'false',
           'popover-nested': !!parentPopover,
         }}
         onIonPopoverDidPresent={onLifecycle}

core/src/components/popover/test/basic/popover.spec.tsx

@@ -29,6 +29,18 @@ describe('popover: focus trap', () => {
 
     expect(popover.classList.contains(FOCUS_TRAP_DISABLE_CLASS)).toBe(true);
   });
+  it('should set the focus trap class when disabled via attribute string', async () => {
+    const page = await newSpecPage({
+      components: [Popover],
+      html: `
+        <ion-popover focus-trap="false"></ion-popover>
+      `,
+    });
+
+    const popover = page.body.querySelector('ion-popover')!;
+
+    expect(popover.classList.contains(FOCUS_TRAP_DISABLE_CLASS)).toBe(true);
+  });
   it('should not set the focus trap class by default', async () => {
     const page = await newSpecPage({
       components: [Popover],

core/src/components/radio-group/radio-group.tsx

@@ -1,6 +1,5 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
-import { Build, Component, Element, Event, Host, Listen, Method, Prop, State, Watch, h } from '@stencil/core';
-import { checkInvalidState } from '@utils/forms';
+import { Component, Element, Event, Host, Listen, Method, Prop, Watch, h } from '@stencil/core';
 import { renderHiddenInput } from '@utils/helpers';
 
 import { getIonMode } from '../../global/ionic-global';
@@ -20,17 +19,9 @@ export class RadioGroup implements ComponentInterface {
   private errorTextId = `${this.inputId}-error-text`;
   private labelId = `${this.inputId}-lbl`;
   private label?: HTMLIonLabelElement | null;
-  private validationObserver?: MutationObserver;
 
   @Element() el!: HTMLElement;
 
-  /**
-   * Track validation state for proper aria-live announcements.
-   */
-  @State() isInvalid = false;
-
-  @State() private hintTextId?: string;
-
   /**
    * If `true`, the radios can be deselected.
    */
@@ -130,57 +121,6 @@ export class RadioGroup implements ComponentInterface {
         this.labelId = label.id = this.name + '-lbl';
       }
     }
-
-    // Watch for class changes to update validation state.
-    if (Build.isBrowser && typeof MutationObserver !== 'undefined') {
-      this.validationObserver = new MutationObserver(() => {
-        const newIsInvalid = checkInvalidState(this.el);
-        if (this.isInvalid !== newIsInvalid) {
-          this.isInvalid = newIsInvalid;
-          /**
-           * Screen readers tend to announce changes
-           * to `aria-describedby` when the attribute
-           * is changed during a blur event for a
-           * native form control.
-           * However, the announcement can be spotty
-           * when using a non-native form control
-           * and `forceUpdate()`.
-           * This is due to `forceUpdate()` internally
-           * rescheduling the DOM update to a lower
-           * priority queue regardless if it's called
-           * inside a Promise or not, thus causing
-           * the screen reader to potentially miss the
-           * change.
-           * By using a State variable inside a Promise,
-           * it guarantees a re-render immediately at
-           * a higher priority.
-           */
-          Promise.resolve().then(() => {
-            this.hintTextId = this.getHintTextId();
-          });
-        }
-      });
-
-      this.validationObserver.observe(this.el, {
-        attributes: true,
-        attributeFilter: ['class'],
-      });
-    }
-
-    // Always set initial state
-    this.isInvalid = checkInvalidState(this.el);
-  }
-
-  componentWillLoad() {
-    this.hintTextId = this.getHintTextId();
-  }
-
-  disconnectedCallback() {
-    // Clean up validation observer to prevent memory leaks.
-    if (this.validationObserver) {
-      this.validationObserver.disconnect();
-      this.validationObserver = undefined;
-    }
   }
 
   private getRadios(): HTMLIonRadioElement[] {
@@ -304,7 +244,7 @@ export class RadioGroup implements ComponentInterface {
    * Renders the helper text or error text values
    */
   private renderHintText() {
-    const { helperText, errorText, helperTextId, errorTextId, isInvalid } = this;
+    const { helperText, errorText, helperTextId, errorTextId } = this;
 
     const hasHintText = !!helperText || !!errorText;
     if (!hasHintText) {
@@ -313,20 +253,20 @@ export class RadioGroup implements ComponentInterface {
 
     return (
       <div class="radio-group-top">
-        <div id={helperTextId} class="helper-text" aria-live="polite">
-          {!isInvalid ? helperText : null}
+        <div id={helperTextId} class="helper-text">
+          {helperText}
         </div>
-        <div id={errorTextId} class="error-text" role="alert">
-          {isInvalid ? errorText : null}
+        <div id={errorTextId} class="error-text">
+          {errorText}
         </div>
       </div>
     );
   }
 
-  private getHintTextId(): string | undefined {
-    const { helperText, errorText, helperTextId, errorTextId, isInvalid } = this;
+  private getHintTextID(): string | undefined {
+    const { el, helperText, errorText, helperTextId, errorTextId } = this;
 
-    if (isInvalid && errorText) {
+    if (el.classList.contains('ion-touched') && el.classList.contains('ion-invalid') && errorText) {
       return errorTextId;
     }
 
@@ -347,8 +287,8 @@ export class RadioGroup implements ComponentInterface {
       <Host
         role="radiogroup"
         aria-labelledby={label ? labelId : null}
-        aria-describedby={this.hintTextId}
-        aria-invalid={this.isInvalid ? 'true' : undefined}
+        aria-describedby={this.getHintTextID()}
+        aria-invalid={this.getHintTextID() === this.errorTextId}
         onClick={this.onClick}
         class={mode}
       >

core/src/components/radio-group/test/validation/index.html

@@ -1,194 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" dir="ltr">
-  <head>
-    <meta charset="UTF-8" />
-    <title>Radio Group - Validation</title>
-    <meta
-      name="viewport"
-      content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
-    />
-    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
-    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
-    <script src="../../../../../scripts/testing/scripts.js"></script>
-    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
-    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
-    <style>
-      .grid {
-        display: grid;
-        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
-        grid-row-gap: 30px;
-        grid-column-gap: 30px;
-      }
-
-      h2 {
-        font-size: 12px;
-        font-weight: normal;
-
-        color: var(--ion-color-step-600);
-
-        margin-top: 10px;
-        margin-bottom: 5px;
-      }
-
-      .validation-info {
-        margin: 20px;
-        padding: 10px;
-        background: var(--ion-color-light);
-        border-radius: 4px;
-      }
-    </style>
-  </head>
-
-  <body>
-    <ion-app>
-      <ion-header>
-        <ion-toolbar>
-          <ion-title>Radio Group - Validation Test</ion-title>
-        </ion-toolbar>
-      </ion-header>
-
-      <ion-content class="ion-padding">
-        <div class="validation-info">
-          <h2>Screen Reader Testing Instructions:</h2>
-          <ol>
-            <li>Enable your screen reader (VoiceOver, NVDA, JAWS, etc.)</li>
-            <li>Tab through the form fields</li>
-            <li>When you tab away from an empty required field, the error should be announced immediately</li>
-            <li>The error text should be announced BEFORE the next field is announced</li>
-            <li>Test in Chrome, Safari, and Firefox to verify consistent behavior</li>
-          </ol>
-        </div>
-
-        <div class="grid">
-          <div>
-            <h2>Required Field</h2>
-            <ion-radio-group
-              id="fruits-radio-group"
-              helper-text="You must select one to continue"
-              error-text="Please select a fruit"
-              allow-empty-selection="true"
-              required
-            >
-              <ion-radio value="grapes">Grapes</ion-radio><br />
-              <ion-radio value="strawberries">Strawberries</ion-radio>
-            </ion-radio-group>
-          </div>
-
-          <div>
-            <h2>Optional Field (No Validation)</h2>
-            <ion-radio-group
-              id="optional-radio-group"
-              helper-text="You can skip this field"
-              allow-empty-selection="true"
-            >
-              <ion-radio value="cucumbers">Cucumbers</ion-radio><br />
-              <ion-radio value="tomatoes">Tomatoes</ion-radio>
-            </ion-radio-group>
-          </div>
-        </div>
-
-        <div class="ion-padding">
-          <ion-button id="submit-btn" expand="block" disabled>Submit Form</ion-button>
-          <ion-button id="reset-btn" expand="block" fill="outline">Reset Form</ion-button>
-        </div>
-      </ion-content>
-    </ion-app>
-
-    <script>
-      // Simple validation logic
-      const radioGroups = document.querySelectorAll('ion-radio-group');
-      const submitBtn = document.getElementById('submit-btn');
-      const resetBtn = document.getElementById('reset-btn');
-
-      // Track which fields have been touched
-      const touchedFields = new Set();
-
-      // Validation functions
-      const validators = {
-        'fruits-radio-group': (value) => {
-          return value !== '' && value !== undefined;
-        },
-        'optional-radio-group': () => true, // Always valid
-      };
-
-      function validateField(radioGroup) {
-        const radioGroupId = radioGroup.id;
-        const value = radioGroup.value;
-        const isValid = validators[radioGroupId] ? validators[radioGroupId](value) : true;
-
-        // Only show validation state if field has been touched
-        if (touchedFields.has(radioGroupId)) {
-          if (isValid) {
-            radioGroup.classList.remove('ion-invalid');
-            radioGroup.classList.add('ion-valid');
-          } else {
-            radioGroup.classList.remove('ion-valid');
-            radioGroup.classList.add('ion-invalid');
-          }
-          radioGroup.classList.add('ion-touched');
-        }
-
-        return isValid;
-      }
-
-      function validateForm() {
-        let allValid = true;
-        radioGroups.forEach((radioGroup) => {
-          if (radioGroup.id !== 'optional-radio-group') {
-            const isValid = validateField(radioGroup);
-            if (!isValid) {
-              allValid = false;
-            }
-          }
-        });
-        submitBtn.disabled = !allValid;
-        return allValid;
-      }
-
-      // Add event listeners
-      radioGroups.forEach((radioGroup) => {
-        // Mark as touched on blur
-        radioGroup.addEventListener('ionBlur', (e) => {
-          console.log('Blur event on:', radioGroup.id);
-          touchedFields.add(radioGroup.id);
-          validateField(radioGroup);
-          validateForm();
-
-          const isInvalid = radioGroup.classList.contains('ion-invalid');
-          if (isInvalid) {
-            console.log('Field marked invalid:', radioGroup.id, radioGroup.errorText);
-          }
-        });
-
-        // Validate on change
-        radioGroup.addEventListener('ionChange', (e) => {
-          console.log('Change event on:', radioGroup.id);
-          if (touchedFields.has(radioGroup.id)) {
-            validateField(radioGroup);
-            validateForm();
-          }
-        });
-      });
-
-      // Reset button
-      resetBtn.addEventListener('click', () => {
-        radioGroups.forEach((radioGroup) => {
-          radioGroup.value = '';
-          radioGroup.classList.remove('ion-valid', 'ion-invalid', 'ion-touched');
-        });
-        touchedFields.clear();
-        submitBtn.disabled = true;
-      });
-
-      // Submit button
-      submitBtn.addEventListener('click', () => {
-        if (validateForm()) {
-          alert('Form submitted successfully!');
-        }
-      });
-
-      // Initial setup
-      validateForm();
-    </script>
-  </body>
-</html>

core/src/components/select/select.tsx

@@ -1,7 +1,7 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
-import { Build, Component, Element, Event, Host, Method, Prop, State, Watch, h, forceUpdate } from '@stencil/core';
+import { Component, Element, Event, Host, Method, Prop, State, Watch, h, forceUpdate } from '@stencil/core';
 import type { NotchController } from '@utils/forms';
-import { compareOptions, createNotchController, isOptionSelected, checkInvalidState } from '@utils/forms';
+import { compareOptions, createNotchController, isOptionSelected } from '@utils/forms';
 import { focusVisibleElement, renderHiddenInput, inheritAttributes } from '@utils/helpers';
 import type { Attributes } from '@utils/helpers';
 import { printIonWarning } from '@utils/logging';
@@ -64,7 +64,6 @@ export class Select implements ComponentInterface {
   private inheritedAttributes: Attributes = {};
   private nativeWrapperEl: HTMLElement | undefined;
   private notchSpacerEl: HTMLElement | undefined;
-  private validationObserver?: MutationObserver;
 
   private notchController?: NotchController;
 
@@ -82,13 +81,6 @@ export class Select implements ComponentInterface {
    */
   @State() hasFocus = false;
 
-  /**
-   * Track validation state for proper aria-live announcements.
-   */
-  @State() isInvalid = false;
-
-  @State() private hintTextId?: string;
-
   /**
    * The text to display on the cancel button.
    */
@@ -306,51 +298,10 @@ export class Select implements ComponentInterface {
        */
       forceUpdate(this);
     });
-
-    // Watch for class changes to update validation state.
-    if (Build.isBrowser && typeof MutationObserver !== 'undefined') {
-      this.validationObserver = new MutationObserver(() => {
-        const newIsInvalid = checkInvalidState(this.el);
-        if (this.isInvalid !== newIsInvalid) {
-          this.isInvalid = newIsInvalid;
-          /**
-           * Screen readers tend to announce changes
-           * to `aria-describedby` when the attribute
-           * is changed during a blur event for a
-           * native form control.
-           * However, the announcement can be spotty
-           * when using a non-native form control
-           * and `forceUpdate()`.
-           * This is due to `forceUpdate()` internally
-           * rescheduling the DOM update to a lower
-           * priority queue regardless if it's called
-           * inside a Promise or not, thus causing
-           * the screen reader to potentially miss the
-           * change.
-           * By using a State variable inside a Promise,
-           * it guarantees a re-render immediately at
-           * a higher priority.
-           */
-          Promise.resolve().then(() => {
-            this.hintTextId = this.getHintTextId();
-          });
-        }
-      });
-
-      this.validationObserver.observe(el, {
-        attributes: true,
-        attributeFilter: ['class'],
-      });
-    }
-
-    // Always set initial state
-    this.isInvalid = checkInvalidState(this.el);
   }
 
   componentWillLoad() {
     this.inheritedAttributes = inheritAttributes(this.el, ['aria-label']);
-
-    this.hintTextId = this.getHintTextId();
   }
 
   componentDidLoad() {
@@ -377,12 +328,6 @@ export class Select implements ComponentInterface {
       this.notchController.destroy();
       this.notchController = undefined;
     }
-
-    // Clean up validation observer to prevent memory leaks.
-    if (this.validationObserver) {
-      this.validationObserver.disconnect();
-      this.validationObserver = undefined;
-    }
   }
 
   /**
@@ -556,19 +501,14 @@ export class Select implements ComponentInterface {
         .filter((cls) => cls !== 'hydrated')
         .join(' ');
       const optClass = `${OPTION_CLASS} ${copyClasses}`;
-      const isSelected = isOptionSelected(selectValue, value, this.compareWith);
 
       return {
-        role: isSelected ? 'selected' : '',
+        role: isOptionSelected(selectValue, value, this.compareWith) ? 'selected' : '',
         text: option.textContent,
         cssClass: optClass,
         handler: () => {
           this.setValue(value);
         },
-        htmlAttributes: {
-          'aria-checked': isSelected ? 'true' : 'false',
-          role: 'radio',
-        },
       } as ActionSheetButton;
     });
 
@@ -1116,8 +1056,8 @@ export class Select implements ComponentInterface {
         aria-label={this.ariaLabel}
         aria-haspopup="dialog"
         aria-expanded={`${isExpanded}`}
-        aria-describedby={this.hintTextId}
-        aria-invalid={this.isInvalid ? 'true' : undefined}
+        aria-describedby={this.getHintTextID()}
+        aria-invalid={this.getHintTextID() === this.errorTextId}
         aria-required={`${required}`}
         onFocus={this.onFocus}
         onBlur={this.onBlur}
@@ -1126,10 +1066,10 @@ export class Select implements ComponentInterface {
     );
   }
 
-  private getHintTextId(): string | undefined {
-    const { helperText, errorText, helperTextId, errorTextId, isInvalid } = this;
+  private getHintTextID(): string | undefined {
+    const { el, helperText, errorText, helperTextId, errorTextId } = this;
 
-    if (isInvalid && errorText) {
+    if (el.classList.contains('ion-touched') && el.classList.contains('ion-invalid') && errorText) {
       return errorTextId;
     }
 
@@ -1144,14 +1084,14 @@ export class Select implements ComponentInterface {
    * Renders the helper text or error text values
    */
   private renderHintText() {
-    const { helperText, errorText, helperTextId, errorTextId, isInvalid } = this;
+    const { helperText, errorText, helperTextId, errorTextId } = this;
 
     return [
-      <div id={helperTextId} class="helper-text" part="supporting-text helper-text" aria-live="polite">
-        {!isInvalid ? helperText : null}
+      <div id={helperTextId} class="helper-text" part="supporting-text helper-text">
+        {helperText}
       </div>,
-      <div id={errorTextId} class="error-text" part="supporting-text error-text" role="alert">
-        {isInvalid ? errorText : null}
+      <div id={errorTextId} class="error-text" part="supporting-text error-text">
+        {errorText}
       </div>,
     ];
   }

core/src/components/select/test/a11y/select.e2e.ts

@@ -3,7 +3,7 @@ import { expect } from '@playwright/test';
 import { configs, test } from '@utils/test/playwright';
 
 configs({ directions: ['ltr'], palettes: ['light', 'dark'] }).forEach(({ title, config }) => {
-  test.describe(title('select: a11y'), () => {
+  test.describe(title('textarea: a11y'), () => {
     test('default layout should not have accessibility violations', async ({ page }) => {
       await page.setContent(
         `

core/src/components/select/test/validation/index.html

@@ -1,200 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" dir="ltr">
-  <head>
-    <meta charset="UTF-8" />
-    <title>Select - Validation</title>
-    <meta
-      name="viewport"
-      content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
-    />
-    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
-    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
-    <script src="../../../../../scripts/testing/scripts.js"></script>
-    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
-    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
-    <style>
-      .grid {
-        display: grid;
-        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
-        grid-row-gap: 30px;
-        grid-column-gap: 30px;
-      }
-
-      h2 {
-        font-size: 12px;
-        font-weight: normal;
-
-        color: var(--ion-color-step-600);
-
-        margin-top: 10px;
-        margin-bottom: 5px;
-      }
-
-      .validation-info {
-        margin: 20px;
-        padding: 10px;
-        background: var(--ion-color-light);
-        border-radius: 4px;
-      }
-    </style>
-  </head>
-
-  <body>
-    <ion-app>
-      <ion-header>
-        <ion-toolbar>
-          <ion-title>Select - Validation Test</ion-title>
-        </ion-toolbar>
-      </ion-header>
-
-      <ion-content class="ion-padding">
-        <div class="validation-info">
-          <h2>Screen Reader Testing Instructions:</h2>
-          <ol>
-            <li>Enable your screen reader (VoiceOver, NVDA, JAWS, etc.)</li>
-            <li>Tab through the form fields</li>
-            <li>When you tab away from an empty required field, the error should be announced immediately</li>
-            <li>The error text should be announced BEFORE the next field is announced</li>
-            <li>Test in Chrome, Safari, and Firefox to verify consistent behavior</li>
-          </ol>
-        </div>
-
-        <div class="grid">
-          <div>
-            <h2>Required Field</h2>
-            <ion-select
-              id="fruits-select"
-              label="Fruits"
-              placeholder="Select one"
-              interface="alert"
-              helper-text="You must select an option to continue"
-              error-text="This field is required"
-              required
-            >
-              <ion-select-option value="apples">Apples</ion-select-option>
-              <ion-select-option value="oranges">Oranges</ion-select-option>
-              <ion-select-option value="pears">Pears</ion-select-option>
-            </ion-select>
-          </div>
-
-          <div>
-            <h2>Optional Field (No Validation)</h2>
-            <ion-select
-              id="optional-select"
-              label="Colors"
-              placeholder="Select one"
-              interface="alert"
-              helper-text="You can skip this field"
-            >
-              <ion-select-option value="red">Red</ion-select-option>
-              <ion-select-option value="blue">Blue</ion-select-option>
-              <ion-select-option value="green">Green</ion-select-option>
-            </ion-select>
-          </div>
-        </div>
-
-        <div class="ion-padding">
-          <ion-button id="submit-btn" expand="block" disabled>Submit Form</ion-button>
-          <ion-button id="reset-btn" expand="block" fill="outline">Reset Form</ion-button>
-        </div>
-      </ion-content>
-    </ion-app>
-
-    <script>
-      // Simple validation logic
-      const selects = document.querySelectorAll('ion-select');
-      const submitBtn = document.getElementById('submit-btn');
-      const resetBtn = document.getElementById('reset-btn');
-
-      // Track which fields have been touched
-      const touchedFields = new Set();
-
-      // Validation functions
-      const validators = {
-        'fruits-select': (value) => {
-          return value !== '' && value !== undefined;
-        },
-        'optional-select': () => true, // Always valid
-      };
-
-      function validateField(select) {
-        const selectId = select.id;
-        const value = select.value;
-        const isValid = validators[selectId] ? validators[selectId](value) : true;
-
-        // Only show validation state if field has been touched
-        if (touchedFields.has(selectId)) {
-          if (isValid) {
-            select.classList.remove('ion-invalid');
-            select.classList.add('ion-valid');
-          } else {
-            select.classList.remove('ion-valid');
-            select.classList.add('ion-invalid');
-          }
-          select.classList.add('ion-touched');
-        }
-
-        return isValid;
-      }
-
-      function validateForm() {
-        let allValid = true;
-        selects.forEach((select) => {
-          if (select.id !== 'optional-select') {
-            const isValid = validateField(select);
-            if (!isValid) {
-              allValid = false;
-            }
-          }
-        });
-        submitBtn.disabled = !allValid;
-        return allValid;
-      }
-
-      // Add event listeners
-      selects.forEach((select) => {
-        // Mark as touched on blur
-        select.addEventListener('ionBlur', (e) => {
-          console.log('Blur event on:', select.id);
-          touchedFields.add(select.id);
-          validateField(select);
-          validateForm();
-
-          const isInvalid = select.classList.contains('ion-invalid');
-          if (isInvalid) {
-            console.log('Field marked invalid:', select.label, select.errorText);
-          }
-        });
-
-        // Validate on change
-        select.addEventListener('ionChange', (e) => {
-          console.log('Change event on:', select.id);
-          if (touchedFields.has(select.id)) {
-            validateField(select);
-            validateForm();
-          }
-        });
-      });
-
-      // Reset button
-      resetBtn.addEventListener('click', () => {
-        selects.forEach((select) => {
-          select.value = '';
-          select.classList.remove('ion-valid', 'ion-invalid', 'ion-touched');
-        });
-        touchedFields.clear();
-        submitBtn.disabled = true;
-      });
-
-      // Submit button
-      submitBtn.addEventListener('click', () => {
-        if (validateForm()) {
-          alert('Form submitted successfully!');
-        }
-      });
-
-      // Initial setup
-      validateForm();
-    </script>
-  </body>
-</html>

core/src/components/tab-bar/tab-bar.tsx

@@ -22,8 +22,6 @@ import type { TabBarChangedEventDetail } from './tab-bar-interface';
 })
 export class TabBar implements ComponentInterface {
   private keyboardCtrl: KeyboardController | null = null;
-  private keyboardCtrlPromise: Promise<KeyboardController> | null = null;
-  private didLoad = false;
 
   @Element() el!: HTMLElement;
 
@@ -42,12 +40,6 @@ export class TabBar implements ComponentInterface {
   @Prop() selectedTab?: string;
   @Watch('selectedTab')
   selectedTabChanged() {
-    // Skip the initial watcher call that happens during component load
-    // We handle that in componentDidLoad to ensure children are ready
-    if (!this.didLoad) {
-      return;
-    }
-
     if (this.selectedTab !== undefined) {
       this.ionTabBarChanged.emit({
         tab: this.selectedTab,
@@ -73,23 +65,12 @@ export class TabBar implements ComponentInterface {
    */
   @Event() ionTabBarLoaded!: EventEmitter<void>;
 
-  componentDidLoad() {
-    this.ionTabBarLoaded.emit();
-    // Set the flag to indicate the component has loaded
-    // This allows the watcher to emit changes from this point forward
-    this.didLoad = true;
-
-    // Emit the initial selected tab after the component is fully loaded
-    // This ensures all child components (ion-tab-button) are ready
-    if (this.selectedTab !== undefined) {
-      this.ionTabBarChanged.emit({
-        tab: this.selectedTab,
-      });
-    }
+  componentWillLoad() {
+    this.selectedTabChanged();
   }
 
   async connectedCallback() {
-    const promise = createKeyboardController(async (keyboardOpen, waitForResize) => {
+    this.keyboardCtrl = await createKeyboardController(async (keyboardOpen, waitForResize) => {
       /**
        * If the keyboard is hiding, then we need to wait
        * for the webview to resize. Otherwise, the tab bar
@@ -101,35 +82,18 @@ export class TabBar implements ComponentInterface {
 
       this.keyboardVisible = keyboardOpen; // trigger re-render by updating state
     });
-    this.keyboardCtrlPromise = promise;
-
-    const keyboardCtrl = await promise;
-
-    /**
-     * Only assign if this is still the current promise.
-     * Otherwise, a new connectedCallback has started or
-     * disconnectedCallback was called, so destroy this instance.
-     */
-    if (this.keyboardCtrlPromise === promise) {
-      this.keyboardCtrl = keyboardCtrl;
-      this.keyboardCtrlPromise = null;
-    } else {
-      keyboardCtrl.destroy();
-    }
   }
 
   disconnectedCallback() {
-    if (this.keyboardCtrlPromise) {
-      this.keyboardCtrlPromise.then((ctrl) => ctrl.destroy());
-      this.keyboardCtrlPromise = null;
-    }
-
     if (this.keyboardCtrl) {
       this.keyboardCtrl.destroy();
-      this.keyboardCtrl = null;
     }
   }
 
+  componentDidLoad() {
+    this.ionTabBarLoaded.emit();
+  }
+
   render() {
     const { color, translucent, keyboardVisible } = this;
     const mode = getIonMode(this);

core/src/components/tabs/tabs.tsx

@@ -65,33 +65,32 @@ export class Tabs implements NavOutlet {
     this.ionNavWillLoad.emit();
   }
 
-  componentDidLoad() {
-    this.updateTabBar();
-  }
-
-  componentDidUpdate() {
-    this.updateTabBar();
-  }
-
-  private updateTabBar() {
+  componentWillRender() {
     const tabBar = this.el.querySelector('ion-tab-bar');
-    if (!tabBar) {
-      return;
+    if (tabBar) {
+      let tab = this.selectedTab ? this.selectedTab.tab : undefined;
+
+      // Fallback: if no selectedTab is set but we're using router mode,
+      // determine the active tab from the current URL. This works around
+      // timing issues in React Router integration where setRouteId may not
+      // be called in time for the initial render.
+      // TODO(FW-6724): Remove this with React Router upgrade
+      if (!tab && this.useRouter && typeof window !== 'undefined') {
+        const currentPath = window.location.pathname;
+        const tabButtons = this.el.querySelectorAll('ion-tab-button');
+
+        // Look for a tab button that matches the current path pattern
+        for (const tabButton of tabButtons) {
+          const tabId = tabButton.getAttribute('tab');
+          if (tabId && currentPath.includes(tabId)) {
+            tab = tabId;
+            break;
+          }
+        }
+      }
+
+      tabBar.selectedTab = tab;
     }
-
-    const tab = this.selectedTab ? this.selectedTab.tab : undefined;
-
-    // If tabs has no selected tab but tab-bar already has a selected-tab set,
-    // don't overwrite it. This handles cases where tab-bar is used without ion-tab elements.
-    if (tab === undefined) {
-      return;
-    }
-
-    if (tabBar.selectedTab === tab) {
-      return;
-    }
-
-    tabBar.selectedTab = tab;
   }
 
   /**
@@ -163,7 +162,6 @@ export class Tabs implements NavOutlet {
     this.selectedTab = selectedTab;
     this.ionTabsWillChange.emit({ tab: selectedTab.tab });
     selectedTab.active = true;
-    this.updateTabBar();
     return Promise.resolve();
   }
 

core/src/components/textarea/textarea.scss

@@ -205,13 +205,9 @@
 // otherwise the .input-cover will not be rendered at all
 // The input cover is not clickable when the input is disabled
 .cloned-input {
-  position: absolute;
-  top: 0;
-  bottom: 0;
+  @include position(0, null, 0, 0);
 
-  // Reset height since absolute positioning with top/bottom handles sizing
-  height: auto;
-  max-height: none;
+  position: absolute;
 
   pointer-events: none;
 }

core/src/components/textarea/textarea.tsx

@@ -15,7 +15,7 @@ import {
   writeTask,
 } from '@stencil/core';
 import type { NotchController } from '@utils/forms';
-import { createNotchController, checkInvalidState } from '@utils/forms';
+import { createNotchController } from '@utils/forms';
 import type { Attributes } from '@utils/helpers';
 import { inheritAriaAttributes, debounceEvent, inheritAttributes, componentOnReady } from '@utils/helpers';
 import { createSlotMutationController } from '@utils/slot-mutation-controller';
@@ -335,6 +335,16 @@ export class Textarea implements ComponentInterface {
     }
   }
 
+  /**
+   * Checks if the textarea is in an invalid state based on Ionic validation classes
+   */
+  private checkValidationState(): boolean {
+    const hasIonTouched = this.el.classList.contains('ion-touched');
+    const hasIonInvalid = this.el.classList.contains('ion-invalid');
+
+    return hasIonTouched && hasIonInvalid;
+  }
+
   connectedCallback() {
     const { el } = this;
     this.slotMutationController = createSlotMutationController(el, ['label', 'start', 'end'], () => forceUpdate(this));
@@ -347,7 +357,7 @@ export class Textarea implements ComponentInterface {
     // Watch for class changes to update validation state
     if (Build.isBrowser && typeof MutationObserver !== 'undefined') {
       this.validationObserver = new MutationObserver(() => {
-        const newIsInvalid = checkInvalidState(this.el);
+        const newIsInvalid = this.checkValidationState();
         if (this.isInvalid !== newIsInvalid) {
           this.isInvalid = newIsInvalid;
           // Force a re-render to update aria-describedby immediately
@@ -362,7 +372,7 @@ export class Textarea implements ComponentInterface {
     }
 
     // Always set initial state
-    this.isInvalid = checkInvalidState(this.el);
+    this.isInvalid = this.checkValidationState();
 
     this.debounceChanged();
     if (Build.isBrowser) {