chore: discovery

.github/CODEOWNERS

@@ -11,6 +11,9 @@
 # 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
@@ -53,6 +56,9 @@
 /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

@@ -270,8 +270,6 @@ npm install file:/~/ionic-vue-router-7.0.1.tgz
 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.

.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 https://ionic.link/discord/ -->
+<!-- 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/ -->
 
 <!-- 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 https://ionic.link/discord -->
+<!-- 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/ -->
 
 **Current behavior:**
 <!-- Describe how the bug manifests. -->

.github/PULL_REQUEST_TEMPLATE.md

@@ -2,9 +2,13 @@ Issue number: #
 
 ---------
 
-<!-- Please do not submit updates to dependencies unless it fixes an issue. -->
+<!-- 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 -->
 
-<!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. -->
+<!-- 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 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. -->

.github/dependabot.yml

@@ -8,9 +8,4 @@ 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,18 +34,6 @@ 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-nightly/action.yml

@@ -1,10 +1,5 @@
-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
+name: 'Build Ionic Core with Stencil Nightly'
+description: 'Build Ionic Core with a Nightly Build of Stencil'
 runs:
   using: 'composite'
   steps:
@@ -17,9 +12,9 @@ runs:
       run: npm ci
       working-directory: ./core
       shell: bash
-    - name: Install Stencil ${{ inputs.stencil-version }}
+    - name: Install Stencil Nightly
       working-directory: ./core
-      run: npm i @stencil/core@${{ inputs.stencil-version }}
+      run: npm i @stencil/core@nightly
       shell: bash
     - name: Build Core
       run: npm run build -- --ci

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

@@ -4,6 +4,9 @@ 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/test-angular-e2e/action.yml

@@ -29,7 +29,7 @@ runs:
       shell: bash
       working-directory: ./angular/test
     - name: Install Dependencies
-      run: npm install
+      run: npm install --legacy-peer-deps
       shell: bash
       working-directory: ./angular/test/build/${{ inputs.app }}
     - name: Sync Built Changes

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

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

.github/workflows/build.yml

@@ -17,6 +17,9 @@ 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:

.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
+        run: npm ci --no-package-lock
         shell: bash
       - id: create-dev-hash
         name: Create Dev Hash

.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
+        run: npm ci --no-package-lock
         shell: bash
       - id: create-nightly-hash
         name: Create Nightly Hash

.github/workflows/stencil-nightly.yml

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

.github/workflows/stencil-v4.yml

@@ -1,220 +0,0 @@
-# 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,140 +3,6 @@
 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)
 
 

angular/CHANGELOG.md

@@ -3,85 +3,6 @@
 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

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.12",
+  "version": "7.0.3",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/angular",
-      "version": "7.0.12",
+      "version": "7.0.3",
       "license": "MIT",
       "dependencies": {
-        "@ionic/core": "^7.0.12",
+        "@ionic/core": "^7.0.3",
         "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.12",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.0.12.tgz",
-      "integrity": "sha512-DCBrxKQ59oghBxZOWqbJihedJ9rkVpi4ka+VGclOtndvz8PbEOsPArVUDYPGI7md3SVZ0qaVelbSwqQbyHRY7g==",
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.0.3.tgz",
+      "integrity": "sha512-h2UpU3onHvI2e7HvHuCH4hXvXkG7gHImi5fwZYmTDt4MJbICEOH+lqznwcxbAIRaWZnVe+KDQrS1TyXSzri22g==",
       "dependencies": {
-        "@stencil/core": "^3.3.1",
+        "@stencil/core": "^3.2.1",
         "ionicons": "^7.1.0",
         "tslib": "^2.1.0"
       }
     },
     "node_modules/@ionic/core/node_modules/@stencil/core": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-3.3.1.tgz",
-      "integrity": "sha512-I+660Oe9OMLiU+thjV1GgcI27dcvrSpF3xisHWBOU/4mzRtho3YW0cI8lSjcqyB1KirGTA6QeQ0Xif5UHqn8hw==",
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-3.2.1.tgz",
+      "integrity": "sha512-Ybm4NteQBScLq3H0JML/uqo4nWjNpZw1HAAURtR5LlRm7ptzNKO5S8EnHp3m05/uyTzeh9yLpUFHY7bxGNdYLg==",
       "bin": {
         "stencil": "bin/stencil"
       },
@@ -8104,19 +8104,19 @@
       "dev": true
     },
     "@ionic/core": {
-      "version": "7.0.12",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.0.12.tgz",
-      "integrity": "sha512-DCBrxKQ59oghBxZOWqbJihedJ9rkVpi4ka+VGclOtndvz8PbEOsPArVUDYPGI7md3SVZ0qaVelbSwqQbyHRY7g==",
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.0.3.tgz",
+      "integrity": "sha512-h2UpU3onHvI2e7HvHuCH4hXvXkG7gHImi5fwZYmTDt4MJbICEOH+lqznwcxbAIRaWZnVe+KDQrS1TyXSzri22g==",
       "requires": {
-        "@stencil/core": "^3.3.1",
+        "@stencil/core": "^3.2.1",
         "ionicons": "^7.1.0",
         "tslib": "^2.1.0"
       },
       "dependencies": {
         "@stencil/core": {
-          "version": "3.3.1",
-          "resolved": "https://registry.npmjs.org/@stencil/core/-/core-3.3.1.tgz",
-          "integrity": "sha512-I+660Oe9OMLiU+thjV1GgcI27dcvrSpF3xisHWBOU/4mzRtho3YW0cI8lSjcqyB1KirGTA6QeQ0Xif5UHqn8hw=="
+          "version": "3.2.1",
+          "resolved": "https://registry.npmjs.org/@stencil/core/-/core-3.2.1.tgz",
+          "integrity": "sha512-Ybm4NteQBScLq3H0JML/uqo4nWjNpZw1HAAURtR5LlRm7ptzNKO5S8EnHp3m05/uyTzeh9yLpUFHY7bxGNdYLg=="
         }
       }
     },

