v7.0.7

Issue number: resolves #25990

---------

<!-- 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. -->

The tab bar and footer are being shown too soon after the keyboard
begins to hide. This is happening because the webview resizes _after_
the keyboard begins to dismiss. As a result, it is possible for the tab
bar and footer to briefly appear on the top of the keyboard in
environments where the webview resizes.

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

- The tab bar and footer wait until after the webview has resized before
showing again

| before | after |
| - | - |
| <video
src="https://user-images.githubusercontent.com/2721089/236905066-42ac17a5-a5bf-458b-9c62-005fcce05e20.MP4"></video>
| <video
src="https://user-images.githubusercontent.com/2721089/236905185-d2f539d1-6d93-4385-b1cb-24dd7aa06393.MP4"></video>
|

This code works by adding an optional parameter to the keyboard
controller callback called `waitForResize`. When defined, code within
Ionic can wait for the webview to resize as a result of the keyboard
opening or closing. Tab bar and footer wait for this `waitForResize`
promise to resolve before re-showing the relevant elements.

This `waitForResize` parameter is only only defined when all of the
following are two:

**1. The webview resize mode is known and is _not_ "None".**

If the webview resize mode is unknown then either the Keyboard plugin is
not installed (in which case the tab bar/footer are never hidden in the
first place) or the app is being deployed in a browser/PWA environment
(in which case the web content typically does not resize). If the
webview resize mode is "None" then that means the keyboard plugin is
installed, but the webview is configured to never resize when the
keyboard opens/closes. As a result, there is no need to wait for the
webview to resize.

**2. The webview has previously resized.**

If the keyboard is closed _before_ the opening keyboard animation
completes then it is possible for the webview to never resize. In this
case, the webview is at full height and the tab bar/footer can
immediately be re-shown.


------

Under the hood, we use a
[ResizeObserver](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver)
to listen for when the web content resizes. Which element we listen on
depends on the resize mode set in the developer's Capacitor app. We
determine this in the `getResizeContainer` function.

From there, we wait for the ResizeObserver callback, then wait 1 more
frame so the promise resolves _after_ the resize has finished.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

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


## Other information

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

Dev build: `7.0.6-dev.11683905366.13943af0`

.github/CONTRIBUTING.md

@@ -270,6 +270,8 @@ 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 http://ionicworldwide.herokuapp.com/ -->
+<!-- Please do not submit support requests or "How to" questions here. Instead, please use one of these channels: https://forum.ionicframework.com/ or https://ionic.link/discord/ -->
 
 <!-- ISSUES MISSING IMPORTANT INFORMATION MAY BE CLOSED WITHOUT INVESTIGATION. -->
 
@@ -17,7 +17,7 @@
 [ ] bug report
 [ ] feature request
 
-<!-- Please do not submit support requests or "How to" questions here. Instead, please use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/ -->
+<!-- Please do not submit support requests or "How to" questions here. Instead, please use one of these channels: https://forum.ionicframework.com/ or https://ionic.link/discord -->
 
 **Current behavior:**
 <!-- Describe how the bug manifests. -->

.github/PULL_REQUEST_TEMPLATE.md

@@ -2,13 +2,9 @@ Issue number: #
 
 ---------
 
-<!-- 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 do not submit updates to dependencies unless it fixes an issue. -->
 
-<!-- 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. --> 
+<!-- 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,4 +8,8 @@ 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"

.github/ionic-issue-bot.yml

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

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

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

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

@@ -7,6 +7,7 @@ inputs:
     description: 'Playwright total number of test shards (ex: 4)'
   update:
     description: 'Whether or not to update the reference snapshots'
+
 runs:
   using: 'composite'
   steps:
@@ -51,7 +52,7 @@ runs:
         mkdir updated-screenshots
         cd ../ && rsync -R --progress $(git diff --name-only --cached) core/updated-screenshots
         if [ -d core/updated-screenshots/core ]; then
-          echo "::set-output name=hasUpdatedScreenshots::$(echo 'true')"
+          echo "hasUpdatedScreenshots=$(echo 'true')" >> $GITHUB_OUTPUT
           cd core/updated-screenshots
           zip -q -r ../../UpdatedScreenshots-${{ inputs.shard }}-${{ inputs.totalShards }}.zip core
         fi

