v6.0.16

Release 6.0.15

.github/CONTRIBUTING.md

@@ -140,13 +140,12 @@ Before creating a pull request, please read our requirements that explains the m
 
 #### Modifying Documentation
 
-- Changes to manually written documentation should be made in the `ionic-docs` repo: https://github.com/ionic-team/ionic-docs/tree/main/docs
-  - In your `ionic-docs` PR, please add a link back to the related `ionic-framework` PR.
-- Changes to auto generated documentation should be made in the `ionic-framework` repo. These can be done in the same PR as your fix or feature.
-  - Run `npm run build` and commit all updates to ensure your changes make it into the generated documentation.
-  - `Usage`: update the component's usage examples in the component's `usage/` directory.
-  - `Properties`, `Events`, or `Methods`: update the component's TypeScript file (`*.tsx`).
-  - `CSS Custom Properties`: update the component's main Sass file (`*.scss`).
+1. Locate the `readme.md` file in the component's directory.
+2. Modify the documentation **above** the line that says `<!-- Auto Generated Below -->` in this file.
+3. To update any of the auto generated documentation below that line, make the relevant changes in the following places:
+  - `Usage`: update the component's usage examples in the component's `usage/` directory
+  - `Properties`, `Events`, or `Methods`: update the component's TypeScript file (`*.tsx`)
+  - `CSS Custom Properties`: update the component's main Sass file (`*.scss`)
 
 
 #### Modifying Tests

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -21,7 +21,6 @@ body:
         - label: v4.x
         - label: v5.x
         - label: v6.x
-        - label: Nightly
   - type: textarea
     attributes:
       label: Current Behavior

.github/PULL_REQUEST_TEMPLATE.md

@@ -5,7 +5,6 @@
 Please check if your PR fulfills the following requirements:
 - [ ] Tests for the changes have been added (for bug fixes / features)
 - [ ] Docs have been reviewed and added / updated if needed (for bug fixes / features)
-  - Some docs updates need to be made in the `ionic-docs` repo, in a separate PR. See the [contributing guide](https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#modifying-documentation) for details.
 - [ ] Build (`npm run build`) was run locally and any changes were pushed
 - [ ] Lint (`npm run lint`) has passed locally and any fixes were made for failures
 

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

@@ -5,7 +5,7 @@ runs:
   steps:
     - uses: actions/setup-node@v1
       with:
-        node-version: 16.x
+        node-version: 15.x
 
     - name: Install Angular Server Dependencies
       run: npm install --legacy-peer-deps

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

@@ -5,7 +5,7 @@ runs:
   steps:
     - uses: actions/setup-node@v1
       with:
-        node-version: 16.x
+        node-version: 15.x
 
     - name: Cache Core Node Modules
       uses: actions/cache@v2
@@ -27,7 +27,7 @@ runs:
         path: ./core
         filename: CoreBuild.zip
     - name: Install Angular Dependencies
-      run: npm install --legacy-peer-deps
+      run: npm install
       shell: bash
       working-directory: ./angular
     - name: Link @ionic/core
@@ -46,10 +46,6 @@ runs:
       run: npm run build
       shell: bash
       working-directory: ./angular
-    - name: Check Diff
-      run: git diff --exit-code
-      shell: bash
-      working-directory: ./angular
     - uses: ./.github/workflows/actions/upload-archive
       with:
         name: ionic-angular

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

@@ -9,7 +9,7 @@ runs:
         ref: ${{ github.event.pull_request.head.sha }}
     - uses: actions/setup-node@v1
       with:
-        node-version: 16.x
+        node-version: 15.x
 
     - name: Cache Node Modules
       uses: actions/cache@v2

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

@@ -5,7 +5,7 @@ runs:
   steps:
     - uses: actions/setup-node@v1
       with:
-        node-version: 16.x
+        node-version: 15.x
 
     - name: Cache Core Node Modules
       uses: actions/cache@v2

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

@@ -5,7 +5,7 @@ runs:
   steps:
     - uses: actions/setup-node@v1
       with:
-        node-version: 16.x
+        node-version: 15.x
 
     - name: Cache Core Node Modules
       uses: actions/cache@v2
@@ -39,10 +39,6 @@ runs:
       run: npm run test.spec
       shell: bash
       working-directory: ./packages/react
-    - name: Check Diff
-      run: git diff --exit-code
-      shell: bash
-      working-directory: ./packages/react
     - uses: ./.github/workflows/actions/upload-archive
       with:
         name: ionic-react

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

@@ -5,7 +5,7 @@ runs:
   steps:
     - uses: actions/setup-node@v1
       with:
-        node-version: 16.x
+        node-version: 15.x
 
     - name: Cache Core Node Modules
       uses: actions/cache@v2

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

@@ -5,7 +5,7 @@ runs:
   steps:
     - uses: actions/setup-node@v1
       with:
-        node-version: 16.x
+        node-version: 15.x
 
     - name: Cache Core Node Modules
       uses: actions/cache@v2
@@ -20,7 +20,7 @@ runs:
         path: ./core
         filename: CoreBuild.zip
     - name: Install Vue Dependencies
-      run: npm install --legacy-peer-deps
+      run: npm install
       shell: bash
       working-directory: ./packages/vue
     - name: Sync
@@ -35,10 +35,6 @@ runs:
       run: npm run build
       shell: bash
       working-directory: ./packages/vue
-    - name: Check Diff
-      run: git diff --exit-code
-      shell: bash
-      working-directory: ./packages/vue
     - uses: ./.github/workflows/actions/upload-archive
       with:
         name: ionic-vue

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

@@ -5,7 +5,7 @@ runs:
   steps:
     - uses: actions/setup-node@v1
       with:
-        node-version: 16.x
+        node-version: 15.x
 
     - uses: ./.github/workflows/actions/download-archive
       with:

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

@@ -5,7 +5,7 @@ runs:
   steps:
     - uses: actions/setup-node@v1
       with:
-        node-version: 16.x
+        node-version: 15.x
 
     - name: Cache Core Node Modules
       uses: actions/cache@v2

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

@@ -5,7 +5,7 @@ runs:
   steps:
     - uses: actions/setup-node@v1
       with:
-        node-version: 16.x
+        node-version: 15.x
 
     - name: Cache Core Node Modules
       uses: actions/cache@v2
@@ -18,10 +18,3 @@ runs:
       run: npm run lint
       shell: bash
       working-directory: ./core
-    # Lint changes should be pushed
-    # to the branch before the branch
-    # is merge eligible.
-    - name: Check Lint Results
-      run: git diff --exit-code
-      shell: bash
-      working-directory: ./core

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

@@ -12,7 +12,7 @@ runs:
   steps:
     - uses: actions/setup-node@v1
       with:
-        node-version: 16.x
+        node-version: 15.x
 
     - name: Cache Core Node Modules
       uses: actions/cache@v2
@@ -41,41 +41,10 @@ runs:
       shell: bash
       working-directory: ./core
     - name: Test and Update
-      id: test-and-update
       if: inputs.update == 'true'
-      # Keep track of the files that were
-      # changed so they can be correctly restored
-      # in the combine step.
-      # To do this, we move only the changed files
-      # to a separate directory, while preserving the
-      # directory structure of the source.
-      # When, we create and archive of these results
-      # so that the combine step can simply
-      # unzip and move the changed files into place.
-      # We have extra logic added so that job runners
-      # that do not have any new screenshots do not create
-      # an unnecessary .zip.
-      # Note that we need to unzip directory to be "core"
-      # which is why we not using the upload-archive
-      # composite step here.
-      run: |
-        npx playwright test --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
-        if [ -d core/updated-screenshots/core ]; then
-          echo "::set-output name=hasUpdatedScreenshots::$(echo 'true')"
-          cd core/updated-screenshots
-          zip -q -r ../../UpdatedScreenshots-${{ inputs.shard }}-${{ inputs.totalShards }}.zip core
-        fi
+      run: npx playwright test --shard=${{ inputs.shard }}/${{ inputs.totalShards }} --update-snapshots
       shell: bash
       working-directory: ./core
-    - name: Archive Updated Screenshots
-      if: inputs.update == 'true' && steps.test-and-update.outputs.hasUpdatedScreenshots == 'true'
-      uses: actions/upload-artifact@v2
-      with:
-        name: updated-screenshots-${{ inputs.shard }}-${{ inputs.totalShards }}
-        path: UpdatedScreenshots-${{ inputs.shard }}-${{ inputs.totalShards }}.zip
     - name: Archive Test Results
       # The always() ensures that this step
       # runs even if the previous step fails.
@@ -88,4 +57,4 @@ runs:
       with:
         name: test-results-${{ inputs.shard }}-${{ inputs.totalShards }}
         output: core/TestResults-${{ inputs.shard }}-${{ inputs.totalShards }}.zip
-        paths: core/playwright-report
+        paths: core/playwright-report core/src

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

@@ -5,7 +5,7 @@ runs:
   steps:
     - uses: actions/setup-node@v1
       with:
-        node-version: 16.x
+        node-version: 15.x
 
     - name: Cache Core Node Modules
       uses: actions/cache@v2

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

@@ -5,7 +5,7 @@ runs:
   steps:
     - uses: actions/setup-node@v1
       with:
-        node-version: 16.x
+        node-version: 15.x
 
     - name: Cache Core Node Modules
       uses: actions/cache@v2

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

@@ -5,7 +5,7 @@ runs:
   steps:
     - uses: actions/setup-node@v1
       with:
-        node-version: 16.x
+        node-version: 15.x
 
     - name: Cache Core Node Modules
       uses: actions/cache@v2

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

@@ -5,7 +5,7 @@ runs:
   steps:
     - uses: actions/setup-node@v1
       with:
-        node-version: 16.x
+        node-version: 15.x
 
     - name: Cache Core Node Modules
       uses: actions/cache@v2

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

@@ -9,7 +9,7 @@ runs:
   steps:
     - uses: actions/setup-node@v1
       with:
-        node-version: 16.x
+        node-version: 15.x
     - uses: actions/download-artifact@v2
       with:
         path: ./artifacts
@@ -18,7 +18,7 @@ runs:
       # directory, including nested directories.
       # It then unzips every .zip to the root directory
       run: |
-        find . -type f -name 'UpdatedScreenshots-*.zip' -exec unzip -q -o -d ../ {} \;
+        find . -type f -name '*.zip' -exec unzip -q -o -d ../ -- '{}'  -x '*.zip' \;
       shell: bash
       working-directory: ./artifacts
     - name: Push Screenshots

.github/workflows/build.yml

@@ -4,21 +4,15 @@ on:
   pull_request:
     branches: [ '**' ]
 
-# When pushing a new commit we should
-# cancel the previous test run to not
-# consume more runners than we need to.
-concurrency:
-  group: ${{ github.ref }}
-  cancel-in-progress: true
-
 jobs:
   build-core:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
-        with:
-          # Checkout the latest commit in this branch
-          ref: ${{ github.event.pull_request.head.sha }}
+        - uses: actions/checkout@v2
+          with:
+            # Checkout the latest commit in this branch
+            ref: ${{ github.event.pull_request.head.sha }}
       - uses: ./.github/workflows/actions/build-core
 
   test-core-clean-build:
@@ -62,8 +56,8 @@ jobs:
         # add new items to the shard array
         # and change the value of totalShards
         # to be the length of the shard array.
-        shard: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]
-        totalShards: [20]
+        shard: [1, 2, 3, 4, 5]
+        totalShards: [5]
     needs: [build-core]
     runs-on: ubuntu-latest
     steps:
@@ -73,24 +67,6 @@ jobs:
           shard: ${{ matrix.shard }}
           totalShards: ${{ matrix.totalShards }}
 
-  # Screenshots are required to pass
-  # in order for the branch to be merge
-  # eligible. However, the screenshot tests
-  # are run on n runners where n can change
-  # over time. The verify-screenshots step allows
-  # us to have a required status check for screenshot
-  # results without having to manually add each
-  # matrix run in the branch protection rules
-  # Source: https://github.community/t/status-check-for-a-matrix-jobs/127354
-  verify-screenshots:
-    if: ${{ always() }}
-    needs: test-core-screenshot
-    runs-on: ubuntu-latest
-    steps:
-      - name: Check build matrix status
-        if: ${{ needs.test-core-screenshot.result != 'success' }}
-        run: exit 1
-
   build-vue:
     needs: [build-core]
     runs-on: ubuntu-latest

.github/workflows/nightly.yml

@@ -1,60 +0,0 @@
-name: 'Ionic Nightly Build'
-
-on:
-  schedule:
-    # Run every Monday-Friday
-    # at 6:00 UTC (6:00 am UTC)
-    - cron: '00 06 * * 1-5'
-
-jobs:
-  nightly-build:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v2
-        with:
-          fetch-depth: 0
-      - uses: actions/setup-node@v2
-        with:
-          node-version: 16
-      - name: Install Dependencies
-        run: npm ci --no-package-lock && lerna bootstrap --ignore-scripts -- --legacy-peer-deps
-        shell: bash
-      - name: Prepare NPM Token
-        run: echo //registry.npmjs.org/:_authToken=${NPM_TOKEN} > .npmrc
-        shell: bash
-        env:
-          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
-      - name: Configure Identity
-        run: |
-          git config user.name github-actions
-          git config user.email github-actions@github.com
-      # 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
-      - name: Create Nightly Hash
-        # The date should output YYYYMMDD
-        # so that it is human readable
-        run: |
-          echo "DATE=$(date +%Y%m%d)" >> $GITHUB_ENV
-          echo "CURRENT_VERSION=$(node ./.scripts/bump-version.js)" >> $GITHUB_ENV
-        shell: bash
-      - name: Checkout Nightly Branch
-        run: |
-          git checkout -b nightly-$(echo "${{ env.DATE }}")
-          git push origin nightly-$(echo "${{ env.DATE }}")
-        shell: bash
-      - name: Create Nightly Build
-        run: |
-          HUSKY_SKIP_HOOKS=1 lerna publish $(echo "${{ env.CURRENT_VERSION }}")-nightly.$(echo "${{ env.DATE }}") --no-verify-access --yes --force-publish='*' --dist-tag nightly --conventional-commits --conventional-prerelease --exact --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 nightly-$(echo "${{ env.DATE }}")
-          git push origin --delete nightly-$(echo "${{ env.DATE }}")
-        shell: bash

.github/workflows/release.yml

@@ -26,7 +26,6 @@ jobs:
     steps:
       - uses: actions/checkout@v2
         with:
-          token: ${{ secrets.IONITRON_TOKEN }}
           fetch-depth: 0
       - uses: actions/setup-node@v2
         with:
@@ -50,15 +49,3 @@ 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 --legacy-peer-deps"
-          git config user.name ionitron
-          git config user.email hi@ionicframework.com
-          git add .
-          git commit -m "chore(): update package lock files"
-          git push
-

.github/workflows/update-screenshots.yml

@@ -23,8 +23,8 @@ jobs:
         # add new items to the shard array
         # and change the value of totalShards
         # to be the length of the shard array.
-        shard: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]
-        totalShards: [20]
+        shard: [1, 2, 3, 4, 5]
+        totalShards: [5]
     needs: [build-core]
     runs-on: ubuntu-latest
     steps:

CHANGELOG.md