angular/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/angular",
-  "version": "7.0.12",
+  "version": "7.0.3",
   "description": "Angular specific wrappers for @ionic/core",
   "keywords": [
     "ionic",
@@ -47,7 +47,7 @@
     }
   },
   "dependencies": {
-    "@ionic/core": "^7.0.12",
+    "@ionic/core": "^7.0.3",
     "ionicons": "^7.0.0",
     "jsonc-parser": "^3.0.0",
     "tslib": "^2.3.0"

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,6 +29,7 @@ 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('ionMount', () => {
+    this.el.addEventListener('willPresent', () => {
       this.isCmpOpen = true;
       c.detectChanges();
     });
@@ -124,6 +124,7 @@ export class IonModal {
       this.isCmpOpen = false;
       c.detectChanges();
     });
+
     proxyOutputs(this, this.el, [
       'ionModalDidPresent',
       'ionModalWillPresent',

angular/src/providers/angular-delegate.ts

@@ -83,8 +83,7 @@ export class AngularFrameworkDelegate implements FrameworkDelegate {
           container,
           component,
           componentProps,
-          cssClasses,
-          this.elementReferenceKey
+          cssClasses
         );
         resolve(el);
       });
@@ -120,8 +119,7 @@ export const attachView = (
   container: any,
   component: any,
   params: any,
-  cssClasses: string[] | undefined,
-  elementReferenceKey: string | undefined
+  cssClasses: string[] | undefined
 ): any => {
   /**
    * Wraps the injector with a custom injector that
@@ -147,23 +145,7 @@ 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/apps/ng16/package.json

@@ -19,37 +19,37 @@
     "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",
+    "@angular/animations": "^16.0.0-rc.0",
+    "@angular/common": "^16.0.0-rc.0",
+    "@angular/compiler": "^16.0.0-rc.0",
+    "@angular/core": "^16.0.0-rc.0",
+    "@angular/forms": "^16.0.0-rc.0",
+    "@angular/platform-browser": "^16.0.0-rc.0",
+    "@angular/platform-browser-dynamic": "^16.0.0-rc.0",
+    "@angular/platform-server": "^16.0.0-rc.0",
+    "@angular/router": "^16.0.0-rc.0",
     "@ionic/angular": "^7.0.0",
     "@ionic/angular-server": "^7.0.0",
-    "@nguniversal/express-engine": "^16.0.0",
+    "@nguniversal/express-engine": "^15.0.0",
     "core-js": "^2.6.11",
     "express": "^4.15.2",
-    "ionicons": "^7.0.4",
+    "ionicons": "^6.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",
+    "@angular-devkit/build-angular": "^16.0.0-rc.0",
+    "@angular-eslint/builder": "^15.0.0",
+    "@angular-eslint/eslint-plugin": "^15.0.0",
+    "@angular-eslint/eslint-plugin-template": "^15.0.0",
+    "@angular-eslint/schematics": "^15.0.0",
+    "@angular-eslint/template-parser": "^15.0.0",
+    "@angular/cli": "^16.0.0-rc.0",
+    "@angular/compiler-cli": "^16.0.0-rc.0",
+    "@angular/language-service": "^16.0.0-rc.0",
+    "@nguniversal/builders": "^15.0.0",
     "@types/express": "^4.17.7",
     "@types/node": "^12.12.54",
     "@typescript-eslint/eslint-plugin": "4.28.2",

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/scripts/sync.sh

@@ -15,7 +15,7 @@ npm pack ../../../dist
 npm pack ../../../../packages/angular-server/dist
 
 # Install Dependencies
-npm install *.tgz --no-save
+npm install *.tgz --no-save --legacy-peer-deps
 
 # Delete Angular cache directory
 rm -rf .angular/

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,5 +24,4 @@ export class ModalInlineComponent implements AfterViewInit {
   onBreakpointDidChange() {
     this.breakpointDidChangeCounter++;
   }
-
 }

core/CHANGELOG.md

@@ -3,137 +3,6 @@
 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)
 
 

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
+## Custom Elements Build (Experimental)
 
 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/package-lock.json

@@ -1,30 +1,30 @@
 {
   "name": "@ionic/core",
-  "version": "7.0.12",
+  "version": "7.0.3",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/core",
-      "version": "7.0.12",
+      "version": "7.0.3",
       "license": "MIT",
       "dependencies": {
-        "@stencil/core": "^3.3.1",
+        "@stencil/core": "^3.2.1",
         "ionicons": "^7.1.0",
         "tslib": "^2.1.0"
       },
       "devDependencies": {
-        "@axe-core/playwright": "^4.7.2",
+        "@axe-core/playwright": "^4.6.1",
         "@ionic/eslint-config": "^0.3.0",
         "@ionic/prettier-config": "^2.0.0",
         "@jest/core": "^27.5.1",
-        "@playwright/test": "^1.34.3",
+        "@playwright/test": "^1.32.3",
         "@rollup/plugin-node-resolve": "^8.4.0",
         "@rollup/plugin-virtual": "^2.0.3",
-        "@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",
+        "@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.2",
         "@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.7.2",
-      "resolved": "https://registry.npmjs.org/@axe-core/playwright/-/playwright-4.7.2.tgz",
-      "integrity": "sha512-k5f6KGVkPsZ7wR56XnRZYS4b1Wd8wkVTpjqeScFYZMTJxKVv3FGKoBqQVBoCphWtP0oMWQc41zQgHO6gaYTcQw==",
+      "version": "4.6.1",
+      "resolved": "https://registry.npmjs.org/@axe-core/playwright/-/playwright-4.6.1.tgz",
+      "integrity": "sha512-XMKP2OzGfGIYpU9G9FgI2ulyjEXQDP6qtZerOwdQ7YC1w4SFgofK3ogSk0qVoy0QI+q6XWLUJMfMMkUwdTR2dA==",
       "dev": true,
       "dependencies": {
-        "axe-core": "^4.7.0"
+        "axe-core": "^4.6.3"
       },
       "peerDependencies": {
-        "playwright-core": ">= 1.0.0"
+        "playwright": ">= 1.0.0"
       }
     },
     "node_modules/@babel/code-frame": {
@@ -1501,13 +1501,13 @@
       }
     },
     "node_modules/@playwright/test": {
-      "version": "1.34.3",
-      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.34.3.tgz",
-      "integrity": "sha512-zPLef6w9P6T/iT6XDYG3mvGOqOyb6eHaV9XtkunYs0+OzxBtrPAAaHotc0X+PJ00WPPnLfFBTl7mf45Mn8DBmw==",
+      "version": "1.32.3",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.32.3.tgz",
+      "integrity": "sha512-BvWNvK0RfBriindxhLVabi8BRe3X0J9EVjKlcmhxjg4giWBD/xleLcg2dz7Tx0agu28rczjNIPQWznwzDwVsZQ==",
       "dev": true,
       "dependencies": {
         "@types/node": "*",
-        "playwright-core": "1.34.3"
+        "playwright-core": "1.32.3"
       },
       "bin": {
         "playwright": "cli.js"
@@ -1585,18 +1585,18 @@
       }
     },
     "node_modules/@stencil/angular-output-target": {
-      "version": "0.7.1",
-      "resolved": "https://registry.npmjs.org/@stencil/angular-output-target/-/angular-output-target-0.7.1.tgz",
-      "integrity": "sha512-lxJbCAbyAQVAKGgEpNTjSF7GZZszbrJnNdNVgzuD1hLRFJyElA6kUSL0GQrZMbiPG5lC/cYdbQwpyWHX4xN8mw==",
+      "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==",
       "dev": true,
       "peerDependencies": {
-        "@stencil/core": ">=2.0.0 || >=3 || >= 4.0.0-beta.0 || >= 4.0.0"
+        "@stencil/core": "^2.9.0 || ^3.0.0"
       }
     },
     "node_modules/@stencil/core": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-3.3.1.tgz",
-      "integrity": "sha512-I+660Oe9OMLiU+thjV1GgcI27dcvrSpF3xisHWBOU/4mzRtho3YW0cI8lSjcqyB1KirGTA6QeQ0Xif5UHqn8hw==",
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-3.2.1.tgz",
+      "integrity": "sha512-Ybm4NteQBScLq3H0JML/uqo4nWjNpZw1HAAURtR5LlRm7ptzNKO5S8EnHp3m05/uyTzeh9yLpUFHY7bxGNdYLg==",
       "bin": {
         "stencil": "bin/stencil"
       },
@@ -1606,30 +1606,30 @@
       }
     },
     "node_modules/@stencil/react-output-target": {
-      "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==",
+      "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==",
       "dev": true,
       "peerDependencies": {
-        "@stencil/core": ">=2.0.0 || >=3 || >= 4.0.0-beta.0 || >= 4.0.0"
+        "@stencil/core": "^2.9.0 || ^3.0.0"
       }
     },
     "node_modules/@stencil/sass": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/@stencil/sass/-/sass-3.0.4.tgz",
-      "integrity": "sha512-k1dP0A2QBx62m250FATc1hErXxXs6Jnf4TBxdL1C/dc32Kzz2n5aCT4SodBz0ebT5WMnITauZyFqYxzCzDoKag==",
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@stencil/sass/-/sass-3.0.0.tgz",
+      "integrity": "sha512-P9NuT5G2ncy+BkQ0fAS+KDuwN+BlDr17yEAHCaEejGZDXK4hhhsxjm0ea8KCwEdDbzui4GDF6DS3VNDtUB6Hzg==",
       "dev": true,
       "peerDependencies": {
-        "@stencil/core": ">=2.0.0 || >=3.0.0-beta.0 || >= 4.0.0-beta.0 || >= 4.0.0"
+        "@stencil/core": ">=2.0.0 || >=3.0.0-beta.0"
       }
     },
     "node_modules/@stencil/vue-output-target": {
-      "version": "0.8.6",
-      "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.8.6.tgz",
-      "integrity": "sha512-B1gQW8FWeU7x/KBPm9R28jYFGN5NsZTZR4jwfDMhKBmU1Q2dIxFY52ARhbrfj5tJQxKoxr2tQJD2S14r9t1v7w==",
+      "version": "0.8.2",
+      "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.8.2.tgz",
+      "integrity": "sha512-Z+igq/pz7z9bSRH0tVxHvD/m13B6MPM+i2DZRboGt3uyTKeD1vLZQz3BLCfPeBtEXp2Xlz4d18Z8d7c4abFKbg==",
       "dev": true,
       "peerDependencies": {
-        "@stencil/core": ">=2.0.0 || >=3 || >= 4.0.0-beta.0 || >= 4.0.0"
+        "@stencil/core": "^2.9.0 || ^3.0.0"
       }
     },
     "node_modules/@stylelint/postcss-css-in-js": {
@@ -2571,9 +2571,9 @@
       }
     },
     "node_modules/axe-core": {
-      "version": "4.7.1",
-      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.7.1.tgz",
-      "integrity": "sha512-sCXXUhA+cljomZ3ZAwb8i1p3oOlkABzPy08ZDAoGcYuvtBPlQ1Ytde129ArXyHWDhfeewq7rlx9F+cUx2SSlkg==",
+      "version": "4.6.3",
+      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.6.3.tgz",
+      "integrity": "sha512-/BQzOX780JhsxDnPpH4ZiyrJAzcd8AfzFPkv+89veFSr1rcMjuq2JDCwypKaPeB6ljHp9KjXhPpjgCvQlWYuqg==",
       "dev": true,
       "engines": {
         "node": ">=4"
@@ -8149,13 +8149,30 @@
         "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.34.3",
-      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.34.3.tgz",
-      "integrity": "sha512-2pWd6G7OHKemc5x1r1rp8aQcpvDh7goMBZlJv6Co5vCNLVcQJdhxRL09SGaY6HcyHH9aT4tiynZabMofVasBYw==",
+      "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==",
       "dev": true,
       "bin": {
-        "playwright-core": "cli.js"
+        "playwright": "cli.js"
       },
       "engines": {
         "node": ">=14"
@@ -10335,12 +10352,12 @@
   },
   "dependencies": {
     "@axe-core/playwright": {
-      "version": "4.7.2",
-      "resolved": "https://registry.npmjs.org/@axe-core/playwright/-/playwright-4.7.2.tgz",
-      "integrity": "sha512-k5f6KGVkPsZ7wR56XnRZYS4b1Wd8wkVTpjqeScFYZMTJxKVv3FGKoBqQVBoCphWtP0oMWQc41zQgHO6gaYTcQw==",
+      "version": "4.6.1",
+      "resolved": "https://registry.npmjs.org/@axe-core/playwright/-/playwright-4.6.1.tgz",
+      "integrity": "sha512-XMKP2OzGfGIYpU9G9FgI2ulyjEXQDP6qtZerOwdQ7YC1w4SFgofK3ogSk0qVoy0QI+q6XWLUJMfMMkUwdTR2dA==",
       "dev": true,
       "requires": {
-        "axe-core": "^4.7.0"
+        "axe-core": "^4.6.3"
       }
     },
     "@babel/code-frame": {
@@ -11381,14 +11398,14 @@
       }
     },
     "@playwright/test": {
-      "version": "1.34.3",
-      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.34.3.tgz",
-      "integrity": "sha512-zPLef6w9P6T/iT6XDYG3mvGOqOyb6eHaV9XtkunYs0+OzxBtrPAAaHotc0X+PJ00WPPnLfFBTl7mf45Mn8DBmw==",
+      "version": "1.32.3",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.32.3.tgz",
+      "integrity": "sha512-BvWNvK0RfBriindxhLVabi8BRe3X0J9EVjKlcmhxjg4giWBD/xleLcg2dz7Tx0agu28rczjNIPQWznwzDwVsZQ==",
       "dev": true,
       "requires": {
         "@types/node": "*",
         "fsevents": "2.3.2",
-        "playwright-core": "1.34.3"
+        "playwright-core": "1.32.3"
       }
     },
     "@rollup/plugin-node-resolve": {
@@ -11443,35 +11460,35 @@
       }
     },
     "@stencil/angular-output-target": {
-      "version": "0.7.1",
-      "resolved": "https://registry.npmjs.org/@stencil/angular-output-target/-/angular-output-target-0.7.1.tgz",
-      "integrity": "sha512-lxJbCAbyAQVAKGgEpNTjSF7GZZszbrJnNdNVgzuD1hLRFJyElA6kUSL0GQrZMbiPG5lC/cYdbQwpyWHX4xN8mw==",
+      "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==",
       "dev": true,
       "requires": {}
     },
     "@stencil/core": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-3.3.1.tgz",
-      "integrity": "sha512-I+660Oe9OMLiU+thjV1GgcI27dcvrSpF3xisHWBOU/4mzRtho3YW0cI8lSjcqyB1KirGTA6QeQ0Xif5UHqn8hw=="
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-3.2.1.tgz",
+      "integrity": "sha512-Ybm4NteQBScLq3H0JML/uqo4nWjNpZw1HAAURtR5LlRm7ptzNKO5S8EnHp3m05/uyTzeh9yLpUFHY7bxGNdYLg=="
     },
     "@stencil/react-output-target": {
-      "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==",
+      "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==",
       "dev": true,
       "requires": {}
     },
     "@stencil/sass": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/@stencil/sass/-/sass-3.0.4.tgz",
-      "integrity": "sha512-k1dP0A2QBx62m250FATc1hErXxXs6Jnf4TBxdL1C/dc32Kzz2n5aCT4SodBz0ebT5WMnITauZyFqYxzCzDoKag==",
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@stencil/sass/-/sass-3.0.0.tgz",
+      "integrity": "sha512-P9NuT5G2ncy+BkQ0fAS+KDuwN+BlDr17yEAHCaEejGZDXK4hhhsxjm0ea8KCwEdDbzui4GDF6DS3VNDtUB6Hzg==",
       "dev": true,
       "requires": {}
     },
     "@stencil/vue-output-target": {
-      "version": "0.8.6",
-      "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.8.6.tgz",
-      "integrity": "sha512-B1gQW8FWeU7x/KBPm9R28jYFGN5NsZTZR4jwfDMhKBmU1Q2dIxFY52ARhbrfj5tJQxKoxr2tQJD2S14r9t1v7w==",
+      "version": "0.8.2",
+      "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.8.2.tgz",
+      "integrity": "sha512-Z+igq/pz7z9bSRH0tVxHvD/m13B6MPM+i2DZRboGt3uyTKeD1vLZQz3BLCfPeBtEXp2Xlz4d18Z8d7c4abFKbg==",
       "dev": true,
       "requires": {}
     },
@@ -12127,9 +12144,9 @@
       }
     },
     "axe-core": {
-      "version": "4.7.1",
-      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.7.1.tgz",
-      "integrity": "sha512-sCXXUhA+cljomZ3ZAwb8i1p3oOlkABzPy08ZDAoGcYuvtBPlQ1Ytde129ArXyHWDhfeewq7rlx9F+cUx2SSlkg==",
+      "version": "4.6.3",
+      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.6.3.tgz",
+      "integrity": "sha512-/BQzOX780JhsxDnPpH4ZiyrJAzcd8AfzFPkv+89veFSr1rcMjuq2JDCwypKaPeB6ljHp9KjXhPpjgCvQlWYuqg==",
       "dev": true
     },
     "babel-jest": {
@@ -16257,10 +16274,20 @@
         "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.34.3",
-      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.34.3.tgz",
-      "integrity": "sha512-2pWd6G7OHKemc5x1r1rp8aQcpvDh7goMBZlJv6Co5vCNLVcQJdhxRL09SGaY6HcyHH9aT4tiynZabMofVasBYw==",
+      "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==",
       "dev": true
     },
     "postcss": {

core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/core",
-  "version": "7.0.12",
+  "version": "7.0.3",
   "description": "Base components for Ionic",
   "keywords": [
     "ionic",
@@ -31,22 +31,22 @@
     "loader/"
   ],
   "dependencies": {
-    "@stencil/core": "^3.3.1",
+    "@stencil/core": "^3.2.1",
     "ionicons": "^7.1.0",
     "tslib": "^2.1.0"
   },
   "devDependencies": {
-    "@axe-core/playwright": "^4.7.2",
+    "@axe-core/playwright": "^4.6.1",
     "@ionic/eslint-config": "^0.3.0",
     "@ionic/prettier-config": "^2.0.0",
     "@jest/core": "^27.5.1",
-    "@playwright/test": "^1.34.3",
+    "@playwright/test": "^1.32.3",
     "@rollup/plugin-node-resolve": "^8.4.0",
     "@rollup/plugin-virtual": "^2.0.3",
-    "@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",
+    "@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.2",
     "@types/jest": "^27.5.2",
     "@types/node": "^14.6.0",
     "@typescript-eslint/eslint-plugin": "^5.17.0",

core/playwright.config.ts

@@ -42,6 +42,35 @@ 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.
  */
@@ -52,13 +81,7 @@ const config: PlaywrightTestConfig = {
      * Maximum time expect() should wait for the condition to be met.
      * For example in `await expect(locator).toHaveText();`
      */
-    timeout: 5000,
-    toHaveScreenshot: {
-      threshold: 0.1
-    },
-    toMatchSnapshot: {
-      threshold: 0.1
-    }
+    timeout: 5000
   },
   /* Fail the build on CI if you accidentally left test.only in the source code. */
   forbidOnly: !!process.env.CI,
@@ -85,7 +108,7 @@ const config: PlaywrightTestConfig = {
   },
 
   /* Configure projects for major browsers */
-  projects,
+  projects: generateProjects(),
   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. This method is only available for vanilla JavaScript projects. The Angular, React, and Vue implementations of tabs are coupled to each framework's router.
+          * Get the currently selected tab.
          */
         "getSelected": () => Promise<string | undefined>;
         /**
-          * 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.
+          * Get a specific tab by the value of its `tab` property or an element reference.
           * @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. This method is only available for vanilla JavaScript projects. The Angular, React, and Vue implementations of tabs are coupled to each framework's router.
+          * Select a tab by the value of its `tab` property or an element reference.
           * @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,10 +5830,6 @@ 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, Watch, h } from '@stencil/core';
+import { Component, Element, Host, Prop, State, h } from '@stencil/core';
 import { chevronDown } from 'ionicons/icons';
 
 import { config } from '../../global/config';
@@ -56,10 +56,6 @@ export class Accordion implements ComponentInterface {
    * value.
    */
   @Prop() value = `ion-accordion-${accordionIds++}`;
-  @Watch('value')
-  valueChanged() {
-    this.updateState();
-  }
 
   /**
    * If `true`, the accordion cannot be interacted with.

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

@@ -1,46 +1,44 @@
 import { expect } from '@playwright/test';
-import { configs, test } from '@utils/test/playwright';
+import { test } from '@utils/test/playwright';
 
-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.');
+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.');
 
-      await page.goto(`/src/components/accordion/test/a11y`, config);
-      const tabKey = browserName === 'webkit' ? 'Alt+Tab' : 'Tab';
+    await page.goto(`/src/components/accordion/test/a11y`);
+    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,49 +1,56 @@
 import { expect } from '@playwright/test';
-import { configs, test } from '@utils/test/playwright';
+import { test } from '@utils/test/playwright';
 
-configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ config, title }) => {
-  test.describe(title('accordion: states'), () => {
-    test.beforeEach(async ({ page }) => {
-      await page.setContent(
-        `
+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(`
       <ion-accordion-group animated="false">
         <ion-accordion>
           <ion-item slot="header">Label</ion-item>
           <div slot="content">Content</div>
         </ion-accordion>
       </ion-accordion-group>
-    `,
-        config
-      );
-    });
-    test('should properly set readonly on child accordions', async ({ page }) => {
-      const accordionGroup = page.locator('ion-accordion-group');
-      const accordion = page.locator('ion-accordion');
+    `);
 
-      await expect(accordion).toHaveJSProperty('readonly', false);
+    const accordionGroup = page.locator('ion-accordion-group');
+    const accordion = page.locator('ion-accordion');
 
-      await accordionGroup.evaluate((el: HTMLIonAccordionGroupElement) => {
-        el.readonly = true;
-      });
+    await expect(accordion).toHaveJSProperty('readonly', false);
 
-      await page.waitForChanges();
-
-      await expect(accordion).toHaveJSProperty('readonly', true);
+    await accordionGroup.evaluate((el: HTMLIonAccordionGroupElement) => {
+      el.readonly = true;
     });
 
-    test('should properly set disabled on child accordions', async ({ page }) => {
-      const accordionGroup = page.locator('ion-accordion-group');
-      const accordion = page.locator('ion-accordion');
+    await page.waitForChanges();
 
-      await expect(accordion).toHaveJSProperty('disabled', false);
+    await expect(accordion).toHaveJSProperty('readonly', true);
+  });
 
-      await accordionGroup.evaluate((el: HTMLIonAccordionGroupElement) => {
-        el.disabled = true;
-      });
+  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 page.waitForChanges();
+    const accordionGroup = page.locator('ion-accordion-group');
+    const accordion = page.locator('ion-accordion');
 
-      await expect(accordion).toHaveJSProperty('disabled', true);
+    await expect(accordion).toHaveJSProperty('disabled', false);
+
+    await accordionGroup.evaluate((el: HTMLIonAccordionGroupElement) => {
+      el.disabled = true;
     });
+
+    await page.waitForChanges();
+
+    await expect(accordion).toHaveJSProperty('disabled', true);
   });
 });

core/src/components/accordion/test/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 when accordion group value is set', async () => {
+it('should open correct accordions', async () => {
   const page = await newSpecPage({
     components: [Item, Accordion, AccordionGroup],
     html: `
@@ -40,42 +40,6 @@ it('should open correct accordions when accordion group value is set', 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],

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

@@ -1,22 +1,53 @@
 import { expect } from '@playwright/test';
-import { configs, test } from '@utils/test/playwright';
+import { test } from '@utils/test/playwright';
 
-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);
+test.describe('accordion: basic', () => {
+  test('should not have visual regressions', async ({ page }) => {
+    await page.goto(`/src/components/accordion/test/basic`);
 
-      await page.setIonViewport();
+    await page.setIonViewport();
 
-      await expect(page).toHaveScreenshot(screenshot('accordion-basic'));
-    });
+    await expect(page).toHaveScreenshot(`accordion-basic-${page.getSnapshotSettings()}.png`);
   });
 });
-configs({ directions: ['ltr'] }).forEach(({ config, title }) => {
-  test.describe(title('accordion: ionChange'), () => {
-    test.beforeEach(async ({ page }) => {
-      await page.setContent(
-        `
+
+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(`
       <ion-accordion-group>
         <ion-accordion value="first">
           <button slot="header">Header</button>
@@ -31,30 +62,13 @@ configs({ directions: ['ltr'] }).forEach(({ config, title }) => {
           <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' });
+    `);
 
-      await accordionHeaders.nth(1).click();
-      await expect(ionChange).toHaveReceivedEventDetail({ value: 'second' });
+    const ionChange = await page.spyOnEvent('ionChange');
+    const accordionGroup = page.locator('ion-accordion-group');
 
-      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();
-    });
+    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 { configs, test } from '@utils/test/playwright';
+import { test } from '@utils/test/playwright';
 
-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"]');
+test.describe('accordion: multiple', () => {
+  test('should update value and visually expand items', async ({ page, skip }) => {
+    skip.rtl();
 
-      await expect(accordionGroup).toHaveJSProperty('value', 'attractions');
+    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).toHaveScreenshot(screenshot('accordion-one-open'));
+    await expect(accordionGroup).toHaveJSProperty('value', 'attractions');
 
-      await diningHeader.click();
-      await page.waitForChanges();
+    await expect(accordionGroup).toHaveScreenshot(`accordion-one-open-${page.getSnapshotSettings()}.png`);
 
-      await expect(accordionGroup).toHaveJSProperty('value', ['attractions', 'dining']);
+    await diningHeader.click();
+    await page.waitForChanges();
 
-      await expect(accordionGroup).toHaveScreenshot(screenshot('accordion-two-open'));
+    await expect(accordionGroup).toHaveJSProperty('value', ['attractions', 'dining']);
 
-      await diningHeader.click();
-      await attractionsHeader.click();
-      await page.waitForChanges();
+    await expect(accordionGroup).toHaveScreenshot(`accordion-two-open-${page.getSnapshotSettings()}.png`);
 
-      await expect(accordionGroup).toHaveJSProperty('value', []);
+    await diningHeader.click();
+    await attractionsHeader.click();
+    await page.waitForChanges();
 
-      await expect(accordionGroup).toHaveScreenshot(screenshot('accordion-zero-open'));
-    });
+    await expect(accordionGroup).toHaveJSProperty('value', []);
+
+    await expect(accordionGroup).toHaveScreenshot(`accordion-zero-open-${page.getSnapshotSettings()}.png`);
   });
 });

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

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

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

@@ -1,15 +1,13 @@
 import AxeBuilder from '@axe-core/playwright';
 import { expect } from '@playwright/test';
-import { configs, test } from '@utils/test/playwright';
+import { test } from '@utils/test/playwright';
 
-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);
+test.describe('accordion: standalone', () => {
+  test('should not have accessibility violations', async ({ page }) => {
+    await page.goto(`/src/components/accordion/test/standalone`);
 
-      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,7 +15,6 @@ import {
   prepareOverlay,
   present,
   safeCall,
-  setOverlayId,
 } from '../../utils/overlays';
 import type { OverlayEventDetail } from '../../utils/overlays-interface';
 import { getClassMap } from '../../utils/theme';
@@ -312,10 +311,6 @@ 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 { configs, test } from '@utils/test/playwright';
+import { test } from '@utils/test/playwright';
 
 const testAria = async (page: E2EPage, buttonID: string, expectedAriaLabelledBy: string | null) => {
   const didPresent = await page.spyOnEvent('ionActionSheetDidPresent');
@@ -20,37 +20,38 @@ 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');
 
-      await button.click();
-      await didPresent.next();
+test.describe('action-sheet: a11y', () => {
+  test.beforeEach(async ({ page, skip }) => {
+    skip.rtl();
+    await page.goto(`/src/components/action-sheet/test/a11y`);
+  });
 
-      /**
-       * 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 accessibility violations when header is defined', async ({ page }) => {
+    const button = page.locator('#bothHeaders');
+    const didPresent = await page.spyOnEvent('ionActionSheetDidPresent');
 
-    test('should have aria-labelledby when header is set', async ({ page }) => {
-      await testAria(page, 'bothHeaders', 'action-sheet-1-header');
-    });
+    await button.click();
+    await didPresent.next();
 
-    test('should not have aria-labelledby when header is not set', async ({ page }) => {
-      await testAria(page, 'noHeaders', null);
-    });
+    /**
+     * 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 allow for manually specifying aria attributes', async ({ page }) => {
-      await testAria(page, 'customAria', 'Custom title');
-    });
+  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');
   });
 });

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

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

@@ -1,42 +0,0 @@
-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');
-    });
-  });
-});

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

@@ -1,20 +1,17 @@
 import { expect } from '@playwright/test';
-import { configs, test } from '@utils/test/playwright';
+import type { Locator } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+import type { E2EPage } from '@utils/test/playwright';
 
-import { ActionSheetFixture } from './fixture';
-
-/**
- * This behavior does not vary across modes/directions
- */
-configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ config, title }) => {
-  test.describe(title('action sheet: data'), () => {
-    let actionSheetFixture!: ActionSheetFixture;
-    test.beforeEach(async ({ page }) => {
-      actionSheetFixture = new ActionSheetFixture(page);
-
-      await page.goto(`/src/components/action-sheet/test/basic`, config);
-    });
-    test('should return data', async ({ page }) => {
+test.describe('action sheet: basic', () => {
+  let actionSheetFixture: ActionSheetFixture;
+  test.beforeEach(async ({ page }) => {
+    await page.goto(`/src/components/action-sheet/test/basic`);
+    actionSheetFixture = new ActionSheetFixture(page);
+  });
+  test.describe('action sheet: data', () => {
+    test('should return data', async ({ page, skip }) => {
+      skip.rtl();
       const ionActionSheetDidDismiss = await page.spyOnEvent('ionActionSheetDidDismiss');
 
       await actionSheetFixture.open('#buttonData');
@@ -25,7 +22,8 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ config, title }) =>
       await ionActionSheetDidDismiss.next();
       expect(ionActionSheetDidDismiss).toHaveReceivedEventDetail({ data: { type: '1' }, role: undefined });
     });
-    test('should return cancel button data', async ({ page }) => {
+    test('should return cancel button data', async ({ page, skip }) => {
+      skip.rtl();
       const ionActionSheetDidDismiss = await page.spyOnEvent('ionActionSheetDidDismiss');
 
       await actionSheetFixture.open('#buttonData');
@@ -37,26 +35,53 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ config, title }) =>
       expect(ionActionSheetDidDismiss).toHaveReceivedEventDetail({ data: { type: 'cancel' }, role: 'cancel' });
     });
   });
-});
+  test.describe('action sheet: attributes', () => {
+    test('should set htmlAttributes', async ({ page, skip }) => {
+      skip.rtl();
+      await actionSheetFixture.open('#basic');
 
-/**
- * This behavior does not vary across modes/directions
- */
-configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ config, title }) => {
-  test.describe(title('action sheet: variant functionality'), () => {
-    let actionSheetFixture!: ActionSheetFixture;
-    test.beforeEach(async ({ page }) => {
-      actionSheetFixture = new ActionSheetFixture(page);
-
-      await page.goto(`/src/components/action-sheet/test/basic`, config);
+      const actionSheet = page.locator('ion-action-sheet');
+      await expect(actionSheet).toHaveAttribute('data-testid', 'basic-action-sheet');
     });
-    test('should open custom backdrop action sheet', async ({ page }) => {
+  });
+  test.describe('action sheet: variants', () => {
+    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');
+    });
+    test('should open custom backdrop action sheet', async ({ page, skip }) => {
+      skip.rtl();
       await actionSheetFixture.open('#customBackdrop');
 
       const backdrop = page.locator('ion-action-sheet ion-backdrop');
       await expect(backdrop).toHaveCSS('opacity', '1');
     });
-    test('should open alert from action sheet', async ({ page }) => {
+    test('should open alert from action sheet', async ({ page, skip }) => {
+      skip.rtl();
       const ionAlertDidPresent = await page.spyOnEvent('ionAlertDidPresent');
       await actionSheetFixture.open('#alertFromActionSheet');
 
@@ -64,7 +89,8 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ config, title }) =>
 
       await ionAlertDidPresent.next();
     });
-    test('should not dismiss action sheet when backdropDismiss: false', async ({ page }) => {
+    test('should not dismiss action sheet when backdropDismiss: false', async ({ page, skip }) => {
+      skip.rtl();
       await actionSheetFixture.open('#noBackdropDismiss');
 
       const actionSheet = page.locator('ion-action-sheet');
@@ -73,17 +99,9 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ config, title }) =>
       await expect(actionSheet).toBeVisible();
     });
   });
-});
-
-/**
- * This behavior does not vary across modes/directions
- */
-configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ config, title }) => {
-  test.describe(title('action sheet: focus trap'), () => {
-    test('it should trap focus in action sheet', async ({ page, browserName }) => {
-      await page.goto(`/src/components/action-sheet/test/basic`, config);
-      const actionSheetFixture = new ActionSheetFixture(page);
-
+  test.describe('action sheet: focus trap', () => {
+    test('it should trap focus in action sheet', async ({ page, skip, browserName }) => {
+      skip.rtl();
       const tabKey = browserName === 'webkit' ? 'Alt+Tab' : 'Tab';
 
       await actionSheetFixture.open('#basic');
@@ -100,3 +118,34 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ config, title }) =>
     });
   });
 });
+
+class ActionSheetFixture {
+  readonly page: E2EPage;
+
+  private actionSheet!: Locator;
+
+  constructor(page: E2EPage) {
+    this.page = page;
+  }
+
+  async open(selector: string) {
+    const ionActionSheetDidPresent = await this.page.spyOnEvent('ionActionSheetDidPresent');
+    await this.page.locator(selector).click();
+    await ionActionSheetDidPresent.next();
+    this.actionSheet = this.page.locator('ion-action-sheet');
+    await expect(this.actionSheet).toBeVisible();
+  }
+
+  async dismiss() {
+    const ionActionSheetDidDismiss = await this.page.spyOnEvent('ionActionSheetDidDismiss');
+    await this.actionSheet.evaluate((el: HTMLIonActionSheetElement) => el.dismiss());
+    await ionActionSheetDidDismiss.next();
+    await expect(this.actionSheet).not.toBeVisible();
+  }
+
+  async screenshot(modifier: string) {
+    await expect(this.actionSheet).toHaveScreenshot(
+      `action-sheet-${modifier}-diff-${this.page.getSnapshotSettings()}.png`
+    );
+  }
+}