CHANGELOG.md

@@ -3,6 +3,57 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [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)
 
 

angular/CHANGELOG.md

@@ -3,6 +3,34 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [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

angular/README.md

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

angular/package-lock.json

@@ -1,15 +1,15 @@
 {
   "name": "@ionic/angular",
-  "version": "7.0.4",
+  "version": "7.0.7",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/angular",
-      "version": "7.0.4",
+      "version": "7.0.7",
       "license": "MIT",
       "dependencies": {
-        "@ionic/core": "^7.0.4",
+        "@ionic/core": "^7.0.7",
         "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.3",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.0.3.tgz",
-      "integrity": "sha512-h2UpU3onHvI2e7HvHuCH4hXvXkG7gHImi5fwZYmTDt4MJbICEOH+lqznwcxbAIRaWZnVe+KDQrS1TyXSzri22g==",
+      "version": "7.0.6",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.0.6.tgz",
+      "integrity": "sha512-ssZs8QzyNPmGCUdK5i5OupA7BDmOjJEOhqfpNGbxwXX3YQ08naVDjNxYn/VSW9O1zSyfecJqJz0Akw/LdKIN/Q==",
       "dependencies": {
-        "@stencil/core": "^3.2.1",
+        "@stencil/core": "^3.2.2",
         "ionicons": "^7.1.0",
         "tslib": "^2.1.0"
       }
     },
     "node_modules/@ionic/core/node_modules/@stencil/core": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-3.2.1.tgz",
-      "integrity": "sha512-Ybm4NteQBScLq3H0JML/uqo4nWjNpZw1HAAURtR5LlRm7ptzNKO5S8EnHp3m05/uyTzeh9yLpUFHY7bxGNdYLg==",
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-3.2.2.tgz",
+      "integrity": "sha512-wXb9cVWL0T3cTwYLveekdTFCRGx6+9hpVDEXna+N8K8OPoW6xtFAHRLv+LjOM7k59PkA8MG3IinAfV7Y+xa0Hw==",
       "bin": {
         "stencil": "bin/stencil"
       },
@@ -8104,19 +8104,19 @@
       "dev": true
     },
     "@ionic/core": {
-      "version": "7.0.3",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.0.3.tgz",
-      "integrity": "sha512-h2UpU3onHvI2e7HvHuCH4hXvXkG7gHImi5fwZYmTDt4MJbICEOH+lqznwcxbAIRaWZnVe+KDQrS1TyXSzri22g==",
+      "version": "7.0.6",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.0.6.tgz",
+      "integrity": "sha512-ssZs8QzyNPmGCUdK5i5OupA7BDmOjJEOhqfpNGbxwXX3YQ08naVDjNxYn/VSW9O1zSyfecJqJz0Akw/LdKIN/Q==",
       "requires": {
-        "@stencil/core": "^3.2.1",
+        "@stencil/core": "^3.2.2",
         "ionicons": "^7.1.0",
         "tslib": "^2.1.0"
       },
       "dependencies": {
         "@stencil/core": {
-          "version": "3.2.1",
-          "resolved": "https://registry.npmjs.org/@stencil/core/-/core-3.2.1.tgz",
-          "integrity": "sha512-Ybm4NteQBScLq3H0JML/uqo4nWjNpZw1HAAURtR5LlRm7ptzNKO5S8EnHp3m05/uyTzeh9yLpUFHY7bxGNdYLg=="
+          "version": "3.2.2",
+          "resolved": "https://registry.npmjs.org/@stencil/core/-/core-3.2.2.tgz",
+          "integrity": "sha512-wXb9cVWL0T3cTwYLveekdTFCRGx6+9hpVDEXna+N8K8OPoW6xtFAHRLv+LjOM7k59PkA8MG3IinAfV7Y+xa0Hw=="
         }
       }
     },

angular/package.json

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

angular/src/directives/overlays/modal.ts

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

angular/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-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",
+    "@angular/animations": "^16.0.0",
+    "@angular/common": "^16.0.0",
+    "@angular/compiler": "^16.0.0",
+    "@angular/core": "^16.0.0",
+    "@angular/forms": "^16.0.0",
+    "@angular/platform-browser": "^16.0.0",
+    "@angular/platform-browser-dynamic": "^16.0.0",
+    "@angular/platform-server": "^16.0.0",
+    "@angular/router": "^16.0.0",
     "@ionic/angular": "^7.0.0",
     "@ionic/angular-server": "^7.0.0",
-    "@nguniversal/express-engine": "^15.0.0",
+    "@nguniversal/express-engine": "^16.0.0",
     "core-js": "^2.6.11",
     "express": "^4.15.2",
-    "ionicons": "^6.0.4",
+    "ionicons": "^7.0.4",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "typescript-eslint-language-service": "^4.1.5",
     "zone.js": "~0.13.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^16.0.0-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",
+    "@angular-devkit/build-angular": "^16.0.0",
+    "@angular-eslint/builder": "^16.0.0",
+    "@angular-eslint/eslint-plugin": "^16.0.0",
+    "@angular-eslint/eslint-plugin-template": "^16.0.0",
+    "@angular-eslint/schematics": "^16.0.0",
+    "@angular-eslint/template-parser": "^16.0.0",
+    "@angular/cli": "^16.0.0",
+    "@angular/compiler-cli": "^16.0.0",
+    "@angular/language-service": "^16.0.0",
+    "@nguniversal/builders": "^16.0.0",
     "@types/express": "^4.17.7",
     "@types/node": "^12.12.54",
     "@typescript-eslint/eslint-plugin": "4.28.2",

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 --legacy-peer-deps
+npm install *.tgz --no-save
 
 # 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,4 +24,5 @@ export class ModalInlineComponent implements AfterViewInit {
   onBreakpointDidChange() {
     this.breakpointDidChangeCounter++;
   }
+
 }