@@ -3,153 +3,6 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [6.1.8](https://github.com/ionic-team/ionic-framework/compare/v6.1.7...v6.1.8) (2022-06-01)
-
-
-### Bug Fixes
-
-* **all:** improve compatibility with vite ([#25381](https://github.com/ionic-team/ionic-framework/issues/25381)) ([d83bcd2](https://github.com/ionic-team/ionic-framework/commit/d83bcd2b7f9937550008f995ff91517777584373)), closes [#23823](https://github.com/ionic-team/ionic-framework/issues/23823)
-* **item-sliding:** swiping inside of virtual scroller now prevents scrolling ([#25345](https://github.com/ionic-team/ionic-framework/issues/25345)) ([5a1a5f6](https://github.com/ionic-team/ionic-framework/commit/5a1a5f6b4c2ab4059158986e907fff45d03be753))
-* **range:** dragging knob no longer scrolls page ([#25343](https://github.com/ionic-team/ionic-framework/issues/25343)) ([0b92dff](https://github.com/ionic-team/ionic-framework/commit/0b92dffa92c05705ff83518c10608e3dc3651d51)), closes [#19004](https://github.com/ionic-team/ionic-framework/issues/19004)
-* **react:** present controller overlays in React 18 ([#25361](https://github.com/ionic-team/ionic-framework/issues/25361)) ([01c40ea](https://github.com/ionic-team/ionic-framework/commit/01c40eae5509f1c150d79269a7a75c05112fa343)), closes [#25247](https://github.com/ionic-team/ionic-framework/issues/25247)
-
-
-
-
-
-## [6.1.7](https://github.com/ionic-team/ionic-framework/compare/v6.1.6...v6.1.7) (2022-05-26)
-
-
-### Bug Fixes
-
-* **accordion:** accordions expand when using binding ([#25322](https://github.com/ionic-team/ionic-framework/issues/25322)) ([61e571e](https://github.com/ionic-team/ionic-framework/commit/61e571e585ed8ad9b0ca2f98f57bb16616413ba6)), closes [#25307](https://github.com/ionic-team/ionic-framework/issues/25307)
-* **datetime:** don't update value on confirm call if no date was selected ([#25338](https://github.com/ionic-team/ionic-framework/issues/25338)) ([9e5b10a](https://github.com/ionic-team/ionic-framework/commit/9e5b10a2155c6b9de565931da384e0e49aeca7b7))
-* **item, list:** list aria roles are added ([#25336](https://github.com/ionic-team/ionic-framework/issues/25336)) ([311c634](https://github.com/ionic-team/ionic-framework/commit/311c634d20e9e597db676d6f54e4b79cfe742a61)), closes [#19939](https://github.com/ionic-team/ionic-framework/issues/19939)
-* **menu:** rtl menu no longer disappears on ios 15 ([#25309](https://github.com/ionic-team/ionic-framework/issues/25309)) ([6005431](https://github.com/ionic-team/ionic-framework/commit/60054310afbab6151f6c29ff6e74666acd181a41)), closes [#25192](https://github.com/ionic-team/ionic-framework/issues/25192)
-* **modal:** swipe to close on content blocks scroll in ion-nav ([#25300](https://github.com/ionic-team/ionic-framework/issues/25300)) ([fdc55c0](https://github.com/ionic-team/ionic-framework/commit/fdc55c072765c87ad7c783e6d8a238b007f5f3ff)), closes [#25298](https://github.com/ionic-team/ionic-framework/issues/25298)
-* **nav:** swipe to go back works inside card modal ([#25333](https://github.com/ionic-team/ionic-framework/issues/25333)) ([0156be6](https://github.com/ionic-team/ionic-framework/commit/0156be61cbf73b25cb3c2cba1bd20adebbb3db4f)), closes [#25327](https://github.com/ionic-team/ionic-framework/issues/25327)
-* **range:** interfaces are now correctly exported ([#25342](https://github.com/ionic-team/ionic-framework/issues/25342)) ([15f0c06](https://github.com/ionic-team/ionic-framework/commit/15f0c0669f7598386edf487f408462b90ed91a08)), closes [#25341](https://github.com/ionic-team/ionic-framework/issues/25341)
-* **react:** add param types to useIonPopover dismiss function ([#25311](https://github.com/ionic-team/ionic-framework/issues/25311)) ([7111370](https://github.com/ionic-team/ionic-framework/commit/7111370dd787fdec78a1e3368679bc4c73570b98))
-* **react:** IonTabButton will call custom onClick handlers ([#25313](https://github.com/ionic-team/ionic-framework/issues/25313)) ([6034418](https://github.com/ionic-team/ionic-framework/commit/6034418b33c32fdd682c470eaf61b9fcbe86c4bb)), closes [#22511](https://github.com/ionic-team/ionic-framework/issues/22511)
-* **refresher:** attach scroll listener to custom scroll target ([#25335](https://github.com/ionic-team/ionic-framework/issues/25335)) ([8f5e4cd](https://github.com/ionic-team/ionic-framework/commit/8f5e4cd9350b10a98afb7c98353c6719eee918bb)), closes [#25318](https://github.com/ionic-team/ionic-framework/issues/25318)
-* **types:** improve intellisense with colors ([#25347](https://github.com/ionic-team/ionic-framework/issues/25347)) ([97cfbbb](https://github.com/ionic-team/ionic-framework/commit/97cfbbb65d3e63c32d720e01c7368c68616bb531))
-* **vue:** correct views are now unmounted in tabs ([#25270](https://github.com/ionic-team/ionic-framework/issues/25270)) ([5e23fb1](https://github.com/ionic-team/ionic-framework/commit/5e23fb1ce4e5b6e53828bde59268170f604167ba)), closes [#25255](https://github.com/ionic-team/ionic-framework/issues/25255)
-
-
-
-
-
-## [6.1.6](https://github.com/ionic-team/ionic-framework/compare/v6.1.5...v6.1.6) (2022-05-18)
-
-
-### Bug Fixes
-
-* **loading:** spinner now respects —spinner-color ([#25261](https://github.com/ionic-team/ionic-framework/issues/25261)) ([65f4c74](https://github.com/ionic-team/ionic-framework/commit/65f4c742e7a5e5756f6f72dd853e38e885f90385)), closes [#25180](https://github.com/ionic-team/ionic-framework/issues/25180)
-* **modal:** reset breakpoint to initial breakpoint on present ([#25246](https://github.com/ionic-team/ionic-framework/issues/25246)) ([2557bf3](https://github.com/ionic-team/ionic-framework/commit/2557bf3c3eed9e33e89e07a8d73489da8d81bee3)), closes [#25245](https://github.com/ionic-team/ionic-framework/issues/25245)
-* **scroll-assist:** touch end events continue to bubble on inputs ([#25282](https://github.com/ionic-team/ionic-framework/issues/25282)) ([780f16d](https://github.com/ionic-team/ionic-framework/commit/780f16d9e04ee5aaaf91bb7c6ef15c72cc8aeb45)), closes [#25229](https://github.com/ionic-team/ionic-framework/issues/25229)
-
-
-
-
-
-## [6.1.5](https://github.com/ionic-team/ionic-framework/compare/v6.1.4...v6.1.5) (2022-05-11)
-
-
-### Bug Fixes
-
-* **core:** @axe-core/playwright should be a devDependency ([#25244](https://github.com/ionic-team/ionic-framework/issues/25244)) ([617ec48](https://github.com/ionic-team/ionic-framework/commit/617ec48265157d1502c443395472c21ebdb2989e)), closes [#25242](https://github.com/ionic-team/ionic-framework/issues/25242)
-* **item:** counter has appropriate contrast ([#25266](https://github.com/ionic-team/ionic-framework/issues/25266)) ([750be33](https://github.com/ionic-team/ionic-framework/commit/750be33772e9ba71a3cda35709d17b7912aa68e2)), closes [#25262](https://github.com/ionic-team/ionic-framework/issues/25262)
-* **modal:** add canDismiss input binding for angular ([#25240](https://github.com/ionic-team/ionic-framework/issues/25240)) ([bdf0383](https://github.com/ionic-team/ionic-framework/commit/bdf0383b0c9ec4595129a2633760fd4f4788df90)), closes [#25239](https://github.com/ionic-team/ionic-framework/issues/25239)
-* **spinner:** alignment is now correct in rtl ([#25260](https://github.com/ionic-team/ionic-framework/issues/25260)) ([e3c996d](https://github.com/ionic-team/ionic-framework/commit/e3c996dea878a8dd276a0ca99f59b330125f9b75))
-
-
-
-
-
-## [6.1.4](https://github.com/ionic-team/ionic-framework/compare/v6.1.3...v6.1.4) (2022-05-04)
-
-
-### Bug Fixes
-
-* **datetime:** arrow navigation respects min/max values ([#25182](https://github.com/ionic-team/ionic-framework/issues/25182)) ([6946e09](https://github.com/ionic-team/ionic-framework/commit/6946e09815da605e37ff8e4d613a14288ea35fb0)), closes [#25073](https://github.com/ionic-team/ionic-framework/issues/25073)
-* **datetime:** hide footer when month-year picker is open ([#25205](https://github.com/ionic-team/ionic-framework/issues/25205)) ([aa5e1b9](https://github.com/ionic-team/ionic-framework/commit/aa5e1b962150b9ed9629812ec566873784526c83))
-* **modal:** card modal can now be swiped to close on the content ([#25185](https://github.com/ionic-team/ionic-framework/issues/25185)) ([7633ddb](https://github.com/ionic-team/ionic-framework/commit/7633ddbc845745dfe36b5c8025c54c22c083c2f4)), closes [#22046](https://github.com/ionic-team/ionic-framework/issues/22046)
-* **modal:** card modal no longer dismisses from content with refresher ([#25227](https://github.com/ionic-team/ionic-framework/issues/25227)) ([c4f811f](https://github.com/ionic-team/ionic-framework/commit/c4f811f1dde0dcbcdaebaa3a4f5ef87e192b5cc5))
-* **react:** useIonModal/useIonPopover dismiss accepts data and role ([#25209](https://github.com/ionic-team/ionic-framework/issues/25209)) ([68b2f8b](https://github.com/ionic-team/ionic-framework/commit/68b2f8bfe10946580b996e48c4ec1e2df94b8d49)), closes [#25208](https://github.com/ionic-team/ionic-framework/issues/25208)
-* **vue:** switching between tabs and going back resolves to correct route ([#25206](https://github.com/ionic-team/ionic-framework/issues/25206)) ([b4ba70e](https://github.com/ionic-team/ionic-framework/commit/b4ba70ea148d4f8fc7475d3de798b485238470c8)), closes [#24303](https://github.com/ionic-team/ionic-framework/issues/24303)
-
-
-
-
-
-## [6.1.3](https://github.com/ionic-team/ionic-framework/compare/v6.1.2...v6.1.3) (2022-04-27)
-
-
-### Bug Fixes
-
-* **core:** inherit aria attributes on host elements ([#25156](https://github.com/ionic-team/ionic-framework/issues/25156)) ([611832b](https://github.com/ionic-team/ionic-framework/commit/611832b0d51da295c1bf2897972c4e8baf6e23a3)), closes [#20127](https://github.com/ionic-team/ionic-framework/issues/20127)
-* **datetime:** if no default value, don't highlight active day until one is selected ([#25151](https://github.com/ionic-team/ionic-framework/issues/25151)) ([9896939](https://github.com/ionic-team/ionic-framework/commit/98969395abd400cc44d2d3825581a63eb64a56e0))
-* **picker-column-internal:** center active item when rapidly opened ([#25155](https://github.com/ionic-team/ionic-framework/issues/25155)) ([8e17fa9](https://github.com/ionic-team/ionic-framework/commit/8e17fa9d5f9b00139693e34bc93b1f9c718ea3cf)), closes [#25154](https://github.com/ionic-team/ionic-framework/issues/25154)
-* **select:** avoid duplicate dialogs and backdrops when clicking ([#25175](https://github.com/ionic-team/ionic-framework/issues/25175)) ([70d2784](https://github.com/ionic-team/ionic-framework/commit/70d278414eb5124d17c5ffaba5231c6bfd285656)), closes [#25126](https://github.com/ionic-team/ionic-framework/issues/25126)
-* **vue:** canDismiss definition is now exposed ([#25195](https://github.com/ionic-team/ionic-framework/issues/25195)) ([e5e0e24](https://github.com/ionic-team/ionic-framework/commit/e5e0e24f76c15c1a49f759b1a140e337f5393edd))
-* **vue:** replacing routes across nested outlets preserves previous route info ([#25171](https://github.com/ionic-team/ionic-framework/issues/25171)) ([7b71607](https://github.com/ionic-team/ionic-framework/commit/7b716076b66fbb5bd4620ea8ba74318bbbc1b7e8)), closes [#25017](https://github.com/ionic-team/ionic-framework/issues/25017)
-
-
-
-
-
-## [6.1.2](https://github.com/ionic-team/ionic-framework/compare/v6.1.1...v6.1.2) (2022-04-20)
-
-
-### Bug Fixes
-
-* **datetime:** time picker display matches dynamically set value ([#25010](https://github.com/ionic-team/ionic-framework/issues/25010)) ([11493a0](https://github.com/ionic-team/ionic-framework/commit/11493a086a4e3f2a4e9d3acdf5a9d49e810a5ef0)), closes [#24967](https://github.com/ionic-team/ionic-framework/issues/24967)
-* **modal:** add canDismiss option to modal options ([#25144](https://github.com/ionic-team/ionic-framework/issues/25144)) ([2984ddf](https://github.com/ionic-team/ionic-framework/commit/2984ddf111b6acbd9e47ed90830b6522179b6cee)), closes [#25143](https://github.com/ionic-team/ionic-framework/issues/25143)
-
-
-
-
-
-## [6.1.1](https://github.com/ionic-team/ionic-framework/compare/v6.1.0...v6.1.1) (2022-04-15)
-
-
-### Bug Fixes
-
-* **all:** import path is now correct when using ionic in a stencil app ([#25123](https://github.com/ionic-team/ionic-framework/issues/25123)) ([1b407ab](https://github.com/ionic-team/ionic-framework/commit/1b407abdf5d8a2a18b6a2b9daca2d58b7b0f782b)), closes [#25122](https://github.com/ionic-team/ionic-framework/issues/25122)
-* **datetime:** account for 30 and 45 minute timezones when getting current date ([#25120](https://github.com/ionic-team/ionic-framework/issues/25120)) ([96b2003](https://github.com/ionic-team/ionic-framework/commit/96b2003b2bd5089d1faafe262e96c7445c5c3349)), closes [#25112](https://github.com/ionic-team/ionic-framework/issues/25112)
-* **modal, popover:** do not dismiss when ionDismiss is emitted from select ([#25125](https://github.com/ionic-team/ionic-framework/issues/25125)) ([90115db](https://github.com/ionic-team/ionic-framework/commit/90115db98540a5fc67b611ac2742d1221b8e96ff)), closes [#25124](https://github.com/ionic-team/ionic-framework/issues/25124)
-
-
-
-
-
-# [6.1.0 Vanadium](https://github.com/ionic-team/ionic-framework/compare/v6.0.16...v6.1.0) (2022-04-13)
-
-
-### Bug Fixes
-
-* **accordion-group:** only allow keyboard interaction if header is focused ([#25091](https://github.com/ionic-team/ionic-framework/issues/25091)) ([e1b555f](https://github.com/ionic-team/ionic-framework/commit/e1b555f286956574876924068304fc44a78c027c))
-* **datetime:** resolve warnings when importing into Stencil app ([#25106](https://github.com/ionic-team/ionic-framework/issues/25106)) ([a61c004](https://github.com/ionic-team/ionic-framework/commit/a61c004fb0c10d9fb0eca0987edf798386251ec2))
-* **menu:** preserve scroll position when focusing on open ([#25044](https://github.com/ionic-team/ionic-framework/issues/25044)) ([da89684](https://github.com/ionic-team/ionic-framework/commit/da896848776105ba1f7035c4412495786199bade))
-* **popover:** only focus trap ion-item children ([#24990](https://github.com/ionic-team/ionic-framework/issues/24990)) ([0cd06a6](https://github.com/ionic-team/ionic-framework/commit/0cd06a675474e1893b4c0801fab8ab79813537c8)), closes [#24633](https://github.com/ionic-team/ionic-framework/issues/24633)
-* **ripple-effect:** ripple displays on click or touch ([#25102](https://github.com/ionic-team/ionic-framework/issues/25102)) ([2a313e9](https://github.com/ionic-team/ionic-framework/commit/2a313e91179e19660a758470ed2218bbcf03e0bb)), closes [#25094](https://github.com/ionic-team/ionic-framework/issues/25094)
-* **vue:** ensure that only tab pages get added to the tab navigation stack ([#25045](https://github.com/ionic-team/ionic-framework/issues/25045)) ([a0054a7](https://github.com/ionic-team/ionic-framework/commit/a0054a7cbd52def24c18fd2dadfd2e49a42b8980)), closes [#24859](https://github.com/ionic-team/ionic-framework/issues/24859)
-
-
-### Features
-
-* **content, reorder-group, header, footer, infinite-scroll, refresher:** add custom scroll target to improve compatibility with virtual scroll ([#24883](https://github.com/ionic-team/ionic-framework/issues/24883)) ([2a438da](https://github.com/ionic-team/ionic-framework/commit/2a438da010ddd4d4211e1879e27d7b28409daaa2)), closes [#23437](https://github.com/ionic-team/ionic-framework/issues/23437)
-* **datetime:** isDateEnabled to enable/disable specific days  ([#24898](https://github.com/ionic-team/ionic-framework/issues/24898)) ([e932a04](https://github.com/ionic-team/ionic-framework/commit/e932a042237e6f44bf278bcbd895d8569fc17348)), closes [#24209](https://github.com/ionic-team/ionic-framework/issues/24209)
-* **item:** counter formatter to customize counter text display ([#24336](https://github.com/ionic-team/ionic-framework/issues/24336)) ([171020e](https://github.com/ionic-team/ionic-framework/commit/171020e9d200ccfdef0f01c427b295bb50dd1fef)), closes [#24327](https://github.com/ionic-team/ionic-framework/issues/24327)
-* **modal:** ability to programmatically set current sheet breakpoint ([#24648](https://github.com/ionic-team/ionic-framework/issues/24648)) ([3145c76](https://github.com/ionic-team/ionic-framework/commit/3145c76934ac711038f9dcba98a385dfbe754953)), closes [#23917](https://github.com/ionic-team/ionic-framework/issues/23917)
-* **modal:** add canDismiss property to manage modal dismissing ([#24928](https://github.com/ionic-team/ionic-framework/issues/24928)) ([4b21958](https://github.com/ionic-team/ionic-framework/commit/4b21958ec57019afcde786598880e1f8edada2b1)), closes [#22297](https://github.com/ionic-team/ionic-framework/issues/22297)
-* **range:** add knobMoveStart and knobMoveEnd events ([#25011](https://github.com/ionic-team/ionic-framework/issues/25011)) ([f5cb1f8](https://github.com/ionic-team/ionic-framework/commit/f5cb1f8444ba050042e788f9f9ec7b6309bf1b60))
-* **select:** add event for when overlay is dismissed ([#24400](https://github.com/ionic-team/ionic-framework/issues/24400)) ([b835b7c](https://github.com/ionic-team/ionic-framework/commit/b835b7c0c7840f41c54f96743cc0a779ff474ab6))
-
-
-
-
-
 ## [6.0.16](https://github.com/ionic-team/ionic-framework/compare/v6.0.15...v6.0.16) (2022-04-08)
 
 

angular/CHANGELOG.md

@@ -3,102 +3,6 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [6.1.8](https://github.com/ionic-team/ionic/compare/v6.1.7...v6.1.8) (2022-06-01)
-
-**Note:** Version bump only for package @ionic/angular
-
-
-
-
-
-## [6.1.7](https://github.com/ionic-team/ionic/compare/v6.1.6...v6.1.7) (2022-05-26)
-
-
-### Bug Fixes
-
-* **accordion:** accordions expand when using binding ([#25322](https://github.com/ionic-team/ionic/issues/25322)) ([61e571e](https://github.com/ionic-team/ionic/commit/61e571e585ed8ad9b0ca2f98f57bb16616413ba6)), closes [#25307](https://github.com/ionic-team/ionic/issues/25307)
-* **range:** interfaces are now correctly exported ([#25342](https://github.com/ionic-team/ionic/issues/25342)) ([15f0c06](https://github.com/ionic-team/ionic/commit/15f0c0669f7598386edf487f408462b90ed91a08)), closes [#25341](https://github.com/ionic-team/ionic/issues/25341)
-
-
-
-
-
-## [6.1.6](https://github.com/ionic-team/ionic/compare/v6.1.5...v6.1.6) (2022-05-18)
-
-**Note:** Version bump only for package @ionic/angular
-
-
-
-
-
-## [6.1.5](https://github.com/ionic-team/ionic/compare/v6.1.4...v6.1.5) (2022-05-11)
-
-
-### Bug Fixes
-
-* **modal:** add canDismiss input binding for angular ([#25240](https://github.com/ionic-team/ionic/issues/25240)) ([bdf0383](https://github.com/ionic-team/ionic/commit/bdf0383b0c9ec4595129a2633760fd4f4788df90)), closes [#25239](https://github.com/ionic-team/ionic/issues/25239)
-
-
-
-
-
-## [6.1.4](https://github.com/ionic-team/ionic/compare/v6.1.3...v6.1.4) (2022-05-04)
-
-**Note:** Version bump only for package @ionic/angular
-
-
-
-
-
-## [6.1.3](https://github.com/ionic-team/ionic/compare/v6.1.2...v6.1.3) (2022-04-27)
-
-
-### Bug Fixes
-
-* **vue:** canDismiss definition is now exposed ([#25195](https://github.com/ionic-team/ionic/issues/25195)) ([e5e0e24](https://github.com/ionic-team/ionic/commit/e5e0e24f76c15c1a49f759b1a140e337f5393edd))
-
-
-
-
-
-## [6.1.2](https://github.com/ionic-team/ionic/compare/v6.1.1...v6.1.2) (2022-04-20)
-
-**Note:** Version bump only for package @ionic/angular
-
-
-
-
-
-## [6.1.1](https://github.com/ionic-team/ionic/compare/v6.1.0...v6.1.1) (2022-04-15)
-
-**Note:** Version bump only for package @ionic/angular
-
-
-
-
-
-# [6.1.0](https://github.com/ionic-team/ionic/compare/v6.0.14...v6.1.0) (2022-04-13)
-
-
-### Bug Fixes
-
-* **angular:** button components now route correctly without reload ([#25071](https://github.com/ionic-team/ionic/issues/25071)) ([1c26e9b](https://github.com/ionic-team/ionic/commit/1c26e9b9b0fc45a8691e972fe17a168f89a27a79))
-* **angular:** item styling when control has value ([#24932](https://github.com/ionic-team/ionic/issues/24932)) ([eea25d0](https://github.com/ionic-team/ionic/commit/eea25d091d7eb319d6ec1de8b793881d3a10949b)), closes [#23809](https://github.com/ionic-team/ionic/issues/23809)
-* **angular:** routerLink allows opening in a new tab for link elements ([#25014](https://github.com/ionic-team/ionic/issues/25014)) ([b010f07](https://github.com/ionic-team/ionic/commit/b010f077fe51992dd9dd8ced69769a8eb91ac055)), closes [#24413](https://github.com/ionic-team/ionic/issues/24413)
-
-
-### Features
-
-* **datetime:** isDateEnabled to enable/disable specific days  ([#24898](https://github.com/ionic-team/ionic/issues/24898)) ([e932a04](https://github.com/ionic-team/ionic/commit/e932a042237e6f44bf278bcbd895d8569fc17348)), closes [#24209](https://github.com/ionic-team/ionic/issues/24209)
-* **item:** counter formatter to customize counter text display ([#24336](https://github.com/ionic-team/ionic/issues/24336)) ([171020e](https://github.com/ionic-team/ionic/commit/171020e9d200ccfdef0f01c427b295bb50dd1fef)), closes [#24327](https://github.com/ionic-team/ionic/issues/24327)
-* **modal:** ability to programmatically set current sheet breakpoint ([#24648](https://github.com/ionic-team/ionic/issues/24648)) ([3145c76](https://github.com/ionic-team/ionic/commit/3145c76934ac711038f9dcba98a385dfbe754953)), closes [#23917](https://github.com/ionic-team/ionic/issues/23917)
-* **range:** add knobMoveStart and knobMoveEnd events ([#25011](https://github.com/ionic-team/ionic/issues/25011)) ([f5cb1f8](https://github.com/ionic-team/ionic/commit/f5cb1f8444ba050042e788f9f9ec7b6309bf1b60))
-* **select:** add event for when overlay is dismissed ([#24400](https://github.com/ionic-team/ionic/issues/24400)) ([b835b7c](https://github.com/ionic-team/ionic/commit/b835b7c0c7840f41c54f96743cc0a779ff474ab6))
-
-
-
-
-
 ## [6.0.16](https://github.com/ionic-team/ionic/compare/v6.0.15...v6.0.16) (2022-04-08)
 
 

angular/package-lock.json

@@ -1,15 +1,15 @@
 {
   "name": "@ionic/angular",
-  "version": "6.1.8",
+  "version": "6.0.16",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/angular",
-      "version": "6.1.7",
+      "version": "6.0.1",
       "license": "MIT",
       "dependencies": {
-        "@ionic/core": "^6.1.7",
+        "@ionic/core": "6.0.0",
         "jsonc-parser": "^3.0.0",
         "tslib": "^2.0.0"
       },
@@ -1023,11 +1023,11 @@
       "dev": true
     },
     "node_modules/@ionic/core": {
-      "version": "6.1.7",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.1.7.tgz",
-      "integrity": "sha512-CUbH7xtKcPejHTyMvvUJZq4GIyLbL2YflzFH+mad1PoLN4TLwFTTKTDB1oeFNqwnTzaByeBvhEWSayxCbLgvjQ==",
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.0.0.tgz",
+      "integrity": "sha512-3e5EJhDebK4pCiFREpNB95o2kBSAdhRb3eMsBDOCYWYuFlcZEOGOpiGx+kYF/klYVQnB45UXAmR8nCX1indmHQ==",
       "dependencies": {
-        "@stencil/core": "^2.14.2",
+        "@stencil/core": "~2.11.0-0",
         "ionicons": "^6.0.0",
         "tslib": "^2.1.0"
       }
@@ -1222,9 +1222,9 @@
       }
     },
     "node_modules/@stencil/core": {
-      "version": "2.15.1",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.15.1.tgz",
-      "integrity": "sha512-NYjRwQnjzscyFfqK+iIwRdr/dgYn33u6KE7kyQWdi7xsCkqMHalXYgJlN/QBQ9PN3qXmXKeBrJNG8EkNdCbK5g==",
+      "version": "2.11.0",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.11.0.tgz",
+      "integrity": "sha512-/IubCWhVXCguyMUp/3zGrg3c882+RJNg/zpiKfyfJL3kRCOwe+/MD8OoAXVGdd+xAohZKIi1Ik+EHFlsptsjLg==",
       "bin": {
         "stencil": "bin/stencil"
       },
@@ -2048,9 +2048,9 @@
       "dev": true
     },
     "node_modules/commander": {
-      "version": "8.3.0",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz",
-      "integrity": "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==",
+      "version": "8.2.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-8.2.0.tgz",
+      "integrity": "sha512-LLKxDvHeL91/8MIyTAD5BFMNtoIwztGPMiM/7Bl8rIPmHCZXRxmSWr91h57dpOpnQ6jIUqEWdXE/uBYMfiVZDA==",
       "dev": true,
       "engines": {
         "node": ">= 12"
@@ -2308,9 +2308,9 @@
       "dev": true
     },
     "node_modules/debug": {
-      "version": "4.3.3",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.3.tgz",
-      "integrity": "sha512-/zxw5+vh1Tfv+4Qn7a5nsbcJKPaSvCDhojn6FEl9vupwK2VCSDtEiEtqr8DFtzYFOdz63LBkxec7DYuc2jon6Q==",
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.2.tgz",
+      "integrity": "sha512-mOp8wKcvj7XxC78zLgw/ZA+6TSgkoE2C/ienthhRD298T7UNwAg9diBpLRxC0mOezLl4B0xV7M0cCO6P/O0Xhw==",
       "dev": true,
       "dependencies": {
         "ms": "2.1.2"
@@ -7951,11 +7951,11 @@
       "dev": true
     },
     "@ionic/core": {
-      "version": "6.1.7",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.1.7.tgz",
-      "integrity": "sha512-CUbH7xtKcPejHTyMvvUJZq4GIyLbL2YflzFH+mad1PoLN4TLwFTTKTDB1oeFNqwnTzaByeBvhEWSayxCbLgvjQ==",
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.0.0.tgz",
+      "integrity": "sha512-3e5EJhDebK4pCiFREpNB95o2kBSAdhRb3eMsBDOCYWYuFlcZEOGOpiGx+kYF/klYVQnB45UXAmR8nCX1indmHQ==",
       "requires": {
-        "@stencil/core": "^2.14.2",
+        "@stencil/core": "~2.11.0-0",
         "ionicons": "^6.0.0",
         "tslib": "^2.1.0"
       }
@@ -8104,9 +8104,9 @@
       }
     },
     "@stencil/core": {
-      "version": "2.15.1",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.15.1.tgz",
-      "integrity": "sha512-NYjRwQnjzscyFfqK+iIwRdr/dgYn33u6KE7kyQWdi7xsCkqMHalXYgJlN/QBQ9PN3qXmXKeBrJNG8EkNdCbK5g=="
+      "version": "2.11.0",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.11.0.tgz",
+      "integrity": "sha512-/IubCWhVXCguyMUp/3zGrg3c882+RJNg/zpiKfyfJL3kRCOwe+/MD8OoAXVGdd+xAohZKIi1Ik+EHFlsptsjLg=="
     },
     "@types/estree": {
       "version": "0.0.39",
@@ -8667,9 +8667,9 @@
       "dev": true
     },
     "commander": {
-      "version": "8.3.0",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz",
-      "integrity": "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==",
+      "version": "8.2.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-8.2.0.tgz",
+      "integrity": "sha512-LLKxDvHeL91/8MIyTAD5BFMNtoIwztGPMiM/7Bl8rIPmHCZXRxmSWr91h57dpOpnQ6jIUqEWdXE/uBYMfiVZDA==",
       "dev": true
     },
     "commondir": {
@@ -8867,9 +8867,9 @@
       "dev": true
     },
     "debug": {
-      "version": "4.3.3",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.3.tgz",
-      "integrity": "sha512-/zxw5+vh1Tfv+4Qn7a5nsbcJKPaSvCDhojn6FEl9vupwK2VCSDtEiEtqr8DFtzYFOdz63LBkxec7DYuc2jon6Q==",
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.2.tgz",
+      "integrity": "sha512-mOp8wKcvj7XxC78zLgw/ZA+6TSgkoE2C/ienthhRD298T7UNwAg9diBpLRxC0mOezLl4B0xV7M0cCO6P/O0Xhw==",
       "dev": true,
       "requires": {
         "ms": "2.1.2"

angular/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/angular",
-  "version": "6.1.8",
+  "version": "6.0.16",
   "description": "Angular specific wrappers for @ionic/core",
   "keywords": [
     "ionic",
@@ -44,7 +44,7 @@
     "validate": "npm i && npm run lint && npm run test && npm run build"
   },
   "dependencies": {
-    "@ionic/core": "^6.1.8",
+    "@ionic/core": "^6.0.16",
     "jsonc-parser": "^3.0.0",
     "tslib": "^2.0.0"
   },

angular/src/directives/overlays/modal.ts

@@ -11,7 +11,7 @@ import {
   TemplateRef,
 } from '@angular/core';
 import { ProxyCmp, proxyOutputs } from '../angular-component-lib/utils';
-import { Components, ModalBreakpointChangeEventDetail } from '@ionic/core';
+import { Components } from '@ionic/core';
 
 export declare interface IonModal extends Components.IonModal {
   /**
@@ -30,10 +30,6 @@ export declare interface IonModal extends Components.IonModal {
    * Emitted after the modal has dismissed.
    */
   ionModalDidDismiss: EventEmitter<CustomEvent>;
-  /**
-   * Emitted after the modal breakpoint has changed.
-   */
-  ionBreakpointDidChange: EventEmitter<CustomEvent<ModalBreakpointChangeEventDetail>>;
   /**
    * Emitted after the modal has presented. Shorthand for ionModalWillDismiss.
    */
@@ -57,7 +53,6 @@ export declare interface IonModal extends Components.IonModal {
     'backdropBreakpoint',
     'backdropDismiss',
     'breakpoints',
-    'canDismiss',
     'cssClass',
     'enterAnimation',
     'event',
@@ -73,7 +68,7 @@ export declare interface IonModal extends Components.IonModal {
     'translucent',
     'trigger',
   ],
-  methods: ['present', 'dismiss', 'onDidDismiss', 'onWillDismiss', 'setCurrentBreakpoint', 'getCurrentBreakpoint'],
+  methods: ['present', 'dismiss', 'onDidDismiss', 'onWillDismiss'],
 })
 @Component({
   selector: 'ion-modal',
@@ -84,7 +79,6 @@ export declare interface IonModal extends Components.IonModal {
     'backdropBreakpoint',
     'backdropDismiss',
     'breakpoints',
-    'canDismiss',
     'cssClass',
     'enterAnimation',
     'event',
@@ -125,7 +119,6 @@ export class IonModal {
       'ionModalWillPresent',
       'ionModalWillDismiss',
       'ionModalDidDismiss',
-      'ionBreakpointDidChange',
       'didPresent',
       'willPresent',
       'willDismiss',

angular/src/directives/proxies.ts

@@ -464,18 +464,16 @@ import type { ScrollBaseDetail as IContentScrollBaseDetail } from '@ionic/core';
 import type { ScrollDetail as IContentScrollDetail } from '@ionic/core';
 export declare interface IonContent extends Components.IonContent {
   /**
-   * Emitted when the scroll has started. This event is disabled by default.
-Set `scrollEvents` to `true` to enable. 
+   * Emitted when the scroll has started. 
    */
   ionScrollStart: EventEmitter<CustomEvent<IContentScrollBaseDetail>>;
   /**
    * Emitted while scrolling. This event is disabled by default.
-Set `scrollEvents` to `true` to enable. 
+Look at the property: `scrollEvents` 
    */
   ionScroll: EventEmitter<CustomEvent<IContentScrollDetail>>;
   /**
-   * Emitted when the scroll has ended. This event is disabled by default.
-Set `scrollEvents` to `true` to enable. 
+   * Emitted when the scroll has ended. 
    */
   ionScrollEnd: EventEmitter<CustomEvent<IContentScrollBaseDetail>>;
 
@@ -524,14 +522,14 @@ export declare interface IonDatetime extends Components.IonDatetime {
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['cancelText', 'clearText', 'color', 'dayValues', 'disabled', 'doneText', 'firstDayOfWeek', 'hourCycle', 'hourValues', 'isDateEnabled', 'locale', 'max', 'min', 'minuteValues', 'mode', 'monthValues', 'name', 'presentation', 'readonly', 'showClearButton', 'showDefaultButtons', 'showDefaultTimeLabel', 'showDefaultTitle', 'size', 'value', 'yearValues'],
+  inputs: ['cancelText', 'clearText', 'color', 'dayValues', 'disabled', 'doneText', 'firstDayOfWeek', 'hourCycle', 'hourValues', 'locale', 'max', 'min', 'minuteValues', 'mode', 'monthValues', 'name', 'presentation', 'readonly', 'showClearButton', 'showDefaultButtons', 'showDefaultTimeLabel', 'showDefaultTitle', 'size', 'value', 'yearValues'],
   methods: ['confirm', 'reset', 'cancel']
 })
 @Component({
   selector: 'ion-datetime',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['cancelText', 'clearText', 'color', 'dayValues', 'disabled', 'doneText', 'firstDayOfWeek', 'hourCycle', 'hourValues', 'isDateEnabled', 'locale', 'max', 'min', 'minuteValues', 'mode', 'monthValues', 'name', 'presentation', 'readonly', 'showClearButton', 'showDefaultButtons', 'showDefaultTimeLabel', 'showDefaultTitle', 'size', 'value', 'yearValues']
+  inputs: ['cancelText', 'clearText', 'color', 'dayValues', 'disabled', 'doneText', 'firstDayOfWeek', 'hourCycle', 'hourValues', 'locale', 'max', 'min', 'minuteValues', 'mode', 'monthValues', 'name', 'presentation', 'readonly', 'showClearButton', 'showDefaultButtons', 'showDefaultTimeLabel', 'showDefaultTitle', 'size', 'value', 'yearValues']
 })
 export class IonDatetime {
   protected el: HTMLElement;
@@ -836,13 +834,13 @@ export declare interface IonItem extends Components.IonItem {}
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['button', 'color', 'counter', 'counterFormatter', 'detail', 'detailIcon', 'disabled', 'download', 'fill', 'href', 'lines', 'mode', 'rel', 'routerAnimation', 'routerDirection', 'shape', 'target', 'type']
+  inputs: ['button', 'color', 'counter', 'detail', 'detailIcon', 'disabled', 'download', 'fill', 'href', 'lines', 'mode', 'rel', 'routerAnimation', 'routerDirection', 'shape', 'target', 'type']
 })
 @Component({
   selector: 'ion-item',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['button', 'color', 'counter', 'counterFormatter', 'detail', 'detailIcon', 'disabled', 'download', 'fill', 'href', 'lines', 'mode', 'rel', 'routerAnimation', 'routerDirection', 'shape', 'target', 'type']
+  inputs: ['button', 'color', 'counter', 'detail', 'detailIcon', 'disabled', 'download', 'fill', 'href', 'lines', 'mode', 'rel', 'routerAnimation', 'routerDirection', 'shape', 'target', 'type']
 })
 export class IonItem {
   protected el: HTMLElement;
@@ -1274,8 +1272,6 @@ export class IonRadioGroup {
 }
 
 import type { RangeChangeEventDetail as IRangeRangeChangeEventDetail } from '@ionic/core';
-import type { RangeKnobMoveStartEventDetail as IRangeRangeKnobMoveStartEventDetail } from '@ionic/core';
-import type { RangeKnobMoveEndEventDetail as IRangeRangeKnobMoveEndEventDetail } from '@ionic/core';
 export declare interface IonRange extends Components.IonRange {
   /**
    * Emitted when the value property has changed. 
@@ -1289,16 +1285,6 @@ export declare interface IonRange extends Components.IonRange {
    * Emitted when the range loses focus. 
    */
   ionBlur: EventEmitter<CustomEvent<void>>;
-  /**
-   * Emitted when the user starts moving the range knob, whether through
-mouse drag, touch gesture, or keyboard interaction. 
-   */
-  ionKnobMoveStart: EventEmitter<CustomEvent<IRangeRangeKnobMoveStartEventDetail>>;
-  /**
-   * Emitted when the user finishes moving the range knob, whether through
-mouse drag, touch gesture, or keyboard interaction. 
-   */
-  ionKnobMoveEnd: EventEmitter<CustomEvent<IRangeRangeKnobMoveEndEventDetail>>;
 
 }
 
@@ -1317,7 +1303,7 @@ export class IonRange {
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
-    proxyOutputs(this, this.el, ['ionChange', 'ionFocus', 'ionBlur', 'ionKnobMoveStart', 'ionKnobMoveEnd']);
+    proxyOutputs(this, this.el, ['ionChange', 'ionFocus', 'ionBlur']);
   }
 }
 
@@ -1582,10 +1568,6 @@ export declare interface IonSelect extends Components.IonSelect {
    * Emitted when the selection is cancelled. 
    */
   ionCancel: EventEmitter<CustomEvent<void>>;
-  /**
-   * Emitted when the overlay is dismissed. 
-   */
-  ionDismiss: EventEmitter<CustomEvent<void>>;
   /**
    * Emitted when the select has focus. 
    */
@@ -1613,7 +1595,7 @@ export class IonSelect {
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
-    proxyOutputs(this, this.el, ['ionChange', 'ionCancel', 'ionDismiss', 'ionFocus', 'ionBlur']);
+    proxyOutputs(this, this.el, ['ionChange', 'ionCancel', 'ionFocus', 'ionBlur']);
   }
 }
 
@@ -1793,7 +1775,7 @@ export declare interface IonSplitPane extends Components.IonSplitPane {
   /**
    * Expression to be called when the split-pane visibility has changed 
    */
-  ionSplitPaneVisible: EventEmitter<CustomEvent<{ visible: boolean }>>;
+  ionSplitPaneVisible: EventEmitter<CustomEvent<{visible: boolean}>>;
 
 }
 

angular/src/index.ts

@@ -107,10 +107,6 @@ export {
   PopoverOptions,
   RadioGroupCustomEvent,
   RadioGroupChangeEventDetail,
-  RangeCustomEvent,
-  RangeChangeEventDetail,
-  RangeKnobMoveStartEventDetail,
-  RangeKnobMoveEndEventDetail,
   RefresherCustomEvent,
   RefresherEventDetail,
   RouterEventDetail,

angular/test/test-app/e2e/src/accordion.spec.ts

@@ -1,19 +0,0 @@
-describe('Accordion', () => {
-  beforeEach(() => {
-    cy.visit('/accordions');
-  });
-
-  it('should correctly expand on multiple modal opens', () => {
-    cy.get('#open-modal').click();
-
-    cy.get('ion-accordion:first-of-type').should('have.class', 'accordion-expanded');
-    cy.get('ion-accordion:last-of-type').should('not.have.class', 'accordion-expanded');
-
-    cy.get('#dismiss').click();
-
-    cy.get('#open-modal').click();
-
-    cy.get('ion-accordion:first-of-type').should('have.class', 'accordion-expanded');
-    cy.get('ion-accordion:last-of-type').should('not.have.class', 'accordion-expanded');
-  });
-});

angular/test/test-app/e2e/src/modal.spec.ts

@@ -74,22 +74,7 @@ describe('Modals: Inline', () => {
     cy.get('ion-modal').trigger('click', 20, 20);
 
     cy.get('ion-modal').children('.ion-page').should('not.exist');
-  });
-
-  describe('setting the current breakpoint', () => {
-
-    it('should emit ionBreakpointDidChange', () => {
-      cy.get('#open-modal').click();
-
-      cy.get('ion-modal').then(modal => {
-        (modal.get(0) as any).setCurrentBreakpoint(1);
-      });
-
-      cy.get('#breakpointDidChange').should('have.text', '1');
-    });
-
-  });
-
+  })
 });
 
 describe('when in a modal', () => {

angular/test/test-app/src/app/accordion/accordion-modal/accordion-modal.component.html

@@ -1,17 +0,0 @@
-<ion-content>
-  <ion-button id="dismiss" (click)="modal.dismiss()">Dismiss Modal</ion-button>
-  <ion-accordion-group [value]="'a'">
-    <ion-accordion value="a">
-      <ion-item slot="header">
-        <ion-label>A</ion-label>
-      </ion-item>
-      <div slot="content">A content</div>
-    </ion-accordion>
-    <ion-accordion value="b">
-      <ion-item slot="header">
-        <ion-label>B</ion-label>
-      </ion-item>
-      <div slot="content">B content</div>
-    </ion-accordion>
-  </ion-accordion-group>
-</ion-content>

angular/test/test-app/src/app/accordion/accordion-modal/accordion-modal.component.ts

@@ -1,11 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-accordion-modal',
-  templateUrl: './accordion-modal.component.html',
-})
-export class AccordionModalComponent {
-  modal: HTMLIonModalElement;
-
-  constructor() {}
-}

angular/test/test-app/src/app/accordion/accordion.component.html

@@ -1,13 +0,0 @@
-<ion-header>
-  <ion-toolbar>
-    <ion-buttons>
-      <ion-back-button></ion-back-button>
-    </ion-buttons>
-    <ion-title>
-      Accordion test
-    </ion-title>
-  </ion-toolbar>
-</ion-header>
-<ion-content>
-  <ion-button id="open-modal" (click)="open()">Open Modal</ion-button>
-</ion-content>

angular/test/test-app/src/app/accordion/accordion.component.ts

@@ -1,22 +0,0 @@
-import { Component } from '@angular/core';
-import { ModalController } from '@ionic/angular';
-import { AccordionModalComponent } from './accordion-modal/accordion-modal.component';
-
-@Component({
-  selector: 'app-accordion',
-  templateUrl: './accordion.component.html',
-})
-export class AccordionComponent {
-
-  constructor(
-    private modalCtrl: ModalController
-  ) { }
-
-  async open() {
-    const modal = await this.modalCtrl.create({
-      component: AccordionModalComponent,
-      animated: false,
-    });
-    await modal.present();
-  }
-}

angular/test/test-app/src/app/app-routing.module.ts

@@ -20,11 +20,9 @@ import { NavigationPage1Component } from './navigation-page1/navigation-page1.co
 import { NavigationPage2Component } from './navigation-page2/navigation-page2.component';
 import { NavigationPage3Component } from './navigation-page3/navigation-page3.component';
 import { AlertComponent } from './alert/alert.component';
-import { AccordionComponent } from './accordion/accordion.component';
 
 const routes: Routes = [
   { path: '', component: HomePageComponent },
-  { path: 'accordions', component: AccordionComponent },
   { path: 'alerts', component: AlertComponent },
   { path: 'inputs', component: InputsComponent },
   { path: 'form', component: FormComponent },

angular/test/test-app/src/app/app.module.ts

@@ -30,8 +30,6 @@ import { NavigationPage1Component } from './navigation-page1/navigation-page1.co
 import { NavigationPage2Component } from './navigation-page2/navigation-page2.component';
 import { NavigationPage3Component } from './navigation-page3/navigation-page3.component';
 import { AlertComponent } from './alert/alert.component';
-import { AccordionComponent } from './accordion/accordion.component';
-import { AccordionModalComponent } from './accordion/accordion-modal/accordion-modal.component';
 
 @NgModule({
   declarations: [
@@ -58,9 +56,7 @@ import { AccordionModalComponent } from './accordion/accordion-modal/accordion-m
     NavigationPage1Component,
     NavigationPage2Component,
     NavigationPage3Component,
-    AlertComponent,
-    AccordionComponent,
-    AccordionModalComponent
+    AlertComponent
   ],
   imports: [
     BrowserModule.withServerTransition({ appId: 'serverApp' }),

angular/test/test-app/src/app/home-page/home-page.component.html

@@ -62,10 +62,5 @@
           Providers
         </ion-label>
       </ion-item>
-      <ion-item routerLink="/accordions">
-        <ion-label>
-          Accordions Test
-        </ion-label>
-      </ion-item>
     </ion-list>
   </ion-content>

angular/test/test-app/src/app/modal-inline/modal-inline.component.html

@@ -1,13 +1,6 @@
 <ion-button id="open-modal">Open Modal</ion-button>
 
-<ul>
-  <li>
-    breakpointDidChange event count: <span id="breakpointDidChange">{{ breakpointDidChangeCounter }}</span>
-  </li>
-</ul>
-
-<ion-modal [animated]="false" trigger="open-modal" [breakpoints]="[0.1, 0.5, 1]" [initialBreakpoint]="0.5"
-  (ionBreakpointDidChange)="onBreakpointDidChange()">
+<ion-modal [animated]="false" trigger="open-modal" [breakpoints]="[0.1, 0.5, 1]" [initialBreakpoint]="0.5">
   <ng-template>
     <ion-content>
       <ion-list>

angular/test/test-app/src/app/modal-inline/modal-inline.component.ts

@@ -13,15 +13,9 @@ export class ModalInlineComponent implements AfterViewInit {
 
   items: string[] = [];
 
-  breakpointDidChangeCounter = 0;
-
   ngAfterViewInit(): void {
     setTimeout(() => {
       this.items = ['A', 'B', 'C', 'D'];
     }, 1000);
   }
-
-  onBreakpointDidChange() {
-    this.breakpointDidChangeCounter++;
-  }
 }

core/CHANGELOG.md

@@ -3,145 +3,6 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [6.1.8](https://github.com/ionic-team/ionic/compare/v6.1.7...v6.1.8) (2022-06-01)
-
-
-### Bug Fixes
-
-* **all:** improve compatibility with vite ([#25381](https://github.com/ionic-team/ionic/issues/25381)) ([d83bcd2](https://github.com/ionic-team/ionic/commit/d83bcd2b7f9937550008f995ff91517777584373)), closes [#23823](https://github.com/ionic-team/ionic/issues/23823)
-* **item-sliding:** swiping inside of virtual scroller now prevents scrolling ([#25345](https://github.com/ionic-team/ionic/issues/25345)) ([5a1a5f6](https://github.com/ionic-team/ionic/commit/5a1a5f6b4c2ab4059158986e907fff45d03be753))
-* **range:** dragging knob no longer scrolls page ([#25343](https://github.com/ionic-team/ionic/issues/25343)) ([0b92dff](https://github.com/ionic-team/ionic/commit/0b92dffa92c05705ff83518c10608e3dc3651d51)), closes [#19004](https://github.com/ionic-team/ionic/issues/19004)
-
-
-
-
-
-## [6.1.7](https://github.com/ionic-team/ionic/compare/v6.1.6...v6.1.7) (2022-05-26)
-
-
-### Bug Fixes
-
-* **accordion:** accordions expand when using binding ([#25322](https://github.com/ionic-team/ionic/issues/25322)) ([61e571e](https://github.com/ionic-team/ionic/commit/61e571e585ed8ad9b0ca2f98f57bb16616413ba6)), closes [#25307](https://github.com/ionic-team/ionic/issues/25307)
-* **datetime:** don't update value on confirm call if no date was selected ([#25338](https://github.com/ionic-team/ionic/issues/25338)) ([9e5b10a](https://github.com/ionic-team/ionic/commit/9e5b10a2155c6b9de565931da384e0e49aeca7b7))
-* **item, list:** list aria roles are added ([#25336](https://github.com/ionic-team/ionic/issues/25336)) ([311c634](https://github.com/ionic-team/ionic/commit/311c634d20e9e597db676d6f54e4b79cfe742a61)), closes [#19939](https://github.com/ionic-team/ionic/issues/19939)
-* **menu:** rtl menu no longer disappears on ios 15 ([#25309](https://github.com/ionic-team/ionic/issues/25309)) ([6005431](https://github.com/ionic-team/ionic/commit/60054310afbab6151f6c29ff6e74666acd181a41)), closes [#25192](https://github.com/ionic-team/ionic/issues/25192)
-* **modal:** swipe to close on content blocks scroll in ion-nav ([#25300](https://github.com/ionic-team/ionic/issues/25300)) ([fdc55c0](https://github.com/ionic-team/ionic/commit/fdc55c072765c87ad7c783e6d8a238b007f5f3ff)), closes [#25298](https://github.com/ionic-team/ionic/issues/25298)
-* **nav:** swipe to go back works inside card modal ([#25333](https://github.com/ionic-team/ionic/issues/25333)) ([0156be6](https://github.com/ionic-team/ionic/commit/0156be61cbf73b25cb3c2cba1bd20adebbb3db4f)), closes [#25327](https://github.com/ionic-team/ionic/issues/25327)
-* **refresher:** attach scroll listener to custom scroll target ([#25335](https://github.com/ionic-team/ionic/issues/25335)) ([8f5e4cd](https://github.com/ionic-team/ionic/commit/8f5e4cd9350b10a98afb7c98353c6719eee918bb)), closes [#25318](https://github.com/ionic-team/ionic/issues/25318)
-* **types:** improve intellisense with colors ([#25347](https://github.com/ionic-team/ionic/issues/25347)) ([97cfbbb](https://github.com/ionic-team/ionic/commit/97cfbbb65d3e63c32d720e01c7368c68616bb531))
-
-
-
-
-
-## [6.1.6](https://github.com/ionic-team/ionic/compare/v6.1.5...v6.1.6) (2022-05-18)
-
-
-### Bug Fixes
-
-* **loading:** spinner now respects —spinner-color ([#25261](https://github.com/ionic-team/ionic/issues/25261)) ([65f4c74](https://github.com/ionic-team/ionic/commit/65f4c742e7a5e5756f6f72dd853e38e885f90385)), closes [#25180](https://github.com/ionic-team/ionic/issues/25180)
-* **modal:** reset breakpoint to initial breakpoint on present ([#25246](https://github.com/ionic-team/ionic/issues/25246)) ([2557bf3](https://github.com/ionic-team/ionic/commit/2557bf3c3eed9e33e89e07a8d73489da8d81bee3)), closes [#25245](https://github.com/ionic-team/ionic/issues/25245)
-* **scroll-assist:** touch end events continue to bubble on inputs ([#25282](https://github.com/ionic-team/ionic/issues/25282)) ([780f16d](https://github.com/ionic-team/ionic/commit/780f16d9e04ee5aaaf91bb7c6ef15c72cc8aeb45)), closes [#25229](https://github.com/ionic-team/ionic/issues/25229)
-
-
-
-
-
-## [6.1.5](https://github.com/ionic-team/ionic/compare/v6.1.4...v6.1.5) (2022-05-11)
-
-
-### Bug Fixes
-
-* **core:** @axe-core/playwright should be a devDependency ([#25244](https://github.com/ionic-team/ionic/issues/25244)) ([617ec48](https://github.com/ionic-team/ionic/commit/617ec48265157d1502c443395472c21ebdb2989e)), closes [#25242](https://github.com/ionic-team/ionic/issues/25242)
-* **item:** counter has appropriate contrast ([#25266](https://github.com/ionic-team/ionic/issues/25266)) ([750be33](https://github.com/ionic-team/ionic/commit/750be33772e9ba71a3cda35709d17b7912aa68e2)), closes [#25262](https://github.com/ionic-team/ionic/issues/25262)
-* **spinner:** alignment is now correct in rtl ([#25260](https://github.com/ionic-team/ionic/issues/25260)) ([e3c996d](https://github.com/ionic-team/ionic/commit/e3c996dea878a8dd276a0ca99f59b330125f9b75))
-
-
-
-
-
-## [6.1.4](https://github.com/ionic-team/ionic/compare/v6.1.3...v6.1.4) (2022-05-04)
-
-
-### Bug Fixes
-
-* **datetime:** arrow navigation respects min/max values ([#25182](https://github.com/ionic-team/ionic/issues/25182)) ([6946e09](https://github.com/ionic-team/ionic/commit/6946e09815da605e37ff8e4d613a14288ea35fb0)), closes [#25073](https://github.com/ionic-team/ionic/issues/25073)
-* **datetime:** hide footer when month-year picker is open ([#25205](https://github.com/ionic-team/ionic/issues/25205)) ([aa5e1b9](https://github.com/ionic-team/ionic/commit/aa5e1b962150b9ed9629812ec566873784526c83))
-* **modal:** card modal can now be swiped to close on the content ([#25185](https://github.com/ionic-team/ionic/issues/25185)) ([7633ddb](https://github.com/ionic-team/ionic/commit/7633ddbc845745dfe36b5c8025c54c22c083c2f4)), closes [#22046](https://github.com/ionic-team/ionic/issues/22046)
-* **modal:** card modal no longer dismisses from content with refresher ([#25227](https://github.com/ionic-team/ionic/issues/25227)) ([c4f811f](https://github.com/ionic-team/ionic/commit/c4f811f1dde0dcbcdaebaa3a4f5ef87e192b5cc5))
-
-
-
-
-
-## [6.1.3](https://github.com/ionic-team/ionic/compare/v6.1.2...v6.1.3) (2022-04-27)
-
-
-### Bug Fixes
-
-* **core:** inherit aria attributes on host elements ([#25156](https://github.com/ionic-team/ionic/issues/25156)) ([611832b](https://github.com/ionic-team/ionic/commit/611832b0d51da295c1bf2897972c4e8baf6e23a3)), closes [#20127](https://github.com/ionic-team/ionic/issues/20127)
-* **datetime:** if no default value, don't highlight active day until one is selected ([#25151](https://github.com/ionic-team/ionic/issues/25151)) ([9896939](https://github.com/ionic-team/ionic/commit/98969395abd400cc44d2d3825581a63eb64a56e0))
-* **picker-column-internal:** center active item when rapidly opened ([#25155](https://github.com/ionic-team/ionic/issues/25155)) ([8e17fa9](https://github.com/ionic-team/ionic/commit/8e17fa9d5f9b00139693e34bc93b1f9c718ea3cf)), closes [#25154](https://github.com/ionic-team/ionic/issues/25154)
-* **select:** avoid duplicate dialogs and backdrops when clicking ([#25175](https://github.com/ionic-team/ionic/issues/25175)) ([70d2784](https://github.com/ionic-team/ionic/commit/70d278414eb5124d17c5ffaba5231c6bfd285656)), closes [#25126](https://github.com/ionic-team/ionic/issues/25126)
-
-
-
-
-
-## [6.1.2](https://github.com/ionic-team/ionic/compare/v6.1.1...v6.1.2) (2022-04-20)
-
-
-### Bug Fixes
-
-* **datetime:** time picker display matches dynamically set value ([#25010](https://github.com/ionic-team/ionic/issues/25010)) ([11493a0](https://github.com/ionic-team/ionic/commit/11493a086a4e3f2a4e9d3acdf5a9d49e810a5ef0)), closes [#24967](https://github.com/ionic-team/ionic/issues/24967)
-* **modal:** add canDismiss option to modal options ([#25144](https://github.com/ionic-team/ionic/issues/25144)) ([2984ddf](https://github.com/ionic-team/ionic/commit/2984ddf111b6acbd9e47ed90830b6522179b6cee)), closes [#25143](https://github.com/ionic-team/ionic/issues/25143)
-
-
-
-
-
-## [6.1.1](https://github.com/ionic-team/ionic/compare/v6.1.0...v6.1.1) (2022-04-15)
-
-
-### Bug Fixes
-
-* **all:** import path is now correct when using ionic in a stencil app ([#25123](https://github.com/ionic-team/ionic/issues/25123)) ([1b407ab](https://github.com/ionic-team/ionic/commit/1b407abdf5d8a2a18b6a2b9daca2d58b7b0f782b)), closes [#25122](https://github.com/ionic-team/ionic/issues/25122)
-* **datetime:** account for 30 and 45 minute timezones when getting current date ([#25120](https://github.com/ionic-team/ionic/issues/25120)) ([96b2003](https://github.com/ionic-team/ionic/commit/96b2003b2bd5089d1faafe262e96c7445c5c3349)), closes [#25112](https://github.com/ionic-team/ionic/issues/25112)
-* **modal, popover:** do not dismiss when ionDismiss is emitted from select ([#25125](https://github.com/ionic-team/ionic/issues/25125)) ([90115db](https://github.com/ionic-team/ionic/commit/90115db98540a5fc67b611ac2742d1221b8e96ff)), closes [#25124](https://github.com/ionic-team/ionic/issues/25124)
-
-
-
-
-
-# [6.1.0](https://github.com/ionic-team/ionic/compare/v6.0.14...v6.1.0) (2022-04-13)
-
-
-### Bug Fixes
-
-* **accordion-group:** only allow keyboard interaction if header is focused ([#25091](https://github.com/ionic-team/ionic/issues/25091)) ([e1b555f](https://github.com/ionic-team/ionic/commit/e1b555f286956574876924068304fc44a78c027c))
-* **datetime:** resolve warnings when importing into Stencil app ([#25106](https://github.com/ionic-team/ionic/issues/25106)) ([a61c004](https://github.com/ionic-team/ionic/commit/a61c004fb0c10d9fb0eca0987edf798386251ec2))
-* **datetime:** warn when parsing an invalid date value ([#25049](https://github.com/ionic-team/ionic/issues/25049)) ([982dc85](https://github.com/ionic-team/ionic/commit/982dc853befe8ccf54163a0b145e563da06f5dc1))
-* **menu:** preserve scroll position when focusing on open ([#25044](https://github.com/ionic-team/ionic/issues/25044)) ([da89684](https://github.com/ionic-team/ionic/commit/da896848776105ba1f7035c4412495786199bade))
-* **picker-column:** column renders correctly with selected value ([#24988](https://github.com/ionic-team/ionic/issues/24988)) ([8318659](https://github.com/ionic-team/ionic/commit/83186598ed6cf08b0f0421076c4afb3ab53e1e57)), closes [#17664](https://github.com/ionic-team/ionic/issues/17664)
-* **popover:** allow arrow on desktop ([#25056](https://github.com/ionic-team/ionic/issues/25056)) ([bcd00c7](https://github.com/ionic-team/ionic/commit/bcd00c7a6ebb6a00193f04458976ff8b86395215))
-* **popover:** only focus trap ion-item children ([#24990](https://github.com/ionic-team/ionic/issues/24990)) ([0cd06a6](https://github.com/ionic-team/ionic/commit/0cd06a675474e1893b4c0801fab8ab79813537c8)), closes [#24633](https://github.com/ionic-team/ionic/issues/24633)
-* **ripple-effect:** ripple displays on click or touch ([#25102](https://github.com/ionic-team/ionic/issues/25102)) ([2a313e9](https://github.com/ionic-team/ionic/commit/2a313e91179e19660a758470ed2218bbcf03e0bb)), closes [#25094](https://github.com/ionic-team/ionic/issues/25094)
-
-
-### Features
-
-* **content, reorder-group, header, footer, infinite-scroll, refresher:** add custom scroll target to improve compatibility with virtual scroll ([#24883](https://github.com/ionic-team/ionic/issues/24883)) ([2a438da](https://github.com/ionic-team/ionic/commit/2a438da010ddd4d4211e1879e27d7b28409daaa2)), closes [#23437](https://github.com/ionic-team/ionic/issues/23437)
-* **datetime:** isDateEnabled to enable/disable specific days  ([#24898](https://github.com/ionic-team/ionic/issues/24898)) ([e932a04](https://github.com/ionic-team/ionic/commit/e932a042237e6f44bf278bcbd895d8569fc17348)), closes [#24209](https://github.com/ionic-team/ionic/issues/24209)
-* **item:** counter formatter to customize counter text display ([#24336](https://github.com/ionic-team/ionic/issues/24336)) ([171020e](https://github.com/ionic-team/ionic/commit/171020e9d200ccfdef0f01c427b295bb50dd1fef)), closes [#24327](https://github.com/ionic-team/ionic/issues/24327)
-* **modal:** ability to programmatically set current sheet breakpoint ([#24648](https://github.com/ionic-team/ionic/issues/24648)) ([3145c76](https://github.com/ionic-team/ionic/commit/3145c76934ac711038f9dcba98a385dfbe754953)), closes [#23917](https://github.com/ionic-team/ionic/issues/23917)
-* **modal:** add canDismiss property to manage modal dismissing ([#24928](https://github.com/ionic-team/ionic/issues/24928)) ([4b21958](https://github.com/ionic-team/ionic/commit/4b21958ec57019afcde786598880e1f8edada2b1)), closes [#22297](https://github.com/ionic-team/ionic/issues/22297)
-* **range:** add knobMoveStart and knobMoveEnd events ([#25011](https://github.com/ionic-team/ionic/issues/25011)) ([f5cb1f8](https://github.com/ionic-team/ionic/commit/f5cb1f8444ba050042e788f9f9ec7b6309bf1b60))
-* **select:** add event for when overlay is dismissed ([#24400](https://github.com/ionic-team/ionic/issues/24400)) ([b835b7c](https://github.com/ionic-team/ionic/commit/b835b7c0c7840f41c54f96743cc0a779ff474ab6))
-
-
-
-
-
 ## [6.0.16](https://github.com/ionic-team/ionic/compare/v6.0.15...v6.0.16) (2022-04-08)
 
 **Note:** Version bump only for package @ionic/core

core/api.txt

@@ -27,7 +27,7 @@ ion-action-sheet,prop,buttons,(string | ActionSheetButton<any>)[],[],false,false
 ion-action-sheet,prop,cssClass,string | string[] | undefined,undefined,false,false
 ion-action-sheet,prop,enterAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
 ion-action-sheet,prop,header,string | undefined,undefined,false,false
-ion-action-sheet,prop,htmlAttributes,undefined | { [key: string]: any; },undefined,false,false
+ion-action-sheet,prop,htmlAttributes,ActionSheetAttributes | undefined,undefined,false,false
 ion-action-sheet,prop,keyboardClose,boolean,true,false,false
 ion-action-sheet,prop,leaveAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
 ion-action-sheet,prop,mode,"ios" | "md",undefined,false,false
@@ -72,7 +72,7 @@ ion-alert,prop,buttons,(string | AlertButton)[],[],false,false
 ion-alert,prop,cssClass,string | string[] | undefined,undefined,false,false
 ion-alert,prop,enterAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
 ion-alert,prop,header,string | undefined,undefined,false,false
-ion-alert,prop,htmlAttributes,undefined | { [key: string]: any; },undefined,false,false
+ion-alert,prop,htmlAttributes,AlertAttributes | undefined,undefined,false,false
 ion-alert,prop,inputs,AlertInput[],[],false,false
 ion-alert,prop,keyboardClose,boolean,true,false,false
 ion-alert,prop,leaveAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
@@ -103,7 +103,7 @@ ion-avatar,shadow
 ion-avatar,css-prop,--border-radius
 
 ion-back-button,shadow
-ion-back-button,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
+ion-back-button,prop,color,string | undefined,undefined,false,true
 ion-back-button,prop,defaultHref,string | undefined,undefined,false,false
 ion-back-button,prop,disabled,boolean,false,false,true
 ion-back-button,prop,icon,null | string | undefined,undefined,false,false
@@ -154,7 +154,7 @@ ion-backdrop,prop,visible,boolean,true,false,false
 ion-backdrop,event,ionBackdropTap,void,true
 
 ion-badge,shadow
-ion-badge,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
+ion-badge,prop,color,string | undefined,undefined,false,true
 ion-badge,prop,mode,"ios" | "md",undefined,false,false
 ion-badge,css-prop,--background
 ion-badge,css-prop,--color
@@ -165,7 +165,7 @@ ion-badge,css-prop,--padding-top
 
 ion-breadcrumb,shadow
 ion-breadcrumb,prop,active,boolean,false,false,false
-ion-breadcrumb,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,false
+ion-breadcrumb,prop,color,string | undefined,undefined,false,false
 ion-breadcrumb,prop,disabled,boolean,false,false,false
 ion-breadcrumb,prop,download,string | undefined,undefined,false,false
 ion-breadcrumb,prop,href,string | undefined,undefined,false,false
@@ -187,7 +187,7 @@ ion-breadcrumb,part,native
 ion-breadcrumb,part,separator
 
 ion-breadcrumbs,shadow
-ion-breadcrumbs,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,false
+ion-breadcrumbs,prop,color,string | undefined,undefined,false,false
 ion-breadcrumbs,prop,itemsAfterCollapse,number,1,false,false
 ion-breadcrumbs,prop,itemsBeforeCollapse,number,1,false,false
 ion-breadcrumbs,prop,maxItems,number | undefined,undefined,false,false
@@ -198,7 +198,7 @@ ion-breadcrumbs,css-prop,--color
 
 ion-button,shadow
 ion-button,prop,buttonType,string,'button',false,false
-ion-button,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
+ion-button,prop,color,string | undefined,undefined,false,true
 ion-button,prop,disabled,boolean,false,false,true
 ion-button,prop,download,string | undefined,undefined,false,false
 ion-button,prop,expand,"block" | "full" | undefined,undefined,false,true
@@ -245,7 +245,7 @@ ion-buttons,prop,collapse,boolean,false,false,false
 
 ion-card,shadow
 ion-card,prop,button,boolean,false,false,false
-ion-card,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
+ion-card,prop,color,string | undefined,undefined,false,true
 ion-card,prop,disabled,boolean,false,false,false
 ion-card,prop,download,string | undefined,undefined,false,false
 ion-card,prop,href,string | undefined,undefined,false,false
@@ -263,23 +263,23 @@ ion-card-content,none
 ion-card-content,prop,mode,"ios" | "md",undefined,false,false
 
 ion-card-header,shadow
-ion-card-header,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
+ion-card-header,prop,color,string | undefined,undefined,false,true
 ion-card-header,prop,mode,"ios" | "md",undefined,false,false
 ion-card-header,prop,translucent,boolean,false,false,false
 
 ion-card-subtitle,shadow
-ion-card-subtitle,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
+ion-card-subtitle,prop,color,string | undefined,undefined,false,true
 ion-card-subtitle,prop,mode,"ios" | "md",undefined,false,false
 ion-card-subtitle,css-prop,--color
 
 ion-card-title,shadow
-ion-card-title,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
+ion-card-title,prop,color,string | undefined,undefined,false,true
 ion-card-title,prop,mode,"ios" | "md",undefined,false,false
 ion-card-title,css-prop,--color
 
 ion-checkbox,shadow
 ion-checkbox,prop,checked,boolean,false,false,false
-ion-checkbox,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
+ion-checkbox,prop,color,string | undefined,undefined,false,true
 ion-checkbox,prop,disabled,boolean,false,false,false
 ion-checkbox,prop,indeterminate,boolean,false,false,false
 ion-checkbox,prop,mode,"ios" | "md",undefined,false,false
@@ -303,7 +303,7 @@ ion-checkbox,part,container
 ion-checkbox,part,mark
 
 ion-chip,shadow
-ion-chip,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
+ion-chip,prop,color,string | undefined,undefined,false,true
 ion-chip,prop,disabled,boolean,false,false,false
 ion-chip,prop,mode,"ios" | "md",undefined,false,false
 ion-chip,prop,outline,boolean,false,false,false
@@ -344,7 +344,7 @@ ion-col,css-prop,--ion-grid-column-padding-xs
 ion-col,css-prop,--ion-grid-columns
 
 ion-content,shadow
-ion-content,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
+ion-content,prop,color,string | undefined,undefined,false,true
 ion-content,prop,forceOverscroll,boolean | undefined,undefined,false,false
 ion-content,prop,fullscreen,boolean,false,false,false
 ion-content,prop,scrollEvents,boolean,false,false,false
@@ -373,14 +373,13 @@ ion-content,part,scroll
 ion-datetime,shadow
 ion-datetime,prop,cancelText,string,'Cancel',false,false
 ion-datetime,prop,clearText,string,'Clear',false,false
-ion-datetime,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,'primary',false,false
+ion-datetime,prop,color,string | undefined,'primary',false,false
 ion-datetime,prop,dayValues,number | number[] | string | undefined,undefined,false,false
 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,hourCycle,"h12" | "h23" | undefined,undefined,false,false
 ion-datetime,prop,hourValues,number | number[] | string | undefined,undefined,false,false
-ion-datetime,prop,isDateEnabled,((dateIsoString: string) => boolean) | undefined,undefined,false,false
 ion-datetime,prop,locale,string,'default',false,false
 ion-datetime,prop,max,string | undefined,undefined,false,false
 ion-datetime,prop,min,string | undefined,undefined,false,false
@@ -418,7 +417,7 @@ ion-fab,method,close,close() => Promise<void>
 ion-fab-button,shadow
 ion-fab-button,prop,activated,boolean,false,false,false
 ion-fab-button,prop,closeIcon,string,close,false,false
-ion-fab-button,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
+ion-fab-button,prop,color,string | undefined,undefined,false,true
 ion-fab-button,prop,disabled,boolean,false,false,false
 ion-fab-button,prop,download,string | undefined,undefined,false,false
 ion-fab-button,prop,href,string | undefined,undefined,false,false
@@ -515,7 +514,7 @@ ion-input,prop,autocorrect,"off" | "on",'off',false,false
 ion-input,prop,autofocus,boolean,false,false,false
 ion-input,prop,clearInput,boolean,false,false,false
 ion-input,prop,clearOnEdit,boolean | undefined,undefined,false,false
-ion-input,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
+ion-input,prop,color,string | undefined,undefined,false,true
 ion-input,prop,debounce,number,0,false,false
 ion-input,prop,disabled,boolean,false,false,false
 ion-input,prop,enterkeyhint,"done" | "enter" | "go" | "next" | "previous" | "search" | "send" | undefined,undefined,false,false
@@ -555,9 +554,8 @@ ion-input,css-prop,--placeholder-opacity
 
 ion-item,shadow
 ion-item,prop,button,boolean,false,false,false
-ion-item,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
+ion-item,prop,color,string | undefined,undefined,false,true
 ion-item,prop,counter,boolean,false,false,false
-ion-item,prop,counterFormatter,((inputLength: number, maxLength: number) => string) | undefined,undefined,false,false
 ion-item,prop,detail,boolean | undefined,undefined,false,false
 ion-item,prop,detailIcon,string,chevronForward,false,false
 ion-item,prop,disabled,boolean,false,false,false
@@ -611,7 +609,7 @@ ion-item,part,detail-icon
 ion-item,part,native
 
 ion-item-divider,shadow
-ion-item-divider,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
+ion-item-divider,prop,color,string | undefined,undefined,false,true
 ion-item-divider,prop,mode,"ios" | "md",undefined,false,false
 ion-item-divider,prop,sticky,boolean,false,false,false
 ion-item-divider,css-prop,--background
@@ -628,7 +626,7 @@ ion-item-divider,css-prop,--padding-top
 ion-item-group,none
 
 ion-item-option,shadow
-ion-item-option,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
+ion-item-option,prop,color,string | undefined,undefined,false,true
 ion-item-option,prop,disabled,boolean,false,false,false
 ion-item-option,prop,download,string | undefined,undefined,false,false
 ion-item-option,prop,expandable,boolean,false,false,false
@@ -655,7 +653,7 @@ ion-item-sliding,method,open,open(side: Side | undefined) => Promise<void>
 ion-item-sliding,event,ionDrag,any,true
 
 ion-label,scoped
-ion-label,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
+ion-label,prop,color,string | undefined,undefined,false,true
 ion-label,prop,mode,"ios" | "md",undefined,false,false
 ion-label,prop,position,"fixed" | "floating" | "stacked" | undefined,undefined,false,false
 ion-label,css-prop,--color
@@ -667,7 +665,7 @@ ion-list,prop,mode,"ios" | "md",undefined,false,false
 ion-list,method,closeSlidingItems,closeSlidingItems() => Promise<boolean>
 
 ion-list-header,shadow
-ion-list-header,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
+ion-list-header,prop,color,string | undefined,undefined,false,true
 ion-list-header,prop,lines,"full" | "inset" | "none" | undefined,undefined,false,false
 ion-list-header,prop,mode,"ios" | "md",undefined,false,false
 ion-list-header,css-prop,--background
@@ -683,7 +681,7 @@ ion-loading,prop,backdropDismiss,boolean,false,false,false
 ion-loading,prop,cssClass,string | string[] | undefined,undefined,false,false
 ion-loading,prop,duration,number,0,false,false
 ion-loading,prop,enterAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
-ion-loading,prop,htmlAttributes,undefined | { [key: string]: any; },undefined,false,false
+ion-loading,prop,htmlAttributes,LoadingAttributes | undefined,undefined,false,false
 ion-loading,prop,keyboardClose,boolean,true,false,false
 ion-loading,prop,leaveAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
 ion-loading,prop,message,IonicSafeString | string | undefined,undefined,false,false
@@ -739,7 +737,7 @@ ion-menu,part,container
 
 ion-menu-button,shadow
 ion-menu-button,prop,autoHide,boolean,true,false,false
-ion-menu-button,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
+ion-menu-button,prop,color,string | undefined,undefined,false,true
 ion-menu-button,prop,disabled,boolean,false,false,false
 ion-menu-button,prop,menu,string | undefined,undefined,false,false
 ion-menu-button,prop,mode,"ios" | "md",undefined,false,false
@@ -769,10 +767,9 @@ ion-modal,prop,animated,boolean,true,false,false
 ion-modal,prop,backdropBreakpoint,number,0,false,false
 ion-modal,prop,backdropDismiss,boolean,true,false,false
 ion-modal,prop,breakpoints,number[] | undefined,undefined,false,false
-ion-modal,prop,canDismiss,(() => Promise<boolean>) | boolean | undefined,undefined,false,false
 ion-modal,prop,enterAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
 ion-modal,prop,handle,boolean | undefined,undefined,false,false
-ion-modal,prop,htmlAttributes,undefined | { [key: string]: any; },undefined,false,false
+ion-modal,prop,htmlAttributes,ModalAttributes | undefined,undefined,false,false
 ion-modal,prop,initialBreakpoint,number | undefined,undefined,false,false
 ion-modal,prop,isOpen,boolean,false,false,false
 ion-modal,prop,keyboardClose,boolean,true,false,false
@@ -783,14 +780,11 @@ ion-modal,prop,showBackdrop,boolean,true,false,false
 ion-modal,prop,swipeToClose,boolean,false,false,false
 ion-modal,prop,trigger,string | undefined,undefined,false,false
 ion-modal,method,dismiss,dismiss(data?: any, role?: string | undefined) => Promise<boolean>
-ion-modal,method,getCurrentBreakpoint,getCurrentBreakpoint() => Promise<number | undefined>
 ion-modal,method,onDidDismiss,onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>
 ion-modal,method,onWillDismiss,onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>
 ion-modal,method,present,present() => Promise<void>
-ion-modal,method,setCurrentBreakpoint,setCurrentBreakpoint(breakpoint: number) => Promise<void>
 ion-modal,event,didDismiss,OverlayEventDetail<any>,true
 ion-modal,event,didPresent,void,true
-ion-modal,event,ionBreakpointDidChange,ModalBreakpointChangeEventDetail,true
 ion-modal,event,ionModalDidDismiss,OverlayEventDetail<any>,true
 ion-modal,event,ionModalDidPresent,void,true
 ion-modal,event,ionModalWillDismiss,OverlayEventDetail<any>,true
@@ -842,7 +836,7 @@ ion-nav-link,prop,routerAnimation,((baseEl: any, opts?: any) => Animation) | und
 ion-nav-link,prop,routerDirection,"back" | "forward" | "root",'forward',false,false
 
 ion-note,shadow
-ion-note,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
+ion-note,prop,color,string | undefined,undefined,false,true
 ion-note,prop,mode,"ios" | "md",undefined,false,false
 ion-note,css-prop,--color
 
@@ -854,7 +848,7 @@ ion-picker,prop,columns,PickerColumn[],[],false,false
 ion-picker,prop,cssClass,string | string[] | undefined,undefined,false,false
 ion-picker,prop,duration,number,0,false,false
 ion-picker,prop,enterAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
-ion-picker,prop,htmlAttributes,undefined | { [key: string]: any; },undefined,false,false
+ion-picker,prop,htmlAttributes,PickerAttributes | undefined,undefined,false,false
 ion-picker,prop,keyboardClose,boolean,true,false,false
 ion-picker,prop,leaveAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
 ion-picker,prop,mode,"ios" | "md",undefined,false,false
@@ -892,7 +886,7 @@ ion-popover,prop,componentProps,undefined | { [key: string]: any; },undefined,fa
 ion-popover,prop,dismissOnSelect,boolean,false,false,false
 ion-popover,prop,enterAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
 ion-popover,prop,event,any,undefined,false,false
-ion-popover,prop,htmlAttributes,undefined | { [key: string]: any; },undefined,false,false
+ion-popover,prop,htmlAttributes,PopoverAttributes | undefined,undefined,false,false
 ion-popover,prop,isOpen,boolean,false,false,false
 ion-popover,prop,keyboardClose,boolean,true,false,false
 ion-popover,prop,leaveAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
@@ -933,7 +927,7 @@ ion-popover,part,content
 
 ion-progress-bar,shadow
 ion-progress-bar,prop,buffer,number,1,false,false
-ion-progress-bar,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
+ion-progress-bar,prop,color,string | undefined,undefined,false,true
 ion-progress-bar,prop,mode,"ios" | "md",undefined,false,false
 ion-progress-bar,prop,reversed,boolean,false,false,false
 ion-progress-bar,prop,type,"determinate" | "indeterminate",'determinate',false,false
@@ -946,7 +940,7 @@ ion-progress-bar,part,stream
 ion-progress-bar,part,track
 
 ion-radio,shadow
-ion-radio,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
+ion-radio,prop,color,string | undefined,undefined,false,true
 ion-radio,prop,disabled,boolean,false,false,false
 ion-radio,prop,mode,"ios" | "md",undefined,false,false
 ion-radio,prop,name,string,this.inputId,false,false
@@ -967,7 +961,7 @@ ion-radio-group,prop,value,any,undefined,false,false
 ion-radio-group,event,ionChange,RadioGroupChangeEventDetail<any>,true
 
 ion-range,shadow
-ion-range,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
+ion-range,prop,color,string | undefined,undefined,false,true
 ion-range,prop,debounce,number,0,false,false
 ion-range,prop,disabled,boolean,false,false,false
 ion-range,prop,dualKnobs,boolean,false,false,false
@@ -984,8 +978,6 @@ ion-range,prop,value,number | { lower: number; upper: number; },0,false,false
 ion-range,event,ionBlur,void,true
 ion-range,event,ionChange,RangeChangeEventDetail,true
 ion-range,event,ionFocus,void,true
-ion-range,event,ionKnobMoveEnd,RangeKnobMoveEndEventDetail,true
-ion-range,event,ionKnobMoveStart,RangeKnobMoveStartEventDetail,true
 ion-range,css-prop,--bar-background
 ion-range,css-prop,--bar-background-active
 ion-range,css-prop,--bar-border-radius
@@ -1058,7 +1050,7 @@ ion-router,event,ionRouteDidChange,RouterEventDetail,true
 ion-router,event,ionRouteWillChange,RouterEventDetail,true
 
 ion-router-link,shadow
-ion-router-link,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
+ion-router-link,prop,color,string | undefined,undefined,false,true
 ion-router-link,prop,href,string | undefined,undefined,false,false
 ion-router-link,prop,rel,string | undefined,undefined,false,false
 ion-router-link,prop,routerAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
@@ -1081,7 +1073,7 @@ ion-searchbar,prop,autocorrect,"off" | "on",'off',false,false
 ion-searchbar,prop,cancelButtonIcon,string,config.get('backButtonIcon', arrowBackSharp) as string,false,false
 ion-searchbar,prop,cancelButtonText,string,'Cancel',false,false
 ion-searchbar,prop,clearIcon,string | undefined,undefined,false,false
-ion-searchbar,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
+ion-searchbar,prop,color,string | undefined,undefined,false,true
 ion-searchbar,prop,debounce,number,250,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
@@ -1115,7 +1107,7 @@ ion-searchbar,css-prop,--placeholder-font-weight
 ion-searchbar,css-prop,--placeholder-opacity
 
 ion-segment,shadow
-ion-segment,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
+ion-segment,prop,color,string | undefined,undefined,false,true
 ion-segment,prop,disabled,boolean,false,false,false
 ion-segment,prop,mode,"ios" | "md",undefined,false,false
 ion-segment,prop,scrollable,boolean,false,false,false
@@ -1130,7 +1122,7 @@ ion-segment-button,prop,disabled,boolean,false,false,false
 ion-segment-button,prop,layout,"icon-bottom" | "icon-end" | "icon-hide" | "icon-start" | "icon-top" | "label-hide" | undefined,'icon-top',false,false
 ion-segment-button,prop,mode,"ios" | "md",undefined,false,false
 ion-segment-button,prop,type,"button" | "reset" | "submit",'button',false,false
-ion-segment-button,prop,value,string,'ion-sb-' + ids++,false,false
+ion-segment-button,prop,value,string,'ion-sb-' + (ids++),false,false
 ion-segment-button,css-prop,--background
 ion-segment-button,css-prop,--background-checked
 ion-segment-button,css-prop,--background-focused
@@ -1180,7 +1172,6 @@ ion-select,method,open,open(event?: UIEvent | undefined) => Promise<any>
 ion-select,event,ionBlur,void,true
 ion-select,event,ionCancel,void,true
 ion-select,event,ionChange,SelectChangeEventDetail<any>,true
-ion-select,event,ionDismiss,void,true
 ion-select,event,ionFocus,void,true
 ion-select,css-prop,--padding-bottom
 ion-select,css-prop,--padding-end
@@ -1249,7 +1240,7 @@ ion-slides,css-prop,--scroll-bar-background
 ion-slides,css-prop,--scroll-bar-background-active
 
 ion-spinner,shadow
-ion-spinner,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
+ion-spinner,prop,color,string | undefined,undefined,false,true
 ion-spinner,prop,duration,number | undefined,undefined,false,false
 ion-spinner,prop,name,"bubbles" | "circles" | "circular" | "crescent" | "dots" | "lines" | "lines-sharp" | "lines-sharp-small" | "lines-small" | undefined,undefined,false,false
 ion-spinner,prop,paused,boolean,false,false,false
@@ -1271,7 +1262,7 @@ ion-tab,prop,tab,string,undefined,true,false
 ion-tab,method,setActive,setActive() => Promise<void>
 
 ion-tab-bar,shadow
-ion-tab-bar,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
+ion-tab-bar,prop,color,string | undefined,undefined,false,true
 ion-tab-bar,prop,mode,"ios" | "md",undefined,false,false
 ion-tab-bar,prop,selectedTab,string | undefined,undefined,false,false
 ion-tab-bar,prop,translucent,boolean,false,false,false
@@ -1310,7 +1301,7 @@ ion-tabs,event,ionTabsDidChange,{ tab: string; },false
 ion-tabs,event,ionTabsWillChange,{ tab: string; },false
 
 ion-text,shadow
-ion-text,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
+ion-text,prop,color,string | undefined,undefined,false,true
 ion-text,prop,mode,"ios" | "md",undefined,false,false
 
 ion-textarea,scoped
@@ -1318,7 +1309,7 @@ ion-textarea,prop,autoGrow,boolean,false,false,false
 ion-textarea,prop,autocapitalize,string,'none',false,false
 ion-textarea,prop,autofocus,boolean,false,false,false
 ion-textarea,prop,clearOnEdit,boolean,false,false,false
-ion-textarea,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
+ion-textarea,prop,color,string | undefined,undefined,false,true
 ion-textarea,prop,cols,number | undefined,undefined,false,false
 ion-textarea,prop,debounce,number,0,false,false
 ion-textarea,prop,disabled,boolean,false,false,false
@@ -1358,19 +1349,19 @@ ion-thumbnail,css-prop,--border-radius
 ion-thumbnail,css-prop,--size
 
 ion-title,shadow
-ion-title,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
+ion-title,prop,color,string | undefined,undefined,false,true
 ion-title,prop,size,"large" | "small" | undefined,undefined,false,false
 ion-title,css-prop,--color
 
 ion-toast,shadow
 ion-toast,prop,animated,boolean,true,false,false
 ion-toast,prop,buttons,(string | ToastButton)[] | undefined,undefined,false,false
-ion-toast,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
+ion-toast,prop,color,string | undefined,undefined,false,true
 ion-toast,prop,cssClass,string | string[] | undefined,undefined,false,false
 ion-toast,prop,duration,number,0,false,false
 ion-toast,prop,enterAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
 ion-toast,prop,header,string | undefined,undefined,false,false
-ion-toast,prop,htmlAttributes,undefined | { [key: string]: any; },undefined,false,false
+ion-toast,prop,htmlAttributes,ToastAttributes | undefined,undefined,false,false
 ion-toast,prop,icon,string | undefined,undefined,false,false
 ion-toast,prop,keyboardClose,boolean,false,false,false
 ion-toast,prop,leaveAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
@@ -1411,7 +1402,7 @@ ion-toast,part,message
 
 ion-toggle,shadow
 ion-toggle,prop,checked,boolean,false,false,false
-ion-toggle,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
+ion-toggle,prop,color,string | undefined,undefined,false,true
 ion-toggle,prop,disabled,boolean,false,false,false
 ion-toggle,prop,mode,"ios" | "md",undefined,false,false
 ion-toggle,prop,name,string,this.inputId,false,false
@@ -1435,7 +1426,7 @@ ion-toggle,part,handle
 ion-toggle,part,track
 
 ion-toolbar,shadow
-ion-toolbar,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
+ion-toolbar,prop,color,string | undefined,undefined,false,true
 ion-toolbar,prop,mode,"ios" | "md",undefined,false,false
 ion-toolbar,css-prop,--background
 ion-toolbar,css-prop,--border-color

core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/core",
-  "version": "6.1.8",
+  "version": "6.0.16",
   "description": "Base components for Ionic",
   "keywords": [
     "ionic",
@@ -31,12 +31,11 @@
     "loader/"
   ],
   "dependencies": {
-    "@stencil/core": "^2.16.0",
-    "ionicons": "^6.0.2",
+    "@stencil/core": "^2.14.2",
+    "ionicons": "^6.0.0",
     "tslib": "^2.1.0"
   },
   "devDependencies": {
-    "@axe-core/playwright": "^4.4.2",
     "@axe-core/puppeteer": "^4.3.2",
     "@ionic/eslint-config": "^0.3.0",
     "@ionic/prettier-config": "^2.0.0",
@@ -68,7 +67,6 @@
     "puppeteer": "^10.4.0",
     "rollup": "^2.26.4",
     "sass": "^1.26.10",
-    "serve": "^13.0.2",
     "stylelint": "^13.6.1",
     "stylelint-order": "^4.1.0",
     "swiper": "5.4.1",
@@ -76,9 +74,10 @@
   },
   "scripts": {
     "prepublishOnly": "npm run build",
-    "build": "npm run clean && npm run build.css && stencil build --es5 --docs-json dist/docs.json && npm run cdnloader",
+    "build": "npm run clean && npm run build.css && stencil build --docs --es5 --docs-json dist/docs.json && npm run cdnloader",
     "build.css": "npm run css.sass && npm run css.minify",
     "build.debug": "npm run clean && stencil build --debug",
+    "build.docs": "stencil build --docs",
     "build.docs.json": "stencil build --docs-json dist/docs.json",
     "clean": "node scripts/clean.js",
     "cdnloader": "node scripts/copy-cdn-loader.js",

core/playwright.config.ts

@@ -1,33 +1,24 @@
 import type { PlaywrightTestConfig } from '@playwright/test';
-import { devices, expect } from '@playwright/test';
-
-import { matchers } from './src/utils/test/playwright';
-
-expect.extend(matchers);
+import { devices } from '@playwright/test';
 
 const projects = [
   {
-    /**
-     * This is really just desktop Firefox
-     * but with a mobile viewport.
-     */
-    name: 'Mobile Firefox',
+    name: 'chromium',
+
     use: {
-      browserName: 'firefox',
-      /**
-       * This is the Pixel 5 configuration.
-       * We can't use devices['Pixel 5']
-       * because the "isMobile" option is
-       * not supported on Firefox.
-       */
-      viewport: {
-        width: 393,
-        height: 727
-      },
-      screen: {
-        width: 393,
-        height: 851
-      }
+      ...devices['Desktop Chrome'],
+    },
+  },
+  {
+    name: 'firefox',
+    use: {
+      ...devices['Desktop Firefox'],
+    },
+  },
+  {
+    name: 'webkit',
+    use: {
+      ...devices['Desktop Safari'],
     },
   },
   {
@@ -55,16 +46,14 @@ const generateProjects = () => {
         ...project,
         metadata: {
           mode,
-          rtl: false,
-          _testing: true
+          rtl: false
         }
       });
       projectsWithMetadata.push({
         ...project,
         metadata: {
           mode,
-          rtl: true,
-          _testing: true
+          rtl: true
         }
       });
     });
@@ -83,18 +72,11 @@ const config: PlaywrightTestConfig = {
      * Maximum time expect() should wait for the condition to be met.
      * For example in `await expect(locator).toHaveText();`
      */
-    timeout: 5000,
-    toMatchSnapshot: {
-      /**
-       * Increases the maximum allowed pixel difference to account
-       * for slight browser rendering inconsistencies.
-       */
-      maxDiffPixelRatio: 0.05
-    }
+    timeout: 5000
   },
   /* Fail the build on CI if you accidentally left test.only in the source code. */
   forbidOnly: !!process.env.CI,
-  retries: process.env.CI ? 2 : 0,
+  retries: 0,
   /* Opt out of parallel tests on CI. */
   workers: process.env.CI ? 1 : undefined,
   /* Reporter to use. See https://playwright.dev/docs/test-reporters */
@@ -119,9 +101,8 @@ const config: PlaywrightTestConfig = {
   /* Configure projects for major browsers */
   projects: generateProjects(),
   webServer: {
-    command: 'serve -p 3333',
-    port: 3333,
-    reuseExistingServer: !process.env.CI
+    command: 'python3 -m http.server 3333',
+    port: 3333
   }
 };
 

core/src/components.d.ts

@@ -5,10 +5,9 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
-import { AccordionGroupChangeEventDetail, ActionSheetAttributes, ActionSheetButton, AlertButton, AlertInput, AnimationBuilder, AutocompleteTypes, BreadcrumbCollapsedClickEventDetail, CheckboxChangeEventDetail, Color, ComponentProps, ComponentRef, DatetimeChangeEventDetail, DomRenderFn, FooterHeightFn, FrameworkDelegate, HeaderFn, HeaderHeightFn, InputChangeEventDetail, ItemHeightFn, ItemRenderFn, ItemReorderEventDetail, LoadingAttributes, MenuChangeEventDetail, ModalAttributes, ModalBreakpointChangeEventDetail, NavComponent, NavComponentWithProps, NavOptions, OverlayEventDetail, PickerAttributes, PickerButton, PickerColumn, PopoverAttributes, PopoverSize, PositionAlign, PositionReference, PositionSide, RadioGroupChangeEventDetail, RangeChangeEventDetail, RangeKnobMoveEndEventDetail, RangeKnobMoveStartEventDetail, RangeValue, RefresherEventDetail, RouteID, RouterDirection, RouterEventDetail, RouterOutletOptions, RouteWrite, ScrollBaseDetail, ScrollDetail, SearchbarChangeEventDetail, SegmentButtonLayout, SegmentChangeEventDetail, SelectChangeEventDetail, SelectInterface, SelectPopoverOption, Side, SpinnerTypes, StyleEventDetail, SwipeGestureHandler, TabBarChangedEventDetail, TabButtonClickEventDetail, TabButtonLayout, TextareaChangeEventDetail, TextFieldTypes, ToastButton, ToggleChangeEventDetail, TransitionDoneFn, TransitionInstruction, TriggerAction, ViewController } from "./interface";
+import { AccordionGroupChangeEventDetail, ActionSheetAttributes, ActionSheetButton, AlertButton, AlertInput, AnimationBuilder, AutocompleteTypes, BreadcrumbCollapsedClickEventDetail, CheckboxChangeEventDetail, Color, ComponentProps, ComponentRef, DatetimeChangeEventDetail, DomRenderFn, FooterHeightFn, FrameworkDelegate, HeaderFn, HeaderHeightFn, InputChangeEventDetail, ItemHeightFn, ItemRenderFn, ItemReorderEventDetail, LoadingAttributes, MenuChangeEventDetail, ModalAttributes, NavComponent, NavComponentWithProps, NavOptions, OverlayEventDetail, PickerAttributes, PickerButton, PickerColumn, PopoverAttributes, PopoverSize, PositionAlign, PositionReference, PositionSide, RadioGroupChangeEventDetail, RangeChangeEventDetail, RangeValue, RefresherEventDetail, RouteID, RouterDirection, RouterEventDetail, RouterOutletOptions, RouteWrite, ScrollBaseDetail, ScrollDetail, SearchbarChangeEventDetail, SegmentButtonLayout, SegmentChangeEventDetail, SelectChangeEventDetail, SelectInterface, SelectPopoverOption, Side, SpinnerTypes, StyleEventDetail, SwipeGestureHandler, TabBarChangedEventDetail, TabButtonClickEventDetail, TabButtonLayout, TextareaChangeEventDetail, TextFieldTypes, ToastButton, ToggleChangeEventDetail, TransitionDoneFn, TransitionInstruction, TriggerAction, ViewController } from "./interface";
 import { IonicSafeString } from "./utils/sanitization";
 import { AlertAttributes } from "./components/alert/alert-interface";
-import { CounterFormatter } from "./components/item/item-interface";
 import { PickerColumnItem } from "./components/picker-column-internal/picker-column-internal-interfaces";
 import { PickerInternalChangeEventDetail } from "./components/picker-internal/picker-internal-interfaces";
 import { PinFormatter } from "./components/range/range-interface";
@@ -757,10 +756,6 @@ export namespace Components {
           * Values used to create the list of selectable hours. By default the hour values range from `0` to `23` for 24-hour, or `1` to `12` for 12-hour. However, to control exactly which hours to display, the `hourValues` input can take a number, an array of numbers, or a string of comma separated numbers.
          */
         "hourValues"?: number[] | number | string;
-        /**
-          * Returns if an individual date (calendar day) is enabled or disabled.  If `true`, the day will be enabled/interactive. If `false`, the day will be disabled/non-interactive.  The function accepts an ISO 8601 date string of a given day. By default, all days are enabled. Developers can use this function to write custom logic to disable certain days.  The function is called for each rendered calendar day, for the previous, current and next month. Custom implementations should be optimized for performance to avoid jank.
-         */
-        "isDateEnabled"?: (dateIsoString: string) => boolean;
         /**
           * The locale to use for `ion-datetime`. This impacts month and day name formatting. The `'default'` value refers to the default locale set by your device.
          */
@@ -1139,10 +1134,6 @@ export namespace Components {
           * If `true`, a character counter will display the ratio of characters used and the total character limit. Only applies when the `maxlength` property is set on the inner `ion-input` or `ion-textarea`.
          */
         "counter": boolean;
-        /**
-          * A callback used to format the counter text. By default the counter text is set to "itemLength / maxLength".
-         */
-        "counterFormatter"?: CounterFormatter;
         /**
           * If `true`, a detail arrow will appear on the item. Defaults to `false` unless the `mode` is `ios` and an `href` or `button` property is present.
          */
@@ -1514,10 +1505,6 @@ export namespace Components {
           * The breakpoints to use when creating a sheet modal. Each value in the array must be a decimal between 0 and 1 where 0 indicates the modal is fully closed and 1 indicates the modal is fully open. Values are relative to the height of the modal, not the height of the screen. One of the values in this array must be the value of the `initialBreakpoint` property. For example: [0, .25, .5, 1]
          */
         "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.
-         */
-        "canDismiss"?: undefined | boolean | (() => Promise<boolean>);
         /**
           * The component to display inside of the modal.
          */
@@ -1541,10 +1528,6 @@ export namespace Components {
           * Animation to use when the modal is presented.
          */
         "enterAnimation"?: AnimationBuilder;
-        /**
-          * Returns the current breakpoint of a sheet style modal
-         */
-        "getCurrentBreakpoint": () => Promise<number | undefined>;
         /**
           * The horizontal line that displays at the top of a sheet modal. It is `true` by default when setting the `breakpoints` and `initialBreakpoint` properties.
          */
@@ -1591,17 +1574,12 @@ export namespace Components {
           * The element that presented the modal. This is used for card presentation effects and for stacking multiple modals on top of each other. Only applies in iOS mode.
          */
         "presentingElement"?: HTMLElement;
-        /**
-          * Move a sheet style modal to a specific breakpoint. The breakpoint value must be a value defined in your `breakpoints` array.
-         */
-        "setCurrentBreakpoint": (breakpoint: number) => Promise<void>;
         /**
           * If `true`, a backdrop will be displayed behind the modal.
          */
         "showBackdrop": boolean;
         /**
           * If `true`, the modal can be swiped to dismiss. Only applies in iOS mode.
-          * @deprecated - To prevent modals from dismissing, use canDismiss instead.
          */
         "swipeToClose": boolean;
         /**
@@ -2999,7 +2977,7 @@ export namespace Components {
          */
         "checkEnd": () => Promise<void>;
         /**
-          * This method marks a subset of items as dirty, so they can be re-rendered. Items should be marked as dirty any time the content or their style changes.  The subset of items to be updated can are specifying by an offset and a length.
+          * This method marks a subset of items as dirty, so they can be re-rendered. Items should be marked as dirty any time the content or their style changes.  The subset of items to be updated can are specifing by an offset and a length.
          */
         "checkRange": (offset: number, len?: number) => Promise<void>;
         "domRender"?: DomRenderFn;
@@ -4402,15 +4380,15 @@ declare namespace LocalJSX {
          */
         "fullscreen"?: boolean;
         /**
-          * Emitted while scrolling. This event is disabled by default. Set `scrollEvents` to `true` to enable.
+          * Emitted while scrolling. This event is disabled by default. Look at the property: `scrollEvents`
          */
         "onIonScroll"?: (event: CustomEvent<ScrollDetail>) => void;
         /**
-          * Emitted when the scroll has ended. This event is disabled by default. Set `scrollEvents` to `true` to enable.
+          * Emitted when the scroll has ended.
          */
         "onIonScrollEnd"?: (event: CustomEvent<ScrollBaseDetail>) => void;
         /**
-          * Emitted when the scroll has started. This event is disabled by default. Set `scrollEvents` to `true` to enable.
+          * Emitted when the scroll has started.
          */
         "onIonScrollStart"?: (event: CustomEvent<ScrollBaseDetail>) => void;
         /**
@@ -4463,10 +4441,6 @@ declare namespace LocalJSX {
           * Values used to create the list of selectable hours. By default the hour values range from `0` to `23` for 24-hour, or `1` to `12` for 12-hour. However, to control exactly which hours to display, the `hourValues` input can take a number, an array of numbers, or a string of comma separated numbers.
          */
         "hourValues"?: number[] | number | string;
-        /**
-          * Returns if an individual date (calendar day) is enabled or disabled.  If `true`, the day will be enabled/interactive. If `false`, the day will be disabled/non-interactive.  The function accepts an ISO 8601 date string of a given day. By default, all days are enabled. Developers can use this function to write custom logic to disable certain days.  The function is called for each rendered calendar day, for the previous, current and next month. Custom implementations should be optimized for performance to avoid jank.
-         */
-        "isDateEnabled"?: (dateIsoString: string) => boolean;
         /**
           * The locale to use for `ion-datetime`. This impacts month and day name formatting. The `'default'` value refers to the default locale set by your device.
          */
@@ -4885,10 +4859,6 @@ declare namespace LocalJSX {
           * If `true`, a character counter will display the ratio of characters used and the total character limit. Only applies when the `maxlength` property is set on the inner `ion-input` or `ion-textarea`.
          */
         "counter"?: boolean;
-        /**
-          * A callback used to format the counter text. By default the counter text is set to "itemLength / maxLength".
-         */
-        "counterFormatter"?: CounterFormatter;
         /**
           * If `true`, a detail arrow will appear on the item. Defaults to `false` unless the `mode` is `ios` and an `href` or `button` property is present.
          */
@@ -5244,10 +5214,6 @@ declare namespace LocalJSX {
           * The breakpoints to use when creating a sheet modal. Each value in the array must be a decimal between 0 and 1 where 0 indicates the modal is fully closed and 1 indicates the modal is fully open. Values are relative to the height of the modal, not the height of the screen. One of the values in this array must be the value of the `initialBreakpoint` property. For example: [0, .25, .5, 1]
          */
         "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.
-         */
-        "canDismiss"?: undefined | boolean | (() => Promise<boolean>);
         /**
           * The component to display inside of the modal.
          */
@@ -5302,10 +5268,6 @@ declare namespace LocalJSX {
           * Emitted after the modal has presented. Shorthand for ionModalWillDismiss.
          */
         "onDidPresent"?: (event: CustomEvent<void>) => void;
-        /**
-          * Emitted after the modal breakpoint has changed.
-         */
-        "onIonBreakpointDidChange"?: (event: CustomEvent<ModalBreakpointChangeEventDetail>) => void;
         /**
           * Emitted after the modal has dismissed.
          */
@@ -5341,7 +5303,6 @@ declare namespace LocalJSX {
         "showBackdrop"?: boolean;
         /**
           * If `true`, the modal can be swiped to dismiss. Only applies in iOS mode.
-          * @deprecated - To prevent modals from dismissing, use canDismiss instead.
          */
         "swipeToClose"?: boolean;
         /**
@@ -5771,14 +5732,6 @@ declare namespace LocalJSX {
           * Emitted when the range has focus.
          */
         "onIonFocus"?: (event: CustomEvent<void>) => void;
-        /**
-          * Emitted when the user finishes moving the range knob, whether through mouse drag, touch gesture, or keyboard interaction.
-         */
-        "onIonKnobMoveEnd"?: (event: CustomEvent<RangeKnobMoveEndEventDetail>) => void;
-        /**
-          * Emitted when the user starts moving the range knob, whether through mouse drag, touch gesture, or keyboard interaction.
-         */
-        "onIonKnobMoveStart"?: (event: CustomEvent<RangeKnobMoveStartEventDetail>) => void;
         /**
           * Emitted when the styles change.
          */
@@ -6206,10 +6159,6 @@ declare namespace LocalJSX {
           * Emitted when the value has changed.
          */
         "onIonChange"?: (event: CustomEvent<SelectChangeEventDetail>) => void;
-        /**
-          * Emitted when the overlay is dismissed.
-         */
-        "onIonDismiss"?: (event: CustomEvent<void>) => void;
         /**
           * Emitted when the select has focus.
          */

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

@@ -101,17 +101,6 @@ export class AccordionGroup implements ComponentInterface {
       return;
     }
 
-    /**
-     * Make sure focus is in the header, not the body, of the accordion. This ensures
-     * that if there are any interactable elements in the body, their keyboard
-     * interaction doesn't get stolen by the accordion. Example: using up/down keys
-     * in ion-textarea.
-     */
-    const activeAccordionHeader = activeElement.closest('ion-accordion [slot="header"]');
-    if (!activeAccordionHeader) {
-      return;
-    }
-
     const accordionEl =
       activeElement.tagName === 'ION-ACCORDION' ? activeElement : activeElement.closest('ion-accordion');
     if (!accordionEl) {

core/src/components/accordion-group/readme.md

@@ -0,0 +1,53 @@
+# ion-accordion-group
+
+Accordion group is a container for accordion instances. It manages the state of the accordions and provides keyboard navigation.
+
+For more information as well as usage, see the [Accordion Documentation](./accordion)
+
+## Interfaces
+
+### AccordionGroupChangeEventDetail
+
+```typescript
+interface AccordionGroupChangeEventDetail<T = any> {
+  value: T;
+}
+```
+
+### AccordionGroupCustomEvent
+
+While not required, this interface can be used in place of the `CustomEvent` interface for stronger typing with Ionic events emitted from this component.
+
+```typescript
+interface AccordionGroupCustomEvent<T = any> extends CustomEvent {
+  detail: AccordionGroupChangeEventDetail<T>;
+  target: HTMLIonAccordionGroupElement;
+}
+```
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property   | Attribute  | Description                                                                                                                  | Type                                      | Default     |
+| ---------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------- | ----------- |
+| `animated` | `animated` | If `true`, all accordions inside of the accordion group will animate when expanding or collapsing.                           | `boolean`                                 | `true`      |
+| `disabled` | `disabled` | If `true`, the accordion group cannot be interacted with.                                                                    | `boolean`                                 | `false`     |
+| `expand`   | `expand`   | Describes the expansion behavior for each accordion. Possible values are `"compact"` and `"inset"`. Defaults to `"compact"`. | `"compact" \| "inset"`                    | `'compact'` |
+| `mode`     | `mode`     | The mode determines which platform styles to use.                                                                            | `"ios" \| "md"`                           | `undefined` |
+| `multiple` | `multiple` | If `true`, the accordion group can have multiple accordion components expanded at the same time.                             | `boolean \| undefined`                    | `undefined` |
+| `readonly` | `readonly` | If `true`, the accordion group cannot be interacted with, but does not alter the opacity.                                    | `boolean`                                 | `false`     |
+| `value`    | `value`    | The value of the accordion group.                                                                                            | `null \| string \| string[] \| undefined` | `undefined` |
+
+
+## Events
+
+| Event       | Description                                  | Type                                                |
+| ----------- | -------------------------------------------- | --------------------------------------------------- |
+| `ionChange` | Emitted when the value property has changed. | `CustomEvent<AccordionGroupChangeEventDetail<any>>` |
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

core/src/components/accordion/accordion.tsx

@@ -211,8 +211,7 @@ export class Accordion implements ComponentInterface {
   };
 
   private expandAccordion = (initialUpdate = false) => {
-    const { contentEl, contentElWrapper } = this;
-    if (initialUpdate || contentEl === undefined || contentElWrapper === undefined) {
+    if (initialUpdate) {
       this.state = AccordionState.Expanded;
       return;
     }
@@ -221,6 +220,11 @@ export class Accordion implements ComponentInterface {
       return;
     }
 
+    const { contentEl, contentElWrapper } = this;
+    if (contentEl === undefined || contentElWrapper === undefined) {
+      return;
+    }
+
     if (this.currentRaf !== undefined) {
       cancelAnimationFrame(this.currentRaf);
     }
@@ -246,8 +250,7 @@ export class Accordion implements ComponentInterface {
   };
 
   private collapseAccordion = (initialUpdate = false) => {
-    const { contentEl } = this;
-    if (initialUpdate || contentEl === undefined) {
+    if (initialUpdate) {
       this.state = AccordionState.Collapsed;
       return;
     }
@@ -256,6 +259,11 @@ export class Accordion implements ComponentInterface {
       return;
     }
 
+    const { contentEl } = this;
+    if (contentEl === undefined) {
+      return;
+    }
+
     if (this.currentRaf !== undefined) {
       cancelAnimationFrame(this.currentRaf);
     }

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

@@ -5,11 +5,6 @@ const getActiveElementText = async (page) => {
   return page.evaluate((el) => el?.innerText, activeElement);
 };
 
-const getActiveInputID = async (page) => {
-  const activeElement = await page.evaluateHandle(() => document.activeElement);
-  return page.evaluate((el) => el?.closest('ion-input')?.id, activeElement);
-};
-
 test('accordion: a11y', async () => {
   const page = await newE2EPage({
     url: '/src/components/accordion/test/a11y?ionic:_testing=true',
@@ -47,17 +42,4 @@ test('accordion: keyboard navigation', async () => {
 
   await page.keyboard.press('ArrowUp');
   expect(await getActiveElementText(page)).toEqual('Shipping Address');
-
-  // open Shipping Address accordion and move focus to the input inside it
-  await page.keyboard.press('Enter');
-  await page.waitForChanges();
-  await page.keyboard.press('Tab');
-
-  const activeID = await getActiveInputID(page);
-  expect(activeID).toEqual('address1');
-
-  // ensure keyboard interaction doesn't move focus from body
-  await page.keyboard.press('ArrowDown');
-  const activeIDAgain = await getActiveInputID(page);
-  expect(activeIDAgain).toEqual('address1');
 });

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

@@ -86,7 +86,7 @@
             <ion-list slot="content">
               <ion-item>
                 <ion-label>Address 1</ion-label>
-                <ion-input id="address1" type="text"></ion-input>
+                <ion-input type="text"></ion-input>
               </ion-item>
               <ion-item>
                 <ion-label>Address 2</ion-label>

core/src/components/accordion/usage/angular.md

@@ -0,0 +1,302 @@
+```html
+<!-- Basic -->
+<ion-accordion-group>
+  <ion-accordion value="colors">
+    <ion-item slot="header">
+      <ion-label>Colors</ion-label>
+    </ion-item>
+
+    <ion-list slot="content">
+      <ion-item>
+        <ion-label>Red</ion-label>
+      </ion-item>
+      <ion-item>
+        <ion-label>Green</ion-label>
+      </ion-item>
+      <ion-item>
+        <ion-label>Blue</ion-label>
+      </ion-item>
+    </ion-list>
+  </ion-accordion>
+  <ion-accordion value="shapes">
+    <ion-item slot="header">
+      <ion-label>Shapes</ion-label>
+    </ion-item>
+
+    <ion-list slot="content">
+      <ion-item>
+        <ion-label>Circle</ion-label>
+      </ion-item>
+      <ion-item>
+        <ion-label>Triangle</ion-label>
+      </ion-item>
+      <ion-item>
+        <ion-label>Square</ion-label>
+      </ion-item>
+    </ion-list>
+  </ion-accordion>
+  <ion-accordion value="numbers">
+    <ion-item slot="header">
+      <ion-label>Numbers</ion-label>
+    </ion-item>
+
+    <ion-list slot="content">
+      <ion-item>
+        <ion-label>1</ion-label>
+      </ion-item>
+      <ion-item>
+        <ion-label>2</ion-label>
+      </ion-item>
+      <ion-item>
+        <ion-label>3</ion-label>
+      </ion-item>
+    </ion-list>
+  </ion-accordion>
+</ion-accordion-group>
+
+<!-- Custom Icon -->
+<ion-accordion-group>
+  <ion-accordion value="colors" toggle-icon="arrow-down-circle">
+    <ion-item slot="header">
+      <ion-label>Colors</ion-label>
+    </ion-item>
+
+    <ion-list slot="content">
+      <ion-item>
+        <ion-label>Red</ion-label>
+      </ion-item>
+      <ion-item>
+        <ion-label>Green</ion-label>
+      </ion-item>
+      <ion-item>
+        <ion-label>Blue</ion-label>
+      </ion-item>
+    </ion-list>
+  </ion-accordion>
+  <ion-accordion value="shapes" toggle-icon="arrow-down-circle">
+    <ion-item slot="header">
+      <ion-label>Shapes</ion-label>
+    </ion-item>
+
+    <ion-list slot="content">
+      <ion-item>
+        <ion-label>Circle</ion-label>
+      </ion-item>
+      <ion-item>
+        <ion-label>Triangle</ion-label>
+      </ion-item>
+      <ion-item>
+        <ion-label>Square</ion-label>
+      </ion-item>
+    </ion-list>
+  </ion-accordion>
+  <ion-accordion value="numbers" toggle-icon="arrow-down-circle">
+    <ion-item slot="header">
+      <ion-label>Numbers</ion-label>
+    </ion-item>
+
+    <ion-list slot="content">
+      <ion-item>
+        <ion-label>1</ion-label>
+      </ion-item>
+      <ion-item>
+        <ion-label>2</ion-label>
+      </ion-item>
+      <ion-item>
+        <ion-label>3</ion-label>
+      </ion-item>
+    </ion-list>
+  </ion-accordion>
+</ion-accordion-group>
+
+<!-- Open Accordion -->
+<ion-accordion-group value="colors">
+  <ion-accordion value="colors">
+    <ion-item slot="header">
+      <ion-label>Colors</ion-label>
+    </ion-item>
+
+    <ion-list slot="content">
+      <ion-item>
+        <ion-label>Red</ion-label>
+      </ion-item>
+      <ion-item>
+        <ion-label>Green</ion-label>
+      </ion-item>
+      <ion-item>
+        <ion-label>Blue</ion-label>
+      </ion-item>
+    </ion-list>
+  </ion-accordion>
+  <ion-accordion value="shapes">
+    <ion-item slot="header">
+      <ion-label>Shapes</ion-label>
+    </ion-item>
+
+    <ion-list slot="content">
+      <ion-item>
+        <ion-label>Circle</ion-label>
+      </ion-item>
+      <ion-item>
+        <ion-label>Triangle</ion-label>
+      </ion-item>
+      <ion-item>
+        <ion-label>Square</ion-label>
+      </ion-item>
+    </ion-list>
+  </ion-accordion>
+  <ion-accordion value="numbers">
+    <ion-item slot="header">
+      <ion-label>Numbers</ion-label>
+    </ion-item>
+
+    <ion-list slot="content">
+      <ion-item>
+        <ion-label>1</ion-label>
+      </ion-item>
+      <ion-item>
+        <ion-label>2</ion-label>
+      </ion-item>
+      <ion-item>
+        <ion-label>3</ion-label>
+      </ion-item>
+    </ion-list>
+  </ion-accordion>
+</ion-accordion-group>
+
+<!-- Multiple Accordions -->
+<ion-accordion-group [multiple]="true" [value]="['colors', 'numbers']">
+  <ion-accordion value="colors">
+    <ion-item slot="header">
+      <ion-label>Colors</ion-label>
+    </ion-item>
+
+    <ion-list slot="content">
+      <ion-item>
+        <ion-label>Red</ion-label>
+      </ion-item>
+      <ion-item>
+        <ion-label>Green</ion-label>
+      </ion-item>
+      <ion-item>
+        <ion-label>Blue</ion-label>
+      </ion-item>
+    </ion-list>
+  </ion-accordion>
+  <ion-accordion value="shapes">
+    <ion-item slot="header">
+      <ion-label>Shapes</ion-label>
+    </ion-item>
+
+    <ion-list slot="content">
+      <ion-item>
+        <ion-label>Circle</ion-label>
+      </ion-item>
+      <ion-item>
+        <ion-label>Triangle</ion-label>
+      </ion-item>
+      <ion-item>
+        <ion-label>Square</ion-label>
+      </ion-item>
+    </ion-list>
+  </ion-accordion>
+  <ion-accordion value="numbers">
+    <ion-item slot="header">
+      <ion-label>Numbers</ion-label>
+    </ion-item>
+
+    <ion-list slot="content">
+      <ion-item>
+        <ion-label>1</ion-label>
+      </ion-item>
+      <ion-item>
+        <ion-label>2</ion-label>
+      </ion-item>
+      <ion-item>
+        <ion-label>3</ion-label>
+      </ion-item>
+    </ion-list>
+  </ion-accordion>
+</ion-accordion-group>
+```
+
+**component.html**
+```html
+<!-- Getting and setting the state of the accordion group -->
+<ion-accordion-group value="numbers">
+  <ion-accordion value="colors">
+    <ion-item slot="header">
+      <ion-label>Colors</ion-label>
+    </ion-item>
+
+    <ion-list slot="content">
+      <ion-item>
+        <ion-label>Red</ion-label>
+      </ion-item>
+      <ion-item>
+        <ion-label>Green</ion-label>
+      </ion-item>
+      <ion-item>
+        <ion-label>Blue</ion-label>
+      </ion-item>
+    </ion-list>
+  </ion-accordion>
+  <ion-accordion value="shapes">
+    <ion-item slot="header">
+      <ion-label>Shapes</ion-label>
+    </ion-item>
+
+    <ion-list slot="content">
+      <ion-item>
+        <ion-label>Circle</ion-label>
+      </ion-item>
+      <ion-item>
+        <ion-label>Triangle</ion-label>
+      </ion-item>
+      <ion-item>
+        <ion-label>Square</ion-label>
+      </ion-item>
+    </ion-list>
+  </ion-accordion>
+  <ion-accordion value="numbers">
+    <ion-item slot="header">
+      <ion-label>Numbers</ion-label>
+    </ion-item>
+
+    <ion-list slot="content">
+      <ion-item>
+        <ion-label>1</ion-label>
+      </ion-item>
+      <ion-item>
+        <ion-label>2</ion-label>
+      </ion-item>
+      <ion-item>
+        <ion-label>3</ion-label>
+      </ion-item>
+    </ion-list>
+  </ion-accordion>
+</ion-accordion-group>
+
+<ion-button (click)="logAccordionValue()">Log Value of Accordion Group</ion-button>
+<ion-button (click)="closeAccordion()">Close All Accordions</ion-button>
+```
+
+**component.ts**
+```typescript
+import { Component, ViewChild } from '@angular/core';
+import { IonAccordionGroup } from '@ionic/angular';
+
+@Component({…})
+export class MyComponent {
+  @ViewChild(IonAccordionGroup, { static: true }) accordionGroup: IonAccordionGroup;
+  constructor() {}
+  
+  logAccordionValue() {
+    console.log(this.accordionGroup.value);
+  }
+  
+  closeAccordion() {
+    this.accordionGroup.value = undefined;
+  }  
+}
+```

core/src/components/accordion/usage/javascript.md

@@ -0,0 +1,293 @@
+```html
+<!-- Basic -->
+<ion-accordion-group>
+  <ion-accordion value="colors">
+    <ion-item slot="header">
+      <ion-label>Colors</ion-label>
+    </ion-item>
+
+    <ion-list slot="content">
+      <ion-item>
+        <ion-label>Red</ion-label>
+      </ion-item>
+      <ion-item>
+        <ion-label>Green</ion-label>
+      </ion-item>
+      <ion-item>
+        <ion-label>Blue</ion-label>
+      </ion-item>
+    </ion-list>
+  </ion-accordion>
+  <ion-accordion value="shapes">
+    <ion-item slot="header">
+      <ion-label>Shapes</ion-label>
+    </ion-item>
+
+    <ion-list slot="content">
+      <ion-item>
+        <ion-label>Circle</ion-label>
+      </ion-item>
+      <ion-item>
+        <ion-label>Triangle</ion-label>
+      </ion-item>
+      <ion-item>
+        <ion-label>Square</ion-label>
+      </ion-item>
+    </ion-list>
+  </ion-accordion>
+  <ion-accordion value="numbers">
+    <ion-item slot="header">
+      <ion-label>Numbers</ion-label>
+    </ion-item>
+
+    <ion-list slot="content">
+      <ion-item>
+        <ion-label>1</ion-label>
+      </ion-item>
+      <ion-item>
+        <ion-label>2</ion-label>
+      </ion-item>
+      <ion-item>
+        <ion-label>3</ion-label>
+      </ion-item>
+    </ion-list>
+  </ion-accordion>
+</ion-accordion-group>
+
+<!-- Custom Icon -->
+<ion-accordion-group>
+  <ion-accordion value="colors" toggle-icon="arrow-down-circle">
+    <ion-item slot="header">
+      <ion-label>Colors</ion-label>
+    </ion-item>
+
+    <ion-list slot="content">
+      <ion-item>
+        <ion-label>Red</ion-label>
+      </ion-item>
+      <ion-item>
+        <ion-label>Green</ion-label>
+      </ion-item>
+      <ion-item>
+        <ion-label>Blue</ion-label>
+      </ion-item>
+    </ion-list>
+  </ion-accordion>
+  <ion-accordion value="shapes" toggle-icon="arrow-down-circle">
+    <ion-item slot="header">
+      <ion-label>Shapes</ion-label>
+    </ion-item>
+
+    <ion-list slot="content">
+      <ion-item>
+        <ion-label>Circle</ion-label>
+      </ion-item>
+      <ion-item>
+        <ion-label>Triangle</ion-label>
+      </ion-item>
+      <ion-item>
+        <ion-label>Square</ion-label>
+      </ion-item>
+    </ion-list>
+  </ion-accordion>
+  <ion-accordion value="numbers" toggle-icon="arrow-down-circle">
+    <ion-item slot="header">
+      <ion-label>Numbers</ion-label>
+    </ion-item>
+
+    <ion-list slot="content">
+      <ion-item>
+        <ion-label>1</ion-label>
+      </ion-item>
+      <ion-item>
+        <ion-label>2</ion-label>
+      </ion-item>
+      <ion-item>
+        <ion-label>3</ion-label>
+      </ion-item>
+    </ion-list>
+  </ion-accordion>
+</ion-accordion-group>
+
+<!-- Open Accordion -->
+<ion-accordion-group value="colors">
+  <ion-accordion value="colors">
+    <ion-item slot="header">
+      <ion-label>Colors</ion-label>
+    </ion-item>
+
+    <ion-list slot="content">
+      <ion-item>
+        <ion-label>Red</ion-label>
+      </ion-item>
+      <ion-item>
+        <ion-label>Green</ion-label>
+      </ion-item>
+      <ion-item>
+        <ion-label>Blue</ion-label>
+      </ion-item>
+    </ion-list>
+  </ion-accordion>
+  <ion-accordion value="shapes">
+    <ion-item slot="header">
+      <ion-label>Shapes</ion-label>
+    </ion-item>
+
+    <ion-list slot="content">
+      <ion-item>
+        <ion-label>Circle</ion-label>
+      </ion-item>
+      <ion-item>
+        <ion-label>Triangle</ion-label>
+      </ion-item>
+      <ion-item>
+        <ion-label>Square</ion-label>
+      </ion-item>
+    </ion-list>
+  </ion-accordion>
+  <ion-accordion value="numbers">
+    <ion-item slot="header">
+      <ion-label>Numbers</ion-label>
+    </ion-item>
+
+    <ion-list slot="content">
+      <ion-item>
+        <ion-label>1</ion-label>
+      </ion-item>
+      <ion-item>
+        <ion-label>2</ion-label>
+      </ion-item>
+      <ion-item>
+        <ion-label>3</ion-label>
+      </ion-item>
+    </ion-list>
+  </ion-accordion>
+</ion-accordion-group>
+
+<!-- Multiple Accordions -->
+<ion-accordion-group multiple="true" id="multiple">
+  <ion-accordion value="colors">
+    <ion-item slot="header">
+      <ion-label>Colors</ion-label>
+    </ion-item>
+
+    <ion-list slot="content">
+      <ion-item>
+        <ion-label>Red</ion-label>
+      </ion-item>
+      <ion-item>
+        <ion-label>Green</ion-label>
+      </ion-item>
+      <ion-item>
+        <ion-label>Blue</ion-label>
+      </ion-item>
+    </ion-list>
+  </ion-accordion>
+  <ion-accordion value="shapes">
+    <ion-item slot="header">
+      <ion-label>Shapes</ion-label>
+    </ion-item>
+
+    <ion-list slot="content">
+      <ion-item>
+        <ion-label>Circle</ion-label>
+      </ion-item>
+      <ion-item>
+        <ion-label>Triangle</ion-label>
+      </ion-item>
+      <ion-item>
+        <ion-label>Square</ion-label>
+      </ion-item>
+    </ion-list>
+  </ion-accordion>
+  <ion-accordion value="numbers">
+    <ion-item slot="header">
+      <ion-label>Numbers</ion-label>
+    </ion-item>
+
+    <ion-list slot="content">
+      <ion-item>
+        <ion-label>1</ion-label>
+      </ion-item>
+      <ion-item>
+        <ion-label>2</ion-label>
+      </ion-item>
+      <ion-item>
+        <ion-label>3</ion-label>
+      </ion-item>
+    </ion-list>
+  </ion-accordion>
+</ion-accordion-group>
+
+<!-- Getting and setting the state of the accordion group -->
+<ion-accordion-group value="numbers" id="state">
+  <ion-accordion value="colors">
+    <ion-item slot="header">
+      <ion-label>Colors</ion-label>
+    </ion-item>
+
+    <ion-list slot="content">
+      <ion-item>
+        <ion-label>Red</ion-label>
+      </ion-item>
+      <ion-item>
+        <ion-label>Green</ion-label>
+      </ion-item>
+      <ion-item>
+        <ion-label>Blue</ion-label>
+      </ion-item>
+    </ion-list>
+  </ion-accordion>
+  <ion-accordion value="shapes">
+    <ion-item slot="header">
+      <ion-label>Shapes</ion-label>
+    </ion-item>
+
+    <ion-list slot="content">
+      <ion-item>
+        <ion-label>Circle</ion-label>
+      </ion-item>
+      <ion-item>
+        <ion-label>Triangle</ion-label>
+      </ion-item>
+      <ion-item>
+        <ion-label>Square</ion-label>
+      </ion-item>
+    </ion-list>
+  </ion-accordion>
+  <ion-accordion value="numbers">
+    <ion-item slot="header">
+      <ion-label>Numbers</ion-label>
+    </ion-item>
+
+    <ion-list slot="content">
+      <ion-item>
+        <ion-label>1</ion-label>
+      </ion-item>
+      <ion-item>
+        <ion-label>2</ion-label>
+      </ion-item>
+      <ion-item>
+        <ion-label>3</ion-label>
+      </ion-item>
+    </ion-list>
+  </ion-accordion>
+</ion-accordion-group>
+
+<ion-button onclick="logAccordionValue()">Log Value of Accordion Group</ion-button>
+<ion-button onclick="closeAccordion()">Close All Accordions</ion-button>
+
+<script>
+  const accordionGroup = document.querySelector('ion-accordion-group#state');
+  let accordionGroupMultiple = document.querySelector('ion-accordion-group#multiple');
+  
+  accordionGroupMultiple.value = ['colors', 'numbers'];
+  
+  const logAccordionValue = () => {
+    console.log(accordionGroup.value);
+  }
+  const closeAccordion = () => {
+    accordionGroup.value = undefined;
+  }
+</script>
+```

core/src/components/accordion/usage/react.md

@@ -0,0 +1,304 @@
+```tsx
+import React, { useRef } from 'react';
+
+import { IonContent, IonAccordionGroup, IonAccordion, IonItem, IonLabel, IonList, IonPage } from '@ionic/react';
+import { arrowDownCircle } from 'ionicons/icons';
+
+export const AccordionExample: React.FC = () => {
+  const accordionGroupRef = useRef(null);
+  const logAccordionValue = () => {
+    if (accordionGroupRef.current) {
+      console.log(accordionGroupRef.current.value);
+    }
+  }
+  const closeAccordion = () => {
+    if (accordionGroupRef.current) {
+      accordionGroupRef.current.value = undefined;
+    }
+  }
+  
+  return (
+    <IonPage>
+      <IonContent>
+        {/*-- Basic --*/}
+        <IonAccordionGroup>
+          <IonAccordion value="colors">
+            <IonItem slot="header">
+              <IonLabel>Colors</IonLabel>
+            </IonItem>
+      
+            <IonList slot="content">
+              <IonItem>
+                <IonLabel>Red</IonLabel>
+              </IonItem>
+              <IonItem>
+                <IonLabel>Green</IonLabel>
+              </IonItem>
+              <IonItem>
+                <IonLabel>Blue</IonLabel>
+              </IonItem>
+            </IonList>
+          </IonAccordion>
+          <IonAccordion value="shapes">
+            <IonItem slot="header">
+              <IonLabel>Shapes</IonLabel>
+            </IonItem>
+      
+            <IonList slot="content">
+              <IonItem>
+                <IonLabel>Circle</IonLabel>
+              </IonItem>
+              <IonItem>
+                <IonLabel>Triangle</IonLabel>
+              </IonItem>
+              <IonItem>
+                <IonLabel>Square</IonLabel>
+              </IonItem>
+            </IonList>
+          </IonAccordion>
+          <IonAccordion value="numbers">
+            <IonItem slot="header">
+              <IonLabel>Numbers</IonLabel>
+            </IonItem>
+      
+            <IonList slot="content">
+              <IonItem>
+                <IonLabel>1</IonLabel>
+              </IonItem>
+              <IonItem>
+                <IonLabel>2</IonLabel>
+              </IonItem>
+              <IonItem>
+                <IonLabel>3</IonLabel>
+              </IonItem>
+            </IonList>
+          </IonAccordion>
+        </IonAccordionGroup>
+      
+        {/*-- Custom Icon --*/}
+        <IonAccordionGroup>
+          <IonAccordion value="colors" toggleIcon={arrowDownCircle}>
+            <IonItem slot="header">
+              <IonLabel>Colors</IonLabel>
+            </IonItem>
+      
+            <IonList slot="content">
+              <IonItem>
+                <IonLabel>Red</IonLabel>
+              </IonItem>
+              <IonItem>
+                <IonLabel>Green</IonLabel>
+              </IonItem>
+              <IonItem>
+                <IonLabel>Blue</IonLabel>
+              </IonItem>
+            </IonList>
+          </IonAccordion>
+          <IonAccordion value="shapes" toggleIcon={arrowDownCircle}>
+            <IonItem slot="header">
+              <IonLabel>Shapes</IonLabel>
+            </IonItem>
+      
+            <IonList slot="content">
+              <IonItem>
+                <IonLabel>Circle</IonLabel>
+              </IonItem>
+              <IonItem>
+                <IonLabel>Triangle</IonLabel>
+              </IonItem>
+              <IonItem>
+                <IonLabel>Square</IonLabel>
+              </IonItem>
+            </IonList>
+          </IonAccordion>
+          <IonAccordion value="numbers" toggleIcon={arrowDownCircle}>
+            <IonItem slot="header">
+              <IonLabel>Numbers</IonLabel>
+            </IonItem>
+      
+            <IonList slot="content">
+              <IonItem>
+                <IonLabel>1</IonLabel>
+              </IonItem>
+              <IonItem>
+                <IonLabel>2</IonLabel>
+              </IonItem>
+              <IonItem>
+                <IonLabel>3</IonLabel>
+              </IonItem>
+            </IonList>
+          </IonAccordion>
+        </IonAccordionGroup>
+      
+        {/*-- Open Accordion --*/}
+        <IonAccordionGroup value="colors">
+          <IonAccordion value="colors">
+            <IonItem slot="header">
+              <IonLabel>Colors</IonLabel>
+            </IonItem>
+      
+            <IonList slot="content">
+              <IonItem>
+                <IonLabel>Red</IonLabel>
+              </IonItem>
+              <IonItem>
+                <IonLabel>Green</IonLabel>
+              </IonItem>
+              <IonItem>
+                <IonLabel>Blue</IonLabel>
+              </IonItem>
+            </IonList>
+          </IonAccordion>
+          <IonAccordion value="shapes">
+            <IonItem slot="header">
+              <IonLabel>Shapes</IonLabel>
+            </IonItem>
+      
+            <IonList slot="content">
+              <IonItem>
+                <IonLabel>Circle</IonLabel>
+              </IonItem>
+              <IonItem>
+                <IonLabel>Triangle</IonLabel>
+              </IonItem>
+              <IonItem>
+                <IonLabel>Square</IonLabel>
+              </IonItem>
+            </IonList>
+          </IonAccordion>
+          <IonAccordion value="numbers">
+            <IonItem slot="header">
+              <IonLabel>Numbers</IonLabel>
+            </IonItem>
+      
+            <IonList slot="content">
+              <IonItem>
+                <IonLabel>1</IonLabel>
+              </IonItem>
+              <IonItem>
+                <IonLabel>2</IonLabel>
+              </IonItem>
+              <IonItem>
+                <IonLabel>3</IonLabel>
+              </IonItem>
+            </IonList>
+          </IonAccordion>
+        </IonAccordionGroup>
+      
+        {/*-- Multiple Accordions --*/}
+        <IonAccordionGroup multiple={true} value={['colors', 'numbers']}>
+          <IonAccordion value="colors">
+            <IonItem slot="header">
+              <IonLabel>Colors</IonLabel>
+            </IonItem>
+      
+            <IonList slot="content">
+              <IonItem>
+                <IonLabel>Red</IonLabel>
+              </IonItem>
+              <IonItem>
+                <IonLabel>Green</IonLabel>
+              </IonItem>
+              <IonItem>
+                <IonLabel>Blue</IonLabel>
+              </IonItem>
+            </IonList>
+          </IonAccordion>
+          <IonAccordion value="shapes">
+            <IonItem slot="header">
+              <IonLabel>Shapes</IonLabel>
+            </IonItem>
+      
+            <IonList slot="content">
+              <IonItem>
+                <IonLabel>Circle</IonLabel>
+              </IonItem>
+              <IonItem>
+                <IonLabel>Triangle</IonLabel>
+              </IonItem>
+              <IonItem>
+                <IonLabel>Square</IonLabel>
+              </IonItem>
+            </IonList>
+          </IonAccordion>
+          <IonAccordion value="numbers">
+            <IonItem slot="header">
+              <IonLabel>Numbers</IonLabel>
+            </IonItem>
+      
+            <IonList slot="content">
+              <IonItem>
+                <IonLabel>1</IonLabel>
+              </IonItem>
+              <IonItem>
+                <IonLabel>2</IonLabel>
+              </IonItem>
+              <IonItem>
+                <IonLabel>3</IonLabel>
+              </IonItem>
+            </IonList>
+          </IonAccordion>
+        </IonAccordionGroup>
+        
+        {/*-- Getting and setting the state of the accordion group --*/}
+        <IonAccordionGroup value="numbers" ref={accordionGroupRef}>
+          <IonAccordion value="colors">
+            <IonItem slot="header">
+              <IonLabel>Colors</IonLabel>
+            </IonItem>
+      
+            <IonList slot="content">
+              <IonItem>
+                <IonLabel>Red</IonLabel>
+              </IonItem>
+              <IonItem>
+                <IonLabel>Green</IonLabel>
+              </IonItem>
+              <IonItem>
+                <IonLabel>Blue</IonLabel>
+              </IonItem>
+            </IonList>
+          </IonAccordion>
+          <IonAccordion value="shapes">
+            <IonItem slot="header">
+              <IonLabel>Shapes</IonLabel>
+            </IonItem>
+      
+            <IonList slot="content">
+              <IonItem>
+                <IonLabel>Circle</IonLabel>
+              </IonItem>
+              <IonItem>
+                <IonLabel>Triangle</IonLabel>
+              </IonItem>
+              <IonItem>
+                <IonLabel>Square</IonLabel>
+              </IonItem>
+            </IonList>
+          </IonAccordion>
+          <IonAccordion value="numbers">
+            <IonItem slot="header">
+              <IonLabel>Numbers</IonLabel>
+            </IonItem>
+      
+            <IonList slot="content">
+              <IonItem>
+                <IonLabel>1</IonLabel>
+              </IonItem>
+              <IonItem>
+                <IonLabel>2</IonLabel>
+              </IonItem>
+              <IonItem>
+                <IonLabel>3</IonLabel>
+              </IonItem>
+            </IonList>
+          </IonAccordion>
+        </IonAccordionGroup>
+        
+        <IonButton onClick={() => logAccordionValue()}>Log Value of Accordion Group</IonButton>
+        <IonButton onClick={() => closeAccordion()}>Close All Accordions</IonButton>
+      </IonContent>
+    </IonPage>
+  )
+);
+```

core/src/components/accordion/usage/stencil.md

@@ -0,0 +1,307 @@
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'accordion-example',
+  styleUrl: 'accordion-example.css'
+})
+export const AccordionExample {
+  private accordionGroupRef?: HTMLIonAccordionGroupEl;
+  
+  private logAccordionValue = () => {
+    const { accordionGroupRef } = this;
+    if (accordionGroupRef) {
+      console.log(accordionGroupRef.value);
+    }
+  }
+  
+  private closeAccordion = () => {
+    const { accordionGroupRef } = this;
+    if (accordionGroupRef) {
+      accordionGroupRef.value = undefined;
+    }
+  }
+  
+  render() {
+    return [
+      // Basic
+      <ion-accordion-group>
+        <ion-accordion value="colors">
+          <ion-item slot="header">
+            <ion-label>Colors</ion-label>
+          </ion-item>
+
+          <ion-list slot="content">
+            <ion-item>
+              <ion-label>Red</ion-label>
+            </ion-item>
+            <ion-item>
+              <ion-label>Green</ion-label>
+            </ion-item>
+            <ion-item>
+              <ion-label>Blue</ion-label>
+            </ion-item>
+          </ion-list>
+        </ion-accordion>
+        <ion-accordion value="shapes">
+          <ion-item slot="header">
+            <ion-label>Shapes</ion-label>
+          </ion-item>
+
+          <ion-list slot="content">
+            <ion-item>
+              <ion-label>Circle</ion-label>
+            </ion-item>
+            <ion-item>
+              <ion-label>Triangle</ion-label>
+            </ion-item>
+            <ion-item>
+              <ion-label>Square</ion-label>
+            </ion-item>
+          </ion-list>
+        </ion-accordion>
+        <ion-accordion value="numbers">
+          <ion-item slot="header">
+            <ion-label>Numbers</ion-label>
+          </ion-item>
+
+          <ion-list slot="content">
+            <ion-item>
+              <ion-label>1</ion-label>
+            </ion-item>
+            <ion-item>
+              <ion-label>2</ion-label>
+            </ion-item>
+            <ion-item>
+              <ion-label>3</ion-label>
+            </ion-item>
+          </ion-list>
+        </ion-accordion>
+      </ion-accordion-group>,
+
+      // Custom Icon
+      <ion-accordion-group>
+        <ion-accordion value="colors" toggle-icon="arrow-down-circle">
+          <ion-item slot="header">
+            <ion-label>Colors</ion-label>
+          </ion-item>
+
+          <ion-list slot="content">
+            <ion-item>
+              <ion-label>Red</ion-label>
+            </ion-item>
+            <ion-item>
+              <ion-label>Green</ion-label>
+            </ion-item>
+            <ion-item>
+              <ion-label>Blue</ion-label>
+            </ion-item>
+          </ion-list>
+        </ion-accordion>
+        <ion-accordion value="shapes" toggle-icon="arrow-down-circle">
+          <ion-item slot="header">
+            <ion-label>Shapes</ion-label>
+          </ion-item>
+
+          <ion-list slot="content">
+            <ion-item>
+              <ion-label>Circle</ion-label>
+            </ion-item>
+            <ion-item>
+              <ion-label>Triangle</ion-label>
+            </ion-item>
+            <ion-item>
+              <ion-label>Square</ion-label>
+            </ion-item>
+          </ion-list>
+        </ion-accordion>
+        <ion-accordion value="numbers" toggle-icon="arrow-down-circle">
+          <ion-item slot="header">
+            <ion-label>Numbers</ion-label>
+          </ion-item>
+
+          <ion-list slot="content">
+            <ion-item>
+              <ion-label>1</ion-label>
+            </ion-item>
+            <ion-item>
+              <ion-label>2</ion-label>
+            </ion-item>
+            <ion-item>
+              <ion-label>3</ion-label>
+            </ion-item>
+          </ion-list>
+        </ion-accordion>
+      </ion-accordion-group>,
+
+      // Open Accordion
+      <ion-accordion-group value="colors">
+        <ion-accordion value="colors">
+          <ion-item slot="header">
+            <ion-label>Colors</ion-label>
+          </ion-item>
+
+          <ion-list slot="content">
+            <ion-item>
+              <ion-label>Red</ion-label>
+            </ion-item>
+            <ion-item>
+              <ion-label>Green</ion-label>
+            </ion-item>
+            <ion-item>
+              <ion-label>Blue</ion-label>
+            </ion-item>
+          </ion-list>
+        </ion-accordion>
+        <ion-accordion value="shapes">
+          <ion-item slot="header">
+            <ion-label>Shapes</ion-label>
+          </ion-item>
+
+          <ion-list slot="content">
+            <ion-item>
+              <ion-label>Circle</ion-label>
+            </ion-item>
+            <ion-item>
+              <ion-label>Triangle</ion-label>
+            </ion-item>
+            <ion-item>
+              <ion-label>Square</ion-label>
+            </ion-item>
+          </ion-list>
+        </ion-accordion>
+        <ion-accordion value="numbers">
+          <ion-item slot="header">
+            <ion-label>Numbers</ion-label>
+          </ion-item>
+
+          <ion-list slot="content">
+            <ion-item>
+              <ion-label>1</ion-label>
+            </ion-item>
+            <ion-item>
+              <ion-label>2</ion-label>
+            </ion-item>
+            <ion-item>
+              <ion-label>3</ion-label>
+            </ion-item>
+          </ion-list>
+        </ion-accordion>
+      </ion-accordion-group>,
+
+      // Multiple Accordions
+      <ion-accordion-group multiple={true} value={['colors', 'numbers']}>
+        <ion-accordion value="colors">
+          <ion-item slot="header">
+            <ion-label>Colors</ion-label>
+          </ion-item>
+
+          <ion-list slot="content">
+            <ion-item>
+              <ion-label>Red</ion-label>
+            </ion-item>
+            <ion-item>
+              <ion-label>Green</ion-label>
+            </ion-item>
+            <ion-item>
+              <ion-label>Blue</ion-label>
+            </ion-item>
+          </ion-list>
+        </ion-accordion>
+        <ion-accordion value="shapes">
+          <ion-item slot="header">
+            <ion-label>Shapes</ion-label>
+          </ion-item>
+
+          <ion-list slot="content">
+            <ion-item>
+              <ion-label>Circle</ion-label>
+            </ion-item>
+            <ion-item>
+              <ion-label>Triangle</ion-label>
+            </ion-item>
+            <ion-item>
+              <ion-label>Square</ion-label>
+            </ion-item>
+          </ion-list>
+        </ion-accordion>
+        <ion-accordion value="numbers">
+          <ion-item slot="header">
+            <ion-label>Numbers</ion-label>
+          </ion-item>
+
+          <ion-list slot="content">
+            <ion-item>
+              <ion-label>1</ion-label>
+            </ion-item>
+            <ion-item>
+              <ion-label>2</ion-label>
+            </ion-item>
+            <ion-item>
+              <ion-label>3</ion-label>
+            </ion-item>
+          </ion-list>
+        </ion-accordion>
+      </ion-accordion-group>,
+      
+      {/* Getting and setting the state of the accordion group */}
+      <ion-accordion-group value="numbers" ref={el => this.accordionGroupRef = el}>
+        <ion-accordion value="colors">
+          <ion-item slot="header">
+            <ion-label>Colors</ion-label>
+          </ion-item>
+      
+          <ion-list slot="content">
+            <ion-item>
+              <ion-label>Red</ion-label>
+            </ion-item>
+            <ion-item>
+              <ion-label>Green</ion-label>
+            </ion-item>
+            <ion-item>
+              <ion-label>Blue</ion-label>
+            </ion-item>
+          </ion-list>
+        </ion-accordion>
+        <ion-accordion value="shapes">
+          <ion-item slot="header">
+            <ion-label>Shapes</ion-label>
+          </ion-item>
+      
+          <ion-list slot="content">
+            <ion-item>
+              <ion-label>Circle</ion-label>
+            </ion-item>
+            <ion-item>
+              <ion-label>Triangle</ion-label>
+            </ion-item>
+            <ion-item>
+              <ion-label>Square</ion-label>
+            </ion-item>
+          </ion-list>
+        </ion-accordion>
+        <ion-accordion value="numbers">
+          <ion-item slot="header">
+            <ion-label>Numbers</ion-label>
+          </ion-item>
+      
+          <ion-list slot="content">
+            <ion-item>
+              <ion-label>1</ion-label>
+            </ion-item>
+            <ion-item>
+              <ion-label>2</ion-label>
+            </ion-item>
+            <ion-item>
+              <ion-label>3</ion-label>
+            </ion-item>
+          </ion-list>
+        </ion-accordion>
+      </ion-accordion-group>,
+      
+      <ion-button onClick={() => logAccordionValue()}>Log Value of Accordion Group</ion-button>,
+      <ion-button onClick={() => closeAccordion()}>Close All Accordions</ion-button>,
+    ];
+  }
+);
+```

core/src/components/accordion/usage/vue.md

@@ -0,0 +1,310 @@
+```html
+<template>
+  <!-- Basic -->
+  <ion-accordion-group>
+    <ion-accordion value="colors">
+      <ion-item slot="header">
+        <ion-label>Colors</ion-label>
+      </ion-item>
+
+      <ion-list slot="content">
+        <ion-item>
+          <ion-label>Red</ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-label>Green</ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-label>Blue</ion-label>
+        </ion-item>
+      </ion-list>
+    </ion-accordion>
+    <ion-accordion value="shapes">
+      <ion-item slot="header">
+        <ion-label>Shapes</ion-label>
+      </ion-item>
+
+      <ion-list slot="content">
+        <ion-item>
+          <ion-label>Circle</ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-label>Triangle</ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-label>Square</ion-label>
+        </ion-item>
+      </ion-list>
+    </ion-accordion>
+    <ion-accordion value="numbers">
+      <ion-item slot="header">
+        <ion-label>Numbers</ion-label>
+      </ion-item>
+
+      <ion-list slot="content">
+        <ion-item>
+          <ion-label>1</ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-label>2</ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-label>3</ion-label>
+        </ion-item>
+      </ion-list>
+    </ion-accordion>
+  </ion-accordion-group>
+
+  <!-- Custom Icon -->
+  <ion-accordion-group>
+    <ion-accordion value="colors" :toggle-icon="arrowDownCircle">
+      <ion-item slot="header">
+        <ion-label>Colors</ion-label>
+      </ion-item>
+
+      <ion-list slot="content">
+        <ion-item>
+          <ion-label>Red</ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-label>Green</ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-label>Blue</ion-label>
+        </ion-item>
+      </ion-list>
+    </ion-accordion>
+    <ion-accordion value="shapes" :toggle-icon="arrowDownCircle">
+      <ion-item slot="header">
+        <ion-label>Shapes</ion-label>
+      </ion-item>
+
+      <ion-list slot="content">
+        <ion-item>
+          <ion-label>Circle</ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-label>Triangle</ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-label>Square</ion-label>
+        </ion-item>
+      </ion-list>
+    </ion-accordion>
+    <ion-accordion value="numbers" :toggle-icon="arrowDownCircle">
+      <ion-item slot="header">
+        <ion-label>Numbers</ion-label>
+      </ion-item>
+
+      <ion-list slot="content">
+        <ion-item>
+          <ion-label>1</ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-label>2</ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-label>3</ion-label>
+        </ion-item>
+      </ion-list>
+    </ion-accordion>
+  </ion-accordion-group>
+
+  <!-- Open Accordion -->
+  <ion-accordion-group value="colors">
+    <ion-accordion value="colors">
+      <ion-item slot="header">
+        <ion-label>Colors</ion-label>
+      </ion-item>
+
+      <ion-list slot="content">
+        <ion-item>
+          <ion-label>Red</ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-label>Green</ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-label>Blue</ion-label>
+        </ion-item>
+      </ion-list>
+    </ion-accordion>
+    <ion-accordion value="shapes">
+      <ion-item slot="header">
+        <ion-label>Shapes</ion-label>
+      </ion-item>
+
+      <ion-list slot="content">
+        <ion-item>
+          <ion-label>Circle</ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-label>Triangle</ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-label>Square</ion-label>
+        </ion-item>
+      </ion-list>
+    </ion-accordion>
+    <ion-accordion value="numbers">
+      <ion-item slot="header">
+        <ion-label>Numbers</ion-label>
+      </ion-item>
+
+      <ion-list slot="content">
+        <ion-item>
+          <ion-label>1</ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-label>2</ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-label>3</ion-label>
+        </ion-item>
+      </ion-list>
+    </ion-accordion>
+  </ion-accordion-group>
+
+  <!-- Multiple Accordions -->
+  <ion-accordion-group :multiple="true" :value="['colors', 'numbers']">
+    <ion-accordion value="colors">
+      <ion-item slot="header">
+        <ion-label>Colors</ion-label>
+      </ion-item>
+
+      <ion-list slot="content">
+        <ion-item>
+          <ion-label>Red</ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-label>Green</ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-label>Blue</ion-label>
+        </ion-item>
+      </ion-list>
+    </ion-accordion>
+    <ion-accordion value="shapes">
+      <ion-item slot="header">
+        <ion-label>Shapes</ion-label>
+      </ion-item>
+
+      <ion-list slot="content">
+        <ion-item>
+          <ion-label>Circle</ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-label>Triangle</ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-label>Square</ion-label>
+        </ion-item>
+      </ion-list>
+    </ion-accordion>
+    <ion-accordion value="numbers">
+      <ion-item slot="header">
+        <ion-label>Numbers</ion-label>
+      </ion-item>
+
+      <ion-list slot="content">
+        <ion-item>
+          <ion-label>1</ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-label>2</ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-label>3</ion-label>
+        </ion-item>
+      </ion-list>
+    </ion-accordion>
+  </ion-accordion-group>
+  
+  <!-- Getting and setting the state of the accordion group -->
+  <ion-accordion-group value="numbers" ref="accordionGroup">
+    <ion-accordion value="colors">
+      <ion-item slot="header">
+        <ion-label>Colors</ion-label>
+      </ion-item>
+  
+      <ion-list slot="content">
+        <ion-item>
+          <ion-label>Red</ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-label>Green</ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-label>Blue</ion-label>
+        </ion-item>
+      </ion-list>
+    </ion-accordion>
+    <ion-accordion value="shapes">
+      <ion-item slot="header">
+        <ion-label>Shapes</ion-label>
+      </ion-item>
+  
+      <ion-list slot="content">
+        <ion-item>
+          <ion-label>Circle</ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-label>Triangle</ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-label>Square</ion-label>
+        </ion-item>
+      </ion-list>
+    </ion-accordion>
+    <ion-accordion value="numbers">
+      <ion-item slot="header">
+        <ion-label>Numbers</ion-label>
+      </ion-item>
+  
+      <ion-list slot="content">
+        <ion-item>
+          <ion-label>1</ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-label>2</ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-label>3</ion-label>
+        </ion-item>
+      </ion-list>
+    </ion-accordion>
+  </ion-accordion-group>
+  
+  <ion-button @click="logAccordionValue()">Log Value of Accordion Group</ion-button>
+  <ion-button @click="closeAccordion()">Close All Accordions</ion-button>
+</template>
+
+<script>
+  import { IonAccordion, IonAccordionGroup, IonButton, IonItem, IonLabel } from '@ionic/vue';
+  import { defineComponent, ref } from 'vue';
+  import { arrowDownCircle } from 'ionicons/icons';
+
+  export default defineComponent({
+    components: { IonAccordion, IonAccordionGroup, IonButton, IonItem, IonLabel },
+    setup() {
+      const accordionGroup = ref();
+      const logAccordionValue = () => {
+        if (accordionGroup.value) {
+          console.log(accordionGroup.value.$el.value);
+        }
+      }
+      const closeAccordion = () => {
+        if (accordionGroup.value) {
+          accordionGroup.value.$el.value = undefined;
+        }
+      }
+      return {
+        accordionGroup,
+        arrowDownCircle,
+        closeAccordion,
+        logAccordionValue
+      }
+    }
+  });
+</script>
+```

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

@@ -1,3 +1,5 @@
+import type { JSXBase } from '@stencil/core/internal';
+
 import type { AnimationBuilder, Mode } from '../../interface';
 
 export interface ActionSheetOptions {
@@ -17,10 +19,7 @@ export interface ActionSheetOptions {
   leaveAnimation?: AnimationBuilder;
 }
 
-/**
- * @deprecated - Use { [key: string]: any } directly instead.
- */
-export type ActionSheetAttributes = { [key: string]: any };
+export type ActionSheetAttributes = JSXBase.HTMLAttributes<HTMLElement>;
 
 export interface ActionSheetButton<T = any> {
   text?: string;

core/src/components/action-sheet/readme.md

@@ -0,0 +1,686 @@
+# ion-action-sheet
+
+An Action Sheet is a dialog that displays a set of options. It appears on top of the app's content, and must be manually dismissed by the user before they can resume interaction with the app. Destructive options are made obvious in `ios` mode. There are multiple ways to dismiss the action sheet, including tapping the backdrop or hitting the escape key on desktop.
+
+## Buttons
+
+A button's `role` property can either be `destructive` or `cancel`. Buttons without a role property will have the default look for the platform. Buttons with the `cancel` role will always load as the bottom button, no matter where they are in the array. All other buttons will be displayed in the order they have been added to the `buttons` array. Note: We recommend that `destructive` buttons are always the first button in the array, making them the top button. Additionally, if the action sheet is dismissed by tapping the backdrop, then it will fire the handler from the button with the cancel role.
+
+A button can also be passed data via the `data` property on `ActionSheetButton`. This will populate the `data` field in the return value of the `onDidDismiss` method.
+
+## Customization
+
+Action Sheet uses scoped encapsulation, which means it will automatically scope its CSS by appending each of the styles with an additional class at runtime. Overriding scoped selectors in CSS requires a [higher specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) selector.
+
+We recommend passing a custom class to `cssClass` in the `create` method and using that to add custom styles to the host and inner elements. This property can also accept multiple classes separated by spaces. View the [Usage](#usage) section for an example of how to pass a class using `cssClass`.
+
+```css
+/* DOES NOT WORK - not specific enough */
+.action-sheet-group {
+  background: #e5e5e5;
+}
+
+/* Works - pass "my-custom-class" in cssClass to increase specificity */
+.my-custom-class .action-sheet-group {
+  background: #e5e5e5;
+}
+```
+
+Any of the defined [CSS Custom Properties](#css-custom-properties) can be used to style the Action Sheet without needing to target individual elements:
+
+```css
+.my-custom-class {
+  --background: #e5e5e5;
+}
+```
+
+> If you are building an Ionic Angular app, the styles need to be added to a global stylesheet file. Read [Style Placement](#style-placement) in the Angular section below for more information.
+
+## Interfaces
+
+### ActionSheetButton
+
+```typescript
+interface ActionSheetButton<T = any> {
+  text?: string;
+  role?: 'cancel' | 'destructive' | 'selected' | string;
+  icon?: string;
+  cssClass?: string | string[];
+  handler?: () => boolean | void | Promise<boolean | void>;
+  data?: T;
+}
+```
+
+### ActionSheetOptions
+
+```typescript
+interface ActionSheetOptions {
+  header?: string;
+  subHeader?: string;
+  cssClass?: string | string[];
+  buttons: (ActionSheetButton | string)[];
+  backdropDismiss?: boolean;
+  translucent?: boolean;
+  animated?: boolean;
+  mode?: Mode;
+  keyboardClose?: boolean;
+  id?: string;
+  htmlAttributes?: ActionSheetAttributes;
+
+  enterAnimation?: AnimationBuilder;
+  leaveAnimation?: AnimationBuilder;
+}
+```
+
+### ActionSheetAttributes
+
+```typescript
+interface ActionSheetAttributes extends JSXBase.HTMLAttributes<HTMLElement> {}
+```
+
+<!-- Auto Generated Below -->
+
+
+## Usage
+
+### Angular
+
+```typescript
+import { Component } from '@angular/core';
+import { ActionSheetController } from '@ionic/angular';
+
+@Component({
+  selector: 'action-sheet-example',
+  templateUrl: 'action-sheet-example.html',
+  styleUrls: ['./action-sheet-example.css'],
+})
+export class ActionSheetExample {
+
+  constructor(public actionSheetController: ActionSheetController) {}
+
+  async presentActionSheet() {
+    const actionSheet = await this.actionSheetController.create({
+      header: 'Albums',
+      cssClass: 'my-custom-class',
+      buttons: [{
+        text: 'Delete',
+        role: 'destructive',
+        icon: 'trash',
+        id: 'delete-button',
+        data: {
+          type: 'delete'
+        },
+        handler: () => {
+          console.log('Delete clicked');
+        }
+      }, {
+        text: 'Share',
+        icon: 'share',
+        data: 10,
+        handler: () => {
+          console.log('Share clicked');
+        }
+      }, {
+        text: 'Play (open modal)',
+        icon: 'caret-forward-circle',
+        data: 'Data value',
+        handler: () => {
+          console.log('Play clicked');
+        }
+      }, {
+        text: 'Favorite',
+        icon: 'heart',
+        handler: () => {
+          console.log('Favorite clicked');
+        }
+      }, {
+        text: 'Cancel',
+        icon: 'close',
+        role: 'cancel',
+        handler: () => {
+          console.log('Cancel clicked');
+        }
+      }]
+    });
+    await actionSheet.present();
+
+    const { role, data } = await actionSheet.onDidDismiss();
+    console.log('onDidDismiss resolved with role and data', role, data);
+  }
+
+}
+```
+
+
+### Style Placement
+
+In Angular, the CSS of a specific page is scoped only to elements of that page. Even though the Action Sheet can be presented from within a page, the `ion-action-sheet` element is appended outside of the current page. This means that any custom styles need to go in a global stylesheet file. In an Ionic Angular starter this can be the `src/global.scss` file or you can register a new global style file by [adding to the `styles` build option in `angular.json`](https://angular.io/guide/workspace-config#style-script-config).
+
+
+### Javascript
+
+```javascript
+async function presentActionSheet() {
+  const actionSheet = document.createElement('ion-action-sheet');
+
+  actionSheet.header = 'Albums';
+  actionSheet.cssClass = 'my-custom-class';
+  actionSheet.buttons = [{
+    text: 'Delete',
+    role: 'destructive',
+    icon: 'trash',
+    id: 'delete-button',
+    data: {
+      type: 'delete'
+    },
+    handler: () => {
+      console.log('Delete clicked');
+    }
+  }, {
+    text: 'Share',
+    icon: 'share',
+    data: 10,
+    handler: () => {
+      console.log('Share clicked');
+    }
+  }, {
+    text: 'Play (open modal)',
+    icon: 'caret-forward-circle',
+    data: 'Data value',
+    handler: () => {
+      console.log('Play clicked');
+    }
+  }, {
+    text: 'Favorite',
+    icon: 'heart',
+    handler: () => {
+      console.log('Favorite clicked');
+    }
+  }, {
+    text: 'Cancel',
+    icon: 'close',
+    role: 'cancel',
+    handler: () => {
+      console.log('Cancel clicked');
+    }
+  }];
+  document.body.appendChild(actionSheet);
+  await actionSheet.present();
+
+  const { role, data } = await actionSheet.onDidDismiss();
+  console.log('onDidDismiss resolved with role and data', role, data);
+}
+```
+
+
+### React
+
+```tsx
+/* Using with useIonActionSheet Hook */
+
+import React from 'react';
+import {
+  IonButton,
+  IonContent,
+  IonPage,
+  useIonActionSheet,
+} from '@ionic/react';
+
+const ActionSheetExample: React.FC = () => {
+  const [present, dismiss] = useIonActionSheet();
+
+  return (
+    <IonPage>
+      <IonContent>
+        <IonButton
+          expand="block"
+          onClick={() =>
+            present({
+              buttons: [{ text: 'Ok' }, { text: 'Cancel' }],
+              header: 'Action Sheet'
+            })
+          }
+        >
+          Show ActionSheet
+        </IonButton>
+        <IonButton
+          expand="block"
+          onClick={() =>
+            present([{ text: 'Ok' }, { text: 'Cancel' }], 'Action Sheet')
+          }
+        >
+          Show ActionSheet using params
+        </IonButton>
+        <IonButton
+          expand="block"
+          onClick={() => {
+            present([{ text: 'Ok' }, { text: 'Cancel' }], 'Action Sheet');
+            setTimeout(dismiss, 3000);
+          }}
+        >
+          Show ActionSheet, hide after 3 seconds
+        </IonButton>
+      </IonContent>
+    </IonPage>
+  );
+};
+```
+
+```tsx
+/* Using with IonActionSheet Component */
+
+import React, { useState } from 'react';
+import { IonActionSheet, IonContent, IonButton } from '@ionic/react';
+import { trash, share, caretForwardCircle, heart, close } from 'ionicons/icons';
+
+export const ActionSheetExample: React.FC = () => {
+  const [showActionSheet, setShowActionSheet] = useState(false);
+
+  return (
+    <IonContent>
+      <IonButton onClick={() => setShowActionSheet(true)} expand="block">
+        Show Action Sheet
+      </IonButton>
+      <IonActionSheet
+        isOpen={showActionSheet}
+        onDidDismiss={() => setShowActionSheet(false)}
+        cssClass='my-custom-class'
+        buttons={[{
+          text: 'Delete',
+          role: 'destructive',
+          icon: trash,
+          id: 'delete-button',
+          data: {
+            type: 'delete'
+          },
+          handler: () => {
+            console.log('Delete clicked');
+          }
+        }, {
+          text: 'Share',
+          icon: share,
+          data: 10,
+          handler: () => {
+            console.log('Share clicked');
+          }
+        }, {
+          text: 'Play (open modal)',
+          icon: caretForwardCircle,
+          data: 'Data value',
+          handler: () => {
+            console.log('Play clicked');
+          }
+        }, {
+          text: 'Favorite',
+          icon: heart,
+          handler: () => {
+            console.log('Favorite clicked');
+          }
+        }, {
+          text: 'Cancel',
+          icon: close,
+          role: 'cancel',
+          handler: () => {
+            console.log('Cancel clicked');
+          }
+        }]}
+      >
+      </IonActionSheet>
+    </IonContent>
+  );
+}
+```
+
+
+### Stencil
+
+```tsx
+import { Component, h } from '@stencil/core';
+
+import { actionSheetController } from '@ionic/core';
+
+@Component({
+  tag: 'action-sheet-example',
+  styleUrl: 'action-sheet-example.css'
+})
+export class ActionSheetExample {
+  async presentActionSheet() {
+    const actionSheet = await actionSheetController.create({
+      header: 'Albums',
+      cssClass: 'my-custom-class',
+      buttons: [{
+        text: 'Delete',
+        role: 'destructive',
+        icon: 'trash',
+        id: 'delete-button',
+        data: {
+          type: 'delete'
+        },
+        handler: () => {
+          console.log('Delete clicked');
+        }
+      }, {
+        text: 'Share',
+        icon: 'share',
+        data: 10,
+        handler: () => {
+          console.log('Share clicked');
+        }
+      }, {
+        text: 'Play (open modal)',
+        icon: 'caret-forward-circle',
+        data: 'Data value',
+        handler: () => {
+          console.log('Play clicked');
+        }
+      }, {
+        text: 'Favorite',
+        icon: 'heart',
+        handler: () => {
+          console.log('Favorite clicked');
+        }
+      }, {
+        text: 'Cancel',
+        icon: 'close',
+        role: 'cancel',
+        handler: () => {
+          console.log('Cancel clicked');
+        }
+      }]
+    });
+    await actionSheet.present();
+
+    const { role, data } = await actionSheet.onDidDismiss();
+    console.log('onDidDismiss resolved with role and data', role, data);
+  }
+
+  render() {
+    return [
+      <ion-content>
+        <ion-button onClick={() => this.presentActionSheet()}>Present Action Sheet</ion-button>
+      </ion-content>
+    ];
+  }
+}
+```
+
+
+### Vue
+
+```html
+<template>
+  <ion-button @click="presentActionSheet">Show Action Sheet</ion-button>
+</template>
+
+<script>
+import { IonButton, actionSheetController } from '@ionic/vue';
+import { defineComponent } from 'vue';
+import { caretForwardCircle, close, heart, trash, share } from 'ionicons/icons';
+
+export default defineComponent({
+  components: { IonButton },
+  methods: {
+    async presentActionSheet() {
+      const actionSheet = await actionSheetController
+        .create({
+          header: 'Albums',
+          cssClass: 'my-custom-class',
+          buttons: [
+            {
+              text: 'Delete',
+              role: 'destructive',
+              icon: trash,
+              id: 'delete-button', 
+              data: {
+                type: 'delete'
+              },
+              handler: () => {
+                console.log('Delete clicked')
+              },
+            },
+            {
+              text: 'Share',
+              icon: share,
+              data: 10,  
+              handler: () => {
+                console.log('Share clicked')
+              },
+            },
+            {
+              text: 'Play (open modal)',
+              icon: caretForwardCircle,
+              data: 'Data value',
+              handler: () => {
+                console.log('Play clicked')
+              },
+            },
+            {
+              text: 'Favorite',
+              icon: heart,
+              handler: () => {
+                console.log('Favorite clicked')
+              },
+            },
+            {
+              text: 'Cancel',
+              icon: close,
+              role: 'cancel',
+              handler: () => {
+                console.log('Cancel clicked')
+              },
+            },
+          ],
+        });
+      await actionSheet.present();
+
+      const { role, data } = await actionSheet.onDidDismiss();
+      console.log('onDidDismiss resolved with role and data', role, data);
+    },
+  },
+});
+</script>
+```
+
+Developers can also use this component directly in their template:
+
+```html
+<template>
+  <ion-button @click="setOpen(true)">Show Action Sheet</ion-button>
+  <ion-action-sheet
+    :is-open="isOpenRef"
+    header="Albums"
+    css-class="my-custom-class"
+    :buttons="buttons"
+    @didDismiss="setOpen(false)"
+  >
+  </ion-action-sheet>
+</template>
+
+<script>
+import { IonActionSheet, IonButton } from '@ionic/vue';
+import { defineComponent, ref } from 'vue';
+import { caretForwardCircle, close, heart, trash, share } from 'ionicons/icons';
+
+export default defineComponent({
+  components: { IonActionSheet, IonButton },
+  setup() {
+    const isOpenRef = ref(false);
+    const setOpen = (state: boolean) => isOpenRef.value = state;
+    const buttons = [
+      {
+        text: 'Delete',
+        role: 'destructive',
+        icon: trash,
+        data: {
+          type: 'delete'
+        }
+        handler: () => {
+          console.log('Delete clicked')
+        },
+      },
+      {
+        text: 'Share',
+        icon: share,
+        data: 10,  
+        handler: () => {
+          console.log('Share clicked')
+        },
+      },
+      {
+        text: 'Play (open modal)',
+        icon: caretForwardCircle,
+        data: 'Data value',  
+        handler: () => {
+          console.log('Play clicked')
+        },
+      },
+      {
+        text: 'Favorite',
+        icon: heart,
+        handler: () => {
+          console.log('Favorite clicked')
+        },
+      },
+      {
+        text: 'Cancel',
+        icon: close,
+        role: 'cancel',
+        handler: () => {
+          console.log('Cancel clicked')
+        },
+      },
+    ];
+    
+    return { buttons, isOpenRef, setOpen }
+  }
+});
+</script>
+```
+
+
+
+## Properties
+
+| Property          | Attribute          | Description                                                                                                                                                                                                                 | Type                                                    | Default     |
+| ----------------- | ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- | ----------- |
+| `animated`        | `animated`         | If `true`, the action sheet will animate.                                                                                                                                                                                   | `boolean`                                               | `true`      |
+| `backdropDismiss` | `backdrop-dismiss` | If `true`, the action sheet will be dismissed when the backdrop is clicked.                                                                                                                                                 | `boolean`                                               | `true`      |
+| `buttons`         | --                 | An array of buttons for the action sheet.                                                                                                                                                                                   | `(string \| ActionSheetButton<any>)[]`                  | `[]`        |
+| `cssClass`        | `css-class`        | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.                                                                                                            | `string \| string[] \| undefined`                       | `undefined` |
+| `enterAnimation`  | --                 | Animation to use when the action sheet is presented.                                                                                                                                                                        | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` |
+| `header`          | `header`           | Title for the action sheet.                                                                                                                                                                                                 | `string \| undefined`                                   | `undefined` |
+| `htmlAttributes`  | --                 | Additional attributes to pass to the action sheet.                                                                                                                                                                          | `ActionSheetAttributes \| undefined`                    | `undefined` |
+| `keyboardClose`   | `keyboard-close`   | If `true`, the keyboard will be automatically dismissed when the overlay is presented.                                                                                                                                      | `boolean`                                               | `true`      |
+| `leaveAnimation`  | --                 | Animation to use when the action sheet is dismissed.                                                                                                                                                                        | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` |
+| `mode`            | `mode`             | The mode determines which platform styles to use.                                                                                                                                                                           | `"ios" \| "md"`                                         | `undefined` |
+| `subHeader`       | `sub-header`       | Subtitle for the action sheet.                                                                                                                                                                                              | `string \| undefined`                                   | `undefined` |
+| `translucent`     | `translucent`      | If `true`, the action sheet will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). | `boolean`                                               | `false`     |
+
+
+## Events
+
+| Event                       | Description                             | Type                                   |
+| --------------------------- | --------------------------------------- | -------------------------------------- |
+| `ionActionSheetDidDismiss`  | Emitted after the alert has dismissed.  | `CustomEvent<OverlayEventDetail<any>>` |
+| `ionActionSheetDidPresent`  | Emitted after the alert has presented.  | `CustomEvent<void>`                    |
+| `ionActionSheetWillDismiss` | Emitted before the alert has dismissed. | `CustomEvent<OverlayEventDetail<any>>` |
+| `ionActionSheetWillPresent` | Emitted before the alert has presented. | `CustomEvent<void>`                    |
+
+
+## Methods
+
+### `dismiss(data?: any, role?: string | undefined) => Promise<boolean>`
+
+Dismiss the action sheet overlay after it has been presented.
+
+#### Returns
+
+Type: `Promise<boolean>`
+
+
+
+### `onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>`
+
+Returns a promise that resolves when the action sheet did dismiss.
+
+#### Returns
+
+Type: `Promise<OverlayEventDetail<T>>`
+
+
+
+### `onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>`
+
+Returns a promise that resolves when the action sheet will dismiss.
+
+#### Returns
+
+Type: `Promise<OverlayEventDetail<T>>`
+
+
+
+### `present() => Promise<void>`
+
+Present the action sheet overlay after it has been created.
+
+#### Returns
+
+Type: `Promise<void>`
+
+
+
+
+## CSS Custom Properties
+
+| Name                                    | Description                                                                                                            |
+| --------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- |
+| `--backdrop-opacity`                    | Opacity of the backdrop                                                                                                |
+| `--background`                          | Background of the action sheet group                                                                                   |
+| `--button-background`                   | Background of the action sheet button                                                                                  |
+| `--button-background-activated`         | Background of the action sheet button when pressed. Note: setting this will interfere with the Material Design ripple. |
+| `--button-background-activated-opacity` | Opacity of the action sheet button background when pressed                                                             |
+| `--button-background-focused`           | Background of the action sheet button when tabbed to                                                                   |
+| `--button-background-focused-opacity`   | Opacity of the action sheet button background when tabbed to                                                           |
+| `--button-background-hover`             | Background of the action sheet button on hover                                                                         |
+| `--button-background-hover-opacity`     | Opacity of the action sheet button background on hover                                                                 |
+| `--button-background-selected`          | Background of the selected action sheet button                                                                         |
+| `--button-background-selected-opacity`  | Opacity of the selected action sheet button background                                                                 |
+| `--button-color`                        | Color of the action sheet button                                                                                       |
+| `--button-color-activated`              | Color of the action sheet button when pressed                                                                          |
+| `--button-color-focused`                | Color of the action sheet button when tabbed to                                                                        |
+| `--button-color-hover`                  | Color of the action sheet button on hover                                                                              |
+| `--button-color-selected`               | Color of the selected action sheet button                                                                              |
+| `--color`                               | Color of the action sheet text                                                                                         |
+| `--height`                              | height of the action sheet                                                                                             |
+| `--max-height`                          | Maximum height of the action sheet                                                                                     |
+| `--max-width`                           | Maximum width of the action sheet                                                                                      |
+| `--min-height`                          | Minimum height of the action sheet                                                                                     |
+| `--min-width`                           | Minimum width of the action sheet                                                                                      |
+| `--width`                               | Width of the action sheet                                                                                              |
+
+
+## Dependencies
+
+### Used by
+
+ - [ion-select](../select)
+
+### Depends on
+
+- [ion-backdrop](../backdrop)
+- ion-icon
+- [ion-ripple-effect](../ripple-effect)
+
+### Graph
+```mermaid
+graph TD;
+  ion-action-sheet --> ion-backdrop
+  ion-action-sheet --> ion-icon
+  ion-action-sheet --> ion-ripple-effect
+  ion-select --> ion-action-sheet
+  style ion-action-sheet fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

core/src/components/action-sheet/usage/angular.md

@@ -0,0 +1,70 @@
+```typescript
+import { Component } from '@angular/core';
+import { ActionSheetController } from '@ionic/angular';
+
+@Component({
+  selector: 'action-sheet-example',
+  templateUrl: 'action-sheet-example.html',
+  styleUrls: ['./action-sheet-example.css'],
+})
+export class ActionSheetExample {
+
+  constructor(public actionSheetController: ActionSheetController) {}
+
+  async presentActionSheet() {
+    const actionSheet = await this.actionSheetController.create({
+      header: 'Albums',
+      cssClass: 'my-custom-class',
+      buttons: [{
+        text: 'Delete',
+        role: 'destructive',
+        icon: 'trash',
+        id: 'delete-button',
+        data: {
+          type: 'delete'
+        },
+        handler: () => {
+          console.log('Delete clicked');
+        }
+      }, {
+        text: 'Share',
+        icon: 'share',
+        data: 10,
+        handler: () => {
+          console.log('Share clicked');
+        }
+      }, {
+        text: 'Play (open modal)',
+        icon: 'caret-forward-circle',
+        data: 'Data value',
+        handler: () => {
+          console.log('Play clicked');
+        }
+      }, {
+        text: 'Favorite',
+        icon: 'heart',
+        handler: () => {
+          console.log('Favorite clicked');
+        }
+      }, {
+        text: 'Cancel',
+        icon: 'close',
+        role: 'cancel',
+        handler: () => {
+          console.log('Cancel clicked');
+        }
+      }]
+    });
+    await actionSheet.present();
+
+    const { role, data } = await actionSheet.onDidDismiss();
+    console.log('onDidDismiss resolved with role and data', role, data);
+  }
+
+}
+```
+
+
+### Style Placement
+
+In Angular, the CSS of a specific page is scoped only to elements of that page. Even though the Action Sheet can be presented from within a page, the `ion-action-sheet` element is appended outside of the current page. This means that any custom styles need to go in a global stylesheet file. In an Ionic Angular starter this can be the `src/global.scss` file or you can register a new global style file by [adding to the `styles` build option in `angular.json`](https://angular.io/guide/workspace-config#style-script-config).

core/src/components/action-sheet/usage/javascript.md

@@ -0,0 +1,52 @@
+```javascript
+async function presentActionSheet() {
+  const actionSheet = document.createElement('ion-action-sheet');
+
+  actionSheet.header = 'Albums';
+  actionSheet.cssClass = 'my-custom-class';
+  actionSheet.buttons = [{
+    text: 'Delete',
+    role: 'destructive',
+    icon: 'trash',
+    id: 'delete-button',
+    data: {
+      type: 'delete'
+    },
+    handler: () => {
+      console.log('Delete clicked');
+    }
+  }, {
+    text: 'Share',
+    icon: 'share',
+    data: 10,
+    handler: () => {
+      console.log('Share clicked');
+    }
+  }, {
+    text: 'Play (open modal)',
+    icon: 'caret-forward-circle',
+    data: 'Data value',
+    handler: () => {
+      console.log('Play clicked');
+    }
+  }, {
+    text: 'Favorite',
+    icon: 'heart',
+    handler: () => {
+      console.log('Favorite clicked');
+    }
+  }, {
+    text: 'Cancel',
+    icon: 'close',
+    role: 'cancel',
+    handler: () => {
+      console.log('Cancel clicked');
+    }
+  }];
+  document.body.appendChild(actionSheet);
+  await actionSheet.present();
+
+  const { role, data } = await actionSheet.onDidDismiss();
+  console.log('onDidDismiss resolved with role and data', role, data);
+}
+```

core/src/components/action-sheet/usage/react.md

@@ -0,0 +1,115 @@
+```tsx
+/* Using with useIonActionSheet Hook */
+
+import React from 'react';
+import {
+  IonButton,
+  IonContent,
+  IonPage,
+  useIonActionSheet,
+} from '@ionic/react';
+
+const ActionSheetExample: React.FC = () => {
+  const [present, dismiss] = useIonActionSheet();
+
+  return (
+    <IonPage>
+      <IonContent>
+        <IonButton
+          expand="block"
+          onClick={() =>
+            present({
+              buttons: [{ text: 'Ok' }, { text: 'Cancel' }],
+              header: 'Action Sheet'
+            })
+          }
+        >
+          Show ActionSheet
+        </IonButton>
+        <IonButton
+          expand="block"
+          onClick={() =>
+            present([{ text: 'Ok' }, { text: 'Cancel' }], 'Action Sheet')
+          }
+        >
+          Show ActionSheet using params
+        </IonButton>
+        <IonButton
+          expand="block"
+          onClick={() => {
+            present([{ text: 'Ok' }, { text: 'Cancel' }], 'Action Sheet');
+            setTimeout(dismiss, 3000);
+          }}
+        >
+          Show ActionSheet, hide after 3 seconds
+        </IonButton>
+      </IonContent>
+    </IonPage>
+  );
+};
+```
+
+```tsx
+/* Using with IonActionSheet Component */
+
+import React, { useState } from 'react';
+import { IonActionSheet, IonContent, IonButton } from '@ionic/react';
+import { trash, share, caretForwardCircle, heart, close } from 'ionicons/icons';
+
+export const ActionSheetExample: React.FC = () => {
+  const [showActionSheet, setShowActionSheet] = useState(false);
+
+  return (
+    <IonContent>
+      <IonButton onClick={() => setShowActionSheet(true)} expand="block">
+        Show Action Sheet
+      </IonButton>
+      <IonActionSheet
+        isOpen={showActionSheet}
+        onDidDismiss={() => setShowActionSheet(false)}
+        cssClass='my-custom-class'
+        buttons={[{
+          text: 'Delete',
+          role: 'destructive',
+          icon: trash,
+          id: 'delete-button',
+          data: {
+            type: 'delete'
+          },
+          handler: () => {
+            console.log('Delete clicked');
+          }
+        }, {
+          text: 'Share',
+          icon: share,
+          data: 10,
+          handler: () => {
+            console.log('Share clicked');
+          }
+        }, {
+          text: 'Play (open modal)',
+          icon: caretForwardCircle,
+          data: 'Data value',
+          handler: () => {
+            console.log('Play clicked');
+          }
+        }, {
+          text: 'Favorite',
+          icon: heart,
+          handler: () => {
+            console.log('Favorite clicked');
+          }
+        }, {
+          text: 'Cancel',
+          icon: close,
+          role: 'cancel',
+          handler: () => {
+            console.log('Cancel clicked');
+          }
+        }]}
+      >
+      </IonActionSheet>
+    </IonContent>
+  );
+}
+```

core/src/components/action-sheet/usage/stencil.md

@@ -0,0 +1,69 @@
+```tsx
+import { Component, h } from '@stencil/core';
+
+import { actionSheetController } from '@ionic/core';
+
+@Component({
+  tag: 'action-sheet-example',
+  styleUrl: 'action-sheet-example.css'
+})
+export class ActionSheetExample {
+  async presentActionSheet() {
+    const actionSheet = await actionSheetController.create({
+      header: 'Albums',
+      cssClass: 'my-custom-class',
+      buttons: [{
+        text: 'Delete',
+        role: 'destructive',
+        icon: 'trash',
+        id: 'delete-button',
+        data: {
+          type: 'delete'
+        },
+        handler: () => {
+          console.log('Delete clicked');
+        }
+      }, {
+        text: 'Share',
+        icon: 'share',
+        data: 10,
+        handler: () => {
+          console.log('Share clicked');
+        }
+      }, {
+        text: 'Play (open modal)',
+        icon: 'caret-forward-circle',
+        data: 'Data value',
+        handler: () => {
+          console.log('Play clicked');
+        }
+      }, {
+        text: 'Favorite',
+        icon: 'heart',
+        handler: () => {
+          console.log('Favorite clicked');
+        }
+      }, {
+        text: 'Cancel',
+        icon: 'close',
+        role: 'cancel',
+        handler: () => {
+          console.log('Cancel clicked');
+        }
+      }]
+    });
+    await actionSheet.present();
+
+    const { role, data } = await actionSheet.onDidDismiss();
+    console.log('onDidDismiss resolved with role and data', role, data);
+  }
+
+  render() {
+    return [
+      <ion-content>
+        <ion-button onClick={() => this.presentActionSheet()}>Present Action Sheet</ion-button>
+      </ion-content>
+    ];
+  }
+}
+```

core/src/components/action-sheet/usage/vue.md

@@ -0,0 +1,149 @@
+```html
+<template>
+  <ion-button @click="presentActionSheet">Show Action Sheet</ion-button>
+</template>
+
+<script>
+import { IonButton, actionSheetController } from '@ionic/vue';
+import { defineComponent } from 'vue';
+import { caretForwardCircle, close, heart, trash, share } from 'ionicons/icons';
+
+export default defineComponent({
+  components: { IonButton },
+  methods: {
+    async presentActionSheet() {
+      const actionSheet = await actionSheetController
+        .create({
+          header: 'Albums',
+          cssClass: 'my-custom-class',
+          buttons: [
+            {
+              text: 'Delete',
+              role: 'destructive',
+              icon: trash,
+              id: 'delete-button', 
+              data: {
+                type: 'delete'
+              },
+              handler: () => {
+                console.log('Delete clicked')
+              },
+            },
+            {
+              text: 'Share',
+              icon: share,
+              data: 10,  
+              handler: () => {
+                console.log('Share clicked')
+              },
+            },
+            {
+              text: 'Play (open modal)',
+              icon: caretForwardCircle,
+              data: 'Data value',
+              handler: () => {
+                console.log('Play clicked')
+              },
+            },
+            {
+              text: 'Favorite',
+              icon: heart,
+              handler: () => {
+                console.log('Favorite clicked')
+              },
+            },
+            {
+              text: 'Cancel',
+              icon: close,
+              role: 'cancel',
+              handler: () => {
+                console.log('Cancel clicked')
+              },
+            },
+          ],
+        });
+      await actionSheet.present();
+
+      const { role, data } = await actionSheet.onDidDismiss();
+      console.log('onDidDismiss resolved with role and data', role, data);
+    },
+  },
+});
+</script>
+```
+
+Developers can also use this component directly in their template:
+
+```html
+<template>
+  <ion-button @click="setOpen(true)">Show Action Sheet</ion-button>
+  <ion-action-sheet
+    :is-open="isOpenRef"
+    header="Albums"
+    css-class="my-custom-class"
+    :buttons="buttons"
+    @didDismiss="setOpen(false)"
+  >
+  </ion-action-sheet>
+</template>
+
+<script>
+import { IonActionSheet, IonButton } from '@ionic/vue';
+import { defineComponent, ref } from 'vue';
+import { caretForwardCircle, close, heart, trash, share } from 'ionicons/icons';
+
+export default defineComponent({
+  components: { IonActionSheet, IonButton },
+  setup() {
+    const isOpenRef = ref(false);
+    const setOpen = (state: boolean) => isOpenRef.value = state;
+    const buttons = [
+      {
+        text: 'Delete',
+        role: 'destructive',
+        icon: trash,
+        data: {
+          type: 'delete'
+        }
+        handler: () => {
+          console.log('Delete clicked')
+        },
+      },
+      {
+        text: 'Share',
+        icon: share,
+        data: 10,  
+        handler: () => {
+          console.log('Share clicked')
+        },
+      },
+      {
+        text: 'Play (open modal)',
+        icon: caretForwardCircle,
+        data: 'Data value',  
+        handler: () => {
+          console.log('Play clicked')
+        },
+      },
+      {
+        text: 'Favorite',
+        icon: heart,
+        handler: () => {
+          console.log('Favorite clicked')
+        },
+      },
+      {
+        text: 'Cancel',
+        icon: close,
+        role: 'cancel',
+        handler: () => {
+          console.log('Cancel clicked')
+        },
+      },
+    ];
+    
+    return { buttons, isOpenRef, setOpen }
+  }
+});
+</script>
+```

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

@@ -1,3 +1,5 @@
+import type { JSXBase } from '@stencil/core/internal';
+
 import type { AnimationBuilder, Mode, TextFieldTypes } from '../../interface';
 import type { IonicSafeString } from '../../utils/sanitization';
 
@@ -21,10 +23,7 @@ export interface AlertOptions {
   leaveAnimation?: AnimationBuilder;
 }
 
-/**
- * @deprecated - Use { [key: string]: any } directly instead.
- */
-export type AlertAttributes = { [key: string]: any };
+export type AlertAttributes = JSXBase.HTMLAttributes<HTMLElement>;
 
 export interface AlertInput {
   type?: TextFieldTypes | 'checkbox' | 'radio' | 'textarea';
@@ -43,15 +42,8 @@ export interface AlertInput {
   tabindex?: number;
 }
 
-/**
- * @deprecated - Use { [key: string]: any } directly instead.
- */
-export type AlertTextareaAttributes = { [key: string]: any };
-
-/**
- * @deprecated - Use { [key: string]: any } directly instead.
- */
-export type AlertInputAttributes = { [key: string]: any };
+export type AlertTextareaAttributes = JSXBase.TextareaHTMLAttributes<HTMLTextAreaElement>;
+export type AlertInputAttributes = JSXBase.InputHTMLAttributes<HTMLInputElement>;
 
 export interface AlertButton {
   text: string;

core/src/components/alert/usage/angular.md

@@ -0,0 +1,323 @@
+```typescript
+import { Component } from '@angular/core';
+import { AlertController } from '@ionic/angular';
+
+@Component({
+  selector: 'alert-example',
+  templateUrl: 'alert-example.html',
+  styleUrls: ['./alert-example.css'],
+})
+export class AlertExample {
+
+  constructor(public alertController: AlertController) {}
+
+  async presentAlert() {
+    const alert = await this.alertController.create({
+      cssClass: 'my-custom-class',
+      header: 'Alert',
+      subHeader: 'Subtitle',
+      message: 'This is an alert message.',
+      buttons: ['OK']
+    });
+
+    await alert.present();
+
+    const { role } = await alert.onDidDismiss();
+    console.log('onDidDismiss resolved with role', role);
+  }
+
+  async presentAlertMultipleButtons() {
+    const alert = await this.alertController.create({
+      cssClass: 'my-custom-class',
+      header: 'Alert',
+      subHeader: 'Subtitle',
+      message: 'This is an alert message.',
+      buttons: ['Cancel', 'Open Modal', 'Delete']
+    });
+
+    await alert.present();
+  }
+
+  async presentAlertConfirm() {
+    const alert = await this.alertController.create({
+      cssClass: 'my-custom-class',
+      header: 'Confirm!',
+      message: 'Message <strong>text</strong>!!!',
+      buttons: [
+        {
+          text: 'Cancel',
+          role: 'cancel',
+          cssClass: 'secondary',
+          id: 'cancel-button',
+          handler: (blah) => {
+            console.log('Confirm Cancel: blah');
+          }
+        }, {
+          text: 'Okay',
+          id: 'confirm-button',
+          handler: () => {
+            console.log('Confirm Okay');
+          }
+        }
+      ]
+    });
+
+    await alert.present();
+  }
+
+  async presentAlertPrompt() {
+    const alert = await this.alertController.create({
+      cssClass: 'my-custom-class',
+      header: 'Prompt!',
+      inputs: [
+        {
+          name: 'name1',
+          type: 'text',
+          placeholder: 'Placeholder 1'
+        },
+        {
+          name: 'name2',
+          type: 'text',
+          id: 'name2-id',
+          value: 'hello',
+          placeholder: 'Placeholder 2'
+        },
+        // multiline input.
+        {
+          name: 'paragraph',
+          id: 'paragraph',
+          type: 'textarea',
+          placeholder: 'Placeholder 3'
+        },
+        {
+          name: 'name3',
+          value: 'http://ionicframework.com',
+          type: 'url',
+          placeholder: 'Favorite site ever'
+        },
+        // input date with min & max
+        {
+          name: 'name4',
+          type: 'date',
+          min: '2017-03-01',
+          max: '2018-01-12'
+        },
+        // input date without min nor max
+        {
+          name: 'name5',
+          type: 'date'
+        },
+        {
+          name: 'name6',
+          type: 'number',
+          min: -5,
+          max: 10
+        },
+        {
+          name: 'name7',
+          type: 'number'
+        },
+        {
+          name: 'name8',
+          type: 'password',
+          placeholder: 'Advanced Attributes',
+          cssClass: 'specialClass',
+          attributes: {
+            maxlength: 4,
+            inputmode: 'decimal'
+          }
+        }
+      ],
+      buttons: [
+        {
+          text: 'Cancel',
+          role: 'cancel',
+          cssClass: 'secondary',
+          handler: () => {
+            console.log('Confirm Cancel');
+          }
+        }, {
+          text: 'Ok',
+          handler: () => {
+            console.log('Confirm Ok');
+          }
+        }
+      ]
+    });
+
+    await alert.present();
+  }
+
+  async presentAlertRadio() {
+    const alert = await this.alertController.create({
+      cssClass: 'my-custom-class',
+      header: 'Radio',
+      inputs: [
+        {
+          name: 'radio1',
+          type: 'radio',
+          label: 'Radio 1',
+          value: 'value1',
+          handler: () => {
+            console.log('Radio 1 selected');
+          },
+          checked: true
+        },
+        {
+          name: 'radio2',
+          type: 'radio',
+          label: 'Radio 2',
+          value: 'value2',
+          handler: () => {
+            console.log('Radio 2 selected');
+          }
+        },
+        {
+          name: 'radio3',
+          type: 'radio',
+          label: 'Radio 3',
+          value: 'value3',
+          handler: () => {
+            console.log('Radio 3 selected');
+          }
+        },
+        {
+          name: 'radio4',
+          type: 'radio',
+          label: 'Radio 4',
+          value: 'value4',
+          handler: () => {
+            console.log('Radio 4 selected');
+          }
+        },
+        {
+          name: 'radio5',
+          type: 'radio',
+          label: 'Radio 5',
+          value: 'value5',
+          handler: () => {
+            console.log('Radio 5 selected');
+          }
+        },
+        {
+          name: 'radio6',
+          type: 'radio',
+          label: 'Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 ',
+          value: 'value6',
+          handler: () => {
+            console.log('Radio 6 selected');
+          }
+        }
+      ],
+      buttons: [
+        {
+          text: 'Cancel',
+          role: 'cancel',
+          cssClass: 'secondary',
+          handler: () => {
+            console.log('Confirm Cancel');
+          }
+        }, {
+          text: 'Ok',
+          handler: () => {
+            console.log('Confirm Ok');
+          }
+        }
+      ]
+    });
+
+    await alert.present();
+  }
+
+  async presentAlertCheckbox() {
+    const alert = await this.alertController.create({
+      cssClass: 'my-custom-class',
+      header: 'Checkbox',
+      inputs: [
+        {
+          name: 'checkbox1',
+          type: 'checkbox',
+          label: 'Checkbox 1',
+          value: 'value1',
+          handler: () => {
+            console.log('Checkbox 1 selected');
+          },
+          checked: true
+        },
+
+        {
+          name: 'checkbox2',
+          type: 'checkbox',
+          label: 'Checkbox 2',
+          value: 'value2',
+          handler: () => {
+            console.log('Checkbox 2 selected');
+          }
+        },
+
+        {
+          name: 'checkbox3',
+          type: 'checkbox',
+          label: 'Checkbox 3',
+          value: 'value3',
+          handler: () => {
+            console.log('Checkbox 3 selected');
+          }
+        },
+
+        {
+          name: 'checkbox4',
+          type: 'checkbox',
+          label: 'Checkbox 4',
+          value: 'value4',
+          handler: () => {
+            console.log('Checkbox 4 selected');
+          }
+        },
+
+        {
+          name: 'checkbox5',
+          type: 'checkbox',
+          label: 'Checkbox 5',
+          value: 'value5',
+          handler: () => {
+            console.log('Checkbox 5 selected');
+          }
+        },
+
+        {
+          name: 'checkbox6',
+          type: 'checkbox',
+          label: 'Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6',
+          value: 'value6',
+          handler: () => {
+            console.log('Checkbox 6 selected');
+          }
+        }
+      ],
+      buttons: [
+        {
+          text: 'Cancel',
+          role: 'cancel',
+          cssClass: 'secondary',
+          handler: () => {
+            console.log('Confirm Cancel');
+          }
+        }, {
+          text: 'Ok',
+          handler: () => {
+            console.log('Confirm Ok');
+          }
+        }
+      ]
+    });
+
+    await alert.present();
+  }
+}
+```
+
+
+### Style Placement
+
+In Angular, the CSS of a specific page is scoped only to elements of that page. Even though the Alert can be presented from within a page, the `ion-alert` element is appended outside of the current page. This means that any custom styles need to go in a global stylesheet file. In an Ionic Angular starter this can be the `src/global.scss` file or you can register a new global style file by [adding to the `styles` build option in `angular.json`](https://angular.io/guide/workspace-config#style-script-config).

core/src/components/alert/usage/javascript.md

@@ -0,0 +1,289 @@
+```javascript
+function presentAlert() {
+  const alert = document.createElement('ion-alert');
+  alert.cssClass = 'my-custom-class';
+  alert.header = 'Alert';
+  alert.subHeader = 'Subtitle';
+  alert.message = 'This is an alert message.';
+  alert.buttons = ['OK'];
+
+  document.body.appendChild(alert);
+  await alert.present();
+
+  const { role } = await alert.onDidDismiss();
+  console.log('onDidDismiss resolved with role', role);
+}
+
+function presentAlertMultipleButtons() {
+  const alert = document.createElement('ion-alert');
+  alert.cssClass = 'my-custom-class';
+  alert.header = 'Alert';
+  alert.subHeader = 'Subtitle';
+  alert.message = 'This is an alert message.';
+  alert.buttons = ['Cancel', 'Open Modal', 'Delete'];
+
+  document.body.appendChild(alert);
+  return alert.present();
+}
+
+function presentAlertConfirm() {
+  const alert = document.createElement('ion-alert');
+  alert.cssClass = 'my-custom-class';
+  alert.header = 'Confirm!';
+  alert.message = 'Message <strong>text</strong>!!!';
+  alert.buttons = [
+    {
+      text: 'Cancel',
+      role: 'cancel',
+      cssClass: 'secondary',
+      id: 'cancel-button',
+      handler: (blah) => {
+        console.log('Confirm Cancel: blah');
+      }
+    }, {
+      text: 'Okay',
+      id: 'confirm-button',
+      handler: () => {
+        console.log('Confirm Okay')
+      }
+    }
+  ];
+
+  document.body.appendChild(alert);
+  return alert.present();
+}
+
+function presentAlertPrompt() {
+  const alert = document.createElement('ion-alert');
+  alert.cssClass = 'my-custom-class';
+  alert.header = 'Prompt!';
+  alert.inputs = [
+    {
+      placeholder: 'Placeholder 1'
+    },
+    {
+      name: 'name2',
+      id: 'name2-id',
+      value: 'hello',
+      placeholder: 'Placeholder 2'
+    },
+    // multiline input.
+    {
+      name: 'paragraph',
+      id: 'paragraph',
+      type: 'textarea',
+      placeholder: 'Placeholder 3'
+    },
+    {
+      name: 'name3',
+      value: 'http://ionicframework.com',
+      type: 'url',
+      placeholder: 'Favorite site ever'
+    },
+    // input date with min & max
+    {
+      name: 'name4',
+      type: 'date',
+      min: '2017-03-01',
+      max: '2018-01-12'
+    },
+    // input date without min nor max
+    {
+      name: 'name5',
+      type: 'date'
+    },
+    {
+      name: 'name6',
+      type: 'number',
+      min: -5,
+      max: 10
+    },
+    {
+      name: 'name7',
+      type: 'number'
+    },
+    {
+      name: 'name8',
+      type: 'password',
+      placeholder: 'Advanced Attributes',
+      cssClass: 'specialClass',
+      attributes: {
+        maxlength: 4,
+        inputmode: 'decimal'
+      }
+    }
+  ];
+  alert.buttons = [
+    {
+      text: 'Cancel',
+      role: 'cancel',
+      cssClass: 'secondary',
+      handler: () => {
+        console.log('Confirm Cancel')
+      }
+    }, {
+      text: 'Ok',
+      handler: () => {
+        console.log('Confirm Ok')
+      }
+    }
+  ];
+
+  document.body.appendChild(alert);
+  return alert.present();
+}
+
+function presentAlertRadio() {
+  const alert = document.createElement('ion-alert');
+  alert.cssClass = 'my-custom-class';
+  alert.header = 'Radio';
+  alert.inputs = [
+    {
+      type: 'radio',
+      label: 'Radio 1',
+      value: 'value1',
+      handler: () => {
+        console.log('Radio 1 selected');
+      },
+      checked: true
+    },
+    {
+      type: 'radio',
+      label: 'Radio 2',
+      value: 'value2',
+      handler: () => {
+        console.log('Radio 2 selected');
+      }
+    },
+    {
+      type: 'radio',
+      label: 'Radio 3',
+      value: 'value3',
+      handler: () => {
+        console.log('Radio 3 selected');
+      }
+    },
+    {
+      type: 'radio',
+      label: 'Radio 4',
+      value: 'value4',
+      handler: () => {
+        console.log('Radio 4 selected');
+      }
+    },
+    {
+      type: 'radio',
+      label: 'Radio 5',
+      value: 'value5',
+      handler: () => {
+        console.log('Radio 5 selected');
+      }
+    },
+    {
+      type: 'radio',
+      label: 'Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 ',
+      value: 'value6',
+      handler: () => {
+        console.log('Radio 6 selected');
+      }
+    }
+  ];
+  alert.buttons = [
+    {
+      text: 'Cancel',
+      role: 'cancel',
+      cssClass: 'secondary',
+      handler: () => {
+        console.log('Confirm Cancel')
+      }
+    }, {
+      text: 'Ok',
+      handler: () => {
+        console.log('Confirm Ok')
+      }
+    }
+  ];
+  document.body.appendChild(alert);
+  return alert.present();
+}
+
+function presentAlertCheckbox() {
+  const alert = document.createElement('ion-alert');
+  alert.cssClass = 'my-custom-class';
+  alert.header = 'Checkbox';
+  alert.inputs = [
+    {
+      type: 'checkbox',
+      label: 'Checkbox 1',
+      value: 'value1',
+      handler: () => {
+        console.log('Checkbox 1 selected');
+      },
+      checked: true
+    },
+
+    {
+      type: 'checkbox',
+      label: 'Checkbox 2',
+      value: 'value2',
+      handler: () => {
+        console.log('Checkbox 2 selected');
+      }
+    },
+
+    {
+      type: 'checkbox',
+      label: 'Checkbox 3',
+      value: 'value3',
+      handler: () => {
+        console.log('Checkbox 3 selected');
+      }
+    },
+
+    {
+      type: 'checkbox',
+      label: 'Checkbox 4',
+      value: 'value4',
+      handler: () => {
+        console.log('Checkbox 4 selected');
+      }
+    },
+
+    {
+      type: 'checkbox',
+      label: 'Checkbox 5',
+      value: 'value5',
+      handler: () => {
+        console.log('Checkbox 5 selected');
+      }
+    },
+
+    {
+      type: 'checkbox',
+      label: 'Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6',
+      value: 'value6',
+      handler: () => {
+        console.log('Checkbox 6 selected');
+      }
+    }
+  ];
+  alert.buttons = [
+    {
+      text: 'Cancel',
+      role: 'cancel',
+      cssClass: 'secondary',
+      handler: () => {
+        console.log('Confirm Cancel')
+      }
+    }, {
+      text: 'Ok',
+      handler: () => {
+        console.log('Confirm Ok')
+      }
+    }
+  ];
+
+  document.body.appendChild(alert);
+  return alert.present();
+}
+```

core/src/components/alert/usage/react.md

@@ -0,0 +1,350 @@
+```tsx
+/* Using with useIonAlert Hook */
+
+import React from 'react';
+import { IonButton, IonContent, IonPage, useIonAlert } from '@ionic/react';
+
+const AlertExample: React.FC = () => {
+  const [present] = useIonAlert();
+  return (
+    <IonPage>
+      <IonContent fullscreen>
+        <IonButton
+          expand="block"
+          onClick={() =>
+            present({
+              cssClass: 'my-css',
+              header: 'Alert',
+              message: 'alert from hook',
+              buttons: [
+                'Cancel',
+                { text: 'Ok', handler: (d) => console.log('ok pressed') },
+              ],
+              onDidDismiss: (e) => console.log('did dismiss'),
+            })
+          }
+        >
+          Show Alert
+        </IonButton>
+        <IonButton
+          expand="block"
+          onClick={() => present('hello with params', [{ text: 'Ok' }])}
+        >
+          Show Alert using params
+        </IonButton>
+      </IonContent>
+    </IonPage>
+  );
+};
+```
+
+```tsx
+/* Using with IonAlert Component */
+
+import React, { useState } from 'react';
+import { IonAlert, IonButton, IonContent } from '@ionic/react';
+
+export const AlertExample: React.FC = () => {
+
+  const [showAlert1, setShowAlert1] = useState(false);
+  const [showAlert2, setShowAlert2] = useState(false);
+  const [showAlert3, setShowAlert3] = useState(false);
+  const [showAlert4, setShowAlert4] = useState(false);
+  const [showAlert5, setShowAlert5] = useState(false);
+  const [showAlert6, setShowAlert6] = useState(false);
+
+    return (
+      <IonContent>
+        <IonButton onClick={() => setShowAlert1(true)} expand="block">Show Alert 1</IonButton>
+        <IonButton onClick={() => setShowAlert2(true)} expand="block">Show Alert 2</IonButton>
+        <IonButton onClick={() => setShowAlert3(true)} expand="block">Show Alert 3</IonButton>
+        <IonButton onClick={() => setShowAlert4(true)} expand="block">Show Alert 4</IonButton>
+        <IonButton onClick={() => setShowAlert5(true)} expand="block">Show Alert 5</IonButton>
+        <IonButton onClick={() => setShowAlert6(true)} expand="block">Show Alert 6</IonButton>
+        <IonAlert
+          isOpen={showAlert1}
+          onDidDismiss={() => setShowAlert1(false)}
+          cssClass='my-custom-class'
+          header={'Alert'}
+          subHeader={'Subtitle'}
+          message={'This is an alert message.'}
+          buttons={['OK']}
+        />
+
+        <IonAlert
+          isOpen={showAlert2}
+          onDidDismiss={() => setShowAlert2(false)}
+          cssClass='my-custom-class'
+          header={'Alert'}
+          subHeader={'Subtitle'}
+          message={'This is an alert message.'}
+          buttons={['Cancel', 'Open Modal', 'Delete']}
+        />
+
+        <IonAlert
+          isOpen={showAlert3}
+          onDidDismiss={() => setShowAlert3(false)}
+          cssClass='my-custom-class'
+          header={'Confirm!'}
+          message={'Message <strong>text</strong>!!!'}
+          buttons={[
+            {
+              text: 'Cancel',
+              role: 'cancel',
+              cssClass: 'secondary',
+              id: 'cancel-button',
+              handler: blah => {
+                console.log('Confirm Cancel: blah');
+              }
+            },
+            {
+              text: 'Okay',
+              id: 'confirm-button',
+              handler: () => {
+                console.log('Confirm Okay');
+              }
+            }
+          ]}
+        />
+
+        <IonAlert
+          isOpen={showAlert4}
+          onDidDismiss={() => setShowAlert4(false)}
+          cssClass='my-custom-class'
+          header={'Prompt!'}
+          inputs={[
+            {
+              name: 'name1',
+              type: 'text',
+              placeholder: 'Placeholder 1'
+            },
+            {
+              name: 'name2',
+              type: 'text',
+              id: 'name2-id',
+              value: 'hello',
+              placeholder: 'Placeholder 2'
+            },
+            {
+              name: 'name3',
+              value: 'http://ionicframework.com',
+              type: 'url',
+              placeholder: 'Favorite site ever'
+            },
+            // input date with min & max
+            {
+              name: 'name4',
+              type: 'date',
+              min: '2017-03-01',
+              max: '2018-01-12'
+            },
+            // input date without min nor max
+            {
+              name: 'name5',
+              type: 'date'
+            },
+            {
+              name: 'name6',
+              type: 'number',
+              min: -5,
+              max: 10
+            },
+            {
+              name: 'name7',
+              type: 'number'
+            },
+            {
+              name: 'name8',
+              type: 'password',
+              placeholder: 'Advanced Attributes',
+              cssClass: 'specialClass',
+              attributes: {
+                maxlength: 4,
+                inputmode: 'decimal'
+              }
+            }
+          ]}
+          buttons={[
+            {
+              text: 'Cancel',
+              role: 'cancel',
+              cssClass: 'secondary',
+              handler: () => {
+                console.log('Confirm Cancel');
+              }
+            },
+            {
+              text: 'Ok',
+              handler: () => {
+                console.log('Confirm Ok');
+              }
+            }
+          ]}
+        />
+
+        <IonAlert
+          isOpen={showAlert5}
+          onDidDismiss={() => setShowAlert5(false)}
+          cssClass='my-custom-class'
+          header={'Radio'}
+          inputs={[
+            {
+              name: 'radio1',
+              type: 'radio',
+              label: 'Radio 1',
+              value: 'value1',
+              handler: () => {
+                console.log('Radio 1 selected');
+              },
+              checked: true
+            },
+            {
+              name: 'radio2',
+              type: 'radio',
+              label: 'Radio 2',
+              value: 'value2',
+              handler: () => {
+                console.log('Radio 2 selected');
+              }
+            },
+            {
+              name: 'radio3',
+              type: 'radio',
+              label: 'Radio 3',
+              value: 'value3',
+              handler: () => {
+                console.log('Radio 3 selected');
+              }
+            },
+            {
+              name: 'radio4',
+              type: 'radio',
+              label: 'Radio 4',
+              value: 'value4',
+              handler: () => {
+                console.log('Radio 4 selected');
+              }
+            },
+            {
+              name: 'radio5',
+              type: 'radio',
+              label: 'Radio 5',
+              value: 'value5',
+              handler: () => {
+                console.log('Radio 5 selected');
+              }
+            },
+            {
+              name: 'radio6',
+              type: 'radio',
+              label: 'Radio 6',
+              value: 'value6',
+              handler: () => {
+                console.log('Radio 6 selected');
+              }
+            }
+          ]}
+          buttons={[
+            {
+              text: 'Cancel',
+              role: 'cancel',
+              cssClass: 'secondary',
+              handler: () => {
+                console.log('Confirm Cancel');
+              }
+            },
+            {
+              text: 'Ok',
+              handler: () => {
+                console.log('Confirm Ok');
+              }
+            }
+          ]}
+        />
+
+        <IonAlert
+          isOpen={showAlert6}
+          onDidDismiss={() => setShowAlert6(false)}
+          cssClass='my-custom-class'
+          header={'Checkbox'}
+          inputs={[
+            {
+              name: 'checkbox1',
+              type: 'checkbox',
+              label: 'Checkbox 1',
+              value: 'value1',
+              handler: () => {
+                console.log('Checkbox 1 selected');
+              },
+              checked: true
+            },
+            {
+              name: 'checkbox2',
+              type: 'checkbox',
+              label: 'Checkbox 2',
+              value: 'value2',
+              handler: () => {
+                console.log('Checkbox 2 selected');
+              }
+            },
+            {
+              name: 'checkbox3',
+              type: 'checkbox',
+              label: 'Checkbox 3',
+              value: 'value3',
+              handler: () => {
+                console.log('Checkbox 3 selected');
+              }
+            },
+            {
+              name: 'checkbox4',
+              type: 'checkbox',
+              label: 'Checkbox 4',
+              value: 'value4',
+              handler: () => {
+                console.log('Checkbox 4 selected');
+              }
+            },
+            {
+              name: 'checkbox5',
+              type: 'checkbox',
+              label: 'Checkbox 5',
+              value: 'value5',
+              handler: () => {
+                console.log('Checkbox 5 selected');
+              }
+            },
+            {
+              name: 'checkbox6',
+              type: 'checkbox',
+              label: 'Checkbox 6',
+              value: 'value6',
+              handler: () => {
+                console.log('Checkbox 6 selected');
+              }
+            }
+          ]}
+          buttons={[
+            {
+              text: 'Cancel',
+              role: 'cancel',
+              cssClass: 'secondary',
+              handler: () => {
+                console.log('Confirm Cancel');
+              }
+            },
+            {
+              text: 'Ok',
+              handler: () => {
+                console.log('Confirm Ok');
+              }
+            }
+          ]}
+        />
+      </IonContent>
+    );
+}
+
+export default AlertExample;
+
+```

core/src/components/alert/usage/stencil.md

@@ -0,0 +1,328 @@
+```tsx
+import { Component, h } from '@stencil/core';
+
+import { alertController } from '@ionic/core';
+
+@Component({
+  tag: 'alert-example',
+  styleUrl: 'alert-example.css'
+})
+export class AlertExample {
+  async presentAlert() {
+    const alert = await alertController.create({
+      cssClass: 'my-custom-class',
+      header: 'Alert',
+      subHeader: 'Subtitle',
+      message: 'This is an alert message.',
+      buttons: ['OK']
+    });
+
+    await alert.present();
+
+    const { role } = await alert.onDidDismiss();
+    console.log('onDidDismiss resolved with role', role);
+  }
+
+  async presentAlertMultipleButtons() {
+    const alert = await alertController.create({
+      cssClass: 'my-custom-class',
+      header: 'Alert',
+      subHeader: 'Subtitle',
+      message: 'This is an alert message.',
+      buttons: ['Cancel', 'Open Modal', 'Delete']
+    });
+
+    await alert.present();
+  }
+
+  async presentAlertConfirm() {
+    const alert = await alertController.create({
+      cssClass: 'my-custom-class',
+      header: 'Confirm!',
+      message: 'Message <strong>text</strong>!!!',
+      buttons: [
+        {
+          text: 'Cancel',
+          role: 'cancel',
+          cssClass: 'secondary',
+          id: 'cancel-button',
+          handler: (blah) => {
+            console.log('Confirm Cancel: blah');
+          }
+        }, {
+          text: 'Okay',
+          id: 'confirm-button',
+          handler: () => {
+            console.log('Confirm Okay');
+          }
+        }
+      ]
+    });
+
+    await alert.present();
+  }
+
+  async presentAlertPrompt() {
+    const alert = await alertController.create({
+      cssClass: 'my-custom-class',
+      header: 'Prompt!',
+      inputs: [
+        {
+          name: 'name1',
+          type: 'text',
+          placeholder: 'Placeholder 1'
+        },
+        {
+          name: 'name2',
+          type: 'text',
+          id: 'name2-id',
+          value: 'hello',
+          placeholder: 'Placeholder 2'
+        },
+        // multiline input.
+        {
+          name: 'paragraph',
+          id: 'paragraph',
+          type: 'textarea',
+          placeholder: 'Placeholder 3'
+        },
+        {
+          name: 'name3',
+          value: 'http://ionicframework.com',
+          type: 'url',
+          placeholder: 'Favorite site ever'
+        },
+        // input date with min & max
+        {
+          name: 'name4',
+          type: 'date',
+          min: '2017-03-01',
+          max: '2018-01-12'
+        },
+        // input date without min nor max
+        {
+          name: 'name5',
+          type: 'date'
+        },
+        {
+          name: 'name6',
+          type: 'number',
+          min: -5,
+          max: 10
+        },
+        {
+          name: 'name7',
+          type: 'number'
+        },
+        {
+          name: 'name8',
+          type: 'password',
+          placeholder: 'Advanced Attributes',
+          cssClass: 'specialClass',
+          attributes: {
+            maxlength: 4,
+            inputmode: 'decimal'
+          }
+        }
+      ],
+      buttons: [
+        {
+          text: 'Cancel',
+          role: 'cancel',
+          cssClass: 'secondary',
+          handler: () => {
+            console.log('Confirm Cancel');
+          }
+        }, {
+          text: 'Ok',
+          handler: () => {
+            console.log('Confirm Ok');
+          }
+        }
+      ]
+    });
+
+    await alert.present();
+  }
+
+  async presentAlertRadio() {
+    const alert = await alertController.create({
+      cssClass: 'my-custom-class',
+      header: 'Radio',
+      inputs: [
+        {
+          name: 'radio1',
+          type: 'radio',
+          label: 'Radio 1',
+          value: 'value1',
+          handler: () => {
+            console.log('Radio 1 selected');
+          },
+          checked: true
+        },
+        {
+          name: 'radio2',
+          type: 'radio',
+          label: 'Radio 2',
+          value: 'value2',
+          handler: () => {
+            console.log('Radio 2 selected');
+          }
+        },
+        {
+          name: 'radio3',
+          type: 'radio',
+          label: 'Radio 3',
+          value: 'value3',
+          handler: () => {
+            console.log('Radio 3 selected');
+          }
+        },
+        {
+          name: 'radio4',
+          type: 'radio',
+          label: 'Radio 4',
+          value: 'value4',
+          handler: () => {
+            console.log('Radio 4 selected');
+          }
+        },
+        {
+          name: 'radio5',
+          type: 'radio',
+          label: 'Radio 5',
+          value: 'value5',
+          handler: () => {
+            console.log('Radio 5 selected');
+          }
+        },
+        {
+          name: 'radio6',
+          type: 'radio',
+          label: 'Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 ',
+          value: 'value6',
+          handler: () => {
+            console.log('Radio 6 selected');
+          }
+        }
+      ],
+      buttons: [
+        {
+          text: 'Cancel',
+          role: 'cancel',
+          cssClass: 'secondary',
+          handler: () => {
+            console.log('Confirm Cancel');
+          }
+        }, {
+          text: 'Ok',
+          handler: () => {
+            console.log('Confirm Ok');
+          }
+        }
+      ]
+    });
+
+    await alert.present();
+  }
+
+  async presentAlertCheckbox() {
+    const alert = await alertController.create({
+      cssClass: 'my-custom-class',
+      header: 'Checkbox',
+      inputs: [
+        {
+          name: 'checkbox1',
+          type: 'checkbox',
+          label: 'Checkbox 1',
+          value: 'value1',
+          handler: () => {
+            console.log('Checkbox 1 selected');
+          },
+          checked: true
+        },
+        {
+          name: 'checkbox2',
+          type: 'checkbox',
+          label: 'Checkbox 2',
+          value: 'value2',
+          handler: () => {
+            console.log('Checkbox 2 selected');
+          }
+        },
+
+        {
+          name: 'checkbox3',
+          type: 'checkbox',
+          label: 'Checkbox 3',
+          value: 'value3',
+          handler: () => {
+            console.log('Checkbox 3 selected');
+          }
+        },
+
+        {
+          name: 'checkbox4',
+          type: 'checkbox',
+          label: 'Checkbox 4',
+          value: 'value4',
+          handler: () => {
+            console.log('Checkbox 4 selected');
+          }
+        },
+
+        {
+          name: 'checkbox5',
+          type: 'checkbox',
+          label: 'Checkbox 5',
+          value: 'value5',
+          handler: () => {
+            console.log('Checkbox 5 selected');
+          }
+        },
+
+        {
+          name: 'checkbox6',
+          type: 'checkbox',
+          label: 'Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6',
+          value: 'value6',
+          handler: () => {
+            console.log('Checkbox 6 selected');
+          }
+        }
+      ],
+      buttons: [
+        {
+          text: 'Cancel',
+          role: 'cancel',
+          cssClass: 'secondary',
+          handler: () => {
+            console.log('Confirm Cancel');
+          }
+        }, {
+          text: 'Ok',
+          handler: () => {
+            console.log('Confirm Ok');
+          }
+        }
+      ]
+    });
+
+    await alert.present();
+  }
+
+
+  render() {
+    return [
+      <ion-content>
+        <ion-button onClick={() => this.presentAlert()}>Present Alert</ion-button>
+        <ion-button onClick={() => this.presentAlertMultipleButtons()}>Present Alert: Multiple Buttons</ion-button>
+        <ion-button onClick={() => this.presentAlertConfirm()}>Present Alert: Confirm</ion-button>
+        <ion-button onClick={() => this.presentAlertPrompt()}>Present Alert: Prompt</ion-button>
+        <ion-button onClick={() => this.presentAlertRadio()}>Present Alert: Radio</ion-button>
+        <ion-button onClick={() => this.presentAlertCheckbox()}>Present Alert: Checkbox</ion-button>
+      </ion-content>
+    ];
+  }
+}
+```

core/src/components/alert/usage/vue.md

@@ -0,0 +1,340 @@
+```html
+<template>
+  <ion-button @click="presentAlert">Show Alert</ion-button>
+  <ion-button @click="presentAlertMultipleButtons">Show Alert (multiple buttons)</ion-button>
+  <ion-button @click="presentAlertConfirm">Show Alert (confirm)</ion-button>
+  <ion-button @click="presentAlertPrompt">Show Alert (prompt)</ion-button>
+  <ion-button @click="presentAlertRadio">Show Alert (radio)</ion-button>
+  <ion-button @click="presentAlertCheckbox">Show Alert (checkbox)</ion-button>
+</template>
+
+<script>
+import { IonButton, alertController } from '@ionic/vue';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: { IonButton },
+  methods: {
+    async presentAlert() {
+      const alert = await alertController
+        .create({
+          cssClass: 'my-custom-class',
+          header: 'Alert',
+          subHeader: 'Subtitle',
+          message: 'This is an alert message.',
+          buttons: ['OK'],
+        });
+      await alert.present();
+
+      const { role } = await alert.onDidDismiss();
+      console.log('onDidDismiss resolved with role', role);
+    },
+
+    async presentAlertMultipleButtons() {
+      const alert = await alertController
+        .create({
+          cssClass: 'my-custom-class',
+          header: 'Alert',
+          subHeader: 'Subtitle',
+          message: 'This is an alert message.',
+          buttons: ['Cancel', 'Open Modal', 'Delete'],
+        });
+      return alert.present();
+    },
+
+    async presentAlertConfirm() {
+      const alert = await alertController
+        .create({
+          cssClass: 'my-custom-class',
+          header: 'Confirm!',
+          message: 'Message <strong>text</strong>!!!',
+          buttons: [
+            {
+              text: 'Cancel',
+              role: 'cancel',
+              cssClass: 'secondary',
+              id: 'cancel-button',
+              handler: blah => {
+                console.log('Confirm Cancel:', blah)
+              },
+            },
+            {
+              text: 'Okay',
+              id: 'confirm-button',
+              handler: () => {
+                console.log('Confirm Okay')
+              },
+            },
+          ],
+        });
+      return alert.present();
+    },
+
+    async presentAlertPrompt() {
+      const alert = await alertController
+        .create({
+          cssClass: 'my-custom-class',
+          header: 'Prompt!',
+          inputs: [
+            {
+              placeholder: 'Placeholder 1',
+            },
+            {
+              name: 'name2',
+              id: 'name2-id',
+              value: 'hello',
+              placeholder: 'Placeholder 2',
+            },
+            {
+              name: 'name3',
+              value: 'http://ionicframework.com',
+              type: 'url',
+              placeholder: 'Favorite site ever',
+            },
+            // input date with min & max
+            {
+              name: 'name4',
+              type: 'date',
+              min: '2017-03-01',
+              max: '2018-01-12',
+            },
+            // input date without min nor max
+            {
+              name: 'name5',
+              type: 'date',
+            },
+            {
+              name: 'name6',
+              type: 'number',
+              min: -5,
+              max: 10,
+            },
+            {
+              name: 'name7',
+              type: 'number',
+            },
+            {
+              name: 'name8',
+              type: 'password',
+              placeholder: 'Advanced Attributes',
+              cssClass: 'specialClass',
+              attributes: {
+                maxlength: 4,
+                inputmode: 'decimal'
+              }
+            }
+          ],
+          buttons: [
+            {
+              text: 'Cancel',
+              role: 'cancel',
+              cssClass: 'secondary',
+              handler: () => {
+                console.log('Confirm Cancel')
+              },
+            },
+            {
+              text: 'Ok',
+              handler: () => {
+                console.log('Confirm Ok')
+              },
+            },
+          ],
+        });
+      return alert.present();
+    },
+
+    async presentAlertRadio() {
+      const alert = await alertController
+        .create({
+          cssClass: 'my-custom-class',
+          header: 'Radio',
+          inputs: [
+            {
+              type: 'radio',
+              label: 'Radio 1',
+              value: 'value1',
+              handler: () => {
+                console.log('Radio 1 selected');
+              },
+              checked: true,
+            },
+            {
+              type: 'radio',
+              label: 'Radio 2',
+              value: 'value2',
+              handler: () => {
+                console.log('Radio 2 selected');
+              }
+            },
+            {
+              type: 'radio',
+              label: 'Radio 3',
+              value: 'value3',
+              handler: () => {
+                console.log('Radio 3 selected');
+              }
+            },
+            {
+              type: 'radio',
+              label: 'Radio 4',
+              value: 'value4',
+              handler: () => {
+                console.log('Radio 4 selected');
+              }
+            },
+            {
+              type: 'radio',
+              label: 'Radio 5',
+              value: 'value5',
+              handler: () => {
+                console.log('Radio 5 selected');
+              }
+            },
+            {
+              type: 'radio',
+              label: 'Radio 6',
+              value: 'value6',
+              handler: () => {
+                console.log('Radio 6 selected');
+              }
+            },
+          ],
+          buttons: [
+            {
+              text: 'Cancel',
+              role: 'cancel',
+              cssClass: 'secondary',
+              handler: () => {
+                console.log('Confirm Cancel')
+              },
+            },
+            {
+              text: 'Ok',
+              handler: () => {
+                console.log('Confirm Ok')
+              },
+            },
+          ],
+        });
+      return alert.present();
+    },
+
+    async presentAlertCheckbox() {
+      const alert = await alertController
+        .create({
+          cssClass: 'my-custom-class',
+          header: 'Checkbox',
+          inputs: [
+            {
+              type: 'checkbox',
+              label: 'Checkbox 1',
+              value: 'value1',
+              handler: () => {
+                console.log('Checkbox 1 selected');
+              },
+              checked: true,
+            },
+
+            {
+              type: 'checkbox',
+              label: 'Checkbox 2',
+              value: 'value2',
+              handler: () => {
+                console.log('Checkbox 2 selected');
+              }
+            },
+
+            {
+              type: 'checkbox',
+              label: 'Checkbox 3',
+              value: 'value3',
+              handler: () => {
+                console.log('Checkbox 3 selected');
+              }
+            },
+
+            {
+              type: 'checkbox',
+              label: 'Checkbox 4',
+              value: 'value4',
+              handler: () => {
+                console.log('Checkbox 4 selected');
+              }
+            },
+
+            {
+              type: 'checkbox',
+              label: 'Checkbox 5',
+              value: 'value5',
+              handler: () => {
+                console.log('Checkbox 5 selected');
+              }
+            },
+
+            {
+              type: 'checkbox',
+              label: 'Checkbox 6',
+              value: 'value6',
+              handler: () => {
+                console.log('Checkbox 6 selected');
+              }
+            },
+          ],
+          buttons: [
+            {
+              text: 'Cancel',
+              role: 'cancel',
+              cssClass: 'secondary',
+              handler: () => {
+                console.log('Confirm Cancel')
+              },
+            },
+            {
+              text: 'Ok',
+              handler: () => {
+                console.log('Confirm Ok')
+              },
+            },
+          ],
+        });
+      return alert.present();
+    },
+  },
+});
+</script>
+```
+
+Developers can also use this component directly in their template:
+
+```html
+<template>
+  <ion-button @click="setOpen(true)">Show Alert</ion-button>
+  <ion-alert
+    :is-open="isOpenRef"
+    header="Alert"
+    sub-header="Subtitle"
+    message="This is an alert message."
+    css-class="my-custom-class"
+    :buttons="buttons"
+    @didDismiss="setOpen(false)"
+  >
+  </ion-alert>
+</template>
+
+<script>
+import { IonAlert, IonButton } from '@ionic/vue';
+import { defineComponent, ref } from 'vue';
+
+export default defineComponent({
+  components: { IonAlert, IonButton },
+  setup() {
+    const isOpenRef = ref(false);
+    const setOpen = (state: boolean) => isOpenRef.value = state;
+    const buttons = ['Ok'];
+    
+    return { buttons, isOpenRef, setOpen }
+  }
+});
+</script>
+```

core/src/components/app/readme.md

@@ -0,0 +1,10 @@
+# ion-app
+
+App is a container element for an Ionic application. There should only be one `<ion-app>` element per project. An app can have many Ionic components including menus, headers, content, and footers. The overlay components get appended to the `<ion-app>` when they are presented.
+
+<!-- Auto Generated Below -->
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

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

@@ -1,37 +0,0 @@
-import { expect } from '@playwright/test';
-import { test } from '@utils/test/playwright';
-import type { E2EPage } from '@utils/test/playwright';
-
-test.describe('app: safe-area', () => {
-  const testOverlay = async (page: E2EPage, trigger: string, event: string, screenshotModifier: string) => {
-    const presentEvent = await page.spyOnEvent(event);
-
-    await page.click(trigger);
-    await presentEvent.next();
-
-    // Sometimes the inner content takes a frame or two to render
-    await page.waitForChanges();
-
-    expect(await page.screenshot()).toMatchSnapshot(`app-${screenshotModifier}-diff-${page.getSnapshotSettings()}.png`);
-  };
-  test.beforeEach(async ({ page }, testInfo) => {
-    test.skip(
-      testInfo.project.metadata.rtl === true,
-      'Safe area tests only check top and bottom edges. RTL checks are not required here.'
-    );
-
-    await page.goto(`/src/components/app/test/safe-area`);
-  });
-  test('should not have visual regressions with action sheet', async ({ page }) => {
-    await testOverlay(page, '#show-action-sheet', 'ionActionSheetDidPresent', 'action-sheet');
-  });
-  test('should not have visual regressions with menu', async ({ page }) => {
-    await testOverlay(page, '#show-menu', 'ionDidOpen', 'menu');
-  });
-  test('should not have visual regressions with picker', async ({ page }) => {
-    await testOverlay(page, '#show-picker', 'ionPickerDidPresent', 'picker');
-  });
-  test('should not have visual regressions with toast', async ({ page }) => {
-    await testOverlay(page, '#show-toast', 'ionToastDidPresent', 'toast');
-  });
-});

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

@@ -0,0 +1,37 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+test('app: safe-area', async () => {
+  const page = await newE2EPage({
+    url: '/src/components/app/test/safe-area?ionic:_testing=true',
+  });
+
+  expect(await page.compareScreenshot()).toMatchScreenshot();
+
+  // Action Sheet
+  await page.click('#show-action-sheet');
+  await page.waitForChanges();
+  const actionSheet = await page.find('ion-action-sheet');
+  expect(await page.compareScreenshot('action-sheet')).toMatchScreenshot();
+  await actionSheet.callMethod('dismiss');
+
+  // Menu
+  await page.click('#show-menu');
+  await page.waitForChanges();
+  const menu = await page.find('ion-menu');
+  expect(await page.compareScreenshot('menu')).toMatchScreenshot();
+  await menu.callMethod('close');
+
+  // Picker
+  await page.click('#show-picker');
+  await page.waitForChanges();
+  const picker = await page.find('ion-picker');
+  expect(await page.compareScreenshot('picker')).toMatchScreenshot();
+  await picker.callMethod('dismiss');
+
+  // Toast
+  await page.click('#show-toast');
+  await page.waitForChanges();
+  const toast = await page.find('ion-toast');
+  expect(await page.compareScreenshot('toast')).toMatchScreenshot();
+  await toast.callMethod('dismiss');
+});

core/src/components/avatar/readme.md

@@ -0,0 +1,145 @@
+# ion-avatar
+
+Avatars are circular components that usually wrap an image or icon. They can be used to represent a person or an object.
+
+Avatars can be used by themselves or inside of any element. If placed inside of an `ion-chip` or `ion-item`, the avatar will resize to fit the parent component. To position an avatar on the left or right side of an item, set the slot to `start` or `end`, respectively.
+
+
+<!-- Auto Generated Below -->
+
+
+## Usage
+
+### Angular / javascript
+
+```html
+<ion-avatar>
+  <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
+</ion-avatar>
+
+<ion-chip>
+  <ion-avatar>
+    <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
+  </ion-avatar>
+  <ion-label>Chip Avatar</ion-label>
+</ion-chip>
+
+<ion-item>
+  <ion-avatar slot="start">
+    <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
+  </ion-avatar>
+  <ion-label>Item Avatar</ion-label>
+</ion-item>
+```
+
+
+### React
+
+```tsx
+import React from 'react';
+import { IonAvatar, IonChip, IonItem, IonLabel, IonContent } from '@ionic/react';
+
+export const AvatarExample: React.FC = () => (
+  <IonContent>
+    <IonAvatar>
+      <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y" />
+    </IonAvatar>
+
+    <IonChip>
+      <IonAvatar>
+        <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y" />
+      </IonAvatar>
+      <IonLabel>Chip Avatar</IonLabel>
+    </IonChip>
+
+    <IonItem>
+      <IonAvatar slot="start">
+        <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y" />
+      </IonAvatar>
+      <IonLabel>Item Avatar</IonLabel>
+    </IonItem>
+  </IonContent>
+);
+```
+
+
+### Stencil
+
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'avatar-example',
+  styleUrl: 'avatar-example.css'
+})
+export class AvatarExample {
+  render() {
+    return [
+      <ion-avatar>
+        <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y"/>
+      </ion-avatar>,
+
+      <ion-chip>
+        <ion-avatar>
+          <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y"/>
+        </ion-avatar>
+        <ion-label>Chip Avatar</ion-label>
+      </ion-chip>,
+
+      <ion-item>
+        <ion-avatar slot="start">
+          <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y"/>
+        </ion-avatar>
+        <ion-label>Item Avatar</ion-label>
+      </ion-item>
+    ];
+  }
+}
+```
+
+
+### Vue
+
+```html
+<template>
+  <ion-avatar>
+    <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
+  </ion-avatar>
+
+  <ion-chip>
+    <ion-avatar>
+      <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
+    </ion-avatar>
+    <ion-label>Chip Avatar</ion-label>
+  </ion-chip>
+
+  <ion-item>
+    <ion-avatar slot="start">
+      <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
+    </ion-avatar>
+    <ion-label>Item Avatar</ion-label>
+  </ion-item>
+</template>
+
+<script>
+import { IonAvatar, IonChip, IonItem, IonLabel } from '@ionic/vue';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: { IonAvatar, IonChip, IonItem, IonLabel }
+});
+</script>
+```
+
+
+
+## CSS Custom Properties
+
+| Name              | Description                                 |
+| ----------------- | ------------------------------------------- |
+| `--border-radius` | Border radius of the avatar and inner image |
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*