add custom anim support to nav outlet

Issue number: Resolves #21320

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

`onDoubleClick` bindings on Ionic components do not fire when the
element is double clicked.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- `onDoubleClick` fires on Ionic components
- Fixed the unit testing set-up for the react test apps

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

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

.github/CODEOWNERS

@@ -11,9 +11,6 @@
 # In each subsection folders are ordered first by depth, then alphabetically.
 # This should make it easy to add new rules without breaking existing ones.
 
-# Global owners
-* @ionic-team/framework
-
 # Frameworks
 
 ## Angular
@@ -56,9 +53,6 @@
 /core/src/components/refresher/ @liamdebeasi
 /core/src/components/refresher-content/ @liamdebeasi
 
-# Codeowner should own the source, but everyone should own the tests
-/core/src/components/**/test/ @ionic-team/framework
-
 # Utilities
 
 /core/src/utils/animation/ @liamdebeasi

.github/CONTRIBUTING.md

@@ -37,7 +37,7 @@ Thanks for your interest in contributing to the Ionic Framework! :tada:
 
 ## Contributing Etiquette
 
-Please see our [Contributor Code of Conduct](https://github.com/ionic-team/ionic/blob/main/CODE_OF_CONDUCT.md) for information on our rules of conduct.
+Please see our [Contributor Code of Conduct](https://github.com/ionic-team/ionic-framework/blob/main/CODE_OF_CONDUCT.md) for information on our rules of conduct.
 
 
 ## Creating an Issue
@@ -50,9 +50,9 @@ Please see our [Contributor Code of Conduct](https://github.com/ionic-team/ionic
 
 * Issues with no clear steps to reproduce will not be triaged. If an issue is labeled with "needs: reply" and receives no further replies from the author of the issue for more than 14 days, it will be closed.
 
-* If you think you have found a bug, or have a new feature idea, please start by making sure it hasn't already been [reported](https://github.com/ionic-team/ionic/issues?utf8=%E2%9C%93&q=is%3Aissue). You can search through existing issues to see if there is a similar one reported. Include closed issues as it may have been closed with a solution.
+* If you think you have found a bug, or have a new feature idea, please start by making sure it hasn't already been [reported](https://github.com/ionic-team/ionic-framework/issues?utf8=%E2%9C%93&q=is%3Aissue). You can search through existing issues to see if there is a similar one reported. Include closed issues as it may have been closed with a solution.
 
-* Next, [create a new issue](https://github.com/ionic-team/ionic/issues/new/choose) that thoroughly explains the problem. Please fill out the populated issue form before submitting the issue.
+* Next, [create a new issue](https://github.com/ionic-team/ionic-framework/issues/new/choose) that thoroughly explains the problem. Please fill out the populated issue form before submitting the issue.
 
 
 ## Creating a Good Code Reproduction
@@ -63,7 +63,7 @@ A code reproduction is a small application that is built to demonstrate a partic
 
 ### Why Should You Create a Reproduction?
 
-A code reproduction of the issue you are experiencing helps us better isolate the cause of the problem. This is an important first step to getting any bug fixed! 
+A code reproduction of the issue you are experiencing helps us better isolate the cause of the problem. This is an important first step to getting any bug fixed!
 
 Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed. In other words, creating a code reproduction of the issue helps us help you.
 
@@ -84,7 +84,7 @@ Without a reliable code reproduction, it is unlikely we will be able to resolve
 
 ## Creating a Pull Request
 
-Before creating a pull request, please read our requirements that explains the minimal details to have your PR considered and merged into the codebase. 
+Before creating a pull request, please read our requirements that explains the minimal details to have your PR considered and merged into the codebase.
 
 ### Requirements
 1. PRs must reference an existing issue that describes the issue or feature being submitted.
@@ -93,7 +93,7 @@ Before creating a pull request, please read our requirements that explains the m
 
 > Note: We appreciate you taking the time to contribute! Before submitting a pull request, please take the time to comment on the issue you are wanting to resolve. This helps us prevent duplicate effort or advise if the team is already addressing the issue.
 
-* Looking for an issue to fix? Look through our issues with the [help wanted](https://github.com/ionic-team/ionic/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22) label!
+* Looking for an issue to fix? Look through our issues with the [help wanted](https://github.com/ionic-team/ionic-framework/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22) label!
 
 ### Setup
 
@@ -123,12 +123,126 @@ Before creating a pull request, please read our requirements that explains the m
 
 #### Preview Changes
 
+##### Previewing in this repository
+
 1. Run `npm start` from within the `core` directory.
 2. A browser should open at `http://localhost:3333/`.
 3. From here, navigate to one of the component's tests to preview your changes.
 4. If a test showing your change doesn't exist, [add a new test or update an existing one](#modifying-tests).
 5. To test in RTL mode, once you are in the desired component's test, add `?rtl=true` at the end of the url; for example: `http://localhost:3333/src/components/alert/test/basic?rtl=true`.
 
+##### Previewing in an external app
+
+We can use `npm pack` to test Ionic Framework changes in an external app outside of this repository. Follow the below steps based on your framework.
+
+###### JavaScript
+
+Run the following commands to build the core directory and pack the changes:
+
+```bash
+cd core
+npm i
+npm run build
+npm pack --pack-destination ~
+```
+
+Then, in your Ionic Framework JavaScript app, run the following command to use the built package with the `.tgz` file that was created:
+
+```bash
+npm install file:/~/ionic-core-7.0.1.tgz
+```
+
+
+###### Angular
+
+Run the following commands to build the core & angular directories and pack the changes:
+
+```bash
+cd core
+npm i
+npm run build
+npm pack --pack-destination ~
+
+cd ../angular
+npm i
+npm run sync
+npm run build
+cd dist/
+npm pack --pack-destination ~
+```
+
+Then, in your Ionic Framework Angular app, run the following commands to use the built packages with the `.tgz` files that were created:
+
+```bash
+rm -rf .angular/
+npm install file:/~/ionic-core-7.0.1.tgz
+npm install file:/~/ionic-angular-7.0.1.tgz
+```
+
+
+###### React
+
+Run the following commands to build the core & react directories and pack the changes:
+
+```bash
+cd core
+npm i
+npm run build
+npm pack --pack-destination ~
+
+cd ../packages/react
+npm i
+npm run sync
+npm run build
+npm pack --pack-destination ~
+
+cd ../react-router
+npm i
+npm run sync
+npm run build
+npm pack --pack-destination ~
+```
+
+Then, in your Ionic Framework React app, run the following commands to use the built packages with the `.tgz` files that were created:
+
+```bash
+npm install file:/~/ionic-core-7.0.1.tgz
+npm install file:/~/ionic-react-7.0.1.tgz
+npm install file:/~/ionic-react-router-7.0.1.tgz
+```
+
+
+##### Vue
+
+Run the following commands to build the core & vue directories and pack the changes:
+
+```bash
+cd core
+npm i
+npm run build
+npm pack --pack-destination ~
+
+cd ../packages/vue
+npm i
+npm run sync
+npm run build
+npm pack --pack-destination ~
+
+cd ../vue-router
+npm i
+npm run sync
+npm run build
+npm pack --pack-destination ~
+```
+
+Then, in your Ionic Framework Vue app, run the following commands to use the built packages with the `.tgz` files that were created:
+
+```bash
+npm install file:/~/ionic-core-7.0.1.tgz
+npm install file:/~/ionic-vue-7.0.1.tgz
+npm install file:/~/ionic-vue-router-7.0.1.tgz
+```
+
 
 #### Lint Changes
 
@@ -156,6 +270,8 @@ Before creating a pull request, please read our requirements that explains the m
 3. If a new test is needed, the easiest way is to copy the `basic/` directory from the component's `test/` directory, rename it, and edit the content in both the `index.html` and `e2e.ts` file (see [Screenshot Tests](#screenshot-tests) for more information on this file).
 4. The `preview/` directory is used in the documentation as a demo. Only update this test if there is a bug in the test or if the API has a change that hasn't been updated in the test.
 
+See [Ionic's E2E testing guide](../core/src/utils/test/playwright/docs/README.md) for information regarding the tools you can use to test Ionic.
+
 ##### Screenshot Tests
 
 1. If the test exists in screenshot, there will be a file named `e2e.ts` in the directory of the test.
@@ -179,9 +295,9 @@ Before creating a pull request, please read our requirements that explains the m
 #### Modifying Files
 
 1. Locate the files inside the relevant root directory:
-  - Angular: `/angular/src`
-  - React: `/packages/react/src`
-  - Vue: `/packages/vue/src`
+  - Angular: [`/angular/src`](/angular/src)
+  - React: [`/packages/react/src`](/packages/react/src)
+  - Vue: [`/packages/vue/src`](/packages/vue/src)
 2. Make your changes to the files. If the change is overly complex or out of the ordinary, add comments so we can understand the changes.
 3. Run lint on the directory and make sure there are no errors.
 4. Build the project.
@@ -192,42 +308,45 @@ Before creating a pull request, please read our requirements that explains the m
 
 #### Preview Changes
 
-1. Run `npm run start` inside of the relevant test app directory. This will sync your previously built changes into a test Ionic app:
-  - Angular: `/angular/test-app`
-  - React: `/packages/react/test-app`
-  - Vue: `/packages/vue/test-app`
-2. In a browser, navigate to the page you wish to test.
-3. Alternatively, create a new page if you need to test something that is not already there.
+##### Previewing in this repository
 
+Follow the steps in the test directory for each framework:
+  - Angular: [`/angular/test`](/angular/test/README.md)
+  - React: [`/packages/react/test`](/packages/react/test/README.md)
+  - Vue: [`/packages/vue/test`](/packages/vue/test/README.md)
+
+##### Previewing in an external app
+
+Follow the steps to [preview changes in core](#preview-changes).
 
 #### Lint Changes
 
 1. Run `npm run lint` to lint the TypeScript in the relevant directory:
-  - Angular: `/angular/src`
-  - React: `/packages/react/src`
-  - Vue: `/packages/vue/src`
+  - Angular: [`/angular/src`](/angular/src)
+  - React: [`/packages/react/src`](/packages/react/src)
+  - Vue: [`/packages/vue/src`](/packages/vue/src)
 2. If there are lint errors, run `npm run lint.fix` to automatically fix any errors. Repeat step 1 to ensure the errors have been fixed, and manually fix them if not.
 
 #### Modifying Tests
 
-1. Locate the test to modify inside the relevant test app directory:
-  - Angular: `/angular/test-app/e2e/src`
-  - React: `/packages/react/test-app/cypress/integration`
-  - Vue: `/packages/vue/test-app/tests/e2e`
+1. Locate the e2e test to modify inside the relevant test app directory:
+  - Angular: [`/angular/test/base/e2e/src`](/angular/test/base/e2e/src)
+  - React: [`/packages/react/test/base/tests/e2e/specs`](/packages/react/test/base/tests/e2e/specs)
+  - Vue: [`/packages/vue/test/base/tests/e2e/specs`](/packages/vue/test/base/tests/e2e/specs)
 2. If a test exists, modify the test by adding an example to reproduce the problem fixed or feature added.
 3. If a new test is needed, copy an existing test, rename it, and edit the content in the test file.
 4. Run `npm run test` to run your tests.
 
 #### Building Changes
 
-1. Once all changes have been made, run `npm run build` inside of the root directory. This will add your changes to any auto-generated files, if necessary.
+1. Once all changes have been made, run `npm run build` inside of the package's root directory. This will add your changes to any auto-generated files, if necessary.
 2. Review the changes and, if everything looks correct, [commit](#commit-message-format) the changes.
 3. Make sure the build has finished before committing. If you made changes to the documentation, properties, methods, or anything else that requires an update to a generate file, this needs to be committed.
 4. After the changes have been pushed, publish the branch and [create a pull request](#creating-a-pull-request).
 
 ### Submit Pull Request
 
-1. [Create a new pull request](https://github.com/ionic-team/ionic/compare) with the `main` branch as the `base`. You may need to click on `compare across forks` to find your changes.
+1. [Create a new pull request](https://github.com/ionic-team/ionic-framework/compare) with the `main` branch as the `base`. You may need to click on `compare across forks` to find your changes.
 2. See the [Creating a pull request from a fork](https://help.github.com/articles/creating-a-pull-request-from-a-fork/) GitHub help article for more information.
 3. Please fill out the provided Pull Request template to the best of your ability and include any issues that are related.
 
@@ -240,7 +359,7 @@ To expedite the process, please ensure that all feature PRs have an associated i
 
 ## Commit Message Guidelines
 
-We have very precise rules over how our git commit messages should be formatted. This leads to readable messages that are easy to follow when looking through the project history. We also use the git commit messages to generate our [changelog](https://github.com/ionic-team/ionic/blob/main/CHANGELOG.md). Our format closely resembles Angular's [commit message guidelines](https://github.com/angular/angular/blob/main/CONTRIBUTING.md#commit).
+We have very precise rules over how our git commit messages should be formatted. This leads to readable messages that are easy to follow when looking through the project history. We also use the git commit messages to generate our [changelog](https://github.com/ionic-team/ionic-framework/blob/main/CHANGELOG.md). Our format closely resembles Angular's [commit message guidelines](https://github.com/angular/angular/blob/main/CONTRIBUTING.md#commit).
 
 ### Commit Message Format
 

.github/ISSUE_TEMPLATE.md

@@ -2,7 +2,7 @@
 
 <!-- Please make sure you are posting an issue pertaining to the Ionic Framework. If you are having an issue with the Ionic Appflow services (Ionic View, Ionic Deploy, etc.) please consult the Ionic Appflow support portal (https://ionic.zendesk.com/hc/en-us) -->
 
-<!-- Please do not submit support requests or "How to" questions here. Instead, please use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/ -->
+<!-- Please do not submit support requests or "How to" questions here. Instead, please use one of these channels: https://forum.ionicframework.com/ or https://ionic.link/discord/ -->
 
 <!-- ISSUES MISSING IMPORTANT INFORMATION MAY BE CLOSED WITHOUT INVESTIGATION. -->
 
@@ -17,7 +17,7 @@
 [ ] bug report
 [ ] feature request
 
-<!-- Please do not submit support requests or "How to" questions here. Instead, please use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/ -->
+<!-- Please do not submit support requests or "How to" questions here. Instead, please use one of these channels: https://forum.ionicframework.com/ or https://ionic.link/discord -->
 
 **Current behavior:**
 <!-- Describe how the bug manifests. -->

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,19 +1,14 @@
-<!-- Please refer to our contributing documentation for any questions on submitting a pull request, or let us know here if you need any help: https://ionicframework.com/docs/building/contributing -->
+Issue number: #
 
-<!-- Some docs updates need to be made in the `ionic-docs` repo, in a separate PR. See https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#modifying-documentation for details. -->
+---------
 
-<!-- Please do not submit updates to dependencies unless it fixes an issue. --> 
+<!-- Please do not submit updates to dependencies unless it fixes an issue. -->
 
-<!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> 
+<!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. -->
 
 ## What is the current behavior?
 <!-- Please describe the current behavior that you are modifying. -->
 
-
-<!-- Issues are required for both bug fixes and features. -->
-Issue URL: 
-
-
 ## What is the new behavior?
 <!-- Please describe the behavior or changes that are being added by this PR. -->
 

.github/dependabot.yml

@@ -8,4 +8,9 @@ updates:
     allow:
       - dependency-name: "@playwright/test"
       - dependency-name: "@axe-core/playwright"
+      - dependency-name: "@stencil/angular-output-target"
       - dependency-name: "@stencil/core"
+      - dependency-name: "@stencil/react-output-target"
+      - dependency-name: "@stencil/sass"
+      - dependency-name: "@stencil/vue-output-target"
+      - dependency-name: "ionicons"

.github/ionic-issue-bot.yml

@@ -34,6 +34,18 @@ comment:
 
 
         For a guide on how to create a good reproduction, see our [Contributing Guide](https://ionicframework.com/docs/contributing/how-to-contribute#creating-a-good-code-reproduction).
+    - label: "community feedback wanted"
+      message: >
+        This issue has been labeled as `community feedback wanted`. This label is added to issues that we would like to hear from the community on before moving forward with any final decision on the feature request.
+
+
+        If the requested feature is something you would find useful for your applications, please react to the original post with 👍 (`+1`). If you would like to provide an additional use case for the feature, please post a comment.
+        
+
+        The team will review this feedback and make a final decision. Any decision will be posted on this thread, but please note that we may ultimately decide not to pursue this feature.
+
+
+        Thank you!
   dryRun: false
 
 closeAndLock:

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

@@ -1,5 +1,10 @@
-name: 'Build Ionic Core with Stencil Nightly'
-description: 'Build Ionic Core with a Nightly Build of Stencil'
+name: 'Build Ionic Core with Stencil Prerelease'
+description: 'Build Ionic Core with a Prerelease Build of Stencil'
+inputs:
+  stencil-version:
+    description: 'The NPM tag of @stencil/core to install.'
+    type: string
+    required: true
 runs:
   using: 'composite'
   steps:
@@ -12,9 +17,9 @@ runs:
       run: npm ci
       working-directory: ./core
       shell: bash
-    - name: Install Stencil Nightly
+    - name: Install Stencil ${{ inputs.stencil-version }}
       working-directory: ./core
-      run: npm i @stencil/core@nightly
+      run: npm i @stencil/core@${{ inputs.stencil-version }}
       shell: bash
     - name: Build Core
       run: npm run build -- --ci

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

@@ -4,9 +4,6 @@ runs:
   using: 'composite'
   steps:
     - uses: actions/checkout@v3
-      with:
-        # Checkout the latest commit in this branch
-        ref: ${{ github.event.pull_request.head.sha }}
     - uses: actions/setup-node@v3
       with:
         node-version: 16.x

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

@@ -22,6 +22,9 @@ runs:
     - uses: actions/setup-node@v3
       with:
         node-version: 16.x
+    - name: Install latest npm
+      run: npm install -g npm@latest
+      shell: bash
     - name: Install Dependencies
       run: lerna bootstrap --include-dependencies --scope ${{ inputs.scope }} --ignore-scripts -- --legacy-peer-deps
       shell: bash
@@ -41,6 +44,6 @@ runs:
       env:
         NPM_TOKEN: ${{ inputs.token }}
     - name: Publish to NPM
-      run: npm publish ${{ inputs.folder }} --tag ${{ inputs.tag }}
+      run: npm publish ${{ inputs.folder }} --tag ${{ inputs.tag }} --provenance
       shell: bash
       working-directory: ${{ inputs.working-directory }}

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

@@ -7,6 +7,7 @@ inputs:
     description: 'Playwright total number of test shards (ex: 4)'
   update:
     description: 'Whether or not to update the reference snapshots'
+
 runs:
   using: 'composite'
   steps:
@@ -51,7 +52,7 @@ runs:
         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')"
+          echo "hasUpdatedScreenshots=$(echo 'true')" >> $GITHUB_OUTPUT
           cd core/updated-screenshots
           zip -q -r ../../UpdatedScreenshots-${{ inputs.shard }}-${{ inputs.totalShards }}.zip core
         fi

.github/workflows/build.yml

@@ -17,9 +17,6 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3
-        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:
@@ -135,7 +132,7 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        apps: [ng14, ng15]
+        apps: [ng14, ng15, ng16]
     needs: [build-angular, build-angular-server]
     runs-on: ubuntu-latest
     steps:

.github/workflows/dev-build.yml

@@ -14,7 +14,7 @@ jobs:
       # as lerna will fail when there is a leading 0
       # See https://github.com/lerna/lerna/issues/2840
       - name: Install Dependencies
-        run: npm ci --no-package-lock
+        run: npm ci
         shell: bash
       - id: create-dev-hash
         name: Create Dev Hash
@@ -24,6 +24,8 @@ jobs:
 
   release-ionic:
     needs: [create-dev-hash]
+    permissions:
+      id-token: write
     uses: ./.github/workflows/release-ionic.yml
     with:
       tag: dev

.github/workflows/nightly.yml

@@ -17,7 +17,7 @@ jobs:
       # as lerna will fail when there is a leading 0
       # See https://github.com/lerna/lerna/issues/2840
       - name: Install Dependencies
-        run: npm ci --no-package-lock
+        run: npm ci
         shell: bash
       - id: create-nightly-hash
         name: Create Nightly Hash
@@ -29,6 +29,8 @@ jobs:
 
   release-ionic:
     needs: [create-nightly-hash]
+    permissions:
+      id-token: write
     uses: ./.github/workflows/release-ionic.yml
     with:
       tag: nightly

.github/workflows/release.yml

@@ -36,6 +36,8 @@ on:
 
 jobs:
   release-ionic:
+    permissions:
+      id-token: write
     uses: ./.github/workflows/release-ionic.yml
     with:
       tag: ${{ inputs.tag }}

.github/workflows/stencil-nightly.yml

@@ -22,7 +22,9 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3
-      - uses: ./.github/workflows/actions/build-core-stencil-nightly
+      - uses: ./.github/workflows/actions/build-core-stencil-prerelease
+        with:
+          stencil-version: nightly
 
   test-core-clean-build:
     needs: [build-core-with-stencil-nightly]

.github/workflows/stencil-v4.yml

@@ -0,0 +1,220 @@
+# This workflow is intended to run against the `HEAD` of Stencil's primary branch.
+# See https://github.com/ionic-team/stencil for contents of the repository
+name: 'Stencil v4 Build'
+
+on:
+  schedule:
+    # Run every Monday-Friday
+    # at 6:00 UTC (6:00 am UTC)
+    - cron: '00 06 * * 1-5'
+  workflow_dispatch:
+    # allows for manual invocations in the GitHub UI
+
+# 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: false
+
+jobs:
+  build-core-with-stencil-v4:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: ./.github/workflows/actions/build-core-stencil-prerelease
+        with:
+          stencil-version: v4-next
+
+  test-core-clean-build:
+    needs: [build-core-with-stencil-v4]
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: ./.github/workflows/actions/test-core-clean-build
+
+  test-core-lint:
+    needs: [build-core-with-stencil-v4]
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: ./.github/workflows/actions/test-core-lint
+
+  test-core-spec:
+    needs: [build-core-with-stencil-v4]
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: ./.github/workflows/actions/test-core-spec
+
+  test-core-screenshot:
+    strategy:
+      # This ensures that all screenshot shard
+      # failures are reported so the dev can
+      # review everything at once.
+      fail-fast: false
+      matrix:
+        # Divide the tests into n buckets
+        # and run those buckets in parallel.
+        # To increase the number of shards,
+        # 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]
+    needs: [build-core-with-stencil-v4]
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: ./.github/workflows/actions/test-core-screenshot
+        with:
+          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-with-stencil-v4]
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v3
+    - uses: ./.github/workflows/actions/build-vue
+
+  build-vue-router:
+    needs: [build-vue]
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v3
+    - uses: ./.github/workflows/actions/build-vue-router
+
+  test-vue-e2e:
+    strategy:
+      fail-fast: false
+      matrix:
+        apps: [vue3]
+    needs: [build-vue, build-vue-router]
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v3
+    - uses: ./.github/workflows/actions/test-vue-e2e
+      with:
+        app: ${{ matrix.apps }}
+
+  verify-test-vue-e2e:
+    if: ${{ always() }}
+    needs: test-vue-e2e
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check build matrix status
+        if: ${{ needs.test-vue-e2e.result != 'success' }}
+        run: exit 1
+
+  build-angular:
+    needs: [build-core-with-stencil-v4]
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v3
+    - uses: ./.github/workflows/actions/build-angular
+
+  build-angular-server:
+    needs: [build-angular]
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v3
+    - uses: ./.github/workflows/actions/build-angular-server
+
+  test-angular-e2e:
+    strategy:
+      fail-fast: false
+      matrix:
+        apps: [ng12, ng13, ng14, ng15]
+    needs: [build-angular, build-angular-server]
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v3
+    - uses: ./.github/workflows/actions/test-angular-e2e
+      with:
+        app: ${{ matrix.apps }}
+
+  verify-test-angular-e2e:
+    if: ${{ always() }}
+    needs: test-angular-e2e
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check build matrix status
+        if: ${{ needs.test-angular-e2e.result != 'success' }}
+        run: exit 1
+
+  build-react:
+    needs: [build-core-with-stencil-v4]
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v3
+    - uses: ./.github/workflows/actions/build-react
+
+  build-react-router:
+    needs: [build-react]
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v3
+    - uses: ./.github/workflows/actions/build-react-router
+
+  test-react-router-e2e:
+    strategy:
+      fail-fast: false
+      matrix:
+        apps: [reactrouter5]
+    needs: [build-react, build-react-router]
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v3
+    - uses: ./.github/workflows/actions/test-react-router-e2e
+      with:
+        app: ${{ matrix.apps }}
+
+  verify-test-react-router-e2e:
+    if: ${{ always() }}
+    needs: test-react-router-e2e
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check build matrix status
+        if: ${{ needs.test-react-router-e2e.result != 'success' }}
+        run: exit 1
+
+  test-react-e2e:
+    strategy:
+      fail-fast: false
+      matrix:
+        apps: [react17, react18]
+    needs: [build-react, build-react-router]
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v3
+    - uses: ./.github/workflows/actions/test-react-e2e
+      with:
+        app: ${{ matrix.apps }}
+
+  verify-test-react-e2e:
+    if: ${{ always() }}
+    needs: test-react-e2e
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check build matrix status
+        if: ${{ needs.test-react-e2e.result != 'success' }}
+        run: exit 1

CHANGELOG.md

@@ -3,6 +3,161 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [7.0.12](https://github.com/ionic-team/ionic-framework/compare/v7.0.11...v7.0.12) (2023-06-08)
+
+
+### Bug Fixes
+
+* **refresher:** scroll styles are reset when using non-native refresher ([#27602](https://github.com/ionic-team/ionic-framework/issues/27602)) ([92c5545](https://github.com/ionic-team/ionic-framework/commit/92c55452fdf4ac7b8d15ce75a4e867aab9321cfb)), closes [#27601](https://github.com/ionic-team/ionic-framework/issues/27601)
+
+
+
+
+
+## [7.0.11](https://github.com/ionic-team/ionic-framework/compare/v7.0.9...v7.0.11) (2023-06-07)
+
+
+### Bug Fixes
+
+* **header, footer:** resolve CSP violations with box shadow ([#27560](https://github.com/ionic-team/ionic-framework/issues/27560)) ([e75fa58](https://github.com/ionic-team/ionic-framework/commit/e75fa582c4ca507b09f62bbce649f02ca49da7a0))
+* **item-sliding:** refresh sliding behavior when options are added or removed asynchronously ([#27572](https://github.com/ionic-team/ionic-framework/issues/27572)) ([b2a226a](https://github.com/ionic-team/ionic-framework/commit/b2a226ae663695be0666cd862510d8d843c80b9a)), closes [#25578](https://github.com/ionic-team/ionic-framework/issues/25578)
+* **keyboard:** listen on correct events for keyboard lifecycle ([#27569](https://github.com/ionic-team/ionic-framework/issues/27569)) ([7871210](https://github.com/ionic-team/ionic-framework/commit/7871210e9e4ecc09353b821b60f977498a01ee8d)), closes [#27558](https://github.com/ionic-team/ionic-framework/issues/27558)
+* **radio:** radio with modern syntax is keyboard navigable ([#27530](https://github.com/ionic-team/ionic-framework/issues/27530)) ([d87e692](https://github.com/ionic-team/ionic-framework/commit/d87e692c6c2c3d146514b093853d5e262137a9e5)), closes [#27268](https://github.com/ionic-team/ionic-framework/issues/27268)
+* **select:** prevent click event from firing twice ([#27570](https://github.com/ionic-team/ionic-framework/issues/27570)) ([ba7e60e](https://github.com/ionic-team/ionic-framework/commit/ba7e60e8669b1980b9a0c6267617894e16b4a2d4))
+
+
+
+
+
+## [7.0.10](https://github.com/ionic-team/ionic-framework/compare/v7.0.9...v7.0.10) (2023-05-31)
+
+
+### Bug Fixes
+
+* **angular:** remove invalid z-index style ([#27559](https://github.com/ionic-team/ionic-framework/issues/27559)) ([2ce00cf](https://github.com/ionic-team/ionic-framework/commit/2ce00cf292e01664e02ecaf64af229d6a371c480))
+
+
+### Performance Improvements
+
+* passive event listener for focus visible ([#27568](https://github.com/ionic-team/ionic-framework/issues/27568)) ([e54bf14](https://github.com/ionic-team/ionic-framework/commit/e54bf142c39743913d982a1f1709629b4b034969)), closes [#27566](https://github.com/ionic-team/ionic-framework/issues/27566)
+
+
+
+
+
+## [7.0.9](https://github.com/ionic-team/ionic-framework/compare/v7.0.8...v7.0.9) (2023-05-25)
+
+
+### Bug Fixes
+
+* **core:** handle uncaught native keyboard exceptions ([#27514](https://github.com/ionic-team/ionic-framework/issues/27514)) ([0e7359c](https://github.com/ionic-team/ionic-framework/commit/0e7359c07f53eccb362ff2bf331396c0376ba6f3)), closes [#27503](https://github.com/ionic-team/ionic-framework/issues/27503)
+* **react, vue:** inline modals apply ion-page class ([#27481](https://github.com/ionic-team/ionic-framework/issues/27481)) ([02678f3](https://github.com/ionic-team/ionic-framework/commit/02678f3652be5139cf0c17d0f1260c145acd1a48)), closes [#27470](https://github.com/ionic-team/ionic-framework/issues/27470)
+* **segment:** remove duplicate ripple effect on pointerup ([#27448](https://github.com/ionic-team/ionic-framework/issues/27448)) ([01f9959](https://github.com/ionic-team/ionic-framework/commit/01f99597f71b35a60a70f6d76c1e3e1917978d6d)), closes [#27338](https://github.com/ionic-team/ionic-framework/issues/27338)
+
+
+
+
+
+## [7.0.8](https://github.com/ionic-team/ionic-framework/compare/v7.0.7...v7.0.8) (2023-05-24)
+
+
+### Bug Fixes
+
+* **many:** update form controls (radio, checkbox, toggle, input, select) to have consistent disabled opacity ([#27396](https://github.com/ionic-team/ionic-framework/issues/27396)) ([995a848](https://github.com/ionic-team/ionic-framework/commit/995a8485751bb4058a59c7e958b1200f8f6539fa)), closes [#27184](https://github.com/ionic-team/ionic-framework/issues/27184)
+* **picker-column:** correct RTL direction ([#27460](https://github.com/ionic-team/ionic-framework/issues/27460)) ([d3dd72f](https://github.com/ionic-team/ionic-framework/commit/d3dd72fff67b3b437106e187e75f798653d105e2)), closes [#21205](https://github.com/ionic-team/ionic-framework/issues/21205)
+* **popover:** blur translucent popover in chromium ([#27484](https://github.com/ionic-team/ionic-framework/issues/27484)) ([a59eefb](https://github.com/ionic-team/ionic-framework/commit/a59eefb6a312d338895c46d80320ebe91cccac23)), closes [#22176](https://github.com/ionic-team/ionic-framework/issues/22176)
+
+
+
+
+
+## [7.0.7](https://github.com/ionic-team/ionic-framework/compare/v7.0.6...v7.0.7) (2023-05-17)
+
+
+### Bug Fixes
+
+* **accordion:** state updates if value changes ([#27463](https://github.com/ionic-team/ionic-framework/issues/27463)) ([3cbc592](https://github.com/ionic-team/ionic-framework/commit/3cbc592154a2b76cf63dfef67cb63de94dcec887)), closes [#27461](https://github.com/ionic-team/ionic-framework/issues/27461)
+* **checkbox, radio:** update border colors to match MD2 spec ([#27357](https://github.com/ionic-team/ionic-framework/issues/27357)) ([eabc6f3](https://github.com/ionic-team/ionic-framework/commit/eabc6f357675919dd82bea29a1776c0ca1bf89fd)), closes [#27170](https://github.com/ionic-team/ionic-framework/issues/27170)
+* **datetime-button:** log error if non-datetime instance is passed ([#27456](https://github.com/ionic-team/ionic-framework/issues/27456)) ([7b7e05a](https://github.com/ionic-team/ionic-framework/commit/7b7e05aa697a51ebfac42f96aa9510d4d96336de))
+* **footer, tab-bar:** wait for resize before re-showing ([#27417](https://github.com/ionic-team/ionic-framework/issues/27417)) ([70d9854](https://github.com/ionic-team/ionic-framework/commit/70d9854d8df5259ed715e282a6ca40ca3bea6192)), closes [#25990](https://github.com/ionic-team/ionic-framework/issues/25990)
+* **many:** form controls labels have increased margin ([#27447](https://github.com/ionic-team/ionic-framework/issues/27447)) ([381de0b](https://github.com/ionic-team/ionic-framework/commit/381de0b3d324805161232d8556fffd7022fcd84c)), closes [#27129](https://github.com/ionic-team/ionic-framework/issues/27129)
+* **picker-column:** dynamically change options ([#27359](https://github.com/ionic-team/ionic-framework/issues/27359)) ([7c7fb2b](https://github.com/ionic-team/ionic-framework/commit/7c7fb2b1a3bf35b123716b2f975231ceb01dcc07)), closes [#21763](https://github.com/ionic-team/ionic-framework/issues/21763)
+* **picker-column:** prevSelected is set to the correct value ([#27458](https://github.com/ionic-team/ionic-framework/issues/27458)) ([9dc126d](https://github.com/ionic-team/ionic-framework/commit/9dc126d38727c1ca16a75cfa65daab9a630be678)), closes [#21764](https://github.com/ionic-team/ionic-framework/issues/21764)
+* **select:** floating label covers placeholder when when blurred ([#27446](https://github.com/ionic-team/ionic-framework/issues/27446)) ([921bfae](https://github.com/ionic-team/ionic-framework/commit/921bfae9e68257734a9695cab9245bb335eb88fa)), closes [#27201](https://github.com/ionic-team/ionic-framework/issues/27201)
+* **select:** modern syntax works with forms ([#27480](https://github.com/ionic-team/ionic-framework/issues/27480)) ([13d2d11](https://github.com/ionic-team/ionic-framework/commit/13d2d115d44f109c3ea2a47bcb518c6090126325)), closes [#27478](https://github.com/ionic-team/ionic-framework/issues/27478)
+* **spinner:** allow resizing of dots, bubbles, and circles ([#27424](https://github.com/ionic-team/ionic-framework/issues/27424)) ([e5ae45d](https://github.com/ionic-team/ionic-framework/commit/e5ae45d32fde7328a704a6ffa18940106a069fa2)), closes [#18115](https://github.com/ionic-team/ionic-framework/issues/18115)
+* **tab-button:** use darker text to pass a11y ([#27355](https://github.com/ionic-team/ionic-framework/issues/27355)) ([0b23814](https://github.com/ionic-team/ionic-framework/commit/0b23814e0ba167ee6b2a2e430c47823d312d8c3c))
+
+
+
+
+
+## [7.0.6](https://github.com/ionic-team/ionic-framework/compare/v7.0.5...v7.0.6) (2023-05-11)
+
+
+### Bug Fixes
+
+* **content:** prevent forceUpdate in SSR ([#27440](https://github.com/ionic-team/ionic-framework/issues/27440)) ([e930988](https://github.com/ionic-team/ionic-framework/commit/e9309880d18cf03c1c139b00fe4b80794804e3de)), closes [#27411](https://github.com/ionic-team/ionic-framework/issues/27411)
+* **item-sliding:** options display on rtl ([#27203](https://github.com/ionic-team/ionic-framework/issues/27203)) ([b16fd1d](https://github.com/ionic-team/ionic-framework/commit/b16fd1d6f962f8fb6a57eb8301ecd904e1ca2153)), closes [#26103](https://github.com/ionic-team/ionic-framework/issues/26103) [#25285](https://github.com/ionic-team/ionic-framework/issues/25285)
+* **modal, popover:** wait for contents to mount ([#27344](https://github.com/ionic-team/ionic-framework/issues/27344)) ([c98ad6f](https://github.com/ionic-team/ionic-framework/commit/c98ad6f16ab147024fb74c179218fd8ff7f87db1)), closes [#27343](https://github.com/ionic-team/ionic-framework/issues/27343)
+* **overlays:** assign incremental id to overlay host ([#27278](https://github.com/ionic-team/ionic-framework/issues/27278)) ([9313a91](https://github.com/ionic-team/ionic-framework/commit/9313a914b7802dd4327caa970906ea18e882a3ce))
+* **range:** round value to same number of decimal places as props to avoid floating point rounding errors ([#27375](https://github.com/ionic-team/ionic-framework/issues/27375)) ([6e83ba4](https://github.com/ionic-team/ionic-framework/commit/6e83ba4051922da0a179a370d5baa0c57df8b01d)), closes [#21968](https://github.com/ionic-team/ionic-framework/issues/21968)
+* **react:** remove incorrect class key from IonicReactProps ([#27432](https://github.com/ionic-team/ionic-framework/issues/27432)) ([415c44c](https://github.com/ionic-team/ionic-framework/commit/415c44c0adc231367727c14f355c982afc385172))
+* **types:** export DatetimeHighlightStyle ([#27360](https://github.com/ionic-team/ionic-framework/issues/27360)) ([a37cdb1](https://github.com/ionic-team/ionic-framework/commit/a37cdb1c5ddab96e2e95369cc4e4b04a5ef0c5c7)), closes [#27353](https://github.com/ionic-team/ionic-framework/issues/27353)
+
+
+
+
+
+## [7.0.5](https://github.com/ionic-team/ionic-framework/compare/v7.0.4...v7.0.5) (2023-05-03)
+
+
+### Bug Fixes
+
+* **many:** form components do not take up full width in slot ([#27306](https://github.com/ionic-team/ionic-framework/issues/27306)) ([bfe7b38](https://github.com/ionic-team/ionic-framework/commit/bfe7b388318aca98014a0748f678e41a0f3910ae)), closes [#27305](https://github.com/ionic-team/ionic-framework/issues/27305)
+* **scroll-assist:** set correct scroll padding ([#27261](https://github.com/ionic-team/ionic-framework/issues/27261)) ([7e1f996](https://github.com/ionic-team/ionic-framework/commit/7e1f996dc63cd414b30b22aebbfc09b0b6b4f6fc)), closes [#27257](https://github.com/ionic-team/ionic-framework/issues/27257)
+* **toggle:** swipe gesture applies to knob ([#27255](https://github.com/ionic-team/ionic-framework/issues/27255)) ([6524582](https://github.com/ionic-team/ionic-framework/commit/65245826e3a775bcb8a5d6cfd05230f53470fc66)), closes [#27254](https://github.com/ionic-team/ionic-framework/issues/27254)
+
+
+
+
+
+## [7.0.4](https://github.com/ionic-team/ionic-framework/compare/v7.0.3...v7.0.4) (2023-04-26)
+
+
+### Bug Fixes
+
+* **breadcumb:** set background when focused on md ([#27274](https://github.com/ionic-team/ionic-framework/issues/27274)) ([01e028b](https://github.com/ionic-team/ionic-framework/commit/01e028b789f84e80f20ce2be7be7f8519f925211)), closes [#27273](https://github.com/ionic-team/ionic-framework/issues/27273)
+* **ios:** scroll assist sizes input correctly ([#27253](https://github.com/ionic-team/ionic-framework/issues/27253)) ([a874992](https://github.com/ionic-team/ionic-framework/commit/a8749929e01b07043631fbc8c522d39cbc3ae798)), closes [#27249](https://github.com/ionic-team/ionic-framework/issues/27249)
+* **modal:** set default text color ([#27207](https://github.com/ionic-team/ionic-framework/issues/27207)) ([c267b43](https://github.com/ionic-team/ionic-framework/commit/c267b43396057d9fab344a30bd83d00523911dc1)), closes [#26060](https://github.com/ionic-team/ionic-framework/issues/26060) [/github.com/ionic-team/ionic-framework/blob/main/core/src/components/popover/popover.scss#L42](https://github.com//github.com/ionic-team/ionic-framework/blob/main/core/src/components/popover/popover.scss/issues/L42)
+* **react:** nav will remove components from the DOM ([#25763](https://github.com/ionic-team/ionic-framework/issues/25763)) ([beb46bf](https://github.com/ionic-team/ionic-framework/commit/beb46bf9def466c4bf54aeed2b5ccdcfcf5cd579)), closes [#25753](https://github.com/ionic-team/ionic-framework/issues/25753)
+* **select:** adjust label alignment when in a card ([#27202](https://github.com/ionic-team/ionic-framework/issues/27202)) ([5a2b87c](https://github.com/ionic-team/ionic-framework/commit/5a2b87cbcc5c789d02b29e776e2b9768d7ad5631)), closes [#27086](https://github.com/ionic-team/ionic-framework/issues/27086)
+
+
+
+
+
+## [7.0.3](https://github.com/ionic-team/ionic-framework/compare/v7.0.2...v7.0.3) (2023-04-19)
+
+
+### Bug Fixes
+
+* **accordion:** inset style respects animated property ([#27173](https://github.com/ionic-team/ionic-framework/issues/27173)) ([114fe28](https://github.com/ionic-team/ionic-framework/commit/114fe28f3cc9ee52bc5eefa569353f490ab01023)), closes [#27047](https://github.com/ionic-team/ionic-framework/issues/27047)
+* **datetime:** clamp date between min and max when using month picker ([#27185](https://github.com/ionic-team/ionic-framework/issues/27185)) ([0385c08](https://github.com/ionic-team/ionic-framework/commit/0385c0862c98c9387b38d3a4416d74a2cc132ddd)), closes [#27027](https://github.com/ionic-team/ionic-framework/issues/27027)
+* **input:** string values are emitted ([#27226](https://github.com/ionic-team/ionic-framework/issues/27226)) ([cdb0627](https://github.com/ionic-team/ionic-framework/commit/cdb0627c87299ba36da670c81f9d4e3446bb500d))
+* **many:** dynamic label support for modern form controls ([#27156](https://github.com/ionic-team/ionic-framework/issues/27156)) ([30b548b](https://github.com/ionic-team/ionic-framework/commit/30b548b167883f0a657b0410d3bcf76dbb6895e0)), closes [#27085](https://github.com/ionic-team/ionic-framework/issues/27085)
+* **menu:** export menu interfaces ([#27227](https://github.com/ionic-team/ionic-framework/issues/27227)) ([80d8c66](https://github.com/ionic-team/ionic-framework/commit/80d8c667666ffdb6b8e668ef94cc58a93045bd0e))
+* **segment-button:** update checked state on render ([#26970](https://github.com/ionic-team/ionic-framework/issues/26970)) ([16aa977](https://github.com/ionic-team/ionic-framework/commit/16aa9770bba983705d807ad363498693a0e7969b)), closes [#26830](https://github.com/ionic-team/ionic-framework/issues/26830)
+* **select:** respect --border-radius with modern template ([#27213](https://github.com/ionic-team/ionic-framework/issues/27213)) ([6ffbdbb](https://github.com/ionic-team/ionic-framework/commit/6ffbdbb3b2b69290cf25753d535bc7483bd7c6e8)), closes [#27208](https://github.com/ionic-team/ionic-framework/issues/27208)
+* **select:** text does not overlap icon ([#27125](https://github.com/ionic-team/ionic-framework/issues/27125)) ([6fc0024](https://github.com/ionic-team/ionic-framework/commit/6fc002458ad23b129a214fd34d3a2fdc33800373)), closes [#27081](https://github.com/ionic-team/ionic-framework/issues/27081)
+* **textarea:** legacy textarea respects padding ([#27219](https://github.com/ionic-team/ionic-framework/issues/27219)) ([742d429](https://github.com/ionic-team/ionic-framework/commit/742d4295ddfe40c643d9dd21ffc6d9fb3eb6f717)), closes [#27218](https://github.com/ionic-team/ionic-framework/issues/27218)
+* **toast:** screen readers announce content ([#27198](https://github.com/ionic-team/ionic-framework/issues/27198)) ([76c8b94](https://github.com/ionic-team/ionic-framework/commit/76c8b94e2a818e1b824701b788d5ed8b6e554d42)), closes [#25866](https://github.com/ionic-team/ionic-framework/issues/25866)
+* **vue:** components have correct name in Vue Dev Tools ([#27180](https://github.com/ionic-team/ionic-framework/issues/27180)) ([07941a5](https://github.com/ionic-team/ionic-framework/commit/07941a59ba68a46d1345fecec6df82fb4655a0b5)), closes [#25199](https://github.com/ionic-team/ionic-framework/issues/25199)
+
+
+
+
+
 ## [7.0.2](https://github.com/ionic-team/ionic-framework/compare/v7.0.1...v7.0.2) (2023-04-12)
 
 

angular/CHANGELOG.md

@@ -3,6 +3,93 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [7.0.12](https://github.com/ionic-team/ionic-framework/compare/v7.0.11...v7.0.12) (2023-06-08)
+
+**Note:** Version bump only for package @ionic/angular
+
+
+
+
+
+## [7.0.11](https://github.com/ionic-team/ionic-framework/compare/v7.0.10...v7.0.11) (2023-06-07)
+
+**Note:** Version bump only for package @ionic/angular
+
+
+
+
+
+## [7.0.10](https://github.com/ionic-team/ionic-framework/compare/v7.0.9...v7.0.10) (2023-05-31)
+
+
+### Bug Fixes
+
+* **angular:** remove invalid z-index style ([#27559](https://github.com/ionic-team/ionic-framework/issues/27559)) ([2ce00cf](https://github.com/ionic-team/ionic-framework/commit/2ce00cf292e01664e02ecaf64af229d6a371c480))
+
+
+
+
+
+## [7.0.9](https://github.com/ionic-team/ionic-framework/compare/v7.0.8...v7.0.9) (2023-05-25)
+
+**Note:** Version bump only for package @ionic/angular
+
+
+
+
+
+## [7.0.8](https://github.com/ionic-team/ionic-framework/compare/v7.0.7...v7.0.8) (2023-05-24)
+
+**Note:** Version bump only for package @ionic/angular
+
+
+
+
+
+## [7.0.7](https://github.com/ionic-team/ionic-framework/compare/v7.0.6...v7.0.7) (2023-05-17)
+
+**Note:** Version bump only for package @ionic/angular
+
+
+
+
+
+## [7.0.6](https://github.com/ionic-team/ionic-framework/compare/v7.0.5...v7.0.6) (2023-05-11)
+
+
+### Bug Fixes
+
+* **modal, popover:** wait for contents to mount ([#27344](https://github.com/ionic-team/ionic-framework/issues/27344)) ([c98ad6f](https://github.com/ionic-team/ionic-framework/commit/c98ad6f16ab147024fb74c179218fd8ff7f87db1)), closes [#27343](https://github.com/ionic-team/ionic-framework/issues/27343)
+* **overlays:** assign incremental id to overlay host ([#27278](https://github.com/ionic-team/ionic-framework/issues/27278)) ([9313a91](https://github.com/ionic-team/ionic-framework/commit/9313a914b7802dd4327caa970906ea18e882a3ce))
+
+
+
+
+
+## [7.0.5](https://github.com/ionic-team/ionic-framework/compare/v7.0.4...v7.0.5) (2023-05-03)
+
+**Note:** Version bump only for package @ionic/angular
+
+
+
+
+
+## [7.0.4](https://github.com/ionic-team/ionic-framework/compare/v7.0.3...v7.0.4) (2023-04-26)
+
+**Note:** Version bump only for package @ionic/angular
+
+
+
+
+
+## [7.0.3](https://github.com/ionic-team/ionic/compare/v7.0.2...v7.0.3) (2023-04-19)
+
+**Note:** Version bump only for package @ionic/angular
+
+
+
+
+
 ## [7.0.2](https://github.com/ionic-team/ionic/compare/v7.0.1...v7.0.2) (2023-04-12)
 
 **Note:** Version bump only for package @ionic/angular

angular/README.md

@@ -7,10 +7,10 @@ Ionic Angular specific building blocks on top of [@ionic/core](https://www.npmjs
 
 * [Ionic Core Components](https://www.npmjs.com/package/@ionic/core)
 * [Ionic Documentation](https://ionicframework.com/docs/)
+* [Ionic Discord](https://ionic.link/discord)
 * [Ionic Forum](https://forum.ionicframework.com/)
 * [Ionicons](http://ionicons.com/)
 * [Stencil](https://stenciljs.com/)
-* [Stencil Worldwide Slack](https://stencil-worldwide.herokuapp.com/)
 * [Capacitor](https://capacitor.ionicframework.com/)
 
 

angular/package-lock.json

@@ -1,15 +1,15 @@
 {
   "name": "@ionic/angular",
-  "version": "7.0.2",
+  "version": "7.0.12",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/angular",
-      "version": "7.0.2",
+      "version": "7.0.12",
       "license": "MIT",
       "dependencies": {
-        "@ionic/core": "^7.0.2",
+        "@ionic/core": "^7.0.12",
         "ionicons": "^7.0.0",
         "jsonc-parser": "^3.0.0",
         "tslib": "^2.3.0"
@@ -1227,19 +1227,19 @@
       "dev": true
     },
     "node_modules/@ionic/core": {
-      "version": "7.0.2",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.0.2.tgz",
-      "integrity": "sha512-GxQsMmsyBGeK9khIPNR3zw3WvDZj3I0inKtPcd/s9hEnfndAlFFI9gckB7/zrp55xoknCRwqAYT8sGWze3sn2w==",
+      "version": "7.0.12",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.0.12.tgz",
+      "integrity": "sha512-DCBrxKQ59oghBxZOWqbJihedJ9rkVpi4ka+VGclOtndvz8PbEOsPArVUDYPGI7md3SVZ0qaVelbSwqQbyHRY7g==",
       "dependencies": {
-        "@stencil/core": "^3.2.1",
+        "@stencil/core": "^3.3.1",
         "ionicons": "^7.1.0",
         "tslib": "^2.1.0"
       }
     },
     "node_modules/@ionic/core/node_modules/@stencil/core": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-3.2.1.tgz",
-      "integrity": "sha512-Ybm4NteQBScLq3H0JML/uqo4nWjNpZw1HAAURtR5LlRm7ptzNKO5S8EnHp3m05/uyTzeh9yLpUFHY7bxGNdYLg==",
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-3.3.1.tgz",
+      "integrity": "sha512-I+660Oe9OMLiU+thjV1GgcI27dcvrSpF3xisHWBOU/4mzRtho3YW0cI8lSjcqyB1KirGTA6QeQ0Xif5UHqn8hw==",
       "bin": {
         "stencil": "bin/stencil"
       },
@@ -8104,19 +8104,19 @@
       "dev": true
     },
     "@ionic/core": {
-      "version": "7.0.2",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.0.2.tgz",
-      "integrity": "sha512-GxQsMmsyBGeK9khIPNR3zw3WvDZj3I0inKtPcd/s9hEnfndAlFFI9gckB7/zrp55xoknCRwqAYT8sGWze3sn2w==",
+      "version": "7.0.12",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.0.12.tgz",
+      "integrity": "sha512-DCBrxKQ59oghBxZOWqbJihedJ9rkVpi4ka+VGclOtndvz8PbEOsPArVUDYPGI7md3SVZ0qaVelbSwqQbyHRY7g==",
       "requires": {
-        "@stencil/core": "^3.2.1",
+        "@stencil/core": "^3.3.1",
         "ionicons": "^7.1.0",
         "tslib": "^2.1.0"
       },
       "dependencies": {
         "@stencil/core": {
-          "version": "3.2.1",
-          "resolved": "https://registry.npmjs.org/@stencil/core/-/core-3.2.1.tgz",
-          "integrity": "sha512-Ybm4NteQBScLq3H0JML/uqo4nWjNpZw1HAAURtR5LlRm7ptzNKO5S8EnHp3m05/uyTzeh9yLpUFHY7bxGNdYLg=="
+          "version": "3.3.1",
+          "resolved": "https://registry.npmjs.org/@stencil/core/-/core-3.3.1.tgz",
+          "integrity": "sha512-I+660Oe9OMLiU+thjV1GgcI27dcvrSpF3xisHWBOU/4mzRtho3YW0cI8lSjcqyB1KirGTA6QeQ0Xif5UHqn8hw=="
         }
       }
     },

angular/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/angular",
-  "version": "7.0.2",
+  "version": "7.0.12",
   "description": "Angular specific wrappers for @ionic/core",
   "keywords": [
     "ionic",
@@ -17,7 +17,7 @@
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/ionic-team/ionic.git"
+    "url": "git+https://github.com/ionic-team/ionic-framework.git"
   },
   "bugs": {
     "url": "https://github.com/ionic-team/ionic/issues"
@@ -47,7 +47,7 @@
     }
   },
   "dependencies": {
-    "@ionic/core": "^7.0.2",
+    "@ionic/core": "^7.0.12",
     "ionicons": "^7.0.0",
     "jsonc-parser": "^3.0.0",
     "tslib": "^2.3.0"

angular/scripts/package.json

@@ -5,7 +5,7 @@
   "keywords": [],
   "repository": {
     "type": "git",
-    "url": "https://github.com/ionic-team/ionic.git"
+    "url": "git+https://github.com/ionic-team/ionic-framework.git"
   },
   "license": "MIT",
   "main": "umd/index.js",

angular/src/directives/navigation/ion-tabs.ts

@@ -8,7 +8,7 @@ import { StackEvent } from './stack-utils';
 
 @Component({
   selector: 'ion-tabs',
-  template: ` <ng-content select="[slot=top]"></ng-content>
+  template: `<ng-content select="[slot=top]"></ng-content>
     <div class="tabs-inner">
       <ion-router-outlet #outlet tabs="true" (stackEvents)="onPageSelected($event)"></ion-router-outlet>
     </div>
@@ -29,7 +29,6 @@ import { StackEvent } from './stack-utils';
         height: 100%;
 
         contain: layout size style;
-        z-index: $z-index-page-container;
       }
       .tabs-inner {
         position: relative;

angular/src/directives/overlays/modal.ts

@@ -116,7 +116,7 @@ export class IonModal {
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     this.el = r.nativeElement;
 
-    this.el.addEventListener('willPresent', () => {
+    this.el.addEventListener('ionMount', () => {
       this.isCmpOpen = true;
       c.detectChanges();
     });
@@ -124,7 +124,6 @@ export class IonModal {
       this.isCmpOpen = false;
       c.detectChanges();
     });
-
     proxyOutputs(this, this.el, [
       'ionModalDidPresent',
       'ionModalWillPresent',

angular/src/providers/angular-delegate.ts

@@ -83,7 +83,8 @@ export class AngularFrameworkDelegate implements FrameworkDelegate {
           container,
           component,
           componentProps,
-          cssClasses
+          cssClasses,
+          this.elementReferenceKey
         );
         resolve(el);
       });
@@ -119,7 +120,8 @@ export const attachView = (
   container: any,
   component: any,
   params: any,
-  cssClasses: string[] | undefined
+  cssClasses: string[] | undefined,
+  elementReferenceKey: string | undefined
 ): any => {
   /**
    * Wraps the injector with a custom injector that
@@ -145,7 +147,23 @@ export const attachView = (
 
   const instance = componentRef.instance;
   const hostElement = componentRef.location.nativeElement;
+
   if (params) {
+    /**
+     * For modals and popovers, a reference to the component is
+     * added to `params` during the call to attachViewToDom. If
+     * a reference using this name is already set, this means
+     * the app is trying to use the name as a component prop,
+     * which will cause collisions.
+     */
+    if (elementReferenceKey && instance[elementReferenceKey] !== undefined) {
+      console.error(
+        `[Ionic Error]: ${elementReferenceKey} is a reserved property when using ${container.tagName.toLowerCase()}. Rename or remove the "${elementReferenceKey}" property from ${
+          component.name
+        }.`
+      );
+    }
+
     Object.assign(instance, params);
   }
   if (cssClasses) {

angular/test/README.md

@@ -6,7 +6,7 @@ Ionic Framework supports multiple versions of Angular. As a result, we need to v
 
 The Angular test app supports syncing your locally built changes for validation.
 
-1. Build the `core` and `packages/angular` projects using `npm run build`.
+1. Build the `core` and `packages/angular` directories using `npm run build`.
 2. [Build the Angular test app](#test-app-build-structure).
 3. Navigate to the built test app.
 4. Install dependencies using `npm install`.

angular/test/apps/ng14/e2e/src/angular-version.spec.ts

@@ -0,0 +1,5 @@
+it("should be on Angular 14", () => {
+  cy.visit('/');
+
+  cy.get('ion-title').contains('Angular 14');
+});

angular/test/apps/ng14/src/app/app.component.html

@@ -1,3 +0,0 @@
-<ion-app>
-  <ion-router-outlet></ion-router-outlet>
-</ion-app>

angular/test/apps/ng14/src/app/app.component.ts

@@ -1,8 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
-})
-export class AppComponent { }

angular/test/apps/ng15/e2e/src/angular-version.spec.ts

@@ -0,0 +1,5 @@
+it("should be on Angular 15", () => {
+  cy.visit('/');
+
+  cy.get('ion-title').contains('Angular 15');
+});

angular/test/apps/ng15/src/app/app.component.html

@@ -1,3 +0,0 @@
-<ion-app>
-  <ion-router-outlet></ion-router-outlet>
-</ion-app>

angular/test/apps/ng15/src/app/app.component.ts

@@ -1,8 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
-})
-export class AppComponent { }

angular/test/apps/ng16/e2e/src/angular-version.spec.ts

@@ -0,0 +1,5 @@
+it("should be on Angular 16", () => {
+  cy.visit('/');
+
+  cy.get('ion-title').contains('Angular 16');
+});

angular/test/apps/ng16/package.json

@@ -0,0 +1,70 @@
+{
+  "name": "ionic-angular-test-app",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "sync:build": "sh scripts/build-ionic.sh",
+    "sync": "sh scripts/sync.sh",
+    "build": "ng build --configuration production --no-progress",
+    "lint": "ng lint",
+    "serve:ssr": "node dist/test-app/server/main.js",
+    "build:ssr": "ng build --prod && ng run test-app:server:production",
+    "dev:ssr": "ng run test-app:serve-ssr",
+    "prerender": "ng run test-app:prerender",
+    "cy.open": "cypress open",
+    "cy.run": "cypress run",
+    "test": "concurrently \"npm run start -- --configuration production\" \"wait-on http-get://localhost:4200 && npm run cy.run\" --kill-others --success first",
+    "test.watch": "concurrently \"npm run start\" \"wait-on http-get://localhost:4200 && npm run cy.open\" --kill-others --success first"
+  },
+  "dependencies": {
+    "@angular/animations": "^16.0.0",
+    "@angular/common": "^16.0.0",
+    "@angular/compiler": "^16.0.0",
+    "@angular/core": "^16.0.0",
+    "@angular/forms": "^16.0.0",
+    "@angular/platform-browser": "^16.0.0",
+    "@angular/platform-browser-dynamic": "^16.0.0",
+    "@angular/platform-server": "^16.0.0",
+    "@angular/router": "^16.0.0",
+    "@ionic/angular": "^7.0.0",
+    "@ionic/angular-server": "^7.0.0",
+    "@nguniversal/express-engine": "^16.0.0",
+    "core-js": "^2.6.11",
+    "express": "^4.15.2",
+    "ionicons": "^7.0.4",
+    "rxjs": "~7.8.0",
+    "tslib": "^2.3.0",
+    "typescript-eslint-language-service": "^4.1.5",
+    "zone.js": "~0.13.0"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "^16.0.0",
+    "@angular-eslint/builder": "^16.0.0",
+    "@angular-eslint/eslint-plugin": "^16.0.0",
+    "@angular-eslint/eslint-plugin-template": "^16.0.0",
+    "@angular-eslint/schematics": "^16.0.0",
+    "@angular-eslint/template-parser": "^16.0.0",
+    "@angular/cli": "^16.0.0",
+    "@angular/compiler-cli": "^16.0.0",
+    "@angular/language-service": "^16.0.0",
+    "@nguniversal/builders": "^16.0.0",
+    "@types/express": "^4.17.7",
+    "@types/node": "^12.12.54",
+    "@typescript-eslint/eslint-plugin": "4.28.2",
+    "@typescript-eslint/parser": "4.28.2",
+    "concurrently": "^6.0.0",
+    "cypress": "^10.2.0",
+    "eslint": "^7.26.0",
+    "ts-loader": "^6.2.2",
+    "ts-node": "^8.3.0",
+    "typescript": "~5.0.2",
+    "wait-on": "^5.2.1",
+    "webpack": "^5.61.0",
+    "webpack-cli": "^4.9.2"
+  },
+  "engines": {
+    "node": ">= 16"
+  }
+}

angular/test/apps/ng16/src/app/version-test/version-test-routing.module.ts

@@ -0,0 +1,10 @@
+import { NgModule } from "@angular/core";
+import { RouterModule } from "@angular/router";
+
+@NgModule({
+  imports: [
+    RouterModule.forChild([])
+  ],
+  exports: [RouterModule]
+})
+export class VersionTestRoutingModule { }

angular/test/apps/ng16/tsconfig.json

@@ -0,0 +1,35 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "outDir": "./dist/out-tsc",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "sourceMap": false,
+    "declaration": false,
+    "downlevelIteration": true,
+    "experimentalDecorators": true,
+    "moduleResolution": "node",
+    "importHelpers": true,
+    "target": "ES2022",
+    "module": "ES2022",
+    "emitDecoratorMetadata": true,
+    "typeRoots": ["node_modules/@types"],
+    "lib": ["ES2022", "dom"],
+    "plugins": [
+      {
+        "name": "typescript-eslint-language-service"
+      }
+    ],
+    "useDefineForClassFields": false
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}

angular/test/base/angular.json

@@ -13,7 +13,6 @@
         "build": {
           "builder": "@angular-devkit/build-angular:browser",
           "options": {
-            "aot": true,
             "outputPath": "dist/test-app/browser",
             "index": "src/index.html",
             "main": "src/main.ts",
@@ -64,8 +63,17 @@
                   "maximumWarning": "6kb"
                 }
               ]
+            },
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
             }
-          }
+          },
+          "defaultConfiguration": "production"
         },
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
@@ -75,8 +83,12 @@
           "configurations": {
             "production": {
               "browserTarget": "test-app:build:production"
+            },
+            "development": {
+              "browserTarget": "test-app:build:development"
             }
-          }
+          },
+          "defaultConfiguration": "development"
         },
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",
@@ -136,9 +148,7 @@
     }
   },
   "cli": {
-    "schematicCollections": [
-      "@angular-eslint/schematics"
-    ],
+    "schematicCollections": ["@angular-eslint/schematics"],
     "cache": {
       "enabled": false
     }

angular/test/base/e2e/src/modal.spec.ts

@@ -121,4 +121,4 @@ describe('when in a modal', () => {
     cy.get('#set-to-null').click();
     cy.get('#inputWithFloatingLabel').should('not.have.class', 'item-has-value');
   });
-});
+});

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

@@ -1,7 +1,7 @@
 <ion-header>
   <ion-toolbar>
     <ion-title>
-      Test App
+      Test App - Angular {{ angularVersion.major }}
     </ion-title>
   </ion-toolbar>
 </ion-header>

angular/test/base/src/app/home-page/home-page.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, VERSION } from '@angular/core';
 import { AnimationBuilder, AnimationController } from '@ionic/angular';
 
 @Component({
@@ -6,6 +6,9 @@ import { AnimationBuilder, AnimationController } from '@ionic/angular';
   templateUrl: './home-page.component.html',
 })
 export class HomePageComponent {
+
+  angularVersion = VERSION;
+
   routerAnimation: AnimationBuilder = (_, opts) => {
     const { direction, enteringEl, leavingEl } = opts;
     const animation = this.animationCtrl.create().duration(500).easing('ease-out');

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

@@ -17,4 +17,4 @@
       </ion-list>
     </ion-content>
   </ng-template>
-</ion-modal>
+</ion-modal>

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

@@ -24,4 +24,5 @@ export class ModalInlineComponent implements AfterViewInit {
   onBreakpointDidChange() {
     this.breakpointDidChangeCounter++;
   }
+
 }

angular/test/base/src/polyfills.ts

@@ -25,7 +25,7 @@
  * will put import in the top of bundle, so user need to create a separate file
  * in this directory (for example: zone-flags.ts), and put the following flags
  * into that file, and then add the following code before importing zone.js.
- * import './zone-flags.ts';
+ * import './zone-flags';
  *
  * The flags allowed in zone-flags.ts are listed here.
  *
@@ -42,7 +42,7 @@
  *
  */
 
-import './zone-flags.ts';
+import './zone-flags';
 
 /***************************************************************************************************
  * Zone JS is required by default for Angular itself.

core/CHANGELOG.md

@@ -3,6 +3,162 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [7.0.12](https://github.com/ionic-team/ionic-framework/compare/v7.0.11...v7.0.12) (2023-06-08)
+
+
+### Bug Fixes
+
+* **refresher:** scroll styles are reset when using non-native refresher ([#27602](https://github.com/ionic-team/ionic-framework/issues/27602)) ([92c5545](https://github.com/ionic-team/ionic-framework/commit/92c55452fdf4ac7b8d15ce75a4e867aab9321cfb)), closes [#27601](https://github.com/ionic-team/ionic-framework/issues/27601)
+
+
+
+
+
+## [7.0.11](https://github.com/ionic-team/ionic-framework/compare/v7.0.9...v7.0.11) (2023-06-07)
+
+
+### Bug Fixes
+
+* **header, footer:** resolve CSP violations with box shadow ([#27560](https://github.com/ionic-team/ionic-framework/issues/27560)) ([e75fa58](https://github.com/ionic-team/ionic-framework/commit/e75fa582c4ca507b09f62bbce649f02ca49da7a0))
+* **item-sliding:** refresh sliding behavior when options are added or removed asynchronously ([#27572](https://github.com/ionic-team/ionic-framework/issues/27572)) ([b2a226a](https://github.com/ionic-team/ionic-framework/commit/b2a226ae663695be0666cd862510d8d843c80b9a)), closes [#25578](https://github.com/ionic-team/ionic-framework/issues/25578)
+* **keyboard:** listen on correct events for keyboard lifecycle ([#27569](https://github.com/ionic-team/ionic-framework/issues/27569)) ([7871210](https://github.com/ionic-team/ionic-framework/commit/7871210e9e4ecc09353b821b60f977498a01ee8d)), closes [#27558](https://github.com/ionic-team/ionic-framework/issues/27558)
+* **radio:** radio with modern syntax is keyboard navigable ([#27530](https://github.com/ionic-team/ionic-framework/issues/27530)) ([d87e692](https://github.com/ionic-team/ionic-framework/commit/d87e692c6c2c3d146514b093853d5e262137a9e5)), closes [#27268](https://github.com/ionic-team/ionic-framework/issues/27268)
+* **select:** prevent click event from firing twice ([#27570](https://github.com/ionic-team/ionic-framework/issues/27570)) ([ba7e60e](https://github.com/ionic-team/ionic-framework/commit/ba7e60e8669b1980b9a0c6267617894e16b4a2d4))
+
+
+### Performance Improvements
+
+* passive event listener for focus visible ([#27568](https://github.com/ionic-team/ionic-framework/issues/27568)) ([e54bf14](https://github.com/ionic-team/ionic-framework/commit/e54bf142c39743913d982a1f1709629b4b034969)), closes [#27566](https://github.com/ionic-team/ionic-framework/issues/27566)
+
+
+
+
+
+## [7.0.10](https://github.com/ionic-team/ionic-framework/compare/v7.0.9...v7.0.10) (2023-05-31)
+
+
+### Performance Improvements
+
+* passive event listener for focus visible ([#27568](https://github.com/ionic-team/ionic-framework/issues/27568)) ([e54bf14](https://github.com/ionic-team/ionic-framework/commit/e54bf142c39743913d982a1f1709629b4b034969)), closes [#27566](https://github.com/ionic-team/ionic-framework/issues/27566)
+
+
+
+
+
+## [7.0.9](https://github.com/ionic-team/ionic-framework/compare/v7.0.8...v7.0.9) (2023-05-25)
+
+
+### Bug Fixes
+
+* **core:** handle uncaught native keyboard exceptions ([#27514](https://github.com/ionic-team/ionic-framework/issues/27514)) ([0e7359c](https://github.com/ionic-team/ionic-framework/commit/0e7359c07f53eccb362ff2bf331396c0376ba6f3)), closes [#27503](https://github.com/ionic-team/ionic-framework/issues/27503)
+* **segment:** remove duplicate ripple effect on pointerup ([#27448](https://github.com/ionic-team/ionic-framework/issues/27448)) ([01f9959](https://github.com/ionic-team/ionic-framework/commit/01f99597f71b35a60a70f6d76c1e3e1917978d6d)), closes [#27338](https://github.com/ionic-team/ionic-framework/issues/27338)
+
+
+
+
+
+## [7.0.8](https://github.com/ionic-team/ionic-framework/compare/v7.0.7...v7.0.8) (2023-05-24)
+
+
+### Bug Fixes
+
+* **many:** update form controls (radio, checkbox, toggle, input, select) to have consistent disabled opacity ([#27396](https://github.com/ionic-team/ionic-framework/issues/27396)) ([995a848](https://github.com/ionic-team/ionic-framework/commit/995a8485751bb4058a59c7e958b1200f8f6539fa)), closes [#27184](https://github.com/ionic-team/ionic-framework/issues/27184)
+* **picker-column:** correct RTL direction ([#27460](https://github.com/ionic-team/ionic-framework/issues/27460)) ([d3dd72f](https://github.com/ionic-team/ionic-framework/commit/d3dd72fff67b3b437106e187e75f798653d105e2)), closes [#21205](https://github.com/ionic-team/ionic-framework/issues/21205)
+* **popover:** blur translucent popover in chromium ([#27484](https://github.com/ionic-team/ionic-framework/issues/27484)) ([a59eefb](https://github.com/ionic-team/ionic-framework/commit/a59eefb6a312d338895c46d80320ebe91cccac23)), closes [#22176](https://github.com/ionic-team/ionic-framework/issues/22176)
+
+
+
+
+
+## [7.0.7](https://github.com/ionic-team/ionic-framework/compare/v7.0.6...v7.0.7) (2023-05-17)
+
+
+### Bug Fixes
+
+* **accordion:** state updates if value changes ([#27463](https://github.com/ionic-team/ionic-framework/issues/27463)) ([3cbc592](https://github.com/ionic-team/ionic-framework/commit/3cbc592154a2b76cf63dfef67cb63de94dcec887)), closes [#27461](https://github.com/ionic-team/ionic-framework/issues/27461)
+* **checkbox, radio:** update border colors to match MD2 spec ([#27357](https://github.com/ionic-team/ionic-framework/issues/27357)) ([eabc6f3](https://github.com/ionic-team/ionic-framework/commit/eabc6f357675919dd82bea29a1776c0ca1bf89fd)), closes [#27170](https://github.com/ionic-team/ionic-framework/issues/27170)
+* **datetime-button:** log error if non-datetime instance is passed ([#27456](https://github.com/ionic-team/ionic-framework/issues/27456)) ([7b7e05a](https://github.com/ionic-team/ionic-framework/commit/7b7e05aa697a51ebfac42f96aa9510d4d96336de))
+* **footer, tab-bar:** wait for resize before re-showing ([#27417](https://github.com/ionic-team/ionic-framework/issues/27417)) ([70d9854](https://github.com/ionic-team/ionic-framework/commit/70d9854d8df5259ed715e282a6ca40ca3bea6192)), closes [#25990](https://github.com/ionic-team/ionic-framework/issues/25990)
+* **many:** form controls labels have increased margin ([#27447](https://github.com/ionic-team/ionic-framework/issues/27447)) ([381de0b](https://github.com/ionic-team/ionic-framework/commit/381de0b3d324805161232d8556fffd7022fcd84c)), closes [#27129](https://github.com/ionic-team/ionic-framework/issues/27129)
+* **picker-column:** dynamically change options ([#27359](https://github.com/ionic-team/ionic-framework/issues/27359)) ([7c7fb2b](https://github.com/ionic-team/ionic-framework/commit/7c7fb2b1a3bf35b123716b2f975231ceb01dcc07)), closes [#21763](https://github.com/ionic-team/ionic-framework/issues/21763)
+* **picker-column:** prevSelected is set to the correct value ([#27458](https://github.com/ionic-team/ionic-framework/issues/27458)) ([9dc126d](https://github.com/ionic-team/ionic-framework/commit/9dc126d38727c1ca16a75cfa65daab9a630be678)), closes [#21764](https://github.com/ionic-team/ionic-framework/issues/21764)
+* **select:** floating label covers placeholder when when blurred ([#27446](https://github.com/ionic-team/ionic-framework/issues/27446)) ([921bfae](https://github.com/ionic-team/ionic-framework/commit/921bfae9e68257734a9695cab9245bb335eb88fa)), closes [#27201](https://github.com/ionic-team/ionic-framework/issues/27201)
+* **select:** modern syntax works with forms ([#27480](https://github.com/ionic-team/ionic-framework/issues/27480)) ([13d2d11](https://github.com/ionic-team/ionic-framework/commit/13d2d115d44f109c3ea2a47bcb518c6090126325)), closes [#27478](https://github.com/ionic-team/ionic-framework/issues/27478)
+* **spinner:** allow resizing of dots, bubbles, and circles ([#27424](https://github.com/ionic-team/ionic-framework/issues/27424)) ([e5ae45d](https://github.com/ionic-team/ionic-framework/commit/e5ae45d32fde7328a704a6ffa18940106a069fa2)), closes [#18115](https://github.com/ionic-team/ionic-framework/issues/18115)
+* **tab-button:** use darker text to pass a11y ([#27355](https://github.com/ionic-team/ionic-framework/issues/27355)) ([0b23814](https://github.com/ionic-team/ionic-framework/commit/0b23814e0ba167ee6b2a2e430c47823d312d8c3c))
+
+
+
+
+
+## [7.0.6](https://github.com/ionic-team/ionic-framework/compare/v7.0.5...v7.0.6) (2023-05-11)
+
+
+### Bug Fixes
+
+* **content:** prevent forceUpdate in SSR ([#27440](https://github.com/ionic-team/ionic-framework/issues/27440)) ([e930988](https://github.com/ionic-team/ionic-framework/commit/e9309880d18cf03c1c139b00fe4b80794804e3de)), closes [#27411](https://github.com/ionic-team/ionic-framework/issues/27411)
+* **item-sliding:** options display on rtl ([#27203](https://github.com/ionic-team/ionic-framework/issues/27203)) ([b16fd1d](https://github.com/ionic-team/ionic-framework/commit/b16fd1d6f962f8fb6a57eb8301ecd904e1ca2153)), closes [#26103](https://github.com/ionic-team/ionic-framework/issues/26103) [#25285](https://github.com/ionic-team/ionic-framework/issues/25285)
+* **modal, popover:** wait for contents to mount ([#27344](https://github.com/ionic-team/ionic-framework/issues/27344)) ([c98ad6f](https://github.com/ionic-team/ionic-framework/commit/c98ad6f16ab147024fb74c179218fd8ff7f87db1)), closes [#27343](https://github.com/ionic-team/ionic-framework/issues/27343)
+* **overlays:** assign incremental id to overlay host ([#27278](https://github.com/ionic-team/ionic-framework/issues/27278)) ([9313a91](https://github.com/ionic-team/ionic-framework/commit/9313a914b7802dd4327caa970906ea18e882a3ce))
+* **range:** round value to same number of decimal places as props to avoid floating point rounding errors ([#27375](https://github.com/ionic-team/ionic-framework/issues/27375)) ([6e83ba4](https://github.com/ionic-team/ionic-framework/commit/6e83ba4051922da0a179a370d5baa0c57df8b01d)), closes [#21968](https://github.com/ionic-team/ionic-framework/issues/21968)
+* **types:** export DatetimeHighlightStyle ([#27360](https://github.com/ionic-team/ionic-framework/issues/27360)) ([a37cdb1](https://github.com/ionic-team/ionic-framework/commit/a37cdb1c5ddab96e2e95369cc4e4b04a5ef0c5c7)), closes [#27353](https://github.com/ionic-team/ionic-framework/issues/27353)
+
+
+
+
+
+## [7.0.5](https://github.com/ionic-team/ionic-framework/compare/v7.0.4...v7.0.5) (2023-05-03)
+
+
+### Bug Fixes
+
+* **many:** form components do not take up full width in slot ([#27306](https://github.com/ionic-team/ionic-framework/issues/27306)) ([bfe7b38](https://github.com/ionic-team/ionic-framework/commit/bfe7b388318aca98014a0748f678e41a0f3910ae)), closes [#27305](https://github.com/ionic-team/ionic-framework/issues/27305)
+* **scroll-assist:** set correct scroll padding ([#27261](https://github.com/ionic-team/ionic-framework/issues/27261)) ([7e1f996](https://github.com/ionic-team/ionic-framework/commit/7e1f996dc63cd414b30b22aebbfc09b0b6b4f6fc)), closes [#27257](https://github.com/ionic-team/ionic-framework/issues/27257)
+* **toggle:** swipe gesture applies to knob ([#27255](https://github.com/ionic-team/ionic-framework/issues/27255)) ([6524582](https://github.com/ionic-team/ionic-framework/commit/65245826e3a775bcb8a5d6cfd05230f53470fc66)), closes [#27254](https://github.com/ionic-team/ionic-framework/issues/27254)
+
+
+
+
+
+## [7.0.4](https://github.com/ionic-team/ionic-framework/compare/v7.0.3...v7.0.4) (2023-04-26)
+
+
+### Bug Fixes
+
+* **breadcumb:** set background when focused on md ([#27274](https://github.com/ionic-team/ionic-framework/issues/27274)) ([01e028b](https://github.com/ionic-team/ionic-framework/commit/01e028b789f84e80f20ce2be7be7f8519f925211)), closes [#27273](https://github.com/ionic-team/ionic-framework/issues/27273)
+* **ios:** scroll assist sizes input correctly ([#27253](https://github.com/ionic-team/ionic-framework/issues/27253)) ([a874992](https://github.com/ionic-team/ionic-framework/commit/a8749929e01b07043631fbc8c522d39cbc3ae798)), closes [#27249](https://github.com/ionic-team/ionic-framework/issues/27249)
+* **modal:** set default text color ([#27207](https://github.com/ionic-team/ionic-framework/issues/27207)) ([c267b43](https://github.com/ionic-team/ionic-framework/commit/c267b43396057d9fab344a30bd83d00523911dc1)), closes [#26060](https://github.com/ionic-team/ionic-framework/issues/26060) [/github.com/ionic-team/ionic-framework/blob/main/core/src/components/popover/popover.scss#L42](https://github.com//github.com/ionic-team/ionic-framework/blob/main/core/src/components/popover/popover.scss/issues/L42)
+* **select:** adjust label alignment when in a card ([#27202](https://github.com/ionic-team/ionic-framework/issues/27202)) ([5a2b87c](https://github.com/ionic-team/ionic-framework/commit/5a2b87cbcc5c789d02b29e776e2b9768d7ad5631)), closes [#27086](https://github.com/ionic-team/ionic-framework/issues/27086)
+
+
+
+
+
+## [7.0.3](https://github.com/ionic-team/ionic/compare/v7.0.1...v7.0.3) (2023-04-19)
+
+
+### Bug Fixes
+
+* **accordion:** inset style respects animated property ([#27173](https://github.com/ionic-team/ionic/issues/27173)) ([114fe28](https://github.com/ionic-team/ionic/commit/114fe28f3cc9ee52bc5eefa569353f490ab01023)), closes [#27047](https://github.com/ionic-team/ionic/issues/27047)
+* **datetime:** clamp date between min and max when using month picker ([#27185](https://github.com/ionic-team/ionic/issues/27185)) ([0385c08](https://github.com/ionic-team/ionic/commit/0385c0862c98c9387b38d3a4416d74a2cc132ddd)), closes [#27027](https://github.com/ionic-team/ionic/issues/27027)
+* **input:** string values are emitted ([#27226](https://github.com/ionic-team/ionic/issues/27226)) ([cdb0627](https://github.com/ionic-team/ionic/commit/cdb0627c87299ba36da670c81f9d4e3446bb500d))
+* **item:** ios active state has correct contrast ([#27134](https://github.com/ionic-team/ionic/issues/27134)) ([bbdb0ca](https://github.com/ionic-team/ionic/commit/bbdb0ca480d7cd46c030d1947ced712653cf122b)), closes [#000](https://github.com/ionic-team/ionic/issues/000) [#000](https://github.com/ionic-team/ionic/issues/000)
+* **many:** dynamic label support for modern form controls ([#27156](https://github.com/ionic-team/ionic/issues/27156)) ([30b548b](https://github.com/ionic-team/ionic/commit/30b548b167883f0a657b0410d3bcf76dbb6895e0)), closes [#27085](https://github.com/ionic-team/ionic/issues/27085)
+* **menu:** export menu interfaces ([#27227](https://github.com/ionic-team/ionic/issues/27227)) ([80d8c66](https://github.com/ionic-team/ionic/commit/80d8c667666ffdb6b8e668ef94cc58a93045bd0e))
+* **menu:** refs are not destroyed on unmount ([#27141](https://github.com/ionic-team/ionic/issues/27141)) ([b81b0d1](https://github.com/ionic-team/ionic/commit/b81b0d14258d7b8caf028e6cfe81772ed2f5f119)), closes [/github.com/ionic-team/ionic-framework/blob/687b37ad3e3237b874473817bb7b59143ac113ce/packages/core/src/components/menu/menu.tsx#L136-L137](https://github.com//github.com/ionic-team/ionic-framework/blob/687b37ad3e3237b874473817bb7b59143ac113ce/packages/core/src/components/menu/menu.tsx/issues/L136-L137)
+* **radio:** takes up full height in item ([#27168](https://github.com/ionic-team/ionic/issues/27168)) ([987c79f](https://github.com/ionic-team/ionic/commit/987c79f05b6791084c4526d80c8c28a28047dd58)), closes [/github.com/ionic-team/ionic-framework/blob/cb8f07c5530ffc222580a3e3bae8dc85f62c73e5/core/src/components/checkbox/checkbox.scss#L42](https://github.com//github.com/ionic-team/ionic-framework/blob/cb8f07c5530ffc222580a3e3bae8dc85f62c73e5/core/src/components/checkbox/checkbox.scss/issues/L42) [/github.com/ionic-team/ionic-framework/blob/cb8f07c5530ffc222580a3e3bae8dc85f62c73e5/core/src/components/toggle/toggle.scss#L43](https://github.com//github.com/ionic-team/ionic-framework/blob/cb8f07c5530ffc222580a3e3bae8dc85f62c73e5/core/src/components/toggle/toggle.scss/issues/L43)
+* **segment-button:** update checked state on render ([#26970](https://github.com/ionic-team/ionic/issues/26970)) ([16aa977](https://github.com/ionic-team/ionic/commit/16aa9770bba983705d807ad363498693a0e7969b)), closes [#26830](https://github.com/ionic-team/ionic/issues/26830)
+* **segment:** segment disables segment buttons created asyncronously ([#27155](https://github.com/ionic-team/ionic/issues/27155)) ([ad6b130](https://github.com/ionic-team/ionic/commit/ad6b1301cf8528f7c9ad3c52730f01861117b380))
+* **select:** respect --border-radius with modern template ([#27213](https://github.com/ionic-team/ionic/issues/27213)) ([6ffbdbb](https://github.com/ionic-team/ionic/commit/6ffbdbb3b2b69290cf25753d535bc7483bd7c6e8)), closes [#27208](https://github.com/ionic-team/ionic/issues/27208)
+* **select:** text does not overlap icon ([#27125](https://github.com/ionic-team/ionic/issues/27125)) ([6fc0024](https://github.com/ionic-team/ionic/commit/6fc002458ad23b129a214fd34d3a2fdc33800373)), closes [#27081](https://github.com/ionic-team/ionic/issues/27081)
+* **textarea:** legacy textarea respects padding ([#27219](https://github.com/ionic-team/ionic/issues/27219)) ([742d429](https://github.com/ionic-team/ionic/commit/742d4295ddfe40c643d9dd21ffc6d9fb3eb6f717)), closes [#27218](https://github.com/ionic-team/ionic/issues/27218)
+* **toast:** screen readers announce content ([#27198](https://github.com/ionic-team/ionic/issues/27198)) ([76c8b94](https://github.com/ionic-team/ionic/commit/76c8b94e2a818e1b824701b788d5ed8b6e554d42)), closes [#25866](https://github.com/ionic-team/ionic/issues/25866)
+* **vue:** components have correct name in Vue Dev Tools ([#27180](https://github.com/ionic-team/ionic/issues/27180)) ([07941a5](https://github.com/ionic-team/ionic/commit/07941a59ba68a46d1345fecec6df82fb4655a0b5)), closes [#25199](https://github.com/ionic-team/ionic/issues/25199)
+
+
+
+
+
 ## [7.0.2](https://github.com/ionic-team/ionic/compare/v7.0.1...v7.0.2) (2023-04-12)
 
 

core/README.md

@@ -40,7 +40,7 @@ The `@ionic/core` package can be used in simple HTML, or by vanilla JavaScript w
 * [@ionic/angular](https://www.npmjs.com/package/@ionic/angular)
 
 
-## Custom Elements Build (Experimental)
+## Custom Elements Build
 
 In addition to the default, self lazy-loading components built by Stencil, this package also comes with each component exported as a stand-alone custom element within `@ionic/core/components`. Each component extends `HTMLElement`, and does not lazy-load itself. Instead, this package is useful for projects already using a bundler such as Webpack or Rollup. While all components are available to be imported, the custom elements build also ensures bundlers only import what's used, and tree-shakes any unused components.
 
@@ -101,10 +101,10 @@ const showModal = async () => {
 ## Related
 
 * [Ionic Documentation](https://ionicframework.com/docs/)
+* [Ionic Discord](https://ionic.link/discord)
 * [Ionic Forum](https://forum.ionicframework.com/)
 * [Ionicons](http://ionicons.com/)
 * [Stencil](https://stenciljs.com/)
-* [Stencil Worldwide Slack](https://stencil-worldwide.herokuapp.com/)
 * [Capacitor](https://capacitor.ionicframework.com/)
 
 

core/api.txt

@@ -1252,13 +1252,13 @@ ion-select,event,ionChange,SelectChangeEventDetail<any>,true
 ion-select,event,ionDismiss,void,true
 ion-select,event,ionFocus,void,true
 ion-select,css-prop,--background
-ion-select,css-prop,--border-color Color of the select border
-ion-select,css-prop,--border-radius Radius of the select border
-ion-select,css-prop,--border-style Style of the select border
-ion-select,css-prop,--border-width Width of the select border
-ion-select,css-prop,--highlight-color-focused The color of the highlight on the select when focused
-ion-select,css-prop,--highlight-color-invalid The color of the highlight on the select when invalid
-ion-select,css-prop,--highlight-color-valid The color of the highlight on the select when valid
+ion-select,css-prop,--border-color
+ion-select,css-prop,--border-radius
+ion-select,css-prop,--border-style
+ion-select,css-prop,--border-width
+ion-select,css-prop,--highlight-color-focused
+ion-select,css-prop,--highlight-color-invalid
+ion-select,css-prop,--highlight-color-valid
 ion-select,css-prop,--padding-bottom
 ion-select,css-prop,--padding-end
 ion-select,css-prop,--padding-start

core/package-lock.json

@@ -1,30 +1,30 @@
 {
   "name": "@ionic/core",
-  "version": "7.0.2",
+  "version": "7.0.12",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/core",
-      "version": "7.0.2",
+      "version": "7.0.12",
       "license": "MIT",
       "dependencies": {
-        "@stencil/core": "^3.2.1",
+        "@stencil/core": "^3.3.1",
         "ionicons": "^7.1.0",
         "tslib": "^2.1.0"
       },
       "devDependencies": {
-        "@axe-core/playwright": "^4.6.1",
+        "@axe-core/playwright": "^4.7.2",
         "@ionic/eslint-config": "^0.3.0",
         "@ionic/prettier-config": "^2.0.0",
         "@jest/core": "^27.5.1",
-        "@playwright/test": "^1.32.3",
+        "@playwright/test": "^1.34.3",
         "@rollup/plugin-node-resolve": "^8.4.0",
         "@rollup/plugin-virtual": "^2.0.3",
-        "@stencil/angular-output-target": "^0.6.0",
-        "@stencil/react-output-target": "^0.5.0",
-        "@stencil/sass": "^3.0.0",
-        "@stencil/vue-output-target": "^0.8.1",
+        "@stencil/angular-output-target": "^0.7.1",
+        "@stencil/react-output-target": "^0.5.3",
+        "@stencil/sass": "^3.0.4",
+        "@stencil/vue-output-target": "^0.8.6",
         "@types/jest": "^27.5.2",
         "@types/node": "^14.6.0",
         "@typescript-eslint/eslint-plugin": "^5.17.0",
@@ -53,15 +53,15 @@
       "dev": true
     },
     "node_modules/@axe-core/playwright": {
-      "version": "4.6.1",
-      "resolved": "https://registry.npmjs.org/@axe-core/playwright/-/playwright-4.6.1.tgz",
-      "integrity": "sha512-XMKP2OzGfGIYpU9G9FgI2ulyjEXQDP6qtZerOwdQ7YC1w4SFgofK3ogSk0qVoy0QI+q6XWLUJMfMMkUwdTR2dA==",
+      "version": "4.7.2",
+      "resolved": "https://registry.npmjs.org/@axe-core/playwright/-/playwright-4.7.2.tgz",
+      "integrity": "sha512-k5f6KGVkPsZ7wR56XnRZYS4b1Wd8wkVTpjqeScFYZMTJxKVv3FGKoBqQVBoCphWtP0oMWQc41zQgHO6gaYTcQw==",
       "dev": true,
       "dependencies": {
-        "axe-core": "^4.6.3"
+        "axe-core": "^4.7.0"
       },
       "peerDependencies": {
-        "playwright": ">= 1.0.0"
+        "playwright-core": ">= 1.0.0"
       }
     },
     "node_modules/@babel/code-frame": {
@@ -1501,13 +1501,13 @@
       }
     },
     "node_modules/@playwright/test": {
-      "version": "1.32.3",
-      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.32.3.tgz",
-      "integrity": "sha512-BvWNvK0RfBriindxhLVabi8BRe3X0J9EVjKlcmhxjg4giWBD/xleLcg2dz7Tx0agu28rczjNIPQWznwzDwVsZQ==",
+      "version": "1.34.3",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.34.3.tgz",
+      "integrity": "sha512-zPLef6w9P6T/iT6XDYG3mvGOqOyb6eHaV9XtkunYs0+OzxBtrPAAaHotc0X+PJ00WPPnLfFBTl7mf45Mn8DBmw==",
       "dev": true,
       "dependencies": {
         "@types/node": "*",
-        "playwright-core": "1.32.3"
+        "playwright-core": "1.34.3"
       },
       "bin": {
         "playwright": "cli.js"
@@ -1585,18 +1585,18 @@
       }
     },
     "node_modules/@stencil/angular-output-target": {
-      "version": "0.6.0",
-      "resolved": "https://registry.npmjs.org/@stencil/angular-output-target/-/angular-output-target-0.6.0.tgz",
-      "integrity": "sha512-FqHeRSb125joYzT/jHg3uOz5vKNAg7m3ffI/XXoy2ENC2K9X6NgJp8zuYcqW/o9SlQ8CWuoAv5AiF+tayzDTFA==",
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/@stencil/angular-output-target/-/angular-output-target-0.7.1.tgz",
+      "integrity": "sha512-lxJbCAbyAQVAKGgEpNTjSF7GZZszbrJnNdNVgzuD1hLRFJyElA6kUSL0GQrZMbiPG5lC/cYdbQwpyWHX4xN8mw==",
       "dev": true,
       "peerDependencies": {
-        "@stencil/core": "^2.9.0 || ^3.0.0"
+        "@stencil/core": ">=2.0.0 || >=3 || >= 4.0.0-beta.0 || >= 4.0.0"
       }
     },
     "node_modules/@stencil/core": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-3.2.1.tgz",
-      "integrity": "sha512-Ybm4NteQBScLq3H0JML/uqo4nWjNpZw1HAAURtR5LlRm7ptzNKO5S8EnHp3m05/uyTzeh9yLpUFHY7bxGNdYLg==",
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-3.3.1.tgz",
+      "integrity": "sha512-I+660Oe9OMLiU+thjV1GgcI27dcvrSpF3xisHWBOU/4mzRtho3YW0cI8lSjcqyB1KirGTA6QeQ0Xif5UHqn8hw==",
       "bin": {
         "stencil": "bin/stencil"
       },
@@ -1606,30 +1606,30 @@
       }
     },
     "node_modules/@stencil/react-output-target": {
-      "version": "0.5.0",
-      "resolved": "https://registry.npmjs.org/@stencil/react-output-target/-/react-output-target-0.5.0.tgz",
-      "integrity": "sha512-m2UwgrFuVXzi1h4m6I+EWDGeZV4n1wPHkzbRCS9QaqysiQEN5VIi9zjLzvPQF7O9Gg3E/W28z0yElp0kY3VuFQ==",
+      "version": "0.5.3",
+      "resolved": "https://registry.npmjs.org/@stencil/react-output-target/-/react-output-target-0.5.3.tgz",
+      "integrity": "sha512-68jwRp35CjAcwhTJ9yFD/3n+jrHOqvEH2jreVuPVvZK+4tkhPlYlwz0d1E1RlF3jyifUSfdkWUGgXIEy8Fo3yw==",
       "dev": true,
       "peerDependencies": {
-        "@stencil/core": "^2.9.0 || ^3.0.0"
+        "@stencil/core": ">=2.0.0 || >=3 || >= 4.0.0-beta.0 || >= 4.0.0"
       }
     },
     "node_modules/@stencil/sass": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/@stencil/sass/-/sass-3.0.0.tgz",
-      "integrity": "sha512-P9NuT5G2ncy+BkQ0fAS+KDuwN+BlDr17yEAHCaEejGZDXK4hhhsxjm0ea8KCwEdDbzui4GDF6DS3VNDtUB6Hzg==",
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@stencil/sass/-/sass-3.0.4.tgz",
+      "integrity": "sha512-k1dP0A2QBx62m250FATc1hErXxXs6Jnf4TBxdL1C/dc32Kzz2n5aCT4SodBz0ebT5WMnITauZyFqYxzCzDoKag==",
       "dev": true,
       "peerDependencies": {
-        "@stencil/core": ">=2.0.0 || >=3.0.0-beta.0"
+        "@stencil/core": ">=2.0.0 || >=3.0.0-beta.0 || >= 4.0.0-beta.0 || >= 4.0.0"
       }
     },
     "node_modules/@stencil/vue-output-target": {
-      "version": "0.8.1",
-      "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.8.1.tgz",
-      "integrity": "sha512-nSpwTvDa+i1Du8wxzX8OWp0QTS5DQmiwVNjdzQWBzeI77fCvS5mTMBsXwXbtURkR7emkm/ktMU05wXX8mnbWiQ==",
+      "version": "0.8.6",
+      "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.8.6.tgz",
+      "integrity": "sha512-B1gQW8FWeU7x/KBPm9R28jYFGN5NsZTZR4jwfDMhKBmU1Q2dIxFY52ARhbrfj5tJQxKoxr2tQJD2S14r9t1v7w==",
       "dev": true,
       "peerDependencies": {
-        "@stencil/core": "^2.9.0 || ^3.0.0"
+        "@stencil/core": ">=2.0.0 || >=3 || >= 4.0.0-beta.0 || >= 4.0.0"
       }
     },
     "node_modules/@stylelint/postcss-css-in-js": {
@@ -2571,9 +2571,9 @@
       }
     },
     "node_modules/axe-core": {
-      "version": "4.6.3",
-      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.6.3.tgz",
-      "integrity": "sha512-/BQzOX780JhsxDnPpH4ZiyrJAzcd8AfzFPkv+89veFSr1rcMjuq2JDCwypKaPeB6ljHp9KjXhPpjgCvQlWYuqg==",
+      "version": "4.7.1",
+      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.7.1.tgz",
+      "integrity": "sha512-sCXXUhA+cljomZ3ZAwb8i1p3oOlkABzPy08ZDAoGcYuvtBPlQ1Ytde129ArXyHWDhfeewq7rlx9F+cUx2SSlkg==",
       "dev": true,
       "engines": {
         "node": ">=4"
@@ -8149,30 +8149,13 @@
         "node": ">=8"
       }
     },
-    "node_modules/playwright": {
-      "version": "1.32.3",
-      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.32.3.tgz",
-      "integrity": "sha512-h/ylpgoj6l/EjkfUDyx8cdOlfzC96itPpPe8BXacFkqpw/YsuxkpPyVbzEq4jw+bAJh5FLgh31Ljg2cR6HV3uw==",
-      "dev": true,
-      "hasInstallScript": true,
-      "peer": true,
-      "dependencies": {
-        "playwright-core": "1.32.3"
-      },
-      "bin": {
-        "playwright": "cli.js"
-      },
-      "engines": {
-        "node": ">=14"
-      }
-    },
     "node_modules/playwright-core": {
-      "version": "1.32.3",
-      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.32.3.tgz",
-      "integrity": "sha512-SB+cdrnu74ZIn5Ogh/8278ngEh9NEEV0vR4sJFmK04h2iZpybfbqBY0bX6+BLYWVdV12JLLI+JEFtSnYgR+mWg==",
+      "version": "1.34.3",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.34.3.tgz",
+      "integrity": "sha512-2pWd6G7OHKemc5x1r1rp8aQcpvDh7goMBZlJv6Co5vCNLVcQJdhxRL09SGaY6HcyHH9aT4tiynZabMofVasBYw==",
       "dev": true,
       "bin": {
-        "playwright": "cli.js"
+        "playwright-core": "cli.js"
       },
       "engines": {
         "node": ">=14"
@@ -10352,12 +10335,12 @@
   },
   "dependencies": {
     "@axe-core/playwright": {
-      "version": "4.6.1",
-      "resolved": "https://registry.npmjs.org/@axe-core/playwright/-/playwright-4.6.1.tgz",
-      "integrity": "sha512-XMKP2OzGfGIYpU9G9FgI2ulyjEXQDP6qtZerOwdQ7YC1w4SFgofK3ogSk0qVoy0QI+q6XWLUJMfMMkUwdTR2dA==",
+      "version": "4.7.2",
+      "resolved": "https://registry.npmjs.org/@axe-core/playwright/-/playwright-4.7.2.tgz",
+      "integrity": "sha512-k5f6KGVkPsZ7wR56XnRZYS4b1Wd8wkVTpjqeScFYZMTJxKVv3FGKoBqQVBoCphWtP0oMWQc41zQgHO6gaYTcQw==",
       "dev": true,
       "requires": {
-        "axe-core": "^4.6.3"
+        "axe-core": "^4.7.0"
       }
     },
     "@babel/code-frame": {
@@ -11398,14 +11381,14 @@
       }
     },
     "@playwright/test": {
-      "version": "1.32.3",
-      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.32.3.tgz",
-      "integrity": "sha512-BvWNvK0RfBriindxhLVabi8BRe3X0J9EVjKlcmhxjg4giWBD/xleLcg2dz7Tx0agu28rczjNIPQWznwzDwVsZQ==",
+      "version": "1.34.3",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.34.3.tgz",
+      "integrity": "sha512-zPLef6w9P6T/iT6XDYG3mvGOqOyb6eHaV9XtkunYs0+OzxBtrPAAaHotc0X+PJ00WPPnLfFBTl7mf45Mn8DBmw==",
       "dev": true,
       "requires": {
         "@types/node": "*",
         "fsevents": "2.3.2",
-        "playwright-core": "1.32.3"
+        "playwright-core": "1.34.3"
       }
     },
     "@rollup/plugin-node-resolve": {
@@ -11460,35 +11443,35 @@
       }
     },
     "@stencil/angular-output-target": {
-      "version": "0.6.0",
-      "resolved": "https://registry.npmjs.org/@stencil/angular-output-target/-/angular-output-target-0.6.0.tgz",
-      "integrity": "sha512-FqHeRSb125joYzT/jHg3uOz5vKNAg7m3ffI/XXoy2ENC2K9X6NgJp8zuYcqW/o9SlQ8CWuoAv5AiF+tayzDTFA==",
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/@stencil/angular-output-target/-/angular-output-target-0.7.1.tgz",
+      "integrity": "sha512-lxJbCAbyAQVAKGgEpNTjSF7GZZszbrJnNdNVgzuD1hLRFJyElA6kUSL0GQrZMbiPG5lC/cYdbQwpyWHX4xN8mw==",
       "dev": true,
       "requires": {}
     },
     "@stencil/core": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-3.2.1.tgz",
-      "integrity": "sha512-Ybm4NteQBScLq3H0JML/uqo4nWjNpZw1HAAURtR5LlRm7ptzNKO5S8EnHp3m05/uyTzeh9yLpUFHY7bxGNdYLg=="
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-3.3.1.tgz",
+      "integrity": "sha512-I+660Oe9OMLiU+thjV1GgcI27dcvrSpF3xisHWBOU/4mzRtho3YW0cI8lSjcqyB1KirGTA6QeQ0Xif5UHqn8hw=="
     },
     "@stencil/react-output-target": {
-      "version": "0.5.0",
-      "resolved": "https://registry.npmjs.org/@stencil/react-output-target/-/react-output-target-0.5.0.tgz",
-      "integrity": "sha512-m2UwgrFuVXzi1h4m6I+EWDGeZV4n1wPHkzbRCS9QaqysiQEN5VIi9zjLzvPQF7O9Gg3E/W28z0yElp0kY3VuFQ==",
+      "version": "0.5.3",
+      "resolved": "https://registry.npmjs.org/@stencil/react-output-target/-/react-output-target-0.5.3.tgz",
+      "integrity": "sha512-68jwRp35CjAcwhTJ9yFD/3n+jrHOqvEH2jreVuPVvZK+4tkhPlYlwz0d1E1RlF3jyifUSfdkWUGgXIEy8Fo3yw==",
       "dev": true,
       "requires": {}
     },
     "@stencil/sass": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/@stencil/sass/-/sass-3.0.0.tgz",
-      "integrity": "sha512-P9NuT5G2ncy+BkQ0fAS+KDuwN+BlDr17yEAHCaEejGZDXK4hhhsxjm0ea8KCwEdDbzui4GDF6DS3VNDtUB6Hzg==",
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@stencil/sass/-/sass-3.0.4.tgz",
+      "integrity": "sha512-k1dP0A2QBx62m250FATc1hErXxXs6Jnf4TBxdL1C/dc32Kzz2n5aCT4SodBz0ebT5WMnITauZyFqYxzCzDoKag==",
       "dev": true,
       "requires": {}
     },
     "@stencil/vue-output-target": {
-      "version": "0.8.1",
-      "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.8.1.tgz",
-      "integrity": "sha512-nSpwTvDa+i1Du8wxzX8OWp0QTS5DQmiwVNjdzQWBzeI77fCvS5mTMBsXwXbtURkR7emkm/ktMU05wXX8mnbWiQ==",
+      "version": "0.8.6",
+      "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.8.6.tgz",
+      "integrity": "sha512-B1gQW8FWeU7x/KBPm9R28jYFGN5NsZTZR4jwfDMhKBmU1Q2dIxFY52ARhbrfj5tJQxKoxr2tQJD2S14r9t1v7w==",
       "dev": true,
       "requires": {}
     },
@@ -12144,9 +12127,9 @@
       }
     },
     "axe-core": {
-      "version": "4.6.3",
-      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.6.3.tgz",
-      "integrity": "sha512-/BQzOX780JhsxDnPpH4ZiyrJAzcd8AfzFPkv+89veFSr1rcMjuq2JDCwypKaPeB6ljHp9KjXhPpjgCvQlWYuqg==",
+      "version": "4.7.1",
+      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.7.1.tgz",
+      "integrity": "sha512-sCXXUhA+cljomZ3ZAwb8i1p3oOlkABzPy08ZDAoGcYuvtBPlQ1Ytde129ArXyHWDhfeewq7rlx9F+cUx2SSlkg==",
       "dev": true
     },
     "babel-jest": {
@@ -16274,20 +16257,10 @@
         "find-up": "^4.0.0"
       }
     },
-    "playwright": {
-      "version": "1.32.3",
-      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.32.3.tgz",
-      "integrity": "sha512-h/ylpgoj6l/EjkfUDyx8cdOlfzC96itPpPe8BXacFkqpw/YsuxkpPyVbzEq4jw+bAJh5FLgh31Ljg2cR6HV3uw==",
-      "dev": true,
-      "peer": true,
-      "requires": {
-        "playwright-core": "1.32.3"
-      }
-    },
     "playwright-core": {
-      "version": "1.32.3",
-      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.32.3.tgz",
-      "integrity": "sha512-SB+cdrnu74ZIn5Ogh/8278ngEh9NEEV0vR4sJFmK04h2iZpybfbqBY0bX6+BLYWVdV12JLLI+JEFtSnYgR+mWg==",
+      "version": "1.34.3",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.34.3.tgz",
+      "integrity": "sha512-2pWd6G7OHKemc5x1r1rp8aQcpvDh7goMBZlJv6Co5vCNLVcQJdhxRL09SGaY6HcyHH9aT4tiynZabMofVasBYw==",
       "dev": true
     },
     "postcss": {

core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/core",
-  "version": "7.0.2",
+  "version": "7.0.12",
   "description": "Base components for Ionic",
   "keywords": [
     "ionic",
@@ -31,22 +31,22 @@
     "loader/"
   ],
   "dependencies": {
-    "@stencil/core": "^3.2.1",
+    "@stencil/core": "^3.3.1",
     "ionicons": "^7.1.0",
     "tslib": "^2.1.0"
   },
   "devDependencies": {
-    "@axe-core/playwright": "^4.6.1",
+    "@axe-core/playwright": "^4.7.2",
     "@ionic/eslint-config": "^0.3.0",
     "@ionic/prettier-config": "^2.0.0",
     "@jest/core": "^27.5.1",
-    "@playwright/test": "^1.32.3",
+    "@playwright/test": "^1.34.3",
     "@rollup/plugin-node-resolve": "^8.4.0",
     "@rollup/plugin-virtual": "^2.0.3",
-    "@stencil/angular-output-target": "^0.6.0",
-    "@stencil/react-output-target": "^0.5.0",
-    "@stencil/sass": "^3.0.0",
-    "@stencil/vue-output-target": "^0.8.1",
+    "@stencil/angular-output-target": "^0.7.1",
+    "@stencil/react-output-target": "^0.5.3",
+    "@stencil/sass": "^3.0.4",
+    "@stencil/vue-output-target": "^0.8.6",
     "@types/jest": "^27.5.2",
     "@types/node": "^14.6.0",
     "@typescript-eslint/eslint-plugin": "^5.17.0",
@@ -99,7 +99,7 @@
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/ionic-team/ionic.git"
+    "url": "git+https://github.com/ionic-team/ionic-framework.git"
   },
   "bugs": {
     "url": "https://github.com/ionic-team/ionic/issues"

core/playwright.config.ts

@@ -42,35 +42,6 @@ const projects: Project<PlaywrightTestOptions, PlaywrightWorkerOptions>[] = [
   }
 ];
 
-const modes = ['ios', 'md'];
-
-const generateProjects = () => {
-  const projectsWithMetadata: Project<PlaywrightTestOptions, PlaywrightWorkerOptions>[] = [];
-
-  modes.forEach(mode => {
-    projects.forEach(project => {
-      projectsWithMetadata.push({
-        ...project,
-        metadata: {
-          mode,
-          rtl: false,
-          _testing: true
-        }
-      });
-      projectsWithMetadata.push({
-        ...project,
-        metadata: {
-          mode,
-          rtl: true,
-          _testing: true
-        }
-      });
-    });
-  });
-
-  return projectsWithMetadata;
-}
-
 /**
  * See https://playwright.dev/docs/test-configuration.
  */
@@ -81,7 +52,13 @@ const config: PlaywrightTestConfig = {
      * Maximum time expect() should wait for the condition to be met.
      * For example in `await expect(locator).toHaveText();`
      */
-    timeout: 5000
+    timeout: 5000,
+    toHaveScreenshot: {
+      threshold: 0.1
+    },
+    toMatchSnapshot: {
+      threshold: 0.1
+    }
   },
   /* Fail the build on CI if you accidentally left test.only in the source code. */
   forbidOnly: !!process.env.CI,
@@ -108,7 +85,7 @@ const config: PlaywrightTestConfig = {
   },
 
   /* Configure projects for major browsers */
-  projects: generateProjects(),
+  projects,
   webServer: {
     command: 'serve -p 3333',
     port: 3333,

core/src/components.d.ts

@@ -2888,16 +2888,16 @@ export namespace Components {
     interface IonTabs {
         "getRouteId": () => Promise<RouteID | undefined>;
         /**
-          * Get the currently selected tab.
+          * Get the currently selected tab. This method is only available for vanilla JavaScript projects. The Angular, React, and Vue implementations of tabs are coupled to each framework's router.
          */
         "getSelected": () => Promise<string | undefined>;
         /**
-          * Get a specific tab by the value of its `tab` property or an element reference.
+          * Get a specific tab by the value of its `tab` property or an element reference. This method is only available for vanilla JavaScript projects. The Angular, React, and Vue implementations of tabs are coupled to each framework's router.
           * @param tab The tab instance to select. If passed a string, it should be the value of the tab's `tab` property.
          */
         "getTab": (tab: string | HTMLIonTabElement) => Promise<HTMLIonTabElement | undefined>;
         /**
-          * Select a tab by the value of its `tab` property or an element reference.
+          * Select a tab by the value of its `tab` property or an element reference. This method is only available for vanilla JavaScript projects. The Angular, React, and Vue implementations of tabs are coupled to each framework's router.
           * @param tab The tab instance to select. If passed a string, it should be the value of the tab's `tab` property.
          */
         "select": (tab: string | HTMLIonTabElement) => Promise<boolean>;
@@ -5830,6 +5830,10 @@ declare namespace LocalJSX {
           * Emitted before the modal has presented.
          */
         "onIonModalWillPresent"?: (event: IonModalCustomEvent<void>) => void;
+        /**
+          * Emitted before the modal has presented, but after the component has been mounted in the DOM. This event exists so iOS can run the entering transition properly
+         */
+        "onIonMount"?: (event: IonModalCustomEvent<void>) => void;
         /**
           * Emitted before the modal has dismissed. Shorthand for ionModalWillDismiss.
          */

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

@@ -21,7 +21,7 @@
 :host(.accordion-group-expand-inset) ::slotted(ion-accordion.accordion-next) {
   @include border-radius($accordion-md-border-radius, $accordion-md-border-radius, null, null);
 }
-:host(.accordion-group-expand-inset) ::slotted(ion-accordion):first-of-type,
+
 :host(.accordion-group-expand-inset) ::slotted(ion-accordion):first-of-type {
   @include margin(0, 0, 0, 0);
 }

core/src/components/accordion/accordion.tsx

@@ -1,5 +1,5 @@
 import type { ComponentInterface } from '@stencil/core';
-import { Component, Element, Host, Prop, State, h } from '@stencil/core';
+import { Component, Element, Host, Prop, State, Watch, h } from '@stencil/core';
 import { chevronDown } from 'ionicons/icons';
 
 import { config } from '../../global/config';
@@ -56,6 +56,10 @@ export class Accordion implements ComponentInterface {
    * value.
    */
   @Prop() value = `ion-accordion-${accordionIds++}`;
+  @Watch('value')
+  valueChanged() {
+    this.updateState();
+  }
 
   /**
    * If `true`, the accordion cannot be interacted with.
@@ -417,7 +421,7 @@ export class Accordion implements ComponentInterface {
           'accordion-disabled': disabled,
           'accordion-readonly': readonly,
 
-          'accordion-animated': config.getBoolean('animated', true),
+          'accordion-animated': this.shouldAnimate(),
         }}
       >
         <div

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

@@ -1,44 +1,46 @@
 import { expect } from '@playwright/test';
-import { test } from '@utils/test/playwright';
+import { configs, test } from '@utils/test/playwright';
 
-test.describe('accordion: a11y', () => {
-  test('accordions should be keyboard navigable', async ({ page, skip, browserName }) => {
-    // TODO(FW-1764): remove skip once issue is resolved
-    skip.browser('firefox', 'https://github.com/ionic-team/ionic-framework/issues/25070');
-    // TODO (FW-2979)
-    skip.browser('webkit', 'Safari 16 only allows text fields and pop-up menus to be focused.');
+configs().forEach(({ config, title }) => {
+  test.describe(title('accordion: a11y'), () => {
+    test('accordions should be keyboard navigable', async ({ page, skip, browserName }) => {
+      // TODO(FW-1764): remove skip once issue is resolved
+      skip.browser('firefox', 'https://github.com/ionic-team/ionic-framework/issues/25070');
+      // TODO (FW-2979)
+      skip.browser('webkit', 'Safari 16 only allows text fields and pop-up menus to be focused.');
 
-    await page.goto(`/src/components/accordion/test/a11y`);
-    const tabKey = browserName === 'webkit' ? 'Alt+Tab' : 'Tab';
+      await page.goto(`/src/components/accordion/test/a11y`, config);
+      const tabKey = browserName === 'webkit' ? 'Alt+Tab' : 'Tab';
 
-    const personalInfoHeader = page.locator('ion-accordion:first-child > ion-item');
-    const billingAddressHeader = page.locator('ion-accordion:nth-child(2) > ion-item');
-    const shippingAddressHeader = page.locator('ion-accordion:nth-child(3) > ion-item');
-    const addressInput = page.locator('#address1 input');
+      const personalInfoHeader = page.locator('ion-accordion:first-child > ion-item');
+      const billingAddressHeader = page.locator('ion-accordion:nth-child(2) > ion-item');
+      const shippingAddressHeader = page.locator('ion-accordion:nth-child(3) > ion-item');
+      const addressInput = page.locator('#address1 input');
 
-    await page.keyboard.press(tabKey);
-    await expect(personalInfoHeader).toBeFocused();
+      await page.keyboard.press(tabKey);
+      await expect(personalInfoHeader).toBeFocused();
 
-    await page.keyboard.press('ArrowDown');
-    await expect(billingAddressHeader).toBeFocused();
+      await page.keyboard.press('ArrowDown');
+      await expect(billingAddressHeader).toBeFocused();
 
-    await page.keyboard.press('ArrowDown');
-    await expect(shippingAddressHeader).toBeFocused();
+      await page.keyboard.press('ArrowDown');
+      await expect(shippingAddressHeader).toBeFocused();
 
-    await page.keyboard.press('ArrowDown');
-    await expect(personalInfoHeader).toBeFocused();
+      await page.keyboard.press('ArrowDown');
+      await expect(personalInfoHeader).toBeFocused();
 
-    await page.keyboard.press('ArrowUp');
-    await expect(shippingAddressHeader).toBeFocused();
+      await page.keyboard.press('ArrowUp');
+      await expect(shippingAddressHeader).toBeFocused();
 
-    // open Shipping Address accordion and move focus to the input inside it
-    await page.keyboard.press('Enter');
-    await page.waitForChanges();
-    await page.keyboard.press(tabKey);
-    await expect(addressInput).toBeFocused();
+      // open Shipping Address accordion and move focus to the input inside it
+      await page.keyboard.press('Enter');
+      await page.waitForChanges();
+      await page.keyboard.press(tabKey);
+      await expect(addressInput).toBeFocused();
 
-    // ensure keyboard interaction doesn't move focus from body
-    await page.keyboard.press('ArrowDown');
-    await expect(addressInput).toBeFocused();
+      // ensure keyboard interaction doesn't move focus from body
+      await page.keyboard.press('ArrowDown');
+      await expect(addressInput).toBeFocused();
+    });
   });
 });

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

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

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

@@ -4,7 +4,7 @@ import { AccordionGroup } from '../../accordion-group/accordion-group.tsx';
 import { Item } from '../../item/item.tsx';
 import { Accordion } from '../accordion.tsx';
 
-it('should open correct accordions', async () => {
+it('should open correct accordions when accordion group value is set', async () => {
   const page = await newSpecPage({
     components: [Item, Accordion, AccordionGroup],
     html: `
@@ -40,6 +40,42 @@ it('should open correct accordions', async () => {
   expect(accordions[2].classList.contains('accordion-collapsed')).toEqual(true);
 });
 
+it('should open correct accordions when accordion value is set', async () => {
+  const page = await newSpecPage({
+    components: [Item, Accordion, AccordionGroup],
+    html: `
+      <ion-accordion-group animated="false" value="first">
+        <ion-accordion>
+          <ion-item slot="header">Label</ion-item>
+          <div slot="content">Content</div>
+        </ion-accordion>
+        <ion-accordion value="second">
+          <ion-item slot="header">Label</ion-item>
+          <div slot="content">Content</div>
+        </ion-accordion>
+        <ion-accordion value="third">
+          <ion-item slot="header">Label</ion-item>
+          <div slot="content">Content</div>
+        </ion-accordion>
+      </ion-accordion-group>
+    `,
+  });
+
+  const accordionGroup = page.body.querySelector('ion-accordion-group');
+  const accordions = accordionGroup.querySelectorAll('ion-accordion');
+
+  accordions.forEach((accordion) => {
+    expect(accordion.classList.contains('accordion-collapsed')).toEqual(true);
+  });
+
+  accordions[0].value = 'first';
+  await page.waitForChanges();
+
+  expect(accordions[0].classList.contains('accordion-collapsed')).toEqual(false);
+  expect(accordions[1].classList.contains('accordion-collapsed')).toEqual(true);
+  expect(accordions[2].classList.contains('accordion-collapsed')).toEqual(true);
+});
+
 it('should open more than one accordion when multiple="true"', async () => {
   const page = await newSpecPage({
     components: [Item, Accordion, AccordionGroup],
@@ -163,3 +199,24 @@ it('should set default values if not provided', async () => {
 
   expect(accordion.classList.contains('accordion-collapsed')).toEqual(false);
 });
+
+// Verifies fix for https://github.com/ionic-team/ionic-framework/issues/27047
+it('should not have animated class when animated="false"', async () => {
+  const page = await newSpecPage({
+    components: [Item, Accordion, AccordionGroup],
+    html: `
+      <ion-accordion-group animated="false">
+        <ion-accordion>
+          <ion-item slot="header">Label</ion-item>
+          <div slot="content">Content</div>
+        </ion-accordion>
+      </ion-accordion-group>
+    `,
+  });
+
+  const accordionGroup = page.body.querySelector('ion-accordion-group')!;
+  const accordion = accordionGroup.querySelector('ion-accordion')!;
+
+  expect(accordionGroup.animated).toEqual(false);
+  expect(accordion.classList.contains('accordion-animated')).toEqual(false);
+});

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

@@ -1,53 +1,22 @@
 import { expect } from '@playwright/test';
-import { test } from '@utils/test/playwright';
+import { configs, test } from '@utils/test/playwright';
 
-test.describe('accordion: basic', () => {
-  test('should not have visual regressions', async ({ page }) => {
-    await page.goto(`/src/components/accordion/test/basic`);
+configs().forEach(({ config, screenshot, title }) => {
+  test.describe(title('accordion: basic'), () => {
+    test('should not have visual regressions', async ({ page }) => {
+      await page.goto(`/src/components/accordion/test/basic`, config);
 
-    await page.setIonViewport();
+      await page.setIonViewport();
 
-    await expect(page).toHaveScreenshot(`accordion-basic-${page.getSnapshotSettings()}.png`);
+      await expect(page).toHaveScreenshot(screenshot('accordion-basic'));
+    });
   });
 });
-
-test.describe('accordion: ionChange', () => {
-  test.beforeEach(({ skip }) => {
-    skip.rtl();
-  });
-  test('should fire ionChange when interacting with accordions', async ({ page }) => {
-    await page.setContent(`
-      <ion-accordion-group value="second">
-        <ion-accordion value="first">
-          <button slot="header">Header</button>
-          <div slot="content">First Content</div>
-        </ion-accordion>
-        <ion-accordion value="second">
-          <button slot="header">Header</button>
-          <div slot="content">Second Content</div>
-        </ion-accordion>
-        <ion-accordion value="third">
-          <button slot="header">Header</button>
-          <div slot="content">Third Content</div>
-        </ion-accordion>
-      </ion-accordion-group>
-    `);
-
-    const ionChange = await page.spyOnEvent('ionChange');
-    const accordionHeaders = page.locator('button[slot="header"]');
-
-    await accordionHeaders.nth(0).click();
-    await expect(ionChange).toHaveReceivedEventDetail({ value: 'first' });
-
-    await accordionHeaders.nth(1).click();
-    await expect(ionChange).toHaveReceivedEventDetail({ value: 'second' });
-
-    await accordionHeaders.nth(2).click();
-    await expect(ionChange).toHaveReceivedEventDetail({ value: 'third' });
-  });
-
-  test('should not fire when programmatically setting a valid value', async ({ page }) => {
-    await page.setContent(`
+configs({ directions: ['ltr'] }).forEach(({ config, title }) => {
+  test.describe(title('accordion: ionChange'), () => {
+    test.beforeEach(async ({ page }) => {
+      await page.setContent(
+        `
       <ion-accordion-group>
         <ion-accordion value="first">
           <button slot="header">Header</button>
@@ -62,13 +31,30 @@ test.describe('accordion: ionChange', () => {
           <div slot="content">Third Content</div>
         </ion-accordion>
       </ion-accordion-group>
+    `,
+        config
+      );
+    });
+    test('should fire ionChange when interacting with accordions', async ({ page }) => {
+      const ionChange = await page.spyOnEvent('ionChange');
+      const accordionHeaders = page.locator('button[slot="header"]');
 
-    `);
+      await accordionHeaders.nth(0).click();
+      await expect(ionChange).toHaveReceivedEventDetail({ value: 'first' });
 
-    const ionChange = await page.spyOnEvent('ionChange');
-    const accordionGroup = page.locator('ion-accordion-group');
+      await accordionHeaders.nth(1).click();
+      await expect(ionChange).toHaveReceivedEventDetail({ value: 'second' });
 
-    await accordionGroup.evaluate((el: HTMLIonAccordionGroupElement) => (el.value = 'second'));
-    await expect(ionChange).not.toHaveReceivedEvent();
+      await accordionHeaders.nth(2).click();
+      await expect(ionChange).toHaveReceivedEventDetail({ value: 'third' });
+    });
+
+    test('should not fire when programmatically setting a valid value', async ({ page }) => {
+      const ionChange = await page.spyOnEvent('ionChange');
+      const accordionGroup = page.locator('ion-accordion-group');
+
+      await accordionGroup.evaluate((el: HTMLIonAccordionGroupElement) => (el.value = 'second'));
+      await expect(ionChange).not.toHaveReceivedEvent();
+    });
   });
 });

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

@@ -1,32 +1,32 @@
 import { expect } from '@playwright/test';
-import { test } from '@utils/test/playwright';
+import { configs, test } from '@utils/test/playwright';
 
-test.describe('accordion: multiple', () => {
-  test('should update value and visually expand items', async ({ page, skip }) => {
-    skip.rtl();
+configs({ directions: ['ltr'] }).forEach(({ config, screenshot, title }) => {
+  test.describe(title('accordion: multiple'), () => {
+    test('should update value and visually expand items', async ({ page }) => {
+      await page.goto(`/src/components/accordion/test/multiple`, config);
+      const accordionGroup = page.locator('ion-accordion-group');
+      const diningHeader = page.locator('ion-accordion[value="dining"] ion-item[slot="header"]');
+      const attractionsHeader = page.locator('ion-accordion[value="attractions"] ion-item[slot="header"]');
 
-    await page.goto(`/src/components/accordion/test/multiple`);
-    const accordionGroup = page.locator('ion-accordion-group');
-    const diningHeader = page.locator('ion-accordion[value="dining"] ion-item[slot="header"]');
-    const attractionsHeader = page.locator('ion-accordion[value="attractions"] ion-item[slot="header"]');
+      await expect(accordionGroup).toHaveJSProperty('value', 'attractions');
 
-    await expect(accordionGroup).toHaveJSProperty('value', 'attractions');
+      await expect(accordionGroup).toHaveScreenshot(screenshot('accordion-one-open'));
 
-    await expect(accordionGroup).toHaveScreenshot(`accordion-one-open-${page.getSnapshotSettings()}.png`);
+      await diningHeader.click();
+      await page.waitForChanges();
 
-    await diningHeader.click();
-    await page.waitForChanges();
+      await expect(accordionGroup).toHaveJSProperty('value', ['attractions', 'dining']);
 
-    await expect(accordionGroup).toHaveJSProperty('value', ['attractions', 'dining']);
+      await expect(accordionGroup).toHaveScreenshot(screenshot('accordion-two-open'));
 
-    await expect(accordionGroup).toHaveScreenshot(`accordion-two-open-${page.getSnapshotSettings()}.png`);
+      await diningHeader.click();
+      await attractionsHeader.click();
+      await page.waitForChanges();
 
-    await diningHeader.click();
-    await attractionsHeader.click();
-    await page.waitForChanges();
+      await expect(accordionGroup).toHaveJSProperty('value', []);
 
-    await expect(accordionGroup).toHaveJSProperty('value', []);
-
-    await expect(accordionGroup).toHaveScreenshot(`accordion-zero-open-${page.getSnapshotSettings()}.png`);
+      await expect(accordionGroup).toHaveScreenshot(screenshot('accordion-zero-open'));
+    });
   });
 });

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

@@ -1,28 +1,30 @@
 import { expect } from '@playwright/test';
-import { test } from '@utils/test/playwright';
+import { configs, test } from '@utils/test/playwright';
 
-test.describe('accordion: nested', () => {
-  test.beforeEach(async ({ page, skip }) => {
-    skip.rtl();
+configs({ directions: ['ltr'] }).forEach(({ config, screenshot, title }) => {
+  test.describe(title('accordion: nested'), () => {
+    test('parent and child should not be disabled', async ({ page }) => {
+      await page.goto(`/src/components/accordion/test/nested`, config);
 
-    await page.goto(`/src/components/accordion/test/nested`);
-  });
+      const enabledGroup = page.locator('ion-accordion-group#enabled');
 
-  test('parent and child should not be disabled', async ({ page }) => {
-    const enabledGroup = page.locator('ion-accordion-group#enabled');
+      await expect(enabledGroup).toHaveScreenshot(screenshot('accordion-nested-enabled'));
+    });
 
-    await expect(enabledGroup).toHaveScreenshot(`accordion-nested-enabled-${page.getSnapshotSettings()}.png`);
-  });
+    test('parent should not be disabled when only child is disabled', async ({ page }) => {
+      await page.goto(`/src/components/accordion/test/nested`, config);
 
-  test('parent should not be disabled when only child is disabled', async ({ page }) => {
-    const nestedDisabledGroup = page.locator('ion-accordion-group#nested-disabled');
+      const nestedDisabledGroup = page.locator('ion-accordion-group#nested-disabled');
 
-    await expect(nestedDisabledGroup).toHaveScreenshot(`accordion-child-disabled-${page.getSnapshotSettings()}.png`);
-  });
+      await expect(nestedDisabledGroup).toHaveScreenshot(screenshot('accordion-child-disabled'));
+    });
 
-  test('parent and child should be disabled when parent is disabled', async ({ page }) => {
-    const parentDisabledGroup = page.locator('ion-accordion-group#parent-disabled');
+    test('parent and child should be disabled when parent is disabled', async ({ page }) => {
+      await page.goto(`/src/components/accordion/test/nested`, config);
 
-    await expect(parentDisabledGroup).toHaveScreenshot(`accordion-parent-disabled-${page.getSnapshotSettings()}.png`);
+      const parentDisabledGroup = page.locator('ion-accordion-group#parent-disabled');
+
+      await expect(parentDisabledGroup).toHaveScreenshot(screenshot('accordion-parent-disabled'));
+    });
   });
 });

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

@@ -1,13 +1,15 @@
 import AxeBuilder from '@axe-core/playwright';
 import { expect } from '@playwright/test';
-import { test } from '@utils/test/playwright';
+import { configs, test } from '@utils/test/playwright';
 
-test.describe('accordion: standalone', () => {
-  test('should not have accessibility violations', async ({ page }) => {
-    await page.goto(`/src/components/accordion/test/standalone`);
+configs().forEach(({ config, title }) => {
+  test.describe(title('accordion: standalone'), () => {
+    test('should not have accessibility violations', async ({ page }) => {
+      await page.goto(`/src/components/accordion/test/standalone`, config);
 
-    const results = await new AxeBuilder({ page }).analyze();
+      const results = await new AxeBuilder({ page }).analyze();
 
-    expect(results.violations).toEqual([]);
+      expect(results.violations).toEqual([]);
+    });
   });
 });

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

@@ -15,6 +15,7 @@ import {
   prepareOverlay,
   present,
   safeCall,
+  setOverlayId,
 } from '../../utils/overlays';
 import type { OverlayEventDetail } from '../../utils/overlays-interface';
 import { getClassMap } from '../../utils/theme';
@@ -311,6 +312,10 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
     this.triggerController.removeClickListener();
   }
 
+  componentWillLoad() {
+    setOverlayId(this.el);
+  }
+
   componentDidLoad() {
     /**
      * Do not create gesture if:

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

@@ -1,7 +1,7 @@
 import AxeBuilder from '@axe-core/playwright';
 import { expect } from '@playwright/test';
 import type { E2EPage } from '@utils/test/playwright';
-import { test } from '@utils/test/playwright';
+import { configs, test } from '@utils/test/playwright';
 
 const testAria = async (page: E2EPage, buttonID: string, expectedAriaLabelledBy: string | null) => {
   const didPresent = await page.spyOnEvent('ionActionSheetDidPresent');
@@ -20,38 +20,37 @@ const testAria = async (page: E2EPage, buttonID: string, expectedAriaLabelledBy:
 
   expect(ariaLabelledBy).toBe(expectedAriaLabelledBy);
 };
+configs({ directions: ['ltr'] }).forEach(({ config, title }) => {
+  test.describe(title('action-sheet: a11y'), () => {
+    test.beforeEach(async ({ page }) => {
+      await page.goto(`/src/components/action-sheet/test/a11y`, config);
+    });
+    test('should not have accessibility violations when header is defined', async ({ page }) => {
+      const button = page.locator('#bothHeaders');
+      const didPresent = await page.spyOnEvent('ionActionSheetDidPresent');
 
-test.describe('action-sheet: a11y', () => {
-  test.beforeEach(async ({ page, skip }) => {
-    skip.rtl();
-    await page.goto(`/src/components/action-sheet/test/a11y`);
-  });
+      await button.click();
+      await didPresent.next();
 
-  test('should not have accessibility violations when header is defined', async ({ page }) => {
-    const button = page.locator('#bothHeaders');
-    const didPresent = await page.spyOnEvent('ionActionSheetDidPresent');
+      /**
+       * action-sheet overlays the entire screen, so
+       * Axe will be unable to verify color contrast
+       * on elements under the backdrop.
+       */
+      const results = await new AxeBuilder({ page }).disableRules('color-contrast').analyze();
+      expect(results.violations).toEqual([]);
+    });
 
-    await button.click();
-    await didPresent.next();
+    test('should have aria-labelledby when header is set', async ({ page }) => {
+      await testAria(page, 'bothHeaders', 'action-sheet-1-header');
+    });
 
-    /**
-     * action-sheet overlays the entire screen, so
-     * Axe will be unable to verify color contrast
-     * on elements under the backdrop.
-     */
-    const results = await new AxeBuilder({ page }).disableRules('color-contrast').analyze();
-    expect(results.violations).toEqual([]);
-  });
+    test('should not have aria-labelledby when header is not set', async ({ page }) => {
+      await testAria(page, 'noHeaders', null);
+    });
 
-  test('should have aria-labelledby when header is set', async ({ page }) => {
-    await testAria(page, 'bothHeaders', 'action-sheet-1-header');
-  });
-
-  test('should not have aria-labelledby when header is not set', async ({ page }) => {
-    await testAria(page, 'noHeaders', null);
-  });
-
-  test('should allow for manually specifying aria attributes', async ({ page }) => {
-    await testAria(page, 'customAria', 'Custom title');
+    test('should allow for manually specifying aria attributes', async ({ page }) => {
+      await testAria(page, 'customAria', 'Custom title');
+    });
   });
 });

core/src/components/action-sheet/test/action-sheet-id.spec.ts

@@ -0,0 +1,41 @@
+import { newSpecPage } from '@stencil/core/testing';
+
+import { ActionSheet } from '../action-sheet';
+
+it('action sheet should be assigned an incrementing id', async () => {
+  const page = await newSpecPage({
+    components: [ActionSheet],
+    html: `<ion-action-sheet is-open="true"></ion-action-sheet>`,
+  });
+  let actionSheet: HTMLIonActionSheetElement;
+
+  actionSheet = page.body.querySelector('ion-action-sheet')!;
+
+  expect(actionSheet).not.toBe(null);
+  expect(actionSheet.getAttribute('id')).toBe('ion-overlay-1');
+
+  // Remove the action sheet from the DOM
+  actionSheet.remove();
+  await page.waitForChanges();
+
+  // Create a new action sheet to verify the id is incremented
+  actionSheet = document.createElement('ion-action-sheet');
+  actionSheet.isOpen = true;
+  page.body.appendChild(actionSheet);
+  await page.waitForChanges();
+
+  actionSheet = page.body.querySelector('ion-action-sheet')!;
+
+  expect(actionSheet.getAttribute('id')).toBe('ion-overlay-2');
+
+  // Presenting the same action sheet again should reuse the existing id
+
+  actionSheet.isOpen = false;
+  await page.waitForChanges();
+  actionSheet.isOpen = true;
+  await page.waitForChanges();
+
+  actionSheet = page.body.querySelector('ion-action-sheet')!;
+
+  expect(actionSheet.getAttribute('id')).toBe('ion-overlay-2');
+});

core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts

@@ -0,0 +1,42 @@
+import { configs, test } from '@utils/test/playwright';
+
+import { ActionSheetFixture } from './fixture';
+
+configs().forEach(({ config, screenshot, title }) => {
+  test.describe(title('action sheet: variant rendering'), () => {
+    let actionSheetFixture!: ActionSheetFixture;
+    test.beforeEach(async ({ page }) => {
+      actionSheetFixture = new ActionSheetFixture(page, screenshot);
+
+      await page.goto(`/src/components/action-sheet/test/basic`, config);
+    });
+    test('should open basic action sheet', async () => {
+      await actionSheetFixture.open('#basic');
+      await actionSheetFixture.screenshot('basic');
+
+      /**
+       * We want to test that the dismiss method
+       * actually works, but we do not need to test
+       * it every time. As a result, we only
+       * call dismiss in this test.
+       */
+      await actionSheetFixture.dismiss();
+    });
+    test('should open cancel only action sheet', async () => {
+      await actionSheetFixture.open('#cancelOnly');
+      await actionSheetFixture.screenshot('cancel-only');
+    });
+    test('should open custom action sheet', async () => {
+      await actionSheetFixture.open('#custom');
+      await actionSheetFixture.screenshot('custom');
+    });
+    test('should open scrollable action sheet', async () => {
+      await actionSheetFixture.open('#scrollableOptions');
+      await actionSheetFixture.screenshot('scrollable-options');
+    });
+    test('should open scrollable action sheet without cancel', async () => {
+      await actionSheetFixture.open('#scrollWithoutCancel');
+      await actionSheetFixture.screenshot('scroll-without-cancel');
+    });
+  });
+});