core/CHANGELOG.md

@@ -3,6 +3,56 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [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)
 
 

core/README.md

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

core/package-lock.json

@@ -1,15 +1,15 @@
 {
   "name": "@ionic/core",
-  "version": "7.0.4",
+  "version": "7.0.7",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/core",
-      "version": "7.0.4",
+      "version": "7.0.7",
       "license": "MIT",
       "dependencies": {
-        "@stencil/core": "^3.2.1",
+        "@stencil/core": "^3.2.2",
         "ionicons": "^7.1.0",
         "tslib": "^2.1.0"
       },
@@ -18,13 +18,13 @@
         "@ionic/eslint-config": "^0.3.0",
         "@ionic/prettier-config": "^2.0.0",
         "@jest/core": "^27.5.1",
-        "@playwright/test": "^1.32.3",
+        "@playwright/test": "^1.33.0",
         "@rollup/plugin-node-resolve": "^8.4.0",
         "@rollup/plugin-virtual": "^2.0.3",
         "@stencil/angular-output-target": "^0.6.0",
         "@stencil/react-output-target": "^0.5.0",
-        "@stencil/sass": "^3.0.0",
-        "@stencil/vue-output-target": "^0.8.2",
+        "@stencil/sass": "^3.0.2",
+        "@stencil/vue-output-target": "^0.8.4",
         "@types/jest": "^27.5.2",
         "@types/node": "^14.6.0",
         "@typescript-eslint/eslint-plugin": "^5.17.0",
@@ -1501,13 +1501,13 @@
       }
     },
     "node_modules/@playwright/test": {
-      "version": "1.32.3",
-      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.32.3.tgz",
-      "integrity": "sha512-BvWNvK0RfBriindxhLVabi8BRe3X0J9EVjKlcmhxjg4giWBD/xleLcg2dz7Tx0agu28rczjNIPQWznwzDwVsZQ==",
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.33.0.tgz",
+      "integrity": "sha512-YunBa2mE7Hq4CfPkGzQRK916a4tuZoVx/EpLjeWlTVOnD4S2+fdaQZE0LJkbfhN5FTSKNLdcl7MoT5XB37bTkg==",
       "dev": true,
       "dependencies": {
         "@types/node": "*",
-        "playwright-core": "1.32.3"
+        "playwright-core": "1.33.0"
       },
       "bin": {
         "playwright": "cli.js"
@@ -1594,9 +1594,9 @@
       }
     },
     "node_modules/@stencil/core": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-3.2.1.tgz",
