merge release-7.8.6 (#29392)

This PR adds a "v7-lts" NPM tag for backporting fixes to v7.

.github/CODEOWNERS

@@ -13,73 +13,7 @@
 
 * @ionic-team/framework
 
-# Frameworks
-
-## Angular
-
-/packages/angular/ @sean-perkins @thetaPC
-/packages/angular-server @sean-perkins @thetaPC
-/packages/angular/test @thetaPC
-
-## React
-
-/packages/react/ @amandaejohnston
-/packages/react-router @amandaejohnston
-/packages/react/test-app/
-/packages/react-router/test-app/
-
-## Vue
-
-/packages/vue/ @liamdebeasi @thetaPC
-/packages/vue-router/ @liamdebeasi @thetaPC
-/packages/vue/test/ @thetaPC
-/packages/vue-router/__tests__ @thetaPC
-
-# Components
-
-/core/src/components/accordion/ @liamdebeasi
-/core/src/components/accordion-group/ @liamdebeasi
-
-/core/src/components/checkbox/ @amandaejohnston
-
-/core/src/components/datetime/ @liamdebeasi @amandaejohnston @sean-perkins
-/core/src/components/datetime-button/ @liamdebeasi
-
-/core/src/components/item/ @brandyscarney
-
-/core/src/components/menu/ @amandaejohnston
-/core/src/components/menu-toggle/ @amandaejohnston
-
-/core/src/components/nav/ @sean-perkins
-/core/src/components/nav-link/ @sean-perkins
-
-/core/src/components/picker-internal/ @liamdebeasi
-/core/src/components/picker-column-internal/ @liamdebeasi
-
-/core/src/components/radio/ @amandaejohnston
-/core/src/components/radio-group/ @amandaejohnston
-
-/core/src/components/refresher/ @liamdebeasi
-/core/src/components/refresher-content/ @liamdebeasi
-
-/core/src/components/searchbar/ @brandyscarney
-
-/core/src/components/segment/ @brandyscarney
-/core/src/components/segment-button/ @brandyscarney
-
-/core/src/components/skeleton-text/ @brandyscarney
-
 # Utilities
 
-/core/src/utils/animation/ @liamdebeasi
-/core/src/utils/content/ @sean-perkins
 /core/src/utils/gesture/ @liamdebeasi
 /core/src/utils/input-shims/ @liamdebeasi
-/core/src/utils/keyboard/ @liamdebeasi
-/core/src/utils/logging/ @amandaejohnston
-/core/src/utils/sanitization/ @liamdebeasi
-/core/src/utils/tap-click/ @liamdebeasi
-/core/src/utils/transition/ @liamdebeasi
-
-/core/src/css/ @brandyscarney
-/core/src/themes/ @brandyscarney

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -20,12 +20,10 @@ body:
     id: affected-versions
     attributes:
       label: Ionic Framework Version
-      description: Which version(s) of Ionic Framework does this issue impact? For Ionic Framework 1.x issues, please use https://github.com/ionic-team/ionic-v1. For Ionic Framework 2.x and 3.x issues, please use https://github.com/ionic-team/ionic-v3.
+      description: Which version(s) of Ionic Framework does this issue impact? [Ionic Framework 1.x to 6.x are no longer supported](https://ionicframework.com/docs/reference/support#framework-maintenance-and-support-status). For extended support, considering visiting [Ionic's Enterprise offering](https://ionic.io/enterprise).
       options:
-        - v4.x
-        - v5.x
-        - v6.x
         - v7.x
+        - v8.x (Beta)
         - Nightly
       multiple: true
     validations:
@@ -51,11 +49,11 @@ body:
     id: steps-to-reproduce
     attributes:
       label: Steps to Reproduce
-      description: Please explain the steps required to duplicate this issue.
+      description: Explain the steps required to reproduce this issue.
       placeholder: |
-        1.
-        2.
-        3.
+        1. Go to '...'
+        2. Click on '...'
+        3. Observe: '...'
     validations:
       required: true
 
@@ -63,8 +61,15 @@ body:
     id: reproduction-url
     attributes:
       label: Code Reproduction URL
-      description: Please reproduce this issue in a blank Ionic Framework starter application and provide a link to the repo. Try out our [Getting Started Wizard](https://ionicframework.com/start#basics) to quickly spin up an Ionic Framework starter app. This is the best way to ensure this issue is triaged quickly. Issues without a code reproduction may be closed if the Ionic Team cannot reproduce the issue you are reporting.
+      description: |
+        Reproduce this issue in a blank [Ionic Framework starter application](https://ionicframework.com/start#basics) or a Stackblitz example.
+
+        You can use the Stackblitz button available on any of the [component playgrounds](https://ionicframework.com/docs/components) to open an editable example. Remember to save your changes to obtain a link to copy.
+
+        Reproductions cases must be minimal and focused around the specific problem you are experiencing. This is the best way to ensure this issue is triaged quickly. Issues without a code reproduction may be closed if the Ionic Team cannot reproduce the issue you are reporting.
       placeholder: https://github.com/...
+    validations:
+      required: true
 
   - type: textarea
     id: ionic-info

.github/PULL_REQUEST_TEMPLATE.md

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

.github/dependabot.yml

@@ -1,20 +0,0 @@
-version: 2
-updates:
-  - package-ecosystem: "npm"
-    directory: "/core"
-    schedule:
-      interval: "daily"
-    versioning-strategy: increase
-    allow:
-      - dependency-name: "@playwright/test"
-      - dependency-name: "@axe-core/playwright"
-      - dependency-name: "@stencil/angular-output-target"
-      - dependency-name: "@stencil/core"
-      - dependency-name: "@stencil/react-output-target"
-      - dependency-name: "@stencil/sass"
-      - dependency-name: "@stencil/vue-output-target"
-      - dependency-name: "ionicons"
-      - dependency-name: "@capacitor/core"
-      - dependency-name: "@capacitor/keyboard"
-      - dependency-name: "@capacitor/haptics"
-      - dependency-name: "@capacitor/status-bar"

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

@@ -3,7 +3,7 @@ description: 'Build Ionic Angular Server'
 runs:
   using: 'composite'
   steps:
-    - uses: actions/setup-node@v3
+    - uses: actions/setup-node@v4
       with:
         node-version: 18.x
 

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

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

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

@@ -8,8 +8,8 @@ inputs:
 runs:
   using: 'composite'
   steps:
-    - uses: actions/checkout@v3
-    - uses: actions/setup-node@v3
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v4
       with:
         node-version: 18.x
 
@@ -22,7 +22,7 @@ runs:
       run: npm i @stencil/core@${{ inputs.stencil-version }}
       shell: bash
     - name: Build Core
-      run: npm run build -- --ci
+      run: npm run build -- --ci --debug --verbose
       working-directory: ./core
       shell: bash
     - uses: ./.github/workflows/actions/upload-archive

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

@@ -8,8 +8,8 @@ inputs:
 runs:
   using: 'composite'
   steps:
-    - uses: actions/checkout@v3
-    - uses: actions/setup-node@v3
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v4
       with:
         node-version: 18.x
     - name: Install Dependencies

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -7,11 +7,13 @@ inputs:
     description: 'Playwright total number of test shards (ex: 4)'
   update:
     description: 'Whether or not to update the reference snapshots'
+  component:
+    description: 'The component to update the reference snapshots'
 
 runs:
   using: 'composite'
   steps:
-    - uses: actions/setup-node@v3
+    - uses: actions/setup-node@v4
       with:
         node-version: 18.x
     - uses: ./.github/workflows/actions/download-archive
@@ -19,13 +21,13 @@ runs:
         name: ionic-core
         path: ./core
         filename: CoreBuild.zip
-    - name: Install Playwright Dependencies
-      run: npm install && npx playwright install && npx playwright install-deps
+    - name: Install Dependencies
+      run: npm install
       shell: bash
       working-directory: ./core
     - name: Test
       if: inputs.update != 'true'
-      run: npm run test.e2e -- --shard=${{ inputs.shard }}/${{ inputs.totalShards }}
+      run: npm run test.e2e.docker.ci ${{ inputs.component }} -- --shard=${{ inputs.shard }}/${{ inputs.totalShards }}
       shell: bash
       working-directory: ./core
     - name: Test and Update
@@ -47,7 +49,7 @@ runs:
       # which is why we not using the upload-archive
       # composite step here.
       run: |
-        npm run test.e2e -- --shard=${{ inputs.shard }}/${{ inputs.totalShards }} --update-snapshots
+        npm run test.e2e.docker.ci ${{ inputs.component }} -- --shard=${{ inputs.shard }}/${{ inputs.totalShards }} --update-snapshots
         git add src/\*.png --force
         mkdir updated-screenshots
         cd ../ && rsync -R --progress $(git diff --name-only --cached) core/updated-screenshots
@@ -60,7 +62,7 @@ runs:
       working-directory: ./core
     - name: Archive Updated Screenshots
       if: inputs.update == 'true' && steps.test-and-update.outputs.hasUpdatedScreenshots == 'true'
-      uses: actions/upload-artifact@v3
+      uses: actions/upload-artifact@v4
       with:
         name: updated-screenshots-${{ inputs.shard }}-${{ inputs.totalShards }}
         path: UpdatedScreenshots-${{ inputs.shard }}-${{ inputs.totalShards }}.zip

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

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

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

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

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

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

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

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

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

@@ -7,10 +7,10 @@ on:
 runs:
   using: 'composite'
   steps:
-    - uses: actions/setup-node@v3
+    - uses: actions/setup-node@v4
       with:
         node-version: 18.x
-    - uses: actions/download-artifact@v3
+    - uses: actions/download-artifact@v4
       with:
         path: ./artifacts
     - name: Extract Archives
@@ -25,12 +25,9 @@ runs:
       # Configure user as Ionitron
       # and push only the changed .png snapshots
       # to the remote branch.
-      # Screenshots are in .gitignore
+      # Non-Linux screenshots are in .gitignore
       # to prevent local screenshots from getting
-      # pushed to Git. As a result, we need --force
-      # here so that CI generated screenshots can
-      # get added to git. Screenshot ground truths
-      # should only be added via this CI process.
+      # pushed to Git.
       run: |
         git config user.name ionitron
         git config user.email hi@ionicframework.com
@@ -38,7 +35,7 @@ runs:
         # This adds an empty entry for new
         # screenshot files so we can track them with
         # git diff
-        git add src/\*.png --force -N
+        git add src/\*.png -N
 
         if git diff --exit-code; then
           echo -e "\033[1;31m⚠️ Error: No new screenshots generated ⚠️\033[0m"
@@ -48,7 +45,7 @@ runs:
         else
           # This actually adds the contents
           # of the screenshots (including new ones)
-          git add src/\*.png --force
+          git add src/\*.png
           git commit -m "chore(): add updated snapshots"
           git push
         fi

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

@@ -13,7 +13,7 @@ runs:
     - name: Create Archive
       run: zip -q -r ${{ inputs.output }} ${{ inputs.paths }}
       shell: bash
-    - uses: actions/upload-artifact@v3
+    - uses: actions/upload-artifact@v4
       with:
         name: ${{ inputs.name }}
         path: ${{ inputs.output }}

.github/workflows/assign-issues.yml

@@ -0,0 +1,18 @@
+name: Assign issues to triage
+
+on:
+  issues:
+    types: [opened]
+
+jobs:
+  auto-assign:
+    runs-on: ubuntu-latest
+    permissions:
+      issues: write
+    steps:
+      - name: 'Auto-assign issue'
+        uses: pozil/auto-assign-issue@65947009a243e6b3993edeef4e64df3ca85d760c # v1.14.0
+        with:
+          assignees: liamdebeasi, sean-perkins, brandyscarney, amandaejohnston, thetaPC
+          numOfAssignee: 1
+          allowSelfAssign: false

.github/workflows/build.yml

@@ -22,7 +22,7 @@ jobs:
   build-core:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - 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@v3
+      - uses: actions/checkout@v4
       - uses: ./.github/workflows/actions/test-core-clean-build
 
   test-core-lint:
     needs: [build-core]
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - uses: ./.github/workflows/actions/test-core-lint
 
   test-core-spec:
     needs: [build-core]
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - 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@v3
+      - uses: actions/checkout@v4
       - 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@v3
+    - uses: actions/checkout@v4
     - uses: ./.github/workflows/actions/build-vue
 
   build-vue-router:
     needs: [build-vue]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v3
+    - uses: actions/checkout@v4
     - 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@v3
+    - uses: actions/checkout@v4
     - 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@v3
+    - uses: actions/checkout@v4
     - uses: ./.github/workflows/actions/build-angular
 
   build-angular-server:
     needs: [build-core]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v3
+    - uses: actions/checkout@v4
     - 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@v3
+    - uses: actions/checkout@v4
     - 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@v3
+    - uses: actions/checkout@v4
     - uses: ./.github/workflows/actions/build-react
 
   build-react-router:
     needs: [build-react]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v3
+    - uses: actions/checkout@v4
     - 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@v3
+    - uses: actions/checkout@v4
     - 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@v3
+    - uses: actions/checkout@v4
     - 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@v3
-      - uses: github/codeql-action/init@v2
+      - uses: actions/checkout@v4
+      - uses: github/codeql-action/init@v3
         with:
           languages: javascript
-      - uses: github/codeql-action/analyze@v2
+      - uses: github/codeql-action/analyze@v3

.github/workflows/dev-build.yml

@@ -9,7 +9,7 @@ jobs:
     outputs:
       dev-hash: ${{ steps.create-dev-hash.outputs.DEV_HASH }}
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       # A 1 is required before the timestamp
       # as lerna will fail when there is a leading 0
       # See https://github.com/lerna/lerna/issues/2840

.github/workflows/nightly.yml

@@ -12,7 +12,7 @@ jobs:
     outputs:
       nightly-hash: ${{ steps.create-nightly-hash.outputs.NIGHTLY_HASH }}
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       # 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
@@ -37,45 +37,3 @@ jobs:
       version: ${{ needs.create-nightly-hash.outputs.nightly-hash }}
     secrets:
       NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
-
-  finalize-release:
-    needs: [create-nightly-hash, release-ionic]
-    runs-on: ubuntu-latest
-    steps:
-    - uses: actions/checkout@v3
-      with:
-        token: ${{ secrets.IONITRON_TOKEN }}
-        fetch-depth: 0
-    - name: Configure Identity
-      # Commits from github-actions do not
-      # trigger other GitHub Actions. As a result,
-      # we publish releases from Ionitron instead
-      # so actions run when merging the release branch
-      # back into main.
-      run: |
-        git config user.name ionitron
-        git config user.email hi@ionicframework.com
-      shell: bash
-    - name: Checkout Nightly Branch
-      # There are branch protection rules for our version
-      # branches (i.e. "6.2.x"), so we cannot name the branch
-      # the nightly hash as it would fall under the protection
-      # rule. As a result, we prefix "tmp-" to the branch.
-      run: |
-        git checkout -b tmp-${{ needs.create-nightly-hash.outputs.nightly-hash }}
-        git push origin tmp-${{ needs.create-nightly-hash.outputs.nightly-hash }}
-      shell: bash
-    - name: Create GitHub Release
-      run: lerna version ${{ needs.create-nightly-hash.outputs.nightly-hash }} --yes --force-publish='*' --conventional-commits --conventional-prerelease --create-release github
-      env:
-        GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-      shell: bash
-    # We need to push the commit changes in order for the tags
-    # to get updated, but we don't need to keep the changelog
-    # changes around.
-    - name: Delete Nightly Branch
-      run: |
-        git checkout main
-        git branch -D tmp-${{ needs.create-nightly-hash.outputs.nightly-hash }}
-        git push origin --delete tmp-${{ needs.create-nightly-hash.outputs.nightly-hash }}
-      shell: bash

.github/workflows/release-ionic.yml

@@ -22,7 +22,7 @@ jobs:
   release-core:
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v3
+    - uses: actions/checkout@v4
     - uses: ./.github/workflows/actions/publish-npm
       with:
         scope: '@ionic/core'
@@ -41,19 +41,19 @@ jobs:
       uses: ./.github/workflows/actions/upload-archive
       with:
         name: ionic-docs
-        output: docs/DocsBuild.zip
-        paths: docs/core.json docs/core.d.ts
+        output: packages/docs/DocsBuild.zip
+        paths: packages/docs/core.json packages/docs/core.d.ts
 
   release-docs:
     needs: [release-core]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v3
+    - uses: actions/checkout@v4
     - name: Restore @ionic/docs built cache
       uses: ./.github/workflows/actions/download-archive
       with:
         name: ionic-docs
-        path: ./docs
+        path: ./packages/docs
         filename: DocsBuild.zip
     - uses: ./.github/workflows/actions/publish-npm
       with:
@@ -61,14 +61,14 @@ jobs:
         tag: ${{ inputs.tag }}
         version: ${{ inputs.version }}
         preid: ${{ inputs.preid }}
-        working-directory: 'docs'
+        working-directory: 'packages/docs'
         token: ${{ secrets.NPM_TOKEN }}
 
   release-angular:
     needs: [release-core]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v3
+    - uses: actions/checkout@v4
     - name: Restore @ionic/core built cache
       uses: ./.github/workflows/actions/download-archive
       with:
@@ -95,7 +95,7 @@ jobs:
     needs: [release-core]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v3
+    - uses: actions/checkout@v4
     - name: Restore @ionic/core built cache
       uses: ./.github/workflows/actions/download-archive
       with:
@@ -121,7 +121,7 @@ jobs:
     needs: [release-core]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v3
+    - uses: actions/checkout@v4
     - name: Restore @ionic/core built cache
       uses: ./.github/workflows/actions/download-archive
       with:
@@ -147,7 +147,7 @@ jobs:
     needs: [release-core]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v3
+    - uses: actions/checkout@v4
     - name: Restore @ionic/core built cache
       uses: ./.github/workflows/actions/download-archive
       with:
@@ -168,7 +168,7 @@ jobs:
     needs: [release-react]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v3
+    - uses: actions/checkout@v4
     - name: Restore @ionic/core built cache
       uses: ./.github/workflows/actions/download-archive
       with:
@@ -194,7 +194,7 @@ jobs:
     needs: [release-vue]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v3
+    - uses: actions/checkout@v4
     - name: Restore @ionic/core built cache
       uses: ./.github/workflows/actions/download-archive
       with:

.github/workflows/release.yml

@@ -20,10 +20,7 @@ on:
         type: choice
         description: Which npm tag should this be published to?
         options:
-          - latest
-          - next
-          - v5-lts
-          - v4-lts
+          - v7-lts
       preid:
         type: choice
         description: Which prerelease identifier should be used? This is only needed when version is "prepatch", "preminor", "premajor", or "prerelease".
@@ -50,7 +47,7 @@ jobs:
     needs: [release-ionic]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v3
+    - uses: actions/checkout@v4
       with:
         token: ${{ secrets.IONITRON_TOKEN }}
         fetch-depth: 0
@@ -69,16 +66,45 @@ jobs:
       env:
         GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
       shell: bash
-    # Lerna does not automatically bump versions
-    # of Ionic dependencies that have changed,
-    # so we do that here.
-    - name: Bump Package Lock
-      run: |
-        lerna exec "npm install --package-lock-only"
-        git add .
-        git commit -m "chore(): update package lock files"
-        git push
-      shell: bash
+
+  update-package-lock:
+    # This needs to run after finalize-release
+    # because we also push to the repo in that
+    # job. If these jobs ran in parallel then it is
+    # possible for them to push at the same time.
+    needs: [finalize-release]
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        # Pull the latest version of the reference
+        # branch instead of the revision that triggered
+        # the workflow otherwise we won't get the commit
+        # created in the previous job and this next job
+        # will fail.
+        with:
+          ref: ${{ github.ref }}
+      - name: Configure Identity
+        # Commits from github-actions do not
+        # trigger other GitHub Actions. As a result,
+        # we push from Ionitron instead so actions
+        # run when merging the release branch
+        # back into main.
+        run: |
+          git config user.name ionitron
+          git config user.email hi@ionicframework.com
+        shell: bash
+      # Lerna does not automatically bump versions
+      # of Ionic dependencies that have changed,
+      # so we do that here.
+      - name: Bump Package Lock
+        run: |
+          lerna exec "npm install --package-lock-only"
+          git add .
+          git commit -m "chore(): update package lock files"
+          git push
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        shell: bash
 
   purge-cdn-cache:
     needs: [release-ionic]

.github/workflows/stencil-nightly.yml

@@ -26,7 +26,7 @@ jobs:
   build-core-with-stencil-nightly:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - 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@v3
+      - uses: actions/checkout@v4
       - 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@v3
+      - uses: actions/checkout@v4
       - uses: ./.github/workflows/actions/test-core-lint
 
   test-core-spec:
     needs: [build-core-with-stencil-nightly]
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - 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@v3
+      - uses: actions/checkout@v4
       - 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@v3
+    - uses: actions/checkout@v4
     - uses: ./.github/workflows/actions/build-vue
 
   build-vue-router:
     needs: [build-vue]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v3
+    - uses: actions/checkout@v4
     - 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@v3
+    - uses: actions/checkout@v4
     - uses: ./.github/workflows/actions/test-vue-e2e
       with:
         app: ${{ matrix.apps }}
@@ -136,25 +136,25 @@ jobs:
     needs: [build-core-with-stencil-nightly]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v3
+    - uses: actions/checkout@v4
     - uses: ./.github/workflows/actions/build-angular
 
   build-angular-server:
     needs: [build-core-with-stencil-nightly]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v3
+    - uses: actions/checkout@v4
     - uses: ./.github/workflows/actions/build-angular-server
 
   test-angular-e2e:
     strategy:
       fail-fast: false
       matrix:
-        apps: [ng12, ng13, ng14, ng15]
+        apps: [ng16, ng17]
     needs: [build-angular, build-angular-server]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v3
+    - uses: actions/checkout@v4
     - 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@v3
+    - uses: actions/checkout@v4
     - uses: ./.github/workflows/actions/build-react
 
   build-react-router:
     needs: [build-react]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v3
+    - uses: actions/checkout@v4
     - 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@v3
+    - uses: actions/checkout@v4
     - 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@v3
+    - uses: actions/checkout@v4
     - uses: ./.github/workflows/actions/test-react-e2e
       with:
         app: ${{ matrix.apps }}

.github/workflows/update-screenshots.yml

@@ -2,12 +2,31 @@ name: 'Update Reference Screenshots'
 
 on:
   workflow_dispatch:
+    inputs:
+      # Screenshots can be updated for all components or specified component(s).
+      # If the `component` variable is set, then the test has the option to
+      # - run all the instances of the specified component(s) in the `src/components` folder
+      # -- For example: if the `component` value is "item", then the following command will be: `npm run test.e2e item`
+      # - run the specified file path
+      # -- For example: if the `component` value is "src/components/item/test/basic", then the following command will be: `npm run test.e2e src/components/item/test/basic`
+      # - run multiple specified components based on the space-separated value
+      # -- For example: if the `component` value is "item basic", then the following command will be: `npm run test.e2e item basic`
+      # -- For example: if the `component` value is "src/components/item/test/basic src/components/item/test/a11y", then the following command will be: `npm run test.e2e src/components/item/test/basic src/components/item/test/a11y`
+      #
+      # If the `component` variable is not set, then the test will run all the instances of the components in the `src/components` folder.
+      # - For example: `npm run test.e2e`
+      #
+      # More common options can be found at the Playwright Command line page: https://playwright.dev/docs/test-cli
+      component:
+        description: 'What component(s) should be updated? (leave blank to update all or use a space-separated list for multiple components)'
+        required: false
+        default: ''
 
 jobs:
   build-core:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - uses: ./.github/workflows/actions/build-core
 
   test-core-screenshot:
@@ -28,18 +47,19 @@ jobs:
     needs: [build-core]
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - uses: ./.github/workflows/actions/test-core-screenshot
         with:
           shard: ${{ matrix.shard }}
           totalShards: ${{ matrix.totalShards }}
           update: true
+          component: ${{ inputs.component }}
 
   update-reference-screenshots:
     runs-on: ubuntu-latest
     needs: [test-core-screenshot]
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
         # Normally, we could just push with the
         # default GITHUB_TOKEN, but that will
         # not cause the build workflow

.gitignore

@@ -68,7 +68,16 @@ core/www/
 # playwright
 core/test-results/
 core/playwright-report/
-core/**/*-snapshots
+
+# ground truths generated outside of docker should not be committed to the repo
+core/**/*-snapshots/*
+
+# new ground truths should only be generated inside of docker which will result in -linux.png screenshots
+!core/**/*-snapshots/*-linux.png
+
+# these files are going to be different per-developer environment so do not add them to the repo
+core/docker-display.txt
+core/docker-display-volume.txt
 
 # angular
 packages/angular/css/

.vercelignore

@@ -0,0 +1 @@
+core/src/components/**/*/*.png

CHANGELOG.md

@@ -3,6 +3,235 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [7.8.6](https://github.com/ionic-team/ionic-framework/compare/v7.8.5...v7.8.6) (2024-04-24)
+
+
+### Bug Fixes
+
+* **input:** clear button can be navigated using screen reader ([#29366](https://github.com/ionic-team/ionic-framework/issues/29366)) ([#29383](https://github.com/ionic-team/ionic-framework/issues/29383)) ([5ce0c60](https://github.com/ionic-team/ionic-framework/commit/5ce0c609f365aa497814067276b67fc4e58bdb35))
+
+
+
+
+
+## [7.8.5](https://github.com/ionic-team/ionic-framework/compare/v7.8.4...v7.8.5) (2024-04-17)
+
+
+### Bug Fixes
+
+* **modal:** improve sheet modal scrolling and gesture behavior ([#29312](https://github.com/ionic-team/ionic-framework/issues/29312)) ([9738228](https://github.com/ionic-team/ionic-framework/commit/9738228bc05abe3e2012e57b0e6b85f0ec06f66b)), closes [#24583](https://github.com/ionic-team/ionic-framework/issues/24583)
+
+
+
+
+
+## [7.8.4](https://github.com/ionic-team/ionic-framework/compare/v7.8.3...v7.8.4) (2024-04-10)
+
+
+### Performance Improvements
+
+* **styles:** compress distributed global stylesheets ([#29275](https://github.com/ionic-team/ionic-framework/issues/29275)) ([b3cd49b](https://github.com/ionic-team/ionic-framework/commit/b3cd49bf2219aacffc1ac34acbae7c76ef243765))
+
+
+
+
+
+## [7.8.3](https://github.com/ionic-team/ionic-framework/compare/v7.8.2...v7.8.3) (2024-04-03)
+
+
+### Bug Fixes
+
+* **button:** activated outline button in toolbar no longer blends into background on MD dark mode ([#29216](https://github.com/ionic-team/ionic-framework/issues/29216)) ([ee5da7a](https://github.com/ionic-team/ionic-framework/commit/ee5da7a747c0a0b420c5e371a9fe9ec4938d179e))
+* **popover:** viewport can be scrolled if no content present ([#29215](https://github.com/ionic-team/ionic-framework/issues/29215)) ([f08759c](https://github.com/ionic-team/ionic-framework/commit/f08759c2b8256ff66f8d1901bd8e0be4617db262)), closes [#29211](https://github.com/ionic-team/ionic-framework/issues/29211)
+
+
+
+
+
+## [7.8.2](https://github.com/ionic-team/ionic-framework/compare/v7.8.1...v7.8.2) (2024-03-27)
+
+
+### Bug Fixes
+
+* **searchbar:** autocapitalize is initialized correctly ([#29197](https://github.com/ionic-team/ionic-framework/issues/29197)) ([8ad66c0](https://github.com/ionic-team/ionic-framework/commit/8ad66c03d777edcab19c97cba696b171acc2d2e8)), closes [#29193](https://github.com/ionic-team/ionic-framework/issues/29193)
+
+
+
+
+
+## [7.8.1](https://github.com/ionic-team/ionic-framework/compare/v7.8.0...v7.8.1) (2024-03-20)
+
+
+### Bug Fixes
+
+* **datetime:** wheel picker shows consistently in overlays ([#29147](https://github.com/ionic-team/ionic-framework/issues/29147)) ([19c1bc1](https://github.com/ionic-team/ionic-framework/commit/19c1bc16cbc6725463890382365203824b7fd353)), closes [#26234](https://github.com/ionic-team/ionic-framework/issues/26234)
+* **header:** iOS headers in MD app are not hidden ([#29164](https://github.com/ionic-team/ionic-framework/issues/29164)) ([fdfecd3](https://github.com/ionic-team/ionic-framework/commit/fdfecd32c33c41cf202d3b30c073bfb1b077e2d6)), closes [#28867](https://github.com/ionic-team/ionic-framework/issues/28867)
+* **react:** avoid definitely typed errors with @types/react@18 ([#29182](https://github.com/ionic-team/ionic-framework/issues/29182)) ([58d217d](https://github.com/ionic-team/ionic-framework/commit/58d217d0cf6b716da855c71c169fb1870d4067d3)), closes [#29178](https://github.com/ionic-team/ionic-framework/issues/29178)
+
+
+### Performance Improvements
+
+* **datetime:** calendar body shows immediately in modal on ios ([#29163](https://github.com/ionic-team/ionic-framework/issues/29163)) ([f759776](https://github.com/ionic-team/ionic-framework/commit/f75977699dae5aeea3d97d4318377633e935afb9)), closes [#24542](https://github.com/ionic-team/ionic-framework/issues/24542)
+
+
+
+
+
+# [7.8.0](https://github.com/ionic-team/ionic-framework/compare/v7.7.5...v7.8.0) (2024-03-13)
+
+
+### Features
+
+* **datetime:** formatOptions property for Datetime ([#29065](https://github.com/ionic-team/ionic-framework/issues/29065)) ([7cdbc1b](https://github.com/ionic-team/ionic-framework/commit/7cdbc1b5ad004e17a7c51363653e0e67f50e6860))
+* **searchbar:** autocapitalize, dir, lang, maxlength, and minlength are inherited to native input ([#29098](https://github.com/ionic-team/ionic-framework/issues/29098)) ([a0a77f7](https://github.com/ionic-team/ionic-framework/commit/a0a77f799df0732d9f7182f15866035a3ce5a1eb)), closes [#27606](https://github.com/ionic-team/ionic-framework/issues/27606)
+
+
+
+
+
+## [7.7.5](https://github.com/ionic-team/ionic-framework/compare/v7.7.4...v7.7.5) (2024-03-13)
+
+
+### Bug Fixes
+
+* **angular:** add ionNavWillChange and ionNavDidChange types for nav ([#29122](https://github.com/ionic-team/ionic-framework/issues/29122)) ([85b9d5c](https://github.com/ionic-team/ionic-framework/commit/85b9d5c35f626ffc273d220549b0126ddc1f7e4b)), closes [#29114](https://github.com/ionic-team/ionic-framework/issues/29114)
+* **checkbox:** set aria-checked of indeterminate checkbox to 'mixed' ([#29115](https://github.com/ionic-team/ionic-framework/issues/29115)) ([b2d636f](https://github.com/ionic-team/ionic-framework/commit/b2d636f14dcd33313f6604cfd4a64b542c831b34))
+* **overlay:** do not hide overlay if toast is presented ([#29140](https://github.com/ionic-team/ionic-framework/issues/29140)) ([c0f5e5e](https://github.com/ionic-team/ionic-framework/commit/c0f5e5ebc0c9d45d71e10e09903b00b3ba8e6bba)), closes [#29139](https://github.com/ionic-team/ionic-framework/issues/29139)
+
+
+
+
+
+## [7.7.4](https://github.com/ionic-team/ionic-framework/compare/v7.7.3...v7.7.4) (2024-03-06)
+
+
+### Bug Fixes
+
+* **modal:** ariaLabel and role are inherited when set via htmlAttributes ([#29099](https://github.com/ionic-team/ionic-framework/issues/29099)) ([de13633](https://github.com/ionic-team/ionic-framework/commit/de13633a182d963876434db773aa346833f956fd))
+
+
+
+
+
+## [7.7.3](https://github.com/ionic-team/ionic-framework/compare/v7.7.2...v7.7.3) (2024-02-21)
+
+
+### Bug Fixes
+
+* **label:** do not grow when in end slot ([#29036](https://github.com/ionic-team/ionic-framework/issues/29036)) ([1fc4b76](https://github.com/ionic-team/ionic-framework/commit/1fc4b76f5940b38fd89e19561d6b4738dfb8ae5d)), closes [#29033](https://github.com/ionic-team/ionic-framework/issues/29033)
+* **overlays:** focus is returned to last focus element when focusing toast ([#28950](https://github.com/ionic-team/ionic-framework/issues/28950)) ([2ed0ada](https://github.com/ionic-team/ionic-framework/commit/2ed0ada9237b3f4dbf5959746ce2d1744936eebe)), closes [#28261](https://github.com/ionic-team/ionic-framework/issues/28261)
+
+
+
+
+
+## [7.7.2](https://github.com/ionic-team/ionic-framework/compare/v7.7.1...v7.7.2) (2024-02-14)
+
+
+### Bug Fixes
+
+* **overlays:** do not return focus if application has already moved focus manually ([#28850](https://github.com/ionic-team/ionic-framework/issues/28850)) ([a016670](https://github.com/ionic-team/ionic-framework/commit/a016670a8a46e101d23235b17bc8a2081fb992eb)), closes [#28849](https://github.com/ionic-team/ionic-framework/issues/28849)
+* **overlays:** ensure that only topmost overlay is announced by screen readers ([#28997](https://github.com/ionic-team/ionic-framework/issues/28997)) ([ba4ba61](https://github.com/ionic-team/ionic-framework/commit/ba4ba6161c1a6c67f7804b07f49c64ac9ad2b14c)), closes [#23472](https://github.com/ionic-team/ionic-framework/issues/23472)
+* **popover:** render arrow above backdrop ([#28986](https://github.com/ionic-team/ionic-framework/issues/28986)) ([0a8964d](https://github.com/ionic-team/ionic-framework/commit/0a8964d30c76218fe62f7f4aed4f81df7bb80cd0)), closes [#28985](https://github.com/ionic-team/ionic-framework/issues/28985)
+
+
+
+
+
+## [7.7.1](https://github.com/ionic-team/ionic-framework/compare/v7.7.0...v7.7.1) (2024-02-07)
+
+
+### Bug Fixes
+
+* **action-sheet:** iOS dismiss animation respects safe area ([#28915](https://github.com/ionic-team/ionic-framework/issues/28915)) ([7449fb4](https://github.com/ionic-team/ionic-framework/commit/7449fb4fed4048f5d01ba068dc6f8e2d7727e95d)), closes [#28541](https://github.com/ionic-team/ionic-framework/issues/28541)
+* **overlays:** tear down animations after dismiss ([#28907](https://github.com/ionic-team/ionic-framework/issues/28907)) ([950fa40](https://github.com/ionic-team/ionic-framework/commit/950fa40c5597c81d5cbaeb9276b09adfea5e79fb)), closes [#28352](https://github.com/ionic-team/ionic-framework/issues/28352)
+* **react:** route with redirect will mount page ([#28961](https://github.com/ionic-team/ionic-framework/issues/28961)) ([5777ce2](https://github.com/ionic-team/ionic-framework/commit/5777ce258119d2715b1326cdc103bd4ad7612bd1)), closes [#28838](https://github.com/ionic-team/ionic-framework/issues/28838)
+* **select:** popover can be scrolled ([#28965](https://github.com/ionic-team/ionic-framework/issues/28965)) ([35ab6b4](https://github.com/ionic-team/ionic-framework/commit/35ab6b4816bd627239de8d8b25ce0c86db8c74b4)), closes [#28963](https://github.com/ionic-team/ionic-framework/issues/28963)
+
+
+
+
+
+# [7.7.0](https://github.com/ionic-team/ionic-framework/compare/v7.6.7...v7.7.0) (2024-01-31)
+
+
+### Features
+
+* add experimental hardware back button support in browsers ([#28705](https://github.com/ionic-team/ionic-framework/issues/28705)) ([658d1ca](https://github.com/ionic-team/ionic-framework/commit/658d1caccd530350843b85c0e24544ec27dd9eb4)), closes [#28703](https://github.com/ionic-team/ionic-framework/issues/28703)
+
+
+
+
+
+## [7.6.7](https://github.com/ionic-team/ionic-framework/compare/v7.6.6...v7.6.7) (2024-01-31)
+
+
+### Bug Fixes
+
+* **accordion:** prevent opening of readonly accordion using keyboard ([#28865](https://github.com/ionic-team/ionic-framework/issues/28865)) ([e10f49c](https://github.com/ionic-team/ionic-framework/commit/e10f49c43daa11fe7deb5a9b9bfd34897542b6b1)), closes [#28344](https://github.com/ionic-team/ionic-framework/issues/28344)
+* **action-sheet, alert, toast:** button roles autocomplete with available options ([#27940](https://github.com/ionic-team/ionic-framework/issues/27940)) ([f6fc22b](https://github.com/ionic-team/ionic-framework/commit/f6fc22bba60388701b80a9421510e3d843d39e9e)), closes [#27965](https://github.com/ionic-team/ionic-framework/issues/27965)
+* **item:** ensure button focus state on property change ([#28892](https://github.com/ionic-team/ionic-framework/issues/28892)) ([bf7922c](https://github.com/ionic-team/ionic-framework/commit/bf7922c8b37b32dbf90650cb74a2e77bedf0c118)), closes [#28525](https://github.com/ionic-team/ionic-framework/issues/28525)
+* **item:** only default slot content wraps ([#28773](https://github.com/ionic-team/ionic-framework/issues/28773)) ([9448783](https://github.com/ionic-team/ionic-framework/commit/9448783bb19b187f867054c86d215e3dc97952c1)), closes [#28769](https://github.com/ionic-team/ionic-framework/issues/28769)
+
+
+
+
+
+## [7.6.6](https://github.com/ionic-team/ionic-framework/compare/v7.6.5...v7.6.6) (2024-01-24)
+
+
+### Bug Fixes
+
+* **alert:** remove border-right on ios stacked buttons ([#28821](https://github.com/ionic-team/ionic-framework/issues/28821)) ([ad65824](https://github.com/ionic-team/ionic-framework/commit/ad65824722da0eed90ef9e595b743754bfd360b8))
+* **datetime:** do not animate to new value when multiple values in different months are set ([#28847](https://github.com/ionic-team/ionic-framework/issues/28847)) ([9262f7d](https://github.com/ionic-team/ionic-framework/commit/9262f7da15969706039e9d5f11ef5c7bd73ced0d)), closes [#28602](https://github.com/ionic-team/ionic-framework/issues/28602)
+* **datetime:** enter closes keyboard when typing time ([#28848](https://github.com/ionic-team/ionic-framework/issues/28848)) ([c47a16d](https://github.com/ionic-team/ionic-framework/commit/c47a16d6c3c57f56b053727dd10ead0bfe547e50)), closes [#28325](https://github.com/ionic-team/ionic-framework/issues/28325)
+* **menu:** improve reliability of main content not being scrollable when menu opens ([#28829](https://github.com/ionic-team/ionic-framework/issues/28829)) ([9603a4d](https://github.com/ionic-team/ionic-framework/commit/9603a4de363d2b42622ff3585cd6e4787d9581d1)), closes [#28399](https://github.com/ionic-team/ionic-framework/issues/28399)
+* **popover:** content inside of popover scrolls correctly ([#28861](https://github.com/ionic-team/ionic-framework/issues/28861)) ([10c38d0](https://github.com/ionic-team/ionic-framework/commit/10c38d0354e61e20bec9a313de84b22c3b85c323)), closes [#28455](https://github.com/ionic-team/ionic-framework/issues/28455)
+* **segment:** setting value via binding updates button state ([#28837](https://github.com/ionic-team/ionic-framework/issues/28837)) ([0847c2a](https://github.com/ionic-team/ionic-framework/commit/0847c2ac2c52b5fa6d30e381685d6cbf7a41231a)), closes [#28816](https://github.com/ionic-team/ionic-framework/issues/28816)
+* **select:** click handlers on slotted content fire ([#28839](https://github.com/ionic-team/ionic-framework/issues/28839)) ([aed7a03](https://github.com/ionic-team/ionic-framework/commit/aed7a03532b88628a4358c8cbae1a1cbb861462b)), closes [#28818](https://github.com/ionic-team/ionic-framework/issues/28818)
+* **vue:** tabs and parameterized routes work with latest vue ([#28846](https://github.com/ionic-team/ionic-framework/issues/28846)) ([5bc4399](https://github.com/ionic-team/ionic-framework/commit/5bc439961fda2c595666e67688fdd1b8ff4dd0bf)), closes [#28774](https://github.com/ionic-team/ionic-framework/issues/28774)
+
+
+
+
+
+## [7.6.5](https://github.com/ionic-team/ionic-framework/compare/v7.6.4...v7.6.5) (2024-01-17)
+
+
+### Bug Fixes
+
+* **angular:** add old IonBackButtonDelegate import ([#28831](https://github.com/ionic-team/ionic-framework/issues/28831)) ([fb77353](https://github.com/ionic-team/ionic-framework/commit/fb7735397ed53323dd93a172407117228610b929)), closes [#28827](https://github.com/ionic-team/ionic-framework/issues/28827)
+* **list:** remove uneeded border radius from items in inset list ([#28830](https://github.com/ionic-team/ionic-framework/issues/28830)) ([dbaaa5b](https://github.com/ionic-team/ionic-framework/commit/dbaaa5bd9f43b8ba589b3f9c4b4204d2f203ef18))
+
+
+
+
+
+## [7.6.4](https://github.com/ionic-team/ionic-framework/compare/v7.6.3...v7.6.4) (2024-01-10)
+
+
+### Bug Fixes
+
+* **input:** slotted buttons are clickable ([#28772](https://github.com/ionic-team/ionic-framework/issues/28772)) ([4ccc150](https://github.com/ionic-team/ionic-framework/commit/4ccc150edff4e3f33f453343aedb081d920b2f90)), closes [#28762](https://github.com/ionic-team/ionic-framework/issues/28762)
+
+
+
+
+
+## [7.6.3](https://github.com/ionic-team/ionic-framework/compare/v7.6.2...v7.6.3) (2024-01-03)
+
+
+### Bug Fixes
+
+* **datetime:** selected today button renders correctly on ios ([#28740](https://github.com/ionic-team/ionic-framework/issues/28740)) ([2f99aea](https://github.com/ionic-team/ionic-framework/commit/2f99aeae6f71d5ffd1880f2c549227ecf71becf3))
+* **nav, router-outlet:** ios page transition does not cover menu on larger screens ([#28745](https://github.com/ionic-team/ionic-framework/issues/28745)) ([878eec6](https://github.com/ionic-team/ionic-framework/commit/878eec6ea21d76586466d01e13e5e842e69eaceb)), closes [#28737](https://github.com/ionic-team/ionic-framework/issues/28737)
+* **radio-group:** radio disabled prop can be undefined ([#28712](https://github.com/ionic-team/ionic-framework/issues/28712)) ([75ffeee](https://github.com/ionic-team/ionic-framework/commit/75ffeee933ae353d2601670178896116c81923e0)), closes [#28677](https://github.com/ionic-team/ionic-framework/issues/28677)
+* **refresher:** native ios refresher works on iPadOS ([#28620](https://github.com/ionic-team/ionic-framework/issues/28620)) ([e522601](https://github.com/ionic-team/ionic-framework/commit/e5226016a0f0b066a7bd7fc9997f905d3b87fbc4)), closes [#28617](https://github.com/ionic-team/ionic-framework/issues/28617)
+
+
+
+
+
 ## [7.6.2](https://github.com/ionic-team/ionic-framework/compare/v7.6.1...v7.6.2) (2023-12-19)
 
 

README.md

@@ -20,7 +20,7 @@
   <a href="https://github.com/ionic-team/ionic-framework/blob/main/LICENSE">
     <img src="https://img.shields.io/badge/license-MIT-blue.svg" alt="Ionic Framework is released under the MIT license." />
   </a>
-  <a href="https://github.com/ionic-team/ionic/blob/main/.github/CONTRIBUTING.md">
+  <a href="https://github.com/ionic-team/ionic/blob/main/docs/CONTRIBUTING.md">
     <img src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg" alt="PRs welcome!" />
   </a>
   <a href="https://twitter.com/Ionicframework">
@@ -38,7 +38,7 @@
     Documentation
   </a>
   <span> · </span>
-  <a href="https://github.com/ionic-team/ionic/blob/main/.github/CONTRIBUTING.md">Contribute</a>
+  <a href="https://github.com/ionic-team/ionic/blob/main/docs/CONTRIBUTING.md">Contribute</a>
   <span> · </span>
   <a href="https://blog.ionicframework.com/">Blog</a>
   <br />
@@ -88,7 +88,7 @@ The Ionic Conference App is a full featured Ionic app. It is the perfect startin
 ### Contributing
 
 Thanks for your interest in contributing! Read up on our guidelines for
-[contributing](https://github.com/ionic-team/ionic/blob/main/.github/CONTRIBUTING.md)
+[contributing](https://github.com/ionic-team/ionic/blob/main/docs/CONTRIBUTING.md)
 and then look through our issues with a [help wanted](https://github.com/ionic-team/ionic/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22)
 label.
 

core/CHANGELOG.md

@@ -3,6 +3,230 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [7.8.6](https://github.com/ionic-team/ionic-framework/compare/v7.8.5...v7.8.6) (2024-04-24)
+
+
+### Bug Fixes
+
+* **input:** clear button can be navigated using screen reader ([#29366](https://github.com/ionic-team/ionic-framework/issues/29366)) ([#29383](https://github.com/ionic-team/ionic-framework/issues/29383)) ([5ce0c60](https://github.com/ionic-team/ionic-framework/commit/5ce0c609f365aa497814067276b67fc4e58bdb35))
+
+
+
+
+
+## [7.8.5](https://github.com/ionic-team/ionic-framework/compare/v7.8.4...v7.8.5) (2024-04-17)
+
+
+### Bug Fixes
+
+* **modal:** improve sheet modal scrolling and gesture behavior ([#29312](https://github.com/ionic-team/ionic-framework/issues/29312)) ([9738228](https://github.com/ionic-team/ionic-framework/commit/9738228bc05abe3e2012e57b0e6b85f0ec06f66b)), closes [#24583](https://github.com/ionic-team/ionic-framework/issues/24583)
+
+
+
+
+
+## [7.8.4](https://github.com/ionic-team/ionic-framework/compare/v7.8.3...v7.8.4) (2024-04-10)
+
+
+### Performance Improvements
+
+* **styles:** compress distributed global stylesheets ([#29275](https://github.com/ionic-team/ionic-framework/issues/29275)) ([b3cd49b](https://github.com/ionic-team/ionic-framework/commit/b3cd49bf2219aacffc1ac34acbae7c76ef243765))
+
+
+
+
+
+## [7.8.3](https://github.com/ionic-team/ionic-framework/compare/v7.8.2...v7.8.3) (2024-04-03)
+
+
+### Bug Fixes
+
+* **button:** activated outline button in toolbar no longer blends into background on MD dark mode ([#29216](https://github.com/ionic-team/ionic-framework/issues/29216)) ([ee5da7a](https://github.com/ionic-team/ionic-framework/commit/ee5da7a747c0a0b420c5e371a9fe9ec4938d179e))
+* **popover:** viewport can be scrolled if no content present ([#29215](https://github.com/ionic-team/ionic-framework/issues/29215)) ([f08759c](https://github.com/ionic-team/ionic-framework/commit/f08759c2b8256ff66f8d1901bd8e0be4617db262)), closes [#29211](https://github.com/ionic-team/ionic-framework/issues/29211)
+
+
+
+
+
+## [7.8.2](https://github.com/ionic-team/ionic-framework/compare/v7.8.1...v7.8.2) (2024-03-27)
+
+
+### Bug Fixes
+
+* **searchbar:** autocapitalize is initialized correctly ([#29197](https://github.com/ionic-team/ionic-framework/issues/29197)) ([8ad66c0](https://github.com/ionic-team/ionic-framework/commit/8ad66c03d777edcab19c97cba696b171acc2d2e8)), closes [#29193](https://github.com/ionic-team/ionic-framework/issues/29193)
+
+
+
+
+
+## [7.8.1](https://github.com/ionic-team/ionic-framework/compare/v7.8.0...v7.8.1) (2024-03-20)
+
+
+### Bug Fixes
+
+* **datetime:** wheel picker shows consistently in overlays ([#29147](https://github.com/ionic-team/ionic-framework/issues/29147)) ([19c1bc1](https://github.com/ionic-team/ionic-framework/commit/19c1bc16cbc6725463890382365203824b7fd353)), closes [#26234](https://github.com/ionic-team/ionic-framework/issues/26234)
+* **header:** iOS headers in MD app are not hidden ([#29164](https://github.com/ionic-team/ionic-framework/issues/29164)) ([fdfecd3](https://github.com/ionic-team/ionic-framework/commit/fdfecd32c33c41cf202d3b30c073bfb1b077e2d6)), closes [#28867](https://github.com/ionic-team/ionic-framework/issues/28867)
+
+
+### Performance Improvements
+
+* **datetime:** calendar body shows immediately in modal on ios ([#29163](https://github.com/ionic-team/ionic-framework/issues/29163)) ([f759776](https://github.com/ionic-team/ionic-framework/commit/f75977699dae5aeea3d97d4318377633e935afb9)), closes [#24542](https://github.com/ionic-team/ionic-framework/issues/24542)
+
+
+
+
+
+# [7.8.0](https://github.com/ionic-team/ionic-framework/compare/v7.7.5...v7.8.0) (2024-03-13)
+
+
+### Features
+
+* **datetime:** formatOptions property for Datetime ([#29065](https://github.com/ionic-team/ionic-framework/issues/29065)) ([7cdbc1b](https://github.com/ionic-team/ionic-framework/commit/7cdbc1b5ad004e17a7c51363653e0e67f50e6860))
+* **searchbar:** autocapitalize, dir, lang, maxlength, and minlength are inherited to native input ([#29098](https://github.com/ionic-team/ionic-framework/issues/29098)) ([a0a77f7](https://github.com/ionic-team/ionic-framework/commit/a0a77f799df0732d9f7182f15866035a3ce5a1eb)), closes [#27606](https://github.com/ionic-team/ionic-framework/issues/27606)
+
+
+
+
+
+## [7.7.5](https://github.com/ionic-team/ionic-framework/compare/v7.7.4...v7.7.5) (2024-03-13)
+
+
+### Bug Fixes
+
+* **checkbox:** set aria-checked of indeterminate checkbox to 'mixed' ([#29115](https://github.com/ionic-team/ionic-framework/issues/29115)) ([b2d636f](https://github.com/ionic-team/ionic-framework/commit/b2d636f14dcd33313f6604cfd4a64b542c831b34))
+* **overlay:** do not hide overlay if toast is presented ([#29140](https://github.com/ionic-team/ionic-framework/issues/29140)) ([c0f5e5e](https://github.com/ionic-team/ionic-framework/commit/c0f5e5ebc0c9d45d71e10e09903b00b3ba8e6bba)), closes [#29139](https://github.com/ionic-team/ionic-framework/issues/29139)
+
+
+
+
+
+## [7.7.4](https://github.com/ionic-team/ionic-framework/compare/v7.7.3...v7.7.4) (2024-03-06)
+
+
+### Bug Fixes
+
+* **modal:** ariaLabel and role are inherited when set via htmlAttributes ([#29099](https://github.com/ionic-team/ionic-framework/issues/29099)) ([de13633](https://github.com/ionic-team/ionic-framework/commit/de13633a182d963876434db773aa346833f956fd))
+
+
+
+
+
+## [7.7.3](https://github.com/ionic-team/ionic-framework/compare/v7.7.2...v7.7.3) (2024-02-21)
+
+
+### Bug Fixes
+
+* **label:** do not grow when in end slot ([#29036](https://github.com/ionic-team/ionic-framework/issues/29036)) ([1fc4b76](https://github.com/ionic-team/ionic-framework/commit/1fc4b76f5940b38fd89e19561d6b4738dfb8ae5d)), closes [#29033](https://github.com/ionic-team/ionic-framework/issues/29033)
+* **overlays:** focus is returned to last focus element when focusing toast ([#28950](https://github.com/ionic-team/ionic-framework/issues/28950)) ([2ed0ada](https://github.com/ionic-team/ionic-framework/commit/2ed0ada9237b3f4dbf5959746ce2d1744936eebe)), closes [#28261](https://github.com/ionic-team/ionic-framework/issues/28261)
+
+
+
+
+
+## [7.7.2](https://github.com/ionic-team/ionic-framework/compare/v7.7.1...v7.7.2) (2024-02-14)
+
+
+### Bug Fixes
+
+* **overlays:** do not return focus if application has already moved focus manually ([#28850](https://github.com/ionic-team/ionic-framework/issues/28850)) ([a016670](https://github.com/ionic-team/ionic-framework/commit/a016670a8a46e101d23235b17bc8a2081fb992eb)), closes [#28849](https://github.com/ionic-team/ionic-framework/issues/28849)
+* **overlays:** ensure that only topmost overlay is announced by screen readers ([#28997](https://github.com/ionic-team/ionic-framework/issues/28997)) ([ba4ba61](https://github.com/ionic-team/ionic-framework/commit/ba4ba6161c1a6c67f7804b07f49c64ac9ad2b14c)), closes [#23472](https://github.com/ionic-team/ionic-framework/issues/23472)
+* **popover:** render arrow above backdrop ([#28986](https://github.com/ionic-team/ionic-framework/issues/28986)) ([0a8964d](https://github.com/ionic-team/ionic-framework/commit/0a8964d30c76218fe62f7f4aed4f81df7bb80cd0)), closes [#28985](https://github.com/ionic-team/ionic-framework/issues/28985)
+
+
+
+
+
+## [7.7.1](https://github.com/ionic-team/ionic-framework/compare/v7.7.0...v7.7.1) (2024-02-07)
+
+
+### Bug Fixes
+
+* **action-sheet:** iOS dismiss animation respects safe area ([#28915](https://github.com/ionic-team/ionic-framework/issues/28915)) ([7449fb4](https://github.com/ionic-team/ionic-framework/commit/7449fb4fed4048f5d01ba068dc6f8e2d7727e95d)), closes [#28541](https://github.com/ionic-team/ionic-framework/issues/28541)
+* **overlays:** tear down animations after dismiss ([#28907](https://github.com/ionic-team/ionic-framework/issues/28907)) ([950fa40](https://github.com/ionic-team/ionic-framework/commit/950fa40c5597c81d5cbaeb9276b09adfea5e79fb)), closes [#28352](https://github.com/ionic-team/ionic-framework/issues/28352)
+* **select:** popover can be scrolled ([#28965](https://github.com/ionic-team/ionic-framework/issues/28965)) ([35ab6b4](https://github.com/ionic-team/ionic-framework/commit/35ab6b4816bd627239de8d8b25ce0c86db8c74b4)), closes [#28963](https://github.com/ionic-team/ionic-framework/issues/28963)
+
+
+
+
+
+# [7.7.0](https://github.com/ionic-team/ionic-framework/compare/v7.6.7...v7.7.0) (2024-01-31)
+
+
+### Features
+
+* add experimental hardware back button support in browsers ([#28705](https://github.com/ionic-team/ionic-framework/issues/28705)) ([658d1ca](https://github.com/ionic-team/ionic-framework/commit/658d1caccd530350843b85c0e24544ec27dd9eb4)), closes [#28703](https://github.com/ionic-team/ionic-framework/issues/28703)
+
+
+
+
+
+## [7.6.7](https://github.com/ionic-team/ionic-framework/compare/v7.6.6...v7.6.7) (2024-01-31)
+
+
+### Bug Fixes
+
+* **accordion:** prevent opening of readonly accordion using keyboard ([#28865](https://github.com/ionic-team/ionic-framework/issues/28865)) ([e10f49c](https://github.com/ionic-team/ionic-framework/commit/e10f49c43daa11fe7deb5a9b9bfd34897542b6b1)), closes [#28344](https://github.com/ionic-team/ionic-framework/issues/28344)
+* **action-sheet, alert, toast:** button roles autocomplete with available options ([#27940](https://github.com/ionic-team/ionic-framework/issues/27940)) ([f6fc22b](https://github.com/ionic-team/ionic-framework/commit/f6fc22bba60388701b80a9421510e3d843d39e9e)), closes [#27965](https://github.com/ionic-team/ionic-framework/issues/27965)
+* **item:** ensure button focus state on property change ([#28892](https://github.com/ionic-team/ionic-framework/issues/28892)) ([bf7922c](https://github.com/ionic-team/ionic-framework/commit/bf7922c8b37b32dbf90650cb74a2e77bedf0c118)), closes [#28525](https://github.com/ionic-team/ionic-framework/issues/28525)
+* **item:** only default slot content wraps ([#28773](https://github.com/ionic-team/ionic-framework/issues/28773)) ([9448783](https://github.com/ionic-team/ionic-framework/commit/9448783bb19b187f867054c86d215e3dc97952c1)), closes [#28769](https://github.com/ionic-team/ionic-framework/issues/28769)
+
+
+
+
+
+## [7.6.6](https://github.com/ionic-team/ionic-framework/compare/v7.6.5...v7.6.6) (2024-01-24)
+
+
+### Bug Fixes
+
+* **alert:** remove border-right on ios stacked buttons ([#28821](https://github.com/ionic-team/ionic-framework/issues/28821)) ([ad65824](https://github.com/ionic-team/ionic-framework/commit/ad65824722da0eed90ef9e595b743754bfd360b8))
+* **datetime:** do not animate to new value when multiple values in different months are set ([#28847](https://github.com/ionic-team/ionic-framework/issues/28847)) ([9262f7d](https://github.com/ionic-team/ionic-framework/commit/9262f7da15969706039e9d5f11ef5c7bd73ced0d)), closes [#28602](https://github.com/ionic-team/ionic-framework/issues/28602)
+* **datetime:** enter closes keyboard when typing time ([#28848](https://github.com/ionic-team/ionic-framework/issues/28848)) ([c47a16d](https://github.com/ionic-team/ionic-framework/commit/c47a16d6c3c57f56b053727dd10ead0bfe547e50)), closes [#28325](https://github.com/ionic-team/ionic-framework/issues/28325)
+* **menu:** improve reliability of main content not being scrollable when menu opens ([#28829](https://github.com/ionic-team/ionic-framework/issues/28829)) ([9603a4d](https://github.com/ionic-team/ionic-framework/commit/9603a4de363d2b42622ff3585cd6e4787d9581d1)), closes [#28399](https://github.com/ionic-team/ionic-framework/issues/28399)
+* **popover:** content inside of popover scrolls correctly ([#28861](https://github.com/ionic-team/ionic-framework/issues/28861)) ([10c38d0](https://github.com/ionic-team/ionic-framework/commit/10c38d0354e61e20bec9a313de84b22c3b85c323)), closes [#28455](https://github.com/ionic-team/ionic-framework/issues/28455)
+* **segment:** setting value via binding updates button state ([#28837](https://github.com/ionic-team/ionic-framework/issues/28837)) ([0847c2a](https://github.com/ionic-team/ionic-framework/commit/0847c2ac2c52b5fa6d30e381685d6cbf7a41231a)), closes [#28816](https://github.com/ionic-team/ionic-framework/issues/28816)
+* **select:** click handlers on slotted content fire ([#28839](https://github.com/ionic-team/ionic-framework/issues/28839)) ([aed7a03](https://github.com/ionic-team/ionic-framework/commit/aed7a03532b88628a4358c8cbae1a1cbb861462b)), closes [#28818](https://github.com/ionic-team/ionic-framework/issues/28818)
+
+
+
+
+
+## [7.6.5](https://github.com/ionic-team/ionic-framework/compare/v7.6.3...v7.6.5) (2024-01-17)
+
+
+### Bug Fixes
+
+* **list:** remove uneeded border radius from items in inset list ([#28830](https://github.com/ionic-team/ionic-framework/issues/28830)) ([dbaaa5b](https://github.com/ionic-team/ionic-framework/commit/dbaaa5bd9f43b8ba589b3f9c4b4204d2f203ef18))
+
+
+
+
+
+## [7.6.4](https://github.com/ionic-team/ionic-framework/compare/v7.6.3...v7.6.4) (2024-01-10)
+
+
+### Bug Fixes
+
+* **input:** slotted buttons are clickable ([#28772](https://github.com/ionic-team/ionic-framework/issues/28772)) ([4ccc150](https://github.com/ionic-team/ionic-framework/commit/4ccc150edff4e3f33f453343aedb081d920b2f90)), closes [#28762](https://github.com/ionic-team/ionic-framework/issues/28762)
+
+
+
+
+
+## [7.6.3](https://github.com/ionic-team/ionic-framework/compare/v7.6.2...v7.6.3) (2024-01-03)
+
+
+### Bug Fixes
+
+* **datetime:** selected today button renders correctly on ios ([#28740](https://github.com/ionic-team/ionic-framework/issues/28740)) ([2f99aea](https://github.com/ionic-team/ionic-framework/commit/2f99aeae6f71d5ffd1880f2c549227ecf71becf3))
+* **nav, router-outlet:** ios page transition does not cover menu on larger screens ([#28745](https://github.com/ionic-team/ionic-framework/issues/28745)) ([878eec6](https://github.com/ionic-team/ionic-framework/commit/878eec6ea21d76586466d01e13e5e842e69eaceb)), closes [#28737](https://github.com/ionic-team/ionic-framework/issues/28737)
+* **radio-group:** radio disabled prop can be undefined ([#28712](https://github.com/ionic-team/ionic-framework/issues/28712)) ([75ffeee](https://github.com/ionic-team/ionic-framework/commit/75ffeee933ae353d2601670178896116c81923e0)), closes [#28677](https://github.com/ionic-team/ionic-framework/issues/28677)
+* **refresher:** native ios refresher works on iPadOS ([#28620](https://github.com/ionic-team/ionic-framework/issues/28620)) ([e522601](https://github.com/ionic-team/ionic-framework/commit/e5226016a0f0b066a7bd7fc9997f905d3b87fbc4)), closes [#28617](https://github.com/ionic-team/ionic-framework/issues/28617)
+
+
+
+
+
 ## [7.6.2](https://github.com/ionic-team/ionic-framework/compare/v7.6.1...v7.6.2) (2023-12-19)
 
 

core/Dockerfile

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

core/api.txt

@@ -394,6 +394,7 @@ ion-datetime,prop,dayValues,number | number[] | string | undefined,undefined,fal
 ion-datetime,prop,disabled,boolean,false,false,false
 ion-datetime,prop,doneText,string,'Done',false,false
 ion-datetime,prop,firstDayOfWeek,number,0,false,false
+ion-datetime,prop,formatOptions,undefined | { date: DateTimeFormatOptions; time?: DateTimeFormatOptions | undefined; } | { date?: DateTimeFormatOptions | undefined; time: DateTimeFormatOptions; },undefined,false,false
 ion-datetime,prop,highlightedDates,((dateIsoString: string) => DatetimeHighlightStyle | undefined) | DatetimeHighlight[] | undefined,undefined,false,false
 ion-datetime,prop,hourCycle,"h11" | "h12" | "h23" | "h24" | undefined,undefined,false,false
 ion-datetime,prop,hourValues,number | number[] | string | undefined,undefined,false,false
@@ -1157,6 +1158,7 @@ ion-row,shadow
 
 ion-searchbar,scoped
 ion-searchbar,prop,animated,boolean,false,false,false
+ion-searchbar,prop,autocapitalize,string,'default',false,false
 ion-searchbar,prop,autocomplete,"name" | "email" | "tel" | "url" | "on" | "off" | "honorific-prefix" | "given-name" | "additional-name" | "family-name" | "honorific-suffix" | "nickname" | "username" | "new-password" | "current-password" | "one-time-code" | "organization-title" | "organization" | "street-address" | "address-line1" | "address-line2" | "address-line3" | "address-level4" | "address-level3" | "address-level2" | "address-level1" | "country" | "country-name" | "postal-code" | "cc-name" | "cc-given-name" | "cc-additional-name" | "cc-family-name" | "cc-number" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-csc" | "cc-type" | "transaction-currency" | "transaction-amount" | "language" | "bday" | "bday-day" | "bday-month" | "bday-year" | "sex" | "tel-country-code" | "tel-national" | "tel-area-code" | "tel-local" | "tel-extension" | "impp" | "photo",'off',false,false
 ion-searchbar,prop,autocorrect,"off" | "on",'off',false,false
 ion-searchbar,prop,cancelButtonIcon,string,config.get('backButtonIcon', arrowBackSharp) as string,false,false
@@ -1167,6 +1169,8 @@ ion-searchbar,prop,debounce,number | undefined,undefined,false,false
 ion-searchbar,prop,disabled,boolean,false,false,false
 ion-searchbar,prop,enterkeyhint,"done" | "enter" | "go" | "next" | "previous" | "search" | "send" | undefined,undefined,false,false
 ion-searchbar,prop,inputmode,"decimal" | "email" | "none" | "numeric" | "search" | "tel" | "text" | "url" | undefined,undefined,false,false
+ion-searchbar,prop,maxlength,number | undefined,undefined,false,false
+ion-searchbar,prop,minlength,number | undefined,undefined,false,false
 ion-searchbar,prop,mode,"ios" | "md",undefined,false,false
 ion-searchbar,prop,name,string,this.inputId,false,false
 ion-searchbar,prop,placeholder,string,'Search',false,false

core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/core",
-  "version": "7.6.2",
+  "version": "7.8.6",
   "description": "Base components for Ionic",
   "keywords": [
     "ionic",
@@ -31,40 +31,40 @@
     "loader/"
   ],
   "dependencies": {
-    "@stencil/core": "^4.8.2",
-    "ionicons": "^7.2.1",
+    "@stencil/core": "^4.12.2",
+    "ionicons": "^7.2.2",
     "tslib": "^2.1.0"
   },
   "devDependencies": {
-    "@axe-core/playwright": "^4.8.2",
-    "@capacitor/core": "^5.5.1",
-    "@capacitor/haptics": "^5.0.6",
-    "@capacitor/keyboard": "^5.0.7",
-    "@capacitor/status-bar": "^5.0.6",
+    "@axe-core/playwright": "^4.8.5",
+    "@capacitor/core": "^5.7.0",
+    "@capacitor/haptics": "^5.0.7",
+    "@capacitor/keyboard": "^5.0.8",
+    "@capacitor/status-bar": "^5.0.7",
     "@ionic/eslint-config": "^0.3.0",
     "@ionic/prettier-config": "^2.0.0",
     "@playwright/test": "^1.39.0",
     "@rollup/plugin-node-resolve": "^8.4.0",
     "@rollup/plugin-virtual": "^2.0.3",
-    "@stencil/angular-output-target": "^0.8.3",
+    "@stencil/angular-output-target": "^0.8.4",
     "@stencil/react-output-target": "^0.5.3",
-    "@stencil/sass": "^3.0.7",
+    "@stencil/sass": "^3.0.9",
     "@stencil/vue-output-target": "^0.8.7",
     "@types/jest": "^29.5.6",
     "@types/node": "^14.6.0",
     "@typescript-eslint/eslint-plugin": "^6.7.2",
     "@typescript-eslint/parser": "^6.7.2",
+    "chalk": "^5.3.0",
     "clean-css-cli": "^5.6.1",
     "domino": "^2.1.6",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-custom-rules": "file:custom-rules",
-    "execa": "^5.0.0",
+    "execa": "^8.0.1",
     "fs-extra": "^9.0.1",
     "jest": "^29.7.0",
     "jest-cli": "^29.7.0",
     "prettier": "^2.6.1",
-    "puppeteer": "21.1.1",
     "rollup": "^2.26.4",
     "sass": "^1.33.0",
     "serve": "^14.0.1",
@@ -78,7 +78,7 @@
     "build.docs.json": "stencil build --docs-json dist/docs.json",
     "clean": "node scripts/clean.js",
     "css.minify": "cleancss -O2 -o ./css/ionic.bundle.css ./css/ionic.bundle.css",
-    "css.sass": "sass --embed-sources src/css:./css",
+    "css.sass": "sass --embed-sources --style compressed src/css:./css",
     "eslint": "eslint src",
     "lint": "npm run lint.ts && npm run lint.sass && npm run prettier -- --write --cache",
     "lint.fix": "npm run lint.ts.fix && npm run lint.sass.fix && npm run prettier -- --write --cache",
@@ -95,7 +95,11 @@
     "test.e2e.update-snapshots": "npm run test.e2e -- --update-snapshots",
     "test.watch": "jest --watch --no-cache",
     "test.treeshake": "node scripts/treeshaking.js dist/index.js",
-    "validate": "npm run lint && npm run test && npm run build && npm run test.treeshake"
+    "validate": "npm run lint && npm run test && npm run build && npm run test.treeshake",
+    "docker.build": "docker build -t ionic-playwright .",
+    "test.e2e.docker": "npm run docker.build && node ./scripts/docker.mjs",
+    "test.e2e.docker.update-snapshots": "npm run test.e2e.docker -- --update-snapshots",
+    "test.e2e.docker.ci": "npm run docker.build && CI=true node ./scripts/docker.mjs"
   },
   "author": "Ionic Team",
   "license": "MIT",

core/scripts/docker.mjs

@@ -0,0 +1,56 @@
+import { execa } from 'execa';
+import * as fs from 'fs';
+import { resolve } from 'path';
+import chalk from 'chalk';
+
+const removeNewline = (string) => {
+  return string.replace(/(\r\n|\n|\r)/gm, "");
+}
+
+const readConfigFile = (file) => {
+  if (fs.existsSync(file)) {
+    return fs.readFileSync(file, { encoding: 'utf-8' });
+  }
+
+  return '';
+}
+
+// These files are optional, so we don't want to error if they don't exist
+const display = removeNewline(readConfigFile('docker-display.txt'));
+const displayVolume = removeNewline(readConfigFile('docker-display-volume.txt'));
+
+// Using --mount requires an absolute path which is what this gives us.
+const pwd = resolve('./');
+
+/**
+ * -it will let the user gracefully kill the process using Ctrl+C (or equivalent)
+ * -e DISPLAY and -v handle configuration for headed mode
+ * --ipc=host is recommended when using Chromium to avoid out of memory crashes: https://playwright.dev/docs/ci#docker
+ * --init is recommended to avoid zombie processes: https://playwright.dev/docs/ci#docker
+ * --mount allow us to mount the local Ionic project inside of the Docker container so devs do not need to re-build the project in Docker.
+ */
+const args = ['run', '--rm', '--init', `-e DISPLAY=${display}`, `-v ${displayVolume}`, '--ipc=host', `--mount=type=bind,source=${pwd},target=/ionic`, 'ionic-playwright', 'npm run test.e2e --', ...process.argv.slice(2)];
+
+// Set the CI env variable so Playwright uses the CI config
+if (process.env.CI) {
+  args.splice(1, 0, '-e CI=true');
+/**
+ * Otherwise, we should let the session be interactive locally. This will
+ * not work on CI which is why we do not apply it there.
+ */
+} else {
+  args.splice(1, 0, '-it');
+}
+
+/**
+ * While these config files are optional to run the tests, they are required to run
+ * the tests in headed mode. Add a warning if dev tries to run headed tests without
+ * the correct config files.
+ */
+const requestHeaded = process.argv.find(arg => arg.includes('headed'));
+const hasHeadedConfigFiles = display && displayVolume;
+if (requestHeaded && !hasHeadedConfigFiles) {
+  console.warn(chalk.yellow.bold('\n⚠️ You are running tests in headed mode, but one or more of your headed config files was not found.\nPlease ensure that both docker-display.txt and docker-display-volume.txt have been created in the correct location.\n'));
+}
+
+execa('docker', args, { shell: true, stdio: 'inherit' });

core/scripts/readme.md

@@ -1,44 +1,4 @@
 
-## Build
+# Core Scripts
 
-### 1. Clone ionic
-
-    git@github.com:ionic-team/ionic.git
-    cd ionic
-
-### 2. Run `npm install`
-
-  cd core
-  npm install
-
-
-Notice that `@ionic/core` lives in `core`.
-
-### 3. Run `npm start`
-
-Make sure you are inside the `core` directory.
-
-    npm start
-
-With the `dev` command, Ionic components will be built with [Stencil](https://stenciljs.com/), changes to source files are watched, a local http server will startup, and http://localhost:3333/ will open in a browser.
-
-### 4. Preview
-
-Navigate to http://localhost:3333/src/components/. Each component has small e2e apps found in the `test` directory, for example: http://localhost:3333/src/components/button/test/basic
-
-As changes are made in an editor to source files, the e2e app will live-reload.
-
-## How to contribute
-
-1. `npm start` allows you to modify the components and have live reloading, just like another ionic app.
-
-2. When everything looks good, run  `npm run validate` to verify the tests linter and production build passes.
-
-
-# Deploy
-
-1. `npm run prepare.deploy`
-2. Review/update changelog
-3. Commit updates using the package name and version number as the commit message.
-4. `npm run deploy`
-5. :tada:
+This file has been moved to [/docs/core/testing/preview-changes.md](/docs/core/testing/preview-changes.md).

core/src/components.d.ts

@@ -15,7 +15,7 @@ import { RouteID, RouterDirection, RouterEventDetail, RouteWrite } from "./compo
 import { BreadcrumbCollapsedClickEventDetail } from "./components/breadcrumb/breadcrumb-interface";
 import { CheckboxChangeEventDetail } from "./components/checkbox/checkbox-interface";
 import { ScrollBaseDetail, ScrollDetail } from "./components/content/content-interface";
-import { DatetimeChangeEventDetail, DatetimeHighlight, DatetimeHighlightCallback, DatetimeHourCycle, DatetimePresentation, TitleSelectedDatesFormatter } from "./components/datetime/datetime-interface";
+import { DatetimeChangeEventDetail, DatetimeHighlight, DatetimeHighlightCallback, DatetimeHourCycle, DatetimePresentation, FormatOptions, TitleSelectedDatesFormatter } from "./components/datetime/datetime-interface";
 import { SpinnerTypes } from "./components/spinner/spinner-configs";
 import { InputChangeEventDetail, InputInputEventDetail } from "./components/input/input-interface";
 import { CounterFormatter } from "./components/item/item-interface";
@@ -51,7 +51,7 @@ export { RouteID, RouterDirection, RouterEventDetail, RouteWrite } from "./compo
 export { BreadcrumbCollapsedClickEventDetail } from "./components/breadcrumb/breadcrumb-interface";
 export { CheckboxChangeEventDetail } from "./components/checkbox/checkbox-interface";
 export { ScrollBaseDetail, ScrollDetail } from "./components/content/content-interface";
-export { DatetimeChangeEventDetail, DatetimeHighlight, DatetimeHighlightCallback, DatetimeHourCycle, DatetimePresentation, TitleSelectedDatesFormatter } from "./components/datetime/datetime-interface";
+export { DatetimeChangeEventDetail, DatetimeHighlight, DatetimeHighlightCallback, DatetimeHourCycle, DatetimePresentation, FormatOptions, TitleSelectedDatesFormatter } from "./components/datetime/datetime-interface";
 export { SpinnerTypes } from "./components/spinner/spinner-configs";
 export { InputChangeEventDetail, InputInputEventDetail } from "./components/input/input-interface";
 export { CounterFormatter } from "./components/item/item-interface";
@@ -160,7 +160,7 @@ export namespace Components {
         /**
           * Dismiss the action sheet overlay after it has been presented.
           * @param data Any data to emit in the dismiss events.
-          * @param role The role of the element that is dismissing the action sheet. This can be useful in a button handler for determining which button was clicked to dismiss the action sheet. Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
+          * @param role The role of the element that is dismissing the action sheet. This can be useful in a button handler for determining which button was clicked to dismiss the action sheet. Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.  This is a no-op if the overlay has not been presented yet. If you want to remove an overlay from the DOM that was never presented, use the [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
          */
         "dismiss": (data?: any, role?: string) => Promise<boolean>;
         /**
@@ -239,7 +239,7 @@ export namespace Components {
         /**
           * Dismiss the alert overlay after it has been presented.
           * @param data Any data to emit in the dismiss events.
-          * @param role The role of the element that is dismissing the alert. This can be useful in a button handler for determining which button was clicked to dismiss the alert. Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
+          * @param role The role of the element that is dismissing the alert. This can be useful in a button handler for determining which button was clicked to dismiss the alert. Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.  This is a no-op if the overlay has not been presented yet. If you want to remove an overlay from the DOM that was never presented, use the [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
          */
         "dismiss": (data?: any, role?: string) => Promise<boolean>;
         /**
@@ -858,6 +858,10 @@ export namespace Components {
           * The first day of the week to use for `ion-datetime`. The default value is `0` and represents Sunday.
          */
         "firstDayOfWeek": number;
+        /**
+          * Formatting options for dates and times. Should include a 'date' and/or 'time' object, each of which is of type [Intl.DateTimeFormatOptions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#options).
+         */
+        "formatOptions"?: FormatOptions;
         /**
           * Used to apply custom text and background colors to specific dates.  Can be either an array of objects containing ISO strings and colors, or a callback that receives an ISO string and returns the colors.  Only applies to the `date`, `date-time`, and `time-date` presentations, with `preferWheel="false"`.
          */
@@ -943,7 +947,7 @@ export namespace Components {
          */
         "size": 'cover' | 'fixed';
         /**
-          * A callback used to format the header text that shows how many dates are selected. Only used if there are 0 or more than 1 selected (i.e. unused for exactly 1). By default, the header text is set to "numberOfDates days".
+          * A callback used to format the header text that shows how many dates are selected. Only used if there are 0 or more than 1 selected (i.e. unused for exactly 1). By default, the header text is set to "numberOfDates days".  See https://ionicframework.com/docs/troubleshooting/runtime#accessing-this if you need to access `this` from within the callback.
          */
         "titleSelectedDatesFormatter"?: TitleSelectedDatesFormatter;
         /**
@@ -1182,7 +1186,7 @@ export namespace Components {
          */
         "counter": boolean;
         /**
-          * A callback used to format the counter text. By default the counter text is set to "itemLength / maxLength".
+          * A callback used to format the counter text. By default the counter text is set to "itemLength / maxLength".  See https://ionicframework.com/docs/troubleshooting/runtime#accessing-this if you need to access `this` from within the callback.
          */
         "counterFormatter"?: (inputLength: number, maxLength: number) => string;
         /**
@@ -1527,7 +1531,7 @@ export namespace Components {
         /**
           * Dismiss the loading overlay after it has been presented.
           * @param data Any data to emit in the dismiss events.
-          * @param role The role of the element that is dismissing the loading. This can be useful in a button handler for determining which button was clicked to dismiss the loading. Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
+          * @param role The role of the element that is dismissing the loading. This can be useful in a button handler for determining which button was clicked to dismiss the loading. Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.  This is a no-op if the overlay has not been presented yet. If you want to remove an overlay from the DOM that was never presented, use the [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
          */
         "dismiss": (data?: any, role?: string) => Promise<boolean>;
         /**
@@ -1701,7 +1705,7 @@ export namespace Components {
          */
         "breakpoints"?: number[];
         /**
-          * Determines whether or not a modal can dismiss when calling the `dismiss` method.  If the value is `true` or the value's function returns `true`, the modal will close when trying to dismiss. If the value is `false` or the value's function returns `false`, the modal will not close when trying to dismiss.
+          * Determines whether or not a modal can dismiss when calling the `dismiss` method.  If the value is `true` or the value's function returns `true`, the modal will close when trying to dismiss. If the value is `false` or the value's function returns `false`, the modal will not close when trying to dismiss.  See https://ionicframework.com/docs/troubleshooting/runtime#accessing-this if you need to access `this` from within the callback.
          */
         "canDismiss": boolean | ((data?: any, role?: string) => Promise<boolean>);
         /**
@@ -1720,7 +1724,7 @@ export namespace Components {
         /**
           * Dismiss the modal overlay after it has been presented.
           * @param data Any data to emit in the dismiss events.
-          * @param role The role of the element that is dismissing the modal. For example, 'cancel' or 'backdrop'.
+          * @param role The role of the element that is dismissing the modal. For example, 'cancel' or 'backdrop'.  This is a no-op if the overlay has not been presented yet. If you want to remove an overlay from the DOM that was never presented, use the [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
          */
         "dismiss": (data?: any, role?: string) => Promise<boolean>;
         /**
@@ -1973,7 +1977,7 @@ export namespace Components {
         /**
           * Dismiss the picker overlay after it has been presented.
           * @param data Any data to emit in the dismiss events.
-          * @param role The role of the element that is dismissing the picker. This can be useful in a button handler for determining which button was clicked to dismiss the picker. Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
+          * @param role The role of the element that is dismissing the picker. This can be useful in a button handler for determining which button was clicked to dismiss the picker. Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.  This is a no-op if the overlay has not been presented yet. If you want to remove an overlay from the DOM that was never presented, use the [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
          */
         "dismiss": (data?: any, role?: string) => Promise<boolean>;
         /**
@@ -2110,7 +2114,7 @@ export namespace Components {
           * Dismiss the popover overlay after it has been presented.
           * @param data Any data to emit in the dismiss events.
           * @param role The role of the element that is dismissing the popover. For example, 'cancel' or 'backdrop'.
-          * @param dismissParentPopover If `true`, dismissing this popover will also dismiss a parent popover if this popover is nested. Defaults to `true`.
+          * @param dismissParentPopover If `true`, dismissing this popover will also dismiss a parent popover if this popover is nested. Defaults to `true`.  This is a no-op if the overlay has not been presented yet. If you want to remove an overlay from the DOM that was never presented, use the [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
          */
         "dismiss": (data?: any, role?: string, dismissParentPopover?: boolean) => Promise<boolean>;
         /**
@@ -2336,7 +2340,7 @@ export namespace Components {
          */
         "pin": boolean;
         /**
-          * A callback used to format the pin text. By default the pin text is set to `Math.round(value)`.
+          * A callback used to format the pin text. By default the pin text is set to `Math.round(value)`.  See https://ionicframework.com/docs/troubleshooting/runtime#accessing-this if you need to access `this` from within the callback.
          */
         "pinFormatter": PinFormatter;
         /**
@@ -2548,6 +2552,10 @@ export namespace Components {
           * If `true`, enable searchbar animation.
          */
         "animated": boolean;
+        /**
+          * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user. Available options: `"off"`, `"none"`, `"on"`, `"sentences"`, `"words"`, `"characters"`.
+         */
+        "autocapitalize": string;
         /**
           * Set the input's autocomplete property.
          */
@@ -2592,6 +2600,14 @@ export namespace Components {
           * A hint to the browser for which keyboard to display. Possible values: `"none"`, `"text"`, `"tel"`, `"url"`, `"email"`, `"numeric"`, `"decimal"`, and `"search"`.
          */
         "inputmode"?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
+        /**
+          * This attribute specifies the maximum number of characters that the user can enter.
+         */
+        "maxlength"?: number;
+        /**
+          * This attribute specifies the minimum number of characters that the user can enter.
+         */
+        "minlength"?: number;
         /**
           * The mode determines which platform styles to use.
          */
@@ -2978,7 +2994,7 @@ export namespace Components {
          */
         "counter": boolean;
         /**
-          * A callback used to format the counter text. By default the counter text is set to "itemLength / maxLength".
+          * A callback used to format the counter text. By default the counter text is set to "itemLength / maxLength".  See https://ionicframework.com/docs/troubleshooting/runtime#accessing-this if you need to access `this` from within the callback.
          */
         "counterFormatter"?: (inputLength: number, maxLength: number) => string;
         /**
@@ -3111,7 +3127,7 @@ export namespace Components {
         /**
           * Dismiss the toast overlay after it has been presented.
           * @param data Any data to emit in the dismiss events.
-          * @param role The role of the element that is dismissing the toast. This can be useful in a button handler for determining which button was clicked to dismiss the toast. Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
+          * @param role The role of the element that is dismissing the toast. This can be useful in a button handler for determining which button was clicked to dismiss the toast. Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.  This is a no-op if the overlay has not been presented yet. If you want to remove an overlay from the DOM that was never presented, use the [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
          */
         "dismiss": (data?: any, role?: string) => Promise<boolean>;
         /**
@@ -3195,7 +3211,7 @@ export namespace Components {
     }
     interface IonToggle {
         /**
-          * How to control the alignment of the toggle and label on the cross axis. ``"start"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL. `"center"`: The label and control will appear at the center of the cross axis in both LTR and RTL.
+          * How to control the alignment of the toggle and label on the cross axis. `"start"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL. `"center"`: The label and control will appear at the center of the cross axis in both LTR and RTL.
          */
         "alignment": 'start' | 'center';
         /**
@@ -5541,6 +5557,10 @@ declare namespace LocalJSX {
           * The first day of the week to use for `ion-datetime`. The default value is `0` and represents Sunday.
          */
         "firstDayOfWeek"?: number;
+        /**
+          * Formatting options for dates and times. Should include a 'date' and/or 'time' object, each of which is of type [Intl.DateTimeFormatOptions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#options).
+         */
+        "formatOptions"?: FormatOptions;
         /**
           * Used to apply custom text and background colors to specific dates.  Can be either an array of objects containing ISO strings and colors, or a callback that receives an ISO string and returns the colors.  Only applies to the `date`, `date-time`, and `time-date` presentations, with `preferWheel="false"`.
          */
@@ -5650,7 +5670,7 @@ declare namespace LocalJSX {
          */
         "size"?: 'cover' | 'fixed';
         /**
-          * A callback used to format the header text that shows how many dates are selected. Only used if there are 0 or more than 1 selected (i.e. unused for exactly 1). By default, the header text is set to "numberOfDates days".
+          * A callback used to format the header text that shows how many dates are selected. Only used if there are 0 or more than 1 selected (i.e. unused for exactly 1). By default, the header text is set to "numberOfDates days".  See https://ionicframework.com/docs/troubleshooting/runtime#accessing-this if you need to access `this` from within the callback.
          */
         "titleSelectedDatesFormatter"?: TitleSelectedDatesFormatter;
         /**
@@ -5901,7 +5921,7 @@ declare namespace LocalJSX {
          */
         "counter"?: boolean;
         /**
-          * A callback used to format the counter text. By default the counter text is set to "itemLength / maxLength".
+          * A callback used to format the counter text. By default the counter text is set to "itemLength / maxLength".  See https://ionicframework.com/docs/troubleshooting/runtime#accessing-this if you need to access `this` from within the callback.
          */
         "counterFormatter"?: (inputLength: number, maxLength: number) => string;
         /**
@@ -6432,7 +6452,7 @@ declare namespace LocalJSX {
          */
         "breakpoints"?: number[];
         /**
-          * Determines whether or not a modal can dismiss when calling the `dismiss` method.  If the value is `true` or the value's function returns `true`, the modal will close when trying to dismiss. If the value is `false` or the value's function returns `false`, the modal will not close when trying to dismiss.
+          * Determines whether or not a modal can dismiss when calling the `dismiss` method.  If the value is `true` or the value's function returns `true`, the modal will close when trying to dismiss. If the value is `false` or the value's function returns `false`, the modal will not close when trying to dismiss.  See https://ionicframework.com/docs/troubleshooting/runtime#accessing-this if you need to access `this` from within the callback.
          */
         "canDismiss"?: boolean | ((data?: any, role?: string) => Promise<boolean>);
         /**
@@ -7064,7 +7084,7 @@ declare namespace LocalJSX {
          */
         "pin"?: boolean;
         /**
-          * A callback used to format the pin text. By default the pin text is set to `Math.round(value)`.
+          * A callback used to format the pin text. By default the pin text is set to `Math.round(value)`.  See https://ionicframework.com/docs/troubleshooting/runtime#accessing-this if you need to access `this` from within the callback.
          */
         "pinFormatter"?: PinFormatter;
         /**
@@ -7272,6 +7292,10 @@ declare namespace LocalJSX {
           * If `true`, enable searchbar animation.
          */
         "animated"?: boolean;
+        /**
+          * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user. Available options: `"off"`, `"none"`, `"on"`, `"sentences"`, `"words"`, `"characters"`.
+         */
+        "autocapitalize"?: string;
         /**
           * Set the input's autocomplete property.
          */
@@ -7312,6 +7336,14 @@ declare namespace LocalJSX {
           * A hint to the browser for which keyboard to display. Possible values: `"none"`, `"text"`, `"tel"`, `"url"`, `"email"`, `"numeric"`, `"decimal"`, and `"search"`.
          */
         "inputmode"?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
+        /**
+          * This attribute specifies the maximum number of characters that the user can enter.
+         */
+        "maxlength"?: number;
+        /**
+          * This attribute specifies the minimum number of characters that the user can enter.
+         */
+        "minlength"?: number;
         /**
           * The mode determines which platform styles to use.
          */
@@ -7758,7 +7790,7 @@ declare namespace LocalJSX {
          */
         "counter"?: boolean;
         /**
-          * A callback used to format the counter text. By default the counter text is set to "itemLength / maxLength".
+          * A callback used to format the counter text. By default the counter text is set to "itemLength / maxLength".  See https://ionicframework.com/docs/troubleshooting/runtime#accessing-this if you need to access `this` from within the callback.
          */
         "counterFormatter"?: (inputLength: number, maxLength: number) => string;
         /**
@@ -8005,7 +8037,7 @@ declare namespace LocalJSX {
     }
     interface IonToggle {
         /**
-          * How to control the alignment of the toggle and label on the cross axis. ``"start"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL. `"center"`: The label and control will appear at the center of the cross axis in both LTR and RTL.
+          * How to control the alignment of the toggle and label on the cross axis. `"start"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL. `"center"`: The label and control will appear at the center of the cross axis in both LTR and RTL.
          */
         "alignment"?: 'start' | 'center';
         /**

core/src/components/accordion/accordion.tsx

@@ -382,7 +382,10 @@ export class Accordion implements ComponentInterface {
   };
 
   private toggleExpanded() {
-    const { accordionGroupEl, value, state } = this;
+    const { accordionGroupEl, disabled, readonly, value, state } = this;
+
+    if (disabled || readonly) return;
+
     if (accordionGroupEl) {
       /**
        * Because the accordion group may or may

core/src/components/accordion/test/a11y/index.html

@@ -23,28 +23,22 @@
 
             <ion-list slot="content">
               <ion-item>
-                <ion-label>Name</ion-label>
-                <ion-input type="text"></ion-input>
+                <ion-input label="Name" type="text"></ion-input>
               </ion-item>
               <ion-item>
-                <ion-label>Email</ion-label>
-                <ion-input type="email"></ion-input>
+                <ion-input label="Email" type="email"></ion-input>
               </ion-item>
               <ion-item>
-                <ion-label>Phone</ion-label>
-                <ion-input type="tel"></ion-input>
+                <ion-input label="Phone" type="tel"></ion-input>
               </ion-item>
               <ion-item>
-                <ion-label>Extension</ion-label>
-                <ion-input type="text"></ion-input>
+                <ion-input label="Extension" type="text"></ion-input>
               </ion-item>
               <ion-item>
-                <ion-label>Country</ion-label>
-                <ion-input type="text"></ion-input>
+                <ion-input label="Country" type="text"></ion-input>
               </ion-item>
               <ion-item>
-                <ion-label>City/Province</ion-label>
-                <ion-input type="text"></ion-input>
+                <ion-input label="City/Province" type="text"></ion-input>
               </ion-item>
             </ion-list>
           </ion-accordion>
@@ -56,24 +50,19 @@
 
             <ion-list slot="content">
               <ion-item>
-                <ion-label>Address 1</ion-label>
-                <ion-input type="text"></ion-input>
+                <ion-input label="Address 1" type="text"></ion-input>
               </ion-item>
               <ion-item>
-                <ion-label>Address 2</ion-label>
-                <ion-input type="email"></ion-input>
+                <ion-input label="Address 2" type="email"></ion-input>
               </ion-item>
               <ion-item>
-                <ion-label>City</ion-label>
-                <ion-input type="tel"></ion-input>
+                <ion-input label="City" type="tel"></ion-input>
               </ion-item>
               <ion-item>
-                <ion-label>State</ion-label>
-                <ion-input type="text"></ion-input>
+                <ion-input label="State" type="text"></ion-input>
               </ion-item>
               <ion-item>
-                <ion-label>Zip Code</ion-label>
-                <ion-input type="text"></ion-input>
+                <ion-input label="Zip Code" type="text"></ion-input>
               </ion-item>
             </ion-list>
           </ion-accordion>
@@ -85,24 +74,19 @@
 
             <ion-list slot="content">
               <ion-item>
-                <ion-label>Address 1</ion-label>
-                <ion-input id="address1" type="text"></ion-input>
+                <ion-input label="Address 1" id="address1" type="text"></ion-input>
               </ion-item>
               <ion-item>
-                <ion-label>Address 2</ion-label>
-                <ion-input type="email"></ion-input>
+                <ion-input label="Address 2" type="email"></ion-input>
               </ion-item>
               <ion-item>
-                <ion-label>City</ion-label>
-                <ion-input type="tel"></ion-input>
+                <ion-input label="City" type="tel"></ion-input>
               </ion-item>
               <ion-item>
-                <ion-label>State</ion-label>
-                <ion-input type="text"></ion-input>
+                <ion-input lable="State" type="text"></ion-input>
               </ion-item>
               <ion-item>
-                <ion-label>Zip Code</ion-label>
-                <ion-input type="text"></ion-input>
+                <ion-input label="Zip Code" type="text"></ion-input>
               </ion-item>
             </ion-list>
           </ion-accordion>

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

@@ -1,49 +0,0 @@
-import { expect } from '@playwright/test';
-import { configs, test } from '@utils/test/playwright';
-
-configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ config, title }) => {
-  test.describe(title('accordion: states'), () => {
-    test.beforeEach(async ({ page }) => {
-      await page.setContent(
-        `
-      <ion-accordion-group animated="false">
-        <ion-accordion>
-          <ion-item slot="header">Label</ion-item>
-          <div slot="content">Content</div>
-        </ion-accordion>
-      </ion-accordion-group>
-    `,
-        config
-      );
-    });
-    test('should properly set readonly on child accordions', async ({ page }) => {
-      const accordionGroup = page.locator('ion-accordion-group');
-      const accordion = page.locator('ion-accordion');
-
-      await expect(accordion).toHaveJSProperty('readonly', false);
-
-      await accordionGroup.evaluate((el: HTMLIonAccordionGroupElement) => {
-        el.readonly = true;
-      });
-
-      await page.waitForChanges();
-
-      await expect(accordion).toHaveJSProperty('readonly', true);
-    });
-
-    test('should properly set disabled on child accordions', async ({ page }) => {
-      const accordionGroup = page.locator('ion-accordion-group');
-      const accordion = page.locator('ion-accordion');
-
-      await expect(accordion).toHaveJSProperty('disabled', false);
-
-      await accordionGroup.evaluate((el: HTMLIonAccordionGroupElement) => {
-        el.disabled = true;
-      });
-
-      await page.waitForChanges();
-
-      await expect(accordion).toHaveJSProperty('disabled', true);
-    });
-  });
-});

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

@@ -0,0 +1,137 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+// NOTE: these tests cannot be re-written as spec tests because the `getAccordions` method in accordion-group.tsx uses a `:scope` selector
+configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ config, title }) => {
+  test.describe(title('accordion: disabled'), () => {
+    test('should properly set disabled on child accordions', async ({ page }) => {
+      await page.setContent(
+        `
+      <ion-accordion-group animated="false">
+        <ion-accordion>
+          <ion-item slot="header">Label</ion-item>
+          <div slot="content">Content</div>
+        </ion-accordion>
+      </ion-accordion-group>
+    `,
+        config
+      );
+
+      const accordionGroup = page.locator('ion-accordion-group');
+      const accordion = page.locator('ion-accordion');
+
+      await expect(accordion).toHaveJSProperty('disabled', false);
+
+      await accordionGroup.evaluate((el: HTMLIonAccordionGroupElement) => {
+        el.disabled = true;
+      });
+
+      await page.waitForChanges();
+
+      await expect(accordion).toHaveJSProperty('disabled', true);
+    });
+
+    test('should not open accordion on click when group is disabled', async ({ page }) => {
+      await page.setContent(
+        `
+      <ion-accordion-group animated="false" disabled>
+        <ion-accordion>
+          <ion-item slot="header">Label</ion-item>
+          <div slot="content">Content</div>
+        </ion-accordion>
+      </ion-accordion-group>
+    `,
+        config
+      );
+
+      const accordion = page.locator('ion-accordion');
+
+      await expect(accordion).toHaveClass(/accordion-collapsed/);
+
+      accordion.click();
+      await page.waitForChanges();
+
+      await expect(accordion).toHaveClass(/accordion-collapsed/);
+    });
+
+    test('should not open accordion on click when accordion is disabled', async ({ page }) => {
+      await page.setContent(
+        `
+      <ion-accordion-group animated="false">
+        <ion-accordion disabled>
+          <ion-item slot="header">Label</ion-item>
+          <div slot="content">Content</div>
+        </ion-accordion>
+      </ion-accordion-group>
+    `,
+        config
+      );
+
+      const accordion = page.locator('ion-accordion');
+
+      await expect(accordion).toHaveClass(/accordion-collapsed/);
+
+      accordion.click();
+      await page.waitForChanges();
+
+      await expect(accordion).toHaveClass(/accordion-collapsed/);
+    });
+
+    test('should not open accordion via keyboard navigation when group is disabled', async ({ page, browserName }) => {
+      await page.setContent(
+        `
+      <ion-accordion-group animated="false" disabled>
+        <ion-accordion>
+          <ion-item slot="header">Label</ion-item>
+          <div slot="content">Content</div>
+        </ion-accordion>
+      </ion-accordion-group>
+    `,
+        config
+      );
+
+      const accordion = page.locator('ion-accordion');
+      const tabKey = browserName === 'webkit' ? 'Alt+Tab' : 'Tab';
+
+      await expect(accordion).toHaveClass(/accordion-collapsed/);
+
+      await page.keyboard.press(tabKey);
+      await page.waitForChanges();
+
+      await page.keyboard.press('Enter');
+      await page.waitForChanges();
+
+      await expect(accordion).toHaveClass(/accordion-collapsed/);
+    });
+
+    test('should not open accordion via keyboard navigation when accordion is disabled', async ({
+      page,
+      browserName,
+    }) => {
+      await page.setContent(
+        `
+      <ion-accordion-group animated="false">
+        <ion-accordion disabled>
+          <ion-item slot="header">Label</ion-item>
+          <div slot="content">Content</div>
+        </ion-accordion>
+      </ion-accordion-group>
+    `,
+        config
+      );
+
+      const accordion = page.locator('ion-accordion');
+      const tabKey = browserName === 'webkit' ? 'Alt+Tab' : 'Tab';
+
+      await expect(accordion).toHaveClass(/accordion-collapsed/);
+
+      await page.keyboard.press(tabKey);
+      await page.waitForChanges();
+
+      await page.keyboard.press('Enter');
+      await page.waitForChanges();
+
+      await expect(accordion).toHaveClass(/accordion-collapsed/);
+    });
+  });
+});

core/src/components/accordion/test/disabled/index.html

@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Accordion - Disabled</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
+    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
+    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
+    <script src="../../../../../scripts/testing/scripts.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: 20px;
+        grid-column-gap: 20px;
+      }
+    </style>
+  </head>
+  <body>
+    <ion-app>
+      <ion-header translucent="true">
+        <ion-toolbar>
+          <ion-title>Accordion - Disabled</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content fullscreen="true" color="light">
+        <ion-header collapse="condense">
+          <ion-toolbar color="light">
+            <ion-title size="large">Accordion - Disabled</ion-title>
+          </ion-toolbar>
+        </ion-header>
+
+        <div class="grid ion-padding">
+          <div class="grid-item">
+            <ion-accordion-group>
+              <ion-accordion value="first">
+                <ion-item slot="header" color="light">
+                  <ion-label>First Accordion</ion-label>
+                </ion-item>
+                <div class="ion-padding" slot="content">First Content</div>
+              </ion-accordion>
+              <ion-accordion value="second" disabled="true">
+                <ion-item slot="header" color="light">
+                  <ion-label>Second Accordion (Disabled)</ion-label>
+                </ion-item>
+                <div class="ion-padding" slot="content">Second Content</div>
+              </ion-accordion>
+              <ion-accordion value="third">
+                <ion-item slot="header" color="light">
+                  <ion-label>Third Accordion</ion-label>
+                </ion-item>
+                <div class="ion-padding" slot="content">Third Content</div>
+              </ion-accordion>
+            </ion-accordion-group>
+          </div>
+          <div class="grid-item">
+            <ion-accordion-group disabled="true">
+              <ion-accordion value="first">
+                <ion-item slot="header" color="light">
+                  <ion-label>First Accordion in Disabled Group</ion-label>
+                </ion-item>
+                <div class="ion-padding" slot="content">First Content</div>
+              </ion-accordion>
+              <ion-accordion value="second">
+                <ion-item slot="header" color="light">
+                  <ion-label>Second Accordion in Disabled Group</ion-label>
+                </ion-item>
+                <div class="ion-padding" slot="content">Second Content</div>
+              </ion-accordion>
+              <ion-accordion value="third">
+                <ion-item slot="header" color="light">
+                  <ion-label>Third Accordion in Disabled Group</ion-label>
+                </ion-item>
+                <div class="ion-padding" slot="content">Third Content</div>
+              </ion-accordion>
+            </ion-accordion-group>
+          </div>
+          <div class="grid-item">
+            <ion-accordion value="second" disabled="true">
+              <ion-item slot="header" color="light">
+                <ion-label>Accordion Without Group (Disabled)</ion-label>
+              </ion-item>
+              <div class="ion-padding" slot="content">Second Content</div>
+            </ion-accordion>
+          </div>
+        </div>
+      </ion-content>
+    </ion-app>
+  </body>
+</html>

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

@@ -0,0 +1,137 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+// NOTE: these tests cannot be re-written as spec tests because the `getAccordions` method in accordion-group.tsx uses a `:scope` selector
+configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ config, title }) => {
+  test.describe(title('accordion: readonly'), () => {
+    test('should properly set readonly on child accordions', async ({ page }) => {
+      await page.setContent(
+        `
+      <ion-accordion-group animated="false">
+        <ion-accordion>
+          <ion-item slot="header">Label</ion-item>
+          <div slot="content">Content</div>
+        </ion-accordion>
+      </ion-accordion-group>
+    `,
+        config
+      );
+
+      const accordionGroup = page.locator('ion-accordion-group');
+      const accordion = page.locator('ion-accordion');
+
+      await expect(accordion).toHaveJSProperty('readonly', false);
+
+      await accordionGroup.evaluate((el: HTMLIonAccordionGroupElement) => {
+        el.readonly = true;
+      });
+
+      await page.waitForChanges();
+
+      await expect(accordion).toHaveJSProperty('readonly', true);
+    });
+
+    test('should not open accordion on click when group is readonly', async ({ page }) => {
+      await page.setContent(
+        `
+      <ion-accordion-group animated="false" readonly>
+        <ion-accordion>
+          <ion-item slot="header">Label</ion-item>
+          <div slot="content">Content</div>
+        </ion-accordion>
+      </ion-accordion-group>
+    `,
+        config
+      );
+
+      const accordion = page.locator('ion-accordion');
+
+      await expect(accordion).toHaveClass(/accordion-collapsed/);
+
+      accordion.click();
+      await page.waitForChanges();
+
+      await expect(accordion).toHaveClass(/accordion-collapsed/);
+    });
+
+    test('should not open accordion on click when accordion is readonly', async ({ page }) => {
+      await page.setContent(
+        `
+      <ion-accordion-group animated="false">
+        <ion-accordion readonly>
+          <ion-item slot="header">Label</ion-item>
+          <div slot="content">Content</div>
+        </ion-accordion>
+      </ion-accordion-group>
+    `,
+        config
+      );
+
+      const accordion = page.locator('ion-accordion');
+
+      await expect(accordion).toHaveClass(/accordion-collapsed/);
+
+      accordion.click();
+      await page.waitForChanges();
+
+      await expect(accordion).toHaveClass(/accordion-collapsed/);
+    });
+
+    test('should not open accordion via keyboard navigation when group is readonly', async ({ page, browserName }) => {
+      await page.setContent(
+        `
+      <ion-accordion-group animated="false" readonly>
+        <ion-accordion>
+          <ion-item slot="header">Label</ion-item>
+          <div slot="content">Content</div>
+        </ion-accordion>
+      </ion-accordion-group>
+    `,
+        config
+      );
+
+      const accordion = page.locator('ion-accordion');
+      const tabKey = browserName === 'webkit' ? 'Alt+Tab' : 'Tab';
+
+      await expect(accordion).toHaveClass(/accordion-collapsed/);
+
+      await page.keyboard.press(tabKey);
+      await page.waitForChanges();
+
+      await page.keyboard.press('Enter');
+      await page.waitForChanges();
+
+      await expect(accordion).toHaveClass(/accordion-collapsed/);
+    });
+
+    test('should not open accordion via keyboard navigation when accordion is readonly', async ({
+      page,
+      browserName,
+    }) => {
+      await page.setContent(
+        `
+      <ion-accordion-group animated="false">
+        <ion-accordion readonly>
+          <ion-item slot="header">Label</ion-item>
+          <div slot="content">Content</div>
+        </ion-accordion>
+      </ion-accordion-group>
+    `,
+        config
+      );
+
+      const accordion = page.locator('ion-accordion');
+      const tabKey = browserName === 'webkit' ? 'Alt+Tab' : 'Tab';
+
+      await expect(accordion).toHaveClass(/accordion-collapsed/);
+
+      await page.keyboard.press(tabKey);
+      await page.waitForChanges();
+
+      await page.keyboard.press('Enter');
+      await page.waitForChanges();
+
+      await expect(accordion).toHaveClass(/accordion-collapsed/);
+    });
+  });
+});

core/src/components/accordion/test/readonly/index.html

@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Accordion - Readonly</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
+    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
+    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
+    <script src="../../../../../scripts/testing/scripts.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: 20px;
+        grid-column-gap: 20px;
+      }
+    </style>
+  </head>
+  <body>
+    <ion-app>
+      <ion-header translucent="true">
+        <ion-toolbar>
+          <ion-title>Accordion - Readonly</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content fullscreen="true" color="light">
+        <ion-header collapse="condense">
+          <ion-toolbar color="light">
+            <ion-title size="large">Accordion - Readonly</ion-title>
+          </ion-toolbar>
+        </ion-header>
+
+        <div class="grid ion-padding">
+          <div class="grid-item">
+            <ion-accordion-group>
+              <ion-accordion value="first">
+                <ion-item slot="header" color="light">
+                  <ion-label>First Accordion</ion-label>
+                </ion-item>
+                <div class="ion-padding" slot="content">First Content</div>
+              </ion-accordion>
+              <ion-accordion value="second" readonly="true">
+                <ion-item slot="header" color="light">
+                  <ion-label>Second Accordion (Readonly)</ion-label>
+                </ion-item>
+                <div class="ion-padding" slot="content">Second Content</div>
+              </ion-accordion>
+              <ion-accordion value="third">
+                <ion-item slot="header" color="light">
+                  <ion-label>Third Accordion</ion-label>
+                </ion-item>
+                <div class="ion-padding" slot="content">Third Content</div>
+              </ion-accordion>
+            </ion-accordion-group>
+          </div>
+          <div class="grid-item">
+            <ion-accordion-group readonly="true">
+              <ion-accordion value="first">
+                <ion-item slot="header" color="light">
+                  <ion-label>First Accordion in Readonly Group</ion-label>
+                </ion-item>
+                <div class="ion-padding" slot="content">First Content</div>
+              </ion-accordion>
+              <ion-accordion value="second">
+                <ion-item slot="header" color="light">
+                  <ion-label>Second Accordion in Readonly Group</ion-label>
+                </ion-item>
+                <div class="ion-padding" slot="content">Second Content</div>
+              </ion-accordion>
+              <ion-accordion value="third">
+                <ion-item slot="header" color="light">
+                  <ion-label>Third Accordion in Readonly Group</ion-label>
+                </ion-item>
+                <div class="ion-padding" slot="content">Third Content</div>
+              </ion-accordion>
+            </ion-accordion-group>
+          </div>
+          <div class="grid-item">
+            <ion-accordion value="second" readonly="true">
+              <ion-item slot="header" color="light">
+                <ion-label>Accordion Without Group (Readonly)</ion-label>
+              </ion-item>
+              <div class="ion-padding" slot="content">Second Content</div>
+            </ion-accordion>
+          </div>
+        </div>
+      </ion-content>
+    </ion-app>
+  </body>
+</html>

core/src/components/action-sheet/action-sheet-interface.ts

@@ -1,4 +1,4 @@
-import type { AnimationBuilder, Mode } from '../../interface';
+import type { AnimationBuilder, LiteralUnion, Mode } from '../../interface';
 
 export interface ActionSheetOptions {
   header?: string;
@@ -19,7 +19,7 @@ export interface ActionSheetOptions {
 
 export interface ActionSheetButton<T = any> {
   text?: string;
-  role?: 'cancel' | 'destructive' | 'selected' | string;
+  role?: LiteralUnion<'cancel' | 'destructive' | 'selected', string>;
   icon?: string;
   cssClass?: string | string[];
   id?: string;

core/src/components/action-sheet/action-sheet.ios.scss

@@ -26,7 +26,24 @@
 // ---------------------------------------------------
 
 .action-sheet-wrapper {
-  @include margin(var(--ion-safe-area-top, 0), auto, var(--ion-safe-area-bottom, 0), auto);
+  @include margin(var(--ion-safe-area-top, 0), auto, null, auto);
+  /**
+   * Bottom safe area is applied as padding so that it impacts the bounding box.
+   * When the action sheet is shown/hidden, this element is transformed by translating
+   * 100% of its height. This translation needs to include the bottom safe area
+   * otherwise part of the action sheet will still be visible at the end of
+   * the show transition.
+   *
+   * If this code is changed, reviewers should verify that the action
+   * sheet still translates out of the viewport completely when the bottom
+   * safe area is a positive value.
+   */
+  @include padding(null, null, var(--ion-safe-area-bottom, 0), null);
+
+  // Using content-box to increase the height of the action sheet
+  // wrapper by the bottom padding (safe area) to animate the
+  // action sheet completely off the screen when safe area is set.
+  box-sizing: content-box;
 }
 
 // iOS Action Sheet Container

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

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

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

@@ -19,12 +19,12 @@
     <main class="ion-padding">
       <h1>Action Sheet - A11y</h1>
 
-      <ion-button id="bothHeaders" expand="block" onclick="presentBothHeaders()">Both Headers</ion-button>
-      <ion-button id="subHeaderOnly" expand="block" onclick="presentSubHeaderOnly()">Subheader Only</ion-button>
-      <ion-button id="noHeaders" expand="block" onclick="presentNoHeaders()">No Headers</ion-button>
-      <ion-button id="customAria" expand="block" onclick="presentCustomAria()">Custom Aria</ion-button>
-      <ion-button id="ariaLabelButton" expand="block" onclick="presentAriaLabelButton()">Aria Label Button</ion-button>
-      <ion-button id="ariaLabelCancelButton" expand="block" onclick="presentAriaLabelCancelButton()"
+      <ion-button id="bothHeaders" onclick="presentBothHeaders()">Both Headers</ion-button>
+      <ion-button id="subHeaderOnly" onclick="presentSubHeaderOnly()">Subheader Only</ion-button>
+      <ion-button id="noHeaders" onclick="presentNoHeaders()">No Headers</ion-button>
+      <ion-button id="customAria" onclick="presentCustomAria()">Custom Aria</ion-button>
+      <ion-button id="ariaLabelButton" onclick="presentAriaLabelButton()">Aria Label Button</ion-button>
+      <ion-button id="ariaLabelCancelButton" onclick="presentAriaLabelCancelButton()"
         >Aria Label Cancel Button</ion-button
       >
     </main>

core/src/components/alert/alert-interface.ts

@@ -1,4 +1,4 @@
-import type { AnimationBuilder, Mode, TextFieldTypes } from '../../interface';
+import type { AnimationBuilder, LiteralUnion, Mode, TextFieldTypes } from '../../interface';
 import type { IonicSafeString } from '../../utils/sanitization';
 
 export interface AlertOptions {
@@ -45,7 +45,7 @@ type AlertButtonOverlayHandler = boolean | void | { [key: string]: any };
 
 export interface AlertButton {
   text: string;
-  role?: 'cancel' | 'destructive' | string;
+  role?: LiteralUnion<'cancel' | 'destructive', string>;
   cssClass?: string | string[];
   id?: string;
   htmlAttributes?: { [key: string]: any };

core/src/components/alert/alert.ios.scss

@@ -265,6 +265,22 @@
   flex-wrap: $alert-ios-button-group-flex-wrap;
 }
 
+/**
+  * The right border should only be applied to the first button
+  * when the group has 2 or less buttons (horizontal).
+  * Otherwise, the right border should not be applied
+  * when the group has 3 or more buttons (vertical).
+  */
+.alert-button-group-vertical .alert-button {
+  border-right: none;
+
+  &:last-child {
+    @include rtl() {
+      border-right: none;
+    }
+  }
+}
+
 .alert-button {
   /**
    * This padding ensures that alerts

core/src/components/alert/alert.tsx

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

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

@@ -288,6 +288,10 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
       await alert.evaluate((el: HTMLIonAlertElement) => el.present());
       await ionAlertDidPresent.next();
 
+      /**
+       * The borders on the text fields may not be visible in the screenshot
+       * when using Safari, this is due to a WebKit rendering quirk.
+       */
       await expect(page).toHaveScreenshot(screenshot(`alert-text-fields-scale`));
     });
   });

core/src/components/alert/test/a11y/index.html

@@ -9,6 +9,19 @@
     <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>
+      main > button {
+        display: block;
+        clear: both;
+        width: 100%;
+        padding: 12px 8px;
+        font-size: 1em;
+        background: #f8f8f8;
+        border: 1px solid #eee;
+        border-radius: 4px;
+        margin-bottom: 8px;
+      }
+    </style>
   </head>
   <script type="module">
     import { alertController } from '../../../../dist/ionic/index.esm.js';
@@ -19,13 +32,13 @@
     <main class="ion-padding">
       <h1>Alert - A11y</h1>
 
-      <ion-button id="bothHeaders" expand="block" onclick="presentBothHeaders()">Both Headers</ion-button>
-      <ion-button id="subHeaderOnly" expand="block" onclick="presentSubHeaderOnly()">Subheader Only</ion-button>
-      <ion-button id="noHeaders" expand="block" onclick="presentNoHeaders()">No Headers</ion-button>
-      <ion-button id="noMessage" expand="block" onclick="presentNoMessage()">No Message</ion-button>
-      <ion-button id="customAria" expand="block" onclick="presentCustomAria()">Custom Aria</ion-button>
-      <ion-button id="ariaLabelButton" expand="block" onclick="presentAriaLabelButton()">Aria Label Button</ion-button>
-      <ion-button id="checkbox" expand="block" onclick="presentAlertCheckbox()">Checkbox</ion-button>
+      <button id="bothHeaders" onclick="presentBothHeaders()">Both Headers</button>
+      <button id="subHeaderOnly" onclick="presentSubHeaderOnly()">Subheader Only</button>
+      <button id="noHeaders" onclick="presentNoHeaders()">No Headers</button>
+      <button id="noMessage" onclick="presentNoMessage()">No Message</button>
+      <button id="customAria" onclick="presentCustomAria()">Custom Aria</button>
+      <button id="ariaLabelButton" onclick="presentAriaLabelButton()">Aria Label Button</button>
+      <button id="checkbox" onclick="presentAlertCheckbox()">Checkbox</button>
     </main>
 
     <script>

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

@@ -73,11 +73,6 @@ configs().forEach(({ config, screenshot, title }) => {
       await alertFixture.screenshot('longMessage');
     });
 
-    test('more than two buttons', async () => {
-      await alertFixture.open('#multipleButtons');
-      await alertFixture.screenshot('multipleButtons');
-    });
-
     test('no message', async () => {
       await alertFixture.open('#noMessage');
       await alertFixture.screenshot('noMessage');
@@ -105,6 +100,41 @@ configs().forEach(({ config, screenshot, title }) => {
   });
 });
 
+configs({ themes: ['light', 'dark'] }).forEach(({ config, screenshot, title }) => {
+  test.describe(title('should not have visual regressions'), () => {
+    test('more than two buttons', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-alert
+          header="Alert"
+          sub-header="Subtitle"
+          message="This is an alert message."
+          is-open="true"
+        ></ion-alert>
+
+        <script>
+          const alert = document.querySelector('ion-alert');
+          alert.buttons = [
+            'Open Modal',
+            {
+              text: 'Delete',
+              id: 'delete-button',
+              role: 'destructive',
+            },
+            'Cancel'
+          ];
+        </script>
+      `,
+        config
+      );
+
+      const alert = page.locator('ion-alert');
+
+      await expect(alert).toHaveScreenshot(screenshot(`alert-multipleButtons`));
+    });
+  });
+});
+
 class AlertFixture {
   readonly page: E2EPage;
   readonly screenshotFn?: (file: string) => string;