-      "integrity": "sha512-Ybm4NteQBScLq3H0JML/uqo4nWjNpZw1HAAURtR5LlRm7ptzNKO5S8EnHp3m05/uyTzeh9yLpUFHY7bxGNdYLg==",
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-3.2.2.tgz",
+      "integrity": "sha512-wXb9cVWL0T3cTwYLveekdTFCRGx6+9hpVDEXna+N8K8OPoW6xtFAHRLv+LjOM7k59PkA8MG3IinAfV7Y+xa0Hw==",
       "bin": {
         "stencil": "bin/stencil"
       },
@@ -1615,18 +1615,18 @@
       }
     },
     "node_modules/@stencil/sass": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/@stencil/sass/-/sass-3.0.0.tgz",
-      "integrity": "sha512-P9NuT5G2ncy+BkQ0fAS+KDuwN+BlDr17yEAHCaEejGZDXK4hhhsxjm0ea8KCwEdDbzui4GDF6DS3VNDtUB6Hzg==",
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@stencil/sass/-/sass-3.0.2.tgz",
+      "integrity": "sha512-T8hQreosCjZ6yZ7wJgZBrA1ytL4JMluY1dX6S1a/YgXclanvncvk6nGEpxRVVwRAvtkru0F5Qs+oheiL8nifRA==",
       "dev": true,
       "peerDependencies": {
         "@stencil/core": ">=2.0.0 || >=3.0.0-beta.0"
       }
     },
     "node_modules/@stencil/vue-output-target": {
-      "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==",
+      "version": "0.8.4",
+      "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.8.4.tgz",
+      "integrity": "sha512-3iESCce7D/2lNVYGM+ukwW/NLFAfeAOcaMFXaK0R1Ub0mZ2YwL9N1rxr9Y8UGfdUzkpi66XIo0jNm3V9YlZ+Ig==",
       "dev": true,
       "peerDependencies": {
         "@stencil/core": "^2.9.0 || ^3.0.0"
@@ -8150,14 +8150,14 @@
       }
     },
     "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==",
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.33.0.tgz",
+      "integrity": "sha512-+zzU3V2TslRX2ETBRgQKsKytYBkJeLZ2xzUj4JohnZnxQnivoUvOvNbRBYWSYykQTO0Y4zb8NwZTYFUO+EpPBQ==",
       "dev": true,
       "hasInstallScript": true,
       "peer": true,
       "dependencies": {
-        "playwright-core": "1.32.3"
+        "playwright-core": "1.33.0"
       },
       "bin": {
         "playwright": "cli.js"
@@ -8167,9 +8167,9 @@
       }
     },
     "node_modules/playwright-core": {
-      "version": "1.32.3",
-      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.32.3.tgz",
-      "integrity": "sha512-SB+cdrnu74ZIn5Ogh/8278ngEh9NEEV0vR4sJFmK04h2iZpybfbqBY0bX6+BLYWVdV12JLLI+JEFtSnYgR+mWg==",
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.33.0.tgz",
+      "integrity": "sha512-aizyPE1Cj62vAECdph1iaMILpT0WUDCq3E6rW6I+dleSbBoGbktvJtzS6VHkZ4DKNEOG9qJpiom/ZxO+S15LAw==",
       "dev": true,
       "bin": {
         "playwright": "cli.js"
@@ -11398,14 +11398,14 @@
       }
     },
     "@playwright/test": {
-      "version": "1.32.3",
-      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.32.3.tgz",
-      "integrity": "sha512-BvWNvK0RfBriindxhLVabi8BRe3X0J9EVjKlcmhxjg4giWBD/xleLcg2dz7Tx0agu28rczjNIPQWznwzDwVsZQ==",
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.33.0.tgz",
+      "integrity": "sha512-YunBa2mE7Hq4CfPkGzQRK916a4tuZoVx/EpLjeWlTVOnD4S2+fdaQZE0LJkbfhN5FTSKNLdcl7MoT5XB37bTkg==",
       "dev": true,
       "requires": {
         "@types/node": "*",
         "fsevents": "2.3.2",
-        "playwright-core": "1.32.3"
+        "playwright-core": "1.33.0"
       }
     },
     "@rollup/plugin-node-resolve": {
@@ -11467,9 +11467,9 @@
       "requires": {}
     },
     "@stencil/core": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-3.2.1.tgz",
-      "integrity": "sha512-Ybm4NteQBScLq3H0JML/uqo4nWjNpZw1HAAURtR5LlRm7ptzNKO5S8EnHp3m05/uyTzeh9yLpUFHY7bxGNdYLg=="
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-3.2.2.tgz",
+      "integrity": "sha512-wXb9cVWL0T3cTwYLveekdTFCRGx6+9hpVDEXna+N8K8OPoW6xtFAHRLv+LjOM7k59PkA8MG3IinAfV7Y+xa0Hw=="
     },
     "@stencil/react-output-target": {
       "version": "0.5.0",
@@ -11479,16 +11479,16 @@
       "requires": {}
     },
     "@stencil/sass": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/@stencil/sass/-/sass-3.0.0.tgz",
-      "integrity": "sha512-P9NuT5G2ncy+BkQ0fAS+KDuwN+BlDr17yEAHCaEejGZDXK4hhhsxjm0ea8KCwEdDbzui4GDF6DS3VNDtUB6Hzg==",
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@stencil/sass/-/sass-3.0.2.tgz",
+      "integrity": "sha512-T8hQreosCjZ6yZ7wJgZBrA1ytL4JMluY1dX6S1a/YgXclanvncvk6nGEpxRVVwRAvtkru0F5Qs+oheiL8nifRA==",
       "dev": true,
       "requires": {}
     },
     "@stencil/vue-output-target": {
-      "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==",
+      "version": "0.8.4",
+      "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.8.4.tgz",
+      "integrity": "sha512-3iESCce7D/2lNVYGM+ukwW/NLFAfeAOcaMFXaK0R1Ub0mZ2YwL9N1rxr9Y8UGfdUzkpi66XIo0jNm3V9YlZ+Ig==",
       "dev": true,
       "requires": {}
     },
@@ -16275,19 +16275,19 @@
       }
     },
     "playwright": {
-      "version": "1.32.3",
-      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.32.3.tgz",
-      "integrity": "sha512-h/ylpgoj6l/EjkfUDyx8cdOlfzC96itPpPe8BXacFkqpw/YsuxkpPyVbzEq4jw+bAJh5FLgh31Ljg2cR6HV3uw==",
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.33.0.tgz",
+      "integrity": "sha512-+zzU3V2TslRX2ETBRgQKsKytYBkJeLZ2xzUj4JohnZnxQnivoUvOvNbRBYWSYykQTO0Y4zb8NwZTYFUO+EpPBQ==",
       "dev": true,
       "peer": true,
       "requires": {
-        "playwright-core": "1.32.3"
+        "playwright-core": "1.33.0"
       }
     },
     "playwright-core": {
-      "version": "1.32.3",
-      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.32.3.tgz",
-      "integrity": "sha512-SB+cdrnu74ZIn5Ogh/8278ngEh9NEEV0vR4sJFmK04h2iZpybfbqBY0bX6+BLYWVdV12JLLI+JEFtSnYgR+mWg==",
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.33.0.tgz",
+      "integrity": "sha512-aizyPE1Cj62vAECdph1iaMILpT0WUDCq3E6rW6I+dleSbBoGbktvJtzS6VHkZ4DKNEOG9qJpiom/ZxO+S15LAw==",
       "dev": true
     },
     "postcss": {

core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/core",
-  "version": "7.0.4",
+  "version": "7.0.7",
   "description": "Base components for Ionic",
   "keywords": [
     "ionic",
@@ -31,7 +31,7 @@
     "loader/"
   ],
   "dependencies": {
-    "@stencil/core": "^3.2.1",
+    "@stencil/core": "^3.2.2",
     "ionicons": "^7.1.0",
     "tslib": "^2.1.0"
   },
@@ -40,13 +40,13 @@
     "@ionic/eslint-config": "^0.3.0",
     "@ionic/prettier-config": "^2.0.0",
     "@jest/core": "^27.5.1",
-    "@playwright/test": "^1.32.3",
+    "@playwright/test": "^1.33.0",
     "@rollup/plugin-node-resolve": "^8.4.0",
     "@rollup/plugin-virtual": "^2.0.3",
     "@stencil/angular-output-target": "^0.6.0",
     "@stencil/react-output-target": "^0.5.0",
-    "@stencil/sass": "^3.0.0",
-    "@stencil/vue-output-target": "^0.8.2",
+    "@stencil/sass": "^3.0.2",
+    "@stencil/vue-output-target": "^0.8.4",
     "@types/jest": "^27.5.2",
     "@types/node": "^14.6.0",
     "@typescript-eslint/eslint-plugin": "^5.17.0",

core/playwright.config.ts

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

core/src/components.d.ts

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

core/src/components/accordion/accordion.tsx

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

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

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

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

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

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

@@ -4,7 +4,7 @@ import { AccordionGroup } from '../../accordion-group/accordion-group.tsx';
 import { Item } from '../../item/item.tsx';
 import { Accordion } from '../accordion.tsx';
 
-it('should open correct accordions', async () => {
+it('should open correct accordions when accordion group value is set', async () => {
   const page = await newSpecPage({
     components: [Item, Accordion, AccordionGroup],
     html: `
@@ -40,6 +40,42 @@ it('should open correct accordions', async () => {
   expect(accordions[2].classList.contains('accordion-collapsed')).toEqual(true);
 });
 
+it('should open correct accordions when accordion value is set', async () => {
+  const page = await newSpecPage({
+    components: [Item, Accordion, AccordionGroup],
+    html: `
+      <ion-accordion-group animated="false" value="first">
+        <ion-accordion>
+          <ion-item slot="header">Label</ion-item>
+          <div slot="content">Content</div>
+        </ion-accordion>
+        <ion-accordion value="second">
+          <ion-item slot="header">Label</ion-item>
+          <div slot="content">Content</div>
+        </ion-accordion>
+        <ion-accordion value="third">
+          <ion-item slot="header">Label</ion-item>
+          <div slot="content">Content</div>
+        </ion-accordion>
+      </ion-accordion-group>
+    `,
+  });
+
+  const accordionGroup = page.body.querySelector('ion-accordion-group');
+  const accordions = accordionGroup.querySelectorAll('ion-accordion');
+
+  accordions.forEach((accordion) => {
+    expect(accordion.classList.contains('accordion-collapsed')).toEqual(true);
+  });
+
+  accordions[0].value = 'first';
+  await page.waitForChanges();
+
+  expect(accordions[0].classList.contains('accordion-collapsed')).toEqual(false);
+  expect(accordions[1].classList.contains('accordion-collapsed')).toEqual(true);
+  expect(accordions[2].classList.contains('accordion-collapsed')).toEqual(true);
+});
+
 it('should open more than one accordion when multiple="true"', async () => {
   const page = await newSpecPage({
     components: [Item, Accordion, AccordionGroup],

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,17 +1,20 @@
 import { expect } from '@playwright/test';
-import type { Locator } from '@playwright/test';
-import { test } from '@utils/test/playwright';
-import type { E2EPage } from '@utils/test/playwright';
+import { configs, test } from '@utils/test/playwright';
 
-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();
+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 }) => {
       const ionActionSheetDidDismiss = await page.spyOnEvent('ionActionSheetDidDismiss');
 
       await actionSheetFixture.open('#buttonData');
@@ -22,8 +25,7 @@ test.describe('action sheet: basic', () => {
       await ionActionSheetDidDismiss.next();
       expect(ionActionSheetDidDismiss).toHaveReceivedEventDetail({ data: { type: '1' }, role: undefined });
     });
-    test('should return cancel button data', async ({ page, skip }) => {
-      skip.rtl();
+    test('should return cancel button data', async ({ page }) => {
       const ionActionSheetDidDismiss = await page.spyOnEvent('ionActionSheetDidDismiss');
 
       await actionSheetFixture.open('#buttonData');
@@ -35,53 +37,26 @@ test.describe('action sheet: basic', () => {
       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');
+});
 
-      const actionSheet = page.locator('ion-action-sheet');
-      await expect(actionSheet).toHaveAttribute('data-testid', 'basic-action-sheet');
-    });
-  });
-  test.describe('action sheet: variants', () => {
-    test('should open basic action sheet', async () => {
-      await actionSheetFixture.open('#basic');
-      await actionSheetFixture.screenshot('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);
 
-      /**
-       * 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();
+      await page.goto(`/src/components/action-sheet/test/basic`, config);
     });
-    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();
+    test('should open custom backdrop action sheet', async ({ page }) => {
       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, skip }) => {
-      skip.rtl();
+    test('should open alert from action sheet', async ({ page }) => {
       const ionAlertDidPresent = await page.spyOnEvent('ionAlertDidPresent');
       await actionSheetFixture.open('#alertFromActionSheet');
 
@@ -89,8 +64,7 @@ test.describe('action sheet: basic', () => {
 
       await ionAlertDidPresent.next();
     });
-    test('should not dismiss action sheet when backdropDismiss: false', async ({ page, skip }) => {
-      skip.rtl();
+    test('should not dismiss action sheet when backdropDismiss: false', async ({ page }) => {
       await actionSheetFixture.open('#noBackdropDismiss');
 
       const actionSheet = page.locator('ion-action-sheet');
@@ -99,9 +73,17 @@ test.describe('action sheet: basic', () => {
       await expect(actionSheet).toBeVisible();
     });
   });
-  test.describe('action sheet: focus trap', () => {
-    test('it should trap focus in action sheet', async ({ page, skip, browserName }) => {
-      skip.rtl();
+});
+
+/**
+ * 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);
+
       const tabKey = browserName === 'webkit' ? 'Alt+Tab' : 'Tab';
 
       await actionSheetFixture.open('#basic');
@@ -118,34 +100,3 @@ test.describe('action sheet: basic', () => {
     });
   });
 });
-
-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`
-    );
-  }
-}

core/src/components/action-sheet/test/basic/action-sheet.spec.tsx

@@ -0,0 +1,17 @@
+import { h } from '@stencil/core';
+import { newSpecPage } from '@stencil/core/testing';
+
+import { ActionSheet } from '../../action-sheet';
+
+describe('action sheet: htmlAttributes inheritance', () => {
+  it('should correctly inherit attributes on host', async () => {
+    const page = await newSpecPage({
+      components: [ActionSheet],
+      template: () => <ion-action-sheet htmlAttributes={{ 'data-testid': 'basic-action-sheet' }}></ion-action-sheet>,
+    });
+
+    const actionSheet = page.body.querySelector('ion-action-sheet');
+
+    await expect(actionSheet.getAttribute('data-testid')).toBe('basic-action-sheet');
+  });
+});

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

@@ -0,0 +1,42 @@
+import type { Locator } from '@playwright/test';
+import { expect } from '@playwright/test';
+import type { E2EPage } from '@utils/test/playwright';
+
+export class ActionSheetFixture {
+  readonly page: E2EPage;
+  readonly screenshotFn?: (file: string) => string;
+
+  private actionSheet!: Locator;
+
+  constructor(page: E2EPage, screenshot?: (file: string) => string) {
+    this.page = page;
+    this.screenshotFn = screenshot;
+  }
+
+  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) {
+    const { screenshotFn } = this;
+
+    if (!screenshotFn) {
+      throw new Error(
+        'A screenshot function is required to take a screenshot. Pass one in when creating ActionSheetFixture.'
+      );
+    }
+
+    await expect(this.actionSheet).toHaveScreenshot(screenshotFn(`action-sheet-${modifier}-diff`));
+  }
+}